+ + + +

+ {currentUser?.email} +

+ {isWorkspaceCreationDisabled ? ( +

+ {t("workspace_creation.errors.creation_disabled.title")} +

+ {t("workspace_creation.errors.creation_disabled.description")} +

+ + + {t("workspace_creation.errors.creation_disabled.request_button")} + +

+ ) : ( +

{t("workspace_creation.heading")}

+ +

+ )} +

+ + ); +}); + +export default CreateWorkspacePage; diff --git a/apps/web/app/(all)/invitations/layout.tsx b/apps/web/app/(all)/invitations/layout.tsx new file mode 100644 index 0000000..68f4fe7 --- /dev/null +++ b/apps/web/app/(all)/invitations/layout.tsx @@ -0,0 +1,14 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Outlet } from "react-router"; +import type { Route } from "./+types/layout"; + +export default function InvitationsLayout() { + return ; +} + +export const meta: Route.MetaFunction = () => [{ title: "Invitations" }]; diff --git a/apps/web/app/(all)/invitations/page.tsx b/apps/web/app/(all)/invitations/page.tsx new file mode 100644 index 0000000..f325f27 --- /dev/null +++ b/apps/web/app/(all)/invitations/page.tsx @@ -0,0 +1,202 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useState } from "react"; +import { observer } from "mobx-react"; +import Link from "next/link"; + +import useSWR, { mutate } from "swr"; +import { TickCircleOutline } from "@makeplane/propel/icons"; +// plane imports +import { ROLE } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +// types +import { Button } from "@plane/propel/button"; +import { PlaneLogo } from "@plane/propel/icons"; +import { TOAST_TYPE, setToast } from "@plane/propel/toast"; +import type { IWorkspaceMemberInvitation } from "@plane/types"; +import { truncateText } from "@plane/utils"; +// assets +import emptyInvitation from "@/app/assets/empty-state/invitation.svg?url"; +// components +import { EmptyState } from "@/components/common/empty-state"; +import { WorkspaceLogo } from "@/components/workspace/logo"; +import { USER_WORKSPACES_LIST } from "@plane/constants"; +// hooks +import { useWorkspace } from "@/hooks/store/use-workspace"; +import { useUser, useUserProfile } from "@/hooks/store/user"; +import { useAppRouter } from "@/hooks/use-app-router"; +// services +import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper"; +// plane web services +import { WorkspaceService } from "@/services/workspace.service"; + +const workspaceService = new WorkspaceService(); + +function UserInvitationsPage() { + // states + const [invitationsRespond, setInvitationsRespond] = useState([]); + const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false); + // router + const router = useAppRouter(); + // store hooks + const { t } = useTranslation(); + const { data: currentUser } = useUser(); + const { updateUserProfile } = useUserProfile(); + + const { fetchWorkspaces } = useWorkspace(); + + const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations()); + + const redirectWorkspaceSlug = + // currentUserSettings?.workspace?.last_workspace_slug || + // currentUserSettings?.workspace?.fallback_workspace_slug || + ""; + + const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => { + if (action === "accepted") { + setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]); + } else if (action === "withdraw") { + setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id)); + } + }; + + const submitInvitations = () => { + if (invitationsRespond.length === 0) { + setToast({ + type: TOAST_TYPE.ERROR, + title: t("error"), + message: t("please_select_at_least_one_invitation"), + }); + return; + } + + setIsJoiningWorkspaces(true); + + workspaceService + .joinWorkspaces({ invitations: invitationsRespond }) + .then(() => { + mutate(USER_WORKSPACES_LIST); + const firstInviteId = invitationsRespond[0]; + const redirectWorkspace = invitations?.find((i) => i.id === firstInviteId)?.workspace; + updateUserProfile({ last_workspace_id: redirectWorkspace?.id }) + .then(() => { + setIsJoiningWorkspaces(false); + fetchWorkspaces().then(() => { + router.push(`/${redirectWorkspace?.slug}`); + }); + }) + .catch(() => { + setToast({ + type: TOAST_TYPE.ERROR, + title: t("error"), + message: t("something_went_wrong_please_try_again"), + }); + setIsJoiningWorkspaces(false); + }); + }) + .catch((_err) => { + setToast({ + type: TOAST_TYPE.ERROR, + title: t("error"), + message: t("something_went_wrong_please_try_again"), + }); + setIsJoiningWorkspaces(false); + }); + }; + + return ( + +

+ + + +

+ {currentUser?.email} +

+ {invitations ? ( + invitations.length > 0 ? ( +

{t("we_see_that_someone_has_invited_you_to_join_a_workspace")}

{t("join_a_workspace")}

+ {invitations.map((invitation) => { + const isSelected = invitationsRespond.includes(invitation.id); + + return ( +

handleInvitation(invitation, isSelected ? "withdraw" : "accepted")} + > +

+ +

{truncateText(invitation.workspace.name, 30)}

{ROLE[invitation.role]}

+ + + +

+ ); + })} +

+ + + + + + +

+ ) : ( +

+ router.push("/"), + }} + /> +

+ ) + ) : null} +

+ + ); +} + +export default observer(UserInvitationsPage); diff --git a/apps/web/app/(all)/layout.preload.tsx b/apps/web/app/(all)/layout.preload.tsx new file mode 100644 index 0000000..e070eaa --- /dev/null +++ b/apps/web/app/(all)/layout.preload.tsx @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// TODO: Check if we need this +// https://nextjs.org/docs/app/api-reference/functions/generate-metadata#link-relpreload +// export const usePreloadResources = () => { +// useEffect(() => { +// const preloadItem = (url: string) => { +// ReactDOM.preload(url, { as: "fetch", crossOrigin: "use-credentials" }); +// }; + +// const urls = [ +// `${process.env.VITE_API_BASE_URL}/api/instances/`, +// `${process.env.VITE_API_BASE_URL}/api/users/me/`, +// `${process.env.VITE_API_BASE_URL}/api/users/me/profile/`, +// `${process.env.VITE_API_BASE_URL}/api/users/me/settings/`, +// `${process.env.VITE_API_BASE_URL}/api/users/me/workspaces/?v=${Date.now()}`, +// ]; + +// urls.forEach((url) => preloadItem(url)); +// }, []); +// }; + +export function PreloadResources() { + return ( + // usePreloadResources(); + null + ); +} diff --git a/apps/web/app/(all)/layout.tsx b/apps/web/app/(all)/layout.tsx new file mode 100644 index 0000000..ab06034 --- /dev/null +++ b/apps/web/app/(all)/layout.tsx @@ -0,0 +1,23 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Outlet } from "react-router"; +import type { Route } from "./+types/layout"; +import { PreloadResources } from "./layout.preload"; + +export const meta: Route.MetaFunction = () => [ + { name: "robots", content: "noindex, nofollow" }, + { name: "viewport", content: "width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover" }, +]; + +export default function AppLayout() { + return ( + <> + + + + ); +} diff --git a/apps/web/app/(all)/onboarding/layout.tsx b/apps/web/app/(all)/onboarding/layout.tsx new file mode 100644 index 0000000..fee10f7 --- /dev/null +++ b/apps/web/app/(all)/onboarding/layout.tsx @@ -0,0 +1,14 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Outlet } from "react-router"; +import type { Route } from "./+types/layout"; + +export default function OnboardingLayout() { + return ; +} + +export const meta: Route.MetaFunction = () => [{ title: "Onboarding" }]; diff --git a/apps/web/app/(all)/onboarding/page.tsx b/apps/web/app/(all)/onboarding/page.tsx new file mode 100644 index 0000000..86ef1b1 --- /dev/null +++ b/apps/web/app/(all)/onboarding/page.tsx @@ -0,0 +1,66 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +import useSWR from "swr"; + +// components +import { LogoSpinner } from "@/components/common/logo-spinner"; +import { OnboardingRoot } from "@/components/onboarding"; +// constants +import { USER_WORKSPACES_LIST } from "@plane/constants"; +// helpers +import { EPageTypes } from "@/helpers/authentication.helper"; +// hooks +import { useWorkspace } from "@/hooks/store/use-workspace"; +import { useUser } from "@/hooks/store/user"; +// wrappers +import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper"; +// services +import { WorkspaceService } from "@/services/workspace.service"; + +const workspaceService = new WorkspaceService(); + +function OnboardingPage() { + // store hooks + const { data: user } = useUser(); + const { fetchWorkspaces } = useWorkspace(); + + // fetching workspaces list + useSWR(USER_WORKSPACES_LIST, () => { + if (user?.id) { + fetchWorkspaces(); + } + }); + + // fetching user workspace invitations + const { isLoading: invitationsLoader, data: invitations } = useSWR( + `USER_WORKSPACE_INVITATIONS_LIST_${user?.id}`, + () => { + if (user?.id) return workspaceService.userWorkspaceInvitations(); + } + ); + + return ( + +

+ {user && !invitationsLoader ? ( + + ) : ( +

+ +

+ )} +

+ + ); +} + +export default observer(OnboardingPage); diff --git a/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx b/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx new file mode 100644 index 0000000..d7df27c --- /dev/null +++ b/apps/web/app/(all)/settings/profile/[profileTabId]/page.tsx @@ -0,0 +1,61 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +// plane imports +import { PROFILE_SETTINGS_TABS } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +import type { TProfileSettingsTabs } from "@plane/types"; +// components +import { LogoSpinner } from "@/components/common/logo-spinner"; +import { PageHead } from "@/components/core/page-title"; +import { ProfileSettingsContent } from "@/components/settings/profile/content"; +import { ProfileSettingsSidebarRoot } from "@/components/settings/profile/sidebar"; +// hooks +import { useUser } from "@/hooks/store/user"; +import { useAppRouter } from "@/hooks/use-app-router"; +// local imports +import type { Route } from "../+types/layout"; + +function ProfileSettingsPage(props: Route.ComponentProps) { + const { profileTabId } = props.params; + // router + const router = useAppRouter(); + // store hooks + const { data: currentUser } = useUser(); + // translation + const { t } = useTranslation(); + // derived values + const isAValidTab = PROFILE_SETTINGS_TABS.includes(profileTabId as TProfileSettingsTabs); + + if (!currentUser || !isAValidTab) + return ( +

+ +

+ ); + + return ( + <> + +

+ router.push(`/settings/profile/${tab}`)} + /> + +

+ + ); +} + +export default observer(ProfileSettingsPage); diff --git a/apps/web/app/(all)/settings/profile/layout.tsx b/apps/web/app/(all)/settings/profile/layout.tsx new file mode 100644 index 0000000..a30518f --- /dev/null +++ b/apps/web/app/(all)/settings/profile/layout.tsx @@ -0,0 +1,28 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Outlet } from "react-router"; +// components +import { ProjectsAppPowerKProvider } from "@/components/power-k/projects-app-provider"; +// lib +import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper"; + +export default function ProfileSettingsLayout() { + return ( + <> + + +

+ +

+ + + ); +} diff --git a/apps/web/app/(all)/sign-up/layout.tsx b/apps/web/app/(all)/sign-up/layout.tsx new file mode 100644 index 0000000..97a8147 --- /dev/null +++ b/apps/web/app/(all)/sign-up/layout.tsx @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Outlet } from "react-router"; +import type { Route } from "./+types/layout"; + +export const meta: Route.MetaFunction = () => [ + { title: "Sign up - Plane" }, + { name: "robots", content: "index, nofollow" }, +]; + +export default function SignUpLayout() { + return ; +} diff --git a/apps/web/app/(all)/sign-up/page.tsx b/apps/web/app/(all)/sign-up/page.tsx new file mode 100644 index 0000000..639d765 --- /dev/null +++ b/apps/web/app/(all)/sign-up/page.tsx @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// components +import { AuthBase } from "@/components/auth-screens/auth-base"; +// helpers +import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper"; +// assets +import DefaultLayout from "@/layouts/default-layout"; +import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper"; + +function SignUpPage() { + return ( + + + + + + ); +} + +export default SignUpPage; diff --git a/apps/web/app/(all)/workspace-invitations/layout.tsx b/apps/web/app/(all)/workspace-invitations/layout.tsx new file mode 100644 index 0000000..b9a7337 --- /dev/null +++ b/apps/web/app/(all)/workspace-invitations/layout.tsx @@ -0,0 +1,14 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Outlet } from "react-router"; +import type { Route } from "./+types/layout"; + +export default function WorkspaceInvitationsLayout() { + return ; +} + +export const meta: Route.MetaFunction = () => [{ title: "Workspace Invitations" }]; diff --git a/apps/web/app/(all)/workspace-invitations/page.tsx b/apps/web/app/(all)/workspace-invitations/page.tsx new file mode 100644 index 0000000..d7e580e --- /dev/null +++ b/apps/web/app/(all)/workspace-invitations/page.tsx @@ -0,0 +1,138 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +import { useSearchParams } from "next/navigation"; +import useSWR from "swr"; +import { + BoxesOutline, + CloseOutline, + ShareAltOutline, + StarOutline, + TickOutline, + UserOutline, +} from "@makeplane/propel/icons"; +// components +import { LogoSpinner } from "@/components/common/logo-spinner"; +import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space"; +// constants +import { WORKSPACE_INVITATION } from "@plane/constants"; +// helpers +import { EPageTypes } from "@/helpers/authentication.helper"; +// hooks +import { useUser } from "@/hooks/store/user"; +import { useAppRouter } from "@/hooks/use-app-router"; +// wrappers +import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper"; +import { WorkspaceService } from "@/services/workspace.service"; +// services + +// service initialization +const workspaceService = new WorkspaceService(); + +function WorkspaceInvitationPage() { + // router + const router = useAppRouter(); + // query params + const searchParams = useSearchParams(); + const invitation_id = searchParams.get("invitation_id"); + const slug = searchParams.get("slug"); + const token = searchParams.get("token"); + // store hooks + const { data: currentUser } = useUser(); + + const { data: invitationDetail, error } = useSWR( + invitation_id && slug && WORKSPACE_INVITATION(invitation_id.toString()), + invitation_id && slug + ? () => workspaceService.getWorkspaceInvitation(slug.toString(), invitation_id.toString()) + : null + ); + + const handleAccept = () => { + if (!invitationDetail) return; + workspaceService + .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, { + accepted: true, + token: token, + }) + .then(() => { + if (invitationDetail.email === currentUser?.email) { + router.push(`/${invitationDetail.workspace.slug}`); + } else { + router.push("/"); + } + }) + .catch((err: unknown) => console.error(err)); + }; + + const handleReject = () => { + if (!invitationDetail || !token) return; + void workspaceService + .joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, { + accepted: false, + token: token, + }) + .then(() => { + router.push("/"); + }) + .catch((err: unknown) => console.error(err)); + }; + + return ( + +

+ {invitationDetail && !invitationDetail.responded_at ? ( + error ? ( +

INVITATION NOT FOUND

+ ) : ( + + + + + ) + ) : error || invitationDetail?.responded_at ? ( + invitationDetail?.accepted ? ( + + + + ) : ( + + {!currentUser ? ( + + ) : ( + + )} + + + + ) + ) : ( +

+ +

+ )} +

+ + ); +} + +export default observer(WorkspaceInvitationPage); diff --git a/apps/web/app/(home)/layout.tsx b/apps/web/app/(home)/layout.tsx new file mode 100644 index 0000000..c723b07 --- /dev/null +++ b/apps/web/app/(home)/layout.tsx @@ -0,0 +1,18 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Outlet } from "react-router"; +// types +import type { Route } from "./+types/layout"; + +export const meta: Route.MetaFunction = () => [ + { name: "robots", content: "index, nofollow" }, + { name: "viewport", content: "width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover" }, +]; + +export default function HomeLayout() { + return ; +} diff --git a/apps/web/app/(home)/page.tsx b/apps/web/app/(home)/page.tsx new file mode 100644 index 0000000..4717705 --- /dev/null +++ b/apps/web/app/(home)/page.tsx @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React from "react"; +// components +import { AuthBase } from "@/components/auth-screens/auth-base"; +// helpers +import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper"; +// layouts +import DefaultLayout from "@/layouts/default-layout"; +// wrappers +import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper"; + +function HomePage() { + return ( + + + + + + ); +} + +export default HomePage; diff --git a/apps/web/app/assets/404.svg b/apps/web/app/assets/404.svg new file mode 100644 index 0000000..4c29841 --- /dev/null +++ b/apps/web/app/assets/404.svg @@ -0,0 +1,17 @@ + diff --git a/apps/web/app/assets/attachment/audio-icon.png b/apps/web/app/assets/attachment/audio-icon.png new file mode 100644 index 0000000..a3e551e Binary files /dev/null and b/apps/web/app/assets/attachment/audio-icon.png differ diff --git a/apps/web/app/assets/attachment/css-icon.png b/apps/web/app/assets/attachment/css-icon.png new file mode 100644 index 0000000..cfb502d Binary files /dev/null and b/apps/web/app/assets/attachment/css-icon.png differ diff --git a/apps/web/app/assets/attachment/csv-icon.png b/apps/web/app/assets/attachment/csv-icon.png new file mode 100644 index 0000000..39d0ee7 Binary files /dev/null and b/apps/web/app/assets/attachment/csv-icon.png differ diff --git a/apps/web/app/assets/attachment/default-icon.png b/apps/web/app/assets/attachment/default-icon.png new file mode 100644 index 0000000..eb1ea51 Binary files /dev/null and b/apps/web/app/assets/attachment/default-icon.png differ diff --git a/apps/web/app/assets/attachment/doc-icon.png b/apps/web/app/assets/attachment/doc-icon.png new file mode 100644 index 0000000..d143372 Binary files /dev/null and b/apps/web/app/assets/attachment/doc-icon.png differ diff --git a/apps/web/app/assets/attachment/excel-icon.png b/apps/web/app/assets/attachment/excel-icon.png new file mode 100644 index 0000000..b3a1b85 Binary files /dev/null and b/apps/web/app/assets/attachment/excel-icon.png differ diff --git a/apps/web/app/assets/attachment/figma-icon.png b/apps/web/app/assets/attachment/figma-icon.png new file mode 100644 index 0000000..b4a1b63 Binary files /dev/null and b/apps/web/app/assets/attachment/figma-icon.png differ diff --git a/apps/web/app/assets/attachment/html-icon.png b/apps/web/app/assets/attachment/html-icon.png new file mode 100644 index 0000000..b6259a2 Binary files /dev/null and b/apps/web/app/assets/attachment/html-icon.png differ diff --git a/apps/web/app/assets/attachment/img-icon.png b/apps/web/app/assets/attachment/img-icon.png new file mode 100644 index 0000000..6c5b8fc Binary files /dev/null and b/apps/web/app/assets/attachment/img-icon.png differ diff --git a/apps/web/app/assets/attachment/jpg-icon.png b/apps/web/app/assets/attachment/jpg-icon.png new file mode 100644 index 0000000..dfd2c9f Binary files /dev/null and b/apps/web/app/assets/attachment/jpg-icon.png differ diff --git a/apps/web/app/assets/attachment/js-icon.png b/apps/web/app/assets/attachment/js-icon.png new file mode 100644 index 0000000..66aacda Binary files /dev/null and b/apps/web/app/assets/attachment/js-icon.png differ diff --git a/apps/web/app/assets/attachment/pdf-icon.png b/apps/web/app/assets/attachment/pdf-icon.png new file mode 100644 index 0000000..21c42d7 Binary files /dev/null and b/apps/web/app/assets/attachment/pdf-icon.png differ diff --git a/apps/web/app/assets/attachment/png-icon.png b/apps/web/app/assets/attachment/png-icon.png new file mode 100644 index 0000000..f04207d Binary files /dev/null and b/apps/web/app/assets/attachment/png-icon.png differ diff --git a/apps/web/app/assets/attachment/rar-icon.png b/apps/web/app/assets/attachment/rar-icon.png new file mode 100644 index 0000000..7305455 Binary files /dev/null and b/apps/web/app/assets/attachment/rar-icon.png differ diff --git a/apps/web/app/assets/attachment/svg-icon.png b/apps/web/app/assets/attachment/svg-icon.png new file mode 100644 index 0000000..856f94f Binary files /dev/null and b/apps/web/app/assets/attachment/svg-icon.png differ diff --git a/apps/web/app/assets/attachment/txt-icon.png b/apps/web/app/assets/attachment/txt-icon.png new file mode 100644 index 0000000..1c1babf Binary files /dev/null and b/apps/web/app/assets/attachment/txt-icon.png differ diff --git a/apps/web/app/assets/attachment/video-icon.png b/apps/web/app/assets/attachment/video-icon.png new file mode 100644 index 0000000..510838d Binary files /dev/null and b/apps/web/app/assets/attachment/video-icon.png differ diff --git a/apps/web/app/assets/attachment/zip-icon.png b/apps/web/app/assets/attachment/zip-icon.png new file mode 100644 index 0000000..0db1da1 Binary files /dev/null and b/apps/web/app/assets/attachment/zip-icon.png differ diff --git a/apps/web/app/assets/auth/access-denied.svg b/apps/web/app/assets/auth/access-denied.svg new file mode 100644 index 0000000..c7979fe --- /dev/null +++ b/apps/web/app/assets/auth/access-denied.svg @@ -0,0 +1,49 @@ + diff --git a/apps/web/app/assets/auth/background-pattern-dark.svg b/apps/web/app/assets/auth/background-pattern-dark.svg new file mode 100644 index 0000000..c258cba --- /dev/null +++ b/apps/web/app/assets/auth/background-pattern-dark.svg @@ -0,0 +1,68 @@ + diff --git a/apps/web/app/assets/auth/background-pattern.svg b/apps/web/app/assets/auth/background-pattern.svg new file mode 100644 index 0000000..5fcbeec --- /dev/null +++ b/apps/web/app/assets/auth/background-pattern.svg @@ -0,0 +1,68 @@ + diff --git a/apps/web/app/assets/auth/gradient-bg-logo.webp b/apps/web/app/assets/auth/gradient-bg-logo.webp new file mode 100644 index 0000000..47202e5 Binary files /dev/null and b/apps/web/app/assets/auth/gradient-bg-logo.webp differ diff --git a/apps/web/app/assets/auth/gradient-logo.webp b/apps/web/app/assets/auth/gradient-logo.webp new file mode 100644 index 0000000..674434c Binary files /dev/null and b/apps/web/app/assets/auth/gradient-logo.webp differ diff --git a/apps/web/app/assets/auth/project-not-authorized.svg b/apps/web/app/assets/auth/project-not-authorized.svg new file mode 100644 index 0000000..515fd68 --- /dev/null +++ b/apps/web/app/assets/auth/project-not-authorized.svg @@ -0,0 +1,44 @@ + diff --git a/apps/web/app/assets/auth/unauthorized.svg b/apps/web/app/assets/auth/unauthorized.svg new file mode 100644 index 0000000..2bad48a --- /dev/null +++ b/apps/web/app/assets/auth/unauthorized.svg @@ -0,0 +1,44 @@ + \ No newline at end of file diff --git a/apps/web/app/assets/auth/workspace-not-authorized.svg b/apps/web/app/assets/auth/workspace-not-authorized.svg new file mode 100644 index 0000000..dad2b0c --- /dev/null +++ b/apps/web/app/assets/auth/workspace-not-authorized.svg @@ -0,0 +1,44 @@ + diff --git a/apps/web/app/assets/cover-images/image_1.jpg b/apps/web/app/assets/cover-images/image_1.jpg new file mode 100644 index 0000000..3565e88 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_1.jpg differ diff --git a/apps/web/app/assets/cover-images/image_10.jpg b/apps/web/app/assets/cover-images/image_10.jpg new file mode 100644 index 0000000..cecad95 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_10.jpg differ diff --git a/apps/web/app/assets/cover-images/image_11.jpg b/apps/web/app/assets/cover-images/image_11.jpg new file mode 100644 index 0000000..ebe34f2 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_11.jpg differ diff --git a/apps/web/app/assets/cover-images/image_12.jpg b/apps/web/app/assets/cover-images/image_12.jpg new file mode 100644 index 0000000..cae254d Binary files /dev/null and b/apps/web/app/assets/cover-images/image_12.jpg differ diff --git a/apps/web/app/assets/cover-images/image_13.jpg b/apps/web/app/assets/cover-images/image_13.jpg new file mode 100644 index 0000000..a3f4d40 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_13.jpg differ diff --git a/apps/web/app/assets/cover-images/image_14.jpg b/apps/web/app/assets/cover-images/image_14.jpg new file mode 100644 index 0000000..3b3da88 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_14.jpg differ diff --git a/apps/web/app/assets/cover-images/image_15.jpg b/apps/web/app/assets/cover-images/image_15.jpg new file mode 100644 index 0000000..3e44b7f Binary files /dev/null and b/apps/web/app/assets/cover-images/image_15.jpg differ diff --git a/apps/web/app/assets/cover-images/image_16.jpg b/apps/web/app/assets/cover-images/image_16.jpg new file mode 100644 index 0000000..f31335b Binary files /dev/null and b/apps/web/app/assets/cover-images/image_16.jpg differ diff --git a/apps/web/app/assets/cover-images/image_17.jpg b/apps/web/app/assets/cover-images/image_17.jpg new file mode 100644 index 0000000..d2a5034 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_17.jpg differ diff --git a/apps/web/app/assets/cover-images/image_18.jpg b/apps/web/app/assets/cover-images/image_18.jpg new file mode 100644 index 0000000..10cf37c Binary files /dev/null and b/apps/web/app/assets/cover-images/image_18.jpg differ diff --git a/apps/web/app/assets/cover-images/image_19.jpg b/apps/web/app/assets/cover-images/image_19.jpg new file mode 100644 index 0000000..dca5619 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_19.jpg differ diff --git a/apps/web/app/assets/cover-images/image_2.jpg b/apps/web/app/assets/cover-images/image_2.jpg new file mode 100644 index 0000000..a1adad5 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_2.jpg differ diff --git a/apps/web/app/assets/cover-images/image_20.jpg b/apps/web/app/assets/cover-images/image_20.jpg new file mode 100644 index 0000000..a8daf97 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_20.jpg differ diff --git a/apps/web/app/assets/cover-images/image_21.jpg b/apps/web/app/assets/cover-images/image_21.jpg new file mode 100644 index 0000000..57c094e Binary files /dev/null and b/apps/web/app/assets/cover-images/image_21.jpg differ diff --git a/apps/web/app/assets/cover-images/image_22.jpg b/apps/web/app/assets/cover-images/image_22.jpg new file mode 100644 index 0000000..9efc564 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_22.jpg differ diff --git a/apps/web/app/assets/cover-images/image_23.jpg b/apps/web/app/assets/cover-images/image_23.jpg new file mode 100644 index 0000000..fec33d9 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_23.jpg differ diff --git a/apps/web/app/assets/cover-images/image_24.jpg b/apps/web/app/assets/cover-images/image_24.jpg new file mode 100644 index 0000000..54c74a6 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_24.jpg differ diff --git a/apps/web/app/assets/cover-images/image_25.jpg b/apps/web/app/assets/cover-images/image_25.jpg new file mode 100644 index 0000000..66841c0 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_25.jpg differ diff --git a/apps/web/app/assets/cover-images/image_26.jpg b/apps/web/app/assets/cover-images/image_26.jpg new file mode 100644 index 0000000..d0c2766 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_26.jpg differ diff --git a/apps/web/app/assets/cover-images/image_27.jpg b/apps/web/app/assets/cover-images/image_27.jpg new file mode 100644 index 0000000..84abce2 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_27.jpg differ diff --git a/apps/web/app/assets/cover-images/image_28.jpg b/apps/web/app/assets/cover-images/image_28.jpg new file mode 100644 index 0000000..0ce78e3 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_28.jpg differ diff --git a/apps/web/app/assets/cover-images/image_29.jpg b/apps/web/app/assets/cover-images/image_29.jpg new file mode 100644 index 0000000..9df7aa0 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_29.jpg differ diff --git a/apps/web/app/assets/cover-images/image_3.jpg b/apps/web/app/assets/cover-images/image_3.jpg new file mode 100644 index 0000000..4518492 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_3.jpg differ diff --git a/apps/web/app/assets/cover-images/image_4.jpg b/apps/web/app/assets/cover-images/image_4.jpg new file mode 100644 index 0000000..04d1109 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_4.jpg differ diff --git a/apps/web/app/assets/cover-images/image_5.jpg b/apps/web/app/assets/cover-images/image_5.jpg new file mode 100644 index 0000000..6dcdb25 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_5.jpg differ diff --git a/apps/web/app/assets/cover-images/image_6.jpg b/apps/web/app/assets/cover-images/image_6.jpg new file mode 100644 index 0000000..f1cb9bf Binary files /dev/null and b/apps/web/app/assets/cover-images/image_6.jpg differ diff --git a/apps/web/app/assets/cover-images/image_7.jpg b/apps/web/app/assets/cover-images/image_7.jpg new file mode 100644 index 0000000..c70602c Binary files /dev/null and b/apps/web/app/assets/cover-images/image_7.jpg differ diff --git a/apps/web/app/assets/cover-images/image_8.jpg b/apps/web/app/assets/cover-images/image_8.jpg new file mode 100644 index 0000000..508bd55 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_8.jpg differ diff --git a/apps/web/app/assets/cover-images/image_9.jpg b/apps/web/app/assets/cover-images/image_9.jpg new file mode 100644 index 0000000..d5267f9 Binary files /dev/null and b/apps/web/app/assets/cover-images/image_9.jpg differ diff --git a/apps/web/app/assets/emoji/project-emoji.svg b/apps/web/app/assets/emoji/project-emoji.svg new file mode 100644 index 0000000..a2b9a62 --- /dev/null +++ b/apps/web/app/assets/emoji/project-emoji.svg @@ -0,0 +1,4 @@ + diff --git a/apps/web/app/assets/empty-state/active-cycle/assignee-dark.webp b/apps/web/app/assets/empty-state/active-cycle/assignee-dark.webp new file mode 100644 index 0000000..2590627 Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/assignee-dark.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/assignee-light.webp b/apps/web/app/assets/empty-state/active-cycle/assignee-light.webp new file mode 100644 index 0000000..b8ae5c0 Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/assignee-light.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/chart-dark.webp b/apps/web/app/assets/empty-state/active-cycle/chart-dark.webp new file mode 100644 index 0000000..033d6fe Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/chart-dark.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/chart-light.webp b/apps/web/app/assets/empty-state/active-cycle/chart-light.webp new file mode 100644 index 0000000..587906f Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/chart-light.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/cycle-dark.webp b/apps/web/app/assets/empty-state/active-cycle/cycle-dark.webp new file mode 100644 index 0000000..d092308 Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/cycle-dark.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/cycle-light.webp b/apps/web/app/assets/empty-state/active-cycle/cycle-light.webp new file mode 100644 index 0000000..a218d4d Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/cycle-light.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/label-dark.webp b/apps/web/app/assets/empty-state/active-cycle/label-dark.webp new file mode 100644 index 0000000..c15d3be Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/label-dark.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/label-light.webp b/apps/web/app/assets/empty-state/active-cycle/label-light.webp new file mode 100644 index 0000000..e5ccc69 Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/label-light.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/priority-dark.webp b/apps/web/app/assets/empty-state/active-cycle/priority-dark.webp new file mode 100644 index 0000000..f662e92 Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/priority-dark.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/priority-light.webp b/apps/web/app/assets/empty-state/active-cycle/priority-light.webp new file mode 100644 index 0000000..fde814c Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/priority-light.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/progress-dark.webp b/apps/web/app/assets/empty-state/active-cycle/progress-dark.webp new file mode 100644 index 0000000..4beda66 Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/progress-dark.webp differ diff --git a/apps/web/app/assets/empty-state/active-cycle/progress-light.webp b/apps/web/app/assets/empty-state/active-cycle/progress-light.webp new file mode 100644 index 0000000..ae30cf7 Binary files /dev/null and b/apps/web/app/assets/empty-state/active-cycle/progress-light.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/all-issues-dark.webp b/apps/web/app/assets/empty-state/all-issues/all-issues-dark.webp new file mode 100644 index 0000000..f570ad5 Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/all-issues-dark.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/all-issues-light.webp b/apps/web/app/assets/empty-state/all-issues/all-issues-light.webp new file mode 100644 index 0000000..eba388d Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/all-issues-light.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/assigned-dark.webp b/apps/web/app/assets/empty-state/all-issues/assigned-dark.webp new file mode 100644 index 0000000..23bc60a Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/assigned-dark.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/assigned-light.webp b/apps/web/app/assets/empty-state/all-issues/assigned-light.webp new file mode 100644 index 0000000..f48b9cf Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/assigned-light.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/created-dark.webp b/apps/web/app/assets/empty-state/all-issues/created-dark.webp new file mode 100644 index 0000000..69d35fc Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/created-dark.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/created-light.webp b/apps/web/app/assets/empty-state/all-issues/created-light.webp new file mode 100644 index 0000000..be4f67d Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/created-light.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/custom-view-dark.webp b/apps/web/app/assets/empty-state/all-issues/custom-view-dark.webp new file mode 100644 index 0000000..48dec16 Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/custom-view-dark.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/custom-view-light.webp b/apps/web/app/assets/empty-state/all-issues/custom-view-light.webp new file mode 100644 index 0000000..53b551c Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/custom-view-light.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/no-project-dark.webp b/apps/web/app/assets/empty-state/all-issues/no-project-dark.webp new file mode 100644 index 0000000..641ec82 Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/no-project-dark.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/no-project-light.webp b/apps/web/app/assets/empty-state/all-issues/no-project-light.webp new file mode 100644 index 0000000..1c7a810 Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/no-project-light.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/subscribed-dark.webp b/apps/web/app/assets/empty-state/all-issues/subscribed-dark.webp new file mode 100644 index 0000000..68b3b30 Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/subscribed-dark.webp differ diff --git a/apps/web/app/assets/empty-state/all-issues/subscribed-light.webp b/apps/web/app/assets/empty-state/all-issues/subscribed-light.webp new file mode 100644 index 0000000..4dbbedc Binary files /dev/null and b/apps/web/app/assets/empty-state/all-issues/subscribed-light.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-chart-area-dark.webp b/apps/web/app/assets/empty-state/analytics/empty-chart-area-dark.webp new file mode 100644 index 0000000..509f66c Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-chart-area-dark.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-chart-area-light.webp b/apps/web/app/assets/empty-state/analytics/empty-chart-area-light.webp new file mode 100644 index 0000000..cfa27c8 Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-chart-area-light.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-chart-bar-dark.webp b/apps/web/app/assets/empty-state/analytics/empty-chart-bar-dark.webp new file mode 100644 index 0000000..e519574 Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-chart-bar-dark.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-chart-bar-light.webp b/apps/web/app/assets/empty-state/analytics/empty-chart-bar-light.webp new file mode 100644 index 0000000..e6eeb09 Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-chart-bar-light.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-chart-radar-dark.webp b/apps/web/app/assets/empty-state/analytics/empty-chart-radar-dark.webp new file mode 100644 index 0000000..94e2f51 Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-chart-radar-dark.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-chart-radar-light.webp b/apps/web/app/assets/empty-state/analytics/empty-chart-radar-light.webp new file mode 100644 index 0000000..2982016 Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-chart-radar-light.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-grid-background-dark.webp b/apps/web/app/assets/empty-state/analytics/empty-grid-background-dark.webp new file mode 100644 index 0000000..5e420f2 Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-grid-background-dark.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-grid-background-light.webp b/apps/web/app/assets/empty-state/analytics/empty-grid-background-light.webp new file mode 100644 index 0000000..592a128 Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-grid-background-light.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-table-dark.webp b/apps/web/app/assets/empty-state/analytics/empty-table-dark.webp new file mode 100644 index 0000000..f5fcedd Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-table-dark.webp differ diff --git a/apps/web/app/assets/empty-state/analytics/empty-table-light.webp b/apps/web/app/assets/empty-state/analytics/empty-table-light.webp new file mode 100644 index 0000000..c9e8fec Binary files /dev/null and b/apps/web/app/assets/empty-state/analytics/empty-table-light.webp differ diff --git a/apps/web/app/assets/empty-state/api-token.svg b/apps/web/app/assets/empty-state/api-token.svg new file mode 100644 index 0000000..f8e32d3 --- /dev/null +++ b/apps/web/app/assets/empty-state/api-token.svg @@ -0,0 +1,49 @@ + diff --git a/apps/web/app/assets/empty-state/archived/empty-cycles-dark.webp b/apps/web/app/assets/empty-state/archived/empty-cycles-dark.webp new file mode 100644 index 0000000..872fb2f Binary files /dev/null and b/apps/web/app/assets/empty-state/archived/empty-cycles-dark.webp differ diff --git a/apps/web/app/assets/empty-state/archived/empty-cycles-light.webp b/apps/web/app/assets/empty-state/archived/empty-cycles-light.webp new file mode 100644 index 0000000..2db1dc4 Binary files /dev/null and b/apps/web/app/assets/empty-state/archived/empty-cycles-light.webp differ diff --git a/apps/web/app/assets/empty-state/archived/empty-issues-dark.webp b/apps/web/app/assets/empty-state/archived/empty-issues-dark.webp new file mode 100644 index 0000000..c18e946 Binary files /dev/null and b/apps/web/app/assets/empty-state/archived/empty-issues-dark.webp differ diff --git a/apps/web/app/assets/empty-state/archived/empty-issues-light.webp b/apps/web/app/assets/empty-state/archived/empty-issues-light.webp new file mode 100644 index 0000000..d99a501 Binary files /dev/null and b/apps/web/app/assets/empty-state/archived/empty-issues-light.webp differ diff --git a/apps/web/app/assets/empty-state/archived/empty-modules-dark.webp b/apps/web/app/assets/empty-state/archived/empty-modules-dark.webp new file mode 100644 index 0000000..e34bf37 Binary files /dev/null and b/apps/web/app/assets/empty-state/archived/empty-modules-dark.webp differ diff --git a/apps/web/app/assets/empty-state/archived/empty-modules-light.webp b/apps/web/app/assets/empty-state/archived/empty-modules-light.webp new file mode 100644 index 0000000..5caf2ea Binary files /dev/null and b/apps/web/app/assets/empty-state/archived/empty-modules-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/calendar-dark-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/calendar-dark-resp.webp new file mode 100644 index 0000000..5f0c219 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/calendar-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/calendar-dark.webp b/apps/web/app/assets/empty-state/cycle-issues/calendar-dark.webp new file mode 100644 index 0000000..312b138 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/calendar-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/calendar-light-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/calendar-light-resp.webp new file mode 100644 index 0000000..556a450 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/calendar-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/calendar-light.webp b/apps/web/app/assets/empty-state/cycle-issues/calendar-light.webp new file mode 100644 index 0000000..aef2ff1 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/calendar-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-dark-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-dark-resp.webp new file mode 100644 index 0000000..e2eda05 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-dark.webp b/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-dark.webp new file mode 100644 index 0000000..d2a9dfb Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-light-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-light-resp.webp new file mode 100644 index 0000000..1a915d3 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-light.webp b/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-light.webp new file mode 100644 index 0000000..9dcbdd6 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/gantt_chart-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/kanban-dark-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/kanban-dark-resp.webp new file mode 100644 index 0000000..227dd48 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/kanban-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/kanban-dark.webp b/apps/web/app/assets/empty-state/cycle-issues/kanban-dark.webp new file mode 100644 index 0000000..b161dbc Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/kanban-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/kanban-light-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/kanban-light-resp.webp new file mode 100644 index 0000000..c377068 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/kanban-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/kanban-light.webp b/apps/web/app/assets/empty-state/cycle-issues/kanban-light.webp new file mode 100644 index 0000000..0958f21 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/kanban-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/list-dark-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/list-dark-resp.webp new file mode 100644 index 0000000..4088595 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/list-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/list-dark.webp b/apps/web/app/assets/empty-state/cycle-issues/list-dark.webp new file mode 100644 index 0000000..7e9f8c6 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/list-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/list-light-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/list-light-resp.webp new file mode 100644 index 0000000..862544a Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/list-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/list-light.webp b/apps/web/app/assets/empty-state/cycle-issues/list-light.webp new file mode 100644 index 0000000..fb01bff Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/list-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-dark-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-dark-resp.webp new file mode 100644 index 0000000..baccb3f Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-dark.webp b/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-dark.webp new file mode 100644 index 0000000..6f60361 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-light-resp.webp b/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-light-resp.webp new file mode 100644 index 0000000..c7889d6 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-light.webp b/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-light.webp new file mode 100644 index 0000000..0f35b4e Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle-issues/spreadsheet-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle.svg b/apps/web/app/assets/empty-state/cycle.svg new file mode 100644 index 0000000..fe1dba3 --- /dev/null +++ b/apps/web/app/assets/empty-state/cycle.svg @@ -0,0 +1,21 @@ + diff --git a/apps/web/app/assets/empty-state/cycle/active-dark.webp b/apps/web/app/assets/empty-state/cycle/active-dark.webp new file mode 100644 index 0000000..68317b1 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/active-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle/active-light.webp b/apps/web/app/assets/empty-state/cycle/active-light.webp new file mode 100644 index 0000000..2341a90 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/active-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle/all-filters.svg b/apps/web/app/assets/empty-state/cycle/all-filters.svg new file mode 100644 index 0000000..b00841c --- /dev/null +++ b/apps/web/app/assets/empty-state/cycle/all-filters.svg @@ -0,0 +1,42 @@ + diff --git a/apps/web/app/assets/empty-state/cycle/completed-dark.webp b/apps/web/app/assets/empty-state/cycle/completed-dark.webp new file mode 100644 index 0000000..eebe656 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/completed-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle/completed-light.webp b/apps/web/app/assets/empty-state/cycle/completed-light.webp new file mode 100644 index 0000000..6c192fd Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/completed-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle/completed-no-issues-dark.webp b/apps/web/app/assets/empty-state/cycle/completed-no-issues-dark.webp new file mode 100644 index 0000000..a187dbf Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/completed-no-issues-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle/completed-no-issues-light.webp b/apps/web/app/assets/empty-state/cycle/completed-no-issues-light.webp new file mode 100644 index 0000000..6009f60 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/completed-no-issues-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle/draft-dark.webp b/apps/web/app/assets/empty-state/cycle/draft-dark.webp new file mode 100644 index 0000000..887e2e9 Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/draft-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle/draft-light.webp b/apps/web/app/assets/empty-state/cycle/draft-light.webp new file mode 100644 index 0000000..d1c88bc Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/draft-light.webp differ diff --git a/apps/web/app/assets/empty-state/cycle/name-filter.svg b/apps/web/app/assets/empty-state/cycle/name-filter.svg new file mode 100644 index 0000000..1686111 --- /dev/null +++ b/apps/web/app/assets/empty-state/cycle/name-filter.svg @@ -0,0 +1,41 @@ + diff --git a/apps/web/app/assets/empty-state/cycle/upcoming-dark.webp b/apps/web/app/assets/empty-state/cycle/upcoming-dark.webp new file mode 100644 index 0000000..205164f Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/upcoming-dark.webp differ diff --git a/apps/web/app/assets/empty-state/cycle/upcoming-light.webp b/apps/web/app/assets/empty-state/cycle/upcoming-light.webp new file mode 100644 index 0000000..522122f Binary files /dev/null and b/apps/web/app/assets/empty-state/cycle/upcoming-light.webp differ diff --git a/apps/web/app/assets/empty-state/dashboard/dark/completed-issues.svg b/apps/web/app/assets/empty-state/dashboard/dark/completed-issues.svg new file mode 100644 index 0000000..8c4d083 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/dark/completed-issues.svg @@ -0,0 +1,5 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/dark/issues-by-priority.svg b/apps/web/app/assets/empty-state/dashboard/dark/issues-by-priority.svg new file mode 100644 index 0000000..803f3a7 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/dark/issues-by-priority.svg @@ -0,0 +1,6 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/dark/issues-by-state-group.svg b/apps/web/app/assets/empty-state/dashboard/dark/issues-by-state-group.svg new file mode 100644 index 0000000..b615c31 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/dark/issues-by-state-group.svg @@ -0,0 +1,24 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/dark/overdue-issues.svg b/apps/web/app/assets/empty-state/dashboard/dark/overdue-issues.svg new file mode 100644 index 0000000..cceb348 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/dark/overdue-issues.svg @@ -0,0 +1,9 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/dark/recent-activity.svg b/apps/web/app/assets/empty-state/dashboard/dark/recent-activity.svg new file mode 100644 index 0000000..bf72348 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/dark/recent-activity.svg @@ -0,0 +1,6 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/dark/recent-collaborators-1.svg b/apps/web/app/assets/empty-state/dashboard/dark/recent-collaborators-1.svg new file mode 100644 index 0000000..341364f --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/dark/recent-collaborators-1.svg @@ -0,0 +1,6 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/dark/recent-collaborators-2.svg b/apps/web/app/assets/empty-state/dashboard/dark/recent-collaborators-2.svg new file mode 100644 index 0000000..6889f75 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/dark/recent-collaborators-2.svg @@ -0,0 +1,6 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/dark/recent-collaborators-3.svg b/apps/web/app/assets/empty-state/dashboard/dark/recent-collaborators-3.svg new file mode 100644 index 0000000..deb0e21 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/dark/recent-collaborators-3.svg @@ -0,0 +1,6 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/dark/upcoming-issues.svg b/apps/web/app/assets/empty-state/dashboard/dark/upcoming-issues.svg new file mode 100644 index 0000000..2559945 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/dark/upcoming-issues.svg @@ -0,0 +1,13 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/light/completed-issues.svg b/apps/web/app/assets/empty-state/dashboard/light/completed-issues.svg new file mode 100644 index 0000000..6f9c4c4 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/light/completed-issues.svg @@ -0,0 +1,5 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/light/issues-by-priority.svg b/apps/web/app/assets/empty-state/dashboard/light/issues-by-priority.svg new file mode 100644 index 0000000..23c35d9 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/light/issues-by-priority.svg @@ -0,0 +1,6 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/light/issues-by-state-group.svg b/apps/web/app/assets/empty-state/dashboard/light/issues-by-state-group.svg new file mode 100644 index 0000000..eb32753 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/light/issues-by-state-group.svg @@ -0,0 +1,27 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/light/overdue-issues.svg b/apps/web/app/assets/empty-state/dashboard/light/overdue-issues.svg new file mode 100644 index 0000000..1c66ddd --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/light/overdue-issues.svg @@ -0,0 +1,9 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/light/recent-activity.svg b/apps/web/app/assets/empty-state/dashboard/light/recent-activity.svg new file mode 100644 index 0000000..3bb6749 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/light/recent-activity.svg @@ -0,0 +1,6 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/light/recent-collaborators-1.svg b/apps/web/app/assets/empty-state/dashboard/light/recent-collaborators-1.svg new file mode 100644 index 0000000..fb77e41 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/light/recent-collaborators-1.svg @@ -0,0 +1,7 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/light/recent-collaborators-2.svg b/apps/web/app/assets/empty-state/dashboard/light/recent-collaborators-2.svg new file mode 100644 index 0000000..e25fc95 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/light/recent-collaborators-2.svg @@ -0,0 +1,7 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/light/recent-collaborators-3.svg b/apps/web/app/assets/empty-state/dashboard/light/recent-collaborators-3.svg new file mode 100644 index 0000000..e46473e --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/light/recent-collaborators-3.svg @@ -0,0 +1,7 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/light/upcoming-issues.svg b/apps/web/app/assets/empty-state/dashboard/light/upcoming-issues.svg new file mode 100644 index 0000000..ad30358 --- /dev/null +++ b/apps/web/app/assets/empty-state/dashboard/light/upcoming-issues.svg @@ -0,0 +1,13 @@ + diff --git a/apps/web/app/assets/empty-state/dashboard/widgets-dark.webp b/apps/web/app/assets/empty-state/dashboard/widgets-dark.webp new file mode 100644 index 0000000..3a626f7 Binary files /dev/null and b/apps/web/app/assets/empty-state/dashboard/widgets-dark.webp differ diff --git a/apps/web/app/assets/empty-state/dashboard/widgets-light.webp b/apps/web/app/assets/empty-state/dashboard/widgets-light.webp new file mode 100644 index 0000000..6161c57 Binary files /dev/null and b/apps/web/app/assets/empty-state/dashboard/widgets-light.webp differ diff --git a/apps/web/app/assets/empty-state/dashboard_empty_project.webp b/apps/web/app/assets/empty-state/dashboard_empty_project.webp new file mode 100644 index 0000000..c1f633f Binary files /dev/null and b/apps/web/app/assets/empty-state/dashboard_empty_project.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/cycles-dark.webp b/apps/web/app/assets/empty-state/disabled-feature/cycles-dark.webp new file mode 100644 index 0000000..5897062 Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/cycles-dark.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/cycles-light.webp b/apps/web/app/assets/empty-state/disabled-feature/cycles-light.webp new file mode 100644 index 0000000..c13d082 Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/cycles-light.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/intake-dark.webp b/apps/web/app/assets/empty-state/disabled-feature/intake-dark.webp new file mode 100644 index 0000000..9b459b8 Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/intake-dark.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/intake-light.webp b/apps/web/app/assets/empty-state/disabled-feature/intake-light.webp new file mode 100644 index 0000000..70757be Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/intake-light.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/modules-dark.webp b/apps/web/app/assets/empty-state/disabled-feature/modules-dark.webp new file mode 100644 index 0000000..8e198ed Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/modules-dark.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/modules-light.webp b/apps/web/app/assets/empty-state/disabled-feature/modules-light.webp new file mode 100644 index 0000000..d1db65c Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/modules-light.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/pages-dark.webp b/apps/web/app/assets/empty-state/disabled-feature/pages-dark.webp new file mode 100644 index 0000000..19263a0 Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/pages-dark.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/pages-light.webp b/apps/web/app/assets/empty-state/disabled-feature/pages-light.webp new file mode 100644 index 0000000..fd1c5b4 Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/pages-light.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/views-dark.webp b/apps/web/app/assets/empty-state/disabled-feature/views-dark.webp new file mode 100644 index 0000000..bfdb573 Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/views-dark.webp differ diff --git a/apps/web/app/assets/empty-state/disabled-feature/views-light.webp b/apps/web/app/assets/empty-state/disabled-feature/views-light.webp new file mode 100644 index 0000000..e318e27 Binary files /dev/null and b/apps/web/app/assets/empty-state/disabled-feature/views-light.webp differ diff --git a/apps/web/app/assets/empty-state/draft/draft-issues-empty-dark.webp b/apps/web/app/assets/empty-state/draft/draft-issues-empty-dark.webp new file mode 100644 index 0000000..c50ed24 Binary files /dev/null and b/apps/web/app/assets/empty-state/draft/draft-issues-empty-dark.webp differ diff --git a/apps/web/app/assets/empty-state/draft/draft-issues-empty-light.webp b/apps/web/app/assets/empty-state/draft/draft-issues-empty-light.webp new file mode 100644 index 0000000..c6ded2b Binary files /dev/null and b/apps/web/app/assets/empty-state/draft/draft-issues-empty-light.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/calendar-dark.webp b/apps/web/app/assets/empty-state/empty-filters/calendar-dark.webp new file mode 100644 index 0000000..872be08 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/calendar-dark.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/calendar-light.webp b/apps/web/app/assets/empty-state/empty-filters/calendar-light.webp new file mode 100644 index 0000000..50e56eb Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/calendar-light.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/gantt_chart-dark.webp b/apps/web/app/assets/empty-state/empty-filters/gantt_chart-dark.webp new file mode 100644 index 0000000..c587d96 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/gantt_chart-dark.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/gantt_chart-light.webp b/apps/web/app/assets/empty-state/empty-filters/gantt_chart-light.webp new file mode 100644 index 0000000..8c874ea Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/gantt_chart-light.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/kanban-dark.webp b/apps/web/app/assets/empty-state/empty-filters/kanban-dark.webp new file mode 100644 index 0000000..a368c68 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/kanban-dark.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/kanban-light.webp b/apps/web/app/assets/empty-state/empty-filters/kanban-light.webp new file mode 100644 index 0000000..50507e7 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/kanban-light.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/list-dark.webp b/apps/web/app/assets/empty-state/empty-filters/list-dark.webp new file mode 100644 index 0000000..6c49f29 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/list-dark.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/list-light.webp b/apps/web/app/assets/empty-state/empty-filters/list-light.webp new file mode 100644 index 0000000..bc4f284 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/list-light.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/spreadsheet-dark.webp b/apps/web/app/assets/empty-state/empty-filters/spreadsheet-dark.webp new file mode 100644 index 0000000..2e9ff4c Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/spreadsheet-dark.webp differ diff --git a/apps/web/app/assets/empty-state/empty-filters/spreadsheet-light.webp b/apps/web/app/assets/empty-state/empty-filters/spreadsheet-light.webp new file mode 100644 index 0000000..174b3d0 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-filters/spreadsheet-light.webp differ diff --git a/apps/web/app/assets/empty-state/empty-updates-light.png b/apps/web/app/assets/empty-state/empty-updates-light.png new file mode 100644 index 0000000..a92c093 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty-updates-light.png differ diff --git a/apps/web/app/assets/empty-state/empty_analytics.webp b/apps/web/app/assets/empty-state/empty_analytics.webp new file mode 100644 index 0000000..46174ff Binary files /dev/null and b/apps/web/app/assets/empty-state/empty_analytics.webp differ diff --git a/apps/web/app/assets/empty-state/empty_bar_graph.svg b/apps/web/app/assets/empty-state/empty_bar_graph.svg new file mode 100644 index 0000000..7742a42 --- /dev/null +++ b/apps/web/app/assets/empty-state/empty_bar_graph.svg @@ -0,0 +1,5 @@ + diff --git a/apps/web/app/assets/empty-state/empty_cycles.webp b/apps/web/app/assets/empty-state/empty_cycles.webp new file mode 100644 index 0000000..710ae2d Binary files /dev/null and b/apps/web/app/assets/empty-state/empty_cycles.webp differ diff --git a/apps/web/app/assets/empty-state/empty_graph.svg b/apps/web/app/assets/empty-state/empty_graph.svg new file mode 100644 index 0000000..5eae523 --- /dev/null +++ b/apps/web/app/assets/empty-state/empty_graph.svg @@ -0,0 +1,10 @@ + diff --git a/apps/web/app/assets/empty-state/empty_issues.webp b/apps/web/app/assets/empty-state/empty_issues.webp new file mode 100644 index 0000000..e60d663 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty_issues.webp differ diff --git a/apps/web/app/assets/empty-state/empty_label.svg b/apps/web/app/assets/empty-state/empty_label.svg new file mode 100644 index 0000000..c664da6 --- /dev/null +++ b/apps/web/app/assets/empty-state/empty_label.svg @@ -0,0 +1,4 @@ + diff --git a/apps/web/app/assets/empty-state/empty_members.svg b/apps/web/app/assets/empty-state/empty_members.svg new file mode 100644 index 0000000..6672c58 --- /dev/null +++ b/apps/web/app/assets/empty-state/empty_members.svg @@ -0,0 +1,13 @@ + diff --git a/apps/web/app/assets/empty-state/empty_modules.webp b/apps/web/app/assets/empty-state/empty_modules.webp new file mode 100644 index 0000000..49050b5 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty_modules.webp differ diff --git a/apps/web/app/assets/empty-state/empty_page.png b/apps/web/app/assets/empty-state/empty_page.png new file mode 100644 index 0000000..993774c Binary files /dev/null and b/apps/web/app/assets/empty-state/empty_page.png differ diff --git a/apps/web/app/assets/empty-state/empty_project.webp b/apps/web/app/assets/empty-state/empty_project.webp new file mode 100644 index 0000000..ad66f09 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty_project.webp differ diff --git a/apps/web/app/assets/empty-state/empty_users.svg b/apps/web/app/assets/empty-state/empty_users.svg new file mode 100644 index 0000000..7298e9e --- /dev/null +++ b/apps/web/app/assets/empty-state/empty_users.svg @@ -0,0 +1,3 @@ + diff --git a/apps/web/app/assets/empty-state/empty_view.webp b/apps/web/app/assets/empty-state/empty_view.webp new file mode 100644 index 0000000..aa0f5a6 Binary files /dev/null and b/apps/web/app/assets/empty-state/empty_view.webp differ diff --git a/apps/web/app/assets/empty-state/epics/epics-dark.webp b/apps/web/app/assets/empty-state/epics/epics-dark.webp new file mode 100644 index 0000000..648392a Binary files /dev/null and b/apps/web/app/assets/empty-state/epics/epics-dark.webp differ diff --git a/apps/web/app/assets/empty-state/epics/epics-light.webp b/apps/web/app/assets/empty-state/epics/epics-light.webp new file mode 100644 index 0000000..f677e5d Binary files /dev/null and b/apps/web/app/assets/empty-state/epics/epics-light.webp differ diff --git a/apps/web/app/assets/empty-state/epics/settings-dark.webp b/apps/web/app/assets/empty-state/epics/settings-dark.webp new file mode 100644 index 0000000..3193137 Binary files /dev/null and b/apps/web/app/assets/empty-state/epics/settings-dark.webp differ diff --git a/apps/web/app/assets/empty-state/epics/settings-light.webp b/apps/web/app/assets/empty-state/epics/settings-light.webp new file mode 100644 index 0000000..1f9596e Binary files /dev/null and b/apps/web/app/assets/empty-state/epics/settings-light.webp differ diff --git a/apps/web/app/assets/empty-state/estimates/dark.svg b/apps/web/app/assets/empty-state/estimates/dark.svg new file mode 100644 index 0000000..2f5d758 --- /dev/null +++ b/apps/web/app/assets/empty-state/estimates/dark.svg @@ -0,0 +1,19 @@ + diff --git a/apps/web/app/assets/empty-state/estimates/light.svg b/apps/web/app/assets/empty-state/estimates/light.svg new file mode 100644 index 0000000..817b9fb --- /dev/null +++ b/apps/web/app/assets/empty-state/estimates/light.svg @@ -0,0 +1,19 @@ + diff --git a/apps/web/app/assets/empty-state/intake/filter-issue-dark.webp b/apps/web/app/assets/empty-state/intake/filter-issue-dark.webp new file mode 100644 index 0000000..dab3eb7 Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/filter-issue-dark.webp differ diff --git a/apps/web/app/assets/empty-state/intake/filter-issue-light.webp b/apps/web/app/assets/empty-state/intake/filter-issue-light.webp new file mode 100644 index 0000000..6716706 Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/filter-issue-light.webp differ diff --git a/apps/web/app/assets/empty-state/intake/intake-dark-resp.webp b/apps/web/app/assets/empty-state/intake/intake-dark-resp.webp new file mode 100644 index 0000000..bf6166e Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/intake-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/intake/intake-dark.webp b/apps/web/app/assets/empty-state/intake/intake-dark.webp new file mode 100644 index 0000000..9b459b8 Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/intake-dark.webp differ diff --git a/apps/web/app/assets/empty-state/intake/intake-issue-dark.webp b/apps/web/app/assets/empty-state/intake/intake-issue-dark.webp new file mode 100644 index 0000000..0c14ce2 Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/intake-issue-dark.webp differ diff --git a/apps/web/app/assets/empty-state/intake/intake-issue-light.webp b/apps/web/app/assets/empty-state/intake/intake-issue-light.webp new file mode 100644 index 0000000..c557f5d Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/intake-issue-light.webp differ diff --git a/apps/web/app/assets/empty-state/intake/intake-light-resp.webp b/apps/web/app/assets/empty-state/intake/intake-light-resp.webp new file mode 100644 index 0000000..69a79d6 Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/intake-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/intake/intake-light.webp b/apps/web/app/assets/empty-state/intake/intake-light.webp new file mode 100644 index 0000000..70757be Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/intake-light.webp differ diff --git a/apps/web/app/assets/empty-state/intake/issue-detail-dark.webp b/apps/web/app/assets/empty-state/intake/issue-detail-dark.webp new file mode 100644 index 0000000..2a2c706 Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/issue-detail-dark.webp differ diff --git a/apps/web/app/assets/empty-state/intake/issue-detail-light.webp b/apps/web/app/assets/empty-state/intake/issue-detail-light.webp new file mode 100644 index 0000000..a713069 Binary files /dev/null and b/apps/web/app/assets/empty-state/intake/issue-detail-light.webp differ diff --git a/apps/web/app/assets/empty-state/invitation.svg b/apps/web/app/assets/empty-state/invitation.svg new file mode 100644 index 0000000..bda66da --- /dev/null +++ b/apps/web/app/assets/empty-state/invitation.svg @@ -0,0 +1,23 @@ + diff --git a/apps/web/app/assets/empty-state/issue.svg b/apps/web/app/assets/empty-state/issue.svg new file mode 100644 index 0000000..98a420d --- /dev/null +++ b/apps/web/app/assets/empty-state/issue.svg @@ -0,0 +1,15 @@ + diff --git a/apps/web/app/assets/empty-state/label.svg b/apps/web/app/assets/empty-state/label.svg new file mode 100644 index 0000000..55241e2 --- /dev/null +++ b/apps/web/app/assets/empty-state/label.svg @@ -0,0 +1,42 @@ + diff --git a/apps/web/app/assets/empty-state/module-issues/calendar-dark-resp.webp b/apps/web/app/assets/empty-state/module-issues/calendar-dark-resp.webp new file mode 100644 index 0000000..5e6404e Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/calendar-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/calendar-dark.webp b/apps/web/app/assets/empty-state/module-issues/calendar-dark.webp new file mode 100644 index 0000000..5170f6c Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/calendar-dark.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/calendar-light-resp.webp b/apps/web/app/assets/empty-state/module-issues/calendar-light-resp.webp new file mode 100644 index 0000000..0d890af Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/calendar-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/calendar-light.webp b/apps/web/app/assets/empty-state/module-issues/calendar-light.webp new file mode 100644 index 0000000..5bee9c9 Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/calendar-light.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/gantt_chart-dark-resp.webp b/apps/web/app/assets/empty-state/module-issues/gantt_chart-dark-resp.webp new file mode 100644 index 0000000..90d7985 Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/gantt_chart-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/gantt_chart-dark.webp b/apps/web/app/assets/empty-state/module-issues/gantt_chart-dark.webp new file mode 100644 index 0000000..d382198 Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/gantt_chart-dark.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/gantt_chart-light-resp.webp b/apps/web/app/assets/empty-state/module-issues/gantt_chart-light-resp.webp new file mode 100644 index 0000000..ccaadee Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/gantt_chart-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/gantt_chart-light.webp b/apps/web/app/assets/empty-state/module-issues/gantt_chart-light.webp new file mode 100644 index 0000000..e51bbee Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/gantt_chart-light.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/kanban-dark-resp.webp b/apps/web/app/assets/empty-state/module-issues/kanban-dark-resp.webp new file mode 100644 index 0000000..b447fb6 Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/kanban-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/kanban-dark.webp b/apps/web/app/assets/empty-state/module-issues/kanban-dark.webp new file mode 100644 index 0000000..5e978d5 Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/kanban-dark.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/kanban-light-resp.webp b/apps/web/app/assets/empty-state/module-issues/kanban-light-resp.webp new file mode 100644 index 0000000..2be0b8f Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/kanban-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/kanban-light.webp b/apps/web/app/assets/empty-state/module-issues/kanban-light.webp new file mode 100644 index 0000000..5d30a65 Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/kanban-light.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/list-dark-resp.webp b/apps/web/app/assets/empty-state/module-issues/list-dark-resp.webp new file mode 100644 index 0000000..84d92aa Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/list-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/list-dark.webp b/apps/web/app/assets/empty-state/module-issues/list-dark.webp new file mode 100644 index 0000000..96e9518 Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/list-dark.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/list-light-resp.webp b/apps/web/app/assets/empty-state/module-issues/list-light-resp.webp new file mode 100644 index 0000000..b688add Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/list-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/list-light.webp b/apps/web/app/assets/empty-state/module-issues/list-light.webp new file mode 100644 index 0000000..d9b1c4c Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/list-light.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/spreadsheet-dark-resp.webp b/apps/web/app/assets/empty-state/module-issues/spreadsheet-dark-resp.webp new file mode 100644 index 0000000..afb2f1c Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/spreadsheet-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/spreadsheet-dark.webp b/apps/web/app/assets/empty-state/module-issues/spreadsheet-dark.webp new file mode 100644 index 0000000..1894cfe Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/spreadsheet-dark.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/spreadsheet-light-resp.webp b/apps/web/app/assets/empty-state/module-issues/spreadsheet-light-resp.webp new file mode 100644 index 0000000..11115d4 Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/spreadsheet-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/module-issues/spreadsheet-light.webp b/apps/web/app/assets/empty-state/module-issues/spreadsheet-light.webp new file mode 100644 index 0000000..aa3813f Binary files /dev/null and b/apps/web/app/assets/empty-state/module-issues/spreadsheet-light.webp differ diff --git a/apps/web/app/assets/empty-state/module.svg b/apps/web/app/assets/empty-state/module.svg new file mode 100644 index 0000000..359b3e9 --- /dev/null +++ b/apps/web/app/assets/empty-state/module.svg @@ -0,0 +1,31 @@ + diff --git a/apps/web/app/assets/empty-state/module/all-filters.svg b/apps/web/app/assets/empty-state/module/all-filters.svg new file mode 100644 index 0000000..6ba0731 --- /dev/null +++ b/apps/web/app/assets/empty-state/module/all-filters.svg @@ -0,0 +1,45 @@ + diff --git a/apps/web/app/assets/empty-state/module/name-filter.svg b/apps/web/app/assets/empty-state/module/name-filter.svg new file mode 100644 index 0000000..0d9655b --- /dev/null +++ b/apps/web/app/assets/empty-state/module/name-filter.svg @@ -0,0 +1,44 @@ + diff --git a/apps/web/app/assets/empty-state/notification.svg b/apps/web/app/assets/empty-state/notification.svg new file mode 100644 index 0000000..700a155 --- /dev/null +++ b/apps/web/app/assets/empty-state/notification.svg @@ -0,0 +1,38 @@ + \ No newline at end of file diff --git a/apps/web/app/assets/empty-state/onboarding/analytics-dark.webp b/apps/web/app/assets/empty-state/onboarding/analytics-dark.webp new file mode 100644 index 0000000..a83d55d Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/analytics-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/analytics-light.webp b/apps/web/app/assets/empty-state/onboarding/analytics-light.webp new file mode 100644 index 0000000..64a762f Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/analytics-light.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/archive-dark.png b/apps/web/app/assets/empty-state/onboarding/archive-dark.png new file mode 100644 index 0000000..54cca36 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/archive-dark.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/archive-light.png b/apps/web/app/assets/empty-state/onboarding/archive-light.png new file mode 100644 index 0000000..8530bba Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/archive-light.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/cycles-dark.webp b/apps/web/app/assets/empty-state/onboarding/cycles-dark.webp new file mode 100644 index 0000000..716f121 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/cycles-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/cycles-light.webp b/apps/web/app/assets/empty-state/onboarding/cycles-light.webp new file mode 100644 index 0000000..0b2b400 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/cycles-light.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/dashboard-dark.webp b/apps/web/app/assets/empty-state/onboarding/dashboard-dark.webp new file mode 100644 index 0000000..afa10be Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/dashboard-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/dashboard-light.webp b/apps/web/app/assets/empty-state/onboarding/dashboard-light.webp new file mode 100644 index 0000000..d4bce8b Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/dashboard-light.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/graph-dark.png b/apps/web/app/assets/empty-state/onboarding/graph-dark.png new file mode 100644 index 0000000..e8a938d Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/graph-dark.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/graph-light.png b/apps/web/app/assets/empty-state/onboarding/graph-light.png new file mode 100644 index 0000000..eb48b45 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/graph-light.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/issues-closed-dark.png b/apps/web/app/assets/empty-state/onboarding/issues-closed-dark.png new file mode 100644 index 0000000..d4bafb2 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/issues-closed-dark.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/issues-closed-light.png b/apps/web/app/assets/empty-state/onboarding/issues-closed-light.png new file mode 100644 index 0000000..739acd1 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/issues-closed-light.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/issues-dark.webp b/apps/web/app/assets/empty-state/onboarding/issues-dark.webp new file mode 100644 index 0000000..39ffb5c Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/issues-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/issues-light.webp b/apps/web/app/assets/empty-state/onboarding/issues-light.webp new file mode 100644 index 0000000..18d42b1 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/issues-light.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/members-dark.png b/apps/web/app/assets/empty-state/onboarding/members-dark.png new file mode 100644 index 0000000..2f8a1c8 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/members-dark.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/members-light.png b/apps/web/app/assets/empty-state/onboarding/members-light.png new file mode 100644 index 0000000..eaa43ef Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/members-light.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/modules-dark.webp b/apps/web/app/assets/empty-state/onboarding/modules-dark.webp new file mode 100644 index 0000000..d855df0 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/modules-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/modules-light.webp b/apps/web/app/assets/empty-state/onboarding/modules-light.webp new file mode 100644 index 0000000..ff3e6ac Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/modules-light.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/notification-dark.png b/apps/web/app/assets/empty-state/onboarding/notification-dark.png new file mode 100644 index 0000000..dee284c Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/notification-dark.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/notification-light.png b/apps/web/app/assets/empty-state/onboarding/notification-light.png new file mode 100644 index 0000000..3065787 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/notification-light.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/pages-dark.webp b/apps/web/app/assets/empty-state/onboarding/pages-dark.webp new file mode 100644 index 0000000..bc59270 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/pages-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/pages-light.webp b/apps/web/app/assets/empty-state/onboarding/pages-light.webp new file mode 100644 index 0000000..1e28c0d Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/pages-light.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/projects-dark.webp b/apps/web/app/assets/empty-state/onboarding/projects-dark.webp new file mode 100644 index 0000000..d4f6c62 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/projects-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/projects-light.webp b/apps/web/app/assets/empty-state/onboarding/projects-light.webp new file mode 100644 index 0000000..c475c8f Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/projects-light.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/search-dark.png b/apps/web/app/assets/empty-state/onboarding/search-dark.png new file mode 100644 index 0000000..531081d Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/search-dark.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/search-light.png b/apps/web/app/assets/empty-state/onboarding/search-light.png new file mode 100644 index 0000000..39e2636 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/search-light.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/snooze-light.png b/apps/web/app/assets/empty-state/onboarding/snooze-light.png new file mode 100644 index 0000000..6ccd7ab Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/snooze-light.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/snoozed-dark.png b/apps/web/app/assets/empty-state/onboarding/snoozed-dark.png new file mode 100644 index 0000000..c8b88fe Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/snoozed-dark.png differ diff --git a/apps/web/app/assets/empty-state/onboarding/views-dark.webp b/apps/web/app/assets/empty-state/onboarding/views-dark.webp new file mode 100644 index 0000000..0a7fe7b Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/views-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/views-light.webp b/apps/web/app/assets/empty-state/onboarding/views-light.webp new file mode 100644 index 0000000..cfb2031 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/views-light.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/workspace-active-cycles-dark.webp b/apps/web/app/assets/empty-state/onboarding/workspace-active-cycles-dark.webp new file mode 100644 index 0000000..68317b1 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/workspace-active-cycles-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/workspace-active-cycles-light.webp b/apps/web/app/assets/empty-state/onboarding/workspace-active-cycles-light.webp new file mode 100644 index 0000000..2341a90 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/workspace-active-cycles-light.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/workspace-invites-dark.webp b/apps/web/app/assets/empty-state/onboarding/workspace-invites-dark.webp new file mode 100644 index 0000000..d6e1004 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/workspace-invites-dark.webp differ diff --git a/apps/web/app/assets/empty-state/onboarding/workspace-invites-light.webp b/apps/web/app/assets/empty-state/onboarding/workspace-invites-light.webp new file mode 100644 index 0000000..123a600 Binary files /dev/null and b/apps/web/app/assets/empty-state/onboarding/workspace-invites-light.webp differ diff --git a/apps/web/app/assets/empty-state/profile/activities-dark.webp b/apps/web/app/assets/empty-state/profile/activities-dark.webp new file mode 100644 index 0000000..1b69394 Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/activities-dark.webp differ diff --git a/apps/web/app/assets/empty-state/profile/activities-light.webp b/apps/web/app/assets/empty-state/profile/activities-light.webp new file mode 100644 index 0000000..c287e0c Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/activities-light.webp differ diff --git a/apps/web/app/assets/empty-state/profile/activity-dark.webp b/apps/web/app/assets/empty-state/profile/activity-dark.webp new file mode 100644 index 0000000..d44e6a1 Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/activity-dark.webp differ diff --git a/apps/web/app/assets/empty-state/profile/activity-light.webp b/apps/web/app/assets/empty-state/profile/activity-light.webp new file mode 100644 index 0000000..206685a Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/activity-light.webp differ diff --git a/apps/web/app/assets/empty-state/profile/assigned-dark.webp b/apps/web/app/assets/empty-state/profile/assigned-dark.webp new file mode 100644 index 0000000..173ebe6 Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/assigned-dark.webp differ diff --git a/apps/web/app/assets/empty-state/profile/assigned-light.webp b/apps/web/app/assets/empty-state/profile/assigned-light.webp new file mode 100644 index 0000000..78416c9 Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/assigned-light.webp differ diff --git a/apps/web/app/assets/empty-state/profile/created-dark.webp b/apps/web/app/assets/empty-state/profile/created-dark.webp new file mode 100644 index 0000000..8232ce2 Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/created-dark.webp differ diff --git a/apps/web/app/assets/empty-state/profile/created-light.webp b/apps/web/app/assets/empty-state/profile/created-light.webp new file mode 100644 index 0000000..4ea037a Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/created-light.webp differ diff --git a/apps/web/app/assets/empty-state/profile/issues-by-priority-dark.webp b/apps/web/app/assets/empty-state/profile/issues-by-priority-dark.webp new file mode 100644 index 0000000..e1a7180 Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/issues-by-priority-dark.webp differ diff --git a/apps/web/app/assets/empty-state/profile/issues-by-priority-light.webp b/apps/web/app/assets/empty-state/profile/issues-by-priority-light.webp new file mode 100644 index 0000000..16abada Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/issues-by-priority-light.webp differ diff --git a/apps/web/app/assets/empty-state/profile/issues-by-state-dark.webp b/apps/web/app/assets/empty-state/profile/issues-by-state-dark.webp new file mode 100644 index 0000000..82210aa Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/issues-by-state-dark.webp differ diff --git a/apps/web/app/assets/empty-state/profile/issues-by-state-light.webp b/apps/web/app/assets/empty-state/profile/issues-by-state-light.webp new file mode 100644 index 0000000..73788bb Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/issues-by-state-light.webp differ diff --git a/apps/web/app/assets/empty-state/profile/subscribed-dark.webp b/apps/web/app/assets/empty-state/profile/subscribed-dark.webp new file mode 100644 index 0000000..26837e1 Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/subscribed-dark.webp differ diff --git a/apps/web/app/assets/empty-state/profile/subscribed-light.webp b/apps/web/app/assets/empty-state/profile/subscribed-light.webp new file mode 100644 index 0000000..7faf660 Binary files /dev/null and b/apps/web/app/assets/empty-state/profile/subscribed-light.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/estimates-dark-resp.webp b/apps/web/app/assets/empty-state/project-settings/estimates-dark-resp.webp new file mode 100644 index 0000000..6f6a494 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/estimates-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/estimates-dark.png b/apps/web/app/assets/empty-state/project-settings/estimates-dark.png new file mode 100644 index 0000000..9cc5346 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/estimates-dark.png differ diff --git a/apps/web/app/assets/empty-state/project-settings/estimates-dark.webp b/apps/web/app/assets/empty-state/project-settings/estimates-dark.webp new file mode 100644 index 0000000..35d42e5 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/estimates-dark.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/estimates-light-resp.webp b/apps/web/app/assets/empty-state/project-settings/estimates-light-resp.webp new file mode 100644 index 0000000..13a29ca Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/estimates-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/estimates-light.png b/apps/web/app/assets/empty-state/project-settings/estimates-light.png new file mode 100644 index 0000000..f846a2a Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/estimates-light.png differ diff --git a/apps/web/app/assets/empty-state/project-settings/estimates-light.webp b/apps/web/app/assets/empty-state/project-settings/estimates-light.webp new file mode 100644 index 0000000..b329ea9 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/estimates-light.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/integrations-dark-resp.webp b/apps/web/app/assets/empty-state/project-settings/integrations-dark-resp.webp new file mode 100644 index 0000000..f968f8f Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/integrations-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/integrations-dark.webp b/apps/web/app/assets/empty-state/project-settings/integrations-dark.webp new file mode 100644 index 0000000..f968f8f Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/integrations-dark.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/integrations-light-resp.webp b/apps/web/app/assets/empty-state/project-settings/integrations-light-resp.webp new file mode 100644 index 0000000..94f6ffe Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/integrations-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/integrations-light.webp b/apps/web/app/assets/empty-state/project-settings/integrations-light.webp new file mode 100644 index 0000000..94f6ffe Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/integrations-light.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/labels-dark-resp.webp b/apps/web/app/assets/empty-state/project-settings/labels-dark-resp.webp new file mode 100644 index 0000000..bf23c60 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/labels-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/labels-dark.webp b/apps/web/app/assets/empty-state/project-settings/labels-dark.webp new file mode 100644 index 0000000..6d41f55 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/labels-dark.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/labels-light-resp.webp b/apps/web/app/assets/empty-state/project-settings/labels-light-resp.webp new file mode 100644 index 0000000..d992fb1 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/labels-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/labels-light.webp b/apps/web/app/assets/empty-state/project-settings/labels-light.webp new file mode 100644 index 0000000..c6e7015 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/labels-light.webp differ diff --git a/apps/web/app/assets/empty-state/project-settings/no-projects-dark.png b/apps/web/app/assets/empty-state/project-settings/no-projects-dark.png new file mode 100644 index 0000000..deed3d0 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/no-projects-dark.png differ diff --git a/apps/web/app/assets/empty-state/project-settings/no-projects-light.png b/apps/web/app/assets/empty-state/project-settings/no-projects-light.png new file mode 100644 index 0000000..e038de2 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/no-projects-light.png differ diff --git a/apps/web/app/assets/empty-state/project-settings/updates-dark.png b/apps/web/app/assets/empty-state/project-settings/updates-dark.png new file mode 100644 index 0000000..46e2709 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/updates-dark.png differ diff --git a/apps/web/app/assets/empty-state/project-settings/updates-light.png b/apps/web/app/assets/empty-state/project-settings/updates-light.png new file mode 100644 index 0000000..d2e9208 Binary files /dev/null and b/apps/web/app/assets/empty-state/project-settings/updates-light.png differ diff --git a/apps/web/app/assets/empty-state/project.svg b/apps/web/app/assets/empty-state/project.svg new file mode 100644 index 0000000..b898549 --- /dev/null +++ b/apps/web/app/assets/empty-state/project.svg @@ -0,0 +1,23 @@ + diff --git a/apps/web/app/assets/empty-state/project/all-filters-dark.svg b/apps/web/app/assets/empty-state/project/all-filters-dark.svg new file mode 100644 index 0000000..e0d69c4 --- /dev/null +++ b/apps/web/app/assets/empty-state/project/all-filters-dark.svg @@ -0,0 +1,47 @@ + diff --git a/apps/web/app/assets/empty-state/project/all-filters-light.svg b/apps/web/app/assets/empty-state/project/all-filters-light.svg new file mode 100644 index 0000000..93ac4de --- /dev/null +++ b/apps/web/app/assets/empty-state/project/all-filters-light.svg @@ -0,0 +1,42 @@ + diff --git a/apps/web/app/assets/empty-state/project/name-filter-dark.svg b/apps/web/app/assets/empty-state/project/name-filter-dark.svg new file mode 100644 index 0000000..df4c237 --- /dev/null +++ b/apps/web/app/assets/empty-state/project/name-filter-dark.svg @@ -0,0 +1,46 @@ + diff --git a/apps/web/app/assets/empty-state/project/name-filter-light.svg b/apps/web/app/assets/empty-state/project/name-filter-light.svg new file mode 100644 index 0000000..ec63228 --- /dev/null +++ b/apps/web/app/assets/empty-state/project/name-filter-light.svg @@ -0,0 +1,41 @@ + diff --git a/apps/web/app/assets/empty-state/project/name-filter.svg b/apps/web/app/assets/empty-state/project/name-filter.svg new file mode 100644 index 0000000..ec63228 --- /dev/null +++ b/apps/web/app/assets/empty-state/project/name-filter.svg @@ -0,0 +1,41 @@ + diff --git a/apps/web/app/assets/empty-state/recent_activity.svg b/apps/web/app/assets/empty-state/recent_activity.svg new file mode 100644 index 0000000..bef318f --- /dev/null +++ b/apps/web/app/assets/empty-state/recent_activity.svg @@ -0,0 +1,3 @@ + diff --git a/apps/web/app/assets/empty-state/search/all-issue-view-dark.webp b/apps/web/app/assets/empty-state/search/all-issue-view-dark.webp new file mode 100644 index 0000000..dbc69c0 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/all-issue-view-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/all-issues-view-light.webp b/apps/web/app/assets/empty-state/search/all-issues-view-light.webp new file mode 100644 index 0000000..829b973 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/all-issues-view-light.webp differ diff --git a/apps/web/app/assets/empty-state/search/archive-dark.webp b/apps/web/app/assets/empty-state/search/archive-dark.webp new file mode 100644 index 0000000..d586be8 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/archive-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/archive-light.webp b/apps/web/app/assets/empty-state/search/archive-light.webp new file mode 100644 index 0000000..5a79179 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/archive-light.webp differ diff --git a/apps/web/app/assets/empty-state/search/comments-dark.webp b/apps/web/app/assets/empty-state/search/comments-dark.webp new file mode 100644 index 0000000..d06ba7e Binary files /dev/null and b/apps/web/app/assets/empty-state/search/comments-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/comments-light.webp b/apps/web/app/assets/empty-state/search/comments-light.webp new file mode 100644 index 0000000..5a66067 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/comments-light.webp differ diff --git a/apps/web/app/assets/empty-state/search/issues-dark.webp b/apps/web/app/assets/empty-state/search/issues-dark.webp new file mode 100644 index 0000000..dcd00aa Binary files /dev/null and b/apps/web/app/assets/empty-state/search/issues-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/issues-light.webp b/apps/web/app/assets/empty-state/search/issues-light.webp new file mode 100644 index 0000000..7703fde Binary files /dev/null and b/apps/web/app/assets/empty-state/search/issues-light.webp differ diff --git a/apps/web/app/assets/empty-state/search/member-dark.webp b/apps/web/app/assets/empty-state/search/member-dark.webp new file mode 100644 index 0000000..20521a5 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/member-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/member-light.webp b/apps/web/app/assets/empty-state/search/member-light.webp new file mode 100644 index 0000000..dcd38c9 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/member-light.webp differ diff --git a/apps/web/app/assets/empty-state/search/notification-dark.webp b/apps/web/app/assets/empty-state/search/notification-dark.webp new file mode 100644 index 0000000..cb299d1 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/notification-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/notification-light.webp b/apps/web/app/assets/empty-state/search/notification-light.webp new file mode 100644 index 0000000..55c4ffa Binary files /dev/null and b/apps/web/app/assets/empty-state/search/notification-light.webp differ diff --git a/apps/web/app/assets/empty-state/search/project-dark.webp b/apps/web/app/assets/empty-state/search/project-dark.webp new file mode 100644 index 0000000..98c6572 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/project-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/project-light.webp b/apps/web/app/assets/empty-state/search/project-light.webp new file mode 100644 index 0000000..cb3e470 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/project-light.webp differ diff --git a/apps/web/app/assets/empty-state/search/search-dark.webp b/apps/web/app/assets/empty-state/search/search-dark.webp new file mode 100644 index 0000000..92abc61 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/search-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/search-light.webp b/apps/web/app/assets/empty-state/search/search-light.webp new file mode 100644 index 0000000..807ed26 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/search-light.webp differ diff --git a/apps/web/app/assets/empty-state/search/snooze-dark.webp b/apps/web/app/assets/empty-state/search/snooze-dark.webp new file mode 100644 index 0000000..296e797 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/snooze-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/snooze-light.webp b/apps/web/app/assets/empty-state/search/snooze-light.webp new file mode 100644 index 0000000..897ff35 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/snooze-light.webp differ diff --git a/apps/web/app/assets/empty-state/search/views-dark.webp b/apps/web/app/assets/empty-state/search/views-dark.webp new file mode 100644 index 0000000..96da5e3 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/views-dark.webp differ diff --git a/apps/web/app/assets/empty-state/search/views-light.webp b/apps/web/app/assets/empty-state/search/views-light.webp new file mode 100644 index 0000000..3cd1d23 Binary files /dev/null and b/apps/web/app/assets/empty-state/search/views-light.webp differ diff --git a/apps/web/app/assets/empty-state/state_graph.svg b/apps/web/app/assets/empty-state/state_graph.svg new file mode 100644 index 0000000..651ea34 --- /dev/null +++ b/apps/web/app/assets/empty-state/state_graph.svg @@ -0,0 +1,26 @@ + diff --git a/apps/web/app/assets/empty-state/stickies/stickies-dark.webp b/apps/web/app/assets/empty-state/stickies/stickies-dark.webp new file mode 100644 index 0000000..a93e44b Binary files /dev/null and b/apps/web/app/assets/empty-state/stickies/stickies-dark.webp differ diff --git a/apps/web/app/assets/empty-state/stickies/stickies-light.webp b/apps/web/app/assets/empty-state/stickies/stickies-light.webp new file mode 100644 index 0000000..c7fd1f1 Binary files /dev/null and b/apps/web/app/assets/empty-state/stickies/stickies-light.webp differ diff --git a/apps/web/app/assets/empty-state/stickies/stickies-search-dark.webp b/apps/web/app/assets/empty-state/stickies/stickies-search-dark.webp new file mode 100644 index 0000000..6afdc0c Binary files /dev/null and b/apps/web/app/assets/empty-state/stickies/stickies-search-dark.webp differ diff --git a/apps/web/app/assets/empty-state/stickies/stickies-search-light.webp b/apps/web/app/assets/empty-state/stickies/stickies-search-light.webp new file mode 100644 index 0000000..2b8ca8c Binary files /dev/null and b/apps/web/app/assets/empty-state/stickies/stickies-search-light.webp differ diff --git a/apps/web/app/assets/empty-state/view.svg b/apps/web/app/assets/empty-state/view.svg new file mode 100644 index 0000000..478cf6e --- /dev/null +++ b/apps/web/app/assets/empty-state/view.svg @@ -0,0 +1,26 @@ + diff --git a/apps/web/app/assets/empty-state/web-hook.svg b/apps/web/app/assets/empty-state/web-hook.svg new file mode 100644 index 0000000..f8e32d3 --- /dev/null +++ b/apps/web/app/assets/empty-state/web-hook.svg @@ -0,0 +1,49 @@ + diff --git a/apps/web/app/assets/empty-state/wiki/all-dark.webp b/apps/web/app/assets/empty-state/wiki/all-dark.webp new file mode 100644 index 0000000..81ef36d Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/all-dark.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/all-filters-dark.svg b/apps/web/app/assets/empty-state/wiki/all-filters-dark.svg new file mode 100644 index 0000000..037a2fd --- /dev/null +++ b/apps/web/app/assets/empty-state/wiki/all-filters-dark.svg @@ -0,0 +1,50 @@ + diff --git a/apps/web/app/assets/empty-state/wiki/all-filters-light.svg b/apps/web/app/assets/empty-state/wiki/all-filters-light.svg new file mode 100644 index 0000000..8ecd8d2 --- /dev/null +++ b/apps/web/app/assets/empty-state/wiki/all-filters-light.svg @@ -0,0 +1,45 @@ + diff --git a/apps/web/app/assets/empty-state/wiki/all-light.webp b/apps/web/app/assets/empty-state/wiki/all-light.webp new file mode 100644 index 0000000..02b1d88 Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/all-light.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/archived-dark.webp b/apps/web/app/assets/empty-state/wiki/archived-dark.webp new file mode 100644 index 0000000..64700c8 Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/archived-dark.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/archived-light.webp b/apps/web/app/assets/empty-state/wiki/archived-light.webp new file mode 100644 index 0000000..9412f73 Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/archived-light.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/name-filter-dark.svg b/apps/web/app/assets/empty-state/wiki/name-filter-dark.svg new file mode 100644 index 0000000..969a1fe --- /dev/null +++ b/apps/web/app/assets/empty-state/wiki/name-filter-dark.svg @@ -0,0 +1,49 @@ + diff --git a/apps/web/app/assets/empty-state/wiki/name-filter-light.svg b/apps/web/app/assets/empty-state/wiki/name-filter-light.svg new file mode 100644 index 0000000..bc2465a --- /dev/null +++ b/apps/web/app/assets/empty-state/wiki/name-filter-light.svg @@ -0,0 +1,44 @@ + diff --git a/apps/web/app/assets/empty-state/wiki/navigation-pane/assets-dark.webp b/apps/web/app/assets/empty-state/wiki/navigation-pane/assets-dark.webp new file mode 100644 index 0000000..c6bc05e Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/navigation-pane/assets-dark.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/navigation-pane/assets-light.webp b/apps/web/app/assets/empty-state/wiki/navigation-pane/assets-light.webp new file mode 100644 index 0000000..1e39829 Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/navigation-pane/assets-light.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/navigation-pane/outline-dark.webp b/apps/web/app/assets/empty-state/wiki/navigation-pane/outline-dark.webp new file mode 100644 index 0000000..fca82f1 Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/navigation-pane/outline-dark.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/navigation-pane/outline-light.webp b/apps/web/app/assets/empty-state/wiki/navigation-pane/outline-light.webp new file mode 100644 index 0000000..6870e6c Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/navigation-pane/outline-light.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/private-dark.webp b/apps/web/app/assets/empty-state/wiki/private-dark.webp new file mode 100644 index 0000000..b482f43 Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/private-dark.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/private-light.webp b/apps/web/app/assets/empty-state/wiki/private-light.webp new file mode 100644 index 0000000..e1c3af9 Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/private-light.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/public-dark.webp b/apps/web/app/assets/empty-state/wiki/public-dark.webp new file mode 100644 index 0000000..571bf8a Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/public-dark.webp differ diff --git a/apps/web/app/assets/empty-state/wiki/public-light.webp b/apps/web/app/assets/empty-state/wiki/public-light.webp new file mode 100644 index 0000000..e0f7b7d Binary files /dev/null and b/apps/web/app/assets/empty-state/wiki/public-light.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-draft/issue-dark.webp b/apps/web/app/assets/empty-state/workspace-draft/issue-dark.webp new file mode 100644 index 0000000..2765335 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-draft/issue-dark.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-draft/issue-light.webp b/apps/web/app/assets/empty-state/workspace-draft/issue-light.webp new file mode 100644 index 0000000..8be274b Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-draft/issue-light.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/api-tokens-dark-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/api-tokens-dark-resp.webp new file mode 100644 index 0000000..ae19eb4 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/api-tokens-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/api-tokens-dark.webp b/apps/web/app/assets/empty-state/workspace-settings/api-tokens-dark.webp new file mode 100644 index 0000000..bddaf05 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/api-tokens-dark.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/api-tokens-light-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/api-tokens-light-resp.webp new file mode 100644 index 0000000..2ec9bf8 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/api-tokens-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/api-tokens-light.webp b/apps/web/app/assets/empty-state/workspace-settings/api-tokens-light.webp new file mode 100644 index 0000000..ba3bc58 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/api-tokens-light.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/exports-dark-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/exports-dark-resp.webp new file mode 100644 index 0000000..6417ffa Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/exports-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/exports-dark.webp b/apps/web/app/assets/empty-state/workspace-settings/exports-dark.webp new file mode 100644 index 0000000..b0911c9 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/exports-dark.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/exports-light-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/exports-light-resp.webp new file mode 100644 index 0000000..29a695f Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/exports-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/exports-light.webp b/apps/web/app/assets/empty-state/workspace-settings/exports-light.webp new file mode 100644 index 0000000..5e08f21 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/exports-light.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/imports-dark-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/imports-dark-resp.webp new file mode 100644 index 0000000..70e789b Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/imports-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/imports-dark.webp b/apps/web/app/assets/empty-state/workspace-settings/imports-dark.webp new file mode 100644 index 0000000..428ee97 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/imports-dark.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/imports-light-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/imports-light-resp.webp new file mode 100644 index 0000000..9bc95ef Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/imports-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/imports-light.webp b/apps/web/app/assets/empty-state/workspace-settings/imports-light.webp new file mode 100644 index 0000000..5f42180 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/imports-light.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/integrations-dark-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/integrations-dark-resp.webp new file mode 100644 index 0000000..3f9e009 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/integrations-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/integrations-dark.webp b/apps/web/app/assets/empty-state/workspace-settings/integrations-dark.webp new file mode 100644 index 0000000..603a658 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/integrations-dark.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/integrations-light-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/integrations-light-resp.webp new file mode 100644 index 0000000..13e08be Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/integrations-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/integrations-light.webp b/apps/web/app/assets/empty-state/workspace-settings/integrations-light.webp new file mode 100644 index 0000000..eb62503 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/integrations-light.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/webhooks-dark-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/webhooks-dark-resp.webp new file mode 100644 index 0000000..7923073 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/webhooks-dark-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/webhooks-dark.webp b/apps/web/app/assets/empty-state/workspace-settings/webhooks-dark.webp new file mode 100644 index 0000000..88a584e Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/webhooks-dark.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/webhooks-light-resp.webp b/apps/web/app/assets/empty-state/workspace-settings/webhooks-light-resp.webp new file mode 100644 index 0000000..ecb0f28 Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/webhooks-light-resp.webp differ diff --git a/apps/web/app/assets/empty-state/workspace-settings/webhooks-light.webp b/apps/web/app/assets/empty-state/workspace-settings/webhooks-light.webp new file mode 100644 index 0000000..6c76b5a Binary files /dev/null and b/apps/web/app/assets/empty-state/workspace-settings/webhooks-light.webp differ diff --git a/apps/web/app/assets/favicon/apple-touch-icon.png b/apps/web/app/assets/favicon/apple-touch-icon.png new file mode 100644 index 0000000..a631267 Binary files /dev/null and b/apps/web/app/assets/favicon/apple-touch-icon.png differ diff --git a/apps/web/app/assets/favicon/favicon-16x16.png b/apps/web/app/assets/favicon/favicon-16x16.png new file mode 100644 index 0000000..af59ef0 Binary files /dev/null and b/apps/web/app/assets/favicon/favicon-16x16.png differ diff --git a/apps/web/app/assets/favicon/favicon-32x32.png b/apps/web/app/assets/favicon/favicon-32x32.png new file mode 100644 index 0000000..16a1271 Binary files /dev/null and b/apps/web/app/assets/favicon/favicon-32x32.png differ diff --git a/apps/web/app/assets/favicon/favicon.ico b/apps/web/app/assets/favicon/favicon.ico new file mode 100644 index 0000000..613b1a3 Binary files /dev/null and b/apps/web/app/assets/favicon/favicon.ico differ diff --git a/apps/web/app/assets/fonts/inter/bold-italic.ttf b/apps/web/app/assets/fonts/inter/bold-italic.ttf new file mode 100644 index 0000000..0d19c1a Binary files /dev/null and b/apps/web/app/assets/fonts/inter/bold-italic.ttf differ diff --git a/apps/web/app/assets/fonts/inter/bold.ttf b/apps/web/app/assets/fonts/inter/bold.ttf new file mode 100644 index 0000000..cd13f60 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/bold.ttf differ diff --git a/apps/web/app/assets/fonts/inter/heavy-italic.ttf b/apps/web/app/assets/fonts/inter/heavy-italic.ttf new file mode 100644 index 0000000..b33602f Binary files /dev/null and b/apps/web/app/assets/fonts/inter/heavy-italic.ttf differ diff --git a/apps/web/app/assets/fonts/inter/heavy.ttf b/apps/web/app/assets/fonts/inter/heavy.ttf new file mode 100644 index 0000000..89673de Binary files /dev/null and b/apps/web/app/assets/fonts/inter/heavy.ttf differ diff --git a/apps/web/app/assets/fonts/inter/light-italic.ttf b/apps/web/app/assets/fonts/inter/light-italic.ttf new file mode 100644 index 0000000..f69e18b Binary files /dev/null and b/apps/web/app/assets/fonts/inter/light-italic.ttf differ diff --git a/apps/web/app/assets/fonts/inter/light.ttf b/apps/web/app/assets/fonts/inter/light.ttf new file mode 100644 index 0000000..acae361 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/light.ttf differ diff --git a/apps/web/app/assets/fonts/inter/medium-italic.ttf b/apps/web/app/assets/fonts/inter/medium-italic.ttf new file mode 100644 index 0000000..5c8c8b1 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/medium-italic.ttf differ diff --git a/apps/web/app/assets/fonts/inter/medium.ttf b/apps/web/app/assets/fonts/inter/medium.ttf new file mode 100644 index 0000000..71d9017 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/medium.ttf differ diff --git a/apps/web/app/assets/fonts/inter/regular-italic.ttf b/apps/web/app/assets/fonts/inter/regular-italic.ttf new file mode 100644 index 0000000..14d3595 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/regular-italic.ttf differ diff --git a/apps/web/app/assets/fonts/inter/regular.ttf b/apps/web/app/assets/fonts/inter/regular.ttf new file mode 100644 index 0000000..ce097c8 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/regular.ttf differ diff --git a/apps/web/app/assets/fonts/inter/semibold-italic.ttf b/apps/web/app/assets/fonts/inter/semibold-italic.ttf new file mode 100644 index 0000000..d9c9896 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/semibold-italic.ttf differ diff --git a/apps/web/app/assets/fonts/inter/semibold.ttf b/apps/web/app/assets/fonts/inter/semibold.ttf new file mode 100644 index 0000000..053185e Binary files /dev/null and b/apps/web/app/assets/fonts/inter/semibold.ttf differ diff --git a/apps/web/app/assets/fonts/inter/thin-italic.ttf b/apps/web/app/assets/fonts/inter/thin-italic.ttf new file mode 100644 index 0000000..134e837 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/thin-italic.ttf differ diff --git a/apps/web/app/assets/fonts/inter/thin.ttf b/apps/web/app/assets/fonts/inter/thin.ttf new file mode 100644 index 0000000..e68ec47 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/thin.ttf differ diff --git a/apps/web/app/assets/fonts/inter/ultrabold-italic.ttf b/apps/web/app/assets/fonts/inter/ultrabold-italic.ttf new file mode 100644 index 0000000..df45062 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/ultrabold-italic.ttf differ diff --git a/apps/web/app/assets/fonts/inter/ultrabold.ttf b/apps/web/app/assets/fonts/inter/ultrabold.ttf new file mode 100644 index 0000000..e71c601 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/ultrabold.ttf differ diff --git a/apps/web/app/assets/fonts/inter/ultralight-italic.ttf b/apps/web/app/assets/fonts/inter/ultralight-italic.ttf new file mode 100644 index 0000000..275f305 Binary files /dev/null and b/apps/web/app/assets/fonts/inter/ultralight-italic.ttf differ diff --git a/apps/web/app/assets/fonts/inter/ultralight.ttf b/apps/web/app/assets/fonts/inter/ultralight.ttf new file mode 100644 index 0000000..f9c6cfc Binary files /dev/null and b/apps/web/app/assets/fonts/inter/ultralight.ttf differ diff --git a/apps/web/app/assets/icons/icon-180x180.png b/apps/web/app/assets/icons/icon-180x180.png new file mode 100644 index 0000000..e7142bc Binary files /dev/null and b/apps/web/app/assets/icons/icon-180x180.png differ diff --git a/apps/web/app/assets/icons/icon-512x512.png b/apps/web/app/assets/icons/icon-512x512.png new file mode 100644 index 0000000..4c070d0 Binary files /dev/null and b/apps/web/app/assets/icons/icon-512x512.png differ diff --git a/apps/web/app/assets/images/logo-spinner-dark.gif b/apps/web/app/assets/images/logo-spinner-dark.gif new file mode 100644 index 0000000..8bd0832 Binary files /dev/null and b/apps/web/app/assets/images/logo-spinner-dark.gif differ diff --git a/apps/web/app/assets/images/logo-spinner-light.gif b/apps/web/app/assets/images/logo-spinner-light.gif new file mode 100644 index 0000000..8b57103 Binary files /dev/null and b/apps/web/app/assets/images/logo-spinner-light.gif differ diff --git a/apps/web/app/assets/instance-not-ready.webp b/apps/web/app/assets/instance-not-ready.webp new file mode 100644 index 0000000..ceabbcc Binary files /dev/null and b/apps/web/app/assets/instance-not-ready.webp differ diff --git a/apps/web/app/assets/instance-setup-done.webp b/apps/web/app/assets/instance-setup-done.webp new file mode 100644 index 0000000..4773ed7 Binary files /dev/null and b/apps/web/app/assets/instance-setup-done.webp differ diff --git a/apps/web/app/assets/instance/maintenance-mode-dark.svg b/apps/web/app/assets/instance/maintenance-mode-dark.svg new file mode 100644 index 0000000..546125f --- /dev/null +++ b/apps/web/app/assets/instance/maintenance-mode-dark.svg @@ -0,0 +1,86 @@ + diff --git a/apps/web/app/assets/instance/maintenance-mode-light.svg b/apps/web/app/assets/instance/maintenance-mode-light.svg new file mode 100644 index 0000000..6cd8bab --- /dev/null +++ b/apps/web/app/assets/instance/maintenance-mode-light.svg @@ -0,0 +1,86 @@ + diff --git a/apps/web/app/assets/logos/gitea-logo.svg b/apps/web/app/assets/logos/gitea-logo.svg new file mode 100644 index 0000000..4329134 --- /dev/null +++ b/apps/web/app/assets/logos/gitea-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/web/app/assets/logos/github-black.png b/apps/web/app/assets/logos/github-black.png new file mode 100644 index 0000000..7a7a824 Binary files /dev/null and b/apps/web/app/assets/logos/github-black.png differ diff --git a/apps/web/app/assets/logos/github-dark.svg b/apps/web/app/assets/logos/github-dark.svg new file mode 100644 index 0000000..a0cb35c --- /dev/null +++ b/apps/web/app/assets/logos/github-dark.svg @@ -0,0 +1,3 @@ + diff --git a/apps/web/app/assets/logos/github-square.png b/apps/web/app/assets/logos/github-square.png new file mode 100644 index 0000000..527ba79 Binary files /dev/null and b/apps/web/app/assets/logos/github-square.png differ diff --git a/apps/web/app/assets/logos/github-white.png b/apps/web/app/assets/logos/github-white.png new file mode 100644 index 0000000..dbb2b57 Binary files /dev/null and b/apps/web/app/assets/logos/github-white.png differ diff --git a/apps/web/app/assets/logos/gitlab-logo.svg b/apps/web/app/assets/logos/gitlab-logo.svg new file mode 100644 index 0000000..dab4d8b --- /dev/null +++ b/apps/web/app/assets/logos/gitlab-logo.svg @@ -0,0 +1 @@ + diff --git a/apps/web/app/assets/logos/google-logo.svg b/apps/web/app/assets/logos/google-logo.svg new file mode 100644 index 0000000..088288f --- /dev/null +++ b/apps/web/app/assets/logos/google-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/web/app/assets/mac-command.svg b/apps/web/app/assets/mac-command.svg new file mode 100644 index 0000000..5cee459 --- /dev/null +++ b/apps/web/app/assets/mac-command.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/apps/web/app/assets/og-image.png b/apps/web/app/assets/og-image.png new file mode 100644 index 0000000..dbf89c6 Binary files /dev/null and b/apps/web/app/assets/og-image.png differ diff --git a/apps/web/app/assets/onboarding/cycles.webp b/apps/web/app/assets/onboarding/cycles.webp new file mode 100644 index 0000000..278803b Binary files /dev/null and b/apps/web/app/assets/onboarding/cycles.webp differ diff --git a/apps/web/app/assets/onboarding/issues.webp b/apps/web/app/assets/onboarding/issues.webp new file mode 100644 index 0000000..5aed9e3 Binary files /dev/null and b/apps/web/app/assets/onboarding/issues.webp differ diff --git a/apps/web/app/assets/onboarding/modules.webp b/apps/web/app/assets/onboarding/modules.webp new file mode 100644 index 0000000..974e464 Binary files /dev/null and b/apps/web/app/assets/onboarding/modules.webp differ diff --git a/apps/web/app/assets/onboarding/onboarding-pages.webp b/apps/web/app/assets/onboarding/onboarding-pages.webp new file mode 100644 index 0000000..536f9ec Binary files /dev/null and b/apps/web/app/assets/onboarding/onboarding-pages.webp differ diff --git a/apps/web/app/assets/onboarding/pages.webp b/apps/web/app/assets/onboarding/pages.webp new file mode 100644 index 0000000..27004d6 Binary files /dev/null and b/apps/web/app/assets/onboarding/pages.webp differ diff --git a/apps/web/app/assets/onboarding/views.webp b/apps/web/app/assets/onboarding/views.webp new file mode 100644 index 0000000..9c958ec Binary files /dev/null and b/apps/web/app/assets/onboarding/views.webp differ diff --git a/apps/web/app/assets/plane-logos/black-horizontal-with-blue-logo.png b/apps/web/app/assets/plane-logos/black-horizontal-with-blue-logo.png new file mode 100644 index 0000000..c14505a Binary files /dev/null and b/apps/web/app/assets/plane-logos/black-horizontal-with-blue-logo.png differ diff --git a/apps/web/app/assets/plane-logos/blue-without-text.png b/apps/web/app/assets/plane-logos/blue-without-text.png new file mode 100644 index 0000000..ea94aec Binary files /dev/null and b/apps/web/app/assets/plane-logos/blue-without-text.png differ diff --git a/apps/web/app/assets/plane-logos/white-horizontal-with-blue-logo.png b/apps/web/app/assets/plane-logos/white-horizontal-with-blue-logo.png new file mode 100644 index 0000000..97560fb Binary files /dev/null and b/apps/web/app/assets/plane-logos/white-horizontal-with-blue-logo.png differ diff --git a/apps/web/app/assets/plane-logos/white-horizontal.svg b/apps/web/app/assets/plane-logos/white-horizontal.svg new file mode 100644 index 0000000..13e2dbb --- /dev/null +++ b/apps/web/app/assets/plane-logos/white-horizontal.svg @@ -0,0 +1,17 @@ + diff --git a/apps/web/app/assets/plane-takeoff.png b/apps/web/app/assets/plane-takeoff.png new file mode 100644 index 0000000..417ff82 Binary files /dev/null and b/apps/web/app/assets/plane-takeoff.png differ diff --git a/apps/web/app/assets/scribble/scribble-black.svg b/apps/web/app/assets/scribble/scribble-black.svg new file mode 100644 index 0000000..556b956 --- /dev/null +++ b/apps/web/app/assets/scribble/scribble-black.svg @@ -0,0 +1,10 @@ + diff --git a/apps/web/app/assets/scribble/scribble-white.svg b/apps/web/app/assets/scribble/scribble-white.svg new file mode 100644 index 0000000..2133897 --- /dev/null +++ b/apps/web/app/assets/scribble/scribble-white.svg @@ -0,0 +1,10 @@ + diff --git a/apps/web/app/assets/services/csv.svg b/apps/web/app/assets/services/csv.svg new file mode 100644 index 0000000..adea1dd --- /dev/null +++ b/apps/web/app/assets/services/csv.svg @@ -0,0 +1,12 @@ + diff --git a/apps/web/app/assets/services/excel.svg b/apps/web/app/assets/services/excel.svg new file mode 100644 index 0000000..86fb8e6 --- /dev/null +++ b/apps/web/app/assets/services/excel.svg @@ -0,0 +1,11 @@ + diff --git a/apps/web/app/assets/services/github.png b/apps/web/app/assets/services/github.png new file mode 100644 index 0000000..527ba79 Binary files /dev/null and b/apps/web/app/assets/services/github.png differ diff --git a/apps/web/app/assets/services/jira.svg b/apps/web/app/assets/services/jira.svg new file mode 100644 index 0000000..5e5cebc --- /dev/null +++ b/apps/web/app/assets/services/jira.svg @@ -0,0 +1,15 @@ + diff --git a/apps/web/app/assets/services/json.svg b/apps/web/app/assets/services/json.svg new file mode 100644 index 0000000..0fe32e2 --- /dev/null +++ b/apps/web/app/assets/services/json.svg @@ -0,0 +1,12 @@ + diff --git a/apps/web/app/assets/services/slack.png b/apps/web/app/assets/services/slack.png new file mode 100644 index 0000000..fc91800 Binary files /dev/null and b/apps/web/app/assets/services/slack.png differ diff --git a/apps/web/app/assets/user.png b/apps/web/app/assets/user.png new file mode 100644 index 0000000..bc02512 Binary files /dev/null and b/apps/web/app/assets/user.png differ diff --git a/apps/web/app/assets/users/user-1.png b/apps/web/app/assets/users/user-1.png new file mode 100644 index 0000000..b69f539 Binary files /dev/null and b/apps/web/app/assets/users/user-1.png differ diff --git a/apps/web/app/assets/users/user-2.png b/apps/web/app/assets/users/user-2.png new file mode 100644 index 0000000..c5b9bc5 Binary files /dev/null and b/apps/web/app/assets/users/user-2.png differ diff --git a/apps/web/app/assets/users/user-profile-cover-default-img.png b/apps/web/app/assets/users/user-profile-cover-default-img.png new file mode 100644 index 0000000..6f555da Binary files /dev/null and b/apps/web/app/assets/users/user-profile-cover-default-img.png differ diff --git a/apps/web/app/assets/workspace-active-cycles/cta-l-1-dark.webp b/apps/web/app/assets/workspace-active-cycles/cta-l-1-dark.webp new file mode 100644 index 0000000..901f4b3 Binary files /dev/null and b/apps/web/app/assets/workspace-active-cycles/cta-l-1-dark.webp differ diff --git a/apps/web/app/assets/workspace-active-cycles/cta-l-1-light.webp b/apps/web/app/assets/workspace-active-cycles/cta-l-1-light.webp new file mode 100644 index 0000000..7cce304 Binary files /dev/null and b/apps/web/app/assets/workspace-active-cycles/cta-l-1-light.webp differ diff --git a/apps/web/app/assets/workspace-active-cycles/cta-r-1-dark.webp b/apps/web/app/assets/workspace-active-cycles/cta-r-1-dark.webp new file mode 100644 index 0000000..3c3a32a Binary files /dev/null and b/apps/web/app/assets/workspace-active-cycles/cta-r-1-dark.webp differ diff --git a/apps/web/app/assets/workspace-active-cycles/cta-r-1-light.webp b/apps/web/app/assets/workspace-active-cycles/cta-r-1-light.webp new file mode 100644 index 0000000..4911a27 Binary files /dev/null and b/apps/web/app/assets/workspace-active-cycles/cta-r-1-light.webp differ diff --git a/apps/web/app/assets/workspace-active-cycles/cta-r-2-dark.webp b/apps/web/app/assets/workspace-active-cycles/cta-r-2-dark.webp new file mode 100644 index 0000000..0776cc7 Binary files /dev/null and b/apps/web/app/assets/workspace-active-cycles/cta-r-2-dark.webp differ diff --git a/apps/web/app/assets/workspace-active-cycles/cta-r-2-light.webp b/apps/web/app/assets/workspace-active-cycles/cta-r-2-light.webp new file mode 100644 index 0000000..971d28f Binary files /dev/null and b/apps/web/app/assets/workspace-active-cycles/cta-r-2-light.webp differ diff --git a/apps/web/app/assets/workspace/workspace-creation-disabled.png b/apps/web/app/assets/workspace/workspace-creation-disabled.png new file mode 100644 index 0000000..09e05ef Binary files /dev/null and b/apps/web/app/assets/workspace/workspace-creation-disabled.png differ diff --git a/apps/web/app/assets/workspace/workspace-not-available.png b/apps/web/app/assets/workspace/workspace-not-available.png new file mode 100644 index 0000000..e95cdf0 Binary files /dev/null and b/apps/web/app/assets/workspace/workspace-not-available.png differ diff --git a/apps/web/app/compat/next/helper.ts b/apps/web/app/compat/next/helper.ts new file mode 100644 index 0000000..c4edf3d --- /dev/null +++ b/apps/web/app/compat/next/helper.ts @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +/** + * Ensures that a URL has a trailing slash while preserving query parameters and fragments + * @param url - The URL to process + * @returns The URL with a trailing slash added to the pathname (if not already present) + */ +export function ensureTrailingSlash(url: string): string { + try { + const fallbackBaseUrl = + typeof window !== "undefined" && window.location.origin ? window.location.origin : "http://dummy.com"; + // Handle relative URLs by creating a URL object with a fallback base URL + const urlObj = new URL(url, fallbackBaseUrl); + + // Don't modify root path + if (urlObj.pathname === "/") { + return url; + } + + // Add trailing slash if it doesn't exist + if (!urlObj.pathname.endsWith("/")) { + urlObj.pathname += "/"; + } + + // For relative URLs, return just the path + search + hash + if (url.startsWith("/")) { + return urlObj.pathname + urlObj.search + urlObj.hash; + } + + // For absolute URLs, return the full URL + return urlObj.toString(); + } catch (error) { + // If URL parsing fails, return the original URL + console.warn("Failed to parse URL for trailing slash enforcement:", url, error); + return url; + } +} diff --git a/apps/web/app/compat/next/image.tsx b/apps/web/app/compat/next/image.tsx new file mode 100644 index 0000000..f229d0d --- /dev/null +++ b/apps/web/app/compat/next/image.tsx @@ -0,0 +1,37 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React from "react"; + +// Minimal shim so code using next/image compiles under React Router + Vite +// without changing call sites. It just renders a native img. + +type NextImageProps = React.ImgHTMLAttributes & { + src: string; + fill?: boolean; + priority?: boolean; + quality?: number; + placeholder?: "blur" | "empty"; + blurDataURL?: string; +}; + +function Image({ + src, + alt = "", + fill, + priority: _priority, + quality: _quality, + placeholder: _placeholder, + blurDataURL: _blurDataURL, + ...rest +}: NextImageProps) { + // If fill is true, apply object-fit styles + const style = fill ? { objectFit: "cover" as const, width: "100%", height: "100%" } : rest.style; + + return {alt}

; +} + +export default Image; diff --git a/apps/web/app/compat/next/link.tsx b/apps/web/app/compat/next/link.tsx new file mode 100644 index 0000000..8517756 --- /dev/null +++ b/apps/web/app/compat/next/link.tsx @@ -0,0 +1,23 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React from "react"; +import { Link as RRLink } from "react-router"; +import { ensureTrailingSlash } from "./helper"; + +type NextLinkProps = React.ComponentProps<"a"> & { + href: string; + replace?: boolean; + prefetch?: boolean; // next.js prop, ignored + scroll?: boolean; // next.js prop, ignored + shallow?: boolean; // next.js prop, ignored +}; + +function Link({ href, replace, prefetch: _prefetch, scroll: _scroll, shallow: _shallow, ...rest }: NextLinkProps) { + return ; +} + +export default Link; diff --git a/apps/web/app/compat/next/navigation.ts b/apps/web/app/compat/next/navigation.ts new file mode 100644 index 0000000..3803ffe --- /dev/null +++ b/apps/web/app/compat/next/navigation.ts @@ -0,0 +1,52 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useMemo } from "react"; +import { useLocation, useNavigate, useParams as useParamsRR, useSearchParams as useSearchParamsRR } from "react-router"; +import { ensureTrailingSlash } from "./helper"; + +export function useRouter() { + const navigate = useNavigate(); + return useMemo( + () => ({ + push: (to: string) => { + // Defer navigation to avoid state updates during render + setTimeout(() => navigate(ensureTrailingSlash(to)), 0); + }, + replace: (to: string) => { + // Defer navigation to avoid state updates during render + setTimeout(() => navigate(ensureTrailingSlash(to), { replace: true }), 0); + }, + back: () => { + setTimeout(() => navigate(-1), 0); + }, + forward: () => { + setTimeout(() => navigate(1), 0); + }, + refresh: () => { + location.reload(); + }, + prefetch: async (_to: string) => { + // no-op in this shim + }, + }), + [navigate] + ); +} + +export function usePathname(): string { + const { pathname } = useLocation(); + return pathname; +} + +export function useSearchParams(): URLSearchParams { + const [searchParams] = useSearchParamsRR(); + return searchParams; +} + +export function useParams() { + return useParamsRR(); +} diff --git a/apps/web/app/compat/next/script.tsx b/apps/web/app/compat/next/script.tsx new file mode 100644 index 0000000..c2b470b --- /dev/null +++ b/apps/web/app/compat/next/script.tsx @@ -0,0 +1,59 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useEffect } from "react"; + +type ScriptProps = { + src?: string; + id?: string; + strategy?: "beforeInteractive" | "afterInteractive" | "lazyOnload" | "worker"; + onLoad?: () => void; + onError?: () => void; + children?: string; + defer?: boolean; + [key: string]: any; +}; + +// Minimal shim for next/script that creates a script tag +function Script({ src, id, strategy: _strategy, onLoad, onError, children, ...rest }: ScriptProps) { + useEffect(() => { + if (src) { + const script = document.createElement("script"); + if (id) script.id = id; + script.src = src; + if (onLoad) script.onload = onLoad; + if (onError) script.onerror = onError; + Object.keys(rest).forEach((key) => { + script.setAttribute(key, rest[key]); + }); + document.body.appendChild(script); + + return () => { + if (script.parentNode) { + document.body.removeChild(script); + } + }; + } else if (children) { + const script = document.createElement("script"); + if (id) script.id = id; + script.textContent = children; + Object.keys(rest).forEach((key) => { + script.setAttribute(key, rest[key]); + }); + document.body.appendChild(script); + + return () => { + if (script.parentNode) { + document.body.removeChild(script); + } + }; + } + }, [src, id, children, onLoad, onError, rest]); + + return null; +} + +export default Script; diff --git a/apps/web/app/entry.client.tsx b/apps/web/app/entry.client.tsx new file mode 100644 index 0000000..071abc8 --- /dev/null +++ b/apps/web/app/entry.client.tsx @@ -0,0 +1,50 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { initPromise } from "@plane/i18n"; +import { startTransition, StrictMode } from "react"; +import { hydrateRoot } from "react-dom/client"; +import { HydratedRouter } from "react-router/dom"; + +import polyfills from "@/lib/polyfills"; +import { isStaleAssetErrorMessage, recoverFromStaleAsset } from "@/lib/stale-asset-error"; + +void polyfills; + +// Production-only: in dev these errors come from the dev server itself (restarts, +// stale optimized deps) and auto-reloading would mask them. +if (import.meta.env.PROD) { + window.addEventListener("vite:preloadError", (event) => { + if (recoverFromStaleAsset()) event.preventDefault(); + }); + + window.addEventListener("error", (event) => { + if (isStaleAssetErrorMessage(event.message || "")) recoverFromStaleAsset(); + }); + + window.addEventListener("unhandledrejection", (event) => { + const reason = event.reason instanceof Error ? event.reason.message : String(event.reason ?? ""); + if (isStaleAssetErrorMessage(reason)) recoverFromStaleAsset(); + }); +} + +// Initialize i18n before hydrating (the remix-i18next pattern for React +// Router: await init, then hydrateRoot). Hydrating before the instance is +// ready would make the first client render diverge from the prerendered +// shell, and React 19 leaves DOM it could not adopt in place instead of +// clearing it. +void initPromise + .catch(() => {}) + .then(() => { + startTransition(() => { + hydrateRoot( + document, + + + + ); + }); + }); diff --git a/apps/web/app/error/dev.tsx b/apps/web/app/error/dev.tsx new file mode 100644 index 0000000..b9b1d48 --- /dev/null +++ b/apps/web/app/error/dev.tsx @@ -0,0 +1,146 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// plane imports +import { isRouteErrorResponse } from "react-router"; +import { Banner } from "@makeplane/propel/components/banner"; +import { InfoFilled } from "@makeplane/propel/icons"; +import { Button } from "@plane/propel/button"; +import { Card, ECardVariant } from "@plane/propel/card"; + +interface ErrorActionsProps { + onGoHome: () => void; + onReload?: () => void; +} + +function ErrorActions({ onGoHome, onReload }: ErrorActionsProps) { + return ( +

+ + {onReload && ( + + )} +

+ ); +} + +interface DevErrorComponentProps { + error: unknown; + onGoHome: () => void; + onReload: () => void; +} + +export function DevErrorComponent({ error, onGoHome, onReload }: DevErrorComponentProps) { + if (isRouteErrorResponse(error)) { + return ( +

+ } title="Route Error Response" /> + + +

+ {error.status} {error.statusText} +

+ +

Error Data

{error.data}

+ + +

+ +

+ ); + } + + if (error instanceof Error) { + return ( +

+ } title="Runtime Error" /> + +

Error

+ +

Message

{error.message}

+ + {error.stack && ( +

Stack Trace

+                      {error.stack}
+

+ )} + + +

+ + + +

+ +

Development Mode

+ This detailed error view is only visible in development. In production, users will see a friendly + error page. +

+ +

+ ); + } + + return ( +

+ } title="Unknown Error" /> + + +

Unknown Error

+ +

+ An unknown error occurred. Please try refreshing the page or contact support if the problem persists. +

+ + +

+ +

+ ); +} diff --git a/apps/web/app/error/index.tsx b/apps/web/app/error/index.tsx new file mode 100644 index 0000000..9c3712b --- /dev/null +++ b/apps/web/app/error/index.tsx @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// hooks +import { useAppRouter } from "@/hooks/use-app-router"; +// layouts +import { DevErrorComponent } from "./dev"; +import { ProdErrorComponent } from "./prod"; + +export function CustomErrorComponent({ error }: { error: unknown }) { + // router + const router = useAppRouter(); + + const handleGoHome = () => router.push("/"); + const handleReload = () => window.location.reload(); + + if (import.meta.env.DEV) { + return ; + } + + return ; +} diff --git a/apps/web/app/error/prod.tsx b/apps/web/app/error/prod.tsx new file mode 100644 index 0000000..a8d6182 --- /dev/null +++ b/apps/web/app/error/prod.tsx @@ -0,0 +1,91 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useTheme } from "next-themes"; +// plane imports +import { Button } from "@plane/propel/button"; +// assets +import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url"; +import maintenanceModeLightModeImage from "@/app/assets/instance/maintenance-mode-light.svg?url"; +// layouts +import DefaultLayout from "@/layouts/default-layout"; + +const linkMap = [ + { + key: "mail_to", + label: "Contact Support", + value: "mailto:support@plane.so", + }, + { + key: "status", + label: "Status Page", + value: "https://status.plane.so/", + }, + { + key: "twitter_handle", + label: "@planepowers", + value: "https://x.com/planepowers", + }, +]; + +// Production Error Component +interface ProdErrorComponentProps { + onGoHome: () => void; +} + +export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) { + // hooks + const { resolvedTheme } = useTheme(); + + // derived values + const maintenanceModeImage = resolvedTheme === "dark" ? maintenanceModeDarkModeImage : maintenanceModeLightModeImage; + + return ( + +

🚧 Looks like something went wrong!

+ + We track these errors automatically and working on getting things back up and running. If the problem + persists feel free to contact us. In the meantime, try refreshing. + +

+ +

+ {linkMap.map((link) => ( +

+ + {link.label} + +

+ ))} +

+ +

+ + ); +} diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx new file mode 100644 index 0000000..165d835 --- /dev/null +++ b/apps/web/app/layout.tsx @@ -0,0 +1,38 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Outlet, redirect } from "react-router"; +// plane imports +import { cn } from "@plane/utils"; +// local +import { ensureTrailingSlash } from "./compat/next/helper"; +import { AppProvider } from "./provider"; +import type { Route } from "./+types/layout"; + +const trailingSlashRedirectMiddleware: Route.ClientMiddlewareFunction = async ({ request }, next) => { + const canonical = ensureTrailingSlash(request.url); + if (canonical !== request.url) { + throw redirect(canonical, { status: 308 }); + } + return next(); +}; + +export const clientMiddleware: Route.ClientMiddlewareFunction[] = [trailingSlashRedirectMiddleware]; + +// Pathless layout route wrapping every route (see app/routes.ts). Providers, the store +// layer, and app chrome live here instead of root.tsx so they stay out of the SPA-mode +// server build — see the note in app/root.tsx. +export default function AppShellLayout() { + return ( + +

+ +

+ + ); +} diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx new file mode 100644 index 0000000..1376395 --- /dev/null +++ b/apps/web/app/not-found.tsx @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import Link from "next/link"; +// ui +import { Button } from "@plane/propel/button"; +// images +import Image404 from "@/app/assets/404.svg?url"; +// types +import type { Route } from "./+types/not-found"; + +export const meta: Route.MetaFunction = () => [ + { title: "404 - Page Not Found" }, + { name: "robots", content: "noindex, nofollow" }, +]; + +function PageNotFound() { + return ( +

Oops! Something went wrong.

+ Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is + temporarily unavailable. +

+ + + + + +

+ ); +} + +export default PageNotFound; diff --git a/apps/web/app/provider.tsx b/apps/web/app/provider.tsx new file mode 100644 index 0000000..016b66c --- /dev/null +++ b/apps/web/app/provider.tsx @@ -0,0 +1,58 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { lazy, Suspense } from "react"; +import { useTheme } from "next-themes"; +import { SWRConfig } from "swr"; +// Plane Imports +import { WEB_SWR_CONFIG } from "@plane/constants"; +import { TranslationProvider } from "@plane/i18n"; +import { Toast } from "@plane/propel/toast"; +// helpers +import { resolveGeneralTheme } from "@plane/utils"; +// mobx store provider +import { StoreProvider } from "@/lib/store-context"; + +// lazy imports +const AppProgressBar = lazy(function AppProgressBar() { + return import("@/lib/b-progress/AppProgressBar"); +}); + +const StoreWrapper = lazy(function StoreWrapper() { + return import("@/lib/wrappers/store-wrapper"); +}); + +const InstanceWrapper = lazy(function InstanceWrapper() { + return import("@/lib/wrappers/instance-wrapper"); +}); + +export interface IAppProvider { + children: React.ReactNode; +} + +export function AppProvider(props: IAppProvider) { + const { children } = props; + // themes + const { resolvedTheme } = useTheme(); + + return ( + + <> + + + + + + + {children} + + + + + + + ); +} diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx new file mode 100644 index 0000000..8034624 --- /dev/null +++ b/apps/web/app/root.tsx @@ -0,0 +1,138 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { ReactNode } from "react"; +import { Links, Meta, Outlet, Scripts } from "react-router"; +import type { LinksFunction } from "react-router"; +import { ThemeProvider, useTheme } from "next-themes"; +// plane imports +import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants"; +// types +// assets +import favicon16 from "@/app/assets/favicon/favicon-16x16.png?url"; +import favicon32 from "@/app/assets/favicon/favicon-32x32.png?url"; +import faviconIco from "@/app/assets/favicon/favicon.ico?url"; +import icon180 from "@/app/assets/icons/icon-180x180.png?url"; +import icon512 from "@/app/assets/icons/icon-512x512.png?url"; +import ogImage from "@/app/assets/og-image.png?url"; +import globalStyles from "@/styles/globals.css?url"; +import type { Route } from "./+types/root"; +// components +import { LogoSpinner } from "@/components/common/logo-spinner"; +// lib +import { isStaleAssetError, recoverFromStaleAsset } from "@/lib/stale-asset-error"; +// local +import { CustomErrorComponent } from "./error"; +// fonts +import "@fontsource-variable/inter"; +import interVariableWoff2 from "@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url"; +import "@fontsource/material-symbols-rounded"; +import "@fontsource/ibm-plex-mono"; + +const APP_TITLE = "Plane | Simple, extensible, open-source project management tool."; + +export const links: LinksFunction = () => [ + { rel: "icon", type: "image/png", sizes: "32x32", href: favicon32 }, + { rel: "icon", type: "image/png", sizes: "16x16", href: favicon16 }, + { rel: "shortcut icon", href: faviconIco }, + { rel: "manifest", href: "/site.webmanifest.json" }, + { rel: "apple-touch-icon", href: icon512 }, + { rel: "apple-touch-icon", sizes: "180x180", href: icon180 }, + { rel: "apple-touch-icon", sizes: "512x512", href: icon512 }, + { rel: "manifest", href: "/manifest.json" }, + { rel: "stylesheet", href: globalStyles }, + { + rel: "preload", + href: interVariableWoff2, + as: "font", + type: "font/woff2", + crossOrigin: "anonymous", + }, +]; + +export function Layout({ children }: { children: ReactNode }) { + return ( + + + + + + {/* Meta info for PWA */} + + + + + + + + + + +

+ + {children} + + + + + ); +} + +export const meta: Route.MetaFunction = () => [ + { title: APP_TITLE }, + { name: "description", content: SITE_DESCRIPTION }, + { property: "og:title", content: APP_TITLE }, + { + property: "og:description", + content: "Open-source project management tool to manage work items, cycles, and product roadmaps easily", + }, + { property: "og:url", content: "https://app.plane.so/" }, + { property: "og:image", content: ogImage }, + { property: "og:image:width", content: "1200" }, + { property: "og:image:height", content: "630" }, + { property: "og:image:alt", content: "Plane - Modern project management" }, + { + name: "keywords", + content: + "software development, plan, ship, software, accelerate, code management, release management, project management, work item tracking, agile, scrum, kanban, collaboration", + }, + { name: "twitter:site", content: "@planepowers" }, + { name: "twitter:card", content: "summary_large_image" }, + { name: "twitter:image", content: ogImage }, + { name: "twitter:image:width", content: "1200" }, + { name: "twitter:image:height", content: "630" }, + { name: "twitter:image:alt", content: "Plane - Modern project management" }, +]; + +// Root stays shell-thin: in SPA mode React Router server-builds only the root route, so +// everything imported here is evaluated in Node just to prerender the fallback index.html. +// Providers, the store layer, and app chrome belong in app/layout.tsx — never import them here. +export default function Root() { + return ; +} + +export function HydrateFallback() { + const { resolvedTheme } = useTheme(); + + // if we are on the server or the theme is not resolved, return an empty div + if (typeof window === "undefined" || resolvedTheme === undefined) return

; + + return ( +

+ +

+ ); +} + +export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { + // A stale chunk failure surfaces here as React Router's own wrapper error + // (the failed dynamic import itself never reaches a window event) — recover + // the same way entry.client.tsx does instead of just showing the error page. + if (import.meta.env.PROD && isStaleAssetError(error)) recoverFromStaleAsset(); + + return ; +} diff --git a/apps/web/app/routes.ts b/apps/web/app/routes.ts new file mode 100644 index 0000000..0283958 --- /dev/null +++ b/apps/web/app/routes.ts @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { layout, route } from "@react-router/dev/routes"; +import type { RouteConfigEntry } from "@react-router/dev/routes"; +import { coreRoutes } from "./routes/core"; +import { extendedRoutes } from "./routes/extended"; +import { mergeRoutes } from "./routes/helper"; + +/** + * Main Routes Configuration + * This file serves as the entry point for the route configuration. + * + * Every route nests under the pathless app/layout.tsx shell; root.tsx stays + * shell-thin (see the note in app/root.tsx). + */ +const mergedRoutes: RouteConfigEntry[] = mergeRoutes(coreRoutes, extendedRoutes); + +// Add catch-all route at the end (404 handler) +const routes: RouteConfigEntry[] = [layout("./layout.tsx", [...mergedRoutes, route("*", "./not-found.tsx")])]; + +export default routes; diff --git a/apps/web/app/routes/core.ts b/apps/web/app/routes/core.ts new file mode 100644 index 0000000..c9c82bd --- /dev/null +++ b/apps/web/app/routes/core.ts @@ -0,0 +1,405 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { index, layout, route } from "@react-router/dev/routes"; +import type { RouteConfig, RouteConfigEntry } from "@react-router/dev/routes"; + +export const coreRoutes: RouteConfigEntry[] = [ + // ======================================================================== + // USER MANAGEMENT ROUTES + // ======================================================================== + + // Home - Sign In + layout("./(home)/layout.tsx", [index("./(home)/page.tsx")]), + + // Sign Up + layout("./(all)/sign-up/layout.tsx", [route("sign-up", "./(all)/sign-up/page.tsx")]), + + // Account Routes - Password Management + layout("./(all)/accounts/forgot-password/layout.tsx", [ + route("accounts/forgot-password", "./(all)/accounts/forgot-password/page.tsx"), + ]), + layout("./(all)/accounts/reset-password/layout.tsx", [ + route("accounts/reset-password", "./(all)/accounts/reset-password/page.tsx"), + ]), + layout("./(all)/accounts/set-password/layout.tsx", [ + route("accounts/set-password", "./(all)/accounts/set-password/page.tsx"), + ]), + + // Create Workspace + layout("./(all)/create-workspace/layout.tsx", [route("create-workspace", "./(all)/create-workspace/page.tsx")]), + + // Onboarding + layout("./(all)/onboarding/layout.tsx", [route("onboarding", "./(all)/onboarding/page.tsx")]), + + // Invitations + layout("./(all)/invitations/layout.tsx", [route("invitations", "./(all)/invitations/page.tsx")]), + + // Workspace Invitations + layout("./(all)/workspace-invitations/layout.tsx", [ + route("workspace-invitations", "./(all)/workspace-invitations/page.tsx"), + ]), + + // ======================================================================== + // ALL APP ROUTES + // ======================================================================== + layout("./(all)/layout.tsx", [ + // ====================================================================== + // WORKSPACE-SCOPED ROUTES + // ====================================================================== + layout("./(all)/[workspaceSlug]/layout.tsx", [ + // ==================================================================== + // PROJECTS APP SECTION - WORKSPACE LEVEL ROUTES + // ==================================================================== + layout("./(all)/[workspaceSlug]/(projects)/layout.tsx", [ + // -------------------------------------------------------------------- + // WORKSPACE LEVEL ROUTES + // -------------------------------------------------------------------- + + // Workspace Home + route(":workspaceSlug", "./(all)/[workspaceSlug]/(projects)/page.tsx"), + + // Active Cycles + layout("./(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx", [ + route(":workspaceSlug/active-cycles", "./(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx"), + ]), + + // Analytics + layout("./(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx", [ + route(":workspaceSlug/analytics/:tabId", "./(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx"), + ]), + + // Browse + layout("./(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx", [ + route(":workspaceSlug/browse/:workItem", "./(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx"), + ]), + + // Drafts + layout("./(all)/[workspaceSlug]/(projects)/drafts/layout.tsx", [ + route(":workspaceSlug/drafts", "./(all)/[workspaceSlug]/(projects)/drafts/page.tsx"), + ]), + + // Notifications + layout("./(all)/[workspaceSlug]/(projects)/notifications/layout.tsx", [ + route(":workspaceSlug/notifications", "./(all)/[workspaceSlug]/(projects)/notifications/page.tsx"), + ]), + + // Profile + layout("./(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx", [ + route(":workspaceSlug/profile/:userId", "./(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx"), + route( + ":workspaceSlug/profile/:userId/:profileViewId", + "./(all)/[workspaceSlug]/(projects)/profile/[userId]/[profileViewId]/page.tsx" + ), + route( + ":workspaceSlug/profile/:userId/activity", + "./(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx" + ), + ]), + + // Stickies + layout("./(all)/[workspaceSlug]/(projects)/stickies/layout.tsx", [ + route(":workspaceSlug/stickies", "./(all)/[workspaceSlug]/(projects)/stickies/page.tsx"), + ]), + + // Workspace Views + layout("./(all)/[workspaceSlug]/(projects)/workspace-views/layout.tsx", [ + route(":workspaceSlug/workspace-views", "./(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx"), + route( + ":workspaceSlug/workspace-views/:globalViewId", + "./(all)/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx" + ), + ]), + + // Archived Projects + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx", [ + route( + ":workspaceSlug/projects/archives", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx" + ), + ]), + + // -------------------------------------------------------------------- + // PROJECT LEVEL ROUTES + // -------------------------------------------------------------------- + + // Project List + layout("./(all)/[workspaceSlug]/(projects)/projects/(list)/layout.tsx", [ + route(":workspaceSlug/projects", "./(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx"), + ]), + + // Project Detail + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx", [ + // Project Issues List + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/issues", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx" + ), + ]), + // Issue Detail + route( + ":workspaceSlug/projects/:projectId/issues/:issueId", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx" + ), + + // Cycle Detail + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/cycles/:cycleId", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx" + ), + ]), + + // Cycles List + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/cycles", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx" + ), + ]), + + // Module Detail + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/modules/:moduleId", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx" + ), + ]), + + // Modules List + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/modules", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx" + ), + ]), + + // View Detail + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/views/:viewId", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx" + ), + ]), + + // Views List + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/views", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx" + ), + ]), + + // Page Detail + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/pages/:pageId", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx" + ), + ]), + + // Pages List + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/pages", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx" + ), + ]), + // Intake list + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/intake", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx" + ), + ]), + ]), + + // Project Archives - Issues, Cycles, Modules + // Project Archives - Issues - List + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/archives/issues", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx" + ), + ]), + + // Project Archives - Issues - Detail + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/archives/issues/:archivedIssueId", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx" + ), + ]), + + // Project Archives - Cycles + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/archives/cycles", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx" + ), + ]), + + // Project Archives - Modules + layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx", [ + route( + ":workspaceSlug/projects/:projectId/archives/modules", + "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx" + ), + ]), + ]), + + // ==================================================================== + // SETTINGS SECTION + // ==================================================================== + layout("./(all)/[workspaceSlug]/(settings)/layout.tsx", [ + // -------------------------------------------------------------------- + // WORKSPACE SETTINGS + // -------------------------------------------------------------------- + + layout("./(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx", [ + route(":workspaceSlug/settings", "./(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx"), + route( + ":workspaceSlug/settings/members", + "./(all)/[workspaceSlug]/(settings)/settings/(workspace)/members/page.tsx" + ), + route( + ":workspaceSlug/settings/billing", + "./(all)/[workspaceSlug]/(settings)/settings/(workspace)/billing/page.tsx" + ), + route( + ":workspaceSlug/settings/exports", + "./(all)/[workspaceSlug]/(settings)/settings/(workspace)/exports/page.tsx" + ), + route( + ":workspaceSlug/settings/webhooks", + "./(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/page.tsx" + ), + route( + ":workspaceSlug/settings/webhooks/:webhookId", + "./(all)/[workspaceSlug]/(settings)/settings/(workspace)/webhooks/[webhookId]/page.tsx" + ), + ]), + + // -------------------------------------------------------------------- + // PROJECT SETTINGS + // -------------------------------------------------------------------- + + layout("./(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx", [ + // No Projects available page + route(":workspaceSlug/settings/projects", "./(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx"), + layout("./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx", [ + // Project Settings + route( + ":workspaceSlug/settings/projects/:projectId", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx" + ), + // Project Members + route( + ":workspaceSlug/settings/projects/:projectId/members", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx" + ), + // Project Features + route( + ":workspaceSlug/settings/projects/:projectId/features/cycles", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/cycles/page.tsx" + ), + route( + ":workspaceSlug/settings/projects/:projectId/features/modules", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/modules/page.tsx" + ), + route( + ":workspaceSlug/settings/projects/:projectId/features/views", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/views/page.tsx" + ), + route( + ":workspaceSlug/settings/projects/:projectId/features/pages", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/pages/page.tsx" + ), + route( + ":workspaceSlug/settings/projects/:projectId/features/intake", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/intake/page.tsx" + ), + // Project States + route( + ":workspaceSlug/settings/projects/:projectId/states", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx" + ), + // Project Labels + route( + ":workspaceSlug/settings/projects/:projectId/labels", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx" + ), + // Project Estimates + route( + ":workspaceSlug/settings/projects/:projectId/estimates", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx" + ), + // Project Automations + layout("./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/layout.tsx", [ + route( + ":workspaceSlug/settings/projects/:projectId/automations", + "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx" + ), + ]), + ]), + ]), + ]), + ]), + // ====================================================================== + // STANDALONE ROUTES (outside workspace context) + // ====================================================================== + + // -------------------------------------------------------------------- + // PROFILE SETTINGS + // -------------------------------------------------------------------- + + layout("./(all)/settings/profile/layout.tsx", [ + route("settings/profile/:profileTabId", "./(all)/settings/profile/[profileTabId]/page.tsx"), + ]), + ]), + + // ======================================================================== + // REDIRECT ROUTES + // ======================================================================== + // Legacy URL redirects for backward compatibility + + // -------------------------------------------------------------------- + // REDIRECT ROUTES + // -------------------------------------------------------------------- + + // Project settings redirect: /:workspaceSlug/projects/:projectId/settings/:path* + // → /:workspaceSlug/settings/projects/:projectId/:path* + route(":workspaceSlug/projects/:projectId/settings/*", "routes/redirects/core/project-settings.tsx"), + + // Analytics redirect: /:workspaceSlug/analytics → /:workspaceSlug/analytics/overview + route(":workspaceSlug/analytics", "routes/redirects/core/analytics.tsx"), + + // API tokens redirect: /:workspaceSlug/settings/api-tokens + // → /settings/profile/api-tokens + route(":workspaceSlug/settings/api-tokens", "routes/redirects/core/api-tokens.tsx"), + + // Inbox redirect: /:workspaceSlug/projects/:projectId/inbox + // → /:workspaceSlug/projects/:projectId/intake + route(":workspaceSlug/projects/:projectId/inbox", "routes/redirects/core/inbox.tsx"), + + // Sign-up redirects + route("accounts/sign-up", "routes/redirects/core/accounts-signup.tsx"), + + // Sign-in redirects (all redirect to home page) + route("sign-in", "routes/redirects/core/sign-in.tsx"), + route("signin", "routes/redirects/core/signin.tsx"), + route("login", "routes/redirects/core/login.tsx"), + + // Register redirect + route("register", "routes/redirects/core/register.tsx"), + + // Profile settings redirects + route("profile/*", "routes/redirects/core/profile-settings.tsx"), + + // Account settings redirects + route(":workspaceSlug/settings/account/*", "routes/redirects/core/workspace-account-settings.tsx"), +] satisfies RouteConfig; diff --git a/apps/web/app/routes/extended.ts b/apps/web/app/routes/extended.ts new file mode 100644 index 0000000..452d214 --- /dev/null +++ b/apps/web/app/routes/extended.ts @@ -0,0 +1,9 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { RouteConfigEntry } from "@react-router/dev/routes"; + +export const extendedRoutes: RouteConfigEntry[] = []; diff --git a/apps/web/app/routes/helper.ts b/apps/web/app/routes/helper.ts new file mode 100644 index 0000000..74dcab5 --- /dev/null +++ b/apps/web/app/routes/helper.ts @@ -0,0 +1,76 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { RouteConfigEntry } from "@react-router/dev/routes"; + +/** + * Merges two route configurations intelligently. + * - Deep merges children when the same layout file exists in both arrays + * - Deduplicates routes by file property, preferring extended over core + * - Maintains order: core routes first, then extended routes at each level + */ +export function mergeRoutes(core: RouteConfigEntry[], extended: RouteConfigEntry[]): RouteConfigEntry[] { + // Step 1: Create a Map to track routes by file path + const routeMap = new Map(); + + // Step 2: Process core routes first + for (const coreRoute of core) { + const fileKey = coreRoute.file; + routeMap.set(fileKey, coreRoute); + } + + // Step 3: Process extended routes + for (const extendedRoute of extended) { + const fileKey = extendedRoute.file; + + if (routeMap.has(fileKey)) { + // Route exists in both - need to merge + const coreRoute = routeMap.get(fileKey)!; + + // Check if both have children (layouts that need deep merging) + if (coreRoute.children && extendedRoute.children) { + // Deep merge: recursively merge children + const mergedChildren = mergeRoutes( + Array.isArray(coreRoute.children) ? coreRoute.children : [], + Array.isArray(extendedRoute.children) ? extendedRoute.children : [] + ); + routeMap.set(fileKey, { + ...extendedRoute, + children: mergedChildren, + }); + } else { + // No children or only one has children - prefer extended + routeMap.set(fileKey, extendedRoute); + } + } else { + // Route only exists in extended + routeMap.set(fileKey, extendedRoute); + } + } + + // Step 4: Build final array maintaining order (core first, then extended-only) + const result: RouteConfigEntry[] = []; + + // Add all core routes (now merged or original) + for (const coreRoute of core) { + const fileKey = coreRoute.file; + if (routeMap.has(fileKey)) { + result.push(routeMap.get(fileKey)!); + routeMap.delete(fileKey); // Remove so we don't add it again + } + } + + // Add remaining extended-only routes + for (const extendedRoute of extended) { + const fileKey = extendedRoute.file; + if (routeMap.has(fileKey)) { + result.push(routeMap.get(fileKey)!); + routeMap.delete(fileKey); + } + } + + return result; +} diff --git a/apps/web/app/routes/redirects/core/accounts-signup.tsx b/apps/web/app/routes/redirects/core/accounts-signup.tsx new file mode 100644 index 0000000..be1ca73 --- /dev/null +++ b/apps/web/app/routes/redirects/core/accounts-signup.tsx @@ -0,0 +1,15 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; + +export const clientLoader = () => { + throw redirect("/sign-up/"); +}; + +export default function AccountsSignup() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/analytics.tsx b/apps/web/app/routes/redirects/core/analytics.tsx new file mode 100644 index 0000000..3cc7c81 --- /dev/null +++ b/apps/web/app/routes/redirects/core/analytics.tsx @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; +import type { Route } from "./+types/analytics"; + +export const clientLoader = ({ params }: Route.ClientLoaderArgs) => { + const { workspaceSlug } = params; + throw redirect(`/${workspaceSlug}/analytics/overview/`); +}; + +export default function Analytics() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/api-tokens.tsx b/apps/web/app/routes/redirects/core/api-tokens.tsx new file mode 100644 index 0000000..9d070a1 --- /dev/null +++ b/apps/web/app/routes/redirects/core/api-tokens.tsx @@ -0,0 +1,15 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; + +export const clientLoader = () => { + throw redirect(`/settings/profile/api-tokens/`); +}; + +export default function ApiTokens() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/inbox.tsx b/apps/web/app/routes/redirects/core/inbox.tsx new file mode 100644 index 0000000..2d71229 --- /dev/null +++ b/apps/web/app/routes/redirects/core/inbox.tsx @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; +import type { Route } from "./+types/inbox"; + +export const clientLoader = ({ params }: Route.ClientLoaderArgs) => { + const { workspaceSlug, projectId } = params; + throw redirect(`/${workspaceSlug}/projects/${projectId}/intake/`); +}; + +export default function Inbox() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/index.ts b/apps/web/app/routes/redirects/core/index.ts new file mode 100644 index 0000000..e1eaeca --- /dev/null +++ b/apps/web/app/routes/redirects/core/index.ts @@ -0,0 +1,44 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { route } from "@react-router/dev/routes"; +import type { RouteConfigEntry } from "@react-router/dev/routes"; + +export const coreRedirectRoutes: RouteConfigEntry[] = [ + // ======================================================================== + // WORKSPACE & PROJECT REDIRECTS + // ======================================================================== + + // Project settings redirect: /:workspaceSlug/projects/:projectId/settings/:path* + // → /:workspaceSlug/settings/projects/:projectId/:path* + route(":workspaceSlug/projects/:projectId/settings/*", "routes/redirects/core/project-settings.tsx"), + + // Analytics redirect: /:workspaceSlug/analytics → /:workspaceSlug/analytics/overview + route(":workspaceSlug/analytics", "routes/redirects/core/analytics.tsx"), + + // API tokens redirect: /:workspaceSlug/settings/api-tokens + // → /settings/profile/api-tokens + route(":workspaceSlug/settings/api-tokens", "routes/redirects/core/api-tokens.tsx"), + + // Inbox redirect: /:workspaceSlug/projects/:projectId/inbox + // → /:workspaceSlug/projects/:projectId/intake + route(":workspaceSlug/projects/:projectId/inbox", "routes/redirects/core/inbox.tsx"), + + // ======================================================================== + // AUTHENTICATION REDIRECTS + // ======================================================================== + + // Sign-up redirects + route("accounts/sign-up", "routes/redirects/core/accounts-signup.tsx"), + + // Sign-in redirects (all redirect to home page) + route("sign-in", "routes/redirects/core/sign-in.tsx"), + route("signin", "routes/redirects/core/signin.tsx"), + route("login", "routes/redirects/core/login.tsx"), + + // Register redirect + route("register", "routes/redirects/core/register.tsx"), +]; diff --git a/apps/web/app/routes/redirects/core/login.tsx b/apps/web/app/routes/redirects/core/login.tsx new file mode 100644 index 0000000..d591a33 --- /dev/null +++ b/apps/web/app/routes/redirects/core/login.tsx @@ -0,0 +1,15 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; + +export const clientLoader = () => { + throw redirect("/"); +}; + +export default function Login() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/profile-settings.tsx b/apps/web/app/routes/redirects/core/profile-settings.tsx new file mode 100644 index 0000000..82362df --- /dev/null +++ b/apps/web/app/routes/redirects/core/profile-settings.tsx @@ -0,0 +1,18 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; +import type { Route } from "./+types/profile-settings"; + +export const clientLoader = ({ params, request }: Route.ClientLoaderArgs) => { + const searchParams = new URL(request.url).searchParams; + const splat = params["*"] || ""; + throw redirect(`/settings/profile/${splat || "general"}?${searchParams.toString()}`); +}; + +export default function ProfileSettings() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/project-settings.tsx b/apps/web/app/routes/redirects/core/project-settings.tsx new file mode 100644 index 0000000..db74d57 --- /dev/null +++ b/apps/web/app/routes/redirects/core/project-settings.tsx @@ -0,0 +1,19 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; +import type { Route } from "./+types/project-settings"; + +export const clientLoader = ({ params }: Route.ClientLoaderArgs) => { + const { workspaceSlug, projectId } = params; + const splat = params["*"] || ""; + const destination = `/${workspaceSlug}/settings/projects/${projectId}${splat ? `/${splat}` : ""}/`; + throw redirect(destination); +}; + +export default function ProjectSettings() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/register.tsx b/apps/web/app/routes/redirects/core/register.tsx new file mode 100644 index 0000000..bdcb453 --- /dev/null +++ b/apps/web/app/routes/redirects/core/register.tsx @@ -0,0 +1,15 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; + +export const clientLoader = () => { + throw redirect("/sign-up/"); +}; + +export default function Register() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/sign-in.tsx b/apps/web/app/routes/redirects/core/sign-in.tsx new file mode 100644 index 0000000..5016e25 --- /dev/null +++ b/apps/web/app/routes/redirects/core/sign-in.tsx @@ -0,0 +1,15 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; + +export const clientLoader = () => { + throw redirect("/"); +}; + +export default function SignIn() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/signin.tsx b/apps/web/app/routes/redirects/core/signin.tsx new file mode 100644 index 0000000..f557230 --- /dev/null +++ b/apps/web/app/routes/redirects/core/signin.tsx @@ -0,0 +1,15 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; + +export const clientLoader = () => { + throw redirect("/"); +}; + +export default function Signin() { + return null; +} diff --git a/apps/web/app/routes/redirects/core/workspace-account-settings.tsx b/apps/web/app/routes/redirects/core/workspace-account-settings.tsx new file mode 100644 index 0000000..2e44a5b --- /dev/null +++ b/apps/web/app/routes/redirects/core/workspace-account-settings.tsx @@ -0,0 +1,18 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { redirect } from "react-router"; +import type { Route } from "./+types/workspace-account-settings"; + +export const clientLoader = ({ params, request }: Route.ClientLoaderArgs) => { + const searchParams = new URL(request.url).searchParams; + const splat = params["*"] || ""; + throw redirect(`/settings/profile/${splat || "general"}?${searchParams.toString()}`); +}; + +export default function WorkspaceAccountSettings() { + return null; +} diff --git a/apps/web/app/routes/redirects/extended/index.ts b/apps/web/app/routes/redirects/extended/index.ts new file mode 100644 index 0000000..7b4da92 --- /dev/null +++ b/apps/web/app/routes/redirects/extended/index.ts @@ -0,0 +1,9 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { RouteConfigEntry } from "@react-router/dev/routes"; + +export const extendedRedirectRoutes: RouteConfigEntry[] = []; diff --git a/apps/web/app/routes/redirects/index.ts b/apps/web/app/routes/redirects/index.ts new file mode 100644 index 0000000..b736b22 --- /dev/null +++ b/apps/web/app/routes/redirects/index.ts @@ -0,0 +1,16 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { RouteConfigEntry } from "@react-router/dev/routes"; +import { coreRedirectRoutes } from "./core"; +import { extendedRedirectRoutes } from "./extended"; + +/** + * REDIRECT ROUTES + * Centralized configuration for all route redirects + * Migrated from Next.js next.config.js redirects + */ +export const redirectRoutes: RouteConfigEntry[] = [...coreRedirectRoutes, ...extendedRedirectRoutes]; diff --git a/apps/web/app/types/next-link.d.ts b/apps/web/app/types/next-link.d.ts new file mode 100644 index 0000000..c724e3a --- /dev/null +++ b/apps/web/app/types/next-link.d.ts @@ -0,0 +1,12 @@ +declare module "next/link" { + type Props = React.ComponentProps<"a"> & { + href: string; + replace?: boolean; + prefetch?: boolean; + scroll?: boolean; + shallow?: boolean; + }; + + const Link: React.FC; + export default Link; +} diff --git a/apps/web/app/types/next-navigation.d.ts b/apps/web/app/types/next-navigation.d.ts new file mode 100644 index 0000000..67a80c4 --- /dev/null +++ b/apps/web/app/types/next-navigation.d.ts @@ -0,0 +1,14 @@ +declare module "next/navigation" { + export function useRouter(): { + push: (url: string) => void; + replace: (url: string) => void; + back: () => void; + forward: () => void; + refresh: () => void; + prefetch: (url: string) => Promise; + }; + + export function usePathname(): string; + export function useSearchParams(): URLSearchParams; + export function useParams>(): T; +} diff --git a/apps/web/app/types/next-script.d.ts b/apps/web/app/types/next-script.d.ts new file mode 100644 index 0000000..299b5ed --- /dev/null +++ b/apps/web/app/types/next-script.d.ts @@ -0,0 +1,15 @@ +declare module "next/script" { + type ScriptProps = { + src?: string; + id?: string; + strategy?: "beforeInteractive" | "afterInteractive" | "lazyOnload" | "worker"; + onLoad?: () => void; + onError?: () => void; + children?: string; + defer?: boolean; + [key: string]: any; + }; + + const Script: React.FC; + export default Script; +} diff --git a/apps/web/app/types/react-router-virtual.d.ts b/apps/web/app/types/react-router-virtual.d.ts new file mode 100644 index 0000000..abf3b63 --- /dev/null +++ b/apps/web/app/types/react-router-virtual.d.ts @@ -0,0 +1,5 @@ +declare module "virtual:react-router/server-build" { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const build: any; + export default build; +} diff --git a/apps/web/caddy/Caddyfile b/apps/web/caddy/Caddyfile new file mode 100644 index 0000000..fced343 --- /dev/null +++ b/apps/web/caddy/Caddyfile @@ -0,0 +1,37 @@ +{ + servers { + trusted_proxies static private_ranges + } + + order rate_limit before file_server +} + +:3000 { + root * /usr/share/caddy/html + + # Per-client-IP rate limiting for static asset requests + rate_limit { + zone static { + key {client_ip} + events 300 + window 1m + } + } + + # Security headers (HSTS is set at the TLS terminator) + header { + X-Frame-Options "DENY" + X-Content-Type-Options "nosniff" + X-XSS-Protection "1; mode=block" + } + + # SPA fallback + try_files {path} /index.html + file_server + + # Access logs to stdout (default in Caddy) + log { + output stdout + format console + } +} diff --git a/apps/web/core/components/account/auth-forms/auth-header.tsx b/apps/web/core/components/account/auth-forms/auth-header.tsx new file mode 100644 index 0000000..239d658 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/auth-header.tsx @@ -0,0 +1,124 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +import useSWR from "swr"; +import { useTranslation } from "@plane/i18n"; +import type { IWorkspaceMemberInvitation } from "@plane/types"; +// components +import { LogoSpinner } from "@/components/common/logo-spinner"; +import { WorkspaceLogo } from "@/components/workspace/logo"; +// helpers +import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper"; +// services +import { WorkspaceService } from "@/services/workspace.service"; + +type TAuthHeader = { + workspaceSlug: string | undefined; + invitationId: string | undefined; + invitationEmail: string | undefined; + authMode: EAuthModes; + currentAuthStep: EAuthSteps; +}; + +const Titles = { + [EAuthModes.SIGN_IN]: { + [EAuthSteps.EMAIL]: { + header: "Work in all dimensions.", + subHeader: "Welcome back to Plane.", + }, + [EAuthSteps.PASSWORD]: { + header: "Work in all dimensions.", + subHeader: "Welcome back to Plane.", + }, + [EAuthSteps.UNIQUE_CODE]: { + header: "Work in all dimensions.", + subHeader: "Welcome back to Plane.", + }, + }, + [EAuthModes.SIGN_UP]: { + [EAuthSteps.EMAIL]: { + header: "Work in all dimensions.", + subHeader: "Create your Plane account.", + }, + [EAuthSteps.PASSWORD]: { + header: "Work in all dimensions.", + subHeader: "Create your Plane account.", + }, + [EAuthSteps.UNIQUE_CODE]: { + header: "Work in all dimensions.", + subHeader: "Create your Plane account.", + }, + }, +}; + +const workSpaceService = new WorkspaceService(); + +export const AuthHeader = observer(function AuthHeader(props: TAuthHeader) { + const { workspaceSlug, invitationId, invitationEmail, authMode, currentAuthStep } = props; + // plane imports + const { t } = useTranslation(); + + const { data: invitation, isLoading } = useSWR( + workspaceSlug && invitationId ? `WORKSPACE_INVITATION_${workspaceSlug}_${invitationId}` : null, + async () => workspaceSlug && invitationId && workSpaceService.getWorkspaceInvitation(workspaceSlug, invitationId), + { + revalidateOnFocus: false, + shouldRetryOnError: false, + } + ); + + const getHeaderSubHeader = ( + step: EAuthSteps, + mode: EAuthModes, + invitation: IWorkspaceMemberInvitation | undefined, + email: string | undefined + ) => { + if (invitation && email && invitation.email === email && invitation.workspace) { + const workspace = invitation.workspace; + return { + header: ( +

+ {t("common.join")}{" "} + {" "} + {workspace.name} +

+ ), + subHeader: + mode == EAuthModes.SIGN_UP + ? "Create an account to start managing work with your team." + : "Log in to start managing work with your team.", + }; + } + + return Titles[mode][step]; + }; + + const { header, subHeader } = getHeaderSubHeader(currentAuthStep, authMode, invitation || undefined, invitationEmail); + + if (isLoading) + return ( +

+ +

+ ); + + return ; +}); + +type TAuthHeaderBase = { + header: React.ReactNode; + subHeader: string; +}; + +export function AuthHeaderBase(props: TAuthHeaderBase) { + return ( +

+ {props.header} + {props.subHeader} +

+ ); +} diff --git a/apps/web/core/components/account/auth-forms/auth-root.tsx b/apps/web/core/components/account/auth-forms/auth-root.tsx new file mode 100644 index 0000000..46ae2c4 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/auth-root.tsx @@ -0,0 +1,164 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useEffect, useState } from "react"; +import { observer } from "mobx-react"; +import { useSearchParams } from "next/navigation"; +// plane imports +import { Banner } from "@makeplane/propel/components/banner"; +import { OAuthOptions } from "@plane/ui"; +// helpers +import type { TAuthErrorInfo } from "@/helpers/authentication.helper"; +import { + EAuthModes, + EAuthSteps, + EAuthenticationErrorCodes, + EErrorAlertType, + authErrorHandler, +} from "@/helpers/authentication.helper"; +// hooks +import { useOAuthConfig } from "@/hooks/oauth"; +import { useInstance } from "@/hooks/store/use-instance"; +// local imports +import { TermsAndConditions } from "../terms-and-conditions"; +import { AuthHeader, AuthHeaderBase } from "./auth-header"; +import { AuthFormRoot } from "./form-root"; + +type TAuthRoot = { + authMode: EAuthModes; +}; + +export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) { + //router + const searchParams = useSearchParams(); + // query params + const emailParam = searchParams.get("email"); + const invitation_id = searchParams.get("invitation_id"); + const workspaceSlug = searchParams.get("slug"); + const error_code = searchParams.get("error_code"); + // props + const { authMode: currentAuthMode } = props; + // states + const [authMode, setAuthMode] = useState(undefined); + const [authStep, setAuthStep] = useState(EAuthSteps.EMAIL); + const [email, setEmail] = useState(emailParam ? emailParam.toString() : ""); + const [errorInfo, setErrorInfo] = useState(undefined); + // store hooks + const { config } = useInstance(); + // derived values + const oAuthActionText = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in"; + const { isOAuthEnabled, oAuthOptions } = useOAuthConfig(oAuthActionText); + const isEmailBasedAuthEnabled = config?.is_email_password_enabled || config?.is_magic_login_enabled; + const noAuthMethodsAvailable = !isOAuthEnabled && !isEmailBasedAuthEnabled; + + useEffect(() => { + if (!authMode && currentAuthMode) setAuthMode(currentAuthMode); + }, [currentAuthMode, authMode]); + + useEffect(() => { + if (error_code && authMode) { + const errorhandler = authErrorHandler(error_code?.toString() as EAuthenticationErrorCodes); + if (errorhandler) { + // password error handler + if ([EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_UP].includes(errorhandler.code)) { + setAuthMode(EAuthModes.SIGN_UP); + setAuthStep(EAuthSteps.PASSWORD); + } + if ([EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_IN].includes(errorhandler.code)) { + setAuthMode(EAuthModes.SIGN_IN); + setAuthStep(EAuthSteps.PASSWORD); + } + // magic_code error handler + if ( + [ + EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_UP, + EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP, + EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_UP, + EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP, + ].includes(errorhandler.code) + ) { + setAuthMode(EAuthModes.SIGN_UP); + setAuthStep(EAuthSteps.UNIQUE_CODE); + } + if ( + [ + EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_IN, + EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN, + EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_IN, + EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN, + ].includes(errorhandler.code) + ) { + setAuthMode(EAuthModes.SIGN_IN); + setAuthStep(EAuthSteps.UNIQUE_CODE); + } + + setErrorInfo(errorhandler); + } + } + }, [error_code, authMode]); + + if (!authMode) return <>; + + if (noAuthMethodsAvailable) { + return ( + + + + ); + } + + return ( + + {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && ( + setErrorInfo(undefined)} + /> + )} + + {isOAuthEnabled && ( + + )} + {isEmailBasedAuthEnabled && ( + setEmail(email)} + setAuthMode={(authMode) => setAuthMode(authMode)} + setAuthStep={(authStep) => setAuthStep(authStep)} + setErrorInfo={(errorInfo) => setErrorInfo(errorInfo)} + currentAuthMode={currentAuthMode} + /> + )} + + + ); +}); + +function AuthContainer({ children }: { children: React.ReactNode }) { + return ( +

{children}

+ ); +} diff --git a/apps/web/core/components/account/auth-forms/common/container.tsx b/apps/web/core/components/account/auth-forms/common/container.tsx new file mode 100644 index 0000000..ecf13f9 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/common/container.tsx @@ -0,0 +1,13 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +export function FormContainer({ children }: { children: React.ReactNode }) { + return ( +

{children}

+ ); +} diff --git a/apps/web/core/components/account/auth-forms/common/header.tsx b/apps/web/core/components/account/auth-forms/common/header.tsx new file mode 100644 index 0000000..4639634 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/common/header.tsx @@ -0,0 +1,14 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +export function AuthFormHeader({ title, description }: { title: string; description: string }) { + return ( +

+ {title} + {description} +

+ ); +} diff --git a/apps/web/core/components/account/auth-forms/email.tsx b/apps/web/core/components/account/auth-forms/email.tsx new file mode 100644 index 0000000..0fb17c2 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/email.tsx @@ -0,0 +1,109 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { FormEvent } from "react"; +import { useMemo, useRef, useState } from "react"; +import { observer } from "mobx-react"; +// icons +import { CloseCircleOutline, WarningCircleOutline } from "@makeplane/propel/icons"; +// plane imports +import { Field } from "@makeplane/propel/components/field"; +import { Input, InputGroup } from "@makeplane/propel/components/input"; +import { useTranslation } from "@plane/i18n"; +import { Button } from "@plane/propel/button"; +import type { IEmailCheckData } from "@plane/types"; +import { Spinner } from "@plane/ui"; +import { checkEmailValidity } from "@plane/utils"; +// helpers +type TAuthEmailForm = { + defaultEmail: string; + onSubmit: (data: IEmailCheckData) => Promise; +}; + +export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailForm) { + const { onSubmit, defaultEmail } = props; + // states + const [isSubmitting, setIsSubmitting] = useState(false); + const [email, setEmail] = useState(defaultEmail); + // plane hooks + const { t } = useTranslation(); + const emailError = useMemo( + () => (email && !checkEmailValidity(email) ? { email: "auth.common.email.errors.invalid" } : undefined), + [email] + ); + + const handleFormSubmit = async (event: FormEvent) => { + event.preventDefault(); + setIsSubmitting(true); + const payload: IEmailCheckData = { + email: email, + }; + await onSubmit(payload); + setIsSubmitting(false); + }; + + const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting; + + const [isFocused, setIsFocused] = useState(true); + const inputRef = useRef(null); + + return ( +

+ + {t("auth.common.email.label")} + + + { + setIsFocused(true); + }} + onBlur={() => { + setIsFocused(false); + }} + > + setEmail(e.target.value)} + placeholder={t("auth.common.email.placeholder")} + autoComplete="off" + autoFocus + ref={inputRef} + /> + {email.length > 0 && ( + + )} + + + {emailError?.email && !isFocused && ( +

+ + {t(emailError.email)} +

+ )} +

+ +

+ ); +}); diff --git a/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx new file mode 100644 index 0000000..865e034 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx @@ -0,0 +1,67 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Fragment, useState } from "react"; +import { usePopper } from "react-popper"; +import { Popover } from "@headlessui/react"; +// plane imports +import { useTranslation } from "@plane/i18n"; +import { CloseOutline } from "@makeplane/propel/icons"; + +export function ForgotPasswordPopover() { + // popper-js refs + const [referenceElement, setReferenceElement] = useState(null); + const [popperElement, setPopperElement] = useState(null); + // popper-js init + const { styles, attributes } = usePopper(referenceElement, popperElement, { + placement: "right-start", + modifiers: [ + { + name: "preventOverflow", + options: { + padding: 12, + }, + }, + ], + }); + // plane hooks + const { t } = useTranslation(); + + return ( + + + + + + {({ close }) => ( +

+ 🤥 +

{t("auth.forgot_password.errors.smtp_not_enabled")}

+ +

+ )} + + + ); +} diff --git a/apps/web/core/components/account/auth-forms/forgot-password.tsx b/apps/web/core/components/account/auth-forms/forgot-password.tsx new file mode 100644 index 0000000..71ad471 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/forgot-password.tsx @@ -0,0 +1,142 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +import Link from "next/link"; +import { useSearchParams } from "next/navigation"; +import { Controller, useForm } from "react-hook-form"; +// icons +import { TickCircleOutline } from "@makeplane/propel/icons"; +// plane imports +import { Field } from "@makeplane/propel/components/field"; +import { Input, InputGroup } from "@makeplane/propel/components/input"; +import { useTranslation } from "@plane/i18n"; +import { Button, getButtonStyling } from "@plane/propel/button"; +import { TOAST_TYPE, setToast } from "@plane/propel/toast"; + +import { cn, checkEmailValidity } from "@plane/utils"; +// hooks +import useTimer from "@/hooks/use-timer"; +// services +import { AuthService } from "@/services/auth.service"; +// local components +import { FormContainer } from "./common/container"; +import { AuthFormHeader } from "./common/header"; + +type TForgotPasswordFormValues = { + email: string; +}; + +const defaultValues: TForgotPasswordFormValues = { + email: "", +}; + +// services +const authService = new AuthService(); + +export const ForgotPasswordForm = observer(function ForgotPasswordForm() { + // search params + const searchParams = useSearchParams(); + const email = searchParams.get("email"); + // plane hooks + const { t } = useTranslation(); + // timer + const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0); + + // form info + const { + control, + formState: { errors, isSubmitting, isValid }, + handleSubmit, + } = useForm({ + defaultValues: { + ...defaultValues, + email: email?.toString() ?? "", + }, + }); + + const handleForgotPassword = async (formData: TForgotPasswordFormValues) => { + await authService + .sendResetPasswordLink({ + email: formData.email, + }) + .then(() => { + setToast({ + type: TOAST_TYPE.SUCCESS, + title: t("auth.forgot_password.toast.success.title"), + message: t("auth.forgot_password.toast.success.message"), + }); + setResendCodeTimer(30); + }) + .catch((err) => { + setToast({ + type: TOAST_TYPE.ERROR, + title: t("auth.forgot_password.toast.error.title"), + message: err?.error ?? t("auth.forgot_password.toast.error.message"), + }); + }); + }; + + return ( + + +

+ + {t("auth.common.email.label")} + + checkEmailValidity(value) || t("auth.common.email.errors.invalid"), + }} + render={({ field: { value, onChange, ref } }) => ( + + + 0} + /> + + + )} + /> + {resendTimerCode > 0 && ( +

+ + {t("auth.forgot_password.email_sent")} +

+ )} +

+ + + {t("auth.common.back_to_sign_in")} + +

+ + ); +}); diff --git a/apps/web/core/components/account/auth-forms/form-root.tsx b/apps/web/core/components/account/auth-forms/form-root.tsx new file mode 100644 index 0000000..ab3aa83 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/form-root.tsx @@ -0,0 +1,138 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React, { useState } from "react"; +import { observer } from "mobx-react"; +import { useSearchParams } from "next/navigation"; +import { EAuthModes, EAuthSteps } from "@plane/constants"; +import type { IEmailCheckData } from "@plane/types"; +// helpers +import type { TAuthErrorInfo } from "@/helpers/authentication.helper"; +import { authErrorHandler } from "@/helpers/authentication.helper"; +// hooks +import { useInstance } from "@/hooks/store/use-instance"; +import { useAppRouter } from "@/hooks/use-app-router"; +// services +import { AuthService } from "@/services/auth.service"; +// local components +import { AuthEmailForm } from "./email"; +import { AuthPasswordForm } from "./password"; +import { AuthUniqueCodeForm } from "./unique-code"; + +type TAuthFormRoot = { + authStep: EAuthSteps; + authMode: EAuthModes; + email: string; + setEmail: (email: string) => void; + setAuthMode: (authMode: EAuthModes) => void; + setAuthStep: (authStep: EAuthSteps) => void; + setErrorInfo: (errorInfo: TAuthErrorInfo | undefined) => void; + currentAuthMode: EAuthModes; +}; + +const authService = new AuthService(); + +export const AuthFormRoot = observer(function AuthFormRoot(props: TAuthFormRoot) { + const { authStep, authMode, email, setEmail, setAuthMode, setAuthStep, setErrorInfo, currentAuthMode } = props; + // router + const router = useAppRouter(); + // query params + const searchParams = useSearchParams(); + const nextPath = searchParams.get("next_path"); + // states + const [isExistingEmail, setIsExistingEmail] = useState(false); + // hooks + const { config } = useInstance(); + + const isSMTPConfigured = config?.is_smtp_configured || false; + + // submit handler- email verification + const handleEmailVerification = async (data: IEmailCheckData) => { + setEmail(data.email); + setErrorInfo(undefined); + await authService + .emailCheck(data) + .then(async (response) => { + if (response.existing) { + if (currentAuthMode === EAuthModes.SIGN_UP) setAuthMode(EAuthModes.SIGN_IN); + if (response.status === "MAGIC_CODE") { + setAuthStep(EAuthSteps.UNIQUE_CODE); + generateEmailUniqueCode(data.email); + } else if (response.status === "CREDENTIAL") { + setAuthStep(EAuthSteps.PASSWORD); + } + } else { + if (currentAuthMode === EAuthModes.SIGN_IN) setAuthMode(EAuthModes.SIGN_UP); + if (response.status === "MAGIC_CODE") { + setAuthStep(EAuthSteps.UNIQUE_CODE); + generateEmailUniqueCode(data.email); + } else if (response.status === "CREDENTIAL") { + setAuthStep(EAuthSteps.PASSWORD); + } + } + setIsExistingEmail(response.existing); + }) + .catch((error) => { + const errorhandler = authErrorHandler(error?.error_code?.toString(), data?.email || undefined); + if (errorhandler?.type) setErrorInfo(errorhandler); + }); + }; + + const handleEmailClear = () => { + setAuthMode(currentAuthMode); + setErrorInfo(undefined); + setEmail(""); + setAuthStep(EAuthSteps.EMAIL); + router.push(currentAuthMode === EAuthModes.SIGN_IN ? `/` : "/sign-up"); + }; + + // generating the unique code + const generateEmailUniqueCode = async (email: string): Promise<{ code: string } | undefined> => { + if (!isSMTPConfigured) return; + const payload = { email: email }; + return await authService + .generateUniqueCode(payload) + .then(() => ({ code: "" })) + .catch((error) => { + const errorhandler = authErrorHandler(error?.error_code?.toString()); + if (errorhandler?.type) setErrorInfo(errorhandler); + throw error; + }); + }; + + if (authStep === EAuthSteps.EMAIL) { + return ; + } + if (authStep === EAuthSteps.UNIQUE_CODE) { + return ( + + ); + } + if (authStep === EAuthSteps.PASSWORD) { + return ( + { + if (step === EAuthSteps.UNIQUE_CODE) generateEmailUniqueCode(email); + setAuthStep(step); + }} + nextPath={nextPath || undefined} + /> + ); + } + + return <>; +}); diff --git a/apps/web/core/components/account/auth-forms/index.ts b/apps/web/core/components/account/auth-forms/index.ts new file mode 100644 index 0000000..125f669 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/index.ts @@ -0,0 +1,7 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +export * from "./auth-root"; diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx new file mode 100644 index 0000000..9b8684c --- /dev/null +++ b/apps/web/core/components/account/auth-forms/password.tsx @@ -0,0 +1,304 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useEffect, useMemo, useRef, useState } from "react"; +import { observer } from "mobx-react"; +import Link from "next/link"; +// icons +import { CloseCircleOutline, HideOutline, ShowOutline } from "@makeplane/propel/icons"; +// plane imports +import { Banner } from "@makeplane/propel/components/banner"; +import { Input, InputGroup } from "@makeplane/propel/components/input"; +import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +import { Button } from "@plane/propel/button"; +import { PasswordStrengthIndicator, Spinner } from "@plane/ui"; +import { getPasswordStrength } from "@plane/utils"; +// components +import { ForgotPasswordPopover } from "@/components/account/auth-forms/forgot-password-popover"; +// constants +// helpers +import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper"; +// services +import { AuthService } from "@/services/auth.service"; + +type Props = { + email: string; + isSMTPConfigured: boolean; + mode: EAuthModes; + handleEmailClear: () => void; + handleAuthStep: (step: EAuthSteps) => void; + nextPath: string | undefined; +}; + +type TPasswordFormValues = { + email: string; + password: string; + confirm_password?: string; +}; + +const defaultValues: TPasswordFormValues = { + email: "", + password: "", +}; + +const authService = new AuthService(); + +export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props) { + const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode, nextPath } = props; + // plane imports + const { t } = useTranslation(); + // ref + const formRef = useRef(null); + // states + const [csrfPromise, setCsrfPromise] = useState | undefined>(undefined); + const [passwordFormData, setPasswordFormData] = useState({ ...defaultValues, email }); + const [showPassword, setShowPassword] = useState({ + password: false, + retypePassword: false, + }); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false); + const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false); + const [isBannerMessage, setBannerMessage] = useState(false); + + const handleShowPassword = (key: keyof typeof showPassword) => + setShowPassword((prev) => ({ ...prev, [key]: !prev[key] })); + + const handleFormChange = (key: keyof TPasswordFormValues, value: string) => + setPasswordFormData((prev) => ({ ...prev, [key]: value })); + + useEffect(() => { + if (csrfPromise === undefined) { + const promise = authService.requestCSRFToken(); + setCsrfPromise(promise); + } + }, [csrfPromise]); + + const redirectToUniqueCodeSignIn = async () => { + handleAuthStep(EAuthSteps.UNIQUE_CODE); + }; + + const passwordSupport = + mode === EAuthModes.SIGN_IN ? ( +

+ {isSMTPConfigured ? ( + + {t("auth.common.forgot_password")} + + ) : ( + + )} +

+ ) : ( + passwordFormData.password.length > 0 && + getPasswordStrength(passwordFormData.password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && ( + + ) + ); + + const isButtonDisabled = useMemo( + () => + !isSubmitting && + !!passwordFormData.password && + (mode === EAuthModes.SIGN_UP ? passwordFormData.password === passwordFormData.confirm_password : true) + ? false + : true, + [isSubmitting, mode, passwordFormData.confirm_password, passwordFormData.password] + ); + + const password = passwordFormData?.password ?? ""; + const confirmPassword = passwordFormData?.confirm_password ?? ""; + const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length; + + const handleCSRFToken = async () => { + if (!formRef || !formRef.current) return; + const token = await csrfPromise; + if (!token?.csrf_token) return; + const csrfElement = formRef.current.querySelector("input[name=csrfmiddlewaretoken]"); + csrfElement?.setAttribute("value", token?.csrf_token); + }; + + return ( + <> + {isBannerMessage && mode === EAuthModes.SIGN_UP && ( + setBannerMessage(false)} + /> + )} +

{ + event.preventDefault(); // Prevent form from submitting by default + await handleCSRFToken(); + const isPasswordValid = + mode === EAuthModes.SIGN_UP + ? getPasswordStrength(passwordFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID + : true; + if (isPasswordValid) { + setIsSubmitting(true); + if (formRef.current) formRef.current.submit(); // Manually submit the form if the condition is met + } else { + setBannerMessage(true); + } + }} + onError={() => { + setIsSubmitting(false); + }} + > + + + {nextPath && } +

+ + {t("auth.common.email.label")} + + + handleFormChange("email", e.target.value)} + placeholder={t("auth.common.email.placeholder")} + disabled + /> + {passwordFormData.email.length > 0 && ( + + )} + +

+ +

+ + {mode === EAuthModes.SIGN_IN ? t("auth.common.password.label") : t("auth.common.password.set_password")} + + + handleFormChange("password", e.target.value)} + placeholder={t("auth.common.password.placeholder")} + onFocus={() => setIsPasswordInputFocused(true)} + onBlur={() => setIsPasswordInputFocused(false)} + autoComplete="off" + autoFocus + /> + + + {passwordSupport} +

+ + {mode === EAuthModes.SIGN_UP && ( +

+ + {t("auth.common.password.confirm_password.label")} + + + handleFormChange("confirm_password", e.target.value)} + placeholder={t("auth.common.password.confirm_password.placeholder")} + onFocus={() => setIsRetryPasswordInputFocused(true)} + onBlur={() => setIsRetryPasswordInputFocused(false)} + autoComplete="off" + /> + + + {!!passwordFormData.confirm_password && + passwordFormData.password !== passwordFormData.confirm_password && + renderPasswordMatchError && ( + {t("auth.common.password.errors.match")} + )} +

+ )} + +

+ {mode === EAuthModes.SIGN_IN ? ( + <> + + {isSMTPConfigured && ( + + )} + + ) : ( + + )} +

+ + ); +}); diff --git a/apps/web/core/components/account/auth-forms/reset-password.tsx b/apps/web/core/components/account/auth-forms/reset-password.tsx new file mode 100644 index 0000000..a11b05b --- /dev/null +++ b/apps/web/core/components/account/auth-forms/reset-password.tsx @@ -0,0 +1,211 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useEffect, useMemo, useState } from "react"; +import { observer } from "mobx-react"; +import { useSearchParams } from "next/navigation"; +// icons +import { HideOutline, ShowOutline } from "@makeplane/propel/icons"; +// ui +import { Banner } from "@makeplane/propel/components/banner"; +import { Input, InputGroup } from "@makeplane/propel/components/input"; +import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +import { Button } from "@plane/propel/button"; +import { PasswordStrengthIndicator } from "@plane/ui"; +// components +import { getPasswordStrength } from "@plane/utils"; +// helpers +import type { EAuthenticationErrorCodes, TAuthErrorInfo } from "@/helpers/authentication.helper"; +import { EErrorAlertType, authErrorHandler } from "@/helpers/authentication.helper"; +// services +import { AuthService } from "@/services/auth.service"; +// local imports +import { FormContainer } from "./common/container"; +import { AuthFormHeader } from "./common/header"; + +type TResetPasswordFormValues = { + email: string; + password: string; + confirm_password?: string; +}; + +const defaultValues: TResetPasswordFormValues = { + email: "", + password: "", +}; + +// services +const authService = new AuthService(); + +export const ResetPasswordForm = observer(function ResetPasswordForm() { + // search params + const searchParams = useSearchParams(); + const uidb64 = searchParams.get("uidb64"); + const token = searchParams.get("token"); + const email = searchParams.get("email"); + const error_code = searchParams.get("error_code"); + // states + const [showPassword, setShowPassword] = useState({ + password: false, + retypePassword: false, + }); + const [resetFormData, setResetFormData] = useState({ + ...defaultValues, + email: email ? email.toString() : "", + }); + const [csrfToken, setCsrfToken] = useState(undefined); + const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false); + const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false); + const [errorInfo, setErrorInfo] = useState(undefined); + // plane hooks + const { t } = useTranslation(); + + const handleShowPassword = (key: keyof typeof showPassword) => + setShowPassword((prev) => ({ ...prev, [key]: !prev[key] })); + + const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) => + setResetFormData((prev) => ({ ...prev, [key]: value })); + + useEffect(() => { + if (csrfToken === undefined) + authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token)); + }, [csrfToken]); + + const isButtonDisabled = useMemo( + () => + !!resetFormData.password && + getPasswordStrength(resetFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID && + resetFormData.password === resetFormData.confirm_password + ? false + : true, + [resetFormData] + ); + + useEffect(() => { + if (error_code) { + const errorhandler = authErrorHandler(error_code?.toString() as EAuthenticationErrorCodes); + if (errorhandler) { + setErrorInfo(errorhandler); + } + } + }, [error_code]); + + const password = resetFormData?.password ?? ""; + const confirmPassword = resetFormData?.confirm_password ?? ""; + const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length; + + return ( + + + + {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && ( + setErrorInfo(undefined)} + /> + )} +

+ +

+ + {t("auth.common.email.label")} + + + + +

+ + {t("auth.common.password.label")} + + + handleFormChange("password", e.target.value)} + placeholder={t("auth.common.password.placeholder")} + minLength={8} + onFocus={() => setIsPasswordInputFocused(true)} + onBlur={() => setIsPasswordInputFocused(false)} + autoComplete="new-password" + autoFocus + /> + + + +

+ + {t("auth.common.password.confirm_password.label")} + + + handleFormChange("confirm_password", e.target.value)} + placeholder={t("auth.common.password.confirm_password.placeholder")} + onFocus={() => setIsRetryPasswordInputFocused(true)} + onBlur={() => setIsRetryPasswordInputFocused(false)} + autoComplete="new-password" + /> + + + {!!resetFormData.confirm_password && + resetFormData.password !== resetFormData.confirm_password && + renderPasswordMatchError && ( + {t("auth.common.password.errors.match")} + )} +

+ +

+ + ); +}); diff --git a/apps/web/core/components/account/auth-forms/set-password.tsx b/apps/web/core/components/account/auth-forms/set-password.tsx new file mode 100644 index 0000000..044d9b0 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/set-password.tsx @@ -0,0 +1,208 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { FormEvent } from "react"; +import { useEffect, useMemo, useState } from "react"; +import { observer } from "mobx-react"; +import { useSearchParams } from "next/navigation"; +// icons +import { HideOutline, ShowOutline } from "@makeplane/propel/icons"; +// plane imports +import { Input, InputGroup } from "@makeplane/propel/components/input"; +import { E_PASSWORD_STRENGTH } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +import { Button } from "@plane/propel/button"; +import { TOAST_TYPE, setToast } from "@plane/propel/toast"; +import { PasswordStrengthIndicator } from "@plane/ui"; +// components +import { getPasswordStrength } from "@plane/utils"; +// hooks +import { useUser } from "@/hooks/store/user"; +import { useAppRouter } from "@/hooks/use-app-router"; +// services +import { AuthService } from "@/services/auth.service"; +// local components +import { FormContainer } from "./common/container"; +import { AuthFormHeader } from "./common/header"; + +type TResetPasswordFormValues = { + email: string; + password: string; + confirm_password?: string; +}; + +const defaultValues: TResetPasswordFormValues = { + email: "", + password: "", +}; + +// services +const authService = new AuthService(); + +export const SetPasswordForm = observer(function SetPasswordForm() { + // router + const router = useAppRouter(); + // search params + const searchParams = useSearchParams(); + const email = searchParams.get("email"); + // states + const [showPassword, setShowPassword] = useState({ + password: false, + retypePassword: false, + }); + const [passwordFormData, setPasswordFormData] = useState({ + ...defaultValues, + email: email ? email.toString() : "", + }); + const [csrfToken, setCsrfToken] = useState(undefined); + const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false); + const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false); + // plane hooks + const { t } = useTranslation(); + // hooks + const { data: user, handleSetPassword } = useUser(); + + useEffect(() => { + if (csrfToken === undefined) + authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token)); + }, [csrfToken]); + + const handleShowPassword = (key: keyof typeof showPassword) => + setShowPassword((prev) => ({ ...prev, [key]: !prev[key] })); + + const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) => + setPasswordFormData((prev) => ({ ...prev, [key]: value })); + + const isButtonDisabled = useMemo( + () => + !!passwordFormData.password && + getPasswordStrength(passwordFormData.password) === E_PASSWORD_STRENGTH.STRENGTH_VALID && + passwordFormData.password === passwordFormData.confirm_password + ? false + : true, + [passwordFormData] + ); + + const handleSubmit = async (e: FormEvent) => { + try { + e.preventDefault(); + if (!csrfToken) throw new Error("csrf token not found"); + await handleSetPassword(csrfToken, { password: passwordFormData.password }); + router.push("/"); + } catch (error: unknown) { + let message = undefined; + if (error instanceof Error) { + const err = error as Error & { error?: string }; + message = err.error; + } + setToast({ + type: TOAST_TYPE.ERROR, + title: t("common.errors.default.title"), + message: message ?? t("common.errors.default.message"), + }); + } + }; + + const password = passwordFormData?.password ?? ""; + const confirmPassword = passwordFormData?.confirm_password ?? ""; + const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length; + + return ( + + +

handleSubmit(e)}> +

+ + {t("auth.common.email.label")} + + + + +

+ + {t("auth.common.password.confirm_password.label")} + + + handleFormChange("confirm_password", e.target.value)} + placeholder={t("auth.common.password.confirm_password.placeholder")} + onFocus={() => setIsRetryPasswordInputFocused(true)} + onBlur={() => setIsRetryPasswordInputFocused(false)} + autoComplete="new-password" + /> + + + {!!passwordFormData.confirm_password && + passwordFormData.password !== passwordFormData.confirm_password && + renderPasswordMatchError && ( + {t("auth.common.password.errors.match")} + )} +

+ +

+ + ); +}); diff --git a/apps/web/core/components/account/auth-forms/unique-code.tsx b/apps/web/core/components/account/auth-forms/unique-code.tsx new file mode 100644 index 0000000..d3a4569 --- /dev/null +++ b/apps/web/core/components/account/auth-forms/unique-code.tsx @@ -0,0 +1,180 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useEffect, useState } from "react"; +import { CloseCircleOutline, TickCircleOutline } from "@makeplane/propel/icons"; +import { Input, InputGroup } from "@makeplane/propel/components/input"; +import { API_BASE_URL } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +import { Button } from "@plane/propel/button"; +import { Spinner } from "@plane/ui"; +// constants +// helpers +import { EAuthModes } from "@/helpers/authentication.helper"; +// hooks +import useTimer from "@/hooks/use-timer"; +// services +import { AuthService } from "@/services/auth.service"; + +// services +const authService = new AuthService(); + +type TAuthUniqueCodeForm = { + mode: EAuthModes; + email: string; + isExistingEmail: boolean; + handleEmailClear: () => void; + generateEmailUniqueCode: (email: string) => Promise<{ code: string } | undefined>; + nextPath: string | undefined; +}; + +type TUniqueCodeFormValues = { + email: string; + code: string; +}; + +const defaultValues: TUniqueCodeFormValues = { + email: "", + code: "", +}; + +export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) { + const { mode, email, handleEmailClear, generateEmailUniqueCode, nextPath } = props; + // derived values + const defaultResetTimerValue = 5; + // states + const [uniqueCodeFormData, setUniqueCodeFormData] = useState({ ...defaultValues, email }); + const [isRequestingNewCode, setIsRequestingNewCode] = useState(false); + const [csrfToken, setCsrfToken] = useState(undefined); + const [isSubmitting, setIsSubmitting] = useState(false); + // timer + const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0); + // plane hooks + const { t } = useTranslation(); + + const handleFormChange = (key: keyof TUniqueCodeFormValues, value: string) => + setUniqueCodeFormData((prev) => ({ ...prev, [key]: value })); + + const generateNewCode = async (email: string) => { + try { + setIsRequestingNewCode(true); + const uniqueCode = await generateEmailUniqueCode(email); + setResendCodeTimer(defaultResetTimerValue); + handleFormChange("code", uniqueCode?.code || ""); + setIsRequestingNewCode(false); + } catch { + setResendCodeTimer(0); + console.error("Error while requesting new code"); + setIsRequestingNewCode(false); + } + }; + + useEffect(() => { + if (csrfToken === undefined) + authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token)); + }, [csrfToken]); + + const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0; + const isButtonDisabled = isRequestingNewCode || !uniqueCodeFormData.code || isSubmitting; + + return ( +

{ + setIsSubmitting(true); + }} + onError={() => { + setIsSubmitting(false); + }} + > + + + {nextPath && } +

+ + {t("auth.common.email.label")} + + + handleFormChange("email", e.target.value)} + placeholder={t("auth.common.email.placeholder")} + autoComplete="off" + disabled + /> + {uniqueCodeFormData.email.length > 0 && ( + + )} + +

+ +

+ + {t("auth.common.unique_code.label")} + + + handleFormChange("code", e.target.value)} + placeholder={t("auth.common.unique_code.placeholder")} + autoComplete="off" + autoFocus + /> + +

+ + {t("auth.common.unique_code.paste_code")} +

+ +

+ ); +} diff --git a/apps/web/core/components/account/deactivate-account-modal.tsx b/apps/web/core/components/account/deactivate-account-modal.tsx new file mode 100644 index 0000000..ed18aba --- /dev/null +++ b/apps/web/core/components/account/deactivate-account-modal.tsx @@ -0,0 +1,93 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useState } from "react"; +import { useTranslation } from "@plane/i18n"; +// ui +import { Button } from "@plane/propel/button"; +import { DeleteOutline } from "@makeplane/propel/icons"; +import { TOAST_TYPE, setToast } from "@plane/propel/toast"; +import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui"; +// hooks +import { useUser } from "@/hooks/store/user"; +import { useAppRouter } from "@/hooks/use-app-router"; + +type Props = { + isOpen: boolean; + onClose: () => void; +}; + +export function DeactivateAccountModal(props: Props) { + const router = useAppRouter(); + const { isOpen, onClose } = props; + // hooks + const { t } = useTranslation(); + const { deactivateAccount, signOut } = useUser(); + + // states + const [isDeactivating, setIsDeactivating] = useState(false); + + const handleClose = () => { + setIsDeactivating(false); + onClose(); + }; + + const handleDeleteAccount = async () => { + setIsDeactivating(true); + + await deactivateAccount() + .then(() => { + setToast({ + type: TOAST_TYPE.SUCCESS, + title: "Success!", + message: "Account deactivated successfully.", + }); + signOut(); + router.push("/"); + handleClose(); + return; + }) + .catch((err: any) => { + setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: err?.error, + }); + }) + .finally(() => setIsDeactivating(false)); + }; + + return ( + +

{t("deactivate_your_account")}

+ {t("deactivate_your_account_description")} +

+ + +

+ + ); +} diff --git a/apps/web/core/components/account/terms-and-conditions.tsx b/apps/web/core/components/account/terms-and-conditions.tsx new file mode 100644 index 0000000..f6be596 --- /dev/null +++ b/apps/web/core/components/account/terms-and-conditions.tsx @@ -0,0 +1,45 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React from "react"; +import Link from "next/link"; +import { EAuthModes } from "@plane/constants"; + +interface TermsAndConditionsProps { + authType?: EAuthModes; +} + +// Constants for better maintainability +const LEGAL_LINKS = { + termsOfService: "https://plane.so/legals/terms-and-conditions", + privacyPolicy: "https://plane.so/legals/privacy-policy", +} as const; + +const MESSAGES = { + [EAuthModes.SIGN_UP]: "By creating an account", + [EAuthModes.SIGN_IN]: "By signing in", +} as const; + +// Reusable link component to reduce duplication +function LegalLink({ href, children }: { href: string; children: React.ReactNode }) { + return ( + + {children} + + ); +} + +export function TermsAndConditions({ authType = EAuthModes.SIGN_IN }: TermsAndConditionsProps) { + return ( +

+ {`${MESSAGES[authType]}, you understand and agree to \n our `} + Terms of Service and{" "} + Privacy Policy. +

+ ); +} diff --git a/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx b/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx new file mode 100644 index 0000000..6977d89 --- /dev/null +++ b/apps/web/core/components/active-cycles/workspace-active-cycles-upgrade.tsx @@ -0,0 +1,134 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +import { CircleDashed, Microscope } from "lucide-react"; +import { AlertOctagonOutline, BarOutline, FolderOutline, SearchOutline } from "@makeplane/propel/icons"; +// plane imports +import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +import { getButtonStyling } from "@plane/propel/button"; +import { ContentWrapper } from "@plane/ui"; +import { cn } from "@plane/utils"; +// assets +import ctaL1Dark from "@/app/assets/workspace-active-cycles/cta-l-1-dark.webp?url"; +import ctaL1Light from "@/app/assets/workspace-active-cycles/cta-l-1-light.webp?url"; +import ctaR1Dark from "@/app/assets/workspace-active-cycles/cta-r-1-dark.webp?url"; +import ctaR1Light from "@/app/assets/workspace-active-cycles/cta-r-1-light.webp?url"; +import ctaR2Dark from "@/app/assets/workspace-active-cycles/cta-r-2-dark.webp?url"; +import ctaR2Light from "@/app/assets/workspace-active-cycles/cta-r-2-light.webp?url"; +// components +import { ProIcon } from "@/components/common/pro-icon"; +// hooks +import { useUser } from "@/hooks/store/user"; + +export const WORKSPACE_ACTIVE_CYCLES_DETAILS = [ + { + key: "10000_feet_view", + title: "10,000-feet view of all active cycles.", + description: + "Zoom out to see running cycles across all your projects at once instead of going from Cycle to Cycle in each project.", + icon: FolderOutline, + }, + { + key: "get_snapshot_of_each_active_cycle", + title: "Get a snapshot of each active cycle.", + description: + "Track high-level metrics for all active cycles, see their state of progress, and get a sense of scope against deadlines.", + icon: CircleDashed, + }, + { + key: "compare_burndowns", + title: "Compare burndowns.", + description: "Monitor how each of your teams are performing with a peek into each cycle’s burndown report.", + icon: BarOutline, + }, + { + key: "quickly_see_make_or_break_issues", + title: "Quickly see make-or-break work items. ", + description: + "Preview high-priority work items for each cycle against due dates. See all of them per cycle in one click.", + icon: AlertOctagonOutline, + }, + { + key: "zoom_into_cycles_that_need_attention", + title: "Zoom into cycles that need attention. ", + description: "Investigate the state of any cycle that doesn’t conform to expectations in one click.", + icon: SearchOutline, + }, + { + key: "stay_ahead_of_blockers", + title: "Stay ahead of blockers.", + description: + "Spot challenges from one project to another and see inter-cycle dependencies that aren’t obvious from any other view.", + icon: Microscope, + }, +]; + +export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyclesUpgrade() { + const { t } = useTranslation(); + // store hooks + const { + userProfile: { data: userProfile }, + } = useUser(); + + const isDarkMode = userProfile?.theme.theme === "dark"; + + return ( + +

{t("on_demand_snapshots_of_all_your_cycles")}

{t("active_cycles_description")}

+ + + {t("upgrade")} + +

+ + l-1

+ +

+ + r-1

+ + + r-2

+ +

+ {WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => ( +

{t(item.key)}

+ +

+ {t(`${item.key}_description`)} +

+ ))} +

+ + ); +}); diff --git a/apps/web/core/components/analytics/analytics-filter-actions.tsx b/apps/web/core/components/analytics/analytics-filter-actions.tsx new file mode 100644 index 0000000..1f9a3d2 --- /dev/null +++ b/apps/web/core/components/analytics/analytics-filter-actions.tsx @@ -0,0 +1,39 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// plane web components +import { observer } from "mobx-react"; +// hooks +import { useAnalytics } from "@/hooks/store/use-analytics"; +import { useProject } from "@/hooks/store/use-project"; +// components +import { ProjectSelect } from "./select/project"; + +const AnalyticsFilterActions = observer(function AnalyticsFilterActions() { + const { selectedProjects, updateSelectedProjects } = useAnalytics(); + const { joinedProjectIds } = useProject(); + return ( +

+ { + updateSelectedProjects(val ?? []); + }} + projectIds={joinedProjectIds} + /> + {/* { + updateSelectedDuration(val); + }} + dropdownArrow + /> */} +

+ ); +}); + +export default AnalyticsFilterActions; diff --git a/apps/web/core/components/analytics/analytics-section-wrapper.tsx b/apps/web/core/components/analytics/analytics-section-wrapper.tsx new file mode 100644 index 0000000..d46ce74 --- /dev/null +++ b/apps/web/core/components/analytics/analytics-section-wrapper.tsx @@ -0,0 +1,36 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { cn } from "@plane/utils"; + +type Props = { + title?: string; + children: React.ReactNode; + className?: string; + subtitle?: string | null; + actions?: React.ReactNode; + headerClassName?: string; +}; + +function AnalyticsSectionWrapper(props: Props) { + const { title, children, className, actions, headerClassName } = props; + return ( +

+ {title && ( +

{title}

+ {/* {subtitle &&

• {subtitle}

} */} +

+ )} + {actions} +

+ {children} +

+ ); +} + +export default AnalyticsSectionWrapper; diff --git a/apps/web/core/components/analytics/analytics-wrapper.tsx b/apps/web/core/components/analytics/analytics-wrapper.tsx new file mode 100644 index 0000000..6cd886b --- /dev/null +++ b/apps/web/core/components/analytics/analytics-wrapper.tsx @@ -0,0 +1,29 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React from "react"; +// plane package imports +import { useTranslation } from "@plane/i18n"; +import { cn } from "@plane/utils"; + +type Props = { + i18nTitle: string; + children: React.ReactNode; + className?: string; +}; + +function AnalyticsWrapper(props: Props) { + const { i18nTitle, children, className } = props; + const { t } = useTranslation(); + return ( +

{t(i18nTitle)}

+ {children} +

+ ); +} + +export default AnalyticsWrapper; diff --git a/apps/web/core/components/analytics/empty-state.tsx b/apps/web/core/components/analytics/empty-state.tsx new file mode 100644 index 0000000..8c2a721 --- /dev/null +++ b/apps/web/core/components/analytics/empty-state.tsx @@ -0,0 +1,51 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useTheme } from "next-themes"; +// plane package imports +import { cn } from "@plane/utils"; +// assets +import darkBackgroundAsset from "@/app/assets/empty-state/analytics/empty-grid-background-dark.webp?url"; +import lightBackgroundAsset from "@/app/assets/empty-state/analytics/empty-grid-background-light.webp?url"; + +type Props = { + title: string; + description?: string; + assetPath?: string; + className?: string; +}; + +function AnalyticsEmptyState({ title, description, assetPath, className }: Props) { + // theme hook + const { resolvedTheme } = useTheme(); + const backgroundReolvedPath = resolvedTheme === "light" ? lightBackgroundAsset : darkBackgroundAsset; + + return ( +

+ {assetPath && ( +

+ )} +

{title}

+ {description &&

{description}

} +

+ ); +} + +export default AnalyticsEmptyState; diff --git a/apps/web/core/components/analytics/export.ts b/apps/web/core/components/analytics/export.ts new file mode 100644 index 0000000..c77d178 --- /dev/null +++ b/apps/web/core/components/analytics/export.ts @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { ColumnDef, Row } from "@tanstack/react-table"; +import { download, generateCsv, mkConfig } from "export-to-csv"; + +export const csvConfig = (workspaceSlug: string) => + mkConfig({ + fieldSeparator: ",", + filename: `${workspaceSlug}-analytics`, + decimalSeparator: ".", + useKeysAsHeaders: true, + }); + +export const exportCSV = (rows: Row[], columns: ColumnDef[], workspaceSlug: string) => { + const rowData = rows.map((row) => { + const exportColumns = columns.map((col) => col.meta?.export); + const cells = exportColumns.reduce((acc: Record, col) => { + if (col) { + const cell = col?.value(row) ?? "-"; + acc[col.label ?? col.key] = cell; + } + return acc; + }, {}); + return cells; + }); + const csv = generateCsv(csvConfig(workspaceSlug))(rowData); + download(csvConfig(workspaceSlug))(csv); +}; diff --git a/apps/web/core/components/analytics/insight-card.tsx b/apps/web/core/components/analytics/insight-card.tsx new file mode 100644 index 0000000..d8a30a1 --- /dev/null +++ b/apps/web/core/components/analytics/insight-card.tsx @@ -0,0 +1,36 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// plane package imports +import React from "react"; +import type { IAnalyticsResponseFields } from "@plane/types"; +import { Loader } from "@plane/ui"; + +export type InsightCardProps = { + data?: IAnalyticsResponseFields; + label: string; + isLoading?: boolean; +}; + +function InsightCard(props: InsightCardProps) { + const { data, label, isLoading = false } = props; + const count = data?.count ?? 0; + + return ( +

{label}

+ {!isLoading ? ( +

{count}

+ ) : ( + + )} +

+ ); +} + +export default InsightCard; diff --git a/apps/web/core/components/analytics/insight-table/data-table.tsx b/apps/web/core/components/analytics/insight-table/data-table.tsx new file mode 100644 index 0000000..679e98a --- /dev/null +++ b/apps/web/core/components/analytics/insight-table/data-table.tsx @@ -0,0 +1,175 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import * as React from "react"; +import type { + ColumnDef, + ColumnFiltersState, + SortingState, + VisibilityState, + Table as TanstackTable, +} from "@tanstack/react-table"; +import { + flexRender, + getCoreRowModel, + getFacetedRowModel, + getFacetedUniqueValues, + getFilteredRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; + +import { useTranslation } from "@plane/i18n"; +import { EmptyStateCompact } from "@plane/propel/empty-state"; +import { CloseOutline, SearchOutline } from "@makeplane/propel/icons"; +// plane package imports +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table"; +import { cn } from "@plane/utils"; +// plane web components + +interface DataTableProps { + columns: ColumnDef[]; + data: TData[]; + searchPlaceholder: string; + actions?: (table: TanstackTable) => React.ReactNode; +} + +export function DataTable({ columns, data, searchPlaceholder, actions }: DataTableProps) { + const [rowSelection, _setRowSelection] = React.useState({}); + const [columnVisibility, setColumnVisibility] = React.useState({}); + const [columnFilters, setColumnFilters] = React.useState([]); + const [sorting, _setSorting] = React.useState([]); + const { t } = useTranslation(); + const inputRef = React.useRef(null); + const [isSearchOpen, setIsSearchOpen] = React.useState(false); + + const table = useReactTable({ + data, + columns, + state: { + sorting, + columnVisibility, + rowSelection, + columnFilters, + }, + onColumnFiltersChange: setColumnFilters, + onColumnVisibilityChange: setColumnVisibility, + getCoreRowModel: getCoreRowModel(), + getFilteredRowModel: getFilteredRowModel(), + getSortedRowModel: getSortedRowModel(), + getFacetedRowModel: getFacetedRowModel(), + getFacetedUniqueValues: getFacetedUniqueValues(), + }); + + return ( +

+ {table.getHeaderGroups()?.[0]?.headers?.[0]?.id && ( +

+ {searchPlaceholder} +

+ )} + {!isSearchOpen && ( + + )} +

+ + { + const columnId = table.getHeaderGroups()?.[0]?.headers?.[0]?.id; + if (columnId) table.getColumn(columnId)?.setFilterValue(e.target.value); + }} + onKeyDown={(e) => { + if (e.key === "Enter") { + setIsSearchOpen(true); + } + }} + /> + {isSearchOpen && ( + + )} +

+ {actions &&

{actions(table)}

} +

+ +

+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : (flexRender(header.column.columnDef.header, header.getContext()) as any)} + + ))} + + ))} + + + {table.getRowModel().rows?.length > 0 ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext()) as any} + + ))} + + )) + ) : ( + + + + + + )} + +

+ ); +} diff --git a/apps/web/core/components/analytics/insight-table/index.ts b/apps/web/core/components/analytics/insight-table/index.ts new file mode 100644 index 0000000..d980334 --- /dev/null +++ b/apps/web/core/components/analytics/insight-table/index.ts @@ -0,0 +1,7 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +export * from "./root"; diff --git a/apps/web/core/components/analytics/insight-table/loader.tsx b/apps/web/core/components/analytics/insight-table/loader.tsx new file mode 100644 index 0000000..e07da23 --- /dev/null +++ b/apps/web/core/components/analytics/insight-table/loader.tsx @@ -0,0 +1,42 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import * as React from "react"; +import type { ColumnDef } from "@tanstack/react-table"; +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table"; +import { Loader } from "@plane/ui"; + +interface TableSkeletonProps { + columns: ColumnDef[]; + rows: number; +} + +export function TableLoader({ columns, rows }: TableSkeletonProps) { + return ( + + + + {columns.map((column, index) => ( + + {typeof column.header === "string" ? column.header : ""} + + ))} + + + + {Array.from({ length: rows }).map((_, rowIndex) => ( + + {columns.map((_, colIndex) => ( + + + + ))} + + ))} + +

+ ); +} diff --git a/apps/web/core/components/analytics/insight-table/root.tsx b/apps/web/core/components/analytics/insight-table/root.tsx new file mode 100644 index 0000000..4a368be --- /dev/null +++ b/apps/web/core/components/analytics/insight-table/root.tsx @@ -0,0 +1,51 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { ColumnDef, Row, Table } from "@tanstack/react-table"; +import { DownloadOutline } from "@makeplane/propel/icons"; +import { useTranslation } from "@plane/i18n"; +import { Button } from "@plane/propel/button"; +import type { AnalyticsTableDataMap, TAnalyticsTabsBase } from "@plane/types"; +import { DataTable } from "./data-table"; +import { TableLoader } from "./loader"; +interface InsightTableProps> { + analyticsType: T; + data?: AnalyticsTableDataMap[T][]; + isLoading?: boolean; + columns: ColumnDef[]; + columnsLabels?: Record; + headerText: string; + onExport?: (rows: Row[]) => void; +} + +export function InsightTable>( + props: InsightTableProps +): React.ReactElement { + const { data, isLoading, columns, headerText, onExport } = props; + const { t } = useTranslation(); + if (isLoading) { + return ; + } + + return ( +

+ ) => ( + + )} + /> +

+ ); +} diff --git a/apps/web/core/components/analytics/loaders.tsx b/apps/web/core/components/analytics/loaders.tsx new file mode 100644 index 0000000..c298dd0 --- /dev/null +++ b/apps/web/core/components/analytics/loaders.tsx @@ -0,0 +1,33 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { Loader } from "@plane/ui"; + +export function ProjectInsightsLoader() { + return ( +

+ + + +

+ + + + + + +

+ ); +} + +export function ChartLoader() { + return ( + + + + ); +} diff --git a/apps/web/core/components/analytics/overview/active-project-item.tsx b/apps/web/core/components/analytics/overview/active-project-item.tsx new file mode 100644 index 0000000..14e97fd --- /dev/null +++ b/apps/web/core/components/analytics/overview/active-project-item.tsx @@ -0,0 +1,68 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// plane package imports +import { Logo } from "@plane/propel/emoji-icon-picker"; +import { ProjectsOutline } from "@makeplane/propel/icons"; +import { Tooltip } from "@makeplane/propel/components/tooltip"; +import { cn } from "@plane/utils"; +// plane web hooks +import { useProject } from "@/hooks/store/use-project"; + +type Props = { + project: { + id: string; + completed_issues?: number; + total_issues?: number; + }; + isLoading?: boolean; +}; + +function CompletionPercentage({ percentage }: { percentage: number }) { + const percentageColor = + percentage > 50 ? "bg-success-subtle text-success-primary" : "bg-danger-subtle text-danger-primary"; + return ( +

+ {percentage}% +

+ ); +} + +function ActiveProjectItem(props: Props) { + const { project } = props; + const { getProjectById } = useProject(); + const { id, completed_issues, total_issues } = project; + + const projectDetails = getProjectById(id); + + if (!projectDetails) return null; + + return ( +

+ + {projectDetails?.logo_props ? ( + + ) : ( + + + + )} + +

+ +

{projectDetails?.name}

+ +

+ ); +} + +export default ActiveProjectItem; diff --git a/apps/web/core/components/analytics/overview/active-projects.tsx b/apps/web/core/components/analytics/overview/active-projects.tsx new file mode 100644 index 0000000..1ad22dc --- /dev/null +++ b/apps/web/core/components/analytics/overview/active-projects.tsx @@ -0,0 +1,51 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React from "react"; +import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; +import useSWR from "swr"; +// plane package imports +import { useTranslation } from "@plane/i18n"; +import { Loader } from "@plane/ui"; +// plane web hooks +import { useAnalytics } from "@/hooks/store/use-analytics"; +import { useProject } from "@/hooks/store/use-project"; +// plane web components +import AnalyticsSectionWrapper from "../analytics-section-wrapper"; +import ActiveProjectItem from "./active-project-item"; + +const ActiveProjects = observer(function ActiveProjects() { + const { t } = useTranslation(); + const { fetchProjectAnalyticsCount } = useProject(); + const { workspaceSlug } = useParams(); + const { selectedDurationLabel } = useAnalytics(); + const { data: projectAnalyticsCount, isLoading: isProjectAnalyticsCountLoading } = useSWR( + workspaceSlug ? ["projectAnalyticsCount", workspaceSlug] : null, + workspaceSlug + ? () => + fetchProjectAnalyticsCount(workspaceSlug.toString(), { + fields: "total_work_items,total_completed_work_items", + }) + : null + ); + return ( + +

+ {isProjectAnalyticsCountLoading && + Array.from({ length: 5 }).map((_, index) => )} + {!isProjectAnalyticsCountLoading && + projectAnalyticsCount?.map((project) => )} +

+ + ); +}); + +export default ActiveProjects; diff --git a/apps/web/core/components/analytics/overview/index.ts b/apps/web/core/components/analytics/overview/index.ts new file mode 100644 index 0000000..d980334 --- /dev/null +++ b/apps/web/core/components/analytics/overview/index.ts @@ -0,0 +1,7 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +export * from "./root"; diff --git a/apps/web/core/components/analytics/overview/project-insights.tsx b/apps/web/core/components/analytics/overview/project-insights.tsx new file mode 100644 index 0000000..6987ce1 --- /dev/null +++ b/apps/web/core/components/analytics/overview/project-insights.tsx @@ -0,0 +1,123 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { lazy, Suspense } from "react"; +import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; +import useSWR from "swr"; +// plane package imports +import { useTranslation } from "@plane/i18n"; +import { EmptyStateCompact } from "@plane/propel/empty-state"; +import type { TChartData } from "@plane/types"; +// hooks +import { useAnalytics } from "@/hooks/store/use-analytics"; +// services +import { AnalyticsService } from "@/services/analytics.service"; +// plane web components +import AnalyticsSectionWrapper from "../analytics-section-wrapper"; +import { ProjectInsightsLoader } from "../loaders"; + +const RadarChart = lazy(function RadarChart() { + return import("@plane/propel/charts/radar-chart").then((mod) => ({ + default: mod.RadarChart, + })); +}); + +const analyticsService = new AnalyticsService(); + +const ProjectInsights = observer(function ProjectInsights() { + const params = useParams(); + const { t } = useTranslation(); + const workspaceSlug = params.workspaceSlug.toString(); + const { selectedDuration, selectedDurationLabel, selectedProjects, selectedCycle, selectedModule, isPeekView } = + useAnalytics(); + + const { data: projectInsightsData, isLoading: isLoadingProjectInsight } = useSWR( + `radar-chart-project-insights-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}`, + () => + analyticsService.getAdvanceAnalyticsCharts[]>( + workspaceSlug, + "projects", + { + // date_filter: selectedDuration, + ...(selectedProjects?.length > 0 && { project_ids: selectedProjects?.join(",") }), + ...(selectedCycle ? { cycle_id: selectedCycle } : {}), + ...(selectedModule ? { module_id: selectedModule } : {}), + }, + isPeekView + ) + ); + + return ( + + {isLoadingProjectInsight ? ( + + ) : projectInsightsData && projectInsightsData?.length == 0 ? ( + + ) : ( +

+ {projectInsightsData && ( + }> + + + )} +

{t("workspace_analytics.summary_of_projects")}

{t("workspace_analytics.all_projects")}

{t("workspace_analytics.trend_on_charts")}

{t("common.work_items")}

+ {projectInsightsData?.map((item) => ( +

{item.name}

+ {/* */} +

{item.count}

+ ))} +

+ )} + + ); +}); + +export default ProjectInsights; diff --git a/apps/web/core/components/analytics/overview/root.tsx b/apps/web/core/components/analytics/overview/root.tsx new file mode 100644 index 0000000..4b191ca --- /dev/null +++ b/apps/web/core/components/analytics/overview/root.tsx @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React from "react"; +import AnalyticsWrapper from "../analytics-wrapper"; +import TotalInsights from "../total-insights"; +import ActiveProjects from "./active-projects"; +import ProjectInsights from "./project-insights"; + +function Overview() { + return ( + +

+ +

+ + +

+ + ); +} + +export { Overview }; diff --git a/apps/web/core/components/analytics/select/analytics-params.tsx b/apps/web/core/components/analytics/select/analytics-params.tsx new file mode 100644 index 0000000..0f266fb --- /dev/null +++ b/apps/web/core/components/analytics/select/analytics-params.tsx @@ -0,0 +1,108 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useMemo } from "react"; +import { observer } from "mobx-react"; +import type { Control, UseFormSetValue } from "react-hook-form"; +import { Controller } from "react-hook-form"; +import { CalendarOutline, PreferencesOutline } from "@makeplane/propel/icons"; +// plane package imports +import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "@plane/constants"; +import type { IAnalyticsParams } from "@plane/types"; +import { ChartYAxisMetric } from "@plane/types"; +import { cn } from "@plane/utils"; +// plane web components +import { SelectXAxis } from "./select-x-axis"; +import { SelectYAxis } from "./select-y-axis"; + +type Props = { + control: Control; + setValue: UseFormSetValue; + params: IAnalyticsParams; + workspaceSlug: string; + classNames?: string; + isEpic?: boolean; +}; + +export const AnalyticsSelectParams = observer(function AnalyticsSelectParams(props: Props) { + const { control, params, classNames, isEpic } = props; + const xAxisOptions = useMemo( + () => ANALYTICS_X_AXIS_VALUES.filter((option) => option.value !== params.group_by), + [params.group_by] + ); + const groupByOptions = useMemo( + () => ANALYTICS_X_AXIS_VALUES.filter((option) => option.value !== params.x_axis), + [params.x_axis] + ); + + return ( +

+ ( + { + onChange(val); + }} + options={ANALYTICS_Y_AXIS_VALUES} + hiddenOptions={[ + ChartYAxisMetric.ESTIMATE_POINT_COUNT, + isEpic ? ChartYAxisMetric.WORK_ITEM_COUNT : ChartYAxisMetric.EPIC_WORK_ITEM_COUNT, + ]} + /> + )} + /> + ( + { + onChange(val); + }} + label={ +

+ + + {xAxisOptions.find((v) => v.value === value)?.label || "Add Property"} + +

+ } + options={xAxisOptions} + /> + )} + /> + ( + { + onChange(val); + }} + label={ +

+ + + {groupByOptions.find((v) => v.value === value)?.label || "Add Property"} + +

+ } + options={groupByOptions} + placeholder="Group By" + allowNoValue + /> + )} + /> +

+ ); +}); diff --git a/apps/web/core/components/analytics/select/duration.tsx b/apps/web/core/components/analytics/select/duration.tsx new file mode 100644 index 0000000..7748484 --- /dev/null +++ b/apps/web/core/components/analytics/select/duration.tsx @@ -0,0 +1,57 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// plane package imports +import type { ReactNode } from "react"; +import React from "react"; +import { CalendarOutline } from "@makeplane/propel/icons"; +// plane package imports +import { ANALYTICS_DURATION_FILTER_OPTIONS } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +import { CustomSearchSelect } from "@plane/ui"; +// types +import type { TDropdownProps } from "@/components/dropdowns/types"; + +type Props = TDropdownProps & { + value: string | null; + onChange: (val: (typeof ANALYTICS_DURATION_FILTER_OPTIONS)[number]["value"]) => void; + //optional + button?: ReactNode; + dropdownArrow?: boolean; + dropdownArrowClassName?: string; + onClose?: () => void; + renderByDefault?: boolean; + tabIndex?: number; +}; + +function DurationDropdown({ placeholder = "Duration", onChange, value }: Props) { + useTranslation(); + + const options = ANALYTICS_DURATION_FILTER_OPTIONS.map((option) => ({ + value: option.value, + query: option.name, + content: ( +

+ {option.name} +

+ ), + })); + return ( + + + {value ? ANALYTICS_DURATION_FILTER_OPTIONS.find((opt) => opt.value === value)?.name : placeholder} +

+ } + /> + ); +} + +export default DurationDropdown; diff --git a/apps/web/core/components/analytics/select/project.tsx b/apps/web/core/components/analytics/select/project.tsx new file mode 100644 index 0000000..cc0896c --- /dev/null +++ b/apps/web/core/components/analytics/select/project.tsx @@ -0,0 +1,70 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +// plane package imports +import { getButtonStyling } from "@plane/propel/button"; +import { Logo } from "@plane/propel/emoji-icon-picker"; +import { ChevronDownOutline, ProjectsOutline } from "@makeplane/propel/icons"; +import { CustomSearchSelect } from "@plane/ui"; +import { cn } from "@plane/utils"; +// hooks +import { useProject } from "@/hooks/store/use-project"; + +type Props = { + value: string[] | undefined; + onChange: (val: string[] | null) => void; + projectIds: string[] | undefined; +}; + +export const ProjectSelect = observer(function ProjectSelect(props: Props) { + const { value, onChange, projectIds } = props; + const { getProjectById } = useProject(); + + const options = projectIds?.map((projectId) => { + const projectDetails = getProjectById(projectId); + + return { + value: projectDetails?.id, + query: `${projectDetails?.name} ${projectDetails?.identifier}`, + content: ( +

+ {projectDetails?.logo_props ? ( + + ) : ( + + )} + {projectDetails?.name} +

+ ), + }; + }); + + return ( + onChange(val)} + options={options} + className="border-none p-0" + customButton={ +

+ + {value && value.length > 3 + ? `3+ projects` + : value && value.length > 0 + ? projectIds + ?.filter((p) => value.includes(p)) + .map((p) => getProjectById(p)?.name) + .join(", ") + : "All projects"} +

+ } + customButtonClassName="border-none p-0 bg-transparent hover:bg-transparent w-auto h-auto" + multiple + /> + ); +}); diff --git a/apps/web/core/components/analytics/select/select-x-axis.tsx b/apps/web/core/components/analytics/select/select-x-axis.tsx new file mode 100644 index 0000000..6effcfa --- /dev/null +++ b/apps/web/core/components/analytics/select/select-x-axis.tsx @@ -0,0 +1,36 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// plane package imports +import type { ChartXAxisProperty } from "@plane/types"; +import { CustomSelect } from "@plane/ui"; + +type Props = { + value?: ChartXAxisProperty; + onChange: (val: ChartXAxisProperty | null) => void; + options: { value: ChartXAxisProperty; label: string }[]; + placeholder?: string; + hiddenOptions?: ChartXAxisProperty[]; + allowNoValue?: boolean; + label?: string | React.ReactNode; +}; + +export function SelectXAxis(props: Props) { + const { value, onChange, options, hiddenOptions, allowNoValue, label } = props; + return ( + + {allowNoValue && No value} + {options.map((item) => { + if (hiddenOptions?.includes(item.value)) return null; + return ( + + {item.label} + + ); + })} + + ); +} diff --git a/apps/web/core/components/analytics/select/select-y-axis.tsx b/apps/web/core/components/analytics/select/select-y-axis.tsx new file mode 100644 index 0000000..0d0470e --- /dev/null +++ b/apps/web/core/components/analytics/select/select-y-axis.tsx @@ -0,0 +1,70 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; +import { EEstimateSystem } from "@plane/constants"; +import { ProjectsOutline } from "@makeplane/propel/icons"; +import type { ChartYAxisMetric } from "@plane/types"; +// plane package imports +import { CustomSelect } from "@plane/ui"; +// hooks +import { useProjectEstimates } from "@/hooks/store/estimates"; +// plane web constants +type Props = { + value: ChartYAxisMetric; + onChange: (val: ChartYAxisMetric | null) => void; + hiddenOptions?: ChartYAxisMetric[]; + options: { value: ChartYAxisMetric; label: string }[]; +}; + +export const SelectYAxis = observer(function SelectYAxis({ value, onChange, hiddenOptions, options }: Props) { + // hooks + const { projectId } = useParams(); + const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates(); + + const isEstimateEnabled = (analyticsOption: string) => { + if (analyticsOption === "estimate") { + if ( + projectId && + currentActiveEstimateId && + areEstimateEnabledByProjectId(projectId.toString()) && + estimateById(currentActiveEstimateId)?.type === EEstimateSystem.POINTS + ) { + return true; + } else { + return false; + } + } + + return true; + }; + + return ( + + + {options.find((v) => v.value === value)?.label ?? "Add Metric"} +

+ } + onChange={onChange} + maxHeight="lg" + > + {options.map((item) => { + if (hiddenOptions?.includes(item.value)) return null; + return ( + isEstimateEnabled(item.value) && ( + + {item.label} + + ) + ); + })} + + ); +}); diff --git a/apps/web/core/components/analytics/tabs.tsx b/apps/web/core/components/analytics/tabs.tsx new file mode 100644 index 0000000..1fdbc0c --- /dev/null +++ b/apps/web/core/components/analytics/tabs.tsx @@ -0,0 +1,14 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import type { AnalyticsTab } from "@plane/types"; +import { Overview } from "@/components/analytics/overview"; +import { WorkItems } from "@/components/analytics/work-items"; + +export const getAnalyticsTabs = (t: (key: string, params?: Record) => string): AnalyticsTab[] => [ + { key: "overview", label: t("common.overview"), content: Overview, isDisabled: false }, + { key: "work-items", label: t("sidebar.work_items"), content: WorkItems, isDisabled: false }, +]; diff --git a/apps/web/core/components/analytics/total-insights.tsx b/apps/web/core/components/analytics/total-insights.tsx new file mode 100644 index 0000000..98e5ed0 --- /dev/null +++ b/apps/web/core/components/analytics/total-insights.tsx @@ -0,0 +1,103 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// plane package imports +import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; +import useSWR from "swr"; +import type { IInsightField } from "@plane/constants"; +import { ANALYTICS_INSIGHTS_FIELDS } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +import type { IAnalyticsResponse, TAnalyticsTabsBase } from "@plane/types"; +import { cn } from "@plane/utils"; +// hooks +import { useAnalytics } from "@/hooks/store/use-analytics"; +// services +import { AnalyticsService } from "@/services/analytics.service"; +// local imports +import InsightCard from "./insight-card"; + +const analyticsService = new AnalyticsService(); + +const getInsightLabel = ( + analyticsType: TAnalyticsTabsBase, + item: IInsightField, + isEpic: boolean | undefined, + t: (key: string, params?: Record) => string +) => { + if (analyticsType === "work-items") { + return isEpic + ? t(item.i18nKey, { entity: t("common.epics") }) + : t(item.i18nKey, { entity: t("common.work_items") }); + } + + // Get the base translation with entity + const baseTranslation = t(item.i18nKey, { + ...item.i18nProps, + entity: item.i18nProps?.entity && t(item.i18nProps?.entity), + }); + + // Add prefix if available + const prefix = item.i18nProps?.prefix ? `${t(item.i18nProps.prefix)} ` : ""; + + // Add suffix if available + const suffix = item.i18nProps?.suffix ? ` ${t(item.i18nProps.suffix)}` : ""; + + // Combine prefix, base translation, and suffix + return `${prefix}${baseTranslation}${suffix}`; +}; + +const TotalInsights = observer(function TotalInsights({ + analyticsType, + peekView, +}: { + analyticsType: TAnalyticsTabsBase; + peekView?: boolean; +}) { + const params = useParams(); + const workspaceSlug = params.workspaceSlug.toString(); + const { t } = useTranslation(); + const { selectedDuration, selectedProjects, selectedCycle, selectedModule, isPeekView, isEpic } = useAnalytics(); + const { data: totalInsightsData, isLoading } = useSWR( + `total-insights-${analyticsType}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isEpic}`, + () => + analyticsService.getAdvanceAnalytics( + workspaceSlug, + analyticsType, + { + // date_filter: selectedDuration, + ...(selectedProjects?.length > 0 ? { project_ids: selectedProjects.join(",") } : {}), + ...(selectedCycle ? { cycle_id: selectedCycle } : {}), + ...(selectedModule ? { module_id: selectedModule } : {}), + ...(isEpic ? { epic: true } : {}), + }, + isPeekView + ) + ); + return ( +

+ {ANALYTICS_INSIGHTS_FIELDS[analyticsType]?.map((item) => ( + + ))} +

+ ); +}); + +export default TotalInsights; diff --git a/apps/web/core/components/analytics/trend-piece.tsx b/apps/web/core/components/analytics/trend-piece.tsx new file mode 100644 index 0000000..744e40c --- /dev/null +++ b/apps/web/core/components/analytics/trend-piece.tsx @@ -0,0 +1,86 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// plane package imports +import React from "react"; +import { TrendingDown, TrendingUp } from "lucide-react"; +import { cn } from "@plane/utils"; +// plane web components + +type Props = { + percentage: number; + className?: string; + size?: "xs" | "sm" | "md" | "lg"; + trendIconVisible?: boolean; + variant?: "simple" | "outlined" | "tinted"; +}; + +const sizeConfig = { + xs: { + text: "text-11", + icon: "w-3 h-3", + }, + sm: { + text: "text-13", + icon: "w-4 h-4", + }, + md: { + text: "text-14", + icon: "w-5 h-5", + }, + lg: { + text: "text-16", + icon: "w-6 h-6", + }, +} as const; + +const variants: Record, Record<"ontrack" | "offtrack" | "atrisk", string>> = { + simple: { + ontrack: "text-success-primary", + offtrack: "text-yellow-500", + atrisk: "text-danger-primary", + }, + outlined: { + ontrack: "text-success-primary border border-success-strong", + offtrack: "text-yellow-500 border border-yellow-500", + atrisk: "text-danger-primary border border-danger-strong", + }, + tinted: { + ontrack: "text-success-primary bg-success-subtle", + offtrack: "text-yellow-500 bg-yellow-500/10", + atrisk: "text-danger-primary bg-danger-subtle", + }, +} as const; + +function TrendPiece(props: Props) { + const { percentage, className, trendIconVisible = true, size = "sm", variant = "simple" } = props; + const isOnTrack = percentage >= 66; + const isOffTrack = percentage >= 33 && percentage < 66; + const config = sizeConfig[size]; + + return ( +

+ {trendIconVisible && + (isOnTrack ? ( + + ) : isOffTrack ? ( + + ) : ( + + ))} + {Math.round(Math.abs(percentage))}% +

+ ); +} + +export default TrendPiece; diff --git a/apps/web/core/components/analytics/use-analytics-tabs.tsx b/apps/web/core/components/analytics/use-analytics-tabs.tsx new file mode 100644 index 0000000..d022d74 --- /dev/null +++ b/apps/web/core/components/analytics/use-analytics-tabs.tsx @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useMemo } from "react"; +import { useTranslation } from "@plane/i18n"; +import { getAnalyticsTabs } from "./tabs"; + +export const useAnalyticsTabs = (_workspaceSlug: string) => { + const { t } = useTranslation(); + + const analyticsTabs = useMemo(() => getAnalyticsTabs(t), [t]); + + return analyticsTabs; +}; diff --git a/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx b/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx new file mode 100644 index 0000000..c4723c0 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/created-vs-resolved.tsx @@ -0,0 +1,139 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useMemo } from "react"; +import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; +import useSWR from "swr"; +// plane package imports +import { useTranslation } from "@plane/i18n"; +import { AreaChart } from "@plane/propel/charts/area-chart"; +import { EmptyStateCompact } from "@plane/propel/empty-state"; +import type { IChartResponse, TChartData } from "@plane/types"; +import { renderFormattedDate } from "@plane/utils"; +// hooks +import { useAnalytics } from "@/hooks/store/use-analytics"; +// services +import { AnalyticsService } from "@/services/analytics.service"; +// plane web components +import AnalyticsSectionWrapper from "../analytics-section-wrapper"; +import { ChartLoader } from "../loaders"; + +const analyticsService = new AnalyticsService(); +const CreatedVsResolved = observer(function CreatedVsResolved() { + const { + selectedDuration, + selectedDurationLabel, + selectedProjects, + selectedCycle, + selectedModule, + isPeekView, + isEpic, + } = useAnalytics(); + const params = useParams(); + const { t } = useTranslation(); + const workspaceSlug = params.workspaceSlug.toString(); + const { data: createdVsResolvedData, isLoading: isCreatedVsResolvedLoading } = useSWR( + `created-vs-resolved-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}-${isEpic}`, + () => + analyticsService.getAdvanceAnalyticsCharts( + workspaceSlug, + "work-items", + { + // date_filter: selectedDuration, + ...(selectedProjects?.length > 0 && { project_ids: selectedProjects?.join(",") }), + ...(selectedCycle ? { cycle_id: selectedCycle } : {}), + ...(selectedModule ? { module_id: selectedModule } : {}), + ...(isEpic ? { epic: true } : {}), + }, + isPeekView + ) + ); + const parsedData: TChartData[] = useMemo(() => { + if (!createdVsResolvedData?.data) return []; + return createdVsResolvedData.data.map((datum) => ({ + ...datum, + [datum.key]: datum.count, + name: renderFormattedDate(datum.key) ?? datum.key, + })); + }, [createdVsResolvedData]); + + const areas = useMemo( + () => [ + { + key: "completed_issues", + label: "Resolved", + fill: "#19803833", + fillOpacity: 1, + stackId: "bar-one", + showDot: false, + smoothCurves: true, + strokeColor: "#198038", + strokeOpacity: 1, + }, + { + key: "created_issues", + label: "Created", + fill: "#1192E833", + fillOpacity: 1, + stackId: "bar-one", + showDot: false, + smoothCurves: true, + strokeColor: "#1192E8", + strokeOpacity: 1, + }, + ], + [] + ); + + return ( + + {isCreatedVsResolvedLoading ? ( + + ) : parsedData && parsedData.length > 0 ? ( + + ) : ( + + )} + + ); +}); + +export default CreatedVsResolved; diff --git a/apps/web/core/components/analytics/work-items/customized-insights.tsx b/apps/web/core/components/analytics/work-items/customized-insights.tsx new file mode 100644 index 0000000..c40a853 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/customized-insights.tsx @@ -0,0 +1,62 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; +import { useForm } from "react-hook-form"; +// plane package imports +import { useTranslation } from "@plane/i18n"; +import type { IAnalyticsParams } from "@plane/types"; +import { ChartXAxisProperty, ChartYAxisMetric } from "@plane/types"; +import { cn } from "@plane/utils"; +// plane web components +import AnalyticsSectionWrapper from "../analytics-section-wrapper"; +import { AnalyticsSelectParams } from "../select/analytics-params"; +import PriorityChart from "./priority-chart"; + +const CustomizedInsights = observer(function CustomizedInsights({ + peekView, + isEpic, +}: { + peekView?: boolean; + isEpic?: boolean; +}) { + const { t } = useTranslation(); + const { workspaceSlug } = useParams(); + const { control, watch, setValue } = useForm({ + defaultValues: { + x_axis: ChartXAxisProperty.PRIORITY, + y_axis: isEpic ? ChartYAxisMetric.EPIC_WORK_ITEM_COUNT : ChartYAxisMetric.WORK_ITEM_COUNT, + }, + }); + + const params = { + x_axis: watch("x_axis"), + y_axis: watch("y_axis"), + group_by: watch("group_by"), + }; + + return ( + + } + > + + + ); +}); + +export default CustomizedInsights; diff --git a/apps/web/core/components/analytics/work-items/index.ts b/apps/web/core/components/analytics/work-items/index.ts new file mode 100644 index 0000000..d980334 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/index.ts @@ -0,0 +1,7 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +export * from "./root"; diff --git a/apps/web/core/components/analytics/work-items/modal/content.tsx b/apps/web/core/components/analytics/work-items/modal/content.tsx new file mode 100644 index 0000000..259dec2 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/modal/content.tsx @@ -0,0 +1,87 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React, { useEffect, useState } from "react"; +import { observer } from "mobx-react"; +import { Tab } from "@headlessui/react"; +// plane package imports +import type { ICycle, IModule, IProject } from "@plane/types"; +import { Spinner } from "@plane/ui"; +// hooks +import { useAnalytics } from "@/hooks/store/use-analytics"; +// plane web components +import TotalInsights from "../../total-insights"; +import CreatedVsResolved from "../created-vs-resolved"; +import CustomizedInsights from "../customized-insights"; +import WorkItemsInsightTable from "../workitems-insight-table"; + +type Props = { + fullScreen: boolean; + projectDetails: IProject | undefined; + cycleDetails: ICycle | undefined; + moduleDetails: IModule | undefined; + isEpic?: boolean; +}; + +export const WorkItemsModalMainContent = observer(function WorkItemsModalMainContent(props: Props) { + const { projectDetails, cycleDetails, moduleDetails, fullScreen, isEpic } = props; + const { updateSelectedProjects, updateSelectedCycle, updateSelectedModule, updateIsPeekView } = useAnalytics(); + const [isModalConfigured, setIsModalConfigured] = useState(false); + + useEffect(() => { + updateIsPeekView(true); + + // Handle project selection + if (projectDetails?.id) { + updateSelectedProjects([projectDetails.id]); + } + + // Handle cycle selection + if (cycleDetails?.id) { + updateSelectedCycle(cycleDetails.id); + } + + // Handle module selection + if (moduleDetails?.id) { + updateSelectedModule(moduleDetails.id); + } + setIsModalConfigured(true); + + // Cleanup fields + return () => { + updateSelectedProjects([]); + updateSelectedCycle(""); + updateSelectedModule(""); + updateIsPeekView(false); + }; + }, [ + projectDetails?.id, + cycleDetails?.id, + moduleDetails?.id, + updateSelectedProjects, + updateSelectedCycle, + updateSelectedModule, + updateIsPeekView, + ]); + + if (!isModalConfigured) + return ( +

+ +

+ ); + + return ( + +

+ + + + +

+ + ); +}); diff --git a/apps/web/core/components/analytics/work-items/modal/header.tsx b/apps/web/core/components/analytics/work-items/modal/header.tsx new file mode 100644 index 0000000..9270452 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/modal/header.tsx @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { observer } from "mobx-react"; +// plane package imports +import { ArrowCollapseOutline, CloseOutline, FullScreenOutline } from "@makeplane/propel/icons"; +import type { ICycle, IModule } from "@plane/types"; +// icons + +type Props = { + fullScreen: boolean; + handleClose: () => void; + setFullScreen: React.Dispatch>; + title: string; + cycle?: ICycle; + module?: IModule; +}; + +export const WorkItemsModalHeader = observer(function WorkItemsModalHeader(props: Props) { + const { fullScreen, handleClose, setFullScreen, title, cycle, module } = props; + + return ( +

+ Analytics for {title} {cycle && `in ${cycle.name}`} {module && `in ${module.name}`} +

+ + +

+ ); +}); diff --git a/apps/web/core/components/analytics/work-items/modal/index.tsx b/apps/web/core/components/analytics/work-items/modal/index.tsx new file mode 100644 index 0000000..a284ba9 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/modal/index.tsx @@ -0,0 +1,71 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React, { useEffect, useState } from "react"; +import { observer } from "mobx-react"; +// plane package imports +import { ModalPortal, EPortalWidth, EPortalPosition } from "@plane/propel/portal"; +import type { ICycle, IModule, IProject } from "@plane/types"; +import { useAnalytics } from "@/hooks/store/use-analytics"; +// plane web components +import { WorkItemsModalMainContent } from "./content"; +import { WorkItemsModalHeader } from "./header"; + +type Props = { + isOpen: boolean; + onClose: () => void; + projectDetails?: IProject | undefined; + cycleDetails?: ICycle | undefined; + moduleDetails?: IModule | undefined; + isEpic?: boolean; +}; + +export const WorkItemsModal = observer(function WorkItemsModal(props: Props) { + const { isOpen, onClose, projectDetails, moduleDetails, cycleDetails, isEpic } = props; + const { updateIsEpic, isPeekView } = useAnalytics(); + const [fullScreen, setFullScreen] = useState(false); + + const handleClose = () => { + setFullScreen(false); + onClose(); + }; + + useEffect(() => { + updateIsEpic(isPeekView ? (isEpic ?? false) : false); + }, [isEpic, updateIsEpic, isPeekView]); + + return ( + +

+ + +

+ + ); +}); diff --git a/apps/web/core/components/analytics/work-items/priority-chart.tsx b/apps/web/core/components/analytics/work-items/priority-chart.tsx new file mode 100644 index 0000000..97adc63 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/priority-chart.tsx @@ -0,0 +1,251 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useMemo } from "react"; +import type { ColumnDef, Row, RowData, Table } from "@tanstack/react-table"; +import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; +import { useTheme } from "next-themes"; +import useSWR from "swr"; +// plane package imports +import { DownloadOutline } from "@makeplane/propel/icons"; +import type { ChartXAxisDateGrouping } from "@plane/constants"; +import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, CHART_COLOR_PALETTES, EChartModels } from "@plane/constants"; +import { useTranslation } from "@plane/i18n"; +import { Button } from "@plane/propel/button"; +import { BarChart } from "@plane/propel/charts/bar-chart"; +import { EmptyStateCompact } from "@plane/propel/empty-state"; +import type { TBarItem, TChart, TChartDatum, ChartXAxisProperty, ChartYAxisMetric } from "@plane/types"; +// plane web components +import { generateExtendedColors, parseChartData } from "@/components/chart/utils"; +// hooks +import { useAnalytics } from "@/hooks/store/use-analytics"; +import { useProjectState } from "@/hooks/store/use-project-state"; +import { AnalyticsService } from "@/services/analytics.service"; +import { exportCSV } from "../export"; +import { DataTable } from "../insight-table/data-table"; +import { ChartLoader } from "../loaders"; +import { generateBarColor } from "./utils"; + +declare module "@tanstack/react-table" { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface ColumnMeta { + export: { + key: string; + value: (row: Row) => string | number; + label?: string; + }; + } +} + +interface Props { + x_axis: ChartXAxisProperty; + y_axis: ChartYAxisMetric; + group_by?: ChartXAxisProperty; + x_axis_date_grouping?: ChartXAxisDateGrouping; +} + +const analyticsService = new AnalyticsService(); +const PriorityChart = observer(function PriorityChart(props: Props) { + const { x_axis, y_axis, group_by } = props; + const { t } = useTranslation(); + // store hooks + const { selectedDuration, selectedProjects, selectedCycle, selectedModule, isPeekView, isEpic } = useAnalytics(); + const { workspaceStates } = useProjectState(); + const { resolvedTheme } = useTheme(); + // router + const params = useParams(); + const workspaceSlug = params.workspaceSlug.toString(); + + const { data: priorityChartData, isLoading: priorityChartLoading } = useSWR( + `customized-insights-chart-${workspaceSlug}-${selectedDuration}- + ${selectedProjects}-${selectedCycle}-${selectedModule}-${props.x_axis}-${props.y_axis}-${props.group_by}-${isPeekView}-${isEpic}`, + () => + analyticsService.getAdvanceAnalyticsCharts( + workspaceSlug, + "custom-work-items", + { + // date_filter: selectedDuration, + ...(selectedProjects?.length > 0 && { project_ids: selectedProjects?.join(",") }), + ...(selectedCycle ? { cycle_id: selectedCycle } : {}), + ...(selectedModule ? { module_id: selectedModule } : {}), + ...(isEpic ? { epic: true } : {}), + ...props, + }, + isPeekView + ) + ); + const parsedData = useMemo( + () => + priorityChartData && parseChartData(priorityChartData, props.x_axis, props.group_by, props.x_axis_date_grouping), + [priorityChartData, props.x_axis, props.group_by, props.x_axis_date_grouping] + ); + const chart_model = props.group_by ? EChartModels.STACKED : EChartModels.BASIC; + + const bars: TBarItem[] = useMemo(() => { + if (!parsedData) return []; + let parsedBars: TBarItem[]; + const schemaKeys = Object.keys(parsedData.schema); + const baseColors = CHART_COLOR_PALETTES[0]?.[resolvedTheme === "dark" ? "dark" : "light"]; + const extendedColors = generateExtendedColors(baseColors ?? [], schemaKeys.length); + if (chart_model === EChartModels.BASIC) { + parsedBars = [ + { + key: "count", + label: "Count", + stackId: "bar-one", + fill: (payload) => generateBarColor(payload.key, { x_axis, y_axis, group_by }, baseColors, workspaceStates), + textClassName: "", + showPercentage: false, + showTopBorderRadius: () => true, + showBottomBorderRadius: () => true, + }, + ]; + } else if (chart_model === EChartModels.STACKED && parsedData.schema) { + const parsedExtremes: { + [key: string]: { + top: string | null; + bottom: string | null; + }; + } = {}; + parsedData.data.forEach((datum) => { + let top = null; + let bottom = null; + for (let i = 0; i < schemaKeys.length; i++) { + const key = schemaKeys[i]; + if (datum[key] === 0) continue; + if (!bottom) bottom = key; + top = key; + } + parsedExtremes[datum.key] = { top, bottom }; + }); + + parsedBars = schemaKeys.map((key, index) => ({ + key: key, + label: parsedData.schema[key], + stackId: "bar-one", + fill: extendedColors[index], + textClassName: "", + showPercentage: false, + showTopBorderRadius: (value, payload: TChartDatum) => parsedExtremes[payload.key].top === value, + showBottomBorderRadius: (value, payload: TChartDatum) => parsedExtremes[payload.key].bottom === value, + })); + } else { + parsedBars = []; + } + return parsedBars; + }, [chart_model, group_by, parsedData, resolvedTheme, workspaceStates, x_axis, y_axis]); + + const yAxisLabel = useMemo( + () => ANALYTICS_Y_AXIS_VALUES.find((item) => item.value === props.y_axis)?.label ?? props.y_axis, + [props.y_axis] + ); + const xAxisLabel = useMemo( + () => ANALYTICS_X_AXIS_VALUES.find((item) => item.value === props.x_axis)?.label ?? props.x_axis, + [props.x_axis] + ); + + const defaultColumns: ColumnDef[] = useMemo( + () => [ + { + accessorKey: "name", + header: () => xAxisLabel, + meta: { + export: { + key: xAxisLabel, + value: (row) => row.original.name, + label: xAxisLabel, + }, + }, + }, + { + accessorKey: "count", + header: () =>

Count

, + cell: ({ row }) =>

{row.original.count}

, + meta: { + export: { + key: "Count", + value: (row) => row.original.count, + label: "Count", + }, + }, + }, + ], + [xAxisLabel] + ); + + const columns: ColumnDef[] = useMemo( + () => + parsedData + ? Object.keys(parsedData?.schema ?? {}).map((key) => ({ + accessorKey: key, + header: () =>

{parsedData.schema[key]}

, + cell: ({ row }) =>

{row.original[key]}

, + meta: { + export: { + key, + value: (row) => row.original[key], + label: parsedData.schema[key], + }, + }, + })) + : [], + [parsedData] + ); + + return ( +

+ {priorityChartLoading ? ( + + ) : parsedData?.data && parsedData.data.length > 0 ? ( + <> + + ) => ( + + )} + /> + + ) : ( + + )} +

+ ); +}); + +export default PriorityChart; diff --git a/apps/web/core/components/analytics/work-items/root.tsx b/apps/web/core/components/analytics/work-items/root.tsx new file mode 100644 index 0000000..55fb767 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/root.tsx @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React from "react"; +import AnalyticsWrapper from "../analytics-wrapper"; +import TotalInsights from "../total-insights"; +import CreatedVsResolved from "./created-vs-resolved"; +import CustomizedInsights from "./customized-insights"; +import WorkItemsInsightTable from "./workitems-insight-table"; + +function WorkItems() { + return ( + +

+ + + + +

+ + ); +} + +export { WorkItems }; diff --git a/apps/web/core/components/analytics/work-items/utils.ts b/apps/web/core/components/analytics/work-items/utils.ts new file mode 100644 index 0000000..38535a1 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/utils.ts @@ -0,0 +1,53 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +// plane package imports +import type { ChartYAxisMetric, IState } from "@plane/types"; +import { ChartXAxisProperty } from "@plane/types"; + +interface ParamsProps { + x_axis: ChartXAxisProperty; + y_axis: ChartYAxisMetric; + group_by?: ChartXAxisProperty; +} + +export const generateBarColor = ( + value: string | null | undefined, + params: ParamsProps, + baseColors: string[], + workspaceStates?: IState[] +): string => { + if (!value) return baseColors[0]; + let color = baseColors[0]; + // Priority + if (params.x_axis === ChartXAxisProperty.PRIORITY) { + color = + value === "urgent" + ? "#ef4444" + : value === "high" + ? "#f97316" + : value === "medium" + ? "#eab308" + : value === "low" + ? "#22c55e" + : "#ced4da"; + } + + // State + if (params.x_axis === ChartXAxisProperty.STATES) { + if (workspaceStates && workspaceStates.length > 0) { + const state = workspaceStates.find((s) => s.id === value); + if (state) { + color = state.color; + } else { + const index = Math.abs(value.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)) % baseColors.length; + color = baseColors[index]; + } + } + } + + return color; +}; diff --git a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx new file mode 100644 index 0000000..60dbef7 --- /dev/null +++ b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx @@ -0,0 +1,210 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useMemo } from "react"; +import type { ColumnDef, Row, RowData } from "@tanstack/react-table"; +import { observer } from "mobx-react"; +import { useParams } from "next/navigation"; +import useSWR from "swr"; +import { ProjectsOutline, UserOutline } from "@makeplane/propel/icons"; +import { Avatar } from "@makeplane/propel/components/avatar"; +import { useTranslation } from "@plane/i18n"; +import { Logo } from "@plane/propel/emoji-icon-picker"; +// plane package imports +import type { AnalyticsTableDataMap, WorkItemInsightColumns } from "@plane/types"; +// plane web components + +import { getFileURL } from "@plane/utils"; +// hooks +import { useAnalytics } from "@/hooks/store/use-analytics"; +import { useProject } from "@/hooks/store/use-project"; +import { AnalyticsService } from "@/services/analytics.service"; +// plane web components +import { exportCSV } from "../export"; +import { InsightTable } from "../insight-table"; + +const analyticsService = new AnalyticsService(); + +declare module "@tanstack/react-table" { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + interface ColumnMeta { + export: { + key: string; + value: (row: Row) => string | number; + label?: string; + }; + } +} + +const WorkItemsInsightTable = observer(function WorkItemsInsightTable() { + // router + const params = useParams(); + const workspaceSlug = params.workspaceSlug.toString(); + const { t } = useTranslation(); + // store hooks + const { getProjectById } = useProject(); + const { selectedDuration, selectedProjects, selectedCycle, selectedModule, isPeekView, isEpic } = useAnalytics(); + const { data: workItemsData, isLoading } = useSWR( + `insights-table-work-items-${workspaceSlug}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isPeekView}-${isEpic}`, + () => + analyticsService.getAdvanceAnalyticsStats( + workspaceSlug, + "work-items", + { + // date_filter: selectedDuration, + ...(selectedProjects?.length > 0 ? { project_ids: selectedProjects.join(",") } : {}), + ...(selectedCycle ? { cycle_id: selectedCycle } : {}), + ...(selectedModule ? { module_id: selectedModule } : {}), + ...(isEpic ? { epic: true } : {}), + }, + isPeekView + ) + ); + // derived values + const columnsLabels: Record, string> = + useMemo( + () => ({ + backlog_work_items: t("workspace_projects.state.backlog"), + started_work_items: t("workspace_projects.state.started"), + un_started_work_items: t("workspace_projects.state.unstarted"), + completed_work_items: t("workspace_projects.state.completed"), + cancelled_work_items: t("workspace_projects.state.cancelled"), + project__name: t("common.project"), + display_name: t("common.assignee"), + }), + [t] + ); + const columns: ColumnDef[] = useMemo( + () => [ + !isPeekView + ? { + accessorKey: "project__name", + header: () =>

{columnsLabels["project__name"]}

, + cell: ({ row }) => { + const project = getProjectById(row.original.project_id); + return ( +

+ {project?.logo_props ? ( + + ) : ( + + )} + {project?.name} +

+ ); + }, + meta: { + export: { + key: columnsLabels["project__name"], + value: (row) => row.original.project__name?.toString() ?? "", + }, + }, + } + : { + accessorKey: "display_name", + header: () =>

{columnsLabels["display_name"]}

, + cell: ({ row }: { row: Row }) => ( +

+ {row.original.avatar_url && row.original.avatar_url !== "" ? ( + + ) : ( +

+ {row.original.display_name ? ( + row.original.display_name?.[0] + ) : ( + + )} +

+ )} + {row.original.display_name ?? t(`Unassigned`)} +

+ ), + meta: { + export: { + key: columnsLabels["display_name"], + value: (row) => row.original.display_name?.toString() ?? "", + }, + }, + }, + { + accessorKey: "backlog_work_items", + header: () =>

{columnsLabels["backlog_work_items"]}

, + cell: ({ row }) =>

{row.original.backlog_work_items}

, + meta: { + export: { + key: columnsLabels["backlog_work_items"], + value: (row) => row.original.backlog_work_items.toString(), + }, + }, + }, + { + accessorKey: "started_work_items", + header: () =>

{columnsLabels["started_work_items"]}

, + cell: ({ row }) =>

{row.original.started_work_items}

, + meta: { + export: { + key: columnsLabels["started_work_items"], + value: (row) => row.original.started_work_items.toString(), + }, + }, + }, + { + accessorKey: "un_started_work_items", + header: () =>

{columnsLabels["un_started_work_items"]}

, + cell: ({ row }) =>

{row.original.un_started_work_items}

, + meta: { + export: { + key: columnsLabels["un_started_work_items"], + value: (row) => row.original.un_started_work_items.toString(), + }, + }, + }, + { + accessorKey: "completed_work_items", + header: () =>

{columnsLabels["completed_work_items"]}

, + cell: ({ row }) =>

{row.original.completed_work_items}

, + meta: { + export: { + key: columnsLabels["completed_work_items"], + value: (row) => row.original.completed_work_items.toString(), + }, + }, + }, + { + accessorKey: "cancelled_work_items", + header: () =>

{columnsLabels["cancelled_work_items"]}

, + cell: ({ row }) =>

{row.original.cancelled_work_items}

, + meta: { + export: { + key: columnsLabels["cancelled_work_items"], + value: (row) => row.original.cancelled_work_items.toString(), + }, + }, + }, + ], + [columnsLabels, getProjectById, isPeekView, t] + ); + return ( + + analyticsType="work-items" + data={workItemsData} + isLoading={isLoading} + columns={columns} + columnsLabels={columnsLabels} + headerText={isPeekView ? t("common.assignee") : t("common.projects")} + onExport={(rows) => workItemsData && exportCSV(rows, columns, workspaceSlug)} + /> + ); +}); + +export default WorkItemsInsightTable; diff --git a/apps/web/core/components/api-token/delete-token-modal.tsx b/apps/web/core/components/api-token/delete-token-modal.tsx new file mode 100644 index 0000000..58a9339 --- /dev/null +++ b/apps/web/core/components/api-token/delete-token-modal.tsx @@ -0,0 +1,80 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useState } from "react"; +import { mutate } from "swr"; +// types +import { useTranslation } from "@plane/i18n"; +import { TOAST_TYPE, setToast } from "@plane/propel/toast"; +import { APITokenService } from "@plane/services"; +import type { IApiToken } from "@plane/types"; +// ui +import { AlertModalCore } from "@plane/ui"; +// fetch-keys +import { API_TOKENS_LIST } from "@plane/constants"; + +type Props = { + isOpen: boolean; + onClose: () => void; + tokenId: string; +}; + +const apiTokenService = new APITokenService(); + +export function DeleteApiTokenModal(props: Props) { + const { isOpen, onClose, tokenId } = props; + // states + const [deleteLoading, setDeleteLoading] = useState(false); + // router params + const { t } = useTranslation(); + + const handleClose = () => { + onClose(); + setDeleteLoading(false); + }; + + const handleDeletion = async () => { + setDeleteLoading(true); + + await apiTokenService + .destroy(tokenId) + .then(() => { + setToast({ + type: TOAST_TYPE.SUCCESS, + title: t("workspace_settings.settings.api_tokens.delete.success.title"), + message: t("workspace_settings.settings.api_tokens.delete.success.message"), + }); + + mutate( + API_TOKENS_LIST, + (prevData) => (prevData ?? []).filter((token) => token.id !== tokenId), + false + ); + + handleClose(); + setDeleteLoading(false); + }) + .catch((err) => { + setToast({ + type: TOAST_TYPE.ERROR, + title: t("workspace_settings.settings.api_tokens.delete.error.title"), + message: err?.message ?? t("workspace_settings.settings.api_tokens.delete.error.message"), + }); + setDeleteLoading(false); + }); + }; + + return ( + {t("workspace_settings.settings.api_tokens.delete.description")} } + /> + ); +} diff --git a/apps/web/core/components/api-token/empty-state.tsx b/apps/web/core/components/api-token/empty-state.tsx new file mode 100644 index 0000000..944d19e --- /dev/null +++ b/apps/web/core/components/api-token/empty-state.tsx @@ -0,0 +1,36 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import React from "react"; +// ui +import { Button } from "@plane/propel/button"; +// assets +import emptyApiTokens from "@/app/assets/empty-state/api-token.svg?url"; + +type Props = { + onClick: () => void; +}; + +export function ApiTokenEmptyState(props: Props) { + const { onClick } = props; + + return ( +

No API tokens

+ Create API tokens for safe and easy data sharing with external apps, maintaining control and security. +

+ +

+ ); +} diff --git a/apps/web/core/components/api-token/modal/create-token-modal.tsx b/apps/web/core/components/api-token/modal/create-token-modal.tsx new file mode 100644 index 0000000..f9d4872 --- /dev/null +++ b/apps/web/core/components/api-token/modal/create-token-modal.tsx @@ -0,0 +1,98 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useState } from "react"; +import { mutate } from "swr"; +// plane imports +import { TOAST_TYPE, setToast } from "@plane/propel/toast"; +import { APITokenService } from "@plane/services"; +import type { IApiToken } from "@plane/types"; +import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui"; +import { renderFormattedDate, csvDownload } from "@plane/utils"; +// constants +import { API_TOKENS_LIST } from "@plane/constants"; +// local imports +import { CreateApiTokenForm } from "./form"; +import { GeneratedTokenDetails } from "./generated-token-details"; + +type Props = { + isOpen: boolean; + onClose: () => void; +}; + +// services +const apiTokenService = new APITokenService(); + +export function CreateApiTokenModal(props: Props) { + const { isOpen, onClose } = props; + // states + const [neverExpires, setNeverExpires] = useState(false); + const [generatedToken, setGeneratedToken] = useState(null); + + const handleClose = () => { + onClose(); + + setTimeout(() => { + setNeverExpires(false); + setGeneratedToken(null); + }, 350); + }; + + const downloadSecretKey = (data: IApiToken) => { + const csvData = { + Title: data.label, + Description: data.description, + Expiry: data.expired_at ? (renderFormattedDate(data.expired_at)?.replace(",", " ") ?? "") : "Never expires", + "Secret key": data.token ?? "", + }; + + csvDownload(csvData, `secret-key-${Date.now()}`); + }; + + const handleCreateToken = async (data: Partial) => { + // make the request to generate the token + await apiTokenService + .create(data) + .then((res) => { + setGeneratedToken(res); + downloadSecretKey(res); + + mutate( + API_TOKENS_LIST, + (prevData) => { + if (!prevData) return; + + return [res, ...prevData]; + }, + false + ); + }) + .catch((err) => { + setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: err.message || err.detail, + }); + + throw err; + }); + }; + + return ( + {}} position={EModalPosition.TOP} width={EModalWidth.XXL}> + {generatedToken ? ( + + ) : ( + setNeverExpires((prevData) => !prevData)} + onSubmit={handleCreateToken} + /> + )} + + ); +} diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx new file mode 100644 index 0000000..3cd9903 --- /dev/null +++ b/apps/web/core/components/api-token/modal/form.tsx @@ -0,0 +1,279 @@ +/** + * Copyright (c) 2023-present Plane Software, Inc. and contributors + * SPDX-License-Identifier: AGPL-3.0-only + * See the LICENSE file for details. + */ + +import { useState } from "react"; +import { add } from "date-fns"; +import { Controller, useForm } from "react-hook-form"; +import { CalendarOutline } from "@makeplane/propel/icons"; +// types +import { Field } from "@makeplane/propel/components/field"; +import { Input, InputGroup } from "@makeplane/propel/components/input"; +import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area"; +import { useTranslation } from "@plane/i18n"; +import { Button } from "@plane/propel/button"; +import { TOAST_TYPE, setToast } from "@plane/propel/toast"; +import type { IApiToken } from "@plane/types"; +// ui +import { Switch } from "@makeplane/propel/components/switch"; +import { CustomSelect } from "@plane/ui"; +import { cn, renderFormattedDate, renderFormattedTime } from "@plane/utils"; +// components +import { DateDropdown } from "@/components/dropdowns/date"; +// helpers +type Props = { + handleClose: () => void; + neverExpires: boolean; + toggleNeverExpires: () => void; + onSubmit: (data: Partial) => Promise; +}; + +const EXPIRY_DATE_OPTIONS = [ + { + key: "1_week", + label: "1 week", + value: { weeks: 1 }, + }, + { + key: "1_month", + label: "1 month", + value: { months: 1 }, + }, + { + key: "3_months", + label: "3 months", + value: { months: 3 }, + }, + { + key: "1_year", + label: "1 year", + value: { years: 1 }, + }, +]; + +const defaultValues: Partial = { + label: "", + description: "", + expired_at: null, +}; + +const getExpiryDate = (val: string): Date | null | undefined => { + const today = new Date(); + const dateToAdd = EXPIRY_DATE_OPTIONS.find((option) => option.key === val)?.value; + if (dateToAdd) return add(today, dateToAdd); + return null; +}; + +const getFormattedDate = (date: Date): Date => { + const now = new Date(); + const hours = now.getHours(); + const minutes = now.getMinutes(); + const seconds = now.getSeconds(); + return add(date, { hours, minutes, seconds }); +}; + +export function CreateApiTokenForm(props: Props) { + const { handleClose, neverExpires, toggleNeverExpires, onSubmit } = props; + // states + const [customDate, setCustomDate] = useState(null); + // form + const { + control, + formState: { errors, isSubmitting }, + handleSubmit, + reset, + watch, + } = useForm({ defaultValues }); + // hooks + const { t } = useTranslation(); + + const handleFormSubmit = async (data: IApiToken) => { + // if never expires is toggled off, and the user has not selected a custom date or a predefined date, show an error + if (!neverExpires && (!data.expired_at || (data.expired_at === "custom" && !customDate))) + return setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: "Please select an expiration date.", + }); + + const payload: Partial = { + label: data.label, + description: data.description, + }; + + // if never expires is toggled on, set expired_at to null + if (neverExpires) payload.expired_at = null; + // if never expires is toggled off, and the user has selected a custom date, set expired_at to the custom date + else if (data.expired_at === "custom") { + payload.expired_at = customDate && getFormattedDate(customDate).toISOString(); + } + // if never expires is toggled off, and the user has selected a predefined date, set expired_at to the predefined date + else { + const expiryDate = getExpiryDate(data.expired_at ?? ""); + if (expiryDate) payload.expired_at = expiryDate.toISOString(); + } + + await onSubmit(payload).then(() => { + reset(defaultValues); + setCustomDate(null); + }); + }; + + const today = new Date(); + const tomorrow = add(today, { days: 1 }); + const expiredAt = watch("expired_at"); + const expiryDate = getExpiryDate(expiredAt ?? ""); + const customDateFormatted = customDate && getFormattedDate(customDate); + + return ( +

+ {t("workspace_settings.settings.api_tokens.create_token")} +

+ val.trim() !== "" || t("title_is_required"), + }} + render={({ field: { value, onChange } }) => ( + + + + + + )} + /> + {errors.label && {errors.label.message}} +

+ ( + + +

+                </TextAreaGroup>
+              </Field>
+            )}
+          />
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <Controller
+                control={control}
+                name="expired_at"
+                render={({ field: { onChange, value } }) => {
+                  const selectedOption = EXPIRY_DATE_OPTIONS.find((option) => option.key === value);
+
+                  return (
+                    <CustomSelect
+                      customButton={
+                        <div
+                          className={cn(
+                            "flex h-7 items-center gap-2 rounded-sm border-[0.5px] border-strong px-2 py-0.5",
+                            {
+                              "text-placeholder": neverExpires,
+                            }
+                          )}
+                        >
+                          <CalendarOutline className="h-3 w-3" />
+                          {value === "custom"
+                            ? "Custom date"
+                            : selectedOption
+                              ? selectedOption.label
+                              : "Set expiration date"}
+                        </div>
+                      }
+                      value={value}
+                      onChange={onChange}
+                      disabled={neverExpires}
+                    >
+                      {EXPIRY_DATE_OPTIONS.map((option) => (
+                        <CustomSelect.Option key={option.key} value={option.key}>
+                          {option.label}
+                        </CustomSelect.Option>
+                      ))}
+                      <CustomSelect.Option value="custom">Custom</CustomSelect.Option>
+                    </CustomSelect>
+                  );
+                }}
+              />
+              {expiredAt === "custom" && (
+                <div className="h-7">
+                  <DateDropdown
+                    value={customDate}
+                    onChange={(date) => setCustomDate(date)}
+                    minDate={tomorrow}
+                    icon={<CalendarOutline className="h-3 w-3" />}
+                    buttonVariant="border-with-text"
+                    placeholder="Set date"
+                    disabled={neverExpires}
+                  />
+                </div>
+              )}
+            </div>
+            {!neverExpires && (
+              <span className="text-11 text-placeholder">
+                {expiredAt === "custom"
+                  ? customDate
+                    ? `Expires ${renderFormattedDate(customDateFormatted ?? "")} at ${renderFormattedTime(customDateFormatted ?? "")}`
+                    : null
+                  : expiredAt
+                    ? `Expires ${renderFormattedDate(expiryDate ?? "")} at ${renderFormattedTime(expiryDate ?? "")}`
+                    : null}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <div className="flex cursor-pointer items-center gap-1.5" onClick={toggleNeverExpires}>
+          <div className="flex cursor-pointer items-center justify-center">
+            <Switch
+              size="sm"
+              checked={neverExpires}
+              onCheckedChange={() => {}}
+              aria-label={t("workspace_settings.settings.api_tokens.never_expires")}
+            />
+          </div>
+          <span className="text-11">{t("workspace_settings.settings.api_tokens.never_expires")}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="secondary" onClick={handleClose}>
+            {t("cancel")}
+          </Button>
+          <Button variant="primary" type="submit" loading={isSubmitting}>
+            {isSubmitting
+              ? t("workspace_settings.settings.api_tokens.generating")
+              : t("workspace_settings.settings.api_tokens.generate_token")}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/web/core/components/api-token/modal/generated-token-details.tsx b/apps/web/core/components/api-token/modal/generated-token-details.tsx
new file mode 100644
index 0000000..d5784eb
--- /dev/null
+++ b/apps/web/core/components/api-token/modal/generated-token-details.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { CopyOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IApiToken } from "@plane/types";
+// ui
+import { renderFormattedDate, renderFormattedTime, copyTextToClipboard } from "@plane/utils";
+// helpers
+// types
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// hooks
+
+type Props = {
+  handleClose: () => void;
+  tokenDetails: IApiToken;
+};
+
+export function GeneratedTokenDetails(props: Props) {
+  const { handleClose, tokenDetails } = props;
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+  const copyApiToken = (token: string) => {
+    copyTextToClipboard(token).then(() =>
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: `${t("success")}!`,
+        message: t("workspace_settings.token_copied"),
+      })
+    );
+  };
+
+  return (
+    <div className="w-full p-5">
+      <div className="w-full space-y-3 text-wrap">
+        <h3 className="text-16 leading-6 font-medium text-primary">{t("workspace_settings.key_created")}</h3>
+        <p className="text-13 text-placeholder">{t("workspace_settings.copy_key")}</p>
+      </div>
+      <button
+        type="button"
+        onClick={() => copyApiToken(tokenDetails.token ?? "")}
+        className="mt-4 flex w-full items-center justify-between truncate rounded-md border-[0.5px] border-subtle px-3 py-2 text-13 font-medium outline-none"
+      >
+        <span className="truncate pr-2">{tokenDetails.token}</span>
+        <Tooltip label="Copy secret key" disabled={isMobile}>
+          <CopyOutline className="h-4 w-4 flex-shrink-0 text-placeholder" />
+        </Tooltip>
+      </button>
+      <div className="mt-6 flex items-center justify-between">
+        <p className="text-11 text-placeholder">
+          {tokenDetails.expired_at
+            ? `Expires ${renderFormattedDate(tokenDetails.expired_at)} at ${renderFormattedTime(tokenDetails.expired_at)}`
+            : "Never expires"}
+        </p>
+        <Button variant="secondary" onClick={handleClose}>
+          {t("close")}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/api-token/token-list-item.tsx b/apps/web/core/components/api-token/token-list-item.tsx
new file mode 100644
index 0000000..9320614
--- /dev/null
+++ b/apps/web/core/components/api-token/token-list-item.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { CloseCircleOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IApiToken } from "@plane/types";
+import { renderFormattedDate, calculateTimeAgo, renderFormattedTime } from "@plane/utils";
+// components
+import { DeleteApiTokenModal } from "@/components/api-token/delete-token-modal";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  token: IApiToken;
+};
+
+export function ApiTokenListItem(props: Props) {
+  const { token } = props;
+  // states
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <>
+      <DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
+      <div className="group relative flex flex-col justify-center border-b border-subtle py-3">
+        <Tooltip label="Delete token" disabled={isMobile}>
+          <button
+            onClick={() => setDeleteModalOpen(true)}
+            className="absolute right-4 hidden place-items-center group-hover:grid"
+          >
+            <CloseCircleOutline className="h-4 w-4 text-danger-primary" />
+          </button>
+        </Tooltip>
+        <div className="flex w-4/5 items-center">
+          <h5 className="truncate text-13 font-medium">{token.label}</h5>
+          <span
+            className={`${
+              token.is_active ? "bg-success-subtle text-success-primary" : "bg-layer-1 text-placeholder"
+            } ml-2 flex h-4 max-h-fit items-center rounded-xs px-2 text-11 font-medium`}
+          >
+            {token.is_active ? "Active" : "Expired"}
+          </span>
+        </div>
+        <div className="mt-1 flex w-full flex-col justify-center">
+          {token.description.trim() !== "" && (
+            <p className="mb-1 max-w-[70%] text-13 break-words">{token.description}</p>
+          )}
+          <p className="mb-1 text-11 leading-6 text-placeholder">
+            {token.is_active
+              ? token.expired_at
+                ? `Expires ${renderFormattedDate(token.expired_at)} at ${renderFormattedTime(token.expired_at)}`
+                : "Never expires"
+              : `Expired ${calculateTimeAgo(token.expired_at)}`}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/appearance/index.ts b/apps/web/core/components/appearance/index.ts
new file mode 100644
index 0000000..895fab0
--- /dev/null
+++ b/apps/web/core/components/appearance/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./theme-switcher";
diff --git a/apps/web/core/components/appearance/theme-switcher.tsx b/apps/web/core/components/appearance/theme-switcher.tsx
new file mode 100644
index 0000000..38cecb6
--- /dev/null
+++ b/apps/web/core/components/appearance/theme-switcher.tsx
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+// plane imports
+import type { I_THEME_OPTION } from "@plane/constants";
+import { THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { setPromiseToast } from "@plane/propel/toast";
+import { applyCustomTheme } from "@plane/utils";
+// components
+import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
+import { ThemeSwitch } from "@/components/core/theme/theme-switch";
+import { SettingsControlItem } from "@/components/settings/control-item";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+
+export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
+  option: {
+    id: string;
+    title: string;
+    description: string;
+  };
+}) {
+  // store hooks
+  const { data: userProfile, updateUserTheme } = useUserProfile();
+  // theme
+  const { setTheme } = useTheme();
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const currentTheme = useMemo(() => {
+    // oxlint-disable-next-line no-shadow
+    const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile?.theme?.theme);
+    return userThemeOption || null;
+  }, [userProfile?.theme?.theme]);
+
+  const handleThemeChange = useCallback(
+    async (themeOption: I_THEME_OPTION) => {
+      try {
+        setTheme(themeOption.value);
+
+        // If switching to custom theme and user has saved custom colors, apply them immediately
+        if (
+          themeOption.value === "custom" &&
+          userProfile?.theme?.primary &&
+          userProfile?.theme?.background &&
+          userProfile?.theme?.darkPalette !== undefined
+        ) {
+          applyCustomTheme(
+            userProfile.theme.primary,
+            userProfile.theme.background,
+            userProfile.theme.darkPalette ? "dark" : "light"
+          );
+        }
+
+        const updatePromise = updateUserTheme({ theme: themeOption.value });
+        setPromiseToast(updatePromise, {
+          loading: "Updating theme...",
+          success: {
+            title: "Theme updated",
+            message: () => "Reloading to apply changes...",
+          },
+          error: {
+            title: "Error!",
+            message: () => "Failed to update theme. Please try again.",
+          },
+        });
+        // Wait for the promise to resolve, then reload after showing toast
+        await updatePromise;
+        window.location.reload();
+      } catch (error) {
+        console.error("Error updating theme:", error);
+      }
+    },
+    [setTheme, updateUserTheme, userProfile]
+  );
+
+  if (!userProfile) return null;
+
+  return (
+    <>
+      <SettingsControlItem
+        title={t(props.option.title)}
+        description={t(props.option.description)}
+        control={
+          <ThemeSwitch
+            value={currentTheme}
+            onChange={(themeOption) => {
+              void handleThemeChange(themeOption);
+            }}
+          />
+        }
+      />
+      {userProfile.theme?.theme === "custom" && <CustomThemeSelector />}
+    </>
+  );
+});
diff --git a/apps/web/core/components/archives/archive-tabs-list.tsx b/apps/web/core/components/archives/archive-tabs-list.tsx
new file mode 100644
index 0000000..ea21842
--- /dev/null
+++ b/apps/web/core/components/archives/archive-tabs-list.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+// types
+import type { IProject } from "@plane/types";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+const ARCHIVES_TAB_LIST: {
+  key: string;
+  label: string;
+  shouldRender: (projectDetails: IProject) => boolean;
+}[] = [
+  {
+    key: "issues",
+    label: "Work items",
+    shouldRender: () => true,
+  },
+  {
+    key: "cycles",
+    label: "Cycles",
+    shouldRender: (projectDetails) => projectDetails.cycle_view,
+  },
+  {
+    key: "modules",
+    label: "Modules",
+    shouldRender: (projectDetails) => projectDetails.module_view,
+  },
+];
+
+export const ArchiveTabsList = observer(function ArchiveTabsList() {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  const pathname = usePathname();
+  // store hooks
+  const { getProjectById } = useProject();
+
+  // derived values
+  if (!projectId) return null;
+  const projectDetails = getProjectById(projectId?.toString());
+  if (!projectDetails) return null;
+
+  return (
+    <>
+      {ARCHIVES_TAB_LIST.map(
+        (tab) =>
+          tab.shouldRender(projectDetails) && (
+            <Link key={tab.key} href={`/${workspaceSlug}/projects/${projectId}/archives/${tab.key}`}>
+              <span
+                className={`flex min-w-min flex-shrink-0 border-b-2 px-4 py-4 text-13 font-medium whitespace-nowrap outline-none ${
+                  pathname.includes(tab.key)
+                    ? "border-accent-strong text-accent-primary"
+                    : "border-transparent text-tertiary hover:border-subtle hover:text-placeholder"
+                }`}
+              >
+                {tab.label}
+              </span>
+            </Link>
+          )
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/archives/index.ts b/apps/web/core/components/archives/index.ts
new file mode 100644
index 0000000..db04e24
--- /dev/null
+++ b/apps/web/core/components/archives/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./archive-tabs-list";
diff --git a/apps/web/core/components/auth-screens/auth-base.tsx b/apps/web/core/components/auth-screens/auth-base.tsx
new file mode 100644
index 0000000..9d7af0d
--- /dev/null
+++ b/apps/web/core/components/auth-screens/auth-base.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { AuthRoot } from "@/components/account/auth-forms/auth-root";
+import type { EAuthModes } from "@/helpers/authentication.helper";
+import { AuthFooter } from "./footer";
+import { AuthHeader } from "./header";
+
+type AuthBaseProps = {
+  authType: EAuthModes;
+};
+
+export function AuthBase({ authType }: AuthBaseProps) {
+  return (
+    <div className="relative z-10 flex h-screen w-screen flex-col items-center overflow-hidden overflow-y-auto px-8 pt-6 pb-10">
+      <AuthHeader type={authType} />
+      <AuthRoot authMode={authType} />
+      <AuthFooter />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/auth-screens/footer.tsx b/apps/web/core/components/auth-screens/footer.tsx
new file mode 100644
index 0000000..7ed0b4e
--- /dev/null
+++ b/apps/web/core/components/auth-screens/footer.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { AccentureLogo, DolbyLogo, SonyLogo, ZerodhaLogo } from "@plane/propel/icons";
+
+const BRAND_LOGOS: {
+  id: string;
+  icon: React.ReactNode;
+}[] = [
+  {
+    id: "zerodha",
+    icon: <ZerodhaLogo className="h-7 w-24 text-[#387ED1]" />,
+  },
+  {
+    id: "sony",
+    icon: <SonyLogo className="h-7 w-16 dark:text-on-color" />,
+  },
+  {
+    id: "dolby",
+    icon: <DolbyLogo className="h-7 w-16 dark:text-on-color" />,
+  },
+  {
+    id: "accenture",
+    icon: <AccentureLogo className="h-7 w-24 dark:text-on-color" />,
+  },
+];
+
+export function AuthFooter() {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <span className="text-13 whitespace-nowrap text-tertiary">Join 10,000+ teams building with Plane</span>
+      <div className="flex w-full flex-wrap items-center justify-center gap-x-10 gap-y-4">
+        {BRAND_LOGOS.map((brand) => (
+          <div className="flex h-7 flex-1 items-center justify-center" key={brand.id}>
+            {brand.icon}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/auth-screens/header.tsx b/apps/web/core/components/auth-screens/header.tsx
new file mode 100644
index 0000000..2c6da9b
--- /dev/null
+++ b/apps/web/core/components/auth-screens/header.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useTranslation } from "@plane/i18n";
+import { PlaneLockup } from "@plane/propel/icons";
+import { PageHead } from "@/components/core/page-title";
+import { EAuthModes } from "@/helpers/authentication.helper";
+import { useInstance } from "@/hooks/store/use-instance";
+
+const authContentMap = {
+  [EAuthModes.SIGN_IN]: {
+    pageTitle: "Sign up",
+    text: "auth.common.new_to_plane",
+    linkText: "Sign up",
+    linkHref: "/sign-up",
+  },
+  [EAuthModes.SIGN_UP]: {
+    pageTitle: "Sign in",
+    text: "auth.common.already_have_an_account",
+    linkText: "Sign in",
+    linkHref: "/sign-in",
+  },
+};
+
+type AuthHeaderProps = {
+  type: EAuthModes;
+};
+
+export const AuthHeader = observer(function AuthHeader({ type }: AuthHeaderProps) {
+  const { t } = useTranslation();
+  // store
+  const { config } = useInstance();
+  // derived values
+  const enableSignUpConfig = config?.enable_signup ?? false;
+
+  return (
+    <AuthHeaderBase
+      pageTitle={t(authContentMap[type].pageTitle)}
+      additionalAction={
+        enableSignUpConfig && (
+          <div className="flex flex-col items-end text-center text-13 font-medium text-tertiary sm:flex-row sm:items-center sm:gap-2">
+            <span className="text-body-sm-regular text-tertiary">{t(authContentMap[type].text)}</span>
+            <Link
+              href={authContentMap[type].linkHref}
+              className="text-body-sm-semibold text-accent-primary hover:underline"
+            >
+              {t(authContentMap[type].linkText)}
+            </Link>
+          </div>
+        )
+      }
+    />
+  );
+});
+
+type TAuthHeaderBase = {
+  pageTitle: string;
+  additionalAction?: React.ReactNode;
+};
+
+export function AuthHeaderBase(props: TAuthHeaderBase) {
+  const { pageTitle, additionalAction } = props;
+  return (
+    <>
+      <PageHead title={pageTitle + " - Plane"} />
+      <div className="sticky top-0 flex w-full flex-shrink-0 items-center justify-between gap-6">
+        <Link href="/">
+          <PlaneLockup height={20} width={95} className="text-primary" />
+        </Link>
+        {additionalAction}
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/auth-screens/not-authorized-view.tsx b/apps/web/core/components/auth-screens/not-authorized-view.tsx
new file mode 100644
index 0000000..ceb7fae
--- /dev/null
+++ b/apps/web/core/components/auth-screens/not-authorized-view.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// assets
+import { cn } from "@plane/utils";
+import ProjectNotAuthorizedImg from "@/app/assets/auth/project-not-authorized.svg?url";
+import Unauthorized from "@/app/assets/auth/unauthorized.svg?url";
+import WorkspaceNotAuthorizedImg from "@/app/assets/auth/workspace-not-authorized.svg?url";
+// layouts
+import DefaultLayout from "@/layouts/default-layout";
+
+type Props = {
+  actionButton?: React.ReactNode;
+  section?: "settings" | "general";
+  isProjectView?: boolean;
+  className?: string;
+};
+
+export const NotAuthorizedView = observer(function NotAuthorizedView(props: Props) {
+  const { actionButton, section = "general", isProjectView = false, className } = props;
+
+  // assets
+  const settingAsset = isProjectView ? ProjectNotAuthorizedImg : WorkspaceNotAuthorizedImg;
+  const asset = section === "settings" ? settingAsset : Unauthorized;
+
+  return (
+    <DefaultLayout className={cn("bg-surface-1", className)}>
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 text-center">
+        <div className="h-44 w-72">
+          <img src={asset} className="h-[176px] w-[288px] object-contain" alt="ProjectSettingImg" />
+        </div>
+        <h1 className="text-18 font-medium text-primary">Oops! You are not authorized to view this page</h1>
+        {actionButton}
+      </div>
+    </DefaultLayout>
+  );
+});
diff --git a/apps/web/core/components/auth-screens/project/project-access-restriction.tsx b/apps/web/core/components/auth-screens/project/project-access-restriction.tsx
new file mode 100644
index 0000000..9110f88
--- /dev/null
+++ b/apps/web/core/components/auth-screens/project/project-access-restriction.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+
+type TProps = {
+  isWorkspaceAdmin: boolean;
+  handleJoinProject: () => void;
+  isJoinButtonDisabled: boolean;
+  errorStatusCode: number | undefined;
+};
+
+export const ProjectAccessRestriction = observer(function ProjectAccessRestriction(props: TProps) {
+  const { isWorkspaceAdmin, handleJoinProject, isJoinButtonDisabled, errorStatusCode } = props;
+  // plane hooks
+  const { t } = useTranslation();
+
+  // Show join project screen if:
+  // - User lacks project membership (409 Conflict)
+  // - User lacks permission to access the private project (403 Forbidden) but is a workspace admin (can join any project)
+  if (errorStatusCode === 409 || (errorStatusCode === 403 && isWorkspaceAdmin))
+    return (
+      <div className="grid h-full w-full place-items-center bg-surface-1">
+        <EmptyStateDetailed
+          title={t("project_empty_state.no_access.title")}
+          description={t("project_empty_state.no_access.join_description")}
+          assetKey="no-access"
+          assetClassName="size-40"
+          actions={[
+            {
+              label: isJoinButtonDisabled
+                ? t("project_empty_state.no_access.cta_loading")
+                : t("project_empty_state.no_access.cta_primary"),
+              onClick: handleJoinProject,
+              disabled: isJoinButtonDisabled,
+            },
+          ]}
+        />
+      </div>
+    );
+
+  // Show no access screen if:
+  // - User lacks permission to access the private project (403 Forbidden)
+  if (errorStatusCode === 403) {
+    return (
+      <div className="grid h-full w-full place-items-center bg-surface-1">
+        <EmptyStateDetailed
+          title={t("project_empty_state.no_access.title")}
+          description={t("project_empty_state.no_access.restricted_description")}
+          assetKey="no-access"
+          assetClassName="size-40"
+        />
+      </div>
+    );
+  }
+
+  // Show empty state screen if:
+  // - Project not found (404 Not Found)
+  // - Any other error status code
+  return (
+    <div className="grid h-full w-full place-items-center bg-surface-1">
+      <EmptyStateDetailed
+        title={t("project_empty_state.invalid_project.title")}
+        description={t("project_empty_state.invalid_project.description")}
+        assetKey="project"
+        assetClassName="size-40"
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/auth-screens/workspace/not-a-member.tsx b/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
new file mode 100644
index 0000000..b386030
--- /dev/null
+++ b/apps/web/core/components/auth-screens/workspace/not-a-member.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+// ui
+import { Button } from "@plane/propel/button";
+// layouts
+import DefaultLayout from "@/layouts/default-layout";
+
+export function NotAWorkspaceMember() {
+  return (
+    <DefaultLayout>
+      <div className="grid h-full place-items-center p-4">
+        <div className="space-y-8 text-center">
+          <div className="space-y-2">
+            <h3 className="text-16 font-semibold">Not Authorized!</h3>
+            <p className="mx-auto w-1/2 text-13 text-secondary">
+              You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or
+              check your pending invitations.
+            </p>
+          </div>
+          <div className="flex items-center justify-center gap-2">
+            <Link href="/invitations">
+              <span>
+                <Button variant="secondary">Check pending invites</Button>
+              </span>
+            </Link>
+            <Link href="/create-workspace">
+              <span>
+                <Button variant="primary">Create new workspace</Button>
+              </span>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+}
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx
new file mode 100644
index 0000000..cb0ee84
--- /dev/null
+++ b/apps/web/core/components/automation/auto-archive-automation.tsx
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { RestoreOutline } from "@makeplane/propel/icons";
+// plane imports
+import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IProject } from "@plane/types";
+import { Switch } from "@makeplane/propel/components/switch";
+import { CustomSelect, Loader } from "@plane/ui";
+// component
+import { SelectMonthModal } from "@/components/automation";
+import { SettingsControlItem } from "@/components/settings/control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+const initialValues: Partial<IProject> = { archive_in: 1 };
+
+export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(props: Props) {
+  const { handleChange } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // states
+  const [monthModal, setmonthModal] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+
+  const { currentProjectDetails } = useProject();
+
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug?.toString(),
+    currentProjectDetails?.id
+  );
+
+  const autoArchiveStatus = useMemo(() => {
+    if (currentProjectDetails?.archive_in === undefined) return false;
+    return currentProjectDetails.archive_in !== 0;
+  }, [currentProjectDetails]);
+
+  const handleToggleArchive = async () => {
+    if (currentProjectDetails?.archive_in === 0) {
+      await handleChange({ archive_in: 1 });
+    } else {
+      await handleChange({ archive_in: 0 });
+    }
+  };
+
+  return (
+    <>
+      <SelectMonthModal
+        type="auto-archive"
+        initialValues={initialValues}
+        isOpen={monthModal}
+        handleClose={() => setmonthModal(false)}
+        handleChange={handleChange}
+      />
+      <div className="flex flex-col gap-4 border-b border-subtle py-2">
+        <div className="flex items-center gap-3">
+          <div className="grid size-10 shrink-0 place-items-center rounded-sm bg-layer-2">
+            <RestoreOutline className="size-4 shrink-0 text-primary" />
+          </div>
+          <SettingsControlItem
+            title={t("project_settings.automations.auto-archive.title")}
+            description={t("project_settings.automations.auto-archive.description")}
+            control={
+              <Switch
+                size="sm"
+                checked={autoArchiveStatus}
+                onCheckedChange={handleToggleArchive}
+                disabled={!isAdmin}
+                aria-label={t("project_settings.automations.auto-archive.title")}
+              />
+            }
+          />
+        </div>
+        {currentProjectDetails ? (
+          autoArchiveStatus && (
+            <div className="ml-13">
+              <div className="flex w-full items-center justify-between gap-2 rounded-sm border border-subtle bg-surface-2 px-5 py-4">
+                <div className="w-1/2 text-13 font-medium">
+                  {t("project_settings.automations.auto-archive.duration")}
+                </div>
+                <div className="w-1/2">
+                  <CustomSelect
+                    value={currentProjectDetails?.archive_in}
+                    label={`${currentProjectDetails?.archive_in} ${
+                      currentProjectDetails?.archive_in === 1 ? "month" : "months"
+                    }`}
+                    onChange={(val: number) => void handleChange({ archive_in: val })}
+                    input
+                    disabled={!isAdmin}
+                  >
+                    <>
+                      {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                        <CustomSelect.Option key={month.i18n_label} value={month.value}>
+                          <span className="text-13">{t(month.i18n_label, { months: month.value })}</span>
+                        </CustomSelect.Option>
+                      ))}
+
+                      <button
+                        type="button"
+                        className="flex w-full items-center rounded-sm px-1 py-1.5 text-13 text-secondary select-none hover:bg-layer-1"
+                        onClick={() => setmonthModal(true)}
+                      >
+                        {t("common.customize_time_range")}
+                      </button>
+                    </>
+                  </CustomSelect>
+                </div>
+              </div>
+            </div>
+          )
+        ) : (
+          <Loader className="ml-13">
+            <Loader.Item height="50px" />
+          </Loader>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
new file mode 100644
index 0000000..bf8c530
--- /dev/null
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { AutoCloseOutline, StateOutline } from "@makeplane/propel/icons";
+// plane imports
+import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel, EIconSize } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon } from "@plane/propel/icons";
+import type { IProject } from "@plane/types";
+import { Switch } from "@makeplane/propel/components/switch";
+import { CustomSelect, CustomSearchSelect, Loader } from "@plane/ui";
+import { SelectMonthModal } from "@/components/automation";
+import { SettingsControlItem } from "@/components/settings/control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+export const AutoCloseAutomation = observer(function AutoCloseAutomation(props: Props) {
+  const { handleChange } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // states
+  const [monthModal, setmonthModal] = useState(false);
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  const { projectStates } = useProjectState();
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+
+  // const stateGroups = projectStateStore.groupedProjectStates ?? undefined;
+
+  const options = projectStates
+    ?.filter((state) => state.group === "cancelled")
+    .map((state) => ({
+      value: state.id,
+      query: state.name,
+      content: (
+        <div className="flex items-center gap-2">
+          <StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.LG} />
+          {state.name}
+        </div>
+      ),
+    }));
+
+  const multipleOptions = (options ?? []).length > 1;
+
+  const defaultState = projectStates?.find((s) => s.group === "cancelled")?.id || null;
+
+  const selectedOption = projectStates?.find((s) => s.id === (currentProjectDetails?.default_state ?? defaultState));
+  const currentDefaultState = projectStates?.find((s) => s.id === defaultState);
+
+  const initialValues: Partial<IProject> = {
+    close_in: 1,
+    default_state: defaultState,
+  };
+
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug?.toString(),
+    currentProjectDetails?.id
+  );
+
+  const autoCloseStatus = useMemo(() => {
+    if (currentProjectDetails?.close_in === undefined) return false;
+    return currentProjectDetails.close_in !== 0;
+  }, [currentProjectDetails]);
+
+  return (
+    <>
+      <SelectMonthModal
+        type="auto-close"
+        initialValues={initialValues}
+        isOpen={monthModal}
+        handleClose={() => setmonthModal(false)}
+        handleChange={handleChange}
+      />
+      <div className="flex flex-col gap-4 py-2">
+        <div className="flex items-center gap-3">
+          <div className="grid size-10 shrink-0 place-items-center rounded-sm bg-layer-2">
+            <AutoCloseOutline className="size-4 shrink-0 text-danger-primary" />
+          </div>
+          <SettingsControlItem
+            title={t("project_settings.automations.auto-close.title")}
+            description={t("project_settings.automations.auto-close.description")}
+            control={
+              <Switch
+                size="sm"
+                checked={autoCloseStatus}
+                onCheckedChange={() => {
+                  if (currentProjectDetails?.close_in === 0) {
+                    void handleChange({ close_in: 1, default_state: defaultState });
+                  } else {
+                    void handleChange({ close_in: 0, default_state: null });
+                  }
+                }}
+                disabled={!isAdmin}
+                aria-label={t("project_settings.automations.auto-close.title")}
+              />
+            }
+          />
+        </div>
+
+        {currentProjectDetails ? (
+          autoCloseStatus && (
+            <div className="ml-13">
+              <div className="flex flex-col rounded-sm border border-subtle bg-surface-2">
+                <div className="flex w-full items-center justify-between gap-2 px-5 py-4">
+                  <div className="w-1/2 text-13 font-medium">
+                    {t("project_settings.automations.auto-close.duration")}
+                  </div>
+                  <div className="w-1/2">
+                    <CustomSelect
+                      value={currentProjectDetails?.close_in}
+                      label={`${currentProjectDetails?.close_in} ${
+                        currentProjectDetails?.close_in === 1 ? "month" : "months"
+                      }`}
+                      onChange={(val: number) => void handleChange({ close_in: val })}
+                      input
+                      disabled={!isAdmin}
+                    >
+                      <>
+                        {PROJECT_AUTOMATION_MONTHS.map((month) => (
+                          <CustomSelect.Option key={month.i18n_label} value={month.value}>
+                            {t(month.i18n_label, { months: month.value })}
+                          </CustomSelect.Option>
+                        ))}
+                        <button
+                          type="button"
+                          className="flex w-full items-center rounded-sm px-1 py-1.5 text-secondary select-none hover:bg-layer-1"
+                          onClick={() => setmonthModal(true)}
+                        >
+                          {t("common.customize_time_range")}
+                        </button>
+                      </>
+                    </CustomSelect>
+                  </div>
+                </div>
+
+                <div className="ppy flex w-full items-center justify-between gap-2 px-5 py-4 sm:py-10">
+                  <div className="w-1/2 text-13 font-medium">
+                    {t("project_settings.automations.auto-close.auto_close_status")}
+                  </div>
+                  <div className="w-1/2">
+                    <CustomSearchSelect
+                      value={currentProjectDetails?.default_state ?? defaultState}
+                      label={
+                        <div className="flex items-center gap-2">
+                          {selectedOption ? (
+                            <StateGroupIcon
+                              stateGroup={selectedOption.group}
+                              color={selectedOption.color}
+                              size={EIconSize.LG}
+                            />
+                          ) : currentDefaultState ? (
+                            <StateGroupIcon
+                              stateGroup={currentDefaultState.group}
+                              color={currentDefaultState.color}
+                              size={EIconSize.LG}
+                            />
+                          ) : (
+                            <StateOutline className="h-3.5 w-3.5 text-secondary" />
+                          )}
+                          {selectedOption?.name
+                            ? selectedOption.name
+                            : (currentDefaultState?.name ?? <span className="text-secondary">{t("state")}</span>)}
+                        </div>
+                      }
+                      onChange={(val: string) => void handleChange({ default_state: val })}
+                      options={options}
+                      disabled={!multipleOptions}
+                      input
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )
+        ) : (
+          <Loader className="ml-13">
+            <Loader.Item height="50px" />
+          </Loader>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/automation/index.ts b/apps/web/core/components/automation/index.ts
new file mode 100644
index 0000000..9f126cd
--- /dev/null
+++ b/apps/web/core/components/automation/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./auto-close-automation";
+export * from "./auto-archive-automation";
+export * from "./select-month-modal";
diff --git a/apps/web/core/components/automation/select-month-modal.tsx b/apps/web/core/components/automation/select-month-modal.tsx
new file mode 100644
index 0000000..b557934
--- /dev/null
+++ b/apps/web/core/components/automation/select-month-modal.tsx
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useParams } from "next/navigation";
+// react-hook-form
+import { Controller, useForm } from "react-hook-form";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { Button } from "@plane/propel/button";
+import type { IProject } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// types
+type Props = {
+  isOpen: boolean;
+  type: "auto-close" | "auto-archive";
+  initialValues: Partial<IProject>;
+  handleClose: () => void;
+  handleChange: (formData: Partial<IProject>) => Promise<void>;
+};
+
+export function SelectMonthModal({ type, initialValues, isOpen, handleClose, handleChange }: Props) {
+  const { workspaceSlug, projectId } = useParams();
+
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<IProject>({
+    defaultValues: initialValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+    reset(initialValues);
+  };
+
+  const onSubmit = (formData: Partial<IProject>) => {
+    if (!workspaceSlug && !projectId) return;
+    handleChange(formData);
+    onClose();
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div>
+          <h3 className="text-16 leading-6 font-medium text-primary">Customize time range</h3>
+          <div className="mt-8 flex items-center gap-2">
+            <div className="flex w-full flex-col justify-center gap-1">
+              {type === "auto-close" ? (
+                <>
+                  <Controller
+                    control={control}
+                    name="close_in"
+                    rules={{
+                      required: "Select a month between 1 and 12.",
+                      min: 1,
+                      max: 12,
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <div className="relative flex w-full flex-col justify-center gap-1">
+                        <Field name="close_in" invalid={Boolean(errors.close_in)}>
+                          <InputGroup size="2xl">
+                            <Input
+                              size="2xl"
+                              id="close_in"
+                              name="close_in"
+                              type="number"
+                              value={value?.toString()}
+                              onChange={onChange}
+                              ref={ref}
+                              placeholder="Enter Months"
+                              min={1}
+                              max={12}
+                            />
+                          </InputGroup>
+                        </Field>
+                        <span className="absolute top-2.5 right-8 text-13 text-secondary">Months</span>
+                      </div>
+                    )}
+                  />
+
+                  {errors.close_in && (
+                    <span className="px-1 text-13 text-danger-primary">Select a month between 1 and 12.</span>
+                  )}
+                </>
+              ) : (
+                <>
+                  <Controller
+                    control={control}
+                    name="archive_in"
+                    rules={{
+                      required: "Select a month between 1 and 12.",
+                      min: 1,
+                      max: 12,
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <div className="relative flex w-full flex-col justify-center gap-1">
+                        <Field name="archive_in" invalid={Boolean(errors.archive_in)}>
+                          <InputGroup size="2xl">
+                            <Input
+                              size="2xl"
+                              id="archive_in"
+                              name="archive_in"
+                              type="number"
+                              value={value?.toString()}
+                              onChange={onChange}
+                              ref={ref}
+                              placeholder="Enter Months"
+                              min={1}
+                              max={12}
+                            />
+                          </InputGroup>
+                        </Field>
+                        <span className="absolute top-2.5 right-8 text-13 text-secondary">Months</span>
+                      </div>
+                    )}
+                  />
+                  {errors.archive_in && (
+                    <span className="px-1 text-13 text-danger-primary">Select a month between 1 and 12.</span>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="mt-5 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+            {isSubmitting ? "Submitting..." : "Submit"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/base-layouts/constants.ts b/apps/web/core/components/base-layouts/constants.ts
new file mode 100644
index 0000000..0ee8c59
--- /dev/null
+++ b/apps/web/core/components/base-layouts/constants.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { BoardOutline, ListOutline, TimelineOutline } from "@makeplane/propel/icons";
+import type { IBaseLayoutConfig } from "@plane/types";
+
+export const BASE_LAYOUTS: IBaseLayoutConfig[] = [
+  {
+    key: "list",
+    icon: ListOutline,
+    label: "List Layout",
+  },
+  {
+    key: "kanban",
+    icon: BoardOutline,
+    label: "Board Layout",
+  },
+  {
+    key: "gantt",
+    icon: TimelineOutline,
+    label: "Gantt Layout",
+  },
+];
diff --git a/apps/web/core/components/base-layouts/gantt/index.ts b/apps/web/core/components/base-layouts/gantt/index.ts
new file mode 100644
index 0000000..d7b4e14
--- /dev/null
+++ b/apps/web/core/components/base-layouts/gantt/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { BaseGanttLayout } from "./layout";
+export { BaseGanttSidebar } from "./sidebar";
diff --git a/apps/web/core/components/base-layouts/gantt/layout.tsx b/apps/web/core/components/base-layouts/gantt/layout.tsx
new file mode 100644
index 0000000..17fa2fc
--- /dev/null
+++ b/apps/web/core/components/base-layouts/gantt/layout.tsx
@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { GANTT_TIMELINE_TYPE } from "@plane/types";
+import type {
+  IBaseLayoutsGanttItem,
+  IBaseLayoutsGanttProps,
+  TGanttBlockUpdateData,
+  IBlockUpdateDependencyData,
+} from "@plane/types";
+import { cn } from "@plane/utils";
+import { TimeLineTypeContext } from "@/components/gantt-chart/contexts";
+import { GanttChartRoot } from "@/components/gantt-chart/root";
+import { BaseGanttSidebar } from "./sidebar";
+
+export const BaseGanttLayout = observer(function BaseGanttLayout<T extends IBaseLayoutsGanttItem>(
+  props: IBaseLayoutsGanttProps<T>
+) {
+  const {
+    items,
+    groupedItemIds,
+    groups,
+    renderBlock,
+    renderSidebar,
+    onBlockUpdate,
+    onDateUpdate,
+    enableBlockLeftResize = false,
+    enableBlockRightResize = false,
+    enableBlockMove = false,
+    enableReorder = false,
+    enableAddBlock = false,
+    enableSelection = false,
+    enableDependency = false,
+    showAllBlocks = false,
+    showToday = true,
+    border = false,
+    title = "Items",
+    loaderTitle = "items",
+    quickAdd,
+    loadMoreItems,
+    isLoading: _isLoading,
+    className,
+    timelineType: timelineTypeKey = GANTT_TIMELINE_TYPE.ISSUE,
+  } = props;
+
+  // Flatten all grouped item IDs into a single array for gantt
+  // Gantt doesn't typically show groups, it shows all items on a timeline
+  const blockIds = useMemo(() => {
+    const allIds: string[] = [];
+    groups.forEach((group) => {
+      const itemIds = groupedItemIds[group.id] || [];
+      allIds.push(...itemIds);
+    });
+    return allIds;
+  }, [groups, groupedItemIds]);
+
+  // Block update handler - transforms base layout item updates to gantt block updates
+  const handleBlockUpdate = useCallback(
+    (block: T, payload: TGanttBlockUpdateData) => {
+      if (onBlockUpdate) {
+        onBlockUpdate(block, payload);
+      }
+    },
+    [onBlockUpdate]
+  );
+
+  // Block renderer - wraps the user's render function
+  const blockToRender = useCallback((item: T) => renderBlock(item), [renderBlock]);
+
+  // Sidebar renderer - uses custom or default
+  const sidebarToRender = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (sidebarProps: any) => {
+      if (renderSidebar) {
+        // If custom sidebar renderer provided, use it
+        return (
+          <BaseGanttSidebar {...sidebarProps} items={items} renderItem={renderSidebar} loadMoreItems={loadMoreItems} />
+        );
+      }
+      // Otherwise use default sidebar
+      return (
+        <BaseGanttSidebar {...sidebarProps} items={items} renderItem={renderBlock} loadMoreItems={loadMoreItems} />
+      );
+    },
+    [renderSidebar, renderBlock, items, loadMoreItems]
+  );
+
+  const timelineType = GANTT_TIMELINE_TYPE[timelineTypeKey];
+
+  // Date update handler - transforms IBlockUpdateDependencyData to TGanttDateUpdate
+  const handleDateUpdate = useCallback(
+    async (updates: IBlockUpdateDependencyData[]) => {
+      if (onDateUpdate) {
+        // Transform IBlockUpdateDependencyData[] to TGanttDateUpdate[]
+        const transformedUpdates = updates.map((update) => ({
+          id: update.id,
+          start_date: update.start_date,
+          target_date: update.target_date,
+        }));
+        await onDateUpdate(transformedUpdates);
+      }
+    },
+    [onDateUpdate]
+  );
+
+  // Load more handler - wraps loadMoreItems to match expected signature
+  const handleLoadMore = useCallback(() => {
+    if (loadMoreItems) {
+      loadMoreItems(""); // Pass empty string as default group ID
+    }
+  }, [loadMoreItems]);
+
+  return (
+    <TimeLineTypeContext.Provider value={timelineType}>
+      <div className={cn("h-full w-full", className)}>
+        <GanttChartRoot
+          border={border}
+          title={title}
+          loaderTitle={loaderTitle}
+          blockIds={blockIds}
+          blockUpdateHandler={handleBlockUpdate}
+          blockToRender={blockToRender}
+          sidebarToRender={sidebarToRender}
+          enableBlockLeftResize={enableBlockLeftResize}
+          enableBlockRightResize={enableBlockRightResize}
+          enableBlockMove={enableBlockMove}
+          enableReorder={enableReorder}
+          enableAddBlock={enableAddBlock}
+          enableSelection={enableSelection}
+          enableDependency={enableDependency}
+          showAllBlocks={showAllBlocks}
+          showToday={showToday}
+          quickAdd={quickAdd}
+          updateBlockDates={onDateUpdate ? handleDateUpdate : undefined}
+          loadMoreBlocks={loadMoreItems ? handleLoadMore : undefined}
+          canLoadMoreBlocks={!!loadMoreItems} // Enable pagination if loadMoreItems is provided
+        />
+      </div>
+    </TimeLineTypeContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/base-layouts/gantt/sidebar.tsx b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
new file mode 100644
index 0000000..85f1e5b
--- /dev/null
+++ b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+import type { IBaseLayoutsBaseItem, IBlockUpdateData } from "@plane/types";
+import { Loader, Row } from "@plane/ui";
+import { cn } from "@plane/utils";
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
+import { GanttDnDHOC } from "@/components/gantt-chart/sidebar/gantt-dnd-HOC";
+import { handleOrderChange } from "@/components/gantt-chart/sidebar/utils";
+import { GanttLayoutListItemLoader } from "@/components/ui/loader/layouts/gantt-layout-loader";
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+
+type Props<T extends IBaseLayoutsBaseItem> = {
+  blockUpdateHandler: (block: T, payload: IBlockUpdateData) => void;
+  canLoadMoreBlocks?: boolean;
+  loadMoreItems?: (groupId: string) => void;
+  ganttContainerRef: RefObject<HTMLDivElement | null>;
+  blockIds: string[];
+  enableReorder: boolean;
+  showAllBlocks?: boolean;
+  items: Record<string, T>;
+  renderItem: (item: T) => React.ReactNode;
+};
+
+export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBaseLayoutsBaseItem>(props: Props<T>) {
+  const {
+    blockUpdateHandler,
+    blockIds,
+    enableReorder,
+    loadMoreItems,
+    canLoadMoreBlocks,
+    ganttContainerRef,
+    showAllBlocks = false,
+    items,
+    renderItem,
+  } = props;
+
+  const { getBlockById, updateActiveBlockId, isBlockActive, getNumberOfDaysFromPosition } = useTimeLineChartStore();
+
+  const [intersectionElement, setIntersectionElement] = useState<HTMLDivElement | null>(null);
+
+  const isPaginating = false; // TODO: Add proper pagination state
+
+  useIntersectionObserver(
+    ganttContainerRef,
+    isPaginating ? null : intersectionElement,
+    loadMoreItems ? () => loadMoreItems("") : undefined,
+    "100% 0% 100% 0%"
+  );
+
+  const handleOnDrop = (
+    draggingBlockId: string | undefined,
+    droppedBlockId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => {
+    handleOrderChange(draggingBlockId, droppedBlockId, dropAtEndOfList, blockIds, getBlockById, blockUpdateHandler);
+  };
+
+  return (
+    <div>
+      {blockIds ? (
+        <>
+          {blockIds.map((blockId, index) => {
+            const block = getBlockById(blockId);
+            const item = items[blockId];
+            const isBlockVisibleOnSidebar = block?.start_date && block?.target_date;
+
+            // hide the block if it doesn't have start and target dates and showAllBlocks is false
+            if (!block || (!showAllBlocks && !isBlockVisibleOnSidebar)) return null;
+
+            if (!item) return null;
+
+            return (
+              <RenderIfVisible
+                key={blockId}
+                root={ganttContainerRef}
+                horizontalOffset={100}
+                verticalOffset={200}
+                shouldRecordHeights={false}
+                placeholderChildren={<GanttLayoutListItemLoader />}
+              >
+                <GanttDnDHOC
+                  id={blockId}
+                  isLastChild={index === blockIds.length - 1}
+                  isDragEnabled={enableReorder}
+                  onDrop={handleOnDrop}
+                >
+                  {(isDragging: boolean) => {
+                    const block = getBlockById(blockId);
+                    const isBlockComplete = !!block?.start_date && !!block?.target_date;
+                    const duration = isBlockComplete ? getNumberOfDaysFromPosition(block?.position?.width) : undefined;
+                    const isBlockHoveredOn = isBlockActive(blockId);
+
+                    return (
+                      <div
+                        className={cn("group/list-block", {
+                          "rounded-sm bg-layer-1": isDragging,
+                        })}
+                        onMouseEnter={() => updateActiveBlockId(blockId)}
+                        onMouseLeave={() => updateActiveBlockId(null)}
+                      >
+                        <Row
+                          className={cn(
+                            "group flex w-full items-center gap-2 bg-layer-transparent pr-4 hover:bg-layer-transparent-hover",
+                            {
+                              "bg-layer-transparent-hover": isBlockHoveredOn,
+                            }
+                          )}
+                          style={{
+                            height: `${BLOCK_HEIGHT}px`,
+                          }}
+                        >
+                          <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
+                            <div className="flex-grow truncate">{renderItem(item)}</div>
+                            {duration && (
+                              <div className="flex-shrink-0 text-13 text-secondary">
+                                <span>
+                                  {duration} day{duration > 1 ? "s" : ""}
+                                </span>
+                              </div>
+                            )}
+                          </div>
+                        </Row>
+                      </div>
+                    );
+                  }}
+                </GanttDnDHOC>
+              </RenderIfVisible>
+            );
+          })}
+          {canLoadMoreBlocks && (
+            <div ref={setIntersectionElement} className="p-2">
+              <div className="flex h-10 w-full animate-pulse items-center justify-between gap-1.5 rounded-sm bg-layer-1 px-4 py-1.5 md:h-8 md:px-1" />
+            </div>
+          )}
+        </>
+      ) : (
+        <Loader className="space-y-3 pr-2">
+          <Loader.Item height="34px" />
+          <Loader.Item height="34px" />
+          <Loader.Item height="34px" />
+          <Loader.Item height="34px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/base-layouts/hooks/use-group-drop-target.ts b/apps/web/core/components/base-layouts/hooks/use-group-drop-target.ts
new file mode 100644
index 0000000..a28f344
--- /dev/null
+++ b/apps/web/core/components/base-layouts/hooks/use-group-drop-target.ts
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+
+interface UseGroupDropTargetProps {
+  groupId: string;
+  enableDragDrop?: boolean;
+  onDrop?: (itemId: string, targetId: string | null, sourceGroupId: string, targetGroupId: string) => void;
+}
+
+interface DragSourceData {
+  id: string;
+  groupId: string;
+  type: "ITEM" | "GROUP";
+}
+
+/**
+ * A hook that turns an element into a valid drop target for group drag-and-drop.
+ *
+ * @returns groupRef (attach to the droppable container) and isDraggingOver (for visual feedback)
+ */
+export const useGroupDropTarget = ({ groupId, enableDragDrop = false, onDrop }: UseGroupDropTargetProps) => {
+  const groupRef = useRef<HTMLDivElement | null>(null);
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+  useEffect(() => {
+    const element = groupRef.current;
+    if (!element || !enableDragDrop || !onDrop) return;
+
+    const cleanup = dropTargetForElements({
+      element,
+      getData: () => ({ groupId, type: "GROUP" }),
+
+      canDrop: ({ source }) => {
+        const data = (source?.data || {}) as Partial<DragSourceData>;
+        return data.type === "ITEM" && !!data.groupId && data.groupId !== groupId;
+      },
+
+      onDragEnter: () => setIsDraggingOver(true),
+      onDragLeave: () => setIsDraggingOver(false),
+
+      onDrop: ({ source }) => {
+        setIsDraggingOver(false);
+        const data = (source?.data || {}) as Partial<DragSourceData>;
+        if (data.type !== "ITEM" || !data.id || !data.groupId) return;
+        if (data.groupId !== groupId) {
+          onDrop(data.id, null, data.groupId, groupId);
+        }
+      },
+    });
+
+    return cleanup;
+  }, [groupId, enableDragDrop, onDrop]);
+
+  return { groupRef, isDraggingOver };
+};
diff --git a/apps/web/core/components/base-layouts/hooks/use-layout-state.ts b/apps/web/core/components/base-layouts/hooks/use-layout-state.ts
new file mode 100644
index 0000000..0aba3ed
--- /dev/null
+++ b/apps/web/core/components/base-layouts/hooks/use-layout-state.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+
+type UseLayoutStateProps =
+  | {
+      mode: "external";
+      externalCollapsedGroups: string[];
+      externalOnToggleGroup: (groupId: string) => void;
+      enableAutoScroll?: boolean;
+    }
+  | {
+      mode?: "internal";
+      enableAutoScroll?: boolean;
+    };
+
+/**
+ * Hook for managing layout state including:
+ * - Collapsed/expanded group tracking (internal or external)
+ * - Auto-scroll setup for drag-and-drop
+ */
+export const useLayoutState = (props: UseLayoutStateProps = { mode: "internal" }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // Internal fallback state
+  const [internalCollapsedGroups, setInternalCollapsedGroups] = useState<string[]>([]);
+
+  // Stable internal toggle function
+  const internalToggleGroup = useCallback((groupId: string) => {
+    setInternalCollapsedGroups((prev) =>
+      prev.includes(groupId) ? prev.filter((id) => id !== groupId) : [...prev, groupId]
+    );
+  }, []);
+
+  const useExternal = props.mode === "external";
+  const collapsedGroups = useExternal ? props.externalCollapsedGroups : internalCollapsedGroups;
+  const onToggleGroup = useExternal ? props.externalOnToggleGroup : internalToggleGroup;
+
+  // Enable auto-scroll for DnD
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element || !props.enableAutoScroll) return;
+
+    const cleanup = combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+
+    return cleanup;
+  }, [props.enableAutoScroll]);
+
+  return {
+    containerRef,
+    collapsedGroups,
+    onToggleGroup,
+  };
+};
diff --git a/apps/web/core/components/base-layouts/kanban/group-header.tsx b/apps/web/core/components/base-layouts/kanban/group-header.tsx
new file mode 100644
index 0000000..9d69bd2
--- /dev/null
+++ b/apps/web/core/components/base-layouts/kanban/group-header.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IGroupHeaderProps } from "@plane/types";
+
+export function GroupHeader({ group, itemCount, onToggleGroup }: IGroupHeaderProps) {
+  return (
+    <button
+      onClick={() => onToggleGroup(group.id)}
+      className="flex w-full items-center gap-2 text-13 font-medium text-secondary"
+    >
+      <div className="flex items-center gap-2">
+        {group.icon}
+        <span>{group.name}</span>
+      </div>
+      <span className="text-11 text-tertiary">{itemCount}</span>
+    </button>
+  );
+}
diff --git a/apps/web/core/components/base-layouts/kanban/group.tsx b/apps/web/core/components/base-layouts/kanban/group.tsx
new file mode 100644
index 0000000..691d8f6
--- /dev/null
+++ b/apps/web/core/components/base-layouts/kanban/group.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanGroupProps } from "@plane/types";
+import { cn } from "@plane/utils";
+import { useGroupDropTarget } from "../hooks/use-group-drop-target";
+import { GroupHeader } from "./group-header";
+import { BaseKanbanItem } from "./item";
+
+export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBaseLayoutsKanbanItem>(
+  props: IBaseLayoutsKanbanGroupProps<T>
+) {
+  const {
+    group,
+    itemIds,
+    items,
+    renderItem,
+    renderGroupHeader,
+    isCollapsed,
+    onToggleGroup,
+    enableDragDrop = false,
+    onDrop,
+    canDrag,
+    groupClassName,
+    loadMoreItems: _loadMoreItems,
+  } = props;
+
+  const { t } = useTranslation();
+  const { groupRef, isDraggingOver } = useGroupDropTarget({
+    groupId: group.id,
+    enableDragDrop,
+    onDrop,
+  });
+
+  return (
+    <div
+      ref={groupRef}
+      className={cn(
+        "relative flex max-h-full w-[350px] flex-shrink-0 flex-col overflow-y-auto rounded-md border-[1px] border-transparent bg-layer-1 p-2 pt-0",
+        {
+          "bg-layer-1": isDraggingOver,
+        },
+        groupClassName
+      )}
+    >
+      {/* Group Header */}
+      <div className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer px-1 py-2">
+        {renderGroupHeader ? (
+          renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
+        ) : (
+          <GroupHeader
+            group={group}
+            itemCount={itemIds.length}
+            isCollapsed={isCollapsed}
+            onToggleGroup={onToggleGroup}
+          />
+        )}
+      </div>
+
+      {/* Group Items */}
+      {!isCollapsed && (
+        <div className="flex flex-col gap-2 py-2">
+          {itemIds.map((itemId, index) => {
+            const item = items[itemId];
+            if (!item) return null;
+
+            return (
+              <BaseKanbanItem
+                key={itemId}
+                item={item}
+                index={index}
+                groupId={group.id}
+                renderItem={renderItem}
+                enableDragDrop={enableDragDrop}
+                canDrag={canDrag}
+                onDrop={onDrop}
+                isLast={index === itemIds.length - 1}
+              />
+            );
+          })}
+
+          {itemIds.length === 0 && (
+            <div className="flex items-center justify-center py-8 text-13 text-tertiary">
+              {t("common.no_items_in_this_group")}
+            </div>
+          )}
+        </div>
+      )}
+
+      {isDraggingOver && enableDragDrop && (
+        <div className="absolute top-0 left-0 z-[2] flex h-full w-full items-center justify-center rounded-sm border-[1px] border-strong bg-layer-1/85 text-13 font-medium text-tertiary">
+          <div className="my-8 flex flex-col items-center rounded-sm p-3 text-secondary">
+            {t("common.drop_here_to_move")}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/base-layouts/kanban/item.tsx b/apps/web/core/components/base-layouts/kanban/item.tsx
new file mode 100644
index 0000000..648d5cd
--- /dev/null
+++ b/apps/web/core/components/base-layouts/kanban/item.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanItemProps } from "@plane/types";
+
+export const BaseKanbanItem = observer(function BaseKanbanItem<T extends IBaseLayoutsKanbanItem>(
+  props: IBaseLayoutsKanbanItemProps<T>
+) {
+  const { item, groupId, renderItem, enableDragDrop, canDrag } = props;
+
+  const itemRef = useRef<HTMLDivElement | null>(null);
+
+  const isDragAllowed = canDrag ? canDrag(item) : true;
+
+  // Setup draggable and drop target
+  useEffect(() => {
+    const element = itemRef.current;
+    if (!element || !enableDragDrop) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => isDragAllowed,
+        getInitialData: () => ({ id: item.id, type: "ITEM", groupId }),
+      }),
+      dropTargetForElements({
+        element,
+        getData: () => ({ id: item.id, groupId, type: "ITEM" }),
+        canDrop: ({ source }) => source?.data?.id !== item.id,
+      })
+    );
+  }, [enableDragDrop, isDragAllowed, item.id, groupId]);
+
+  const renderedItem = renderItem(item, groupId);
+
+  return (
+    <div ref={itemRef} className="cursor-pointer">
+      {renderedItem}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/base-layouts/kanban/layout.tsx b/apps/web/core/components/base-layouts/kanban/layout.tsx
new file mode 100644
index 0000000..ffa0c2d
--- /dev/null
+++ b/apps/web/core/components/base-layouts/kanban/layout.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanProps } from "@plane/types";
+import { cn } from "@plane/utils";
+import { useLayoutState } from "../hooks/use-layout-state";
+import { BaseKanbanGroup } from "./group";
+
+export const BaseKanbanLayout = observer(function BaseKanbanLayout<T extends IBaseLayoutsKanbanItem>(
+  props: IBaseLayoutsKanbanProps<T>
+) {
+  const {
+    items,
+    groups,
+    groupedItemIds,
+    renderItem,
+    renderGroupHeader,
+    onDrop,
+    canDrag,
+    className,
+    groupClassName,
+    showEmptyGroups = true,
+    enableDragDrop = false,
+    loadMoreItems,
+    collapsedGroups: externalCollapsedGroups,
+    onToggleGroup: externalOnToggleGroup,
+  } = props;
+
+  const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
+  const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
+    useExternalMode
+      ? {
+          mode: "external",
+          externalCollapsedGroups,
+          externalOnToggleGroup,
+        }
+      : {
+          mode: "internal",
+        }
+  );
+
+  return (
+    <div ref={containerRef} className={cn("relative flex h-full w-full gap-2 overflow-x-auto p-3", className)}>
+      {groups.map((group) => {
+        const itemIds = groupedItemIds[group.id] || [];
+        const isCollapsed = collapsedGroups.includes(group.id);
+
+        if (!showEmptyGroups && itemIds.length === 0) return null;
+
+        return (
+          <BaseKanbanGroup
+            key={group.id}
+            group={group}
+            itemIds={itemIds}
+            items={items}
+            renderItem={renderItem}
+            renderGroupHeader={renderGroupHeader}
+            isCollapsed={isCollapsed}
+            onToggleGroup={onToggleGroup}
+            enableDragDrop={enableDragDrop}
+            onDrop={onDrop}
+            canDrag={canDrag}
+            groupClassName={groupClassName}
+            loadMoreItems={loadMoreItems}
+          />
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/base-layouts/layout-switcher.tsx b/apps/web/core/components/base-layouts/layout-switcher.tsx
new file mode 100644
index 0000000..6a74299
--- /dev/null
+++ b/apps/web/core/components/base-layouts/layout-switcher.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TBaseLayoutType } from "@plane/types";
+import { cn } from "@plane/utils";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { BASE_LAYOUTS } from "./constants";
+
+type Props = {
+  layouts?: TBaseLayoutType[];
+  onChange: (layout: TBaseLayoutType) => void;
+  selectedLayout: TBaseLayoutType;
+};
+
+export function LayoutSwitcher(props: Props) {
+  const { layouts, onChange, selectedLayout } = props;
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  const handleOnChange = (layoutKey: TBaseLayoutType) => {
+    if (selectedLayout !== layoutKey) {
+      onChange(layoutKey);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
+      {BASE_LAYOUTS.map((layout) => {
+        if (layouts && !layouts.includes(layout.key)) return null;
+        const Icon = layout.icon;
+        return (
+          <Tooltip key={layout.key} label={t(layout.label)} disabled={isMobile}>
+            <button
+              type="button"
+              aria-label={t(layout.label)}
+              className={cn(
+                "group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
+                {
+                  "bg-layer-transparent-active hover:bg-layer-transparent-active": selectedLayout === layout.key,
+                }
+              )}
+              onClick={() => handleOnChange(layout.key)}
+            >
+              <Icon
+                width={14}
+                height={14}
+                strokeWidth={2}
+                className={cn("size-3.5", {
+                  "text-primary": selectedLayout === layout.key,
+                  "text-secondary": selectedLayout !== layout.key,
+                })}
+              />
+            </button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/base-layouts/list/group-header.tsx b/apps/web/core/components/base-layouts/list/group-header.tsx
new file mode 100644
index 0000000..d26f832
--- /dev/null
+++ b/apps/web/core/components/base-layouts/list/group-header.tsx
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IGroupHeaderProps } from "@plane/types";
+
+export function GroupHeader({ group, itemCount, onToggleGroup }: IGroupHeaderProps) {
+  return (
+    <button
+      onClick={() => onToggleGroup(group.id)}
+      className="flex w-full items-center gap-2 py-2 text-13 font-medium text-secondary"
+    >
+      {group.icon}
+      <span>{group.name}</span>
+      <span className="text-11 text-tertiary">{itemCount}</span>
+    </button>
+  );
+}
diff --git a/apps/web/core/components/base-layouts/list/group.tsx b/apps/web/core/components/base-layouts/list/group.tsx
new file mode 100644
index 0000000..a11ae4a
--- /dev/null
+++ b/apps/web/core/components/base-layouts/list/group.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { IBaseLayoutsListItem, IBaseLayoutsListGroupProps } from "@plane/types";
+import { cn } from "@plane/ui";
+import { useGroupDropTarget } from "../hooks/use-group-drop-target";
+import { GroupHeader } from "./group-header";
+import { BaseListItem } from "./item";
+
+export const BaseListGroup = observer(function BaseListGroup<T extends IBaseLayoutsListItem>(
+  props: IBaseLayoutsListGroupProps<T>
+) {
+  const {
+    group,
+    itemIds,
+    items,
+    isCollapsed,
+    onToggleGroup,
+    renderItem,
+    renderGroupHeader,
+    enableDragDrop = false,
+    onDrop,
+    canDrag,
+    loadMoreItems: _loadMoreItems,
+  } = props;
+
+  const { t } = useTranslation();
+  const { groupRef, isDraggingOver } = useGroupDropTarget({
+    groupId: group.id,
+    enableDragDrop,
+    onDrop,
+  });
+
+  return (
+    <div
+      ref={groupRef}
+      className={cn("relative flex flex-shrink-0 flex-col", {
+        "bg-layer-1": isDraggingOver,
+      })}
+    >
+      {/* Group Header */}
+      <div className="sticky top-0 z-10 w-full shrink-0 cursor-pointer border-b border-subtle bg-layer-1 px-6 py-1 hover:bg-layer-1-hover">
+        {renderGroupHeader ? (
+          renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
+        ) : (
+          <GroupHeader
+            group={group}
+            itemCount={itemIds.length}
+            isCollapsed={isCollapsed}
+            onToggleGroup={onToggleGroup}
+          />
+        )}
+      </div>
+
+      {/* Group Items */}
+      {!isCollapsed && (
+        <div className="relative">
+          {itemIds.map((itemId: string, index: number) => {
+            const item = items[itemId];
+            if (!item) return null;
+
+            return (
+              <BaseListItem
+                key={itemId}
+                item={item}
+                index={index}
+                groupId={group.id}
+                renderItem={renderItem}
+                enableDragDrop={enableDragDrop}
+                canDrag={canDrag}
+                onDrop={onDrop}
+                isLast={index === itemIds.length - 1}
+              />
+            );
+          })}
+        </div>
+      )}
+
+      {isDraggingOver && enableDragDrop && (
+        <div className="absolute top-0 left-0 z-[2] flex h-full w-full items-center justify-center rounded-sm border-[1px] border-strong bg-layer-1/85 text-13 font-medium text-tertiary">
+          <div className="my-8 flex flex-col items-center rounded-sm p-3 text-secondary">
+            {t("common.drop_here_to_move")}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/base-layouts/list/item.tsx b/apps/web/core/components/base-layouts/list/item.tsx
new file mode 100644
index 0000000..759b75b
--- /dev/null
+++ b/apps/web/core/components/base-layouts/list/item.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+import type { IBaseLayoutsListItem, IBaseLayoutsListItemProps } from "@plane/types";
+
+export const BaseListItem = observer(function BaseListItem<T extends IBaseLayoutsListItem>(
+  props: IBaseLayoutsListItemProps<T>
+) {
+  const { item, groupId, renderItem, enableDragDrop, canDrag, isLast: _isLast, index: _index } = props;
+  const itemRef = useRef<HTMLDivElement | null>(null);
+
+  const isDragAllowed = canDrag ? canDrag(item) : true;
+
+  useEffect(() => {
+    const element = itemRef.current;
+    if (!element || !enableDragDrop) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => isDragAllowed,
+        getInitialData: () => ({ id: item.id, type: "ITEM", groupId }),
+      }),
+      dropTargetForElements({
+        element,
+        getData: () => ({ groupId, type: "ITEM" }),
+        canDrop: ({ source }) => source?.data?.id !== item.id,
+      })
+    );
+  }, [enableDragDrop, isDragAllowed, item.id, groupId]);
+
+  const renderedItem = renderItem(item, groupId);
+
+  return (
+    <div ref={itemRef} className="cursor-pointer">
+      {renderedItem}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/base-layouts/list/layout.tsx b/apps/web/core/components/base-layouts/list/layout.tsx
new file mode 100644
index 0000000..288d356
--- /dev/null
+++ b/apps/web/core/components/base-layouts/list/layout.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { IBaseLayoutsListItem, IBaseLayoutsListProps } from "@plane/types";
+import { cn } from "@plane/ui";
+import { useLayoutState } from "../hooks/use-layout-state";
+import { BaseListGroup } from "./group";
+
+export const BaseListLayout = observer(function BaseListLayout<T extends IBaseLayoutsListItem>(
+  props: IBaseLayoutsListProps<T>
+) {
+  const {
+    items,
+    groupedItemIds,
+    groups,
+    renderItem,
+    renderGroupHeader,
+    enableDragDrop = false,
+    onDrop,
+    canDrag,
+    showEmptyGroups = false,
+    collapsedGroups: externalCollapsedGroups,
+    onToggleGroup: externalOnToggleGroup,
+    loadMoreItems,
+    className,
+  } = props;
+
+  const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
+  const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
+    useExternalMode
+      ? {
+          mode: "external",
+          externalCollapsedGroups,
+          externalOnToggleGroup,
+        }
+      : {
+          mode: "internal",
+        }
+  );
+
+  return (
+    <div ref={containerRef} className={cn("relative size-full overflow-auto bg-surface-1", className)}>
+      <div className="relative flex size-full flex-col">
+        {groups.map((group) => {
+          const itemIds = groupedItemIds[group.id] || [];
+          const isCollapsed = collapsedGroups.includes(group.id);
+
+          if (!showEmptyGroups && itemIds.length === 0) return null;
+
+          return (
+            <BaseListGroup
+              key={group.id}
+              group={group}
+              itemIds={itemIds}
+              items={items}
+              renderItem={renderItem}
+              renderGroupHeader={renderGroupHeader}
+              isCollapsed={isCollapsed}
+              onToggleGroup={onToggleGroup}
+              enableDragDrop={enableDragDrop}
+              onDrop={onDrop}
+              canDrag={canDrag}
+              loadMoreItems={loadMoreItems}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/base-layouts/loaders/layout-loader.tsx b/apps/web/core/components/base-layouts/loaders/layout-loader.tsx
new file mode 100644
index 0000000..177c302
--- /dev/null
+++ b/apps/web/core/components/base-layouts/loaders/layout-loader.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TBaseLayoutType } from "@plane/types";
+import { KanbanLayoutLoader } from "@/components/ui/loader/layouts/kanban-layout-loader";
+import { ListLayoutLoader } from "@/components/ui/loader/layouts/list-layout-loader";
+
+interface GenericLayoutLoaderProps {
+  layout: TBaseLayoutType;
+  /** Optional custom loaders to override defaults */
+  customLoaders?: Partial<Record<TBaseLayoutType, React.ComponentType>>;
+}
+
+export function GenericLayoutLoader({ layout, customLoaders }: GenericLayoutLoaderProps) {
+  const CustomLoader = customLoaders?.[layout];
+  if (CustomLoader) return <CustomLoader />;
+
+  switch (layout) {
+    case "list":
+      return <ListLayoutLoader />;
+    case "kanban":
+      return <KanbanLayoutLoader />;
+    default:
+      console.warn(`Unknown layout: ${layout}`);
+      return null;
+  }
+}
diff --git a/apps/web/core/components/breadcrumbs/common.tsx b/apps/web/core/components/breadcrumbs/common.tsx
new file mode 100644
index 0000000..9040cb2
--- /dev/null
+++ b/apps/web/core/components/breadcrumbs/common.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local components
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+import { ProjectBreadcrumb } from "./project";
+
+type TCommonProjectBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export function CommonProjectBreadcrumbs(props: TCommonProjectBreadcrumbProps) {
+  const { workspaceSlug, projectId } = props;
+  // preferences
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
+
+  if (projectPreferences.navigationMode === "TABBED") return null;
+  return <ProjectBreadcrumb workspaceSlug={workspaceSlug} projectId={projectId} />;
+}
diff --git a/apps/web/core/components/breadcrumbs/project.tsx b/apps/web/core/components/breadcrumbs/project.tsx
new file mode 100644
index 0000000..3bd941c
--- /dev/null
+++ b/apps/web/core/components/breadcrumbs/project.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { ProjectsOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { ICustomSearchSelectOption } from "@plane/types";
+import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui";
+import { SwitcherLabel } from "@/components/common/switcher-label";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import type { TProject } from "@plane/types";
+
+type TProjectBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+  handleOnClick?: () => void;
+};
+
+export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TProjectBreadcrumbProps) {
+  const { workspaceSlug, projectId, handleOnClick } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { joinedProjectIds, getPartialProjectById } = useProject();
+  const currentProjectDetails = getPartialProjectById(projectId);
+
+  // store hooks
+
+  if (!currentProjectDetails) return null;
+
+  // derived values
+  const switcherOptions = joinedProjectIds
+    // oxlint-disable-next-line no-shadow
+    .map((projectId) => {
+      const project = getPartialProjectById(projectId);
+      return {
+        value: projectId,
+        query: project?.name,
+        content: (
+          <SwitcherLabel
+            name={project?.name}
+            logo_props={project?.logo_props}
+            LabelIcon={ProjectsOutline}
+            type="material"
+          />
+        ),
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
+
+  // helpers
+  // oxlint-disable-next-line unicorn/consistent-function-scoping
+  const renderIcon = (projectDetails: TProject) => (
+    <span className="grid size-4 flex-shrink-0 place-items-center">
+      <Logo logo={projectDetails.logo_props} size={14} />
+    </span>
+  );
+
+  return (
+    <>
+      <Breadcrumbs.Item
+        component={
+          <BreadcrumbNavigationSearchDropdown
+            selectedItem={currentProjectDetails.id}
+            navigationItems={switcherOptions}
+            onChange={(value: string) => {
+              router.push(`/${workspaceSlug}/projects/${value}/issues`);
+            }}
+            title={currentProjectDetails?.name}
+            icon={renderIcon(currentProjectDetails)}
+            handleOnClick={() => {
+              if (handleOnClick) handleOnClick();
+              else router.push(`/${workspaceSlug}/projects/${currentProjectDetails.id}/issues/`);
+            }}
+            shouldTruncate
+          />
+        }
+        showSeparator={false}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/browse/workItem-detail.tsx b/apps/web/core/components/browse/workItem-detail.tsx
new file mode 100644
index 0000000..b56a9d9
--- /dev/null
+++ b/apps/web/core/components/browse/workItem-detail.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { TIssue } from "@plane/types";
+import { IssueDetailRoot } from "@/components/issues/issue-detail/root";
+
+export type TWorkItemDetailRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issue: TIssue | undefined;
+};
+
+export const WorkItemDetailRoot = observer(function WorkItemDetailRoot(props: TWorkItemDetailRoot) {
+  const { workspaceSlug, projectId, issueId, issue } = props;
+
+  return (
+    <IssueDetailRoot
+      workspaceSlug={workspaceSlug.toString()}
+      projectId={projectId.toString()}
+      issueId={issueId.toString()}
+      is_archived={!!issue?.archived_at}
+    />
+  );
+});
diff --git a/apps/web/core/components/chart/utils.ts b/apps/web/core/components/chart/utils.ts
new file mode 100644
index 0000000..e7055a9
--- /dev/null
+++ b/apps/web/core/components/chart/utils.ts
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { getWeekOfMonth, isValid } from "date-fns";
+import { CHART_X_AXIS_DATE_PROPERTIES, ChartXAxisDateGrouping, TO_CAPITALIZE_PROPERTIES } from "@plane/constants";
+import type { ChartXAxisProperty, TChart, TChartDatum } from "@plane/types";
+import {
+  capitalizeFirstLetter,
+  hexToHsl,
+  hslToHex,
+  renderFormattedDate,
+  renderFormattedDateWithoutYear,
+} from "@plane/utils";
+//
+
+const getDateGroupingName = (date: string, dateGrouping: ChartXAxisDateGrouping): string => {
+  if (!date || ["none", "null"].includes(date.toLowerCase())) return "None";
+
+  const formattedData = new Date(date);
+  const isValidDate = isValid(formattedData);
+
+  if (!isValidDate) return date;
+
+  const year = formattedData.getFullYear();
+  const currentYear = new Date().getFullYear();
+
+  const isCurrentYear = year === currentYear;
+
+  let parsedName: string | undefined;
+
+  switch (dateGrouping) {
+    case ChartXAxisDateGrouping.DAY:
+      if (isCurrentYear) parsedName = renderFormattedDateWithoutYear(formattedData);
+      else parsedName = renderFormattedDate(formattedData);
+      break;
+    case ChartXAxisDateGrouping.WEEK: {
+      const month = renderFormattedDate(formattedData, "MMM");
+      parsedName = `${month}, Week ${getWeekOfMonth(formattedData)}`;
+      break;
+    }
+    case ChartXAxisDateGrouping.MONTH:
+      if (isCurrentYear) parsedName = renderFormattedDate(formattedData, "MMM");
+      else parsedName = renderFormattedDate(formattedData, "MMM, yyyy");
+      break;
+    case ChartXAxisDateGrouping.YEAR:
+      parsedName = `${year}`;
+      break;
+    default:
+      parsedName = date;
+  }
+
+  return parsedName ?? date;
+};
+
+export const parseChartData = (
+  data: TChart | null | undefined,
+  xAxisProperty: ChartXAxisProperty | null | undefined,
+  groupByProperty: ChartXAxisProperty | null | undefined,
+  xAxisDateGrouping: ChartXAxisDateGrouping | null | undefined
+): TChart => {
+  if (!data) {
+    return {
+      data: [],
+      schema: {},
+    };
+  }
+  const widgetData = structuredClone(data.data);
+  const schema = structuredClone(data.schema);
+  const allKeys = Object.keys(schema);
+  const updatedWidgetData: TChartDatum[] = widgetData.map((datum) => {
+    const keys = Object.keys(datum);
+    const missingKeys = allKeys.filter((key) => !keys.includes(key));
+    const missingValues: Record<string, number> = Object.fromEntries(missingKeys.map((key) => [key, 0]));
+
+    if (xAxisProperty) {
+      // capitalize first letter if xAxisProperty is in TO_CAPITALIZE_PROPERTIES and no groupByProperty is set
+      if (TO_CAPITALIZE_PROPERTIES.includes(xAxisProperty)) {
+        datum.name = capitalizeFirstLetter(datum.name);
+      }
+
+      // parse timestamp to visual date if xAxisProperty is in WIDGET_X_AXIS_DATE_PROPERTIES
+      if (CHART_X_AXIS_DATE_PROPERTIES.includes(xAxisProperty)) {
+        datum.name = getDateGroupingName(datum.name, xAxisDateGrouping ?? ChartXAxisDateGrouping.DAY);
+      }
+    }
+
+    return {
+      ...datum,
+      ...missingValues,
+    };
+  });
+
+  // capitalize first letter if groupByProperty is in TO_CAPITALIZE_PROPERTIES
+  const updatedSchema = schema;
+  if (groupByProperty) {
+    if (TO_CAPITALIZE_PROPERTIES.includes(groupByProperty)) {
+      Object.keys(updatedSchema).forEach((key) => {
+        updatedSchema[key] = capitalizeFirstLetter(updatedSchema[key]);
+      });
+    }
+
+    if (CHART_X_AXIS_DATE_PROPERTIES.includes(groupByProperty)) {
+      Object.keys(updatedSchema).forEach((key) => {
+        updatedSchema[key] = getDateGroupingName(updatedSchema[key], xAxisDateGrouping ?? ChartXAxisDateGrouping.DAY);
+      });
+    }
+  }
+
+  return {
+    data: updatedWidgetData,
+    schema: updatedSchema,
+  };
+};
+
+export const generateExtendedColors = (baseColorSet: string[], targetCount: number) => {
+  const colors = [...baseColorSet];
+  const baseCount = baseColorSet.length;
+
+  if (targetCount <= baseCount) {
+    return colors.slice(0, targetCount);
+  }
+
+  // Convert base colors to HSL
+  const baseHSL = baseColorSet.map(hexToHsl);
+
+  // Calculate average saturation and lightness from base colors
+  const avgSat = baseHSL.reduce((sum, hsl) => sum + hsl.s, 0) / baseHSL.length;
+  const avgLight = baseHSL.reduce((sum, hsl) => sum + hsl.l, 0) / baseHSL.length;
+
+  // Sort base colors by hue for better distribution
+  const sortedBaseHSL = [...baseHSL].sort((a, b) => a.h - b.h);
+
+  // Generate additional colors for each base color
+  const colorsNeeded = targetCount - baseCount;
+  const colorsPerBase = Math.ceil(colorsNeeded / baseCount);
+
+  for (let i = 0; i < baseCount; i++) {
+    const baseColor = sortedBaseHSL[i];
+    const nextBaseColor = sortedBaseHSL[(i + 1) % baseCount];
+
+    // Calculate hue distance to next base color
+    const hueDistance = (nextBaseColor.h - baseColor.h + 360) % 360;
+    const hueParts = colorsPerBase + 1;
+
+    // Narrower ranges for more consistency
+    const satRange = [Math.max(40, avgSat - 5), Math.min(60, avgSat + 5)];
+    const lightRange = [Math.max(40, avgLight - 5), Math.min(60, avgLight + 5)];
+
+    for (let j = 1; j <= colorsPerBase; j++) {
+      if (colors.length >= targetCount) break;
+
+      // Create evenly spaced hue variations between base colors
+      const hueStep = (hueDistance / hueParts) * j;
+      const newHue = (baseColor.h + hueStep) % 360;
+
+      // Keep saturation and lightness closer to base color
+      const newSat = baseColor.s * 0.8 + avgSat * 0.2;
+      const newLight = baseColor.l * 0.8 + avgLight * 0.2;
+
+      // Ensure values stay within desired ranges
+      const finalSat = Math.max(satRange[0], Math.min(satRange[1], newSat));
+      const finalLight = Math.max(lightRange[0], Math.min(lightRange[1], newLight));
+
+      colors.push(
+        hslToHex({
+          h: newHue,
+          s: finalSat,
+          l: finalLight,
+        })
+      );
+    }
+  }
+
+  return colors.slice(0, targetCount);
+};
diff --git a/apps/web/core/components/comments/card/display.tsx b/apps/web/core/components/comments/card/display.tsx
new file mode 100644
index 0000000..ecb527e
--- /dev/null
+++ b/apps/web/core/components/comments/card/display.tsx
@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { EditorRefApi } from "@plane/editor";
+import { useHashScroll } from "@plane/hooks";
+import { GlobeOutline, LockOutline } from "@makeplane/propel/icons";
+import { EIssueCommentAccessSpecifier } from "@plane/types";
+import type { TCommentsOperations, TIssueComment } from "@plane/types";
+import { calculateTimeAgo, cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
+// components
+import { LiteTextEditor } from "@/components/editor/lite-text";
+// local imports
+import { CommentReactions } from "../comment-reaction";
+import { CommentCardEditForm } from "./edit-form";
+import { EmojiReactionButton, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import { useMember } from "@/hooks/store/use-member";
+
+export type TCommentCardDisplayProps = {
+  activityOperations: TCommentsOperations;
+  comment: TIssueComment;
+  disabled: boolean;
+  entityId: string;
+  projectId?: string;
+  readOnlyEditorRef: React.RefObject<EditorRefApi | null>;
+  showAccessSpecifier: boolean;
+  workspaceId: string;
+  workspaceSlug: string;
+  isEditing?: boolean;
+  setIsEditing?: (isEditing: boolean) => void;
+  renderFooter?: (ReactionsComponent: ReactNode | null) => ReactNode;
+  renderQuickActions?: () => ReactNode;
+};
+
+export const CommentCardDisplay = observer(function CommentCardDisplay(props: TCommentCardDisplayProps) {
+  const {
+    activityOperations,
+    comment,
+    disabled,
+    projectId,
+    readOnlyEditorRef,
+    showAccessSpecifier,
+    workspaceId,
+    workspaceSlug,
+    isEditing = false,
+    setIsEditing,
+    renderFooter,
+    renderQuickActions,
+  } = props;
+  // states
+  const [highlightClassName, setHighlightClassName] = useState("");
+  // state
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const userDetails = getUserDetails(comment?.actor);
+  const displayName = comment?.actor_detail?.is_bot
+    ? comment?.actor_detail?.first_name + `Bot`
+    : (userDetails?.display_name ?? comment?.actor_detail?.display_name);
+  const avatarUrl = userDetails?.avatar_url ?? comment?.actor_detail?.avatar_url;
+
+  const userReactions = activityOperations.userReactions(comment.id);
+
+  // navigation
+  const pathname = usePathname();
+  // derived values
+  const commentBlockId = `comment-${comment?.id}`;
+  // Check if there are any reactions to determine if we should render the footer
+  const reactionIds = activityOperations.reactionIds(comment.id);
+  const hasReactions = reactionIds && Object.keys(reactionIds).some((key) => reactionIds[key]?.length > 0);
+
+  // scroll to comment
+  const { isHashMatch } = useHashScroll({
+    elementId: commentBlockId,
+    pathname,
+  });
+
+  useEffect(() => {
+    if (!isHashMatch) return;
+    setHighlightClassName("border-accent-strong");
+    const timeout = setTimeout(() => {
+      setHighlightClassName("");
+    }, 8000);
+
+    return () => clearTimeout(timeout);
+  }, [isHashMatch]);
+
+  const handleEmojiSelect = useCallback(
+    (emoji: string) => {
+      if (!userReactions) return;
+      // emoji is already in decimal string format from EmojiReactionPicker
+      void activityOperations.react(comment.id, emoji, userReactions);
+    },
+    [activityOperations, comment.id, userReactions]
+  );
+
+  const shouldRenderReactions = hasReactions && !disabled;
+
+  return (
+    <div id={commentBlockId} className="relative flex flex-col gap-2">
+      {showAccessSpecifier && (
+        <div className="absolute top-2.5 right-2.5 z-[1] text-tertiary">
+          {comment.access === EIssueCommentAccessSpecifier.INTERNAL ? (
+            <LockOutline className="size-3" />
+          ) : (
+            <GlobeOutline className="size-3" />
+          )}
+        </div>
+      )}
+      <div className="relative mb-3 flex w-full items-center gap-2">
+        <Avatar alt={displayName} fallback={displayName?.[0]?.toUpperCase()} size="2xs" src={getFileURL(avatarUrl)} />
+        <div className="flex flex-1 flex-wrap items-center gap-1">
+          <div className="text-caption-sm-medium">{displayName}</div>
+          <div className="text-caption-sm-regular text-tertiary">
+            commented{" "}
+            <Tooltip
+              label={`${renderFormattedDate(comment.created_at)} at ${renderFormattedTime(comment.created_at)}`}
+              side="bottom"
+              layout="single"
+              delay={200}
+            >
+              <span className="text-tertiary">
+                {calculateTimeAgo(comment.created_at)}
+                {comment.edited_at && " (edited)"}
+              </span>
+            </Tooltip>
+          </div>
+        </div>
+        {!disabled && (
+          <div className="flex shrink-0 items-center gap-1">
+            <EmojiReactionPicker
+              isOpen={isPickerOpen}
+              handleToggle={setIsPickerOpen}
+              onChange={handleEmojiSelect}
+              disabled={disabled}
+              label={<EmojiReactionButton onAddReaction={() => setIsPickerOpen(true)} />}
+              placement="bottom-start"
+            />
+            {renderQuickActions ? renderQuickActions() : null}
+          </div>
+        )}
+      </div>
+      {isEditing && setIsEditing ? (
+        <CommentCardEditForm
+          activityOperations={activityOperations}
+          comment={comment}
+          isEditing={isEditing}
+          readOnlyEditorRef={readOnlyEditorRef.current}
+          setIsEditing={setIsEditing}
+          projectId={projectId}
+          workspaceId={workspaceId}
+          workspaceSlug={workspaceSlug}
+        />
+      ) : (
+        <>
+          <LiteTextEditor
+            editable={false}
+            ref={readOnlyEditorRef}
+            id={comment.id}
+            initialValue={comment.comment_html ?? ""}
+            workspaceId={workspaceId}
+            workspaceSlug={workspaceSlug}
+            containerClassName={cn("!py-1 transition-[border-color] duration-500", highlightClassName)}
+            projectId={projectId?.toString()}
+            displayConfig={{
+              fontSize: "small-font",
+            }}
+            parentClassName="border-none"
+          />
+          {shouldRenderReactions &&
+            (renderFooter ? (
+              renderFooter(
+                <CommentReactions comment={comment} disabled={disabled} activityOperations={activityOperations} />
+              )
+            ) : (
+              <CommentReactions comment={comment} disabled={disabled} activityOperations={activityOperations} />
+            ))}
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/comments/card/edit-form.tsx b/apps/web/core/components/comments/card/edit-form.tsx
new file mode 100644
index 0000000..80f410d
--- /dev/null
+++ b/apps/web/core/components/comments/card/edit-form.tsx
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import { useForm } from "react-hook-form";
+import type { EditorRefApi } from "@plane/editor";
+import { CloseOutline, TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TCommentsOperations, TIssueComment } from "@plane/types";
+import { cn, isCommentEmpty } from "@plane/utils";
+// components
+import { LiteTextEditor } from "@/components/editor/lite-text";
+
+type Props = {
+  activityOperations: TCommentsOperations;
+  comment: TIssueComment;
+  isEditing: boolean;
+  projectId?: string;
+  readOnlyEditorRef: EditorRefApi | null;
+  setIsEditing: (isEditing: boolean) => void;
+  workspaceId: string;
+  workspaceSlug: string;
+};
+
+export const CommentCardEditForm = observer(function CommentCardEditForm(props: Props) {
+  const {
+    activityOperations,
+    comment,
+    isEditing,
+    projectId,
+    readOnlyEditorRef,
+    setIsEditing,
+    workspaceId,
+    workspaceSlug,
+  } = props;
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // form info
+  const {
+    formState: { isSubmitting },
+    handleSubmit,
+    setFocus,
+    watch,
+    setValue,
+  } = useForm<Partial<TIssueComment>>({
+    defaultValues: { comment_html: comment?.comment_html },
+  });
+  const commentHTML = watch("comment_html");
+
+  const isEmpty = isCommentEmpty(commentHTML);
+  const isEditorReadyToDiscard = editorRef.current?.isEditorReadyToDiscard();
+  const isSubmitButtonDisabled = isSubmitting || !isEditorReadyToDiscard;
+  const isDisabled = isSubmitting || isEmpty || isSubmitButtonDisabled;
+
+  const onEnter = async (formData: Partial<TIssueComment>) => {
+    if (isSubmitting || !comment) return;
+
+    setIsEditing(false);
+
+    await activityOperations.updateComment(comment.id, formData);
+
+    editorRef.current?.setEditorValue(formData?.comment_html ?? "<p></p>");
+    readOnlyEditorRef?.setEditorValue(formData?.comment_html ?? "<p></p>");
+  };
+
+  useEffect(() => {
+    if (isEditing) {
+      setFocus("comment_html");
+    }
+  }, [isEditing, setFocus]);
+
+  return (
+    <form className="flex flex-col gap-2">
+      <div
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !isEmpty) handleSubmit(onEnter)(e);
+        }}
+      >
+        <LiteTextEditor
+          editable
+          workspaceId={workspaceId}
+          workspaceSlug={workspaceSlug}
+          ref={editorRef}
+          id={comment.id}
+          initialValue={commentHTML ?? ""}
+          value={null}
+          onChange={(_comment_json, comment_html) => setValue("comment_html", comment_html)}
+          onEnterKeyPress={(e) => {
+            if (!isEmpty && !isSubmitting) {
+              handleSubmit(onEnter)(e);
+            }
+          }}
+          showSubmitButton={false}
+          uploadFile={async (blockId, file) => {
+            const { asset_id } = await activityOperations.uploadCommentAsset(blockId, file, comment.id);
+            return asset_id;
+          }}
+          duplicateFile={async (assetId: string) => {
+            const { asset_id } = await activityOperations.duplicateCommentAsset(assetId, comment.id);
+            return asset_id;
+          }}
+          projectId={projectId}
+          parentClassName="p-2 bg-surface-1"
+          displayConfig={{
+            fontSize: "small-font",
+          }}
+        />
+      </div>
+      <div className="flex gap-2 self-end">
+        {!isEmpty && (
+          <button
+            type="button"
+            onClick={handleSubmit(onEnter)}
+            disabled={isDisabled}
+            className={cn(
+              "group grid size-7 place-items-center rounded-lg border border-success-subtle bg-success-subtle shadow-raised-100 duration-300",
+              isDisabled ? "" : "hover:bg-success-subtle-1"
+            )}
+          >
+            <TickOutline className="size-4 text-success-primary" />
+          </button>
+        )}
+        <button
+          type="button"
+          disabled={isSubmitting}
+          className={cn(
+            "group grid size-7 place-items-center rounded-lg border border-danger-subtle bg-danger-subtle shadow-raised-100 duration-300",
+            isSubmitting ? "" : "hover:bg-danger-subtle-hover"
+          )}
+          onClick={() => {
+            setIsEditing(false);
+            editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
+          }}
+        >
+          <CloseOutline className="size-4 text-danger-primary" />
+        </button>
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/comments/card/root.tsx b/apps/web/core/components/comments/card/root.tsx
new file mode 100644
index 0000000..b7837c4
--- /dev/null
+++ b/apps/web/core/components/comments/card/root.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import type { TIssueComment, TCommentsOperations } from "@plane/types";
+// local imports
+import { CommentQuickActions } from "../quick-actions";
+import { CommentBlock } from "../comment-block";
+import { CommentCardDisplay } from "./display";
+
+type TCommentCard = {
+  workspaceSlug: string;
+  entityId: string;
+  comment: TIssueComment | undefined;
+  activityOperations: TCommentsOperations;
+  ends: "top" | "bottom" | undefined;
+  showAccessSpecifier: boolean;
+  showCopyLinkOption: boolean;
+  enableReplies: boolean;
+  disabled?: boolean;
+  projectId?: string;
+};
+
+export const CommentCard = observer(function CommentCard(props: TCommentCard) {
+  const {
+    workspaceSlug,
+    entityId,
+    comment,
+    activityOperations,
+    ends,
+    showAccessSpecifier,
+    showCopyLinkOption,
+    disabled = false,
+    projectId,
+  } = props;
+  // states
+  const [isEditing, setIsEditing] = useState(false);
+  // refs
+  const readOnlyEditorRef = useRef<EditorRefApi>(null);
+  // derived values
+  const workspaceId = comment?.workspace;
+
+  if (!comment || !workspaceId) return null;
+
+  return (
+    <CommentBlock comment={comment} ends={ends}>
+      <CommentCardDisplay
+        activityOperations={activityOperations}
+        entityId={entityId}
+        comment={comment}
+        disabled={disabled}
+        projectId={projectId}
+        readOnlyEditorRef={readOnlyEditorRef}
+        showAccessSpecifier={showAccessSpecifier}
+        workspaceId={workspaceId}
+        workspaceSlug={workspaceSlug}
+        isEditing={isEditing}
+        setIsEditing={setIsEditing}
+        renderQuickActions={() => (
+          <CommentQuickActions
+            activityOperations={activityOperations}
+            comment={comment}
+            setEditMode={() => setIsEditing(true)}
+            showAccessSpecifier={showAccessSpecifier}
+            showCopyLinkOption={showCopyLinkOption}
+          />
+        )}
+      />
+    </CommentBlock>
+  );
+});
diff --git a/apps/web/core/components/comments/comment-block.tsx b/apps/web/core/components/comments/comment-block.tsx
new file mode 100644
index 0000000..ef1f051
--- /dev/null
+++ b/apps/web/core/components/comments/comment-block.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ReplyOutline } from "@makeplane/propel/icons";
+import type { TIssueComment } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+
+type TCommentBlock = {
+  comment: TIssueComment;
+  ends: "top" | "bottom" | undefined;
+  children: ReactNode;
+};
+
+export const CommentBlock = observer(function CommentBlock(props: TCommentBlock) {
+  const { comment, ends, children } = props;
+  const commentBlockRef = useRef<HTMLDivElement>(null);
+
+  if (!comment) return null;
+  return (
+    <div
+      id={comment.id}
+      className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}
+      ref={commentBlockRef}
+    >
+      <div
+        className="transition-border absolute top-0 bottom-0 left-[13px] w-px bg-layer-3 duration-1000"
+        aria-hidden
+      />
+      <div
+        className={cn(
+          "transition-border relative z-[3] flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg border border-subtle bg-layer-2 uppercase shadow-raised-100 duration-1000"
+        )}
+      >
+        <ReplyOutline width={14} height={14} className="text-secondary" aria-hidden="true" />
+      </div>
+      <div className="flex flex-grow flex-col gap-3 truncate">
+        <div className="mb-2 rounded-lg border border-subtle bg-layer-2 p-3 text-body-sm-regular shadow-raised-100">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/comments/comment-create.tsx b/apps/web/core/components/comments/comment-create.tsx
new file mode 100644
index 0000000..d230a5b
--- /dev/null
+++ b/apps/web/core/components/comments/comment-create.tsx
@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useForm, Controller } from "react-hook-form";
+// plane imports
+import { EIssueCommentAccessSpecifier } from "@plane/constants";
+import type { EditorRefApi } from "@plane/editor";
+import type { TIssueComment, TCommentsOperations } from "@plane/types";
+import { cn, isCommentEmpty } from "@plane/utils";
+// components
+import { LiteTextEditor } from "@/components/editor/lite-text";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// services
+import { FileService } from "@/services/file.service";
+
+type TCommentCreate = {
+  entityId: string;
+  workspaceSlug: string;
+  activityOperations: TCommentsOperations;
+  showToolbarInitially?: boolean;
+  projectId?: string;
+  onSubmitCallback?: (elementId: string) => void;
+};
+
+// services
+const fileService = new FileService();
+
+export const CommentCreate = observer(function CommentCreate(props: TCommentCreate) {
+  const {
+    workspaceSlug,
+    entityId,
+    activityOperations,
+    showToolbarInitially = false,
+    projectId,
+    onSubmitCallback,
+  } = props;
+  // states
+  const [uploadedAssetIds, setUploadedAssetIds] = useState<string[]>([]);
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // store hooks
+  const workspaceStore = useWorkspace();
+  // derived values
+  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
+  // form info
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<Partial<TIssueComment>>({
+    defaultValues: {
+      comment_html: "<p></p>",
+    },
+  });
+
+  const onSubmit = async (formData: Partial<TIssueComment>) => {
+    try {
+      const comment = await activityOperations.createComment(formData);
+      if (comment?.id) onSubmitCallback?.(comment.id);
+      if (uploadedAssetIds.length > 0) {
+        if (projectId) {
+          await fileService.updateBulkProjectAssetsUploadStatus(workspaceSlug, projectId.toString(), entityId, {
+            asset_ids: uploadedAssetIds,
+          });
+        } else {
+          await fileService.updateBulkWorkspaceAssetsUploadStatus(workspaceSlug, entityId, {
+            asset_ids: uploadedAssetIds,
+          });
+        }
+        setUploadedAssetIds([]);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      reset({
+        comment_html: "<p></p>",
+      });
+      editorRef.current?.clearEditor();
+    }
+  };
+
+  const commentHTML = watch("comment_html");
+  const isEmpty = isCommentEmpty(commentHTML ?? undefined);
+
+  return (
+    <div
+      className={cn("sticky bottom-0 z-[4] bg-surface-1 sm:static")}
+      onKeyDown={(e) => {
+        if (
+          e.key === "Enter" &&
+          !e.shiftKey &&
+          !e.ctrlKey &&
+          !e.metaKey &&
+          !isEmpty &&
+          !isSubmitting &&
+          editorRef.current?.isEditorReadyToDiscard()
+        )
+          handleSubmit(onSubmit)(e);
+      }}
+    >
+      <Controller
+        name="access"
+        control={control}
+        render={({ field: { onChange: onAccessChange, value: accessValue } }) => (
+          <Controller
+            name="comment_html"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <LiteTextEditor
+                editable
+                workspaceId={workspaceId}
+                id={"add_comment_" + entityId}
+                value={"<p></p>"}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                onEnterKeyPress={(e) => {
+                  if (!isEmpty && !isSubmitting) {
+                    handleSubmit(onSubmit)(e);
+                  }
+                }}
+                ref={editorRef}
+                initialValue={value ?? "<p></p>"}
+                containerClassName="min-h-min"
+                onChange={(comment_json, comment_html) => onChange(comment_html)}
+                accessSpecifier={accessValue ?? EIssueCommentAccessSpecifier.INTERNAL}
+                handleAccessChange={onAccessChange}
+                isSubmitting={isSubmitting}
+                uploadFile={async (blockId, file) => {
+                  const { asset_id } = await activityOperations.uploadCommentAsset(blockId, file);
+                  setUploadedAssetIds((prev) => [...prev, asset_id]);
+                  return asset_id;
+                }}
+                duplicateFile={async (assetId: string) => {
+                  const { asset_id } = await activityOperations.duplicateCommentAsset(assetId);
+                  setUploadedAssetIds((prev) => [...prev, asset_id]);
+                  return asset_id;
+                }}
+                showToolbarInitially={showToolbarInitially}
+                parentClassName="p-2"
+                displayConfig={{
+                  fontSize: "small-font",
+                }}
+              />
+            )}
+          />
+        )}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/comments/comment-reaction.tsx b/apps/web/core/components/comments/comment-reaction.tsx
new file mode 100644
index 0000000..709de31
--- /dev/null
+++ b/apps/web/core/components/comments/comment-reaction.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
+import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
+import type { TCommentsOperations, TIssueComment } from "@plane/types";
+// helpers
+// local imports
+
+export type TProps = {
+  comment: TIssueComment;
+  disabled?: boolean;
+  activityOperations: TCommentsOperations;
+};
+
+export const CommentReactions = observer(function CommentReactions(props: TProps) {
+  const { comment, activityOperations, disabled = false } = props;
+  // state
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+
+  const userReactions = activityOperations.userReactions(comment.id);
+  const reactionIds = activityOperations.reactionIds(comment.id);
+
+  // Transform reactions data to Propel EmojiReactionType format
+  const reactions: EmojiReactionType[] = useMemo(() => {
+    if (!reactionIds) return [];
+
+    return Object.keys(reactionIds)
+      .filter((reaction) => reactionIds[reaction]?.length > 0)
+      .map((reaction) => {
+        // Get user names for this reaction
+        const tooltipContent = activityOperations.getReactionUsers(reaction, reactionIds);
+        // Parse the tooltip content string to extract user names
+        const users = tooltipContent ? tooltipContent.split(", ") : [];
+
+        return {
+          emoji: stringToEmoji(reaction),
+          count: reactionIds[reaction].length,
+          reacted: userReactions?.includes(reaction) || false,
+          users: users,
+        };
+      });
+  }, [reactionIds, userReactions, activityOperations]);
+
+  const handleReactionClick = (emoji: string) => {
+    if (disabled || !userReactions) return;
+    // Convert emoji back to decimal string format for the API
+    const emojiCodePoints = Array.from(emoji).map((char) => char.codePointAt(0));
+    const reactionString = emojiCodePoints.join("-");
+    activityOperations.react(comment.id, reactionString, userReactions);
+  };
+
+  const handleEmojiSelect = (emoji: string) => {
+    if (!userReactions) return;
+    // emoji is already in decimal string format from EmojiReactionPicker
+    activityOperations.react(comment.id, emoji, userReactions);
+  };
+
+  if (!userReactions) return null;
+
+  // Don't render anything if there are no reactions and it's disabled
+  if (reactions.length === 0 && disabled) return null;
+
+  // Don't show the add button if there are no reactions
+  const showAddButton = !disabled && reactions.length > 0;
+
+  return (
+    <div className="relative">
+      <EmojiReactionPicker
+        isOpen={isPickerOpen}
+        handleToggle={setIsPickerOpen}
+        onChange={handleEmojiSelect}
+        disabled={disabled}
+        label={
+          <EmojiReactionGroup
+            reactions={reactions}
+            onReactionClick={handleReactionClick}
+            showAddButton={showAddButton}
+            onAddReaction={() => setIsPickerOpen(true)}
+          />
+        }
+        placement="bottom-start"
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/comments/comments.tsx b/apps/web/core/components/comments/comments.tsx
new file mode 100644
index 0000000..88befc2
--- /dev/null
+++ b/apps/web/core/components/comments/comments.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { E_SORT_ORDER } from "@plane/constants";
+import type { TCommentsOperations, TIssueComment } from "@plane/types";
+// local components
+import { CommentCard } from "./card/root";
+import { CommentCreate } from "./comment-create";
+
+type TCommentsWrapper = {
+  projectId?: string;
+  entityId: string;
+  isEditingAllowed?: boolean;
+  activityOperations: TCommentsOperations;
+  comments: TIssueComment[] | string[];
+  sortOrder?: E_SORT_ORDER;
+  getCommentById?: (activityId: string) => TIssueComment | undefined;
+  showAccessSpecifier?: boolean;
+  showCopyLinkOption?: boolean;
+  enableReplies?: boolean;
+};
+
+export const CommentsWrapper = observer(function CommentsWrapper(props: TCommentsWrapper) {
+  const {
+    entityId,
+    activityOperations,
+    comments,
+    getCommentById,
+    isEditingAllowed = true,
+    projectId,
+    showAccessSpecifier = false,
+    showCopyLinkOption = false,
+    enableReplies = false,
+  } = props;
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const renderCommentCreate = useMemo(
+    () =>
+      isEditingAllowed && (
+        <CommentCreate
+          workspaceSlug={workspaceSlug}
+          entityId={entityId}
+          activityOperations={activityOperations}
+          projectId={projectId}
+        />
+      ),
+    [isEditingAllowed, workspaceSlug, entityId, activityOperations, projectId]
+  );
+
+  return (
+    <div className="relative flex h-full flex-col gap-y-2 overflow-hidden">
+      {renderCommentCreate}
+      <div className="flex-grow overflow-y-auto py-4">
+        {comments?.map((data, index) => {
+          let comment;
+          if (typeof data === "string") {
+            comment = getCommentById?.(data);
+          } else {
+            comment = data;
+          }
+
+          if (!comment) return null;
+          return (
+            <CommentCard
+              key={comment.id}
+              workspaceSlug={workspaceSlug}
+              entityId={entityId}
+              comment={comment}
+              activityOperations={activityOperations}
+              disabled={!isEditingAllowed}
+              ends={index === 0 ? "top" : index === comments.length - 1 ? "bottom" : undefined}
+              projectId={projectId}
+              showAccessSpecifier={showAccessSpecifier}
+              showCopyLinkOption={showCopyLinkOption}
+              enableReplies={enableReplies}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/comments/index.ts b/apps/web/core/components/comments/index.ts
new file mode 100644
index 0000000..b20656c
--- /dev/null
+++ b/apps/web/core/components/comments/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./comments";
diff --git a/apps/web/core/components/comments/quick-actions.tsx b/apps/web/core/components/comments/quick-actions.tsx
new file mode 100644
index 0000000..154ca32
--- /dev/null
+++ b/apps/web/core/components/comments/quick-actions.tsx
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import {
+  DeleteOutline,
+  EditOutline,
+  GlobeOutline,
+  LinkOutline,
+  LockOutline,
+  MoreHorizontalOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { EIssueCommentAccessSpecifier } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
+import type { TIssueComment, TCommentsOperations } from "@plane/types";
+import type { TContextMenuItem } from "@plane/ui";
+import { CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useUser } from "@/hooks/store/user";
+
+type TCommentCard = {
+  activityOperations: TCommentsOperations;
+  comment: TIssueComment;
+  setEditMode: () => void;
+  showAccessSpecifier: boolean;
+  showCopyLinkOption: boolean;
+};
+
+export const CommentQuickActions = observer(function CommentQuickActions(props: TCommentCard) {
+  const { activityOperations, comment, setEditMode, showAccessSpecifier, showCopyLinkOption } = props;
+  // store hooks
+  const { data: currentUser } = useUser();
+  // derived values
+  const isAuthor = currentUser?.id === comment.actor;
+  const canEdit = isAuthor;
+  const canDelete = isAuthor;
+  // translation
+  const { t } = useTranslation();
+
+  const MENU_ITEMS = useMemo(
+    function MENU_ITEMS(): TContextMenuItem[] {
+      return [
+        {
+          key: "edit",
+          action: setEditMode,
+          title: t("common.actions.edit"),
+          icon: EditOutline,
+          shouldRender: canEdit,
+        },
+        {
+          key: "copy_link",
+          action: () => activityOperations.copyCommentLink(comment.id),
+          title: t("common.actions.copy_link"),
+          icon: LinkOutline,
+          shouldRender: showCopyLinkOption,
+        },
+        {
+          key: "access_specifier",
+          action: () =>
+            activityOperations.updateComment(comment.id, {
+              access:
+                comment.access === EIssueCommentAccessSpecifier.INTERNAL
+                  ? EIssueCommentAccessSpecifier.EXTERNAL
+                  : EIssueCommentAccessSpecifier.INTERNAL,
+            }),
+          title:
+            comment.access === EIssueCommentAccessSpecifier.INTERNAL
+              ? t("issue.comments.switch.public")
+              : t("issue.comments.switch.private"),
+          icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? GlobeOutline : LockOutline,
+          shouldRender: showAccessSpecifier,
+        },
+        {
+          key: "delete",
+          action: () => activityOperations.removeComment(comment.id),
+          title: t("common.actions.delete"),
+          icon: DeleteOutline,
+          shouldRender: canDelete,
+        },
+      ].filter((item) => item.shouldRender !== false);
+    },
+    [t, setEditMode, canEdit, showCopyLinkOption, activityOperations, comment, showAccessSpecifier, canDelete]
+  );
+
+  if (MENU_ITEMS.length === 0) return null;
+
+  return (
+    <CustomMenu customButton={<IconButton icon={MoreHorizontalOutline} variant="ghost" size="sm" />} closeOnSelect>
+      {MENU_ITEMS.map((item) => (
+        <CustomMenu.MenuItem
+          key={item.key}
+          onClick={() => item.action()}
+          className={cn(
+            "flex items-center gap-2",
+            {
+              "text-placeholder": item.disabled,
+            },
+            item.className
+          )}
+          disabled={item.disabled}
+        >
+          {item.icon && <item.icon className={cn("size-3 shrink-0", item.iconClassName)} />}
+          <div>
+            <h5>{item.title}</h5>
+            {item.description && (
+              <p
+                className={cn("whitespace-pre-line text-tertiary", {
+                  "text-placeholder": item.disabled,
+                })}
+              >
+                {item.description}
+              </p>
+            )}
+          </div>
+        </CustomMenu.MenuItem>
+      ))}
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/common/access-field.tsx b/apps/web/core/components/common/access-field.tsx
new file mode 100644
index 0000000..d332fcd
--- /dev/null
+++ b/apps/web/core/components/common/access-field.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LucideIcon } from "lucide-react";
+// plane ui
+import { useTranslation } from "@plane/i18n";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// plane utils
+import { cn } from "@plane/utils";
+
+type Props = {
+  onChange: (value: number) => void;
+  value: number;
+  accessSpecifiers: {
+    key: number;
+    i18n_label: string;
+    icon: LucideIcon | React.FC<ISvgIcons>;
+  }[];
+  isMobile?: boolean;
+};
+
+export function AccessField(props: Props) {
+  const { onChange, value, accessSpecifiers, isMobile = false } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[1px] border-subtle p-1">
+      {accessSpecifiers.map((access, index) => {
+        const label = t(access.i18n_label);
+        return (
+          <Tooltip key={access.key} label={label} layout="stacked" disabled={isMobile}>
+            <button
+              type="button"
+              aria-label={label}
+              onClick={() => onChange(access.key)}
+              className={cn(
+                "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs p-1 transition-all",
+                value === access.key ? "bg-layer-1" : "hover:bg-layer-1"
+              )}
+              tabIndex={2 + index}
+            >
+              <access.icon
+                className={cn("h-3.5 w-3.5 transition-all", value === access.key ? "text-primary" : "text-placeholder")}
+                strokeWidth={2}
+              />
+            </button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/common/activity/activity-block.tsx b/apps/web/core/components/common/activity/activity-block.tsx
new file mode 100644
index 0000000..c7486c0
--- /dev/null
+++ b/apps/web/core/components/common/activity/activity-block.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC, ReactNode } from "react";
+import { HierarchyOutline } from "@makeplane/propel/icons";
+// types
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TWorkspaceBaseActivity } from "@plane/types";
+// ui
+// helpers
+import { renderFormattedTime, renderFormattedDate, calculateTimeAgo } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local components
+import { User } from "./user";
+
+type TActivityBlockComponent = {
+  icon?: FC<{ className?: string }>;
+  activity: TWorkspaceBaseActivity;
+  ends: "top" | "bottom" | undefined;
+  children: ReactNode;
+  customUserName?: string;
+};
+
+export function ActivityBlockComponent(props: TActivityBlockComponent) {
+  const { icon: Icon, activity, ends, children, customUserName } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  if (!activity) return <></>;
+  return (
+    <div
+      className={`relative flex items-start gap-2 text-caption-sm-regular ${
+        ends === "top" ? `pb-3` : ends === "bottom" ? `pt-3` : `py-3`
+      }`}
+    >
+      <div className="z-[4] mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-subtle text-secondary shadow-raised-100">
+        {Icon ? <Icon className="h-3.5 w-3.5 shrink-0" /> : <HierarchyOutline className="h-3.5 w-3.5 shrink-0" />}
+      </div>
+      <div className="w-full text-secondary">
+        <div className="line-clamp-2">
+          <User activity={activity} customUserName={customUserName} /> {children}
+        </div>
+        <div className="mt-1">
+          <Tooltip
+            label={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`}
+            disabled={isMobile}
+          >
+            <span className="cursor-help font-medium whitespace-nowrap text-tertiary">
+              {calculateTimeAgo(activity.created_at)}
+            </span>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/common/activity/activity-item.tsx b/apps/web/core/components/common/activity/activity-item.tsx
new file mode 100644
index 0000000..e53c724
--- /dev/null
+++ b/apps/web/core/components/common/activity/activity-item.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import type { TProjectActivity } from "@plane/types";
+import { ActivityBlockComponent } from "./activity-block";
+import { iconsMap, messages } from "./helper";
+
+type TActivityItem = {
+  activity: TProjectActivity;
+  showProject?: boolean;
+  ends?: "top" | "bottom" | undefined;
+};
+
+export const ActivityItem = observer(function ActivityItem(props: TActivityItem) {
+  const { activity, ends } = props;
+
+  if (!activity) return null;
+
+  const activityType = activity.field;
+  if (!activityType) return null;
+
+  const { message, customUserName } = messages(activity);
+  const icon = iconsMap[activityType] || iconsMap.default;
+
+  return (
+    <ActivityBlockComponent icon={icon} activity={activity} ends={ends} customUserName={customUserName}>
+      <>{message}</>
+    </ActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/common/activity/helper.tsx b/apps/web/core/components/common/activity/helper.tsx
new file mode 100644
index 0000000..064f9d0
--- /dev/null
+++ b/apps/web/core/components/common/activity/helper.tsx
@@ -0,0 +1,291 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC, ReactNode } from "react";
+import {
+  AlignLeftOutline,
+  ArchiveOutline,
+  AttachOutline,
+  ClockOutline,
+  CyclesOutline,
+  DocumentationOutline,
+  DueDateOutline,
+  EstimateOutline,
+  GitBranchOutline,
+  GlobeOutline,
+  GridOutline,
+  HashOutline,
+  HierarchyOutline,
+  InboxOutline,
+  IntakeOutline,
+  LabelsOutline,
+  LinkOutline,
+  MembersOutline,
+  ModuleOutline,
+  PriorityOutline,
+  RefreshOutline,
+  StartDateOutline,
+  StateOutline,
+  SubscribeOutline,
+  TextOutline,
+  TimeTrackingOutline,
+  ToDoOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+// components
+
+import { store } from "@/lib/store-context";
+import type { TProjectActivity } from "@plane/types";
+
+type ActivityIconMap = {
+  [key: string]: FC<{ className?: string }>;
+};
+export const iconsMap: ActivityIconMap = {
+  priority: PriorityOutline,
+  archived_at: ArchiveOutline,
+  restored: RefreshOutline,
+  link: LinkOutline,
+  start_date: StartDateOutline,
+  target_date: DueDateOutline,
+  label: LabelsOutline,
+  inbox: InboxOutline,
+  description: AlignLeftOutline,
+  assignee: MembersOutline,
+  attachment: AttachOutline,
+  name: TextOutline,
+  state: StateOutline,
+  estimate: EstimateOutline,
+  cycle: CyclesOutline,
+  module: ModuleOutline,
+  page: DocumentationOutline,
+  network: GlobeOutline,
+  identifier: HashOutline,
+  timezone: ClockOutline,
+  is_project_updates_enabled: SubscribeOutline,
+  is_epic_enabled: GridOutline,
+  is_workflow_enabled: GitBranchOutline,
+  is_time_tracking_enabled: TimeTrackingOutline,
+  is_issue_type_enabled: ToDoOutline,
+  default: HierarchyOutline,
+  module_view: ModuleOutline,
+  cycle_view: CyclesOutline,
+  issue_views_view: WorkItemsOutline,
+  page_view: DocumentationOutline,
+  intake_view: IntakeOutline,
+};
+
+export const messages = (activity: TProjectActivity): { message: string | ReactNode; customUserName?: string } => {
+  const activityType = activity.field;
+  const newValue = activity.new_value;
+  const oldValue = activity.old_value;
+  const verb = activity.verb;
+  const workspaceDetail = store.workspaceRoot.getWorkspaceById(activity.workspace);
+
+  const getBooleanActionText = (value: string | undefined) => {
+    if (value === "true") return "enabled";
+    if (value === "false") return "disabled";
+    return verb;
+  };
+
+  switch (activityType) {
+    case "priority":
+      return {
+        message: (
+          <>
+            set the priority to <span className="font-medium text-primary">{newValue || "none"}</span>
+          </>
+        ),
+      };
+    case "archived_at":
+      return {
+        message: newValue === "restore" ? "restored the project" : "archived the project",
+        customUserName: newValue === "archive" ? "Plane" : undefined,
+      };
+    case "name":
+      return {
+        message: (
+          <>
+            renamed the project to <span className="font-medium text-primary">{newValue}</span>
+          </>
+        ),
+      };
+    case "description":
+      return {
+        message: newValue ? "updated the project description" : "removed the project description",
+      };
+    case "start_date":
+      return {
+        message: (
+          <>
+            {newValue ? (
+              <>
+                set the start date to <span className="font-medium text-primary">{newValue}</span>
+              </>
+            ) : (
+              "removed the start date"
+            )}
+          </>
+        ),
+      };
+    case "target_date":
+      return {
+        message: (
+          <>
+            {newValue ? (
+              <>
+                set the target date to <span className="font-medium text-primary">{newValue}</span>
+              </>
+            ) : (
+              "removed the target date"
+            )}
+          </>
+        ),
+      };
+    case "state":
+      return {
+        message: (
+          <>
+            set the state to <span className="font-medium text-primary">{newValue || "none"}</span>
+          </>
+        ),
+      };
+    case "estimate":
+      return {
+        message: (
+          <>
+            {newValue ? (
+              <>
+                set the estimate point to <span className="font-medium text-primary">{newValue}</span>
+              </>
+            ) : (
+              <>
+                removed the estimate point
+                {oldValue && (
+                  <>
+                    {" "}
+                    <span className="font-medium text-primary">{oldValue}</span>
+                  </>
+                )}
+              </>
+            )}
+          </>
+        ),
+      };
+    case "cycles":
+      return {
+        message: (
+          <>
+            <span>
+              {verb} this project {verb === "removed" ? "from" : "to"} the cycle{" "}
+            </span>
+            {verb !== "removed" ? (
+              <a
+                href={`/${workspaceDetail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex font-medium text-primary"
+              >
+                {activity.new_value}
+              </a>
+            ) : (
+              <span className="font-medium text-primary">{activity.old_value || "Unknown cycle"}</span>
+            )}
+          </>
+        ),
+      };
+    case "modules":
+      return {
+        message: (
+          <>
+            <span>
+              {verb} this project {verb === "removed" ? "from" : "to"} the module{" "}
+            </span>
+            <span className="font-medium text-primary">
+              {verb === "removed" ? oldValue : newValue || "Unknown module"}
+            </span>
+          </>
+        ),
+      };
+    case "labels":
+      return {
+        message: (
+          <>
+            {verb} the label{" "}
+            <span className="font-medium text-primary">{newValue || oldValue || "Untitled label"}</span>
+          </>
+        ),
+      };
+    case "inbox":
+      return {
+        message: <>{newValue ? "enabled" : "disabled"} inbox</>,
+      };
+    case "page":
+      return {
+        message: (
+          <>
+            {newValue ? "created" : "removed"} the project page{" "}
+            <span className="font-medium text-primary">{newValue || oldValue || "Untitled page"}</span>
+          </>
+        ),
+      };
+    case "network":
+      return {
+        message: <>{newValue ? "enabled" : "disabled"} network access</>,
+      };
+    case "identifier":
+      return {
+        message: (
+          <>
+            updated project identifier to <span className="font-medium text-primary">{newValue || "none"}</span>
+          </>
+        ),
+      };
+    case "timezone":
+      return {
+        message: (
+          <>
+            changed project timezone to <span className="font-medium text-primary">{newValue || "default"}</span>
+          </>
+        ),
+      };
+    case "module_view":
+    case "cycle_view":
+    case "issue_views_view":
+    case "page_view":
+    case "intake_view":
+      return {
+        message: (
+          <>
+            {getBooleanActionText(newValue)} {activityType.replace(/_view$/, "").replace(/_/g, " ")} view
+          </>
+        ),
+      };
+    case "is_project_updates_enabled":
+      return {
+        message: <>{getBooleanActionText(newValue)} project updates</>,
+      };
+    case "is_epic_enabled":
+      return {
+        message: <>{getBooleanActionText(newValue)} epics</>,
+      };
+    case "is_workflow_enabled":
+      return {
+        message: <>{getBooleanActionText(newValue)} custom workflow</>,
+      };
+    case "is_time_tracking_enabled":
+      return {
+        message: <>{getBooleanActionText(newValue)} time tracking</>,
+      };
+    case "is_issue_type_enabled":
+      return {
+        message: <>{getBooleanActionText(newValue)} work item types</>,
+      };
+    default:
+      return {
+        message: `${verb} ${activityType?.replace(/_/g, " ")} `,
+      };
+  }
+};
diff --git a/apps/web/core/components/common/activity/user.tsx b/apps/web/core/components/common/activity/user.tsx
new file mode 100644
index 0000000..595a960
--- /dev/null
+++ b/apps/web/core/components/common/activity/user.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+// types
+import type { TWorkspaceBaseActivity } from "@plane/types";
+// store hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+type TUser = {
+  activity: TWorkspaceBaseActivity;
+  customUserName?: string;
+};
+
+export const User = observer(function User(props: TUser) {
+  const { activity, customUserName } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { getWorkspaceById } = useWorkspace();
+  // derived values
+  const actorDetail = getUserDetails(activity.actor);
+  const workspaceDetail = getWorkspaceById(activity.workspace);
+
+  return (
+    <>
+      {customUserName || actorDetail?.display_name?.includes("-intake") ? (
+        <span className="font-medium text-primary">{customUserName || "Plane"}</span>
+      ) : (
+        <Link
+          href={`/${workspaceDetail?.slug}/profile/${actorDetail?.id}`}
+          className="font-medium text-primary hover:underline"
+        >
+          {actorDetail?.display_name}
+        </Link>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/common/applied-filters/date.tsx b/apps/web/core/components/common/applied-filters/date.tsx
new file mode 100644
index 0000000..a38f048
--- /dev/null
+++ b/apps/web/core/components/common/applied-filters/date.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// icons
+import { DATE_BEFORE_FILTER_OPTIONS } from "@plane/constants";
+import { CloseOutline } from "@makeplane/propel/icons";
+// plane constants
+import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
+// helpers
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
+  const { editable, handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_BEFORE_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          {editable && (
+            <button
+              type="button"
+              className="grid place-items-center text-tertiary hover:text-secondary"
+              onClick={() => handleRemove(date)}
+            >
+              <CloseOutline height={10} width={10} />
+            </button>
+          )}
+        </div>
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/common/applied-filters/members.tsx b/apps/web/core/components/common/applied-filters/members.tsx
new file mode 100644
index 0000000..97e0a8a
--- /dev/null
+++ b/apps/web/core/components/common/applied-filters/members.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { CloseOutline } from "@makeplane/propel/icons";
+// plane ui
+import { Avatar } from "@makeplane/propel/components/avatar";
+// helpers
+import { getFileURL } from "@plane/utils";
+// types
+import { useMember } from "@/hooks/store/use-member";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedMembersFilters = observer(function AppliedMembersFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const {
+    workspace: { getWorkspaceMemberDetails },
+  } = useMember();
+
+  return (
+    <>
+      {values.map((memberId) => {
+        const memberDetails = getWorkspaceMemberDetails(memberId)?.member;
+
+        if (!memberDetails) return null;
+
+        return (
+          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
+            <Avatar
+              alt={memberDetails.display_name}
+              fallback={memberDetails.display_name?.[0]?.toUpperCase()}
+              src={getFileURL(memberDetails.avatar_url)}
+              size="2xs"
+            />
+            <span className="normal-case">{memberDetails.display_name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(memberId)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/common/avatar-group-overflow.tsx b/apps/web/core/components/common/avatar-group-overflow.tsx
new file mode 100644
index 0000000..3686125
--- /dev/null
+++ b/apps/web/core/components/common/avatar-group-overflow.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { AvatarGroup, type AvatarGroupSize } from "@makeplane/propel/components/avatar-group";
+
+type Props = {
+  children: React.ReactNode;
+  /**
+   * Shared size for every avatar in the stack.
+   */
+  size: AvatarGroupSize;
+  /**
+   * The maximum number of avatars to display. If the number of children exceeds this value, the
+   * additional avatars are replaced by a count of the remaining avatars.
+   * @default 2
+   */
+  max?: number;
+};
+
+/**
+ * An overlapping avatar stack that collapses the tail into a `+N` counter.
+ *
+ * Propel's `AvatarGroup` renders every child it is given, so the capping behaviour that
+ * `@plane/ui`'s `AvatarGroup` provided through `max` lives here as app chrome. The overflow
+ * indicator is a Propel `Avatar` with a `fallback`, matching the Avatar Group overflow pattern.
+ */
+export function AvatarGroupOverflow(props: Props) {
+  const { children, size, max = 2 } = props;
+
+  const avatars = React.Children.toArray(children);
+  const totalAvatars = avatars.length;
+  // If there is only one avatar past the limit, render it instead of a "+1" counter.
+  const maxAvatarsToRender = totalAvatars <= max + 1 ? max + 1 : max;
+  const overflowCount = totalAvatars - max;
+
+  return (
+    <AvatarGroup size={size}>
+      {avatars.slice(0, maxAvatarsToRender)}
+      {maxAvatarsToRender < totalAvatars && (
+        <Avatar alt={`${overflowCount} more members`} fallback={`+${overflowCount}`} />
+      )}
+    </AvatarGroup>
+  );
+}
diff --git a/apps/web/core/components/common/breadcrumb-link.tsx b/apps/web/core/components/common/breadcrumb-link.tsx
new file mode 100644
index 0000000..dd75679
--- /dev/null
+++ b/apps/web/core/components/common/breadcrumb-link.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { Breadcrumbs } from "@plane/ui";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  label?: string;
+  href?: string;
+  icon?: React.ReactNode;
+  disableTooltip?: boolean;
+  isLast?: boolean;
+};
+
+const IconWrapper = React.memo(function IconWrapper({ icon }: { icon: React.ReactNode }) {
+  return <div className="flex size-4 items-center justify-center overflow-hidden !text-16">{icon}</div>;
+});
+
+IconWrapper.displayName = "IconWrapper";
+
+const LabelWrapper = React.memo(function LabelWrapper({ label }: { label: React.ReactNode }) {
+  return <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden text-primary">{label}</div>;
+});
+
+LabelWrapper.displayName = "LabelWrapper";
+
+const BreadcrumbContent = React.memo(function BreadcrumbContent({
+  icon,
+  label,
+}: {
+  icon?: React.ReactNode;
+  label?: React.ReactNode;
+}) {
+  if (!icon && !label) return null;
+
+  return (
+    <>
+      {icon && <IconWrapper icon={icon} />}
+      {label && <LabelWrapper label={label} />}
+    </>
+  );
+});
+
+BreadcrumbContent.displayName = "BreadcrumbContent";
+
+const ItemWrapper = React.memo(function ItemWrapper({
+  children,
+  ...props
+}: React.ComponentProps<typeof Breadcrumbs.ItemWrapper>) {
+  return <Breadcrumbs.ItemWrapper {...props}>{children}</Breadcrumbs.ItemWrapper>;
+});
+
+ItemWrapper.displayName = "ItemWrapper";
+
+export const BreadcrumbLink = observer(function BreadcrumbLink(props: Props) {
+  const { href, label, icon, disableTooltip = false, isLast = false } = props;
+  const { isMobile } = usePlatformOS();
+
+  const itemWrapperProps = useMemo(
+    (): Omit<React.ComponentProps<typeof ItemWrapper>, "children"> => ({
+      label: label?.toString(),
+      disableTooltip: isMobile || disableTooltip,
+      type: href && href !== "" ? "link" : "text",
+      isLast,
+    }),
+    [href, label, isMobile, disableTooltip, isLast]
+  );
+
+  const content = useMemo(() => <BreadcrumbContent icon={icon} label={label} />, [icon, label]);
+
+  if (href) {
+    return (
+      <Link href={href}>
+        <ItemWrapper {...itemWrapperProps}>{content}</ItemWrapper>
+      </Link>
+    );
+  }
+
+  return <ItemWrapper {...itemWrapperProps}>{content}</ItemWrapper>;
+});
diff --git a/apps/web/core/components/common/count-chip.tsx b/apps/web/core/components/common/count-chip.tsx
new file mode 100644
index 0000000..8b92041
--- /dev/null
+++ b/apps/web/core/components/common/count-chip.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+//
+import { cn } from "@plane/utils";
+
+type TCountChip = {
+  count: string | number;
+  className?: string;
+};
+
+export function CountChip(props: TCountChip) {
+  const { count, className = "" } = props;
+
+  return (
+    <div
+      className={cn(
+        "relative flex flex-shrink-0 items-center justify-center rounded-xl bg-accent-primary/20 px-2.5 py-0.5 text-caption-sm-semibold text-accent-primary",
+        className
+      )}
+    >
+      {count}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/common/cover-image.tsx b/apps/web/core/components/common/cover-image.tsx
new file mode 100644
index 0000000..85fed57
--- /dev/null
+++ b/apps/web/core/components/common/cover-image.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cn } from "@plane/utils";
+// helpers
+import { getCoverImageDisplayURL, DEFAULT_COVER_IMAGE_URL } from "@/helpers/cover-image.helper";
+
+type TCoverImageProps = {
+  /** The cover image URL - can be static, uploaded, or external */
+  src: string | null | undefined;
+  /** Alt text for the image */
+  alt?: string;
+  /** Additional className for the image or skeleton */
+  className?: string;
+  /** Whether to show default image when src is null/undefined. If false, shows loading skeleton */
+  showDefaultWhenEmpty?: boolean;
+  /** Custom fallback URL to use instead of DEFAULT_COVER_IMAGE_URL */
+  fallbackUrl?: string;
+} & React.ComponentProps<"img">;
+
+/**
+ * A reusable cover image component that handles:
+ * - Loading states with skeleton
+ * - Static images (local assets)
+ * - Uploaded images (processed through getFileURL)
+ * - External URLs
+ * - Fallback to default cover image
+ */
+export function CoverImage(props: TCoverImageProps) {
+  const {
+    src,
+    alt = "Cover image",
+    className,
+    showDefaultWhenEmpty = false,
+    fallbackUrl = DEFAULT_COVER_IMAGE_URL,
+    ...restProps
+  } = props;
+
+  // Show loading skeleton when src is undefined/null and we don't want to show default
+  if (!src && !showDefaultWhenEmpty) {
+    return <div className={cn("animate-pulse bg-layer-2", className)} />;
+  }
+
+  const displayUrl = getCoverImageDisplayURL(src, fallbackUrl);
+
+  return <img src={displayUrl} alt={alt} className={cn("object-cover", className)} {...restProps} />;
+}
diff --git a/apps/web/core/components/common/empty-state.tsx b/apps/web/core/components/common/empty-state.tsx
new file mode 100644
index 0000000..a5f469d
--- /dev/null
+++ b/apps/web/core/components/common/empty-state.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+// ui
+import { Button } from "@plane/propel/button";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image: any;
+  primaryButton?: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  secondaryButton?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export function EmptyState({ title, description, image, primaryButton, secondaryButton, disabled = false }: Props) {
+  return (
+    <div className={`flex h-full w-full items-center justify-center`}>
+      <div className="flex w-full flex-col items-center text-center">
+        <img src={image} className="w-52 object-contain sm:w-60" alt={primaryButton?.text || "button image"} />
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">{title}</h6>
+        {description && <p className="mb-7 px-5 text-tertiary sm:mb-8">{description}</p>}
+        <div className="flex items-center gap-4">
+          {primaryButton && (
+            <Button
+              variant="primary"
+              prependIcon={primaryButton.icon}
+              onClick={primaryButton.onClick}
+              disabled={disabled}
+            >
+              {primaryButton.text}
+            </Button>
+          )}
+          {secondaryButton}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/common/extended-app-header.tsx b/apps/web/core/components/common/extended-app-header.tsx
new file mode 100644
index 0000000..8149e25
--- /dev/null
+++ b/apps/web/core/components/common/extended-app-header.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "react-router";
+// components
+import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+
+export const ExtendedAppHeader = observer(function ExtendedAppHeader(props: { header: ReactNode }) {
+  const { header } = props;
+  // params
+  const { projectId, workItem } = useParams();
+  // preferences
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
+  // store hooks
+  const { sidebarCollapsed } = useAppTheme();
+  // derived values
+  const shouldShowSidebarToggleButton = projectPreferences.navigationMode === "ACCORDION" || (!projectId && !workItem);
+
+  return (
+    <>
+      {sidebarCollapsed && shouldShowSidebarToggleButton && <AppSidebarToggleButton />}
+      <div className="w-full">{header}</div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/common/filters/created-at.tsx b/apps/web/core/components/common/filters/created-at.tsx
new file mode 100644
index 0000000..7e298fa
--- /dev/null
+++ b/apps/web/core/components/common/filters/created-at.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { DATE_BEFORE_FILTER_OPTIONS } from "@plane/constants";
+import { isInDateFormat } from "@plane/utils";
+// components
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterCreatedDate = observer(function FilterCreatedDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_BEFORE_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Created date"
+        />
+      )}
+      <FilterHeader
+        title={`Created date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/common/filters/created-by.tsx b/apps/web/core/components/common/filters/created-by.tsx
new file mode 100644
index 0000000..f70cef7
--- /dev/null
+++ b/apps/web/core/components/common/filters/created-by.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// ui
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Created by${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`member-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          alt={member.display_name}
+                          fallback={member.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(member.avatar_url)}
+                          size="xs"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/common/latest-feature-block.tsx b/apps/web/core/components/common/latest-feature-block.tsx
new file mode 100644
index 0000000..dc1f821
--- /dev/null
+++ b/apps/web/core/components/common/latest-feature-block.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+import { useTheme } from "next-themes";
+// icons
+import { ThoughtsOutline } from "@makeplane/propel/icons";
+// images
+import latestFeatures from "@/app/assets/onboarding/onboarding-pages.webp?url";
+
+export function LatestFeatureBlock() {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      <div className="mx-auto mt-16 flex rounded-[3.5px] border border-subtle bg-surface-1 py-2 sm:w-96">
+        <ThoughtsOutline className="mx-3 mr-2 h-7 w-7" />
+        <p className="text-left text-13 text-primary">
+          Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
+          <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
+            <span className="text-13 font-medium underline hover:cursor-pointer">Learn more</span>
+          </Link>
+        </p>
+      </div>
+      <div
+        className={`mx-auto mt-8 overflow-hidden rounded-md border border-subtle object-cover sm:h-52 sm:w-96 ${
+          resolvedTheme === "dark" ? "bg-surface-1" : "bg-layer-2"
+        }`}
+      >
+        <div className="h-[90%]">
+          <img
+            src={latestFeatures}
+            alt="Plane Work items"
+            className={`-mt-2 ml-10 h-full rounded-md ${resolvedTheme === "dark" ? "bg-surface-1" : "bg-layer-2"}`}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/common/layout-error-boundary.tsx b/apps/web/core/components/common/layout-error-boundary.tsx
new file mode 100644
index 0000000..ead42f5
--- /dev/null
+++ b/apps/web/core/components/common/layout-error-boundary.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Component, Fragment } from "react";
+import type { ErrorInfo, ReactNode } from "react";
+import { WarningTriangleOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+
+type Props = {
+  children: ReactNode;
+};
+
+type State = {
+  hasError: boolean;
+  retryKey: number;
+};
+
+function LayoutErrorFallback({ onRetry }: { onRetry: () => void }) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-3 text-center">
+      <WarningTriangleOutline className="size-8 text-tertiary" />
+      <p className="text-14 text-secondary">{t("something_went_wrong")}</p>
+      <Button variant="secondary" size="sm" onClick={onRetry}>
+        {t("common.retry")}
+      </Button>
+    </div>
+  );
+}
+
+// Catches render crashes from a single issue layout (list/kanban/spreadsheet/calendar/gantt)
+// so a bad group/column shape degrades to a local fallback instead of taking down the whole page.
+export class LayoutErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false, retryKey: 0 };
+
+  static getDerivedStateFromError(): Partial<State> {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    // eslint-disable-next-line no-console
+    console.error("Issue layout crashed", error, info);
+  }
+
+  handleRetry = () => {
+    this.setState((prev) => ({ hasError: false, retryKey: prev.retryKey + 1 }));
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return <LayoutErrorFallback onRetry={this.handleRetry} />;
+    }
+    return <Fragment key={this.state.retryKey}>{this.props.children}</Fragment>;
+  }
+}
diff --git a/apps/web/core/components/common/layout/sidebar/property-list-item.tsx b/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
new file mode 100644
index 0000000..418830c
--- /dev/null
+++ b/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { cn } from "@plane/utils";
+
+type TSidebarPropertyListItemProps = {
+  icon: React.FC<{ className?: string }>;
+  label: string;
+  children: ReactNode;
+  appendElement?: ReactNode;
+  childrenClassName?: string;
+};
+
+export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
+  const { icon: Icon, label, children, appendElement, childrenClassName } = props;
+
+  return (
+    <div className="flex items-start gap-2">
+      <div className="flex h-7.5 w-30 shrink-0 items-center gap-1.5 text-body-xs-regular text-tertiary">
+        <Icon className="size-4 shrink-0" />
+        <span>{label}</span>
+        {appendElement}
+      </div>
+      <div className={cn("flex grow flex-wrap items-center gap-1", childrenClassName)}>{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/common/logo-spinner.tsx b/apps/web/core/components/common/logo-spinner.tsx
new file mode 100644
index 0000000..9dfad1d
--- /dev/null
+++ b/apps/web/core/components/common/logo-spinner.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+// assets
+import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
+import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
+
+export function LogoSpinner() {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+  return (
+    <div className="flex items-center justify-center">
+      <img src={logoSrc} alt="logo" className="h-6 w-auto object-contain sm:h-11" />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/common/modal/global.tsx b/apps/web/core/components/common/modal/global.tsx
new file mode 100644
index 0000000..98292c6
--- /dev/null
+++ b/apps/web/core/components/common/modal/global.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { lazy, Suspense } from "react";
+import { observer } from "mobx-react";
+
+const ProfileSettingsModal = lazy(() =>
+  import("@/components/settings/profile/modal").then((module) => ({
+    default: module.ProfileSettingsModal,
+  }))
+);
+
+type TGlobalModalsProps = {
+  workspaceSlug: string;
+};
+
+/**
+ * GlobalModals component manages all workspace-level modals across Plane applications.
+ *
+ * This includes:
+ * - Profile settings modal
+ */
+export const GlobalModals = observer(function GlobalModals(_props: TGlobalModalsProps) {
+  return (
+    <Suspense fallback={null}>
+      <ProfileSettingsModal />
+    </Suspense>
+  );
+});
diff --git a/apps/web/core/components/common/new-empty-state.tsx b/apps/web/core/components/common/new-empty-state.tsx
new file mode 100644
index 0000000..742ea3a
--- /dev/null
+++ b/apps/web/core/components/common/new-empty-state.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+
+// ui
+import { Button } from "@plane/propel/button";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image: any;
+  comicBox?: {
+    direction: "left" | "right";
+    title: string;
+    description: string;
+    extraPadding?: boolean;
+  };
+  primaryButton?: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  disabled?: boolean;
+};
+
+export function NewEmptyState({ title, description, image, primaryButton, disabled = false, comicBox }: Props) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  return (
+    <div className="flex items-center justify-center overflow-y-auto">
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <div className="shadow-sm m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-subtle px-10 py-7 md:m-8">
+          <h3 className="text-20 font-semibold">{title}</h3>
+          {description && <p className="text-16">{description}</p>}
+          <div className="relative w-full max-w-6xl">
+            <img src={image} className="h-full w-full object-contain" alt={primaryButton?.text || "button image"} />
+          </div>
+
+          <div className="relative flex items-start justify-center">
+            {primaryButton && (
+              <Button
+                className={`relative m-3 max-w-min !px-6 ${comicBox?.direction === "left" ? "flex-row-reverse" : ""}`}
+                size="xl"
+                variant="primary"
+                onClick={primaryButton.onClick}
+                disabled={disabled}
+              >
+                {primaryButton.text}
+                <div
+                  onMouseEnter={handleMouseEnter}
+                  onMouseLeave={handleMouseLeave}
+                  className={`bg-blue-300 absolute ${
+                    comicBox?.direction === "left" ? "left-0 ml-2" : "right-0 mr-2"
+                  } z-10 h-2.5 w-2.5 animate-ping rounded-full`}
+                />
+                <div
+                  className={`bg-blue-400/40 absolute ${
+                    comicBox?.direction === "left" ? "left-0 ml-2.5" : "right-0 mr-2.5"
+                  } h-1.5 w-1.5 rounded-full`}
+                />
+              </Button>
+            )}
+            {comicBox &&
+              isHovered &&
+              (comicBox.direction === "right" ? (
+                <div
+                  className={`absolute top-0 left-1/2 flex max-w-sm ${
+                    comicBox?.extraPadding ? "ml-[125px]" : "ml-[90px]"
+                  } pb-5`}
+                >
+                  <div className="relative mt-5 h-0 w-0 border-t-[11px] border-r-[11px] border-b-[11px] border-subtle border-y-transparent">
+                    <div className="border-surface-1 absolute top-[-10px] right-[-12px] h-0 w-0 border-t-[10px] border-r-[10px] border-b-[10px] border-y-transparent" />
+                  </div>
+                  <div className="rounded-md border border-subtle bg-surface-1">
+                    <h1 className="p-5">
+                      <h3 className="text-16 font-semibold">{comicBox?.title}</h3>
+                      <h4 className="mt-1 text-13">{comicBox?.description}</h4>
+                    </h1>
+                  </div>
+                </div>
+              ) : (
+                <div className="absolute top-0 right-1/2 mr-[90px] flex max-w-sm flex-row-reverse pb-5">
+                  <div className="relative mt-5 h-0 w-0 border-t-[11px] border-b-[11px] border-l-[11px] border-subtle border-y-transparent">
+                    <div className="border-surface-1 absolute top-[-10px] left-[-12px] h-0 w-0 border-t-[10px] border-b-[10px] border-l-[10px] border-y-transparent" />
+                  </div>
+                  <div className="rounded-md border border-subtle bg-surface-1">
+                    <h1 className="p-5">
+                      <h3 className="text-16 font-semibold">{comicBox?.title}</h3>
+                      <h4 className="mt-1 text-13">{comicBox?.description}</h4>
+                    </h1>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/common/page-access-icon.tsx b/apps/web/core/components/common/page-access-icon.tsx
new file mode 100644
index 0000000..1e90b36
--- /dev/null
+++ b/apps/web/core/components/common/page-access-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArchiveOutline, GlobeOutline, LockOutline } from "@makeplane/propel/icons";
+import { EPageAccess } from "@plane/constants";
+import type { TPage } from "@plane/types";
+
+export function PageAccessIcon(page: TPage) {
+  return (
+    <div>
+      {page.archived_at ? (
+        <ArchiveOutline className="h-2.5 w-2.5 text-tertiary" />
+      ) : page.access === EPageAccess.PUBLIC ? (
+        <GlobeOutline className="h-2.5 w-2.5 text-tertiary" />
+      ) : (
+        <LockOutline className="h-2.5 w-2.5 text-tertiary" />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/common/pro-icon.tsx b/apps/web/core/components/common/pro-icon.tsx
new file mode 100644
index 0000000..474ddd8
--- /dev/null
+++ b/apps/web/core/components/common/pro-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Crown } from "lucide-react";
+// helpers
+import { cn } from "@plane/utils";
+
+type TProIcon = {
+  className?: string;
+};
+
+export function ProIcon(props: TProIcon) {
+  const { className } = props;
+
+  return <Crown className={cn("text-amber-400 inline-block h-3.5 w-3.5", className)} />;
+}
diff --git a/apps/web/core/components/common/quick-actions-factory.tsx b/apps/web/core/components/common/quick-actions-factory.tsx
new file mode 100644
index 0000000..0c234e8
--- /dev/null
+++ b/apps/web/core/components/common/quick-actions-factory.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  ArchiveOutline,
+  DeleteOutline,
+  EditOutline,
+  LinkOutline,
+  NewTabOutline,
+  RestoreOutline,
+} from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+import type { TContextMenuItem } from "@plane/ui";
+
+/**
+ * Unified factory for creating menu items across all entities (cycles, modules, views, epics)
+ */
+export const useQuickActionsFactory = () => {
+  const { t } = useTranslation();
+
+  return {
+    // Common menu items
+    createEditMenuItem: (handler: () => void, shouldRender: boolean = true): TContextMenuItem => ({
+      key: "edit",
+      title: t("edit"),
+      icon: EditOutline,
+      action: handler,
+      shouldRender,
+    }),
+
+    createOpenInNewTabMenuItem: (handler: () => void): TContextMenuItem => ({
+      key: "open-new-tab",
+      title: t("open_in_new_tab"),
+      icon: NewTabOutline,
+      action: handler,
+    }),
+
+    createCopyLinkMenuItem: (handler: () => void): TContextMenuItem => ({
+      key: "copy-link",
+      title: t("copy_link"),
+      icon: LinkOutline,
+      action: handler,
+    }),
+
+    createArchiveMenuItem: (
+      handler: () => void,
+      opts: { shouldRender?: boolean; disabled?: boolean; description?: string }
+    ): TContextMenuItem => ({
+      key: "archive",
+      title: t("archive"),
+      icon: ArchiveOutline,
+      action: handler,
+      className: "items-start",
+      iconClassName: "mt-1",
+      description: opts.description,
+      disabled: opts.disabled,
+      shouldRender: opts.shouldRender,
+    }),
+
+    createRestoreMenuItem: (handler: () => void, shouldRender: boolean = true): TContextMenuItem => ({
+      key: "restore",
+      title: t("restore"),
+      icon: RestoreOutline,
+      action: handler,
+      shouldRender,
+    }),
+
+    createDeleteMenuItem: (handler: () => void, shouldRender: boolean = true): TContextMenuItem => ({
+      key: "delete",
+      title: t("delete"),
+      icon: DeleteOutline,
+      action: handler,
+      shouldRender,
+    }),
+
+    // Layout-level actions (for work item list views)
+    createOpenInNewTab: (handler: () => void): TContextMenuItem => ({
+      key: "open-in-new-tab",
+      title: "Open in new tab",
+      icon: NewTabOutline,
+      action: handler,
+    }),
+
+    createCopyLayoutLinkMenuItem: (handler: () => void): TContextMenuItem => ({
+      key: "copy-link",
+      title: "Copy link",
+      icon: LinkOutline,
+      action: handler,
+    }),
+  };
+};
diff --git a/apps/web/core/components/common/quick-actions-helper.tsx b/apps/web/core/components/common/quick-actions-helper.tsx
new file mode 100644
index 0000000..fdc4808
--- /dev/null
+++ b/apps/web/core/components/common/quick-actions-helper.tsx
@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// @types/react 19 removed the global JSX namespace; it is imported from react now.
+import type { JSX } from "react";
+// types
+import type { ICycle, IModule, IProjectView, IWorkspaceView } from "@plane/types";
+import type { TContextMenuItem } from "@plane/ui";
+// hooks
+import { useQuickActionsFactory } from "@/components/common/quick-actions-factory";
+
+// Types
+interface UseCycleMenuItemsProps {
+  cycleDetails: ICycle | undefined;
+  isEditingAllowed: boolean;
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+  handleEdit: () => void;
+  handleArchive: () => void;
+  handleRestore: () => void;
+  handleDelete: () => void;
+  handleCopyLink: () => void;
+  handleOpenInNewTab: () => void;
+}
+
+interface UseModuleMenuItemsProps {
+  moduleDetails: IModule | undefined;
+  isEditingAllowed: boolean;
+  workspaceSlug: string;
+  projectId: string;
+  moduleId: string;
+  handleEdit: () => void;
+  handleArchive: () => void;
+  handleRestore: () => void;
+  handleDelete: () => void;
+  handleCopyLink: () => void;
+  handleOpenInNewTab: () => void;
+}
+
+interface UseViewMenuItemsProps {
+  isOwner: boolean;
+  isAdmin: boolean;
+  workspaceSlug: string;
+  projectId?: string;
+  view: IProjectView | IWorkspaceView;
+  handleEdit: () => void;
+  handleDelete: () => void;
+  handleCopyLink: () => void;
+  handleOpenInNewTab: () => void;
+}
+
+interface UseLayoutMenuItemsProps {
+  workspaceSlug: string;
+  projectId: string;
+  storeType: "PROJECT" | "EPIC";
+  handleCopyLink: () => void;
+  handleOpenInNewTab: () => void;
+}
+
+type MenuResult = {
+  items: TContextMenuItem[];
+  modals: JSX.Element | null;
+};
+
+export const useCycleMenuItems = (props: UseCycleMenuItemsProps): MenuResult => {
+  const factory = useQuickActionsFactory();
+  const { cycleDetails, isEditingAllowed, ...handlers } = props;
+
+  const isArchived = !!cycleDetails?.archived_at;
+  const isCompleted = cycleDetails?.status?.toLowerCase() === "completed";
+
+  // Assemble final menu items - order defined here
+  const items = [
+    factory.createEditMenuItem(handlers.handleEdit, isEditingAllowed && !isCompleted && !isArchived),
+    factory.createOpenInNewTabMenuItem(handlers.handleOpenInNewTab),
+    factory.createCopyLinkMenuItem(handlers.handleCopyLink),
+    factory.createArchiveMenuItem(handlers.handleArchive, {
+      shouldRender: isEditingAllowed && !isArchived,
+      disabled: !isCompleted,
+      description: isCompleted ? undefined : "Only completed cycles can be archived",
+    }),
+    factory.createRestoreMenuItem(handlers.handleRestore, isEditingAllowed && isArchived),
+    factory.createDeleteMenuItem(handlers.handleDelete, isEditingAllowed && !isCompleted && !isArchived),
+  ].filter((item) => item.shouldRender !== false);
+
+  return { items, modals: null };
+};
+
+export const useModuleMenuItems = (props: UseModuleMenuItemsProps): MenuResult => {
+  const factory = useQuickActionsFactory();
+  const { moduleDetails, isEditingAllowed, ...handlers } = props;
+
+  const isArchived = !!moduleDetails?.archived_at;
+  const moduleState = moduleDetails?.status?.toLocaleLowerCase();
+  const isInArchivableGroup = !!moduleState && ["completed", "cancelled"].includes(moduleState);
+
+  // Assemble final menu items - order defined here
+  const items = [
+    factory.createEditMenuItem(handlers.handleEdit, isEditingAllowed && !isArchived),
+    factory.createOpenInNewTabMenuItem(handlers.handleOpenInNewTab),
+    factory.createCopyLinkMenuItem(handlers.handleCopyLink),
+    factory.createArchiveMenuItem(handlers.handleArchive, {
+      shouldRender: isEditingAllowed && !isArchived,
+      disabled: !isInArchivableGroup,
+      description: isInArchivableGroup ? undefined : "Only completed or cancelled modules can be archived",
+    }),
+    factory.createRestoreMenuItem(handlers.handleRestore, isEditingAllowed && isArchived),
+    factory.createDeleteMenuItem(handlers.handleDelete, isEditingAllowed && !isArchived),
+  ].filter((item) => item.shouldRender !== false);
+
+  return { items, modals: null };
+};
+
+export const useViewMenuItems = (props: UseViewMenuItemsProps): MenuResult => {
+  const factory = useQuickActionsFactory();
+  const { workspaceSlug, isOwner, isAdmin, projectId, view, ...handlers } = props;
+
+  if (!view) return { items: [], modals: null };
+
+  // Assemble final menu items - order defined here
+  const items = [
+    factory.createEditMenuItem(handlers.handleEdit, isOwner),
+    factory.createOpenInNewTabMenuItem(handlers.handleOpenInNewTab),
+    factory.createCopyLinkMenuItem(handlers.handleCopyLink),
+    factory.createDeleteMenuItem(handlers.handleDelete, isOwner || isAdmin),
+  ].filter((item) => item.shouldRender !== false);
+
+  return { items, modals: null };
+};
+
+export const useLayoutMenuItems = (props: UseLayoutMenuItemsProps): MenuResult => {
+  const factory = useQuickActionsFactory();
+  const { ...handlers } = props;
+
+  // Assemble final menu items - order defined here
+  const items = [
+    factory.createOpenInNewTab(handlers.handleOpenInNewTab),
+    factory.createCopyLayoutLinkMenuItem(handlers.handleCopyLink),
+  ].filter((item) => item.shouldRender !== false);
+
+  return { items, modals: null };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useIntakeHeaderMenuItems = (props: {
+  workspaceSlug: string;
+  projectId: string;
+  handleCopyLink: () => void;
+}): MenuResult => ({ items: [], modals: null });
diff --git a/apps/web/core/components/common/switcher-label.tsx b/apps/web/core/components/common/switcher-label.tsx
new file mode 100644
index 0000000..e19d232
--- /dev/null
+++ b/apps/web/core/components/common/switcher-label.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC } from "react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import type { ISvgIcons } from "@plane/propel/icons";
+import type { TLogoProps } from "@plane/types";
+import { getFileURL, truncateText } from "@plane/utils";
+
+type TSwitcherIconProps = {
+  logo_props?: TLogoProps;
+  logo_url?: string;
+  LabelIcon: FC<ISvgIcons>;
+  size?: number;
+  type?: "lucide" | "material";
+};
+
+export function SwitcherIcon({ logo_props, logo_url, LabelIcon, size = 12, type = "lucide" }: TSwitcherIconProps) {
+  if (logo_props?.in_use) {
+    return <Logo logo={logo_props} size={size} type={type} />;
+  }
+
+  if (logo_url) {
+    return (
+      <img
+        src={getFileURL(logo_url)}
+        alt="logo"
+        className="rounded-xs object-cover"
+        style={{ height: size, width: size }}
+      />
+    );
+  }
+  return <LabelIcon height={size} width={size} />;
+}
+
+type TSwitcherLabelProps = {
+  logo_props?: TLogoProps;
+  logo_url?: string;
+  name?: string;
+  LabelIcon: FC<ISvgIcons>;
+  type?: "lucide" | "material";
+};
+
+export function SwitcherLabel(props: TSwitcherLabelProps) {
+  const { logo_props, name, LabelIcon, logo_url, type = "lucide" } = props;
+  return (
+    <div className="flex items-center gap-1 text-secondary">
+      <SwitcherIcon logo_props={logo_props} logo_url={logo_url} LabelIcon={LabelIcon} type={type} />
+      {truncateText(name ?? "", 40)}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/core/activity.tsx b/apps/web/core/components/core/activity.tsx
new file mode 100644
index 0000000..60be41d
--- /dev/null
+++ b/apps/web/core/components/core/activity.tsx
@@ -0,0 +1,771 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// store hooks
+// icons
+import { TriangleIcon, SignalMediumIcon } from "lucide-react";
+import {
+  ArchiveOutline,
+  AttachOutline,
+  CalendarOutline,
+  ChatOutline,
+  CyclesOutline,
+  DuplicateOfOutline,
+  EpicOutline,
+  GridOutline,
+  IntakeOutline,
+  LabelsOutline,
+  LinkOutline,
+  MembersOutline,
+  ModuleOutline,
+  RelatesToOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+import { BlockedIcon, BlockerIcon } from "@plane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IIssueActivity } from "@plane/types";
+import { renderFormattedDate, generateWorkItemLink, capitalizeFirstLetter } from "@plane/utils";
+// helpers
+import { useLabel } from "@/hooks/store/use-label";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+
+export function IssueLink({ activity }: { activity: IIssueActivity }) {
+  // router params
+  const { workspaceSlug } = useParams();
+  const { isMobile } = usePlatformOS();
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString() ?? activity.workspace_detail?.slug,
+    projectId: activity?.project,
+    issueId: activity?.issue,
+    projectIdentifier: activity?.project_detail?.identifier,
+    sequenceId: activity?.issue_detail?.sequence_id,
+  });
+
+  return (
+    <Tooltip
+      label={activity?.issue_detail ? activity.issue_detail.name : "This work item has been deleted"}
+      layout="stacked"
+      disabled={isMobile}
+    >
+      {activity?.issue_detail ? (
+        <a
+          aria-disabled={activity.issue === null}
+          href={workItemLink}
+          target={activity.issue === null ? "_self" : "_blank"}
+          rel={activity.issue === null ? "" : "noopener noreferrer"}
+          className="inline items-center gap-1 font-medium text-primary hover:underline"
+        >
+          <span className="whitespace-nowrap">{`${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`}</span>{" "}
+          <span className="font-regular break-all">{activity.issue_detail?.name}</span>
+        </a>
+      ) : (
+        <span className="inline-flex items-center gap-1 font-medium whitespace-nowrap text-primary">
+          {" a work item"}{" "}
+        </span>
+      )}
+    </Tooltip>
+  );
+}
+
+function UserLink({ activity }: { activity: IIssueActivity }) {
+  // router params
+  const { workspaceSlug } = useParams();
+
+  return (
+    <a
+      href={`/${workspaceSlug ?? activity.workspace_detail?.slug}/profile/${
+        activity.new_identifier ?? activity.old_identifier
+      }`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="inline-flex items-center font-medium text-primary hover:underline"
+    >
+      {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
+    </a>
+  );
+}
+
+const LabelPill = observer(function LabelPill({ labelId, workspaceSlug }: { labelId: string; workspaceSlug: string }) {
+  // store hooks
+  const { workspaceLabels, fetchWorkspaceLabels } = useLabel();
+
+  useEffect(() => {
+    if (!workspaceLabels) fetchWorkspaceLabels(workspaceSlug);
+  }, [fetchWorkspaceLabels, workspaceLabels, workspaceSlug]);
+
+  return (
+    <span
+      className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+      style={{
+        backgroundColor: workspaceLabels?.find((l) => l.id === labelId)?.color ?? "#000000",
+      }}
+      aria-hidden="true"
+    />
+  );
+});
+
+const inboxActivityMessage = {
+  declined: {
+    showIssue: "declined work item",
+    noIssue: "declined this work item from intake.",
+  },
+  snoozed: {
+    showIssue: "snoozed work item",
+    noIssue: "snoozed this work item.",
+  },
+  accepted: {
+    showIssue: "accepted work item",
+    noIssue: "accepted this work item from intake.",
+  },
+  markedDuplicate: {
+    showIssue: "declined work item",
+    noIssue: "declined this work item from intake by marking a duplicate work item.",
+  },
+};
+
+const getInboxUserActivityMessage = (activity: IIssueActivity, showIssue: boolean) => {
+  switch (activity.verb) {
+    case "-1":
+      return showIssue ? inboxActivityMessage.declined.showIssue : inboxActivityMessage.declined.noIssue;
+    case "0":
+      return showIssue ? inboxActivityMessage.snoozed.showIssue : inboxActivityMessage.snoozed.noIssue;
+    case "1":
+      return showIssue ? inboxActivityMessage.accepted.showIssue : inboxActivityMessage.accepted.noIssue;
+    case "2":
+      return showIssue ? inboxActivityMessage.markedDuplicate.showIssue : inboxActivityMessage.markedDuplicate.noIssue;
+    default:
+      return "updated intake work item status.";
+  }
+};
+
+const activityDetails: {
+  [key: string]: {
+    message: (activity: IIssueActivity, showIssue: boolean, workspaceSlug: string) => React.ReactNode;
+    icon: React.ReactNode;
+  };
+} = {
+  assignees: {
+    message: (activity, showIssue) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            added a new assignee <UserLink activity={activity} />
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            removed the assignee <UserLink activity={activity} />
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+    },
+    icon: <MembersOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  archived_at: {
+    message: (activity) => {
+      if (activity.new_value === "restore")
+        return (
+          <>
+            restored <IssueLink activity={activity} />
+          </>
+        );
+      else
+        return (
+          <>
+            archived <IssueLink activity={activity} />
+          </>
+        );
+    },
+    icon: <ArchiveOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  attachment: {
+    message: (activity, showIssue) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            uploaded a new attachment
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            removed an attachment
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+    },
+    icon: <AttachOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  description: {
+    message: (activity, showIssue) => (
+      <>
+        updated the description
+        {showIssue && (
+          <>
+            {" "}
+            of <IssueLink activity={activity} />
+          </>
+        )}
+      </>
+    ),
+    icon: <ChatOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  estimate_point: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the estimate point
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            set the estimate point to {activity.new_value}
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+    },
+    icon: <TriangleIcon size={12} className="text-secondary" aria-hidden="true" />,
+  },
+  issue: {
+    message: (activity) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            created <IssueLink activity={activity} />
+          </>
+        );
+      else if (activity.verb === "converted")
+        return (
+          <>
+            converted <IssueLink activity={activity} /> to an epic
+          </>
+        );
+      else
+        return (
+          <>
+            deleted <IssueLink activity={activity} />
+          </>
+        );
+    },
+    icon: <WorkItemsOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  epic: {
+    message: (activity) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            created <IssueLink activity={activity} />
+          </>
+        );
+      else if (activity.verb === "converted")
+        return (
+          <>
+            converted <IssueLink activity={activity} /> to a work item
+          </>
+        );
+      else
+        return (
+          <>
+            deleted <IssueLink activity={activity} />
+          </>
+        );
+    },
+    icon: <EpicOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  labels: {
+    message: (activity, showIssue, workspaceSlug) => {
+      if (activity.old_value === "")
+        return (
+          <span className="overflow-hidden">
+            added a new label{" "}
+            <span className="inline-flex items-center gap-2 rounded-full border border-strong px-2 py-0.5 text-11">
+              <LabelPill labelId={activity.new_identifier ?? ""} workspaceSlug={workspaceSlug} />
+              <span className="line-clamp-1 flex-shrink font-medium break-all text-primary">{activity.new_value}</span>
+            </span>
+            {showIssue && (
+              <span className="">
+                {" "}
+                to <IssueLink activity={activity} />
+              </span>
+            )}
+          </span>
+        );
+      else
+        return (
+          <>
+            removed the label{" "}
+            <span className="inline-flex items-center gap-2 rounded-full border border-strong px-2 py-0.5 text-11">
+              <LabelPill labelId={activity.old_identifier ?? ""} workspaceSlug={workspaceSlug} />
+              <span className="line-clamp-1 flex-shrink font-medium break-all text-primary">{activity.old_value}</span>
+            </span>
+            {showIssue && (
+              <span>
+                {" "}
+                from <IssueLink activity={activity} />
+              </span>
+            )}
+          </>
+        );
+    },
+    icon: <LabelsOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  link: {
+    message: (activity, showIssue) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added this{" "}
+            <a
+              href={`${activity.new_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
+            >
+              link
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                to <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            updated the{" "}
+            <a
+              href={`${activity.old_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
+            >
+              link
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            removed this{" "}
+            <a
+              href={`${activity.old_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
+            >
+              link
+            </a>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+    },
+    icon: <LinkOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  cycles: {
+    message: (activity, showIssue, workspaceSlug) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            <span className="flex-shrink-0">
+              added {showIssue ? <IssueLink activity={activity} /> : "this work item"}{" "}
+              <span className="whitespace-nowrap">to the cycle</span>{" "}
+            </span>
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
+            >
+              <span className="break-all">{activity.new_value}</span>
+            </a>
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            <span className="flex-shrink-0 whitespace-nowrap">set the cycle to </span>
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
+            >
+              <span className="break-all">{activity.new_value}</span>
+            </a>
+          </>
+        );
+      else
+        return (
+          <>
+            removed <IssueLink activity={activity} /> from the cycle{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
+            >
+              <span className="break-all">{activity.old_value}</span>
+            </a>
+          </>
+        );
+    },
+    icon: <CyclesOutline height={12} width={12} className="text-secondary" aria-hidden="true" />,
+  },
+  modules: {
+    message: (activity, showIssue, workspaceSlug) => {
+      if (activity.verb === "created")
+        return (
+          <>
+            added {showIssue ? <IssueLink activity={activity} /> : "this work item"} to the module{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
+            >
+              <span className="break-all">{activity.new_value}</span>
+            </a>
+          </>
+        );
+      else if (activity.verb === "updated")
+        return (
+          <>
+            set the module to{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
+            >
+              <span className="break-all">{activity.new_value}</span>
+            </a>
+          </>
+        );
+      else
+        return (
+          <>
+            removed <IssueLink activity={activity} /> from the module{" "}
+            <a
+              href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.old_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline items-center gap-1 font-medium text-primary hover:underline"
+            >
+              <span className="break-all">{activity.old_value}</span>
+            </a>
+          </>
+        );
+    },
+    icon: <ModuleOutline className="h-3 w-3 !text-secondary" aria-hidden="true" />,
+  },
+  name: {
+    message: (activity, showIssue) => (
+      <>
+        set the title to <span className="break-all">{activity.new_value}</span>
+        {showIssue && (
+          <>
+            {" "}
+            of <IssueLink activity={activity} />
+          </>
+        )}
+      </>
+    ),
+    icon: <ChatOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  parent: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the parent <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            set the parent to <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+    },
+    icon: <MembersOutline className="h-3 w-3 !text-secondary" aria-hidden="true" />,
+  },
+  priority: {
+    message: (activity, showIssue) => (
+      <>
+        set the priority to{" "}
+        <span className="font-medium text-primary">
+          {activity.new_value ? capitalizeFirstLetter(activity.new_value) : "None"}
+        </span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+      </>
+    ),
+    icon: <SignalMediumIcon size={12} className="text-secondary" aria-hidden="true" />,
+  },
+  relates_to: {
+    message: (activity, showIssue) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked that {showIssue ? <IssueLink activity={activity} /> : "this work item"} relates to{" "}
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the relation from{" "}
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <RelatesToOutline height="12" width="12" className="text-secondary" />,
+  },
+  blocking: {
+    message: (activity, showIssue) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} is blocking work item{" "}
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the blocking work item{" "}
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <BlockerIcon height="12" width="12" className="text-secondary" />,
+  },
+  blocked_by: {
+    message: (activity, showIssue) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} is being blocked by{" "}
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed {showIssue ? <IssueLink activity={activity} /> : "this work item"} being blocked by work item{" "}
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <BlockedIcon height="12" width="12" className="text-secondary" />,
+  },
+  duplicate: {
+    message: (activity, showIssue) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} as duplicate of{" "}
+            <span className="font-medium whitespace-nowrap text-primary">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed {showIssue ? <IssueLink activity={activity} /> : "this work item"} as a duplicate of{" "}
+            <span className="font-medium whitespace-nowrap text-primary">{activity.old_value}</span>.
+          </>
+        );
+    },
+    icon: <DuplicateOfOutline width={12} height={12} className="text-secondary" />,
+  },
+  state: {
+    message: (activity, showIssue) => (
+      <>
+        set the state to <span className="font-medium break-all text-primary">{activity.new_value}</span>
+        {showIssue && (
+          <>
+            {" "}
+            for <IssueLink activity={activity} />
+          </>
+        )}
+      </>
+    ),
+    icon: <GridOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  start_date: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the start date
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            set the start date to{" "}
+            <span className="font-medium whitespace-nowrap text-primary">
+              {renderFormattedDate(activity.new_value)}
+            </span>
+            {showIssue && (
+              <>
+                {" "}
+                for <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+    },
+    icon: <CalendarOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  target_date: {
+    message: (activity, showIssue) => {
+      if (!activity.new_value)
+        return (
+          <>
+            removed the due date
+            {showIssue && (
+              <>
+                {" "}
+                from <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+      else
+        return (
+          <>
+            set the due date to{" "}
+            <span className="font-medium whitespace-nowrap text-primary">
+              {renderFormattedDate(activity.new_value)}
+            </span>
+            {showIssue && (
+              <>
+                <IssueLink activity={activity} />
+              </>
+            )}
+          </>
+        );
+    },
+    icon: <CalendarOutline width={12} height={12} className="text-secondary" aria-hidden="true" />,
+  },
+  inbox: {
+    message: (activity, showIssue) => (
+      <>
+        {getInboxUserActivityMessage(activity, showIssue)}
+        {showIssue && (
+          <>
+            {" "}
+            <IssueLink activity={activity} />
+          </>
+        )}
+        {activity.verb === "2" && ` from intake by marking a duplicate work item.`}
+      </>
+    ),
+    icon: <IntakeOutline className="size-3 text-secondary" aria-hidden="true" />,
+  },
+};
+
+export function ActivityIcon({ activity }: { activity: IIssueActivity }) {
+  return <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>;
+}
+
+type ActivityMessageProps = {
+  activity: IIssueActivity;
+  showIssue?: boolean;
+};
+
+export function ActivityMessage({ activity, showIssue = false }: ActivityMessageProps) {
+  // router params
+  const { workspaceSlug } = useParams();
+  const activityField = activity.field ?? "issue";
+
+  return (
+    <>
+      {activityDetails[activityField as keyof typeof activityDetails]?.message(
+        activity,
+        showIssue,
+        workspaceSlug ? workspaceSlug.toString() : (activity.workspace_detail?.slug ?? "")
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/core/app-header.tsx b/apps/web/core/components/core/app-header.tsx
new file mode 100644
index 0000000..13d1371
--- /dev/null
+++ b/apps/web/core/components/core/app-header.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Row } from "@plane/ui";
+// components
+import { cn } from "@plane/utils";
+import { ExtendedAppHeader } from "@/components/common/extended-app-header";
+
+export interface AppHeaderProps {
+  header: ReactNode;
+  mobileHeader?: ReactNode;
+  className?: string;
+  rowClassName?: string;
+}
+
+export const AppHeader = observer(function AppHeader(props: AppHeaderProps) {
+  const { header, mobileHeader, className, rowClassName } = props;
+
+  return (
+    <div className={cn("z-[18]", className)}>
+      <Row className={cn("flex h-11 w-full items-center gap-2 border-b border-subtle bg-surface-1", rowClassName)}>
+        <ExtendedAppHeader header={header} />
+      </Row>
+      {/* eslint-disable-next-line oxc/const-comparisons */}
+      {mobileHeader && mobileHeader}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/core/content-overflow-HOC.tsx b/apps/web/core/components/core/content-overflow-HOC.tsx
new file mode 100644
index 0000000..06f1524
--- /dev/null
+++ b/apps/web/core/components/core/content-overflow-HOC.tsx
@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+
+interface IContentOverflowWrapper {
+  children: ReactNode;
+  maxHeight?: number;
+  gradientColor?: string;
+  buttonClassName?: string;
+  containerClassName?: string;
+  fallback?: ReactNode;
+  customButton?: ReactNode;
+}
+
+export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(props: IContentOverflowWrapper) {
+  const {
+    children,
+    maxHeight = 625,
+    buttonClassName = "text-13 font-medium text-accent-primary",
+    containerClassName,
+    fallback = null,
+    customButton,
+  } = props;
+
+  // states
+  const [containerHeight, setContainerHeight] = useState(0);
+  const [showAll, setShowAll] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  // refs
+  const contentRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // hooks
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (!contentRef?.current) return;
+
+    const updateHeight = () => {
+      if (contentRef.current) {
+        const height = contentRef.current.getBoundingClientRect().height;
+        setContainerHeight(height);
+      }
+    };
+
+    // Initial height measurement
+    updateHeight();
+
+    // Create ResizeObserver for size changes
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(contentRef.current);
+
+    // Create MutationObserver for content changes
+    const mutationObserver = new MutationObserver((mutations) => {
+      const shouldUpdate = mutations.some(
+        (mutation) =>
+          mutation.type === "childList" ||
+          (mutation.type === "attributes" && (mutation.attributeName === "style" || mutation.attributeName === "class"))
+      );
+
+      if (shouldUpdate) {
+        updateHeight();
+      }
+    });
+
+    mutationObserver.observe(contentRef.current, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["style", "class"],
+    });
+
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleTransitionEnd = () => {
+      setIsTransitioning(false);
+    };
+
+    container.addEventListener("transitionend", handleTransitionEnd);
+
+    return () => {
+      container.removeEventListener("transitionend", handleTransitionEnd);
+    };
+  }, []);
+
+  const handleToggle = () => {
+    setIsTransitioning(true);
+    setShowAll((prev) => !prev);
+  };
+
+  if (!children) return fallback;
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "relative",
+        {
+          [`overflow-hidden transition-[height] duration-300 ease-in-out`]: containerHeight > maxHeight,
+        },
+        containerClassName
+      )}
+      style={{
+        height: showAll ? `${containerHeight}px` : `${Math.min(maxHeight, containerHeight)}px`,
+      }}
+    >
+      <div
+        ref={contentRef}
+        className={cn("h-auto", {
+          "pb-6": showAll,
+        })}
+      >
+        {children}
+      </div>
+
+      {containerHeight > maxHeight && (
+        <div
+          className={cn(
+            "bottom-0 left-0 w-full transition-all duration-300 ease-in-out",
+            `flex flex-col items-center justify-end bg-gradient-to-t from-surface-1 to-transparent`,
+            "text-center",
+            {
+              "absolute h-[100px] opacity-100": !showAll,
+              "absolute h-[30px] opacity-70": showAll,
+            }
+          )}
+          style={{
+            pointerEvents: isTransitioning ? "none" : "auto",
+          }}
+        >
+          {customButton || (
+            <button
+              className={cn(
+                "w-full gap-1 text-13 font-medium text-accent-primary transition-opacity duration-300",
+                buttonClassName
+              )}
+              onClick={handleToggle}
+              disabled={isTransitioning}
+            >
+              {showAll ? t("show_less") : t("show_all")}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/core/content-wrapper.tsx b/apps/web/core/components/core/content-wrapper.tsx
new file mode 100644
index 0000000..c40b504
--- /dev/null
+++ b/apps/web/core/components/core/content-wrapper.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+export interface ContentWrapperProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export function ContentWrapper({ className, children }: ContentWrapperProps) {
+  return (
+    <div className="h-full w-full overflow-hidden">
+      <div className={cn("relative h-full w-full overflow-x-hidden overflow-y-scroll", className)}>{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/core/description-versions/dropdown-item.tsx b/apps/web/core/components/core/description-versions/dropdown-item.tsx
new file mode 100644
index 0000000..3c64f2b
--- /dev/null
+++ b/apps/web/core/components/core/description-versions/dropdown-item.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { useTranslation } from "@plane/i18n";
+import type { TDescriptionVersion } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+import { calculateTimeAgo, getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+type Props = {
+  onClick: (versionId: string) => void;
+  version: TDescriptionVersion;
+};
+
+export const DescriptionVersionsDropdownItem = observer(function DescriptionVersionsDropdownItem(props: Props) {
+  const { onClick, version } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const versionCreator = version.owned_by ? getUserDetails(version.owned_by) : null;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <CustomMenu.MenuItem key={version.id} className="flex items-center gap-1" onClick={() => onClick(version.id)}>
+      <span className="flex-shrink-0">
+        <Avatar
+          alt={versionCreator?.display_name ?? t("common.deactivated_user")}
+          fallback={(versionCreator?.display_name ?? t("common.deactivated_user"))?.[0]?.toUpperCase()}
+          size="2xs"
+          src={getFileURL(versionCreator?.avatar_url ?? "")}
+        />
+      </span>
+      <p className="flex items-center gap-1.5 text-11 text-secondary">
+        <span className="font-medium">{versionCreator?.display_name ?? t("common.deactivated_user")}</span>
+        <span>{calculateTimeAgo(version.last_saved_at)}</span>
+      </p>
+    </CustomMenu.MenuItem>
+  );
+});
diff --git a/apps/web/core/components/core/description-versions/dropdown.tsx b/apps/web/core/components/core/description-versions/dropdown.tsx
new file mode 100644
index 0000000..4f684b0
--- /dev/null
+++ b/apps/web/core/components/core/description-versions/dropdown.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { HistoryOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TDescriptionVersion } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+import { calculateTimeAgo } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// local imports
+import { DescriptionVersionsDropdownItem } from "./dropdown-item";
+import type { TDescriptionVersionEntityInformation } from "./root";
+
+type Props = {
+  disabled: boolean;
+  entityInformation: TDescriptionVersionEntityInformation;
+  onVersionClick: (versionId: string) => void;
+  versions: TDescriptionVersion[] | undefined;
+};
+
+export const DescriptionVersionsDropdown = observer(function DescriptionVersionsDropdown(props: Props) {
+  const { disabled, entityInformation, onVersionClick, versions } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const latestVersion = versions?.[0];
+  const lastUpdatedAt = latestVersion?.created_at ?? entityInformation.createdAt;
+  const lastUpdatedByUserDisplayName = latestVersion?.owned_by
+    ? getUserDetails(latestVersion?.owned_by)?.display_name
+    : entityInformation.createdByDisplayName;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <CustomMenu
+      label={
+        <div className="flex items-center gap-1 text-tertiary">
+          <span className="grid size-4 flex-shrink-0 place-items-center">
+            <HistoryOutline className="size-3.5" />
+          </span>
+          <p className="text-11">
+            {t("description_versions.last_edited_by")}{" "}
+            <span className="font-medium">{lastUpdatedByUserDisplayName ?? t("common.deactivated_user")}</span>{" "}
+            {calculateTimeAgo(lastUpdatedAt)}
+          </p>
+        </div>
+      }
+      noBorder
+      noChevron={disabled}
+      placement="bottom-end"
+      optionsClassName="w-[300px]"
+      disabled={disabled}
+      closeOnSelect
+    >
+      <p className="mb-1 text-11 font-medium text-tertiary">{t("description_versions.previously_edited_by")}</p>
+      {versions?.map((version) => (
+        <DescriptionVersionsDropdownItem key={version.id} onClick={onVersionClick} version={version} />
+      ))}
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/core/description-versions/index.ts b/apps/web/core/components/core/description-versions/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/core/description-versions/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
new file mode 100644
index 0000000..6ded29e
--- /dev/null
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useRef } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import type { EditorRefApi } from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { ChevronLeftOutline, ChevronRightOutline, CopyOutline } from "@makeplane/propel/icons";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TDescriptionVersion } from "@plane/types";
+import { EModalPosition, EModalWidth, Loader, ModalCore } from "@plane/ui";
+import { calculateTimeAgo, cn, getFileURL } from "@plane/utils";
+// components
+import { RichTextEditor } from "@/components/editor/rich-text";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { IconButton } from "@plane/propel/icon-button";
+
+type Props = {
+  activeVersionDescription: string | undefined;
+  activeVersionDetails: TDescriptionVersion | undefined;
+  handleClose: () => void;
+  handleNavigation: (direction: "prev" | "next") => void;
+  handleRestore: (descriptionHTML: string) => void;
+  isNextDisabled: boolean;
+  isOpen: boolean;
+  isPrevDisabled: boolean;
+  isRestoreDisabled: boolean;
+  projectId: string | undefined;
+  workspaceSlug: string;
+};
+
+export const DescriptionVersionsModal = observer(function DescriptionVersionsModal(props: Props) {
+  const {
+    activeVersionDescription,
+    activeVersionDetails,
+    handleClose,
+    handleNavigation,
+    handleRestore,
+    isNextDisabled,
+    isPrevDisabled,
+    isOpen,
+    isRestoreDisabled,
+    projectId,
+    workspaceSlug,
+  } = props;
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { getWorkspaceBySlug } = useWorkspace();
+  // derived values
+  const activeVersionId = activeVersionDetails?.id;
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
+  const versionCreator = activeVersionDetails?.owned_by ? getUserDetails(activeVersionDetails.owned_by) : null;
+  // translation
+  const { t } = useTranslation();
+
+  const handleCopyMarkdown = useCallback(() => {
+    if (!editorRef.current) return;
+    editorRef.current.copyMarkdownToClipboard();
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
+      title: t("toast.success"),
+      message: "Markdown copied to clipboard.",
+    });
+  }, [t]);
+
+  if (!workspaceId) return null;
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXXXL}>
+      <div className="p-4" data-prevent-outside-click>
+        {/* Header */}
+        <div className="flex items-center justify-between gap-2 py-0.5">
+          <div className="flex flex-shrink-0 items-center gap-2 text-13">
+            <p className="flex items-center gap-1">
+              {t("description_versions.edited_by")}
+              <span className="flex-shrink-0">
+                <Avatar
+                  alt={versionCreator?.display_name}
+                  fallback={versionCreator?.display_name?.[0]?.toUpperCase()}
+                  size="2xs"
+                  src={getFileURL(versionCreator?.avatar_url ?? "")}
+                />
+              </span>
+            </p>
+            <p className="flex-shrink-0 text-secondary">
+              {calculateTimeAgo(activeVersionDetails?.last_saved_at ?? "")}
+            </p>
+          </div>
+          <div className="flex flex-shrink-0 items-center">
+            <button
+              type="button"
+              onClick={() => handleNavigation("prev")}
+              className={cn("grid size-6 place-items-center rounded-sm text-secondary transition-colors outline-none", {
+                "hover:bg-layer-1": !isPrevDisabled,
+                "opacity-50": isPrevDisabled,
+              })}
+              disabled={isPrevDisabled}
+            >
+              <ChevronLeftOutline className="size-4" />
+            </button>
+            <button
+              type="button"
+              onClick={() => handleNavigation("next")}
+              className={cn("grid size-6 place-items-center rounded-sm text-secondary transition-colors outline-none", {
+                "hover:bg-layer-1": !isNextDisabled,
+                "opacity-50": isNextDisabled,
+              })}
+              disabled={isNextDisabled}
+            >
+              <ChevronRightOutline className="size-4" />
+            </button>
+          </div>
+        </div>
+        {/* End header */}
+        {/* Version description */}
+        <div className="mt-4 pb-4">
+          {activeVersionId && activeVersionDescription ? (
+            <RichTextEditor
+              key={activeVersionId}
+              editable={false}
+              containerClassName="p-0 !pl-0 border-none"
+              editorClassName="pl-0"
+              id={activeVersionId}
+              initialValue={activeVersionDescription}
+              projectId={projectId}
+              ref={editorRef}
+              workspaceId={workspaceId}
+              workspaceSlug={workspaceSlug}
+            />
+          ) : (
+            <div className="space-y-1">
+              <Loader.Item width="300px" height="15px" />
+              <Loader.Item width="400px" height="15px" />
+              <div className="flex items-center gap-2">
+                <Loader.Item width="20px" height="15px" />
+                <Loader.Item width="500px" height="15px" />
+              </div>
+              <div className="flex items-center gap-2">
+                <Loader.Item width="20px" height="15px" />
+                <Loader.Item width="200px" height="15px" />
+              </div>
+              <Loader.Item width="300px" height="15px" />
+              <Loader.Item width="200px" height="15px" />
+            </div>
+          )}
+        </div>
+        {/* End version description */}
+        {/* Footer */}
+        <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle pt-4">
+          <Tooltip label={t("common.actions.copy_markdown")}>
+            <IconButton type="button" variant="ghost" size="base" onClick={handleCopyMarkdown} icon={CopyOutline} />
+          </Tooltip>
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={1}>
+              {t("common.cancel")}
+            </Button>
+            {!isRestoreDisabled && (
+              <Button
+                variant="primary"
+                size="lg"
+                onClick={() => {
+                  handleRestore(activeVersionDescription ?? "<p></p>");
+                  handleClose();
+                }}
+              >
+                {t("common.actions.restore")}
+              </Button>
+            )}
+          </div>
+        </div>
+        {/* End footer */}
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/core/description-versions/root.tsx b/apps/web/core/components/core/description-versions/root.tsx
new file mode 100644
index 0000000..0f1a577
--- /dev/null
+++ b/apps/web/core/components/core/description-versions/root.tsx
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import type { TDescriptionVersionDetails, TDescriptionVersionsListResponse } from "@plane/types";
+import { cn } from "@plane/utils";
+// local imports
+import { DescriptionVersionsDropdown } from "./dropdown";
+import { DescriptionVersionsModal } from "./modal";
+
+export type TDescriptionVersionEntityInformation = {
+  createdAt: Date;
+  createdByDisplayName: string;
+  id: string;
+  isRestoreDisabled: boolean;
+};
+
+type Props = {
+  className?: string;
+  entityInformation: TDescriptionVersionEntityInformation;
+  fetchHandlers: {
+    listDescriptionVersions: (entityId: string) => Promise<TDescriptionVersionsListResponse>;
+    retrieveDescriptionVersion: (entityId: string, versionId: string) => Promise<TDescriptionVersionDetails>;
+  };
+  handleRestore: (descriptionHTML: string) => void;
+  projectId?: string;
+  workspaceSlug: string;
+};
+
+export const DescriptionVersionsRoot = observer(function DescriptionVersionsRoot(props: Props) {
+  const { className, entityInformation, fetchHandlers, handleRestore, projectId, workspaceSlug } = props;
+  // states
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [activeVersionId, setActiveVersionId] = useState<string | null>(null);
+  // derived values
+  const entityId = entityInformation.id;
+  // fetch versions list
+  const { data: versionsListResponse } = useSWR(
+    entityId ? `DESCRIPTION_VERSIONS_LIST_${entityId}` : null,
+    entityId ? () => fetchHandlers.listDescriptionVersions(entityId) : null
+  );
+  // fetch active version details
+  const { data: activeVersionResponse } = useSWR(
+    entityId && activeVersionId ? `DESCRIPTION_VERSION_DETAILS_${activeVersionId}` : null,
+    entityId && activeVersionId ? () => fetchHandlers.retrieveDescriptionVersion(entityId, activeVersionId) : null
+  );
+  const versions = Array.isArray(versionsListResponse?.results) ? versionsListResponse.results : undefined;
+  const versionsCount = versions?.length ?? 0;
+  const activeVersionDetails = versions?.find((version) => version.id === activeVersionId);
+  const activeVersionIndex = versions?.findIndex((version) => version.id === activeVersionId);
+  const activeVersionDescription = activeVersionResponse
+    ? (activeVersionResponse.description_html ?? "<p></p>")
+    : undefined;
+
+  const handleNavigation = useCallback(
+    (direction: "prev" | "next") => {
+      if (activeVersionIndex === undefined) return;
+      if (direction === "prev" && activeVersionIndex > 0) {
+        setActiveVersionId(versions?.[activeVersionIndex - 1].id ?? null);
+      } else if (direction === "next" && activeVersionIndex < versionsCount - 1) {
+        setActiveVersionId(versions?.[activeVersionIndex + 1].id ?? null);
+      }
+    },
+    [activeVersionIndex, versions, versionsCount]
+  );
+
+  return (
+    <>
+      <DescriptionVersionsModal
+        activeVersionDescription={activeVersionDescription}
+        activeVersionDetails={activeVersionDetails}
+        handleClose={() => {
+          setIsModalOpen(false);
+          setTimeout(() => {
+            setActiveVersionId(null);
+          }, 300);
+        }}
+        handleNavigation={handleNavigation}
+        handleRestore={handleRestore}
+        isNextDisabled={activeVersionIndex === versionsCount - 1}
+        isOpen={isModalOpen}
+        isPrevDisabled={activeVersionIndex === 0}
+        isRestoreDisabled={entityInformation.isRestoreDisabled}
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+      />
+      <div className={cn(className)}>
+        <DescriptionVersionsDropdown
+          disabled={versionsCount === 0}
+          entityInformation={entityInformation}
+          onVersionClick={(versionId) => {
+            setIsModalOpen(true);
+            setActiveVersionId(versionId);
+          }}
+          versions={versions}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/core/filters/date-filter-modal.tsx b/apps/web/core/components/core/filters/date-filter-modal.tsx
new file mode 100644
index 0000000..1fcbecb
--- /dev/null
+++ b/apps/web/core/components/core/filters/date-filter-modal.tsx
@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Controller, useForm } from "react-hook-form";
+import { Button } from "@plane/propel/button";
+import { Calendar } from "@plane/propel/calendar";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { renderFormattedPayloadDate, renderFormattedDate, getDate } from "@plane/utils";
+import { DateFilterSelect } from "./date-filter-select";
+type Props = {
+  title: string;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSelect: (val: string[]) => void;
+};
+
+type TFormValues = {
+  filterType: "before" | "after" | "range";
+  date1: Date;
+  date2: Date;
+};
+
+const defaultValues: TFormValues = {
+  filterType: "range",
+  date1: new Date(),
+  date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
+};
+
+export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props) {
+  const { handleSubmit, watch, control } = useForm<TFormValues>({
+    defaultValues,
+  });
+
+  const handleFormSubmit = (formData: TFormValues) => {
+    const { filterType, date1, date2 } = formData;
+
+    if (filterType === "range")
+      onSelect([`${renderFormattedPayloadDate(date1)};after`, `${renderFormattedPayloadDate(date2)};before`]);
+    else onSelect([`${renderFormattedPayloadDate(date1)};${filterType}`]);
+
+    handleClose();
+  };
+
+  const date1 = getDate(watch("date1"));
+  const date2 = getDate(watch("date1"));
+
+  const isInvalid = watch("filterType") === "range" && date1 && date2 ? date1 > date2 : false;
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form className="space-y-4 px-5 py-8 sm:p-6">
+        <div className="flex w-full justify-between">
+          <Controller
+            control={control}
+            name="filterType"
+            render={({ field: { value, onChange } }) => (
+              <DateFilterSelect title={title} value={value} onChange={onChange} />
+            )}
+          />
+          <CloseOutline className="h-4 w-4 cursor-pointer" onClick={handleClose} />
+        </div>
+        <div className="flex w-full justify-between gap-4">
+          <Controller
+            control={control}
+            name="date1"
+            render={({ field: { value, onChange } }) => {
+              const dateValue = getDate(value);
+              const date2Value = getDate(watch("date2"));
+              return (
+                <Calendar
+                  className="rounded-md border border-subtle p-3"
+                  captionLayout="dropdown"
+                  selected={dateValue}
+                  defaultMonth={dateValue}
+                  onSelect={(date: Date | undefined) => {
+                    if (!date) return;
+                    onChange(date);
+                  }}
+                  mode="single"
+                  disabled={date2Value ? [{ after: date2Value }] : undefined}
+                />
+              );
+            }}
+          />
+          {watch("filterType") === "range" && (
+            <Controller
+              control={control}
+              name="date2"
+              render={({ field: { value, onChange } }) => {
+                const dateValue = getDate(value);
+                const date1Value = getDate(watch("date1"));
+                return (
+                  <Calendar
+                    className="rounded-md border border-subtle p-3"
+                    captionLayout="dropdown"
+                    selected={dateValue}
+                    defaultMonth={dateValue}
+                    onSelect={(date: Date | undefined) => {
+                      if (!date) return;
+                      onChange(date);
+                    }}
+                    mode="single"
+                    disabled={date1Value ? [{ before: date1Value }] : undefined}
+                  />
+                );
+              }}
+            />
+          )}
+        </div>
+        {watch("filterType") === "range" && (
+          <h6 className="flex items-center gap-1 text-11">
+            <span className="text-secondary">After:</span>
+            <span>{renderFormattedDate(watch("date1"))}</span>
+            <span className="ml-1 text-secondary">Before:</span>
+            {!isInvalid && <span>{renderFormattedDate(watch("date2"))}</span>}
+          </h6>
+        )}
+        <div className="flex justify-end gap-4">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            type="button"
+            onClick={handleSubmit(handleFormSubmit)}
+            disabled={isInvalid}
+          >
+            Apply
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/core/filters/date-filter-select.tsx b/apps/web/core/components/core/filters/date-filter-select.tsx
new file mode 100644
index 0000000..13c1835
--- /dev/null
+++ b/apps/web/core/components/core/filters/date-filter-select.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { CalendarOutline } from "@makeplane/propel/icons";
+// ui
+import { CalendarAfterIcon, CalendarBeforeIcon } from "@plane/propel/icons";
+import { CustomSelect } from "@plane/ui";
+
+type Props = {
+  title: string;
+  value: string;
+  onChange: (value: string) => void;
+};
+
+type DueDate = {
+  name: string;
+  value: string;
+  icon: any;
+};
+
+const dueDateRange: DueDate[] = [
+  {
+    name: "before",
+    value: "before",
+    icon: <CalendarBeforeIcon className="h-4 w-4" />,
+  },
+  {
+    name: "after",
+    value: "after",
+    icon: <CalendarAfterIcon className="h-4 w-4" />,
+  },
+  {
+    name: "range",
+    value: "range",
+    icon: <CalendarOutline className="h-4 w-4" />,
+  },
+];
+
+export function DateFilterSelect({ title, value, onChange }: Props) {
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        <div className="flex items-center gap-2 text-11">
+          {dueDateRange.find((item) => item.value === value)?.icon}
+          <span>
+            {title} {dueDateRange.find((item) => item.value === value)?.name}
+          </span>
+        </div>
+      }
+      onChange={onChange}
+    >
+      {dueDateRange.map((option, index) => (
+        <CustomSelect.Option key={index} value={option.value}>
+          <div className="flex items-center gap-2">
+            <span>{option.icon}</span>
+            {title} {option.name}
+          </div>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+}
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
new file mode 100644
index 0000000..7b23589
--- /dev/null
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -0,0 +1,392 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState, useRef, useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { useDropzone } from "react-dropzone";
+import type { Control, FieldPath, FieldValues } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import useSWR from "swr";
+import { Popover } from "@headlessui/react";
+// plane imports
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { Tab, Tabs, TabsList, TabsPanel } from "@makeplane/propel/components/tabs";
+import { ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EFileAssetType } from "@plane/types";
+import { Loader } from "@plane/ui";
+// helpers
+import { STATIC_COVER_IMAGES, getCoverImageDisplayURL } from "@/helpers/cover-image.helper";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+// services
+import { FileService } from "@/services/file.service";
+
+type TTabOption = {
+  key: string;
+  title: string;
+  isEnabled: boolean;
+};
+
+// Generic over the form's values because react-hook-form's Control is invariant: its
+// `_options.validate` narrows `name` to a keyof union, so `Control<any>` no longer
+// accepts a typed form's control. Inferring from `control` keeps call sites unchanged.
+type Props<TFieldValues extends FieldValues = FieldValues> = {
+  label: string | React.ReactNode;
+  value: string | null;
+  control: Control<TFieldValues>;
+  onChange: (data: string) => void;
+  disabled?: boolean;
+  tabIndex?: number;
+  isProfileCover?: boolean;
+  projectId?: string | null;
+};
+
+// services
+const fileService = new FileService();
+
+function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldValues>(props: Props<TFieldValues>) {
+  const { label, value, control, onChange, disabled = false, tabIndex, isProfileCover = false, projectId } = props;
+  // states
+  const [image, setImage] = useState<File | null>(null);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchParams, setSearchParams] = useState("");
+  const [formData, setFormData] = useState({
+    search: "",
+  });
+  // refs
+  const ref = useRef<HTMLDivElement>(null);
+  // router params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { config } = useInstance();
+  // derived values
+  const hasUnsplashConfigured = config?.has_unsplash_configured || false;
+  const tabOptions: TTabOption[] = useMemo(
+    () => [
+      {
+        key: "unsplash",
+        title: "Unsplash",
+        isEnabled: hasUnsplashConfigured,
+      },
+      {
+        key: "images",
+        title: "Images",
+        isEnabled: true,
+      },
+      {
+        key: "upload",
+        title: "Upload",
+        isEnabled: true,
+      },
+    ],
+    [hasUnsplashConfigured]
+  );
+
+  const enabledTabs = useMemo(() => tabOptions.filter((tab) => tab.isEnabled), [tabOptions]);
+
+  const { data: unsplashImages, error: unsplashError } = useSWR(
+    `UNSPLASH_IMAGES_${searchParams}`,
+    () => fileService.getUnsplashImages(searchParams),
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const imagePickerRef = useRef<HTMLDivElement>(null);
+
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setImage(acceptedFiles[0]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
+    onDrop,
+    accept: ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE,
+    maxSize: MAX_FILE_SIZE,
+  });
+
+  const handleStaticImageSelect = (imageUrl: string) => {
+    onChange(imageUrl);
+    setIsOpen(false);
+  };
+
+  const handleSubmit = async () => {
+    if (!image) return;
+    setIsImageUploading(true);
+
+    const uploadCallback = (url: string) => {
+      onChange(url);
+      setIsImageUploading(false);
+      setImage(null);
+      setIsOpen(false);
+    };
+
+    if (isProfileCover) {
+      await fileService
+        .uploadUserAsset(
+          {
+            entity_identifier: "",
+            entity_type: EFileAssetType.USER_COVER,
+          },
+          image
+        )
+        .then((res) => uploadCallback(res.asset_url))
+        .catch((error) => {
+          console.error("Error uploading user cover image:", error);
+          setIsImageUploading(false);
+          setToast({
+            message: error?.error ?? "The image could not be uploaded",
+            type: TOAST_TYPE.ERROR,
+            title: "Image not uploaded",
+          });
+        });
+    } else {
+      if (!workspaceSlug) return;
+      await fileService
+        .uploadWorkspaceAsset(
+          workspaceSlug.toString(),
+          {
+            entity_identifier: projectId?.toString() ?? "",
+            entity_type: EFileAssetType.PROJECT_COVER,
+          },
+          image
+        )
+        .then((res) => uploadCallback(res.asset_url))
+        .catch((error) => {
+          console.error("Error uploading project cover image:", error);
+          setIsImageUploading(false);
+          setToast({
+            message: error?.error ?? "The image could not be uploaded",
+            type: TOAST_TYPE.ERROR,
+            title: "Image not uploaded",
+          });
+        });
+    }
+  };
+
+  const handleClose = () => {
+    if (isOpen) setIsOpen(false);
+  };
+
+  const toggleDropdown = () => {
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  useOutsideClickDetector(ref, handleClose);
+
+  return (
+    <Popover className="relative z-19" ref={ref} tabIndex={tabIndex} onKeyDown={handleKeyDown}>
+      <Popover.Button className={getButtonStyling("secondary", "sm")} onClick={handleOnClick} disabled={disabled}>
+        {label}
+      </Popover.Button>
+
+      {isOpen && (
+        <Popover.Panel
+          className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-raised-200"
+          static
+        >
+          <div
+            ref={imagePickerRef}
+            className="flex h-96 w-80 flex-col overflow-hidden rounded border border-subtle bg-surface-1 shadow-raised-200 md:h-[36rem] md:w-[36rem]"
+          >
+            {/* Row wrapper: published Tabs omits className, so fill height comes from stretch. */}
+            <div className="flex h-full min-h-0 w-full p-3">
+              <Tabs variant="contained" defaultValue={enabledTabs[0]?.key || "images"}>
+                <div className="flex h-full min-h-0 w-full flex-col">
+                  {/* Published TabsList is inline-flex; stretch it to the previous full-width bar. */}
+                  <div className="w-full min-w-0 [&_[role=tab]]:min-w-0 [&_[role=tab]]:flex-1 [&_[role=tablist]]:flex [&_[role=tablist]]:w-full">
+                    <TabsList>
+                      {enabledTabs.map((tab) => (
+                        <Tab key={tab.key} value={tab.key} label={tab.title} />
+                      ))}
+                    </TabsList>
+                  </div>
+                  {/* Grid wrapper: published TabsPanel omits className, so fill height comes from a one-row grid. */}
+                  <div className="vertical-scrollbar mt-3 scrollbar-sm grid min-h-0 w-full flex-1 grid-rows-1 overflow-x-hidden overflow-y-auto p-3">
+                    <TabsPanel value="unsplash">
+                      <div className="space-y-4">
+                        {(unsplashImages || !unsplashError) && (
+                          <>
+                            <div className="flex items-center gap-x-2">
+                              <Controller
+                                control={control}
+                                name={"search" as FieldPath<TFieldValues>}
+                                render={({ field: { value, ref } }) => (
+                                  <InputGroup size="2xl">
+                                    <Input
+                                      size="2xl"
+                                      id="search"
+                                      name="search"
+                                      type="text"
+                                      onKeyDown={(e) => {
+                                        if (e.key === "Enter") {
+                                          e.preventDefault();
+                                          setSearchParams(formData.search);
+                                        }
+                                      }}
+                                      value={value}
+                                      onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+                                      ref={ref}
+                                      placeholder="Search for images"
+                                    />
+                                  </InputGroup>
+                                )}
+                              />
+                              <Button variant="primary" size="xl" onClick={() => setSearchParams(formData.search)}>
+                                Search
+                              </Button>
+                            </div>
+                            {unsplashImages ? (
+                              unsplashImages.length > 0 ? (
+                                <div className="grid grid-cols-4 gap-4">
+                                  {unsplashImages.map((image) => (
+                                    <div
+                                      key={image.id}
+                                      className="relative col-span-2 aspect-video md:col-span-1"
+                                      onClick={() => {
+                                        setIsOpen(false);
+                                        onChange(image.urls.regular);
+                                      }}
+                                    >
+                                      <img
+                                        src={image.urls.small}
+                                        alt={image.alt_description}
+                                        className="absolute top-0 left-0 h-full w-full cursor-pointer rounded-sm object-cover"
+                                      />
+                                    </div>
+                                  ))}
+                                </div>
+                              ) : (
+                                <p className="pt-7 text-center text-11 text-secondary">No images found.</p>
+                              )
+                            ) : (
+                              <Loader className="grid grid-cols-4 gap-4">
+                                <Loader.Item height="80px" width="100%" />
+                                <Loader.Item height="80px" width="100%" />
+                                <Loader.Item height="80px" width="100%" />
+                                <Loader.Item height="80px" width="100%" />
+                                <Loader.Item height="80px" width="100%" />
+                                <Loader.Item height="80px" width="100%" />
+                                <Loader.Item height="80px" width="100%" />
+                                <Loader.Item height="80px" width="100%" />
+                              </Loader>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </TabsPanel>
+                    <TabsPanel value="images">
+                      <div className="grid grid-cols-4 gap-4">
+                        {Object.values(STATIC_COVER_IMAGES).map((imageUrl, index) => (
+                          <div
+                            key={imageUrl}
+                            className="relative col-span-2 aspect-video md:col-span-1"
+                            onClick={() => handleStaticImageSelect(imageUrl)}
+                          >
+                            <img
+                              src={imageUrl}
+                              alt={`Cover image ${index + 1}`}
+                              className="absolute top-0 left-0 h-full w-full cursor-pointer rounded-sm object-cover transition-opacity hover:opacity-80"
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    </TabsPanel>
+                    <TabsPanel value="upload">
+                      <div className="flex h-full w-full flex-col gap-y-2">
+                        <div className="flex w-full flex-1 items-center gap-3">
+                          <div
+                            {...getRootProps()}
+                            className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
+                              (image === null && isDragActive) || !value
+                                ? "border-2 border-dashed border-subtle hover:bg-surface-2"
+                                : ""
+                            }`}
+                          >
+                            <button
+                              type="button"
+                              className="absolute top-0 right-0 z-40 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
+                            >
+                              Edit
+                            </button>
+                            {image !== null || (value && value !== "") ? (
+                              <>
+                                <img
+                                  src={image ? URL.createObjectURL(image) : getCoverImageDisplayURL(value, "")}
+                                  alt="image"
+                                  className="h-full w-full rounded-lg object-cover"
+                                />
+                              </>
+                            ) : (
+                              <div>
+                                <span className="mt-2 block text-13 font-medium text-secondary">
+                                  {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
+                                </span>
+                              </div>
+                            )}
+
+                            <input {...getInputProps()} />
+                          </div>
+                        </div>
+                        {fileRejections.length > 0 && (
+                          <p className="text-13 text-danger-primary">
+                            {fileRejections[0].errors[0].code === "file-too-large"
+                              ? "The image size cannot exceed 5 MB."
+                              : "Please upload a file in a valid format."}
+                          </p>
+                        )}
+
+                        <p className="text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
+
+                        <div className="flex h-12 items-start justify-end gap-2">
+                          <Button
+                            variant="secondary"
+                            onClick={() => {
+                              setIsOpen(false);
+                              setImage(null);
+                            }}
+                          >
+                            Cancel
+                          </Button>
+                          <Button
+                            variant="primary"
+                            className="w-full"
+                            onClick={handleSubmit}
+                            disabled={!image}
+                            loading={isImageUploading}
+                          >
+                            {isImageUploading ? "Uploading" : "Upload & Save"}
+                          </Button>
+                        </div>
+                      </div>
+                    </TabsPanel>
+                  </div>
+                </div>
+              </Tabs>
+            </div>
+          </div>
+        </Popover.Panel>
+      )}
+    </Popover>
+  );
+}
+
+// observer() erases the generic signature, so restore it with a cast.
+export const ImagePickerPopover = observer(ImagePickerPopoverComponent) as typeof ImagePickerPopoverComponent;
diff --git a/apps/web/core/components/core/list/index.ts b/apps/web/core/components/core/list/index.ts
new file mode 100644
index 0000000..fd1bcf1
--- /dev/null
+++ b/apps/web/core/components/core/list/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./list-item";
+export * from "./list-root";
diff --git a/apps/web/core/components/core/list/list-item.tsx b/apps/web/core/components/core/list/list-item.tsx
new file mode 100644
index 0000000..49b49e8
--- /dev/null
+++ b/apps/web/core/components/core/list/list-item.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// ui
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { ControlLink, Row } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
+
+interface IListItemProps {
+  id?: string;
+  title: string;
+  itemLink: string;
+  onItemClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+  prependTitleElement?: React.ReactNode;
+  appendTitleElement?: React.ReactNode;
+  actionableItems?: React.ReactNode;
+  isMobile?: boolean;
+  parentRef: React.RefObject<HTMLDivElement | null>;
+  disableLink?: boolean;
+  className?: string;
+  itemClassName?: string;
+  actionItemContainerClassName?: string;
+  isSidebarOpen?: boolean;
+  quickActionElement?: React.ReactNode;
+  preventDefaultProgress?: boolean;
+  leftElementClassName?: string;
+  rightElementClassName?: string;
+}
+
+export function ListItem(props: IListItemProps) {
+  const {
+    id,
+    title,
+    prependTitleElement,
+    appendTitleElement,
+    actionableItems,
+    itemLink,
+    onItemClick,
+    isMobile = false,
+    parentRef,
+    disableLink = false,
+    className = "",
+    actionItemContainerClassName = "",
+    isSidebarOpen = false,
+    quickActionElement,
+    itemClassName = "",
+    preventDefaultProgress = false,
+    leftElementClassName = "",
+    rightElementClassName = "",
+  } = props;
+
+  // router
+  const router = useAppRouter();
+
+  // handlers
+  const handleControlLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onItemClick) onItemClick(e);
+    else router.push(itemLink);
+  };
+
+  return (
+    <div ref={parentRef} className="relative">
+      <Row
+        className={cn(
+          "group flex min-h-[52px] w-full flex-col items-center justify-between gap-3 border-b border-subtle bg-layer-transparent py-4 text-13 hover:bg-layer-transparent-hover",
+          { "xl:flex-row xl:gap-5 xl:py-0": isSidebarOpen, "lg:flex-row lg:gap-5 lg:py-0": !isSidebarOpen },
+          className
+        )}
+      >
+        <div className={cn("relative flex w-full items-center justify-between gap-3 truncate", itemClassName)}>
+          <ControlLink
+            id={id}
+            className="relative flex w-full items-center gap-3 overflow-hidden"
+            href={itemLink}
+            target="_self"
+            onClick={handleControlLinkClick}
+            disabled={disableLink}
+            data-prevent-progress={preventDefaultProgress}
+          >
+            <div className={cn("flex items-center gap-4 truncate", leftElementClassName)}>
+              {prependTitleElement && <span className="flex flex-shrink-0 items-center">{prependTitleElement}</span>}
+              <Tooltip label={title} layout="stacked" disabled={isMobile}>
+                <span className="truncate text-13">{title}</span>
+              </Tooltip>
+            </div>
+            {appendTitleElement && (
+              <span className={cn("flex flex-shrink-0 items-center", rightElementClassName)}>{appendTitleElement}</span>
+            )}
+          </ControlLink>
+          {quickActionElement && quickActionElement}
+        </div>
+        {actionableItems && (
+          <div
+            className={cn(
+              "relative flex w-full flex-shrink-0 flex-wrap items-center justify-start gap-4",
+              {
+                "xl:w-auto xl:flex-shrink-0 xl:flex-nowrap": isSidebarOpen,
+                "lg:w-auto lg:flex-shrink-0 lg:flex-nowrap": !isSidebarOpen,
+              },
+              actionItemContainerClassName
+            )}
+          >
+            {actionableItems}
+          </div>
+        )}
+      </Row>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/core/list/list-root.tsx b/apps/web/core/components/core/list/list-root.tsx
new file mode 100644
index 0000000..efe787e
--- /dev/null
+++ b/apps/web/core/components/core/list/list-root.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Row, ERowVariant } from "@plane/ui";
+
+interface IListContainer {
+  children: React.ReactNode;
+}
+
+export function ListLayout(props: IListContainer) {
+  const { children } = props;
+  return (
+    <Row
+      variant={ERowVariant.HUGGING}
+      className="vertical-scrollbar scrollbar-lg flex h-full w-full flex-col overflow-y-auto"
+    >
+      {children}
+    </Row>
+  );
+}
diff --git a/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx b/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx
new file mode 100644
index 0000000..51f7c04
--- /dev/null
+++ b/apps/web/core/components/core/modals/bulk-delete-issues-modal-item.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Combobox } from "@headlessui/react";
+// hooks
+import type { ISearchIssueResponse } from "@plane/types";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+
+interface Props {
+  issue: ISearchIssueResponse;
+  canDeleteIssueIds: boolean;
+}
+
+export const BulkDeleteIssuesModalItem = observer(function BulkDeleteIssuesModalItem(props: Props) {
+  const { issue, canDeleteIssueIds } = props;
+
+  const color = issue.state__color;
+
+  return (
+    <Combobox.Option
+      key={issue.id}
+      as="div"
+      value={issue.id}
+      className={({ active }) =>
+        `my-0.5 flex cursor-pointer items-center justify-between rounded-md px-3 py-2 select-none ${
+          active ? "bg-layer-1 text-primary" : ""
+        }`
+      }
+    >
+      <div className="flex items-center gap-2">
+        <input type="checkbox" checked={canDeleteIssueIds} readOnly />
+        <span
+          className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: color,
+          }}
+        />
+        <IssueIdentifier
+          projectId={issue.project_id}
+          issueTypeId={issue.type_id}
+          projectIdentifier={issue.project__identifier}
+          issueSequenceId={issue.sequence_id}
+          size="xs"
+        />
+        <span>{issue.name}</span>
+      </div>
+    </Combobox.Option>
+  );
+});
diff --git a/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
new file mode 100644
index 0000000..0c89899
--- /dev/null
+++ b/apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
@@ -0,0 +1,213 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import type { SubmitHandler } from "react-hook-form";
+import { useForm } from "react-hook-form";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { SearchOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ISearchIssueResponse, IUser } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// assets
+import darkIssuesAsset from "@/app/assets/empty-state/search/issues-dark.webp?url";
+import lightIssuesAsset from "@/app/assets/empty-state/search/issues-light.webp?url";
+import darkSearchAsset from "@/app/assets/empty-state/search/search-dark.webp?url";
+import lightSearchAsset from "@/app/assets/empty-state/search/search-light.webp?url";
+// components
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import useDebounce from "@/hooks/use-debounce";
+// services
+import { ProjectService } from "@/services/project";
+// local components
+import { BulkDeleteIssuesModalItem } from "./bulk-delete-issues-modal-item";
+
+type FormInput = {
+  delete_issue_ids: string[];
+};
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  user: IUser | undefined;
+};
+
+const projectService = new ProjectService();
+
+export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(props: Props) {
+  const { isOpen, onClose } = props;
+  // router params
+  const { workspaceSlug, projectId } = useParams();
+  // states
+  const [query, setQuery] = useState("");
+  const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // hooks
+  const {
+    issues: { removeBulkIssues },
+  } = useIssues(EIssuesStoreType.PROJECT);
+  const { t } = useTranslation();
+  // derived values
+  const debouncedSearchTerm: string = useDebounce(query, 500);
+  const searchResolvedPath = resolvedTheme === "light" ? lightSearchAsset : darkSearchAsset;
+  const issuesResolvedPath = resolvedTheme === "light" ? lightIssuesAsset : darkIssuesAsset;
+
+  useEffect(() => {
+    if (!isOpen || !workspaceSlug || !projectId) return;
+
+    setIsSearching(true);
+    projectService
+      .projectIssuesSearch(workspaceSlug.toString(), projectId.toString(), {
+        search: debouncedSearchTerm,
+        workspace_search: false,
+      })
+      .then((res: ISearchIssueResponse[]) => setIssues(res))
+      .finally(() => setIsSearching(false));
+  }, [debouncedSearchTerm, isOpen, projectId, workspaceSlug]);
+
+  const {
+    handleSubmit,
+    watch,
+    reset,
+    setValue,
+    formState: { isSubmitting },
+  } = useForm<FormInput>({
+    defaultValues: {
+      delete_issue_ids: [],
+    },
+  });
+
+  const handleClose = () => {
+    setQuery("");
+    reset();
+    onClose();
+  };
+
+  const handleDelete: SubmitHandler<FormInput> = async (data) => {
+    if (!workspaceSlug || !projectId) return;
+
+    if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Please select at least one work item.",
+      });
+      return;
+    }
+
+    if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
+
+    await removeBulkIssues(workspaceSlug, projectId, data.delete_issue_ids)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Work items deleted successfully!",
+        });
+        handleClose();
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  const issueList =
+    issues.length > 0 ? (
+      <li className="p-2">
+        {query === "" && (
+          <h2 className="mt-4 mb-2 px-3 text-11 font-semibold text-primary">Select work items to delete</h2>
+        )}
+        <ul className="text-13 text-secondary">
+          {issues.map((issue) => (
+            <BulkDeleteIssuesModalItem
+              issue={issue}
+              canDeleteIssueIds={watch("delete_issue_ids").includes(issue.id)}
+              key={issue.id}
+            />
+          ))}
+        </ul>
+      </li>
+    ) : (
+      <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
+        {query === "" ? (
+          <SimpleEmptyState title={t("issue_relation.empty_state.no_issues.title")} assetPath={issuesResolvedPath} />
+        ) : (
+          <SimpleEmptyState title={t("issue_relation.empty_state.search.title")} assetPath={searchResolvedPath} />
+        )}
+      </div>
+    );
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form>
+        <Combobox
+          onChange={(val: string | null) => {
+            if (val === null) return;
+            const selectedIssues = watch("delete_issue_ids");
+            if (selectedIssues.includes(val))
+              setValue(
+                "delete_issue_ids",
+                selectedIssues.filter((i) => i !== val)
+              );
+            else setValue("delete_issue_ids", [...selectedIssues, val]);
+          }}
+        >
+          <div className="relative m-1">
+            <SearchOutline
+              className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
+              aria-hidden="true"
+            />
+            <input
+              type="text"
+              className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-primary outline-none focus:ring-0 sm:text-13"
+              placeholder="Search..."
+              onChange={(event) => setQuery(event.target.value)}
+            />
+          </div>
+
+          <Combobox.Options as="ul" static className="max-h-80 scroll-py-2 divide-y divide-subtle-1 overflow-y-auto">
+            {isSearching ? (
+              <Loader className="space-y-3 p-3">
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+                <Loader.Item height="40px" />
+              </Loader>
+            ) : (
+              <>{issueList}</>
+            )}
+          </Combobox.Options>
+        </Combobox>
+
+        {issues.length > 0 && (
+          <div className="flex items-center justify-end gap-2 p-3">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="error-fill" size="lg" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
+              {isSubmitting ? "Deleting..." : "Delete selected work items"}
+            </Button>
+          </div>
+        )}
+      </form>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/core/modals/change-email-modal.tsx b/apps/web/core/components/core/modals/change-email-modal.tsx
new file mode 100644
index 0000000..73cd2e5
--- /dev/null
+++ b/apps/web/core/components/core/modals/change-email-modal.tsx
@@ -0,0 +1,222 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { cn } from "@plane/utils";
+// helpers
+import { authErrorHandler } from "@/helpers/authentication.helper";
+import type { EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
+// hooks
+import { useUser } from "@/hooks/store/user";
+// services
+import { AuthService } from "@/services/auth.service";
+import userService from "@/services/user.service";
+
+type Props = { isOpen: boolean; onClose: () => void };
+
+type TModalStep = "EMAIL" | "UNIQUE_CODE";
+type TUniqueCodeValuesForm = { email: string; code: string };
+
+const defaultValues: TUniqueCodeValuesForm = { email: "", code: "" };
+
+// service initialization
+const authService = new AuthService();
+
+export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props) {
+  const { isOpen, onClose } = props;
+  // states
+  const [currentStep, setCurrentStep] = useState<TModalStep>("EMAIL");
+  // store hooks
+  const { signOut } = useUser();
+  const { t } = useTranslation();
+  const changeEmailT = (path: string) => t(`account_settings.profile.change_email_modal.${path}`);
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setError,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<TUniqueCodeValuesForm>({ defaultValues });
+
+  const secondStep = currentStep === "UNIQUE_CODE";
+
+  const handleClose = () => {
+    reset({ ...defaultValues });
+    setCurrentStep("EMAIL");
+    onClose();
+  };
+
+  const handleSignOut = async () => {
+    await signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("auth.sign_out.toast.error.title"),
+        message: t("auth.sign_out.toast.error.message"),
+      })
+    );
+  };
+
+  const onSubmit = async (formData: TUniqueCodeValuesForm) => {
+    if (currentStep === "UNIQUE_CODE") {
+      // Step 2: Verify the code and update email
+      try {
+        await userService.verifyEmailCode({ email: formData.email, code: formData.code });
+
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: changeEmailT("toasts.success_title"),
+          message: changeEmailT("toasts.success_message"),
+        });
+
+        // Sign out the user after successful email update
+        await handleSignOut();
+        handleClose();
+      } catch (error: unknown) {
+        const errorMessage =
+          (error as { error?: string; message?: string })?.error ||
+          (error as { error?: string; message?: string })?.message ||
+          changeEmailT("form.code.errors.invalid");
+        setError("code", { type: "custom", message: errorMessage });
+      }
+      return;
+    }
+
+    // Step 1: Check email and generate verification code
+    try {
+      // Get CSRF token
+      const csrfToken = await authService.requestCSRFToken().then((data) => data?.csrf_token);
+      if (!csrfToken) throw new Error("CSRF token not found");
+
+      // Check if email is available
+      const emailCheckResponse = await userService.checkEmail(csrfToken, formData.email);
+
+      // Check if email already exists
+      if (emailCheckResponse?.existing === true) {
+        setError("email", { type: "custom", message: changeEmailT("form.email.errors.exists") });
+        return;
+      }
+
+      // Generate verification code and send to new email
+      await userService.generateEmailCode({ email: formData.email });
+
+      // Move to verification code step
+      setCurrentStep("UNIQUE_CODE");
+    } catch (error: unknown) {
+      // Extract error code and message from backend response
+      const err = error as { error_code?: number | string; error_message?: string };
+      const errorCode = err?.error_code?.toString();
+
+      // Use authErrorHandler to get user-friendly error message
+      const errorInfo = errorCode ? authErrorHandler(errorCode as EAuthenticationErrorCodes) : undefined;
+
+      // Get error message from handler or fallback
+      const errorMessage = errorInfo
+        ? typeof errorInfo.message === "string"
+          ? errorInfo.message
+          : String(errorInfo.message)
+        : err?.error_message || changeEmailT("form.email.errors.validation_failed");
+
+      setError("email", { type: "custom", message: errorMessage });
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="space-y-0 px-4 py-4">
+        <h3 className="text-16 leading-6 font-medium text-primary">{changeEmailT("title")}</h3>
+        <p className="my-4 text-13 text-secondary">{changeEmailT("description")}</p>
+      </div>
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 px-4" noValidate>
+        <div className="flex flex-col gap-1">
+          {secondStep && <h4 className="text-13 font-medium text-secondary">{changeEmailT("form.email.label")}</h4>}
+          <Controller
+            control={control}
+            name="email"
+            rules={{
+              required: changeEmailT("form.email.errors.required"),
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                message: changeEmailT("form.email.errors.invalid"),
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="email" invalid={Boolean(errors.email)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="email"
+                    name="email"
+                    type="email"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    placeholder={changeEmailT("form.email.placeholder")}
+                    autoComplete="off"
+                    disabled={secondStep}
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+          {errors?.email && <span className="text-11 text-danger-primary">{errors?.email?.message}</span>}
+        </div>
+
+        {secondStep && (
+          <div className="flex flex-col gap-1">
+            <h4 className="text-13 font-medium text-secondary">{changeEmailT("form.code.label")}</h4>
+            <Controller
+              control={control}
+              name="code"
+              rules={{ required: changeEmailT("form.code.errors.required") }}
+              render={({ field: { value, onChange, ref } }) => (
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="code"
+                    name="code"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    placeholder={changeEmailT("form.code.placeholder")}
+                    autoComplete="off"
+                    autoFocus
+                  />
+                </InputGroup>
+              )}
+            />
+            {errors?.code ? (
+              <span className="text-11 text-danger-primary">{errors?.code?.message}</span>
+            ) : (
+              <span className="text-11 text-success-primary">{changeEmailT("form.code.helper_text")}</span>
+            )}
+          </div>
+        )}
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle py-4">
+          <Button type="button" variant="secondary" size="lg" onClick={handleClose}>
+            {changeEmailT("actions.cancel")}
+          </Button>
+          <Button type="submit" variant="primary" size="lg" disabled={isSubmitting}>
+            {isSubmitting
+              ? changeEmailT("states.sending")
+              : secondStep
+                ? changeEmailT("actions.confirm")
+                : changeEmailT("actions.continue")}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
new file mode 100644
index 0000000..f0967c8
--- /dev/null
+++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -0,0 +1,340 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState, useRef } from "react";
+import { CloseOutline, RocketOutline, SearchOutline } from "@makeplane/propel/icons";
+import { Combobox } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
+// ui
+import { Switch } from "@makeplane/propel/components/switch";
+import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { generateWorkItemLink, getTabIndex } from "@plane/utils";
+// helpers
+// hooks
+import useDebounce from "@/hooks/use-debounce";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { ProjectService } from "@/services/project";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+import { IssueSearchModalEmptyState } from "./issue-search-modal-empty-state";
+
+type Props = {
+  workspaceSlug: string | undefined;
+  projectId?: string;
+  isOpen: boolean;
+  handleClose: () => void;
+  searchParams: Partial<TProjectIssuesSearchParams>;
+  handleOnSubmit: (data: ISearchIssueResponse[]) => Promise<void>;
+  workspaceLevelToggle?: boolean;
+  shouldHideIssue?: (issue: ISearchIssueResponse) => boolean;
+  selectedWorkItemIds?: string[];
+  workItemSearchServiceCallback?: (params: TProjectIssuesSearchParams) => Promise<ISearchIssueResponse[]>;
+};
+
+const projectService = new ProjectService();
+
+export function ExistingIssuesListModal(props: Props) {
+  const { t } = useTranslation();
+
+  const {
+    workspaceSlug,
+    projectId,
+    isOpen,
+    handleClose: onClose,
+    searchParams,
+    handleOnSubmit,
+    workspaceLevelToggle = false,
+    shouldHideIssue,
+    selectedWorkItemIds,
+    workItemSearchServiceCallback,
+  } = props;
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
+  const [selectedIssues, setSelectedIssues] = useState<ISearchIssueResponse[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
+  const { isMobile } = usePlatformOS();
+  const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
+  const { baseTabIndex } = getTabIndex(undefined, isMobile);
+  const hasInitializedSelection = useRef(false);
+
+  const handleClose = () => {
+    onClose();
+    setSearchTerm("");
+    setSelectedIssues([]);
+    setIsWorkspaceLevel(false);
+    hasInitializedSelection.current = false;
+  };
+
+  const onSubmit = async () => {
+    if (selectedIssues.length === 0) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: t("issue.select.error"),
+      });
+
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    await handleOnSubmit(selectedIssues).finally(() => setIsSubmitting(false));
+
+    handleClose();
+  };
+
+  const handleSearch = () => {
+    if (!isOpen || !workspaceSlug) return;
+    setIsLoading(true);
+    const searchService =
+      workItemSearchServiceCallback ??
+      (projectId
+        ? projectService.projectIssuesSearch.bind(projectService, workspaceSlug?.toString(), projectId?.toString())
+        : undefined);
+    if (!searchService) return;
+    searchService({
+      search: debouncedSearchTerm,
+      ...searchParams,
+      workspace_search: isWorkspaceLevel,
+    })
+      .then((res) => setIssues(res))
+      .finally(() => {
+        setIsSearching(false);
+        setIsLoading(false);
+      });
+  };
+
+  const handleSelectIssues = () => {
+    setSelectedIssues((prevData) => (prevData.length === filteredIssues.length ? [] : [...filteredIssues]));
+  };
+
+  useEffect(() => {
+    if (isOpen && !hasInitializedSelection.current && selectedWorkItemIds && issues.length > 0) {
+      setSelectedIssues(issues.filter((issue) => selectedWorkItemIds.includes(issue.id)));
+      hasInitializedSelection.current = true;
+    }
+  }, [isOpen, issues, selectedWorkItemIds]);
+
+  useEffect(() => {
+    handleSearch();
+  }, [debouncedSearchTerm, isOpen, isWorkspaceLevel, projectId, workspaceSlug]);
+
+  const filteredIssues = issues.filter((issue) => !shouldHideIssue?.(issue));
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <Combobox
+        as="div"
+        onChange={(val: ISearchIssueResponse | null) => {
+          if (val === null) return;
+          if (selectedIssues.some((i) => i.id === val.id))
+            setSelectedIssues((prevData) => prevData.filter((i) => i.id !== val.id));
+          else setSelectedIssues((prevData) => [...prevData, val]);
+        }}
+      >
+        <div className="relative m-1">
+          <SearchOutline
+            className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
+            aria-hidden="true"
+          />
+          <Combobox.Input
+            className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-13 text-primary outline-none placeholder:text-placeholder focus:ring-0"
+            placeholder={t("common.search.placeholder")}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            tabIndex={baseTabIndex}
+          />
+        </div>
+
+        <div className="flex flex-col-reverse gap-4 p-2 text-13 text-secondary sm:flex-row sm:items-center sm:justify-between">
+          {selectedIssues.length > 0 ? (
+            <div className="mt-1 flex flex-wrap items-center gap-2">
+              {selectedIssues.map((issue) => (
+                <div
+                  key={issue.id}
+                  className="flex items-center gap-1 rounded-md border border-subtle bg-layer-1 py-1 pl-2 text-11 whitespace-nowrap text-primary"
+                >
+                  <IssueIdentifier
+                    projectId={issue.project_id}
+                    issueTypeId={issue.type_id}
+                    projectIdentifier={issue.project__identifier}
+                    issueSequenceId={issue.sequence_id}
+                    size="xs"
+                    variant="secondary"
+                  />
+                  <button
+                    type="button"
+                    className="group p-1"
+                    onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
+                  >
+                    <CloseOutline className="h-3 w-3 text-secondary group-hover:text-primary" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="w-min rounded-md border border-subtle bg-layer-1 p-2 text-11 whitespace-nowrap">
+              {t("issue.select.empty")}
+            </div>
+          )}
+          {workspaceLevelToggle && (
+            <Tooltip label="Toggle workspace level search" disabled={isMobile}>
+              <div
+                className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-11 ${
+                  isWorkspaceLevel ? "text-primary" : "text-secondary"
+                }`}
+              >
+                <Switch
+                  size="sm"
+                  checked={isWorkspaceLevel}
+                  onCheckedChange={setIsWorkspaceLevel}
+                  aria-label={t("common.workspace_level")}
+                />
+                <button
+                  type="button"
+                  onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                  className="flex-shrink-0"
+                >
+                  {t("common.workspace_level")}
+                </button>
+              </div>
+            </Tooltip>
+          )}
+        </div>
+
+        <Combobox.Options
+          as="ul"
+          static
+          className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto"
+        >
+          {/* TODO: Translate here */}
+          {searchTerm !== "" && (
+            <h5 className="mx-2 text-13 text-secondary">
+              Search results for{" "}
+              <span className="text-primary">
+                {'"'}
+                {searchTerm}
+                {'"'}
+              </span>{" "}
+              in project:
+            </h5>
+          )}
+
+          {isSearching || isLoading ? (
+            <Loader className="space-y-3 p-3">
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+            </Loader>
+          ) : (
+            <>
+              {filteredIssues.length === 0 ? (
+                <IssueSearchModalEmptyState
+                  debouncedSearchTerm={debouncedSearchTerm}
+                  isSearching={isSearching}
+                  issues={filteredIssues}
+                  searchTerm={searchTerm}
+                />
+              ) : (
+                <ul className={`text-13 text-primary ${filteredIssues.length > 0 ? "p-2" : ""}`}>
+                  {filteredIssues.map((issue) => {
+                    const selected = selectedIssues.some((i) => i.id === issue.id);
+
+                    return (
+                      <Combobox.Option
+                        key={issue.id}
+                        as="label"
+                        htmlFor={`issue-${issue.id}`}
+                        value={issue}
+                        className={({ active }) =>
+                          `group my-0.5 flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-3 py-2 text-secondary select-none ${
+                            active ? "bg-layer-1 text-primary" : ""
+                          } ${selected ? "text-primary" : ""}`
+                        }
+                      >
+                        <div className="flex items-center gap-2 truncate">
+                          <input type="checkbox" checked={selected} readOnly />
+                          <span
+                            className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                            style={{
+                              backgroundColor: issue.state__color,
+                            }}
+                          />
+                          <span className="flex-shrink-0">
+                            <IssueIdentifier
+                              projectId={issue.project_id}
+                              issueTypeId={issue.type_id}
+                              projectIdentifier={issue.project__identifier}
+                              issueSequenceId={issue.sequence_id}
+                              size="xs"
+                              variant="secondary"
+                            />
+                          </span>
+                          <span className="truncate">{issue.name}</span>
+                        </div>
+                        <a
+                          href={generateWorkItemLink({
+                            workspaceSlug,
+                            projectId: issue?.project_id,
+                            issueId: issue?.id,
+                            projectIdentifier: issue.project__identifier,
+                            sequenceId: issue?.sequence_id,
+                          })}
+                          target="_blank"
+                          className="relative z-1 hidden flex-shrink-0 text-secondary group-hover:block hover:text-primary"
+                          rel="noopener noreferrer"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <RocketOutline className="h-4 w-4" />
+                        </a>
+                      </Combobox.Option>
+                    );
+                  })}
+                </ul>
+              )}
+            </>
+          )}
+        </Combobox.Options>
+      </Combobox>
+      <div className="flex items-center justify-between p-3">
+        <Button
+          variant="link"
+          onClick={handleSelectIssues}
+          disabled={filteredIssues.length === 0}
+          className={filteredIssues.length === 0 ? "p-0" : ""}
+        >
+          {selectedIssues.length === issues.length ? t("issue.select.deselect_all") : t("issue.select.select_all")}
+        </Button>
+        <div className="flex items-center justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            onClick={onSubmit}
+            loading={isSubmitting}
+            disabled={isSubmitting || selectedIssues.length === 0}
+          >
+            {isSubmitting ? t("common.adding") : t("issue.select.add_selected")}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
new file mode 100644
index 0000000..58423c5
--- /dev/null
+++ b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
@@ -0,0 +1,305 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Ref } from "react";
+import React, { useEffect, useState, useRef, Fragment } from "react";
+import type { Placement } from "@popperjs/core";
+import { Controller, useForm } from "react-hook-form"; // services
+import { usePopper } from "react-popper";
+import { WarningCircleOutline } from "@makeplane/propel/icons";
+import { Popover, Transition } from "@headlessui/react";
+// plane imports
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import type { EditorRefApi } from "@plane/editor";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+
+// components
+import { RichTextEditor } from "@/components/editor/rich-text";
+// services
+import { AIService } from "@/services/ai.service";
+const aiService = new AIService();
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onResponse: (response: any) => void;
+  onError?: (error: any) => void;
+  placement?: Placement;
+  prompt?: string;
+  button: React.ReactNode;
+  className?: string;
+  workspaceId: string;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+type FormData = {
+  prompt: string;
+  task: string;
+};
+
+export function GptAssistantPopover(props: Props) {
+  const {
+    isOpen,
+    handleClose,
+    onResponse,
+    onError,
+    placement,
+    prompt,
+    button,
+    className = "",
+    workspaceId,
+    workspaceSlug,
+    projectId,
+  } = props;
+  // states
+  const [response, setResponse] = useState("");
+  const [invalidResponse, setInvalidResponse] = useState(false);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  const responseRef = useRef<EditorRefApi>(null);
+  // popper
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+  // form
+  const {
+    handleSubmit,
+    control,
+    reset,
+    setFocus,
+    formState: { isSubmitting },
+  } = useForm<FormData>({
+    defaultValues: {
+      prompt: prompt || "",
+      task: "",
+    },
+  });
+
+  const onClose = () => {
+    handleClose();
+    setResponse("");
+    setInvalidResponse(false);
+    reset();
+  };
+
+  const handleServiceError = (err: any) => {
+    const error = err?.data?.error;
+    const errorMessage =
+      err?.status === 429
+        ? error || "You have reached the maximum number of requests of 50 requests per month per user."
+        : error || "Some error occurred. Please try again.";
+
+    setToast({
+      type: TOAST_TYPE.ERROR,
+      title: "Error!",
+      message: errorMessage,
+    });
+
+    if (onError) onError(err);
+  };
+
+  const callAIService = async (formData: FormData) => {
+    try {
+      const res = await aiService.createGptTask(workspaceSlug.toString(), {
+        prompt: prompt || "",
+        task: formData.task,
+      });
+
+      setResponse(res.response_html);
+      setFocus("task");
+
+      setInvalidResponse(res.response === "");
+    } catch (err) {
+      handleServiceError(err);
+    }
+  };
+
+  const handleInvalidTask = () => {
+    setToast({
+      type: TOAST_TYPE.ERROR,
+      title: "Error!",
+      message: "Please enter some task to get AI assistance.",
+    });
+  };
+
+  const handleAIResponse = async (formData: FormData) => {
+    if (!workspaceSlug) return;
+
+    if (formData.task === "") {
+      handleInvalidTask();
+      return;
+    }
+
+    await callAIService(formData);
+  };
+
+  useEffect(() => {
+    if (isOpen) setFocus("task");
+  }, [isOpen, setFocus]);
+
+  useEffect(() => {
+    editorRef.current?.setEditorValue(prompt || "");
+  }, [editorRef, prompt]);
+
+  useEffect(() => {
+    responseRef.current?.setEditorValue(`<p>${response}</p>`);
+  }, [response, responseRef]);
+
+  useEffect(() => {
+    const handleEnterKeyPress = (event: KeyboardEvent) => {
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSubmit(handleAIResponse)();
+      }
+    };
+
+    const handleEscapeKeyPress = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      window.addEventListener("keydown", handleEnterKeyPress);
+      window.addEventListener("keydown", handleEscapeKeyPress);
+    }
+
+    return () => {
+      window.removeEventListener("keydown", handleEnterKeyPress);
+      window.removeEventListener("keydown", handleEscapeKeyPress);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, handleSubmit, onClose]);
+
+  const responseActionButton = response !== "" && (
+    <Button
+      variant="primary"
+      onClick={() => {
+        onResponse(response);
+        onClose();
+      }}
+    >
+      Use this response
+    </Button>
+  );
+
+  const generateResponseButtonText = isSubmitting
+    ? "Generating response..."
+    : response === ""
+      ? "Generate response"
+      : "Generate again";
+
+  return (
+    <Popover as="div" className={`relative w-min text-left`}>
+      <Popover.Button as={Fragment}>
+        <button ref={setReferenceElement} className="flex items-center" tabIndex={-1}>
+          {button}
+        </button>
+      </Popover.Button>
+      <Transition
+        show={isOpen}
+        as={React.Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Popover.Panel
+          as="div"
+          className={`shadow fixed z-10 flex w-full max-w-full min-w-[50rem] flex-col space-y-4 overflow-hidden rounded-[10px] border border-subtle bg-surface-1 p-4 ${className}`}
+          ref={setPopperElement as Ref<HTMLDivElement>}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="vertical-scroll-enable max-h-72 space-y-4 overflow-y-auto">
+            {prompt && (
+              <div className="text-13">
+                Content:
+                <RichTextEditor
+                  editable={false}
+                  id="ai-assistant-content"
+                  initialValue={prompt}
+                  containerClassName="-m-3"
+                  ref={editorRef}
+                  workspaceId={workspaceId}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                />
+              </div>
+            )}
+            {response !== "" && (
+              <div className="page-block-section max-h-[8rem] text-13">
+                Response:
+                <RichTextEditor
+                  editable={false}
+                  id="ai-assistant-response"
+                  initialValue={`<p>${response}</p>`}
+                  ref={responseRef}
+                  workspaceId={workspaceId}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                />
+              </div>
+            )}
+            {invalidResponse && (
+              <div className="text-13 text-danger-primary">
+                No response could be generated. This may be due to insufficient content or task information. Please try
+                again.
+              </div>
+            )}
+          </div>
+          <Controller
+            control={control}
+            name="task"
+            render={({ field: { value, onChange, ref } }) => (
+              <InputGroup size="2xl">
+                <Input
+                  size="2xl"
+                  id="task"
+                  name="task"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  placeholder={`${
+                    prompt && prompt !== "" ? "Tell AI what action to perform on this content..." : "Ask AI anything..."
+                  }`}
+                  autoFocus
+                />
+              </InputGroup>
+            )}
+          />
+          <div className="flex justify-between gap-2">
+            {responseActionButton ? (
+              <>{responseActionButton}</>
+            ) : (
+              <>
+                <div className="flex items-start justify-center gap-2 text-13 text-accent-primary">
+                  <WarningCircleOutline className="h-4 w-4" />
+                  <p>By using this feature, you consent to sharing the message with a 3rd party service. </p>
+                </div>
+              </>
+            )}
+            <div className="flex items-center gap-2">
+              <Button variant="secondary" onClick={onClose}>
+                Close
+              </Button>
+              <Button variant="primary" onClick={handleSubmit(handleAIResponse)} loading={isSubmitting}>
+                {generateResponseButtonText}
+              </Button>
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+}
diff --git a/apps/web/core/components/core/modals/issue-search-modal-empty-state.tsx b/apps/web/core/components/core/modals/issue-search-modal-empty-state.tsx
new file mode 100644
index 0000000..24b1343
--- /dev/null
+++ b/apps/web/core/components/core/modals/issue-search-modal-empty-state.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { useTheme } from "next-themes";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { ISearchIssueResponse } from "@plane/types";
+// assets
+import darkIssuesAsset from "@/app/assets/empty-state/search/issues-dark.webp?url";
+import lightIssuesAsset from "@/app/assets/empty-state/search/issues-light.webp?url";
+import darkSearchAsset from "@/app/assets/empty-state/search/search-dark.webp?url";
+import lightSearchAsset from "@/app/assets/empty-state/search/search-light.webp?url";
+// components
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+
+interface EmptyStateProps {
+  issues: ISearchIssueResponse[];
+  searchTerm: string;
+  debouncedSearchTerm: string;
+  isSearching: boolean;
+}
+
+export function IssueSearchModalEmptyState({ issues, searchTerm, debouncedSearchTerm, isSearching }: EmptyStateProps) {
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const searchResolvedPath = resolvedTheme === "light" ? lightSearchAsset : darkSearchAsset;
+  const issuesResolvedPath = resolvedTheme === "light" ? lightIssuesAsset : darkIssuesAsset;
+
+  function EmptyStateContainer({ children }: { children: React.ReactNode }) {
+    return <div className="flex flex-col items-center justify-center px-3 py-8 text-center">{children}</div>;
+  }
+
+  if (issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && !isSearching) {
+    return (
+      <EmptyStateContainer>
+        <SimpleEmptyState title={t("issue_relation.empty_state.no_issues.title")} assetPath={issuesResolvedPath} />
+      </EmptyStateContainer>
+    );
+  } else if (issues.length === 0) {
+    return (
+      <EmptyStateContainer>
+        <SimpleEmptyState title={t("issue_relation.empty_state.search.title")} assetPath={searchResolvedPath} />
+      </EmptyStateContainer>
+    );
+  }
+  return null;
+}
diff --git a/apps/web/core/components/core/modals/user-image-upload-modal.tsx b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
new file mode 100644
index 0000000..5bca711
--- /dev/null
+++ b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useDropzone } from "react-dropzone";
+// plane imports
+import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { UserOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EFileAssetType } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
+// services
+import { FileService } from "@/services/file.service";
+const fileService = new FileService();
+
+type Props = {
+  handleRemove: () => Promise<void>;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (url: string) => void;
+  value: string | null;
+};
+
+export const UserImageUploadModal = observer(function UserImageUploadModal(props: Props) {
+  const { handleRemove, isOpen, onClose, onSuccess, value } = props;
+  // states
+  const [image, setImage] = useState<File | null>(null);
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+
+  const onDrop = (acceptedFiles: File[]) => setImage(acceptedFiles[0]);
+
+  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
+    onDrop,
+    accept: ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE,
+    maxSize: MAX_FILE_SIZE,
+    multiple: false,
+  });
+
+  const handleClose = () => {
+    setImage(null);
+    setIsImageUploading(false);
+    onClose();
+  };
+
+  const handleSubmit = async () => {
+    if (!image) return;
+    setIsImageUploading(true);
+
+    try {
+      const { asset_url } = await fileService.uploadUserAsset(
+        {
+          entity_identifier: "",
+          entity_type: EFileAssetType.USER_AVATAR,
+        },
+        image
+      );
+      onSuccess(asset_url);
+      setImage(null);
+    } catch (error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: error?.toString() ?? "Something went wrong. Please try again.",
+      });
+      throw new Error("Error in uploading file.");
+    } finally {
+      setIsImageUploading(false);
+    }
+  };
+
+  const handleImageRemove = async () => {
+    if (!value) return;
+    setIsRemoving(true);
+    try {
+      if (checkURLValidity(value)) {
+        await fileService.deleteOldUserAsset(value);
+      } else {
+        const assetId = getAssetIdFromUrl(value);
+        await fileService.deleteUserAsset(assetId);
+      }
+      await handleRemove();
+    } catch (error) {
+      console.log("Error in uploading user asset:", error);
+    } finally {
+      setIsRemoving(false);
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XL}>
+      <div className="space-y-5 px-5 py-8 sm:p-6">
+        <h3 className="text-16 leading-6 font-medium text-primary">Upload Image</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-center gap-3">
+            <div
+              {...getRootProps()}
+              className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
+                (image === null && isDragActive) || !value
+                  ? "border-2 border-dashed border-subtle hover:bg-surface-2"
+                  : ""
+              }`}
+            >
+              {image !== null || (value && value !== "") ? (
+                <>
+                  <button
+                    type="button"
+                    className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
+                  >
+                    Edit
+                  </button>
+                  <img
+                    src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
+                    alt="image"
+                    className="absolute top-0 left-0 h-full w-full rounded-md object-cover"
+                  />
+                </>
+              ) : (
+                <div>
+                  <UserOutline className="mx-auto h-16 w-16 text-secondary" />
+                  <span className="mt-2 block text-13 font-medium text-secondary">
+                    {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
+                  </span>
+                </div>
+              )}
+
+              <input {...getInputProps()} />
+            </div>
+          </div>
+          {fileRejections.length > 0 && (
+            <p className="text-13 text-danger-primary">
+              {fileRejections[0].errors[0].code === "file-too-large"
+                ? "The image size cannot exceed 5 MB."
+                : "Please upload a file in a valid format."}
+            </p>
+          )}
+        </div>
+        <p className="my-4 text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
+        <div className="flex items-center justify-between">
+          <Button variant="error-fill" size="lg" onClick={handleImageRemove} disabled={!value}>
+            {isRemoving ? "Removing" : "Remove"}
+          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="lg" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
+              {isImageUploading ? "Uploading" : "Upload & Save"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
new file mode 100644
index 0000000..2eead16
--- /dev/null
+++ b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -0,0 +1,174 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { useDropzone } from "react-dropzone";
+// plane imports
+import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { UserOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EFileAssetType } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// services
+import { FileService } from "@/services/file.service";
+
+type Props = {
+  handleRemove: () => Promise<void>;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (url: string) => void;
+  value: string | null;
+};
+
+// services
+const fileService = new FileService();
+
+export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadModal(props: Props) {
+  const { handleRemove, isOpen, onClose, onSuccess, value } = props;
+  // states
+  const [image, setImage] = useState<File | null>(null);
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [isImageUploading, setIsImageUploading] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { currentWorkspace, updateWorkspaceLogo } = useWorkspace();
+
+  const onDrop = (acceptedFiles: File[]) => setImage(acceptedFiles[0]);
+
+  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
+    onDrop,
+    accept: ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE,
+    maxSize: MAX_FILE_SIZE,
+    multiple: false,
+  });
+
+  const handleClose = () => {
+    setIsImageUploading(false);
+    onClose();
+    setTimeout(() => {
+      setImage(null);
+    }, 300);
+  };
+
+  const handleSubmit = async () => {
+    if (!image || !workspaceSlug || !currentWorkspace) return;
+    setIsImageUploading(true);
+
+    try {
+      const { asset_url } = await fileService.uploadWorkspaceAsset(
+        workspaceSlug.toString(),
+        {
+          entity_identifier: currentWorkspace.id,
+          entity_type: EFileAssetType.WORKSPACE_LOGO,
+        },
+        image
+      );
+      updateWorkspaceLogo(workspaceSlug.toString(), asset_url);
+      onSuccess(asset_url);
+    } catch (error: any) {
+      console.log("error", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: error.error || "Something went wrong",
+      });
+    } finally {
+      setIsImageUploading(false);
+    }
+  };
+
+  const handleImageRemove = async () => {
+    if (!workspaceSlug || !value) return;
+    setIsRemoving(true);
+    try {
+      if (checkURLValidity(value)) {
+        await fileService.deleteOldWorkspaceAsset(currentWorkspace?.id ?? "", value);
+      } else {
+        const assetId = getAssetIdFromUrl(value);
+        await fileService.deleteWorkspaceAsset(workspaceSlug.toString(), assetId);
+      }
+      await handleRemove();
+      handleClose();
+    } catch (error) {
+      console.log("Error in removing workspace asset:", error);
+    } finally {
+      setIsRemoving(false);
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XL}>
+      <div className="space-y-5 px-5 py-8 sm:p-6">
+        <h3 className="text-16 leading-6 font-medium text-primary">Upload image</h3>
+        <div className="space-y-3">
+          <div className="flex items-center justify-center gap-3">
+            <div
+              {...getRootProps()}
+              className={`relative grid h-80 w-80 cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
+                (image === null && isDragActive) || !value
+                  ? "border-2 border-dashed border-subtle hover:bg-surface-2"
+                  : ""
+              }`}
+            >
+              {image !== null || (value && value !== "") ? (
+                <>
+                  <button
+                    type="button"
+                    className="absolute top-0 right-0 z-40 translate-x-1/2 -translate-y-1/2 rounded-sm bg-surface-2 px-2 py-0.5 text-11 font-medium text-secondary"
+                  >
+                    Edit
+                  </button>
+                  <img
+                    src={image ? URL.createObjectURL(image) : value ? getFileURL(value) : ""}
+                    alt="image"
+                    className="absolute top-0 left-0 h-full w-full rounded-md object-cover"
+                  />
+                </>
+              ) : (
+                <div>
+                  <UserOutline className="mx-auto h-16 w-16 text-secondary" />
+                  <span className="mt-2 block text-13 font-medium text-secondary">
+                    {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
+                  </span>
+                </div>
+              )}
+
+              <input {...getInputProps()} />
+            </div>
+          </div>
+          {fileRejections.length > 0 && (
+            <p className="text-13 text-danger-primary">
+              {fileRejections[0].errors[0].code === "file-too-large"
+                ? "The image size cannot exceed 5 MB."
+                : "Please upload a file in a valid format."}
+            </p>
+          )}
+        </div>
+        <p className="my-4 text-13 text-secondary">File formats supported- .jpeg, .jpg, .png, .webp</p>
+        <div className="flex items-center justify-between">
+          <Button variant="error-fill" size="lg" onClick={handleImageRemove} disabled={!value} loading={isRemoving}>
+            {isRemoving ? "Removing" : "Remove"}
+          </Button>
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="lg" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
+              {isImageUploading ? "Uploading" : "Upload & Save"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/core/multiple-select/entity-select-action.tsx b/apps/web/core/components/core/multiple-select/entity-select-action.tsx
new file mode 100644
index 0000000..d96c7b3
--- /dev/null
+++ b/apps/web/core/components/core/multiple-select/entity-select-action.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { cn } from "@plane/utils";
+// hooks
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+
+type Props = {
+  className?: string;
+  disabled?: boolean;
+  groupId: string;
+  id: string;
+  selectionHelpers: TSelectionHelper;
+};
+
+export const MultipleSelectEntityAction = observer(function MultipleSelectEntityAction(props: Props) {
+  const { className, disabled = false, groupId, id, selectionHelpers } = props;
+  // derived values
+  const isSelected = selectionHelpers.getIsEntitySelected(id);
+
+  if (selectionHelpers.isSelectionDisabled) return null;
+
+  return (
+    <span className={cn("inline-flex", className)} data-entity-group-id={groupId} data-entity-id={id}>
+      <Checkbox
+        checked={isSelected}
+        disabled={disabled}
+        aria-label="Select work item"
+        onClick={(e) => {
+          e.stopPropagation();
+          selectionHelpers.handleEntityClick(e, id, groupId);
+        }}
+      />
+    </span>
+  );
+});
diff --git a/apps/web/core/components/core/multiple-select/group-select-action.tsx b/apps/web/core/components/core/multiple-select/group-select-action.tsx
new file mode 100644
index 0000000..de8f0d2
--- /dev/null
+++ b/apps/web/core/components/core/multiple-select/group-select-action.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { cn } from "@plane/utils";
+// hooks
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+
+type Props = {
+  className?: string;
+  disabled?: boolean;
+  groupID: string;
+  selectionHelpers: TSelectionHelper;
+};
+
+export function MultipleSelectGroupAction(props: Props) {
+  const { className, disabled = false, groupID, selectionHelpers } = props;
+  // derived values
+  const groupSelectionStatus = selectionHelpers.isGroupSelected(groupID);
+
+  if (selectionHelpers.isSelectionDisabled) return null;
+
+  return (
+    <span className={cn("inline-flex", className)}>
+      <Checkbox
+        checked={groupSelectionStatus === "complete"}
+        indeterminate={groupSelectionStatus === "partial"}
+        disabled={disabled}
+        aria-label="Select all in group"
+        onCheckedChange={() => selectionHelpers.handleGroupClick(groupID)}
+      />
+    </span>
+  );
+}
diff --git a/apps/web/core/components/core/multiple-select/index.ts b/apps/web/core/components/core/multiple-select/index.ts
new file mode 100644
index 0000000..e14cb4c
--- /dev/null
+++ b/apps/web/core/components/core/multiple-select/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./entity-select-action";
+export * from "./group-select-action";
+export * from "./select-group";
diff --git a/apps/web/core/components/core/multiple-select/select-group.tsx b/apps/web/core/components/core/multiple-select/select-group.tsx
new file mode 100644
index 0000000..7881b9e
--- /dev/null
+++ b/apps/web/core/components/core/multiple-select/select-group.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+import { useMultipleSelect } from "@/hooks/use-multiple-select";
+
+type Props = {
+  children: (helpers: TSelectionHelper) => React.ReactNode;
+  containerRef: React.MutableRefObject<HTMLElement | null>;
+  disabled?: boolean;
+  entities: Record<string, string[]>; // { groupID: entityIds[] }
+};
+
+export const MultipleSelectGroup = observer(function MultipleSelectGroup(props: Props) {
+  const { children, containerRef, disabled = false, entities } = props;
+
+  const helpers = useMultipleSelect({
+    containerRef,
+    disabled,
+    entities,
+  });
+
+  return <>{children(helpers)}</>;
+});
diff --git a/apps/web/core/components/core/page-title.tsx b/apps/web/core/components/core/page-title.tsx
new file mode 100644
index 0000000..5f7d51d
--- /dev/null
+++ b/apps/web/core/components/core/page-title.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+
+type PageHeadTitleProps = {
+  title?: string;
+  description?: string;
+};
+
+export function PageHead(props: PageHeadTitleProps) {
+  const { title } = props;
+
+  useEffect(() => {
+    if (title) {
+      document.title = title ?? "Plane | Simple, extensible, open-source project management tool.";
+    }
+  }, [title]);
+
+  return null;
+}
diff --git a/apps/web/core/components/core/render-if-visible-HOC.tsx b/apps/web/core/components/core/render-if-visible-HOC.tsx
new file mode 100644
index 0000000..406b24c
--- /dev/null
+++ b/apps/web/core/components/core/render-if-visible-HOC.tsx
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode, MutableRefObject } from "react";
+import React, { useState, useRef, useEffect } from "react";
+import { cn } from "@plane/utils";
+import { runIdleTask } from "@/lib/idle-task";
+
+type Props = {
+  defaultHeight?: string;
+  verticalOffset?: number;
+  horizontalOffset?: number;
+  root?: MutableRefObject<HTMLElement | null>;
+  children: ReactNode;
+  // @types/react 19 removed the global JSX namespace; it now lives under React.
+  as?: keyof React.JSX.IntrinsicElements;
+  classNames?: string;
+  placeholderChildren?: ReactNode;
+  defaultValue?: boolean;
+  shouldRecordHeights?: boolean;
+  useIdleTime?: boolean;
+  forceRender?: boolean;
+};
+
+function RenderIfVisible(props: Props) {
+  const {
+    defaultHeight = "300px",
+    root,
+    verticalOffset = 50,
+    horizontalOffset = 0,
+    as = "div",
+    children,
+    classNames = "",
+    shouldRecordHeights = true,
+    //placeholder children
+    placeholderChildren = null, //placeholder children
+    defaultValue = false,
+    useIdleTime = false,
+    forceRender = false,
+  } = props;
+  const [shouldVisible, setShouldVisible] = useState<boolean>(defaultValue);
+  const placeholderHeight = useRef<string>(defaultHeight);
+  const intersectionRef = useRef<HTMLElement | null>(null);
+  const visibilityIdleTaskRef = useRef<ReturnType<typeof runIdleTask> | null>(null);
+  const heightIdleTaskRef = useRef<ReturnType<typeof runIdleTask> | null>(null);
+
+  const isVisible = shouldVisible || forceRender;
+
+  // Set visibility with intersection observer
+  useEffect(() => {
+    const target = intersectionRef.current;
+    if (target) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          //DO no remove comments for future
+          if (typeof window !== "undefined" && useIdleTime) {
+            visibilityIdleTaskRef.current?.cancel();
+            visibilityIdleTaskRef.current = runIdleTask(() =>
+              setShouldVisible(entries[entries.length - 1].isIntersecting)
+            );
+          } else {
+            setShouldVisible(entries[entries.length - 1].isIntersecting);
+          }
+        },
+        {
+          root: root?.current,
+          rootMargin: `${verticalOffset}% ${horizontalOffset}% ${verticalOffset}% ${horizontalOffset}%`,
+        }
+      );
+      observer.observe(target);
+      return () => {
+        visibilityIdleTaskRef.current?.cancel();
+        visibilityIdleTaskRef.current = null;
+        observer.unobserve(target);
+      };
+    }
+  }, [intersectionRef, root, verticalOffset, horizontalOffset, useIdleTime]);
+
+  //Set height after render
+  useEffect(() => {
+    if (intersectionRef.current && isVisible && shouldRecordHeights) {
+      heightIdleTaskRef.current?.cancel();
+      heightIdleTaskRef.current = runIdleTask(() => {
+        if (intersectionRef.current) placeholderHeight.current = `${intersectionRef.current.offsetHeight}px`;
+      });
+    }
+    return () => {
+      heightIdleTaskRef.current?.cancel();
+      heightIdleTaskRef.current = null;
+    };
+  }, [isVisible, intersectionRef, shouldRecordHeights]);
+
+  const child = isVisible ? <>{children}</> : placeholderChildren;
+  const style = isVisible || !shouldRecordHeights ? {} : { height: placeholderHeight.current, width: "100%" };
+  const className = isVisible || placeholderChildren ? classNames : cn(classNames, "bg-layer-1");
+
+  return React.createElement(as, { ref: intersectionRef, style, className }, child);
+}
+
+export default RenderIfVisible;
diff --git a/apps/web/core/components/core/sidebar/progress-chart.tsx b/apps/web/core/components/core/sidebar/progress-chart.tsx
new file mode 100644
index 0000000..a5b99a9
--- /dev/null
+++ b/apps/web/core/components/core/sidebar/progress-chart.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// plane imports
+import { AreaChart } from "@plane/propel/charts/area-chart";
+import type { TChartData, TModuleCompletionChartDistribution } from "@plane/types";
+import { renderFormattedDateWithoutYear } from "@plane/utils";
+
+type Props = {
+  distribution: TModuleCompletionChartDistribution;
+  totalIssues: number;
+  className?: string;
+  plotTitle?: string;
+};
+
+function ProgressChart({ distribution, totalIssues, className = "", plotTitle = "work items" }: Props) {
+  const chartData: TChartData<string, string>[] = Object.keys(distribution ?? []).map((key, index) => ({
+    name: renderFormattedDateWithoutYear(key),
+    current: distribution[key] ?? 0,
+    ideal: totalIssues * (1 - index / (Object.keys(distribution ?? []).length - 1)),
+  }));
+
+  return (
+    <div className={`flex w-full items-center justify-center ${className}`}>
+      <AreaChart
+        data={chartData}
+        areas={[
+          {
+            key: "current",
+            label: `Current ${plotTitle}`,
+            strokeColor: "#3F76FF",
+            fill: "#3F76FF33",
+            fillOpacity: 1,
+            showDot: true,
+            smoothCurves: true,
+            strokeOpacity: 1,
+            stackId: "bar-one",
+          },
+          {
+            key: "ideal",
+            label: `Ideal ${plotTitle}`,
+            strokeColor: "#A9BBD0",
+            fill: "#A9BBD0",
+            fillOpacity: 0,
+            showDot: true,
+            smoothCurves: true,
+            strokeOpacity: 1,
+            stackId: "bar-two",
+            style: {
+              strokeDasharray: "6, 3",
+              strokeWidth: 1,
+            },
+          },
+        ]}
+        xAxis={{ key: "name", label: "Date" }}
+        yAxis={{ key: "current", label: "Completion" }}
+        margin={{ bottom: 30 }}
+        className="h-[370px] w-full"
+        legend={{
+          align: "center",
+          verticalAlign: "bottom",
+          layout: "horizontal",
+          wrapperStyles: {
+            marginTop: 20,
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+export default ProgressChart;
diff --git a/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx b/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
new file mode 100644
index 0000000..ce202ee
--- /dev/null
+++ b/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { useTranslation } from "@plane/i18n";
+import { getFileURL } from "@plane/utils";
+// assets
+import emptyMembers from "@/app/assets/empty-state/empty_members.svg?url";
+import userImage from "@/app/assets/user.png?url";
+// components
+import { SingleProgressStats } from "@/components/core/sidebar/single-progress-stats";
+
+export type TAssigneeData = {
+  id: string | undefined;
+  title: string | undefined;
+  avatar_url: string | undefined;
+  completed: number;
+  total: number;
+}[];
+
+type TAssigneeStatComponent = {
+  selectedAssigneeIds: string[];
+  handleAssigneeFiltersUpdate: (assigneeId: string | undefined) => void;
+  distribution: TAssigneeData;
+  isEditable?: boolean;
+};
+
+export const AssigneeStatComponent = observer(function AssigneeStatComponent(props: TAssigneeStatComponent) {
+  const { distribution, isEditable, selectedAssigneeIds, handleAssigneeFiltersUpdate } = props;
+  const { t } = useTranslation();
+  return (
+    <div>
+      {distribution && distribution.length > 0 ? (
+        distribution.map((assignee, index) => {
+          if (assignee?.id)
+            return (
+              <SingleProgressStats
+                key={assignee?.id}
+                title={
+                  <div className="flex items-center gap-2">
+                    <Avatar
+                      alt={assignee?.title ?? undefined}
+                      fallback={assignee?.title?.[0]?.toUpperCase()}
+                      src={getFileURL(assignee?.avatar_url ?? "")}
+                      size="xs"
+                    />
+                    <span>{assignee?.title ?? ""}</span>
+                  </div>
+                }
+                completed={assignee?.completed ?? 0}
+                total={assignee?.total ?? 0}
+                {...(isEditable && {
+                  onClick: () => handleAssigneeFiltersUpdate(assignee.id),
+                  selected: assignee.id ? selectedAssigneeIds.includes(assignee.id) : false,
+                })}
+              />
+            );
+          else
+            return (
+              <SingleProgressStats
+                key={`unassigned-${index}`}
+                title={
+                  <div className="flex items-center gap-2">
+                    <div className="h-4 w-4 rounded-full border-2 border-subtle bg-layer-1">
+                      <img src={userImage} className="h-full w-full rounded-full object-cover" alt="User" />
+                    </div>
+                    <span>{t("no_assignee")}</span>
+                  </div>
+                }
+                completed={assignee?.completed ?? 0}
+                total={assignee?.total ?? 0}
+              />
+            );
+        })
+      ) : (
+        <div className="flex h-full flex-col items-center justify-center gap-2">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-layer-1">
+            <img src={emptyMembers} className="h-12 w-12 object-contain" alt="empty members" />
+          </div>
+          <h6 className="text-14 text-tertiary">{t("no_assignee")}</h6>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/core/sidebar/progress-stats/label.tsx b/apps/web/core/components/core/sidebar/progress-stats/label.tsx
new file mode 100644
index 0000000..c4754b7
--- /dev/null
+++ b/apps/web/core/components/core/sidebar/progress-stats/label.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// assets
+import emptyLabel from "@/app/assets/empty-state/empty_label.svg?url";
+// components
+import { SingleProgressStats } from "@/components/core/sidebar/single-progress-stats";
+
+export type TLabelData = {
+  id: string | undefined;
+  title: string | undefined;
+  color: string | undefined;
+  completed: number;
+  total: number;
+}[];
+
+type TLabelStatComponent = {
+  selectedLabelIds: string[];
+  handleLabelFiltersUpdate: (labelId: string | undefined) => void;
+  distribution: TLabelData;
+  isEditable?: boolean;
+};
+
+export const LabelStatComponent = observer(function LabelStatComponent(props: TLabelStatComponent) {
+  const { distribution, isEditable, selectedLabelIds, handleLabelFiltersUpdate } = props;
+  const { t } = useTranslation();
+  return (
+    <div>
+      {distribution && distribution.length > 0 ? (
+        distribution.map((label, index) => {
+          if (label.id) {
+            return (
+              <SingleProgressStats
+                key={label.id}
+                title={
+                  <div className="flex items-center gap-2 truncate">
+                    <span
+                      className="block h-3 w-3 flex-shrink-0 rounded-full"
+                      style={{
+                        backgroundColor: label.color ?? "transparent",
+                      }}
+                    />
+                    <span className="truncate text-11 text-ellipsis">{label.title ?? t("no_labels_yet")}</span>
+                  </div>
+                }
+                completed={label.completed}
+                total={label.total}
+                {...(isEditable && {
+                  onClick: () => handleLabelFiltersUpdate(label.id),
+                  selected: label.id ? selectedLabelIds.includes(label.id) : false,
+                })}
+              />
+            );
+          } else {
+            return (
+              <SingleProgressStats
+                key={`no-label-${index}`}
+                title={
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="block h-3 w-3 rounded-full"
+                      style={{
+                        backgroundColor: label.color ?? "transparent",
+                      }}
+                    />
+                    <span className="text-11">{label.title ?? t("no_labels_yet")}</span>
+                  </div>
+                }
+                completed={label.completed}
+                total={label.total}
+              />
+            );
+          }
+        })
+      ) : (
+        <div className="flex h-full flex-col items-center justify-center gap-2">
+          <div className="flex h-20 w-20 items-center justify-center rounded-full bg-layer-1">
+            <img src={emptyLabel} className="h-12 w-12 object-contain" alt="empty label" />
+          </div>
+          <h6 className="text-14 text-tertiary">{t("no_labels_yet")}</h6>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/core/sidebar/progress-stats/shared.ts b/apps/web/core/components/core/sidebar/progress-stats/shared.ts
new file mode 100644
index 0000000..93e0c8b
--- /dev/null
+++ b/apps/web/core/components/core/sidebar/progress-stats/shared.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TWorkItemFilterCondition } from "@plane/shared-state";
+import type { TFilterConditionNodeForDisplay, TFilterValue, TWorkItemFilterProperty } from "@plane/types";
+
+export const PROGRESS_STATS = [
+  {
+    key: "stat-states",
+    i18n_title: "common.states",
+  },
+  {
+    key: "stat-assignees",
+    i18n_title: "common.assignees",
+  },
+  {
+    key: "stat-labels",
+    i18n_title: "common.labels",
+  },
+];
+
+type TSelectedFilterProgressStatsType = TFilterConditionNodeForDisplay<TWorkItemFilterProperty, TFilterValue>;
+
+export type TSelectedFilterProgressStats = {
+  assignees: TSelectedFilterProgressStatsType | undefined;
+  labels: TSelectedFilterProgressStatsType | undefined;
+  stateGroups: TSelectedFilterProgressStatsType | undefined;
+};
+
+export const createFilterUpdateHandler =
+  <T extends string>(
+    property: TWorkItemFilterProperty,
+    selectedValues: T[],
+    handleFiltersUpdate: (condition: TWorkItemFilterCondition) => void
+  ) =>
+  (value: T | undefined) => {
+    const updatedValues = value ? [...selectedValues] : [];
+
+    if (value) {
+      if (updatedValues.includes(value)) {
+        updatedValues.splice(updatedValues.indexOf(value), 1);
+      } else {
+        updatedValues.push(value);
+      }
+    }
+
+    handleFiltersUpdate({ property, operator: "in", value: updatedValues });
+  };
diff --git a/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx b/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx
new file mode 100644
index 0000000..bcc4fdb
--- /dev/null
+++ b/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { StateGroupIcon } from "@plane/propel/icons";
+import type { TStateGroups } from "@plane/types";
+// components
+import { SingleProgressStats } from "@/components/core/sidebar/single-progress-stats";
+
+export type TStateGroupData = {
+  state: string | undefined;
+  completed: number;
+  total: number;
+}[];
+
+type TStateGroupStatComponent = {
+  selectedStateGroups: string[];
+  handleStateGroupFiltersUpdate: (stateGroup: string | undefined) => void;
+  distribution: TStateGroupData;
+  totalIssuesCount: number;
+  isEditable?: boolean;
+};
+
+export const StateGroupStatComponent = observer(function StateGroupStatComponent(props: TStateGroupStatComponent) {
+  const { distribution, isEditable, totalIssuesCount, selectedStateGroups, handleStateGroupFiltersUpdate } = props;
+
+  return (
+    <div>
+      {distribution.map((group, index) => (
+        <SingleProgressStats
+          key={index}
+          title={
+            <div className="flex items-center gap-2">
+              <StateGroupIcon stateGroup={group.state as TStateGroups} />
+              <span className="text-11 capitalize">{group.state}</span>
+            </div>
+          }
+          completed={group.completed}
+          total={totalIssuesCount}
+          {...(isEditable && {
+            onClick: () => group.state && handleStateGroupFiltersUpdate(group.state),
+            selected: group.state ? selectedStateGroups.includes(group.state) : false,
+          })}
+        />
+      ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
new file mode 100644
index 0000000..e8e7f94
--- /dev/null
+++ b/apps/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { RightSidePaneOutline } from "@makeplane/propel/icons";
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+
+export const SidebarHamburgerToggle = observer(function SidebarHamburgerToggle() {
+  // store hooks
+  const { toggleSidebar } = useAppTheme();
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleSidebar();
+  };
+
+  return (
+    <button
+      type="button"
+      className="group grid size-7 flex-shrink-0 place-items-center rounded-sm bg-surface-2 transition-all hover:bg-layer-1"
+      onClick={handleClick}
+    >
+      <RightSidePaneOutline className="size-3.5 text-secondary transition-all group-hover:text-primary" />
+    </button>
+  );
+});
diff --git a/apps/web/core/components/core/sidebar/single-progress-stats.tsx b/apps/web/core/components/core/sidebar/single-progress-stats.tsx
new file mode 100644
index 0000000..59c219b
--- /dev/null
+++ b/apps/web/core/components/core/sidebar/single-progress-stats.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+type TSingleProgressStatsProps = {
+  title: any;
+  completed: number;
+  total: number;
+  onClick?: () => void;
+  selected?: boolean;
+};
+
+export function SingleProgressStats({ title, completed, total, onClick, selected = false }: TSingleProgressStatsProps) {
+  return (
+    <div
+      className={`flex w-full items-center justify-between gap-4 rounded-xs p-1 text-11 ${
+        onClick ? "cursor-pointer hover:bg-surface-2" : ""
+      } ${selected ? "bg-layer-1" : ""}`}
+      onClick={onClick}
+    >
+      <div className="w-4/6">{title}</div>
+      <div className="flex w-2/6 items-center justify-end gap-1 px-2">
+        <div className="flex h-5 items-center justify-center gap-1">
+          <span className="w-8 text-right">
+            {isNaN(Math.round((completed / total) * 100)) ? "0" : Math.round((completed / total) * 100)}%
+          </span>
+        </div>
+        <span>of {total}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/core/theme/color-inputs.tsx b/apps/web/core/components/core/theme/color-inputs.tsx
new file mode 100644
index 0000000..bb3f799
--- /dev/null
+++ b/apps/web/core/components/core/theme/color-inputs.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane imports
+import type { IUserTheme } from "@plane/types";
+import { InputColorPicker } from "@plane/ui";
+
+type Props = {
+  control: Control<IUserTheme>;
+};
+
+export const CustomThemeColorInputs = observer(function CustomThemeColorInputs(props: Props) {
+  const { control } = props;
+
+  const handleValueChange = (val: string | undefined, onChange: (...args: unknown[]) => void) => {
+    let hex = val;
+    // prepend a hashtag if it doesn't exist
+    if (val && val[0] !== "#") hex = `#${val}`;
+    onChange(hex);
+  };
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      {/* Neutral Color */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-body-sm-medium">
+          Neutral color<span className="text-danger-primary">*</span>
+        </h3>
+        <div className="w-full">
+          <Controller
+            control={control}
+            name="background"
+            rules={{
+              required: "Neutral color is required",
+              pattern: {
+                value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+                message: "Enter a valid hex code",
+              },
+            }}
+            render={({ field: { value, onChange } }) => (
+              <InputColorPicker
+                name="background"
+                value={value}
+                onChange={(val) => handleValueChange(val, onChange)}
+                placeholder="#1a1a1a"
+                className="w-full placeholder:text-placeholder"
+                style={{
+                  backgroundColor: value,
+                  color: "#ffffff",
+                }}
+                hasError={false}
+              />
+            )}
+          />
+        </div>
+      </div>
+      {/* Brand Color */}
+      <div className="flex flex-col gap-2">
+        <h3 className="text-body-sm-medium">
+          Brand color<span className="text-danger-primary">*</span>
+        </h3>
+        <div className="w-full">
+          <Controller
+            control={control}
+            name="primary"
+            rules={{
+              required: "Brand color is required",
+              pattern: {
+                value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+                message: "Enter a valid hex code",
+              },
+            }}
+            render={({ field: { value, onChange } }) => (
+              <InputColorPicker
+                name="primary"
+                value={value}
+                onChange={(val) => handleValueChange(val, onChange)}
+                placeholder="#3f76ff"
+                className="w-full placeholder:text-placeholder"
+                style={{
+                  backgroundColor: value,
+                  color: "#ffffff",
+                }}
+                hasError={false}
+              />
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/core/theme/custom-theme-selector.tsx b/apps/web/core/components/core/theme/custom-theme-selector.tsx
new file mode 100644
index 0000000..4730777
--- /dev/null
+++ b/apps/web/core/components/core/theme/custom-theme-selector.tsx
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useForm } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUserTheme } from "@plane/types";
+import { applyCustomTheme } from "@plane/utils";
+// components
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+// local imports
+import { CustomThemeColorInputs } from "./color-inputs";
+import { CustomThemeDownloadConfigButton } from "./download-config-button";
+import { CustomThemeImportConfigButton } from "./import-config-button";
+import { CustomThemeModeSelector } from "./theme-mode-selector";
+
+export const CustomThemeSelector = observer(function CustomThemeSelector() {
+  // store hooks
+  const { data: userProfile, updateUserTheme } = useUserProfile();
+  // translation
+  const { t } = useTranslation();
+
+  // Loading state for async palette generation
+  const [isLoadingPalette, setIsLoadingPalette] = useState(false);
+
+  // Load saved theme from userProfile (fallback to defaults)
+  const savedTheme = useMemo((): IUserTheme => {
+    const theme = userProfile?.theme;
+    if (theme && theme.primary && theme.background) {
+      return {
+        theme: "custom",
+        primary: theme.primary,
+        background: theme.background,
+        darkPalette: !!theme.darkPalette,
+      };
+    }
+
+    // Fallback to defaults
+    return {
+      theme: "custom",
+      primary: "#3f76ff",
+      background: "#1a1a1a",
+      darkPalette: false,
+    };
+  }, [userProfile?.theme]);
+
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    getValues,
+    setValue,
+  } = useForm<IUserTheme>({
+    defaultValues: savedTheme,
+  });
+
+  const handleUpdateTheme = async (formData: IUserTheme) => {
+    if (!formData.primary || !formData.background) return;
+
+    try {
+      setIsLoadingPalette(true);
+      applyCustomTheme(formData.primary, formData.background, formData.darkPalette ? "dark" : "light");
+      // Save to profile endpoint
+      await updateUserTheme({
+        theme: "custom",
+        primary: formData.primary,
+        background: formData.background,
+        darkPalette: formData.darkPalette,
+      });
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("success"),
+        message: "Reloading to apply changes...",
+      });
+      // reload the page after showing the toast
+      setTimeout(() => {
+        window.location.reload();
+      }, 1500);
+    } catch (error) {
+      console.error("Failed to apply theme:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("failed_to_update_the_theme"),
+      });
+    } finally {
+      setIsLoadingPalette(false);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={(e) => {
+        void handleSubmit(handleUpdateTheme)(e);
+      }}
+      className="rounded-lg border border-subtle bg-layer-1 px-4 py-3"
+    >
+      <div className="space-y-5">
+        <ProfileSettingsHeading
+          title={t("customize_your_theme")}
+          control={<CustomThemeImportConfigButton handleUpdateTheme={handleUpdateTheme} setValue={setValue} />}
+        />
+        <CustomThemeModeSelector control={control} />
+        {/* Color Inputs */}
+        <CustomThemeColorInputs control={control} />
+      </div>
+      <div className="mt-5 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        {/* Save Theme Button */}
+        <Button variant="primary" size="lg" type="submit" loading={isSubmitting || isLoadingPalette}>
+          {isSubmitting ? t("common.saving") : isLoadingPalette ? "Generating" : t("set_theme")}
+        </Button>
+        {/* Import/Export Section */}
+        <CustomThemeDownloadConfigButton getValues={getValues} />
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/core/theme/download-config-button.tsx b/apps/web/core/components/core/theme/download-config-button.tsx
new file mode 100644
index 0000000..c2ffc0b
--- /dev/null
+++ b/apps/web/core/components/core/theme/download-config-button.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { UseFormGetValues } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { IUserTheme } from "@plane/types";
+
+type Props = {
+  getValues: UseFormGetValues<IUserTheme>;
+};
+
+export const CustomThemeDownloadConfigButton = observer(function CustomThemeDownloadConfigButton(props: Props) {
+  const { getValues } = props;
+  // translation
+  const { t } = useTranslation();
+
+  const handleDownloadConfig = () => {
+    try {
+      const currentValues = getValues();
+      const config = {
+        version: "1.0",
+        themeName: "Custom Theme",
+        primary: currentValues.primary,
+        background: currentValues.background,
+        darkPalette: currentValues.darkPalette,
+      };
+
+      const blob = new Blob([JSON.stringify(config, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `plane-theme-${Date.now()}.json`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("success"),
+        message: "Theme configuration downloaded successfully.",
+      });
+    } catch (error) {
+      console.error("Failed to download config:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: "Failed to download theme configuration.",
+      });
+    }
+  };
+
+  return (
+    <Button variant="secondary" size="lg" type="button" onClick={handleDownloadConfig}>
+      Download config
+    </Button>
+  );
+});
diff --git a/apps/web/core/components/core/theme/import-config-button.tsx b/apps/web/core/components/core/theme/import-config-button.tsx
new file mode 100644
index 0000000..a458616
--- /dev/null
+++ b/apps/web/core/components/core/theme/import-config-button.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import type { UseFormSetValue } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { IUserTheme } from "@plane/types";
+
+type Props = {
+  handleUpdateTheme: (formData: IUserTheme) => Promise<void>;
+  setValue: UseFormSetValue<IUserTheme>;
+};
+
+export const CustomThemeImportConfigButton = observer(function CustomThemeImportConfigButton(props: Props) {
+  const { handleUpdateTheme, setValue } = props;
+  // refs
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  // translation
+  const { t } = useTranslation();
+
+  const handleUploadConfig = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    try {
+      const text = await file.text();
+      const config = JSON.parse(text) as IUserTheme;
+
+      // Validate required fields
+      if (!config.primary || !config.background) {
+        throw new Error("Missing required fields: primary and background");
+      }
+
+      // Validate hex color format
+      const hexPattern = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+      if (!hexPattern.test(config.primary)) {
+        throw new Error("Invalid brand color hex format");
+      }
+      if (!hexPattern.test(config.background)) {
+        throw new Error("Invalid neutral color hex format");
+      }
+
+      // Validate theme mode
+      const themeMode = config.darkPalette ?? false;
+      if (typeof themeMode !== "boolean") {
+        throw new Error("Invalid theme mode. Must be a boolean");
+      }
+
+      // Apply the configuration to form
+      const formData: IUserTheme = {
+        theme: "custom",
+        primary: config.primary,
+        background: config.background,
+        darkPalette: themeMode,
+      };
+
+      // Update form values
+      setValue("primary", formData.primary);
+      setValue("background", formData.background);
+      setValue("darkPalette", formData.darkPalette);
+      setValue("theme", "custom");
+
+      // Apply the theme
+      await handleUpdateTheme(formData);
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("success"),
+        message: "Theme configuration imported successfully",
+      });
+    } catch (error) {
+      console.error("Failed to upload config:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: error instanceof Error ? error.message : "Failed to import theme configuration",
+      });
+    } finally {
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  return (
+    <>
+      <input ref={fileInputRef} type="file" accept=".json" onChange={handleUploadConfig} className="hidden" />
+      <Button variant="secondary" size="lg" type="button" onClick={() => fileInputRef.current?.click()}>
+        Import config
+      </Button>
+    </>
+  );
+});
diff --git a/apps/web/core/components/core/theme/theme-mode-selector.tsx b/apps/web/core/components/core/theme/theme-mode-selector.tsx
new file mode 100644
index 0000000..c9d31cb
--- /dev/null
+++ b/apps/web/core/components/core/theme/theme-mode-selector.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane imports
+import type { IUserTheme } from "@plane/types";
+
+type Props = {
+  control: Control<IUserTheme>;
+};
+
+export const CustomThemeModeSelector = observer(function CustomThemeModeSelector(props: Props) {
+  const { control } = props;
+
+  return (
+    <div>
+      <h6 className="text-h6-medium">
+        Choose color mode<span className="text-danger-primary">*</span>
+      </h6>
+      <Controller
+        control={control}
+        name="darkPalette"
+        render={({ field: { value, onChange } }) => (
+          <div className="mt-2 flex items-center gap-3">
+            <label className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-subtle-1 bg-layer-2 px-3 py-2 text-body-sm-regular transition-colors hover:bg-layer-2-hover">
+              <input
+                type="radio"
+                name="darkPalette"
+                value="false"
+                checked={value === false}
+                onChange={() => onChange(false)}
+                className="cursor-pointer"
+              />
+              Light mode
+            </label>
+            <label className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-subtle-1 bg-layer-2 px-3 py-2 text-body-sm-regular transition-colors hover:bg-layer-2-hover">
+              <input
+                type="radio"
+                name="darkPalette"
+                value="true"
+                checked={value === true}
+                onChange={() => onChange(true)}
+                className="cursor-pointer"
+              />
+              Dark mode
+            </label>
+          </div>
+        )}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/core/theme/theme-switch.tsx b/apps/web/core/components/core/theme/theme-switch.tsx
new file mode 100644
index 0000000..b9de9bc
--- /dev/null
+++ b/apps/web/core/components/core/theme/theme-switch.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { I_THEME_OPTION } from "@plane/constants";
+import { THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// constants
+import { CustomSelect } from "@plane/ui";
+// ui
+
+type Props = {
+  value: I_THEME_OPTION | null;
+  onChange: (value: I_THEME_OPTION) => void;
+};
+
+export function ThemeSwitch(props: Props) {
+  const { value, onChange } = props;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        value ? (
+          <div className="flex items-center gap-2">
+            <div
+              className="relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border-1"
+              style={{
+                borderColor: value.icon.border,
+              }}
+            >
+              <div
+                className="h-full w-1/2 rounded-l-full"
+                style={{
+                  background: value.icon.color1,
+                }}
+              />
+              <div
+                className="h-full w-1/2 rounded-r-full border-l"
+                style={{
+                  borderLeftColor: value.icon.border,
+                  background: value.icon.color2,
+                }}
+              />
+            </div>
+            {t(value.key)}
+          </div>
+        ) : (
+          t("select_your_theme")
+        )
+      }
+      onChange={onChange}
+      buttonClassName="border border-subtle-1"
+      placement="bottom-end"
+      input
+    >
+      {THEME_OPTIONS.map((themeOption) => (
+        <CustomSelect.Option key={themeOption.value} value={themeOption}>
+          <div className="flex items-center gap-2">
+            <div
+              className="relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full border border-1"
+              style={{
+                borderColor: themeOption.icon.border,
+              }}
+            >
+              <div
+                className="h-full w-1/2 rounded-l-full"
+                style={{
+                  background: themeOption.icon.color1,
+                }}
+              />
+              <div
+                className="h-full w-1/2 rounded-r-full border-l"
+                style={{
+                  borderLeftColor: themeOption.icon.border,
+                  background: themeOption.icon.color2,
+                }}
+              />
+            </div>
+            {t(themeOption.key)}
+          </div>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+}
diff --git a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
new file mode 100644
index 0000000..493f4dc
--- /dev/null
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -0,0 +1,377 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, useCallback, useRef, useState } from "react";
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+import { CompletedAtOutline } from "@makeplane/propel/icons";
+// headless ui
+import { Tab } from "@headlessui/react";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { useTranslation } from "@plane/i18n";
+import { PriorityIcon } from "@plane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TWorkItemFilterCondition } from "@plane/shared-state";
+import type { ICycle } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+// ui
+import { Loader } from "@plane/ui";
+import { cn, renderFormattedDate, renderFormattedDateWithoutYear, getFileURL } from "@plane/utils";
+// assets
+import darkAssigneeAsset from "@/app/assets/empty-state/active-cycle/assignee-dark.webp?url";
+import lightAssigneeAsset from "@/app/assets/empty-state/active-cycle/assignee-light.webp?url";
+import darkLabelAsset from "@/app/assets/empty-state/active-cycle/label-dark.webp?url";
+import lightLabelAsset from "@/app/assets/empty-state/active-cycle/label-light.webp?url";
+import darkPriorityAsset from "@/app/assets/empty-state/active-cycle/priority-dark.webp?url";
+import lightPriorityAsset from "@/app/assets/empty-state/active-cycle/priority-light.webp?url";
+import userImage from "@/app/assets/user.png?url";
+// components
+import { SingleProgressStats } from "@/components/core/sidebar/single-progress-stats";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+import useLocalStorage from "@/hooks/use-local-storage";
+// store
+import type { ActiveCycleIssueDetails } from "@/store/issue/cycle";
+
+export type ActiveCycleStatsProps = {
+  workspaceSlug: string;
+  projectId: string;
+  cycle: ICycle | null;
+  cycleId?: string | null;
+  handleFiltersUpdate: (conditions: TWorkItemFilterCondition[]) => void;
+  cycleIssueDetails?: ActiveCycleIssueDetails | { nextPageResults: boolean };
+};
+
+export const ActiveCycleStats = observer(function ActiveCycleStats(props: ActiveCycleStatsProps) {
+  const { workspaceSlug, projectId, cycle, cycleId, handleFiltersUpdate, cycleIssueDetails } = props;
+  // local storage
+  const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");
+  // refs
+  const issuesContainerRef = useRef<HTMLDivElement | null>(null);
+  // states
+  const [issuesLoaderElement, setIssueLoaderElement] = useState<HTMLDivElement | null>(null);
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const priorityResolvedPath = resolvedTheme === "light" ? lightPriorityAsset : darkPriorityAsset;
+  const assigneesResolvedPath = resolvedTheme === "light" ? lightAssigneeAsset : darkAssigneeAsset;
+  const labelsResolvedPath = resolvedTheme === "light" ? lightLabelAsset : darkLabelAsset;
+
+  const currentValue = (tab: string | null) => {
+    switch (tab) {
+      case "Priority-Issues":
+        return 0;
+      case "Assignees":
+        return 1;
+      case "Labels":
+        return 2;
+      default:
+        return 0;
+    }
+  };
+  const {
+    issues: { fetchNextActiveCycleIssues },
+  } = useIssues(EIssuesStoreType.CYCLE);
+  const {
+    issue: { getIssueById },
+    setPeekIssue,
+  } = useIssueDetail();
+  const loadMoreIssues = useCallback(() => {
+    if (!cycleId) return;
+    fetchNextActiveCycleIssues(workspaceSlug, projectId, cycleId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspaceSlug, projectId, cycleId, issuesLoaderElement, cycleIssueDetails?.nextPageResults]);
+
+  useIntersectionObserver(issuesContainerRef, issuesLoaderElement, loadMoreIssues, `0% 0% 100% 0%`);
+
+  const loaders = (
+    <Loader className="space-y-3">
+      <Loader.Item height="30px" />
+      <Loader.Item height="30px" />
+      <Loader.Item height="30px" />
+    </Loader>
+  );
+
+  return cycleId ? (
+    <div className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden rounded-lg border border-subtle bg-surface-1 p-4 lg:col-span-2 xl:col-span-1">
+      <Tab.Group
+        as={Fragment}
+        defaultIndex={currentValue(tab)}
+        onChange={(i) => {
+          switch (i) {
+            case 0:
+              return setTab("Priority-Issues");
+            case 1:
+              return setTab("Assignees");
+            case 2:
+              return setTab("Labels");
+
+            default:
+              return setTab("Priority-Issues");
+          }
+        }}
+      >
+        <Tab.List
+          as="div"
+          className="relative grid rounded-sm border-[0.5px] border-subtle bg-layer-1 p-[1px]"
+          style={{
+            gridTemplateColumns: `repeat(3, 1fr)`,
+          }}
+        >
+          <Tab
+            className={({ selected }) =>
+              cn(
+                "relative z-[1] rounded-[3px] py-1.5 text-11 font-semibold text-placeholder transition duration-500 focus:outline-none",
+                {
+                  "bg-surface-1 text-tertiary": selected,
+                  "hover:text-tertiary": !selected,
+                }
+              )
+            }
+          >
+            {t("project_cycles.active_cycle.priority_issue")}
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              cn(
+                "relative z-[1] rounded-[3px] py-1.5 text-11 font-semibold text-placeholder transition duration-500 focus:outline-none",
+                {
+                  "bg-surface-1 text-tertiary": selected,
+                  "hover:text-tertiary": !selected,
+                }
+              )
+            }
+          >
+            {t("project_cycles.active_cycle.assignees")}
+          </Tab>
+          <Tab
+            className={({ selected }) =>
+              cn(
+                "relative z-[1] rounded-[3px] py-1.5 text-11 font-semibold text-placeholder transition duration-500 focus:outline-none",
+                {
+                  "bg-surface-1 text-tertiary": selected,
+                  "hover:text-tertiary": !selected,
+                }
+              )
+            }
+          >
+            {t("project_cycles.active_cycle.labels")}
+          </Tab>
+        </Tab.List>
+
+        <Tab.Panels as={Fragment}>
+          <Tab.Panel
+            as="div"
+            className="vertical-scrollbar scrollbar-sm flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
+          >
+            <div
+              ref={issuesContainerRef}
+              className="vertical-scrollbar scrollbar-sm flex h-full w-full flex-col gap-1 overflow-y-auto"
+            >
+              {cycleIssueDetails && "issueIds" in cycleIssueDetails ? (
+                cycleIssueDetails.issueCount > 0 ? (
+                  <>
+                    {cycleIssueDetails.issueIds.map((issueId: string) => {
+                      const issue = getIssueById(issueId);
+
+                      if (!issue) return null;
+
+                      return (
+                        <div
+                          key={issue.id}
+                          className="group flex cursor-pointer items-center justify-between gap-2 rounded-md p-1 hover:bg-surface-2"
+                          onClick={() => {
+                            if (issue.id) {
+                              setPeekIssue({
+                                workspaceSlug,
+                                projectId,
+                                issueId: issue.id,
+                                isArchived: !!issue.archived_at,
+                              });
+                              handleFiltersUpdate([
+                                { property: "priority", operator: "in", value: ["urgent", "high"] },
+                              ]);
+                            }
+                          }}
+                        >
+                          <div className="flex w-full min-w-24 flex-grow items-center gap-1.5 truncate">
+                            <IssueIdentifier issueId={issue.id} projectId={projectId} size="xs" variant="secondary" />
+                            <Tooltip label={`Title: ${issue.name}`} layout="stacked" align="start">
+                              <span className="truncate text-13 text-primary">{issue.name}</span>
+                            </Tooltip>
+                          </div>
+                          <PriorityIcon priority={issue.priority} withContainer size={12} />
+                          <div className="flex flex-shrink-0 items-center gap-1.5">
+                            <StateDropdown
+                              value={issue.state_id}
+                              onChange={() => {}}
+                              projectId={projectId?.toString() ?? ""}
+                              disabled
+                              buttonVariant="background-with-text"
+                              buttonContainerClassName="cursor-pointer max-w-24"
+                              showTooltip
+                            />
+                            {issue.target_date && (
+                              <Tooltip label={`Target Date: ${renderFormattedDate(issue.target_date) ?? ""}`}>
+                                <div className="flex h-full cursor-pointer items-center gap-1.5 truncate rounded-sm bg-layer-1 px-2 py-0.5 text-11 group-hover:bg-surface-1">
+                                  <CompletedAtOutline className="h-3 w-3 flex-shrink-0" />
+                                  <span className="truncate text-11">
+                                    {renderFormattedDateWithoutYear(issue.target_date)}
+                                  </span>
+                                </div>
+                              </Tooltip>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    })}
+                    {(cycleIssueDetails.nextPageResults === undefined || cycleIssueDetails.nextPageResults) && (
+                      <div
+                        ref={setIssueLoaderElement}
+                        className={
+                          "relative flex h-11 animate-pulse cursor-pointer items-center gap-3 bg-layer-1 p-3 text-13"
+                        }
+                      />
+                    )}
+                  </>
+                ) : (
+                  <div className="flex h-full w-full items-center justify-center">
+                    <SimpleEmptyState
+                      title={t("active_cycle.empty_state.priority_issue.title")}
+                      assetPath={priorityResolvedPath}
+                    />
+                  </div>
+                )
+              ) : (
+                loaders
+              )}
+            </div>
+          </Tab.Panel>
+
+          <Tab.Panel
+            as="div"
+            className="vertical-scrollbar scrollbar-sm flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
+          >
+            {cycle && !isEmpty(cycle.distribution) ? (
+              cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
+                cycle.distribution?.assignees?.map((assignee, index) => {
+                  if (assignee.assignee_id)
+                    return (
+                      <SingleProgressStats
+                        key={assignee.assignee_id}
+                        title={
+                          <div className="flex items-center gap-2">
+                            <Avatar
+                              alt={assignee?.display_name ?? undefined}
+                              fallback={assignee?.display_name?.[0]?.toUpperCase()}
+                              src={getFileURL(assignee?.avatar_url ?? "")}
+                              size="xs"
+                            />
+
+                            <span>{assignee.display_name}</span>
+                          </div>
+                        }
+                        completed={assignee.completed_issues}
+                        total={assignee.total_issues}
+                        onClick={() => {
+                          if (assignee.assignee_id) {
+                            handleFiltersUpdate([
+                              { property: "assignee_id", operator: "in", value: [assignee.assignee_id] },
+                            ]);
+                          }
+                        }}
+                      />
+                    );
+                  else
+                    return (
+                      <SingleProgressStats
+                        key={`unassigned-${index}`}
+                        title={
+                          <div className="flex items-center gap-2">
+                            <div className="h-5 w-5 rounded-full border-2 border-subtle bg-layer-1">
+                              <img src={userImage} height="100%" width="100%" className="rounded-full" alt="User" />
+                            </div>
+                            <span>{t("no_assignee")}</span>
+                          </div>
+                        }
+                        completed={assignee.completed_issues}
+                        total={assignee.total_issues}
+                      />
+                    );
+                })
+              ) : (
+                <div className="flex h-full w-full items-center justify-center">
+                  <SimpleEmptyState
+                    title={t("active_cycle.empty_state.assignee.title")}
+                    assetPath={assigneesResolvedPath}
+                  />
+                </div>
+              )
+            ) : (
+              loaders
+            )}
+          </Tab.Panel>
+
+          <Tab.Panel
+            as="div"
+            className="vertical-scrollbar scrollbar-sm flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
+          >
+            {cycle && !isEmpty(cycle.distribution) ? (
+              cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
+                cycle.distribution.labels?.map((label, index) => (
+                  <SingleProgressStats
+                    key={label.label_id ?? `no-label-${index}`}
+                    title={
+                      <div className="flex items-center gap-2 truncate">
+                        <span
+                          className="block h-3 w-3 flex-shrink-0 rounded-full"
+                          style={{
+                            backgroundColor: label.color ?? "#000000",
+                          }}
+                        />
+                        <span className="truncate text-11 text-ellipsis">{label.label_name ?? "No labels"}</span>
+                      </div>
+                    }
+                    completed={label.completed_issues}
+                    total={label.total_issues}
+                    onClick={
+                      label.label_id
+                        ? () => {
+                            if (label.label_id) {
+                              handleFiltersUpdate([{ property: "label_id", operator: "in", value: [label.label_id] }]);
+                            }
+                          }
+                        : undefined
+                    }
+                  />
+                ))
+              ) : (
+                <div className="flex h-full w-full items-center justify-center">
+                  <SimpleEmptyState title={t("active_cycle.empty_state.label.title")} assetPath={labelsResolvedPath} />
+                </div>
+              )
+            ) : (
+              loaders
+            )}
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  ) : (
+    <Loader className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden bg-surface-1 lg:col-span-2 xl:col-span-1">
+      <Loader.Item width="100%" height="17rem" />
+    </Loader>
+  );
+});
diff --git a/apps/web/core/components/cycles/active-cycle/productivity.tsx b/apps/web/core/components/cycles/active-cycle/productivity.tsx
new file mode 100644
index 0000000..c3ebdfc
--- /dev/null
+++ b/apps/web/core/components/cycles/active-cycle/productivity.tsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { ICycle, TCycleEstimateType } from "@plane/types";
+import { Loader } from "@plane/ui";
+// assets
+import darkChartAsset from "@/app/assets/empty-state/active-cycle/chart-dark.webp?url";
+import lightChartAsset from "@/app/assets/empty-state/active-cycle/chart-light.webp?url";
+// components
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { EstimateTypeDropdown } from "../dropdowns/estimate-type-dropdown";
+
+export type ActiveCycleProductivityProps = {
+  workspaceSlug: string;
+  projectId: string;
+  cycle: ICycle | null;
+};
+
+export const ActiveCycleProductivity = observer(function ActiveCycleProductivity(props: ActiveCycleProductivityProps) {
+  const { workspaceSlug, projectId, cycle } = props;
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { getEstimateTypeByCycleId, setEstimateType } = useCycle();
+  // derived values
+  const estimateType: TCycleEstimateType = (cycle && getEstimateTypeByCycleId(cycle.id)) || "issues";
+  const resolvedPath = resolvedTheme === "light" ? lightChartAsset : darkChartAsset;
+
+  const onChange = async (value: TCycleEstimateType) => {
+    if (!workspaceSlug || !projectId || !cycle || !cycle.id) return;
+    setEstimateType(cycle.id, value);
+  };
+
+  const chartDistributionData =
+    cycle && estimateType === "points" ? cycle?.estimate_distribution : cycle?.distribution || undefined;
+  const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
+
+  return cycle && completionChartDistributionData ? (
+    <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1 px-3.5 py-4">
+      <div className="relative flex items-center justify-between gap-4">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}>
+          <h3 className="text-14 font-semibold text-tertiary">{t("project_cycles.active_cycle.issue_burndown")}</h3>
+        </Link>
+        <EstimateTypeDropdown value={estimateType} onChange={onChange} cycleId={cycle.id} projectId={projectId} />
+      </div>
+
+      <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}>
+        {cycle.total_issues > 0 ? (
+          <>
+            <div className="h-full w-full px-2">
+              <div className="flex items-center justify-end gap-4 py-1 text-11 text-tertiary">
+                {estimateType === "points" ? (
+                  <span>{`Pending points - ${cycle.backlog_estimate_points + cycle.unstarted_estimate_points + cycle.started_estimate_points}`}</span>
+                ) : (
+                  <span>{`Pending work items - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}</span>
+                )}
+              </div>
+
+              <div className="relative h-full">
+                {completionChartDistributionData && (
+                  <Fragment>
+                    {estimateType === "points" ? (
+                      <ProgressChart
+                        distribution={completionChartDistributionData}
+                        totalIssues={cycle.total_estimate_points || 0}
+                        plotTitle={"points"}
+                      />
+                    ) : (
+                      <ProgressChart
+                        distribution={completionChartDistributionData}
+                        totalIssues={cycle.total_issues || 0}
+                        plotTitle={"work items"}
+                      />
+                    )}
+                  </Fragment>
+                )}
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="flex h-full w-full items-center justify-center">
+              <SimpleEmptyState title={t("active_cycle.empty_state.chart.title")} assetPath={resolvedPath} />
+            </div>
+          </>
+        )}
+      </Link>
+    </div>
+  ) : (
+    <Loader className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
+      <Loader.Item width="100%" height="100%" />
+    </Loader>
+  );
+});
diff --git a/apps/web/core/components/cycles/active-cycle/progress.tsx b/apps/web/core/components/cycles/active-cycle/progress.tsx
new file mode 100644
index 0000000..d5d402c
--- /dev/null
+++ b/apps/web/core/components/cycles/active-cycle/progress.tsx
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+// plane imports
+import { PROGRESS_STATE_GROUPS_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TWorkItemFilterCondition } from "@plane/shared-state";
+import { LinearProgress } from "@makeplane/propel/components/linear-progress";
+import type { ICycle } from "@plane/types";
+import { Loader } from "@plane/ui";
+// assets
+import darkProgressAsset from "@/app/assets/empty-state/active-cycle/progress-dark.webp?url";
+import lightProgressAsset from "@/app/assets/empty-state/active-cycle/progress-light.webp?url";
+// components
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+
+export type ActiveCycleProgressProps = {
+  cycle: ICycle | null;
+  workspaceSlug: string;
+  projectId: string;
+  handleFiltersUpdate: (conditions: TWorkItemFilterCondition[]) => void;
+};
+
+export const ActiveCycleProgress = observer(function ActiveCycleProgress(props: ActiveCycleProgressProps) {
+  const { handleFiltersUpdate, cycle } = props;
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const closedIssues = cycle ? cycle.completed_issues + cycle.cancelled_issues : 0;
+  const closableIssues = cycle ? cycle.total_issues - cycle.cancelled_issues : 0;
+  const progressValue = closableIssues > 0 ? (closedIssues / closableIssues) * 100 : 0;
+  const groupedIssues: any = cycle
+    ? {
+        completed: cycle?.completed_issues,
+        started: cycle?.started_issues,
+        unstarted: cycle?.unstarted_issues,
+        backlog: cycle?.backlog_issues,
+      }
+    : {};
+  const resolvedPath = resolvedTheme === "light" ? lightProgressAsset : darkProgressAsset;
+
+  return cycle && cycle.hasOwnProperty("started_issues") ? (
+    <div className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1 px-3.5 py-4">
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between gap-4">
+          <h3 className="text-14 font-semibold text-tertiary">{t("project_cycles.active_cycle.progress")}</h3>
+          {cycle.total_issues > 0 && (
+            <span className="flex gap-1 rounded-xs px-3 py-1 text-13 font-medium whitespace-nowrap text-placeholder">
+              {`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${
+                cycle.completed_issues + cycle.cancelled_issues > 1 ? "Work items" : "Work item"
+              } closed`}
+            </span>
+          )}
+        </div>
+        {cycle.total_issues > 0 && (
+          <LinearProgress
+            value={progressValue}
+            size="md"
+            variant="brand"
+            showValue={false}
+            aria-label="Cycle progress"
+          />
+        )}
+      </div>
+
+      {cycle.total_issues > 0 ? (
+        <div className="flex flex-col gap-5">
+          {Object.keys(groupedIssues).map((group, index) => (
+            <>
+              {groupedIssues[group] > 0 && (
+                <div key={index}>
+                  <div
+                    className="flex cursor-pointer items-center justify-between gap-2 text-13"
+                    onClick={() => {
+                      handleFiltersUpdate([{ property: "state_group", operator: "in", value: [group] }]);
+                    }}
+                  >
+                    <div className="flex items-center gap-1.5">
+                      <span
+                        className="block h-3 w-3 rounded-full"
+                        style={{
+                          backgroundColor: PROGRESS_STATE_GROUPS_DETAILS[index].color,
+                        }}
+                      />
+                      <span className="w-16 font-medium text-tertiary capitalize">{group}</span>
+                    </div>
+                    <span className="text-tertiary">{`${groupedIssues[group]} ${
+                      groupedIssues[group] > 1 ? "Work items" : "Work item"
+                    }`}</span>
+                  </div>
+                </div>
+              )}
+            </>
+          ))}
+          {cycle.cancelled_issues > 0 && (
+            <span className="flex items-center gap-2 text-13 text-tertiary">
+              <span>
+                {`${cycle.cancelled_issues} cancelled ${
+                  cycle.cancelled_issues > 1 ? "work items are" : "work item is"
+                } excluded from this report.`}{" "}
+              </span>
+            </span>
+          )}
+        </div>
+      ) : (
+        <div className="flex h-full w-full items-center justify-center">
+          <SimpleEmptyState title={t("active_cycle.empty_state.progress.title")} assetPath={resolvedPath} />
+        </div>
+      )}
+    </div>
+  ) : (
+    <Loader className="flex min-h-[17rem] flex-col gap-5 rounded-lg border border-subtle bg-surface-1">
+      <Loader.Item width="100%" height="100%" />
+    </Loader>
+  );
+});
diff --git a/apps/web/core/components/cycles/active-cycle/root.tsx b/apps/web/core/components/cycles/active-cycle/root.tsx
new file mode 100644
index 0000000..ab413b8
--- /dev/null
+++ b/apps/web/core/components/cycles/active-cycle/root.tsx
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+import { Disclosure } from "@headlessui/react";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { ICycle } from "@plane/types";
+import { Row } from "@plane/ui";
+// assets
+import darkActiveCycleAsset from "@/app/assets/empty-state/cycle/active-dark.webp?url";
+import lightActiveCycleAsset from "@/app/assets/empty-state/cycle/active-light.webp?url";
+// components
+import { ActiveCycleStats } from "@/components/cycles/active-cycle/cycle-stats";
+import { ActiveCycleProductivity } from "@/components/cycles/active-cycle/productivity";
+import { ActiveCycleProgress } from "@/components/cycles/active-cycle/progress";
+import useCyclesDetails from "@/components/cycles/active-cycle/use-cycles-details";
+import { CycleListGroupHeader } from "@/components/cycles/list/cycle-list-group-header";
+import { CyclesListItem } from "@/components/cycles/list/cycles-list-item";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import type { ActiveCycleIssueDetails } from "@/store/issue/cycle";
+
+interface IActiveCycleDetails {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId?: string;
+  showHeader?: boolean;
+}
+
+type ActiveCyclesComponentProps = {
+  cycleId: string | null | undefined;
+  activeCycle: ICycle | null;
+  activeCycleResolvedPath: string;
+  workspaceSlug: string;
+  projectId: string;
+  handleFiltersUpdate: (filters: any) => void;
+  cycleIssueDetails?: ActiveCycleIssueDetails | { nextPageResults: boolean };
+};
+
+const ActiveCyclesComponent = observer(function ActiveCyclesComponent({
+  cycleId,
+  activeCycle,
+  activeCycleResolvedPath: _activeCycleResolvedPath,
+  workspaceSlug,
+  projectId,
+  handleFiltersUpdate,
+  cycleIssueDetails,
+}: ActiveCyclesComponentProps) {
+  const { t } = useTranslation();
+
+  if (!cycleId || !activeCycle) {
+    return (
+      <EmptyStateDetailed
+        assetKey="cycle"
+        title={t("project_cycles.empty_state.active.title")}
+        description={t("project_cycles.empty_state.active.description")}
+        rootClassName="py-10 h-auto"
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col border-b border-subtle">
+      <CyclesListItem
+        key={cycleId}
+        cycleId={cycleId}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        className="!border-b-transparent"
+      />
+      <Row className="bg-surface-1 pt-3 pb-6">
+        <div className="grid grid-cols-1 gap-3 bg-surface-1 lg:grid-cols-2 xl:grid-cols-3">
+          <ActiveCycleProgress
+            handleFiltersUpdate={handleFiltersUpdate}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+            cycle={activeCycle}
+          />
+          <ActiveCycleProductivity workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
+          <ActiveCycleStats
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            cycle={activeCycle}
+            cycleId={cycleId}
+            handleFiltersUpdate={handleFiltersUpdate}
+            cycleIssueDetails={cycleIssueDetails}
+          />
+        </div>
+      </Row>
+    </div>
+  );
+});
+
+export const ActiveCycleRoot = observer(function ActiveCycleRoot(props: IActiveCycleDetails) {
+  const { workspaceSlug, projectId, cycleId: propsCycleId, showHeader = true } = props;
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { currentProjectActiveCycleId } = useCycle();
+  // derived values
+  const cycleId = propsCycleId ?? currentProjectActiveCycleId;
+  const activeCycleResolvedPath = resolvedTheme === "light" ? lightActiveCycleAsset : darkActiveCycleAsset;
+  // fetch cycle details
+  const {
+    handleFiltersUpdate,
+    cycle: activeCycle,
+    cycleIssueDetails,
+  } = useCyclesDetails({ workspaceSlug, projectId, cycleId });
+
+  return (
+    <>
+      {showHeader ? (
+        <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
+          {({ open }) => (
+            <>
+              <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
+                <CycleListGroupHeader title={t("project_cycles.active_cycle.label")} type="current" isExpanded={open} />
+              </Disclosure.Button>
+              <Disclosure.Panel>
+                <ActiveCyclesComponent
+                  cycleId={cycleId}
+                  activeCycle={activeCycle}
+                  activeCycleResolvedPath={activeCycleResolvedPath}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  handleFiltersUpdate={handleFiltersUpdate}
+                  cycleIssueDetails={cycleIssueDetails}
+                />
+              </Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
+      ) : (
+        <ActiveCyclesComponent
+          cycleId={cycleId}
+          activeCycle={activeCycle}
+          activeCycleResolvedPath={activeCycleResolvedPath}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          handleFiltersUpdate={handleFiltersUpdate}
+          cycleIssueDetails={cycleIssueDetails}
+        />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/active-cycle/use-cycles-details.ts b/apps/web/core/components/cycles/active-cycle/use-cycles-details.ts
new file mode 100644
index 0000000..d9cd8c0
--- /dev/null
+++ b/apps/web/core/components/cycles/active-cycle/use-cycles-details.ts
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { useRouter } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import type { TWorkItemFilterCondition } from "@plane/shared-state";
+import { EIssuesStoreType } from "@plane/types";
+// constants
+import { CYCLE_ISSUES_WITH_PARAMS } from "@plane/constants";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
+
+interface IActiveCycleDetails {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string | null | undefined;
+}
+
+const useCyclesDetails = (props: IActiveCycleDetails) => {
+  // props
+  const { workspaceSlug, projectId, cycleId } = props;
+  // router
+  const router = useRouter();
+  // store hooks
+  const {
+    issuesFilter: { updateFilterExpression },
+    issues: { getActiveCycleById: getActiveCycleByIdFromIssue, fetchActiveCycleIssues },
+  } = useIssues(EIssuesStoreType.CYCLE);
+  const { updateFilterExpressionFromConditions } = useWorkItemFilters();
+
+  const { fetchActiveCycleProgress, getCycleById, fetchActiveCycleAnalytics } = useCycle();
+  // derived values
+  const cycle = cycleId ? getCycleById(cycleId) : null;
+
+  // fetch cycle details
+  useSWR(
+    workspaceSlug && projectId && cycle?.id ? `PROJECT_ACTIVE_CYCLE_${projectId}_PROGRESS_${cycle.id}` : null,
+    workspaceSlug && projectId && cycle?.id ? () => fetchActiveCycleProgress(workspaceSlug, projectId, cycle.id) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  useSWR(
+    workspaceSlug && projectId && cycle?.id && !cycle?.distribution
+      ? `PROJECT_ACTIVE_CYCLE_${projectId}_DURATION_${cycle.id}`
+      : null,
+    workspaceSlug && projectId && cycle?.id && !cycle?.distribution
+      ? () => fetchActiveCycleAnalytics(workspaceSlug, projectId, cycle.id, "issues")
+      : null
+  );
+  useSWR(
+    workspaceSlug && projectId && cycle?.id && !cycle?.estimate_distribution
+      ? `PROJECT_ACTIVE_CYCLE_${projectId}_ESTIMATE_DURATION_${cycle.id}`
+      : null,
+    workspaceSlug && projectId && cycle?.id && !cycle?.estimate_distribution
+      ? () => fetchActiveCycleAnalytics(workspaceSlug, projectId, cycle.id, "points")
+      : null
+  );
+  useSWR(
+    workspaceSlug && projectId && cycle?.id ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" }) : null,
+    workspaceSlug && projectId && cycle?.id
+      ? () => fetchActiveCycleIssues(workspaceSlug, projectId, 30, cycle?.id)
+      : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const cycleIssueDetails = cycle?.id ? getActiveCycleByIdFromIssue(cycle?.id) : { nextPageResults: false };
+
+  const handleFiltersUpdate = useCallback(
+    async (conditions: TWorkItemFilterCondition[]) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+
+      await updateFilterExpressionFromConditions(
+        EIssuesStoreType.CYCLE,
+        cycleId,
+        conditions,
+        updateFilterExpression.bind(updateFilterExpression, workspaceSlug, projectId, cycleId)
+      );
+
+      router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`);
+    },
+    [workspaceSlug, projectId, cycleId, updateFilterExpressionFromConditions, updateFilterExpression, router]
+  );
+  return {
+    cycle,
+    cycleId,
+    router,
+    handleFiltersUpdate,
+    cycleIssueDetails,
+  };
+};
+export default useCyclesDetails;
diff --git a/apps/web/core/components/cycles/analytics-sidebar/index.ts b/apps/web/core/components/cycles/analytics-sidebar/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/cycles/analytics-sidebar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
new file mode 100644
index 0000000..52eec26
--- /dev/null
+++ b/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+import { Disclosure, Transition } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ChevronDownOutline, ChevronUpOutline } from "@makeplane/propel/icons";
+import type { ICycle, TCyclePlotType, TProgressSnapshot } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { getDate } from "@plane/utils";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+// plane web components
+import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
+// local imports
+import { CycleProgressStats } from "./progress-stats";
+import { SidebarChart } from "./sidebar-chart";
+
+type TCycleAnalyticsProgress = {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+};
+type Options = {
+  value: string;
+  label: string;
+};
+
+export const cycleEstimateOptions: Options[] = [
+  { value: "issues", label: "Work items" },
+  { value: "points", label: "Estimates" },
+];
+export const cycleChartOptions: Options[] = [
+  { value: "burndown", label: "Burn-down" },
+  { value: "burnup", label: "Burn-up" },
+];
+
+export const validateCycleSnapshot = (cycleDetails: ICycle | null): ICycle | null => {
+  if (!cycleDetails || cycleDetails === null) return cycleDetails;
+
+  const updatedCycleDetails: any = { ...cycleDetails };
+  if (!isEmpty(cycleDetails.progress_snapshot)) {
+    Object.keys(cycleDetails.progress_snapshot || {}).forEach((key) => {
+      const currentKey = key as keyof TProgressSnapshot;
+      if (!isEmpty(cycleDetails.progress_snapshot) && !isEmpty(updatedCycleDetails)) {
+        updatedCycleDetails[currentKey as keyof ICycle] = cycleDetails?.progress_snapshot?.[currentKey];
+      }
+    });
+  }
+  return updatedCycleDetails;
+};
+
+export const CycleAnalyticsProgress = observer(function CycleAnalyticsProgress(props: TCycleAnalyticsProgress) {
+  // props
+  const { workspaceSlug, projectId, cycleId } = props;
+  // router
+  const searchParams = useSearchParams();
+  const peekCycle = searchParams.get("peekCycle") || undefined;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { getPlotTypeByCycleId, getEstimateTypeByCycleId, getCycleById } = useCycle();
+  const { getFilter, updateFilterValueFromSidebar } = useWorkItemFilters();
+  // derived values
+  const cycleFilter = getFilter(EIssuesStoreType.CYCLE, cycleId);
+  const selectedAssignees = cycleFilter?.findFirstConditionByPropertyAndOperator("assignee_id", "in");
+  const selectedLabels = cycleFilter?.findFirstConditionByPropertyAndOperator("label_id", "in");
+  const selectedStateGroups = cycleFilter?.findFirstConditionByPropertyAndOperator("state_group", "in");
+  const cycleDetails = validateCycleSnapshot(getCycleById(cycleId));
+  const plotType: TCyclePlotType = getPlotTypeByCycleId(cycleId);
+  const estimateType = getEstimateTypeByCycleId(cycleId);
+  const totalIssues = cycleDetails?.total_issues || 0;
+  const totalEstimatePoints = cycleDetails?.total_estimate_points || 0;
+  const chartDistributionData =
+    estimateType === "points" ? cycleDetails?.estimate_distribution : cycleDetails?.distribution || undefined;
+  const groupedIssues = useMemo(
+    () => ({
+      backlog:
+        estimateType === "points" ? cycleDetails?.backlog_estimate_points || 0 : cycleDetails?.backlog_issues || 0,
+      unstarted:
+        estimateType === "points" ? cycleDetails?.unstarted_estimate_points || 0 : cycleDetails?.unstarted_issues || 0,
+      started:
+        estimateType === "points" ? cycleDetails?.started_estimate_points || 0 : cycleDetails?.started_issues || 0,
+      completed:
+        estimateType === "points" ? cycleDetails?.completed_estimate_points || 0 : cycleDetails?.completed_issues || 0,
+      cancelled:
+        estimateType === "points" ? cycleDetails?.cancelled_estimate_points || 0 : cycleDetails?.cancelled_issues || 0,
+    }),
+    [estimateType, cycleDetails]
+  );
+  const cycleStartDate = getDate(cycleDetails?.start_date);
+  const cycleEndDate = getDate(cycleDetails?.end_date);
+  const isCycleStartDateValid = cycleStartDate && cycleStartDate <= new Date();
+  const isCycleEndDateValid = cycleStartDate && cycleEndDate && cycleEndDate >= cycleStartDate;
+  const isCycleDateValid = isCycleStartDateValid && isCycleEndDateValid;
+
+  if (!cycleDetails) return <></>;
+  return (
+    <div className="space-y-4 border-t border-subtle py-5">
+      <Disclosure defaultOpen>
+        {({ open }) => (
+          <div className="flex flex-col">
+            {/* progress bar header */}
+            {isCycleDateValid ? (
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <Disclosure.Button className="relative flex w-full items-center gap-2">
+                  <div className="text-13 font-medium text-secondary">{t("project_cycles.active_cycle.progress")}</div>
+                </Disclosure.Button>
+                <Disclosure.Button className="ml-auto">
+                  {open ? (
+                    <ChevronUpOutline className="h-3.5 w-3.5" aria-hidden="true" />
+                  ) : (
+                    <ChevronDownOutline className="h-3.5 w-3.5" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+            ) : (
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <div className="text-13 font-medium text-secondary">{t("project_cycles.active_cycle.progress")}</div>
+              </div>
+            )}
+            <Transition as="div" show={open}>
+              <Disclosure.Panel className="flex flex-col divide-y divide-subtle-1">
+                {cycleStartDate && cycleEndDate ? (
+                  <>
+                    {isCycleDateValid && (
+                      <SidebarChart workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
+                    )}
+                    {/* progress detailed view */}
+                    {chartDistributionData && (
+                      <div className="w-full py-4">
+                        <CycleProgressStats
+                          cycleId={cycleId}
+                          distribution={chartDistributionData}
+                          groupedIssues={groupedIssues}
+                          handleFiltersUpdate={updateFilterValueFromSidebar.bind(
+                            updateFilterValueFromSidebar,
+                            EIssuesStoreType.CYCLE,
+                            cycleId
+                          )}
+                          isEditable={Boolean(!peekCycle) && cycleFilter !== undefined}
+                          noBackground={false}
+                          plotType={plotType}
+                          roundedTab={false}
+                          selectedFilters={{
+                            assignees: selectedAssignees,
+                            labels: selectedLabels,
+                            stateGroups: selectedStateGroups,
+                          }}
+                          size="xs"
+                          totalIssuesCount={estimateType === "points" ? totalEstimatePoints || 0 : totalIssues || 0}
+                        />
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <div className="my-2 w-full rounded-md bg-surface-2 px-2 py-2 text-13 text-tertiary">
+                    {t("no_data_yet")}
+                  </div>
+                )}
+              </Disclosure.Panel>
+            </Transition>
+          </div>
+        )}
+      </Disclosure>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx b/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
new file mode 100644
index 0000000..e7ad602
--- /dev/null
+++ b/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
@@ -0,0 +1,181 @@
+import { Fragment } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Tab } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TWorkItemFilterCondition } from "@plane/shared-state";
+import type { TCycleDistribution, TCycleEstimateDistribution, TCyclePlotType } from "@plane/types";
+import { cn, toFilterArray } from "@plane/utils";
+// components
+import type { TAssigneeData } from "@/components/core/sidebar/progress-stats/assignee";
+import { AssigneeStatComponent } from "@/components/core/sidebar/progress-stats/assignee";
+import type { TLabelData } from "@/components/core/sidebar/progress-stats/label";
+import { LabelStatComponent } from "@/components/core/sidebar/progress-stats/label";
+import type { TSelectedFilterProgressStats } from "@/components/core/sidebar/progress-stats/shared";
+import { createFilterUpdateHandler, PROGRESS_STATS } from "@/components/core/sidebar/progress-stats/shared";
+import type { TStateGroupData } from "@/components/core/sidebar/progress-stats/state_group";
+import { StateGroupStatComponent } from "@/components/core/sidebar/progress-stats/state_group";
+// helpers
+// hooks
+import useLocalStorage from "@/hooks/use-local-storage";
+
+type TCycleProgressStats = {
+  cycleId: string;
+  distribution: TCycleDistribution | TCycleEstimateDistribution | undefined;
+  groupedIssues: Record<string, number>;
+  handleFiltersUpdate: (condition: TWorkItemFilterCondition) => void;
+  isEditable?: boolean;
+  noBackground?: boolean;
+  plotType: TCyclePlotType;
+  roundedTab?: boolean;
+  selectedFilters: TSelectedFilterProgressStats;
+  size?: "xs" | "sm";
+  totalIssuesCount: number;
+};
+
+export const CycleProgressStats = observer(function CycleProgressStats(props: TCycleProgressStats) {
+  const {
+    cycleId,
+    distribution,
+    groupedIssues,
+    handleFiltersUpdate,
+    isEditable = false,
+    noBackground = false,
+    plotType,
+    roundedTab = false,
+    selectedFilters,
+    size = "sm",
+    totalIssuesCount,
+  } = props;
+  // plane imports
+  const { t } = useTranslation();
+  // store imports
+  const { storedValue: currentTab, setValue: setCycleTab } = useLocalStorage(
+    `cycle-analytics-tab-${cycleId}`,
+    "stat-assignees"
+  );
+  // derived values
+  const currentTabIndex = (tab: string): number => PROGRESS_STATS.findIndex((stat) => stat.key === tab);
+  const currentDistribution = distribution as TCycleDistribution;
+  const currentEstimateDistribution = distribution as TCycleEstimateDistribution;
+  const selectedAssigneeIds = toFilterArray(selectedFilters?.assignees?.value || []) as string[];
+  const selectedLabelIds = toFilterArray(selectedFilters?.labels?.value || []) as string[];
+  const selectedStateGroups = toFilterArray(selectedFilters?.stateGroups?.value || []) as string[];
+
+  const distributionAssigneeData: TAssigneeData =
+    plotType === "burndown"
+      ? (currentDistribution?.assignees || []).map((assignee) => ({
+          id: assignee?.assignee_id || undefined,
+          title: assignee?.display_name || undefined,
+          avatar_url: assignee?.avatar_url || undefined,
+          completed: assignee.completed_issues,
+          total: assignee.total_issues,
+        }))
+      : (currentEstimateDistribution?.assignees || []).map((assignee) => ({
+          id: assignee?.assignee_id || undefined,
+          title: assignee?.display_name || undefined,
+          avatar_url: assignee?.avatar_url || undefined,
+          completed: assignee.completed_estimates,
+          total: assignee.total_estimates,
+        }));
+
+  const distributionLabelData: TLabelData =
+    plotType === "burndown"
+      ? (currentDistribution?.labels || []).map((label) => ({
+          id: label?.label_id || undefined,
+          title: label?.label_name || undefined,
+          color: label?.color || undefined,
+          completed: label.completed_issues,
+          total: label.total_issues,
+        }))
+      : (currentEstimateDistribution?.labels || []).map((label) => ({
+          id: label?.label_id || undefined,
+          title: label?.label_name || undefined,
+          color: label?.color || undefined,
+          completed: label.completed_estimates,
+          total: label.total_estimates,
+        }));
+
+  const distributionStateData: TStateGroupData = Object.keys(groupedIssues || {}).map((state) => ({
+    state: state,
+    completed: groupedIssues?.[state] || 0,
+    total: totalIssuesCount || 0,
+  }));
+
+  const handleAssigneeFiltersUpdate = createFilterUpdateHandler(
+    "assignee_id",
+    selectedAssigneeIds,
+    handleFiltersUpdate
+  );
+  const handleLabelFiltersUpdate = createFilterUpdateHandler("label_id", selectedLabelIds, handleFiltersUpdate);
+  const handleStateGroupFiltersUpdate = createFilterUpdateHandler(
+    "state_group",
+    selectedStateGroups,
+    handleFiltersUpdate
+  );
+
+  return (
+    <div>
+      <Tab.Group as={Fragment} defaultIndex={currentTabIndex(currentTab ? currentTab : "stat-assignees")}>
+        <Tab.List
+          as="div"
+          className={cn(
+            `flex w-full items-center justify-between gap-2 rounded-md p-1`,
+            roundedTab ? `rounded-3xl` : `rounded-md`,
+            noBackground ? `` : `bg-layer-2`,
+            size === "xs" ? `text-11` : `text-13`
+          )}
+        >
+          {PROGRESS_STATS.map((stat) => (
+            <Tab
+              className={cn(
+                `w-full cursor-pointer p-1 text-primary transition-all outline-none focus:outline-none`,
+                roundedTab ? `rounded-3xl border border-subtle` : `rounded-sm`,
+                stat.key === currentTab
+                  ? "bg-layer-transparent-active text-secondary"
+                  : "text-placeholder hover:text-secondary"
+              )}
+              key={stat.key}
+              onClick={() => setCycleTab(stat.key)}
+            >
+              {t(stat.i18n_title)}
+            </Tab>
+          ))}
+        </Tab.List>
+        <Tab.Panels className="py-3 text-secondary">
+          <Tab.Panel key={"stat-states"}>
+            <StateGroupStatComponent
+              distribution={distributionStateData}
+              handleStateGroupFiltersUpdate={handleStateGroupFiltersUpdate}
+              isEditable={isEditable}
+              selectedStateGroups={selectedStateGroups}
+              totalIssuesCount={totalIssuesCount}
+            />
+          </Tab.Panel>
+          <Tab.Panel key={"stat-assignees"}>
+            <AssigneeStatComponent
+              distribution={distributionAssigneeData}
+              handleAssigneeFiltersUpdate={handleAssigneeFiltersUpdate}
+              isEditable={isEditable}
+              selectedAssigneeIds={selectedAssigneeIds}
+            />
+          </Tab.Panel>
+          <Tab.Panel key={"stat-labels"}>
+            <LabelStatComponent
+              distribution={distributionLabelData}
+              handleLabelFiltersUpdate={handleLabelFiltersUpdate}
+              isEditable={isEditable}
+              selectedLabelIds={selectedLabelIds}
+            />
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/cycles/analytics-sidebar/root.tsx b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
new file mode 100644
index 0000000..7c84e4d
--- /dev/null
+++ b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Loader } from "@plane/ui";
+// local imports
+import useCyclesDetails from "../active-cycle/use-cycles-details";
+import { CycleAnalyticsProgress } from "./issue-progress";
+import { CycleSidebarDetails } from "./sidebar-details";
+import { CycleSidebarHeader } from "./sidebar-header";
+
+type Props = {
+  handleClose: () => void;
+  isArchived?: boolean;
+  cycleId: string;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const CycleDetailsSidebar = observer(function CycleDetailsSidebar(props: Props) {
+  const { handleClose, isArchived, projectId, workspaceSlug, cycleId } = props;
+
+  // store hooks
+  const { cycle: cycleDetails } = useCyclesDetails({
+    workspaceSlug,
+    projectId,
+    cycleId,
+  });
+
+  if (!cycleDetails)
+    return (
+      <Loader className="px-5">
+        <div className="space-y-2">
+          <Loader.Item height="15px" width="50%" />
+          <Loader.Item height="15px" width="30%" />
+        </div>
+        <div className="mt-8 space-y-3">
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+        </div>
+      </Loader>
+    );
+
+  return (
+    <div className="relative pb-2">
+      <div className="flex w-full flex-col gap-5">
+        <CycleSidebarHeader
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          cycleDetails={cycleDetails}
+          isArchived={isArchived}
+          handleClose={handleClose}
+        />
+        <CycleSidebarDetails projectId={projectId} cycleDetails={cycleDetails} />
+      </div>
+
+      {workspaceSlug && projectId && cycleDetails?.id && (
+        <CycleAnalyticsProgress workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleDetails?.id} />
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
new file mode 100644
index 0000000..9467ec6
--- /dev/null
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-chart.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TCycleEstimateType } from "@plane/types";
+import { Loader } from "@plane/ui";
+import { getDate } from "@plane/utils";
+// components
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { validateCycleSnapshot } from "@/components/cycles/analytics-sidebar/issue-progress";
+import { EstimateTypeDropdown } from "@/components/cycles/dropdowns";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+
+type ProgressChartProps = {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+};
+export const SidebarChart = observer(function SidebarChart(props: ProgressChartProps) {
+  const { workspaceSlug, projectId, cycleId } = props;
+
+  // hooks
+  const { getEstimateTypeByCycleId, getCycleById, fetchCycleDetails, fetchArchivedCycleDetails, setEstimateType } =
+    useCycle();
+  const { t } = useTranslation();
+
+  // derived data
+  const cycleDetails = validateCycleSnapshot(getCycleById(cycleId));
+  const cycleStartDate = getDate(cycleDetails?.start_date);
+  const cycleEndDate = getDate(cycleDetails?.end_date);
+  const totalEstimatePoints = cycleDetails?.total_estimate_points || 0;
+  const totalIssues = cycleDetails?.total_issues || 0;
+  const estimateType = getEstimateTypeByCycleId(cycleId);
+
+  const chartDistributionData =
+    estimateType === "points" ? cycleDetails?.estimate_distribution : cycleDetails?.distribution || undefined;
+
+  const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
+
+  if (!workspaceSlug || !projectId || !cycleId) return null;
+
+  const isArchived = !!cycleDetails?.archived_at;
+
+  // handlers
+  const onChange = async (value: TCycleEstimateType) => {
+    setEstimateType(cycleId, value);
+    if (!workspaceSlug || !projectId || !cycleId) return;
+    try {
+      if (isArchived) {
+        await fetchArchivedCycleDetails(workspaceSlug, projectId, cycleId);
+      } else {
+        await fetchCycleDetails(workspaceSlug, projectId, cycleId);
+      }
+    } catch (err) {
+      console.error(err);
+      setEstimateType(cycleId, estimateType);
+    }
+  };
+  return (
+    <div>
+      <div className="relative flex items-center justify-between gap-2 pt-4">
+        <EstimateTypeDropdown value={estimateType} onChange={onChange} cycleId={cycleId} projectId={projectId} />
+      </div>
+      <div className="py-4">
+        <div>
+          {cycleStartDate && cycleEndDate && completionChartDistributionData ? (
+            <Fragment>
+              <ProgressChart
+                distribution={completionChartDistributionData}
+                totalIssues={estimateType === "points" ? totalEstimatePoints : totalIssues}
+                plotTitle={estimateType === "points" ? t("points") : t("work_items")}
+              />
+            </Fragment>
+          ) : (
+            <Loader className="mt-4 h-[160px] w-full">
+              <Loader.Item width="100%" height="100%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
new file mode 100644
index 0000000..20e50ee
--- /dev/null
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+import { MembersOutline, UserAltOutline, WorkItemsOutline } from "@makeplane/propel/icons";
+// plane types
+import { EEstimateSystem } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { TextArea } from "@makeplane/propel/components/text-area";
+import type { ICycle } from "@plane/types";
+// helpers
+import { getFileURL } from "@plane/utils";
+// hooks
+import { AvatarGroupOverflow } from "@/components/common/avatar-group-overflow";
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useMember } from "@/hooks/store/use-member";
+// plane web constants
+
+type Props = {
+  projectId: string;
+  cycleDetails: ICycle;
+};
+
+export const CycleSidebarDetails = observer(function CycleSidebarDetails(props: Props) {
+  const { projectId, cycleDetails } = props;
+  // hooks
+  const { getUserDetails } = useMember();
+  const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
+  const { t } = useTranslation();
+
+  const areEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId.toString());
+  const cycleStatus = cycleDetails?.status?.toLocaleLowerCase();
+  const isCompleted = cycleStatus === "completed";
+
+  const issueCount =
+    isCompleted && !isEmpty(cycleDetails?.progress_snapshot)
+      ? cycleDetails?.progress_snapshot?.total_issues === 0
+        ? `0 ${t("common.work_item")}`
+        : `${cycleDetails?.progress_snapshot?.completed_issues}/${cycleDetails?.progress_snapshot?.total_issues}`
+      : cycleDetails?.total_issues === 0
+        ? `0 ${t("common.work_item")}`
+        : `${cycleDetails?.completed_issues}/${cycleDetails?.total_issues}`;
+  const estimateType = areEstimateEnabled && currentActiveEstimateId && estimateById(currentActiveEstimateId);
+  const cycleOwnerDetails = cycleDetails ? getUserDetails(cycleDetails.owned_by_id) : undefined;
+
+  const isEstimatePointValid = isEmpty(cycleDetails?.progress_snapshot || {})
+    ? estimateType && estimateType?.type == EEstimateSystem.POINTS
+      ? true
+      : false
+    : isEmpty(cycleDetails?.progress_snapshot?.estimate_distribution || {})
+      ? false
+      : true;
+
+  const issueEstimatePointCount =
+    isCompleted && !isEmpty(cycleDetails?.progress_snapshot)
+      ? cycleDetails?.progress_snapshot.total_issues === 0
+        ? `0 ${t("common.work_item")}`
+        : `${cycleDetails?.progress_snapshot.completed_estimate_points}/${cycleDetails?.progress_snapshot.total_estimate_points}`
+      : cycleDetails?.total_issues === 0
+        ? `0 ${t("common.work_item")}`
+        : `${cycleDetails?.completed_estimate_points}/${cycleDetails?.total_estimate_points}`;
+  return (
+    <div className="flex w-full flex-col gap-5">
+      {cycleDetails?.description && (
+        <TextArea size="lg" surface="inline" autoResize value={cycleDetails.description} disabled />
+      )}
+
+      <div className="flex flex-col gap-5 pt-2.5 pb-6">
+        <div className="flex items-center justify-start gap-1">
+          <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
+            <UserAltOutline className="h-4 w-4" />
+            <span className="text-14">{t("lead")}</span>
+          </div>
+          <div className="flex w-3/5 items-center rounded-xs">
+            <div className="flex items-center gap-2.5">
+              <Avatar
+                alt={cycleOwnerDetails?.display_name}
+                fallback={cycleOwnerDetails?.display_name?.[0]?.toUpperCase()}
+                src={getFileURL(cycleOwnerDetails?.avatar_url ?? "")}
+                size="xs"
+              />
+              <span className="text-13 text-secondary">{cycleOwnerDetails?.display_name}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-start gap-1">
+          <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
+            <MembersOutline className="h-4 w-4" />
+            <span className="text-14">{t("members")}</span>
+          </div>
+          <div className="flex w-3/5 items-center rounded-xs">
+            <div className="flex items-center gap-2.5">
+              {cycleDetails?.assignee_ids && cycleDetails.assignee_ids.length > 0 ? (
+                <>
+                  <AvatarGroupOverflow size="xs">
+                    {cycleDetails.assignee_ids.map((member) => {
+                      const memberDetails = getUserDetails(member);
+                      return (
+                        <Avatar
+                          key={memberDetails?.id}
+                          alt={memberDetails?.display_name ?? ""}
+                          fallback={memberDetails?.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(memberDetails?.avatar_url ?? "")}
+                        />
+                      );
+                    })}
+                  </AvatarGroupOverflow>
+                </>
+              ) : (
+                <span className="px-1.5 text-13 text-tertiary">{t("no_assignee")}</span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-start gap-1">
+          <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
+            <WorkItemsOutline className="h-4 w-4" />
+            <span className="text-14">{t("work_items")}</span>
+          </div>
+          <div className="flex w-3/5 items-center">
+            <span className="px-1.5 text-13 text-tertiary">{issueCount}</span>
+          </div>
+        </div>
+
+        {/**
+         * NOTE: Render this section when estimate points of he projects is enabled and the estimate system is points
+         */}
+        {isEstimatePointValid && !isCompleted && (
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
+              <WorkItemsOutline className="h-4 w-4" />
+              <span className="text-14">{t("points")}</span>
+            </div>
+            <div className="flex w-3/5 items-center">
+              <span className="px-1.5 text-13 text-tertiary">{issueEstimatePointCount}</span>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
new file mode 100644
index 0000000..634cd11
--- /dev/null
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
@@ -0,0 +1,199 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// Plane Imports
+import { CYCLE_STATUS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ICycle } from "@plane/types";
+import { getDate, renderFormattedPayloadDate } from "@plane/utils";
+// components
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useTimeZoneConverter } from "@/hooks/use-timezone-converter";
+// services
+import { CycleService } from "@/services/cycle.service";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  cycleDetails: ICycle;
+  handleClose: () => void;
+  isArchived?: boolean;
+};
+
+const defaultValues: Partial<ICycle> = {
+  start_date: null,
+  end_date: null,
+};
+
+const cycleService = new CycleService();
+
+export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Props) {
+  const { workspaceSlug, projectId, cycleDetails, handleClose, isArchived = false } = props;
+  // hooks
+  const { allowPermissions } = useUserPermissions();
+  const { updateCycleDetails } = useCycle();
+  const { t } = useTranslation();
+  const { renderFormattedDateInUserTimezone, getProjectUTCOffset } = useTimeZoneConverter(projectId);
+
+  // derived values
+  const projectUTCOffset = getProjectUTCOffset();
+
+  // form info
+  const { control, reset } = useForm({
+    defaultValues,
+  });
+
+  const cycleStatus = cycleDetails?.status?.toLocaleLowerCase();
+  const isCompleted = cycleStatus === "completed";
+
+  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
+
+  const submitChanges = async (data: Partial<ICycle>) => {
+    if (!workspaceSlug || !projectId || !cycleDetails.id) return;
+    await updateCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleDetails.id.toString(), data);
+  };
+
+  useEffect(() => {
+    if (cycleDetails)
+      reset({
+        ...cycleDetails,
+      });
+  }, [cycleDetails, reset]);
+
+  const dateChecker = async (payload: any) => {
+    try {
+      const res = await cycleService.cycleDateCheck(workspaceSlug, projectId, payload);
+      return res.status;
+    } catch (_err) {
+      return false;
+    }
+  };
+
+  const handleDateChange = async (startDate: Date | undefined, endDate: Date | undefined) => {
+    let isDateValid = false;
+
+    const payload = {
+      start_date: renderFormattedPayloadDate(startDate) || null,
+      end_date: renderFormattedPayloadDate(endDate) || null,
+    };
+
+    if (payload?.start_date && payload.end_date) {
+      isDateValid = await dateChecker({
+        ...payload,
+        cycle_id: cycleDetails.id,
+      });
+    } else {
+      isDateValid = true;
+    }
+    if (isDateValid) {
+      submitChanges(payload);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("project_cycles.action.update.success.title"),
+        message: t("project_cycles.action.update.success.description"),
+      });
+    } else {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("project_cycles.action.update.failed.title"),
+        message: t("project_cycles.action.update.error.already_exists"),
+      });
+    }
+    return isDateValid;
+  };
+
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <>
+      <div className="sticky top-0 z-10 flex items-center justify-between bg-surface-1 pt-2">
+        <div className="flex size-5 items-center justify-center">
+          <button
+            className="flex size-6 flex-shrink-0 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover"
+            onClick={() => handleClose()}
+          >
+            <ChevronRightOutline className="size-4 text-secondary" />
+          </button>
+        </div>
+      </div>
+      <div className="flex w-full flex-col gap-2">
+        <div className="flex items-start justify-between gap-3 pt-2">
+          <h4 className="w-full text-18 font-semibold break-words text-primary">{cycleDetails.name}</h4>
+          {currentCycle && (
+            <span
+              className="flex h-6 min-w-20 items-center justify-center truncate rounded-sm px-3 text-center text-11 font-medium whitespace-nowrap"
+              style={{
+                color: currentCycle.color,
+                backgroundColor: `${currentCycle.color}20`,
+              }}
+            >
+              {t(currentCycle.i18n_title)}
+            </span>
+          )}
+        </div>
+
+        <Controller
+          control={control}
+          name="start_date"
+          render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
+            <div className="flex items-center gap-2">
+              <Controller
+                control={control}
+                name="end_date"
+                render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => (
+                  <DateRangeDropdown
+                    className="h-7"
+                    buttonVariant="border-with-text"
+                    minDate={new Date()}
+                    value={{
+                      from: getDate(startDateValue),
+                      to: getDate(endDateValue),
+                    }}
+                    onSelect={async (val) => {
+                      const isDateValid = await handleDateChange(val?.from, val?.to);
+                      if (isDateValid) {
+                        onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
+                        onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
+                      }
+                    }}
+                    placeholder={{
+                      from: t("project_cycles.start_date"),
+                      to: t("project_cycles.end_date"),
+                    }}
+                    customTooltipHeading={t("project_cycles.in_your_timezone")}
+                    customTooltipContent={`${renderFormattedDateInUserTimezone(
+                      cycleDetails.start_date ?? ""
+                    )} → ${renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")}`}
+                    mergeDates
+                    showTooltip={!!cycleDetails.start_date && !!cycleDetails.end_date} // show tooltip only if both start and end date are present
+                    required={cycleDetails.status !== "draft"}
+                    disabled={!isEditingAllowed || isArchived || isCompleted}
+                  />
+                )}
+              />
+              {projectUTCOffset && (
+                <span className="cursor-default rounded-md bg-layer-1 px-2 py-1 text-11 text-tertiary">
+                  {projectUTCOffset}
+                </span>
+              )}
+            </div>
+          )}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/applied-filters/date.tsx b/apps/web/core/components/cycles/applied-filters/date.tsx
new file mode 100644
index 0000000..4ffc76a
--- /dev/null
+++ b/apps/web/core/components/cycles/applied-filters/date.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// helpers
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
+// constants
+
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
+  const { editable, handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_AFTER_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-3 px-1.5 py-1 text-11">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          {editable && (
+            <button
+              type="button"
+              className="grid place-items-center text-tertiary hover:text-secondary"
+              onClick={() => handleRemove(date)}
+            >
+              <CloseOutline height={10} width={10} />
+            </button>
+          )}
+        </div>
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/applied-filters/index.ts b/apps/web/core/components/cycles/applied-filters/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/cycles/applied-filters/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/cycles/applied-filters/root.tsx b/apps/web/core/components/cycles/applied-filters/root.tsx
new file mode 100644
index 0000000..4ec777c
--- /dev/null
+++ b/apps/web/core/components/cycles/applied-filters/root.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { PillButton } from "@makeplane/propel/components/pill";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TCycleFilters } from "@plane/types";
+import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { AppliedDateFilters } from "./date";
+import { AppliedStatusFilters } from "./status";
+
+type Props = {
+  appliedFilters: TCycleFilters;
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof TCycleFilters, value: string | null) => void;
+  alwaysAllowEditing?: boolean;
+};
+
+const DATE_FILTERS = ["start_date", "end_date"];
+
+export const CycleAppliedFiltersList = observer(function CycleAppliedFiltersList(props: Props) {
+  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+
+  if (!appliedFilters) return null;
+
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  const isEditingAllowed =
+    alwaysAllowEditing ||
+    allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT);
+
+  return (
+    <div className="flex flex-wrap items-stretch gap-2 bg-surface-1">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof TCycleFilters;
+
+        if (!value) return;
+        if (Array.isArray(value) && value.length === 0) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary"
+          >
+            <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            <div className="flex flex-wrap items-center gap-1">
+              {filterKey === "status" && (
+                <AppliedStatusFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter("status", val)}
+                  values={value}
+                />
+              )}
+              {DATE_FILTERS.includes(filterKey) && (
+                <AppliedDateFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={value}
+                />
+              )}
+              {isEditingAllowed && (
+                <button
+                  type="button"
+                  className="grid place-items-center text-tertiary hover:text-secondary"
+                  onClick={() => handleRemoveFilter(filterKey, null)}
+                >
+                  <CloseOutline height={12} width={12} />
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+      {isEditingAllowed && (
+        <PillButton
+          type="button"
+          size="md"
+          variant="outline"
+          label={t("common.clear_all")}
+          endIcon={<CloseOutline height={12} width={12} />}
+          onClick={handleClearAllFilters}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/cycles/applied-filters/status.tsx b/apps/web/core/components/cycles/applied-filters/status.tsx
new file mode 100644
index 0000000..6668e7a
--- /dev/null
+++ b/apps/web/core/components/cycles/applied-filters/status.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { CYCLE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedStatusFilters = observer(function AppliedStatusFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {values.map((status) => {
+        const statusDetails = CYCLE_STATUS.find((s) => s.value === status);
+        return (
+          <div
+            key={status}
+            className={cn(
+              "flex items-center gap-1 rounded-sm px-1.5 py-1 text-11",
+              statusDetails?.bgColor,
+              statusDetails?.textColor
+            )}
+          >
+            {statusDetails && t(statusDetails?.i18n_title)}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(status)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/archived-cycles/header.tsx b/apps/web/core/components/cycles/archived-cycles/header.tsx
new file mode 100644
index 0000000..1bb057d
--- /dev/null
+++ b/apps/web/core/components/cycles/archived-cycles/header.tsx
@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { CloseOutline, FilterOutline, SearchOutline } from "@makeplane/propel/icons";
+import { useOutsideClickDetector } from "@plane/hooks";
+// plane helpers
+// types
+import type { TCycleFilters } from "@plane/types";
+import { cn, calculateTotalFilters } from "@plane/utils";
+// components
+import { ArchiveTabsList } from "@/components/archives";
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
+// local imports
+import { CycleFiltersSelection } from "../dropdowns";
+
+export const ArchivedCyclesHeader = observer(function ArchivedCyclesHeader() {
+  // router
+  const { projectId } = useParams();
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // hooks
+  const { currentProjectArchivedFilters, archivedCyclesSearchQuery, updateFilters, updateArchivedCyclesSearchQuery } =
+    useCycleFilter();
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(archivedCyclesSearchQuery !== "" ? true : false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && archivedCyclesSearchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleFilters = useCallback(
+    (key: keyof TCycleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (archivedCyclesSearchQuery && archivedCyclesSearchQuery.trim() !== "") updateArchivedCyclesSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  const isFiltersApplied = calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0;
+
+  return (
+    <div className="group relative flex border-b border-subtle">
+      <div className="horizontal-scrollbar scrollbar-sm flex w-full items-center gap-2 overflow-x-auto px-4">
+        <ArchiveTabsList />
+      </div>
+      {/* filter options */}
+      <div className="flex h-full items-center gap-3 self-end px-8">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-5 grid place-items-center rounded-sm p-2 text-placeholder hover:bg-layer-1"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+          >
+            <SearchOutline className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div
+          className={cn(
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
+            {
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <SearchOutline className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
+            placeholder="Search"
+            value={archivedCyclesSearchQuery}
+            onChange={(e) => updateArchivedCyclesSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateArchivedCyclesSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <CloseOutline className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+        <FiltersDropdown
+          icon={<FilterOutline className="h-3 w-3" />}
+          title="Filters"
+          placement="bottom-end"
+          isFiltersApplied={isFiltersApplied}
+        >
+          <CycleFiltersSelection
+            filters={currentProjectArchivedFilters ?? {}}
+            handleFiltersUpdate={handleFilters}
+            isArchived
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/cycles/archived-cycles/index.ts b/apps/web/core/components/cycles/archived-cycles/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/cycles/archived-cycles/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/cycles/archived-cycles/modal.tsx b/apps/web/core/components/cycles/archived-cycles/modal.tsx
new file mode 100644
index 0000000..e29c05f
--- /dev/null
+++ b/apps/web/core/components/cycles/archived-cycles/modal.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSubmit?: () => Promise<void>;
+};
+
+export function ArchiveCycleModal(props: Props) {
+  const { workspaceSlug, projectId, cycleId, isOpen, handleClose } = props;
+  // router
+  const router = useAppRouter();
+  // states
+  const [isArchiving, setIsArchiving] = useState(false);
+  // store hooks
+  const { getCycleNameById, archiveCycle } = useCycle();
+
+  const cycleName = getCycleNameById(cycleId);
+
+  const onClose = () => {
+    setIsArchiving(false);
+    handleClose();
+  };
+
+  const handleArchiveCycle = async () => {
+    setIsArchiving(true);
+    await archiveCycle(workspaceSlug, projectId, cycleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Archive success",
+          message: "Your archives can be found in project archives.",
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/${projectId}/cycles`);
+        return;
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Cycle could not be archived. Please try again.",
+        });
+      })
+      .finally(() => setIsArchiving(false));
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.LG}>
+      <div className="px-5 py-4">
+        <h3 className="text-18 font-medium 2xl:text-20">Archive cycle {cycleName}</h3>
+        <p className="mt-3 text-13 text-secondary">
+          Are you sure you want to archive the cycle? All your archives can be restored later.
+        </p>
+        <div className="mt-3 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveCycle} loading={isArchiving}>
+            {isArchiving ? "Archiving" : "Archive"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/cycles/archived-cycles/root.tsx b/apps/web/core/components/cycles/archived-cycles/root.tsx
new file mode 100644
index 0000000..fdb0ad0
--- /dev/null
+++ b/apps/web/core/components/cycles/archived-cycles/root.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import type { TCycleFilters } from "@plane/types";
+import { calculateTotalFilters } from "@plane/utils";
+// components
+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";
+// local imports
+import { CycleAppliedFiltersList } from "../applied-filters";
+import { ArchivedCyclesView } from "./view";
+
+export const ArchivedCycleLayoutRoot = observer(function ArchivedCycleLayoutRoot() {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { fetchArchivedCycles, currentProjectArchivedCycleIds, loader } = useCycle();
+  // cycle filters hook
+  const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useCycleFilter();
+  // derived values
+  const totalArchivedCycles = currentProjectArchivedCycleIds?.length ?? 0;
+
+  useSWR(
+    workspaceSlug && projectId ? `ARCHIVED_CYCLES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await fetchArchivedCycles(workspaceSlug.toString(), projectId.toString());
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const handleRemoveFilter = (key: keyof TCycleFilters, value: string | null) => {
+    if (!projectId) return;
+    let newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+    if (!value) newValues = [];
+    else newValues = newValues.filter((val) => val !== value);
+
+    updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+  };
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  if (loader || !currentProjectArchivedCycleIds) {
+    return <CycleModuleListLayoutLoader />;
+  }
+
+  return (
+    <>
+      {calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0 && (
+        <div className="border-b border-subtle px-5 py-3">
+          <CycleAppliedFiltersList
+            appliedFilters={currentProjectArchivedFilters ?? {}}
+            handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
+            handleRemoveFilter={handleRemoveFilter}
+          />
+        </div>
+      )}
+      {totalArchivedCycles === 0 ? (
+        <div className="h-full place-items-center">
+          <EmptyStateDetailed
+            assetKey="archived-cycle"
+            title={t("workspace_empty_state.archive_cycles.title")}
+            description={t("workspace_empty_state.archive_cycles.description")}
+          />
+        </div>
+      ) : (
+        <div className="relative h-full w-full overflow-auto">
+          <ArchivedCyclesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/archived-cycles/view.tsx b/apps/web/core/components/cycles/archived-cycles/view.tsx
new file mode 100644
index 0000000..2153fb0
--- /dev/null
+++ b/apps/web/core/components/cycles/archived-cycles/view.tsx
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// assets
+import AllFiltersImage from "@/app/assets/empty-state/cycle/all-filters.svg?url";
+import NameFilterImage from "@/app/assets/empty-state/cycle/name-filter.svg?url";
+// components
+import { CyclesList } from "@/components/cycles/list";
+// ui
+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";
+
+export interface IArchivedCyclesView {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ArchivedCyclesView = observer(function ArchivedCyclesView(props: IArchivedCyclesView) {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { getFilteredArchivedCycleIds, loader } = useCycle();
+  const { archivedCyclesSearchQuery } = useCycleFilter();
+  // derived values
+  const filteredArchivedCycleIds = getFilteredArchivedCycleIds(projectId);
+
+  if (loader || !filteredArchivedCycleIds) return <CycleModuleListLayoutLoader />;
+
+  if (filteredArchivedCycleIds.length === 0)
+    return (
+      <div className="grid h-full w-full place-items-center">
+        <div className="text-center">
+          <img
+            src={archivedCyclesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
+            alt="No matching cycles"
+          />
+          <h5 className="mt-7 mb-1 text-18 font-medium">No matching cycles</h5>
+          <p className="text-14 text-placeholder">
+            {archivedCyclesSearchQuery.trim() === ""
+              ? "Remove the filters to see all cycles"
+              : "Remove the search criteria to see all cycles"}
+          </p>
+        </div>
+      </div>
+    );
+
+  return (
+    <CyclesList
+      completedCycleIds={[]}
+      cycleIds={filteredArchivedCycleIds}
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+      isArchived
+    />
+  );
+});
diff --git a/apps/web/core/components/cycles/cycle-peek-overview.tsx b/apps/web/core/components/cycles/cycle-peek-overview.tsx
new file mode 100644
index 0000000..1b984de
--- /dev/null
+++ b/apps/web/core/components/cycles/cycle-peek-overview.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { usePathname, useSearchParams } from "next/navigation";
+// hooks
+import { generateQueryParams } from "@plane/utils";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useAppRouter } from "@/hooks/use-app-router";
+// components
+import { CycleDetailsSidebar } from "./analytics-sidebar";
+
+type Props = {
+  projectId?: string;
+  workspaceSlug: string;
+  isArchived?: boolean;
+};
+
+export const CyclePeekOverview = observer(function CyclePeekOverview(props: Props) {
+  const { projectId: propsProjectId, workspaceSlug, isArchived } = props;
+  // router
+  const router = useAppRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const peekCycle = searchParams.get("peekCycle");
+  // refs
+  const ref = React.useRef(null);
+  // store hooks
+  const { getCycleById, fetchCycleDetails, fetchArchivedCycleDetails } = useCycle();
+  // derived values
+  const cycleDetails = peekCycle ? getCycleById(peekCycle.toString()) : undefined;
+  const projectId = propsProjectId || cycleDetails?.project_id;
+
+  const handleClose = () => {
+    const query = generateQueryParams(searchParams, ["peekCycle"]);
+    router.push(`${pathname}?${query}`);
+  };
+
+  useEffect(() => {
+    if (!peekCycle || !projectId) return;
+    if (isArchived) fetchArchivedCycleDetails(workspaceSlug, projectId, peekCycle.toString());
+    else fetchCycleDetails(workspaceSlug, projectId, peekCycle.toString());
+  }, [fetchArchivedCycleDetails, fetchCycleDetails, isArchived, peekCycle, projectId, workspaceSlug]);
+
+  return (
+    <>
+      {peekCycle && projectId && (
+        <div
+          ref={ref}
+          className="fixed right-0 z-[9] flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-4 duration-300 md:relative"
+          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={handleClose}
+            isArchived={isArchived}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+            cycleId={peekCycle}
+          />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/cycles-view-header.tsx b/apps/web/core/components/cycles/cycles-view-header.tsx
new file mode 100644
index 0000000..a242c1a
--- /dev/null
+++ b/apps/web/core/components/cycles/cycles-view-header.tsx
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, FilterOutline, SearchOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+import { IconButton } from "@plane/propel/icon-button";
+import { useTranslation } from "@plane/i18n";
+import type { TCycleFilters } from "@plane/types";
+import { cn, calculateTotalFilters } from "@plane/utils";
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
+// local imports
+import { CycleFiltersSelection } from "./dropdowns";
+
+type Props = {
+  projectId: string;
+};
+
+export const CyclesViewHeader = observer(function CyclesViewHeader(props: Props) {
+  const { projectId } = props;
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // hooks
+  const { currentProjectFilters, searchQuery, updateFilters, updateSearchQuery } = useCycleFilter();
+  const { t } = useTranslation();
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleFilters = useCallback(
+    (key: keyof TCycleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = currentProjectFilters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (currentProjectFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId, { [key]: newValues });
+    },
+    [currentProjectFilters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  const isFiltersApplied = calculateTotalFilters(currentProjectFilters ?? {}) !== 0;
+
+  useEffect(() => {
+    if (searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [searchQuery]);
+
+  return (
+    <div className="flex items-center gap-2">
+      {!isSearchOpen ? (
+        <IconButton
+          variant="ghost"
+          size="lg"
+          onClick={() => {
+            setIsSearchOpen(true);
+            inputRef.current?.focus();
+          }}
+          icon={SearchOutline}
+        />
+      ) : (
+        <div
+          className={cn(
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
+            {
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <SearchOutline className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
+            placeholder="Search"
+            value={searchQuery}
+            onChange={(e) => updateSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <CloseOutline className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      )}
+
+      <FiltersDropdown
+        icon={<FilterOutline className="h-3 w-3" />}
+        title={t("common.filters")}
+        placement="bottom-end"
+        isFiltersApplied={isFiltersApplied}
+      >
+        <CycleFiltersSelection filters={currentProjectFilters ?? {}} handleFiltersUpdate={handleFilters} />
+      </FiltersDropdown>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/cycles/cycles-view.tsx b/apps/web/core/components/cycles/cycles-view.tsx
new file mode 100644
index 0000000..d076212
--- /dev/null
+++ b/apps/web/core/components/cycles/cycles-view.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { useTranslation } from "@plane/i18n";
+// assets
+import AllFiltersImage from "@/app/assets/empty-state/cycle/all-filters.svg?url";
+import NameFilterImage from "@/app/assets/empty-state/cycle/name-filter.svg?url";
+// components
+import { CyclesList } from "@/components/cycles/list";
+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";
+
+export interface ICyclesView {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const CyclesView = observer(function CyclesView(props: ICyclesView) {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { getFilteredCycleIds, getFilteredCompletedCycleIds, loader, currentProjectActiveCycleId } = useCycle();
+  const { searchQuery } = useCycleFilter();
+  const { t } = useTranslation();
+  // derived values
+  const filteredCycleIds = getFilteredCycleIds(projectId, false);
+  const filteredCompletedCycleIds = getFilteredCompletedCycleIds(projectId);
+  const filteredUpcomingCycleIds = (filteredCycleIds ?? []).filter(
+    (cycleId) => cycleId !== currentProjectActiveCycleId
+  );
+
+  if (loader || !filteredCycleIds) return <CycleModuleListLayoutLoader />;
+
+  if (filteredCycleIds.length === 0 && filteredCompletedCycleIds?.length === 0)
+    return (
+      <div className="grid h-full w-full place-items-center">
+        <div className="text-center">
+          <img
+            src={searchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="mx-auto h-36 w-36 object-contain sm:h-48 sm:w-48"
+            alt="No matching cycles"
+          />
+          <h5 className="mt-7 mb-1 text-18 font-medium">{t("project_cycles.no_matching_cycles")}</h5>
+          <p className="text-14 text-placeholder">
+            {searchQuery.trim() === ""
+              ? t("project_cycles.remove_filters_to_see_all_cycles")
+              : t("project_cycles.remove_search_criteria_to_see_all_cycles")}
+          </p>
+        </div>
+      </div>
+    );
+
+  return (
+    <CyclesList
+      completedCycleIds={filteredCompletedCycleIds ?? []}
+      upcomingCycleIds={filteredUpcomingCycleIds}
+      cycleIds={filteredCycleIds}
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+    />
+  );
+});
diff --git a/apps/web/core/components/cycles/delete-modal.tsx b/apps/web/core/components/cycles/delete-modal.tsx
new file mode 100644
index 0000000..04f99b2
--- /dev/null
+++ b/apps/web/core/components/cycles/delete-modal.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams, useSearchParams } from "next/navigation";
+// types
+import { PROJECT_ERROR_MESSAGES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ICycle } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+interface ICycleDelete {
+  cycle: ICycle;
+  isOpen: boolean;
+  handleClose: () => void;
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const CycleDeleteModal = observer(function CycleDeleteModal(props: ICycleDelete) {
+  const { isOpen, handleClose, cycle, workspaceSlug, projectId } = props;
+  // states
+  const [loader, setLoader] = useState(false);
+  // store hooks
+  const { deleteCycle } = useCycle();
+  const { t } = useTranslation();
+  // router
+  const router = useAppRouter();
+  const { cycleId } = useParams();
+  const searchParams = useSearchParams();
+  const peekCycle = searchParams.get("peekCycle");
+
+  const formSubmit = async () => {
+    if (!cycle) return;
+
+    setLoader(true);
+    try {
+      await deleteCycle(workspaceSlug, projectId, cycle.id)
+        .then(() => {
+          if (cycleId || peekCycle) router.push(`/${workspaceSlug}/projects/${projectId}/cycles`);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Success!",
+            message: "Cycle deleted successfully.",
+          });
+        })
+        .catch((errors) => {
+          const isPermissionError = errors?.error === "You don't have the required permissions.";
+          const currentError = isPermissionError
+            ? PROJECT_ERROR_MESSAGES.permissionError
+            : PROJECT_ERROR_MESSAGES.cycleDeleteError;
+          setToast({
+            title: t(currentError.i18n_title),
+            type: TOAST_TYPE.ERROR,
+            message: currentError.i18n_message && t(currentError.i18n_message),
+          });
+        })
+        .finally(() => handleClose());
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Warning!",
+        message: "Something went wrong please try again later.",
+      });
+    }
+
+    setLoader(false);
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={formSubmit}
+      isSubmitting={loader}
+      isOpen={isOpen}
+      title="Delete cycle"
+      content={
+        <>
+          Are you sure you want to delete cycle{' "'}
+          <span className="font-medium break-words text-primary">{cycle?.name}</span>
+          {'"'}? All of the data related to the cycle will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx b/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
new file mode 100644
index 0000000..5104570
--- /dev/null
+++ b/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import type { TCycleEstimateType } from "@plane/types";
+import { EEstimateSystem } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useCycle } from "@/hooks/store/use-cycle";
+// local imports
+import { cycleEstimateOptions } from "../analytics-sidebar/issue-progress";
+
+type TProps = {
+  value: TCycleEstimateType;
+  onChange: (value: TCycleEstimateType) => Promise<void>;
+  showDefault?: boolean;
+  projectId: string;
+  cycleId: string;
+};
+
+export const EstimateTypeDropdown = observer(function EstimateTypeDropdown(props: TProps) {
+  const { value, onChange, projectId, cycleId, showDefault = false } = props;
+  const { getIsPointsDataAvailable } = useCycle();
+  const { areEstimateEnabledByProjectId, currentProjectEstimateType } = useProjectEstimates();
+  const isCurrentProjectEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId) ? true : false;
+  return (getIsPointsDataAvailable(cycleId) || isCurrentProjectEstimateEnabled) &&
+    currentProjectEstimateType !== EEstimateSystem.CATEGORIES ? (
+    <div className="relative flex items-center gap-2">
+      <CustomSelect
+        value={value}
+        label={<span>{cycleEstimateOptions.find((v) => v.value === value)?.label ?? "None"}</span>}
+        onChange={onChange}
+        maxHeight="lg"
+        buttonClassName="bg-surface-2 border-none rounded-sm text-13 font-medium "
+      >
+        {cycleEstimateOptions.map((item) => (
+          <CustomSelect.Option key={item.value} value={item.value}>
+            {item.label}
+          </CustomSelect.Option>
+        ))}
+      </CustomSelect>
+    </div>
+  ) : showDefault ? (
+    <span className="capitalize">{cycleEstimateOptions.find((v) => v.value === value)?.label ?? value}</span>
+  ) : null;
+});
diff --git a/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx b/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
new file mode 100644
index 0000000..b405b78
--- /dev/null
+++ b/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+import { isInDateFormat } from "@plane/utils";
+// components
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterEndDate = observer(function FilterEndDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Due date"
+        />
+      )}
+      <FilterHeader
+        title={`Due date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/dropdowns/filters/index.ts b/apps/web/core/components/cycles/dropdowns/filters/index.ts
new file mode 100644
index 0000000..95c8d66
--- /dev/null
+++ b/apps/web/core/components/cycles/dropdowns/filters/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./end-date";
+export * from "./root";
+export * from "./start-date";
+export * from "./status";
diff --git a/apps/web/core/components/cycles/dropdowns/filters/root.tsx b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
new file mode 100644
index 0000000..5ed41ed
--- /dev/null
+++ b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TCycleFilters, TCycleGroups } from "@plane/types";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { FilterEndDate } from "./end-date";
+import { FilterStartDate } from "./start-date";
+import { FilterStatus } from "./status";
+
+type Props = {
+  filters: TCycleFilters;
+  handleFiltersUpdate: (key: keyof TCycleFilters, value: string | string[]) => void;
+  isArchived?: boolean;
+};
+
+export const CycleFiltersSelection = observer(function CycleFiltersSelection(props: Props) {
+  const { filters, handleFiltersUpdate, isArchived = false } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchOutline className="text-placeholder" width={12} height={12} />
+          <input
+            type="text"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus={!isMobile}
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <CloseOutline className="text-tertiary" height={12} width={12} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
+        {/* cycle status */}
+        {!isArchived && (
+          <div className="py-2">
+            <FilterStatus
+              appliedFilters={(filters.status as TCycleGroups[]) ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("status", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* start date */}
+        <div className="py-2">
+          <FilterStartDate
+            appliedFilters={filters.start_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* end date */}
+        <div className="py-2">
+          <FilterEndDate
+            appliedFilters={filters.end_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("end_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx b/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
new file mode 100644
index 0000000..911feb7
--- /dev/null
+++ b/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+// components
+import { isInDateFormat } from "@plane/utils";
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+// helpers
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterStartDate = observer(function FilterStartDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Start date"
+        />
+      )}
+      <FilterHeader
+        title={`Start date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/dropdowns/filters/status.tsx b/apps/web/core/components/cycles/dropdowns/filters/status.tsx
new file mode 100644
index 0000000..4de895c
--- /dev/null
+++ b/apps/web/core/components/cycles/dropdowns/filters/status.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { CYCLE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TCycleGroups } from "@plane/types";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// types
+// constants
+
+type Props = {
+  appliedFilters: TCycleGroups[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStatus = observer(function FilterStatus(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  //hooks
+  const { t } = useTranslation();
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+  const filteredOptions = CYCLE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Status of the cycle${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((status) => (
+              <FilterOption
+                key={status.value}
+                isChecked={appliedFilters?.includes(status.value) ? true : false}
+                onClick={() => handleUpdate(status.value)}
+                title={t(status.i18n_title)}
+              />
+            ))
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/dropdowns/index.ts b/apps/web/core/components/cycles/dropdowns/index.ts
new file mode 100644
index 0000000..9c20b30
--- /dev/null
+++ b/apps/web/core/components/cycles/dropdowns/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filters";
+export * from "./estimate-type-dropdown";
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
new file mode 100644
index 0000000..a6bb0ea
--- /dev/null
+++ b/apps/web/core/components/cycles/form.tsx
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { ETabIndices } from "@plane/constants";
+// types
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { ICycle } from "@plane/types";
+import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
+// components
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { ProjectDropdown } from "@/components/dropdowns/project/dropdown";
+// hooks
+import { useUser } from "@/hooks/store/user/user-user";
+
+type Props = {
+  handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  projectId: string;
+  setActiveProject: (projectId: string) => void;
+  data?: ICycle | null;
+  isMobile?: boolean;
+};
+
+const defaultValues: Partial<ICycle> = {
+  name: "",
+  description: "",
+  start_date: null,
+  end_date: null,
+};
+
+export function CycleForm(props: Props) {
+  const { handleFormSubmit, handleClose, status, projectId, setActiveProject, data, isMobile = false } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { projectsWithCreatePermissions } = useUser();
+  // form data
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<ICycle>({
+    defaultValues: {
+      project_id: projectId,
+      name: data?.name || "",
+      description: data?.description || "",
+      start_date: data?.start_date || null,
+      end_date: data?.end_date || null,
+    },
+  });
+
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CYCLE, isMobile);
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit((formData) => handleFormSubmit(formData))}>
+      <div className="space-y-5 p-5">
+        <div className="flex items-center gap-x-3">
+          {!status && (
+            <Controller
+              control={control}
+              name="project_id"
+              render={({ field: { value, onChange } }) => (
+                <div className="h-7">
+                  <ProjectDropdown
+                    value={value}
+                    onChange={(val) => {
+                      if (!Array.isArray(val)) {
+                        onChange(val);
+                        setActiveProject(val);
+                      }
+                    }}
+                    multiple={false}
+                    buttonVariant="border-with-text"
+                    renderCondition={(projectId) => !!projectsWithCreatePermissions?.[projectId]}
+                    tabIndex={getIndex("cover_image")}
+                  />
+                </div>
+              )}
+            />
+          )}
+          <h3 className="text-18 font-medium text-secondary">
+            {status ? t("project_cycles.update_cycle") : t("project_cycles.create_cycle")}
+          </h3>
+        </div>
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <Controller
+              name="name"
+              control={control}
+              rules={{
+                required: t("title_is_required"),
+                maxLength: {
+                  value: 255,
+                  message: t("title_should_be_less_than_255_characters"),
+                },
+              }}
+              render={({ field: { value, onChange } }) => (
+                <Field name="name" invalid={Boolean(errors?.name)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      name="name"
+                      type="text"
+                      placeholder={t("title")}
+                      value={value}
+                      onChange={onChange}
+                      tabIndex={getIndex("description")}
+                      autoFocus
+                      aria-label={t("title")}
+                    />
+                  </InputGroup>
+                </Field>
+              )}
+            />
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
+          </div>
+          <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup resize="none">
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      autoResize
+                      maxRows={8}
+                      name="description"
+                      placeholder={t("description")}
+                      value={value}
+                      onChange={onChange}
+                      tabIndex={getIndex("description")}
+                    />
+                  </TextAreaGroup>
+                </Field>
+              )}
+            />
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              control={control}
+              name="start_date"
+              render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
+                <Controller
+                  control={control}
+                  name="end_date"
+                  render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => (
+                    <DateRangeDropdown
+                      buttonVariant="border-with-text"
+                      className="h-7"
+                      minDate={new Date()}
+                      value={{
+                        from: getDate(startDateValue),
+                        to: getDate(endDateValue),
+                      }}
+                      onSelect={(val) => {
+                        onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
+                        onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
+                      }}
+                      placeholder={{
+                        from: "Start date",
+                        to: "End date",
+                      }}
+                      hideIcon={{
+                        to: true,
+                      }}
+                      tabIndex={getIndex("date_range")}
+                    />
+                  )}
+                />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
+          {t("common.cancel")}
+        </Button>
+        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
+          {data
+            ? isSubmitting
+              ? t("common.updating")
+              : t("project_cycles.update_cycle")
+            : isSubmitting
+              ? t("common.creating")
+              : t("project_cycles.create_cycle")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/web/core/components/cycles/list/cycle-list-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
new file mode 100644
index 0000000..e9189d0
--- /dev/null
+++ b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// types
+import { CycleGroupIcon } from "@plane/propel/icons";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+import type { TCycleGroups } from "@plane/types";
+// icons
+import { Row } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+
+type Props = {
+  type: TCycleGroups;
+  title: string;
+  count?: number;
+  showCount?: boolean;
+  isExpanded?: boolean;
+};
+
+export function CycleListGroupHeader(props: Props) {
+  const { type, title, count, showCount = false, isExpanded = false } = props;
+  return (
+    <Row className="flex items-center justify-between py-2.5">
+      <div className="flex flex-shrink-0 items-center gap-5">
+        <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
+          <CycleGroupIcon cycleGroup={type} className="h-5 w-5" />
+        </div>
+
+        <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
+          <div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
+          {showCount && <div className="pl-2 text-13 font-medium text-tertiary">{`${count ?? "0"}`}</div>}
+        </div>
+      </div>
+      <ChevronDownOutline
+        className={cn("size-4 shrink-0 text-tertiary transition-transform", {
+          "rotate-180": isExpanded,
+        })}
+      />
+    </Row>
+  );
+}
diff --git a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
new file mode 100644
index 0000000..985bdc6
--- /dev/null
+++ b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -0,0 +1,316 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MouseEvent } from "react";
+import React, { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { useForm } from "react-hook-form";
+import {
+  CalendarOutline,
+  MembersOutline,
+  ShowOutline,
+  TransferWorkItemOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { setPromiseToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { ICycle, TCycleGroups } from "@plane/types";
+import { FavoriteStar } from "@plane/ui";
+import { getDate, getFileURL, generateQueryParams } from "@plane/utils";
+// components
+import { AvatarGroupOverflow } from "@/components/common/avatar-group-overflow";
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { MergedDateDisplay } from "@/components/dropdowns/merged-date";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useMember } from "@/hooks/store/use-member";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { useTimeZoneConverter } from "@/hooks/use-timezone-converter";
+// local imports
+import { CycleQuickActions } from "../quick-actions";
+import { TransferIssuesModal } from "../transfer-issues-modal";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+  cycleDetails: ICycle;
+  parentRef: React.RefObject<HTMLDivElement | null>;
+  isActive?: boolean;
+};
+
+const defaultValues: Partial<ICycle> = {
+  start_date: null,
+  end_date: null,
+};
+
+export const CycleListItemAction = observer(function CycleListItemAction(props: Props) {
+  const { workspaceSlug, projectId, cycleId, cycleDetails, parentRef, isActive = false } = props;
+  // router
+  const { projectId: routerProjectId } = useParams();
+  //states
+  const [transferIssuesModal, setTransferIssuesModal] = useState(false);
+  // hooks
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+  const { isProjectTimeZoneDifferent, getProjectUTCOffset, renderFormattedDateInUserTimezone } =
+    useTimeZoneConverter(projectId);
+  // router
+  const router = useAppRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  // store hooks
+  const { addCycleToFavorites, removeCycleFromFavorites } = useCycle();
+  const { allowPermissions } = useUserPermissions();
+
+  // local storage
+  const { setValue: toggleFavoriteMenu, storedValue: isFavoriteMenuOpen } = useLocalStorage<boolean>(
+    IS_FAVORITE_MENU_OPEN,
+    false
+  );
+
+  const { getUserDetails } = useMember();
+
+  // form
+  const { reset } = useForm({
+    defaultValues,
+  });
+
+  // derived values
+  const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+
+  const showIssueCount = useMemo(() => cycleStatus === "draft" || cycleStatus === "upcoming", [cycleStatus]);
+
+  const transferableIssuesCount = cycleDetails
+    ? cycleDetails.total_issues - (cycleDetails.cancelled_issues + cycleDetails.completed_issues)
+    : 0;
+
+  const showTransferIssues = routerProjectId && transferableIssuesCount > 0 && cycleStatus === "completed";
+
+  const projectUTCOffset = getProjectUTCOffset();
+
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+
+  // handlers
+  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const addToFavoritePromise = addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycleId).then(
+      // oxlint-disable-next-line promise/always-return
+      () => {
+        if (!isFavoriteMenuOpen) toggleFavoriteMenu(true);
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: t("project_cycles.action.favorite.loading"),
+      success: {
+        title: t("project_cycles.action.favorite.success.title"),
+        message: () => t("project_cycles.action.favorite.success.description"),
+      },
+      error: {
+        title: t("project_cycles.action.favorite.failed.title"),
+        message: () => t("project_cycles.action.favorite.failed.description"),
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const removeFromFavoritePromise = removeCycleFromFavorites(
+      workspaceSlug?.toString(),
+      projectId.toString(),
+      cycleId
+    );
+
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: t("project_cycles.action.unfavorite.loading"),
+      success: {
+        title: t("project_cycles.action.unfavorite.success.title"),
+        message: () => t("project_cycles.action.unfavorite.success.description"),
+      },
+      error: {
+        title: t("project_cycles.action.unfavorite.failed.title"),
+        message: () => t("project_cycles.action.unfavorite.failed.description"),
+      },
+    });
+  };
+
+  const createdByDetails = cycleDetails.created_by ? getUserDetails(cycleDetails.created_by) : undefined;
+
+  useEffect(() => {
+    if (cycleDetails)
+      reset({
+        ...cycleDetails,
+      });
+  }, [cycleDetails, reset]);
+
+  // handlers
+  const openCycleOverview = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const query = generateQueryParams(searchParams, ["peekCycle"]);
+    if (searchParams.has("peekCycle") && searchParams.get("peekCycle") === cycleId) {
+      router.push(`${pathname}?${query}`);
+    } else {
+      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`);
+    }
+  };
+
+  return (
+    <>
+      <TransferIssuesModal
+        handleClose={() => setTransferIssuesModal(false)}
+        isOpen={transferIssuesModal}
+        cycleId={cycleId.toString()}
+      />
+      <button
+        onClick={openCycleOverview}
+        className={`z-[1] flex flex-shrink-0 gap-1 text-11 text-accent-secondary ${isMobile || (isActive && !searchParams.has("peekCycle")) ? "flex" : "hidden group-hover:flex"}`}
+      >
+        <ShowOutline className="my-auto h-4 w-4 text-accent-secondary" />
+        <span>{t("project_cycles.more_details")}</span>
+      </button>
+      {showIssueCount && (
+        <div className="flex items-center gap-1">
+          <WorkItemsOutline className="h-4 w-4 text-tertiary" />
+          <span className="text-11 text-tertiary">{cycleDetails.total_issues}</span>
+        </div>
+      )}
+      {showTransferIssues && (
+        // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+        <div
+          className="flex h-6 cursor-pointer items-center gap-1 px-2 text-accent-secondary"
+          onClick={() => {
+            setTransferIssuesModal(true);
+          }}
+        >
+          <TransferWorkItemOutline className="w-4 fill-accent-primary" />
+          <span>{t("project_cycles.transfer_work_items", { count: transferableIssuesCount })}</span>
+        </div>
+      )}
+      {isActive ? (
+        <>
+          <div className="flex gap-2">
+            {/* Duration */}
+            <Tooltip
+              label={`${t("project_cycles.in_your_timezone")}: ${renderFormattedDateInUserTimezone(
+                cycleDetails.start_date ?? ""
+              )} → ${renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")}`}
+              layout="stacked"
+              disabled={!isProjectTimeZoneDifferent()}
+            >
+              <div className="flex items-center gap-1 text-11 font-medium text-tertiary">
+                <CalendarOutline className="my-auto h-3 w-3 flex-shrink-0" />
+                <MergedDateDisplay startDate={cycleDetails.start_date} endDate={cycleDetails.end_date} />
+              </div>
+            </Tooltip>
+            {projectUTCOffset && (
+              <span className="cursor-default rounded-md bg-layer-1 px-2 py-1 text-11 text-tertiary">
+                {projectUTCOffset}
+              </span>
+            )}
+            {/* created by */}
+            {createdByDetails && <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />}
+          </div>
+        </>
+      ) : (
+        cycleDetails.start_date && (
+          <>
+            <DateRangeDropdown
+              buttonVariant={"transparent-with-text"}
+              buttonContainerClassName={`h-6 w-full cursor-auto flex items-center gap-1.5 text-tertiary rounded-sm text-11 [&>div]:hover:bg-transparent`}
+              buttonClassName="p-0"
+              minDate={new Date()}
+              value={{
+                from: getDate(cycleDetails.start_date),
+                to: getDate(cycleDetails.end_date),
+              }}
+              placeholder={{
+                from: t("project_cycles.start_date"),
+                to: t("project_cycles.end_date"),
+              }}
+              showTooltip={isProjectTimeZoneDifferent()}
+              customTooltipHeading={t("project_cycles.in_your_timezone")}
+              customTooltipContent={`${renderFormattedDateInUserTimezone(
+                cycleDetails.start_date ?? ""
+              )} → ${renderFormattedDateInUserTimezone(cycleDetails.end_date ?? "")}`}
+              mergeDates
+              required={cycleDetails.status !== "draft"}
+              disabled
+              hideIcon={{
+                from: false,
+                to: false,
+              }}
+            />
+          </>
+        )
+      )}
+      {/* created by */}
+      {createdByDetails && !isActive && <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />}
+      {!isActive && (
+        <Tooltip label={`${cycleDetails.assignee_ids?.length} Members`} layout="stacked" disabled={isMobile}>
+          <div className="flex w-min cursor-default items-center justify-center">
+            {cycleDetails.assignee_ids && cycleDetails.assignee_ids?.length > 0 ? (
+              <AvatarGroupOverflow size="xs">
+                {cycleDetails.assignee_ids?.map((assignee_id) => {
+                  const member = getUserDetails(assignee_id);
+                  return (
+                    <Avatar
+                      key={member?.id}
+                      alt={member?.display_name}
+                      fallback={member?.display_name?.[0]?.toUpperCase()}
+                      src={getFileURL(member?.avatar_url ?? "")}
+                    />
+                  );
+                })}
+              </AvatarGroupOverflow>
+            ) : (
+              <MembersOutline className="h-4 w-4 text-tertiary" />
+            )}
+          </div>
+        </Tooltip>
+      )}
+      {isEditingAllowed && !cycleDetails.archived_at && (
+        <FavoriteStar
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (cycleDetails.is_favorite) handleRemoveFromFavorites(e);
+            else handleAddToFavorites(e);
+          }}
+          selected={!!cycleDetails.is_favorite}
+        />
+      )}
+      <div className="hidden md:block">
+        <CycleQuickActions
+          parentRef={parentRef}
+          cycleId={cycleId}
+          projectId={projectId}
+          workspaceSlug={workspaceSlug}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
new file mode 100644
index 0000000..7720eee
--- /dev/null
+++ b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
+// icons
+import { Row } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  projectId: string;
+  count?: number;
+  showCount?: boolean;
+  isExpanded?: boolean;
+};
+
+export const CycleListProjectGroupHeader = observer(function CycleListProjectGroupHeader(props: Props) {
+  const { projectId, count, showCount = false, isExpanded = false } = props;
+  // store hooks
+  const { getProjectById } = useProject();
+  // derived values
+  const project = getProjectById(projectId);
+
+  if (!project) return null;
+  return (
+    <Row className="flex flex-shrink-0 items-center gap-2 py-2.5">
+      <ChevronRightOutline
+        className={cn("h-4 w-4 text-tertiary duration-300", {
+          "rotate-90": isExpanded,
+        })}
+      />
+      <div className="flex size-4 flex-shrink-0 items-center justify-center overflow-hidden">
+        <Logo logo={project.logo_props} size={16} />
+      </div>
+      <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
+        <div className="line-clamp-1 inline-block truncate font-medium text-primary">{project.name}</div>
+        {showCount && <div className="pl-2 text-13 font-medium text-tertiary">{`${count ?? "0"}`}</div>}
+      </div>
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/cycles/list/cycles-list-item.tsx b/apps/web/core/components/cycles/list/cycles-list-item.tsx
new file mode 100644
index 0000000..0b42e30
--- /dev/null
+++ b/apps/web/core/components/cycles/list/cycles-list-item.tsx
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MouseEvent } from "react";
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { CircularProgress } from "@makeplane/propel/components/circular-progress";
+import { TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TCycleGroups } from "@plane/types";
+// components
+import { generateQueryParams, calculateCycleProgress } from "@plane/utils";
+import { ListItem } from "@/components/core/list";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { CycleQuickActions } from "../quick-actions";
+import { CycleListItemAction } from "./cycle-list-item-action";
+
+type TCyclesListItem = {
+  cycleId: string;
+  handleEditCycle?: () => void;
+  handleDeleteCycle?: () => void;
+  handleAddToFavorites?: () => void;
+  handleRemoveFromFavorites?: () => void;
+  workspaceSlug: string;
+  projectId: string;
+  className?: string;
+};
+
+export const CyclesListItem = observer(function CyclesListItem(props: TCyclesListItem) {
+  const { cycleId, workspaceSlug, projectId, className = "" } = props;
+  // refs
+  const parentRef = useRef(null);
+  // router
+  const router = useAppRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // store hooks
+  const { getCycleById } = useCycle();
+
+  // derived values
+  const cycleDetails = getCycleById(cycleId);
+
+  if (!cycleDetails) return null;
+
+  // computed
+  // TODO: change this logic once backend fix the response
+  const cycleStatus = cycleDetails.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+  const isActive = cycleStatus === "current";
+
+  // handlers
+  const openCycleOverview = (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const query = generateQueryParams(searchParams, ["peekCycle"]);
+    if (searchParams.has("peekCycle") && searchParams.get("peekCycle") === cycleId) {
+      router.push(`${pathname}?${query}`);
+    } else {
+      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`);
+    }
+  };
+
+  // handlers
+  const handleArchivedCycleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    openCycleOverview(e);
+  };
+
+  const handleItemClick = cycleDetails.archived_at ? handleArchivedCycleClick : undefined;
+
+  const progress = calculateCycleProgress(cycleDetails);
+
+  return (
+    <ListItem
+      title={cycleDetails?.name ?? ""}
+      itemLink={`/${workspaceSlug}/projects/${projectId}/cycles/${cycleDetails.id}`}
+      onItemClick={handleItemClick}
+      className={className}
+      prependTitleElement={
+        <div className="relative size-[30px]">
+          <div className="absolute inset-0 flex scale-150 items-center justify-center">
+            <CircularProgress
+              value={progress}
+              size="md"
+              variant={progress === 100 ? "success" : "brand"}
+              aria-label="Cycle progress"
+            />
+          </div>
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            {progress === 100 ? (
+              <TickOutline className="h-3 w-3" />
+            ) : (
+              <span className="text-9 text-primary">{`${progress}%`}</span>
+            )}
+          </div>
+        </div>
+      }
+      actionableItems={
+        <CycleListItemAction
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          cycleId={cycleId}
+          cycleDetails={cycleDetails}
+          parentRef={parentRef}
+          isActive={isActive}
+        />
+      }
+      quickActionElement={
+        <div className="block md:hidden">
+          <CycleQuickActions
+            parentRef={parentRef}
+            cycleId={cycleId}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+          />
+        </div>
+      }
+      isMobile={isMobile}
+      parentRef={parentRef}
+      isSidebarOpen={searchParams.has("peekCycle")}
+    />
+  );
+});
diff --git a/apps/web/core/components/cycles/list/cycles-list-map.tsx b/apps/web/core/components/cycles/list/cycles-list-map.tsx
new file mode 100644
index 0000000..d59c7f9
--- /dev/null
+++ b/apps/web/core/components/cycles/list/cycles-list-map.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components
+import { CyclesListItem } from "./cycles-list-item";
+
+type Props = {
+  cycleIds: string[];
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export function CyclesListMap(props: Props) {
+  const { cycleIds, projectId, workspaceSlug } = props;
+
+  return (
+    <>
+      {cycleIds.map((cycleId) => (
+        <CyclesListItem key={cycleId} cycleId={cycleId} workspaceSlug={workspaceSlug} projectId={projectId} />
+      ))}
+    </>
+  );
+}
diff --git a/apps/web/core/components/cycles/list/index.ts b/apps/web/core/components/cycles/list/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/cycles/list/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/cycles/list/root.tsx b/apps/web/core/components/cycles/list/root.tsx
new file mode 100644
index 0000000..6831f61
--- /dev/null
+++ b/apps/web/core/components/cycles/list/root.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Disclosure } from "@headlessui/react";
+// components
+import { useTranslation } from "@plane/i18n";
+import { ContentWrapper, ERowVariant } from "@plane/ui";
+import { ListLayout } from "@/components/core/list";
+// local imports
+import { CyclePeekOverview } from "../cycle-peek-overview";
+import { CycleListGroupHeader } from "./cycle-list-group-header";
+import { CyclesListMap } from "./cycles-list-map";
+import { ActiveCycleRoot } from "../active-cycle/root";
+
+export interface ICyclesList {
+  completedCycleIds: string[];
+  upcomingCycleIds?: string[] | undefined;
+  cycleIds: string[];
+  workspaceSlug: string;
+  projectId: string;
+  isArchived?: boolean;
+}
+
+export const CyclesList = observer(function CyclesList(props: ICyclesList) {
+  const { completedCycleIds, upcomingCycleIds, cycleIds, workspaceSlug, projectId, isArchived = false } = props;
+  const { t } = useTranslation();
+
+  return (
+    <ContentWrapper variant={ERowVariant.HUGGING} className="flex-row">
+      <ListLayout>
+        {isArchived ? (
+          <>
+            <CyclesListMap cycleIds={cycleIds} projectId={projectId} workspaceSlug={workspaceSlug} />
+          </>
+        ) : (
+          <>
+            <ActiveCycleRoot workspaceSlug={workspaceSlug} projectId={projectId} />
+
+            {upcomingCycleIds && (
+              <Disclosure as="div" className="flex flex-shrink-0 flex-col" defaultOpen>
+                {({ open }) => (
+                  <>
+                    <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
+                      <CycleListGroupHeader
+                        title={t("project_cycles.upcoming_cycle.label")}
+                        type="upcoming"
+                        count={upcomingCycleIds.length}
+                        showCount
+                        isExpanded={open}
+                      />
+                    </Disclosure.Button>
+                    <Disclosure.Panel>
+                      <CyclesListMap cycleIds={upcomingCycleIds} projectId={projectId} workspaceSlug={workspaceSlug} />
+                    </Disclosure.Panel>
+                  </>
+                )}
+              </Disclosure>
+            )}
+            <Disclosure as="div" className="flex flex-shrink-0 flex-col pb-7">
+              {({ open }) => (
+                <>
+                  <Disclosure.Button className="sticky top-0 z-2 w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
+                    <CycleListGroupHeader
+                      title={t("project_cycles.completed_cycle.label")}
+                      type="completed"
+                      count={completedCycleIds.length}
+                      showCount
+                      isExpanded={open}
+                    />
+                  </Disclosure.Button>
+                  <Disclosure.Panel>
+                    <CyclesListMap cycleIds={completedCycleIds} projectId={projectId} workspaceSlug={workspaceSlug} />
+                  </Disclosure.Panel>
+                </>
+              )}
+            </Disclosure>
+          </>
+        )}
+      </ListLayout>
+      <CyclePeekOverview projectId={projectId} workspaceSlug={workspaceSlug} isArchived={isArchived} />
+    </ContentWrapper>
+  );
+});
diff --git a/apps/web/core/components/cycles/modal.tsx b/apps/web/core/components/cycles/modal.tsx
new file mode 100644
index 0000000..582489c
--- /dev/null
+++ b/apps/web/core/components/cycles/modal.tsx
@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { mutate } from "swr";
+// types
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { renderFormattedPayloadDate } from "@plane/utils";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useProject } from "@/hooks/store/use-project";
+import useKeypress from "@/hooks/use-keypress";
+import useLocalStorage from "@/hooks/use-local-storage";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { CycleService } from "@/services/cycle.service";
+// local imports
+import { CycleForm } from "./form";
+
+type CycleModalProps = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data?: ICycle | null;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+// services
+const cycleService = new CycleService();
+
+export function CycleCreateUpdateModal(props: CycleModalProps) {
+  const { isOpen, handleClose, data, workspaceSlug, projectId } = props;
+  // states
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+  // store hooks
+  const { workspaceProjectIds } = useProject();
+  const { createCycle, updateCycleDetails } = useCycle();
+  const { isMobile } = usePlatformOS();
+
+  const { setValue: setCycleTab } = useLocalStorage<TCycleTabOptions>("cycle_tab", "active");
+
+  const handleCreateCycle = async (payload: Partial<ICycle>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const selectedProjectId = payload.project_id ?? projectId.toString();
+    await createCycle(workspaceSlug, selectedProjectId, payload)
+      .then((_res) => {
+        // mutate when the current cycle creation is active
+        if (payload.start_date && payload.end_date) {
+          const currentDate = new Date();
+          const cycleStartDate = new Date(payload.start_date);
+          const cycleEndDate = new Date(payload.end_date);
+          if (currentDate >= cycleStartDate && currentDate <= cycleEndDate) {
+            mutate(`PROJECT_ACTIVE_CYCLE_${selectedProjectId}`);
+          }
+        }
+
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Cycle created successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? "Error in creating cycle. Please try again.",
+        });
+      });
+  };
+
+  const handleUpdateCycle = async (cycleId: string, payload: Partial<ICycle>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const selectedProjectId = payload.project_id ?? projectId.toString();
+    await updateCycleDetails(workspaceSlug, selectedProjectId, cycleId, payload)
+      .then((_res) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Cycle updated successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? "Error in updating cycle. Please try again.",
+        });
+      });
+  };
+
+  const dateChecker = async (projectId: string, payload: CycleDateCheckData) => {
+    let status = false;
+
+    await cycleService.cycleDateCheck(workspaceSlug, projectId, payload).then((res) => {
+      status = res.status;
+    });
+
+    return status;
+  };
+
+  const handleFormSubmit = async (formData: Partial<ICycle>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload: Partial<ICycle> = {
+      ...formData,
+      start_date: renderFormattedPayloadDate(formData.start_date) ?? null,
+      end_date: renderFormattedPayloadDate(formData.end_date) ?? null,
+    };
+
+    let isDateValid: boolean = true;
+
+    if (payload.start_date && payload.end_date) {
+      if (data?.id) {
+        // Update existing cycle - only check dates if they've changed
+        const originalStartDate = renderFormattedPayloadDate(data.start_date) ?? null;
+        const originalEndDate = renderFormattedPayloadDate(data.end_date) ?? null;
+        const hasDateChanged = payload.start_date !== originalStartDate || payload.end_date !== originalEndDate;
+
+        if (hasDateChanged) {
+          isDateValid = await dateChecker(projectId, {
+            start_date: payload.start_date,
+            end_date: payload.end_date,
+            cycle_id: data.id,
+          });
+        }
+      } else {
+        // Create new cycle - always check dates
+        isDateValid = await dateChecker(projectId, {
+          start_date: payload.start_date,
+          end_date: payload.end_date,
+        });
+      }
+    }
+
+    if (isDateValid) {
+      if (data?.id) await handleUpdateCycle(data.id, payload);
+      else {
+        await handleCreateCycle(payload).then(() => {
+          setCycleTab("all");
+        });
+      }
+      handleClose();
+    } else
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "You already have a cycle on the given dates, if you want to create a draft cycle, remove the dates.",
+      });
+  };
+
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project_id) {
+      setActiveProject(data.project_id);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProject)
+      setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
+  }, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
+
+  useKeypress("Escape", () => {
+    if (isOpen) handleClose();
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <CycleForm
+        handleFormSubmit={handleFormSubmit}
+        handleClose={handleClose}
+        status={!!data}
+        projectId={activeProject ?? ""}
+        setActiveProject={setActiveProject}
+        data={data}
+        isMobile={isMobile}
+      />
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/cycles/quick-actions.tsx b/apps/web/core/components/cycles/quick-actions.tsx
new file mode 100644
index 0000000..8a9978b
--- /dev/null
+++ b/apps/web/core/components/cycles/quick-actions.tsx
@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
+// ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TContextMenuItem } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { copyUrlToClipboard, cn } from "@plane/utils";
+// hooks
+import { useCycleMenuItems } from "@/components/common/quick-actions-helper";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// local imports
+import { ArchiveCycleModal } from "./archived-cycles/modal";
+import { CycleDeleteModal } from "./delete-modal";
+import { CycleCreateUpdateModal } from "./modal";
+
+type Props = {
+  parentRef: React.RefObject<HTMLElement | null>;
+  cycleId: string;
+  projectId: string;
+  workspaceSlug: string;
+  customClassName?: string;
+};
+
+export const CycleQuickActions = observer(function CycleQuickActions(props: Props) {
+  const { parentRef, cycleId, projectId, workspaceSlug, customClassName } = props;
+  // router
+  const router = useAppRouter();
+  // states
+  const [updateModal, setUpdateModal] = useState(false);
+  const [archiveCycleModal, setArchiveCycleModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { getCycleById, restoreCycle } = useCycle();
+  const { t } = useTranslation();
+  // derived values
+  const cycleDetails = getCycleById(cycleId);
+  // auth
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+
+  const cycleLink = `${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`;
+  const handleCopyText = () =>
+    copyUrlToClipboard(cycleLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("common.link_copied"),
+        message: t("common.link_copied_to_clipboard"),
+      });
+    });
+  const handleOpenInNewTab = () => window.open(`/${cycleLink}`, "_blank");
+
+  const handleRestoreCycle = async () =>
+    await restoreCycle(workspaceSlug, projectId, cycleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("project_cycles.action.restore.success.title"),
+          message: t("project_cycles.action.restore.success.description"),
+        });
+        router.push(`/${workspaceSlug}/projects/${projectId}/archives/cycles`);
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("project_cycles.action.restore.failed.title"),
+          message: t("project_cycles.action.restore.failed.description"),
+        });
+      });
+
+  const menuResult = useCycleMenuItems({
+    cycleDetails: cycleDetails ?? undefined,
+    workspaceSlug,
+    projectId,
+    cycleId,
+    isEditingAllowed,
+    handleEdit: () => setUpdateModal(true),
+    handleArchive: () => setArchiveCycleModal(true),
+    handleRestore: handleRestoreCycle,
+    handleDelete: () => setDeleteModal(true),
+    handleCopyLink: handleCopyText,
+    handleOpenInNewTab,
+  });
+
+  const MENU_ITEMS: TContextMenuItem[] = Array.isArray(menuResult) ? menuResult : menuResult.items;
+  const additionalModals = Array.isArray(menuResult) ? null : menuResult.modals;
+
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+      action: () => {
+        item.action();
+      },
+    };
+  });
+
+  return (
+    <>
+      {cycleDetails && (
+        <div className="fixed">
+          <CycleCreateUpdateModal
+            data={cycleDetails}
+            isOpen={updateModal}
+            handleClose={() => setUpdateModal(false)}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+          />
+          <ArchiveCycleModal
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            cycleId={cycleId}
+            isOpen={archiveCycleModal}
+            handleClose={() => setArchiveCycleModal(false)}
+          />
+          <CycleDeleteModal
+            cycle={cycleDetails}
+            isOpen={deleteModal}
+            handleClose={() => setDeleteModal(false)}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+          />
+          {additionalModals}
+        </div>
+      )}
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu
+        customButton={<IconButton variant="tertiary" size="lg" icon={MoreHorizontalOutline} />}
+        placement="bottom-end"
+        closeOnSelect
+        maxHeight="lg"
+        buttonClassName={customClassName}
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3 flex-shrink-0", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/cycles/transfer-issues-modal.tsx b/apps/web/core/components/cycles/transfer-issues-modal.tsx
new file mode 100644
index 0000000..5bc87eb
--- /dev/null
+++ b/apps/web/core/components/cycles/transfer-issues-modal.tsx
@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import {
+  CloseOutline,
+  CyclesOutline,
+  SearchOutline,
+  TransferWorkItemOutline,
+  WarningCircleOutline,
+} from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EIssuesStoreType } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssues } from "@/hooks/store/use-issues";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  cycleId: string;
+};
+
+export const TransferIssuesModal = observer(function TransferIssuesModal(props: Props) {
+  const { isOpen, handleClose, cycleId } = props;
+  // states
+  const [query, setQuery] = useState("");
+
+  // store hooks
+  const { currentProjectIncompleteCycleIds, getCycleById, fetchActiveCycleProgress } = useCycle();
+  const {
+    issues: { transferIssuesFromCycle },
+  } = useIssues(EIssuesStoreType.CYCLE);
+
+  const { workspaceSlug, projectId } = useParams();
+
+  const transferIssue = async (payload: { new_cycle_id: string }) => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    await transferIssuesFromCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), payload)
+      .then(async () => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Work items have been transferred successfully",
+        });
+        await getCycleDetails(payload.new_cycle_id);
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Unable to transfer work items. Please try again.",
+        });
+      });
+  };
+
+  /**To update issue counts in target cycle and current cycle */
+  const getCycleDetails = async (newCycleId: string) => {
+    const cyclesFetch = [
+      fetchActiveCycleProgress(workspaceSlug.toString(), projectId.toString(), cycleId),
+      fetchActiveCycleProgress(workspaceSlug.toString(), projectId.toString(), newCycleId),
+    ];
+    await Promise.all(cyclesFetch).catch((error) => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: error.error || "Unable to fetch cycle details",
+      });
+    });
+  };
+
+  const filteredOptions = currentProjectIncompleteCycleIds?.filter((optionId) => {
+    const cycleDetails = getCycleById(optionId);
+
+    return cycleDetails?.name?.toLowerCase().includes(query?.toLowerCase());
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <div className="flex flex-col gap-4 py-5">
+        <div className="flex items-center justify-between px-5">
+          <div className="flex items-center gap-1">
+            <TransferWorkItemOutline className="w-5 fill-primary" />
+            <h4 className="text-18 font-medium text-primary">Transfer work items</h4>
+          </div>
+          <button onClick={handleClose}>
+            <CloseOutline className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="flex items-center gap-2 border-b border-subtle px-5 pb-3">
+          <SearchOutline className="h-4 w-4 text-secondary" />
+          <input
+            className="text-13 outline-none"
+            placeholder="Search for a cycle..."
+            onChange={(e) => setQuery(e.target.value)}
+            value={query}
+          />
+        </div>
+        <div className="flex w-full flex-col items-start gap-2 px-5">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map((optionId) => {
+                const cycleDetails = getCycleById(optionId);
+
+                if (!cycleDetails) return;
+
+                return (
+                  <button
+                    key={optionId}
+                    className="flex w-full items-center gap-4 rounded-sm px-4 py-3 text-13 text-secondary hover:bg-surface-2"
+                    onClick={() => {
+                      transferIssue({
+                        new_cycle_id: optionId,
+                      });
+                      handleClose();
+                    }}
+                  >
+                    <CyclesOutline className="h-5 w-5" />
+                    <div className="flex w-full justify-between truncate">
+                      <span className="truncate">{cycleDetails?.name}</span>
+                      {cycleDetails.status && (
+                        <span className="flex flex-shrink-0 items-center rounded-full bg-layer-1 px-2 capitalize">
+                          {cycleDetails.status.toLocaleLowerCase()}
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                );
+              })
+            ) : (
+              <div className="flex w-full items-center justify-center gap-4 p-5 text-13">
+                <WarningCircleOutline className="h-3.5 w-3.5 text-secondary" />
+                <span className="text-center text-secondary">
+                  You don’t have any current cycle. Please create one to transfer the work items.
+                </span>
+              </div>
+            )
+          ) : (
+            <p className="text-center text-secondary">Loading...</p>
+          )}
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/cycles/transfer-issues.tsx b/apps/web/core/components/cycles/transfer-issues.tsx
new file mode 100644
index 0000000..e4315b4
--- /dev/null
+++ b/apps/web/core/components/cycles/transfer-issues.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { TransferWorkItemOutline, WarningCircleOutline } from "@makeplane/propel/icons";
+// ui
+import { Button } from "@plane/propel/button";
+
+type Props = {
+  handleClick: () => void;
+  canTransferIssues?: boolean;
+  disabled?: boolean;
+};
+
+export function TransferIssues(props: Props) {
+  const { handleClick, canTransferIssues = false, disabled = false } = props;
+  return (
+    <div className="-mt-2 mb-4 flex items-center justify-between px-4 pt-6">
+      <div className="flex items-center gap-2 text-13 text-secondary">
+        <WarningCircleOutline className="h-3.5 w-3.5 text-secondary" />
+        <span>Completed cycles are not editable.</span>
+      </div>
+
+      {canTransferIssues && (
+        <div>
+          <Button
+            variant="primary"
+            size="lg"
+            prependIcon={<TransferWorkItemOutline />}
+            onClick={handleClick}
+            disabled={disabled}
+          >
+            Transfer work items
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/dropdowns/buttons.tsx b/apps/web/core/components/dropdowns/buttons.tsx
new file mode 100644
index 0000000..6bd59d7
--- /dev/null
+++ b/apps/web/core/components/dropdowns/buttons.tsx
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { Button } from "@plane/propel/button";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// types
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS } from "./constants";
+import type { TButtonVariants } from "./types";
+
+export type DropdownButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  isActive: boolean;
+  tooltipContent?: string;
+  tooltipHeading: string;
+  showTooltip: boolean;
+  variant: TButtonVariants;
+  renderToolTipByDefault?: boolean;
+};
+
+type ButtonProps = {
+  children: React.ReactNode;
+  className?: string;
+  isActive: boolean;
+  tooltipContent?: string;
+  tooltipHeading: string;
+  showTooltip: boolean;
+  renderToolTipByDefault?: boolean;
+};
+
+export function DropdownButton(props: DropdownButtonProps) {
+  const {
+    children,
+    className,
+    isActive,
+    tooltipContent,
+    renderToolTipByDefault = true,
+    tooltipHeading,
+    showTooltip,
+    variant,
+  } = props;
+  const ButtonToRender: React.FC<ButtonProps> = BORDER_BUTTON_VARIANTS.includes(variant)
+    ? BorderButton
+    : BACKGROUND_BUTTON_VARIANTS.includes(variant)
+      ? BackgroundButton
+      : TransparentButton;
+
+  return (
+    <ButtonToRender
+      className={className}
+      isActive={isActive}
+      tooltipContent={tooltipContent}
+      tooltipHeading={tooltipHeading}
+      showTooltip={showTooltip}
+      renderToolTipByDefault={renderToolTipByDefault}
+    >
+      {children}
+    </ButtonToRender>
+  );
+}
+
+function BorderButton(props: ButtonProps) {
+  const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <Tooltip
+      label={tooltipContent ? `${tooltipHeading}: ${tooltipContent}` : tooltipHeading}
+      layout="stacked"
+      disabled={!showTooltip || isMobile}
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          "flex h-full w-full items-center justify-start gap-1.5 border-[0.5px] border-strong",
+          {
+            "bg-layer-transparent-active": isActive,
+          },
+          className
+        )}
+      >
+        {children}
+      </Button>
+    </Tooltip>
+  );
+}
+
+function BackgroundButton(props: ButtonProps) {
+  const { children, className, tooltipContent, tooltipHeading, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <Tooltip
+      label={tooltipContent ? `${tooltipHeading}: ${tooltipContent}` : tooltipHeading}
+      layout="stacked"
+      disabled={!showTooltip || isMobile}
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          "flex h-full w-full items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
+          className
+        )}
+      >
+        {children}
+      </Button>
+    </Tooltip>
+  );
+}
+
+function TransparentButton(props: ButtonProps) {
+  const { children, className, isActive, tooltipContent, tooltipHeading, showTooltip } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <Tooltip
+      label={tooltipContent ? `${tooltipHeading}: ${tooltipContent}` : tooltipHeading}
+      layout="stacked"
+      disabled={!showTooltip || isMobile}
+    >
+      <Button
+        variant="ghost"
+        size="sm"
+        className={cn(
+          "flex h-full w-full items-center justify-between gap-1.5",
+          {
+            "bg-layer-transparent-active": isActive,
+          },
+          className
+        )}
+      >
+        {children}
+      </Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/dropdowns/constants.ts b/apps/web/core/components/dropdowns/constants.ts
new file mode 100644
index 0000000..77479c8
--- /dev/null
+++ b/apps/web/core/components/dropdowns/constants.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { TButtonVariants } from "./types";
+
+export const BORDER_BUTTON_VARIANTS: TButtonVariants[] = ["border-with-text", "border-without-text"];
+
+export const BACKGROUND_BUTTON_VARIANTS: TButtonVariants[] = ["background-with-text", "background-without-text"];
+
+export const TRANSPARENT_BUTTON_VARIANTS: TButtonVariants[] = ["transparent-with-text", "transparent-without-text"];
+
+export const BUTTON_VARIANTS_WITHOUT_TEXT: TButtonVariants[] = [
+  "border-without-text",
+  "background-without-text",
+  "transparent-without-text",
+];
+
+export const BUTTON_VARIANTS_WITH_TEXT: TButtonVariants[] = [
+  "border-with-text",
+  "background-with-text",
+  "transparent-with-text",
+];
diff --git a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
new file mode 100644
index 0000000..a34998f
--- /dev/null
+++ b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+// components
+import { Combobox } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// icon
+import { CycleGroupIcon } from "@plane/propel/icons";
+import { CyclesOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import type { TCycleGroups } from "@plane/types";
+// ui
+// store hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+
+type DropdownOptions =
+  | {
+      value: string | null;
+      query: string;
+      content: React.ReactNode;
+    }[]
+  | undefined;
+
+type CycleOptionsProps = {
+  projectId: string;
+  referenceElement: HTMLButtonElement | null;
+  placement: Placement | undefined;
+  isOpen: boolean;
+  canRemoveCycle: boolean;
+  currentCycleId?: string;
+};
+
+export const CycleOptions = observer(function CycleOptions(props: CycleOptionsProps) {
+  const { projectId, isOpen, referenceElement, placement, canRemoveCycle, currentCycleId } = props;
+  // i18n
+  const { t } = useTranslation();
+  //state hooks
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // store hooks
+  const { workspaceSlug } = useParams();
+  const { getProjectCycleIds, fetchAllCycles, getCycleById } = useCycle();
+  const { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen();
+      if (!isMobile) {
+        inputRef.current && inputRef.current.focus();
+      }
+    }
+  }, [isOpen, isMobile]);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const cycleIds = (getProjectCycleIds(projectId) ?? [])?.filter((cycleId) => {
+    const cycleDetails = getCycleById(cycleId);
+    if (currentCycleId && currentCycleId === cycleId) return false;
+    return cycleDetails?.status ? (cycleDetails?.status.toLowerCase() != "completed" ? true : false) : true;
+  });
+
+  const onOpen = () => {
+    if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug.toString(), projectId);
+  };
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options: DropdownOptions = cycleIds?.map((cycleId) => {
+    const cycleDetails = getCycleById(cycleId);
+    const cycleStatus = cycleDetails?.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+
+    return {
+      value: cycleId,
+      query: `${cycleDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
+          <span className="flex-grow truncate">{cycleDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  if (canRemoveCycle) {
+    options?.unshift({
+      value: null,
+      query: t("cycle.no_cycle"),
+      content: (
+        <div className="flex items-center gap-2">
+          <CyclesOutline className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{t("cycle.no_cycle")}</span>
+        </div>
+      ),
+    });
+  }
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <Combobox.Options as="ul" className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("common.search.label")}
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  as="li"
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                      active ? "bg-layer-transparent-hover" : ""
+                    } ${selected ? "text-primary" : "text-secondary"}`
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      <span className="flex-grow truncate">{option.content}</span>
+                      {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matches_found")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/cycle/index.tsx b/apps/web/core/components/dropdowns/cycle/index.tsx
new file mode 100644
index 0000000..9d0b90e
--- /dev/null
+++ b/apps/web/core/components/dropdowns/cycle/index.tsx
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { ChevronDownOutline, CyclesOutline } from "@makeplane/propel/icons";
+import { ComboDropDown } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useDropdown } from "@/hooks/use-dropdown";
+// local components and constants
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import type { TDropdownProps } from "../types";
+import { CycleOptions } from "./cycle-options";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  onChange: (val: string | null) => void;
+  onClose?: () => void;
+  projectId: string | undefined;
+  value: string | null;
+  canRemoveCycle?: boolean;
+  renderByDefault?: boolean;
+  currentCycleId?: string;
+};
+
+export const CycleDropdown = observer(function CycleDropdown(props: Props) {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
+    onChange,
+    onClose,
+    placeholder = "",
+    placement,
+    projectId,
+    showTooltip = false,
+    tabIndex,
+    value,
+    canRemoveCycle = true,
+    renderByDefault = true,
+    currentCycleId,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { getCycleNameById } = useCycle();
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+
+  const selectedName = value ? getCycleNameById(value) : null;
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onClose,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: string | null) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const comboButton = button ? (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn("clickable block h-full w-full outline-none hover:bg-layer-1", buttonContainerClassName)}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      {button}
+    </button>
+  ) : (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none hover:bg-layer-1",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={t("common.cycle")}
+        tooltipContent={selectedName ?? placeholder}
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {!hideIcon && <CyclesOutline className="h-3 w-3 flex-shrink-0" />}
+        {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
+          <span className="max-w-40 truncate">{selectedName ?? placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && projectId && (
+        <CycleOptions
+          isOpen={isOpen}
+          projectId={projectId}
+          placement={placement}
+          referenceElement={referenceElement}
+          canRemoveCycle={canRemoveCycle}
+          currentCycleId={currentCycleId}
+        />
+      )}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/date-range.tsx b/apps/web/core/components/dropdowns/date-range.tsx
new file mode 100644
index 0000000..87c842b
--- /dev/null
+++ b/apps/web/core/components/dropdowns/date-range.tsx
@@ -0,0 +1,303 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+import { ArrowNarrowRightOutline, CalendarOutline, CloseOutline, DueDateOutline } from "@makeplane/propel/icons";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// ui
+import type { DateRange, Matcher } from "@plane/propel/calendar";
+import { Calendar } from "@plane/propel/calendar";
+import { ComboDropDown } from "@plane/ui";
+import { cn, renderFormattedDate } from "@plane/utils";
+// helpers
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+import { useDropdown } from "@/hooks/use-dropdown";
+// components
+import { DropdownButton } from "./buttons";
+import { MergedDateDisplay } from "./merged-date";
+// types
+import type { TButtonVariants } from "./types";
+
+type Props = {
+  applyButtonText?: string;
+  bothRequired?: boolean;
+  buttonClassName?: string;
+  buttonContainerClassName?: string;
+  buttonFromDateClassName?: string;
+  buttonToDateClassName?: string;
+  buttonVariant: TButtonVariants;
+  cancelButtonText?: string;
+  className?: string;
+  clearIconClassName?: string;
+  disabled?: boolean;
+  hideIcon?: {
+    from?: boolean;
+    to?: boolean;
+  };
+  isClearable?: boolean;
+  mergeDates?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  onSelect?: (range: DateRange | undefined) => void;
+  placeholder?: {
+    from?: string;
+    to?: string;
+  };
+  placement?: Placement;
+  required?: boolean;
+  showTooltip?: boolean;
+  tabIndex?: number;
+  value: {
+    from: Date | undefined;
+    to: Date | undefined;
+  };
+  renderByDefault?: boolean;
+  renderPlaceholder?: boolean;
+  customTooltipContent?: string;
+  customTooltipHeading?: string;
+  defaultOpen?: boolean;
+  renderInPortal?: boolean;
+};
+
+export const DateRangeDropdown = observer(function DateRangeDropdown(props: Props) {
+  const { t } = useTranslation();
+  const {
+    buttonClassName,
+    buttonContainerClassName,
+    buttonFromDateClassName,
+    buttonToDateClassName,
+    buttonVariant,
+    className,
+    clearIconClassName = "",
+    disabled = false,
+    hideIcon = {
+      from: true,
+      to: true,
+    },
+    isClearable = false,
+    mergeDates,
+    minDate,
+    maxDate,
+    onSelect,
+    placeholder = {
+      from: t("project_cycles.add_date"),
+      to: t("project_cycles.add_date"),
+    },
+    placement,
+    showTooltip = false,
+    tabIndex,
+    value,
+    renderByDefault = true,
+    renderPlaceholder = true,
+    customTooltipContent,
+    customTooltipHeading,
+    defaultOpen = false,
+    renderInPortal = false,
+  } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [dateRange, setDateRange] = useState<DateRange>(value);
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const onOpen = () => {
+    if (referenceElement) referenceElement.focus();
+  };
+
+  const { handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onOpen,
+    setIsOpen,
+  });
+
+  const disabledDays: Matcher[] = [];
+  if (minDate) disabledDays.push({ before: minDate });
+  if (maxDate) disabledDays.push({ after: maxDate });
+
+  const clearDates = () => {
+    const clearedRange = { from: undefined, to: undefined };
+    setDateRange(clearedRange);
+    onSelect?.(clearedRange);
+  };
+
+  const hasDisplayedDates = dateRange.from || dateRange.to;
+
+  useEffect(() => {
+    setDateRange(value);
+  }, [value]);
+
+  const comboButton = (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={customTooltipHeading ?? t("project_cycles.date_range")}
+        tooltipContent={
+          customTooltipContent ??
+          `${dateRange.from ? renderFormattedDate(dateRange.from) : ""}${
+            dateRange.from && dateRange.to ? " - " : ""
+          }${dateRange.to ? renderFormattedDate(dateRange.to) : ""}`
+        }
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {mergeDates ? (
+          // Merged date display
+          <div className="flex w-full items-center gap-1.5">
+            {!hideIcon.from && <CalendarOutline className="h-3 w-3 flex-shrink-0" />}
+            {dateRange.from || dateRange.to ? (
+              <MergedDateDisplay
+                startDate={dateRange.from}
+                endDate={dateRange.to}
+                className="flex-grow truncate text-11"
+              />
+            ) : (
+              renderPlaceholder && (
+                <>
+                  <span className="text-placeholder">{placeholder.from}</span>
+                  {placeholder.from && placeholder.to && (
+                    <ArrowNarrowRightOutline className="h-3 w-3 flex-shrink-0 text-placeholder" />
+                  )}
+                  <span className="text-placeholder">{placeholder.to}</span>
+                </>
+              )
+            )}
+            {isClearable && !disabled && hasDisplayedDates && (
+              <CloseOutline
+                className={cn("h-2.5 w-2.5 flex-shrink-0 cursor-pointer", clearIconClassName)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  clearDates();
+                }}
+              />
+            )}
+          </div>
+        ) : (
+          // Original separate date display
+          <>
+            <span
+              className={cn(
+                "flex h-full flex-grow items-center justify-center gap-1 rounded-xs",
+                buttonFromDateClassName
+              )}
+            >
+              {!hideIcon.from && <CalendarOutline className="h-3 w-3 flex-shrink-0" />}
+              {dateRange.from ? renderFormattedDate(dateRange.from) : renderPlaceholder ? placeholder.from : ""}
+            </span>
+            <ArrowNarrowRightOutline className="h-3 w-3 flex-shrink-0" />
+            <span
+              className={cn(
+                "flex h-full flex-grow items-center justify-center gap-1 rounded-xs",
+                buttonToDateClassName
+              )}
+            >
+              {!hideIcon.to && <DueDateOutline className="h-3 w-3 flex-shrink-0" />}
+              {dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
+            </span>
+            {isClearable && !disabled && hasDisplayedDates && (
+              <CloseOutline
+                className={cn("ml-1 h-2.5 w-2.5 flex-shrink-0 cursor-pointer", clearIconClassName)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  clearDates();
+                }}
+              />
+            )}
+          </>
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  const comboOptions = (
+    <Combobox.Options as="ul" data-prevent-outside-click static>
+      <div
+        className="z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <Calendar
+          className="rounded-md border border-subtle p-3 text-12"
+          captionLayout="dropdown"
+          selected={dateRange}
+          onSelect={(val: DateRange | undefined) => {
+            onSelect?.(val);
+          }}
+          mode="range"
+          disabled={disabledDays}
+          showOutsideDays
+          fixedWeeks
+          weekStartsOn={startOfWeek}
+          initialFocus
+        />
+      </div>
+    </Combobox.Options>
+  );
+
+  const Options = renderInPortal ? createPortal(comboOptions, document.body) : comboOptions;
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full", className)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          if (!isOpen) handleKeyDown(e);
+        } else handleKeyDown(e);
+      }}
+      button={comboButton}
+      disabled={disabled}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && Options}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/date.tsx b/apps/web/core/components/dropdowns/date.tsx
new file mode 100644
index 0000000..2deffeb
--- /dev/null
+++ b/apps/web/core/components/dropdowns/date.tsx
@@ -0,0 +1,214 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+import { CalendarOutline, CloseOutline } from "@makeplane/propel/icons";
+import { Combobox } from "@headlessui/react";
+// ui
+import type { Matcher } from "@plane/propel/calendar";
+import { Calendar } from "@plane/propel/calendar";
+import { ComboDropDown } from "@plane/ui";
+import { cn, renderFormattedDate, getDate } from "@plane/utils";
+// helpers
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+import { useDropdown } from "@/hooks/use-dropdown";
+// components
+import { DropdownButton } from "./buttons";
+// constants
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
+// types
+import type { TDropdownProps } from "./types";
+
+type Props = TDropdownProps & {
+  clearIconClassName?: string;
+  defaultOpen?: boolean;
+  optionsClassName?: string;
+  icon?: React.ReactNode;
+  isClearable?: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  onChange: (val: Date | null) => void;
+  onClose?: () => void;
+  value: Date | string | null;
+  closeOnSelect?: boolean;
+  formatToken?: string;
+  renderByDefault?: boolean;
+  labelClassName?: string;
+};
+
+export const DateDropdown = observer(function DateDropdown(props: Props) {
+  const {
+    buttonClassName = "",
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    clearIconClassName = "",
+    defaultOpen = false,
+    optionsClassName = "",
+    closeOnSelect = true,
+    disabled = false,
+    hideIcon = false,
+    icon = <CalendarOutline className="h-3 w-3 flex-shrink-0" />,
+    isClearable = true,
+    minDate,
+    maxDate,
+    onChange,
+    onClose,
+    placeholder = "Date",
+    placement,
+    showTooltip = false,
+    tabIndex,
+    value,
+    formatToken,
+    renderByDefault = true,
+    labelClassName = "",
+  } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const isDateSelected = value && value.toString().trim() !== "";
+
+  const onOpen = () => {
+    if (referenceElement) referenceElement.focus();
+  };
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onClose,
+    onOpen,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: Date | null) => {
+    onChange(val);
+    if (closeOnSelect) {
+      handleClose();
+      referenceElement?.blur();
+    }
+  };
+
+  const disabledDays: Matcher[] = [];
+  if (minDate) disabledDays.push({ before: minDate });
+  if (maxDate) disabledDays.push({ after: maxDate });
+
+  const comboButton = (
+    <button
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      ref={setReferenceElement}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={placeholder}
+        tooltipContent={value ? renderFormattedDate(value, formatToken) : "None"}
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {!hideIcon && icon}
+        {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+          <span className={cn("flex-grow truncate text-left text-body-xs-medium", labelClassName)}>
+            {value ? renderFormattedDate(value, formatToken) : placeholder}
+          </span>
+        )}
+        {isClearable && !disabled && isDateSelected && (
+          <CloseOutline
+            className={cn("h-2.5 w-2.5 flex-shrink-0", clearIconClassName)}
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onChange(null);
+            }}
+          />
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full", className)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") {
+          if (!isOpen) handleKeyDown(e);
+        } else handleKeyDown(e);
+      }}
+      button={comboButton}
+      disabled={disabled}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen &&
+        createPortal(
+          <Combobox.Options as="ul" data-prevent-outside-click static>
+            <div
+              className={cn(
+                "z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200",
+                optionsClassName
+              )}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <Calendar
+                className="rounded-md border border-subtle p-3"
+                captionLayout="dropdown"
+                selected={getDate(value)}
+                defaultMonth={getDate(value)}
+                onSelect={(date: Date | undefined) => {
+                  dropdownOnChange(date ?? null);
+                }}
+                showOutsideDays
+                initialFocus
+                disabled={disabledDays}
+                mode="single"
+                fixedWeeks
+                weekStartsOn={startOfWeek}
+              />
+            </div>
+          </Combobox.Options>,
+          document.body
+        )}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/estimate.tsx b/apps/web/core/components/dropdowns/estimate.tsx
new file mode 100644
index 0000000..be37908
--- /dev/null
+++ b/apps/web/core/components/dropdowns/estimate.tsx
@@ -0,0 +1,299 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ChevronDownOutline, EstimateOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { EEstimateSystem } from "@plane/types";
+import { ComboDropDown } from "@plane/ui";
+import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useEstimate } from "@/hooks/store/estimates/use-estimate";
+import { useDropdown } from "@/hooks/use-dropdown";
+// components
+import { DropdownButton } from "./buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "./constants";
+// types
+import type { TDropdownProps } from "./types";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  onChange: (val: string | undefined) => void;
+  onClose?: () => void;
+  projectId: string | undefined;
+  value: string | undefined | null;
+  renderByDefault?: boolean;
+};
+
+type DropdownOptions =
+  | {
+      value: string | null;
+      query: string;
+      content: React.ReactNode;
+    }[]
+  | undefined;
+
+export const EstimateDropdown = observer(function EstimateDropdown(props: Props) {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
+    onChange,
+    onClose,
+    placeholder = "",
+    placement,
+    projectId,
+    showTooltip = false,
+    tabIndex,
+    value,
+    renderByDefault = true,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { currentActiveEstimateIdByProjectId, getProjectEstimates, getEstimateById } = useProjectEstimates();
+  const { estimatePointIds, estimatePointById } = useEstimate(
+    projectId ? currentActiveEstimateIdByProjectId(projectId) : undefined
+  );
+
+  const currentActiveEstimateId = projectId ? currentActiveEstimateIdByProjectId(projectId) : undefined;
+
+  const currentActiveEstimate = currentActiveEstimateId ? getEstimateById(currentActiveEstimateId) : undefined;
+
+  const options: DropdownOptions = (estimatePointIds ?? [])
+    ?.map((estimatePoint) => {
+      const currentEstimatePoint = estimatePointById(estimatePoint);
+      if (currentEstimatePoint)
+        return {
+          value: currentEstimatePoint.id,
+          query: `${currentEstimatePoint?.value}`,
+          content: (
+            <div className="flex items-center gap-2">
+              <EstimateOutline className="h-3 w-3 flex-shrink-0" />
+              <span className="flex-grow truncate">
+                {currentActiveEstimate?.type === EEstimateSystem.TIME
+                  ? convertMinutesToHoursMinutesString(Number(currentEstimatePoint.value))
+                  : currentEstimatePoint.value}
+              </span>
+            </div>
+          ),
+        };
+      else undefined;
+    })
+    .filter((estimatePointDropdownOption) => estimatePointDropdownOption != undefined) as DropdownOptions;
+  options?.unshift({
+    value: null,
+    query: t("project_settings.estimates.no_estimate"),
+    content: (
+      <div className="flex items-center gap-2">
+        <EstimateOutline className="h-3 w-3 flex-shrink-0" />
+        <span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
+      </div>
+    ),
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedEstimate = value && estimatePointById ? estimatePointById(value) : undefined;
+
+  const onOpen = async () => {
+    if (!currentActiveEstimateId && workspaceSlug && projectId)
+      await getProjectEstimates(workspaceSlug.toString(), projectId);
+  };
+
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    onOpen,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  const dropdownOnChange = (val: string | undefined) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const comboButton = button ? (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      {button}
+    </button>
+  ) : (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={t("project_settings.estimates.label")}
+        tooltipContent={selectedEstimate ? selectedEstimate?.value : placeholder}
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {!hideIcon && <EstimateOutline className="h-3 w-3 flex-shrink-0" />}
+        {(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+          <span className="truncate">
+            {selectedEstimate ? (
+              currentActiveEstimate?.type === EEstimateSystem.TIME ? (
+                convertMinutesToHoursMinutesString(Number(selectedEstimate.value))
+              ) : (
+                selectedEstimate.value
+              )
+            ) : (
+              <span className="text-placeholder">{placeholder}</span>
+            )}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full w-full", className)}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <Combobox.Options as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("common.search.placeholder")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {currentActiveEstimateId === undefined ? (
+                <div
+                  className={`flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`}
+                >
+                  {/* NOTE: This condition renders when estimates are not enabled for the project */}
+                  <div className="flex flex-grow items-center gap-2">
+                    <EstimateOutline className="h-3 w-3 flex-shrink-0" />
+                    <span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((option) => (
+                        <Combobox.Option as="li" key={option.value} value={option.value}>
+                          {({ active, selected }) => (
+                            <div
+                              className={cn(
+                                "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                                {
+                                  "bg-layer-transparent-hover": active,
+                                  "text-primary": selected,
+                                  "text-secondary": !selected,
+                                }
+                              )}
+                            >
+                              <span className="flex-grow truncate">{option.content}</span>
+                              {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                            </div>
+                          )}
+                        </Combobox.Option>
+                      ))
+                    ) : (
+                      <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matching_results")}</p>
+                    )
+                  ) : (
+                    <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/intake-state/base.tsx b/apps/web/core/components/dropdowns/intake-state/base.tsx
new file mode 100644
index 0000000..8f11176
--- /dev/null
+++ b/apps/web/core/components/dropdowns/intake-state/base.tsx
@@ -0,0 +1,259 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { IntakeStateGroupIcon } from "@plane/propel/icons";
+import { ChevronDownOutline, SearchOutline } from "@makeplane/propel/icons";
+import type { IIntakeState } from "@plane/types";
+import { ComboDropDown, Spinner } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { DropdownButton } from "@/components/dropdowns/buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "@/components/dropdowns/constants";
+import type { TDropdownProps } from "@/components/dropdowns/types";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// plane web imports
+import { StateOption } from "@/components/workflow";
+
+export type TWorkItemStateDropdownBaseProps = TDropdownProps & {
+  alwaysAllowStateChange?: boolean;
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  filterAvailableStateIds?: boolean;
+  getStateById: (stateId: string | null | undefined) => IIntakeState | undefined;
+  iconSize?: string;
+  isForWorkItemCreation?: boolean;
+  isInitializing?: boolean;
+  onChange: (val: string) => void;
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  projectId: string | undefined;
+  renderByDefault?: boolean;
+  showDefaultState?: boolean;
+  stateIds: string[];
+  value: string | undefined | null;
+};
+
+export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdownBase(
+  props: TWorkItemStateDropdownBaseProps
+) {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getStateById,
+    hideIcon = false,
+    iconSize = "size-4",
+    isInitializing = false,
+    onChange,
+    onClose,
+    onDropdownOpen,
+    placement,
+    renderByDefault = true,
+    showDefaultState = true,
+    showTooltip = false,
+    stateIds,
+    tabIndex,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // store hooks
+  const { t } = useTranslation();
+  const statesList = stateIds.map((stateId) => getStateById(stateId)).filter((state) => !!state);
+  const defaultState = statesList?.find((state) => state?.default) || statesList[0];
+  const stateValue = value ? value : showDefaultState ? defaultState?.id : undefined;
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // dropdown init
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    onOpen: onDropdownOpen,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  // derived values
+  const options = statesList?.map((state) => ({
+    value: state?.id,
+    query: `${state?.name}`,
+    content: (
+      <div className="flex items-center gap-2">
+        <IntakeStateGroupIcon
+          stateGroup={state?.group ?? "triage"}
+          color={state?.color}
+          className={cn("flex-shrink-0", iconSize)}
+        />
+        <span className="flex-grow truncate text-left">{state?.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedState = stateValue ? getStateById(stateValue) : undefined;
+
+  const dropdownOnChange = (val: string) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const comboButton = button ? (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      {button}
+    </button>
+  ) : (
+    <button
+      tabIndex={tabIndex}
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={t("state")}
+        tooltipContent={selectedState?.name ?? t("state")}
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {isInitializing ? (
+          <Spinner className="h-3.5 w-3.5" />
+        ) : (
+          <>
+            {!hideIcon && (
+              <IntakeStateGroupIcon
+                stateGroup={selectedState?.group ?? "triage"}
+                color={selectedState?.color ?? "var(--text-color-tertiary)"}
+                className={cn("flex-shrink-0", iconSize)}
+              />
+            )}
+            {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+              <span className="flex-grow truncate text-left">{selectedState?.name ?? t("state")}</span>
+            )}
+            {dropdownArrow && (
+              <ChevronDownOutline
+                className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)}
+                aria-hidden="true"
+              />
+            )}
+          </>
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    // oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      value={stateValue}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <Combobox.Options as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("common.search.label")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {filteredOptions ? (
+                filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <StateOption
+                      {...props}
+                      key={option.value}
+                      option={option}
+                      selectedValue={value}
+                      className="flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none"
+                    />
+                  ))
+                ) : (
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/intake-state/dropdown.tsx b/apps/web/core/components/dropdowns/intake-state/dropdown.tsx
new file mode 100644
index 0000000..a9220ee
--- /dev/null
+++ b/apps/web/core/components/dropdowns/intake-state/dropdown.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+// local imports
+import type { TWorkItemStateDropdownBaseProps } from "./base";
+import { WorkItemStateDropdownBase } from "./base";
+
+type TWorkItemStateDropdownProps = Omit<
+  TWorkItemStateDropdownBaseProps,
+  "stateIds" | "getStateById" | "onDropdownOpen" | "isInitializing"
+> & {
+  stateIds?: string[];
+};
+
+export const IntakeStateDropdown = observer(function IntakeStateDropdown(props: TWorkItemStateDropdownProps) {
+  const { projectId, stateIds: propsStateIds } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // states
+  const [stateLoader, setStateLoader] = useState(false);
+  // store hooks
+  const { fetchProjectIntakeState, getProjectIntakeStateIds, getIntakeStateById } = useProjectState();
+  // derived values
+  const stateIds = propsStateIds ?? getProjectIntakeStateIds(projectId);
+
+  // fetch states if not provided
+  const onDropdownOpen = async () => {
+    if ((stateIds === undefined || stateIds.length === 0) && workspaceSlug && projectId) {
+      setStateLoader(true);
+      await fetchProjectIntakeState(workspaceSlug.toString(), projectId);
+      setStateLoader(false);
+    }
+  };
+
+  return (
+    <WorkItemStateDropdownBase
+      {...props}
+      getStateById={getIntakeStateById}
+      isInitializing={stateLoader}
+      stateIds={stateIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});
diff --git a/apps/web/core/components/dropdowns/layout.tsx b/apps/web/core/components/dropdowns/layout.tsx
new file mode 100644
index 0000000..8695f2a
--- /dev/null
+++ b/apps/web/core/components/dropdowns/layout.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ISSUE_LAYOUT_MAP } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TickOutline } from "@makeplane/propel/icons";
+import { EIssueLayoutTypes } from "@plane/types";
+import { getButtonStyling } from "@plane/propel/button";
+import { Dropdown } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+
+type TLayoutDropDown = {
+  onChange: (value: EIssueLayoutTypes) => void;
+  value: EIssueLayoutTypes;
+  disabledLayouts?: EIssueLayoutTypes[];
+};
+
+export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDropDown) {
+  const { onChange, value = EIssueLayoutTypes.LIST, disabledLayouts = [] } = props;
+  // plane i18n
+  const { t } = useTranslation();
+  // derived values
+  const availableLayouts = useMemo(
+    () => Object.values(ISSUE_LAYOUT_MAP).filter((layout) => !disabledLayouts.includes(layout.key)),
+    [disabledLayouts]
+  );
+
+  const options = useMemo(
+    () =>
+      availableLayouts.map((issueLayout) => ({
+        data: issueLayout.key,
+        value: issueLayout.key,
+      })),
+    [availableLayouts]
+  );
+
+  const buttonContent = useCallback((isOpen: boolean, buttonValue: string | string[] | undefined) => {
+    const dropdownValue = ISSUE_LAYOUT_MAP[buttonValue as EIssueLayoutTypes];
+    return (
+      <div className="flex items-center gap-2 text-secondary">
+        <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-secondary`} />
+        <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
+      </div>
+    );
+  }, []);
+
+  const itemContent = useCallback((props: { value: string; selected: boolean }) => {
+    const dropdownValue = ISSUE_LAYOUT_MAP[props.value as EIssueLayoutTypes];
+
+    return (
+      <div className={cn("flex w-full items-center justify-between gap-2 text-secondary")}>
+        <div className="flex items-center gap-2">
+          <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-secondary`} />
+          <span className="text-11 font-medium">{t(dropdownValue.i18n_label)}</span>
+        </div>
+        {props.selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+      </div>
+    );
+  }, []);
+
+  const keyExtractor = useCallback((option: any) => option.value, []);
+
+  return (
+    <Dropdown
+      onChange={onChange as (value: string) => void}
+      value={value?.toString()}
+      keyExtractor={keyExtractor}
+      options={options}
+      buttonContainerClassName={cn(getButtonStyling("secondary", "lg"))}
+      buttonContent={buttonContent}
+      renderItem={itemContent}
+      disableSearch
+    />
+  );
+});
diff --git a/apps/web/core/components/dropdowns/member/avatar.tsx b/apps/web/core/components/dropdowns/member/avatar.tsx
new file mode 100644
index 0000000..4b01869
--- /dev/null
+++ b/apps/web/core/components/dropdowns/member/avatar.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { ComponentType, SVGProps } from "react";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import type { AvatarGroupSize } from "@makeplane/propel/components/avatar-group";
+import { MembersOutline } from "@makeplane/propel/icons";
+import { cn, getFileURL } from "@plane/utils";
+// plane utils
+// helpers
+// hooks
+import { AvatarGroupOverflow } from "@/components/common/avatar-group-overflow";
+import { useMember } from "@/hooks/store/use-member";
+
+type AvatarProps = {
+  showTooltip: boolean;
+  userIds: string | string[] | null;
+  icon?: ComponentType<SVGProps<SVGSVGElement>>;
+  size?: AvatarGroupSize;
+};
+
+export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps) {
+  const { userIds, icon: Icon, size = "xs" } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  if (Array.isArray(userIds)) {
+    if (userIds.length > 0)
+      return (
+        <AvatarGroupOverflow size={size}>
+          {userIds.map((userId) => {
+            const userDetails = getUserDetails(userId);
+
+            if (!userDetails) return;
+            return (
+              <Avatar
+                key={userId}
+                src={getFileURL(userDetails.avatar_url)}
+                alt={userDetails.display_name}
+                fallback={userDetails.display_name?.[0]?.toUpperCase()}
+              />
+            );
+          })}
+        </AvatarGroupOverflow>
+      );
+  } else {
+    if (userIds) {
+      const userDetails = getUserDetails(userIds);
+      return (
+        <Avatar
+          src={getFileURL(userDetails?.avatar_url ?? "")}
+          alt={userDetails?.display_name}
+          fallback={userDetails?.display_name?.[0]?.toUpperCase()}
+          size={size}
+        />
+      );
+    }
+  }
+
+  return Icon ? (
+    <Icon className="h-3 w-3 flex-shrink-0" />
+  ) : (
+    <MembersOutline className={cn("mx-[4px] h-3 w-3 flex-shrink-0")} />
+  );
+});
diff --git a/apps/web/core/components/dropdowns/member/base.tsx b/apps/web/core/components/dropdowns/member/base.tsx
new file mode 100644
index 0000000..7a8e9d7
--- /dev/null
+++ b/apps/web/core/components/dropdowns/member/base.tsx
@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import type { ComponentType, SVGProps } from "react";
+import { useTranslation } from "@plane/i18n";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { IUserLite } from "@plane/types";
+import { ComboDropDown } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// local imports
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import { ButtonAvatars } from "./avatar";
+import { MemberOptions } from "./member-options";
+import type { MemberDropdownProps } from "./types";
+
+type TMemberDropdownBaseProps = {
+  getUserDetails: (userId: string) => IUserLite | undefined;
+  icon?: ComponentType<SVGProps<SVGSVGElement>>;
+  memberIds?: string[];
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  optionsClassName?: string;
+  renderByDefault?: boolean;
+} & MemberDropdownProps;
+
+export const MemberDropdownBase = observer(function MemberDropdownBase(props: TMemberDropdownBaseProps) {
+  const { t } = useTranslation();
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getUserDetails,
+    hideIcon = false,
+    icon,
+    memberIds,
+    multiple,
+    onChange,
+    onClose,
+    onDropdownOpen,
+    optionsClassName = "",
+    placeholder = t("members"),
+    placement,
+    renderByDefault = true,
+    showTooltip = false,
+    showUserDetails = false,
+    tabIndex,
+    tooltipContent,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const comboboxProps = {
+    value,
+    onChange,
+    disabled,
+    multiple,
+  };
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onClose,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: string & string[]) => {
+    onChange(val);
+    if (!multiple) handleClose();
+  };
+
+  const getDisplayName = (value: string | string[] | null, showUserDetails: boolean, placeholder: string = "") => {
+    if (Array.isArray(value)) {
+      if (value.length > 0) {
+        if (value.length === 1) {
+          return getUserDetails(value[0])?.display_name || placeholder;
+        } else {
+          return showUserDetails ? `${value.length} ${t("members").toLocaleLowerCase()}` : "";
+        }
+      } else {
+        return placeholder;
+      }
+    } else {
+      if (showUserDetails && value) {
+        return getUserDetails(value)?.display_name || placeholder;
+      } else {
+        return placeholder;
+      }
+    }
+  };
+
+  const comboButton = button ? (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      {button}
+    </button>
+  ) : (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      <DropdownButton
+        className={cn("text-11", buttonClassName)}
+        isActive={isOpen}
+        tooltipHeading={placeholder}
+        tooltipContent={
+          tooltipContent ?? `${value?.length ?? 0} ${value?.length !== 1 ? t("assignees") : t("assignee")}`
+        }
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
+        {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+          <span className="flex-grow truncate text-left text-body-xs-medium leading-5">
+            {getDisplayName(value, showUserDetails, placeholder)}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      {...comboboxProps}
+      className={cn("h-full", className)}
+      onChange={dropdownOnChange}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <MemberOptions
+          getUserDetails={getUserDetails}
+          isOpen={isOpen}
+          memberIds={memberIds}
+          onDropdownOpen={onDropdownOpen}
+          optionsClassName={optionsClassName}
+          placement={placement}
+          referenceElement={referenceElement}
+          value={value}
+        />
+      )}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/member/dropdown.tsx b/apps/web/core/components/dropdowns/member/dropdown.tsx
new file mode 100644
index 0000000..78c6dd6
--- /dev/null
+++ b/apps/web/core/components/dropdowns/member/dropdown.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import type { ComponentType, SVGProps } from "react";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// local imports
+import { MemberDropdownBase } from "./base";
+import type { MemberDropdownProps } from "./types";
+
+type TMemberDropdownProps = {
+  icon?: ComponentType<SVGProps<SVGSVGElement>>;
+  memberIds?: string[];
+  onClose?: () => void;
+  optionsClassName?: string;
+  projectId?: string;
+  renderByDefault?: boolean;
+} & MemberDropdownProps;
+
+export const MemberDropdown = observer(function MemberDropdown(props: TMemberDropdownProps) {
+  const { memberIds: propsMemberIds, projectId } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const {
+    getUserDetails,
+    project: { getProjectMemberIds, fetchProjectMembers },
+    workspace: { workspaceMemberIds },
+  } = useMember();
+
+  const memberIds = propsMemberIds
+    ? propsMemberIds
+    : projectId
+      ? getProjectMemberIds(projectId, false)
+      : workspaceMemberIds;
+
+  const onDropdownOpen = () => {
+    if (!memberIds && projectId && workspaceSlug) fetchProjectMembers(workspaceSlug.toString(), projectId);
+  };
+
+  return (
+    <MemberDropdownBase
+      {...props}
+      getUserDetails={getUserDetails}
+      memberIds={memberIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});
diff --git a/apps/web/core/components/dropdowns/member/member-options.tsx b/apps/web/core/components/dropdowns/member/member-options.tsx
new file mode 100644
index 0000000..987aac8
--- /dev/null
+++ b/apps/web/core/components/dropdowns/member/member-options.tsx
@@ -0,0 +1,206 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { useTranslation } from "@plane/i18n";
+import { DeactivatedUserOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { EPillSize, EPillVariant, Pill } from "@plane/propel/pill";
+import type { IUserLite } from "@plane/types";
+import { cn, getFileURL, sortByCurrentUserThenSelected } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+interface Props {
+  className?: string;
+  getUserDetails: (userId: string) => IUserLite | undefined;
+  isOpen: boolean;
+  memberIds?: string[];
+  onDropdownOpen?: () => void;
+  optionsClassName?: string;
+  placement: Placement | undefined;
+  referenceElement: HTMLButtonElement | null;
+  value?: string[] | string | null;
+}
+
+export const MemberOptions = observer(function MemberOptions(props: Props) {
+  const {
+    getUserDetails,
+    isOpen,
+    memberIds,
+    onDropdownOpen,
+    optionsClassName = "",
+    placement,
+    referenceElement,
+    value,
+  } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // refs
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    workspace: { isUserSuspended },
+  } = useMember();
+  const { isMobile } = usePlatformOS();
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      onDropdownOpen?.();
+      if (!isMobile) {
+        inputRef.current && inputRef.current.focus();
+      }
+    }
+  }, [isOpen, isMobile]);
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options = memberIds
+    ?.map((userId) => {
+      const userDetails = getUserDetails(userId);
+      return {
+        value: userId,
+        query: `${userDetails?.display_name} ${userDetails?.first_name} ${userDetails?.last_name}`,
+        content: (
+          <div className="flex items-center gap-2">
+            <div className="w-4">
+              {isUserSuspended(userId, workspaceSlug?.toString()) ? (
+                <DeactivatedUserOutline className="h-3.5 w-3.5 text-placeholder" />
+              ) : (
+                <Avatar
+                  alt={userDetails?.display_name}
+                  fallback={userDetails?.display_name?.[0]?.toUpperCase()}
+                  src={getFileURL(userDetails?.avatar_url ?? "")}
+                  size="xs"
+                />
+              )}
+            </div>
+            <span
+              className={cn(
+                "flex-grow truncate",
+                isUserSuspended(userId, workspaceSlug?.toString()) ? "text-placeholder" : ""
+              )}
+            >
+              {currentUser?.id === userId ? t("you") : userDetails?.display_name}
+            </span>
+          </div>
+        ),
+      };
+    })
+    .filter((o) => !!o);
+
+  const filteredOptions = sortByCurrentUserThenSelected(
+    query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase())),
+    value,
+    currentUser?.id
+  );
+
+  return createPortal(
+    <Combobox.Options as="ul" data-prevent-outside-click static>
+      <div
+        className={cn(
+          "z-30 my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none",
+          optionsClassName
+        )}
+        ref={setPopperElement}
+        style={{
+          ...styles.popper,
+        }}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("search")}
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map(
+                (option) =>
+                  option && (
+                    <Combobox.Option
+                      as="li"
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        cn(
+                          "flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                          active && "bg-layer-transparent-hover",
+                          selected ? "text-primary" : "text-secondary",
+                          isUserSuspended(option.value, workspaceSlug?.toString())
+                            ? "cursor-not-allowed"
+                            : "cursor-pointer"
+                        )
+                      }
+                      disabled={isUserSuspended(option.value, workspaceSlug?.toString())}
+                    >
+                      {({ selected }) => (
+                        <>
+                          <span className="flex-grow truncate">{option.content}</span>
+                          {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                          {isUserSuspended(option.value, workspaceSlug?.toString()) && (
+                            <Pill variant={EPillVariant.DEFAULT} size={EPillSize.XS} className="border-none">
+                              Suspended
+                            </Pill>
+                          )}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  )
+              )
+            ) : (
+              <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>,
+    document.body
+  );
+});
diff --git a/apps/web/core/components/dropdowns/member/types.d.ts b/apps/web/core/components/dropdowns/member/types.d.ts
new file mode 100644
index 0000000..9261830
--- /dev/null
+++ b/apps/web/core/components/dropdowns/member/types.d.ts
@@ -0,0 +1,22 @@
+import type { TDropdownProps } from "../types";
+
+export type MemberDropdownProps = TDropdownProps & {
+  button?: React.ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  placeholder?: string;
+  tooltipContent?: string;
+  onClose?: () => void;
+  showUserDetails?: boolean;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string | null) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[];
+      }
+  );
diff --git a/apps/web/core/components/dropdowns/merged-date.tsx b/apps/web/core/components/dropdowns/merged-date.tsx
new file mode 100644
index 0000000..62966e5
--- /dev/null
+++ b/apps/web/core/components/dropdowns/merged-date.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// helpers
+import { formatDateRange, getDate } from "@plane/utils";
+
+type Props = {
+  startDate: Date | string | null | undefined;
+  endDate: Date | string | null | undefined;
+  className?: string;
+};
+
+/**
+ * Formats merged date range display with smart formatting
+ * - Single date: "Jan 24, 2025"
+ * - Same year, same month: "Jan 24 - 28, 2025"
+ * - Same year, different month: "Jan 24 - Feb 6, 2025"
+ * - Different year: "Dec 28, 2024 - Jan 4, 2025"
+ */
+export const MergedDateDisplay = observer(function MergedDateDisplay(props: Props) {
+  const { startDate, endDate, className = "" } = props;
+
+  // Parse dates
+  const parsedStartDate = getDate(startDate);
+  const parsedEndDate = getDate(endDate);
+
+  const displayText = formatDateRange(parsedStartDate, parsedEndDate);
+
+  if (!displayText) {
+    return null;
+  }
+
+  return <span className={className}>{displayText}</span>;
+});
diff --git a/apps/web/core/components/dropdowns/module/base.tsx b/apps/web/core/components/dropdowns/module/base.tsx
new file mode 100644
index 0000000..19e0e64
--- /dev/null
+++ b/apps/web/core/components/dropdowns/module/base.tsx
@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { IModule } from "@plane/types";
+import { ComboDropDown } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
+import type { TDropdownProps } from "../types";
+import { ModuleButtonContent } from "./button-content";
+import { ModuleOptions } from "./module-options";
+
+type TModuleDropdownBaseProps = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  getModuleById: (moduleId: string) => IModule | null;
+  itemClassName?: string;
+  moduleIds?: string[];
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  projectId: string | undefined;
+  renderByDefault?: boolean;
+  showCount?: boolean;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string | null) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[] | null;
+      }
+  );
+
+export const ModuleDropdownBase = observer(function ModuleDropdownBase(props: TModuleDropdownBaseProps) {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getModuleById,
+    hideIcon = false,
+    itemClassName = "",
+    moduleIds,
+    multiple,
+    onChange,
+    onClose,
+    placeholder = "",
+    placement,
+    projectId,
+    renderByDefault = true,
+    showCount = false,
+    showTooltip = false,
+    tabIndex,
+    value,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  // store hooks
+  const { isMobile } = usePlatformOS();
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: string & string[]) => {
+    onChange(val);
+    if (!multiple) handleClose();
+  };
+
+  const comboboxProps = {
+    value,
+    onChange: dropdownOnChange,
+    disabled,
+    multiple,
+  };
+
+  useEffect(() => {
+    if (isOpen && inputRef.current && !isMobile) {
+      inputRef.current.focus();
+    }
+  }, [isOpen, isMobile]);
+
+  const comboButton = button ? (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn("clickable block h-full w-full outline-none hover:bg-layer-1", buttonContainerClassName)}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      {button}
+    </button>
+  ) : (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none hover:bg-layer-1",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={t("common.module")}
+        tooltipContent={
+          Array.isArray(value)
+            ? `${value
+                .map((moduleId) => getModuleById(moduleId)?.name)
+                .toString()
+                .replaceAll(",", ", ")}`
+            : ""
+        }
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        <ModuleButtonContent
+          disabled={disabled}
+          dropdownArrow={dropdownArrow}
+          dropdownArrowClassName={dropdownArrowClassName}
+          hideIcon={hideIcon}
+          hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
+          placeholder={placeholder}
+          showCount={showCount}
+          showTooltip={showTooltip}
+          value={value}
+          onChange={onChange as any}
+          className={itemClassName}
+        />
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+      {...comboboxProps}
+    >
+      {isOpen && projectId && (
+        <ModuleOptions
+          isOpen={isOpen}
+          placement={placement}
+          referenceElement={referenceElement}
+          multiple={multiple}
+          getModuleById={getModuleById}
+          moduleIds={moduleIds}
+          value={value}
+        />
+      )}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/module/button-content.tsx b/apps/web/core/components/dropdowns/module/button-content.tsx
new file mode 100644
index 0000000..15e7ab9
--- /dev/null
+++ b/apps/web/core/components/dropdowns/module/button-content.tsx
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ChevronDownOutline, CloseOutline, ModuleOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type ModuleButtonContentProps = {
+  disabled: boolean;
+  dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon: boolean;
+  hideText: boolean;
+  onChange: (moduleIds: string[]) => void;
+  placeholder?: string;
+  showCount: boolean;
+  showTooltip?: boolean;
+  value: string | string[] | null;
+  className?: string;
+};
+
+export function ModuleButtonContent(props: ModuleButtonContentProps) {
+  const {
+    disabled,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon,
+    hideText,
+    onChange,
+    placeholder,
+    showCount,
+    showTooltip = false,
+    value,
+    className,
+  } = props;
+  // store hooks
+  const { getModuleById } = useModule();
+  const { isMobile } = usePlatformOS();
+
+  if (Array.isArray(value))
+    return (
+      <>
+        {showCount ? (
+          <div className="relative flex max-w-full items-center gap-1">
+            {!hideIcon && <ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+            {(value.length > 0 || !!placeholder) && (
+              <div className="max-w-40 truncate">
+                {value.length > 0
+                  ? value.length === 1
+                    ? `${getModuleById(value[0])?.name || "module"}`
+                    : `${value.length} Module${value.length === 1 ? "" : "s"}`
+                  : placeholder}
+              </div>
+            )}
+          </div>
+        ) : value.length > 0 ? (
+          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5">
+            {value.map((moduleId) => {
+              const moduleDetails = getModuleById(moduleId);
+              return (
+                <div
+                  key={moduleId}
+                  className={cn(
+                    "flex max-w-full items-center gap-1 rounded-sm bg-layer-1 py-1 text-secondary",
+                    className
+                  )}
+                >
+                  {!hideIcon && <ModuleOutline className="h-2.5 w-2.5 flex-shrink-0" />}
+                  {!hideText && (
+                    <Tooltip
+                      label={`Title: ${moduleDetails?.name ?? ""}`}
+                      layout="stacked"
+                      disabled={!showTooltip || isMobile}
+                    >
+                      <span className="max-w-40 truncate text-11 font-medium">{moduleDetails?.name}</span>
+                    </Tooltip>
+                  )}
+                  {!disabled && (
+                    <Tooltip label="Remove" disabled={!showTooltip || isMobile}>
+                      <button
+                        type="button"
+                        className="flex-shrink-0"
+                        onClick={() => {
+                          const newModuleIds = value.filter((m) => m !== moduleId);
+                          onChange(newModuleIds);
+                        }}
+                      >
+                        <CloseOutline className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
+                      </button>
+                    </Tooltip>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <>
+            {!hideIcon && <ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+            <span className="flex-grow truncate text-left">{placeholder}</span>
+          </>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </>
+    );
+  else
+    return (
+      <>
+        {!hideIcon && <ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && (
+          <span className="flex-grow truncate text-left">{value ? getModuleById(value)?.name : placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </>
+    );
+}
diff --git a/apps/web/core/components/dropdowns/module/dropdown.tsx b/apps/web/core/components/dropdowns/module/dropdown.tsx
new file mode 100644
index 0000000..5a8f948
--- /dev/null
+++ b/apps/web/core/components/dropdowns/module/dropdown.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+// types
+import type { TDropdownProps } from "../types";
+// local imports
+import { ModuleDropdownBase } from "./base";
+
+type TModuleDropdownProps = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  projectId: string | undefined;
+  showCount?: boolean;
+  onClose?: () => void;
+  renderByDefault?: boolean;
+  itemClassName?: string;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string | null) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[] | null;
+      }
+  );
+
+export const ModuleDropdown = observer(function ModuleDropdown(props: TModuleDropdownProps) {
+  const { projectId } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById, getProjectModuleIds, fetchModules } = useModule();
+  // derived values
+  const moduleIds = projectId ? getProjectModuleIds(projectId) : [];
+
+  const onDropdownOpen = () => {
+    if (!moduleIds && projectId && workspaceSlug) fetchModules(workspaceSlug.toString(), projectId);
+  };
+
+  return (
+    <ModuleDropdownBase
+      {...props}
+      getModuleById={getModuleById}
+      moduleIds={moduleIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});
diff --git a/apps/web/core/components/dropdowns/module/module-options.tsx b/apps/web/core/components/dropdowns/module/module-options.tsx
new file mode 100644
index 0000000..2902543
--- /dev/null
+++ b/apps/web/core/components/dropdowns/module/module-options.tsx
@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ModuleOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import type { IModule } from "@plane/types";
+import { cn, sortBySelectedFirst } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type DropdownOptions =
+  | {
+      value: string | null;
+      query: string;
+      content: React.ReactNode;
+    }[]
+  | undefined;
+
+interface Props {
+  getModuleById: (moduleId: string) => IModule | null;
+  isOpen: boolean;
+  moduleIds?: string[];
+  multiple: boolean;
+  onDropdownOpen?: () => void;
+  placement: Placement | undefined;
+  referenceElement: HTMLButtonElement | null;
+  value?: string[] | string | null;
+}
+
+export const ModuleOptions = observer(function ModuleOptions(props: Props) {
+  const { getModuleById, isOpen, moduleIds, multiple, onDropdownOpen, placement, referenceElement, value } = props;
+  // refs
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen();
+      if (!isMobile) {
+        inputRef.current && inputRef.current.focus();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, isMobile]);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const onOpen = () => {
+    onDropdownOpen?.();
+  };
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options: DropdownOptions = moduleIds?.map((moduleId) => {
+    const moduleDetails = getModuleById(moduleId);
+    return {
+      value: moduleId,
+      query: `${moduleDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <ModuleOutline className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{moduleDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+  if (!multiple)
+    options?.unshift({
+      value: null,
+      query: t("module.no_module"),
+      content: (
+        <div className="flex items-center gap-2">
+          <ModuleOutline className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{t("module.no_module")}</span>
+        </div>
+      ),
+    });
+
+  const filteredOptions = sortBySelectedFirst(
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase())),
+    value
+  );
+
+  return (
+    <Combobox.Options as="ul" className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("common.search.label")}
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <Combobox.Option
+                  as="li"
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    cn(
+                      "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                      {
+                        "bg-layer-transparent-hover": active,
+                        "text-primary": selected,
+                        "text-secondary": !selected,
+                      }
+                    )
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      <span className="flex-grow truncate">{option.content}</span>
+                      {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matching_results")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
new file mode 100644
index 0000000..28c252a
--- /dev/null
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -0,0 +1,500 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { usePopper } from "react-popper";
+import { SignalHigh } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// types
+import { PriorityIcon } from "@plane/propel/icons";
+import { ChevronDownOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TIssuePriorities } from "@plane/types";
+// ui
+import { ComboDropDown } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// constants
+import { BACKGROUND_BUTTON_VARIANTS, BORDER_BUTTON_VARIANTS, BUTTON_VARIANTS_WITHOUT_TEXT } from "./constants";
+// types
+import type { TDropdownProps } from "./types";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  highlightUrgent?: boolean;
+  onChange: (val: TIssuePriorities) => void;
+  onClose?: () => void;
+  value: TIssuePriorities | undefined | null;
+  renderByDefault?: boolean;
+};
+
+type ButtonProps = {
+  className?: string;
+  dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon?: boolean;
+  hideText?: boolean;
+  isActive?: boolean;
+  highlightUrgent: boolean;
+  placeholder: string;
+  priority: TIssuePriorities | undefined;
+  showTooltip: boolean;
+  renderToolTipByDefault?: boolean;
+};
+
+function BorderButton(props: ButtonProps) {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const priorityClasses = {
+    urgent: "bg-layer-2 border-priority-urgent px-1",
+    high: "bg-layer-2 border-priority-high",
+    medium: "bg-layer-2 border-priority-medium",
+    low: "bg-layer-2 border-priority-low",
+    none: "bg-layer-2 border-strong",
+  };
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      label={`${t("priority")}: ${priorityDetails?.title ?? t("common.none")}`}
+      disabled={!showTooltip || isMobile}
+    >
+      <div
+        className={cn(
+          "flex h-full items-center gap-1.5 rounded-sm border-[0.5px] px-2 py-0.5",
+          priorityClasses[priority ?? "none"],
+          {
+            // compact the icons if text is hidden
+            "px-0.5": hideText,
+            // highlight the whole button if text is hidden and priority is urgent
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "rounded-sm border border-priority-urgent p-0.5": priority === "urgent" && !hideText && highlightUrgent,
+              })}
+            >
+              <PriorityIcon
+                priority={priority}
+                size={12}
+                className={cn("flex-shrink-0", {
+                  // increase the icon size if text is hidden
+                  "h-3.5 w-3.5": hideText,
+                  // centre align the icons if text is hidden
+                  "translate-x-[0.0625rem]": hideText && priority === "high",
+                  "translate-x-0.5": hideText && priority === "medium",
+                  "translate-x-1": hideText && priority === "low",
+                  // highlight the icon if priority is urgent
+                })}
+              />
+            </div>
+          ) : (
+            <SignalHigh className="size-3" />
+          ))}
+        {!hideText && (
+          <span
+            className={cn("flex-grow truncate text-body-xs-medium", {
+              "text-secondary": priority && priority !== "none",
+              "text-placeholder": !priority || priority === "none",
+            })}
+          >
+            {priorityDetails?.title ?? placeholder}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+}
+
+function BackgroundButton(props: ButtonProps) {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const priorityClasses = {
+    urgent: "bg-layer-2",
+    high: "bg-layer-2",
+    medium: "bg-layer-2",
+    low: "bg-layer-2",
+    none: "bg-layer-2",
+  };
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={`${t("priority")}: ${t(priorityDetails?.key ?? "none")}`} disabled={!showTooltip || isMobile}>
+      <div
+        className={cn(
+          "flex h-full items-center gap-1.5 rounded-sm px-2 py-0.5",
+          priorityClasses[priority ?? "none"],
+          {
+            // compact the icons if text is hidden
+            "px-0.5": hideText,
+            // highlight the whole button if text is hidden and priority is urgent
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "rounded-sm border border-priority-urgent p-0.5": priority === "urgent" && !hideText && highlightUrgent,
+              })}
+            >
+              <PriorityIcon
+                priority={priority}
+                size={12}
+                className={cn("flex-shrink-0", {
+                  // increase the icon size if text is hidden
+                  "h-3.5 w-3.5": hideText,
+                  // centre align the icons if text is hidden
+                  "translate-x-[0.0625rem]": hideText && priority === "high",
+                  "translate-x-0.5": hideText && priority === "medium",
+                  "translate-x-1": hideText && priority === "low",
+                  // highlight the icon if priority is urgent
+                })}
+              />
+            </div>
+          ) : (
+            <SignalHigh className="size-3" />
+          ))}
+        {!hideText && (
+          <span
+            className={cn("flex-grow truncate text-body-xs-medium", {
+              "text-secondary": priority && priority !== "none",
+              "text-placeholder": !priority || priority === "none",
+            })}
+          >
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+}
+
+function TransparentButton(props: ButtonProps) {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    isActive = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      label={`${t("priority")}: ${priorityDetails?.title ?? t("common.none")}`}
+      disabled={!showTooltip || isMobile}
+    >
+      <div
+        className={cn(
+          "flex h-full w-full items-center gap-1.5 rounded-sm px-2 hover:bg-layer-transparent-hover",
+          {
+            // compact the icons if text is hidden
+            "px-0.5": hideText,
+            // highlight the whole button if text is hidden and priority is urgent
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
+            "bg-layer-1": isActive,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "rounded-sm border border-priority-urgent p-0.5": priority === "urgent" && !hideText && highlightUrgent,
+              })}
+            >
+              <PriorityIcon
+                priority={priority}
+                size={12}
+                className={cn("flex-shrink-0", {
+                  // increase the icon size if text is hidden
+                  "h-3.5 w-3.5": hideText,
+                  // centre align the icons if text is hidden
+                  "translate-x-[0.0625rem]": hideText && priority === "high",
+                  "translate-x-0.5": hideText && priority === "medium",
+                  "translate-x-1": hideText && priority === "low",
+                  // highlight the icon if priority is urgent
+                })}
+              />
+            </div>
+          ) : (
+            <SignalHigh className="size-3" />
+          ))}
+        {!hideText && (
+          <span
+            className={cn("flex-grow truncate text-body-xs-medium", {
+              "text-secondary": priority && priority !== "none",
+              "text-placeholder": !priority || priority === "none",
+            })}
+          >
+            {priorityDetails?.title ?? t("common.priority") ?? placeholder}
+          </span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </div>
+    </Tooltip>
+  );
+}
+
+export function PriorityDropdown(props: Props) {
+  //hooks
+  const { t } = useTranslation();
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
+    highlightUrgent = true,
+    onChange,
+    onClose,
+    placeholder = t("common.priority"),
+    placement,
+    showTooltip = false,
+    tabIndex,
+    value = "none",
+    renderByDefault = true,
+  } = props;
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const options = ISSUE_PRIORITIES.map((priority) => ({
+    value: priority.key,
+    query: priority.key,
+    content: (
+      <div className="flex items-center gap-2">
+        <PriorityIcon priority={priority.key} size={14} withContainer />
+        <span className="flex-grow truncate">{priority.title}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  const dropdownOnChange = (val: TIssuePriorities) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  const ButtonToRender = BORDER_BUTTON_VARIANTS.includes(buttonVariant)
+    ? BorderButton
+    : BACKGROUND_BUTTON_VARIANTS.includes(buttonVariant)
+      ? BackgroundButton
+      : TransparentButton;
+
+  const comboButton = button ? (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      {button}
+    </button>
+  ) : (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      <ButtonToRender
+        priority={value ?? undefined}
+        className={buttonClassName}
+        highlightUrgent={highlightUrgent}
+        dropdownArrow={dropdownArrow && !disabled}
+        dropdownArrowClassName={dropdownArrowClassName}
+        hideIcon={hideIcon}
+        placeholder={placeholder}
+        showTooltip={showTooltip}
+        hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
+        renderToolTipByDefault={renderByDefault}
+      />
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn(
+        "h-full",
+        {
+          "bg-layer-1": isOpen,
+        },
+        className
+      )}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <Combobox.Options as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("search")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    as="li"
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      cn(
+                        `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                          active ? "bg-layer-transparent-hover" : ""
+                        } ${selected ? "text-primary" : "text-secondary"}`
+                      )
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        <span className="flex-grow truncate">{option.content}</span>
+                        {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+}
diff --git a/apps/web/core/components/dropdowns/project/base.tsx b/apps/web/core/components/dropdowns/project/base.tsx
new file mode 100644
index 0000000..064b192
--- /dev/null
+++ b/apps/web/core/components/dropdowns/project/base.tsx
@@ -0,0 +1,294 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { ChevronDownOutline, ProjectsOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { ComboDropDown } from "@plane/ui";
+import { cn, sortBySelectedFirst } from "@plane/utils";
+// components
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// plane web imports
+import type { TProject } from "@plane/types";
+// local imports
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import type { TDropdownProps } from "../types";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  currentProjectId?: string;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  getProjectById: (projectId: string | null | undefined) => Partial<TProject> | undefined;
+  onClose?: () => void;
+  projectIds: string[];
+  renderByDefault?: boolean;
+  renderCondition?: (projectId: string) => boolean;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[];
+      }
+  );
+
+export const ProjectDropdownBase = observer(function ProjectDropdownBase(props: Props) {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    currentProjectId,
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getProjectById,
+    hideIcon = false,
+    multiple,
+    onChange,
+    onClose,
+    placeholder = "Project",
+    placement,
+    projectIds,
+    renderByDefault = true,
+    renderCondition,
+    showTooltip = false,
+    tabIndex,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // store hooks
+  const options = projectIds?.map((projectId) => {
+    const projectDetails = getProjectById(projectId);
+    if (renderCondition && !renderCondition(projectId)) return;
+    return {
+      value: projectId,
+      query: `${projectDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          {projectDetails?.logo_props && (
+            <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
+              <Logo logo={projectDetails?.logo_props} size={12} />
+            </span>
+          )}
+          <span className="flex-grow truncate">{projectDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  const filteredOptions = sortBySelectedFirst(
+    (query === ""
+      ? options?.filter((o) => o?.value !== currentProjectId)
+      : options?.filter((o) => o?.value !== currentProjectId && o?.query.toLowerCase().includes(query.toLowerCase()))
+    )?.filter((o): o is NonNullable<typeof o> => o !== undefined),
+    value
+  );
+
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  const dropdownOnChange = (val: string & string[]) => {
+    onChange(val);
+    if (!multiple) handleClose();
+  };
+
+  const getDisplayName = (value: string | string[] | null, placeholder: string = "") => {
+    if (Array.isArray(value)) {
+      const firstProject = getProjectById(value[0]);
+      return value.length ? (value.length === 1 ? firstProject?.name : `${value.length} projects`) : placeholder;
+    } else {
+      return value ? (getProjectById(value)?.name ?? placeholder) : placeholder;
+    }
+  };
+
+  const getProjectIcon = (value: string | string[] | null) => {
+    const renderIcon = (logoProps: TProject["logo_props"]) => (
+      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
+        <Logo logo={logoProps} size={14} />
+      </span>
+    );
+
+    if (Array.isArray(value)) {
+      return (
+        <div className="flex items-center gap-0.5">
+          {value.length > 0 ? (
+            value.map((projectId) => {
+              const projectDetails = getProjectById(projectId);
+              return projectDetails?.logo_props ? renderIcon(projectDetails.logo_props) : null;
+            })
+          ) : (
+            <ProjectsOutline className="size-3 text-tertiary" />
+          )}
+        </div>
+      );
+    } else {
+      const projectDetails = getProjectById(value);
+      return projectDetails?.logo_props ? renderIcon(projectDetails.logo_props) : null;
+    }
+  };
+
+  const comboButton = button ? (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      {button}
+    </button>
+  ) : (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading="Project"
+        tooltipContent={value?.length ? `${value.length} project${value.length !== 1 ? "s" : ""}` : placeholder}
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {!hideIcon && getProjectIcon(value)}
+        {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+          <span className="max-w-40 truncate">{getDisplayName(value, placeholder)}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("h-full", className)}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+      multiple={multiple}
+    >
+      {isOpen && (
+        <Combobox.Options as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("search")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {filteredOptions ? (
+                filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => {
+                    if (!option) return;
+                    return (
+                      <Combobox.Option
+                        as="li"
+                        key={option.value}
+                        value={option.value}
+                        className={({ active, selected }) =>
+                          `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                            active ? "bg-layer-transparent-hover" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            <span className="flex-grow truncate">{option.content}</span>
+                            {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                          </>
+                        )}
+                      </Combobox.Option>
+                    );
+                  })
+                ) : (
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/project/dropdown.tsx b/apps/web/core/components/dropdowns/project/dropdown.tsx
new file mode 100644
index 0000000..165f734
--- /dev/null
+++ b/apps/web/core/components/dropdowns/project/dropdown.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// local imports
+import type { TDropdownProps } from "../types";
+import { ProjectDropdownBase } from "./base";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  onClose?: () => void;
+  renderCondition?: (projectId: string) => boolean;
+  renderByDefault?: boolean;
+  currentProjectId?: string;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[];
+      }
+  );
+
+export const ProjectDropdown = observer(function ProjectDropdown(props: Props) {
+  // store hooks
+  const { joinedProjectIds, getProjectById } = useProject();
+
+  return <ProjectDropdownBase {...props} getProjectById={getProjectById} projectIds={joinedProjectIds} />;
+});
diff --git a/apps/web/core/components/dropdowns/state/base.tsx b/apps/web/core/components/dropdowns/state/base.tsx
new file mode 100644
index 0000000..19570dc
--- /dev/null
+++ b/apps/web/core/components/dropdowns/state/base.tsx
@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { ChevronDownOutline, SearchOutline } from "@makeplane/propel/icons";
+import type { IState } from "@plane/types";
+import { ComboDropDown, Spinner } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { DropdownButton } from "@/components/dropdowns/buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "@/components/dropdowns/constants";
+import type { TDropdownProps } from "@/components/dropdowns/types";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// plane web imports
+import { StateOption } from "@/components/workflow";
+
+export type TWorkItemStateDropdownBaseProps = TDropdownProps & {
+  alwaysAllowStateChange?: boolean;
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  filterAvailableStateIds?: boolean;
+  getStateById: (stateId: string | null | undefined) => IState | undefined;
+  iconSize?: string;
+  isForWorkItemCreation?: boolean;
+  isInitializing?: boolean;
+  onChange: (val: string) => void;
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  projectId: string | undefined;
+  renderByDefault?: boolean;
+  showDefaultState?: boolean;
+  stateIds: string[];
+  value: string | undefined | null;
+};
+
+export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdownBase(
+  props: TWorkItemStateDropdownBaseProps
+) {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getStateById,
+    hideIcon = false,
+    iconSize = "size-4",
+    isInitializing = false,
+    onChange,
+    onClose,
+    onDropdownOpen,
+    placement,
+    renderByDefault = true,
+    showDefaultState = true,
+    showTooltip = false,
+    stateIds,
+    tabIndex,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // store hooks
+  const { t } = useTranslation();
+  const statesList = stateIds.map((stateId) => getStateById(stateId)).filter((state) => !!state);
+  const defaultState = statesList?.find((state) => state?.default);
+  const stateValue = value ? value : showDefaultState ? defaultState?.id : undefined;
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // dropdown init
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    onOpen: onDropdownOpen,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  // derived values
+  const options = statesList?.map((state) => ({
+    value: state?.id,
+    query: `${state?.name}`,
+    content: (
+      <div className="flex items-center gap-2">
+        <StateGroupIcon
+          stateGroup={state?.group ?? "backlog"}
+          color={state?.color}
+          className={cn("flex-shrink-0", iconSize)}
+          percentage={state?.order}
+        />
+        <span className="flex-grow truncate text-left">{state?.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedState = stateValue ? getStateById(stateValue) : undefined;
+
+  const dropdownOnChange = (val: string) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const comboButton = button ? (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      {button}
+    </button>
+  ) : (
+    <button
+      tabIndex={tabIndex}
+      ref={setReferenceElement}
+      type="button"
+      className={cn(
+        "clickable block h-full max-w-full outline-none",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={t("state")}
+        tooltipContent={selectedState?.name ?? t("state")}
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {isInitializing ? (
+          <Spinner className="h-3.5 w-3.5" />
+        ) : (
+          <>
+            {!hideIcon && (
+              <StateGroupIcon
+                stateGroup={selectedState?.group ?? "backlog"}
+                color={selectedState?.color ?? "var(--text-color-tertiary)"}
+                className={cn("flex-shrink-0", iconSize)}
+                percentage={selectedState?.order}
+              />
+            )}
+            {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+              <span className="flex-grow truncate text-left">{selectedState?.name ?? t("state")}</span>
+            )}
+            {dropdownArrow && (
+              <ChevronDownOutline
+                className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)}
+                aria-hidden="true"
+              />
+            )}
+          </>
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    // oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      value={stateValue}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <Combobox.Options as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("common.search.label")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {filteredOptions ? (
+                filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <StateOption
+                      {...props}
+                      key={option.value}
+                      option={option}
+                      selectedValue={value}
+                      className="flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none"
+                    />
+                  ))
+                ) : (
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/state/dropdown.tsx b/apps/web/core/components/dropdowns/state/dropdown.tsx
new file mode 100644
index 0000000..ea6bbc6
--- /dev/null
+++ b/apps/web/core/components/dropdowns/state/dropdown.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+// local imports
+import type { TWorkItemStateDropdownBaseProps } from "./base";
+import { WorkItemStateDropdownBase } from "./base";
+
+type TWorkItemStateDropdownProps = Omit<
+  TWorkItemStateDropdownBaseProps,
+  "stateIds" | "getStateById" | "onDropdownOpen" | "isInitializing"
+> & {
+  stateIds?: string[];
+};
+
+export const StateDropdown = observer(function StateDropdown(props: TWorkItemStateDropdownProps) {
+  const { projectId, stateIds: propsStateIds } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // states
+  const [stateLoader, setStateLoader] = useState(false);
+  // store hooks
+  const { fetchProjectStates, getProjectStateIds, getStateById } = useProjectState();
+  // derived values
+  const stateIds = propsStateIds ?? getProjectStateIds(projectId);
+
+  // fetch states if not provided
+  const onDropdownOpen = async () => {
+    if ((stateIds === undefined || stateIds.length === 0) && workspaceSlug && projectId) {
+      setStateLoader(true);
+      await fetchProjectStates(workspaceSlug.toString(), projectId);
+      setStateLoader(false);
+    }
+  };
+
+  return (
+    <WorkItemStateDropdownBase
+      {...props}
+      getStateById={getStateById}
+      isInitializing={stateLoader}
+      stateIds={stateIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});
diff --git a/apps/web/core/components/dropdowns/types.d.ts b/apps/web/core/components/dropdowns/types.d.ts
new file mode 100644
index 0000000..0aa0b11
--- /dev/null
+++ b/apps/web/core/components/dropdowns/types.d.ts
@@ -0,0 +1,22 @@
+import type { Placement } from "@popperjs/core";
+
+export type TButtonVariants =
+  | "border-with-text"
+  | "border-without-text"
+  | "background-with-text"
+  | "background-without-text"
+  | "transparent-with-text"
+  | "transparent-without-text";
+
+export type TDropdownProps = {
+  buttonClassName?: string;
+  buttonContainerClassName?: string;
+  buttonVariant: TButtonVariants;
+  className?: string;
+  disabled?: boolean;
+  hideIcon?: boolean;
+  placeholder?: string;
+  placement?: Placement;
+  showTooltip?: boolean;
+  tabIndex?: number;
+};
diff --git a/apps/web/core/components/editor/document/editor.tsx b/apps/web/core/components/editor/document/editor.tsx
new file mode 100644
index 0000000..730719f
--- /dev/null
+++ b/apps/web/core/components/editor/document/editor.tsx
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { forwardRef } from "react";
+// plane imports
+import { DocumentEditorWithRef } from "@plane/editor";
+import type { IEditorPropsExtended, EditorRefApi, IDocumentEditorProps, TFileHandler } from "@plane/editor";
+import type { MakeOptional, TSearchEntityRequestPayload, TSearchResponse } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useEditorConfig, useEditorMention } from "@/hooks/editor";
+import { useMember } from "@/hooks/store/use-member";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
+import { useEditorFlagging } from "@/hooks/use-editor-flagging";
+// local imports
+import { EditorMentionsRoot } from "../embeds/mentions";
+
+type DocumentEditorWrapperProps = MakeOptional<
+  Omit<IDocumentEditorProps, "fileHandler" | "mentionHandler" | "user" | "extendedEditorProps">,
+  "disabledExtensions" | "editable" | "flaggedExtensions" | "getEditorMetaData"
+> & {
+  extendedEditorProps?: Partial<IEditorPropsExtended>;
+  workspaceSlug: string;
+  workspaceId: string;
+  projectId?: string;
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+        uploadFile: TFileHandler["upload"];
+        duplicateFile: TFileHandler["duplicate"];
+      }
+  );
+
+export const DocumentEditor = forwardRef(function DocumentEditor(
+  props: DocumentEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  const {
+    containerClassName,
+    editable,
+    extendedEditorProps,
+    workspaceSlug,
+    workspaceId,
+    projectId,
+    disabledExtensions: additionalDisabledExtensions = [],
+    ...rest
+  } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
+  });
+  // editor flaggings
+  const { document: documentEditorExtensions } = useEditorFlagging({
+    workspaceSlug,
+    projectId,
+  });
+  // use editor mention
+  const { fetchMentions } = useEditorMention({
+    enableAdvancedMentions: true,
+    searchEntity: editable ? async (payload) => await props.searchMentionCallback(payload) : async () => ({}),
+  });
+  // editor config
+  const { getEditorFileHandlers } = useEditorConfig();
+
+  return (
+    <DocumentEditorWithRef
+      ref={ref}
+      disabledExtensions={[...documentEditorExtensions.disabled, ...(additionalDisabledExtensions ?? [])]}
+      editable={editable}
+      flaggedExtensions={documentEditorExtensions.flagged}
+      fileHandler={getEditorFileHandlers({
+        projectId,
+        uploadFile: editable ? props.uploadFile : async () => "",
+        duplicateFile: editable ? props.duplicateFile : async () => "",
+        workspaceId,
+        workspaceSlug,
+      })}
+      getEditorMetaData={getEditorMetaData}
+      mentionHandler={{
+        searchCallback: async (query) => {
+          const res = await fetchMentions(query);
+          if (!res) throw new Error("Failed in fetching mentions");
+          return res;
+        },
+        renderComponent: EditorMentionsRoot,
+        getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
+      }}
+      extendedEditorProps={extendedEditorProps}
+      {...rest}
+      containerClassName={cn("relative pb-3 pl-3", containerClassName)}
+    />
+  );
+});
+
+DocumentEditor.displayName = "DocumentEditor";
diff --git a/apps/web/core/components/editor/embeds/mentions/index.ts b/apps/web/core/components/editor/embeds/mentions/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/editor/embeds/mentions/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/editor/embeds/mentions/root.tsx b/apps/web/core/components/editor/embeds/mentions/root.tsx
new file mode 100644
index 0000000..cd6338d
--- /dev/null
+++ b/apps/web/core/components/editor/embeds/mentions/root.tsx
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import { EditorUserMention } from "./user";
+import type { TCallbackMentionComponentProps } from "@plane/editor";
+
+export function EditorMentionsRoot(props: TCallbackMentionComponentProps) {
+  const { entity_identifier, entity_name } = props;
+
+  switch (entity_name) {
+    case "user_mention":
+      return <EditorUserMention id={entity_identifier} />;
+    default:
+      return null;
+  }
+}
diff --git a/apps/web/core/components/editor/embeds/mentions/user.tsx b/apps/web/core/components/editor/embeds/mentions/user.tsx
new file mode 100644
index 0000000..7264570
--- /dev/null
+++ b/apps/web/core/components/editor/embeds/mentions/user.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Link } from "react-router";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { ROLE } from "@plane/constants";
+import { Popover } from "@plane/propel/popover";
+import { cn, getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  id: string;
+};
+
+export const EditorUserMention = observer(function EditorUserMention(props: Props) {
+  const { id } = props;
+  // router
+  const { projectId } = useParams();
+  // params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    getUserDetails,
+    project: { getProjectMemberDetails },
+  } = useMember();
+  // derived values
+  const userDetails = getUserDetails(id);
+  const roleDetails = projectId ? getProjectMemberDetails(id, projectId.toString())?.role : null;
+  const profileLink = `/${workspaceSlug}/profile/${id}`;
+
+  if (!userDetails) {
+    return (
+      <div className="not-prose inline rounded-sm bg-layer-1 px-1 py-0.5 text-tertiary no-underline">
+        @suspended user
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "not-prose inline rounded-sm bg-accent-subtle-active px-1 py-0.5 text-accent-primary no-underline",
+        {
+          "bg-label-yellow-bg text-label-yellow-text": id === currentUser?.id,
+        }
+      )}
+    >
+      <Popover delay={100} openOnHover>
+        <Popover.Button>
+          <Link to={profileLink}>@{userDetails?.display_name}</Link>
+        </Popover.Button>
+        <Popover.Panel side="bottom" align="start">
+          <div className="w-60 rounded-lg border-[0.5px] border-strong bg-surface-1 p-3 shadow-raised-200">
+            <div className="flex items-center gap-3">
+              <div className="grid size-10 flex-shrink-0 place-items-center">
+                <Avatar
+                  alt={userDetails?.display_name}
+                  fallback={userDetails?.display_name?.[0]?.toUpperCase()}
+                  src={getFileURL(userDetails?.avatar_url ?? "")}
+                  size="xl"
+                />
+              </div>
+              <div>
+                <Link to={profileLink} className="not-prose text-13 font-medium text-primary hover:underline">
+                  {userDetails?.first_name} {userDetails?.last_name}
+                </Link>
+                {roleDetails && <p className="text-11 text-secondary">{ROLE[roleDetails]}</p>}
+              </div>
+            </div>
+          </div>
+        </Popover.Panel>
+      </Popover>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/editor/lite-text/editor.tsx b/apps/web/core/components/editor/lite-text/editor.tsx
new file mode 100644
index 0000000..e09d6d1
--- /dev/null
+++ b/apps/web/core/components/editor/lite-text/editor.tsx
@@ -0,0 +1,227 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+// plane constants
+import type { EIssueCommentAccessSpecifier } from "@plane/constants";
+// plane imports
+import { LiteTextEditorWithRef } from "@plane/editor";
+import type { EditorRefApi, ILiteTextEditorProps, TFileHandler } from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import type { MakeOptional } from "@plane/types";
+import { cn, isCommentEmpty } from "@plane/utils";
+// components
+import { EditorMentionsRoot } from "@/components/editor/embeds/mentions";
+import { IssueCommentToolbar } from "@/components/editor/lite-text/toolbar";
+// hooks
+import { useEditorConfig, useEditorMention } from "@/hooks/editor";
+import { useMember } from "@/hooks/store/use-member";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
+// plane web hooks
+import { useEditorFlagging } from "@/hooks/use-editor-flagging";
+// plane web service
+import { WorkspaceService } from "@/services/workspace.service";
+import { LiteToolbar } from "./lite-toolbar";
+const workspaceService = new WorkspaceService();
+
+type LiteTextEditorWrapperProps = MakeOptional<
+  Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler" | "extendedEditorProps">,
+  "disabledExtensions" | "flaggedExtensions" | "getEditorMetaData"
+> & {
+  workspaceSlug: string;
+  workspaceId: string;
+  projectId?: string;
+  accessSpecifier?: EIssueCommentAccessSpecifier;
+  handleAccessChange?: (accessKey: EIssueCommentAccessSpecifier) => void;
+  showAccessSpecifier?: boolean;
+  showSubmitButton?: boolean;
+  isSubmitting?: boolean;
+  showToolbarInitially?: boolean;
+  variant?: "full" | "lite" | "none";
+  issue_id?: string;
+  parentClassName?: string;
+  editorClassName?: string;
+  submitButtonText?: string;
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        uploadFile: TFileHandler["upload"];
+        duplicateFile: TFileHandler["duplicate"];
+      }
+  );
+
+export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
+  props: LiteTextEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  const { t } = useTranslation();
+  const {
+    containerClassName,
+    editable,
+    workspaceSlug,
+    workspaceId,
+    projectId,
+    issue_id,
+    accessSpecifier,
+    handleAccessChange,
+    showAccessSpecifier = false,
+    showSubmitButton = true,
+    isSubmitting = false,
+    showToolbarInitially = true,
+    variant = "full",
+    parentClassName = "",
+    placeholder = t("issue.comments.placeholder"),
+    disabledExtensions: additionalDisabledExtensions = [],
+    editorClassName = "",
+    showPlaceholderOnEmpty = true,
+    submitButtonText = "common.comment",
+    ...rest
+  } = props;
+  // states
+  const isLiteVariant = variant === "lite";
+  const isFullVariant = variant === "full";
+  const [isFocused, setIsFocused] = useState(isFullVariant ? showToolbarInitially : true);
+  const [editorRef, setEditorRef] = useState<EditorRefApi | null>(null);
+  // editor flaggings
+  const { liteText: liteTextEditorExtensions } = useEditorFlagging({
+    workspaceSlug,
+    projectId,
+  });
+  // store hooks
+  const { getUserDetails } = useMember();
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
+  });
+  // use editor mention
+  const { fetchMentions } = useEditorMention({
+    searchEntity: async (payload) =>
+      await workspaceService.searchEntity(workspaceSlug, {
+        ...payload,
+        project_id: projectId,
+        issue_id,
+      }),
+  });
+  // editor config
+  const { getEditorFileHandlers } = useEditorConfig();
+  function isMutableRefObject<T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T | null> {
+    return !!ref && typeof ref === "object" && "current" in ref;
+  }
+  // derived values
+  const isEmpty = isCommentEmpty(props.initialValue);
+
+  return (
+    <div
+      className={cn(
+        "relative rounded-sm border border-subtle",
+        {
+          "p-3": editable && !isLiteVariant,
+        },
+        parentClassName
+      )}
+      onFocus={() => isFullVariant && !showToolbarInitially && setIsFocused(true)}
+      onBlur={() => isFullVariant && !showToolbarInitially && setIsFocused(false)}
+    >
+      {/* Wrapper for lite toolbar layout */}
+      <div className={cn(isLiteVariant && editable ? "flex items-end gap-1" : "")}>
+        {/* Main Editor - always rendered once */}
+        <div className={cn(isLiteVariant && editable ? "min-w-0 flex-1" : "")}>
+          <LiteTextEditorWithRef
+            ref={ref}
+            disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
+            editable={editable}
+            flaggedExtensions={liteTextEditorExtensions.flagged}
+            fileHandler={getEditorFileHandlers({
+              projectId,
+              uploadFile: editable ? props.uploadFile : async () => "",
+              duplicateFile: editable ? props.duplicateFile : async () => "",
+              workspaceId,
+              workspaceSlug,
+            })}
+            getEditorMetaData={getEditorMetaData}
+            handleEditorReady={(ready) => {
+              if (ready) {
+                setEditorRef(isMutableRefObject<EditorRefApi>(ref) ? ref.current : null);
+              }
+            }}
+            mentionHandler={{
+              searchCallback: async (query) => {
+                const res = await fetchMentions(query);
+                if (!res) throw new Error("Failed in fetching mentions");
+                return res;
+              },
+              renderComponent: EditorMentionsRoot,
+              getMentionedEntityDetails: (id) => ({
+                display_name: getUserDetails(id)?.display_name ?? "",
+              }),
+            }}
+            placeholder={placeholder}
+            showPlaceholderOnEmpty={showPlaceholderOnEmpty}
+            containerClassName={cn(containerClassName, "relative", {
+              "p-2": !editable,
+            })}
+            extendedEditorProps={{}}
+            editorClassName={editorClassName}
+            {...rest}
+          />
+        </div>
+
+        {/* Lite Toolbar - conditionally rendered */}
+        {isLiteVariant && editable && (
+          <LiteToolbar
+            executeCommand={(item) => {
+              // TODO: update this while toolbar homogenization
+              // @ts-expect-error type mismatch here
+              editorRef?.executeMenuItemCommand({
+                itemKey: item.itemKey,
+                ...item.extraProps,
+              });
+            }}
+            onSubmit={(e) => rest.onEnterKeyPress?.(e)}
+            isSubmitting={isSubmitting}
+            isEmpty={isEmpty}
+          />
+        )}
+      </div>
+
+      {/* Full Toolbar - conditionally rendered */}
+      {isFullVariant && editable && (
+        <div
+          className={cn(
+            "origin-top overflow-hidden transition-all duration-300 ease-out",
+            isFocused ? "mt-3 max-h-[200px] scale-y-100 opacity-100" : "invisible max-h-0 scale-y-0 opacity-0"
+          )}
+        >
+          <IssueCommentToolbar
+            accessSpecifier={accessSpecifier}
+            executeCommand={(item) => {
+              // TODO: update this while toolbar homogenization
+              // @ts-expect-error type mismatch here
+              editorRef?.executeMenuItemCommand({
+                itemKey: item.itemKey,
+                ...item.extraProps,
+              });
+            }}
+            handleAccessChange={handleAccessChange}
+            handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
+            isCommentEmpty={isEmpty}
+            isSubmitting={isSubmitting}
+            showAccessSpecifier={showAccessSpecifier}
+            editorRef={editorRef}
+            showSubmitButton={showSubmitButton}
+            submitButtonText={submitButtonText}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+LiteTextEditor.displayName = "LiteTextEditor";
diff --git a/apps/web/core/components/editor/lite-text/index.ts b/apps/web/core/components/editor/lite-text/index.ts
new file mode 100644
index 0000000..459e4de
--- /dev/null
+++ b/apps/web/core/components/editor/lite-text/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./editor";
+export * from "./toolbar";
diff --git a/apps/web/core/components/editor/lite-text/lite-toolbar.tsx b/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
new file mode 100644
index 0000000..dbea0be
--- /dev/null
+++ b/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { AttachOutline, TopArrowOutline } from "@makeplane/propel/icons";
+// constants
+import type { ToolbarMenuItem } from "@plane/editor";
+import { IMAGE_ITEM } from "@plane/editor";
+
+type LiteToolbarProps = {
+  onSubmit: (e: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement>) => void;
+  isSubmitting: boolean;
+  isEmpty: boolean;
+  executeCommand: (item: ToolbarMenuItem) => void;
+};
+
+export function LiteToolbar({ onSubmit, isSubmitting, isEmpty, executeCommand }: LiteToolbarProps) {
+  return (
+    <div className="flex items-center gap-2 pb-1">
+      <button
+        onClick={() => executeCommand(IMAGE_ITEM)}
+        type="button"
+        className="p-1 text-tertiary transition-colors hover:text-secondary"
+      >
+        <AttachOutline className="size-3" />
+      </button>
+      <button
+        type="button"
+        onClick={(e) => onSubmit(e)}
+        disabled={isEmpty || isSubmitting}
+        className="rounded-sm bg-accent-primary p-1 text-primary transition-colors hover:bg-accent-primary/80 disabled:bg-layer-1 disabled:text-secondary"
+      >
+        <TopArrowOutline className="size-3" />
+      </button>
+    </div>
+  );
+}
+
+export type { LiteToolbarProps };
diff --git a/apps/web/core/components/editor/lite-text/toolbar.tsx b/apps/web/core/components/editor/lite-text/toolbar.tsx
new file mode 100644
index 0000000..e67e2fc
--- /dev/null
+++ b/apps/web/core/components/editor/lite-text/toolbar.tsx
@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState, useCallback } from "react";
+import type { LucideIcon } from "lucide-react";
+
+import { EIssueCommentAccessSpecifier } from "@plane/constants";
+// editor
+import type { EditorRefApi } from "@plane/editor";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Button } from "@plane/propel/button";
+import { GlobeOutline, LockOutline } from "@makeplane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// constants
+import { cn } from "@plane/utils";
+import type { ToolbarMenuItem } from "@plane/editor";
+import { TOOLBAR_ITEMS } from "@plane/editor";
+// helpers
+
+type Props = {
+  accessSpecifier?: EIssueCommentAccessSpecifier;
+  executeCommand: (item: ToolbarMenuItem) => void;
+  handleAccessChange?: (accessKey: EIssueCommentAccessSpecifier) => void;
+  handleSubmit: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  isCommentEmpty: boolean;
+  isSubmitting: boolean;
+  showAccessSpecifier: boolean;
+  showSubmitButton: boolean;
+  editorRef: EditorRefApi | null;
+  submitButtonText?: string;
+};
+
+type TCommentAccessType = {
+  icon: LucideIcon | React.FC<ISvgIcons>;
+  key: EIssueCommentAccessSpecifier;
+  label: "Private" | "Public";
+};
+
+const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
+  {
+    icon: LockOutline,
+    key: EIssueCommentAccessSpecifier.INTERNAL,
+    label: "Private",
+  },
+  {
+    icon: GlobeOutline,
+    key: EIssueCommentAccessSpecifier.EXTERNAL,
+    label: "Public",
+  },
+];
+
+const toolbarItems = TOOLBAR_ITEMS.lite;
+
+export function IssueCommentToolbar(props: Props) {
+  const { t } = useTranslation();
+  const {
+    accessSpecifier,
+    executeCommand,
+    handleAccessChange,
+    handleSubmit,
+    isCommentEmpty,
+    isSubmitting,
+    showAccessSpecifier,
+    showSubmitButton,
+    editorRef,
+    submitButtonText = "common.comment",
+  } = props;
+  // State to manage active states of toolbar items
+  const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
+
+  // Function to update active states
+  const updateActiveStates = useCallback(() => {
+    if (!editorRef) return;
+    const newActiveStates: Record<string, boolean> = {};
+    Object.values(toolbarItems)
+      .flat()
+      .forEach((item) => {
+        // TODO: update this while toolbar homogenization
+        // @ts-expect-error type mismatch here
+        newActiveStates[item.renderKey] = editorRef.isMenuItemActive({
+          itemKey: item.itemKey,
+          ...item.extraProps,
+        });
+      });
+    setActiveStates(newActiveStates);
+  }, [editorRef]);
+
+  // useEffect to call updateActiveStates when isActive prop changes
+  useEffect(() => {
+    if (!editorRef) return;
+    const unsubscribe = editorRef.onStateChange(updateActiveStates);
+    updateActiveStates();
+    return () => unsubscribe();
+  }, [editorRef, updateActiveStates]);
+
+  const isEditorReadyToDiscard = editorRef?.isEditorReadyToDiscard();
+  const isSubmitButtonDisabled = isCommentEmpty || !isEditorReadyToDiscard;
+
+  return (
+    <div className="flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll bg-surface-2">
+      {showAccessSpecifier && (
+        <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[0.5px] border-subtle p-1">
+          {COMMENT_ACCESS_SPECIFIERS.map((access) => {
+            const isAccessActive = accessSpecifier === access.key;
+
+            return (
+              <Tooltip key={access.key} label={access.label} layout="stacked">
+                <button
+                  type="button"
+                  onClick={() => handleAccessChange?.(access.key)}
+                  className={cn("grid aspect-square place-items-center rounded-xs p-1 hover:bg-layer-1", {
+                    "bg-layer-1": isAccessActive,
+                  })}
+                >
+                  <access.icon
+                    className={cn("h-3.5 w-3.5 text-placeholder", {
+                      "text-primary": isAccessActive,
+                    })}
+                    strokeWidth={2}
+                  />
+                </button>
+              </Tooltip>
+            );
+          })}
+        </div>
+      )}
+      <div className="flex w-full items-stretch justify-between gap-2 rounded-sm border-[0.5px] border-subtle p-1">
+        <div className="flex items-stretch">
+          {Object.keys(toolbarItems).map((key, index) => (
+            <div
+              key={key}
+              className={cn("flex items-stretch gap-0.5 border-r border-subtle px-2.5", {
+                "pl-0": index === 0,
+              })}
+            >
+              {toolbarItems[key].map((item) => {
+                const isItemActive = activeStates[item.renderKey];
+
+                return (
+                  <Tooltip key={item.renderKey} label={item.name} shortcut={item.shortcut?.join(" + ")}>
+                    <button
+                      type="button"
+                      onClick={() => executeCommand(item)}
+                      className={cn(
+                        "grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder hover:bg-layer-1",
+                        {
+                          "bg-layer-1 text-primary": isItemActive,
+                        }
+                      )}
+                    >
+                      <item.icon
+                        className={cn("h-3.5 w-3.5", {
+                          "text-primary": isItemActive,
+                        })}
+                        strokeWidth={2.5}
+                      />
+                    </button>
+                  </Tooltip>
+                );
+              })}
+            </div>
+          ))}
+        </div>
+        {showSubmitButton && (
+          <div className="sticky right-1">
+            <Button
+              type="submit"
+              variant="primary"
+              className="px-2.5 py-1.5 text-11"
+              onClick={handleSubmit}
+              disabled={isSubmitButtonDisabled}
+              loading={isSubmitting}
+            >
+              {t(submitButtonText)}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/editor/pdf/document.tsx b/apps/web/core/components/editor/pdf/document.tsx
new file mode 100644
index 0000000..bda85bb
--- /dev/null
+++ b/apps/web/core/components/editor/pdf/document.tsx
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { PageProps, Styles } from "@react-pdf/renderer";
+import { Document, Font, Page, StyleSheet } from "@react-pdf/renderer";
+import { Html } from "react-pdf-html";
+// assets
+import interBold from "@/app/assets/fonts/inter/bold.ttf?url";
+import interHeavy from "@/app/assets/fonts/inter/heavy.ttf?url";
+import interLight from "@/app/assets/fonts/inter/light.ttf?url";
+import interMedium from "@/app/assets/fonts/inter/medium.ttf?url";
+import interRegular from "@/app/assets/fonts/inter/regular.ttf?url";
+import interSemibold from "@/app/assets/fonts/inter/semibold.ttf?url";
+import interThin from "@/app/assets/fonts/inter/thin.ttf?url";
+import interUltraBold from "@/app/assets/fonts/inter/ultrabold.ttf?url";
+import interUltraLight from "@/app/assets/fonts/inter/ultralight.ttf?url";
+// plane imports
+import { convertRemToPixel } from "@plane/utils";
+
+const EDITOR_PDF_FONT_FAMILY_STYLES: Styles = {
+  "*:not(.courier, .courier-bold)": { fontFamily: "Inter" },
+  ".courier": { fontFamily: "Courier" },
+  ".courier-bold": { fontFamily: "Courier-Bold" },
+};
+
+const EDITOR_PDF_TYPOGRAPHY_STYLES: Styles = {
+  // page title
+  "h1.page-title": {
+    fontSize: convertRemToPixel(1.6),
+    fontWeight: "bold",
+    marginTop: 0,
+    marginBottom: convertRemToPixel(2),
+  },
+  // headings
+  "h1:not(.page-title)": {
+    fontSize: convertRemToPixel(1.4),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(2),
+    marginBottom: convertRemToPixel(0.25),
+  },
+  h2: {
+    fontSize: convertRemToPixel(1.2),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1.4),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  h3: {
+    fontSize: convertRemToPixel(1.1),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  h4: {
+    fontSize: convertRemToPixel(1),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  h5: {
+    fontSize: convertRemToPixel(0.9),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  h6: {
+    fontSize: convertRemToPixel(0.8),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  // paragraph
+  "p:not(table p)": {
+    fontSize: convertRemToPixel(0.8),
+  },
+  "p:not(ol p, ul p)": {
+    marginTop: convertRemToPixel(0.25),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+};
+
+const EDITOR_PDF_LIST_STYLES: Styles = {
+  "ul, ol": {
+    fontSize: convertRemToPixel(0.8),
+    marginHorizontal: -20,
+  },
+  "ol p, ul p": {
+    marginVertical: 0,
+  },
+  "ol li, ul li": {
+    marginTop: convertRemToPixel(0.45),
+  },
+  "ul ul, ul ol, ol ol, ol ul": {
+    marginVertical: 0,
+  },
+  "ul[data-type='taskList']": {
+    position: "relative",
+  },
+  "div.input-checkbox": {
+    position: "absolute",
+    top: convertRemToPixel(0.15),
+    left: -convertRemToPixel(1.2),
+    height: convertRemToPixel(0.75),
+    width: convertRemToPixel(0.75),
+    borderWidth: "1.5px",
+    borderStyle: "solid",
+    borderRadius: convertRemToPixel(0.125),
+  },
+  "div.input-checkbox:not(.checked)": {
+    backgroundColor: "#ffffff",
+    borderColor: "#171717",
+  },
+  "div.input-checkbox.checked": {
+    backgroundColor: "#3f76ff",
+    borderColor: "#3f76ff",
+  },
+  "ul li[data-checked='true'] p": {
+    color: "#a3a3a3",
+  },
+};
+
+const EDITOR_PDF_CODE_STYLES: Styles = {
+  // code block
+  "[data-node-type='code-block']": {
+    marginVertical: convertRemToPixel(0.5),
+    padding: convertRemToPixel(1),
+    borderRadius: convertRemToPixel(0.5),
+    backgroundColor: "#f7f7f7",
+    fontSize: convertRemToPixel(0.7),
+  },
+  // inline code block
+  "[data-node-type='inline-code-block']": {
+    margin: 0,
+    paddingVertical: convertRemToPixel(0.25 / 4 + 0.25 / 8),
+    paddingHorizontal: convertRemToPixel(0.375),
+    border: "0.5px solid #e5e5e5",
+    borderRadius: convertRemToPixel(0.25),
+    backgroundColor: "#e8e8e8",
+    color: "#f97316",
+    fontSize: convertRemToPixel(0.7),
+  },
+};
+
+const EDITOR_PDF_DOCUMENT_STYLESHEET = StyleSheet.create({
+  ...EDITOR_PDF_FONT_FAMILY_STYLES,
+  ...EDITOR_PDF_TYPOGRAPHY_STYLES,
+  ...EDITOR_PDF_LIST_STYLES,
+  ...EDITOR_PDF_CODE_STYLES,
+  // quote block
+  blockquote: {
+    borderLeft: "3px solid gray",
+    paddingLeft: convertRemToPixel(1),
+    marginTop: convertRemToPixel(0.625),
+    marginBottom: 0,
+    marginHorizontal: 0,
+  },
+  img: {
+    marginVertical: 0,
+    borderRadius: convertRemToPixel(0.375),
+  },
+  // divider
+  "div[data-type='horizontalRule']": {
+    marginVertical: convertRemToPixel(1),
+    height: 1,
+    width: "100%",
+    backgroundColor: "gray",
+  },
+  // mention block
+  "[data-node-type='mention-block']": {
+    margin: 0,
+    color: "#3f76ff",
+    backgroundColor: "#3f76ff33",
+    paddingHorizontal: convertRemToPixel(0.375),
+  },
+  // table
+  table: {
+    marginTop: convertRemToPixel(0.5),
+    marginBottom: convertRemToPixel(1),
+    marginHorizontal: 0,
+  },
+  "table td": {
+    padding: convertRemToPixel(0.625),
+    border: "1px solid #e5e5e5",
+  },
+  "table p": {
+    fontSize: convertRemToPixel(0.7),
+  },
+});
+
+Font.register({
+  family: "Inter",
+  fonts: [
+    { src: interThin, fontWeight: "thin" },
+    { src: interThin, fontWeight: "thin", fontStyle: "italic" },
+    { src: interUltraLight, fontWeight: "ultralight" },
+    { src: interUltraLight, fontWeight: "ultralight", fontStyle: "italic" },
+    { src: interLight, fontWeight: "light" },
+    { src: interLight, fontWeight: "light", fontStyle: "italic" },
+    { src: interRegular, fontWeight: "normal" },
+    { src: interRegular, fontWeight: "normal", fontStyle: "italic" },
+    { src: interMedium, fontWeight: "medium" },
+    { src: interMedium, fontWeight: "medium", fontStyle: "italic" },
+    { src: interSemibold, fontWeight: "semibold" },
+    { src: interSemibold, fontWeight: "semibold", fontStyle: "italic" },
+    { src: interBold, fontWeight: "bold" },
+    { src: interBold, fontWeight: "bold", fontStyle: "italic" },
+    { src: interUltraBold, fontWeight: "ultrabold" },
+    { src: interUltraBold, fontWeight: "ultrabold", fontStyle: "italic" },
+    { src: interHeavy, fontWeight: "heavy" },
+    { src: interHeavy, fontWeight: "heavy", fontStyle: "italic" },
+  ],
+});
+
+type Props = {
+  content: string;
+  pageFormat: PageProps["size"];
+};
+
+export function PDFDocument(props: Props) {
+  const { content, pageFormat } = props;
+
+  return (
+    <Document>
+      <Page
+        size={pageFormat}
+        style={{
+          backgroundColor: "#ffffff",
+          padding: 64,
+        }}
+      >
+        <Html stylesheet={EDITOR_PDF_DOCUMENT_STYLESHEET}>{content}</Html>
+      </Page>
+    </Document>
+  );
+}
diff --git a/apps/web/core/components/editor/pdf/index.ts b/apps/web/core/components/editor/pdf/index.ts
new file mode 100644
index 0000000..a53ff8f
--- /dev/null
+++ b/apps/web/core/components/editor/pdf/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./document";
diff --git a/apps/web/core/components/editor/rich-text/description-input/index.ts b/apps/web/core/components/editor/rich-text/description-input/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/editor/rich-text/description-input/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/editor/rich-text/description-input/loader.tsx b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
new file mode 100644
index 0000000..8be0978
--- /dev/null
+++ b/apps/web/core/components/editor/rich-text/description-input/loader.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+};
+
+export function DescriptionInputLoader(props: Props) {
+  const { className } = props;
+
+  return (
+    <Loader className={cn("space-y-2", className)}>
+      <Loader.Item width="100%" height="26px" />
+      <div className="flex items-center gap-2">
+        <Loader.Item width="26px" height="26px" />
+        <Loader.Item width="400px" height="26px" />
+      </div>
+      <div className="flex items-center gap-2">
+        <Loader.Item width="26px" height="26px" />
+        <Loader.Item width="400px" height="26px" />
+      </div>
+      <Loader.Item width="80%" height="26px" />
+      <div className="flex items-center gap-2">
+        <Loader.Item width="50%" height="26px" />
+      </div>
+      <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
+        <Loader.Item width="100px" height="26px" />
+        <Loader.Item width="50px" height="26px" />
+      </div>
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/editor/rich-text/description-input/root.tsx b/apps/web/core/components/editor/rich-text/description-input/root.tsx
new file mode 100644
index 0000000..ac2a39b
--- /dev/null
+++ b/apps/web/core/components/editor/rich-text/description-input/root.tsx
@@ -0,0 +1,297 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useState, useRef } from "react";
+import { debounce } from "lodash-es";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import type { EditorRefApi, TExtensions } from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import type { EFileAssetType, TNameDescriptionLoader } from "@plane/types";
+import { getDescriptionPlaceholderI18n } from "@plane/utils";
+// components
+import { RichTextEditor } from "@/components/editor/rich-text";
+// hooks
+import { useEditorAsset } from "@/hooks/store/use-editor-asset";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// plane web services
+import { WorkspaceService } from "@/services/workspace.service";
+// local imports
+import { DescriptionInputLoader } from "./loader";
+// services init
+const workspaceService = new WorkspaceService();
+
+type TFormData = {
+  id: string;
+  description_html: string;
+  description_json?: object;
+  isMigrationUpdate: boolean;
+};
+
+type Props = {
+  /**
+   * @description Container class name, this will be used to add custom styles to the editor container
+   */
+  containerClassName?: string;
+  /**
+   * @description Disabled, this will be used to disable the editor
+   */
+  disabled?: boolean;
+  /**
+   * @description Disabled extensions, this will be used to disable the extensions in the editor
+   */
+  disabledExtensions?: TExtensions[];
+  /**
+   * @description Editor ref, this will be used to imperatively attach editor related helper functions
+   */
+  editorRef?: React.RefObject<EditorRefApi | null>;
+  /**
+   * @description Entity ID, this will be used for file uploads and as the unique identifier for the entity
+   */
+  entityId: string;
+  /**
+   * @description File asset type, this will be used to upload the file to the editor
+   */
+  fileAssetType: EFileAssetType;
+  /**
+   * @description Initial value, pass the actual description to initialize the editor
+   */
+  initialValue: string | undefined;
+  /**
+   * @description Key, to ensure the editor is re-rendered when the key changes
+   */
+  key: string;
+  /**
+   * @description Submit handler, the actual function which will be called when the form is submitted
+   */
+  onSubmit: (
+    value: {
+      description_html: string;
+      description_json: object | undefined;
+    },
+    isMigrationUpdate?: boolean
+  ) => Promise<void>;
+  /**
+   * @description Placeholder, if not provided, the placeholder will be the default placeholder
+   */
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
+  /**
+   * @description projectId, if not provided, the entity will be considered as a workspace entity
+   */
+  projectId?: string;
+  /**
+   * @description Set is submitting, use it to set the loading state of the form
+   */
+  setIsSubmitting: (initialValue: TNameDescriptionLoader) => void;
+  /**
+   * @description SWR description, use it only if you want to sync changes in realtime(pseudo realtime)
+   */
+  swrDescription?: string | null | undefined;
+  /**
+   * @description Workspace slug, this will be used to get the workspace details
+   */
+  workspaceSlug: string;
+  /**
+   * @description Issue sequence id, this will be used to get the issue sequence id
+   */
+  issueSequenceId?: number;
+};
+
+/**
+ * @description DescriptionInput component for rich text editor with autosave functionality using debounce
+ * The component also makes an API call to save the description on unmount
+ */
+export const DescriptionInput = observer(function DescriptionInput(props: Props) {
+  const {
+    containerClassName,
+    disabled,
+    disabledExtensions,
+    editorRef,
+    entityId,
+    fileAssetType,
+    initialValue,
+    issueSequenceId,
+    onSubmit,
+    placeholder,
+    projectId,
+    setIsSubmitting,
+    swrDescription,
+    workspaceSlug,
+  } = props;
+  // states
+  const [localDescription, setLocalDescription] = useState<TFormData>({
+    id: entityId,
+    description_html: initialValue?.trim() ?? "",
+    isMigrationUpdate: false,
+  });
+  // ref to track if there are unsaved changes
+  const hasUnsavedChanges = useRef(false);
+  // ref to track last saved content (to skip onChange when content hasn't actually changed)
+  const lastSavedContent = useRef(initialValue?.trim() === "" ? "<p></p>" : (initialValue ?? "<p></p>"));
+  // store hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
+  // derived values
+  const workspaceDetails = getWorkspaceBySlug(workspaceSlug);
+  // translation
+  const { t } = useTranslation();
+  // form info
+  const { handleSubmit, reset, control, setValue } = useForm<TFormData>({
+    defaultValues: {
+      id: entityId,
+      description_html: initialValue?.trim() ?? "",
+      isMigrationUpdate: false,
+    },
+  });
+
+  // submit handler
+  const handleDescriptionFormSubmit = useCallback(
+    async (formData: TFormData) => {
+      await onSubmit(
+        {
+          description_html: formData.description_html,
+          description_json: formData.description_json,
+        },
+        formData.isMigrationUpdate
+      );
+      // Update lastSavedContent after successful save
+      lastSavedContent.current = formData.description_html;
+    },
+    [onSubmit]
+  );
+
+  // reset form values
+  useEffect(() => {
+    if (!entityId) return;
+    const normalizedValue = initialValue?.trim() === "" ? "<p></p>" : (initialValue ?? "<p></p>");
+    // Update last saved content when entity/initialValue changes
+    lastSavedContent.current = normalizedValue;
+    reset({
+      id: entityId,
+      description_html: normalizedValue,
+      isMigrationUpdate: false,
+    });
+    setLocalDescription({
+      id: entityId,
+      description_html: normalizedValue,
+      isMigrationUpdate: false,
+    });
+    // Reset unsaved changes flag when form is reset
+    hasUnsavedChanges.current = false;
+  }, [entityId, initialValue, reset]);
+
+  // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
+  // TODO: Verify the exhaustive-deps warning
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedFormSave = useCallback(
+    debounce(async () => {
+      handleSubmit(handleDescriptionFormSubmit)()
+        .catch((error) => console.error(`Failed to save description for ${entityId}:`, error))
+        .finally(() => {
+          setIsSubmitting("submitted");
+          hasUnsavedChanges.current = false;
+        });
+    }, 1500),
+    [entityId, handleSubmit]
+  );
+
+  // Save on unmount if there are unsaved changes
+  useEffect(
+    () => () => {
+      debouncedFormSave.cancel();
+
+      if (hasUnsavedChanges.current) {
+        handleSubmit(handleDescriptionFormSubmit)()
+          .catch((error) => {
+            console.error("Failed to save description on unmount:", error);
+          })
+          .finally(() => {
+            setIsSubmitting("submitted");
+            hasUnsavedChanges.current = false;
+          });
+      }
+    },
+    // since we don't want to save on unmount if there are no unsaved changes, no deps are needed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  if (!workspaceDetails) return null;
+
+  if (!localDescription.description_html) return <DescriptionInputLoader />;
+
+  return (
+    <Controller
+      name="description_html"
+      control={control}
+      render={({ field: { onChange } }) => (
+        <RichTextEditor
+          key={entityId}
+          editable={!disabled}
+          ref={editorRef}
+          id={entityId}
+          issueSequenceId={issueSequenceId}
+          disabledExtensions={disabledExtensions}
+          initialValue={localDescription.description_html ?? "<p></p>"}
+          value={swrDescription ?? null}
+          workspaceSlug={workspaceSlug}
+          workspaceId={workspaceDetails.id}
+          projectId={projectId}
+          dragDropEnabled
+          onChange={(description_json, description_html, options) => {
+            if (description_html === lastSavedContent.current) return;
+            setIsSubmitting("submitting");
+            onChange(description_html);
+            setValue("isMigrationUpdate", !!options?.isMigrationUpdate);
+            setValue("description_json", description_json);
+            hasUnsavedChanges.current = true;
+            debouncedFormSave();
+          }}
+          placeholder={placeholder ?? ((isFocused, value) => t(getDescriptionPlaceholderI18n(isFocused, value)))}
+          searchMentionCallback={async (payload) =>
+            await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+              ...payload,
+              project_id: projectId,
+            })
+          }
+          containerClassName={containerClassName}
+          uploadFile={async (blockId, file) => {
+            try {
+              const { asset_id } = await uploadEditorAsset({
+                blockId,
+                data: {
+                  entity_identifier: entityId,
+                  entity_type: fileAssetType,
+                },
+                file,
+                projectId,
+                workspaceSlug,
+              });
+              return asset_id;
+            } catch (error) {
+              console.log("Error in uploading asset:", error);
+              throw new Error("Asset upload failed. Please try again later.");
+            }
+          }}
+          duplicateFile={async (assetId: string) => {
+            try {
+              const { asset_id } = await duplicateEditorAsset({
+                assetId,
+                entityType: fileAssetType,
+                projectId,
+                workspaceSlug,
+              });
+              return asset_id;
+            } catch {
+              throw new Error("Asset duplication failed. Please try again later.");
+            }
+          }}
+        />
+      )}
+    />
+  );
+});
diff --git a/apps/web/core/components/editor/rich-text/editor.tsx b/apps/web/core/components/editor/rich-text/editor.tsx
new file mode 100644
index 0000000..cb2172b
--- /dev/null
+++ b/apps/web/core/components/editor/rich-text/editor.tsx
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { forwardRef } from "react";
+// plane imports
+import { RichTextEditorWithRef } from "@plane/editor";
+import type { EditorRefApi, IRichTextEditorProps, TFileHandler } from "@plane/editor";
+import type { MakeOptional, TSearchEntityRequestPayload, TSearchResponse } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { EditorMentionsRoot } from "@/components/editor/embeds/mentions";
+// hooks
+import { useEditorConfig, useEditorMention } from "@/hooks/editor";
+import { useMember } from "@/hooks/store/use-member";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
+// plane web hooks
+import { useEditorFlagging } from "@/hooks/use-editor-flagging";
+
+type RichTextEditorWrapperProps = MakeOptional<
+  Omit<IRichTextEditorProps, "fileHandler" | "mentionHandler" | "extendedEditorProps">,
+  "disabledExtensions" | "editable" | "flaggedExtensions" | "getEditorMetaData"
+> & {
+  workspaceSlug: string;
+  workspaceId: string;
+  projectId?: string;
+  issueSequenceId?: number;
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+        uploadFile: TFileHandler["upload"];
+        duplicateFile: TFileHandler["duplicate"];
+      }
+  );
+
+export const RichTextEditor = forwardRef(function RichTextEditor(
+  props: RichTextEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  const {
+    containerClassName,
+    editable,
+    workspaceSlug,
+    workspaceId,
+    projectId,
+    disabledExtensions: additionalDisabledExtensions = [],
+    ...rest
+  } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // editor flaggings
+  const { richText: richTextEditorExtensions } = useEditorFlagging({
+    workspaceSlug,
+    projectId,
+  });
+  // use editor mention
+  const { fetchMentions } = useEditorMention({
+    searchEntity: editable ? async (payload) => await props.searchMentionCallback(payload) : async () => ({}),
+  });
+  // editor config
+  const { getEditorFileHandlers } = useEditorConfig();
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
+  });
+
+  return (
+    <RichTextEditorWithRef
+      ref={ref}
+      disabledExtensions={[...richTextEditorExtensions.disabled, ...(additionalDisabledExtensions ?? [])]}
+      editable={editable}
+      flaggedExtensions={richTextEditorExtensions.flagged}
+      fileHandler={getEditorFileHandlers({
+        projectId,
+        uploadFile: editable ? props.uploadFile : async () => "",
+        duplicateFile: editable ? props.duplicateFile : async () => "",
+        workspaceId,
+        workspaceSlug,
+      })}
+      getEditorMetaData={getEditorMetaData}
+      mentionHandler={{
+        searchCallback: async (query) => {
+          const res = await fetchMentions(query);
+          if (!res) throw new Error("Failed in fetching mentions");
+          return res;
+        },
+        renderComponent: EditorMentionsRoot,
+        getMentionedEntityDetails: (id) => ({
+          display_name: getUserDetails(id)?.display_name ?? "",
+        }),
+      }}
+      extendedEditorProps={{}}
+      {...rest}
+      containerClassName={cn("relative pb-3 pl-3", containerClassName)}
+    />
+  );
+});
+
+RichTextEditor.displayName = "RichTextEditor";
diff --git a/apps/web/core/components/editor/rich-text/index.ts b/apps/web/core/components/editor/rich-text/index.ts
new file mode 100644
index 0000000..4c9233a
--- /dev/null
+++ b/apps/web/core/components/editor/rich-text/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./editor";
diff --git a/apps/web/core/components/editor/sticky-editor/color-palette.tsx b/apps/web/core/components/editor/sticky-editor/color-palette.tsx
new file mode 100644
index 0000000..1bdbaa4
--- /dev/null
+++ b/apps/web/core/components/editor/sticky-editor/color-palette.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TSticky } from "@plane/types";
+
+export const STICKY_COLORS_LIST: {
+  key: string;
+  label: string;
+  backgroundColor: string;
+}[] = [
+  {
+    key: "gray",
+    label: "Gray",
+    backgroundColor: "var(--editor-colors-gray-background)",
+  },
+  {
+    key: "peach",
+    label: "Peach",
+    backgroundColor: "var(--editor-colors-peach-background)",
+  },
+  {
+    key: "pink",
+    label: "Pink",
+    backgroundColor: "var(--editor-colors-pink-background)",
+  },
+  {
+    key: "orange",
+    label: "Orange",
+    backgroundColor: "var(--editor-colors-orange-background)",
+  },
+  {
+    key: "green",
+    label: "Green",
+    backgroundColor: "var(--editor-colors-green-background)",
+  },
+  {
+    key: "light-blue",
+    label: "Light blue",
+    backgroundColor: "var(--editor-colors-light-blue-background)",
+  },
+  {
+    key: "dark-blue",
+    label: "Dark blue",
+    backgroundColor: "var(--editor-colors-dark-blue-background)",
+  },
+  {
+    key: "purple",
+    label: "Purple",
+    backgroundColor: "var(--editor-colors-purple-background)",
+  },
+];
+
+type TProps = {
+  handleUpdate: (data: Partial<TSticky>) => Promise<void>;
+};
+
+export function ColorPalette(props: TProps) {
+  const { handleUpdate } = props;
+  return (
+    <div className="shadow absolute bottom-5 left-0 z-10 mb-2 w-56 rounded-md bg-surface-1 p-2">
+      <div className="mb-2 text-13 font-semibold text-placeholder">Background colors</div>
+      <div className="flex flex-wrap gap-2">
+        {STICKY_COLORS_LIST.map((color) => (
+          <button
+            key={color.key}
+            type="button"
+            onClick={() => {
+              handleUpdate({
+                background_color: color.key,
+              });
+            }}
+            className="h-6 w-6 rounded-md transition-all hover:ring-2 hover:ring-accent-strong focus:ring-2 focus:ring-accent-strong focus:outline-none"
+            style={{
+              backgroundColor: color.backgroundColor,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/editor/sticky-editor/editor.tsx b/apps/web/core/components/editor/sticky-editor/editor.tsx
new file mode 100644
index 0000000..75d67cd
--- /dev/null
+++ b/apps/web/core/components/editor/sticky-editor/editor.tsx
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+// plane constants
+import type { EIssueCommentAccessSpecifier } from "@plane/constants";
+// plane editor
+import { LiteTextEditorWithRef } from "@plane/editor";
+import type { EditorRefApi, ILiteTextEditorProps, TFileHandler } from "@plane/editor";
+// components
+import type { TSticky } from "@plane/types";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useEditorConfig } from "@/hooks/editor";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
+// plane web hooks
+import { useEditorFlagging } from "@/hooks/use-editor-flagging";
+import { StickyEditorToolbar } from "./toolbar";
+
+interface StickyEditorWrapperProps extends Omit<
+  Omit<ILiteTextEditorProps, "extendedEditorProps">,
+  "disabledExtensions" | "editable" | "flaggedExtensions" | "fileHandler" | "mentionHandler" | "getEditorMetaData"
+> {
+  workspaceSlug: string;
+  workspaceId: string;
+  projectId?: string;
+  accessSpecifier?: EIssueCommentAccessSpecifier;
+  handleAccessChange?: (accessKey: EIssueCommentAccessSpecifier) => void;
+  showAccessSpecifier?: boolean;
+  showSubmitButton?: boolean;
+  isSubmitting?: boolean;
+  showToolbarInitially?: boolean;
+  showToolbar?: boolean;
+  uploadFile: TFileHandler["upload"];
+  duplicateFile: TFileHandler["duplicate"];
+  parentClassName?: string;
+  handleColorChange: (data: Partial<TSticky>) => Promise<void>;
+  handleDelete: () => void;
+}
+
+export const StickyEditor = React.forwardRef(function StickyEditor(
+  props: StickyEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  const {
+    containerClassName,
+    workspaceSlug,
+    workspaceId,
+    projectId,
+    handleDelete,
+    handleColorChange,
+    showToolbarInitially = true,
+    showToolbar = true,
+    parentClassName = "",
+    uploadFile,
+    duplicateFile,
+    ...rest
+  } = props;
+  // states
+  const [isFocused, setIsFocused] = useState(showToolbarInitially);
+  // editor flaggings
+  const { liteText: liteTextEditorExtensions } = useEditorFlagging({
+    workspaceSlug,
+    projectId,
+  });
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
+  });
+  // editor config
+  const { getEditorFileHandlers } = useEditorConfig();
+  function isMutableRefObject<T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T | null> {
+    return !!ref && typeof ref === "object" && "current" in ref;
+  }
+  // derived values
+  const editorRef = isMutableRefObject<EditorRefApi>(ref) ? ref.current : null;
+
+  return (
+    <div
+      className={cn("relative rounded-sm border border-subtle", parentClassName)}
+      onFocus={() => !showToolbarInitially && setIsFocused(true)}
+      onBlur={() => !showToolbarInitially && setIsFocused(false)}
+    >
+      <LiteTextEditorWithRef
+        ref={ref}
+        disabledExtensions={[...liteTextEditorExtensions.disabled, "enter-key"]}
+        flaggedExtensions={liteTextEditorExtensions.flagged}
+        editable
+        fileHandler={getEditorFileHandlers({
+          projectId,
+          uploadFile,
+          duplicateFile,
+          workspaceId,
+          workspaceSlug,
+        })}
+        getEditorMetaData={getEditorMetaData}
+        mentionHandler={{
+          renderComponent: () => <></>,
+        }}
+        extendedEditorProps={{}}
+        containerClassName={cn(containerClassName, "relative")}
+        {...rest}
+      />
+      {showToolbar && (
+        <div
+          className={cn("h-[60px] origin-top px-4 transition-all duration-300 ease-out", {
+            "max-h-[60px] scale-y-100 opacity-100": isFocused,
+            "invisible max-h-0 scale-y-0 opacity-0": !isFocused,
+          })}
+        >
+          <StickyEditorToolbar
+            executeCommand={(item) => {
+              // TODO: update this while toolbar homogenization
+              // @ts-expect-error type mismatch here
+              editorRef?.executeMenuItemCommand({
+                itemKey: item.itemKey,
+                ...item.extraProps,
+              });
+            }}
+            handleDelete={handleDelete}
+            handleColorChange={handleColorChange}
+            editorRef={editorRef}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
+
+StickyEditor.displayName = "StickyEditor";
diff --git a/apps/web/core/components/editor/sticky-editor/index.ts b/apps/web/core/components/editor/sticky-editor/index.ts
new file mode 100644
index 0000000..459e4de
--- /dev/null
+++ b/apps/web/core/components/editor/sticky-editor/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./editor";
+export * from "./toolbar";
diff --git a/apps/web/core/components/editor/sticky-editor/toolbar.tsx b/apps/web/core/components/editor/sticky-editor/toolbar.tsx
new file mode 100644
index 0000000..3acdf53
--- /dev/null
+++ b/apps/web/core/components/editor/sticky-editor/toolbar.tsx
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState, useCallback } from "react";
+import { DeleteOutline, PaletteOutline } from "@makeplane/propel/icons";
+// editor
+import type { EditorRefApi } from "@plane/editor";
+// ui
+import { useOutsideClickDetector } from "@plane/hooks";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TSticky } from "@plane/types";
+// constants
+import { cn } from "@plane/utils";
+import type { ToolbarMenuItem } from "@plane/editor";
+import { TOOLBAR_ITEMS } from "@plane/editor";
+// helpers
+import { ColorPalette } from "./color-palette";
+
+type Props = {
+  executeCommand: (item: ToolbarMenuItem) => void;
+  editorRef: EditorRefApi | null;
+  handleColorChange: (data: Partial<TSticky>) => Promise<void>;
+  handleDelete: () => void;
+};
+
+const toolbarItems = TOOLBAR_ITEMS.sticky;
+
+export function StickyEditorToolbar(props: Props) {
+  const { executeCommand, editorRef, handleColorChange, handleDelete } = props;
+
+  // State to manage active states of toolbar items
+  const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
+  const [showColorPalette, setShowColorPalette] = useState(false);
+  const colorPaletteRef = React.useRef<HTMLDivElement>(null);
+  // Function to update active states
+  const updateActiveStates = useCallback(() => {
+    if (!editorRef) return;
+    const newActiveStates: Record<string, boolean> = {};
+    Object.values(toolbarItems)
+      .flat()
+      .forEach((item) => {
+        // TODO: update this while toolbar homogenization
+        // @ts-expect-error type mismatch here
+        newActiveStates[item.renderKey] = editorRef.isMenuItemActive({
+          itemKey: item.itemKey,
+          ...item.extraProps,
+        });
+      });
+    setActiveStates(newActiveStates);
+  }, [editorRef]);
+
+  // useEffect to call updateActiveStates when isActive prop changes
+  useEffect(() => {
+    if (!editorRef) return;
+    const unsubscribe = editorRef.onStateChange(updateActiveStates);
+    updateActiveStates();
+    return () => unsubscribe();
+  }, [editorRef, updateActiveStates]);
+
+  useOutsideClickDetector(colorPaletteRef, () => setShowColorPalette(false));
+
+  return (
+    <div className="flex h-full w-full justify-between">
+      <div className="my-auto flex gap-4" ref={colorPaletteRef}>
+        {/* color palette */}
+        {showColorPalette && <ColorPalette handleUpdate={handleColorChange} />}
+        <Tooltip label="Background color">
+          <button type="button" onClick={() => setShowColorPalette(!showColorPalette)} className="flex text-primary/50">
+            <PaletteOutline className="my-auto size-4" />
+          </button>
+        </Tooltip>
+
+        <div className="my-auto flex w-fit items-stretch justify-between gap-4 rounded-sm p-1">
+          <div className="my-auto flex items-stretch gap-4">
+            {Object.keys(toolbarItems).map((key) => (
+              <div key={key} className={cn("flex items-stretch gap-4", {})}>
+                {toolbarItems[key].map((item) => {
+                  const isItemActive = activeStates[item.renderKey];
+
+                  return (
+                    <Tooltip key={item.renderKey} label={item.name} shortcut={item.shortcut?.join(" + ")}>
+                      <button
+                        type="button"
+                        onClick={() => executeCommand(item)}
+                        className={cn("grid aspect-square place-items-center rounded-xs p-0.5 text-primary/50", {})}
+                      >
+                        <item.icon
+                          className={cn("h-3.5 w-3.5", {
+                            "font-heavy": isItemActive,
+                          })}
+                          strokeWidth={2.5}
+                        />
+                      </button>
+                    </Tooltip>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {/* delete action */}
+      <Tooltip label="Delete">
+        <button type="button" onClick={handleDelete} className="my-auto text-primary/50">
+          <DeleteOutline className="size-4" />
+        </button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/empty-state/comic-box-button.tsx b/apps/web/core/components/empty-state/comic-box-button.tsx
new file mode 100644
index 0000000..222e053
--- /dev/null
+++ b/apps/web/core/components/empty-state/comic-box-button.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Ref } from "react";
+import { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { Popover } from "@headlessui/react";
+// plane imports
+import { Button } from "@plane/propel/button";
+
+type Props = {
+  label: string;
+  icon?: any;
+  title: string | undefined;
+  description: string | undefined;
+  onClick?: () => void;
+  disabled?: boolean;
+};
+
+export function ComicBoxButton(props: Props) {
+  const { label, icon, title, description, onClick, disabled = false } = props;
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>();
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "right-end",
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 10],
+        },
+      },
+    ],
+  });
+
+  return (
+    <Popover as="div" className="relative">
+      <Popover.Button as={Fragment}>
+        <Button variant="primary" size="lg" ref={setReferenceElement} onClick={onClick} disabled={disabled}>
+          {icon}
+          <span className="leading-4">{label}</span>
+          <span className="relative h-2 w-2">
+            <div
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+              className={`bg-blue-300 absolute right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`}
+            />
+            <div className={`bg-blue-400/40 absolute right-0 mt-0.5 mr-0.5 h-1.5 w-1.5 rounded-full`} />
+          </span>
+        </Button>
+      </Popover.Button>
+      {isHovered && (
+        <Popover.Panel className="fixed z-10" static>
+          <div
+            className="relative flex w-52 flex-col overflow-hidden rounded-sm rounded-xl border border-subtle bg-layer-1 p-5 hover:bg-layer-1-hover lg:w-60 xl:w-80"
+            ref={setPopperElement as Ref<HTMLDivElement>}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="rounded-lb-sm absolute bottom-2 -left-[5px] h-2 w-2 rotate-45 transform border border-t-0 border-r-0 border-subtle bg-surface-1" />
+            <h3 className="w-full text-16 font-semibold">{title}</h3>
+            <h4 className="mt-1 text-13">{description}</h4>
+          </div>
+        </Popover.Panel>
+      )}
+    </Popover>
+  );
+}
diff --git a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
new file mode 100644
index 0000000..593e5ad
--- /dev/null
+++ b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// ui
+import { Button } from "@plane/propel/button";
+// utils
+import { cn } from "@plane/utils";
+
+type EmptyStateSize = "sm" | "base" | "lg";
+
+type ButtonConfig = {
+  text: string;
+  prependIcon?: React.ReactElement;
+  appendIcon?: React.ReactElement;
+  onClick?: () => void;
+  disabled?: boolean;
+};
+
+type Props = {
+  title: string;
+  description?: string;
+  assetPath?: string;
+  size?: EmptyStateSize;
+  primaryButton?: ButtonConfig;
+  secondaryButton?: ButtonConfig;
+  customPrimaryButton?: React.ReactNode;
+  customSecondaryButton?: React.ReactNode;
+  className?: string;
+};
+
+const sizeClasses = {
+  sm: "md:min-w-[24rem] max-w-[45rem]",
+  base: "md:min-w-[28rem] max-w-[50rem]",
+  lg: "md:min-w-[30rem] max-w-[60rem]",
+} as const;
+
+function CustomButton({
+  config,
+  variant,
+  size,
+}: {
+  config: ButtonConfig;
+  variant: "primary" | "secondary";
+  size: EmptyStateSize;
+}) {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={config.onClick}
+      prependIcon={config.prependIcon}
+      appendIcon={config.appendIcon}
+      disabled={config.disabled}
+    >
+      {config.text}
+    </Button>
+  );
+}
+
+export const DetailedEmptyState = observer(function DetailedEmptyState(props: Props) {
+  const {
+    title,
+    description,
+    size = "lg",
+    primaryButton,
+    secondaryButton,
+    customPrimaryButton,
+    customSecondaryButton,
+    assetPath,
+    className,
+  } = props;
+
+  const hasButtons = primaryButton || secondaryButton || customPrimaryButton || customSecondaryButton;
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-full min-w-full items-center justify-center overflow-y-auto px-5 py-10 md:px-20",
+        className
+      )}
+    >
+      <div className={cn("flex flex-col gap-5", sizeClasses[size])}>
+        <div className="flex shrink-0 flex-col gap-1.5">
+          <h3 className={cn("text-18 font-semibold", { "font-medium": !description })}>{title}</h3>
+          {description && <p className="text-13">{description}</p>}
+        </div>
+
+        {assetPath && <img src={assetPath} alt={title} className="h-auto w-full" loading="lazy" />}
+
+        {hasButtons && (
+          <div className="relative flex w-full flex-shrink-0 items-center justify-center gap-2">
+            {/* primary button */}
+            {customPrimaryButton ??
+              (primaryButton?.text && <CustomButton config={primaryButton} variant="primary" size={size} />)}
+            {/* secondary button */}
+            {customSecondaryButton ??
+              (secondaryButton?.text && <CustomButton config={secondaryButton} variant="secondary" size={size} />)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/empty-state/helper.tsx b/apps/web/core/components/empty-state/helper.tsx
new file mode 100644
index 0000000..03460f6
--- /dev/null
+++ b/apps/web/core/components/empty-state/helper.tsx
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const getEmptyStateImagePath = (category: string, type: string, isLightMode: boolean) =>
+  `/empty-state/${category}/${type}-${isLightMode ? "light" : "dark"}.webp`;
diff --git a/apps/web/core/components/empty-state/section-empty-state-root.tsx b/apps/web/core/components/empty-state/section-empty-state-root.tsx
new file mode 100644
index 0000000..3d0a05a
--- /dev/null
+++ b/apps/web/core/components/empty-state/section-empty-state-root.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cn } from "@plane/utils";
+
+type Props = {
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+  actionElement?: React.ReactNode;
+  customClassName?: string;
+};
+
+export function SectionEmptyState(props: Props) {
+  const { title, description, icon, actionElement, customClassName } = props;
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-4 rounded-md border border-subtle p-10",
+        customClassName
+      )}
+    >
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex size-8 items-center justify-center rounded-sm bg-layer-1">{icon}</div>
+        <span className="text-13 font-medium">{title}</span>
+        {description && <span className="text-11 text-tertiary">{description}</span>}
+      </div>
+      {actionElement && <>{actionElement}</>}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/empty-state/simple-empty-state-root.tsx b/apps/web/core/components/empty-state/simple-empty-state-root.tsx
new file mode 100644
index 0000000..b927122
--- /dev/null
+++ b/apps/web/core/components/empty-state/simple-empty-state-root.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// utils
+import { cn } from "@plane/utils";
+
+type EmptyStateSize = "sm" | "lg";
+
+type Props = {
+  title: string;
+  description?: string;
+  assetPath?: string;
+  size?: EmptyStateSize;
+};
+
+const sizeConfig = {
+  sm: {
+    container: "size-24",
+    dimensions: 78,
+  },
+  lg: {
+    container: "size-28",
+    dimensions: 96,
+  },
+} as const;
+
+const getTitleClassName = (hasDescription: boolean) =>
+  cn("font-medium whitespace-pre-line", {
+    "text-13 text-placeholder": !hasDescription,
+    "text-16 text-tertiary": hasDescription,
+  });
+
+export const SimpleEmptyState = observer(function SimpleEmptyState(props: Props) {
+  const { title, description, size = "sm", assetPath } = props;
+
+  return (
+    <div className="flex flex-col items-center gap-2.5 text-center">
+      {assetPath && (
+        <div className={sizeConfig[size].container}>
+          <img src={assetPath} alt={title} className="h-full w-full object-contain" />
+        </div>
+      )}
+
+      <h3 className={getTitleClassName(!!description)}>{title}</h3>
+
+      {description && <p className="text-14 font-medium whitespace-pre-line text-placeholder">{description}</p>}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/epic-modal/index.ts b/apps/web/core/components/epic-modal/index.ts
new file mode 100644
index 0000000..dd65a9e
--- /dev/null
+++ b/apps/web/core/components/epic-modal/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./modal";
diff --git a/apps/web/core/components/epic-modal/modal.tsx b/apps/web/core/components/epic-modal/modal.tsx
new file mode 100644
index 0000000..90d7c9f
--- /dev/null
+++ b/apps/web/core/components/epic-modal/modal.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type { TIssue } from "@plane/types";
+
+export interface EpicModalProps {
+  data?: Partial<TIssue>;
+  isOpen: boolean;
+  onClose: () => void;
+  beforeFormSubmit?: () => Promise<void>;
+  onSubmit?: (res: TIssue) => Promise<void>;
+  fetchIssueDetails?: boolean;
+  primaryButtonText?: {
+    default: string;
+    loading: string;
+  };
+  isProjectSelectionDisabled?: boolean;
+}
+
+export function CreateUpdateEpicModal(_props: EpicModalProps) {
+  return <></>;
+}
diff --git a/apps/web/core/components/estimates/create/helper.tsx b/apps/web/core/components/estimates/create/helper.tsx
new file mode 100644
index 0000000..12c91f6
--- /dev/null
+++ b/apps/web/core/components/estimates/create/helper.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TEstimateSystemKeys } from "@plane/types";
+import { EEstimateSystem } from "@plane/types";
+
+export const isEstimateSystemEnabled = (key: TEstimateSystemKeys) => {
+  switch (key) {
+    case EEstimateSystem.POINTS:
+      return true;
+    case EEstimateSystem.CATEGORIES:
+      return true;
+    default:
+      return false;
+  }
+};
diff --git a/apps/web/core/components/estimates/create/modal.tsx b/apps/web/core/components/estimates/create/modal.tsx
new file mode 100644
index 0000000..2ef7ce6
--- /dev/null
+++ b/apps/web/core/components/estimates/create/modal.tsx
@@ -0,0 +1,215 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { ChevronLeftOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IEstimateFormData, TEstimateSystemKeys, TEstimatePointsObject, TEstimateTypeError } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+// local imports
+import { EstimatePointCreateRoot } from "../points";
+import { EstimateCreateStageOne } from "./stage-one";
+
+type TCreateEstimateModal = {
+  workspaceSlug: string;
+  projectId: string;
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const CreateEstimateModal = observer(function CreateEstimateModal(props: TCreateEstimateModal) {
+  // props
+  const { workspaceSlug, projectId, isOpen, handleClose } = props;
+  // hooks
+  const { createEstimate } = useProjectEstimates();
+  const { t } = useTranslation();
+  // states
+  const [estimateSystem, setEstimateSystem] = useState<TEstimateSystemKeys>(EEstimateSystem.POINTS);
+  const [estimatePoints, setEstimatePoints] = useState<TEstimatePointsObject[] | undefined>(undefined);
+  const [estimatePointError, setEstimatePointError] = useState<TEstimateTypeError>(undefined);
+  const [buttonLoader, setButtonLoader] = useState(false);
+
+  const handleUpdatePoints = (newPoints: TEstimatePointsObject[] | undefined) => setEstimatePoints(newPoints);
+
+  const handleEstimatePointError = (
+    key: number,
+    oldValue: string,
+    newValue: string,
+    message: string | undefined,
+    mode: "add" | "delete" = "add"
+  ) => {
+    setEstimatePointError((prev) => {
+      if (mode === "add") {
+        return { ...prev, [key]: { oldValue, newValue, message } };
+      } else {
+        const newError = { ...prev };
+        delete newError[key];
+        return newError;
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      setEstimateSystem(EEstimateSystem.POINTS);
+      setEstimatePoints(undefined);
+      setEstimatePointError([]);
+    }
+  }, [isOpen]);
+
+  const validateEstimatePointError = () => {
+    let estimateError = false;
+    if (!estimatePointError) return estimateError;
+
+    Object.keys(estimatePointError || {}).forEach((key) => {
+      const currentKey = key as unknown as number;
+      if (
+        estimatePointError[currentKey]?.oldValue != estimatePointError[currentKey]?.newValue ||
+        estimatePointError[currentKey]?.newValue === "" ||
+        estimatePointError[currentKey]?.message
+      ) {
+        estimateError = true;
+      }
+    });
+
+    return estimateError;
+  };
+
+  const handleCreateEstimate = async () => {
+    if (!validateEstimatePointError()) {
+      try {
+        if (!workspaceSlug || !projectId || !estimatePoints) return;
+        setButtonLoader(true);
+        const payload: IEstimateFormData = {
+          estimate: {
+            name: ESTIMATE_SYSTEMS[estimateSystem]?.name,
+            type: estimateSystem,
+            last_used: true,
+          },
+          estimate_points: estimatePoints,
+        };
+        await createEstimate(workspaceSlug, projectId, payload);
+        setButtonLoader(false);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("project_settings.estimates.toasts.created.success.title"),
+          message: t("project_settings.estimates.toasts.created.success.message"),
+        });
+        handleClose();
+      } catch {
+        setButtonLoader(false);
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("project_settings.estimates.toasts.created.error.title"),
+          message: t("project_settings.estimates.toasts.created.error.message"),
+        });
+      }
+    } else {
+      setEstimatePointError((prev) => {
+        const newError = { ...prev };
+        Object.keys(newError || {}).forEach((key) => {
+          const currentKey = key as unknown as number;
+          if (
+            newError[currentKey]?.newValue != "" &&
+            newError[currentKey]?.oldValue === newError[currentKey]?.newValue
+          ) {
+            delete newError[currentKey];
+          } else {
+            newError[currentKey].message =
+              newError[currentKey].message || t("project_settings.estimates.validation.remove_empty");
+          }
+        });
+        return newError;
+      });
+    }
+  };
+
+  // derived values
+  const renderEstimateStepsCount = useMemo(() => (estimatePoints ? "2" : "1"), [estimatePoints]);
+  // const isEstimatePointError = useMemo(() => {
+  //   if (!estimatePointError) return false;
+  //   return Object.keys(estimatePointError).length > 0;
+  // }, [estimatePointError]);
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <div className="relative space-y-6 py-5">
+        {/* heading */}
+        <div className="relative flex items-center justify-between gap-2 px-5">
+          <div className="relative flex items-center gap-1">
+            {estimatePoints && (
+              <div
+                onClick={() => {
+                  setEstimateSystem(EEstimateSystem.POINTS);
+                  handleUpdatePoints(undefined);
+                }}
+                className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center"
+              >
+                <ChevronLeftOutline className="h-4 w-4" />
+              </div>
+            )}
+            <div className="text-18 font-medium text-primary">{t("project_settings.estimates.new")}</div>
+          </div>
+          <div className="text-gray-400 text-11">
+            {t("project_settings.estimates.create.step", {
+              step: renderEstimateStepsCount,
+              total: 2,
+            })}
+          </div>
+        </div>
+
+        {/* estimate steps */}
+        <div className="px-5">
+          {!estimatePoints && (
+            <EstimateCreateStageOne
+              estimateSystem={estimateSystem}
+              handleEstimateSystem={setEstimateSystem}
+              handleEstimatePoints={(templateType: string) =>
+                handleUpdatePoints(ESTIMATE_SYSTEMS[estimateSystem].templates[templateType].values)
+              }
+            />
+          )}
+          {estimatePoints && (
+            <EstimatePointCreateRoot
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              estimateId={undefined}
+              estimateType={estimateSystem}
+              estimatePoints={estimatePoints}
+              setEstimatePoints={setEstimatePoints}
+              estimatePointError={estimatePointError}
+              handleEstimatePointError={handleEstimatePointError}
+            />
+          )}
+          {/* {isEstimatePointError && (
+            <div className="pt-5 text-13 text-danger-primary">
+              Estimate points can't be empty. Enter a value in each field or remove those you don't have
+              values for.
+            </div>
+          )} */}
+        </div>
+
+        <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
+          <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
+            {t("common.cancel")}
+          </Button>
+          {estimatePoints && (
+            <Button variant="primary" size="lg" onClick={handleCreateEstimate} disabled={buttonLoader}>
+              {buttonLoader ? t("common.creating") : t("project_settings.estimates.create.label")}
+            </Button>
+          )}
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/estimates/create/stage-one.tsx b/apps/web/core/components/estimates/create/stage-one.tsx
new file mode 100644
index 0000000..e3a5a80
--- /dev/null
+++ b/apps/web/core/components/estimates/create/stage-one.tsx
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { InfoOutline } from "@makeplane/propel/icons";
+// plane imports
+import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TEstimateSystemKeys } from "@plane/types";
+// helpers
+import { isEstimateSystemEnabled } from "./helper";
+import { convertMinutesToHoursMinutesString } from "@plane/utils";
+// components
+import { UpgradeBadge } from "@/components/workspace/upgrade-badge";
+import { RadioInput } from "../radio-select";
+
+type TEstimateCreateStageOne = {
+  estimateSystem: TEstimateSystemKeys;
+  handleEstimateSystem: (value: TEstimateSystemKeys) => void;
+  handleEstimatePoints: (value: string) => void;
+};
+
+export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
+  const { estimateSystem, handleEstimateSystem, handleEstimatePoints } = props;
+
+  // i18n
+  const { t } = useTranslation();
+
+  const currentEstimateSystem = ESTIMATE_SYSTEMS[estimateSystem] || undefined;
+
+  if (!currentEstimateSystem) return <></>;
+  return (
+    <div className="space-y-6">
+      <div className="mb-2 gap-2 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
+        <RadioInput
+          options={Object.keys(ESTIMATE_SYSTEMS)
+            .map((system) => {
+              const currentSystem = system as TEstimateSystemKeys;
+              const isEnabled = isEstimateSystemEnabled(currentSystem);
+              if (!isEnabled) return null;
+              return {
+                label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
+                  <div className="relative flex cursor-no-drop items-center gap-2 text-tertiary">
+                    {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
+                    <Tooltip label={t("common.coming_soon")}>
+                      <InfoOutline width={12} height={12} />
+                    </Tooltip>
+                  </div>
+                ) : !isEnabled ? (
+                  <div className="relative flex cursor-no-drop items-center gap-2 text-tertiary">
+                    {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
+                    <UpgradeBadge />
+                  </div>
+                ) : (
+                  <div>{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}</div>
+                ),
+                value: system,
+                disabled: !isEnabled,
+              };
+            })
+            .filter((option) => option !== null)}
+          name="estimate-radio-input"
+          label={t("project_settings.estimates.create.choose_estimate_system")}
+          labelClassName="text-13 font-medium text-secondary mb-1.5"
+          wrapperClassName="relative flex flex-wrap gap-14"
+          fieldClassName="relative flex items-center gap-1.5"
+          buttonClassName="size-4"
+          selected={estimateSystem}
+          onChange={(value) => handleEstimateSystem(value as TEstimateSystemKeys)}
+        />
+      </div>
+      {ESTIMATE_SYSTEMS[estimateSystem]?.is_available && !ESTIMATE_SYSTEMS[estimateSystem]?.is_ee && (
+        <>
+          <div className="space-y-1.5">
+            <div className="text-13 font-medium text-secondary">
+              {t("project_settings.estimates.create.start_from_scratch")}
+            </div>
+            <button
+              className="block w-full space-y-1 rounded-md border border-subtle p-3 py-2.5 text-left hover:bg-layer-transparent-hover"
+              onClick={() => handleEstimatePoints("custom")}
+            >
+              <p className="text-14 font-medium">{t("project_settings.estimates.create.custom")}</p>
+              <p className="text-11 text-tertiary">
+                {/* TODO: Translate here */}
+                Add your own <span className="lowercase">{currentEstimateSystem.name}</span> from scratch.
+              </p>
+            </button>
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="text-13 font-medium text-secondary">
+              {t("project_settings.estimates.create.choose_template")}
+            </div>
+            <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+              {Object.keys(currentEstimateSystem.templates).map((name) =>
+                currentEstimateSystem.templates[name]?.hide ? null : (
+                  <button
+                    key={name}
+                    className="space-y-1 rounded-md border border-subtle p-3 py-2.5 text-left hover:bg-surface-2"
+                    onClick={() => handleEstimatePoints(name)}
+                  >
+                    <p className="text-14 font-medium">{currentEstimateSystem.templates[name]?.title}</p>
+                    <p className="text-11 text-tertiary">
+                      {currentEstimateSystem.templates[name]?.values
+                        ?.map((template) =>
+                          estimateSystem === (EEstimateSystem.TIME as TEstimateSystemKeys)
+                            ? convertMinutesToHoursMinutesString(Number(template.value)).trim()
+                            : template.value
+                        )
+                        ?.join(", ")}
+                    </p>
+                  </button>
+                )
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+//
diff --git a/apps/web/core/components/estimates/delete/modal.tsx b/apps/web/core/components/estimates/delete/modal.tsx
new file mode 100644
index 0000000..e6b39fc
--- /dev/null
+++ b/apps/web/core/components/estimates/delete/modal.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useEstimate } from "@/hooks/store/estimates/use-estimate";
+import { useProject } from "@/hooks/store/use-project";
+
+type TDeleteEstimateModal = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const DeleteEstimateModal = observer(function DeleteEstimateModal(props: TDeleteEstimateModal) {
+  // props
+  const { workspaceSlug, projectId, estimateId, isOpen, handleClose } = props;
+  // hooks
+  const { areEstimateEnabledByProjectId, deleteEstimate } = useProjectEstimates();
+  const { asJson: estimate } = useEstimate(estimateId);
+  const { updateProject } = useProject();
+  // states
+  const [buttonLoader, setButtonLoader] = useState(false);
+
+  const handleDeleteEstimate = async () => {
+    try {
+      if (!workspaceSlug || !projectId || !estimateId) return;
+      setButtonLoader(true);
+      await deleteEstimate(workspaceSlug, projectId, estimateId);
+      if (areEstimateEnabledByProjectId(projectId)) {
+        await updateProject(workspaceSlug, projectId, { estimate: null });
+      }
+      setButtonLoader(false);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Estimate deleted",
+        message: "Estimate has been removed from your project.",
+      });
+      handleClose();
+    } catch (_error) {
+      setButtonLoader(false);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Estimate creation failed",
+        message: "We were unable to delete the estimate, please try again.",
+      });
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <div className="relative space-y-6 py-5">
+        {/* heading */}
+        <div className="relative flex items-center justify-between gap-2 px-5">
+          <div className="text-18 font-medium text-primary">Delete Estimate System</div>
+        </div>
+
+        {/* estimate steps */}
+        <div className="px-5">
+          <div className="text-14 text-secondary">
+            Deleting the estimate <span className="font-bold text-primary">{estimate?.name}</span>
+             system will remove it from all work items permanently. This action cannot be undone. If you add
+            estimates again, you will need to update all the work items.
+          </div>
+        </div>
+
+        <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
+          <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
+            Cancel
+          </Button>
+          <Button variant="error-fill" size="lg" onClick={handleDeleteEstimate} disabled={buttonLoader}>
+            {buttonLoader ? "Deleting" : "Delete Estimate"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/estimates/empty-screen.tsx b/apps/web/core/components/estimates/empty-screen.tsx
new file mode 100644
index 0000000..0591a0d
--- /dev/null
+++ b/apps/web/core/components/estimates/empty-screen.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+
+type TEstimateEmptyScreen = {
+  onButtonClick: () => void;
+};
+
+export function EstimateEmptyScreen(props: TEstimateEmptyScreen) {
+  // props
+  const { onButtonClick } = props;
+  const { resolvedTheme } = useTheme();
+
+  const { t } = useTranslation();
+
+  const resolvedPath = `/empty-state/project-settings/estimates-${resolvedTheme === "light" ? "light" : "dark"}.png`;
+  return (
+    <DetailedEmptyState
+      title={""}
+      description={""}
+      assetPath={resolvedPath}
+      className="w-full p-0!"
+      primaryButton={{
+        text: t("project_settings.empty_state.estimates.primary_button"),
+        onClick: () => {
+          onButtonClick();
+        },
+      }}
+    />
+  );
+}
diff --git a/apps/web/core/components/estimates/estimate-disable-switch.tsx b/apps/web/core/components/estimates/estimate-disable-switch.tsx
new file mode 100644
index 0000000..dbe7790
--- /dev/null
+++ b/apps/web/core/components/estimates/estimate-disable-switch.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Switch } from "@makeplane/propel/components/switch";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useProject } from "@/hooks/store/use-project";
+// i18n
+type TEstimateDisableSwitch = {
+  workspaceSlug: string;
+  projectId: string;
+  isAdmin: boolean;
+};
+
+export const EstimateDisableSwitch = observer(function EstimateDisableSwitch(props: TEstimateDisableSwitch) {
+  const { workspaceSlug, projectId, isAdmin } = props;
+  // i18n
+  const { t } = useTranslation();
+  // hooks
+  const { updateProject, currentProjectDetails } = useProject();
+  const { currentActiveEstimateId } = useProjectEstimates();
+
+  const currentProjectActiveEstimate = currentProjectDetails?.estimate || undefined;
+
+  const disableEstimate = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    try {
+      await updateProject(workspaceSlug, projectId, {
+        estimate: currentProjectActiveEstimate ? null : currentActiveEstimateId,
+      });
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: currentProjectActiveEstimate
+          ? t("project_settings.estimates.toasts.disabled.success.title")
+          : t("project_settings.estimates.toasts.enabled.success.title"),
+        message: currentProjectActiveEstimate
+          ? t("project_settings.estimates.toasts.disabled.success.message")
+          : t("project_settings.estimates.toasts.enabled.success.message"),
+      });
+    } catch (_err) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("project_settings.estimates.toasts.disabled.error.title"),
+        message: t("project_settings.estimates.toasts.disabled.error.message"),
+      });
+    }
+  };
+
+  return (
+    <Switch
+      size="sm"
+      checked={Boolean(currentProjectActiveEstimate)}
+      onCheckedChange={() => {
+        void disableEstimate();
+      }}
+      disabled={!isAdmin}
+      aria-label="Toggle estimates"
+    />
+  );
+});
diff --git a/apps/web/core/components/estimates/estimate-list-item-buttons.tsx b/apps/web/core/components/estimates/estimate-list-item-buttons.tsx
new file mode 100644
index 0000000..815c44b
--- /dev/null
+++ b/apps/web/core/components/estimates/estimate-list-item-buttons.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { DeleteOutline } from "@makeplane/propel/icons";
+
+type TEstimateListItem = {
+  estimateId: string;
+  isAdmin: boolean;
+  isEstimateEnabled: boolean;
+  isEditable: boolean;
+  onEditClick?: (estimateId: string) => void;
+  onDeleteClick?: (estimateId: string) => void;
+};
+
+export const EstimateListItemButtons = observer(function EstimateListItemButtons(props: TEstimateListItem) {
+  const { estimateId, isAdmin, isEditable, onDeleteClick } = props;
+
+  if (!isAdmin || !isEditable) return <></>;
+  return (
+    <div className="relative flex items-center gap-1">
+      <button
+        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-colors hover:bg-layer-1"
+        onClick={() => onDeleteClick && onDeleteClick(estimateId)}
+      >
+        <DeleteOutline width={12} height={12} />
+      </button>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/estimates/estimate-list-item.tsx b/apps/web/core/components/estimates/estimate-list-item.tsx
new file mode 100644
index 0000000..a93cc8d
--- /dev/null
+++ b/apps/web/core/components/estimates/estimate-list-item.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { EEstimateSystem } from "@plane/constants";
+import { convertMinutesToHoursMinutesString } from "@plane/utils";
+// components
+import { EstimateListItemButtons } from "./estimate-list-item-buttons";
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useEstimate } from "@/hooks/store/estimates/use-estimate";
+
+type TEstimateListItem = {
+  estimateId: string;
+  isAdmin: boolean;
+  isEstimateEnabled: boolean;
+  isEditable: boolean;
+  onEditClick?: (estimateId: string) => void;
+  onDeleteClick?: (estimateId: string) => void;
+};
+
+export const EstimateListItem = observer(function EstimateListItem(props: TEstimateListItem) {
+  const { estimateId } = props;
+  // store hooks
+  const { estimateById } = useProjectEstimates();
+  const { estimatePointIds, estimatePointById } = useEstimate(estimateId);
+  const currentEstimate = estimateById(estimateId);
+  // derived values
+  const estimatePointValues = estimatePointIds?.map((estimatePointId) => {
+    const estimatePoint = estimatePointById(estimatePointId);
+    if (estimatePoint) return estimatePoint.value;
+  });
+
+  if (!currentEstimate) return null;
+
+  return (
+    <SettingsBoxedControlItem
+      title={currentEstimate.name}
+      description={estimatePointValues
+        ?.map((estimatePointValue) => {
+          if (currentEstimate.type === EEstimateSystem.TIME) {
+            return convertMinutesToHoursMinutesString(Number(estimatePointValue));
+          }
+          return estimatePointValue;
+        })
+        .join(", ")}
+      control={<EstimateListItemButtons {...props} />}
+    />
+  );
+});
diff --git a/apps/web/core/components/estimates/estimate-list.tsx b/apps/web/core/components/estimates/estimate-list.tsx
new file mode 100644
index 0000000..6e919c5
--- /dev/null
+++ b/apps/web/core/components/estimates/estimate-list.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// local imports
+import { EstimateListItem } from "./estimate-list-item";
+
+type TEstimateList = {
+  estimateIds: string[] | undefined;
+  isAdmin: boolean;
+  isEstimateEnabled?: boolean;
+  isEditable?: boolean;
+  onEditClick?: (estimateId: string) => void;
+  onDeleteClick?: (estimateId: string) => void;
+};
+
+export const EstimateList = observer(function EstimateList(props: TEstimateList) {
+  const { estimateIds, isAdmin, isEstimateEnabled = false, isEditable = false, onEditClick, onDeleteClick } = props;
+
+  if (!estimateIds || estimateIds?.length <= 0) return <></>;
+  return (
+    <div>
+      {estimateIds &&
+        estimateIds.map((estimateId) => (
+          <EstimateListItem
+            key={estimateId}
+            estimateId={estimateId}
+            isAdmin={isAdmin}
+            isEstimateEnabled={isEstimateEnabled}
+            isEditable={isEditable}
+            onEditClick={onEditClick}
+            onDeleteClick={onDeleteClick}
+          />
+        ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/estimates/estimate-search.tsx b/apps/web/core/components/estimates/estimate-search.tsx
new file mode 100644
index 0000000..0b05f67
--- /dev/null
+++ b/apps/web/core/components/estimates/estimate-search.tsx
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+export const EstimateSearch = observer(function EstimateSearch() {
+  // hooks
+  const {} = {};
+
+  return <div>Estimate Search</div>;
+});
diff --git a/apps/web/core/components/estimates/index.ts b/apps/web/core/components/estimates/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/estimates/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/estimates/inputs/index.ts b/apps/web/core/components/estimates/inputs/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/estimates/inputs/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/estimates/inputs/number-input.tsx b/apps/web/core/components/estimates/inputs/number-input.tsx
new file mode 100644
index 0000000..3e4d30b
--- /dev/null
+++ b/apps/web/core/components/estimates/inputs/number-input.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+type TEstimateNumberInputProps = {
+  value?: number;
+  handleEstimateInputValue: (value: string) => void;
+};
+
+export function EstimateNumberInput(props: TEstimateNumberInputProps) {
+  const { value, handleEstimateInputValue } = props;
+
+  // i18n
+  const { t } = useTranslation();
+
+  return (
+    <input
+      value={value}
+      onChange={(e) => handleEstimateInputValue(e.target.value)}
+      className="w-full border-none bg-transparent px-2 py-2 text-13 focus:border-0 focus:ring-0 focus:outline-none"
+      placeholder={t("project_settings.estimates.create.enter_estimate_point")}
+      autoFocus
+      step="any"
+    />
+  );
+}
diff --git a/apps/web/core/components/estimates/inputs/root.tsx b/apps/web/core/components/estimates/inputs/root.tsx
new file mode 100644
index 0000000..3d122f1
--- /dev/null
+++ b/apps/web/core/components/estimates/inputs/root.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TEstimateSystemKeys } from "@plane/types";
+import { EEstimateSystem } from "@plane/types";
+// local imports
+import { EstimateNumberInput } from "./number-input";
+import { EstimateTextInput } from "./text-input";
+
+type TEstimateInputRootProps = {
+  estimateType: TEstimateSystemKeys;
+  handleEstimateInputValue: (value: string) => void;
+  value?: string;
+};
+
+export function EstimateInputRoot(props: TEstimateInputRootProps) {
+  const { estimateType, handleEstimateInputValue, value } = props;
+
+  switch (estimateType) {
+    case EEstimateSystem.POINTS:
+      return (
+        <EstimateNumberInput
+          value={value ? parseFloat(value) : undefined}
+          handleEstimateInputValue={handleEstimateInputValue}
+        />
+      );
+    case EEstimateSystem.CATEGORIES:
+      return <EstimateTextInput value={value} handleEstimateInputValue={handleEstimateInputValue} />;
+    case EEstimateSystem.TIME:
+      return <></>;
+    default:
+      return null;
+  }
+}
diff --git a/apps/web/core/components/estimates/inputs/text-input.tsx b/apps/web/core/components/estimates/inputs/text-input.tsx
new file mode 100644
index 0000000..50fe55d
--- /dev/null
+++ b/apps/web/core/components/estimates/inputs/text-input.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+type TEstimateTextInputProps = {
+  value?: string;
+  handleEstimateInputValue: (value: string) => void;
+};
+
+export function EstimateTextInput(props: TEstimateTextInputProps) {
+  const { value, handleEstimateInputValue } = props;
+
+  // i18n
+  const { t } = useTranslation();
+
+  return (
+    <input
+      value={value}
+      onChange={(e) => handleEstimateInputValue(e.target.value)}
+      className="w-full border-none bg-transparent px-3 py-2 text-13 focus:border-0 focus:ring-0 focus:outline-none"
+      placeholder={t("project_settings.estimates.create.enter_estimate_point")}
+      autoFocus
+      type="text"
+    />
+  );
+}
diff --git a/apps/web/core/components/estimates/loader-screen.tsx b/apps/web/core/components/estimates/loader-screen.tsx
new file mode 100644
index 0000000..d858df1
--- /dev/null
+++ b/apps/web/core/components/estimates/loader-screen.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Loader } from "@plane/ui";
+
+export function EstimateLoaderScreen() {
+  return (
+    <Loader className="mt-5 space-y-5">
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/estimates/points/create-root.tsx b/apps/web/core/components/estimates/points/create-root.tsx
new file mode 100644
index 0000000..ab3e984
--- /dev/null
+++ b/apps/web/core/components/estimates/points/create-root.tsx
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, SetStateAction } from "react";
+import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { estimateCount } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { AddOutline } from "@makeplane/propel/icons";
+import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeError } from "@plane/types";
+import { Sortable } from "@plane/ui";
+// local imports
+import { EstimatePointCreate } from "./create";
+import { EstimatePointItemPreview } from "./preview";
+
+type TEstimatePointCreateRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePoints: TEstimatePointsObject[];
+  setEstimatePoints: Dispatch<SetStateAction<TEstimatePointsObject[] | undefined>>;
+  estimatePointError?: TEstimateTypeError;
+  handleEstimatePointError?: (
+    key: number,
+    oldValue: string,
+    newValue: string,
+    message: string | undefined,
+    mode: "add" | "delete"
+  ) => void;
+};
+
+export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot(props: TEstimatePointCreateRoot) {
+  // props
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimateType,
+    estimatePoints,
+    setEstimatePoints,
+    estimatePointError,
+    handleEstimatePointError,
+  } = props;
+  // states
+  const [estimatePointCreate, setEstimatePointCreate] = useState<TEstimatePointsObject[] | undefined>(undefined);
+
+  const handleEstimatePoint = useCallback(
+    (mode: "add" | "remove" | "update", value: TEstimatePointsObject) => {
+      switch (mode) {
+        case "add":
+          setEstimatePoints((prevValue) => {
+            prevValue = prevValue ? [...prevValue] : [];
+            return [...prevValue, value];
+          });
+          break;
+        case "update":
+          setEstimatePoints((prevValue) => {
+            prevValue = prevValue ? [...prevValue] : [];
+            return prevValue.map((item) => (item.key === value.key ? { ...item, value: value.value } : item));
+          });
+          break;
+        case "remove":
+          setEstimatePoints((prevValue) => {
+            prevValue = prevValue ? [...prevValue] : [];
+            return prevValue.filter((item) => item.key !== value.key);
+          });
+          break;
+        default:
+          break;
+      }
+    },
+    [setEstimatePoints]
+  );
+
+  const handleEstimatePointCreate = (mode: "add" | "remove", value: TEstimatePointsObject) => {
+    switch (mode) {
+      case "add":
+        setEstimatePointCreate((prevValue) => {
+          prevValue = prevValue ? [...prevValue] : [];
+          return [...prevValue, value];
+        });
+        break;
+      case "remove":
+        setEstimatePointCreate((prevValue) => {
+          prevValue = prevValue ? [...prevValue] : [];
+          return prevValue.filter((item) => item.key !== value.key);
+        });
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleDragEstimatePoints = (updatedEstimatedOrder: TEstimatePointsObject[]) => {
+    const updatedEstimateKeysOrder = updatedEstimatedOrder.map((item, index) => ({ ...item, key: index + 1 }));
+    setEstimatePoints(() => updatedEstimateKeysOrder);
+  };
+
+  const handleCreate = () => {
+    if (estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1) {
+      const currentKey = estimatePoints.length + (estimatePointCreate?.length || 0) + 1;
+      handleEstimatePointCreate("add", {
+        id: undefined,
+        key: currentKey,
+        value: "",
+      });
+      handleEstimatePointError?.(currentKey, "", "", undefined, "add");
+    }
+  };
+
+  if (!workspaceSlug || !projectId) return <></>;
+  return (
+    <div className="space-y-1">
+      <div className="text-13 font-medium text-secondary capitalize">{estimateType}</div>
+
+      <div>
+        <Sortable
+          data={estimatePoints}
+          render={(value: TEstimatePointsObject) => (
+            <EstimatePointItemPreview
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              estimateId={estimateId}
+              estimateType={estimateType}
+              estimatePointId={value?.id}
+              estimatePoints={estimatePoints}
+              estimatePoint={value}
+              handleEstimatePointValueUpdate={(estimatePointValue: string) =>
+                handleEstimatePoint("update", { ...value, value: estimatePointValue })
+              }
+              handleEstimatePointValueRemove={() => handleEstimatePoint("remove", value)}
+              estimatePointError={estimatePointError?.[value.key] || undefined}
+              handleEstimatePointError={(
+                newValue: string,
+                message: string | undefined,
+                mode: "add" | "delete" = "add"
+              ) =>
+                handleEstimatePointError && handleEstimatePointError(value.key, value.value, newValue, message, mode)
+              }
+            />
+          )}
+          onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
+          keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
+        />
+      </div>
+
+      {estimatePointCreate &&
+        estimatePointCreate.map((estimatePoint) => (
+          <EstimatePointCreate
+            key={estimatePoint?.key}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            estimateId={estimateId}
+            estimateType={estimateType}
+            estimatePoints={estimatePoints}
+            handleEstimatePointValue={(estimatePointValue: string) =>
+              handleEstimatePoint("add", { ...estimatePoint, value: estimatePointValue })
+            }
+            closeCallBack={() => handleEstimatePointCreate("remove", estimatePoint)}
+            handleCreateCallback={() => estimatePointCreate.length === 1 && handleCreate()}
+            estimatePointError={estimatePointError?.[estimatePoint.key] || undefined}
+            handleEstimatePointError={(newValue: string, message: string | undefined, mode: "add" | "delete" = "add") =>
+              handleEstimatePointError &&
+              handleEstimatePointError(estimatePoint.key, estimatePoint.value, newValue, message, mode)
+            }
+          />
+        ))}
+      {estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1 && (
+        <Button variant="link" prependIcon={<AddOutline />} onClick={handleCreate}>
+          Add {estimateType}
+        </Button>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/estimates/points/create.tsx b/apps/web/core/components/estimates/points/create.tsx
new file mode 100644
index 0000000..cc81a86
--- /dev/null
+++ b/apps/web/core/components/estimates/points/create.tsx
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FormEvent } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, InfoOutline, TickOutline } from "@makeplane/propel/icons";
+import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
+import { Spinner } from "@plane/ui";
+import { cn, isEstimatePointValuesRepeated } from "@plane/utils";
+import { EstimateInputRoot } from "@/components/estimates/inputs/root";
+// helpers
+// hooks
+import { useEstimate } from "@/hooks/store/estimates/use-estimate";
+// plane web constants
+
+type TEstimatePointCreate = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePoints: TEstimatePointsObject[];
+  handleEstimatePointValue?: (estimateValue: string) => void;
+  closeCallBack: () => void;
+  handleCreateCallback: () => void;
+  estimatePointError?: TEstimateTypeErrorObject | undefined;
+  handleEstimatePointError?: (newValue: string, message: string | undefined, mode?: "add" | "delete") => void;
+};
+
+export const EstimatePointCreate = observer(function EstimatePointCreate(props: TEstimatePointCreate) {
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimateType,
+    estimatePoints,
+    handleEstimatePointValue,
+    closeCallBack,
+    handleCreateCallback,
+    estimatePointError,
+    handleEstimatePointError,
+  } = props;
+  // hooks
+  const { creteEstimatePoint } = useEstimate(estimateId);
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [estimateInputValue, setEstimateInputValue] = useState("");
+  const [loader, setLoader] = useState(false);
+
+  const handleSuccess = (value: string) => {
+    handleEstimatePointValue && handleEstimatePointValue(value);
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleClose = () => {
+    handleEstimatePointError && handleEstimatePointError(estimateInputValue, undefined, "delete");
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleEstimateInputValue = (value: string) => {
+    if (value.length <= MAX_ESTIMATE_POINT_INPUT_LENGTH) {
+      setEstimateInputValue(value);
+      if (handleEstimatePointError) handleEstimatePointError(value, undefined);
+    }
+  };
+
+  const handleCreate = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!workspaceSlug || !projectId) return;
+
+    if (handleEstimatePointError) handleEstimatePointError(estimateInputValue, undefined, "delete");
+
+    if (estimateInputValue) {
+      const currentEstimateType: EEstimateSystem | undefined = estimateType;
+      let isEstimateValid = false;
+
+      const currentEstimatePointValues = estimatePoints
+        .map((point) => point?.value || undefined)
+        .filter((value) => value != undefined);
+      const isRepeated =
+        (estimateType && isEstimatePointValuesRepeated(currentEstimatePointValues, estimateType, estimateInputValue)) ||
+        false;
+
+      if (!isRepeated) {
+        if (currentEstimateType && [EEstimateSystem.TIME, EEstimateSystem.POINTS].includes(currentEstimateType)) {
+          if (estimateInputValue && !isNaN(Number(estimateInputValue))) {
+            if (Number(estimateInputValue) <= 0) {
+              if (handleEstimatePointError)
+                handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.min_length"));
+              return;
+            } else {
+              isEstimateValid = true;
+            }
+          }
+        } else if (currentEstimateType && currentEstimateType === EEstimateSystem.CATEGORIES) {
+          if (estimateInputValue && estimateInputValue.length > 0 && isNaN(Number(estimateInputValue))) {
+            isEstimateValid = true;
+          }
+        }
+
+        if (isEstimateValid) {
+          if (estimateId != undefined) {
+            try {
+              setLoader(true);
+
+              const payload = {
+                key: estimatePoints?.length + 1,
+                value: estimateInputValue,
+              };
+              await creteEstimatePoint(workspaceSlug, projectId, payload);
+
+              setLoader(false);
+              handleEstimatePointError && handleEstimatePointError(estimateInputValue, undefined, "delete");
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: t("project_settings.estimates.toasts.created.success.title"),
+                message: t("project_settings.estimates.toasts.created.success.message"),
+              });
+              handleClose();
+            } catch {
+              setLoader(false);
+              handleEstimatePointError &&
+                handleEstimatePointError(
+                  estimateInputValue,
+                  t("project_settings.estimates.validation.unable_to_process")
+                );
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: t("project_settings.estimates.toasts.created.error.title"),
+                message: t("project_settings.estimates.toasts.created.error.message"),
+              });
+            }
+          } else {
+            handleSuccess(estimateInputValue);
+            if (handleCreateCallback) {
+              handleCreateCallback();
+            }
+          }
+        } else {
+          setLoader(false);
+          handleEstimatePointError &&
+            handleEstimatePointError(
+              estimateInputValue,
+              [EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(estimateType)
+                ? t("project_settings.estimates.validation.numeric")
+                : t("project_settings.estimates.validation.character")
+            );
+        }
+      } else
+        handleEstimatePointError &&
+          handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.already_exists"));
+    } else
+      handleEstimatePointError &&
+        handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.empty"));
+  };
+
+  return (
+    <form onSubmit={handleCreate} className="relative flex items-center gap-2 pr-2.5 text-14">
+      <div
+        className={cn(
+          "relative my-1 flex w-full items-center rounded-sm border",
+          estimatePointError?.message ? `border-danger-strong` : `border-subtle`
+        )}
+      >
+        <EstimateInputRoot
+          estimateType={estimateType}
+          handleEstimateInputValue={handleEstimateInputValue}
+          value={estimateInputValue}
+        />
+        {estimatePointError?.message && (
+          <Tooltip label={estimatePointError?.message} layout="stacked" side="bottom">
+            <div className="relative mr-3 flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center overflow-hidden text-danger-primary">
+              <InfoOutline width={14} height={14} />
+            </div>
+          </Tooltip>
+        )}
+      </div>
+
+      {estimateInputValue && estimateInputValue.length > 0 && (
+        <button
+          type="submit"
+          className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs text-success-primary transition-colors hover:bg-layer-1"
+          disabled={loader}
+        >
+          {loader ? <Spinner className="h-4 w-4" /> : <TickOutline width={14} height={14} />}
+        </button>
+      )}
+      <button
+        type="button"
+        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
+        onClick={handleClose}
+        disabled={loader}
+      >
+        <CloseOutline height={14} width={14} className="text-secondary" />
+      </button>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/estimates/points/index.ts b/apps/web/core/components/estimates/points/index.ts
new file mode 100644
index 0000000..26c9e6e
--- /dev/null
+++ b/apps/web/core/components/estimates/points/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./create-root";
diff --git a/apps/web/core/components/estimates/points/preview.tsx b/apps/web/core/components/estimates/points/preview.tsx
new file mode 100644
index 0000000..02d4855
--- /dev/null
+++ b/apps/web/core/components/estimates/points/preview.tsx
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { DeleteOutline, DragDropOutline, EditOutline } from "@makeplane/propel/icons";
+// plane imports
+import { EEstimateSystem, estimateCount } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
+import { convertMinutesToHoursMinutesString } from "@plane/utils";
+// local imports
+import { EstimatePointUpdate } from "./update";
+
+type TEstimatePointItemPreview = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePointId: string | undefined;
+  estimatePoint: TEstimatePointsObject;
+  estimatePoints: TEstimatePointsObject[];
+  handleEstimatePointValueUpdate?: (estimateValue: string) => void;
+  handleEstimatePointValueRemove?: () => void;
+  estimatePointError?: TEstimateTypeErrorObject | undefined;
+  handleEstimatePointError?: (newValue: string, message: string | undefined) => void;
+};
+
+export const EstimatePointItemPreview = observer(function EstimatePointItemPreview(props: TEstimatePointItemPreview) {
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimateType,
+    estimatePointId,
+    estimatePoint,
+    estimatePoints,
+    handleEstimatePointValueUpdate,
+    handleEstimatePointValueRemove,
+    estimatePointError,
+    handleEstimatePointError,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // state
+  const [estimatePointEditToggle, setEstimatePointEditToggle] = useState(false);
+  const [estimatePointDeleteToggle, setEstimatePointDeleteToggle] = useState(false);
+  // ref
+  const EstimatePointValueRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const estimatePointValueElement = EstimatePointValueRef.current;
+    if (!estimatePointValueElement || estimatePointEditToggle || estimatePointDeleteToggle) return;
+
+    const handleDoubleClick = () => setEstimatePointEditToggle(true);
+    estimatePointValueElement.addEventListener("dblclick", handleDoubleClick);
+
+    return () => {
+      estimatePointValueElement.removeEventListener("dblclick", handleDoubleClick);
+    };
+  }, [estimatePointDeleteToggle, estimatePointEditToggle]);
+
+  return (
+    <div>
+      {!estimatePointEditToggle && !estimatePointDeleteToggle && (
+        <div className="relative my-1 flex items-center gap-2 rounded-sm border border-subtle px-1 text-14">
+          <div className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1">
+            <DragDropOutline width={14} height={14} className="text-secondary" />
+          </div>
+          <div ref={EstimatePointValueRef} className="w-full py-2 text-13">
+            {estimatePoint?.value ? (
+              `${estimateType === EEstimateSystem.TIME ? convertMinutesToHoursMinutesString(Number(estimatePoint?.value)) : estimatePoint?.value}`
+            ) : (
+              <span className="text-placeholder">{t("project_settings.estimates.create.enter_estimate_point")}</span>
+            )}
+          </div>
+          {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+          <div
+            className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
+            onClick={() => setEstimatePointEditToggle(true)}
+          >
+            <EditOutline width={14} height={14} className="text-secondary" />
+          </div>
+          {estimatePoints.length > estimateCount.min && (
+            // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+            <div
+              className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
+              onClick={() =>
+                estimateId && estimatePointId
+                  ? setEstimatePointDeleteToggle(true)
+                  : handleEstimatePointValueRemove && handleEstimatePointValueRemove()
+              }
+            >
+              <DeleteOutline width={14} height={14} className="text-secondary" />
+            </div>
+          )}
+        </div>
+      )}
+
+      {estimatePoint && estimatePointEditToggle && (
+        <EstimatePointUpdate
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          estimateId={estimateId}
+          estimateType={estimateType}
+          estimatePointId={estimatePointId}
+          estimatePoints={estimatePoints}
+          estimatePoint={estimatePoint}
+          handleEstimatePointValueUpdate={(estimatePointValue: string) =>
+            handleEstimatePointValueUpdate && handleEstimatePointValueUpdate(estimatePointValue)
+          }
+          closeCallBack={() => setEstimatePointEditToggle(false)}
+          estimatePointError={estimatePointError}
+          handleEstimatePointError={handleEstimatePointError}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/estimates/points/update.tsx b/apps/web/core/components/estimates/points/update.tsx
new file mode 100644
index 0000000..593c023
--- /dev/null
+++ b/apps/web/core/components/estimates/points/update.tsx
@@ -0,0 +1,224 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FormEvent } from "react";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, InfoOutline, TickOutline } from "@makeplane/propel/icons";
+import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
+import { Spinner } from "@plane/ui";
+import { cn, isEstimatePointValuesRepeated } from "@plane/utils";
+import { EstimateInputRoot } from "@/components/estimates/inputs/root";
+// helpers
+// hooks
+import { useEstimatePoint } from "@/hooks/store/estimates/use-estimate-point";
+// plane web constants
+
+type TEstimatePointUpdate = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimatePointId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePoints: TEstimatePointsObject[];
+  estimatePoint: TEstimatePointsObject;
+  handleEstimatePointValueUpdate: (estimateValue: string) => void;
+  closeCallBack: () => void;
+  estimatePointError?: TEstimateTypeErrorObject | undefined;
+  handleEstimatePointError?: (newValue: string, message: string | undefined, mode?: "add" | "delete") => void;
+};
+
+export const EstimatePointUpdate = observer(function EstimatePointUpdate(props: TEstimatePointUpdate) {
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimatePointId,
+    estimateType,
+    estimatePoints,
+    estimatePoint,
+    handleEstimatePointValueUpdate,
+    closeCallBack,
+    estimatePointError,
+    handleEstimatePointError,
+  } = props;
+  // hooks
+  const { updateEstimatePoint } = useEstimatePoint(estimateId, estimatePointId);
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [loader, setLoader] = useState(false);
+  const [estimateInputValue, setEstimateInputValue] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (estimateInputValue === undefined && estimatePoint) setEstimateInputValue(estimatePoint?.value || "");
+  }, [estimateInputValue, estimatePoint]);
+
+  const handleSuccess = (value: string) => {
+    handleEstimatePointValueUpdate(value);
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleClose = () => {
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleEstimateInputValue = (value: string) => {
+    if (value.length <= MAX_ESTIMATE_POINT_INPUT_LENGTH) {
+      setEstimateInputValue(() => value);
+      handleEstimatePointError && handleEstimatePointError(value, undefined);
+    }
+  };
+
+  const handleUpdate = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!workspaceSlug || !projectId) return;
+
+    handleEstimatePointError && handleEstimatePointError(estimateInputValue || "", undefined, "delete");
+
+    if (estimateInputValue) {
+      const currentEstimateType: EEstimateSystem | undefined = estimateType;
+      let isEstimateValid = false;
+
+      const currentEstimatePointValues = estimatePoints
+        .map((point) => (point?.key != estimatePoint?.key ? point?.value : undefined))
+        .filter((value) => value != undefined);
+      const isRepeated =
+        (estimateType && isEstimatePointValuesRepeated(currentEstimatePointValues, estimateType, estimateInputValue)) ||
+        false;
+
+      if (!isRepeated) {
+        if (currentEstimateType && [EEstimateSystem.TIME, EEstimateSystem.POINTS].includes(currentEstimateType)) {
+          if (estimateInputValue && !isNaN(Number(estimateInputValue))) {
+            if (Number(estimateInputValue) <= 0) {
+              if (handleEstimatePointError)
+                handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.min_length"));
+              return;
+            } else {
+              isEstimateValid = true;
+            }
+          }
+        } else if (currentEstimateType && currentEstimateType === EEstimateSystem.CATEGORIES) {
+          if (estimateInputValue && estimateInputValue.length > 0 && isNaN(Number(estimateInputValue))) {
+            isEstimateValid = true;
+          }
+        }
+
+        if (isEstimateValid) {
+          if (estimateId != undefined) {
+            if (estimateInputValue === estimatePoint.value) {
+              setLoader(false);
+              if (handleEstimatePointError) handleEstimatePointError(estimateInputValue, undefined);
+
+              handleClose();
+            } else
+              try {
+                setLoader(true);
+
+                const payload = {
+                  value: estimateInputValue,
+                };
+                await updateEstimatePoint(workspaceSlug, projectId, payload);
+
+                setLoader(false);
+                if (handleEstimatePointError) handleEstimatePointError(estimateInputValue, undefined, "delete");
+                handleClose();
+                setToast({
+                  type: TOAST_TYPE.SUCCESS,
+                  title: t("project_settings.estimates.toasts.updated.success.title"),
+                  message: t("project_settings.estimates.toasts.updated.success.message"),
+                });
+              } catch {
+                setLoader(false);
+                if (handleEstimatePointError)
+                  handleEstimatePointError(
+                    estimateInputValue,
+                    t("project_settings.estimates.validation.unable_to_process")
+                  );
+                setToast({
+                  type: TOAST_TYPE.ERROR,
+                  title: t("project_settings.estimates.toasts.updated.error.title"),
+                  message: t("project_settings.estimates.toasts.updated.error.message"),
+                });
+              }
+          } else {
+            handleSuccess(estimateInputValue);
+          }
+        } else {
+          setLoader(false);
+          if (handleEstimatePointError)
+            handleEstimatePointError(
+              estimateInputValue,
+              [EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(estimateType)
+                ? t("project_settings.estimates.validation.numeric")
+                : t("project_settings.estimates.validation.character")
+            );
+        }
+      } else if (handleEstimatePointError)
+        handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.already_exists"));
+    } else if (handleEstimatePointError)
+      handleEstimatePointError(estimateInputValue || "", t("project_settings.estimates.validation.empty"));
+  };
+
+  return (
+    <form onSubmit={handleUpdate} className="relative flex items-center gap-2 pr-2.5 text-14">
+      <div
+        className={cn(
+          "relative my-1 flex w-full items-center rounded-sm border",
+          estimatePointError?.message ? `border-danger-strong` : `border-subtle`
+        )}
+      >
+        <EstimateInputRoot
+          estimateType={estimateType}
+          handleEstimateInputValue={handleEstimateInputValue}
+          value={estimateInputValue}
+        />
+        {estimatePointError?.message && (
+          <>
+            <Tooltip
+              label={
+                (estimateInputValue || "")?.length >= 1
+                  ? t("project_settings.estimates.validation.unsaved_changes")
+                  : estimatePointError?.message
+              }
+              layout="stacked"
+              side="bottom"
+            >
+              <div className="relative mr-3 flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center overflow-hidden text-danger-primary">
+                <InfoOutline width={14} height={14} />
+              </div>
+            </Tooltip>
+          </>
+        )}
+      </div>
+
+      {estimateInputValue && estimateInputValue.length > 0 && (
+        <button
+          type="submit"
+          className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs text-success-primary transition-colors hover:bg-layer-1"
+          disabled={loader}
+        >
+          {loader ? <Spinner className="h-4 w-4" /> : <TickOutline width={14} height={14} />}
+        </button>
+      )}
+      <button
+        type="button"
+        className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs transition-colors hover:bg-layer-1"
+        onClick={handleClose}
+        disabled={loader}
+      >
+        <CloseOutline height={14} width={14} className="text-secondary" />
+      </button>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/estimates/radio-select.tsx b/apps/web/core/components/estimates/radio-select.tsx
new file mode 100644
index 0000000..0d3bd33
--- /dev/null
+++ b/apps/web/core/components/estimates/radio-select.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+type RadioInputProps = {
+  name?: string;
+  label?: string | React.ReactNode;
+  wrapperClassName?: string;
+  fieldClassName?: string;
+  buttonClassName?: string;
+  labelClassName?: string;
+  ariaLabel?: string;
+  options: { label: string | React.ReactNode; value: string; disabled?: boolean }[];
+  vertical?: boolean;
+  selected: string;
+  onChange: (value: string) => void;
+  className?: string;
+};
+
+export function RadioInput({
+  name = "radio-input",
+  label: inputLabel,
+  labelClassName: inputLabelClassName = "",
+  wrapperClassName: inputWrapperClassName = "",
+  fieldClassName: inputFieldClassName = "",
+  buttonClassName: inputButtonClassName = "",
+  options,
+  vertical,
+  selected,
+  ariaLabel,
+  onChange,
+  className,
+}: RadioInputProps) {
+  const wrapperClass = vertical ? "flex flex-col gap-1" : "flex gap-2";
+
+  const setSelected = (value: string) => {
+    onChange(value);
+  };
+
+  let aria = ariaLabel ? ariaLabel.toLowerCase().replace(" ", "-") : "";
+  if (!aria && typeof inputLabel === "string") {
+    aria = inputLabel.toLowerCase().replace(" ", "-");
+  } else {
+    aria = "radio-input";
+  }
+
+  return (
+    <div className={className}>
+      {inputLabel && <div className={cn(`mb-2`, inputLabelClassName)}>{inputLabel}</div>}
+      <div className={cn(`${wrapperClass}`, inputWrapperClassName)}>
+        {options.map(({ value, label, disabled }, index) => (
+          <div
+            key={index}
+            onClick={() => !disabled && setSelected(value)}
+            className={cn(
+              "flex items-center gap-2 text-14",
+              disabled ? `cursor-not-allowed border-subtle bg-layer-1` : ``,
+              inputFieldClassName
+            )}
+          >
+            <input
+              id={`${name}_${index}`}
+              name={name}
+              className={cn(
+                `group flex size-5 flex-shrink-0 cursor-pointer items-center justify-center rounded-full border border-strong-1 bg-layer-2`,
+                selected === value ? `border-accent-strong bg-accent-primary/80` : ``,
+                disabled ? `cursor-not-allowed border-subtle bg-layer-1` : ``,
+                inputButtonClassName
+              )}
+              type="radio"
+              value={value}
+              disabled={disabled}
+              checked={selected === value}
+            />
+            <label htmlFor={`${name}_${index}`} className="w-full cursor-pointer">
+              {label}
+            </label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/estimates/root.tsx b/apps/web/core/components/estimates/root.tsx
new file mode 100644
index 0000000..036fa1a
--- /dev/null
+++ b/apps/web/core/components/estimates/root.tsx
@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+import { SettingsHeading } from "@/components/settings/heading";
+// hooks
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useProject } from "@/hooks/store/use-project";
+// local imports
+import { CreateEstimateModal } from "./create/modal";
+import { DeleteEstimateModal } from "./delete/modal";
+import { EstimateDisableSwitch } from "./estimate-disable-switch";
+import { EstimateList } from "./estimate-list";
+import { EstimateLoaderScreen } from "./loader-screen";
+
+type TEstimateRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  isAdmin: boolean;
+};
+
+export const EstimateRoot = observer(function EstimateRoot(props: TEstimateRoot) {
+  const { workspaceSlug, projectId, isAdmin } = props;
+  // hooks
+  const { currentProjectDetails } = useProject();
+  const { loader, currentActiveEstimateId, archivedEstimateIds, getProjectEstimates } = useProjectEstimates();
+  // states
+  const [isEstimateCreateModalOpen, setIsEstimateCreateModalOpen] = useState(false);
+  // oxlint-disable-next-line no-unused-vars
+  const [estimateToUpdate, setEstimateToUpdate] = useState<string | undefined>();
+  const [estimateToDelete, setEstimateToDelete] = useState<string | undefined>();
+
+  const { t } = useTranslation();
+
+  const { isLoading: isSWRLoading } = useSWR(
+    workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
+    async () => workspaceSlug && projectId && getProjectEstimates(workspaceSlug, projectId)
+  );
+
+  if (loader === "init-loader" || isSWRLoading) {
+    return <EstimateLoaderScreen />;
+  }
+
+  return (
+    <>
+      <div>
+        {/* header */}
+        <SettingsHeading
+          title={t("project_settings.estimates.heading")}
+          description={t("project_settings.estimates.description")}
+        />
+        <div className="mt-6">
+          {/* current active estimate section */}
+          {currentActiveEstimateId ? (
+            <>
+              {/* estimates activated deactivated section */}
+              <SettingsBoxedControlItem
+                title={t("project_settings.estimates.title")}
+                description={t("project_settings.estimates.enable_description")}
+                control={
+                  <EstimateDisableSwitch workspaceSlug={workspaceSlug} projectId={projectId} isAdmin={isAdmin} />
+                }
+              />
+              {/* active estimates section */}
+              <div className="mt-12 flex flex-col gap-y-4">
+                <SettingsHeading title="Estimates list" variant="h6" />
+                <EstimateList
+                  estimateIds={[currentActiveEstimateId]}
+                  isAdmin={isAdmin}
+                  isEstimateEnabled={Boolean(currentProjectDetails?.estimate)}
+                  isEditable
+                  onEditClick={(estimateId: string) => setEstimateToUpdate(estimateId)}
+                  onDeleteClick={(estimateId: string) => setEstimateToDelete(estimateId)}
+                />
+              </div>
+            </>
+          ) : (
+            <EmptyStateCompact
+              assetKey="estimate"
+              assetClassName="size-20"
+              title={t("settings_empty_state.estimates.title")}
+              description={t("settings_empty_state.estimates.description")}
+              actions={[
+                {
+                  label: t("settings_empty_state.estimates.cta_primary"),
+                  onClick: () => setIsEstimateCreateModalOpen(true),
+                },
+              ]}
+              align="start"
+              rootClassName="py-20"
+            />
+          )}
+          {/* archived estimates section */}
+          {archivedEstimateIds && archivedEstimateIds.length > 0 && (
+            <div className="mt-12 flex flex-col gap-y-4">
+              <SettingsHeading
+                title="Archived estimates"
+                description={
+                  <>
+                    Estimates have gone through a change, these are the estimates you had in your older versions which
+                    were not in use. Read more about them 
+                    <a
+                      href={"https://docs.plane.so/core-concepts/projects/run-project#estimate"}
+                      target="_blank"
+                      className="text-accent-primary/80 hover:text-accent-primary"
+                      rel="noreferrer"
+                    >
+                      here.
+                    </a>
+                  </>
+                }
+                variant="h6"
+              />
+              <EstimateList estimateIds={archivedEstimateIds} isAdmin={isAdmin} />
+            </div>
+          )}
+        </div>
+      </div>
+      {/* CRUD modals */}
+      <CreateEstimateModal
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        isOpen={isEstimateCreateModalOpen}
+        handleClose={() => setIsEstimateCreateModalOpen(false)}
+      />
+      <DeleteEstimateModal
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        estimateId={estimateToDelete ? estimateToDelete : undefined}
+        // oxlint-disable-next-line no-unneeded-ternary
+        isOpen={estimateToDelete ? true : false}
+        handleClose={() => setEstimateToDelete(undefined)}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/exporter/column.tsx b/apps/web/core/components/exporter/column.tsx
new file mode 100644
index 0000000..7866170
--- /dev/null
+++ b/apps/web/core/components/exporter/column.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { DownloadOutline } from "@makeplane/propel/icons";
+import type { IExportData } from "@plane/types";
+import { getDate, getFileURL, renderFormattedDate } from "@plane/utils";
+
+type RowData = IExportData;
+const checkExpiry = (inputDateString: string) => {
+  const currentDate = new Date();
+  const expiryDate = getDate(inputDateString);
+  if (!expiryDate) return false;
+  expiryDate.setDate(expiryDate.getDate() + 7);
+  return expiryDate > currentDate;
+};
+export const useExportColumns = () => {
+  const columns = [
+    {
+      key: "Exported By",
+      content: "Exported By",
+      tdRender: (rowData: RowData) => {
+        const { avatar_url, display_name, email } = rowData.initiated_by_detail;
+        return (
+          <div className="flex items-center gap-x-2">
+            <div>
+              {avatar_url && avatar_url.trim() !== "" ? (
+                <span className="relative flex h-4 w-4 items-center justify-center rounded-full text-on-color capitalize">
+                  <img
+                    src={getFileURL(avatar_url)}
+                    className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
+                    alt={display_name || email}
+                  />
+                </span>
+              ) : (
+                <span className="bg-gray-700 relative flex h-4 w-4 items-center justify-center rounded-full text-11 text-on-color capitalize">
+                  {(email ?? display_name ?? "?")[0]}
+                </span>
+              )}
+            </div>
+            <div>{display_name}</div>
+          </div>
+        );
+      },
+    },
+    {
+      key: "Exported On",
+      content: "Exported On",
+      tdRender: (rowData: RowData) => <span>{renderFormattedDate(rowData.created_at)}</span>,
+    },
+
+    {
+      key: "Exported projects",
+      content: "Exported projects",
+      tdRender: (rowData: RowData) => <div className="text-13">{rowData.project.length} project(s)</div>,
+    },
+    {
+      key: "Format",
+      content: "Format",
+      tdRender: (rowData: RowData) => (
+        <span className="text-13">
+          {rowData.provider === "csv"
+            ? "CSV"
+            : rowData.provider === "xlsx"
+              ? "Excel"
+              : rowData.provider === "json"
+                ? "JSON"
+                : ""}
+        </span>
+      ),
+    },
+    {
+      key: "Status",
+      content: "Status",
+      tdRender: (rowData: RowData) => (
+        <span
+          className={`rounded-sm px-2 py-1 text-11 capitalize ${
+            rowData.status === "completed"
+              ? "bg-success-subtle text-success-primary"
+              : rowData.status === "processing"
+                ? "bg-yellow-500/20 text-yellow-500"
+                : rowData.status === "failed"
+                  ? "bg-danger-subtle text-danger-primary"
+                  : rowData.status === "expired"
+                    ? "bg-orange-500/20 text-orange-500"
+                    : "bg-gray-500/20 text-gray-500"
+          }`}
+        >
+          {rowData.status}
+        </span>
+      ),
+    },
+    {
+      key: "Download",
+      content: "Download",
+      tdRender: (rowData: RowData) =>
+        checkExpiry(rowData.created_at) ? (
+          <>
+            {rowData.status == "completed" ? (
+              <a target="_blank" href={rowData?.url} rel="noopener noreferrer">
+                <button className="flex w-full items-center gap-1 font-medium text-accent-primary">
+                  <DownloadOutline className="h-4 w-4" />
+                  <div>Download</div>
+                </button>
+              </a>
+            ) : (
+              "-"
+            )}
+          </>
+        ) : (
+          <div className="text-11 text-danger-primary">Expired</div>
+        ),
+    },
+  ];
+  return columns;
+};
diff --git a/apps/web/core/components/exporter/export-form.tsx b/apps/web/core/components/exporter/export-form.tsx
new file mode 100644
index 0000000..da05c85
--- /dev/null
+++ b/apps/web/core/components/exporter/export-form.tsx
@@ -0,0 +1,251 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { intersection } from "lodash-es";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// import { Info } from "lucide-react";
+import {
+  EUserPermissions,
+  EUserPermissionsLevel,
+  EXPORTERS_LIST,
+  // ISSUE_DISPLAY_FILTERS_BY_PAGE,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// import { Tooltip } from "@makeplane/propel/components/tooltip";
+// import { EIssuesStoreType } from "@plane/types";
+import type { TWorkItemFilterExpression } from "@plane/types";
+import { CustomSearchSelect, CustomSelect } from "@plane/ui";
+// import { WorkspaceLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/workspace-level";
+// import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { ProjectExportService } from "@/services/project/project-export.service";
+// local imports
+import { SettingsBoxedControlItem } from "../settings/boxed-control-item";
+
+type Props = {
+  workspaceSlug: string;
+  provider: string | null;
+  mutateServices: () => void;
+};
+type FormData = {
+  provider: (typeof EXPORTERS_LIST)[0];
+  project: string[];
+  multiple: boolean;
+  filters: TWorkItemFilterExpression;
+};
+
+// const initialWorkItemFilters = {
+//   richFilters: {},
+//   displayFilters: {},
+//   displayProperties: {},
+//   kanbanFilters: {
+//     group_by: [],
+//     sub_group_by: [],
+//   },
+// };
+
+const projectExportService = new ProjectExportService();
+
+export const ExportForm = observer(function ExportForm(props: Props) {
+  // props
+  const { workspaceSlug, mutateServices } = props;
+  // states
+  const [exportLoading, setExportLoading] = useState(false);
+
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { data: user, canPerformAnyCreateAction, projectsWithCreatePermissions } = useUser();
+  const { workspaceProjectIds, getProjectById } = useProject();
+  const { t } = useTranslation();
+  // form
+  const { handleSubmit, control } = useForm<FormData>({
+    defaultValues: {
+      provider: EXPORTERS_LIST[0],
+      project: [],
+      multiple: false,
+      filters: {},
+    },
+  });
+
+  // derived values
+  const hasProjects = workspaceProjectIds && workspaceProjectIds.length > 0;
+  const isMember = allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.WORKSPACE);
+  const wsProjectIdsWithCreatePermisisons = projectsWithCreatePermissions
+    ? intersection(workspaceProjectIds, Object.keys(projectsWithCreatePermissions))
+    : [];
+  const options = wsProjectIdsWithCreatePermisisons?.map((projectId) => {
+    const projectDetails = getProjectById(projectId);
+
+    return {
+      value: projectDetails?.id,
+      query: `${projectDetails?.name} ${projectDetails?.identifier}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <span className="flex-shrink-0 text-10 text-secondary">{projectDetails?.identifier}</span>
+          <span className="truncate">{projectDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  // handlers
+  async function ExportCSVToMail(formData: FormData) {
+    setExportLoading(true);
+    if (workspaceSlug && user) {
+      const payload = {
+        provider: formData.provider.provider,
+        project: formData.project,
+        multiple: formData.project.length > 1,
+        rich_filters: formData.filters,
+      };
+      try {
+        await projectExportService.csvExport(workspaceSlug, payload);
+        mutateServices();
+        setExportLoading(false);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("workspace_settings.settings.exports.modal.toasts.success.title"),
+          message: t("workspace_settings.settings.exports.modal.toasts.success.message", {
+            entity:
+              formData.provider.provider === "csv"
+                ? "CSV"
+                : formData.provider.provider === "xlsx"
+                  ? "Excel"
+                  : formData.provider.provider === "json"
+                    ? "JSON"
+                    : "",
+          }),
+        });
+      } catch (_error) {
+        setExportLoading(false);
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("error"),
+          message: t("workspace_settings.settings.exports.modal.toasts.error.message"),
+        });
+      }
+    } else {
+      setExportLoading(false);
+    }
+  }
+
+  return (
+    <form
+      onSubmit={(e) => {
+        void handleSubmit(ExportCSVToMail)(e);
+      }}
+      className="flex flex-col gap-5"
+    >
+      <div className="rounded-lg border border-subtle bg-layer-2">
+        {/* Project Selector */}
+        <SettingsBoxedControlItem
+          className="rounded-none border-0 border-b"
+          title={t("workspace_settings.settings.exports.exporting_projects")}
+          control={
+            <Controller
+              control={control}
+              name="project"
+              disabled={!isMember && (!hasProjects || !canPerformAnyCreateAction)}
+              render={({ field: { value, onChange } }) => (
+                <CustomSearchSelect
+                  value={value ?? []}
+                  onChange={(val: string[]) => onChange(val)}
+                  options={options}
+                  input
+                  label={
+                    value && value.length > 0
+                      ? value
+                          .map((projectId) => {
+                            const projectDetails = getProjectById(projectId);
+
+                            return projectDetails?.identifier;
+                          })
+                          .join(", ")
+                      : "All projects"
+                  }
+                  optionsClassName="max-w-48 sm:max-w-[532px]"
+                  placement="bottom-end"
+                  multiple
+                />
+              )}
+            />
+          }
+        />
+        {/* Format Selector */}
+        <SettingsBoxedControlItem
+          className="rounded-none border-0 border-b"
+          title={t("workspace_settings.settings.exports.format")}
+          control={
+            <Controller
+              control={control}
+              name="provider"
+              disabled={!isMember && (!hasProjects || !canPerformAnyCreateAction)}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={t(value.i18n_title)}
+                  optionsClassName="max-w-48 sm:max-w-[532px]"
+                  placement="bottom-end"
+                  buttonClassName="py-2 text-13"
+                >
+                  {EXPORTERS_LIST.map((service) => (
+                    <CustomSelect.Option key={service.provider} className="flex items-center gap-2" value={service}>
+                      <span className="truncate">{t(service.i18n_title)}</span>
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+          }
+        />
+        <div className="px-4 py-3">
+          <Button variant="primary" size="lg" type="submit" loading={exportLoading}>
+            {exportLoading ? `${t("workspace_settings.settings.exports.exporting")}...` : t("export")}
+          </Button>
+        </div>
+      </div>
+      {/* Rich Filters */}
+      {/* <div className="w-full">
+        <div className="flex items-center gap-2 mb-2">
+          <div className="text-13 font-medium text-secondary leading-tight">{t("common.filters")}</div>
+          <Tooltip label={t("workspace_settings.settings.exports.filters_info")} layout="stacked">
+            <button type="button" className="flex items-center justify-center">
+              <Info className="h-3 w-3 text-tertiary" />
+            </button>
+          </Tooltip>
+        </div>
+        <Controller
+          control={control}
+          name="filters"
+          render={({ field: { onChange } }) => (
+            <WorkspaceLevelWorkItemFiltersHOC
+              entityId={workspaceSlug}
+              entityType={EIssuesStoreType.GLOBAL}
+              filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.filters}
+              initialWorkItemFilters={initialWorkItemFilters}
+              isTemporary
+              updateFilters={(updatedFilters) => onChange(updatedFilters)}
+              showOnMount
+              workspaceSlug={workspaceSlug}
+            >
+              {({ filter: workspaceExportWorkItemsFilter }) =>
+                workspaceExportWorkItemsFilter && (
+                  <WorkItemFiltersRow filter={workspaceExportWorkItemsFilter} variant="modal" />
+                )
+              }
+            </WorkspaceLevelWorkItemFiltersHOC>
+          )}
+        />
+      </div> */}
+    </form>
+  );
+});
diff --git a/apps/web/core/components/exporter/export-modal.tsx b/apps/web/core/components/exporter/export-modal.tsx
new file mode 100644
index 0000000..7ca85bc
--- /dev/null
+++ b/apps/web/core/components/exporter/export-modal.tsx
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { intersection } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, IImporterService } from "@plane/types";
+// ui
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// services
+import { ProjectExportService } from "@/services/project";
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  data: IImporterService | null;
+  user: IUser | null;
+  provider: string | string[];
+  mutateServices: () => void;
+};
+
+const projectExportService = new ProjectExportService();
+
+export const Exporter = observer(function Exporter(props: Props) {
+  const { isOpen, handleClose, user, provider, mutateServices } = props;
+  // states
+  const [exportLoading, setExportLoading] = useState(false);
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { workspaceProjectIds, getProjectById } = useProject();
+  const { projectsWithCreatePermissions } = useUser();
+  const { t } = useTranslation();
+
+  const wsProjectIdsWithCreatePermisisons = projectsWithCreatePermissions
+    ? intersection(workspaceProjectIds, Object.keys(projectsWithCreatePermissions))
+    : [];
+
+  const options = wsProjectIdsWithCreatePermisisons?.map((projectId) => {
+    const projectDetails = getProjectById(projectId);
+
+    return {
+      value: projectDetails?.id,
+      query: `${projectDetails?.name} ${projectDetails?.identifier}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <span className="flex-shrink-0 text-10 text-secondary">{projectDetails?.identifier}</span>
+          <span className="truncate">{projectDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  const [value, setValue] = React.useState<string[]>([]);
+  const [multiple, setMultiple] = React.useState<boolean>(false);
+  const onChange = (val: any) => {
+    setValue(val);
+  };
+
+  async function ExportCSVToMail() {
+    setExportLoading(true);
+    if (workspaceSlug && user && typeof provider === "string") {
+      const payload = {
+        provider: provider,
+        project: value,
+        multiple: multiple,
+      };
+      await projectExportService
+        .csvExport(workspaceSlug, payload)
+        .then(() => {
+          mutateServices();
+          router.push(`/${workspaceSlug}/settings/exports`);
+          setExportLoading(false);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("workspace_settings.settings.exports.modal.toasts.success.title"),
+            message: t("workspace_settings.settings.exports.modal.toasts.success.message", {
+              entity: provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : "",
+            }),
+          });
+        })
+        .catch(() => {
+          setExportLoading(false);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("error"),
+            message: t("workspace_settings.settings.exports.modal.toasts.error.message"),
+          });
+        });
+    }
+  }
+
+  return (
+    <ModalCore
+      isOpen={isOpen}
+      handleClose={() => {
+        if (!isSelectOpen) handleClose();
+      }}
+      position={EModalPosition.CENTER}
+      width={EModalWidth.XL}
+    >
+      <div className="flex flex-col gap-6 gap-y-4 p-6">
+        <div className="flex w-full items-center justify-start gap-6">
+          <span className="flex items-center justify-start">
+            <h3 className="text-18 font-medium 2xl:text-20">
+              {t("workspace_settings.settings.exports.modal.title")}{" "}
+              {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
+            </h3>
+          </span>
+        </div>
+        <div>
+          <CustomSearchSelect
+            value={value ?? []}
+            onChange={(val: string[]) => onChange(val)}
+            options={options}
+            input
+            label={
+              value && value.length > 0
+                ? value
+                    .map((projectId) => {
+                      const projectDetails = getProjectById(projectId);
+
+                      return projectDetails?.identifier;
+                    })
+                    .join(", ")
+                : "All projects"
+            }
+            onOpen={() => setIsSelectOpen(true)}
+            onClose={() => setIsSelectOpen(false)}
+            optionsClassName="max-w-48 sm:max-w-[532px]"
+            placement="bottom-end"
+            multiple
+          />
+        </div>
+        <Checkbox
+          label={t("workspace_settings.settings.exports.export_separate_files")}
+          stretch="auto"
+          checked={multiple}
+          onCheckedChange={setMultiple}
+        />
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" onClick={handleClose}>
+            {t("cancel")}
+          </Button>
+          <Button variant="primary" onClick={ExportCSVToMail} disabled={exportLoading} loading={exportLoading}>
+            {exportLoading
+              ? `${t("workspace_settings.settings.exports.exporting")}...`
+              : t("workspace_settings.settings.exports.title")}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/exporter/guide.tsx b/apps/web/core/components/exporter/guide.tsx
new file mode 100644
index 0000000..35aba49
--- /dev/null
+++ b/apps/web/core/components/exporter/guide.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams, useSearchParams } from "next/navigation";
+import { mutate } from "swr";
+// constants
+import { EXPORT_SERVICES_LIST } from "@plane/constants";
+// local imports
+import { ExportForm } from "./export-form";
+import { PrevExports } from "./prev-exports";
+
+export const ExportGuide = observer(function ExportGuide() {
+  // router
+  const { workspaceSlug } = useParams();
+  const searchParams = useSearchParams();
+  const provider = searchParams.get("provider");
+  // state
+  const per_page = 10;
+  const [cursor, setCursor] = useState<string | undefined>(`10:0:0`);
+
+  return (
+    <>
+      <div className="flex size-full flex-col gap-y-13">
+        <ExportForm
+          workspaceSlug={workspaceSlug}
+          provider={provider}
+          mutateServices={() => mutate(EXPORT_SERVICES_LIST(workspaceSlug, `${cursor}`, `${per_page}`))}
+        />
+        <PrevExports workspaceSlug={workspaceSlug} cursor={cursor} per_page={per_page} setCursor={setCursor} />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
new file mode 100644
index 0000000..088881a
--- /dev/null
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR, { mutate } from "swr";
+import { ArrowNarrowLeftOutline, ArrowNarrowRightOutline, RefreshOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import type { IExportData } from "@plane/types";
+import { Table } from "@plane/ui";
+// components
+import { ImportExportSettingsLoader } from "@/components/ui/loader/settings/import-and-export";
+// constants
+import { EXPORT_SERVICES_LIST } from "@plane/constants";
+// services
+import { IntegrationService } from "@/services/integrations";
+// local imports
+import { useExportColumns } from "./column";
+
+const integrationService = new IntegrationService();
+
+type Props = {
+  workspaceSlug: string;
+  cursor: string | undefined;
+  per_page: number;
+  setCursor: (cursor: string) => void;
+};
+type RowData = IExportData;
+export const PrevExports = observer(function PrevExports(props: Props) {
+  // props
+  const { workspaceSlug, cursor, per_page, setCursor } = props;
+  // state
+  const [refreshing, setRefreshing] = useState(false);
+  // hooks
+  const { t } = useTranslation();
+  const columns = useExportColumns();
+
+  const { data: exporterServices } = useSWR(
+    workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug, cursor, `${per_page}`) : null,
+    workspaceSlug && cursor ? () => integrationService.getExportsServicesList(workspaceSlug, cursor, per_page) : null
+  );
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    try {
+      await mutate(EXPORT_SERVICES_LIST(workspaceSlug, `${cursor}`, `${per_page}`));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("Failed to refresh export services list", error);
+    } finally {
+      setRefreshing(false);
+    }
+  }, [workspaceSlug, cursor, per_page]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (
+        Array.isArray(exporterServices?.results) &&
+        exporterServices.results.some((service) => service.status === "processing")
+      ) {
+        handleRefresh();
+      } else {
+        clearInterval(interval);
+      }
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [exporterServices, handleRefresh]);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between border-b border-subtle pb-3.5">
+        <div className="flex items-center gap-2">
+          <h3 className="text-h6-medium text-primary">{t("workspace_settings.settings.exports.previous_exports")}</h3>
+          <Button variant="tertiary" className="shrink-0" onClick={handleRefresh}>
+            <RefreshOutline className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />
+            {refreshing ? t("refreshing") : t("refresh_status")}
+          </Button>
+        </div>
+        {Array.isArray(exporterServices?.results) && exporterServices.results.length > 0 && (
+          <div className="flex items-center gap-2 text-11">
+            <Button
+              variant="secondary"
+              size="sm"
+              disabled={!exporterServices?.prev_page_results}
+              onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
+              prependIcon={<ArrowNarrowLeftOutline />}
+            >
+              {t("prev")}
+            </Button>
+            <Button
+              variant="secondary"
+              size="sm"
+              disabled={!exporterServices?.next_page_results}
+              onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
+              appendIcon={<ArrowNarrowRightOutline />}
+            >
+              {t("next")}
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="flex flex-col">
+        {!exporterServices ? (
+          <ImportExportSettingsLoader />
+        ) : Array.isArray(exporterServices.results) && exporterServices.results.length > 0 ? (
+          <div>
+            <div className="divide-y divide-subtle-1">
+              <Table
+                columns={columns}
+                data={exporterServices.results}
+                keyExtractor={(rowData: RowData) => rowData?.id ?? ""}
+                tHeadClassName="border-b border-subtle"
+                thClassName="text-left font-medium divide-x-0 text-placeholder"
+                tBodyClassName="divide-y-0"
+                tBodyTrClassName="divide-x-0 p-4 h-[40px] text-secondary"
+                tHeadTrClassName="divide-x-0"
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <EmptyStateCompact
+              assetKey="export"
+              title={t("settings_empty_state.exports.title")}
+              description={t("settings_empty_state.exports.description")}
+              align="start"
+              rootClassName="py-20"
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/exporter/single-export.tsx b/apps/web/core/components/exporter/single-export.tsx
new file mode 100644
index 0000000..8bd0528
--- /dev/null
+++ b/apps/web/core/components/exporter/single-export.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// ui
+import { Button } from "@plane/propel/button";
+import type { IExportData } from "@plane/types";
+// helpers
+import { getDate, renderFormattedDate } from "@plane/utils";
+// types
+
+type Props = {
+  service: IExportData;
+  refreshing: boolean;
+};
+
+export function SingleExport({ service, refreshing }: Props) {
+  const provider = service.provider;
+
+  const [isLoading] = useState(false);
+
+  const checkExpiry = (inputDateString: string) => {
+    const currentDate = new Date();
+    const expiryDate = getDate(inputDateString);
+    if (!expiryDate) return false;
+    expiryDate.setDate(expiryDate.getDate() + 7);
+    return expiryDate > currentDate;
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 px-4 py-3">
+      <div>
+        <h4 className="flex items-center gap-2 text-13">
+          <span>
+            Export to{" "}
+            <span className="font-medium">
+              {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
+            </span>{" "}
+          </span>
+          <span
+            className={`rounded-sm px-2 py-0.5 text-11 capitalize ${
+              service.status === "completed"
+                ? "bg-success-subtle text-success-primary"
+                : service.status === "processing"
+                  ? "bg-yellow-500/20 text-yellow-500"
+                  : service.status === "failed"
+                    ? "bg-danger-subtle text-danger-primary"
+                    : service.status === "expired"
+                      ? "bg-orange-500/20 text-orange-500"
+                      : ""
+            }`}
+          >
+            {refreshing ? "Refreshing..." : service.status}
+          </span>
+        </h4>
+        <div className="mt-2 flex items-center gap-2 text-11 text-secondary">
+          <span>{renderFormattedDate(service.created_at)}</span>|
+          <span>Exported by {service?.initiated_by_detail?.display_name}</span>
+        </div>
+      </div>
+      {checkExpiry(service.created_at) ? (
+        <>
+          {service.status == "completed" && (
+            <div>
+              <a target="_blank" href={service?.url} rel="noopener noreferrer">
+                <Button variant="primary" className="w-full">
+                  {isLoading ? "Downloading..." : "Download"}
+                </Button>
+              </a>
+            </div>
+          )}
+        </>
+      ) : (
+        <div className="text-11 text-danger-primary">Expired</div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/gantt-chart/blocks/block-row-list.tsx b/apps/web/core/components/gantt-chart/blocks/block-row-list.tsx
new file mode 100644
index 0000000..2d3bcf2
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/blocks/block-row-list.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components
+import type { IBlockUpdateData, IGanttBlock } from "@plane/types";
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+// hooks
+import { BlockRow } from "@/components/gantt-chart/blocks/block-row";
+import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+// types
+
+export type GanttChartBlocksProps = {
+  blockIds: string[];
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  handleScrollToBlock: (block: IGanttBlock) => void;
+  enableAddBlock: boolean | ((blockId: string) => boolean);
+  showAllBlocks: boolean;
+  selectionHelpers: TSelectionHelper;
+  ganttContainerRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export function GanttChartRowList(props: GanttChartBlocksProps) {
+  const {
+    blockIds,
+    blockUpdateHandler,
+    handleScrollToBlock,
+    enableAddBlock,
+    showAllBlocks,
+    selectionHelpers,
+    ganttContainerRef,
+  } = props;
+
+  return (
+    <div className="absolute top-0 left-0 w-max min-w-full">
+      {blockIds?.map((blockId) => (
+        <>
+          <RenderIfVisible
+            root={ganttContainerRef}
+            horizontalOffset={100}
+            verticalOffset={200}
+            classNames="relative min-w-full w-max"
+            placeholderChildren={<div className="pointer-events-none w-full" style={{ height: `${BLOCK_HEIGHT}px` }} />}
+            shouldRecordHeights={false}
+          >
+            <BlockRow
+              key={blockId}
+              blockId={blockId}
+              showAllBlocks={showAllBlocks}
+              blockUpdateHandler={blockUpdateHandler}
+              handleScrollToBlock={handleScrollToBlock}
+              enableAddBlock={typeof enableAddBlock === "function" ? enableAddBlock(blockId) : enableAddBlock}
+              selectionHelpers={selectionHelpers}
+              ganttContainerRef={ganttContainerRef}
+            />
+          </RenderIfVisible>
+        </>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/gantt-chart/blocks/block-row.tsx b/apps/web/core/components/gantt-chart/blocks/block-row.tsx
new file mode 100644
index 0000000..83bfd58
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/blocks/block-row.tsx
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { ArrowNarrowRightOutline } from "@makeplane/propel/icons";
+// helpers
+import type { IBlockUpdateData, IGanttBlock } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+//
+import { BLOCK_HEIGHT, SIDEBAR_WIDTH } from "../constants";
+import { ChartAddBlock } from "../helpers";
+
+type Props = {
+  blockId: string;
+  showAllBlocks: boolean;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  handleScrollToBlock: (block: IGanttBlock) => void;
+  enableAddBlock: boolean;
+  selectionHelpers: TSelectionHelper;
+  ganttContainerRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export const BlockRow = observer(function BlockRow(props: Props) {
+  const { blockId, showAllBlocks, blockUpdateHandler, handleScrollToBlock, enableAddBlock, selectionHelpers } = props;
+  // states
+  const [isHidden, setIsHidden] = useState(false);
+  const [isBlockHiddenOnLeft, setIsBlockHiddenOnLeft] = useState(false);
+  // store hooks
+  const { getBlockById, updateActiveBlockId, isBlockActive } = useTimeLineChartStore();
+  const { getIsIssuePeeked } = useIssueDetail();
+
+  const block = getBlockById(blockId);
+
+  useEffect(() => {
+    const intersectionRoot = document.querySelector("#gantt-container") as HTMLDivElement;
+    const timelineBlock = document.getElementById(`gantt-block-${block?.id}`);
+    if (!timelineBlock || !intersectionRoot) return;
+
+    setIsBlockHiddenOnLeft(
+      !!block.position?.marginLeft &&
+        !!block.position?.width &&
+        intersectionRoot.scrollLeft > block.position.marginLeft + block.position.width
+    );
+
+    // Observe if the block is visible on the chart
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          setIsHidden(!entry.isIntersecting);
+          setIsBlockHiddenOnLeft(entry.boundingClientRect.right < (entry.rootBounds?.left ?? 0));
+        });
+      },
+      {
+        root: intersectionRoot,
+        rootMargin: `0px 0px 0px -${SIDEBAR_WIDTH}px`,
+      }
+    );
+
+    observer.observe(timelineBlock);
+
+    return () => {
+      observer.unobserve(timelineBlock);
+    };
+  }, [block]);
+
+  // hide the block if it doesn't have start and target dates and showAllBlocks is false
+  if (!block || !block.data || (!showAllBlocks && !(block.start_date && block.target_date))) return null;
+
+  const isBlockVisibleOnChart = block.start_date || block.target_date;
+  const isBlockSelected = selectionHelpers.getIsEntitySelected(block.id);
+  const isBlockFocused = selectionHelpers.getIsEntityActive(block.id);
+  const isBlockHoveredOn = isBlockActive(block.id);
+
+  return (
+    <div
+      className="relative w-max min-w-full"
+      onMouseEnter={() => updateActiveBlockId(blockId)}
+      onMouseLeave={() => updateActiveBlockId(null)}
+      style={{
+        height: `${BLOCK_HEIGHT}px`,
+      }}
+    >
+      <div
+        className={cn("relative h-full bg-layer-transparent hover:bg-layer-transparent-hover", {
+          "rounded-l-sm border border-r-0 border-accent-strong": getIsIssuePeeked(block.data.id),
+          "bg-layer-transparent-hover": isBlockHoveredOn,
+          "bg-accent-primary/5 hover:bg-accent-primary/10": isBlockSelected,
+          "bg-accent-primary/10": isBlockSelected && isBlockHoveredOn,
+          "border border-r-0 border-strong-1": isBlockFocused,
+        })}
+      >
+        {isBlockVisibleOnChart
+          ? isHidden && (
+              <button
+                type="button"
+                className="sticky z-[5] grid h-8 w-8 translate-y-1.5 cursor-pointer place-items-center rounded-sm border border-strong bg-layer-1 text-secondary hover:text-primary"
+                style={{
+                  left: `${SIDEBAR_WIDTH + 4}px`,
+                }}
+                onClick={() => handleScrollToBlock(block)}
+              >
+                <ArrowNarrowRightOutline
+                  className={cn("h-3.5 w-3.5", {
+                    "rotate-180": isBlockHiddenOnLeft,
+                  })}
+                />
+              </button>
+            )
+          : enableAddBlock && <ChartAddBlock block={block} blockUpdateHandler={blockUpdateHandler} />}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/blocks/block.tsx b/apps/web/core/components/gantt-chart/blocks/block.tsx
new file mode 100644
index 0000000..f36162f
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/blocks/block.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
+import { useRef } from "react";
+import { observer } from "mobx-react";
+// components
+import type { IBlockUpdateDependencyData } from "@plane/types";
+import { cn } from "@plane/utils";
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+// helpers
+// hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+// constants
+import { BLOCK_HEIGHT } from "../constants";
+// components
+import { ChartDraggable } from "../helpers";
+import { useGanttResizable } from "../helpers/blockResizables/use-gantt-resizable";
+
+type Props = {
+  blockId: string;
+  showAllBlocks: boolean;
+  blockToRender: (data: any) => React.ReactNode;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
+  enableDependency: boolean;
+  ganttContainerRef: RefObject<HTMLDivElement | null>;
+  updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>;
+};
+
+export const GanttChartBlock = observer(function GanttChartBlock(props: Props) {
+  const {
+    blockId,
+    showAllBlocks,
+    blockToRender,
+    enableBlockLeftResize,
+    enableBlockRightResize,
+    enableBlockMove,
+    ganttContainerRef,
+    enableDependency,
+    updateBlockDates,
+  } = props;
+  // store hooks
+  const { updateActiveBlockId, getBlockById, getIsCurrentDependencyDragging, currentView } = useTimeLineChartStore();
+  // refs
+  const resizableRef = useRef<HTMLDivElement>(null);
+
+  const block = getBlockById(blockId);
+
+  const isCurrentDependencyDragging = getIsCurrentDependencyDragging(blockId);
+
+  const { isMoving, handleBlockDrag } = useGanttResizable(block, resizableRef, ganttContainerRef, updateBlockDates);
+
+  const isBlockVisibleOnChart = block?.start_date || block?.target_date;
+  const isBlockComplete = block?.start_date && block?.target_date;
+
+  // hide the block if it doesn't have start and target dates and showAllBlocks is false
+  if (!block || (!showAllBlocks && !isBlockVisibleOnChart)) return null;
+
+  if (!block.data) return null;
+
+  return (
+    <div
+      className={cn("relative z-[5]", {
+        "transition-all": !!isMoving && currentView === "week",
+        "pointer-events-none": !isBlockVisibleOnChart,
+      })}
+      id={`gantt-block-${block.id}`}
+      ref={resizableRef}
+      style={{
+        height: `${BLOCK_HEIGHT}px`,
+        marginLeft: `${block.position?.marginLeft}px`,
+        width: `${block.position?.width}px`,
+      }}
+    >
+      {isBlockVisibleOnChart && (
+        <RenderIfVisible
+          root={ganttContainerRef}
+          horizontalOffset={100}
+          verticalOffset={200}
+          classNames="flex h-full w-full items-center"
+          placeholderChildren={<div className="h-8 w-full rounded-sm bg-layer-1" />}
+          shouldRecordHeights={false}
+          forceRender={isCurrentDependencyDragging}
+        >
+          <div
+            className={cn("relative h-full w-full")}
+            onMouseEnter={() => updateActiveBlockId(blockId)}
+            onMouseLeave={() => updateActiveBlockId(null)}
+          >
+            <ChartDraggable
+              block={block}
+              blockToRender={blockToRender}
+              handleBlockDrag={handleBlockDrag}
+              enableBlockLeftResize={enableBlockLeftResize}
+              enableBlockRightResize={enableBlockRightResize}
+              enableBlockMove={enableBlockMove && !!isBlockComplete}
+              enableDependency={enableDependency}
+              isMoving={isMoving}
+              ganttContainerRef={ganttContainerRef}
+            />
+          </div>
+        </RenderIfVisible>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/blocks/blocks-list.tsx b/apps/web/core/components/gantt-chart/blocks/blocks-list.tsx
new file mode 100644
index 0000000..e7e4509
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/blocks/blocks-list.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+//
+import type { IBlockUpdateDependencyData } from "@plane/types";
+import { GanttChartBlock } from "@/components/gantt-chart/blocks/block";
+
+export type GanttChartBlocksProps = {
+  blockIds: string[];
+  blockToRender: (data: any) => React.ReactNode;
+  enableBlockLeftResize: boolean | ((blockId: string) => boolean);
+  enableBlockRightResize: boolean | ((blockId: string) => boolean);
+  enableBlockMove: boolean | ((blockId: string) => boolean);
+  ganttContainerRef: React.RefObject<HTMLDivElement | null>;
+  showAllBlocks: boolean;
+  updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>;
+  enableDependency: boolean | ((blockId: string) => boolean);
+};
+
+export function GanttChartBlocksList(props: GanttChartBlocksProps) {
+  const {
+    blockIds,
+    blockToRender,
+    enableBlockLeftResize,
+    enableBlockRightResize,
+    enableBlockMove,
+    ganttContainerRef,
+    showAllBlocks,
+    updateBlockDates,
+    enableDependency,
+  } = props;
+
+  return (
+    <>
+      {blockIds?.map((blockId) => (
+        <GanttChartBlock
+          key={blockId}
+          blockId={blockId}
+          showAllBlocks={showAllBlocks}
+          blockToRender={blockToRender}
+          enableBlockLeftResize={
+            typeof enableBlockLeftResize === "function" ? enableBlockLeftResize(blockId) : enableBlockLeftResize
+          }
+          enableBlockRightResize={
+            typeof enableBlockRightResize === "function" ? enableBlockRightResize(blockId) : enableBlockRightResize
+          }
+          enableBlockMove={typeof enableBlockMove === "function" ? enableBlockMove(blockId) : enableBlockMove}
+          enableDependency={typeof enableDependency === "function" ? enableDependency(blockId) : enableDependency}
+          ganttContainerRef={ganttContainerRef}
+          updateBlockDates={updateBlockDates}
+        />
+      ))}
+    </>
+  );
+}
diff --git a/apps/web/core/components/gantt-chart/chart/header.tsx b/apps/web/core/components/gantt-chart/chart/header.tsx
new file mode 100644
index 0000000..9fcd7cf
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/chart/header.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { ArrowCollapseOutline, FullScreenOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+// plane
+import type { TGanttViews } from "@plane/types";
+import { Row } from "@plane/ui";
+// components
+import { cn } from "@plane/utils";
+import { VIEWS_LIST } from "@/components/gantt-chart/data";
+// helpers
+// hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+//
+import { GANTT_BREADCRUMBS_HEIGHT } from "../constants";
+
+type Props = {
+  blockIds: string[];
+  fullScreenMode: boolean;
+  handleChartView: (view: TGanttViews) => void;
+  handleToday: () => void;
+  loaderTitle: string;
+  toggleFullScreenMode: () => void;
+  showToday: boolean;
+};
+
+export const GanttChartHeader = observer(function GanttChartHeader(props: Props) {
+  const { t } = useTranslation();
+  const { blockIds, fullScreenMode, handleChartView, handleToday, loaderTitle, toggleFullScreenMode, showToday } =
+    props;
+  // chart hook
+  const { currentView } = useTimeLineChartStore();
+
+  return (
+    <Row
+      className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 bg-surface-1 py-2 whitespace-nowrap"
+      style={{ height: `${GANTT_BREADCRUMBS_HEIGHT}px` }}
+    >
+      <div className="ml-auto">
+        <div className="ml-auto text-11 font-medium text-tertiary">
+          {blockIds ? `${blockIds.length} ${loaderTitle}` : t("common.loading")}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        {VIEWS_LIST.map((chartView: any) => (
+          <div
+            key={chartView?.key}
+            className={cn(
+              "cursor-pointer rounded-md bg-layer-transparent p-1 px-2 text-11 hover:bg-layer-transparent-hover",
+              {
+                "bg-layer-transparent-selected": currentView === chartView?.key,
+              }
+            )}
+            onClick={() => handleChartView(chartView?.key)}
+          >
+            {t(chartView?.i18n_title)}
+          </div>
+        ))}
+      </div>
+
+      {showToday && (
+        <button
+          type="button"
+          className="rounded-md bg-layer-transparent p-1 px-2 text-11 hover:bg-layer-transparent-hover"
+          onClick={handleToday}
+        >
+          {t("common.today")}
+        </button>
+      )}
+
+      <button
+        type="button"
+        className="flex items-center justify-center rounded-md border border-subtle bg-layer-transparent p-1 transition-all hover:bg-layer-transparent-hover"
+        onClick={toggleFullScreenMode}
+      >
+        {fullScreenMode ? <ArrowCollapseOutline className="h-4 w-4" /> : <FullScreenOutline className="h-4 w-4" />}
+      </button>
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/chart/index.ts b/apps/web/core/components/gantt-chart/chart/index.ts
new file mode 100644
index 0000000..cf20bf5
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/chart/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./views";
+export * from "./header";
+export * from "./main-content";
+export * from "./root";
diff --git a/apps/web/core/components/gantt-chart/chart/main-content.tsx b/apps/web/core/components/gantt-chart/chart/main-content.tsx
new file mode 100644
index 0000000..2ae48f5
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/chart/main-content.tsx
@@ -0,0 +1,238 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { observer } from "mobx-react";
+import type {
+  ChartDataType,
+  IBlockUpdateData,
+  IBlockUpdateDependencyData,
+  IGanttBlock,
+  TGanttViews,
+} from "@plane/types";
+import { cn, getDate } from "@plane/utils";
+// components
+import { MultipleSelectGroup } from "@/components/core/multiple-select";
+import { GanttChartSidebar, MonthChartView, QuarterChartView, WeekChartView } from "@/components/gantt-chart";
+// helpers
+// hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+import { GanttChartRowList } from "@/components/gantt-chart/blocks/block-row-list";
+import { GanttChartBlocksList } from "@/components/gantt-chart/blocks/blocks-list";
+import { IssueBulkOperationsRoot } from "@/components/issues/bulk-operations";
+import { useBulkOperationStatus } from "@/hooks/use-bulk-operation-status";
+// local imports
+import { DEFAULT_BLOCK_WIDTH, GANTT_SELECT_GROUP, HEADER_HEIGHT } from "../constants";
+import { getItemPositionWidth } from "../views";
+import { TimelineDragHelper } from "./timeline-drag-helper";
+
+type Props = {
+  blockIds: string[];
+  canLoadMoreBlocks?: boolean;
+  loadMoreBlocks?: () => void;
+  updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>;
+  blockToRender: (data: any) => React.ReactNode;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  bottomSpacing: boolean;
+  enableBlockLeftResize: boolean | ((blockId: string) => boolean);
+  enableBlockMove: boolean | ((blockId: string) => boolean);
+  enableBlockRightResize: boolean | ((blockId: string) => boolean);
+  enableReorder: boolean | ((blockId: string) => boolean);
+  enableSelection: boolean | ((blockId: string) => boolean);
+  enableAddBlock: boolean | ((blockId: string) => boolean);
+  enableDependency: boolean | ((blockId: string) => boolean);
+  itemsContainerWidth: number;
+  showAllBlocks: boolean;
+  sidebarToRender: (props: any) => React.ReactNode;
+  title: string;
+  updateCurrentViewRenderPayload: (
+    direction: "left" | "right",
+    currentView: TGanttViews,
+    targetDate?: Date
+  ) => ChartDataType | undefined;
+  quickAdd?: React.ReactNode | undefined;
+  isEpic?: boolean;
+};
+
+export const GanttChartMainContent = observer(function GanttChartMainContent(props: Props) {
+  const {
+    blockIds,
+    loadMoreBlocks,
+    blockToRender,
+    blockUpdateHandler,
+    bottomSpacing,
+    enableBlockLeftResize,
+    enableBlockMove,
+    enableBlockRightResize,
+    enableReorder,
+    enableAddBlock,
+    enableSelection,
+    enableDependency,
+    itemsContainerWidth,
+    showAllBlocks,
+    sidebarToRender,
+    title,
+    canLoadMoreBlocks,
+    updateCurrentViewRenderPayload,
+    quickAdd,
+    updateBlockDates,
+    isEpic = false,
+  } = props;
+  // refs
+  const ganttContainerRef = useRef<HTMLDivElement>(null);
+  // chart hook
+  const { currentView, currentViewData } = useTimeLineChartStore();
+  // plane web hooks
+  const isBulkOperationsEnabled = useBulkOperationStatus();
+
+  // Enable Auto Scroll for Ganttlist
+  useEffect(() => {
+    const element = ganttContainerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+        getAllowedAxis: () => "vertical",
+        canScroll: ({ source }) => source.data.dragInstanceId === "GANTT_REORDER",
+      })
+    );
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+  }, [ganttContainerRef?.current]);
+
+  // handling scroll functionality
+  const onScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => {
+    const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
+
+    const approxRangeLeft = scrollLeft;
+    const approxRangeRight = scrollWidth - (scrollLeft + clientWidth);
+    const calculatedRangeRight = itemsContainerWidth - (scrollLeft + clientWidth);
+
+    if (approxRangeRight < clientWidth || calculatedRangeRight < clientWidth) {
+      updateCurrentViewRenderPayload("right", currentView);
+    }
+    if (approxRangeLeft < clientWidth) {
+      updateCurrentViewRenderPayload("left", currentView);
+    }
+  };
+
+  const handleScrollToBlock = (block: IGanttBlock) => {
+    const scrollContainer = ganttContainerRef.current as HTMLDivElement;
+    const scrollToEndDate = !block.start_date && block.target_date;
+    const scrollToDate = block.start_date ? getDate(block.start_date) : getDate(block.target_date);
+    let chartData;
+
+    if (!scrollContainer || !currentViewData || !scrollToDate) return;
+
+    if (scrollToDate.getTime() < currentViewData.data.startDate.getTime()) {
+      chartData = updateCurrentViewRenderPayload("left", currentView, scrollToDate);
+    } else if (scrollToDate.getTime() > currentViewData.data.endDate.getTime()) {
+      chartData = updateCurrentViewRenderPayload("right", currentView, scrollToDate);
+    }
+    // update container's scroll position to the block's position
+    const updatedPosition = getItemPositionWidth(chartData ?? currentViewData, block);
+
+    setTimeout(() => {
+      if (updatedPosition)
+        scrollContainer.scrollLeft = updatedPosition.marginLeft - 4 - (scrollToEndDate ? DEFAULT_BLOCK_WIDTH : 0);
+    });
+  };
+
+  const CHART_VIEW_COMPONENTS: {
+    [key in TGanttViews]: React.FC;
+  } = {
+    week: WeekChartView,
+    month: MonthChartView,
+    quarter: QuarterChartView,
+  };
+
+  if (!currentView) return null;
+  const ActiveChartView = CHART_VIEW_COMPONENTS[currentView];
+
+  return (
+    <>
+      <TimelineDragHelper ganttContainerRef={ganttContainerRef} />
+      <MultipleSelectGroup
+        containerRef={ganttContainerRef}
+        entities={{
+          [GANTT_SELECT_GROUP]: blockIds ?? [],
+        }}
+        disabled={!isBulkOperationsEnabled || isEpic}
+      >
+        {(helpers) => (
+          <>
+            <div
+              // DO NOT REMOVE THE ID
+              id="gantt-container"
+              className={cn(
+                "vertical-scrollbar horizontal-scrollbar scrollbar-lg flex h-full w-full overflow-auto border-t-[0.5px] border-subtle",
+                {
+                  "mb-8": bottomSpacing,
+                }
+              )}
+              ref={ganttContainerRef}
+              onScroll={onScroll}
+            >
+              <GanttChartSidebar
+                blockIds={blockIds}
+                loadMoreBlocks={loadMoreBlocks}
+                canLoadMoreBlocks={canLoadMoreBlocks}
+                ganttContainerRef={ganttContainerRef}
+                blockUpdateHandler={blockUpdateHandler}
+                enableReorder={enableReorder}
+                enableSelection={enableSelection}
+                sidebarToRender={sidebarToRender}
+                title={title}
+                selectionHelpers={helpers}
+                showAllBlocks={showAllBlocks}
+                isEpic={isEpic}
+              />
+              <div className="relative h-max min-h-full flex-shrink-0 flex-grow">
+                <ActiveChartView />
+                {currentViewData && (
+                  <div
+                    className="relative h-full"
+                    style={{
+                      width: `${itemsContainerWidth}px`,
+                      transform: `translateY(${HEADER_HEIGHT}px)`,
+                      paddingBottom: `${HEADER_HEIGHT}px`,
+                    }}
+                  >
+                    <GanttChartRowList
+                      blockIds={blockIds}
+                      blockUpdateHandler={blockUpdateHandler}
+                      handleScrollToBlock={handleScrollToBlock}
+                      enableAddBlock={enableAddBlock}
+                      showAllBlocks={showAllBlocks}
+                      selectionHelpers={helpers}
+                      ganttContainerRef={ganttContainerRef}
+                    />
+                    <GanttChartBlocksList
+                      blockIds={blockIds}
+                      blockToRender={blockToRender}
+                      enableBlockLeftResize={enableBlockLeftResize}
+                      enableBlockRightResize={enableBlockRightResize}
+                      enableBlockMove={enableBlockMove}
+                      ganttContainerRef={ganttContainerRef}
+                      enableDependency={enableDependency}
+                      showAllBlocks={showAllBlocks}
+                      updateBlockDates={updateBlockDates}
+                    />
+                  </div>
+                )}
+              </div>
+            </div>
+            {quickAdd ? quickAdd : null}
+            <IssueBulkOperationsRoot selectionHelpers={helpers} />
+          </>
+        )}
+      </MultipleSelectGroup>
+    </>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/chart/root.tsx b/apps/web/core/components/gantt-chart/chart/root.tsx
new file mode 100644
index 0000000..2e47b55
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/chart/root.tsx
@@ -0,0 +1,224 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { createPortal } from "react-dom";
+// plane imports
+// components
+import type { ChartDataType, IBlockUpdateData, IBlockUpdateDependencyData, TGanttViews } from "@plane/types";
+import { cn } from "@plane/utils";
+import { GanttChartHeader, GanttChartMainContent } from "@/components/gantt-chart";
+// helpers
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+//
+import { SIDEBAR_WIDTH } from "../constants";
+import { currentViewDataWithView } from "../data";
+import type { IMonthBlock, IMonthView, IWeekBlock } from "../views";
+import { getNumberOfDaysBetweenTwoDates, monthView, quarterView, weekView } from "../views";
+
+type ChartViewRootProps = {
+  border: boolean;
+  title: string;
+  loaderTitle: string;
+  blockIds: string[];
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blockToRender: (data: any) => React.ReactNode;
+  sidebarToRender: (props: any) => React.ReactNode;
+  enableBlockLeftResize: boolean | ((blockId: string) => boolean);
+  enableBlockRightResize: boolean | ((blockId: string) => boolean);
+  enableBlockMove: boolean | ((blockId: string) => boolean);
+  enableReorder: boolean | ((blockId: string) => boolean);
+  enableAddBlock: boolean | ((blockId: string) => boolean);
+  enableSelection: boolean | ((blockId: string) => boolean);
+  enableDependency: boolean | ((blockId: string) => boolean);
+  bottomSpacing: boolean;
+  showAllBlocks: boolean;
+  loadMoreBlocks?: () => void;
+  updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>;
+  canLoadMoreBlocks?: boolean;
+  quickAdd?: React.ReactNode | undefined;
+  showToday: boolean;
+  isEpic?: boolean;
+};
+
+const timelineViewHelpers = {
+  week: weekView,
+  month: monthView,
+  quarter: quarterView,
+};
+
+export const ChartViewRoot = observer(function ChartViewRoot(props: ChartViewRootProps) {
+  const {
+    border,
+    title,
+    blockIds,
+    loadMoreBlocks,
+    loaderTitle,
+    blockUpdateHandler,
+    sidebarToRender,
+    blockToRender,
+    canLoadMoreBlocks,
+    enableBlockLeftResize,
+    enableBlockRightResize,
+    enableBlockMove,
+    enableReorder,
+    enableAddBlock,
+    enableSelection,
+    enableDependency,
+    bottomSpacing,
+    showAllBlocks,
+    quickAdd,
+    showToday,
+    updateBlockDates,
+    isEpic = false,
+  } = props;
+  // states
+  const [itemsContainerWidth, setItemsContainerWidth] = useState(0);
+  const [fullScreenMode, setFullScreenMode] = useState(false);
+  // hooks
+  const {
+    currentView,
+    currentViewData,
+    renderView,
+    updateCurrentView,
+    updateCurrentViewData,
+    updateRenderView,
+    updateAllBlocksOnChartChangeWhileDragging,
+  } = useTimeLineChartStore();
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
+
+  const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews, targetDate?: Date) => {
+    const selectedCurrentView: TGanttViews = view;
+    const selectedCurrentViewData: ChartDataType | undefined =
+      selectedCurrentView && selectedCurrentView === currentViewData?.key
+        ? currentViewData
+        : currentViewDataWithView(view);
+
+    if (selectedCurrentViewData === undefined) return;
+
+    const currentViewHelpers = timelineViewHelpers[selectedCurrentView];
+    const currentRender = currentViewHelpers.generateChart(selectedCurrentViewData, side, targetDate, startOfWeek);
+    const mergeRenderPayloads = currentViewHelpers.mergeRenderPayloads as (
+      a: IWeekBlock[] | IMonthView | IMonthBlock[],
+      b: IWeekBlock[] | IMonthView | IMonthBlock[]
+    ) => IWeekBlock[] | IMonthView | IMonthBlock[];
+
+    // updating the prevData, currentData and nextData
+    if (currentRender.payload) {
+      updateCurrentViewData(currentRender.state);
+
+      if (side === "left") {
+        updateCurrentView(selectedCurrentView);
+        updateRenderView(mergeRenderPayloads(currentRender.payload, renderView));
+        updateItemsContainerWidth(currentRender.scrollWidth);
+        if (!targetDate) updateCurrentLeftScrollPosition(currentRender.scrollWidth);
+        updateAllBlocksOnChartChangeWhileDragging(currentRender.scrollWidth);
+        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
+      } else if (side === "right") {
+        updateCurrentView(view);
+        updateRenderView(mergeRenderPayloads(renderView, currentRender.payload));
+        setItemsContainerWidth(itemsContainerWidth + currentRender.scrollWidth);
+      } else {
+        updateCurrentView(view);
+        updateRenderView(currentRender.payload);
+        setItemsContainerWidth(currentRender.scrollWidth);
+        setTimeout(() => {
+          handleScrollToCurrentSelectedDate(currentRender.state, currentRender.state.data.currentDate);
+        }, 50);
+      }
+    }
+
+    return currentRender.state;
+  };
+
+  const handleToday = () => updateCurrentViewRenderPayload(null, currentView);
+
+  // handling the scroll positioning from left and right
+  useEffect(() => {
+    handleToday();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const updateItemsContainerWidth = (width: number) => {
+    const scrollContainer = document.querySelector("#gantt-container") as HTMLDivElement;
+    if (!scrollContainer) return;
+    setItemsContainerWidth(width + scrollContainer?.scrollLeft);
+  };
+
+  const updateCurrentLeftScrollPosition = (width: number) => {
+    const scrollContainer = document.querySelector("#gantt-container") as HTMLDivElement;
+    if (!scrollContainer) return;
+
+    scrollContainer.scrollLeft = width + scrollContainer?.scrollLeft;
+  };
+
+  const handleScrollToCurrentSelectedDate = (currentState: ChartDataType, date: Date) => {
+    const scrollContainer = document.querySelector("#gantt-container") as HTMLDivElement;
+    if (!scrollContainer) return;
+
+    const clientVisibleWidth: number = scrollContainer?.clientWidth;
+    let scrollWidth: number = 0;
+    let daysDifference: number = 0;
+    daysDifference = getNumberOfDaysBetweenTwoDates(currentState.data.startDate, date);
+
+    scrollWidth =
+      Math.abs(daysDifference) * currentState.data.dayWidth -
+      (clientVisibleWidth / 2 - currentState.data.dayWidth) +
+      SIDEBAR_WIDTH / 2;
+
+    scrollContainer.scrollLeft = scrollWidth;
+  };
+
+  const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
+
+  const content = (
+    <div
+      className={cn("shadow relative flex h-full flex-col rounded-xs bg-surface-1 select-none", {
+        "inset-0 z-[25] bg-surface-1": fullScreenMode,
+        "border-[0.5px] border-subtle": border,
+      })}
+    >
+      <GanttChartHeader
+        blockIds={blockIds}
+        fullScreenMode={fullScreenMode}
+        toggleFullScreenMode={() => setFullScreenMode((prevData) => !prevData)}
+        handleChartView={(key) => updateCurrentViewRenderPayload(null, key)}
+        handleToday={handleToday}
+        loaderTitle={loaderTitle}
+        showToday={showToday}
+      />
+      <GanttChartMainContent
+        blockIds={blockIds}
+        loadMoreBlocks={loadMoreBlocks}
+        canLoadMoreBlocks={canLoadMoreBlocks}
+        blockToRender={blockToRender}
+        blockUpdateHandler={blockUpdateHandler}
+        bottomSpacing={bottomSpacing}
+        enableBlockLeftResize={enableBlockLeftResize}
+        enableBlockMove={enableBlockMove}
+        enableBlockRightResize={enableBlockRightResize}
+        enableReorder={enableReorder}
+        enableSelection={enableSelection}
+        enableAddBlock={enableAddBlock}
+        enableDependency={enableDependency}
+        itemsContainerWidth={itemsContainerWidth}
+        showAllBlocks={showAllBlocks}
+        sidebarToRender={sidebarToRender}
+        title={title}
+        updateCurrentViewRenderPayload={updateCurrentViewRenderPayload}
+        quickAdd={quickAdd}
+        updateBlockDates={updateBlockDates}
+        isEpic={isEpic}
+      />
+    </div>
+  );
+
+  return fullScreenMode && portalContainer ? createPortal(content, portalContainer) : content;
+});
diff --git a/apps/web/core/components/gantt-chart/chart/timeline-drag-helper.tsx b/apps/web/core/components/gantt-chart/chart/timeline-drag-helper.tsx
new file mode 100644
index 0000000..bd01830
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/chart/timeline-drag-helper.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { useAutoScroller } from "@/hooks/use-auto-scroller";
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+//
+import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../constants";
+
+type Props = {
+  ganttContainerRef: RefObject<HTMLDivElement | null>;
+};
+export const TimelineDragHelper = observer(function TimelineDragHelper(props: Props) {
+  const { ganttContainerRef } = props;
+  const { isDragging } = useTimeLineChartStore();
+
+  useAutoScroller(ganttContainerRef, isDragging, SIDEBAR_WIDTH, HEADER_HEIGHT);
+  return <></>;
+});
diff --git a/apps/web/core/components/gantt-chart/chart/views/index.ts b/apps/web/core/components/gantt-chart/chart/views/index.ts
new file mode 100644
index 0000000..b7964eb
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/chart/views/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./month";
+export * from "./quarter";
+export * from "./week";
diff --git a/apps/web/core/components/gantt-chart/chart/views/month.tsx b/apps/web/core/components/gantt-chart/chart/views/month.tsx
new file mode 100644
index 0000000..3473f2b
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/chart/views/month.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { cn } from "@plane/utils";
+import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
+// helpers
+// hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+// types
+import type { IMonthView } from "../../views";
+import { getNumberOfDaysBetweenTwoDates } from "../../views/helpers";
+
+export const MonthChartView = observer(function MonthChartView(_props: any) {
+  // chart hook
+  const { currentViewData, renderView } = useTimeLineChartStore();
+  const monthView: IMonthView = renderView;
+
+  if (!monthView) return <></>;
+
+  const { months, weeks } = monthView;
+
+  const monthsStartDate = new Date(months[0].year, months[0].month, 1);
+  const weeksStartDate = weeks[0].startDate;
+
+  const marginLeftDays = getNumberOfDaysBetweenTwoDates(monthsStartDate, weeksStartDate);
+
+  return (
+    <div className="absolute top-0 left-0 flex h-max min-h-full w-max">
+      {currentViewData && (
+        <div className="relative flex flex-col outline-[0.25px] outline-subtle-1">
+          {/** Header Div */}
+          <div
+            className="sticky top-0 z-[5] w-full flex-shrink-0 bg-surface-1"
+            style={{
+              height: `${HEADER_HEIGHT}px`,
+            }}
+          >
+            {/** Main Month Title */}
+            <div className="flex h-7" style={{ marginLeft: `${marginLeftDays * currentViewData.data.dayWidth}px` }}>
+              {months?.map((monthBlock) => (
+                <div
+                  key={`month-${monthBlock?.month}-${monthBlock?.year}`}
+                  className="flex outline-[0.5px] outline-subtle-1"
+                  style={{ width: `${monthBlock.days * currentViewData?.data.dayWidth}px` }}
+                >
+                  <div
+                    className="sticky z-[1] m-1 flex items-center bg-surface-1 px-3 py-1 text-14 font-regular whitespace-nowrap text-secondary capitalize"
+                    style={{
+                      left: `${SIDEBAR_WIDTH}px`,
+                    }}
+                  >
+                    {monthBlock?.title}
+                    {monthBlock.today && (
+                      <span className={cn("ml-2 rounded-sm bg-accent-primary px-1 text-9 font-medium text-on-color")}>
+                        Current
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+            {/** Weeks Sub title */}
+            <div className="flex h-5 w-full">
+              {weeks?.map((weekBlock) => (
+                <div
+                  key={`sub-title-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
+                  className={cn(
+                    "flex flex-shrink-0 justify-between px-2 py-1 text-center capitalize outline-[0.25px] outline-subtle-1",
+                    {
+                      "bg-accent-primary/20": weekBlock.today,
+                    }
+                  )}
+                  style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
+                >
+                  <div className="space-x-1 text-11 font-medium text-placeholder">
+                    <span
+                      className={cn({
+                        "rounded-sm bg-accent-primary px-1 text-on-color": weekBlock.today,
+                      })}
+                    >
+                      {weekBlock.startDate.getDate()}-{weekBlock.endDate.getDate()}
+                    </span>
+                  </div>
+                  <div className="space-x-1 text-11 font-medium">{weekBlock.weekData.shortTitle}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          {/** Week Columns */}
+          <div className="flex h-full w-full flex-grow">
+            {weeks?.map((weekBlock) => (
+              <div
+                key={`column-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
+                className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
+                  "bg-accent-primary/20": weekBlock.today,
+                })}
+                style={{ width: `${currentViewData?.data.dayWidth * 7}px` }}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/chart/views/quarter.tsx b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
new file mode 100644
index 0000000..9b13567
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/chart/views/quarter.tsx
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+//
+import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../../constants";
+import type { IMonthBlock, IQuarterMonthBlock } from "../../views";
+import { groupMonthsToQuarters } from "../../views";
+
+export const QuarterChartView = observer(function QuarterChartView(_props: any) {
+  const { currentViewData, renderView } = useTimeLineChartStore();
+  const monthBlocks: IMonthBlock[] = renderView;
+
+  const quarterBlocks: IQuarterMonthBlock[] = groupMonthsToQuarters(monthBlocks);
+
+  return (
+    <div className={`absolute top-0 left-0 flex h-max min-h-full w-max`}>
+      {currentViewData &&
+        quarterBlocks?.map((quarterBlock, rootIndex) => (
+          <div
+            key={`month-${quarterBlock.quarterNumber}-${quarterBlock.year}`}
+            className="relative flex flex-col outline-[0.25px] outline-subtle-1"
+          >
+            {/** Header Div */}
+            <div
+              className="sticky top-0 z-[5] w-full flex-shrink-0 bg-surface-1 outline-[1px] outline-subtle-1"
+              style={{
+                height: `${HEADER_HEIGHT}px`,
+              }}
+            >
+              {/** Main Quarter Title */}
+              <div className="inline-flex h-7 w-full justify-between">
+                <div
+                  className="sticky z-[1] my-1 flex items-center bg-surface-1 px-3 py-1 text-14 font-regular whitespace-nowrap text-secondary capitalize"
+                  style={{
+                    left: `${SIDEBAR_WIDTH}px`,
+                  }}
+                >
+                  {quarterBlock?.title}
+                  {quarterBlock.today && (
+                    <span className={cn("ml-2 rounded-sm bg-accent-primary px-1 text-9 font-medium text-on-color")}>
+                      Current
+                    </span>
+                  )}
+                </div>
+                <div className="sticky px-3 py-2 text-11 whitespace-nowrap text-placeholder capitalize">
+                  {quarterBlock.shortTitle}
+                </div>
+              </div>
+              {/** Months Sub title */}
+              <div className="flex h-5 w-full">
+                {quarterBlock?.children?.map((monthBlock, index) => (
+                  <div
+                    key={`sub-title-${rootIndex}-${index}`}
+                    className={cn(
+                      "flex flex-shrink-0 justify-center text-center capitalize outline-[0.25px] outline-subtle-1",
+                      {
+                        "bg-accent-primary/20": monthBlock.today,
+                      }
+                    )}
+                    style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
+                  >
+                    <div className="flex h-full items-center justify-center space-x-1 text-11 font-medium">
+                      <span
+                        className={cn({
+                          "rounded-lg bg-accent-primary px-2 text-on-color": monthBlock.today,
+                        })}
+                      >
+                        {monthBlock.monthData.shortTitle}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            {/** Month Columns */}
+            <div className="flex h-full w-full flex-grow">
+              {quarterBlock?.children?.map((monthBlock, index) => (
+                <div
+                  key={`column-${rootIndex}-${index}`}
+                  className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
+                    "bg-accent-primary/20": monthBlock.today,
+                  })}
+                  style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/chart/views/week.tsx b/apps/web/core/components/gantt-chart/chart/views/week.tsx
new file mode 100644
index 0000000..2f96eb1
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/chart/views/week.tsx
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+//
+import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../../constants";
+import type { IWeekBlock } from "../../views";
+
+export const WeekChartView = observer(function WeekChartView(_props: any) {
+  const { currentViewData, renderView } = useTimeLineChartStore();
+  const weekBlocks: IWeekBlock[] = renderView;
+
+  return (
+    <div className={`absolute top-0 left-0 flex h-max min-h-full w-max`}>
+      {currentViewData &&
+        weekBlocks?.map((block, rootIndex) => (
+          <div
+            key={`month-${block?.startDate.toString()}-${block?.endDate.toString()}`}
+            className="relative flex flex-col outline-[0.25px] outline-subtle-1"
+          >
+            {/** Header Div */}
+            <div
+              className="sticky top-0 z-[5] w-full flex-shrink-0 bg-surface-1 outline-[1px] outline-subtle-1"
+              style={{
+                height: `${HEADER_HEIGHT}px`,
+              }}
+            >
+              {/** Main Months Title */}
+              <div className="inline-flex h-7 w-full justify-between">
+                <div
+                  className="sticky z-[1] m-1 flex items-center bg-surface-1 px-3 py-1 text-13 font-regular whitespace-nowrap text-secondary capitalize"
+                  style={{
+                    left: `${SIDEBAR_WIDTH}px`,
+                  }}
+                >
+                  {block?.title}
+                </div>
+                <div className="sticky px-3 py-2 text-11 whitespace-nowrap text-placeholder capitalize">
+                  {block?.weekData?.title}
+                </div>
+              </div>
+              {/** Days Sub title */}
+              <div className="flex h-5 w-full">
+                {block?.children?.map((weekDay, index) => (
+                  <div
+                    key={`sub-title-${rootIndex}-${index}`}
+                    className={cn(
+                      "flex flex-shrink-0 justify-between p-1 text-center capitalize outline-[0.25px] outline-subtle-1",
+                      {
+                        "bg-accent-primary/20": weekDay.today,
+                      }
+                    )}
+                    style={{ width: `${currentViewData?.data.dayWidth}px` }}
+                  >
+                    <div className="space-x-1 text-11 font-medium text-placeholder">{weekDay.dayData.abbreviation}</div>
+                    <div className="space-x-1 text-11 font-medium">
+                      <span
+                        className={cn({
+                          "rounded-sm bg-accent-primary px-1 text-on-color": weekDay.today,
+                        })}
+                      >
+                        {weekDay.date.getDate()}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            {/** Day Columns */}
+            <div className="flex h-full w-full flex-grow bg-surface-1">
+              {block?.children?.map((weekDay, index) => (
+                <div
+                  key={`column-${rootIndex}-${index}`}
+                  className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
+                    "bg-accent-primary/20": weekDay.today,
+                  })}
+                  style={{ width: `${currentViewData?.data.dayWidth}px` }}
+                >
+                  {["sat", "sun"].includes(weekDay?.dayData?.shortTitle) && (
+                    <div className="h-full bg-surface-2 outline-[0.25px] outline-strong" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/constants.ts b/apps/web/core/components/gantt-chart/constants.ts
new file mode 100644
index 0000000..04ab7d2
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/constants.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const BLOCK_HEIGHT = 44;
+
+export const HEADER_HEIGHT = 48;
+
+export const GANTT_BREADCRUMBS_HEIGHT = 40;
+
+export const SIDEBAR_WIDTH = 360;
+
+export const DEFAULT_BLOCK_WIDTH = 60;
+
+export const GANTT_SELECT_GROUP = "gantt-issues";
diff --git a/apps/web/core/components/gantt-chart/contexts/index.tsx b/apps/web/core/components/gantt-chart/contexts/index.tsx
new file mode 100644
index 0000000..c3fbcdc
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/contexts/index.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { createContext, useContext } from "react";
+import type { TTimelineType } from "@plane/types";
+
+export const TimeLineTypeContext = createContext<TTimelineType | undefined>(undefined);
+
+export const useTimeLineType = () => {
+  const timelineType = useContext(TimeLineTypeContext);
+  return timelineType;
+};
diff --git a/apps/web/core/components/gantt-chart/data/index.ts b/apps/web/core/components/gantt-chart/data/index.ts
new file mode 100644
index 0000000..18640a4
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/data/index.ts
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { WeekMonthDataType, ChartDataType, TGanttViews } from "@plane/types";
+import { EStartOfTheWeek } from "@plane/types";
+
+// constants
+export const generateWeeks = (startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY): WeekMonthDataType[] => [
+  ...weeks.slice(startOfWeek),
+  ...weeks.slice(0, startOfWeek),
+];
+
+export const weeks: WeekMonthDataType[] = [
+  { key: 0, shortTitle: "sun", title: "sunday", abbreviation: "Su" },
+  { key: 1, shortTitle: "mon", title: "monday", abbreviation: "M" },
+  { key: 2, shortTitle: "tue", title: "tuesday", abbreviation: "T" },
+  { key: 3, shortTitle: "wed", title: "wednesday", abbreviation: "W" },
+  { key: 4, shortTitle: "thurs", title: "thursday", abbreviation: "Th" },
+  { key: 5, shortTitle: "fri", title: "friday", abbreviation: "F" },
+  { key: 6, shortTitle: "sat", title: "saturday", abbreviation: "Sa" },
+];
+
+export const months: WeekMonthDataType[] = [
+  { key: 0, shortTitle: "jan", title: "january", abbreviation: "Jan" },
+  { key: 1, shortTitle: "feb", title: "february", abbreviation: "Feb" },
+  { key: 2, shortTitle: "mar", title: "march", abbreviation: "Mar" },
+  { key: 3, shortTitle: "apr", title: "april", abbreviation: "Apr" },
+  { key: 4, shortTitle: "may", title: "may", abbreviation: "May" },
+  { key: 5, shortTitle: "jun", title: "june", abbreviation: "Jun" },
+  { key: 6, shortTitle: "jul", title: "july", abbreviation: "Jul" },
+  { key: 7, shortTitle: "aug", title: "august", abbreviation: "Aug" },
+  { key: 8, shortTitle: "sept", title: "september", abbreviation: "Sept" },
+  { key: 9, shortTitle: "oct", title: "october", abbreviation: "Oct" },
+  { key: 10, shortTitle: "nov", title: "november", abbreviation: "Nov" },
+  { key: 11, shortTitle: "dec", title: "december", abbreviation: "Dec" },
+];
+
+export const quarters: WeekMonthDataType[] = [
+  { key: 0, shortTitle: "Q1", title: "Jan - Mar", abbreviation: "Q1" },
+  { key: 1, shortTitle: "Q2", title: "Apr - Jun", abbreviation: "Q2" },
+  { key: 2, shortTitle: "Q3", title: "Jul - Sept", abbreviation: "Q3" },
+  { key: 3, shortTitle: "Q4", title: "Oct - Dec", abbreviation: "Q4" },
+];
+
+export const charCapitalize = (word: string) => `${word.charAt(0).toUpperCase()}${word.substring(1)}`;
+
+export const bindZero = (value: number) => (value > 9 ? `${value}` : `0${value}`);
+
+export const timePreview = (date: Date) => {
+  let hours = date.getHours();
+  const amPm = hours >= 12 ? "PM" : "AM";
+  hours = hours % 12;
+  hours = hours ? hours : 12;
+
+  let minutes: number | string = date.getMinutes();
+  minutes = bindZero(minutes);
+
+  return `${bindZero(hours)}:${minutes} ${amPm}`;
+};
+
+export const datePreview = (date: Date, includeTime: boolean = false) => {
+  const day = date.getDate();
+  let month: number | WeekMonthDataType = date.getMonth();
+  month = months[month];
+  const year = date.getFullYear();
+
+  return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${includeTime ? `, ${timePreview(date)}` : ``}`;
+};
+
+// context data
+export const VIEWS_LIST: ChartDataType[] = [
+  {
+    key: "week",
+    i18n_title: "common.week",
+    data: {
+      startDate: new Date(),
+      currentDate: new Date(),
+      endDate: new Date(),
+      approxFilterRange: 4, // it will preview week dates with weekends highlighted with 1 week limitations ex: title (Wed 1, Thu 2, Fri 3)
+      dayWidth: 60,
+    },
+  },
+  {
+    key: "month",
+    i18n_title: "common.month",
+    data: {
+      startDate: new Date(),
+      currentDate: new Date(),
+      endDate: new Date(),
+      approxFilterRange: 6, // it will preview monthly all dates with weekends highlighted with no limitations ex: title (1, 2, 3)
+      dayWidth: 20,
+    },
+  },
+  {
+    key: "quarter",
+    i18n_title: "common.quarter",
+    data: {
+      startDate: new Date(),
+      currentDate: new Date(),
+      endDate: new Date(),
+      approxFilterRange: 24, // it will preview week starting dates all months data and there is 3 months limitation for preview ex: title (2, 9, 16, 23, 30)
+      dayWidth: 5,
+    },
+  },
+];
+
+export const currentViewDataWithView = (view: TGanttViews = "month") =>
+  VIEWS_LIST.find((_viewData) => _viewData.key === view);
diff --git a/apps/web/core/components/gantt-chart/helpers/add-block.tsx b/apps/web/core/components/gantt-chart/helpers/add-block.tsx
new file mode 100644
index 0000000..2b87bae
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/helpers/add-block.tsx
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { addDays } from "date-fns";
+import { observer } from "mobx-react";
+import { AddOutline } from "@makeplane/propel/icons";
+// ui
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IBlockUpdateData, IGanttBlock } from "@plane/types";
+// helpers
+import { renderFormattedDate, renderFormattedPayloadDate } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+//
+
+type Props = {
+  block: IGanttBlock;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+};
+
+export const ChartAddBlock = observer(function ChartAddBlock(props: Props) {
+  const { block, blockUpdateHandler } = props;
+  // states
+  const [isButtonVisible, setIsButtonVisible] = useState(false);
+  const [buttonXPosition, setButtonXPosition] = useState(0);
+  const [buttonStartDate, setButtonStartDate] = useState<Date | null>(null);
+  // refs
+  const containerRef = useRef<HTMLDivElement>(null);
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // chart hook
+  const { currentViewData, currentView } = useTimeLineChartStore();
+
+  const handleButtonClick = () => {
+    if (!currentViewData) return;
+
+    const { startDate: chartStartDate, dayWidth } = currentViewData.data;
+    const columnNumber = buttonXPosition / dayWidth;
+
+    let numberOfDays = 1;
+
+    if (currentView === "quarter") numberOfDays = 7;
+
+    const startDate = addDays(chartStartDate, columnNumber);
+    const endDate = addDays(startDate, numberOfDays);
+
+    blockUpdateHandler(block.data, {
+      start_date: renderFormattedPayloadDate(startDate) ?? undefined,
+      target_date: renderFormattedPayloadDate(endDate) ?? undefined,
+      meta: block.meta,
+    });
+  };
+
+  useEffect(() => {
+    const container = containerRef.current;
+
+    if (!container) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!currentViewData) return;
+
+      setButtonXPosition(e.offsetX);
+
+      const { startDate: chartStartDate, dayWidth } = currentViewData.data;
+      const columnNumber = buttonXPosition / dayWidth;
+
+      const startDate = addDays(chartStartDate, columnNumber);
+      setButtonStartDate(startDate);
+    };
+
+    container.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      container?.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [buttonXPosition, currentViewData]);
+
+  return (
+    <div
+      className="relative h-full w-full"
+      onMouseEnter={() => setIsButtonVisible(true)}
+      onMouseLeave={() => setIsButtonVisible(false)}
+    >
+      <div ref={containerRef} className="h-full w-full" />
+      {isButtonVisible && (
+        <Tooltip label={renderFormattedDate(buttonStartDate) ?? ""} disabled={isMobile}>
+          <button
+            type="button"
+            className="absolute top-1/2 grid h-8 w-8 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-sm border border-strong bg-layer-1 p-1.5 text-secondary hover:text-primary"
+            style={{
+              marginLeft: `${buttonXPosition}px`,
+            }}
+            onClick={handleButtonClick}
+          >
+            <AddOutline className="h-3.5 w-3.5" />
+          </button>
+        </Tooltip>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx b/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
new file mode 100644
index 0000000..11ffb03
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane utils
+import { cn, renderFormattedDate } from "@plane/utils";
+//helpers
+//
+//hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+
+type LeftResizableProps = {
+  enableBlockLeftResize: boolean;
+  handleBlockDrag: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, dragDirection: "left" | "right" | "move") => void;
+  isMoving: "left" | "right" | "move" | undefined;
+  position?: {
+    marginLeft: number;
+    width: number;
+  };
+};
+export const LeftResizable = observer(function LeftResizable(props: LeftResizableProps) {
+  const { enableBlockLeftResize, isMoving, handleBlockDrag, position } = props;
+  const [isHovering, setIsHovering] = useState(false);
+
+  const { getDateFromPositionOnGantt } = useTimeLineChartStore();
+
+  const date = position ? getDateFromPositionOnGantt(position.marginLeft, 0) : undefined;
+  const dateString = date ? renderFormattedDate(date) : undefined;
+
+  const isLeftResizing = isMoving === "left" || isMoving === "move";
+
+  if (!enableBlockLeftResize) return null;
+
+  return (
+    <>
+      {(isHovering || isLeftResizing) && dateString && (
+        <div className="absolute -left-36 flex h-full w-32 items-center justify-end text-11 font-regular text-tertiary">
+          <div className="rounded-sm bg-accent-subtle px-2 py-1">{dateString}</div>
+        </div>
+      )}
+      <div
+        onMouseDown={(e) => {
+          handleBlockDrag(e, "left");
+        }}
+        onMouseOver={() => {
+          setIsHovering(true);
+        }}
+        onMouseOut={() => {
+          setIsHovering(false);
+        }}
+        className="absolute top-1/2 -left-1.5 z-[6] h-full w-3 -translate-y-1/2 cursor-col-resize rounded-md"
+      />
+      <div
+        className={cn(
+          "absolute top-1/2 left-1 z-[5] h-7 w-1 -translate-y-1/2 rounded-xs bg-surface-1 opacity-0 transition-all duration-300 group-hover:opacity-100",
+          {
+            "-left-1.5 opacity-100": isLeftResizing,
+          }
+        )}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx b/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
new file mode 100644
index 0000000..d8cd217
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane utils
+import { cn, renderFormattedDate } from "@plane/utils";
+//helpers
+//
+//hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+
+type RightResizableProps = {
+  enableBlockRightResize: boolean;
+  handleBlockDrag: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, dragDirection: "left" | "right" | "move") => void;
+  isMoving: "left" | "right" | "move" | undefined;
+  position?: {
+    marginLeft: number;
+    width: number;
+  };
+};
+export const RightResizable = observer(function RightResizable(props: RightResizableProps) {
+  const { enableBlockRightResize, handleBlockDrag, isMoving, position } = props;
+  const [isHovering, setIsHovering] = useState(false);
+
+  const { getDateFromPositionOnGantt } = useTimeLineChartStore();
+
+  const date = position ? getDateFromPositionOnGantt(position.marginLeft + position.width, -1) : undefined;
+  const dateString = date ? renderFormattedDate(date) : undefined;
+
+  const isRightResizing = isMoving === "right" || isMoving === "move";
+
+  if (!enableBlockRightResize) return null;
+
+  return (
+    <>
+      {(isHovering || isRightResizing) && dateString && (
+        <div className="absolute -right-36 z-[10] flex h-full w-32 items-center justify-start text-11 font-regular text-tertiary">
+          <div className="rounded-sm bg-accent-subtle px-2 py-1">{dateString}</div>
+        </div>
+      )}
+      <div
+        onMouseDown={(e) => handleBlockDrag(e, "right")}
+        onMouseOver={() => {
+          setIsHovering(true);
+        }}
+        onMouseOut={() => {
+          setIsHovering(false);
+        }}
+        className="absolute top-1/2 -right-1.5 z-[6] h-full w-3 -translate-y-1/2 cursor-col-resize rounded-md"
+      />
+      <div
+        className={cn(
+          "absolute top-1/2 right-1 z-[5] h-7 w-1 -translate-y-1/2 rounded-xs bg-surface-1 opacity-0 transition-all duration-300 group-hover:opacity-100",
+          {
+            "-right-1.5 opacity-100": isRightResizing,
+          }
+        )}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts b/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
new file mode 100644
index 0000000..cb52f14
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+// Plane
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IBlockUpdateDependencyData, IGanttBlock } from "@plane/types";
+// hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+//
+import { DEFAULT_BLOCK_WIDTH, SIDEBAR_WIDTH } from "../../constants";
+
+export const useGanttResizable = (
+  block: IGanttBlock,
+  resizableRef: React.RefObject<HTMLDivElement | null>,
+  ganttContainerRef: React.RefObject<HTMLDivElement | null>,
+  updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>
+) => {
+  // refs
+  const initialPositionRef = useRef<{ marginLeft: number; width: number; offsetX: number }>({
+    marginLeft: 0,
+    width: 0,
+    offsetX: 0,
+  });
+  const ganttContainerDimensions = useRef<DOMRect | undefined>(undefined);
+  const currMouseEvent = useRef<MouseEvent | undefined>(undefined);
+  // states
+  const { currentViewData, updateBlockPosition, setIsDragging, getUpdatedPositionAfterDrag } = useTimeLineChartStore();
+  const [isMoving, setIsMoving] = useState<"left" | "right" | "move" | undefined>();
+
+  // handle block resize from the left end
+  const handleBlockDrag = (
+    e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+    dragDirection: "left" | "right" | "move"
+  ) => {
+    const ganttContainerElement = ganttContainerRef.current;
+    if (!currentViewData || !resizableRef.current || !block.position || !ganttContainerElement) return;
+
+    if (e.button !== 0) return;
+
+    const resizableDiv = resizableRef.current;
+
+    ganttContainerDimensions.current = ganttContainerElement.getBoundingClientRect();
+
+    const dayWidth = currentViewData.data.dayWidth;
+    const mouseX = e.clientX - ganttContainerDimensions.current.left - SIDEBAR_WIDTH + ganttContainerElement.scrollLeft;
+
+    // record position on drag start
+    initialPositionRef.current = {
+      width: block.position.width ?? 0,
+      marginLeft: block.position.marginLeft ?? 0,
+      offsetX: mouseX - block.position.marginLeft,
+    };
+
+    const handleOnScroll = () => {
+      if (currMouseEvent.current) handleMouseMove(currMouseEvent.current);
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      currMouseEvent.current = e;
+      setIsMoving(dragDirection);
+      setIsDragging(true);
+
+      if (!ganttContainerDimensions.current) return;
+
+      const { left: containerLeft } = ganttContainerDimensions.current;
+
+      const mouseX = e.clientX - containerLeft - SIDEBAR_WIDTH + ganttContainerElement.scrollLeft;
+
+      let width = initialPositionRef.current.width;
+      let marginLeft = initialPositionRef.current.marginLeft;
+
+      if (dragDirection === "left") {
+        // calculate new marginLeft and update the initial marginLeft to the newly calculated one
+        marginLeft = Math.round(mouseX / dayWidth) * dayWidth;
+        // get Dimensions from dom's style
+        const prevMarginLeft = parseFloat(resizableDiv.style.marginLeft.slice(0, -2));
+        const prevWidth = parseFloat(resizableDiv.style.width.slice(0, -2));
+        // calculate new width
+        const marginDelta = prevMarginLeft - marginLeft;
+        // If target date does not exist while dragging with left handle the revert to default width
+        width = block.target_date ? prevWidth + marginDelta : DEFAULT_BLOCK_WIDTH;
+      } else if (dragDirection === "right") {
+        // calculate new width and update the initialMarginLeft using +=
+        width = Math.round(mouseX / dayWidth) * dayWidth - marginLeft;
+
+        // If start date does not exist while dragging with right handle the revert to default width and adjust marginLeft accordingly
+        if (!block.start_date) {
+          // calculate new right and update the marginLeft to the newly calculated one
+          const marginRight = Math.round(mouseX / dayWidth) * dayWidth;
+          marginLeft = marginRight - DEFAULT_BLOCK_WIDTH;
+          width = DEFAULT_BLOCK_WIDTH;
+        }
+      } else if (dragDirection === "move") {
+        // calculate new marginLeft and update the initial marginLeft using -=
+        marginLeft = Math.round((mouseX - initialPositionRef.current.offsetX) / dayWidth) * dayWidth;
+      }
+
+      // block needs to be at least 1 dayWidth Wide
+      if (width < dayWidth) return;
+
+      resizableDiv.style.width = `${width}px`;
+      resizableDiv.style.marginLeft = `${marginLeft}px`;
+
+      const deltaLeft = Math.round((marginLeft - (block.position?.marginLeft ?? 0)) / dayWidth) * dayWidth;
+      const deltaWidth = Math.round((width - (block.position?.width ?? 0)) / dayWidth) * dayWidth;
+
+      // call update blockPosition
+      if (deltaWidth || deltaLeft) updateBlockPosition(block.id, deltaLeft, deltaWidth);
+    };
+
+    // remove event listeners and call updateBlockDates
+    const handleMouseUp = () => {
+      setIsMoving(undefined);
+
+      document.removeEventListener("mousemove", handleMouseMove);
+      ganttContainerElement.removeEventListener("scroll", handleOnScroll);
+      document.removeEventListener("mouseup", handleMouseUp);
+
+      // update half blocks only when the missing side of the block is directly dragged
+      const shouldUpdateHalfBlock =
+        (dragDirection === "left" && !block.start_date) || (dragDirection === "right" && !block.target_date);
+
+      try {
+        const blockUpdates = getUpdatedPositionAfterDrag(block.id, shouldUpdateHalfBlock);
+        if (updateBlockDates) updateBlockDates(blockUpdates);
+      } catch {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error",
+          message: "Something went wrong while updating block dates",
+        });
+      }
+
+      setIsDragging(false);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    ganttContainerElement.addEventListener("scroll", handleOnScroll);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+
+  return {
+    isMoving,
+    handleBlockDrag,
+  };
+};
diff --git a/apps/web/core/components/gantt-chart/helpers/draggable.tsx b/apps/web/core/components/gantt-chart/helpers/draggable.tsx
new file mode 100644
index 0000000..c493de5
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/helpers/draggable.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
+import React from "react";
+import { observer } from "mobx-react";
+// hooks
+import type { IGanttBlock } from "@plane/types";
+// helpers
+import { cn } from "@plane/utils";
+// components
+import { LeftResizable } from "./blockResizables/left-resizable";
+import { RightResizable } from "./blockResizables/right-resizable";
+
+type Props = {
+  block: IGanttBlock;
+  blockToRender: (data: any) => React.ReactNode;
+  handleBlockDrag: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, dragDirection: "left" | "right" | "move") => void;
+  isMoving: "left" | "right" | "move" | undefined;
+  enableBlockLeftResize: boolean;
+  enableBlockRightResize: boolean;
+  enableBlockMove: boolean;
+  enableDependency: boolean | ((blockId: string) => boolean);
+  ganttContainerRef: RefObject<HTMLDivElement | null>;
+};
+
+export const ChartDraggable = observer(function ChartDraggable(props: Props) {
+  const {
+    block,
+    blockToRender,
+    handleBlockDrag,
+    enableBlockLeftResize,
+    enableBlockRightResize,
+    enableBlockMove,
+    isMoving,
+  } = props;
+
+  return (
+    <div className="group relative z-[5] inline-flex h-full w-full cursor-pointer items-center font-medium transition-all">
+      <LeftResizable
+        enableBlockLeftResize={enableBlockLeftResize}
+        handleBlockDrag={handleBlockDrag}
+        isMoving={isMoving}
+        position={block.position}
+      />
+      {/* oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+      <div
+        className={cn("relative z-[6] flex h-8 w-full items-center rounded-sm", {
+          "pointer-events-none": isMoving,
+        })}
+        onMouseDown={(e) => enableBlockMove && handleBlockDrag(e, "move")}
+      >
+        {blockToRender({ ...block.data, meta: block.meta })}
+      </div>
+      {/* right resize drag handle */}
+      <RightResizable
+        enableBlockRightResize={enableBlockRightResize}
+        handleBlockDrag={handleBlockDrag}
+        isMoving={isMoving}
+        position={block.position}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/helpers/index.ts b/apps/web/core/components/gantt-chart/helpers/index.ts
new file mode 100644
index 0000000..c63e7fe
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/helpers/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./add-block";
+export * from "./draggable";
diff --git a/apps/web/core/components/gantt-chart/index.ts b/apps/web/core/components/gantt-chart/index.ts
new file mode 100644
index 0000000..b9a1d96
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./chart";
+export * from "./helpers";
+export * from "./root";
+export * from "./sidebar";
diff --git a/apps/web/core/components/gantt-chart/root.tsx b/apps/web/core/components/gantt-chart/root.tsx
new file mode 100644
index 0000000..cadb5e2
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/root.tsx
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+// components
+import type { IBlockUpdateData, IBlockUpdateDependencyData } from "@plane/types";
+// hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+import { ChartViewRoot } from "./chart/root";
+
+type GanttChartRootProps = {
+  border?: boolean;
+  title: string;
+  loaderTitle: string;
+  blockIds: string[];
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blockToRender: (data: any) => React.ReactNode;
+  sidebarToRender: (props: any) => React.ReactNode;
+  quickAdd?: React.ReactNode | undefined;
+  canLoadMoreBlocks?: boolean;
+  loadMoreBlocks?: () => void;
+  updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>;
+  enableBlockLeftResize?: boolean | ((blockId: string) => boolean);
+  enableBlockRightResize?: boolean | ((blockId: string) => boolean);
+  enableBlockMove?: boolean | ((blockId: string) => boolean);
+  enableReorder?: boolean | ((blockId: string) => boolean);
+  enableAddBlock?: boolean | ((blockId: string) => boolean);
+  enableSelection?: boolean | ((blockId: string) => boolean);
+  enableDependency?: boolean | ((blockId: string) => boolean);
+  bottomSpacing?: boolean;
+  showAllBlocks?: boolean;
+  showToday?: boolean;
+  isEpic?: boolean;
+};
+
+export const GanttChartRoot = observer(function GanttChartRoot(props: GanttChartRootProps) {
+  const {
+    border = true,
+    title,
+    blockIds,
+    loaderTitle = "blocks",
+    blockUpdateHandler,
+    sidebarToRender,
+    blockToRender,
+    loadMoreBlocks,
+    canLoadMoreBlocks,
+    enableBlockLeftResize = false,
+    enableBlockRightResize = false,
+    enableBlockMove = false,
+    enableReorder = false,
+    enableAddBlock = false,
+    enableSelection = false,
+    enableDependency = false,
+    bottomSpacing = false,
+    showAllBlocks = false,
+    showToday = true,
+    quickAdd,
+    updateBlockDates,
+    isEpic = false,
+  } = props;
+
+  const { setBlockIds } = useTimeLineChartStore();
+
+  // update the timeline store with updated blockIds
+  useEffect(() => {
+    setBlockIds(blockIds);
+  }, [blockIds]);
+
+  return (
+    <ChartViewRoot
+      border={border}
+      title={title}
+      blockIds={blockIds}
+      loadMoreBlocks={loadMoreBlocks}
+      canLoadMoreBlocks={canLoadMoreBlocks}
+      loaderTitle={loaderTitle}
+      blockUpdateHandler={blockUpdateHandler}
+      sidebarToRender={sidebarToRender}
+      blockToRender={blockToRender}
+      enableBlockLeftResize={enableBlockLeftResize}
+      enableBlockRightResize={enableBlockRightResize}
+      enableBlockMove={enableBlockMove}
+      enableReorder={enableReorder}
+      enableAddBlock={enableAddBlock}
+      enableSelection={enableSelection}
+      enableDependency={enableDependency}
+      bottomSpacing={bottomSpacing}
+      showAllBlocks={showAllBlocks}
+      quickAdd={quickAdd}
+      showToday={showToday}
+      updateBlockDates={updateBlockDates}
+      isEpic={isEpic}
+    />
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx b/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
new file mode 100644
index 0000000..fe4bf0b
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { DropIndicator } from "@plane/ui";
+import { HIGHLIGHT_WITH_LINE, highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
+
+type Props = {
+  id: string;
+  isLastChild: boolean;
+  isDragEnabled: boolean;
+  children: (isDragging: boolean) => React.ReactNode;
+  onDrop: (draggingBlockId: string | undefined, droppedBlockId: string | undefined, dropAtEndOfList: boolean) => void;
+};
+
+export const GanttDnDHOC = observer(function GanttDnDHOC(props: Props) {
+  const { id, isLastChild, children, onDrop, isDragEnabled } = props;
+  // states
+  const [isDragging, setIsDragging] = useState(false);
+  const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
+  // refs
+  const blockRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const element = blockRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => isDragEnabled,
+        getInitialData: () => ({ id, dragInstanceId: "GANTT_REORDER" }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => source?.data?.id !== id && source?.data?.dragInstanceId === "GANTT_REORDER",
+        getData: ({ input, element }) => {
+          const data = { id };
+
+          // attach instruction for last in list
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+          });
+        },
+        onDrag: ({ self }) => {
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          // check if the highlight is to be shown above or below
+          setInstruction(
+            extractedInstruction
+              ? extractedInstruction === "reorder-below" && isLastChild
+                ? "DRAG_BELOW"
+                : "DRAG_OVER"
+              : undefined
+          );
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ self, source }) => {
+          setInstruction(undefined);
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          const currentInstruction = extractedInstruction
+            ? extractedInstruction === "reorder-below" && isLastChild
+              ? "DRAG_BELOW"
+              : "DRAG_OVER"
+            : undefined;
+          if (!currentInstruction) return;
+
+          const sourceId = source?.data?.id as string | undefined;
+          const destinationId = self?.data?.id as string | undefined;
+
+          onDrop(sourceId, destinationId, currentInstruction === "DRAG_BELOW");
+          highlightIssueOnDrop(source?.element?.id, false, true);
+        },
+      })
+    );
+  }, [blockRef?.current, isLastChild, onDrop]);
+
+  useOutsideClickDetector(blockRef, () => blockRef?.current?.classList?.remove(HIGHLIGHT_WITH_LINE));
+
+  return (
+    <div
+      id={`draggable-${id}`}
+      className={"relative"}
+      ref={blockRef}
+      onDragStart={() => {
+        if (!isDragEnabled) {
+          setToast({
+            title: "Warning!",
+            type: TOAST_TYPE.WARNING,
+            message: "Drag and drop is only enabled when sorted by manual",
+          });
+        }
+      }}
+    >
+      <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
+      {children(isDragging)}
+      {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/sidebar/index.ts b/apps/web/core/components/gantt-chart/sidebar/index.ts
new file mode 100644
index 0000000..4ff5118
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./issues";
+export * from "./modules";
+export * from "./root";
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
new file mode 100644
index 0000000..e7b4f27
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import type { IGanttBlock } from "@plane/types";
+import { Row } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { MultipleSelectEntityAction } from "@/components/core/multiple-select";
+import { IssueGanttSidebarBlock } from "@/components/issues/issue-layouts/gantt/blocks";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+// local imports
+import { BLOCK_HEIGHT, GANTT_SELECT_GROUP } from "../../constants";
+
+type Props = {
+  block: IGanttBlock;
+  enableSelection: boolean;
+  isDragging: boolean;
+  selectionHelpers?: TSelectionHelper;
+  isEpic?: boolean;
+};
+
+export const IssuesSidebarBlock = observer(function IssuesSidebarBlock(props: Props) {
+  const { block, enableSelection, isDragging, selectionHelpers, isEpic = false } = props;
+  // store hooks
+  const { updateActiveBlockId, isBlockActive, getNumberOfDaysFromPosition } = useTimeLineChartStore();
+  const { getIsIssuePeeked } = useIssueDetail();
+
+  const isBlockComplete = !!block?.start_date && !!block?.target_date;
+  const duration = isBlockComplete ? getNumberOfDaysFromPosition(block?.position?.width) : undefined;
+
+  if (!block?.data) return null;
+
+  const isIssueSelected = selectionHelpers?.getIsEntitySelected(block.id);
+  const isIssueFocused = selectionHelpers?.getIsEntityActive(block.id);
+  const isBlockHoveredOn = isBlockActive(block.id);
+
+  return (
+    <div
+      className={cn("group/list-block", {
+        "rounded-sm bg-layer-1": isDragging,
+        "rounded-l-sm border border-r-0 border-accent-strong": getIsIssuePeeked(block.data.id),
+        "border border-r-0 border-strong-1": isIssueFocused,
+      })}
+      onMouseEnter={() => updateActiveBlockId(block.id)}
+      onMouseLeave={() => updateActiveBlockId(null)}
+    >
+      <Row
+        className={cn(
+          "group flex w-full items-center gap-2 bg-layer-transparent pr-4 hover:bg-layer-transparent-hover",
+          {
+            "bg-layer-transparent-hover": isBlockHoveredOn,
+            "bg-accent-primary/5 hover:bg-accent-primary/10": isIssueSelected,
+            "bg-accent-primary/10": isIssueSelected && isBlockHoveredOn,
+          }
+        )}
+        style={{
+          height: `${BLOCK_HEIGHT}px`,
+        }}
+      >
+        {enableSelection && selectionHelpers && (
+          <div className="absolute left-1 flex items-center gap-2">
+            <MultipleSelectEntityAction
+              className={cn(
+                "pointer-events-none opacity-0 transition-opacity group-hover/list-block:pointer-events-auto group-hover/list-block:opacity-100",
+                {
+                  "pointer-events-auto opacity-100": isIssueSelected,
+                }
+              )}
+              groupId={GANTT_SELECT_GROUP}
+              id={block.id}
+              selectionHelpers={selectionHelpers}
+            />
+          </div>
+        )}
+        <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
+          <div className="flex-grow truncate">
+            <IssueGanttSidebarBlock issueId={block.data.id} isEpic={isEpic} />
+          </div>
+          {duration && (
+            <div className="flex-shrink-0 text-13 text-secondary">
+              <span>
+                {duration} day{duration > 1 ? "s" : ""}
+              </span>
+            </div>
+          )}
+        </div>
+      </Row>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/index.ts b/apps/web/core/components/gantt-chart/sidebar/issues/index.ts
new file mode 100644
index 0000000..1f9c99d
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./sidebar";
diff --git a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
new file mode 100644
index 0000000..7178f05
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+// ui
+import { GANTT_TIMELINE_TYPE } from "@plane/types";
+import type { IBlockUpdateData } from "@plane/types";
+import { Loader } from "@plane/ui";
+// components
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { GanttLayoutListItemLoader } from "@/components/ui/loader/layouts/gantt-layout-loader";
+//hooks
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+// local imports
+import { useTimeLineChart } from "../../../../hooks/use-timeline-chart";
+import { GanttDnDHOC } from "../gantt-dnd-HOC";
+import { handleOrderChange } from "../utils";
+import { IssuesSidebarBlock } from "./block";
+
+type Props = {
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  canLoadMoreBlocks?: boolean;
+  loadMoreBlocks?: () => void;
+  ganttContainerRef: RefObject<HTMLDivElement | null>;
+  blockIds: string[];
+  enableReorder: boolean;
+  enableSelection: boolean;
+  showAllBlocks?: boolean;
+  selectionHelpers?: TSelectionHelper;
+  isEpic?: boolean;
+};
+
+export const IssueGanttSidebar = observer(function IssueGanttSidebar(props: Props) {
+  const {
+    blockUpdateHandler,
+    blockIds,
+    enableReorder,
+    enableSelection,
+    loadMoreBlocks,
+    canLoadMoreBlocks,
+    ganttContainerRef,
+    showAllBlocks = false,
+    selectionHelpers,
+    isEpic = false,
+  } = props;
+
+  const { getBlockById } = useTimeLineChart(GANTT_TIMELINE_TYPE.ISSUE);
+
+  const {
+    issues: { getIssueLoader },
+  } = useIssuesStore();
+
+  const [intersectionElement, setIntersectionElement] = useState<HTMLDivElement | null>(null);
+
+  const isPaginating = !!getIssueLoader();
+
+  useIntersectionObserver(
+    ganttContainerRef,
+    isPaginating ? null : intersectionElement,
+    loadMoreBlocks,
+    "100% 0% 100% 0%"
+  );
+
+  const handleOnDrop = (
+    draggingBlockId: string | undefined,
+    droppedBlockId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => {
+    handleOrderChange(draggingBlockId, droppedBlockId, dropAtEndOfList, blockIds, getBlockById, blockUpdateHandler);
+  };
+
+  return (
+    <div>
+      {blockIds ? (
+        <>
+          {blockIds.map((blockId, index) => {
+            const block = getBlockById(blockId);
+            const isBlockVisibleOnSidebar = block?.start_date && block?.target_date;
+
+            // hide the block if it doesn't have start and target dates and showAllBlocks is false
+            if (!block || (!showAllBlocks && !isBlockVisibleOnSidebar)) return;
+
+            return (
+              <RenderIfVisible
+                key={block.id}
+                root={ganttContainerRef}
+                horizontalOffset={100}
+                verticalOffset={200}
+                shouldRecordHeights={false}
+                placeholderChildren={<GanttLayoutListItemLoader />}
+              >
+                <GanttDnDHOC
+                  id={block.id}
+                  isLastChild={index === blockIds.length - 1}
+                  isDragEnabled={enableReorder}
+                  onDrop={handleOnDrop}
+                >
+                  {(isDragging: boolean) => (
+                    <IssuesSidebarBlock
+                      block={block}
+                      enableSelection={enableSelection}
+                      isDragging={isDragging}
+                      selectionHelpers={selectionHelpers}
+                      isEpic={isEpic}
+                    />
+                  )}
+                </GanttDnDHOC>
+              </RenderIfVisible>
+            );
+          })}
+          {canLoadMoreBlocks && (
+            <div ref={setIntersectionElement} className="p-2">
+              <div className="flex h-10 w-full animate-pulse items-center justify-between gap-1.5 rounded-sm bg-layer-1 px-4 py-1.5 md:h-8 md:px-1" />
+            </div>
+          )}
+        </>
+      ) : (
+        <Loader className="space-y-3 pr-2">
+          <Loader.Item height="34px" />
+          <Loader.Item height="34px" />
+          <Loader.Item height="34px" />
+          <Loader.Item height="34px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx b/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
new file mode 100644
index 0000000..78ec854
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// Plane
+import { Row } from "@plane/ui";
+// components
+import { cn } from "@plane/utils";
+import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
+import { ModuleGanttSidebarBlock } from "@/components/modules";
+// helpers
+// hooks
+import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
+
+type Props = {
+  blockId: string;
+  isDragging: boolean;
+};
+
+export const ModulesSidebarBlock = observer(function ModulesSidebarBlock(props: Props) {
+  const { blockId, isDragging } = props;
+  // store hooks
+  const { getBlockById, updateActiveBlockId, isBlockActive, getNumberOfDaysFromPosition } = useTimeLineChartStore();
+  const block = getBlockById(blockId);
+
+  if (!block) return <></>;
+
+  const isBlockComplete = !!block.start_date && !!block.target_date;
+  const duration = isBlockComplete ? getNumberOfDaysFromPosition(block?.position?.width) : undefined;
+
+  return (
+    <div
+      className={cn({
+        "rounded-sm bg-layer-1": isDragging,
+      })}
+      onMouseEnter={() => updateActiveBlockId(block.id)}
+      onMouseLeave={() => updateActiveBlockId(null)}
+    >
+      <Row
+        id={`sidebar-block-${block.id}`}
+        className={cn(
+          "group flex w-full items-center gap-2 bg-layer-transparent pr-4 hover:bg-layer-transparent-hover",
+          {
+            "bg-transparent-hover": isBlockActive(block.id),
+          }
+        )}
+        style={{
+          height: `${BLOCK_HEIGHT}px`,
+        }}
+      >
+        <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
+          <div className="flex-grow truncate">
+            <ModuleGanttSidebarBlock moduleId={block.data.id} />
+          </div>
+          {duration !== undefined && (
+            <div className="flex-shrink-0 text-13 text-secondary">
+              {duration} day{duration > 1 ? "s" : ""}
+            </div>
+          )}
+        </div>
+      </Row>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/index.ts b/apps/web/core/components/gantt-chart/sidebar/modules/index.ts
new file mode 100644
index 0000000..1f9c99d
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./sidebar";
diff --git a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
new file mode 100644
index 0000000..0bfaa7c
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// ui
+import { GANTT_TIMELINE_TYPE } from "@plane/types";
+import type { IBlockUpdateData } from "@plane/types";
+import { Loader } from "@plane/ui";
+// components
+// hooks
+import { useTimeLineChart } from "@/hooks/use-timeline-chart";
+import { GanttDnDHOC } from "../gantt-dnd-HOC";
+import { handleOrderChange } from "../utils";
+import { ModulesSidebarBlock } from "./block";
+// types
+
+type Props = {
+  title: string;
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  blockIds: string[];
+  enableReorder: boolean;
+};
+
+export const ModuleGanttSidebar = observer(function ModuleGanttSidebar(props: Props) {
+  const { blockUpdateHandler, blockIds, enableReorder } = props;
+
+  const { getBlockById } = useTimeLineChart(GANTT_TIMELINE_TYPE.MODULE);
+
+  const handleOnDrop = (
+    draggingBlockId: string | undefined,
+    droppedBlockId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => {
+    handleOrderChange(draggingBlockId, droppedBlockId, dropAtEndOfList, blockIds, getBlockById, blockUpdateHandler);
+  };
+
+  return (
+    <div className="h-full">
+      {blockIds ? (
+        blockIds.map((blockId, index) => (
+          <GanttDnDHOC
+            key={blockId}
+            id={blockId}
+            isLastChild={index === blockIds.length - 1}
+            isDragEnabled={enableReorder}
+            onDrop={handleOnDrop}
+          >
+            {(isDragging: boolean) => <ModulesSidebarBlock blockId={blockId} isDragging={isDragging} />}
+          </GanttDnDHOC>
+        ))
+      ) : (
+        <Loader className="space-y-3 pr-2">
+          <Loader.Item height="34px" />
+          <Loader.Item height="34px" />
+          <Loader.Item height="34px" />
+          <Loader.Item height="34px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/sidebar/root.tsx b/apps/web/core/components/gantt-chart/sidebar/root.tsx
new file mode 100644
index 0000000..6d55bb3
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/root.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// components
+import type { IBlockUpdateData } from "@plane/types";
+import { Row, ERowVariant } from "@plane/ui";
+import { cn } from "@plane/utils";
+import { MultipleSelectGroupAction } from "@/components/core/multiple-select";
+// helpers
+// hooks
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+// constants
+import { GANTT_SELECT_GROUP, HEADER_HEIGHT, SIDEBAR_WIDTH } from "../constants";
+
+type Props = {
+  blockIds: string[];
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
+  canLoadMoreBlocks?: boolean;
+  loadMoreBlocks?: () => void;
+  ganttContainerRef: RefObject<HTMLDivElement | null>;
+  enableReorder: boolean | ((blockId: string) => boolean);
+  enableSelection: boolean | ((blockId: string) => boolean);
+  sidebarToRender: (props: any) => React.ReactNode;
+  title: string;
+  selectionHelpers: TSelectionHelper;
+  showAllBlocks?: boolean;
+  isEpic?: boolean;
+};
+
+export const GanttChartSidebar = observer(function GanttChartSidebar(props: Props) {
+  const { t } = useTranslation();
+  const {
+    blockIds,
+    blockUpdateHandler,
+    enableReorder,
+    enableSelection,
+    sidebarToRender,
+    loadMoreBlocks,
+    canLoadMoreBlocks,
+    ganttContainerRef,
+    title,
+    selectionHelpers,
+    showAllBlocks = false,
+    isEpic = false,
+  } = props;
+
+  const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(GANTT_SELECT_GROUP) === "empty";
+
+  return (
+    <Row
+      // DO NOT REMOVE THE ID
+      id="gantt-sidebar"
+      className="sticky left-0 z-10 h-max min-h-full flex-shrink-0 border-r-[0.5px] border-subtle-1 bg-surface-1"
+      style={{
+        width: `${SIDEBAR_WIDTH}px`,
+      }}
+      variant={ERowVariant.HUGGING}
+    >
+      <Row
+        className="group/list-header sticky top-0 z-10 box-border flex flex-shrink-0 items-end justify-between gap-2 border-b-[0.5px] border-subtle-1 bg-surface-1 pr-4 pb-2 text-13 font-medium text-tertiary"
+        style={{
+          height: `${HEADER_HEIGHT}px`,
+        }}
+      >
+        <div className={cn("flex items-center gap-2")}>
+          {enableSelection && (
+            <div className="absolute left-1 flex w-3.5 flex-shrink-0 items-center">
+              <MultipleSelectGroupAction
+                className={cn(
+                  "pointer-events-none size-3.5 opacity-0 !outline-none group-hover/list-header:pointer-events-auto group-hover/list-header:opacity-100",
+                  {
+                    "pointer-events-auto opacity-100": !isGroupSelectionEmpty,
+                  }
+                )}
+                groupID={GANTT_SELECT_GROUP}
+                selectionHelpers={selectionHelpers}
+              />
+            </div>
+          )}
+          <h6>{title}</h6>
+        </div>
+        <h6>{t("common.duration")}</h6>
+      </Row>
+
+      <Row variant={ERowVariant.HUGGING} className="h-max min-h-full bg-surface-1">
+        {sidebarToRender &&
+          sidebarToRender({
+            title,
+            blockUpdateHandler,
+            blockIds,
+            enableReorder,
+            enableSelection,
+            canLoadMoreBlocks,
+            ganttContainerRef,
+            loadMoreBlocks,
+            selectionHelpers,
+            showAllBlocks,
+            isEpic,
+          })}
+      </Row>
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/gantt-chart/sidebar/utils.ts b/apps/web/core/components/gantt-chart/sidebar/utils.ts
new file mode 100644
index 0000000..6844316
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/sidebar/utils.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ChartDataType, IBlockUpdateData, IGanttBlock } from "@plane/types";
+
+export const handleOrderChange = (
+  draggingBlockId: string | undefined,
+  droppedBlockId: string | undefined,
+  dropAtEndOfList: boolean,
+  blockIds: string[] | null,
+  getBlockById: (id: string, currentViewData?: ChartDataType) => IGanttBlock,
+  blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void
+) => {
+  if (!blockIds || !draggingBlockId || !droppedBlockId) return;
+
+  const sourceBlockIndex = blockIds.findIndex((id) => id === draggingBlockId);
+  const destinationBlockIndex = dropAtEndOfList ? blockIds.length : blockIds.findIndex((id) => id === droppedBlockId);
+
+  // return if dropped outside the list
+  if (sourceBlockIndex === -1 || destinationBlockIndex === -1 || sourceBlockIndex === destinationBlockIndex) return;
+
+  let updatedSortOrder = getBlockById(blockIds[sourceBlockIndex])?.sort_order ?? 0;
+
+  // update the sort order to the lowest if dropped at the top
+  if (destinationBlockIndex === 0) updatedSortOrder = (getBlockById(blockIds[0])?.sort_order ?? 0) - 1000;
+  // update the sort order to the highest if dropped at the bottom
+  else if (destinationBlockIndex === blockIds.length)
+    updatedSortOrder = (getBlockById(blockIds[blockIds.length - 1])?.sort_order ?? 0) + 1000;
+  // update the sort order to the average of the two adjacent blocks if dropped in between
+  else {
+    const destinationSortingOrder = getBlockById(blockIds[destinationBlockIndex])?.sort_order ?? 0;
+    const relativeDestinationSortingOrder = getBlockById(blockIds[destinationBlockIndex - 1])?.sort_order ?? 0;
+
+    updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+  }
+
+  // call the block update handler with the updated sort order, new and old index
+  blockUpdateHandler(getBlockById(blockIds[sourceBlockIndex])?.data, {
+    sort_order: {
+      destinationIndex: destinationBlockIndex,
+      newSortOrder: updatedSortOrder,
+      sourceIndex: sourceBlockIndex,
+    },
+  });
+};
diff --git a/apps/web/core/components/gantt-chart/views/helpers.ts b/apps/web/core/components/gantt-chart/views/helpers.ts
new file mode 100644
index 0000000..5d02405
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/views/helpers.ts
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ChartDataType, IGanttBlock } from "@plane/types";
+import { addDaysToDate, findTotalDaysInRange, getDate } from "@plane/utils";
+import { DEFAULT_BLOCK_WIDTH } from "../constants";
+
+/**
+ * Generates Date by using Day, month and Year
+ * @param day
+ * @param month
+ * @param year
+ * @returns
+ */
+export const generateDate = (day: number, month: number, year: number) => new Date(year, month, day);
+
+/**
+ * Returns number of days in month
+ * @param month
+ * @param year
+ * @returns
+ */
+export const getNumberOfDaysInMonth = (month: number, year: number) => {
+  const date = new Date(year, month + 1, 0);
+
+  return date.getDate();
+};
+
+/**
+ * Returns week number from date
+ * @param date
+ * @returns
+ */
+export const getWeekNumberByDate = (date: Date) => {
+  const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
+  const daysOffset = firstDayOfYear.getDay();
+
+  const firstWeekStart = firstDayOfYear.getTime() - daysOffset * 24 * 60 * 60 * 1000;
+  const weekStart = new Date(firstWeekStart);
+
+  const weekNumber = Math.floor((date.getTime() - weekStart.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+
+  return weekNumber;
+};
+
+/**
+ * Returns number of days between two dates
+ * @param startDate
+ * @param endDate
+ * @returns
+ */
+export const getNumberOfDaysBetweenTwoDates = (startDate: Date, endDate: Date) => {
+  let daysDifference: number = 0;
+  startDate.setHours(0, 0, 0, 0);
+  endDate.setHours(0, 0, 0, 0);
+
+  const timeDifference: number = startDate.getTime() - endDate.getTime();
+  daysDifference = Math.round(timeDifference / (1000 * 60 * 60 * 24));
+
+  return daysDifference;
+};
+
+/**
+ * returns a date corresponding to the position on the timeline chart
+ * @param position
+ * @param chartData
+ * @param offsetDays
+ * @returns
+ */
+export const getDateFromPositionOnGantt = (position: number, chartData: ChartDataType, offsetDays = 0) => {
+  const numberOfDaysSinceStart = Math.round(position / chartData.data.dayWidth) + offsetDays;
+
+  const newDate = addDaysToDate(chartData.data.startDate, numberOfDaysSinceStart);
+
+  if (!newDate) undefined;
+
+  return newDate;
+};
+
+/**
+ * returns the  position and width of the block on the timeline chart from startDate and EndDate
+ * @param chartData
+ * @param itemData
+ * @returns
+ */
+export const getItemPositionWidth = (chartData: ChartDataType, itemData: IGanttBlock) => {
+  let scrollPosition: number = 0;
+  let scrollWidth: number = DEFAULT_BLOCK_WIDTH;
+
+  const { startDate: chartStartDate } = chartData.data;
+  const { start_date, target_date } = itemData;
+
+  const itemStartDate = getDate(start_date);
+  const itemTargetDate = getDate(target_date);
+
+  chartStartDate.setHours(0, 0, 0, 0);
+  itemStartDate?.setHours(0, 0, 0, 0);
+  itemTargetDate?.setHours(0, 0, 0, 0);
+
+  if (!itemStartDate && !itemTargetDate) return;
+
+  // get scroll position from the number of days and width of each day
+  scrollPosition = itemStartDate
+    ? getPositionFromDate(chartData, itemStartDate, 0)
+    : getPositionFromDate(chartData, itemTargetDate!, -1 * DEFAULT_BLOCK_WIDTH + chartData.data.dayWidth);
+
+  if (itemStartDate && itemTargetDate) {
+    // get width of block
+    const widthTimeDifference: number = itemStartDate.getTime() - itemTargetDate.getTime();
+    const widthDaysDifference: number = Math.abs(Math.floor(widthTimeDifference / (1000 * 60 * 60 * 24)));
+    scrollWidth = (widthDaysDifference + 1) * chartData.data.dayWidth;
+  }
+
+  return { marginLeft: scrollPosition, width: scrollWidth };
+};
+
+export const getPositionFromDate = (chartData: ChartDataType, date: string | Date, offsetWidth: number) => {
+  const currDate = getDate(date);
+
+  const { startDate: chartStartDate } = chartData.data;
+
+  if (!currDate || !chartStartDate) return 0;
+
+  chartStartDate.setHours(0, 0, 0, 0);
+  currDate.setHours(0, 0, 0, 0);
+
+  // get number of days from chart start date to block's start date
+  const positionDaysDifference = Math.round(findTotalDaysInRange(chartStartDate, currDate, false) ?? 0);
+
+  if (!positionDaysDifference) return 0;
+
+  // get scroll position from the number of days and width of each day
+  return positionDaysDifference * chartData.data.dayWidth + offsetWidth;
+};
diff --git a/apps/web/core/components/gantt-chart/views/index.ts b/apps/web/core/components/gantt-chart/views/index.ts
new file mode 100644
index 0000000..1e94dbf
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/views/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./week-view";
+export * from "./month-view";
+export * from "./quarter-view";
+export * from "./helpers";
diff --git a/apps/web/core/components/gantt-chart/views/month-view.ts b/apps/web/core/components/gantt-chart/views/month-view.ts
new file mode 100644
index 0000000..3b3f507
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/views/month-view.ts
@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cloneDeep, uniqBy } from "lodash-es";
+// plane imports
+import type { ChartDataType } from "@plane/types";
+// local imports
+import { months } from "../data";
+import { getNumberOfDaysBetweenTwoDates, getNumberOfDaysInMonth } from "./helpers";
+import type { IWeekBlock } from "./week-view";
+import { getWeeksBetweenTwoDates } from "./week-view";
+
+export interface IMonthBlock {
+  today: boolean;
+  month: number;
+  days: number;
+  monthData: {
+    key: number;
+    shortTitle: string;
+    title: string;
+  };
+  title: string;
+  year: number;
+}
+
+export interface IMonthView {
+  months: IMonthBlock[];
+  weeks: IWeekBlock[];
+}
+
+/**
+ * Generate Month Chart data
+ * @param monthPayload
+ * @param side
+ * @returns
+ */
+const generateMonthChart = (monthPayload: ChartDataType, side: null | "left" | "right", targetDate?: Date) => {
+  let renderState = cloneDeep(monthPayload);
+
+  const range: number = renderState.data.approxFilterRange || 6;
+  let filteredDates: IMonthView = { months: [], weeks: [] };
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  let startDate = new Date();
+  let endDate = new Date();
+
+  // if side is null generate months on both side of current date
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
+
+    if (minusDate && plusDate) filteredDates = getMonthsViewBetweenTwoDates(minusDate, plusDate);
+
+    startDate = filteredDates.weeks[0]?.startDate;
+    endDate = filteredDates.weeks[filteredDates.weeks.length - 1]?.endDate;
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate,
+        endDate,
+      },
+    };
+  }
+  // When side is left, generate more months on the left side of the start date
+  else if (side === "left") {
+    const chartStartDate = renderState.data.startDate;
+    const currentDate = targetDate ? targetDate : chartStartDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1);
+    plusDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth(), chartStartDate.getDate() - 1);
+
+    if (minusDate && plusDate) filteredDates = getMonthsViewBetweenTwoDates(minusDate, plusDate);
+
+    startDate = filteredDates.weeks[0]?.startDate;
+    endDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth(), chartStartDate.getDate() - 1);
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate },
+    };
+  }
+  // When side is right, generate more months on the right side of the end date
+  else if (side === "right") {
+    const chartEndDate = renderState.data.endDate;
+    const currentDate = targetDate ? targetDate : chartEndDate;
+
+    minusDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth(), chartEndDate.getDate() + 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 1);
+
+    if (minusDate && plusDate) filteredDates = getMonthsViewBetweenTwoDates(minusDate, plusDate);
+
+    startDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth(), chartEndDate.getDate() + 1);
+    endDate = filteredDates.weeks[filteredDates.weeks.length - 1]?.endDate;
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate: filteredDates.weeks[filteredDates.weeks.length - 1]?.endDate },
+    };
+  }
+
+  const days = Math.abs(getNumberOfDaysBetweenTwoDates(startDate, endDate)) + 1;
+  const scrollWidth = days * monthPayload.data.dayWidth;
+
+  return { state: renderState, payload: filteredDates, scrollWidth: scrollWidth };
+};
+
+/**
+ * Get Month View data between two dates, i.e., Months and Weeks between two dates
+ * @param startDate
+ * @param endDate
+ * @returns
+ */
+const getMonthsViewBetweenTwoDates = (startDate: Date, endDate: Date): IMonthView => ({
+  months: getMonthsBetweenTwoDates(startDate, endDate),
+  weeks: getWeeksBetweenTwoDates(startDate, endDate, false),
+});
+
+/**
+ * generate array of months between two dates
+ * @param startDate
+ * @param endDate
+ * @returns
+ */
+export const getMonthsBetweenTwoDates = (startDate: Date, endDate: Date): IMonthBlock[] => {
+  const monthBlocks = [];
+
+  const startYear = startDate.getFullYear();
+  const startMonth = startDate.getMonth();
+
+  const today = new Date();
+  const todayMonth = today.getMonth();
+  const todayYear = today.getFullYear();
+
+  const currentDate = new Date(startYear, startMonth);
+
+  while (currentDate <= endDate) {
+    const currentYear = currentDate.getFullYear();
+    const currentMonth = currentDate.getMonth();
+
+    monthBlocks.push({
+      year: currentYear,
+      month: currentMonth,
+      monthData: months[currentMonth],
+      title: `${months[currentMonth].title} ${currentYear}`,
+      days: getNumberOfDaysInMonth(currentMonth, currentYear),
+      today: todayMonth === currentMonth && todayYear === currentYear,
+    });
+
+    currentDate.setMonth(currentDate.getMonth() + 1);
+  }
+
+  return monthBlocks;
+};
+
+/**
+ * Merge two MonthView data payloads
+ * @param a
+ * @param b
+ * @returns
+ */
+const mergeMonthRenderPayloads = (a: IMonthView, b: IMonthView): IMonthView => ({
+  months: uniqBy([...a.months, ...b.months], (monthBlock) => `${monthBlock.month}_${monthBlock.year}`),
+  weeks: uniqBy(
+    [...a.weeks, ...b.weeks],
+    (weekBlock) => `${weekBlock.startDate.getTime()}_${weekBlock.endDate.getTime()}`
+  ),
+});
+
+export const monthView = {
+  generateChart: generateMonthChart,
+  mergeRenderPayloads: mergeMonthRenderPayloads,
+};
diff --git a/apps/web/core/components/gantt-chart/views/quarter-view.ts b/apps/web/core/components/gantt-chart/views/quarter-view.ts
new file mode 100644
index 0000000..95f9912
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/views/quarter-view.ts
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+//
+import type { ChartDataType } from "@plane/types";
+import { quarters } from "../data";
+import { getNumberOfDaysBetweenTwoDates } from "./helpers";
+import type { IMonthBlock } from "./month-view";
+import { getMonthsBetweenTwoDates } from "./month-view";
+
+export interface IQuarterMonthBlock {
+  children: IMonthBlock[];
+  quarterNumber: number;
+  shortTitle: string;
+  title: string;
+  year: number;
+  today: boolean;
+}
+
+/**
+ * Generate Quarter Chart data, which in turn are months in an array
+ * @param quarterPayload
+ * @param side
+ * @returns
+ */
+const generateQuarterChart = (quarterPayload: ChartDataType, side: null | "left" | "right", targetDate?: Date) => {
+  let renderState = quarterPayload;
+
+  const range: number = renderState.data.approxFilterRange || 12;
+  let filteredDates: IMonthBlock[] = [];
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  let startDate = new Date();
+  let endDate = new Date();
+
+  // if side is null generate months on both side of current date
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 0);
+
+    if (minusDate && plusDate) filteredDates = getMonthsBetweenTwoDates(minusDate, plusDate);
+
+    const startMonthBlock = filteredDates[0];
+    const endMonthBlock = filteredDates[filteredDates.length - 1];
+    startDate = new Date(startMonthBlock.year, startMonthBlock.month, 1);
+    endDate = new Date(endMonthBlock.year, endMonthBlock.month + 1, 0);
+
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate,
+        endDate,
+      },
+    };
+  }
+  // When side is left, generate more months on the left side of the start date
+  else if (side === "left") {
+    const chartStartDate = renderState.data.startDate;
+    const currentDate = targetDate ? targetDate : chartStartDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range / 2, 1);
+    plusDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth() - 1, 1);
+
+    if (minusDate && plusDate) filteredDates = getMonthsBetweenTwoDates(minusDate, plusDate);
+
+    const startMonthBlock = filteredDates[0];
+    startDate = new Date(startMonthBlock.year, startMonthBlock.month, 1);
+    endDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth(), chartStartDate.getDate() - 1);
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate },
+    };
+  }
+  // When side is right, generate more months on the right side of the end date
+  else if (side === "right") {
+    const chartEndDate = renderState.data.endDate;
+    const currentDate = targetDate ? targetDate : chartEndDate;
+
+    minusDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth() + 1, 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range / 2, 1);
+
+    if (minusDate && plusDate) filteredDates = getMonthsBetweenTwoDates(minusDate, plusDate);
+
+    const endMonthBlock = filteredDates[filteredDates.length - 1];
+    startDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth(), chartEndDate.getDate() + 1);
+    endDate = new Date(endMonthBlock.year, endMonthBlock.month + 1, 0);
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate },
+    };
+  }
+
+  const days = Math.abs(getNumberOfDaysBetweenTwoDates(startDate, endDate)) + 1;
+  const scrollWidth = days * quarterPayload.data.dayWidth;
+
+  return { state: renderState, payload: filteredDates, scrollWidth: scrollWidth };
+};
+
+/**
+ * Merge two Quarter data payloads
+ * @param a
+ * @param b
+ * @returns
+ */
+const mergeQuarterRenderPayloads = (a: IMonthBlock[], b: IMonthBlock[]) => [...a, ...b];
+
+/**
+ * Group array of Months into Quarters, returns an array og Quarters and it's children Months
+ * @param monthBlocks
+ * @returns
+ */
+export const groupMonthsToQuarters = (monthBlocks: IMonthBlock[]): IQuarterMonthBlock[] => {
+  const quartersMap: { [key: string]: IQuarterMonthBlock } = {};
+
+  const today = new Date();
+  const todayQuarterNumber = Math.floor(today.getMonth() / 3);
+  const todayYear = today.getFullYear();
+
+  for (const monthBlock of monthBlocks) {
+    const { month, year } = monthBlock;
+
+    const quarterNumber = Math.floor(month / 3);
+
+    const quarterKey = `Q${quarterNumber}-${year}`;
+
+    if (quartersMap[quarterKey]) {
+      quartersMap[quarterKey].children.push(monthBlock);
+    } else {
+      const quarterData = quarters[quarterNumber];
+      quartersMap[quarterKey] = {
+        children: [monthBlock],
+        quarterNumber,
+        shortTitle: quarterData.shortTitle,
+        title: `${quarterData.title} ${year}`,
+        year,
+        today: todayQuarterNumber === quarterNumber && todayYear === year,
+      };
+    }
+  }
+
+  return Object.values(quartersMap);
+};
+
+export const quarterView = {
+  generateChart: generateQuarterChart,
+  mergeRenderPayloads: mergeQuarterRenderPayloads,
+};
diff --git a/apps/web/core/components/gantt-chart/views/week-view.ts b/apps/web/core/components/gantt-chart/views/week-view.ts
new file mode 100644
index 0000000..a94ffab
--- /dev/null
+++ b/apps/web/core/components/gantt-chart/views/week-view.ts
@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+//
+import type { ChartDataType } from "@plane/types";
+import { EStartOfTheWeek } from "@plane/types";
+import { months, generateWeeks } from "../data";
+import { getNumberOfDaysBetweenTwoDates, getWeekNumberByDate } from "./helpers";
+export interface IDayBlock {
+  date: Date;
+  day: number;
+  dayData: {
+    key: number;
+    shortTitle: string;
+    title: string;
+    abbreviation: string;
+  };
+  title: string;
+  today: boolean;
+}
+
+export interface IWeekBlock {
+  children?: IDayBlock[];
+  weekNumber: number;
+  weekData: {
+    shortTitle: string;
+    title: string;
+  };
+  title: string;
+  startDate: Date;
+  endDate: Date;
+  startMonth: number;
+  startYear: number;
+  endMonth: number;
+  endYear: number;
+  today: boolean;
+}
+
+/**
+ * Generate Week Chart data
+ * @param weekPayload
+ * @param side
+ * @returns
+ */
+const generateWeekChart = (
+  weekPayload: ChartDataType,
+  side: null | "left" | "right",
+  targetDate?: Date,
+  startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY
+) => {
+  let renderState = weekPayload;
+
+  const range: number = renderState.data.approxFilterRange || 6;
+  let filteredDates: IWeekBlock[] = [];
+  let minusDate: Date = new Date();
+  let plusDate: Date = new Date();
+
+  let startDate = new Date();
+  let endDate = new Date();
+
+  // if side is null generate weeks on both side of current date
+  if (side === null) {
+    const currentDate = renderState.data.currentDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, currentDate.getDate());
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, currentDate.getDate());
+
+    if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate, true, startOfWeek);
+
+    startDate = filteredDates[0].startDate;
+    endDate = filteredDates[filteredDates.length - 1].endDate;
+    renderState = {
+      ...renderState,
+      data: {
+        ...renderState.data,
+        startDate,
+        endDate,
+      },
+    };
+  }
+  // When side is left, generate more weeks on the left side of the start date
+  else if (side === "left") {
+    const chartStartDate = renderState.data.startDate;
+    const currentDate = targetDate ? targetDate : chartStartDate;
+
+    minusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - range, 1);
+    plusDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth(), chartStartDate.getDate() - 1);
+
+    if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate, true, startOfWeek);
+
+    startDate = filteredDates[0].startDate;
+    endDate = new Date(chartStartDate.getFullYear(), chartStartDate.getMonth(), chartStartDate.getDate() - 1);
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, startDate },
+    };
+  }
+  // When side is right, generate more weeks on the right side of the end date
+  else if (side === "right") {
+    const chartEndDate = renderState.data.endDate;
+    const currentDate = targetDate ? targetDate : chartEndDate;
+
+    minusDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth(), chartEndDate.getDate() + 1);
+    plusDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + range, 1);
+
+    if (minusDate && plusDate) filteredDates = getWeeksBetweenTwoDates(minusDate, plusDate, true, startOfWeek);
+
+    startDate = new Date(chartEndDate.getFullYear(), chartEndDate.getMonth(), chartEndDate.getDate() + 1);
+    endDate = filteredDates[filteredDates.length - 1].endDate;
+    renderState = {
+      ...renderState,
+      data: { ...renderState.data, endDate },
+    };
+  }
+
+  const days = Math.abs(getNumberOfDaysBetweenTwoDates(startDate, endDate)) + 1;
+  const scrollWidth = days * weekPayload.data.dayWidth;
+
+  return { state: renderState, payload: filteredDates, scrollWidth: scrollWidth };
+};
+
+/**
+ * Generate weeks array between two dates
+ * @param startDate
+ * @param endDate
+ * @param shouldPopulateDaysForWeek
+ * @returns
+ */
+export const getWeeksBetweenTwoDates = (
+  startDate: Date,
+  endDate: Date,
+  shouldPopulateDaysForWeek: boolean = true,
+  startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY
+): IWeekBlock[] => {
+  const weeks: IWeekBlock[] = [];
+
+  const currentDate = new Date(startDate.getTime());
+  const today = new Date();
+
+  // Adjust the current date to the start of the week
+  const day = currentDate.getDay();
+  const diff = (day + 7 - startOfWeek) % 7; // Calculate days to subtract to get to startOfWeek
+  currentDate.setDate(currentDate.getDate() - diff);
+
+  while (currentDate <= endDate) {
+    const weekStartDate = new Date(currentDate.getTime());
+    const weekEndDate = new Date(currentDate.getTime() + 6 * 24 * 60 * 60 * 1000);
+
+    const monthAtStartOfTheWeek = weekStartDate.getMonth();
+    const yearAtStartOfTheWeek = weekStartDate.getFullYear();
+    const monthAtEndOfTheWeek = weekEndDate.getMonth();
+    const yearAtEndOfTheWeek = weekEndDate.getFullYear();
+
+    const weekNumber = getWeekNumberByDate(currentDate);
+
+    weeks.push({
+      children: shouldPopulateDaysForWeek ? populateDaysForWeek(weekStartDate, startOfWeek) : undefined,
+      weekNumber,
+      weekData: {
+        shortTitle: `w${weekNumber}`,
+        title: `Week ${weekNumber}`,
+      },
+      title:
+        monthAtStartOfTheWeek === monthAtEndOfTheWeek
+          ? `${months[monthAtStartOfTheWeek].abbreviation} ${yearAtStartOfTheWeek}`
+          : `${months[monthAtStartOfTheWeek].abbreviation} ${yearAtStartOfTheWeek} - ${months[monthAtEndOfTheWeek].abbreviation} ${yearAtEndOfTheWeek}`,
+      startMonth: monthAtStartOfTheWeek,
+      startYear: yearAtStartOfTheWeek,
+      endMonth: monthAtEndOfTheWeek,
+      endYear: yearAtEndOfTheWeek,
+      startDate: weekStartDate,
+      endDate: weekEndDate,
+      today: today >= weekStartDate && today <= weekEndDate ? true : false,
+    });
+
+    currentDate.setDate(currentDate.getDate() + 7);
+  }
+
+  return weeks;
+};
+
+/**
+ * return back array of 7 days from the date provided
+ * @param startDate
+ * @returns
+ */
+const populateDaysForWeek = (startDate: Date, startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY): IDayBlock[] => {
+  const currentDate = new Date(startDate);
+  const days: IDayBlock[] = [];
+  const today = new Date();
+  const weekDays = generateWeeks(startOfWeek);
+
+  for (let i = 0; i < 7; i++) {
+    days.push({
+      date: new Date(currentDate),
+      day: currentDate.getDay(),
+      dayData: weekDays[i],
+      title: `${weekDays[i].abbreviation} ${currentDate.getDate()}`,
+      today: today.setHours(0, 0, 0, 0) == currentDate.setHours(0, 0, 0, 0),
+    });
+    currentDate.setDate(currentDate.getDate() + 1);
+  }
+  return days;
+};
+
+/**
+ * Merge two Week data payloads
+ * @param a
+ * @param b
+ * @returns
+ */
+const mergeWeekRenderPayloads = (a: IWeekBlock[], b: IWeekBlock[]) => [...a, ...b];
+
+export const weekView = {
+  generateChart: generateWeekChart,
+  mergeRenderPayloads: mergeWeekRenderPayloads,
+};
diff --git a/apps/web/core/components/global/index.ts b/apps/web/core/components/global/index.ts
new file mode 100644
index 0000000..32e2d4a
--- /dev/null
+++ b/apps/web/core/components/global/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./product-updates";
+
+export * from "./timezone-select";
diff --git a/apps/web/core/components/global/product-updates/changelog.tsx b/apps/web/core/components/global/product-updates/changelog.tsx
new file mode 100644
index 0000000..cfddb2a
--- /dev/null
+++ b/apps/web/core/components/global/product-updates/changelog.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { Loader } from "@plane/ui";
+import { ProductUpdatesFallback } from "@/components/global/product-updates/fallback";
+import { useInstance } from "@/hooks/store/use-instance";
+
+export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog() {
+  // refs
+  const isLoadingRef = useRef(true);
+  // states
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  // store hooks
+  const { config } = useInstance();
+  // derived values
+  const changeLogUrl = config?.instance_changelog_url;
+  const shouldShowFallback = !changeLogUrl || changeLogUrl === "" || hasError;
+
+  // timeout fallback - if iframe doesn't load within 15 seconds, show error
+  useEffect(() => {
+    if (!changeLogUrl || changeLogUrl === "") {
+      setIsLoading(false);
+      isLoadingRef.current = false;
+      return;
+    }
+
+    setIsLoading(true);
+    setHasError(false);
+    isLoadingRef.current = true;
+
+    const timeoutId = setTimeout(() => {
+      if (isLoadingRef.current) {
+        setHasError(true);
+        setIsLoading(false);
+        isLoadingRef.current = false;
+      }
+    }, 15000); // 15 second timeout
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [changeLogUrl]);
+
+  const handleIframeLoad = () => {
+    setTimeout(() => {
+      isLoadingRef.current = false;
+      setIsLoading(false);
+    }, 1000);
+  };
+
+  const handleIframeError = () => {
+    isLoadingRef.current = false;
+    setHasError(true);
+    setIsLoading(false);
+  };
+
+  // Show fallback if URL is missing, empty, or iframe failed to load
+  if (shouldShowFallback) {
+    return (
+      <ProductUpdatesFallback
+        description="We're having trouble fetching the updates. Please visit our changelog to view the latest updates."
+        variant={config?.is_self_managed ? "self-managed" : "cloud"}
+      />
+    );
+  }
+
+  return (
+    <div className="vertical-scrollbar relative mx-0.5 flex scrollbar-xs h-[550px] flex-col overflow-hidden overflow-y-scroll px-6">
+      {isLoading && (
+        <Loader className="absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-3">
+          <Loader.Item height="95%" width="95%" />
+        </Loader>
+      )}
+      {/* eslint-disable-next-line react/iframe-missing-sandbox oxlint-disable-next-line jsx_a11y/iframe-has-title */}
+      <iframe
+        src={changeLogUrl}
+        className={`h-full w-full ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-200`}
+        onLoad={handleIframeLoad}
+        onError={handleIframeError}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/global/product-updates/fallback.tsx b/apps/web/core/components/global/product-updates/fallback.tsx
new file mode 100644
index 0000000..57ed75f
--- /dev/null
+++ b/apps/web/core/components/global/product-updates/fallback.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+
+type TProductUpdatesFallbackProps = {
+  description: string;
+  variant: "cloud" | "self-managed";
+};
+
+export function ProductUpdatesFallback(props: TProductUpdatesFallbackProps) {
+  const { description, variant } = props;
+  // derived values
+  const changelogUrl =
+    variant === "cloud"
+      ? "https://plane.so/changelog?category=cloud"
+      : "https://plane.so/changelog?category=self-hosted";
+
+  return (
+    <div className="py-8">
+      <EmptyStateDetailed
+        assetKey="changelog"
+        description={description}
+        align="center"
+        actions={[
+          {
+            label: "Go to changelog",
+            variant: "primary",
+            onClick: () => window.open(changelogUrl, "_blank"),
+          },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
new file mode 100644
index 0000000..09965aa
--- /dev/null
+++ b/apps/web/core/components/global/product-updates/footer.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+// ui
+import { getButtonStyling } from "@plane/propel/button";
+import { PlaneLogo } from "@plane/propel/icons";
+// helpers
+import { cn } from "@plane/utils";
+
+export function ProductUpdatesFooter() {
+  const { t } = useTranslation();
+  return (
+    <div className="m-6 mb-4 flex flex-shrink-0 items-center justify-between gap-4">
+      <div className="flex items-center gap-2">
+        <a
+          href="https://go.plane.so/p-docs"
+          target="_blank"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
+          rel="noreferrer"
+        >
+          {t("docs")}
+        </a>
+        <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-current">
+          <circle cx={1} cy={1} r={1} />
+        </svg>
+        <a
+          href="https://go.plane.so/p-changelog"
+          target="_blank"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
+          rel="noreferrer"
+        >
+          {t("full_changelog")}
+        </a>
+        <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-current">
+          <circle cx={1} cy={1} r={1} />
+        </svg>
+        <a
+          href="mailto:support@plane.so"
+          target="_blank"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
+          rel="noreferrer"
+        >
+          {t("support")}
+        </a>
+        <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-current">
+          <circle cx={1} cy={1} r={1} />
+        </svg>
+        <a
+          href="https://forum.plane.so"
+          target="_blank"
+          className="text-13 text-secondary underline-offset-1 outline-none hover:text-primary hover:underline"
+          rel="noreferrer"
+        >
+          Forum
+        </a>
+      </div>
+      <a
+        href="https://plane.so/pages"
+        target="_blank"
+        className={cn(
+          getButtonStyling("secondary", "base"),
+          "flex items-center gap-1.5 text-center font-medium underline-offset-2 outline-none hover:underline"
+        )}
+        rel="noreferrer"
+      >
+        <PlaneLogo className="h-4 w-auto text-primary" />
+        {t("powered_by_plane_pages")}
+      </a>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/global/product-updates/header.tsx b/apps/web/core/components/global/product-updates/header.tsx
new file mode 100644
index 0000000..375ecae
--- /dev/null
+++ b/apps/web/core/components/global/product-updates/header.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import packageJson from "package.json";
+import { useTranslation } from "@plane/i18n";
+// helpers
+import { cn } from "@plane/utils";
+
+export const ProductUpdatesHeader = observer(function ProductUpdatesHeader() {
+  const { t } = useTranslation();
+  return (
+    <div className="mx-6 my-4 flex flex-shrink-0 items-center justify-between gap-2">
+      <div className="flex w-full items-center">
+        <div className="flex gap-2 text-18 font-medium">{t("whats_new")}</div>
+        <div
+          className={cn(
+            "mx-2 rounded-full bg-accent-primary/20 px-2 py-0.5 text-center text-11 font-medium text-accent-primary"
+          )}
+        >
+          {t("version")}: v{packageJson.version}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/global/product-updates/index.ts b/apps/web/core/components/global/product-updates/index.ts
new file mode 100644
index 0000000..b9ae9c0
--- /dev/null
+++ b/apps/web/core/components/global/product-updates/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./modal";
+export * from "./footer";
diff --git a/apps/web/core/components/global/product-updates/modal.tsx b/apps/web/core/components/global/product-updates/modal.tsx
new file mode 100644
index 0000000..44100fa
--- /dev/null
+++ b/apps/web/core/components/global/product-updates/modal.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// components
+import { ProductUpdatesFooter } from "@/components/global";
+// plane web components
+import { ProductUpdatesChangelog } from "@/components/global/product-updates/changelog";
+import { ProductUpdatesHeader } from "@/components/global/product-updates/header";
+
+export type ProductUpdatesModalProps = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const ProductUpdatesModal = observer(function ProductUpdatesModal(props: ProductUpdatesModalProps) {
+  const { isOpen, handleClose } = props;
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXXXL}>
+      <ProductUpdatesHeader />
+      <ProductUpdatesChangelog />
+      <ProductUpdatesFooter />
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/global/timezone-select.tsx b/apps/web/core/components/global/timezone-select.tsx
new file mode 100644
index 0000000..a4d692a
--- /dev/null
+++ b/apps/web/core/components/global/timezone-select.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { CustomSearchSelect } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import useTimezone from "@/hooks/use-timezone";
+
+type TTimezoneSelect = {
+  value: string | undefined;
+  onChange: (value: string) => void;
+  error?: boolean;
+  label?: string;
+  buttonClassName?: string;
+  className?: string;
+  optionsClassName?: string;
+  disabled?: boolean;
+};
+
+export const TimezoneSelect = observer(function TimezoneSelect(props: TTimezoneSelect) {
+  // props
+  const {
+    value,
+    onChange,
+    error = false,
+    label = "Select a timezone",
+    buttonClassName = "",
+    className = "",
+    optionsClassName = "",
+    disabled = false,
+  } = props;
+  // hooks
+  const { disabled: isDisabled, timezones, selectedValue } = useTimezone();
+
+  return (
+    <div>
+      <CustomSearchSelect
+        value={value}
+        label={value && selectedValue ? selectedValue(value) : label}
+        options={isDisabled || disabled ? [] : timezones}
+        onChange={onChange}
+        buttonClassName={cn(buttonClassName, "border border-subtle-1", {
+          "border-danger-strong": error,
+        })}
+        className={cn("rounded-md", className)}
+        optionsClassName={cn("w-72", optionsClassName)}
+        input
+        disabled={isDisabled || disabled}
+        placement="bottom-end"
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/global/version-number.tsx b/apps/web/core/components/global/version-number.tsx
new file mode 100644
index 0000000..a883eac
--- /dev/null
+++ b/apps/web/core/components/global/version-number.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// assets
+import { useTranslation } from "@plane/i18n";
+import packageJson from "package.json";
+
+export function PlaneVersionNumber() {
+  const { t } = useTranslation();
+  return (
+    <span>
+      {t("version")}: v{packageJson.version}
+    </span>
+  );
+}
diff --git a/apps/web/core/components/home/home-dashboard-widgets.tsx b/apps/web/core/components/home/home-dashboard-widgets.tsx
new file mode 100644
index 0000000..36efc3e
--- /dev/null
+++ b/apps/web/core/components/home/home-dashboard-widgets.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { THomeWidgetKeys, THomeWidgetProps } from "@plane/types";
+// assets
+import darkWidgetsAsset from "@/app/assets/empty-state/dashboard/widgets-dark.webp?url";
+import lightWidgetsAsset from "@/app/assets/empty-state/dashboard/widgets-light.webp?url";
+// components
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+// hooks
+import { useHome } from "@/hooks/store/use-home";
+import { useProject } from "@/hooks/store/use-project";
+// local imports
+import { StickiesWidget } from "../stickies/widget";
+import { HomeLoader, NoProjectsEmptyState, RecentActivityWidget } from "./widgets";
+import { DashboardQuickLinks } from "./widgets/links";
+import { ManageWidgetsModal } from "./widgets/manage";
+
+export const HOME_WIDGETS_LIST: {
+  [key in THomeWidgetKeys]: {
+    component: React.FC<THomeWidgetProps> | null;
+    fullWidth: boolean;
+    title: string;
+  };
+} = {
+  quick_links: {
+    component: DashboardQuickLinks,
+    fullWidth: false,
+    title: "home.quick_links.title_plural",
+  },
+  recents: {
+    component: RecentActivityWidget,
+    fullWidth: false,
+    title: "home.recents.title",
+  },
+  my_stickies: {
+    component: StickiesWidget,
+    fullWidth: false,
+    title: "stickies.title",
+  },
+  new_at_plane: {
+    component: null,
+    fullWidth: false,
+    title: "home.new_at_plane.title",
+  },
+  quick_tutorial: {
+    component: null,
+    fullWidth: false,
+    title: "home.quick_tutorial.title",
+  },
+};
+
+export const DashboardWidgets = observer(function DashboardWidgets() {
+  // router
+  const { workspaceSlug } = useParams();
+  // navigation
+  const pathname = usePathname();
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // store hooks
+  const { toggleWidgetSettings, widgetsMap, showWidgetSettings, orderedWidgets, isAnyWidgetEnabled, loading } =
+    useHome();
+  const { loader } = useProject();
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const noWidgetsResolvedPath = resolvedTheme === "light" ? lightWidgetsAsset : darkWidgetsAsset;
+
+  // derived values
+  const isWikiApp = pathname.includes(`/${workspaceSlug.toString()}/pages`);
+  if (!workspaceSlug) return null;
+  if (loading || loader !== "loaded") return <HomeLoader />;
+
+  return (
+    <div className="relative flex h-full w-full flex-col gap-7">
+      <ManageWidgetsModal
+        workspaceSlug={workspaceSlug.toString()}
+        isModalOpen={showWidgetSettings}
+        handleOnClose={() => toggleWidgetSettings(false)}
+      />
+      {!isWikiApp && <NoProjectsEmptyState />}
+
+      {isAnyWidgetEnabled ? (
+        <div className="flex flex-col">
+          {orderedWidgets.map((key) => {
+            const WidgetComponent = HOME_WIDGETS_LIST[key]?.component;
+            const isEnabled = widgetsMap[key]?.is_enabled;
+            if (!WidgetComponent || !isEnabled) return null;
+            return (
+              <div key={key} className="py-4">
+                <WidgetComponent workspaceSlug={workspaceSlug.toString()} />
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="grid h-full w-full place-items-center">
+          <SimpleEmptyState
+            title={t("home.empty.widgets.title")}
+            description={t("home.empty.widgets.description")}
+            assetPath={noWidgetsResolvedPath}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/home/index.ts b/apps/web/core/components/home/index.ts
new file mode 100644
index 0000000..696c86c
--- /dev/null
+++ b/apps/web/core/components/home/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./widgets";
+export * from "./home-dashboard-widgets";
+export * from "./root";
diff --git a/apps/web/core/components/home/root.tsx b/apps/web/core/components/home/root.tsx
new file mode 100644
index 0000000..e01028f
--- /dev/null
+++ b/apps/web/core/components/home/root.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { ContentWrapper } from "@plane/ui";
+// hooks
+import { useHome } from "@/hooks/store/use-home";
+import { useUserProfile, useUser } from "@/hooks/store/user";
+// plane web imports
+import { TourRoot } from "@/components/onboarding/tour/root";
+// local imports
+import { DashboardWidgets } from "./home-dashboard-widgets";
+import { UserGreetingsView } from "./user-greetings";
+import { HomePeekOverviewsRoot } from "../issues/peek-overview/peek-overviews";
+
+export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
+  // store hooks
+  const { workspaceSlug } = useParams();
+  const { data: currentUser } = useUser();
+  const { data: currentUserProfile, updateTourCompleted } = useUserProfile();
+  const { fetchWidgets } = useHome();
+
+  useSWR(
+    workspaceSlug ? `HOME_DASHBOARD_WIDGETS_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWidgets(workspaceSlug?.toString()) : null,
+    {
+      revalidateIfStale: true,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: true,
+    }
+  );
+
+  const handleTourCompleted = async () => {
+    try {
+      await updateTourCompleted();
+    } catch (error) {
+      console.error("Error updating tour completed", error);
+    }
+  };
+
+  // TODO: refactor loader implementation
+  return (
+    <>
+      {currentUserProfile && !currentUserProfile.is_tour_completed && (
+        <div className="fixed top-0 left-0 z-20 grid h-full w-full place-items-center overflow-y-auto bg-backdrop transition-opacity">
+          <TourRoot onComplete={handleTourCompleted} />
+        </div>
+      )}
+      <>
+        <HomePeekOverviewsRoot />
+        <ContentWrapper className="mx-auto scrollbar-hide gap-6 bg-surface-1 px-page-x">
+          <div className="mx-auto w-full max-w-[800px]">
+            {currentUser && <UserGreetingsView user={currentUser} />}
+            <DashboardWidgets />
+          </div>
+        </ContentWrapper>
+      </>
+    </>
+  );
+});
diff --git a/apps/web/core/components/home/user-greetings.tsx b/apps/web/core/components/home/user-greetings.tsx
new file mode 100644
index 0000000..8d5d6cc
--- /dev/null
+++ b/apps/web/core/components/home/user-greetings.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane types
+import { useTranslation } from "@plane/i18n";
+import type { IUser } from "@plane/types";
+// plane ui
+// hooks
+import { useCurrentTime } from "@/hooks/use-current-time";
+
+export interface IUserGreetingsView {
+  user: IUser;
+}
+
+export function UserGreetingsView(props: IUserGreetingsView) {
+  const { user } = props;
+  // current time hook
+  const { currentTime } = useCurrentTime();
+  // store hooks
+  const { t } = useTranslation();
+
+  const hour = new Intl.DateTimeFormat("en-US", {
+    hour12: false,
+    hour: "numeric",
+  }).format(currentTime);
+
+  const date = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+  }).format(currentTime);
+
+  const weekDay = new Intl.DateTimeFormat("en-US", {
+    weekday: "long",
+  }).format(currentTime);
+
+  const timeString = new Intl.DateTimeFormat("en-US", {
+    timeZone: user?.user_timezone,
+    hour12: false, // Use 24-hour format
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(currentTime);
+
+  const greeting = parseInt(hour, 10) < 12 ? "morning" : parseInt(hour, 10) < 18 ? "afternoon" : "evening";
+
+  return (
+    <div className="my-6 flex flex-col items-center">
+      <h2 className="text-center text-20 font-semibold">
+        {t("good")} {t(greeting)}, {user?.first_name} {user?.last_name}
+      </h2>
+      <h5 className="flex items-center gap-2 font-medium text-placeholder">
+        <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
+        <div>
+          {weekDay}, {date} {timeString}
+        </div>
+      </h5>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/empty-states/index.ts b/apps/web/core/components/home/widgets/empty-states/index.ts
new file mode 100644
index 0000000..2300b91
--- /dev/null
+++ b/apps/web/core/components/home/widgets/empty-states/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./links";
+export * from "./no-projects";
+export * from "./recents";
+export * from "./stickies";
diff --git a/apps/web/core/components/home/widgets/empty-states/links.tsx b/apps/web/core/components/home/widgets/empty-states/links.tsx
new file mode 100644
index 0000000..bd0350c
--- /dev/null
+++ b/apps/web/core/components/home/widgets/empty-states/links.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+
+export function LinksEmptyState() {
+  const { t } = useTranslation();
+  return (
+    <div className="flex w-full items-center justify-center rounded-lg bg-layer-1 py-10">
+      <EmptyStateCompact
+        assetKey="link"
+        assetClassName="w-20 h-20"
+        title={t("workspace_empty_state.home_widget_quick_links.title")}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
new file mode 100644
index 0000000..24b3a0a
--- /dev/null
+++ b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -0,0 +1,205 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// mobx
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { CloseOutline, MembersOutline, ProjectsOutline, TickOutline } from "@makeplane/propel/icons";
+// plane ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { cn, getFileURL } from "@plane/utils";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+// plane web constants
+
+export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
+  // navigation
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { data: currentUser } = useUser();
+  const { joinedProjectIds } = useProject();
+  const { currentWorkspace: activeWorkspace } = useWorkspace();
+  // local storage
+  const { storedValue, setValue } = useLocalStorage(`quickstart-guide-${workspaceSlug}`, {
+    hide: false,
+    visited_members: false,
+    visited_workspace: false,
+    visited_profile: false,
+  });
+  const { t } = useTranslation();
+  // derived values
+  const canCreateProject = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const isWorkspaceAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+
+  const EMPTY_STATE_DATA = [
+    {
+      id: "create-project",
+      title: "home.empty.create_project.title",
+      description: "home.empty.create_project.description",
+      icon: <ProjectsOutline className="size-4" />,
+      flag: "projects",
+      cta: {
+        text: "home.empty.create_project.cta",
+        onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          if (!canCreateProject) return;
+          e.preventDefault();
+          e.stopPropagation();
+          toggleCreateProjectModal(true);
+        },
+        disabled: !canCreateProject,
+      },
+    },
+    {
+      id: "invite-team",
+      title: "home.empty.invite_team.title",
+      description: "home.empty.invite_team.description",
+      icon: <MembersOutline className="size-4" />,
+      flag: "visited_members",
+      cta: {
+        text: "home.empty.invite_team.cta",
+        link: `/${workspaceSlug}/settings/members`,
+        disabled: !isWorkspaceAdmin,
+      },
+    },
+    {
+      id: "configure-workspace",
+      title: "home.empty.configure_workspace.title",
+      description: "home.empty.configure_workspace.description",
+      icon: <ProjectsOutline className="size-4" />,
+      flag: "visited_workspace",
+      cta: {
+        text: "home.empty.configure_workspace.cta",
+        link: "settings",
+        disabled: !isWorkspaceAdmin,
+      },
+    },
+    {
+      id: "personalize-account",
+      title: "home.empty.personalize_account.title",
+      description: "home.empty.personalize_account.description",
+      icon:
+        currentUser?.avatar_url && currentUser?.avatar_url.trim() !== "" ? (
+          <Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
+            <span className="relative flex size-4 items-center justify-center rounded-full p-4 text-on-color capitalize">
+              <img
+                src={getFileURL(currentUser?.avatar_url)}
+                className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
+                alt={currentUser?.display_name || currentUser?.email}
+              />
+            </span>
+          </Link>
+        ) : (
+          <Link href={`/${workspaceSlug}/profile/${currentUser?.id}`}>
+            <span className="relative flex size-4 items-center justify-center rounded-full bg-[#028375] p-4 text-13 text-on-color capitalize">
+              {(currentUser?.email ?? currentUser?.display_name ?? "?")[0]}
+            </span>
+          </Link>
+        ),
+      flag: "visited_profile",
+      cta: {
+        text: "home.empty.personalize_account.cta",
+        link: `/settings/profile/general`,
+        disabled: false,
+      },
+    },
+  ];
+  const isComplete = (type: string) => {
+    switch (type) {
+      case "projects":
+        return joinedProjectIds?.length > 0;
+      case "visited_members":
+        return (activeWorkspace?.total_members || 0) >= 2;
+      case "visited_workspace":
+        return storedValue?.visited_workspace;
+      case "visited_profile":
+        return storedValue?.visited_profile;
+    }
+  };
+
+  if (storedValue?.hide || (joinedProjectIds?.length > 0 && (activeWorkspace?.total_members || 0) >= 2)) return null;
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-14 font-semibold text-tertiary">{t("home.empty.quickstart_guide")}</div>
+        <button
+          className="flex items-center gap-1 text-13 font-medium text-tertiary"
+          onClick={() => {
+            if (!storedValue) return;
+            setValue({ ...storedValue, hide: true });
+          }}
+        >
+          <CloseOutline className="size-4" />
+          {t("home.empty.not_right_now")}
+        </button>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        {EMPTY_STATE_DATA.map((item) => {
+          const isStateComplete = isComplete(item.flag);
+          return (
+            <div key={item.id} className="flex flex-col rounded-xl border border-subtle bg-layer-2 p-4">
+              <div
+                className={cn("mb-3 grid size-9 place-items-center rounded-full bg-surface-2 text-placeholder", {
+                  "bg-accent-primary/10 text-accent-primary": !isStateComplete,
+                })}
+              >
+                <span className="my-auto text-24">{item.icon}</span>
+              </div>
+              <h3 className="mb-2 text-13 font-medium text-primary">{t(item.title)}</h3>
+              <p className="mb-2 text-11 text-tertiary">{t(item.description)}</p>
+              {isStateComplete ? (
+                <div className="flex w-fit items-center gap-2 rounded-full bg-[#17a34a] p-1">
+                  <TickOutline className="size-3 text-accent-primary text-on-color" />
+                </div>
+              ) : (
+                !item.cta.disabled &&
+                (item.cta.link ? (
+                  <Link
+                    href={item.cta.link}
+                    onClick={(e) => {
+                      if (!storedValue) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        return;
+                      }
+                      setValue({
+                        ...storedValue,
+                        [item.flag]: true,
+                      });
+                    }}
+                    className={cn("text-13 font-medium text-accent-primary hover:text-accent-secondary", {})}
+                  >
+                    {t(item.cta.text)}
+                  </Link>
+                ) : (
+                  <button
+                    type="button"
+                    className="text-left text-13 font-medium text-accent-primary hover:text-accent-secondary"
+                    onClick={item.cta.onClick}
+                  >
+                    {t(item.cta.text)}
+                  </button>
+                ))
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/empty-states/recents.tsx b/apps/web/core/components/home/widgets/empty-states/recents.tsx
new file mode 100644
index 0000000..0b219f6
--- /dev/null
+++ b/apps/web/core/components/home/widgets/empty-states/recents.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import type { CompactAssetType } from "@plane/propel/empty-state";
+
+const getDisplayContent = (type: string): { assetKey: CompactAssetType; text: string } => {
+  switch (type) {
+    case "project":
+      return {
+        assetKey: "project",
+        text: "home.recents.empty.project",
+      };
+    case "page":
+      return {
+        assetKey: "note",
+        text: "home.recents.empty.page",
+      };
+    case "issue":
+      return {
+        assetKey: "work-item",
+        text: "home.recents.empty.issue",
+      };
+    default:
+      return {
+        assetKey: "work-item",
+        text: "home.recents.empty.default",
+      };
+  }
+};
+
+export function RecentsEmptyState({ type }: { type: string }) {
+  const { t } = useTranslation();
+
+  const { assetKey, text } = getDisplayContent(type);
+
+  return (
+    <div className="flex w-full items-center justify-center rounded-lg bg-layer-1 py-10">
+      <EmptyStateCompact assetKey={assetKey} assetClassName="size-20" title={t(text)} />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/empty-states/stickies.tsx b/apps/web/core/components/home/widgets/empty-states/stickies.tsx
new file mode 100644
index 0000000..d8798dc
--- /dev/null
+++ b/apps/web/core/components/home/widgets/empty-states/stickies.tsx
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+
+export function StickiesEmptyState() {
+  const { t } = useTranslation();
+  return (
+    <div className="flex w-full items-center justify-center rounded-lg bg-layer-1 py-10">
+      <EmptyStateCompact assetKey="note" assetClassName="size-20" title={t("stickies.empty_state.simple")} />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/index.ts b/apps/web/core/components/home/widgets/index.ts
new file mode 100644
index 0000000..18e0acc
--- /dev/null
+++ b/apps/web/core/components/home/widgets/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./empty-states";
+export * from "./loaders";
+export * from "./recents";
diff --git a/apps/web/core/components/home/widgets/links/action.tsx b/apps/web/core/components/home/widgets/links/action.tsx
new file mode 100644
index 0000000..1a9201e
--- /dev/null
+++ b/apps/web/core/components/home/widgets/links/action.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+
+type TProps = {
+  onClick: () => void;
+};
+export function AddLink(props: TProps) {
+  const { onClick } = props;
+  const { t } = useTranslation();
+
+  return (
+    <button
+      className="btn btn-primary flex h-[56px] w-[230px] gap-4 rounded-md border-[0.5px] border-subtle bg-surface-1 px-4"
+      onClick={onClick}
+    >
+      <div className="my-auto h-8 w-8 rounded-sm bg-layer-1/40 p-2">
+        <AddOutline className="h-4 w-4 text-tertiary" />
+      </div>
+      <div className="my-auto text-13 font-medium">{t("home.quick_links.add")}</div>
+    </button>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
new file mode 100644
index 0000000..e79933f
--- /dev/null
+++ b/apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane types
+// plane ui
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { TLinkEditableFields } from "@plane/types";
+import { ModalCore } from "@plane/ui";
+import type { TLinkOperations } from "./use-links";
+
+export type TLinkOperationsModal = Exclude<TLinkOperations, "remove">;
+
+export type TLinkCreateFormFieldOptions = TLinkEditableFields & {
+  id?: string;
+};
+
+export type TLinkCreateEditModal = {
+  isModalOpen: boolean;
+  handleOnClose?: () => void;
+  linkOperations: TLinkOperationsModal;
+  preloadedData?: TLinkCreateFormFieldOptions;
+};
+
+const defaultValues: TLinkCreateFormFieldOptions = {
+  title: "",
+  url: "",
+};
+
+export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(props: TLinkCreateEditModal) {
+  // props
+  const { isModalOpen, handleOnClose, linkOperations, preloadedData } = props;
+  // react hook form
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<TLinkCreateFormFieldOptions>({
+    defaultValues,
+  });
+  const { t } = useTranslation();
+
+  const onClose = () => {
+    if (handleOnClose) handleOnClose();
+  };
+
+  const handleFormSubmit = async (formData: TLinkCreateFormFieldOptions) => {
+    const parsedUrl = formData.url.startsWith("http") ? formData.url : `http://${formData.url}`;
+    try {
+      if (!formData || !formData.id) await linkOperations.create({ title: formData.title, url: parsedUrl });
+      else await linkOperations.update(formData.id, { title: formData.title, url: parsedUrl });
+      onClose();
+    } catch (error) {
+      console.error("error", error);
+    }
+  };
+
+  useEffect(() => {
+    if (isModalOpen) reset({ ...defaultValues, ...preloadedData });
+    return () => reset(defaultValues);
+  }, [preloadedData, reset, isModalOpen]);
+
+  return (
+    <ModalCore isOpen={isModalOpen} handleClose={onClose}>
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
+        <div className="space-y-5 p-5">
+          <h3 className="text-18 font-medium text-secondary">
+            {preloadedData?.id ? t("update") : t("add")} {t("home.quick_links.title")}
+          </h3>
+          <div className="mt-2 space-y-3">
+            <div>
+              <label htmlFor="url" className="mb-2 text-14 font-medium text-secondary">
+                {t("link.modal.url.text")}
+                <span className="block text-10">{t("required")}</span>
+              </label>
+              <Controller
+                control={control}
+                name="url"
+                rules={{
+                  required: t("link.modal.url.required"),
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Field name="url" invalid={Boolean(errors.url)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="url"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        placeholder={t("link.modal.url.placeholder")}
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+              {errors.url && <span className="text-11 text-danger-primary">{t("link.modal.url.required")}</span>}
+            </div>
+            <div>
+              <label htmlFor="title" className="mb-2 text-14 font-medium text-secondary">
+                {t("link.modal.title.text")}
+                <span className="block text-10">{t("optional")}</span>
+              </label>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Field name="title" invalid={Boolean(errors.title)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="title"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        placeholder={t("link.modal.title.placeholder")}
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            {t("Cancel")}
+          </Button>
+          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+            {preloadedData?.id ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}{" "}
+            {t("home.quick_links.title")}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/links/index.ts b/apps/web/core/components/home/widgets/links/index.ts
new file mode 100644
index 0000000..a8215b5
--- /dev/null
+++ b/apps/web/core/components/home/widgets/links/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+export * from "./links";
+export * from "./link-detail";
diff --git a/apps/web/core/components/home/widgets/links/link-detail.tsx b/apps/web/core/components/home/widgets/links/link-detail.tsx
new file mode 100644
index 0000000..2391816
--- /dev/null
+++ b/apps/web/core/components/home/widgets/links/link-detail.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+
+import { useTranslation } from "@plane/i18n";
+import { DeleteOutline, EditOutline, LinkOutline, NewTabOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TContextMenuItem } from "@plane/ui";
+import { LinkItemBlock } from "@plane/ui";
+// plane utils
+import { copyTextToClipboard } from "@plane/utils";
+// hooks
+import { useHome } from "@/hooks/store/use-home";
+// types
+import type { TLinkOperations } from "./use-links";
+
+export type TProjectLinkDetail = {
+  linkId: string;
+  linkOperations: TLinkOperations;
+};
+
+export const ProjectLinkDetail = observer(function ProjectLinkDetail(props: TProjectLinkDetail) {
+  // props
+  const { linkId, linkOperations } = props;
+  // hooks
+  const {
+    quickLinks: { getLinkById, toggleLinkModal, setLinkData },
+  } = useHome();
+  const { t } = useTranslation();
+  // derived values
+  const linkDetail = getLinkById(linkId);
+  const linkUrl = linkDetail?.url;
+
+  // handlers
+  const handleEdit = useCallback(
+    (modalToggle: boolean) => {
+      toggleLinkModal(modalToggle);
+      setLinkData(linkDetail);
+    },
+    [linkDetail, setLinkData, toggleLinkModal]
+  );
+
+  const handleCopyText = useCallback(() => {
+    if (!linkUrl) return;
+    copyTextToClipboard(linkUrl).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("link_copied"),
+        message: t("view_link_copied_to_clipboard"),
+      });
+    });
+  }, [linkUrl, t]);
+
+  const handleOpenInNewTab = useCallback(() => {
+    window.open(linkUrl, "_blank", "noopener,noreferrer");
+  }, [linkUrl]);
+
+  const handleDelete = useCallback(() => {
+    linkOperations.remove(linkId);
+  }, [linkId, linkOperations]);
+
+  // derived values
+  const menuItems = useMemo<TContextMenuItem[]>(
+    () => [
+      {
+        key: "edit",
+        action: () => handleEdit(true),
+        title: t("edit"),
+        icon: EditOutline,
+      },
+      {
+        key: "open-new-tab",
+        action: handleOpenInNewTab,
+        title: t("open_in_new_tab"),
+        icon: NewTabOutline,
+      },
+      {
+        key: "copy-link",
+        action: handleCopyText,
+        title: t("copy_link"),
+        icon: LinkOutline,
+      },
+      {
+        key: "delete",
+        action: handleDelete,
+        title: t("delete"),
+        icon: DeleteOutline,
+      },
+    ],
+    [handleEdit, handleOpenInNewTab, handleCopyText, handleDelete, t]
+  );
+
+  if (!linkDetail) return null;
+
+  return (
+    <LinkItemBlock
+      title={linkDetail.title || linkDetail.url}
+      url={linkDetail.url}
+      createdAt={linkDetail.created_at}
+      menuItems={menuItems}
+      onClick={handleOpenInNewTab}
+    />
+  );
+});
diff --git a/apps/web/core/components/home/widgets/links/links.tsx b/apps/web/core/components/home/widgets/links/links.tsx
new file mode 100644
index 0000000..4d6d171
--- /dev/null
+++ b/apps/web/core/components/home/widgets/links/links.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// computed
+import { ContentOverflowWrapper } from "@/components/core/content-overflow-HOC";
+import { useHome } from "@/hooks/store/use-home";
+import { LinksEmptyState } from "../empty-states/links";
+import { EWidgetKeys, WidgetLoader } from "../loaders";
+import { ProjectLinkDetail } from "./link-detail";
+import type { TLinkOperations } from "./use-links";
+
+export type TLinkOperationsModal = Exclude<TLinkOperations, "create">;
+
+export type TProjectLinkList = {
+  linkOperations: TLinkOperationsModal;
+  workspaceSlug: string;
+};
+
+export const ProjectLinkList = observer(function ProjectLinkList(props: TProjectLinkList) {
+  // props
+  const { linkOperations, workspaceSlug } = props;
+  // hooks
+  const {
+    quickLinks: { getLinksByWorkspaceId },
+  } = useHome();
+
+  const links = getLinksByWorkspaceId(workspaceSlug);
+
+  if (links === undefined) return <WidgetLoader widgetKey={EWidgetKeys.QUICK_LINKS} />;
+
+  if (links.length === 0) return <LinksEmptyState />;
+
+  return (
+    <div className="relative">
+      <ContentOverflowWrapper
+        maxHeight={150}
+        containerClassName="box-border min-h-[30px] flex flex-col"
+        fallback={<></>}
+        buttonClassName="bg-surface-2/20"
+      >
+        <div className="mb-2 flex flex-1 flex-wrap gap-2">
+          {links.map((linkId) => (
+            <ProjectLinkDetail key={linkId} linkId={linkId} linkOperations={linkOperations} />
+          ))}
+        </div>
+      </ContentOverflowWrapper>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/links/root.tsx b/apps/web/core/components/home/widgets/links/root.tsx
new file mode 100644
index 0000000..39d76fa
--- /dev/null
+++ b/apps/web/core/components/home/widgets/links/root.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+import type { THomeWidgetProps } from "@plane/types";
+import { useHome } from "@/hooks/store/use-home";
+import { LinkCreateUpdateModal } from "./create-update-link-modal";
+import { ProjectLinkList } from "./links";
+import { useLinks } from "./use-links";
+
+export const DashboardQuickLinks = observer(function DashboardQuickLinks(props: THomeWidgetProps) {
+  const { workspaceSlug } = props;
+  const { linkOperations } = useLinks(workspaceSlug);
+  const {
+    quickLinks: { isLinkModalOpen, toggleLinkModal, linkData, setLinkData, fetchLinks },
+  } = useHome();
+  const { t } = useTranslation();
+
+  const handleCreateLinkModal = useCallback(() => {
+    toggleLinkModal(true);
+    setLinkData(undefined);
+  }, [toggleLinkModal, setLinkData]);
+
+  useSWR(
+    workspaceSlug ? `HOME_LINKS_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchLinks(workspaceSlug.toString()) : null,
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+  return (
+    <>
+      <LinkCreateUpdateModal
+        isModalOpen={isLinkModalOpen}
+        handleOnClose={() => toggleLinkModal(false)}
+        linkOperations={linkOperations}
+        preloadedData={linkData}
+      />
+      <div className="mb-2">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="text-14 font-semibold text-tertiary">{t("home.quick_links.title_plural")}</div>
+          <button
+            onClick={handleCreateLinkModal}
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
+          >
+            <AddOutline className="my-auto size-4" /> <span>{t("home.quick_links.add")}</span>
+          </button>
+        </div>
+        <div className="flex w-full flex-wrap">
+          {/* rendering links */}
+          <ProjectLinkList workspaceSlug={workspaceSlug} linkOperations={linkOperations} />
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/links/use-links.tsx b/apps/web/core/components/home/widgets/links/use-links.tsx
new file mode 100644
index 0000000..72da254
--- /dev/null
+++ b/apps/web/core/components/home/widgets/links/use-links.tsx
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TProjectLink } from "@plane/types";
+import { useHome } from "@/hooks/store/use-home";
+
+export type TLinkOperations = {
+  create: (data: Partial<TProjectLink>) => Promise<void>;
+  update: (linkId: string, data: Partial<TProjectLink>) => Promise<void>;
+  remove: (linkId: string) => Promise<void>;
+};
+export type TProjectLinkRoot = {
+  workspaceSlug: string;
+};
+
+export const useLinks = (workspaceSlug: string) => {
+  // hooks
+  const {
+    quickLinks: {
+      createLink,
+      updateLink,
+      removeLink,
+      isLinkModalOpen,
+      toggleLinkModal,
+      linkData,
+      setLinkData,
+      fetchLinks,
+    },
+  } = useHome();
+  const { t } = useTranslation();
+
+  const linkOperations: TLinkOperations = useMemo(
+    () => ({
+      create: async (data: Partial<TProjectLink>) => {
+        try {
+          if (!workspaceSlug) throw new Error("Missing required fields");
+          await createLink(workspaceSlug, data);
+          setToast({
+            message: t("links.toasts.created.message"),
+            type: TOAST_TYPE.SUCCESS,
+            title: t("links.toasts.created.title"),
+          });
+          toggleLinkModal(false);
+        } catch (error: any) {
+          console.error("error", error?.data?.error);
+          setToast({
+            message: error?.data?.error ?? t("links.toasts.not_created.message"),
+            type: TOAST_TYPE.ERROR,
+            title: t("links.toasts.not_created.title"),
+          });
+          throw error;
+        }
+      },
+      update: async (linkId: string, data: Partial<TProjectLink>) => {
+        try {
+          if (!workspaceSlug) throw new Error("Missing required fields");
+          await updateLink(workspaceSlug, linkId, data);
+          setToast({
+            message: t("links.toasts.updated.message"),
+            type: TOAST_TYPE.SUCCESS,
+            title: t("links.toasts.updated.title"),
+          });
+          toggleLinkModal(false);
+        } catch (error: any) {
+          setToast({
+            message: error?.data?.error ?? t("links.toasts.not_updated.message"),
+            type: TOAST_TYPE.ERROR,
+            title: t("links.toasts.not_updated.title"),
+          });
+          throw error;
+        }
+      },
+      remove: async (linkId: string) => {
+        try {
+          if (!workspaceSlug) throw new Error("Missing required fields");
+          await removeLink(workspaceSlug, linkId);
+          setToast({
+            message: t("links.toasts.removed.message"),
+            type: TOAST_TYPE.SUCCESS,
+            title: t("links.toasts.removed.message"),
+          });
+        } catch (error: any) {
+          setToast({
+            message: error?.data?.error ?? t("links.toasts.not_removed.message"),
+            type: TOAST_TYPE.ERROR,
+            title: t("links.toasts.not_removed.title"),
+          });
+        }
+      },
+    }),
+    [workspaceSlug]
+  );
+
+  const handleOnClose = () => {
+    toggleLinkModal(false);
+  };
+
+  return { linkOperations, handleOnClose, isLinkModalOpen, toggleLinkModal, linkData, setLinkData, fetchLinks };
+};
diff --git a/apps/web/core/components/home/widgets/loaders/home-loader.tsx b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
new file mode 100644
index 0000000..571ef80
--- /dev/null
+++ b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+// ui
+import { Loader } from "@plane/ui";
+
+export function HomeLoader() {
+  return (
+    <>
+      {range(3).map((index) => (
+        <div key={index}>
+          <div className="mb-2">
+            <div className="mb-4 text-14 font-semibold text-tertiary">
+              <Loader.Item height="20px" width="100px" />
+            </div>
+            <Loader className="flex h-[110px] w-full items-center justify-center gap-2 rounded-sm text-placeholder">
+              <Loader.Item height="100%" width="100%" />
+            </Loader>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/loaders/index.ts b/apps/web/core/components/home/widgets/loaders/index.ts
new file mode 100644
index 0000000..1ea5354
--- /dev/null
+++ b/apps/web/core/components/home/widgets/loaders/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./loader";
+export * from "./home-loader";
diff --git a/apps/web/core/components/home/widgets/loaders/loader.tsx b/apps/web/core/components/home/widgets/loaders/loader.tsx
new file mode 100644
index 0000000..afdfe38
--- /dev/null
+++ b/apps/web/core/components/home/widgets/loaders/loader.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components
+import { QuickLinksWidgetLoader } from "./quick-links";
+import { RecentActivityWidgetLoader } from "./recent-activity";
+
+// types
+
+type Props = {
+  widgetKey: EWidgetKeys;
+};
+
+export enum EWidgetKeys {
+  RECENT_ACTIVITY = "recent_activity",
+  QUICK_LINKS = "quick_links",
+}
+
+export function WidgetLoader(props: Props) {
+  const { widgetKey } = props;
+
+  const loaders = {
+    [EWidgetKeys.RECENT_ACTIVITY]: <RecentActivityWidgetLoader />,
+    [EWidgetKeys.QUICK_LINKS]: <QuickLinksWidgetLoader />,
+  };
+
+  return loaders[widgetKey];
+}
diff --git a/apps/web/core/components/home/widgets/loaders/quick-links.tsx b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
new file mode 100644
index 0000000..4a12645
--- /dev/null
+++ b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+// ui
+import { Loader } from "@plane/ui";
+
+export function QuickLinksWidgetLoader() {
+  return (
+    <Loader className="flex flex-wrap gap-2 rounded-xl bg-surface-1">
+      {range(4).map((index) => (
+        <Loader.Item key={index} height="56px" width="230px" />
+      ))}
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
new file mode 100644
index 0000000..0b513f1
--- /dev/null
+++ b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+// ui
+import { Loader } from "@plane/ui";
+
+export function RecentActivityWidgetLoader() {
+  return (
+    <Loader className="space-y-6 rounded-xl px-2">
+      {range(5).map((index) => (
+        <div key={index} className="flex items-start gap-3.5">
+          <div className="flex-shrink-0">
+            <Loader.Item height="32px" width="32px" />
+          </div>
+          <div className="my-auto w-full flex-shrink-0 space-y-3">
+            <Loader.Item height="15px" width="70%" />
+          </div>
+        </div>
+      ))}
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/manage/index.tsx b/apps/web/core/components/home/widgets/manage/index.tsx
new file mode 100644
index 0000000..9df07e8
--- /dev/null
+++ b/apps/web/core/components/home/widgets/manage/index.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+// plane ui
+import { useTranslation } from "@plane/i18n";
+import { EModalWidth, ModalCore } from "@plane/ui";
+import { WidgetList } from "./widget-list";
+
+export type TProps = {
+  workspaceSlug: string;
+  isModalOpen: boolean;
+  handleOnClose?: () => void;
+};
+
+export const ManageWidgetsModal = observer(function ManageWidgetsModal(props: TProps) {
+  // props
+  const { workspaceSlug, isModalOpen, handleOnClose } = props;
+  const { t } = useTranslation();
+
+  return (
+    <ModalCore isOpen={isModalOpen} handleClose={handleOnClose} width={EModalWidth.MD}>
+      <div className="p-4">
+        <div className="text-18 font-medium"> {t("home.manage_widgets")}</div>
+        <WidgetList workspaceSlug={workspaceSlug} />
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx b/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
new file mode 100644
index 0000000..fd02106
--- /dev/null
+++ b/apps/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// ui
+import { DragHandle } from "@plane/ui";
+// helper
+import { cn } from "@plane/utils";
+
+type Props = {
+  sort_order: number | null;
+  isDragging: boolean;
+};
+
+export const WidgetItemDragHandle = observer(function WidgetItemDragHandle(props: Props) {
+  const { isDragging } = props;
+
+  return (
+    <div
+      className={cn("mr-2 flex cursor-grab items-center justify-center rounded-sm text-placeholder", {
+        "cursor-grabbing": isDragging,
+      })}
+    >
+      <DragHandle className="bg-transparent" />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/manage/widget-item.tsx b/apps/web/core/components/home/widgets/manage/widget-item.tsx
new file mode 100644
index 0000000..a1f1ab4
--- /dev/null
+++ b/apps/web/core/components/home/widgets/manage/widget-item.tsx
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import type {
+  DropTargetRecord,
+  DragLocationHistory,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import type { ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { createRoot } from "react-dom/client";
+// plane types
+import { useTranslation } from "@plane/i18n";
+import type { InstructionType } from "@plane/types";
+// plane ui
+import { Switch } from "@makeplane/propel/components/switch";
+import { DropIndicator } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useHome } from "@/hooks/store/use-home";
+import { HOME_WIDGETS_LIST } from "../../home-dashboard-widgets";
+import { WidgetItemDragHandle } from "./widget-item-drag-handle";
+import { getCanDrop, getInstructionFromPayload } from "./widget.helpers";
+
+type Props = {
+  widgetId: string;
+  isLastChild: boolean;
+  handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
+  handleToggle: (workspaceSlug: string, widgetKey: string, is_enabled: boolean) => void;
+};
+
+export const WidgetItem = observer(function WidgetItem(props: Props) {
+  // props
+  const { widgetId, isLastChild, handleDrop, handleToggle } = props;
+  const { workspaceSlug } = useParams();
+  //state
+  const [isDragging, setIsDragging] = useState(false);
+  const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
+  //ref
+  const elementRef = useRef<HTMLDivElement>(null);
+  // hooks
+  const { widgetsMap } = useHome();
+  const { t } = useTranslation();
+  // derived values
+  const widget = widgetsMap[widgetId];
+  const widgetTitle = HOME_WIDGETS_LIST[widget.key]?.title;
+
+  // drag and drop
+  useEffect(() => {
+    const element = elementRef.current;
+
+    if (!element) return;
+    const initialData = { id: widget.key, isGroup: false };
+    return combine(
+      draggable({
+        element,
+        dragHandle: element,
+        getInitialData: () => initialData,
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
+            render: ({ container }) => {
+              const root = createRoot(container);
+              root.render(<div className="rounded-sm bg-surface-1 p-1 pr-2 text-13">{widget.key}</div>);
+              return () => root.unmount();
+            },
+            nativeSetDragImage,
+          });
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => getCanDrop(source, widget),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        getData: ({ input, element }) => {
+          const blockedStates: InstructionType[] = ["make-child"];
+          if (!isLastChild) {
+            blockedStates.push("reorder-below");
+          }
+
+          return attachInstruction(initialData, {
+            input,
+            element,
+            currentLevel: 1,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+            block: blockedStates,
+          });
+        },
+        onDrag: ({ self, source, location }) => {
+          const instruction = getInstructionFromPayload(self, source, location);
+          setInstruction(instruction);
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ self, source, location }) => {
+          setInstruction(undefined);
+          handleDrop(self, source, location);
+        },
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef?.current, isDragging, isLastChild, widget.key]);
+
+  return (
+    <div className="">
+      <DropIndicator isVisible={instruction === "reorder-above"} />
+      <div
+        ref={elementRef}
+        className={cn(
+          "group/widget-item relative flex items-center justify-between rounded-sm px-2 py-2 text-13 font-medium hover:bg-layer-1",
+          {
+            "cursor-grabbing bg-layer-1": isDragging,
+          }
+        )}
+      >
+        <div className="flex items-center">
+          <WidgetItemDragHandle sort_order={widget.sort_order} isDragging={isDragging} />
+          <div>{t(widgetTitle, { count: 1 })}</div>
+        </div>
+        <Switch
+          size="sm"
+          checked={widget.is_enabled}
+          onCheckedChange={(enabled) => handleToggle(workspaceSlug.toString(), widget.key, enabled)}
+          aria-label={t(widgetTitle, { count: 1 })}
+        />
+      </div>
+      {isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/manage/widget-list.tsx b/apps/web/core/components/home/widgets/manage/widget-list.tsx
new file mode 100644
index 0000000..972c769
--- /dev/null
+++ b/apps/web/core/components/home/widgets/manage/widget-list.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  DragLocationHistory,
+  DropTargetRecord,
+  ElementDragPayload,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { useHome } from "@/hooks/store/use-home";
+import { WidgetItem } from "./widget-item";
+import type { TargetData } from "./widget.helpers";
+import { getInstructionFromPayload } from "./widget.helpers";
+
+export const WidgetList = observer(function WidgetList({ workspaceSlug }: { workspaceSlug: string }) {
+  const { orderedWidgets, reorderWidget, toggleWidget } = useHome();
+  const { t } = useTranslation();
+
+  const handleDrop = (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => {
+    const dropTargets = location?.current?.dropTargets ?? [];
+    if (!dropTargets || dropTargets.length <= 0) return;
+    const dropTarget =
+      dropTargets.length > 1 ? dropTargets.find((target: DropTargetRecord) => target?.data?.isChild) : dropTargets[0];
+
+    const dropTargetData = dropTarget?.data as TargetData;
+
+    if (!dropTarget || !dropTargetData) return;
+    const instruction = getInstructionFromPayload(dropTarget, source, location);
+    const droppedId = dropTargetData.id;
+    const sourceData = source.data as TargetData;
+
+    if (!sourceData.id) return;
+    if (droppedId) {
+      reorderWidget(workspaceSlug, sourceData.id, droppedId, instruction)
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("toast.success"),
+            message: t("home.widget.reordered_successfully"),
+          });
+        })
+        .catch(() => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("home.widget.reordering_failed"),
+          });
+        });
+    }
+  };
+
+  return (
+    <div className="my-4">
+      {orderedWidgets.map((widget, index) => (
+        <WidgetItem
+          key={widget}
+          widgetId={widget}
+          isLastChild={index === orderedWidgets.length - 1}
+          handleDrop={handleDrop}
+          handleToggle={toggleWidget}
+        />
+      ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/manage/widget.helpers.ts b/apps/web/core/components/home/widgets/manage/widget.helpers.ts
new file mode 100644
index 0000000..1f25a7b
--- /dev/null
+++ b/apps/web/core/components/home/widgets/manage/widget.helpers.ts
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import type { InstructionType, IPragmaticPayloadLocation, TDropTarget, TWidgetEntityData } from "@plane/types";
+
+export type TargetData = {
+  id: string;
+  parentId: string | null;
+  isGroup: boolean;
+  isChild: boolean;
+};
+
+/**
+ * extracts the Payload and translates the instruction for the current dropTarget based on drag and drop payload
+ * @param dropTarget dropTarget for which the instruction is required
+ * @param source the dragging widget data that is being dragged on the dropTarget
+ * @param location location includes the data of all the dropTargets the source is being dragged on
+ * @returns Instruction for dropTarget
+ */
+export const getInstructionFromPayload = (
+  dropTarget: TDropTarget,
+  source: TDropTarget,
+  location: IPragmaticPayloadLocation
+): InstructionType | undefined => {
+  const dropTargetData = dropTarget?.data as TargetData;
+  const sourceData = source?.data as TargetData;
+  const allDropTargets = location?.current?.dropTargets;
+
+  // if all the dropTargets are greater than 1 meaning the source is being dragged on a group and its child at the same time
+  // and also if the dropTarget in question is also a group then, it should be a child of the current Droptarget
+  if (allDropTargets?.length > 1 && dropTargetData?.isGroup) return "make-child";
+
+  if (!dropTargetData || !sourceData) return undefined;
+
+  let instruction = extractInstruction(dropTargetData)?.type;
+
+  // If the instruction is blocked then set an instruction based on if dropTarget it is a child or not
+  if (instruction === "instruction-blocked") {
+    instruction = dropTargetData.isChild ? "reorder-above" : "make-child";
+  }
+
+  // if source that is being dragged is a group. A group cannon be a child of any other widget,
+  // hence if current instruction is to be a child of dropTarget then reorder-above instead
+  if (instruction === "make-child" && sourceData.isGroup) instruction = "reorder-above";
+
+  return instruction;
+};
+
+/**
+ * This provides a boolean to indicate if the widget can be dropped onto the droptarget
+ * @param source
+ * @param widget
+ * @returns
+ */
+export const getCanDrop = (source: TDropTarget, widget: TWidgetEntityData | undefined) => {
+  const sourceData = source?.data;
+
+  if (!sourceData) return false;
+
+  // a widget cannot be dropped on to itself
+  if (sourceData.id === widget?.key) return false;
+
+  return true;
+};
diff --git a/apps/web/core/components/home/widgets/recents/filters.tsx b/apps/web/core/components/home/widgets/recents/filters.tsx
new file mode 100644
index 0000000..3dac629
--- /dev/null
+++ b/apps/web/core/components/home/widgets/recents/filters.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+import type { TRecentActivityFilterKeys } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+export type TFiltersDropdown = {
+  className?: string;
+  activeFilter: TRecentActivityFilterKeys;
+  setActiveFilter: (filter: TRecentActivityFilterKeys) => void;
+  filters: { name: TRecentActivityFilterKeys; icon?: React.ReactNode; i18n_key: string }[];
+};
+
+export const FiltersDropdown = observer(function FiltersDropdown(props: TFiltersDropdown) {
+  const { className, activeFilter, setActiveFilter, filters } = props;
+  const { t } = useTranslation();
+
+  function DropdownOptions() {
+    return filters?.map((filter) => (
+      <CustomMenu.MenuItem
+        key={filter.name}
+        className="flex items-center gap-2 truncate text-secondary"
+        onClick={() => {
+          setActiveFilter(filter.name);
+        }}
+      >
+        <div className="truncate text-11 font-medium capitalize">{t(filter.i18n_key)}</div>
+      </CustomMenu.MenuItem>
+    ));
+  }
+
+  const title = activeFilter ? filters?.find((filter) => filter.name === activeFilter)?.i18n_key : "";
+  return (
+    <CustomMenu
+      maxHeight={"md"}
+      className={cn("flex w-fit justify-center text-11 text-secondary", className)}
+      placement="bottom-start"
+      customButton={
+        <button className="flex gap-1 rounded-sm border border-subtle px-2 py-1 capitalize hover:bg-layer-transparent-hover">
+          <span className="my-auto text-13 font-medium">{t(title || "")}</span>
+          <ChevronDownOutline className={cn("my-auto size-3 text-tertiary duration-300 hover:text-secondary")} />
+        </button>
+      }
+      customButtonClassName="flex justify-center"
+      closeOnSelect
+    >
+      <DropdownOptions />
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/recents/index.tsx b/apps/web/core/components/home/widgets/recents/index.tsx
new file mode 100644
index 0000000..0fa62ab
--- /dev/null
+++ b/apps/web/core/components/home/widgets/recents/index.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { useTranslation } from "@plane/i18n";
+// plane types
+import { PagesOutline, ProjectsOutline, WorkItemsOutline } from "@makeplane/propel/icons";
+import type { TActivityEntityData, THomeWidgetProps, TRecentActivityFilterKeys } from "@plane/types";
+// plane ui
+// components
+import { ContentOverflowWrapper } from "@/components/core/content-overflow-HOC";
+// plane web services
+import { WorkspaceService } from "@/services/workspace.service";
+import { RecentsEmptyState } from "../empty-states";
+import { EWidgetKeys, WidgetLoader } from "../loaders";
+import { FiltersDropdown } from "./filters";
+import { RecentIssue } from "./issue";
+import { RecentPage } from "./page";
+import { RecentProject } from "./project";
+
+const WIDGET_KEY = EWidgetKeys.RECENT_ACTIVITY;
+const workspaceService = new WorkspaceService();
+const filters: { name: TRecentActivityFilterKeys; icon?: React.ReactNode; i18n_key: string }[] = [
+  { name: "all item", i18n_key: "home.recents.filters.all" },
+  { name: "issue", icon: <WorkItemsOutline className="h-4 w-4" />, i18n_key: "home.recents.filters.issues" },
+  { name: "page", icon: <PagesOutline height={16} width={16} />, i18n_key: "home.recents.filters.pages" },
+  { name: "project", icon: <ProjectsOutline height={16} width={16} />, i18n_key: "home.recents.filters.projects" },
+];
+
+type TRecentWidgetProps = THomeWidgetProps & {
+  presetFilter?: TRecentActivityFilterKeys;
+  showFilterSelect?: boolean;
+};
+
+export const RecentActivityWidget = observer(function RecentActivityWidget(props: TRecentWidgetProps) {
+  const { presetFilter, showFilterSelect = true, workspaceSlug } = props;
+  // states
+  const [filter, setFilter] = useState<TRecentActivityFilterKeys>(presetFilter ?? filters[0].name);
+  const { t } = useTranslation();
+  // ref
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { data: recents, isLoading } = useSWR(
+    workspaceSlug ? `WORKSPACE_RECENT_ACTIVITY_${workspaceSlug}_${filter}` : null,
+    workspaceSlug
+      ? () =>
+          workspaceService.fetchWorkspaceRecents(
+            workspaceSlug.toString(),
+            filter === filters[0].name ? undefined : filter
+          )
+      : null,
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  const resolveRecent = (activity: TActivityEntityData) => {
+    switch (activity.entity_name) {
+      case "page":
+      case "workspace_page":
+        return <RecentPage activity={activity} ref={ref} workspaceSlug={workspaceSlug} />;
+      case "project":
+        return <RecentProject activity={activity} ref={ref} workspaceSlug={workspaceSlug} />;
+      case "issue":
+        return <RecentIssue activity={activity} ref={ref} workspaceSlug={workspaceSlug} />;
+      default:
+        return <></>;
+    }
+  };
+
+  if (!isLoading && recents?.length === 0)
+    return (
+      <div ref={ref} className="max-h-[500px] overflow-y-scroll">
+        <div className="mb-4 flex items-center justify-between">
+          <div className="text-14 font-semibold text-tertiary">{t("home.recents.title")}</div>
+          {showFilterSelect && <FiltersDropdown filters={filters} activeFilter={filter} setActiveFilter={setFilter} />}
+        </div>
+        <div className="flex flex-col items-center justify-center">
+          <RecentsEmptyState type={filter} />
+        </div>
+      </div>
+    );
+
+  return (
+    <ContentOverflowWrapper
+      maxHeight={415}
+      containerClassName="box-border min-h-[250px]"
+      fallback={<></>}
+      buttonClassName="bg-surface-2/20"
+    >
+      <div className="mb-2 flex items-center justify-between">
+        <div className="text-14 font-semibold text-tertiary">{t("home.recents.title")}</div>
+        {showFilterSelect && <FiltersDropdown filters={filters} activeFilter={filter} setActiveFilter={setFilter} />}
+      </div>
+      <div className="flex min-h-[250px] flex-col">
+        {isLoading && <WidgetLoader widgetKey={WIDGET_KEY} />}
+        {!isLoading &&
+          recents
+            ?.filter((recent) => recent.entity_data)
+            .map((activity) => <div key={activity.id}>{resolveRecent(activity)}</div>)}
+      </div>
+    </ContentOverflowWrapper>
+  );
+});
diff --git a/apps/web/core/components/home/widgets/recents/issue.tsx b/apps/web/core/components/home/widgets/recents/issue.tsx
new file mode 100644
index 0000000..83aa364
--- /dev/null
+++ b/apps/web/core/components/home/widgets/recents/issue.tsx
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { WorkItemsOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TActivityEntityData, TIssueEntityData } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// plane ui
+import { calculateTimeAgo, generateWorkItemLink } from "@plane/utils";
+// components
+import { ListItem } from "@/components/core/list";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+type BlockProps = {
+  activity: TActivityEntityData;
+  ref: React.RefObject<HTMLDivElement | null>;
+  workspaceSlug: string;
+};
+export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
+  const { activity, ref, workspaceSlug } = props;
+  // hooks
+  const { getStateById } = useProjectState();
+  const { setPeekIssue } = useIssueDetail();
+  const { setPeekIssue: setPeekEpic } = useIssueDetail(EIssueServiceType.EPICS);
+  const { getProjectIdentifierById } = useProject();
+  // derived values
+  const issueDetails: TIssueEntityData = activity.entity_data as TIssueEntityData;
+  const projectIdentifier = getProjectIdentifierById(issueDetails?.project_id);
+
+  if (!issueDetails) return <></>;
+
+  const state = getStateById(issueDetails?.state);
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issueDetails?.project_id,
+    issueId: issueDetails?.id,
+    projectIdentifier,
+    sequenceId: issueDetails?.sequence_id,
+    isEpic: issueDetails?.is_epic,
+  });
+
+  const handlePeekOverview = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const peekDetails = {
+      workspaceSlug,
+      projectId: issueDetails?.project_id,
+      issueId: activity.entity_data.id,
+    };
+    if (issueDetails?.is_epic) setPeekEpic(peekDetails);
+    else setPeekIssue(peekDetails);
+  };
+
+  return (
+    <ListItem
+      key={activity.id}
+      id={`issue-${issueDetails?.id}`}
+      itemLink={workItemLink}
+      title={issueDetails?.name}
+      prependTitleElement={
+        <div className="flex flex-shrink-0 items-center gap-2">
+          {issueDetails.type ? (
+            <IssueIdentifier
+              size="lg"
+              issueTypeId={issueDetails?.type}
+              projectId={issueDetails?.project_id || ""}
+              projectIdentifier={issueDetails?.project_identifier || ""}
+              issueSequenceId={issueDetails?.sequence_id || ""}
+              variant="tertiary"
+            />
+          ) : (
+            <div className="flex items-center justify-center gap-2">
+              <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-layer-2">
+                <WorkItemsOutline className="size-4 text-tertiary" />
+              </div>
+              <div className="text-13 font-medium whitespace-nowrap text-placeholder">
+                {issueDetails?.project_identifier}-{issueDetails?.sequence_id}
+              </div>
+            </div>
+          )}
+        </div>
+      }
+      appendTitleElement={
+        <div className="flex-shrink-0 text-11 font-medium text-placeholder">
+          {calculateTimeAgo(activity.visited_at)}
+        </div>
+      }
+      quickActionElement={
+        <div className="flex gap-4">
+          <Tooltip label={`State: ${state?.name ?? "State"}`} layout="stacked">
+            <div>
+              <StateGroupIcon
+                stateGroup={state?.group ?? "backlog"}
+                color={state?.color}
+                className="my-auto h-4 w-4"
+                percentage={state?.order}
+              />
+            </div>
+          </Tooltip>
+          <Tooltip label={`Priority: ${issueDetails?.priority ?? "Priority"}`}>
+            <div>
+              <PriorityIcon priority={issueDetails?.priority} withContainer size={12} />
+            </div>
+          </Tooltip>
+          {issueDetails?.assignees?.length > 0 && (
+            <div className="h-5">
+              <MemberDropdown
+                projectId={issueDetails?.project_id}
+                value={issueDetails?.assignees}
+                onChange={() => {}}
+                disabled
+                multiple
+                buttonVariant={issueDetails?.assignees?.length > 0 ? "transparent-without-text" : "border-without-text"}
+                buttonClassName={issueDetails?.assignees?.length > 0 ? "hover:bg-transparent px-0" : ""}
+                showTooltip={issueDetails?.assignees?.length === 0}
+                placeholder="Assignees"
+                optionsClassName="z-10"
+                tooltipContent=""
+              />
+            </div>
+          )}
+        </div>
+      }
+      parentRef={ref}
+      disableLink={false}
+      className="my-auto border-none !px-2 py-3"
+      itemClassName="my-auto"
+      onItemClick={handlePeekOverview}
+      preventDefaultProgress
+    />
+  );
+});
diff --git a/apps/web/core/components/home/widgets/recents/page.tsx b/apps/web/core/components/home/widgets/recents/page.tsx
new file mode 100644
index 0000000..f3e0563
--- /dev/null
+++ b/apps/web/core/components/home/widgets/recents/page.tsx
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRouter } from "next/navigation";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { PagesOutline } from "@makeplane/propel/icons";
+// plane import
+import type { TActivityEntityData, TPageEntityData } from "@plane/types";
+import { calculateTimeAgo, getFileURL, getPageName } from "@plane/utils";
+import { ListItem } from "@/components/core/list";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+type BlockProps = {
+  activity: TActivityEntityData;
+  ref: React.RefObject<HTMLDivElement | null>;
+  workspaceSlug: string;
+};
+
+export function RecentPage(props: BlockProps) {
+  const { activity, ref, workspaceSlug } = props;
+  // router
+  const router = useRouter();
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const pageDetails = activity.entity_data as TPageEntityData;
+
+  if (!pageDetails) return <></>;
+
+  const ownerDetails = getUserDetails(pageDetails?.owned_by);
+  const pageLink = pageDetails.project_id
+    ? `/${workspaceSlug}/projects/${pageDetails.project_id}/pages/${pageDetails.id}`
+    : `/${workspaceSlug}/pages/${pageDetails.id}`;
+
+  return (
+    <ListItem
+      key={activity.id}
+      itemLink={pageLink}
+      title={getPageName(pageDetails?.name)}
+      prependTitleElement={
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-layer-2">
+            {pageDetails?.logo_props?.in_use ? (
+              <Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
+            ) : (
+              <PagesOutline className="size-4 text-tertiary" />
+            )}
+          </div>
+          {pageDetails?.project_identifier && (
+            <div className="text-13 font-medium whitespace-nowrap text-placeholder">
+              {pageDetails?.project_identifier}
+            </div>
+          )}
+        </div>
+      }
+      appendTitleElement={
+        <div className="flex-shrink-0 text-11 font-medium text-placeholder">
+          {calculateTimeAgo(activity.visited_at)}
+        </div>
+      }
+      quickActionElement={
+        <div className="flex gap-4">
+          <Avatar
+            alt={ownerDetails?.display_name}
+            fallback={ownerDetails?.display_name?.[0]?.toUpperCase()}
+            src={getFileURL(ownerDetails?.avatar_url ?? "")}
+            size="xs"
+          />
+        </div>
+      }
+      parentRef={ref}
+      disableLink={false}
+      className="my-auto border-none !px-2 py-3"
+      itemClassName="my-auto bg-layer-transparent"
+      onItemClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        router.push(pageLink);
+      }}
+    />
+  );
+}
diff --git a/apps/web/core/components/home/widgets/recents/project.tsx b/apps/web/core/components/home/widgets/recents/project.tsx
new file mode 100644
index 0000000..cb5fa3f
--- /dev/null
+++ b/apps/web/core/components/home/widgets/recents/project.tsx
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRouter } from "next/navigation";
+// plane types
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import type { TActivityEntityData, TProjectEntityData } from "@plane/types";
+import { calculateTimeAgo } from "@plane/utils";
+// components
+import { ListItem } from "@/components/core/list";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+// helpers
+
+type BlockProps = {
+  activity: TActivityEntityData;
+  ref: React.RefObject<HTMLDivElement | null>;
+  workspaceSlug: string;
+};
+export function RecentProject(props: BlockProps) {
+  const { activity, ref, workspaceSlug } = props;
+  // router
+  const router = useRouter();
+  // derived values
+  const projectDetails: TProjectEntityData = activity.entity_data as TProjectEntityData;
+
+  if (!projectDetails) return <></>;
+
+  const projectLink = `/${workspaceSlug}/projects/${projectDetails?.id}/issues`;
+
+  return (
+    <ListItem
+      key={activity.id}
+      itemLink={projectLink}
+      title={projectDetails?.name}
+      prependTitleElement={
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-layer-2">
+            <Logo logo={projectDetails?.logo_props} size={16} />
+          </div>
+          <div className="text-13 font-medium whitespace-nowrap text-placeholder">{projectDetails?.identifier}</div>
+        </div>
+      }
+      appendTitleElement={
+        <div className="flex-shrink-0 text-11 font-medium text-placeholder">
+          {calculateTimeAgo(activity.visited_at)}
+        </div>
+      }
+      quickActionElement={
+        <div className="flex gap-4">
+          {projectDetails?.project_members?.length > 0 && (
+            <div className="h-5">
+              <MemberDropdown
+                projectId={projectDetails?.id}
+                value={projectDetails?.project_members}
+                onChange={() => {}}
+                disabled
+                multiple
+                buttonVariant={
+                  projectDetails?.project_members?.length > 0 ? "transparent-without-text" : "border-without-text"
+                }
+                buttonClassName={projectDetails?.project_members?.length > 0 ? "hover:bg-transparent px-0" : ""}
+                showTooltip={projectDetails?.project_members?.length === 0}
+                placeholder="Assignees"
+                optionsClassName="z-10"
+                tooltipContent=""
+              />
+            </div>
+          )}
+        </div>
+      }
+      parentRef={ref}
+      disableLink={false}
+      className="my-auto border-none !px-2 py-3"
+      itemClassName="my-auto"
+      onItemClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        router.push(projectLink);
+      }}
+    />
+  );
+}
diff --git a/apps/web/core/components/icons/attachment/attachment-icon.tsx b/apps/web/core/components/icons/attachment/attachment-icon.tsx
new file mode 100644
index 0000000..dcbf652
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/attachment-icon.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  AudioIcon,
+  CssIcon,
+  CsvIcon,
+  DefaultIcon,
+  DocIcon,
+  FigmaIcon,
+  HtmlIcon,
+  JavaScriptIcon,
+  JpgIcon,
+  PdfIcon,
+  PngIcon,
+  RarIcon,
+  SheetIcon,
+  SvgIcon,
+  TxtIcon,
+  VideoIcon,
+  ZipIcon,
+} from "@/components/icons/attachment";
+
+export const getFileIcon = (fileType: string, size: number = 28) => {
+  switch (fileType) {
+    case "pdf":
+      return <PdfIcon height={size} width={size} />;
+    case "csv":
+      return <CsvIcon height={size} width={size} />;
+    case "xlsx":
+      return <SheetIcon height={size} width={size} />;
+    case "css":
+      return <CssIcon height={size} width={size} />;
+    case "doc":
+      return <DocIcon height={size} width={size} />;
+    case "fig":
+      return <FigmaIcon height={size} width={size} />;
+    case "html":
+      return <HtmlIcon height={size} width={size} />;
+    case "png":
+      return <PngIcon height={size} width={size} />;
+    case "jpg":
+      return <JpgIcon height={size} width={size} />;
+    case "js":
+      return <JavaScriptIcon height={size} width={size} />;
+    case "txt":
+      return <TxtIcon height={size} width={size} />;
+    case "svg":
+      return <SvgIcon height={size} width={size} />;
+    case "mp3":
+      return <AudioIcon height={size} width={size} />;
+    case "wav":
+      return <AudioIcon height={size} width={size} />;
+    case "mp4":
+      return <VideoIcon height={size} width={size} />;
+    case "wmv":
+      return <VideoIcon height={size} width={size} />;
+    case "mkv":
+      return <VideoIcon height={size} width={size} />;
+    case "zip":
+      return <ZipIcon height={size} width={size} />;
+    case "rar":
+      return <RarIcon height={size} width={size} />;
+
+    default:
+      return <DefaultIcon height={size} width={size} />;
+  }
+};
diff --git a/apps/web/core/components/icons/attachment/audio-file-icon.tsx b/apps/web/core/components/icons/attachment/audio-file-icon.tsx
new file mode 100644
index 0000000..0cb2b87
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/audio-file-icon.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import AudioFileIcon from "@/app/assets/attachment/audio-icon.png?url";
+
+export type AudioIconProps = {
+  width?: number;
+  height?: number;
+};
+
+export function AudioIcon({ width, height }: AudioIconProps) {
+  return <img src={AudioFileIcon} width={width} height={height} alt="AudioFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/css-file-icon.tsx b/apps/web/core/components/icons/attachment/css-file-icon.tsx
new file mode 100644
index 0000000..662d6c0
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/css-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import CssFileIcon from "@/app/assets/attachment/css-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function CssIcon({ width, height }: ImageIconPros) {
+  return <img src={CssFileIcon} width={width} height={height} alt="CssFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/csv-file-icon.tsx b/apps/web/core/components/icons/attachment/csv-file-icon.tsx
new file mode 100644
index 0000000..b770314
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/csv-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import CSVFileIcon from "@/app/assets/attachment/csv-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function CsvIcon({ width, height }: ImageIconPros) {
+  return <img src={CSVFileIcon} width={width} height={height} alt="CSVFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/default-file-icon.tsx b/apps/web/core/components/icons/attachment/default-file-icon.tsx
new file mode 100644
index 0000000..fb7e5d8
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/default-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import DefaultFileIcon from "@/app/assets/attachment/default-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function DefaultIcon({ width, height }: ImageIconPros) {
+  return <img src={DefaultFileIcon} width={width} height={height} alt="DefaultFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/doc-file-icon.tsx b/apps/web/core/components/icons/attachment/doc-file-icon.tsx
new file mode 100644
index 0000000..23982ff
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/doc-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import DocFileIcon from "@/app/assets/attachment/doc-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function DocIcon({ width, height }: ImageIconPros) {
+  return <img src={DocFileIcon} width={width} height={height} alt="DocFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/document-icon.tsx b/apps/web/core/components/icons/attachment/document-icon.tsx
new file mode 100644
index 0000000..d1518ed
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/document-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+import type { Props } from "../types";
+
+export function DocumentIcon({ width = "24", height = "24", className, color }: Props) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill={color}
+        d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/core/components/icons/attachment/figma-file-icon.tsx b/apps/web/core/components/icons/attachment/figma-file-icon.tsx
new file mode 100644
index 0000000..3efbdad
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/figma-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import FigmaFileIcon from "@/app/assets/attachment/figma-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function FigmaIcon({ width, height }: ImageIconPros) {
+  return <img src={FigmaFileIcon} width={width} height={height} alt="FigmaFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/html-file-icon.tsx b/apps/web/core/components/icons/attachment/html-file-icon.tsx
new file mode 100644
index 0000000..37b0347
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/html-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import HtmlFileIcon from "@/app/assets/attachment/html-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function HtmlIcon({ width, height }: ImageIconPros) {
+  return <img src={HtmlFileIcon} width={width} height={height} alt="HtmlFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/img-file-icon.tsx b/apps/web/core/components/icons/attachment/img-file-icon.tsx
new file mode 100644
index 0000000..077b8ae
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/img-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import ImgFileIcon from "@/app/assets/attachment/img-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function ImgIcon({ width, height }: ImageIconPros) {
+  return <img src={ImgFileIcon} width={width} height={height} alt="ImgFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/index.ts b/apps/web/core/components/icons/attachment/index.ts
new file mode 100644
index 0000000..b56265b
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/index.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./attachment-icon";
+export * from "./audio-file-icon";
+export * from "./css-file-icon";
+export * from "./csv-file-icon";
+export * from "./default-file-icon";
+export * from "./doc-file-icon";
+export * from "./document-icon";
+export * from "./figma-file-icon";
+export * from "./html-file-icon";
+export * from "./img-file-icon";
+export * from "./jpg-file-icon";
+export * from "./js-file-icon";
+export * from "./pdf-file-icon";
+export * from "./png-file-icon";
+export * from "./setting-icon";
+export * from "./sheet-file-icon";
+export * from "./svg-file-icon";
+export * from "./tune-icon";
+export * from "./txt-file-icon";
+export * from "./video-file-icon";
+export * from "./zip-file-icon";
+export * from "./rar-file-icon";
diff --git a/apps/web/core/components/icons/attachment/jpg-file-icon.tsx b/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
new file mode 100644
index 0000000..5ab72fa
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import JpgFileIcon from "@/app/assets/attachment/jpg-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function JpgIcon({ width, height }: ImageIconPros) {
+  return <img src={JpgFileIcon} width={width} height={height} alt="JpgFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/js-file-icon.tsx b/apps/web/core/components/icons/attachment/js-file-icon.tsx
new file mode 100644
index 0000000..e35827b
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/js-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import JsFileIcon from "@/app/assets/attachment/js-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function JavaScriptIcon({ width, height }: ImageIconPros) {
+  return <img src={JsFileIcon} width={width} height={height} alt="JsFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/pdf-file-icon.tsx b/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
new file mode 100644
index 0000000..449fa6e
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import PDFFileIcon from "@/app/assets/attachment/pdf-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function PdfIcon({ width, height }: ImageIconPros) {
+  return <img src={PDFFileIcon} width={width} height={height} alt="PDFFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/png-file-icon.tsx b/apps/web/core/components/icons/attachment/png-file-icon.tsx
new file mode 100644
index 0000000..4346141
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/png-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import PngFileIcon from "@/app/assets/attachment/png-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function PngIcon({ width, height }: ImageIconPros) {
+  return <img src={PngFileIcon} width={width} height={height} alt="PngFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/rar-file-icon.tsx b/apps/web/core/components/icons/attachment/rar-file-icon.tsx
new file mode 100644
index 0000000..50f75e3
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/rar-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import RarFileIcon from "@/app/assets/attachment/rar-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function RarIcon({ width, height }: ImageIconPros) {
+  return <img src={RarFileIcon} width={width} height={height} alt="RarFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/setting-icon.tsx b/apps/web/core/components/icons/attachment/setting-icon.tsx
new file mode 100644
index 0000000..3842e88
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/setting-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+import type { Props } from "../types";
+
+export function SettingIcon({ width = "24", height = "24", color = "var(--text-color-secondary)", className }: Props) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill={color}
+        d="M12.9062 1.375C13.0518 1.375 13.1936 1.42121 13.3112 1.50695C13.4288 1.59269 13.5162 1.71355 13.5607 1.85212L14.317 4.202C14.6346 4.35737 14.9385 4.532 15.2286 4.72862L17.6431 4.20888C17.7854 4.17848 17.9338 4.19406 18.0667 4.25336C18.1997 4.31267 18.3103 4.41264 18.3828 4.53888L20.2886 7.8375C20.3614 7.96366 20.3922 8.10968 20.3766 8.2545C20.361 8.39931 20.2999 8.53544 20.202 8.64325L18.5451 10.472C18.5692 10.8227 18.5692 11.1746 18.5451 11.5252L20.202 13.3567C20.2999 13.4646 20.361 13.6007 20.3766 13.7455C20.3922 13.8903 20.3614 14.0363 20.2886 14.1625L18.3828 17.4625C18.3101 17.5885 18.1994 17.6882 18.0664 17.7472C17.9335 17.8063 17.7853 17.8216 17.6431 17.7911L15.2286 17.2714C14.9398 17.4666 14.6346 17.6426 14.3183 17.798L13.5607 20.1479C13.5162 20.2864 13.4288 20.4073 13.3112 20.4931C13.1936 20.5788 13.0518 20.625 12.9062 20.625H9.0947C8.94915 20.625 8.80735 20.5788 8.68973 20.4931C8.57211 20.4073 8.48474 20.2864 8.4402 20.1479L7.68533 17.7994C7.36856 17.6445 7.06302 17.4676 6.77095 17.27L4.35783 17.7911C4.21547 17.8215 4.06713 17.8059 3.93419 17.7466C3.80125 17.6873 3.69057 17.5874 3.61808 17.4611L1.71233 14.1625C1.63956 14.0363 1.60873 13.8903 1.6243 13.7455C1.63987 13.6007 1.70103 13.4646 1.79895 13.3567L3.45583 11.5252C3.43183 11.1755 3.43183 10.8245 3.45583 10.4748L1.79895 8.64325C1.70103 8.53544 1.63987 8.39931 1.6243 8.2545C1.60873 8.10968 1.63956 7.96366 1.71233 7.8375L3.61808 4.5375C3.69077 4.41151 3.80154 4.31183 3.93446 4.25278C4.06739 4.19373 4.21562 4.17836 4.35783 4.20888L6.77095 4.73C7.06245 4.53338 7.3677 4.356 7.68533 4.20063L8.44158 1.85212C8.48597 1.714 8.57293 1.59346 8.69 1.50776C8.80706 1.42205 8.94824 1.37559 9.09333 1.375H12.9048H12.9062ZM12.403 2.75H9.59795L8.81695 5.17963L8.29033 5.43675C8.03144 5.56344 7.78152 5.70769 7.54233 5.8685L7.05558 6.1985L4.55858 5.6595L3.15608 8.0905L4.86795 9.98525L4.8267 10.5682C4.80695 10.8557 4.80695 11.1443 4.8267 11.4318L4.86795 12.0147L3.15333 13.9095L4.5572 16.3405L7.0542 15.8029L7.54095 16.1315C7.78015 16.2923 8.03007 16.4366 8.28895 16.5632L8.81558 16.8204L9.59795 19.25H12.4057L13.1895 16.819L13.7147 16.5632C13.9733 16.4369 14.2228 16.2926 14.4613 16.1315L14.9467 15.8029L17.4451 16.3405L18.8476 13.9095L17.1343 12.0147L17.1756 11.4318C17.1954 11.1438 17.1954 10.8548 17.1756 10.5669L17.1343 9.98388L18.849 8.0905L17.4451 5.6595L14.9467 6.19575L14.4613 5.8685C14.2228 5.70737 13.9733 5.5631 13.7147 5.43675L13.1895 5.181L12.4043 2.75H12.403ZM11.0005 6.875C12.0945 6.875 13.1437 7.3096 13.9173 8.08318C14.6909 8.85677 15.1255 9.90598 15.1255 11C15.1255 12.094 14.6909 13.1432 13.9173 13.9168C13.1437 14.6904 12.0945 15.125 11.0005 15.125C9.90644 15.125 8.85723 14.6904 8.08364 13.9168C7.31005 13.1432 6.87545 12.094 6.87545 11C6.87545 9.90598 7.31005 8.85677 8.08364 8.08318C8.85723 7.3096 9.90644 6.875 11.0005 6.875ZM11.0005 8.25C10.2711 8.25 9.57164 8.53973 9.05591 9.05546C8.54018 9.57118 8.25045 10.2707 8.25045 11C8.25045 11.7293 8.54018 12.4288 9.05591 12.9445C9.57164 13.4603 10.2711 13.75 11.0005 13.75C11.7298 13.75 12.4293 13.4603 12.945 12.9445C13.4607 12.4288 13.7505 11.7293 13.7505 11C13.7505 10.2707 13.4607 9.57118 12.945 9.05546C12.4293 8.53973 11.7298 8.25 11.0005 8.25Z"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/core/components/icons/attachment/sheet-file-icon.tsx b/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
new file mode 100644
index 0000000..1881ccb
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import SheetFileIcon from "@/app/assets/attachment/excel-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function SheetIcon({ width, height }: ImageIconPros) {
+  return <img src={SheetFileIcon} width={width} height={height} alt="SheetFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/svg-file-icon.tsx b/apps/web/core/components/icons/attachment/svg-file-icon.tsx
new file mode 100644
index 0000000..e603afd
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/svg-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import SvgFileIcon from "@/app/assets/attachment/svg-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function SvgIcon({ width, height }: ImageIconPros) {
+  return <img src={SvgFileIcon} width={width} height={height} alt="SvgFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/tune-icon.tsx b/apps/web/core/components/icons/attachment/tune-icon.tsx
new file mode 100644
index 0000000..3574729
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/tune-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+import type { Props } from "../types";
+
+export function TuneIcon({ width = "24", height = "24", className }: Props) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.75 18.95C3.53333 18.95 3.35417 18.8792 3.2125 18.7375C3.07083 18.5958 3 18.4167 3 18.2C3 17.9833 3.07083 17.8042 3.2125 17.6625C3.35417 17.5208 3.53333 17.45 3.75 17.45H8.425C8.64167 17.45 8.82083 17.5208 8.9625 17.6625C9.10417 17.8042 9.175 17.9833 9.175 18.2C9.175 18.4167 9.10417 18.5958 8.9625 18.7375C8.82083 18.8792 8.64167 18.95 8.425 18.95H3.75ZM3.75 6.55C3.53333 6.55 3.35417 6.47917 3.2125 6.3375C3.07083 6.19583 3 6.01667 3 5.8C3 5.58333 3.07083 5.40417 3.2125 5.2625C3.35417 5.12083 3.53333 5.05 3.75 5.05H12.575C12.7917 5.05 12.9708 5.12083 13.1125 5.2625C13.2542 5.40417 13.325 5.58333 13.325 5.8C13.325 6.01667 13.2542 6.19583 13.1125 6.3375C12.9708 6.47917 12.7917 6.55 12.575 6.55H3.75ZM11.425 21C11.2083 21 11.0292 20.9292 10.8875 20.7875C10.7458 20.6458 10.675 20.4667 10.675 20.25V16.125C10.675 15.9083 10.7458 15.7292 10.8875 15.5875C11.0292 15.4458 11.2083 15.375 11.425 15.375C11.6417 15.375 11.8208 15.4458 11.9625 15.5875C12.1042 15.7292 12.175 15.9083 12.175 16.125V17.45H20.25C20.4667 17.45 20.6458 17.5208 20.7875 17.6625C20.9292 17.8042 21 17.9833 21 18.2C21 18.4167 20.9292 18.5958 20.7875 18.7375C20.6458 18.8792 20.4667 18.95 20.25 18.95H12.175V20.25C12.175 20.4667 12.1042 20.6458 11.9625 20.7875C11.8208 20.9292 11.6417 21 11.425 21ZM8.425 14.8C8.20833 14.8 8.02917 14.7292 7.8875 14.5875C7.74583 14.4458 7.675 14.2667 7.675 14.05V12.75H3.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H7.675V9.9C7.675 9.68333 7.74583 9.50417 7.8875 9.3625C8.02917 9.22083 8.20833 9.15 8.425 9.15C8.64167 9.15 8.82083 9.22083 8.9625 9.3625C9.10417 9.50417 9.175 9.68333 9.175 9.9V14.05C9.175 14.2667 9.10417 14.4458 8.9625 14.5875C8.82083 14.7292 8.64167 14.8 8.425 14.8ZM11.425 12.75C11.2083 12.75 11.0292 12.6792 10.8875 12.5375C10.7458 12.3958 10.675 12.2167 10.675 12C10.675 11.7833 10.7458 11.6042 10.8875 11.4625C11.0292 11.3208 11.2083 11.25 11.425 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H11.425ZM15.575 8.625C15.3583 8.625 15.1792 8.55417 15.0375 8.4125C14.8958 8.27083 14.825 8.09167 14.825 7.875V3.75C14.825 3.53333 14.8958 3.35417 15.0375 3.2125C15.1792 3.07083 15.3583 3 15.575 3C15.7917 3 15.9708 3.07083 16.1125 3.2125C16.2542 3.35417 16.325 3.53333 16.325 3.75V5.05H20.25C20.4667 5.05 20.6458 5.12083 20.7875 5.2625C20.9292 5.40417 21 5.58333 21 5.8C21 6.01667 20.9292 6.19583 20.7875 6.3375C20.6458 6.47917 20.4667 6.55 20.25 6.55H16.325V7.875C16.325 8.09167 16.2542 8.27083 16.1125 8.4125C15.9708 8.55417 15.7917 8.625 15.575 8.625Z"
+        fill="#212529"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/core/components/icons/attachment/txt-file-icon.tsx b/apps/web/core/components/icons/attachment/txt-file-icon.tsx
new file mode 100644
index 0000000..c7fb36d
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/txt-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import TxtFileIcon from "@/app/assets/attachment/txt-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function TxtIcon({ width, height }: ImageIconPros) {
+  return <img src={TxtFileIcon} width={width} height={height} alt="TxtFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/video-file-icon.tsx b/apps/web/core/components/icons/attachment/video-file-icon.tsx
new file mode 100644
index 0000000..e67ab6c
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/video-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import VideoFileIcon from "@/app/assets/attachment/video-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function VideoIcon({ width, height }: ImageIconPros) {
+  return <img src={VideoFileIcon} width={width} height={height} alt="VideoFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/zip-file-icon.tsx b/apps/web/core/components/icons/attachment/zip-file-icon.tsx
new file mode 100644
index 0000000..2d7a88a
--- /dev/null
+++ b/apps/web/core/components/icons/attachment/zip-file-icon.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// image
+import ZipFileIcon from "@/app/assets/attachment/zip-icon.png?url";
+// type
+import type { ImageIconPros } from "../types";
+
+export function ZipIcon({ width, height }: ImageIconPros) {
+  return <img src={ZipFileIcon} width={width} height={height} alt="ZipFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/index.ts b/apps/web/core/components/icons/index.ts
new file mode 100644
index 0000000..32ce7e5
--- /dev/null
+++ b/apps/web/core/components/icons/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./attachment";
diff --git a/apps/web/core/components/icons/locked-component.tsx b/apps/web/core/components/icons/locked-component.tsx
new file mode 100644
index 0000000..14f555c
--- /dev/null
+++ b/apps/web/core/components/icons/locked-component.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { LockOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+
+export function LockedComponent(props: { toolTipContent?: string }) {
+  const { toolTipContent } = props;
+  const lockedComponent = (
+    <div className="flex h-7 flex-shrink-0 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
+      <LockOutline className="h-3 w-3" />
+      <span>Locked</span>
+    </div>
+  );
+
+  return (
+    <>
+      {toolTipContent ? (
+        <Tooltip label={toolTipContent} layout="stacked">
+          {lockedComponent}
+        </Tooltip>
+      ) : (
+        <>{lockedComponent}</>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/icons/types.d.ts b/apps/web/core/components/icons/types.d.ts
new file mode 100644
index 0000000..4662001
--- /dev/null
+++ b/apps/web/core/components/icons/types.d.ts
@@ -0,0 +1,11 @@
+export type Props = {
+  className?: string;
+  width?: string | number;
+  height?: string | number;
+  color?: string;
+};
+
+export type ImageIconPros = {
+  width?: number;
+  height?: number;
+};
diff --git a/apps/web/core/components/inbox/content/inbox-issue-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
new file mode 100644
index 0000000..5531638
--- /dev/null
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -0,0 +1,472 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import {
+  ArrowNarrowRightOutline,
+  ChevronDownOutline,
+  ChevronUpOutline,
+  ClockOutline,
+  CloseCircleFilled,
+  CopyOutline,
+  DeleteOutline,
+  DuplicateOfOutline,
+  LinkOutline,
+  MoreHorizontalOutline,
+  NewTabOutline,
+  TickCircleFilled,
+} from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TNameDescriptionLoader } from "@plane/types";
+import { EInboxIssueStatus } from "@plane/types";
+import { ControlLink, CustomMenu, Row } from "@plane/ui";
+import { copyUrlToClipboard, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils";
+// components
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// store
+import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
+// local imports
+import { InboxIssueStatus } from "../inbox-issue-status";
+import { DeclineIssueModal } from "../modals/decline-issue-modal";
+import { DeleteInboxIssueModal } from "../modals/delete-issue-modal";
+import { SelectDuplicateInboxIssueModal } from "../modals/select-duplicate";
+import { InboxIssueSnoozeModal } from "../modals/snooze-issue-modal";
+import { InboxIssueActionsMobileHeader } from "./inbox-issue-mobile-header";
+
+type TInboxIssueActionsHeader = {
+  workspaceSlug: string;
+  projectId: string;
+  inboxIssue: IInboxIssueStore | undefined;
+  isSubmitting: TNameDescriptionLoader;
+  isMobileSidebar: boolean;
+  setIsMobileSidebar: (value: boolean) => void;
+  isNotificationEmbed: boolean;
+  embedRemoveCurrentNotification?: () => void;
+};
+
+export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader(props: TInboxIssueActionsHeader) {
+  const {
+    workspaceSlug,
+    projectId,
+    inboxIssue,
+    isSubmitting,
+    isMobileSidebar,
+    setIsMobileSidebar,
+    isNotificationEmbed = false,
+    embedRemoveCurrentNotification,
+  } = props;
+  // states
+  const [isSnoozeDateModalOpen, setIsSnoozeDateModalOpen] = useState(false);
+  const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
+  const [acceptIssueModal, setAcceptIssueModal] = useState(false);
+  const [declineIssueModal, setDeclineIssueModal] = useState(false);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  // store
+  const { currentTab, deleteInboxIssue, filteredInboxIssueIds } = useProjectInbox();
+  const { data: currentUser } = useUser();
+  const { allowPermissions } = useUserPermissions();
+  const { getPartialProjectById } = useProject();
+  const currentProjectDetails = getPartialProjectById(projectId);
+  const { t } = useTranslation();
+
+  const router = useAppRouter();
+  const { getProjectById } = useProject();
+
+  const issue = inboxIssue?.issue;
+  // derived values
+  const isAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+  const canMarkAsDuplicate = isAllowed && (inboxIssue?.status === 0 || inboxIssue?.status === -2);
+  const canMarkAsAccepted = isAllowed && (inboxIssue?.status === 0 || inboxIssue?.status === -2);
+  const canMarkAsDeclined = isAllowed && (inboxIssue?.status === 0 || inboxIssue?.status === -2);
+  // can delete only if admin or is creator of the issue
+  const canDelete =
+    allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId) ||
+    issue?.created_by === currentUser?.id;
+  const isProjectAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+  const isAcceptedOrDeclined = inboxIssue?.status ? [-1, 1, 2].includes(inboxIssue.status) : undefined;
+  // days left for snooze
+  const numberOfDaysLeft = findHowManyDaysLeft(inboxIssue?.snoozed_till);
+
+  const currentInboxIssueId = inboxIssue?.issue?.id;
+
+  const redirectIssue = (): string | undefined => {
+    let nextOrPreviousIssueId: string | undefined = undefined;
+    const currentIssueIndex = filteredInboxIssueIds.findIndex((id) => id === currentInboxIssueId);
+    if (filteredInboxIssueIds[currentIssueIndex + 1])
+      nextOrPreviousIssueId = filteredInboxIssueIds[currentIssueIndex + 1];
+    else if (filteredInboxIssueIds[currentIssueIndex - 1])
+      nextOrPreviousIssueId = filteredInboxIssueIds[currentIssueIndex - 1];
+    else nextOrPreviousIssueId = undefined;
+    return nextOrPreviousIssueId;
+  };
+
+  const handleRedirection = (nextOrPreviousIssueId: string | undefined) => {
+    if (!isNotificationEmbed) {
+      if (nextOrPreviousIssueId)
+        router.push(
+          `/${workspaceSlug}/projects/${projectId}/intake?currentTab=${currentTab}&inboxIssueId=${nextOrPreviousIssueId}`
+        );
+      else router.push(`/${workspaceSlug}/projects/${projectId}/intake?currentTab=${currentTab}`);
+    }
+  };
+
+  const handleInboxIssueAccept = async () => {
+    const nextOrPreviousIssueId = redirectIssue();
+    await inboxIssue?.updateInboxIssueStatus(EInboxIssueStatus.ACCEPTED);
+    setAcceptIssueModal(false);
+    handleRedirection(nextOrPreviousIssueId);
+  };
+
+  const handleInboxIssueDecline = async () => {
+    const nextOrPreviousIssueId = redirectIssue();
+    await inboxIssue?.updateInboxIssueStatus(EInboxIssueStatus.DECLINED);
+    setDeclineIssueModal(false);
+    handleRedirection(nextOrPreviousIssueId);
+  };
+
+  const handleInboxIssueSnooze = async (date: Date) => {
+    const nextOrPreviousIssueId = redirectIssue();
+    await inboxIssue?.updateInboxIssueSnoozeTill(date);
+    setIsSnoozeDateModalOpen(false);
+    handleRedirection(nextOrPreviousIssueId);
+  };
+
+  const handleInboxIssueDuplicate = async (issueId: string) => {
+    await inboxIssue?.updateInboxIssueDuplicateTo(issueId);
+  };
+
+  const handleInboxIssueDelete = async () => {
+    if (!inboxIssue || !currentInboxIssueId) return;
+    await deleteInboxIssue(workspaceSlug, projectId, currentInboxIssueId).then(() => {
+      if (!isNotificationEmbed) router.push(`/${workspaceSlug}/projects/${projectId}/intake`);
+    });
+  };
+
+  const handleIssueSnoozeAction = async () => {
+    if (inboxIssue?.snoozed_till && numberOfDaysLeft && numberOfDaysLeft > 0) {
+      const nextOrPreviousIssueId = redirectIssue();
+      await inboxIssue?.updateInboxIssueSnoozeTill(undefined);
+      handleRedirection(nextOrPreviousIssueId);
+    } else {
+      setIsSnoozeDateModalOpen(true);
+    }
+  };
+
+  const handleCopyIssueLink = (path: string) =>
+    copyUrlToClipboard(path).then(() =>
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("common.link_copied"),
+        message: t("common.copied_to_clipboard"),
+      })
+    );
+
+  const currentIssueIndex = filteredInboxIssueIds.findIndex((issueId) => issueId === currentInboxIssueId) ?? 0;
+
+  const handleInboxIssueNavigation = useCallback(
+    (direction: "next" | "prev") => {
+      if (!filteredInboxIssueIds || !currentInboxIssueId) return;
+      const activeElement = document.activeElement as HTMLElement;
+      if (activeElement && (activeElement.classList.contains("tiptap") || activeElement.id === "title-input")) return;
+      const nextIssueIndex =
+        direction === "next"
+          ? (currentIssueIndex + 1) % filteredInboxIssueIds.length
+          : (currentIssueIndex - 1 + filteredInboxIssueIds.length) % filteredInboxIssueIds.length;
+      const nextIssueId = filteredInboxIssueIds[nextIssueIndex];
+      if (!nextIssueId) return;
+      router.push(`/${workspaceSlug}/projects/${projectId}/intake?inboxIssueId=${nextIssueId}`);
+    },
+    [currentInboxIssueId, currentIssueIndex, filteredInboxIssueIds, projectId, router, workspaceSlug]
+  );
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "ArrowUp") {
+        handleInboxIssueNavigation("prev");
+      } else if (e.key === "ArrowDown") {
+        handleInboxIssueNavigation("next");
+      }
+    },
+    [handleInboxIssueNavigation]
+  );
+
+  const handleActionWithPermission = (isAdmin: boolean, action: () => void, errorMessage: string) => {
+    if (isAdmin) action();
+    else {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Permission denied",
+        message: errorMessage,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (isSubmitting === "submitting") return;
+    if (!isNotificationEmbed) document.addEventListener("keydown", onKeyDown);
+    return () => {
+      if (!isNotificationEmbed) document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown, isNotificationEmbed, isSubmitting]);
+
+  if (!inboxIssue) return null;
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issue?.project_id,
+    issueId: currentInboxIssueId,
+    projectIdentifier: currentProjectDetails?.identifier,
+    sequenceId: issue?.sequence_id,
+  });
+
+  return (
+    <>
+      <>
+        <SelectDuplicateInboxIssueModal
+          isOpen={selectDuplicateIssue}
+          onClose={() => setSelectDuplicateIssue(false)}
+          value={inboxIssue?.duplicate_to}
+          onSubmit={handleInboxIssueDuplicate}
+        />
+        <CreateUpdateIssueModal
+          data={inboxIssue?.issue}
+          isOpen={acceptIssueModal}
+          onClose={() => setAcceptIssueModal(false)}
+          beforeFormSubmit={handleInboxIssueAccept}
+          withDraftIssueWrapper={false}
+          fetchIssueDetails={false}
+          showActionItemsOnUpdate
+          modalTitle={t("inbox_issue.actions.move", {
+            value: `${currentProjectDetails?.identifier}-${issue?.sequence_id}`,
+          })}
+          primaryButtonText={{
+            default: t("add_to_project"),
+            loading: t("adding"),
+          }}
+        />
+        <DeclineIssueModal
+          data={inboxIssue?.issue || {}}
+          isOpen={declineIssueModal}
+          onClose={() => setDeclineIssueModal(false)}
+          onSubmit={handleInboxIssueDecline}
+        />
+        <DeleteInboxIssueModal
+          data={inboxIssue?.issue}
+          isOpen={deleteIssueModal}
+          onClose={() => setDeleteIssueModal(false)}
+          onSubmit={handleInboxIssueDelete}
+        />
+        <InboxIssueSnoozeModal
+          isOpen={isSnoozeDateModalOpen}
+          handleClose={() => setIsSnoozeDateModalOpen(false)}
+          value={inboxIssue?.snoozed_till}
+          onConfirm={handleInboxIssueSnooze}
+        />
+      </>
+
+      <Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 border-b border-subtle bg-surface-1 lg:flex">
+        <div className="flex items-center gap-4">
+          {isNotificationEmbed && (
+            <button onClick={embedRemoveCurrentNotification}>
+              <ArrowNarrowRightOutline className="h-4 w-4 text-tertiary hover:text-secondary" />
+            </button>
+          )}
+          {issue?.project_id && issue.sequence_id && (
+            <h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
+              {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
+            </h3>
+          )}
+          <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
+          <div className="flex w-full items-center justify-end">
+            <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {!isNotificationEmbed && (
+            <div className="flex items-center gap-x-2">
+              <IconButton
+                variant="secondary"
+                size="lg"
+                icon={ChevronUpOutline}
+                aria-label="Previous work item"
+                onClick={() => handleInboxIssueNavigation("prev")}
+              />
+              <IconButton
+                variant="secondary"
+                size="lg"
+                icon={ChevronDownOutline}
+                aria-label="Next work item"
+                onClick={() => handleInboxIssueNavigation("next")}
+              />
+            </div>
+          )}
+
+          <div className="flex flex-wrap items-center gap-2">
+            {canMarkAsAccepted && (
+              <Button
+                variant="secondary"
+                size="lg"
+                onClick={() =>
+                  handleActionWithPermission(
+                    isProjectAdmin,
+                    () => setAcceptIssueModal(true),
+                    t("inbox_issue.errors.accept_permission")
+                  )
+                }
+              >
+                <TickCircleFilled className="size-4 shrink-0 text-success-secondary" />
+                {t("inbox_issue.actions.accept")}
+              </Button>
+            )}
+
+            {canMarkAsDeclined && (
+              <Button
+                variant="secondary"
+                size="lg"
+                onClick={() =>
+                  handleActionWithPermission(
+                    isProjectAdmin,
+                    () => setDeclineIssueModal(true),
+                    t("inbox_issue.errors.decline_permission")
+                  )
+                }
+              >
+                <CloseCircleFilled className="size-4 shrink-0 text-danger-secondary" />
+                {t("inbox_issue.actions.decline")}
+              </Button>
+            )}
+
+            {isAcceptedOrDeclined ? (
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="secondary"
+                  size="lg"
+                  prependIcon={<LinkOutline className="h-2.5 w-2.5" />}
+                  onClick={() => handleCopyIssueLink(workItemLink)}
+                >
+                  {t("inbox_issue.actions.copy")}
+                </Button>
+                <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
+                  <Button variant="secondary" size="lg" prependIcon={<NewTabOutline className="h-2.5 w-2.5" />}>
+                    {t("inbox_issue.actions.open")}
+                  </Button>
+                </ControlLink>
+              </div>
+            ) : (
+              <>
+                {isAllowed && (
+                  <CustomMenu
+                    customButton={<MoreHorizontalOutline className="size-4" />}
+                    customButtonClassName={getIconButtonStyling("secondary", "lg")}
+                    placement="bottom-start"
+                  >
+                    {canMarkAsAccepted && (
+                      <CustomMenu.MenuItem
+                        onClick={() =>
+                          handleActionWithPermission(
+                            isProjectAdmin,
+                            handleIssueSnoozeAction,
+                            t("inbox_issue.errors.snooze_permission")
+                          )
+                        }
+                      >
+                        <div className="flex items-center gap-2">
+                          <ClockOutline width={14} height={14} />
+                          {inboxIssue?.snoozed_till && numberOfDaysLeft && numberOfDaysLeft > 0
+                            ? t("inbox_issue.actions.unsnooze")
+                            : t("inbox_issue.actions.snooze")}
+                        </div>
+                      </CustomMenu.MenuItem>
+                    )}
+                    {canMarkAsDuplicate && (
+                      <CustomMenu.MenuItem
+                        onClick={() =>
+                          handleActionWithPermission(
+                            isProjectAdmin,
+                            () => setSelectDuplicateIssue(true),
+                            "Only project admins can mark work item as duplicate"
+                          )
+                        }
+                      >
+                        <div className="flex items-center gap-2">
+                          <DuplicateOfOutline width={14} height={14} />
+                          {t("inbox_issue.actions.mark_as_duplicate")}
+                        </div>
+                      </CustomMenu.MenuItem>
+                    )}
+                    <CustomMenu.MenuItem onClick={() => handleCopyIssueLink(workItemLink)}>
+                      <div className="flex items-center gap-2">
+                        <CopyOutline width={14} height={14} />
+                        {t("inbox_issue.actions.copy")}
+                      </div>
+                    </CustomMenu.MenuItem>
+                    {canDelete && (
+                      <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
+                        <div className="flex items-center gap-2">
+                          <DeleteOutline width={14} height={14} />
+                          {t("inbox_issue.actions.delete")}
+                        </div>
+                      </CustomMenu.MenuItem>
+                    )}
+                  </CustomMenu>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </Row>
+
+      <div className="lg:hidden">
+        <InboxIssueActionsMobileHeader
+          inboxIssue={inboxIssue}
+          isSubmitting={isSubmitting}
+          handleCopyIssueLink={() => handleCopyIssueLink(workItemLink)}
+          setAcceptIssueModal={setAcceptIssueModal}
+          setDeclineIssueModal={setDeclineIssueModal}
+          handleIssueSnoozeAction={handleIssueSnoozeAction}
+          setSelectDuplicateIssue={setSelectDuplicateIssue}
+          setDeleteIssueModal={setDeleteIssueModal}
+          canMarkAsAccepted={canMarkAsAccepted}
+          canMarkAsDeclined={canMarkAsDeclined}
+          canMarkAsDuplicate={canMarkAsDuplicate}
+          canDelete={canDelete}
+          isAcceptedOrDeclined={isAcceptedOrDeclined}
+          handleInboxIssueNavigation={handleInboxIssueNavigation}
+          workspaceSlug={workspaceSlug}
+          isMobileSidebar={isMobileSidebar}
+          setIsMobileSidebar={setIsMobileSidebar}
+          isNotificationEmbed={isNotificationEmbed}
+          embedRemoveCurrentNotification={embedRemoveCurrentNotification}
+          isProjectAdmin={isProjectAdmin}
+          handleActionWithPermission={handleActionWithPermission}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
new file mode 100644
index 0000000..b1e191d
--- /dev/null
+++ b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -0,0 +1,239 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import {
+  ArrowNarrowRightOutline,
+  ChevronDownOutline,
+  ChevronUpOutline,
+  ClockOutline,
+  CloseCircleFilled,
+  DeleteOutline,
+  DuplicateOfOutline,
+  LeftSidePaneOutline,
+  LinkOutline,
+  MoreHorizontalOutline,
+  NewTabOutline,
+  TickCircleFilled,
+} from "@makeplane/propel/icons";
+import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
+import type { TNameDescriptionLoader } from "@plane/types";
+
+import { Header, CustomMenu, EHeaderVariant } from "@plane/ui";
+import { cn, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils";
+// components
+import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+// store types
+import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
+
+// local imports
+import { InboxIssueStatus } from "../inbox-issue-status";
+
+type Props = {
+  workspaceSlug: string;
+  inboxIssue: IInboxIssueStore | undefined;
+  isSubmitting: TNameDescriptionLoader;
+  handleInboxIssueNavigation: (direction: "next" | "prev") => void;
+  canMarkAsAccepted: boolean;
+  canMarkAsDeclined: boolean;
+  isAcceptedOrDeclined: boolean | undefined;
+  canMarkAsDuplicate: boolean;
+  canDelete: boolean;
+  setAcceptIssueModal: (value: boolean) => void;
+  setDeclineIssueModal: (value: boolean) => void;
+  setDeleteIssueModal: (value: boolean) => void;
+  handleIssueSnoozeAction: () => Promise<void>;
+  setSelectDuplicateIssue: (value: boolean) => void;
+  handleCopyIssueLink: () => void;
+  isMobileSidebar: boolean;
+  setIsMobileSidebar: (value: boolean) => void;
+  isNotificationEmbed: boolean;
+  embedRemoveCurrentNotification?: () => void;
+  isProjectAdmin: boolean;
+  handleActionWithPermission: (isAdmin: boolean, action: () => void, errorMessage: string) => void;
+};
+
+export const InboxIssueActionsMobileHeader = observer(function InboxIssueActionsMobileHeader(props: Props) {
+  const {
+    inboxIssue,
+    isSubmitting,
+    handleInboxIssueNavigation,
+    canMarkAsAccepted,
+    canMarkAsDeclined,
+    canDelete,
+    canMarkAsDuplicate,
+    isAcceptedOrDeclined,
+    workspaceSlug,
+    setAcceptIssueModal,
+    setDeclineIssueModal,
+    setDeleteIssueModal,
+    handleIssueSnoozeAction,
+    setSelectDuplicateIssue,
+    handleCopyIssueLink,
+    isMobileSidebar,
+    setIsMobileSidebar,
+    isNotificationEmbed,
+    embedRemoveCurrentNotification,
+    isProjectAdmin,
+    handleActionWithPermission,
+  } = props;
+  const router = useAppRouter();
+  const { getProjectIdentifierById } = useProject();
+
+  const issue = inboxIssue?.issue;
+  const currentInboxIssueId = issue?.id;
+  // days left for snooze
+  const numberOfDaysLeft = findHowManyDaysLeft(inboxIssue?.snoozed_till);
+
+  if (!issue || !inboxIssue) return null;
+
+  const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issue?.project_id,
+    issueId: currentInboxIssueId,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+  });
+
+  return (
+    <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
+      {isNotificationEmbed && (
+        <button onClick={embedRemoveCurrentNotification}>
+          <ArrowNarrowRightOutline className="mr-2 h-4 w-4 text-tertiary hover:text-secondary" />
+        </button>
+      )}
+      <LeftSidePaneOutline
+        onClick={() => setIsMobileSidebar(!isMobileSidebar)}
+        className={cn("my-auto mr-2 h-4 w-4 flex-shrink-0", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
+      />
+      <div className="z-[15] flex w-full items-center gap-2 bg-surface-1">
+        <div className="flex items-center gap-x-2">
+          <IconButton
+            variant="secondary"
+            size="lg"
+            icon={ChevronUpOutline}
+            aria-label="Previous work item"
+            onClick={() => handleInboxIssueNavigation("prev")}
+          />
+          <IconButton
+            variant="secondary"
+            size="lg"
+            icon={ChevronDownOutline}
+            aria-label="Next work item"
+            onClick={() => handleInboxIssueNavigation("next")}
+          />
+        </div>
+        <div className="flex items-center gap-4">
+          <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
+          <div className="flex w-full items-center justify-end">
+            <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
+          </div>
+        </div>
+        <div className="ml-auto">
+          <CustomMenu
+            customButton={<MoreHorizontalOutline className="size-4" />}
+            customButtonClassName={getIconButtonStyling("secondary", "lg")}
+            placement="bottom-start"
+          >
+            {isAcceptedOrDeclined && (
+              <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
+                <div className="flex items-center gap-2">
+                  <LinkOutline width={14} height={14} />
+                  Copy work item link
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+            {isAcceptedOrDeclined && (
+              <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
+                <div className="flex items-center gap-2">
+                  <NewTabOutline width={14} height={14} />
+                  Open work item
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+            {canMarkAsAccepted && !isAcceptedOrDeclined && (
+              <CustomMenu.MenuItem
+                onClick={() =>
+                  handleActionWithPermission(
+                    isProjectAdmin,
+                    handleIssueSnoozeAction,
+                    "Only project admins can snooze/Un-snooze work items"
+                  )
+                }
+              >
+                <div className="flex items-center gap-2">
+                  <ClockOutline width={14} height={14} />
+                  {inboxIssue?.snoozed_till && numberOfDaysLeft && numberOfDaysLeft > 0 ? "Un-snooze" : "Snooze"}
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+            {canMarkAsDuplicate && !isAcceptedOrDeclined && (
+              <CustomMenu.MenuItem
+                onClick={() =>
+                  handleActionWithPermission(
+                    isProjectAdmin,
+                    () => setSelectDuplicateIssue(true),
+                    "Only project admins can mark work items as duplicate"
+                  )
+                }
+              >
+                <div className="flex items-center gap-2">
+                  <DuplicateOfOutline width={14} height={14} />
+                  Mark as duplicate
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+            {canMarkAsAccepted && (
+              <CustomMenu.MenuItem
+                onClick={() =>
+                  handleActionWithPermission(
+                    isProjectAdmin,
+                    () => setAcceptIssueModal(true),
+                    "Only project admins can accept work items"
+                  )
+                }
+              >
+                <div className="flex items-center gap-2 text-success-secondary">
+                  <TickCircleFilled width={14} height={14} />
+                  Accept
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+            {canMarkAsDeclined && (
+              <CustomMenu.MenuItem
+                onClick={() =>
+                  handleActionWithPermission(
+                    isProjectAdmin,
+                    () => setDeclineIssueModal(true),
+                    "Only project admins can deny work items"
+                  )
+                }
+              >
+                <div className="flex items-center gap-2 text-danger-secondary">
+                  <CloseCircleFilled width={14} height={14} />
+                  Decline
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+            {canDelete && !isAcceptedOrDeclined && (
+              <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
+                <div className="flex items-center gap-2 text-danger-primary">
+                  <DeleteOutline height={14} width={14} />
+                  Delete
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+          </CustomMenu>
+        </div>
+      </div>
+    </Header>
+  );
+});
diff --git a/apps/web/core/components/inbox/content/index.ts b/apps/web/core/components/inbox/content/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/inbox/content/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/inbox/content/issue-properties.tsx b/apps/web/core/components/inbox/content/issue-properties.tsx
new file mode 100644
index 0000000..f8b0c36
--- /dev/null
+++ b/apps/web/core/components/inbox/content/issue-properties.tsx
@@ -0,0 +1,215 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import {
+  DueDateOutline,
+  DuplicateOfOutline,
+  LabelsOutline,
+  MembersOutline,
+  PriorityOutline,
+  StateOutline,
+} from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
+import { ControlLink } from "@plane/ui";
+import { getDate, renderFormattedPayloadDate, generateWorkItemLink } from "@plane/utils";
+// components
+import { DateDropdown } from "@/components/dropdowns/date";
+import { IntakeStateDropdown } from "@/components/dropdowns/intake-state/dropdown";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+import type { TIssueOperations } from "@/components/issues/issue-detail";
+import { IssueLabel } from "@/components/issues/issue-detail/label";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issue: Partial<TIssue>;
+  issueOperations: TIssueOperations;
+  isEditable: boolean;
+  duplicateIssueDetails: TInboxDuplicateIssueDetails | undefined;
+  isIntakeAccepted: boolean;
+};
+
+export const InboxIssueContentProperties = observer(function InboxIssueContentProperties(props: Props) {
+  const { workspaceSlug, projectId, issue, issueOperations, isEditable, duplicateIssueDetails, isIntakeAccepted } =
+    props;
+
+  const router = useAppRouter();
+  // store hooks
+  const { currentProjectDetails } = useProject();
+
+  const minDate = issue.start_date ? getDate(issue.start_date) : null;
+  minDate?.setDate(minDate.getDate());
+  if (!issue || !issue?.id) return <></>;
+
+  const duplicateWorkItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId,
+    issueId: duplicateIssueDetails?.id,
+    projectIdentifier: currentProjectDetails?.identifier,
+    sequenceId: duplicateIssueDetails?.sequence_id,
+  });
+  const DropdownComponent = isIntakeAccepted ? StateDropdown : IntakeStateDropdown;
+
+  return (
+    <div className="flex w-full flex-col divide-y-2 divide-subtle-1">
+      <div className="w-full overflow-y-auto">
+        <h5 className="mb-2 text-body-sm-medium">Properties</h5>
+        <div className={`divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
+          <div className="flex flex-col gap-3">
+            {/* Intake State */}
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+                <StateOutline className="h-4 w-4 flex-shrink-0" />
+                <span>State</span>
+              </div>
+              {issue?.state_id && (
+                <DropdownComponent
+                  value={issue?.state_id}
+                  onChange={() => {}}
+                  projectId={projectId?.toString() ?? ""}
+                  disabled
+                  buttonVariant="transparent-with-text"
+                  className="group w-3/5 flex-grow"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName="text-13"
+                  dropdownArrow
+                  dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+                />
+              )}
+            </div>
+            {/* Assignee */}
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+                <MembersOutline className="h-4 w-4 flex-shrink-0" />
+                <span>Assignees</span>
+              </div>
+              <MemberDropdown
+                value={issue?.assignee_ids ?? []}
+                onChange={(val) =>
+                  issue?.id && issueOperations.update(workspaceSlug, projectId, issue?.id, { assignee_ids: val })
+                }
+                disabled={!isEditable}
+                projectId={projectId?.toString() ?? ""}
+                placeholder="Add assignees"
+                multiple
+                buttonVariant={
+                  (issue?.assignee_ids || [])?.length > 0 ? "transparent-without-text" : "transparent-with-text"
+                }
+                className="group w-3/5 flex-grow"
+                buttonContainerClassName="w-full text-left"
+                buttonClassName={`text-13 justify-between ${
+                  (issue?.assignee_ids || [])?.length > 0 ? "" : "text-placeholder"
+                }`}
+                hideIcon={issue.assignee_ids?.length === 0}
+                dropdownArrow
+                dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+              />
+            </div>
+            {/* Priority */}
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+                <PriorityOutline className="h-4 w-4 flex-shrink-0" />
+                <span>Priority</span>
+              </div>
+              <PriorityDropdown
+                value={issue?.priority}
+                onChange={(val) =>
+                  issue?.id && issueOperations.update(workspaceSlug, projectId, issue?.id, { priority: val })
+                }
+                disabled={!isEditable}
+                buttonVariant="border-with-text"
+                className="w-3/5 flex-grow rounded-sm px-2 hover:bg-layer-1"
+                buttonContainerClassName="w-full text-left"
+                buttonClassName="w-min h-auto whitespace-nowrap"
+              />
+            </div>
+          </div>
+        </div>
+        <div className={`mt-3 divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
+          <div className="flex flex-col gap-3">
+            {/* Due Date */}
+            <div className="flex h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+                <DueDateOutline className="h-4 w-4 flex-shrink-0" />
+                <span>Due date</span>
+              </div>
+              <DateDropdown
+                placeholder="Add due date"
+                value={issue.target_date || null}
+                onChange={(val) =>
+                  issue?.id &&
+                  issueOperations.update(workspaceSlug, projectId, issue?.id, {
+                    target_date: val ? renderFormattedPayloadDate(val) : null,
+                  })
+                }
+                minDate={minDate ?? undefined}
+                disabled={!isEditable}
+                buttonVariant="transparent-with-text"
+                className="group w-3/5 flex-grow"
+                buttonContainerClassName="w-full text-left"
+                buttonClassName={`text-13 ${issue?.target_date ? "" : "text-placeholder"}`}
+                hideIcon
+                clearIconClassName="h-3 w-3 hidden group-hover:inline"
+              />
+            </div>
+            {/* Labels */}
+            <div className="flex min-h-8 items-center gap-2">
+              <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
+                <LabelsOutline className="h-4 w-4 flex-shrink-0" />
+                <span>Labels</span>
+              </div>
+              <div className="h-full min-h-8 w-3/5 flex-grow pt-1">
+                {issue?.id && (
+                  <IssueLabel
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    issueId={issue?.id}
+                    disabled={!isEditable}
+                    isInboxIssue
+                    onLabelUpdate={(val: string[]) =>
+                      issue?.id && issueOperations.update(workspaceSlug, projectId, issue?.id, { label_ids: val })
+                    }
+                  />
+                )}
+              </div>
+            </div>
+
+            {/* duplicate to*/}
+            {duplicateIssueDetails && (
+              <div className="flex min-h-8 gap-2">
+                <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-13 text-tertiary">
+                  <DuplicateOfOutline className="h-4 w-4 flex-shrink-0" />
+                  <span>Duplicate of</span>
+                </div>
+
+                <ControlLink
+                  href={duplicateWorkItemLink}
+                  onClick={() => {
+                    router.push(duplicateWorkItemLink);
+                  }}
+                  target="_self"
+                >
+                  <Tooltip label={duplicateIssueDetails?.name ?? ""} layout="stacked">
+                    <span className="flex cursor-pointer items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 pb-0.5 text-11 text-secondary">
+                      {`${currentProjectDetails?.identifier}-${duplicateIssueDetails?.sequence_id}`}
+                    </span>
+                  </Tooltip>
+                </ControlLink>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/content/issue-root.tsx b/apps/web/core/components/inbox/content/issue-root.tsx
new file mode 100644
index 0000000..64e1e1a
--- /dev/null
+++ b/apps/web/core/components/inbox/content/issue-root.tsx
@@ -0,0 +1,226 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useMemo, useRef } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue, TNameDescriptionLoader } from "@plane/types";
+import { EFileAssetType, EInboxIssueSource, EInboxIssueStatus } from "@plane/types";
+// components
+import { DescriptionVersionsRoot } from "@/components/core/description-versions";
+import { DescriptionInput } from "@/components/editor/rich-text/description-input";
+import { DescriptionInputLoader } from "@/components/editor/rich-text/description-input/loader";
+import { IssueAttachmentRoot } from "@/components/issues/attachment";
+import type { TIssueOperations } from "@/components/issues/issue-detail";
+import { IssueActivity } from "@/components/issues/issue-detail/issue-activity";
+import { IssueReaction } from "@/components/issues/issue-detail/reactions";
+import { IssueTitleInput } from "@/components/issues/title-input";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useUser } from "@/hooks/store/user";
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
+// services
+import { IntakeWorkItemVersionService } from "@/services/inbox";
+// stores
+import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
+// local imports
+import { InboxIssueContentProperties } from "./issue-properties";
+// services init
+const intakeWorkItemVersionService = new IntakeWorkItemVersionService();
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  inboxIssue: IInboxIssueStore;
+  isEditable: boolean;
+  isSubmitting: TNameDescriptionLoader;
+  setIsSubmitting: Dispatch<SetStateAction<TNameDescriptionLoader>>;
+};
+
+export const InboxIssueMainContent = observer(function InboxIssueMainContent(props: Props) {
+  const { workspaceSlug, projectId, inboxIssue, isEditable, isSubmitting, setIsSubmitting } = props;
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { getUserDetails } = useMember();
+  const { loader } = useProjectInbox();
+  const { removeIssue, archiveIssue } = useIssueDetail();
+  // reload confirmation
+  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      timer = setTimeout(() => setIsSubmitting("saved"), 3000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+    return () => clearTimeout(timer);
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
+
+  // derived values
+  const issue = inboxIssue.issue;
+  const isIntakeAccepted = inboxIssue.status === EInboxIssueStatus.ACCEPTED;
+
+  const issueOperations: TIssueOperations = useMemo(
+    () => ({
+      fetch: async (_workspaceSlug: string, _projectId: string, _issueId: string) => {
+        return;
+      },
+
+      remove: async (_workspaceSlug: string, _projectId: string, _issueId: string) => {
+        try {
+          await removeIssue(workspaceSlug, projectId, _issueId);
+          setToast({
+            title: "Success!",
+            type: TOAST_TYPE.SUCCESS,
+            message: "Work item deleted successfully",
+          });
+        } catch (error) {
+          console.log("Error in deleting work item:", error);
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: "Work item delete failed",
+          });
+        }
+      },
+      update: async (_workspaceSlug: string, _projectId: string, _issueId: string, data: Partial<TIssue>) => {
+        try {
+          await inboxIssue.updateIssue(data);
+        } catch (_error) {
+          setToast({
+            title: "Work item update failed",
+            type: TOAST_TYPE.ERROR,
+            message: "Work item update failed",
+          });
+        }
+      },
+      // oxlint-disable-next-line no-shadow
+      archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          await archiveIssue(workspaceSlug, projectId, issueId);
+        } catch (error) {
+          console.error("Error in archiving issue:", error);
+        }
+      },
+    }),
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+    [inboxIssue]
+  );
+
+  if (!issue) return <></>;
+
+  if (!issue?.project_id || !issue?.id) return <></>;
+
+  return (
+    <>
+      <div className="space-y-4 pb-4">
+        <IssueTitleInput
+          workspaceSlug={workspaceSlug}
+          projectId={issue.project_id}
+          issueId={issue.id}
+          isSubmitting={isSubmitting}
+          setIsSubmitting={(value) => setIsSubmitting(value)}
+          issueOperations={issueOperations}
+          disabled={!isEditable}
+          value={issue.name}
+        />
+
+        {loader === "issue-loading" || issue.description_html === undefined ? (
+          <DescriptionInputLoader />
+        ) : (
+          <DescriptionInput
+            issueSequenceId={issue.sequence_id}
+            containerClassName="-ml-3 border-none"
+            disabled={!isEditable}
+            editorRef={editorRef}
+            entityId={issue.id}
+            fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
+            initialValue={issue.description_html ?? "<p></p>"}
+            key={issue.id}
+            onSubmit={async (value, isMigrationUpdate) => {
+              if (!issue.id || !issue.project_id) return;
+              await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
+                description_html: value.description_html,
+                ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
+              });
+            }}
+            projectId={issue.project_id}
+            setIsSubmitting={(value) => setIsSubmitting(value)}
+            workspaceSlug={workspaceSlug}
+          />
+        )}
+
+        <div className="flex items-center justify-between gap-2">
+          {currentUser && (
+            <IssueReaction
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={issue.id}
+              currentUser={currentUser}
+            />
+          )}
+          {isEditable && (
+            <DescriptionVersionsRoot
+              className="flex-shrink-0"
+              entityInformation={{
+                createdAt: issue.created_at ? new Date(issue.created_at) : new Date(),
+                createdByDisplayName:
+                  inboxIssue.source === EInboxIssueSource.FORMS
+                    ? "Intake Form user"
+                    : (getUserDetails(issue.created_by ?? "")?.display_name ?? ""),
+                id: issue.id,
+                isRestoreDisabled: !isEditable,
+              }}
+              fetchHandlers={{
+                listDescriptionVersions: (issueId) =>
+                  intakeWorkItemVersionService.listDescriptionVersions(workspaceSlug, projectId, issueId),
+                retrieveDescriptionVersion: (issueId, versionId) =>
+                  intakeWorkItemVersionService.retrieveDescriptionVersion(workspaceSlug, projectId, issueId, versionId),
+              }}
+              handleRestore={(descriptionHTML) => editorRef.current?.setEditorValue(descriptionHTML, true)}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="py-4">
+        <IssueAttachmentRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issue.id}
+          disabled={!isEditable}
+        />
+      </div>
+
+      <div className="py-4">
+        <InboxIssueContentProperties
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issue={issue}
+          issueOperations={issueOperations}
+          isEditable={isEditable}
+          duplicateIssueDetails={inboxIssue?.duplicate_issue_detail}
+          isIntakeAccepted={isIntakeAccepted}
+        />
+      </div>
+
+      <div className="pt-4">
+        <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} isIntakeIssue />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/content/root.tsx b/apps/web/core/components/inbox/content/root.tsx
new file mode 100644
index 0000000..995d83b
--- /dev/null
+++ b/apps/web/core/components/inbox/content/root.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { TNameDescriptionLoader } from "@plane/types";
+// components
+import { ContentWrapper } from "@plane/ui";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// local imports
+import { InboxIssueActionsHeader } from "./inbox-issue-header";
+import { InboxIssueMainContent } from "./issue-root";
+
+type TInboxContentRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  inboxIssueId: string;
+  isMobileSidebar: boolean;
+  setIsMobileSidebar: (value: boolean) => void;
+  isNotificationEmbed?: boolean;
+  embedRemoveCurrentNotification?: () => void;
+};
+
+export const InboxContentRoot = observer(function InboxContentRoot(props: TInboxContentRoot) {
+  const {
+    workspaceSlug,
+    projectId,
+    inboxIssueId,
+    isMobileSidebar,
+    setIsMobileSidebar,
+    isNotificationEmbed = false,
+    embedRemoveCurrentNotification,
+  } = props;
+  /// router
+  const router = useAppRouter();
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<TNameDescriptionLoader>("saved");
+  // hooks
+  const { data: currentUser } = useUser();
+  const { currentTab, fetchInboxIssueById, getIssueInboxByIssueId, getIsIssueAvailable } = useProjectInbox();
+  const inboxIssue = getIssueInboxByIssueId(inboxIssueId);
+  const { allowPermissions, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+
+  // derived values
+  const isIssueAvailable = getIsIssueAvailable(inboxIssueId?.toString() || "");
+
+  useEffect(() => {
+    if (!isIssueAvailable && inboxIssueId && !isNotificationEmbed) {
+      router.replace(`/${workspaceSlug}/projects/${projectId}/intake?currentTab=${currentTab}`);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isIssueAvailable, isNotificationEmbed]);
+
+  useSWR(
+    workspaceSlug && projectId && inboxIssueId
+      ? `PROJECT_INBOX_ISSUE_DETAIL_${workspaceSlug}_${projectId}_${inboxIssueId}`
+      : null,
+    workspaceSlug && projectId && inboxIssueId
+      ? () => fetchInboxIssueById(workspaceSlug, projectId, inboxIssueId)
+      : null,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+    }
+  );
+
+  const isEditable =
+    allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId) ||
+    inboxIssue?.issue.created_by === currentUser?.id;
+
+  const isGuest = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId) === EUserPermissions.GUEST;
+  const isOwner = inboxIssue?.issue.created_by === currentUser?.id;
+  const readOnly = !isOwner && isGuest;
+
+  if (!inboxIssue) return <></>;
+
+  const isIssueDisabled = [-1, 1, 2].includes(inboxIssue.status);
+
+  return (
+    <>
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <div className="z-[11] min-h-[52px] flex-shrink-0">
+          <InboxIssueActionsHeader
+            setIsMobileSidebar={setIsMobileSidebar}
+            isMobileSidebar={isMobileSidebar}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            inboxIssue={inboxIssue}
+            isSubmitting={isSubmitting}
+            isNotificationEmbed={isNotificationEmbed || false}
+            embedRemoveCurrentNotification={embedRemoveCurrentNotification}
+          />
+        </div>
+        <ContentWrapper className="divide-y-2 divide-subtle-1">
+          <InboxIssueMainContent
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            inboxIssue={inboxIssue}
+            isEditable={isEditable && !isIssueDisabled && !readOnly}
+            isSubmitting={isSubmitting}
+            setIsSubmitting={setIsSubmitting}
+          />
+        </ContentWrapper>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
new file mode 100644
index 0000000..a19cc49
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { PAST_DURATION_FILTER_OPTIONS } from "@plane/constants";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TInboxIssueFilterDateKeys } from "@plane/types";
+import { renderFormattedDate } from "@plane/utils";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+
+type InboxIssueAppliedFiltersDate = {
+  filterKey: TInboxIssueFilterDateKeys;
+  label: string;
+};
+
+export const InboxIssueAppliedFiltersDate = observer(function InboxIssueAppliedFiltersDate(
+  props: InboxIssueAppliedFiltersDate
+) {
+  const { filterKey, label } = props;
+  // hooks
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  // derived values
+  const filteredValues = inboxFilters?.[filterKey] || [];
+  const currentOptionDetail = (date: string) => {
+    const currentDate = PAST_DURATION_FILTER_OPTIONS.find((d) => d.value === date);
+    if (currentDate) return currentDate;
+    const dateSplit = date.split(";");
+    return {
+      name: `${dateSplit[1].charAt(0).toUpperCase() + dateSplit[1].slice(1)} ${renderFormattedDate(dateSplit[0])}`,
+      value: date,
+    };
+  };
+
+  const handleFilterValue = (value: string): string[] =>
+    filteredValues?.includes(value) ? filteredValues.filter((v) => v !== value) : [...filteredValues, value];
+
+  const clearFilter = () => handleInboxIssueFilters(filterKey, undefined);
+
+  if (filteredValues.length === 0) return <></>;
+  return (
+    <div className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary">
+      <div className="text-11 text-secondary">{label}</div>
+      {filteredValues.map((value) => {
+        const optionDetail = currentOptionDetail(value);
+        if (!optionDetail) return <></>;
+        return (
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="truncate text-11">{optionDetail?.name}</div>
+            <div
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+              onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(optionDetail?.value))}
+            >
+              <CloseOutline className={`h-3 w-3`} />
+            </div>
+          </div>
+        );
+      })}
+
+      <div
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+        onClick={clearFilter}
+      >
+        <CloseOutline className={`h-3 w-3`} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
new file mode 100644
index 0000000..8f137df
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import { CloseOutline } from "@makeplane/propel/icons";
+import { useLabel } from "@/hooks/store/use-label";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+
+function LabelIcons({ color }: { color: string }) {
+  return <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />;
+}
+
+export const InboxIssueAppliedFiltersLabel = observer(function InboxIssueAppliedFiltersLabel() {
+  // hooks
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  const { getLabelById } = useLabel();
+  // derived values
+  const filteredValues = inboxFilters?.labels || [];
+  const currentOptionDetail = (labelId: string) => getLabelById(labelId) || undefined;
+
+  const handleFilterValue = (value: string): string[] =>
+    filteredValues?.includes(value) ? filteredValues.filter((v) => v !== value) : [...filteredValues, value];
+
+  const clearFilter = () => handleInboxIssueFilters("labels", undefined);
+
+  if (filteredValues.length === 0) return <></>;
+  return (
+    <div className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary">
+      <div className="text-11 text-secondary">Label</div>
+      {filteredValues.map((value) => {
+        const optionDetail = currentOptionDetail(value);
+        if (!optionDetail) return <></>;
+        return (
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
+              <LabelIcons color={optionDetail.color} />
+            </div>
+            <div className="truncate text-11">{optionDetail?.name}</div>
+            <div
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+              onClick={() => handleInboxIssueFilters("labels", handleFilterValue(value))}
+            >
+              <CloseOutline className={`h-3 w-3`} />
+            </div>
+          </div>
+        );
+      })}
+
+      <div
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+        onClick={clearFilter}
+      >
+        <CloseOutline className={`h-3 w-3`} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
new file mode 100644
index 0000000..c7d7554
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// plane types
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TInboxIssueFilterMemberKeys } from "@plane/types";
+// helpers
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+
+type InboxIssueAppliedFiltersMember = {
+  filterKey: TInboxIssueFilterMemberKeys;
+  label: string;
+};
+
+export const InboxIssueAppliedFiltersMember = observer(function InboxIssueAppliedFiltersMember(
+  props: InboxIssueAppliedFiltersMember
+) {
+  const { filterKey, label } = props;
+  // hooks
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  const { getUserDetails } = useMember();
+  // derived values
+  const filteredValues = inboxFilters?.[filterKey] || [];
+  const currentOptionDetail = (memberId: string) => getUserDetails(memberId) || undefined;
+
+  const handleFilterValue = (value: string): string[] =>
+    filteredValues?.includes(value) ? filteredValues.filter((v) => v !== value) : [...filteredValues, value];
+
+  const clearFilter = () => handleInboxIssueFilters(filterKey, undefined);
+
+  if (filteredValues.length === 0) return <></>;
+  return (
+    <div className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary">
+      <div className="text-11 text-secondary">{label}</div>
+      {filteredValues.map((value) => {
+        const optionDetail = currentOptionDetail(value);
+        if (!optionDetail) return <></>;
+        return (
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex flex-shrink-0 items-center justify-center overflow-hidden">
+              <Avatar
+                alt={optionDetail.display_name}
+                fallback={optionDetail.display_name?.[0]?.toUpperCase()}
+                src={getFileURL(optionDetail.avatar_url)}
+                size="2xs"
+              />
+            </div>
+            <div className="truncate text-11">{optionDetail?.display_name}</div>
+            <div
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+              onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(value))}
+            >
+              <CloseOutline className={`h-3 w-3`} />
+            </div>
+          </div>
+        );
+      })}
+
+      <div
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+        onClick={clearFilter}
+      >
+        <CloseOutline className={`h-3 w-3`} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
new file mode 100644
index 0000000..85069f8
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { PriorityIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TIssuePriorities } from "@plane/types";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+
+export const InboxIssueAppliedFiltersPriority = observer(function InboxIssueAppliedFiltersPriority() {
+  // hooks
+  const { t } = useTranslation();
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  // derived values
+  const filteredValues = inboxFilters?.priority || [];
+  const currentOptionDetail = (priority: TIssuePriorities) =>
+    ISSUE_PRIORITIES.find((p) => p.key === priority) || undefined;
+
+  const handleFilterValue = (value: TIssuePriorities): TIssuePriorities[] =>
+    filteredValues?.includes(value) ? filteredValues.filter((v) => v !== value) : [...filteredValues, value];
+
+  const clearFilter = () => handleInboxIssueFilters("priority", undefined);
+
+  if (filteredValues.length === 0) return <></>;
+  return (
+    <div className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary">
+      <div className="text-11 text-secondary">{t("common.priority")}</div>
+      {filteredValues.map((value) => {
+        const optionDetail = currentOptionDetail(value);
+        if (!optionDetail) return <></>;
+        return (
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
+              <PriorityIcon priority={optionDetail.key} className="h-3 w-3" />
+            </div>
+            <div className="truncate text-11">{optionDetail?.title}</div>
+            <div
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+              onClick={() => handleInboxIssueFilters("priority", handleFilterValue(optionDetail?.key))}
+            >
+              <CloseOutline className={`h-3 w-3`} />
+            </div>
+          </div>
+        );
+      })}
+
+      <div
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+        onClick={clearFilter}
+      >
+        <CloseOutline className={`h-3 w-3`} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
new file mode 100644
index 0000000..99283e6
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/root.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Header, EHeaderVariant } from "@plane/ui";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+// local imports
+import { InboxIssueAppliedFiltersDate } from "./date";
+import { InboxIssueAppliedFiltersLabel } from "./label";
+import { InboxIssueAppliedFiltersMember } from "./member";
+import { InboxIssueAppliedFiltersPriority } from "./priority";
+import { InboxIssueAppliedFiltersState } from "./state";
+import { InboxIssueAppliedFiltersStatus } from "./status";
+
+export const InboxIssueAppliedFilters = observer(function InboxIssueAppliedFilters() {
+  const { getAppliedFiltersCount } = useProjectInbox();
+
+  if (getAppliedFiltersCount === 0) return <></>;
+  return (
+    <Header variant={EHeaderVariant.TERNARY}>
+      {/* status */}
+      <InboxIssueAppliedFiltersStatus />
+      {/* state */}
+      <InboxIssueAppliedFiltersState />
+      {/* priority */}
+      <InboxIssueAppliedFiltersPriority />
+      {/* assignees */}
+      <InboxIssueAppliedFiltersMember filterKey="assignees" label="Assignees" />
+      {/* created_by */}
+      <InboxIssueAppliedFiltersMember filterKey="created_by" label="Created By" />
+      {/* label */}
+      <InboxIssueAppliedFiltersLabel />
+      {/* created_at */}
+      <InboxIssueAppliedFiltersDate filterKey="created_at" label="Created date" />
+      {/* updated_at */}
+      <InboxIssueAppliedFiltersDate filterKey="updated_at" label="Updated date" />
+    </Header>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
new file mode 100644
index 0000000..26a416a
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { EIconSize } from "@plane/constants";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+export const InboxIssueAppliedFiltersState = observer(function InboxIssueAppliedFiltersState() {
+  // hooks
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  const { getStateById } = useProjectState();
+  // derived values
+  const filteredValues = inboxFilters?.state || [];
+  const currentOptionDetail = (stateId: string) => getStateById(stateId) || undefined;
+
+  const handleFilterValue = (value: string): string[] =>
+    filteredValues?.includes(value) ? filteredValues.filter((v) => v !== value) : [...filteredValues, value];
+
+  const clearFilter = () => handleInboxIssueFilters("state", undefined);
+
+  if (filteredValues.length === 0) return <></>;
+  return (
+    <div className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary">
+      <div className="text-11 text-secondary">State</div>
+      {filteredValues.map((value) => {
+        const optionDetail = currentOptionDetail(value);
+        if (!optionDetail) return <></>;
+        return (
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
+              <StateGroupIcon color={optionDetail.color} stateGroup={optionDetail.group} size={EIconSize.SM} />
+            </div>
+            <div className="truncate text-11">{optionDetail?.name}</div>
+            <div
+              className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+              onClick={() => handleInboxIssueFilters("state", handleFilterValue(optionDetail?.id))}
+            >
+              <CloseOutline className={`h-3 w-3`} />
+            </div>
+          </div>
+        );
+      })}
+
+      <div
+        className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+        onClick={clearFilter}
+      >
+        <CloseOutline className={`h-3 w-3`} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
new file mode 100644
index 0000000..f78a13b
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { INBOX_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TInboxIssueStatus } from "@plane/types";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { InboxStatusIcon } from "../../inbox-status-icon";
+
+export const InboxIssueAppliedFiltersStatus = observer(function InboxIssueAppliedFiltersStatus() {
+  // hooks
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  const { t } = useTranslation();
+  // derived values
+  const filteredValues = inboxFilters?.status || [];
+  const currentOptionDetail = (status: TInboxIssueStatus) => INBOX_STATUS.find((s) => s.status === status) || undefined;
+
+  const handleFilterValue = (value: TInboxIssueStatus): TInboxIssueStatus[] =>
+    filteredValues?.includes(value) ? filteredValues.filter((v) => v !== value) : [...filteredValues, value];
+
+  if (filteredValues.length === 0) return <></>;
+  return (
+    <div className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary">
+      <div className="text-11 text-secondary">Status</div>
+      {filteredValues.map((value) => {
+        const optionDetail = currentOptionDetail(value);
+        if (!optionDetail) return <></>;
+        return (
+          <div key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <div className="relative flex h-3 w-3 flex-shrink-0 items-center justify-center overflow-hidden">
+              <InboxStatusIcon type={optionDetail?.status} />
+            </div>
+            <div className="truncate text-11">{t(optionDetail?.i18n_title)}</div>
+            {handleFilterValue(optionDetail?.status).length >= 1 && (
+              <div
+                className="relative flex h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden text-tertiary transition-all hover:text-secondary"
+                onClick={() => handleInboxIssueFilters("status", handleFilterValue(optionDetail?.status))}
+              >
+                <CloseOutline className={`h-3 w-3`} />
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/date.tsx b/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
new file mode 100644
index 0000000..51fbbe6
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { concat, uniq } from "lodash-es";
+import { observer } from "mobx-react";
+import { PAST_DURATION_FILTER_OPTIONS } from "@plane/constants";
+import type { TInboxIssueFilterDateKeys } from "@plane/types";
+// components
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// constants
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+
+type Props = {
+  filterKey: TInboxIssueFilterDateKeys;
+  label?: string;
+  searchQuery: string;
+};
+
+const isDate = (date: string) => {
+  const datePattern = /^\d{4}-\d{2}-\d{2}$/;
+  return datePattern.test(date);
+};
+
+export const FilterDate = observer(function FilterDate(props: Props) {
+  const { filterKey, label, searchQuery } = props;
+  // hooks
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  // state
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+  // derived values
+  const filterValue: string[] = inboxFilters?.[filterKey] || [];
+  const appliedFiltersCount = filterValue?.length ?? 0;
+  const filteredOptions = PAST_DURATION_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleFilterValue = (value: string): string[] => (filterValue?.includes(value) ? [] : uniq(concat(value)));
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = filterValue?.filter((f) => isDate(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = filterValue?.filter((f) => !isDate(f.split(";")[0])) || [];
+      handleInboxIssueFilters(filterKey, updateAppliedFilters);
+    } else {
+      setIsDateFilterModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleInboxIssueFilters(filterKey, val)}
+          title="Created date"
+        />
+      )}
+      <FilterHeader
+        title={`${label || "Created date"}${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={filterValue?.includes(option.value) ? true : false}
+                  onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(option.value))}
+                  title={option.name}
+                  multiple={false}
+                />
+              ))}
+              <FilterOption
+                isChecked={isCustomDateSelected()}
+                onClick={handleCustomDate}
+                title="Custom"
+                multiple={false}
+              />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx b/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
new file mode 100644
index 0000000..18c3787
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { FilterDate } from "./date";
+import { FilterLabels } from "./labels";
+import { FilterMember } from "./members";
+import { FilterPriority } from "./priority";
+import { FilterStatus } from "./status";
+
+export const InboxIssueFilterSelection = observer(function InboxIssueFilterSelection() {
+  // hooks
+  const { isMobile } = usePlatformOS();
+  const {
+    project: { projectMemberIds },
+  } = useMember();
+  const { projectLabels } = useLabel();
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchOutline className="text-placeholder" width={12} height={12} />
+          <input
+            type="text"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus={!isMobile}
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <CloseOutline className="text-tertiary" height={12} width={12} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
+        {/* status */}
+        <div className="py-2">
+          <FilterStatus searchQuery={filtersSearchQuery} />
+        </div>
+        {/* Priority */}
+        <div className="py-2">
+          <FilterPriority searchQuery={filtersSearchQuery} />
+        </div>
+        {/* assignees */}
+        <div className="py-2">
+          <FilterMember
+            filterKey="assignees"
+            label="Assignees"
+            searchQuery={filtersSearchQuery}
+            memberIds={projectMemberIds ?? []}
+          />
+        </div>
+        {/* Created By */}
+        <div className="py-2">
+          <FilterMember
+            filterKey="created_by"
+            label="Created By"
+            searchQuery={filtersSearchQuery}
+            memberIds={projectMemberIds ?? []}
+          />
+        </div>
+        {/* Labels */}
+        <div className="py-2">
+          <FilterLabels searchQuery={filtersSearchQuery} labels={projectLabels ?? []} />
+        </div>
+        {/* Created at */}
+        <div className="py-2">
+          <FilterDate filterKey="created_at" label="Created date" searchQuery={filtersSearchQuery} />
+        </div>
+        {/* Updated at */}
+        <div className="py-2">
+          <FilterDate filterKey="updated_at" label="Last updated date" searchQuery={filtersSearchQuery} />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
new file mode 100644
index 0000000..23e338b
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import type { IIssueLabel } from "@plane/types";
+import { Loader } from "@plane/ui";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+
+function LabelIcons({ color }: { color: string }) {
+  return <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />;
+}
+
+type Props = {
+  labels: IIssueLabel[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLabels = observer(function FilterLabels(props: Props) {
+  const { labels, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+
+  const filterValue = inboxFilters?.labels || [];
+
+  const appliedFiltersCount = filterValue?.length ?? 0;
+
+  const filteredOptions = labels?.filter((label) => label.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  const handleFilterValue = (value: string): string[] =>
+    filterValue?.includes(value) ? filterValue.filter((v) => v !== value) : [...filterValue, value];
+
+  return (
+    <>
+      <FilterHeader
+        title={`Label${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((label) => (
+                  <FilterOption
+                    key={label?.id}
+                    isChecked={filterValue?.includes(label?.id) ? true : false}
+                    onClick={() => handleInboxIssueFilters("labels", handleFilterValue(label.id))}
+                    icon={<LabelIcons color={label.color} />}
+                    title={label.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
new file mode 100644
index 0000000..497a49f
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane types
+import { Avatar } from "@makeplane/propel/components/avatar";
+import type { TInboxIssueFilterMemberKeys } from "@plane/types";
+// plane ui
+import { Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  filterKey: TInboxIssueFilterMemberKeys;
+  label?: string;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMember = observer(function FilterMember(props: Props) {
+  const { filterKey, label = "Members", memberIds, searchQuery } = props;
+  // hooks
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // derived values
+  const filterValue = inboxFilters?.[filterKey] || [];
+  const appliedFiltersCount = filterValue?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !filterValue.includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  const handleFilterValue = (value: string): string[] =>
+    filterValue?.includes(value) ? filterValue.filter((v) => v !== value) : [...filterValue, value];
+
+  return (
+    <>
+      <FilterHeader
+        title={`${label} ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`members-${member.id}`}
+                      isChecked={filterValue?.includes(member.id) ? true : false}
+                      onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(member.id))}
+                      icon={
+                        <Avatar
+                          alt={member.display_name}
+                          fallback={member.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(member.avatar_url)}
+                          size="xs"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx b/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
new file mode 100644
index 0000000..5272e36
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { PriorityIcon } from "@plane/propel/icons";
+import type { TIssuePriorities } from "@plane/types";
+// plane constants
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+
+type Props = {
+  searchQuery: string;
+};
+
+export const FilterPriority = observer(function FilterPriority(props: Props) {
+  const { searchQuery } = props;
+  // hooks
+  const { t } = useTranslation();
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // derived values
+  const filterValue = inboxFilters?.priority || [];
+  const appliedFiltersCount = filterValue?.length ?? 0;
+  const filteredOptions = ISSUE_PRIORITIES.filter((p) => p.key.includes(searchQuery.toLowerCase()));
+
+  const handleFilterValue = (value: TIssuePriorities): TIssuePriorities[] =>
+    filterValue?.includes(value) ? filterValue.filter((v) => v !== value) : [...filterValue, value];
+
+  return (
+    <>
+      <FilterHeader
+        title={`${t("common.priority")}${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((priority) => (
+              <FilterOption
+                key={priority.key}
+                isChecked={filterValue?.includes(priority.key) ? true : false}
+                onClick={() => handleInboxIssueFilters("priority", handleFilterValue(priority.key))}
+                icon={<PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />}
+                title={priority.title}
+              />
+            ))
+          ) : (
+            <p className="text-11 text-placeholder italic">{t("common.search.no_matches_found")}</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
new file mode 100644
index 0000000..4a4af02
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { EIconSize } from "@plane/constants";
+import { StateGroupIcon } from "@plane/propel/icons";
+import type { IState } from "@plane/types";
+import { Loader } from "@plane/ui";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+
+type Props = {
+  states: IState[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterState = observer(function FilterState(props: Props) {
+  const { states, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+
+  const filterValue = inboxFilters?.state || [];
+
+  const appliedFiltersCount = filterValue?.length ?? 0;
+
+  const filteredOptions = states?.filter((state) => state.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  const handleFilterValue = (value: string): string[] =>
+    filterValue?.includes(value) ? filterValue.filter((v) => v !== value) : [...filterValue, value];
+
+  return (
+    <>
+      <FilterHeader
+        title={`State${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((state) => (
+                  <FilterOption
+                    key={state?.id}
+                    isChecked={filterValue?.includes(state?.id) ? true : false}
+                    onClick={() => handleInboxIssueFilters("state", handleFilterValue(state.id))}
+                    icon={
+                      <StateGroupIcon
+                        color={state.color}
+                        stateGroup={state.group}
+                        size={EIconSize.SM}
+                        percentage={state?.order}
+                      />
+                    }
+                    title={state.name}
+                  />
+                ))}
+                {filteredOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/status.tsx b/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
new file mode 100644
index 0000000..e08a713
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// types
+import { INBOX_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TInboxIssueStatus } from "@plane/types";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// constants
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { InboxStatusIcon } from "../../inbox-status-icon";
+
+type Props = {
+  searchQuery: string;
+};
+
+export const FilterStatus = observer(function FilterStatus(props: Props) {
+  const { searchQuery } = props;
+  // hooks
+  const { currentTab, inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  const { t } = useTranslation();
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // derived values
+  const filterValue = inboxFilters?.status || [];
+  const appliedFiltersCount = filterValue?.length ?? 0;
+  const filteredOptions = INBOX_STATUS.filter(
+    (s) =>
+      ((currentTab === "open" && [-2, 0].includes(s.status)) ||
+        (currentTab === "closed" && [-1, 1, 2].includes(s.status))) &&
+      s.key.includes(searchQuery.toLowerCase())
+  );
+
+  const handleFilterValue = (value: TInboxIssueStatus): TInboxIssueStatus[] =>
+    filterValue?.includes(value) ? filterValue.filter((v) => v !== value) : [...filterValue, value];
+
+  const handleStatusFilterSelect = (status: TInboxIssueStatus) => {
+    const selectedStatus = handleFilterValue(status);
+    if (selectedStatus.length >= 1) handleInboxIssueFilters("status", selectedStatus);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Work item Status ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((status) => (
+              <FilterOption
+                key={status.key}
+                isChecked={filterValue?.includes(status.status) ? true : false}
+                onClick={() => handleStatusFilterSelect(status.status)}
+                icon={<InboxStatusIcon type={status.status} className={`h-3.5 w-3.5`} />}
+                title={t(status.i18n_title)}
+              />
+            ))
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-filter/index.ts b/apps/web/core/components/inbox/inbox-filter/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/inbox/inbox-filter/root.tsx b/apps/web/core/components/inbox/inbox-filter/root.tsx
new file mode 100644
index 0000000..5e830e3
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/root.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ChevronDownOutline, FilterOutline } from "@makeplane/propel/icons";
+import { getButtonStyling } from "@plane/propel/button";
+// plane imports
+import { cn } from "@plane/utils";
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+// hooks
+import useSize from "@/hooks/use-window-size";
+// local imports
+import { InboxIssueFilterSelection } from "./filters/filter-selection";
+import { InboxIssueOrderByDropdown } from "./sorting/order-by";
+
+const smallButton = <FilterOutline className="size-3" />;
+
+const largeButton = (
+  <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
+    <FilterOutline className="size-3" />
+    <span>Filters</span>
+    <ChevronDownOutline className="size-3" />
+  </div>
+);
+export function FiltersRoot() {
+  const windowSize = useSize();
+
+  return (
+    <div className="relative flex items-center gap-2">
+      <div>
+        <FiltersDropdown menuButton={windowSize[0] > 1280 ? largeButton : smallButton} title="" placement="bottom-end">
+          <InboxIssueFilterSelection />
+        </FiltersDropdown>
+      </div>
+      <div>
+        <InboxIssueOrderByDropdown />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
new file mode 100644
index 0000000..da18a8b
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { ChevronDownOutline, SortAscendingOutline, SortDescendingOutline, TickOutline } from "@makeplane/propel/icons";
+import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { getButtonStyling } from "@plane/propel/button";
+import type { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+// constants
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import useSize from "@/hooks/use-window-size";
+
+export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDropdown() {
+  // hooks
+  const { t } = useTranslation();
+  const windowSize = useSize();
+  const { inboxSorting, handleInboxIssueSorting } = useProjectInbox();
+  const orderByDetails =
+    INBOX_ISSUE_ORDER_BY_OPTIONS.find((option) => inboxSorting?.order_by?.includes(option.key)) || undefined;
+  const smallButton =
+    inboxSorting?.sort_by === "asc" ? (
+      <SortAscendingOutline className="size-3" />
+    ) : (
+      <SortDescendingOutline className="size-3" />
+    );
+  const largeButton = (
+    <div className={cn(getButtonStyling("secondary", "base"), "px-2 text-tertiary")}>
+      {inboxSorting?.sort_by === "asc" ? (
+        <SortAscendingOutline className="size-3" />
+      ) : (
+        <SortDescendingOutline className="size-3" />
+      )}
+      {t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
+      <ChevronDownOutline className="size-3" />
+    </div>
+  );
+  return (
+    <CustomMenu
+      customButton={windowSize[0] > 1280 ? largeButton : smallButton}
+      placement="bottom-end"
+      maxHeight="lg"
+      closeOnSelect
+    >
+      {INBOX_ISSUE_ORDER_BY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => handleInboxIssueSorting("order_by", option.key as TInboxIssueSortingOrderByKeys)}
+        >
+          {t(option.i18n_label)}
+          {inboxSorting?.order_by?.includes(option.key) && <TickOutline className="size-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+      <hr className="my-2 border-subtle" />
+      {INBOX_ISSUE_SORT_BY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => handleInboxIssueSorting("sort_by", option.key as TInboxIssueSortingSortByKeys)}
+        >
+          {t(option.i18n_label)}
+          {inboxSorting?.sort_by?.includes(option.key) && <TickOutline className="size-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-issue-status.tsx b/apps/web/core/components/inbox/inbox-issue-status.tsx
new file mode 100644
index 0000000..972d83e
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-issue-status.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// constants
+// helpers
+import { INBOX_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { cn, findHowManyDaysLeft } from "@plane/utils";
+// store
+import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
+import { ICON_PROPERTIES, InboxStatusIcon } from "./inbox-status-icon";
+
+type Props = {
+  inboxIssue: IInboxIssueStore;
+  iconSize?: number;
+  showDescription?: boolean;
+};
+
+export const InboxIssueStatus = observer(function InboxIssueStatus(props: Props) {
+  const { inboxIssue, iconSize = 16, showDescription = false } = props;
+  //hooks
+  const { t } = useTranslation();
+  // derived values
+  const inboxIssueStatusDetail = INBOX_STATUS.find((s) => s.status === inboxIssue.status);
+
+  const isSnoozedDatePassed = inboxIssue.status === 0 && new Date(inboxIssue.snoozed_till ?? "") < new Date();
+  if (!inboxIssueStatusDetail || isSnoozedDatePassed) return <></>;
+
+  const description = t(inboxIssueStatusDetail.i18n_description(), {
+    days: findHowManyDaysLeft(new Date(inboxIssue.snoozed_till ?? "")),
+  });
+  const statusIcon = ICON_PROPERTIES[inboxIssue?.status];
+
+  return (
+    <div
+      className={cn(
+        `relative flex flex-col gap-1 rounded-sm p-1.5 py-0.5 ${statusIcon.textColor(
+          isSnoozedDatePassed
+        )} ${statusIcon.bgColor(isSnoozedDatePassed)}`
+      )}
+    >
+      <div className={`flex items-center gap-1`}>
+        <InboxStatusIcon type={inboxIssue?.status} size={iconSize} className="flex-shrink-0" renderColor={false} />
+        <div className="text-11 font-medium whitespace-nowrap">
+          {inboxIssue?.status === 0 && inboxIssue?.snoozed_till ? description : t(inboxIssueStatusDetail.i18n_title)}
+        </div>
+      </div>
+      {showDescription && <div className="text-13 whitespace-nowrap">{description}</div>}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/inbox-status-icon.tsx b/apps/web/core/components/inbox/inbox-status-icon.tsx
new file mode 100644
index 0000000..143bef6
--- /dev/null
+++ b/apps/web/core/components/inbox/inbox-status-icon.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  ClockOutline,
+  CloseCircleOutline,
+  CopyOutline,
+  TickCircleOutline,
+  WarningTriangleOutline,
+} from "@makeplane/propel/icons";
+import type { TInboxIssueStatus } from "@plane/types";
+import { EInboxIssueStatus } from "@plane/types";
+import { cn } from "@plane/utils";
+
+export const ICON_PROPERTIES = {
+  [EInboxIssueStatus.PENDING]: {
+    icon: WarningTriangleOutline,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-warning-primary"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-warning-subtle"),
+  },
+  [EInboxIssueStatus.DECLINED]: {
+    icon: CloseCircleOutline,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-danger-primary"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-danger-subtle"),
+  },
+  [EInboxIssueStatus.SNOOZED]: {
+    icon: ClockOutline,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-danger-primary" : "text-placeholder"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-danger-subtle" : "bg-layer-3"),
+  },
+  [EInboxIssueStatus.ACCEPTED]: {
+    icon: TickCircleOutline,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-success-primary"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-success-subtle"),
+  },
+  [EInboxIssueStatus.DUPLICATE]: {
+    icon: CopyOutline,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-secondary"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-layer-3"),
+  },
+};
+export function InboxStatusIcon({
+  type,
+  size,
+  className,
+  renderColor = true,
+}: {
+  type: TInboxIssueStatus;
+  size?: number;
+  className?: string;
+  renderColor?: boolean;
+}) {
+  if (type === undefined) return null;
+  const Icon = ICON_PROPERTIES[type];
+  if (!Icon) return null;
+  return (
+    <Icon.icon
+      width={size}
+      height={size}
+      className={cn(`h-3 w-3 ${renderColor && Icon?.textColor(false)}`, className)}
+    />
+  );
+}
diff --git a/apps/web/core/components/inbox/index.ts b/apps/web/core/components/inbox/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/inbox/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/inbox/modals/create-modal/create-root.tsx b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
new file mode 100644
index 0000000..8c130a5
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/create-modal/create-root.tsx
@@ -0,0 +1,255 @@
+// oxlint-disable jsx_a11y/prefer-tag-over-role
+// oxlint-disable jsx_a11y/click-events-have-key-events
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FormEvent } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import type { EditorRefApi } from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue } from "@plane/types";
+import { Switch } from "@makeplane/propel/components/switch";
+import { renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useAppRouter } from "@/hooks/use-app-router";
+import useKeypress from "@/hooks/use-keypress";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { FileService } from "@/services/file.service";
+// local imports
+import { InboxIssueDescription } from "./issue-description";
+import { InboxIssueProperties } from "./issue-properties";
+import { InboxIssueTitle } from "./issue-title";
+
+const fileService = new FileService();
+
+type TInboxIssueCreateRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  handleModalClose: () => void;
+  isDuplicateModalOpen: boolean;
+  handleDuplicateIssueModal: (value: boolean) => void;
+};
+
+export const defaultIssueData: Partial<TIssue> = {
+  id: undefined,
+  name: "",
+  description_html: "",
+  priority: "none",
+  state_id: "",
+  label_ids: [],
+  assignee_ids: [],
+  start_date: renderFormattedPayloadDate(new Date()),
+  target_date: "",
+};
+
+export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props: TInboxIssueCreateRoot) {
+  const { workspaceSlug, projectId, handleModalClose } = props;
+  // states
+  const [uploadedAssetIds, setUploadedAssetIds] = useState<string[]>([]);
+  // router
+  const router = useAppRouter();
+  // refs
+  const descriptionEditorRef = useRef<EditorRefApi>(null);
+  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
+  const formRef = useRef<HTMLFormElement | null>(null);
+  const modalContainerRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { createInboxIssue } = useProjectInbox();
+  const { getWorkspaceBySlug } = useWorkspace();
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+  // states
+  const [createMore, setCreateMore] = useState<boolean>(false);
+  const [formSubmitting, setFormSubmitting] = useState(false);
+  const [formData, setFormData] = useState<Partial<TIssue>>(defaultIssueData);
+  const handleFormData = useCallback(
+    <T extends keyof Partial<TIssue>>(issueKey: T, issueValue: Partial<TIssue>[T]) => {
+      setFormData({
+        ...formData,
+        [issueKey]: issueValue,
+      });
+    },
+    [formData]
+  );
+
+  const { getIndex } = getTabIndex(ETabIndices.INTAKE_ISSUE_FORM, isMobile);
+
+  const handleEscKeyDown = (event: KeyboardEvent) => {
+    if (descriptionEditorRef.current?.isEditorReadyToDiscard()) {
+      handleModalClose();
+    } else {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Editor is still processing changes. Please wait before proceeding.",
+      });
+      event.preventDefault(); // Prevent default action if editor is not ready to discard
+    }
+  };
+
+  useKeypress("Escape", handleEscKeyDown);
+
+  useEffect(() => {
+    const formElement = formRef?.current;
+    const modalElement = modalContainerRef?.current;
+
+    if (!formElement || !modalElement) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      modalElement.style.maxHeight = `${formElement?.offsetHeight}px`;
+    });
+
+    resizeObserver.observe(formElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [formRef, modalContainerRef]);
+
+  const handleFormSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!descriptionEditorRef.current?.isEditorReadyToDiscard()) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Editor is still processing changes. Please wait before proceeding.",
+      });
+      return;
+    }
+
+    const payload: Partial<TIssue> = {
+      name: formData.name || "",
+      description_html: formData.description_html || "<p></p>",
+      priority: formData.priority || "none",
+      state_id: formData.state_id || "",
+      label_ids: formData.label_ids || [],
+      assignee_ids: formData.assignee_ids || [],
+      target_date: formData.target_date || null,
+    };
+    setFormSubmitting(true);
+
+    await createInboxIssue(workspaceSlug, projectId, payload)
+      // oxlint-disable-next-line promise/always-return
+      .then(async (res) => {
+        if (uploadedAssetIds.length > 0) {
+          await fileService.updateBulkProjectAssetsUploadStatus(workspaceSlug, projectId, res?.issue.id ?? "", {
+            asset_ids: uploadedAssetIds,
+          });
+          setUploadedAssetIds([]);
+        }
+        if (!createMore) {
+          router.push(`/${workspaceSlug}/projects/${projectId}/intake/?currentTab=open&inboxIssueId=${res?.issue?.id}`);
+          handleModalClose();
+        } else {
+          descriptionEditorRef?.current?.clearEditor();
+          setFormData(defaultIssueData);
+        }
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: `Success!`,
+          message: "Work item created successfully.",
+        });
+      })
+      .catch((error) => {
+        console.error(error);
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: `Error!`,
+          message: "Some error occurred. Please try again.",
+        });
+      });
+    setFormSubmitting(false);
+  };
+
+  const isTitleLengthMoreThan255Character = formData?.name ? formData.name.length > 255 : false;
+
+  if (!workspaceSlug || !projectId || !workspaceId) return <></>;
+  return (
+    <div className="flex w-full gap-2 bg-transparent">
+      <div className="w-full rounded-lg">
+        <form ref={formRef} onSubmit={handleFormSubmit} className="flex w-full flex-col">
+          <div className="space-y-5 rounded-t-lg bg-surface-1 p-5">
+            <div className="flex items-center justify-between gap-2">
+              <h3 className="text-18 font-medium text-secondary">{t("inbox_issue.modal.title")}</h3>
+            </div>
+            <div className="space-y-3">
+              <InboxIssueTitle
+                data={formData}
+                handleData={handleFormData}
+                isTitleLengthMoreThan255Character={isTitleLengthMoreThan255Character}
+              />
+              <InboxIssueDescription
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                workspaceId={workspaceId}
+                data={formData}
+                handleData={handleFormData}
+                editorRef={descriptionEditorRef}
+                containerClassName="bg-layer-2 border-[0.5px] border-subtle-1 py-3 min-h-[150px]"
+                onEnterKeyPress={() => submitBtnRef?.current?.click()}
+                onAssetUpload={(assetId) => setUploadedAssetIds((prev) => [...prev, assetId])}
+              />
+              <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
+            </div>
+          </div>
+          <div className="flex items-center justify-between gap-2 rounded-b-lg border-t-[0.5px] border-subtle bg-surface-1 px-5 py-4">
+            <div
+              className="inline-flex cursor-pointer items-center gap-1.5"
+              onClick={() => setCreateMore((prevData) => !prevData)}
+              role="button"
+              tabIndex={getIndex("create_more")}
+            >
+              <Switch size="sm" checked={createMore} onCheckedChange={() => {}} aria-label={t("create_more")} />
+              <span className="text-11">{t("create_more")}</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <Button
+                variant="secondary"
+                size="lg"
+                type="button"
+                onClick={() => {
+                  if (descriptionEditorRef.current?.isEditorReadyToDiscard()) {
+                    handleModalClose();
+                  } else {
+                    setToast({
+                      type: TOAST_TYPE.ERROR,
+                      title: "Error!",
+                      message: "Editor is still processing changes. Please wait before proceeding.",
+                    });
+                  }
+                }}
+                tabIndex={getIndex("discard_button")}
+              >
+                {t("discard")}
+              </Button>
+              <Button
+                variant="primary"
+                ref={submitBtnRef}
+                type="submit"
+                loading={formSubmitting}
+                disabled={isTitleLengthMoreThan255Character}
+                tabIndex={getIndex("submit_button")}
+                size="lg"
+              >
+                {formSubmitting ? t("creating") : t("create_work_item")}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/modals/create-modal/index.ts b/apps/web/core/components/inbox/modals/create-modal/index.ts
new file mode 100644
index 0000000..dd65a9e
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/create-modal/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./modal";
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
new file mode 100644
index 0000000..12d514e
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-description.tsx
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import type { EditorRefApi } from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import type { TIssue } from "@plane/types";
+import { EFileAssetType } from "@plane/types";
+import { Loader } from "@plane/ui";
+import { getDescriptionPlaceholderI18n, getTabIndex } from "@plane/utils";
+// components
+import { RichTextEditor } from "@/components/editor/rich-text/editor";
+// hooks
+import { useEditorAsset } from "@/hooks/store/use-editor-asset";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+
+const workspaceService = new WorkspaceService();
+
+type TInboxIssueDescription = {
+  containerClassName?: string;
+  workspaceSlug: string;
+  projectId: string;
+  workspaceId: string;
+  data: Partial<TIssue>;
+  handleData: (issueKey: keyof Partial<TIssue>, issueValue: Partial<TIssue>[keyof Partial<TIssue>]) => void;
+  editorRef: RefObject<EditorRefApi | null>;
+  onEnterKeyPress?: (e?: any) => void;
+  onAssetUpload?: (assetId: string) => void;
+};
+
+// TODO: have to implement GPT Assistance
+export const InboxIssueDescription = observer(function InboxIssueDescription(props: TInboxIssueDescription) {
+  const {
+    containerClassName,
+    workspaceSlug,
+    projectId,
+    workspaceId,
+    data,
+    handleData,
+    editorRef,
+    onEnterKeyPress,
+    onAssetUpload,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // store hooks
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
+  const { loader } = useProjectInbox();
+  const { isMobile } = usePlatformOS();
+
+  const { getIndex } = getTabIndex(ETabIndices.INTAKE_ISSUE_FORM, isMobile);
+
+  if (loader === "issue-loading")
+    return (
+      <Loader className="min-h-[6rem] rounded-md border border-subtle">
+        <Loader.Item width="100%" height="140px" />
+      </Loader>
+    );
+
+  return (
+    <RichTextEditor
+      editable
+      id="inbox-modal-editor"
+      initialValue={!data?.description_html || data?.description_html === "" ? "<p></p>" : data?.description_html}
+      ref={editorRef}
+      workspaceSlug={workspaceSlug}
+      workspaceId={workspaceId}
+      projectId={projectId}
+      dragDropEnabled={false}
+      onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
+      placeholder={(isFocused, description) => t(`${getDescriptionPlaceholderI18n(isFocused, description)}`)}
+      searchMentionCallback={async (payload) =>
+        await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+          ...payload,
+          project_id: projectId?.toString() ?? "",
+        })
+      }
+      containerClassName={containerClassName}
+      onEnterKeyPress={onEnterKeyPress}
+      tabIndex={getIndex("description_html")}
+      uploadFile={async (blockId, file) => {
+        try {
+          const { asset_id } = await uploadEditorAsset({
+            blockId,
+            data: {
+              entity_identifier: data.id ?? "",
+              entity_type: EFileAssetType.ISSUE_DESCRIPTION,
+            },
+            file,
+            projectId,
+            workspaceSlug,
+          });
+          onAssetUpload?.(asset_id);
+          return asset_id;
+        } catch (error) {
+          console.log("Error in uploading work item asset:", error);
+          throw new Error("Asset upload failed. Please try again later.");
+        }
+      }}
+      duplicateFile={async (assetId: string) => {
+        try {
+          const { asset_id } = await duplicateEditorAsset({
+            assetId,
+            entityType: EFileAssetType.ISSUE_DESCRIPTION,
+            projectId,
+            workspaceSlug,
+          });
+          onAssetUpload?.(asset_id);
+          return asset_id;
+        } catch {
+          throw new Error("Asset duplication failed. Please try again later.");
+        }
+      }}
+    />
+  );
+});
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
new file mode 100644
index 0000000..c0f76b4
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { ETabIndices } from "@plane/constants";
+import { ParentOutline } from "@makeplane/propel/icons";
+import type { ISearchIssueResponse, TIssue } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+import { renderFormattedPayloadDate, getDate, getTabIndex } from "@plane/utils";
+// components
+import { CycleDropdown } from "@/components/dropdowns/cycle";
+import { DateDropdown } from "@/components/dropdowns/date";
+import { EstimateDropdown } from "@/components/dropdowns/estimate";
+import { IntakeStateDropdown } from "@/components/dropdowns/intake-state/dropdown";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { ModuleDropdown } from "@/components/dropdowns/module/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { ParentIssuesListModal } from "@/components/issues/parent-issues-list-modal";
+import { IssueLabelSelect } from "@/components/issues/select";
+// helpers
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TInboxIssueProperties = {
+  projectId: string;
+  data: Partial<TIssue>;
+  handleData: (issueKey: keyof Partial<TIssue>, issueValue: Partial<TIssue>[keyof Partial<TIssue>]) => void;
+  isVisible?: boolean;
+};
+
+export const InboxIssueProperties = observer(function InboxIssueProperties(props: TInboxIssueProperties) {
+  const { projectId, data, handleData, isVisible = false } = props;
+  // hooks
+  const { areEstimateEnabledByProjectId } = useProjectEstimates();
+  const { isMobile } = usePlatformOS();
+  // states
+  const [parentIssueModalOpen, setParentIssueModalOpen] = useState(false);
+  const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | undefined>(undefined);
+
+  const { getIndex } = getTabIndex(ETabIndices.INTAKE_ISSUE_FORM, isMobile);
+
+  const startDate = data?.start_date;
+  const targetDate = data?.target_date;
+
+  const minDate = getDate(startDate);
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = getDate(targetDate);
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <div className="relative flex flex-wrap items-center gap-2">
+      {/* intake state */}
+      <div className="h-7">
+        <IntakeStateDropdown
+          value={data?.state_id}
+          onChange={(stateId) => handleData("state_id", stateId)}
+          projectId={projectId}
+          buttonVariant="border-with-text"
+          tabIndex={getIndex("state_id")}
+          isForWorkItemCreation={!data?.id}
+        />
+      </div>
+
+      {/* priority */}
+      <div className="h-7">
+        <PriorityDropdown
+          value={data?.priority}
+          onChange={(priority) => handleData("priority", priority)}
+          buttonVariant="border-with-text"
+          tabIndex={getIndex("priority")}
+        />
+      </div>
+
+      {/* Assignees */}
+      <div className="h-7">
+        <MemberDropdown
+          projectId={projectId}
+          value={data?.assignee_ids || []}
+          onChange={(assigneeIds) => handleData("assignee_ids", assigneeIds)}
+          buttonVariant={(data?.assignee_ids || [])?.length > 0 ? "transparent-without-text" : "border-with-text"}
+          buttonClassName={(data?.assignee_ids || [])?.length > 0 ? "hover:bg-transparent" : ""}
+          placeholder="Assignees"
+          multiple
+          tabIndex={getIndex("assignee_ids")}
+        />
+      </div>
+
+      {/* labels */}
+      <div className="h-7">
+        <IssueLabelSelect
+          value={data?.label_ids || []}
+          onChange={(labelIds) => handleData("label_ids", labelIds)}
+          projectId={projectId}
+          tabIndex={getIndex("label_ids")}
+        />
+      </div>
+
+      {/* start date */}
+      {isVisible && (
+        <div className="h-7">
+          <DateDropdown
+            value={data?.start_date || null}
+            onChange={(date) => handleData("start_date", date ? renderFormattedPayloadDate(date) : "")}
+            buttonVariant="border-with-text"
+            minDate={minDate ?? undefined}
+            placeholder="Start date"
+            tabIndex={getIndex("start_date")}
+          />
+        </div>
+      )}
+
+      {/* due date */}
+      <div className="h-7">
+        <DateDropdown
+          value={data?.target_date || null}
+          onChange={(date) => handleData("target_date", date ? renderFormattedPayloadDate(date) : "")}
+          buttonVariant="border-with-text"
+          minDate={minDate ?? undefined}
+          placeholder="Due date"
+          tabIndex={getIndex("target_date")}
+        />
+      </div>
+
+      {/* cycle */}
+      {isVisible && (
+        <div className="h-7">
+          <CycleDropdown
+            value={data?.cycle_id || ""}
+            onChange={(cycleId) => handleData("cycle_id", cycleId)}
+            projectId={projectId}
+            placeholder="Cycle"
+            buttonVariant="border-with-text"
+            tabIndex={getIndex("cycle_id")}
+          />
+        </div>
+      )}
+
+      {/* module */}
+      {isVisible && (
+        <div className="h-7">
+          <ModuleDropdown
+            value={data?.module_ids || []}
+            onChange={(moduleIds) => handleData("module_ids", moduleIds)}
+            projectId={projectId}
+            placeholder="Modules"
+            buttonVariant="border-with-text"
+            multiple
+            showCount
+            tabIndex={getIndex("module_ids")}
+          />
+        </div>
+      )}
+
+      {/* estimate */}
+      {isVisible && projectId && areEstimateEnabledByProjectId(projectId) && (
+        <div className="h-7">
+          <EstimateDropdown
+            value={data?.estimate_point || undefined}
+            onChange={(estimatePoint) => handleData("estimate_point", estimatePoint)}
+            projectId={projectId}
+            buttonVariant="border-with-text"
+            placeholder="Estimate"
+            tabIndex={getIndex("estimate_point")}
+          />
+        </div>
+      )}
+
+      {/* add parent */}
+      {isVisible && (
+        <div className="h-7">
+          {selectedParentIssue ? (
+            <CustomMenu
+              customButton={
+                <button
+                  type="button"
+                  className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
+                >
+                  <ParentOutline className="h-3 w-3 flex-shrink-0" />
+                  <span className="whitespace-nowrap">
+                    {selectedParentIssue
+                      ? `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
+                      : `Add parent`}
+                  </span>
+                </button>
+              }
+              placement="bottom-start"
+              className="h-full w-full"
+              customButtonClassName="h-full"
+              tabIndex={getIndex("parent_id")}
+            >
+              <>
+                <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueModalOpen(true)}>
+                  Change parent work item
+                </CustomMenu.MenuItem>
+                <CustomMenu.MenuItem
+                  className="!p-1"
+                  onClick={() => {
+                    handleData("parent_id", "");
+                    setSelectedParentIssue(undefined);
+                  }}
+                >
+                  Remove parent work item
+                </CustomMenu.MenuItem>
+              </>
+            </CustomMenu>
+          ) : (
+            <button
+              type="button"
+              className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-11 hover:bg-layer-1"
+              onClick={() => setParentIssueModalOpen(true)}
+            >
+              <ParentOutline className="h-3 w-3 flex-shrink-0" />
+              <span className="whitespace-nowrap">Add parent</span>
+            </button>
+          )}
+
+          <ParentIssuesListModal
+            isOpen={parentIssueModalOpen}
+            handleClose={() => setParentIssueModalOpen(false)}
+            onChange={(issue) => {
+              handleData("parent_id", issue?.id);
+              setSelectedParentIssue(issue);
+            }}
+            projectId={projectId}
+            issueId={undefined}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx
new file mode 100644
index 0000000..ab2ddf2
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-title.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TIssue } from "@plane/types";
+
+// helpers
+import { getTabIndex } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TInboxIssueTitle = {
+  data: Partial<TIssue>;
+  handleData: (issueKey: keyof Partial<TIssue>, issueValue: Partial<TIssue>[keyof Partial<TIssue>]) => void;
+  isTitleLengthMoreThan255Character?: boolean;
+};
+
+export const InboxIssueTitle = observer(function InboxIssueTitle(props: TInboxIssueTitle) {
+  const { data, handleData, isTitleLengthMoreThan255Character } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  const { getIndex } = getTabIndex(ETabIndices.INTAKE_ISSUE_FORM, isMobile);
+  const { t } = useTranslation();
+  return (
+    <div className="space-y-1">
+      <InputGroup size="2xl">
+        <Input
+          size="2xl"
+          id="name"
+          name="name"
+          type="text"
+          value={data?.name}
+          onChange={(e) => handleData("name", e.target.value)}
+          placeholder={t("title")}
+          tabIndex={getIndex("name")}
+          required
+        />
+      </InputGroup>
+      {isTitleLengthMoreThan255Character && (
+        <span className="text-11 text-danger-primary">{t("title_should_be_less_than_255_characters")}</span>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/inbox/modals/create-modal/modal.tsx b/apps/web/core/components/inbox/modals/create-modal/modal.tsx
new file mode 100644
index 0000000..85b8a14
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/create-modal/modal.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// plane imports
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import useKeypress from "@/hooks/use-keypress";
+// local imports
+import { InboxIssueCreateRoot } from "./create-root";
+
+type TInboxIssueCreateModalRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  modalState: boolean;
+  handleModalClose: () => void;
+};
+
+export function InboxIssueCreateModalRoot(props: TInboxIssueCreateModalRoot) {
+  const { workspaceSlug, projectId, modalState, handleModalClose } = props;
+  // states
+  const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
+  // handlers
+  const handleDuplicateIssueModal = (value: boolean) => setIsDuplicateModalOpen(value);
+
+  useKeypress("Escape", () => {
+    if (modalState) {
+      handleModalClose();
+      setIsDuplicateModalOpen(false);
+    }
+  });
+
+  return (
+    <ModalCore
+      isOpen={modalState}
+      position={EModalPosition.TOP}
+      width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
+      className="rounded-lg !bg-transparent shadow-none transition-[width] ease-linear"
+    >
+      <InboxIssueCreateRoot
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        handleModalClose={handleModalClose}
+        isDuplicateModalOpen={isDuplicateModalOpen}
+        handleDuplicateIssueModal={handleDuplicateIssueModal}
+      />
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/inbox/modals/decline-issue-modal.tsx b/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
new file mode 100644
index 0000000..7fe5a07
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+// types
+import { useTranslation } from "@plane/i18n";
+import type { TIssue } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  data: Partial<TIssue>;
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => Promise<void>;
+};
+
+export function DeclineIssueModal(props: Props) {
+  const { isOpen, onClose, data, onSubmit } = props;
+  // states
+  const [isDeclining, setIsDeclining] = useState(false);
+  // store hooks
+  const { getProjectById } = useProject();
+  const { t } = useTranslation();
+  // derived values
+  const projectDetails = data.project_id ? getProjectById(data?.project_id) : undefined;
+
+  const handleClose = () => {
+    setIsDeclining(false);
+    onClose();
+  };
+
+  const handleDecline = async () => {
+    setIsDeclining(true);
+    await onSubmit().finally(() => setIsDeclining(false));
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDecline}
+      isSubmitting={isDeclining}
+      isOpen={isOpen}
+      title={t("inbox_issue.modals.decline.title")}
+      // TODO: Need to translate the confirmation message
+      content={
+        <>
+          Are you sure you want to decline work item{" "}
+          <span className="font-medium break-words text-primary">
+            {projectDetails?.identifier}-{data?.sequence_id}
+          </span>
+          {""}? This action cannot be undone.
+        </>
+      }
+      primaryButtonText={{
+        loading: t("declining"),
+        default: t("decline"),
+      }}
+    />
+  );
+}
diff --git a/apps/web/core/components/inbox/modals/delete-issue-modal.tsx b/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
new file mode 100644
index 0000000..c31bf98
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// types
+import { PROJECT_ERROR_MESSAGES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// constants
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  data: Partial<TIssue>;
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => Promise<void>;
+};
+
+export const DeleteInboxIssueModal = observer(function DeleteInboxIssueModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  data,
+}: Props) {
+  // states
+  const [isDeleting, setIsDeleting] = useState(false);
+  // store hooks
+  const { getProjectById } = useProject();
+  const { t } = useTranslation();
+  // derived values
+  const projectDetails = data.project_id ? getProjectById(data?.project_id) : undefined;
+
+  const handleClose = () => {
+    setIsDeleting(false);
+    onClose();
+  };
+
+  const handleDelete = async () => {
+    setIsDeleting(true);
+    await onSubmit()
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: `${t("success")}`,
+          message: `${t("inbox_issue.modals.delete.success")}`,
+        });
+      })
+      .catch((errors) => {
+        const isPermissionError = errors?.error === "Only admin or creator can delete the work item";
+        const currentError = isPermissionError
+          ? PROJECT_ERROR_MESSAGES.permissionError
+          : PROJECT_ERROR_MESSAGES.issueDeleteError;
+        setToast({
+          title: t(currentError.i18n_title),
+          type: TOAST_TYPE.ERROR,
+          message: currentError.i18n_message && t(currentError.i18n_message),
+        });
+      })
+      .finally(() => handleClose());
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDelete}
+      isSubmitting={isDeleting}
+      isOpen={isOpen}
+      title={t("inbox_issue.modals.delete.title")}
+      // TODO: Need to translate the confirmation message
+      content={
+        <>
+          Are you sure you want to delete work item{" "}
+          <span className="font-medium break-words text-primary">
+            {projectDetails?.identifier}-{data?.sequence_id}
+          </span>
+          {""}? The work item will only be deleted from the intake and this action cannot be undone.
+        </>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/inbox/modals/select-duplicate.tsx b/apps/web/core/components/inbox/modals/select-duplicate.tsx
new file mode 100644
index 0000000..1482226
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { SearchOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ISearchIssueResponse } from "@plane/types";
+import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// assets
+import darkIssuesAsset from "@/app/assets/empty-state/search/issues-dark.webp?url";
+import lightIssuesAsset from "@/app/assets/empty-state/search/issues-light.webp?url";
+import darkSearchAsset from "@/app/assets/empty-state/search/search-dark.webp?url";
+import lightSearchAsset from "@/app/assets/empty-state/search/search-light.webp?url";
+// components
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import useDebounce from "@/hooks/use-debounce";
+// services
+import { ProjectService } from "@/services/project";
+
+type Props = {
+  isOpen: boolean;
+  value?: string | null;
+  onClose: () => void;
+  onSubmit: (issueId: string) => void;
+};
+
+const projectService = new ProjectService();
+
+export function SelectDuplicateInboxIssueModal(props: Props) {
+  const { isOpen, onClose, onSubmit, value } = props;
+  // router
+  const { workspaceSlug, projectId, issueId } = useParams();
+  // states
+  const [query, setQuery] = useState("");
+  const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // hooks
+  const { getProjectById } = useProject();
+  const { t } = useTranslation();
+  // derived values
+  const debouncedSearchTerm: string = useDebounce(query, 500);
+  const searchResolvedPath = resolvedTheme === "light" ? lightSearchAsset : darkSearchAsset;
+  const issuesResolvedPath = resolvedTheme === "light" ? lightIssuesAsset : darkIssuesAsset;
+
+  useEffect(() => {
+    if (!isOpen || !workspaceSlug || !projectId) return;
+
+    setIsSearching(true);
+    projectService
+      .projectIssuesSearch(workspaceSlug.toString(), projectId.toString(), {
+        search: debouncedSearchTerm,
+        workspace_search: false,
+      })
+      .then((res: ISearchIssueResponse[]) => setIssues(res))
+      .finally(() => setIsSearching(false));
+  }, [debouncedSearchTerm, isOpen, projectId, workspaceSlug]);
+
+  const filteredIssues = issues.filter((issue) => issue.id !== issueId);
+
+  const handleClose = () => {
+    onClose();
+    setQuery("");
+  };
+
+  const handleSubmit = (selectedItem: string) => {
+    if (!selectedItem || selectedItem.length === 0)
+      return setToast({
+        title: "Error",
+        type: TOAST_TYPE.ERROR,
+      });
+    onSubmit(selectedItem);
+    handleClose();
+  };
+
+  const issueList =
+    filteredIssues.length > 0 ? (
+      <div className="p-2">
+        {query === "" && <h2 className="mt-4 mb-2 px-3 text-11 font-semibold text-primary">Select work item</h2>}
+        <ul className="text-13 text-primary">
+          {filteredIssues.map((issue) => {
+            const stateColor = issue.state__color || "";
+
+            return (
+              <Combobox.Option
+                key={issue.id}
+                as="li"
+                value={issue.id}
+                className={({ active, selected }) =>
+                  `flex w-full cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-secondary select-none ${
+                    active || selected ? "bg-layer-1 text-primary" : ""
+                  } `
+                }
+              >
+                <div className="flex items-center gap-2">
+                  <span
+                    className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: stateColor,
+                    }}
+                  />
+                  <span className="flex-shrink-0 text-11 text-secondary">
+                    {getProjectById(issue?.project_id)?.identifier}-{issue.sequence_id}
+                  </span>
+                  <span className="text-secondary">{issue.name}</span>
+                </div>
+              </Combobox.Option>
+            );
+          })}
+        </ul>
+      </div>
+    ) : (
+      <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
+        {query === "" ? (
+          <SimpleEmptyState title={t("issue_relation.empty_state.no_issues.title")} assetPath={issuesResolvedPath} />
+        ) : (
+          <SimpleEmptyState title={t("issue_relation.empty_state.search.title")} assetPath={searchResolvedPath} />
+        )}
+      </div>
+    );
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <Combobox
+        value={value}
+        onChange={(selected: string | null) => {
+          if (selected !== null) handleSubmit(selected);
+        }}
+      >
+        <div className="relative m-1">
+          <SearchOutline
+            className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
+            aria-hidden="true"
+          />
+          <input
+            type="text"
+            className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-primary outline-none focus:ring-0 sm:text-13"
+            placeholder="Search..."
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </div>
+
+        <Combobox.Options as="ul" static className="max-h-80 scroll-py-2 divide-y divide-subtle-1 overflow-y-auto">
+          {isSearching ? (
+            <Loader className="space-y-3 p-3">
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+            </Loader>
+          ) : (
+            <>{issueList}</>
+          )}
+        </Combobox.Options>
+      </Combobox>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
new file mode 100644
index 0000000..1ad83a6
--- /dev/null
+++ b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// ui
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { Calendar } from "@plane/propel/calendar";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+
+export type InboxIssueSnoozeModalProps = {
+  isOpen: boolean;
+  value: Date | undefined;
+  onConfirm: (value: Date) => void;
+  handleClose: () => void;
+};
+
+export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
+  const { isOpen, handleClose, value, onConfirm } = props;
+  // states
+  const [date, setDate] = useState(value || new Date());
+  //hooks
+  const { t } = useTranslation();
+
+  return (
+    <ModalCore
+      isOpen={isOpen}
+      handleClose={handleClose}
+      position={EModalPosition.CENTER}
+      width={EModalWidth.SM}
+      className="w-auto"
+    >
+      <div className="flex h-full w-full flex-col gap-y-1 px-5 py-8 sm:p-6">
+        <Calendar
+          className="rounded-md border border-subtle p-3"
+          captionLayout="dropdown"
+          selected={date ? new Date(date) : undefined}
+          defaultMonth={date ? new Date(date) : undefined}
+          onSelect={(date: Date | undefined) => {
+            if (!date) return;
+            setDate(date);
+          }}
+          mode="single"
+          disabled={[
+            {
+              before: new Date(),
+            },
+          ]}
+        />
+        <Button
+          variant="primary"
+          onClick={() => {
+            handleClose();
+            onConfirm(date);
+          }}
+        >
+          {t("inbox_issue.actions.snooze")}
+        </Button>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/inbox/root.tsx b/apps/web/core/components/inbox/root.tsx
new file mode 100644
index 0000000..130d19b
--- /dev/null
+++ b/apps/web/core/components/inbox/root.tsx
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { IntakeOutline, LeftSidePaneOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { EInboxIssueCurrentTab } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { InboxContentRoot } from "@/components/inbox/content";
+import { InboxSidebar } from "@/components/inbox/sidebar";
+import { InboxLayoutLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-layout-loader";
+// hooks
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+
+type TInboxIssueRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  inboxIssueId: string | undefined;
+  inboxAccessible: boolean;
+  navigationTab?: EInboxIssueCurrentTab | undefined;
+};
+
+export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssueRoot) {
+  const { workspaceSlug, projectId, inboxIssueId, inboxAccessible, navigationTab } = props;
+  // states
+  const [isMobileSidebar, setIsMobileSidebar] = useState(true);
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { loader, error, currentTab, currentInboxProjectId, handleCurrentTab, fetchInboxIssues } = useProjectInbox();
+
+  useEffect(() => {
+    if (!inboxAccessible || !workspaceSlug || !projectId) return;
+    // Check if project has changed
+    const hasProjectChanged = currentInboxProjectId && currentInboxProjectId !== projectId;
+
+    if (navigationTab && navigationTab !== currentTab) {
+      handleCurrentTab(workspaceSlug, projectId, navigationTab);
+    } else if (hasProjectChanged) {
+      handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
+    } else {
+      fetchInboxIssues(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        undefined,
+        navigationTab || EInboxIssueCurrentTab.OPEN
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inboxAccessible, workspaceSlug, projectId]);
+
+  // loader
+  if (loader === "init-loading")
+    return (
+      <div className="relative flex h-full w-full flex-col">
+        <InboxLayoutLoader />
+      </div>
+    );
+
+  // error
+  if (error && error?.status === "init-error")
+    return (
+      <div className="relative flex h-full w-full flex-col items-center justify-center gap-3">
+        <IntakeOutline className="size-[60px]" />
+        <div className="text-secondary">{error?.message}</div>
+      </div>
+    );
+
+  return (
+    <>
+      {!inboxIssueId && (
+        <div className="flex h-12 w-full items-center border-b border-subtle px-4 lg:hidden">
+          <LeftSidePaneOutline
+            onClick={() => setIsMobileSidebar(!isMobileSidebar)}
+            className={cn("h-4 w-4", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
+          />
+        </div>
+      )}
+      <div className="flex h-full w-full overflow-hidden bg-surface-1">
+        <div
+          className={cn(
+            "absolute top-[50px] bottom-0 z-10 w-full flex-shrink-0 bg-surface-1 transition-all lg:!relative lg:!top-0 lg:w-2/6",
+            isMobileSidebar ? "translate-x-0" : "-translate-x-full lg:!translate-x-0"
+          )}
+        >
+          <InboxSidebar
+            setIsMobileSidebar={setIsMobileSidebar}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            inboxIssueId={inboxIssueId}
+          />
+        </div>
+
+        {inboxIssueId ? (
+          <InboxContentRoot
+            setIsMobileSidebar={setIsMobileSidebar}
+            isMobileSidebar={isMobileSidebar}
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            inboxIssueId={inboxIssueId.toString()}
+          />
+        ) : (
+          <EmptyStateCompact
+            assetKey="intake"
+            title={t("project_empty_state.intake_main.title")}
+            assetClassName="size-20"
+          />
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
new file mode 100644
index 0000000..ee57751
--- /dev/null
+++ b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MouseEvent } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { PriorityIcon } from "@plane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Row } from "@plane/ui";
+import { cn, renderFormattedDate } from "@plane/utils";
+// components
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { InboxIssueStatus } from "../inbox-issue-status";
+
+type InboxIssueListItemProps = {
+  workspaceSlug: string;
+  projectId: string;
+  projectIdentifier?: string;
+  inboxIssueId: string;
+  setIsMobileSidebar: (value: boolean) => void;
+};
+
+export const InboxIssueListItem = observer(function InboxIssueListItem(props: InboxIssueListItemProps) {
+  const { workspaceSlug, projectId, inboxIssueId, projectIdentifier, setIsMobileSidebar } = props;
+  // router
+  const searchParams = useSearchParams();
+  const selectedInboxIssueId = searchParams.get("inboxIssueId");
+  // store
+  const { currentTab, getIssueInboxByIssueId } = useProjectInbox();
+  const { projectLabels } = useLabel();
+  const { isMobile } = usePlatformOS();
+  const { getUserDetails } = useMember();
+  const inboxIssue = getIssueInboxByIssueId(inboxIssueId);
+  const issue = inboxIssue?.issue;
+
+  const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => {
+    if (selectedInboxIssueId === currentIssueId) event.preventDefault();
+    setIsMobileSidebar(false);
+  };
+
+  if (!issue) return <></>;
+
+  const createdByDetails = issue?.created_by ? getUserDetails(issue?.created_by) : undefined;
+
+  return (
+    <>
+      <Link
+        id={`inbox-issue-list-item-${issue.id}`}
+        key={`${projectId}_${issue.id}`}
+        href={`/${workspaceSlug}/projects/${projectId}/intake?currentTab=${currentTab}&inboxIssueId=${issue.id}`}
+        onClick={(e) => handleIssueRedirection(e, issue.id)}
+      >
+        <Row
+          className={cn(
+            `relative flex cursor-pointer flex-col gap-2 border border-t-transparent border-r-transparent border-b-subtle-1 border-l-transparent py-4 transition-all hover:bg-accent-primary/5`,
+            { "border border-accent-strong": selectedInboxIssueId === issue.id }
+          )}
+        >
+          <div className="space-y-1">
+            <div className="relative flex items-center justify-between gap-2">
+              <div className="flex-shrink-0 text-11 font-medium text-tertiary">
+                {projectIdentifier}-{issue.sequence_id}
+              </div>
+              <div className="flex items-center gap-2">
+                {inboxIssue.status !== -2 && <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />}
+              </div>
+            </div>
+            <h3 className="w-full truncate text-13">{issue.name}</h3>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex flex-wrap items-center gap-2">
+              <Tooltip label={`Created on: ${renderFormattedDate(issue.created_at ?? "") ?? ""}`} disabled={isMobile}>
+                <div className="text-11 text-secondary">{renderFormattedDate(issue.created_at ?? "")}</div>
+              </Tooltip>
+
+              <div className="rounded-full border-2 border-strong-1" />
+
+              {issue.priority && (
+                <Tooltip label={`Priority: ${issue.priority ?? "None"}`}>
+                  <PriorityIcon priority={issue.priority} withContainer className="h-3 w-3" />
+                </Tooltip>
+              )}
+
+              {issue.label_ids && issue.label_ids.length > 3 ? (
+                <div className="relative flex !h-[17.5px] items-center gap-1 rounded-sm border border-strong px-1 text-11">
+                  <span className="bg-orange-400 h-2 w-2 rounded-full" />
+                  <span className="max-w-28 truncate normal-case">{`${issue.label_ids.length} labels`}</span>
+                </div>
+              ) : (
+                <>
+                  {(issue.label_ids ?? []).map((labelId) => {
+                    const labelDetails = projectLabels?.find((l) => l.id === labelId);
+                    if (!labelDetails) return null;
+                    return (
+                      <div
+                        key={labelId}
+                        className="relative flex !h-[17.5px] items-center gap-1 rounded-sm border border-strong px-1 text-11"
+                      >
+                        <span
+                          className="h-2 w-2 rounded-full"
+                          style={{
+                            backgroundColor: labelDetails.color,
+                          }}
+                        />
+                        <span className="max-w-28 truncate normal-case">{labelDetails.name}</span>
+                      </div>
+                    );
+                  })}
+                </>
+              )}
+            </div>
+            {/* created by */}
+            {createdByDetails && createdByDetails.email?.includes("intake@plane.so") ? (
+              <Avatar alt="Plane" fallback="P" size="xs" />
+            ) : createdByDetails ? (
+              <ButtonAvatars showTooltip={false} userIds={createdByDetails?.id} />
+            ) : null}
+          </div>
+        </Row>
+      </Link>
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/sidebar/inbox-list.tsx b/apps/web/core/components/inbox/sidebar/inbox-list.tsx
new file mode 100644
index 0000000..ee5ddd3
--- /dev/null
+++ b/apps/web/core/components/inbox/sidebar/inbox-list.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment } from "react";
+import { observer } from "mobx-react";
+// local imports
+import { InboxIssueListItem } from "./inbox-list-item";
+
+export type InboxIssueListProps = {
+  workspaceSlug: string;
+  projectId: string;
+  projectIdentifier?: string;
+  inboxIssueIds: string[];
+  setIsMobileSidebar: (value: boolean) => void;
+};
+
+export const InboxIssueList = observer(function InboxIssueList(props: InboxIssueListProps) {
+  const { workspaceSlug, projectId, projectIdentifier, inboxIssueIds, setIsMobileSidebar } = props;
+
+  return (
+    <>
+      {inboxIssueIds.map((inboxIssueId) => (
+        <Fragment key={inboxIssueId}>
+          <InboxIssueListItem
+            setIsMobileSidebar={setIsMobileSidebar}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            projectIdentifier={projectIdentifier}
+            inboxIssueId={inboxIssueId}
+          />
+        </Fragment>
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/inbox/sidebar/index.ts b/apps/web/core/components/inbox/sidebar/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/inbox/sidebar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/inbox/sidebar/root.tsx b/apps/web/core/components/inbox/sidebar/root.tsx
new file mode 100644
index 0000000..e378c76
--- /dev/null
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import type { TInboxIssueCurrentTab } from "@plane/types";
+import { EInboxIssueCurrentTab } from "@plane/types";
+// plane imports
+import { Header, Loader, EHeaderVariant } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { InboxSidebarLoader } from "@/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+// local imports
+import { FiltersRoot } from "../inbox-filter";
+import { InboxIssueAppliedFilters } from "../inbox-filter/applied-filters/root";
+import { InboxIssueList } from "./inbox-list";
+
+type IInboxSidebarProps = {
+  workspaceSlug: string;
+  projectId: string;
+  inboxIssueId: string | undefined;
+  setIsMobileSidebar: (value: boolean) => void;
+};
+
+const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[] = [
+  {
+    key: EInboxIssueCurrentTab.OPEN,
+    i18n_label: "inbox_issue.tabs.open",
+  },
+  {
+    key: EInboxIssueCurrentTab.CLOSED,
+    i18n_label: "inbox_issue.tabs.closed",
+  },
+];
+
+export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarProps) {
+  const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
+  // router
+  const router = useAppRouter();
+  // ref
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [elementRef, setElementRef] = useState<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // store
+  const { currentProjectDetails } = useProject();
+  const {
+    currentTab,
+    handleCurrentTab,
+    loader,
+    filteredInboxIssueIds,
+    inboxIssuePaginationInfo,
+    fetchInboxPaginationIssues,
+    getAppliedFiltersCount,
+  } = useProjectInbox();
+  // derived values
+  const fetchNextPages = useCallback(() => {
+    if (!workspaceSlug || !projectId) return;
+    fetchInboxPaginationIssues(workspaceSlug.toString(), projectId.toString());
+  }, [workspaceSlug, projectId, fetchInboxPaginationIssues]);
+
+  // page observer
+  useIntersectionObserver(containerRef, elementRef, fetchNextPages, "20%");
+
+  useEffect(() => {
+    if (workspaceSlug && projectId && currentTab && filteredInboxIssueIds.length > 0) {
+      if (inboxIssueId === undefined) {
+        router.push(
+          `/${workspaceSlug}/projects/${projectId}/intake?currentTab=${currentTab}&inboxIssueId=${filteredInboxIssueIds[0]}`
+        );
+      }
+    }
+  }, [currentTab, filteredInboxIssueIds, inboxIssueId, projectId, router, workspaceSlug]);
+
+  return (
+    <div className="h-full w-full flex-shrink-0 border-r border-strong bg-surface-1">
+      <div className="relative flex h-full w-full flex-col overflow-hidden">
+        <Header variant={EHeaderVariant.SECONDARY}>
+          {tabNavigationOptions.map((option) => (
+            <div
+              key={option?.key}
+              className={cn(
+                `relative flex h-full cursor-pointer items-center gap-1 px-3 text-13 font-medium transition-all`,
+                currentTab === option?.key ? `text-accent-primary` : `hover:text-secondary`
+              )}
+              onClick={() => {
+                if (currentTab != option?.key) {
+                  handleCurrentTab(workspaceSlug, projectId, option?.key);
+                  router.push(`/${workspaceSlug}/projects/${projectId}/intake?currentTab=${option?.key}`);
+                }
+              }}
+            >
+              <div>{t(option?.i18n_label)}</div>
+              {option?.key === "open" && currentTab === option?.key && (
+                <div className="rounded-full bg-accent-primary/20 p-1.5 py-0.5 text-11 font-semibold text-accent-primary">
+                  {inboxIssuePaginationInfo?.total_results || 0}
+                </div>
+              )}
+              <div
+                className={cn(
+                  `absolute right-0 bottom-0 left-0 rounded-t-md border`,
+                  currentTab === option?.key ? `border-accent-strong` : `border-transparent`
+                )}
+              />
+            </div>
+          ))}
+          <div className="m-auto mr-0">
+            <FiltersRoot />
+          </div>
+        </Header>
+        <InboxIssueAppliedFilters />
+
+        {loader != undefined && loader === "filter-loading" && !inboxIssuePaginationInfo?.next_page_results ? (
+          <InboxSidebarLoader />
+        ) : (
+          <div
+            className="vertical-scrollbar scrollbar-md h-full w-full overflow-hidden overflow-y-auto"
+            ref={containerRef}
+          >
+            {filteredInboxIssueIds.length > 0 ? (
+              <InboxIssueList
+                setIsMobileSidebar={setIsMobileSidebar}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                projectIdentifier={currentProjectDetails?.identifier}
+                inboxIssueIds={filteredInboxIssueIds}
+              />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center">
+                {getAppliedFiltersCount > 0 ? (
+                  <EmptyStateDetailed
+                    assetKey="search"
+                    title={t("common_empty_state.search.title")}
+                    description={t("common_empty_state.search.description")}
+                    assetClassName="size-20"
+                    rootClassName="px-page-x"
+                  />
+                ) : currentTab === EInboxIssueCurrentTab.OPEN ? (
+                  <EmptyStateDetailed
+                    assetKey="inbox"
+                    title={t("project_empty_state.intake_sidebar.title")}
+                    description={t("project_empty_state.intake_sidebar.description")}
+                    assetClassName="size-20"
+                    actions={[
+                      {
+                        label: t("project_empty_state.intake_sidebar.cta_primary"),
+                        onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/intake`),
+                        variant: "primary",
+                      },
+                    ]}
+                    rootClassName="px-page-x"
+                  />
+                ) : (
+                  // TODO: Add translation
+                  <EmptyStateDetailed
+                    assetKey="inbox"
+                    title="No request closed yet"
+                    description="All the work items whether accepted or declined can be found here."
+                    assetClassName="size-20"
+                    className="px-10"
+                  />
+                )}
+              </div>
+            )}
+            <div ref={setElementRef}>
+              {inboxIssuePaginationInfo?.next_page_results && (
+                <Loader className="mx-auto w-full space-y-4 px-2 py-4">
+                  <Loader.Item height="64px" width="w-100" />
+                  <Loader.Item height="64px" width="w-100" />
+                </Loader>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/instance/index.ts b/apps/web/core/components/instance/index.ts
new file mode 100644
index 0000000..0b4b6ab
--- /dev/null
+++ b/apps/web/core/components/instance/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./not-ready-view";
+export * from "./maintenance-view";
diff --git a/apps/web/core/components/instance/maintenance-message.tsx b/apps/web/core/components/instance/maintenance-message.tsx
new file mode 100644
index 0000000..f2d662c
--- /dev/null
+++ b/apps/web/core/components/instance/maintenance-message.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export function MaintenanceMessage() {
+  const linkMap = [
+    {
+      key: "mail_to",
+      label: "Contact Support",
+      value: "mailto:support@plane.so",
+    },
+  ];
+
+  return (
+    <>
+      <div className="flex flex-col gap-2.5">
+        <h1 className="text-left text-18 font-semibold text-primary">
+          🚧 Looks like Plane didn't start up correctly!
+        </h1>
+        <span className="text-left text-14 font-medium text-secondary">
+          Some services might have failed to start. Please check your container logs to identify and resolve the issue.
+          If you're stuck, reach out to our support team for more help.
+        </span>
+      </div>
+      <div className="mt-1 flex items-center justify-start gap-6">
+        {linkMap.map((link) => (
+          <div key={link.key}>
+            <a
+              href={link.value}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-13 text-accent-primary hover:underline"
+            >
+              {link.label}
+            </a>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/instance/maintenance-view.tsx b/apps/web/core/components/instance/maintenance-view.tsx
new file mode 100644
index 0000000..05203dc
--- /dev/null
+++ b/apps/web/core/components/instance/maintenance-view.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+// assets
+import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url";
+import maintenanceModeLightModeImage from "@/app/assets/instance/maintenance-mode-light.svg?url";
+// layouts
+import DefaultLayout from "@/layouts/default-layout";
+// components
+import { MaintenanceMessage } from "./maintenance-message";
+
+export function MaintenanceView() {
+  // hooks
+  const { resolvedTheme } = useTheme();
+  // derived values
+  const maintenanceModeImage = resolvedTheme === "dark" ? maintenanceModeDarkModeImage : maintenanceModeLightModeImage;
+  return (
+    <DefaultLayout>
+      <div className="relative container mx-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-2 gap-y-6 bg-surface-1 text-center">
+        <div className="relative w-full">
+          <img
+            src={maintenanceModeImage}
+            height="176"
+            width="288"
+            alt="ProjectSettingImg"
+            className="h-full w-full object-fill object-center"
+          />
+        </div>
+        <div className="relative mt-4 flex w-full flex-col gap-4">
+          <MaintenanceMessage />
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+}
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx
new file mode 100644
index 0000000..850d0af
--- /dev/null
+++ b/apps/web/core/components/instance/not-ready-view.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+import { GOD_MODE_URL } from "@plane/constants";
+// assets
+import GradientLogo from "@/app/assets/auth/gradient-logo.webp?url";
+import GradientBgLogo from "@/app/assets/auth/gradient-bg-logo.webp?url";
+import DefaultLayout from "@/layouts/default-layout";
+import { PlaneLockup } from "@plane/propel/icons";
+import { Button } from "@plane/propel/button";
+
+export function InstanceNotReady() {
+  return (
+    <DefaultLayout>
+      <div className="relative z-10 flex h-screen w-screen overflow-hidden">
+        {/* Background decorations */}
+        <img
+          src={GradientBgLogo}
+          className="pointer-events-none absolute -top-24 -left-32 h-56 w-96 opacity-15"
+          alt=""
+          aria-hidden="true"
+        />
+        <img
+          src={GradientBgLogo}
+          className="pointer-events-none absolute -right-20 -bottom-16 h-56 w-96 opacity-15"
+          alt=""
+          aria-hidden="true"
+        />
+        {/* Main content */}
+        <div className="flex h-full w-full flex-col items-center px-8 pt-6 pb-10">
+          <div className="sticky top-0 flex w-full shrink-0 items-center justify-between gap-6">
+            <PlaneLockup height={20} width={95} className="text-primary" />
+          </div>
+          <div className="flex h-full w-full flex-col items-center justify-center gap-7">
+            <div className="flex flex-col items-center gap-11">
+              <img src={GradientLogo} className="h-24 w-40 object-contain" alt="Plane Logo" />
+              <div className="flex max-w-124 flex-col items-center gap-3">
+                <h1 className="text-h2-semibold text-primary">Welcome to Plane</h1>
+                <p className="text-center text-body-md-regular text-secondary">
+                  Set up your instance and create your first workspace to begin managing projects and work.
+                </p>
+              </div>
+            </div>
+            <a href={GOD_MODE_URL} className="w-72">
+              <Button variant="primary" className="w-full" size="xl">
+                Get started
+              </Button>
+            </a>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+}
diff --git a/apps/web/core/components/integration/github/select-repository.tsx b/apps/web/core/components/integration/github/select-repository.tsx
new file mode 100644
index 0000000..bcfa001
--- /dev/null
+++ b/apps/web/core/components/integration/github/select-repository.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { useParams } from "next/navigation";
+import useSWRInfinite from "swr/infinite";
+import type { IWorkspaceIntegration } from "@plane/types";
+// services
+// ui
+import { CustomSearchSelect } from "@plane/ui";
+// helpers
+import { truncateText } from "@plane/utils";
+import { ProjectService } from "@/services/project";
+// types
+
+type Props = {
+  integration: IWorkspaceIntegration;
+  value: any;
+  label: string | React.ReactNode;
+  onChange: (repo: any) => void;
+  characterLimit?: number;
+};
+
+const projectService = new ProjectService();
+
+export function SelectRepository(props: Props) {
+  const { integration, value, label, onChange, characterLimit = 25 } = props;
+  // router
+  const { workspaceSlug } = useParams();
+
+  const getKey = (pageIndex: number) => {
+    if (!workspaceSlug || !integration) return;
+
+    return `${process.env.VITE_API_BASE_URL}/api/workspaces/${workspaceSlug}/workspace-integrations/${
+      integration.id
+    }/github-repositories/?page=${++pageIndex}`;
+  };
+
+  const fetchGithubRepos = async (url: string) => {
+    const data = await projectService.getGithubRepositories(url);
+
+    return data;
+  };
+
+  const { data: paginatedData, size, setSize, isValidating } = useSWRInfinite(getKey, fetchGithubRepos);
+
+  let userRepositories = (paginatedData ?? []).map((data) => data.repositories).flat();
+  userRepositories = userRepositories.filter((data) => data?.id);
+
+  const totalCount = paginatedData && paginatedData.length > 0 ? paginatedData[0].total_count : 0;
+
+  const options =
+    userRepositories.map((repo) => ({
+      value: repo.id,
+      query: repo.full_name,
+      content: <p>{truncateText(repo.full_name, characterLimit)}</p>,
+    })) ?? [];
+
+  if (userRepositories.length < 1) return null;
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      options={options}
+      onChange={(val: string) => {
+        const repo = userRepositories.find((repo) => repo.id === val);
+
+        onChange(repo);
+      }}
+      label={label}
+      footerOption={
+        <>
+          {userRepositories && options.length < totalCount && (
+            <button
+              type="button"
+              className="w-full p-1 text-center text-10 text-secondary hover:bg-layer-1"
+              onClick={() => setSize(size + 1)}
+              disabled={isValidating}
+            >
+              {isValidating ? "Loading..." : "Click to load more..."}
+            </button>
+          )}
+        </>
+      }
+      optionsClassName="w-48"
+    />
+  );
+}
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
new file mode 100644
index 0000000..889e6b7
--- /dev/null
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR, { mutate } from "swr";
+import { TickCircleOutline } from "@makeplane/propel/icons";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
+// ui
+import { Loader } from "@plane/ui";
+// assets
+import GithubLogo from "@/app/assets/services/github.png?url";
+import SlackLogo from "@/app/assets/services/slack.png?url";
+// constants
+import { WORKSPACE_INTEGRATIONS } from "@plane/constants";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useUserPermissions } from "@/hooks/store/user";
+import useIntegrationPopup from "@/hooks/use-integration-popup";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { IntegrationService } from "@/services/integrations";
+
+type Props = {
+  integration: IAppIntegration;
+};
+
+const integrationDetails: { [key: string]: any } = {
+  github: {
+    logo: GithubLogo,
+    installed: "Activate GitHub on individual projects to sync with specific repositories.",
+    notInstalled: "Connect with GitHub with your Plane workspace to sync project work items.",
+  },
+  slack: {
+    logo: SlackLogo,
+    installed: "Activate Slack on individual projects to sync with specific channels.",
+    notInstalled: "Connect with Slack with your Plane workspace to sync project work items.",
+  },
+};
+
+// services
+const integrationService = new IntegrationService();
+
+export const SingleIntegrationCard = observer(function SingleIntegrationCard({ integration }: Props) {
+  // states
+  const [deletingIntegration, setDeletingIntegration] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { config } = useInstance();
+  const { allowPermissions } = useUserPermissions();
+
+  const isUserAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const { isMobile } = usePlatformOS();
+  const { startAuth, isConnecting: isInstalling } = useIntegrationPopup({
+    provider: integration.provider,
+    github_app_name: config?.github_app_name || "",
+    slack_client_id: config?.slack_client_id || "",
+  });
+
+  const { data: workspaceIntegrations } = useSWR(workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug) : null, () =>
+    workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug) : null
+  );
+
+  const handleRemoveIntegration = async () => {
+    if (!workspaceSlug || !integration || !workspaceIntegrations) return;
+
+    const workspaceIntegrationId = Array.isArray(workspaceIntegrations)
+      ? workspaceIntegrations.find((i) => i.integration === integration.id)?.id
+      : undefined;
+
+    setDeletingIntegration(true);
+
+    await integrationService
+      .deleteWorkspaceIntegration(workspaceSlug, workspaceIntegrationId ?? "")
+      .then(() => {
+        mutate<IWorkspaceIntegration[]>(
+          WORKSPACE_INTEGRATIONS(workspaceSlug),
+          (prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId),
+          false
+        );
+        setDeletingIntegration(false);
+
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Deleted successfully!",
+          message: `${integration.title} integration deleted successfully.`,
+        });
+      })
+      .catch(() => {
+        setDeletingIntegration(false);
+
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: `${integration.title} integration could not be deleted. Please try again.`,
+        });
+      });
+  };
+
+  const isInstalled = Array.isArray(workspaceIntegrations)
+    ? workspaceIntegrations.find((i: IWorkspaceIntegration) => i.integration_detail.id === integration.id)
+    : undefined;
+
+  return (
+    <div className="flex items-center justify-between gap-2 border-b border-subtle bg-surface-1 px-4 py-6">
+      <div className="flex items-start gap-4">
+        <div className="h-10 w-10 flex-shrink-0">
+          <img
+            src={integrationDetails[integration.provider].logo}
+            className="h-full w-full object-cover"
+            alt={`${integration.title} Logo`}
+          />
+        </div>
+        <div>
+          <h3 className="flex items-center gap-2 text-body-xs-medium">
+            {integration.title}
+            {workspaceIntegrations
+              ? isInstalled && <TickCircleOutline className="h-3.5 w-3.5 fill-transparent text-success-primary" />
+              : null}
+          </h3>
+          <p className="text-body-xs-regular text-secondary">
+            {workspaceIntegrations
+              ? isInstalled
+                ? integrationDetails[integration.provider].installed
+                : integrationDetails[integration.provider].notInstalled
+              : "Loading..."}
+          </p>
+        </div>
+      </div>
+
+      {workspaceIntegrations ? (
+        isInstalled ? (
+          <Tooltip
+            label={!isUserAdmin ? "You don't have permission to perform this" : ""}
+            layout="stacked"
+            disabled={isUserAdmin || isMobile}
+          >
+            <Button
+              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
+              variant="error-fill"
+              onClick={() => {
+                if (!isUserAdmin) return;
+                handleRemoveIntegration();
+              }}
+              disabled={!isUserAdmin}
+              loading={deletingIntegration}
+            >
+              {deletingIntegration ? "Uninstalling..." : "Uninstall"}
+            </Button>
+          </Tooltip>
+        ) : (
+          <Tooltip
+            label={!isUserAdmin ? "You don't have permission to perform this" : ""}
+            layout="stacked"
+            disabled={isUserAdmin || isMobile}
+          >
+            <Button
+              className={`${!isUserAdmin ? "hover:cursor-not-allowed" : ""}`}
+              variant="primary"
+              onClick={() => {
+                if (!isUserAdmin) return;
+                startAuth();
+              }}
+              loading={isInstalling}
+            >
+              {isInstalling ? "Installing..." : "Install"}
+            </Button>
+          </Tooltip>
+        )
+      ) : (
+        <Loader>
+          <Loader.Item height="32px" width="64px" />
+        </Loader>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/integration/slack/select-channel.tsx b/apps/web/core/components/integration/slack/select-channel.tsx
new file mode 100644
index 0000000..3838329
--- /dev/null
+++ b/apps/web/core/components/integration/slack/select-channel.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR, { mutate } from "swr";
+// types
+import type { IWorkspaceIntegration, ISlackIntegration } from "@plane/types";
+// ui
+import { Loader } from "@plane/ui";
+// fetch-keys
+import { SLACK_CHANNEL_INFO } from "@plane/constants";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import useIntegrationPopup from "@/hooks/use-integration-popup";
+// services
+import { AppInstallationService } from "@/services/app_installation.service";
+
+type Props = {
+  integration: IWorkspaceIntegration;
+};
+
+const appInstallationService = new AppInstallationService();
+
+export const SelectChannel = observer(function SelectChannel({ integration }: Props) {
+  // store hooks
+  const { config } = useInstance();
+  // states
+  const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] = useState<boolean>(false);
+  const [slackChannel, setSlackChannel] = useState<ISlackIntegration | null>(null);
+
+  const { workspaceSlug, projectId } = useParams();
+
+  // FIXME:
+  const { startAuth } = useIntegrationPopup({
+    provider: "slackChannel",
+    stateParams: integration.id,
+    // github_app_name: instance?.config?.github_client_id || "",
+    slack_client_id: config?.slack_client_id || "",
+  });
+
+  const { data: projectIntegration } = useSWR(
+    workspaceSlug && projectId && integration.id ? SLACK_CHANNEL_INFO(workspaceSlug, projectId) : null,
+    () =>
+      workspaceSlug && projectId && integration.id
+        ? appInstallationService.getSlackChannelDetail(workspaceSlug, projectId, integration.id)
+        : null
+  );
+
+  useEffect(() => {
+    if (projectId && projectIntegration && projectIntegration.length > 0) {
+      const projectSlackIntegrationCheck: ISlackIntegration | undefined = projectIntegration.find(
+        (_slack: ISlackIntegration) => _slack.project === projectId
+      );
+      if (projectSlackIntegrationCheck) {
+        setSlackChannel(() => projectSlackIntegrationCheck);
+        setSlackChannelAvailabilityToggle(true);
+      }
+    }
+  }, [projectIntegration, projectId]);
+
+  const handleDelete = async () => {
+    if (!workspaceSlug || !projectId) return;
+    if (projectIntegration.length === 0) return;
+    mutate(SLACK_CHANNEL_INFO(workspaceSlug?.toString(), projectId?.toString()), (prevData: any) => {
+      if (!prevData) return;
+      return prevData.id !== integration.id;
+    }).then(() => {
+      setSlackChannelAvailabilityToggle(false);
+      setSlackChannel(null);
+    });
+    appInstallationService
+      .removeSlackChannel(workspaceSlug, projectId, integration.id, slackChannel?.id)
+      .catch((err) => console.error(err));
+  };
+
+  const handleAuth = async () => {
+    await startAuth();
+  };
+
+  return (
+    <>
+      {projectIntegration ? (
+        <button
+          type="button"
+          className={`bg-gray-700 relative inline-flex h-4 w-6 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none`}
+          role="switch"
+          aria-checked
+          onClick={() => {
+            slackChannelAvailabilityToggle ? handleDelete() : handleAuth();
+          }}
+        >
+          <span
+            aria-hidden="true"
+            className={`shadow inline-block h-2 w-2 transform self-center rounded-full bg-white ring-0 transition duration-200 ease-in-out ${
+              slackChannelAvailabilityToggle ? "translate-x-3" : "translate-x-0"
+            }`}
+          />
+        </button>
+      ) : (
+        <Loader>
+          <Loader.Item height="35px" width="150px" />
+        </Loader>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/archive-issue-modal.tsx b/apps/web/core/components/issues/archive-issue-modal.tsx
new file mode 100644
index 0000000..ad487ab
--- /dev/null
+++ b/apps/web/core/components/issues/archive-issue-modal.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TDeDupeIssue, TIssue } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  data?: TIssue | TDeDupeIssue;
+  dataId?: string | null | undefined;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSubmit?: () => Promise<void>;
+};
+
+export function ArchiveIssueModal(props: Props) {
+  const { dataId, data, isOpen, handleClose, onSubmit } = props;
+  const { t } = useTranslation();
+  // states
+  const [isArchiving, setIsArchiving] = useState(false);
+  // store hooks
+  const { getProjectById } = useProject();
+  const { issueMap } = useIssues();
+
+  if (!dataId && !data) return null;
+
+  const issue = data ? data : issueMap[dataId!];
+  const projectDetails = getProjectById(issue.project_id);
+
+  const onClose = () => {
+    setIsArchiving(false);
+    handleClose();
+  };
+
+  const handleArchiveIssue = async () => {
+    if (!onSubmit) return;
+
+    setIsArchiving(true);
+    await onSubmit()
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("issue.archive.success.label"),
+          message: t("issue.archive.success.message"),
+        });
+        onClose();
+        return;
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("common.error.label"),
+          message: t("issue.archive.failed.message"),
+        })
+      )
+      .finally(() => setIsArchiving(false));
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.LG}>
+      <div className="px-5 py-4">
+        <h3 className="text-18 font-medium 2xl:text-20">
+          {t("issue.archive.label")} {projectDetails?.identifier} {issue.sequence_id}
+        </h3>
+        <p className="mt-3 text-13 text-secondary">{t("issue.archive.confirm_message")}</p>
+        <div className="mt-3 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveIssue} loading={isArchiving}>
+            {isArchiving ? t("common.archiving") : t("common.archive")}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/issues/archived-issues-header.tsx b/apps/web/core/components/issues/archived-issues-header.tsx
new file mode 100644
index 0000000..8190b45
--- /dev/null
+++ b/apps/web/core/components/issues/archived-issues-header.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// 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 } from "@plane/types";
+import { EHeaderVariant, Header } from "@plane/ui";
+// components
+import { ArchiveTabsList } from "@/components/archives";
+import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+
+export const ArchivedIssuesHeader = observer(function ArchivedIssuesHeader() {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+  // i18n
+  const { t } = useTranslation();
+  // for archived issues list layout is the only option
+  const activeLayout = "list";
+
+  const handleDisplayFiltersUpdate = (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_FILTERS, {
+      ...issueFilters?.displayFilters,
+      ...updatedDisplayFilter,
+    });
+  };
+
+  const handleDisplayPropertiesUpdate = (property: Partial<IIssueDisplayProperties>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    updateFilters(workspaceSlug, projectId, EIssueFilterType.DISPLAY_PROPERTIES, property);
+  };
+
+  if (!workspaceSlug || !projectId) return null;
+  return (
+    <Header variant={EHeaderVariant.SECONDARY}>
+      <Header.LeftItem>
+        <ArchiveTabsList />
+      </Header.LeftItem>
+      <Header.RightItem className="items-center">
+        <WorkItemFiltersToggle entityType={EIssuesStoreType.ARCHIVED} entityId={projectId} />
+        <FiltersDropdown title={t("common.display")} placement="bottom-end">
+          <DisplayFiltersSelection
+            displayFilters={issueFilters?.displayFilters || {}}
+            displayProperties={issueFilters?.displayProperties || {}}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+            handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.archived_issues.layoutOptions[activeLayout] : undefined
+            }
+            cycleViewDisabled={!currentProjectDetails?.cycle_view}
+            moduleViewDisabled={!currentProjectDetails?.module_view}
+          />
+        </FiltersDropdown>
+      </Header.RightItem>
+    </Header>
+  );
+});
diff --git a/apps/web/core/components/issues/attachment/attachment-detail.tsx b/apps/web/core/components/issues/attachment/attachment-detail.tsx
new file mode 100644
index 0000000..87abec2
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/attachment-detail.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { CloseOutline, WarningCircleOutline } from "@makeplane/propel/icons";
+// ui
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import {
+  convertBytesToSize,
+  getFileExtension,
+  getFileName,
+  getFileURL,
+  renderFormattedDate,
+  truncateText,
+} from "@plane/utils";
+// icons
+//
+import { getFileIcon } from "@/components/icons";
+// components
+import { IssueAttachmentDeleteModal } from "@/components/issues/attachment/delete-attachment-modal";
+// helpers
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+import type { TAttachmentHelpers } from "../issue-detail-widgets/attachments/helper";
+
+type TAttachmentOperationsRemoveModal = Exclude<TAttachmentHelpers, "create">;
+
+type TIssueAttachmentsDetail = {
+  attachmentId: string;
+  attachmentHelpers: TAttachmentOperationsRemoveModal;
+  disabled?: boolean;
+};
+
+export const IssueAttachmentsDetail = observer(function IssueAttachmentsDetail(props: TIssueAttachmentsDetail) {
+  // props
+  const { attachmentId, attachmentHelpers, disabled } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  const {
+    attachment: { getAttachmentById },
+  } = useIssueDetail();
+  // state
+  const [isDeleteIssueAttachmentModalOpen, setIsDeleteIssueAttachmentModalOpen] = useState(false);
+  // derived values
+  const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
+  const fileName = getFileName(attachment?.attributes.name ?? "");
+  const fileExtension = getFileExtension(attachment?.asset_url ?? "");
+  const fileIcon = getFileIcon(fileExtension, 28);
+  const fileURL = getFileURL(attachment?.asset_url ?? "");
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  if (!attachment) return <></>;
+
+  return (
+    <>
+      {isDeleteIssueAttachmentModalOpen && (
+        <IssueAttachmentDeleteModal
+          isOpen={isDeleteIssueAttachmentModalOpen}
+          onClose={() => setIsDeleteIssueAttachmentModalOpen(false)}
+          attachmentOperations={attachmentHelpers.operations}
+          attachmentId={attachmentId}
+        />
+      )}
+      <div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-subtle bg-surface-1 px-4 py-2 text-13">
+        <Link href={fileURL ?? ""} target="_blank" rel="noopener noreferrer">
+          <div className="flex items-center gap-3">
+            <div className="h-7 w-7">{fileIcon}</div>
+            <div className="flex flex-col gap-1">
+              <div className="flex items-center gap-2">
+                <Tooltip label={fileName} layout="stacked" disabled={isMobile}>
+                  <span className="text-13">{truncateText(`${fileName}`, 10)}</span>
+                </Tooltip>
+                <Tooltip
+                  label={`${
+                    getUserDetails(attachment.updated_by)?.display_name ?? ""
+                  } uploaded on ${renderFormattedDate(attachment.updated_at)}`}
+                  layout="stacked"
+                  disabled={isMobile}
+                >
+                  <span>
+                    <WarningCircleOutline className="h-3 w-3" />
+                  </span>
+                </Tooltip>
+              </div>
+
+              <div className="flex items-center gap-3 text-11 text-secondary">
+                <span>{fileExtension.toUpperCase()}</span>
+                <span>{convertBytesToSize(attachment.attributes.size)}</span>
+              </div>
+            </div>
+          </div>
+        </Link>
+
+        {!disabled && (
+          <button type="button" onClick={() => setIsDeleteIssueAttachmentModalOpen(true)}>
+            <CloseOutline className="h-4 w-4 text-secondary hover:text-primary" />
+          </button>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/attachment/attachment-item-list.tsx b/apps/web/core/components/issues/attachment/attachment-item-list.tsx
new file mode 100644
index 0000000..4473b16
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/attachment-item-list.tsx
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import type { FileRejection } from "react-dropzone";
+import { useDropzone } from "react-dropzone";
+import { UploadOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// plane web hooks
+import { useFileSize } from "@/hooks/use-file-size";
+// types
+import type { TAttachmentHelpers } from "../issue-detail-widgets/attachments/helper";
+// components
+import { IssueAttachmentsListItem } from "./attachment-list-item";
+import { IssueAttachmentsUploadItem } from "./attachment-list-upload-item";
+// types
+import { IssueAttachmentDeleteModal } from "./delete-attachment-modal";
+
+type TIssueAttachmentItemList = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  attachmentHelpers: TAttachmentHelpers;
+  disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const IssueAttachmentItemList = observer(function IssueAttachmentItemList(props: TIssueAttachmentItemList) {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    attachmentHelpers,
+    disabled,
+    issueServiceType = EIssueServiceType.ISSUES,
+  } = props;
+  const { t } = useTranslation();
+  // states
+  const [isUploading, setIsUploading] = useState(false);
+  // store hooks
+  const {
+    attachment: { getAttachmentsByIssueId },
+    attachmentDeleteModalId,
+    toggleDeleteAttachmentModal,
+    fetchActivities,
+  } = useIssueDetail(issueServiceType);
+  const { operations: attachmentOperations, snapshot: attachmentSnapshot } = attachmentHelpers;
+  const { create: createAttachment } = attachmentOperations;
+  const { uploadStatus } = attachmentSnapshot;
+  // file size
+  const { maxFileSize } = useFileSize();
+  // derived values
+  const issueAttachments = getAttachmentsByIssueId(issueId);
+
+  // handlers
+  const handleFetchPropertyActivities = useCallback(() => {
+    fetchActivities(workspaceSlug, projectId, issueId);
+  }, [fetchActivities, workspaceSlug, projectId, issueId]);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+      const totalAttachedFiles = acceptedFiles.length + rejectedFiles.length;
+
+      if (rejectedFiles.length === 0) {
+        const currentFile: File = acceptedFiles[0];
+        if (!currentFile || !workspaceSlug) return;
+
+        setIsUploading(true);
+        createAttachment(currentFile)
+          .catch(() => {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: t("toast.error"),
+              message: t("attachment.error"),
+            });
+          })
+          .finally(() => {
+            handleFetchPropertyActivities();
+            setIsUploading(false);
+          });
+        return;
+      }
+
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message:
+          totalAttachedFiles > 1
+            ? t("attachment.only_one_file_allowed")
+            : t("attachment.file_size_limit", { size: maxFileSize / 1024 / 1024 }),
+      });
+      return;
+    },
+    [createAttachment, maxFileSize, workspaceSlug, handleFetchPropertyActivities]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    maxSize: maxFileSize,
+    multiple: false,
+    disabled: isUploading || disabled,
+  });
+
+  return (
+    <>
+      {uploadStatus?.map((uploadStatus) => (
+        <IssueAttachmentsUploadItem key={uploadStatus.id} uploadStatus={uploadStatus} />
+      ))}
+      {issueAttachments && (
+        <>
+          {attachmentDeleteModalId && (
+            <IssueAttachmentDeleteModal
+              isOpen={Boolean(attachmentDeleteModalId)}
+              onClose={() => toggleDeleteAttachmentModal(null)}
+              attachmentOperations={attachmentOperations}
+              attachmentId={attachmentDeleteModalId}
+              issueServiceType={issueServiceType}
+            />
+          )}
+          <div
+            {...getRootProps()}
+            className={`relative flex flex-col ${isDragActive && issueAttachments.length < 3 ? "min-h-[200px]" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
+          >
+            <input {...getInputProps()} />
+            {isDragActive && (
+              <div className="absolute top-0 left-0 z-30 flex h-full w-full items-center justify-center bg-surface-2/75">
+                <div className="flex items-center justify-center rounded-md bg-surface-1 p-1">
+                  <div className="flex flex-col items-center justify-center rounded-md border border-dashed border-strong px-5 py-6">
+                    <UploadOutline className="size-7" />
+                    <span className="text-13 text-tertiary">{t("attachment.drag_and_drop")}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+            {issueAttachments?.map((attachmentId) => (
+              <IssueAttachmentsListItem
+                key={attachmentId}
+                attachmentId={attachmentId}
+                disabled={disabled}
+                issueServiceType={issueServiceType}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/attachment/attachment-list-item.tsx b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
new file mode 100644
index 0000000..962d25e
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import { useTranslation } from "@plane/i18n";
+import { DeleteOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+import { convertBytesToSize, getFileExtension, getFileName, getFileURL, renderFormattedDate } from "@plane/utils";
+// components
+//
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { getFileIcon } from "@/components/icons";
+// helpers
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TIssueAttachmentsListItem = {
+  attachmentId: string;
+  disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const IssueAttachmentsListItem = observer(function IssueAttachmentsListItem(props: TIssueAttachmentsListItem) {
+  const { t } = useTranslation();
+  // props
+  const { attachmentId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  const {
+    attachment: { getAttachmentById },
+    toggleDeleteAttachmentModal,
+  } = useIssueDetail(issueServiceType);
+  // derived values
+  const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
+  const fileName = getFileName(attachment?.attributes.name ?? "");
+  const fileExtension = getFileExtension(attachment?.attributes.name ?? "");
+  const fileIcon = getFileIcon(fileExtension, 18);
+  const fileURL = getFileURL(attachment?.asset_url ?? "");
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  if (!attachment) return <></>;
+
+  return (
+    <>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          window.open(fileURL, "_blank");
+        }}
+      >
+        <div className="group flex h-11 items-center justify-between gap-3 px-3 hover:bg-surface-2">
+          <div className="flex items-center gap-3 truncate text-13">
+            <div className="flex items-center gap-3">{fileIcon}</div>
+            <Tooltip label={`${fileName}.${fileExtension}`} layout="stacked" disabled={isMobile}>
+              <p className="truncate font-medium text-secondary">{`${fileName}.${fileExtension}`}</p>
+            </Tooltip>
+            <span className="flex size-1.5 rounded-full bg-layer-1" />
+            <span className="shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {attachment?.created_by && (
+              <>
+                <Tooltip
+                  label={`${
+                    getUserDetails(attachment?.created_by)?.display_name ?? ""
+                  } uploaded on ${renderFormattedDate(attachment.updated_at)}`}
+                  layout="stacked"
+                  disabled={isMobile}
+                >
+                  <div className="flex items-center justify-center">
+                    <ButtonAvatars showTooltip userIds={attachment?.created_by} />
+                  </div>
+                </Tooltip>
+              </>
+            )}
+
+            <CustomMenu ellipsis closeOnSelect placement="bottom-end" disabled={disabled}>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  toggleDeleteAttachmentModal(attachmentId);
+                }}
+              >
+                <div className="flex items-center gap-2">
+                  <DeleteOutline className="h-3.5 w-3.5" />
+                  <span>{t("common.actions.delete")}</span>
+                </div>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          </div>
+        </div>
+      </button>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx b/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx
new file mode 100644
index 0000000..629f857
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/attachment-list-upload-item.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// ui
+import { CircularProgress } from "@makeplane/propel/components/circular-progress";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// components
+import { getFileExtension } from "@plane/utils";
+import { getFileIcon } from "@/components/icons";
+// helpers
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+import type { TAttachmentUploadStatus } from "@/store/issue/issue-details/attachment.store";
+
+type Props = {
+  uploadStatus: TAttachmentUploadStatus;
+};
+
+export const IssueAttachmentsUploadItem = observer(function IssueAttachmentsUploadItem(props: Props) {
+  // props
+  const { uploadStatus } = props;
+  // derived values
+  const fileName = uploadStatus.name;
+  const fileExtension = getFileExtension(uploadStatus.name ?? "");
+  const fileIcon = getFileIcon(fileExtension, 18);
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <div className="pointer-events-none flex h-11 items-center justify-between gap-3 bg-surface-2 pr-2 pl-9">
+      <div className="flex items-center gap-3 truncate text-13">
+        <div className="flex-shrink-0">{fileIcon}</div>
+        <Tooltip label={fileName} layout="stacked" disabled={isMobile}>
+          <p className="truncate font-medium text-secondary">{fileName}</p>
+        </Tooltip>
+      </div>
+      <div className="flex flex-shrink-0 items-center gap-2">
+        <span className="flex-shrink-0">
+          <CircularProgress value={uploadStatus.progress} size="md" variant="brand" aria-label="Upload progress" />
+        </span>
+        <div className="flex-shrink-0 text-13 font-medium">{uploadStatus.progress}% done</div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/attachment/attachment-upload-details.tsx b/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
new file mode 100644
index 0000000..1b67507
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { CircularProgress } from "@makeplane/propel/components/circular-progress";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { getFileExtension, truncateText } from "@plane/utils";
+// ui
+// icons
+import { getFileIcon } from "@/components/icons";
+// helpers
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+import type { TAttachmentUploadStatus } from "@/store/issue/issue-details/attachment.store";
+
+type Props = {
+  uploadStatus: TAttachmentUploadStatus;
+};
+
+export const IssueAttachmentsUploadDetails = observer(function IssueAttachmentsUploadDetails(props: Props) {
+  // props
+  const { uploadStatus } = props;
+  // derived values
+  const fileName = uploadStatus.name;
+  const fileExtension = getFileExtension(uploadStatus.name ?? "");
+  const fileIcon = getFileIcon(fileExtension, 28);
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <div className="pointer-events-none flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-subtle bg-surface-2 px-4 py-2 text-13">
+      <div className="flex flex-shrink-0 items-center gap-3">
+        <div className="h-7 w-7">{fileIcon}</div>
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-2">
+            <Tooltip label={fileName} layout="stacked" disabled={isMobile}>
+              <span className="text-13">{truncateText(`${fileName}`, 10)}</span>
+            </Tooltip>
+          </div>
+
+          <div className="flex items-center gap-3 text-11 text-secondary">
+            <span>{fileExtension.toUpperCase()}</span>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-shrink-0 items-center gap-2">
+        <span className="flex-shrink-0">
+          <CircularProgress value={uploadStatus.progress} size="md" variant="brand" aria-label="Upload progress" />
+        </span>
+        <div className="flex-shrink-0 text-13 font-medium">{uploadStatus.progress}% done</div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/attachment/attachment-upload.tsx b/apps/web/core/components/issues/attachment/attachment-upload.tsx
new file mode 100644
index 0000000..2a37b3b
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/attachment-upload.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import { useDropzone } from "react-dropzone";
+// plane web hooks
+import { useFileSize } from "@/hooks/use-file-size";
+// types
+import type { TAttachmentOperations } from "../issue-detail-widgets/attachments/helper";
+
+type TAttachmentOperationsModal = Pick<TAttachmentOperations, "create">;
+
+type Props = {
+  workspaceSlug: string;
+  disabled?: boolean;
+  attachmentOperations: TAttachmentOperationsModal;
+};
+
+export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(props: Props) {
+  const { workspaceSlug, disabled = false, attachmentOperations } = props;
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+  // file size
+  const { maxFileSize } = useFileSize();
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const currentFile: File = acceptedFiles[0];
+      if (!currentFile || !workspaceSlug) return;
+
+      setIsLoading(true);
+      attachmentOperations.create(currentFile).finally(() => setIsLoading(false));
+    },
+    [attachmentOperations, workspaceSlug]
+  );
+
+  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
+    onDrop,
+    maxSize: maxFileSize,
+    multiple: false,
+    disabled: isLoading || disabled,
+  });
+
+  const fileError =
+    fileRejections.length > 0 ? `Invalid file type or size (max ${maxFileSize / 1024 / 1024} MB)` : null;
+
+  return (
+    <div
+      {...getRootProps()}
+      className={`flex h-[60px] items-center justify-center rounded-md border-2 border-dashed bg-accent-primary/5 px-4 text-11 text-accent-primary ${
+        isDragActive ? "border-accent-strong bg-accent-primary/10" : "border-subtle"
+      } ${isDragReject ? "bg-danger-subtle" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
+    >
+      <input {...getInputProps()} />
+      <span className="flex items-center gap-2">
+        {isDragActive ? (
+          <p>Drop here...</p>
+        ) : fileError ? (
+          <p className="text-center text-danger-primary">{fileError}</p>
+        ) : isLoading ? (
+          <p className="text-center">Uploading...</p>
+        ) : (
+          <p className="text-center">Click or drag a file here</p>
+        )}
+      </span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/attachment/attachments-list.tsx b/apps/web/core/components/issues/attachment/attachments-list.tsx
new file mode 100644
index 0000000..a5d75e1
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/attachments-list.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// types
+import type { TAttachmentHelpers } from "../issue-detail-widgets/attachments/helper";
+// components
+import { IssueAttachmentsDetail } from "./attachment-detail";
+import { IssueAttachmentsUploadDetails } from "./attachment-upload-details";
+
+type TIssueAttachmentsList = {
+  issueId: string;
+  attachmentHelpers: TAttachmentHelpers;
+  disabled?: boolean;
+};
+
+export const IssueAttachmentsList = observer(function IssueAttachmentsList(props: TIssueAttachmentsList) {
+  const { issueId, attachmentHelpers, disabled } = props;
+  // store hooks
+  const {
+    attachment: { getAttachmentsByIssueId },
+  } = useIssueDetail();
+  // derived values
+  const { snapshot: attachmentSnapshot } = attachmentHelpers;
+  const { uploadStatus } = attachmentSnapshot;
+  const issueAttachments = getAttachmentsByIssueId(issueId);
+
+  return (
+    <>
+      {uploadStatus?.map((uploadStatus) => (
+        <IssueAttachmentsUploadDetails key={uploadStatus.id} uploadStatus={uploadStatus} />
+      ))}
+      {issueAttachments?.map((attachmentId) => (
+        <IssueAttachmentsDetail
+          key={attachmentId}
+          attachmentId={attachmentId}
+          disabled={disabled}
+          attachmentHelpers={attachmentHelpers}
+        />
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx b/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
new file mode 100644
index 0000000..676f4e3
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane-i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// helper
+import { getFileName } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// types
+import type { TAttachmentOperations } from "../issue-detail-widgets/attachments/helper";
+
+export type TAttachmentOperationsRemoveModal = Pick<TAttachmentOperations, "remove">;
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  attachmentId: string;
+  attachmentOperations: TAttachmentOperationsRemoveModal;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const IssueAttachmentDeleteModal = observer(function IssueAttachmentDeleteModal(props: Props) {
+  const { t } = useTranslation();
+  const { isOpen, onClose, attachmentId, attachmentOperations, issueServiceType = EIssueServiceType.ISSUES } = props;
+  // states
+  const [loader, setLoader] = useState(false);
+
+  // store hooks
+  const {
+    attachment: { getAttachmentById },
+  } = useIssueDetail(issueServiceType);
+
+  // derived values
+  const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
+
+  // handlers
+  const handleClose = () => {
+    onClose();
+    setLoader(false);
+  };
+
+  const handleDeletion = async (assetId: string) => {
+    setLoader(true);
+    attachmentOperations.remove(assetId).finally(() => handleClose());
+  };
+
+  if (!attachment) return <></>;
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={() => handleDeletion(attachment.id)}
+      isSubmitting={loader}
+      isOpen={isOpen}
+      title={t("attachment.delete")}
+      content={
+        <>
+          {/* TODO: Translate here */}
+          Are you sure you want to delete attachment-{" "}
+          <span className="font-bold">{getFileName(attachment.attributes.name)}</span>? This attachment will be
+          permanently removed. This action cannot be undone.
+        </>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/attachment/index.ts b/apps/web/core/components/issues/attachment/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/issues/attachment/root.tsx b/apps/web/core/components/issues/attachment/root.tsx
new file mode 100644
index 0000000..7e8597c
--- /dev/null
+++ b/apps/web/core/components/issues/attachment/root.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import { useAttachmentOperations } from "../issue-detail-widgets/attachments/helper";
+// components
+import { IssueAttachmentUpload } from "./attachment-upload";
+import { IssueAttachmentsList } from "./attachments-list";
+
+export type TIssueAttachmentRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled?: boolean;
+};
+
+export const IssueAttachmentRoot = observer(function IssueAttachmentRoot(props: TIssueAttachmentRoot) {
+  // props
+  const { workspaceSlug, projectId, issueId, disabled = false } = props;
+  // hooks
+  const attachmentHelpers = useAttachmentOperations(workspaceSlug, projectId, issueId);
+
+  return (
+    <div className="relative space-y-3">
+      <h3 className="text-body-sm-medium">Attachments</h3>
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+        <IssueAttachmentUpload
+          workspaceSlug={workspaceSlug}
+          disabled={disabled}
+          attachmentOperations={attachmentHelpers.operations}
+        />
+        <IssueAttachmentsList issueId={issueId} disabled={disabled} attachmentHelpers={attachmentHelpers} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/bulk-operations/index.ts b/apps/web/core/components/issues/bulk-operations/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/issues/bulk-operations/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/issues/bulk-operations/root.tsx b/apps/web/core/components/issues/bulk-operations/root.tsx
new file mode 100644
index 0000000..2ce4c48
--- /dev/null
+++ b/apps/web/core/components/issues/bulk-operations/root.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// ui
+import { Banner } from "@makeplane/propel/components/banner";
+import { Button } from "@makeplane/propel/components/button";
+import { MARKETING_PLANE_ONE_PAGE_LINK } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+// hooks
+import { useMultipleSelectStore } from "@/hooks/store/use-multiple-select-store";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+
+type Props = {
+  className?: string;
+  selectionHelpers: TSelectionHelper;
+};
+
+export const IssueBulkOperationsRoot = observer(function IssueBulkOperationsRoot(props: Props) {
+  const { className, selectionHelpers } = props;
+  // translation
+  const { t } = useTranslation();
+  // store hooks
+  const { isSelectionActive } = useMultipleSelectStore();
+
+  if (!isSelectionActive || selectionHelpers.isSelectionDisabled) return null;
+
+  return (
+    <div className={cn("sticky bottom-0 left-0 z-[2] grid h-20 place-items-center px-3.5", className)}>
+      <Banner
+        placement="inline"
+        variant="accent"
+        icon={null}
+        title={t("bulk_operations.upgrade_banner.message")}
+        actions={
+          <Button
+            variant="primary"
+            size="sm"
+            stretch="auto"
+            label={t("bulk_operations.upgrade_banner.cta")}
+            nativeButton={false}
+            render={
+              <a
+                href={MARKETING_PLANE_ONE_PAGE_LINK}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={t("bulk_operations.upgrade_banner.cta")}
+              />
+            }
+          />
+        }
+        render={<div className="w-full" />}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/confirm-issue-discard.tsx b/apps/web/core/components/issues/confirm-issue-discard.tsx
new file mode 100644
index 0000000..9ba05b9
--- /dev/null
+++ b/apps/web/core/components/issues/confirm-issue-discard.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// ui
+import { Button } from "@plane/propel/button";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onDiscard: () => void;
+  onConfirm: () => Promise<void>;
+};
+
+export function ConfirmIssueDiscard(props: Props) {
+  const { isOpen, handleClose, onDiscard, onConfirm } = props;
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onClose = () => {
+    handleClose();
+    setIsLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsLoading(true);
+    await onConfirm();
+    setIsLoading(false);
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="sm:flex sm:items-start">
+          <div className="mt-3 text-center sm:mt-0 sm:text-left">
+            <h3 className="text-16 leading-6 font-medium text-primary">Save this draft?</h3>
+            <div className="mt-2">
+              <p className="text-13 text-secondary">
+                You can save this work item to Drafts so you can come back to it later.{" "}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-between gap-2 p-4 sm:px-6">
+        <div>
+          <Button variant="secondary" onClick={onDiscard}>
+            Discard
+          </Button>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={handleDeletion} loading={isLoading}>
+            {isLoading ? "Saving" : "Save to Drafts"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/issues/create-issue-toast-action-items.tsx b/apps/web/core/components/issues/create-issue-toast-action-items.tsx
new file mode 100644
index 0000000..2bdcd55
--- /dev/null
+++ b/apps/web/core/components/issues/create-issue-toast-action-items.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
+// plane imports
+// helpers
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+
+type TCreateIssueToastActionItems = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  isEpic?: boolean;
+};
+
+export const CreateIssueToastActionItems = observer(function CreateIssueToastActionItems(
+  props: TCreateIssueToastActionItems
+) {
+  const { workspaceSlug, issueId, isEpic = false } = props;
+  // state
+  const [copied, setCopied] = useState(false);
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { getProjectIdentifierById } = useProject();
+
+  // derived values
+  const issue = getIssueById(issueId);
+  const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+
+  if (!issue) return null;
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issue?.project_id,
+    issueId,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+    isEpic,
+  });
+
+  const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    try {
+      await copyUrlToClipboard(workItemLink);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 3000);
+    } catch (_error) {
+      setCopied(false);
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  return (
+    <div className="-ml-2 flex items-center gap-1 text-11 text-secondary">
+      <a
+        href={workItemLink}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="rounded-sm px-2 py-1 font-medium text-accent-primary hover:bg-surface-2"
+      >
+        {`View ${isEpic ? "epic" : "work item"}`}
+      </a>
+
+      {copied ? (
+        <>
+          <span className="cursor-default px-2 py-1 text-secondary">Copied!</span>
+        </>
+      ) : (
+        <>
+          <button
+            className="hidden cursor-pointer rounded-sm px-2 py-1 text-tertiary group-hover:flex hover:bg-surface-2 hover:text-secondary"
+            onClick={copyToClipboard}
+          >
+            Copy link
+          </button>
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/delete-issue-modal.tsx b/apps/web/core/components/issues/delete-issue-modal.tsx
new file mode 100644
index 0000000..9b70e5c
--- /dev/null
+++ b/apps/web/core/components/issues/delete-issue-modal.tsx
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import { PROJECT_ERROR_MESSAGES, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TDeDupeIssue, TIssue } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  dataId?: string | null | undefined;
+  data?: TIssue | TDeDupeIssue;
+  isSubIssue?: boolean;
+  onSubmit?: () => Promise<void>;
+  isEpic?: boolean;
+};
+
+export const DeleteIssueModal = observer(function DeleteIssueModal(props: Props) {
+  const { dataId, data, isOpen, handleClose, isSubIssue = false, onSubmit, isEpic = false } = props;
+  // states
+  const [isDeleting, setIsDeleting] = useState(false);
+  // store hooks
+  const { workspaceSlug } = useParams();
+  const { issueMap } = useIssues();
+  const { getProjectById } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+
+  const { data: currentUser } = useUser();
+
+  useEffect(() => {
+    setIsDeleting(false);
+  }, [isOpen]);
+
+  if (!dataId && !data) return null;
+
+  // derived values
+  const issue = data ? data : issueMap[dataId!];
+  const projectDetails = getProjectById(issue?.project_id);
+  const isIssueCreator = issue?.created_by === currentUser?.id;
+
+  const canPerformProjectAdminActions = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug?.toString(),
+    projectDetails?.id
+  );
+
+  const authorized = isIssueCreator || canPerformProjectAdminActions;
+
+  const onClose = () => {
+    setIsDeleting(false);
+    handleClose();
+  };
+
+  const handleIssueDelete = async () => {
+    setIsDeleting(true);
+
+    if (!authorized) {
+      setToast({
+        title: t(PROJECT_ERROR_MESSAGES.permissionError.i18n_title),
+        type: TOAST_TYPE.ERROR,
+        message:
+          PROJECT_ERROR_MESSAGES.permissionError.i18n_message && t(PROJECT_ERROR_MESSAGES.permissionError.i18n_message),
+      });
+      onClose();
+      return;
+    }
+    if (onSubmit)
+      await onSubmit()
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("common.success"),
+            message: t("entity.delete.success", {
+              entity: isSubIssue ? t("common.sub_work_item") : isEpic ? t("common.epic") : t("common.work_item"),
+            }),
+          });
+          onClose();
+        })
+        .catch((errors) => {
+          const isPermissionError =
+            errors?.error ===
+            `Only admin or creator can delete the ${isSubIssue ? "sub-work item" : isEpic ? "epic" : "work item"}`;
+          const currentError = isPermissionError
+            ? PROJECT_ERROR_MESSAGES.permissionError
+            : PROJECT_ERROR_MESSAGES.issueDeleteError;
+          setToast({
+            title: t(currentError.i18n_title),
+            type: TOAST_TYPE.ERROR,
+            message: currentError.i18n_message && t(currentError.i18n_message),
+          });
+        })
+        .finally(() => onClose());
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={onClose}
+      handleSubmit={handleIssueDelete}
+      isSubmitting={isDeleting}
+      isOpen={isOpen}
+      title={t("entity.delete.label", { entity: isEpic ? t("common.epic") : t("common.work_item") })}
+      content={
+        <>
+          {/* TODO: Translate here */}
+          {`Are you sure you want to delete ${isEpic ? "epic" : "work item"} `}
+          <span className="font-medium break-words text-primary">
+            {projectDetails?.identifier}-{issue?.sequence_id}
+          </span>
+          {` ? All of the data related to the ${isEpic ? "epic" : "work item"} will be permanently removed. This action cannot be undone.`}
+        </>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/filters.tsx b/apps/web/core/components/issues/filters.tsx
new file mode 100644
index 0000000..6d0fb1b
--- /dev/null
+++ b/apps/web/core/components/issues/filters.tsx
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import { BarOutline, PreferencesOutline } from "@makeplane/propel/icons";
+// plane imports
+import { EIssueFilterType, ISSUE_STORE_TO_FILTERS_MAP } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+// plane web imports
+import type { TProject } from "@plane/types";
+// local imports
+import { WorkItemsModal } from "../analytics/work-items/modal";
+import { WorkItemFiltersToggle } from "../work-item-filters/filters-toggle";
+import {
+  DisplayFiltersSelection,
+  FiltersDropdown,
+  LayoutSelection,
+  MobileLayoutSelection,
+} from "./issue-layouts/filters";
+
+type Props = {
+  currentProjectDetails: TProject | undefined;
+  projectId: string;
+  workspaceSlug: string;
+  canUserCreateIssue: boolean | undefined;
+  storeType?: EIssuesStoreType.PROJECT | EIssuesStoreType.EPIC;
+};
+const LAYOUTS = [
+  EIssueLayoutTypes.LIST,
+  EIssueLayoutTypes.KANBAN,
+  EIssueLayoutTypes.CALENDAR,
+  EIssueLayoutTypes.SPREADSHEET,
+  EIssueLayoutTypes.GANTT,
+];
+
+export const HeaderFilters = observer(function HeaderFilters(props: Props) {
+  const {
+    currentProjectDetails,
+    projectId,
+    workspaceSlug,
+    canUserCreateIssue,
+    storeType = EIssuesStoreType.PROJECT,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+  // store hooks
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(storeType);
+  // derived values
+  const activeLayout = issueFilters?.displayFilters?.layout;
+  const layoutDisplayFiltersOptions = ISSUE_STORE_TO_FILTERS_MAP[storeType]?.layoutOptions[activeLayout];
+
+  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}
+        isEpic={storeType === EIssuesStoreType.EPIC}
+      />
+      <div className="hidden @4xl:flex">
+        <LayoutSelection
+          layouts={LAYOUTS}
+          onChange={(layout) => handleLayoutChange(layout)}
+          selectedLayout={activeLayout}
+        />
+      </div>
+      <div className="flex @4xl:hidden">
+        <MobileLayoutSelection
+          layouts={LAYOUTS}
+          onChange={(layout) => handleLayoutChange(layout)}
+          activeLayout={activeLayout}
+        />
+      </div>
+      <WorkItemFiltersToggle entityType={storeType} entityId={projectId} />
+      <FiltersDropdown
+        miniIcon={<PreferencesOutline className="size-3.5" />}
+        title={t("common.display")}
+        placement="bottom-end"
+      >
+        <DisplayFiltersSelection
+          layoutDisplayFiltersOptions={layoutDisplayFiltersOptions}
+          displayFilters={issueFilters?.displayFilters ?? {}}
+          handleDisplayFiltersUpdate={handleDisplayFilters}
+          displayProperties={issueFilters?.displayProperties ?? {}}
+          handleDisplayPropertiesUpdate={handleDisplayProperties}
+          cycleViewDisabled={!currentProjectDetails?.cycle_view}
+          moduleViewDisabled={!currentProjectDetails?.module_view}
+          isEpic={storeType === EIssuesStoreType.EPIC}
+        />
+      </FiltersDropdown>
+      {canUserCreateIssue ? (
+        <Button className="hidden px-2 md:block" onClick={() => setAnalyticsModal(true)} variant="secondary" size="lg">
+          <div className="hidden @4xl:flex">{t("common.analytics")}</div>
+          <div className="flex @4xl:hidden">
+            <BarOutline className="size-3.5" />
+          </div>
+        </Button>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/header.tsx b/apps/web/core/components/issues/header.tsx
new file mode 100644
index 0000000..dcd86d3
--- /dev/null
+++ b/apps/web/core/components/issues/header.tsx
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { Circle } from "lucide-react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel, SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { NewTabOutline, WorkItemsOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+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";
+// constants
+import { HeaderFilters } from "@/components/issues/filters";
+// helpers
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+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 { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web imports
+import { CommonProjectBreadcrumbs } from "@/components/breadcrumbs/common";
+
+export const IssuesHeader = observer(function IssuesHeader() {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const {
+    issues: { getGroupIssueCount },
+  } = useIssues(EIssuesStoreType.PROJECT);
+  // i18n
+  const { t } = useTranslation();
+
+  const { currentProjectDetails, loader } = useProject();
+
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  const { isMobile } = usePlatformOS();
+
+  const SPACE_APP_URL =
+    (SPACE_BASE_URL.trim() === "" && typeof window !== "undefined" ? window.location.origin : SPACE_BASE_URL) +
+    SPACE_BASE_PATH;
+  const publishedURL = `${SPACE_APP_URL}/issues/${currentProjectDetails?.anchor}`;
+
+  const issuesCount = getGroupIssueCount(undefined, undefined, false);
+  const canUserCreateIssue = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <div className="flex items-center gap-2.5">
+          <Breadcrumbs onBack={() => router.back()} isLoading={loader === "init-loader"} className="flex-grow-0">
+            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label="Work Items"
+                  href={`/${workspaceSlug}/projects/${projectId}/issues/`}
+                  icon={<WorkItemsOutline className="h-4 w-4 text-tertiary" />}
+                  isLast
+                />
+              }
+              isLast
+            />
+          </Breadcrumbs>
+          {issuesCount && issuesCount > 0 ? (
+            <Tooltip
+              label={`There are ${issuesCount} ${issuesCount > 1 ? "work items" : "work item"} in this project`}
+              layout="stacked"
+              side="bottom"
+              disabled={isMobile}
+            >
+              <CountChip count={issuesCount} />
+            </Tooltip>
+          ) : null}
+        </div>
+        {currentProjectDetails?.anchor ? (
+          <a
+            href={publishedURL}
+            className="group flex items-center gap-1.5 rounded-sm bg-accent-primary/10 px-2.5 py-1 text-11 font-medium text-accent-primary"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Circle className="h-1.5 w-1.5 fill-accent-primary" strokeWidth={2} />
+            {t("workspace_projects.network.public.title")}
+            <NewTabOutline className="hidden h-3 w-3 group-hover:block" />
+          </a>
+        ) : (
+          <></>
+        )}
+      </Header.LeftItem>
+      <Header.RightItem>
+        <div className="hidden gap-2 md:flex">
+          <HeaderFilters
+            projectId={projectId}
+            currentProjectDetails={currentProjectDetails}
+            workspaceSlug={workspaceSlug}
+            canUserCreateIssue={canUserCreateIssue}
+          />
+        </div>
+        {canUserCreateIssue && (
+          <Button
+            variant="primary"
+            size="lg"
+            onClick={() => {
+              toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+            }}
+          >
+            <div className="block sm:hidden">{t("issue.label", { count: 1 })}</div>
+            <div className="hidden sm:block">{t("issue.add.label")}</div>
+          </Button>
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
new file mode 100644
index 0000000..38bea85
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { AttachOutline, LinkOutline, RelationsOutline, ViewsOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+// plane imports
+import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
+// local imports
+import { IssueAttachmentActionButton } from "./attachments";
+import { IssueLinksActionButton } from "./links";
+import { RelationActionButton } from "./relations";
+import { SubIssuesActionButton } from "./sub-issues";
+import { IssueDetailWidgetButton } from "./widget-button";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled: boolean;
+  issueServiceType: TIssueServiceType;
+  hideWidgets?: TWorkItemWidgets[];
+};
+
+export function IssueDetailWidgetActionButtons(props: Props) {
+  const { workspaceSlug, projectId, issueId, disabled, issueServiceType, hideWidgets } = props;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {!hideWidgets?.includes("sub-work-items") && (
+        <SubIssuesActionButton
+          issueId={issueId}
+          customButton={
+            <IssueDetailWidgetButton
+              title={t("issue.add.sub_issue")}
+              icon={<ViewsOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+              disabled={disabled}
+            />
+          }
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      )}
+      {!hideWidgets?.includes("relations") && (
+        <RelationActionButton
+          issueId={issueId}
+          customButton={
+            <IssueDetailWidgetButton
+              title={t("issue.add.relation")}
+              icon={<RelationsOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+              disabled={disabled}
+            />
+          }
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      )}
+      {!hideWidgets?.includes("links") && (
+        <IssueLinksActionButton
+          customButton={
+            <IssueDetailWidgetButton
+              title={t("issue.add.link")}
+              icon={<LinkOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+              disabled={disabled}
+            />
+          }
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      )}
+      {!hideWidgets?.includes("attachments") && (
+        <IssueAttachmentActionButton
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          customButton={
+            <IssueDetailWidgetButton
+              title={t("common.attach")}
+              icon={<AttachOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+              disabled={disabled}
+            />
+          }
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/content.tsx
new file mode 100644
index 0000000..90c738e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/content.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// local imports
+import { IssueAttachmentItemList } from "../../attachment/attachment-item-list";
+import { useAttachmentOperations } from "./helper";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled: boolean;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const IssueAttachmentsCollapsibleContent = observer(function IssueAttachmentsCollapsibleContent(props: Props) {
+  const { workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  // helper
+  const attachmentHelpers = useAttachmentOperations(workspaceSlug, projectId, issueId, issueServiceType);
+  return (
+    <IssueAttachmentItemList
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+      issueId={issueId}
+      disabled={disabled}
+      attachmentHelpers={attachmentHelpers}
+      issueServiceType={issueServiceType}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
new file mode 100644
index 0000000..e32dfbb
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { setPromiseToast, TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// types
+import type { TAttachmentUploadStatus } from "@/store/issue/issue-details/attachment.store";
+
+export type TAttachmentOperations = {
+  create: (file: File) => Promise<void>;
+  remove: (attachmentId: string) => Promise<void>;
+};
+
+export type TAttachmentSnapshot = {
+  uploadStatus: TAttachmentUploadStatus[] | undefined;
+};
+
+export type TAttachmentHelpers = {
+  operations: TAttachmentOperations;
+  snapshot: TAttachmentSnapshot;
+};
+
+export const useAttachmentOperations = (
+  workspaceSlug: string,
+  projectId: string,
+  issueId: string,
+  issueServiceType: TIssueServiceType = EIssueServiceType.ISSUES
+): TAttachmentHelpers => {
+  const {
+    attachment: { createAttachment, removeAttachment, getAttachmentsUploadStatusByIssueId },
+  } = useIssueDetail(issueServiceType);
+
+  const attachmentOperations: TAttachmentOperations = useMemo(
+    () => ({
+      create: async (file) => {
+        if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+        const attachmentUploadPromise = createAttachment(workspaceSlug, projectId, issueId, file);
+        setPromiseToast(attachmentUploadPromise, {
+          loading: "Uploading attachment...",
+          success: {
+            title: "Attachment uploaded",
+            message: () => "The attachment has been successfully uploaded",
+          },
+          error: {
+            title: "Attachment not uploaded",
+            message: () => "The attachment could not be uploaded",
+          },
+        });
+
+        await attachmentUploadPromise;
+      },
+      remove: async (attachmentId) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+          await removeAttachment(workspaceSlug, projectId, issueId, attachmentId);
+          setToast({
+            message: "The attachment has been successfully removed",
+            type: TOAST_TYPE.SUCCESS,
+            title: "Attachment removed",
+          });
+        } catch (_error) {
+          setToast({
+            message: "The Attachment could not be removed",
+            type: TOAST_TYPE.ERROR,
+            title: "Attachment not removed",
+          });
+        }
+      },
+    }),
+    [workspaceSlug, projectId, issueId, createAttachment, removeAttachment]
+  );
+  const attachmentsUploadStatus = getAttachmentsUploadStatusByIssueId(issueId);
+
+  return {
+    operations: attachmentOperations,
+    snapshot: { uploadStatus: attachmentsUploadStatus },
+  };
+};
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/index.ts b/apps/web/core/components/issues/issue-detail-widgets/attachments/index.ts
new file mode 100644
index 0000000..3c6016a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./content";
+export * from "./title";
+export * from "./root";
+export * from "./quick-action-button";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
new file mode 100644
index 0000000..ff88b1a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import type { FileRejection } from "react-dropzone";
+import { useDropzone } from "react-dropzone";
+import { AddOutline } from "@makeplane/propel/icons";
+// plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// plane web hooks
+import { useFileSize } from "@/hooks/use-file-size";
+// local imports
+import { useAttachmentOperations } from "./helper";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  customButton?: React.ReactNode;
+  disabled?: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export const IssueAttachmentActionButton = observer(function IssueAttachmentActionButton(props: Props) {
+  const { workspaceSlug, projectId, issueId, customButton, disabled = false, issueServiceType } = props;
+  // state
+  const [isLoading, setIsLoading] = useState(false);
+  // store hooks
+  const { setLastWidgetAction, fetchActivities } = useIssueDetail(issueServiceType);
+  // file size
+  const { maxFileSize } = useFileSize();
+  // operations
+  const { operations: attachmentOperations } = useAttachmentOperations(
+    workspaceSlug,
+    projectId,
+    issueId,
+    issueServiceType
+  );
+  // handlers
+  const handleFetchPropertyActivities = useCallback(() => {
+    fetchActivities(workspaceSlug, projectId, issueId);
+  }, [fetchActivities, workspaceSlug, projectId, issueId]);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+      const totalAttachedFiles = acceptedFiles.length + rejectedFiles.length;
+
+      if (rejectedFiles.length === 0) {
+        const currentFile: File = acceptedFiles[0];
+        if (!currentFile || !workspaceSlug) return;
+
+        setIsLoading(true);
+        attachmentOperations
+          .create(currentFile)
+          .catch(() => {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "File could not be attached. Try uploading again.",
+            });
+          })
+          .finally(() => {
+            handleFetchPropertyActivities();
+            setLastWidgetAction("attachments");
+            setIsLoading(false);
+          });
+        return;
+      }
+
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message:
+          totalAttachedFiles > 1
+            ? "Only one file can be uploaded at a time."
+            : `File must be of ${maxFileSize / 1024 / 1024}MB or less in size.`,
+      });
+      return;
+    },
+    [attachmentOperations, maxFileSize, workspaceSlug, handleFetchPropertyActivities, setLastWidgetAction]
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    maxSize: maxFileSize,
+    multiple: false,
+    disabled: isLoading || disabled,
+  });
+
+  return (
+    <div
+      onClick={(e) => {
+        // TODO: Remove extra div and move event propagation to button
+        e.stopPropagation();
+      }}
+    >
+      <button {...getRootProps()} type="button" disabled={disabled}>
+        <input {...getInputProps()} />
+        {customButton ? customButton : <AddOutline className="h-4 w-4" />}
+      </button>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
new file mode 100644
index 0000000..4a78463
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
+import type { TIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { IssueAttachmentsCollapsibleContent } from "./content";
+import { IssueAttachmentsCollapsibleTitle } from "./title";
+import { IssueAttachmentActionButton } from "./quick-action-button";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled?: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export const AttachmentsCollapsible = observer(function AttachmentsCollapsible(props: Props) {
+  const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType } = props;
+  // store hooks
+  const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
+
+  // derived values
+  const isCollapsibleOpen = openWidgets.includes("attachments");
+
+  return (
+    <Collapsible
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("attachments")}
+      trigger={<IssueAttachmentsCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <IssueAttachmentActionButton
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            disabled={disabled}
+            issueServiceType={issueServiceType}
+          />
+        ) : undefined
+      }
+    >
+      <IssueAttachmentsCollapsibleContent
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        issueId={issueId}
+        disabled={disabled}
+        issueServiceType={issueServiceType}
+      />
+    </Collapsible>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
new file mode 100644
index 0000000..4434bfe
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type Props = {
+  issueId: string;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmentsCollapsibleTitle(props: Props) {
+  const { issueId, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail(issueServiceType);
+
+  // derived values
+  const issue = getIssueById(issueId);
+  const attachmentCount = issue?.attachment_count ?? 0;
+
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.attachments")}
+      <span className="flex items-center justify-center">
+        <p className="text-14 leading-3! text-tertiary">{attachmentCount}</p>
+      </span>
+    </span>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/index.ts b/apps/web/core/components/issues/issue-detail-widgets/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx
new file mode 100644
index 0000000..4777261
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useTimeLineRelationOptions } from "@/components/relations";
+// local imports
+import { AttachmentsCollapsible } from "./attachments";
+import { LinksCollapsible } from "./links";
+import { RelationsCollapsible } from "./relations";
+import { SubIssuesCollapsible } from "./sub-issues";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled: boolean;
+  issueServiceType: TIssueServiceType;
+  hideWidgets?: TWorkItemWidgets[];
+};
+
+export const IssueDetailWidgetCollapsibles = observer(function IssueDetailWidgetCollapsibles(props: Props) {
+  const { workspaceSlug, projectId, issueId, disabled, issueServiceType, hideWidgets } = props;
+  // store hooks
+  const {
+    issue: { getIssueById },
+    subIssues: { subIssuesByIssueId },
+    attachment: { getAttachmentsCountByIssueId, getAttachmentsUploadStatusByIssueId },
+    relation: { getRelationCountByIssueId },
+  } = useIssueDetail(issueServiceType);
+  // derived values
+  const issue = getIssueById(issueId);
+  const subIssues = subIssuesByIssueId(issueId);
+  const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
+  const issueRelationsCount = getRelationCountByIssueId(issueId, ISSUE_RELATION_OPTIONS);
+  // render conditions
+  const shouldRenderSubIssues = !!subIssues && subIssues.length > 0 && !hideWidgets?.includes("sub-work-items");
+  const shouldRenderRelations = issueRelationsCount > 0 && !hideWidgets?.includes("relations");
+  const shouldRenderLinks = !!issue?.link_count && issue?.link_count > 0 && !hideWidgets?.includes("links");
+  const attachmentUploads = getAttachmentsUploadStatusByIssueId(issueId);
+  const attachmentsCount = getAttachmentsCountByIssueId(issueId);
+  const shouldRenderAttachments =
+    attachmentsCount > 0 ||
+    (!!attachmentUploads && attachmentUploads.length > 0 && !hideWidgets?.includes("attachments"));
+
+  return (
+    <div className="flex flex-col">
+      {shouldRenderSubIssues && (
+        <SubIssuesCollapsible
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      )}
+      {shouldRenderRelations && (
+        <RelationsCollapsible
+          workspaceSlug={workspaceSlug}
+          issueId={issueId}
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      )}
+      {shouldRenderLinks && (
+        <LinksCollapsible
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      )}
+      {shouldRenderAttachments && (
+        <AttachmentsCollapsible
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
new file mode 100644
index 0000000..9071e3e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ISearchIssueResponse, TIssue, TIssueServiceType, TWorkItemWidgets } from "@plane/types";
+// components
+import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { IssueLinkCreateUpdateModal } from "../issue-detail/links/create-update-link-modal";
+// helpers
+import { CreateUpdateIssueModal } from "../issue-modal/modal";
+import { useLinkOperations } from "./links/helper";
+import { useSubIssueOperations } from "./sub-issues/helper";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issueServiceType: TIssueServiceType;
+  hideWidgets?: TWorkItemWidgets[];
+};
+
+export const IssueDetailWidgetModals = observer(function IssueDetailWidgetModals(props: Props) {
+  const { workspaceSlug, projectId, issueId, issueServiceType, hideWidgets } = props;
+  // store hooks
+  const {
+    isIssueLinkModalOpen,
+    toggleIssueLinkModal: toggleIssueLinkModalStore,
+    setIssueLinkData,
+    isCreateIssueModalOpen,
+    toggleCreateIssueModal,
+    isSubIssuesModalOpen,
+    toggleSubIssuesModal,
+    relationKey,
+    isRelationModalOpen,
+    setRelationKey,
+    setLastWidgetAction,
+    toggleRelationModal,
+    createRelation,
+    issueCrudOperationState,
+    setIssueCrudOperationState,
+  } = useIssueDetail(issueServiceType);
+
+  // helper hooks
+  const subIssueOperations = useSubIssueOperations(issueServiceType);
+  const handleLinkOperations = useLinkOperations(workspaceSlug, projectId, issueId, issueServiceType);
+
+  // handlers
+  const handleIssueCrudState = (
+    key: "create" | "existing",
+    _parentIssueId: string | null,
+    issue: TIssue | null = null
+  ) => {
+    setIssueCrudOperationState({
+      ...issueCrudOperationState,
+      [key]: {
+        toggle: !issueCrudOperationState[key].toggle,
+        parentIssueId: _parentIssueId,
+        issue: issue,
+      },
+    });
+  };
+
+  const handleExistingIssuesModalClose = () => {
+    handleIssueCrudState("existing", null, null);
+    setLastWidgetAction("sub-work-items");
+    toggleSubIssuesModal(null);
+  };
+
+  const handleExistingIssuesModalOnSubmit = async (_issue: ISearchIssueResponse[]) =>
+    subIssueOperations.addSubIssue(
+      workspaceSlug,
+      projectId,
+      issueId,
+      _issue.map((issue) => issue.id)
+    );
+
+  const handleCreateUpdateModalClose = () => {
+    handleIssueCrudState("create", null, null);
+    toggleCreateIssueModal(false);
+    setLastWidgetAction("sub-work-items");
+  };
+
+  const handleCreateUpdateModalOnSubmit = async (_issue: TIssue) => {
+    if (_issue.parent_id) {
+      await subIssueOperations.addSubIssue(workspaceSlug, projectId, _issue.parent_id, [_issue.id]);
+    }
+  };
+
+  const handleIssueLinkModalOnClose = () => {
+    toggleIssueLinkModalStore(false);
+    setLastWidgetAction("links");
+    setIssueLinkData(null);
+  };
+
+  const handleRelationOnClose = () => {
+    setRelationKey(null);
+    toggleRelationModal(null, null);
+    setLastWidgetAction("relations");
+  };
+
+  const handleExistingIssueModalOnSubmit = async (data: ISearchIssueResponse[]) => {
+    if (!relationKey) return;
+    if (data.length === 0) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Please select at least one work item.",
+      });
+      return;
+    }
+
+    await createRelation(
+      workspaceSlug,
+      projectId,
+      issueId,
+      relationKey,
+      data.map((i) => i.id)
+    );
+
+    toggleRelationModal(null, null);
+  };
+
+  // helpers
+  const createUpdateModalData: Partial<TIssue> = {
+    parent_id: issueCrudOperationState?.create?.parentIssueId,
+    project_id: projectId,
+  };
+
+  const existingIssuesModalSearchParams = {
+    sub_issue: true,
+    issue_id: issueCrudOperationState?.existing?.parentIssueId,
+  };
+
+  // render conditions
+  const shouldRenderExistingIssuesModal =
+    !hideWidgets?.includes("sub-work-items") &&
+    issueCrudOperationState?.existing?.toggle &&
+    issueCrudOperationState?.existing?.parentIssueId &&
+    isSubIssuesModalOpen;
+
+  const shouldRenderCreateUpdateModal =
+    !hideWidgets?.includes("sub-work-items") &&
+    issueCrudOperationState?.create?.toggle &&
+    issueCrudOperationState?.create?.parentIssueId &&
+    isCreateIssueModalOpen;
+
+  return (
+    <>
+      {!hideWidgets?.includes("links") && (
+        <IssueLinkCreateUpdateModal
+          isModalOpen={isIssueLinkModalOpen}
+          handleOnClose={handleIssueLinkModalOnClose}
+          linkOperations={handleLinkOperations}
+          issueServiceType={issueServiceType}
+        />
+      )}
+
+      {shouldRenderCreateUpdateModal && (
+        <CreateUpdateIssueModal
+          isOpen={issueCrudOperationState?.create?.toggle}
+          data={createUpdateModalData}
+          onClose={handleCreateUpdateModalClose}
+          onSubmit={handleCreateUpdateModalOnSubmit}
+          isProjectSelectionDisabled
+        />
+      )}
+
+      {shouldRenderExistingIssuesModal && (
+        <ExistingIssuesListModal
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          isOpen={issueCrudOperationState?.existing?.toggle}
+          handleClose={handleExistingIssuesModalClose}
+          searchParams={existingIssuesModalSearchParams}
+          handleOnSubmit={handleExistingIssuesModalOnSubmit}
+        />
+      )}
+
+      {!hideWidgets?.includes("relations") && (
+        <ExistingIssuesListModal
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          isOpen={isRelationModalOpen?.issueId === issueId && isRelationModalOpen?.relationType === relationKey}
+          handleClose={handleRelationOnClose}
+          searchParams={{ issue_relation: true, issue_id: issueId }}
+          handleOnSubmit={handleExistingIssueModalOnSubmit}
+          workspaceLevelToggle
+        />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/content.tsx
new file mode 100644
index 0000000..3ffe995
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/content.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type { TIssueServiceType } from "@plane/types";
+// components
+import { LinkList } from "../../issue-detail/links";
+// helper
+import { useLinkOperations } from "./helper";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export function IssueLinksCollapsibleContent(props: Props) {
+  const { workspaceSlug, projectId, issueId, disabled, issueServiceType } = props;
+
+  // helper
+  const handleLinkOperations = useLinkOperations(workspaceSlug, projectId, issueId, issueServiceType);
+
+  return (
+    <LinkList
+      issueId={issueId}
+      linkOperations={handleLinkOperations}
+      disabled={disabled}
+      issueServiceType={issueServiceType}
+    />
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx
new file mode 100644
index 0000000..c1bb10f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/helper.tsx
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssueLink, TIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import type { TLinkOperations } from "../../issue-detail/links";
+
+export const useLinkOperations = (
+  workspaceSlug: string,
+  projectId: string,
+  issueId: string,
+  issueServiceType: TIssueServiceType
+): TLinkOperations => {
+  const { createLink, updateLink, removeLink } = useIssueDetail(issueServiceType);
+  // i18n
+  const { t } = useTranslation();
+
+  const handleLinkOperations: TLinkOperations = useMemo(
+    () => ({
+      create: async (data: Partial<TIssueLink>) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+          await createLink(workspaceSlug, projectId, issueId, data);
+          setToast({
+            message: t("links.toasts.created.message"),
+            type: TOAST_TYPE.SUCCESS,
+            title: t("links.toasts.created.title"),
+          });
+        } catch (error: any) {
+          setToast({
+            message: error?.data?.error ?? t("links.toasts.not_created.message"),
+            type: TOAST_TYPE.ERROR,
+            title: t("links.toasts.not_created.title"),
+          });
+          throw error;
+        }
+      },
+      update: async (linkId: string, data: Partial<TIssueLink>) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+          await updateLink(workspaceSlug, projectId, issueId, linkId, data);
+          setToast({
+            message: t("links.toasts.updated.message"),
+            type: TOAST_TYPE.SUCCESS,
+            title: t("links.toasts.updated.title"),
+          });
+        } catch (error: any) {
+          setToast({
+            message: error?.data?.error ?? t("links.toasts.not_updated.message"),
+            type: TOAST_TYPE.ERROR,
+            title: t("links.toasts.not_updated.title"),
+          });
+          throw error;
+        }
+      },
+      remove: async (linkId: string) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+          await removeLink(workspaceSlug, projectId, issueId, linkId);
+          setToast({
+            message: t("links.toasts.removed.message"),
+            type: TOAST_TYPE.SUCCESS,
+            title: t("links.toasts.removed.title"),
+          });
+        } catch {
+          setToast({
+            message: t("links.toasts.not_removed.message"),
+            type: TOAST_TYPE.ERROR,
+            title: t("links.toasts.not_removed.title"),
+          });
+        }
+      },
+    }),
+    [workspaceSlug, projectId, issueId, createLink, updateLink, removeLink, t]
+  );
+
+  return handleLinkOperations;
+};
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/index.ts b/apps/web/core/components/issues/issue-detail-widgets/links/index.ts
new file mode 100644
index 0000000..3c6016a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./content";
+export * from "./title";
+export * from "./root";
+export * from "./quick-action-button";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx
new file mode 100644
index 0000000..054ff87
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { AddOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type Props = {
+  customButton?: React.ReactNode;
+  disabled?: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export const IssueLinksActionButton = observer(function IssueLinksActionButton(props: Props) {
+  const { customButton, disabled = false, issueServiceType } = props;
+  // store hooks
+  const { toggleIssueLinkModal } = useIssueDetail(issueServiceType);
+
+  // handlers
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleIssueLinkModal(true);
+  };
+
+  return (
+    <button type="button" onClick={handleOnClick} disabled={disabled}>
+      {customButton ? customButton : <AddOutline className="h-4 w-4" />}
+    </button>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
new file mode 100644
index 0000000..0f30f4e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/root.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
+import type { TIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { IssueLinksCollapsibleContent } from "./content";
+import { IssueLinksCollapsibleTitle } from "./title";
+import { IssueLinksActionButton } from "./quick-action-button";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled?: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export const LinksCollapsible = observer(function LinksCollapsible(props: Props) {
+  const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType } = props;
+  // store hooks
+  const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
+  // derived values
+  const isCollapsibleOpen = openWidgets.includes("links");
+
+  return (
+    <Collapsible
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("links")}
+      trigger={<IssueLinksCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <IssueLinksActionButton issueServiceType={issueServiceType} disabled={disabled} />
+        ) : undefined
+      }
+    >
+      <IssueLinksCollapsibleContent
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        issueId={issueId}
+        disabled={disabled}
+        issueServiceType={issueServiceType}
+      />
+    </Collapsible>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
new file mode 100644
index 0000000..5c499d5
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/links/title.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type Props = {
+  issueId: string;
+  issueServiceType: TIssueServiceType;
+};
+
+export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibleTitle(props: Props) {
+  const { issueId, issueServiceType } = props;
+  // translation
+  const { t } = useTranslation();
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail(issueServiceType);
+
+  // derived values
+  const issue = getIssueById(issueId);
+
+  const linksCount = issue?.link_count ?? 0;
+
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.links")}
+      <span className="flex items-center justify-center">
+        <p className="text-14 leading-3! text-tertiary">{linksCount}</p>
+      </span>
+    </span>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
new file mode 100644
index 0000000..043750f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/content.tsx
@@ -0,0 +1,245 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
+import { useTranslation } from "@plane/i18n";
+import type { TIssue, TIssueServiceType, TIssueRelationTypes } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+import { useTimeLineRelationOptions } from "@/components/relations";
+import { CreateUpdateEpicModal } from "@/components/epic-modal";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// helper
+import { DeleteIssueModal } from "../../delete-issue-modal";
+import { RelationIssueList } from "../../relations/issue-list";
+import { useRelationOperations } from "./helper";
+
+type Props = {
+  workspaceSlug: string;
+  issueId: string;
+  disabled: boolean;
+  issueServiceType?: TIssueServiceType;
+};
+
+type TIssueCrudState = { toggle: boolean; issueId: string | undefined; issue: TIssue | undefined };
+
+export type TRelationObject = {
+  key: TIssueRelationTypes;
+  i18n_label: string;
+  className: string;
+  icon: (size: number) => React.ReactElement;
+  placeholder: string;
+};
+
+export const RelationsCollapsibleContent = observer(function RelationsCollapsibleContent(props: Props) {
+  const { workspaceSlug, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // state
+  const [issueCrudState, setIssueCrudState] = useState<{
+    update: TIssueCrudState;
+    delete: TIssueCrudState;
+    removeRelation: TIssueCrudState & { relationKey: string | undefined; relationIssueId: string | undefined };
+  }>({
+    update: {
+      toggle: false,
+      issueId: undefined,
+      issue: undefined,
+    },
+    delete: {
+      toggle: false,
+      issueId: undefined,
+      issue: undefined,
+    },
+    removeRelation: {
+      toggle: false,
+      issueId: undefined,
+      issue: undefined,
+      relationKey: undefined,
+      relationIssueId: undefined,
+    },
+  });
+
+  // store hooks
+  const {
+    relation: { getRelationsByIssueId, removeRelation },
+    toggleDeleteIssueModal,
+    toggleCreateIssueModal,
+  } = useIssueDetail(issueServiceType);
+
+  // helper
+  const issueOperations = useRelationOperations();
+  const epicOperations = useRelationOperations(EIssueServiceType.EPICS);
+
+  // derived values
+  const relations = getRelationsByIssueId(issueId);
+  const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
+
+  const handleIssueCrudState = (
+    key: "update" | "delete" | "removeRelation",
+    _issueId: string | null,
+    issue: TIssue | null = null,
+    relationKey?: TIssueRelationTypes | null,
+    relationIssueId?: string | null
+  ) => {
+    setIssueCrudState((prevState) => ({
+      ...prevState,
+      [key]: {
+        toggle: !prevState[key].toggle,
+        issueId: _issueId,
+        issue: issue,
+        relationKey: relationKey,
+        relationIssueId: relationIssueId,
+      },
+    }));
+  };
+
+  // if relations are not available, return null
+  if (!relations) return null;
+
+  // map relations to array
+  const relationsArray = (Object.keys(relations) as TIssueRelationTypes[])
+    .filter((relationKey) => !!ISSUE_RELATION_OPTIONS[relationKey])
+    .map((relationKey) => {
+      const issueIds = relations[relationKey];
+      const issueRelationOption = ISSUE_RELATION_OPTIONS[relationKey];
+      return {
+        relationKey: relationKey,
+        issueIds: issueIds,
+        icon: issueRelationOption?.icon,
+        label: issueRelationOption?.i18n_label ? t(issueRelationOption?.i18n_label) : "",
+        className: issueRelationOption?.className,
+      };
+    });
+
+  // filter out relations with no issues
+  const filteredRelationsArray = relationsArray.filter((relation) => relation.issueIds.length > 0);
+
+  const shouldRenderIssueDeleteModal =
+    issueCrudState?.delete?.toggle &&
+    issueCrudState?.delete?.issue &&
+    issueCrudState.delete.issueId &&
+    issueCrudState.delete.issue.id;
+
+  const shouldRenderIssueUpdateModal = issueCrudState?.update?.toggle && issueCrudState?.update?.issue;
+
+  return (
+    <>
+      <div className="gap- flex flex-col">
+        {filteredRelationsArray.map((relation) => (
+          <div key={relation.relationKey}>
+            <Collapsible
+              defaultOpen
+              icon={
+                relation.icon ? (
+                  <span className={cn("flex items-center justify-center rounded p-0.5", relation.className)}>
+                    {relation.icon(14)}
+                  </span>
+                ) : undefined
+              }
+              trigger={<span className="text-13 leading-5 font-medium">{relation.label}</span>}
+            >
+              {/* Cancels this nested Collapsible's own panel inset so rows realign under
+                  the outer Relations collapsible's single inset instead of stacking two. */}
+              <div className="-mx-3">
+                <RelationIssueList
+                  workspaceSlug={workspaceSlug}
+                  issueId={issueId}
+                  relationKey={relation.relationKey}
+                  issueIds={relation.issueIds}
+                  disabled={disabled}
+                  handleIssueCrudState={handleIssueCrudState}
+                  issueServiceType={issueServiceType}
+                />
+              </div>
+            </Collapsible>
+          </div>
+        ))}
+      </div>
+
+      {shouldRenderIssueDeleteModal && (
+        <DeleteIssueModal
+          isOpen={issueCrudState?.delete?.toggle}
+          handleClose={() => {
+            handleIssueCrudState("delete", null, null);
+            toggleDeleteIssueModal(null);
+          }}
+          data={issueCrudState?.delete?.issue as TIssue}
+          onSubmit={async () => {
+            if (
+              issueCrudState.removeRelation.issueId &&
+              issueCrudState.removeRelation.issue?.project_id &&
+              issueCrudState.removeRelation.relationKey &&
+              issueCrudState.removeRelation.relationIssueId
+            ) {
+              await removeRelation(
+                workspaceSlug,
+                issueCrudState.removeRelation.issue.project_id,
+                issueCrudState.removeRelation.issueId,
+                issueCrudState.removeRelation.relationKey as TIssueRelationTypes,
+                issueCrudState.removeRelation.relationIssueId,
+                true
+              );
+            }
+            if (
+              issueCrudState.delete.issue &&
+              issueCrudState.delete.issue.id &&
+              issueCrudState.delete.issue.project_id
+            ) {
+              const deleteOperation = issueCrudState.delete.issue?.is_epic
+                ? epicOperations.remove
+                : issueOperations.remove;
+              await deleteOperation(
+                workspaceSlug,
+                issueCrudState.delete.issue?.project_id,
+                issueCrudState?.delete?.issue?.id
+              );
+            }
+          }}
+          isEpic={!!issueCrudState.delete.issue?.is_epic}
+        />
+      )}
+
+      {shouldRenderIssueUpdateModal && (
+        <>
+          {issueCrudState?.update?.issue?.is_epic ? (
+            <CreateUpdateEpicModal
+              isOpen={issueCrudState?.update?.toggle}
+              onClose={() => {
+                handleIssueCrudState("update", null, null);
+                toggleCreateIssueModal(false);
+              }}
+              data={issueCrudState?.update?.issue ?? undefined}
+              onSubmit={async (_issue: TIssue) => {
+                if (!_issue.id || !_issue.project_id) return;
+                await epicOperations.update(workspaceSlug, _issue.project_id, _issue.id, _issue);
+              }}
+            />
+          ) : (
+            <CreateUpdateIssueModal
+              isOpen={issueCrudState?.update?.toggle}
+              onClose={() => {
+                handleIssueCrudState("update", null, null);
+                toggleCreateIssueModal(false);
+              }}
+              data={issueCrudState?.update?.issue ?? undefined}
+              onSubmit={async (_issue: TIssue) => {
+                if (!_issue.id || !_issue.project_id) return;
+                await issueOperations.update(workspaceSlug, _issue.project_id, _issue.id, _issue);
+              }}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
new file mode 100644
index 0000000..4842a9d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { copyUrlToClipboard } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+export type TRelationIssueOperations = {
+  copyLink: (path: string) => void;
+  update: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+};
+
+export const useRelationOperations = (
+  issueServiceType: TIssueServiceType = EIssueServiceType.ISSUES
+): TRelationIssueOperations => {
+  const { updateIssue, removeIssue } = useIssueDetail(issueServiceType);
+  const { t } = useTranslation();
+  // derived values
+  const entityName = issueServiceType === EIssueServiceType.ISSUES ? "Work item" : "Epic";
+
+  const issueOperations: TRelationIssueOperations = useMemo(
+    () => ({
+      copyLink: async (path) => {
+        await copyUrlToClipboard(path);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("common.link_copied"),
+          message: t("entity.link_copied_to_clipboard", { entity: entityName }),
+        });
+      },
+      update: async (workspaceSlug, projectId, issueId, data) => {
+        try {
+          await updateIssue(workspaceSlug, projectId, issueId, data);
+          setToast({
+            title: t("toast.success"),
+            type: TOAST_TYPE.SUCCESS,
+            message: t("entity.update.success", { entity: entityName }),
+          });
+        } catch (_error) {
+          setToast({
+            title: t("toast.error"),
+            type: TOAST_TYPE.ERROR,
+            message: t("entity.update.failed", { entity: entityName }),
+          });
+        }
+      },
+      remove: async (workspaceSlug, projectId, issueId) => {
+        return removeIssue(workspaceSlug, projectId, issueId);
+      },
+    }),
+    [entityName, removeIssue, t, updateIssue]
+  );
+
+  return issueOperations;
+};
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/index.ts b/apps/web/core/components/issues/issue-detail-widgets/relations/index.ts
new file mode 100644
index 0000000..3c6016a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./content";
+export * from "./title";
+export * from "./root";
+export * from "./quick-action-button";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
new file mode 100644
index 0000000..c70f7da
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TIssueServiceType } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { useTimeLineRelationOptions } from "@/components/relations";
+// types
+import type { TIssueRelationTypes } from "@plane/types";
+
+type Props = {
+  issueId: string;
+  customButton?: React.ReactNode;
+  disabled?: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export const RelationActionButton = observer(function RelationActionButton(props: Props) {
+  const { customButton, issueId, disabled = false, issueServiceType } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const { toggleRelationModal, setRelationKey } = useIssueDetail(issueServiceType);
+
+  const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
+
+  // handlers
+  const handleOnClick = (relationKey: TIssueRelationTypes) => {
+    setRelationKey(relationKey);
+    toggleRelationModal(issueId, relationKey);
+  };
+
+  // button element
+  const customButtonElement = customButton ? <>{customButton}</> : <AddOutline className="h-4 w-4" />;
+
+  return (
+    <CustomMenu
+      customButton={customButtonElement}
+      placement="bottom-start"
+      disabled={disabled}
+      maxHeight="lg"
+      closeOnSelect
+    >
+      {Object.values(ISSUE_RELATION_OPTIONS).map((item, index) => {
+        if (!item) return <></>;
+
+        return (
+          <CustomMenu.MenuItem
+            // oxlint-disable-next-line react/no-array-index-key
+            key={index}
+            onClick={() => {
+              handleOnClick(item.key);
+            }}
+          >
+            <div className="flex items-center gap-2">
+              {item.icon(12)}
+              <span>{t(item.i18n_label)}</span>
+            </div>
+          </CustomMenu.MenuItem>
+        );
+      })}
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
new file mode 100644
index 0000000..b18d72c
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/root.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
+import type { TIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { RelationsCollapsibleContent } from "./content";
+import { RelationsCollapsibleTitle } from "./title";
+import { RelationActionButton } from "./quick-action-button";
+
+type Props = {
+  workspaceSlug: string;
+  issueId: string;
+  disabled?: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export const RelationsCollapsible = observer(function RelationsCollapsible(props: Props) {
+  const { workspaceSlug, issueId, disabled = false, issueServiceType } = props;
+  // store hooks
+  const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
+  // derived values
+  const isCollapsibleOpen = openWidgets.includes("relations");
+
+  return (
+    <Collapsible
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("relations")}
+      trigger={<RelationsCollapsibleTitle issueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen && !disabled ? (
+          <RelationActionButton issueId={issueId} disabled={disabled} issueServiceType={issueServiceType} />
+        ) : undefined
+      }
+    >
+      <RelationsCollapsibleContent
+        workspaceSlug={workspaceSlug}
+        issueId={issueId}
+        disabled={disabled}
+        issueServiceType={issueServiceType}
+      />
+    </Collapsible>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
new file mode 100644
index 0000000..cfb9468
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/relations/title.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { useTimeLineRelationOptions } from "@/components/relations";
+
+type Props = {
+  issueId: string;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleTitle(props: Props) {
+  const { issueId, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { t } = useTranslation();
+  // store hook
+  const {
+    relation: { getRelationCountByIssueId },
+  } = useIssueDetail(issueServiceType);
+
+  const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
+  // derived values
+  const relationsCount = getRelationCountByIssueId(issueId, ISSUE_RELATION_OPTIONS);
+
+  return (
+    <span className="inline-flex items-center gap-2">
+      {t("common.relations")}
+      <span className="flex items-center justify-center">
+        <p className="text-14 leading-3! text-tertiary">{relationsCount}</p>
+      </span>
+    </span>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/root.tsx
new file mode 100644
index 0000000..2218ec3
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/root.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// plane imports
+import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
+// local imports
+import { IssueDetailWidgetActionButtons } from "./action-buttons";
+import { IssueDetailWidgetCollapsibles } from "./issue-detail-widget-collapsibles";
+import { IssueDetailWidgetModals } from "./issue-detail-widget-modals";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled: boolean;
+  renderWidgetModals?: boolean;
+  issueServiceType: TIssueServiceType;
+  hideWidgets?: TWorkItemWidgets[];
+};
+
+export function IssueDetailWidgets(props: Props) {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    disabled,
+    renderWidgetModals = true,
+    issueServiceType,
+    hideWidgets,
+  } = props;
+
+  return (
+    <>
+      <div className="flex flex-col space-y-4">
+        <IssueDetailWidgetActionButtons
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+          hideWidgets={hideWidgets}
+        />
+        <IssueDetailWidgetCollapsibles
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+          hideWidgets={hideWidgets}
+        />
+      </div>
+      {renderWidgetModals && (
+        <IssueDetailWidgetModals
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          issueServiceType={issueServiceType}
+          hideWidgets={hideWidgets}
+        />
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx
new file mode 100644
index 0000000..0dbf8c8
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx
@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState, useCallback } from "react";
+import { observer } from "mobx-react";
+import type { TIssue, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
+// components
+import { DeleteIssueModal } from "@/components/issues/delete-issue-modal";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { CreateUpdateIssueModal } from "../../issue-modal/modal";
+import { useSubIssueOperations } from "./helper";
+import { SubIssuesListRoot } from "./issues-list/root";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssueId: string;
+  disabled: boolean;
+  issueServiceType?: TIssueServiceType;
+};
+
+type TIssueCrudState = { toggle: boolean; parentIssueId: string | undefined; issue: TIssue | undefined };
+
+export const SubIssuesCollapsibleContent = observer(function SubIssuesCollapsibleContent(props: Props) {
+  const { workspaceSlug, projectId, parentIssueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  // state
+  const [issueCrudState, setIssueCrudState] = useState<{
+    create: TIssueCrudState;
+    existing: TIssueCrudState;
+    update: TIssueCrudState;
+    delete: TIssueCrudState;
+  }>({
+    create: {
+      toggle: false,
+      parentIssueId: undefined,
+      issue: undefined,
+    },
+    existing: {
+      toggle: false,
+      parentIssueId: undefined,
+      issue: undefined,
+    },
+    update: {
+      toggle: false,
+      parentIssueId: undefined,
+      issue: undefined,
+    },
+    delete: {
+      toggle: false,
+      parentIssueId: undefined,
+      issue: undefined,
+    },
+  });
+  // store hooks
+  const {
+    toggleCreateIssueModal,
+    toggleDeleteIssueModal,
+    subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
+  } = useIssueDetail(issueServiceType);
+
+  // helpers
+  const subIssueOperations = useSubIssueOperations(issueServiceType);
+  const subIssueHelpers = subIssueHelpersByIssueId(`${parentIssueId}_root`);
+
+  // handler
+  const handleIssueCrudState = useCallback(
+    (key: "create" | "existing" | "update" | "delete", _parentIssueId: string | null, issue: TIssue | null = null) => {
+      setIssueCrudState({
+        ...issueCrudState,
+        [key]: {
+          toggle: !issueCrudState[key].toggle,
+          parentIssueId: _parentIssueId,
+          issue,
+        },
+      });
+    },
+    [issueCrudState]
+  );
+
+  const handleFetchSubIssues = useCallback(async () => {
+    const currentSubIssueHelpers = subIssueHelpersByIssueId(`${parentIssueId}_root`);
+    if (!currentSubIssueHelpers.issue_visibility.includes(parentIssueId)) {
+      try {
+        setSubIssueHelpers(`${parentIssueId}_root`, "preview_loader", parentIssueId);
+        await subIssueOperations.fetchSubIssues(workspaceSlug, projectId, parentIssueId);
+        setSubIssueHelpers(`${parentIssueId}_root`, "issue_visibility", parentIssueId);
+      } catch (error) {
+        console.error("Error fetching sub-work items:", error);
+      } finally {
+        setSubIssueHelpers(`${parentIssueId}_root`, "preview_loader", "");
+      }
+    }
+  }, [parentIssueId, projectId, setSubIssueHelpers, subIssueHelpersByIssueId, subIssueOperations, workspaceSlug]);
+
+  useEffect(() => {
+    handleFetchSubIssues();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parentIssueId]);
+
+  // render conditions
+  const shouldRenderDeleteIssueModal =
+    issueCrudState?.delete?.toggle &&
+    issueCrudState?.delete?.issue &&
+    issueCrudState.delete.parentIssueId &&
+    issueCrudState.delete.issue.id;
+
+  const shouldRenderUpdateIssueModal = issueCrudState?.update?.toggle && issueCrudState?.update?.issue;
+
+  return (
+    <>
+      {subIssueHelpers.issue_visibility.includes(parentIssueId) && (
+        <SubIssuesListRoot
+          storeType={EIssuesStoreType.PROJECT}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          parentIssueId={parentIssueId}
+          rootIssueId={parentIssueId}
+          spacingLeft={6}
+          canEdit={!disabled}
+          handleIssueCrudState={handleIssueCrudState}
+          subIssueOperations={subIssueOperations}
+          issueServiceType={issueServiceType}
+        />
+      )}
+
+      {shouldRenderDeleteIssueModal && (
+        <DeleteIssueModal
+          isOpen={issueCrudState?.delete?.toggle}
+          handleClose={() => {
+            handleIssueCrudState("delete", null, null);
+            toggleDeleteIssueModal(null);
+          }}
+          data={issueCrudState?.delete?.issue as TIssue}
+          onSubmit={async () =>
+            await subIssueOperations.deleteSubIssue(
+              workspaceSlug,
+              projectId,
+              issueCrudState?.delete?.parentIssueId as string,
+              issueCrudState?.delete?.issue?.id as string
+            )
+          }
+          isSubIssue
+        />
+      )}
+
+      {shouldRenderUpdateIssueModal && (
+        <CreateUpdateIssueModal
+          isOpen={issueCrudState?.update?.toggle}
+          onClose={() => {
+            handleIssueCrudState("update", null, null);
+            toggleCreateIssueModal(false);
+          }}
+          data={issueCrudState?.update?.issue ?? undefined}
+          onSubmit={async (_issue: TIssue) => {
+            await subIssueOperations.updateSubIssue(
+              workspaceSlug,
+              projectId,
+              parentIssueId,
+              _issue.id,
+              _issue,
+              issueCrudState?.update?.issue,
+              true
+            );
+          }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
new file mode 100644
index 0000000..38eabc4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/display-filters.tsx
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+import { PreferencesOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { IIssueDisplayFilterOptions, ILayoutDisplayFiltersOptions, IIssueDisplayProperties } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import {
+  FilterDisplayProperties,
+  FilterGroupBy,
+  FilterOrderBy,
+  FiltersDropdown,
+} from "@/components/issues/issue-layouts/filters";
+import { isDisplayFiltersApplied } from "@/components/issues/issue-layouts/utils";
+type TSubIssueDisplayFiltersProps = {
+  displayProperties: IIssueDisplayProperties;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
+  handleDisplayPropertiesUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+  isEpic?: boolean;
+};
+
+export const SubIssueDisplayFilters = observer(function SubIssueDisplayFilters(props: TSubIssueDisplayFiltersProps) {
+  const {
+    isEpic = false,
+    displayProperties,
+    layoutDisplayFiltersOptions,
+    handleDisplayPropertiesUpdate,
+    handleDisplayFiltersUpdate,
+    displayFilters,
+  } = props;
+
+  const isFilterApplied = useMemo(
+    () => isDisplayFiltersApplied({ displayProperties, displayFilters }),
+    [displayProperties, displayFilters]
+  );
+
+  return (
+    <>
+      {layoutDisplayFiltersOptions?.display_filters && layoutDisplayFiltersOptions?.display_properties.length > 0 && (
+        <FiltersDropdown
+          placement="bottom-end"
+          menuButton={
+            <div
+              className={cn(
+                "relative rounded-sm p-1 transition-all duration-200",
+                isFilterApplied && "bg-accent-primary/20"
+              )}
+            >
+              {isFilterApplied && <span className="absolute -top-1 -right-1 rounded-full bg-accent-primary p-1" />}
+              <PreferencesOutline className="h-3.5 w-3.5 text-primary" />
+            </div>
+          }
+        >
+          <div className="vertical-scrollbar relative scrollbar-sm h-full max-h-[25rem] w-full divide-y divide-subtle-1 overflow-hidden overflow-y-auto px-2.5 text-left">
+            {/* display properties */}
+            <div className="py-2">
+              <FilterDisplayProperties
+                displayProperties={displayProperties}
+                displayPropertiesToRender={layoutDisplayFiltersOptions.display_properties}
+                handleUpdate={handleDisplayPropertiesUpdate}
+                isEpic={isEpic}
+              />
+            </div>
+
+            {/* group by */}
+            <div className="py-2">
+              <FilterGroupBy
+                displayFilters={displayFilters}
+                groupByOptions={layoutDisplayFiltersOptions?.display_filters.group_by ?? []}
+                handleUpdate={(val) =>
+                  handleDisplayFiltersUpdate({
+                    group_by: val,
+                  })
+                }
+                ignoreGroupedFilters={[]}
+              />
+            </div>
+
+            {/* order by */}
+            {!isEmpty(layoutDisplayFiltersOptions?.display_filters?.order_by) && (
+              <div className="py-2">
+                <FilterOrderBy
+                  selectedOrderBy={displayFilters?.order_by}
+                  handleUpdate={(val) =>
+                    handleDisplayFiltersUpdate({
+                      order_by: val,
+                    })
+                  }
+                  orderByOptions={layoutDisplayFiltersOptions?.display_filters.order_by ?? []}
+                />
+              </div>
+            )}
+          </div>
+        </FiltersDropdown>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
new file mode 100644
index 0000000..4f9a681
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, FilterOutline, SearchOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+import type { IIssueFilterOptions, IState } from "@plane/types";
+import { cn } from "@plane/utils";
+import {
+  FilterAssignees,
+  FilterDueDate,
+  FilterPriority,
+  FilterProjects,
+  FiltersDropdown,
+  FilterStartDate,
+  FilterState,
+  FilterStateGroup,
+} from "@/components/issues/issue-layouts/filters";
+import { isFiltersApplied } from "@/components/issues/issue-layouts/utils";
+type TSubIssueFiltersProps = {
+  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+  filters: IIssueFilterOptions;
+  memberIds: string[] | undefined;
+  states?: IState[];
+  availableFilters: (keyof IIssueFilterOptions)[];
+};
+
+export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssueFiltersProps) {
+  const { handleFiltersUpdate, filters, memberIds, states, availableFilters } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  const isFilterEnabled = (filter: keyof IIssueFilterOptions) => !!availableFilters.includes(filter);
+
+  const isFilterApplied = useMemo(() => isFiltersApplied(filters), [filters]);
+
+  return (
+    <>
+      <FiltersDropdown
+        placement="bottom-end"
+        menuButton={
+          <div
+            className={cn(
+              "relative rounded-sm p-1 transition-all duration-200",
+              isFilterApplied && "bg-accent-primary/20"
+            )}
+          >
+            {isFilterApplied && <span className="absolute -top-1 -right-1 rounded-full bg-accent-primary p-1" />}
+            <FilterOutline className="h-3.5 w-3.5 text-primary" />
+          </div>
+        }
+      >
+        <div className="flex max-h-[350px] flex-col overflow-hidden">
+          <div className="bg-surface-1 p-2.5 pb-0">
+            <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+              <SearchOutline className="text-placeholder" width={12} height={12} />
+              <input
+                type="text"
+                className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
+                placeholder={t("common.search.label")}
+                value={filtersSearchQuery}
+                onChange={(e) => setFiltersSearchQuery(e.target.value)}
+              />
+              {filtersSearchQuery !== "" && (
+                <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+                  <CloseOutline className="text-tertiary" height={12} width={12} />
+                </button>
+              )}
+            </div>
+          </div>
+          <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 text-left">
+            {/* Priority */}
+            {isFilterEnabled("priority") && (
+              <div className="py-2">
+                <FilterPriority
+                  appliedFilters={filters.priority ?? null}
+                  handleUpdate={(val) => handleFiltersUpdate("priority", val)}
+                  searchQuery={filtersSearchQuery}
+                />
+              </div>
+            )}
+
+            {/* state group */}
+            {isFilterEnabled("state_group") && (
+              <div className="py-2">
+                <FilterStateGroup
+                  appliedFilters={filters.state_group ?? null}
+                  handleUpdate={(val) => handleFiltersUpdate("state_group", val)}
+                  searchQuery={filtersSearchQuery}
+                />
+              </div>
+            )}
+
+            {/* State */}
+            {isFilterEnabled("state") && (
+              <div className="py-2">
+                <FilterState
+                  appliedFilters={filters.state ?? null}
+                  handleUpdate={(val) => handleFiltersUpdate("state", val)}
+                  searchQuery={filtersSearchQuery}
+                  states={states}
+                />
+              </div>
+            )}
+
+            {/* Projects */}
+            {isFilterEnabled("project") && (
+              <div className="py-2">
+                <FilterProjects
+                  appliedFilters={filters.project ?? null}
+                  handleUpdate={(val) => handleFiltersUpdate("project", val)}
+                  searchQuery={filtersSearchQuery}
+                />
+              </div>
+            )}
+
+            {/* Assignees */}
+            {isFilterEnabled("assignees") && (
+              <div className="py-2">
+                <FilterAssignees
+                  appliedFilters={filters.assignees ?? null}
+                  handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
+                  memberIds={memberIds}
+                  searchQuery={filtersSearchQuery}
+                />
+              </div>
+            )}
+
+            {/* Start Date */}
+            {isFilterEnabled("start_date") && (
+              <div className="py-2">
+                <FilterStartDate
+                  appliedFilters={filters.start_date ?? null}
+                  handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+                  searchQuery={filtersSearchQuery}
+                />
+              </div>
+            )}
+
+            {/* Target Date */}
+            {isFilterEnabled("target_date") && (
+              <div className="py-2">
+                <FilterDueDate
+                  appliedFilters={filters.target_date ?? null}
+                  handleUpdate={(val) => handleFiltersUpdate("target_date", val)}
+                  searchQuery={filtersSearchQuery}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </FiltersDropdown>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
new file mode 100644
index 0000000..8cf524e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/helper.ts
@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssueServiceType, TSubIssueOperations } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { copyUrlToClipboard } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+export const useSubIssueOperations = (issueServiceType: TIssueServiceType): TSubIssueOperations => {
+  // translation
+  const { t } = useTranslation();
+  // store hooks
+  const {
+    subIssues: { setSubIssueHelpers },
+    createSubIssues,
+    fetchSubIssues,
+    updateSubIssue,
+    deleteSubIssue,
+    removeSubIssue,
+  } = useIssueDetail(issueServiceType);
+
+  const subIssueOperations: TSubIssueOperations = useMemo(
+    () => ({
+      copyLink: async (path) => {
+        await copyUrlToClipboard(path);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("common.link_copied"),
+          message: t("entity.link_copied_to_clipboard", {
+            entity:
+              issueServiceType === EIssueServiceType.ISSUES
+                ? t("common.sub_work_items", { count: 1 })
+                : t("issue.label", { count: 1 }),
+          }),
+        });
+      },
+      fetchSubIssues: async (workspaceSlug, projectId, parentIssueId) => {
+        try {
+          await fetchSubIssues(workspaceSlug, projectId, parentIssueId);
+        } catch {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("entity.fetch.failed", {
+              entity:
+                issueServiceType === EIssueServiceType.ISSUES
+                  ? t("common.sub_work_items", { count: 2 })
+                  : t("issue.label", { count: 2 }),
+            }),
+          });
+        }
+      },
+      addSubIssue: async (workspaceSlug, projectId, parentIssueId, issueIds) => {
+        try {
+          await createSubIssues(workspaceSlug, projectId, parentIssueId, issueIds);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("toast.success"),
+            message: t("entity.add.success", {
+              entity:
+                issueServiceType === EIssueServiceType.ISSUES
+                  ? t("common.sub_work_items")
+                  : t("issue.label", { count: issueIds.length }),
+            }),
+          });
+        } catch {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("entity.add.failed", {
+              entity:
+                issueServiceType === EIssueServiceType.ISSUES
+                  ? t("common.sub_work_items")
+                  : t("issue.label", { count: issueIds.length }),
+            }),
+          });
+        }
+      },
+      updateSubIssue: async (
+        workspaceSlug,
+        projectId,
+        parentIssueId,
+        issueId,
+        issueData,
+        oldIssue = {},
+        fromModal = false
+      ) => {
+        try {
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+          await updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, issueData, oldIssue, fromModal);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("toast.success"),
+            message: t("sub_work_item.update.success"),
+          });
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("sub_work_item.update.error"),
+          });
+        }
+      },
+      removeSubIssue: async (workspaceSlug, projectId, parentIssueId, issueId) => {
+        try {
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+          await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("toast.success"),
+            message: t("entity.remove.success", {
+              entity:
+                issueServiceType === EIssueServiceType.ISSUES
+                  ? t("common.sub_work_items")
+                  : t("issue.label", { count: 1 }),
+            }),
+          });
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("entity.remove.failed", {
+              entity:
+                issueServiceType === EIssueServiceType.ISSUES
+                  ? t("common.sub_work_items")
+                  : t("issue.label", { count: 1 }),
+            }),
+          });
+        }
+      },
+      deleteSubIssue: async (workspaceSlug, projectId, parentIssueId, issueId) => {
+        try {
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+          await deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+          setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("entity.delete.failed", {
+              entity:
+                issueServiceType === EIssueServiceType.ISSUES
+                  ? t("common.sub_work_items")
+                  : t("issue.label", { count: 1 }),
+            }),
+          });
+        }
+      },
+    }),
+    [
+      createSubIssues,
+      deleteSubIssue,
+      fetchSubIssues,
+      issueServiceType,
+      removeSubIssue,
+      setSubIssueHelpers,
+      t,
+      updateSubIssue,
+    ]
+  );
+
+  return subIssueOperations;
+};
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/index.ts b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/index.ts
new file mode 100644
index 0000000..bc6b004
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./content";
+export * from "./display-filters";
+export * from "./quick-action-button";
+export * from "./root";
+export * from "./title";
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
new file mode 100644
index 0000000..f6ea11a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { CircleDashed } from "lucide-react";
+import { Collapsible } from "@makeplane/propel/components/collapsible";
+import { ALL_ISSUES } from "@plane/constants";
+import type { IGroupByColumn, TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { SubIssuesListItem } from "./list-item";
+
+interface TSubIssuesListGroupProps {
+  workItemIds: string[];
+  projectId: string;
+  workspaceSlug: string;
+  group: IGroupByColumn;
+  serviceType: TIssueServiceType;
+  canEdit: boolean;
+  parentIssueId: string;
+  rootIssueId: string;
+  handleIssueCrudState: (
+    key: "create" | "existing" | "update" | "delete",
+    issueId: string,
+    issue?: TIssue | null
+  ) => void;
+  subIssueOperations: TSubIssueOperations;
+  storeType?: EIssuesStoreType;
+  spacingLeft?: number;
+}
+
+export const SubIssuesListGroup = observer(function SubIssuesListGroup(props: TSubIssuesListGroupProps) {
+  const {
+    group,
+    serviceType,
+    canEdit,
+    parentIssueId,
+    rootIssueId,
+    projectId,
+    workspaceSlug,
+    handleIssueCrudState,
+    subIssueOperations,
+    workItemIds,
+    storeType = EIssuesStoreType.PROJECT,
+    spacingLeft = 0,
+  } = props;
+
+  const isAllIssues = group.id === ALL_ISSUES;
+
+  // states
+  const [isCollapsibleOpen, setIsCollapsibleOpen] = useState(true);
+
+  if (!workItemIds.length) return null;
+
+  const items = workItemIds.map((workItemId) => (
+    <SubIssuesListItem
+      key={workItemId}
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+      parentIssueId={parentIssueId}
+      rootIssueId={rootIssueId}
+      issueId={workItemId}
+      canEdit={canEdit}
+      handleIssueCrudState={handleIssueCrudState}
+      subIssueOperations={subIssueOperations}
+      issueServiceType={serviceType}
+      spacingLeft={spacingLeft}
+      storeType={storeType}
+    />
+  ));
+
+  if (isAllIssues) return <>{items}</>;
+
+  return (
+    <Collapsible
+      open={isCollapsibleOpen}
+      onOpenChange={setIsCollapsibleOpen}
+      icon={
+        <div className="grid shrink-0 place-items-center overflow-hidden">
+          {group.icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
+        </div>
+      }
+      trigger={
+        <>
+          <span className="text-13 font-medium text-primary">{group.name}</span>
+          <span className="text-13 text-placeholder">{workItemIds.length}</span>
+        </>
+      }
+    >
+      {/* Cancels this nested Collapsible's own panel inset — the outer sub-work-items
+          Collapsible (root.tsx) already contributes one; without this, grouped rows
+          would sit inset twice. */}
+      <div className="-mx-3">{items}</div>
+    </Collapsible>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
new file mode 100644
index 0000000..b62b56a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
@@ -0,0 +1,270 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { ChevronRightOutline, CloseOutline, DeleteOutline, EditOutline, LinkOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
+import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
+import { ControlLink, CustomMenu } from "@plane/ui";
+import { cn, generateWorkItemLink } from "@plane/utils";
+// helpers
+import { useSubIssueOperations } from "@/components/issues/issue-detail-widgets/sub-issues/helper";
+import { WithDisplayPropertiesHOC } from "@/components/issues/issue-layouts/properties/with-display-properties-HOC";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// local components
+import { SubIssuesListItemProperties } from "./properties";
+import { SubIssuesListRoot } from "./root";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssueId: string;
+  rootIssueId: string;
+  spacingLeft: number;
+  canEdit: boolean;
+  handleIssueCrudState: (
+    key: "create" | "existing" | "update" | "delete",
+    issueId: string,
+    issue?: TIssue | null
+  ) => void;
+  subIssueOperations: TSubIssueOperations;
+  issueId: string;
+  issueServiceType?: TIssueServiceType;
+  storeType?: EIssuesStoreType;
+};
+
+export const SubIssuesListItem = observer(function SubIssuesListItem(props: Props) {
+  const {
+    workspaceSlug,
+    projectId,
+    parentIssueId,
+    rootIssueId,
+    issueId,
+    spacingLeft = 10,
+    canEdit,
+    handleIssueCrudState,
+    subIssueOperations,
+    issueServiceType = EIssueServiceType.ISSUES,
+    storeType = EIssuesStoreType.PROJECT,
+  } = props;
+  const { t } = useTranslation();
+  const {
+    issue: { getIssueById },
+    subIssues: {
+      filters: { getSubIssueFilters },
+    },
+  } = useIssueDetail(issueServiceType);
+  const {
+    subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
+  } = useIssueDetail();
+  const { fetchSubIssues } = useSubIssueOperations(EIssueServiceType.ISSUES);
+  const { toggleCreateIssueModal, toggleDeleteIssueModal } = useIssueDetail(issueServiceType);
+  const project = useProject();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
+  const { isMobile } = usePlatformOS();
+  const issue = getIssueById(issueId);
+
+  // derived values
+  const projectDetail = (issue && issue.project_id && project.getProjectById(issue.project_id)) || undefined;
+
+  const subIssueHelpers = subIssueHelpersByIssueId(parentIssueId);
+  const subIssueCount = issue?.sub_issues_count ?? 0;
+
+  // derived values
+  const subIssueFilters = getSubIssueFilters(parentIssueId);
+  const displayProperties = subIssueFilters?.displayProperties ?? {};
+
+  //
+  const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile);
+
+  if (!issue) return <></>;
+
+  // check if current issue is the root issue
+  const isCurrentIssueRoot = issueId === rootIssueId;
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier: projectDetail?.identifier,
+    sequenceId: issue?.sequence_id,
+  });
+
+  return (
+    <div key={issueId}>
+      <ControlLink
+        id={`issue-${issue.id}`}
+        href={workItemLink}
+        onClick={() => handleIssuePeekOverview(issue)}
+        className="w-full cursor-pointer"
+      >
+        {issue && (
+          <div
+            className="group relative flex h-full min-h-11 w-full items-center py-1 pr-2 transition-all hover:bg-surface-2"
+            style={{ paddingLeft: `${spacingLeft}px` }}
+          >
+            <div className="flex size-5 flex-shrink-0 items-center justify-center">
+              {/* disable the chevron when current issue is also the root issue*/}
+              {subIssueCount > 0 && !isCurrentIssueRoot && (
+                <>
+                  {subIssueHelpers.preview_loader.includes(issue.id) ? (
+                    <div className="flex h-full w-full cursor-not-allowed items-center justify-center rounded-xs bg-layer-1 transition-all">
+                      <LinkOutline width={14} height={14} className="animate-spin" />
+                    </div>
+                  ) : (
+                    <div
+                      className="flex h-full w-full cursor-pointer items-center justify-center text-placeholder hover:text-tertiary"
+                      onClick={async (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (!subIssueHelpers.issue_visibility.includes(issueId)) {
+                          setSubIssueHelpers(parentIssueId, "preview_loader", issueId);
+                          await fetchSubIssues(workspaceSlug, projectId, issueId);
+                          setSubIssueHelpers(parentIssueId, "preview_loader", issueId);
+                        }
+                        setSubIssueHelpers(parentIssueId, "issue_visibility", issueId);
+                      }}
+                    >
+                      <ChevronRightOutline
+                        className={cn("size-3.5 transition-all", {
+                          "rotate-90": subIssueHelpers.issue_visibility.includes(issue.id),
+                        })}
+                      />
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+
+            <div className="flex w-full cursor-pointer items-center gap-3 truncate">
+              <WithDisplayPropertiesHOC displayProperties={displayProperties || {}} displayPropertyKey="key">
+                <div className="flex-shrink-0">
+                  {projectDetail && (
+                    <IssueIdentifier
+                      projectId={projectDetail.id}
+                      issueTypeId={issue.type_id}
+                      projectIdentifier={projectDetail.identifier}
+                      issueSequenceId={issue.sequence_id}
+                      size="xs"
+                      variant="secondary"
+                    />
+                  )}
+                </div>
+              </WithDisplayPropertiesHOC>
+              <Tooltip label={issue.name} layout="stacked" disabled={isMobile}>
+                <span className="w-0 flex-1 truncate text-13 text-primary">{issue.name}</span>
+              </Tooltip>
+            </div>
+
+            <div
+              className="flex-shrink-0 text-13"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              <SubIssuesListItemProperties
+                workspaceSlug={workspaceSlug}
+                parentIssueId={parentIssueId}
+                issueId={issueId}
+                canEdit={canEdit}
+                updateSubIssue={subIssueOperations.updateSubIssue}
+                displayProperties={displayProperties}
+                issue={issue}
+              />
+            </div>
+
+            <div className="flex-shrink-0 text-13">
+              <CustomMenu placement="bottom-end" ellipsis>
+                {canEdit && (
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      handleIssueCrudState("update", parentIssueId, { ...issue });
+                      toggleCreateIssueModal(true);
+                    }}
+                  >
+                    <div className="flex items-center gap-2">
+                      <EditOutline className="h-3.5 w-3.5" />
+                      <span>{t("issue.edit")}</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                )}
+
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    subIssueOperations.copyLink(workItemLink);
+                  }}
+                >
+                  <div className="flex items-center gap-2">
+                    <LinkOutline className="h-3.5 w-3.5" />
+                    <span>{t("issue.copy_link")}</span>
+                  </div>
+                </CustomMenu.MenuItem>
+
+                {canEdit && (
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      if (issue.project_id)
+                        subIssueOperations.removeSubIssue(workspaceSlug, issue.project_id, parentIssueId, issue.id);
+                    }}
+                  >
+                    <div className="flex items-center gap-2">
+                      <CloseOutline className="h-3.5 w-3.5" />
+                      {issueServiceType === EIssueServiceType.ISSUES
+                        ? t("issue.remove.parent.label")
+                        : t("issue.remove.label")}
+                    </div>
+                  </CustomMenu.MenuItem>
+                )}
+
+                {canEdit && (
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      handleIssueCrudState("delete", parentIssueId, issue);
+                      toggleDeleteIssueModal(issue.id);
+                    }}
+                  >
+                    <div className="flex items-center gap-2">
+                      <DeleteOutline className="h-3.5 w-3.5" />
+                      <span>{t("issue.delete.label")}</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            </div>
+          </div>
+        )}
+      </ControlLink>
+
+      {/* should not expand the current issue if it is also the root issue*/}
+      {subIssueHelpers.issue_visibility.includes(issueId) &&
+        issue.project_id &&
+        subIssueCount > 0 &&
+        !isCurrentIssueRoot && (
+          <SubIssuesListRoot
+            storeType={storeType}
+            workspaceSlug={workspaceSlug}
+            projectId={issue.project_id}
+            parentIssueId={issue.id}
+            rootIssueId={rootIssueId}
+            spacingLeft={spacingLeft + 22}
+            canEdit={canEdit}
+            handleIssueCrudState={handleIssueCrudState}
+            subIssueOperations={subIssueOperations}
+          />
+        )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
new file mode 100644
index 0000000..550a3ee
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
@@ -0,0 +1,227 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { SyntheticEvent } from "react";
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { DueDateOutline, StartDateOutline } from "@makeplane/propel/icons";
+import type { IIssueDisplayProperties, TIssue } from "@plane/types";
+import { getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
+// components
+import { DateDropdown } from "@/components/dropdowns/date";
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+// hooks
+import { WithDisplayPropertiesHOC } from "@/components/issues/issue-layouts/properties/with-display-properties-HOC";
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+type Props = {
+  workspaceSlug: string;
+  parentIssueId: string;
+  issueId: string;
+  canEdit: boolean;
+  updateSubIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueId: string,
+    issueData: Partial<TIssue>,
+    oldIssue?: Partial<TIssue>
+  ) => Promise<void>;
+  displayProperties?: IIssueDisplayProperties;
+  issue: TIssue;
+};
+
+export const SubIssuesListItemProperties = observer(function SubIssuesListItemProperties(props: Props) {
+  const { workspaceSlug, parentIssueId, issueId, canEdit, updateSubIssue, displayProperties, issue } = props;
+  const { t } = useTranslation();
+  const { getStateById } = useProjectState();
+
+  const handleEventPropagation = (e: SyntheticEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const handleStartDate = (date: Date | null) => {
+    if (issue.project_id) {
+      updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
+        start_date: date ? renderFormattedPayloadDate(date) : null,
+      });
+    }
+  };
+
+  const handleTargetDate = (date: Date | null) => {
+    if (issue.project_id) {
+      updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
+        target_date: date ? renderFormattedPayloadDate(date) : null,
+      });
+    }
+  };
+
+  //derived values
+  const stateDetails = useMemo(() => getStateById(issue.state_id), [getStateById, issue.state_id]);
+  const shouldHighlight = useMemo(
+    () => shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+    [issue.target_date, stateDetails?.group]
+  );
+  // date range is enabled only when both dates are available and both dates are enabled
+  const isDateRangeEnabled: boolean = Boolean(
+    issue.start_date && issue.target_date && displayProperties?.start_date && displayProperties?.due_date
+  );
+
+  if (!displayProperties) return <></>;
+
+  const maxDate = getDate(issue.target_date);
+  const minDate = getDate(issue.start_date);
+
+  return (
+    <div className="relative flex items-center gap-2">
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="state">
+        <div className="h-5 flex-shrink-0">
+          <StateDropdown
+            value={issue.state_id}
+            projectId={issue.project_id ?? undefined}
+            onChange={(val) =>
+              issue.project_id &&
+              updateSubIssue(
+                workspaceSlug,
+                issue.project_id,
+                parentIssueId,
+                issueId,
+                {
+                  state_id: val,
+                },
+                { ...issue }
+              )
+            }
+            disabled={!canEdit}
+            buttonVariant="transparent-without-text"
+            buttonClassName="hover:bg-transparent px-0"
+            iconSize="size-5"
+            showTooltip
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="priority">
+        <div className="h-5 flex-shrink-0">
+          <PriorityDropdown
+            value={issue.priority}
+            onChange={(val) =>
+              issue.project_id &&
+              updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
+                priority: val,
+              })
+            }
+            disabled={!canEdit}
+            buttonVariant="border-without-text"
+            showTooltip
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* merged dates */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey={["start_date", "due_date"]}
+        shouldRenderProperty={() => isDateRangeEnabled}
+      >
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+          <DateRangeDropdown
+            value={{
+              from: getDate(issue.start_date) || undefined,
+              to: getDate(issue.target_date) || undefined,
+            }}
+            placement="top-end"
+            onSelect={(range) => {
+              handleStartDate(range?.from ?? null);
+              handleTargetDate(range?.to ?? null);
+            }}
+            hideIcon={{
+              from: false,
+            }}
+            isClearable
+            mergeDates
+            buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
+            buttonClassName={shouldHighlight ? "text-danger-primary" : ""}
+            disabled={!canEdit}
+            showTooltip
+            customTooltipHeading="Date Range"
+            renderPlaceholder={false}
+            renderInPortal
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* start date */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey="start_date"
+        shouldRenderProperty={() => !isDateRangeEnabled}
+      >
+        <div className="h-5">
+          <DateDropdown
+            value={issue.start_date ?? null}
+            onChange={handleStartDate}
+            maxDate={maxDate}
+            placeholder={t("common.order_by.start_date")}
+            icon={<StartDateOutline className="h-3 w-3 flex-shrink-0" />}
+            buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
+            optionsClassName="z-30"
+            disabled={!canEdit}
+            showTooltip
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* target/due date */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey="due_date"
+        shouldRenderProperty={() => !isDateRangeEnabled}
+      >
+        <div className="h-5">
+          <DateDropdown
+            value={issue?.target_date ?? null}
+            onChange={handleTargetDate}
+            minDate={minDate}
+            placeholder={t("common.order_by.due_date")}
+            icon={<DueDateOutline className="h-3 w-3 flex-shrink-0" />}
+            buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
+            buttonClassName={shouldHighlight ? "text-danger-primary" : ""}
+            clearIconClassName="text-primary"
+            optionsClassName="z-30"
+            disabled={!canEdit}
+            showTooltip
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="assignee">
+        <div className="h-5 flex-shrink-0">
+          <MemberDropdown
+            value={issue.assignee_ids}
+            projectId={issue.project_id ?? undefined}
+            onChange={(val) =>
+              issue.project_id &&
+              updateSubIssue(workspaceSlug, issue.project_id, parentIssueId, issueId, {
+                assignee_ids: val,
+              })
+            }
+            disabled={!canEdit}
+            multiple
+            buttonVariant={(issue?.assignee_ids || []).length > 0 ? "transparent-without-text" : "border-without-text"}
+            buttonClassName={(issue?.assignee_ids || []).length > 0 ? "hover:bg-transparent px-0" : ""}
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
new file mode 100644
index 0000000..1b509f1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/root.tsx
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { FilterOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { GroupByColumnTypes, TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
+import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
+// hooks
+import { SectionEmptyState } from "@/components/empty-state/section-empty-state-root";
+import { getGroupByColumns, isWorkspaceLevel } from "@/components/issues/issue-layouts/utils";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+import { SubIssuesListGroup } from "./list-group";
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  parentIssueId: string;
+  rootIssueId: string;
+  spacingLeft: number;
+  canEdit: boolean;
+  handleIssueCrudState: (
+    key: "create" | "existing" | "update" | "delete",
+    issueId: string,
+    issue?: TIssue | null
+  ) => void;
+  subIssueOperations: TSubIssueOperations;
+  issueServiceType?: TIssueServiceType;
+  storeType: EIssuesStoreType;
+};
+
+export const SubIssuesListRoot = observer(function SubIssuesListRoot(props: Props) {
+  const {
+    workspaceSlug,
+    projectId,
+    parentIssueId,
+    rootIssueId,
+    canEdit,
+    handleIssueCrudState,
+    subIssueOperations,
+    issueServiceType = EIssueServiceType.ISSUES,
+    storeType = EIssuesStoreType.PROJECT,
+    spacingLeft = 0,
+  } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const {
+    subIssues: {
+      subIssuesByIssueId,
+      filters: { getSubIssueFilters, getGroupedSubWorkItems, getFilteredSubWorkItems, resetFilters },
+    },
+  } = useIssueDetail(issueServiceType);
+
+  // derived values
+  const filters = getSubIssueFilters(rootIssueId);
+  const isRootLevel = useMemo(() => rootIssueId === parentIssueId, [rootIssueId, parentIssueId]);
+  const group_by = isRootLevel ? (filters?.displayFilters?.group_by ?? null) : null;
+  const filteredSubWorkItemsCount = (getFilteredSubWorkItems(rootIssueId, filters.filters ?? {}) ?? []).length;
+
+  const groups = getGroupByColumns({
+    groupBy: group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+    isEpic: issueServiceType === EIssueServiceType.EPICS,
+    projectId,
+  });
+
+  const getWorkItemIds = useCallback(
+    (groupId: string) => {
+      if (isRootLevel) {
+        const groupedSubIssues = getGroupedSubWorkItems(rootIssueId);
+        return groupedSubIssues?.[groupId] ?? [];
+      }
+      const subIssueIds = subIssuesByIssueId(parentIssueId);
+      return subIssueIds ?? [];
+    },
+    [isRootLevel, subIssuesByIssueId, rootIssueId, getGroupedSubWorkItems, parentIssueId]
+  );
+
+  const isSubWorkItems = issueServiceType === EIssueServiceType.ISSUES;
+
+  return (
+    <div className="relative">
+      {isRootLevel && filteredSubWorkItemsCount === 0 ? (
+        <SectionEmptyState
+          title={
+            !isSubWorkItems
+              ? t("sub_work_item.empty_state.list_filters.title")
+              : t("sub_work_item.empty_state.sub_list_filters.title")
+          }
+          description={
+            !isSubWorkItems
+              ? t("sub_work_item.empty_state.list_filters.description")
+              : t("sub_work_item.empty_state.sub_list_filters.description")
+          }
+          icon={<FilterOutline />}
+          customClassName={storeType !== EIssuesStoreType.EPIC ? "border-none" : ""}
+          actionElement={
+            <Button variant="secondary" onClick={() => resetFilters(rootIssueId)}>
+              {t("sub_work_item.empty_state.list_filters.action")}
+            </Button>
+          }
+        />
+      ) : (
+        groups?.map((group) => (
+          <SubIssuesListGroup
+            key={group.id}
+            workItemIds={getWorkItemIds(group.id)}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+            group={group}
+            serviceType={issueServiceType}
+            canEdit={canEdit}
+            parentIssueId={parentIssueId}
+            rootIssueId={rootIssueId}
+            handleIssueCrudState={handleIssueCrudState}
+            subIssueOperations={subIssueOperations}
+            storeType={storeType}
+            spacingLeft={spacingLeft}
+          />
+        ))
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
new file mode 100644
index 0000000..eb6dbfa
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { AddOutline, WorkItemsOutline } from "@makeplane/propel/icons";
+import type { TIssue, TIssueServiceType } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type Props = {
+  issueId: string;
+  customButton?: React.ReactNode;
+  disabled?: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export const SubIssuesActionButton = observer(function SubIssuesActionButton(props: Props) {
+  const { issueId, customButton, disabled = false, issueServiceType } = props;
+  // translation
+  const { t } = useTranslation();
+  // store hooks
+  const {
+    issue: { getIssueById },
+    toggleCreateIssueModal,
+    toggleSubIssuesModal,
+    setIssueCrudOperationState,
+    issueCrudOperationState,
+  } = useIssueDetail(issueServiceType);
+
+  // derived values
+  const issue = getIssueById(issueId);
+
+  if (!issue) return <></>;
+
+  // handlers
+  const handleIssueCrudState = (
+    key: "create" | "existing",
+    _parentIssueId: string | null,
+    issue: TIssue | null = null
+  ) => {
+    setIssueCrudOperationState({
+      ...issueCrudOperationState,
+      [key]: {
+        toggle: !issueCrudOperationState[key].toggle,
+        parentIssueId: _parentIssueId,
+        issue: issue,
+      },
+    });
+  };
+
+  const handleCreateNew = () => {
+    handleIssueCrudState("create", issueId, null);
+    toggleCreateIssueModal(true);
+  };
+
+  const handleAddExisting = () => {
+    handleIssueCrudState("existing", issueId, null);
+    toggleSubIssuesModal(issue.id);
+  };
+
+  // options
+  const optionItems = [
+    {
+      i18n_label: "common.create_new",
+      icon: <AddOutline className="h-3 w-3" />,
+      onClick: handleCreateNew,
+    },
+    {
+      i18n_label: "common.add_existing",
+      icon: <WorkItemsOutline className="h-3 w-3" />,
+      onClick: handleAddExisting,
+    },
+  ];
+
+  // button element
+  const customButtonElement = customButton ? <>{customButton}</> : <AddOutline className="h-4 w-4" />;
+
+  return (
+    <CustomMenu customButton={customButtonElement} placement="bottom-start" disabled={disabled} closeOnSelect>
+      {optionItems.map((item, index) => (
+        <CustomMenu.MenuItem
+          key={index}
+          onClick={() => {
+            item.onClick();
+          }}
+        >
+          <div className="flex items-center gap-2">
+            {item.icon}
+            <span>{t(item.i18n_label)}</span>
+          </div>
+        </CustomMenu.MenuItem>
+      ))}
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
new file mode 100644
index 0000000..eac612e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
+import type { TIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { SubIssuesCollapsibleContent } from "./content";
+import { SubIssuesCollapsibleTitle } from "./title";
+import { SubWorkItemTitleActions } from "./title-actions";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled?: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export const SubIssuesCollapsible = observer(function SubIssuesCollapsible(props: Props) {
+  const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType } = props;
+  // store hooks
+  const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
+  // derived values
+  const isCollapsibleOpen = openWidgets.includes("sub-work-items");
+
+  return (
+    <Collapsible
+      open={isCollapsibleOpen}
+      onOpenChange={() => toggleOpenWidget("sub-work-items")}
+      trigger={<SubIssuesCollapsibleTitle parentIssueId={issueId} issueServiceType={issueServiceType} />}
+      trailing={
+        isCollapsibleOpen ? (
+          <SubWorkItemTitleActions
+            projectId={projectId}
+            parentId={issueId}
+            disabled={disabled}
+            issueServiceType={issueServiceType}
+          />
+        ) : undefined
+      }
+    >
+      <SubIssuesCollapsibleContent
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        parentIssueId={issueId}
+        disabled={disabled}
+        issueServiceType={issueServiceType}
+      />
+    </Collapsible>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx
new file mode 100644
index 0000000..524ec47
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title-actions.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { cloneDeep } from "lodash-es";
+import { observer } from "mobx-react";
+import {
+  EIssueFilterType,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  SUB_WORK_ITEM_AVAILABLE_FILTERS_FOR_WORK_ITEM_PAGE,
+} from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TIssueServiceType,
+} from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { SubIssueDisplayFilters } from "./display-filters";
+import { SubIssueFilters } from "./filters";
+import { SubIssuesActionButton } from "./quick-action-button";
+
+type TSubWorkItemTitleActionsProps = {
+  disabled: boolean;
+  issueServiceType?: TIssueServiceType;
+  parentId: string;
+  projectId: string;
+};
+
+export const SubWorkItemTitleActions = observer(function SubWorkItemTitleActions(props: TSubWorkItemTitleActionsProps) {
+  const { disabled, issueServiceType = EIssueServiceType.ISSUES, parentId, projectId } = props;
+
+  // store hooks
+  const {
+    subIssues: {
+      filters: { getSubIssueFilters, updateSubWorkItemFilters },
+    },
+  } = useIssueDetail(issueServiceType);
+  const { getProjectStates } = useProjectState();
+  const {
+    project: { getProjectMemberIds },
+  } = useMember();
+
+  // derived values
+  const projectStates = getProjectStates(projectId);
+  const projectMemberIds = getProjectMemberIds(projectId, false);
+  const subIssueFilters = getSubIssueFilters(parentId);
+  const layoutDisplayFiltersOptions = ISSUE_DISPLAY_FILTERS_BY_PAGE["sub_work_items"].layoutOptions.list;
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      updateSubWorkItemFilters(EIssueFilterType.DISPLAY_FILTERS, updatedDisplayFilter, parentId);
+    },
+    [updateSubWorkItemFilters, parentId]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => {
+      updateSubWorkItemFilters(EIssueFilterType.DISPLAY_PROPERTIES, updatedDisplayProperties, parentId);
+    },
+    [updateSubWorkItemFilters, parentId]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      const newValues = cloneDeep(subIssueFilters?.filters?.[key]) ?? [];
+
+      if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      } else {
+        if (subIssueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+      updateSubWorkItemFilters(EIssueFilterType.FILTERS, { [key]: newValues }, parentId);
+    },
+    [subIssueFilters?.filters, updateSubWorkItemFilters, parentId]
+  );
+
+  return (
+    // prevent click everywhere
+    <div
+      className="flex items-center gap-2"
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
+      <SubIssueDisplayFilters
+        isEpic={issueServiceType === EIssueServiceType.EPICS}
+        layoutDisplayFiltersOptions={layoutDisplayFiltersOptions}
+        displayProperties={subIssueFilters?.displayProperties ?? {}}
+        displayFilters={subIssueFilters?.displayFilters ?? {}}
+        handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+        handleDisplayFiltersUpdate={handleDisplayFilters}
+      />
+      <SubIssueFilters
+        handleFiltersUpdate={handleFiltersUpdate}
+        filters={subIssueFilters?.filters ?? {}}
+        memberIds={projectMemberIds ?? undefined}
+        states={projectStates}
+        availableFilters={SUB_WORK_ITEM_AVAILABLE_FILTERS_FOR_WORK_ITEM_PAGE}
+      />
+      {!disabled && (
+        <SubIssuesActionButton issueId={parentId} disabled={disabled} issueServiceType={issueServiceType} />
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
new file mode 100644
index 0000000..a81a3b4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { CircularProgress } from "@makeplane/propel/components/circular-progress";
+import { useTranslation } from "@plane/i18n";
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type Props = {
+  parentIssueId: string;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleTitle(props: Props) {
+  const { parentIssueId, issueServiceType = EIssueServiceType.ISSUES } = props;
+  // translation
+  const { t } = useTranslation();
+  // store hooks
+  const {
+    subIssues: { subIssuesByIssueId, stateDistributionByIssueId },
+  } = useIssueDetail(issueServiceType);
+  // derived values
+  const subIssuesDistribution = stateDistributionByIssueId(parentIssueId);
+  const subIssues = subIssuesByIssueId(parentIssueId);
+  // if there are no sub-issues, return null
+  if (!subIssues) return null;
+
+  // calculate percentage of completed sub-issues
+  const completedCount = subIssuesDistribution?.completed?.length ?? 0;
+  const totalCount = subIssues.length;
+  const percentage = completedCount && totalCount ? (completedCount / totalCount) * 100 : 0;
+
+  return (
+    <span className="inline-flex items-center gap-2">
+      {issueServiceType === EIssueServiceType.EPICS ? t("issue.label", { count: 1 }) : t("common.sub_work_items")}
+      <span className="flex items-center gap-1.5 text-13 text-tertiary">
+        <CircularProgress
+          value={percentage}
+          size="md"
+          variant={percentage === 100 ? "success" : "brand"}
+          aria-label="Sub-work-item progress"
+        />
+        <span>
+          {completedCount}/{totalCount} {t("common.done")}
+        </span>
+      </span>
+    </span>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
new file mode 100644
index 0000000..df2dd31
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { Button } from "@plane/propel/button";
+
+type Props = {
+  icon: React.ReactNode;
+  title: string;
+  disabled?: boolean;
+};
+
+export function IssueDetailWidgetButton(props: Props) {
+  const { icon, title, disabled = false } = props;
+  return (
+    <Button variant={"secondary"} disabled={disabled} size="lg">
+      {icon && icon}
+      <span className="text-body-xs-medium">{title}</span>
+    </Button>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/cycle-select.tsx b/apps/web/core/components/issues/issue-detail/cycle-select.tsx
new file mode 100644
index 0000000..00dcdb8
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/cycle-select.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// hooks
+// components
+import { cn } from "@plane/utils";
+import { CycleDropdown } from "@/components/dropdowns/cycle";
+// ui
+// helpers
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// types
+import type { TIssueOperations } from "./root";
+
+type TIssueCycleSelect = {
+  className?: string;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issueOperations: TIssueOperations;
+  disabled?: boolean;
+};
+
+export const IssueCycleSelect = observer(function IssueCycleSelect(props: TIssueCycleSelect) {
+  const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+  const { t } = useTranslation();
+  // states
+  const [isUpdating, setIsUpdating] = useState(false);
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // derived values
+  const issue = getIssueById(issueId);
+  const disableSelect = disabled || isUpdating;
+
+  const handleIssueCycleChange = async (cycleId: string | null) => {
+    if (!issue || issue.cycle_id === cycleId) return;
+    setIsUpdating(true);
+    if (cycleId) await issueOperations.addCycleToIssue?.(workspaceSlug, projectId, cycleId, issueId);
+    else await issueOperations.removeIssueFromCycle?.(workspaceSlug, projectId, issue.cycle_id ?? "", issueId);
+    setIsUpdating(false);
+  };
+
+  return (
+    <div className={cn("flex h-full items-center gap-1", className)}>
+      <CycleDropdown
+        value={issue?.cycle_id ?? null}
+        onChange={handleIssueCycleChange}
+        projectId={projectId}
+        disabled={disableSelect}
+        buttonVariant="transparent-with-text"
+        className="group w-full"
+        buttonContainerClassName="w-full text-left h-7.5 rounded-sm"
+        buttonClassName={`text-body-xs-medium justify-between ${issue?.cycle_id ? "" : "text-placeholder"}`}
+        placeholder={t("cycle.no_cycle")}
+        hideIcon
+        dropdownArrow
+        dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/identifier-text.tsx b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
new file mode 100644
index 0000000..25945c4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TIdentifierTextProps, TIdentifierTextVariant, TIssueIdentifierSize } from "@plane/types";
+import { cn } from "@plane/utils";
+
+const SIZE_MAP: Record<TIssueIdentifierSize, string> = {
+  xs: "text-caption-sm-regular",
+  sm: "text-caption-sm-medium",
+  md: "text-caption-md-medium",
+  lg: "text-caption-lg-medium",
+};
+
+const VARIANT_MAP: Record<TIdentifierTextVariant, string> = {
+  default: "text-tertiary",
+  secondary: "text-secondary",
+  tertiary: "text-tertiary",
+  primary: "text-primary",
+  "primary-subtle": "text-primary/80",
+  success: "text-success-primary",
+};
+
+export function IdentifierText(props: TIdentifierTextProps) {
+  const { identifier, enableClickToCopyIdentifier = false, size = "lg", variant = "default" } = props;
+  // handlers
+  const handleCopyIssueIdentifier = () => {
+    if (enableClickToCopyIdentifier) {
+      navigator.clipboard
+        .writeText(identifier)
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Work item ID copied to clipboard",
+          });
+          return;
+        })
+        .catch(() => {
+          console.error("Failed to copy work item ID");
+        });
+    }
+  };
+
+  const textSizeClassName = SIZE_MAP[size];
+  const variantClassName = VARIANT_MAP[variant];
+
+  return (
+    <Tooltip label="Click to copy" disabled={!enableClickToCopyIdentifier}>
+      <button
+        type="button"
+        className={cn("text-12 font-medium whitespace-nowrap text-tertiary", textSizeClassName, variantClassName, {
+          "cursor-pointer": enableClickToCopyIdentifier,
+        })}
+        onClick={handleCopyIssueIdentifier}
+        disabled={!enableClickToCopyIdentifier}
+      >
+        {identifier}
+      </button>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/index.ts b/apps/web/core/components/issues/issue-detail/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
new file mode 100644
index 0000000..823e199
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import type { E_SORT_ORDER, TActivityFilters, EActivityFilterType } from "@plane/constants";
+import { BASE_ACTIVITY_FILTER_TYPES, filterActivityOnSelectedFilters } from "@plane/constants";
+import type { TCommentsOperations } from "@plane/types";
+// components
+import { CommentCard } from "@/components/comments/card/root";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { IssueActivityItem } from "./activity/activity-list";
+import { IssueActivityLoader } from "./loader";
+
+type TIssueActivityCommentRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  isIntakeIssue: boolean;
+  issueId: string;
+  selectedFilters: TActivityFilters[];
+  activityOperations: TCommentsOperations;
+  showAccessSpecifier?: boolean;
+  disabled?: boolean;
+  sortOrder: E_SORT_ORDER;
+};
+
+export const IssueActivityCommentRoot = observer(function IssueActivityCommentRoot(props: TIssueActivityCommentRoot) {
+  const {
+    workspaceSlug,
+    isIntakeIssue,
+    issueId,
+    selectedFilters,
+    activityOperations,
+    showAccessSpecifier,
+    projectId,
+    disabled,
+    sortOrder,
+  } = props;
+  // store hooks
+  const {
+    activity: { getActivityAndCommentsByIssueId },
+    comment: { getCommentById },
+  } = useIssueDetail();
+  // derived values
+  const activityAndComments = getActivityAndCommentsByIssueId(issueId, sortOrder);
+
+  if (!activityAndComments) return <IssueActivityLoader />;
+
+  if (activityAndComments.length <= 0) return null;
+
+  const filteredActivityAndComments = filterActivityOnSelectedFilters(activityAndComments, selectedFilters);
+
+  return (
+    <div>
+      {filteredActivityAndComments.map((activityComment, index) => {
+        const comment = getCommentById(activityComment.id);
+        return activityComment.activity_type === "COMMENT" ? (
+          <CommentCard
+            key={activityComment.id}
+            workspaceSlug={workspaceSlug}
+            entityId={issueId}
+            comment={comment}
+            activityOperations={activityOperations}
+            ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
+            showAccessSpecifier={!!showAccessSpecifier}
+            showCopyLinkOption={!isIntakeIssue}
+            disabled={disabled}
+            projectId={projectId}
+            enableReplies
+          />
+        ) : BASE_ACTIVITY_FILTER_TYPES.includes(activityComment.activity_type as EActivityFilterType) ? (
+          <IssueActivityItem
+            key={activityComment.id}
+            activityId={activityComment.id}
+            ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
+          />
+        ) : null;
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
new file mode 100644
index 0000000..1b4f094
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { FilterOutline, TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TActivityFilters, TActivityFilterOption } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
+import { PopoverMenu } from "@plane/ui";
+// helper
+import { cn } from "@plane/utils";
+// constants
+
+type TActivityFilter = {
+  selectedFilters: TActivityFilters[];
+  filterOptions: TActivityFilterOption[];
+};
+
+export const ActivityFilter = observer(function ActivityFilter(props: TActivityFilter) {
+  const { selectedFilters = [], filterOptions } = props;
+
+  // hooks
+  const { t } = useTranslation();
+
+  return (
+    <PopoverMenu
+      buttonClassName="outline-none"
+      button={
+        <>
+          <IconButton variant="tertiary" icon={FilterOutline} />
+          {selectedFilters.length < filterOptions.length && (
+            <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
+          )}
+        </>
+      }
+      panelClassName="p-2 rounded-md border border-subtle bg-surface-1"
+      data={filterOptions}
+      keyExtractor={(item) => item.key}
+      render={(item) => (
+        <div
+          key={item.key}
+          className="flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 text-13 transition-all hover:bg-layer-1"
+          onClick={item.onClick}
+        >
+          <div
+            className={cn(
+              "flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-xs bg-surface-2 transition-all",
+              {
+                "bg-accent-primary text-on-color": item.isSelected,
+                "bg-layer-1 text-placeholder": item.isSelected && selectedFilters.length === 1,
+                "bg-surface-2": !item.isSelected,
+              }
+            )}
+          >
+            {item.isSelected && <TickOutline className="h-2.5 w-2.5" />}
+          </div>
+          <div className={cn("whitespace-nowrap", item.isSelected ? "text-primary" : "text-secondary")}>
+            {t(item.labelTranslationKey)}
+          </div>
+        </div>
+      )}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
new file mode 100644
index 0000000..31e3b9f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { ArchiveOutline, RefreshOutline } from "@makeplane/propel/icons";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent } from "./";
+// ui
+
+type TIssueArchivedAtActivity = { activityId: string; ends: "top" | "bottom" | undefined };
+
+export const IssueArchivedAtActivity = observer(function IssueArchivedAtActivity(props: TIssueArchivedAtActivity) {
+  const { activityId, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+
+  return (
+    <IssueActivityBlockComponent
+      icon={
+        activity.new_value === "restore" ? (
+          <RefreshOutline className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />
+        ) : (
+          <ArchiveOutline className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />
+        )
+      }
+      activityId={activityId}
+      ends={ends}
+      customUserName={activity.new_value === "archive" ? "Plane" : undefined}
+    >
+      {activity.new_value === "restore" ? "restored the work item" : "archived the work item"}.
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
new file mode 100644
index 0000000..35219aa
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// icons
+import { MembersOutline } from "@makeplane/propel/icons";
+// hooks;
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+
+type TIssueAssigneeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueAssigneeActivity = observer(function IssueAssigneeActivity(props: TIssueAssigneeActivity) {
+  const { activityId, ends, showIssue = true } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<MembersOutline className="h-3.5 w-3.5 flex-shrink-0 text-secondary" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.old_value === "" ? `added a new assignee ` : `removed the assignee `}
+        <a
+          href={`/${activity.workspace_detail?.slug}/profile/${activity.new_identifier ?? activity.old_identifier}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center font-medium text-primary capitalize hover:underline"
+        >
+          {activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value}
+        </a>
+        {showIssue && (activity.old_value === "" ? ` to ` : ` from `)}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
new file mode 100644
index 0000000..abede9f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/attachment.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { AttachOutline } from "@makeplane/propel/icons";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+
+type TIssueAttachmentActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueAttachmentActivity = observer(function IssueAttachmentActivity(props: TIssueAttachmentActivity) {
+  const { activityId, showIssue = true, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<AttachOutline width={14} height={14} className="text-secondary" aria-hidden="true" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.verb === "created" ? `uploaded a new attachment` : `removed an attachment`}
+        {showIssue && (activity.verb === "created" ? ` to ` : ` from `)}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
new file mode 100644
index 0000000..27fa813
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import { CyclesOutline } from "@makeplane/propel/icons";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent } from "./";
+// icons
+
+type TIssueCycleActivity = { activityId: string; ends: "top" | "bottom" | undefined };
+
+export const IssueCycleActivity = observer(function IssueCycleActivity(props: TIssueCycleActivity) {
+  const { activityId, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<CyclesOutline className="h-4 w-4 flex-shrink-0 text-secondary" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.verb === "created" ? (
+          <>
+            <span>added this work item to the cycle </span>
+            <a
+              href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
+            >
+              <span className="truncate">{activity.new_value}</span>
+            </a>
+          </>
+        ) : activity.verb === "updated" ? (
+          <>
+            <span>set the cycle to </span>
+            <a
+              href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
+            >
+              <span className="truncate"> {activity.new_value}</span>
+            </a>
+          </>
+        ) : (
+          <>
+            <span>removed the work item from the cycle </span>
+            <a
+              href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
+            >
+              <span className="truncate"> {activity.new_value}</span>
+            </a>
+          </>
+        )}
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
new file mode 100644
index 0000000..a63c9ba
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { WorkItemsOutline } from "@makeplane/propel/icons";
+import { EInboxIssueSource } from "@plane/types";
+// hooks
+import { capitalizeFirstLetter } from "@plane/utils";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { IssueActivityBlockComponent } from "./";
+
+type TIssueDefaultActivity = { activityId: string; ends: "top" | "bottom" | undefined };
+
+export const IssueDefaultActivity = observer(function IssueDefaultActivity(props: TIssueDefaultActivity) {
+  const { activityId, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  const source = activity.source_data?.source;
+
+  return (
+    <IssueActivityBlockComponent
+      activityId={activityId}
+      icon={<WorkItemsOutline width={14} height={14} className="text-secondary" aria-hidden="true" />}
+      ends={ends}
+    >
+      <>
+        {activity.verb === "created" ? (
+          source && source !== EInboxIssueSource.IN_APP ? (
+            <span>
+              created the work item via{" "}
+              <span className="font-medium">{capitalizeFirstLetter(source.toLowerCase() || "")}</span>.
+            </span>
+          ) : (
+            <span> created the work item.</span>
+          )
+        ) : (
+          <span> deleted a work item.</span>
+        )}
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/description.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/description.tsx
new file mode 100644
index 0000000..838aa6b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/description.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { AlignLeftOutline } from "@makeplane/propel/icons";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+
+type TIssueDescriptionActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueDescriptionActivity = observer(function IssueDescriptionActivity(props: TIssueDescriptionActivity) {
+  const { activityId, showIssue = true, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<AlignLeftOutline width={14} height={14} className="text-secondary" aria-hidden="true" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        updated the description
+        {showIssue ? ` of ` : ``}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
new file mode 100644
index 0000000..5e63083
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { EstimateOutline } from "@makeplane/propel/icons";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+
+type TIssueEstimateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueEstimateActivity = observer(function IssueEstimateActivity(props: TIssueEstimateActivity) {
+  const { activityId, showIssue = true, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+
+  return (
+    <IssueActivityBlockComponent
+      icon={<EstimateOutline className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.new_value ? `set the estimate point to ` : `removed the estimate point`}
+        {activity.new_value ? activity.new_value : activity?.old_value}
+        {showIssue && (activity.new_value ? ` to ` : ` from `)}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
new file mode 100644
index 0000000..e26a79d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity-block.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { HierarchyOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { renderFormattedTime, renderFormattedDate, calculateTimeAgo } from "@plane/utils";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { IssueUser } from "../";
+import { IssueCreatorDisplay } from "./issue-creator";
+
+type TIssueActivityBlockComponent = {
+  icon?: ReactNode;
+  activityId: string;
+  ends: "top" | "bottom" | undefined;
+  children: ReactNode;
+  customUserName?: string;
+};
+
+export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent) {
+  const { icon, activityId, ends, children, customUserName } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+  const { isMobile } = usePlatformOS();
+  if (!activity) return <></>;
+  return (
+    <div
+      className={`relative flex items-center gap-3 text-caption-sm-regular ${
+        ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`
+      }`}
+    >
+      <div className="absolute top-0 bottom-0 left-[13px] w-px bg-layer-3" aria-hidden />
+      <div className="z-[4] flex h-7 w-7 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg border border-subtle bg-layer-2 text-secondary shadow-raised-100">
+        {icon ? icon : <HierarchyOutline className="h-3.5 w-3.5" />}
+      </div>
+      <div className="w-full truncate text-secondary">
+        {!activity?.field && activity?.verb === "created" ? (
+          <IssueCreatorDisplay activityId={activityId} customUserName={customUserName} />
+        ) : (
+          <IssueUser activityId={activityId} customUserName={customUserName} />
+        )}
+        <span> {children} </span>
+        <span>
+          <Tooltip
+            label={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`}
+            disabled={isMobile}
+          >
+            <span className="whitespace-nowrap text-tertiary"> {calculateTimeAgo(activity.created_at)}</span>
+          </Tooltip>
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity.ts b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity.ts
new file mode 100644
index 0000000..83a89ef
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/activity.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssueActivity } from "@plane/types";
+
+export const getRelationActivityContent = (activity: TIssueActivity | undefined): string | undefined => {
+  if (!activity) return;
+
+  switch (activity.field) {
+    case "blocking":
+      return activity.old_value === ""
+        ? `marked this work item is blocking work item `
+        : `removed the blocking work item `;
+    case "blocked_by":
+      return activity.old_value === ""
+        ? `marked this work item is being blocked by `
+        : `removed this work item being blocked by work item `;
+    case "duplicate":
+      return activity.old_value === ""
+        ? `marked this work item as duplicate of `
+        : `removed this work item as a duplicate of `;
+    case "relates_to":
+      return activity.old_value === "" ? `marked that this work item relates to ` : `removed the relation from `;
+  }
+
+  return;
+};
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-creator.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-creator.tsx
new file mode 100644
index 0000000..56e8e74
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-creator.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type TIssueUser = {
+  activityId: string;
+  customUserName?: string;
+};
+
+export function IssueCreatorDisplay(props: TIssueUser) {
+  const { activityId, customUserName } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+
+  return (
+    <>
+      {customUserName ? (
+        <span className="font-medium text-primary">{customUserName || "Plane"}</span>
+      ) : (
+        <Link
+          href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
+          className="font-medium text-primary hover:underline"
+        >
+          {activity.actor_detail?.display_name}
+        </Link>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
new file mode 100644
index 0000000..0c27dab
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { generateWorkItemLink } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TIssueLink = {
+  activityId: string;
+};
+
+export function IssueLink(props: TIssueLink) {
+  const { activityId } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+  const { isMobile } = usePlatformOS();
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: activity.workspace_detail?.slug,
+    projectId: activity.project,
+    issueId: activity.issue,
+    projectIdentifier: activity.project_detail.identifier,
+    sequenceId: activity.issue_detail.sequence_id,
+  });
+  return (
+    <Tooltip
+      label={activity.issue_detail ? activity.issue_detail.name : "This work item has been deleted"}
+      layout="stacked"
+      disabled={isMobile}
+    >
+      <a
+        aria-disabled={activity.issue === null}
+        href={`${activity.issue_detail ? workItemLink : "#"}`}
+        target={activity.issue === null ? "_self" : "_blank"}
+        rel={activity.issue === null ? "" : "noopener noreferrer"}
+        className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
+      >
+        {activity.issue_detail
+          ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
+          : "Work items"}{" "}
+        <span className="font-regular">{activity.issue_detail?.name}</span>
+      </a>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
new file mode 100644
index 0000000..1b63778
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-user.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type TIssueUser = {
+  activityId: string;
+  customUserName?: string;
+};
+
+export function IssueUser(props: TIssueUser) {
+  const { activityId, customUserName } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+
+  return (
+    <>
+      {customUserName ? (
+        <span className="font-medium text-primary">{customUserName}</span>
+      ) : (
+        <Link
+          href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
+          className="font-medium text-primary hover:underline"
+        >
+          {activity.actor_detail?.display_name}
+        </Link>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
new file mode 100644
index 0000000..cfd637b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import { IntakeOutline } from "@makeplane/propel/icons";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent } from "./";
+// icons
+
+type TIssueInboxActivity = { activityId: string; ends: "top" | "bottom" | undefined };
+
+export const IssueInboxActivity = observer(function IssueInboxActivity(props: TIssueInboxActivity) {
+  const { activityId, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  const getInboxActivityMessage = () => {
+    switch (activity?.verb) {
+      case "-1":
+        return "declined this work item from intake.";
+      case "0":
+        return "snoozed this work item.";
+      case "1":
+        return "accepted this work item from intake.";
+      case "2":
+        return "declined this work item from intake by marking a duplicate work item.";
+      default:
+        return "updated intake work item status.";
+    }
+  };
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<IntakeOutline className="h-4 w-4 flex-shrink-0 text-secondary" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>{getInboxActivityMessage()}</>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts
new file mode 100644
index 0000000..c64e4af
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/index.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./default";
+export * from "./name";
+export * from "./description";
+export * from "./state";
+export * from "./assignee";
+export * from "./priority";
+export * from "./estimate";
+export * from "./parent";
+export * from "./relation";
+export * from "./start_date";
+export * from "./target_date";
+export * from "./cycle";
+export * from "./module";
+export * from "./label";
+export * from "./link";
+export * from "./attachment";
+export * from "./archived-at";
+export * from "./inbox";
+export * from "./label-activity-chip";
+
+// helpers
+export * from "./helpers/activity-block";
+export * from "./helpers/issue-user";
+export * from "./helpers/issue-link";
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
new file mode 100644
index 0000000..3ebea24
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+
+type TIssueLabelPill = { name?: string; color?: string };
+
+export function LabelActivityChip(props: TIssueLabelPill) {
+  const { name, color } = props;
+  return (
+    <Tooltip label={name ?? ""} layout="stacked">
+      <span className="inline-flex w-min max-w-32 flex-shrink-0 cursor-default items-center gap-2 truncate rounded-full border border-strong px-2 py-0.5 text-11 whitespace-nowrap">
+        <span
+          className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: color ?? "#000000",
+          }}
+          aria-hidden="true"
+        />
+        <span className="flex-shrink truncate font-medium text-primary">{name}</span>
+      </span>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
new file mode 100644
index 0000000..862bed2
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { LabelsOutline } from "@makeplane/propel/icons";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useLabel } from "@/hooks/store/use-label";
+// components
+import { IssueActivityBlockComponent, IssueLink, LabelActivityChip } from "./";
+
+type TIssueLabelActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueLabelActivity = observer(function IssueLabelActivity(props: TIssueLabelActivity) {
+  const { activityId, showIssue = true, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+  const { getLabelById } = useLabel();
+
+  const activity = getActivityById(activityId);
+  const oldLabelColor = getLabelById(activity?.old_identifier ?? "")?.color;
+  const newLabelColor = getLabelById(activity?.new_identifier ?? "")?.color;
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<LabelsOutline height={14} width={14} className="text-secondary" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.old_value === "" ? `added a new label ` : `removed the label `}
+        <LabelActivityChip
+          name={activity.old_value === "" ? activity.new_value : activity.old_value}
+          color={activity.old_value === "" ? newLabelColor : oldLabelColor}
+        />
+        {showIssue && (activity.old_value === "" ? ` to ` : ` from `)}
+        {showIssue && <IssueLink activityId={activityId} />}
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/link.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
new file mode 100644
index 0000000..7b901b6
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/link.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { ChatOutline } from "@makeplane/propel/icons";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+
+type TIssueLinkActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueLinkActivity = observer(function IssueLinkActivity(props: TIssueLinkActivity) {
+  const { activityId, showIssue = false, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<ChatOutline width={14} height={14} className="text-secondary" aria-hidden="true" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.verb === "created" ? (
+          <>
+            <span>added </span>
+            <a
+              href={`${activity.new_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
+            >
+              link
+            </a>
+          </>
+        ) : activity.verb === "updated" ? (
+          <>
+            <span>updated the </span>
+            <a
+              href={`${activity.old_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
+            >
+              link
+            </a>
+          </>
+        ) : (
+          <>
+            <span>removed this </span>
+            <a
+              href={`${activity.old_value}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 font-medium text-primary hover:underline"
+            >
+              link
+            </a>
+          </>
+        )}
+        {showIssue && (activity.verb === "created" ? ` to ` : ` from `)}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
new file mode 100644
index 0000000..1eb78e7
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import { ModuleOutline } from "@makeplane/propel/icons";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent } from "./";
+// icons
+
+type TIssueModuleActivity = { activityId: string; ends: "top" | "bottom" | undefined };
+
+export const IssueModuleActivity = observer(function IssueModuleActivity(props: TIssueModuleActivity) {
+  const { activityId, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<ModuleOutline className="h-4 w-4 flex-shrink-0 text-secondary" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.verb === "created" ? (
+          <>
+            <span>added this work item to the module </span>
+            <a
+              href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
+            >
+              <span className="truncate">{activity.new_value}</span>
+            </a>
+          </>
+        ) : activity.verb === "updated" ? (
+          <>
+            <span>set the module to </span>
+            <a
+              href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.new_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
+            >
+              <span className="truncate"> {activity.new_value}</span>
+            </a>
+          </>
+        ) : (
+          <>
+            <span>removed the work item from the module </span>
+            <a
+              href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.old_identifier}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 truncate font-medium text-primary hover:underline"
+            >
+              <span className="truncate"> {activity.old_value}</span>
+            </a>
+          </>
+        )}
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/name.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/name.tsx
new file mode 100644
index 0000000..86c28c1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/name.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { TextOutline } from "@makeplane/propel/icons";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent } from "./";
+
+type TIssueNameActivity = { activityId: string; ends: "top" | "bottom" | undefined };
+
+export const IssueNameActivity = observer(function IssueNameActivity(props: TIssueNameActivity) {
+  const { activityId, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<TextOutline width={14} height={14} className="text-secondary" aria-hidden="true" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>set the name to {activity.new_value}.</>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
new file mode 100644
index 0000000..56a588e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { ParentOutline } from "@makeplane/propel/icons";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+
+type TIssueParentActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueParentActivity = observer(function IssueParentActivity(props: TIssueParentActivity) {
+  const { activityId, showIssue = true, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<ParentOutline className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.new_value ? `set the parent to ` : `removed the parent `}
+        {activity.new_value ? (
+          <span className="font-medium text-primary">{activity.new_value}</span>
+        ) : (
+          <span className="font-medium text-primary">{activity.old_value}</span>
+        )}
+        {showIssue && (activity.new_value ? ` for ` : ` from `)}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
new file mode 100644
index 0000000..d7a6966
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { PriorityOutline } from "@makeplane/propel/icons";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+
+type TIssuePriorityActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssuePriorityActivity = observer(function IssuePriorityActivity(props: TIssuePriorityActivity) {
+  const { activityId, showIssue = true, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<PriorityOutline className="h-3.5 w-3.5 text-secondary" aria-hidden="true" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        set the priority to <span className="font-medium text-primary">{activity.new_value}</span>
+        {showIssue ? ` for ` : ``}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
new file mode 100644
index 0000000..5334fd7
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/relation.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// types
+import type { TIssueRelationTypes } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { useTimeLineRelationOptions } from "@/components/relations";
+// local helpers
+import { IssueActivityBlockComponent } from "./";
+import { getRelationActivityContent } from "./helpers/activity";
+
+type TIssueRelationActivity = { activityId: string; ends: "top" | "bottom" | undefined };
+
+export const IssueRelationActivity = observer(function IssueRelationActivity(props: TIssueRelationActivity) {
+  const { activityId, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+  const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
+  const activityContent = getRelationActivityContent(activity);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={activity.field ? ISSUE_RELATION_OPTIONS[activity.field as TIssueRelationTypes]?.icon(14) : <></>}
+      activityId={activityId}
+      ends={ends}
+    >
+      {activityContent}
+      {activity.old_value === "" ? (
+        <span className="font-medium text-primary">{activity.new_value}.</span>
+      ) : (
+        <span className="font-medium text-primary">{activity.old_value}.</span>
+      )}
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
new file mode 100644
index 0000000..f9ad6bc
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/start_date.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { CalendarOutline } from "@makeplane/propel/icons";
+// hooks
+import { renderFormattedDate } from "@plane/utils";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+// helpers
+
+type TIssueStartDateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueStartDateActivity = observer(function IssueStartDateActivity(props: TIssueStartDateActivity) {
+  const { activityId, showIssue = true, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<CalendarOutline width={14} height={14} className="text-secondary" aria-hidden="true" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.new_value ? `set the start date to ` : `removed the start date `}
+        {activity.new_value && (
+          <>
+            <span className="font-medium text-primary">{renderFormattedDate(activity.new_value)}</span>
+          </>
+        )}
+        {showIssue && (activity.new_value ? ` for ` : ` from `)}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
new file mode 100644
index 0000000..fe9c5e0
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import { StateOutline } from "@makeplane/propel/icons";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+// icons
+
+type TIssueStateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueStateActivity = observer(function IssueStateActivity(props: TIssueStateActivity) {
+  const { activityId, showIssue = true, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<StateOutline className="h-4 w-4 flex-shrink-0 text-secondary" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        set the state to <span className="font-medium text-primary">{activity.new_value}</span>
+        {showIssue ? ` for ` : ``}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
new file mode 100644
index 0000000..6d3c9fc
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/target_date.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { CalendarOutline } from "@makeplane/propel/icons";
+// hooks
+import { renderFormattedDate } from "@plane/utils";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueActivityBlockComponent, IssueLink } from "./";
+// helpers
+
+type TIssueTargetDateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
+
+export const IssueTargetDateActivity = observer(function IssueTargetDateActivity(props: TIssueTargetDateActivity) {
+  const { activityId, showIssue = true, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+  } = useIssueDetail();
+
+  const activity = getActivityById(activityId);
+
+  if (!activity) return <></>;
+  return (
+    <IssueActivityBlockComponent
+      icon={<CalendarOutline width={14} height={14} className="text-secondary" aria-hidden="true" />}
+      activityId={activityId}
+      ends={ends}
+    >
+      <>
+        {activity.new_value ? `set the due date to ` : `removed the due date `}
+        {activity.new_value && (
+          <>
+            <span className="font-medium text-primary">{renderFormattedDate(activity.new_value)}</span>
+          </>
+        )}
+        {showIssue && (activity.new_value ? ` for ` : ` from `)}
+        {showIssue && <IssueLink activityId={activityId} />}.
+      </>
+    </IssueActivityBlockComponent>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
new file mode 100644
index 0000000..12087a3
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// helpers
+import { getValidKeysFromObject } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useTimeLineRelationOptions } from "@/components/relations";
+// local components
+import {
+  IssueDefaultActivity,
+  IssueNameActivity,
+  IssueDescriptionActivity,
+  IssueStateActivity,
+  IssueAssigneeActivity,
+  IssuePriorityActivity,
+  IssueEstimateActivity,
+  IssueParentActivity,
+  IssueRelationActivity,
+  IssueStartDateActivity,
+  IssueTargetDateActivity,
+  IssueCycleActivity,
+  IssueModuleActivity,
+  IssueLabelActivity,
+  IssueLinkActivity,
+  IssueAttachmentActivity,
+  IssueArchivedAtActivity,
+  IssueInboxActivity,
+} from "./actions";
+
+type TIssueActivityItem = {
+  activityId: string;
+  ends: "top" | "bottom" | undefined;
+};
+
+export const IssueActivityItem = observer(function IssueActivityItem(props: TIssueActivityItem) {
+  const { activityId, ends } = props;
+  // hooks
+  const {
+    activity: { getActivityById },
+    // oxlint-disable-next-line no-empty-pattern
+    comment: {},
+  } = useIssueDetail();
+  const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
+  const activityRelations = getValidKeysFromObject(ISSUE_RELATION_OPTIONS);
+
+  const componentDefaultProps = { activityId, ends };
+
+  const activityField = getActivityById(activityId)?.field;
+  switch (activityField) {
+    case null: // default issue creation
+      return <IssueDefaultActivity {...componentDefaultProps} />;
+    case "state":
+      return <IssueStateActivity {...componentDefaultProps} showIssue={false} />;
+    case "name":
+      return <IssueNameActivity {...componentDefaultProps} />;
+    case "description":
+      return <IssueDescriptionActivity {...componentDefaultProps} showIssue={false} />;
+    case "assignees":
+      return <IssueAssigneeActivity {...componentDefaultProps} showIssue={false} />;
+    case "priority":
+      return <IssuePriorityActivity {...componentDefaultProps} showIssue={false} />;
+    case "estimate_points":
+    case "estimate_categories":
+    case "estimate_point" /* This case is to handle all the older recorded activities for estimates. Field changed from  "estimate_point" -> `estimate_${estimate_type}`*/:
+      return <IssueEstimateActivity {...componentDefaultProps} showIssue={false} />;
+    case "parent":
+      return <IssueParentActivity {...componentDefaultProps} showIssue={false} />;
+    case activityRelations.find((field) => field === activityField):
+      return <IssueRelationActivity {...componentDefaultProps} />;
+    case "start_date":
+      return <IssueStartDateActivity {...componentDefaultProps} showIssue={false} />;
+    case "target_date":
+      return <IssueTargetDateActivity {...componentDefaultProps} showIssue={false} />;
+    case "cycles":
+      return <IssueCycleActivity {...componentDefaultProps} />;
+    case "modules":
+      return <IssueModuleActivity {...componentDefaultProps} />;
+    case "labels":
+      return <IssueLabelActivity {...componentDefaultProps} showIssue={false} />;
+    case "link":
+      return <IssueLinkActivity {...componentDefaultProps} showIssue={false} />;
+    case "attachment":
+      return <IssueAttachmentActivity {...componentDefaultProps} showIssue={false} />;
+    case "archived_at":
+      return <IssueArchivedAtActivity {...componentDefaultProps} />;
+    case "intake":
+    case "inbox":
+      return <IssueInboxActivity {...componentDefaultProps} />;
+    default:
+      return null;
+  }
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/filter-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/filter-root.tsx
new file mode 100644
index 0000000..623980f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/filter-root.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TActivityFilters, TActivityFilterOption } from "@plane/constants";
+import { ACTIVITY_FILTER_TYPE_OPTIONS } from "@plane/constants";
+// components
+import { ActivityFilter } from "@/components/issues/issue-detail/issue-activity";
+
+export type TActivityFilterRoot = {
+  selectedFilters: TActivityFilters[];
+  toggleFilter: (filter: TActivityFilters) => void;
+  projectId: string;
+  isIntakeIssue?: boolean;
+};
+
+export function ActivityFilterRoot(props: TActivityFilterRoot) {
+  const { selectedFilters, toggleFilter } = props;
+
+  const filters: TActivityFilterOption[] = Object.entries(ACTIVITY_FILTER_TYPE_OPTIONS).map(([key, value]) => {
+    const filterKey = key as TActivityFilters;
+    return {
+      key: filterKey,
+      labelTranslationKey: value.labelTranslationKey,
+      isSelected: selectedFilters.includes(filterKey),
+      onClick: () => toggleFilter(filterKey),
+    };
+  });
+
+  return <ActivityFilter selectedFilters={selectedFilters} filterOptions={filters} />;
+}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx
new file mode 100644
index 0000000..8f13d0f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/helper.tsx
@@ -0,0 +1,216 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EFileAssetType } from "@plane/types";
+import type { TCommentsOperations } from "@plane/types";
+import { copyUrlToClipboard, formatTextList, generateWorkItemLink } from "@plane/utils";
+import { useEditorAsset } from "@/hooks/store/use-editor-asset";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+
+export const useWorkItemCommentOperations = (
+  workspaceSlug: string | undefined,
+  projectId: string | undefined,
+  issueId: string | undefined
+): TCommentsOperations => {
+  // store hooks
+  const {
+    commentReaction: { getCommentReactionsByCommentId, commentReactionsByUser, getCommentReactionById },
+    createComment,
+    updateComment,
+    removeComment,
+    createCommentReaction,
+    removeCommentReaction,
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { getProjectById } = useProject();
+  const { getUserDetails } = useMember();
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
+  const { data: currentUser } = useUser();
+  // derived values
+  const issueDetails = issueId ? getIssueById(issueId) : undefined;
+  const projectDetails = projectId ? getProjectById(projectId) : undefined;
+  // translation
+  const { t } = useTranslation();
+
+  const operations: TCommentsOperations = useMemo(() => {
+    // Define operations object with all methods
+    const ops: TCommentsOperations = {
+      copyCommentLink: (id) => {
+        if (!workspaceSlug || !issueDetails) return;
+        try {
+          const workItemLink = generateWorkItemLink({
+            workspaceSlug,
+            projectId: issueDetails.project_id,
+            issueId,
+            projectIdentifier: projectDetails?.identifier,
+            sequenceId: issueDetails.sequence_id,
+          });
+          const commentLink = `${workItemLink}#comment-${id}`;
+          copyUrlToClipboard(commentLink).then(() => {
+            setToast({
+              title: t("common.success"),
+              type: TOAST_TYPE.SUCCESS,
+              message: t("issue.comments.copy_link.success"),
+            });
+          });
+        } catch (error) {
+          console.error("Error in copying comment link:", error);
+          setToast({
+            title: t("common.error.label"),
+            type: TOAST_TYPE.ERROR,
+            message: t("issue.comments.copy_link.error"),
+          });
+        }
+      },
+      createComment: async (data) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
+          const comment = await createComment(workspaceSlug, projectId, issueId, data);
+          setToast({
+            title: t("common.success"),
+            type: TOAST_TYPE.SUCCESS,
+            message: t("issue.comments.create.success"),
+          });
+          return comment;
+        } catch {
+          setToast({
+            title: t("common.error.label"),
+            type: TOAST_TYPE.ERROR,
+            message: t("issue.comments.create.error"),
+          });
+        }
+      },
+      updateComment: async (commentId, data) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
+          await updateComment(workspaceSlug, projectId, issueId, commentId, data);
+          setToast({
+            title: t("common.success"),
+            type: TOAST_TYPE.SUCCESS,
+            message: t("issue.comments.update.success"),
+          });
+        } catch {
+          setToast({
+            title: t("common.error.label"),
+            type: TOAST_TYPE.ERROR,
+            message: t("issue.comments.update.error"),
+          });
+        }
+      },
+      removeComment: async (commentId) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
+          await removeComment(workspaceSlug, projectId, issueId, commentId);
+          setToast({
+            title: t("common.success"),
+            type: TOAST_TYPE.SUCCESS,
+            message: t("issue.comments.remove.success"),
+          });
+        } catch {
+          setToast({
+            title: t("common.error.label"),
+            type: TOAST_TYPE.ERROR,
+            message: t("issue.comments.remove.error"),
+          });
+        }
+      },
+      uploadCommentAsset: async (blockId, file, commentId) => {
+        try {
+          if (!workspaceSlug || !projectId) throw new Error("Missing fields");
+          const res = await uploadEditorAsset({
+            blockId,
+            data: {
+              entity_identifier: commentId ?? "",
+              entity_type: EFileAssetType.COMMENT_DESCRIPTION,
+            },
+            file,
+            projectId,
+            workspaceSlug,
+          });
+          return res;
+        } catch (error) {
+          console.log("Error in uploading comment asset:", error);
+          throw new Error(t("issue.comments.upload.error"));
+        }
+      },
+      duplicateCommentAsset: async (assetId, commentId) => {
+        try {
+          if (!workspaceSlug || !projectId) throw new Error("Missing fields");
+          const res = await duplicateEditorAsset({
+            assetId,
+            entityId: commentId || undefined,
+            entityType: EFileAssetType.COMMENT_DESCRIPTION,
+            projectId,
+            workspaceSlug,
+          });
+          return res;
+        } catch {
+          throw new Error("Asset duplication failed. Please try again later.");
+        }
+      },
+      addCommentReaction: async (commentId, reaction) => {
+        try {
+          if (!workspaceSlug || !projectId || !commentId) throw new Error("Missing fields");
+          await createCommentReaction(workspaceSlug, projectId, commentId, reaction);
+          setToast({
+            title: "Success!",
+            type: TOAST_TYPE.SUCCESS,
+            message: "Reaction created successfully",
+          });
+        } catch {
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: "Reaction creation failed",
+          });
+        }
+      },
+      deleteCommentReaction: async (commentId, reaction) => {
+        try {
+          if (!workspaceSlug || !projectId || !commentId || !currentUser?.id) throw new Error("Missing fields");
+          removeCommentReaction(workspaceSlug, projectId, commentId, reaction, currentUser.id);
+          setToast({
+            title: "Success!",
+            type: TOAST_TYPE.SUCCESS,
+            message: "Reaction removed successfully",
+          });
+        } catch {
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: "Reaction remove failed",
+          });
+        }
+      },
+      react: async (commentId, reactionEmoji, userReactions) => {
+        if (userReactions.includes(reactionEmoji)) await ops.deleteCommentReaction(commentId, reactionEmoji);
+        else await ops.addCommentReaction(commentId, reactionEmoji);
+      },
+      reactionIds: (commentId) => getCommentReactionsByCommentId(commentId),
+      userReactions: (commentId) =>
+        currentUser ? commentReactionsByUser(commentId, currentUser?.id).map((r) => r.reaction) : [],
+      getReactionUsers: (reaction, reactionIds) => {
+        const reactionUsers = (reactionIds?.[reaction] || [])
+          .map((reactionId) => {
+            const reactionDetails = getCommentReactionById(reactionId);
+            return reactionDetails ? getUserDetails(reactionDetails.actor)?.display_name : null;
+          })
+          .filter((displayName): displayName is string => !!displayName);
+        const formattedUsers = formatTextList(reactionUsers);
+        return formattedUsers;
+      },
+    };
+    return ops;
+  }, [workspaceSlug, projectId, issueId, createComment, updateComment, uploadEditorAsset, removeComment]);
+
+  return operations;
+};
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/index.ts b/apps/web/core/components/issues/issue-detail/issue-activity/index.ts
new file mode 100644
index 0000000..c20c39c
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/index.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+
+export * from "./activity-comment-root";
+
+// activity
+export * from "./activity/activity-list";
+export * from "./activity-filter";
+
+// sort
+export * from "./sort-root";
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
new file mode 100644
index 0000000..0e5c334
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/loader.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { Loader } from "@plane/ui";
+
+export function IssueActivityLoader() {
+  return (
+    <Loader className="space-y-8">
+      <div className="flex items-start gap-3">
+        <Loader.Item className="shrink-0" height="28px" width="28px" />
+        <div className="w-full space-y-2">
+          <Loader.Item height="8px" width="60%" />
+          <Loader.Item height="8px" width="40%" />
+          <Loader.Item height="10px" width="100%" />
+        </div>
+      </div>
+      <div className="flex items-start gap-3">
+        <Loader.Item className="shrink-0" height="28px" width="28px" />
+        <div className="w-full space-y-2">
+          <Loader.Item height="8px" width="40%" />
+          <Loader.Item height="8px" width="60%" />
+          <Loader.Item height="10px" width="80%" />
+        </div>
+      </div>
+      <div className="flex items-start gap-3">
+        <Loader.Item className="shrink-0" height="28px" width="28px" />
+        <div className="w-full space-y-2">
+          <Loader.Item height="8px" width="60%" />
+          <Loader.Item height="8px" width="40%" />
+          <Loader.Item height="10px" width="100%" />
+        </div>
+      </div>
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx
new file mode 100644
index 0000000..9f4dea4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/root.tsx
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import uniq from "lodash-es/uniq";
+import { observer } from "mobx-react";
+// plane package imports
+import type { TActivityFilters } from "@plane/constants";
+import { E_SORT_ORDER, defaultActivityFilters } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+// i18n
+import { useTranslation } from "@plane/i18n";
+//types
+import type { TFileSignedURLResponse, TIssueComment } from "@plane/types";
+// components
+import { CommentCreate } from "@/components/comments/comment-create";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// local imports
+import { IssueActivityCommentRoot } from "./activity-comment-root";
+import { useWorkItemCommentOperations } from "./helper";
+import { ActivitySortRoot } from "./sort-root";
+import { ActivityFilterRoot } from "./filter-root";
+
+type TIssueActivity = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled?: boolean;
+  isIntakeIssue?: boolean;
+};
+
+export type TActivityOperations = {
+  createComment: (data: Partial<TIssueComment>) => Promise<TIssueComment>;
+  updateComment: (commentId: string, data: Partial<TIssueComment>) => Promise<void>;
+  removeComment: (commentId: string) => Promise<void>;
+  uploadCommentAsset: (blockId: string, file: File, commentId?: string) => Promise<TFileSignedURLResponse>;
+};
+
+export const IssueActivity = observer(function IssueActivity(props: TIssueActivity) {
+  const { workspaceSlug, projectId, issueId, disabled = false, isIntakeIssue = false } = props;
+  // i18n
+  const { t } = useTranslation();
+  // hooks
+  const { setValue: setFilterValue, storedValue: selectedFilters } = useLocalStorage(
+    "issue_activity_filters",
+    defaultActivityFilters
+  );
+  const { setValue: setSortOrder, storedValue: sortOrder } = useLocalStorage("activity_sort_order", E_SORT_ORDER.ASC);
+
+  const { getProjectById } = useProject();
+
+  // toggle filter
+  const toggleFilter = (filter: TActivityFilters) => {
+    if (!selectedFilters) return;
+    let _filters = [];
+    if (selectedFilters.includes(filter)) {
+      if (selectedFilters.length === 1) return selectedFilters; // Ensure at least one filter is applied
+      _filters = selectedFilters.filter((f) => f !== filter);
+    } else {
+      _filters = [...selectedFilters, filter];
+    }
+
+    setFilterValue(uniq(_filters));
+  };
+
+  const toggleSortOrder = () => {
+    setSortOrder(sortOrder === E_SORT_ORDER.ASC ? E_SORT_ORDER.DESC : E_SORT_ORDER.ASC);
+  };
+
+  // helper hooks
+  const activityOperations = useWorkItemCommentOperations(workspaceSlug, projectId, issueId);
+
+  const project = getProjectById(projectId);
+  const renderCommentCreationBox = useMemo(
+    () => (
+      <CommentCreate
+        workspaceSlug={workspaceSlug}
+        entityId={issueId}
+        activityOperations={activityOperations}
+        showToolbarInitially
+        projectId={projectId}
+      />
+    ),
+    [workspaceSlug, issueId, activityOperations, projectId]
+  );
+  if (!project) return <></>;
+
+  return (
+    <div className="space-y-4">
+      {/* header */}
+      <div className="flex items-center justify-between">
+        <div className="text-h5-medium text-primary">{t("common.activity")}</div>
+        <div className="flex items-center gap-2">
+          <ActivitySortRoot sortOrder={sortOrder || E_SORT_ORDER.ASC} toggleSort={toggleSortOrder} />
+          <ActivityFilterRoot
+            selectedFilters={selectedFilters || defaultActivityFilters}
+            toggleFilter={toggleFilter}
+            isIntakeIssue={isIntakeIssue}
+            projectId={projectId}
+          />
+        </div>
+      </div>
+
+      {/* rendering activity */}
+      <div className="space-y-3">
+        <div className="min-h-[200px]">
+          <div className="space-y-3">
+            {!disabled && sortOrder === E_SORT_ORDER.DESC && renderCommentCreationBox}
+            <IssueActivityCommentRoot
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+              isIntakeIssue={isIntakeIssue}
+              issueId={issueId}
+              selectedFilters={selectedFilters || defaultActivityFilters}
+              activityOperations={activityOperations}
+              showAccessSpecifier={!!project.anchor}
+              disabled={disabled}
+              sortOrder={sortOrder || E_SORT_ORDER.ASC}
+            />
+            {!disabled && sortOrder === E_SORT_ORDER.ASC && renderCommentCreationBox}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
new file mode 100644
index 0000000..daba50e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { memo } from "react";
+import { SortAscendingOutline, SortDescendingOutline } from "@makeplane/propel/icons";
+// plane package imports
+import { E_SORT_ORDER } from "@plane/constants";
+import { IconButton } from "@plane/propel/icon-button";
+
+export type TActivitySortRoot = {
+  sortOrder: E_SORT_ORDER;
+  toggleSort: () => void;
+};
+export const ActivitySortRoot = memo(function ActivitySortRoot(props: TActivitySortRoot) {
+  const SortIcon = props.sortOrder === E_SORT_ORDER.ASC ? SortAscendingOutline : SortDescendingOutline;
+  return <IconButton variant="tertiary" icon={SortIcon} onClick={props.toggleSort} />;
+});
+
+ActivitySortRoot.displayName = "ActivitySortRoot";
diff --git a/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
new file mode 100644
index 0000000..6c9cc4a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { LinkOutline } from "@makeplane/propel/icons";
+import { IconButton } from "@plane/propel/icon-button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { EIssuesStoreType } from "@plane/types";
+import { generateWorkItemLink, copyTextToClipboard } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { WorkItemDetailQuickActions } from "../issue-layouts/quick-action-dropdowns";
+import { IssueSubscription } from "./subscription";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+};
+
+export const IssueDetailQuickActions = observer(function IssueDetailQuickActions(props: Props) {
+  const { workspaceSlug, projectId, issueId } = props;
+  const { t } = useTranslation();
+
+  // ref
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  // router
+  const router = useAppRouter();
+
+  // hooks
+  const { data: currentUser } = useUser();
+  const { isMobile } = usePlatformOS();
+  const { getProjectIdentifierById } = useProject();
+  const {
+    issue: { getIssueById },
+    removeIssue,
+    archiveIssue,
+  } = useIssueDetail();
+  const {
+    issues: { restoreIssue },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+  const {
+    issues: { removeIssue: removeArchivedIssue },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+
+  // derived values
+  const issue = getIssueById(issueId);
+  if (!issue) return <></>;
+
+  const projectIdentifier = getProjectIdentifierById(projectId);
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug,
+    projectId,
+    issueId,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+  });
+
+  // handlers
+  const handleCopyText = async () => {
+    try {
+      const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+      await copyTextToClipboard(`${originURL}${workItemLink}`);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("common.link_copied"),
+        message: t("common.copied_to_clipboard"),
+      });
+    } catch (_error) {
+      setToast({
+        title: t("toast.error"),
+        type: TOAST_TYPE.ERROR,
+      });
+    }
+  };
+
+  const handleDeleteIssue = async () => {
+    try {
+      const deleteIssue = issue?.archived_at ? removeArchivedIssue : removeIssue;
+      const redirectionPath = issue?.archived_at
+        ? `/${workspaceSlug}/projects/${projectId}/archives/issues`
+        : `/${workspaceSlug}/projects/${projectId}/issues`;
+
+      await deleteIssue(workspaceSlug, projectId, issueId);
+      router.push(redirectionPath);
+    } catch (_error) {
+      setToast({
+        title: t("toast.error"),
+        type: TOAST_TYPE.ERROR,
+        message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
+      });
+    }
+  };
+
+  const handleArchiveIssue = async () => {
+    try {
+      await archiveIssue(workspaceSlug, projectId, issueId);
+      router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
+    } catch (_error) {
+      setToast({
+        title: t("toast.error"),
+        type: TOAST_TYPE.ERROR,
+        message: t("issue.archive.failed.message"),
+      });
+    }
+  };
+
+  const handleRestore = async () => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+    try {
+      await restoreIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString());
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("issue.restore.success.title"),
+        message: t("issue.restore.success.message"),
+      });
+      router.push(workItemLink);
+    } catch (_error) {
+      setToast({
+        title: t("toast.error"),
+        type: TOAST_TYPE.ERROR,
+        message: t("issue.restore.failed.message"),
+      });
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-shrink-0 items-center justify-end">
+        <div className="flex flex-wrap items-center gap-2">
+          {currentUser && !issue?.archived_at && (
+            <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
+          )}
+          <div className="flex flex-wrap items-center gap-2 text-tertiary">
+            <Tooltip label={t("common.actions.copy_link")} disabled={isMobile}>
+              <IconButton variant="secondary" size="lg" onClick={handleCopyText} icon={LinkOutline} />
+            </Tooltip>
+            <WorkItemDetailQuickActions
+              parentRef={parentRef}
+              issue={issue}
+              handleDelete={handleDeleteIssue}
+              handleArchive={handleArchiveIssue}
+              handleRestore={handleRestore}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/issue-identifier.tsx b/apps/web/core/components/issues/issue-detail/issue-identifier.tsx
new file mode 100644
index 0000000..561b15b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/issue-identifier.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import type { TIssueIdentifierProps } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { IdentifierText } from "@/components/issues/issue-detail/identifier-text";
+
+export const IssueIdentifier = observer(function IssueIdentifier(props: TIssueIdentifierProps) {
+  const { projectId, variant, size, displayProperties, enableClickToCopyIdentifier = false } = props;
+  // store hooks
+  const { getProjectIdentifierById } = useProject();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // Determine if the component is using store data or not
+  const isUsingStoreData = "issueId" in props;
+  // derived values
+  const issue = isUsingStoreData ? getIssueById(props.issueId) : null;
+  const projectIdentifier = isUsingStoreData ? getProjectIdentifierById(projectId) : props.projectIdentifier;
+  const issueSequenceId = isUsingStoreData ? issue?.sequence_id : props.issueSequenceId;
+  const shouldRenderIssueID = displayProperties ? displayProperties.key : true;
+
+  if (!shouldRenderIssueID) return null;
+
+  return (
+    <div className="flex shrink-0 items-center space-x-2">
+      <IdentifierText
+        identifier={`${projectIdentifier}-${issueSequenceId}`}
+        enableClickToCopyIdentifier={enableClickToCopyIdentifier}
+        variant={variant}
+        size={size}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/label/create-label.tsx b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
new file mode 100644
index 0000000..830b7be
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, Fragment, useEffect } from "react";
+import { TwitterPicker } from "react-color";
+import { Controller, useForm } from "react-hook-form";
+import { usePopper } from "react-popper";
+import { AddOutline, CloseOutline, LoadingOutline } from "@makeplane/propel/icons";
+import { Popover } from "@headlessui/react";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import type { IIssueLabel } from "@plane/types";
+// hooks
+
+// ui
+// types
+import type { TLabelOperations } from "./root";
+
+type ILabelCreate = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  values: string[];
+  labelOperations: TLabelOperations;
+  disabled?: boolean;
+};
+
+const defaultValues: Partial<IIssueLabel> = {
+  name: "",
+  color: "#ff0000",
+};
+
+export function LabelCreate(props: ILabelCreate) {
+  const { workspaceSlug, projectId, issueId, values, labelOperations, disabled = false } = props;
+  // state
+  const [isCreateToggle, setIsCreateToggle] = useState(false);
+  const handleIsCreateToggle = () => setIsCreateToggle(!isCreateToggle);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // react hook form
+  const {
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+    control,
+    setFocus,
+  } = useForm<Partial<IIssueLabel>>({
+    defaultValues,
+  });
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  useEffect(() => {
+    if (!isCreateToggle) return;
+
+    setFocus("name");
+    reset();
+  }, [isCreateToggle, reset, setFocus]);
+
+  const handleLabel = async (formData: Partial<IIssueLabel>) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+
+    const labelResponse = await labelOperations.createLabel(workspaceSlug, projectId, formData);
+    const currentLabels = [...(values || []), labelResponse.id];
+    await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels });
+    handleIsCreateToggle();
+    reset(defaultValues);
+  };
+
+  return (
+    <>
+      <div
+        className="relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-full border border-subtle p-0.5 px-2 text-11 text-tertiary transition-all hover:bg-surface-2 hover:text-secondary"
+        onClick={handleIsCreateToggle}
+      >
+        <div className="flex-shrink-0">
+          {isCreateToggle ? <CloseOutline className="h-2.5 w-2.5" /> : <AddOutline className="h-2.5 w-2.5" />}
+        </div>
+        <div className="flex-shrink-0">{isCreateToggle ? "Cancel" : "New"}</div>
+      </div>
+
+      {isCreateToggle && (
+        <form className="relative flex items-center gap-x-2 p-1" onSubmit={handleSubmit(handleLabel)}>
+          <div>
+            <Controller
+              name="color"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <Popover>
+                  <>
+                    <Popover.Button as={Fragment}>
+                      <button type="button" ref={setReferenceElement} className="grid place-items-center outline-none">
+                        {value && value?.trim() !== "" && (
+                          <span
+                            className="h-5 w-5 rounded-sm"
+                            style={{
+                              backgroundColor: value ?? "black",
+                            }}
+                          />
+                        )}
+                      </button>
+                    </Popover.Button>
+                    <Popover.Panel className="fixed z-10">
+                      <div
+                        className="max-w-xs p-2 sm:px-0"
+                        ref={setPopperElement}
+                        style={styles.popper}
+                        {...attributes.popper}
+                      >
+                        <TwitterPicker triangle={"hide"} color={value} onChange={(value) => onChange(value.hex)} />
+                      </div>
+                    </Popover.Panel>
+                  </>
+                </Popover>
+              )}
+            />
+          </div>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: "This is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="name" invalid={Boolean(errors.name)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="name"
+                    name="name"
+                    type="text"
+                    value={value ?? ""}
+                    onChange={onChange}
+                    ref={ref}
+                    placeholder="Title"
+                    disabled={isSubmitting}
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+          <button
+            type="button"
+            className="grid place-items-center rounded-sm bg-danger-primary p-1"
+            onClick={() => setIsCreateToggle(false)}
+            disabled={disabled}
+          >
+            <CloseOutline className="h-3.5 w-3.5 text-on-color" />
+          </button>
+          <button
+            type="submit"
+            className="grid place-items-center rounded-sm bg-success-primary p-1"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? (
+              <LoadingOutline className="spin h-3.5 w-3.5 text-on-color" />
+            ) : (
+              <AddOutline className="h-3.5 w-3.5 text-on-color" />
+            )}
+          </button>
+        </form>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/label/index.ts b/apps/web/core/components/issues/issue-detail/label/index.ts
new file mode 100644
index 0000000..cb23f59
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/label/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+
+export * from "./label-list";
+export * from "./label-list-item";
+export * from "./create-label";
+export * from "./select/root";
+export * from "./select/label-select";
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
new file mode 100644
index 0000000..bb11041
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Button } from "@plane/propel/button";
+import { CloseOutline, LabelsFilled } from "@makeplane/propel/icons";
+// types
+import { useLabel } from "@/hooks/store/use-label";
+import type { TLabelOperations } from "./root";
+
+type TLabelListItem = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  labelId: string;
+  values: string[];
+  labelOperations: TLabelOperations;
+  disabled: boolean;
+};
+
+export const LabelListItem = observer(function LabelListItem(props: TLabelListItem) {
+  const { workspaceSlug, projectId, issueId, labelId, values, labelOperations, disabled } = props;
+  // hooks
+  const { getLabelById } = useLabel();
+
+  const label = getLabelById(labelId);
+
+  const handleLabel = async () => {
+    if (values && !disabled) {
+      const currentLabels = values.filter((_labelId) => _labelId !== labelId);
+      await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels });
+    }
+  };
+
+  if (!label) return <></>;
+  return (
+    <Button variant="tertiary" size="sm" key={labelId} onClick={handleLabel} disabled={disabled}>
+      <LabelsFilled className="size-3" color={label.color ?? "#000000"} />
+      <span className="text-body-xs-regular">{label.name}</span>
+      {!disabled && <CloseOutline className="h-2.5 w-2.5 transition-all group-hover:text-danger-primary" />}
+    </Button>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list.tsx b/apps/web/core/components/issues/issue-detail/label/label-list.tsx
new file mode 100644
index 0000000..054f84a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/label/label-list.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { LabelListItem } from "./label-list-item";
+// types
+import type { TLabelOperations } from "./root";
+
+type TLabelList = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  values: string[];
+  labelOperations: TLabelOperations;
+  disabled: boolean;
+};
+
+export const LabelList = observer(function LabelList(props: TLabelList) {
+  const { workspaceSlug, projectId, issueId, values, labelOperations, disabled } = props;
+  const issueLabels = values || undefined;
+
+  if (!issueId || !issueLabels) return <></>;
+  return (
+    <>
+      {issueLabels.map((labelId) => (
+        <LabelListItem
+          key={labelId}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          labelId={labelId}
+          values={issueLabels}
+          labelOperations={labelOperations}
+          disabled={disabled}
+        />
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/label/root.tsx b/apps/web/core/components/issues/issue-detail/label/root.tsx
new file mode 100644
index 0000000..b205c56
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/label/root.tsx
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IIssueLabel, TIssue, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// components
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useLabel } from "@/hooks/store/use-label";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+// ui
+// types
+import { LabelList, IssueLabelSelectRoot } from "./";
+// TODO: Fix this import statement, as core should not import from ee
+
+export type TIssueLabel = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled: boolean;
+  isInboxIssue?: boolean;
+  onLabelUpdate?: (labelIds: string[]) => void;
+  issueServiceType?: TIssueServiceType;
+};
+
+export type TLabelOperations = {
+  updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<any>;
+};
+
+export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    disabled = false,
+    isInboxIssue = false,
+    onLabelUpdate,
+    issueServiceType = EIssueServiceType.ISSUES,
+  } = props;
+  const { t } = useTranslation();
+  // hooks
+  const { updateIssue } = useIssueDetail(issueServiceType);
+  const { createLabel } = useLabel();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail(issueServiceType);
+  const { getIssueInboxByIssueId } = useProjectInbox();
+
+  const issue = isInboxIssue ? getIssueInboxByIssueId(issueId)?.issue : getIssueById(issueId);
+
+  const labelOperations: TLabelOperations = useMemo(
+    () => ({
+      updateIssue: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
+        try {
+          if (onLabelUpdate) onLabelUpdate(data.label_ids || []);
+          else await updateIssue(workspaceSlug, projectId, issueId, data);
+        } catch (_error) {
+          setToast({
+            title: t("toast.error"),
+            type: TOAST_TYPE.ERROR,
+            message: t("entity.update.failed", { entity: t("issue.label", { count: 1 }) }),
+          });
+        }
+      },
+      createLabel: async (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => {
+        try {
+          const labelResponse = await createLabel(workspaceSlug, projectId, data);
+          if (!isInboxIssue)
+            setToast({
+              title: t("toast.success"),
+              type: TOAST_TYPE.SUCCESS,
+              message: t("label.create.success"),
+            });
+          return labelResponse;
+        } catch (error) {
+          let errMessage = t("label.create.failed");
+          if (error && (error as any).error === "Label with the same name already exists in the project")
+            errMessage = t("label.create.already_exists");
+
+          setToast({
+            title: t("toast.error"),
+            type: TOAST_TYPE.ERROR,
+            message: errMessage,
+          });
+          throw error;
+        }
+      },
+    }),
+    [updateIssue, createLabel, onLabelUpdate]
+  );
+
+  return (
+    <div className="relative flex min-h-7.5 w-full flex-wrap items-center gap-1 px-2">
+      <LabelList
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        issueId={issueId}
+        values={issue?.label_ids || []}
+        labelOperations={labelOperations}
+        disabled={disabled}
+      />
+
+      {!disabled && (
+        <IssueLabelSelectRoot
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          values={issue?.label_ids || []}
+          labelOperations={labelOperations}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
new file mode 100644
index 0000000..07cfe84
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -0,0 +1,225 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { AddOutline, LoadingOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IIssueLabel } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+// helpers
+import { getTabIndex } from "@plane/utils";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+import { useUserPermissions } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+//constants
+export interface IIssueLabelSelect {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  values: string[];
+  onSelect: (_labelIds: string[]) => void;
+  onAddLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<any>;
+}
+
+export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssueLabelSelect) {
+  const { workspaceSlug, projectId, issueId, values, onSelect, onAddLabel } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const { isMobile } = usePlatformOS();
+  const { fetchProjectLabels, getProjectLabels } = useLabel();
+  const { allowPermissions } = useUserPermissions();
+  // states
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [query, setQuery] = useState("");
+  const [submitting, setSubmitting] = useState<boolean>(false);
+
+  const canCreateLabel =
+    projectId && allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId);
+
+  const projectLabels = getProjectLabels(projectId);
+
+  const { baseTabIndex } = getTabIndex(undefined, isMobile);
+
+  const fetchLabels = () => {
+    setIsLoading(true);
+    if (!projectLabels && workspaceSlug && projectId)
+      fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
+  };
+
+  const options = (projectLabels ?? []).map((label) => ({
+    value: label.id,
+    query: label.name,
+    content: (
+      <div className="flex items-center justify-start gap-2 overflow-hidden">
+        <span
+          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: label.color,
+          }}
+        />
+        <div className="line-clamp-1 inline-block truncate">{label.name}</div>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const issueLabels = values ?? [];
+
+  const label = <span className="text-body-xs-medium text-placeholder">{t("label.select")}</span>;
+
+  const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+
+    if (query !== "" && e.key === "Enter" && !e.nativeEvent.isComposing && canCreateLabel) {
+      e.stopPropagation();
+      e.preventDefault();
+      await handleAddLabel(query);
+    }
+  };
+
+  const handleAddLabel = async (labelName: string) => {
+    setSubmitting(true);
+    const label = await onAddLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
+    onSelect([...values, label.id]);
+    setQuery("");
+    setSubmitting(false);
+  };
+
+  if (!issueId || !values) return <></>;
+
+  return (
+    <>
+      <Combobox
+        as="div"
+        className="size-full flex-shrink-0 text-left"
+        value={issueLabels}
+        onChange={(value) => onSelect(value)}
+        multiple
+      >
+        <Combobox.Button as={Fragment}>
+          <Button
+            ref={setReferenceElement}
+            type="button"
+            variant="tertiary"
+            size="sm"
+            prependIcon={<AddOutline />}
+            onClick={() => !projectLabels && fetchLabels()}
+          >
+            {label}
+          </Button>
+        </Combobox.Button>
+
+        <Combobox.Options as="ul" className="fixed z-10">
+          <div
+            className={`z-10 my-1 w-48 rounded-sm border border-strong bg-surface-1 py-2.5 text-11 whitespace-nowrap shadow-raised-200 focus:outline-none`}
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="px-2">
+              <div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
+                <SearchOutline className="h-3.5 w-3.5 text-tertiary" />
+                <Combobox.Input
+                  className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder={t("common.search.label")}
+                  displayValue={(assigned: any) => assigned?.name}
+                  onKeyDown={searchInputKeyDown}
+                  tabIndex={baseTabIndex}
+                />
+              </div>
+            </div>
+            <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-48 overflow-y-scroll px-2 pr-0`}>
+              {isLoading ? (
+                <p className="text-center text-secondary">{t("common.loading")}</p>
+              ) : filteredOptions.length > 0 ? (
+                <ul className="space-y-1">
+                  {filteredOptions.map((option) => (
+                    <Combobox.Option
+                      as="li"
+                      key={option.value}
+                      value={option.value}
+                      className={({ selected }) =>
+                        `flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none hover:bg-layer-1 ${
+                          selected ? "text-primary" : "text-secondary"
+                        }`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          {option.content}
+                          {selected && (
+                            <div className="flex-shrink-0">
+                              <TickOutline className={`h-3.5 w-3.5`} />
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  ))}
+                </ul>
+              ) : submitting ? (
+                <LoadingOutline className="spin h-3.5 w-3.5" />
+              ) : canCreateLabel ? (
+                <ul className="space-y-1">
+                  <Combobox.Option
+                    as="li"
+                    value={query}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      if (!query.length) return;
+                      handleAddLabel(query);
+                    }}
+                    className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                  >
+                    {query.length ? (
+                      <>
+                        {/* TODO: Translate here */}+ Add <span className="text-primary">"{query}"</span> to
+                        labels
+                      </>
+                    ) : (
+                      t("label.create.type")
+                    )}
+                  </Combobox.Option>
+                </ul>
+              ) : (
+                <p className="text-left text-secondary">{t("common.search.no_matching_results")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      </Combobox>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/label/select/root.tsx b/apps/web/core/components/issues/issue-detail/label/select/root.tsx
new file mode 100644
index 0000000..c43ec6a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/label/select/root.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components
+import type { TLabelOperations } from "../root";
+import { IssueLabelSelect } from "./label-select";
+// types
+
+type TIssueLabelSelectRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  values: string[];
+  labelOperations: TLabelOperations;
+};
+
+export function IssueLabelSelectRoot(props: TIssueLabelSelectRoot) {
+  const { workspaceSlug, projectId, issueId, values, labelOperations } = props;
+
+  const handleLabel = async (_labelIds: string[]) => {
+    await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: _labelIds });
+  };
+
+  return (
+    <IssueLabelSelect
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+      issueId={issueId}
+      values={values}
+      onSelect={handleLabel}
+      onAddLabel={labelOperations.createLabel}
+    />
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
new file mode 100644
index 0000000..91c3e4f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { useTranslation } from "@plane/i18n";
+// plane types
+import { Button } from "@plane/propel/button";
+import type { TIssueLinkEditableFields, TIssueServiceType } from "@plane/types";
+// plane ui
+import { ModalCore } from "@plane/ui";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// types
+import type { TLinkOperations } from "./root";
+
+export type TLinkOperationsModal = Exclude<TLinkOperations, "remove">;
+
+export type TIssueLinkCreateFormFieldOptions = TIssueLinkEditableFields & {
+  id?: string;
+};
+
+export type TIssueLinkCreateEditModal = {
+  isModalOpen: boolean;
+  handleOnClose?: () => void;
+  linkOperations: TLinkOperationsModal;
+  issueServiceType: TIssueServiceType;
+};
+
+const defaultValues: TIssueLinkCreateFormFieldOptions = {
+  title: "",
+  url: "",
+};
+
+export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdateModal(
+  props: TIssueLinkCreateEditModal
+) {
+  const { isModalOpen, handleOnClose, linkOperations, issueServiceType } = props;
+  // i18n
+  const { t } = useTranslation();
+  // react hook form
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<TIssueLinkCreateFormFieldOptions>({
+    defaultValues,
+  });
+  // store hooks
+  const { issueLinkData: preloadedData, setIssueLinkData } = useIssueDetail(issueServiceType);
+
+  const onClose = () => {
+    setIssueLinkData(null);
+    if (handleOnClose) handleOnClose();
+  };
+
+  const handleFormSubmit = async (formData: TIssueLinkCreateFormFieldOptions) => {
+    const parsedUrl = formData.url.startsWith("http") ? formData.url : `http://${formData.url}`;
+    try {
+      if (!formData || !formData.id) await linkOperations.create({ title: formData.title, url: parsedUrl });
+      else await linkOperations.update(formData.id, { title: formData.title, url: parsedUrl });
+      onClose();
+    } catch (error) {
+      console.error("error", error);
+    }
+  };
+
+  useEffect(() => {
+    if (isModalOpen) reset({ ...defaultValues, ...preloadedData });
+  }, [preloadedData, reset, isModalOpen]);
+
+  return (
+    <ModalCore isOpen={isModalOpen} handleClose={onClose}>
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
+        <div className="space-y-5 p-5">
+          <h3 className="text-h4-medium text-secondary">
+            {preloadedData?.id ? t("common.update_link") : t("common.add_link")}
+          </h3>
+          <div className="mt-2 space-y-3">
+            <div>
+              <label htmlFor="url" className="mb-2 text-secondary">
+                {t("common.url")}
+              </label>
+              <Controller
+                control={control}
+                name="url"
+                rules={{
+                  required: "URL is required",
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Field name="url" invalid={Boolean(errors.url)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="url"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        placeholder={t("common.type_or_paste_a_url")}
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+              {errors.url && (
+                <span className="text-caption-sm-regular text-danger-primary">{t("common.url_is_invalid")}</span>
+              )}
+            </div>
+            <div>
+              <label htmlFor="title" className="mb-2 text-secondary">
+                {t("common.display_title")}
+                <span className="block text-caption-xs-regular">{t("common.optional")}</span>
+              </label>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Field name="title" invalid={Boolean(errors.title)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="title"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        placeholder={t("common.link_title_placeholder")}
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            {t("common.cancel")}
+          </Button>
+          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+            {`${
+              preloadedData?.id
+                ? isSubmitting
+                  ? t("common.updating")
+                  : t("common.update")
+                : isSubmitting
+                  ? t("common.adding")
+                  : t("common.add")
+            } ${t("common.link")}`}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/links/index.ts b/apps/web/core/components/issues/issue-detail/links/index.ts
new file mode 100644
index 0000000..4ee36de
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/links/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+
+export * from "./links";
+export * from "./link-detail";
+export * from "./link-item";
+export * from "./link-list";
diff --git a/apps/web/core/components/issues/issue-detail/links/link-detail.tsx b/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
new file mode 100644
index 0000000..4666eea
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { DeleteOutline, EditOutline, NewTabOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { getIconForLink, copyTextToClipboard, calculateTimeAgo } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+import type { TLinkOperationsModal } from "./create-update-link-modal";
+
+export type TIssueLinkDetail = {
+  linkId: string;
+  linkOperations: TLinkOperationsModal;
+  isNotAllowed: boolean;
+};
+
+export function IssueLinkDetail(props: TIssueLinkDetail) {
+  // props
+  const { linkId, linkOperations, isNotAllowed } = props;
+  // hooks
+  const {
+    toggleIssueLinkModal: toggleIssueLinkModalStore,
+    link: { getLinkById },
+    setIssueLinkData,
+  } = useIssueDetail();
+  const { getUserDetails } = useMember();
+  const { isMobile } = usePlatformOS();
+  const linkDetail = getLinkById(linkId);
+  if (!linkDetail) return <></>;
+
+  const Icon = getIconForLink(linkDetail.url);
+
+  const toggleIssueLinkModal = (modalToggle: boolean) => {
+    toggleIssueLinkModalStore(modalToggle);
+    setIssueLinkData(linkDetail);
+  };
+
+  const createdByDetails = getUserDetails(linkDetail.created_by_id);
+
+  return (
+    <div key={linkId}>
+      <div className="relative flex flex-col rounded-md bg-surface-2 p-2.5">
+        <div
+          className="flex w-full cursor-pointer items-start justify-between gap-2"
+          onClick={() => {
+            copyTextToClipboard(linkDetail.url);
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Link copied!",
+              message: "Link copied to clipboard",
+            });
+          }}
+        >
+          <div className="flex items-start gap-2 truncate">
+            <span className="py-1">
+              <Icon className="size-3 flex-shrink-0 stroke-2 text-tertiary group-hover:text-primary" />
+            </span>
+            <Tooltip
+              label={linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
+              layout="stacked"
+              disabled={isMobile}
+            >
+              <span className="truncate text-11">
+                {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
+              </span>
+            </Tooltip>
+          </div>
+
+          {!isNotAllowed && (
+            <div className="z-[1] flex flex-shrink-0 items-center gap-2">
+              <button
+                type="button"
+                className="flex items-center justify-center p-1 hover:bg-layer-1"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  toggleIssueLinkModal(true);
+                }}
+              >
+                <EditOutline className="h-3 w-3 stroke-[1.5] text-secondary" />
+              </button>
+              <a
+                href={linkDetail.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-center p-1 hover:bg-layer-1"
+              >
+                <NewTabOutline className="h-3 w-3 stroke-[1.5] text-secondary" />
+              </a>
+              <button
+                type="button"
+                className="flex items-center justify-center p-1 hover:bg-layer-1"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  linkOperations.remove(linkDetail.id);
+                }}
+              >
+                <DeleteOutline className="h-3 w-3" />
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="px-5">
+          <p className="mt-0.5 stroke-[1.5] text-11 text-tertiary">
+            Added {calculateTimeAgo(linkDetail.created_at)}
+            <br />
+            {createdByDetails && (
+              <>
+                by {createdByDetails?.is_bot ? createdByDetails?.first_name + " Bot" : createdByDetails?.display_name}
+              </>
+            )}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/links/link-item.tsx b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
new file mode 100644
index 0000000..f0b9e1b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/links/link-item.tsx
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import { useTranslation } from "@plane/i18n";
+import { CopyOutline, DeleteOutline, EditOutline, LinkOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+import { calculateTimeAgo, copyTextToClipboard } from "@plane/utils";
+// helpers
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import type { TLinkOperationsModal } from "./create-update-link-modal";
+
+type TIssueLinkItem = {
+  linkId: string;
+  linkOperations: TLinkOperationsModal;
+  isNotAllowed: boolean;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkItem) {
+  // props
+  const { linkId, linkOperations, isNotAllowed, issueServiceType = EIssueServiceType.ISSUES } = props;
+  // hooks
+  const { t } = useTranslation();
+  const {
+    toggleIssueLinkModal: toggleIssueLinkModalStore,
+    setIssueLinkData,
+    link: { getLinkById },
+  } = useIssueDetail(issueServiceType);
+  const { isMobile } = usePlatformOS();
+  const linkDetail = getLinkById(linkId);
+  if (!linkDetail) return <></>;
+
+  // const Icon = getIconForLink(linkDetail.url);
+  const faviconUrl: string | undefined = linkDetail.metadata?.favicon;
+  const linkTitle: string | undefined = linkDetail.metadata?.title;
+
+  const toggleIssueLinkModal = (modalToggle: boolean) => {
+    toggleIssueLinkModalStore(modalToggle);
+    setIssueLinkData(linkDetail);
+  };
+  return (
+    <>
+      <div
+        key={linkId}
+        className="group 3xl:col-span-2 col-span-12 flex h-10 flex-shrink-0 items-center justify-between gap-3 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-3 hover:bg-layer-1 lg:col-span-6 xl:col-span-4 2xl:col-span-3"
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-2.5">
+          {faviconUrl ? (
+            <img src={faviconUrl} alt="favicon" className="size-4 flex-shrink-0" />
+          ) : (
+            <LinkOutline className="size-4 flex-shrink-0 text-tertiary group-hover:text-primary" />
+          )}
+          <Tooltip label={linkDetail.url} layout="stacked" disabled={isMobile}>
+            <a
+              href={linkDetail.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex w-0 flex-1 cursor-pointer items-center text-body-xs-regular"
+            >
+              <span className="w-0 flex-1 truncate">
+                {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
+                {linkTitle && linkTitle !== "" && (
+                  <span className="text-caption-sm-regular text-placeholder"> {linkTitle}</span>
+                )}
+              </span>
+            </a>
+          </Tooltip>
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-1">
+          <p className="group-hover-text-secondary p-1 align-bottom text-caption-sm-regular leading-5 text-placeholder">
+            {calculateTimeAgo(linkDetail.created_at)}
+          </p>
+          <span
+            onClick={() => {
+              copyTextToClipboard(linkDetail.url);
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: t("common.link_copied"),
+                message: t("common.link_copied_to_clipboard"),
+              });
+            }}
+            className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-placeholder outline-none group-hover:text-secondary hover:bg-layer-1"
+          >
+            <CopyOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+          </span>
+          <CustomMenu
+            ellipsis
+            buttonClassName="text-placeholder group-hover:text-secondary"
+            placement="bottom-end"
+            closeOnSelect
+            disabled={isNotAllowed}
+          >
+            <CustomMenu.MenuItem
+              className="flex items-center gap-2"
+              onClick={() => {
+                toggleIssueLinkModal(true);
+              }}
+            >
+              <EditOutline className="h-3 w-3 stroke-[1.5] text-secondary" />
+              {t("common.actions.edit")}
+            </CustomMenu.MenuItem>
+            <CustomMenu.MenuItem
+              className="flex items-center gap-2"
+              onClick={() => {
+                linkOperations.remove(linkDetail.id);
+              }}
+            >
+              <DeleteOutline className="h-3 w-3" />
+              {t("common.actions.delete")}
+            </CustomMenu.MenuItem>
+          </CustomMenu>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/links/link-list.tsx b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
new file mode 100644
index 0000000..937f7e3
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/links/link-list.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import type { TIssueServiceType } from "@plane/types";
+// computed
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { IssueLinkItem } from "./link-item";
+import type { TLinkOperations } from "./root";
+
+type TLinkOperationsModal = Exclude<TLinkOperations, "create">;
+
+type TLinkList = {
+  issueId: string;
+  linkOperations: TLinkOperationsModal;
+  disabled?: boolean;
+  issueServiceType: TIssueServiceType;
+};
+
+export const LinkList = observer(function LinkList(props: TLinkList) {
+  // props
+  const { issueId, linkOperations, disabled = false, issueServiceType } = props;
+  // hooks
+  const {
+    link: { getLinksByIssueId },
+  } = useIssueDetail(issueServiceType);
+
+  const issueLinks = getLinksByIssueId(issueId);
+
+  if (!issueLinks) return null;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {issueLinks.map((linkId) => (
+        <IssueLinkItem
+          key={linkId}
+          linkId={linkId}
+          linkOperations={linkOperations}
+          isNotAllowed={disabled}
+          issueServiceType={issueServiceType}
+        />
+      ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/links/links.tsx b/apps/web/core/components/issues/issue-detail/links/links.tsx
new file mode 100644
index 0000000..524c344
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/links/links.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// computed
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { IssueLinkDetail } from "./link-detail";
+// hooks
+import type { TLinkOperations } from "./root";
+
+export type TLinkOperationsModal = Exclude<TLinkOperations, "create">;
+
+export type TIssueLinkList = {
+  issueId: string;
+  linkOperations: TLinkOperationsModal;
+  disabled?: boolean;
+};
+
+export const IssueLinkList = observer(function IssueLinkList(props: TIssueLinkList) {
+  // props
+  const { issueId, linkOperations, disabled = false } = props;
+  // hooks
+  const {
+    link: { getLinksByIssueId },
+  } = useIssueDetail();
+
+  const issueLinks = getLinksByIssueId(issueId);
+
+  if (!issueLinks) return <></>;
+
+  return (
+    <div className="space-y-2">
+      {issueLinks &&
+        issueLinks.length > 0 &&
+        issueLinks.map((linkId) => (
+          <IssueLinkDetail key={linkId} linkId={linkId} linkOperations={linkOperations} isNotAllowed={disabled} />
+        ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/links/root.tsx b/apps/web/core/components/issues/issue-detail/links/root.tsx
new file mode 100644
index 0000000..038353a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/links/root.tsx
@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo, useState } from "react";
+
+import { AddOutline } from "@makeplane/propel/icons";
+// plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssueLink } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// local imports
+import { IssueLinkCreateUpdateModal } from "./create-update-link-modal";
+import { IssueLinkList } from "./links";
+
+export type TLinkOperations = {
+  create: (data: Partial<TIssueLink>) => Promise<void>;
+  update: (linkId: string, data: Partial<TIssueLink>) => Promise<void>;
+  remove: (linkId: string) => Promise<void>;
+};
+
+export type TIssueLinkRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled?: boolean;
+};
+
+export function IssueLinkRoot(props: TIssueLinkRoot) {
+  // props
+  const { workspaceSlug, projectId, issueId, disabled = false } = props;
+  // hooks
+  const { toggleIssueLinkModal: toggleIssueLinkModalStore, createLink, updateLink, removeLink } = useIssueDetail();
+  // state
+  const [isIssueLinkModal, setIsIssueLinkModal] = useState(false);
+  const toggleIssueLinkModal = useCallback(
+    (modalToggle: boolean) => {
+      toggleIssueLinkModalStore(modalToggle);
+      setIsIssueLinkModal(modalToggle);
+    },
+    [toggleIssueLinkModalStore]
+  );
+
+  const handleLinkOperations: TLinkOperations = useMemo(
+    () => ({
+      create: async (data: Partial<TIssueLink>) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+          await createLink(workspaceSlug, projectId, issueId, data);
+          setToast({
+            message: "The link has been successfully created",
+            type: TOAST_TYPE.SUCCESS,
+            title: "Link created",
+          });
+          toggleIssueLinkModal(false);
+        } catch (error: any) {
+          setToast({
+            message: error?.data?.error ?? "The link could not be created",
+            type: TOAST_TYPE.ERROR,
+            title: "Link not created",
+          });
+          throw error;
+        }
+      },
+      update: async (linkId: string, data: Partial<TIssueLink>) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+          await updateLink(workspaceSlug, projectId, issueId, linkId, data);
+          setToast({
+            message: "The link has been successfully updated",
+            type: TOAST_TYPE.SUCCESS,
+            title: "Link updated",
+          });
+          toggleIssueLinkModal(false);
+        } catch (error) {
+          setToast({
+            message: "The link could not be updated",
+            type: TOAST_TYPE.ERROR,
+            title: "Link not updated",
+          });
+          throw error;
+        }
+      },
+      remove: async (linkId: string) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
+          await removeLink(workspaceSlug, projectId, issueId, linkId);
+          setToast({
+            message: "The link has been successfully removed",
+            type: TOAST_TYPE.SUCCESS,
+            title: "Link removed",
+          });
+          toggleIssueLinkModal(false);
+        } catch {
+          setToast({
+            message: "The link could not be removed",
+            type: TOAST_TYPE.ERROR,
+            title: "Link not removed",
+          });
+        }
+      },
+    }),
+    [workspaceSlug, projectId, issueId, createLink, updateLink, removeLink, toggleIssueLinkModal]
+  );
+
+  const handleOnClose = () => {
+    toggleIssueLinkModal(false);
+  };
+
+  return (
+    <>
+      <IssueLinkCreateUpdateModal
+        isModalOpen={isIssueLinkModal}
+        handleOnClose={handleOnClose}
+        linkOperations={handleLinkOperations}
+        issueServiceType={EIssueServiceType.ISSUES}
+      />
+
+      <div className="py-1 text-11">
+        <div className="flex items-center justify-between gap-2">
+          <h4>Links</h4>
+          {!disabled && (
+            <button
+              type="button"
+              className={`grid h-7 w-7 place-items-center rounded-sm p-1 duration-300 outline-none hover:bg-surface-2 ${
+                disabled ? "cursor-not-allowed" : "cursor-pointer"
+              }`}
+              onClick={() => toggleIssueLinkModal(true)}
+              disabled={disabled}
+            >
+              <AddOutline className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+
+        <div>
+          <IssueLinkList issueId={issueId} linkOperations={handleLinkOperations} disabled={disabled} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-detail/main-content.tsx b/apps/web/core/components/issues/issue-detail/main-content.tsx
new file mode 100644
index 0000000..ac47acf
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/main-content.tsx
@@ -0,0 +1,186 @@
+// oxlint-disable no-shadow
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import type { TNameDescriptionLoader } from "@plane/types";
+import { EFileAssetType, EIssueServiceType } from "@plane/types";
+// components
+import { DescriptionVersionsRoot } from "@/components/core/description-versions";
+import { DescriptionInput } from "@/components/editor/rich-text/description-input";
+import { IssueTypeSwitcher } from "@/components/issues/issue-type-switcher";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
+import useSize from "@/hooks/use-window-size";
+// services
+import { WorkItemVersionService } from "@/services/issue";
+// local imports
+import { IssueDetailWidgets } from "../issue-detail-widgets";
+import { NameDescriptionUpdateStatus } from "../issue-update-status";
+import { PeekOverviewProperties } from "../peek-overview/properties";
+import { IssueTitleInput } from "../title-input";
+import { IssueActivity } from "./issue-activity";
+import { IssueParentDetail } from "./parent";
+import { IssueReaction } from "./reactions";
+import type { TIssueOperations } from "./root";
+// services init
+const workItemVersionService = new WorkItemVersionService();
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issueOperations: TIssueOperations;
+  isEditable: boolean;
+  isArchived: boolean;
+};
+
+export const IssueMainContent = observer(function IssueMainContent(props: Props) {
+  const { workspaceSlug, projectId, issueId, issueOperations, isEditable, isArchived } = props;
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // states
+  const [isSubmitting, setIsSubmitting] = useState<TNameDescriptionLoader>("saved");
+  // hooks
+  const windowSize = useSize();
+  const { data: currentUser } = useUser();
+  const { getUserDetails } = useMember();
+  const {
+    issue: { getIssueById },
+    peekIssue,
+  } = useIssueDetail();
+  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
+  // derived values
+  const issue = issueId ? getIssueById(issueId) : undefined;
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      timer = setTimeout(() => setIsSubmitting("saved"), 2000);
+    } else if (isSubmitting === "submitting") setShowAlert(true);
+    return () => clearTimeout(timer);
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
+
+  if (!issue || !issue.project_id) return <></>;
+
+  const isPeekModeActive = Boolean(peekIssue);
+
+  return (
+    <>
+      <div className="space-y-4 rounded-lg">
+        {issue.parent_id && (
+          <IssueParentDetail
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            issueId={issueId}
+            issue={issue}
+            issueOperations={issueOperations}
+          />
+        )}
+
+        <div className="mb-2.5 flex items-center justify-between gap-4">
+          <IssueTypeSwitcher issueId={issueId} disabled={isArchived || !isEditable} />
+          <div className="flex items-center gap-3">
+            <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
+          </div>
+        </div>
+
+        <IssueTitleInput
+          workspaceSlug={workspaceSlug}
+          projectId={issue.project_id}
+          issueId={issue.id}
+          isSubmitting={isSubmitting}
+          setIsSubmitting={(value) => setIsSubmitting(value)}
+          issueOperations={issueOperations}
+          disabled={isArchived || !isEditable}
+          value={issue.name}
+        />
+
+        <DescriptionInput
+          issueSequenceId={issue.sequence_id}
+          containerClassName="-ml-6 border-none p-0! pl-6!"
+          disabled={isArchived || !isEditable}
+          editorRef={editorRef}
+          entityId={issue.id}
+          fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
+          initialValue={issue.description_html}
+          key={issue.id}
+          onSubmit={async (value, isMigrationUpdate) => {
+            if (!issue.id || !issue.project_id) return;
+            await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
+              description_html: value.description_html,
+              ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
+            });
+          }}
+          projectId={issue.project_id}
+          setIsSubmitting={(value) => setIsSubmitting(value)}
+          workspaceSlug={workspaceSlug}
+        />
+
+        <div className="flex items-center justify-between gap-2">
+          {currentUser && (
+            <IssueReaction
+              className="flex-shrink-0"
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={issueId}
+              currentUser={currentUser}
+              disabled={isArchived}
+            />
+          )}
+          {isEditable && (
+            <DescriptionVersionsRoot
+              className="flex-shrink-0"
+              entityInformation={{
+                createdAt: issue.created_at ? new Date(issue.created_at) : new Date(),
+                createdByDisplayName: getUserDetails(issue.created_by ?? "")?.display_name ?? "",
+                id: issueId,
+                isRestoreDisabled: !isEditable || isArchived,
+              }}
+              fetchHandlers={{
+                listDescriptionVersions: (issueId) =>
+                  workItemVersionService.listDescriptionVersions(workspaceSlug, projectId, issueId),
+                retrieveDescriptionVersion: (issueId, versionId) =>
+                  workItemVersionService.retrieveDescriptionVersion(workspaceSlug, projectId, issueId, versionId),
+              }}
+              handleRestore={(descriptionHTML) => editorRef.current?.setEditorValue(descriptionHTML, true)}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+            />
+          )}
+        </div>
+      </div>
+
+      <IssueDetailWidgets
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        issueId={issueId}
+        disabled={!isEditable || isArchived}
+        renderWidgetModals={!isPeekModeActive}
+        issueServiceType={EIssueServiceType.ISSUES}
+      />
+
+      {windowSize[0] < 768 && (
+        <PeekOverviewProperties
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          issueId={issueId}
+          issueOperations={issueOperations}
+          disabled={!isEditable || isArchived}
+        />
+      )}
+
+      <IssueActivity workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={isArchived} />
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/module-select.tsx b/apps/web/core/components/issues/issue-detail/module-select.tsx
new file mode 100644
index 0000000..f0b6b2a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/module-select.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { xor } from "lodash-es";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// hooks
+// components
+import { cn } from "@plane/utils";
+import { ModuleDropdown } from "@/components/dropdowns/module/dropdown";
+// ui
+// helpers
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// types
+import type { TIssueOperations } from "./root";
+
+type TIssueModuleSelect = {
+  className?: string;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issueOperations: TIssueOperations;
+  disabled?: boolean;
+};
+
+export const IssueModuleSelect = observer(function IssueModuleSelect(props: TIssueModuleSelect) {
+  const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+  const { t } = useTranslation();
+  // states
+  const [isUpdating, setIsUpdating] = useState(false);
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // derived values
+  const issue = getIssueById(issueId);
+  const disableSelect = disabled || isUpdating;
+
+  const handleIssueModuleChange = async (moduleIds: string[]) => {
+    if (!issue || !issue.module_ids) return;
+
+    setIsUpdating(true);
+    const updatedModuleIds = xor(issue.module_ids, moduleIds);
+    const modulesToAdd: string[] = [];
+    const modulesToRemove: string[] = [];
+
+    for (const moduleId of updatedModuleIds) {
+      if (issue.module_ids.includes(moduleId)) {
+        modulesToRemove.push(moduleId);
+      } else {
+        modulesToAdd.push(moduleId);
+      }
+    }
+
+    await issueOperations.changeModulesInIssue?.(workspaceSlug, projectId, issueId, modulesToAdd, modulesToRemove);
+
+    setIsUpdating(false);
+  };
+
+  return (
+    <div className={cn(`flex h-full items-center gap-1`, className)}>
+      <ModuleDropdown
+        projectId={projectId}
+        value={issue?.module_ids ?? []}
+        onChange={handleIssueModuleChange}
+        placeholder={t("module.no_module")}
+        disabled={disableSelect}
+        className="group h-full w-full"
+        buttonContainerClassName="w-full text-left rounded-sm"
+        buttonClassName={`text-body-xs-medium justify-between ${issue?.module_ids?.length ? "" : "text-placeholder"}`}
+        buttonVariant="transparent-with-text"
+        hideIcon
+        dropdownArrow
+        dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+        multiple
+        itemClassName="px-2"
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/parent-select.tsx b/apps/web/core/components/issues/issue-detail/parent-select.tsx
new file mode 100644
index 0000000..073f7c6
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/parent-select.tsx
@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline, EditOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// local imports
+import { ParentIssuesListModal } from "../parent-issues-list-modal";
+
+type TIssueParentSelect = {
+  className?: string;
+  disabled?: boolean;
+  issueId: string;
+  projectId: string;
+  workspaceSlug: string;
+  handleParentIssue: (_issueId?: string | null) => Promise<void>;
+  handleRemoveSubIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueId: string
+  ) => Promise<void>;
+  workItemLink: string;
+};
+
+export const IssueParentSelect = observer(function IssueParentSelect(props: TIssueParentSelect) {
+  const {
+    className = "",
+    disabled = false,
+    issueId,
+    projectId,
+    workspaceSlug,
+    handleParentIssue,
+    handleRemoveSubIssue,
+    workItemLink,
+  } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const { getProjectById } = useProject();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
+
+  // derived values
+  const issue = getIssueById(issueId);
+  const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
+  const parentIssueProjectDetails =
+    parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
+  const { isMobile } = usePlatformOS();
+
+  if (!issue) return <></>;
+
+  return (
+    <>
+      <ParentIssuesListModal
+        projectId={projectId}
+        issueId={issueId}
+        isOpen={isParentIssueModalOpen === issueId}
+        handleClose={() => toggleParentIssueModal(null)}
+        onChange={(issue: any) => handleParentIssue(issue?.id)}
+      />
+      <button
+        type="button"
+        className={cn(
+          "group flex items-center justify-between gap-2 rounded-sm px-2 py-0.5 outline-none",
+          {
+            "cursor-not-allowed": disabled,
+            "hover:bg-layer-transparent-hover": !disabled,
+            "bg-layer-transparent-selected": isParentIssueModalOpen,
+          },
+          className
+        )}
+        onClick={() => toggleParentIssueModal(issue.id)}
+        disabled={disabled}
+      >
+        {issue.parent_id && parentIssue ? (
+          <div className="flex items-center gap-1.5">
+            <Tooltip label={`Title: ${parentIssue.name}`} layout="stacked" disabled={isMobile}>
+              <Link href={workItemLink} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
+                {parentIssue?.project_id && parentIssueProjectDetails && (
+                  <IssueIdentifier
+                    projectId={parentIssue.project_id}
+                    issueTypeId={parentIssue.type_id}
+                    projectIdentifier={parentIssueProjectDetails?.identifier}
+                    issueSequenceId={parentIssue.sequence_id}
+                    size="xs"
+                    variant="secondary"
+                  />
+                )}
+              </Link>
+            </Tooltip>
+
+            {!disabled && (
+              <Tooltip label={t("common.remove")} side="bottom" disabled={isMobile}>
+                <span
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRemoveSubIssue(workspaceSlug, projectId, parentIssue.id, issueId);
+                  }}
+                >
+                  <CloseOutline className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
+                </span>
+              </Tooltip>
+            )}
+          </div>
+        ) : (
+          <span className="text-body-xs-medium text-placeholder">{t("issue.add.parent")}</span>
+        )}
+        {!disabled && (
+          <span
+            className={cn("flex-shrink-0 p-1 opacity-0 group-hover:opacity-100", {
+              "text-placeholder": !issue.parent_id && !parentIssue,
+            })}
+          >
+            <EditOutline className="h-2.5 w-2.5 flex-shrink-0" />
+          </span>
+        )}
+      </button>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/parent/index.ts b/apps/web/core/components/issues/issue-detail/parent/index.ts
new file mode 100644
index 0000000..38f9dc2
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/parent/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+
+export * from "./siblings";
+export * from "./sibling-item";
diff --git a/apps/web/core/components/issues/issue-detail/parent/root.tsx b/apps/web/core/components/issues/issue-detail/parent/root.tsx
new file mode 100644
index 0000000..1de73eb
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/parent/root.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+import { MinusCircle } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import type { TIssue } from "@plane/types";
+// component
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// ui
+import { ControlLink, CustomMenu } from "@plane/ui";
+// helpers
+import { generateWorkItemLink } from "@plane/utils";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+import type { TIssueOperations } from "../root";
+import { IssueParentSiblings } from "./siblings";
+
+export type TIssueParentDetail = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issue: TIssue;
+  issueOperations: TIssueOperations;
+};
+
+export const IssueParentDetail = observer(function IssueParentDetail(props: TIssueParentDetail) {
+  const { workspaceSlug, projectId, issueId, issue, issueOperations } = props;
+  // router
+  const router = useRouter();
+  const { t } = useTranslation();
+  // hooks
+  const { issueMap } = useIssues();
+  const { getProjectStates } = useProjectState();
+  const { handleRedirection } = useIssuePeekOverviewRedirection();
+  const { isMobile } = usePlatformOS();
+  const { getProjectIdentifierById } = useProject();
+
+  // derived values
+  const parentIssue = issueMap?.[issue.parent_id || ""] || undefined;
+  const isParentEpic = parentIssue?.is_epic;
+  const projectIdentifier = getProjectIdentifierById(parentIssue?.project_id);
+
+  const issueParentState = getProjectStates(parentIssue?.project_id)?.find(
+    (state) => state?.id === parentIssue?.state_id
+  );
+  const stateColor = issueParentState?.color || undefined;
+
+  if (!parentIssue) return <></>;
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: parentIssue?.project_id,
+    issueId: parentIssue.id,
+    projectIdentifier,
+    sequenceId: parentIssue.sequence_id,
+    isEpic: isParentEpic,
+  });
+
+  const handleParentIssueClick = () => {
+    if (isParentEpic) router.push(workItemLink);
+    else handleRedirection(workspaceSlug, parentIssue, isMobile);
+  };
+
+  return (
+    <>
+      <div className="mb-5 flex w-min items-center gap-3 rounded-md border border-strong bg-layer-1 px-2.5 py-1 text-11 whitespace-nowrap">
+        <ControlLink href={workItemLink} onClick={handleParentIssueClick}>
+          <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2.5">
+              <span className="block h-2 w-2 rounded-full" style={{ backgroundColor: stateColor }} />
+              {parentIssue.project_id && (
+                <IssueIdentifier
+                  projectId={parentIssue.project_id}
+                  issueId={parentIssue.id}
+                  size="xs"
+                  variant="secondary"
+                />
+              )}
+            </div>
+            <span className="truncate text-primary">{(parentIssue?.name ?? "").substring(0, 50)}</span>
+          </div>
+        </ControlLink>
+
+        <CustomMenu ellipsis optionsClassName="p-1.5">
+          <div className="border-b border-strong text-11 font-medium text-secondary">{t("issue.sibling.label")}</div>
+
+          <IssueParentSiblings workspaceSlug={workspaceSlug} currentIssue={issue} parentIssue={parentIssue} />
+
+          <CustomMenu.MenuItem
+            onClick={() => issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null })}
+            className="flex items-center gap-2 py-2 text-danger-primary"
+          >
+            <MinusCircle className="h-4 w-4" />
+            <span>{t("issue.remove.parent.label")}</span>
+          </CustomMenu.MenuItem>
+        </CustomMenu>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx b/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
new file mode 100644
index 0000000..4b9b6a1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// ui
+import { CustomMenu } from "@plane/ui";
+// helpers
+import { generateWorkItemLink } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+
+type TIssueParentSiblingItem = {
+  workspaceSlug: string;
+  issueId: string;
+};
+
+export const IssueParentSiblingItem = observer(function IssueParentSiblingItem(props: TIssueParentSiblingItem) {
+  const { workspaceSlug, issueId } = props;
+  // hooks
+  const { getProjectById } = useProject();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+
+  // derived values
+  const issueDetail = (issueId && getIssueById(issueId)) || undefined;
+  if (!issueDetail) return <></>;
+
+  const projectDetails = (issueDetail.project_id && getProjectById(issueDetail.project_id)) || undefined;
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issueDetail?.project_id,
+    issueId: issueDetail?.id,
+    projectIdentifier: projectDetails?.identifier,
+    sequenceId: issueDetail?.sequence_id,
+  });
+
+  return (
+    <>
+      <CustomMenu.MenuItem
+        key={issueDetail.id}
+        onClick={() => window.open(workItemLink, "_blank", "noopener,noreferrer")}
+      >
+        <div className="flex items-center gap-2 py-0.5">
+          {issueDetail.project_id && projectDetails?.identifier && (
+            <IssueIdentifier
+              projectId={issueDetail.project_id}
+              issueTypeId={issueDetail.type_id}
+              projectIdentifier={projectDetails?.identifier}
+              issueSequenceId={issueDetail.sequence_id}
+              size="xs"
+            />
+          )}
+        </div>
+      </CustomMenu.MenuItem>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/parent/siblings.tsx b/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
new file mode 100644
index 0000000..7254feb
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import type { TIssue } from "@plane/types";
+// components
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// types
+import { IssueParentSiblingItem } from "./sibling-item";
+
+export type TIssueParentSiblings = {
+  workspaceSlug: string;
+  currentIssue: TIssue;
+  parentIssue: TIssue;
+};
+
+export const IssueParentSiblings = observer(function IssueParentSiblings(props: TIssueParentSiblings) {
+  const { workspaceSlug, currentIssue, parentIssue } = props;
+  // hooks
+  const {
+    fetchSubIssues,
+    subIssues: { subIssuesByIssueId },
+  } = useIssueDetail();
+
+  const { isLoading } = useSWR(
+    parentIssue && parentIssue.project_id
+      ? `ISSUE_PARENT_CHILD_ISSUES_${workspaceSlug}_${parentIssue.project_id}_${parentIssue.id}`
+      : null,
+    parentIssue && parentIssue.project_id
+      ? () => fetchSubIssues(workspaceSlug, parentIssue.project_id!, parentIssue.id)
+      : null
+  );
+
+  const subIssueIds = (parentIssue && subIssuesByIssueId(parentIssue.id)) || undefined;
+
+  return (
+    <div className="my-1">
+      {isLoading ? (
+        <div className="flex items-center gap-2 px-1 py-1 text-left text-11 whitespace-nowrap text-secondary">
+          Loading
+        </div>
+      ) : subIssueIds && subIssueIds.length > 0 ? (
+        subIssueIds.map(
+          (issueId) =>
+            currentIssue.id != issueId && (
+              <IssueParentSiblingItem key={issueId} workspaceSlug={workspaceSlug} issueId={issueId} />
+            )
+        )
+      ) : (
+        <div className="flex items-center gap-2 px-1 py-1 text-left text-11 whitespace-nowrap text-secondary">
+          No sibling work items
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/reactions/index.ts b/apps/web/core/components/issues/issue-detail/reactions/index.ts
new file mode 100644
index 0000000..5355187
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/reactions/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./issue";
+export * from "./issue-comment";
diff --git a/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx b/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
new file mode 100644
index 0000000..2ece8b9
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/reactions/issue-comment.tsx
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
+import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+
+export type TIssueCommentReaction = {
+  workspaceSlug: string;
+  projectId: string;
+  commentId: string;
+  currentUser: IUser;
+  disabled?: boolean;
+};
+
+export const IssueCommentReaction = observer(function IssueCommentReaction(props: TIssueCommentReaction) {
+  const { workspaceSlug, projectId, commentId, currentUser, disabled = false } = props;
+  // state
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  // hooks
+  const {
+    commentReaction: { getCommentReactionsByCommentId, commentReactionsByUser, getCommentReactionById },
+    createCommentReaction,
+    removeCommentReaction,
+  } = useIssueDetail();
+  const { getUserDetails } = useMember();
+
+  const reactionIds = getCommentReactionsByCommentId(commentId);
+  const userReactions = commentReactionsByUser(commentId, currentUser.id).map((r) => r.reaction);
+
+  const issueCommentReactionOperations = useMemo(
+    () => ({
+      create: async (reaction: string) => {
+        try {
+          if (!workspaceSlug || !projectId || !commentId) throw new Error("Missing fields");
+          await createCommentReaction(workspaceSlug, projectId, commentId, reaction);
+          setToast({
+            title: "Success!",
+            type: TOAST_TYPE.SUCCESS,
+            message: "Reaction created successfully",
+          });
+        } catch (_error) {
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: "Reaction creation failed",
+          });
+        }
+      },
+      remove: async (reaction: string) => {
+        try {
+          if (!workspaceSlug || !projectId || !commentId || !currentUser?.id) throw new Error("Missing fields");
+          removeCommentReaction(workspaceSlug, projectId, commentId, reaction, currentUser.id);
+          setToast({
+            title: "Success!",
+            type: TOAST_TYPE.SUCCESS,
+            message: "Reaction removed successfully",
+          });
+        } catch (_error) {
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: "Reaction remove failed",
+          });
+        }
+      },
+      react: async (reaction: string) => {
+        if (userReactions.includes(reaction)) await issueCommentReactionOperations.remove(reaction);
+        else await issueCommentReactionOperations.create(reaction);
+      },
+    }),
+    [workspaceSlug, projectId, commentId, currentUser, createCommentReaction, removeCommentReaction, userReactions]
+  );
+
+  const getReactionUsers = (reaction: string): string[] => {
+    const reactionUsers = (reactionIds?.[reaction] || [])
+      .map((reactionId) => {
+        const reactionDetails = getCommentReactionById(reactionId);
+        return reactionDetails
+          ? getUserDetails(reactionDetails?.actor)?.display_name || reactionDetails?.display_name
+          : null;
+      })
+      .filter((displayName): displayName is string => !!displayName);
+    return reactionUsers;
+  };
+
+  // Transform reactions data to Propel EmojiReactionType format
+  const reactions: EmojiReactionType[] = useMemo(() => {
+    if (!reactionIds) return [];
+
+    return Object.keys(reactionIds)
+      .filter((reaction) => reactionIds[reaction]?.length > 0)
+      .map((reaction) => ({
+        emoji: stringToEmoji(reaction),
+        count: reactionIds[reaction].length,
+        reacted: userReactions.includes(reaction),
+        users: getReactionUsers(reaction),
+      }));
+  }, [reactionIds, userReactions]);
+
+  const handleReactionClick = (emoji: string) => {
+    if (disabled) return;
+    // Convert emoji back to decimal string format for the API
+    const emojiCodePoints = Array.from(emoji).map((char) => char.codePointAt(0));
+    const reactionString = emojiCodePoints.join("-");
+    issueCommentReactionOperations.react(reactionString);
+  };
+
+  const handleEmojiSelect = (emoji: string) => {
+    // emoji is already in decimal string format from EmojiReactionPicker
+    issueCommentReactionOperations.react(emoji);
+  };
+
+  return (
+    <div className="relative mt-4">
+      <EmojiReactionPicker
+        isOpen={isPickerOpen}
+        handleToggle={setIsPickerOpen}
+        onChange={handleEmojiSelect}
+        disabled={disabled}
+        label={
+          <EmojiReactionGroup
+            reactions={reactions}
+            onReactionClick={handleReactionClick}
+            showAddButton={!disabled}
+            onAddReaction={() => setIsPickerOpen(true)}
+          />
+        }
+        placement="bottom-start"
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/reactions/issue.tsx b/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
new file mode 100644
index 0000000..ac1f944
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
@@ -0,0 +1,149 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
+import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-reaction";
+import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser } from "@plane/types";
+// hooks
+// ui
+import { cn } from "@plane/utils";
+// helpers
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+// types
+
+export type TIssueReaction = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  currentUser: IUser;
+  disabled?: boolean;
+  className?: string;
+};
+
+export const IssueReaction = observer(function IssueReaction(props: TIssueReaction) {
+  const { workspaceSlug, projectId, issueId, currentUser, disabled = false, className = "" } = props;
+  // state
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  // hooks
+  const {
+    reaction: { getReactionsByIssueId, reactionsByUser, getReactionById },
+    createReaction,
+    removeReaction,
+  } = useIssueDetail();
+  const { getUserDetails } = useMember();
+
+  const reactionIds = getReactionsByIssueId(issueId);
+  const userReactions = reactionsByUser(issueId, currentUser.id).map((r) => r.reaction);
+
+  const issueReactionOperations = useMemo(
+    () => ({
+      create: async (reaction: string) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
+          await createReaction(workspaceSlug, projectId, issueId, reaction);
+          setToast({
+            title: "Success!",
+            type: TOAST_TYPE.SUCCESS,
+            message: "Reaction created successfully",
+          });
+        } catch (_error) {
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: "Reaction creation failed",
+          });
+        }
+      },
+      remove: async (reaction: string) => {
+        try {
+          if (!workspaceSlug || !projectId || !issueId || !currentUser?.id) throw new Error("Missing fields");
+          await removeReaction(workspaceSlug, projectId, issueId, reaction, currentUser.id);
+          setToast({
+            title: "Success!",
+            type: TOAST_TYPE.SUCCESS,
+            message: "Reaction removed successfully",
+          });
+        } catch (_error) {
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: "Reaction remove failed",
+          });
+        }
+      },
+      react: async (reaction: string) => {
+        if (userReactions.includes(reaction)) await issueReactionOperations.remove(reaction);
+        else await issueReactionOperations.create(reaction);
+      },
+    }),
+    [workspaceSlug, projectId, issueId, currentUser, createReaction, removeReaction, userReactions]
+  );
+
+  const getReactionUsers = (reaction: string): string[] => {
+    const reactionUsers = (reactionIds?.[reaction] || [])
+      .map((reactionId) => {
+        const reactionDetails = getReactionById(reactionId);
+        return reactionDetails
+          ? getUserDetails(reactionDetails?.actor)?.display_name || reactionDetails?.display_name
+          : null;
+      })
+      .filter((displayName): displayName is string => !!displayName);
+
+    return reactionUsers;
+  };
+
+  // Transform reactions data to Propel EmojiReactionType format
+  const reactions: EmojiReactionType[] = useMemo(() => {
+    if (!reactionIds) return [];
+
+    return Object.keys(reactionIds)
+      .filter((reaction) => reactionIds[reaction]?.length > 0)
+      .map((reaction) => ({
+        emoji: stringToEmoji(reaction),
+        count: reactionIds[reaction].length,
+        reacted: userReactions.includes(reaction),
+        users: getReactionUsers(reaction),
+      }));
+  }, [reactionIds, userReactions]);
+
+  const handleReactionClick = (emoji: string) => {
+    if (disabled) return;
+    // Convert emoji back to decimal string format for the API
+    const emojiCodePoints = Array.from(emoji).map((char) => char.codePointAt(0));
+    const reactionString = emojiCodePoints.join("-");
+    issueReactionOperations.react(reactionString);
+  };
+
+  const handleEmojiSelect = (emoji: string) => {
+    // emoji is already in decimal string format from EmojiReactionPicker
+    issueReactionOperations.react(emoji);
+  };
+
+  return (
+    <div className={cn("relative mt-4", className)}>
+      <EmojiReactionPicker
+        isOpen={isPickerOpen}
+        handleToggle={setIsPickerOpen}
+        onChange={handleEmojiSelect}
+        disabled={disabled}
+        label={
+          <EmojiReactionGroup
+            reactions={reactions}
+            onReactionClick={handleReactionClick}
+            showAddButton={!disabled}
+            onAddReaction={() => setIsPickerOpen(true)}
+          />
+        }
+        placement="bottom-start"
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/relation-select.tsx b/apps/web/core/components/issues/issue-detail/relation-select.tsx
new file mode 100644
index 0000000..da0d59b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/relation-select.tsx
@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+
+import { CloseOutline, EditOutline } from "@makeplane/propel/icons";
+// Plane
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { ISearchIssueResponse } from "@plane/types";
+import { cn, generateWorkItemLink } from "@plane/utils";
+// components
+import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// Plane web imports
+import { useTimeLineRelationOptions } from "@/components/relations";
+import type { TIssueRelationTypes } from "@plane/types";
+import type { TRelationObject } from "../issue-detail-widgets/relations";
+
+type TIssueRelationSelect = {
+  className?: string;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  relationKey: TIssueRelationTypes;
+  disabled?: boolean;
+};
+
+export const IssueRelationSelect = observer(function IssueRelationSelect(props: TIssueRelationSelect) {
+  const { className = "", workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
+  // hooks
+  const { getProjectById } = useProject();
+  const {
+    createRelation,
+    removeRelation,
+    relation: { getRelationByIssueIdRelationType },
+    isRelationModalOpen,
+    toggleRelationModal,
+  } = useIssueDetail();
+  const { issueMap } = useIssues();
+  const { isMobile } = usePlatformOS();
+  const relationIssueIds = getRelationByIssueIdRelationType(issueId, relationKey);
+  const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
+
+  const onSubmit = async (data: ISearchIssueResponse[]) => {
+    if (data.length === 0) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Please select at least one work item.",
+      });
+      return;
+    }
+
+    await createRelation(
+      workspaceSlug,
+      projectId,
+      issueId,
+      relationKey,
+      data.map((i) => i.id)
+    );
+
+    toggleRelationModal(null, null);
+  };
+
+  if (!relationIssueIds) return null;
+
+  const isRelationKeyModalActive =
+    isRelationModalOpen?.relationType === relationKey && isRelationModalOpen?.issueId === issueId;
+
+  const currRelationOption: TRelationObject | undefined = ISSUE_RELATION_OPTIONS[relationKey];
+
+  return (
+    <>
+      <ExistingIssuesListModal
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        isOpen={isRelationKeyModalActive}
+        handleClose={() => toggleRelationModal(null, null)}
+        searchParams={{ issue_relation: true, issue_id: issueId }}
+        handleOnSubmit={onSubmit}
+        workspaceLevelToggle
+      />
+
+      <button
+        type="button"
+        className={cn(
+          "group flex items-center gap-2 rounded-sm px-2 py-0.5 outline-none",
+          {
+            "cursor-not-allowed": disabled,
+            "hover:bg-layer-1": !disabled,
+            "bg-layer-1": isRelationKeyModalActive,
+          },
+          className
+        )}
+        onClick={() => toggleRelationModal(issueId, relationKey)}
+        disabled={disabled}
+      >
+        <div className="flex w-full items-start justify-between">
+          {relationIssueIds.length > 0 ? (
+            <div className="flex flex-wrap items-center gap-2 py-0.5">
+              {relationIssueIds.map((relationIssueId) => {
+                const currentIssue = issueMap[relationIssueId];
+                if (!currentIssue) return;
+
+                const projectDetails = getProjectById(currentIssue.project_id);
+
+                return (
+                  <div
+                    key={relationIssueId}
+                    className={`group flex items-center gap-1 rounded-sm px-1.5 pt-1 pb-1 leading-3 hover:bg-surface-2 ${currRelationOption?.className}`}
+                  >
+                    <Tooltip label={`Title: ${currentIssue.name}`} layout="stacked" disabled={isMobile}>
+                      <Link
+                        href={generateWorkItemLink({
+                          workspaceSlug,
+                          projectId: projectDetails?.id,
+                          issueId: currentIssue.id,
+                          projectIdentifier: projectDetails?.identifier,
+                          sequenceId: currentIssue?.sequence_id,
+                        })}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-caption-sm-medium"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
+                      </Link>
+                    </Tooltip>
+                    {!disabled && (
+                      <Tooltip label="Remove" side="bottom" disabled={isMobile}>
+                        {/* eslint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+                        <span
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
+                          }}
+                        >
+                          <CloseOutline className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
+                        </span>
+                      </Tooltip>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <span className="text-body-xs-regular text-placeholder">{currRelationOption?.placeholder}</span>
+          )}
+          {!disabled && (
+            <span
+              className={cn("flex-shrink-0 p-1 opacity-0 group-hover:opacity-100", {
+                "text-placeholder": relationIssueIds.length === 0,
+              })}
+            >
+              <EditOutline className="h-2.5 w-2.5 flex-shrink-0" />
+            </span>
+          )}
+        </div>
+      </button>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/root.tsx b/apps/web/core/components/issues/issue-detail/root.tsx
new file mode 100644
index 0000000..72484c6
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/root.tsx
@@ -0,0 +1,271 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import type { TIssue } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+// assets
+import emptyIssue from "@/app/assets/empty-state/issue.svg?url";
+// components
+import { EmptyState } from "@/components/common/empty-state";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// local components
+import { IssuePeekOverview } from "../peek-overview";
+import { IssueMainContent } from "./main-content";
+import { IssueDetailsSidebar } from "./sidebar";
+
+export type TIssueOperations = {
+  fetch: (workspaceSlug: string, projectId: string, issueId: string, loader?: boolean) => Promise<void>;
+  update: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  archive?: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  restore?: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  addCycleToIssue?: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
+  addIssueToCycle?: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
+  removeIssueFromCycle?: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
+  removeIssueFromModule?: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    issueId: string
+  ) => Promise<void>;
+  changeModulesInIssue?: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    addModuleIds: string[],
+    removeModuleIds: string[]
+  ) => Promise<void>;
+};
+
+export type TIssueDetailRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  is_archived?: boolean;
+};
+
+export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDetailRoot) {
+  const { t } = useTranslation();
+  const { workspaceSlug, projectId, issueId, is_archived = false } = props;
+  // router
+  const router = useAppRouter();
+  // hooks
+  const {
+    issue: { getIssueById },
+    fetchIssue,
+    updateIssue,
+    removeIssue,
+    archiveIssue,
+    addCycleToIssue,
+    addIssueToCycle,
+    removeIssueFromCycle,
+    changeModulesInIssue,
+    removeIssueFromModule,
+  } = useIssueDetail();
+  const {
+    issues: { removeIssue: removeArchivedIssue },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+  const { allowPermissions } = useUserPermissions();
+  const { issueDetailSidebarCollapsed } = useAppTheme();
+
+  const issueOperations: TIssueOperations = useMemo(
+    () => ({
+      fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          await fetchIssue(workspaceSlug, projectId, issueId);
+        } catch (error) {
+          console.error("Error fetching the parent issue:", error);
+        }
+      },
+      update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
+        try {
+          await updateIssue(workspaceSlug, projectId, issueId, data);
+        } catch (error) {
+          console.log("Error in updating issue:", error);
+          setToast({
+            title: t("common.error.label"),
+            type: TOAST_TYPE.ERROR,
+            message: t("entity.update.failed", { entity: t("issue.label") }),
+          });
+        }
+      },
+      remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
+          else await removeIssue(workspaceSlug, projectId, issueId);
+          setToast({
+            title: t("common.success"),
+            type: TOAST_TYPE.SUCCESS,
+            message: t("entity.delete.success", { entity: t("issue.label") }),
+          });
+        } catch (error) {
+          console.log("Error in deleting issue:", error);
+          setToast({
+            title: t("common.error.label"),
+            type: TOAST_TYPE.ERROR,
+            message: t("entity.delete.failed", { entity: t("issue.label") }),
+          });
+        }
+      },
+      archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          await archiveIssue(workspaceSlug, projectId, issueId);
+        } catch (error) {
+          console.log("Error in archiving issue:", error);
+        }
+      },
+      addCycleToIssue: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
+        try {
+          await addCycleToIssue(workspaceSlug, projectId, cycleId, issueId);
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("common.error.label"),
+            message: t("issue.add.cycle.failed"),
+          });
+        }
+      },
+      addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
+        try {
+          await addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("common.error.label"),
+            message: t("issue.add.cycle.failed"),
+          });
+        }
+      },
+      removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
+        try {
+          const removeFromCyclePromise = removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+          setPromiseToast(removeFromCyclePromise, {
+            loading: t("issue.remove.cycle.loading"),
+            success: {
+              title: t("common.success"),
+              message: () => t("issue.remove.cycle.success"),
+            },
+            error: {
+              title: t("common.error.label"),
+              message: () => t("issue.remove.cycle.failed"),
+            },
+          });
+          await removeFromCyclePromise;
+        } catch (error) {
+          console.log("Error in removing issue from cycle:", error);
+        }
+      },
+      removeIssueFromModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
+        try {
+          const removeFromModulePromise = removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
+          setPromiseToast(removeFromModulePromise, {
+            loading: t("issue.remove.module.loading"),
+            success: {
+              title: t("common.success"),
+              message: () => t("issue.remove.module.success"),
+            },
+            error: {
+              title: t("common.error.label"),
+              message: () => t("issue.remove.module.failed"),
+            },
+          });
+          await removeFromModulePromise;
+        } catch (error) {
+          console.log("Error in removing issue from module:", error);
+        }
+      },
+      changeModulesInIssue: async (
+        workspaceSlug: string,
+        projectId: string,
+        issueId: string,
+        addModuleIds: string[],
+        removeModuleIds: string[]
+      ) => {
+        const promise = await changeModulesInIssue(workspaceSlug, projectId, issueId, addModuleIds, removeModuleIds);
+        return promise;
+      },
+    }),
+    [
+      is_archived,
+      fetchIssue,
+      updateIssue,
+      removeIssue,
+      archiveIssue,
+      removeArchivedIssue,
+      addIssueToCycle,
+      addCycleToIssue,
+      removeIssueFromCycle,
+      changeModulesInIssue,
+      removeIssueFromModule,
+      t,
+    ]
+  );
+
+  // issue details
+  const issue = getIssueById(issueId);
+  // checking if issue is editable, based on user role
+  const isEditable = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+
+  return (
+    <>
+      {!issue ? (
+        <EmptyState
+          image={emptyIssue}
+          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}/projects/${projectId}/issues`),
+          }}
+        />
+      ) : (
+        <div className="flex h-full w-full overflow-hidden">
+          <div className="h-full w-full space-y-6 overflow-y-auto px-9 py-5">
+            <IssueMainContent
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={issueId}
+              issueOperations={issueOperations}
+              isEditable={isEditable}
+              isArchived={is_archived}
+            />
+          </div>
+          <div
+            className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/4 lg:min-w-80 xl:min-w-96"
+            style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
+          >
+            <IssueDetailsSidebar
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={issueId}
+              issueOperations={issueOperations}
+              isEditable={!is_archived && isEditable}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* peek overview */}
+      <IssuePeekOverview />
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/sidebar.tsx b/apps/web/core/components/issues/issue-detail/sidebar.tsx
new file mode 100644
index 0000000..8a4a3ba
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -0,0 +1,256 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// ui
+import {
+  CyclesOutline,
+  DueDateOutline,
+  EstimateOutline,
+  LabelsOutline,
+  MembersOutline,
+  ModuleOutline,
+  ParentOutline,
+  PriorityOutline,
+  StartDateOutline,
+  StateOutline,
+  UserOutline,
+} from "@makeplane/propel/icons";
+import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
+// components
+import { DateDropdown } from "@/components/dropdowns/date";
+import { EstimateDropdown } from "@/components/dropdowns/estimate";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+// components
+import { IssueParentSelectRoot } from "@/components/issues/parent-select-root";
+import { SidebarPropertyListItem } from "@/components/common/layout/sidebar/property-list-item";
+import { IssueCycleSelect } from "./cycle-select";
+import { IssueLabel } from "./label";
+import { IssueModuleSelect } from "./module-select";
+import type { TIssueOperations } from "./root";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issueOperations: TIssueOperations;
+  isEditable: boolean;
+};
+
+export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props: Props) {
+  const { t } = useTranslation();
+  const { workspaceSlug, projectId, issueId, issueOperations, isEditable } = props;
+  // store hooks
+  const { getProjectById } = useProject();
+  const { areEstimateEnabledByProjectId } = useProjectEstimates();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { getUserDetails } = useMember();
+  const { getStateById } = useProjectState();
+  const issue = getIssueById(issueId);
+  if (!issue) return <></>;
+
+  const createdByDetails = getUserDetails(issue.created_by);
+
+  // derived values
+  const projectDetails = getProjectById(issue.project_id);
+  const stateDetails = getStateById(issue.state_id);
+
+  const minDate = issue.start_date ? getDate(issue.start_date) : null;
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = issue.target_date ? getDate(issue.target_date) : null;
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <>
+      <div className="flex h-full w-full flex-col items-center divide-y-2 divide-subtle-1 overflow-hidden">
+        <div className="h-full w-full overflow-y-auto px-6">
+          <h5 className="mt-5 text-body-xs-medium">{t("common.properties")}</h5>
+          <div className={`mt-4 mb-2 space-y-2.5 truncate ${!isEditable ? "opacity-60" : ""}`}>
+            <SidebarPropertyListItem icon={StateOutline} label={t("common.state")}>
+              <StateDropdown
+                value={issue?.state_id}
+                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
+                projectId={projectId?.toString() ?? ""}
+                disabled={!isEditable}
+                buttonVariant="transparent-with-text"
+                className="group w-full grow"
+                buttonContainerClassName="w-full text-left h-7.5"
+                buttonClassName="text-body-xs-regular"
+                dropdownArrow
+                dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+              />
+            </SidebarPropertyListItem>
+
+            <SidebarPropertyListItem icon={MembersOutline} label={t("common.assignees")}>
+              <MemberDropdown
+                value={issue?.assignee_ids ?? undefined}
+                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
+                disabled={!isEditable}
+                projectId={projectId?.toString() ?? ""}
+                placeholder={t("issue.add.assignee")}
+                multiple
+                buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
+                className="group w-full grow"
+                buttonContainerClassName="w-full text-left h-7.5"
+                buttonClassName={`text-body-xs-regular justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
+                hideIcon={issue.assignee_ids?.length === 0}
+                dropdownArrow
+                dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+              />
+            </SidebarPropertyListItem>
+
+            <SidebarPropertyListItem icon={PriorityOutline} label={t("common.priority")}>
+              <PriorityDropdown
+                value={issue?.priority}
+                onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
+                disabled={!isEditable}
+                buttonVariant="transparent-with-text"
+                className="h-7.5 w-full grow rounded-sm"
+                buttonContainerClassName="size-full text-left"
+                buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
+              />
+            </SidebarPropertyListItem>
+
+            {createdByDetails && (
+              <SidebarPropertyListItem icon={UserOutline} label={t("common.created_by")}>
+                <div className="flex gap-2 px-2">
+                  <ButtonAvatars showTooltip userIds={createdByDetails.id} />
+                  <span className="grow truncate text-body-xs-regular leading-5">{createdByDetails?.display_name}</span>
+                </div>
+              </SidebarPropertyListItem>
+            )}
+
+            <SidebarPropertyListItem icon={StartDateOutline} label={t("common.order_by.start_date")}>
+              <DateDropdown
+                placeholder={t("issue.add.start_date")}
+                value={issue.start_date}
+                onChange={(val) =>
+                  issueOperations.update(workspaceSlug, projectId, issueId, {
+                    start_date: val ? renderFormattedPayloadDate(val) : null,
+                  })
+                }
+                maxDate={maxDate ?? undefined}
+                disabled={!isEditable}
+                buttonVariant="transparent-with-text"
+                className="group w-full grow"
+                buttonContainerClassName="w-full text-left h-7.5"
+                buttonClassName={`text-body-xs-regular ${issue?.start_date ? "" : "text-placeholder"}`}
+                hideIcon
+                clearIconClassName="h-3 w-3 hidden group-hover:inline"
+              />
+            </SidebarPropertyListItem>
+
+            <SidebarPropertyListItem icon={DueDateOutline} label={t("common.order_by.due_date")}>
+              <div className="flex w-full items-center gap-2">
+                <DateDropdown
+                  placeholder={t("issue.add.due_date")}
+                  value={issue.target_date}
+                  onChange={(val) =>
+                    issueOperations.update(workspaceSlug, projectId, issueId, {
+                      target_date: val ? renderFormattedPayloadDate(val) : null,
+                    })
+                  }
+                  minDate={minDate ?? undefined}
+                  disabled={!isEditable}
+                  buttonVariant="transparent-with-text"
+                  className="group w-full grow"
+                  buttonContainerClassName="w-full text-left h-7.5"
+                  buttonClassName={cn("text-body-xs-regular", {
+                    "text-placeholder": !issue.target_date,
+                    "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+                  })}
+                  hideIcon
+                  clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"
+                />
+              </div>
+            </SidebarPropertyListItem>
+
+            {projectId && areEstimateEnabledByProjectId(projectId) && (
+              <SidebarPropertyListItem icon={EstimateOutline} label={t("common.estimate")}>
+                <EstimateDropdown
+                  value={issue?.estimate_point ?? undefined}
+                  onChange={(val: string | undefined) =>
+                    issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })
+                  }
+                  projectId={projectId}
+                  disabled={!isEditable}
+                  buttonVariant="transparent-with-text"
+                  className="group w-full grow"
+                  buttonContainerClassName="w-full text-left h-7.5"
+                  buttonClassName={`text-body-xs-regular ${issue?.estimate_point !== null ? "" : "text-placeholder"}`}
+                  placeholder={t("common.none")}
+                  hideIcon
+                  dropdownArrow
+                  dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+                />
+              </SidebarPropertyListItem>
+            )}
+
+            {projectDetails?.module_view && (
+              <SidebarPropertyListItem icon={ModuleOutline} label={t("common.modules")}>
+                <IssueModuleSelect
+                  className="w-full grow"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={!isEditable}
+                />
+              </SidebarPropertyListItem>
+            )}
+
+            {projectDetails?.cycle_view && (
+              <SidebarPropertyListItem icon={CyclesOutline} label={t("common.cycle")} appendElement={null}>
+                <IssueCycleSelect
+                  className="h-7.5 w-full grow"
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={!isEditable}
+                />
+              </SidebarPropertyListItem>
+            )}
+
+            <SidebarPropertyListItem icon={ParentOutline} label={t("common.parent")}>
+              <IssueParentSelectRoot
+                className="h-7.5 w-full grow"
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                issueId={issueId}
+                issueOperations={issueOperations}
+                disabled={!isEditable}
+              />
+            </SidebarPropertyListItem>
+
+            <SidebarPropertyListItem icon={LabelsOutline} label={t("common.labels")}>
+              <IssueLabel
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                issueId={issueId}
+                disabled={!isEditable}
+              />
+            </SidebarPropertyListItem>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
new file mode 100644
index 0000000..6b59dce
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { isNil } from "lodash-es";
+import { observer } from "mobx-react";
+import { SubscribeOutline, UnsubscribeOutline } from "@makeplane/propel/icons";
+// plane-i18n
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// UI
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EIssueServiceType } from "@plane/types";
+import { Loader } from "@plane/ui";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useUserPermissions } from "@/hooks/store/user";
+
+export type TIssueSubscription = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  serviceType?: EIssueServiceType;
+};
+
+export const IssueSubscription = observer(function IssueSubscription(props: TIssueSubscription) {
+  const { workspaceSlug, projectId, issueId, serviceType = EIssueServiceType.ISSUES } = props;
+  const { t } = useTranslation();
+  // hooks
+  const {
+    subscription: { getSubscriptionByIssueId },
+    createSubscription,
+    removeSubscription,
+  } = useIssueDetail(serviceType);
+  // state
+  const [loading, setLoading] = useState(false);
+  // hooks
+  const { allowPermissions } = useUserPermissions();
+
+  const isSubscribed = getSubscriptionByIssueId(issueId);
+  const isEditable = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+
+  const handleSubscription = async () => {
+    setLoading(true);
+    try {
+      if (isSubscribed) await removeSubscription(workspaceSlug, projectId, issueId);
+      else await createSubscription(workspaceSlug, projectId, issueId);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("toast.success"),
+        message: isSubscribed
+          ? t("issue.subscription.actions.unsubscribed")
+          : t("issue.subscription.actions.subscribed"),
+      });
+      setLoading(false);
+    } catch {
+      setLoading(false);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: t("common.error.message"),
+      });
+    }
+  };
+
+  if (isNil(isSubscribed))
+    return (
+      <Loader>
+        <Loader.Item width="106px" height="28px" />
+      </Loader>
+    );
+
+  return (
+    <div>
+      <Button
+        prependIcon={isSubscribed ? <UnsubscribeOutline /> : <SubscribeOutline className="h-3 w-3" />}
+        variant="secondary"
+        className="hover:!bg-accent-primary/20"
+        onClick={handleSubscription}
+        disabled={!isEditable || loading}
+        size="lg"
+      >
+        {loading ? (
+          <span>
+            <span className="hidden sm:block">{t("common.loading")}</span>
+          </span>
+        ) : isSubscribed ? (
+          <div className="hidden sm:block">{t("common.actions.unsubscribe")}</div>
+        ) : (
+          <div className="hidden sm:block">{t("common.actions.subscribe")}</div>
+        )}
+      </Button>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
new file mode 100644
index 0000000..3f4eef8
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC } from "react";
+import { useCallback, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EIssueGroupByToServerOptions, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TGroupedIssues } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+// hooks
+import { useCalendarView } from "@/hooks/store/use-calendar-view";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+// types
+import type { IQuickActionProps } from "../list/list-view-types";
+import { CalendarChart } from "./calendar";
+import { handleDragDrop } from "./utils";
+
+export type CalendarStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.TEAM
+  | EIssuesStoreType.TEAM_VIEW
+  | EIssuesStoreType.EPIC;
+
+interface IBaseCalendarRoot {
+  QuickActions: FC<IQuickActionProps>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  isCompletedCycle?: boolean;
+  viewId?: string | undefined;
+  isEpic?: boolean;
+  canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+}
+
+export const BaseCalendarRoot = observer(function BaseCalendarRoot(props: IBaseCalendarRoot) {
+  const {
+    QuickActions,
+    addIssuesToView,
+    isCompletedCycle = false,
+    viewId,
+    isEpic = false,
+    canEditPropertiesBasedOnProject,
+  } = props;
+
+  // router
+  const { workspaceSlug } = useParams();
+
+  // hooks
+  const fallbackStoreType = useIssueStoreType() as CalendarStoreType;
+  const storeType = isEpic ? EIssuesStoreType.EPIC : fallbackStoreType;
+  const { allowPermissions } = useUserPermissions();
+  const { issues, issuesFilter, issueMap } = useIssues(storeType);
+  const {
+    fetchIssues,
+    fetchNextIssues,
+    quickAddIssue,
+    updateIssue,
+    removeIssue,
+    removeIssueFromView,
+    archiveIssue,
+    restoreIssue,
+    updateFilters,
+  } = useIssuesActions(storeType);
+
+  const issueCalendarView = useCalendarView();
+
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  const { enableInlineEditing } = issues?.viewFlags || {};
+
+  const displayFilters = issuesFilter.issueFilters?.displayFilters;
+
+  const groupedIssueIds = (issues.groupedIssueIds ?? {}) as TGroupedIssues;
+
+  const layout = displayFilters?.calendar?.layout ?? "month";
+  const { startDate, endDate } = issueCalendarView.getStartAndEndDate(layout) ?? {};
+
+  useEffect(() => {
+    if (startDate && endDate && layout) {
+      fetchIssues(
+        "init-loader",
+        {
+          canGroup: true,
+          perPageCount: layout === "month" ? 4 : 30,
+          before: endDate,
+          after: startDate,
+          groupedBy: EIssueGroupByToServerOptions["target_date"],
+        },
+        viewId
+      );
+    }
+  }, [fetchIssues, storeType, startDate, endDate, layout, viewId]);
+
+  const handleDragAndDrop = async (
+    issueId: string | undefined,
+    issueProjectId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => {
+    if (!issueId || !destinationDate || !sourceDate || !issueProjectId) return;
+
+    await handleDragDrop(
+      issueId,
+      sourceDate,
+      destinationDate,
+      workspaceSlug?.toString(),
+      issueProjectId,
+      updateIssue
+    ).catch((err) => {
+      setToast({
+        title: "Error!",
+        type: TOAST_TYPE.ERROR,
+        message: err?.detail ?? "Failed to perform this action",
+      });
+    });
+  };
+
+  const loadMoreIssues = useCallback(
+    (dateString: string) => {
+      fetchNextIssues(dateString);
+    },
+    [fetchNextIssues]
+  );
+
+  const getPaginationData = useCallback(
+    (groupId: string | undefined) => issues?.getPaginationData(groupId, undefined),
+    [issues?.getPaginationData]
+  );
+
+  const getGroupIssueCount = useCallback(
+    (groupId: string | undefined) => issues?.getGroupIssueCount(groupId, undefined, false),
+    [issues?.getGroupIssueCount]
+  );
+
+  const canEditProperties = useCallback(
+    (projectId: string | undefined) => {
+      const isEditingAllowedBasedOnProject =
+        canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+
+      return enableInlineEditing && isEditingAllowedBasedOnProject;
+    },
+    [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
+  );
+
+  return (
+    <>
+      <div className="h-full w-full overflow-hidden bg-surface-1 pt-4">
+        <CalendarChart
+          issuesFilterStore={issuesFilter}
+          issues={issueMap}
+          groupedIssueIds={groupedIssueIds}
+          layout={displayFilters?.calendar?.layout}
+          showWeekends={displayFilters?.calendar?.show_weekends ?? false}
+          issueCalendarView={issueCalendarView}
+          quickActions={({ issue, parentRef, customActionButton, placement }) => (
+            <QuickActions
+              parentRef={parentRef}
+              customActionButton={customActionButton}
+              issue={issue}
+              handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+              handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+              handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
+              handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+              handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
+              readOnly={!canEditProperties(issue.project_id ?? undefined) || isCompletedCycle}
+              placements={placement}
+            />
+          )}
+          loadMoreIssues={loadMoreIssues}
+          getPaginationData={getPaginationData}
+          getGroupIssueCount={getGroupIssueCount}
+          addIssuesToView={addIssuesToView}
+          quickAddCallback={quickAddIssue}
+          readOnly={isCompletedCycle}
+          updateFilters={updateFilters}
+          handleDragAndDrop={handleDragAndDrop}
+          canEditProperties={canEditProperties}
+          isEpic={isEpic}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
new file mode 100644
index 0000000..1edd03f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
@@ -0,0 +1,262 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { observer } from "mobx-react";
+// plane constants
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+// types
+import type {
+  TGroupedIssues,
+  TIssue,
+  TIssueMap,
+  TPaginationData,
+  ICalendarWeek,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+// ui
+import { Spinner } from "@plane/ui";
+import { renderFormattedPayloadDate, cn } from "@plane/utils";
+// constants
+import { MONTHS_LIST } from "@plane/constants";
+// helpers
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import useSize from "@/hooks/use-window-size";
+// store
+import type { ICycleIssuesFilter } from "@/store/issue/cycle";
+import type { ICalendarStore } from "@/store/issue/issue_calendar_view.store";
+import type { IModuleIssuesFilter } from "@/store/issue/module";
+import type { IProjectIssuesFilter } from "@/store/issue/project";
+import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
+// local imports
+import { IssueLayoutHOC } from "../issue-layout-HOC";
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { CalendarHeader } from "./header";
+import { CalendarIssueBlocks } from "./issue-blocks";
+import { CalendarWeekDays } from "./week-days";
+import { CalendarWeekHeader } from "./week-header";
+
+type Props = {
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  issues: TIssueMap | undefined;
+  groupedIssueIds: TGroupedIssues;
+  layout: "month" | "week" | undefined;
+  showWeekends: boolean;
+  issueCalendarView: ICalendarStore;
+  loadMoreIssues: (dateString: string) => void;
+  getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
+  getGroupIssueCount: (groupId: string | undefined) => number | undefined;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  quickActions: TRenderQuickActions;
+  handleDragAndDrop: (
+    issueId: string | undefined,
+    issueProjectId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => Promise<void>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  readOnly?: boolean;
+  updateFilters?: (
+    projectId: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate
+  ) => Promise<void>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  isEpic?: boolean;
+};
+
+export const CalendarChart = observer(function CalendarChart(props: Props) {
+  const {
+    issuesFilterStore,
+    issues,
+    groupedIssueIds,
+    layout,
+    showWeekends,
+    issueCalendarView,
+    loadMoreIssues,
+    handleDragAndDrop,
+    quickActions,
+    quickAddCallback,
+    addIssuesToView,
+    getPaginationData,
+    getGroupIssueCount,
+    updateFilters,
+    canEditProperties,
+    readOnly = false,
+    isEpic = false,
+  } = props;
+  // states
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  //refs
+  const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
+  // store hooks
+  const {
+    issues: { viewFlags },
+  } = useIssues(EIssuesStoreType.PROJECT);
+
+  const [windowWidth] = useSize();
+
+  const { enableIssueCreation, enableQuickAdd } = viewFlags || {};
+
+  const calendarPayload = issueCalendarView.calendarPayload;
+
+  const allWeeksOfActiveMonth = issueCalendarView.allWeeksOfActiveMonth;
+
+  const formattedDatePayload = renderFormattedPayloadDate(selectedDate) ?? undefined;
+
+  // Enable Auto Scroll for calendar
+  useEffect(() => {
+    const element = scrollableContainerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+  }, [scrollableContainerRef?.current]);
+
+  if (!calendarPayload || !formattedDatePayload)
+    return (
+      <div className="grid h-full w-full place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : [];
+
+  return (
+    <>
+      <div className="flex h-full w-full flex-col overflow-hidden">
+        <CalendarHeader
+          setSelectedDate={setSelectedDate}
+          issuesFilterStore={issuesFilterStore}
+          updateFilters={updateFilters}
+        />
+
+        <IssueLayoutHOC layout={EIssueLayoutTypes.CALENDAR}>
+          <div
+            className={cn("flex w-full flex-col overflow-y-auto md:h-full", {
+              "vertical-scrollbar scrollbar-lg": windowWidth > 768,
+            })}
+            ref={scrollableContainerRef}
+          >
+            <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
+            <div className="h-full w-full">
+              {layout === "month" && (
+                <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-subtle-1">
+                  {allWeeksOfActiveMonth &&
+                    Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
+                      <CalendarWeekDays
+                        selectedDate={selectedDate}
+                        setSelectedDate={setSelectedDate}
+                        handleDragAndDrop={handleDragAndDrop}
+                        issuesFilterStore={issuesFilterStore}
+                        key={weekIndex}
+                        week={week}
+                        issues={issues}
+                        groupedIssueIds={groupedIssueIds}
+                        loadMoreIssues={loadMoreIssues}
+                        getPaginationData={getPaginationData}
+                        getGroupIssueCount={getGroupIssueCount}
+                        enableQuickIssueCreate={enableQuickAdd}
+                        disableIssueCreation={!enableIssueCreation}
+                        quickActions={quickActions}
+                        quickAddCallback={quickAddCallback}
+                        addIssuesToView={addIssuesToView}
+                        readOnly={readOnly}
+                        canEditProperties={canEditProperties}
+                        isEpic={isEpic}
+                      />
+                    ))}
+                </div>
+              )}
+              {layout === "week" && (
+                <CalendarWeekDays
+                  selectedDate={selectedDate}
+                  setSelectedDate={setSelectedDate}
+                  handleDragAndDrop={handleDragAndDrop}
+                  issuesFilterStore={issuesFilterStore}
+                  week={issueCalendarView.allDaysOfActiveWeek}
+                  issues={issues}
+                  groupedIssueIds={groupedIssueIds}
+                  loadMoreIssues={loadMoreIssues}
+                  getPaginationData={getPaginationData}
+                  getGroupIssueCount={getGroupIssueCount}
+                  enableQuickIssueCreate={enableQuickAdd}
+                  disableIssueCreation={!enableIssueCreation}
+                  quickActions={quickActions}
+                  quickAddCallback={quickAddCallback}
+                  addIssuesToView={addIssuesToView}
+                  readOnly={readOnly}
+                  canEditProperties={canEditProperties}
+                  isEpic={isEpic}
+                />
+              )}
+            </div>
+
+            {/* mobile view */}
+            <div className="md:hidden">
+              <p className="p-4 text-18 font-semibold">
+                {`${selectedDate.getDate()} ${
+                  MONTHS_LIST[selectedDate.getMonth() + 1].title
+                }, ${selectedDate.getFullYear()}`}
+              </p>
+              <CalendarIssueBlocks
+                date={selectedDate}
+                issueIdList={issueIdList}
+                loadMoreIssues={loadMoreIssues}
+                getPaginationData={getPaginationData}
+                getGroupIssueCount={getGroupIssueCount}
+                quickActions={quickActions}
+                enableQuickIssueCreate={enableQuickAdd}
+                disableIssueCreation={!enableIssueCreation}
+                quickAddCallback={quickAddCallback}
+                addIssuesToView={addIssuesToView}
+                readOnly={readOnly}
+                canEditProperties={canEditProperties}
+                isDragDisabled
+                isMobileView
+                isEpic={isEpic}
+              />
+            </div>
+          </div>
+        </IssueLayoutHOC>
+
+        {/* mobile view */}
+        <div className="md:hidden">
+          <p className="p-4 text-18 font-semibold">
+            {`${selectedDate.getDate()} ${
+              MONTHS_LIST[selectedDate.getMonth() + 1].title
+            }, ${selectedDate.getFullYear()}`}
+          </p>
+          <CalendarIssueBlocks
+            date={selectedDate}
+            issueIdList={issueIdList}
+            quickActions={quickActions}
+            loadMoreIssues={loadMoreIssues}
+            getPaginationData={getPaginationData}
+            getGroupIssueCount={getGroupIssueCount}
+            enableQuickIssueCreate={enableQuickAdd}
+            disableIssueCreation={!enableIssueCreation}
+            quickAddCallback={quickAddCallback}
+            addIssuesToView={addIssuesToView}
+            readOnly={readOnly}
+            canEditProperties={canEditProperties}
+            isDragDisabled
+            isMobileView
+            isEpic={isEpic}
+          />
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
new file mode 100644
index 0000000..eaf99f2
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { observer } from "mobx-react";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TGroupedIssues, TIssue, TIssueMap, TPaginationData, ICalendarDate } from "@plane/types";
+// types
+// ui
+// components
+import { cn, renderFormattedPayloadDate } from "@plane/utils";
+import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
+// helpers
+import { MONTHS_LIST } from "@plane/constants";
+// helpers
+// types
+import type { ICycleIssuesFilter } from "@/store/issue/cycle";
+import type { IModuleIssuesFilter } from "@/store/issue/module";
+import type { IProjectIssuesFilter } from "@/store/issue/project";
+import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { CalendarIssueBlocks } from "./issue-blocks";
+
+type Props = {
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  date: ICalendarDate;
+  issues: TIssueMap | undefined;
+  groupedIssueIds: TGroupedIssues;
+  loadMoreIssues: (dateString: string) => void;
+  getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
+  getGroupIssueCount: (groupId: string | undefined) => number | undefined;
+  enableQuickIssueCreate?: boolean;
+  disableIssueCreation?: boolean;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  quickActions: TRenderQuickActions;
+  handleDragAndDrop: (
+    issueId: string | undefined,
+    issueProjectId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => Promise<void>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  readOnly?: boolean;
+  selectedDate: Date;
+  setSelectedDate: (date: Date) => void;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  isEpic?: boolean;
+};
+
+export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
+  const {
+    issuesFilterStore,
+    date,
+    issues,
+    groupedIssueIds,
+    loadMoreIssues,
+    getPaginationData,
+    getGroupIssueCount,
+    quickActions,
+    enableQuickIssueCreate,
+    disableIssueCreation,
+    quickAddCallback,
+    addIssuesToView,
+    readOnly = false,
+    selectedDate,
+    handleDragAndDrop,
+    setSelectedDate,
+    canEditProperties,
+    isEpic = false,
+  } = props;
+
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+  const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
+
+  const formattedDatePayload = renderFormattedPayloadDate(date.date);
+
+  const dayTileRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const element = dayTileRef.current;
+
+    if (!element) return;
+
+    return combine(
+      dropTargetForElements({
+        element,
+        getData: () => ({ date: formattedDatePayload }),
+        onDragEnter: () => {
+          setIsDraggingOver(true);
+        },
+        onDragLeave: () => {
+          setIsDraggingOver(false);
+        },
+        onDrop: ({ source, self }) => {
+          setIsDraggingOver(false);
+          const sourceData = source?.data as { id: string; date: string } | undefined;
+          const destinationData = self?.data as { date: string } | undefined;
+          if (!sourceData || !destinationData) return;
+
+          const issueDetails = issues?.[sourceData?.id];
+          if (issueDetails?.start_date) {
+            const issueStartDate = new Date(issueDetails.start_date);
+            const targetDate = new Date(destinationData?.date);
+            const diffInDays = differenceInCalendarDays(targetDate, issueStartDate);
+            if (diffInDays < 0) {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: "Error!",
+                message: "Due date cannot be before the start date of the work item.",
+              });
+              return;
+            }
+          }
+
+          handleDragAndDrop(
+            sourceData?.id,
+            issueDetails?.project_id ?? undefined,
+            sourceData?.date,
+            destinationData?.date
+          );
+          highlightIssueOnDrop(source?.element?.id, false);
+        },
+      })
+    );
+  }, [dayTileRef?.current, formattedDatePayload]);
+
+  if (!formattedDatePayload) return null;
+  const issueIds = groupedIssueIds?.[formattedDatePayload];
+
+  const isToday = date.date.toDateString() === new Date().toDateString();
+  const isSelectedDate = date.date.toDateString() == selectedDate.toDateString();
+
+  const isWeekend = [0, 6].includes(date.date.getDay());
+  const isMonthLayout = calendarLayout === "month";
+
+  const normalBackground = isWeekend ? "bg-layer-1" : "bg-layer-transparent";
+  const draggingOverBackground = isWeekend ? "bg-layer-1" : "bg-layer-transparent-hover";
+
+  return (
+    <>
+      <div ref={dayTileRef} className="group relative flex h-full w-full flex-col">
+        {/* header */}
+        <div
+          className={`hidden flex-shrink-0 justify-end px-2 py-1.5 text-right text-11 md:flex ${
+            isMonthLayout // if month layout, highlight current month days
+              ? date.is_current_month
+                ? "font-medium"
+                : "text-tertiary"
+              : "font-medium" // if week layout, highlight all days
+          } ${isWeekend ? "bg-layer-1" : "bg-layer-transparent"} `}
+        >
+          {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
+          {isToday ? (
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-accent-primary text-on-color">
+              {date.date.getDate()}
+            </span>
+          ) : (
+            <>{date.date.getDate()}</>
+          )}
+        </div>
+
+        {/* content */}
+        <div className="hidden h-full w-full md:block">
+          <div
+            className={cn(
+              `h-full w-full select-none ${isDraggingOver ? `${draggingOverBackground} opacity-70` : normalBackground}`,
+              {
+                "min-h-[5rem]": isMonthLayout,
+              }
+            )}
+          >
+            <CalendarIssueBlocks
+              date={date.date}
+              issueIdList={issueIds}
+              quickActions={quickActions}
+              loadMoreIssues={loadMoreIssues}
+              getPaginationData={getPaginationData}
+              getGroupIssueCount={getGroupIssueCount}
+              isDragDisabled={readOnly}
+              addIssuesToView={addIssuesToView}
+              disableIssueCreation={disableIssueCreation}
+              enableQuickIssueCreate={enableQuickIssueCreate}
+              quickAddCallback={quickAddCallback}
+              readOnly={readOnly}
+              canEditProperties={canEditProperties}
+              isEpic={isEpic}
+            />
+          </div>
+        </div>
+
+        {/* Mobile view content */}
+        <div
+          onClick={() => setSelectedDate(date.date)}
+          className={cn(
+            "mx-auto flex h-full w-full cursor-pointer flex-col items-center justify-start py-2.5 text-13 font-medium opacity-80 md:hidden",
+            {
+              "bg-layer-2": !isWeekend,
+            }
+          )}
+        >
+          <div
+            className={cn("flex size-6 items-center justify-center rounded-full", {
+              "bg-accent-primary text-on-color": isSelectedDate,
+              "bg-accent-primary/10 text-accent-primary": isToday && !isSelectedDate,
+            })}
+          >
+            {date.date.getDate()}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/index.ts b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/index.ts
new file mode 100644
index 0000000..eded9f4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./months-dropdown";
+export * from "./options-dropdown";
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
new file mode 100644
index 0000000..d68a3f4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Popover, Transition } from "@headlessui/react";
+import { ChevronLeftOutline, ChevronRightOutline } from "@makeplane/propel/icons";
+//hooks
+// icons
+// constants
+import { getDate } from "@plane/utils";
+import { MONTHS_LIST } from "@plane/constants";
+import { useCalendarView } from "@/hooks/store/use-calendar-view";
+import type { ICycleIssuesFilter } from "@/store/issue/cycle";
+import type { IModuleIssuesFilter } from "@/store/issue/module";
+import type { IProjectIssuesFilter } from "@/store/issue/project";
+import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
+// helpers
+
+interface Props {
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+}
+export const CalendarMonthsDropdown = observer(function CalendarMonthsDropdown(props: Props) {
+  const { issuesFilterStore } = props;
+
+  const issueCalendarView = useCalendarView();
+
+  const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const { activeMonthDate } = issueCalendarView.calendarFilters;
+
+  const getWeekLayoutHeader = (): string => {
+    const allDaysOfActiveWeek = issueCalendarView.allDaysOfActiveWeek;
+
+    if (!allDaysOfActiveWeek) return "Week view";
+
+    const daysList = Object.keys(allDaysOfActiveWeek);
+
+    const firstDay = getDate(daysList[0]);
+    const lastDay = getDate(daysList[daysList.length - 1]);
+
+    if (!firstDay || !lastDay) return "Week view";
+
+    if (firstDay.getMonth() === lastDay.getMonth() && firstDay.getFullYear() === lastDay.getFullYear())
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].title} ${firstDay.getFullYear()}`;
+
+    if (firstDay.getFullYear() !== lastDay.getFullYear()) {
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} ${firstDay.getFullYear()} - ${
+        MONTHS_LIST[lastDay.getMonth() + 1].shortTitle
+      } ${lastDay.getFullYear()}`;
+    } else
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} - ${
+        MONTHS_LIST[lastDay.getMonth() + 1].shortTitle
+      } ${lastDay.getFullYear()}`;
+  };
+
+  const handleDateChange = (date: Date) => {
+    issueCalendarView.updateCalendarFilters({
+      activeMonthDate: date,
+    });
+  };
+
+  return (
+    <Popover className="relative">
+      <Popover.Button as={React.Fragment}>
+        <button
+          type="button"
+          ref={setReferenceElement}
+          className="text-18 font-semibold outline-none"
+          disabled={calendarLayout === "week"}
+        >
+          {calendarLayout === "month"
+            ? `${MONTHS_LIST[activeMonthDate.getMonth() + 1].title} ${activeMonthDate.getFullYear()}`
+            : getWeekLayoutHeader()}
+        </button>
+      </Popover.Button>
+      <Transition
+        as={React.Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <Popover.Panel className="fixed z-50">
+          <div
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+            className="w-56 divide-y divide-subtle-1 rounded-sm border border-subtle bg-surface-1 p-3 shadow-raised-200"
+          >
+            <div className="flex items-center justify-between gap-2 pb-3">
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  const previousYear = new Date(activeMonthDate.getFullYear() - 1, activeMonthDate.getMonth(), 1);
+                  handleDateChange(previousYear);
+                }}
+              >
+                <ChevronLeftOutline height={14} width={14} />
+              </button>
+              <span className="text-11">{activeMonthDate.getFullYear()}</span>
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  const nextYear = new Date(activeMonthDate.getFullYear() + 1, activeMonthDate.getMonth(), 1);
+                  handleDateChange(nextYear);
+                }}
+              >
+                <ChevronRightOutline height={14} width={14} />
+              </button>
+            </div>
+            <div className="grid grid-cols-4 items-stretch justify-items-stretch gap-4 pt-3">
+              {Object.values(MONTHS_LIST).map((month, index) => (
+                <button
+                  key={month.shortTitle}
+                  type="button"
+                  className="rounded-sm py-0.5 text-11 hover:bg-layer-1"
+                  onClick={() => {
+                    const newDate = new Date(activeMonthDate.getFullYear(), index, 1);
+                    handleDateChange(newDate);
+                  }}
+                >
+                  {month.shortTitle}
+                </button>
+              ))}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
new file mode 100644
index 0000000..5c73033
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+import { ChevronUpOutline, MoreVerticalOutline, TickOutline } from "@makeplane/propel/icons";
+import { Popover, Transition } from "@headlessui/react";
+// hooks
+// ui
+// icons
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EIssueFilterType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TCalendarLayouts, TSupportedFilterForUpdate } from "@plane/types";
+import { Switch } from "@makeplane/propel/components/switch";
+// types
+// constants
+import { CALENDAR_LAYOUTS } from "@plane/constants";
+import { useCalendarView } from "@/hooks/store/use-calendar-view";
+import useSize from "@/hooks/use-window-size";
+import type { ICycleIssuesFilter } from "@/store/issue/cycle";
+import type { IModuleIssuesFilter } from "@/store/issue/module";
+import type { IProjectIssuesFilter } from "@/store/issue/project";
+import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
+
+interface ICalendarHeader {
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  updateFilters?: (
+    projectId: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate
+  ) => Promise<void>;
+}
+
+export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown(props: ICalendarHeader) {
+  const { issuesFilterStore, updateFilters } = props;
+
+  const { t } = useTranslation();
+
+  const { projectId } = useParams();
+
+  const issueCalendarView = useCalendarView();
+  const [windowWidth] = useSize();
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
+  const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
+
+  const handleLayoutChange = (layout: TCalendarLayouts, closePopover: any) => {
+    if (!updateFilters) return;
+
+    updateFilters(projectId?.toString(), EIssueFilterType.DISPLAY_FILTERS, {
+      calendar: {
+        ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
+        layout,
+      },
+    });
+
+    issueCalendarView.updateCalendarPayload(
+      layout === "month"
+        ? issueCalendarView.calendarFilters.activeMonthDate
+        : issueCalendarView.calendarFilters.activeWeekDate
+    );
+    if (windowWidth <= 768) closePopover(); // close the popover on mobile
+  };
+
+  const handleToggleWeekends = () => {
+    const showWeekends = issuesFilterStore.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
+
+    if (!updateFilters) return;
+
+    updateFilters(projectId?.toString(), EIssueFilterType.DISPLAY_FILTERS, {
+      calendar: {
+        ...issuesFilterStore.issueFilters?.displayFilters?.calendar,
+        show_weekends: !showWeekends,
+      },
+    });
+  };
+
+  return (
+    <Popover className="relative flex items-center">
+      {({ open, close: closePopover }) => (
+        <>
+          <Popover.Button as={React.Fragment}>
+            <button type="button" ref={setReferenceElement}>
+              <div
+                className={`hidden items-center gap-1.5 rounded-sm bg-layer-1 px-2.5 py-1 text-11 outline-none hover:bg-layer-1 md:flex ${
+                  open ? "text-primary" : "text-secondary"
+                }`}
+              >
+                <div className="font-medium">{t("common.options")}</div>
+                <div
+                  className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+                >
+                  <ChevronUpOutline width={12} />
+                </div>
+              </div>
+              <div className="md:hidden">
+                <MoreVerticalOutline className="h-4 text-secondary" />
+              </div>
+            </button>
+          </Popover.Button>
+          <Transition
+            as={React.Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="fixed z-50">
+              <div
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+                className="absolute right-0 z-10 mt-1 min-w-[12rem] overflow-hidden rounded-sm border border-subtle bg-surface-1 p-1 shadow-raised-200"
+              >
+                <div>
+                  {Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (
+                    <button
+                      key={layout}
+                      type="button"
+                      className="flex w-full items-center justify-between gap-2 rounded-sm px-1 py-1.5 text-left text-11 hover:bg-layer-1"
+                      onClick={() => handleLayoutChange(layoutDetails.key, closePopover)}
+                    >
+                      {layoutDetails.title}
+                      {calendarLayout === layout && <TickOutline width={12} height={12} />}
+                    </button>
+                  ))}
+                  <button
+                    type="button"
+                    className="flex w-full items-center justify-between gap-2 rounded-sm px-1 py-1.5 text-left text-11 hover:bg-layer-1"
+                    onClick={handleToggleWeekends}
+                  >
+                    {t("common.actions.show_weekends")}
+                    <Switch
+                      size="sm"
+                      checked={showWeekends}
+                      onCheckedChange={() => {
+                        if (windowWidth <= 768) closePopover();
+                      }}
+                      aria-label={t("common.actions.show_weekends")}
+                    />
+                  </button>
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
new file mode 100644
index 0000000..58ea8ba
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// components
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ChevronLeftOutline, ChevronRightOutline } from "@makeplane/propel/icons";
+import type { TSupportedFilterForUpdate } from "@plane/types";
+import { Row } from "@plane/ui";
+// icons
+import { useCalendarView } from "@/hooks/store/use-calendar-view";
+import type { ICycleIssuesFilter } from "@/store/issue/cycle";
+import type { IModuleIssuesFilter } from "@/store/issue/module";
+import type { IProjectIssuesFilter } from "@/store/issue/project";
+import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
+import { CalendarMonthsDropdown, CalendarOptionsDropdown } from "./dropdowns";
+
+interface ICalendarHeader {
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  updateFilters?: (
+    projectId: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate
+  ) => Promise<void>;
+  setSelectedDate: (date: Date) => void;
+}
+
+export const CalendarHeader = observer(function CalendarHeader(props: ICalendarHeader) {
+  const { issuesFilterStore, updateFilters, setSelectedDate } = props;
+
+  const { t } = useTranslation();
+
+  const issueCalendarView = useCalendarView();
+
+  const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
+
+  const { activeMonthDate, activeWeekDate } = issueCalendarView.calendarFilters;
+
+  const handlePrevious = () => {
+    if (calendarLayout === "month") {
+      const previousMonthYear =
+        activeMonthDate.getMonth() === 0 ? activeMonthDate.getFullYear() - 1 : activeMonthDate.getFullYear();
+      const previousMonthMonth = activeMonthDate.getMonth() === 0 ? 11 : activeMonthDate.getMonth() - 1;
+
+      const previousMonthFirstDate = new Date(previousMonthYear, previousMonthMonth, 1);
+
+      issueCalendarView.updateCalendarFilters({
+        activeMonthDate: previousMonthFirstDate,
+      });
+    } else {
+      const previousWeekDate = new Date(
+        activeWeekDate.getFullYear(),
+        activeWeekDate.getMonth(),
+        activeWeekDate.getDate() - 7
+      );
+
+      issueCalendarView.updateCalendarFilters({
+        activeWeekDate: previousWeekDate,
+      });
+    }
+  };
+
+  const handleNext = () => {
+    if (calendarLayout === "month") {
+      const nextMonthYear =
+        activeMonthDate.getMonth() === 11 ? activeMonthDate.getFullYear() + 1 : activeMonthDate.getFullYear();
+      const nextMonthMonth = (activeMonthDate.getMonth() + 1) % 12;
+
+      const nextMonthFirstDate = new Date(nextMonthYear, nextMonthMonth, 1);
+
+      issueCalendarView.updateCalendarFilters({
+        activeMonthDate: nextMonthFirstDate,
+      });
+    } else {
+      const nextWeekDate = new Date(
+        activeWeekDate.getFullYear(),
+        activeWeekDate.getMonth(),
+        activeWeekDate.getDate() + 7
+      );
+
+      issueCalendarView.updateCalendarFilters({
+        activeWeekDate: nextWeekDate,
+      });
+    }
+  };
+
+  const handleToday = () => {
+    const today = new Date();
+    const firstDayOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+    issueCalendarView.updateCalendarFilters({
+      activeMonthDate: firstDayOfCurrentMonth,
+      activeWeekDate: today,
+    });
+    setSelectedDate(today);
+  };
+
+  return (
+    <Row className="mb-4 flex items-center justify-between gap-2">
+      <div className="flex items-center gap-1.5">
+        <button type="button" className="grid place-items-center" onClick={handlePrevious}>
+          <ChevronLeftOutline height={16} width={16} />
+        </button>
+        <button type="button" className="grid place-items-center" onClick={handleNext}>
+          <ChevronRightOutline height={16} width={16} />
+        </button>
+        <CalendarMonthsDropdown issuesFilterStore={issuesFilterStore} />
+      </div>
+      <div className="flex items-center gap-1.5">
+        <button
+          type="button"
+          className="rounded-sm bg-layer-transparent px-2.5 py-1 text-11 font-medium text-secondary hover:bg-layer-transparent-hover hover:text-primary"
+          onClick={handleToday}
+        >
+          {t("common.today")}
+        </button>
+        <CalendarOptionsDropdown issuesFilterStore={issuesFilterStore} updateFilters={updateFilters} />
+      </div>
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
new file mode 100644
index 0000000..d2aaf6f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// components
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { HIGHLIGHT_CLASS } from "../utils";
+import { CalendarIssueBlock } from "./issue-block";
+// types
+
+type Props = {
+  issueId: string;
+  quickActions: TRenderQuickActions;
+  isDragDisabled: boolean;
+  isEpic?: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
+};
+
+export const CalendarIssueBlockRoot = observer(function CalendarIssueBlockRoot(props: Props) {
+  const { issueId, quickActions, isDragDisabled, isEpic = false, canEditProperties } = props;
+
+  const issueRef = useRef<HTMLAnchorElement | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+
+  const issue = getIssueById(issueId);
+
+  const canDrag = !isDragDisabled && canEditProperties(issue?.project_id ?? undefined);
+
+  useEffect(() => {
+    const element = issueRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => canDrag,
+        getInitialData: () => ({ id: issue?.id, date: issue?.target_date }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      })
+    );
+  }, [issueRef?.current, issue, canDrag]);
+
+  useOutsideClickDetector(issueRef, () => {
+    issueRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
+  });
+
+  if (!issue) return null;
+
+  return (
+    <CalendarIssueBlock
+      isDragging={isDragging}
+      issue={issue}
+      quickActions={quickActions}
+      ref={issueRef}
+      isEpic={isEpic}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
new file mode 100644
index 0000000..8a7afcd
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -0,0 +1,188 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef, forwardRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+import { Popover } from "@plane/propel/popover";
+import type { TIssue } from "@plane/types";
+import { ControlLink } from "@plane/ui";
+import { cn, generateWorkItemLink } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// local components
+import { WorkItemPreviewCard } from "../../preview-card";
+import type { TRenderQuickActions } from "../list/list-view-types";
+import type { CalendarStoreType } from "./base-calendar-root";
+
+type Props = {
+  issue: TIssue;
+  quickActions: TRenderQuickActions;
+  isDragging?: boolean;
+  isEpic?: boolean;
+};
+
+export const CalendarIssueBlock = observer(
+  forwardRef(function CalendarIssueBlock(props: Props, ref: React.ForwardedRef<HTMLAnchorElement>) {
+    const { issue, quickActions, isDragging = false, isEpic = false } = props;
+    // states
+    const [isMenuActive, setIsMenuActive] = useState(false);
+    // refs
+    const blockRef = useRef(null);
+    const menuActionRef = useRef<HTMLDivElement | null>(null);
+    // hooks
+    const { workspaceSlug } = useParams();
+    const { getProjectStates } = useProjectState();
+    const { getIsIssuePeeked } = useIssueDetail();
+    const { handleRedirection } = useIssuePeekOverviewRedirection(isEpic);
+    const { isMobile } = usePlatformOS();
+    const storeType = useIssueStoreType() as CalendarStoreType;
+    const { issuesFilter } = useIssues(storeType);
+    const { getProjectIdentifierById } = useProject();
+
+    const stateColor = getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
+    const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+
+    // handlers
+    const handleIssuePeekOverview = (peekIssue: TIssue) =>
+      handleRedirection(workspaceSlug?.toString(), peekIssue, isMobile);
+
+    useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
+
+    const customActionButton = (
+      // CustomMenu renders this inside its own <button>, which already carries the
+      // interactive semantics and keyboard handling — this div is presentational.
+      <div
+        role="presentation"
+        ref={menuActionRef}
+        className={`w-full cursor-pointer rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+          isMenuActive ? "bg-layer-1-active text-primary" : "text-secondary"
+        }`}
+        onClick={() => setIsMenuActive(!isMenuActive)}
+      >
+        <MoreHorizontalOutline className="h-3.5 w-3.5" />
+      </div>
+    );
+
+    const isMenuActionRefAboveScreenBottom =
+      typeof window !== "undefined" &&
+      menuActionRef?.current &&
+      menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220;
+
+    const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
+
+    const workItemLink = generateWorkItemLink({
+      workspaceSlug: workspaceSlug?.toString(),
+      projectId: issue?.project_id,
+      issueId: issue?.id,
+      projectIdentifier,
+      sequenceId: issue?.sequence_id,
+      isEpic,
+      isArchived: !!issue?.archived_at,
+    });
+
+    return (
+      <Popover delay={100} openOnHover>
+        <Popover.Button
+          className="w-full"
+          render={
+            <ControlLink
+              id={`issue-${issue.id}`}
+              href={workItemLink}
+              onClick={() => handleIssuePeekOverview(issue)}
+              className="block w-full rounded-sm border-b border-subtle text-13 text-primary hover:border-subtle-1 md:border-[1px]"
+              disabled={!!issue?.tempId || isMobile}
+              ref={ref}
+            >
+              <>
+                {issue?.tempId !== undefined && (
+                  <div className="absolute top-0 left-0 z-[99999] h-full w-full animate-pulse bg-surface-1/20" />
+                )}
+
+                <div
+                  ref={blockRef}
+                  className={cn(
+                    "group/calendar-block flex h-10 w-full items-center justify-between gap-1.5 rounded-sm px-4 py-1.5 md:h-8 md:px-1",
+                    {
+                      "border-accent-strong bg-surface-2 shadow-raised-200": isDragging,
+                      "bg-surface-1 hover:bg-surface-2": !isDragging,
+                      "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
+                    }
+                  )}
+                >
+                  <div className="flex h-full items-center gap-1.5 truncate">
+                    <span
+                      className="h-full w-0.5 flex-shrink-0 rounded-sm"
+                      style={{
+                        backgroundColor: stateColor,
+                      }}
+                    />
+                    {issue.project_id && (
+                      <IssueIdentifier
+                        issueId={issue.id}
+                        projectId={issue.project_id}
+                        size="xs"
+                        variant="tertiary"
+                        displayProperties={issuesFilter?.issueFilters?.displayProperties}
+                      />
+                    )}
+                    <div className="truncate text-13 font-medium md:text-11 md:font-regular">{issue.name}</div>
+                  </div>
+                  {/* Wrapper exists only to stop clicks reaching the ControlLink; the
+                      quick-action menu inside carries its own interactive semantics. */}
+                  <div
+                    role="presentation"
+                    className={cn("size-5 flex-shrink-0", {
+                      "hidden group-hover/calendar-block:block": !isMobile,
+                      block: isMenuActive,
+                    })}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    }}
+                  >
+                    {quickActions({
+                      issue,
+                      parentRef: blockRef,
+                      customActionButton,
+                      placement,
+                    })}
+                  </div>
+                </div>
+              </>
+            </ControlLink>
+          }
+        />
+        <Popover.Panel side="bottom" align="start">
+          <>
+            {issue.project_id && (
+              <WorkItemPreviewCard
+                projectId={issue.project_id}
+                stateDetails={{
+                  id: issue.state_id ?? undefined,
+                }}
+                workItem={issue}
+              />
+            )}
+          </>
+        </Popover.Panel>
+      </Popover>
+    );
+  })
+);
+
+CalendarIssueBlock.displayName = "CalendarIssueBlock";
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx b/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
new file mode 100644
index 0000000..0ded0ad
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { TIssue, TPaginationData } from "@plane/types";
+// components
+import { renderFormattedPayloadDate } from "@plane/utils";
+// helpers
+import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { CalendarIssueBlockRoot } from "./issue-block-root";
+import { CalendarQuickAddIssueActions } from "./quick-add-issue-actions";
+// types
+
+type Props = {
+  date: Date;
+  loadMoreIssues: (dateString: string) => void;
+  getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
+  getGroupIssueCount: (groupId: string | undefined) => number | undefined;
+  issueIdList: string[];
+  quickActions: TRenderQuickActions;
+  isDragDisabled?: boolean;
+  enableQuickIssueCreate?: boolean;
+  disableIssueCreation?: boolean;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  readOnly?: boolean;
+  isMobileView?: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  isEpic?: boolean;
+};
+
+export const CalendarIssueBlocks = observer(function CalendarIssueBlocks(props: Props) {
+  const {
+    date,
+    issueIdList,
+    quickActions,
+    loadMoreIssues,
+    isDragDisabled = false,
+    enableQuickIssueCreate,
+    disableIssueCreation,
+    quickAddCallback,
+    addIssuesToView,
+    readOnly,
+    isMobileView = false,
+    canEditProperties,
+    isEpic = false,
+  } = props;
+  const formattedDatePayload = renderFormattedPayloadDate(date);
+  const { t } = useTranslation();
+
+  const {
+    issues: { getGroupIssueCount, getPaginationData, getIssueLoader },
+  } = useIssuesStore();
+
+  if (!formattedDatePayload) return null;
+
+  const dayIssueCount = getGroupIssueCount(formattedDatePayload, undefined, false);
+  const nextPageResults = getPaginationData(formattedDatePayload, undefined)?.nextPageResults;
+  const isPaginating = !!getIssueLoader(formattedDatePayload);
+
+  const shouldLoadMore =
+    nextPageResults === undefined && dayIssueCount !== undefined
+      ? issueIdList?.length < dayIssueCount
+      : !!nextPageResults;
+
+  return (
+    <>
+      {issueIdList?.map((issueId) => (
+        <div key={issueId} className="relative cursor-pointer p-1 px-2">
+          <CalendarIssueBlockRoot
+            issueId={issueId}
+            quickActions={quickActions}
+            isDragDisabled={isDragDisabled || isMobileView}
+            canEditProperties={canEditProperties}
+            isEpic={isEpic}
+          />
+        </div>
+      ))}
+
+      {isPaginating && (
+        <div className="p-1 px-2">
+          <div className="flex h-10 w-full animate-pulse items-center justify-between gap-1.5 rounded-sm bg-layer-1 px-4 py-1.5 md:h-8 md:px-1" />
+        </div>
+      )}
+
+      {enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
+        <div className="border-b border-subtle px-1 py-1 md:border-none md:px-2">
+          <CalendarQuickAddIssueActions
+            prePopulatedData={{
+              target_date: formattedDatePayload,
+            }}
+            quickAddCallback={quickAddCallback}
+            addIssuesToView={addIssuesToView}
+            isEpic={isEpic}
+          />
+        </div>
+      )}
+
+      {shouldLoadMore && !isPaginating && (
+        <div className="flex items-center px-2.5 py-1">
+          <button
+            type="button"
+            className="w-min rounded-sm px-1.5 py-1 text-11 font-medium whitespace-nowrap text-accent-primary hover:bg-layer-1 hover:text-accent-secondary"
+            onClick={() => loadMoreIssues(formattedDatePayload)}
+          >
+            {t("common.load_more")}
+          </button>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx b/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
new file mode 100644
index 0000000..20b4eec
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+
+import { useTranslation } from "@plane/i18n";
+// plane imports
+import { AddOutline } from "@makeplane/propel/icons";
+import { setPromiseToast } from "@plane/propel/toast";
+import type { ISearchIssueResponse, TIssue } from "@plane/types";
+import { EIssueLayoutTypes } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { QuickAddIssueRoot } from "../quick-add";
+
+type TCalendarQuickAddIssueActions = {
+  prePopulatedData?: Partial<TIssue>;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  onOpen?: () => void;
+  isEpic?: boolean;
+};
+
+export const CalendarQuickAddIssueActions = observer(function CalendarQuickAddIssueActions(
+  props: TCalendarQuickAddIssueActions
+) {
+  const { prePopulatedData, quickAddCallback, addIssuesToView, onOpen, isEpic = false } = props;
+  const { t } = useTranslation();
+  // router
+  const { workspaceSlug, projectId, moduleId } = useParams();
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isExistingIssueModalOpen, setIsExistingIssueModalOpen] = useState(false);
+  const { updateIssue } = useIssueDetail();
+  // derived values
+  const ExistingIssuesListModalPayload = addIssuesToView
+    ? moduleId
+      ? { module: moduleId.toString(), target_date: "none" }
+      : { cycle: true, target_date: "none" }
+    : { target_date: "none" };
+
+  const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const issueIds = data.map((i) => i.id);
+    const addExistingIssuesPromise = Promise.all(
+      data.map((issue) => updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, prePopulatedData ?? {}))
+    ).then(() => addIssuesToView?.(issueIds));
+
+    setPromiseToast(addExistingIssuesPromise, {
+      loading: t("issue.adding", { count: issueIds.length }),
+      success: {
+        title: t("toast.success"),
+        message: () => t("entity.add.success", { entity: t("issue.label", { count: 2 }) }),
+      },
+      error: {
+        title: t("toast.error"),
+        message: (err) => err?.message || t("common.errors.default.message"),
+      },
+    });
+  };
+
+  const handleNewIssue = () => {
+    setIsOpen(true);
+    if (onOpen) onOpen();
+  };
+  const handleExistingIssue = () => {
+    setIsExistingIssueModalOpen(true);
+  };
+
+  if (!projectId) return null;
+
+  return (
+    <>
+      {workspaceSlug && projectId && (
+        <ExistingIssuesListModal
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          isOpen={isExistingIssueModalOpen}
+          handleClose={() => setIsExistingIssueModalOpen(false)}
+          searchParams={ExistingIssuesListModalPayload}
+          handleOnSubmit={handleAddIssuesToView}
+          shouldHideIssue={(issue) => {
+            if (issue.start_date && prePopulatedData?.target_date) {
+              const issueStartDate = new Date(issue.start_date);
+              const targetDate = new Date(prePopulatedData.target_date);
+              const diffInDays = differenceInCalendarDays(targetDate, issueStartDate);
+              if (diffInDays < 0) return true;
+            }
+            return false;
+          }}
+        />
+      )}
+      <QuickAddIssueRoot
+        isQuickAddOpen={isOpen}
+        setIsQuickAddOpen={(isOpen) => setIsOpen(isOpen)}
+        layout={EIssueLayoutTypes.CALENDAR}
+        prePopulatedData={prePopulatedData}
+        quickAddCallback={quickAddCallback}
+        customQuickAddButton={
+          <div
+            className={cn(
+              "overflow-hidden rounded-sm bg-layer-transparent hover:bg-layer-transparent-hover md:opacity-0 md:group-hover:opacity-100",
+              {
+                block: isMenuOpen,
+              }
+            )}
+          >
+            <CustomMenu
+              placement="bottom-start"
+              menuButtonOnClick={() => setIsMenuOpen(true)}
+              onMenuClose={() => setIsMenuOpen(false)}
+              className="w-full"
+              customButtonClassName="w-full"
+              customButton={
+                <div className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-tertiary hover:text-tertiary">
+                  <AddOutline className="h-3.5 w-3.5 flex-shrink-0" />
+                  <span className="flex-shrink-0 text-13 font-medium">
+                    {isEpic ? t("epic.add.label") : t("issue.add.label")}
+                  </span>
+                </div>
+              }
+            >
+              <CustomMenu.MenuItem onClick={handleNewIssue}>
+                {isEpic ? t("epic.add.label") : t("issue.add.label")}
+              </CustomMenu.MenuItem>
+              {!isEpic && (
+                <CustomMenu.MenuItem onClick={handleExistingIssue}>{t("issue.add.existing")}</CustomMenu.MenuItem>
+              )}
+            </CustomMenu>
+          </div>
+        }
+        isEpic={isEpic}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
new file mode 100644
index 0000000..5d98ec5
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { EIssuesStoreType } from "@plane/types";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssues } from "@/hooks/store/use-issues";
+// components
+import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseCalendarRoot } from "../base-calendar-root";
+
+export const CycleCalendarLayout = observer(function CycleCalendarLayout() {
+  const { currentProjectCompletedCycleIds } = useCycle();
+  const { workspaceSlug, projectId, cycleId } = useParams();
+
+  const {
+    issues: { addIssueToCycle },
+  } = useIssues(EIssuesStoreType.CYCLE);
+
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+
+  const addIssuesToView = useCallback(
+    (issueIds: string[]) => {
+      if (!workspaceSlug || !projectId || !cycleId) throw new Error();
+      return addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
+    },
+    [addIssueToCycle, workspaceSlug, projectId, cycleId]
+  );
+
+  if (!cycleId) return null;
+
+  return (
+    <BaseCalendarRoot
+      QuickActions={CycleIssueQuickActions}
+      addIssuesToView={addIssuesToView}
+      isCompletedCycle={isCompletedCycle}
+      viewId={cycleId?.toString()}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx
new file mode 100644
index 0000000..30a1e54
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EIssuesStoreType } from "@plane/types";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+// local imports
+import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseCalendarRoot } from "../base-calendar-root";
+
+export const ModuleCalendarLayout = observer(function ModuleCalendarLayout() {
+  const { workspaceSlug, projectId, moduleId } = useParams();
+
+  const {
+    issues: { addIssuesToModule },
+  } = useIssues(EIssuesStoreType.MODULE);
+
+  const addIssuesToView = useCallback(
+    (issueIds: string[]) => {
+      if (!workspaceSlug || !projectId || !moduleId) throw new Error();
+      return addIssuesToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);
+    },
+    [addIssuesToModule, workspaceSlug, projectId, moduleId]
+  );
+
+  if (!moduleId) return null;
+
+  return (
+    <BaseCalendarRoot
+      QuickActions={ModuleIssueQuickActions}
+      addIssuesToView={addIssuesToView}
+      viewId={moduleId?.toString()}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx
new file mode 100644
index 0000000..4d696b3
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseCalendarRoot } from "../base-calendar-root";
+
+export const CalendarLayout = observer(function CalendarLayout() {
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const canEditPropertiesBasedOnProject = (projectId: string) =>
+    allowPermissions(
+      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      workspaceSlug?.toString(),
+      projectId
+    );
+
+  return (
+    <BaseCalendarRoot
+      QuickActions={ProjectIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/roots/project-view-root.tsx b/apps/web/core/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
new file mode 100644
index 0000000..45c56c5
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// local imports
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseCalendarRoot } from "../base-calendar-root";
+
+export const ProjectViewCalendarLayout = observer(function ProjectViewCalendarLayout() {
+  const { viewId } = useParams();
+
+  return <BaseCalendarRoot QuickActions={ProjectIssueQuickActions} viewId={viewId.toString()} />;
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/utils.ts b/apps/web/core/components/issues/issue-layouts/calendar/utils.ts
new file mode 100644
index 0000000..b795eb9
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/utils.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssue } from "@plane/types";
+
+export const handleDragDrop = async (
+  issueId: string,
+  sourceDate: string,
+  destinationDate: string,
+  workspaceSlug: string | undefined,
+  projectId: string | undefined,
+  updateIssue?: (projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>
+) => {
+  if (!workspaceSlug || !projectId || !updateIssue) return;
+
+  if (sourceDate === destinationDate) return;
+
+  const updatedIssue = {
+    id: issueId,
+    target_date: destinationDate,
+  };
+
+  return await updateIssue(projectId, updatedIssue.id, updatedIssue);
+};
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/week-days.tsx b/apps/web/core/components/issues/issue-layouts/calendar/week-days.tsx
new file mode 100644
index 0000000..5635d6d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/week-days.tsx
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import type { TGroupedIssues, TIssue, TIssueMap, TPaginationData, ICalendarDate, ICalendarWeek } from "@plane/types";
+import { cn, getOrderedDays, renderFormattedPayloadDate } from "@plane/utils";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+// types
+import type { ICycleIssuesFilter } from "@/store/issue/cycle";
+import type { IModuleIssuesFilter } from "@/store/issue/module";
+import type { IProjectIssuesFilter } from "@/store/issue/project";
+import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { CalendarDayTile } from "./day-tile";
+
+type Props = {
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  issues: TIssueMap | undefined;
+  groupedIssueIds: TGroupedIssues;
+  week: ICalendarWeek | undefined;
+  quickActions: TRenderQuickActions;
+  loadMoreIssues: (dateString: string) => void;
+  getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
+  getGroupIssueCount: (groupId: string | undefined) => number | undefined;
+  enableQuickIssueCreate?: boolean;
+  disableIssueCreation?: boolean;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  handleDragAndDrop: (
+    issueId: string | undefined,
+    issueProjectId: string | undefined,
+    sourceDate: string | undefined,
+    destinationDate: string | undefined
+  ) => Promise<void>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  readOnly?: boolean;
+  selectedDate: Date;
+  setSelectedDate: (date: Date) => void;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  isEpic?: boolean;
+};
+
+export const CalendarWeekDays = observer(function CalendarWeekDays(props: Props) {
+  const {
+    issuesFilterStore,
+    issues,
+    groupedIssueIds,
+    handleDragAndDrop,
+    week,
+    loadMoreIssues,
+    getPaginationData,
+    getGroupIssueCount,
+    quickActions,
+    enableQuickIssueCreate,
+    disableIssueCreation,
+    quickAddCallback,
+    addIssuesToView,
+    readOnly = false,
+    selectedDate,
+    setSelectedDate,
+    canEditProperties,
+    isEpic = false,
+  } = props;
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
+
+  const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
+  const showWeekends = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.show_weekends ?? false;
+
+  if (!week) return null;
+
+  const shouldShowDay = (dayDate: Date) => {
+    if (showWeekends) return true;
+    const day = dayDate.getDay();
+    return !(day === 0 || day === 6);
+  };
+
+  const sortedWeekDays = getOrderedDays(Object.values(week), (item) => item.date.getDay(), startOfWeek);
+
+  return (
+    <div
+      className={cn("grid divide-subtle-1 md:divide-x-[0.5px]", {
+        "grid-cols-7": showWeekends,
+        "grid-cols-5": !showWeekends,
+        "h-full": calendarLayout !== "month",
+      })}
+    >
+      {sortedWeekDays.map((date: ICalendarDate) => {
+        if (!shouldShowDay(date.date)) return null;
+
+        return (
+          <CalendarDayTile
+            selectedDate={selectedDate}
+            setSelectedDate={setSelectedDate}
+            issuesFilterStore={issuesFilterStore}
+            key={renderFormattedPayloadDate(date.date)}
+            date={date}
+            issues={issues}
+            groupedIssueIds={groupedIssueIds}
+            loadMoreIssues={loadMoreIssues}
+            getPaginationData={getPaginationData}
+            getGroupIssueCount={getGroupIssueCount}
+            quickActions={quickActions}
+            enableQuickIssueCreate={enableQuickIssueCreate}
+            disableIssueCreation={disableIssueCreation}
+            quickAddCallback={quickAddCallback}
+            addIssuesToView={addIssuesToView}
+            readOnly={readOnly}
+            handleDragAndDrop={handleDragAndDrop}
+            canEditProperties={canEditProperties}
+            isEpic={isEpic}
+          />
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx b/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
new file mode 100644
index 0000000..bcc8b87
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/calendar/week-header.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { EStartOfTheWeek } from "@plane/types";
+import { getOrderedDays } from "@plane/utils";
+import { DAYS_LIST } from "@plane/constants";
+// helpers
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+
+type Props = {
+  isLoading: boolean;
+  showWeekends: boolean;
+};
+
+export const CalendarWeekHeader = observer(function CalendarWeekHeader(props: Props) {
+  const { isLoading, showWeekends } = props;
+  // hooks
+  const { data } = useUserProfile();
+  const startOfWeek = data?.start_of_the_week;
+
+  // derived
+  const orderedDays = getOrderedDays(Object.values(DAYS_LIST), (item) => item.value, startOfWeek);
+
+  return (
+    <div
+      className={`relative sticky top-0 z-[1] grid divide-subtle-1 text-13 font-medium md:divide-x-[0.5px] ${
+        showWeekends ? "grid-cols-7" : "grid-cols-5"
+      }`}
+    >
+      {isLoading && (
+        <div className="absolute h-[1.5px] w-3/4 animate-[bar-loader_2s_linear_infinite] bg-accent-primary" />
+      )}
+      {orderedDays.map((day) => {
+        if (!showWeekends && (day.value === EStartOfTheWeek.SUNDAY || day.value === EStartOfTheWeek.SATURDAY))
+          return null;
+
+        return (
+          <div key={day.shortTitle} className="flex h-11 items-center justify-center bg-layer-1 px-4 md:justify-end">
+            {day.shortTitle}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
new file mode 100644
index 0000000..8ae22d8
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+export const ProjectArchivedEmptyState = observer(function ProjectArchivedEmptyState() {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const archivedWorkItemFilter = useWorkItemFilterInstance(EIssuesStoreType.ARCHIVED, projectId);
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <div className="relative h-full w-full overflow-y-auto">
+      {archivedWorkItemFilter?.hasActiveFilters ? (
+        <EmptyStateDetailed
+          assetKey="search"
+          title={t("common_empty_state.search.title")}
+          description={t("common_empty_state.search.description")}
+          actions={[
+            {
+              label: "Clear filters",
+              onClick: archivedWorkItemFilter?.clearFilters,
+              disabled: !canPerformEmptyStateActions || !archivedWorkItemFilter,
+              variant: "secondary",
+            },
+          ]}
+        />
+      ) : (
+        <EmptyStateDetailed
+          assetKey="archived-work-item"
+          title={t("workspace_empty_state.archive_work_items.title")}
+          description={t("workspace_empty_state.archive_work_items.description")}
+          actions={[
+            {
+              label: t("workspace_empty_state.archive_work_items.cta_primary"),
+              onClick: () => router.push(`/${workspaceSlug}/settings/projects/${projectId}/automations`),
+              disabled: !canPerformEmptyStateActions,
+              variant: "primary",
+            },
+          ]}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
new file mode 100644
index 0000000..e6d143f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ISearchIssueResponse } from "@plane/types";
+import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
+// components
+import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
+
+export const CycleEmptyState = observer(function CycleEmptyState() {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, cycleId: routerCycleId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
+  const cycleId = routerCycleId ? routerCycleId.toString() : undefined;
+  // states
+  const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { getCycleById } = useCycle();
+  const { issues } = useIssues(EIssuesStoreType.CYCLE);
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const cycleWorkItemFilter = useWorkItemFilterInstance(EIssuesStoreType.CYCLE, cycleId);
+  const cycleDetails = cycleId ? getCycleById(cycleId) : undefined;
+  const isCompletedCycleSnapshotAvailable = !isEmpty(cycleDetails?.progress_snapshot ?? {});
+  const isCompletedAndEmpty = isCompletedCycleSnapshotAvailable || cycleDetails?.status?.toLowerCase() === "completed";
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    const issueIds = data.map((i) => i.id);
+
+    await issues
+      .addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Work items added to the cycle successfully.",
+        })
+      )
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Selected work items could not be added to the cycle. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div className="relative h-full w-full overflow-y-auto">
+      <ExistingIssuesListModal
+        workspaceSlug={workspaceSlug?.toString()}
+        projectId={projectId?.toString()}
+        isOpen={cycleIssuesListModal}
+        handleClose={() => setCycleIssuesListModal(false)}
+        searchParams={{ cycle: true }}
+        handleOnSubmit={handleAddIssuesToCycle}
+      />
+      <div className="grid h-full w-full place-items-center">
+        {isCompletedAndEmpty ? (
+          // TODO: Empty state ux copy needs to be updated
+          <EmptyStateDetailed
+            assetKey="work-item"
+            title={t("project_cycles.empty_state.completed_no_issues.title")}
+            description={t("project_cycles.empty_state.completed_no_issues.description")}
+          />
+        ) : cycleWorkItemFilter?.hasActiveFilters ? (
+          <EmptyStateDetailed
+            assetKey="search"
+            title={t("common_empty_state.search.title")}
+            description={t("common_empty_state.search.description")}
+            actions={[
+              {
+                label: "Clear filters",
+                onClick: cycleWorkItemFilter?.clearFilters,
+                disabled: !canPerformEmptyStateActions || !cycleWorkItemFilter,
+                variant: "secondary",
+              },
+            ]}
+          />
+        ) : (
+          <EmptyStateDetailed
+            assetKey="work-item"
+            title={t("project_empty_state.cycle_work_items.title")}
+            description={t("project_empty_state.cycle_work_items.description")}
+            actions={[
+              {
+                label: t("project_empty_state.cycle_work_items.cta_primary"),
+                onClick: () => {
+                  toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
+                },
+                disabled: !canPerformEmptyStateActions,
+                variant: "primary",
+              },
+              {
+                label: t("project_empty_state.cycle_work_items.cta_secondary"),
+                onClick: () => setCycleIssuesListModal(true),
+                disabled: !canPerformEmptyStateActions,
+                variant: "secondary",
+              },
+            ]}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
new file mode 100644
index 0000000..9be06fa
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EIssuesStoreType, EUserWorkspaceRoles } from "@plane/types";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+
+export const GlobalViewEmptyState = observer(function GlobalViewEmptyState() {
+  // plane imports
+  const { t } = useTranslation();
+  // store hooks
+  const { workspaceProjectIds } = useProject();
+  const { toggleCreateIssueModal, toggleCreateProjectModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const hasMemberLevelPermission = allowPermissions(
+    [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  if (workspaceProjectIds?.length === 0) {
+    return (
+      <EmptyStateDetailed
+        title={t("workspace_projects.empty_state.no_projects.title")}
+        description={t("workspace_projects.empty_state.no_projects.description")}
+        assetKey="project"
+        assetClassName="size-40"
+        actions={[
+          {
+            label: t("workspace_projects.empty_state.no_projects.primary_button.text"),
+            onClick: () => {
+              toggleCreateProjectModal(true);
+            },
+            disabled: !hasMemberLevelPermission,
+            variant: "primary",
+          },
+        ]}
+      />
+    );
+  }
+
+  return (
+    <EmptyStateDetailed
+      title={t(`workspace_empty_state.views.title`)}
+      description={t(`workspace_empty_state.views.description`)}
+      assetKey="project"
+      assetClassName="size-40"
+      actions={[
+        {
+          label: t(`workspace_empty_state.views.cta_primary`),
+          onClick: () => {
+            toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+          },
+          disabled: !hasMemberLevelPermission,
+          variant: "primary",
+        },
+      ]}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/index.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/index.tsx
new file mode 100644
index 0000000..1be930b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/index.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane web components
+import { EIssuesStoreType } from "@plane/types";
+// components
+import { ProjectArchivedEmptyState } from "./archived-issues";
+import { CycleEmptyState } from "./cycle";
+import { GlobalViewEmptyState } from "./global-view";
+import { ModuleEmptyState } from "./module";
+import { ProfileViewEmptyState } from "./profile-view";
+import { ProjectEpicsEmptyState } from "./project-epic";
+import { ProjectEmptyState } from "./project-issues";
+import { ProjectViewEmptyState } from "./project-view";
+
+interface Props {
+  storeType: EIssuesStoreType;
+}
+
+export function IssueLayoutEmptyState(props: Props) {
+  switch (props.storeType) {
+    case EIssuesStoreType.PROJECT:
+      return <ProjectEmptyState />;
+    case EIssuesStoreType.PROJECT_VIEW:
+      return <ProjectViewEmptyState />;
+    case EIssuesStoreType.ARCHIVED:
+      return <ProjectArchivedEmptyState />;
+    case EIssuesStoreType.CYCLE:
+      return <CycleEmptyState />;
+    case EIssuesStoreType.MODULE:
+      return <ModuleEmptyState />;
+    case EIssuesStoreType.GLOBAL:
+      return <GlobalViewEmptyState />;
+    case EIssuesStoreType.PROFILE:
+      return <ProfileViewEmptyState />;
+    case EIssuesStoreType.EPIC:
+      return <ProjectEpicsEmptyState />;
+    default:
+      return null;
+  }
+}
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
new file mode 100644
index 0000000..6c0022d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/module.tsx
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ISearchIssueResponse } from "@plane/types";
+import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
+// components
+import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
+
+export const ModuleEmptyState = observer(function ModuleEmptyState() {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, moduleId: routerModuleId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
+  const moduleId = routerModuleId ? routerModuleId.toString() : undefined;
+  // states
+  const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { issues } = useIssues(EIssuesStoreType.MODULE);
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const moduleWorkItemFilter = useWorkItemFilterInstance(EIssuesStoreType.MODULE, moduleId);
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    const issueIds = data.map((i) => i.id);
+    await issues
+      .addIssuesToModule(workspaceSlug.toString(), projectId?.toString(), moduleId.toString(), issueIds)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Work items added to the module successfully.",
+        })
+      )
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Selected work items could not be added to the module. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div className="relative h-full w-full overflow-y-auto">
+      <ExistingIssuesListModal
+        workspaceSlug={workspaceSlug?.toString()}
+        projectId={projectId?.toString()}
+        isOpen={moduleIssuesListModal}
+        handleClose={() => setModuleIssuesListModal(false)}
+        searchParams={{ module: moduleId != undefined ? moduleId.toString() : "" }}
+        handleOnSubmit={handleAddIssuesToModule}
+      />
+      <div className="grid h-full w-full place-items-center">
+        {moduleWorkItemFilter?.hasActiveFilters ? (
+          <EmptyStateDetailed
+            assetKey="search"
+            title={t("common_empty_state.search.title")}
+            description={t("common_empty_state.search.description")}
+            actions={[
+              {
+                label: "Clear filters",
+                onClick: moduleWorkItemFilter?.clearFilters,
+                disabled: !canPerformEmptyStateActions || !moduleWorkItemFilter,
+                variant: "secondary",
+              },
+            ]}
+          />
+        ) : (
+          <EmptyStateDetailed
+            assetKey="work-item"
+            title={t("project_empty_state.module_work_items.title")}
+            description={t("project_empty_state.module_work_items.description")}
+            actions={[
+              {
+                label: t("project_empty_state.module_work_items.cta_primary"),
+                onClick: () => {
+                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
+                },
+                disabled: !canPerformEmptyStateActions,
+                variant: "primary",
+              },
+              {
+                label: t("project_empty_state.module_work_items.cta_secondary"),
+                onClick: () => setModuleIssuesListModal(true),
+                disabled: !canPerformEmptyStateActions,
+                variant: "secondary",
+              },
+            ]}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
new file mode 100644
index 0000000..9d6283a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+
+// TODO: If projectViewId changes, everything breaks. Figure out a better way to handle this.
+export const ProfileViewEmptyState = observer(function ProfileViewEmptyState() {
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { profileViewId } = useParams();
+
+  if (!profileViewId) return null;
+
+  return (
+    <EmptyStateDetailed
+      assetKey="work-item"
+      title={t(`profile.empty_state.${profileViewId.toString()}.title`)}
+      description={t(`profile.empty_state.${profileViewId.toString()}.description`)}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx
new file mode 100644
index 0000000..83d332a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export function ProjectEpicsEmptyState() {
+  return <></>;
+}
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
new file mode 100644
index 0000000..dd9ab17
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EIssuesStoreType, EUserProjectRoles } from "@plane/types";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
+
+export const ProjectEmptyState = observer(function ProjectEmptyState() {
+  // router
+  const { projectId: routerProjectId } = useParams();
+  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
+  // plane imports
+  const { t } = useTranslation();
+  // store hooks
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const projectWorkItemFilter = useWorkItemFilterInstance(EIssuesStoreType.PROJECT, projectId);
+
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <div className="relative h-full w-full overflow-y-auto">
+      {projectWorkItemFilter?.hasActiveFilters ? (
+        <EmptyStateDetailed
+          assetKey="search"
+          title={t("common_empty_state.search.title")}
+          description={t("common_empty_state.search.description")}
+          actions={[
+            {
+              label: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),
+              onClick: projectWorkItemFilter?.clearFilters,
+              disabled: !canPerformEmptyStateActions || !projectWorkItemFilter,
+              variant: "secondary",
+            },
+          ]}
+        />
+      ) : (
+        <EmptyStateDetailed
+          assetKey="work-item"
+          title={t("project_empty_state.work_items.title")}
+          description={t("project_empty_state.work_items.description")}
+          actions={[
+            {
+              label: t("project_empty_state.work_items.cta_primary"),
+              onClick: () => {
+                toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+              },
+              disabled: !canPerformEmptyStateActions,
+              variant: "primary",
+            },
+          ]}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx b/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
new file mode 100644
index 0000000..4bcfa8f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EIssuesStoreType } from "@plane/types";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useUserPermissions } from "@/hooks/store/user";
+
+export const ProjectViewEmptyState = observer(function ProjectViewEmptyState() {
+  // store hooks
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+
+  // auth
+  const isCreatingIssueAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    // TODO: Add translation
+    <EmptyStateDetailed
+      assetKey="work-item"
+      title="View work items will appear here"
+      description="Work items help you track individual pieces of work. With work items, keep track of what's going on, who is working on it, and what's done."
+      actions={[
+        {
+          label: "New work item",
+          onClick: () => {
+            toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
+          },
+          disabled: !isCreatingIssueAllowed,
+          variant: "primary",
+        },
+      ]}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
new file mode 100644
index 0000000..5ee18b0
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { CycleGroupIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TCycleGroups } from "@plane/types";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+// ui
+// types
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedCycleFilters = observer(function AppliedCycleFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const { getCycleById } = useCycle();
+
+  return (
+    <>
+      {values.map((cycleId) => {
+        const cycleDetails = getCycleById(cycleId) ?? null;
+
+        if (!cycleDetails) return null;
+
+        const cycleStatus = (cycleDetails?.status ? cycleDetails?.status.toLocaleLowerCase() : "draft") as TCycleGroups;
+
+        return (
+          <div key={cycleId} className="flex items-center gap-1 truncate rounded-sm bg-layer-1 p-1 text-11">
+            <CycleGroupIcon cycleGroup={cycleStatus} className="h-3 w-3 flex-shrink-0" />
+            <span className="truncate normal-case">{cycleDetails.name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(cycleId)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
new file mode 100644
index 0000000..e8cad0e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// icons
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+import { CloseOutline } from "@makeplane/propel/icons";
+// helpers
+import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
+// constants
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
+  const { handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_AFTER_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          <button
+            type="button"
+            className="grid place-items-center text-tertiary hover:text-secondary"
+            onClick={() => handleRemove(date)}
+          >
+            <CloseOutline height={10} width={10} />
+          </button>
+        </div>
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/index.ts b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/index.ts
new file mode 100644
index 0000000..0f2f688
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/index.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./date";
+export * from "./label";
+export * from "./members";
+export * from "./priority";
+export * from "./project";
+export * from "./module";
+export * from "./cycle";
+export * from "./state";
+export * from "./state-group";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
new file mode 100644
index 0000000..bd11e47
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// icons
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { IIssueLabel } from "@plane/types";
+// types
+
+type Props = {
+  handleRemove: (val: string) => void;
+  labels: IIssueLabel[] | undefined;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedLabelsFilters = observer(function AppliedLabelsFilters(props: Props) {
+  const { handleRemove, labels, values, editable } = props;
+
+  return (
+    <>
+      {values.map((labelId) => {
+        const labelDetails = labels?.find((l) => l.id === labelId);
+
+        if (!labelDetails) return null;
+
+        return (
+          <div key={labelId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <span
+              className="h-1.5 w-1.5 rounded-full"
+              style={{
+                backgroundColor: labelDetails.color,
+              }}
+            />
+            <span className="normal-case">{labelDetails.name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(labelId)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
new file mode 100644
index 0000000..73a53ca
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { CloseOutline } from "@makeplane/propel/icons";
+// helpers
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedMembersFilters = observer(function AppliedMembersFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+
+  const {
+    workspace: { getWorkspaceMemberDetails },
+  } = useMember();
+
+  return (
+    <>
+      {values.map((memberId) => {
+        const memberDetails = getWorkspaceMemberDetails(memberId)?.member;
+
+        if (!memberDetails) return null;
+
+        return (
+          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <Avatar
+              alt={memberDetails.display_name}
+              fallback={memberDetails.display_name?.[0]?.toUpperCase()}
+              src={getFileURL(memberDetails.avatar_url)}
+              size="2xs"
+            />
+            <span className="normal-case">{memberDetails.display_name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(memberId)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
new file mode 100644
index 0000000..e142846
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import { CloseOutline, ModuleOutline } from "@makeplane/propel/icons";
+import { useModule } from "@/hooks/store/use-module";
+// ui
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedModuleFilters = observer(function AppliedModuleFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const { getModuleById } = useModule();
+
+  return (
+    <>
+      {values.map((moduleId) => {
+        const moduleDetails = getModuleById(moduleId) ?? null;
+
+        if (!moduleDetails) return null;
+
+        return (
+          <div key={moduleId} className="flex items-center gap-1 truncate rounded-sm bg-layer-1 p-1 text-11">
+            <ModuleOutline className="h-3 w-3 flex-shrink-0" />
+            <span className="truncate normal-case">{moduleDetails.name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(moduleId)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
new file mode 100644
index 0000000..7f9f113
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// icons
+import { PriorityIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TIssuePriorities } from "@plane/types";
+// types
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedPriorityFilters = observer(function AppliedPriorityFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+
+  return (
+    <>
+      {values.map((priority) => (
+        <div key={priority} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+          <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} />
+          {priority}
+          {editable && (
+            <button
+              type="button"
+              className="grid place-items-center text-tertiary hover:text-secondary"
+              onClick={() => handleRemove(priority)}
+            >
+              <CloseOutline height={10} width={10} />
+            </button>
+          )}
+        </div>
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
new file mode 100644
index 0000000..0baaccd
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { CloseOutline } from "@makeplane/propel/icons";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedProjectFilters = observer(function AppliedProjectFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const { projectMap } = useProject();
+
+  return (
+    <>
+      {values.map((projectId) => {
+        const projectDetails = projectMap?.[projectId] ?? null;
+
+        if (!projectDetails) return null;
+
+        return (
+          <div key={projectId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
+              <Logo logo={projectDetails.logo_props} size={12} />
+            </span>
+            <span className="normal-case">{projectDetails.name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(projectId)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
new file mode 100644
index 0000000..9abdf66
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// icons
+import { EIconSize } from "@plane/constants";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TStateGroups } from "@plane/types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedStateGroupFilters = observer(function AppliedStateGroupFilters(props: Props) {
+  const { handleRemove, values } = props;
+
+  return (
+    <>
+      {values.map((stateGroup) => (
+        <div key={stateGroup} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+          <StateGroupIcon stateGroup={stateGroup as TStateGroups} size={EIconSize.SM} />
+          {stateGroup}
+          <button
+            type="button"
+            className="grid place-items-center text-tertiary hover:text-secondary"
+            onClick={() => handleRemove(stateGroup)}
+          >
+            <CloseOutline height={10} width={10} />
+          </button>
+        </div>
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
new file mode 100644
index 0000000..5b04e9b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// icons
+// plane imports
+import { EIconSize } from "@plane/constants";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { IState } from "@plane/types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  states: IState[];
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedStateFilters = observer(function AppliedStateFilters(props: Props) {
+  const { handleRemove, states, values, editable } = props;
+
+  return (
+    <>
+      {values.map((stateId) => {
+        const stateDetails = states?.find((s) => s.id === stateId);
+
+        if (!stateDetails) return null;
+
+        return (
+          <div key={stateId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <StateGroupIcon
+              color={stateDetails.color}
+              stateGroup={stateDetails.group}
+              size={EIconSize.SM}
+              percentage={stateDetails?.order}
+            />
+            {stateDetails.name}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(stateId)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
new file mode 100644
index 0000000..40ad2d1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  ILayoutDisplayFiltersOptions,
+  TIssueGroupByOptions,
+} from "@plane/types";
+// components
+import {
+  FilterDisplayProperties,
+  FilterExtraOptions,
+  FilterGroupBy,
+  FilterOrderBy,
+  FilterSubGroupBy,
+} from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions | undefined;
+  displayProperties: IIssueDisplayProperties;
+  handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
+  handleDisplayPropertiesUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+  ignoreGroupedFilters?: Partial<TIssueGroupByOptions>[];
+  cycleViewDisabled?: boolean;
+  moduleViewDisabled?: boolean;
+  isEpic?: boolean;
+};
+
+export const DisplayFiltersSelection = observer(function DisplayFiltersSelection(props: Props) {
+  const {
+    displayFilters,
+    displayProperties,
+    handleDisplayFiltersUpdate,
+    handleDisplayPropertiesUpdate,
+    layoutDisplayFiltersOptions,
+    ignoreGroupedFilters = [],
+    cycleViewDisabled = false,
+    moduleViewDisabled = false,
+    isEpic = false,
+  } = props;
+
+  const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
+    Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
+
+  const computedIgnoreGroupedFilters: Partial<TIssueGroupByOptions>[] = [];
+  if (cycleViewDisabled) {
+    ignoreGroupedFilters.push("cycle");
+  }
+  if (moduleViewDisabled) {
+    ignoreGroupedFilters.push("module");
+  }
+
+  return (
+    <div className="vertical-scrollbar relative scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-hidden overflow-y-auto px-2.5">
+      {/* display properties */}
+      {layoutDisplayFiltersOptions?.display_properties && layoutDisplayFiltersOptions.display_properties.length > 0 && (
+        <div className="py-2">
+          <FilterDisplayProperties
+            displayProperties={displayProperties}
+            displayPropertiesToRender={layoutDisplayFiltersOptions.display_properties}
+            handleUpdate={handleDisplayPropertiesUpdate}
+            cycleViewDisabled={cycleViewDisabled}
+            moduleViewDisabled={moduleViewDisabled}
+            isEpic={isEpic}
+          />
+        </div>
+      )}
+
+      {/* group by */}
+      {isDisplayFilterEnabled("group_by") && (
+        <div className="py-2">
+          <FilterGroupBy
+            displayFilters={displayFilters}
+            groupByOptions={layoutDisplayFiltersOptions?.display_filters.group_by ?? []}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                group_by: val,
+              })
+            }
+            ignoreGroupedFilters={[...ignoreGroupedFilters, ...computedIgnoreGroupedFilters]}
+          />
+        </div>
+      )}
+
+      {/* sub-group by */}
+      {isDisplayFilterEnabled("sub_group_by") &&
+        displayFilters?.group_by !== null &&
+        displayFilters?.layout === "kanban" && (
+          <div className="py-2">
+            <FilterSubGroupBy
+              displayFilters={displayFilters}
+              handleUpdate={(val) =>
+                handleDisplayFiltersUpdate({
+                  sub_group_by: val,
+                })
+              }
+              subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
+              ignoreGroupedFilters={[...ignoreGroupedFilters, ...computedIgnoreGroupedFilters]}
+            />
+          </div>
+        )}
+
+      {/* order by */}
+      {isDisplayFilterEnabled("order_by") && !isEmpty(layoutDisplayFiltersOptions?.display_filters?.order_by) && (
+        <div className="py-2">
+          <FilterOrderBy
+            selectedOrderBy={displayFilters?.order_by}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                order_by: val,
+              })
+            }
+            orderByOptions={layoutDisplayFiltersOptions?.display_filters.order_by ?? []}
+          />
+        </div>
+      )}
+
+      {/* Options */}
+      {layoutDisplayFiltersOptions?.extra_options.access && (
+        <div className="py-2">
+          <FilterExtraOptions
+            selectedExtraOptions={{
+              show_empty_groups: displayFilters?.show_empty_groups ?? true,
+              sub_issue: displayFilters?.sub_issue ?? true,
+            }}
+            handleUpdate={(key, val) =>
+              handleDisplayFiltersUpdate({
+                [key]: val,
+              })
+            }
+            enabledExtraOptions={layoutDisplayFiltersOptions?.extra_options.values}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
new file mode 100644
index 0000000..3eeccb5
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane constants
+import { ISSUE_DISPLAY_PROPERTIES } from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import type { IIssueDisplayProperties } from "@plane/types";
+// components
+import { FilterHeader } from "../helpers/filter-header";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  displayPropertiesToRender: (keyof IIssueDisplayProperties)[];
+  handleUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
+  cycleViewDisabled?: boolean;
+  moduleViewDisabled?: boolean;
+  isEpic?: boolean;
+};
+
+export const FilterDisplayProperties = observer(function FilterDisplayProperties(props: Props) {
+  const {
+    displayProperties,
+    displayPropertiesToRender,
+    handleUpdate,
+    cycleViewDisabled = false,
+    moduleViewDisabled = false,
+    isEpic = false,
+  } = props;
+  // hooks
+  const { t } = useTranslation();
+  // states
+  const [previewEnabled, setPreviewEnabled] = React.useState(true);
+
+  // Filter out "cycle" and "module" keys if cycleViewDisabled or moduleViewDisabled is true
+  // Also filter out display properties that should not be rendered
+  const filteredDisplayProperties = ISSUE_DISPLAY_PROPERTIES.filter((property) => {
+    if (!displayPropertiesToRender.includes(property.key)) return false;
+    switch (property.key) {
+      case "cycle":
+        return !cycleViewDisabled;
+      case "modules":
+        return !moduleViewDisabled;
+      default:
+        return true;
+    }
+  }).map((property) => {
+    if (isEpic && property.key === "sub_issue_count") {
+      return { ...property, titleTranslationKey: "issue.display.properties.work_item_count" };
+    }
+    return property;
+  });
+
+  return (
+    <>
+      <FilterHeader
+        title={t("issue.display.properties.label")}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div className="mt-1 flex flex-wrap items-center gap-2">
+          {filteredDisplayProperties.map((displayProperty) => (
+            <>
+              <button
+                key={displayProperty.key}
+                type="button"
+                className={`rounded-sm border px-2 py-0.5 text-11 transition-all ${
+                  displayProperties?.[displayProperty.key]
+                    ? "border-accent-strong bg-accent-primary text-on-color"
+                    : "border-subtle hover:bg-layer-1"
+                }`}
+                onClick={() =>
+                  handleUpdate({
+                    [displayProperty.key]: !displayProperties?.[displayProperty.key],
+                  })
+                }
+              >
+                {t(displayProperty.titleTranslationKey)}
+              </button>
+            </>
+          ))}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
new file mode 100644
index 0000000..7daaec7
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { IIssueDisplayFilterOptions, TIssueExtraOptions } from "@plane/types";
+// components
+import { FilterOption } from "@/components/issues/issue-layouts/filters";
+
+// constants
+const ISSUE_EXTRA_OPTIONS: {
+  key: TIssueExtraOptions;
+  titleTranslationKey: string;
+}[] = [
+  {
+    key: "sub_issue",
+    titleTranslationKey: "issue.display.extra.show_sub_issues",
+  }, // in spreadsheet its always false
+  {
+    key: "show_empty_groups",
+    titleTranslationKey: "issue.display.extra.show_empty_groups",
+  }, // filter on front-end
+];
+
+type Props = {
+  selectedExtraOptions: {
+    sub_issue: boolean;
+    show_empty_groups: boolean;
+  };
+  handleUpdate: (key: keyof IIssueDisplayFilterOptions, val: boolean) => void;
+  enabledExtraOptions: TIssueExtraOptions[];
+};
+
+export const FilterExtraOptions = observer(function FilterExtraOptions(props: Props) {
+  const { selectedExtraOptions, handleUpdate, enabledExtraOptions } = props;
+  // hooks
+  const { t } = useTranslation();
+  const isExtraOptionEnabled = (option: TIssueExtraOptions) => enabledExtraOptions.includes(option);
+
+  return (
+    <div>
+      {ISSUE_EXTRA_OPTIONS.map((option) => {
+        if (!isExtraOptionEnabled(option.key)) return null;
+
+        return (
+          <FilterOption
+            key={option.key}
+            isChecked={selectedExtraOptions?.[option.key] ? true : false}
+            onClick={() => handleUpdate(option.key, !selectedExtraOptions?.[option.key])}
+            title={t(option.titleTranslationKey)}
+          />
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
new file mode 100644
index 0000000..415759e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "@plane/types";
+// helpers
+import { useGroupByOptions } from "../../../utils";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions | undefined;
+  groupByOptions: TIssueGroupByOptions[];
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+  ignoreGroupedFilters: Partial<TIssueGroupByOptions>[];
+};
+
+export const FilterGroupBy = observer(function FilterGroupBy(props: Props) {
+  const { displayFilters, groupByOptions, handleUpdate, ignoreGroupedFilters } = props;
+  // hooks
+  const { t } = useTranslation();
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const selectedGroupBy = displayFilters?.group_by ?? null;
+  const selectedSubGroupBy = displayFilters?.sub_group_by ?? null;
+
+  const options = useGroupByOptions(groupByOptions);
+
+  return (
+    <>
+      <FilterHeader
+        title={t("common.group_by")}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {options.map((groupBy) => {
+            if (
+              displayFilters?.layout === "kanban" &&
+              selectedSubGroupBy !== null &&
+              groupBy.key === selectedSubGroupBy
+            )
+              return null;
+            if (ignoreGroupedFilters.includes(groupBy?.key)) return null;
+
+            return (
+              <FilterOption
+                key={groupBy?.key}
+                isChecked={selectedGroupBy === groupBy?.key}
+                onClick={() => handleUpdate(groupBy.key)}
+                title={t(groupBy.titleTranslationKey)}
+                multiple={false}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts
new file mode 100644
index 0000000..7f9e735
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./display-filters-selection";
+export * from "./display-properties";
+export * from "./extra-options";
+export * from "./group-by";
+export * from "./order-by";
+export * from "./sub-group-by";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
new file mode 100644
index 0000000..8905f85
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { ISSUE_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TIssueOrderByOptions } from "@plane/types";
+
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  selectedOrderBy: TIssueOrderByOptions | undefined;
+  handleUpdate: (val: TIssueOrderByOptions) => void;
+  orderByOptions: TIssueOrderByOptions[];
+};
+
+export const FilterOrderBy = observer(function FilterOrderBy(props: Props) {
+  const { selectedOrderBy, handleUpdate, orderByOptions } = props;
+  // hooks
+  const { t } = useTranslation();
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const activeOrderBy = selectedOrderBy ?? "-created_at";
+
+  return (
+    <>
+      <FilterHeader
+        title={t("common.order_by.label")}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_ORDER_BY_OPTIONS.filter((option) => orderByOptions.includes(option.key)).map((orderBy) => (
+            <FilterOption
+              key={orderBy?.key}
+              isChecked={activeOrderBy === orderBy?.key ? true : false}
+              onClick={() => handleUpdate(orderBy.key)}
+              title={t(orderBy.titleTranslationKey)}
+              multiple={false}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
new file mode 100644
index 0000000..c367b6f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { ISSUE_GROUP_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "@plane/types";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// constants
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+  subGroupByOptions: TIssueGroupByOptions[];
+  ignoreGroupedFilters: Partial<TIssueGroupByOptions>[];
+};
+
+export const FilterSubGroupBy = observer(function FilterSubGroupBy(props: Props) {
+  // hooks
+  const { t } = useTranslation();
+
+  const { displayFilters, handleUpdate, subGroupByOptions, ignoreGroupedFilters } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const selectedGroupBy = displayFilters.group_by ?? null;
+  const selectedSubGroupBy = displayFilters.sub_group_by ?? null;
+
+  return (
+    <>
+      <FilterHeader
+        title="Sub-group by"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_GROUP_BY_OPTIONS.filter((option) => subGroupByOptions.includes(option.key)).map((subGroupBy) => {
+            if (selectedGroupBy !== null && subGroupBy.key === selectedGroupBy) return null;
+            if (ignoreGroupedFilters.includes(subGroupBy?.key)) return null;
+
+            return (
+              <FilterOption
+                key={subGroupBy?.key}
+                isChecked={selectedSubGroupBy === subGroupBy?.key ? true : false}
+                onClick={() => handleUpdate(subGroupBy.key)}
+                title={t(subGroupBy.titleTranslationKey)}
+                multiple={false}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
new file mode 100644
index 0000000..33d3245
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterAssignees = observer(function FilterAssignees(props: Props) {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Assignee${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`assignees-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          alt={member.display_name}
+                          fallback={member.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(member.avatar_url)}
+                          size="xs"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
new file mode 100644
index 0000000..f626743
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Created by${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`created-by-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          alt={member.display_name}
+                          fallback={member.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(member.avatar_url)}
+                          size="xs"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
new file mode 100644
index 0000000..1368fee
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/cycle.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { CycleGroupIcon } from "@plane/propel/icons";
+import type { TCycleGroups } from "@plane/types";
+// components
+import { Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+import { useCycle } from "@/hooks/store/use-cycle";
+// ui
+// types
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterCycle = observer(function FilterCycle(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  // hooks
+  const { projectId } = useParams();
+  const { getCycleById, getProjectCycleIds } = useCycle();
+
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const cycleIds = projectId ? getProjectCycleIds(projectId.toString()) : undefined;
+  const cycles = cycleIds?.map((projectId) => getCycleById(projectId)!) ?? null;
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (cycles || []).filter((cycle) =>
+      cycle.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (cycle) => !appliedFilters?.includes(cycle.id),
+      (cycle) => cycle.name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  const cycleStatus = (status: TCycleGroups | undefined) =>
+    (status ? status.toLocaleLowerCase() : "draft") as TCycleGroups;
+
+  return (
+    <>
+      <FilterHeader
+        title={`Cycle ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((cycle) => (
+                  <FilterOption
+                    key={cycle.id}
+                    isChecked={appliedFilters?.includes(cycle.id) ? true : false}
+                    onClick={() => handleUpdate(cycle.id)}
+                    icon={
+                      <CycleGroupIcon cycleGroup={cycleStatus(cycle?.status)} className="h-3.5 w-3.5 flex-shrink-0" />
+                    }
+                    title={cycle.name}
+                    activePulse={cycleStatus(cycle?.status) === "current" ? true : false}
+                  />
+                ))}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx
new file mode 100644
index 0000000..1079c55
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/due-date.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+// components
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterDueDate = observer(function FilterDueDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isCustomFateApplied = appliedFilters?.filter((f) => f.includes("-")) || [];
+    return isCustomFateApplied.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Due date"
+        />
+      )}
+      <FilterHeader
+        title={`Due date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/index.ts b/apps/web/core/components/issues/issue-layouts/filters/header/filters/index.ts
new file mode 100644
index 0000000..24a2444
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/index.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./assignee";
+export * from "./mentions";
+export * from "./created-by";
+export * from "./due-date";
+export * from "./labels";
+export * from "./priority";
+export * from "./project";
+export * from "./start-date";
+export * from "./state-group";
+export * from "./state";
+export * from "./cycle";
+export * from "./module";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
new file mode 100644
index 0000000..f68b775
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+import type { IIssueLabel } from "@plane/types";
+// components
+import { Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+// ui
+// types
+
+function LabelIcons({ color }: { color: string }) {
+  return <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />;
+}
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  labels: IIssueLabel[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLabels = observer(function FilterLabels(props: Props) {
+  const { appliedFilters, handleUpdate, labels, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (labels || []).filter((label) =>
+      label.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (label) => !(appliedFilters ?? []).includes(label.id),
+      (label) => label.name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Label${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((label) => (
+                  <FilterOption
+                    key={label?.id}
+                    isChecked={appliedFilters?.includes(label?.id) ? true : false}
+                    onClick={() => handleUpdate(label?.id)}
+                    icon={<LabelIcons color={label.color} />}
+                    title={label.name}
+                  />
+                ))}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
new file mode 100644
index 0000000..d872a33
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/mentions.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMentions = observer(function FilterMentions(props: Props) {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Mention${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`mentions-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          alt={member?.display_name}
+                          fallback={member?.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(member?.avatar_url)}
+                          size="xs"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
new file mode 100644
index 0000000..2757c50
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import { ModuleOutline } from "@makeplane/propel/icons";
+import { Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+import { useModule } from "@/hooks/store/use-module";
+// ui
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterModule = observer(function FilterModule(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // hooks
+  const { projectId } = useParams();
+  const { getModuleById, getProjectModuleIds } = useModule();
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const moduleIds = projectId ? getProjectModuleIds(projectId.toString()) : undefined;
+  const modules = moduleIds?.map((moduleId) => getModuleById(moduleId)!) ?? null;
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (modules || []).filter((module) =>
+      module.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (module) => !appliedFilters?.includes(module.id),
+      (module) => module.name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Module ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((cycle) => (
+                  <FilterOption
+                    key={cycle.id}
+                    isChecked={appliedFilters?.includes(cycle.id) ? true : false}
+                    onClick={() => handleUpdate(cycle.id)}
+                    icon={<ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+                    title={cycle.name}
+                  />
+                ))}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
new file mode 100644
index 0000000..e3325d5
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane constants
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { PriorityIcon } from "@plane/propel/icons";
+
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterPriority = observer(function FilterPriority(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // hooks
+  const { t } = useTranslation();
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = ISSUE_PRIORITIES.filter((p) => p.key.includes(searchQuery.toLowerCase()));
+  return (
+    <>
+      <FilterHeader
+        title={`Priority ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((priority) => (
+              <FilterOption
+                key={priority.key}
+                isChecked={appliedFilters?.includes(priority.key) ? true : false}
+                onClick={() => handleUpdate(priority.key)}
+                icon={<PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />}
+                title={priority.title}
+              />
+            ))
+          ) : (
+            <p className="text-11 text-placeholder italic">{t("common.search.no_matches_found")}</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
new file mode 100644
index 0000000..843ac01
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// ui
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Loader } from "@plane/ui";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterProjects = observer(function FilterProjects(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store
+  const { getProjectById, joinedProjectIds } = useProject();
+  // derived values
+  const projects = joinedProjectIds?.map((projectId) => getProjectById(projectId)!) ?? null;
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (projects || []).filter((project) =>
+      project.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+    return sortBy(filteredOptions, [
+      (project) => !(appliedFilters ?? []).includes(project.id),
+      (project) => project.name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Project${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((project) => (
+                  <FilterOption
+                    key={`project-${project.id}`}
+                    isChecked={appliedFilters?.includes(project.id) ? true : false}
+                    onClick={() => handleUpdate(project.id)}
+                    icon={
+                      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
+                        <Logo logo={project.logo_props} size={12} />
+                      </span>
+                    }
+                    title={project.name}
+                  />
+                ))}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
new file mode 100644
index 0000000..4adbe7f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+// components
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterStartDate = observer(function FilterStartDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isCustomFateApplied = appliedFilters?.filter((f) => f.includes("-")) || [];
+    return isCustomFateApplied.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Start date"
+        />
+      )}
+      <FilterHeader
+        title={`Start date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
new file mode 100644
index 0000000..99e8c1d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
+import { StateGroupIcon } from "@plane/propel/icons";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStateGroup = observer(function FilterStateGroup(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = Object.values(STATE_GROUPS).filter((s) => s.key.includes(searchQuery.toLowerCase()));
+
+  const handleViewToggle = () => {
+    if (!filteredOptions) return;
+
+    if (itemsToRender === filteredOptions.length) setItemsToRender(5);
+    else setItemsToRender(filteredOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`State group${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.slice(0, itemsToRender).map((stateGroup) => (
+                <FilterOption
+                  key={stateGroup.key}
+                  isChecked={appliedFilters?.includes(stateGroup.key) ? true : false}
+                  onClick={() => handleUpdate(stateGroup.key)}
+                  icon={<StateGroupIcon stateGroup={stateGroup.key} />}
+                  title={stateGroup.label}
+                />
+              ))}
+              {filteredOptions.length > 5 && (
+                <button
+                  type="button"
+                  className="ml-8 text-11 font-medium text-accent-primary"
+                  onClick={handleViewToggle}
+                >
+                  {itemsToRender === filteredOptions.length ? "View less" : "View all"}
+                </button>
+              )}
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
new file mode 100644
index 0000000..825a15a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+import { EIconSize } from "@plane/constants";
+import { StateGroupIcon } from "@plane/propel/icons";
+import type { IState } from "@plane/types";
+// components
+import { Loader } from "@plane/ui";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// ui
+// types
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+  states: IState[] | undefined;
+};
+
+export const FilterState = observer(function FilterState(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery, states } = props;
+
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (states ?? []).filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+    return sortBy(filteredOptions, [(s) => !(appliedFilters ?? []).includes(s.id)]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`State${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((state) => (
+                  <FilterOption
+                    key={state.id}
+                    isChecked={appliedFilters?.includes(state.id) ? true : false}
+                    onClick={() => handleUpdate(state.id)}
+                    icon={
+                      <StateGroupIcon
+                        stateGroup={state.group}
+                        color={state.color}
+                        size={EIconSize.MD}
+                        percentage={state?.order}
+                      />
+                    }
+                    title={state.name}
+                  />
+                ))}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
new file mode 100644
index 0000000..fdf49f3
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { Fragment, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { usePopper } from "react-popper";
+// headless ui
+import { Popover, Transition } from "@headlessui/react";
+// ui
+import { Button } from "@plane/propel/button";
+
+type Props = {
+  children: React.ReactNode;
+  icon?: React.ReactElement;
+  miniIcon?: React.ReactNode;
+  title?: string;
+  placement?: Placement;
+  disabled?: boolean;
+  tabIndex?: number;
+  menuButton?: React.ReactNode;
+  isFiltersApplied?: boolean;
+};
+
+export function FiltersDropdown(props: Props) {
+  const {
+    children,
+    miniIcon,
+    icon,
+    title = "Dropdown",
+    placement,
+    disabled = false,
+    tabIndex,
+    menuButton,
+    isFiltersApplied = false,
+  } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+
+  return (
+    <Popover as="div">
+      {({ open }) => (
+        <>
+          <Popover.Button as={React.Fragment}>
+            {menuButton ? (
+              <button type="button" ref={setReferenceElement}>
+                {menuButton}
+              </button>
+            ) : (
+              <div ref={setReferenceElement}>
+                <div className="hidden @4xl:flex">
+                  <Button
+                    disabled={disabled}
+                    variant="secondary"
+                    prependIcon={icon}
+                    tabIndex={tabIndex}
+                    className="relative"
+                    size="lg"
+                  >
+                    <>
+                      <div className={`${open ? "text-primary" : "text-secondary"}`}>
+                        <span>{title}</span>
+                      </div>
+                      {isFiltersApplied && (
+                        <span className="absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-accent-primary" />
+                      )}
+                    </>
+                  </Button>
+                </div>
+                <div className="flex @4xl:hidden">
+                  <Button
+                    disabled={disabled}
+                    ref={setReferenceElement}
+                    variant="secondary"
+                    tabIndex={tabIndex}
+                    size="lg"
+                  >
+                    {miniIcon || title}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            {/** translate-y-0 is a hack to create new stacking context. Required for safari  */}
+            <Popover.Panel className="fixed z-10 translate-y-0">
+              <div
+                className="my-1 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-100"
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div className="flex max-h-[30rem] w-[18.75rem] flex-col overflow-hidden lg:max-h-[37.5rem]">
+                  {children}
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
new file mode 100644
index 0000000..986407f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ChevronDownOutline, ChevronUpOutline } from "@makeplane/propel/icons";
+
+type Props = {
+  title: string;
+  isPreviewEnabled: boolean;
+  handleIsPreviewEnabled: () => void;
+};
+
+export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }: Props) {
+  return (
+    <div className="sticky top-0 flex items-center justify-between gap-2 bg-surface-1">
+      <div className="flex-grow truncate text-caption-sm-medium text-placeholder">{title}</div>
+      <button
+        type="button"
+        className="grid h-5 w-5 flex-shrink-0 place-items-center rounded-sm hover:bg-layer-transparent-hover"
+        onClick={handleIsPreviewEnabled}
+      >
+        {isPreviewEnabled ? <ChevronUpOutline height={14} width={14} /> : <ChevronDownOutline height={14} width={14} />}
+      </button>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
new file mode 100644
index 0000000..ace90e5
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { TickOutline } from "@makeplane/propel/icons";
+
+type Props = {
+  icon?: React.ReactNode;
+  isChecked: boolean;
+  title: React.ReactNode;
+  onClick?: () => void;
+  multiple?: boolean;
+  activePulse?: boolean;
+};
+
+export function FilterOption(props: Props) {
+  const { icon, isChecked, multiple = true, onClick, title, activePulse = false } = props;
+
+  return (
+    <button
+      type="button"
+      className="flex w-full items-center gap-2 rounded-sm p-1.5 hover:bg-layer-transparent-hover"
+      onClick={onClick}
+    >
+      <div
+        className={`grid h-3 w-3 flex-shrink-0 place-items-center border ${
+          isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
+        } ${multiple ? "rounded-xs" : "rounded-full"}`}
+      >
+        {isChecked && <TickOutline width={10} height={10} />}
+      </div>
+      <div className="flex items-center gap-2 truncate">
+        {icon && <div className="grid w-5 flex-shrink-0 place-items-center">{icon}</div>}
+        <div className="flex-grow truncate text-caption-sm-regular text-secondary">{title}</div>
+      </div>
+      {activePulse && (
+        <div className="ml-auto h-2 w-2 flex-shrink-0 animate-pulse rounded-full bg-accent-primary text-caption-sm-regular" />
+      )}
+    </button>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/index.ts b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/index.ts
new file mode 100644
index 0000000..a817cc1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./dropdown";
+export * from "./filter-header";
+export * from "./filter-option";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/index.ts b/apps/web/core/components/issues/issue-layouts/filters/header/index.ts
new file mode 100644
index 0000000..ae7cf17
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./display-filters";
+export * from "./filters";
+export * from "./helpers";
+export * from "./layout-selection";
+export * from "./mobile-layout-selection";
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
new file mode 100644
index 0000000..8fd4637
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ISSUE_LAYOUTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { EIssueLayoutTypes } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  layouts: EIssueLayoutTypes[];
+  onChange: (layout: EIssueLayoutTypes) => void;
+  selectedLayout: EIssueLayoutTypes | undefined;
+};
+
+export function LayoutSelection(props: Props) {
+  const { layouts, onChange, selectedLayout } = props;
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+  const handleOnChange = (layoutKey: EIssueLayoutTypes) => {
+    if (selectedLayout !== layoutKey) {
+      onChange(layoutKey);
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-1 rounded-md bg-layer-3 p-1">
+      {ISSUE_LAYOUTS.map((layout) => {
+        if (!layouts.includes(layout.key)) return null;
+        return (
+          <Tooltip key={layout.key} label={t(layout.i18n_title)} disabled={isMobile}>
+            <button
+              type="button"
+              aria-label={t(layout.i18n_title)}
+              className={cn(
+                "group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
+                {
+                  "bg-layer-transparent-active hover:bg-layer-transparent-active": selectedLayout === layout.key,
+                }
+              )}
+              onClick={() => handleOnChange(layout.key)}
+            >
+              <IssueLayoutIcon
+                layout={layout.key}
+                size={14}
+                strokeWidth={2}
+                className={`size-3.5 ${selectedLayout == layout.key ? "text-primary" : "text-secondary"}`}
+              />
+            </button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
new file mode 100644
index 0000000..f4b1d33
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ISSUE_LAYOUTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+import type { EIssueLayoutTypes } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+import { IssueLayoutIcon } from "../../layout-icon";
+
+export function MobileLayoutSelection({
+  layouts,
+  onChange,
+  activeLayout,
+}: {
+  layouts: EIssueLayoutTypes[];
+  onChange: (layout: EIssueLayoutTypes) => void;
+  activeLayout?: EIssueLayoutTypes;
+  isMobile?: boolean;
+}) {
+  const { t } = useTranslation();
+  return (
+    <CustomMenu
+      maxHeight={"md"}
+      className="flex flex-grow justify-center text-13 text-secondary"
+      placement="bottom-start"
+      customButton={
+        <Button variant="secondary" className="relative px-2">
+          {activeLayout && (
+            <IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className={`h-3.5 w-3.5`} />
+          )}
+          <ChevronDownOutline className="my-auto size-3 text-secondary" />
+        </Button>
+      }
+      customButtonClassName="flex flex-grow justify-center text-secondary text-13"
+      closeOnSelect
+    >
+      {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout, index) => (
+        <CustomMenu.MenuItem
+          key={index}
+          onClick={() => {
+            onChange(layout.key);
+          }}
+          className="flex items-center gap-2"
+        >
+          <IssueLayoutIcon layout={layout.key} className="h-3 w-3" />
+          <div className="text-tertiary">{t(layout.i18n_label)}</div>
+        </CustomMenu.MenuItem>
+      ))}
+    </CustomMenu>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/index.ts b/apps/web/core/components/issues/issue-layouts/filters/index.ts
new file mode 100644
index 0000000..2196c7b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/filters/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./header";
+export * from "./applied-filters";
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
new file mode 100644
index 0000000..6eff5cd
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { ALL_ISSUES, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { EIssuesStoreType, IBlockUpdateData, TIssue } from "@plane/types";
+import { EIssueLayoutTypes, GANTT_TIMELINE_TYPE } from "@plane/types";
+import { renderFormattedPayloadDate } from "@plane/utils";
+// components
+import { TimeLineTypeContext } from "@/components/gantt-chart/contexts";
+import { GanttChartRoot } from "@/components/gantt-chart/root";
+import { IssueGanttSidebar } from "@/components/gantt-chart/sidebar/issues/sidebar";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+import { useTimeLineChart } from "@/hooks/use-timeline-chart";
+import { useBulkOperationStatus } from "@/hooks/use-bulk-operation-status";
+// local imports
+import { IssueLayoutHOC } from "../issue-layout-HOC";
+import { GanttQuickAddIssueButton, QuickAddIssueRoot } from "../quick-add";
+import { IssueGanttBlock } from "./blocks";
+
+interface IBaseGanttRoot {
+  viewId?: string | undefined;
+  isCompletedCycle?: boolean;
+  isEpic?: boolean;
+}
+
+export type GanttStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.EPIC;
+
+export const BaseGanttRoot = observer(function BaseGanttRoot(props: IBaseGanttRoot) {
+  const { viewId, isCompletedCycle = false, isEpic = false } = props;
+  const { t } = useTranslation();
+  // router
+  const { workspaceSlug, projectId } = useParams();
+
+  const storeType = useIssueStoreType() as GanttStoreType;
+  const { issues, issuesFilter } = useIssues(storeType);
+  const { fetchIssues, fetchNextIssues, updateIssue, quickAddIssue } = useIssuesActions(storeType);
+  const { initGantt } = useTimeLineChart(GANTT_TIMELINE_TYPE.ISSUE);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+
+  const appliedDisplayFilters = issuesFilter.issueFilters?.displayFilters;
+  // plane web hooks
+  const isBulkOperationsEnabled = useBulkOperationStatus();
+  // derived values
+  const targetDate = new Date();
+  targetDate.setDate(targetDate.getDate() + 1);
+
+  useEffect(() => {
+    fetchIssues("init-loader", { canGroup: false, perPageCount: 100 }, viewId);
+  }, [fetchIssues, storeType, viewId]);
+
+  useEffect(() => {
+    initGantt();
+  }, []);
+
+  const issuesIds = (issues.groupedIssueIds?.[ALL_ISSUES] as string[]) ?? [];
+  const nextPageResults = issues.getPaginationData(undefined, undefined)?.nextPageResults;
+
+  const { enableIssueCreation } = issues?.viewFlags || {};
+
+  const loadMoreIssues = useCallback(() => {
+    fetchNextIssues();
+  }, [fetchNextIssues]);
+
+  const updateIssueBlockStructure = async (issue: TIssue, data: IBlockUpdateData) => {
+    if (!workspaceSlug) return;
+
+    const payload: any = { ...data };
+    if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
+
+    updateIssue && (await updateIssue(issue.project_id, issue.id, payload));
+  };
+
+  const isAllowed = allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT);
+  const updateBlockDates = useCallback(
+    (
+      updates: {
+        id: string;
+        start_date?: string;
+        target_date?: string;
+      }[]
+    ) =>
+      issues.updateIssueDates(workspaceSlug.toString(), updates, projectId.toString()).catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("toast.error"),
+          message: "Error while updating work item dates, Please try again Later",
+        });
+      }),
+    [issues, projectId, workspaceSlug]
+  );
+
+  const quickAdd =
+    enableIssueCreation && isAllowed && !isCompletedCycle ? (
+      <QuickAddIssueRoot
+        layout={EIssueLayoutTypes.GANTT}
+        QuickAddButton={GanttQuickAddIssueButton}
+        containerClassName="sticky bottom-0 z-[1]"
+        prePopulatedData={{
+          start_date: renderFormattedPayloadDate(new Date()),
+          target_date: renderFormattedPayloadDate(targetDate),
+        }}
+        quickAddCallback={quickAddIssue}
+        isEpic={isEpic}
+      />
+    ) : undefined;
+
+  return (
+    <IssueLayoutHOC layout={EIssueLayoutTypes.GANTT}>
+      <TimeLineTypeContext.Provider value={GANTT_TIMELINE_TYPE.ISSUE}>
+        <div className="h-full w-full">
+          <GanttChartRoot
+            border={false}
+            title={isEpic ? t("epic.label", { count: 2 }) : t("issue.label", { count: 2 })}
+            loaderTitle={isEpic ? t("epic.label", { count: 2 }) : t("issue.label", { count: 2 })}
+            blockIds={issuesIds}
+            blockUpdateHandler={updateIssueBlockStructure}
+            blockToRender={(data: TIssue) => <IssueGanttBlock issueId={data.id} isEpic={isEpic} />}
+            sidebarToRender={(props) => <IssueGanttSidebar {...props} showAllBlocks isEpic={isEpic} />}
+            enableBlockLeftResize={isAllowed}
+            enableBlockRightResize={isAllowed}
+            enableBlockMove={isAllowed}
+            enableReorder={appliedDisplayFilters?.order_by === "sort_order" && isAllowed}
+            enableAddBlock={isAllowed}
+            enableSelection={isBulkOperationsEnabled && isAllowed}
+            quickAdd={quickAdd}
+            loadMoreBlocks={loadMoreIssues}
+            canLoadMoreBlocks={nextPageResults}
+            updateBlockDates={updateBlockDates}
+            showAllBlocks
+            enableDependency
+            isEpic={isEpic}
+          />
+        </div>
+      </TimeLineTypeContext.Provider>
+    </IssueLayoutHOC>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
new file mode 100644
index 0000000..9d475d3
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
@@ -0,0 +1,160 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { Popover } from "@plane/propel/popover";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { ControlLink } from "@plane/ui";
+import { findTotalDaysInRange, generateWorkItemLink } from "@plane/utils";
+// components
+import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { WorkItemPreviewCard } from "../../preview-card";
+import { getBlockViewDetails } from "../utils";
+import type { GanttStoreType } from "./base-gantt-root";
+
+type Props = {
+  issueId: string;
+  isEpic?: boolean;
+};
+
+export const IssueGanttBlock = observer(function IssueGanttBlock(props: Props) {
+  const { issueId, isEpic } = props;
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  // store hooks
+  const { getProjectStates } = useProjectState();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // hooks
+  const { isMobile } = usePlatformOS();
+  const { handleRedirection } = useIssuePeekOverviewRedirection(isEpic);
+
+  // derived values
+  const issueDetails = getIssueById(issueId);
+  const stateDetails =
+    issueDetails && getProjectStates(issueDetails?.project_id)?.find((state) => state?.id == issueDetails?.state_id);
+
+  const { blockStyle } = getBlockViewDetails(issueDetails, stateDetails?.color ?? "");
+
+  const handleIssuePeekOverview = () => handleRedirection(workspaceSlug, issueDetails, isMobile);
+
+  const duration = findTotalDaysInRange(issueDetails?.start_date, issueDetails?.target_date) || 0;
+
+  return (
+    <Popover delay={100} openOnHover>
+      <Popover.Button
+        className="w-full"
+        render={
+          // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+          <div
+            id={`issue-${issueId}`}
+            className="space-between relative flex h-full w-full cursor-pointer items-center rounded-sm"
+            style={blockStyle}
+            onClick={handleIssuePeekOverview}
+          >
+            <div className="absolute top-0 left-0 h-full w-full bg-surface-1/50" />
+            <div
+              className="sticky w-auto flex-1 truncate overflow-hidden px-2.5 py-1 text-13 text-primary"
+              style={{ left: `${SIDEBAR_WIDTH}px` }}
+            >
+              {issueDetails?.name}
+            </div>
+          </div>
+        }
+      />
+      <Popover.Panel side="bottom" align="start">
+        <>
+          {issueDetails && issueDetails?.project_id && (
+            <WorkItemPreviewCard
+              projectId={issueDetails.project_id}
+              stateDetails={{
+                id: issueDetails.state_id ?? undefined,
+              }}
+              workItem={issueDetails}
+            />
+          )}
+        </>
+      </Popover.Panel>
+    </Popover>
+  );
+});
+
+// rendering issues on gantt sidebar
+export const IssueGanttSidebarBlock = observer(function IssueGanttSidebarBlock(props: Props) {
+  const { issueId, isEpic = false } = props;
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { isMobile } = usePlatformOS();
+  const storeType = useIssueStoreType() as GanttStoreType;
+  const { issuesFilter } = useIssues(storeType);
+  const { getProjectIdentifierById } = useProject();
+
+  // handlers
+  const { handleRedirection } = useIssuePeekOverviewRedirection(isEpic);
+
+  // derived values
+  const issueDetails = getIssueById(issueId);
+  const projectIdentifier = getProjectIdentifierById(issueDetails?.project_id);
+
+  const handleIssuePeekOverview = (e: any) => {
+    e.stopPropagation(true);
+    e.preventDefault();
+    handleRedirection(workspaceSlug, issueDetails, isMobile);
+  };
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issueDetails?.project_id,
+    issueId,
+    projectIdentifier,
+    sequenceId: issueDetails?.sequence_id,
+    isEpic,
+  });
+
+  return (
+    <ControlLink
+      id={`issue-${issueId}`}
+      href={workItemLink}
+      onClick={handleIssuePeekOverview}
+      className="line-clamp-1 w-full cursor-pointer text-13 text-primary"
+      disabled={!!issueDetails?.tempId}
+    >
+      <div className="relative flex h-full w-full cursor-pointer items-center gap-2">
+        {issueDetails?.project_id && (
+          <IssueIdentifier
+            issueId={issueDetails.id}
+            projectId={issueDetails.project_id}
+            size="xs"
+            variant="tertiary"
+            displayProperties={issuesFilter?.issueFilters?.displayProperties}
+          />
+        )}
+        <Tooltip label={issueDetails?.name ?? ""} layout="stacked" disabled={isMobile}>
+          <span className="flex-grow truncate text-13 font-medium">{issueDetails?.name}</span>
+        </Tooltip>
+      </div>
+    </ControlLink>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/gantt/index.ts b/apps/web/core/components/issues/issue-layouts/gantt/index.ts
new file mode 100644
index 0000000..53d7de8
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/gantt/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./base-gantt-root";
diff --git a/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
new file mode 100644
index 0000000..502deca
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { WarningCircleOutline } from "@makeplane/propel/icons";
+// plane imports
+import { ISSUE_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TIssueOrderByOptions } from "@plane/types";
+// helpers
+import { cn } from "@plane/utils";
+
+type Props = {
+  dragColumnOrientation: "justify-start" | "justify-center" | "justify-end";
+  workflowDisabledSource?: string;
+  canOverlayBeVisible: boolean;
+  isDropDisabled: boolean;
+  dropErrorMessage?: string;
+  orderBy: TIssueOrderByOptions | undefined;
+  isDraggingOverColumn: boolean;
+  isEpic?: boolean;
+};
+
+export function GroupDragOverlay(props: Props) {
+  const {
+    dragColumnOrientation,
+    canOverlayBeVisible,
+    workflowDisabledSource,
+    isDropDisabled,
+    dropErrorMessage,
+    orderBy,
+    isDraggingOverColumn,
+    isEpic = false,
+  } = props;
+  // hooks
+  const { t } = useTranslation();
+  // refs
+  const messageContainerRef = useRef<HTMLDivElement>(null);
+
+  const shouldOverlayBeVisible = isDraggingOverColumn && canOverlayBeVisible;
+  const readableOrderBy = t(
+    ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.titleTranslationKey || ""
+  );
+
+  return (
+    <div
+      ref={messageContainerRef}
+      className={cn(
+        `absolute top-0 left-0 h-full w-full items-center rounded-sm bg-layer-1/85 text-13 font-medium text-tertiary ${dragColumnOrientation}`,
+        {
+          "z-2 flex flex-col border-[1px] border-strong": shouldOverlayBeVisible,
+          "bg-danger-subtle": workflowDisabledSource && isDropDisabled,
+        },
+        { hidden: !shouldOverlayBeVisible }
+      )}
+    >
+      {workflowDisabledSource ? null : (
+        <div
+          className={cn("my-8 flex flex-col items-center rounded-sm p-3", {
+            "text-secondary": shouldOverlayBeVisible,
+            "text-danger-secondary": isDropDisabled,
+          })}
+        >
+          {dropErrorMessage ? (
+            <div className="flex items-center">
+              <WarningCircleOutline width={13} height={13} />  
+              <span>{dropErrorMessage}</span>
+            </div>
+          ) : (
+            <>
+              {readableOrderBy && (
+                <span>
+                  {t("issue.layouts.ordered_by_label")} <span className="font-semibold">{t(readableOrderBy)}</span>.
+                </span>
+              )}
+              <span>{t("entity.drop_here_to_move", { entity: isEpic ? "epic" : "work item" })}</span>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx
new file mode 100644
index 0000000..2c6cd65
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { EIssueLayoutTypes } from "@plane/types";
+// components
+import { LayoutErrorBoundary } from "@/components/common/layout-error-boundary";
+import { CalendarLayoutLoader } from "@/components/ui/loader/layouts/calendar-layout-loader";
+import { GanttLayoutLoader } from "@/components/ui/loader/layouts/gantt-layout-loader";
+import { KanbanLayoutLoader } from "@/components/ui/loader/layouts/kanban-layout-loader";
+import { ListLayoutLoader } from "@/components/ui/loader/layouts/list-layout-loader";
+import { SpreadsheetLayoutLoader } from "@/components/ui/loader/layouts/spreadsheet-layout-loader";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+// local imports
+import { IssueLayoutEmptyState } from "./empty-states";
+
+function ActiveLoader(props: { layout: EIssueLayoutTypes }) {
+  const { layout } = props;
+  switch (layout) {
+    case EIssueLayoutTypes.LIST:
+      return <ListLayoutLoader />;
+    case EIssueLayoutTypes.KANBAN:
+      return <KanbanLayoutLoader />;
+    case EIssueLayoutTypes.SPREADSHEET:
+      return <SpreadsheetLayoutLoader />;
+    case EIssueLayoutTypes.CALENDAR:
+      return <CalendarLayoutLoader />;
+    case EIssueLayoutTypes.GANTT:
+      return <GanttLayoutLoader />;
+    default:
+      return null;
+  }
+}
+
+interface Props {
+  children: string | React.ReactNode | React.ReactNode[];
+  layout: EIssueLayoutTypes;
+}
+
+export const IssueLayoutHOC = observer(function IssueLayoutHOC(props: Props) {
+  const { layout } = props;
+
+  const storeType = useIssueStoreType();
+  const { issues } = useIssues(storeType);
+
+  const issueCount = issues.getGroupIssueCount(undefined, undefined, false);
+
+  if (issues?.getIssueLoader() === "init-loader" || issueCount === undefined) {
+    return <ActiveLoader layout={layout} />;
+  }
+
+  if (issues.getGroupIssueCount(undefined, undefined, false) === 0 && layout !== EIssueLayoutTypes.CALENDAR) {
+    return <IssueLayoutEmptyState storeType={storeType} />;
+  }
+
+  return <LayoutErrorBoundary key={layout}>{props.children}</LayoutErrorBoundary>;
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
new file mode 100644
index 0000000..46a2420
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -0,0 +1,256 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { EIssueFilterType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { EIssuesStoreType } from "@plane/types";
+import { EIssueServiceType, EIssueLayoutTypes } from "@plane/types";
+//hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+// store
+// ui
+// types
+import { DeleteIssueModal } from "../../delete-issue-modal";
+import { IssueLayoutHOC } from "../issue-layout-HOC";
+import type { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types";
+//components
+import { KanBan } from "./default";
+import { KanbanDeleteDropZone } from "./kanban-delete-drop-zone";
+import { KanBanSwimLanes } from "./swimlanes";
+
+export type KanbanStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.PROFILE
+  | EIssuesStoreType.TEAM
+  | EIssuesStoreType.TEAM_VIEW
+  | EIssuesStoreType.EPIC;
+
+export interface IBaseKanBanLayout {
+  QuickActions: FC<IQuickActionProps>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+  isCompletedCycle?: boolean;
+  viewId?: string | undefined;
+  isEpic?: boolean;
+}
+
+// Stable identity so an empty kanban-filter value doesn't churn the per-column cache's sharedDeps.
+const EMPTY_KANBAN_FILTERS = { group_by: [], sub_group_by: [] };
+
+export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBanLayout) {
+  const {
+    QuickActions,
+    addIssuesToView,
+    canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
+    viewId,
+    isEpic = false,
+  } = props;
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const storeType = useIssueStoreType() as KanbanStoreType;
+  const { allowPermissions } = useUserPermissions();
+  const { issueMap, issuesFilter, issues } = useIssues(storeType);
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const {
+    fetchIssues,
+    fetchNextIssues,
+    quickAddIssue,
+    updateIssue,
+    removeIssue,
+    removeIssueFromView,
+    archiveIssue,
+    restoreIssue,
+    updateFilters,
+  } = useIssuesActions(storeType);
+
+  const displayFilters = issuesFilter?.issueFilters?.displayFilters;
+  const displayProperties = issuesFilter?.issueFilters?.displayProperties;
+
+  const sub_group_by = displayFilters?.sub_group_by;
+  const group_by = displayFilters?.group_by;
+
+  const orderBy = displayFilters?.order_by;
+
+  useEffect(() => {
+    fetchIssues("init-loader", { canGroup: true, perPageCount: sub_group_by ? 10 : 30 }, viewId);
+  }, [fetchIssues, storeType, group_by, sub_group_by, viewId]);
+
+  const fetchMoreIssues = useCallback(
+    (groupId?: string, subgroupId?: string) => {
+      if (issues?.getIssueLoader(groupId, subgroupId) !== "pagination") {
+        fetchNextIssues(groupId, subgroupId);
+      }
+    },
+    [fetchNextIssues, issues]
+  );
+
+  const groupedIssueIds = issues?.groupedIssueIds;
+
+  const userDisplayFilters = displayFilters || null;
+
+  const KanBanView = sub_group_by ? KanBanSwimLanes : KanBan;
+
+  const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issues?.viewFlags || {};
+
+  const scrollableContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // states
+  const [draggedIssueId, setDraggedIssueId] = useState<string | undefined>(undefined);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by, sub_group_by);
+
+  const handleRequestDelete = useCallback((workItemId: string | undefined) => {
+    setDraggedIssueId(workItemId);
+    setDeleteIssueModal(true);
+  }, []);
+
+  const canEditProperties = useCallback(
+    (issueProjectId: string | undefined) => {
+      const isEditingAllowedBasedOnProject =
+        canEditPropertiesBasedOnProject && issueProjectId
+          ? canEditPropertiesBasedOnProject(issueProjectId)
+          : isEditingAllowed;
+
+      return enableInlineEditing && isEditingAllowedBasedOnProject;
+    },
+    [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
+  );
+
+  // Enable Auto Scroll for Main Kanban
+  useEffect(() => {
+    const element = scrollableContainerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+  }, []);
+
+  const renderQuickActions: TRenderQuickActions = useCallback(
+    ({ issue, parentRef, customActionButton }) => (
+      <QuickActions
+        parentRef={parentRef}
+        customActionButton={customActionButton}
+        issue={issue}
+        handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+        handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+        handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
+        handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+        handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
+        readOnly={!canEditProperties(issue.project_id ?? undefined) || isCompletedCycle}
+      />
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCompletedCycle, canEditProperties, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
+  );
+
+  const handleDeleteIssue = async () => {
+    const draggedIssue = getIssueById(draggedIssueId ?? "");
+
+    if (!draggedIssueId || !draggedIssue) return;
+
+    try {
+      await removeIssue(draggedIssue.project_id, draggedIssueId);
+      setDeleteIssueModal(false);
+      setDraggedIssueId(undefined);
+    } catch (_error) {
+      setDeleteIssueModal(false);
+      setDraggedIssueId(undefined);
+    }
+  };
+
+  const handleCollapsedGroups = useCallback(
+    (toggle: "group_by" | "sub_group_by", value: string) => {
+      if (workspaceSlug) {
+        let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || [];
+        if (collapsedGroups.includes(value)) {
+          collapsedGroups = collapsedGroups.filter((_value) => _value != value);
+        } else {
+          collapsedGroups.push(value);
+        }
+        updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, {
+          [toggle]: collapsedGroups,
+        });
+      }
+    },
+    [workspaceSlug, issuesFilter, projectId, updateFilters]
+  );
+
+  const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || EMPTY_KANBAN_FILTERS;
+
+  return (
+    <>
+      <DeleteIssueModal
+        dataId={draggedIssueId}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDeleteIssue}
+        isEpic={isEpic}
+      />
+      <KanbanDeleteDropZone onRequestDelete={handleRequestDelete} />
+      <IssueLayoutHOC layout={EIssueLayoutTypes.KANBAN}>
+        <div
+          className={`horizontal-scrollbar relative scrollbar-lg flex h-full w-full bg-surface-2 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
+          ref={scrollableContainerRef}
+        >
+          <div className="relative h-full w-max min-w-full bg-surface-2">
+            <div className="h-full w-max">
+              <KanBanView
+                issuesMap={issueMap}
+                groupedIssueIds={groupedIssueIds ?? {}}
+                getGroupIssueCount={issues.getGroupIssueCount}
+                displayProperties={displayProperties}
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                orderBy={orderBy}
+                updateIssue={updateIssue}
+                quickActions={renderQuickActions}
+                handleCollapsedGroups={handleCollapsedGroups}
+                collapsedGroups={collapsedGroups}
+                enableQuickIssueCreate={enableQuickAdd}
+                showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true}
+                quickAddCallback={quickAddIssue}
+                disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
+                canEditProperties={canEditProperties}
+                addIssuesToView={addIssuesToView}
+                scrollableContainerRef={scrollableContainerRef}
+                handleOnDrop={handleOnDrop}
+                loadMoreIssues={fetchMoreIssues}
+                isEpic={isEpic}
+              />
+            </div>
+          </div>
+        </div>
+      </IssueLayoutHOC>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
new file mode 100644
index 0000000..e64e356
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -0,0 +1,295 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane helpers
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// ui
+import { ControlLink, DropIndicator } from "@plane/ui";
+import { cn, generateWorkItemLink } from "@plane/utils";
+// components
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { HIGHLIGHT_CLASS, getIssueBlockId } from "@/components/issues/issue-layouts/utils";
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useKanbanView } from "@/hooks/store/use-kanban-view";
+import { useProject } from "@/hooks/store/use-project";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local components
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { IssueProperties } from "../properties/all-properties";
+
+interface IssueBlockProps {
+  issueId: string;
+  groupId: string;
+  subGroupId: string;
+  issuesMap: IIssueMap;
+  displayProperties: IIssueDisplayProperties | undefined;
+  draggableId: string;
+  canDropOverIssue: boolean;
+  canDragIssuesInCurrentGrouping: boolean;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  shouldRenderByDefault?: boolean;
+  isEpic?: boolean;
+}
+
+interface IssueDetailsBlockProps {
+  cardRef: React.RefObject<HTMLElement | null>;
+  issue: TIssue;
+  displayProperties: IIssueDisplayProperties | undefined;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  isReadOnly: boolean;
+  isEpic?: boolean;
+}
+
+const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props: IssueDetailsBlockProps) {
+  const { cardRef, issue, updateIssue, quickActions, isReadOnly, displayProperties, isEpic = false } = props;
+  // refs
+  const menuActionRef = useRef<HTMLDivElement | null>(null);
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  const customActionButton = (
+    // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+    <div
+      ref={menuActionRef}
+      className={`flex h-full w-full cursor-pointer items-center rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+        isMenuActive ? "bg-layer-1 text-primary" : "text-secondary"
+      }`}
+      onClick={() => setIsMenuActive(!isMenuActive)}
+    >
+      <MoreHorizontalOutline className="h-3.5 w-3.5" />
+    </div>
+  );
+
+  // oxlint-disable-next-line unicorn/consistent-function-scoping
+  const handleEventPropagation = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
+
+  return (
+    <>
+      <div className="relative">
+        {issue.project_id && (
+          <IssueIdentifier
+            issueId={issue.id}
+            projectId={issue.project_id}
+            size="xs"
+            variant="tertiary"
+            displayProperties={displayProperties}
+          />
+        )}
+        {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+        <div
+          className={cn("absolute -top-1 right-0", {
+            "hidden group-hover/kanban-block:block": !isMobile,
+            "!block": isMenuActive,
+          })}
+          onClick={handleEventPropagation}
+        >
+          {quickActions({
+            issue,
+            parentRef: cardRef,
+            customActionButton,
+          })}
+        </div>
+      </div>
+
+      <Tooltip label={issue.name} layout="stacked" disabled={isMobile}>
+        <div className="line-clamp-1 w-full text-body-sm-medium text-primary">
+          <span>{issue.name}</span>
+        </div>
+      </Tooltip>
+
+      <IssueProperties
+        className="flex flex-wrap items-center gap-2 pt-1.5 whitespace-nowrap text-tertiary"
+        issue={issue}
+        displayProperties={displayProperties}
+        activeLayout="Kanban"
+        updateIssue={updateIssue}
+        isReadOnly={isReadOnly}
+        isEpic={isEpic}
+      />
+    </>
+  );
+});
+
+export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueBlockProps) {
+  const {
+    issueId,
+    groupId,
+    subGroupId,
+    issuesMap,
+    displayProperties,
+    canDropOverIssue,
+    canDragIssuesInCurrentGrouping,
+    updateIssue,
+    quickActions,
+    canEditProperties,
+    scrollableContainerRef,
+    shouldRenderByDefault,
+    isEpic = false,
+  } = props;
+
+  const cardRef = useRef<HTMLAnchorElement | null>(null);
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  // hooks
+  const { getProjectIdentifierById } = useProject();
+  const { getIsIssuePeeked } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const { handleRedirection } = useIssuePeekOverviewRedirection(isEpic);
+  const { isMobile } = usePlatformOS();
+
+  // handlers
+  const handleIssuePeekOverview = (issue: TIssue) => handleRedirection(workspaceSlug, issue, isMobile);
+
+  const issue = issuesMap[issueId];
+
+  const { setIsDragging: setIsKanbanDragging } = useKanbanView();
+
+  const [isDraggingOverBlock, setIsDraggingOverBlock] = useState(false);
+  const [isCurrentBlockDragging, setIsCurrentBlockDragging] = useState(false);
+
+  const canEditIssueProperties = canEditProperties(issue?.project_id ?? undefined);
+
+  const isDragAllowed = canDragIssuesInCurrentGrouping && !issue?.tempId && canEditIssueProperties;
+  const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issue?.project_id,
+    issueId,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+    isEpic,
+    isArchived: !!issue?.archived_at,
+  });
+
+  useOutsideClickDetector(cardRef, () => {
+    cardRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
+  });
+
+  // Make Issue block both as as Draggable and,
+  // as a DropTarget for other issues being dragged to get the location of drop
+  useEffect(() => {
+    const element = cardRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        dragHandle: element,
+        canDrag: () => isDragAllowed,
+        getInitialData: () => ({ id: issue?.id, type: "ISSUE" }),
+        onDragStart: () => {
+          setIsCurrentBlockDragging(true);
+          setIsKanbanDragging(true);
+        },
+        onDrop: () => {
+          setIsKanbanDragging(false);
+          setIsCurrentBlockDragging(false);
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => source?.data?.id !== issue?.id && canDropOverIssue,
+        getData: () => ({ id: issue?.id, type: "ISSUE" }),
+        onDragEnter: () => {
+          setIsDraggingOverBlock(true);
+        },
+        onDragLeave: () => {
+          setIsDraggingOverBlock(false);
+        },
+        onDrop: () => {
+          setIsDraggingOverBlock(false);
+        },
+      })
+    );
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+  }, [cardRef?.current, issue?.id, isDragAllowed, canDropOverIssue, setIsCurrentBlockDragging, setIsDraggingOverBlock]);
+
+  if (!issue) return null;
+
+  return (
+    <>
+      <DropIndicator isVisible={!isCurrentBlockDragging && isDraggingOverBlock} />
+      <div
+        id={`issue-${issueId}`}
+        // make Z-index higher at the beginning of drag, to have a issue drag image of issue block without any overlaps
+        className={cn("group/kanban-block relative mb-2", { "z-[1]": isCurrentBlockDragging })}
+        onDragStart={() => {
+          if (isDragAllowed) setIsCurrentBlockDragging(true);
+          else {
+            setToast({
+              type: TOAST_TYPE.WARNING,
+              title: "Cannot move work item",
+              message: !canEditIssueProperties
+                ? "You are not allowed to move this work item"
+                : "Drag and drop is disabled for the current grouping",
+            });
+          }
+        }}
+      >
+        <ControlLink
+          id={getIssueBlockId(issueId, groupId, subGroupId)}
+          href={workItemLink}
+          ref={cardRef}
+          className={cn(
+            "block w-full rounded-lg border border-subtle bg-layer-2 p-3 text-13 shadow-raised-100 outline-[0.5px] outline-transparent transition-all hover:border-strong hover:shadow-raised-200",
+            { "hover:cursor-pointer": isDragAllowed },
+            { "border border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id) },
+            { "z-[100] bg-layer-1": isCurrentBlockDragging }
+          )}
+          onClick={() => handleIssuePeekOverview(issue)}
+          disabled={!!issue?.tempId}
+        >
+          <RenderIfVisible
+            classNames="space-y-2"
+            root={scrollableContainerRef}
+            defaultHeight="100px"
+            horizontalOffset={100}
+            verticalOffset={200}
+            defaultValue={shouldRenderByDefault}
+          >
+            <KanbanIssueDetailsBlock
+              cardRef={cardRef}
+              issue={issue}
+              displayProperties={displayProperties}
+              updateIssue={updateIssue}
+              quickActions={quickActions}
+              isReadOnly={!canEditIssueProperties}
+              isEpic={isEpic}
+            />
+          </RenderIfVisible>
+        </ControlLink>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx b/apps/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx
new file mode 100644
index 0000000..9361e4c
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
+// local imports
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { KanbanIssueBlock } from "./block";
+
+interface IssueBlocksListProps {
+  sub_group_id: string;
+  groupId: string;
+  issuesMap: IIssueMap;
+  issueIds: string[];
+  displayProperties: IIssueDisplayProperties | undefined;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  canDropOverIssue: boolean;
+  canDragIssuesInCurrentGrouping: boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isEpic?: boolean;
+}
+
+export const KanbanIssueBlocksList = observer(function KanbanIssueBlocksList(props: IssueBlocksListProps) {
+  const {
+    sub_group_id,
+    groupId,
+    issuesMap,
+    issueIds,
+    displayProperties,
+    canDropOverIssue,
+    canDragIssuesInCurrentGrouping,
+    updateIssue,
+    quickActions,
+    canEditProperties,
+    scrollableContainerRef,
+    isEpic = false,
+  } = props;
+
+  return (
+    <>
+      {issueIds && issueIds.length > 0 ? (
+        <>
+          {issueIds.map((issueId, index) => {
+            if (!issueId) return null;
+
+            let draggableId = issueId;
+            if (groupId) draggableId = `${draggableId}__${groupId}`;
+            if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`;
+
+            return (
+              <KanbanIssueBlock
+                key={draggableId}
+                issueId={issueId}
+                groupId={groupId}
+                subGroupId={sub_group_id}
+                shouldRenderByDefault={index <= 10}
+                issuesMap={issuesMap}
+                displayProperties={displayProperties}
+                updateIssue={updateIssue}
+                quickActions={quickActions}
+                draggableId={draggableId}
+                canDropOverIssue={canDropOverIssue}
+                canDragIssuesInCurrentGrouping={canDragIssuesInCurrentGrouping}
+                canEditProperties={canEditProperties}
+                scrollableContainerRef={scrollableContainerRef}
+                isEpic={isEpic}
+              />
+            );
+          })}
+        </>
+      ) : null}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/default.tsx b/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
new file mode 100644
index 0000000..d63cf00
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
@@ -0,0 +1,239 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { observer } from "mobx-react";
+import type {
+  GroupByColumnTypes,
+  IGroupByColumn,
+  TGroupedIssues,
+  TIssue,
+  IIssueDisplayProperties,
+  IIssueMap,
+  TSubGroupedIssues,
+  TIssueKanbanFilters,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+} from "@plane/types";
+// constants
+import { ContentWrapper } from "@plane/ui";
+// components
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { KanbanColumnLoader } from "@/components/ui/loader/layouts/kanban-layout-loader";
+// hooks
+import { useKanbanView } from "@/hooks/store/use-kanban-view";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+// types
+// parent components
+import { useWorkFlowFDragNDrop } from "@/components/workflow";
+import type { TRenderQuickActions } from "../list/list-view-types";
+import type { GroupDropLocation } from "../utils";
+import { getGroupByColumns, isWorkspaceLevel, getApproximateCardHeight } from "../utils";
+// components
+import { HeaderGroupByCard } from "./headers/group-by-card";
+import { KanbanGroup } from "./kanban-group";
+
+export interface IKanBan {
+  issuesMap: IIssueMap;
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  displayProperties: IIssueDisplayProperties | undefined;
+  sub_group_by: TIssueGroupByOptions | undefined;
+  group_by: TIssueGroupByOptions | undefined;
+  orderBy: TIssueOrderByOptions | undefined;
+  isDropDisabled?: boolean;
+  dropErrorMessage?: string | undefined;
+  sub_group_id?: string;
+  sub_group_index?: number;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  collapsedGroups: TIssueKanbanFilters;
+  handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+  enableQuickIssueCreate?: boolean;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  disableIssueCreation?: boolean;
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
+  showEmptyGroup?: boolean;
+  subGroupIndex?: number;
+  isEpic?: boolean;
+}
+
+export const KanBan = observer(function KanBan(props: IKanBan) {
+  const {
+    issuesMap,
+    groupedIssueIds,
+    getGroupIssueCount,
+    displayProperties,
+    sub_group_by,
+    group_by,
+    sub_group_id = "null",
+    updateIssue,
+    quickActions,
+    collapsedGroups,
+    handleCollapsedGroups,
+    enableQuickIssueCreate,
+    quickAddCallback,
+    loadMoreIssues,
+    disableIssueCreation,
+    addIssuesToView,
+    canEditProperties,
+    scrollableContainerRef,
+    handleOnDrop,
+    showEmptyGroup = true,
+    orderBy,
+    isDropDisabled,
+    dropErrorMessage,
+    subGroupIndex = 0,
+    isEpic = false,
+  } = props;
+  // i18n
+  // store hooks
+  const storeType = useIssueStoreType();
+  const issueKanBanView = useKanbanView();
+  // derived values
+  const isDragDisabled = !issueKanBanView?.getCanUserDragDrop(group_by, sub_group_by);
+
+  const { getIsWorkflowWorkItemCreationDisabled } = useWorkFlowFDragNDrop(group_by, sub_group_by);
+
+  const list = getGroupByColumns({
+    groupBy: group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+    isEpic: isEpic,
+  });
+
+  if (!list) return null;
+
+  const visibilityGroupBy = (_list: IGroupByColumn): { showGroup: boolean; showIssues: boolean } => {
+    if (sub_group_by) {
+      const groupVisibility = {
+        showGroup: true,
+        showIssues: true,
+      };
+      if (!showEmptyGroup) {
+        groupVisibility.showGroup = (getGroupIssueCount(_list.id, undefined, false) ?? 0) > 0;
+      }
+      return groupVisibility;
+    } else {
+      const groupVisibility = {
+        showGroup: true,
+        showIssues: true,
+      };
+      if (!showEmptyGroup) {
+        if ((getGroupIssueCount(_list.id, undefined, false) ?? 0) > 0) groupVisibility.showGroup = true;
+        else groupVisibility.showGroup = false;
+      }
+      if (collapsedGroups?.group_by.includes(_list.id)) groupVisibility.showIssues = false;
+      return groupVisibility;
+    }
+  };
+
+  const isGroupByCreatedBy = group_by === "created_by";
+  const approximateCardHeight = getApproximateCardHeight(displayProperties);
+  const isSubGroup = !!sub_group_id && sub_group_id !== "null";
+
+  return (
+    <ContentWrapper className={`relative flex-row gap-4 !pt-2 !pb-0`}>
+      {list &&
+        list.length > 0 &&
+        list.map((subList: IGroupByColumn, groupIndex) => {
+          const groupByVisibilityToggle = visibilityGroupBy(subList);
+
+          if (groupByVisibilityToggle.showGroup === false) return <></>;
+
+          const issueIds = isSubGroup
+            ? ((groupedIssueIds as TSubGroupedIssues)?.[subList.id]?.[sub_group_id] ?? [])
+            : ((groupedIssueIds as TGroupedIssues)?.[subList.id] ?? []);
+          const issueLength = issueIds?.length;
+          const groupHeight = issueLength * approximateCardHeight;
+
+          return (
+            <div
+              key={subList.id}
+              className={`group relative flex flex-shrink-0 flex-col ${
+                groupByVisibilityToggle.showIssues ? `w-[350px]` : ``
+              } `}
+            >
+              {sub_group_by === null && (
+                <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-surface-2 py-1">
+                  <HeaderGroupByCard
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    column_id={subList.id}
+                    icon={subList.icon}
+                    title={subList.name}
+                    count={getGroupIssueCount(subList.id, undefined, false) ?? 0}
+                    issuePayload={subList.payload}
+                    disableIssueCreation={
+                      disableIssueCreation ||
+                      isGroupByCreatedBy ||
+                      getIsWorkflowWorkItemCreationDisabled(subList.id, sub_group_id)
+                    }
+                    addIssuesToView={addIssuesToView}
+                    collapsedGroups={collapsedGroups}
+                    handleCollapsedGroups={handleCollapsedGroups}
+                    isEpic={isEpic}
+                  />
+                </div>
+              )}
+
+              {groupByVisibilityToggle.showIssues && (
+                <RenderIfVisible
+                  verticalOffset={100}
+                  horizontalOffset={100}
+                  root={scrollableContainerRef}
+                  classNames="h-full min-h-[120px]"
+                  defaultHeight={`${groupHeight}px`}
+                  placeholderChildren={
+                    <KanbanColumnLoader
+                      ignoreHeader
+                      cardHeight={approximateCardHeight}
+                      cardsInColumn={issueLength !== undefined && issueLength < 3 ? issueLength : 3}
+                      shouldAnimate={false}
+                    />
+                  }
+                  defaultValue={groupIndex < 5 && subGroupIndex < 2}
+                  useIdleTime
+                >
+                  <KanbanGroup
+                    groupId={subList.id}
+                    issuesMap={issuesMap}
+                    groupedIssueIds={groupedIssueIds}
+                    displayProperties={displayProperties}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    orderBy={orderBy}
+                    sub_group_id={sub_group_id}
+                    isDragDisabled={isDragDisabled}
+                    isDropDisabled={!!subList.isDropDisabled || !!isDropDisabled}
+                    dropErrorMessage={subList.dropErrorMessage ?? dropErrorMessage}
+                    updateIssue={updateIssue}
+                    quickActions={quickActions}
+                    enableQuickIssueCreate={enableQuickIssueCreate}
+                    quickAddCallback={quickAddCallback}
+                    disableIssueCreation={disableIssueCreation}
+                    canEditProperties={canEditProperties}
+                    scrollableContainerRef={scrollableContainerRef}
+                    loadMoreIssues={loadMoreIssues}
+                    handleOnDrop={handleOnDrop}
+                    isEpic={isEpic}
+                  />
+                </RenderIfVisible>
+              )}
+            </div>
+          );
+        })}
+    </ContentWrapper>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
new file mode 100644
index 0000000..c3ce584
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// lucide icons
+import { Circle } from "lucide-react";
+import { AddOutline, ArrowCollapseOutline, FullScreenOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue, ISearchIssueResponse, TIssueKanbanFilters, TIssueGroupByOptions } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// components
+import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+// constants
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { CreateUpdateEpicModal } from "@/components/epic-modal";
+
+interface IHeaderGroupByCard {
+  sub_group_by: TIssueGroupByOptions | undefined;
+  group_by: TIssueGroupByOptions | undefined;
+  column_id: string;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  collapsedGroups: TIssueKanbanFilters;
+  handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  issuePayload: Partial<TIssue>;
+  disableIssueCreation?: boolean;
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  isEpic?: boolean;
+}
+
+export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
+  const {
+    sub_group_by,
+    column_id,
+    icon,
+    title,
+    count,
+    collapsedGroups,
+    handleCollapsedGroups,
+    issuePayload,
+    disableIssueCreation,
+    addIssuesToView,
+    isEpic = false,
+  } = props;
+  const verticalAlignPosition = sub_group_by ? false : collapsedGroups?.group_by.includes(column_id);
+  // states
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
+  // hooks
+  const storeType = useIssueStoreType();
+  // router
+  const { workspaceSlug, projectId, moduleId, cycleId } = useParams();
+
+  const renderExistingIssueModal = moduleId || cycleId;
+  const ExistingIssuesListModalPayload = moduleId ? { module: moduleId.toString() } : { cycle: true };
+
+  const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const issues = data.map((i) => i.id);
+
+    try {
+      await addIssuesToView?.(issues);
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Work items added to the cycle successfully.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Selected work items could not be added to the cycle. Please try again.",
+      });
+    }
+  };
+
+  return (
+    <>
+      {isEpic ? (
+        <CreateUpdateEpicModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
+      ) : (
+        <CreateUpdateIssueModal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          data={issuePayload}
+          storeType={storeType}
+        />
+      )}
+
+      {renderExistingIssueModal && (
+        <ExistingIssuesListModal
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
+          isOpen={openExistingIssueListModal}
+          handleClose={() => setOpenExistingIssueListModal(false)}
+          searchParams={ExistingIssuesListModalPayload}
+          handleOnSubmit={handleAddIssuesToView}
+        />
+      )}
+      <div
+        className={`relative flex flex-shrink-0 gap-1 py-1.5 ${
+          verticalAlignPosition ? `w-[44px] flex-col items-center` : `w-full flex-row items-center`
+        }`}
+      >
+        <div className="flex size-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
+          {icon ? icon : <Circle width={14} strokeWidth={2} />}
+        </div>
+
+        <div
+          className={`relative flex gap-1 ${
+            verticalAlignPosition ? `flex-col items-center` : `w-full flex-row items-baseline overflow-hidden`
+          }`}
+        >
+          <div
+            className={`line-clamp-1 inline-block truncate overflow-hidden font-medium text-primary ${
+              verticalAlignPosition ? `max-h-[400px] vertical-lr` : ``
+            }`}
+          >
+            {title}
+          </div>
+          <div
+            className={`flex-shrink-0 text-13 font-medium text-tertiary ${verticalAlignPosition ? `pr-0.5` : `pl-2`}`}
+          >
+            {count || 0}
+          </div>
+        </div>
+
+        {sub_group_by === null && (
+          <button
+            className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover"
+            onClick={() => handleCollapsedGroups("group_by", column_id)}
+          >
+            {verticalAlignPosition ? <FullScreenOutline width={14} /> : <ArrowCollapseOutline width={14} />}
+          </button>
+        )}
+
+        {!disableIssueCreation &&
+          (renderExistingIssueModal ? (
+            <CustomMenu
+              customButton={
+                <span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover">
+                  <AddOutline height={14} width={14} />
+                </span>
+              }
+              placement="bottom-end"
+            >
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setIsOpen(true);
+                }}
+              >
+                <span className="flex items-center justify-start gap-2">Create work item</span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setOpenExistingIssueListModal(true);
+                }}
+              >
+                <span className="flex items-center justify-start gap-2">Add an existing work item</span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          ) : (
+            <button
+              className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm bg-layer-transparent transition-all hover:bg-layer-transparent-hover"
+              onClick={() => {
+                setIsOpen(true);
+              }}
+            >
+              <AddOutline width={14} />
+            </button>
+          ))}
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
new file mode 100644
index 0000000..fdfcc2b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Circle } from "lucide-react";
+import { ChevronDownOutline, ChevronUpOutline } from "@makeplane/propel/icons";
+// Plane
+import type { TIssueGroupByOptions, TIssueKanbanFilters } from "@plane/types";
+
+interface IHeaderSubGroupByCard {
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  column_id: string;
+  collapsedGroups: TIssueKanbanFilters;
+  sub_group_by: TIssueGroupByOptions | undefined;
+  handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+}
+
+export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props: IHeaderSubGroupByCard) {
+  const { icon, title, count, column_id, collapsedGroups, handleCollapsedGroups } = props;
+  return (
+    // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+    <div
+      className={`relative flex w-full flex-shrink-0 cursor-pointer flex-row items-center gap-1 rounded-xs py-1.5`}
+      onClick={() => handleCollapsedGroups("sub_group_by", column_id)}
+    >
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
+        {collapsedGroups?.sub_group_by.includes(column_id) ? (
+          <ChevronDownOutline width={14} />
+        ) : (
+          <ChevronUpOutline width={14} />
+        )}
+      </div>
+
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
+        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+      </div>
+
+      <div className="flex flex-shrink-0 items-center gap-1 text-13">
+        <div className="line-clamp-1 text-primary">{title}</div>
+        <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/kanban-delete-drop-zone.tsx b/apps/web/core/components/issues/issue-layouts/kanban/kanban-delete-drop-zone.tsx
new file mode 100644
index 0000000..4c548dc
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/kanban-delete-drop-zone.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+// hooks
+import { useKanbanView } from "@/hooks/store/use-kanban-view";
+// helpers
+import { getSourceFromDropPayload } from "../utils";
+
+type Props = {
+  onRequestDelete: (workItemId: string | undefined) => void;
+};
+
+// Isolated from BaseKanBanRoot so a drag start/end re-renders only this banner, not the whole board.
+export const KanbanDeleteDropZone = observer(function KanbanDeleteDropZone({ onRequestDelete }: Props) {
+  // refs
+  const deleteAreaRef = useRef<HTMLDivElement | null>(null);
+  // states
+  const [isDragOverDelete, setIsDragOverDelete] = useState(false);
+  // store hooks
+  const { isDragging } = useKanbanView();
+
+  useEffect(() => {
+    const element = deleteAreaRef.current;
+    if (!element) return;
+
+    return combine(
+      dropTargetForElements({
+        element,
+        getData: () => ({ columnId: "issue-trash-box", groupId: "issue-trash-box", type: "DELETE" }),
+        onDragEnter: () => setIsDragOverDelete(true),
+        onDragLeave: () => setIsDragOverDelete(false),
+        onDrop: (payload) => {
+          setIsDragOverDelete(false);
+          const source = getSourceFromDropPayload(payload);
+          if (!source) return;
+          onRequestDelete(source.id);
+        },
+      })
+    );
+  }, [onRequestDelete]);
+
+  return (
+    <div
+      className={`fixed left-1/2 -translate-x-1/2 ${
+        isDragging ? "z-40" : ""
+      } top-3 mx-3 flex w-72 items-center justify-center`}
+      ref={deleteAreaRef}
+    >
+      <div
+        className={`${
+          isDragging ? `opacity-100` : `opacity-0`
+        } flex w-full items-center justify-center rounded-sm border-2 border-danger-strong/20 bg-surface-1 px-3 py-5 text-11 font-medium text-danger-primary italic ${
+          isDragOverDelete ? "bg-danger-primary blur-2xl" : ""
+        } transition duration-300`}
+      >
+        Drop here to delete the work item.
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
new file mode 100644
index 0000000..a3dbcb1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -0,0 +1,346 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { observer } from "mobx-react";
+// plane constants
+import { DRAG_ALLOWED_GROUPS } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
+//types
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type {
+  TGroupedIssues,
+  TIssue,
+  IIssueDisplayProperties,
+  IIssueMap,
+  TSubGroupedIssues,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+} from "@plane/types";
+import { EIssueLayoutTypes } from "@plane/types";
+import { cn } from "@plane/utils";
+import type { GroupDropLocation } from "@/components/issues/issue-layouts/utils";
+// components
+import {
+  highlightIssueOnDrop,
+  getSourceFromDropPayload,
+  getDestinationFromDropPayload,
+  getIssueBlockId,
+} from "@/components/issues/issue-layouts/utils";
+import { KanbanIssueBlockLoader } from "@/components/ui/loader/layouts/kanban-layout-loader";
+import { useWorkFlowFDragNDrop } from "@/components/workflow";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+// local imports
+import { GroupDragOverlay } from "../group-drag-overlay";
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { KanbanQuickAddIssueButton, QuickAddIssueRoot } from "../quick-add";
+import { KanbanIssueBlocksList } from "./blocks-list";
+
+interface IKanbanGroup {
+  groupId: string;
+  issuesMap: IIssueMap;
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  displayProperties: IIssueDisplayProperties | undefined;
+  sub_group_by: TIssueGroupByOptions | undefined;
+  group_by: TIssueGroupByOptions | undefined;
+  sub_group_id: string;
+  isDragDisabled: boolean;
+  isDropDisabled: boolean;
+  dropErrorMessage: string | undefined;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  enableQuickIssueCreate?: boolean;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+  disableIssueCreation?: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  groupByVisibilityToggle?: boolean;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
+  orderBy: TIssueOrderByOptions | undefined;
+  isEpic?: boolean;
+}
+
+export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
+  const {
+    groupId,
+    sub_group_id,
+    group_by,
+    orderBy,
+    sub_group_by,
+    issuesMap,
+    displayProperties,
+    groupedIssueIds,
+    isDropDisabled,
+    dropErrorMessage,
+    updateIssue,
+    quickActions,
+    canEditProperties,
+    loadMoreIssues,
+    enableQuickIssueCreate,
+    disableIssueCreation,
+    quickAddCallback,
+    scrollableContainerRef,
+    handleOnDrop,
+    isEpic = false,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // hooks
+  const projectState = useProjectState();
+
+  const {
+    issues: { getGroupIssueCount, getPaginationData, getIssueLoader },
+  } = useIssuesStore();
+
+  const [intersectionElement, setIntersectionElement] = useState<HTMLSpanElement | null>(null);
+  const columnRef = useRef<HTMLDivElement | null>(null);
+
+  const containerRef = sub_group_by && scrollableContainerRef ? scrollableContainerRef : columnRef;
+
+  const loadMoreIssuesInThisGroup = useCallback(() => {
+    loadMoreIssues(groupId, sub_group_id === "null" ? undefined : sub_group_id);
+  }, [loadMoreIssues, groupId, sub_group_id]);
+
+  const isPaginating = !!getIssueLoader(groupId, sub_group_id);
+
+  useIntersectionObserver(
+    containerRef,
+    isPaginating ? null : intersectionElement,
+    loadMoreIssuesInThisGroup,
+    `0% 100% 100% 100%`
+  );
+  const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false);
+
+  const { workflowDisabledSource, isWorkflowDropDisabled, handleWorkFlowState, getIsWorkflowWorkItemCreationDisabled } =
+    useWorkFlowFDragNDrop(group_by, sub_group_by);
+
+  // Enable Kanban Columns as Drop Targets
+  useEffect(() => {
+    const element = columnRef.current;
+
+    if (!element) return;
+
+    return combine(
+      dropTargetForElements({
+        element,
+        getData: () => ({ groupId, subGroupId: sub_group_id, columnId: `${groupId}__${sub_group_id}`, type: "COLUMN" }),
+        onDragEnter: (payload) => {
+          const source = getSourceFromDropPayload(payload);
+          setIsDraggingOverColumn(true);
+          // handle if dragging a workflowState
+          if (source) {
+            handleWorkFlowState(source?.groupId, groupId, source?.subGroupId, sub_group_id);
+          }
+        },
+        onDragLeave: () => {
+          setIsDraggingOverColumn(false);
+        },
+        onDragStart: (payload) => {
+          const source = getSourceFromDropPayload(payload);
+          setIsDraggingOverColumn(true);
+          // handle if dragging a workflowState
+          if (source) {
+            handleWorkFlowState(source?.groupId, groupId, source?.subGroupId, sub_group_id);
+          }
+        },
+        onDrop: (payload) => {
+          setIsDraggingOverColumn(false);
+          const source = getSourceFromDropPayload(payload);
+          const destination = getDestinationFromDropPayload(payload);
+
+          if (!source || !destination) return;
+
+          if ((isWorkflowDropDisabled || isDropDisabled) && dropErrorMessage) {
+            setToast({
+              type: TOAST_TYPE.WARNING,
+              title: t("common.warning"),
+              message: dropErrorMessage,
+            });
+            return;
+          }
+
+          handleOnDrop(source, destination);
+
+          highlightIssueOnDrop(
+            getIssueBlockId(source.id, destination?.groupId, destination?.subGroupId),
+            orderBy !== "sort_order"
+          );
+        },
+      }),
+      autoScrollForElements({
+        element,
+      })
+    );
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+  }, [
+    columnRef,
+    groupId,
+    sub_group_id,
+    setIsDraggingOverColumn,
+    orderBy,
+    isDropDisabled,
+    isWorkflowDropDisabled,
+    dropErrorMessage,
+    handleOnDrop,
+  ]);
+
+  const prePopulateQuickAddData = (
+    groupByKey: string | undefined,
+    subGroupByKey: string | undefined | null,
+    groupValue: string,
+    subGroupValue: string
+  ) => {
+    const defaultState = projectState.projectStates?.find((state) => state.default);
+    let preloadedData: object = { state_id: defaultState?.id };
+
+    if (groupByKey) {
+      if (groupByKey === "state") {
+        preloadedData = { ...preloadedData, state_id: groupValue };
+      } else if (groupByKey === "priority") {
+        preloadedData = { ...preloadedData, priority: groupValue };
+      } else if (groupByKey === "cycle") {
+        preloadedData = { ...preloadedData, cycle_id: groupValue };
+      } else if (groupByKey === "module") {
+        preloadedData = { ...preloadedData, module_ids: [groupValue] };
+      } else if (groupByKey === "labels" && groupValue != "None") {
+        preloadedData = { ...preloadedData, label_ids: [groupValue] };
+      } else if (groupByKey === "assignees" && groupValue != "None") {
+        preloadedData = { ...preloadedData, assignee_ids: [groupValue] };
+      } else if (groupByKey === "created_by") {
+        preloadedData = { ...preloadedData };
+      } else {
+        preloadedData = { ...preloadedData, [groupByKey]: groupValue };
+      }
+    }
+
+    if (subGroupByKey) {
+      if (subGroupByKey === "state") {
+        preloadedData = { ...preloadedData, state_id: subGroupValue };
+      } else if (subGroupByKey === "priority") {
+        preloadedData = { ...preloadedData, priority: subGroupValue };
+      } else if (subGroupByKey === "cycle") {
+        preloadedData = { ...preloadedData, cycle_id: subGroupValue };
+      } else if (subGroupByKey === "module") {
+        preloadedData = { ...preloadedData, module_ids: [subGroupValue] };
+      } else if (subGroupByKey === "labels" && subGroupValue != "None") {
+        preloadedData = { ...preloadedData, label_ids: [subGroupValue] };
+      } else if (subGroupByKey === "assignees" && subGroupValue != "None") {
+        preloadedData = { ...preloadedData, assignee_ids: [subGroupValue] };
+      } else if (subGroupByKey === "created_by") {
+        preloadedData = { ...preloadedData };
+      } else {
+        preloadedData = { ...preloadedData, [subGroupByKey]: subGroupValue };
+      }
+    }
+
+    return preloadedData;
+  };
+
+  const isSubGroup = !!sub_group_id && sub_group_id !== "null";
+
+  const issueIds = isSubGroup
+    ? ((groupedIssueIds as TSubGroupedIssues)?.[groupId]?.[sub_group_id] ?? [])
+    : ((groupedIssueIds as TGroupedIssues)?.[groupId] ?? []);
+
+  const groupIssueCount = getGroupIssueCount(groupId, sub_group_id, false) ?? 0;
+
+  const nextPageResults = getPaginationData(groupId, sub_group_id)?.nextPageResults;
+
+  const loadMore = isPaginating ? (
+    <KanbanIssueBlockLoader />
+  ) : (
+    // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+    <div
+      className="sticky bottom-0 w-full cursor-pointer p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
+      onClick={loadMoreIssuesInThisGroup}
+    >
+      {t("common.load_more")} ↓
+    </div>
+  );
+
+  const shouldLoadMore = nextPageResults === undefined ? issueIds?.length < groupIssueCount : !!nextPageResults;
+  const canOverlayBeVisible = isWorkflowDropDisabled || orderBy !== "sort_order" || isDropDisabled;
+  const shouldOverlayBeVisible = isDraggingOverColumn && canOverlayBeVisible;
+  const canDragIssuesInCurrentGrouping =
+    !!group_by &&
+    DRAG_ALLOWED_GROUPS.includes(group_by) &&
+    (sub_group_by ? DRAG_ALLOWED_GROUPS.includes(sub_group_by) : true);
+
+  return (
+    <div
+      id={`${groupId}__${sub_group_id}`}
+      className={cn(
+        "relative h-full min-h-[120px] transition-all",
+        { "rounded-sm bg-layer-1": isDraggingOverColumn },
+        { "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlayBeVisible }
+      )}
+      ref={columnRef}
+    >
+      <GroupDragOverlay
+        dragColumnOrientation={sub_group_by ? "justify-start" : "justify-center"}
+        canOverlayBeVisible={canOverlayBeVisible}
+        isDropDisabled={isWorkflowDropDisabled || isDropDisabled}
+        workflowDisabledSource={workflowDisabledSource}
+        dropErrorMessage={dropErrorMessage}
+        orderBy={orderBy}
+        isDraggingOverColumn={isDraggingOverColumn}
+        isEpic={isEpic}
+      />
+      <KanbanIssueBlocksList
+        sub_group_id={sub_group_id}
+        groupId={groupId}
+        issuesMap={issuesMap}
+        issueIds={issueIds || []}
+        displayProperties={displayProperties}
+        updateIssue={updateIssue}
+        quickActions={quickActions}
+        canEditProperties={canEditProperties}
+        scrollableContainerRef={scrollableContainerRef}
+        canDropOverIssue={!canOverlayBeVisible}
+        canDragIssuesInCurrentGrouping={canDragIssuesInCurrentGrouping}
+        isEpic={isEpic}
+      />
+
+      {shouldLoadMore &&
+        (isSubGroup ? (
+          <>{loadMore}</>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {Array.from({ length: 2 }).map((_, index) => (
+              // oxlint-disable-next-line react/no-array-index-key
+              <KanbanIssueBlockLoader key={index} />
+            ))}
+            <KanbanIssueBlockLoader ref={setIntersectionElement} />
+          </div>
+        ))}
+
+      {enableQuickIssueCreate &&
+        !disableIssueCreation &&
+        !getIsWorkflowWorkItemCreationDisabled(groupId, sub_group_id) && (
+          <div className="sticky bottom-0 w-full bg-surface-2 py-0.5">
+            <QuickAddIssueRoot
+              layout={EIssueLayoutTypes.KANBAN}
+              QuickAddButton={KanbanQuickAddIssueButton}
+              prePopulatedData={{
+                ...(group_by && prePopulateQuickAddData(group_by, sub_group_by, groupId, sub_group_id)),
+              }}
+              quickAddCallback={quickAddCallback}
+              isEpic={isEpic}
+            />
+          </div>
+        )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
new file mode 100644
index 0000000..5aa59c6
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EIssuesStoreType } from "@plane/types";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseKanBanRoot } from "../base-kanban-root";
+
+export const CycleKanBanLayout = observer(function CycleKanBanLayout() {
+  const { workspaceSlug, projectId, cycleId } = useParams();
+
+  // store
+  const { issues } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle();
+  const { allowPermissions } = useUserPermissions();
+
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  const canEditIssueProperties = useCallback(
+    () => !isCompletedCycle && isEditingAllowed,
+    [isCompletedCycle, isEditingAllowed]
+  );
+
+  const addIssuesToView = useCallback(
+    (issueIds: string[]) => {
+      if (!workspaceSlug || !projectId || !cycleId) throw new Error();
+      return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
+    },
+    [issues?.addIssueToCycle, workspaceSlug, projectId, cycleId]
+  );
+
+  return (
+    <BaseKanBanRoot
+      QuickActions={CycleIssueQuickActions}
+      addIssuesToView={addIssuesToView}
+      canEditPropertiesBasedOnProject={canEditIssueProperties}
+      isCompletedCycle={isCompletedCycle}
+      viewId={cycleId?.toString()}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
new file mode 100644
index 0000000..5c17b88
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EIssuesStoreType } from "@plane/types";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+// local imports
+import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseKanBanRoot } from "../base-kanban-root";
+
+export const ModuleKanBanLayout = observer(function ModuleKanBanLayout() {
+  const { workspaceSlug, projectId, moduleId } = useParams();
+
+  // store
+  const { issues } = useIssues(EIssuesStoreType.MODULE);
+
+  return (
+    <BaseKanBanRoot
+      QuickActions={ModuleIssueQuickActions}
+      addIssuesToView={(issueIds: string[]) => {
+        if (!workspaceSlug || !projectId || !moduleId) throw new Error();
+        return issues.addIssuesToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);
+      }}
+      viewId={moduleId?.toString()}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
new file mode 100644
index 0000000..5224212
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseKanBanRoot } from "../base-kanban-root";
+
+export const ProfileIssuesKanBanLayout = observer(function ProfileIssuesKanBanLayout() {
+  // router
+  const { workspaceSlug, profileViewId } = useParams();
+  const { allowPermissions } = useUserPermissions();
+
+  const canEditPropertiesBasedOnProject = (projectId: string) =>
+    allowPermissions(
+      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      workspaceSlug.toString(),
+      projectId
+    );
+
+  return (
+    <BaseKanBanRoot
+      QuickActions={ProjectIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
+      viewId={profileViewId?.toString()}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx
new file mode 100644
index 0000000..6d691ad
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseKanBanRoot } from "../base-kanban-root";
+
+export const KanBanLayout = observer(function KanBanLayout() {
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const canEditPropertiesBasedOnProject = (projectId: string) =>
+    allowPermissions(
+      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      workspaceSlug?.toString(),
+      projectId
+    );
+
+  return (
+    <BaseKanBanRoot
+      QuickActions={ProjectIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/roots/project-view-root.tsx b/apps/web/core/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
new file mode 100644
index 0000000..01e9823
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+// constant
+// types
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+// components
+import { BaseKanBanRoot } from "../base-kanban-root";
+
+export const ProjectViewKanBanLayout = observer(function ProjectViewKanBanLayout() {
+  const { viewId } = useParams();
+
+  return <BaseKanBanRoot QuickActions={ProjectIssueQuickActions} viewId={viewId.toString()} />;
+});
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
new file mode 100644
index 0000000..9a93e0e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -0,0 +1,351 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type {
+  GroupByColumnTypes,
+  IGroupByColumn,
+  TGroupedIssues,
+  TIssue,
+  IIssueDisplayProperties,
+  IIssueMap,
+  TSubGroupedIssues,
+  TIssueKanbanFilters,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+} from "@plane/types";
+import { Row } from "@plane/ui";
+// hooks
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+// plane web imports
+import { useWorkFlowFDragNDrop } from "@/components/workflow";
+// local imports
+import type { TRenderQuickActions } from "../list/list-view-types";
+import type { GroupDropLocation } from "../utils";
+import { getGroupByColumns, isWorkspaceLevel } from "../utils";
+import { KanBan } from "./default";
+import { HeaderGroupByCard } from "./headers/group-by-card";
+import { HeaderSubGroupByCard } from "./headers/sub-group-by-card";
+
+interface ISubGroupSwimlaneHeader {
+  collapsedGroups: TIssueKanbanFilters;
+  group_by: TIssueGroupByOptions | undefined;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  isEpic?: boolean;
+  list: IGroupByColumn[];
+  showEmptyGroup: boolean;
+  sub_group_by: TIssueGroupByOptions | undefined;
+}
+
+const visibilitySubGroupByGroupCount = (subGroupIssueCount: number, showEmptyGroup: boolean): boolean => {
+  let subGroupHeaderVisibility = true;
+
+  if (showEmptyGroup) subGroupHeaderVisibility = true;
+  else {
+    if (subGroupIssueCount > 0) subGroupHeaderVisibility = true;
+    else subGroupHeaderVisibility = false;
+  }
+
+  return subGroupHeaderVisibility;
+};
+
+const SubGroupSwimlaneHeader = observer(function SubGroupSwimlaneHeader({
+  collapsedGroups,
+  getGroupIssueCount,
+  group_by,
+  handleCollapsedGroups,
+  isEpic = false,
+  list,
+  showEmptyGroup,
+  sub_group_by,
+}: ISubGroupSwimlaneHeader) {
+  const { getIsWorkflowWorkItemCreationDisabled } = useWorkFlowFDragNDrop(group_by, sub_group_by);
+
+  return (
+    <div className="relative flex h-max min-h-full w-full items-center gap-4">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: IGroupByColumn) => {
+          const groupCount = getGroupIssueCount(_list?.id, undefined, false) ?? 0;
+
+          const subGroupByVisibilityToggle = visibilitySubGroupByGroupCount(groupCount, showEmptyGroup);
+
+          if (subGroupByVisibilityToggle === false) return <></>;
+
+          return (
+            <div key={`${sub_group_by}_${_list.id}`} className="flex w-[350px] flex-shrink-0 flex-col">
+              <HeaderGroupByCard
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                column_id={_list.id}
+                icon={_list.icon}
+                title={_list.name}
+                count={groupCount}
+                collapsedGroups={collapsedGroups}
+                handleCollapsedGroups={handleCollapsedGroups}
+                issuePayload={_list.payload}
+                disableIssueCreation={getIsWorkflowWorkItemCreationDisabled(_list.id)}
+                isEpic={isEpic}
+              />
+            </div>
+          );
+        })}
+    </div>
+  );
+});
+
+interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  collapsedGroups: TIssueKanbanFilters;
+  disableIssueCreation?: boolean;
+  displayProperties: IIssueDisplayProperties | undefined;
+  enableQuickIssueCreate: boolean;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
+  isEpic?: boolean;
+  issuesMap: IIssueMap;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+  orderBy: TIssueOrderByOptions | undefined;
+  quickActions: TRenderQuickActions;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  showEmptyGroup: boolean;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+}
+
+const SubGroupSwimlane = observer(function SubGroupSwimlane(props: ISubGroupSwimlane) {
+  const {
+    addIssuesToView,
+    canEditProperties,
+    collapsedGroups,
+    disableIssueCreation,
+    displayProperties,
+    enableQuickIssueCreate,
+    getGroupIssueCount,
+    group_by,
+    groupedIssueIds,
+    handleCollapsedGroups,
+    handleOnDrop,
+    isEpic = false,
+    issuesMap,
+    list,
+    loadMoreIssues,
+    orderBy,
+    quickActions,
+    quickAddCallback,
+    scrollableContainerRef,
+    showEmptyGroup,
+    sub_group_by,
+    updateIssue,
+  } = props;
+
+  const visibilitySubGroupBy = (
+    _list: IGroupByColumn,
+    subGroupCount: number
+  ): { showGroup: boolean; showIssues: boolean } => {
+    const subGroupVisibility = {
+      showGroup: true,
+      showIssues: true,
+    };
+    if (showEmptyGroup) subGroupVisibility.showGroup = true;
+    else {
+      if (subGroupCount > 0) subGroupVisibility.showGroup = true;
+      else subGroupVisibility.showGroup = false;
+    }
+    if (collapsedGroups?.sub_group_by.includes(_list.id)) subGroupVisibility.showIssues = false;
+    return subGroupVisibility;
+  };
+
+  return (
+    <div className="relative h-max min-h-full w-full">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: IGroupByColumn, subGroupIndex) => {
+          const issueCount = getGroupIssueCount(undefined, _list.id, true) ?? 0;
+          const subGroupByVisibilityToggle = visibilitySubGroupBy(_list, issueCount);
+          if (subGroupByVisibilityToggle.showGroup === false) return <></>;
+          return (
+            <div key={_list.id} className="flex flex-shrink-0 flex-col">
+              <div className="sticky top-[50px] z-[3] flex w-full items-center border-y-[0.5px] border-subtle bg-layer-1 py-1">
+                <Row className="sticky left-0 flex-shrink-0">
+                  <HeaderSubGroupByCard
+                    column_id={_list.id}
+                    icon={_list.icon}
+                    title={_list.name}
+                    count={issueCount}
+                    collapsedGroups={collapsedGroups}
+                    handleCollapsedGroups={handleCollapsedGroups}
+                    sub_group_by={sub_group_by}
+                  />
+                </Row>
+              </div>
+
+              {subGroupByVisibilityToggle.showIssues && (
+                <div className="relative">
+                  <KanBan
+                    issuesMap={issuesMap}
+                    groupedIssueIds={groupedIssueIds}
+                    getGroupIssueCount={getGroupIssueCount}
+                    displayProperties={displayProperties}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    sub_group_id={_list.id}
+                    subGroupIndex={subGroupIndex}
+                    updateIssue={updateIssue}
+                    quickActions={quickActions}
+                    collapsedGroups={collapsedGroups}
+                    handleCollapsedGroups={handleCollapsedGroups}
+                    showEmptyGroup={showEmptyGroup}
+                    enableQuickIssueCreate={enableQuickIssueCreate}
+                    disableIssueCreation={disableIssueCreation}
+                    canEditProperties={canEditProperties}
+                    addIssuesToView={addIssuesToView}
+                    quickAddCallback={quickAddCallback}
+                    scrollableContainerRef={scrollableContainerRef}
+                    loadMoreIssues={loadMoreIssues}
+                    handleOnDrop={handleOnDrop}
+                    orderBy={orderBy}
+                    isDropDisabled={_list.isDropDisabled}
+                    dropErrorMessage={_list.dropErrorMessage}
+                    isEpic={isEpic}
+                  />
+                </div>
+              )}
+            </div>
+          );
+        })}
+    </div>
+  );
+});
+
+export interface IKanBanSwimLanes {
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  collapsedGroups: TIssueKanbanFilters;
+  disableIssueCreation?: boolean;
+  displayProperties: IIssueDisplayProperties | undefined;
+  enableQuickIssueCreate: boolean;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  group_by: TIssueGroupByOptions | undefined;
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
+  isEpic?: boolean;
+  issuesMap: IIssueMap;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+  orderBy: TIssueOrderByOptions | undefined;
+  quickActions: TRenderQuickActions;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  showEmptyGroup: boolean;
+  sub_group_by: TIssueGroupByOptions | undefined;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+}
+
+export const KanBanSwimLanes = observer(function KanBanSwimLanes(props: IKanBanSwimLanes) {
+  const {
+    issuesMap,
+    groupedIssueIds,
+    getGroupIssueCount,
+    displayProperties,
+    sub_group_by,
+    group_by,
+    orderBy,
+    updateIssue,
+    quickActions,
+    collapsedGroups,
+    handleCollapsedGroups,
+    loadMoreIssues,
+    showEmptyGroup,
+    handleOnDrop,
+    disableIssueCreation,
+    enableQuickIssueCreate,
+    canEditProperties,
+    addIssuesToView,
+    quickAddCallback,
+    scrollableContainerRef,
+    isEpic = false,
+  } = props;
+  // store hooks
+  const storeType = useIssueStoreType();
+  // derived values
+  const groupByList = getGroupByColumns({
+    groupBy: group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+    isEpic: isEpic,
+  });
+  const subGroupByList = getGroupByColumns({
+    groupBy: sub_group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+    isEpic: isEpic,
+  });
+
+  if (!groupByList || !subGroupByList) return null;
+
+  return (
+    <div className="relative">
+      <Row className="sticky top-0 z-[4] h-[50px] bg-surface-2">
+        <SubGroupSwimlaneHeader
+          getGroupIssueCount={getGroupIssueCount}
+          group_by={group_by}
+          sub_group_by={sub_group_by}
+          collapsedGroups={collapsedGroups}
+          handleCollapsedGroups={handleCollapsedGroups}
+          list={groupByList}
+          showEmptyGroup={showEmptyGroup}
+          isEpic={isEpic}
+        />
+      </Row>
+
+      {sub_group_by && (
+        <SubGroupSwimlane
+          issuesMap={issuesMap}
+          list={subGroupByList}
+          groupedIssueIds={groupedIssueIds}
+          getGroupIssueCount={getGroupIssueCount}
+          displayProperties={displayProperties}
+          group_by={group_by}
+          sub_group_by={sub_group_by}
+          orderBy={orderBy}
+          updateIssue={updateIssue}
+          quickActions={quickActions}
+          collapsedGroups={collapsedGroups}
+          handleCollapsedGroups={handleCollapsedGroups}
+          loadMoreIssues={loadMoreIssues}
+          showEmptyGroup={showEmptyGroup}
+          handleOnDrop={handleOnDrop}
+          disableIssueCreation={disableIssueCreation}
+          enableQuickIssueCreate={enableQuickIssueCreate}
+          addIssuesToView={addIssuesToView}
+          canEditProperties={canEditProperties}
+          quickAddCallback={quickAddCallback}
+          scrollableContainerRef={scrollableContainerRef}
+          isEpic={isEpic}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/layout-icon.tsx b/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
new file mode 100644
index 0000000..04a9089
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { BoardOutline, CalendarOutline, ListOutline, TableOutline, TimelineOutline } from "@makeplane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { EIssueLayoutTypes } from "@plane/types";
+
+export function IssueLayoutIcon({
+  layout,
+  size,
+  ...props
+}: { layout: EIssueLayoutTypes; size?: number } & Omit<ISvgIcons, "width" | "height">) {
+  const iconProps = {
+    ...props,
+    ...(size && { width: size, height: size }),
+  };
+
+  switch (layout) {
+    case EIssueLayoutTypes.LIST:
+      return <ListOutline {...iconProps} />;
+    case EIssueLayoutTypes.KANBAN:
+      return <BoardOutline {...iconProps} />;
+    case EIssueLayoutTypes.CALENDAR:
+      return <CalendarOutline {...iconProps} />;
+    case EIssueLayoutTypes.SPREADSHEET:
+      return <TableOutline {...iconProps} />;
+    case EIssueLayoutTypes.GANTT:
+      return <TimelineOutline {...iconProps} />;
+    default:
+      return null;
+  }
+}
diff --git a/apps/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/apps/web/core/components/issues/issue-layouts/list/base-list-root.tsx
new file mode 100644
index 0000000..4122b7e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/base-list-root.tsx
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC } from "react";
+import { useCallback, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane constants
+import { EIssueFilterType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+// types
+import type { EIssuesStoreType, GroupByColumnTypes, TGroupedIssues, TIssueKanbanFilters } from "@plane/types";
+import { EIssueLayoutTypes } from "@plane/types";
+// constants
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+// hooks
+import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+// components
+import { IssueLayoutHOC } from "../issue-layout-HOC";
+import { List } from "./default";
+// types
+import type { IQuickActionProps, TRenderQuickActions } from "./list-view-types";
+
+type ListStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.PROFILE
+  | EIssuesStoreType.ARCHIVED
+  | EIssuesStoreType.WORKSPACE_DRAFT
+  | EIssuesStoreType.TEAM
+  | EIssuesStoreType.TEAM_VIEW
+  | EIssuesStoreType.EPIC;
+
+interface IBaseListRoot {
+  QuickActions: FC<IQuickActionProps>;
+  addIssuesToView?: (issueIds: string[]) => Promise<any>;
+  canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+  viewId?: string | undefined;
+  isCompletedCycle?: boolean;
+  isEpic?: boolean;
+}
+export const BaseListRoot = observer(function BaseListRoot(props: IBaseListRoot) {
+  const {
+    QuickActions,
+    viewId,
+    addIssuesToView,
+    canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
+    isEpic = false,
+  } = props;
+  // router
+  const storeType = useIssueStoreType() as ListStoreType;
+  //stores
+  const { issuesFilter, issues } = useIssues(storeType);
+  const {
+    fetchIssues,
+    fetchNextIssues,
+    quickAddIssue,
+    updateIssue,
+    removeIssue,
+    removeIssueFromView,
+    archiveIssue,
+    restoreIssue,
+  } = useIssuesActions(storeType);
+  // mobx store
+  const { allowPermissions } = useUserPermissions();
+  const { issueMap } = useIssues();
+
+  const displayFilters = issuesFilter?.issueFilters?.displayFilters;
+  const displayProperties = issuesFilter?.issueFilters?.displayProperties;
+  const orderBy = displayFilters?.order_by || undefined;
+
+  const group_by = (displayFilters?.group_by || null) as GroupByColumnTypes | null;
+  const showEmptyGroup = displayFilters?.show_empty_groups ?? false;
+
+  const { workspaceSlug, projectId } = useParams();
+  const { updateFilters } = useIssuesActions(storeType);
+  const collapsedGroups =
+    issuesFilter?.issueFilters?.kanbanFilters || ({ group_by: [], sub_group_by: [] } as TIssueKanbanFilters);
+
+  useEffect(() => {
+    fetchIssues("init-loader", { canGroup: true, perPageCount: group_by ? 50 : 100 }, viewId);
+  }, [fetchIssues, storeType, group_by, viewId]);
+
+  const groupedIssueIds = issues?.groupedIssueIds as TGroupedIssues | undefined;
+  // auth
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issues?.viewFlags || {};
+
+  const canEditProperties = useCallback(
+    (projectId: string | undefined) => {
+      const isEditingAllowedBasedOnProject =
+        canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+
+      return !!enableInlineEditing && isEditingAllowedBasedOnProject;
+    },
+    [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
+  );
+
+  const handleOnDrop = useGroupIssuesDragNDrop(storeType, orderBy, group_by);
+
+  const renderQuickActions: TRenderQuickActions = useCallback(
+    ({ issue, parentRef }) => (
+      <QuickActions
+        parentRef={parentRef}
+        issue={issue}
+        handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+        handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+        handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
+        handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+        handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
+        readOnly={!canEditProperties(issue.project_id ?? undefined) || isCompletedCycle}
+      />
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isCompletedCycle, canEditProperties, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
+  );
+
+  const loadMoreIssues = useCallback(
+    (groupId?: string) => {
+      fetchNextIssues(groupId);
+    },
+    [fetchNextIssues]
+  );
+
+  // kanbanFilters and EIssueFilterType.KANBAN_FILTERS are used because the state is shared between kanban view and list view
+  const handleCollapsedGroups = useCallback(
+    (value: string) => {
+      if (workspaceSlug) {
+        let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.group_by || [];
+        if (collapsedGroups.includes(value)) {
+          collapsedGroups = collapsedGroups.filter((_value) => _value != value);
+        } else {
+          collapsedGroups.push(value);
+        }
+        updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, {
+          group_by: collapsedGroups,
+        } as TIssueKanbanFilters);
+      }
+    },
+    [workspaceSlug, issuesFilter, projectId, updateFilters]
+  );
+
+  return (
+    <IssueLayoutHOC layout={EIssueLayoutTypes.LIST}>
+      <div className={`relative size-full bg-surface-2`}>
+        <List
+          issuesMap={issueMap}
+          displayProperties={displayProperties}
+          group_by={group_by}
+          orderBy={orderBy}
+          updateIssue={updateIssue}
+          quickActions={renderQuickActions}
+          groupedIssueIds={groupedIssueIds ?? {}}
+          loadMoreIssues={loadMoreIssues}
+          showEmptyGroup={showEmptyGroup}
+          quickAddCallback={quickAddIssue}
+          enableIssueQuickAdd={!!enableQuickAdd}
+          canEditProperties={canEditProperties}
+          disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+          addIssuesToView={addIssuesToView}
+          isCompletedCycle={isCompletedCycle}
+          handleOnDrop={handleOnDrop}
+          handleCollapsedGroups={handleCollapsedGroups}
+          collapsedGroups={collapsedGroups}
+          isEpic={isEpic}
+        />
+      </div>
+    </IssueLayoutHOC>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/block-root.tsx b/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
new file mode 100644
index 0000000..443d846
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/block-root.tsx
@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import type { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// components
+import { DropIndicator } from "@plane/ui";
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { ListLoaderItemRow } from "@/components/ui/loader/layouts/list-layout-loader";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+import { HIGHLIGHT_CLASS, getIssueBlockId, isIssueNew } from "../utils";
+import { IssueBlock } from "./block";
+import type { TRenderQuickActions } from "./list-view-types";
+
+type Props = {
+  issueId: string;
+  issuesMap: TIssueMap;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  displayProperties: IIssueDisplayProperties | undefined;
+  nestingLevel: number;
+  spacingLeft?: number;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+  selectionHelpers: TSelectionHelper;
+  groupId: string;
+  isDragAllowed: boolean;
+  canDropOverIssue: boolean;
+  isParentIssueBeingDragged?: boolean;
+  isLastChild?: boolean;
+  shouldRenderByDefault?: boolean;
+  isEpic?: boolean;
+};
+
+export const IssueBlockRoot = observer(function IssueBlockRoot(props: Props) {
+  const {
+    issueId,
+    issuesMap,
+    groupId,
+    updateIssue,
+    quickActions,
+    canEditProperties,
+    displayProperties,
+    nestingLevel,
+    spacingLeft = 14,
+    containerRef,
+    isDragAllowed,
+    canDropOverIssue,
+    isParentIssueBeingDragged = false,
+    isLastChild = false,
+    selectionHelpers,
+    shouldRenderByDefault,
+    isEpic = false,
+  } = props;
+  // states
+  const [isExpanded, setExpanded] = useState<boolean>(false);
+  const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
+  const [isCurrentBlockDragging, setIsCurrentBlockDragging] = useState(false);
+  // ref
+  const issueBlockRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // store hooks
+  const { subIssues: subIssuesStore } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+
+  const isSubIssue = nestingLevel !== 0;
+
+  useEffect(() => {
+    const blockElement = issueBlockRef.current;
+
+    if (!blockElement) return;
+
+    return combine(
+      dropTargetForElements({
+        element: blockElement,
+        canDrop: ({ source }) => source?.data?.id !== issueId && !isSubIssue && canDropOverIssue,
+        getData: ({ input, element }) => {
+          const data = { id: issueId, type: "ISSUE" };
+
+          // attach instruction for last in list
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+          });
+        },
+        onDrag: ({ self }) => {
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          // check if the highlight is to be shown above or below
+          setInstruction(
+            extractedInstruction
+              ? extractedInstruction === "reorder-below" && isLastChild
+                ? "DRAG_BELOW"
+                : "DRAG_OVER"
+              : undefined
+          );
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: () => {
+          setInstruction(undefined);
+        },
+      })
+    );
+  }, [issueId, isLastChild, issueBlockRef, isSubIssue, canDropOverIssue, setInstruction]);
+
+  useOutsideClickDetector(issueBlockRef, () => {
+    issueBlockRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
+  });
+
+  if (!issueId || !issuesMap[issueId]?.created_at) return null;
+
+  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+  return (
+    <div className="relative" ref={issueBlockRef} id={getIssueBlockId(issueId, groupId)}>
+      <DropIndicator classNames={"absolute top-0 z-[2]"} isVisible={instruction === "DRAG_OVER"} />
+      <RenderIfVisible
+        key={`${issueId}`}
+        root={containerRef}
+        classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-subtle"}`}
+        verticalOffset={100}
+        defaultValue={shouldRenderByDefault || (issuesMap[issueId] ? isIssueNew(issuesMap[issueId]) : false)}
+        placeholderChildren={<ListLoaderItemRow shouldAnimate={false} renderForPlaceHolder defaultPropertyCount={4} />}
+        shouldRecordHeights={isMobile}
+      >
+        <IssueBlock
+          issueId={issueId}
+          issuesMap={issuesMap}
+          groupId={groupId}
+          updateIssue={updateIssue}
+          quickActions={quickActions}
+          canEditProperties={canEditProperties}
+          displayProperties={displayProperties}
+          isExpanded={isExpanded}
+          setExpanded={setExpanded}
+          nestingLevel={nestingLevel}
+          spacingLeft={spacingLeft}
+          selectionHelpers={selectionHelpers}
+          canDrag={!isSubIssue && isDragAllowed}
+          isCurrentBlockDragging={isParentIssueBeingDragged || isCurrentBlockDragging}
+          setIsCurrentBlockDragging={setIsCurrentBlockDragging}
+          isEpic={isEpic}
+        />
+      </RenderIfVisible>
+
+      {isExpanded &&
+        !isEpic &&
+        subIssues?.map((subIssueId) => (
+          <IssueBlockRoot
+            key={`${subIssueId}`}
+            issueId={subIssueId}
+            issuesMap={issuesMap}
+            updateIssue={updateIssue}
+            quickActions={quickActions}
+            canEditProperties={canEditProperties}
+            displayProperties={displayProperties}
+            nestingLevel={nestingLevel + 1}
+            spacingLeft={spacingLeft + 12}
+            containerRef={containerRef}
+            selectionHelpers={selectionHelpers}
+            groupId={groupId}
+            isDragAllowed={isDragAllowed}
+            canDropOverIssue={canDropOverIssue}
+            isParentIssueBeingDragged={isParentIssueBeingDragged || isCurrentBlockDragging}
+            shouldRenderByDefault={isExpanded}
+          />
+        ))}
+      {isLastChild && <DropIndicator classNames={"absolute z-[2]"} isVisible={instruction === "DRAG_BELOW"} />}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/block.tsx b/apps/web/core/components/issues/issue-layouts/list/block.tsx
new file mode 100644
index 0000000..976d6d4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -0,0 +1,323 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, MouseEvent, SetStateAction } from "react";
+import { useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
+// types
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// ui
+import { Spinner, ControlLink, Row } from "@plane/ui";
+import { cn, generateWorkItemLink } from "@plane/utils";
+// components
+import { MultipleSelectEntityAction } from "@/components/core/multiple-select";
+import { IssueProperties } from "@/components/issues/issue-layouts/properties";
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { calculateIdentifierWidth } from "../utils";
+import type { TRenderQuickActions } from "./list-view-types";
+
+interface IssueBlockProps {
+  issueId: string;
+  issuesMap: TIssueMap;
+  groupId: string;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  displayProperties: IIssueDisplayProperties | undefined;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  nestingLevel: number;
+  spacingLeft?: number;
+  isExpanded: boolean;
+  setExpanded: Dispatch<SetStateAction<boolean>>;
+  selectionHelpers: TSelectionHelper;
+  isCurrentBlockDragging: boolean;
+  setIsCurrentBlockDragging: React.Dispatch<React.SetStateAction<boolean>>;
+  canDrag: boolean;
+  isEpic?: boolean;
+}
+
+export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
+  const {
+    issuesMap,
+    issueId,
+    groupId,
+    updateIssue,
+    quickActions,
+    displayProperties,
+    canEditProperties,
+    nestingLevel,
+    spacingLeft = 14,
+    isExpanded,
+    setExpanded,
+    selectionHelpers,
+    isCurrentBlockDragging,
+    setIsCurrentBlockDragging,
+    canDrag,
+    isEpic = false,
+  } = props;
+  // ref
+  const issueRef = useRef<HTMLDivElement | null>(null);
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  // hooks
+  const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
+  const { getProjectIdentifierById, currentProjectNextSequenceId } = useProject();
+  const {
+    getIsIssuePeeked,
+    peekIssue,
+    setPeekIssue,
+    subIssues: subIssuesStore,
+  } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+
+  const handleIssuePeekOverview = (issue: TIssue) =>
+    workspaceSlug &&
+    issue &&
+    issue.project_id &&
+    issue.id &&
+    !getIsIssuePeeked(issue.id) &&
+    setPeekIssue({
+      workspaceSlug,
+      projectId: issue.project_id,
+      issueId: issue.id,
+      nestingLevel: nestingLevel,
+      isArchived: !!issue.archived_at,
+    });
+
+  // derived values
+  const issue = issuesMap[issueId];
+  const subIssuesCount = issue?.sub_issues_count ?? 0;
+  const canEditIssueProperties = canEditProperties(issue?.project_id ?? undefined);
+  const isDraggingAllowed = canDrag && canEditIssueProperties;
+
+  const { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    const element = issueRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => isDraggingAllowed,
+        getInitialData: () => ({ id: issueId, type: "ISSUE", groupId }),
+        onDragStart: () => {
+          setIsCurrentBlockDragging(true);
+        },
+        onDrop: () => {
+          setIsCurrentBlockDragging(false);
+        },
+      })
+    );
+  }, [isDraggingAllowed, issueId, groupId, setIsCurrentBlockDragging]);
+
+  if (!issue) return null;
+
+  const projectIdentifier = getProjectIdentifierById(issue.project_id);
+  const isIssueSelected = selectionHelpers.getIsEntitySelected(issue.id);
+  const isIssueActive = selectionHelpers.getIsEntityActive(issue.id);
+  const isSubIssue = nestingLevel !== 0;
+  const canSelectIssues = canEditIssueProperties && !selectionHelpers.isSelectionDisabled;
+
+  const marginLeft = `${spacingLeft}px`;
+
+  const handleToggleExpand = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (nestingLevel >= 3) {
+      handleIssuePeekOverview(issue);
+    } else {
+      setExpanded((prevState) => {
+        if (!prevState && workspaceSlug && issue && issue.project_id)
+          subIssuesStore.fetchSubIssues(workspaceSlug.toString(), issue.project_id, issue.id);
+        return !prevState;
+      });
+    }
+  };
+
+  // Calculate width for: projectIdentifier + "-" + dynamic sequence number digits
+  // Use next_work_item_sequence from backend (static value from project endpoint)
+  const maxSequenceId = currentProjectNextSequenceId ?? 1;
+  const keyMinWidth = displayProperties?.key
+    ? calculateIdentifierWidth(projectIdentifier?.length ?? 0, maxSequenceId)
+    : 0;
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issue?.project_id,
+    issueId,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+    isEpic,
+    isArchived: !!issue?.archived_at,
+  });
+  return (
+    <ControlLink
+      id={`issue-${issue.id}`}
+      href={workItemLink}
+      onClick={() => handleIssuePeekOverview(issue)}
+      className="w-full cursor-pointer"
+      disabled={!!issue?.tempId || issue?.is_draft}
+    >
+      <Row
+        ref={issueRef}
+        className={cn(
+          "group/list-block relative flex min-h-11 flex-col gap-3 bg-layer-transparent py-3 text-13 transition-colors hover:bg-layer-transparent-hover",
+          {
+            "border-accent-strong": getIsIssuePeeked(issue.id) && peekIssue?.nestingLevel === nestingLevel,
+            "border-strong-1": isIssueActive,
+            "last:border-b-transparent": !getIsIssuePeeked(issue.id) && !isIssueActive,
+            "bg-accent-primary/5 hover:bg-accent-primary/10": isIssueSelected,
+            "bg-layer-1": isCurrentBlockDragging,
+            "md:flex-row md:items-center": isSidebarCollapsed,
+            "lg:flex-row lg:items-center": !isSidebarCollapsed,
+          }
+        )}
+        onDragStart={() => {
+          if (!isDraggingAllowed) {
+            setToast({
+              type: TOAST_TYPE.WARNING,
+              title: "Cannot move work item",
+              message: !canEditIssueProperties
+                ? "You are not allowed to move this work item"
+                : "Drag and drop is disabled for the current grouping",
+            });
+          }
+        }}
+      >
+        <div className="flex w-full gap-2 truncate">
+          <div className="flex flex-grow items-center gap-0.5 truncate">
+            <div className="flex items-center gap-1" style={isSubIssue ? { marginLeft } : {}}>
+              {/* select checkbox */}
+              {projectId && canSelectIssues && !isEpic && (
+                <Tooltip
+                  label="Only work items within the current project can be selected."
+                  layout="stacked"
+                  disabled={issue.project_id === projectId}
+                >
+                  <div className="absolute left-1 grid w-3.5 flex-shrink-0 place-items-center">
+                    <MultipleSelectEntityAction
+                      className={cn(
+                        "pointer-events-none opacity-0 transition-opacity group-hover/list-block:pointer-events-auto group-hover/list-block:opacity-100",
+                        {
+                          "pointer-events-auto opacity-100": isIssueSelected,
+                        }
+                      )}
+                      groupId={groupId}
+                      id={issue.id}
+                      selectionHelpers={selectionHelpers}
+                      disabled={issue.project_id !== projectId}
+                    />
+                  </div>
+                </Tooltip>
+              )}
+              {displayProperties && (displayProperties.key || displayProperties.issue_type) && (
+                <div className="flex-shrink-0" style={{ minWidth: `${keyMinWidth}px` }}>
+                  {issue.project_id && (
+                    <IssueIdentifier
+                      issueId={issueId}
+                      projectId={issue.project_id}
+                      size="xs"
+                      variant="tertiary"
+                      displayProperties={displayProperties}
+                    />
+                  )}
+                </div>
+              )}
+
+              {/* sub-issues chevron */}
+              <div className="grid size-4 flex-shrink-0 place-items-center">
+                {subIssuesCount > 0 && !isEpic && (
+                  <button
+                    type="button"
+                    className="grid size-4 place-items-center rounded-xs text-placeholder hover:text-tertiary"
+                    onClick={handleToggleExpand}
+                  >
+                    <ChevronRightOutline
+                      className={cn("size-4", {
+                        "rotate-90": isExpanded,
+                      })}
+                    />
+                  </button>
+                )}
+              </div>
+
+              {issue?.tempId !== undefined && (
+                <div className="absolute top-0 left-0 z-[99999] h-full w-full animate-pulse bg-surface-1/20" />
+              )}
+            </div>
+
+            <Tooltip label={issue.name} layout="stacked" align="start" disabled={isCurrentBlockDragging || isMobile}>
+              <p className="cursor-pointer truncate text-body-xs-medium text-primary">{issue.name}</p>
+            </Tooltip>
+          </div>
+          {!issue?.tempId && (
+            <div
+              className={cn("block rounded-sm border border-strong", {
+                "md:hidden": isSidebarCollapsed,
+                "lg:hidden": !isSidebarCollapsed,
+              })}
+            >
+              {quickActions({
+                issue,
+                parentRef: issueRef,
+              })}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-2">
+          {!issue?.tempId ? (
+            <>
+              <IssueProperties
+                className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-shrink-0 md:flex-grow" : "lg:flex-shrink-0 lg:flex-grow"} items-center gap-2 whitespace-nowrap`}
+                issue={issue}
+                isReadOnly={!canEditIssueProperties}
+                updateIssue={updateIssue}
+                displayProperties={displayProperties}
+                activeLayout="List"
+                isEpic={isEpic}
+              />
+              {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+              <div
+                className={cn("hidden", {
+                  "md:flex": isSidebarCollapsed,
+                  "lg:flex": !isSidebarCollapsed,
+                })}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+              >
+                {quickActions({
+                  issue,
+                  parentRef: issueRef,
+                })}
+              </div>
+            </>
+          ) : (
+            <div className="h-4 w-4">
+              <Spinner className="h-4 w-4" />
+            </div>
+          )}
+        </div>
+      </Row>
+    </ControlLink>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/blocks-list.tsx b/apps/web/core/components/issues/issue-layouts/list/blocks-list.tsx
new file mode 100644
index 0000000..cc36909
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/blocks-list.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+// components
+import type { TIssue, IIssueDisplayProperties, TIssueMap, TGroupedIssues } from "@plane/types";
+// hooks
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+// types
+import { IssueBlockRoot } from "./block-root";
+import type { TRenderQuickActions } from "./list-view-types";
+
+interface Props {
+  issueIds: TGroupedIssues | any;
+  issuesMap: TIssueMap;
+  groupId: string;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  displayProperties: IIssueDisplayProperties | undefined;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+  isDragAllowed: boolean;
+  canDropOverIssue: boolean;
+  selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
+}
+
+export function IssueBlocksList(props: Props) {
+  const {
+    issueIds,
+    issuesMap,
+    groupId,
+    updateIssue,
+    quickActions,
+    displayProperties,
+    canEditProperties,
+    containerRef,
+    selectionHelpers,
+    isDragAllowed,
+    canDropOverIssue,
+    isEpic = false,
+  } = props;
+
+  return (
+    <div className="relative h-full w-full">
+      {issueIds &&
+        issueIds.length > 0 &&
+        issueIds.map((issueId: string, index: number) => (
+          <IssueBlockRoot
+            key={issueId}
+            issueId={issueId}
+            issuesMap={issuesMap}
+            updateIssue={updateIssue}
+            quickActions={quickActions}
+            canEditProperties={canEditProperties}
+            displayProperties={displayProperties}
+            nestingLevel={0}
+            spacingLeft={0}
+            containerRef={containerRef}
+            selectionHelpers={selectionHelpers}
+            groupId={groupId}
+            isLastChild={index === issueIds.length - 1}
+            isDragAllowed={isDragAllowed}
+            canDropOverIssue={canDropOverIssue}
+            isEpic={isEpic}
+          />
+        ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-layouts/list/default.tsx b/apps/web/core/components/issues/issue-layouts/list/default.tsx
new file mode 100644
index 0000000..3c8cd32
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/default.tsx
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { observer } from "mobx-react";
+// plane constants
+import { ALL_ISSUES } from "@plane/constants";
+// types
+import type {
+  GroupByColumnTypes,
+  TGroupedIssues,
+  TIssue,
+  IIssueDisplayProperties,
+  TIssueMap,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+  IGroupByColumn,
+  TIssueKanbanFilters,
+} from "@plane/types";
+// components
+import { MultipleSelectGroup } from "@/components/core/multiple-select";
+// hooks
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+// plane web components
+import { IssueBulkOperationsRoot } from "@/components/issues/bulk-operations";
+// plane web hooks
+import { useBulkOperationStatus } from "@/hooks/use-bulk-operation-status";
+// utils
+import type { GroupDropLocation } from "../utils";
+import { getGroupByColumns, isWorkspaceLevel, isSubGrouped } from "../utils";
+import { ListGroup } from "./list-group";
+import type { TRenderQuickActions } from "./list-view-types";
+
+export interface IList {
+  groupedIssueIds: TGroupedIssues;
+  issuesMap: TIssueMap;
+  group_by: TIssueGroupByOptions | null;
+  orderBy: TIssueOrderByOptions | undefined;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  displayProperties: IIssueDisplayProperties | undefined;
+  enableIssueQuickAdd: boolean;
+  showEmptyGroup?: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  disableIssueCreation?: boolean;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  isCompletedCycle?: boolean;
+  loadMoreIssues: (groupId?: string) => void;
+  handleCollapsedGroups: (value: string) => void;
+  collapsedGroups: TIssueKanbanFilters;
+  isEpic?: boolean;
+}
+
+export const List = observer(function List(props: IList) {
+  const {
+    groupedIssueIds,
+    issuesMap,
+    group_by,
+    orderBy,
+    updateIssue,
+    quickActions,
+    displayProperties,
+    enableIssueQuickAdd,
+    showEmptyGroup,
+    canEditProperties,
+    quickAddCallback,
+    disableIssueCreation,
+    handleOnDrop,
+    addIssuesToView,
+    isCompletedCycle = false,
+    loadMoreIssues,
+    handleCollapsedGroups,
+    collapsedGroups,
+    isEpic = false,
+  } = props;
+
+  const storeType = useIssueStoreType();
+  // plane web hooks
+  const isBulkOperationsEnabled = useBulkOperationStatus();
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const groups = getGroupByColumns({
+    groupBy: group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+    isEpic: isEpic,
+  });
+
+  // Enable Auto Scroll for Main Kanban
+  useEffect(() => {
+    const element = containerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+      })
+    );
+  }, [containerRef]);
+
+  if (!groups) return null;
+
+  const getGroupIndex = (groupId: string | undefined) => groups.findIndex(({ id }) => id === groupId);
+
+  const is_list = group_by === null ? true : false;
+
+  // create groupIds array and entities object for bulk ops
+  const groupIds = groups.map((g) => g.id);
+  const orderedGroups: Record<string, string[]> = {};
+  groupIds.forEach((gID) => {
+    orderedGroups[gID] = [];
+  });
+  let entities: Record<string, string[]> = {};
+
+  if (is_list) {
+    entities = Object.assign(orderedGroups, { [groupIds[0]]: groupedIssueIds[ALL_ISSUES] ?? [] });
+  } else if (!isSubGrouped(groupedIssueIds)) {
+    entities = Object.assign(orderedGroups, { ...groupedIssueIds });
+  } else {
+    entities = orderedGroups;
+  }
+  return (
+    <div className="relative flex size-full flex-col">
+      {groups && (
+        <MultipleSelectGroup
+          containerRef={containerRef}
+          entities={entities}
+          disabled={!isBulkOperationsEnabled || isEpic}
+        >
+          {(helpers) => (
+            <>
+              <div
+                ref={containerRef}
+                className="vertical-scrollbar relative scrollbar-lg size-full overflow-auto bg-surface-1"
+              >
+                {groups.map((group: IGroupByColumn) => (
+                  <ListGroup
+                    key={group.id}
+                    groupIssueIds={groupedIssueIds?.[group.id]}
+                    issuesMap={issuesMap}
+                    group_by={group_by}
+                    group={group}
+                    updateIssue={updateIssue}
+                    quickActions={quickActions}
+                    orderBy={orderBy}
+                    getGroupIndex={getGroupIndex}
+                    handleOnDrop={handleOnDrop}
+                    displayProperties={displayProperties}
+                    enableIssueQuickAdd={enableIssueQuickAdd}
+                    showEmptyGroup={showEmptyGroup}
+                    canEditProperties={canEditProperties}
+                    quickAddCallback={quickAddCallback}
+                    disableIssueCreation={disableIssueCreation}
+                    addIssuesToView={addIssuesToView}
+                    isCompletedCycle={isCompletedCycle}
+                    loadMoreIssues={loadMoreIssues}
+                    containerRef={containerRef}
+                    selectionHelpers={helpers}
+                    handleCollapsedGroups={handleCollapsedGroups}
+                    collapsedGroups={collapsedGroups}
+                    isEpic={isEpic}
+                  />
+                ))}
+              </div>
+
+              <IssueBulkOperationsRoot selectionHelpers={helpers} />
+            </>
+          )}
+        </MultipleSelectGroup>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
new file mode 100644
index 0000000..2e00443
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { CircleDashed } from "lucide-react";
+import { AddOutline } from "@makeplane/propel/icons";
+// types
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue, ISearchIssueResponse, TIssueGroupByOptions } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// components
+import { cn } from "@plane/utils";
+import { ExistingIssuesListModal } from "@/components/core/modals/existing-issues-list-modal";
+import { MultipleSelectGroupAction } from "@/components/core/multiple-select";
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+import { CreateUpdateEpicModal } from "@/components/epic-modal";
+// constants
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+
+interface IHeaderGroupByCard {
+  groupID: string;
+  groupBy: TIssueGroupByOptions;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  issuePayload: Partial<TIssue>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  disableIssueCreation?: boolean;
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  selectionHelpers: TSelectionHelper;
+  handleCollapsedGroups: (value: string) => void;
+  isEpic?: boolean;
+}
+
+export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
+  const {
+    groupID,
+    icon,
+    title,
+    count,
+    issuePayload,
+    canEditProperties,
+    disableIssueCreation,
+    addIssuesToView,
+    selectionHelpers,
+    handleCollapsedGroups,
+    isEpic = false,
+  } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [openExistingIssueListModal, setOpenExistingIssueListModal] = useState(false);
+  // router
+  const { workspaceSlug, projectId, moduleId, cycleId } = useParams();
+  const storeType = useIssueStoreType();
+  // derived values
+  const renderExistingIssueModal = moduleId || cycleId;
+  const existingIssuesListModalPayload = moduleId ? { module: moduleId.toString() } : { cycle: true };
+  const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(groupID) === "empty";
+  // auth
+  const canSelectIssues = canEditProperties(projectId?.toString()) && !selectionHelpers.isSelectionDisabled;
+
+  const handleAddIssuesToView = async (data: ISearchIssueResponse[]) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const issues = data.map((i) => i.id);
+
+    try {
+      await addIssuesToView?.(issues);
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Work items added to the cycle successfully.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Selected work items could not be added to the cycle. Please try again.",
+      });
+    }
+  };
+
+  return (
+    <>
+      <div className="group/list-header flex w-full flex-shrink-0 items-center gap-2 py-1.5">
+        {canSelectIssues && (
+          <div className="absolute left-1 flex w-3.5 flex-shrink-0 items-center">
+            <MultipleSelectGroupAction
+              className={cn(
+                "pointer-events-none size-3.5 opacity-0 !outline-none group-hover/list-header:pointer-events-auto group-hover/list-header:opacity-100",
+                {
+                  "pointer-events-auto opacity-100": !isGroupSelectionEmpty,
+                }
+              )}
+              groupID={groupID}
+              selectionHelpers={selectionHelpers}
+              disabled={count === 0}
+            />
+          </div>
+        )}
+        <div className="grid flex-shrink-0 place-items-center overflow-hidden">
+          {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
+        </div>
+
+        {/* eslint-disable-next-line jsx_a11y/click-events-have-key-events eslint-disable-next-line jsx_a11y/no-static-element-interactions */}
+        <div
+          className="relative flex w-full cursor-pointer flex-row items-center gap-1 overflow-hidden"
+          onClick={() => handleCollapsedGroups(groupID)}
+        >
+          <div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
+          <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
+          <div className="px-2.5"></div>
+        </div>
+
+        {!disableIssueCreation &&
+          (renderExistingIssueModal ? (
+            <CustomMenu
+              customButton={
+                <span className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
+                  <AddOutline className="h-3.5 w-3.5" />
+                </span>
+              }
+            >
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setIsOpen(true);
+                }}
+              >
+                <span className="flex items-center justify-start gap-2">Create work item</span>
+              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem
+                onClick={() => {
+                  setOpenExistingIssueListModal(true);
+                }}
+              >
+                <span className="flex items-center justify-start gap-2">Add an existing work item</span>
+              </CustomMenu.MenuItem>
+            </CustomMenu>
+          ) : (
+            // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+            <div
+              className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1"
+              onClick={() => {
+                setIsOpen(true);
+              }}
+            >
+              <AddOutline width={14} />
+            </div>
+          ))}
+
+        {isEpic ? (
+          <CreateUpdateEpicModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
+        ) : (
+          <CreateUpdateIssueModal
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            data={issuePayload}
+            storeType={storeType}
+          />
+        )}
+
+        {renderExistingIssueModal && (
+          <ExistingIssuesListModal
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            isOpen={openExistingIssueListModal}
+            handleClose={() => setOpenExistingIssueListModal(false)}
+            searchParams={existingIssuesListModalPayload}
+            handleOnSubmit={handleAddIssuesToView}
+          />
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/list-group.tsx b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
new file mode 100644
index 0000000..548918f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/list-group.tsx
@@ -0,0 +1,350 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+// plane imports
+import { DRAG_ALLOWED_GROUPS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type {
+  IGroupByColumn,
+  TIssueMap,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+  TIssue,
+  IIssueDisplayProperties,
+  TIssueKanbanFilters,
+} from "@plane/types";
+import { EIssueLayoutTypes } from "@plane/types";
+import { Row } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { ListLoaderItemRow } from "@/components/ui/loader/layouts/list-layout-loader";
+import { useWorkFlowFDragNDrop } from "@/components/workflow";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+// local imports
+import { GroupDragOverlay } from "../group-drag-overlay";
+import { ListQuickAddIssueButton, QuickAddIssueRoot } from "../quick-add";
+import type { GroupDropLocation } from "../utils";
+import {
+  getDestinationFromDropPayload,
+  getIssueBlockId,
+  getSourceFromDropPayload,
+  highlightIssueOnDrop,
+} from "../utils";
+import { IssueBlocksList } from "./blocks-list";
+import { HeaderGroupByCard } from "./headers/group-by-card";
+import type { TRenderQuickActions } from "./list-view-types";
+
+interface Props {
+  groupIssueIds: string[] | undefined;
+  group: IGroupByColumn;
+  issuesMap: TIssueMap;
+  group_by: TIssueGroupByOptions | null;
+  orderBy: TIssueOrderByOptions | undefined;
+  getGroupIndex: (groupId: string | undefined) => number;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  quickActions: TRenderQuickActions;
+  displayProperties: IIssueDisplayProperties | undefined;
+  enableIssueQuickAdd: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+  quickAddCallback?: ((projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>) | undefined;
+  handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
+  disableIssueCreation?: boolean;
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  isCompletedCycle?: boolean;
+  showEmptyGroup?: boolean;
+  loadMoreIssues: (groupId?: string) => void;
+  selectionHelpers: TSelectionHelper;
+  handleCollapsedGroups: (value: string) => void;
+  collapsedGroups: TIssueKanbanFilters;
+  isEpic?: boolean;
+}
+
+export const ListGroup = observer(function ListGroup(props: Props) {
+  const {
+    groupIssueIds = [],
+    group,
+    issuesMap,
+    group_by,
+    orderBy,
+    getGroupIndex,
+    updateIssue,
+    quickActions,
+    displayProperties,
+    enableIssueQuickAdd,
+    canEditProperties,
+    containerRef,
+    quickAddCallback,
+    handleOnDrop,
+    disableIssueCreation,
+    addIssuesToView,
+    isCompletedCycle,
+    showEmptyGroup,
+    loadMoreIssues,
+    selectionHelpers,
+    handleCollapsedGroups,
+    collapsedGroups,
+    isEpic = false,
+  } = props;
+
+  const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false);
+  const [dragColumnOrientation, setDragColumnOrientation] = useState<"justify-start" | "justify-end">("justify-start");
+  const isExpanded = !collapsedGroups?.group_by.includes(group.id);
+  const groupRef = useRef<HTMLDivElement | null>(null);
+  const { t } = useTranslation();
+  const projectState = useProjectState();
+
+  const {
+    issues: { getGroupIssueCount, getPaginationData, getIssueLoader },
+  } = useIssuesStore();
+
+  const [intersectionElement, setIntersectionElement] = useState<HTMLDivElement | null>(null);
+
+  const { workflowDisabledSource, isWorkflowDropDisabled, handleWorkFlowState, getIsWorkflowWorkItemCreationDisabled } =
+    useWorkFlowFDragNDrop(group_by);
+  const isWorkflowIssueCreationDisabled = getIsWorkflowWorkItemCreationDisabled(group.id);
+
+  const groupIssueCount = getGroupIssueCount(group.id, undefined, false) ?? 0;
+  const nextPageResults = getPaginationData(group.id, undefined)?.nextPageResults;
+  const isPaginating = !!getIssueLoader(group.id);
+
+  useIntersectionObserver(containerRef, isPaginating ? null : intersectionElement, loadMoreIssues, `100% 0% 100% 0%`);
+
+  const shouldLoadMore =
+    nextPageResults === undefined && groupIssueCount !== undefined && groupIssueIds
+      ? groupIssueIds.length < groupIssueCount
+      : !!nextPageResults;
+
+  const loadMore = isPaginating ? (
+    <ListLoaderItemRow />
+  ) : (
+    // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+    <div
+      className={
+        "relative flex h-11 cursor-pointer items-center gap-3 border border-transparent border-t-subtle-1 bg-surface-1 p-3 pl-8 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
+      }
+      onClick={() => loadMoreIssues(group.id)}
+    >
+      {t("common.load_more")} ↓
+    </div>
+  );
+
+  const validateEmptyIssueGroups = (issueCount: number = 0) => {
+    if (!showEmptyGroup && issueCount <= 0) return false;
+    return true;
+  };
+
+  const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
+    const defaultState = projectState.projectStates?.find((state) => state.default);
+    let preloadedData: object = { state_id: defaultState?.id };
+
+    if (groupByKey === null) {
+      preloadedData = { ...preloadedData };
+    } else {
+      if (groupByKey === "state") {
+        preloadedData = { ...preloadedData, state_id: value };
+      } else if (groupByKey === "priority") {
+        preloadedData = { ...preloadedData, priority: value };
+      } else if (groupByKey === "labels" && value != "None") {
+        preloadedData = { ...preloadedData, label_ids: [value] };
+      } else if (groupByKey === "assignees" && value != "None") {
+        preloadedData = { ...preloadedData, assignee_ids: [value] };
+      } else if (groupByKey === "cycle" && value != "None") {
+        preloadedData = { ...preloadedData, cycle_id: value };
+      } else if (groupByKey === "module" && value != "None") {
+        preloadedData = { ...preloadedData, module_ids: [value] };
+      } else if (groupByKey === "created_by") {
+        preloadedData = { ...preloadedData };
+      } else {
+        preloadedData = { ...preloadedData, [groupByKey]: value };
+      }
+    }
+
+    return preloadedData;
+  };
+
+  useEffect(() => {
+    const element = groupRef.current;
+
+    if (!element) return;
+
+    return combine(
+      dropTargetForElements({
+        element,
+        getData: () => ({ groupId: group.id, type: "COLUMN" }),
+        onDragEnter: () => {
+          setIsDraggingOverColumn(true);
+        },
+        onDragLeave: () => {
+          setIsDraggingOverColumn(false);
+        },
+        onDragStart: () => {
+          setIsDraggingOverColumn(true);
+        },
+        onDrag: ({ source }) => {
+          const sourceGroupId = source?.data?.groupId as string | undefined;
+          const currentGroupId = group.id;
+
+          // oxlint-disable-next-line no-unused-expressions
+          sourceGroupId && handleWorkFlowState(sourceGroupId, currentGroupId);
+
+          const sourceIndex = getGroupIndex(sourceGroupId);
+          const currentIndex = getGroupIndex(currentGroupId);
+
+          if (sourceIndex > currentIndex) {
+            setDragColumnOrientation("justify-end");
+          } else {
+            setDragColumnOrientation("justify-start");
+          }
+        },
+        onDrop: (payload) => {
+          setIsDraggingOverColumn(false);
+          const source = getSourceFromDropPayload(payload);
+          const destination = getDestinationFromDropPayload(payload);
+
+          if (!source || !destination) return;
+
+          if (isWorkflowDropDisabled || group.isDropDisabled) {
+            if (group.dropErrorMessage)
+              setToast({
+                type: TOAST_TYPE.WARNING,
+                title: t("common.warning"),
+                message: group.dropErrorMessage,
+              });
+            return;
+          }
+
+          handleOnDrop(source, destination);
+
+          highlightIssueOnDrop(getIssueBlockId(source.id, destination?.groupId), orderBy !== "sort_order");
+
+          if (!isExpanded) {
+            handleCollapsedGroups(group.id);
+          }
+        },
+      })
+    );
+  }, [
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+    groupRef?.current,
+    group,
+    orderBy,
+    getGroupIndex,
+    setDragColumnOrientation,
+    setIsDraggingOverColumn,
+    isWorkflowDropDisabled,
+  ]);
+
+  const isDragAllowed = group_by ? DRAG_ALLOWED_GROUPS.includes(group_by) : true;
+  const canOverlayBeVisible = isWorkflowDropDisabled || orderBy !== "sort_order" || !!group.isDropDisabled;
+  const isDropDisabled = isWorkflowDropDisabled || !!group.isDropDisabled;
+
+  const isGroupByCreatedBy = group_by === "created_by";
+  const shouldExpand = (!!groupIssueCount && isExpanded) || !group_by;
+
+  return validateEmptyIssueGroups(groupIssueCount) ? (
+    <div
+      ref={groupRef}
+      className={cn(`relative flex flex-shrink-0 flex-col`, {
+        "border-accent-strong": isDraggingOverColumn,
+        "border-danger-subtle": isDraggingOverColumn && isDropDisabled,
+      })}
+    >
+      <Row
+        className={cn("w-full flex-shrink-0 border-b border-subtle bg-layer-1 py-1 pr-3 hover:bg-layer-1-hover", {
+          "sticky top-0 z-[2]": isExpanded && groupIssueCount > 0,
+        })}
+      >
+        <HeaderGroupByCard
+          groupID={group.id}
+          groupBy={group_by}
+          icon={group.icon}
+          title={group.name}
+          count={groupIssueCount}
+          issuePayload={group.payload}
+          canEditProperties={canEditProperties}
+          disableIssueCreation={
+            disableIssueCreation || isGroupByCreatedBy || isCompletedCycle || isWorkflowIssueCreationDisabled
+          }
+          addIssuesToView={addIssuesToView}
+          selectionHelpers={selectionHelpers}
+          handleCollapsedGroups={handleCollapsedGroups}
+          isEpic={isEpic}
+        />
+      </Row>
+      {shouldExpand && (
+        <div className="relative">
+          <GroupDragOverlay
+            dragColumnOrientation={dragColumnOrientation}
+            canOverlayBeVisible={canOverlayBeVisible}
+            isDropDisabled={isDropDisabled}
+            workflowDisabledSource={workflowDisabledSource}
+            dropErrorMessage={group.dropErrorMessage}
+            orderBy={orderBy}
+            isDraggingOverColumn={isDraggingOverColumn}
+            isEpic={isEpic}
+          />
+          {groupIssueIds && (
+            <IssueBlocksList
+              issueIds={groupIssueIds}
+              groupId={group.id}
+              issuesMap={issuesMap}
+              updateIssue={updateIssue}
+              quickActions={quickActions}
+              displayProperties={displayProperties}
+              canEditProperties={canEditProperties}
+              containerRef={containerRef}
+              isDragAllowed={isDragAllowed}
+              canDropOverIssue={!canOverlayBeVisible}
+              selectionHelpers={selectionHelpers}
+              isEpic={isEpic}
+            />
+          )}
+
+          {shouldLoadMore &&
+            (group_by ? (
+              <>{loadMore}</>
+            ) : (
+              <>
+                {Array.from({ length: 2 }).map((_, index) => (
+                  // oxlint-disable-next-line react/no-array-index-key
+                  <ListLoaderItemRow key={index} />
+                ))}
+                <ListLoaderItemRow ref={setIntersectionElement} />
+              </>
+            ))}
+
+          {enableIssueQuickAdd &&
+            !disableIssueCreation &&
+            !isGroupByCreatedBy &&
+            !isCompletedCycle &&
+            !isWorkflowIssueCreationDisabled && (
+              <div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
+                <QuickAddIssueRoot
+                  layout={EIssueLayoutTypes.LIST}
+                  QuickAddButton={ListQuickAddIssueButton}
+                  prePopulatedData={prePopulateQuickAddData(group_by, group.id)}
+                  containerClassName="border-b border-t border-subtle bg-surface-1 "
+                  quickAddCallback={quickAddCallback}
+                  isEpic={isEpic}
+                />
+              </div>
+            )}
+        </div>
+      )}
+    </div>
+  ) : null;
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/list-view-types.d.ts b/apps/web/core/components/issues/issue-layouts/list/list-view-types.d.ts
new file mode 100644
index 0000000..da33c2c
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/list-view-types.d.ts
@@ -0,0 +1,31 @@
+import type { TPlacement } from "@plane/propel/utils/placement";
+import type { TIssue } from "@plane/types";
+
+export interface IQuickActionProps {
+  parentRef: React.RefObject<HTMLElement | null>;
+  issue: TIssue;
+  handleDelete: () => Promise<void>;
+  handleUpdate?: (data: TIssue) => Promise<void>;
+  handleRemoveFromView?: () => Promise<void>;
+  handleArchive?: () => Promise<void>;
+  handleRestore?: () => Promise<void>;
+  handleMoveToIssues?: () => Promise<void>;
+  customActionButton?: React.ReactElement;
+  portalElement?: HTMLDivElement | null;
+  readOnly?: boolean;
+  placements?: TPlacement;
+}
+
+export type TRenderQuickActions = ({
+  issue,
+  parentRef,
+  customActionButton,
+  placement,
+  portalElement,
+}: {
+  issue: TIssue;
+  parentRef: React.RefObject<HTMLElement | null>;
+  customActionButton?: React.ReactElement;
+  placement?: TPlacement;
+  portalElement?: HTMLDivElement | null;
+}) => React.ReactNode;
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/archived-issue-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
new file mode 100644
index 0000000..54c8913
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// local imports
+import { ArchivedIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseListRoot } from "../base-list-root";
+
+export const ArchivedIssueListLayout = observer(function ArchivedIssueListLayout() {
+  const canEditPropertiesBasedOnProject = () => false;
+
+  return (
+    <BaseListRoot
+      QuickActions={ArchivedIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
new file mode 100644
index 0000000..acf44ae
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EIssuesStoreType } from "@plane/types";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+// types
+import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseListRoot } from "../base-list-root";
+
+export const CycleListLayout = observer(function CycleListLayout() {
+  const { workspaceSlug, projectId, cycleId } = useParams();
+  // store
+  const { issues } = useIssues(EIssuesStoreType.CYCLE);
+  const { currentProjectCompletedCycleIds } = useCycle(); // mobx store
+  const { allowPermissions } = useUserPermissions();
+
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  const canEditIssueProperties = useCallback(
+    () => !isCompletedCycle && isEditingAllowed,
+    [isCompletedCycle, isEditingAllowed]
+  );
+
+  const addIssuesToView = useCallback(
+    (issueIds: string[]) => {
+      if (!workspaceSlug || !projectId || !cycleId) throw new Error();
+      return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
+    },
+    [issues?.addIssueToCycle, workspaceSlug, projectId, cycleId]
+  );
+
+  return (
+    <BaseListRoot
+      QuickActions={CycleIssueQuickActions}
+      addIssuesToView={addIssuesToView}
+      canEditPropertiesBasedOnProject={canEditIssueProperties}
+      isCompletedCycle={isCompletedCycle}
+      viewId={cycleId?.toString()}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/module-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
new file mode 100644
index 0000000..e293073
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EIssuesStoreType } from "@plane/types";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+// local imports
+import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseListRoot } from "../base-list-root";
+
+export const ModuleListLayout = observer(function ModuleListLayout() {
+  const { workspaceSlug, projectId, moduleId } = useParams();
+
+  const { issues } = useIssues(EIssuesStoreType.MODULE);
+
+  return (
+    <BaseListRoot
+      QuickActions={ModuleIssueQuickActions}
+      addIssuesToView={(issueIds: string[]) => {
+        if (!workspaceSlug || !projectId || !moduleId) throw new Error();
+        return issues.addIssuesToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);
+      }}
+      viewId={moduleId?.toString()}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
new file mode 100644
index 0000000..cc69e7c
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseListRoot } from "../base-list-root";
+
+export const ProfileIssuesListLayout = observer(function ProfileIssuesListLayout() {
+  // router
+  const { workspaceSlug, profileViewId } = useParams();
+  // store
+  const { allowPermissions } = useUserPermissions();
+
+  const canEditPropertiesBasedOnProject = (projectId: string) =>
+    allowPermissions(
+      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      workspaceSlug.toString(),
+      projectId
+    );
+
+  return (
+    <BaseListRoot
+      QuickActions={ProjectIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
+      viewId={profileViewId?.toString()}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/project-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/project-root.tsx
new file mode 100644
index 0000000..bde805f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/project-root.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseListRoot } from "../base-list-root";
+
+export const ListLayout = observer(function ListLayout() {
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { allowPermissions } = useUserPermissions();
+
+  if (!workspaceSlug) return null;
+
+  const canEditPropertiesBasedOnProject = (projectId: string) =>
+    allowPermissions(
+      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      workspaceSlug.toString(),
+      projectId
+    );
+
+  return (
+    <BaseListRoot
+      QuickActions={ProjectIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/list/roots/project-view-root.tsx b/apps/web/core/components/issues/issue-layouts/list/roots/project-view-root.tsx
new file mode 100644
index 0000000..9e57ddd
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/list/roots/project-view-root.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// store
+// constants
+// types
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+// components
+import { BaseListRoot } from "../base-list-root";
+
+export const ProjectViewListLayout = observer(function ProjectViewListLayout() {
+  const { viewId } = useParams();
+
+  return <BaseListRoot QuickActions={ProjectIssueQuickActions} viewId={viewId.toString()} />;
+});
diff --git a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
new file mode 100644
index 0000000..6ce4eb1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -0,0 +1,488 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { SyntheticEvent } from "react";
+import { useCallback, useMemo } from "react";
+import { xor } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { AttachOutline, DueDateOutline, LinkOutline, StartDateOutline, ViewsOutline } from "@makeplane/propel/icons";
+// i18n
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
+// ui
+import {
+  cn,
+  getDate,
+  renderFormattedPayloadDate,
+  generateWorkItemLink,
+  shouldHighlightIssueDueDate,
+} from "@plane/utils";
+// components
+import { CycleDropdown } from "@/components/dropdowns/cycle";
+import { DateDropdown } from "@/components/dropdowns/date";
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { EstimateDropdown } from "@/components/dropdowns/estimate";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { ModuleDropdown } from "@/components/dropdowns/module/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useLabel } from "@/hooks/store/use-label";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local components
+import { IssuePropertyLabels } from "./labels";
+import { WithDisplayPropertiesHOC } from "./with-display-properties-HOC";
+
+export interface IIssueProperties {
+  issue: TIssue;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  displayProperties: IIssueDisplayProperties | undefined;
+  isReadOnly: boolean;
+  className: string;
+  activeLayout: string;
+  isEpic?: boolean;
+}
+
+export const IssueProperties = observer(function IssueProperties(props: IIssueProperties) {
+  const { issue, updateIssue, displayProperties, isReadOnly, className, isEpic = false } = props;
+  // i18n
+  const { t } = useTranslation();
+  // store hooks
+  const { getProjectById } = useProject();
+  const { labelMap } = useLabel();
+  const storeType = useIssueStoreType();
+  const {
+    issues: { changeModulesInIssue },
+  } = useIssues(storeType);
+  const {
+    issues: { addCycleToIssue, removeCycleFromIssue },
+  } = useIssues(storeType);
+  const { areEstimateEnabledByProjectId } = useProjectEstimates();
+  const { getStateById } = useProjectState();
+  const { isMobile } = usePlatformOS();
+  const projectDetails = getProjectById(issue.project_id);
+
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
+  const subIssueCount = issue?.sub_issues_count ?? 0;
+
+  const issueOperations = useMemo(
+    () => ({
+      addModulesToIssue: async (moduleIds: string[]) => {
+        if (!workspaceSlug || !issue.project_id || !issue.id) return;
+        await changeModulesInIssue?.(workspaceSlug.toString(), issue.project_id, issue.id, moduleIds, []);
+      },
+      removeModulesFromIssue: async (moduleIds: string[]) => {
+        if (!workspaceSlug || !issue.project_id || !issue.id) return;
+        await changeModulesInIssue?.(workspaceSlug.toString(), issue.project_id, issue.id, [], moduleIds);
+      },
+      addIssueToCycle: async (cycleId: string) => {
+        if (!workspaceSlug || !issue.project_id || !issue.id) return;
+        await addCycleToIssue?.(workspaceSlug.toString(), issue.project_id, cycleId, issue.id);
+      },
+      removeIssueFromCycle: async () => {
+        if (!workspaceSlug || !issue.project_id || !issue.id) return;
+        await removeCycleFromIssue?.(workspaceSlug.toString(), issue.project_id, issue.id);
+      },
+    }),
+    [workspaceSlug, issue, changeModulesInIssue, addCycleToIssue, removeCycleFromIssue]
+  );
+
+  const handleState = async (stateId: string) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { state_id: stateId });
+  };
+
+  const handlePriority = async (value: TIssuePriorities) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { priority: value });
+  };
+
+  const handleLabel = async (ids: string[]) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { label_ids: ids });
+  };
+
+  const handleAssignee = async (ids: string[]) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { assignee_ids: ids });
+  };
+
+  const handleModule = useCallback(
+    (moduleIds: string[] | null) => {
+      if (!issue || !issue.module_ids || !moduleIds) return;
+
+      const updatedModuleIds = xor(issue.module_ids, moduleIds);
+      const modulesToAdd: string[] = [];
+      const modulesToRemove: string[] = [];
+      for (const moduleId of updatedModuleIds)
+        if (issue.module_ids.includes(moduleId)) modulesToRemove.push(moduleId);
+        else modulesToAdd.push(moduleId);
+      if (modulesToAdd.length > 0) issueOperations.addModulesToIssue(modulesToAdd);
+      if (modulesToRemove.length > 0) issueOperations.removeModulesFromIssue(modulesToRemove);
+    },
+    [issueOperations, issue]
+  );
+
+  const handleCycle = useCallback(
+    (cycleId: string | null) => {
+      if (!issue || issue.cycle_id === cycleId) return;
+      if (cycleId) issueOperations.addIssueToCycle?.(cycleId);
+      else issueOperations.removeIssueFromCycle?.();
+    },
+    [issue, issueOperations]
+  );
+
+  const handleStartDate = async (date: Date | null) => {
+    if (updateIssue)
+      await updateIssue(issue.project_id, issue.id, { start_date: date ? renderFormattedPayloadDate(date) : null });
+  };
+
+  const handleTargetDate = async (date: Date | null) => {
+    if (updateIssue)
+      await updateIssue(issue.project_id, issue.id, { target_date: date ? renderFormattedPayloadDate(date) : null });
+  };
+
+  const handleEstimate = async (value: string | undefined) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, { estimate_point: value });
+  };
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier: projectDetails?.identifier,
+    sequenceId: issue?.sequence_id,
+    isArchived: !!issue?.archived_at,
+    isEpic,
+  });
+
+  const redirectToIssueDetail = () => router.push(`${workItemLink}#sub-issues`);
+
+  if (!displayProperties || !issue.project_id) return null;
+
+  // date range is enabled only when both dates are available and both dates are enabled
+  const isDateRangeEnabled: boolean = Boolean(
+    issue.start_date && issue.target_date && displayProperties.start_date && displayProperties.due_date
+  );
+
+  const defaultLabelOptions =
+    issue?.label_ids?.flatMap((id) => {
+      const label = labelMap[id];
+      return label ? [label] : [];
+    }) || [];
+
+  const minDate = getDate(issue.start_date);
+  const maxDate = getDate(issue.target_date);
+
+  // oxlint-disable-next-line unicorn/consistent-function-scoping
+  const handleEventPropagation = (e: SyntheticEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return (
+    <div className={className}>
+      {/* basic properties */}
+      {/* state */}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="state">
+        {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+          <StateDropdown
+            buttonContainerClassName="truncate max-w-40"
+            value={issue.state_id}
+            onChange={handleState}
+            projectId={issue.project_id}
+            disabled={isReadOnly}
+            buttonVariant="border-with-text"
+            renderByDefault={isMobile}
+            showTooltip
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* priority */}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="priority">
+        {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+          <PriorityDropdown
+            value={issue?.priority}
+            onChange={handlePriority}
+            disabled={isReadOnly}
+            buttonVariant="border-without-text"
+            renderByDefault={isMobile}
+            showTooltip
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* merged dates */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey={["start_date", "due_date"]}
+        shouldRenderProperty={() => isDateRangeEnabled}
+      >
+        {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+          <DateRangeDropdown
+            value={{
+              from: getDate(issue.start_date) || undefined,
+              to: getDate(issue.target_date) || undefined,
+            }}
+            onSelect={(range) => {
+              handleStartDate(range?.from ?? null);
+              handleTargetDate(range?.to ?? null);
+            }}
+            hideIcon={{
+              from: false,
+            }}
+            isClearable
+            mergeDates
+            buttonVariant={issue.start_date || issue.target_date ? "border-with-text" : "border-without-text"}
+            buttonClassName={
+              shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
+            }
+            clearIconClassName="text-primary!"
+            disabled={isReadOnly}
+            renderByDefault={isMobile}
+            showTooltip
+            renderPlaceholder={false}
+            customTooltipHeading="Date Range"
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* start date */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey="start_date"
+        shouldRenderProperty={() => !isDateRangeEnabled}
+      >
+        {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+          <DateDropdown
+            value={issue.start_date ?? null}
+            onChange={handleStartDate}
+            maxDate={maxDate}
+            placeholder={t("common.order_by.start_date")}
+            icon={<StartDateOutline className="h-3 w-3 flex-shrink-0" />}
+            buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
+            optionsClassName="z-10"
+            disabled={isReadOnly}
+            renderByDefault={isMobile}
+            showTooltip
+            labelClassName="text-caption-sm-regular"
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* target/due date */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey="due_date"
+        shouldRenderProperty={() => !isDateRangeEnabled}
+      >
+        {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+          <DateDropdown
+            value={issue?.target_date ?? null}
+            onChange={handleTargetDate}
+            minDate={minDate}
+            placeholder={t("common.order_by.due_date")}
+            icon={<DueDateOutline className="h-3 w-3 shrink-0" />}
+            buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
+            buttonClassName={
+              shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger-primary" : ""
+            }
+            clearIconClassName="text-primary!"
+            optionsClassName="z-10"
+            disabled={isReadOnly}
+            renderByDefault={isMobile}
+            showTooltip
+            labelClassName="text-caption-sm-regular"
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      {/* assignee */}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="assignee">
+        {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+          <MemberDropdown
+            projectId={issue?.project_id}
+            value={issue?.assignee_ids}
+            onChange={handleAssignee}
+            disabled={isReadOnly}
+            multiple
+            buttonVariant={issue.assignee_ids?.length > 0 ? "transparent-without-text" : "border-without-text"}
+            buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
+            showTooltip={issue?.assignee_ids?.length === 0}
+            placeholder={t("common.assignees")}
+            optionsClassName="z-10"
+            tooltipContent=""
+            renderByDefault={isMobile}
+          />
+        </div>
+      </WithDisplayPropertiesHOC>
+
+      <>
+        {!isEpic && (
+          <>
+            {/* modules */}
+            {projectDetails?.module_view && (
+              <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules">
+                {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+                <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+                  <ModuleDropdown
+                    buttonContainerClassName="truncate max-w-40"
+                    projectId={issue?.project_id}
+                    value={issue?.module_ids ?? []}
+                    onChange={handleModule}
+                    disabled={isReadOnly}
+                    renderByDefault={isMobile}
+                    multiple
+                    buttonVariant="border-with-text"
+                    showCount
+                    showTooltip
+                  />
+                </div>
+              </WithDisplayPropertiesHOC>
+            )}
+
+            {/* cycles */}
+            {projectDetails?.cycle_view && (
+              <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="cycle">
+                {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+                <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+                  <CycleDropdown
+                    buttonContainerClassName="truncate max-w-40"
+                    projectId={issue?.project_id}
+                    value={issue?.cycle_id}
+                    onChange={handleCycle}
+                    disabled={isReadOnly}
+                    buttonVariant="border-with-text"
+                    renderByDefault={isMobile}
+                    showTooltip
+                  />
+                </div>
+              </WithDisplayPropertiesHOC>
+            )}
+          </>
+        )}
+      </>
+
+      {/* estimates */}
+      {projectId && areEstimateEnabledByProjectId(projectId?.toString()) && (
+        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="estimate">
+          {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+          <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
+            <EstimateDropdown
+              value={issue.estimate_point ?? undefined}
+              onChange={handleEstimate}
+              projectId={issue.project_id}
+              disabled={isReadOnly}
+              buttonVariant="border-with-text"
+              renderByDefault={isMobile}
+              showTooltip
+            />
+          </div>
+        </WithDisplayPropertiesHOC>
+      )}
+
+      {/* extra render properties */}
+      {/* sub-issues */}
+      {!isEpic && (
+        <WithDisplayPropertiesHOC
+          displayProperties={displayProperties}
+          displayPropertyKey="sub_issue_count"
+          shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!subIssueCount}
+        >
+          <Tooltip label={`${t("common.sub_work_items")}: ${subIssueCount}`} disabled={isMobile}>
+            {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+            <div
+              onFocus={handleEventPropagation}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                if (subIssueCount) redirectToIssueDetail();
+              }}
+              className={cn(
+                "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1",
+                {
+                  "cursor-pointer hover:bg-layer-1": subIssueCount,
+                }
+              )}
+            >
+              <ViewsOutline className="h-3 w-3 flex-shrink-0" />
+              <div className="text-caption-sm-regular">{subIssueCount}</div>
+            </div>
+          </Tooltip>
+        </WithDisplayPropertiesHOC>
+      )}
+
+      {/* attachments */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey="attachment_count"
+        shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
+      >
+        <Tooltip label={`${t("common.attachments")}: ${issue.attachment_count}`} disabled={isMobile}>
+          {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+          <div
+            className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1"
+            onFocus={handleEventPropagation}
+            onClick={handleEventPropagation}
+          >
+            <AttachOutline className="h-3 w-3 flex-shrink-0" />
+            <div className="text-caption-sm-regular">{issue.attachment_count}</div>
+          </div>
+        </Tooltip>
+      </WithDisplayPropertiesHOC>
+
+      {/* link */}
+      <WithDisplayPropertiesHOC
+        displayProperties={displayProperties}
+        displayPropertyKey="link"
+        shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
+      >
+        <Tooltip label={`${t("common.links")}: ${issue.link_count}`} disabled={isMobile}>
+          {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions */}
+          <div
+            className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1"
+            onFocus={handleEventPropagation}
+            onClick={handleEventPropagation}
+          >
+            <LinkOutline className="h-3 w-3 flex-shrink-0" />
+            <div className="text-caption-sm-regular">{issue.link_count}</div>
+          </div>
+        </Tooltip>
+      </WithDisplayPropertiesHOC>
+
+      {/* label */}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="labels">
+        <IssuePropertyLabels
+          projectId={issue?.project_id || null}
+          value={issue?.label_ids || []}
+          defaultOptions={defaultLabelOptions}
+          onChange={handleLabel}
+          disabled={isReadOnly}
+          renderByDefault={isMobile}
+          hideDropdownArrow
+          maxRender={3}
+        />
+      </WithDisplayPropertiesHOC>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/properties/index.ts b/apps/web/core/components/issues/issue-layouts/properties/index.ts
new file mode 100644
index 0000000..c45303f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/properties/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./labels";
+export * from "./all-properties";
+export * from "./label-dropdown";
diff --git a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
new file mode 100644
index 0000000..98b018f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
@@ -0,0 +1,337 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+import { ChevronDownOutline, LoadingOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+// types
+import type { IIssueLabel } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+// components
+import { ComboDropDown } from "@plane/ui";
+import { sortBySelectedFirst } from "@plane/utils";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+export interface ILabelDropdownProps {
+  projectId: string | null;
+  value: string[];
+  onChange: (data: string[]) => void;
+  onClose?: () => void;
+  disabled?: boolean;
+  defaultOptions?: any;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  maxRender?: number;
+  renderByDefault?: boolean;
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+  label: React.ReactNode;
+}
+
+export function LabelDropdown(props: ILabelDropdownProps) {
+  const {
+    projectId,
+    value,
+    onChange,
+    onClose,
+    disabled,
+    defaultOptions = [],
+    hideDropdownArrow = false,
+    className,
+    buttonClassName = "",
+    optionsClassName = "",
+    placement,
+    maxRender = 2,
+    renderByDefault = true,
+    fullWidth = false,
+    fullHeight = false,
+    label,
+  } = props;
+  const { t } = useTranslation();
+
+  //router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+
+  //states
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [query, setQuery] = useState<string>("");
+  const [submitting, setSubmitting] = useState<boolean>(false);
+
+  //refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  //hooks
+  const { fetchProjectLabels, getProjectLabels, createLabel } = useLabel();
+  const { isMobile } = usePlatformOS();
+  const storeLabels = getProjectLabels(projectId);
+  const { allowPermissions } = useUserPermissions();
+
+  const canCreateLabel =
+    projectId && allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId);
+
+  let projectLabels: IIssueLabel[] = defaultOptions;
+  if (storeLabels && storeLabels.length > 0) projectLabels = storeLabels;
+
+  const options = useMemo(
+    () =>
+      projectLabels.map((label) => ({
+        value: label?.id,
+        query: label?.name,
+        content: (
+          <div className="flex items-center justify-start gap-2 overflow-hidden">
+            <span
+              className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+              style={{
+                backgroundColor: label?.color,
+              }}
+            />
+            <div className="line-clamp-1 inline-block truncate">{label?.name}</div>
+          </div>
+        ),
+      })),
+    [projectLabels]
+  );
+
+  const filteredOptions = useMemo(
+    () =>
+      sortBySelectedFirst(
+        query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())),
+        value
+      ),
+    [options, query, value]
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const onOpen = useCallback(() => {
+    if (!storeLabels && workspaceSlug && projectId)
+      fetchProjectLabels(workspaceSlug, projectId)
+        .then(() => setIsLoading(false))
+        .catch(() => {
+          setIsLoading(false);
+        });
+  }, [storeLabels, workspaceSlug, projectId, fetchProjectLabels, setIsLoading]);
+
+  const toggleDropdown = useCallback(() => {
+    if (!isOpen) onOpen();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen && onClose) onClose();
+  }, [onOpen, onClose, isOpen, setIsOpen]);
+
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    setQuery("");
+    if (onClose) onClose();
+  };
+
+  const handleAddLabel = async (labelName: string) => {
+    if (!projectId) return;
+    setSubmitting(true);
+    const label = await createLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() });
+    onChange([...value, label.id]);
+    setQuery("");
+    setSubmitting(false);
+  };
+
+  const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    if (query !== "" && e.key === "Escape") {
+      setQuery("");
+      e.preventDefault();
+    }
+
+    if (query !== "" && e.key === "Enter" && !e.nativeEvent.isComposing && canCreateLabel) {
+      e.preventDefault();
+      await handleAddLabel(query);
+    }
+  };
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  const handleOnClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      e.stopPropagation();
+      e.preventDefault();
+      toggleDropdown();
+    },
+    [toggleDropdown]
+  );
+
+  useEffect(() => {
+    if (isOpen && inputRef.current && !isMobile) {
+      inputRef.current.focus();
+    }
+  }, [isOpen, isMobile]);
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  const comboButton = useMemo(
+    () => (
+      <button
+        ref={setReferenceElement}
+        type="button"
+        className={`clickable flex h-full w-full items-center justify-center gap-1 text-caption-sm-regular ${fullWidth && "hover:bg-layer-1"} ${
+          disabled
+            ? "cursor-not-allowed text-secondary"
+            : value.length <= maxRender
+              ? "cursor-pointer"
+              : "cursor-pointer hover:bg-layer-1"
+        } ${buttonClassName}`}
+        onClick={handleOnClick}
+        disabled={disabled}
+      >
+        {label}
+        {!hideDropdownArrow && !disabled && <ChevronDownOutline className="h-3 w-3" aria-hidden="true" />}
+      </button>
+    ),
+    [
+      buttonClassName,
+      disabled,
+      fullWidth,
+      handleOnClick,
+      hideDropdownArrow,
+      label,
+      maxRender,
+      value.length,
+      setReferenceElement,
+    ]
+  );
+
+  const preventPropagation = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return (
+    <div className={`${fullHeight ? "h-full" : "h-5"}`} onClick={preventPropagation}>
+      <ComboDropDown
+        as="div"
+        ref={dropdownRef}
+        className={`h-full w-auto max-w-full flex-shrink-0 text-left ${className}`}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        onKeyDown={handleKeyDown}
+        button={comboButton}
+        renderByDefault={renderByDefault}
+        multiple
+      >
+        {isOpen && (
+          <Combobox.Options as="ul" className="fixed z-10" static>
+            <div
+              className={`z-10 my-1 h-auto w-48 rounded-sm border border-strong bg-surface-1 px-2 py-2.5 text-caption-sm-regular whitespace-nowrap shadow-raised-200 focus:outline-none ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
+                <SearchOutline className="h-3.5 w-3.5 text-tertiary" />
+                <Combobox.Input
+                  ref={inputRef}
+                  className="w-full bg-transparent px-2 py-1 text-caption-sm-regular text-secondary placeholder:text-placeholder focus:outline-none"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder={t("common.search.label")}
+                  displayValue={(assigned: any) => assigned?.name || ""}
+                  onKeyDown={searchInputKeyDown}
+                />
+              </div>
+              <div className={`mt-2 max-h-48 overflow-y-scroll`}>
+                {isLoading ? (
+                  <p className="text-center text-secondary">{t("common.loading")}</p>
+                ) : filteredOptions && filteredOptions.length > 0 ? (
+                  <ul className="space-y-1">
+                    {filteredOptions.map((option) => (
+                      <Combobox.Option
+                        as="li"
+                        key={option.value}
+                        value={option.value}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter") {
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }
+                        }}
+                        className={({ active, selected }) =>
+                          `flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none hover:bg-layer-1 ${
+                            active ? "bg-layer-1" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            {option.content}
+                            {selected && (
+                              <div className="flex-shrink-0">
+                                <TickOutline className={`h-3.5 w-3.5`} />
+                              </div>
+                            )}
+                          </>
+                        )}
+                      </Combobox.Option>
+                    ))}
+                  </ul>
+                ) : submitting ? (
+                  <LoadingOutline className="h-3.5 w-3.5 animate-spin" />
+                ) : canCreateLabel ? (
+                  <p
+                    onClick={() => {
+                      if (!query.length) return;
+                      handleAddLabel(query);
+                    }}
+                    className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                  >
+                    {/* TODO: translate here */}
+                    {query.length ? (
+                      <>
+                        + Add <span className="text-primary">"{query}"</span> to labels
+                      </>
+                    ) : (
+                      t("label.create.type")
+                    )}
+                  </p>
+                ) : (
+                  <p className="text-left text-secondary">{t("common.search.no_matching_results")}</p>
+                )}
+              </div>
+            </div>
+          </Combobox.Options>
+        )}
+      </ComboDropDown>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
new file mode 100644
index 0000000..97949fb
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
@@ -0,0 +1,260 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// i18n
+import { useTranslation } from "@plane/i18n";
+import { LabelsOutline } from "@makeplane/propel/icons";
+// types
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IIssueLabel } from "@plane/types";
+// ui
+// hooks
+import { cn } from "@plane/utils";
+import { useLabel } from "@/hooks/store/use-label";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { LabelDropdown } from "./label-dropdown";
+
+export interface IIssuePropertyLabels {
+  projectId: string | null;
+  value: string[];
+  defaultOptions?: unknown;
+  onChange: (data: string[]) => void;
+  disabled?: boolean;
+  hideDropdownArrow?: boolean;
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  placement?: Placement;
+  maxRender?: number;
+  noLabelBorder?: boolean;
+  placeholderText?: string;
+  onClose?: () => void;
+  renderByDefault?: boolean;
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+}
+
+type NoLabelProps = {
+  isMobile: boolean;
+  noLabelBorder: boolean;
+  fullWidth: boolean;
+  placeholderText?: string;
+};
+
+const NoLabel = observer(function NoLabel({ isMobile, noLabelBorder, fullWidth, placeholderText }: NoLabelProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={`${t("common.labels")}: None`} disabled={isMobile}>
+      <div
+        className={cn(
+          "flex h-full items-center justify-center gap-2 rounded-sm px-2.5 py-1 text-caption-sm-regular hover:bg-layer-1",
+          noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong",
+          fullWidth && "w-full"
+        )}
+      >
+        <LabelsOutline className="h-3.5 w-3.5" />
+        {placeholderText}
+      </div>
+    </Tooltip>
+  );
+});
+
+type LabelSummaryProps = {
+  isMobile: boolean;
+  fullWidth: boolean;
+  noLabelBorder: boolean;
+  disabled?: boolean;
+  projectLabels: IIssueLabel[];
+  value: string[];
+};
+
+function LabelSummary({ isMobile, fullWidth, noLabelBorder, disabled, projectLabels, value }: LabelSummaryProps) {
+  const { t } = useTranslation();
+  // single pass: collect the selected label names instead of filter -> map -> join
+  const selectedLabelNames = projectLabels.reduce<string[]>((names, label) => {
+    if (value.includes(label?.id)) names.push(label?.name);
+    return names;
+  }, []);
+  return (
+    <div
+      className={cn(
+        "flex h-5 flex-shrink-0 items-center justify-center rounded-sm px-2.5 text-caption-sm-regular",
+        fullWidth && "w-full",
+        noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong",
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      )}
+    >
+      <Tooltip label={`${t("common.labels")}: ${selectedLabelNames.join(", ")}`} layout="stacked" disabled={isMobile}>
+        <div className="flex h-full items-center gap-1.5 text-secondary">
+          <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
+          {`${value.length} Labels`}
+        </div>
+      </Tooltip>
+    </div>
+  );
+}
+
+type LabelItemProps = {
+  label: IIssueLabel;
+  isMobile: boolean;
+  renderByDefault: boolean;
+  disabled?: boolean;
+  fullWidth: boolean;
+  noLabelBorder: boolean;
+};
+
+const LabelItem = observer(function LabelItem({ label, isMobile, disabled, fullWidth, noLabelBorder }: LabelItemProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={`${t("common.labels")}: ${label?.name ?? ""}`} layout="stacked" disabled={isMobile}>
+      <div
+        className={cn(
+          "flex h-full max-w-full flex-shrink-0 items-center justify-center overflow-hidden rounded-sm px-2.5 text-caption-sm-regular hover:bg-layer-1",
+          !disabled && "cursor-pointer",
+          fullWidth && "w-full",
+          noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong"
+        )}
+      >
+        <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-secondary">
+          <span
+            className="h-2 w-2 flex-shrink-0 rounded-full"
+            style={{
+              backgroundColor: label?.color ?? "#000000",
+            }}
+          />
+          <div className="line-clamp-1 inline-block w-auto max-w-[200px] truncate">{label?.name}</div>
+        </div>
+      </div>
+    </Tooltip>
+  );
+});
+
+export const IssuePropertyLabels = observer(function IssuePropertyLabels(props: IIssuePropertyLabels) {
+  const {
+    projectId,
+    value,
+    defaultOptions = [],
+    onChange,
+    onClose,
+    disabled,
+    hideDropdownArrow = false,
+    buttonClassName = "",
+    placement,
+    maxRender = 2,
+    noLabelBorder = false,
+    placeholderText,
+    renderByDefault = true,
+    fullWidth = false,
+    fullHeight = false,
+  } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // store hooks
+  const { getProjectLabels } = useLabel();
+  const { isMobile } = usePlatformOS();
+  const storeLabels = getProjectLabels(projectId);
+
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    if (onClose) onClose();
+  };
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  useEffect(() => {
+    if (isOpen && inputRef.current && !isMobile) {
+      inputRef.current.focus();
+    }
+  }, [isOpen, isMobile]);
+
+  let projectLabels: IIssueLabel[] = defaultOptions as IIssueLabel[];
+  if (storeLabels && storeLabels.length > 0) projectLabels = storeLabels;
+
+  return (
+    <>
+      {value.length > 0 ? (
+        value.length <= maxRender ? (
+          projectLabels
+            ?.filter((l) => value.includes(l?.id))
+            .map((label) => (
+              <LabelDropdown
+                key={label.id}
+                projectId={projectId}
+                value={value}
+                onChange={onChange}
+                buttonClassName={buttonClassName}
+                placement={placement}
+                hideDropdownArrow={hideDropdownArrow}
+                fullWidth={fullWidth}
+                fullHeight={fullHeight}
+                label={
+                  <LabelItem
+                    label={label}
+                    isMobile={isMobile}
+                    renderByDefault={renderByDefault}
+                    disabled={disabled}
+                    fullWidth={fullWidth}
+                    noLabelBorder={noLabelBorder}
+                  />
+                }
+              />
+            ))
+        ) : (
+          <LabelDropdown
+            projectId={projectId}
+            value={value}
+            onChange={onChange}
+            hideDropdownArrow={hideDropdownArrow}
+            buttonClassName={buttonClassName}
+            placement={placement}
+            fullWidth={fullWidth}
+            fullHeight={fullHeight}
+            label={
+              <LabelSummary
+                isMobile={isMobile}
+                fullWidth={fullWidth}
+                noLabelBorder={noLabelBorder}
+                disabled={disabled}
+                projectLabels={projectLabels}
+                value={value}
+              />
+            }
+          />
+        )
+      ) : (
+        <LabelDropdown
+          projectId={projectId}
+          value={value}
+          onChange={onChange}
+          hideDropdownArrow={hideDropdownArrow}
+          buttonClassName={buttonClassName}
+          placement={placement}
+          fullWidth={fullWidth}
+          fullHeight={fullHeight}
+          label={
+            <NoLabel
+              isMobile={isMobile}
+              noLabelBorder={noLabelBorder}
+              fullWidth={fullWidth}
+              placeholderText={placeholderText}
+            />
+          }
+        />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx b/apps/web/core/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
new file mode 100644
index 0000000..dbabad4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/properties/with-display-properties-HOC.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import type { IIssueDisplayProperties } from "@plane/types";
+
+interface IWithDisplayPropertiesHOC {
+  displayProperties: IIssueDisplayProperties;
+  shouldRenderProperty?: (displayProperties: IIssueDisplayProperties) => boolean;
+  displayPropertyKey: keyof IIssueDisplayProperties | (keyof IIssueDisplayProperties)[];
+  children: ReactNode;
+}
+
+export const WithDisplayPropertiesHOC = observer(function WithDisplayPropertiesHOC({
+  displayProperties,
+  shouldRenderProperty,
+  displayPropertyKey,
+  children,
+}: IWithDisplayPropertiesHOC) {
+  let shouldDisplayPropertyFromFilters = false;
+  if (Array.isArray(displayPropertyKey))
+    shouldDisplayPropertyFromFilters = displayPropertyKey.every((key) => !!displayProperties[key]);
+  else shouldDisplayPropertyFromFilters = !!displayProperties[displayPropertyKey];
+
+  const renderProperty =
+    shouldDisplayPropertyFromFilters && (shouldRenderProperty ? shouldRenderProperty(displayProperties) : true);
+
+  if (!renderProperty) return null;
+
+  return <>{children}</>;
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
new file mode 100644
index 0000000..aea7af3
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -0,0 +1,239 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { omit } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { ARCHIVABLE_STATE_GROUPS } from "@plane/constants";
+import type { TIssue } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+// helper
+import { ArchiveIssueModal } from "../../archive-issue-modal";
+import { DeleteIssueModal } from "../../delete-issue-modal";
+import { CreateUpdateIssueModal } from "../../issue-modal/modal";
+import type { IQuickActionProps } from "../list/list-view-types";
+import type { MenuItemFactoryProps } from "./helper";
+import { useAllIssueMenuItems } from "./helper";
+
+export const AllIssueQuickActions = observer(function AllIssueQuickActions(props: IQuickActionProps) {
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleArchive,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+    placements = "bottom-start",
+    parentRef,
+  } = props;
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
+  const [_, setDuplicateWorkItemModal] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  const { getStateById } = useProjectState();
+  const { getProjectIdentifierById } = useProject();
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
+  const isEditingAllowed = !readOnly;
+  const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+  // auth
+  const isArchivingAllowed = handleArchive && isEditingAllowed;
+  const isInArchivableGroup = !!stateDetails && ARCHIVABLE_STATE_GROUPS.includes(stateDetails?.group);
+
+  const duplicateIssuePayload = omit(
+    {
+      ...issue,
+      name: `${issue.name} (copy)`,
+      sourceIssueId: issue.id,
+    },
+    ["id"]
+  );
+
+  // Menu items and modals using helper
+  const menuItemProps: MenuItemFactoryProps = {
+    issue,
+    workspaceSlug: workspaceSlug?.toString(),
+    projectIdentifier,
+    activeLayout: "Global issues",
+    isEditingAllowed,
+    isArchivingAllowed,
+    isDeletingAllowed: isEditingAllowed,
+    isInArchivableGroup,
+    setIssueToEdit,
+    setCreateUpdateIssueModal,
+    setDeleteIssueModal,
+    setArchiveIssueModal,
+    setDuplicateWorkItemModal,
+    handleDelete,
+    handleUpdate,
+    handleArchive,
+    storeType: EIssuesStoreType.GLOBAL,
+  };
+
+  const MENU_ITEMS = useAllIssueMenuItems(menuItemProps);
+
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+      onClick: () => {
+        item.action();
+      },
+    };
+  });
+
+  return (
+    <>
+      {/* Modals */}
+      <ArchiveIssueModal
+        data={issue}
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        onSubmit={handleArchive}
+      />
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        onClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(undefined);
+        }}
+        data={issueToEdit ?? duplicateIssuePayload}
+        onSubmit={async (data) => {
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
+        }}
+        storeType={EIssuesStoreType.GLOBAL}
+      />
+
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu
+        ellipsis
+        customButton={customActionButton}
+        portalElement={portalElement}
+        placement={placements}
+        menuItemsClassName="z-[14]"
+        maxHeight="lg"
+        useCaptureForOutsideClick
+        closeOnSelect
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+
+          // Render submenu if nestedMenuItems exist
+          if (item.nestedMenuItems && item.nestedMenuItems.length > 0) {
+            return (
+              <CustomMenu.SubMenu
+                key={item.key}
+                trigger={
+                  <div className="flex items-center gap-2">
+                    {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+                    <h5>{item.title}</h5>
+                    {item.description && (
+                      <p
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
+                        })}
+                      >
+                        {item.description}
+                      </p>
+                    )}
+                  </div>
+                }
+                disabled={item.disabled}
+                className={cn(
+                  "flex items-center gap-2",
+                  {
+                    "text-placeholder": item.disabled,
+                  },
+                  item.className
+                )}
+              >
+                {item.nestedMenuItems.map((nestedItem) => (
+                  <CustomMenu.MenuItem
+                    key={nestedItem.key}
+                    onClick={() => {
+                      nestedItem.action();
+                    }}
+                    className={cn(
+                      "flex items-center gap-2",
+                      {
+                        "text-placeholder": nestedItem.disabled,
+                      },
+                      nestedItem.className
+                    )}
+                    disabled={nestedItem.disabled}
+                  >
+                    {nestedItem.icon && <nestedItem.icon className={cn("h-3 w-3", nestedItem.iconClassName)} />}
+                    <div>
+                      <h5>{nestedItem.title}</h5>
+                      {nestedItem.description && (
+                        <p
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
+                          })}
+                        >
+                          {nestedItem.description}
+                        </p>
+                      )}
+                    </div>
+                  </CustomMenu.MenuItem>
+                ))}
+              </CustomMenu.SubMenu>
+            );
+          }
+
+          // Render regular menu item
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
new file mode 100644
index 0000000..beb885b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EIssuesStoreType } from "@plane/types";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { DeleteIssueModal } from "../../delete-issue-modal";
+import type { IQuickActionProps } from "../list/list-view-types";
+import type { MenuItemFactoryProps } from "./helper";
+import { useArchivedIssueMenuItems } from "./helper";
+
+export const ArchivedIssueQuickActions = observer(function ArchivedIssueQuickActions(props: IQuickActionProps) {
+  const {
+    issue,
+    handleDelete,
+    handleRestore,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+    placements = "bottom-end",
+    parentRef,
+  } = props;
+  // states
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+
+  const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
+  // derived values
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+  // auth
+  const isEditingAllowed =
+    allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT) && !readOnly;
+  const isRestoringAllowed =
+    handleRestore && allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT);
+
+  // Menu items and modals using helper
+  const menuItemProps: MenuItemFactoryProps = {
+    issue,
+    workspaceSlug: workspaceSlug?.toString(),
+    activeLayout,
+    isEditingAllowed,
+    isDeletingAllowed: isEditingAllowed,
+    isRestoringAllowed: !!isRestoringAllowed,
+    setIssueToEdit: () => {},
+    setCreateUpdateIssueModal: () => {},
+    setDeleteIssueModal,
+    handleRestore,
+    handleDelete,
+  };
+
+  const MENU_ITEMS = useArchivedIssueMenuItems(menuItemProps);
+
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        item.action();
+      },
+    };
+  });
+  return (
+    <>
+      {/* Modals */}
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu
+        ellipsis
+        customButton={customActionButton}
+        portalElement={portalElement}
+        placement={placements}
+        menuItemsClassName="z-[14]"
+        maxHeight="lg"
+        useCaptureForOutsideClick
+        closeOnSelect
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx
new file mode 100644
index 0000000..ecea63c
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/copy-menu-helper.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ISvgIcons } from "@plane/propel/icons";
+import type { TContextMenuItem } from "@plane/ui";
+
+export interface CopyMenuHelperProps {
+  baseItem: {
+    key: string;
+    title: string;
+    icon: React.FC<ISvgIcons>;
+    action: () => void;
+    shouldRender: boolean;
+  };
+  activeLayout: string;
+  setCreateUpdateIssueModal: (open: boolean) => void;
+  setDuplicateWorkItemModal?: (open: boolean) => void;
+  workspaceSlug?: string;
+}
+
+export const createCopyMenuWithDuplication = (props: CopyMenuHelperProps): TContextMenuItem => {
+  const { baseItem } = props;
+
+  return baseItem;
+};
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
new file mode 100644
index 0000000..256f368
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -0,0 +1,251 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { omit } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { TIssue } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+// helper
+import { ArchiveIssueModal } from "../../archive-issue-modal";
+import { DeleteIssueModal } from "../../delete-issue-modal";
+import { CreateUpdateIssueModal } from "../../issue-modal/modal";
+import type { IQuickActionProps } from "../list/list-view-types";
+import type { MenuItemFactoryProps } from "./helper";
+import { useCycleIssueMenuItems } from "./helper";
+
+export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(props: IQuickActionProps) {
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleRemoveFromView,
+    handleArchive,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+    placements = "bottom-start",
+    parentRef,
+  } = props;
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
+  const [_, setDuplicateWorkItemModal] = useState(false);
+  // router
+  const { workspaceSlug, cycleId } = useParams();
+  const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { allowPermissions } = useUserPermissions();
+  const { getStateById } = useProjectState();
+  const { getProjectIdentifierById } = useProject();
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
+  const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+  // auth
+  const isEditingAllowed =
+    allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT) && !readOnly;
+  const isArchivingAllowed = handleArchive && isEditingAllowed;
+  const isInArchivableGroup = !!stateDetails && ARCHIVABLE_STATE_GROUPS.includes(stateDetails?.group);
+  const isDeletingAllowed = isEditingAllowed;
+
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+
+  const duplicateIssuePayload = omit(
+    {
+      ...issue,
+      name: `${issue.name} (copy)`,
+      sourceIssueId: issue.id,
+    },
+    ["id"]
+  );
+
+  // Menu items and modals using helper
+  const menuItemProps: MenuItemFactoryProps = {
+    issue,
+    workspaceSlug: workspaceSlug?.toString(),
+    projectIdentifier,
+    activeLayout,
+    isEditingAllowed,
+    isArchivingAllowed,
+    isDeletingAllowed,
+    isInArchivableGroup,
+    setIssueToEdit,
+    setCreateUpdateIssueModal,
+    setDeleteIssueModal,
+    setArchiveIssueModal,
+    setDuplicateWorkItemModal,
+    handleRemoveFromView,
+    cycleId: cycleId?.toString(),
+    handleDelete,
+    handleUpdate,
+    handleArchive,
+    storeType: EIssuesStoreType.CYCLE,
+  };
+
+  const MENU_ITEMS = useCycleIssueMenuItems(menuItemProps);
+
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        item.action();
+      },
+    };
+  });
+
+  return (
+    <>
+      {/* Modals */}
+      <ArchiveIssueModal
+        data={issue}
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        onSubmit={handleArchive}
+      />
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        onClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(undefined);
+        }}
+        data={issueToEdit ?? duplicateIssuePayload}
+        onSubmit={async (data) => {
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
+        }}
+        storeType={EIssuesStoreType.CYCLE}
+      />
+
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu
+        ellipsis
+        placement={placements}
+        customButton={customActionButton}
+        portalElement={portalElement}
+        menuItemsClassName="z-[14]"
+        maxHeight="lg"
+        useCaptureForOutsideClick
+        closeOnSelect
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+
+          // Render submenu if nestedMenuItems exist
+          if (item.nestedMenuItems && item.nestedMenuItems.length > 0) {
+            return (
+              <CustomMenu.SubMenu
+                key={item.key}
+                trigger={
+                  <div className="flex items-center gap-2">
+                    {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+                    <h5>{item.title}</h5>
+                    {item.description && (
+                      <p
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
+                        })}
+                      >
+                        {item.description}
+                      </p>
+                    )}
+                  </div>
+                }
+                disabled={item.disabled}
+                className={cn(
+                  "flex items-center gap-2",
+                  {
+                    "text-placeholder": item.disabled,
+                  },
+                  item.className
+                )}
+              >
+                {item.nestedMenuItems.map((nestedItem) => (
+                  <CustomMenu.MenuItem
+                    key={nestedItem.key}
+                    onClick={() => {
+                      nestedItem.action();
+                    }}
+                    className={cn(
+                      "flex items-center gap-2",
+                      {
+                        "text-placeholder": nestedItem.disabled,
+                      },
+                      nestedItem.className
+                    )}
+                    disabled={nestedItem.disabled}
+                  >
+                    {nestedItem.icon && <nestedItem.icon className={cn("h-3 w-3", nestedItem.iconClassName)} />}
+                    <div>
+                      <h5>{nestedItem.title}</h5>
+                      {nestedItem.description && (
+                        <p
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
+                          })}
+                        >
+                          {nestedItem.description}
+                        </p>
+                      )}
+                    </div>
+                  </CustomMenu.MenuItem>
+                ))}
+              </CustomMenu.SubMenu>
+            );
+          }
+
+          // Render regular menu item
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx
new file mode 100644
index 0000000..0e15c8a
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/helper.tsx
@@ -0,0 +1,389 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import {
+  ArchiveOutline,
+  CloseCircleOutline,
+  CopyOutline,
+  DeleteOutline,
+  EditOutline,
+  LinkOutline,
+  NewTabOutline,
+  RestoreOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { EIssuesStoreType, TIssue } from "@plane/types";
+import type { TContextMenuItem } from "@plane/ui";
+import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
+import { createCopyMenuWithDuplication } from "./copy-menu-helper";
+
+// Generic helper function to handle optional function calls gracefully
+// Overload for functions without parameters
+export function handleOptionalAction(
+  optionalFn: (() => void) | (() => Promise<void>) | undefined,
+  actionName: string
+): void;
+
+// Overload for functions with one parameter
+export function handleOptionalAction<T>(
+  optionalFn: ((param: T) => void) | ((param: T) => Promise<void>) | undefined,
+  actionName: string,
+  param: T
+): void;
+
+// Implementation
+export function handleOptionalAction<T>(
+  optionalFn: (() => void) | (() => Promise<void>) | ((param: T) => void) | ((param: T) => Promise<void>) | undefined,
+  actionName: string,
+  param?: T
+): void {
+  if (optionalFn) {
+    if (param !== undefined) {
+      (optionalFn as (param: T) => void | Promise<void>)(param);
+    } else {
+      (optionalFn as () => void | Promise<void>)();
+    }
+  } else {
+    setToast({
+      type: TOAST_TYPE.ERROR,
+      title: "Action not available",
+      message: `${actionName} action is not implemented.`,
+    });
+  }
+}
+
+export interface MenuItemFactoryProps {
+  issue: TIssue;
+  workspaceSlug?: string;
+  projectIdentifier?: string;
+  activeLayout?: string;
+  isEditingAllowed: boolean;
+  isArchivingAllowed?: boolean;
+  isDeletingAllowed: boolean;
+  isRestoringAllowed?: boolean;
+  isInArchivableGroup?: boolean;
+  issueTypeDetail?: { is_active?: boolean };
+  // Action handlers
+  setIssueToEdit: (issue: TIssue | undefined) => void;
+  setCreateUpdateIssueModal: (open: boolean) => void;
+  setDeleteIssueModal: (open: boolean) => void;
+  setArchiveIssueModal?: (open: boolean) => void;
+  setDuplicateWorkItemModal?: (open: boolean) => void;
+  handleRemoveFromView?: () => void;
+  handleRestore?: () => Promise<void>;
+  // External handlers
+  handleDelete?: () => Promise<void>;
+  handleUpdate?: (data: TIssue) => Promise<void>;
+  handleArchive?: () => Promise<void>;
+  // Context-specific data
+  cycleId?: string;
+  moduleId?: string;
+  storeType?: EIssuesStoreType;
+}
+
+// Common action handlers hook
+export const useIssueActionHandlers = (props: MenuItemFactoryProps) => {
+  const { issue, workspaceSlug, projectIdentifier, handleRestore } = props;
+
+  const workItemLink = useMemo(
+    () =>
+      generateWorkItemLink({
+        workspaceSlug,
+        projectId: issue?.project_id,
+        issueId: issue?.id,
+        projectIdentifier,
+        sequenceId: issue?.sequence_id,
+      }),
+    [workspaceSlug, projectIdentifier, issue]
+  );
+
+  const handleCopyIssueLink = () =>
+    copyUrlToClipboard(workItemLink).then(() =>
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link copied",
+        message: "Work item link copied to clipboard",
+      })
+    );
+
+  const handleOpenInNewTab = () => window.open(workItemLink, "_blank");
+
+  const handleIssueRestore = async () => {
+    if (!handleRestore) {
+      handleOptionalAction(handleRestore, "Restore");
+      return;
+    }
+    await handleRestore()
+      // oxlint-disable-next-line promise/always-return
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: "Your work item can be found in project work items.",
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Work item could not be restored. Please try again.",
+        });
+      });
+  };
+
+  return {
+    workItemLink,
+    handleCopyIssueLink,
+    handleOpenInNewTab,
+    handleIssueRestore,
+  };
+};
+
+export const useMenuItemFactory = (props: MenuItemFactoryProps) => {
+  const { t } = useTranslation();
+  const actionHandlers = useIssueActionHandlers(props);
+
+  const {
+    issue,
+    activeLayout = "",
+    isEditingAllowed,
+    isArchivingAllowed = false,
+    isDeletingAllowed,
+    isRestoringAllowed = false,
+    isInArchivableGroup = false,
+    issueTypeDetail,
+    setIssueToEdit,
+    setCreateUpdateIssueModal,
+    setDeleteIssueModal,
+    setArchiveIssueModal,
+    setDuplicateWorkItemModal,
+    handleRemoveFromView,
+  } = props;
+
+  const createEditMenuItem = (customEditAction?: () => void): TContextMenuItem => ({
+    key: "edit",
+    title: t("common.actions.edit"),
+    icon: EditOutline,
+    action:
+      customEditAction ||
+      (() => {
+        setIssueToEdit(issue);
+        setCreateUpdateIssueModal(true);
+      }),
+    shouldRender: isEditingAllowed,
+  });
+
+  const createCopyMenuItem = (workspaceSlug?: string): TContextMenuItem => {
+    const baseItem = {
+      key: "make-a-copy",
+      title: t("common.actions.make_a_copy"),
+      icon: CopyOutline,
+      action: () => {
+        setCreateUpdateIssueModal(true);
+      },
+      shouldRender: isEditingAllowed && (issueTypeDetail?.is_active ?? true),
+    };
+
+    return createCopyMenuWithDuplication({
+      baseItem,
+      activeLayout,
+      setCreateUpdateIssueModal,
+      setDuplicateWorkItemModal,
+      workspaceSlug,
+    });
+  };
+
+  const createOpenInNewTabMenuItem = (): TContextMenuItem => ({
+    key: "open-in-new-tab",
+    title: t("common.actions.open_in_new_tab"),
+    icon: NewTabOutline,
+    action: actionHandlers.handleOpenInNewTab,
+  });
+
+  const createCopyLinkMenuItem = (): TContextMenuItem => ({
+    key: "copy-link",
+    title: t("common.actions.copy_link"),
+    icon: LinkOutline,
+    action: actionHandlers.handleCopyIssueLink,
+  });
+
+  const createRemoveFromCycleMenuItem = (): TContextMenuItem => ({
+    key: "remove-from-cycle",
+    title: "Remove from cycle",
+    icon: CloseCircleOutline,
+    action: () => handleOptionalAction(handleRemoveFromView, "Remove from cycle"),
+    shouldRender: isEditingAllowed,
+  });
+
+  const createRemoveFromModuleMenuItem = (): TContextMenuItem => ({
+    key: "remove-from-module",
+    title: "Remove from module",
+    icon: CloseCircleOutline,
+    action: () => handleOptionalAction(handleRemoveFromView, "Remove from module"),
+    shouldRender: isEditingAllowed,
+  });
+
+  const createArchiveMenuItem = (): TContextMenuItem => ({
+    key: "archive",
+    title: t("common.actions.archive"),
+    description: isInArchivableGroup ? undefined : t("issue.archive.description"),
+    icon: ArchiveOutline,
+    className: "items-start",
+    iconClassName: "mt-1",
+    action: () => handleOptionalAction(setArchiveIssueModal, "Archive", true),
+    disabled: !isInArchivableGroup,
+    shouldRender: isArchivingAllowed,
+  });
+
+  const createRestoreMenuItem = (): TContextMenuItem => ({
+    key: "restore",
+    title: "Restore",
+    icon: RestoreOutline,
+    action: actionHandlers.handleIssueRestore,
+    shouldRender: isRestoringAllowed,
+  });
+
+  const createDeleteMenuItem = (): TContextMenuItem => ({
+    key: "delete",
+    title: t("common.actions.delete"),
+    icon: DeleteOutline,
+    action: () => {
+      setDeleteIssueModal(true);
+    },
+    shouldRender: isDeletingAllowed,
+  });
+
+  return {
+    ...actionHandlers,
+    createEditMenuItem,
+    createCopyMenuItem,
+    createOpenInNewTabMenuItem,
+    createCopyLinkMenuItem,
+    createRemoveFromCycleMenuItem,
+    createRemoveFromModuleMenuItem,
+    createArchiveMenuItem,
+    createRestoreMenuItem,
+    createDeleteMenuItem,
+  };
+};
+
+// Predefined menu item sets for different contexts
+export const useProjectIssueMenuItems = (props: MenuItemFactoryProps): TContextMenuItem[] => {
+  const factory = useMenuItemFactory(props);
+
+  return useMemo(
+    () => [
+      factory.createEditMenuItem(),
+      factory.createCopyMenuItem(),
+      factory.createOpenInNewTabMenuItem(),
+      factory.createCopyLinkMenuItem(),
+      factory.createArchiveMenuItem(),
+      factory.createDeleteMenuItem(),
+    ],
+    [factory]
+  );
+};
+
+export const useWorkItemDetailMenuItems = (props: MenuItemFactoryProps): TContextMenuItem[] => {
+  const factory = useMenuItemFactory(props);
+
+  return useMemo(
+    () => [
+      factory.createCopyMenuItem(props.workspaceSlug),
+      factory.createOpenInNewTabMenuItem(),
+      factory.createArchiveMenuItem(),
+      factory.createRestoreMenuItem(),
+      factory.createDeleteMenuItem(),
+    ],
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+    [factory]
+  );
+};
+
+export const useAllIssueMenuItems = (props: MenuItemFactoryProps): TContextMenuItem[] => {
+  const factory = useMenuItemFactory(props);
+
+  return useMemo(
+    () => [
+      factory.createEditMenuItem(),
+      factory.createCopyMenuItem(),
+      factory.createOpenInNewTabMenuItem(),
+      factory.createCopyLinkMenuItem(),
+      factory.createArchiveMenuItem(),
+      factory.createDeleteMenuItem(),
+    ],
+    [factory]
+  );
+};
+
+export const useCycleIssueMenuItems = (props: MenuItemFactoryProps): TContextMenuItem[] => {
+  const factory = useMenuItemFactory(props);
+
+  const customEditAction = () => {
+    props.setIssueToEdit({
+      ...props.issue,
+      cycle_id: props.cycleId ?? null,
+    });
+    props.setCreateUpdateIssueModal(true);
+  };
+
+  return useMemo(
+    () => [
+      factory.createEditMenuItem(customEditAction),
+      factory.createCopyMenuItem(),
+      factory.createOpenInNewTabMenuItem(),
+      factory.createCopyLinkMenuItem(),
+      factory.createRemoveFromCycleMenuItem(),
+      factory.createArchiveMenuItem(),
+      factory.createDeleteMenuItem(),
+    ],
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+    [factory, props.cycleId]
+  );
+};
+
+export const useModuleIssueMenuItems = (props: MenuItemFactoryProps): TContextMenuItem[] => {
+  const factory = useMenuItemFactory(props);
+
+  const customEditAction = () => {
+    props.setIssueToEdit({
+      ...props.issue,
+      module_ids: props.moduleId ? [props.moduleId] : [],
+    });
+    props.setCreateUpdateIssueModal(true);
+  };
+
+  return useMemo(
+    () => [
+      factory.createEditMenuItem(customEditAction),
+      factory.createCopyMenuItem(),
+      factory.createOpenInNewTabMenuItem(),
+      factory.createCopyLinkMenuItem(),
+      factory.createRemoveFromModuleMenuItem(),
+      factory.createArchiveMenuItem(),
+      factory.createDeleteMenuItem(),
+    ],
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+    [factory, props.moduleId]
+  );
+};
+
+export const useArchivedIssueMenuItems = (props: MenuItemFactoryProps): TContextMenuItem[] => {
+  const factory = useMenuItemFactory(props);
+
+  return useMemo(
+    () => [
+      factory.createRestoreMenuItem(),
+      factory.createOpenInNewTabMenuItem(),
+      factory.createCopyLinkMenuItem(),
+      factory.createDeleteMenuItem(),
+    ],
+    [factory]
+  );
+};
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/index.ts b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/index.ts
new file mode 100644
index 0000000..0a7b169
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/index.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./all-issue";
+export * from "./archived-issue";
+export * from "./cycle-issue";
+export * from "./module-issue";
+export * from "./project-issue";
+export * from "./helper";
+export * from "../../workspace-draft/quick-action";
+export * from "./issue-detail";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
new file mode 100644
index 0000000..879dde4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/issue-detail.tsx
@@ -0,0 +1,338 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { omit } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
+// plane imports
+import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { TIssue } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+// helper
+import { ArchiveIssueModal } from "../../archive-issue-modal";
+import { DeleteIssueModal } from "../../delete-issue-modal";
+import { CreateUpdateIssueModal } from "../../issue-modal/modal";
+import type { IQuickActionProps } from "../list/list-view-types";
+import type { MenuItemFactoryProps } from "./helper";
+import { useWorkItemDetailMenuItems } from "./helper";
+import { IconButton } from "@plane/propel/icon-button";
+
+type TWorkItemDetailQuickActionProps = IQuickActionProps & {
+  toggleEditIssueModal?: (value: boolean) => void;
+  toggleDeleteIssueModal?: (value: boolean) => void;
+  toggleDuplicateIssueModal?: (value: boolean) => void;
+  toggleArchiveIssueModal?: (value: boolean) => void;
+  isPeekMode?: boolean;
+};
+
+export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickActions(
+  props: TWorkItemDetailQuickActionProps
+) {
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleArchive,
+    handleRestore,
+    portalElement,
+    readOnly = false,
+    placements = "bottom-end",
+    parentRef,
+    toggleEditIssueModal,
+    toggleDeleteIssueModal,
+    toggleDuplicateIssueModal,
+    toggleArchiveIssueModal,
+    isPeekMode = false,
+  } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
+  const [_, setDuplicateWorkItemModal] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+  const { getStateById } = useProjectState();
+  const { getProjectIdentifierById } = useProject();
+  // derived values
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+  const stateDetails = getStateById(issue.state_id);
+  const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+  // auth
+  const isEditingAllowed =
+    allowPermissions(
+      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      workspaceSlug?.toString(),
+      issue.project_id ?? undefined
+    ) && !readOnly;
+
+  const isArchivingAllowed = !issue.archived_at && isEditingAllowed;
+  const isInArchivableGroup = !!stateDetails && ARCHIVABLE_STATE_GROUPS.includes(stateDetails?.group);
+  const isRestoringAllowed = !!issue.archived_at && isEditingAllowed;
+
+  const isDeletingAllowed = isEditingAllowed;
+
+  const duplicateIssuePayload = omit(
+    {
+      ...issue,
+      name: `${issue.name} (copy)`,
+      sourceIssueId: issue.id,
+    },
+    ["id"]
+  );
+
+  const customEditAction = () => {
+    setCreateUpdateIssueModal(true);
+    if (toggleEditIssueModal) toggleEditIssueModal(true);
+  };
+
+  const customDeleteAction = async () => {
+    setDeleteIssueModal(true);
+    if (toggleDeleteIssueModal) toggleDeleteIssueModal(true);
+  };
+
+  const customDuplicateAction = async () => {
+    setDuplicateWorkItemModal(true);
+    if (toggleDuplicateIssueModal) {
+      toggleDuplicateIssueModal(true);
+    }
+  };
+
+  const customArchiveAction = async () => {
+    setArchiveIssueModal(true);
+    if (toggleArchiveIssueModal) toggleArchiveIssueModal(true);
+  };
+
+  const customRestoreAction = async () => {
+    if (handleRestore) await handleRestore();
+  };
+
+  // Menu items and modals using helper
+  const menuItemProps: MenuItemFactoryProps = {
+    issue,
+    workspaceSlug: workspaceSlug?.toString(),
+    projectIdentifier,
+    activeLayout,
+    isEditingAllowed,
+    isArchivingAllowed,
+    isRestoringAllowed,
+    isDeletingAllowed,
+    isInArchivableGroup,
+    setIssueToEdit,
+    setCreateUpdateIssueModal: customEditAction,
+    setDeleteIssueModal: customDeleteAction,
+    setArchiveIssueModal: customArchiveAction,
+    setDuplicateWorkItemModal: customDuplicateAction,
+    handleDelete: customDeleteAction,
+    handleUpdate,
+    handleArchive: customArchiveAction,
+    handleRestore: customRestoreAction,
+    storeType: EIssuesStoreType.PROJECT,
+  };
+
+  //   const MENU_ITEMS = useWorkItemDetailMenuItems(menuItemProps);
+  const baseMenuItems = useWorkItemDetailMenuItems(menuItemProps);
+
+  const MENU_ITEMS = baseMenuItems
+    // oxlint-disable-next-line oxc/no-map-spread
+    .map((item) => {
+      // Customize edit action for work item
+      if (item.key === "edit") {
+        return {
+          ...item,
+          shouldRender: isEditingAllowed && !isPeekMode,
+        };
+      }
+      // Customize delete action for work item
+      if (item.key === "delete") {
+        return {
+          ...item,
+        };
+      }
+      // Hide copy link in peek mode
+      if (item.key === "copy-link") {
+        return {
+          ...item,
+          shouldRender: !isPeekMode,
+        };
+      }
+      return item;
+    })
+    .filter(function MENU_ITEMS(item) {
+      return item.shouldRender !== false;
+    });
+
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        item.action();
+      },
+    };
+  });
+
+  return (
+    <>
+      {/* Modals */}
+      <ArchiveIssueModal
+        data={issue}
+        isOpen={archiveIssueModal}
+        handleClose={() => {
+          setArchiveIssueModal(false);
+          if (toggleArchiveIssueModal) toggleArchiveIssueModal(false);
+        }}
+        onSubmit={handleArchive}
+      />
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => {
+          setDeleteIssueModal(false);
+          if (toggleDeleteIssueModal) toggleDeleteIssueModal(false);
+        }}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        onClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(undefined);
+          if (toggleEditIssueModal) toggleEditIssueModal(false);
+        }}
+        data={issueToEdit ?? duplicateIssuePayload}
+        onSubmit={async (data) => {
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
+        }}
+        storeType={EIssuesStoreType.PROJECT}
+        fetchIssueDetails={false}
+      />
+
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu
+        ellipsis
+        placement={placements}
+        customButton={<IconButton size="lg" variant="secondary" icon={MoreHorizontalOutline} />}
+        portalElement={portalElement}
+        menuItemsClassName="z-[14]"
+        maxHeight="lg"
+        closeOnSelect
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+
+          // Render submenu if nestedMenuItems exist
+          if (item.nestedMenuItems && item.nestedMenuItems.length > 0) {
+            return (
+              <CustomMenu.SubMenu
+                key={item.key}
+                trigger={
+                  <div className="flex items-center gap-2">
+                    {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+                    <h5>{item.title}</h5>
+                    {item.description && (
+                      <p
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
+                        })}
+                      >
+                        {item.description}
+                      </p>
+                    )}
+                  </div>
+                }
+                disabled={item.disabled}
+                className={cn(
+                  "flex items-center gap-2",
+                  {
+                    "text-placeholder": item.disabled,
+                  },
+                  item.className
+                )}
+              >
+                {item.nestedMenuItems.map((nestedItem) => (
+                  <CustomMenu.MenuItem
+                    key={nestedItem.key}
+                    onClick={() => {
+                      nestedItem.action();
+                    }}
+                    className={cn(
+                      "flex items-center gap-2",
+                      {
+                        "text-placeholder": nestedItem.disabled,
+                      },
+                      nestedItem.className
+                    )}
+                    disabled={nestedItem.disabled}
+                  >
+                    {nestedItem.icon && <nestedItem.icon className={cn("h-3 w-3", nestedItem.iconClassName)} />}
+                    <div>
+                      <h5>{nestedItem.title}</h5>
+                      {nestedItem.description && (
+                        <p
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
+                          })}
+                        >
+                          {nestedItem.description}
+                        </p>
+                      )}
+                    </div>
+                  </CustomMenu.MenuItem>
+                ))}
+              </CustomMenu.SubMenu>
+            );
+          }
+
+          // Render regular menu item
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
new file mode 100644
index 0000000..dc08ea7
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -0,0 +1,251 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { omit } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { TIssue } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+// helper
+import { ArchiveIssueModal } from "../../archive-issue-modal";
+import { DeleteIssueModal } from "../../delete-issue-modal";
+import { CreateUpdateIssueModal } from "../../issue-modal/modal";
+import type { IQuickActionProps } from "../list/list-view-types";
+import type { MenuItemFactoryProps } from "./helper";
+import { useModuleIssueMenuItems } from "./helper";
+
+export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions(props: IQuickActionProps) {
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleRemoveFromView,
+    handleArchive,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+    placements = "bottom-start",
+    parentRef,
+  } = props;
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
+  const [_, setDuplicateWorkItemModal] = useState(false);
+  // router
+  const { workspaceSlug, moduleId } = useParams();
+  // store hooks
+  const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
+  const { allowPermissions } = useUserPermissions();
+  const { getStateById } = useProjectState();
+  const { getProjectIdentifierById } = useProject();
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
+  const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+  // auth
+  const isEditingAllowed =
+    allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT) && !readOnly;
+  const isArchivingAllowed = handleArchive && isEditingAllowed;
+  const isInArchivableGroup = !!stateDetails && ARCHIVABLE_STATE_GROUPS.includes(stateDetails?.group);
+  const isDeletingAllowed = isEditingAllowed;
+
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+
+  const duplicateIssuePayload = omit(
+    {
+      ...issue,
+      name: `${issue.name} (copy)`,
+      sourceIssueId: issue.id,
+    },
+    ["id"]
+  );
+
+  // Menu items and modals using helper
+  const menuItemProps: MenuItemFactoryProps = {
+    issue,
+    workspaceSlug: workspaceSlug?.toString(),
+    projectIdentifier,
+    activeLayout,
+    isEditingAllowed,
+    isArchivingAllowed,
+    isDeletingAllowed,
+    isInArchivableGroup,
+    setIssueToEdit,
+    setCreateUpdateIssueModal,
+    setDeleteIssueModal,
+    setArchiveIssueModal,
+    setDuplicateWorkItemModal,
+    handleRemoveFromView,
+    moduleId: moduleId?.toString(),
+    handleDelete,
+    handleUpdate,
+    handleArchive,
+    storeType: EIssuesStoreType.MODULE,
+  };
+
+  const MENU_ITEMS = useModuleIssueMenuItems(menuItemProps);
+
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        item.action();
+      },
+    };
+  });
+  return (
+    <>
+      {/* Modals */}
+      <ArchiveIssueModal
+        data={issue}
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        onSubmit={handleArchive}
+      />
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        onClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(undefined);
+        }}
+        data={issueToEdit ?? duplicateIssuePayload}
+        onSubmit={async (data) => {
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
+        }}
+        storeType={EIssuesStoreType.MODULE}
+      />
+
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu
+        ellipsis
+        placement={placements}
+        customButton={customActionButton}
+        portalElement={portalElement}
+        menuItemsClassName="z-[14]"
+        maxHeight="lg"
+        useCaptureForOutsideClick
+        closeOnSelect
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+
+          // Render submenu if nestedMenuItems exist
+          if (item.nestedMenuItems && item.nestedMenuItems.length > 0) {
+            return (
+              <CustomMenu.SubMenu
+                key={item.key}
+                trigger={
+                  <div className="flex items-center gap-2">
+                    {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+                    <h5>{item.title}</h5>
+                    {item.description && (
+                      <p
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
+                        })}
+                      >
+                        {item.description}
+                      </p>
+                    )}
+                  </div>
+                }
+                disabled={item.disabled}
+                className={cn(
+                  "flex items-center gap-2",
+                  {
+                    "text-placeholder": item.disabled,
+                  },
+                  item.className
+                )}
+              >
+                {item.nestedMenuItems.map((nestedItem) => (
+                  <CustomMenu.MenuItem
+                    key={nestedItem.key}
+                    onClick={() => {
+                      nestedItem.action();
+                    }}
+                    className={cn(
+                      "flex items-center gap-2",
+                      {
+                        "text-placeholder": nestedItem.disabled,
+                      },
+                      nestedItem.className
+                    )}
+                    disabled={nestedItem.disabled}
+                  >
+                    {nestedItem.icon && <nestedItem.icon className={cn("h-3 w-3", nestedItem.iconClassName)} />}
+                    <div>
+                      <h5>{nestedItem.title}</h5>
+                      {nestedItem.description && (
+                        <p
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
+                          })}
+                        >
+                          {nestedItem.description}
+                        </p>
+                      )}
+                    </div>
+                  </CustomMenu.MenuItem>
+                ))}
+              </CustomMenu.SubMenu>
+            );
+          }
+
+          // Render regular menu item
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
new file mode 100644
index 0000000..e1b2a4c
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -0,0 +1,252 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { omit } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { ARCHIVABLE_STATE_GROUPS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { TIssue } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+// helper
+import { ArchiveIssueModal } from "../../archive-issue-modal";
+import { DeleteIssueModal } from "../../delete-issue-modal";
+import { CreateUpdateIssueModal } from "../../issue-modal/modal";
+import type { IQuickActionProps } from "../list/list-view-types";
+import type { MenuItemFactoryProps } from "./helper";
+import { useProjectIssueMenuItems } from "./helper";
+
+export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActions(props: IQuickActionProps) {
+  const {
+    issue,
+    handleDelete,
+    handleUpdate,
+    handleArchive,
+    customActionButton,
+    portalElement,
+    readOnly = false,
+    placements = "bottom-end",
+    parentRef,
+  } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // states
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  const [archiveIssueModal, setArchiveIssueModal] = useState(false);
+  const [_, setDuplicateWorkItemModal] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+  const { getStateById } = useProjectState();
+  const { getProjectIdentifierById } = useProject();
+  // derived values
+  const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
+  const stateDetails = getStateById(issue.state_id);
+  const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+  // auth
+  const isEditingAllowed =
+    allowPermissions(
+      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      workspaceSlug?.toString(),
+      issue.project_id ?? undefined
+    ) && !readOnly;
+  const isArchivingAllowed = handleArchive && isEditingAllowed;
+  const isInArchivableGroup = !!stateDetails && ARCHIVABLE_STATE_GROUPS.includes(stateDetails?.group);
+  const isDeletingAllowed = isEditingAllowed;
+
+  const duplicateIssuePayload = omit(
+    {
+      ...issue,
+      name: `${issue.name} (copy)`,
+      sourceIssueId: issue.id,
+    },
+    ["id"]
+  );
+
+  // Menu items and modals using helper
+  const menuItemProps: MenuItemFactoryProps = {
+    issue,
+    workspaceSlug: workspaceSlug?.toString(),
+    projectIdentifier,
+    activeLayout,
+    isEditingAllowed,
+    isArchivingAllowed,
+    isDeletingAllowed,
+    isInArchivableGroup,
+    setIssueToEdit,
+    setCreateUpdateIssueModal,
+    setDeleteIssueModal,
+    setArchiveIssueModal,
+    setDuplicateWorkItemModal,
+    handleDelete,
+    handleUpdate,
+    handleArchive,
+    storeType: EIssuesStoreType.PROJECT,
+  };
+
+  const MENU_ITEMS = useProjectIssueMenuItems(menuItemProps);
+
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        item.action();
+      },
+    };
+  });
+
+  return (
+    <>
+      {/* Modals */}
+      <ArchiveIssueModal
+        data={issue}
+        isOpen={archiveIssueModal}
+        handleClose={() => setArchiveIssueModal(false)}
+        onSubmit={handleArchive}
+      />
+      <DeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={handleDelete}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        onClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(undefined);
+        }}
+        data={issueToEdit ?? duplicateIssuePayload}
+        onSubmit={async (data) => {
+          if (issueToEdit && handleUpdate) await handleUpdate(data);
+        }}
+        storeType={EIssuesStoreType.PROJECT}
+      />
+
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu
+        ellipsis
+        placement={placements}
+        customButton={customActionButton}
+        portalElement={portalElement}
+        menuItemsClassName="z-[14]"
+        maxHeight="lg"
+        closeOnSelect
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+
+          // Render submenu if nestedMenuItems exist
+          if (item.nestedMenuItems && item.nestedMenuItems.length > 0) {
+            return (
+              <CustomMenu.SubMenu
+                key={item.key}
+                trigger={
+                  <div className="flex items-center gap-2">
+                    {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+                    <h5>{item.title}</h5>
+                    {item.description && (
+                      <p
+                        className={cn("whitespace-pre-line text-tertiary", {
+                          "text-placeholder": item.disabled,
+                        })}
+                      >
+                        {item.description}
+                      </p>
+                    )}
+                  </div>
+                }
+                disabled={item.disabled}
+                className={cn(
+                  "flex items-center gap-2",
+                  {
+                    "text-placeholder": item.disabled,
+                  },
+                  item.className
+                )}
+              >
+                {item.nestedMenuItems.map((nestedItem) => (
+                  <CustomMenu.MenuItem
+                    key={nestedItem.key}
+                    onClick={() => {
+                      nestedItem.action();
+                    }}
+                    className={cn(
+                      "flex items-center gap-2",
+                      {
+                        "text-placeholder": nestedItem.disabled,
+                      },
+                      nestedItem.className
+                    )}
+                    disabled={nestedItem.disabled}
+                  >
+                    {nestedItem.icon && <nestedItem.icon className={cn("h-3 w-3", nestedItem.iconClassName)} />}
+                    <div>
+                      <h5>{nestedItem.title}</h5>
+                      {nestedItem.description && (
+                        <p
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": nestedItem.disabled,
+                          })}
+                        >
+                          {nestedItem.description}
+                        </p>
+                      )}
+                    </div>
+                  </CustomMenu.MenuItem>
+                ))}
+              </CustomMenu.SubMenu>
+            );
+          }
+
+          // Render regular menu item
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
new file mode 100644
index 0000000..6645e35
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+import { Row } from "@plane/ui";
+import type { TQuickAddIssueButton } from "../root";
+
+export const GanttQuickAddIssueButton = observer(function GanttQuickAddIssueButton(props: TQuickAddIssueButton) {
+  const { onClick, isEpic = false } = props;
+  const { t } = useTranslation();
+  return (
+    <button
+      type="button"
+      className="sticky bottom-0 z-[1] flex w-full cursor-pointer items-center border-t-[1px] border-subtle bg-layer-transparent hover:bg-layer-transparent-hover"
+      onClick={onClick}
+    >
+      <Row className="flex gap-2 py-2">
+        <AddOutline className="my-auto h-3.5 w-3.5" />
+        <span className="text-13 font-medium">{t(`${isEpic ? "epic.new" : "issue.new"}`)}</span>
+      </Row>
+    </button>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/index.ts b/apps/web/core/components/issues/issue-layouts/quick-add/button/index.ts
new file mode 100644
index 0000000..b19f48e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./list";
+export * from "./kanban";
+export * from "./gantt";
+export * from "./spreadsheet";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
new file mode 100644
index 0000000..20e5909
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+import type { TQuickAddIssueButton } from "../root";
+
+export const KanbanQuickAddIssueButton = observer(function KanbanQuickAddIssueButton(props: TQuickAddIssueButton) {
+  const { onClick, isEpic = false } = props;
+  const { t } = useTranslation();
+  return (
+    <div
+      className="flex w-full cursor-pointer items-center gap-2 rounded-lg bg-layer-transparent px-2 py-1 py-1.5 hover:bg-layer-transparent-hover"
+      onClick={onClick}
+    >
+      <AddOutline className="h-3.5 w-3.5" />
+      <span className="text-13 font-medium">{isEpic ? t("epic.new") : t("issue.new")}</span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
new file mode 100644
index 0000000..51826e7
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+import { Row } from "@plane/ui";
+import type { TQuickAddIssueButton } from "../root";
+
+export const ListQuickAddIssueButton = observer(function ListQuickAddIssueButton(props: TQuickAddIssueButton) {
+  const { onClick, isEpic = false } = props;
+  const { t } = useTranslation();
+  return (
+    <Row
+      className="flex w-full cursor-pointer items-center gap-2 bg-layer-transparent py-3 hover:bg-layer-transparent-hover"
+      onClick={onClick}
+    >
+      <AddOutline className="h-3.5 w-3.5" />
+      <span className="text-13 font-medium">{isEpic ? t("epic.new") : t("issue.new")}</span>
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
new file mode 100644
index 0000000..7443260
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+import type { TQuickAddIssueButton } from "../root";
+
+export const SpreadsheetAddIssueButton = observer(function SpreadsheetAddIssueButton(props: TQuickAddIssueButton) {
+  const { onClick, isEpic = false } = props;
+  const { t } = useTranslation();
+  return (
+    <div className="flex items-center">
+      <button
+        type="button"
+        className="flex w-full items-center gap-x-[6px] bg-layer-transparent px-2 py-2 transition-colors hover:bg-layer-transparent-hover"
+        onClick={onClick}
+      >
+        <AddOutline className="h-3.5 w-3.5" />
+        <span className="text-13 font-medium">{isEpic ? t("epic.add.label") : t("issue.add.label")}</span>
+      </button>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
new file mode 100644
index 0000000..9fd69a8
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { TQuickAddIssueForm } from "../root";
+
+export const CalendarQuickAddIssueForm = observer(function CalendarQuickAddIssueForm(props: TQuickAddIssueForm) {
+  const { ref, isOpen, projectDetail, register, onSubmit, isEpic } = props;
+
+  return (
+    <div
+      className={`z-20 w-full transition-all ${
+        isOpen ? "scale-100 opacity-100" : "pointer-events-none scale-95 opacity-0"
+      }`}
+    >
+      <form
+        ref={ref}
+        onSubmit={onSubmit}
+        className="z-50 flex w-full items-center gap-x-2 rounded-sm border-subtle bg-surface-1 px-2 transition-opacity md:border-[0.5px] md:shadow-raised-100"
+      >
+        <h4 className="text-13 leading-5 text-placeholder md:text-11">{projectDetail?.identifier ?? "..."}</h4>
+        <input
+          type="text"
+          autoComplete="off"
+          placeholder={isEpic ? "Epic Title" : "Work item Title"}
+          {...register("name", {
+            required: `${isEpic ? "Epic" : "Work item"} title is required.`,
+          })}
+          className="w-full rounded-md bg-transparent py-1.5 pr-2 text-13 leading-5 font-medium text-secondary outline-none md:text-11"
+        />
+      </form>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
new file mode 100644
index 0000000..65d05c4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+import type { TQuickAddIssueForm } from "../root";
+
+export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(props: TQuickAddIssueForm) {
+  const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
+  const { t } = useTranslation();
+  return (
+    <div className={cn("shadow-raised-200", hasError && "border border-danger-strong/20 bg-danger-subtle")}>
+      <form
+        ref={ref}
+        onSubmit={onSubmit}
+        className="flex w-full items-center gap-x-3 border-[0.5px] border-subtle bg-surface-1 px-3"
+      >
+        <div className="flex w-full items-center gap-3">
+          <div className="text-11 font-medium text-placeholder">{projectDetail?.identifier ?? "..."}</div>
+          <input
+            type="text"
+            autoComplete="off"
+            placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
+            {...register("name", {
+              required: isEpic ? t("epic.title.required") : t("issue.title.required"),
+            })}
+            className="w-full rounded-md bg-transparent px-2 py-3 text-13 leading-5 font-medium text-secondary outline-none"
+          />
+        </div>
+      </form>
+      <div className="bg-surface-1 px-3 py-2 text-11 text-secondary italic">
+        {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/index.ts b/apps/web/core/components/issues/issue-layouts/quick-add/form/index.ts
new file mode 100644
index 0000000..1ecd9aa
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./list";
+export * from "./kanban";
+export * from "./gantt";
+export * from "./calendar";
+export * from "./spreadsheet";
+export * from "./root";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
new file mode 100644
index 0000000..f6a1aba
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { TQuickAddIssueForm } from "../root";
+
+export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm(props: TQuickAddIssueForm) {
+  const { ref, projectDetail, register, onSubmit, isEpic } = props;
+  const { t } = useTranslation();
+  return (
+    <div className="m-1 overflow-hidden rounded-sm bg-layer-2 shadow-raised-200">
+      <form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 p-3">
+        <div className="w-full">
+          <h4 className="text-11 leading-5 font-medium text-tertiary">{projectDetail?.identifier ?? "..."}</h4>
+          <input
+            autoComplete="off"
+            placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
+            {...register("name", {
+              required: isEpic ? t("epic.title.required") : t("issue.title.required"),
+            })}
+            className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-13 leading-5 font-medium text-secondary outline-none"
+          />
+        </div>
+      </form>
+      <div className="bg-layer-3 px-3 py-2 text-11 text-tertiary italic">
+        {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
new file mode 100644
index 0000000..7f9ff9b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { TQuickAddIssueForm } from "../root";
+
+export const ListQuickAddIssueForm = observer(function ListQuickAddIssueForm(props: TQuickAddIssueForm) {
+  const { ref, projectDetail, register, onSubmit, isEpic } = props;
+  const { t } = useTranslation();
+  return (
+    <div className="shadow-raised-200">
+      <form
+        ref={ref}
+        onSubmit={onSubmit}
+        className="flex w-full items-center gap-x-3 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-3"
+      >
+        <div className="flex w-full items-center gap-3">
+          <div className="text-11 font-medium text-placeholder">{projectDetail?.identifier ?? "..."}</div>
+          <input
+            type="text"
+            autoComplete="off"
+            placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
+            {...register("name", {
+              required: isEpic ? t("epic.title.required") : t("issue.title.required"),
+            })}
+            className="w-full rounded-md bg-transparent px-2 py-3 text-13 leading-5 font-medium text-secondary outline-none"
+          />
+        </div>
+      </form>
+      <div className="px-3 py-2 text-11 text-secondary italic">
+        {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/root.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/root.tsx
new file mode 100644
index 0000000..bb5ab7d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/root.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC } from "react";
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import type { UseFormRegister, UseFormSetFocus } from "react-hook-form";
+// plane constants
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import type { TIssue } from "@plane/types";
+import { EIssueLayoutTypes } from "@plane/types";
+// components
+import type { TQuickAddIssueForm } from "@/components/issues/issue-layouts/quick-add";
+import {
+  CalendarQuickAddIssueForm,
+  GanttQuickAddIssueForm,
+  KanbanQuickAddIssueForm,
+  ListQuickAddIssueForm,
+  SpreadsheetQuickAddIssueForm,
+} from "@/components/issues/issue-layouts/quick-add";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import useKeypress from "@/hooks/use-keypress";
+
+export type TQuickAddIssueFormRoot = {
+  isOpen: boolean;
+  layout: EIssueLayoutTypes;
+  prePopulatedData?: Partial<TIssue>;
+  projectId: string;
+  hasError?: boolean;
+  setFocus: UseFormSetFocus<TIssue>;
+  register: UseFormRegister<TIssue>;
+  onSubmit: () => void;
+  onClose: () => void;
+  isEpic: boolean;
+};
+
+export const QuickAddIssueFormRoot = observer(function QuickAddIssueFormRoot(props: TQuickAddIssueFormRoot) {
+  const { isOpen, layout, projectId, hasError = false, setFocus, register, onSubmit, onClose, isEpic } = props;
+  // store hooks
+  const { getProjectById } = useProject();
+  // derived values
+  const projectDetail = getProjectById(projectId);
+  // refs
+  const ref = useRef<HTMLFormElement>(null);
+  // click detection
+  useKeypress("Escape", onClose);
+  useOutsideClickDetector(ref, onClose);
+  // set focus on name input
+  useEffect(() => {
+    setFocus("name");
+  }, [setFocus]);
+
+  if (!projectDetail) return <></>;
+
+  const QUICK_ADD_ISSUE_FORMS: Record<EIssueLayoutTypes, FC<TQuickAddIssueForm>> = {
+    [EIssueLayoutTypes.LIST]: ListQuickAddIssueForm,
+    [EIssueLayoutTypes.KANBAN]: KanbanQuickAddIssueForm,
+    [EIssueLayoutTypes.CALENDAR]: CalendarQuickAddIssueForm,
+    [EIssueLayoutTypes.GANTT]: GanttQuickAddIssueForm,
+    [EIssueLayoutTypes.SPREADSHEET]: SpreadsheetQuickAddIssueForm,
+  };
+
+  const CurrentLayoutQuickAddIssueForm = QUICK_ADD_ISSUE_FORMS[layout] ?? null;
+
+  if (!CurrentLayoutQuickAddIssueForm) return <></>;
+
+  return (
+    <CurrentLayoutQuickAddIssueForm
+      ref={ref}
+      isOpen={isOpen}
+      projectDetail={projectDetail}
+      hasError={hasError}
+      register={register}
+      onSubmit={onSubmit}
+      isEpic={isEpic}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
new file mode 100644
index 0000000..ebf5978
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import type { TQuickAddIssueForm } from "../root";
+
+export const SpreadsheetQuickAddIssueForm = observer(function SpreadsheetQuickAddIssueForm(props: TQuickAddIssueForm) {
+  const { ref, projectDetail, register, onSubmit, isEpic } = props;
+  const { t } = useTranslation();
+  return (
+    <div className="pb-2">
+      <form
+        ref={ref}
+        onSubmit={onSubmit}
+        className="z-10 flex items-center gap-x-5 border-[0.5px] border-t-0 border-subtle bg-surface-1 px-4 shadow-raised-200"
+      >
+        <h4 className="w-20 text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
+        <input
+          type="text"
+          autoComplete="off"
+          placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
+          {...register("name", {
+            required: isEpic ? t("epic.title.required") : t("issue.title.required"),
+          })}
+          className="w-full rounded-md bg-transparent py-3 text-13 leading-5 text-secondary outline-none"
+        />
+      </form>
+      <p className="mt-3 ml-3 text-11 text-secondary italic">
+        {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
+      </p>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/index.ts b/apps/web/core/components/issues/issue-layouts/quick-add/index.ts
new file mode 100644
index 0000000..5fddc3b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+export * from "./form";
+export * from "./button";
diff --git a/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
new file mode 100644
index 0000000..fb991a2
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC } from "react";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import type { UseFormRegister } from "react-hook-form";
+import { useForm } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+import { setPromiseToast } from "@plane/propel/toast";
+import type { IProject, TIssue, EIssueLayoutTypes } from "@plane/types";
+import { cn, createIssuePayload } from "@plane/utils";
+// local imports
+import { QuickAddIssueFormRoot } from "./form";
+import { CreateIssueToastActionItems } from "../../create-issue-toast-action-items";
+
+export type TQuickAddIssueForm = {
+  ref: React.RefObject<HTMLFormElement | null>;
+  isOpen: boolean;
+  projectDetail: IProject;
+  hasError: boolean;
+  register: UseFormRegister<TIssue>;
+  onSubmit: () => void;
+  isEpic: boolean;
+};
+
+export type TQuickAddIssueButton = {
+  isEpic?: boolean;
+  onClick: () => void;
+};
+
+type TQuickAddIssueRoot = {
+  isQuickAddOpen?: boolean;
+  layout: EIssueLayoutTypes;
+  prePopulatedData?: Partial<TIssue>;
+  QuickAddButton?: FC<TQuickAddIssueButton>;
+  customQuickAddButton?: React.ReactNode;
+  containerClassName?: string;
+  setIsQuickAddOpen?: (isOpen: boolean) => void;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  isEpic?: boolean;
+};
+
+const defaultValues: Partial<TIssue> = {
+  name: "",
+};
+
+export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQuickAddIssueRoot) {
+  const {
+    isQuickAddOpen,
+    layout,
+    prePopulatedData,
+    QuickAddButton,
+    customQuickAddButton,
+    containerClassName = "",
+    setIsQuickAddOpen,
+    quickAddCallback,
+    isEpic = false,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // states
+  const [isOpen, setIsOpen] = useState(isQuickAddOpen ?? false);
+  // form info
+  const {
+    reset,
+    handleSubmit,
+    setFocus,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm<TIssue>({ defaultValues });
+
+  useEffect(() => {
+    if (isQuickAddOpen !== undefined) {
+      setIsOpen(isQuickAddOpen);
+    }
+  }, [isQuickAddOpen]);
+
+  useEffect(() => {
+    if (!isOpen) reset({ ...defaultValues });
+  }, [isOpen, reset]);
+
+  // oxlint-disable-next-line no-shadow
+  const handleIsOpen = (isOpen: boolean) => {
+    if (isQuickAddOpen !== undefined && setIsQuickAddOpen) {
+      setIsQuickAddOpen(isOpen);
+    } else {
+      setIsOpen(isOpen);
+    }
+  };
+
+  const onSubmitHandler = async (formData: TIssue) => {
+    if (isSubmitting || !workspaceSlug || !projectId) return;
+
+    reset({ ...defaultValues });
+
+    const payload = createIssuePayload(projectId.toString(), {
+      // oxlint-disable-next-line unicorn/no-useless-fallback-in-spread
+      ...(prePopulatedData ?? {}),
+      ...formData,
+    });
+
+    if (quickAddCallback) {
+      const quickAddPromise = quickAddCallback(projectId.toString(), { ...payload });
+      setPromiseToast<any>(quickAddPromise, {
+        loading: isEpic ? t("epic.adding") : t("issue.adding"),
+        success: {
+          title: t("common.success"),
+          message: () => `${isEpic ? t("epic.create.success") : t("issue.create.success")}`,
+          actionItems: (data) => (
+            // TODO: Translate here
+            <CreateIssueToastActionItems
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              issueId={data.id}
+              isEpic={isEpic}
+            />
+          ),
+        },
+        error: {
+          title: t("common.error.label"),
+          message: (err) => err?.message || t("common.error.message"),
+        },
+      });
+
+      await quickAddPromise;
+    }
+  };
+
+  if (!projectId) return null;
+
+  return (
+    <div
+      className={cn(
+        containerClassName,
+        errors && errors?.name && errors?.name?.message ? `border-danger-strong bg-danger-subtle` : ``
+      )}
+    >
+      {isOpen ? (
+        <QuickAddIssueFormRoot
+          isOpen={isOpen}
+          layout={layout}
+          prePopulatedData={prePopulatedData}
+          projectId={projectId?.toString()}
+          // oxlint-disable-next-line no-unneeded-ternary
+          hasError={errors && errors?.name && errors?.name?.message ? true : false}
+          setFocus={setFocus}
+          register={register}
+          onSubmit={handleSubmit(onSubmitHandler)}
+          onClose={() => handleIsOpen(false)}
+          isEpic={isEpic}
+        />
+      ) : (
+        <>
+          {QuickAddButton && <QuickAddButton isEpic={isEpic} onClick={() => handleIsOpen(true)} />}
+          {customQuickAddButton && <>{customQuickAddButton}</>}
+          {!QuickAddButton && !customQuickAddButton && (
+            <button
+              className="flex w-full cursor-pointer items-center gap-2 bg-layer-transparent px-2 py-3 hover:bg-layer-transparent-hover"
+              onClick={() => handleIsOpen(true)}
+            >
+              <AddOutline className="h-3.5 w-3.5" />
+              <span className="text-13 font-medium">{t(`${isEpic ? "epic.new" : "issue.new"}`)}</span>
+            </button>
+          )}
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
new file mode 100644
index 0000000..a8659b6
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -0,0 +1,172 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import type { EIssueLayoutTypes } from "@plane/types";
+import { EIssuesStoreType, STATIC_VIEW_TYPES } from "@plane/types";
+// assets
+// components
+import { IssuePeekOverview } from "@/components/issues/peek-overview";
+import { WorkspaceActiveLayout } from "@/components/views/helper";
+import { WorkspaceLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/workspace-level";
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+// hooks
+import { useGlobalView } from "@/hooks/store/use-global-view";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
+import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
+
+type Props = {
+  isDefaultView: boolean;
+  isLoading?: boolean;
+  toggleLoading: (value: boolean) => void;
+};
+
+export const AllIssueLayoutRoot = observer(function AllIssueLayoutRoot(props: Props) {
+  const { isDefaultView, isLoading = false, toggleLoading } = props;
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug: routerWorkspaceSlug, globalViewId: routerGlobalViewId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  const globalViewId = routerGlobalViewId ? routerGlobalViewId.toString() : undefined;
+  // search params
+  const searchParams = useSearchParams();
+  // store hooks
+  const {
+    issuesFilter: { filters, fetchFilters, updateFilterExpression },
+    issues: { clear, groupedIssueIds, fetchIssues, fetchNextIssues },
+  } = useIssues(EIssuesStoreType.GLOBAL);
+  const { fetchAllGlobalViews, getViewDetailsById } = useGlobalView();
+  // Derived values
+  const viewDetails = globalViewId ? getViewDetailsById(globalViewId) : undefined;
+  const workItemFilters = globalViewId ? filters?.[globalViewId] : undefined;
+  const activeLayout: EIssueLayoutTypes | undefined = workItemFilters?.displayFilters?.layout;
+  // Determine initial work item filters based on view type and availability
+  const initialWorkItemFilters = useMemo(() => {
+    if (!globalViewId) return undefined;
+
+    const isStaticView = STATIC_VIEW_TYPES.includes(globalViewId);
+    const hasViewDetails = Boolean(viewDetails);
+
+    if (!isStaticView && !hasViewDetails) return undefined;
+
+    return {
+      displayFilters: workItemFilters?.displayFilters,
+      displayProperties: workItemFilters?.displayProperties,
+      kanbanFilters: workItemFilters?.kanbanFilters,
+      richFilters: viewDetails?.rich_filters ?? {},
+    };
+  }, [globalViewId, viewDetails, workItemFilters]);
+
+  // Custom hooks
+  useWorkspaceIssueProperties(workspaceSlug);
+
+  // Route filters
+  const routeFilters: { [key: string]: string } = {};
+  searchParams.forEach((value: string, key: string) => {
+    routeFilters[key] = value;
+  });
+
+  // Fetch next pages callback
+  const fetchNextPages = useCallback(() => {
+    if (workspaceSlug && globalViewId) fetchNextIssues(workspaceSlug, globalViewId);
+  }, [fetchNextIssues, workspaceSlug, globalViewId]);
+
+  // Fetch global views
+  const { isLoading: globalViewsLoading } = useSWR(
+    workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS_${workspaceSlug}` : null,
+    async () => {
+      if (workspaceSlug) {
+        await fetchAllGlobalViews(workspaceSlug);
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // Fetch issues
+  const { isLoading: issuesLoading } = useSWR(
+    workspaceSlug && globalViewId ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${globalViewId}` : null,
+    async () => {
+      if (workspaceSlug && globalViewId) {
+        clear();
+        toggleLoading(true);
+        await fetchFilters(workspaceSlug, globalViewId);
+        await fetchIssues(workspaceSlug, globalViewId, groupedIssueIds ? "mutation" : "init-loader", {
+          canGroup: false,
+          perPageCount: 100,
+        });
+        toggleLoading(false);
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // Empty state
+  if (!isLoading && !globalViewsLoading && !issuesLoading && !viewDetails && !isDefaultView) {
+    return (
+      <EmptyStateDetailed
+        title="View does not exist"
+        description="The view you are looking for does not exist or you don't have permission to view it."
+        assetKey="view"
+        actions={[
+          {
+            label: "Go to All work items",
+            onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues`),
+            variant: "primary",
+          },
+        ]}
+      />
+    );
+  }
+
+  if (!workspaceSlug || !globalViewId) return null;
+  return (
+    <IssuesStoreContext.Provider value={EIssuesStoreType.GLOBAL}>
+      <WorkspaceLevelWorkItemFiltersHOC
+        enableSaveView
+        saveViewOptions={{
+          label: "Save as",
+        }}
+        enableUpdateView
+        entityId={globalViewId}
+        entityType={EIssuesStoreType.GLOBAL}
+        filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.filters}
+        initialWorkItemFilters={initialWorkItemFilters}
+        updateFilters={updateFilterExpression.bind(updateFilterExpression, workspaceSlug, globalViewId)}
+        workspaceSlug={workspaceSlug}
+      >
+        {({ filter: globalWorkItemsFilter }) => (
+          <div className="h-full overflow-hidden bg-surface-1">
+            <div className="flex h-full w-full flex-col border-b border-strong">
+              {globalWorkItemsFilter && <WorkItemFiltersRow filter={globalWorkItemsFilter} />}
+              <WorkspaceActiveLayout
+                activeLayout={activeLayout}
+                isDefaultView={isDefaultView}
+                isLoading={isLoading}
+                toggleLoading={toggleLoading}
+                workspaceSlug={workspaceSlug}
+                globalViewId={globalViewId}
+                routeFilters={routeFilters}
+                fetchNextPages={fetchNextPages}
+                globalViewsLoading={globalViewsLoading}
+                issuesLoading={issuesLoading}
+              />
+            </div>
+            {/* peek overview */}
+            <IssuePeekOverview />
+          </div>
+        )}
+      </WorkspaceLevelWorkItemFiltersHOC>
+    </IssuesStoreContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
new file mode 100644
index 0000000..6e2ad29
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssuesStoreType } from "@plane/types";
+// components
+import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
+// hooks
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+import { useIssues } from "@/hooks/store/use-issues";
+import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
+// local imports
+import { IssuePeekOverview } from "../../peek-overview";
+import { ArchivedIssueListLayout } from "../list/roots/archived-issue-root";
+
+export const ArchivedIssueLayoutRoot = observer(function ArchivedIssueLayoutRoot() {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
+  // hooks
+  const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
+  // derived values
+  const workItemFilters = projectId ? issuesFilter?.getIssueFilters(projectId) : undefined;
+
+  useSWR(
+    workspaceSlug && projectId ? `ARCHIVED_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString());
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  if (!workspaceSlug || !projectId || !workItemFilters) return <></>;
+  return (
+    <IssuesStoreContext.Provider value={EIssuesStoreType.ARCHIVED}>
+      <ProjectLevelWorkItemFiltersHOC
+        entityType={EIssuesStoreType.ARCHIVED}
+        entityId={projectId?.toString()}
+        filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.archived_issues.filters}
+        initialWorkItemFilters={workItemFilters}
+        updateFilters={issuesFilter?.updateFilterExpression.bind(issuesFilter, workspaceSlug, projectId)}
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+      >
+        {({ filter: archivedWorkItemsFilter }) => (
+          <>
+            {archivedWorkItemsFilter && <WorkItemFiltersRow filter={archivedWorkItemsFilter} />}
+            <div className="relative h-full w-full overflow-auto">
+              <ArchivedIssueListLayout />
+            </div>
+            <IssuePeekOverview />
+          </>
+        )}
+      </ProjectLevelWorkItemFiltersHOC>
+    </IssuesStoreContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx
new file mode 100644
index 0000000..09775c4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane constants
+import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+// components
+import { TransferIssues } from "@/components/cycles/transfer-issues";
+import { TransferIssuesModal } from "@/components/cycles/transfer-issues-modal";
+// hooks
+import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssues } from "@/hooks/store/use-issues";
+import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
+// local imports
+import { IssuePeekOverview } from "../../peek-overview";
+import { CycleCalendarLayout } from "../calendar/roots/cycle-root";
+import { BaseGanttRoot } from "../gantt";
+import { CycleKanBanLayout } from "../kanban/roots/cycle-root";
+import { CycleListLayout } from "../list/roots/cycle-root";
+import { CycleSpreadsheetLayout } from "../spreadsheet/roots/cycle-root";
+
+function CycleIssueLayout(props: {
+  activeLayout: EIssueLayoutTypes | undefined;
+  cycleId: string;
+  isCompletedCycle: boolean;
+}) {
+  switch (props.activeLayout) {
+    case EIssueLayoutTypes.LIST:
+      return <CycleListLayout />;
+    case EIssueLayoutTypes.KANBAN:
+      return <CycleKanBanLayout />;
+    case EIssueLayoutTypes.CALENDAR:
+      return <CycleCalendarLayout />;
+    case EIssueLayoutTypes.GANTT:
+      return <BaseGanttRoot viewId={props.cycleId} isCompletedCycle={props.isCompletedCycle} />;
+    case EIssueLayoutTypes.SPREADSHEET:
+      return <CycleSpreadsheetLayout />;
+    default:
+      return null;
+  }
+}
+
+export const CycleLayoutRoot = observer(function CycleLayoutRoot() {
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, cycleId: routerCycleId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
+  const cycleId = routerCycleId ? routerCycleId.toString() : undefined;
+  // store hooks
+  const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+  const { getCycleById } = useCycle();
+  // state
+  const [transferIssuesModal, setTransferIssuesModal] = useState(false);
+  // derived values
+  const workItemFilters = cycleId ? issuesFilter?.getIssueFilters(cycleId) : undefined;
+  const activeLayout = workItemFilters?.displayFilters?.layout;
+
+  useSWR(
+    workspaceSlug && projectId && cycleId ? `CYCLE_ISSUES_${workspaceSlug}_${projectId}_${cycleId}` : null,
+    async () => {
+      if (workspaceSlug && projectId && cycleId) {
+        await issuesFilter?.fetchFilters(workspaceSlug, projectId, cycleId);
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const cycleDetails = cycleId ? getCycleById(cycleId) : undefined;
+  const cycleStatus = cycleDetails?.status?.toLocaleLowerCase() ?? "draft";
+  const isCompletedCycle = cycleStatus === "completed";
+  const isProgressSnapshotEmpty = isEmpty(cycleDetails?.progress_snapshot);
+  const transferableIssuesCount = cycleDetails
+    ? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
+    : 0;
+  const canTransferIssues = isProgressSnapshotEmpty && transferableIssuesCount > 0;
+
+  if (!workspaceSlug || !projectId || !cycleId || !workItemFilters) return <></>;
+  return (
+    <IssuesStoreContext.Provider value={EIssuesStoreType.CYCLE}>
+      <ProjectLevelWorkItemFiltersHOC
+        enableSaveView
+        entityType={EIssuesStoreType.CYCLE}
+        entityId={cycleId}
+        filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.filters}
+        initialWorkItemFilters={workItemFilters}
+        updateFilters={issuesFilter?.updateFilterExpression.bind(issuesFilter, workspaceSlug, projectId, cycleId)}
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+      >
+        {({ filter: cycleWorkItemsFilter }) => (
+          <>
+            <TransferIssuesModal
+              handleClose={() => setTransferIssuesModal(false)}
+              cycleId={cycleId}
+              isOpen={transferIssuesModal}
+            />
+            <div className="relative flex h-full w-full flex-col overflow-hidden">
+              {cycleStatus === "completed" && (
+                <TransferIssues
+                  handleClick={() => setTransferIssuesModal(true)}
+                  canTransferIssues={canTransferIssues}
+                  disabled={!isEmpty(cycleDetails?.progress_snapshot)}
+                />
+              )}
+              {cycleWorkItemsFilter && <WorkItemFiltersRow filter={cycleWorkItemsFilter} />}
+              <div className="h-full w-full overflow-auto">
+                <CycleIssueLayout activeLayout={activeLayout} cycleId={cycleId} isCompletedCycle={isCompletedCycle} />
+              </div>
+              {/* peek overview */}
+              <IssuePeekOverview />
+            </div>
+          </>
+        )}
+      </ProjectLevelWorkItemFiltersHOC>
+    </IssuesStoreContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
new file mode 100644
index 0000000..a167c46
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+import { Row, ERowVariant } from "@plane/ui";
+// hooks
+import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+import { useIssues } from "@/hooks/store/use-issues";
+import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
+// local imports
+import { IssuePeekOverview } from "../../peek-overview";
+import { ModuleCalendarLayout } from "../calendar/roots/module-root";
+import { BaseGanttRoot } from "../gantt";
+import { ModuleKanBanLayout } from "../kanban/roots/module-root";
+import { ModuleListLayout } from "../list/roots/module-root";
+import { ModuleSpreadsheetLayout } from "../spreadsheet/roots/module-root";
+
+function ModuleIssueLayout(props: { activeLayout: EIssueLayoutTypes | undefined; moduleId: string }) {
+  switch (props.activeLayout) {
+    case EIssueLayoutTypes.LIST:
+      return <ModuleListLayout />;
+    case EIssueLayoutTypes.KANBAN:
+      return <ModuleKanBanLayout />;
+    case EIssueLayoutTypes.CALENDAR:
+      return <ModuleCalendarLayout />;
+    case EIssueLayoutTypes.GANTT:
+      return <BaseGanttRoot viewId={props.moduleId} />;
+    case EIssueLayoutTypes.SPREADSHEET:
+      return <ModuleSpreadsheetLayout />;
+    default:
+      return null;
+  }
+}
+
+export const ModuleLayoutRoot = observer(function ModuleLayoutRoot() {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, moduleId: routerModuleId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
+  const moduleId = routerModuleId ? routerModuleId.toString() : undefined;
+  // hooks
+  const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
+  // derived values
+  const workItemFilters = moduleId ? issuesFilter?.getIssueFilters(moduleId) : undefined;
+  const activeLayout = workItemFilters?.displayFilters?.layout || undefined;
+
+  useSWR(
+    workspaceSlug && projectId && moduleId
+      ? `MODULE_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}_${moduleId.toString()}`
+      : null,
+    async () => {
+      if (workspaceSlug && projectId && moduleId) {
+        await issuesFilter?.fetchFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  if (!workspaceSlug || !projectId || !moduleId || !workItemFilters) return <></>;
+  return (
+    <IssuesStoreContext.Provider value={EIssuesStoreType.MODULE}>
+      <ProjectLevelWorkItemFiltersHOC
+        enableSaveView
+        entityType={EIssuesStoreType.MODULE}
+        entityId={moduleId}
+        filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.filters}
+        initialWorkItemFilters={workItemFilters}
+        updateFilters={issuesFilter?.updateFilterExpression.bind(issuesFilter, workspaceSlug, projectId, moduleId)}
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+      >
+        {({ filter: moduleWorkItemsFilter }) => (
+          <div className="relative flex h-full w-full flex-col overflow-hidden">
+            {moduleWorkItemsFilter && <WorkItemFiltersRow filter={moduleWorkItemsFilter} />}
+            <Row variant={ERowVariant.HUGGING} className="h-full w-full overflow-auto">
+              <ModuleIssueLayout activeLayout={activeLayout} moduleId={moduleId} />
+            </Row>
+            {/* peek overview */}
+            <IssuePeekOverview />
+          </div>
+        )}
+      </ProjectLevelWorkItemFiltersHOC>
+    </IssuesStoreContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
new file mode 100644
index 0000000..4655c04
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane constants
+import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// components
+import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
+// local imports
+import { IssuePeekOverview } from "../../peek-overview";
+import { CalendarLayout } from "../calendar/roots/project-root";
+import { BaseGanttRoot } from "../gantt";
+import { KanBanLayout } from "../kanban/roots/project-root";
+import { ListLayout } from "../list/roots/project-root";
+import { ProjectSpreadsheetLayout } from "../spreadsheet/roots/project-root";
+
+function ProjectIssueLayout(props: { activeLayout: EIssueLayoutTypes | undefined }) {
+  switch (props.activeLayout) {
+    case EIssueLayoutTypes.LIST:
+      return <ListLayout />;
+    case EIssueLayoutTypes.KANBAN:
+      return <KanBanLayout />;
+    case EIssueLayoutTypes.CALENDAR:
+      return <CalendarLayout />;
+    case EIssueLayoutTypes.GANTT:
+      return <BaseGanttRoot />;
+    case EIssueLayoutTypes.SPREADSHEET:
+      return <ProjectSpreadsheetLayout />;
+    default:
+      return null;
+  }
+}
+
+export const ProjectLayoutRoot = observer(function ProjectLayoutRoot() {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  const projectId = routerProjectId ? routerProjectId.toString() : undefined;
+  // hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+  // derived values
+  const workItemFilters = projectId ? issuesFilter?.getIssueFilters(projectId) : undefined;
+  const activeLayout = workItemFilters?.displayFilters?.layout;
+
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ISSUES_${workspaceSlug}_${projectId}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await issuesFilter?.fetchFilters(workspaceSlug, projectId);
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  if (!workspaceSlug || !projectId || !workItemFilters) return <></>;
+  return (
+    <IssuesStoreContext.Provider value={EIssuesStoreType.PROJECT}>
+      <ProjectLevelWorkItemFiltersHOC
+        enableSaveView
+        entityType={EIssuesStoreType.PROJECT}
+        entityId={projectId}
+        filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.filters}
+        initialWorkItemFilters={workItemFilters}
+        updateFilters={issuesFilter?.updateFilterExpression.bind(issuesFilter, workspaceSlug, projectId)}
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+      >
+        {({ filter: projectWorkItemsFilter }) => (
+          <div className="relative flex h-full w-full flex-col overflow-hidden">
+            {projectWorkItemsFilter && <WorkItemFiltersRow filter={projectWorkItemsFilter} />}
+            <div className="relative h-full w-full overflow-auto bg-surface-1">
+              {/* mutation loader */}
+              {issues?.getIssueLoader() === "mutation" && (
+                <div className="shadow-sm fixed top-[70px] right-[20px] z-50 flex h-[40px] w-[40px] items-center justify-center rounded-sm bg-layer-1">
+                  <Spinner className="h-4 w-4" />
+                </div>
+              )}
+              <ProjectIssueLayout activeLayout={activeLayout} />
+            </div>
+            {/* peek overview */}
+            <IssuePeekOverview />
+          </div>
+        )}
+      </ProjectLevelWorkItemFiltersHOC>
+    </IssuesStoreContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx b/apps/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
new file mode 100644
index 0000000..45358e1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane constants
+import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+// hooks
+import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
+// local imports
+import { IssuePeekOverview } from "../../peek-overview";
+import { ProjectViewCalendarLayout } from "../calendar/roots/project-view-root";
+import { BaseGanttRoot } from "../gantt";
+import { ProjectViewKanBanLayout } from "../kanban/roots/project-view-root";
+import { ProjectViewListLayout } from "../list/roots/project-view-root";
+import { ProjectViewSpreadsheetLayout } from "../spreadsheet/roots/project-view-root";
+
+function ProjectViewIssueLayout(props: { activeLayout: EIssueLayoutTypes | undefined; viewId: string }) {
+  switch (props.activeLayout) {
+    case EIssueLayoutTypes.LIST:
+      return <ProjectViewListLayout />;
+    case EIssueLayoutTypes.KANBAN:
+      return <ProjectViewKanBanLayout />;
+    case EIssueLayoutTypes.CALENDAR:
+      return <ProjectViewCalendarLayout />;
+    case EIssueLayoutTypes.GANTT:
+      return <BaseGanttRoot viewId={props.viewId} />;
+    case EIssueLayoutTypes.SPREADSHEET:
+      return <ProjectViewSpreadsheetLayout />;
+    default:
+      return null;
+  }
+}
+
+export const ProjectViewLayoutRoot = observer(function ProjectViewLayoutRoot() {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, viewId: routerViewId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug?.toString() : undefined;
+  const projectId = routerProjectId ? routerProjectId?.toString() : undefined;
+  const viewId = routerViewId ? routerViewId?.toString() : undefined;
+  // hooks
+  const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+  const { getViewById } = useProjectView();
+  // derived values
+  const projectView = viewId ? getViewById(viewId) : undefined;
+  const workItemFilters = viewId ? issuesFilter?.getIssueFilters(viewId) : undefined;
+  const activeLayout = workItemFilters?.displayFilters?.layout;
+  const initialWorkItemFilters = projectView
+    ? {
+        displayFilters: workItemFilters?.displayFilters,
+        displayProperties: workItemFilters?.displayProperties,
+        kanbanFilters: workItemFilters?.kanbanFilters,
+        richFilters: projectView.rich_filters,
+      }
+    : undefined;
+
+  useSWR(
+    workspaceSlug && projectId && viewId ? `PROJECT_VIEW_ISSUES_${workspaceSlug}_${projectId}_${viewId}` : null,
+    async () => {
+      if (workspaceSlug && projectId && viewId) {
+        await issuesFilter?.fetchFilters(workspaceSlug, projectId, viewId);
+      }
+    }
+  );
+
+  useEffect(
+    () => () => {
+      if (workspaceSlug && viewId) {
+        issuesFilter?.resetFilters(workspaceSlug, viewId);
+      }
+    },
+    [issuesFilter, workspaceSlug, viewId]
+  );
+
+  if (!workspaceSlug || !projectId || !viewId || !workItemFilters) return <></>;
+  return (
+    <IssuesStoreContext.Provider value={EIssuesStoreType.PROJECT_VIEW}>
+      <ProjectLevelWorkItemFiltersHOC
+        enableSaveView
+        saveViewOptions={{
+          label: "Save as",
+        }}
+        enableUpdateView
+        entityId={viewId}
+        entityType={EIssuesStoreType.PROJECT_VIEW}
+        filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.filters}
+        initialWorkItemFilters={initialWorkItemFilters}
+        updateFilters={issuesFilter?.updateFilterExpression.bind(issuesFilter, workspaceSlug, projectId, viewId)}
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+      >
+        {({ filter: projectViewWorkItemsFilter }) => (
+          <div className="relative flex h-full w-full flex-col overflow-hidden">
+            {projectViewWorkItemsFilter && <WorkItemFiltersRow filter={projectViewWorkItemsFilter} />}
+            <div className="relative h-full w-full overflow-auto">
+              <ProjectViewIssueLayout activeLayout={activeLayout} viewId={viewId.toString()} />
+            </div>
+            {/* peek overview */}
+            <IssuePeekOverview />
+          </div>
+        )}
+      </ProjectLevelWorkItemFiltersHOC>
+    </IssuesStoreContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
new file mode 100644
index 0000000..4a15682
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FC } from "react";
+import { useCallback, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { ALL_ISSUES, EIssueFilterType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { EIssuesStoreType, IIssueDisplayFilterOptions } from "@plane/types";
+import { EIssueLayoutTypes } from "@plane/types";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+// local imports
+import { IssueLayoutHOC } from "../issue-layout-HOC";
+import type { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types";
+import { SpreadsheetView } from "./spreadsheet-view";
+
+export type SpreadsheetStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.TEAM
+  | EIssuesStoreType.TEAM_VIEW
+  | EIssuesStoreType.EPIC;
+
+interface IBaseSpreadsheetRoot {
+  QuickActions: FC<IQuickActionProps>;
+  canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
+  isCompletedCycle?: boolean;
+  viewId?: string | undefined;
+  isEpic?: boolean;
+}
+
+export const BaseSpreadsheetRoot = observer(function BaseSpreadsheetRoot(props: IBaseSpreadsheetRoot) {
+  const { QuickActions, canEditPropertiesBasedOnProject, isCompletedCycle = false, viewId, isEpic = false } = props;
+  // router
+  const { projectId } = useParams();
+  // store hooks
+  const storeType = useIssueStoreType() as SpreadsheetStoreType;
+  const { allowPermissions } = useUserPermissions();
+  const { issues, issuesFilter } = useIssues(storeType);
+  const {
+    fetchIssues,
+    fetchNextIssues,
+    quickAddIssue,
+    updateIssue,
+    removeIssue,
+    removeIssueFromView,
+    archiveIssue,
+    restoreIssue,
+    updateFilters,
+  } = useIssuesActions(storeType);
+  // derived values
+  const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issues?.viewFlags || {};
+  // user role validation
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  useEffect(() => {
+    fetchIssues("init-loader", { canGroup: false, perPageCount: 100 }, viewId);
+  }, [fetchIssues, storeType, viewId]);
+
+  const canEditProperties = useCallback(
+    (projectId: string | undefined) => {
+      const isEditingAllowedBasedOnProject =
+        canEditPropertiesBasedOnProject && projectId ? canEditPropertiesBasedOnProject(projectId) : isEditingAllowed;
+
+      return enableInlineEditing && isEditingAllowedBasedOnProject;
+    },
+    [canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
+  );
+
+  const issueIds = issues.groupedIssueIds?.[ALL_ISSUES] ?? [];
+  const nextPageResults = issues.getPaginationData(ALL_ISSUES, undefined)?.nextPageResults;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      updateFilters(projectId?.toString() ?? "", EIssueFilterType.DISPLAY_FILTERS, {
+        ...updatedDisplayFilter,
+      });
+    },
+    [projectId, updateFilters]
+  );
+
+  const renderQuickActions: TRenderQuickActions = useCallback(
+    ({ issue, parentRef, customActionButton, placement, portalElement }) => (
+      <QuickActions
+        parentRef={parentRef}
+        customActionButton={customActionButton}
+        issue={issue}
+        handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+        handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+        handleRemoveFromView={async () => removeIssueFromView && removeIssueFromView(issue.project_id, issue.id)}
+        handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+        handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
+        portalElement={portalElement}
+        readOnly={!canEditProperties(issue.project_id ?? undefined) || isCompletedCycle}
+        placements={placement}
+      />
+    ),
+    [isCompletedCycle, canEditProperties, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
+  );
+
+  if (!Array.isArray(issueIds)) return null;
+
+  return (
+    <IssueLayoutHOC layout={EIssueLayoutTypes.SPREADSHEET}>
+      <SpreadsheetView
+        displayProperties={issuesFilter.issueFilters?.displayProperties ?? {}}
+        displayFilters={issuesFilter.issueFilters?.displayFilters ?? {}}
+        handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+        issueIds={issueIds}
+        quickActions={renderQuickActions}
+        updateIssue={updateIssue}
+        canEditProperties={canEditProperties}
+        quickAddCallback={quickAddIssue}
+        enableQuickCreateIssue={enableQuickAdd}
+        disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
+        canLoadMoreIssues={!!nextPageResults}
+        loadMoreIssues={fetchNextIssues}
+        isEpic={isEpic}
+      />
+    </IssueLayoutHOC>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
new file mode 100644
index 0000000..78f30b0
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// types
+import type { TIssue } from "@plane/types";
+// components
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+
+type Props = {
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+};
+
+export const SpreadsheetAssigneeColumn = observer(function SpreadsheetAssigneeColumn(props: Props) {
+  const { issue, onChange, disabled, onClose } = props;
+
+  return (
+    <div className="h-11 border-b-[0.5px] border-subtle">
+      <MemberDropdown
+        value={issue?.assignee_ids ?? []}
+        onChange={(data) => {
+          onChange(
+            issue,
+            { assignee_ids: data },
+            {
+              changed_property: "assignees",
+              change_details: data,
+            }
+          );
+        }}
+        projectId={issue?.project_id ?? undefined}
+        disabled={disabled}
+        multiple
+        placeholder="Assignees"
+        buttonVariant={
+          issue?.assignee_ids && issue.assignee_ids.length > 1 ? "transparent-without-text" : "transparent-with-text"
+        }
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
+        buttonContainerClassName="w-full"
+        optionsClassName="z-[9]"
+        onClose={onClose}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
new file mode 100644
index 0000000..2ec3a94
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// types
+import type { TIssue } from "@plane/types";
+import { Row } from "@plane/ui";
+
+type Props = {
+  issue: TIssue;
+};
+
+export const SpreadsheetAttachmentColumn = observer(function SpreadsheetAttachmentColumn(props: Props) {
+  const { issue } = props;
+
+  return (
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
+      {issue?.attachment_count ?? 0} {issue?.attachment_count === 1 ? "attachment" : "attachments"}
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
new file mode 100644
index 0000000..8241320
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// types
+import type { TIssue } from "@plane/types";
+// helpers
+import { Row } from "@plane/ui";
+import { renderFormattedDate } from "@plane/utils";
+
+type Props = {
+  issue: TIssue;
+};
+
+export const SpreadsheetCreatedOnColumn = observer(function SpreadsheetCreatedOnColumn(props: Props) {
+  const { issue } = props;
+
+  return (
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
+      {renderFormattedDate(issue.created_at)}
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
new file mode 100644
index 0000000..eff0416
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import type { TIssue } from "@plane/types";
+// components
+import { CycleDropdown } from "@/components/dropdowns/cycle";
+// hooks
+import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+
+type Props = {
+  issue: TIssue;
+  onClose: () => void;
+  disabled: boolean;
+};
+
+export const SpreadsheetCycleColumn = observer(function SpreadsheetCycleColumn(props: Props) {
+  const { issue, disabled, onClose } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
+  const {
+    issues: { addCycleToIssue, removeCycleFromIssue },
+  } = useIssuesStore();
+
+  const handleCycle = useCallback(
+    async (cycleId: string | null) => {
+      if (!workspaceSlug || !issue || !issue.project_id || issue.cycle_id === cycleId) return;
+      if (cycleId) await addCycleToIssue(workspaceSlug.toString(), issue.project_id, cycleId, issue.id);
+      else await removeCycleFromIssue(workspaceSlug.toString(), issue.project_id, issue.id);
+    },
+    [workspaceSlug, issue, addCycleToIssue, removeCycleFromIssue]
+  );
+
+  return (
+    <div className="h-11 border-b-[0.5px] border-subtle">
+      <CycleDropdown
+        projectId={issue.project_id ?? undefined}
+        value={issue.cycle_id}
+        onChange={handleCycle}
+        disabled={disabled}
+        placeholder="Select cycle"
+        buttonVariant="transparent-with-text"
+        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
+        buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent px-0"
+        onClose={onClose}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
new file mode 100644
index 0000000..6fde28d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { DueDateOutline } from "@makeplane/propel/icons";
+// types
+import type { TIssue } from "@plane/types";
+import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
+// components
+import { DateDropdown } from "@/components/dropdowns/date";
+// helpers
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+type Props = {
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+};
+
+export const SpreadsheetDueDateColumn = observer(function SpreadsheetDueDateColumn(props: Props) {
+  const { issue, onChange, disabled, onClose } = props;
+  // store hooks
+  const { getStateById } = useProjectState();
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
+
+  return (
+    <div className="h-11 border-b-[0.5px] border-subtle">
+      <DateDropdown
+        value={issue.target_date}
+        minDate={getDate(issue.start_date)}
+        onChange={(data) => {
+          const targetDate = data ? renderFormattedPayloadDate(data) : null;
+          onChange(
+            issue,
+            { target_date: targetDate },
+            {
+              changed_property: "target_date",
+              change_details: targetDate,
+            }
+          );
+        }}
+        disabled={disabled}
+        placeholder="Due date"
+        icon={<DueDateOutline className="h-3 w-3 flex-shrink-0" />}
+        buttonVariant="transparent-with-text"
+        buttonContainerClassName="w-full"
+        buttonClassName={cn(
+          "rounded-none px-page-x text-left group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10",
+          {
+            "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+          }
+        )}
+        optionsClassName="z-[9]"
+        clearIconClassName="!text-primary"
+        onClose={onClose}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
new file mode 100644
index 0000000..a60262b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// types
+import type { TIssue } from "@plane/types";
+// components
+import { EstimateDropdown } from "@/components/dropdowns/estimate";
+
+type Props = {
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+};
+
+export const SpreadsheetEstimateColumn = observer(function SpreadsheetEstimateColumn(props: Props) {
+  const { issue, onChange, disabled, onClose } = props;
+
+  return (
+    <div className="h-11 border-b-[0.5px] border-subtle">
+      <EstimateDropdown
+        value={issue.estimate_point || undefined}
+        onChange={(data) =>
+          onChange(issue, { estimate_point: data }, { changed_property: "estimate_point", change_details: data })
+        }
+        placeholder="Estimate"
+        projectId={issue.project_id ?? undefined}
+        disabled={disabled}
+        buttonVariant="transparent-with-text"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
+        buttonContainerClassName="w-full"
+        onClose={onClose}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
new file mode 100644
index 0000000..fb30e89
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+//ui
+import { Eraser } from "lucide-react";
+import {
+  ArrowNarrowRightOutline,
+  ChevronDownOutline,
+  SortAscendingOutline,
+  SortDescendingOutline,
+  TickOutline,
+} from "@makeplane/propel/icons";
+// constants
+import { SPREADSHEET_PROPERTY_DETAILS } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "@plane/types";
+import { CustomMenu, Row } from "@plane/ui";
+import useLocalStorage from "@/hooks/use-local-storage";
+import { SpreadSheetPropertyIcon } from "../../utils";
+
+interface Props {
+  property: keyof IIssueDisplayProperties;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  onClose: () => void;
+  isEpic?: boolean;
+}
+
+export function HeaderColumn(props: Props) {
+  const { displayFilters, handleDisplayFilterUpdate, property, onClose, isEpic = false } = props;
+  // i18n
+  const { t } = useTranslation();
+  const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
+    "spreadsheetViewSorting",
+    ""
+  );
+  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage(
+    "spreadsheetViewActiveSortingProperty",
+    ""
+  );
+  const propertyDetails = SPREADSHEET_PROPERTY_DETAILS[property];
+
+  const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
+    handleDisplayFilterUpdate({ order_by: order });
+
+    setSelectedMenuItem(`${order}_${itemKey}`);
+    setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
+  };
+
+  if (!propertyDetails) return null;
+
+  return (
+    <CustomMenu
+      customButtonClassName="clickable !w-full"
+      customButtonTabIndex={-1}
+      className="!w-full"
+      customButton={
+        <Row className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-13 text-secondary hover:text-primary">
+          <div className="flex items-center gap-1.5">
+            {<SpreadSheetPropertyIcon iconKey={propertyDetails.icon} className="h-4 w-4 text-placeholder" />}
+            {property === "sub_issue_count" && isEpic ? t("issue.label", { count: 2 }) : t(propertyDetails.i18n_title)}
+          </div>
+          <div className="ml-3 flex">
+            {activeSortingProperty === property && (
+              <div className="flex h-3.5 w-3.5 items-center justify-center rounded-full">
+                {propertyDetails.ascendingOrderKey === displayFilters.order_by ? (
+                  <SortDescendingOutline className="h-3 w-3" />
+                ) : (
+                  <SortAscendingOutline className="h-3 w-3" />
+                )}
+              </div>
+            )}
+            <ChevronDownOutline className="h-3 w-3" aria-hidden="true" />
+          </div>
+        </Row>
+      }
+      onMenuClose={onClose}
+      placement="bottom-start"
+      closeOnSelect
+    >
+      <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
+        <div
+          className={`flex items-center justify-between gap-1.5 px-1 ${
+            selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
+              ? "text-primary"
+              : "text-secondary hover:text-primary"
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            <SortDescendingOutline className="h-3 w-3 stroke-[1.5]" />
+            <span>{propertyDetails.ascendingOrderTitle}</span>
+            <ArrowNarrowRightOutline className="h-3 w-3" />
+            <span>{propertyDetails.descendingOrderTitle}</span>
+          </div>
+
+          {selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}` && (
+            <TickOutline className="h-3 w-3" />
+          )}
+        </div>
+      </CustomMenu.MenuItem>
+      <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
+        <div
+          className={`flex items-center justify-between gap-1.5 px-1 ${
+            selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
+              ? "text-primary"
+              : "text-secondary hover:text-primary"
+          }`}
+        >
+          <div className="flex items-center gap-2">
+            <SortAscendingOutline className="h-3 w-3 stroke-[1.5]" />
+            <span>{propertyDetails.descendingOrderTitle}</span>
+            <ArrowNarrowRightOutline className="h-3 w-3" />
+            <span>{propertyDetails.ascendingOrderTitle}</span>
+          </div>
+
+          {selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}` && (
+            <TickOutline className="h-3 w-3" />
+          )}
+        </div>
+      </CustomMenu.MenuItem>
+      {selectedMenuItem &&
+        selectedMenuItem !== "" &&
+        displayFilters?.order_by !== "-created_at" &&
+        selectedMenuItem.includes(property) && (
+          <CustomMenu.MenuItem
+            className={`mt-0.5 ${selectedMenuItem === `-created_at_${property}` ? "bg-layer-1" : ""}`}
+            key={property}
+            onClick={() => handleOrderBy("-created_at", property)}
+          >
+            <div className="flex items-center gap-2 px-1">
+              <Eraser className="h-3 w-3" />
+              <span>{t("common.actions.clear_sorting")}</span>
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+    </CustomMenu>
+  );
+}
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/index.ts b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/index.ts
new file mode 100644
index 0000000..e02316d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./assignee-column";
+export * from "./attachment-column";
+export * from "./created-on-column";
+export * from "./due-date-column";
+export * from "./estimate-column";
+export * from "./label-column";
+export * from "./link-column";
+export * from "./priority-column";
+export * from "./start-date-column";
+export * from "./state-column";
+export * from "./sub-issue-column";
+export * from "./updated-on-column";
+export * from "./module-column";
+export * from "./cycle-column";
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
new file mode 100644
index 0000000..7618b7e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// types
+import type { TIssue } from "@plane/types";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+// components
+import { IssuePropertyLabels } from "../../properties";
+
+type Props = {
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+};
+
+export const SpreadsheetLabelColumn = observer(function SpreadsheetLabelColumn(props: Props) {
+  const { issue, onChange, disabled, onClose } = props;
+  // hooks
+  const { labelMap } = useLabel();
+
+  const defaultLabelOptions =
+    issue?.label_ids?.flatMap((id) => {
+      const label = labelMap[id];
+      return label ? [label] : [];
+    }) || [];
+
+  return (
+    <div className="h-11 w-full border-b-[0.5px] border-subtle">
+      <IssuePropertyLabels
+        projectId={issue.project_id ?? null}
+        value={issue.label_ids || []}
+        defaultOptions={defaultLabelOptions}
+        onChange={(data) => onChange(issue, { label_ids: data }, { changed_property: "labels", change_details: data })}
+        className="h-full w-full"
+        buttonClassName="px-page-x w-full h-full group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 rounded-none"
+        hideDropdownArrow
+        maxRender={1}
+        disabled={disabled}
+        placeholderText="Select labels"
+        onClose={onClose}
+        noLabelBorder
+        fullWidth
+        fullHeight
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
new file mode 100644
index 0000000..305a262
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// types
+import type { TIssue } from "@plane/types";
+import { Row } from "@plane/ui";
+
+type Props = {
+  issue: TIssue;
+};
+
+export const SpreadsheetLinkColumn = observer(function SpreadsheetLinkColumn(props: Props) {
+  const { issue } = props;
+
+  return (
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle px-2.5 px-page-x py-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
+      {issue?.link_count ?? 0} {issue?.link_count === 1 ? "link" : "links"}
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
new file mode 100644
index 0000000..30f55a3
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { xor } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import type { TIssue } from "@plane/types";
+// components
+import { ModuleDropdown } from "@/components/dropdowns/module/dropdown";
+// hooks
+import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+
+type Props = {
+  issue: TIssue;
+  onClose: () => void;
+  disabled: boolean;
+};
+
+export const SpreadsheetModuleColumn = observer(function SpreadsheetModuleColumn(props: Props) {
+  const { issue, disabled, onClose } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
+  const {
+    issues: { changeModulesInIssue },
+  } = useIssuesStore();
+
+  const handleModule = useCallback(
+    async (moduleIds: string[] | null) => {
+      if (!workspaceSlug || !issue || !issue.project_id || !issue.module_ids || !moduleIds) return;
+
+      const updatedModuleIds = xor(issue.module_ids, moduleIds);
+      const modulesToAdd: string[] = [];
+      const modulesToRemove: string[] = [];
+      for (const moduleId of updatedModuleIds) {
+        if (issue.module_ids.includes(moduleId)) modulesToRemove.push(moduleId);
+        else modulesToAdd.push(moduleId);
+      }
+      changeModulesInIssue(workspaceSlug.toString(), issue.project_id, issue.id, modulesToAdd, modulesToRemove);
+    },
+    [workspaceSlug, issue, changeModulesInIssue]
+  );
+
+  return (
+    <div className="h-11 border-b-[0.5px] border-subtle">
+      <ModuleDropdown
+        projectId={issue?.project_id ?? undefined}
+        value={issue?.module_ids ?? []}
+        onChange={handleModule}
+        disabled={disabled}
+        placeholder="Select modules"
+        buttonVariant="transparent-with-text"
+        buttonContainerClassName="w-full relative flex items-center p-2 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
+        buttonClassName="relative leading-4 h-4.5 bg-transparent hover:bg-transparent !px-0"
+        onClose={onClose}
+        multiple
+        showCount
+        showTooltip
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
new file mode 100644
index 0000000..cab106d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// types
+import type { TIssue } from "@plane/types";
+// components
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+
+type Props = {
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+};
+
+export const SpreadsheetPriorityColumn = observer(function SpreadsheetPriorityColumn(props: Props) {
+  const { issue, onChange, disabled, onClose } = props;
+
+  return (
+    <div className="h-11 border-b-[0.5px] border-subtle">
+      <PriorityDropdown
+        value={issue.priority}
+        onChange={(data) => onChange(issue, { priority: data }, { changed_property: "priority", change_details: data })}
+        disabled={disabled}
+        buttonVariant="transparent-with-text"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
+        buttonContainerClassName="w-full"
+        onClose={onClose}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
new file mode 100644
index 0000000..3bcd8da
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { StartDateOutline } from "@makeplane/propel/icons";
+// types
+import type { TIssue } from "@plane/types";
+// components
+import { getDate, renderFormattedPayloadDate } from "@plane/utils";
+import { DateDropdown } from "@/components/dropdowns/date";
+// helpers
+
+type Props = {
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+};
+
+export const SpreadsheetStartDateColumn = observer(function SpreadsheetStartDateColumn(props: Props) {
+  const { issue, onChange, disabled, onClose } = props;
+
+  return (
+    <div className="h-11 border-b-[0.5px] border-subtle">
+      <DateDropdown
+        value={issue.start_date}
+        maxDate={getDate(issue.target_date)}
+        onChange={(data) => {
+          const startDate = data ? renderFormattedPayloadDate(data) : null;
+          onChange(
+            issue,
+            { start_date: startDate },
+            {
+              changed_property: "start_date",
+              change_details: startDate,
+            }
+          );
+        }}
+        disabled={disabled}
+        placeholder="Start date"
+        icon={<StartDateOutline className="h-3 w-3 flex-shrink-0" />}
+        buttonVariant="transparent-with-text"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
+        buttonContainerClassName="w-full"
+        optionsClassName="z-[9]"
+        onClose={onClose}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
new file mode 100644
index 0000000..5136346
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// types
+import type { TIssue } from "@plane/types";
+// components
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+
+type Props = {
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+};
+
+export const SpreadsheetStateColumn = observer(function SpreadsheetStateColumn(props: Props) {
+  const { issue, onChange, disabled, onClose } = props;
+
+  return (
+    <div className="h-11 border-b-[0.5px] border-subtle">
+      <StateDropdown
+        projectId={issue.project_id ?? undefined}
+        value={issue.state_id}
+        onChange={(data) => onChange(issue, { state_id: data }, { changed_property: "state", change_details: data })}
+        disabled={disabled}
+        buttonVariant="transparent-with-text"
+        buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x"
+        buttonContainerClassName="w-full"
+        onClose={onClose}
+        showTooltip
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
new file mode 100644
index 0000000..2121101
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import type { TIssue } from "@plane/types";
+// helpers
+import { Row } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  issue: TIssue;
+};
+
+export const SpreadsheetSubIssueColumn = observer(function SpreadsheetSubIssueColumn(props: Props) {
+  const { issue } = props;
+  // router
+  const router = useAppRouter();
+  // hooks
+  const { workspaceSlug } = useParams();
+  // derived values
+  const isEpic = issue?.is_epic;
+  const subIssueCount = issue?.sub_issues_count ?? 0;
+
+  const redirectToIssueDetail = () => {
+    router.push(
+      `/${workspaceSlug?.toString()}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}${isEpic ? "epics" : "issues"}/${issue.id}#sub-issues`
+    );
+  };
+
+  const label = `${subIssueCount} sub-work item${subIssueCount !== 1 ? "s" : ""}`;
+
+  return (
+    <Row
+      onClick={subIssueCount ? redirectToIssueDetail : () => {}}
+      className={cn(
+        "flex h-11 w-full items-center border-b-[0.5px] border-subtle py-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-surface-2 group-[.selected-issue-row]:hover:bg-accent-primary",
+        {
+          "cursor-pointer": subIssueCount,
+        }
+      )}
+    >
+      {isEpic ? null : label}
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
new file mode 100644
index 0000000..f099edd
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// types
+import type { TIssue } from "@plane/types";
+// helpers
+import { Row } from "@plane/ui";
+import { renderFormattedDate } from "@plane/utils";
+
+type Props = {
+  issue: TIssue;
+};
+
+export const SpreadsheetUpdatedOnColumn = observer(function SpreadsheetUpdatedOnColumn(props: Props) {
+  const { issue } = props;
+
+  return (
+    <Row className="flex h-11 w-full items-center border-b-[0.5px] border-subtle-1 text-11 group-[.selected-issue-row]:bg-accent-primary/5 hover:bg-layer-1 group-[.selected-issue-row]:hover:bg-accent-primary/10">
+      {renderFormattedDate(issue.updated_at)}
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
new file mode 100644
index 0000000..653ba4c
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+// types
+import type { IIssueDisplayProperties, TIssue } from "@plane/types";
+// constants
+import { SPREADSHEET_COLUMNS } from "../utils";
+// components
+import { shouldRenderColumn } from "@/helpers/issue-filter.helper";
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  issueDetail: TIssue;
+  disableUserActions: boolean;
+  property: keyof IIssueDisplayProperties;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  isEstimateEnabled: boolean;
+};
+
+export const IssueColumn = observer(function IssueColumn(props: Props) {
+  const { displayProperties, issueDetail, disableUserActions, property, updateIssue } = props;
+  // router
+  const tableCellRef = useRef<HTMLTableCellElement | null>(null);
+
+  const shouldRenderProperty = shouldRenderColumn(property);
+
+  const Column = SPREADSHEET_COLUMNS[property];
+
+  if (!Column) return null;
+
+  const handleUpdateIssue = async (issue: TIssue, data: Partial<TIssue>) => {
+    if (updateIssue) await updateIssue(issue.project_id, issue.id, data);
+  };
+
+  return (
+    <WithDisplayPropertiesHOC
+      displayProperties={displayProperties}
+      displayPropertyKey={property}
+      shouldRenderProperty={() => shouldRenderProperty}
+    >
+      <td
+        tabIndex={0}
+        className="h-11 min-w-36 border-r-[1px] border-subtle text-13 after:absolute after:bottom-[-1px] after:w-full after:border after:border-subtle"
+        ref={tableCellRef}
+      >
+        <Column
+          issue={issueDetail}
+          onChange={handleUpdateIssue}
+          disabled={disableUserActions}
+          onClose={() => tableCellRef?.current?.focus()}
+        />
+      </td>
+    </WithDisplayPropertiesHOC>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
new file mode 100644
index 0000000..7adaa62
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -0,0 +1,394 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, MouseEvent, MutableRefObject, SetStateAction } from "react";
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { ChevronRightOutline, MoreHorizontalOutline } from "@makeplane/propel/icons";
+import { SPREADSHEET_SELECT_GROUP } from "@plane/constants";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IIssueDisplayProperties, TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// ui
+import { ControlLink, Row } from "@plane/ui";
+import { cn, generateWorkItemLink } from "@plane/utils";
+// components
+import { MultipleSelectEntityAction } from "@/components/core/multiple-select";
+import RenderIfVisible from "@/components/core/render-if-visible-HOC";
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local components
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { isIssueNew } from "../utils";
+import { IssueColumn } from "./issue-column";
+
+interface Props {
+  displayProperties: IIssueDisplayProperties;
+  isEstimateEnabled: boolean;
+  quickActions: TRenderQuickActions;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  portalElement: React.MutableRefObject<HTMLDivElement | null>;
+  nestingLevel: number;
+  issueId: string;
+  isScrolled: MutableRefObject<boolean>;
+  containerRef: MutableRefObject<HTMLTableElement | null>;
+  spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
+  spacingLeft?: number;
+  selectionHelpers: TSelectionHelper;
+  shouldRenderByDefault?: boolean;
+  isEpic?: boolean;
+}
+
+export const SpreadsheetIssueRow = observer(function SpreadsheetIssueRow(props: Props) {
+  const {
+    displayProperties,
+    issueId,
+    isEstimateEnabled,
+    nestingLevel,
+    portalElement,
+    updateIssue,
+    quickActions,
+    canEditProperties,
+    isScrolled,
+    containerRef,
+    spreadsheetColumnsList,
+    spacingLeft = 6,
+    selectionHelpers,
+    shouldRenderByDefault,
+    isEpic = false,
+  } = props;
+  // states
+  const [isExpanded, setExpanded] = useState<boolean>(false);
+  // store hooks
+  const { subIssues: subIssuesStore } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const { issueMap } = useIssues();
+
+  // derived values
+  const issue = issueMap[issueId];
+  const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
+  const isIssueSelected = selectionHelpers.getIsEntitySelected(issueId);
+  const isIssueActive = selectionHelpers.getIsEntityActive(issueId);
+
+  if (!issue) return null;
+
+  return (
+    <>
+      {/* first column/ issue name and key column */}
+      <RenderIfVisible
+        as="tr"
+        root={containerRef}
+        placeholderChildren={
+          <td
+            colSpan={100}
+            className="border-[0.5px] border-transparent border-b-subtle-1"
+            style={{ height: "calc(2.75rem - 1px)" }}
+          />
+        }
+        classNames={cn("bg-surface-1 transition-[background-color]", {
+          "group selected-issue-row": isIssueSelected,
+          "border-[0.5px] border-strong-1": isIssueActive,
+        })}
+        verticalOffset={100}
+        shouldRecordHeights={false}
+        defaultValue={shouldRenderByDefault || isIssueNew(issue)}
+      >
+        <IssueRowDetails
+          issueId={issueId}
+          displayProperties={displayProperties}
+          quickActions={quickActions}
+          canEditProperties={canEditProperties}
+          nestingLevel={nestingLevel}
+          spacingLeft={spacingLeft}
+          isEstimateEnabled={isEstimateEnabled}
+          updateIssue={updateIssue}
+          portalElement={portalElement}
+          isScrolled={isScrolled}
+          isExpanded={isExpanded}
+          setExpanded={setExpanded}
+          spreadsheetColumnsList={spreadsheetColumnsList}
+          selectionHelpers={selectionHelpers}
+          isEpic={isEpic}
+        />
+      </RenderIfVisible>
+
+      {isExpanded &&
+        !isEpic &&
+        subIssues?.map((subIssueId: string) => (
+          <SpreadsheetIssueRow
+            key={subIssueId}
+            issueId={subIssueId}
+            displayProperties={displayProperties}
+            quickActions={quickActions}
+            canEditProperties={canEditProperties}
+            nestingLevel={nestingLevel + 1}
+            spacingLeft={spacingLeft + 12}
+            isEstimateEnabled={isEstimateEnabled}
+            updateIssue={updateIssue}
+            portalElement={portalElement}
+            isScrolled={isScrolled}
+            containerRef={containerRef}
+            spreadsheetColumnsList={spreadsheetColumnsList}
+            selectionHelpers={selectionHelpers}
+            shouldRenderByDefault={isExpanded}
+          />
+        ))}
+    </>
+  );
+});
+
+interface IssueRowDetailsProps {
+  displayProperties: IIssueDisplayProperties;
+  isEstimateEnabled: boolean;
+  quickActions: TRenderQuickActions;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  portalElement: React.MutableRefObject<HTMLDivElement | null>;
+  nestingLevel: number;
+  issueId: string;
+  isScrolled: MutableRefObject<boolean>;
+  isExpanded: boolean;
+  setExpanded: Dispatch<SetStateAction<boolean>>;
+  spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
+  spacingLeft?: number;
+  selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
+}
+
+const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetailsProps) {
+  const {
+    displayProperties,
+    issueId,
+    isEstimateEnabled,
+    nestingLevel,
+    portalElement,
+    updateIssue,
+    quickActions,
+    canEditProperties,
+    isScrolled,
+    isExpanded,
+    setExpanded,
+    spreadsheetColumnsList,
+    spacingLeft = 6,
+    selectionHelpers,
+    isEpic = false,
+  } = props;
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  // refs
+  const cellRef = useRef(null);
+  const menuActionRef = useRef<HTMLDivElement | null>(null);
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // hooks
+  const { getProjectIdentifierById } = useProject();
+  const { getIsIssuePeeked, peekIssue } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const { handleRedirection } = useIssuePeekOverviewRedirection(isEpic);
+  const { isMobile } = usePlatformOS();
+
+  // handlers
+  const handleIssuePeekOverview = (issue: TIssue) =>
+    handleRedirection(workspaceSlug?.toString(), issue, isMobile, nestingLevel);
+
+  const { subIssues: subIssuesStore, issue } = useIssueDetail();
+
+  const issueDetail = issue.getIssueById(issueId);
+
+  const subIssueIndentation = `${spacingLeft}px`;
+
+  useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
+
+  const customActionButton = (
+    <div
+      ref={menuActionRef}
+      className={`flex h-full w-full cursor-pointer items-center rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+        isMenuActive ? "bg-layer-1 text-primary" : "text-secondary"
+      }`}
+      onClick={() => setIsMenuActive(!isMenuActive)}
+    >
+      <MoreHorizontalOutline className="h-3.5 w-3.5" />
+    </div>
+  );
+  if (!issueDetail) return null;
+
+  const handleToggleExpand = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (nestingLevel >= 3) {
+      handleIssuePeekOverview(issueDetail);
+    } else {
+      setExpanded((prevState) => {
+        if (!prevState && workspaceSlug && issueDetail && issueDetail.project_id)
+          subIssuesStore.fetchSubIssues(workspaceSlug.toString(), issueDetail.project_id, issueDetail.id);
+        return !prevState;
+      });
+    }
+  };
+
+  const disableUserActions = !canEditProperties(issueDetail.project_id ?? undefined);
+  const subIssuesCount = issueDetail?.sub_issues_count ?? 0;
+  const isIssueSelected = selectionHelpers.getIsEntitySelected(issueDetail.id);
+  const projectIdentifier = getProjectIdentifierById(issueDetail.project_id);
+
+  const canSelectIssues = !disableUserActions && !selectionHelpers.isSelectionDisabled;
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issueDetail?.project_id,
+    issueId,
+    projectIdentifier,
+    sequenceId: issueDetail?.sequence_id,
+    isEpic,
+  });
+
+  return (
+    <>
+      {/* Single sticky column containing both identifier and workitem */}
+      <td
+        id={`issue-${issueId}`}
+        ref={cellRef}
+        tabIndex={0}
+        className="group/list-block relative left-0 z-10 max-w-lg bg-surface-1 md:sticky"
+      >
+        <ControlLink
+          href={workItemLink}
+          onClick={() => handleIssuePeekOverview(issueDetail)}
+          className="outline-none"
+          disabled={!!issueDetail?.tempId}
+        >
+          <Row
+            className={cn(
+              "group clickable z-10 flex h-11 w-full cursor-pointer items-center border-r-[0.5px] border-subtle-1 bg-transparent text-13 group-[.selected-issue-row]:bg-accent-primary/5 after:absolute group-[.selected-issue-row]:hover:bg-accent-primary/10",
+              {
+                "border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
+                "border border-accent-strong hover:border-accent-strong":
+                  getIsIssuePeeked(issueDetail.id) && nestingLevel === peekIssue?.nestingLevel,
+                "shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current,
+              }
+            )}
+          >
+            {/* Identifier section - conditionally rendered */}
+            {displayProperties?.key && (
+              <div className="flex h-full min-w-24 flex-shrink-0 items-center">
+                <div className="relative flex cursor-pointer items-center text-11 hover:text-primary">
+                  {issueDetail.project_id && (
+                    <IssueIdentifier
+                      issueId={issueDetail.id}
+                      projectId={issueDetail.project_id}
+                      size="xs"
+                      variant="tertiary"
+                      displayProperties={displayProperties}
+                    />
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Workitem section */}
+            <div
+              className={cn("flex flex-grow items-center gap-0.5 py-2", {
+                "min-w-[360px]": !displayProperties?.key,
+                "min-w-60": displayProperties?.key,
+              })}
+            >
+              {/* select checkbox */}
+              {projectId && canSelectIssues && (
+                <Tooltip
+                  label="Only work items within the current project can be selected."
+                  layout="stacked"
+                  disabled={issueDetail.project_id === projectId}
+                >
+                  <div className="absolute left-1 mr-1 grid w-3.5 flex-shrink-0 place-items-center">
+                    <MultipleSelectEntityAction
+                      className={cn(
+                        "pointer-events-none opacity-0 transition-opacity group-hover/list-block:pointer-events-auto group-hover/list-block:opacity-100",
+                        {
+                          "pointer-events-auto opacity-100": isIssueSelected,
+                        }
+                      )}
+                      groupId={SPREADSHEET_SELECT_GROUP}
+                      id={issueDetail.id}
+                      selectionHelpers={selectionHelpers}
+                      disabled={issueDetail.project_id !== projectId}
+                    />
+                  </div>
+                </Tooltip>
+              )}
+
+              {/* sub issues indentation */}
+              {nestingLevel !== 0 && <div style={{ width: subIssueIndentation }} />}
+
+              {/* sub-issues chevron */}
+              <div className="grid size-4 place-items-center">
+                {subIssuesCount > 0 && !isEpic && (
+                  <button
+                    type="button"
+                    className="grid size-4 place-items-center rounded-xs text-placeholder hover:text-tertiary"
+                    onClick={handleToggleExpand}
+                  >
+                    <ChevronRightOutline
+                      className={cn("size-4", {
+                        "rotate-90": isExpanded,
+                      })}
+                    />
+                  </button>
+                )}
+              </div>
+
+              <div className="my-auto flex h-full w-full items-center justify-between gap-2 truncate">
+                <div className="line-clamp-1 w-full text-14 text-primary">
+                  <div className="w-full overflow-hidden">
+                    <Tooltip label={issueDetail.name} layout="stacked" disabled={isMobile}>
+                      <div
+                        className="h-full w-full cursor-pointer truncate pr-4 text-left text-13 text-primary focus:outline-none"
+                        tabIndex={-1}
+                      >
+                        {issueDetail.name}
+                      </div>
+                    </Tooltip>
+                  </div>
+                </div>
+                <div
+                  className={`opacity-0 transition-opacity group-hover:opacity-100 ${isMenuActive ? "!opacity-100" : ""}`}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {quickActions({
+                    issue: issueDetail,
+                    parentRef: cellRef,
+                    customActionButton,
+                    portalElement: portalElement.current,
+                  })}
+                </div>
+              </div>
+            </div>
+          </Row>
+        </ControlLink>
+      </td>
+      {/* Rest of the columns */}
+      {spreadsheetColumnsList.map((property) => (
+        <IssueColumn
+          key={property}
+          displayProperties={displayProperties}
+          issueDetail={issueDetail}
+          disableUserActions={disableUserActions}
+          property={property}
+          updateIssue={updateIssue}
+          isEstimateEnabled={isEstimateEnabled}
+        />
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
new file mode 100644
index 0000000..0337318
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useUserPermissions } from "@/hooks/store/user";
+// components
+import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
+
+export const CycleSpreadsheetLayout = observer(function CycleSpreadsheetLayout() {
+  // router
+  const { cycleId } = useParams();
+  // store hooks
+  const { currentProjectCompletedCycleIds } = useCycle();
+  const { allowPermissions } = useUserPermissions();
+  // auth
+  const isCompletedCycle =
+    cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  const canEditIssueProperties = useCallback(
+    () => !isCompletedCycle && isEditingAllowed,
+    [isCompletedCycle, isEditingAllowed]
+  );
+
+  if (!cycleId) return null;
+
+  return (
+    <BaseSpreadsheetRoot
+      QuickActions={CycleIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditIssueProperties}
+      isCompletedCycle={isCompletedCycle}
+      viewId={cycleId.toString()}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
new file mode 100644
index 0000000..dbb3a50
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// mobx store
+// components
+import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
+
+export const ModuleSpreadsheetLayout = observer(function ModuleSpreadsheetLayout() {
+  const { moduleId } = useParams();
+
+  return <BaseSpreadsheetRoot QuickActions={ModuleIssueQuickActions} viewId={moduleId?.toString()} />;
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
new file mode 100644
index 0000000..bec8eea
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
+
+export const ProjectSpreadsheetLayout = observer(function ProjectSpreadsheetLayout() {
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const canEditPropertiesBasedOnProject = (projectId: string) =>
+    allowPermissions(
+      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      workspaceSlug?.toString(),
+      projectId
+    );
+
+  return (
+    <BaseSpreadsheetRoot
+      QuickActions={ProjectIssueQuickActions}
+      canEditPropertiesBasedOnProject={canEditPropertiesBasedOnProject}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
new file mode 100644
index 0000000..1899af8
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// mobx store
+// components
+import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
+// types
+// constants
+
+export const ProjectViewSpreadsheetLayout = observer(function ProjectViewSpreadsheetLayout() {
+  const { viewId } = useParams();
+
+  return <BaseSpreadsheetRoot QuickActions={ProjectIssueQuickActions} viewId={viewId.toString()} />;
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/workspace-root.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/workspace-root.tsx
new file mode 100644
index 0000000..b1201ba
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/roots/workspace-root.tsx
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback } from "react";
+import { observer } from "mobx-react";
+// plane constants
+import { ALL_ISSUES, EIssueFilterType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { IIssueDisplayFilterOptions } from "@plane/types";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+// components
+import { AllIssueQuickActions } from "@/components/issues/issue-layouts/quick-action-dropdowns";
+import { SpreadsheetLayoutLoader } from "@/components/ui/loader/layouts/spreadsheet-layout-loader";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
+// store
+import { IssueLayoutHOC } from "../../issue-layout-HOC";
+import type { TRenderQuickActions } from "../../list/list-view-types";
+import { SpreadsheetView } from "../spreadsheet-view";
+
+type Props = {
+  isDefaultView: boolean;
+  isLoading?: boolean;
+  toggleLoading: (value: boolean) => void;
+  workspaceSlug: string;
+  globalViewId: string;
+  routeFilters: {
+    [key: string]: string;
+  };
+  fetchNextPages: () => void;
+  globalViewsLoading: boolean;
+  issuesLoading: boolean;
+};
+
+export const WorkspaceSpreadsheetRoot = observer(function WorkspaceSpreadsheetRoot(props: Props) {
+  const { isLoading = false, workspaceSlug, globalViewId, fetchNextPages, issuesLoading } = props;
+
+  // Custom hooks
+  useWorkspaceIssueProperties(workspaceSlug);
+
+  // Store hooks
+  const {
+    issuesFilter: { filters, updateFilters },
+    issues: { getIssueLoader, getPaginationData, groupedIssueIds },
+  } = useIssues(EIssuesStoreType.GLOBAL);
+  const { updateIssue, removeIssue, archiveIssue } = useIssuesActions(EIssuesStoreType.GLOBAL);
+  const { allowPermissions } = useUserPermissions();
+
+  // Derived values
+  const issueFilters = globalViewId ? filters?.[globalViewId.toString()] : undefined;
+
+  // Permission checker
+  const canEditProperties = useCallback(
+    (projectId: string | undefined) => {
+      if (!projectId) return false;
+      return allowPermissions(
+        [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+        EUserPermissionsLevel.PROJECT,
+        workspaceSlug.toString(),
+        projectId
+      );
+    },
+    [allowPermissions, workspaceSlug]
+  );
+
+  // Display filters handler
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !globalViewId) return;
+
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        { ...updatedDisplayFilter },
+        globalViewId.toString()
+      );
+    },
+    [updateFilters, workspaceSlug, globalViewId]
+  );
+
+  // Quick actions renderer
+  const renderQuickActions: TRenderQuickActions = useCallback(
+    ({ issue, parentRef, customActionButton, placement, portalElement }) => (
+      <AllIssueQuickActions
+        parentRef={parentRef}
+        customActionButton={customActionButton}
+        issue={issue}
+        handleDelete={async () => removeIssue(issue.project_id, issue.id)}
+        handleUpdate={async (data) => updateIssue && updateIssue(issue.project_id, issue.id, data)}
+        handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
+        portalElement={portalElement}
+        readOnly={!canEditProperties(issue.project_id ?? undefined)}
+        placements={placement}
+      />
+    ),
+    [canEditProperties, removeIssue, updateIssue, archiveIssue]
+  );
+
+  // Loading state
+  if ((isLoading && issuesLoading && getIssueLoader() === "init-loader") || !globalViewId || !groupedIssueIds) {
+    return <SpreadsheetLayoutLoader />;
+  }
+
+  // Computed values
+  const issueIds = groupedIssueIds[ALL_ISSUES];
+  const nextPageResults = getPaginationData(ALL_ISSUES, undefined)?.nextPageResults;
+
+  // Render spreadsheet
+  return (
+    <IssueLayoutHOC layout={EIssueLayoutTypes.SPREADSHEET}>
+      <SpreadsheetView
+        displayProperties={issueFilters?.displayProperties ?? {}}
+        displayFilters={issueFilters?.displayFilters ?? {}}
+        handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+        issueIds={Array.isArray(issueIds) ? issueIds : []}
+        quickActions={renderQuickActions}
+        updateIssue={updateIssue}
+        canEditProperties={canEditProperties}
+        canLoadMoreIssues={!!nextPageResults}
+        loadMoreIssues={fetchNextPages}
+        isWorkspaceLevel
+      />
+    </IssueLayoutHOC>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
new file mode 100644
index 0000000..99576d6
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+//types
+import { observer } from "mobx-react";
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+//components
+import { shouldRenderColumn } from "@/helpers/issue-filter.helper";
+import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
+import { HeaderColumn } from "./columns/header-column";
+
+interface Props {
+  displayProperties: IIssueDisplayProperties;
+  property: keyof IIssueDisplayProperties;
+  isEstimateEnabled: boolean;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  isEpic?: boolean;
+}
+export const SpreadsheetHeaderColumn = observer(function SpreadsheetHeaderColumn(props: Props) {
+  const { displayProperties, displayFilters, property, handleDisplayFilterUpdate, isEpic = false } = props;
+
+  //hooks
+  const tableHeaderCellRef = useRef<HTMLTableCellElement | null>(null);
+
+  const shouldRenderProperty = shouldRenderColumn(property);
+
+  return (
+    <WithDisplayPropertiesHOC
+      displayProperties={displayProperties}
+      displayPropertyKey={property}
+      shouldRenderProperty={() => shouldRenderProperty}
+    >
+      <th
+        className="h-11 min-w-36 items-center border border-t-0 border-b-0 border-subtle bg-layer-1 py-1 text-13 font-medium"
+        ref={tableHeaderCellRef}
+        tabIndex={0}
+      >
+        <HeaderColumn
+          displayFilters={displayFilters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+          property={property}
+          onClose={() => {
+            tableHeaderCellRef?.current?.focus();
+          }}
+          isEpic={isEpic}
+        />
+      </th>
+    </WithDisplayPropertiesHOC>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
new file mode 100644
index 0000000..c9e2bee
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// constants
+import { SPREADSHEET_SELECT_GROUP } from "@plane/constants";
+// ui
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+// components
+import { cn } from "@plane/utils";
+import { MultipleSelectGroupAction } from "@/components/core/multiple-select";
+// hooks
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+import { SpreadsheetHeaderColumn } from "./spreadsheet-header-column";
+
+interface Props {
+  displayProperties: IIssueDisplayProperties;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  isEstimateEnabled: boolean;
+  spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
+  selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
+}
+
+export const SpreadsheetHeader = observer(function SpreadsheetHeader(props: Props) {
+  const {
+    displayProperties,
+    displayFilters,
+    handleDisplayFilterUpdate,
+    canEditProperties,
+    isEstimateEnabled,
+    spreadsheetColumnsList,
+    selectionHelpers,
+    isEpic = false,
+  } = props;
+  // router
+  const { projectId } = useParams();
+  // derived values
+  const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(SPREADSHEET_SELECT_GROUP) === "empty";
+  // auth
+  const canSelectIssues = canEditProperties(projectId?.toString()) && !selectionHelpers.isSelectionDisabled;
+
+  return (
+    <thead className="sticky top-0 left-0 z-[12] border-b-[0.5px] border-subtle">
+      <tr>
+        {/* Single header column containing both identifier and workitem */}
+        <th
+          className="group/list-header left-0 z-[15] h-11 min-w-60 border-r-[0.5px] border-subtle bg-layer-1 text-13 font-medium md:sticky"
+          tabIndex={-1}
+        >
+          <div className="flex h-full w-full items-center gap-2 px-page-x">
+            {/* Workitem header section */}
+            <div className="flex h-full min-w-80 flex-grow items-center gap-1 py-2.5">
+              {canSelectIssues && (
+                <div className="mr-1 flex w-3.5 flex-shrink-0 items-center">
+                  <MultipleSelectGroupAction
+                    className={cn(
+                      "pointer-events-none size-3.5 opacity-0 !outline-none group-hover/list-header:pointer-events-auto group-hover/list-header:opacity-100",
+                      {
+                        "pointer-events-auto opacity-100": !isGroupSelectionEmpty,
+                      }
+                    )}
+                    groupID={SPREADSHEET_SELECT_GROUP}
+                    selectionHelpers={selectionHelpers}
+                  />
+                </div>
+              )}
+              <span className="text-13 font-medium">{`${isEpic ? "Epics" : "Work items"}`}</span>
+            </div>
+          </div>
+        </th>
+
+        {spreadsheetColumnsList.map((property) => (
+          <SpreadsheetHeaderColumn
+            key={property}
+            property={property}
+            displayProperties={displayProperties}
+            displayFilters={displayFilters}
+            handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+            isEstimateEnabled={isEstimateEnabled}
+            isEpic={isEpic}
+          />
+        ))}
+      </tr>
+    </thead>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
new file mode 100644
index 0000000..799eb9b
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@plane/types";
+// components
+import { SpreadsheetIssueRowLoader } from "@/components/ui/loader/layouts/spreadsheet-layout-loader";
+// hooks
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+import type { TSelectionHelper } from "@/hooks/use-multiple-select";
+import { useTableKeyboardNavigation } from "@/hooks/use-table-keyboard-navigation";
+// local imports
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { getDisplayPropertiesCount } from "../utils";
+import { SpreadsheetIssueRow } from "./issue-row";
+import { SpreadsheetHeader } from "./spreadsheet-header";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  issueIds: string[];
+  isEstimateEnabled: boolean;
+  quickActions: TRenderQuickActions;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  portalElement: React.MutableRefObject<HTMLDivElement | null>;
+  containerRef: MutableRefObject<HTMLTableElement | null>;
+  canLoadMoreIssues: boolean;
+  loadMoreIssues: () => void;
+  spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
+  selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
+};
+
+export const SpreadsheetTable = observer(function SpreadsheetTable(props: Props) {
+  const {
+    displayProperties,
+    displayFilters,
+    handleDisplayFilterUpdate,
+    issueIds,
+    isEstimateEnabled,
+    portalElement,
+    quickActions,
+    updateIssue,
+    canEditProperties,
+    canLoadMoreIssues,
+    containerRef,
+    loadMoreIssues,
+    spreadsheetColumnsList,
+    selectionHelpers,
+    isEpic = false,
+  } = props;
+
+  // states
+  const isScrolled = useRef(false);
+  const [intersectionElement, setIntersectionElement] = useState<HTMLTableSectionElement | null>(null);
+
+  const {
+    issues: { getIssueLoader },
+  } = useIssuesStore();
+
+  const handleScroll = useCallback(() => {
+    if (!containerRef.current) return;
+    const scrollLeft = containerRef.current.scrollLeft;
+
+    const columnShadow = "8px 22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for regular columns
+    const headerShadow = "8px -22px 22px 10px rgba(0, 0, 0, 0.05)"; // shadow for headers
+
+    //The shadow styles are added this way to avoid re-render of all the rows of table, which could be costly
+    if (scrollLeft > 0 !== isScrolled.current) {
+      const firstColumns = containerRef.current.querySelectorAll("table tr td:first-child, th:first-child");
+
+      for (let i = 0; i < firstColumns.length; i++) {
+        const shadow = i === 0 ? headerShadow : columnShadow;
+        if (scrollLeft > 0) {
+          (firstColumns[i] as HTMLElement).style.boxShadow = shadow;
+        } else {
+          (firstColumns[i] as HTMLElement).style.boxShadow = "none";
+        }
+      }
+      isScrolled.current = scrollLeft > 0;
+    }
+  }, [containerRef]);
+
+  useEffect(() => {
+    const currentContainerRef = containerRef.current;
+
+    if (currentContainerRef) currentContainerRef.addEventListener("scroll", handleScroll);
+
+    return () => {
+      if (currentContainerRef) currentContainerRef.removeEventListener("scroll", handleScroll);
+    };
+  }, [handleScroll, containerRef]);
+
+  const isPaginating = !!getIssueLoader();
+
+  useIntersectionObserver(containerRef, isPaginating ? null : intersectionElement, loadMoreIssues, `100% 0% 100% 0%`);
+
+  const handleKeyBoardNavigation = useTableKeyboardNavigation();
+
+  const ignoreFieldsForCounting: (keyof IIssueDisplayProperties)[] = ["key"];
+  if (!isEstimateEnabled) ignoreFieldsForCounting.push("estimate");
+  const displayPropertiesCount = getDisplayPropertiesCount(displayProperties, ignoreFieldsForCounting);
+
+  return (
+    <table className="w-full overflow-y-auto bg-surface-1" onKeyDown={handleKeyBoardNavigation}>
+      <SpreadsheetHeader
+        displayProperties={displayProperties}
+        displayFilters={displayFilters}
+        handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        canEditProperties={canEditProperties}
+        isEstimateEnabled={isEstimateEnabled}
+        spreadsheetColumnsList={spreadsheetColumnsList}
+        selectionHelpers={selectionHelpers}
+        isEpic={isEpic}
+      />
+      <tbody>
+        {issueIds.map((id) => (
+          <SpreadsheetIssueRow
+            key={id}
+            issueId={id}
+            displayProperties={displayProperties}
+            quickActions={quickActions}
+            canEditProperties={canEditProperties}
+            nestingLevel={0}
+            isEstimateEnabled={isEstimateEnabled}
+            updateIssue={updateIssue}
+            portalElement={portalElement}
+            containerRef={containerRef}
+            isScrolled={isScrolled}
+            spreadsheetColumnsList={spreadsheetColumnsList}
+            selectionHelpers={selectionHelpers}
+            isEpic={isEpic}
+          />
+        ))}
+      </tbody>
+      {canLoadMoreIssues && (
+        <tfoot ref={setIntersectionElement}>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <SpreadsheetIssueRowLoader key={index} columnCount={displayPropertiesCount} />
+          ))}
+        </tfoot>
+      )}
+    </table>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
new file mode 100644
index 0000000..b9aa216
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useRef } from "react";
+import { observer } from "mobx-react";
+// plane constants
+import { SPREADSHEET_SELECT_GROUP, SPREADSHEET_PROPERTY_LIST } from "@plane/constants";
+// types
+import type { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { EIssueLayoutTypes } from "@plane/types";
+// components
+import { MultipleSelectGroup } from "@/components/core/multiple-select";
+import { IssueBulkOperationsRoot } from "@/components/issues/bulk-operations";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useBulkOperationStatus } from "@/hooks/use-bulk-operation-status";
+// local imports
+import type { TRenderQuickActions } from "../list/list-view-types";
+import { QuickAddIssueRoot, SpreadsheetAddIssueButton } from "../quick-add";
+import { SpreadsheetTable } from "./spreadsheet-table";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  issueIds: string[] | undefined;
+  quickActions: TRenderQuickActions;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
+  openIssuesListModal?: (() => void) | null;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  canLoadMoreIssues: boolean;
+  loadMoreIssues: () => void;
+  enableQuickCreateIssue?: boolean;
+  disableIssueCreation?: boolean;
+  isWorkspaceLevel?: boolean;
+  isEpic?: boolean;
+};
+
+export const SpreadsheetView = observer(function SpreadsheetView(props: Props) {
+  const {
+    displayProperties,
+    displayFilters,
+    handleDisplayFilterUpdate,
+    issueIds,
+    quickActions,
+    updateIssue,
+    quickAddCallback,
+    canEditProperties,
+    enableQuickCreateIssue,
+    disableIssueCreation,
+    canLoadMoreIssues,
+    loadMoreIssues,
+    isWorkspaceLevel = false,
+    isEpic = false,
+  } = props;
+  // refs
+  const containerRef = useRef<HTMLTableElement | null>(null);
+  const portalRef = useRef<HTMLDivElement | null>(null);
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  // plane web hooks
+  const isBulkOperationsEnabled = useBulkOperationStatus();
+
+  const isEstimateEnabled: boolean = currentProjectDetails?.estimate !== null;
+
+  const spreadsheetColumnsList = isWorkspaceLevel
+    ? SPREADSHEET_PROPERTY_LIST
+    : SPREADSHEET_PROPERTY_LIST.filter((property) => {
+        if (property === "cycle" && !currentProjectDetails?.cycle_view) return false;
+        if (property === "modules" && !currentProjectDetails?.module_view) return false;
+        return true;
+      });
+
+  if (!issueIds || issueIds.length === 0) return <></>;
+  return (
+    <div className="relative flex h-full w-full flex-col overflow-x-hidden bg-layer-1 whitespace-nowrap text-secondary">
+      <div ref={portalRef} className="spreadsheet-menu-portal" />
+      <MultipleSelectGroup
+        containerRef={containerRef}
+        entities={{
+          [SPREADSHEET_SELECT_GROUP]: issueIds,
+        }}
+        disabled={!isBulkOperationsEnabled || isEpic}
+      >
+        {(helpers) => (
+          <>
+            <div ref={containerRef} className="vertical-scrollbar horizontal-scrollbar scrollbar-lg h-full w-full">
+              <SpreadsheetTable
+                displayProperties={displayProperties}
+                displayFilters={displayFilters}
+                handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+                issueIds={issueIds}
+                isEstimateEnabled={isEstimateEnabled}
+                portalElement={portalRef}
+                quickActions={quickActions}
+                updateIssue={updateIssue}
+                canEditProperties={canEditProperties}
+                containerRef={containerRef}
+                canLoadMoreIssues={canLoadMoreIssues}
+                loadMoreIssues={loadMoreIssues}
+                spreadsheetColumnsList={spreadsheetColumnsList}
+                selectionHelpers={helpers}
+                isEpic={isEpic}
+              />
+            </div>
+            <div className="border-t border-subtle">
+              <div className="sticky bottom-0 left-0 z-5">
+                {enableQuickCreateIssue && !disableIssueCreation && (
+                  <QuickAddIssueRoot
+                    layout={EIssueLayoutTypes.SPREADSHEET}
+                    QuickAddButton={SpreadsheetAddIssueButton}
+                    quickAddCallback={quickAddCallback}
+                    isEpic={isEpic}
+                  />
+                )}
+              </div>
+            </div>
+            <IssueBulkOperationsRoot selectionHelpers={helpers} />
+          </>
+        )}
+      </MultipleSelectGroup>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-layouts/utils.tsx b/apps/web/core/components/issues/issue-layouts/utils.tsx
new file mode 100644
index 0000000..e14a7c4
--- /dev/null
+++ b/apps/web/core/components/issues/issue-layouts/utils.tsx
@@ -0,0 +1,889 @@
+// oxlint-disable no-shadow
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { CSSProperties } from "react";
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { clone, isNil, pull, uniq, concat } from "lodash-es";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
+import type { FC } from "react";
+import {
+  AttachOutline,
+  CalendarOutline,
+  CyclesOutline,
+  DueDateOutline,
+  EstimateOutline,
+  LabelsOutline,
+  LinkOutline,
+  MembersOutline,
+  ModuleOutline,
+  PriorityOutline,
+  StartDateOutline,
+  StateOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+// plane types
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { EIconSize, ISSUE_PRIORITIES, STATE_GROUPS } from "@plane/constants";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import type {
+  GroupByColumnTypes,
+  IGroupByColumn,
+  TCycleGroups,
+  IIssueDisplayProperties,
+  IPragmaticDropPayload,
+  TIssue,
+  TIssueGroupByOptions,
+  IIssueFilterOptions,
+  IIssueFilters,
+  TGroupedIssues,
+  IIssueDisplayFilterOptions,
+  TGetColumns,
+  TSpreadsheetColumn,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+// plane ui
+
+import { renderFormattedDate, getFileURL } from "@plane/utils";
+// store
+import { store } from "@/lib/store-context";
+import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/base-issues.store";
+import { DEFAULT_DISPLAY_PROPERTIES } from "@/store/issue/issue-details/sub_issues_filter.store";
+// constants
+import { ISSUE_GROUP_BY_OPTIONS } from "@plane/constants";
+// components
+import {
+  SpreadsheetAssigneeColumn,
+  SpreadsheetAttachmentColumn,
+  SpreadsheetCreatedOnColumn,
+  SpreadsheetDueDateColumn,
+  SpreadsheetEstimateColumn,
+  SpreadsheetLabelColumn,
+  SpreadsheetModuleColumn,
+  SpreadsheetCycleColumn,
+  SpreadsheetLinkColumn,
+  SpreadsheetPriorityColumn,
+  SpreadsheetStartDateColumn,
+  SpreadsheetStateColumn,
+  SpreadsheetSubIssueColumn,
+  SpreadsheetUpdatedOnColumn,
+} from "@/components/issues/issue-layouts/spreadsheet/columns";
+
+export const HIGHLIGHT_CLASS = "highlight";
+export const HIGHLIGHT_WITH_LINE = "highlight-with-line";
+
+export type GroupDropLocation = {
+  columnId: string;
+  groupId: string;
+  subGroupId?: string;
+  id: string | undefined;
+  canAddIssueBelow?: boolean;
+};
+
+export type IssueUpdates = {
+  [groupKey: string]: {
+    ADD: string[];
+    REMOVE: string[];
+  };
+};
+
+export const isWorkspaceLevel = (type: EIssuesStoreType) =>
+  // oxlint-disable-next-line no-unneeded-ternary
+  [
+    EIssuesStoreType.PROFILE,
+    EIssuesStoreType.GLOBAL,
+    EIssuesStoreType.TEAM,
+    EIssuesStoreType.TEAM_VIEW,
+    EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS,
+    EIssuesStoreType.WORKSPACE_DRAFT,
+  ].includes(type)
+    ? true
+    : false;
+
+type TGetGroupByColumns = {
+  groupBy: GroupByColumnTypes | null;
+  includeNone: boolean;
+  isWorkspaceLevel: boolean;
+  isEpic?: boolean;
+  projectId?: string;
+};
+
+// NOTE: Type of groupBy is different compared to what's being passed from the components.
+// We are using `as` to typecast it to the expected type.
+// It can break the includeNone logic if not handled properly.
+export const getGroupByColumns = ({
+  groupBy,
+  includeNone,
+  isWorkspaceLevel,
+  isEpic = false,
+  projectId,
+}: TGetGroupByColumns): IGroupByColumn[] | undefined => {
+  // If no groupBy is specified and includeNone is true, return "All Issues" group
+  if (!groupBy && includeNone) {
+    return [
+      {
+        id: "All Issues",
+        name: `All ${isEpic ? "Epics" : "work items"}`,
+        payload: {},
+        icon: undefined,
+      },
+    ];
+  }
+
+  // Return undefined if no valid groupBy
+  if (!groupBy) return undefined;
+
+  // Map of group by options to their corresponding column getter functions
+  const groupByColumnMap: Record<
+    GroupByColumnTypes,
+    ({ isWorkspaceLevel, projectId }: TGetColumns) => IGroupByColumn[] | undefined
+  > = {
+    project: getProjectColumns,
+    cycle: getCycleColumns,
+    module: getModuleColumns,
+    state: getStateColumns,
+    "state_detail.group": getStateGroupColumns,
+    priority: getPriorityColumns,
+    labels: getLabelsColumns,
+    assignees: getAssigneeColumns,
+    created_by: getCreatedByColumns,
+    team_project: getTeamProjectColumns,
+  };
+
+  // Get and return the columns for the specified group by option
+  return groupByColumnMap[groupBy]?.({ isWorkspaceLevel, projectId });
+};
+
+const getProjectColumns = (): IGroupByColumn[] | undefined => {
+  const { joinedProjectIds: projectIds, projectMap } = store.projectRoot.project;
+  // Return undefined if no project ids
+  if (!projectIds) return;
+  // Map project ids to project columns
+  return projectIds
+    .map((projectId: string) => {
+      const project = projectMap[projectId];
+      if (!project) return;
+      return {
+        id: project.id,
+        name: project.name,
+        icon: (
+          <div className="grid h-6 w-6 flex-shrink-0 place-items-center">
+            <Logo logo={project.logo_props} />
+          </div>
+        ),
+        payload: { project_id: project.id },
+      };
+    })
+    .filter((column) => column !== undefined) as IGroupByColumn[];
+};
+
+const getCycleColumns = (): IGroupByColumn[] | undefined => {
+  const { currentProjectDetails } = store.projectRoot.project;
+  // Check for the current project details
+  if (!currentProjectDetails || !currentProjectDetails?.id) return;
+  const { getProjectCycleDetails } = store.cycle;
+  // Get the cycle details for the current project
+  const cycleDetails = currentProjectDetails?.id ? getProjectCycleDetails(currentProjectDetails?.id) : undefined;
+  // Map the cycle details to the group by columns
+  const cycles: IGroupByColumn[] = [];
+  cycleDetails?.map((cycle) => {
+    const cycleStatus = cycle.status ? (cycle.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+    const isDropDisabled = cycleStatus === "completed";
+    cycles.push({
+      id: cycle.id,
+      name: cycle.name,
+      icon: <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />,
+      payload: { cycle_id: cycle.id },
+      isDropDisabled,
+      dropErrorMessage: isDropDisabled ? "Work item cannot be moved to completed cycles" : undefined,
+    });
+  });
+  cycles.push({
+    id: "None",
+    name: "None",
+    icon: <CyclesOutline className="h-3.5 w-3.5" />,
+    payload: {},
+  });
+  return cycles;
+};
+
+const getModuleColumns = (): IGroupByColumn[] | undefined => {
+  // get current project details
+  const { currentProjectDetails } = store.projectRoot.project;
+  if (!currentProjectDetails || !currentProjectDetails?.id) return;
+  // get project module ids and module details
+  const { getProjectModuleDetails } = store.module;
+  // get module details
+  const moduleDetails = currentProjectDetails?.id ? getProjectModuleDetails(currentProjectDetails?.id) : undefined;
+  // map module details to group by columns
+  const modules: IGroupByColumn[] = [];
+  moduleDetails?.map((module) => {
+    modules.push({
+      id: module.id,
+      name: module.name,
+      icon: <ModuleOutline className="h-3.5 w-3.5" />,
+      payload: { module_ids: [module.id] },
+    });
+  });
+  modules.push({
+    id: "None",
+    name: "None",
+    icon: <ModuleOutline className="h-3.5 w-3.5" />,
+    payload: {},
+  });
+  return modules;
+};
+
+const getStateColumns = ({ projectId }: TGetColumns): IGroupByColumn[] | undefined => {
+  const { getProjectStates, projectStates } = store.state;
+  const _states = projectId ? getProjectStates(projectId) : projectStates;
+  if (!_states) return;
+  // map project states to group by columns
+  return _states.map((state) => ({
+    id: state.id,
+    name: state.name,
+    icon: (
+      <div className="size-4 rounded-full">
+        <StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.LG} percentage={state.order} />
+      </div>
+    ),
+    payload: { state_id: state.id },
+  }));
+};
+
+const getStateGroupColumns = (): IGroupByColumn[] => {
+  const stateGroups = STATE_GROUPS;
+  // map state groups to group by columns
+  return Object.values(stateGroups).map((stateGroup) => ({
+    id: stateGroup.key,
+    name: stateGroup.label,
+    icon: (
+      <div className="size-4 rounded-full">
+        <StateGroupIcon stateGroup={stateGroup.key} size={EIconSize.LG} />
+      </div>
+    ),
+    payload: {},
+  }));
+};
+
+const getPriorityColumns = (): IGroupByColumn[] => {
+  const priorities = ISSUE_PRIORITIES;
+  // map priorities to group by columns
+  return priorities.map((priority) => ({
+    id: priority.key,
+    name: priority.title,
+    icon: <PriorityIcon priority={priority?.key} />,
+    payload: { priority: priority.key },
+  }));
+};
+
+const getLabelsColumns = ({ isWorkspaceLevel }: TGetColumns): IGroupByColumn[] => {
+  const { workspaceLabels, projectLabels } = store.label;
+  // map labels to group by columns
+  const labels = [
+    ...(isWorkspaceLevel ? workspaceLabels || [] : projectLabels || []),
+    { id: "None", name: "None", color: "#666" },
+  ];
+  // map labels to group by columns
+  return labels.map((label) => ({
+    id: label.id,
+    name: label.name,
+    icon: (
+      <div className="h-[12px] w-[12px] rounded-full" style={{ backgroundColor: label.color ? label.color : "#666" }} />
+    ),
+    payload: label?.id === "None" ? {} : { label_ids: [label.id] },
+  }));
+};
+
+const getAssigneeColumns = ({ isWorkspaceLevel, projectId }: TGetColumns): IGroupByColumn[] | undefined => {
+  // store values
+  const { getUserDetails } = store.memberRoot;
+  // derived values
+  const { memberIds, includeNone } = getScopeMemberIds({ isWorkspaceLevel, projectId });
+  const assigneeColumns: IGroupByColumn[] = [];
+
+  if (!memberIds) return [];
+
+  memberIds.forEach((memberId) => {
+    const member = getUserDetails(memberId);
+    if (!member) return;
+    assigneeColumns.push({
+      id: memberId,
+      name: member?.display_name || "",
+      icon: (
+        <Avatar
+          alt={member?.display_name}
+          fallback={member?.display_name?.[0]?.toUpperCase()}
+          src={getFileURL(member?.avatar_url ?? "")}
+          size="xs"
+        />
+      ),
+      payload: { assignee_ids: [memberId] },
+    });
+  });
+  if (includeNone) {
+    assigneeColumns.push({ id: "None", name: "None", icon: <Avatar size="xs" />, payload: {} });
+  }
+
+  return assigneeColumns;
+};
+
+const getCreatedByColumns = (): IGroupByColumn[] | undefined => {
+  const {
+    project: { projectMemberIds },
+    getUserDetails,
+  } = store.memberRoot;
+  if (!projectMemberIds) return;
+  // Map project member ids to group by created by columns
+  return projectMemberIds.map((memberId) => {
+    const member = getUserDetails(memberId);
+    return {
+      id: memberId,
+      name: member?.display_name || "",
+      icon: (
+        <Avatar
+          alt={member?.display_name}
+          fallback={member?.display_name?.[0]?.toUpperCase()}
+          src={getFileURL(member?.avatar_url ?? "")}
+          size="xs"
+        />
+      ),
+      payload: {},
+    };
+  });
+};
+
+export const getDisplayPropertiesCount = (
+  displayProperties: IIssueDisplayProperties,
+  ignoreFields?: (keyof IIssueDisplayProperties)[]
+) => {
+  const propertyKeys = Object.keys(displayProperties) as (keyof IIssueDisplayProperties)[];
+
+  let count = 0;
+
+  for (const propertyKey of propertyKeys) {
+    if (ignoreFields && ignoreFields.includes(propertyKey)) continue;
+    if (displayProperties[propertyKey]) count++;
+  }
+
+  return count;
+};
+
+/**
+ * This Method finds the DOM element with elementId, scrolls to it and highlights the issue block
+ * @param elementId
+ * @param shouldScrollIntoView
+ */
+export const highlightIssueOnDrop = (
+  elementId: string | undefined,
+  shouldScrollIntoView = true,
+  shouldHighLightWithLine = false
+) => {
+  setTimeout(async () => {
+    const sourceElementId = elementId ?? "";
+    const sourceElement = document.getElementById(sourceElementId);
+    sourceElement?.classList?.add(shouldHighLightWithLine ? HIGHLIGHT_WITH_LINE : HIGHLIGHT_CLASS);
+    if (shouldScrollIntoView && sourceElement)
+      await scrollIntoView(sourceElement, { behavior: "smooth", block: "center", duration: 1500 });
+  }, 200);
+};
+
+/**
+ * get Kanban Source data from Pragmatic Payload
+ * @param payload
+ * @returns
+ */
+export const getSourceFromDropPayload = (payload: IPragmaticDropPayload): GroupDropLocation | undefined => {
+  const { location, source: sourceIssue } = payload;
+
+  const sourceIssueData = sourceIssue.data;
+  let sourceColumData;
+
+  const sourceDropTargets = location?.initial?.dropTargets ?? [];
+  for (const dropTarget of sourceDropTargets) {
+    const dropTargetData = dropTarget?.data;
+
+    if (!dropTargetData) continue;
+
+    if (dropTargetData.type === "COLUMN") {
+      sourceColumData = dropTargetData;
+    }
+  }
+
+  if (sourceIssueData?.id === undefined || !sourceColumData?.groupId) return;
+
+  return {
+    groupId: sourceColumData.groupId as string,
+    subGroupId: sourceColumData.subGroupId as string,
+    columnId: sourceColumData.columnId as string,
+    id: sourceIssueData.id as string,
+  };
+};
+
+/**
+ * get Destination Source data from Pragmatic Payload
+ * @param payload
+ * @returns
+ */
+export const getDestinationFromDropPayload = (payload: IPragmaticDropPayload): GroupDropLocation | undefined => {
+  const { location } = payload;
+
+  let destinationIssueData, destinationColumnData;
+
+  const destDropTargets = location?.current?.dropTargets ?? [];
+
+  for (const dropTarget of destDropTargets) {
+    const dropTargetData = dropTarget?.data;
+
+    if (!dropTargetData) continue;
+
+    if (dropTargetData.type === "COLUMN" || dropTargetData.type === "DELETE") {
+      destinationColumnData = dropTargetData;
+    }
+
+    if (dropTargetData.type === "ISSUE") {
+      destinationIssueData = dropTargetData;
+    }
+  }
+
+  if (!destinationColumnData?.groupId) return;
+
+  // extract instruction from destination issue
+  const extractedInstruction = destinationIssueData ? extractInstruction(destinationIssueData)?.type : "";
+
+  return {
+    groupId: destinationColumnData.groupId as string,
+    subGroupId: destinationColumnData.subGroupId as string,
+    columnId: destinationColumnData.columnId as string,
+    id: destinationIssueData?.id as string | undefined,
+    canAddIssueBelow: extractedInstruction === "reorder-below",
+  };
+};
+
+/**
+ * Returns Sort order of the issue block at the position of drop
+ * @param destinationIssues
+ * @param destinationIssueId
+ * @param getIssueById
+ * @returns
+ */
+const handleSortOrder = (
+  destinationIssues: string[],
+  destinationIssueId: string | undefined,
+  getIssueById: (issueId: string) => TIssue | undefined,
+  shouldAddIssueAtTop = false,
+  canAddIssueBelow = false
+) => {
+  const sortOrderDefaultValue = 65535;
+  let currentIssueState = {};
+
+  let destinationIndex = destinationIssueId
+    ? destinationIssues.indexOf(destinationIssueId)
+    : shouldAddIssueAtTop
+      ? 0
+      : destinationIssues.length;
+
+  const isDestinationLastChild = destinationIndex === destinationIssues.length - 1;
+
+  // if issue can be added below and if the destination issue is the last child, then add to the end of the list
+  if (canAddIssueBelow && isDestinationLastChild) {
+    destinationIndex = destinationIssues.length;
+  }
+
+  if (destinationIssues && destinationIssues.length > 0) {
+    if (destinationIndex === 0) {
+      const destinationIssueId = destinationIssues[0];
+      const destinationIssue = getIssueById(destinationIssueId);
+      if (!destinationIssue) return currentIssueState;
+
+      currentIssueState = {
+        ...currentIssueState,
+        sort_order: destinationIssue.sort_order - sortOrderDefaultValue,
+      };
+    } else if (destinationIndex === destinationIssues.length) {
+      const destinationIssueId = destinationIssues[destinationIssues.length - 1];
+      const destinationIssue = getIssueById(destinationIssueId);
+      if (!destinationIssue) return currentIssueState;
+
+      currentIssueState = {
+        ...currentIssueState,
+        sort_order: destinationIssue.sort_order + sortOrderDefaultValue,
+      };
+    } else {
+      const destinationTopIssueId = destinationIssues[destinationIndex - 1];
+      const destinationBottomIssueId = destinationIssues[destinationIndex];
+
+      const destinationTopIssue = getIssueById(destinationTopIssueId);
+      const destinationBottomIssue = getIssueById(destinationBottomIssueId);
+      if (!destinationTopIssue || !destinationBottomIssue) return currentIssueState;
+
+      currentIssueState = {
+        ...currentIssueState,
+        sort_order: (destinationTopIssue.sort_order + destinationBottomIssue.sort_order) / 2,
+      };
+    }
+  } else {
+    currentIssueState = {
+      ...currentIssueState,
+      sort_order: sortOrderDefaultValue,
+    };
+  }
+
+  return currentIssueState;
+};
+
+export const getIssueBlockId = (issueId: string | undefined, groupId: string | undefined, subGroupId?: string) =>
+  `issue_${issueId}_${groupId}_${subGroupId}`;
+
+/**
+ * returns empty Array if groupId is None
+ * @param groupId
+ * @returns
+ */
+const getGroupId = (groupId: string) => {
+  if (groupId === "None") return [];
+  return [groupId];
+};
+
+export const handleGroupDragDrop = async (
+  source: GroupDropLocation,
+  destination: GroupDropLocation,
+  getIssueById: (issueId: string) => TIssue | undefined,
+  getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined,
+  updateIssueOnDrop: (projectId: string, issueId: string, data: Partial<TIssue>, issueUpdates: IssueUpdates) => void,
+  groupBy: TIssueGroupByOptions | undefined,
+  subGroupBy: TIssueGroupByOptions | undefined,
+  shouldAddIssueAtTop = false
+) => {
+  if (!source.id || (subGroupBy && (!source.subGroupId || !destination.subGroupId))) return;
+
+  let updatedIssue: Partial<TIssue> = {};
+  const issueUpdates: IssueUpdates = {};
+  const destinationIssues = getIssueIds(destination.groupId, destination.subGroupId) ?? [];
+
+  const sourceIssue = getIssueById(source.id);
+
+  if (!sourceIssue) return;
+
+  updatedIssue = {
+    id: sourceIssue.id,
+    project_id: sourceIssue.project_id,
+  };
+
+  // for both horizontal and vertical dnd
+  updatedIssue = {
+    ...updatedIssue,
+    ...handleSortOrder(
+      destinationIssues,
+      destination.id,
+      getIssueById,
+      shouldAddIssueAtTop,
+      !!destination.canAddIssueBelow
+    ),
+  };
+
+  // update updatedIssue values based on the source and destination groupIds
+  if (source.groupId && destination.groupId && source.groupId !== destination.groupId && groupBy) {
+    const groupKey = ISSUE_FILTER_DEFAULT_DATA[groupBy];
+    let groupValue: any = clone(sourceIssue[groupKey]);
+
+    // If groupValues is an array, remove source groupId and add destination groupId
+    if (Array.isArray(groupValue)) {
+      pull(groupValue, source.groupId);
+      if (destination.groupId !== "None") groupValue = uniq(concat(groupValue, [destination.groupId]));
+    } // else just update the groupValue based on destination groupId
+    else {
+      groupValue = destination.groupId === "None" ? null : destination.groupId;
+    }
+
+    // keep track of updates on what was added and what was removed
+    issueUpdates[groupKey] = { ADD: getGroupId(destination.groupId), REMOVE: getGroupId(source.groupId) };
+    updatedIssue = { ...updatedIssue, [groupKey]: groupValue };
+  }
+
+  // do the same for subgroup
+  // update updatedIssue values based on the source and destination subGroupIds
+  if (subGroupBy && source.subGroupId && destination.subGroupId && source.subGroupId !== destination.subGroupId) {
+    const subGroupKey = ISSUE_FILTER_DEFAULT_DATA[subGroupBy];
+    let subGroupValue: any = clone(sourceIssue[subGroupKey]);
+
+    // If subGroupValue is an array, remove source subGroupId and add destination subGroupId
+    if (Array.isArray(subGroupValue)) {
+      pull(subGroupValue, source.subGroupId);
+      if (destination.subGroupId !== "None") subGroupValue = uniq(concat(subGroupValue, [destination.subGroupId]));
+    } // else just update the subGroupValue based on destination subGroupId
+    else {
+      subGroupValue = destination.subGroupId === "None" ? null : destination.subGroupId;
+    }
+
+    // keep track of updates on what was added and what was removed
+    issueUpdates[subGroupKey] = { ADD: getGroupId(destination.subGroupId), REMOVE: getGroupId(source.subGroupId) };
+    updatedIssue = { ...updatedIssue, [subGroupKey]: subGroupValue };
+  }
+
+  if (updatedIssue && sourceIssue?.project_id) {
+    return await updateIssueOnDrop(sourceIssue?.project_id, sourceIssue.id, updatedIssue, issueUpdates);
+  }
+};
+
+/**
+ * method that removes Null or undefined Keys from object
+ * @param obj
+ * @returns
+ */
+export const removeNillKeys = <T,>(obj: T) =>
+  Object.fromEntries(Object.entries(obj ?? {}).filter(([key, value]) => key && !isNil(value)));
+
+/**
+ * This Method returns if the grouped values are subGrouped
+ * @param groupedIssueIds
+ * @returns
+ */
+export const isSubGrouped = (groupedIssueIds: TGroupedIssues) => {
+  if (!groupedIssueIds || Array.isArray(groupedIssueIds)) {
+    return false;
+  }
+
+  if (Array.isArray(groupedIssueIds[Object.keys(groupedIssueIds)[0]])) {
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * This Method returns if the issue is new or not
+ * @param issue
+ * @returns
+ */
+export const isIssueNew = (issue: TIssue) => {
+  const createdDate = new Date(issue.created_at);
+  const currentDate = new Date();
+  const diff = currentDate.getTime() - createdDate.getTime();
+  return diff < 30000;
+};
+
+/**
+ * Returns approximate height of Kanban card based on display properties
+ * @param displayProperties
+ * @returns
+ */
+export function getApproximateCardHeight(displayProperties: IIssueDisplayProperties | undefined) {
+  if (!displayProperties) return 100;
+
+  // default card height
+  let cardHeight = 46;
+
+  const clonedProperties = clone(displayProperties);
+
+  // key adds the height for key
+  if (clonedProperties.key) {
+    cardHeight += 24;
+  }
+
+  // Ignore smaller dimension properties
+  const ignoredProperties: (keyof IIssueDisplayProperties)[] = [
+    "key",
+    "sub_issue_count",
+    "link",
+    "attachment_count",
+    "created_on",
+    "updated_on",
+  ];
+
+  ignoredProperties.forEach((key: keyof IIssueDisplayProperties) => {
+    delete clonedProperties[key];
+  });
+
+  let propertyCount = 0;
+
+  // count the remaining properties
+  (Object.keys(clonedProperties) as (keyof IIssueDisplayProperties)[]).forEach((key: keyof IIssueDisplayProperties) => {
+    if (clonedProperties[key]) {
+      propertyCount++;
+    }
+  });
+
+  // based on property count, approximate the height of each card
+  if (propertyCount > 3) {
+    cardHeight += 60;
+  } else if (propertyCount > 0) {
+    cardHeight += 32;
+  }
+
+  return cardHeight;
+}
+
+/**
+ * This Method is used to get Block view details, that returns block style and tooltip message
+ * @param block
+ * @param backgroundColor
+ * @returns
+ */
+export const getBlockViewDetails = (
+  block: { start_date: string | undefined | null; target_date: string | undefined | null } | undefined | null,
+  backgroundColor: string
+) => {
+  const isBlockVisibleOnChart = block?.start_date || block?.target_date;
+  const isBlockComplete = block?.start_date && block?.target_date;
+
+  let message;
+  const blockStyle: CSSProperties = {
+    backgroundColor,
+  };
+
+  if (isBlockVisibleOnChart && !isBlockComplete) {
+    if (block?.start_date) {
+      message = `From ${renderFormattedDate(block.start_date)}`;
+      blockStyle.maskImage = `linear-gradient(to right, ${backgroundColor} 50%, transparent 95%)`;
+    } else if (block?.target_date) {
+      message = `Till ${renderFormattedDate(block.target_date)}`;
+      blockStyle.maskImage = `linear-gradient(to left, ${backgroundColor} 50%, transparent 95%)`;
+    }
+  } else if (isBlockComplete) {
+    message = `${renderFormattedDate(block?.start_date)} to ${renderFormattedDate(block?.target_date)}`;
+  }
+
+  return {
+    message,
+    blockStyle,
+  };
+};
+
+/**
+ * This method returns the icon for Spreadsheet column headers
+ * @param iconKey
+ */
+export function SpreadSheetPropertyIcon(props: ISvgIcons & { iconKey: string }) {
+  const { iconKey } = props;
+  const Icon = SpreadSheetPropertyIconMap[iconKey];
+  if (!Icon) return null;
+  return <Icon {...props} />;
+}
+
+/**
+ * This method returns if the filters are applied
+ * @param filters
+ * @returns
+ */
+export const isDisplayFiltersApplied = (filters: Partial<IIssueFilters>): boolean => {
+  const isDisplayPropertiesApplied = Object.keys(DEFAULT_DISPLAY_PROPERTIES).some(
+    (key) => !filters.displayProperties?.[key as keyof IIssueDisplayProperties]
+  );
+
+  const isDisplayFiltersApplied = Object.keys(filters.displayFilters ?? {}).some((key) => {
+    const value = filters.displayFilters?.[key as keyof IIssueDisplayFilterOptions];
+    if (!value) return false;
+    // -create_at is the default order
+    if (key === "order_by") {
+      return value !== "-created_at";
+    }
+    return true;
+  });
+
+  return isDisplayPropertiesApplied || isDisplayFiltersApplied;
+};
+
+/**
+ * This method returns if the filters are applied
+ * @param filters
+ * @returns
+ */
+export const isFiltersApplied = (filters: IIssueFilterOptions): boolean =>
+  Object.values(filters).some((value) => {
+    if (Array.isArray(value)) return value.length > 0;
+    return value !== undefined && value !== null && value !== "";
+  });
+
+/**
+ * Calculates the minimum width needed for issue identifiers in list layouts
+ * @param projectIdentifierLength - Length of the project identifier (e.g., "PROJ" = 4)
+ * @param maxSequenceId - Maximum sequence ID in the project (e.g., 1234)
+ * @returns Width in pixels needed to display the identifier
+ *
+ * @example
+ * // For "PROJ-1234"
+ * calculateIdentifierWidth(4, 1234) // Returns width for "PROJ" + "-" + "1234"
+ */
+export const calculateIdentifierWidth = (projectIdentifierLength: number, maxSequenceId: number): number => {
+  const sequenceDigits = Math.max(1, Math.floor(Math.log10(maxSequenceId)) + 1);
+  return projectIdentifierLength * 7 + 7 + sequenceDigits * 7; // project identifier chars + dash + sequence digits
+};
+
+export type TGetScopeMemberIdsResult = {
+  memberIds: string[];
+  includeNone: boolean;
+};
+
+export const getScopeMemberIds = ({ isWorkspaceLevel, projectId }: TGetColumns): TGetScopeMemberIdsResult => {
+  // store values
+  const { workspaceMemberIds } = store.memberRoot.workspace;
+  const { projectMemberIds } = store.memberRoot.project;
+  // derived values
+  const memberIds = workspaceMemberIds;
+
+  if (isWorkspaceLevel) {
+    return { memberIds: memberIds ?? [], includeNone: true };
+  }
+
+  if (projectId || (projectMemberIds && projectMemberIds.length > 0)) {
+    const { getProjectMemberIds } = store.memberRoot.project;
+    const _projectMemberIds = projectId ? getProjectMemberIds(projectId, false) : projectMemberIds;
+    return {
+      memberIds: _projectMemberIds ?? [],
+      includeNone: true,
+    };
+  }
+
+  return { memberIds: [], includeNone: true };
+};
+
+export const getTeamProjectColumns = (): IGroupByColumn[] | undefined => undefined;
+
+export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
+  MembersOutline: MembersOutline,
+  CalenderDays: CalendarOutline,
+  DueDateOutline: DueDateOutline,
+  EstimateOutline: EstimateOutline,
+  LabelsOutline: LabelsOutline,
+  ModuleOutline: ModuleOutline,
+  ContrastIcon: CyclesOutline,
+  PriorityOutline: PriorityOutline,
+  StartDateOutline: StartDateOutline,
+  StateOutline: StateOutline,
+  Link2: LinkOutline,
+  AttachOutline: AttachOutline,
+  WorkItemsOutline: WorkItemsOutline,
+};
+
+export const SPREADSHEET_COLUMNS: { [key in keyof IIssueDisplayProperties]: TSpreadsheetColumn } = {
+  assignee: SpreadsheetAssigneeColumn,
+  created_on: SpreadsheetCreatedOnColumn,
+  due_date: SpreadsheetDueDateColumn,
+  estimate: SpreadsheetEstimateColumn,
+  labels: SpreadsheetLabelColumn,
+  modules: SpreadsheetModuleColumn,
+  cycle: SpreadsheetCycleColumn,
+  link: SpreadsheetLinkColumn,
+  priority: SpreadsheetPriorityColumn,
+  start_date: SpreadsheetStartDateColumn,
+  state: SpreadsheetStateColumn,
+  sub_issue_count: SpreadsheetSubIssueColumn,
+  updated_on: SpreadsheetUpdatedOnColumn,
+  attachment_count: SpreadsheetAttachmentColumn,
+};
+
+export const useGroupByOptions = (
+  options: TIssueGroupByOptions[]
+): {
+  key: TIssueGroupByOptions;
+  titleTranslationKey: string;
+}[] => {
+  const groupByOptions = ISSUE_GROUP_BY_OPTIONS.filter((option) => options.includes(option.key));
+  return groupByOptions;
+};
diff --git a/apps/web/core/components/issues/issue-modal/base.tsx b/apps/web/core/components/issues/issue-modal/base.tsx
new file mode 100644
index 0000000..80a04f2
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/base.tsx
@@ -0,0 +1,429 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { isEqual, xor } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// Plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TBaseIssue, TIssue } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useIssueModal } from "@/hooks/context/use-issue-modal";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+// services
+import { FileService } from "@/services/file.service";
+const fileService = new FileService();
+// local imports
+import { CreateIssueToastActionItems } from "../create-issue-toast-action-items";
+import { DraftIssueLayout } from "./draft-issue-layout";
+import { IssueFormRoot } from "./form";
+import type { IssueFormProps } from "./form";
+import type { IssuesModalProps } from "./modal";
+
+export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueModalBase(props: IssuesModalProps) {
+  const {
+    data,
+    isOpen,
+    onClose,
+    beforeFormSubmit,
+    onSubmit,
+    withDraftIssueWrapper = true,
+    storeType: issueStoreFromProps,
+    isDraft = false,
+    fetchIssueDetails = true,
+    moveToIssue = false,
+    modalTitle,
+    primaryButtonText,
+    isProjectSelectionDisabled = false,
+    showActionItemsOnUpdate = false,
+  } = props;
+  const issueStoreType = useIssueStoreType();
+
+  let storeType = issueStoreFromProps ?? issueStoreType;
+  // Fallback to project store if epic store is used in issue modal.
+  if (storeType === EIssuesStoreType.EPIC) {
+    storeType = EIssuesStoreType.PROJECT;
+  }
+  // ref
+  const issueTitleRef = useRef<HTMLInputElement>(null);
+  // states
+  const [changesMade, setChangesMade] = useState<Partial<TIssue> | null>(null);
+  const [createMore, setCreateMore] = useState(false);
+  const [activeProjectId, setActiveProjectId] = useState<string | null>(null);
+  const [description, setDescription] = useState<string | undefined>(undefined);
+  const [uploadedAssetIds, setUploadedAssetIds] = useState<string[]>([]);
+  const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
+  // store hooks
+  const { t } = useTranslation();
+  const { workspaceSlug, projectId: routerProjectId, cycleId, moduleId, workItem } = useParams();
+  const { fetchCycleDetails } = useCycle();
+  const { fetchModuleDetails } = useModule();
+  const { issues } = useIssues(storeType);
+  const { issues: projectIssues } = useIssues(EIssuesStoreType.PROJECT);
+  const { issues: draftIssues } = useIssues(EIssuesStoreType.WORKSPACE_DRAFT);
+  const { fetchIssue } = useIssueDetail();
+  const { allowedProjectIds, handleCreateUpdatePropertyValues, handleCreateSubWorkItem } = useIssueModal();
+  const { getProjectByIdentifier } = useProject();
+  // current store details
+  const { createIssue, updateIssue } = useIssuesActions(storeType);
+  // derived values
+  const routerProjectIdentifier = workItem?.toString().split("-")[0];
+  const projectIdFromRouter = getProjectByIdentifier(routerProjectIdentifier)?.id;
+  const projectId = data?.project_id ?? routerProjectId?.toString() ?? projectIdFromRouter;
+
+  const fetchIssueDetail = async (issueId: string | undefined) => {
+    setDescription(undefined);
+    if (!workspaceSlug) return;
+
+    if (!projectId || issueId === undefined || !fetchIssueDetails) {
+      // Set description to the issue description from the props if available
+      setDescription(data?.description_html || "<p></p>");
+      return;
+    }
+    const response = await fetchIssue(workspaceSlug.toString(), projectId.toString(), issueId);
+    if (response) setDescription(response?.description_html || "<p></p>");
+  };
+
+  useEffect(() => {
+    // fetching issue details
+    if (isOpen) fetchIssueDetail(data?.id ?? data?.sourceIssueId);
+
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProjectId being set to some other project
+    if (!isOpen) {
+      setActiveProjectId(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project_id) {
+      setActiveProjectId(data.project_id);
+      return;
+    }
+
+    // if data is not present, set active project to the first project in the allowedProjectIds array
+    if (allowedProjectIds && allowedProjectIds.length > 0 && !activeProjectId)
+      setActiveProjectId(projectId?.toString() ?? allowedProjectIds?.[0]);
+
+    // clearing up the description state when we leave the component
+    return () => setDescription(undefined);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data?.project_id, data?.id, data?.sourceIssueId, projectId, isOpen, activeProjectId]);
+
+  const addIssueToCycle = async (issue: TIssue, cycleId: string) => {
+    if (!workspaceSlug || !issue.project_id) return;
+
+    await issues.addIssueToCycle(workspaceSlug.toString(), issue.project_id, cycleId, [issue.id]);
+    fetchCycleDetails(workspaceSlug.toString(), issue.project_id, cycleId);
+  };
+
+  const addIssueToModule = async (issue: TIssue, moduleIds: string[]) => {
+    if (!workspaceSlug || !issue.project_id) return;
+
+    await Promise.all([
+      issues.changeModulesInIssue(workspaceSlug.toString(), issue.project_id, issue.id, moduleIds, []),
+      ...moduleIds.map(
+        (moduleId) => issue.project_id && fetchModuleDetails(workspaceSlug.toString(), issue.project_id, moduleId)
+      ),
+    ]);
+  };
+
+  const handleCreateMoreToggleChange = (value: boolean) => {
+    setCreateMore(value);
+  };
+
+  const handleClose = (saveAsDraft?: boolean) => {
+    if (changesMade && saveAsDraft && !data) {
+      handleCreateIssue(changesMade, true);
+    }
+
+    setActiveProjectId(null);
+    setChangesMade(null);
+    onClose();
+    handleDuplicateIssueModal(false);
+  };
+
+  const handleCreateIssue = async (
+    payload: Partial<TIssue>,
+    is_draft_issue: boolean = false
+  ): Promise<TIssue | undefined> => {
+    if (!workspaceSlug || !payload.project_id) return;
+
+    try {
+      let response: TIssue | undefined;
+      // if draft issue, use draft issue store to create issue
+      if (is_draft_issue) {
+        response = (await draftIssues.createIssue(workspaceSlug.toString(), payload)) as TIssue;
+      }
+      // if cycle id in payload does not match the cycleId in url
+      // or if the moduleIds in Payload does not match the moduleId in url
+      // use the project issue store to create issues
+      else if (
+        (payload.cycle_id !== cycleId && storeType === EIssuesStoreType.CYCLE) ||
+        (!payload.module_ids?.includes(moduleId?.toString()) && storeType === EIssuesStoreType.MODULE)
+      ) {
+        response = await projectIssues.createIssue(workspaceSlug.toString(), payload.project_id, payload);
+      } // else just use the existing store type's create method
+      else if (createIssue) {
+        response = await createIssue(payload.project_id, payload);
+      }
+
+      // update uploaded assets' status
+      if (uploadedAssetIds.length > 0) {
+        await fileService.updateBulkProjectAssetsUploadStatus(
+          workspaceSlug?.toString() ?? "",
+          response?.project_id ?? "",
+          response?.id ?? "",
+          {
+            asset_ids: uploadedAssetIds,
+          }
+        );
+        setUploadedAssetIds([]);
+      }
+
+      if (!response) throw new Error();
+
+      // check if we should add issue to cycle/module
+      if (!is_draft_issue) {
+        if (
+          payload.cycle_id &&
+          payload.cycle_id !== "" &&
+          (payload.cycle_id !== cycleId || storeType !== EIssuesStoreType.CYCLE)
+        ) {
+          await addIssueToCycle(response, payload.cycle_id);
+        }
+        if (
+          payload.module_ids &&
+          payload.module_ids.length > 0 &&
+          (!payload.module_ids.includes(moduleId?.toString()) || storeType !== EIssuesStoreType.MODULE)
+        ) {
+          await addIssueToModule(response, payload.module_ids);
+        }
+      }
+
+      // add other property values
+      if (response.id && response.project_id) {
+        await handleCreateUpdatePropertyValues({
+          issueId: response.id,
+          issueTypeId: response.type_id,
+          projectId: response.project_id,
+          workspaceSlug: workspaceSlug?.toString(),
+          isDraft: is_draft_issue,
+        });
+
+        // create sub work item
+        await handleCreateSubWorkItem({
+          workspaceSlug: workspaceSlug?.toString(),
+          projectId: response.project_id,
+          parentId: response.id,
+        });
+      }
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("success"),
+        message: `${is_draft_issue ? t("draft_created") : t("issue_created_successfully")} `,
+        actionItems: !is_draft_issue && response?.project_id && (
+          <CreateIssueToastActionItems
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={response?.project_id}
+            issueId={response.id}
+          />
+        ),
+      });
+      if (!createMore) handleClose();
+      if (createMore && issueTitleRef) issueTitleRef?.current?.focus();
+      setDescription("<p></p>");
+      setChangesMade(null);
+      return response;
+    } catch (error: any) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: error?.error ?? t(is_draft_issue ? "draft_creation_failed" : "issue_creation_failed"),
+      });
+      throw error;
+    }
+  };
+
+  const handleCycleChange = async (data: Partial<TIssue> | undefined, payload: Partial<TIssue>) => {
+    if (!workspaceSlug || !data?.project_id || !data?.id) return;
+    // return if user is not trying to change the cycle, i.e
+    // - cycle_id is not present in payload
+    // - cycle_id is the same as the current cycle id
+    if (!("cycle_id" in payload) || isEqual(data?.cycle_id, payload.cycle_id)) return;
+
+    const slug = workspaceSlug.toString();
+
+    // Removing the cycle
+    const currentCycleId = data?.cycle_id;
+    if (currentCycleId && payload.cycle_id === null) {
+      await issues.removeIssueFromCycle(slug, data.project_id, currentCycleId, data.id);
+      fetchCycleDetails(slug, data.project_id, currentCycleId).catch((error) => {
+        console.error(error);
+      });
+    }
+
+    // Adding the cycle
+    const newCycleId = payload.cycle_id;
+    if (newCycleId && newCycleId !== "" && (payload.cycle_id !== cycleId || storeType !== EIssuesStoreType.CYCLE)) {
+      await addIssueToCycle(data as TBaseIssue, newCycleId);
+    }
+  };
+
+  const handleModuleChange = async (data: Partial<TIssue>, payload: Partial<TIssue>) => {
+    if (!workspaceSlug || !data?.project_id || !data?.id) return;
+    // return if user is not trying to change the module, i.e
+    // - module_ids is not present in payload
+    // - module_ids is not an array
+    // - module_ids is the same as the current module ids
+    if (
+      !("module_ids" in payload) ||
+      !Array.isArray(payload.module_ids) ||
+      isEqual(data?.module_ids, payload.module_ids)
+    )
+      return;
+
+    const updatedModuleIds = xor(data.module_ids, payload.module_ids);
+    const modulesToAdd: string[] = [];
+    const modulesToRemove: string[] = [];
+
+    for (const moduleId of updatedModuleIds) {
+      if (data.module_ids?.includes(moduleId)) {
+        modulesToRemove.push(moduleId);
+      } else {
+        modulesToAdd.push(moduleId);
+      }
+    }
+    // update modules if there are modules to add or remove
+    if (modulesToAdd.length > 0 || modulesToRemove.length > 0) {
+      await issues.changeModulesInIssue(
+        workspaceSlug.toString(),
+        data.project_id,
+        data.id,
+        modulesToAdd,
+        modulesToRemove
+      );
+    }
+  };
+
+  const handleUpdateIssue = async (payload: Partial<TIssue>): Promise<TIssue | undefined> => {
+    if (!workspaceSlug || !payload.project_id || !data?.id) return;
+
+    try {
+      if (isDraft) await draftIssues.updateIssue(workspaceSlug.toString(), data.id, payload);
+      else if (updateIssue) await updateIssue(payload.project_id, data.id, payload);
+
+      // Run cycle, module, and property changes sequentially to avoid
+      // optimistic store writes from racing against each other.
+      await handleCycleChange(data, payload);
+      await handleModuleChange(data, payload);
+      await handleCreateUpdatePropertyValues({
+        issueId: data.id,
+        issueTypeId: payload.type_id,
+        projectId: payload.project_id,
+        workspaceSlug: workspaceSlug?.toString(),
+        isDraft: isDraft,
+      });
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("success"),
+        message: t("issue_updated_successfully"),
+        actionItems:
+          showActionItemsOnUpdate && payload.project_id ? (
+            <CreateIssueToastActionItems
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={payload.project_id}
+              issueId={data.id}
+            />
+          ) : undefined,
+      });
+      handleClose();
+    } catch (error: any) {
+      console.error(error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: error?.error ?? t("issue_could_not_be_updated"),
+      });
+    }
+  };
+
+  const handleFormSubmit = async (payload: Partial<TIssue>, is_draft_issue: boolean = false) => {
+    if (!workspaceSlug || !payload.project_id || !storeType) return;
+    // remove sourceIssueId from payload since it is not needed
+    if (data?.sourceIssueId) delete data.sourceIssueId;
+
+    let response: TIssue | undefined = undefined;
+
+    try {
+      if (beforeFormSubmit) await beforeFormSubmit();
+      if (!data?.id) response = await handleCreateIssue(payload, is_draft_issue);
+      else response = await handleUpdateIssue(payload);
+    } finally {
+      if (response != undefined && onSubmit) await onSubmit(response);
+    }
+  };
+
+  const handleFormChange = (formData: Partial<TIssue> | null) => setChangesMade(formData);
+
+  const handleUpdateUploadedAssetIds = (assetId: string) => setUploadedAssetIds((prev) => [...prev, assetId]);
+
+  const handleDuplicateIssueModal = (value: boolean) => setIsDuplicateModalOpen(value);
+
+  // don't open the modal if there are no projects
+  if (!allowedProjectIds || allowedProjectIds.length === 0 || !activeProjectId) return null;
+
+  const commonIssueModalProps: IssueFormProps = {
+    issueTitleRef: issueTitleRef,
+    data: {
+      ...data,
+      description_html: description,
+      cycle_id: data?.cycle_id ? data?.cycle_id : cycleId ? cycleId.toString() : null,
+      module_ids: data?.module_ids ? data?.module_ids : moduleId ? [moduleId.toString()] : null,
+    },
+    onAssetUpload: handleUpdateUploadedAssetIds,
+    onClose: handleClose,
+    onSubmit: (payload) => handleFormSubmit(payload, isDraft),
+    projectId: activeProjectId,
+    isCreateMoreToggleEnabled: createMore,
+    onCreateMoreToggleChange: handleCreateMoreToggleChange,
+    isDraft: isDraft,
+    moveToIssue: moveToIssue,
+    modalTitle: modalTitle,
+    primaryButtonText: primaryButtonText,
+    isDuplicateModalOpen: isDuplicateModalOpen,
+    handleDuplicateIssueModal: handleDuplicateIssueModal,
+    isProjectSelectionDisabled: isProjectSelectionDisabled,
+  };
+
+  return (
+    <ModalCore
+      isOpen={isOpen}
+      position={EModalPosition.TOP}
+      width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
+      className="rounded-lg !bg-transparent shadow-none transition-[width] ease-linear"
+    >
+      {withDraftIssueWrapper ? (
+        <DraftIssueLayout {...commonIssueModalProps} changesMade={changesMade} onChange={handleFormChange} />
+      ) : (
+        <IssueFormRoot {...commonIssueModalProps} />
+      )}
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
new file mode 100644
index 0000000..2119c40
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -0,0 +1,341 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { ETabIndices, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ParentOutline } from "@makeplane/propel/icons";
+// types
+import type { ISearchIssueResponse, TIssue } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
+// components
+import { CycleDropdown } from "@/components/dropdowns/cycle";
+import { DateDropdown } from "@/components/dropdowns/date";
+import { EstimateDropdown } from "@/components/dropdowns/estimate";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { ModuleDropdown } from "@/components/dropdowns/module/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+import { ParentIssuesListModal } from "@/components/issues/parent-issues-list-modal";
+import { IssueLabelSelect } from "@/components/issues/select";
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TIssueDefaultPropertiesProps = {
+  control: Control<TIssue>;
+  id: string | undefined;
+  projectId: string | null;
+  workspaceSlug: string;
+  selectedParentIssue: ISearchIssueResponse | null;
+  startDate: string | null;
+  targetDate: string | null;
+  parentId: string | null;
+  isDraft: boolean;
+  handleFormChange: () => void;
+  setSelectedParentIssue: (issue: ISearchIssueResponse) => void;
+};
+
+export const IssueDefaultProperties = observer(function IssueDefaultProperties(props: TIssueDefaultPropertiesProps) {
+  const {
+    control,
+    id,
+    projectId,
+    workspaceSlug,
+    selectedParentIssue,
+    startDate,
+    targetDate,
+    parentId,
+    isDraft,
+    handleFormChange,
+    setSelectedParentIssue,
+  } = props;
+  // states
+  const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
+  // store hooks
+  const { t } = useTranslation();
+  const { areEstimateEnabledByProjectId } = useProjectEstimates();
+  const { getProjectById } = useProject();
+  const { isMobile } = usePlatformOS();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const projectDetails = getProjectById(projectId);
+
+  const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
+
+  const canCreateLabel =
+    projectId && allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId);
+
+  const minDate = getDate(startDate);
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = getDate(targetDate);
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Controller
+        control={control}
+        name="state_id"
+        render={({ field: { value, onChange } }) => (
+          <div className="h-7">
+            <StateDropdown
+              value={value}
+              onChange={(stateId) => {
+                onChange(stateId);
+                handleFormChange();
+              }}
+              projectId={projectId ?? undefined}
+              buttonVariant="border-with-text"
+              tabIndex={getIndex("state_id")}
+              isForWorkItemCreation={!id}
+            />
+          </div>
+        )}
+      />
+      <Controller
+        control={control}
+        name="priority"
+        render={({ field: { value, onChange } }) => (
+          <div className="h-7">
+            <PriorityDropdown
+              value={value}
+              onChange={(priority) => {
+                onChange(priority);
+                handleFormChange();
+              }}
+              buttonVariant="border-with-text"
+              tabIndex={getIndex("priority")}
+            />
+          </div>
+        )}
+      />
+      <Controller
+        control={control}
+        name="assignee_ids"
+        render={({ field: { value, onChange } }) => (
+          <div className="h-7">
+            <MemberDropdown
+              projectId={projectId ?? undefined}
+              value={value}
+              onChange={(assigneeIds) => {
+                onChange(assigneeIds);
+                handleFormChange();
+              }}
+              buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
+              buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
+              placeholder={t("assignees")}
+              multiple
+              tabIndex={getIndex("assignee_ids")}
+            />
+          </div>
+        )}
+      />
+      <Controller
+        control={control}
+        name="label_ids"
+        render={({ field: { value, onChange } }) => (
+          <div className="h-7">
+            <IssueLabelSelect
+              value={value}
+              onChange={(labelIds) => {
+                onChange(labelIds);
+                handleFormChange();
+              }}
+              projectId={projectId ?? undefined}
+              tabIndex={getIndex("label_ids")}
+              createLabelEnabled={!!canCreateLabel}
+            />
+          </div>
+        )}
+      />
+      <Controller
+        control={control}
+        name="start_date"
+        render={({ field: { value, onChange } }) => (
+          <div className="h-7">
+            <DateDropdown
+              value={value}
+              onChange={(date) => {
+                onChange(date ? renderFormattedPayloadDate(date) : null);
+                handleFormChange();
+              }}
+              buttonVariant="border-with-text"
+              maxDate={maxDate ?? undefined}
+              placeholder={t("start_date")}
+              tabIndex={getIndex("start_date")}
+            />
+          </div>
+        )}
+      />
+      <Controller
+        control={control}
+        name="target_date"
+        render={({ field: { value, onChange } }) => (
+          <div className="h-7">
+            <DateDropdown
+              value={value}
+              onChange={(date) => {
+                onChange(date ? renderFormattedPayloadDate(date) : null);
+                handleFormChange();
+              }}
+              buttonVariant="border-with-text"
+              minDate={minDate ?? undefined}
+              placeholder={t("due_date")}
+              tabIndex={getIndex("target_date")}
+            />
+          </div>
+        )}
+      />
+      {projectDetails?.cycle_view && (
+        <Controller
+          control={control}
+          name="cycle_id"
+          render={({ field: { value, onChange } }) => (
+            <div className="h-7">
+              <CycleDropdown
+                projectId={projectId ?? undefined}
+                onChange={(cycleId) => {
+                  onChange(cycleId);
+                  handleFormChange();
+                }}
+                placeholder={t("cycle.label", { count: 1 })}
+                value={value}
+                buttonVariant="border-with-text"
+                tabIndex={getIndex("cycle_id")}
+              />
+            </div>
+          )}
+        />
+      )}
+      {projectDetails?.module_view && workspaceSlug && (
+        <Controller
+          control={control}
+          name="module_ids"
+          render={({ field: { value, onChange } }) => (
+            <div className="h-7">
+              <ModuleDropdown
+                projectId={projectId ?? undefined}
+                value={value ?? []}
+                onChange={(moduleIds) => {
+                  onChange(moduleIds);
+                  handleFormChange();
+                }}
+                placeholder={t("modules")}
+                buttonVariant="border-with-text"
+                tabIndex={getIndex("module_ids")}
+                multiple
+                showCount
+              />
+            </div>
+          )}
+        />
+      )}
+      {projectId && areEstimateEnabledByProjectId(projectId) && (
+        <Controller
+          control={control}
+          name="estimate_point"
+          render={({ field: { value, onChange } }) => (
+            <div className="h-7">
+              <EstimateDropdown
+                value={value || undefined}
+                onChange={(estimatePoint) => {
+                  onChange(estimatePoint);
+                  handleFormChange();
+                }}
+                projectId={projectId}
+                buttonVariant="border-with-text"
+                tabIndex={getIndex("estimate_point")}
+                placeholder={t("estimate")}
+              />
+            </div>
+          )}
+        />
+      )}
+      <div className="h-7">
+        {parentId ? (
+          <CustomMenu
+            customButton={
+              <button
+                type="button"
+                className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
+              >
+                {selectedParentIssue?.project_id && (
+                  <IssueIdentifier
+                    projectId={selectedParentIssue.project_id}
+                    issueTypeId={selectedParentIssue.type_id}
+                    projectIdentifier={selectedParentIssue?.project__identifier}
+                    issueSequenceId={selectedParentIssue.sequence_id}
+                    size="xs"
+                  />
+                )}
+              </button>
+            }
+            placement="bottom-start"
+            className="h-full w-full"
+            customButtonClassName="h-full"
+            tabIndex={getIndex("parent_id")}
+          >
+            <>
+              <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
+                {t("change_parent_issue")}
+              </CustomMenu.MenuItem>
+              <Controller
+                control={control}
+                name="parent_id"
+                render={({ field: { onChange } }) => (
+                  <CustomMenu.MenuItem
+                    className="!p-1"
+                    onClick={() => {
+                      onChange(null);
+                      handleFormChange();
+                    }}
+                  >
+                    {t("remove_parent_issue")}
+                  </CustomMenu.MenuItem>
+                )}
+              />
+            </>
+          </CustomMenu>
+        ) : (
+          <button
+            type="button"
+            className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
+            onClick={() => setParentIssueListModalOpen(true)}
+          >
+            <ParentOutline className="h-3 w-3 flex-shrink-0" />
+            <span className="whitespace-nowrap">{t("add_parent")}</span>
+          </button>
+        )}
+      </div>
+      <Controller
+        control={control}
+        name="parent_id"
+        render={({ field: { onChange } }) => (
+          <ParentIssuesListModal
+            isOpen={parentIssueListModalOpen}
+            handleClose={() => setParentIssueListModalOpen(false)}
+            onChange={(issue) => {
+              onChange(issue.id);
+              handleFormChange();
+              setSelectedParentIssue(issue);
+            }}
+            projectId={projectId ?? undefined}
+            issueId={isDraft ? undefined : id}
+          />
+        )}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-modal/components/description-editor.tsx b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
new file mode 100644
index 0000000..36098a1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/components/description-editor.tsx
@@ -0,0 +1,299 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { AiStar1Outline } from "@makeplane/propel/icons";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import type { EditorRefApi } from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue } from "@plane/types";
+import { EFileAssetType } from "@plane/types";
+import { Loader } from "@plane/ui";
+import { getDescriptionPlaceholderI18n, getTabIndex } from "@plane/utils";
+// components
+import { GptAssistantPopover } from "@/components/core/modals/gpt-assistant-popover";
+import { RichTextEditor } from "@/components/editor/rich-text";
+// helpers
+// hooks
+import { useEditorAsset } from "@/hooks/store/use-editor-asset";
+import { useInstance } from "@/hooks/store/use-instance";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import useKeypress from "@/hooks/use-keypress";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web services
+import { WorkspaceService } from "@/services/workspace.service";
+// services
+import { AIService } from "@/services/ai.service";
+const workspaceService = new WorkspaceService();
+const aiService = new AIService();
+
+type TIssueDescriptionEditorProps = {
+  control: Control<TIssue>;
+  isDraft: boolean;
+  issueName: string;
+  issueId: string | undefined;
+  descriptionHtmlData: string | undefined;
+  editorRef: React.MutableRefObject<EditorRefApi | null>;
+  submitBtnRef: React.MutableRefObject<HTMLButtonElement | null>;
+  gptAssistantModal: boolean;
+  workspaceSlug: string;
+  projectId: string | null;
+  handleFormChange: () => void;
+  handleDescriptionHTMLDataChange: (descriptionHtmlData: string) => void;
+  setGptAssistantModal: React.Dispatch<React.SetStateAction<boolean>>;
+  handleGptAssistantClose: () => void;
+  onAssetUpload: (assetId: string) => void;
+  onClose: () => void;
+};
+
+export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(props: TIssueDescriptionEditorProps) {
+  const {
+    control,
+    isDraft,
+    issueName,
+    issueId,
+    descriptionHtmlData,
+    editorRef,
+    submitBtnRef,
+    gptAssistantModal,
+    workspaceSlug,
+    projectId,
+    handleFormChange,
+    handleDescriptionHTMLDataChange,
+    setGptAssistantModal,
+    handleGptAssistantClose,
+    onAssetUpload,
+    onClose,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
+  // store hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  const workspaceId = getWorkspaceBySlug(workspaceSlug?.toString())?.id ?? "";
+  const { config } = useInstance();
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
+  // platform
+  const { isMobile } = usePlatformOS();
+
+  const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
+
+  useEffect(() => {
+    if (descriptionHtmlData) handleDescriptionHTMLDataChange(descriptionHtmlData);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [descriptionHtmlData]);
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (editorRef.current?.isEditorReadyToDiscard()) {
+      onClose();
+    } else {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Editor is still processing changes. Please wait before proceeding.",
+      });
+      event.preventDefault(); // Prevent default action if editor is not ready to discard
+    }
+  };
+
+  useKeypress("Escape", handleKeyDown);
+
+  // handlers
+  const handleAiAssistance = async (response: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    editorRef.current?.setEditorValueAtCursorPosition(response);
+  };
+
+  const handleAutoGenerateDescription = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIAmFeelingLucky(true);
+
+    aiService
+      .createGptTask(workspaceSlug.toString(), {
+        prompt: issueName,
+        task: "Generate a proper description for this work item.",
+      })
+      .then((res) => {
+        if (res.response === "")
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message:
+              "Work item title isn't informative enough to generate the description. Please try with a different title.",
+          });
+        else handleAiAssistance(res.response_html);
+      })
+      .catch((err) => {
+        const error = err?.data?.error;
+
+        if (err.status === 429)
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
+          });
+        else
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: error || "Some error occurred. Please try again.",
+          });
+      })
+      .finally(() => setIAmFeelingLucky(false));
+  };
+
+  return (
+    <div className="relative rounded-lg border-[0.5px] border-subtle-1 bg-layer-2">
+      {descriptionHtmlData === undefined || !projectId ? (
+        <Loader className="max-h-64 min-h-[120px] space-y-2 overflow-hidden rounded-md border border-subtle p-3 py-2 pt-3">
+          <Loader.Item width="100%" height="26px" />
+          <div className="flex items-center gap-2">
+            <Loader.Item width="26px" height="26px" />
+            <Loader.Item width="400px" height="26px" />
+          </div>
+          <div className="flex items-center gap-2">
+            <Loader.Item width="26px" height="26px" />
+            <Loader.Item width="400px" height="26px" />
+          </div>
+          <Loader.Item width="80%" height="26px" />
+          <div className="flex items-center gap-2">
+            <Loader.Item width="50%" height="26px" />
+          </div>
+          <div className="border-0.5 absolute right-3.5 bottom-2 z-10 flex items-center gap-2">
+            <Loader.Item width="100px" height="26px" />
+            <Loader.Item width="50px" height="26px" />
+          </div>
+        </Loader>
+      ) : (
+        <>
+          <Controller
+            name="description_html"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <RichTextEditor
+                editable
+                id="issue-modal-editor"
+                initialValue={value ?? ""}
+                value={descriptionHtmlData}
+                workspaceSlug={workspaceSlug?.toString()}
+                workspaceId={workspaceId}
+                projectId={projectId}
+                onChange={(_description: object, description_html: string) => {
+                  onChange(description_html);
+                  handleFormChange();
+                }}
+                onEnterKeyPress={() => submitBtnRef?.current?.click()}
+                ref={editorRef}
+                tabIndex={getIndex("description_html")}
+                placeholder={(isFocused, description) => t(getDescriptionPlaceholderI18n(isFocused, description))}
+                searchMentionCallback={async (payload) =>
+                  await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+                    ...payload,
+                    project_id: projectId?.toString() ?? "",
+                  })
+                }
+                containerClassName="pt-3 min-h-[120px]"
+                uploadFile={async (blockId, file) => {
+                  try {
+                    const { asset_id } = await uploadEditorAsset({
+                      blockId,
+                      data: {
+                        entity_identifier: issueId ?? "",
+                        entity_type: isDraft
+                          ? EFileAssetType.DRAFT_ISSUE_DESCRIPTION
+                          : EFileAssetType.ISSUE_DESCRIPTION,
+                      },
+                      file,
+                      projectId,
+                      workspaceSlug,
+                    });
+                    onAssetUpload(asset_id);
+                    return asset_id;
+                  } catch (error) {
+                    console.log("Error in uploading issue asset:", error);
+                    throw new Error("Asset upload failed. Please try again later.");
+                  }
+                }}
+                duplicateFile={async (assetId: string) => {
+                  try {
+                    const { asset_id } = await duplicateEditorAsset({
+                      assetId,
+                      entityId: issueId,
+                      entityType: isDraft ? EFileAssetType.DRAFT_ISSUE_DESCRIPTION : EFileAssetType.ISSUE_DESCRIPTION,
+                      projectId,
+                      workspaceSlug,
+                    });
+                    onAssetUpload(asset_id);
+                    return asset_id;
+                  } catch {
+                    throw new Error("Asset duplication failed. Please try again later.");
+                  }
+                }}
+              />
+            )}
+          />
+          <div className="border-0.5 z-10 flex items-center justify-end gap-2 p-3">
+            {issueName && issueName.trim() !== "" && config?.has_llm_configured && (
+              <button
+                type="button"
+                className={`flex items-center gap-1 rounded-sm bg-surface-2 px-1.5 py-1 text-caption-sm-regular hover:bg-layer-1 ${
+                  iAmFeelingLucky ? "cursor-wait" : ""
+                }`}
+                onClick={handleAutoGenerateDescription}
+                disabled={iAmFeelingLucky}
+                tabIndex={getIndex("feeling_lucky")}
+              >
+                {iAmFeelingLucky ? (
+                  "Generating response"
+                ) : (
+                  <>
+                    <AiStar1Outline className="h-3.5 w-3.5" />I{"'"}m feeling lucky
+                  </>
+                )}
+              </button>
+            )}
+            {config?.has_llm_configured && projectId && (
+              <GptAssistantPopover
+                isOpen={gptAssistantModal}
+                handleClose={() => {
+                  setGptAssistantModal((prevData) => !prevData);
+                  // this is done so that the title do not reset after gpt popover closed
+                  handleGptAssistantClose();
+                }}
+                onResponse={(response) => {
+                  handleAiAssistance(response);
+                }}
+                placement="top-end"
+                button={
+                  <button
+                    type="button"
+                    className="flex items-center gap-1 rounded-sm bg-surface-2 px-1.5 py-1 text-caption-sm-regular hover:bg-layer-1"
+                    onClick={() => setGptAssistantModal((prevData) => !prevData)}
+                    tabIndex={-1}
+                  >
+                    <AiStar1Outline className="h-4 w-4" />
+                    AI
+                  </button>
+                }
+                workspaceId={workspaceId}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+              />
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-modal/components/index.ts b/apps/web/core/components/issues/issue-modal/components/index.ts
new file mode 100644
index 0000000..951a4c1
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/components/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./project-select";
+export * from "./parent-tag";
+export * from "./title-input";
+export * from "./description-editor";
+export * from "./default-properties";
diff --git a/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
new file mode 100644
index 0000000..03836bb
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { ETabIndices } from "@plane/constants";
+import { CloseOutline } from "@makeplane/propel/icons";
+// plane imports
+// types
+import type { ISearchIssueResponse, TIssue } from "@plane/types";
+// helpers
+import { getTabIndex } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+
+type TIssueParentTagProps = {
+  control: Control<TIssue>;
+  selectedParentIssue: ISearchIssueResponse;
+  handleFormChange: () => void;
+  setSelectedParentIssue: (issue: ISearchIssueResponse | null) => void;
+};
+
+export const IssueParentTag = observer(function IssueParentTag(props: TIssueParentTagProps) {
+  const { control, selectedParentIssue, handleFormChange, setSelectedParentIssue } = props;
+  // store hooks
+  const { isMobile } = usePlatformOS();
+
+  const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
+
+  return (
+    <Controller
+      control={control}
+      name="parent_id"
+      render={({ field: { onChange } }) => (
+        <div className="flex w-min items-center gap-2 rounded-sm bg-surface-2 p-2 text-caption-sm-regular whitespace-nowrap">
+          <div className="flex items-center gap-2">
+            <span
+              className="block h-1.5 w-1.5 rounded-full"
+              style={{
+                backgroundColor: selectedParentIssue.state__color,
+              }}
+            />
+            <span className="flex-shrink-0 text-secondary">
+              {selectedParentIssue?.project_id && (
+                <IssueIdentifier
+                  projectId={selectedParentIssue.project_id}
+                  issueTypeId={selectedParentIssue.type_id}
+                  projectIdentifier={selectedParentIssue?.project__identifier}
+                  issueSequenceId={selectedParentIssue.sequence_id}
+                  size="xs"
+                />
+              )}
+            </span>
+            <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                onChange(null);
+                handleFormChange();
+                setSelectedParentIssue(null);
+              }}
+              tabIndex={getIndex("remove_parent")}
+            >
+              <CloseOutline className="h-3 w-3 cursor-pointer" />
+            </button>
+          </div>
+        </div>
+      )}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-modal/components/project-select.tsx b/apps/web/core/components/issues/issue-modal/components/project-select.tsx
new file mode 100644
index 0000000..2c2d605
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/components/project-select.tsx
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+// types
+import type { TIssue } from "@plane/types";
+import { getTabIndex } from "@plane/utils";
+// components
+import { ProjectDropdown } from "@/components/dropdowns/project/dropdown";
+// hooks
+import { useIssueModal } from "@/hooks/context/use-issue-modal";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TIssueProjectSelectProps = {
+  control: Control<TIssue>;
+  disabled?: boolean;
+  handleFormChange: () => void;
+};
+
+export const IssueProjectSelect = observer(function IssueProjectSelect(props: TIssueProjectSelectProps) {
+  const { control, disabled = false, handleFormChange } = props;
+  // store hooks
+  const { isMobile } = usePlatformOS();
+  // context hooks
+  const { allowedProjectIds } = useIssueModal();
+
+  const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
+
+  return (
+    <Controller
+      control={control}
+      name="project_id"
+      rules={{
+        required: true,
+      }}
+      render={({ field: { value, onChange } }) => (
+        <div className="h-7">
+          <ProjectDropdown
+            value={value}
+            onChange={(projectId) => {
+              onChange(projectId);
+              handleFormChange();
+            }}
+            multiple={false}
+            buttonVariant="border-with-text"
+            renderCondition={(projectId) => allowedProjectIds.includes(projectId)}
+            tabIndex={getIndex("project_id")}
+            disabled={disabled}
+          />
+        </div>
+      )}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/issue-modal/components/title-input.tsx b/apps/web/core/components/issues/issue-modal/components/title-input.tsx
new file mode 100644
index 0000000..365e833
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/components/title-input.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import type { Control, FormState } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { ETabIndices } from "@plane/constants";
+// types
+import { useTranslation } from "@plane/i18n";
+import type { TIssue } from "@plane/types";
+// ui
+
+// helpers
+import { getTabIndex } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TIssueTitleInputProps = {
+  control: Control<TIssue>;
+  issueTitleRef: React.MutableRefObject<HTMLInputElement | null>;
+  formState: FormState<TIssue>;
+  handleFormChange: () => void;
+};
+
+export const IssueTitleInput = observer(function IssueTitleInput(props: TIssueTitleInputProps) {
+  const {
+    control,
+    issueTitleRef,
+    formState: { errors },
+    handleFormChange,
+  } = props;
+  // store hooks
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
+
+  const validateWhitespace = (value: string) => {
+    if (value.trim() === "") {
+      return t("title_is_required");
+    }
+    return undefined;
+  };
+  return (
+    <div>
+      <Controller
+        control={control}
+        name="name"
+        rules={{
+          validate: validateWhitespace,
+          required: t("title_is_required"),
+          maxLength: {
+            value: 255,
+            message: t("title_should_be_less_than_255_characters"),
+          },
+        }}
+        render={({ field: { value, onChange, ref } }) => (
+          <Field name="name" invalid={Boolean(errors.name)}>
+            <InputGroup size="2xl">
+              <Input
+                size="2xl"
+                id="name"
+                name="name"
+                type="text"
+                value={value}
+                onChange={(e) => {
+                  onChange(e.target.value);
+                  handleFormChange();
+                }}
+                ref={issueTitleRef || ref}
+                placeholder={t("title")}
+                autoFocus
+                tabIndex={getIndex("name")}
+              />
+            </InputGroup>
+          </Field>
+        )}
+      />
+      <span className="text-caption-sm-medium text-danger-primary">{errors?.name?.message}</span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-modal/context/index.ts b/apps/web/core/components/issues/issue-modal/context/index.ts
new file mode 100644
index 0000000..1681445
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/context/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./issue-modal-context";
diff --git a/apps/web/core/components/issues/issue-modal/context/issue-modal-context.tsx b/apps/web/core/components/issues/issue-modal/context/issue-modal-context.tsx
new file mode 100644
index 0000000..c5f1002
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/context/issue-modal-context.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { createContext } from "react";
+// ce imports
+import type { UseFormReset, UseFormWatch } from "react-hook-form";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import type { ISearchIssueResponse, TIssue, TIssuePropertyValues, TIssuePropertyValueErrors } from "@plane/types";
+
+export type TPropertyValuesValidationProps = {
+  projectId: string | null;
+  workspaceSlug: string;
+  watch: UseFormWatch<TIssue>;
+};
+
+export type TActiveAdditionalPropertiesProps = {
+  projectId: string | null;
+  workspaceSlug: string;
+  watch: UseFormWatch<TIssue>;
+};
+
+export type TCreateUpdatePropertyValuesProps = {
+  issueId: string;
+  projectId: string;
+  workspaceSlug: string;
+  issueTypeId: string | null | undefined;
+  isDraft?: boolean;
+};
+
+export type TCreateSubWorkItemProps = {
+  workspaceSlug: string;
+  projectId: string;
+  parentId: string;
+};
+
+export type THandleTemplateChangeProps = {
+  workspaceSlug: string;
+  reset: UseFormReset<TIssue>;
+  editorRef: React.MutableRefObject<EditorRefApi | null>;
+};
+
+export type THandleProjectEntitiesFetchProps = {
+  workItemProjectId: string | null | undefined;
+  workItemTypeId: string | undefined;
+  workspaceSlug: string;
+};
+
+export type THandleParentWorkItemDetailsProps = {
+  workspaceSlug: string;
+  parentId: string | undefined;
+  parentProjectId: string | undefined;
+  isParentEpic: boolean;
+};
+
+export type TIssueModalContext = {
+  allowedProjectIds: string[];
+  workItemTemplateId: string | null;
+  setWorkItemTemplateId: React.Dispatch<React.SetStateAction<string | null>>;
+  isApplyingTemplate: boolean;
+  setIsApplyingTemplate: React.Dispatch<React.SetStateAction<boolean>>;
+  selectedParentIssue: ISearchIssueResponse | null;
+  setSelectedParentIssue: React.Dispatch<React.SetStateAction<ISearchIssueResponse | null>>;
+  issuePropertyValues: TIssuePropertyValues;
+  setIssuePropertyValues: React.Dispatch<React.SetStateAction<TIssuePropertyValues>>;
+  issuePropertyValueErrors: TIssuePropertyValueErrors;
+  setIssuePropertyValueErrors: React.Dispatch<React.SetStateAction<TIssuePropertyValueErrors>>;
+  getIssueTypeIdOnProjectChange: (projectId: string) => string | null;
+  getActiveAdditionalPropertiesLength: (props: TActiveAdditionalPropertiesProps) => number;
+  handlePropertyValuesValidation: (props: TPropertyValuesValidationProps) => boolean;
+  handleCreateUpdatePropertyValues: (props: TCreateUpdatePropertyValuesProps) => Promise<void>;
+  handleProjectEntitiesFetch: (props: THandleProjectEntitiesFetchProps) => Promise<void>;
+  handleTemplateChange: (props: THandleTemplateChangeProps) => Promise<void>;
+  handleConvert: (workspaceSlug: string, data: Partial<TIssue>) => Promise<void>;
+  handleCreateSubWorkItem: (props: TCreateSubWorkItemProps) => Promise<void>;
+};
+
+export const IssueModalContext = createContext<TIssueModalContext | undefined>(undefined);
diff --git a/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx b/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx
new file mode 100644
index 0000000..af8ba95
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/draft-issue-layout.tsx
@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// Plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue } from "@plane/types";
+import { isEmptyHtmlString } from "@plane/utils";
+// hooks
+import { useIssueModal } from "@/hooks/context/use-issue-modal";
+import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
+// local imports
+import { ConfirmIssueDiscard } from "../confirm-issue-discard";
+import { IssueFormRoot } from "./form";
+import type { IssueFormProps } from "./form";
+
+export interface DraftIssueProps extends IssueFormProps {
+  changesMade: Partial<TIssue> | null;
+  onChange: (formData: Partial<TIssue> | null) => void;
+}
+
+export const DraftIssueLayout = observer(function DraftIssueLayout(props: DraftIssueProps) {
+  const { changesMade, data, onChange, onClose, projectId } = props;
+  // states
+  const [issueDiscardModal, setIssueDiscardModal] = useState(false);
+  // router params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { handleCreateUpdatePropertyValues } = useIssueModal();
+  const { createIssue } = useWorkspaceDraftIssues();
+  const { t } = useTranslation();
+
+  const sanitizeChanges = (): Partial<TIssue> => {
+    const sanitizedChanges = { ...changesMade };
+    Object.entries(sanitizedChanges).forEach(([key, value]) => {
+      const issueKey = key as keyof TIssue;
+      if (value === null || value === undefined || value === "") delete sanitizedChanges[issueKey];
+      if (typeof value === "object" && isEmpty(value)) delete sanitizedChanges[issueKey];
+      if (Array.isArray(value) && value.length === 0) delete sanitizedChanges[issueKey];
+      if (issueKey === "project_id") delete sanitizedChanges.project_id;
+      if (issueKey === "priority" && value && value === "none") delete sanitizedChanges.priority;
+      if (
+        issueKey === "description_html" &&
+        changesMade?.description_html &&
+        isEmptyHtmlString(changesMade.description_html, ["img"])
+      )
+        delete sanitizedChanges.description_html;
+    });
+    return sanitizedChanges;
+  };
+
+  const handleClose = () => {
+    // If the user is updating an existing work item, we don't need to show the discard modal
+    if (data?.id) {
+      onClose();
+      setIssueDiscardModal(false);
+    } else {
+      if (changesMade) {
+        const sanitizedChanges = sanitizeChanges();
+        if (isEmpty(sanitizedChanges)) {
+          onClose();
+          setIssueDiscardModal(false);
+        } else setIssueDiscardModal(true);
+      } else {
+        onClose();
+        setIssueDiscardModal(false);
+      }
+    }
+  };
+
+  const handleCreateDraftIssue = async () => {
+    if (!changesMade || !workspaceSlug || !projectId) return;
+
+    const payload = {
+      ...changesMade,
+      name: changesMade?.name && changesMade?.name?.trim() !== "" ? changesMade.name?.trim() : "Untitled",
+      project_id: projectId,
+    };
+
+    const response = await createIssue(workspaceSlug.toString(), payload)
+      .then((res) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: `${t("success")}!`,
+          message: t("workspace_draft_issues.toasts.created.success"),
+        });
+        onChange(null);
+        setIssueDiscardModal(false);
+        onClose();
+        return res;
+      })
+      .catch((_error) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: `${t("error")}!`,
+          message: t("workspace_draft_issues.toasts.created.error"),
+        });
+      });
+
+    if (response && handleCreateUpdatePropertyValues) {
+      handleCreateUpdatePropertyValues({
+        issueId: response.id,
+        issueTypeId: response.type_id,
+        projectId,
+        workspaceSlug: workspaceSlug?.toString(),
+        isDraft: true,
+      });
+    }
+  };
+
+  const handleDraftAndClose = () => {
+    const sanitizedChanges = sanitizeChanges();
+    if (!data?.id && !isEmpty(sanitizedChanges)) {
+      handleCreateDraftIssue();
+    }
+    onClose();
+  };
+
+  return (
+    <>
+      <ConfirmIssueDiscard
+        isOpen={issueDiscardModal}
+        handleClose={() => setIssueDiscardModal(false)}
+        onConfirm={handleCreateDraftIssue}
+        onDiscard={() => {
+          onChange(null);
+          setIssueDiscardModal(false);
+          onClose();
+        }}
+      />
+      <IssueFormRoot {...props} onClose={handleClose} handleDraftAndClose={handleDraftAndClose} />
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
new file mode 100644
index 0000000..a9ea0fa
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -0,0 +1,520 @@
+// oxlint-disable promise/always-return
+// oxlint-disable no-shadow
+// oxlint-disable jsx_a11y/prefer-tag-over-role
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState, useRef, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { FormProvider, useForm } from "react-hook-form";
+// editor
+import { ETabIndices, DEFAULT_WORK_ITEM_FORM_VALUES } from "@plane/constants";
+import type { EditorRefApi } from "@plane/editor";
+// i18n
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TIssue, TWorkspaceDraftIssue } from "@plane/types";
+// hooks
+import { Switch } from "@makeplane/propel/components/switch";
+import {
+  convertWorkItemDataToSearchResponse,
+  getUpdateFormDataForReset,
+  cn,
+  getChangedIssuefields,
+  getTabIndex,
+} from "@plane/utils";
+// components
+import {
+  IssueDefaultProperties,
+  IssueDescriptionEditor,
+  IssueParentTag,
+  IssueProjectSelect,
+  IssueTitleInput,
+} from "@/components/issues/issue-modal/components";
+// helpers
+// hooks
+import { useIssueModal } from "@/hooks/context/use-issue-modal";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { useProjectIssueProperties } from "@/hooks/use-project-issue-properties";
+
+export interface IssueFormProps {
+  data?: Partial<TIssue>;
+  issueTitleRef: React.MutableRefObject<HTMLInputElement | null>;
+  isCreateMoreToggleEnabled: boolean;
+  onAssetUpload: (assetId: string) => void;
+  onCreateMoreToggleChange: (value: boolean) => void;
+  onChange?: (formData: Partial<TIssue> | null) => void;
+  onClose: () => void;
+  onSubmit: (values: Partial<TIssue>, is_draft_issue?: boolean) => Promise<void>;
+  projectId: string;
+  isDraft: boolean;
+  moveToIssue?: boolean;
+  modalTitle?: string;
+  primaryButtonText?: {
+    default: string;
+    loading: string;
+  };
+  isDuplicateModalOpen: boolean;
+  handleDuplicateIssueModal: (isOpen: boolean) => void;
+  handleDraftAndClose?: () => void;
+  isProjectSelectionDisabled?: boolean;
+  showActionButtons?: boolean;
+  dataResetProperties?: any[];
+}
+
+export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormProps) {
+  const { t } = useTranslation();
+  const {
+    data,
+    issueTitleRef,
+    onAssetUpload,
+    onChange,
+    onClose,
+    onSubmit,
+    projectId: defaultProjectId,
+    isCreateMoreToggleEnabled,
+    onCreateMoreToggleChange,
+    isDraft,
+    moveToIssue = false,
+    modalTitle = `${data?.id ? t("update") : isDraft ? t("create_a_draft") : t("create_new_issue")}`,
+    primaryButtonText = {
+      default: `${data?.id ? t("update") : isDraft ? t("save_to_drafts") : t("save")}`,
+      loading: `${data?.id ? t("updating") : t("saving")}`,
+    },
+    isProjectSelectionDisabled = false,
+    showActionButtons = true,
+    dataResetProperties = [],
+  } = props;
+
+  // states
+  const [gptAssistantModal, setGptAssistantModal] = useState(false);
+  const [isMoving, setIsMoving] = useState<boolean>(false);
+
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
+  const formRef = useRef<HTMLFormElement | null>(null);
+  const modalContainerRef = useRef<HTMLDivElement | null>(null);
+
+  // router
+  const { workspaceSlug, projectId: routeProjectId } = useParams();
+
+  // store hooks
+  const { getProjectById } = useProject();
+  const {
+    workItemTemplateId,
+    isApplyingTemplate,
+    selectedParentIssue,
+    setWorkItemTemplateId,
+    setSelectedParentIssue,
+    getIssueTypeIdOnProjectChange,
+    getActiveAdditionalPropertiesLength,
+    handlePropertyValuesValidation,
+    handleCreateUpdatePropertyValues,
+    handleTemplateChange,
+  } = useIssueModal();
+  const { isMobile } = usePlatformOS();
+  const { moveIssue } = useWorkspaceDraftIssues();
+
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { fetchCycles } = useProjectIssueProperties();
+  const { getStateById } = useProjectState();
+
+  // form info
+  const methods = useForm<TIssue>({
+    defaultValues: { ...DEFAULT_WORK_ITEM_FORM_VALUES, project_id: defaultProjectId, ...data },
+    reValidateMode: "onChange",
+  });
+  const {
+    formState,
+    formState: { isDirty, isSubmitting, dirtyFields },
+    handleSubmit,
+    reset,
+    watch,
+    control,
+    getValues,
+    setValue,
+  } = methods;
+
+  const projectId = watch("project_id");
+  const activeAdditionalPropertiesLength = getActiveAdditionalPropertiesLength({
+    projectId: projectId,
+    workspaceSlug: workspaceSlug?.toString(),
+    watch: watch,
+  });
+
+  const isDisabled = isSubmitting || isApplyingTemplate;
+
+  const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
+
+  //reset few fields on projectId change
+  useEffect(() => {
+    if (isDirty) {
+      if (workItemTemplateId) {
+        // reset work item template id
+        setWorkItemTemplateId(null);
+        reset({ ...DEFAULT_WORK_ITEM_FORM_VALUES, project_id: projectId });
+        editorRef.current?.clearEditor();
+      } else {
+        reset(getUpdateFormDataForReset(projectId, getValues()));
+      }
+    }
+    if (projectId && routeProjectId !== projectId) fetchCycles(workspaceSlug?.toString(), projectId);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [projectId]);
+
+  // Reset form when data prop changes
+  useEffect(() => {
+    if (data) {
+      reset({ ...DEFAULT_WORK_ITEM_FORM_VALUES, project_id: projectId, ...data });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...dataResetProperties]);
+
+  // Update the issue type id when the project id changes
+  useEffect(() => {
+    const issueTypeId = watch("type_id");
+
+    // if issue type id is present or project not available, return
+    if (issueTypeId || !projectId) return;
+
+    // get issue type id on project change
+    const issueTypeIdOnProjectChange = getIssueTypeIdOnProjectChange(projectId);
+    if (issueTypeIdOnProjectChange) setValue("type_id", issueTypeIdOnProjectChange, { shouldValidate: true });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, projectId]);
+
+  useEffect(() => {
+    if (workItemTemplateId && editorRef.current) {
+      handleTemplateChange({
+        workspaceSlug: workspaceSlug?.toString(),
+        reset,
+        editorRef,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workItemTemplateId]);
+
+  const handleFormSubmit = async (formData: Partial<TIssue>, is_draft_issue = false) => {
+    // Check if the editor is ready to discard
+    if (!editorRef.current?.isEditorReadyToDiscard()) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("editor_is_not_ready_to_discard_changes"),
+      });
+      return;
+    }
+
+    // check for required properties validation
+    if (
+      !handlePropertyValuesValidation({
+        projectId: projectId,
+        workspaceSlug: workspaceSlug?.toString(),
+        watch: watch,
+      })
+    )
+      return;
+
+    const submitData = !data?.id
+      ? formData
+      : {
+          ...getChangedIssuefields(formData, dirtyFields as { [key: string]: boolean | undefined }),
+          project_id: getValues<"project_id">("project_id"),
+          id: data.id,
+          description_html: formData.description_html ?? "<p></p>",
+          type_id: getValues<"type_id">("type_id"),
+        };
+
+    // this condition helps to move the issues from draft to project issues
+    if (formData.hasOwnProperty("is_draft")) submitData.is_draft = formData.is_draft;
+
+    await onSubmit(submitData, is_draft_issue)
+      .then(() => {
+        setGptAssistantModal(false);
+        if (isCreateMoreToggleEnabled && workItemTemplateId) {
+          handleTemplateChange({
+            workspaceSlug: workspaceSlug?.toString(),
+            reset,
+            editorRef,
+          });
+        } else {
+          reset({
+            ...DEFAULT_WORK_ITEM_FORM_VALUES,
+            ...(isCreateMoreToggleEnabled ? { ...data } : {}),
+            project_id: getValues<"project_id">("project_id"),
+            type_id: getValues<"type_id">("type_id"),
+            description_html: data?.description_html ?? "<p></p>",
+          });
+          editorRef?.current?.clearEditor();
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  const handleMoveToProjects = async () => {
+    if (!data?.id || !data?.project_id || !data) return;
+    setIsMoving(true);
+    try {
+      await handleCreateUpdatePropertyValues({
+        issueId: data.id,
+        issueTypeId: data.type_id,
+        projectId: data.project_id,
+        workspaceSlug: workspaceSlug?.toString(),
+        isDraft: true,
+      });
+
+      await moveIssue(workspaceSlug.toString(), data.id, {
+        ...data,
+        ...getValues(),
+      } as TWorkspaceDraftIssue);
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to move work item to project. Please try again.",
+      });
+    } finally {
+      setIsMoving(false);
+    }
+  };
+
+  const condition =
+    (watch("name") && watch("name") !== "") || (watch("description_html") && watch("description_html") !== "<p></p>");
+
+  const handleFormChange = () => {
+    if (!onChange) return;
+
+    if (isDirty && condition) onChange(watch());
+    else onChange(null);
+  };
+
+  // executing this useEffect when the parent_id coming from the component prop
+  useEffect(() => {
+    const parentId = watch("parent_id") || undefined;
+    if (!parentId) return;
+    if (parentId === selectedParentIssue?.id || selectedParentIssue) return;
+
+    const issue = getIssueById(parentId);
+    if (!issue) return;
+
+    const projectDetails = getProjectById(issue.project_id);
+    if (!projectDetails) return;
+
+    const stateDetails = getStateById(issue.state_id);
+
+    setSelectedParentIssue(
+      convertWorkItemDataToSearchResponse(workspaceSlug?.toString(), issue, projectDetails, stateDetails)
+    );
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+  }, [watch, getIssueById, getProjectById, selectedParentIssue, getStateById]);
+
+  // executing this useEffect when isDirty changes
+  useEffect(() => {
+    if (!onChange) return;
+
+    if (isDirty && condition) onChange(watch());
+    else onChange(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDirty]);
+
+  useEffect(() => {
+    const formElement = formRef?.current;
+    const modalElement = modalContainerRef?.current;
+
+    if (!formElement || !modalElement) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      modalElement.style.maxHeight = `${formElement?.offsetHeight}px`;
+    });
+
+    resizeObserver.observe(formElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [formRef, modalContainerRef]);
+
+  return (
+    <FormProvider {...methods}>
+      <div className="flex gap-2 bg-transparent">
+        <div className="w-full rounded-lg">
+          <form
+            ref={formRef}
+            onSubmit={handleSubmit((data) => handleFormSubmit(data))}
+            className="flex w-full flex-col"
+          >
+            <div className="rounded-t-lg bg-surface-1 p-5">
+              <h3 className="pb-2 text-h4-medium text-secondary">{modalTitle}</h3>
+              <div className="flex items-center justify-between pt-2 pb-4">
+                <div className="flex items-center gap-x-1">
+                  <IssueProjectSelect
+                    control={control}
+                    disabled={!!data?.id || !!data?.sourceIssueId || isProjectSelectionDisabled}
+                    handleFormChange={handleFormChange}
+                  />
+                </div>
+              </div>
+              {watch("parent_id") && selectedParentIssue && (
+                <div className="pb-4">
+                  <IssueParentTag
+                    control={control}
+                    selectedParentIssue={selectedParentIssue}
+                    handleFormChange={handleFormChange}
+                    setSelectedParentIssue={setSelectedParentIssue}
+                  />
+                </div>
+              )}
+              <div className="space-y-1">
+                <IssueTitleInput
+                  control={control}
+                  issueTitleRef={issueTitleRef}
+                  formState={formState}
+                  handleFormChange={handleFormChange}
+                />
+              </div>
+            </div>
+            <div
+              className={cn(
+                "space-y-3 bg-surface-1 pb-4",
+                activeAdditionalPropertiesLength > 4 &&
+                  "vertical-scrollbar scrollbar-sm max-h-[45vh] overflow-hidden overflow-y-auto"
+              )}
+            >
+              <div className="px-5">
+                <IssueDescriptionEditor
+                  control={control}
+                  isDraft={isDraft}
+                  issueName={watch("name")}
+                  issueId={data?.id}
+                  descriptionHtmlData={data?.description_html}
+                  editorRef={editorRef}
+                  submitBtnRef={submitBtnRef}
+                  gptAssistantModal={gptAssistantModal}
+                  workspaceSlug={workspaceSlug?.toString()}
+                  projectId={projectId}
+                  handleFormChange={handleFormChange}
+                  handleDescriptionHTMLDataChange={(description_html) =>
+                    setValue<"description_html">("description_html", description_html)
+                  }
+                  setGptAssistantModal={setGptAssistantModal}
+                  handleGptAssistantClose={() => reset(getValues())}
+                  onAssetUpload={onAssetUpload}
+                  onClose={onClose}
+                />
+              </div>
+            </div>
+            <div
+              className={cn(
+                "rounded-b-lg border-t-[0.5px] border-subtle bg-surface-1 px-4 py-3",
+                activeAdditionalPropertiesLength > 0 && "shadow-raised-100"
+              )}
+            >
+              <div className="pb-3">
+                <IssueDefaultProperties
+                  control={control}
+                  id={data?.id}
+                  projectId={projectId}
+                  workspaceSlug={workspaceSlug?.toString()}
+                  selectedParentIssue={selectedParentIssue}
+                  startDate={watch("start_date")}
+                  targetDate={watch("target_date")}
+                  parentId={watch("parent_id")}
+                  isDraft={isDraft}
+                  handleFormChange={handleFormChange}
+                  setSelectedParentIssue={setSelectedParentIssue}
+                />
+              </div>
+              {showActionButtons && (
+                <div
+                  className="flex items-center justify-end gap-4 border-t-[0.5px] border-subtle pt-6 pb-3"
+                  tabIndex={getIndex("create_more")}
+                >
+                  {!data?.id && (
+                    <div
+                      className="inline-flex cursor-pointer items-center gap-1.5"
+                      onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
+                      }}
+                      role="button"
+                    >
+                      <Switch
+                        size="sm"
+                        checked={isCreateMoreToggleEnabled}
+                        onCheckedChange={() => {}}
+                        aria-label={t("create_more")}
+                      />
+                      <span className="text-caption-sm-regular">{t("create_more")}</span>
+                    </div>
+                  )}
+                  <div className="flex items-center gap-2">
+                    <div tabIndex={getIndex("discard_button")}>
+                      <Button
+                        variant="secondary"
+                        size="lg"
+                        onClick={() => {
+                          if (editorRef.current?.isEditorReadyToDiscard()) {
+                            onClose();
+                          } else {
+                            setToast({
+                              type: TOAST_TYPE.ERROR,
+                              title: "Error!",
+                              message: "Editor is still processing changes. Please wait before proceeding.",
+                            });
+                          }
+                        }}
+                      >
+                        {t("discard")}
+                      </Button>
+                    </div>
+                    <div tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")}>
+                      <Button
+                        variant={moveToIssue ? "secondary" : "primary"}
+                        size="lg"
+                        type="submit"
+                        ref={submitBtnRef}
+                        loading={isSubmitting}
+                        disabled={isDisabled}
+                      >
+                        {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
+                      </Button>
+                    </div>
+
+                    {moveToIssue && (
+                      <Button
+                        variant="primary"
+                        type="button"
+                        loading={isMoving}
+                        onClick={handleMoveToProjects}
+                        disabled={isMoving}
+                        size="lg"
+                      >
+                        {t("add_to_project")}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </form>
+        </div>
+      </div>
+    </FormProvider>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-modal/modal.tsx b/apps/web/core/components/issues/issue-modal/modal.tsx
new file mode 100644
index 0000000..1fb675e
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/modal.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { EIssuesStoreType, TIssue } from "@plane/types";
+// local imports
+import { CreateUpdateIssueModalBase } from "./base";
+import { IssueModalProvider } from "./provider";
+
+export interface IssuesModalProps {
+  data?: Partial<TIssue>;
+  isOpen: boolean;
+  onClose: () => void;
+  beforeFormSubmit?: () => Promise<void>;
+  onSubmit?: (res: TIssue) => Promise<void>;
+  withDraftIssueWrapper?: boolean;
+  storeType?: EIssuesStoreType;
+  isDraft?: boolean;
+  fetchIssueDetails?: boolean;
+  moveToIssue?: boolean;
+  modalTitle?: string;
+  primaryButtonText?: {
+    default: string;
+    loading: string;
+  };
+  isProjectSelectionDisabled?: boolean;
+  templateId?: string;
+  allowedProjectIds?: string[];
+  showActionItemsOnUpdate?: boolean;
+}
+
+export const CreateUpdateIssueModal = observer(function CreateUpdateIssueModal(props: IssuesModalProps) {
+  // router params
+  const { cycleId, moduleId } = useParams();
+  // derived values
+  const dataForPreload = {
+    ...props.data,
+    cycle_id: props.data?.cycle_id ? props.data?.cycle_id : cycleId ? cycleId.toString() : null,
+    module_ids: props.data?.module_ids ? props.data?.module_ids : moduleId ? [moduleId.toString()] : null,
+  };
+
+  if (!props.isOpen) return null;
+  return (
+    <IssueModalProvider
+      templateId={props.templateId}
+      dataForPreload={dataForPreload}
+      allowedProjectIds={props.allowedProjectIds}
+    >
+      <CreateUpdateIssueModalBase {...props} />
+    </IssueModalProvider>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-modal/provider.tsx b/apps/web/core/components/issues/issue-modal/provider.tsx
new file mode 100644
index 0000000..a510823
--- /dev/null
+++ b/apps/web/core/components/issues/issue-modal/provider.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { ISearchIssueResponse, TIssue } from "@plane/types";
+// components
+import { IssueModalContext } from "@/components/issues/issue-modal/context";
+// hooks
+import { useUser } from "@/hooks/store/user/user-user";
+
+export type TIssueModalProviderProps = {
+  templateId?: string;
+  dataForPreload?: Partial<TIssue>;
+  allowedProjectIds?: string[];
+  children: React.ReactNode;
+};
+
+export const IssueModalProvider = observer(function IssueModalProvider(props: TIssueModalProviderProps) {
+  const { children, allowedProjectIds } = props;
+  // states
+  const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
+  // store hooks
+  const { projectsWithCreatePermissions } = useUser();
+  // derived values
+  const projectIdsWithCreatePermissions = Object.keys(projectsWithCreatePermissions ?? {});
+
+  return (
+    <IssueModalContext.Provider
+      // oxlint-disable-next-line react/jsx-no-constructed-context-values
+      value={{
+        allowedProjectIds: allowedProjectIds ?? projectIdsWithCreatePermissions,
+        workItemTemplateId: null,
+        setWorkItemTemplateId: () => {},
+        isApplyingTemplate: false,
+        setIsApplyingTemplate: () => {},
+        selectedParentIssue,
+        setSelectedParentIssue,
+        issuePropertyValues: {},
+        setIssuePropertyValues: () => {},
+        issuePropertyValueErrors: {},
+        setIssuePropertyValueErrors: () => {},
+        getIssueTypeIdOnProjectChange: () => null,
+        getActiveAdditionalPropertiesLength: () => 0,
+        handlePropertyValuesValidation: () => true,
+        handleCreateUpdatePropertyValues: () => Promise.resolve(),
+        handleProjectEntitiesFetch: () => Promise.resolve(),
+        handleTemplateChange: () => Promise.resolve(),
+        handleConvert: () => Promise.resolve(),
+        handleCreateSubWorkItem: () => Promise.resolve(),
+      }}
+    >
+      {children}
+    </IssueModalContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/issues/issue-type-switcher.tsx b/apps/web/core/components/issues/issue-type-switcher.tsx
new file mode 100644
index 0000000..0d9935d
--- /dev/null
+++ b/apps/web/core/components/issues/issue-type-switcher.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// store hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+
+export type TIssueTypeSwitcherProps = {
+  issueId: string;
+  disabled: boolean;
+};
+
+export const IssueTypeSwitcher = observer(function IssueTypeSwitcher(props: TIssueTypeSwitcherProps) {
+  const { issueId } = props;
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  // derived values
+  const issue = getIssueById(issueId);
+
+  if (!issue || !issue.project_id) return <></>;
+
+  return <IssueIdentifier issueId={issueId} projectId={issue.project_id} size="md" enableClickToCopyIdentifier />;
+});
diff --git a/apps/web/core/components/issues/issue-update-status.tsx b/apps/web/core/components/issues/issue-update-status.tsx
new file mode 100644
index 0000000..0d1129f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-update-status.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { RefreshOutline } from "@makeplane/propel/icons";
+// types
+import type { TNameDescriptionLoader } from "@plane/types";
+
+type Props = {
+  isSubmitting: TNameDescriptionLoader;
+};
+
+export const NameDescriptionUpdateStatus = observer(function NameDescriptionUpdateStatus(props: Props) {
+  const { isSubmitting } = props;
+
+  return (
+    <>
+      <div
+        className={`flex items-center gap-x-2 transition-all duration-300 ${
+          isSubmitting === "saved" ? "fade-out" : "fade-in"
+        }`}
+      >
+        {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
+          <RefreshOutline className="size-3.5 animate-spin text-tertiary" />
+        )}
+        <span className="text-13 text-tertiary">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/label.tsx b/apps/web/core/components/issues/label.tsx
new file mode 100644
index 0000000..42bda2e
--- /dev/null
+++ b/apps/web/core/components/issues/label.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// components
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+type Props = {
+  labelDetails: any[];
+  maxRender?: number;
+};
+
+export function ViewIssueLabel({ labelDetails, maxRender = 1 }: Props) {
+  const { isMobile } = usePlatformOS();
+  return (
+    <>
+      {labelDetails?.length > 0 ? (
+        labelDetails.length <= maxRender ? (
+          <>
+            {labelDetails.map((label) => (
+              <div
+                key={label.id}
+                className="shadow-sm flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11"
+              >
+                <Tooltip label={`Label: ${label.name}`} layout="stacked" disabled={isMobile}>
+                  <div className="flex items-center gap-1.5 text-secondary">
+                    <span
+                      className="h-2 w-2 flex-shrink-0 rounded-full"
+                      style={{
+                        backgroundColor: label?.color ?? "#000000",
+                      }}
+                    />
+                    {label.name}
+                  </div>
+                </Tooltip>
+              </div>
+            ))}
+          </>
+        ) : (
+          <div className="shadow-sm flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11">
+            <Tooltip
+              label={`Labels: ${labelDetails.map((l) => l.name).join(", ")}`}
+              layout="stacked"
+              disabled={isMobile}
+            >
+              <div className="flex items-center gap-1.5 text-secondary">
+                <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
+                {`${labelDetails.length} Labels`}
+              </div>
+            </Tooltip>
+          </div>
+        )
+      ) : (
+        ""
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/issues/layout-quick-actions.tsx b/apps/web/core/components/issues/layout-quick-actions.tsx
new file mode 100644
index 0000000..5a32610
--- /dev/null
+++ b/apps/web/core/components/issues/layout-quick-actions.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TContextMenuItem } from "@plane/ui";
+import { CustomMenu } from "@plane/ui";
+import { copyUrlToClipboard, cn } from "@plane/utils";
+import { useLayoutMenuItems } from "@/components/common/quick-actions-helper";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
+import { IconButton } from "@plane/propel/icon-button";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  storeType: "PROJECT" | "EPIC";
+};
+
+export const LayoutQuickActions = observer(function LayoutQuickActions(props: Props) {
+  const { workspaceSlug, projectId, storeType } = props;
+
+  const layoutLink = `${workspaceSlug}/projects/${projectId}/${storeType === "EPIC" ? "epics" : "issues"}`;
+
+  const handleCopyLink = () =>
+    copyUrlToClipboard(layoutLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link copied",
+        message: `${storeType === "EPIC" ? "Epics" : "Work items"} link copied to clipboard.`,
+      });
+    });
+
+  const handleOpenInNewTab = () => window.open(`/${layoutLink}`, "_blank");
+
+  const menuResult = useLayoutMenuItems({
+    workspaceSlug,
+    projectId,
+    storeType,
+    handleCopyLink,
+    handleOpenInNewTab,
+  });
+
+  const MENU_ITEMS: TContextMenuItem[] = Array.isArray(menuResult) ? menuResult : menuResult.items;
+  const additionalModals = Array.isArray(menuResult) ? null : menuResult.modals;
+
+  return (
+    <>
+      {additionalModals}
+      <CustomMenu
+        ellipsis
+        placement="bottom-end"
+        closeOnSelect
+        maxHeight="lg"
+        className="flex size-[26px] flex-shrink-0 items-center justify-center rounded"
+        customButton={<IconButton size="lg" variant="tertiary" icon={MoreHorizontalOutline} />}
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={item.action}
+              className={cn("flex items-center gap-2", {
+                "text-placeholder": item.disabled,
+              })}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className="h-3 w-3" />}
+              <span>{item.title}</span>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/parent-issues-list-modal.tsx b/apps/web/core/components/issues/parent-issues-list-modal.tsx
new file mode 100644
index 0000000..b96be7b
--- /dev/null
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+// icons
+import { RocketOutline, SearchOutline } from "@makeplane/propel/icons";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import type { ISearchIssueResponse } from "@plane/types";
+// ui
+import { Loader, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { generateWorkItemLink, getTabIndex } from "@plane/utils";
+// components
+import { IssueSearchModalEmptyState } from "@/components/core/modals/issue-search-modal-empty-state";
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// hooks
+import useDebounce from "@/hooks/use-debounce";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { ProjectService } from "@/services/project";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  value?: any;
+  onChange: (issue: ISearchIssueResponse) => void;
+  projectId: string | undefined;
+  issueId?: string;
+  searchEpic?: boolean;
+};
+
+// services
+const projectService = new ProjectService();
+
+export function ParentIssuesListModal({
+  isOpen,
+  handleClose: onClose,
+  value,
+  onChange,
+  projectId,
+  issueId,
+  searchEpic = false,
+}: Props) {
+  // i18n
+  const { t } = useTranslation();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const { isMobile } = usePlatformOS();
+  const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
+
+  const { workspaceSlug } = useParams();
+
+  const { baseTabIndex } = getTabIndex(undefined, isMobile);
+
+  const handleClose = () => {
+    onClose();
+    setSearchTerm("");
+  };
+
+  useEffect(() => {
+    if (!isOpen || !workspaceSlug || !projectId) return;
+
+    setIsSearching(true);
+    setIsLoading(true);
+
+    projectService
+      .projectIssuesSearch(workspaceSlug, projectId, {
+        search: debouncedSearchTerm,
+        parent: searchEpic ? undefined : true,
+        issue_id: issueId,
+        workspace_search: false,
+        epic: searchEpic ? true : undefined,
+      })
+      .then((res) => setIssues(res))
+      .finally(() => {
+        setIsSearching(false);
+        setIsLoading(false);
+      });
+  }, [debouncedSearchTerm, isOpen, issueId, projectId, workspaceSlug]);
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <Combobox
+        value={value}
+        onChange={(val) => {
+          onChange(val);
+          handleClose();
+        }}
+      >
+        <div className="relative m-1">
+          <SearchOutline
+            className="text-opacity-40 pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-primary"
+            aria-hidden="true"
+          />
+          <Combobox.Input
+            className="h-12 w-full border-0 bg-transparent pr-4 pl-11 text-primary outline-none placeholder:text-placeholder focus:ring-0 sm:text-13"
+            placeholder={t("common.search.placeholder")}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            displayValue={() => ""}
+            tabIndex={baseTabIndex}
+          />
+        </div>
+        <Combobox.Options
+          as="ul"
+          static
+          className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto"
+        >
+          {searchTerm !== "" && (
+            <h5 className="mx-2 text-13 text-secondary">
+              Search results for{" "}
+              <span className="text-primary">
+                {'"'}
+                {searchTerm}
+                {'"'}
+              </span>{" "}
+              in project:
+            </h5>
+          )}
+
+          {isSearching || isLoading ? (
+            <Loader className="space-y-3 p-3">
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+              <Loader.Item height="40px" />
+            </Loader>
+          ) : (
+            <>
+              {issues.length === 0 ? (
+                <IssueSearchModalEmptyState
+                  debouncedSearchTerm={debouncedSearchTerm}
+                  isSearching={isSearching}
+                  issues={issues}
+                  searchTerm={searchTerm}
+                />
+              ) : (
+                <ul className={`text-13 ${issues.length > 0 ? "p-2" : ""}`}>
+                  {issues.map((issue) => (
+                    <Combobox.Option
+                      as="li"
+                      key={issue.id}
+                      value={issue}
+                      className={({ active, selected }) =>
+                        `group my-0.5 flex w-full cursor-pointer items-center justify-between gap-2 rounded-md px-3 py-2 text-secondary select-none ${
+                          active ? "bg-layer-1 text-primary" : ""
+                        } ${selected ? "text-primary" : ""}`
+                      }
+                    >
+                      <div className="flex flex-grow items-center gap-2 truncate">
+                        <span
+                          className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                          style={{
+                            backgroundColor: issue.state__color,
+                          }}
+                        />
+                        <span className="flex-shrink-0">
+                          <IssueIdentifier
+                            projectId={issue.project_id}
+                            issueTypeId={issue.type_id}
+                            projectIdentifier={issue.project__identifier}
+                            issueSequenceId={issue.sequence_id}
+                            size="xs"
+                            variant="secondary"
+                          />
+                        </span>{" "}
+                        <span className="truncate">{issue.name}</span>
+                      </div>
+                      <a
+                        href={generateWorkItemLink({
+                          workspaceSlug: workspaceSlug.toString(),
+                          projectId: issue?.project_id,
+                          issueId: issue?.id,
+                          projectIdentifier: issue.project__identifier,
+                          sequenceId: issue?.sequence_id,
+                        })}
+                        target="_blank"
+                        className="relative z-1 hidden flex-shrink-0 text-secondary group-hover:block hover:text-primary"
+                        rel="noopener noreferrer"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <RocketOutline className="h-4 w-4" />
+                      </a>
+                    </Combobox.Option>
+                  ))}
+                </ul>
+              )}
+            </>
+          )}
+        </Combobox.Options>
+      </Combobox>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/issues/parent-select-root.tsx b/apps/web/core/components/issues/parent-select-root.tsx
new file mode 100644
index 0000000..d82c770
--- /dev/null
+++ b/apps/web/core/components/issues/parent-select-root.tsx
@@ -0,0 +1,88 @@
+// oxlint-disable no-shadow
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// components
+import type { TIssueOperations } from "@/components/issues/issue-detail";
+import { IssueParentSelect } from "@/components/issues/issue-detail/parent-select";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+type TIssueParentSelect = {
+  className?: string;
+  disabled?: boolean;
+  issueId: string;
+  issueOperations: TIssueOperations;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const IssueParentSelectRoot = observer(function IssueParentSelectRoot(props: TIssueParentSelect) {
+  const { issueId, issueOperations, projectId, workspaceSlug } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const {
+    toggleParentIssueModal,
+    removeSubIssue,
+    subIssues: { setSubIssueHelpers, fetchSubIssues },
+  } = useIssueDetail();
+
+  // derived values
+  const issue = getIssueById(issueId);
+  const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
+
+  const handleParentIssue = async (_issueId: string | null = null) => {
+    try {
+      await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
+      await issueOperations.fetch(workspaceSlug, projectId, issueId, false);
+      if (_issueId) await fetchSubIssues(workspaceSlug, projectId, _issueId);
+      toggleParentIssueModal(null);
+    } catch (_error) {
+      console.error("something went wrong while fetching the issue");
+    }
+  };
+
+  const handleRemoveSubIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueId: string
+  ) => {
+    try {
+      setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+      await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+      await fetchSubIssues(workspaceSlug, projectId, parentIssueId);
+      setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("common.error.label"),
+        message: t("common.something_went_wrong"),
+      });
+    }
+  };
+
+  const workItemLink = `/${workspaceSlug}/projects/${parentIssue?.project_id}/issues/${parentIssue?.id}`;
+
+  if (!issue) return <></>;
+
+  return (
+    <IssueParentSelect
+      {...props}
+      handleParentIssue={handleParentIssue}
+      handleRemoveSubIssue={handleRemoveSubIssue}
+      workItemLink={workItemLink}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/peek-overview/error.tsx b/apps/web/core/components/issues/peek-overview/error.tsx
new file mode 100644
index 0000000..a347215
--- /dev/null
+++ b/apps/web/core/components/issues/peek-overview/error.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowNarrowRightOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// assets
+import emptyIssue from "@/app/assets/empty-state/issue.svg?url";
+// components
+import { EmptyState } from "@/components/common/empty-state";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TIssuePeekOverviewError = {
+  removeRoutePeekId: () => void;
+};
+
+export function IssuePeekOverviewError(props: TIssuePeekOverviewError) {
+  const { removeRoutePeekId } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <div className="relative flex h-full w-full flex-col overflow-hidden">
+      <div className="flex flex-shrink-0 justify-start">
+        <Tooltip label="Close the peek view" disabled={isMobile}>
+          <button onClick={removeRoutePeekId} className="m-5 h-5 w-5">
+            <ArrowNarrowRightOutline className="h-4 w-4 text-tertiary hover:text-secondary" />
+          </button>
+        </Tooltip>
+      </div>
+
+      <div className="h-full w-full">
+        <EmptyState
+          image={emptyIssue ?? undefined}
+          title="Work item does not exist"
+          description="The work item you are looking for does not exist, has been archived, or has been deleted."
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/peek-overview/header.tsx b/apps/web/core/components/issues/peek-overview/header.tsx
new file mode 100644
index 0000000..1ba6f47
--- /dev/null
+++ b/apps/web/core/components/issues/peek-overview/header.tsx
@@ -0,0 +1,236 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import {
+  ArrowNarrowRightOutline,
+  DragDropOutline,
+  FullScreenPeekOutline,
+  LinkOutline,
+  ModalPeekOutline,
+  SidePeekOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TNameDescriptionLoader } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { IssueSubscription } from "../issue-detail/subscription";
+import { WorkItemDetailQuickActions } from "../issue-layouts/quick-action-dropdowns";
+import { NameDescriptionUpdateStatus } from "../issue-update-status";
+import { IconButton } from "@plane/propel/icon-button";
+
+export type TPeekModes = "side-peek" | "modal" | "full-screen";
+
+const PEEK_OPTIONS: { key: TPeekModes; icon: any; i18n_title: string }[] = [
+  {
+    key: "side-peek",
+    icon: SidePeekOutline,
+    i18n_title: "common.side_peek",
+  },
+  {
+    key: "modal",
+    icon: ModalPeekOutline,
+    i18n_title: "common.modal",
+  },
+  {
+    key: "full-screen",
+    icon: FullScreenPeekOutline,
+    i18n_title: "common.full_screen",
+  },
+];
+
+export type PeekOverviewHeaderProps = {
+  peekMode: TPeekModes;
+  setPeekMode: (value: TPeekModes) => void;
+  removeRoutePeekId: () => void;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  isArchived: boolean;
+  disabled: boolean;
+  embedIssue: boolean;
+  toggleDeleteIssueModal: (value: boolean) => void;
+  toggleArchiveIssueModal: (value: boolean) => void;
+  toggleDuplicateIssueModal: (value: boolean) => void;
+  toggleEditIssueModal: (value: boolean) => void;
+  handleRestoreIssue: () => Promise<void>;
+  isSubmitting: TNameDescriptionLoader;
+};
+
+export const IssuePeekOverviewHeader = observer(function IssuePeekOverviewHeader(props: PeekOverviewHeaderProps) {
+  const {
+    peekMode,
+    setPeekMode,
+    workspaceSlug,
+    projectId,
+    issueId,
+    isArchived,
+    disabled,
+    embedIssue = false,
+    removeRoutePeekId,
+    toggleDeleteIssueModal,
+    toggleArchiveIssueModal,
+    toggleDuplicateIssueModal,
+    toggleEditIssueModal,
+    handleRestoreIssue,
+    isSubmitting,
+  } = props;
+  // ref
+  const parentRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    issue: { getIssueById },
+    setPeekIssue,
+    removeIssue,
+    archiveIssue,
+    getIsIssuePeeked,
+  } = useIssueDetail();
+  const { isMobile } = usePlatformOS();
+  const { getProjectIdentifierById } = useProject();
+  // derived values
+  const issueDetails = getIssueById(issueId);
+  const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
+  const projectIdentifier = getProjectIdentifierById(issueDetails?.project_id);
+  const {
+    issues: { removeIssue: removeArchivedIssue },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issueDetails?.project_id,
+    issueId,
+    projectIdentifier,
+    sequenceId: issueDetails?.sequence_id,
+    isArchived,
+  });
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(workItemLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("common.link_copied"),
+        message: t("common.link_copied_to_clipboard"),
+      });
+    });
+  };
+
+  const handleDeleteIssue = async () => {
+    try {
+      const deleteIssue = issueDetails?.archived_at ? removeArchivedIssue : removeIssue;
+
+      return deleteIssue(workspaceSlug, projectId, issueId).then(() => {
+        setPeekIssue(undefined);
+      });
+    } catch (_error) {
+      setToast({
+        title: t("toast.error"),
+        type: TOAST_TYPE.ERROR,
+        message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
+      });
+    }
+  };
+
+  const handleArchiveIssue = async () => {
+    await archiveIssue(workspaceSlug, projectId, issueId);
+    // check and remove if issue is peeked
+    if (getIsIssuePeeked(issueId)) {
+      removeRoutePeekId();
+    }
+  };
+
+  return (
+    <div
+      className={`relative flex items-center justify-between p-4 ${
+        currentMode?.key === "full-screen" ? "border-b border-subtle" : ""
+      }`}
+    >
+      <div className="flex items-center gap-4">
+        <Tooltip label={t("common.close_peek_view")} disabled={isMobile}>
+          <button onClick={removeRoutePeekId}>
+            <ArrowNarrowRightOutline className="h-4 w-4 text-tertiary hover:text-secondary" />
+          </button>
+        </Tooltip>
+
+        <Tooltip label={t("issue.open_in_full_screen")} disabled={isMobile}>
+          <Link href={workItemLink} onClick={() => removeRoutePeekId()}>
+            <DragDropOutline className="h-4 w-4 text-tertiary hover:text-secondary" />
+          </Link>
+        </Tooltip>
+        {currentMode && embedIssue === false && (
+          <div className="flex flex-shrink-0 items-center gap-2">
+            <CustomSelect
+              value={currentMode}
+              onChange={(val: any) => setPeekMode(val)}
+              customButton={
+                <Tooltip label={t("common.toggle_peek_view_layout")} disabled={isMobile}>
+                  <button type="button" className="">
+                    <currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />
+                  </button>
+                </Tooltip>
+              }
+            >
+              {PEEK_OPTIONS.map((mode) => (
+                <CustomSelect.Option key={mode.key} value={mode.key}>
+                  <div
+                    className={`flex items-center gap-1.5 ${
+                      currentMode.key === mode.key ? "text-secondary" : "text-placeholder hover:text-secondary"
+                    }`}
+                  >
+                    <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
+                    {t(mode.i18n_title)}
+                  </div>
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          </div>
+        )}
+      </div>
+      <div className="flex items-center gap-x-4">
+        <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
+        <div className="flex items-center gap-2">
+          {currentUser && !isArchived && (
+            <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
+          )}
+          <Tooltip label={t("common.actions.copy_link")} disabled={isMobile}>
+            <IconButton variant="secondary" size="lg" onClick={handleCopyText} icon={LinkOutline} />
+          </Tooltip>
+          {issueDetails && (
+            <WorkItemDetailQuickActions
+              parentRef={parentRef}
+              issue={issueDetails}
+              handleDelete={handleDeleteIssue}
+              handleArchive={handleArchiveIssue}
+              handleRestore={handleRestoreIssue}
+              readOnly={disabled}
+              toggleDeleteIssueModal={toggleDeleteIssueModal}
+              toggleArchiveIssueModal={toggleArchiveIssueModal}
+              toggleDuplicateIssueModal={toggleDuplicateIssueModal}
+              toggleEditIssueModal={toggleEditIssueModal}
+              isPeekMode
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/peek-overview/index.ts b/apps/web/core/components/issues/peek-overview/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/issues/peek-overview/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/issues/peek-overview/issue-detail.tsx b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
new file mode 100644
index 0000000..c2fa313
--- /dev/null
+++ b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
@@ -0,0 +1,171 @@
+// oxlint-disable no-shadow
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import { EFileAssetType } from "@plane/types";
+import type { TNameDescriptionLoader } from "@plane/types";
+// components
+import { DescriptionVersionsRoot } from "@/components/core/description-versions";
+import { DescriptionInput } from "@/components/editor/rich-text/description-input";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
+// plane web components
+import { IssueTypeSwitcher } from "@/components/issues/issue-type-switcher";
+// plane web hooks
+// services
+import { WorkItemVersionService } from "@/services/issue";
+// local components
+import type { TIssueOperations } from "../issue-detail";
+import { IssueParentDetail } from "../issue-detail/parent";
+import { IssueReaction } from "../issue-detail/reactions";
+import { IssueTitleInput } from "../title-input";
+// services init
+const workItemVersionService = new WorkItemVersionService();
+
+type Props = {
+  editorRef: React.RefObject<EditorRefApi | null>;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  issueOperations: TIssueOperations;
+  disabled: boolean;
+  isArchived: boolean;
+  isSubmitting: TNameDescriptionLoader;
+  setIsSubmitting: (value: TNameDescriptionLoader) => void;
+};
+
+export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetails(props: Props) {
+  const { editorRef, workspaceSlug, issueId, issueOperations, disabled, isArchived, isSubmitting, setIsSubmitting } =
+    props;
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+
+  const { getUserDetails } = useMember();
+  // reload confirmation
+  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      timer = setTimeout(() => setIsSubmitting("saved"), 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+    return () => clearTimeout(timer);
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
+
+  // derived values
+  const issue = issueId ? getIssueById(issueId) : undefined;
+
+  if (!issue || !issue.project_id) return <></>;
+
+  const issueDescription =
+    issue.description_html !== undefined || issue.description_html !== null
+      ? issue.description_html != ""
+        ? issue.description_html
+        : "<p></p>"
+      : undefined;
+
+  return (
+    <div className="space-y-2">
+      {issue.parent_id && (
+        <IssueParentDetail
+          workspaceSlug={workspaceSlug}
+          projectId={issue.project_id}
+          issueId={issueId}
+          issue={issue}
+          issueOperations={issueOperations}
+        />
+      )}
+      <div className="flex items-center justify-between gap-2">
+        <IssueTypeSwitcher issueId={issueId} disabled={isArchived || disabled} />
+      </div>
+      <IssueTitleInput
+        workspaceSlug={workspaceSlug}
+        projectId={issue.project_id}
+        issueId={issue.id}
+        isSubmitting={isSubmitting}
+        setIsSubmitting={(value) => setIsSubmitting(value)}
+        issueOperations={issueOperations}
+        disabled={disabled || isArchived}
+        value={issue.name}
+      />
+
+      <DescriptionInput
+        issueSequenceId={issue.sequence_id}
+        containerClassName="-ml-3 border-none"
+        disabled={disabled || isArchived}
+        editorRef={editorRef}
+        entityId={issue.id}
+        fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
+        initialValue={issueDescription}
+        key={issue.id}
+        onSubmit={async (value, isMigrationUpdate) => {
+          if (!issue.id || !issue.project_id) return;
+          await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
+            description_html: value.description_html,
+            ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
+          });
+        }}
+        setIsSubmitting={(value) => setIsSubmitting(value)}
+        projectId={issue.project_id}
+        workspaceSlug={workspaceSlug}
+      />
+
+      <div className="flex items-center justify-between gap-2">
+        {currentUser && (
+          <IssueReaction
+            workspaceSlug={workspaceSlug}
+            projectId={issue.project_id}
+            issueId={issueId}
+            currentUser={currentUser}
+            disabled={isArchived}
+          />
+        )}
+        {!disabled && (
+          <DescriptionVersionsRoot
+            className="flex-shrink-0"
+            entityInformation={{
+              createdAt: issue.created_at ? new Date(issue.created_at) : new Date(),
+              createdByDisplayName: getUserDetails(issue.created_by ?? "")?.display_name ?? "",
+              id: issueId,
+              isRestoreDisabled: disabled || isArchived,
+            }}
+            fetchHandlers={{
+              listDescriptionVersions: (issueId) =>
+                workItemVersionService.listDescriptionVersions(
+                  workspaceSlug,
+                  issue.project_id?.toString() ?? "",
+                  issueId
+                ),
+              retrieveDescriptionVersion: (issueId, versionId) =>
+                workItemVersionService.retrieveDescriptionVersion(
+                  workspaceSlug,
+                  issue.project_id?.toString() ?? "",
+                  issueId,
+                  versionId
+                ),
+            }}
+            handleRestore={(descriptionHTML) => editorRef.current?.setEditorValue(descriptionHTML, true)}
+            projectId={issue.project_id}
+            workspaceSlug={workspaceSlug}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/peek-overview/loader.tsx b/apps/web/core/components/issues/peek-overview/loader.tsx
new file mode 100644
index 0000000..51323d5
--- /dev/null
+++ b/apps/web/core/components/issues/peek-overview/loader.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowNarrowRightOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Loader } from "@plane/ui";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TIssuePeekOverviewLoader = {
+  removeRoutePeekId: () => void;
+};
+
+export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
+  const { removeRoutePeekId } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <Loader className="h-screen w-full space-y-6 overflow-hidden p-5">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2">
+          <Tooltip label="Close the peek view" disabled={isMobile}>
+            <button onClick={removeRoutePeekId}>
+              <ArrowNarrowRightOutline className="h-4 w-4 text-tertiary hover:text-secondary" />
+            </button>
+          </Tooltip>
+          <Loader.Item width="30px" height="30px" />
+        </div>
+        <div className="flex items-center gap-2">
+          <Loader.Item width="80px" height="30px" />
+          <Loader.Item width="30px" height="30px" />
+          <Loader.Item width="30px" height="30px" />
+          <Loader.Item width="30px" height="30px" />
+        </div>
+      </div>
+
+      {/* issue title and description and comments */}
+      <div className="space-y-3">
+        <Loader.Item width="100px" height="20px" />
+
+        <div className="space-y-1">
+          <Loader.Item width="300px" height="15px" />
+          <Loader.Item width="400px" height="15px" />
+          <div className="flex items-center gap-2">
+            <Loader.Item width="20px" height="15px" />
+            <Loader.Item width="500px" height="15px" />
+          </div>
+          <div className="flex items-center gap-2">
+            <Loader.Item width="20px" height="15px" />
+            <Loader.Item width="200px" height="15px" />
+          </div>
+          <Loader.Item width="300px" height="15px" />
+          <Loader.Item width="200px" height="15px" />
+        </div>
+
+        <Loader.Item width="30px" height="30px" />
+      </div>
+
+      {/* sub issues */}
+      <div className="flex items-center justify-between gap-2">
+        <Loader.Item width="80px" height="20px" />
+        <Loader.Item width="100px" height="20px" />
+      </div>
+
+      {/* attachments */}
+      <div className="space-y-3">
+        <Loader.Item width="80px" height="20px" />
+        <div className="flex items-center gap-2">
+          <Loader.Item width="250px" height="50px" />
+          <Loader.Item width="250px" height="50px" />
+        </div>
+      </div>
+
+      {/* properties */}
+      <div className="space-y-3">
+        <Loader.Item width="80px" height="20px" />
+        <div className="space-y-2">
+          <div className="flex items-center gap-8">
+            <Loader.Item width="150px" height="25px" />
+            <Loader.Item width="150px" height="25px" />
+          </div>
+          <div className="flex items-center gap-8">
+            <Loader.Item width="150px" height="25px" />
+            <Loader.Item width="150px" height="25px" />
+          </div>
+          <div className="flex items-center gap-8">
+            <Loader.Item width="150px" height="25px" />
+            <Loader.Item width="150px" height="25px" />
+          </div>
+          <div className="flex items-center gap-8">
+            <Loader.Item width="150px" height="25px" />
+            <Loader.Item width="150px" height="25px" />
+          </div>
+          <div className="flex items-center gap-8">
+            <Loader.Item width="150px" height="25px" />
+            <Loader.Item width="150px" height="25px" />
+          </div>
+          <div className="flex items-center gap-8">
+            <Loader.Item width="150px" height="25px" />
+            <Loader.Item width="150px" height="25px" />
+          </div>
+        </div>
+      </div>
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/issues/peek-overview/peek-overviews.tsx b/apps/web/core/components/issues/peek-overview/peek-overviews.tsx
new file mode 100644
index 0000000..2c869df
--- /dev/null
+++ b/apps/web/core/components/issues/peek-overview/peek-overviews.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { IssuePeekOverview } from "@/components/issues/peek-overview";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+
+export const HomePeekOverviewsRoot = observer(function HomePeekOverviewsRoot() {
+  const { peekIssue } = useIssueDetail();
+
+  return peekIssue ? <IssuePeekOverview /> : null;
+});
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
new file mode 100644
index 0000000..46476ff
--- /dev/null
+++ b/apps/web/core/components/issues/peek-overview/properties.tsx
@@ -0,0 +1,245 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// ui icons
+import {
+  CyclesOutline,
+  DueDateOutline,
+  EstimateOutline,
+  LabelsOutline,
+  MembersOutline,
+  ModuleOutline,
+  ParentOutline,
+  PriorityOutline,
+  StartDateOutline,
+  StateOutline,
+  UserOutline,
+} from "@makeplane/propel/icons";
+import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
+// components
+import { DateDropdown } from "@/components/dropdowns/date";
+import { EstimateDropdown } from "@/components/dropdowns/estimate";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+import { SidebarPropertyListItem } from "@/components/common/layout/sidebar/property-list-item";
+// helpers
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+// plane web components
+import { IssueParentSelectRoot } from "@/components/issues/parent-select-root";
+import type { TIssueOperations } from "../issue-detail";
+import { IssueCycleSelect } from "../issue-detail/cycle-select";
+import { IssueLabel } from "../issue-detail/label";
+import { IssueModuleSelect } from "../issue-detail/module-select";
+
+interface IPeekOverviewProperties {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  disabled: boolean;
+  issueOperations: TIssueOperations;
+}
+
+export const PeekOverviewProperties = observer(function PeekOverviewProperties(props: IPeekOverviewProperties) {
+  const { workspaceSlug, projectId, issueId, issueOperations, disabled } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const { getProjectById } = useProject();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { getStateById } = useProjectState();
+  const { getUserDetails } = useMember();
+  // derived values
+  const issue = getIssueById(issueId);
+  if (!issue) return <></>;
+  const createdByDetails = getUserDetails(issue?.created_by);
+  const projectDetails = getProjectById(issue.project_id);
+  const isEstimateEnabled = projectDetails?.estimate;
+  const stateDetails = getStateById(issue.state_id);
+
+  const minDate = getDate(issue.start_date);
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = getDate(issue.target_date);
+  maxDate?.setDate(maxDate.getDate());
+
+  return (
+    <div>
+      <h6 className="text-body-xs-medium">{t("common.properties")}</h6>
+      <div className={`mt-3 w-full space-y-3 ${disabled ? "opacity-60" : ""}`}>
+        <SidebarPropertyListItem icon={StateOutline} label={t("common.state")}>
+          <StateDropdown
+            value={issue?.state_id}
+            onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
+            projectId={projectId}
+            disabled={disabled}
+            buttonVariant="transparent-with-text"
+            className="group w-full grow"
+            buttonContainerClassName="w-full text-left h-7.5"
+            buttonClassName={`text-body-xs-medium ${issue?.state_id ? "" : "text-placeholder"}`}
+            dropdownArrow
+            dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+          />
+        </SidebarPropertyListItem>
+
+        <SidebarPropertyListItem icon={MembersOutline} label={t("common.assignees")}>
+          <MemberDropdown
+            value={issue?.assignee_ids ?? undefined}
+            onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
+            disabled={disabled}
+            projectId={projectId}
+            placeholder={t("issue.add.assignee")}
+            multiple
+            buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
+            className="group w-full grow"
+            buttonContainerClassName="w-full text-left h-7.5"
+            buttonClassName={`text-body-xs-medium justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
+            hideIcon={issue.assignee_ids?.length === 0}
+            dropdownArrow
+            dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+          />
+        </SidebarPropertyListItem>
+
+        <SidebarPropertyListItem icon={PriorityOutline} label={t("common.priority")}>
+          <PriorityDropdown
+            value={issue?.priority}
+            onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
+            disabled={disabled}
+            buttonVariant="transparent-with-text"
+            className="h-7.5 w-full grow rounded-sm"
+            buttonContainerClassName="w-full text-left h-7.5"
+            buttonClassName={`text-body-xs-medium whitespace-nowrap [&_svg]:size-3.5 ${!issue?.priority || issue?.priority === "none" ? "text-placeholder" : ""}`}
+          />
+        </SidebarPropertyListItem>
+
+        {createdByDetails && (
+          <SidebarPropertyListItem icon={UserOutline} label={t("common.created_by")} childrenClassName="px-2">
+            <ButtonAvatars
+              showTooltip
+              userIds={createdByDetails?.display_name?.includes("-intake") ? null : createdByDetails?.id}
+            />
+            <span className="grow truncate text-body-xs-medium leading-5 text-secondary">
+              {createdByDetails?.display_name?.includes("-intake") ? "Plane" : createdByDetails?.display_name}
+            </span>
+          </SidebarPropertyListItem>
+        )}
+
+        <SidebarPropertyListItem icon={StartDateOutline} label={t("common.order_by.start_date")}>
+          <DateDropdown
+            value={issue.start_date}
+            onChange={(val) =>
+              issueOperations.update(workspaceSlug, projectId, issueId, {
+                start_date: val ? renderFormattedPayloadDate(val) : null,
+              })
+            }
+            placeholder={t("issue.add.start_date")}
+            buttonVariant="transparent-with-text"
+            maxDate={maxDate ?? undefined}
+            disabled={disabled}
+            className="group w-full grow"
+            buttonContainerClassName="w-full text-left h-7.5"
+            buttonClassName={`text-body-xs-medium ${issue?.start_date ? "" : "text-placeholder"}`}
+            hideIcon
+            clearIconClassName="h-3 w-3 hidden group-hover:inline"
+          />
+        </SidebarPropertyListItem>
+
+        <SidebarPropertyListItem icon={DueDateOutline} label={t("common.order_by.due_date")}>
+          <div className="flex w-full items-center gap-2">
+            <DateDropdown
+              value={issue.target_date}
+              onChange={(val) =>
+                issueOperations.update(workspaceSlug, projectId, issueId, {
+                  target_date: val ? renderFormattedPayloadDate(val) : null,
+                })
+              }
+              placeholder={t("issue.add.due_date")}
+              buttonVariant="transparent-with-text"
+              minDate={minDate ?? undefined}
+              disabled={disabled}
+              className="group w-full grow"
+              buttonContainerClassName="w-full text-left h-7.5"
+              buttonClassName={cn("text-body-xs-medium", {
+                "text-placeholder": !issue.target_date,
+                "text-danger-primary": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
+              })}
+              hideIcon
+              clearIconClassName="h-3 w-3 hidden group-hover:inline text-primary"
+            />
+          </div>
+        </SidebarPropertyListItem>
+
+        {isEstimateEnabled && (
+          <SidebarPropertyListItem icon={EstimateOutline} label={t("common.estimate")}>
+            <EstimateDropdown
+              value={issue.estimate_point ?? undefined}
+              onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
+              projectId={projectId}
+              disabled={disabled}
+              buttonVariant="transparent-with-text"
+              className="group w-full grow"
+              buttonContainerClassName="w-full text-left h-7.5"
+              buttonClassName={`text-body-xs-medium ${issue?.estimate_point !== undefined ? "" : "text-placeholder"}`}
+              placeholder="None"
+              hideIcon
+              dropdownArrow
+              dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
+            />
+          </SidebarPropertyListItem>
+        )}
+
+        {projectDetails?.module_view && (
+          <SidebarPropertyListItem icon={ModuleOutline} label={t("common.modules")}>
+            <IssueModuleSelect
+              className="w-full grow"
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={issueId}
+              issueOperations={issueOperations}
+              disabled={disabled}
+            />
+          </SidebarPropertyListItem>
+        )}
+
+        {projectDetails?.cycle_view && (
+          <SidebarPropertyListItem icon={CyclesOutline} label={t("common.cycle")} appendElement={null}>
+            <IssueCycleSelect
+              className="h-7.5 w-full grow"
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              issueId={issueId}
+              issueOperations={issueOperations}
+              disabled={disabled}
+            />
+          </SidebarPropertyListItem>
+        )}
+
+        <SidebarPropertyListItem icon={ParentOutline} label={t("common.parent")}>
+          <IssueParentSelectRoot
+            className="h-7.5 w-full grow"
+            disabled={disabled}
+            issueId={issueId}
+            issueOperations={issueOperations}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+          />
+        </SidebarPropertyListItem>
+
+        <SidebarPropertyListItem icon={LabelsOutline} label={t("common.labels")}>
+          <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
+        </SidebarPropertyListItem>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/peek-overview/root.tsx b/apps/web/core/components/issues/peek-overview/root.tsx
new file mode 100644
index 0000000..b607158
--- /dev/null
+++ b/apps/web/core/components/issues/peek-overview/root.tsx
@@ -0,0 +1,252 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useMemo, useCallback } from "react";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+// Plane imports
+import useSWR from "swr";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import type { IWorkItemPeekOverview, TIssue } from "@plane/types";
+import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { useWorkItemProperties } from "@/hooks/use-issue-properties";
+// local imports
+import type { TIssueOperations } from "../issue-detail";
+import { IssueView } from "./view";
+
+export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWorkItemPeekOverview) {
+  const {
+    embedIssue = false,
+    embedRemoveCurrentNotification,
+    is_draft = false,
+    storeType: issueStoreFromProps,
+  } = props;
+  const { t } = useTranslation();
+  // router
+  const pathname = usePathname();
+  // store hook
+  const { allowPermissions } = useUserPermissions();
+
+  const {
+    issues: { restoreIssue },
+  } = useIssues(EIssuesStoreType.ARCHIVED);
+  const {
+    peekIssue,
+    setPeekIssue,
+    issue: { fetchIssue },
+    fetchActivities,
+  } = useIssueDetail();
+  const issueStoreType = useIssueStoreType();
+  const storeType = issueStoreFromProps ?? issueStoreType;
+  const { issues } = useIssues(storeType);
+
+  useWorkItemProperties(
+    peekIssue?.projectId,
+    peekIssue?.workspaceSlug,
+    peekIssue?.issueId,
+    storeType === EIssuesStoreType.EPIC ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES
+  );
+  // state
+  const [error, setError] = useState(false);
+
+  const removeRoutePeekId = useCallback(() => {
+    setPeekIssue(undefined);
+    if (embedIssue) embedRemoveCurrentNotification?.();
+  }, [embedIssue, embedRemoveCurrentNotification, setPeekIssue]);
+
+  const issueOperations: TIssueOperations = useMemo(
+    () => ({
+      fetch: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          setError(false);
+          await fetchIssue(workspaceSlug, projectId, issueId);
+        } catch (error) {
+          setError(true);
+          console.error("Error fetching the parent issue", error);
+        }
+      },
+      update: async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
+        if (issues?.updateIssue) {
+          await issues
+            .updateIssue(workspaceSlug, projectId, issueId, data)
+            .then(async () => {
+              fetchActivities(workspaceSlug, projectId, issueId);
+              return;
+            })
+            .catch((_error) => {
+              setToast({
+                title: t("toast.error"),
+                type: TOAST_TYPE.ERROR,
+                message: t("entity.update.failed", { entity: t("issue.label", { count: 1 }) }),
+              });
+            });
+        }
+      },
+      remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          return issues?.removeIssue(workspaceSlug, projectId, issueId).then(() => {
+            removeRoutePeekId();
+            return;
+          });
+        } catch (_error) {
+          setToast({
+            title: t("toast.error"),
+            type: TOAST_TYPE.ERROR,
+            message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
+          });
+        }
+      },
+      archive: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          if (!issues?.archiveIssue) return;
+          await issues.archiveIssue(workspaceSlug, projectId, issueId);
+        } catch (error) {
+          console.error("Error archiving the issue", error);
+        }
+      },
+      restore: async (workspaceSlug: string, projectId: string, issueId: string) => {
+        try {
+          await restoreIssue(workspaceSlug, projectId, issueId);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("issue.restore.success.title"),
+            message: t("issue.restore.success.message"),
+          });
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("issue.restore.failed.message"),
+          });
+        }
+      },
+      addCycleToIssue: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
+        try {
+          await issues.addCycleToIssue(workspaceSlug, projectId, cycleId, issueId);
+          fetchActivities(workspaceSlug, projectId, issueId);
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("issue.add.cycle.failed"),
+          });
+        }
+      },
+      addIssueToCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
+        try {
+          await issues.addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("issue.add.cycle.failed"),
+          });
+        }
+      },
+      removeIssueFromCycle: async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
+        try {
+          const removeFromCyclePromise = issues.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+          setPromiseToast(removeFromCyclePromise, {
+            loading: t("issue.remove.cycle.loading"),
+            success: {
+              title: t("toast.success"),
+              message: () => t("issue.remove.cycle.success"),
+            },
+            error: {
+              title: t("toast.error"),
+              message: () => t("issue.remove.cycle.failed"),
+            },
+          });
+          await removeFromCyclePromise;
+          fetchActivities(workspaceSlug, projectId, issueId);
+        } catch (error) {
+          console.error("Error removing issue from cycle", error);
+        }
+      },
+      changeModulesInIssue: async (
+        workspaceSlug: string,
+        projectId: string,
+        issueId: string,
+        addModuleIds: string[],
+        removeModuleIds: string[]
+      ) => {
+        const promise = await issues.changeModulesInIssue(
+          workspaceSlug,
+          projectId,
+          issueId,
+          addModuleIds,
+          removeModuleIds
+        );
+        fetchActivities(workspaceSlug, projectId, issueId);
+        return promise;
+      },
+      removeIssueFromModule: async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
+        try {
+          const removeFromModulePromise = issues.removeIssuesFromModule(workspaceSlug, projectId, moduleId, [issueId]);
+          setPromiseToast(removeFromModulePromise, {
+            loading: t("issue.remove.module.loading"),
+            success: {
+              title: t("toast.success"),
+              message: () => t("issue.remove.module.success"),
+            },
+            error: {
+              title: t("toast.error"),
+              message: () => t("issue.remove.module.failed"),
+            },
+          });
+          await removeFromModulePromise;
+          fetchActivities(workspaceSlug, projectId, issueId);
+        } catch (error) {
+          console.error("Error removing issue from module", error);
+        }
+      },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fetchIssue, is_draft, issues, fetchActivities, pathname, removeRoutePeekId, restoreIssue]
+  );
+
+  const { isLoading } = useSWR(
+    ["peek-issue", peekIssue?.workspaceSlug, peekIssue?.projectId, peekIssue?.issueId],
+    () => peekIssue && issueOperations.fetch(peekIssue.workspaceSlug, peekIssue.projectId, peekIssue.issueId),
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
+  );
+
+  if (!peekIssue?.workspaceSlug || !peekIssue?.projectId || !peekIssue?.issueId) return <></>;
+
+  // Check if issue is editable, based on user role
+  const isEditable = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    peekIssue?.workspaceSlug,
+    peekIssue?.projectId
+  );
+
+  return (
+    <IssueView
+      workspaceSlug={peekIssue.workspaceSlug}
+      projectId={peekIssue.projectId}
+      issueId={peekIssue.issueId}
+      isLoading={isLoading}
+      isError={error}
+      is_archived={!!peekIssue.isArchived}
+      disabled={!isEditable}
+      embedIssue={embedIssue}
+      embedRemoveCurrentNotification={embedRemoveCurrentNotification}
+      issueOperations={issueOperations}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/peek-overview/view.tsx b/apps/web/core/components/issues/peek-overview/view.tsx
new file mode 100644
index 0000000..333e403
--- /dev/null
+++ b/apps/web/core/components/issues/peek-overview/view.tsx
@@ -0,0 +1,273 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { createPortal } from "react-dom";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import type { TNameDescriptionLoader } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import useKeypress from "@/hooks/use-keypress";
+import usePeekOverviewOutsideClickDetector from "@/hooks/use-peek-overview-outside-click";
+// local imports
+import type { TIssueOperations } from "../issue-detail";
+import { IssueActivity } from "../issue-detail/issue-activity";
+import { IssueDetailWidgets } from "../issue-detail-widgets";
+import { IssuePeekOverviewError } from "./error";
+import type { TPeekModes } from "./header";
+import { IssuePeekOverviewHeader } from "./header";
+import { PeekOverviewIssueDetails } from "./issue-detail";
+import { IssuePeekOverviewLoader } from "./loader";
+import { PeekOverviewProperties } from "./properties";
+
+interface IIssueView {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  isLoading?: boolean;
+  isError?: boolean;
+  is_archived: boolean;
+  disabled?: boolean;
+  embedIssue?: boolean;
+  embedRemoveCurrentNotification?: () => void;
+  issueOperations: TIssueOperations;
+}
+
+export const IssueView = observer(function IssueView(props: IIssueView) {
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    isLoading,
+    isError,
+    is_archived,
+    disabled = false,
+    embedIssue = false,
+    embedRemoveCurrentNotification,
+    issueOperations,
+  } = props;
+  // states
+  const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
+  const [isSubmitting, setIsSubmitting] = useState<TNameDescriptionLoader>("saved");
+  const [isDeleteIssueModalOpen, setIsDeleteIssueModalOpen] = useState(false);
+  const [isArchiveIssueModalOpen, setIsArchiveIssueModalOpen] = useState(false);
+  const [isDuplicateIssueModalOpen, setIsDuplicateIssueModalOpen] = useState(false);
+  const [isEditIssueModalOpen, setIsEditIssueModalOpen] = useState(false);
+  // ref
+  const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<EditorRefApi>(null);
+  // store hooks
+  const {
+    setPeekIssue,
+    isAnyModalOpen,
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { isAnyModalOpen: isAnyEpicModalOpen } = useIssueDetail(EIssueServiceType.EPICS);
+  const issue = getIssueById(issueId);
+  // remove peek id
+  const removeRoutePeekId = () => {
+    setPeekIssue(undefined);
+    if (embedIssue && embedRemoveCurrentNotification) embedRemoveCurrentNotification();
+  };
+
+  const toggleDeleteIssueModal = (value: boolean) => setIsDeleteIssueModalOpen(value);
+  const toggleArchiveIssueModal = (value: boolean) => setIsArchiveIssueModalOpen(value);
+  const toggleDuplicateIssueModal = (value: boolean) => setIsDuplicateIssueModalOpen(value);
+  const toggleEditIssueModal = (value: boolean) => setIsEditIssueModalOpen(value);
+
+  const isAnyLocalModalOpen =
+    isDeleteIssueModalOpen || isArchiveIssueModalOpen || isDuplicateIssueModalOpen || isEditIssueModalOpen;
+
+  usePeekOverviewOutsideClickDetector(
+    issuePeekOverviewRef,
+    () => {
+      const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
+      if (!embedIssue) {
+        if (!isAnyModalOpen && !isAnyEpicModalOpen && !isAnyLocalModalOpen && !isAnyDropbarOpen) {
+          removeRoutePeekId();
+        }
+      }
+    },
+    issueId,
+    ["main-sidebar"]
+  );
+
+  const handleKeyDown = () => {
+    const editorImageFullScreenModalElement = document.querySelector(".editor-image-full-screen-modal");
+    const dropdownElement = document.activeElement?.tagName === "INPUT";
+    const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
+    if (!isAnyModalOpen && !dropdownElement && !isAnyDropbarOpen && !editorImageFullScreenModalElement) {
+      removeRoutePeekId();
+      const issueElement = document.getElementById(`issue-${issueId}`);
+      if (issueElement) issueElement?.focus();
+    }
+  };
+
+  useKeypress("Escape", () => !embedIssue && handleKeyDown());
+
+  const handleRestore = async () => {
+    if (!issueOperations.restore) return;
+    await issueOperations.restore(workspaceSlug, projectId, issueId);
+    removeRoutePeekId();
+  };
+
+  const peekOverviewIssueClassName = cn(
+    !embedIssue
+      ? "absolute z-[25] flex flex-col overflow-hidden rounded-sm border border-subtle bg-surface-1 transition-all duration-300"
+      : `h-full w-full`,
+    !embedIssue && {
+      "top-0 right-0 bottom-0 w-full border-0 border-l md:w-[50%]": peekMode === "side-peek",
+      "top-[8.33%] left-[8.33%] size-5/6": peekMode === "modal",
+      "absolute inset-0 m-4": peekMode === "full-screen",
+    }
+  );
+
+  const shouldUsePortal = !embedIssue;
+
+  const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
+
+  const content = (
+    <div className="w-full text-body-sm-regular">
+      {issueId && (
+        <div
+          ref={issuePeekOverviewRef}
+          className={peekOverviewIssueClassName}
+          style={{
+            boxShadow:
+              "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)",
+          }}
+        >
+          {isError ? (
+            <div className="relative h-screen w-full overflow-hidden">
+              <IssuePeekOverviewError removeRoutePeekId={removeRoutePeekId} />
+            </div>
+          ) : (
+            isLoading && <IssuePeekOverviewLoader removeRoutePeekId={removeRoutePeekId} />
+          )}
+          {!isLoading && !isError && issue && (
+            <>
+              {/* header */}
+              <IssuePeekOverviewHeader
+                peekMode={peekMode}
+                setPeekMode={(value) => setPeekMode(value)}
+                removeRoutePeekId={removeRoutePeekId}
+                toggleDeleteIssueModal={toggleDeleteIssueModal}
+                toggleArchiveIssueModal={toggleArchiveIssueModal}
+                toggleDuplicateIssueModal={toggleDuplicateIssueModal}
+                toggleEditIssueModal={toggleEditIssueModal}
+                handleRestoreIssue={handleRestore}
+                isArchived={is_archived}
+                issueId={issueId}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                isSubmitting={isSubmitting}
+                disabled={disabled}
+                embedIssue={embedIssue}
+              />
+              {/* content */}
+              <div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
+                {["side-peek", "modal"].includes(peekMode) ? (
+                  <div className="relative flex flex-col gap-3 space-y-3 px-8 py-5">
+                    <PeekOverviewIssueDetails
+                      editorRef={editorRef}
+                      workspaceSlug={workspaceSlug}
+                      projectId={projectId}
+                      issueId={issueId}
+                      issueOperations={issueOperations}
+                      disabled={disabled}
+                      isArchived={is_archived}
+                      isSubmitting={isSubmitting}
+                      setIsSubmitting={(value) => setIsSubmitting(value)}
+                    />
+
+                    <div className="py-2">
+                      <IssueDetailWidgets
+                        workspaceSlug={workspaceSlug}
+                        projectId={projectId}
+                        issueId={issueId}
+                        disabled={disabled || is_archived}
+                        issueServiceType={EIssueServiceType.ISSUES}
+                      />
+                    </div>
+
+                    <PeekOverviewProperties
+                      workspaceSlug={workspaceSlug}
+                      projectId={projectId}
+                      issueId={issueId}
+                      issueOperations={issueOperations}
+                      disabled={disabled || is_archived}
+                    />
+
+                    <IssueActivity
+                      workspaceSlug={workspaceSlug}
+                      projectId={projectId}
+                      issueId={issueId}
+                      disabled={is_archived}
+                    />
+                  </div>
+                ) : (
+                  <div className="vertical-scrollbar flex h-full w-full overflow-auto">
+                    <div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
+                      <div className="space-y-3">
+                        <PeekOverviewIssueDetails
+                          editorRef={editorRef}
+                          workspaceSlug={workspaceSlug}
+                          projectId={projectId}
+                          issueId={issueId}
+                          issueOperations={issueOperations}
+                          disabled={disabled}
+                          isArchived={is_archived}
+                          isSubmitting={isSubmitting}
+                          setIsSubmitting={(value) => setIsSubmitting(value)}
+                        />
+
+                        <div className="py-2">
+                          <IssueDetailWidgets
+                            workspaceSlug={workspaceSlug}
+                            projectId={projectId}
+                            issueId={issueId}
+                            disabled={disabled}
+                            issueServiceType={EIssueServiceType.ISSUES}
+                          />
+                        </div>
+
+                        <IssueActivity
+                          workspaceSlug={workspaceSlug}
+                          projectId={projectId}
+                          issueId={issueId}
+                          disabled={is_archived}
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className={`vertical-scrollbar scrollbar-sm h-full !w-[400px] flex-shrink-0 overflow-hidden border-l border-subtle p-4 py-5 ${
+                        is_archived ? "pointer-events-none" : ""
+                      }`}
+                    >
+                      <PeekOverviewProperties
+                        workspaceSlug={workspaceSlug}
+                        projectId={projectId}
+                        issueId={issueId}
+                        issueOperations={issueOperations}
+                        disabled={disabled || is_archived}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  return <>{shouldUsePortal && portalContainer ? createPortal(content, portalContainer) : content}</>;
+});
diff --git a/apps/web/core/components/issues/preview-card/date.tsx b/apps/web/core/components/issues/preview-card/date.tsx
new file mode 100644
index 0000000..e0b130f
--- /dev/null
+++ b/apps/web/core/components/issues/preview-card/date.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CalendarOutline, DueDateOutline, StartDateOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TStateGroups } from "@plane/types";
+import { cn, renderFormattedDate, shouldHighlightIssueDueDate } from "@plane/utils";
+
+type Props = {
+  startDate: string | null;
+  stateGroup: TStateGroups;
+  targetDate: string | null;
+};
+
+export function WorkItemPreviewCardDate(props: Props) {
+  const { startDate, stateGroup, targetDate } = props;
+  // derived values
+  const isDateRangeEnabled = Boolean(startDate && targetDate);
+  const shouldHighlightDate = shouldHighlightIssueDueDate(targetDate, stateGroup);
+
+  if (!startDate && !targetDate) return null;
+
+  return (
+    <div className="h-full rounded-sm px-1 text-11 text-secondary">
+      {isDateRangeEnabled ? (
+        <div
+          className={cn("flex h-full items-center gap-1", {
+            "text-danger-primary": shouldHighlightDate,
+          })}
+        >
+          <CalendarOutline className="size-3 shrink-0" />
+          <span>
+            {renderFormattedDate(startDate)} - {renderFormattedDate(targetDate)}
+          </span>
+        </div>
+      ) : startDate ? (
+        <div className="flex h-full items-center gap-1">
+          <StartDateOutline className="size-3 shrink-0" />
+          <span>{renderFormattedDate(startDate)}</span>
+        </div>
+      ) : (
+        <div
+          className={cn("flex h-full items-center gap-1", {
+            "text-danger-primary": shouldHighlightDate,
+          })}
+        >
+          <DueDateOutline className="size-3 shrink-0" />
+          <span>{renderFormattedDate(targetDate)}</span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/preview-card/index.ts b/apps/web/core/components/issues/preview-card/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/issues/preview-card/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/issues/preview-card/root.tsx b/apps/web/core/components/issues/preview-card/root.tsx
new file mode 100644
index 0000000..b3aa466
--- /dev/null
+++ b/apps/web/core/components/issues/preview-card/root.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import type { TIssue, TStateGroups } from "@plane/types";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// local imports
+import { WorkItemPreviewCardDate } from "./date";
+
+type Props = {
+  projectId: string;
+  stateDetails: {
+    group?: TStateGroups;
+    id?: string;
+    name?: string;
+  };
+  workItem: Pick<TIssue, "id" | "name" | "sequence_id" | "priority" | "start_date" | "target_date" | "type_id">;
+};
+
+export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props: Props) {
+  const { projectId, stateDetails, workItem } = props;
+  // store hooks
+  const { getProjectIdentifierById } = useProject();
+  const { getStateById } = useProjectState();
+  // derived values
+  const projectIdentifier = getProjectIdentifierById(projectId);
+  const fallbackStateDetails = stateDetails.id ? getStateById(stateDetails.id) : undefined;
+  const stateGroup = stateDetails?.group ?? fallbackStateDetails?.group ?? "backlog";
+  const stateName = stateDetails?.name ?? fallbackStateDetails?.name;
+
+  return (
+    <div className="w-72 space-y-2 rounded-lg border-[0.5px] border-strong bg-surface-1 p-3 shadow-raised-200">
+      <div className="flex items-center justify-between gap-3 text-secondary">
+        <IssueIdentifier
+          size="xs"
+          variant="secondary"
+          projectId={projectId}
+          projectIdentifier={projectIdentifier}
+          issueSequenceId={workItem.sequence_id}
+          issueTypeId={workItem.type_id}
+        />
+        <div className="flex shrink-0 items-center gap-1">
+          <StateGroupIcon stateGroup={stateGroup} className="size-3 shrink-0" />
+          <p className="text-11 font-medium">{stateName}</p>
+        </div>
+      </div>
+      <div>
+        <h6 className="text-13 wrap-break-word">{workItem.name}</h6>
+      </div>
+      <div className="flex h-5 items-center gap-1">
+        <PriorityIcon priority={workItem.priority} withContainer />
+        <WorkItemPreviewCardDate
+          startDate={workItem.start_date}
+          stateGroup={stateGroup}
+          targetDate={workItem.target_date}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/relations/issue-list-item.tsx b/apps/web/core/components/issues/relations/issue-list-item.tsx
new file mode 100644
index 0000000..58db2db
--- /dev/null
+++ b/apps/web/core/components/issues/relations/issue-list-item.tsx
@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline, DeleteOutline, EditOutline, LinkOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TIssueRelationTypes } from "@plane/types";
+import type { TIssue, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { ControlLink, CustomMenu } from "@plane/ui";
+import { generateWorkItemLink } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// local imports
+import { useRelationOperations } from "../issue-detail-widgets/relations/helper";
+import { RelationIssueProperty } from "./properties";
+
+type Props = {
+  workspaceSlug: string;
+  issueId: string;
+  relationKey: TIssueRelationTypes;
+  relationIssueId: string;
+  disabled: boolean;
+  handleIssueCrudState: (
+    key: "update" | "delete" | "removeRelation",
+    issueId: string,
+    issue?: TIssue | null,
+    relationKey?: TIssueRelationTypes | null,
+    relationIssueId?: string | null
+  ) => void;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const RelationIssueListItem = observer(function RelationIssueListItem(props: Props) {
+  const {
+    workspaceSlug,
+    issueId,
+    relationKey,
+    relationIssueId,
+    disabled = false,
+    handleIssueCrudState,
+    issueServiceType = EIssueServiceType.ISSUES,
+  } = props;
+
+  const { t } = useTranslation();
+
+  // store hooks
+  const {
+    issue: { getIssueById },
+    removeRelation,
+    toggleCreateIssueModal,
+    toggleDeleteIssueModal,
+  } = useIssueDetail(issueServiceType);
+  const project = useProject();
+  const { isMobile } = usePlatformOS();
+  // derived values
+  const issue = getIssueById(relationIssueId);
+  const { handleRedirection } = useIssuePeekOverviewRedirection(!!issue?.is_epic);
+  const issueOperations = useRelationOperations(issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const projectDetail = (issue && issue.project_id && project.getProjectById(issue.project_id)) || undefined;
+  const projectId = issue?.project_id;
+
+  if (!issue || !projectId) return <></>;
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug.toString(),
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier: projectDetail?.identifier,
+    sequenceId: issue?.sequence_id,
+    isEpic: issue?.is_epic,
+  });
+
+  // handlers
+  const handleIssuePeekOverview = (issue: TIssue) => {
+    if (issue.is_epic) {
+      // open epics in new tab
+      window.open(workItemLink, "_blank");
+      return;
+    }
+    handleRedirection(workspaceSlug, issue, isMobile);
+  };
+
+  const handleEditIssue = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    handleIssueCrudState("update", relationIssueId, { ...issue });
+    toggleCreateIssueModal(true);
+  };
+
+  const handleDeleteIssue = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    handleIssueCrudState("delete", relationIssueId, issue);
+    toggleDeleteIssueModal(relationIssueId);
+    handleIssueCrudState("removeRelation", issueId, issue, relationKey, relationIssueId);
+  };
+
+  const handleCopyIssueLink = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    issueOperations.copyLink(workItemLink);
+  };
+
+  const handleRemoveRelation = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
+  };
+
+  return (
+    <div key={relationIssueId}>
+      <ControlLink
+        id={`issue-${issue.id}`}
+        href={workItemLink}
+        onClick={() => handleIssuePeekOverview(issue)}
+        className="w-full cursor-pointer"
+      >
+        {issue && (
+          <div className="group relative flex h-full min-h-11 w-full items-center px-1.5 py-1 transition-all hover:bg-surface-2">
+            <span className="size-5 flex-shrink-0" />
+            <div className="flex min-w-0 flex-1 cursor-pointer items-center gap-3">
+              <div className="flex-shrink-0">
+                {projectDetail && (
+                  <IssueIdentifier
+                    projectId={projectDetail.id}
+                    issueTypeId={issue.type_id}
+                    projectIdentifier={projectDetail.identifier}
+                    issueSequenceId={issue.sequence_id}
+                    size="xs"
+                    variant="secondary"
+                  />
+                )}
+              </div>
+
+              <Tooltip label={issue.name} layout="stacked" disabled={isMobile}>
+                <span className="w-0 flex-1 truncate text-13 text-primary">{issue.name}</span>
+              </Tooltip>
+            </div>
+            <div
+              className="flex-shrink-0 text-13"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              <RelationIssueProperty
+                workspaceSlug={workspaceSlug}
+                issueId={relationIssueId}
+                disabled={disabled}
+                issueOperations={issueOperations}
+                issueServiceType={issueServiceType}
+              />
+            </div>
+            <div className="flex-shrink-0 pl-2 text-13">
+              <CustomMenu placement="bottom-end" ellipsis>
+                {!disabled && (
+                  <CustomMenu.MenuItem onClick={handleEditIssue}>
+                    <div className="flex items-center gap-2">
+                      <EditOutline className="h-3.5 w-3.5" />
+                      <span>{t("common.actions.edit")}</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                )}
+
+                <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
+                  <div className="flex items-center gap-2">
+                    <LinkOutline className="h-3.5 w-3.5" />
+                    <span>{t("common.actions.copy_link")}</span>
+                  </div>
+                </CustomMenu.MenuItem>
+
+                {!disabled && (
+                  <CustomMenu.MenuItem onClick={handleRemoveRelation}>
+                    <div className="flex items-center gap-2">
+                      <CloseOutline className="h-3.5 w-3.5" />
+                      <span>{t("common.actions.remove_relation")}</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                )}
+
+                {!disabled && (
+                  <CustomMenu.MenuItem onClick={handleDeleteIssue}>
+                    <div className="flex items-center gap-2">
+                      <DeleteOutline className="h-3.5 w-3.5" />
+                      <span>{t("common.actions.delete")}</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            </div>
+          </div>
+        )}
+      </ControlLink>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/relations/issue-list.tsx b/apps/web/core/components/issues/relations/issue-list.tsx
new file mode 100644
index 0000000..1da83ae
--- /dev/null
+++ b/apps/web/core/components/issues/relations/issue-list.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { TIssue, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import type { TIssueRelationTypes } from "@plane/types";
+// local imports
+import { RelationIssueListItem } from "./issue-list-item";
+
+type Props = {
+  workspaceSlug: string;
+  issueId: string;
+  issueIds: string[];
+  relationKey: TIssueRelationTypes;
+  handleIssueCrudState: (
+    key: "update" | "delete" | "removeRelation",
+    issueId: string,
+    issue?: TIssue | null,
+    relationKey?: TIssueRelationTypes | null,
+    relationIssueId?: string | null
+  ) => void;
+  disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const RelationIssueList = observer(function RelationIssueList(props: Props) {
+  const {
+    workspaceSlug,
+    issueId,
+    issueIds,
+    relationKey,
+    disabled = false,
+    handleIssueCrudState,
+    issueServiceType = EIssueServiceType.ISSUES,
+  } = props;
+
+  return (
+    <div className="relative">
+      {issueIds &&
+        issueIds.length > 0 &&
+        issueIds.map((relationIssueId) => (
+          <RelationIssueListItem
+            key={relationIssueId}
+            workspaceSlug={workspaceSlug}
+            issueId={issueId}
+            relationKey={relationKey}
+            relationIssueId={relationIssueId}
+            disabled={disabled}
+            handleIssueCrudState={handleIssueCrudState}
+            issueServiceType={issueServiceType}
+          />
+        ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/relations/properties.tsx b/apps/web/core/components/issues/relations/properties.tsx
new file mode 100644
index 0000000..0342d8c
--- /dev/null
+++ b/apps/web/core/components/issues/relations/properties.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// components
+import type { TIssuePriorities, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+// types
+import type { TRelationIssueOperations } from "../issue-detail-widgets/relations/helper";
+
+type Props = {
+  workspaceSlug: string;
+  issueId: string;
+  disabled: boolean;
+  issueOperations: TRelationIssueOperations;
+  issueServiceType?: TIssueServiceType;
+};
+
+export const RelationIssueProperty = observer(function RelationIssueProperty(props: Props) {
+  const { workspaceSlug, issueId, disabled, issueOperations, issueServiceType = EIssueServiceType.ISSUES } = props;
+  // hooks
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail(issueServiceType);
+
+  // derived value
+  const issue = getIssueById(issueId);
+
+  // if issue is not found, return empty
+  if (!issue) return <></>;
+
+  // handlers
+  const handleStateChange = (val: string) =>
+    issue.project_id &&
+    issueOperations.update(workspaceSlug, issue.project_id, issueId, {
+      state_id: val,
+    });
+
+  const handlePriorityChange = (val: TIssuePriorities) =>
+    issue.project_id &&
+    issueOperations.update(workspaceSlug, issue.project_id, issueId, {
+      priority: val,
+    });
+
+  const handleAssigneeChange = (val: string[]) =>
+    issue.project_id &&
+    issueOperations.update(workspaceSlug, issue.project_id, issueId, {
+      assignee_ids: val,
+    });
+
+  return (
+    <div className="relative flex items-center gap-2">
+      <div className="h-5 flex-shrink-0">
+        <StateDropdown
+          value={issue.state_id}
+          projectId={issue.project_id ?? undefined}
+          onChange={handleStateChange}
+          disabled={disabled}
+          buttonVariant="border-with-text"
+        />
+      </div>
+
+      <div className="h-5 flex-shrink-0">
+        <PriorityDropdown
+          value={issue.priority}
+          onChange={handlePriorityChange}
+          disabled={disabled}
+          buttonVariant="border-without-text"
+          buttonClassName="border"
+        />
+      </div>
+
+      <div className="h-5 flex-shrink-0">
+        <MemberDropdown
+          value={issue.assignee_ids}
+          projectId={issue.project_id ?? undefined}
+          onChange={handleAssigneeChange}
+          disabled={disabled}
+          multiple
+          buttonVariant={(issue?.assignee_ids || []).length > 0 ? "transparent-without-text" : "border-without-text"}
+          buttonClassName={(issue?.assignee_ids || []).length > 0 ? "hover:bg-transparent px-0" : ""}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx
new file mode 100644
index 0000000..be202f1
--- /dev/null
+++ b/apps/web/core/components/issues/select/base.tsx
@@ -0,0 +1,322 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { GroupOutline, LabelsOutline, LoadingOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import { Combobox } from "@headlessui/react";
+import { getRandomLabelColor } from "@plane/constants";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import type { IIssueLabel } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { IssueLabelsList } from "@/components/ui/labels-list";
+// hooks
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+export type TWorkItemLabelSelectBaseProps = {
+  buttonClassName?: string;
+  buttonContainerClassName?: string;
+  createLabelEnabled?: boolean;
+  disabled?: boolean;
+  getLabelById: (labelId: string) => IIssueLabel | null;
+  label?: React.ReactNode;
+  labelIds: string[];
+  onChange: (value: string[]) => void;
+  onDropdownOpen?: () => void;
+  placement?: Placement;
+  createLabel?: (data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
+  tabIndex?: number;
+  value: string[];
+};
+
+export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase(props: TWorkItemLabelSelectBaseProps) {
+  const {
+    buttonClassName,
+    buttonContainerClassName,
+    createLabelEnabled = false,
+    disabled = false,
+    getLabelById,
+    label,
+    labelIds,
+    onChange,
+    onDropdownOpen,
+    placement,
+    createLabel,
+    tabIndex,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [submitting, setSubmitting] = useState<boolean>(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { isMobile } = usePlatformOS();
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+  // derived values
+  const labelsList = labelIds.map((labelId) => getLabelById(labelId)).filter((label) => !!label);
+  const filteredOptions =
+    query === "" ? labelsList : labelsList?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
+
+  const onOpen = () => {
+    if (referenceElement) referenceElement.focus();
+    onDropdownOpen?.();
+  };
+
+  const handleClose = () => {
+    if (isDropdownOpen) setIsDropdownOpen(false);
+    if (referenceElement) referenceElement.blur();
+    setQuery("");
+  };
+
+  const toggleDropdown = () => {
+    if (!isDropdownOpen) onOpen();
+    setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  const dropdownOnChange = (val: string[]) => {
+    onChange(val);
+  };
+
+  const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const q = query.trim();
+    if (q !== "" && e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      setQuery("");
+      return;
+    }
+    if (
+      q !== "" &&
+      e.key === "Enter" &&
+      !e.nativeEvent.isComposing &&
+      createLabelEnabled &&
+      filteredOptions.length === 0 &&
+      !submitting
+    ) {
+      e.preventDefault();
+      await handleAddLabel(q);
+    }
+  };
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  useEffect(() => {
+    if (isDropdownOpen && inputRef.current && !isMobile) {
+      inputRef.current.focus();
+    }
+  }, [isDropdownOpen, isMobile]);
+
+  const handleAddLabel = async (labelName: string) => {
+    if (!createLabel || submitting) return;
+    const name = labelName.trim();
+    if (!name) return;
+    setSubmitting(true);
+    try {
+      const existing = labelsList.find((l) => l.name.toLowerCase() === name.toLowerCase());
+      const idToAdd = existing ? existing.id : (await createLabel({ name, color: getRandomLabelColor() })).id;
+      onChange(Array.from(new Set([...value, idToAdd])));
+      setQuery("");
+    } catch (e) {
+      console.error("Failed to create label", e);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Combobox
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      value={value}
+      onChange={dropdownOnChange}
+      className="relative h-full flex-shrink-0"
+      multiple
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+    >
+      <button
+        type="button"
+        ref={setReferenceElement}
+        className={cn("flex h-full cursor-pointer items-center gap-2 text-11", buttonContainerClassName)}
+        onClick={handleOnClick}
+      >
+        {label ? (
+          label
+        ) : value && value.length > 0 ? (
+          <span className={cn("flex h-full items-center justify-center gap-2 text-11", buttonClassName)}>
+            <IssueLabelsList
+              labels={value.map((v) => labelsList?.find((l) => l.id === v)) ?? []}
+              length={3}
+              showLength
+            />
+          </span>
+        ) : (
+          <div
+            className={cn(
+              "flex h-full items-center justify-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 hover:bg-layer-1",
+              buttonClassName
+            )}
+          >
+            <LabelsOutline className="h-3 w-3 flex-shrink-0" />
+            <span>{t("labels")}</span>
+          </div>
+        )}
+      </button>
+      {isDropdownOpen && (
+        <Combobox.Options as="ul" className="fixed z-10" static>
+          <div
+            className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+              <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+              <Combobox.Input
+                as="input"
+                ref={inputRef}
+                className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={t("search")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 overflow-y-scroll">
+              {labelsList && filteredOptions ? (
+                filteredOptions.length > 0 ? (
+                  <ul className="space-y-1">
+                    {filteredOptions.map((label) => {
+                      const children = labelsList?.filter((l) => l.parent === label.id);
+
+                      if (children.length === 0) {
+                        if (!label.parent)
+                          return (
+                            <Combobox.Option
+                              as="li"
+                              key={label.id}
+                              className={({ active }) =>
+                                `${
+                                  active ? "bg-layer-1" : ""
+                                } group flex w-full cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
+                              }
+                              value={label.id}
+                            >
+                              {({ selected }) => (
+                                <div className="flex w-full justify-between gap-2 rounded-sm">
+                                  <div className="flex items-center justify-start gap-2 truncate">
+                                    <span
+                                      className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                      style={{
+                                        backgroundColor: label.color,
+                                      }}
+                                    />
+                                    <span className="truncate">{label.name}</span>
+                                  </div>
+                                  <div className="flex shrink-0 items-center justify-center rounded-sm p-1">
+                                    <TickOutline className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                  </div>
+                                </div>
+                              )}
+                            </Combobox.Option>
+                          );
+                      } else
+                        return (
+                          <li key={label.id} className="border-y border-subtle">
+                            <div className="flex items-center gap-2 truncate p-2 text-primary select-none">
+                              <GroupOutline className="h-3 w-3" /> {label.name}
+                            </div>
+                            <ul>
+                              {children.map((child) => (
+                                <Combobox.Option
+                                  as="li"
+                                  key={child.id}
+                                  className={({ active }) =>
+                                    `${
+                                      active ? "bg-layer-1" : ""
+                                    } group flex min-w-[14rem] cursor-pointer items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none`
+                                  }
+                                  value={child.id}
+                                >
+                                  {({ selected }) => (
+                                    <div className="flex w-full justify-between gap-2 rounded-sm">
+                                      <div className="flex items-center justify-start gap-2">
+                                        <span
+                                          className="h-2.5 w-2.5 flex-shrink-0 rounded-full"
+                                          style={{
+                                            backgroundColor: child?.color,
+                                          }}
+                                        />
+                                        <span>{child.name}</span>
+                                      </div>
+                                      <div className="flex items-center justify-center rounded-sm p-1">
+                                        <TickOutline className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                      </div>
+                                    </div>
+                                  )}
+                                </Combobox.Option>
+                              ))}
+                            </ul>
+                          </li>
+                        );
+                    })}
+                  </ul>
+                ) : submitting ? (
+                  <LoadingOutline className="h-3.5 w-3.5 animate-spin" />
+                ) : createLabelEnabled ? (
+                  <p
+                    onClick={() => {
+                      if (!query.length) return;
+                      handleAddLabel(query);
+                    }}
+                    className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                  >
+                    {/* TODO: translate here */}
+                    {query.length ? (
+                      <>
+                        + Add <span className="text-primary">"{query}"</span> to labels
+                      </>
+                    ) : (
+                      t("label.create.type")
+                    )}
+                  </p>
+                ) : (
+                  <p className="px-1.5 py-1 text-placeholder italic">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="px-1.5 py-1 text-placeholder italic">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </Combobox>
+  );
+});
diff --git a/apps/web/core/components/issues/select/dropdown.tsx b/apps/web/core/components/issues/select/dropdown.tsx
new file mode 100644
index 0000000..b21bb26
--- /dev/null
+++ b/apps/web/core/components/issues/select/dropdown.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { EUserPermissionsLevel } from "@plane/constants";
+import type { IIssueLabel } from "@plane/types";
+import { EUserPermissions } from "@plane/types";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import type { TWorkItemLabelSelectBaseProps } from "./base";
+import { WorkItemLabelSelectBase } from "./base";
+
+type TWorkItemLabelSelectProps = Omit<TWorkItemLabelSelectBaseProps, "labelIds" | "getLabelById" | "onDropdownOpen"> & {
+  projectId: string | undefined;
+};
+
+export const IssueLabelSelect = observer(function IssueLabelSelect(props: TWorkItemLabelSelectProps) {
+  const { projectId } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { getProjectLabelIds, getLabelById, fetchProjectLabels, createLabel } = useLabel();
+  // derived values
+  const projectLabelIds = getProjectLabelIds(projectId);
+
+  const canCreateLabel =
+    projectId &&
+    allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug?.toString(), projectId);
+
+  const onDropdownOpen = () => {
+    if (projectLabelIds === undefined && workspaceSlug && projectId)
+      fetchProjectLabels(workspaceSlug.toString(), projectId);
+  };
+
+  const handleCreateLabel = (data: Partial<IIssueLabel>) => {
+    if (!workspaceSlug || !projectId) {
+      throw new Error("Workspace slug or project ID is missing");
+    }
+    return createLabel(workspaceSlug.toString(), projectId, data);
+  };
+
+  return (
+    <WorkItemLabelSelectBase
+      {...props}
+      getLabelById={getLabelById}
+      labelIds={projectLabelIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+      createLabel={handleCreateLabel}
+      createLabelEnabled={!!canCreateLabel}
+    />
+  );
+});
diff --git a/apps/web/core/components/issues/select/index.ts b/apps/web/core/components/issues/select/index.ts
new file mode 100644
index 0000000..9bcbbe6
--- /dev/null
+++ b/apps/web/core/components/issues/select/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./dropdown";
diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
new file mode 100644
index 0000000..c48dfd7
--- /dev/null
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { observer } from "mobx-react";
+import { Field } from "@makeplane/propel/components/field";
+import { TextArea } from "@makeplane/propel/components/text-area";
+import { useTranslation } from "@plane/i18n";
+import type { TNameDescriptionLoader } from "@plane/types";
+// types
+import { cn } from "@plane/utils";
+import useDebounce from "@/hooks/use-debounce";
+import type { TIssueOperations } from "./issue-detail";
+// hooks
+
+export type IssueTitleInputProps = {
+  disabled?: boolean;
+  value: string | undefined | null;
+  workspaceSlug: string;
+  isSubmitting: TNameDescriptionLoader;
+  setIsSubmitting: (value: TNameDescriptionLoader) => void;
+  issueOperations: TIssueOperations;
+  projectId: string;
+  issueId: string;
+  containerClassName?: string;
+};
+
+export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTitleInputProps) {
+  const {
+    disabled,
+    value,
+    workspaceSlug,
+    isSubmitting,
+    setIsSubmitting,
+    issueId,
+    issueOperations,
+    projectId,
+    containerClassName,
+  } = props;
+  const { t } = useTranslation();
+  // states
+  const [title, setTitle] = useState(value || "");
+  const [isLengthVisible, setIsLengthVisible] = useState(false);
+  // ref to track if there are unsaved changes
+  const hasUnsavedChanges = useRef(false);
+  // ref to store current title value for cleanup function
+  const currentTitleRef = useRef(title);
+  // hooks
+  const debouncedValue = useDebounce(title, 1500);
+
+  useEffect(() => {
+    if (value) {
+      setTitle(value);
+      currentTitleRef.current = value;
+      // Reset unsaved changes flag when value is set from props
+      hasUnsavedChanges.current = false;
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const textarea = document.querySelector("#title-input");
+    if (debouncedValue && debouncedValue !== value) {
+      if (debouncedValue.trim().length > 0) {
+        issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
+          setIsSubmitting("saved");
+          hasUnsavedChanges.current = false;
+          if (textarea && !textarea.matches(":focus")) {
+            const trimmedTitle = debouncedValue.trim();
+            if (trimmedTitle !== title) setTitle(trimmedTitle);
+          }
+        });
+      } else {
+        setTitle(value || "");
+        setIsSubmitting("saved");
+        hasUnsavedChanges.current = false;
+      }
+    }
+    // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue]);
+
+  useEffect(() => {
+    const handleBlur = () => {
+      const trimmedTitle = title.trim();
+      if (trimmedTitle !== title && isSubmitting !== "submitting") {
+        if (trimmedTitle.length > 0) {
+          setTitle(trimmedTitle);
+          setIsSubmitting("submitting");
+          hasUnsavedChanges.current = true;
+        } else {
+          setTitle(value || "");
+          setIsSubmitting("saved");
+          hasUnsavedChanges.current = false;
+        }
+      }
+    };
+
+    const textarea = document.querySelector("#title-input"); // You might need to change this selector according to your TextArea component
+    if (textarea) {
+      textarea.addEventListener("blur", handleBlur);
+    }
+
+    return () => {
+      if (textarea) {
+        textarea.removeEventListener("blur", handleBlur);
+      }
+    };
+  }, [title, isSubmitting, setIsSubmitting]);
+
+  // Save on unmount if there are unsaved changes
+  useEffect(
+    () => () => {
+      if (hasUnsavedChanges.current && currentTitleRef.current.trim().length > 0) {
+        issueOperations
+          .update(workspaceSlug, projectId, issueId, { name: currentTitleRef.current.trim() })
+          .catch((error) => {
+            console.error("Failed to save title on unmount:", error);
+          })
+          .finally(() => {
+            setIsSubmitting("saved");
+            hasUnsavedChanges.current = false;
+          });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const handleTitleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+      setIsSubmitting("submitting");
+      const titleFromEvent = e.target.value;
+      setTitle(titleFromEvent);
+      currentTitleRef.current = titleFromEvent;
+      hasUnsavedChanges.current = true;
+    },
+    [setIsSubmitting]
+  );
+
+  if (disabled) return <div className="text-20 font-medium whitespace-pre-line">{title}</div>;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className={cn("relative", containerClassName)}>
+        <Field name="title" invalid={title?.length === 0}>
+          <div className="flex w-full">
+            <TextArea
+              size="2xl"
+              surface="inline"
+              autoResize
+              rows={1}
+              id="title-input"
+              disabled={disabled}
+              value={title}
+              onChange={handleTitleChange}
+              maxLength={255}
+              placeholder={t("issue.title.label")}
+              onFocus={() => setIsLengthVisible(true)}
+              onBlur={() => setIsLengthVisible(false)}
+            />
+          </div>
+        </Field>
+        <div
+          className={cn(
+            "pointer-events-none absolute right-1 bottom-1 z-2 rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
+            {
+              "opacity-100": isLengthVisible,
+            }
+          )}
+        >
+          <span className={`${title.length === 0 || title.length > 255 ? "text-danger-primary" : ""}`}>
+            {title.length}
+          </span>
+          /255
+        </div>
+      </div>
+      {title?.length === 0 && (
+        <span className="text-13 font-medium text-danger-primary">{t("form.title.required")}</span>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/workspace-draft/delete-modal.tsx b/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
new file mode 100644
index 0000000..1b0634c
--- /dev/null
+++ b/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+// types
+import { PROJECT_ERROR_MESSAGES, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TWorkspaceDraftIssue } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// constants
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  dataId?: string | null | undefined;
+  data?: TWorkspaceDraftIssue;
+  onSubmit?: () => Promise<void>;
+};
+
+export function WorkspaceDraftIssueDeleteIssueModal(props: Props) {
+  const { dataId, data, isOpen, handleClose, onSubmit } = props;
+  // states
+  const [isDeleting, setIsDeleting] = useState(false);
+  // store hooks
+  const { issueMap } = useIssues();
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+  const { data: currentUser } = useUser();
+
+  // derived values
+  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  useEffect(() => {
+    setIsDeleting(false);
+  }, [isOpen]);
+
+  if (!dataId && !data) return null;
+
+  // derived values
+  const issue = data ? data : issueMap[dataId!];
+  const isIssueCreator = issue?.created_by === currentUser?.id;
+  const authorized = isIssueCreator || canPerformProjectAdminActions;
+
+  const onClose = () => {
+    setIsDeleting(false);
+    handleClose();
+  };
+
+  const handleIssueDelete = async () => {
+    setIsDeleting(true);
+
+    if (!authorized) {
+      setToast({
+        title: t(PROJECT_ERROR_MESSAGES.permissionError.i18n_title),
+        type: TOAST_TYPE.ERROR,
+        message:
+          PROJECT_ERROR_MESSAGES.permissionError.i18n_message && t(PROJECT_ERROR_MESSAGES.permissionError.i18n_message),
+      });
+      onClose();
+      return;
+    }
+    if (onSubmit)
+      await onSubmit()
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: `${t("success")}!`,
+            message: t("workspace_draft_issues.toasts.deleted.success"),
+          });
+          onClose();
+        })
+        .catch((errors) => {
+          const isPermissionError = errors?.error === "Only admin or creator can delete the work item";
+          const currentError = isPermissionError
+            ? PROJECT_ERROR_MESSAGES.permissionError
+            : PROJECT_ERROR_MESSAGES.issueDeleteError;
+          setToast({
+            title: t(currentError.i18n_title),
+            type: TOAST_TYPE.ERROR,
+            message: currentError.i18n_message && t(currentError.i18n_message),
+          });
+        })
+        .finally(() => onClose());
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={onClose}
+      handleSubmit={handleIssueDelete}
+      isSubmitting={isDeleting}
+      isOpen={isOpen}
+      title={t("workspace_draft_issues.delete_modal.title")}
+      content={<>{t("workspace_draft_issues.delete_modal.description")}</>}
+      primaryButtonText={{
+        loading: t("deleting"),
+        default: t("delete"),
+      }}
+      secondaryButtonText={t("cancel")}
+    />
+  );
+}
diff --git a/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx b/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
new file mode 100644
index 0000000..d863534
--- /dev/null
+++ b/apps/web/core/components/issues/workspace-draft/draft-issue-block.tsx
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useRef, useState } from "react";
+import { omit } from "lodash-es";
+import { observer } from "mobx-react";
+import { SquareStackIcon } from "lucide-react";
+import { CopyOutline, DeleteOutline, EditOutline } from "@makeplane/propel/icons";
+// plane utils
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TWorkspaceDraftIssue } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import type { TContextMenuItem } from "@plane/ui";
+import { Row } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useProject } from "@/hooks/store/use-project";
+import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
+// local imports
+import { IdentifierText } from "../issue-detail/identifier-text";
+import { CreateUpdateIssueModal } from "../issue-modal/modal";
+import { WorkspaceDraftIssueDeleteIssueModal } from "./delete-modal";
+import { DraftIssueProperties } from "./draft-issue-properties";
+import { WorkspaceDraftIssueQuickActions } from "./quick-action";
+
+type Props = {
+  workspaceSlug: string;
+  issueId: string;
+};
+
+export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
+  // props
+  const { workspaceSlug, issueId } = props;
+  // states
+  const [moveToIssue, setMoveToIssue] = useState(false);
+  const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
+  const [issueToEdit, setIssueToEdit] = useState<TWorkspaceDraftIssue | undefined>(undefined);
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+  // hooks
+  const { getIssueById, updateIssue, deleteIssue } = useWorkspaceDraftIssues();
+  const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
+  const { getProjectIdentifierById } = useProject();
+  // ref
+  const issueRef = useRef<HTMLDivElement | null>(null);
+  // derived values
+  const issue = getIssueById(issueId);
+  const projectIdentifier = (issue && issue.project_id && getProjectIdentifierById(issue.project_id)) || undefined;
+  if (!issue || !projectIdentifier) return null;
+
+  const duplicateIssuePayload = omit(
+    {
+      ...issue,
+      name: `${issue.name} (copy)`,
+      is_draft: true,
+    },
+    ["id"]
+  );
+
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "edit",
+      title: "edit",
+      icon: EditOutline,
+      action: () => {
+        setIssueToEdit(issue);
+        setCreateUpdateIssueModal(true);
+      },
+    },
+    {
+      key: "make-a-copy",
+      title: "make_a_copy",
+      icon: CopyOutline,
+      action: () => {
+        setCreateUpdateIssueModal(true);
+      },
+    },
+    {
+      key: "move-to-issues",
+      title: "move_to_project",
+      icon: SquareStackIcon,
+      action: () => {
+        setMoveToIssue(true);
+        setIssueToEdit(issue);
+        setCreateUpdateIssueModal(true);
+      },
+    },
+    {
+      key: "delete",
+      title: "delete",
+      icon: DeleteOutline,
+      action: () => {
+        setDeleteIssueModal(true);
+      },
+    },
+  ];
+
+  return (
+    <>
+      <WorkspaceDraftIssueDeleteIssueModal
+        data={issue}
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        onSubmit={async () => deleteIssue(workspaceSlug, issueId)}
+      />
+      <CreateUpdateIssueModal
+        isOpen={createUpdateIssueModal}
+        onClose={() => {
+          setCreateUpdateIssueModal(false);
+          setIssueToEdit(undefined);
+          setMoveToIssue(false);
+        }}
+        data={issueToEdit ?? duplicateIssuePayload}
+        onSubmit={async (data) => {
+          if (issueToEdit) await updateIssue(workspaceSlug, issueId, data);
+        }}
+        storeType={EIssuesStoreType.WORKSPACE_DRAFT}
+        fetchIssueDetails={false}
+        moveToIssue={moveToIssue}
+        isDraft
+      />
+      <div
+        id={`issue-${issue.id}`}
+        className="relative w-full cursor-pointer border-b border-b-subtle-1"
+        onDoubleClick={() => {
+          setIssueToEdit(issue);
+          setCreateUpdateIssueModal(true);
+        }}
+      >
+        <Row
+          ref={issueRef}
+          className={cn(
+            "group/list-block relative flex min-h-11 flex-col gap-3 bg-layer-transparent py-3 text-13 transition-colors hover:bg-layer-transparent-hover",
+            {
+              "md:flex-row md:items-center": isSidebarCollapsed,
+              "lg:flex-row lg:items-center": !isSidebarCollapsed,
+            }
+          )}
+        >
+          <div className="flex w-full truncate">
+            <div className="flex flex-grow items-center gap-0.5 truncate">
+              <div className="flex items-center gap-1">
+                <div className="flex-shrink-0">
+                  {issue.project_id && (
+                    <div className="flex items-center space-x-2">
+                      <IdentifierText
+                        identifier={projectIdentifier}
+                        enableClickToCopyIdentifier
+                        size="xs"
+                        variant="tertiary"
+                      />
+                    </div>
+                  )}
+                </div>
+
+                {/* sub-issues chevron */}
+                <div className="grid size-4 flex-shrink-0 place-items-center" />
+              </div>
+
+              <Tooltip label={issue.name} layout="stacked" align="start">
+                <p className="w-full cursor-pointer truncate text-13 text-primary">{issue.name}</p>
+              </Tooltip>
+            </div>
+
+            {/* quick actions */}
+            <div
+              className={cn("block rounded-sm border border-strong", {
+                "md:hidden": isSidebarCollapsed,
+                "lg:hidden": !isSidebarCollapsed,
+              })}
+            >
+              <WorkspaceDraftIssueQuickActions parentRef={issueRef} MENU_ITEMS={MENU_ITEMS} />
+            </div>
+          </div>
+
+          <div className="flex flex-shrink-0 items-center gap-2">
+            <DraftIssueProperties
+              className={`relative flex flex-wrap ${isSidebarCollapsed ? "md:flex-shrink-0 md:flex-grow" : "lg:flex-shrink-0 lg:flex-grow"} items-center gap-2 whitespace-nowrap`}
+              issue={issue}
+              updateIssue={async (projectId, issueId, data) => {
+                await updateIssue(workspaceSlug, issueId, data);
+              }}
+            />
+            <div
+              className={cn("hidden", {
+                "md:flex": isSidebarCollapsed,
+                "lg:flex": !isSidebarCollapsed,
+              })}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              <WorkspaceDraftIssueQuickActions parentRef={issueRef} MENU_ITEMS={MENU_ITEMS} />
+            </div>
+          </div>
+        </Row>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx b/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
new file mode 100644
index 0000000..21fe204
--- /dev/null
+++ b/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
@@ -0,0 +1,279 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { DueDateOutline, StartDateOutline } from "@makeplane/propel/icons";
+// types
+import type { TIssuePriorities, TWorkspaceDraftIssue } from "@plane/types";
+import { getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
+// components
+import { CycleDropdown } from "@/components/dropdowns/cycle";
+import { DateDropdown } from "@/components/dropdowns/date";
+import { EstimateDropdown } from "@/components/dropdowns/estimate";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { ModuleDropdown } from "@/components/dropdowns/module/dropdown";
+import { PriorityDropdown } from "@/components/dropdowns/priority";
+import { StateDropdown } from "@/components/dropdowns/state/dropdown";
+// helpers
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useLabel } from "@/hooks/store/use-label";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { IssuePropertyLabels } from "../issue-layouts/properties";
+// local components
+
+export interface IIssueProperties {
+  issue: TWorkspaceDraftIssue;
+  updateIssue:
+    | ((projectId: string | null, issueId: string, data: Partial<TWorkspaceDraftIssue>) => Promise<void>)
+    | undefined;
+  className: string;
+}
+
+export const DraftIssueProperties = observer(function DraftIssueProperties(props: IIssueProperties) {
+  const { issue, updateIssue, className } = props;
+  // store hooks
+  const { getProjectById } = useProject();
+  const { labelMap } = useLabel();
+  const { addCycleToIssue, addModulesToIssue } = useWorkspaceDraftIssues();
+  const { areEstimateEnabledByProjectId } = useProjectEstimates();
+  const { getStateById } = useProjectState();
+  const { isMobile } = usePlatformOS();
+  const projectDetails = getProjectById(issue.project_id);
+
+  // router
+  const { workspaceSlug } = useParams();
+  // derived values
+  const stateDetails = getStateById(issue.state_id);
+
+  const issueOperations = useMemo(
+    () => ({
+      updateIssueModules: async (moduleIds: string[]) => {
+        if (!workspaceSlug || !issue.id) return;
+        await addModulesToIssue(workspaceSlug.toString(), issue.id, moduleIds);
+      },
+      addIssueToCycle: async (cycleId: string) => {
+        if (!workspaceSlug || !issue.id) return;
+        await addCycleToIssue(workspaceSlug.toString(), issue.id, cycleId);
+      },
+      removeIssueFromCycle: async () => {
+        if (!workspaceSlug || !issue.id) return;
+        // TODO: To be checked
+        await addCycleToIssue(workspaceSlug.toString(), issue.id, "");
+      },
+    }),
+    [workspaceSlug, issue, addCycleToIssue, addModulesToIssue]
+  );
+
+  const handleState = (stateId: string) =>
+    issue?.project_id && updateIssue && updateIssue(issue.project_id, issue.id, { state_id: stateId });
+
+  const handlePriority = (value: TIssuePriorities) =>
+    issue?.project_id && updateIssue && updateIssue(issue.project_id, issue.id, { priority: value });
+
+  const handleLabel = (ids: string[]) =>
+    issue?.project_id && updateIssue && updateIssue(issue.project_id, issue.id, { label_ids: ids });
+
+  const handleAssignee = (ids: string[]) =>
+    issue?.project_id && updateIssue && updateIssue(issue.project_id, issue.id, { assignee_ids: ids });
+
+  const handleModule = useCallback(
+    (moduleIds: string[] | null) => {
+      if (!issue || !issue.module_ids || !moduleIds) return;
+      issueOperations.updateIssueModules(moduleIds);
+    },
+    [issueOperations, issue]
+  );
+
+  const handleCycle = useCallback(
+    (cycleId: string | null) => {
+      if (!issue || issue.cycle_id === cycleId) return;
+      if (cycleId) issueOperations.addIssueToCycle?.(cycleId);
+      else issueOperations.removeIssueFromCycle?.();
+    },
+    [issue, issueOperations]
+  );
+
+  const handleStartDate = (date: Date | null) =>
+    issue?.project_id &&
+    updateIssue &&
+    updateIssue(issue.project_id, issue.id, {
+      start_date: date ? (renderFormattedPayloadDate(date) ?? undefined) : undefined,
+    });
+
+  const handleTargetDate = (date: Date | null) =>
+    issue?.project_id &&
+    updateIssue &&
+    updateIssue(issue.project_id, issue.id, {
+      target_date: date ? (renderFormattedPayloadDate(date) ?? undefined) : undefined,
+    });
+
+  const handleEstimate = (value: string | undefined) =>
+    issue?.project_id && updateIssue && updateIssue(issue.project_id, issue.id, { estimate_point: value });
+
+  if (!issue.project_id) return null;
+
+  const defaultLabelOptions =
+    issue?.label_ids?.flatMap((id) => {
+      const label = labelMap[id];
+      return label ? [label] : [];
+    }) || [];
+
+  const minDate = getDate(issue.start_date);
+  minDate?.setDate(minDate.getDate());
+
+  const maxDate = getDate(issue.target_date);
+  maxDate?.setDate(maxDate.getDate());
+
+  const handleEventPropagation = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return (
+    <div className={className}>
+      {/* basic properties */}
+      {/* state */}
+      <div className="h-5" onClick={handleEventPropagation}>
+        <StateDropdown
+          buttonContainerClassName="truncate max-w-40"
+          value={issue.state_id}
+          onChange={handleState}
+          projectId={issue.project_id}
+          buttonVariant="border-with-text"
+          renderByDefault={isMobile}
+          showTooltip
+        />
+      </div>
+
+      {/* priority */}
+      <div className="h-5" onClick={handleEventPropagation}>
+        <PriorityDropdown
+          value={issue?.priority}
+          onChange={handlePriority}
+          buttonVariant="border-without-text"
+          buttonClassName="border"
+          renderByDefault={isMobile}
+          showTooltip
+        />
+      </div>
+
+      {/* label */}
+
+      <IssuePropertyLabels
+        projectId={issue?.project_id || null}
+        value={issue?.label_ids || null}
+        defaultOptions={defaultLabelOptions}
+        onChange={handleLabel}
+        renderByDefault={isMobile}
+        hideDropdownArrow
+      />
+
+      {/* start date */}
+      <div className="h-5" onClick={handleEventPropagation}>
+        <DateDropdown
+          value={issue.start_date ?? null}
+          onChange={handleStartDate}
+          maxDate={maxDate}
+          placeholder="Start date"
+          icon={<StartDateOutline className="h-3 w-3 flex-shrink-0" />}
+          buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
+          optionsClassName="z-10"
+          renderByDefault={isMobile}
+          showTooltip
+        />
+      </div>
+
+      {/* target/due date */}
+      <div className="h-5" onClick={handleEventPropagation}>
+        <DateDropdown
+          value={issue?.target_date ?? null}
+          onChange={handleTargetDate}
+          minDate={minDate}
+          placeholder="Due date"
+          icon={<DueDateOutline className="h-3 w-3 flex-shrink-0" />}
+          buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
+          buttonClassName={
+            shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-danger-primary" : ""
+          }
+          clearIconClassName="!text-primary"
+          optionsClassName="z-10"
+          renderByDefault={isMobile}
+          showTooltip
+        />
+      </div>
+
+      {/* assignee */}
+      <div className="h-5" onClick={handleEventPropagation}>
+        <MemberDropdown
+          projectId={issue?.project_id}
+          value={issue?.assignee_ids}
+          onChange={handleAssignee}
+          multiple
+          buttonVariant={issue.assignee_ids?.length > 0 ? "transparent-without-text" : "border-without-text"}
+          buttonClassName={issue.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
+          showTooltip={issue?.assignee_ids?.length === 0}
+          placeholder="Assignees"
+          optionsClassName="z-10"
+          tooltipContent=""
+          renderByDefault={isMobile}
+        />
+      </div>
+
+      {/* modules */}
+      {projectDetails?.module_view && (
+        <div className="h-5" onClick={handleEventPropagation}>
+          <ModuleDropdown
+            buttonContainerClassName="truncate max-w-40"
+            projectId={issue?.project_id}
+            value={issue?.module_ids ?? []}
+            onChange={handleModule}
+            renderByDefault={isMobile}
+            multiple
+            buttonVariant="border-with-text"
+            showCount
+            showTooltip
+          />
+        </div>
+      )}
+
+      {/* cycles */}
+      {projectDetails?.cycle_view && (
+        <div className="h-5" onClick={handleEventPropagation}>
+          <CycleDropdown
+            buttonContainerClassName="truncate max-w-40"
+            projectId={issue?.project_id}
+            value={issue?.cycle_id || null}
+            onChange={handleCycle}
+            buttonVariant="border-with-text"
+            renderByDefault={isMobile}
+            showTooltip
+          />
+        </div>
+      )}
+
+      {/* estimates */}
+      {issue.project_id && areEstimateEnabledByProjectId(issue.project_id?.toString()) && (
+        <div className="h-5" onClick={handleEventPropagation}>
+          <EstimateDropdown
+            value={issue.estimate_point ?? undefined}
+            onChange={handleEstimate}
+            projectId={issue.project_id}
+            buttonVariant="border-with-text"
+            renderByDefault={isMobile}
+            showTooltip
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/issues/workspace-draft/empty-state.tsx b/apps/web/core/components/issues/workspace-draft/empty-state.tsx
new file mode 100644
index 0000000..a5d4f84
--- /dev/null
+++ b/apps/web/core/components/issues/workspace-draft/empty-state.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, useState } from "react";
+// components
+import { observer } from "mobx-react";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EIssuesStoreType, EUserWorkspaceRoles } from "@plane/types";
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+// constants
+import { useUserPermissions } from "@/hooks/store/user";
+
+export const WorkspaceDraftEmptyState = observer(function WorkspaceDraftEmptyState() {
+  // state
+  const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
+  // store hooks
+  const { t } = useTranslation();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  return (
+    <Fragment>
+      <CreateUpdateIssueModal
+        isOpen={isDraftIssueModalOpen}
+        storeType={EIssuesStoreType.WORKSPACE_DRAFT}
+        onClose={() => setIsDraftIssueModalOpen(false)}
+        isDraft
+      />
+      <div className="relative h-full w-full overflow-y-auto">
+        <EmptyStateDetailed
+          title={t("workspace_empty_state.drafts.title")}
+          description={t("workspace_empty_state.drafts.description")}
+          assetKey="draft"
+          actions={[
+            {
+              label: t("workspace_empty_state.drafts.cta_primary"),
+              onClick: () => {
+                setIsDraftIssueModalOpen(true);
+              },
+              disabled: !canPerformEmptyStateActions,
+              variant: "primary",
+            },
+          ]}
+        />
+      </div>
+    </Fragment>
+  );
+});
diff --git a/apps/web/core/components/issues/workspace-draft/index.ts b/apps/web/core/components/issues/workspace-draft/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/issues/workspace-draft/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/issues/workspace-draft/loader.tsx b/apps/web/core/components/issues/workspace-draft/loader.tsx
new file mode 100644
index 0000000..b301f94
--- /dev/null
+++ b/apps/web/core/components/issues/workspace-draft/loader.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+// components
+import { ListLoaderItemRow } from "@/components/ui/loader/layouts/list-layout-loader";
+
+type TWorkspaceDraftIssuesLoader = {
+  items?: number;
+};
+
+export function WorkspaceDraftIssuesLoader(props: TWorkspaceDraftIssuesLoader) {
+  const { items = 14 } = props;
+  return (
+    <div className="relative h-full w-full">
+      {range(items).map((index) => (
+        <ListLoaderItemRow key={index} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/issues/workspace-draft/quick-action.tsx b/apps/web/core/components/issues/workspace-draft/quick-action.tsx
new file mode 100644
index 0000000..50b4ed4
--- /dev/null
+++ b/apps/web/core/components/issues/workspace-draft/quick-action.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import type { TContextMenuItem } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+
+export interface Props {
+  parentRef: React.RefObject<HTMLElement | null>;
+  MENU_ITEMS: TContextMenuItem[];
+}
+
+export const WorkspaceDraftIssueQuickActions = observer(function WorkspaceDraftIssueQuickActions(props: Props) {
+  const { parentRef, MENU_ITEMS } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
+      <CustomMenu
+        ellipsis
+        placement="bottom-end"
+        menuItemsClassName="z-[14]"
+        maxHeight="lg"
+        useCaptureForOutsideClick
+        closeOnSelect
+      >
+        {MENU_ITEMS.map((item) => (
+          <CustomMenu.MenuItem
+            key={item.key}
+            onClick={() => {
+              item.action();
+            }}
+            className={cn(
+              "flex items-center gap-2",
+              {
+                "text-placeholder": item.disabled,
+              },
+              item.className
+            )}
+            disabled={item.disabled}
+          >
+            {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+            <div>
+              <h5>{t(item.title || "")}</h5>
+              {item.description && (
+                <p
+                  className={cn("whitespace-pre-line text-tertiary", {
+                    "text-placeholder": item.disabled,
+                  })}
+                >
+                  {item.description}
+                </p>
+              )}
+            </div>
+          </CustomMenu.MenuItem>
+        ))}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/issues/workspace-draft/root.tsx b/apps/web/core/components/issues/workspace-draft/root.tsx
new file mode 100644
index 0000000..b620a95
--- /dev/null
+++ b/apps/web/core/components/issues/workspace-draft/root.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { EUserPermissionsLevel, EDraftIssuePaginationType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EUserWorkspaceRoles } from "@plane/types";
+// components
+import { cn } from "@plane/utils";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
+import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
+// components
+import { DraftIssueBlock } from "./draft-issue-block";
+import { WorkspaceDraftEmptyState } from "./empty-state";
+import { WorkspaceDraftIssuesLoader } from "./loader";
+
+type TWorkspaceDraftIssuesRoot = {
+  workspaceSlug: string;
+};
+
+export const WorkspaceDraftIssuesRoot = observer(function WorkspaceDraftIssuesRoot(props: TWorkspaceDraftIssuesRoot) {
+  const { workspaceSlug } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { loader, paginationInfo, fetchIssues, issueIds } = useWorkspaceDraftIssues();
+  const { workspaceProjectIds } = useProject();
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const hasMemberLevelPermission = allowPermissions(
+    [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  //swr hook for fetching issue properties
+  useWorkspaceIssueProperties(workspaceSlug);
+
+  // fetching issues
+  const { isLoading } = useSWR(
+    workspaceSlug ? `WORKSPACE_DRAFT_ISSUES_${workspaceSlug}` : null,
+    workspaceSlug ? async () => await fetchIssues(workspaceSlug, "init-loader") : null,
+    { revalidateOnFocus: false, revalidateIfStale: false }
+  );
+
+  // handle nest issues
+  const handleNextIssues = async () => {
+    if (!paginationInfo?.next_page_results) return;
+    await fetchIssues(workspaceSlug, "pagination", EDraftIssuePaginationType.NEXT);
+  };
+
+  if (isLoading) {
+    return <WorkspaceDraftIssuesLoader items={14} />;
+  }
+
+  if (workspaceProjectIds?.length === 0)
+    return (
+      <EmptyStateDetailed
+        title={t("workspace_projects.empty_state.no_projects.title")}
+        description={t("workspace_projects.empty_state.no_projects.description")}
+        assetKey="project"
+        assetClassName="size-40"
+        actions={[
+          {
+            label: t("workspace_projects.empty_state.no_projects.primary_button.text"),
+            onClick: () => {
+              toggleCreateProjectModal(true);
+            },
+            disabled: !hasMemberLevelPermission,
+            variant: "primary",
+          },
+        ]}
+      />
+    );
+
+  if (issueIds.length <= 0) return <WorkspaceDraftEmptyState />;
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        {issueIds.map((issueId: string) => (
+          <DraftIssueBlock key={issueId} workspaceSlug={workspaceSlug} issueId={issueId} />
+        ))}
+      </div>
+
+      {paginationInfo?.next_page_results && (
+        <Fragment>
+          {loader === "pagination" && issueIds.length >= 0 ? (
+            <WorkspaceDraftIssuesLoader items={1} />
+          ) : (
+            <div
+              className={cn("h-11 border-b border-subtle bg-surface-1 p-3 pl-6 text-13 font-medium transition-all", {
+                "cursor-pointer text-accent-primary underline-offset-2 hover:text-accent-secondary hover:underline":
+                  paginationInfo?.next_page_results,
+              })}
+              onClick={handleNextIssues}
+            >
+              Load More ↓
+            </div>
+          )}
+        </Fragment>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/labels/create-update-label-inline.tsx b/apps/web/core/components/labels/create-update-label-inline.tsx
new file mode 100644
index 0000000..70be4ca
--- /dev/null
+++ b/apps/web/core/components/labels/create-update-label-inline.tsx
@@ -0,0 +1,259 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { forwardRef, useEffect } from "react";
+import { observer } from "mobx-react";
+import { TwitterPicker } from "react-color";
+import type { SubmitHandler } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { Popover, Transition } from "@headlessui/react";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IIssueLabel } from "@plane/types";
+
+// error codes
+const errorCodes = {
+  LABEL_NAME_ALREADY_EXISTS: "LABEL_NAME_ALREADY_EXISTS",
+};
+
+export type TLabelOperationsCallbacks = {
+  createLabel: (data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
+  updateLabel: (labelId: string, data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
+};
+
+type TCreateUpdateLabelInlineProps = {
+  labelForm: boolean;
+  setLabelForm: React.Dispatch<React.SetStateAction<boolean>>;
+  isUpdating: boolean;
+  labelOperationsCallbacks: TLabelOperationsCallbacks;
+  labelToUpdate?: IIssueLabel;
+  onClose?: () => void;
+};
+
+const defaultValues: Partial<IIssueLabel> = {
+  name: "",
+  color: "var(--text-color-secondary)",
+};
+
+export const CreateUpdateLabelInline = observer(
+  forwardRef(function CreateUpdateLabelInline(
+    props: TCreateUpdateLabelInlineProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) {
+    const { labelForm, setLabelForm, isUpdating, labelOperationsCallbacks, labelToUpdate, onClose } = props;
+    // form info
+    const {
+      handleSubmit,
+      control,
+      reset,
+      formState: { errors, isSubmitting },
+      watch,
+      setValue,
+      setFocus,
+    } = useForm<IIssueLabel>({
+      defaultValues,
+    });
+
+    const { t } = useTranslation();
+
+    const handleClose = () => {
+      setLabelForm(false);
+      reset(defaultValues);
+      if (onClose) onClose();
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getErrorMessage = (error: any, operation: "create" | "update"): string => {
+      const errorData = error ?? {};
+
+      const labelError = errorData.name?.includes(errorCodes.LABEL_NAME_ALREADY_EXISTS);
+      if (labelError) {
+        return t("label.create.already_exists");
+      }
+
+      // Fallback to general error messages
+      if (operation === "create") {
+        return errorData?.detail ?? errorData?.error ?? t("common.something_went_wrong");
+      }
+
+      return errorData?.error ?? t("project_settings.labels.toast.error");
+    };
+
+    const handleLabelCreate: SubmitHandler<IIssueLabel> = async (formData) => {
+      if (isSubmitting) return;
+
+      await labelOperationsCallbacks
+        .createLabel(formData)
+        .then((_res) => {
+          handleClose();
+          reset(defaultValues);
+        })
+        .catch((error) => {
+          const errorMessage = getErrorMessage(error, "create");
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: errorMessage,
+          });
+          reset(formData);
+        });
+    };
+
+    const handleLabelUpdate: SubmitHandler<IIssueLabel> = async (formData) => {
+      if (!labelToUpdate?.id || isSubmitting) return;
+
+      await labelOperationsCallbacks
+        .updateLabel(labelToUpdate.id, formData)
+        .then((_res) => {
+          reset(defaultValues);
+          handleClose();
+        })
+        .catch((error) => {
+          const errorMessage = getErrorMessage(error, "update");
+          setToast({
+            title: "Oops!",
+            type: TOAST_TYPE.ERROR,
+            message: errorMessage,
+          });
+          reset(formData);
+        });
+    };
+
+    const handleFormSubmit = (formData: IIssueLabel) => {
+      if (isUpdating) {
+        handleLabelUpdate(formData);
+      } else {
+        handleLabelCreate(formData);
+      }
+    };
+
+    /**
+     * For settings focus on name input
+     */
+    useEffect(() => {
+      setFocus("name");
+    }, [setFocus, labelForm]);
+
+    useEffect(() => {
+      if (!labelToUpdate) return;
+
+      setValue("name", labelToUpdate.name);
+      setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
+    }, [labelToUpdate, setValue]);
+
+    useEffect(() => {
+      if (labelToUpdate) {
+        setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
+        return;
+      }
+
+      setValue("color", getRandomLabelColor());
+    }, [labelToUpdate, setValue]);
+
+    return (
+      <>
+        <div
+          ref={ref}
+          className={`flex w-full scroll-m-8 items-center gap-2 bg-surface-1 ${labelForm ? "" : "hidden"}`}
+        >
+          <div className="flex-shrink-0">
+            <Popover className="relative z-10 flex h-full w-full items-center justify-center">
+              {({ open }) => (
+                <>
+                  <Popover.Button
+                    className={`group inline-flex items-center text-14 font-medium focus:outline-none ${
+                      open ? "text-primary" : "text-secondary"
+                    }`}
+                  >
+                    <span
+                      className="h-4 w-4 rounded-full"
+                      style={{
+                        backgroundColor: watch("color"),
+                      }}
+                    />
+                  </Popover.Button>
+
+                  <Transition
+                    as={React.Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="opacity-0 translate-y-1"
+                    enterTo="opacity-100 translate-y-0"
+                    leave="transition ease-in duration-150"
+                    leaveFrom="opacity-100 translate-y-0"
+                    leaveTo="opacity-0 translate-y-1"
+                  >
+                    <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                      <Controller
+                        name="color"
+                        control={control}
+                        render={({ field: { value, onChange } }) => (
+                          <TwitterPicker
+                            colors={LABEL_COLOR_OPTIONS}
+                            color={value}
+                            onChange={(value) => onChange(value.hex)}
+                          />
+                        )}
+                      />
+                    </Popover.Panel>
+                  </Transition>
+                </>
+              )}
+            </Popover>
+          </div>
+          <div className="flex flex-1 flex-col justify-center">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: t("project_settings.labels.label_title_is_required"),
+                maxLength: {
+                  value: 255,
+                  message: t("project_settings.labels.label_max_char"),
+                },
+              }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Field name="name" invalid={Boolean(errors.name)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      id="labelName"
+                      name="name"
+                      type="text"
+                      autoFocus
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      placeholder={t("project_settings.labels.label_title")}
+                    />
+                  </InputGroup>
+                </Field>
+              )}
+            />
+          </div>
+          <Button variant="secondary" onClick={() => handleClose()}>
+            {t("cancel")}
+          </Button>
+          <Button
+            variant="primary"
+            onClick={(e) => {
+              e.preventDefault();
+              handleSubmit(handleFormSubmit)();
+            }}
+            loading={isSubmitting}
+          >
+            {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
+          </Button>
+        </div>
+        {errors.name?.message && <p className="p-0.5 pl-8 text-13 text-danger-primary">{errors.name?.message}</p>}
+      </>
+    );
+  })
+);
diff --git a/apps/web/core/components/labels/delete-label-modal.tsx b/apps/web/core/components/labels/delete-label-modal.tsx
new file mode 100644
index 0000000..9adc238
--- /dev/null
+++ b/apps/web/core/components/labels/delete-label-modal.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IIssueLabel } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: IIssueLabel | null;
+};
+
+export const DeleteLabelModal = observer(function DeleteLabelModal(props: Props) {
+  const { isOpen, onClose, data } = props;
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { deleteLabel } = useLabel();
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    setIsDeleteLoading(true);
+
+    await deleteLabel(workspaceSlug.toString(), projectId.toString(), data.id)
+      .then(() => {
+        handleClose();
+      })
+      .catch((err) => {
+        setIsDeleteLoading(false);
+        const error = err?.error || "Label could not be deleted. Please try again.";
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: error,
+        });
+      });
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isSubmitting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete Label"
+      content={
+        <>
+          Are you sure you want to delete <span className="font-medium text-primary">{data?.name}</span>? This will
+          remove the label from all the work item and from any views where the label is being filtered upon.
+        </>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/labels/index.ts b/apps/web/core/components/labels/index.ts
new file mode 100644
index 0000000..6fe30a0
--- /dev/null
+++ b/apps/web/core/components/labels/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./create-update-label-inline";
+export * from "./delete-label-modal";
+export * from "./project-setting-label-group";
+export * from "./project-setting-label-item";
+export * from "./project-setting-label-list";
diff --git a/apps/web/core/components/labels/label-block/label-item-block.tsx b/apps/web/core/components/labels/label-block/label-item-block.tsx
new file mode 100644
index 0000000..4dcf692
--- /dev/null
+++ b/apps/web/core/components/labels/label-block/label-item-block.tsx
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { useRef, useState } from "react";
+import type { LucideIcon } from "lucide-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+// types
+import type { IIssueLabel } from "@plane/types";
+// ui
+import { CustomMenu, DragHandle } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// components
+import { LabelName } from "./label-name";
+
+export interface ICustomMenuItem {
+  CustomIcon: LucideIcon | React.FC<ISvgIcons>;
+  onClick: (label: IIssueLabel) => void;
+  isVisible: boolean;
+  text: string;
+  key: string;
+}
+
+interface ILabelItemBlock {
+  label: IIssueLabel;
+  isDragging: boolean;
+  customMenuItems: ICustomMenuItem[];
+  handleLabelDelete: (label: IIssueLabel) => void;
+  isLabelGroup?: boolean;
+  dragHandleRef: MutableRefObject<HTMLButtonElement | null>;
+  disabled?: boolean;
+  draggable?: boolean;
+}
+
+export function LabelItemBlock(props: ILabelItemBlock) {
+  const {
+    label,
+    isDragging,
+    customMenuItems,
+    handleLabelDelete,
+    isLabelGroup,
+    dragHandleRef,
+    disabled = false,
+    draggable = true,
+  } = props;
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(true);
+  // refs
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
+  return (
+    <div className="group flex items-center">
+      <div className="flex items-center">
+        {!disabled && draggable && (
+          <DragHandle
+            className={cn("opacity-0 group-hover:opacity-100", {
+              "opacity-100": isDragging,
+            })}
+            ref={dragHandleRef}
+          />
+        )}
+        <LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
+      </div>
+
+      {!disabled && (
+        <div
+          ref={actionSectionRef}
+          className={`absolute right-2.5 flex items-center gap-2 px-4 ${
+            isMenuActive || isLabelGroup
+              ? "opacity-100"
+              : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
+          } ${isLabelGroup && "-top-0.5"}`}
+        >
+          <CustomMenu ellipsis menuButtonOnClick={() => setIsMenuActive(!isMenuActive)} useCaptureForOutsideClick>
+            {customMenuItems.map(
+              ({ isVisible, onClick, CustomIcon, text, key }) =>
+                isVisible && (
+                  <CustomMenu.MenuItem key={key} onClick={() => onClick(label)}>
+                    <span className="flex items-center justify-start gap-2">
+                      <CustomIcon className="size-4" />
+                      <span>{text}</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                )
+            )}
+          </CustomMenu>
+          {!isLabelGroup && (
+            <div className="py-0.5">
+              <button
+                className="flex size-5 items-center justify-center rounded-sm hover:bg-layer-1"
+                onClick={() => {
+                  handleLabelDelete(label);
+                }}
+              >
+                <CloseOutline className="size-3.5 flex-shrink-0 text-tertiary" />
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/labels/label-block/label-name.tsx b/apps/web/core/components/labels/label-block/label-name.tsx
new file mode 100644
index 0000000..5698e47
--- /dev/null
+++ b/apps/web/core/components/labels/label-block/label-name.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { GroupOutline } from "@makeplane/propel/icons";
+
+interface ILabelName {
+  name: string;
+  color: string;
+  isGroup: boolean;
+}
+
+export function LabelName(props: ILabelName) {
+  const { name, color, isGroup } = props;
+
+  return (
+    <div className="flex items-center gap-3 pr-20">
+      {isGroup ? (
+        <GroupOutline className="h-3.5 w-3.5" color={color} />
+      ) : (
+        <span
+          className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: color && color !== "" ? color : "#000",
+          }}
+        />
+      )}
+      <h6 className="text-13">{name}</h6>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
new file mode 100644
index 0000000..483e2cf
--- /dev/null
+++ b/apps/web/core/components/labels/label-drag-n-drop-HOC.tsx
@@ -0,0 +1,174 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+import { createRoot } from "react-dom/client";
+// types
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { IIssueLabel, InstructionType } from "@plane/types";
+// ui
+import { DropIndicator } from "@plane/ui";
+// components
+import { useUserPermissions } from "@/hooks/store/user";
+import { LabelName } from "./label-block/label-name";
+import type { TargetData } from "./label-utils";
+import { getCanDrop, getInstructionFromPayload } from "./label-utils";
+
+type LabelDragPreviewProps = {
+  label: IIssueLabel;
+  isGroup: boolean;
+};
+
+export function LabelDragPreview(props: LabelDragPreviewProps) {
+  const { label, isGroup } = props;
+
+  return (
+    <div className="border-[1px] border-subtle bg-surface-1 py-3 pr-4 pl-2">
+      <LabelName name={label.name} color={label.color} isGroup={isGroup} />
+    </div>
+  );
+}
+
+type Props = {
+  label: IIssueLabel;
+  isGroup: boolean;
+  isChild: boolean;
+  isLastChild: boolean;
+  children: (
+    isDragging: boolean,
+    isDroppingInLabel: boolean,
+    dragHandleRef: MutableRefObject<HTMLButtonElement | null>
+  ) => React.ReactNode;
+  onDrop: (
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => void;
+};
+
+export const LabelDndHOC = observer(function LabelDndHOC(props: Props) {
+  const { label, isGroup, isChild, isLastChild, children, onDrop } = props;
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
+  // refs
+  const labelRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
+
+  const { allowPermissions } = useUserPermissions();
+  const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  useEffect(() => {
+    const element = labelRef.current;
+    const dragHandleElement = dragHandleRef.current;
+
+    if (!element || !isEditable) return;
+
+    return combine(
+      draggable({
+        element,
+        dragHandle: dragHandleElement ?? undefined,
+        getInitialData: () => ({ id: label?.id, parentId: label?.parent, isGroup, isChild }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
+            render: ({ container }) => {
+              const root = createRoot(container);
+              root.render(<LabelDragPreview label={label} isGroup={isGroup} />);
+              return () => root.unmount();
+            },
+            nativeSetDragImage,
+          });
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => getCanDrop(source, label, isChild),
+        getData: ({ input, element }) => {
+          const data = { id: label?.id, parentId: label?.parent, isGroup, isChild };
+
+          const blockedStates: InstructionType[] = [];
+
+          // if is currently a child then block make-child instruction
+          if (isChild) blockedStates.push("make-child");
+          // if is currently is not a last child then block reorder-below instruction
+          if (!isLastChild) blockedStates.push("reorder-below");
+
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: isChild ? 1 : 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+            block: blockedStates,
+          });
+        },
+        onDrag: ({ self, source, location }) => {
+          const instruction = getInstructionFromPayload(self, source, location);
+          setInstruction(instruction);
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ source, location }) => {
+          setInstruction(undefined);
+
+          const dropTargets = location?.current?.dropTargets ?? [];
+
+          if (isChild || !dropTargets || dropTargets.length <= 0) return;
+
+          // if the label is dropped on both a child and it's parent at the same time then get only the child's drop target
+          const dropTarget =
+            dropTargets.length > 1 ? dropTargets.find((target) => target?.data?.isChild) : dropTargets[0];
+
+          let parentId: string | null = null,
+            dropAtEndOfList = false;
+
+          const dropTargetData = dropTarget?.data as TargetData;
+
+          if (!dropTarget || !dropTargetData) return;
+
+          // get possible instructions for the dropTarget
+          const instruction = getInstructionFromPayload(dropTarget, source, location);
+
+          // if instruction is make child the set parentId as current dropTarget Id or else set it as dropTarget's parentId
+          parentId = instruction === "make-child" ? dropTargetData.id : dropTargetData.parentId;
+          // if instruction is any other than make-child, i.e., reorder-above and reorder-below then set the droppedId as dropTarget's id
+          const droppedLabelId = instruction !== "make-child" ? dropTargetData.id : undefined;
+          // if instruction is to reorder-below that is enabled only for end of the last items in the list then dropAtEndOfList as true
+          if (instruction === "reorder-below") dropAtEndOfList = true;
+
+          const sourceData = source.data as TargetData;
+          if (sourceData.id) onDrop(sourceData.id, parentId, droppedLabelId, dropAtEndOfList);
+        },
+      })
+    );
+  }, [labelRef?.current, dragHandleRef?.current, label, isChild, isGroup, isLastChild, onDrop]);
+
+  const isMakeChild = instruction == "make-child";
+
+  return (
+    <div ref={labelRef}>
+      <DropIndicator classNames="my-1" isVisible={instruction === "reorder-above"} />
+      {children(isDragging, isMakeChild, dragHandleRef)}
+      {isLastChild && <DropIndicator classNames="my-1" isVisible={instruction === "reorder-below"} />}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/labels/label-utils.ts b/apps/web/core/components/labels/label-utils.ts
new file mode 100644
index 0000000..2d54021
--- /dev/null
+++ b/apps/web/core/components/labels/label-utils.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import type { IIssueLabel, IPragmaticPayloadLocation, InstructionType, TDropTarget } from "@plane/types";
+
+export type TargetData = {
+  id: string;
+  parentId: string | null;
+  isGroup: boolean;
+  isChild: boolean;
+};
+
+/**
+ * extracts the Payload and translates the instruction for the current dropTarget based on drag and drop payload
+ * @param dropTarget dropTarget for which the instruction is required
+ * @param source the dragging label data that is being dragged on the dropTarget
+ * @param location location includes the data of all the dropTargets the source is being dragged on
+ * @returns Instruction for dropTarget
+ */
+export const getInstructionFromPayload = (
+  dropTarget: TDropTarget,
+  source: TDropTarget,
+  location: IPragmaticPayloadLocation
+): InstructionType | undefined => {
+  const dropTargetData = dropTarget?.data as TargetData;
+  const sourceData = source?.data as TargetData;
+
+  const allDropTargets = location?.current?.dropTargets;
+
+  // if all the dropTargets are greater than 1 meaning the source is being dragged on a group and its child at the same time
+  // and also if the dropTarget in question is also a group then, it should be a child of the current Droptarget
+  if (allDropTargets?.length > 1 && dropTargetData?.isGroup) return "make-child";
+
+  if (!dropTargetData || !sourceData) return undefined;
+
+  let instruction = extractInstruction(dropTargetData)?.type;
+
+  // If the instruction is blocked then set an instruction based on if dropTarget it is a child or not
+  if (instruction === "instruction-blocked") {
+    instruction = dropTargetData.isChild ? "reorder-above" : "make-child";
+  }
+
+  // if source that is being dragged is a group. A group cannon be a child of any other label,
+  // hence if current instruction is to be a child of dropTarget then reorder-above instead
+  if (instruction === "make-child" && sourceData.isGroup) instruction = "reorder-above";
+
+  return instruction;
+};
+
+/**
+ * This provides a boolean to indicate if the label can be dropped onto the droptarget
+ * @param source
+ * @param label
+ * @param isCurrentChild if the dropTarget is a child
+ * @returns
+ */
+export const getCanDrop = (source: TDropTarget, label: IIssueLabel | undefined, isCurrentChild: boolean) => {
+  const sourceData = source?.data;
+
+  if (!sourceData) return false;
+
+  // a label cannot be dropped on to itself and it's parent cannon be dropped on the child
+  if (sourceData.id === label?.id || sourceData.id === label?.parent) return false;
+
+  // if current dropTarget is a child and the label being dropped is a group then don't enable drop
+  if (isCurrentChild && sourceData.isGroup) return false;
+
+  return true;
+};
diff --git a/apps/web/core/components/labels/project-setting-label-group.tsx b/apps/web/core/components/labels/project-setting-label-group.tsx
new file mode 100644
index 0000000..2fb466c
--- /dev/null
+++ b/apps/web/core/components/labels/project-setting-label-group.tsx
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, SetStateAction } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Disclosure, Transition } from "@headlessui/react";
+// plane imports
+import { ChevronDownOutline, DeleteOutline, EditOutline } from "@makeplane/propel/icons";
+import type { IIssueLabel } from "@plane/types";
+// components
+import type { TLabelOperationsCallbacks } from "./create-update-label-inline";
+import { CreateUpdateLabelInline } from "./create-update-label-inline";
+import type { ICustomMenuItem } from "./label-block/label-item-block";
+import { LabelItemBlock } from "./label-block/label-item-block";
+import { LabelDndHOC } from "./label-drag-n-drop-HOC";
+import { ProjectSettingLabelItem } from "./project-setting-label-item";
+
+type Props = {
+  label: IIssueLabel;
+  labelChildren: IIssueLabel[];
+  handleLabelDelete: (label: IIssueLabel) => void;
+  isUpdating: boolean;
+  setIsUpdating: Dispatch<SetStateAction<boolean>>;
+  isLastChild: boolean;
+  onDrop: (
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => void;
+  labelOperationsCallbacks: TLabelOperationsCallbacks;
+  isEditable?: boolean;
+};
+
+export const ProjectSettingLabelGroup = observer(function ProjectSettingLabelGroup(props: Props) {
+  const {
+    label,
+    labelChildren,
+    handleLabelDelete,
+    isUpdating,
+    setIsUpdating,
+    isLastChild,
+    onDrop,
+    isEditable = false,
+    labelOperationsCallbacks,
+  } = props;
+
+  // states
+  const [isEditLabelForm, setEditLabelForm] = useState(false);
+
+  const customMenuItems: ICustomMenuItem[] = [
+    {
+      CustomIcon: EditOutline,
+      onClick: () => {
+        setEditLabelForm(true);
+        setIsUpdating(true);
+      },
+      isVisible: true,
+      text: "Edit label",
+      key: "edit_label",
+    },
+    {
+      CustomIcon: DeleteOutline,
+      onClick: () => {
+        handleLabelDelete(label);
+      },
+      isVisible: true,
+      text: "Delete label",
+      key: "delete_label",
+    },
+  ];
+
+  return (
+    <LabelDndHOC label={label} isGroup isChild={false} isLastChild={isLastChild} onDrop={onDrop}>
+      {(isDragging, isDroppingInLabel, dragHandleRef) => (
+        <div
+          className={`rounded-sm ${isDroppingInLabel ? "border-[2px] border-accent-strong" : "border-[1.5px] border-transparent"}`}
+        >
+          <Disclosure
+            as="div"
+            className={`rounded-sm text-primary ${
+              !isDroppingInLabel ? "border-[0.5px] border-subtle" : ""
+            } ${isDragging ? "bg-layer-1" : "bg-surface-1"}`}
+            defaultOpen
+          >
+            {({ open }) => (
+              <>
+                <div className={`py-3 pr-3 pl-1 ${!isUpdating && "max-h-full overflow-y-hidden"}`}>
+                  <>
+                    <div className="relative flex cursor-pointer items-center justify-between gap-2">
+                      {isEditLabelForm ? (
+                        <CreateUpdateLabelInline
+                          labelForm={isEditLabelForm}
+                          setLabelForm={setEditLabelForm}
+                          isUpdating
+                          labelToUpdate={label}
+                          labelOperationsCallbacks={labelOperationsCallbacks}
+                          onClose={() => {
+                            setEditLabelForm(false);
+                            setIsUpdating(false);
+                          }}
+                        />
+                      ) : (
+                        <LabelItemBlock
+                          label={label}
+                          isDragging={isDragging}
+                          customMenuItems={customMenuItems}
+                          handleLabelDelete={handleLabelDelete}
+                          isLabelGroup
+                          dragHandleRef={dragHandleRef}
+                        />
+                      )}
+
+                      <Disclosure.Button>
+                        <span>
+                          <ChevronDownOutline
+                            className={`h-4 w-4 text-placeholder ${!open ? "rotate-90 transform" : ""}`}
+                          />
+                        </span>
+                      </Disclosure.Button>
+                    </div>
+                    <Transition
+                      as="div"
+                      show={open}
+                      enter="transition duration-100 ease-out"
+                      enterFrom="transform opacity-0"
+                      enterTo="transform opacity-100"
+                      leave="transition duration-75 ease-out"
+                      leaveFrom="transform opacity-100"
+                      leaveTo="transform opacity-0"
+                    >
+                      <Disclosure.Panel>
+                        <div className="ml-6">
+                          {labelChildren.map((child, index) => (
+                            <div key={child.id} className={`group flex w-full items-center text-13`}>
+                              <div className="w-full">
+                                <ProjectSettingLabelItem
+                                  label={child}
+                                  handleLabelDelete={() => handleLabelDelete(child)}
+                                  setIsUpdating={setIsUpdating}
+                                  isParentDragging={isDragging}
+                                  isChild
+                                  isLastChild={index === labelChildren.length - 1}
+                                  onDrop={onDrop}
+                                  isEditable={isEditable}
+                                  labelOperationsCallbacks={labelOperationsCallbacks}
+                                />
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </Disclosure.Panel>
+                    </Transition>
+                  </>
+                </div>
+              </>
+            )}
+          </Disclosure>
+        </div>
+      )}
+    </LabelDndHOC>
+  );
+});
diff --git a/apps/web/core/components/labels/project-setting-label-item.tsx b/apps/web/core/components/labels/project-setting-label-item.tsx
new file mode 100644
index 0000000..23169a6
--- /dev/null
+++ b/apps/web/core/components/labels/project-setting-label-item.tsx
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, SetStateAction } from "react";
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { CloseOutline, EditOutline } from "@makeplane/propel/icons";
+// types
+import type { IIssueLabel } from "@plane/types";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+// components
+import type { TLabelOperationsCallbacks } from "./create-update-label-inline";
+import { CreateUpdateLabelInline } from "./create-update-label-inline";
+import type { ICustomMenuItem } from "./label-block/label-item-block";
+import { LabelItemBlock } from "./label-block/label-item-block";
+import { LabelDndHOC } from "./label-drag-n-drop-HOC";
+
+type Props = {
+  label: IIssueLabel;
+  handleLabelDelete: (label: IIssueLabel) => void;
+  setIsUpdating: Dispatch<SetStateAction<boolean>>;
+  isParentDragging?: boolean;
+  isChild: boolean;
+  isLastChild: boolean;
+  onDrop: (
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => void;
+  labelOperationsCallbacks: TLabelOperationsCallbacks;
+  isEditable?: boolean;
+};
+
+export function ProjectSettingLabelItem(props: Props) {
+  const {
+    label,
+    setIsUpdating,
+    handleLabelDelete,
+    isChild,
+    isLastChild,
+    isParentDragging = false,
+    onDrop,
+    labelOperationsCallbacks,
+    isEditable = false,
+  } = props;
+  // states
+  const [isEditLabelForm, setEditLabelForm] = useState(false);
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { updateLabel } = useLabel();
+
+  const removeFromGroup = (label: IIssueLabel) => {
+    if (!workspaceSlug || !projectId) return;
+
+    updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
+      parent: null,
+    });
+  };
+
+  const customMenuItems: ICustomMenuItem[] = [
+    {
+      CustomIcon: CloseOutline,
+      onClick: removeFromGroup,
+      isVisible: !!label.parent,
+      text: "Remove from group",
+      key: "remove_from_group",
+    },
+    {
+      CustomIcon: EditOutline,
+      onClick: () => {
+        setEditLabelForm(true);
+        setIsUpdating(true);
+      },
+      isVisible: true,
+      text: "Edit label",
+      key: "edit_label",
+    },
+  ];
+
+  return (
+    <LabelDndHOC label={label} isGroup={false} isChild={isChild} isLastChild={isLastChild} onDrop={onDrop}>
+      {(isDragging, isDroppingInLabel, dragHandleRef) => (
+        <div
+          className={`rounded-sm ${isDroppingInLabel ? "border-[2px] border-accent-strong" : "border-[1.5px] border-transparent"}`}
+        >
+          <div
+            className={`group relative flex items-center justify-between gap-2 space-y-3 rounded-sm px-1 py-3 ${
+              isDroppingInLabel ? "" : "border-[0.5px] border-subtle"
+            } ${isDragging || isParentDragging ? "bg-layer-1" : "bg-surface-1"}`}
+          >
+            {isEditLabelForm ? (
+              <CreateUpdateLabelInline
+                labelForm={isEditLabelForm}
+                setLabelForm={setEditLabelForm}
+                isUpdating
+                labelToUpdate={label}
+                labelOperationsCallbacks={labelOperationsCallbacks}
+                onClose={() => {
+                  setEditLabelForm(false);
+                  setIsUpdating(false);
+                }}
+              />
+            ) : (
+              <LabelItemBlock
+                label={label}
+                isDragging={isDragging}
+                customMenuItems={customMenuItems}
+                handleLabelDelete={handleLabelDelete}
+                dragHandleRef={dragHandleRef}
+                disabled={!isEditable}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </LabelDndHOC>
+  );
+}
diff --git a/apps/web/core/components/labels/project-setting-label-list.tsx b/apps/web/core/components/labels/project-setting-label-list.tsx
new file mode 100644
index 0000000..6bb5069
--- /dev/null
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -0,0 +1,174 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import type { IIssueLabel } from "@plane/types";
+import { Loader } from "@plane/ui";
+import type { TLabelOperationsCallbacks } from "@/components/labels";
+import {
+  CreateUpdateLabelInline,
+  DeleteLabelModal,
+  ProjectSettingLabelGroup,
+  ProjectSettingLabelItem,
+} from "@/components/labels";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { SettingsHeading } from "../settings/heading";
+
+export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelList() {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // refs
+  const scrollToRef = useRef<HTMLDivElement>(null);
+  // states
+  const [showLabelForm, setLabelForm] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabel | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { projectLabels, updateLabelPosition, projectLabelsTree, createLabel, updateLabel } = useLabel();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+  const labelOperationsCallbacks: TLabelOperationsCallbacks = {
+    createLabel: (data: Partial<IIssueLabel>) => createLabel(workspaceSlug?.toString(), projectId?.toString(), data),
+    updateLabel: (labelId: string, data: Partial<IIssueLabel>) =>
+      updateLabel(workspaceSlug?.toString(), projectId?.toString(), labelId, data),
+  };
+
+  const newLabel = () => {
+    setIsUpdating(false);
+    setLabelForm(true);
+  };
+
+  const onDrop = (
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => {
+    if (workspaceSlug && projectId) {
+      updateLabelPosition(
+        workspaceSlug?.toString(),
+        projectId?.toString(),
+        draggingLabelId,
+        droppedParentId,
+        droppedLabelId,
+        dropAtEndOfList
+      );
+      return;
+    }
+  };
+
+  return (
+    <>
+      <DeleteLabelModal
+        isOpen={!!selectDeleteLabel}
+        data={selectDeleteLabel ?? null}
+        onClose={() => setSelectDeleteLabel(null)}
+      />
+      <SettingsHeading
+        title={t("project_settings.labels.heading")}
+        description={t("project_settings.labels.description")}
+        control={
+          isEditable && (
+            <Button variant="primary" size="lg" onClick={newLabel}>
+              {t("common.add_label")}
+            </Button>
+          )
+        }
+      />
+      <div className="mt-6 w-full">
+        {showLabelForm && (
+          <div className="my-2 w-full rounded-sm border border-subtle px-3.5 py-2">
+            <CreateUpdateLabelInline
+              labelForm={showLabelForm}
+              setLabelForm={setLabelForm}
+              isUpdating={isUpdating}
+              labelOperationsCallbacks={labelOperationsCallbacks}
+              ref={scrollToRef}
+              onClose={() => {
+                setLabelForm(false);
+                setIsUpdating(false);
+              }}
+            />
+          </div>
+        )}
+        {projectLabels ? (
+          projectLabels.length === 0 && !showLabelForm ? (
+            <EmptyStateCompact
+              assetKey="label"
+              assetClassName="size-20"
+              title={t("settings_empty_state.labels.title")}
+              description={t("settings_empty_state.labels.description")}
+              actions={[
+                {
+                  label: t("settings_empty_state.labels.cta_primary"),
+                  onClick: () => {
+                    newLabel();
+                  },
+                },
+              ]}
+              align="start"
+              rootClassName="py-20"
+            />
+          ) : (
+            projectLabelsTree?.map((label, index) => {
+              if (label.children && label.children.length) {
+                return (
+                  <ProjectSettingLabelGroup
+                    key={label.id}
+                    label={label}
+                    labelChildren={label.children || []}
+                    handleLabelDelete={(label: IIssueLabel) => setSelectDeleteLabel(label)}
+                    isUpdating={isUpdating}
+                    setIsUpdating={setIsUpdating}
+                    isLastChild={index === projectLabelsTree.length - 1}
+                    onDrop={onDrop}
+                    isEditable={isEditable}
+                    labelOperationsCallbacks={labelOperationsCallbacks}
+                  />
+                );
+              }
+              return (
+                <ProjectSettingLabelItem
+                  label={label}
+                  key={label.id}
+                  setIsUpdating={setIsUpdating}
+                  handleLabelDelete={(label) => setSelectDeleteLabel(label)}
+                  isChild={false}
+                  isLastChild={index === projectLabelsTree.length - 1}
+                  onDrop={onDrop}
+                  isEditable={isEditable}
+                  labelOperationsCallbacks={labelOperationsCallbacks}
+                />
+              );
+            })
+          )
+        ) : (
+          !showLabelForm && (
+            <Loader className="space-y-5">
+              <Loader.Item height="42px" />
+              <Loader.Item height="42px" />
+              <Loader.Item height="42px" />
+              <Loader.Item height="42px" />
+            </Loader>
+          )
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/license/index.ts b/apps/web/core/components/license/index.ts
new file mode 100644
index 0000000..dd65a9e
--- /dev/null
+++ b/apps/web/core/components/license/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./modal";
diff --git a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
new file mode 100644
index 0000000..4c2ecf1
--- /dev/null
+++ b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, Fragment } from "react";
+import { observer } from "mobx-react";
+import { TickCircleOutline } from "@makeplane/propel/icons";
+import { Tab } from "@headlessui/react";
+// plane imports
+// helpers
+import type { EProductSubscriptionEnum, TBillingFrequency, TSubscriptionPrice } from "@plane/types";
+import { cn, getBaseSubscriptionName, getSubscriptionName } from "@plane/utils";
+
+export type TBasePaidPlanCardProps = {
+  planVariant: EProductSubscriptionEnum;
+  features: string[];
+  prices: TSubscriptionPrice[];
+  upgradeLoaderType: Omit<EProductSubscriptionEnum, "FREE"> | undefined;
+  verticalFeatureList?: boolean;
+  extraFeatures?: string | React.ReactNode;
+  renderPriceContent: (price: TSubscriptionPrice) => React.ReactNode;
+  renderActionButton: (price: TSubscriptionPrice) => React.ReactNode;
+};
+
+export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBasePaidPlanCardProps) {
+  const {
+    planVariant,
+    features,
+    prices,
+    verticalFeatureList = false,
+    extraFeatures,
+    renderPriceContent,
+    renderActionButton,
+  } = props;
+  // states
+  const [selectedPlan, setSelectedPlan] = useState<TBillingFrequency>("month");
+  const basePlan = getBaseSubscriptionName(planVariant);
+  // Plane details
+  const planeName = getSubscriptionName(planVariant);
+
+  return (
+    <div className="flex flex-col rounded-xl border border-subtle bg-layer-2 px-3 py-6">
+      <Tab.Group as={Fragment} selectedIndex={selectedPlan === "month" ? 0 : 1}>
+        <div className="flex h-9 w-full justify-center">
+          <Tab.List className="flex w-60 space-x-1 rounded-md bg-layer-3 p-0.5">
+            {prices.map((price: TSubscriptionPrice) => (
+              <Tab
+                key={price.key}
+                className={({ selected }) =>
+                  cn(
+                    "w-full rounded-sm py-1 text-caption-md-medium leading-5",
+                    selected
+                      ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+                      : "text-tertiary hover:text-secondary"
+                  )
+                }
+                onClick={() => setSelectedPlan(price.recurring)}
+              >
+                {renderPriceContent(price)}
+              </Tab>
+            ))}
+          </Tab.List>
+        </div>
+        <Tab.Panels>
+          {prices.map((price: TSubscriptionPrice) => (
+            <Tab.Panel key={price.key}>
+              <div className="pt-6 text-center">
+                <div className="text-h4-medium">Plane {planeName}</div>
+                {renderActionButton(price)}
+              </div>
+              <div className="px-2 pt-6 pb-2">
+                <div className="p-2 text-caption-md-semibold">{`Everything in ${basePlan} +`}</div>
+                <ul className="grid grid-cols-12 gap-x-4">
+                  {features.map((feature) => (
+                    <li
+                      key={feature}
+                      className={cn("relative col-span-12 flex rounded-md p-2", {
+                        "sm:col-span-6": !verticalFeatureList,
+                      })}
+                    >
+                      <p className="line-clamp-1 flex w-full items-center text-caption-md-medium leading-5">
+                        <TickCircleOutline className="mr-2 size-4 flex-shrink-0 text-tertiary" />
+                        <span className="truncate text-secondary">{feature}</span>
+                      </p>
+                    </li>
+                  ))}
+                </ul>
+                {extraFeatures && <div>{extraFeatures}</div>}
+              </div>
+            </Tab.Panel>
+          ))}
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/license/modal/card/checkout-button.tsx b/apps/web/core/components/license/modal/card/checkout-button.tsx
new file mode 100644
index 0000000..01de02c
--- /dev/null
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Button } from "@plane/propel/button";
+import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
+import { Loader } from "@plane/ui";
+// local imports
+import { DiscountInfo } from "./discount-info";
+
+export type TCheckoutParams = {
+  planVariant: EProductSubscriptionEnum;
+  productId: string;
+  priceId: string;
+};
+
+type Props = {
+  planeName: string;
+  planVariant: EProductSubscriptionEnum;
+  isLoading?: boolean;
+  product: IPaymentProduct | undefined;
+  price: TSubscriptionPrice;
+  upgradeCTA?: string;
+  upgradeLoaderType: Omit<EProductSubscriptionEnum, "FREE"> | undefined;
+  renderTrialButton?: (props: { productId: string | undefined; priceId: string | undefined }) => React.ReactNode;
+  handleCheckout: (params: TCheckoutParams) => void;
+  isSelfHosted: boolean;
+  isTrialAllowed: boolean;
+};
+
+export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Props) {
+  const {
+    planeName,
+    planVariant,
+    isLoading,
+    product,
+    price,
+    upgradeCTA,
+    upgradeLoaderType,
+    renderTrialButton,
+    handleCheckout,
+    isSelfHosted,
+    isTrialAllowed,
+  } = props;
+
+  return (
+    <>
+      <div className="pb-4 text-center">
+        <div className="h-9 text-20 font-semibold">
+          {isLoading ? (
+            <Loader className="flex flex-col items-center justify-center">
+              <Loader.Item height="36px" width="4rem" />
+            </Loader>
+          ) : (
+            <DiscountInfo
+              currency={price.currency}
+              frequency={price.recurring}
+              price={price.price}
+              subscriptionType={planVariant}
+              className="mr-1.5"
+            />
+          )}
+        </div>
+        <div className="text-caption-md-medium text-tertiary">per user per month</div>
+      </div>
+      {isLoading ? (
+        <Loader className="flex flex-col items-center justify-center">
+          <Loader.Item height="38px" width="14rem" />
+        </Loader>
+      ) : (
+        <div className="flex w-full flex-col items-center justify-center space-y-4">
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-56"
+            onClick={() => {
+              if (product && price.id) {
+                handleCheckout({
+                  planVariant,
+                  productId: product.id,
+                  priceId: price.id,
+                });
+              }
+            }}
+            disabled={!!upgradeLoaderType}
+          >
+            {upgradeLoaderType === planVariant ? "Redirecting to Stripe" : (upgradeCTA ?? `Upgrade to ${planeName}`)}
+          </Button>
+          {isTrialAllowed && !isSelfHosted && (
+            <div className="mt-1 h-3">
+              {renderTrialButton &&
+                renderTrialButton({
+                  productId: product?.id,
+                  priceId: price.id,
+                })}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/license/modal/card/discount-info.tsx b/apps/web/core/components/license/modal/card/discount-info.tsx
new file mode 100644
index 0000000..7f25a2a
--- /dev/null
+++ b/apps/web/core/components/license/modal/card/discount-info.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+// plane imports
+import type { TBillingFrequency } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+import { cn } from "@plane/utils";
+
+import ScribbleBlack from "@/app/assets/scribble/scribble-black.svg?url";
+import ScribbleWhite from "@/app/assets/scribble/scribble-white.svg?url";
+
+type TDiscountInfoProps = {
+  className?: string;
+  currency: string;
+  frequency: TBillingFrequency;
+  price: number;
+  subscriptionType: EProductSubscriptionEnum;
+};
+
+const PLANS_WITH_DISCOUNT = [EProductSubscriptionEnum.PRO];
+
+const getActualPrice = (frequency: TBillingFrequency, subscriptionType: EProductSubscriptionEnum): number | null => {
+  switch (subscriptionType) {
+    case EProductSubscriptionEnum.PRO:
+      return frequency === "month" ? 10 : 8;
+    default:
+      return null;
+  }
+};
+
+export function DiscountInfo({ className, currency, frequency, price, subscriptionType }: TDiscountInfoProps) {
+  const { resolvedTheme } = useTheme();
+  // derived values
+  const actualPrice = getActualPrice(frequency, subscriptionType);
+
+  if (!PLANS_WITH_DISCOUNT.includes(subscriptionType)) {
+    return (
+      <>
+        {currency}
+        {price}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {actualPrice != price && (
+        <span className={cn("relative", className)}>
+          <img
+            src={resolvedTheme === "dark" ? ScribbleWhite : ScribbleBlack}
+            alt="scribble"
+            className="absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2 scale-x-125"
+          />
+          {currency}
+          {actualPrice}
+        </span>
+      )}
+      {currency}
+      {price}
+    </>
+  );
+}
diff --git a/apps/web/core/components/license/modal/card/free-plan.tsx b/apps/web/core/components/license/modal/card/free-plan.tsx
new file mode 100644
index 0000000..380e214
--- /dev/null
+++ b/apps/web/core/components/license/modal/card/free-plan.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { CloseCircleOutline } from "@makeplane/propel/icons";
+// plane constants
+import { FREE_PLAN_UPGRADE_FEATURES } from "@plane/constants";
+// helpers
+import { cn } from "@plane/utils";
+
+type FreePlanCardProps = {
+  isOnFreePlan: boolean;
+};
+
+export const FreePlanCard = observer(function FreePlanCard(props: FreePlanCardProps) {
+  const { isOnFreePlan } = props;
+  return (
+    <div className="rounded-xl bg-layer-1 px-2 py-4">
+      {isOnFreePlan && (
+        <div className="px-3 py-2">
+          <span className="rounded-sm border border-subtle-1 bg-layer-2 px-2 py-1 text-caption-md-medium text-tertiary">
+            Your plan
+          </span>
+        </div>
+      )}
+      <div className="px-4 py-2 font-semibold">
+        <div className="text-20">Free</div>
+        <div className="text-caption-md text-tertiary">$0 per user per month</div>
+      </div>
+      <div className="px-2 pt-2 pb-3">
+        <ul className="grid w-full grid-cols-12 gap-x-4">
+          {FREE_PLAN_UPGRADE_FEATURES.map((feature) => (
+            <li key={feature} className={cn("relative col-span-12 flex rounded-md p-2")}>
+              <p className="flex w-full items-center text-caption-md-medium leading-5">
+                <CloseCircleOutline className="mr-2 size-4 flex-shrink-0 text-danger-secondary" />
+                <span className="truncate text-secondary">{feature}</span>
+              </p>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/license/modal/card/index.ts b/apps/web/core/components/license/modal/card/index.ts
new file mode 100644
index 0000000..3ce3953
--- /dev/null
+++ b/apps/web/core/components/license/modal/card/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./base-paid-plan-card";
+export * from "./free-plan";
+export * from "./talk-to-sales";
+export * from "./plan-upgrade";
diff --git a/apps/web/core/components/license/modal/card/plan-upgrade.tsx b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
new file mode 100644
index 0000000..e501b3b
--- /dev/null
+++ b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { TALK_TO_SALES_URL } from "@plane/constants";
+import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
+import { calculateYearlyDiscount, getSubscriptionName, getSubscriptionPriceDetails } from "@plane/utils";
+// components
+import { BasePaidPlanCard, TalkToSalesCard } from "@/components/license";
+// local components
+import type { TCheckoutParams } from "./checkout-button";
+import { PlanCheckoutButton } from "./checkout-button";
+
+export type PlanUpgradeCardProps = {
+  planVariant: EProductSubscriptionEnum;
+  isLoading?: boolean;
+  product: IPaymentProduct | undefined;
+  features: string[];
+  upgradeCTA?: string;
+  upgradeLoaderType?: Omit<EProductSubscriptionEnum, "FREE"> | undefined;
+  verticalFeatureList?: boolean;
+  extraFeatures?: string | React.ReactNode;
+  renderTrialButton?: (props: { productId: string | undefined; priceId: string | undefined }) => React.ReactNode;
+  handleCheckout: (params: TCheckoutParams) => void;
+  isSelfHosted: boolean;
+  isTrialAllowed: boolean;
+};
+
+export const PlanUpgradeCard = observer(function PlanUpgradeCard(props: PlanUpgradeCardProps) {
+  const {
+    planVariant,
+    features,
+    isLoading,
+    product,
+    upgradeCTA,
+    verticalFeatureList = false,
+    extraFeatures,
+    upgradeLoaderType,
+    renderTrialButton,
+    handleCheckout,
+    isSelfHosted,
+    isTrialAllowed,
+  } = props;
+  // price details
+  const planeName = getSubscriptionName(planVariant);
+  const { monthlyPriceDetails, yearlyPriceDetails } = getSubscriptionPriceDetails(product);
+  const yearlyDiscount = calculateYearlyDiscount(monthlyPriceDetails.price, yearlyPriceDetails.price);
+  const prices = [monthlyPriceDetails, yearlyPriceDetails];
+
+  if (!product?.is_active) {
+    return (
+      <TalkToSalesCard
+        planVariant={planVariant}
+        href={TALK_TO_SALES_URL}
+        isLoading={isLoading}
+        features={features}
+        product={product}
+        prices={prices}
+        upgradeLoaderType={upgradeLoaderType}
+        verticalFeatureList={verticalFeatureList}
+        extraFeatures={extraFeatures}
+        isSelfHosted={isSelfHosted}
+        isTrialAllowed={isTrialAllowed}
+        renderTrialButton={renderTrialButton}
+      />
+    );
+  }
+
+  const renderPriceContent = (price: TSubscriptionPrice) => (
+    <>
+      {price.recurring === "month" && "Monthly"}
+      {price.recurring === "year" && (
+        <>
+          Yearly
+          {yearlyDiscount > 0 && (
+            <span className="text-caption-sm ml-1 rounded-full bg-accent-primary px-1.5 py-0.5 text-on-color">
+              -{yearlyDiscount}%
+            </span>
+          )}
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <BasePaidPlanCard
+      planVariant={planVariant}
+      features={features}
+      prices={prices}
+      upgradeLoaderType={upgradeLoaderType}
+      verticalFeatureList={verticalFeatureList}
+      extraFeatures={extraFeatures}
+      renderPriceContent={renderPriceContent}
+      renderActionButton={(price) => (
+        <PlanCheckoutButton
+          planeName={planeName}
+          planVariant={planVariant}
+          isLoading={isLoading}
+          product={product}
+          price={price}
+          upgradeCTA={upgradeCTA}
+          upgradeLoaderType={upgradeLoaderType}
+          renderTrialButton={renderTrialButton}
+          handleCheckout={handleCheckout}
+          isSelfHosted={isSelfHosted}
+          isTrialAllowed={isTrialAllowed}
+        />
+      )}
+    />
+  );
+});
diff --git a/apps/web/core/components/license/modal/card/talk-to-sales.tsx b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
new file mode 100644
index 0000000..c12ee70
--- /dev/null
+++ b/apps/web/core/components/license/modal/card/talk-to-sales.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// types
+// plane imports
+import { getButtonStyling } from "@plane/propel/button";
+import type { EProductSubscriptionEnum, IPaymentProduct, TSubscriptionPrice } from "@plane/types";
+import { Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+// local imports
+import { BasePaidPlanCard } from "./base-paid-plan-card";
+
+export type TalkToSalesCardProps = {
+  planVariant: EProductSubscriptionEnum;
+  href: string;
+  isLoading?: boolean;
+  features: string[];
+  product: IPaymentProduct | undefined;
+  prices: TSubscriptionPrice[];
+  upgradeLoaderType: Omit<EProductSubscriptionEnum, "FREE"> | undefined;
+  verticalFeatureList?: boolean;
+  extraFeatures?: string | React.ReactNode;
+  isSelfHosted: boolean;
+  isTrialAllowed: boolean;
+  renderTrialButton?: (props: { productId: string | undefined; priceId: string | undefined }) => React.ReactNode;
+};
+
+export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSalesCardProps) {
+  const {
+    planVariant,
+    href,
+    features,
+    product,
+    prices,
+    isLoading,
+    verticalFeatureList = false,
+    extraFeatures,
+    upgradeLoaderType,
+    isSelfHosted,
+    isTrialAllowed,
+    renderTrialButton,
+  } = props;
+
+  const renderPriceContent = (price: TSubscriptionPrice) => (
+    <>
+      {price.recurring === "month" && "Monthly"}
+      {price.recurring === "year" && "Yearly"}
+    </>
+  );
+
+  const renderActionButton = (price: TSubscriptionPrice) => (
+    <>
+      <div className="pb-4 text-center">
+        <div className="flex h-9 items-center justify-center text-20 font-semibold">
+          {isLoading ? (
+            <Loader className="flex flex-col items-center justify-center">
+              <Loader.Item height="36px" width="4rem" />
+            </Loader>
+          ) : (
+            <>Quote on request</>
+          )}
+        </div>
+        <div className="text-caption-md-medium text-tertiary">per user per month</div>
+      </div>
+      {isLoading ? (
+        <Loader className="flex flex-col items-center justify-center">
+          <Loader.Item height="38px" width="14rem" />
+        </Loader>
+      ) : (
+        <div className="flex w-full flex-col items-center justify-center">
+          <a href={href} target="_blank" className={cn(getButtonStyling("primary", "lg"), "w-56")} rel="noreferrer">
+            Talk to Sales
+          </a>
+          {isTrialAllowed && !isSelfHosted && (
+            <div className="mt-4 h-4">
+              {renderTrialButton &&
+                renderTrialButton({
+                  productId: product?.id,
+                  priceId: price.id,
+                })}
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+
+  return (
+    <BasePaidPlanCard
+      planVariant={planVariant}
+      features={features}
+      prices={prices}
+      upgradeLoaderType={upgradeLoaderType}
+      verticalFeatureList={verticalFeatureList}
+      extraFeatures={extraFeatures}
+      renderPriceContent={renderPriceContent}
+      renderActionButton={renderActionButton}
+    />
+  );
+});
diff --git a/apps/web/core/components/license/modal/index.ts b/apps/web/core/components/license/modal/index.ts
new file mode 100644
index 0000000..4260f85
--- /dev/null
+++ b/apps/web/core/components/license/modal/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./card";
diff --git a/apps/web/core/components/license/modal/upgrade-modal.tsx b/apps/web/core/components/license/modal/upgrade-modal.tsx
new file mode 100644
index 0000000..236d282
--- /dev/null
+++ b/apps/web/core/components/license/modal/upgrade-modal.tsx
@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import {
+  BUSINESS_PLAN_FEATURES,
+  ENTERPRISE_PLAN_FEATURES,
+  PLANE_COMMUNITY_PRODUCTS,
+  PRO_PLAN_FEATURES,
+  SUBSCRIPTION_REDIRECTION_URLS,
+  SUBSCRIPTION_WEBPAGE_URLS,
+  TALK_TO_SALES_URL,
+} from "@plane/constants";
+import { EProductSubscriptionEnum } from "@plane/types";
+import { EModalWidth, ModalCore } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { FreePlanCard, PlanUpgradeCard } from "@/components/license";
+import type { TCheckoutParams } from "@/components/license/modal/card/checkout-button";
+
+// Constants
+const COMMON_CARD_CLASSNAME = "flex flex-col w-full h-full justify-end col-span-12 sm:col-span-6 xl:col-span-3";
+const COMMON_EXTRA_FEATURES_CLASSNAME = "pt-2 text-center text-caption-md-medium text-accent-primary hover:underline";
+
+export type PaidPlanUpgradeModalProps = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const PaidPlanUpgradeModal = observer(function PaidPlanUpgradeModal(props: PaidPlanUpgradeModalProps) {
+  const { isOpen, handleClose } = props;
+  // derived values
+  const isSelfHosted = true;
+  const isTrialAllowed = false;
+
+  const handleRedirection = ({ planVariant, priceId }: TCheckoutParams) => {
+    // Get the product and price using plane community constants
+    const product = PLANE_COMMUNITY_PRODUCTS[planVariant];
+    // oxlint-disable-next-line no-shadow
+    const price = product.prices.find((price) => price.id === priceId);
+    const frequency = price?.recurring ?? "year";
+    // Redirect to the appropriate URL
+    const redirectUrl = SUBSCRIPTION_REDIRECTION_URLS[planVariant][frequency] ?? TALK_TO_SALES_URL;
+    window.open(redirectUrl, "_blank");
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.VIIXL} className="rounded-2xl">
+      <div className="max-h-[90vh] overflow-auto p-10">
+        <div className="grid h-full grid-cols-12 gap-6">
+          {/* Free Plan Section */}
+          <div className={cn(COMMON_CARD_CLASSNAME)}>
+            <div className="flex text-24 leading-8 font-bold">Upgrade to a paid plan and unlock missing features.</div>
+            <div className="mt-4 mb-2">
+              <p className="mb-4 pr-8 text-13 text-primary">
+                Dashboards, Workflows, Approvals, Time Management, and other superpowers are just a click away. Upgrade
+                today to unlock features your teams need yesterday.
+              </p>
+            </div>
+
+            {/* Free plan details */}
+            <FreePlanCard isOnFreePlan />
+          </div>
+
+          {/* Pro plan */}
+          <div className={cn(COMMON_CARD_CLASSNAME)}>
+            <PlanUpgradeCard
+              planVariant={EProductSubscriptionEnum.PRO}
+              product={PLANE_COMMUNITY_PRODUCTS[EProductSubscriptionEnum.PRO]}
+              features={PRO_PLAN_FEATURES}
+              verticalFeatureList
+              extraFeatures={
+                <p className={COMMON_EXTRA_FEATURES_CLASSNAME}>
+                  <a href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.PRO]} target="_blank" rel="noreferrer">
+                    See full features list
+                  </a>
+                </p>
+              }
+              handleCheckout={handleRedirection}
+              isSelfHosted={!!isSelfHosted}
+              isTrialAllowed={!!isTrialAllowed}
+            />
+          </div>
+          <div className={cn(COMMON_CARD_CLASSNAME)}>
+            <PlanUpgradeCard
+              planVariant={EProductSubscriptionEnum.BUSINESS}
+              product={PLANE_COMMUNITY_PRODUCTS[EProductSubscriptionEnum.BUSINESS]}
+              features={BUSINESS_PLAN_FEATURES}
+              verticalFeatureList
+              extraFeatures={
+                <p className={COMMON_EXTRA_FEATURES_CLASSNAME}>
+                  <a
+                    href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.BUSINESS]}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    See full features list
+                  </a>
+                </p>
+              }
+              handleCheckout={handleRedirection}
+              isSelfHosted={!!isSelfHosted}
+              isTrialAllowed={!!isTrialAllowed}
+            />
+          </div>
+          <div className={cn(COMMON_CARD_CLASSNAME)}>
+            <PlanUpgradeCard
+              planVariant={EProductSubscriptionEnum.ENTERPRISE}
+              product={PLANE_COMMUNITY_PRODUCTS[EProductSubscriptionEnum.ENTERPRISE]}
+              features={ENTERPRISE_PLAN_FEATURES}
+              verticalFeatureList
+              extraFeatures={
+                <p className={COMMON_EXTRA_FEATURES_CLASSNAME}>
+                  <a
+                    href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.ENTERPRISE]}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    See full features list
+                  </a>
+                </p>
+              }
+              handleCheckout={handleRedirection}
+              isSelfHosted={!!isSelfHosted}
+              isTrialAllowed={!!isTrialAllowed}
+            />
+          </div>
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/modals/project-level.tsx b/apps/web/core/components/modals/project-level.tsx
new file mode 100644
index 0000000..5555104
--- /dev/null
+++ b/apps/web/core/components/modals/project-level.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { CycleCreateUpdateModal } from "@/components/cycles/modal";
+import { CreateUpdateModuleModal } from "@/components/modules";
+import { CreatePageModal } from "@/components/pages/modals/create-page-modal";
+import { CreateUpdateProjectViewModal } from "@/components/views/modal";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+// plane web hooks
+import { EPageStoreType } from "@/hooks/store";
+
+export type TProjectLevelModalsProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectLevelModals = observer(function ProjectLevelModals(props: TProjectLevelModalsProps) {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const {
+    isCreateCycleModalOpen,
+    toggleCreateCycleModal,
+    isCreateModuleModalOpen,
+    toggleCreateModuleModal,
+    isCreateViewModalOpen,
+    toggleCreateViewModal,
+    createPageModal,
+    toggleCreatePageModal,
+  } = useCommandPalette();
+
+  return (
+    <>
+      <CycleCreateUpdateModal
+        isOpen={isCreateCycleModalOpen}
+        handleClose={() => toggleCreateCycleModal(false)}
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+      />
+      <CreateUpdateModuleModal
+        isOpen={isCreateModuleModalOpen}
+        onClose={() => toggleCreateModuleModal(false)}
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+      />
+      <CreateUpdateProjectViewModal
+        isOpen={isCreateViewModalOpen}
+        onClose={() => toggleCreateViewModal(false)}
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+      />
+      <CreatePageModal
+        workspaceSlug={workspaceSlug.toString()}
+        projectId={projectId.toString()}
+        isModalOpen={createPageModal.isOpen}
+        pageAccess={createPageModal.pageAccess}
+        handleModalClose={() => toggleCreatePageModal({ isOpen: false })}
+        redirectionEnabled
+        storeType={EPageStoreType.PROJECT}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/modals/work-item-level.tsx b/apps/web/core/components/modals/work-item-level.tsx
new file mode 100644
index 0000000..bf6bd4e
--- /dev/null
+++ b/apps/web/core/components/modals/work-item-level.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { TIssue } from "@plane/types";
+import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
+// components
+import { BulkDeleteIssuesModal } from "@/components/core/modals/bulk-delete-issues-modal";
+import { DeleteIssueModal } from "@/components/issues/delete-issue-modal";
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useIssuesActions } from "@/hooks/use-issues-actions";
+
+export type TWorkItemLevelModalsProps = {
+  workItemIdentifier: string | undefined;
+};
+
+export const WorkItemLevelModals = observer(function WorkItemLevelModals(props: TWorkItemLevelModalsProps) {
+  const { workItemIdentifier } = props;
+  // router
+  const { workspaceSlug, cycleId, moduleId } = useParams();
+  const router = useAppRouter();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+  // derived values
+  const workItemId = workItemIdentifier ? getIssueIdByIdentifier(workItemIdentifier) : undefined;
+  const workItemDetails = workItemId ? getIssueById(workItemId) : undefined;
+
+  const { removeIssue: removeEpic } = useIssuesActions(EIssuesStoreType.EPIC);
+  const { removeIssue: removeWorkItem } = useIssuesActions(EIssuesStoreType.PROJECT);
+
+  const {
+    isCreateIssueModalOpen,
+    toggleCreateIssueModal,
+    isDeleteIssueModalOpen,
+    toggleDeleteIssueModal,
+    isBulkDeleteIssueModalOpen,
+    toggleBulkDeleteIssueModal,
+    createWorkItemAllowedProjectIds,
+  } = useCommandPalette();
+  // derived values
+  const { fetchSubIssues: fetchSubWorkItems } = useIssueDetail();
+  const { fetchSubIssues: fetchEpicSubWorkItems } = useIssueDetail(EIssueServiceType.EPICS);
+
+  // oxlint-disable-next-line no-shadow
+  const handleDeleteIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const isEpic = workItemDetails?.is_epic;
+      const deleteAction = isEpic ? removeEpic : removeWorkItem;
+      const redirectPath = `/${workspaceSlug}/projects/${projectId}/${isEpic ? "epics" : "issues"}`;
+
+      await deleteAction(projectId, issueId);
+      router.push(redirectPath);
+    } catch (error) {
+      console.error("Failed to delete issue:", error);
+    }
+  };
+
+  const handleCreateIssueSubmit = async (newIssue: TIssue) => {
+    if (!workspaceSlug || !newIssue.project_id || !newIssue.id || newIssue.parent_id !== workItemDetails?.id) return;
+
+    const fetchAction = workItemDetails?.is_epic ? fetchEpicSubWorkItems : fetchSubWorkItems;
+    await fetchAction(workspaceSlug?.toString(), newIssue.project_id, workItemDetails.id);
+  };
+
+  const getCreateIssueModalData = () => {
+    if (cycleId) return { cycle_id: cycleId.toString() };
+    if (moduleId) return { module_ids: [moduleId.toString()] };
+    return undefined;
+  };
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={isCreateIssueModalOpen}
+        onClose={() => toggleCreateIssueModal(false)}
+        data={getCreateIssueModalData()}
+        onSubmit={handleCreateIssueSubmit}
+        allowedProjectIds={createWorkItemAllowedProjectIds}
+      />
+      {workspaceSlug && workItemId && workItemDetails && workItemDetails.project_id && (
+        <DeleteIssueModal
+          handleClose={() => toggleDeleteIssueModal(false)}
+          isOpen={isDeleteIssueModalOpen}
+          data={workItemDetails}
+          onSubmit={() =>
+            handleDeleteIssue(workspaceSlug.toString(), workItemDetails.project_id!, workItemId?.toString())
+          }
+          isEpic={workItemDetails?.is_epic}
+        />
+      )}
+      <BulkDeleteIssuesModal
+        isOpen={isBulkDeleteIssueModalOpen}
+        onClose={() => toggleBulkDeleteIssueModal(false)}
+        user={currentUser}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/modals/workspace-level.tsx b/apps/web/core/components/modals/workspace-level.tsx
new file mode 100644
index 0000000..e07f5d1
--- /dev/null
+++ b/apps/web/core/components/modals/workspace-level.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { CreateProjectModal } from "@/components/project/create-project-modal";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+
+export type TWorkspaceLevelModalsProps = {
+  workspaceSlug: string;
+};
+
+export const WorkspaceLevelModals = observer(function WorkspaceLevelModals(props: TWorkspaceLevelModalsProps) {
+  const { workspaceSlug } = props;
+  // store hooks
+  const { isCreateProjectModalOpen, toggleCreateProjectModal } = useCommandPalette();
+
+  return (
+    <>
+      <CreateProjectModal
+        isOpen={isCreateProjectModalOpen}
+        onClose={() => toggleCreateProjectModal(false)}
+        workspaceSlug={workspaceSlug.toString()}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/analytics-sidebar/index.ts b/apps/web/core/components/modules/analytics-sidebar/index.ts
new file mode 100644
index 0000000..b329fd8
--- /dev/null
+++ b/apps/web/core/components/modules/analytics-sidebar/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+export * from "./issue-progress";
+export * from "./progress-stats";
diff --git a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
new file mode 100644
index 0000000..bbec9a4
--- /dev/null
+++ b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
@@ -0,0 +1,235 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useSearchParams } from "next/navigation";
+import { ChevronDownOutline, ChevronUpOutline, WarningCircleOutline } from "@makeplane/propel/icons";
+import { Disclosure, Transition } from "@headlessui/react";
+import { EEstimateSystem } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TModulePlotType } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { CustomSelect, Spinner } from "@plane/ui";
+// components
+// constants
+// helpers
+import { getDate } from "@plane/utils";
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { ModuleProgressStats } from "@/components/modules";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useModule } from "@/hooks/store/use-module";
+import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
+// plane web constants
+type TModuleAnalyticsProgress = {
+  workspaceSlug: string;
+  projectId: string;
+  moduleId: string;
+};
+
+const moduleBurnDownChartOptions = [
+  { value: "burndown", i18n_label: "issues" },
+  { value: "points", i18n_label: "points" },
+];
+
+export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress(props: TModuleAnalyticsProgress) {
+  // props
+  const { workspaceSlug, projectId, moduleId } = props;
+  // router
+  const searchParams = useSearchParams();
+  const peekModule = searchParams.get("peekModule") || undefined;
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
+  const { getPlotTypeByModuleId, setPlotType, getModuleById, fetchModuleDetails, fetchArchivedModuleDetails } =
+    useModule();
+  const { getFilter, updateFilterValueFromSidebar } = useWorkItemFilters();
+  // state
+  const [loader, setLoader] = useState(false);
+  // derived values
+  const moduleFilter = getFilter(EIssuesStoreType.MODULE, moduleId);
+  const selectedAssignees = moduleFilter?.findFirstConditionByPropertyAndOperator("assignee_id", "in");
+  const selectedLabels = moduleFilter?.findFirstConditionByPropertyAndOperator("label_id", "in");
+  const selectedStateGroups = moduleFilter?.findFirstConditionByPropertyAndOperator("state_group", "in");
+  const moduleDetails = getModuleById(moduleId);
+  const plotType: TModulePlotType = getPlotTypeByModuleId(moduleId);
+  const isCurrentProjectEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId) ? true : false;
+  const estimateDetails =
+    isCurrentProjectEstimateEnabled && currentActiveEstimateId && estimateById(currentActiveEstimateId);
+  const isCurrentEstimateTypeIsPoints = estimateDetails && estimateDetails?.type === EEstimateSystem.POINTS;
+  const completedIssues = moduleDetails?.completed_issues || 0;
+  const totalIssues = moduleDetails?.total_issues || 0;
+  const completedEstimatePoints = moduleDetails?.completed_estimate_points || 0;
+  const totalEstimatePoints = moduleDetails?.total_estimate_points || 0;
+  const progressHeaderPercentage = moduleDetails
+    ? plotType === "points"
+      ? completedEstimatePoints != 0 && totalEstimatePoints != 0
+        ? Math.round((completedEstimatePoints / totalEstimatePoints) * 100)
+        : 0
+      : completedIssues != 0 && completedIssues != 0
+        ? Math.round((completedIssues / totalIssues) * 100)
+        : 0
+    : 0;
+  const chartDistributionData =
+    plotType === "points" ? moduleDetails?.estimate_distribution : moduleDetails?.distribution || undefined;
+  const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
+  const groupedIssues = useMemo(
+    () => ({
+      backlog: plotType === "points" ? moduleDetails?.backlog_estimate_points || 0 : moduleDetails?.backlog_issues || 0,
+      unstarted:
+        plotType === "points" ? moduleDetails?.unstarted_estimate_points || 0 : moduleDetails?.unstarted_issues || 0,
+      started: plotType === "points" ? moduleDetails?.started_estimate_points || 0 : moduleDetails?.started_issues || 0,
+      completed:
+        plotType === "points" ? moduleDetails?.completed_estimate_points || 0 : moduleDetails?.completed_issues || 0,
+      cancelled:
+        plotType === "points" ? moduleDetails?.cancelled_estimate_points || 0 : moduleDetails?.cancelled_issues || 0,
+    }),
+    [plotType, moduleDetails]
+  );
+  const moduleStartDate = getDate(moduleDetails?.start_date);
+  const moduleEndDate = getDate(moduleDetails?.target_date);
+  const isModuleStartDateValid = moduleStartDate && moduleStartDate <= new Date();
+  const isModuleEndDateValid = moduleStartDate && moduleEndDate && moduleEndDate >= moduleStartDate;
+  const isModuleDateValid = isModuleStartDateValid && isModuleEndDateValid;
+  const isArchived = !!moduleDetails?.archived_at;
+
+  // handlers
+  const onChange = async (value: TModulePlotType) => {
+    setPlotType(moduleId, value);
+    if (!workspaceSlug || !projectId || !moduleId) return;
+    try {
+      setLoader(true);
+      if (isArchived) {
+        await fetchArchivedModuleDetails(workspaceSlug, projectId, moduleId);
+      } else {
+        await fetchModuleDetails(workspaceSlug, projectId, moduleId);
+      }
+      setLoader(false);
+    } catch (_error) {
+      setLoader(false);
+      setPlotType(moduleId, plotType);
+    }
+  };
+
+  if (!moduleDetails) return <></>;
+  return (
+    <div className="space-y-4 border-t border-subtle px-3 py-4">
+      <Disclosure defaultOpen={isModuleDateValid ? true : false}>
+        {({ open }) => (
+          <div className="space-y-6">
+            {/* progress bar header */}
+            {isModuleDateValid ? (
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <Disclosure.Button className="relative flex w-full items-center gap-2">
+                  <div className="text-13 font-medium text-secondary">{t("common.progress")}</div>
+                  {progressHeaderPercentage > 0 && (
+                    <div className="bg-amber-500/20 text-amber-500 flex h-5 w-9 items-center justify-center rounded-sm text-11 font-medium">{`${progressHeaderPercentage}%`}</div>
+                  )}
+                </Disclosure.Button>
+                {isCurrentEstimateTypeIsPoints && (
+                  <>
+                    <div>
+                      <CustomSelect
+                        value={plotType}
+                        label={
+                          <span>
+                            {t(moduleBurnDownChartOptions.find((v) => v.value === plotType)?.i18n_label || "none")}
+                          </span>
+                        }
+                        onChange={onChange}
+                        maxHeight="lg"
+                      >
+                        {moduleBurnDownChartOptions.map((item) => (
+                          <CustomSelect.Option key={item.value} value={item.value}>
+                            {t(item.i18n_label)}
+                          </CustomSelect.Option>
+                        ))}
+                      </CustomSelect>
+                    </div>
+                    {loader && <Spinner className="h-3 w-3" />}
+                  </>
+                )}
+                <Disclosure.Button className="ml-auto">
+                  {open ? (
+                    <ChevronUpOutline className="h-3.5 w-3.5" aria-hidden="true" />
+                  ) : (
+                    <ChevronDownOutline className="h-3.5 w-3.5" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+            ) : (
+              <div className="relative flex w-full items-center justify-between gap-2">
+                <div className="text-13 font-medium text-secondary">Progress</div>
+                <div className="flex items-center gap-1">
+                  <WarningCircleOutline height={14} width={14} className="text-secondary" />
+                  <span className="text-11 text-secondary italic">
+                    {moduleDetails?.start_date && moduleDetails?.target_date
+                      ? t("project_module.empty_state.sidebar.in_active")
+                      : t("project_module.empty_state.sidebar.invalid_date")}
+                  </span>
+                </div>
+              </div>
+            )}
+
+            <Transition as="div" show={open}>
+              <Disclosure.Panel className="space-y-4">
+                {/* progress burndown chart */}
+                <div>
+                  {moduleStartDate && moduleEndDate && completionChartDistributionData && (
+                    <Fragment>
+                      {plotType === "points" ? (
+                        <ProgressChart
+                          distribution={completionChartDistributionData}
+                          totalIssues={totalEstimatePoints}
+                          plotTitle={"points"}
+                        />
+                      ) : (
+                        <ProgressChart
+                          distribution={completionChartDistributionData}
+                          totalIssues={totalIssues}
+                          plotTitle={"work items"}
+                        />
+                      )}
+                    </Fragment>
+                  )}
+                </div>
+
+                {/* progress detailed view */}
+                {chartDistributionData && (
+                  <div className="w-full border-t border-subtle pt-5">
+                    <ModuleProgressStats
+                      distribution={chartDistributionData}
+                      groupedIssues={groupedIssues}
+                      handleFiltersUpdate={updateFilterValueFromSidebar.bind(
+                        updateFilterValueFromSidebar,
+                        EIssuesStoreType.MODULE,
+                        moduleId
+                      )}
+                      isEditable={Boolean(!peekModule) && moduleFilter !== undefined}
+                      moduleId={moduleId}
+                      noBackground={false}
+                      plotType={plotType}
+                      roundedTab={false}
+                      selectedFilters={{
+                        assignees: selectedAssignees,
+                        labels: selectedLabels,
+                        stateGroups: selectedStateGroups,
+                      }}
+                      size="xs"
+                      totalIssuesCount={plotType === "points" ? totalEstimatePoints || 0 : totalIssues || 0}
+                    />
+                  </div>
+                )}
+              </Disclosure.Panel>
+            </Transition>
+          </div>
+        )}
+      </Disclosure>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx b/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
new file mode 100644
index 0000000..a67fd69
--- /dev/null
+++ b/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
@@ -0,0 +1,179 @@
+import { Fragment } from "react";
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Tab } from "@headlessui/react";
+import { useTranslation } from "@plane/i18n";
+import type { TWorkItemFilterCondition } from "@plane/shared-state";
+import type { TModuleDistribution, TModuleEstimateDistribution, TModulePlotType } from "@plane/types";
+import { cn, toFilterArray } from "@plane/utils";
+// components
+import type { TAssigneeData } from "@/components/core/sidebar/progress-stats/assignee";
+import { AssigneeStatComponent } from "@/components/core/sidebar/progress-stats/assignee";
+import type { TLabelData } from "@/components/core/sidebar/progress-stats/label";
+import { LabelStatComponent } from "@/components/core/sidebar/progress-stats/label";
+import type { TSelectedFilterProgressStats } from "@/components/core/sidebar/progress-stats/shared";
+import { createFilterUpdateHandler, PROGRESS_STATS } from "@/components/core/sidebar/progress-stats/shared";
+import type { TStateGroupData } from "@/components/core/sidebar/progress-stats/state_group";
+import { StateGroupStatComponent } from "@/components/core/sidebar/progress-stats/state_group";
+// hooks
+import useLocalStorage from "@/hooks/use-local-storage";
+
+type TModuleProgressStats = {
+  distribution: TModuleDistribution | TModuleEstimateDistribution | undefined;
+  groupedIssues: Record<string, number>;
+  handleFiltersUpdate: (condition: TWorkItemFilterCondition) => void;
+  isEditable?: boolean;
+  moduleId: string;
+  noBackground?: boolean;
+  plotType: TModulePlotType;
+  roundedTab?: boolean;
+  selectedFilters: TSelectedFilterProgressStats;
+  size?: "xs" | "sm";
+  totalIssuesCount: number;
+};
+
+export const ModuleProgressStats = observer(function ModuleProgressStats(props: TModuleProgressStats) {
+  const {
+    distribution,
+    groupedIssues,
+    handleFiltersUpdate,
+    isEditable = false,
+    moduleId,
+    noBackground = false,
+    plotType,
+    roundedTab = false,
+    selectedFilters,
+    size = "sm",
+    totalIssuesCount,
+  } = props;
+  // plane imports
+  const { t } = useTranslation();
+  // hooks
+  const { storedValue: currentTab, setValue: setModuleTab } = useLocalStorage(
+    `module-analytics-tab-${moduleId}`,
+    "stat-assignees"
+  );
+  // derived values
+  const currentTabIndex = (tab: string): number => PROGRESS_STATS.findIndex((stat) => stat.key === tab);
+  const currentDistribution = distribution as TModuleDistribution;
+  const currentEstimateDistribution = distribution as TModuleEstimateDistribution;
+  const selectedAssigneeIds = toFilterArray(selectedFilters?.assignees?.value || []) as string[];
+  const selectedLabelIds = toFilterArray(selectedFilters?.labels?.value || []) as string[];
+  const selectedStateGroups = toFilterArray(selectedFilters?.stateGroups?.value || []) as string[];
+
+  const distributionAssigneeData: TAssigneeData =
+    plotType === "burndown"
+      ? (currentDistribution?.assignees || []).map((assignee) => ({
+          id: assignee?.assignee_id || undefined,
+          title: assignee?.display_name || undefined,
+          avatar_url: assignee?.avatar_url || undefined,
+          completed: assignee.completed_issues,
+          total: assignee.total_issues,
+        }))
+      : (currentEstimateDistribution?.assignees || []).map((assignee) => ({
+          id: assignee?.assignee_id || undefined,
+          title: assignee?.display_name || undefined,
+          avatar_url: assignee?.avatar_url || undefined,
+          completed: assignee.completed_estimates,
+          total: assignee.total_estimates,
+        }));
+
+  const distributionLabelData: TLabelData =
+    plotType === "burndown"
+      ? (currentDistribution?.labels || []).map((label) => ({
+          id: label?.label_id || undefined,
+          title: label?.label_name || undefined,
+          color: label?.color || undefined,
+          completed: label.completed_issues,
+          total: label.total_issues,
+        }))
+      : (currentEstimateDistribution?.labels || []).map((label) => ({
+          id: label?.label_id || undefined,
+          title: label?.label_name || undefined,
+          color: label?.color || undefined,
+          completed: label.completed_estimates,
+          total: label.total_estimates,
+        }));
+
+  const distributionStateData: TStateGroupData = Object.keys(groupedIssues || {}).map((state) => ({
+    state: state,
+    completed: groupedIssues?.[state] || 0,
+    total: totalIssuesCount || 0,
+  }));
+
+  const handleAssigneeFiltersUpdate = createFilterUpdateHandler(
+    "assignee_id",
+    selectedAssigneeIds,
+    handleFiltersUpdate
+  );
+  const handleLabelFiltersUpdate = createFilterUpdateHandler("label_id", selectedLabelIds, handleFiltersUpdate);
+  const handleStateGroupFiltersUpdate = createFilterUpdateHandler(
+    "state_group",
+    selectedStateGroups,
+    handleFiltersUpdate
+  );
+
+  return (
+    <div>
+      <Tab.Group as={Fragment} defaultIndex={currentTabIndex(currentTab ? currentTab : "stat-assignees")}>
+        <Tab.List
+          as="div"
+          className={cn(
+            `flex w-full items-center justify-between gap-2 rounded-md p-1`,
+            roundedTab ? `rounded-3xl` : `rounded-md`,
+            noBackground ? `` : `bg-layer-2`,
+            size === "xs" ? `text-11` : `text-13`
+          )}
+        >
+          {PROGRESS_STATS.map((stat) => (
+            <Tab
+              className={cn(
+                `w-full cursor-pointer p-1 text-primary transition-all outline-none focus:outline-none`,
+                roundedTab ? `rounded-3xl border border-subtle` : `rounded-sm`,
+                stat.key === currentTab
+                  ? "bg-layer-transparent-active text-secondary"
+                  : "text-placeholder hover:text-secondary"
+              )}
+              key={stat.key}
+              onClick={() => setModuleTab(stat.key)}
+            >
+              {t(stat.i18n_title)}
+            </Tab>
+          ))}
+        </Tab.List>
+        <Tab.Panels className="py-3 text-secondary">
+          <Tab.Panel key={"stat-assignees"}>
+            <AssigneeStatComponent
+              distribution={distributionAssigneeData}
+              handleAssigneeFiltersUpdate={handleAssigneeFiltersUpdate}
+              isEditable={isEditable}
+              selectedAssigneeIds={selectedAssigneeIds}
+            />
+          </Tab.Panel>
+          <Tab.Panel key={"stat-labels"}>
+            <LabelStatComponent
+              distribution={distributionLabelData}
+              handleLabelFiltersUpdate={handleLabelFiltersUpdate}
+              isEditable={isEditable}
+              selectedLabelIds={selectedLabelIds}
+            />
+          </Tab.Panel>
+          <Tab.Panel key={"stat-states"}>
+            <StateGroupStatComponent
+              distribution={distributionStateData}
+              handleStateGroupFiltersUpdate={handleStateGroupFiltersUpdate}
+              isEditable={isEditable}
+              selectedStateGroups={selectedStateGroups}
+              totalIssuesCount={totalIssuesCount}
+            />
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
new file mode 100644
index 0000000..ad8edb0
--- /dev/null
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -0,0 +1,442 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+import {
+  AddOutline,
+  ChevronDownOutline,
+  ChevronRightOutline,
+  InfoOutline,
+  MembersOutline,
+  StartDateOutline,
+  UserAltOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+import { Disclosure, Transition } from "@headlessui/react";
+import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, EEstimateSystem } from "@plane/constants";
+// plane types
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
+// plane ui
+import { Loader, CustomSelect } from "@plane/ui";
+import { TextArea } from "@makeplane/propel/components/text-area";
+// components
+// helpers
+import { getDate, renderFormattedPayloadDate } from "@plane/utils";
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { CreateUpdateModuleLinkModal, ModuleAnalyticsProgress, ModuleLinksList } from "@/components/modules";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useModule } from "@/hooks/store/use-module";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web constants
+const defaultValues: Partial<IModule> = {
+  lead_id: "",
+  member_ids: [],
+  start_date: null,
+  target_date: null,
+  status: "backlog",
+};
+
+type Props = {
+  moduleId: string;
+  handleClose: () => void;
+  isArchived?: boolean;
+};
+
+// TODO: refactor this component
+export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(props: Props) {
+  const { moduleId, handleClose, isArchived } = props;
+  // states
+  const [moduleLinkModal, setModuleLinkModal] = useState(false);
+  const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
+  // router
+  const { workspaceSlug, projectId } = useParams();
+
+  // store hooks
+  const { t } = useTranslation();
+  const { allowPermissions } = useUserPermissions();
+
+  const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink } = useModule();
+  const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
+
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  const areEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId.toString());
+  const estimateType = areEstimateEnabled && currentActiveEstimateId && estimateById(currentActiveEstimateId);
+  const isEstimatePointValid = estimateType && estimateType?.type == EEstimateSystem.POINTS ? true : false;
+
+  const { reset, control } = useForm({
+    defaultValues,
+  });
+
+  const submitChanges = async (data: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), data);
+  };
+
+  const handleCreateLink = async (formData: ModuleLink) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+    const payload = { metadata: {}, ...formData };
+    await createModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), payload);
+  };
+
+  const handleUpdateLink = async (formData: ModuleLink, linkId: string) => {
+    if (!workspaceSlug || !projectId) return;
+    const payload = { metadata: {}, ...formData };
+    await updateModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId, payload);
+  };
+
+  const handleDeleteLink = async (linkId: string) => {
+    if (!workspaceSlug || !projectId) return;
+    try {
+      await deleteModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Module link deleted successfully.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Some error occurred",
+      });
+    }
+  };
+
+  const handleDateChange = async (startDate: Date | undefined, targetDate: Date | undefined) => {
+    submitChanges({
+      start_date: startDate ? renderFormattedPayloadDate(startDate) : null,
+      target_date: targetDate ? renderFormattedPayloadDate(targetDate) : null,
+    });
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
+      title: "Success!",
+      message: "Module updated successfully.",
+    });
+  };
+
+  useEffect(() => {
+    if (moduleDetails)
+      reset({
+        ...moduleDetails,
+      });
+  }, [moduleDetails, reset]);
+
+  const handleEditLink = (link: ILinkDetails) => {
+    setSelectedLinkToUpdate(link);
+    setModuleLinkModal(true);
+  };
+
+  if (!moduleDetails)
+    return (
+      <Loader>
+        <div className="space-y-2">
+          <Loader.Item height="15px" width="50%" />
+          <Loader.Item height="15px" width="30%" />
+        </div>
+        <div className="mt-8 space-y-3">
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+          <Loader.Item height="30px" />
+        </div>
+      </Loader>
+    );
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  const issueCount =
+    moduleDetails.total_issues === 0
+      ? "0 work items"
+      : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
+
+  const issueEstimatePointCount =
+    moduleDetails.total_estimate_points === 0
+      ? "0 work items"
+      : `${moduleDetails.completed_estimate_points}/${moduleDetails.total_estimate_points}`;
+
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <div className="relative">
+      <CreateUpdateModuleLinkModal
+        isOpen={moduleLinkModal}
+        handleClose={() => {
+          setModuleLinkModal(false);
+          setTimeout(() => {
+            setSelectedLinkToUpdate(null);
+          }, 500);
+        }}
+        data={selectedLinkToUpdate}
+        createLink={handleCreateLink}
+        updateLink={handleUpdateLink}
+      />
+      <>
+        <div className={`sticky top-0 z-10 flex items-center justify-between bg-surface-1 pt-5 pb-5`}>
+          <div>
+            <button
+              className="flex h-5 w-5 items-center justify-center rounded-full bg-layer-3"
+              onClick={() => handleClose()}
+            >
+              <ChevronRightOutline className="h-3 w-3 text-on-color" />
+            </button>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-5 pt-2">
+            <Controller
+              control={control}
+              name="status"
+              render={({ field: { value } }) => (
+                <CustomSelect
+                  customButton={
+                    <span
+                      className={`flex h-6 w-20 items-center justify-center rounded-xs text-center text-11 ${
+                        isEditingAllowed && !isArchived ? "cursor-pointer" : "cursor-not-allowed"
+                      }`}
+                      style={{
+                        color: moduleStatus ? moduleStatus.color : "#a3a3a2",
+                        backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
+                      }}
+                    >
+                      {(moduleStatus && t(moduleStatus?.i18n_label)) ?? t("project_modules.status.backlog")}
+                    </span>
+                  }
+                  value={value}
+                  onChange={(value: any) => {
+                    submitChanges({ status: value });
+                  }}
+                  disabled={!isEditingAllowed || isArchived}
+                >
+                  {MODULE_STATUS.map((status) => (
+                    <CustomSelect.Option key={status.value} value={status.value}>
+                      <div className="flex items-center gap-2">
+                        <ModuleStatusIcon status={status.value} />
+                        {t(status.i18n_label)}
+                      </div>
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+          </div>
+          <h4 className="w-full text-18 font-semibold wrap-break-word text-primary">{moduleDetails.name}</h4>
+          {moduleDetails.description && (
+            <TextArea size="lg" surface="inline" autoResize value={moduleDetails.description} disabled />
+          )}
+        </div>
+
+        <div className="flex flex-col gap-5 pt-2.5 pb-6">
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
+              <StartDateOutline className="h-4 w-4" />
+              <span className="text-14">{t("date_range")}</span>
+            </div>
+            <div className="h-7">
+              <Controller
+                control={control}
+                name="start_date"
+                render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
+                  <Controller
+                    control={control}
+                    name="target_date"
+                    render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => {
+                      const startDate = getDate(startDateValue);
+                      const endDate = getDate(endDateValue);
+                      return (
+                        <DateRangeDropdown
+                          buttonContainerClassName="w-full"
+                          buttonVariant="background-with-text"
+                          value={{
+                            from: startDate,
+                            to: endDate,
+                          }}
+                          onSelect={(val) => {
+                            onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
+                            onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
+                            handleDateChange(val?.from, val?.to);
+                          }}
+                          placeholder={{
+                            from: t("start_date"),
+                            to: t("end_date"),
+                          }}
+                          disabled={!isEditingAllowed || isArchived}
+                        />
+                      );
+                    }}
+                  />
+                )}
+              />
+            </div>
+          </div>
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
+              <UserAltOutline className="h-4 w-4" />
+              <span className="text-14">{t("lead")}</span>
+            </div>
+            <Controller
+              control={control}
+              name="lead_id"
+              render={({ field: { value } }) => (
+                <div className="h-7 w-3/5">
+                  <MemberDropdown
+                    value={value ?? null}
+                    onChange={(val) => {
+                      submitChanges({ lead_id: val });
+                    }}
+                    projectId={projectId?.toString() ?? ""}
+                    multiple={false}
+                    buttonVariant="background-with-text"
+                    placeholder={t("lead")}
+                    disabled={!isEditingAllowed || isArchived}
+                    icon={UserAltOutline}
+                  />
+                </div>
+              )}
+            />
+          </div>
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
+              <MembersOutline className="h-4 w-4" />
+              <span className="text-14">{t("members")}</span>
+            </div>
+            <Controller
+              control={control}
+              name="member_ids"
+              render={({ field: { value } }) => (
+                <div className="h-7 w-3/5">
+                  <MemberDropdown
+                    value={value ?? []}
+                    onChange={(val: string[]) => {
+                      submitChanges({ member_ids: val });
+                    }}
+                    multiple
+                    projectId={projectId?.toString() ?? ""}
+                    buttonVariant={value && value?.length > 0 ? "transparent-without-text" : "background-with-text"}
+                    buttonClassName={value && value.length > 0 ? "hover:bg-transparent px-0" : ""}
+                    disabled={!isEditingAllowed || isArchived}
+                  />
+                </div>
+              )}
+            />
+          </div>
+          <div className="flex items-center justify-start gap-1">
+            <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
+              <WorkItemsOutline className="h-4 w-4" />
+              <span className="text-14">{t("issues")}</span>
+            </div>
+            <div className="flex h-7 w-3/5 items-center">
+              <span className="px-1.5 text-13 text-tertiary">{issueCount}</span>
+            </div>
+          </div>
+
+          {/**
+           * NOTE: Render this section when estimate points of he projects is enabled and the estimate system is points
+           */}
+          {isEstimatePointValid && (
+            <div className="flex items-center justify-start gap-1">
+              <div className="flex w-2/5 items-center justify-start gap-2 text-tertiary">
+                <WorkItemsOutline className="h-4 w-4" />
+                <span className="text-14">{t("points")}</span>
+              </div>
+              <div className="flex h-7 w-3/5 items-center">
+                <span className="px-1.5 text-13 text-tertiary">{issueEstimatePointCount}</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {workspaceSlug && projectId && moduleDetails?.id && (
+          <ModuleAnalyticsProgress
+            workspaceSlug={workspaceSlug.toString()}
+            projectId={projectId.toString()}
+            moduleId={moduleDetails?.id}
+          />
+        )}
+
+        <div className="flex flex-col">
+          <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-subtle px-1.5 py-5">
+            {/* Accessing link outside the disclosure as mobx is not  considering the children inside Disclosure as part of the component hence not observing their state change*/}
+            <Disclosure defaultOpen={!!moduleDetails?.link_module?.length}>
+              {({ open }) => (
+                <div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
+                  <Disclosure.Button className="flex w-full items-center justify-between gap-2 p-1.5">
+                    <div className="flex items-center justify-start gap-2 text-13">
+                      <span className="font-medium text-secondary">{t("common.links")}</span>
+                    </div>
+                    <div className="flex items-center gap-2.5">
+                      <ChevronDownOutline
+                        className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
+                        aria-hidden="true"
+                      />
+                    </div>
+                  </Disclosure.Button>
+                  <Transition as="div" show={open}>
+                    <Disclosure.Panel>
+                      <div className="mt-2 flex min-h-72 w-full flex-col space-y-3 overflow-y-auto">
+                        {isEditingAllowed && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
+                          <>
+                            {isEditingAllowed && !isArchived && (
+                              <div className="flex w-full items-center justify-end">
+                                <button
+                                  className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
+                                  onClick={() => setModuleLinkModal(true)}
+                                >
+                                  <AddOutline className="h-3 w-3" />
+                                  {t("add_link")}
+                                </button>
+                              </div>
+                            )}
+
+                            {moduleId && (
+                              <ModuleLinksList
+                                moduleId={moduleId}
+                                handleEditLink={handleEditLink}
+                                handleDeleteLink={handleDeleteLink}
+                                disabled={!isEditingAllowed || isArchived}
+                              />
+                            )}
+                          </>
+                        ) : (
+                          <div className="flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                              <InfoOutline className="h-3.5 w-3.5 stroke-[1.5] text-tertiary" />
+                              <span className="p-0.5 text-11 text-tertiary">{t("common.no_links_added_yet")}</span>
+                            </div>
+                            {isEditingAllowed && !isArchived && (
+                              <button
+                                className="flex items-center gap-1.5 text-13 font-medium text-accent-primary"
+                                onClick={() => setModuleLinkModal(true)}
+                              >
+                                <AddOutline className="h-3 w-3" />
+                                {t("add_link")}
+                              </button>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </Disclosure.Panel>
+                  </Transition>
+                </div>
+              )}
+            </Disclosure>
+          </div>
+        </div>
+      </>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/modules/applied-filters/date.tsx b/apps/web/core/components/modules/applied-filters/date.tsx
new file mode 100644
index 0000000..221a543
--- /dev/null
+++ b/apps/web/core/components/modules/applied-filters/date.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// icons
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
+// helpers
+// constants
+
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
+  const { editable, handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_AFTER_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          {editable && (
+            <button
+              type="button"
+              className="grid place-items-center text-tertiary hover:text-secondary"
+              onClick={() => handleRemove(date)}
+            >
+              <CloseOutline height={10} width={10} />
+            </button>
+          )}
+        </div>
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/applied-filters/index.ts b/apps/web/core/components/modules/applied-filters/index.ts
new file mode 100644
index 0000000..4631563
--- /dev/null
+++ b/apps/web/core/components/modules/applied-filters/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./date";
+export * from "./members";
+export * from "./root";
+export * from "./status";
diff --git a/apps/web/core/components/modules/applied-filters/members.tsx b/apps/web/core/components/modules/applied-filters/members.tsx
new file mode 100644
index 0000000..ad001cc
--- /dev/null
+++ b/apps/web/core/components/modules/applied-filters/members.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { CloseOutline } from "@makeplane/propel/icons";
+// helpers
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedMembersFilters = observer(function AppliedMembersFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const {
+    workspace: { getWorkspaceMemberDetails },
+  } = useMember();
+
+  return (
+    <>
+      {values.map((memberId) => {
+        const memberDetails = getWorkspaceMemberDetails(memberId)?.member;
+
+        if (!memberDetails) return null;
+
+        return (
+          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <Avatar
+              alt={memberDetails.display_name}
+              fallback={memberDetails.display_name?.[0]?.toUpperCase()}
+              src={getFileURL(memberDetails.avatar_url)}
+              size="2xs"
+            />
+            <span className="normal-case">{memberDetails.display_name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(memberId)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/applied-filters/root.tsx b/apps/web/core/components/modules/applied-filters/root.tsx
new file mode 100644
index 0000000..e2db827
--- /dev/null
+++ b/apps/web/core/components/modules/applied-filters/root.tsx
@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { PillButton } from "@makeplane/propel/components/pill";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
+// components
+import { Header, EHeaderVariant } from "@plane/ui";
+import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
+import { AppliedDateFilters, AppliedMembersFilters, AppliedStatusFilters } from "@/components/modules";
+// helpers
+// types
+
+type Props = {
+  appliedFilters: TModuleFilters;
+  isFavoriteFilterApplied?: boolean;
+  handleClearAllFilters: () => void;
+  handleDisplayFiltersUpdate?: (updatedDisplayProperties: Partial<TModuleDisplayFilters>) => void;
+  handleRemoveFilter: (key: keyof TModuleFilters, value: string | null) => void;
+  alwaysAllowEditing?: boolean;
+  isArchived?: boolean;
+};
+
+const MEMBERS_FILTERS = ["lead", "members"];
+const DATE_FILTERS = ["start_date", "target_date"];
+
+export function ModuleAppliedFiltersList(props: Props) {
+  const {
+    appliedFilters,
+    isFavoriteFilterApplied,
+    handleClearAllFilters,
+    handleRemoveFilter,
+    handleDisplayFiltersUpdate,
+    alwaysAllowEditing,
+    isArchived = false,
+  } = props;
+  const { t } = useTranslation();
+
+  if (!appliedFilters && !isFavoriteFilterApplied) return null;
+  if (Object.keys(appliedFilters).length === 0 && !isFavoriteFilterApplied) return null;
+
+  const isEditingAllowed = alwaysAllowEditing;
+
+  return (
+    <Header variant={EHeaderVariant.TERNARY}>
+      <div className="flex flex-wrap gap-2">
+        {Object.entries(appliedFilters).map(([key, value]) => {
+          const filterKey = key as keyof TModuleFilters;
+
+          if (!value) return;
+          if (Array.isArray(value) && value.length === 0) return;
+
+          return (
+            <div
+              key={filterKey}
+              className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary"
+            >
+              <div className="flex flex-wrap items-center gap-1.5">
+                <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+                {filterKey === "status" && (
+                  <AppliedStatusFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter("status", val)}
+                    values={value}
+                  />
+                )}
+                {DATE_FILTERS.includes(filterKey) && (
+                  <AppliedDateFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                    values={value}
+                  />
+                )}
+                {MEMBERS_FILTERS.includes(filterKey) && (
+                  <AppliedMembersFilters
+                    editable={isEditingAllowed}
+                    handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                    values={value}
+                  />
+                )}
+                {isEditingAllowed && (
+                  <button
+                    type="button"
+                    className="grid place-items-center text-tertiary hover:text-secondary"
+                    onClick={() => handleRemoveFilter(filterKey, null)}
+                  >
+                    <CloseOutline height={12} width={12} />
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+        {!isArchived && isFavoriteFilterApplied && (
+          <div
+            key="module_display_filters"
+            className="flex flex-wrap items-center gap-2 rounded-md border border-subtle px-2 py-1 capitalize"
+          >
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-11 text-tertiary">Modules</span>
+              <div className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+                Favorite
+                {isEditingAllowed && (
+                  <button
+                    type="button"
+                    className="grid place-items-center text-tertiary hover:text-secondary"
+                    onClick={() =>
+                      handleDisplayFiltersUpdate &&
+                      handleDisplayFiltersUpdate({
+                        favorites: !isFavoriteFilterApplied,
+                      })
+                    }
+                  >
+                    <CloseOutline height={10} width={10} />
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+        {isEditingAllowed && (
+          <PillButton
+            type="button"
+            size="md"
+            variant="outline"
+            label={t("common.clear_all")}
+            endIcon={<CloseOutline height={12} width={12} />}
+            onClick={handleClearAllFilters}
+          />
+        )}
+      </div>
+    </Header>
+  );
+}
diff --git a/apps/web/core/components/modules/applied-filters/status.tsx b/apps/web/core/components/modules/applied-filters/status.tsx
new file mode 100644
index 0000000..7fdfa71
--- /dev/null
+++ b/apps/web/core/components/modules/applied-filters/status.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// ui
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+// constants
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedStatusFilters = observer(function AppliedStatusFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {values.map((status) => {
+        const statusDetails = MODULE_STATUS?.find((s) => s.value === status);
+        if (!statusDetails) return null;
+
+        return (
+          <div key={status} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
+            <ModuleStatusIcon status={statusDetails.value} height="12px" width="12px" />
+            {t(statusDetails.i18n_label)}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(status)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/archived-modules/header.tsx b/apps/web/core/components/modules/archived-modules/header.tsx
new file mode 100644
index 0000000..134bfd4
--- /dev/null
+++ b/apps/web/core/components/modules/archived-modules/header.tsx
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { CloseOutline, FilterOutline, SearchOutline } from "@makeplane/propel/icons";
+import { useOutsideClickDetector } from "@plane/hooks";
+// plane helpers
+// types
+import type { TModuleFilters } from "@plane/types";
+import { cn, calculateTotalFilters } from "@plane/utils";
+// components
+import { ArchiveTabsList } from "@/components/archives";
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+
+export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
+  // router
+  const { projectId } = useParams();
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // hooks
+  const {
+    currentProjectArchivedFilters,
+    currentProjectDisplayFilters,
+    archivedModulesSearchQuery,
+    updateFilters,
+    updateDisplayFilters,
+    updateArchivedModulesSearchQuery,
+  } = useModuleFilter();
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(archivedModulesSearchQuery !== "" ? true : false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && archivedModulesSearchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleFilters = useCallback(
+    (key: keyof TModuleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (archivedModulesSearchQuery && archivedModulesSearchQuery.trim() !== "") updateArchivedModulesSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  const isFiltersApplied = calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0;
+
+  return (
+    <div className="group relative flex border-b border-subtle">
+      <div className="horizontal-scrollbar scrollbar-sm flex w-full items-center gap-2 overflow-x-auto px-4">
+        <ArchiveTabsList />
+      </div>
+      {/* filter options */}
+      <div className="flex h-full items-center gap-3 self-end px-8">
+        {!isSearchOpen && (
+          <button
+            type="button"
+            className="-mr-5 grid place-items-center rounded-sm p-2 text-placeholder hover:bg-layer-1"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+          >
+            <SearchOutline className="h-3.5 w-3.5" />
+          </button>
+        )}
+        <div
+          className={cn(
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
+            {
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <SearchOutline className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
+            placeholder="Search"
+            value={archivedModulesSearchQuery}
+            onChange={(e) => updateArchivedModulesSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateArchivedModulesSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <CloseOutline className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+        <ModuleOrderByDropdown
+          value={currentProjectDisplayFilters?.order_by}
+          onChange={(val) => {
+            if (!projectId || val === currentProjectDisplayFilters?.order_by) return;
+            updateDisplayFilters(projectId.toString(), {
+              order_by: val,
+            });
+          }}
+        />
+        <FiltersDropdown
+          icon={<FilterOutline className="h-3 w-3" />}
+          title="Filters"
+          placement="bottom-end"
+          isFiltersApplied={isFiltersApplied}
+        >
+          <ModuleFiltersSelection
+            displayFilters={currentProjectDisplayFilters ?? {}}
+            filters={currentProjectArchivedFilters ?? {}}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!projectId) return;
+              updateDisplayFilters(projectId.toString(), val);
+            }}
+            handleFiltersUpdate={handleFilters}
+            memberIds={workspaceMemberIds ?? undefined}
+            isArchived
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/modules/archived-modules/index.ts b/apps/web/core/components/modules/archived-modules/index.ts
new file mode 100644
index 0000000..d6b767c
--- /dev/null
+++ b/apps/web/core/components/modules/archived-modules/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+export * from "./view";
+export * from "./header";
+export * from "./modal";
diff --git a/apps/web/core/components/modules/archived-modules/modal.tsx b/apps/web/core/components/modules/archived-modules/modal.tsx
new file mode 100644
index 0000000..58067d6
--- /dev/null
+++ b/apps/web/core/components/modules/archived-modules/modal.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  moduleId: string;
+  handleClose: () => void;
+  isOpen: boolean;
+  onSubmit?: () => Promise<void>;
+};
+
+export function ArchiveModuleModal(props: Props) {
+  const { workspaceSlug, projectId, moduleId, isOpen, handleClose } = props;
+  // router
+  const router = useAppRouter();
+  // states
+  const [isArchiving, setIsArchiving] = useState(false);
+  // store hooks
+  const { getModuleNameById, archiveModule } = useModule();
+
+  const moduleName = getModuleNameById(moduleId);
+
+  const onClose = () => {
+    setIsArchiving(false);
+    handleClose();
+  };
+
+  const handleArchiveModule = async () => {
+    setIsArchiving(true);
+    await archiveModule(workspaceSlug, projectId, moduleId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Archive success",
+          message: "Your archives can be found in project archives.",
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/${projectId}/modules`);
+        return;
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Module could not be archived. Please try again.",
+        })
+      )
+      .finally(() => setIsArchiving(false));
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.LG}>
+      <div className="px-5 py-4">
+        <h3 className="text-18 font-medium 2xl:text-20">Archive module {moduleName}</h3>
+        <p className="mt-3 text-13 text-secondary">
+          Are you sure you want to archive the module? All your archives can be restored later.
+        </p>
+        <div className="mt-3 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
+            {isArchiving ? "Archiving" : "Archive"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/modules/archived-modules/root.tsx b/apps/web/core/components/modules/archived-modules/root.tsx
new file mode 100644
index 0000000..716ccbc
--- /dev/null
+++ b/apps/web/core/components/modules/archived-modules/root.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import type { TModuleFilters } from "@plane/types";
+// components
+import { calculateTotalFilters } from "@plane/utils";
+import { ArchivedModulesView, ModuleAppliedFiltersList } from "@/components/modules";
+import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+// helpers
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+
+export const ArchivedModuleLayoutRoot = observer(function ArchivedModuleLayoutRoot() {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const { fetchArchivedModules, projectArchivedModuleIds, loader } = useModule();
+  const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useModuleFilter();
+  // derived values
+  const totalArchivedModules = projectArchivedModuleIds?.length ?? 0;
+
+  useSWR(
+    workspaceSlug && projectId ? `ARCHIVED_MODULES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await fetchArchivedModules(workspaceSlug.toString(), projectId.toString());
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TModuleFilters, value: string | null) => {
+      if (!projectId) return;
+      let newValues = currentProjectArchivedFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(projectId.toString(), { [key]: newValues }, "archived");
+    },
+    [currentProjectArchivedFilters, projectId, updateFilters]
+  );
+
+  if (!workspaceSlug || !projectId) return <></>;
+
+  if (loader || !projectArchivedModuleIds) {
+    return <CycleModuleListLayoutLoader />;
+  }
+
+  return (
+    <>
+      {calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0 && (
+        <div className="border-b border-subtle px-5 py-3">
+          <ModuleAppliedFiltersList
+            appliedFilters={currentProjectArchivedFilters ?? {}}
+            handleClearAllFilters={() => clearAllFilters(projectId.toString(), "archived")}
+            handleRemoveFilter={handleRemoveFilter}
+            alwaysAllowEditing
+            isArchived
+          />
+        </div>
+      )}
+      {totalArchivedModules === 0 ? (
+        <div className="h-full place-items-center">
+          <EmptyStateDetailed
+            assetKey="archived-module"
+            title={t("workspace_empty_state.archive_modules.title")}
+            description={t("workspace_empty_state.archive_modules.description")}
+          />
+        </div>
+      ) : (
+        <div className="relative h-full w-full overflow-auto">
+          <ArchivedModulesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/archived-modules/view.tsx b/apps/web/core/components/modules/archived-modules/view.tsx
new file mode 100644
index 0000000..417eaee
--- /dev/null
+++ b/apps/web/core/components/modules/archived-modules/view.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// assets
+import AllFiltersImage from "@/app/assets/empty-state/module/all-filters.svg?url";
+import NameFilterImage from "@/app/assets/empty-state/module/name-filter.svg?url";
+// components
+import { ModuleListItem, ModulePeekOverview } from "@/components/modules";
+// ui
+import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+
+export interface IArchivedModulesView {
+  workspaceSlug: string;
+  projectId: string;
+}
+
+export const ArchivedModulesView = observer(function ArchivedModulesView(props: IArchivedModulesView) {
+  const { workspaceSlug, projectId } = props;
+  // store hooks
+  const { getFilteredArchivedModuleIds, loader } = useModule();
+  const { archivedModulesSearchQuery } = useModuleFilter();
+  // derived values
+  const filteredArchivedModuleIds = getFilteredArchivedModuleIds(projectId);
+
+  if (loader || !filteredArchivedModuleIds) return <CycleModuleListLayoutLoader />;
+
+  if (filteredArchivedModuleIds.length === 0)
+    return (
+      <div className="grid h-full w-full place-items-center">
+        <div className="text-center">
+          <img
+            src={archivedModulesSearchQuery.trim() === "" ? AllFiltersImage : NameFilterImage}
+            className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
+            alt="No matching modules"
+          />
+          <h5 className="mt-7 mb-1 text-18 font-medium">No matching modules</h5>
+          <p className="text-14 text-placeholder">
+            {archivedModulesSearchQuery.trim() === ""
+              ? "Remove the filters to see all modules"
+              : "Remove the search criteria to see all modules"}
+          </p>
+        </div>
+      </div>
+    );
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="flex h-full w-full justify-between">
+        <div className="vertical-scrollbar scrollbar-lg flex h-full w-full flex-col overflow-y-auto">
+          {filteredArchivedModuleIds.map((moduleId) => (
+            <ModuleListItem key={moduleId} moduleId={moduleId} />
+          ))}
+        </div>
+        <ModulePeekOverview
+          projectId={projectId?.toString() ?? ""}
+          workspaceSlug={workspaceSlug?.toString() ?? ""}
+          isArchived
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/modules/delete-module-modal.tsx b/apps/web/core/components/modules/delete-module-modal.tsx
new file mode 100644
index 0000000..f3bfe38
--- /dev/null
+++ b/apps/web/core/components/modules/delete-module-modal.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// types
+import { PROJECT_ERROR_MESSAGES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IModule } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// constants
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  data: IModule;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const DeleteModuleModal = observer(function DeleteModuleModal(props: Props) {
+  const { data, isOpen, onClose } = props;
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId, moduleId, peekModule } = useParams();
+  // store hooks
+  const { deleteModule } = useModule();
+  const { t } = useTranslation();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    setIsDeleteLoading(true);
+
+    await deleteModule(workspaceSlug.toString(), projectId.toString(), data.id)
+      .then(() => {
+        if (moduleId || peekModule) router.push(`/${workspaceSlug}/projects/${data.project_id}/modules`);
+        handleClose();
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module deleted successfully.",
+        });
+      })
+      .catch((errors) => {
+        const isPermissionError = errors?.error === "You don't have the required permissions.";
+        const currentError = isPermissionError
+          ? PROJECT_ERROR_MESSAGES.permissionError
+          : PROJECT_ERROR_MESSAGES.moduleDeleteError;
+        setToast({
+          title: t(currentError.i18n_title),
+          type: TOAST_TYPE.ERROR,
+          message: currentError.i18n_message && t(currentError.i18n_message),
+        });
+      })
+      .finally(() => handleClose());
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isSubmitting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete module"
+      content={
+        <>
+          Are you sure you want to delete module-{" "}
+          <span className="font-medium break-all text-primary">{data?.name}</span>? All of the data related to the
+          module will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/modules/dropdowns/filters/index.ts b/apps/web/core/components/modules/dropdowns/filters/index.ts
new file mode 100644
index 0000000..8280ae9
--- /dev/null
+++ b/apps/web/core/components/modules/dropdowns/filters/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./lead";
+export * from "./members";
+export * from "./root";
+export * from "./start-date";
+export * from "./status";
+export * from "./target-date";
diff --git a/apps/web/core/components/modules/dropdowns/filters/lead.tsx b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
new file mode 100644
index 0000000..b47ec8c
--- /dev/null
+++ b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLead = observer(function FilterLead(props: Props) {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Lead${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`lead-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          alt={member.display_name}
+                          fallback={member.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(member.avatar_url)}
+                          size="xs"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/dropdowns/filters/members.tsx b/apps/web/core/components/modules/dropdowns/filters/members.tsx
new file mode 100644
index 0000000..b13b7e3
--- /dev/null
+++ b/apps/web/core/components/modules/dropdowns/filters/members.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMembers = observer(function FilterMembers(props: Props) {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Members${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`member-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          alt={member.display_name}
+                          fallback={member.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(member.avatar_url)}
+                          size="xs"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/dropdowns/filters/root.tsx b/apps/web/core/components/modules/dropdowns/filters/root.tsx
new file mode 100644
index 0000000..857ea73
--- /dev/null
+++ b/apps/web/core/components/modules/dropdowns/filters/root.tsx
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import type { TModuleStatus } from "@plane/propel/icons";
+// plane imports
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
+// components
+import { FilterOption } from "@/components/issues/issue-layouts/filters";
+import { FilterLead, FilterMembers, FilterStartDate, FilterStatus, FilterTargetDate } from "@/components/modules";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  displayFilters: TModuleDisplayFilters;
+  filters: TModuleFilters;
+  handleDisplayFiltersUpdate: (updatedDisplayProperties: Partial<TModuleDisplayFilters>) => void;
+  handleFiltersUpdate: (key: keyof TModuleFilters, value: string | string[]) => void;
+  memberIds?: string[] | undefined;
+  isArchived?: boolean;
+};
+
+export const ModuleFiltersSelection = observer(function ModuleFiltersSelection(props: Props) {
+  const {
+    displayFilters,
+    filters,
+    handleDisplayFiltersUpdate,
+    handleFiltersUpdate,
+    memberIds,
+    isArchived = false,
+  } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+  // store
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchOutline className="text-placeholder" width={12} height={12} />
+          <input
+            type="text"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus={!isMobile}
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <CloseOutline className="text-tertiary" height={12} width={12} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
+        {!isArchived && (
+          <div className="py-2">
+            <FilterOption
+              isChecked={!!displayFilters.favorites}
+              onClick={() =>
+                handleDisplayFiltersUpdate({
+                  favorites: !displayFilters.favorites,
+                })
+              }
+              title="Favorites"
+            />
+          </div>
+        )}
+
+        {/* status */}
+        {!isArchived && (
+          <div className="py-2">
+            <FilterStatus
+              appliedFilters={(filters.status as TModuleStatus[]) ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("status", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* lead */}
+        <div className="py-2">
+          <FilterLead
+            appliedFilters={filters.lead ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("lead", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* members */}
+        <div className="py-2">
+          <FilterMembers
+            appliedFilters={filters.members ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("members", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* start date */}
+        <div className="py-2">
+          <FilterStartDate
+            appliedFilters={filters.start_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* target date */}
+        <div className="py-2">
+          <FilterTargetDate
+            appliedFilters={filters.target_date ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("target_date", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/modules/dropdowns/filters/start-date.tsx b/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
new file mode 100644
index 0000000..2c055b7
--- /dev/null
+++ b/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+// components
+import { isInDateFormat } from "@plane/utils";
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+// helpers
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterStartDate = observer(function FilterStartDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Start date"
+        />
+      )}
+      <FilterHeader
+        title={`Start date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/dropdowns/filters/status.tsx b/apps/web/core/components/modules/dropdowns/filters/status.tsx
new file mode 100644
index 0000000..c675908
--- /dev/null
+++ b/apps/web/core/components/modules/dropdowns/filters/status.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import type { TModuleStatus } from "@plane/types";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+type Props = {
+  appliedFilters: TModuleStatus[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterStatus = observer(function FilterStatus(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const { t } = useTranslation();
+
+  const filteredOptions = MODULE_STATUS.filter((p) => p.value.includes(searchQuery.toLowerCase()));
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  return (
+    <>
+      <FilterHeader
+        title={`Status${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((status) => (
+              <FilterOption
+                key={status.value}
+                isChecked={appliedFilters?.includes(status.value) ? true : false}
+                onClick={() => handleUpdate(status.value)}
+                icon={<ModuleStatusIcon status={status.value} />}
+                title={t(status.i18n_label)}
+              />
+            ))
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/dropdowns/filters/target-date.tsx b/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
new file mode 100644
index 0000000..20654be
--- /dev/null
+++ b/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+// components
+import { isInDateFormat } from "@plane/utils";
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterTargetDate = observer(function FilterTargetDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_AFTER_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Due date"
+        />
+      )}
+      <FilterHeader
+        title={`Due date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/dropdowns/index.ts b/apps/web/core/components/modules/dropdowns/index.ts
new file mode 100644
index 0000000..41a21b5
--- /dev/null
+++ b/apps/web/core/components/modules/dropdowns/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filters";
+export * from "./order-by";
diff --git a/apps/web/core/components/modules/dropdowns/order-by.tsx b/apps/web/core/components/modules/dropdowns/order-by.tsx
new file mode 100644
index 0000000..cc64d76
--- /dev/null
+++ b/apps/web/core/components/modules/dropdowns/order-by.tsx
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ChevronDownOutline, SortAscendingOutline, SortDescendingOutline, TickOutline } from "@makeplane/propel/icons";
+import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { getButtonStyling } from "@plane/propel/button";
+import type { TModuleOrderByOptions } from "@plane/types";
+// ui
+import { CustomMenu } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// types
+// constants
+
+type Props = {
+  onChange: (value: TModuleOrderByOptions) => void;
+  value: TModuleOrderByOptions | undefined;
+};
+
+export function ModuleOrderByDropdown(props: Props) {
+  const { onChange, value } = props;
+  // hooks
+  const { t } = useTranslation();
+
+  const orderByDetails = MODULE_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
+
+  const isDescending = value?.[0] === "-";
+  const isManual = value?.includes("sort_order");
+
+  return (
+    <CustomMenu
+      customButton={
+        <div className={cn(getButtonStyling("secondary", "lg"), "px-2 text-tertiary")}>
+          {!isDescending ? <SortAscendingOutline className="size-3" /> : <SortDescendingOutline className="size-3" />}
+          {orderByDetails && t(orderByDetails?.i18n_label)}
+          <ChevronDownOutline className="size-3" />
+        </div>
+      }
+      placement="bottom-end"
+      maxHeight="lg"
+      closeOnSelect
+    >
+      {MODULE_ORDER_BY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => {
+            if (isDescending && !isManual) onChange(`-${option.key}` as TModuleOrderByOptions);
+            else onChange(option.key);
+          }}
+        >
+          {t(option.i18n_label)}
+          {value?.includes(option.key) && <TickOutline className="h-3 w-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+      {!isManual && (
+        <>
+          <hr className="my-2 border-subtle" />
+          <CustomMenu.MenuItem
+            className="flex items-center justify-between gap-2"
+            onClick={() => {
+              if (isDescending) onChange(value.slice(1) as TModuleOrderByOptions);
+            }}
+          >
+            Ascending
+            {!isDescending && <TickOutline className="h-3 w-3" />}
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem
+            className="flex items-center justify-between gap-2"
+            onClick={() => {
+              if (!isDescending) onChange(`-${value}` as TModuleOrderByOptions);
+            }}
+          >
+            Descending
+            {isDescending && <TickOutline className="h-3 w-3" />}
+          </CustomMenu.MenuItem>
+        </>
+      )}
+    </CustomMenu>
+  );
+}
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
new file mode 100644
index 0000000..c799e56
--- /dev/null
+++ b/apps/web/core/components/modules/form.tsx
@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IModule } from "@plane/types";
+import { getDate, renderFormattedPayloadDate, getTabIndex } from "@plane/utils";
+// components
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { ProjectDropdown } from "@/components/dropdowns/project/dropdown";
+import { ModuleStatusSelect } from "@/components/modules";
+// hooks
+import { useUser } from "@/hooks/store/user/user-user";
+
+type Props = {
+  handleFormSubmit: (values: Partial<IModule>, dirtyFields: any) => Promise<void>;
+  handleClose: () => void;
+  status: boolean;
+  projectId: string;
+  setActiveProject: React.Dispatch<React.SetStateAction<string | null>>;
+  data?: IModule;
+  isMobile?: boolean;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: "backlog",
+  lead_id: null,
+  member_ids: [],
+};
+
+export function ModuleForm(props: Props) {
+  const { handleFormSubmit, handleClose, status, projectId, setActiveProject, data, isMobile = false } = props;
+  // store hooks
+  const { projectsWithCreatePermissions } = useUser();
+  // form info
+  const {
+    formState: { errors, isSubmitting, dirtyFields },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<IModule>({
+    defaultValues: {
+      project_id: projectId,
+      name: data?.name || "",
+      description: data?.description || "",
+      status: data?.status || "backlog",
+      lead_id: data?.lead_id || null,
+      member_ids: data?.member_ids || [],
+    },
+  });
+
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_MODULE, isMobile);
+
+  const { t } = useTranslation();
+
+  const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
+    await handleFormSubmit(formData, dirtyFields);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, reset]);
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
+      <div className="space-y-5 p-5">
+        <div className="flex items-center gap-x-3">
+          {!status && (
+            <Controller
+              control={control}
+              name="project_id"
+              render={({ field: { value, onChange } }) => (
+                <div className="h-7">
+                  <ProjectDropdown
+                    value={value}
+                    onChange={(val) => {
+                      if (!Array.isArray(val)) {
+                        onChange(val);
+                        setActiveProject(val);
+                      }
+                    }}
+                    multiple={false}
+                    buttonVariant="border-with-text"
+                    renderCondition={(projectId) => !!projectsWithCreatePermissions?.[projectId]}
+                    tabIndex={getIndex("cover_image")}
+                  />
+                </div>
+              )}
+            />
+          )}
+          <h3 className="text-18 font-medium text-secondary">
+            {status ? t("common.update") : t("common.create")} {t("common.module").toLowerCase()}
+          </h3>
+        </div>
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: t("title_is_required"),
+                maxLength: {
+                  value: 255,
+                  message: t("title_should_be_less_than_255_characters"),
+                },
+              }}
+              render={({ field: { value, onChange } }) => (
+                <Field name="name" invalid={Boolean(errors?.name)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      id="name"
+                      name="name"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      placeholder={t("title")}
+                      tabIndex={getIndex("name")}
+                      autoFocus
+                    />
+                  </InputGroup>
+                </Field>
+              )}
+            />
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
+          </div>
+          <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup resize="none">
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      autoResize
+                      maxRows={8}
+                      id="description"
+                      name="description"
+                      value={value}
+                      onChange={onChange}
+                      placeholder={t("description")}
+                      tabIndex={getIndex("description")}
+                    />
+                  </TextAreaGroup>
+                </Field>
+              )}
+            />
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Controller
+              control={control}
+              name="start_date"
+              render={({ field: { value: startDateValue, onChange: onChangeStartDate } }) => (
+                <Controller
+                  control={control}
+                  name="target_date"
+                  render={({ field: { value: endDateValue, onChange: onChangeEndDate } }) => (
+                    <DateRangeDropdown
+                      buttonVariant="border-with-text"
+                      className="h-7"
+                      value={{
+                        from: getDate(startDateValue),
+                        to: getDate(endDateValue),
+                      }}
+                      onSelect={(val) => {
+                        onChangeStartDate(val?.from ? renderFormattedPayloadDate(val.from) : null);
+                        onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
+                      }}
+                      placeholder={{
+                        from: t("start_date"),
+                        to: t("end_date"),
+                      }}
+                      hideIcon={{
+                        to: true,
+                      }}
+                      tabIndex={getIndex("date_range")}
+                    />
+                  )}
+                />
+              )}
+            />
+            <div className="h-7">
+              <ModuleStatusSelect control={control} error={errors.status} tabIndex={getIndex("status")} />
+            </div>
+            <Controller
+              control={control}
+              name="lead_id"
+              render={({ field: { value, onChange } }) => (
+                <div className="h-7">
+                  <MemberDropdown
+                    value={value}
+                    onChange={onChange}
+                    projectId={projectId}
+                    multiple={false}
+                    buttonVariant="border-with-text"
+                    placeholder={t("lead")}
+                    tabIndex={getIndex("lead")}
+                  />
+                </div>
+              )}
+            />
+            <Controller
+              control={control}
+              name="member_ids"
+              render={({ field: { value, onChange } }) => (
+                <div className="h-7">
+                  <MemberDropdown
+                    value={value}
+                    onChange={onChange}
+                    projectId={projectId}
+                    multiple
+                    buttonVariant={value && value.length > 0 ? "transparent-without-text" : "border-with-text"}
+                    buttonClassName={value && value.length > 0 ? "hover:bg-transparent px-0" : ""}
+                    placeholder={t("members")}
+                    tabIndex={getIndex("member_ids")}
+                  />
+                </div>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
+          {t("cancel")}
+        </Button>
+        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
+          {status
+            ? isSubmitting
+              ? t("updating")
+              : t("project_module.update_module")
+            : isSubmitting
+              ? t("creating")
+              : t("project_module.create_module")}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/web/core/components/modules/gantt-chart/blocks.tsx b/apps/web/core/components/modules/gantt-chart/blocks.tsx
new file mode 100644
index 0000000..9a7b4b8
--- /dev/null
+++ b/apps/web/core/components/modules/gantt-chart/blocks.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+// ui
+import { MODULE_STATUS } from "@plane/constants";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// components
+import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
+import { getBlockViewDetails } from "@/components/issues/issue-layouts/utils";
+// constants
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleGanttBlock = observer(function ModuleGanttBlock(props: Props) {
+  const { moduleId } = props;
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  const { message, blockStyle } = getBlockViewDetails(
+    moduleDetails,
+    MODULE_STATUS.find((s) => s.value === moduleDetails?.status)?.color ?? ""
+  );
+
+  return (
+    <Tooltip
+      label={moduleDetails?.name ? `${moduleDetails.name}: ${message ?? ""}` : (message ?? "")}
+      layout="stacked"
+      align="start"
+      disabled={isMobile}
+    >
+      <div
+        className="relative flex h-full w-full cursor-pointer items-center rounded-sm"
+        style={blockStyle}
+        onClick={() =>
+          router.push(
+            `/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`
+          )
+        }
+      >
+        <div className="absolute top-0 left-0 h-full w-full bg-surface-1/50" />
+        <div
+          className="sticky w-auto truncate overflow-hidden px-2.5 py-1 text-13 text-primary"
+          style={{ left: `${SIDEBAR_WIDTH}px` }}
+        >
+          {moduleDetails?.name}
+        </div>
+      </div>
+    </Tooltip>
+  );
+});
+
+export const ModuleGanttSidebarBlock = observer(function ModuleGanttSidebarBlock(props: Props) {
+  const { moduleId } = props;
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+
+  return (
+    <Link
+      className="relative flex h-full w-full items-center gap-2"
+      href={`/${workspaceSlug?.toString()}/projects/${moduleDetails?.project_id}/modules/${moduleDetails?.id}`}
+      draggable={false}
+    >
+      <ModuleStatusIcon status={moduleDetails?.status ?? "backlog"} height="16px" width="16px" />
+      <h6 className="flex-grow truncate text-13 font-medium">{moduleDetails?.name}</h6>
+    </Link>
+  );
+});
diff --git a/apps/web/core/components/modules/gantt-chart/index.ts b/apps/web/core/components/modules/gantt-chart/index.ts
new file mode 100644
index 0000000..1b44f4a
--- /dev/null
+++ b/apps/web/core/components/modules/gantt-chart/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./blocks";
+export * from "./modules-list-layout";
diff --git a/apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx b/apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx
new file mode 100644
index 0000000..8f5df8d
--- /dev/null
+++ b/apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// PLane
+import { GANTT_TIMELINE_TYPE } from "@plane/types";
+import type { IBlockUpdateData, IBlockUpdateDependencyData, IModule } from "@plane/types";
+// components
+import { GanttChartRoot, ModuleGanttSidebar } from "@/components/gantt-chart";
+import { TimeLineTypeContext } from "@/components/gantt-chart/contexts";
+import { ModuleGanttBlock } from "@/components/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useProject } from "@/hooks/store/use-project";
+
+export const ModulesListGanttChartView = observer(function ModulesListGanttChartView() {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store
+  const { currentProjectDetails } = useProject();
+  const { getFilteredModuleIds, updateModuleDetails } = useModule();
+  const { currentProjectDisplayFilters: displayFilters } = useModuleFilter();
+
+  // derived values
+  const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined;
+
+  const handleModuleUpdate = async (module: IModule, data: IBlockUpdateData) => {
+    if (!workspaceSlug || !module) return;
+
+    const payload: any = { ...data };
+    if (data.sort_order) payload.sort_order = data.sort_order.newSortOrder;
+
+    await updateModuleDetails(workspaceSlug.toString(), module.project_id, module.id, payload);
+  };
+
+  const updateBlockDates = async (blockUpdates: IBlockUpdateDependencyData[]) => {
+    const blockUpdate = blockUpdates[0];
+
+    if (!blockUpdate) return;
+
+    const payload: Partial<IModule> = {};
+
+    if (blockUpdate.start_date) payload.start_date = blockUpdate.start_date;
+    if (blockUpdate.target_date) payload.target_date = blockUpdate.target_date;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), blockUpdate.id, payload);
+  };
+
+  const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
+
+  if (!filteredModuleIds) return null;
+
+  return (
+    <TimeLineTypeContext.Provider value={GANTT_TIMELINE_TYPE.MODULE}>
+      <GanttChartRoot
+        title="Modules"
+        loaderTitle="Modules"
+        blockIds={filteredModuleIds}
+        sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
+        blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
+        blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
+        enableBlockLeftResize={isAllowed}
+        enableBlockRightResize={isAllowed}
+        enableBlockMove={isAllowed}
+        enableReorder={isAllowed && displayFilters?.order_by === "sort_order"}
+        enableAddBlock={isAllowed}
+        updateBlockDates={updateBlockDates}
+        showAllBlocks
+      />
+    </TimeLineTypeContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/modules/index.ts b/apps/web/core/components/modules/index.ts
new file mode 100644
index 0000000..96ef553
--- /dev/null
+++ b/apps/web/core/components/modules/index.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./applied-filters";
+export * from "./dropdowns";
+export * from "./select";
+export * from "./sidebar-select";
+export * from "./delete-module-modal";
+export * from "./form";
+export * from "./gantt-chart";
+export * from "./links";
+export * from "./modal";
+export * from "./modules-list-view";
+export * from "./module-card-item";
+export * from "./module-list-item";
+export * from "./module-peek-overview";
+export * from "./quick-actions";
+export * from "./module-list-item-action";
+export * from "./module-view-header";
+export * from "./module-layout-icon";
+export * from "./analytics-sidebar";
+// archived modules
+export * from "./archived-modules";
diff --git a/apps/web/core/components/modules/links/create-update-modal.tsx b/apps/web/core/components/modules/links/create-update-modal.tsx
new file mode 100644
index 0000000..3d437a0
--- /dev/null
+++ b/apps/web/core/components/modules/links/create-update-modal.tsx
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+// plane types
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { ILinkDetails, ModuleLink } from "@plane/types";
+// plane ui
+import { ModalCore } from "@plane/ui";
+type Props = {
+  createLink: (formData: ModuleLink) => Promise<void>;
+  data?: ILinkDetails | null;
+  isOpen: boolean;
+  handleClose: () => void;
+  updateLink: (formData: ModuleLink, linkId: string) => Promise<void>;
+};
+
+const defaultValues: ModuleLink = {
+  title: "",
+  url: "",
+};
+
+export function CreateUpdateModuleLinkModal(props: Props) {
+  const { isOpen, handleClose, createLink, updateLink, data } = props;
+  // form info
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+  } = useForm<ModuleLink>({
+    defaultValues,
+  });
+
+  const onClose = () => {
+    handleClose();
+  };
+
+  const handleFormSubmit = async (formData: ModuleLink) => {
+    const parsedUrl = formData.url.startsWith("http") ? formData.url : `http://${formData.url}`;
+    const payload = {
+      title: formData.title,
+      url: parsedUrl,
+    };
+
+    try {
+      if (!data) {
+        await createLink(payload);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module link created successfully.",
+        });
+      } else {
+        await updateLink(payload, data.id);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module link updated successfully.",
+        });
+      }
+      onClose();
+    } catch (error: any) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: error?.data?.error ?? "Some error occurred. Please try again.",
+      });
+    }
+  };
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      ...data,
+    });
+  }, [data, isOpen, reset]);
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={onClose}>
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
+        <div className="space-y-5 p-5">
+          <h3 className="text-18 font-medium text-secondary">{data ? "Update" : "Add"} link</h3>
+          <div className="mt-2 space-y-3">
+            <div>
+              <label htmlFor="url" className="mb-2 text-secondary">
+                URL
+              </label>
+              <Controller
+                control={control}
+                name="url"
+                rules={{
+                  required: "URL is required",
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Field name="url" invalid={Boolean(errors.url)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="url"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        placeholder="Type or paste a URL"
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+            </div>
+            <div>
+              <label htmlFor="title" className="mb-2 text-secondary">
+                Display title
+                <span className="block text-10">Optional</span>
+              </label>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Field name="title" invalid={Boolean(errors.title)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="title"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        placeholder="What you'd like to see this link as"
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+            {data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/modules/links/index.ts b/apps/web/core/components/modules/links/index.ts
new file mode 100644
index 0000000..80472cd
--- /dev/null
+++ b/apps/web/core/components/modules/links/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./create-update-modal";
+export * from "./list-item";
+export * from "./list";
diff --git a/apps/web/core/components/modules/links/list-item.tsx b/apps/web/core/components/modules/links/list-item.tsx
new file mode 100644
index 0000000..3bf9367
--- /dev/null
+++ b/apps/web/core/components/modules/links/list-item.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import { CopyOutline, DeleteOutline, EditOutline } from "@makeplane/propel/icons";
+// plane types
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { ILinkDetails } from "@plane/types";
+// plane ui
+import { getIconForLink, copyTextToClipboard, calculateTimeAgo } from "@plane/utils";
+// helpers
+//
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  handleDeleteLink: () => void;
+  handleEditLink: () => void;
+  isEditingAllowed: boolean;
+  link: ILinkDetails;
+};
+
+export const ModulesLinksListItem = observer(function ModulesLinksListItem(props: Props) {
+  const { handleDeleteLink, handleEditLink, isEditingAllowed, link } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const createdByDetails = getUserDetails(link.created_by);
+  // platform os
+  const { isMobile } = usePlatformOS();
+
+  const Icon = getIconForLink(link.url);
+
+  const copyToClipboard = (text: string) => {
+    copyTextToClipboard(text).then(() =>
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Copied to clipboard",
+        message: "The URL has been successfully copied to your clipboard",
+      })
+    );
+  };
+
+  return (
+    <div className="relative flex flex-col rounded-md bg-layer-3 p-2.5">
+      <div className="flex w-full items-start justify-between gap-2">
+        <div className="flex items-start gap-2 truncate">
+          <span className="py-1">
+            <Icon className="size-3 shrink-0 stroke-2 text-tertiary group-hover:text-primary" />
+          </span>
+          <Tooltip label={link.title && link.title !== "" ? link.title : link.url} layout="stacked" disabled={isMobile}>
+            <a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-11">
+              {link.title && link.title !== "" ? link.title : link.url}
+            </a>
+          </Tooltip>
+        </div>
+
+        <div className="z-1 flex shrink-0 items-center">
+          {isEditingAllowed && (
+            <button
+              type="button"
+              className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-layer-transparent-hover"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleEditLink();
+              }}
+            >
+              <EditOutline className="size-3 stroke-[1.5]" />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => copyToClipboard(link.url)}
+            className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-layer-transparent-hover"
+          >
+            <CopyOutline className="size-3 stroke-[1.5]" />
+          </button>
+          {isEditingAllowed && (
+            <button
+              type="button"
+              className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-layer-transparent-hover"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleDeleteLink();
+              }}
+            >
+              <DeleteOutline className="size-3 stroke-[1.5]" />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="px-5">
+        <p className="mt-0.5 flex items-center gap-1.5 stroke-[1.5] text-11 text-tertiary">
+          Added {calculateTimeAgo(link.created_at)}{" "}
+          {createdByDetails && (
+            <>by {createdByDetails?.is_bot ? createdByDetails?.first_name + " Bot" : createdByDetails?.display_name}</>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/modules/links/list.tsx b/apps/web/core/components/modules/links/list.tsx
new file mode 100644
index 0000000..4497ae6
--- /dev/null
+++ b/apps/web/core/components/modules/links/list.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+// plane types
+import type { ILinkDetails } from "@plane/types";
+// components
+import { ModulesLinksListItem } from "@/components/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+
+type Props = {
+  disabled?: boolean;
+  handleDeleteLink: (linkId: string) => void;
+  handleEditLink: (link: ILinkDetails) => void;
+  moduleId: string;
+};
+
+export const ModuleLinksList = observer(function ModuleLinksList(props: Props) {
+  const { moduleId, handleDeleteLink, handleEditLink, disabled } = props;
+  // store hooks
+  const { getModuleById } = useModule();
+  // derived values
+  const currentModule = getModuleById(moduleId);
+  const moduleLinks = currentModule?.link_module;
+  // memoized link handlers
+  const memoizedDeleteLink = useCallback((id: string) => handleDeleteLink(id), [handleDeleteLink]);
+  const memoizedEditLink = useCallback((link: ILinkDetails) => handleEditLink(link), [handleEditLink]);
+
+  if (!moduleLinks) return null;
+
+  return (
+    <>
+      {moduleLinks.map((link) => (
+        <ModulesLinksListItem
+          key={link.id}
+          handleDeleteLink={() => memoizedDeleteLink(link.id)}
+          handleEditLink={() => memoizedEditLink(link)}
+          isEditingAllowed={!disabled}
+          link={link}
+        />
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/modal.tsx b/apps/web/core/components/modules/modal.tsx
new file mode 100644
index 0000000..621bfa0
--- /dev/null
+++ b/apps/web/core/components/modules/modal.tsx
@@ -0,0 +1,149 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useForm } from "react-hook-form";
+// Plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IModule } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// components
+import { ModuleForm } from "@/components/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import useKeypress from "@/hooks/use-keypress";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  data?: IModule;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+const defaultValues: Partial<IModule> = {
+  name: "",
+  description: "",
+  status: "backlog",
+  lead_id: null,
+  member_ids: [],
+};
+
+export const CreateUpdateModuleModal = observer(function CreateUpdateModuleModal(props: Props) {
+  const { isOpen, onClose, data, workspaceSlug, projectId } = props;
+  // states
+  const [activeProject, setActiveProject] = useState<string | null>(null);
+  // store hooks
+  const { workspaceProjectIds } = useProject();
+  const { createModule, updateModuleDetails } = useModule();
+  const { isMobile } = usePlatformOS();
+
+  const handleClose = () => {
+    reset(defaultValues);
+    onClose();
+  };
+
+  const { reset } = useForm<IModule>({
+    defaultValues,
+  });
+
+  const handleCreateModule = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const selectedProjectId = payload.project_id ?? projectId.toString();
+    await createModule(workspaceSlug.toString(), selectedProjectId, payload)
+      .then((_res) => {
+        handleClose();
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module created successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? err?.error ?? "Module could not be created. Please try again.",
+        });
+      });
+  };
+
+  const handleUpdateModule = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId || !data) return;
+
+    const selectedProjectId = payload.project_id ?? projectId.toString();
+    await updateModuleDetails(workspaceSlug.toString(), selectedProjectId, data.id, payload)
+      .then((_res) => {
+        handleClose();
+
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module updated successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? err?.error ?? "Module could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const handleFormSubmit = async (formData: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload: Partial<IModule> = {
+      ...formData,
+    };
+    if (!data) await handleCreateModule(payload);
+    else await handleUpdateModule(payload);
+  };
+
+  useEffect(() => {
+    // if modal is closed, reset active project to null
+    // and return to avoid activeProject being set to some other project
+    if (!isOpen) {
+      setActiveProject(null);
+      return;
+    }
+
+    // if data is present, set active project to the project of the
+    // issue. This has more priority than the project in the url.
+    if (data && data.project_id) {
+      setActiveProject(data.project_id);
+      return;
+    }
+
+    // if data is not present, set active project to the project
+    // in the url. This has the least priority.
+    if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProject)
+      setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
+  }, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
+
+  useKeypress("Escape", () => {
+    if (isOpen) handleClose();
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <ModuleForm
+        handleFormSubmit={handleFormSubmit}
+        handleClose={handleClose}
+        status={data ? true : false}
+        projectId={activeProject ?? ""}
+        setActiveProject={setActiveProject}
+        data={data}
+        isMobile={isMobile}
+      />
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/modules/module-card-item.tsx b/apps/web/core/components/modules/module-card-item.tsx
new file mode 100644
index 0000000..f657d66
--- /dev/null
+++ b/apps/web/core/components/modules/module-card-item.tsx
@@ -0,0 +1,267 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { SyntheticEvent } from "react";
+import React, { useRef } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { InfoOutline, UserAltOutline, WorkItemsOutline } from "@makeplane/propel/icons";
+// plane package imports
+import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { LinearProgress } from "@makeplane/propel/components/linear-progress";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IModule } from "@plane/types";
+import { Card, FavoriteStar } from "@plane/ui";
+import { getDate, renderFormattedPayloadDate, generateQueryParams } from "@plane/utils";
+// components
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+import { ModuleQuickActions } from "@/components/modules";
+import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
+  const { moduleId } = props;
+  // refs
+  const parentRef = useRef(null);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { getModuleById, addModuleToFavorites, removeModuleFromFavorites, updateModuleDetails } = useModule();
+  const { getUserDetails } = useMember();
+  // local storage
+  const { setValue: toggleFavoriteMenu, storedValue } = useLocalStorage<boolean>(IS_FAVORITE_MENU_OPEN, false);
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const isDisabled = !isEditingAllowed || !!moduleDetails?.archived_at;
+  const renderIcon = Boolean(moduleDetails?.start_date) || Boolean(moduleDetails?.target_date);
+
+  const { isMobile } = usePlatformOS();
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then(
+      () => {
+        if (!storedValue) toggleFavoriteMenu(true);
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding module to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the module to favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const removeFromFavoritePromise = removeModuleFromFavorites(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      moduleId
+    );
+
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing module from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the module from favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleEventPropagation = (e: SyntheticEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  const handleModuleDetailsChange = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId, payload)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module updated successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? "Module could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const query = generateQueryParams(searchParams, ["peekModule"]);
+    if (searchParams.has("peekModule") && searchParams.get("peekModule") === moduleId) {
+      router.push(`${pathname}?${query}`);
+    } else {
+      router.push(`${pathname}?${query && `${query}&`}peekModule=${moduleId}`);
+    }
+  };
+
+  if (!moduleDetails) return null;
+
+  const moduleTotalIssues =
+    moduleDetails.backlog_issues +
+    moduleDetails.unstarted_issues +
+    moduleDetails.started_issues +
+    moduleDetails.completed_issues +
+    moduleDetails.cancelled_issues;
+
+  const moduleCompletedIssues = moduleDetails.completed_issues;
+
+  // const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  const issueCount = moduleDetails
+    ? !moduleTotalIssues || moduleTotalIssues === 0
+      ? `0 work items`
+      : moduleTotalIssues === moduleCompletedIssues
+        ? `${moduleTotalIssues} Work item${moduleTotalIssues > 1 ? `s` : ``}`
+        : `${moduleCompletedIssues}/${moduleTotalIssues} Work items`
+    : `0 work items`;
+
+  const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
+  const progressValue = moduleTotalIssues > 0 ? (moduleCompletedIssues / moduleTotalIssues) * 100 : 0;
+
+  return (
+    <div className="relative" data-prevent-progress>
+      <Link ref={parentRef} href={`/${workspaceSlug}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}>
+        <Card>
+          <div>
+            <div className="flex items-center justify-between gap-2">
+              <Tooltip label={moduleDetails.name} layout="stacked" disabled={isMobile}>
+                <span className="truncate text-14 font-medium">{moduleDetails.name}</span>
+              </Tooltip>
+              <div className="flex items-center gap-2" onClick={handleEventPropagation}>
+                {moduleStatus && (
+                  <ModuleStatusDropdown
+                    isDisabled={isDisabled}
+                    moduleDetails={moduleDetails}
+                    handleModuleDetailsChange={handleModuleDetailsChange}
+                  />
+                )}
+                <button onClick={openModuleOverview}>
+                  <InfoOutline className="h-4 w-4 text-placeholder" />
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-1.5 text-secondary">
+                <WorkItemsOutline className="h-4 w-4 text-tertiary" />
+                <span className="text-11 text-tertiary">{issueCount ?? "0 Work item"}</span>
+              </div>
+              {moduleLeadDetails ? (
+                <span className="cursor-default">
+                  <ButtonAvatars showTooltip={false} userIds={moduleLeadDetails?.id} />
+                </span>
+              ) : (
+                <Tooltip label="No lead">
+                  <UserAltOutline className="mx-1 h-4 w-4 text-tertiary" />
+                </Tooltip>
+              )}
+            </div>
+            <LinearProgress
+              value={progressValue}
+              size="md"
+              variant="brand"
+              showValue={false}
+              aria-label="Module progress"
+            />
+            <div className="flex items-center justify-between py-0.5" onClick={handleEventPropagation}>
+              <DateRangeDropdown
+                buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-tertiary border-[0.5px] border-strong rounded-sm text-11`}
+                buttonVariant="transparent-with-text"
+                className="h-7"
+                value={{
+                  from: getDate(moduleDetails.start_date),
+                  to: getDate(moduleDetails.target_date),
+                }}
+                onSelect={(val) => {
+                  handleModuleDetailsChange({
+                    start_date: val?.from ? renderFormattedPayloadDate(val.from) : null,
+                    target_date: val?.to ? renderFormattedPayloadDate(val.to) : null,
+                  });
+                }}
+                placeholder={{
+                  from: "Start date",
+                  to: "End date",
+                }}
+                disabled={isDisabled}
+                hideIcon={{ from: renderIcon ?? true, to: renderIcon }}
+              />
+            </div>
+          </div>
+        </Card>
+      </Link>
+      <div className="absolute right-4 bottom-[18px] flex items-center gap-1.5">
+        {isEditingAllowed && (
+          <FavoriteStar
+            onClick={(e) => {
+              if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+              else handleAddToFavorites(e);
+            }}
+            selected={!!moduleDetails.is_favorite}
+          />
+        )}
+        {workspaceSlug && projectId && (
+          <ModuleQuickActions
+            parentRef={parentRef}
+            moduleId={moduleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/modules/module-layout-icon.tsx b/apps/web/core/components/modules/module-layout-icon.tsx
new file mode 100644
index 0000000..498bfae
--- /dev/null
+++ b/apps/web/core/components/modules/module-layout-icon.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { GridOutline, ListOutline, TimelineOutline } from "@makeplane/propel/icons";
+import type { TModuleLayoutOptions } from "@plane/types";
+import { cn } from "@plane/utils";
+
+interface ILayoutIcon {
+  className?: string;
+  containerClassName?: string;
+  layoutType: TModuleLayoutOptions;
+  size?: number;
+  withContainer?: boolean;
+}
+
+export function ModuleLayoutIcon(props: ILayoutIcon) {
+  const { layoutType, className = "", containerClassName = "", size = 14, withContainer = false } = props;
+
+  // get Layout icon
+  const icons = {
+    list: ListOutline,
+    board: GridOutline,
+    gantt: TimelineOutline,
+  };
+  const Icon = icons[layoutType ?? "list"];
+
+  if (!Icon) return null;
+
+  return (
+    <>
+      {withContainer ? (
+        <div
+          className={cn("flex flex-shrink-0 items-center justify-center rounded-sm border p-0.5", containerClassName)}
+        >
+          <Icon width={size} height={size} className={cn(className)} />
+        </div>
+      ) : (
+        <Icon width={size} height={size} className={cn("flex-shrink-0", className)} />
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/modules/module-list-item-action.tsx b/apps/web/core/components/modules/module-list-item-action.tsx
new file mode 100644
index 0000000..34c9f8d
--- /dev/null
+++ b/apps/web/core/components/modules/module-list-item-action.tsx
@@ -0,0 +1,195 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { UserAltOutline } from "@makeplane/propel/icons";
+// Plane imports
+import { MODULE_STATUS, EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IModule } from "@plane/types";
+import { FavoriteStar } from "@plane/ui";
+import { renderFormattedPayloadDate, getDate } from "@plane/utils";
+// components
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+import { ModuleQuickActions } from "@/components/modules";
+import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useUserPermissions } from "@/hooks/store/user";
+import { ButtonAvatars } from "../dropdowns/member/avatar";
+
+type Props = {
+  moduleId: string;
+  moduleDetails: IModule;
+  parentRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export const ModuleListItemAction = observer(function ModuleListItemAction(props: Props) {
+  const { moduleId, moduleDetails, parentRef } = props;
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  //   store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { addModuleToFavorites, removeModuleFromFavorites, updateModuleDetails } = useModule();
+  const { getUserDetails } = useMember();
+
+  const { t } = useTranslation();
+
+  // local storage
+  const { setValue: toggleFavoriteMenu, storedValue } = useLocalStorage<boolean>(IS_FAVORITE_MENU_OPEN, false);
+  // derived values
+
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const isDisabled = !isEditingAllowed || !!moduleDetails?.archived_at;
+  const renderIcon = Boolean(moduleDetails.start_date) || Boolean(moduleDetails.target_date);
+
+  // handlers
+  const handleAddToFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const addToFavoritePromise = addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), moduleId).then(
+      () => {
+        // open favorites menu if closed
+        if (!storedValue) toggleFavoriteMenu(true);
+      }
+    );
+
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding module to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module added to favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the module to favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    const removeFromFavoritePromise = removeModuleFromFavorites(
+      workspaceSlug.toString(),
+      projectId.toString(),
+      moduleId
+    );
+
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing module from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Module removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the module from favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleModuleDetailsChange = async (payload: Partial<IModule>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId, payload)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Module updated successfully.",
+        });
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.detail ?? "Module could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
+
+  return (
+    <>
+      <DateRangeDropdown
+        buttonContainerClassName={`h-6 w-full flex ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"} items-center gap-1.5 text-tertiary border-[0.5px] border-strong rounded-sm text-11`}
+        buttonVariant="transparent-with-text"
+        className="h-7"
+        value={{
+          from: getDate(moduleDetails.start_date),
+          to: getDate(moduleDetails.target_date),
+        }}
+        onSelect={(val) => {
+          handleModuleDetailsChange({
+            start_date: val?.from ? renderFormattedPayloadDate(val.from) : null,
+            target_date: val?.to ? renderFormattedPayloadDate(val.to) : null,
+          });
+        }}
+        mergeDates
+        placeholder={{
+          from: t("start_date"),
+          to: t("end_date"),
+        }}
+        disabled={isDisabled}
+        hideIcon={{ from: renderIcon ?? true, to: renderIcon }}
+      />
+
+      {moduleStatus && (
+        <ModuleStatusDropdown
+          isDisabled={isDisabled}
+          moduleDetails={moduleDetails}
+          handleModuleDetailsChange={handleModuleDetailsChange}
+        />
+      )}
+
+      {moduleLeadDetails ? (
+        <span className="cursor-default">
+          <ButtonAvatars showTooltip={false} userIds={moduleLeadDetails?.id} />
+        </span>
+      ) : (
+        <Tooltip label="No lead">
+          <UserAltOutline className="h-4 w-4 text-tertiary" />
+        </Tooltip>
+      )}
+
+      {isEditingAllowed && !moduleDetails.archived_at && (
+        <FavoriteStar
+          onClick={(e) => {
+            if (moduleDetails.is_favorite) handleRemoveFromFavorites(e);
+            else handleAddToFavorites(e);
+          }}
+          selected={moduleDetails.is_favorite}
+        />
+      )}
+      {workspaceSlug && projectId && (
+        <div className="hidden md:block">
+          <ModuleQuickActions
+            parentRef={parentRef}
+            moduleId={moduleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/module-list-item.tsx b/apps/web/core/components/modules/module-list-item.tsx
new file mode 100644
index 0000000..cf0e0c8
--- /dev/null
+++ b/apps/web/core/components/modules/module-list-item.tsx
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+// icons
+import { InfoOutline, TickOutline } from "@makeplane/propel/icons";
+// ui
+import { CircularProgress } from "@makeplane/propel/components/circular-progress";
+// components
+import { generateQueryParams } from "@plane/utils";
+import { ListItem } from "@/components/core/list";
+import { ModuleListItemAction, ModuleQuickActions } from "@/components/modules";
+// helpers
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  moduleId: string;
+};
+
+export const ModuleListItem = observer(function ModuleListItem(props: Props) {
+  const { moduleId } = props;
+  // refs
+  const parentRef = useRef(null);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  // store hooks
+  const { getModuleById } = useModule();
+  const { isMobile } = usePlatformOS();
+
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+
+  if (!moduleDetails) return null;
+
+  const completionPercentage =
+    ((moduleDetails.completed_issues + moduleDetails.cancelled_issues) / moduleDetails.total_issues) * 100;
+
+  const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
+
+  const completedModuleCheck = moduleDetails.status === "completed";
+
+  // handlers
+  const openModuleOverview = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const query = generateQueryParams(searchParams, ["peekModule"]);
+    if (searchParams.has("peekModule") && searchParams.get("peekModule") === moduleId) {
+      router.push(`${pathname}?${query}`);
+    } else {
+      router.push(`${pathname}?${query && `${query}&`}peekModule=${moduleId}`);
+    }
+  };
+
+  const handleArchivedModuleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+    openModuleOverview(e);
+  };
+
+  const handleItemClick = moduleDetails.archived_at ? handleArchivedModuleClick : undefined;
+
+  return (
+    <ListItem
+      title={moduleDetails?.name ?? ""}
+      itemLink={`/${workspaceSlug?.toString()}/projects/${moduleDetails.project_id}/modules/${moduleDetails.id}`}
+      onItemClick={handleItemClick}
+      prependTitleElement={
+        <div className="relative size-[30px]">
+          <div className="absolute inset-0 flex scale-150 items-center justify-center">
+            <CircularProgress
+              value={progress}
+              size="md"
+              variant={progress === 100 ? "success" : "brand"}
+              aria-label="Module progress"
+            />
+          </div>
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            {completedModuleCheck ? (
+              progress === 100 ? (
+                <TickOutline className="h-3 w-3 stroke-[2] text-accent-primary" />
+              ) : (
+                <span className="text-13 text-accent-primary">{`!`}</span>
+              )
+            ) : progress === 100 ? (
+              <TickOutline className="h-3 w-3 stroke-[2] text-accent-primary" />
+            ) : (
+              <span className="text-9 text-tertiary">{`${progress}%`}</span>
+            )}
+          </div>
+        </div>
+      }
+      appendTitleElement={
+        <button
+          onClick={openModuleOverview}
+          className={`z-[5] flex-shrink-0 ${isMobile ? "flex" : "hidden group-hover:flex"}`}
+        >
+          <InfoOutline className="h-4 w-4 text-placeholder" />
+        </button>
+      }
+      actionableItems={<ModuleListItemAction moduleId={moduleId} moduleDetails={moduleDetails} parentRef={parentRef} />}
+      quickActionElement={
+        <div className="block md:hidden">
+          <ModuleQuickActions
+            parentRef={parentRef}
+            moduleId={moduleId}
+            projectId={projectId.toString()}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        </div>
+      }
+      isMobile={isMobile}
+      parentRef={parentRef}
+    />
+  );
+});
diff --git a/apps/web/core/components/modules/module-peek-overview.tsx b/apps/web/core/components/modules/module-peek-overview.tsx
new file mode 100644
index 0000000..24a11fe
--- /dev/null
+++ b/apps/web/core/components/modules/module-peek-overview.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { usePathname, useSearchParams } from "next/navigation";
+// hooks
+import { generateQueryParams } from "@plane/utils";
+import { useModule } from "@/hooks/store/use-module";
+import { useAppRouter } from "@/hooks/use-app-router";
+// components
+import { ModuleAnalyticsSidebar } from "./";
+
+type Props = {
+  projectId: string;
+  workspaceSlug: string;
+  isArchived?: boolean;
+};
+
+export const ModulePeekOverview = observer(function ModulePeekOverview({
+  projectId,
+  workspaceSlug,
+  isArchived = false,
+}: Props) {
+  // router
+  const router = useAppRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const peekModule = searchParams.get("peekModule");
+  // refs
+  const ref = React.useRef(null);
+  // store hooks
+  const { fetchModuleDetails, fetchArchivedModuleDetails } = useModule();
+
+  const handleClose = () => {
+    const query = generateQueryParams(searchParams, ["peekModule"]);
+    router.push(`${pathname}?${query}`);
+  };
+
+  useEffect(() => {
+    if (!peekModule) return;
+    if (isArchived) fetchArchivedModuleDetails(workspaceSlug, projectId, peekModule.toString());
+    else fetchModuleDetails(workspaceSlug, projectId, peekModule.toString());
+  }, [fetchArchivedModuleDetails, fetchModuleDetails, isArchived, peekModule, projectId, workspaceSlug]);
+
+  return (
+    <>
+      {peekModule && (
+        <div
+          ref={ref}
+          className="absolute right-0 z-[9] flex h-full w-full max-w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 duration-300 md:relative"
+          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={peekModule?.toString() ?? ""}
+            handleClose={handleClose}
+            isArchived={isArchived}
+          />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/module-status-dropdown.tsx b/apps/web/core/components/modules/module-status-dropdown.tsx
new file mode 100644
index 0000000..ef532e6
--- /dev/null
+++ b/apps/web/core/components/modules/module-status-dropdown.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TModuleStatus } from "@plane/propel/icons";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import type { IModule } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+
+type Props = {
+  isDisabled: boolean;
+  moduleDetails: IModule;
+  handleModuleDetailsChange: (payload: Partial<IModule>) => Promise<void>;
+};
+
+export const ModuleStatusDropdown = observer(function ModuleStatusDropdown(props: Props) {
+  const { isDisabled, moduleDetails, handleModuleDetailsChange } = props;
+  const { t } = useTranslation();
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+
+  if (!moduleStatus) return <></>;
+
+  return (
+    <CustomSelect
+      customButton={
+        <span
+          className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-11 ${
+            isDisabled ? "cursor-not-allowed" : "cursor-pointer"
+          }`}
+          style={{
+            color: moduleStatus ? moduleStatus.color : "#a3a3a2",
+            backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
+          }}
+        >
+          {(moduleStatus && t(moduleStatus?.i18n_label)) ?? t("project_modules.status.backlog")}
+        </span>
+      }
+      value={moduleStatus?.value}
+      onChange={(val: TModuleStatus) => {
+        handleModuleDetailsChange({ status: val });
+      }}
+      disabled={isDisabled}
+    >
+      {MODULE_STATUS.map((status) => (
+        <CustomSelect.Option key={status.value} value={status.value}>
+          <div className="flex items-center gap-2">
+            <ModuleStatusIcon status={status.value} />
+            {t(status.i18n_label)}
+          </div>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+});
diff --git a/apps/web/core/components/modules/module-view-header.tsx b/apps/web/core/components/modules/module-view-header.tsx
new file mode 100644
index 0000000..9f20e1e
--- /dev/null
+++ b/apps/web/core/components/modules/module-view-header.tsx
@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { CloseOutline, FilterOutline, SearchOutline } from "@makeplane/propel/icons";
+// plane helpers
+import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+// types
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TModuleFilters } from "@plane/types";
+// ui
+import { cn, calculateTotalFilters } from "@plane/utils";
+// plane utils
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules/dropdowns";
+// constants
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import { ModuleLayoutIcon } from "./module-layout-icon";
+import { IconButton } from "@plane/propel/icon-button";
+// i18n
+
+export const ModuleViewHeader = observer(function ModuleViewHeader() {
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // router
+  const { projectId } = useParams();
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // store hooks
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  const {
+    currentProjectDisplayFilters: displayFilters,
+    currentProjectFilters: filters,
+    searchQuery,
+    updateDisplayFilters,
+    updateFilters,
+    updateSearchQuery,
+  } = useModuleFilter();
+  const { t } = useTranslation();
+
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
+
+  // handlers
+  const handleFilters = useCallback(
+    (key: keyof TModuleFilters, value: string | string[]) => {
+      if (!projectId) return;
+      const newValues = filters?.[key] ?? [];
+
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      updateFilters(projectId.toString(), { [key]: newValues });
+    },
+    [filters, projectId, updateFilters]
+  );
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  useEffect(() => {
+    if (searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [searchQuery]);
+
+  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0 || displayFilters?.favorites;
+
+  return (
+    <div className="hidden h-full items-center gap-2 self-end sm:flex">
+      <div className="flex items-center">
+        {!isSearchOpen && (
+          <IconButton
+            variant="ghost"
+            size="lg"
+            className="p- -mr-1"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+            icon={SearchOutline}
+          />
+        )}
+        <div
+          className={cn(
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
+            {
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <SearchOutline className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
+            placeholder="Search"
+            value={searchQuery}
+            onChange={(e) => updateSearchQuery(e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                // updateSearchQuery("");
+                setIsSearchOpen(false);
+              }}
+            >
+              <CloseOutline className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      </div>
+      <ModuleOrderByDropdown
+        value={displayFilters?.order_by}
+        onChange={(val) => {
+          if (!projectId || val === displayFilters?.order_by) return;
+          updateDisplayFilters(projectId.toString(), {
+            order_by: val,
+          });
+        }}
+      />
+      <FiltersDropdown
+        icon={<FilterOutline className="h-3 w-3" />}
+        title="Filters"
+        placement="bottom-end"
+        isFiltersApplied={isFiltersApplied}
+      >
+        <ModuleFiltersSelection
+          displayFilters={displayFilters ?? {}}
+          filters={filters ?? {}}
+          handleDisplayFiltersUpdate={(val) => {
+            if (!projectId) return;
+            updateDisplayFilters(projectId.toString(), val);
+          }}
+          handleFiltersUpdate={handleFilters}
+          memberIds={workspaceMemberIds ?? undefined}
+        />
+      </FiltersDropdown>
+      <div className="hidden items-center gap-1 rounded-sm bg-layer-3 p-1 md:flex">
+        {MODULE_VIEW_LAYOUTS.map((layout) => (
+          <Tooltip key={layout.key} label={t(layout.i18n_title)} disabled={isMobile}>
+            <button
+              type="button"
+              className={cn(
+                "group grid h-5.5 w-7 place-items-center overflow-hidden rounded-sm transition-all hover:bg-layer-transparent-hover",
+                {
+                  "bg-layer-transparent-active hover:bg-layer-transparent-active":
+                    displayFilters?.layout === layout.key,
+                }
+              )}
+              onClick={() => {
+                if (!projectId) return;
+                updateDisplayFilters(projectId.toString(), { layout: layout.key });
+              }}
+            >
+              <ModuleLayoutIcon layoutType={layout.key} />
+            </button>
+          </Tooltip>
+        ))}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/modules/modules-list-view.tsx b/apps/web/core/components/modules/modules-list-view.tsx
new file mode 100644
index 0000000..0a5b1ab
--- /dev/null
+++ b/apps/web/core/components/modules/modules-list-view.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams, useSearchParams } from "next/navigation";
+// components
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EUserProjectRoles } from "@plane/types";
+import { ContentWrapper, Row, ERowVariant } from "@plane/ui";
+// components
+import { ListLayout } from "@/components/core/list";
+import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
+import { CycleModuleBoardLayoutLoader } from "@/components/ui/loader/cycle-module-board-loader";
+import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module-list-loader";
+import { GanttLayoutLoader } from "@/components/ui/loader/layouts/gantt-layout-loader";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useModule } from "@/hooks/store/use-module";
+import { useModuleFilter } from "@/hooks/store/use-module-filter";
+import { useUserPermissions } from "@/hooks/store/user";
+
+export const ModulesListView = observer(function ModulesListView() {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  const searchParams = useSearchParams();
+  const peekModule = searchParams.get("peekModule");
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { toggleCreateModuleModal } = useCommandPalette();
+  const { getProjectModuleIds, getFilteredModuleIds, loader } = useModule();
+  const { currentProjectDisplayFilters: displayFilters } = useModuleFilter();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const projectModuleIds = projectId ? getProjectModuleIds(projectId.toString()) : undefined;
+  const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined;
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  if (loader || !projectModuleIds || !filteredModuleIds)
+    return (
+      <>
+        {displayFilters?.layout === "list" && <CycleModuleListLayoutLoader />}
+        {displayFilters?.layout === "board" && <CycleModuleBoardLayoutLoader />}
+        {displayFilters?.layout === "gantt" && <GanttLayoutLoader />}
+      </>
+    );
+
+  if (projectModuleIds.length === 0)
+    return (
+      <EmptyStateDetailed
+        assetKey="module"
+        title={t("project_empty_state.modules.title")}
+        description={t("project_empty_state.modules.description")}
+        actions={[
+          {
+            label: t("project_empty_state.modules.cta_primary"),
+            onClick: () => toggleCreateModuleModal(true),
+            disabled: !canPerformEmptyStateActions,
+            variant: "primary",
+          },
+        ]}
+      />
+    );
+
+  if (filteredModuleIds.length === 0)
+    return (
+      <EmptyStateDetailed
+        assetKey="search"
+        title={t("common_empty_state.search.title")}
+        description={t("common_empty_state.search.description")}
+      />
+    );
+
+  return (
+    <ContentWrapper variant={ERowVariant.HUGGING}>
+      <div className="flex size-full justify-between">
+        {displayFilters?.layout === "list" && (
+          <ListLayout>
+            {filteredModuleIds.map((moduleId) => (
+              <ModuleListItem key={moduleId} moduleId={moduleId} />
+            ))}
+          </ListLayout>
+        )}
+        {displayFilters?.layout === "board" && (
+          <Row
+            className={`grid size-full grid-cols-1 gap-6 overflow-y-auto py-page-y ${
+              peekModule
+                ? "3xl:grid-cols-3 lg:grid-cols-1 xl:grid-cols-2"
+                : "3xl:grid-cols-4 lg:grid-cols-2 xl:grid-cols-3"
+            } vertical-scrollbar scrollbar-lg auto-rows-max transition-all`}
+          >
+            {filteredModuleIds.map((moduleId) => (
+              <ModuleCardItem key={moduleId} moduleId={moduleId} />
+            ))}
+          </Row>
+        )}
+        {displayFilters?.layout === "gantt" && (
+          <div className="size-full overflow-hidden">
+            <ModulesListGanttChartView />
+          </div>
+        )}
+        <div className="flex-shrink-0">
+          <ModulePeekOverview projectId={projectId?.toString() ?? ""} workspaceSlug={workspaceSlug?.toString() ?? ""} />
+        </div>
+      </div>
+    </ContentWrapper>
+  );
+});
diff --git a/apps/web/core/components/modules/quick-actions.tsx b/apps/web/core/components/modules/quick-actions.tsx
new file mode 100644
index 0000000..ae112bf
--- /dev/null
+++ b/apps/web/core/components/modules/quick-actions.tsx
@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { IconButton } from "@plane/propel/icon-button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TContextMenuItem } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { copyUrlToClipboard, cn } from "@plane/utils";
+// components
+import { useModuleMenuItems } from "@/components/common/quick-actions-helper";
+import { ArchiveModuleModal, CreateUpdateModuleModal, DeleteModuleModal } from "@/components/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  parentRef: React.RefObject<HTMLDivElement | null>;
+  moduleId: string;
+  projectId: string;
+  workspaceSlug: string;
+  customClassName?: string;
+};
+
+export const ModuleQuickActions = observer(function ModuleQuickActions(props: Props) {
+  const { parentRef, moduleId, projectId, workspaceSlug, customClassName } = props;
+  // router
+  const router = useAppRouter();
+  // states
+  const [editModal, setEditModal] = useState(false);
+  const [archiveModuleModal, setArchiveModuleModal] = useState(false);
+  const [deleteModal, setDeleteModal] = useState(false);
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+
+  const { getModuleById, restoreModule } = useModule();
+
+  // derived values
+  const moduleDetails = getModuleById(moduleId);
+  // auth
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+
+  const moduleLink = `${workspaceSlug}/projects/${projectId}/modules/${moduleId}`;
+  const handleCopyText = () =>
+    copyUrlToClipboard(moduleLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "Module link copied to clipboard.",
+      });
+    });
+  const handleOpenInNewTab = () => window.open(`/${moduleLink}`, "_blank");
+
+  const handleRestoreModule = async () => {
+    try {
+      await restoreModule(workspaceSlug, projectId, moduleId);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Restore success",
+        message: "Your module can be found in project modules.",
+      });
+      router.push(`/${workspaceSlug}/projects/${projectId}/archives/modules`);
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Module could not be restored. Please try again.",
+      });
+    }
+  };
+
+  // Use unified menu hook from plane-web (resolves to CE or EE)
+  const menuResult = useModuleMenuItems({
+    moduleDetails: moduleDetails ?? undefined,
+    workspaceSlug,
+    projectId,
+    moduleId,
+    isEditingAllowed,
+    handleEdit: () => setEditModal(true),
+    handleArchive: () => setArchiveModuleModal(true),
+    handleRestore: handleRestoreModule,
+    handleDelete: () => setDeleteModal(true),
+    handleCopyLink: handleCopyText,
+    handleOpenInNewTab,
+  });
+
+  // Handle both CE (array) and EE (object) return types
+  const MENU_ITEMS: TContextMenuItem[] = Array.isArray(menuResult) ? menuResult : menuResult.items;
+  const additionalModals = Array.isArray(menuResult) ? null : menuResult.modals;
+
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        item.action();
+      },
+    };
+  });
+
+  return (
+    <>
+      {moduleDetails && (
+        <div className="fixed">
+          <CreateUpdateModuleModal
+            isOpen={editModal}
+            onClose={() => setEditModal(false)}
+            data={moduleDetails}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+          />
+          <ArchiveModuleModal
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            moduleId={moduleId}
+            isOpen={archiveModuleModal}
+            handleClose={() => setArchiveModuleModal(false)}
+          />
+          <DeleteModuleModal data={moduleDetails} isOpen={deleteModal} onClose={() => setDeleteModal(false)} />
+          {additionalModals}
+        </div>
+      )}
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu
+        customButton={<IconButton variant="tertiary" size="lg" icon={MoreHorizontalOutline} />}
+        placement="bottom-end"
+        closeOnSelect
+        buttonClassName={customClassName}
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3 flex-shrink-0", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/modules/select/index.ts b/apps/web/core/components/modules/select/index.ts
new file mode 100644
index 0000000..1e350bd
--- /dev/null
+++ b/apps/web/core/components/modules/select/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./status";
diff --git a/apps/web/core/components/modules/select/status.tsx b/apps/web/core/components/modules/select/status.tsx
new file mode 100644
index 0000000..8f5817e
--- /dev/null
+++ b/apps/web/core/components/modules/select/status.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+// react hook form
+import type { FieldError, Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import { StateOutline } from "@makeplane/propel/icons";
+import type { IModule } from "@plane/types";
+// ui
+import { CustomSelect } from "@plane/ui";
+// types
+// constants
+
+type Props = {
+  control: Control<IModule, any>;
+  error?: FieldError;
+  tabIndex?: number;
+};
+
+export function ModuleStatusSelect({ control, error, tabIndex }: Props) {
+  const { t } = useTranslation();
+  return (
+    <Controller
+      control={control}
+      rules={{ required: true }}
+      name="status"
+      render={({ field: { value, onChange } }) => {
+        const selectedValue = MODULE_STATUS.find((s) => s.value === value);
+        return (
+          <CustomSelect
+            value={value}
+            label={
+              <div
+                className={`flex items-center justify-center gap-2 py-0.5 text-11 ${error ? "text-danger-primary" : ""}`}
+              >
+                {value ? (
+                  <ModuleStatusIcon status={value} />
+                ) : (
+                  <StateOutline className={`h-3 w-3 ${error ? "text-danger-primary" : "text-secondary"}`} />
+                )}
+                {(selectedValue && t(selectedValue?.i18n_label)) ?? (
+                  <span className={`${error ? "text-danger-primary" : "text-secondary"}`}>Status</span>
+                )}
+              </div>
+            }
+            onChange={onChange}
+            tabIndex={tabIndex}
+            noChevron
+          >
+            {MODULE_STATUS.map((status) => (
+              <CustomSelect.Option key={status.value} value={status.value}>
+                <div className="flex items-center gap-2">
+                  <ModuleStatusIcon status={status.value} />
+                  {t(status.i18n_label)}
+                </div>
+              </CustomSelect.Option>
+            ))}
+          </CustomSelect>
+        );
+      }}
+    />
+  );
+}
diff --git a/apps/web/core/components/modules/sidebar-select/index.ts b/apps/web/core/components/modules/sidebar-select/index.ts
new file mode 100644
index 0000000..81b8792
--- /dev/null
+++ b/apps/web/core/components/modules/sidebar-select/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./select-status";
diff --git a/apps/web/core/components/modules/sidebar-select/select-status.tsx b/apps/web/core/components/modules/sidebar-select/select-status.tsx
new file mode 100644
index 0000000..72e0349
--- /dev/null
+++ b/apps/web/core/components/modules/sidebar-select/select-status.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// react
+import React from "react";
+// react-hook-form
+import type { Control, UseFormWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { StateOutline } from "@makeplane/propel/icons";
+import type { IModule } from "@plane/types";
+// ui
+import { CustomSelect } from "@plane/ui";
+// types
+// common
+// constants
+
+type Props = {
+  control: Control<Partial<IModule>, any>;
+  submitChanges: (formData: Partial<IModule>) => void;
+  watch: UseFormWatch<Partial<IModule>>;
+};
+
+export function SidebarStatusSelect({ control, submitChanges, watch }: Props) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-13 sm:basis-1/2">
+        <StateOutline className="h-4 w-4 flex-shrink-0" />
+        <p>Status</p>
+      </div>
+      <div className="sm:basis-1/2">
+        <Controller
+          control={control}
+          name="status"
+          render={({ field: { value } }) => (
+            <CustomSelect
+              label={
+                <span className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-primary"}`}>
+                  <span
+                    className="h-2 w-2 flex-shrink-0 rounded-full"
+                    style={{
+                      backgroundColor: MODULE_STATUS?.find((option) => option.value === value)?.color,
+                    }}
+                  />
+                  {watch("status")}
+                </span>
+              }
+              value={value}
+              onChange={(value: any) => {
+                submitChanges({ status: value });
+              }}
+            >
+              {MODULE_STATUS.map((option) => (
+                <CustomSelect.Option key={option.value} value={option.value}>
+                  <div className="flex items-center gap-2">
+                    <span className="h-2 w-2 flex-shrink-0 rounded-full" style={{ backgroundColor: option.color }} />
+                    {t(option.i18n_label)}
+                  </div>
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/navigation/app-rail-hoc.tsx b/apps/web/core/components/navigation/app-rail-hoc.tsx
new file mode 100644
index 0000000..82f25e1
--- /dev/null
+++ b/apps/web/core/components/navigation/app-rail-hoc.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// hoc/withDockItems.tsx
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { PlaneNewIcon } from "@plane/propel/icons";
+import type { AppSidebarItemData } from "@/components/sidebar/sidebar-item";
+import { useWorkspacePaths } from "@/hooks/use-workspace-paths";
+
+type WithDockItemsProps = {
+  dockItems: (AppSidebarItemData & { shouldRender: boolean })[];
+};
+
+export function withDockItems<P extends WithDockItemsProps>(WrappedComponent: React.ComponentType<P>) {
+  const ComponentWithDockItems = observer(function ComponentWithDockItems(props: Omit<P, keyof WithDockItemsProps>) {
+    const { workspaceSlug } = useParams();
+    const { isProjectsPath, isNotificationsPath } = useWorkspacePaths();
+
+    const dockItems: (AppSidebarItemData & { shouldRender: boolean })[] = [
+      {
+        label: "Projects",
+        icon: <PlaneNewIcon className="size-5" />,
+        href: `/${workspaceSlug}/`,
+        isActive: isProjectsPath && !isNotificationsPath,
+        shouldRender: true,
+      },
+    ];
+
+    return <WrappedComponent {...(props as P)} dockItems={dockItems} />;
+  });
+
+  return ComponentWithDockItems;
+}
diff --git a/apps/web/core/components/navigation/app-rail-root.tsx b/apps/web/core/components/navigation/app-rail-root.tsx
new file mode 100644
index 0000000..a7cd619
--- /dev/null
+++ b/apps/web/core/components/navigation/app-rail-root.tsx
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+"use client";
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import { SettingsOutline, TickOutline } from "@makeplane/propel/icons";
+import { ContextMenu } from "@plane/propel/context-menu";
+import { cn } from "@plane/utils";
+// components
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+// hooks
+import { useAppRailPreferences } from "@/hooks/use-navigation-preferences";
+import { useAppRailVisibility } from "@/lib/app-rail/context";
+// local imports
+import { AppSidebarItemsRoot } from "./items-root";
+
+export const AppRailRoot = observer(() => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  const pathname = usePathname();
+  // preferences
+  const { preferences, updateDisplayMode } = useAppRailPreferences();
+  const { isCollapsed, toggleAppRail } = useAppRailVisibility();
+  // derived values
+  const isWorkspaceSettingsPath = pathname.includes(`/${workspaceSlug}/settings`) && !projectId;
+  const showLabel = preferences.displayMode === "icon_with_label";
+  const railWidth = showLabel ? "3.75rem" : "3rem";
+
+  return (
+    <div
+      className="z-[26] h-full flex-shrink-0 bg-canvas transition-all duration-300 ease-in-out"
+      style={{
+        width: railWidth,
+        display: "block",
+      }}
+    >
+      <ContextMenu>
+        <ContextMenu.Trigger className="h-full">
+          <div className="flex h-full flex-col justify-between gap-4 px-2 py-3">
+            <div
+              className={cn("flex flex-col", {
+                "gap-4": showLabel,
+                "gap-3": !showLabel,
+              })}
+            >
+              <AppSidebarItemsRoot showLabel={showLabel} />
+              <div className="mx-2 border-t border-strong" />
+              <AppSidebarItem
+                item={{
+                  label: "Settings",
+                  icon: <SettingsOutline className="size-5" />,
+                  href: `/${workspaceSlug}/settings`,
+                  isActive: isWorkspaceSettingsPath,
+                  showLabel,
+                }}
+              />
+            </div>
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content positionerClassName="z-30" className="outline-none">
+            <ContextMenu.Item onClick={() => updateDisplayMode("icon_only")}>
+              <div className="flex w-full items-center justify-between gap-2">
+                <span className="text-11">Icon only</span>
+                {preferences.displayMode === "icon_only" && <TickOutline className="size-3.5" />}
+              </div>
+            </ContextMenu.Item>
+            <ContextMenu.Item onClick={() => updateDisplayMode("icon_with_label")}>
+              <div className="flex w-full items-center justify-between gap-2">
+                <span className="text-11">Icon with name</span>
+                {preferences.displayMode === "icon_with_label" && <TickOutline className="size-3.5" />}
+              </div>
+            </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item onClick={toggleAppRail}>
+              <span className="text-11">{isCollapsed ? "Dock App Rail" : "Undock App Rail"}</span>
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/navigation/customize-navigation-dialog.tsx b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
new file mode 100644
index 0000000..2682023
--- /dev/null
+++ b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
@@ -0,0 +1,359 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { CloseOutline, DragDropOutline } from "@makeplane/propel/icons";
+// plane imports
+import { WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { EModalPosition, EModalWidth, ModalCore, Sortable } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import {
+  usePersonalNavigationPreferences,
+  useProjectNavigationPreferences,
+  useWorkspaceNavigationPreferences,
+} from "@/hooks/use-navigation-preferences";
+// helpers
+import { getSidebarNavigationItemIcon } from "@/components/workspace/sidebar/helper";
+// types
+import type { TPersonalNavigationItemKey } from "@plane/types";
+
+type TCustomizeNavigationDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+type TWorkspaceNavigationItem = {
+  key: string;
+  labelTranslationKey: string;
+  isPinned: boolean;
+  sortOrder: number;
+};
+
+const PERSONAL_ITEMS: Array<{ key: TPersonalNavigationItemKey; labelTranslationKey: string }> = [
+  { key: "stickies", labelTranslationKey: "sidebar.stickies" },
+  { key: "your_work", labelTranslationKey: "sidebar.your_work" },
+  { key: "drafts", labelTranslationKey: "drafts" },
+];
+
+export const CustomizeNavigationDialog = observer(function CustomizeNavigationDialog(
+  props: TCustomizeNavigationDialogProps
+) {
+  const { isOpen, onClose } = props;
+  const { t } = useTranslation();
+
+  // router
+  const { workspaceSlug } = useParams();
+
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const {
+    preferences: personalPreferences,
+    togglePersonalItem,
+    updatePersonalItemOrder,
+  } = usePersonalNavigationPreferences();
+  const {
+    preferences: projectPreferences,
+    updateNavigationMode,
+    updateShowLimitedProjects,
+    updateLimitedProjectsCount,
+  } = useProjectNavigationPreferences();
+  const {
+    preferences: workspacePreferences,
+    toggleWorkspaceItem,
+    updateWorkspaceItemOrder,
+  } = useWorkspaceNavigationPreferences();
+
+  // local state for limited projects count input
+  const [projectCountInput, setProjectCountInput] = useState(projectPreferences.limitedProjectsCount.toString());
+
+  // Filter personal items by feature flags
+  const filteredPersonalItems = PERSONAL_ITEMS;
+
+  // Filter workspace items by permissions and feature flags, then get pinned/unpinned items
+  const workspaceItems = useMemo(() => {
+    const items = WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.filter((item) => {
+      // Permission check
+      const hasPermission = allowPermissions(
+        item.access,
+        EUserPermissionsLevel.WORKSPACE,
+        workspaceSlug?.toString() || ""
+      );
+      return hasPermission;
+    }).map((item) => {
+      // Get pinned status and sort order from localStorage
+      const preference = workspacePreferences.items[item.key];
+      const isPinned = preference?.is_pinned ?? false;
+      const sortOrder = preference?.sort_order ?? 0;
+
+      return {
+        key: item.key,
+        labelTranslationKey: item.labelTranslationKey,
+        isPinned,
+        sortOrder,
+      };
+    });
+
+    // oxlint-disable-next-line unicorn/no-array-sort
+    return items.sort((a, b) => a.sortOrder - b.sortOrder);
+  }, [workspaceSlug, allowPermissions, workspacePreferences]);
+
+  // Handle checkbox toggle
+  const handleWorkspaceItemToggle = useCallback(
+    (itemKey: string, checked: boolean) => {
+      toggleWorkspaceItem(itemKey, checked);
+    },
+    [toggleWorkspaceItem]
+  );
+
+  // Handle reorder of pinned workspace items
+  const handleReorder = useCallback(
+    (newData: TWorkspaceNavigationItem[]) => {
+      const itemsWithOrder = newData.map((item, index) => ({
+        key: item.key,
+        sortOrder: index,
+      }));
+      updateWorkspaceItemOrder(itemsWithOrder);
+    },
+    [updateWorkspaceItemOrder]
+  );
+
+  // Handle reorder of enabled personal items
+  const handlePersonalReorder = useCallback(
+    (newData: Array<{ key: TPersonalNavigationItemKey; labelTranslationKey: string }>) => {
+      const itemsWithOrder = newData.map((item, index) => ({
+        key: item.key,
+        sortOrder: index,
+      }));
+      updatePersonalItemOrder(itemsWithOrder);
+    },
+    [updatePersonalItemOrder]
+  );
+
+  // Separate personal items into enabled/disabled
+  const personalItems = useMemo(() => {
+    const items = filteredPersonalItems.map((item) => {
+      const itemState = personalPreferences.items[item.key];
+      const isEnabled = typeof itemState === "boolean" ? itemState : (itemState?.enabled ?? true);
+      const sortOrder = typeof itemState === "boolean" ? 0 : (itemState?.sort_order ?? 0);
+
+      return {
+        ...item,
+        isEnabled,
+        sortOrder,
+      };
+    });
+
+    // oxlint-disable-next-line unicorn/no-array-sort
+    return items.sort((a, b) => a.sortOrder - b.sortOrder);
+  }, [personalPreferences, filteredPersonalItems]);
+
+  // Prevent typing invalid characters in number input
+  // oxlint-disable-next-line unicorn/consistent-function-scoping
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Block: e, E, +, -, .
+    if (["e", "E", "+", "-", "."].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  // Handle project count input change
+  const handleProjectCountChange = (value: string) => {
+    // Strip any non-digit characters
+    const cleanedValue = value.replace(/\D/g, "");
+    setProjectCountInput(cleanedValue);
+
+    // Parse and validate the value
+    const numValue = parseInt(cleanedValue, 10);
+
+    // If valid number, enforce minimum of 1
+    if (!isNaN(numValue)) {
+      const validValue = Math.max(1, numValue);
+      updateLimitedProjectsCount(validValue);
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="flex max-h-[90vh] flex-col rounded-lg bg-surface-1">
+        {/* Header */}
+        <div className="flex justify-between px-6 pt-4">
+          <div>
+            <h2 className="text-18 font-semibold text-primary">{t("customize_navigation")}</h2>
+            <p className="mt-1 text-13 text-tertiary">
+              Selected items will always stay visible in your sidebar. You can still find the others anytime from the
+              More menu. These changes are personal to you and won't affect anyone else on your workspace.
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="flex size-5 flex-shrink-0 items-center justify-center rounded-sm text-placeholder hover:bg-layer-1"
+            aria-label={t("close")}
+          >
+            <CloseOutline className="size-4" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 space-y-4 overflow-y-auto px-6 py-4">
+          {/* Personal Section */}
+          <div className="flex flex-col gap-2">
+            <h3 className="text-13 font-semibold text-placeholder">{t("personal")}</h3>
+            <div className="rounded-md border border-subtle bg-surface-2 py-2">
+              <Sortable
+                data={personalItems}
+                onChange={handlePersonalReorder}
+                keyExtractor={(item) => item.key}
+                id="personal-enabled-items"
+                render={(item) => (
+                  <div className="flex items-center gap-2 rounded-md px-2 py-1.5 transition-all duration-200 hover:bg-surface-2">
+                    <DragDropOutline className="size-4 cursor-grab text-placeholder transition-colors active:cursor-grabbing" />
+                    <Checkbox
+                      checked={!!personalPreferences.items[item.key]?.enabled}
+                      onCheckedChange={(checked) => togglePersonalItem(item.key, checked)}
+                      aria-label={t(item.labelTranslationKey)}
+                    />
+                    <div className="flex flex-1 items-center gap-2">
+                      {getSidebarNavigationItemIcon(item.key)}
+                      <label className="flex-1 cursor-pointer text-13 text-primary">
+                        {t(item.labelTranslationKey)}
+                      </label>
+                    </div>
+                  </div>
+                )}
+              />
+            </div>
+          </div>
+
+          {/* Workspace Section */}
+          <div className="flex flex-col gap-2">
+            <h3 className="text-13 font-semibold text-placeholder">{t("common.workspace")}</h3>
+            <div className="rounded-md border border-subtle bg-surface-2 py-2">
+              {/* Pinned Items - Draggable */}
+              <Sortable
+                data={workspaceItems}
+                onChange={handleReorder}
+                keyExtractor={(item) => item.key}
+                id="workspace-pinned-items"
+                render={(item) => {
+                  const icon = getSidebarNavigationItemIcon(item.key);
+                  return (
+                    <div className="group flex items-center gap-2 rounded-md px-2 py-1.5 transition-all duration-200 hover:bg-surface-2">
+                      <DragDropOutline className="size-4 cursor-grab text-placeholder transition-colors active:cursor-grabbing" />
+                      <Checkbox
+                        checked={!!workspacePreferences.items[item.key]?.is_pinned}
+                        onCheckedChange={(checked) => handleWorkspaceItemToggle(item.key, checked)}
+                        aria-label={t(item.labelTranslationKey)}
+                      />
+                      <div className="flex flex-1 items-center gap-2">
+                        {icon}
+                        <span className="text-13 text-primary">{t(item.labelTranslationKey)}</span>
+                      </div>
+                    </div>
+                  );
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Projects Section */}
+          <div className="flex flex-col gap-2">
+            <h3 className="text-13 font-semibold text-placeholder">{t("projects")}</h3>
+
+            <div className="rounded-md border border-subtle bg-surface-2 px-2 py-2">
+              <div className="space-y-3">
+                {/* Navigation Mode Radio Buttons */}
+                <div className="space-y-2">
+                  {/* oxlint-disable-next-line jsx_a11y/label-has-associated-control */}
+                  <label className="flex cursor-pointer gap-2 rounded-md px-2 py-1.5 hover:bg-surface-2">
+                    <input
+                      type="radio"
+                      name="navigation-mode"
+                      value="ACCORDION"
+                      checked={projectPreferences.navigationMode === "ACCORDION"}
+                      onChange={() => updateNavigationMode("ACCORDION")}
+                      className="mt-1 size-4 text-accent-primary focus:ring-accent-strong"
+                    />
+                    <div className="flex-1">
+                      <div className="text-13 text-primary">{t("accordion_navigation_control")}</div>
+                      <div className="text-11 text-secondary">
+                        Feature tabs will appear as nested items under project and acts as accordion.
+                      </div>
+                    </div>
+                  </label>
+
+                  {/* oxlint-disable-next-line jsx_a11y/label-has-associated-control */}
+                  <label className="flex cursor-pointer gap-2 rounded-md px-2 py-1.5 hover:bg-surface-2">
+                    <input
+                      type="radio"
+                      name="navigation-mode"
+                      value="TABBED"
+                      checked={projectPreferences.navigationMode === "TABBED"}
+                      onChange={() => updateNavigationMode("TABBED")}
+                      className="mt-1 size-4 text-accent-primary focus:ring-accent-strong"
+                    />
+                    <div className="flex-1">
+                      <div className="text-13 text-primary">{t("horizontal_navigation_bar")}</div>
+                      <div className="text-11 text-secondary">
+                        Feature tabs will appear as horizontal tabs inside a project.
+                      </div>
+                    </div>
+                  </label>
+                </div>
+
+                {/* Limited Projects Checkbox */}
+                <div className="space-y-1">
+                  <div className="rounded-md px-2 py-1.5 hover:bg-surface-2">
+                    <Checkbox
+                      label={t("show_limited_projects_on_sidebar")}
+                      stretch="full"
+                      checked={projectPreferences.showLimitedProjects}
+                      onCheckedChange={updateShowLimitedProjects}
+                    />
+                  </div>
+
+                  {projectPreferences.showLimitedProjects && (
+                    <div className="pl-8">
+                      <div className="flex w-full flex-col gap-1">
+                        <div className="flex w-full flex-col gap-2 pb-1.5">
+                          <label className="w-full text-11 text-secondary">{t("enter_number_of_projects")}</label>
+                          <input
+                            type="number"
+                            min="1"
+                            step="1"
+                            value={projectCountInput}
+                            onKeyDown={handleKeyDown}
+                            onChange={(e) => handleProjectCountChange(e.target.value)}
+                            className={cn(
+                              "w-full rounded-md px-2 py-1 text-13",
+                              "border bg-surface-2",
+                              "text-secondary",
+                              parseInt(projectCountInput) >= 1
+                                ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-accent-strong"
+                                : "border-danger-strong focus:border-danger-strong focus:ring-1 focus:ring-danger-strong"
+                            )}
+                          />
+                        </div>
+                        {parseInt(projectCountInput) < 1 && projectCountInput !== "" && (
+                          <span className="pl-0.5 text-11 text-danger-primary">Minimum value is 1</span>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/navigation/index.ts b/apps/web/core/components/navigation/index.ts
new file mode 100644
index 0000000..db9f557
--- /dev/null
+++ b/apps/web/core/components/navigation/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./app-rail-root";
+export * from "./tab-navigation-root";
+export * from "./top-nav-power-k";
+export * from "./use-active-tab";
+export * from "./use-project-actions";
diff --git a/apps/web/core/components/navigation/items-root.tsx b/apps/web/core/components/navigation/items-root.tsx
new file mode 100644
index 0000000..2f67a1f
--- /dev/null
+++ b/apps/web/core/components/navigation/items-root.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components/AppSidebarItemsRoot.tsx
+
+import React from "react";
+import type { AppSidebarItemData } from "@/components/sidebar/sidebar-item";
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+import { withDockItems } from "./app-rail-hoc";
+
+type Props = {
+  dockItems: (AppSidebarItemData & { shouldRender: boolean })[];
+  showLabel?: boolean;
+};
+
+function Component({ dockItems, showLabel = true }: Props) {
+  return (
+    <>
+      {dockItems
+        .filter((item) => item.shouldRender)
+        .map((item) => (
+          <AppSidebarItem key={item.label} item={{ ...item, showLabel }} variant="link" />
+        ))}
+    </>
+  );
+}
+
+export const AppSidebarItemsRoot = withDockItems(Component);
diff --git a/apps/web/core/components/navigation/project-actions-menu.tsx b/apps/web/core/components/navigation/project-actions-menu.tsx
new file mode 100644
index 0000000..51b99f6
--- /dev/null
+++ b/apps/web/core/components/navigation/project-actions-menu.tsx
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef } from "react";
+import { useNavigate } from "react-router";
+import {
+  ArchiveOutline,
+  LinkOutline,
+  LogOutOutline,
+  MoreHorizontalOutline,
+  SettingsOutline,
+  ShareAltOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { CustomMenu } from "@plane/ui";
+
+type Props = {
+  workspaceSlug: string;
+  project: {
+    id: string;
+  };
+  isAdmin: boolean;
+  isAuthorized: boolean;
+  onCopyText: () => void;
+  onLeaveProject: () => void;
+  onPublishModal: () => void;
+};
+
+export function ProjectActionsMenu({
+  workspaceSlug,
+  project,
+  isAdmin,
+  isAuthorized,
+  onCopyText,
+  onLeaveProject,
+  onPublishModal,
+}: Props) {
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  // translation
+  const { t } = useTranslation();
+  // refs
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+  // router
+  const navigate = useNavigate();
+
+  return (
+    <CustomMenu
+      customButton={
+        <span
+          ref={actionSectionRef}
+          className="grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1"
+          onClick={() => setIsMenuActive(!isMenuActive)}
+        >
+          <MoreHorizontalOutline className="size-4" />
+        </span>
+      }
+      className="flex-shrink-0"
+      customButtonClassName="grid place-items-center"
+      placement="bottom-start"
+      ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+      useCaptureForOutsideClick
+      closeOnSelect
+      onMenuClose={() => setIsMenuActive(false)}
+    >
+      {/* Publish project settings */}
+      {isAdmin && (
+        <CustomMenu.MenuItem onClick={onPublishModal}>
+          <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
+            <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-secondary transition-all duration-300 hover:bg-layer-1">
+              <ShareAltOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+            </div>
+            <div>{t("publish_project")}</div>
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+      <CustomMenu.MenuItem onClick={onCopyText}>
+        <span className="flex items-center justify-start gap-2">
+          <LinkOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+          <span>{t("copy_link")}</span>
+        </span>
+      </CustomMenu.MenuItem>
+      {isAuthorized && (
+        <CustomMenu.MenuItem
+          onClick={() => {
+            navigate(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
+          }}
+        >
+          <div className="flex cursor-pointer items-center justify-start gap-2">
+            <ArchiveOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+            <span>{t("archives")}</span>
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+      <CustomMenu.MenuItem
+        onClick={() => {
+          navigate(`/${workspaceSlug}/settings/projects/${project?.id}`);
+        }}
+      >
+        <div className="flex cursor-pointer items-center justify-start gap-2">
+          <SettingsOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+          <span>{t("settings")}</span>
+        </div>
+      </CustomMenu.MenuItem>
+      {/* Leave project */}
+      {!isAuthorized && (
+        <CustomMenu.MenuItem onClick={onLeaveProject}>
+          <div className="flex items-center justify-start gap-2">
+            <LogOutOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+            <span>{t("leave_project")}</span>
+          </div>
+        </CustomMenu.MenuItem>
+      )}
+    </CustomMenu>
+  );
+}
diff --git a/apps/web/core/components/navigation/project-header-button.tsx b/apps/web/core/components/navigation/project-header-button.tsx
new file mode 100644
index 0000000..bb9c87b
--- /dev/null
+++ b/apps/web/core/components/navigation/project-header-button.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TPartialProject } from "@plane/types";
+// plane propel imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+
+type TProjectHeaderButtonProps = {
+  project: TPartialProject;
+};
+
+export function ProjectHeaderButton({ project }: TProjectHeaderButtonProps) {
+  return (
+    <Tooltip label={project.name} layout="stacked" side="bottom">
+      <div className="relative flex w-full max-w-48 items-center pr-1 text-left select-none">
+        <div className="flex size-7 flex-shrink-0 items-center justify-center rounded-md bg-layer-1">
+          <Logo logo={project.logo_props} size={16} />
+        </div>
+        <div className="relative min-w-0 flex-1 hover:rounded">
+          <p className="truncate px-2 text-14 font-medium text-secondary">{project.name}</p>
+          <div className="pointer-events-none absolute top-0 right-0 bottom-0 flex items-center justify-end opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+            <div className="relative flex h-full w-8 items-center justify-end">
+              <div className="absolute inset-0 rounded-r bg-gradient-to-r from-transparent to-surface-2" />
+              <ChevronDownOutline className="relative z-10 size-4 text-tertiary" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/navigation/project-header.tsx b/apps/web/core/components/navigation/project-header.tsx
new file mode 100644
index 0000000..e7c7fd2
--- /dev/null
+++ b/apps/web/core/components/navigation/project-header.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ProjectsOutline } from "@makeplane/propel/icons";
+import type { ICustomSearchSelectOption } from "@plane/types";
+import { CustomSearchSelect } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// local imports
+import { SwitcherLabel } from "../common/switcher-label";
+import { ProjectHeaderButton } from "./project-header-button";
+import { getTabUrl } from "./tab-navigation-utils";
+import { useTabPreferences } from "./use-tab-preferences";
+import { useNavigationItems } from "./use-navigation-items";
+
+type TProjectHeaderProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectHeader = observer(function ProjectHeader(props: TProjectHeaderProps) {
+  const { workspaceSlug, projectId } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { joinedProjectIds, getPartialProjectById } = useProject();
+  const { allowPermissions } = useUserPermissions();
+
+  // Get current project details
+  const currentProjectDetails = getPartialProjectById(projectId);
+
+  // Get available navigation items for this project
+  const navigationItems = useNavigationItems({
+    workspaceSlug: workspaceSlug,
+    projectId,
+    project: currentProjectDetails,
+    allowPermissions,
+  });
+
+  // Get preferences from hook
+  const { tabPreferences } = useTabPreferences(workspaceSlug, projectId);
+
+  // Memoize available tab keys
+  const availableTabKeys = useMemo(() => navigationItems.map((item) => item.key), [navigationItems]);
+
+  // Memoize validated default tab key
+  const validatedDefaultTabKey = useMemo(
+    () =>
+      availableTabKeys.includes(tabPreferences.defaultTab)
+        ? tabPreferences.defaultTab
+        : availableTabKeys[0] || "work_items",
+    [availableTabKeys, tabPreferences.defaultTab]
+  );
+
+  // Memoize switcher options to prevent recalculation on every render
+  const switcherOptions = useMemo<ICustomSearchSelectOption[]>(
+    () =>
+      joinedProjectIds
+        .map((id): ICustomSearchSelectOption | null => {
+          const project = getPartialProjectById(id);
+          if (!project) return null;
+
+          return {
+            value: id,
+            query: project.name,
+            content: (
+              <SwitcherLabel
+                name={project.name}
+                logo_props={project.logo_props}
+                LabelIcon={ProjectsOutline}
+                type="material"
+              />
+            ),
+          };
+        })
+        .filter((option): option is ICustomSearchSelectOption => option !== null),
+    [joinedProjectIds, getPartialProjectById]
+  );
+
+  // Memoize onChange handler
+  const handleProjectChange = useCallback(
+    (value: string) => {
+      if (value !== currentProjectDetails?.id) {
+        router.push(getTabUrl(workspaceSlug, value, validatedDefaultTabKey));
+      }
+    },
+    [currentProjectDetails?.id, router, workspaceSlug, validatedDefaultTabKey]
+  );
+
+  // Early return if no project details
+  if (!currentProjectDetails) return null;
+
+  return (
+    <CustomSearchSelect
+      options={switcherOptions}
+      value={currentProjectDetails.id}
+      onChange={handleProjectChange}
+      customButton={currentProjectDetails ? <ProjectHeaderButton project={currentProjectDetails} /> : null}
+      className="h-full rounded"
+      customButtonClassName="group flex items-center gap-0.5 rounded-sm hover:bg-surface-2 outline-none cursor-pointer h-full"
+    />
+  );
+});
diff --git a/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx b/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
new file mode 100644
index 0000000..4375deb
--- /dev/null
+++ b/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Link } from "react-router";
+import { DefaultTabOutline, MoreHorizontalOutline, PinOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Menu } from "@plane/propel/menu";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// local imports
+import type { TNavigationItem } from "./tab-navigation-root";
+import type { TTabPreferences } from "./tab-navigation-utils";
+
+type Props = {
+  overflowItems: TNavigationItem[];
+  isActive: (item: TNavigationItem) => boolean;
+  tabPreferences: TTabPreferences;
+  onToggleDefault: (tabKey: string) => void;
+  onShow: (tabKey: string) => void;
+};
+
+/**
+ * Overflow menu for tab navigation items
+ * Displays items that don't fit in the visible area, with action icons
+ * Shows "Eye" icon for user-hidden items, "Set as default" icon for all items
+ */
+export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferences, onToggleDefault, onShow }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Menu
+      ellipsis
+      buttonClassName="!p-1.5"
+      optionsClassName="min-w-[200px] space-y-1"
+      customButton={
+        <div className="flex items-center justify-center rounded-md p-1 transition-colors hover:bg-layer-1">
+          <MoreHorizontalOutline className="h-4 w-4 text-secondary" />
+        </div>
+      }
+    >
+      {overflowItems.map((item) => {
+        const itemIsActive = isActive(item);
+        // isHidden = true only for user-hidden items (not space-constrained overflow)
+        const isHidden = tabPreferences.hiddenTabs.includes(item.key);
+        const isDefault = item.key === tabPreferences.defaultTab;
+
+        return (
+          <Menu.MenuItem key={`${item.key}-overflow-${itemIsActive ? "active" : "inactive"}`} className="w-full p-0">
+            <div className="group/menu-item flex w-full items-center justify-between">
+              <Link to={item.href} className="w-full min-w-0 flex-1 p-1">
+                <span className="text-11">{t(item.i18n_key)}</span>
+              </Link>
+              <div className="flex items-center">
+                {/* Show Eye icon ONLY for user-hidden items */}
+                {isHidden && (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onShow(item.key);
+                    }}
+                    className="invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary"
+                    title="Show"
+                  >
+                    <PinOutline className="size-3" />
+                  </button>
+                )}
+                <Tooltip label={isDefault ? "Clear default" : "Set as default"}>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onToggleDefault(item.key);
+                    }}
+                    className={cn(
+                      "invisible rounded-sm p-1 text-tertiary transition-colors group-hover/menu-item:visible hover:text-primary",
+                      {
+                        visible: isDefault,
+                      }
+                    )}
+                    title={isDefault ? "Clear default" : "Set as default"}
+                  >
+                    <DefaultTabOutline className="size-3" />
+                  </button>
+                </Tooltip>
+              </div>
+            </div>
+          </Menu.MenuItem>
+        );
+      })}
+    </Menu>
+  );
+}
diff --git a/apps/web/core/components/navigation/tab-navigation-root.tsx b/apps/web/core/components/navigation/tab-navigation-root.tsx
new file mode 100644
index 0000000..26c670d
--- /dev/null
+++ b/apps/web/core/components/navigation/tab-navigation-root.tsx
@@ -0,0 +1,257 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams, useLocation, Link, useNavigate } from "react-router";
+import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TabNavigationList, TabNavigationItem } from "@plane/propel/tab-navigation";
+import type { EUserProjectRoles } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { LeaveProjectModal } from "../project/leave-project-modal";
+import { PublishProjectModal } from "../project/publish-project/modal";
+import { ProjectActionsMenu } from "./project-actions-menu";
+import { ProjectHeader } from "./project-header";
+import { TabNavigationOverflowMenu } from "./tab-navigation-overflow-menu";
+import { DEFAULT_TAB_KEY } from "./tab-navigation-utils";
+import { TabNavigationVisibleItem } from "./tab-navigation-visible-item";
+import { useActiveTab } from "./use-active-tab";
+import { useProjectActions } from "./use-project-actions";
+import { useResponsiveTabLayout } from "./use-responsive-tab-layout";
+import { useTabPreferences } from "./use-tab-preferences";
+import { useNavigationItems } from "./use-navigation-items";
+
+// Local type definition for navigation items with app-specific fields
+export type TNavigationItem = {
+  name: string;
+  href: string;
+  icon: React.ElementType;
+  access: EUserPermissions[] | EUserProjectRoles[];
+  shouldRender: boolean;
+  sortOrder: number;
+  i18n_key: string;
+  key: string;
+};
+
+type TTabNavigationRootProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const TabNavigationRoot = observer(function TabNavigationRoot(props: TTabNavigationRootProps) {
+  const { workspaceSlug, projectId } = props;
+  const { workItem: workItemIdentifierFromRoute } = useParams();
+  const location = useLocation();
+  const pathname = location.pathname;
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  // Store hooks
+  const { getPartialProjectById } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  const {
+    issue: { getIssueIdByIdentifier, getIssueById },
+  } = useIssueDetail();
+
+  // Tab preferences hook
+  const { tabPreferences, handleToggleDefaultTab, handleHideTab, handleShowTab } = useTabPreferences(
+    workspaceSlug,
+    projectId
+  );
+
+  // Derived values
+  const workItemId = workItemIdentifierFromRoute
+    ? getIssueIdByIdentifier(workItemIdentifierFromRoute?.toString())
+    : undefined;
+  const workItem = workItemId ? getIssueById(workItemId) : undefined;
+  const project = getPartialProjectById(projectId);
+
+  // Navigation items hook
+  const navigationItems = useNavigationItems({
+    workspaceSlug,
+    projectId,
+    project,
+    allowPermissions,
+  });
+
+  // Active tab hook
+  const { isActive, activeItem } = useActiveTab({
+    navigationItems,
+    pathname,
+    workItemId,
+    workItem,
+    projectId,
+  });
+
+  // Project actions hook
+  const {
+    publishModalOpen,
+    leaveProjectModalOpen,
+    handleLeaveProject,
+    handleCopyText,
+    handlePublishModal,
+    handleLeaveProjectModal,
+  } = useProjectActions({
+    workspaceSlug,
+    projectId,
+    activeItem,
+  });
+
+  // Filter and sort navigation items
+  const allNavigationItems = navigationItems
+    .filter((item) => item.shouldRender)
+    // oxlint-disable-next-line unicorn/no-array-sort
+    .sort((a: TNavigationItem, b: TNavigationItem) => a.sortOrder - b.sortOrder);
+
+  // Split items into two categories:
+  // 1. visibleNavigationItems: Items NOT user-hidden (may still overflow due to space)
+  // 2. hiddenNavigationItems: Items user explicitly hid (always in overflow with "Show" icon)
+  const visibleNavigationItems = allNavigationItems.filter(
+    (item: TNavigationItem) => !tabPreferences.hiddenTabs.includes(item.key)
+  );
+  const hiddenNavigationItems = allNavigationItems.filter((item: TNavigationItem) =>
+    tabPreferences.hiddenTabs.includes(item.key)
+  );
+
+  // Responsive tab layout hook
+  const { visibleItems, overflowItems, hasOverflow, itemRefs, containerRef } = useResponsiveTabLayout({
+    visibleNavigationItems,
+    hiddenNavigationItems,
+    isActive,
+  });
+
+  // Redirect to default tab when navigating to project root
+  useEffect(() => {
+    const projectRootPath = `/${workspaceSlug}/projects/${projectId}`;
+    const isProjectRoot = pathname === projectRootPath || pathname === `${projectRootPath}/`;
+
+    if (isProjectRoot && allNavigationItems.length > 0) {
+      // Find the default tab in available items
+      const defaultTabItem = allNavigationItems.find((item: TNavigationItem) => item.key === tabPreferences.defaultTab);
+
+      // If default tab exists and is enabled, use it; otherwise fall back to work_items
+      const targetItem =
+        defaultTabItem || allNavigationItems.find((item: TNavigationItem) => item.key === DEFAULT_TAB_KEY);
+
+      if (targetItem) {
+        navigate(targetItem.href, { replace: true });
+      }
+    }
+  }, [pathname, workspaceSlug, projectId, tabPreferences.defaultTab, allNavigationItems, navigate]);
+
+  if (allNavigationItems.length === 0) return null;
+  if (!project) return null;
+
+  // Permission checks
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    project?.id
+  );
+
+  const isAuthorized = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    project?.id
+  );
+
+  return (
+    <>
+      <PublishProjectModal isOpen={publishModalOpen} projectId={projectId} onClose={() => handlePublishModal(false)} />
+      <LeaveProjectModal
+        project={project}
+        isOpen={leaveProjectModalOpen}
+        onClose={() => handleLeaveProjectModal(false)}
+      />
+
+      {/* container for the tab navigation */}
+      <div className="flex size-full items-center gap-3 overflow-hidden">
+        <div className="flex shrink-0 items-center gap-2">
+          <ProjectHeader workspaceSlug={workspaceSlug} projectId={projectId} />
+          <div className="shrink-0">
+            <ProjectActionsMenu
+              workspaceSlug={workspaceSlug}
+              project={project}
+              isAdmin={isAdmin}
+              isAuthorized={isAuthorized}
+              onCopyText={handleCopyText}
+              onLeaveProject={handleLeaveProject}
+              onPublishModal={() => handlePublishModal(true)}
+            />
+          </div>
+        </div>
+
+        <div className="h-5 w-1 shrink-0 border-l border-subtle" />
+
+        <div ref={containerRef} className="flex h-full min-w-0 flex-1 items-center overflow-hidden">
+          <TabNavigationList className="h-full">
+            {/* Render visible tab items */}
+            {visibleItems.map((item) => {
+              const itemIsActive = isActive(item);
+              const originalIndex = allNavigationItems.indexOf(item);
+
+              return (
+                <TabNavigationVisibleItem
+                  key={item.key}
+                  item={item}
+                  isActive={itemIsActive}
+                  tabPreferences={tabPreferences}
+                  onToggleDefault={handleToggleDefaultTab}
+                  onHide={handleHideTab}
+                  itemRef={(el) => {
+                    itemRefs.current[originalIndex] = el;
+                  }}
+                />
+              );
+            })}
+
+            {/* Render overflow menu if needed */}
+            {hasOverflow && (
+              <TabNavigationOverflowMenu
+                overflowItems={overflowItems}
+                isActive={isActive}
+                tabPreferences={tabPreferences}
+                onToggleDefault={handleToggleDefaultTab}
+                onShow={handleShowTab}
+              />
+            )}
+          </TabNavigationList>
+
+          {hasOverflow && (
+            <div className="pointer-events-none absolute -z-10 opacity-0">
+              {visibleNavigationItems.map((item: TNavigationItem) => {
+                const itemIsActive = isActive(item);
+                const originalIndex = allNavigationItems.indexOf(item);
+                return (
+                  <div
+                    key={`measure-hidden-${item.key}`}
+                    ref={(el) => {
+                      itemRefs.current[originalIndex] = el;
+                    }}
+                    className="inline-block"
+                  >
+                    <Link to={item.href}>
+                      <TabNavigationItem isActive={itemIsActive}>
+                        <span>{t(item.i18n_key)}</span>
+                      </TabNavigationItem>
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/navigation/tab-navigation-utils.ts b/apps/web/core/components/navigation/tab-navigation-utils.ts
new file mode 100644
index 0000000..de8fa14
--- /dev/null
+++ b/apps/web/core/components/navigation/tab-navigation-utils.ts
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Tab preferences type
+export type TTabPreferences = {
+  defaultTab: string;
+  hiddenTabs: string[];
+};
+
+// Constants
+export const TAB_PREFS_KEY = "plane_tab_prefs";
+export const DEFAULT_TAB_KEY = "work_items";
+
+/**
+ * Get tab preferences for a specific project from localStorage
+ * @param projectId - The project ID
+ * @returns Tab preferences object with defaultTab and hiddenTabs
+ */
+export const getTabPreferences = (projectId: string): TTabPreferences => {
+  try {
+    const stored = localStorage.getItem(TAB_PREFS_KEY);
+    if (stored) {
+      const allPrefs = JSON.parse(stored);
+      return (
+        allPrefs[projectId] || {
+          defaultTab: DEFAULT_TAB_KEY,
+          hiddenTabs: [],
+        }
+      );
+    }
+  } catch (error) {
+    console.error("Error reading tab preferences:", error);
+  }
+  return {
+    defaultTab: DEFAULT_TAB_KEY,
+    hiddenTabs: [],
+  };
+};
+
+/**
+ * Save tab preferences for a specific project to localStorage
+ * @param projectId - The project ID
+ * @param preferences - Tab preferences to save
+ */
+export const saveTabPreferences = (projectId: string, preferences: TTabPreferences): void => {
+  try {
+    const stored = localStorage.getItem(TAB_PREFS_KEY);
+    const allPrefs = stored ? JSON.parse(stored) : {};
+    allPrefs[projectId] = preferences;
+    localStorage.setItem(TAB_PREFS_KEY, JSON.stringify(allPrefs));
+  } catch (error) {
+    console.error("Error saving tab preferences:", error);
+  }
+};
+
+/**
+ * Map tab keys to their corresponding URLs
+ * @param workspaceSlug - The workspace slug
+ * @param projectId - The project ID
+ * @param tabKey - The tab key to map
+ * @returns Full URL path for the tab
+ */
+export const getTabUrl = (workspaceSlug: string, projectId: string, tabKey: string): string => {
+  const baseUrl = `/${workspaceSlug}/projects/${projectId}`;
+  const tabUrlMap: Record<string, string> = {
+    work_items: `${baseUrl}/issues`,
+    cycles: `${baseUrl}/cycles`,
+    modules: `${baseUrl}/modules`,
+    views: `${baseUrl}/views`,
+    pages: `${baseUrl}/pages`,
+    intake: `${baseUrl}/intake`,
+    overview: `${baseUrl}/overview`,
+    epics: `${baseUrl}/epics`,
+  };
+  return tabUrlMap[tabKey] || `${baseUrl}/issues`; // fallback to issues
+};
+
+/**
+ * Get the default tab URL for a project
+ * @param workspaceSlug - The workspace slug
+ * @param projectId - The project ID
+ * @param availableTabKeys - Optional array of available tab keys for validation
+ * @returns Full URL path for the default tab (validated if availableTabKeys provided)
+ */
+export const getDefaultTabUrl = (workspaceSlug: string, projectId: string, availableTabKeys?: string[]): string => {
+  const preferences = getTabPreferences(projectId);
+  let tabKey = preferences.defaultTab;
+
+  // Validate against available tabs if provided
+  if (availableTabKeys && availableTabKeys.length > 0) {
+    tabKey = getValidatedDefaultTab(projectId, availableTabKeys);
+  }
+
+  return getTabUrl(workspaceSlug, projectId, tabKey);
+};
+
+/**
+ * Get the default tab key, with validation that it exists in available tabs
+ * @param projectId - The project ID
+ * @param availableTabKeys - Array of available tab keys
+ * @returns The default tab key if valid, otherwise DEFAULT_TAB_KEY
+ */
+export const getValidatedDefaultTab = (projectId: string, availableTabKeys: string[]): string => {
+  const preferences = getTabPreferences(projectId);
+  const defaultTab = preferences.defaultTab;
+
+  // Check if the default tab is in the available tabs
+  if (availableTabKeys.includes(defaultTab)) {
+    return defaultTab;
+  }
+
+  // Fall back to work_items
+  return DEFAULT_TAB_KEY;
+};
diff --git a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
new file mode 100644
index 0000000..3a32d49
--- /dev/null
+++ b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Link } from "react-router";
+import { DefaultTabOutline, UnpinOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ContextMenu } from "@plane/propel/context-menu";
+import { TabNavigationItem } from "@plane/propel/tab-navigation";
+// local imports
+import type { TNavigationItem } from "./tab-navigation-root";
+import type { TTabPreferences } from "./tab-navigation-utils";
+
+export type TTabNavigationVisibleItemProps = {
+  item: TNavigationItem;
+  isActive: boolean;
+  tabPreferences: TTabPreferences;
+  onToggleDefault: (tabKey: string) => void;
+  onHide: (tabKey: string) => void;
+  itemRef?: (el: HTMLDivElement | null) => void;
+};
+
+/**
+ * Individual visible tab navigation item with context menu
+ * Handles right-click actions for setting default and hiding tabs
+ */
+export function TabNavigationVisibleItem({
+  item,
+  isActive,
+  tabPreferences,
+  onToggleDefault,
+  onHide,
+  itemRef,
+}: TTabNavigationVisibleItemProps) {
+  const { t } = useTranslation();
+  const isDefault = item.key === tabPreferences.defaultTab;
+
+  return (
+    <div className="relative flex h-full items-center transition-all duration-300">
+      {isActive && (
+        <span className="absolute bottom-0 left-1/2 h-0.5 w-[80%] -translate-x-1/2 rounded-t-md bg-(--text-color-icon-primary) transition-all duration-300" />
+      )}
+      <div key={`${item.key}-measure`} ref={itemRef}>
+        <ContextMenu>
+          <ContextMenu.Trigger>
+            <Link key={`${item.key}-${isActive ? "active" : "inactive"}`} to={item.href}>
+              <TabNavigationItem isActive={isActive}>
+                <span>{t(item.i18n_key)}</span>
+              </TabNavigationItem>
+            </Link>
+          </ContextMenu.Trigger>
+          <ContextMenu.Portal>
+            <ContextMenu.Content positionerClassName="z-30">
+              <ContextMenu.Item
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggleDefault(item.key);
+                }}
+                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
+              >
+                <DefaultTabOutline className="size-3 shrink-0" />
+                <span className="text-11">{isDefault ? "Clear default" : "Set as default"}</span>
+              </ContextMenu.Item>
+              <ContextMenu.Item
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onHide(item.key);
+                }}
+                className="flex cursor-pointer items-center gap-2 text-secondary transition-colors"
+              >
+                <UnpinOutline className="size-3 shrink-0" />
+                <span className="text-11">Hide in more menu</span>
+              </ContextMenu.Item>
+            </ContextMenu.Content>
+          </ContextMenu.Portal>
+        </ContextMenu>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/navigation/top-nav-power-k.tsx b/apps/web/core/components/navigation/top-nav-power-k.tsx
new file mode 100644
index 0000000..9c1a117
--- /dev/null
+++ b/apps/web/core/components/navigation/top-nav-power-k.tsx
@@ -0,0 +1,294 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+// power-k
+import type { TPowerKCommandConfig, TPowerKContext } from "@/components/power-k/core/types";
+import { ProjectsAppPowerKCommandsList } from "@/components/power-k/ui/modal/commands-list";
+import { PowerKModalFooter } from "@/components/power-k/ui/modal/footer";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { usePowerK } from "@/hooks/store/use-power-k";
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useExpandableSearch } from "@/hooks/use-expandable-search";
+
+export const TopNavPowerK = observer(() => {
+  // router
+  const router = useAppRouter();
+  const params = useParams();
+  const { projectId: routerProjectId, workItem: workItemIdentifier } = params;
+
+  // states
+  const [searchTerm, setSearchTerm] = useState("");
+  const [activeCommand, setActiveCommand] = useState<TPowerKCommandConfig | null>(null);
+  const [shouldShowContextBasedActions, setShouldShowContextBasedActions] = useState(true);
+  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
+
+  // store hooks
+  const { activeContext, setActivePage, activePage, setTopNavInputRef } = usePowerK();
+  const { data: currentUser } = useUser();
+
+  const handleOnClose = useCallback(() => {
+    setSearchTerm("");
+    setActivePage(null);
+    setActiveCommand(null);
+  }, [setSearchTerm, setActivePage, setActiveCommand]);
+
+  // expandable search hook
+  const {
+    isOpen,
+    containerRef,
+    inputRef,
+    handleClose: closePanel,
+    handleMouseDown,
+    handleFocus,
+    openPanel,
+  } = useExpandableSearch({
+    onClose: handleOnClose,
+  });
+
+  // derived values
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+
+  const workItemId = workItemIdentifier ? getIssueIdByIdentifier(workItemIdentifier.toString()) : undefined;
+  const workItemDetails = workItemId ? getIssueById(workItemId) : undefined;
+  const projectId: string | string[] | undefined | null = routerProjectId ?? workItemDetails?.project_id;
+
+  // Build command context
+  const context: TPowerKContext = useMemo(
+    () => ({
+      currentUserId: currentUser?.id,
+      activeCommand,
+      activeContext,
+      shouldShowContextBasedActions,
+      setShouldShowContextBasedActions,
+      params: {
+        ...params,
+        projectId,
+      },
+      router,
+      closePalette: closePanel,
+      setActiveCommand,
+      setActivePage,
+    }),
+    [
+      currentUser?.id,
+      activeCommand,
+      activeContext,
+      shouldShowContextBasedActions,
+      params,
+      projectId,
+      router,
+      setActivePage,
+      closePanel,
+    ]
+  );
+
+  // Register input ref with PowerK store for keyboard shortcut access
+  useEffect(() => {
+    setTopNavInputRef(inputRef);
+    return () => {
+      setTopNavInputRef(null);
+    };
+  }, [setTopNavInputRef]);
+
+  const handleClear = () => {
+    setSearchTerm("");
+    inputRef.current?.focus();
+  };
+
+  // Handle command selection
+  const handleCommandSelect = useCallback(
+    (command: TPowerKCommandConfig) => {
+      if (command.type === "action") {
+        command.action(context);
+        // Always close on command selection
+        context.closePalette();
+      } else if (command.type === "change-page") {
+        context.setActiveCommand(command);
+        setActivePage(command.page);
+        setSearchTerm("");
+      }
+    },
+    [context, setActivePage]
+  );
+
+  // Handle selection page item selection
+  const handlePageDataSelection = useCallback(
+    (data: unknown) => {
+      if (context.activeCommand?.type === "change-page") {
+        context.activeCommand.onSelect(data, context);
+      }
+      // Always close on page data selection
+      context.closePalette();
+    },
+    [context]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      // Cmd/Ctrl+K closes the search dropdown
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        closePanel();
+        return;
+      }
+
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (searchTerm) {
+          setSearchTerm("");
+        }
+        closePanel();
+        return;
+      }
+
+      if (e.key === "Backspace" && !searchTerm) {
+        if (activePage) {
+          e.preventDefault();
+          setActivePage(null);
+          context.setActiveCommand(null);
+        } else if (shouldShowContextBasedActions) {
+          // Optional: logic to hide context actions if desired, similar to wrapper
+          context.setShouldShowContextBasedActions(false);
+        }
+        return;
+      }
+
+      // Arrow down/up keys to navigate command items
+      if ((e.key === "ArrowDown" || e.key === "ArrowUp") && isOpen) {
+        e.preventDefault();
+        // Get the Command.List element
+        const commandList = containerRef.current?.querySelector("[cmdk-list]") as HTMLElement;
+        if (commandList) {
+          // Create and dispatch a keyboard event on the list to trigger cmdk navigation
+          const syntheticEvent = new KeyboardEvent("keydown", {
+            key: e.key,
+            bubbles: true,
+            cancelable: true,
+          });
+          commandList.dispatchEvent(syntheticEvent);
+
+          // Also try to focus the first/selected item
+          if (e.key === "ArrowDown") {
+            const firstItem = commandList.querySelector('[cmdk-item]:not([aria-disabled="true"])') as HTMLElement;
+            if (firstItem) {
+              firstItem.focus();
+            }
+          }
+        }
+        return;
+      }
+
+      // Enter key to execute selected command
+      if (e.key === "Enter" && isOpen) {
+        e.preventDefault();
+        // Find the currently selected/focused item
+        const selectedItem = containerRef.current?.querySelector('[cmdk-item][aria-selected="true"]') as HTMLElement;
+        if (selectedItem) {
+          // Trigger click on the selected item
+          selectedItem.click();
+        }
+        return;
+      }
+    },
+    [searchTerm, activePage, context, shouldShowContextBasedActions, setActivePage, closePanel]
+  );
+
+  return (
+    <div ref={containerRef} className="relative">
+      <div
+        className={cn("relative z-30 flex w-[364px] items-center transition-all duration-300 ease-in-out", {
+          "w-[554px]": isOpen,
+        })}
+      >
+        <div
+          className={cn(
+            "flex h-7 w-full items-center rounded-lg border border-subtle-1 bg-layer-2 p-2 transition-colors duration-200",
+            {
+              "bg-layer-1": isOpen,
+            }
+          )}
+          onClick={() => inputRef.current?.focus()}
+          role="button"
+        >
+          <SearchOutline className="mr-2 size-3.5 shrink-0 text-placeholder" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+              if (!isOpen) openPanel();
+            }}
+            onMouseDown={handleMouseDown}
+            onFocus={handleFocus}
+            onKeyDown={handleKeyDown}
+            placeholder="Search commands..."
+            className="placeholder-text-placeholder min-w-0 flex-1 bg-transparent text-13 text-primary outline-none"
+          />
+          {searchTerm && (
+            <button type="button" onClick={handleClear} className="ml-2 shrink-0">
+              <CloseOutline className="size-3.5 text-placeholder hover:text-primary" />
+            </button>
+          )}
+        </div>
+      </div>
+      <div
+        className={cn(
+          "shadow-lg absolute -top-[6px] left-1/2 z-20 flex -translate-x-1/2 flex-col overflow-hidden rounded-md border border-subtle bg-surface-1 px-0 pt-10 transition-all duration-300 ease-in-out",
+          {
+            "max-h-[80vh] w-[574px] opacity-100": isOpen,
+            "h-0 w-0 opacity-0": !isOpen,
+          }
+        )}
+      >
+        {isOpen && (
+          <Command
+            filter={(i18nValue: string, search: string) => {
+              if (i18nValue === "no-results") return 1;
+              if (i18nValue.toLowerCase().includes(search.toLowerCase())) return 1;
+              return 0;
+            }}
+            shouldFilter={searchTerm.length > 0}
+            className="flex h-full w-full flex-col"
+          >
+            <Command.Input value={searchTerm} hidden />
+            {/* We can skip the header input since we have the main input above,
+                     but we might need the context indicator if we want that feature.
+                     For now, let's just render the list. */}
+
+            <Command.List className="vertical-scrollbar scrollbar-sm max-h-[60vh] overflow-y-auto px-2 pb-4 outline-none">
+              <ProjectsAppPowerKCommandsList
+                activePage={activePage}
+                context={context}
+                handleCommandSelect={handleCommandSelect}
+                handlePageDataSelection={handlePageDataSelection}
+                isWorkspaceLevel={isWorkspaceLevel}
+                searchTerm={searchTerm}
+                setSearchTerm={setSearchTerm}
+                handleSearchMenuClose={() => closePanel()}
+              />
+            </Command.List>
+            <PowerKModalFooter
+              isWorkspaceLevel={isWorkspaceLevel}
+              projectId={context.params.projectId?.toString()}
+              onWorkspaceLevelChange={setIsWorkspaceLevel}
+            />
+          </Command>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/navigation/top-navigation-root.tsx b/apps/web/core/components/navigation/top-navigation-root.tsx
new file mode 100644
index 0000000..146977a
--- /dev/null
+++ b/apps/web/core/components/navigation/top-navigation-root.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import { cn } from "@plane/utils";
+import { TopNavPowerK } from "@/components/navigation";
+import { HelpMenuRoot } from "@/components/workspace/sidebar/help-section/root";
+import { UserMenuRoot } from "@/components/workspace/sidebar/user-menu-root";
+import { WorkspaceMenuRoot } from "@/components/workspace/sidebar/workspace-menu-root";
+import { useAppRailPreferences } from "@/hooks/use-navigation-preferences";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+import { InboxOutline } from "@makeplane/propel/icons";
+import useSWR from "swr";
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+// local imports
+import { StarUsOnGitHubLink } from "@/app/(all)/[workspaceSlug]/(projects)/star-us-link";
+
+export const TopNavigationRoot = observer(function TopNavigationRoot() {
+  // router
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+
+  // store hooks
+  const { unreadNotificationsCount, getUnreadNotificationsCount } = useWorkspaceNotifications();
+  const { preferences } = useAppRailPreferences();
+
+  const showLabel = preferences.displayMode === "icon_with_label";
+
+  // Fetch notification count
+  useSWR(
+    workspaceSlug ? "WORKSPACE_UNREAD_NOTIFICATION_COUNT" : null,
+    workspaceSlug ? () => getUnreadNotificationsCount(workspaceSlug.toString()) : null
+  );
+
+  // Calculate notification count
+  const isMentionsEnabled = unreadNotificationsCount.mention_unread_notifications_count > 0;
+  const totalNotifications = isMentionsEnabled
+    ? unreadNotificationsCount.mention_unread_notifications_count
+    : unreadNotificationsCount.total_unread_notifications_count;
+
+  return (
+    <div
+      className={cn("z-[27] flex min-h-10 w-full items-center bg-canvas px-3.5 transition-all duration-300", {
+        "px-2": !showLabel,
+      })}
+    >
+      {/* Workspace Menu */}
+      <div className="flex-1 shrink-0">
+        <WorkspaceMenuRoot variant="top-navigation" />
+      </div>
+      {/* Power K Search */}
+      <div className="shrink-0">
+        <TopNavPowerK />
+      </div>
+      {/* Additional Actions */}
+      <div className="flex flex-1 shrink-0 items-center justify-end gap-1">
+        <Tooltip label="Inbox" side="bottom">
+          <AppSidebarItem
+            variant="link"
+            item={{
+              href: `/${workspaceSlug?.toString()}/notifications/`,
+              icon: (
+                <div className="relative">
+                  <InboxOutline className="size-5" />
+                  {totalNotifications > 0 && (
+                    <span className="absolute top-0 right-0 size-2 rounded-full bg-danger-primary" />
+                  )}
+                </div>
+              ),
+              isActive: pathname?.includes("/notifications/"),
+            }}
+          />
+        </Tooltip>
+        <HelpMenuRoot />
+        <StarUsOnGitHubLink />
+        <div className="flex size-8 items-center justify-center rounded-md hover:bg-layer-1-hover">
+          <UserMenuRoot />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/navigation/use-active-tab.ts b/apps/web/core/components/navigation/use-active-tab.ts
new file mode 100644
index 0000000..50ca1c6
--- /dev/null
+++ b/apps/web/core/components/navigation/use-active-tab.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import type { TIssue } from "@plane/types";
+import type { TNavigationItem } from "@/components/navigation/tab-navigation-root";
+
+type UseActiveTabProps = {
+  navigationItems: TNavigationItem[];
+  pathname: string;
+  workItemId?: string;
+  workItem?: TIssue;
+  projectId: string;
+};
+
+export const useActiveTab = ({ navigationItems, pathname, workItemId, workItem, projectId }: UseActiveTabProps) => {
+  // Check if a navigation item is active
+  const isActive = useCallback(
+    (item: TNavigationItem) => {
+      // Work item condition
+      const workItemCondition = workItemId && workItem && !workItem?.is_epic && workItem?.project_id === projectId;
+      // Epic condition
+      const epicCondition = workItemId && workItem && workItem?.is_epic && workItem?.project_id === projectId;
+      // Is active
+      const isWorkItemActive = item.key === "work_items" && workItemCondition;
+      const isEpicActive = item.key === "epics" && epicCondition;
+      // Pathname condition - use exact match or startsWith for better accuracy
+      const isPathnameActive = pathname === item.href || pathname.startsWith(item.href + "/");
+      // Return
+      return isWorkItemActive || isEpicActive || isPathnameActive;
+    },
+    [pathname, workItem, workItemId, projectId]
+  );
+
+  // Find active item
+  const activeItem = useMemo(() => navigationItems.find((item) => isActive(item)), [navigationItems, isActive]);
+
+  return { isActive, activeItem };
+};
diff --git a/apps/web/core/components/navigation/use-navigation-items.ts b/apps/web/core/components/navigation/use-navigation-items.ts
new file mode 100644
index 0000000..669ed46
--- /dev/null
+++ b/apps/web/core/components/navigation/use-navigation-items.ts
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useCallback } from "react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import {
+  CyclesOutline,
+  IntakeOutline,
+  ModuleOutline,
+  PagesOutline,
+  ViewsOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+import type { EUserProjectRoles, IPartialProject } from "@plane/types";
+import type { TNavigationItem } from "@/components/navigation/tab-navigation-root";
+
+type UseNavigationItemsProps = {
+  workspaceSlug: string;
+  projectId: string;
+  project?: IPartialProject;
+  allowPermissions: (
+    access: EUserPermissions[] | EUserProjectRoles[],
+    level: EUserPermissionsLevel,
+    workspaceSlug: string,
+    projectId: string
+  ) => boolean;
+};
+
+export const useNavigationItems = ({
+  workspaceSlug,
+  projectId,
+  project,
+  allowPermissions,
+}: UseNavigationItemsProps): TNavigationItem[] => {
+  // Base navigation items
+  const baseNavigation = useCallback(
+    // oxlint-disable-next-line no-shadow
+    (workspaceSlug: string, projectId: string): TNavigationItem[] => [
+      {
+        i18n_key: "sidebar.work_items",
+        key: "work_items",
+        name: "Work items",
+        href: `/${workspaceSlug}/projects/${projectId}/issues`,
+        icon: WorkItemsOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: true,
+        sortOrder: 1,
+      },
+      {
+        i18n_key: "sidebar.cycles",
+        key: "cycles",
+        name: "Cycles",
+        href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+        icon: CyclesOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+        shouldRender: !!project?.cycle_view,
+        sortOrder: 2,
+      },
+      {
+        i18n_key: "sidebar.modules",
+        key: "modules",
+        name: "Modules",
+        href: `/${workspaceSlug}/projects/${projectId}/modules`,
+        icon: ModuleOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+        shouldRender: !!project?.module_view,
+        sortOrder: 3,
+      },
+      {
+        i18n_key: "sidebar.views",
+        key: "views",
+        name: "Views",
+        href: `/${workspaceSlug}/projects/${projectId}/views`,
+        icon: ViewsOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: !!project?.issue_views_view,
+        sortOrder: 4,
+      },
+      {
+        i18n_key: "sidebar.pages",
+        key: "pages",
+        name: "Pages",
+        href: `/${workspaceSlug}/projects/${projectId}/pages`,
+        icon: PagesOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: !!project?.page_view,
+        sortOrder: 5,
+      },
+      {
+        i18n_key: "sidebar.intake",
+        key: "intake",
+        name: "Intake",
+        href: `/${workspaceSlug}/projects/${projectId}/intake`,
+        icon: IntakeOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: !!project?.inbox_view,
+        sortOrder: 6,
+      },
+    ],
+    [project]
+  );
+
+  // Combine, filter, and sort navigation items
+  const navigationItems = useMemo(() => {
+    const navItems = baseNavigation(workspaceSlug, projectId);
+
+    // Filter by permissions and shouldRender
+    const filteredItems = navItems.filter((item) => {
+      if (!item.shouldRender) return false;
+      const hasAccess = allowPermissions(item.access, EUserPermissionsLevel.PROJECT, workspaceSlug, project?.id ?? "");
+      return hasAccess;
+    });
+
+    // Sort by sortOrder
+    // oxlint-disable-next-line unicorn/no-array-sort
+    return filteredItems.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+  }, [workspaceSlug, projectId, baseNavigation, allowPermissions, project?.id]);
+
+  return navigationItems;
+};
diff --git a/apps/web/core/components/navigation/use-project-actions.ts b/apps/web/core/components/navigation/use-project-actions.ts
new file mode 100644
index 0000000..1b88127
--- /dev/null
+++ b/apps/web/core/components/navigation/use-project-actions.ts
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useState } from "react";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { copyUrlToClipboard } from "@plane/utils";
+import type { TNavigationItem } from "@/components/navigation/tab-navigation-root";
+
+type UseProjectActionsProps = {
+  workspaceSlug: string;
+  projectId: string;
+  activeItem?: TNavigationItem;
+};
+
+export const useProjectActions = ({ workspaceSlug, projectId, activeItem }: UseProjectActionsProps) => {
+  const [publishModalOpen, setPublishModalOpen] = useState(false);
+  const [leaveProjectModalOpen, setLeaveProjectModalOpen] = useState(false);
+
+  const handleLeaveProject = useCallback(() => {
+    setLeaveProjectModalOpen(true);
+  }, []);
+
+  const handleCopyText = useCallback(async () => {
+    const pathToCopy = activeItem?.href ?? `/${workspaceSlug}/projects/${projectId}/issues`;
+
+    try {
+      await copyUrlToClipboard(pathToCopy);
+      setToast({
+        type: TOAST_TYPE.INFO,
+        title: "Link copied!",
+        message: "Project link copied to clipboard.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Copy failed",
+        message: "We couldn't copy the link. Please try again.",
+      });
+    }
+  }, [activeItem, projectId, workspaceSlug]);
+
+  const handlePublishModal = useCallback((open: boolean) => {
+    setPublishModalOpen(open);
+  }, []);
+
+  const handleLeaveProjectModal = useCallback((open: boolean) => {
+    setLeaveProjectModalOpen(open);
+  }, []);
+
+  return {
+    publishModalOpen,
+    leaveProjectModalOpen,
+    handleLeaveProject,
+    handleCopyText,
+    handlePublishModal,
+    handleLeaveProjectModal,
+  };
+};
diff --git a/apps/web/core/components/navigation/use-responsive-tab-layout.ts b/apps/web/core/components/navigation/use-responsive-tab-layout.ts
new file mode 100644
index 0000000..cde0615
--- /dev/null
+++ b/apps/web/core/components/navigation/use-responsive-tab-layout.ts
@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { TNavigationItem } from "./tab-navigation-root";
+
+export type TResponsiveTabLayout = {
+  visibleItems: TNavigationItem[];
+  overflowItems: TNavigationItem[];
+  hasOverflow: boolean;
+  itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+  containerRef: (node: HTMLDivElement | null) => void;
+};
+
+type UseResponsiveTabLayoutProps = {
+  visibleNavigationItems: TNavigationItem[];
+  hiddenNavigationItems: TNavigationItem[];
+  isActive: (item: TNavigationItem) => boolean;
+};
+
+/**
+ * Custom hook for managing responsive tab layout
+ * Calculates which tabs fit in the visible area and which overflow
+ * Implements smart pinning to keep active tabs visible
+ *
+ * @param visibleNavigationItems - Items that are not user-hidden
+ * @param hiddenNavigationItems - Items that user explicitly hid
+ * @param isActive - Function to check if a tab is active
+ * @returns Layout information and refs for rendering
+ */
+export const useResponsiveTabLayout = ({
+  visibleNavigationItems,
+  hiddenNavigationItems,
+  isActive,
+}: UseResponsiveTabLayoutProps): TResponsiveTabLayout => {
+  // Refs for measuring items
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
+  // State for responsive behavior
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const [visibleCount, setVisibleCount] = useState<number>(visibleNavigationItems.length);
+
+  // Constants
+  const gap = 4; // gap-1 = 4px
+  const overflowButtonWidth = 40;
+
+  // Callback ref that sets up ResizeObserver when element is attached
+  const containerRef = useCallback((node: HTMLDivElement | null) => {
+    // Clean up previous observer if it exists
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+      resizeObserverRef.current = null;
+    }
+
+    // If node is null (unmounting), just clean up
+    if (!node) {
+      setContainerWidth(0);
+      return;
+    }
+
+    // Set initial width immediately
+    setContainerWidth(node.offsetWidth);
+
+    // Create and set up new ResizeObserver
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+
+    resizeObserverRef.current = resizeObserver;
+    resizeObserver.observe(node);
+  }, []); // Empty deps - callback function remains stable
+
+  // Cleanup effect to disconnect observer on component unmount
+  useEffect(
+    () => () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+    },
+    []
+  );
+
+  // Calculate how many items can fit
+  useEffect(() => {
+    if (!containerWidth || itemRefs.current.length === 0) return;
+
+    let totalWidth = 0;
+    let count = 0;
+
+    for (let i = 0; i < itemRefs.current.length; i++) {
+      const item = itemRefs.current[i];
+      if (!item) continue;
+
+      const itemWidth = item.offsetWidth;
+      const widthWithGap = itemWidth + (count > 0 ? gap : 0);
+
+      // If we still have items to show, reserve space for overflow button
+      const remainingItems = visibleNavigationItems.length - (i + 1);
+      const reservedSpace = remainingItems > 0 ? overflowButtonWidth + gap : 0;
+
+      if (totalWidth + widthWithGap + reservedSpace <= containerWidth) {
+        totalWidth += widthWithGap;
+        count++;
+      } else {
+        break;
+      }
+    }
+
+    // Ensure at least one item is visible if there's space
+    if (count === 0 && visibleNavigationItems.length > 0 && containerWidth > overflowButtonWidth) {
+      count = 1;
+    }
+
+    setVisibleCount(count);
+  }, [containerWidth, visibleNavigationItems.length, gap, overflowButtonWidth]);
+
+  // Memoize active tab index to prevent unnecessary re-renders
+  const activeTabIndex = useMemo(
+    () => visibleNavigationItems.findIndex((item) => isActive(item)),
+    [visibleNavigationItems, isActive]
+  );
+
+  // Smart pinning logic: calculate visible and overflow items
+  const { visibleItems, overflowItems, hasOverflow } = useMemo(() => {
+    // Start with responsive calculation: which items fit in available space
+    let visible = visibleNavigationItems.slice(0, visibleCount);
+    let overflow = visibleNavigationItems.slice(visibleCount);
+
+    // If active tab would be in overflow, swap it with last visible item
+    if (activeTabIndex !== -1 && activeTabIndex >= visibleCount && visibleCount > 0) {
+      const activeItem = visibleNavigationItems[activeTabIndex];
+      const replacedItem = visible[visibleCount - 1];
+
+      visible = [...visible.slice(0, visibleCount - 1), activeItem];
+      // Add replaced item to overflow, maintain order
+      overflow = [
+        replacedItem,
+        ...visibleNavigationItems.slice(visibleCount, activeTabIndex),
+        ...visibleNavigationItems.slice(activeTabIndex + 1),
+      ];
+    }
+
+    // Combine space-overflowed items with user-hidden items
+    // User-hidden items (in hiddenNavigationItems) will show "Eye" icon
+    // Space-overflowed items (in overflow from visibleNavigationItems) will NOT show "Eye" icon
+    const allOverflow = [...overflow, ...hiddenNavigationItems];
+
+    return {
+      visibleItems: visible,
+      overflowItems: allOverflow,
+      hasOverflow: allOverflow.length > 0,
+    };
+  }, [visibleNavigationItems, hiddenNavigationItems, visibleCount, activeTabIndex]);
+
+  return {
+    visibleItems,
+    overflowItems,
+    hasOverflow,
+    itemRefs,
+    containerRef,
+  };
+};
diff --git a/apps/web/core/components/navigation/use-tab-preferences.ts b/apps/web/core/components/navigation/use-tab-preferences.ts
new file mode 100644
index 0000000..a29829e
--- /dev/null
+++ b/apps/web/core/components/navigation/use-tab-preferences.ts
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+import { DEFAULT_TAB_KEY } from "./tab-navigation-utils";
+import type { TTabPreferences } from "./tab-navigation-utils";
+
+export type TTabPreferencesHook = {
+  tabPreferences: TTabPreferences;
+  isLoading: boolean;
+  handleToggleDefaultTab: (tabKey: string) => void;
+  handleHideTab: (tabKey: string) => void;
+  handleShowTab: (tabKey: string) => void;
+};
+
+/**
+ * Custom hook to manage tab preferences for a project
+ * Uses MobX store for state management and API persistence
+ *
+ * @param workspaceSlug - The workspace slug
+ * @param projectId - The project ID
+ * @returns Tab preferences state and handlers
+ */
+export const useTabPreferences = (workspaceSlug: string, projectId: string): TTabPreferencesHook => {
+  const {
+    project: { getProjectUserProperties, updateProjectUserProperties },
+  } = useMember();
+  // const { projectUserInfo } = useUserPermissions();
+  const { data } = useUser();
+
+  // Get member ID from projectUserInfo
+  // const projectMemberInfo = projectUserInfo[workspaceSlug]?.[projectId];
+  const memberId = data?.id || null;
+
+  // Get preferences from store
+  const storePreferences = getProjectUserProperties(projectId);
+  const defaultTab = storePreferences?.preferences?.navigation?.default_tab || DEFAULT_TAB_KEY;
+  const hideInMoreMenu = storePreferences?.preferences?.navigation?.hide_in_more_menu || [];
+
+  // Convert store preferences to component format
+  const tabPreferences: TTabPreferences = useMemo(() => {
+    return {
+      defaultTab,
+      hiddenTabs: hideInMoreMenu,
+    };
+  }, [defaultTab, hideInMoreMenu]);
+
+  const isLoading = !storePreferences && memberId !== null;
+
+  /**
+   * Update preferences via store
+   */
+  const updatePreferences = async (newPreferences: TTabPreferences) => {
+    await updateProjectUserProperties(workspaceSlug, projectId, {
+      preferences: {
+        pages: storePreferences?.preferences?.pages || { block_display: false },
+        navigation: {
+          default_tab: newPreferences.defaultTab,
+          hide_in_more_menu: newPreferences.hiddenTabs,
+        },
+      },
+    });
+  };
+
+  /**
+   * Toggle default tab setting
+   * If tab is already default, resets to work_items; otherwise sets as default
+   */
+  const handleToggleDefaultTab = (tabKey: string) => {
+    const newDefaultTab = tabKey === tabPreferences.defaultTab ? DEFAULT_TAB_KEY : tabKey;
+    const newPreferences = { ...tabPreferences, defaultTab: newDefaultTab };
+    updatePreferences(newPreferences)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Default tab updated successfully.",
+        });
+        return;
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Failed to update default tab. Please try again later.",
+        });
+      });
+  };
+
+  /**
+   * Hide a tab (moves to overflow menu with "Show" option)
+   */
+  const handleHideTab = (tabKey: string) => {
+    const newPreferences = {
+      ...tabPreferences,
+      hiddenTabs: [...tabPreferences.hiddenTabs, tabKey],
+    };
+    try {
+      updatePreferences(newPreferences);
+    } catch (error) {
+      console.error("Error hiding tab:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to hide tab. Please try again later.",
+      });
+    }
+  };
+
+  /**
+   * Show a previously hidden tab (returns to visible pool)
+   */
+  const handleShowTab = (tabKey: string) => {
+    const newPreferences = {
+      ...tabPreferences,
+      hiddenTabs: tabPreferences.hiddenTabs.filter((key) => key !== tabKey),
+    };
+    try {
+      updatePreferences(newPreferences);
+    } catch (error) {
+      console.error("Error showing tab:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Something went wrong. Please try again later.",
+      });
+    }
+  };
+
+  return {
+    tabPreferences,
+    isLoading,
+    handleToggleDefaultTab,
+    handleHideTab,
+    handleShowTab,
+  };
+};
diff --git a/apps/web/core/components/onboarding/create-or-join-workspaces.tsx b/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
new file mode 100644
index 0000000..1f29b30
--- /dev/null
+++ b/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { AlertOctagonOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+// hooks
+import { useUser } from "@/hooks/store/user";
+import { useInstance } from "@/hooks/store/use-instance";
+// local imports
+import { CreateWorkspace } from "./create-workspace";
+import { Invitations } from "./invitations";
+import { SwitchAccountDropdown } from "./switch-account-dropdown";
+
+export enum ECreateOrJoinWorkspaceViews {
+  WORKSPACE_CREATE = "WORKSPACE_CREATE",
+  WORKSPACE_JOIN = "WORKSPACE_JOIN",
+}
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  totalSteps: number;
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  finishOnboarding: () => Promise<void>;
+};
+
+export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(props: Props) {
+  const { invitations, stepChange, finishOnboarding } = props;
+  // states
+  const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
+  // store hooks
+  const { data: user } = useUser();
+  const { config } = useInstance();
+  // derived values
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? false;
+
+  useEffect(() => {
+    if (invitations.length > 0) {
+      setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN);
+    } else {
+      setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE);
+    }
+  }, [invitations]);
+
+  const handleNextStep = async () => {
+    if (!user) return;
+
+    await finishOnboarding();
+  };
+
+  return (
+    <div className="flex h-full w-full">
+      <div className="h-full w-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
+        <div className="mt-6 flex w-full flex-col items-center justify-center p-8">
+          {currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN ? (
+            <Invitations
+              invitations={invitations}
+              handleNextStep={handleNextStep}
+              handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE)}
+            />
+          ) : currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE ? (
+            !isWorkspaceCreationDisabled ? (
+              <CreateWorkspace
+                stepChange={stepChange}
+                user={user ?? undefined}
+                invitedWorkspaces={invitations.length}
+                handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN)}
+              />
+            ) : (
+              <div className="flex h-96 w-full items-center justify-center">
+                <div className="mt-4 flex w-full items-start justify-center gap-2.5 rounded-sm border border-accent-strong/20 bg-accent-primary/10 px-6 py-4 text-13 leading-5 text-accent-secondary">
+                  <AlertOctagonOutline className="mt-1 size-5 flex-shrink-0" />
+                  <span>
+                    You don't seem to have any invites to a workspace and your instance admin has restricted
+                    creation of new workspaces. Please ask a workspace owner or admin to invite you to a workspace first
+                    and come back to this screen to join.
+                  </span>
+                </div>
+              </div>
+            )
+          ) : (
+            <div className="flex h-96 w-full items-center justify-center">
+              <LogoSpinner />
+            </div>
+          )}
+        </div>
+      </div>
+      <SwitchAccountDropdown />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
new file mode 100644
index 0000000..b7eae16
--- /dev/null
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -0,0 +1,275 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// constants
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+// types
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
+// ui
+import { CustomSelect, Spinner } from "@plane/ui";
+import { validateWorkspaceName, validateSlug } from "@plane/utils";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserProfile, useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+
+type Props = {
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  user: IUser | undefined;
+  invitedWorkspaces: number;
+  handleCurrentViewChange: () => void;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+
+export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
+  const { stepChange, user, invitedWorkspaces, handleCurrentViewChange } = props;
+  // states
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { updateUserProfile } = useUserProfile();
+  const { fetchCurrentUserSettings } = useUserSettings();
+  const { createWorkspace, fetchWorkspaces } = useWorkspace();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IWorkspace>({
+    defaultValues: {
+      name: "",
+      slug: "",
+      organization_size: "",
+    },
+    mode: "onChange",
+  });
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    if (isSubmitting) return;
+
+    try {
+      const res = await workspaceService.workspaceSlugCheck(formData.slug);
+      if (res?.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+        setSlugError(false);
+        const workspaceResponse = await createWorkspace(formData);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("workspace_creation.toast.success.title"),
+          message: t("workspace_creation.toast.success.message"),
+        });
+        await fetchWorkspaces();
+        await completeStep(workspaceResponse.id);
+      } else setSlugError(true);
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("workspace_creation.toast.error.title"),
+        message: t("workspace_creation.toast.error.message"),
+      });
+    }
+  };
+
+  const completeStep = async (workspaceId: string) => {
+    if (!user) return;
+    const payload: Partial<TOnboardingSteps> = {
+      workspace_create: true,
+      workspace_join: true,
+    };
+
+    await stepChange(payload);
+    await updateUserProfile({
+      last_workspace_id: workspaceId,
+    });
+    await fetchCurrentUserSettings();
+  };
+
+  const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
+
+  return (
+    <div className="space-y-4">
+      {!!invitedWorkspaces && (
+        <>
+          <Button
+            variant="ghost"
+            size="xl"
+            className="flex w-full items-center gap-2 bg-surface-2 text-14"
+            onClick={handleCurrentViewChange}
+          >
+            I want to join invited workspaces{" "}
+            <span className="flex h-4 w-4 items-center justify-center rounded-xs bg-accent-primary/80 text-11 font-medium text-on-color">
+              {invitedWorkspaces}
+            </span>
+          </Button>
+          <div className="mx-auto mt-4 flex items-center sm:w-96">
+            <hr className="w-full border-strong" />
+            <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
+            <hr className="w-full border-strong" />
+          </div>
+        </>
+      )}
+      <div className="mx-auto space-y-1 py-4 text-center">
+        <h3 className="text-24 font-bold text-primary">{t("workspace_creation.heading")}</h3>
+        <p className="font-medium text-placeholder">{t("workspace_creation.subheading")}</p>
+      </div>
+      <form className="mx-auto mt-2 w-full space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
+        <div className="space-y-1">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="name"
+          >
+            {t("workspace_creation.form.name.label")}
+          </label>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: t("common.errors.required"),
+              validate: (value) => validateWorkspaceName(value, true),
+              maxLength: {
+                value: 80,
+                message: t("workspace_creation.errors.validation.name_length"),
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <div className="relative flex items-center rounded-md">
+                <Field name="name" invalid={Boolean(errors.name)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      id="name"
+                      name="name"
+                      type="text"
+                      value={value}
+                      onChange={(event) => {
+                        onChange(event.target.value);
+                        setValue("name", event.target.value);
+                        setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
+                          shouldValidate: true,
+                        });
+                      }}
+                      placeholder={t("workspace_creation.form.name.placeholder")}
+                      ref={ref}
+                      autoFocus
+                    />
+                  </InputGroup>
+                </Field>
+              </div>
+            )}
+          />
+          {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
+        </div>
+        <div className="space-y-1">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="slug"
+          >
+            {t("workspace_creation.form.url.label")}
+          </label>
+          <Controller
+            control={control}
+            name="slug"
+            rules={{
+              required: t("common.errors.required"),
+              maxLength: {
+                value: 48,
+                message: t("workspace_creation.errors.validation.url_length"),
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <Field name="slug" invalid={invalidSlug || Boolean(errors.slug)}>
+                <InputGroup size="2xl">
+                  <span className="text-13 whitespace-nowrap">{window && window.location.host}/</span>
+                  <Input
+                    size="2xl"
+                    id="slug"
+                    name="slug"
+                    type="text"
+                    value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                    onChange={(e) => {
+                      const validation = validateSlug(e.target.value);
+                      if (validation === true) setInvalidSlug(false);
+                      else setInvalidSlug(true);
+                      onChange(e.target.value.toLowerCase());
+                    }}
+                    ref={ref}
+                    placeholder={t("workspace_creation.form.url.placeholder")}
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+          <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
+          {slugError && (
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
+          )}
+          {invalidSlug && (
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+          )}
+          {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
+        </div>
+        <hr className="w-full border-strong" />
+        <div className="space-y-1">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="organization_size"
+          >
+            {t("workspace_creation.form.organization_size.label")}
+          </label>
+          <div className="w-full">
+            <Controller
+              name="organization_size"
+              control={control}
+              rules={{ required: t("common.errors.required") }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={
+                    ORGANIZATION_SIZE.find((c) => c === value) ?? (
+                      <span className="text-placeholder">
+                        {t("workspace_creation.form.organization_size.placeholder")}
+                      </span>
+                    )
+                  }
+                  buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
+                  input
+                >
+                  {ORGANIZATION_SIZE.map((item) => (
+                    <CustomSelect.Option key={item} value={item}>
+                      {item}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+            {errors.organization_size && (
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
+        </Button>
+      </form>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/onboarding/header.tsx b/apps/web/core/components/onboarding/header.tsx
new file mode 100644
index 0000000..4bb35e0
--- /dev/null
+++ b/apps/web/core/components/onboarding/header.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { PlaneLockup } from "@plane/propel/icons";
+import { ChevronLeftOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TOnboardingStep } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useUser } from "@/hooks/store/user";
+// local imports
+import { SwitchAccountDropdown } from "./switch-account-dropdown";
+
+type OnboardingHeaderProps = {
+  currentStep: EOnboardingSteps;
+  updateCurrentStep: (step: EOnboardingSteps) => void;
+  hasInvitations: boolean;
+};
+
+export const OnboardingHeader = observer(function OnboardingHeader(props: OnboardingHeaderProps) {
+  const { currentStep, updateCurrentStep, hasInvitations } = props;
+  // store hooks
+  const { data: user } = useUser();
+  const { config: instanceConfig } = useInstance();
+  const isSelfManaged = instanceConfig?.is_self_managed;
+
+  // handle step back
+  const handleStepBack = () => {
+    switch (currentStep) {
+      case EOnboardingSteps.ROLE_SETUP:
+        updateCurrentStep(EOnboardingSteps.PROFILE_SETUP);
+        break;
+      case EOnboardingSteps.USE_CASE_SETUP:
+        updateCurrentStep(EOnboardingSteps.ROLE_SETUP);
+        break;
+      case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
+        updateCurrentStep(isSelfManaged ? EOnboardingSteps.PROFILE_SETUP : EOnboardingSteps.USE_CASE_SETUP);
+        break;
+    }
+  };
+
+  // can go back
+  const canGoBack = ![EOnboardingSteps.PROFILE_SETUP, EOnboardingSteps.INVITE_MEMBERS].includes(currentStep);
+
+  // step order for progress tracking — include INVITE_MEMBERS if user is currently on it
+  const showInviteStep = !hasInvitations || currentStep === EOnboardingSteps.INVITE_MEMBERS;
+  const stepOrder: TOnboardingStep[] = [
+    EOnboardingSteps.PROFILE_SETUP,
+    ...(isSelfManaged ? [] : [EOnboardingSteps.ROLE_SETUP, EOnboardingSteps.USE_CASE_SETUP]),
+    EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN,
+    ...(showInviteStep ? [EOnboardingSteps.INVITE_MEMBERS] : []),
+  ];
+
+  // derived values
+  const currentStepNumber = stepOrder.indexOf(currentStep) + 1;
+  const totalSteps = stepOrder.length;
+  const userName = user?.display_name
+    ? user?.display_name
+    : user?.first_name
+      ? `${user?.first_name} ${user?.last_name ?? ""}`
+      : user?.email;
+
+  return (
+    <div className="sticky top-0 z-10 flex flex-col gap-4">
+      <div className="h-1.5 w-full cursor-pointer overflow-hidden rounded-t-lg bg-surface-1">
+        <Tooltip label={`${currentStepNumber}/${totalSteps}`} side="bottom" align="end">
+          <div
+            className="h-full bg-accent-primary transition-all duration-700 ease-out"
+            style={{ width: `${(currentStepNumber / totalSteps) * 100}%` }}
+          />
+        </Tooltip>
+      </div>
+      <div className={cn("flex w-full items-center justify-between gap-6 px-6", canGoBack && "pr-6 pl-4")}>
+        <div className="flex items-center gap-2.5">
+          {canGoBack && (
+            <button onClick={handleStepBack} className="cursor-pointer" type="button" disabled={!canGoBack}>
+              <ChevronLeftOutline className="size-6 text-placeholder" />
+            </button>
+          )}
+          <PlaneLockup height={20} width={95} className="text-primary" />
+        </div>
+        <SwitchAccountDropdown fullName={userName} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/onboarding/index.ts b/apps/web/core/components/onboarding/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/onboarding/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/onboarding/invitations.tsx b/apps/web/core/components/onboarding/invitations.tsx
new file mode 100644
index 0000000..0915243
--- /dev/null
+++ b/apps/web/core/components/onboarding/invitations.tsx
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// plane imports
+import { ROLE } from "@plane/constants";
+// types
+import { Button } from "@plane/propel/button";
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+// ui
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { Spinner } from "@plane/ui";
+import { truncateText } from "@plane/utils";
+// constants
+// helpers
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  handleNextStep: () => Promise<void>;
+  handleCurrentViewChange: () => void;
+};
+const workspaceService = new WorkspaceService();
+
+export function Invitations(props: Props) {
+  const { invitations, handleNextStep, handleCurrentViewChange } = props;
+  // states
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+  // store hooks
+  const { fetchWorkspaces } = useWorkspace();
+  const { fetchCurrentUserSettings } = useUserSettings();
+
+  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
+    if (action === "accepted") {
+      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    } else if (action === "withdraw") {
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
+    }
+  };
+
+  const submitInvitations = async () => {
+    const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]);
+    if (invitationsRespond.length <= 0 && !invitation?.role) return;
+    setIsJoiningWorkspaces(true);
+    try {
+      await workspaceService.joinWorkspaces({ invitations: invitationsRespond });
+      await fetchWorkspaces();
+      await fetchCurrentUserSettings();
+      await handleNextStep();
+    } catch (error) {
+      console.error(error);
+      setIsJoiningWorkspaces(false);
+    }
+  };
+
+  return invitations && invitations.length > 0 ? (
+    <div className="space-y-4">
+      <div className="mx-auto space-y-1 py-4 text-center">
+        <h3 className="text-24 font-bold text-primary">You are invited!</h3>
+        <p className="font-medium text-placeholder">Accept the invites to collaborate with your team.</p>
+      </div>
+      <div>
+        {invitations &&
+          invitations.length > 0 &&
+          invitations.map((invitation) => {
+            const isSelected = invitationsRespond.includes(invitation.id);
+            const invitedWorkspace = invitation.workspace;
+            return (
+              <div
+                key={invitation.id}
+                className={`flex cursor-pointer items-center gap-2 rounded-sm border border-subtle p-3.5 hover:bg-surface-2`}
+                onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
+              >
+                <div className="flex-shrink-0">
+                  <WorkspaceLogo
+                    logo={invitedWorkspace?.logo_url}
+                    name={invitedWorkspace?.name}
+                    classNames="size-9 flex-shrink-0"
+                  />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="text-13 font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
+                  <p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
+                </div>
+                <span className="pointer-events-none flex-shrink-0">
+                  <Checkbox checked={isSelected} aria-label={invitedWorkspace?.name ?? "Select workspace invitation"} />
+                </span>
+              </div>
+            );
+          })}
+      </div>
+      <Button
+        variant="primary"
+        size="xl"
+        className="w-full"
+        onClick={submitInvitations}
+        disabled={isJoiningWorkspaces || !invitationsRespond.length}
+      >
+        {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue to workspace"}
+      </Button>
+      <div className="mx-auto mt-4 flex items-center sm:w-96">
+        <hr className="w-full border-strong" />
+        <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder">or</p>
+        <hr className="w-full border-strong" />
+      </div>
+      <Button
+        variant="ghost"
+        size="xl"
+        className="w-full bg-surface-2 text-14"
+        onClick={handleCurrentViewChange}
+        disabled={isJoiningWorkspaces}
+      >
+        Create your own workspace
+      </Button>
+    </div>
+  ) : (
+    <div>No Invitations found</div>
+  );
+}
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
new file mode 100644
index 0000000..e83e560
--- /dev/null
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -0,0 +1,409 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import type {
+  Control,
+  FieldArrayWithId,
+  UseFieldArrayRemove,
+  UseFormGetValues,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+// icons
+import { usePopper } from "react-popper";
+import { AddOutline, ChevronDownOutline, CloseCircleOutline, TickOutline } from "@makeplane/propel/icons";
+import { Listbox } from "@headlessui/react";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import type { EUserPermissions } from "@plane/constants";
+import { ROLE, ROLE_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// types
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, IWorkspace } from "@plane/types";
+// ui
+import { Spinner } from "@plane/ui";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// components
+import { SwitchAccountDropdown } from "./switch-account-dropdown";
+
+type Props = {
+  finishOnboarding: () => Promise<void>;
+  totalSteps: number;
+  user: IUser | undefined;
+  workspace: IWorkspace | undefined;
+};
+
+type EmailRole = {
+  email: string;
+  role: EUserPermissions;
+  role_active: boolean;
+};
+
+type FormValues = {
+  emails: EmailRole[];
+};
+
+type InviteMemberFormProps = {
+  index: number;
+  remove: UseFieldArrayRemove;
+  control: Control<FormValues, any>;
+  setValue: UseFormSetValue<FormValues>;
+  getValues: UseFormGetValues<FormValues>;
+  watch: UseFormWatch<FormValues>;
+  field: FieldArrayWithId<FormValues, "emails", "id">;
+  fields: FieldArrayWithId<FormValues, "emails", "id">[];
+  errors: any;
+  isInvitationDisabled: boolean;
+  setIsInvitationDisabled: (value: boolean) => void;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+const placeholderEmails = [
+  "charlie.taylor@frstflt.com",
+  "octave.chanute@frstflt.com",
+  "george.spratt@frstflt.com",
+  "frank.coffyn@frstflt.com",
+  "amos.root@frstflt.com",
+  "edward.deeds@frstflt.com",
+  "charles.m.manly@frstflt.com",
+  "glenn.curtiss@frstflt.com",
+  "thomas.selfridge@frstflt.com",
+  "albert.zahm@frstflt.com",
+];
+const InviteMemberInput = observer(function InviteMemberInput(props: InviteMemberFormProps) {
+  const {
+    control,
+    index,
+    fields,
+    remove,
+    errors,
+    isInvitationDisabled,
+    setIsInvitationDisabled,
+    setValue,
+    getValues,
+    watch,
+  } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { t } = useTranslation();
+
+  const email = watch(`emails.${index}.email`);
+
+  const emailOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value === "") {
+      const validEmail = fields.map((_, i) => emailRegex.test(getValues(`emails.${i}.email`))).includes(true);
+      if (validEmail) {
+        setIsInvitationDisabled(false);
+      } else {
+        setIsInvitationDisabled(true);
+      }
+
+      if (getValues(`emails.${index}.role_active`)) {
+        setValue(`emails.${index}.role_active`, false);
+      }
+    } else {
+      if (!getValues(`emails.${index}.role_active`)) {
+        setValue(`emails.${index}.role_active`, true);
+      }
+      if (isInvitationDisabled && emailRegex.test(event.target.value)) {
+        setIsInvitationDisabled(false);
+      } else if (!isInvitationDisabled && !emailRegex.test(event.target.value)) {
+        setIsInvitationDisabled(true);
+      }
+    }
+  };
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-end",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  return (
+    <div>
+      <div className="group relative grid grid-cols-10 gap-4">
+        <div className="col-span-6 ml-8">
+          <Controller
+            control={control}
+            name={`emails.${index}.email`}
+            rules={{
+              pattern: {
+                value: emailRegex,
+                message: "Invalid Email ID",
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="input" invalid={Boolean(errors.emails?.[index]?.email)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id={`emails.${index}.email`}
+                    name={`emails.${index}.email`}
+                    type="text"
+                    value={value}
+                    onChange={(event) => {
+                      emailOnChange(event);
+                      onChange(event);
+                    }}
+                    ref={ref}
+                    placeholder={placeholderEmails[index % placeholderEmails.length]}
+                    autoComplete="off"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </div>
+        <div className="col-span-4 mr-8">
+          <Controller
+            control={control}
+            name={`emails.${index}.role`}
+            rules={{ required: true }}
+            render={({ field: { value, onChange } }) => (
+              <Listbox
+                as="div"
+                value={value}
+                onChange={(val) => {
+                  onChange(val);
+                  setValue(`emails.${index}.role_active`, true);
+                }}
+                className="w-full flex-shrink-0 text-left"
+              >
+                <Listbox.Button
+                  type="button"
+                  ref={setReferenceElement}
+                  className="flex w-full items-center justify-between gap-1 rounded-md border-[0.5px] border-strong px-2.5 py-2 text-13"
+                >
+                  <span
+                    className={`text-13 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    } sm:text-13`}
+                  >
+                    {ROLE[value]}
+                  </span>
+
+                  <ChevronDownOutline
+                    className={`size-3 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    }`}
+                  />
+                </Listbox.Button>
+
+                <Listbox.Options as="div">
+                  <div
+                    className="shadow-sm absolute z-10 mt-1 h-fit w-48 space-y-1 rounded-md border border-strong bg-surface-1 p-2 focus:outline-none sm:w-60"
+                    ref={setPopperElement}
+                    style={styles.popper}
+                    {...attributes.popper}
+                  >
+                    {Object.entries(ROLE_DETAILS).map(([key, value]) => (
+                      <Listbox.Option
+                        as="div"
+                        key={key}
+                        value={parseInt(key)}
+                        className={({ active, selected }) =>
+                          `cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
+                            active || selected ? "bg-onboarding-background-400/40" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <div className="flex items-center gap-2 p-1 text-wrap">
+                            <div className="flex flex-col">
+                              <div className="text-13 font-medium">{t(value.i18n_title)}</div>
+                              <div className="flex text-11 text-tertiary">{t(value.i18n_description)}</div>
+                            </div>
+                            {selected && <TickOutline className="h-4 w-4 shrink-0" />}
+                          </div>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                  </div>
+                </Listbox.Options>
+              </Listbox>
+            )}
+          />
+        </div>
+        {fields.length > 1 && (
+          <button
+            type="button"
+            className="absolute right-0 hidden place-items-center self-center rounded-sm group-hover:grid"
+            onClick={() => remove(index)}
+          >
+            <CloseCircleOutline className="h-5 w-5 pl-0.5 text-placeholder" />
+          </button>
+        )}
+      </div>
+      {email && !emailRegex.test(email) && (
+        <div className="mx-8 my-1">
+          <span className="text-13">🤥</span>{" "}
+          <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export function InviteMembers(props: Props) {
+  const { finishOnboarding, workspace } = props;
+
+  const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
+
+  const {
+    control,
+    watch,
+    getValues,
+    setValue,
+    handleSubmit,
+    formState: { isSubmitting, errors, isValid },
+  } = useForm<FormValues>();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "emails",
+  });
+
+  const nextStep = async () => {
+    await finishOnboarding();
+  };
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!workspace) return;
+
+    let payload = { ...formData };
+    payload = { emails: payload.emails.filter((email) => email.email !== "") };
+
+    await workspaceService
+      .inviteWorkspace(workspace.slug, {
+        emails: payload.emails.map((email) => ({
+          email: email.email,
+          role: email.role,
+        })),
+      })
+      .then(async () => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Invitations sent successfully.",
+        });
+        await nextStep();
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.error,
+        });
+      });
+  };
+
+  const appendField = () => {
+    append({ email: "", role: 15, role_active: false });
+  };
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append(
+        [
+          { email: "", role: 15, role_active: false },
+          { email: "", role: 15, role_active: false },
+          { email: "", role: 15, role_active: false },
+        ],
+        {
+          focusIndex: 0,
+        }
+      );
+    }
+  }, [fields, append]);
+
+  return (
+    <div className="flex h-full w-full">
+      <div className="h-full w-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
+        <div className="mx-auto mt-6 flex w-full flex-col items-center justify-center p-8 md:w-4/5">
+          <div className="mx-auto w-4/5 space-y-1 py-4 text-center">
+            <h3 className="text-24 font-bold text-primary">Invite your teammates</h3>
+            <p className="font-medium text-placeholder">
+              Work in plane happens best with your team. Invite them now to use Plane to its potential.
+            </p>
+          </div>
+          <form
+            className="mx-auto mt-2 w-full space-y-4"
+            onSubmit={handleSubmit(onSubmit)}
+            onKeyDown={(e) => {
+              if (e.code === "Enter") e.preventDefault();
+            }}
+          >
+            <div className="w-full py-4 text-13">
+              <div className="group relative mx-8 grid grid-cols-10 gap-4 py-2">
+                <div className="col-span-6 px-1 text-13 font-medium text-secondary">Email</div>
+                <div className="col-span-4 px-1 text-13 font-medium text-secondary">Role</div>
+              </div>
+              <div className="mb-3 space-y-3 sm:space-y-4">
+                {fields.map((field, index) => (
+                  <InviteMemberInput
+                    watch={watch}
+                    getValues={getValues}
+                    setValue={setValue}
+                    isInvitationDisabled={isInvitationDisabled}
+                    setIsInvitationDisabled={(value: boolean) => setIsInvitationDisabled(value)}
+                    control={control}
+                    errors={errors}
+                    field={field}
+                    fields={fields}
+                    index={index}
+                    remove={remove}
+                    key={field.id}
+                  />
+                ))}
+              </div>
+              <button
+                type="button"
+                className="mx-8 flex items-center gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
+                onClick={appendField}
+              >
+                <AddOutline className="h-4 w-4" />
+                Add another
+              </button>
+            </div>
+            <div className="mx-auto flex w-full max-w-96 flex-col items-center justify-center gap-4 px-8 sm:px-2">
+              <Button
+                variant="primary"
+                type="submit"
+                size="xl"
+                className="w-full"
+                disabled={isInvitationDisabled || !isValid || isSubmitting}
+              >
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+              </Button>
+              <Button variant="ghost" size="xl" className="w-full" onClick={nextStep}>
+                I’ll do it later
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+      <SwitchAccountDropdown />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
new file mode 100644
index 0000000..d789d19
--- /dev/null
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -0,0 +1,562 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+// types
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
+// ui
+import { PasswordStrengthIndicator, Spinner } from "@plane/ui";
+// components
+import { cn, getFileURL, getPasswordStrength, validatePersonName } from "@plane/utils";
+import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
+// hooks
+import { useUser, useUserProfile } from "@/hooks/store/user";
+// services
+import { AuthService } from "@/services/auth.service";
+
+type TProfileSetupFormValues = {
+  first_name: string;
+  last_name: string;
+  avatar_url?: string | null;
+  password?: string;
+  confirm_password?: string;
+  role?: string;
+  use_case?: string[];
+};
+
+const defaultValues: Partial<TProfileSetupFormValues> = {
+  first_name: "",
+  last_name: "",
+  avatar_url: "",
+  password: undefined,
+  confirm_password: undefined,
+  role: undefined,
+  use_case: [],
+};
+
+type Props = {
+  user?: IUser;
+  totalSteps: number;
+  stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
+  finishOnboarding: () => Promise<void>;
+};
+
+enum EProfileSetupSteps {
+  ALL = "ALL",
+  USER_DETAILS = "USER_DETAILS",
+  USER_PERSONALIZATION = "USER_PERSONALIZATION",
+}
+
+const USER_ROLE = ["Individual contributor", "Senior Leader", "Manager", "Executive", "Freelancer", "Student"];
+
+const USER_DOMAIN = [
+  "Engineering",
+  "Product",
+  "Marketing",
+  "Sales",
+  "Operations",
+  "Legal",
+  "Finance",
+  "Human Resources",
+  "Project",
+  "Other",
+];
+
+const authService = new AuthService();
+
+export const ProfileSetup = observer(function ProfileSetup(props: Props) {
+  const { user, totalSteps, stepChange, finishOnboarding } = props;
+  // states
+  const [profileSetupStep, setProfileSetupStep] = useState<EProfileSetupSteps>(
+    user?.is_password_autoset ? EProfileSetupSteps.USER_DETAILS : EProfileSetupSteps.ALL
+  );
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState({
+    password: false,
+    retypePassword: false,
+  });
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { updateCurrentUser } = useUser();
+  const { updateUserProfile } = useUserProfile();
+  // form info
+  const {
+    getValues,
+    handleSubmit,
+    control,
+    watch,
+    setValue,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TProfileSetupFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      first_name: user?.first_name,
+      last_name: user?.last_name,
+      avatar_url: user?.avatar_url,
+    },
+    mode: "onChange",
+  });
+  // derived values
+  const userAvatar = watch("avatar_url");
+
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  const handleSetPassword = async (password: string) => {
+    const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
+    await authService.setPassword(token, { password });
+  };
+
+  const handleSubmitProfileSetup = async (formData: TProfileSetupFormValues) => {
+    const userDetailsPayload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar_url: formData.avatar_url ?? undefined,
+    };
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      use_case: formData.use_case && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
+      role: formData.role,
+    };
+    try {
+      await Promise.all([
+        updateCurrentUser(userDetailsPayload),
+        updateUserProfile(profileUpdatePayload),
+        totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success",
+        message: "Profile setup completed!",
+      });
+      // For Invited Users, they will skip all other steps and finish onboarding.
+      if (totalSteps <= 2) {
+        finishOnboarding();
+      }
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const handleSubmitUserDetail = async (formData: TProfileSetupFormValues) => {
+    const userDetailsPayload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar_url: formData.avatar_url ?? undefined,
+    };
+    try {
+      await Promise.all([
+        updateCurrentUser(userDetailsPayload),
+        formData.password && handleSetPassword(formData.password),
+      ]).then(() => {
+        if (formData.password) {
+        } else {
+          setProfileSetupStep(EProfileSetupSteps.USER_PERSONALIZATION);
+        }
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "User details update failed. Please try again!",
+      });
+    }
+  };
+
+  const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      use_case: formData.use_case && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
+      role: formData.role,
+    };
+    try {
+      await Promise.all([
+        updateUserProfile(profileUpdatePayload),
+        totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success",
+        message: "Profile setup completed!",
+      });
+      // For Invited Users, they will skip all other steps and finish onboarding.
+      if (totalSteps <= 2) {
+        finishOnboarding();
+      }
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!user) return;
+    if (profileSetupStep === EProfileSetupSteps.ALL) await handleSubmitProfileSetup(formData);
+    if (profileSetupStep === EProfileSetupSteps.USER_DETAILS) await handleSubmitUserDetail(formData);
+    if (profileSetupStep === EProfileSetupSteps.USER_PERSONALIZATION) await handleSubmitUserPersonalization(formData);
+  };
+
+  const handleDelete = (url: string | null | undefined) => {
+    if (!url) return;
+    setValue("avatar_url", "");
+  };
+
+  // derived values
+  const isPasswordAlreadySetup = !user?.is_password_autoset;
+  const currentPassword = watch("password") || undefined;
+  const currentConfirmPassword = watch("confirm_password") || undefined;
+
+  const isValidPassword = useMemo(() => {
+    if (currentPassword) {
+      if (
+        currentPassword === currentConfirmPassword &&
+        getPasswordStrength(currentPassword) === E_PASSWORD_STRENGTH.STRENGTH_VALID
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return true;
+    }
+  }, [currentPassword, currentConfirmPassword]);
+
+  // Check for all available fields validation and if password field is available, then checks for password validation (strength + confirmation).
+  // Also handles the condition for optional password i.e if password field is optional it only checks for above validation if it's not empty.
+  const isButtonDisabled =
+    !isSubmitting && isValid ? (isPasswordAlreadySetup ? false : isValidPassword ? false : true) : true;
+
+  return (
+    <div className="flex h-full w-full">
+      <div className="mt-6 flex w-full flex-col items-center justify-center p-8">
+        <form onSubmit={handleSubmit(onSubmit)} className="mx-auto mt-2 w-full space-y-4 sm:w-96">
+          {profileSetupStep !== EProfileSetupSteps.USER_PERSONALIZATION && (
+            <>
+              <Controller
+                control={control}
+                name="avatar_url"
+                render={({ field: { onChange, value } }) => (
+                  <UserImageUploadModal
+                    isOpen={isImageUploadModalOpen}
+                    onClose={() => setIsImageUploadModalOpen(false)}
+                    handleRemove={async () => handleDelete(getValues("avatar_url"))}
+                    onSuccess={(url) => {
+                      onChange(url);
+                      setIsImageUploadModalOpen(false);
+                    }}
+                    value={value && value.trim() !== "" ? value : null}
+                  />
+                )}
+              />
+              <div className="flex items-center justify-center space-y-1">
+                <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                  {!userAvatar || userAvatar === "" ? (
+                    <div className="flex flex-col items-center justify-between">
+                      <div className="relative h-14 w-14 overflow-hidden">
+                        <div className="absolute top-0 left-0 flex h-full w-full items-center justify-center rounded-full bg-accent-primary text-24 font-medium text-on-color uppercase">
+                          {watch("first_name")[0] ?? "R"}
+                        </div>
+                      </div>
+                      <div className="pt-1 text-13 font-medium text-accent-secondary hover:text-tertiary">
+                        Choose image
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="relative mr-3 h-16 w-16 overflow-hidden">
+                      <img
+                        src={getFileURL(userAvatar ?? "")}
+                        className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
+                        onClick={() => setIsImageUploadModalOpen(true)}
+                        alt={user?.display_name}
+                      />
+                    </div>
+                  )}
+                </button>
+              </div>
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div className="space-y-1">
+                  <label
+                    className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+                    htmlFor="first_name"
+                  >
+                    First name
+                  </label>
+                  <Controller
+                    control={control}
+                    name="first_name"
+                    rules={{
+                      required: "First name is required",
+                      validate: validatePersonName,
+                      maxLength: {
+                        value: 50,
+                        message: "First name must be within 50 characters.",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Field name="first_name" invalid={Boolean(errors.first_name)}>
+                        <InputGroup size="2xl">
+                          <Input
+                            size="2xl"
+                            id="first_name"
+                            name="first_name"
+                            type="text"
+                            value={value}
+                            autoFocus
+                            onChange={onChange}
+                            ref={ref}
+                            placeholder="Wilbur"
+                            autoComplete="on"
+                          />
+                        </InputGroup>
+                      </Field>
+                    )}
+                  />
+                  {errors.first_name && (
+                    <span className="text-13 text-danger-primary">{errors.first_name.message}</span>
+                  )}
+                </div>
+                <div className="space-y-1">
+                  <label
+                    className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+                    htmlFor="last_name"
+                  >
+                    Last name
+                  </label>
+                  <Controller
+                    control={control}
+                    name="last_name"
+                    rules={{
+                      required: "Last name is required",
+                      validate: validatePersonName,
+                      maxLength: {
+                        value: 50,
+                        message: "Last name must be within 50 characters.",
+                      },
+                    }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Field name="last_name" invalid={Boolean(errors.last_name)}>
+                        <InputGroup size="2xl">
+                          <Input
+                            size="2xl"
+                            id="last_name"
+                            name="last_name"
+                            type="text"
+                            value={value}
+                            onChange={onChange}
+                            ref={ref}
+                            placeholder="Wright"
+                            autoComplete="on"
+                          />
+                        </InputGroup>
+                      </Field>
+                    )}
+                  />
+                  {errors.last_name && <span className="text-13 text-danger-primary">{errors.last_name.message}</span>}
+                </div>
+              </div>
+
+              {/* setting up password for the first time */}
+              {!isPasswordAlreadySetup && (
+                <>
+                  <div className="space-y-1">
+                    <label className="text-13 font-medium text-tertiary" htmlFor="password">
+                      Set a password ({t("common.optional")})
+                    </label>
+                    <Controller
+                      control={control}
+                      name="password"
+                      rules={{
+                        required: false,
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Field name="password" invalid={Boolean(errors.password)}>
+                          <InputGroup size="2xl">
+                            <Input
+                              size="2xl"
+                              type={showPassword.password ? "text" : "password"}
+                              name="password"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              placeholder="New password..."
+                              onFocus={() => setIsPasswordInputFocused(true)}
+                              onBlur={() => setIsPasswordInputFocused(false)}
+                              autoComplete="new-password"
+                              aria-label="New password..."
+                            />
+                            <button
+                              type="button"
+                              className="grid size-5 place-items-center"
+                              onClick={() => handleShowPassword("password")}
+                            >
+                              {showPassword.password ? (
+                                <HideOutline className="size-4 text-placeholder" />
+                              ) : (
+                                <ShowOutline className="size-4 text-placeholder" />
+                              )}
+                            </button>
+                          </InputGroup>
+                        </Field>
+                      )}
+                    />
+                    <PasswordStrengthIndicator password={watch("password") ?? ""} isFocused={isPasswordInputFocused} />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-13 font-medium text-tertiary" htmlFor="confirm_password">
+                      {t("auth.common.password.confirm_password.label")} ({t("common.optional")})
+                    </label>
+                    <Controller
+                      control={control}
+                      name="confirm_password"
+                      rules={{
+                        required: watch("password") ? true : false,
+                        validate: (value) =>
+                          watch("password") ? (value === watch("password") ? true : "Passwords don't match") : true,
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Field name="confirm_password" invalid={Boolean(errors.confirm_password)}>
+                          <InputGroup size="2xl">
+                            <Input
+                              size="2xl"
+                              type={showPassword.retypePassword ? "text" : "password"}
+                              name="confirm_password"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              placeholder={t("auth.common.password.confirm_password.placeholder")}
+                              autoComplete="new-password"
+                              aria-label={t("auth.common.password.confirm_password.placeholder")}
+                            />
+                            <button
+                              type="button"
+                              className="grid size-5 place-items-center"
+                              onClick={() => handleShowPassword("retypePassword")}
+                            >
+                              {showPassword.retypePassword ? (
+                                <HideOutline className="size-4 text-placeholder" />
+                              ) : (
+                                <ShowOutline className="size-4 text-placeholder" />
+                              )}
+                            </button>
+                          </InputGroup>
+                        </Field>
+                      )}
+                    />
+                    {errors.confirm_password && (
+                      <span className="text-13 text-danger-primary">{errors.confirm_password.message}</span>
+                    )}
+                  </div>
+                </>
+              )}
+            </>
+          )}
+
+          {/* user role once the password is set */}
+          {profileSetupStep !== EProfileSetupSteps.USER_DETAILS && (
+            <>
+              <div className="space-y-1">
+                <label
+                  className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+                  htmlFor="role"
+                >
+                  What role are you working on? Choose one.
+                </label>
+                <Controller
+                  control={control}
+                  name="role"
+                  rules={{
+                    required: "This field is required",
+                  }}
+                  render={({ field: { value, onChange } }) => (
+                    <div className="flex flex-wrap gap-2 overflow-auto py-2 break-all">
+                      {USER_ROLE.map((userRole) => (
+                        <div
+                          key={userRole}
+                          className={cn(
+                            "shrink-0 rounded border-[0.5px] px-3 py-1.5 text-13 font-medium hover:cursor-pointer hover:bg-surface-2",
+                            {
+                              "border-accent-strong": value === userRole,
+                              "border-strong": value !== userRole,
+                            }
+                          )}
+                          onClick={() => onChange(userRole)}
+                        >
+                          {userRole}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                />
+                {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
+              </div>
+              <div className="space-y-1">
+                <label
+                  className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+                  htmlFor="use_case"
+                >
+                  What is your domain expertise? Choose one or more.
+                </label>
+                <Controller
+                  control={control}
+                  name="use_case"
+                  rules={{
+                    required: "Please select at least one option",
+                    validate: (value) => (value && value.length > 0) || "Please select at least one option",
+                  }}
+                  render={({ field: { value, onChange } }) => (
+                    <div className="flex flex-wrap gap-2 overflow-auto py-2 break-all">
+                      {USER_DOMAIN.map((userDomain) => {
+                        const isSelected = value?.includes(userDomain) || false;
+                        return (
+                          <div
+                            key={userDomain}
+                            className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-surface-2 ${
+                              isSelected ? "border-accent-strong" : "border-strong"
+                            } rounded px-3 py-1.5 text-13 font-medium`}
+                            onClick={() => {
+                              const currentValue = value || [];
+                              if (isSelected) {
+                                onChange(currentValue.filter((item) => item !== userDomain));
+                              } else {
+                                onChange([...currentValue, userDomain]);
+                              }
+                            }}
+                          >
+                            {userDomain}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                />
+                {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
+              </div>
+            </>
+          )}
+          <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
+            {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/onboarding/root.tsx b/apps/web/core/components/onboarding/root.tsx
new file mode 100644
index 0000000..395e19b
--- /dev/null
+++ b/apps/web/core/components/onboarding/root.tsx
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspaceMemberInvitation, TOnboardingStep, TOnboardingSteps, TUserProfile } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserProfile } from "@/hooks/store/user";
+// local components
+import { OnboardingHeader } from "./header";
+import { OnboardingStepRoot } from "./steps";
+
+type Props = {
+  invitations?: IWorkspaceMemberInvitation[];
+};
+
+export const OnboardingRoot = observer(function OnboardingRoot({ invitations = [] }: Props) {
+  const [currentStep, setCurrentStep] = useState<TOnboardingStep>(EOnboardingSteps.PROFILE_SETUP);
+  // store hooks
+  const { data: user } = useUser();
+  const { data: userProfile, updateUserProfile, finishUserOnboarding } = useUserProfile();
+  const { workspaces } = useWorkspace();
+  const { config: instanceConfig } = useInstance();
+
+  const workspacesList = Object.values(workspaces ?? {});
+  const isSelfManaged = instanceConfig?.is_self_managed;
+
+  // Calculate total steps based on whether invitations are available
+  const hasInvitations = invitations.length > 0;
+
+  // complete onboarding
+  const finishOnboarding = useCallback(async () => {
+    if (!user) return;
+    try {
+      await finishUserOnboarding();
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Failed",
+        message: "Failed to finish onboarding, Please try again later.",
+      });
+    }
+  }, [user, finishUserOnboarding]);
+
+  // handle step change
+  const stepChange = useCallback(
+    async (steps: Partial<TOnboardingSteps>) => {
+      if (!user) return;
+
+      const payload: Partial<TUserProfile> = {
+        onboarding_step: {
+          ...userProfile.onboarding_step,
+          ...steps,
+        },
+      };
+
+      await updateUserProfile(payload);
+    },
+    [user, userProfile, updateUserProfile]
+  );
+
+  const handleStepChange = useCallback(
+    (step: EOnboardingSteps, skipInvites?: boolean) => {
+      switch (step) {
+        case EOnboardingSteps.PROFILE_SETUP:
+          if (isSelfManaged) {
+            // Skip role & use case steps for self-hosted
+            stepChange({ profile_complete: true });
+            if (workspacesList.length > 0) finishOnboarding();
+            else setCurrentStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
+          } else {
+            setCurrentStep(EOnboardingSteps.ROLE_SETUP);
+          }
+          break;
+        case EOnboardingSteps.ROLE_SETUP:
+          setCurrentStep(EOnboardingSteps.USE_CASE_SETUP);
+          break;
+        case EOnboardingSteps.USE_CASE_SETUP:
+          stepChange({ profile_complete: true });
+          if (workspacesList.length > 0) finishOnboarding();
+          else setCurrentStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
+          break;
+        case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
+          if (skipInvites) finishOnboarding();
+          else {
+            setCurrentStep(EOnboardingSteps.INVITE_MEMBERS);
+            stepChange({ workspace_create: true });
+          }
+          break;
+        case EOnboardingSteps.INVITE_MEMBERS:
+          stepChange({ workspace_invite: true });
+          finishOnboarding();
+          break;
+      }
+    },
+    [stepChange, finishOnboarding, workspacesList, isSelfManaged]
+  );
+
+  const updateCurrentStep = (step: EOnboardingSteps) => setCurrentStep(step);
+
+  useEffect(() => {
+    const handleInitialStep = () => {
+      if (
+        userProfile?.onboarding_step?.profile_complete &&
+        !userProfile?.onboarding_step?.workspace_create &&
+        !userProfile?.onboarding_step?.workspace_join
+      ) {
+        setCurrentStep(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN);
+      }
+      if (
+        userProfile?.onboarding_step?.profile_complete &&
+        userProfile?.onboarding_step?.workspace_create &&
+        !userProfile?.onboarding_step?.workspace_invite
+      ) {
+        setCurrentStep(EOnboardingSteps.INVITE_MEMBERS);
+      }
+    };
+
+    handleInitialStep();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header with progress */}
+      <OnboardingHeader
+        currentStep={currentStep}
+        updateCurrentStep={updateCurrentStep}
+        hasInvitations={hasInvitations}
+      />
+
+      {/* Main content area */}
+      <OnboardingStepRoot currentStep={currentStep} invitations={invitations} handleStepChange={handleStepChange} />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/onboarding/step-indicator.tsx b/apps/web/core/components/onboarding/step-indicator.tsx
new file mode 100644
index 0000000..8aa8dca
--- /dev/null
+++ b/apps/web/core/components/onboarding/step-indicator.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+interface OnboardingStepIndicatorProps {
+  currentStep: number;
+  totalSteps: number;
+}
+
+export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingStepIndicatorProps) {
+  const renderIndicators = () => {
+    const indicators = [];
+
+    for (let i = 0; i < totalSteps; i++) {
+      const isCompleted = i < currentStep;
+      const isActive = i === currentStep - 1;
+      const isFirstStep = i === 0;
+      const isLastStep = i === totalSteps - 1;
+
+      indicators.push(
+        <div
+          key={`line-${i}`}
+          className={cn("-ml-0.5 h-1.5 w-full", {
+            "bg-success-primary": isCompleted,
+            "bg-surface-1": !isCompleted,
+            "rounded-l-full": isFirstStep,
+            "rounded-r-full": isLastStep || isActive,
+            "z-10": isActive,
+          })}
+        />
+      );
+    }
+
+    return indicators;
+  };
+
+  return (
+    <div className="flex flex-col justify-center">
+      <div className="text-13 font-medium text-tertiary">
+        {currentStep} of {totalSteps} steps
+      </div>
+      <div className="mx-1 my-0.5 flex w-40 items-center justify-center lg:w-52">{renderIndicators()}</div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/onboarding/steps/common/header.tsx b/apps/web/core/components/onboarding/steps/common/header.tsx
new file mode 100644
index 0000000..69be93c
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/common/header.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+type Props = {
+  title: string;
+  description: string;
+};
+
+export function CommonOnboardingHeader({ title, description }: Props) {
+  return (
+    <div className="space-y-2 text-left">
+      <h1 className="text-h4-semibold text-primary">{title}</h1>
+      <p className="text-body-md-regular text-tertiary">{description}</p>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/onboarding/steps/common/index.ts b/apps/web/core/components/onboarding/steps/common/index.ts
new file mode 100644
index 0000000..f595712
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/common/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./header";
diff --git a/apps/web/core/components/onboarding/steps/index.ts b/apps/web/core/components/onboarding/steps/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/profile/consent.tsx b/apps/web/core/components/onboarding/steps/profile/consent.tsx
new file mode 100644
index 0000000..d6483c7
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/profile/consent.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { TickOutline } from "@makeplane/propel/icons";
+
+type Props = {
+  isChecked: boolean;
+  handleChange: (checked: boolean) => void;
+};
+
+export function MarketingConsent({ isChecked, handleChange }: Props) {
+  return (
+    <div className="flex items-center justify-center gap-1.5">
+      <button
+        type="button"
+        onClick={() => handleChange(!isChecked)}
+        className={`flex size-4 items-center justify-center rounded-sm border-2 ${
+          isChecked ? "border-accent-strong bg-accent-primary" : "border-strong"
+        }`}
+      >
+        {isChecked && <TickOutline className="h-3 w-3 text-on-color" />}
+      </button>
+      <span className="text-13 text-tertiary">I agree to Plane marketing communications</span>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/onboarding/steps/profile/index.ts b/apps/web/core/components/onboarding/steps/profile/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/profile/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
new file mode 100644
index 0000000..1b165d4
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -0,0 +1,265 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { ImageOutline } from "@makeplane/propel/icons";
+// plane imports
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+import { cn, getFileURL, getPasswordStrength, validatePersonName } from "@plane/utils";
+// components
+import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useUser, useUserProfile } from "@/hooks/store/user";
+// services
+import { AuthService } from "@/services/auth.service";
+// local components
+import { CommonOnboardingHeader } from "../common";
+import { MarketingConsent } from "./consent";
+import { SetPasswordRoot } from "./set-password";
+
+type Props = {
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+export type TProfileSetupFormValues = {
+  first_name: string;
+  last_name: string;
+  avatar_url?: string | null;
+  password?: string;
+  confirm_password?: string;
+  role?: string;
+  use_case?: string[];
+  has_marketing_email_consent?: boolean;
+};
+
+const authService = new AuthService();
+
+const defaultValues: Partial<TProfileSetupFormValues> = {
+  first_name: "",
+  last_name: "",
+  avatar_url: "",
+  password: undefined,
+  confirm_password: undefined,
+  has_marketing_email_consent: true,
+};
+
+export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepChange }: Props) {
+  // states
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  // store hooks
+  const { data: user, updateCurrentUser } = useUser();
+  const { updateUserProfile } = useUserProfile();
+  const { config: instanceConfig } = useInstance();
+  // form info
+  const {
+    getValues,
+    handleSubmit,
+    control,
+    watch,
+    setValue,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TProfileSetupFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      first_name: user?.first_name,
+      last_name: user?.last_name,
+      avatar_url: user?.avatar_url,
+    },
+    mode: "onChange",
+  });
+  // derived values
+  const userAvatar = watch("avatar_url");
+
+  const handleSetPassword = async (password: string) => {
+    const token = await authService.requestCSRFToken().then((data) => data?.csrf_token);
+    await authService.setPassword(token, { password });
+  };
+
+  const handleSubmitUserDetail = async (formData: TProfileSetupFormValues) => {
+    const userDetailsPayload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar_url: formData.avatar_url ?? undefined,
+    };
+    try {
+      await Promise.all([
+        updateCurrentUser(userDetailsPayload),
+        formData.password && handleSetPassword(formData.password),
+      ]);
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "User details update failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!user) return;
+    updateUserProfile({
+      has_marketing_email_consent: formData.has_marketing_email_consent,
+    });
+    await handleSubmitUserDetail(formData);
+    handleStepChange(EOnboardingSteps.PROFILE_SETUP);
+  };
+
+  const handleDelete = (url: string | null | undefined) => {
+    if (!url) return;
+    setValue("avatar_url", "");
+  };
+
+  // derived values
+  const isPasswordAlreadySetup = !user?.is_password_autoset;
+  const currentPassword = watch("password") || undefined;
+  const currentConfirmPassword = watch("confirm_password") || undefined;
+
+  const isValidPassword = useMemo(() => {
+    if (currentPassword) {
+      if (
+        currentPassword === currentConfirmPassword &&
+        getPasswordStrength(currentPassword) === E_PASSWORD_STRENGTH.STRENGTH_VALID
+      ) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return true;
+    }
+  }, [currentPassword, currentConfirmPassword]);
+
+  // Check for all available fields validation and if password field is available, then checks for password validation (strength + confirmation).
+  // Also handles the condition for optional password i.e if password field is optional it only checks for above validation if it's not empty.
+  const isButtonDisabled =
+    !isSubmitting && isValid ? (isPasswordAlreadySetup ? false : isValidPassword ? false : true) : true;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
+      {/* Header */}
+      <CommonOnboardingHeader title="Create your profile." description="This is how you will appear in Plane." />
+
+      {/* Profile Picture Section */}
+      <Controller
+        control={control}
+        name="avatar_url"
+        render={({ field: { onChange, value } }) => (
+          <UserImageUploadModal
+            isOpen={isImageUploadModalOpen}
+            onClose={() => setIsImageUploadModalOpen(false)}
+            handleRemove={async () => handleDelete(getValues("avatar_url"))}
+            onSuccess={(url) => {
+              onChange(url);
+              setIsImageUploadModalOpen(false);
+            }}
+            value={value && value.trim() !== "" ? value : null}
+          />
+        )}
+      />
+      <div className="flex items-center gap-4">
+        <button
+          className="flex size-12 items-center justify-center rounded-full bg-accent-primary text-18 font-semibold text-on-color"
+          type="button"
+          onClick={() => setIsImageUploadModalOpen(true)}
+        >
+          {userAvatar ? (
+            <img
+              src={getFileURL(userAvatar ?? "")}
+              onClick={() => setIsImageUploadModalOpen(true)}
+              alt={user?.display_name}
+              className="h-full w-full rounded-full object-cover"
+            />
+          ) : (
+            <>{watch("first_name")[0] ?? "R"}</>
+          )}
+        </button>
+        <input type="file" className="hidden" id="profile-image-input" />
+        <button
+          className="flex items-center gap-1.5 px-2 py-1 text-13 text-tertiary hover:text-secondary"
+          type="button"
+          onClick={() => setIsImageUploadModalOpen(true)}
+        >
+          <ImageOutline className="size-4" />
+          <span className="text-13">{userAvatar ? "Change image" : "Upload image"}</span>
+        </button>
+      </div>
+
+      <div className="flex w-full flex-col gap-6">
+        {/* Name Input */}
+        <div className="flex flex-col gap-2">
+          <label
+            className="block text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="first_name"
+          >
+            Name
+          </label>
+          <Controller
+            control={control}
+            name="first_name"
+            rules={{
+              required: "Name is required",
+              validate: validatePersonName,
+              maxLength: {
+                value: 50,
+                message: "Name must be within 50 characters.",
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <input
+                ref={ref}
+                id="first_name"
+                name="first_name"
+                type="text"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                autoFocus
+                className={cn(
+                  "w-full rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
+                  {
+                    "border-strong": !errors.first_name,
+                    "border-danger-strong": errors.first_name,
+                  }
+                )}
+                placeholder="Enter your full name"
+                autoComplete="on"
+              />
+            )}
+          />
+          {errors.first_name && <span className="text-13 text-danger-primary">{errors.first_name.message}</span>}
+        </div>
+
+        {/* setting up password for the first time */}
+        {!isPasswordAlreadySetup && (
+          <SetPasswordRoot
+            onPasswordChange={(password) => setValue("password", password)}
+            onConfirmPasswordChange={(confirm_password) => setValue("confirm_password", confirm_password)}
+          />
+        )}
+      </div>
+      {/* Continue Button */}
+      <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
+        Continue
+      </Button>
+
+      {/* Marketing Consent */}
+      {!instanceConfig?.is_self_managed && (
+        <MarketingConsent
+          isChecked={!!watch("has_marketing_email_consent")}
+          handleChange={(has_marketing_email_consent) =>
+            setValue("has_marketing_email_consent", has_marketing_email_consent)
+          }
+        />
+      )}
+    </form>
+  );
+});
diff --git a/apps/web/core/components/onboarding/steps/profile/set-password.tsx b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
new file mode 100644
index 0000000..3851f59
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState, useCallback, useMemo } from "react";
+import { ChevronDownOutline, LockOutline } from "@makeplane/propel/icons";
+import { PasswordInput, PasswordStrengthIndicator } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+interface PasswordState {
+  password: string;
+  confirmPassword: string;
+}
+
+interface SetPasswordRootProps {
+  onPasswordChange?: (password: string) => void;
+  onConfirmPasswordChange?: (confirmPassword: string) => void;
+  disabled?: boolean;
+}
+
+export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, disabled = false }: SetPasswordRootProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [passwordState, setPasswordState] = useState<PasswordState>({
+    password: "",
+    confirmPassword: "",
+  });
+
+  const handleToggleExpand = useCallback(() => {
+    if (disabled) return;
+    setIsExpanded((prev) => !prev);
+  }, [disabled]);
+
+  const handlePasswordChange = useCallback(
+    (field: keyof PasswordState, value: string) => {
+      setPasswordState((prev) => {
+        const newState = { ...prev, [field]: value };
+
+        // Notify parent component when password changes
+        if (field === "password" && onPasswordChange) {
+          onPasswordChange(value);
+        }
+        if (field === "confirmPassword" && onConfirmPasswordChange) {
+          onConfirmPasswordChange(value);
+        }
+
+        return newState;
+      });
+    },
+    [onPasswordChange, onConfirmPasswordChange]
+  );
+
+  const isPasswordValid = useMemo(() => {
+    const { password, confirmPassword } = passwordState;
+    return password.length >= 8 && password === confirmPassword;
+  }, [passwordState]);
+
+  const hasPasswordMismatch = useMemo(() => {
+    const { password, confirmPassword } = passwordState;
+    return confirmPassword.length > 0 && password !== confirmPassword;
+  }, [passwordState]);
+
+  const chevronIconClasses = useMemo(
+    () =>
+      `w-4 h-4 text-placeholder transition-transform duration-300 ease-in-out ${isExpanded ? "rotate-180" : "rotate-0"}`,
+    [isExpanded]
+  );
+
+  const expandedContentClasses = useMemo(
+    () =>
+      `flex flex-col gap-4 transition-all duration-300 ease-in-out overflow-hidden px-3 ${
+        isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+      }`,
+    [isExpanded]
+  );
+
+  return (
+    <div className={`flex flex-col overflow-hidden rounded-lg bg-surface-2 transition-all duration-300 ease-in-out`}>
+      <div
+        className={cn(
+          "flex items-center justify-between px-3 py-2 text-13 transition-colors duration-200",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          isExpanded && "pb-1"
+        )}
+        onClick={handleToggleExpand}
+      >
+        <div className="flex items-center gap-1 text-tertiary">
+          <LockOutline className="size-3" />
+          <span className="font-medium">Set a password</span>
+          <span>{`(Optional)`}</span>
+        </div>
+        <div className="flex items-center gap-2 text-placeholder">
+          <ChevronDownOutline className={chevronIconClasses} />
+        </div>
+      </div>
+
+      <div className={expandedContentClasses}>
+        {/* Password input */}
+        <div className="flex transform flex-col gap-2 pt-1 transition-all duration-300 ease-in-out">
+          <PasswordInput
+            id="password"
+            value={passwordState.password}
+            onChange={(value) => handlePasswordChange("password", value)}
+            placeholder="Set a password"
+            className="transition-all duration-200"
+          />
+          {passwordState.password.length > 0 && <PasswordStrengthIndicator password={passwordState.password} />}
+        </div>
+
+        <div className="flex flex-col gap-2 pb-2">
+          {/* Confirm password label */}
+          <div className="transform text-13 font-medium text-tertiary transition-all delay-75 duration-300 ease-in-out">
+            Confirm password
+          </div>
+
+          {/* Confirm password input */}
+          <div className="transform transition-all delay-100 duration-300 ease-in-out">
+            <PasswordInput
+              id="confirm-password"
+              value={passwordState.confirmPassword}
+              onChange={(value) => handlePasswordChange("confirmPassword", value)}
+              placeholder="Confirm password"
+              className="transition-all duration-200"
+            />
+            {hasPasswordMismatch && <p className="mt-1 text-11 text-danger-primary">Passwords do not match</p>}
+            {isPasswordValid && <p className="mt-1 text-11 text-success-primary">✓ Passwords match</p>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/onboarding/steps/role/index.ts b/apps/web/core/components/onboarding/steps/role/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/role/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
new file mode 100644
index 0000000..cf542f1
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -0,0 +1,164 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { PenTool } from "lucide-react";
+import {
+  CubeOutline,
+  MonitorOutline,
+  RefreshOutline,
+  RocketOutline,
+  TickOutline,
+  ViewsOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TUserProfile } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+// local components
+import { CommonOnboardingHeader } from "../common";
+import type { TProfileSetupFormValues } from "../profile/root";
+
+type Props = {
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+const ROLES = [
+  { id: "product-manager", label: "Product Manager", icon: CubeOutline },
+  { id: "engineering-manager", label: "Engineering Manager", icon: ViewsOutline },
+  { id: "designer", label: "Designer", icon: PenTool },
+  { id: "developer", label: "Developer", icon: MonitorOutline },
+  { id: "founder-executive", label: "Founder/Executive", icon: RocketOutline },
+  { id: "operations-manager", label: "Operations Manager", icon: RefreshOutline },
+  { id: "others", label: "Others", icon: CubeOutline },
+];
+
+const defaultValues = {
+  role: "",
+};
+
+export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange }: Props) {
+  // store hooks
+  const { data: profile, updateUserProfile } = useUserProfile();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TProfileSetupFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      role: profile?.role,
+    },
+    mode: "onChange",
+  });
+
+  // handle submit
+  const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      role: formData.role,
+    };
+    try {
+      await Promise.all([
+        updateUserProfile(profileUpdatePayload),
+        // totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success",
+        message: "Profile setup completed!",
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!profile) return;
+    await handleSubmitUserPersonalization(formData);
+    handleStepChange(EOnboardingSteps.ROLE_SETUP);
+  };
+
+  const handleSkip = () => {
+    handleStepChange(EOnboardingSteps.ROLE_SETUP);
+  };
+
+  const isButtonDisabled = !isSubmitting && isValid ? false : true;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
+      {/* Header */}
+      <CommonOnboardingHeader title="What's your role?" description="Let's set up Plane for how you work." />
+      {/* Role Selection */}
+      <div className="flex flex-col gap-3">
+        <p className="text-body-sm-semibold text-placeholder">Select one</p>
+        <Controller
+          control={control}
+          name="role"
+          rules={{
+            required: "This field is required",
+          }}
+          render={({ field: { value, onChange } }) => (
+            <div className="flex flex-col gap-3">
+              {ROLES.map((role) => {
+                const Icon = role.icon;
+                const isSelected = value === role.id;
+
+                return (
+                  <button
+                    key={role.id}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onChange(role.id);
+                    }}
+                    className={`flex w-full items-center justify-between rounded-lg border px-3 py-2 transition-all duration-200 ${
+                      isSelected
+                        ? "border-accent-strong bg-accent-subtle text-accent-primary"
+                        : "border-subtle text-tertiary hover:border-strong"
+                    }`}
+                  >
+                    <div className="flex items-center space-x-3">
+                      <Icon className="size-3.5" />
+                      <span className="text-body-sm-semibold">{role.label}</span>
+                    </div>
+                    {isSelected && (
+                      <>
+                        <button
+                          className={`border-blue-500 flex size-4 items-center justify-center rounded-sm border-2 bg-accent-primary`}
+                        >
+                          <TickOutline className="h-3 w-3 text-on-color" />
+                        </button>
+                      </>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        />
+        {errors.role && <span className="text-13 text-danger-primary">{errors.role.message}</span>}
+      </div>
+      {/* Action Buttons */}
+      <div className="space-y-3">
+        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
+          Continue
+        </Button>
+        <Button variant="ghost" onClick={handleSkip} className="w-full text-tertiary" size="xl">
+          Skip
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/onboarding/steps/root.tsx b/apps/web/core/components/onboarding/steps/root.tsx
new file mode 100644
index 0000000..70297c1
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/root.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+// plane imports
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+// local components
+import { ProfileSetupStep } from "./profile";
+import { RoleSetupStep } from "./role";
+import { InviteTeamStep } from "./team";
+import { UseCaseSetupStep } from "./usecase";
+import { WorkspaceSetupStep } from "./workspace";
+
+type Props = {
+  currentStep: EOnboardingSteps;
+  invitations: IWorkspaceMemberInvitation[];
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+function OnboardingStepContent({ currentStep, invitations, handleStepChange }: Props) {
+  switch (currentStep) {
+    case EOnboardingSteps.PROFILE_SETUP:
+      return <ProfileSetupStep handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.ROLE_SETUP:
+      return <RoleSetupStep handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.USE_CASE_SETUP:
+      return <UseCaseSetupStep handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
+      return <WorkspaceSetupStep invitations={invitations ?? []} handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.INVITE_MEMBERS:
+      return <InviteTeamStep handleStepChange={handleStepChange} />;
+    default:
+      return null;
+  }
+}
+
+export function OnboardingStepRoot(props: Props) {
+  const { currentStep } = props;
+  // ref for the scrollable container
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  // scroll to top when step changes
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    }
+  }, [currentStep]);
+
+  return (
+    <div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
+      <div className="flex min-h-full items-center justify-center p-8">
+        <div className="w-full max-w-[24rem]">
+          <OnboardingStepContent {...props} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/onboarding/steps/team/index.ts b/apps/web/core/components/onboarding/steps/team/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/team/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
new file mode 100644
index 0000000..77b0809
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -0,0 +1,400 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import type {
+  Control,
+  FieldArrayWithId,
+  UseFieldArrayRemove,
+  UseFormGetValues,
+  UseFormSetValue,
+  UseFormWatch,
+} from "react-hook-form";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { usePopper } from "react-popper";
+import { AddOutline, ChevronDownOutline, CloseCircleOutline, TickOutline } from "@makeplane/propel/icons";
+import { Listbox } from "@headlessui/react";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import type { EUserPermissions } from "@plane/constants";
+import { ROLE, ROLE_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EOnboardingSteps } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// components
+import { CommonOnboardingHeader } from "../common";
+
+type Props = {
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+type EmailRole = {
+  email: string;
+  role: EUserPermissions;
+  role_active: boolean;
+};
+
+type FormValues = {
+  emails: EmailRole[];
+};
+
+type InviteMemberFormProps = {
+  index: number;
+  remove: UseFieldArrayRemove;
+  control: Control<FormValues, any>;
+  setValue: UseFormSetValue<FormValues>;
+  getValues: UseFormGetValues<FormValues>;
+  watch: UseFormWatch<FormValues>;
+  field: FieldArrayWithId<FormValues, "emails", "id">;
+  fields: FieldArrayWithId<FormValues, "emails", "id">[];
+  errors: any;
+  isInvitationDisabled: boolean;
+  setIsInvitationDisabled: (value: boolean) => void;
+};
+
+// services
+const workspaceService = new WorkspaceService();
+const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+const placeholderEmails = [
+  "charlie.taylor@frstflt.com",
+  "octave.chanute@frstflt.com",
+  "george.spratt@frstflt.com",
+  "frank.coffyn@frstflt.com",
+  "amos.root@frstflt.com",
+  "edward.deeds@frstflt.com",
+  "charles.m.manly@frstflt.com",
+  "glenn.curtiss@frstflt.com",
+  "thomas.selfridge@frstflt.com",
+  "albert.zahm@frstflt.com",
+];
+const InviteMemberInput = observer(function InviteMemberInput(props: InviteMemberFormProps) {
+  const {
+    control,
+    index,
+    fields,
+    remove,
+    errors,
+    isInvitationDisabled,
+    setIsInvitationDisabled,
+    setValue,
+    getValues,
+    watch,
+  } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { t } = useTranslation();
+
+  const email = watch(`emails.${index}.email`);
+
+  const emailOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.value === "") {
+      const validEmail = fields.map((_, i) => emailRegex.test(getValues(`emails.${i}.email`))).includes(true);
+      if (validEmail) {
+        setIsInvitationDisabled(false);
+      } else {
+        setIsInvitationDisabled(true);
+      }
+
+      if (getValues(`emails.${index}.role_active`)) {
+        setValue(`emails.${index}.role_active`, false);
+      }
+    } else {
+      if (!getValues(`emails.${index}.role_active`)) {
+        setValue(`emails.${index}.role_active`, true);
+      }
+      if (isInvitationDisabled && emailRegex.test(event.target.value)) {
+        setIsInvitationDisabled(false);
+      } else if (!isInvitationDisabled && !emailRegex.test(event.target.value)) {
+        setIsInvitationDisabled(true);
+      }
+    }
+  };
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-end",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  return (
+    <div>
+      <div className="group relative grid grid-cols-10 gap-4">
+        <div className="col-span-6">
+          <Controller
+            control={control}
+            name={`emails.${index}.email`}
+            rules={{
+              pattern: {
+                value: emailRegex,
+                message: "Invalid Email ID",
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="input" invalid={Boolean(errors.emails?.[index]?.email)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id={`emails.${index}.email`}
+                    name={`emails.${index}.email`}
+                    type="text"
+                    value={value}
+                    onChange={(event) => {
+                      emailOnChange(event);
+                      onChange(event);
+                    }}
+                    ref={ref}
+                    placeholder={placeholderEmails[index % placeholderEmails.length]}
+                    autoComplete="off"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </div>
+        <div className="col-span-4 mr-8">
+          <Controller
+            control={control}
+            name={`emails.${index}.role`}
+            rules={{ required: true }}
+            render={({ field: { value, onChange } }) => (
+              <Listbox
+                as="div"
+                value={value}
+                onChange={(val) => {
+                  onChange(val);
+                  setValue(`emails.${index}.role_active`, true);
+                }}
+                className="w-full flex-shrink-0 text-left"
+              >
+                <Listbox.Button
+                  type="button"
+                  ref={setReferenceElement}
+                  className="flex w-full items-center justify-between gap-1 rounded-md border-[0.5px] border-strong px-2.5 py-2 text-13"
+                >
+                  <span
+                    className={`text-13 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    } sm:text-13`}
+                  >
+                    {ROLE[value]}
+                  </span>
+
+                  <ChevronDownOutline
+                    className={`size-3 ${
+                      !getValues(`emails.${index}.role_active`) ? "text-placeholder" : "text-primary"
+                    }`}
+                  />
+                </Listbox.Button>
+
+                <Listbox.Options as="div">
+                  <div
+                    className="shadow-sm absolute z-10 mt-1 h-fit w-48 space-y-1 rounded-md border border-strong bg-surface-1 p-2 focus:outline-none sm:w-60"
+                    ref={setPopperElement}
+                    style={styles.popper}
+                    {...attributes.popper}
+                  >
+                    {Object.entries(ROLE_DETAILS).map(([key, value]) => (
+                      <Listbox.Option
+                        as="div"
+                        key={key}
+                        value={parseInt(key)}
+                        className={({ active, selected }) =>
+                          `cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
+                            active || selected ? "bg-onboarding-background-400/40" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <div className="flex items-center gap-2 p-1 text-wrap">
+                            <div className="flex flex-col">
+                              <div className="text-13 font-medium">{t(value.i18n_title)}</div>
+                              <div className="flex text-11 text-tertiary">{t(value.i18n_description)}</div>
+                            </div>
+                            {selected && <TickOutline className="h-4 w-4 shrink-0" />}
+                          </div>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                  </div>
+                </Listbox.Options>
+              </Listbox>
+            )}
+          />
+        </div>
+        {fields.length > 1 && (
+          <button
+            type="button"
+            className="absolute right-0 hidden place-items-center self-center rounded-sm group-hover:grid"
+            onClick={() => remove(index)}
+          >
+            <CloseCircleOutline className="h-5 w-5 pl-0.5 text-placeholder" />
+          </button>
+        )}
+      </div>
+      {email && !emailRegex.test(email) && (
+        <div className="mx-8 my-1">
+          <span className="text-13">🤥</span>{" "}
+          <span className="mt-1 text-11 text-danger-primary">That doesn{"'"}t look like an email address.</span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
+  const { handleStepChange } = props;
+
+  const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
+
+  const { workspaces } = useWorkspace();
+  const workspacesList = Object.values(workspaces ?? {});
+  const workspace = workspacesList[0];
+
+  const {
+    control,
+    watch,
+    getValues,
+    setValue,
+    handleSubmit,
+    formState: { isSubmitting, errors, isValid },
+  } = useForm<FormValues>();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "emails",
+  });
+
+  const nextStep = async () => {
+    await handleStepChange(EOnboardingSteps.INVITE_MEMBERS);
+  };
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!workspace) return;
+
+    let payload = { ...formData };
+    payload = { emails: payload.emails.filter((email) => email.email !== "") };
+
+    await workspaceService
+      .inviteWorkspace(workspace.slug, {
+        emails: payload.emails.map((email) => ({
+          email: email.email,
+          role: email.role,
+        })),
+      })
+      .then(async () => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Invitations sent successfully.",
+        });
+        await nextStep();
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.error,
+        });
+      });
+  };
+
+  const appendField = () => {
+    append({ email: "", role: 15, role_active: false });
+  };
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append(
+        [
+          { email: "", role: 15, role_active: false },
+          { email: "", role: 15, role_active: false },
+          { email: "", role: 15, role_active: false },
+        ],
+        {
+          focusIndex: 0,
+        }
+      );
+    }
+  }, [fields, append]);
+
+  return (
+    <form
+      className="flex flex-col gap-10"
+      onSubmit={handleSubmit(onSubmit)}
+      onKeyDown={(e) => {
+        if (e.code === "Enter") e.preventDefault();
+      }}
+    >
+      <CommonOnboardingHeader
+        title="Invite your teammates"
+        description="Work in plane happens best with your team. Invite them now to use Plane to its potential."
+      />
+      <div className="w-full py-4 text-13">
+        <div className="group relative mx-8 grid grid-cols-10 gap-4 py-2">
+          <div className="col-span-6 px-1 text-13 font-medium text-secondary">Email</div>
+          <div className="col-span-4 px-1 text-13 font-medium text-secondary">Role</div>
+        </div>
+        <div className="mb-3 space-y-3 sm:space-y-4">
+          {fields.map((field, index) => (
+            <InviteMemberInput
+              watch={watch}
+              getValues={getValues}
+              setValue={setValue}
+              isInvitationDisabled={isInvitationDisabled}
+              setIsInvitationDisabled={(value: boolean) => setIsInvitationDisabled(value)}
+              control={control}
+              errors={errors}
+              field={field}
+              fields={fields}
+              index={index}
+              remove={remove}
+              key={field.id}
+            />
+          ))}
+        </div>
+        <button
+          type="button"
+          className="mx-8 flex items-center gap-1.5 bg-transparent text-13 font-medium text-accent-primary outline-accent-strong"
+          onClick={appendField}
+        >
+          <AddOutline className="h-4 w-4" />
+          Add another
+        </button>
+      </div>
+      <div className="mx-auto flex w-full flex-col items-center justify-center gap-4 px-8 sm:px-2">
+        <Button
+          variant="primary"
+          type="submit"
+          size="xl"
+          className="w-full"
+          disabled={isInvitationDisabled || !isValid || isSubmitting}
+        >
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+        </Button>
+        <Button variant="ghost" size="xl" className="w-full" onClick={nextStep}>
+          I’ll do it later
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/onboarding/steps/usecase/index.ts b/apps/web/core/components/onboarding/steps/usecase/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/usecase/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/usecase/root.tsx b/apps/web/core/components/onboarding/steps/usecase/root.tsx
new file mode 100644
index 0000000..4f4b2ef
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/usecase/root.tsx
@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { USE_CASES } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { TickOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TUserProfile } from "@plane/types";
+import { EOnboardingSteps } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+// local imports
+import { CommonOnboardingHeader } from "../common";
+import type { TProfileSetupFormValues } from "../profile/root";
+
+type Props = {
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+const defaultValues = {
+  use_case: [] as string[],
+};
+
+export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepChange }: Props) {
+  // store hooks
+  const { data: profile, updateUserProfile } = useUserProfile();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<TProfileSetupFormValues>({
+    defaultValues: {
+      ...defaultValues,
+      use_case: profile?.use_case ? profile.use_case.split(". ") : [],
+    },
+    mode: "onChange",
+  });
+
+  // handle submit
+  const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
+    const profileUpdatePayload: Partial<TUserProfile> = {
+      use_case: formData.use_case && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
+    };
+    try {
+      await Promise.all([
+        updateUserProfile(profileUpdatePayload),
+        // totalSteps > 2 && stepChange({ profile_complete: true }),
+      ]);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success",
+        message: "Profile setup completed!",
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error",
+        message: "Profile setup failed. Please try again!",
+      });
+    }
+  };
+
+  // on submit
+  const onSubmit = async (formData: TProfileSetupFormValues) => {
+    if (!profile) return;
+    await handleSubmitUserPersonalization(formData);
+    handleStepChange(EOnboardingSteps.USE_CASE_SETUP);
+  };
+
+  // handle skip
+  const handleSkip = () => {
+    handleStepChange(EOnboardingSteps.USE_CASE_SETUP);
+  };
+
+  // derived values
+  const isButtonDisabled = !isSubmitting && isValid ? false : true;
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-10">
+      {/* Header */}
+      <CommonOnboardingHeader title="What brings you to Plane?" description="Tell us your goals and team size." />
+
+      {/* Use Case Selection */}
+      <div className="flex flex-col gap-3">
+        <p className="text-body-sm-semibold text-placeholder">Select one or more</p>
+
+        <Controller
+          control={control}
+          name="use_case"
+          rules={{
+            required: "Please select at least one option",
+            validate: (value) => (value && value.length > 0) || "Please select at least one option",
+          }}
+          render={({ field: { value, onChange } }) => (
+            <div className="flex flex-col gap-3">
+              {USE_CASES.map((useCase) => {
+                const isSelected = value?.includes(useCase) || false;
+                return (
+                  <button
+                    key={useCase}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      const currentValue = value || [];
+                      if (isSelected) {
+                        // Remove from array
+                        onChange(currentValue.filter((item) => item !== useCase));
+                      } else {
+                        // Add to array
+                        onChange([...currentValue, useCase]);
+                      }
+                    }}
+                    className={`flex w-full items-center gap-2 rounded-lg border px-3 py-2 transition-all duration-200 ${
+                      isSelected
+                        ? "border-accent-strong bg-accent-subtle text-accent-primary"
+                        : "border-subtle text-tertiary hover:border-strong"
+                    }`}
+                  >
+                    <span
+                      className={cn(`flex size-4 items-center justify-center rounded-sm border-2`, {
+                        "border-accent-strong bg-accent-primary": isSelected,
+                        "border-strong": !isSelected,
+                      })}
+                    >
+                      <TickOutline
+                        className={cn("h-3 w-3 text-on-color", {
+                          "opacity-100": isSelected,
+                          "opacity-0": !isSelected,
+                        })}
+                      />
+                    </span>
+
+                    <span className="text-body-sm-regular">{useCase}</span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        />
+        {errors.use_case && <span className="text-13 text-danger-primary">{errors.use_case.message}</span>}
+      </div>
+
+      {/* Action Buttons */}
+      <div className="space-y-3">
+        <Button variant="primary" type="submit" className="w-full" size="xl" disabled={isButtonDisabled}>
+          Continue
+        </Button>
+        <Button variant="ghost" onClick={handleSkip} className="w-full" size="xl">
+          Skip
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/onboarding/steps/workspace/create.tsx b/apps/web/core/components/onboarding/steps/workspace/create.tsx
new file mode 100644
index 0000000..9d2bcf0
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/workspace/create.tsx
@@ -0,0 +1,304 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { TickCircleOutline } from "@makeplane/propel/icons";
+// plane imports
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, IWorkspace } from "@plane/types";
+import { Spinner } from "@plane/ui";
+import { cn, validateWorkspaceName, validateSlug } from "@plane/utils";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserProfile, useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// local components
+import { CommonOnboardingHeader } from "../common";
+
+type Props = {
+  user: IUser | undefined;
+  onComplete: (skipInvites?: boolean) => void;
+  handleCurrentViewChange: () => void;
+  hasInvitations?: boolean;
+};
+
+const workspaceService = new WorkspaceService();
+
+export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
+  user,
+  onComplete,
+  handleCurrentViewChange,
+  hasInvitations = false,
+}: Props) {
+  // states
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { config } = useInstance();
+  const { updateUserProfile } = useUserProfile();
+  const { fetchCurrentUserSettings } = useUserSettings();
+  const { createWorkspace, fetchWorkspaces } = useWorkspace();
+
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? false;
+
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IWorkspace>({
+    defaultValues: {
+      name: "",
+      slug: "",
+      organization_size: "",
+    },
+    mode: "onChange",
+  });
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    if (isSubmitting) return;
+
+    try {
+      const res = (await workspaceService.workspaceSlugCheck(formData.slug)) as { status: boolean };
+      if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+        setSlugError(false);
+        try {
+          const workspaceResponse = await createWorkspace(formData);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("workspace_creation.toast.success.title"),
+            message: t("workspace_creation.toast.success.message"),
+          });
+          await fetchWorkspaces();
+          await completeStep(workspaceResponse.id);
+          onComplete(formData.organization_size === "Just myself");
+        } catch {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("workspace_creation.toast.error.title"),
+            message: t("workspace_creation.toast.error.message"),
+          });
+        }
+      } else {
+        setSlugError(true);
+      }
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("workspace_creation.toast.error.title"),
+        message: t("workspace_creation.toast.error.message"),
+      });
+    }
+  };
+
+  const completeStep = async (workspaceId: string) => {
+    if (!user) return;
+    await updateUserProfile({
+      last_workspace_id: workspaceId,
+    });
+    await fetchCurrentUserSettings();
+  };
+
+  const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
+
+  if (isWorkspaceCreationDisabled) {
+    return (
+      <div className="flex flex-col gap-10">
+        <span className="text-center text-14 text-tertiary">
+          You don't seem to have any invites to a workspace and your instance admin has restricted creation of new
+          workspaces. Please ask a workspace owner or admin to invite you to a workspace first and come back to this
+          screen to join.
+        </span>
+      </div>
+    );
+  }
+  return (
+    <form
+      className="flex flex-col gap-10"
+      onSubmit={(e) => {
+        void handleSubmit(handleCreateWorkspace)(e);
+      }}
+    >
+      <CommonOnboardingHeader title="Create your workspace" description="All your work — unified." />
+      <div className="flex flex-col gap-8">
+        <div className="flex flex-col gap-2">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="name"
+          >
+            {t("workspace_creation.form.name.label")}
+          </label>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: t("common.errors.required"),
+              validate: (value) => validateWorkspaceName(value, true),
+              maxLength: {
+                value: 80,
+                message: t("workspace_creation.errors.validation.name_length"),
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <div className="relative flex items-center rounded-md">
+                <input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={(event) => {
+                    onChange(event.target.value);
+                    setValue("name", event.target.value);
+                    setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
+                      shouldValidate: true,
+                    });
+                  }}
+                  placeholder="Enter workspace name"
+                  ref={ref}
+                  className={cn(
+                    "w-full rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
+                    {
+                      "border-strong": !errors.name,
+                      "border-danger-strong": errors.name,
+                    }
+                  )}
+                  // eslint-disable-next-line jsx-a11y/no-autofocus
+                  autoFocus
+                />
+              </div>
+            )}
+          />
+          {errors.name && <span className="text-13 text-danger-primary">{errors.name.message}</span>}
+        </div>
+        <div className="flex flex-col gap-2">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="slug"
+          >
+            {t("workspace_creation.form.url.label")}
+          </label>
+          <Controller
+            control={control}
+            name="slug"
+            rules={{
+              required: t("common.errors.required"),
+              maxLength: {
+                value: 48,
+                message: t("workspace_creation.errors.validation.url_length"),
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <div
+                className={cn(
+                  "flex w-full items-center rounded-md border border-strong bg-surface-1 px-3 py-2 text-secondary transition-all duration-200 focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
+                  {
+                    "border-strong": !errors.name,
+                    "border-danger-strong": errors.name,
+                  }
+                )}
+              >
+                <span className={cn("rounded-md pr-0 whitespace-nowrap text-secondary")}>
+                  {window && window.location.host}/
+                </span>
+                <input
+                  id="slug"
+                  name="slug"
+                  type="text"
+                  value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                  onChange={(e) => {
+                    const validation = validateSlug(e.target.value);
+                    if (validation === true) setInvalidSlug(false);
+                    else setInvalidSlug(true);
+                    onChange(e.target.value.toLowerCase());
+                  }}
+                  ref={ref}
+                  placeholder={t("workspace_creation.form.url.placeholder")}
+                  className={cn(
+                    "ring-none w-full rounded-md border-none bg-surface-1 px-3 py-0 pl-0 text-secondary outline-none placeholder:text-placeholder"
+                  )}
+                />
+              </div>
+            )}
+          />
+          <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
+          {slugError && (
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
+          )}
+          {invalidSlug && (
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+          )}
+          {errors.slug && <span className="text-13 text-danger-primary">{errors.slug.message}</span>}
+        </div>
+        <div className="flex flex-col gap-2">
+          <label
+            className="text-13 font-medium text-tertiary after:ml-0.5 after:text-danger-primary after:content-['*']"
+            htmlFor="organization_size"
+          >
+            {t("workspace_creation.form.organization_size.label")}
+          </label>
+          <div className="w-full">
+            <Controller
+              name="organization_size"
+              control={control}
+              rules={{ required: t("common.errors.required") }}
+              render={({ field: { value, onChange } }) => (
+                <div className="flex flex-wrap gap-3">
+                  {ORGANIZATION_SIZE.map((size) => {
+                    const isSelected = value === size;
+                    return (
+                      <button
+                        key={size}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          onChange(size);
+                        }}
+                        className={`flex items-center justify-between gap-1 rounded-lg border px-3 py-2 text-13 transition-all duration-200 ${
+                          isSelected
+                            ? "border-subtle bg-layer-1 text-secondary"
+                            : "border-subtle text-tertiary hover:border-strong"
+                        }`}
+                      >
+                        <TickCircleOutline className={cn("size-4 text-placeholder", isSelected && "text-secondary")} />
+
+                        <span className="font-medium">{size}</span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            />
+            {errors.organization_size && (
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <Button variant="primary" type="submit" size="xl" className="w-full" disabled={isButtonDisabled}>
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
+        </Button>
+        {hasInvitations && (
+          <Button variant="ghost" size="xl" className="w-full" onClick={handleCurrentViewChange}>
+            Join existing workspace
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/onboarding/steps/workspace/index.ts b/apps/web/core/components/onboarding/steps/workspace/index.ts
new file mode 100644
index 0000000..fb5bdd9
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/workspace/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./create";
+export * from "./join-invites";
+export * from "./root";
diff --git a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
new file mode 100644
index 0000000..9215345
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// plane imports
+import { ROLE } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { Spinner } from "@plane/ui";
+import { truncateText } from "@plane/utils";
+// constants
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserSettings } from "@/hooks/store/user";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// local components
+import { CommonOnboardingHeader } from "../common";
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  handleNextStep: () => Promise<void>;
+  handleCurrentViewChange: () => void;
+};
+const workspaceService = new WorkspaceService();
+
+export function WorkspaceJoinInvitesStep(props: Props) {
+  const { invitations, handleNextStep, handleCurrentViewChange } = props;
+  // states
+  const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
+  const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
+  // store hooks
+  const { fetchWorkspaces } = useWorkspace();
+  const { fetchCurrentUserSettings } = useUserSettings();
+
+  // handle invitation
+  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
+    if (action === "accepted") {
+      setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
+    } else if (action === "withdraw") {
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
+    }
+  };
+
+  // submit invitations
+  const submitInvitations = async () => {
+    const invitation = invitations?.find((invitation) => invitation.id === invitationsRespond[0]);
+
+    if (invitationsRespond.length <= 0 && !invitation?.role) return;
+
+    setIsJoiningWorkspaces(true);
+
+    try {
+      await workspaceService.joinWorkspaces({ invitations: invitationsRespond });
+      await fetchWorkspaces();
+      await fetchCurrentUserSettings();
+      await handleNextStep();
+    } catch (error: any) {
+      console.error(error);
+      setIsJoiningWorkspaces(false);
+    }
+  };
+
+  return invitations && invitations.length > 0 ? (
+    <div className="flex flex-col gap-10">
+      <CommonOnboardingHeader title="Join invites or create a workspace" description="All your work — unified." />
+      <div className="flex flex-col gap-3">
+        {invitations &&
+          invitations.length > 0 &&
+          invitations.map((invitation) => {
+            const isSelected = invitationsRespond.includes(invitation.id);
+            const invitedWorkspace = invitation.workspace;
+            return (
+              <div
+                key={invitation.id}
+                className={`flex cursor-pointer items-center gap-2 rounded-lg border border-subtle px-3 py-2 hover:bg-surface-2`}
+                onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
+              >
+                <div className="flex-shrink-0">
+                  <WorkspaceLogo
+                    logo={invitedWorkspace?.logo_url}
+                    name={invitedWorkspace?.name}
+                    classNames="size-8 flex-shrink-0 rounded-lg"
+                  />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="text-13 font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
+                  <p className="text-11 text-secondary">{ROLE[invitation.role]}</p>
+                </div>
+                <span className="pointer-events-none flex-shrink-0">
+                  <Checkbox checked={isSelected} aria-label={invitedWorkspace?.name ?? "Select workspace invitation"} />
+                </span>
+              </div>
+            );
+          })}
+      </div>
+      <div className="flex flex-col gap-4">
+        <Button
+          variant="primary"
+          size="xl"
+          className="w-full"
+          onClick={submitInvitations}
+          disabled={isJoiningWorkspaces || !invitationsRespond.length}
+        >
+          {isJoiningWorkspaces ? <Spinner height="20px" width="20px" /> : "Continue"}
+        </Button>
+        <Button
+          variant="ghost"
+          size="xl"
+          className="w-full"
+          onClick={handleCurrentViewChange}
+          disabled={isJoiningWorkspaces}
+        >
+          Create new workspace
+        </Button>
+      </div>
+    </div>
+  ) : (
+    <div>No Invitations found</div>
+  );
+}
diff --git a/apps/web/core/components/onboarding/steps/workspace/root.tsx b/apps/web/core/components/onboarding/steps/workspace/root.tsx
new file mode 100644
index 0000000..f123487
--- /dev/null
+++ b/apps/web/core/components/onboarding/steps/workspace/root.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { IWorkspaceMemberInvitation } from "@plane/types";
+import { ECreateOrJoinWorkspaceViews, EOnboardingSteps } from "@plane/types";
+// hooks
+import { useUser } from "@/hooks/store/user";
+// local components
+import { WorkspaceCreateStep, WorkspaceJoinInvitesStep } from "./";
+
+type Props = {
+  invitations: IWorkspaceMemberInvitation[];
+  handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
+};
+
+export const WorkspaceSetupStep = observer(function WorkspaceSetupStep({ invitations, handleStepChange }: Props) {
+  // states
+  const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
+  // store hooks
+  const { data: user } = useUser();
+
+  useEffect(() => {
+    if (invitations.length > 0) {
+      setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN);
+    } else {
+      setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE);
+    }
+  }, [invitations]);
+
+  return (
+    <>
+      {currentView === ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN ? (
+        <WorkspaceJoinInvitesStep
+          invitations={invitations}
+          handleNextStep={async () => {
+            handleStepChange(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN, true);
+          }}
+          handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_CREATE)}
+        />
+      ) : (
+        <WorkspaceCreateStep
+          user={user}
+          onComplete={(skipInvites) => handleStepChange(EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN, skipInvites)}
+          handleCurrentViewChange={() => setCurrentView(ECreateOrJoinWorkspaceViews.WORKSPACE_JOIN)}
+          hasInvitations={invitations.length > 0}
+        />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/onboarding/switch-account-dropdown.tsx b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
new file mode 100644
index 0000000..c5528ce
--- /dev/null
+++ b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Menu, Transition } from "@headlessui/react";
+// ui
+import { cn, getFileURL } from "@plane/utils";
+// helpers
+// hooks
+import { useUser } from "@/hooks/store/user";
+// components
+import { SwitchAccountModal } from "./switch-account-modal";
+
+type TSwitchAccountDropdownProps = {
+  fullName?: string;
+};
+
+export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(props: TSwitchAccountDropdownProps) {
+  const { fullName } = props;
+  // states
+  const [showSwitchAccountModal, setShowSwitchAccountModal] = useState(false);
+  // store hooks
+  const { data: user } = useUser();
+
+  const displayName = user?.first_name
+    ? `${user?.first_name} ${user?.last_name ?? ""}`
+    : fullName && fullName.trim().length > 0
+      ? fullName
+      : user?.email;
+
+  if (!displayName && !fullName) return null;
+
+  return (
+    <>
+      <SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
+      <Menu as="div" className="relative">
+        <Menu.Button className="z-10 flex items-center gap-x-2.5 rounded-lg bg-layer-1 px-2 py-1.5">
+          <div className="flex size-6 items-center justify-center rounded-full bg-success-primary text-13 font-semibold text-on-color capitalize">
+            {user?.avatar_url ? (
+              <img
+                src={getFileURL(user?.avatar_url)}
+                alt={user?.display_name}
+                className="h-full w-full rounded-full object-cover"
+              />
+            ) : (
+              <>{fullName?.[0] ?? "R"}</>
+            )}
+          </div>
+          <span className="text-13 font-medium text-secondary">{displayName}</span>
+        </Menu.Button>
+        <Transition
+          as="div"
+          enter="transition duration-100 ease-out"
+          enterFrom="transform scale-95 opacity-0"
+          enterTo="transform scale-100 opacity-100"
+          leave="transition duration-75 ease-out"
+          leaveFrom="transform scale-100 opacity-100"
+          leaveTo="transform scale-95 opacity-0"
+        >
+          <Menu.Items className="absolute right-0 z-10 mt-2 min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-13 shadow-raised-200">
+            <Menu.Item
+              as="button"
+              type="button"
+              className={({ active }) =>
+                cn("w-full rounded-sm px-1 py-1.5 text-left whitespace-nowrap text-danger-primary", {
+                  "bg-layer-1": active,
+                })
+              }
+              onClick={() => setShowSwitchAccountModal(true)}
+            >
+              Wrong e-mail address?
+            </Menu.Item>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/onboarding/switch-account-modal.tsx b/apps/web/core/components/onboarding/switch-account-modal.tsx
new file mode 100644
index 0000000..aa80f8e
--- /dev/null
+++ b/apps/web/core/components/onboarding/switch-account-modal.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+
+import { useTheme } from "next-themes";
+import { ArrowRightLeft } from "lucide-react";
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// hooks
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export function SwitchAccountModal(props: Props) {
+  const { isOpen, onClose } = props;
+  // states
+  const [switchingAccount, setSwitchingAccount] = useState(false);
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { data: userData, signOut } = useUser();
+
+  const { setTheme } = useTheme();
+
+  const handleClose = () => {
+    setSwitchingAccount(false);
+    onClose();
+  };
+
+  const handleSwitchAccount = async () => {
+    setSwitchingAccount(true);
+
+    await signOut()
+      .then(() => {
+        setTheme("system");
+        router.push("/");
+        handleClose();
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Failed to sign out. Please try again.",
+        })
+      )
+      .finally(() => setSwitchingAccount(false));
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
+                <div className="p-6 pb-1">
+                  <div className="flex gap-x-4">
+                    <div className="flex items-start">
+                      <div className="grid place-items-center rounded-full bg-accent-primary/20 p-4">
+                        <ArrowRightLeft className="h-5 w-5 text-accent-primary" aria-hidden="true" />
+                      </div>
+                    </div>
+                    <div className="flex flex-col gap-y-6 py-3">
+                      <Dialog.Title as="h3" className="text-20 leading-6 font-medium text-primary">
+                        Switch account
+                      </Dialog.Title>
+                      {userData?.email && (
+                        <div className="text-14 font-regular text-secondary">
+                          If you have signed up via <span className="text-accent-primary">{userData.email}</span>{" "}
+                          un-intentionally, you can switch your account to a different one from here.
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+                <div className="mb-2 flex items-center justify-end gap-3 p-4 sm:px-6">
+                  <Button variant="secondary" size="lg" onClick={handleSwitchAccount} disabled={switchingAccount}>
+                    {switchingAccount ? "Switching..." : "Switch account"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}
diff --git a/apps/web/core/components/onboarding/tour/root.tsx b/apps/web/core/components/onboarding/tour/root.tsx
new file mode 100644
index 0000000..a5c3389
--- /dev/null
+++ b/apps/web/core/components/onboarding/tour/root.tsx
@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { PlaneLockup } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
+// assets
+import CyclesTour from "@/app/assets/onboarding/cycles.webp?url";
+import IssuesTour from "@/app/assets/onboarding/issues.webp?url";
+import ModulesTour from "@/app/assets/onboarding/modules.webp?url";
+import PagesTour from "@/app/assets/onboarding/pages.webp?url";
+import ViewsTour from "@/app/assets/onboarding/views.webp?url";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useUser } from "@/hooks/store/user";
+// local imports
+import { TourSidebar } from "./sidebar";
+
+export type TOnboardingTourProps = {
+  onComplete: () => void;
+};
+
+export type TTourSteps = "welcome" | "work-items" | "cycles" | "modules" | "views" | "pages";
+
+const TOUR_STEPS: {
+  key: TTourSteps;
+  title: string;
+  description: string;
+  image: string;
+  prevStep?: TTourSteps;
+  nextStep?: TTourSteps;
+}[] = [
+  {
+    key: "work-items",
+    title: "Plan with work items",
+    description:
+      "The work item is the building block of the Plane. Most concepts in Plane are either associated with work items and their properties.",
+    image: IssuesTour,
+    nextStep: "cycles",
+  },
+  {
+    key: "cycles",
+    title: "Move with cycles",
+    description:
+      "Cycles help you and your team to progress faster, similar to the sprints commonly used in agile development.",
+    image: CyclesTour,
+    prevStep: "work-items",
+    nextStep: "modules",
+  },
+  {
+    key: "modules",
+    title: "Break into modules",
+    description: "Modules break your big thing into Projects or Features, to help you organize better.",
+    image: ModulesTour,
+    prevStep: "cycles",
+    nextStep: "views",
+  },
+  {
+    key: "views",
+    title: "Views",
+    description:
+      "Create custom filters to display only the work items that matter to you. Save and share your filters in just a few clicks.",
+    image: ViewsTour,
+    prevStep: "modules",
+    nextStep: "pages",
+  },
+  {
+    key: "pages",
+    title: "Document with pages",
+    description: "Use Pages to quickly jot down work items when you're in a meeting or starting a day.",
+    image: PagesTour,
+    prevStep: "views",
+  },
+];
+
+export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps) {
+  const { onComplete } = props;
+  // states
+  const [step, setStep] = useState<TTourSteps>("welcome");
+  // store hooks
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { data: currentUser } = useUser();
+
+  const currentStepIndex = TOUR_STEPS.findIndex((tourStep) => tourStep.key === step);
+  const currentStep = TOUR_STEPS[currentStepIndex];
+
+  return (
+    <>
+      {step === "welcome" ? (
+        <div className="w-4/5 overflow-hidden rounded-[10px] bg-surface-1 md:w-1/2 lg:w-2/5">
+          <div className="h-full overflow-hidden">
+            <div className="grid h-64 place-items-center bg-accent-primary">
+              <PlaneLockup className="h-10 w-auto text-on-color" />
+            </div>
+            <div className="flex flex-col overflow-y-auto p-6">
+              <h3 className="font-semibold sm:text-18">
+                Welcome to Plane, {currentUser?.first_name} {currentUser?.last_name}
+              </h3>
+              <p className="mt-3 text-13 text-secondary">
+                We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get
+                started by creating a project.
+              </p>
+              <div className="flex h-full items-end">
+                <div className="mt-12 flex items-center gap-6">
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      setStep("work-items");
+                    }}
+                  >
+                    Take a Product Tour
+                  </Button>
+                  <button
+                    type="button"
+                    className="bg-transparent text-11 font-medium text-accent-primary outline-subtle-1"
+                    onClick={() => {
+                      onComplete();
+                    }}
+                  >
+                    No thanks, I will explore it myself
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="relative grid h-3/5 w-4/5 grid-cols-10 overflow-hidden rounded-[10px] bg-surface-1 sm:h-3/4 md:w-1/2 lg:w-3/5">
+          <button
+            type="button"
+            className="fixed top-[19%] right-[9%] z-10 translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border border-strong bg-surface-1 p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
+            onClick={onComplete}
+          >
+            <CloseOutline className="border-strong- h-3 w-3 text-primary" />
+          </button>
+          <TourSidebar step={step} setStep={setStep} />
+          <div className="col-span-10 h-full overflow-hidden lg:col-span-7">
+            <div
+              className={`flex h-1/2 items-end overflow-hidden bg-accent-primary sm:h-3/5 ${
+                currentStepIndex % 2 === 0 ? "justify-end" : "justify-start"
+              }`}
+            >
+              <img src={currentStep?.image} className="h-full w-full object-cover" alt={currentStep?.title} />
+            </div>
+            <div className="flex h-1/2 flex-col overflow-y-auto p-4 sm:h-2/5">
+              <h3 className="font-semibold sm:text-18">{currentStep?.title}</h3>
+              <p className="mt-3 text-13 text-secondary">{currentStep?.description}</p>
+              <div className="mt-3 flex h-full items-end justify-between gap-4">
+                <div className="flex items-center gap-4">
+                  {currentStep?.prevStep && (
+                    <Button variant="secondary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
+                      Back
+                    </Button>
+                  )}
+                  {currentStep?.nextStep && (
+                    <Button variant="primary" onClick={() => setStep(currentStep.nextStep ?? "work-items")}>
+                      Next
+                    </Button>
+                  )}
+                </div>
+                {currentStepIndex === TOUR_STEPS.length - 1 && (
+                  <Button
+                    variant="primary"
+                    onClick={() => {
+                      onComplete();
+                      toggleCreateProjectModal(true);
+                    }}
+                  >
+                    Create your first project
+                  </Button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/onboarding/tour/sidebar.tsx b/apps/web/core/components/onboarding/tour/sidebar.tsx
new file mode 100644
index 0000000..8ba1848
--- /dev/null
+++ b/apps/web/core/components/onboarding/tour/sidebar.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { CyclesOutline, ModuleOutline, PagesOutline, ViewsOutline, WorkItemsOutline } from "@makeplane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+// types
+import type { TTourSteps } from "./root";
+
+const sidebarOptions: {
+  key: TTourSteps;
+  label: string;
+  Icon: React.FC<ISvgIcons>;
+}[] = [
+  {
+    key: "work-items",
+    label: "Work items",
+    Icon: WorkItemsOutline,
+  },
+  {
+    key: "cycles",
+    label: "Cycles",
+    Icon: CyclesOutline,
+  },
+  {
+    key: "modules",
+    label: "Modules",
+    Icon: ModuleOutline,
+  },
+  {
+    key: "views",
+    label: "Views",
+    Icon: ViewsOutline,
+  },
+  {
+    key: "pages",
+    label: "Pages",
+    Icon: PagesOutline,
+  },
+];
+
+type Props = {
+  step: TTourSteps;
+  setStep: React.Dispatch<React.SetStateAction<TTourSteps>>;
+};
+
+export function TourSidebar({ step, setStep }: Props) {
+  return (
+    <div className="col-span-3 hidden bg-surface-2 p-8 lg:block">
+      <h3 className="text-16 font-medium">
+        Let{"'"}s get started!
+        <br />
+        Get more out of Plane.
+      </h3>
+      <div className="mt-8 space-y-5">
+        {sidebarOptions.map((option) => (
+          // oxlint-disable-next-line jsx_a11y/click-events-have-key-events
+          <h5
+            key={option.key}
+            className={`flex cursor-pointer items-center gap-2 border-l-[3px] py-0.5 pr-2 pl-3 text-13 font-medium capitalize ${
+              step === option.key ? "border-accent-strong text-accent-primary" : "border-transparent text-secondary"
+            }`}
+            onClick={() => setStep(option.key)}
+            // oxlint-disable-next-line jsx_a11y/prefer-tag-over-role
+            role="button"
+          >
+            <option.Icon className="h-4 w-4" aria-hidden="true" />
+            {option.label}
+          </h5>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/dropdowns/actions.tsx b/apps/web/core/components/pages/dropdowns/actions.tsx
new file mode 100644
index 0000000..e67f64f
--- /dev/null
+++ b/apps/web/core/components/pages/dropdowns/actions.tsx
@@ -0,0 +1,223 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import {
+  ArchiveOutline,
+  CopyOutline,
+  DeleteOutline,
+  ExportOutline,
+  GlobeOutline,
+  LinkOutline,
+  LockOutline,
+  LockedOutline,
+  NewTabOutline,
+  RestoreOutline,
+  UnlockedOutline,
+} from "@makeplane/propel/icons";
+// constants
+import { EPageAccess } from "@plane/constants";
+// plane editor
+// plane ui
+import type { TContextMenuItem } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+// components
+import { cn } from "@plane/utils";
+import { DeletePageModal } from "@/components/pages/modals/delete-page-modal";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// plane web hooks
+import type { EPageStoreType } from "@/hooks/store";
+import { usePageFlag } from "@/hooks/use-page-flag";
+// store types
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageActions =
+  | "full-screen"
+  | "sticky-toolbar"
+  | "copy-markdown"
+  | "toggle-lock"
+  | "toggle-access"
+  | "open-in-new-tab"
+  | "copy-link"
+  | "make-a-copy"
+  | "archive-restore"
+  | "delete"
+  | "version-history"
+  | "export"
+  | "move";
+
+type Props = {
+  extraOptions?: (TContextMenuItem & { key: TPageActions })[];
+  optionsOrder: TPageActions[];
+  page: TPageInstance;
+  parentRef?: React.RefObject<HTMLElement | null>;
+  storeType: EPageStoreType;
+};
+
+export const PageActions = observer(function PageActions(props: Props) {
+  const { extraOptions, optionsOrder, page, parentRef, storeType } = props;
+  // states
+  const [deletePageModal, setDeletePageModal] = useState(false);
+  const [movePageModal, setMovePageModal] = useState(false);
+  // params
+  const { workspaceSlug } = useParams();
+  // page flag
+  const { isMovePageEnabled } = usePageFlag({
+    workspaceSlug: workspaceSlug?.toString() ?? "",
+  });
+  // page operations
+  const { pageOperations } = usePageOperations({
+    page,
+  });
+  // derived values
+  const {
+    access,
+    archived_at,
+    is_locked,
+    canCurrentUserArchivePage,
+    canCurrentUserChangeAccess,
+    canCurrentUserDeletePage,
+    canCurrentUserDuplicatePage,
+    canCurrentUserLockPage,
+    canCurrentUserMovePage,
+  } = page;
+  // menu items
+  const MENU_ITEMS = useMemo(
+    function MENU_ITEMS() {
+      const menuItems: (TContextMenuItem & { key: TPageActions })[] = [
+        {
+          key: "toggle-lock",
+          action: () => {
+            pageOperations.toggleLock();
+          },
+          title: is_locked ? "Unlock" : "Lock",
+          icon: is_locked ? UnlockedOutline : LockedOutline,
+          shouldRender: canCurrentUserLockPage,
+        },
+        {
+          key: "toggle-access",
+          action: () => {
+            pageOperations.toggleAccess();
+          },
+          title: access === EPageAccess.PUBLIC ? "Make private" : "Make public",
+          icon: access === EPageAccess.PUBLIC ? LockOutline : GlobeOutline,
+          shouldRender: canCurrentUserChangeAccess && !archived_at,
+        },
+        {
+          key: "open-in-new-tab",
+          action: pageOperations.openInNewTab,
+          title: "Open in new tab",
+          icon: NewTabOutline,
+          shouldRender: true,
+        },
+        {
+          key: "copy-link",
+          action: pageOperations.copyLink,
+          title: "Copy link",
+          icon: LinkOutline,
+          shouldRender: true,
+        },
+        {
+          key: "make-a-copy",
+          action: () => {
+            pageOperations.duplicate();
+          },
+          title: "Make a copy",
+          icon: CopyOutline,
+          shouldRender: canCurrentUserDuplicatePage,
+        },
+        {
+          key: "archive-restore",
+          action: () => {
+            pageOperations.toggleArchive();
+          },
+          title: archived_at ? "Restore" : "Archive",
+          icon: archived_at ? RestoreOutline : ArchiveOutline,
+          shouldRender: canCurrentUserArchivePage,
+        },
+        {
+          key: "delete",
+          action: () => {
+            setDeletePageModal(true);
+          },
+          title: "Delete",
+          icon: DeleteOutline,
+          shouldRender: canCurrentUserDeletePage && !!archived_at,
+        },
+        {
+          key: "move",
+          action: () => setMovePageModal(true),
+          title: "Move",
+          icon: ExportOutline,
+          shouldRender: canCurrentUserMovePage && isMovePageEnabled,
+        },
+      ];
+      if (extraOptions) {
+        menuItems.push(...extraOptions);
+      }
+      return menuItems;
+    },
+    [
+      extraOptions,
+      is_locked,
+      canCurrentUserLockPage,
+      access,
+      canCurrentUserChangeAccess,
+      archived_at,
+      canCurrentUserDuplicatePage,
+      canCurrentUserArchivePage,
+      canCurrentUserDeletePage,
+      canCurrentUserMovePage,
+      isMovePageEnabled,
+      pageOperations,
+    ]
+  );
+  // arrange options
+  const arrangedOptions = useMemo<(TContextMenuItem & { key: TPageActions })[]>(
+    () =>
+      optionsOrder
+        .map((key) => MENU_ITEMS.find((item) => item.key === key))
+        .filter((item): item is TContextMenuItem & { key: TPageActions } => !!item),
+    [optionsOrder, MENU_ITEMS]
+  );
+
+  return (
+    <>
+      <DeletePageModal
+        isOpen={deletePageModal}
+        onClose={() => setDeletePageModal(false)}
+        page={page}
+        storeType={storeType}
+      />
+      {parentRef && <ContextMenu parentRef={parentRef} items={arrangedOptions} />}
+      <CustomMenu placement="bottom-end" optionsClassName="max-h-[90vh]" ellipsis closeOnSelect>
+        {arrangedOptions.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action?.();
+              }}
+              className={cn("flex items-center gap-2", item.className)}
+              disabled={item.disabled}
+            >
+              {item.customContent ?? (
+                <>
+                  {item.icon && <item.icon className="size-3" />}
+                  {item.title}
+                </>
+              )}
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/pages/dropdowns/index.ts b/apps/web/core/components/pages/dropdowns/index.ts
new file mode 100644
index 0000000..8f46fb4
--- /dev/null
+++ b/apps/web/core/components/pages/dropdowns/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./actions";
diff --git a/apps/web/core/components/pages/editor/ai/ask-pi-menu.tsx b/apps/web/core/components/pages/editor/ai/ask-pi-menu.tsx
new file mode 100644
index 0000000..485e1ad
--- /dev/null
+++ b/apps/web/core/components/pages/editor/ai/ask-pi-menu.tsx
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { CircleArrowUp } from "lucide-react";
+import { AiStar1Outline, CornerRightDownOutline, RefreshOutline } from "@makeplane/propel/icons";
+// ui
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// components
+import { cn } from "@plane/utils";
+import { RichTextEditor } from "@/components/editor/rich-text";
+// helpers
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+type Props = {
+  handleInsertText: (insertOnNextLine: boolean) => void;
+  handleRegenerate: () => Promise<void>;
+  isRegenerating: boolean;
+  response: string | undefined;
+  workspaceSlug: string;
+};
+
+export function AskPiMenu(props: Props) {
+  const { handleInsertText, handleRegenerate, isRegenerating, response, workspaceSlug } = props;
+  // states
+  const [query, setQuery] = useState("");
+  // store hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  // derived values
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
+
+  return (
+    <>
+      <div
+        className={cn("flex items-center gap-3 px-4 py-3.5", {
+          "items-start": response,
+        })}
+      >
+        <span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
+          <AiStar1Outline className="size-3" />
+        </span>
+        {response ? (
+          <div>
+            <RichTextEditor
+              editable={false}
+              displayConfig={{
+                fontSize: "small-font",
+              }}
+              id="editor-ai-response"
+              initialValue={response}
+              containerClassName="!p-0 border-none"
+              editorClassName="!pl-0"
+              workspaceId={workspaceId}
+              workspaceSlug={workspaceSlug}
+            />
+            <div className="mt-3 flex items-center gap-4">
+              <button
+                type="button"
+                className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
+                onClick={() => handleInsertText(false)}
+              >
+                Replace selection
+              </button>
+              <Tooltip label="Add to next line">
+                <button
+                  type="button"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
+                  onClick={() => handleInsertText(true)}
+                >
+                  <CornerRightDownOutline className="size-4 text-tertiary" />
+                </button>
+              </Tooltip>
+              <Tooltip label="Re-generate response">
+                <button
+                  type="button"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRegenerate();
+                  }}
+                  disabled={isRegenerating}
+                >
+                  <RefreshOutline
+                    className={cn("size-4 text-tertiary", {
+                      "animate-spin": isRegenerating,
+                    })}
+                  />
+                </button>
+              </Tooltip>
+            </div>
+          </div>
+        ) : (
+          <p className="text-13 text-secondary">AI is answering...</p>
+        )}
+      </div>
+      <div className="px-4 py-3">
+        <div className="flex items-center gap-2 rounded-md border border-subtle p-2">
+          <span className="grid size-3 flex-shrink-0 place-items-center">
+            <AiStar1Outline className="size-3 text-secondary" />
+          </span>
+          <input
+            type="text"
+            className="w-full border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Tell AI what to do..."
+          />
+          <span className="grid size-4 flex-shrink-0 place-items-center">
+            <CircleArrowUp className="size-4 text-secondary" />
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/pages/editor/ai/index.ts b/apps/web/core/components/pages/editor/ai/index.ts
new file mode 100644
index 0000000..c2d7f64
--- /dev/null
+++ b/apps/web/core/components/pages/editor/ai/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./ask-pi-menu";
+export * from "./menu";
diff --git a/apps/web/core/components/pages/editor/ai/menu.tsx b/apps/web/core/components/pages/editor/ai/menu.tsx
new file mode 100644
index 0000000..f382819
--- /dev/null
+++ b/apps/web/core/components/pages/editor/ai/menu.tsx
@@ -0,0 +1,313 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import {
+  AiStar1Outline,
+  ChevronRightOutline,
+  CornerRightDownOutline,
+  RefreshOutline,
+  WarningTriangleOutline,
+} from "@makeplane/propel/icons";
+// plane editor
+import type { EditorRefApi } from "@plane/editor";
+// plane ui
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// components
+import { cn } from "@plane/utils";
+import { RichTextEditor } from "@/components/editor/rich-text";
+// plane web constants
+import { AI_EDITOR_TASKS, LOADING_TEXTS } from "@plane/constants";
+// plane web services
+import type { TTaskPayload } from "@/services/ai.service";
+import { AIService } from "@/services/ai.service";
+import { AskPiMenu } from "./ask-pi-menu";
+const aiService = new AIService();
+
+type Props = {
+  editorRef: EditorRefApi | null;
+  isOpen: boolean;
+  onClose: () => void;
+  workspaceId: string;
+  workspaceSlug: string;
+};
+
+const MENU_ITEMS: {
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  key: AI_EDITOR_TASKS;
+  label: string;
+}[] = [
+  {
+    key: AI_EDITOR_TASKS.ASK_ANYTHING,
+    icon: AiStar1Outline,
+    label: "Ask Pi",
+  },
+];
+
+const TONES_LIST = [
+  {
+    key: "default",
+    label: "Default",
+    casual_score: 5,
+    formal_score: 5,
+  },
+  {
+    key: "professional",
+    label: "💼 Professional",
+    casual_score: 0,
+    formal_score: 10,
+  },
+  {
+    key: "casual",
+    label: "😃 Casual",
+    casual_score: 10,
+    formal_score: 0,
+  },
+];
+
+export function EditorAIMenu(props: Props) {
+  const { editorRef, isOpen, onClose, workspaceId, workspaceSlug } = props;
+  // states
+  const [activeTask, setActiveTask] = useState<AI_EDITOR_TASKS | null>(null);
+  const [response, setResponse] = useState<string | undefined>(undefined);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  // refs
+  const responseContainerRef = useRef<HTMLDivElement>(null);
+  // params
+  const handleGenerateResponse = async (payload: TTaskPayload) => {
+    if (!workspaceSlug) return;
+    await aiService.performEditorTask(workspaceSlug.toString(), payload).then((res) => setResponse(res.response));
+  };
+  // handle task click
+  const handleClick = async (key: AI_EDITOR_TASKS) => {
+    const selection = editorRef?.getSelectedText();
+    if (!selection || activeTask === key) return;
+    setActiveTask(key);
+    if (key === AI_EDITOR_TASKS.ASK_ANYTHING) return;
+    setResponse(undefined);
+    setIsRegenerating(false);
+    await handleGenerateResponse({
+      task: key,
+      text_input: selection,
+    });
+  };
+  // handle re-generate response
+  const handleRegenerate = async () => {
+    const selection = editorRef?.getSelectedText();
+    if (!selection || !activeTask) return;
+    setIsRegenerating(true);
+    await handleGenerateResponse({
+      task: activeTask,
+      text_input: selection,
+    })
+      .then(() =>
+        responseContainerRef.current?.scrollTo({
+          top: 0,
+          behavior: "smooth",
+        })
+      )
+      .finally(() => setIsRegenerating(false));
+  };
+  // handle re-generate response
+  const handleToneChange = async (key: string) => {
+    const selectedTone = TONES_LIST.find((t) => t.key === key);
+    const selection = editorRef?.getSelectedText();
+    if (!selectedTone || !selection || !activeTask) return;
+    setResponse(undefined);
+    setIsRegenerating(false);
+    await handleGenerateResponse({
+      casual_score: selectedTone.casual_score,
+      formal_score: selectedTone.formal_score,
+      task: activeTask,
+      text_input: selection,
+    }).then(() =>
+      responseContainerRef.current?.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      })
+    );
+  };
+  // handle replace selected text with the response
+  const handleInsertText = (insertOnNextLine: boolean) => {
+    if (!response) return;
+    editorRef?.insertText(response, insertOnNextLine);
+    onClose();
+  };
+
+  // reset on close
+  useEffect(() => {
+    if (!isOpen) {
+      setActiveTask(null);
+      setResponse(undefined);
+    }
+  }, [isOpen]);
+
+  return (
+    <div
+      className={cn(
+        "flex w-[210px] flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
+        {
+          "w-[700px]": activeTask,
+        }
+      )}
+    >
+      <div
+        className={cn("flex max-h-72 w-full", {
+          "divide-x divide-subtle-1": activeTask,
+        })}
+      >
+        <div className="w-[210px] flex-shrink-0 overflow-y-auto px-2 py-2.5 transition-all">
+          {MENU_ITEMS.map((item) => {
+            const isActiveTask = activeTask === item.key;
+
+            return (
+              <button
+                key={item.key}
+                type="button"
+                className={cn(
+                  "flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-11 text-secondary transition-colors hover:bg-layer-1",
+                  {
+                    "bg-layer-1": isActiveTask,
+                  }
+                )}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleClick(item.key);
+                }}
+              >
+                <span className="flex flex-shrink-0 items-center gap-2 truncate">
+                  <item.icon className="size-3 flex-shrink-0" />
+                  {item.label}
+                </span>
+                <ChevronRightOutline
+                  className={cn("pointer-events-none size-3 flex-shrink-0 opacity-0 transition-opacity", {
+                    "pointer-events-auto opacity-100": isActiveTask,
+                  })}
+                />
+              </button>
+            );
+          })}
+        </div>
+        <div
+          ref={responseContainerRef}
+          className={cn("w-0 flex-shrink-0 overflow-hidden transition-all", {
+            "vertical-scrollbar scrollbar-sm w-[490px] overflow-auto": activeTask,
+          })}
+        >
+          {activeTask === AI_EDITOR_TASKS.ASK_ANYTHING ? (
+            <AskPiMenu
+              handleInsertText={handleInsertText}
+              handleRegenerate={handleRegenerate}
+              isRegenerating={isRegenerating}
+              response={response}
+              workspaceSlug={workspaceSlug}
+            />
+          ) : (
+            <>
+              <div
+                className={cn("flex items-center gap-3 px-4 py-3.5", {
+                  "items-start": response,
+                })}
+              >
+                <span className="grid size-7 flex-shrink-0 place-items-center rounded-full border border-subtle text-secondary">
+                  <AiStar1Outline className="size-3" />
+                </span>
+                {response ? (
+                  <div>
+                    <RichTextEditor
+                      displayConfig={{
+                        fontSize: "small-font",
+                      }}
+                      editable={false}
+                      id="editor-ai-response"
+                      initialValue={response}
+                      containerClassName="!p-0 border-none"
+                      editorClassName="!pl-0"
+                      workspaceId={workspaceId}
+                      workspaceSlug={workspaceSlug}
+                    />
+                    <div className="mt-3 flex items-center gap-4">
+                      <button
+                        type="button"
+                        className="rounded-sm p-1 text-13 font-medium text-tertiary outline-none hover:bg-layer-1"
+                        onClick={() => handleInsertText(false)}
+                      >
+                        Replace selection
+                      </button>
+                      <Tooltip label="Add to next line">
+                        <button
+                          type="button"
+                          className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
+                          onClick={() => handleInsertText(true)}
+                        >
+                          <CornerRightDownOutline className="size-4 text-tertiary" />
+                        </button>
+                      </Tooltip>
+                      <Tooltip label="Re-generate response">
+                        <button
+                          type="button"
+                          className="grid size-6 flex-shrink-0 place-items-center rounded-sm outline-none hover:bg-layer-1"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleRegenerate();
+                          }}
+                          disabled={isRegenerating}
+                        >
+                          <RefreshOutline
+                            className={cn("size-4 text-tertiary", {
+                              "animate-spin": isRegenerating,
+                            })}
+                          />
+                        </button>
+                      </Tooltip>
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-13 text-secondary">
+                    {activeTask ? LOADING_TEXTS[activeTask] : "Pi is writing"}...
+                  </p>
+                )}
+              </div>
+              <div className="sticky bottom-0 flex w-full items-center gap-2 bg-surface-1 py-2 pl-[54.8px]">
+                {TONES_LIST.map((tone) => (
+                  <button
+                    key={tone.key}
+                    type="button"
+                    className={cn(
+                      "rounded-sm bg-layer-1 p-1 text-11 font-medium text-secondary transition-colors outline-none",
+                      {
+                        "bg-accent-primary/20 text-accent-primary": tone.key === "default",
+                      }
+                    )}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleToneChange(tone.key);
+                    }}
+                  >
+                    {tone.label}
+                  </button>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {activeTask && (
+        <div className="flex items-center gap-2 rounded-b-md border-t border-subtle bg-surface-2 px-4 py-2 text-tertiary">
+          <span className="grid size-4 flex-shrink-0 place-items-center">
+            <WarningTriangleOutline className="size-3" />
+          </span>
+          <p className="flex-shrink-0 text-11 font-medium">
+            By using this feature, you consent to sharing the message with a 3rd party service.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/editor/editor-body.tsx b/apps/web/core/components/pages/editor/editor-body.tsx
new file mode 100644
index 0000000..0e4facc
--- /dev/null
+++ b/apps/web/core/components/pages/editor/editor-body.tsx
@@ -0,0 +1,312 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { LIVE_BASE_PATH, LIVE_BASE_URL } from "@plane/constants";
+import { CollaborativeDocumentEditorWithRef } from "@plane/editor";
+import type {
+  CollaborationState,
+  EditorRefApi,
+  EditorTitleRefApi,
+  TAIMenuProps,
+  TDisplayConfig,
+  TFileHandler,
+  TRealtimeConfig,
+  TServerHandler,
+} from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import type { TSearchEntityRequestPayload, TSearchResponse, TWebhookConnectionQueryParams } from "@plane/types";
+import { ERowVariant, Row } from "@plane/ui";
+import { cn, generateRandomColor, hslToHex } from "@plane/utils";
+// components
+import { EditorMentionsRoot } from "@/components/editor/embeds/mentions";
+// hooks
+import { useEditorMention } from "@/hooks/editor";
+import { useMember } from "@/hooks/store/use-member";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser } from "@/hooks/store/user";
+import { usePageFilters } from "@/hooks/use-page-filters";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
+// plane web imports
+import type { TCustomEventHandlers } from "@/hooks/use-realtime-page-events";
+import { useRealtimePageEvents } from "@/hooks/use-realtime-page-events";
+import type { TExtendedEditorExtensionsConfig } from "@/hooks/pages";
+import type { EPageStoreType } from "@/hooks/store";
+import { useEditorFlagging } from "@/hooks/use-editor-flagging";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageContentLoader } from "../loaders/page-content-loader";
+import { PageEditorHeaderRoot } from "./header";
+import { PageContentBrowser } from "./summary";
+import { EditorAIMenu } from "./ai/menu";
+
+export type TEditorBodyConfig = {
+  fileHandler: TFileHandler;
+};
+
+export type TEditorBodyHandlers = {
+  fetchEntity: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+  getRedirectionLink: (pageId?: string) => string;
+};
+
+type Props = {
+  config: TEditorBodyConfig;
+  editorReady: boolean;
+  editorForwardRef: React.RefObject<EditorRefApi | null>;
+  handleEditorReady: (status: boolean) => void;
+  handleOpenNavigationPane: () => void;
+  handlers: TEditorBodyHandlers;
+  isNavigationPaneOpen: boolean;
+  page: TPageInstance;
+  webhookConnectionParams: TWebhookConnectionQueryParams;
+  projectId?: string;
+  workspaceSlug: string;
+  storeType: EPageStoreType;
+  customRealtimeEventHandlers?: TCustomEventHandlers;
+  extendedEditorProps: TExtendedEditorExtensionsConfig;
+  isFetchingFallbackBinary?: boolean;
+  onCollaborationStateChange?: (state: CollaborationState) => void;
+};
+
+export const PageEditorBody = observer(function PageEditorBody(props: Props) {
+  const {
+    config,
+    editorForwardRef,
+    handleEditorReady,
+    handleOpenNavigationPane,
+    handlers,
+    isNavigationPaneOpen,
+    page,
+    storeType,
+    webhookConnectionParams,
+    projectId,
+    workspaceSlug,
+    extendedEditorProps,
+    isFetchingFallbackBinary,
+    onCollaborationStateChange,
+  } = props;
+  // refs
+  const titleEditorRef = useRef<EditorTitleRefApi>(null);
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { getWorkspaceBySlug } = useWorkspace();
+  const { getUserDetails } = useMember();
+  // derived values
+  const {
+    id: pageId,
+    isContentEditable,
+    editor: { editorRef, updateAssetsList },
+    setSyncingStatus,
+  } = page;
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
+  // use editor mention
+  const { fetchMentions } = useEditorMention({
+    enableAdvancedMentions: true,
+    searchEntity: handlers.fetchEntity,
+  });
+  // editor flaggings
+  const { document: documentEditorExtensions } = useEditorFlagging({
+    workspaceSlug,
+    projectId,
+    storeType,
+  });
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
+  });
+  // page filters
+  const { fontSize, fontStyle, isFullWidth } = usePageFilters();
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const displayConfig: TDisplayConfig = useMemo(
+    () => ({
+      fontSize,
+      fontStyle,
+      wideLayout: isFullWidth,
+    }),
+    [fontSize, fontStyle, isFullWidth]
+  );
+
+  // Use the new hook to handle page events
+  const { updatePageProperties } = useRealtimePageEvents({
+    storeType,
+    page,
+    getUserDetails,
+    handlers,
+  });
+
+  // Set syncing status when page changes and reset collaboration state
+  useEffect(() => {
+    setSyncingStatus("syncing");
+    onCollaborationStateChange?.({
+      stage: { kind: "connecting" },
+      isServerSynced: false,
+      isServerDisconnected: false,
+    });
+  }, [pageId, setSyncingStatus, onCollaborationStateChange]);
+
+  const getAIMenu = useCallback(
+    ({ isOpen, onClose }: TAIMenuProps) => (
+      <EditorAIMenu
+        editorRef={editorRef}
+        isOpen={isOpen}
+        onClose={onClose}
+        workspaceId={workspaceId}
+        workspaceSlug={workspaceSlug}
+      />
+    ),
+    [editorRef, workspaceId, workspaceSlug]
+  );
+
+  const serverHandler: TServerHandler = useMemo(
+    () => ({
+      onStateChange: (state) => {
+        // Pass full state to parent
+        onCollaborationStateChange?.(state);
+
+        // Map collaboration stage to UI syncing status
+        // Stage → UI mapping: disconnected → error | synced → synced | all others → syncing
+        if (state.stage.kind === "disconnected") {
+          setSyncingStatus("error");
+        } else if (state.stage.kind === "synced") {
+          setSyncingStatus("synced");
+        } else {
+          // initial, connecting, awaiting-sync, reconnecting → show as syncing
+          setSyncingStatus("syncing");
+        }
+      },
+    }),
+    [setSyncingStatus, onCollaborationStateChange]
+  );
+
+  const realtimeConfig: TRealtimeConfig | undefined = useMemo(() => {
+    // The collaboration URL is derived from window.location, so it can only be
+    // built on the client. There is no socket to connect to during SSR anyway —
+    // the config is recomputed on hydration.
+    if (typeof window === "undefined") return undefined;
+
+    // Construct the WebSocket Collaboration URL
+    try {
+      const LIVE_SERVER_BASE_URL = LIVE_BASE_URL?.trim() || window.location.origin;
+      const WS_LIVE_URL = new URL(LIVE_SERVER_BASE_URL);
+      const isSecureEnvironment = window.location.protocol === "https:";
+      WS_LIVE_URL.protocol = isSecureEnvironment ? "wss" : "ws";
+      WS_LIVE_URL.pathname = `${LIVE_BASE_PATH}/collaboration`;
+
+      // Append query parameters to the URL
+      Object.entries(webhookConnectionParams)
+        .filter(([_, value]) => value !== undefined && value !== null)
+        .forEach(([key, value]) => {
+          WS_LIVE_URL.searchParams.set(key, String(value));
+        });
+
+      // Construct realtime config
+      return {
+        url: WS_LIVE_URL.toString(),
+      };
+    } catch (error) {
+      console.error("Error creating realtime config", error);
+      return undefined;
+    }
+  }, [webhookConnectionParams]);
+
+  const userConfig = useMemo(
+    () => ({
+      id: currentUser?.id ?? "",
+      name: currentUser?.display_name ?? "",
+      color: hslToHex(generateRandomColor(currentUser?.id ?? "")),
+    }),
+    [currentUser?.display_name, currentUser?.id]
+  );
+
+  const blockWidthClassName = cn(
+    "mx-auto block w-full max-w-[720px] bg-transparent transition-all duration-200 ease-in-out",
+    {
+      "max-w-[1152px]": isFullWidth,
+    }
+  );
+
+  const isPageLoading = pageId === undefined || !realtimeConfig;
+
+  if (isPageLoading) return <PageContentLoader className={blockWidthClassName} />;
+
+  return (
+    <Row
+      className="vertical-scrollbar relative scrollbar-md flex size-full flex-col overflow-x-hidden overflow-y-auto duration-200"
+      variant={ERowVariant.HUGGING}
+    >
+      <div id="page-content-container" className="relative w-full flex-shrink-0">
+        {/* table of content */}
+        {!isNavigationPaneOpen && (
+          <div className="page-summary-container absolute top-[64px] right-0 z-[5] h-full">
+            <div className="sticky top-[72px]">
+              <div className="group/page-toc relative px-page-x">
+                {/* oxlint-disable-next-line jsx_a11y/click-events-have-key-events */}
+                <div
+                  className="max-h-[50vh] !cursor-pointer overflow-hidden"
+                  // oxlint-disable-next-line jsx_a11y/prefer-tag-over-role
+                  role="button"
+                  aria-label={t("page_navigation_pane.outline_floating_button")}
+                  onClick={handleOpenNavigationPane}
+                >
+                  <PageContentBrowser className="overflow-y-auto" editorRef={editorRef} showOutline />
+                </div>
+                <div className="vertical-scrollbar pointer-events-none absolute top-0 right-0 scrollbar-sm max-h-[70vh] w-52 translate-x-1/2 overflow-y-scroll rounded-sm bg-surface-2 p-4 whitespace-nowrap opacity-0 transition-all duration-300 group-hover/page-toc:pointer-events-auto group-hover/page-toc:-translate-x-1/4 group-hover/page-toc:opacity-100">
+                  <PageContentBrowser className="overflow-y-auto" editorRef={editorRef} />
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+        <div>
+          <div className="page-header-container group/page-header">
+            <div className={blockWidthClassName}>
+              <PageEditorHeaderRoot page={page} projectId={projectId} />
+            </div>
+          </div>
+          <CollaborativeDocumentEditorWithRef
+            editable={isContentEditable}
+            id={pageId}
+            fileHandler={config.fileHandler}
+            handleEditorReady={handleEditorReady}
+            ref={editorForwardRef}
+            titleRef={titleEditorRef}
+            containerClassName="h-full p-0 pb-64"
+            displayConfig={displayConfig}
+            getEditorMetaData={getEditorMetaData}
+            mentionHandler={{
+              searchCallback: async (query) => {
+                const res = await fetchMentions(query);
+                if (!res) throw new Error("Failed in fetching mentions");
+                return res;
+              },
+              // oxlint-disable-next-line no-shadow
+              renderComponent: (props) => <EditorMentionsRoot {...props} />,
+              getMentionedEntityDetails: (id: string) => ({ display_name: getUserDetails(id)?.display_name ?? "" }),
+            }}
+            updatePageProperties={updatePageProperties}
+            realtimeConfig={realtimeConfig}
+            serverHandler={serverHandler}
+            user={userConfig}
+            disabledExtensions={documentEditorExtensions.disabled}
+            flaggedExtensions={documentEditorExtensions.flagged}
+            aiHandler={{
+              menu: getAIMenu,
+            }}
+            onAssetChange={updateAssetsList}
+            extendedEditorProps={extendedEditorProps}
+            isFetchingFallbackBinary={isFetchingFallbackBinary}
+          />
+        </div>
+      </div>
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/pages/editor/header/index.ts b/apps/web/core/components/pages/editor/header/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/pages/editor/header/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/pages/editor/header/logo-picker.tsx b/apps/web/core/components/pages/editor/header/logo-picker.tsx
new file mode 100644
index 0000000..1f037fd
--- /dev/null
+++ b/apps/web/core/components/pages/editor/header/logo-picker.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { cn } from "@plane/utils";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  className?: string;
+  page: TPageInstance;
+};
+
+export const PageEditorHeaderLogoPicker = observer(function PageEditorHeaderLogoPicker(props: Props) {
+  const { className, page } = props;
+  // states
+  const [isLogoPickerOpen, setIsLogoPickerOpen] = useState(false);
+  // derived values
+  const { logo_props, isContentEditable, updatePageLogo } = page;
+  const isLogoSelected = !!logo_props?.in_use;
+
+  return (
+    <div
+      className={cn(className, "pointer-events-none max-h-0 transition-all duration-300 ease-linear", {
+        "pointer-events-auto max-h-[56px]": isLogoSelected,
+      })}
+    >
+      <EmojiPicker
+        isOpen={isLogoPickerOpen}
+        handleToggle={(val) => setIsLogoPickerOpen(val)}
+        className="flex items-center justify-center"
+        buttonClassName="flex items-center justify-center"
+        label={
+          <div
+            className={cn("-ml-[8px] grid size-[56px] place-items-center rounded-sm transition-colors", {
+              "hover:bg-layer-1": isContentEditable,
+            })}
+          >
+            {isLogoSelected && <Logo logo={logo_props} size={48} type="lucide" />}
+          </div>
+        }
+        onChange={updatePageLogo}
+        defaultIconColor={logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined}
+        defaultOpen={
+          logo_props?.in_use && logo_props?.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+        }
+        disabled={!isContentEditable}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/editor/header/root.tsx b/apps/web/core/components/pages/editor/header/root.tsx
new file mode 100644
index 0000000..05296b7
--- /dev/null
+++ b/apps/web/core/components/pages/editor/header/root.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { ReactionOutline } from "@makeplane/propel/icons";
+// plane imports
+import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
+import { cn } from "@plane/utils";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageEditorHeaderLogoPicker } from "./logo-picker";
+
+type Props = {
+  page: TPageInstance;
+  projectId?: string;
+};
+
+export const PageEditorHeaderRoot = observer(function PageEditorHeaderRoot(props: Props) {
+  const { page } = props;
+  // states
+  const [isLogoPickerOpen, setIsLogoPickerOpen] = useState(false);
+  // derived values
+  const { isContentEditable, logo_props, name, updatePageLogo } = page;
+  const isLogoSelected = !!logo_props?.in_use;
+  const isTitleEmpty = !name || name.trim() === "";
+
+  return (
+    <>
+      <div className="flex h-[48px] items-end text-left">
+        {!isLogoSelected && (
+          <div
+            className={cn("opacity-0 transition-all duration-200 group-hover/page-header:opacity-100", {
+              "opacity-100": isTitleEmpty,
+            })}
+          >
+            <EmojiPicker
+              isOpen={isLogoPickerOpen}
+              handleToggle={(val) => setIsLogoPickerOpen(val)}
+              className="flex items-center justify-center"
+              buttonClassName="flex items-center justify-center"
+              label={
+                <button
+                  type="button"
+                  className={cn(
+                    "flex items-center gap-1 rounded-sm p-1 text-13 font-medium text-tertiary transition-colors outline-none hover:bg-layer-1",
+                    {
+                      "bg-layer-1": isLogoPickerOpen,
+                    }
+                  )}
+                >
+                  <ReactionOutline className="size-4 flex-shrink-0" />
+                  Icon
+                </button>
+              }
+              onChange={updatePageLogo}
+              defaultIconColor={
+                logo_props?.in_use && logo_props.in_use === "icon" ? logo_props?.icon?.color : undefined
+              }
+              defaultOpen={
+                logo_props?.in_use && logo_props?.in_use === "emoji"
+                  ? EmojiIconPickerTypes.EMOJI
+                  : EmojiIconPickerTypes.ICON
+              }
+              disabled={!isContentEditable}
+            />
+          </div>
+        )}
+      </div>
+      <PageEditorHeaderLogoPicker className="mt-2 flex w-full flex-shrink-0" page={page} />
+    </>
+  );
+});
diff --git a/apps/web/core/components/pages/editor/page-root.tsx b/apps/web/core/components/pages/editor/page-root.tsx
new file mode 100644
index 0000000..dab67fe
--- /dev/null
+++ b/apps/web/core/components/pages/editor/page-root.tsx
@@ -0,0 +1,213 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { CollaborationState, EditorRefApi } from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import type { TDocumentPayload, TPage, TPageVersion, TWebhookConnectionQueryParams } from "@plane/types";
+// hooks
+import { usePageFallback } from "@/hooks/use-page-fallback";
+import type { PageUpdateHandler, TCustomEventHandlers } from "@/hooks/use-realtime-page-events";
+import { usePagesPaneExtensions, useExtendedEditorProps } from "@/hooks/pages";
+import type { EPageStoreType } from "@/hooks/store";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// ui
+import { Banner } from "@makeplane/propel/components/banner";
+// local imports
+import { PageNavigationPaneRoot } from "../navigation-pane";
+import { PageVersionsOverlay } from "../version";
+import { PagesVersionEditor } from "../version/editor";
+import { PageEditorBody } from "./editor-body";
+import type { TEditorBodyConfig, TEditorBodyHandlers } from "./editor-body";
+import { PageEditorToolbarRoot } from "./toolbar";
+
+export type TPageRootHandlers = {
+  create: (payload: Partial<TPage>) => Promise<Partial<TPage> | undefined>;
+  fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
+  fetchDescriptionBinary: () => Promise<ArrayBuffer>;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  restoreVersion: (pageId: string, versionId: string) => Promise<void>;
+  updateDescription: (document: TDocumentPayload) => Promise<void>;
+} & TEditorBodyHandlers;
+
+export type TPageRootConfig = TEditorBodyConfig;
+
+type TPageRootProps = {
+  config: TPageRootConfig;
+  handlers: TPageRootHandlers;
+  page: TPageInstance;
+  storeType: EPageStoreType;
+  webhookConnectionParams: TWebhookConnectionQueryParams;
+  projectId?: string;
+  workspaceSlug: string;
+  customRealtimeEventHandlers?: TCustomEventHandlers;
+};
+
+export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
+  const {
+    config,
+    handlers,
+    page,
+    projectId,
+    storeType,
+    webhookConnectionParams,
+    workspaceSlug,
+    customRealtimeEventHandlers,
+  } = props;
+  // states
+  const [editorReady, setEditorReady] = useState(false);
+  const [collaborationState, setCollaborationState] = useState<CollaborationState | null>(null);
+  const [showContentTooLargeBanner, setShowContentTooLargeBanner] = useState(false);
+  // translation
+  const { t } = useTranslation();
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // derived values
+  const {
+    isContentEditable,
+    editor: { setEditorRef },
+  } = page;
+  // page fallback
+  const { isFetchingFallbackBinary } = usePageFallback({
+    editorRef,
+    fetchPageDescription: handlers.fetchDescriptionBinary,
+    page,
+    collaborationState,
+    updatePageDescription: handlers.updateDescription,
+  });
+
+  const handleEditorReady = useCallback(
+    (status: boolean) => {
+      setEditorReady(status);
+      if (editorRef.current && !page.editor.editorRef) {
+        setEditorRef(editorRef.current);
+      }
+    },
+    [page.editor.editorRef, setEditorRef]
+  );
+
+  useEffect(() => {
+    const timer = setTimeout(() => setEditorRef(editorRef.current), 0);
+    return () => clearTimeout(timer);
+  }, [isContentEditable, setEditorRef]);
+
+  // Get extensions and navigation logic from hook
+  const {
+    editorExtensionHandlers,
+    navigationPaneExtensions,
+    handleOpenNavigationPane,
+    handleCloseNavigationPane,
+    isNavigationPaneOpen,
+  } = usePagesPaneExtensions({
+    page,
+    editorRef,
+  });
+
+  // Type-safe error handler for content too large errors
+  const errorHandler: PageUpdateHandler<"error"> = (params) => {
+    const { data } = params;
+
+    // Check if it's content too large error
+    if (data.error_code === "content_too_large") {
+      setShowContentTooLargeBanner(true);
+    }
+
+    // Call original error handler if exists
+    customRealtimeEventHandlers?.error?.(params);
+  };
+
+  const mergedCustomEventHandlers: TCustomEventHandlers = {
+    ...customRealtimeEventHandlers,
+    error: errorHandler,
+  };
+
+  // Get extended editor extensions configuration
+  const extendedEditorProps = useExtendedEditorProps({
+    workspaceSlug,
+    page,
+    storeType,
+    fetchEntity: handlers.fetchEntity,
+    getRedirectionLink: handlers.getRedirectionLink,
+    extensionHandlers: editorExtensionHandlers,
+    projectId,
+  });
+
+  const handleRestoreVersion = useCallback(
+    async (descriptionHTML: string) => {
+      editorRef.current?.clearEditor();
+      editorRef.current?.setEditorValue(descriptionHTML);
+    },
+    [editorRef]
+  );
+
+  // reset editor ref on unmount
+  useEffect(
+    () => () => {
+      setEditorRef(null);
+    },
+    [setEditorRef]
+  );
+
+  return (
+    <div className="relative flex size-full overflow-hidden transition-all duration-300 ease-in-out">
+      <div className="flex size-full flex-col overflow-hidden">
+        <PageVersionsOverlay
+          editorComponent={PagesVersionEditor}
+          fetchVersionDetails={handlers.fetchVersionDetails}
+          handleRestore={handleRestoreVersion}
+          pageId={page.id ?? ""}
+          restoreEnabled={isContentEditable}
+          storeType={storeType}
+        />
+        <PageEditorToolbarRoot
+          handleOpenNavigationPane={handleOpenNavigationPane}
+          isNavigationPaneOpen={isNavigationPaneOpen}
+          page={page}
+        />
+        {showContentTooLargeBanner && (
+          <Banner
+            placement="page"
+            variant="warning"
+            title={t("page_content_limit_banner.message")}
+            render={<div className="px-page-x" />}
+          />
+        )}
+        <PageEditorBody
+          config={config}
+          customRealtimeEventHandlers={mergedCustomEventHandlers}
+          editorReady={editorReady}
+          editorForwardRef={editorRef}
+          handleEditorReady={handleEditorReady}
+          handleOpenNavigationPane={handleOpenNavigationPane}
+          handlers={handlers}
+          isNavigationPaneOpen={isNavigationPaneOpen}
+          page={page}
+          projectId={projectId}
+          storeType={storeType}
+          webhookConnectionParams={webhookConnectionParams}
+          workspaceSlug={workspaceSlug}
+          extendedEditorProps={extendedEditorProps}
+          isFetchingFallbackBinary={isFetchingFallbackBinary}
+          onCollaborationStateChange={setCollaborationState}
+        />
+      </div>
+      <PageNavigationPaneRoot
+        storeType={storeType}
+        handleClose={handleCloseNavigationPane}
+        isNavigationPaneOpen={isNavigationPaneOpen}
+        page={page}
+        versionHistory={{
+          fetchAllVersions: handlers.fetchAllVersions,
+          fetchVersionDetails: handlers.fetchVersionDetails,
+        }}
+        extensions={navigationPaneExtensions}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/editor/summary/content-browser.tsx b/apps/web/core/components/pages/editor/summary/content-browser.tsx
new file mode 100644
index 0000000..b739660
--- /dev/null
+++ b/apps/web/core/components/pages/editor/summary/content-browser.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useCallback } from "react";
+// plane imports
+import type { EditorRefApi, IMarking } from "@plane/editor";
+import { cn } from "@plane/utils";
+// components
+import type { THeadingComponentProps } from "./heading-components";
+import { OutlineHeading1, OutlineHeading2, OutlineHeading3 } from "./heading-components";
+
+type Props = {
+  className?: string;
+  emptyState?: React.ReactNode;
+  editorRef: EditorRefApi | null;
+  setSidePeekVisible?: (sidePeekState: boolean) => void;
+  showOutline?: boolean;
+};
+
+export function PageContentBrowser(props: Props) {
+  const { className, editorRef, emptyState, setSidePeekVisible, showOutline = false } = props;
+  // states
+  const [headings, setHeadings] = useState<IMarking[]>([]);
+
+  useEffect(() => {
+    const unsubscribe = editorRef?.onHeadingChange(setHeadings);
+    // for initial render of this component to get the editor headings
+    setHeadings(editorRef?.getHeadings() ?? []);
+    return () => {
+      unsubscribe?.();
+    };
+  }, [editorRef]);
+
+  const handleOnClick = useCallback(
+    (marking: IMarking) => {
+      editorRef?.scrollSummary(marking);
+      setSidePeekVisible?.(false);
+    },
+    [editorRef, setSidePeekVisible]
+  );
+
+  const HeadingComponent: {
+    [key: number]: React.FC<THeadingComponentProps>;
+  } = {
+    1: OutlineHeading1,
+    2: OutlineHeading2,
+    3: OutlineHeading3,
+  };
+
+  if (headings.length === 0) return emptyState ?? null;
+
+  return (
+    <div
+      className={cn(
+        "mt-2 flex h-full flex-col items-start gap-y-1",
+        {
+          "gap-y-2": showOutline,
+        },
+        className
+      )}
+    >
+      {headings.map((marking) => {
+        const Component = HeadingComponent[marking.level];
+        if (!Component) return null;
+        if (showOutline === true)
+          return (
+            <div
+              key={`${marking.level}-${marking.sequence}`}
+              className="h-0.5 flex-shrink-0 self-end rounded-xs bg-layer-3"
+              style={{
+                width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px",
+              }}
+            />
+          );
+        return (
+          <Component
+            key={`${marking.level}-${marking.sequence}`}
+            marking={marking}
+            onClick={() => handleOnClick(marking)}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/editor/summary/heading-components.tsx b/apps/web/core/components/pages/editor/summary/heading-components.tsx
new file mode 100644
index 0000000..2ebca76
--- /dev/null
+++ b/apps/web/core/components/pages/editor/summary/heading-components.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IMarking } from "@plane/editor";
+import { cn } from "@plane/utils";
+
+export type THeadingComponentProps = {
+  marking: IMarking;
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+
+const COMMON_CLASSNAME =
+  "flex-shrink-0 w-full py-1 text-left font-medium text-tertiary hover:text-accent-primary truncate transition-colors";
+
+export function OutlineHeading1({ marking, onClick }: THeadingComponentProps) {
+  return (
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "pl-1 text-13")}>
+      {marking.text}
+    </button>
+  );
+}
+
+export function OutlineHeading2({ marking, onClick }: THeadingComponentProps) {
+  return (
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "pl-2 text-11")}>
+      {marking.text}
+    </button>
+  );
+}
+
+export function OutlineHeading3({ marking, onClick }: THeadingComponentProps) {
+  return (
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "pl-4 text-11")}>
+      {marking.text}
+    </button>
+  );
+}
diff --git a/apps/web/core/components/pages/editor/summary/index.ts b/apps/web/core/components/pages/editor/summary/index.ts
new file mode 100644
index 0000000..17a5415
--- /dev/null
+++ b/apps/web/core/components/pages/editor/summary/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./content-browser";
diff --git a/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
new file mode 100644
index 0000000..93cdc45
--- /dev/null
+++ b/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { memo } from "react";
+import { Ban } from "lucide-react";
+import { TextOutline } from "@makeplane/propel/icons";
+import { Popover } from "@headlessui/react";
+// plane editor
+import { COLORS_LIST } from "@plane/editor";
+import type { TEditorCommands } from "@plane/editor";
+// helpers
+import { cn } from "@plane/utils";
+
+type Props = {
+  handleColorSelect: (
+    key: Extract<TEditorCommands, "text-color" | "background-color">,
+    color: string | undefined
+  ) => void;
+  isColorActive: (
+    key: Extract<TEditorCommands, "text-color" | "background-color">,
+    color: string | undefined
+  ) => boolean;
+};
+
+export const ColorDropdown = memo(function ColorDropdown(props: Props) {
+  const { handleColorSelect, isColorActive } = props;
+
+  const activeTextColor = COLORS_LIST.find((c) => isColorActive("text-color", c.key));
+  const activeBackgroundColor = COLORS_LIST.find((c) => isColorActive("background-color", c.key));
+
+  return (
+    <Popover as="div" className="h-7 px-2">
+      {({ open }) => (
+        <>
+          <Popover.Button
+            type="button"
+            className={cn(
+              "flex h-7 items-center gap-1.5 rounded-sm px-2 text-13 outline-none",
+              "text-tertiary hover:bg-layer-1",
+              {
+                "bg-layer-1 text-primary": open,
+              }
+            )}
+          >
+            Color
+            <span
+              className={cn("grid size-6 shrink-0 place-items-center rounded-sm border-[0.5px] border-strong", {
+                "bg-surface-1": !activeBackgroundColor,
+              })}
+              style={{
+                backgroundColor: activeBackgroundColor ? activeBackgroundColor.backgroundColor : "transparent",
+              }}
+            >
+              <TextOutline
+                className={cn("size-3.5", {
+                  "text-primary": !activeTextColor,
+                })}
+                style={{
+                  color: activeTextColor ? activeTextColor.textColor : "inherit",
+                }}
+              />
+            </span>
+          </Popover.Button>
+          <Popover.Panel
+            as="div"
+            className="fixed z-20 mt-1 space-y-2 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200"
+          >
+            <div className="space-y-1.5">
+              <p className="text-11 font-semibold text-tertiary">Text colors</p>
+              <div className="flex items-center gap-2">
+                {COLORS_LIST.map((color) => (
+                  <button
+                    key={color.key}
+                    type="button"
+                    className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
+                    style={{
+                      backgroundColor: color.textColor,
+                    }}
+                    onClick={() => handleColorSelect("text-color", color.key)}
+                  />
+                ))}
+                <button
+                  type="button"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
+                  onClick={() => handleColorSelect("text-color", undefined)}
+                >
+                  <Ban className="size-4" />
+                </button>
+              </div>
+            </div>
+            <div className="space-y-1.5">
+              <p className="text-11 font-semibold text-tertiary">Background colors</p>
+              <div className="flex items-center gap-2">
+                {COLORS_LIST.map((color) => (
+                  <button
+                    key={color.key}
+                    type="button"
+                    className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
+                    style={{
+                      backgroundColor: color.backgroundColor,
+                    }}
+                    onClick={() => handleColorSelect("background-color", color.key)}
+                  />
+                ))}
+                <button
+                  type="button"
+                  className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
+                  onClick={() => handleColorSelect("background-color", undefined)}
+                >
+                  <Ban className="size-4" />
+                </button>
+              </div>
+            </div>
+          </Popover.Panel>
+        </>
+      )}
+    </Popover>
+  );
+});
+
+ColorDropdown.displayName = "ColorDropdown";
diff --git a/apps/web/core/components/pages/editor/toolbar/index.ts b/apps/web/core/components/pages/editor/toolbar/index.ts
new file mode 100644
index 0000000..bd1654c
--- /dev/null
+++ b/apps/web/core/components/pages/editor/toolbar/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./color-dropdown";
+export * from "./options-dropdown";
+export * from "./root";
+export * from "./toolbar";
diff --git a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
new file mode 100644
index 0000000..cafe042
--- /dev/null
+++ b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { ClipboardOutline, ExportOutline, HistoryOutline } from "@makeplane/propel/icons";
+// plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Switch } from "@makeplane/propel/components/switch";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePageFilters } from "@/hooks/use-page-filters";
+import { useQueryParams } from "@/hooks/use-query-params";
+// plane web imports
+import type { TPageNavigationPaneTab } from "@/components/pages/navigation-pane/tab-panels";
+import type { EPageStoreType } from "@/hooks/store";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageActions } from "../../dropdowns";
+import { ExportPageModal } from "../../modals/export-page-modal";
+import { PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM } from "../../navigation-pane";
+
+type Props = {
+  page: TPageInstance;
+  storeType: EPageStoreType;
+};
+
+export const PageOptionsDropdown = observer(function PageOptionsDropdown(props: Props) {
+  const { page, storeType } = props;
+  // states
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
+  // navigation
+  const router = useAppRouter();
+  // store values
+  const {
+    name,
+    isContentEditable,
+    editor: { editorRef },
+  } = page;
+  // page filters
+  const { isFullWidth, handleFullWidth, isStickyToolbarEnabled, handleStickyToolbar } = usePageFilters();
+  // query params
+  const { updateQueryParams } = useQueryParams();
+  // menu items list
+  const EXTRA_MENU_OPTIONS = useMemo(
+    function EXTRA_MENU_OPTIONS(): React.ComponentProps<typeof PageActions>["extraOptions"] {
+      return [
+        {
+          key: "full-screen",
+          action: () => handleFullWidth(!isFullWidth),
+          customContent: (
+            <>
+              Full width
+              <Switch size="sm" checked={isFullWidth} onCheckedChange={() => {}} aria-label="Full width" />
+            </>
+          ),
+          className: "flex items-center justify-between gap-2",
+        },
+        {
+          key: "sticky-toolbar",
+          action: () => handleStickyToolbar(!isStickyToolbarEnabled),
+          customContent: (
+            <>
+              Sticky toolbar
+              <Switch
+                size="sm"
+                checked={isStickyToolbarEnabled}
+                onCheckedChange={() => {}}
+                aria-label="Sticky toolbar"
+              />
+            </>
+          ),
+          className: "flex items-center justify-between gap-2",
+          shouldRender: isContentEditable,
+        },
+        {
+          key: "copy-markdown",
+          action: () => {
+            if (!editorRef) return;
+            editorRef.copyMarkdownToClipboard();
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Markdown copied to clipboard.",
+            });
+          },
+          title: "Copy markdown",
+          icon: ClipboardOutline,
+          shouldRender: true,
+        },
+        {
+          key: "version-history",
+          action: () => {
+            // update query param to show info tab in navigation pane
+            const updatedRoute = updateQueryParams({
+              paramsToAdd: {
+                [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: "info" satisfies TPageNavigationPaneTab,
+              },
+            });
+            router.push(updatedRoute);
+          },
+          title: "Version history",
+          icon: HistoryOutline,
+          shouldRender: true,
+        },
+        {
+          key: "export",
+          action: () => setIsExportModalOpen(true),
+          title: "Export",
+          icon: ExportOutline,
+          shouldRender: true,
+        },
+      ];
+    },
+    [
+      handleFullWidth,
+      isFullWidth,
+      handleStickyToolbar,
+      isStickyToolbarEnabled,
+      isContentEditable,
+      editorRef,
+      updateQueryParams,
+      router,
+      setIsExportModalOpen,
+    ]
+  );
+
+  return (
+    <>
+      <ExportPageModal
+        editorRef={editorRef}
+        isOpen={isExportModalOpen}
+        onClose={() => setIsExportModalOpen(false)}
+        pageTitle={name ?? ""}
+      />
+      <PageActions
+        extraOptions={EXTRA_MENU_OPTIONS}
+        optionsOrder={[
+          "full-screen",
+          "sticky-toolbar",
+          "copy-markdown",
+          "version-history",
+          "make-a-copy",
+          "archive-restore",
+          "delete",
+          "toggle-access",
+          "export",
+        ]}
+        page={page}
+        storeType={storeType}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/pages/editor/toolbar/root.tsx b/apps/web/core/components/pages/editor/toolbar/root.tsx
new file mode 100644
index 0000000..f10dd51
--- /dev/null
+++ b/apps/web/core/components/pages/editor/toolbar/root.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { RightSidePaneOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// components
+import { PageToolbar } from "@/components/pages/editor/toolbar";
+// hooks
+import { usePageFilters } from "@/hooks/use-page-filters";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  handleOpenNavigationPane: () => void;
+  isNavigationPaneOpen: boolean;
+  page: TPageInstance;
+};
+
+export const PageEditorToolbarRoot = observer(function PageEditorToolbarRoot(props: Props) {
+  const { handleOpenNavigationPane, isNavigationPaneOpen, page } = props;
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const {
+    isContentEditable,
+    editor: { editorRef },
+  } = page;
+  // page filters
+  const { isFullWidth, isStickyToolbarEnabled } = usePageFilters();
+  // derived values
+  const shouldHideToolbar = !isStickyToolbarEnabled || !isContentEditable;
+
+  return (
+    <>
+      <div
+        id="page-toolbar-container"
+        className={cn("max-h-[52px] overflow-auto transition-all duration-300 ease-linear", {
+          "max-h-0 overflow-hidden": shouldHideToolbar,
+        })}
+      >
+        <div
+          className={cn(
+            "page-toolbar-content relative hidden min-h-[52px] items-center px-page-x transition-all duration-200 ease-in-out md:flex",
+            {
+              "wide-layout": isFullWidth,
+            }
+          )}
+        >
+          <div className="flex w-full max-w-full items-center justify-between">
+            <div className="flex-1">{editorRef && <PageToolbar editorRef={editorRef} />}</div>
+            <div className="flex items-center gap-2">
+              {!isNavigationPaneOpen && (
+                <button
+                  type="button"
+                  className="grid size-6 shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-transparent-hover hover:text-primary"
+                  onClick={handleOpenNavigationPane}
+                >
+                  <RightSidePaneOutline className="size-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      {shouldHideToolbar && (
+        <div className="absolute top-0 right-0 z-10 flex h-[52px] items-center px-page-x">
+          {!isNavigationPaneOpen && (
+            <Tooltip label={t("page_navigation_pane.open_button")}>
+              <button
+                type="button"
+                className="grid size-6 shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-transparent-hover hover:text-primary"
+                onClick={handleOpenNavigationPane}
+                aria-label={t("page_navigation_pane.open_button")}
+              >
+                <RightSidePaneOutline className="size-3.5" />
+              </button>
+            </Tooltip>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
new file mode 100644
index 0000000..92a0371
--- /dev/null
+++ b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
@@ -0,0 +1,189 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState, useCallback } from "react";
+import type { EditorRefApi } from "@plane/editor";
+// plane imports
+import { ChevronDownOutline, TickOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// constants
+import type { ToolbarMenuItem } from "@plane/editor";
+import { TOOLBAR_ITEMS, TYPOGRAPHY_ITEMS } from "@plane/editor";
+// local imports
+import { ColorDropdown } from "./color-dropdown";
+
+type Props = {
+  editorRef: EditorRefApi;
+};
+
+type ToolbarButtonProps = {
+  item: ToolbarMenuItem;
+  isActive: boolean;
+  executeCommand: EditorRefApi["executeMenuItemCommand"];
+};
+
+const ToolbarButton = React.memo(function ToolbarButton(props: ToolbarButtonProps) {
+  const { item, isActive, executeCommand } = props;
+
+  return (
+    <Tooltip label={item.name} shortcut={item.shortcut?.join(" + ")}>
+      <button
+        type="button"
+        onClick={() =>
+          // TODO: update this while toolbar homogenization
+          // @ts-expect-error type mismatch here
+          executeCommand({
+            itemKey: item.itemKey,
+            ...item.extraProps,
+          })
+        }
+        className={cn("grid size-7 shrink-0 place-items-center rounded-sm text-tertiary", {
+          "bg-layer-transparent-selected text-primary hover:bg-layer-transparent-selected": isActive,
+          "hover:bg-layer-transparent-hover": !isActive,
+        })}
+      >
+        <item.icon
+          className={cn("size-4 transition-transform duration-200", {
+            "text-primary": isActive,
+          })}
+        />
+      </button>
+    </Tooltip>
+  );
+});
+
+ToolbarButton.displayName = "ToolbarButton";
+
+const toolbarItems = TOOLBAR_ITEMS.document;
+
+export function PageToolbar(props: Props) {
+  const { editorRef } = props;
+  // states
+  const [activeStates, setActiveStates] = useState<Record<string, boolean>>(() => {
+    const initialStates: Record<string, boolean> = {};
+    Object.values(toolbarItems)
+      .flat()
+      .forEach((item) => {
+        // TODO: update this while toolbar homogenization
+        // @ts-expect-error type mismatch here
+        initialStates[item.renderKey] = editorRef.isMenuItemActive({
+          itemKey: item.itemKey,
+          ...item.extraProps,
+        });
+      });
+    return initialStates;
+  });
+
+  const [isTypographyMenuOpen, setIsTypographyMenuOpen] = useState(false);
+
+  const updateActiveStates = useCallback(() => {
+    const newActiveStates: Record<string, boolean> = {};
+    Object.values(toolbarItems)
+      .flat()
+      .forEach((item) => {
+        // TODO: update this while toolbar homogenization
+        // @ts-expect-error type mismatch here
+        newActiveStates[item.renderKey] = editorRef.isMenuItemActive({
+          itemKey: item.itemKey,
+          ...item.extraProps,
+        });
+      });
+    setActiveStates(newActiveStates);
+  }, [editorRef]);
+
+  useEffect(() => {
+    const unsubscribe = editorRef.onStateChange(updateActiveStates);
+    return () => unsubscribe();
+  }, [editorRef, updateActiveStates]);
+
+  const activeTypography = TYPOGRAPHY_ITEMS.find((item) =>
+    editorRef.isMenuItemActive({
+      itemKey: item.itemKey,
+      ...item.extraProps,
+    })
+  );
+
+  return (
+    <div className="animate-in fade-in flex items-center divide-x divide-subtle-1 overflow-x-scroll duration-200">
+      <CustomMenu
+        customButton={
+          <span
+            className={cn(
+              "flex h-7 w-24 items-center justify-between gap-2 rounded-sm border-[0.5px] border-strong px-2 text-left text-13 whitespace-nowrap",
+              {
+                "bg-layer-1-selected text-primary": isTypographyMenuOpen,
+                "text-tertiary hover:bg-layer-1-hover": !isTypographyMenuOpen,
+              }
+            )}
+          >
+            {activeTypography?.name || "Text"}
+            <ChevronDownOutline className="size-3 shrink-0" />
+          </span>
+        }
+        className="pr-2"
+        placement="bottom-start"
+        closeOnSelect
+        maxHeight="lg"
+        menuButtonOnClick={() => setIsTypographyMenuOpen((prev) => !prev)}
+        onMenuClose={() => setIsTypographyMenuOpen(false)}
+      >
+        {TYPOGRAPHY_ITEMS.map((item) => (
+          <CustomMenu.MenuItem
+            key={item.renderKey}
+            className={cn("flex items-center justify-between gap-2", {
+              "bg-layer-transparent-selected text-primary": activeTypography?.itemKey === item.itemKey,
+              "hover:bg-layer-transparent-hover": !(activeTypography?.itemKey === item.itemKey),
+            })}
+            onClick={() => {
+              if (activeTypography?.itemKey !== item.itemKey) {
+                editorRef.executeMenuItemCommand({
+                  itemKey: item.itemKey,
+                  ...item.extraProps,
+                });
+              }
+            }}
+          >
+            <span className="flex items-center gap-2">
+              <item.icon className="size-3" />
+              {item.name}
+            </span>
+            {activeTypography?.itemKey === item.itemKey && <TickOutline className="size-3 shrink-0 text-tertiary" />}
+          </CustomMenu.MenuItem>
+        ))}
+      </CustomMenu>
+      <div className="shrink-0">
+        <ColorDropdown
+          handleColorSelect={(key, color) =>
+            editorRef.executeMenuItemCommand({
+              itemKey: key,
+              color,
+            })
+          }
+          isColorActive={(key, color) =>
+            editorRef.isMenuItemActive({
+              itemKey: key,
+              color,
+            })
+          }
+        />
+      </div>
+      {Object.keys(toolbarItems).map((key) => (
+        <div key={key} className="flex items-center gap-0.5 px-2 first:pl-0 last:pr-0">
+          {toolbarItems[key].map((item) => (
+            <ToolbarButton
+              key={item.renderKey}
+              item={item}
+              isActive={activeStates[item.renderKey]}
+              executeCommand={editorRef.executeMenuItemCommand}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/header/actions.tsx b/apps/web/core/components/pages/header/actions.tsx
new file mode 100644
index 0000000..53419e1
--- /dev/null
+++ b/apps/web/core/components/pages/header/actions.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane web hooks
+import type { EPageStoreType } from "@/hooks/store";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageOptionsDropdown } from "../editor/toolbar";
+import { PageArchivedBadge } from "./archived-badge";
+import { PageCopyLinkControl } from "./copy-link-control";
+import { PageFavoriteControl } from "./favorite-control";
+import { PageOfflineBadge } from "./offline-badge";
+import { PageLockControl } from "./lock-control";
+
+type Props = {
+  page: TPageInstance;
+  storeType: EPageStoreType;
+};
+
+export const PageHeaderActions = observer(function PageHeaderActions(props: Props) {
+  const { page, storeType } = props;
+
+  return (
+    <div className="flex items-center gap-1">
+      <PageArchivedBadge page={page} />
+      <PageOfflineBadge page={page} />
+      <PageLockControl page={page} />
+      <PageCopyLinkControl page={page} />
+      <PageFavoriteControl page={page} />
+      <PageOptionsDropdown page={page} storeType={storeType} />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/header/archived-badge.tsx b/apps/web/core/components/pages/header/archived-badge.tsx
new file mode 100644
index 0000000..ba77f4f
--- /dev/null
+++ b/apps/web/core/components/pages/header/archived-badge.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { ArchiveOutline } from "@makeplane/propel/icons";
+import { renderFormattedDate } from "@plane/utils";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageArchivedBadge = observer(function PageArchivedBadge({ page }: Props) {
+  if (!page.archived_at) return null;
+
+  return (
+    <div className="flex h-6 flex-shrink-0 items-center gap-1 rounded-sm bg-accent-primary/20 px-2 text-accent-primary">
+      <ArchiveOutline className="size-3.5 flex-shrink-0" />
+      <span className="text-11 font-medium">Archived at {renderFormattedDate(page.archived_at)}</span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/header/copy-link-control.tsx b/apps/web/core/components/pages/header/copy-link-control.tsx
new file mode 100644
index 0000000..4773d9b
--- /dev/null
+++ b/apps/web/core/components/pages/header/copy-link-control.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef, useEffect, useCallback } from "react";
+import { observer } from "mobx-react";
+
+import { LinkOutline, TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { IconButton } from "@plane/propel/icon-button";
+import { cn } from "@plane/utils";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageCopyLinkControl = observer(function PageCopyLinkControl({ page }: Props) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // page operations
+  const { pageOperations } = usePageOperations({
+    page,
+  });
+
+  // Cleanup timer on unmount
+  useEffect(
+    () => () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    },
+    []
+  );
+
+  const handleCopy = useCallback(() => {
+    pageOperations.copyLink();
+    setIsCopied(true);
+
+    // Clear previous timer if it exists
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    // Set new timer
+    timerRef.current = setTimeout(() => {
+      setIsCopied(false);
+      timerRef.current = null;
+    }, 1000);
+  }, [pageOperations]);
+
+  return (
+    <Tooltip label={isCopied ? "Copied!" : "Copy link"} side="bottom">
+      <IconButton
+        variant="ghost"
+        size="lg"
+        icon={isCopied ? TickOutline : LinkOutline}
+        onClick={handleCopy}
+        aria-label={isCopied ? "Copied link" : "Copy link"}
+        className={cn(isCopied && "text-success-primary")}
+      />
+    </Tooltip>
+  );
+});
diff --git a/apps/web/core/components/pages/header/favorite-control.tsx b/apps/web/core/components/pages/header/favorite-control.tsx
new file mode 100644
index 0000000..e87886e
--- /dev/null
+++ b/apps/web/core/components/pages/header/favorite-control.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { StarOutline } from "@makeplane/propel/icons";
+// ui
+import { IconButton } from "@plane/propel/icon-button";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageFavoriteControl = observer(function PageFavoriteControl({ page }: Props) {
+  // derived values
+  const { is_favorite, canCurrentUserFavoritePage } = page;
+  // page operations
+  const { pageOperations } = usePageOperations({
+    page,
+  });
+
+  if (!canCurrentUserFavoritePage) return null;
+
+  return (
+    <IconButton
+      variant="ghost"
+      size="lg"
+      icon={StarOutline}
+      onClick={() => {
+        pageOperations.toggleFavorite();
+      }}
+      aria-label={is_favorite ? "Remove favorite" : "Add to favorites"}
+      className={
+        is_favorite ? "[&_svg]:fill-(--color-label-yellow-icon) [&_svg]:stroke-(--color-label-yellow-icon)" : ""
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/pages/header/index.ts b/apps/web/core/components/pages/header/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/pages/header/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/pages/header/lock-control.tsx b/apps/web/core/components/pages/header/lock-control.tsx
new file mode 100644
index 0000000..bc368a5
--- /dev/null
+++ b/apps/web/core/components/pages/header/lock-control.tsx
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import { LockedOutline, UnlockedOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+// Define our lock display states, renaming "icon-only" to "neutral"
+type LockDisplayState = "neutral" | "locked" | "unlocked";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageLockControl = observer(function PageLockControl({ page }: Props) {
+  // Initial state: if locked, then "locked", otherwise default to "neutral"
+  const [displayState, setDisplayState] = useState<LockDisplayState>(page.is_locked ? "locked" : "neutral");
+  // derived values
+  const { canCurrentUserLockPage, is_locked } = page;
+  // Ref for the transition timer
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Ref to store the previous value of isLocked for detecting transitions
+  const prevLockedRef = useRef(is_locked);
+  // page operations
+  const {
+    pageOperations: { toggleLock },
+  } = usePageOperations({
+    page,
+  });
+
+  // Cleanup any running timer on unmount
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+
+  // Update display state when isLocked changes
+  useEffect(() => {
+    // Clear any previous timer to avoid overlapping transitions
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+
+    // Transition logic:
+    // If locked, ensure the display state is "locked"
+    // If unlocked after being locked, show "unlocked" briefly then revert to "neutral"
+    if (is_locked) {
+      setDisplayState("locked");
+    } else if (prevLockedRef.current === true) {
+      setDisplayState("unlocked");
+      timerRef.current = setTimeout(() => {
+        setDisplayState("neutral");
+        timerRef.current = null;
+      }, 600);
+    } else {
+      setDisplayState("neutral");
+    }
+
+    // Update the previous locked state
+    prevLockedRef.current = is_locked;
+  }, [is_locked]);
+
+  if (!canCurrentUserLockPage) return null;
+
+  // Render different UI based on the current display state
+  return (
+    <>
+      {displayState === "neutral" && (
+        <Tooltip label="Lock" side="bottom">
+          <button
+            type="button"
+            onClick={toggleLock}
+            className="grid size-6 flex-shrink-0 place-items-center rounded-sm text-secondary transition-colors hover:bg-layer-1 hover:text-primary"
+            aria-label="Lock"
+          >
+            <LockedOutline className="size-3.5" />
+          </button>
+        </Tooltip>
+      )}
+
+      {displayState === "locked" && (
+        <button
+          type="button"
+          onClick={toggleLock}
+          className="flex h-6 items-center gap-1 rounded-sm bg-accent-primary/20 px-2 text-accent-primary transition-colors hover:bg-accent-primary/30"
+          aria-label="Locked"
+        >
+          <LockedOutline className="animate-lock-icon size-3.5 flex-shrink-0" />
+          <span className="animate-text-slide-in overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
+            Locked
+          </span>
+        </button>
+      )}
+
+      {displayState === "unlocked" && (
+        <div
+          className="flex h-6 animate-fade-out items-center gap-1 rounded-sm px-2 text-secondary"
+          aria-label="Unlocked"
+        >
+          <UnlockedOutline className="animate-unlock-icon size-3.5 flex-shrink-0" />
+          <span className="animate-text-slide-in animate-text-fade-out overflow-hidden text-11 font-medium whitespace-nowrap transition-all duration-500 ease-out">
+            Unlocked
+          </span>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/pages/header/offline-badge.tsx b/apps/web/core/components/pages/header/offline-badge.tsx
new file mode 100644
index 0000000..46bcda6
--- /dev/null
+++ b/apps/web/core/components/pages/header/offline-badge.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// hooks
+import useOnlineStatus from "@/hooks/use-online-status";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageOfflineBadge = observer(function PageOfflineBadge({ page }: Props) {
+  // use online status
+  const { isOnline } = useOnlineStatus();
+
+  if (!page.isContentEditable || isOnline) return null;
+
+  return (
+    <Tooltip
+      label="You are offline. You can continue making changes. They will be synced when you are back online."
+      layout="stacked"
+    >
+      <div className="flex h-7 flex-shrink-0 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
+        <span className="size-1.5 flex-shrink-0 rounded-full bg-layer-1" />
+        <span>Offline</span>
+      </div>
+    </Tooltip>
+  );
+});
diff --git a/apps/web/core/components/pages/header/root.tsx b/apps/web/core/components/pages/header/root.tsx
new file mode 100644
index 0000000..200add7
--- /dev/null
+++ b/apps/web/core/components/pages/header/root.tsx
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { FilterOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TPageFilterProps, TPageNavigationTabs } from "@plane/types";
+import { Header, EHeaderVariant } from "@plane/ui";
+import { calculateTotalFilters } from "@plane/utils";
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { usePageStore } from "@/hooks/store";
+import type { EPageStoreType } from "@/hooks/store";
+// local imports
+import { PageAppliedFiltersList } from "../list/applied-filters";
+import { PageFiltersSelection } from "../list/filters";
+import { PageOrderByDropdown } from "../list/order-by";
+import { PageSearchInput } from "../list/search-input";
+import { PageTabNavigation } from "../list/tab-navigation";
+
+type Props = {
+  pageType: TPageNavigationTabs;
+  projectId: string;
+  storeType: EPageStoreType;
+  workspaceSlug: string;
+};
+
+export const PagesListHeaderRoot = observer(function PagesListHeaderRoot(props: Props) {
+  const { pageType, projectId, storeType, workspaceSlug } = props;
+  const { t } = useTranslation();
+  // store hooks
+  const { filters, updateFilters, clearAllFilters } = usePageStore(storeType);
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TPageFilterProps, value: string | 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);
+      }
+
+      updateFilters("filters", { [key]: newValues });
+    },
+    [filters.filters, updateFilters]
+  );
+
+  const isFiltersApplied = calculateTotalFilters(filters?.filters ?? {}) !== 0;
+
+  return (
+    <>
+      <Header variant={EHeaderVariant.SECONDARY}>
+        <Header.LeftItem>
+          <PageTabNavigation workspaceSlug={workspaceSlug} projectId={projectId} pageType={pageType} />
+        </Header.LeftItem>
+        <Header.RightItem className="items-center">
+          <PageSearchInput
+            searchQuery={filters.searchQuery}
+            updateSearchQuery={(val) => updateFilters("searchQuery", val)}
+          />
+          <PageOrderByDropdown
+            sortBy={filters.sortBy}
+            sortKey={filters.sortKey}
+            onChange={(val) => {
+              if (val.key) updateFilters("sortKey", val.key);
+              if (val.order) updateFilters("sortBy", val.order);
+            }}
+          />
+          <FiltersDropdown
+            icon={<FilterOutline className="h-3 w-3" />}
+            title={t("common.filters")}
+            placement="bottom-end"
+            isFiltersApplied={isFiltersApplied}
+          >
+            <PageFiltersSelection
+              filters={filters}
+              handleFiltersUpdate={updateFilters}
+              memberIds={workspaceMemberIds ?? undefined}
+            />
+          </FiltersDropdown>
+        </Header.RightItem>
+      </Header>
+      {calculateTotalFilters(filters?.filters ?? {}) !== 0 && (
+        <Header variant={EHeaderVariant.TERNARY}>
+          <PageAppliedFiltersList
+            appliedFilters={filters.filters ?? {}}
+            handleClearAllFilters={clearAllFilters}
+            handleRemoveFilter={handleRemoveFilter}
+            alwaysAllowEditing
+          />
+        </Header>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/pages/header/syncing-badge.tsx b/apps/web/core/components/pages/header/syncing-badge.tsx
new file mode 100644
index 0000000..f84648f
--- /dev/null
+++ b/apps/web/core/components/pages/header/syncing-badge.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import { CloudOff, Dot } from "lucide-react";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Badge } from "@plane/propel/badge";
+
+type Props = {
+  syncStatus: "syncing" | "synced" | "error";
+};
+
+const BADGE_CONTENT = {
+  syncing: {
+    label: "Syncing...",
+    tooltipLabel: "Syncing... Your changes are being synced with the server. You can continue making changes.",
+  },
+  error: {
+    label: "Connection lost",
+    tooltipLabel:
+      "Connection lost. We're having trouble connecting to the websocket server. Your changes will be synced and saved every 10 seconds.",
+  },
+};
+
+export function PageSyncingBadge({ syncStatus }: Props) {
+  const [prevSyncStatus, setPrevSyncStatus] = useState<"syncing" | "synced" | "error" | null>(null);
+  const [isVisible, setIsVisible] = useState(syncStatus !== "synced");
+
+  useEffect(() => {
+    // Only handle transitions when there's a change
+    if (prevSyncStatus !== syncStatus) {
+      if (syncStatus === "synced") {
+        // Delay hiding to allow exit animation to complete
+        setTimeout(() => {
+          setIsVisible(false);
+        }, 300); // match animation duration
+      } else {
+        setIsVisible(true);
+      }
+      setPrevSyncStatus(syncStatus);
+    }
+  }, [syncStatus, prevSyncStatus]);
+
+  if (!isVisible || syncStatus === "synced") return null;
+
+  // The synced early-return above guarantees this key exists
+  const content = BADGE_CONTENT[syncStatus];
+
+  return (
+    <Tooltip label={content.tooltipLabel} layout="stacked">
+      <span className="animate-quickFadeIn">
+        <Badge
+          variant={syncStatus === "syncing" ? "brand" : "danger"}
+          size="lg"
+          prependIcon={syncStatus === "syncing" ? <Dot /> : <CloudOff />}
+        >
+          {content.label}
+        </Badge>
+      </span>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/pages/list/applied-filters/index.ts b/apps/web/core/components/pages/list/applied-filters/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/pages/list/applied-filters/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/pages/list/applied-filters/root.tsx b/apps/web/core/components/pages/list/applied-filters/root.tsx
new file mode 100644
index 0000000..62a1609
--- /dev/null
+++ b/apps/web/core/components/pages/list/applied-filters/root.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { PillButton } from "@makeplane/propel/components/pill";
+import { CloseOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TPageFilterProps } from "@plane/types";
+import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
+// components
+import { AppliedDateFilters } from "@/components/common/applied-filters/date";
+import { AppliedMembersFilters } from "@/components/common/applied-filters/members";
+
+type Props = {
+  appliedFilters: TPageFilterProps;
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof TPageFilterProps, value: string | null) => void;
+  alwaysAllowEditing?: boolean;
+};
+
+const MEMBERS_FILTERS = ["created_by"];
+const DATE_FILTERS = ["created_at"];
+
+export function PageAppliedFiltersList(props: Props) {
+  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
+  const { t } = useTranslation();
+
+  if (!appliedFilters) return null;
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  const isEditingAllowed = alwaysAllowEditing;
+
+  return (
+    <div className="flex flex-wrap items-stretch gap-2">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof TPageFilterProps;
+
+        if (!value) return;
+        if (Array.isArray(value) && value.length === 0) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary"
+          >
+            <div className="flex flex-wrap items-center gap-1.5">
+              <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+              {DATE_FILTERS.includes(filterKey) && (
+                <AppliedDateFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={Array.isArray(value) ? value : []}
+                />
+              )}
+              {MEMBERS_FILTERS.includes(filterKey) && (
+                <AppliedMembersFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={Array.isArray(value) ? value : []}
+                />
+              )}
+              {isEditingAllowed && (
+                <button
+                  type="button"
+                  className="grid place-items-center text-tertiary hover:text-secondary"
+                  onClick={() => handleRemoveFilter(filterKey, null)}
+                >
+                  <CloseOutline height={12} width={12} />
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+      {isEditingAllowed && (
+        <PillButton
+          type="button"
+          size="md"
+          variant="outline"
+          label={t("common.clear_all")}
+          endIcon={<CloseOutline height={12} />}
+          onClick={handleClearAllFilters}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/list/block-item-action.tsx b/apps/web/core/components/pages/list/block-item-action.tsx
new file mode 100644
index 0000000..5de1af1
--- /dev/null
+++ b/apps/web/core/components/pages/list/block-item-action.tsx
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { GlobeOutline, InfoOutline, LockOutline, MinusOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { FavoriteStar } from "@plane/ui";
+import { renderFormattedDate, getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { usePageOperations } from "@/hooks/use-page-operations";
+// plane web hooks
+import type { EPageStoreType } from "@/hooks/store";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageActions } from "../dropdowns";
+
+type Props = {
+  page: TPageInstance;
+  parentRef: React.RefObject<HTMLElement | null>;
+  storeType: EPageStoreType;
+};
+
+export const BlockItemAction = observer(function BlockItemAction(props: Props) {
+  const { page, parentRef, storeType } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // page operations
+  const { pageOperations } = usePageOperations({
+    page,
+  });
+  // derived values
+  const { access, created_at, is_favorite, owned_by, canCurrentUserFavoritePage } = page;
+  const ownerDetails = owned_by ? getUserDetails(owned_by) : undefined;
+
+  return (
+    <>
+      {/* page details */}
+      <div className="cursor-default">
+        <Tooltip label={`Owned by: ${ownerDetails?.display_name ?? ""}`} layout="stacked">
+          <Avatar
+            alt={ownerDetails?.display_name}
+            fallback={ownerDetails?.display_name?.[0]?.toUpperCase()}
+            src={getFileURL(ownerDetails?.avatar_url ?? "")}
+            size="xs"
+          />
+        </Tooltip>
+      </div>
+      <div className="cursor-default text-tertiary">
+        <Tooltip label={access === 0 ? "Public" : "Private"}>
+          {access === 0 ? <GlobeOutline className="h-4 w-4" /> : <LockOutline className="h-4 w-4" />}
+        </Tooltip>
+      </div>
+      {/* vertical divider */}
+      <MinusOutline className="-mx-3 h-5 w-5 rotate-90 text-placeholder" />
+
+      {/* page info */}
+      <Tooltip label={`Created on ${renderFormattedDate(created_at)}`} layout="stacked">
+        <span className="grid h-4 w-4 cursor-default place-items-center">
+          <InfoOutline className="h-4 w-4 text-tertiary" />
+        </span>
+      </Tooltip>
+
+      {/* favorite/unfavorite */}
+      {canCurrentUserFavoritePage && (
+        <FavoriteStar
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            pageOperations.toggleFavorite();
+          }}
+          selected={is_favorite}
+        />
+      )}
+
+      {/* quick actions dropdown */}
+      <PageActions
+        optionsOrder={[
+          "open-in-new-tab",
+          "copy-link",
+          "make-a-copy",
+          "toggle-lock",
+          "toggle-access",
+          "archive-restore",
+          "delete",
+        ]}
+        page={page}
+        parentRef={parentRef}
+        storeType={storeType}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/pages/list/block.tsx b/apps/web/core/components/pages/list/block.tsx
new file mode 100644
index 0000000..622569d
--- /dev/null
+++ b/apps/web/core/components/pages/list/block.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { PagesOutline } from "@makeplane/propel/icons";
+// plane imports
+import { getPageName } from "@plane/utils";
+// components
+import { ListItem } from "@/components/core/list";
+import { BlockItemAction } from "@/components/pages/list/block-item-action";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web hooks
+import type { EPageStoreType } from "@/hooks/store";
+import { usePage } from "@/hooks/store";
+
+type TPageListBlock = {
+  pageId: string;
+  storeType: EPageStoreType;
+};
+
+export const PageListBlock = observer(function PageListBlock(props: TPageListBlock) {
+  const { pageId, storeType } = props;
+  // refs
+  const parentRef = useRef(null);
+  // hooks
+  const page = usePage({
+    pageId,
+    storeType,
+  });
+  const { isMobile } = usePlatformOS();
+  // handle page check
+  if (!page) return null;
+  // derived values
+  const { name, logo_props, getRedirectionLink } = page;
+
+  return (
+    <ListItem
+      prependTitleElement={
+        <>
+          {logo_props?.in_use ? (
+            <Logo logo={logo_props} size={16} type="lucide" />
+          ) : (
+            <PagesOutline className="h-4 w-4 text-tertiary" />
+          )}
+        </>
+      }
+      title={getPageName(name)}
+      itemLink={getRedirectionLink()}
+      actionableItems={<BlockItemAction page={page} parentRef={parentRef} storeType={storeType} />}
+      isMobile={isMobile}
+      parentRef={parentRef}
+    />
+  );
+});
diff --git a/apps/web/core/components/pages/list/filters/index.ts b/apps/web/core/components/pages/list/filters/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/pages/list/filters/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/pages/list/filters/root.tsx b/apps/web/core/components/pages/list/filters/root.tsx
new file mode 100644
index 0000000..f42ec93
--- /dev/null
+++ b/apps/web/core/components/pages/list/filters/root.tsx
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef, useEffect } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+import type { TPageFilterProps, TPageFilters } from "@plane/types";
+// components
+import { FilterCreatedDate } from "@/components/common/filters/created-at";
+import { FilterCreatedBy } from "@/components/common/filters/created-by";
+import { FilterOption } from "@/components/issues/issue-layouts/filters";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  filters: TPageFilters;
+  handleFiltersUpdate: <T extends keyof TPageFilters>(filterKey: T, filterValue: TPageFilters[T]) => void;
+  memberIds?: string[] | undefined;
+};
+
+export const PageFiltersSelection = observer(function PageFiltersSelection(props: Props) {
+  const { filters, handleFiltersUpdate, memberIds } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    if (!isMobile && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isMobile]);
+
+  const handleFilters = (key: keyof TPageFilterProps, value: boolean | string | string[]) => {
+    const newValues = filters.filters?.[key] ?? [];
+
+    if (typeof newValues === "boolean" && typeof value === "boolean") return;
+
+    if (Array.isArray(newValues)) {
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else if (typeof value === "string") {
+        if (newValues?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+    }
+
+    handleFiltersUpdate("filters", {
+      ...filters.filters,
+      [key]: newValues,
+    });
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-layer-transparent p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchOutline className="text-placeholder" width={12} height={12} />
+          <input
+            ref={inputRef}
+            type="text"
+            className="w-full outline-none placeholder:text-placeholder"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <CloseOutline className="text-tertiary" height={12} width={12} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
+        <div className="py-2">
+          <FilterOption
+            isChecked={!!filters.filters?.favorites}
+            onClick={() =>
+              handleFiltersUpdate("filters", {
+                ...filters.filters,
+                favorites: !filters.filters?.favorites,
+              })
+            }
+            title="Favorites"
+          />
+        </div>
+
+        {/* created date */}
+        <div className="py-2">
+          <FilterCreatedDate
+            appliedFilters={filters.filters?.created_at ?? null}
+            handleUpdate={(val) => handleFilters("created_at", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* created by */}
+        <div className="py-2">
+          <FilterCreatedBy
+            appliedFilters={filters.filters?.created_by ?? null}
+            handleUpdate={(val) => handleFilters("created_by", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/list/index.ts b/apps/web/core/components/pages/list/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/pages/list/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/pages/list/order-by.tsx b/apps/web/core/components/pages/list/order-by.tsx
new file mode 100644
index 0000000..be5a3b7
--- /dev/null
+++ b/apps/web/core/components/pages/list/order-by.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { SortAscendingOutline, SortDescendingOutline, TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import { getButtonStyling } from "@plane/propel/button";
+// types
+import type { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+
+type Props = {
+  onChange: (value: { key?: TPageFiltersSortKey; order?: TPageFiltersSortBy }) => void;
+  sortBy: TPageFiltersSortBy;
+  sortKey: TPageFiltersSortKey;
+};
+
+const PAGE_SORTING_KEY_OPTIONS: {
+  key: TPageFiltersSortKey;
+  label: string;
+}[] = [
+  { key: "name", label: "Name" },
+  { key: "created_at", label: "Date created" },
+  { key: "updated_at", label: "Date modified" },
+];
+
+export function PageOrderByDropdown(props: Props) {
+  const { onChange, sortBy, sortKey } = props;
+
+  const orderByDetails = PAGE_SORTING_KEY_OPTIONS.find((option) => sortKey === option.key);
+  const isDescending = sortBy === "desc";
+
+  return (
+    <CustomMenu
+      customButton={
+        <div className={getButtonStyling("secondary", "lg")}>
+          {!isDescending ? <SortAscendingOutline className="size-3" /> : <SortDescendingOutline className="size-3" />}
+          {orderByDetails?.label}
+        </div>
+      }
+      placement="bottom-end"
+      maxHeight="lg"
+      closeOnSelect
+    >
+      {PAGE_SORTING_KEY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() =>
+            onChange({
+              key: option.key,
+            })
+          }
+        >
+          {option.label}
+          {sortKey === option.key && <TickOutline className="h-3 w-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+      <hr className="my-2 border-subtle" />
+      <CustomMenu.MenuItem
+        className="flex items-center justify-between gap-2"
+        onClick={() => {
+          if (isDescending)
+            onChange({
+              order: "asc",
+            });
+        }}
+      >
+        Ascending
+        {!isDescending && <TickOutline className="h-3 w-3" />}
+      </CustomMenu.MenuItem>
+      <CustomMenu.MenuItem
+        className="flex items-center justify-between gap-2"
+        onClick={() => {
+          if (!isDescending)
+            onChange({
+              order: "desc",
+            });
+        }}
+      >
+        Descending
+        {isDescending && <TickOutline className="h-3 w-3" />}
+      </CustomMenu.MenuItem>
+    </CustomMenu>
+  );
+}
diff --git a/apps/web/core/components/pages/list/root.tsx b/apps/web/core/components/pages/list/root.tsx
new file mode 100644
index 0000000..2c42221
--- /dev/null
+++ b/apps/web/core/components/pages/list/root.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// types
+import type { TPageNavigationTabs } from "@plane/types";
+// components
+import { ListLayout } from "@/components/core/list";
+// plane web hooks
+import type { EPageStoreType } from "@/hooks/store";
+import { usePageStore } from "@/hooks/store";
+// local imports
+import { PageListBlock } from "./block";
+
+type TPagesListRoot = {
+  pageType: TPageNavigationTabs;
+  storeType: EPageStoreType;
+};
+
+export const PagesListRoot = observer(function PagesListRoot(props: TPagesListRoot) {
+  const { pageType, storeType } = props;
+  // store hooks
+  const { getCurrentProjectFilteredPageIdsByTab } = usePageStore(storeType);
+  // derived values
+  const filteredPageIds = getCurrentProjectFilteredPageIdsByTab(pageType);
+
+  if (!filteredPageIds) return <></>;
+  return (
+    <ListLayout>
+      {filteredPageIds.map((pageId) => (
+        <PageListBlock key={pageId} pageId={pageId} storeType={storeType} />
+      ))}
+    </ListLayout>
+  );
+});
diff --git a/apps/web/core/components/pages/list/search-input.tsx b/apps/web/core/components/pages/list/search-input.tsx
new file mode 100644
index 0000000..e90d67f
--- /dev/null
+++ b/apps/web/core/components/pages/list/search-input.tsx
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+import { IconButton } from "@plane/propel/icon-button";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+
+type Props = {
+  searchQuery: string;
+  updateSearchQuery: (val: string) => void;
+};
+
+export function PageSearchInput(props: Props) {
+  const { searchQuery, updateSearchQuery } = props;
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  return (
+    <div className="flex">
+      {!isSearchOpen && (
+        <IconButton
+          variant="ghost"
+          size="lg"
+          className="my-auto -mr-1 shrink-0"
+          onClick={() => {
+            setIsSearchOpen(true);
+            inputRef.current?.focus();
+          }}
+          icon={SearchOutline}
+        />
+      )}
+      <div
+        className={cn(
+          "flex w-0 items-center justify-start overflow-hidden rounded-md border border-transparent text-placeholder opacity-0 transition-[width] ease-linear",
+          {
+            "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
+          }
+        )}
+      >
+        <SearchOutline className="h-3.5 w-3.5" />
+        <input
+          ref={inputRef}
+          className="ml-2 w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
+          placeholder="Search pages"
+          value={searchQuery}
+          onChange={(e) => updateSearchQuery(e.target.value)}
+          onKeyDown={handleInputKeyDown}
+        />
+        {isSearchOpen && (
+          <button
+            type="button"
+            className="grid place-items-center"
+            onClick={() => {
+              updateSearchQuery("");
+              setIsSearchOpen(false);
+            }}
+          >
+            <CloseOutline className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/list/tab-navigation.tsx b/apps/web/core/components/pages/list/tab-navigation.tsx
new file mode 100644
index 0000000..384fee2
--- /dev/null
+++ b/apps/web/core/components/pages/list/tab-navigation.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+// types
+import type { TPageNavigationTabs } from "@plane/types";
+// helpers
+import { cn } from "@plane/utils";
+
+type TPageTabNavigation = {
+  workspaceSlug: string;
+  projectId: string;
+  pageType: TPageNavigationTabs;
+};
+
+// pages tab options
+const pageTabs: { key: TPageNavigationTabs; label: string }[] = [
+  {
+    key: "public",
+    label: "Public",
+  },
+  {
+    key: "private",
+    label: "Private",
+  },
+  {
+    key: "archived",
+    label: "Archived",
+  },
+];
+
+export function PageTabNavigation(props: TPageTabNavigation) {
+  const { workspaceSlug, projectId, pageType } = props;
+
+  const handleTabClick = (e: React.MouseEvent<HTMLAnchorElement>, tabKey: TPageNavigationTabs) => {
+    if (tabKey === pageType) e.preventDefault();
+  };
+
+  return (
+    <div className="relative flex h-full items-center">
+      {pageTabs.map((tab) => (
+        <Link
+          key={tab.key}
+          href={`/${workspaceSlug}/projects/${projectId}/pages?type=${tab.key}`}
+          onClick={(e) => handleTabClick(e, tab.key)}
+          className="flex h-full flex-col"
+        >
+          <div
+            className={cn(`flex flex-1 items-center justify-center px-4 text-13 font-medium transition-all`, {
+              "text-accent-primary": tab.key === pageType,
+            })}
+          >
+            {tab.label}
+          </div>
+          <div
+            className={cn(`w-full rounded-t border-t-2 border-transparent transition-all`, {
+              "border-accent-strong": tab.key === pageType,
+            })}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/loaders/page-content-loader.tsx b/apps/web/core/components/pages/loaders/page-content-loader.tsx
new file mode 100644
index 0000000..e7f8cc2
--- /dev/null
+++ b/apps/web/core/components/pages/loaders/page-content-loader.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+};
+
+export function PageContentLoader(props: Props) {
+  const { className } = props;
+
+  return (
+    <div className={cn("relative flex size-full flex-col", className)}>
+      {/* header */}
+      <div className="relative flex h-12 w-full flex-shrink-0 items-center divide-x divide-subtle border-b border-subtle">
+        <Loader className="relative flex items-center gap-1 pr-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+        <Loader className="relative flex items-center gap-1 px-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+        <Loader className="relative flex items-center gap-1 px-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+        <Loader className="relative flex items-center gap-1 pl-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+      </div>
+
+      {/* content */}
+      <div className="relative flex size-full overflow-hidden pt-[64px]">
+        {/* editor loader */}
+        <div className="size-full py-5">
+          <Loader className="relative space-y-4">
+            <Loader.Item width="50%" height="36px" />
+            <div className="space-y-2">
+              <div className="py-2">
+                <Loader.Item width="100%" height="36px" />
+              </div>
+              <Loader.Item width="80%" height="22px" />
+              <div className="relative flex items-center gap-2">
+                <Loader.Item width="30px" height="30px" />
+                <Loader.Item width="30%" height="22px" />
+              </div>
+              <div className="py-2">
+                <Loader.Item width="60%" height="36px" />
+              </div>
+              <Loader.Item width="70%" height="22px" />
+              <Loader.Item width="30%" height="22px" />
+              <div className="relative flex items-center gap-2">
+                <Loader.Item width="30px" height="30px" />
+                <Loader.Item width="30%" height="22px" />
+              </div>
+              <div className="py-2">
+                <Loader.Item width="50%" height="30px" />
+              </div>
+              <Loader.Item width="100%" height="22px" />
+              <div className="py-2">
+                <Loader.Item width="30%" height="30px" />
+              </div>
+              <Loader.Item width="30%" height="22px" />
+              <div className="relative flex items-center gap-2">
+                <div className="py-2">
+                  <Loader.Item width="30px" height="30px" />
+                </div>
+                <Loader.Item width="30%" height="22px" />
+              </div>
+            </div>
+          </Loader>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/loaders/page-loader.tsx b/apps/web/core/components/pages/loaders/page-loader.tsx
new file mode 100644
index 0000000..8e7b902
--- /dev/null
+++ b/apps/web/core/components/pages/loaders/page-loader.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+import { Loader } from "@plane/ui";
+
+export function PageLoader() {
+  return (
+    <div className="relative flex h-full w-full flex-col">
+      <div className="border-b border-subtle px-3 py-3">
+        <Loader className="relative flex items-center gap-2">
+          <Loader.Item width="200px" height="30px" />
+          <div className="relative ml-auto flex items-center gap-2">
+            <Loader.Item width="100px" height="30px" />
+            <Loader.Item width="100px" height="30px" />
+          </div>
+        </Loader>
+      </div>
+      <div>
+        {range(10).map((i) => (
+          <Loader key={i} className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
+            <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
+            <div className="relative ml-auto flex items-center gap-2">
+              <Loader.Item width="60px" height="22px" />
+              <Loader.Item width="22px" height="22px" />
+              <Loader.Item width="22px" height="22px" />
+              <Loader.Item width="22px" height="22px" />
+            </div>
+          </Loader>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/modals/create-page-modal.tsx b/apps/web/core/components/pages/modals/create-page-modal.tsx
new file mode 100644
index 0000000..027ea7d
--- /dev/null
+++ b/apps/web/core/components/pages/modals/create-page-modal.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+// constants
+import type { EPageAccess } from "@plane/constants";
+import type { TPage } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web hooks
+import type { EPageStoreType } from "@/hooks/store";
+import { usePageStore } from "@/hooks/store";
+// local imports
+import { PageForm } from "./page-form";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  isModalOpen: boolean;
+  pageAccess?: EPageAccess;
+  handleModalClose: () => void;
+  redirectionEnabled?: boolean;
+  storeType: EPageStoreType;
+};
+
+export function CreatePageModal(props: Props) {
+  const {
+    workspaceSlug,
+    projectId,
+    isModalOpen,
+    pageAccess,
+    handleModalClose,
+    redirectionEnabled = false,
+    storeType,
+  } = props;
+  // states
+  const [pageFormData, setPageFormData] = useState<Partial<TPage>>({
+    id: undefined,
+    name: "",
+    logo_props: undefined,
+  });
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { createPage } = usePageStore(storeType);
+  const handlePageFormData = <T extends keyof TPage>(key: T, value: TPage[T]) =>
+    setPageFormData((prev) => ({ ...prev, [key]: value }));
+
+  // update page access in form data when page access from the store changes
+  useEffect(() => {
+    setPageFormData((prev) => ({ ...prev, access: pageAccess }));
+  }, [pageAccess]);
+
+  const handleStateClear = () => {
+    setPageFormData({ id: undefined, name: "", access: pageAccess });
+    handleModalClose();
+  };
+
+  const handleFormSubmit = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    try {
+      const pageData = await createPage(pageFormData);
+      if (pageData) {
+        handleStateClear();
+        if (redirectionEnabled) router.push(`/${workspaceSlug}/projects/${projectId}/pages/${pageData.id}`);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <ModalCore
+      isOpen={isModalOpen}
+      handleClose={handleModalClose}
+      position={EModalPosition.TOP}
+      width={EModalWidth.XXL}
+    >
+      <PageForm
+        formData={pageFormData}
+        handleFormData={handlePageFormData}
+        handleModalClose={handleStateClear}
+        handleFormSubmit={handleFormSubmit}
+      />
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/pages/modals/delete-page-modal.tsx b/apps/web/core/components/pages/modals/delete-page-modal.tsx
new file mode 100644
index 0000000..d498bbb
--- /dev/null
+++ b/apps/web/core/components/pages/modals/delete-page-modal.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// ui
+import { useParams } from "next/navigation";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { AlertModalCore } from "@plane/ui";
+import { getPageName } from "@plane/utils";
+// constants
+// plane web hooks
+import { useAppRouter } from "@/hooks/use-app-router";
+import type { EPageStoreType } from "@/hooks/store";
+import { usePageStore } from "@/hooks/store";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type TConfirmPageDeletionProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  page: TPageInstance;
+  storeType: EPageStoreType;
+};
+
+export const DeletePageModal = observer(function DeletePageModal(props: TConfirmPageDeletionProps) {
+  const { isOpen, onClose, page, storeType } = props;
+  // states
+  const [isDeleting, setIsDeleting] = useState(false);
+  // store hooks
+  const { removePage } = usePageStore(storeType);
+
+  // derived values
+  const { id: pageId, name } = page;
+
+  const handleClose = () => {
+    setIsDeleting(false);
+    onClose();
+  };
+
+  const router = useAppRouter();
+  const { pageId: routePageId } = useParams();
+
+  const handleDelete = async () => {
+    if (!pageId) return;
+    setIsDeleting(true);
+    await removePage({ pageId })
+      .then(() => {
+        handleClose();
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Page deleted successfully.",
+        });
+
+        if (routePageId) {
+          router.back();
+        }
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Page could not be deleted. Please try again.",
+        });
+      });
+
+    setIsDeleting(false);
+  };
+
+  if (!page || !page.id) return null;
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDelete}
+      isSubmitting={isDeleting}
+      isOpen={isOpen}
+      title="Delete page"
+      content={
+        <>
+          Are you sure you want to delete page-{" "}
+          <span className="font-medium break-words break-all text-primary">{getPageName(name)}</span> ? The Page will be
+          deleted permanently. This action cannot be undone.
+        </>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/pages/modals/export-page-modal.tsx b/apps/web/core/components/pages/modals/export-page-modal.tsx
new file mode 100644
index 0000000..cd21b2b
--- /dev/null
+++ b/apps/web/core/components/pages/modals/export-page-modal.tsx
@@ -0,0 +1,295 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { PageProps } from "@react-pdf/renderer";
+import { pdf } from "@react-pdf/renderer";
+import { Controller, useForm } from "react-hook-form";
+import { useParams } from "react-router";
+// plane editor
+import type { EditorRefApi } from "@plane/editor";
+// plane ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { CustomSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// components
+import { PDFDocument } from "@/components/editor/pdf";
+// hooks
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
+
+type Props = {
+  editorRef: EditorRefApi | null;
+  isOpen: boolean;
+  onClose: () => void;
+  pageTitle: string;
+};
+
+type TExportFormats = "pdf" | "markdown";
+type TPageFormats = Exclude<PageProps["size"], undefined>;
+type TContentVariety = "everything" | "no-assets";
+
+type TFormValues = {
+  export_format: TExportFormats;
+  page_format: TPageFormats;
+  content_variety: TContentVariety;
+};
+
+const EXPORT_FORMATS: {
+  key: TExportFormats;
+  label: string;
+}[] = [
+  {
+    key: "pdf",
+    label: "PDF",
+  },
+  {
+    key: "markdown",
+    label: "Markdown",
+  },
+];
+
+const PAGE_FORMATS: {
+  key: TPageFormats;
+  label: string;
+}[] = [
+  {
+    key: "A4",
+    label: "A4",
+  },
+  {
+    key: "A3",
+    label: "A3",
+  },
+  {
+    key: "A2",
+    label: "A2",
+  },
+  {
+    key: "LETTER",
+    label: "Letter",
+  },
+  {
+    key: "LEGAL",
+    label: "Legal",
+  },
+  {
+    key: "TABLOID",
+    label: "Tabloid",
+  },
+];
+
+const CONTENT_VARIETY: {
+  key: TContentVariety;
+  label: string;
+}[] = [
+  {
+    key: "everything",
+    label: "Everything",
+  },
+  {
+    key: "no-assets",
+    label: "No images",
+  },
+];
+
+const defaultValues: TFormValues = {
+  export_format: "pdf",
+  page_format: "A4",
+  content_variety: "everything",
+};
+
+export function ExportPageModal(props: Props) {
+  const { editorRef, isOpen, onClose, pageTitle } = props;
+  // states
+  const [isExporting, setIsExporting] = useState(false);
+  // params
+  const { workspaceSlug, projectId } = useParams();
+  // form info
+  const { control, reset, watch } = useForm<TFormValues>({
+    defaultValues,
+  });
+  // parse editor content
+  const { replaceCustomComponentsFromHTMLContent, replaceCustomComponentsFromMarkdownContent } = useParseEditorContent({
+    projectId,
+    workspaceSlug: workspaceSlug ?? "",
+  });
+  // derived values
+  const selectedExportFormat = watch("export_format");
+  const selectedPageFormat = watch("page_format");
+  const selectedContentVariety = watch("content_variety");
+  const isPDFSelected = selectedExportFormat === "pdf";
+  const fileName = pageTitle
+    ?.toLowerCase()
+    ?.replace(/[^a-z0-9-_]/g, "-")
+    .replace(/-+/g, "-");
+  // handle modal close
+  const handleClose = () => {
+    onClose();
+    setTimeout(() => {
+      reset();
+    }, 300);
+  };
+
+  const initiateDownload = (blob: Blob, filename: string) => {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.click();
+    setTimeout(() => {
+      URL.revokeObjectURL(url);
+    }, 1000);
+  };
+
+  // handle export as a PDF
+  const handleExportAsPDF = async () => {
+    try {
+      const pageContent = `<h1 class="page-title">${pageTitle}</h1>${editorRef?.getDocument().html ?? "<p></p>"}`;
+      const parsedPageContent = await replaceCustomComponentsFromHTMLContent({
+        htmlContent: pageContent,
+        noAssets: selectedContentVariety === "no-assets",
+      });
+
+      const blob = await pdf(<PDFDocument content={parsedPageContent} pageFormat={selectedPageFormat} />).toBlob();
+      initiateDownload(blob, `${fileName}-${selectedPageFormat.toString().toLowerCase()}.pdf`);
+    } catch (error) {
+      throw new Error(`Error in exporting as a PDF: ${error}`);
+    }
+  };
+  // handle export as markdown
+  const handleExportAsMarkdown = async () => {
+    try {
+      const markdownContent = editorRef?.getMarkDown() ?? "";
+      const parsedMarkdownContent = replaceCustomComponentsFromMarkdownContent({
+        markdownContent,
+        noAssets: selectedContentVariety === "no-assets",
+      });
+
+      const blob = new Blob([parsedMarkdownContent], { type: "text/markdown" });
+      initiateDownload(blob, `${fileName}.md`);
+    } catch (error) {
+      throw new Error(`Error in exporting as markdown: ${error}`);
+    }
+  };
+  // handle export
+  const handleExport = async () => {
+    setIsExporting(true);
+    try {
+      if (selectedExportFormat === "pdf") {
+        await handleExportAsPDF();
+      }
+      if (selectedExportFormat === "markdown") {
+        await handleExportAsMarkdown();
+      }
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Page exported successfully.",
+      });
+      handleClose();
+    } catch (error) {
+      console.error("Error in exporting page:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Page could not be exported. Please try again later.",
+      });
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.SM}>
+      <div>
+        <div className="space-y-5 p-5">
+          <h3 className="text-18 font-medium text-secondary">Export page</h3>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between gap-2">
+              <h6 className="flex-shrink-0 text-13 text-secondary">Export format</h6>
+              <Controller
+                control={control}
+                name="export_format"
+                render={({ field: { onChange, value } }) => (
+                  <CustomSelect
+                    label={EXPORT_FORMATS.find((format) => format.key === value)?.label}
+                    buttonClassName="border-none"
+                    value={value}
+                    onChange={(val: TExportFormats) => onChange(val)}
+                    className="flex-shrink-0"
+                    placement="bottom-end"
+                  >
+                    {EXPORT_FORMATS.map((format) => (
+                      <CustomSelect.Option key={format.key} value={format.key}>
+                        {format.label}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+            <div className="flex items-center justify-between gap-2">
+              <h6 className="flex-shrink-0 text-13 text-secondary">Include content</h6>
+              <Controller
+                control={control}
+                name="content_variety"
+                render={({ field: { onChange, value } }) => (
+                  <CustomSelect
+                    label={CONTENT_VARIETY.find((variety) => variety.key === value)?.label}
+                    buttonClassName="border-none"
+                    value={value}
+                    onChange={(val: TContentVariety) => onChange(val)}
+                    className="flex-shrink-0"
+                    placement="bottom-end"
+                  >
+                    {CONTENT_VARIETY.map((variety) => (
+                      <CustomSelect.Option key={variety.key} value={variety.key}>
+                        {variety.label}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+            {isPDFSelected && (
+              <div className="flex items-center justify-between gap-2">
+                <h6 className="flex-shrink-0 text-13 text-secondary">Page format</h6>
+                <Controller
+                  control={control}
+                  name="page_format"
+                  render={({ field: { onChange, value } }) => (
+                    <CustomSelect
+                      label={PAGE_FORMATS.find((format) => format.key === value)?.label}
+                      buttonClassName="border-none"
+                      value={value}
+                      onChange={(val: TPageFormats) => onChange(val)}
+                      className="flex-shrink-0"
+                      placement="bottom-end"
+                    >
+                      {PAGE_FORMATS.map((format) => (
+                        <CustomSelect.Option key={format.key.toString()} value={format.key}>
+                          {format.label}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="lg" loading={isExporting} onClick={handleExport}>
+            {isExporting ? "Exporting" : "Export"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/pages/modals/page-form.tsx b/apps/web/core/components/pages/modals/page-form.tsx
new file mode 100644
index 0000000..c234e91
--- /dev/null
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FormEvent } from "react";
+import { useState } from "react";
+import type { LucideIcon } from "lucide-react";
+
+// plane imports
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { ETabIndices, EPageAccess } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { GlobeOutline, LockOutline, PagesOutline } from "@makeplane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+import type { TPage } from "@plane/types";
+
+import { getTabIndex } from "@plane/utils";
+// components
+import { AccessField } from "@/components/common/access-field";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  formData: Partial<TPage>;
+  handleFormData: <T extends keyof TPage>(key: T, value: TPage[T]) => void;
+  handleModalClose: () => void;
+  handleFormSubmit: () => Promise<void>;
+};
+
+const PAGE_ACCESS_SPECIFIERS: {
+  key: EPageAccess;
+  i18n_label: string;
+  icon: LucideIcon | React.FC<ISvgIcons>;
+}[] = [
+  { key: EPageAccess.PUBLIC, i18n_label: "common.access.public", icon: GlobeOutline },
+  { key: EPageAccess.PRIVATE, i18n_label: "common.access.private", icon: LockOutline },
+];
+
+export function PageForm(props: Props) {
+  const { formData, handleFormData, handleModalClose, handleFormSubmit } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+  // state
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const i18n_access_label = PAGE_ACCESS_SPECIFIERS.find((access) => access.key === formData.access)?.i18n_label;
+
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_PAGE, isMobile);
+
+  const handlePageFormSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      setIsSubmitting(true);
+      await handleFormSubmit();
+      setIsSubmitting(false);
+    } catch {
+      setIsSubmitting(false);
+    }
+  };
+
+  const isTitleLengthMoreThan255Character = formData.name ? formData.name.length > 255 : false;
+
+  return (
+    <form onSubmit={handlePageFormSubmit}>
+      <div className="space-y-5 p-5">
+        <h3 className="text-18 font-medium text-secondary">Create page</h3>
+        <div className="flex h-9 w-full items-start gap-2">
+          <EmojiPicker
+            isOpen={isOpen}
+            handleToggle={(val: boolean) => setIsOpen(val)}
+            className="flex-shrink0 flex items-center justify-center"
+            buttonClassName="flex items-center justify-center bg-layer-2 hover:bg-layer-2-hover rounded-md"
+            label={
+              <span className="grid h-9 w-9 place-items-center rounded-md">
+                <>
+                  {formData?.logo_props?.in_use ? (
+                    <Logo logo={formData?.logo_props} size={18} type="lucide" />
+                  ) : (
+                    <PagesOutline className="h-4 w-4 text-tertiary" />
+                  )}
+                </>
+              </span>
+            }
+            onChange={(val: any) => {
+              let logoValue = {};
+
+              if (val?.type === "emoji")
+                logoValue = {
+                  value: val.value,
+                  url: undefined,
+                };
+              else if (val?.type === "icon") logoValue = val.value;
+
+              handleFormData("logo_props", {
+                in_use: val?.type,
+                [val?.type]: logoValue,
+              });
+              setIsOpen(false);
+            }}
+            defaultIconColor={
+              formData?.logo_props?.in_use && formData?.logo_props?.in_use === "icon"
+                ? formData?.logo_props?.icon?.color
+                : undefined
+            }
+            defaultOpen={
+              formData?.logo_props?.in_use && formData?.logo_props?.in_use === "emoji"
+                ? EmojiIconPickerTypes.EMOJI
+                : EmojiIconPickerTypes.ICON
+            }
+          />
+          <div className="flew-grow w-full space-y-1">
+            <InputGroup size="2xl">
+              <Input
+                size="2xl"
+                id="name"
+                type="text"
+                value={formData.name}
+                onChange={(e) => handleFormData("name", e.target.value)}
+                placeholder="Title"
+                tabIndex={getIndex("name")}
+                required
+                autoFocus
+              />
+            </InputGroup>
+            {isTitleLengthMoreThan255Character && (
+              <span className="text-11 text-danger-primary">
+                Max length of the name should be less than 255 characters
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-between gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <div className="flex items-center gap-2">
+          <AccessField
+            onChange={(access) => handleFormData("access", access)}
+            value={formData?.access ?? EPageAccess.PUBLIC}
+            accessSpecifiers={PAGE_ACCESS_SPECIFIERS}
+            isMobile={isMobile}
+          />
+          <h6 className="text-11 font-medium">{t(i18n_access_label || "")}</h6>
+        </div>
+        <div className="flex items-center justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={handleModalClose} tabIndex={getIndex("cancel")}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            type="submit"
+            loading={isSubmitting}
+            disabled={isTitleLengthMoreThan255Character}
+            tabIndex={getIndex("submit")}
+          >
+            {isSubmitting ? "Creating" : "Create Page"}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/web/core/components/pages/navigation-pane/index.ts b/apps/web/core/components/pages/navigation-pane/index.ts
new file mode 100644
index 0000000..52ee3dc
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/index.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane web imports
+import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/components/pages/navigation-pane/tab-panels";
+
+export * from "./root";
+export * from "./types";
+
+export const PAGE_NAVIGATION_PANE_WIDTH = 294;
+
+export const PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM = "paneTab";
+export const PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM = "version";
+
+export const PAGE_NAVIGATION_PANE_TAB_KEYS = ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => tab.key);
diff --git a/apps/web/core/components/pages/navigation-pane/root.tsx b/apps/web/core/components/pages/navigation-pane/root.tsx
new file mode 100644
index 0000000..c88cb72
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/root.tsx
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { ArrowRightCircle } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Tabs } from "@makeplane/propel/components/tabs";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// hooks
+import { useQueryParams } from "@/hooks/use-query-params";
+// plane web components
+import type { TPageNavigationPaneTab } from "@/components/pages/navigation-pane/tab-panels";
+// store
+import type { EPageStoreType } from "@/hooks/store";
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import type { TPageRootHandlers } from "../editor/page-root";
+import { PageNavigationPaneTabPanelsRoot } from "./tab-panels/root";
+import { PageNavigationPaneTabsList } from "./tabs-list";
+import type { INavigationPaneExtension } from "./types/extensions";
+
+import {
+  PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
+  PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM,
+  PAGE_NAVIGATION_PANE_WIDTH,
+} from "./index";
+
+type Props = {
+  handleClose: () => void;
+  isNavigationPaneOpen: boolean;
+  page: TPageInstance;
+  versionHistory: Pick<TPageRootHandlers, "fetchAllVersions" | "fetchVersionDetails">;
+  // Generic extension system for additional navigation pane content
+  extensions?: INavigationPaneExtension[];
+  storeType: EPageStoreType;
+};
+
+export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(props: Props) {
+  const { handleClose, isNavigationPaneOpen, page, versionHistory, extensions = [], storeType } = props;
+
+  // navigation
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // query params
+  const { updateQueryParams } = useQueryParams();
+  // derived values
+  const navigationPaneQueryParam = searchParams.get(
+    PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM
+  ) as TPageNavigationPaneTab | null;
+  const activeTab: TPageNavigationPaneTab = navigationPaneQueryParam || "outline";
+
+  // Check if any extension is currently active based on query parameters
+  const ActiveExtension = extensions.find((extension) => {
+    const paneTabValue = searchParams.get(PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM);
+    const hasVersionParam = searchParams.get(PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM);
+
+    // Extension is active ONLY when paneTab matches AND no regular navigation params are present
+    return paneTabValue === extension.triggerParam && !hasVersionParam;
+  });
+
+  // Don't show tabs when an extension is active
+  const showNavigationTabs = !ActiveExtension && isNavigationPaneOpen;
+
+  // Use extension width if available, otherwise fall back to default
+  const paneWidth = ActiveExtension?.width ?? PAGE_NAVIGATION_PANE_WIDTH;
+  // translation
+  const { t } = useTranslation();
+
+  const handleTabChange = useCallback(
+    (value: string) => {
+      const updatedTab = value as TPageNavigationPaneTab;
+      const isUpdatedTabInfo = updatedTab === "info";
+      const updatedRoute = updateQueryParams({
+        paramsToAdd: { [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: updatedTab },
+        paramsToRemove: !isUpdatedTabInfo ? [PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM] : undefined,
+      });
+      router.push(updatedRoute);
+    },
+    [router, updateQueryParams]
+  );
+
+  return (
+    <aside
+      className="flex h-full shrink-0 flex-col border-l border-subtle bg-surface-1 pt-3.5 transition-all duration-300 ease-out"
+      style={{
+        width: `${paneWidth}px`,
+        marginRight: isNavigationPaneOpen ? "0px" : `-${paneWidth}px`,
+      }}
+    >
+      <div className="mb-3.5 px-3.5">
+        <Tooltip label={t("page_navigation_pane.close_button")}>
+          <button
+            type="button"
+            className="grid size-3.5 place-items-center text-secondary transition-colors hover:text-primary"
+            onClick={handleClose}
+            aria-label={t("page_navigation_pane.close_button")}
+          >
+            <ArrowRightCircle className="size-3.5" />
+          </button>
+        </Tooltip>
+      </div>
+
+      <div className="animate-slide-in-right flex flex-1 flex-col overflow-hidden">
+        {ActiveExtension ? (
+          <ActiveExtension.component page={page} extensionData={ActiveExtension.data} storeType={storeType} />
+        ) : showNavigationTabs ? (
+          // Row wrapper: Propel's Tabs root omits className, so it takes its full height by
+          // stretching as a flex item.
+          <div className="flex h-full w-full">
+            <Tabs variant="contained" value={activeTab} onValueChange={handleTabChange}>
+              <div className="flex h-full w-full flex-col">
+                <PageNavigationPaneTabsList />
+                <PageNavigationPaneTabPanelsRoot page={page} versionHistory={versionHistory} />
+              </div>
+            </Tabs>
+          </div>
+        ) : null}
+      </div>
+    </aside>
+  );
+});
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
new file mode 100644
index 0000000..16a0196
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { DownloadOutline } from "@makeplane/propel/icons";
+// plane imports
+import { CORE_EXTENSIONS } from "@plane/editor";
+import type { TEditorAsset } from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import { getEditorAssetDownloadSrc, getEditorAssetSrc } from "@plane/utils";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local import
+import { PageNavigationPaneAssetsTabEmptyState } from "./empty-state/assets";
+
+type Props = {
+  page: TPageInstance;
+};
+
+type AssetItemProps = {
+  asset: TEditorAsset;
+  page: TPageInstance;
+};
+
+const AssetItem = observer(function AssetItem(props: AssetItemProps) {
+  const { asset, page } = props;
+  // navigation
+  const { workspaceSlug } = useParams();
+  // derived values
+  const { project_ids } = page;
+  // translation
+  const { t } = useTranslation();
+
+  const assetSrc: string = useMemo(() => {
+    if (!asset.src || !workspaceSlug) return "";
+    if (asset.src.startsWith("http")) {
+      return asset.src;
+    } else {
+      return (
+        getEditorAssetSrc({
+          assetId: asset.src,
+          projectId: project_ids?.[0],
+          workspaceSlug: workspaceSlug.toString(),
+        }) ?? ""
+      );
+    }
+  }, [asset.src, project_ids, workspaceSlug]);
+
+  const assetDownloadSrc: string = useMemo(() => {
+    if (!asset.src || !workspaceSlug) return "";
+    if (asset.src.startsWith("http")) {
+      return asset.src;
+    } else {
+      return (
+        getEditorAssetDownloadSrc({
+          assetId: asset.src,
+          projectId: project_ids?.[0],
+          workspaceSlug: workspaceSlug.toString(),
+        }) ?? ""
+      );
+    }
+  }, [asset.src, project_ids, workspaceSlug]);
+
+  if ([CORE_EXTENSIONS.IMAGE, CORE_EXTENSIONS.CUSTOM_IMAGE].includes(asset.type as CORE_EXTENSIONS))
+    return (
+      <a
+        href={asset.href}
+        className="group/asset-item relative flex h-12 items-center gap-2 rounded-sm border border-subtle pr-2 transition-colors hover:bg-layer-1"
+      >
+        <div
+          className="h-12 w-11 flex-shrink-0 rounded-l-sm bg-cover bg-center bg-no-repeat"
+          style={{
+            backgroundImage: `url('${assetSrc}')`,
+          }}
+        />
+        <div className="flex-1 space-y-0.5 truncate">
+          <p className="truncate text-13 font-medium">{asset.name}</p>
+          <div className="flex items-end justify-between gap-2">
+            <p className="shrink-0 text-11 text-secondary" />
+            <a
+              href={assetDownloadSrc}
+              target="_blank"
+              rel="noreferrer noopener"
+              className="pointer-events-none flex shrink-0 items-center gap-1 rounded-sm px-1 py-0.5 text-secondary opacity-0 transition-opacity group-hover/asset-item:pointer-events-auto group-hover/asset-item:opacity-100 hover:text-primary"
+            >
+              <DownloadOutline className="size-3 shrink-0" />
+              <span className="text-11 font-medium">{t("page_navigation_pane.tabs.assets.download_button")}</span>
+            </a>
+          </div>
+        </div>
+      </a>
+    );
+
+  return null;
+});
+
+export const PageNavigationPaneAssetsTabPanel = observer(function PageNavigationPaneAssetsTabPanel(props: Props) {
+  const { page } = props;
+  // derived values
+  const {
+    editor: { assetsList },
+  } = page;
+
+  if (assetsList.length === 0) return <PageNavigationPaneAssetsTabEmptyState />;
+
+  return (
+    <div className="mt-5 space-y-4 px-4">
+      {assetsList?.map((asset) => (
+        <AssetItem key={asset.id} asset={asset} page={page} />
+      ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/empty-state/assets.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/empty-state/assets.tsx
new file mode 100644
index 0000000..2829806
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/empty-state/assets.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// assets
+import darkAssetsAsset from "@/app/assets/empty-state/wiki/navigation-pane/assets-dark.webp?url";
+import lightAssetsAsset from "@/app/assets/empty-state/wiki/navigation-pane/assets-light.webp?url";
+
+export function PageNavigationPaneAssetsTabEmptyState() {
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // asset resolved path
+  const resolvedPath = resolvedTheme === "light" ? lightAssetsAsset : darkAssetsAsset;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="grid size-full place-items-center">
+      <div className="flex flex-col items-center gap-y-6 text-center">
+        <img src={resolvedPath} className="size-40 object-contain" alt="depicts the assets of a page" />
+        <div className="space-y-2.5">
+          <h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.assets.empty_state.title")}</h4>
+          <p className="text-13 font-medium text-secondary">
+            {t("page_navigation_pane.tabs.assets.empty_state.description")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/empty-state/outline.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/empty-state/outline.tsx
new file mode 100644
index 0000000..720da75
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/empty-state/outline.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTheme } from "next-themes";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// assets
+import darkOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-dark.webp?url";
+import lightOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-light.webp?url";
+
+export function PageNavigationPaneOutlineTabEmptyState() {
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // asset resolved path
+  const resolvedPath = resolvedTheme === "light" ? lightOutlineAsset : darkOutlineAsset;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="grid size-full place-items-center">
+      <div className="flex flex-col items-center gap-y-6 text-center">
+        <img src={resolvedPath} className="size-40 object-contain" alt="depicts the outline of a page" />
+        <div className="space-y-2.5">
+          <h4 className="text-14 font-medium">{t("page_navigation_pane.tabs.outline.empty_state.title")}</h4>
+          <p className="text-13 font-medium text-secondary">
+            {t("page_navigation_pane.tabs.outline.empty_state.description")}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/index.ts b/apps/web/core/components/pages/navigation-pane/tab-panels/index.ts
new file mode 100644
index 0000000..1eb3094
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/index.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TPageNavigationPaneTab = "outline" | "info" | "assets";
+
+export const PAGE_NAVIGATION_PANE_TABS_LIST: Record<
+  TPageNavigationPaneTab,
+  {
+    key: TPageNavigationPaneTab;
+    i18n_label: string;
+  }
+> = {
+  outline: {
+    key: "outline",
+    i18n_label: "page_navigation_pane.tabs.outline.label",
+  },
+  info: {
+    key: "info",
+    i18n_label: "page_navigation_pane.tabs.info.label",
+  },
+  assets: {
+    key: "assets",
+    i18n_label: "page_navigation_pane.tabs.assets.label",
+  },
+};
+
+export const ORDERED_PAGE_NAVIGATION_TABS_LIST: {
+  key: TPageNavigationPaneTab;
+  i18n_label: string;
+}[] = [
+  PAGE_NAVIGATION_PANE_TABS_LIST.outline,
+  PAGE_NAVIGATION_PANE_TABS_LIST.info,
+  PAGE_NAVIGATION_PANE_TABS_LIST.assets,
+];
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx
new file mode 100644
index 0000000..0a1f39e
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/actors-info.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { useTranslation } from "@plane/i18n";
+import { calculateTimeAgoShort, getFileURL, renderFormattedDate } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const PageNavigationPaneInfoTabActorsInfo = observer(function PageNavigationPaneInfoTabActorsInfo(props: Props) {
+  const { page } = props;
+  // navigation
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const { owned_by, updated_by } = page;
+  const editorInformation = updated_by ? getUserDetails(updated_by) : undefined;
+  const creatorInformation = owned_by ? getUserDetails(owned_by) : undefined;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="mt-4 space-y-3">
+      <div>
+        <p className="text-11 font-medium text-tertiary">{t("page_navigation_pane.tabs.info.actors_info.edited_by")}</p>
+        <div className="mt-2 flex items-center justify-between gap-2 text-13 font-medium">
+          <Link href={`/${workspaceSlug?.toString()}/profile/${page.updated_by}`} className="flex items-center gap-1">
+            <Avatar
+              alt={editorInformation?.display_name}
+              fallback={editorInformation?.display_name?.[0]?.toUpperCase()}
+              src={getFileURL(editorInformation?.avatar_url ?? "")}
+              size="2xs"
+            />
+            <span>{editorInformation?.display_name ?? t("common.deactivated_user")}</span>
+          </Link>
+          <span className="flex-shrink-0 text-tertiary">{calculateTimeAgoShort(page.updated_at ?? "")} ago</span>
+        </div>
+      </div>
+      <div>
+        <p className="text-11 font-medium text-tertiary">
+          {t("page_navigation_pane.tabs.info.actors_info.created_by")}
+        </p>
+        <div className="mt-2 flex items-center justify-between gap-2 text-13 font-medium">
+          <Link href={`/${workspaceSlug?.toString()}/profile/${page.created_by}`} className="flex items-center gap-1">
+            <Avatar
+              alt={creatorInformation?.display_name}
+              fallback={creatorInformation?.display_name?.[0]?.toUpperCase()}
+              src={getFileURL(creatorInformation?.avatar_url ?? "")}
+              size="2xs"
+            />
+            <span>{creatorInformation?.display_name ?? t("common.deactivated_user")}</span>
+          </Link>
+          <span className="flex-shrink-0 text-tertiary">{renderFormattedDate(page.created_at)}</span>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx
new file mode 100644
index 0000000..f7b15f9
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/document-info.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { TDocumentInfo } from "@plane/editor";
+import { useTranslation } from "@plane/i18n";
+import { getReadTimeFromWordsCount } from "@plane/utils";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type Props = {
+  page: TPageInstance;
+};
+
+const DEFAULT_DOCUMENT_INFO: TDocumentInfo = {
+  words: 0,
+  characters: 0,
+  paragraphs: 0,
+};
+
+export const PageNavigationPaneInfoTabDocumentInfo = observer(function PageNavigationPaneInfoTabDocumentInfo(
+  props: Props
+) {
+  const { page } = props;
+  // states
+  const [documentInfo, setDocumentInfo] = useState<TDocumentInfo>(DEFAULT_DOCUMENT_INFO);
+  // derived values
+  const {
+    editor: { editorRef },
+  } = page;
+  // translation
+  const { t } = useTranslation();
+  // subscribe to asset changes
+  useEffect(() => {
+    const unsubscribe = editorRef?.onDocumentInfoChange(setDocumentInfo);
+    // for initial render of this component to get the editor assets
+    setDocumentInfo(editorRef?.getDocumentInfo() ?? DEFAULT_DOCUMENT_INFO);
+    return () => {
+      unsubscribe?.();
+    };
+  }, [editorRef]);
+
+  const secondsToReadableTime = useCallback(() => {
+    const wordsCount = documentInfo.words;
+    const readTimeInSeconds = Number(getReadTimeFromWordsCount(wordsCount).toFixed(0));
+    return readTimeInSeconds < 60 ? `${readTimeInSeconds}s` : `${Math.ceil(readTimeInSeconds / 60)}m`;
+  }, [documentInfo.words]);
+
+  const documentInfoCards = useMemo(
+    () => [
+      {
+        key: "words-count",
+        title: t("page_navigation_pane.tabs.info.document_info.words"),
+        info: documentInfo.words,
+      },
+      {
+        key: "characters-count",
+        title: t("page_navigation_pane.tabs.info.document_info.characters"),
+        info: documentInfo.characters,
+      },
+      {
+        key: "paragraphs-count",
+        title: t("page_navigation_pane.tabs.info.document_info.paragraphs"),
+        info: documentInfo.paragraphs,
+      },
+      {
+        key: "read-time",
+        title: t("page_navigation_pane.tabs.info.document_info.read_time"),
+        info: secondsToReadableTime(),
+      },
+    ],
+    [documentInfo, secondsToReadableTime, t]
+  );
+
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {documentInfoCards.map((card) => (
+        <div key={card.key} className="rounded-sm bg-layer-2 p-2">
+          <h6 className="text-14 font-semibold">{card.info}</h6>
+          <p className="mt-1.5 text-13 font-medium text-tertiary">{card.title}</p>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
new file mode 100644
index 0000000..a2ae5ba
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/root.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import type { TPageRootHandlers } from "@/components/pages/editor/page-root";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageNavigationPaneInfoTabActorsInfo } from "./actors-info";
+import { PageNavigationPaneInfoTabDocumentInfo } from "./document-info";
+import { PageNavigationPaneInfoTabVersionHistory } from "./version-history";
+
+type Props = {
+  page: TPageInstance;
+  versionHistory: Pick<TPageRootHandlers, "fetchAllVersions" | "fetchVersionDetails">;
+};
+
+export const PageNavigationPaneInfoTabPanel = observer(function PageNavigationPaneInfoTabPanel(props: Props) {
+  const { page, versionHistory } = props;
+  return (
+    <div className="flex h-full flex-col px-4">
+      <div className="mt-5 flex-1 overflow-y-auto">
+        <PageNavigationPaneInfoTabDocumentInfo page={page} />
+        <PageNavigationPaneInfoTabActorsInfo page={page} />
+        <div className="my-3 h-px flex-shrink-0 bg-layer-1" />
+        <PageNavigationPaneInfoTabVersionHistory page={page} versionHistory={versionHistory} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
new file mode 100644
index 0000000..f3a8e56
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/info/version-history.tsx
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { useTranslation } from "@plane/i18n";
+import type { TPageVersion } from "@plane/types";
+import { cn, getFileURL, renderFormattedDate, renderFormattedTime } from "@plane/utils";
+// components
+import type { TPageRootHandlers } from "@/components/pages/editor/page-root";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useQueryParams } from "@/hooks/use-query-params";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM } from "../..";
+
+type Props = {
+  page: TPageInstance;
+  versionHistory: Pick<TPageRootHandlers, "fetchAllVersions" | "fetchVersionDetails">;
+};
+
+type VersionHistoryItemProps = {
+  getVersionLink: (versionID: string) => string;
+  isVersionActive: boolean;
+  version: TPageVersion;
+};
+
+const VersionHistoryItem = observer(function VersionHistoryItem(props: VersionHistoryItemProps) {
+  const { getVersionLink, isVersionActive, version } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const versionCreator = getUserDetails(version.owned_by);
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <li className="relative flex items-center gap-x-4 text-11 font-medium">
+      {/* timeline icon */}
+      <div className="relative grid size-6 flex-none place-items-center">
+        <div className="size-2 rounded-full bg-layer-3" />
+      </div>
+      {/* end timeline icon */}
+      <Link
+        href={getVersionLink(version.id)}
+        className={cn("block flex-1 rounded-md px-1 py-2 hover:bg-layer-transparent-hover", {
+          "bg-layer-transparent-selected hover:bg-layer-transparent-selected": isVersionActive,
+        })}
+      >
+        <p className="text-tertiary">
+          {renderFormattedDate(version.last_saved_at)}, {renderFormattedTime(version.last_saved_at)}
+        </p>
+        <p className="mt-1 flex items-center gap-1">
+          <Avatar
+            alt={versionCreator?.display_name}
+            fallback={versionCreator?.display_name?.[0]?.toUpperCase()}
+            size="2xs"
+            src={getFileURL(versionCreator?.avatar_url ?? "")}
+          />
+          <span>{versionCreator?.display_name ?? t("common.deactivated_user")}</span>
+        </p>
+      </Link>
+    </li>
+  );
+});
+
+export const PageNavigationPaneInfoTabVersionHistory = observer(function PageNavigationPaneInfoTabVersionHistory(
+  props: Props
+) {
+  const { page, versionHistory } = props;
+  // navigation
+  const searchParams = useSearchParams();
+  const activeVersion = searchParams.get(PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM);
+  // derived values
+  const { id } = page;
+  // translation
+  const { t } = useTranslation();
+  // query params
+  const { updateQueryParams } = useQueryParams();
+  // fetch all versions
+  const { data: versionsList } = useSWR(
+    id ? `PAGE_VERSIONS_LIST_${id}` : null,
+    id ? () => versionHistory.fetchAllVersions(id) : null
+  );
+
+  const getVersionLink = useCallback(
+    (versionID?: string) => {
+      if (versionID) {
+        return updateQueryParams({
+          paramsToAdd: { [PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM]: versionID },
+        });
+      } else {
+        return updateQueryParams({
+          paramsToRemove: [PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM],
+        });
+      }
+    },
+    [updateQueryParams]
+  );
+
+  return (
+    <div>
+      <p className="text-11 font-medium text-secondary">{t("page_navigation_pane.tabs.info.version_history.label")}</p>
+      <div className="mt-3">
+        <ul className="relative">
+          {/* timeline line */}
+          <div className={cn("absolute top-0 left-0 flex h-full w-6 justify-center")}>
+            <div className="w-px bg-layer-3" />
+          </div>
+          {/* end timeline line */}
+          <li className="relative flex items-center gap-x-4 text-11 font-medium">
+            {/* timeline icon */}
+            <div className="relative grid size-6 flex-none place-items-center rounded-full bg-accent-primary/20">
+              <div className="size-2.5 rounded-full bg-accent-primary/40" />
+            </div>
+            {/* end timeline icon */}
+            <Link
+              href={getVersionLink()}
+              className={cn("flex-1 rounded-md bg-layer-transparent px-1 py-2 hover:bg-layer-transparent-hover", {
+                "bg-layer-transparent-selected hover:bg-layer-transparent-selected": !activeVersion,
+              })}
+            >
+              {t("page_navigation_pane.tabs.info.version_history.current_version")}
+            </Link>
+          </li>
+          {versionsList?.map((version) => (
+            <VersionHistoryItem
+              key={version.id}
+              getVersionLink={getVersionLink}
+              isVersionActive={activeVersion === version.id}
+              version={version}
+            />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
new file mode 100644
index 0000000..cb01233
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/outline.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageContentBrowser } from "../../editor/summary";
+import { PageNavigationPaneOutlineTabEmptyState } from "./empty-state/outline";
+
+type Props = {
+  page: TPageInstance;
+};
+
+export function PageNavigationPaneOutlineTabPanel(props: Props) {
+  const { page } = props;
+  // derived values
+  const {
+    editor: { editorRef },
+  } = page;
+
+  return (
+    <ScrollArea
+      orientation="vertical"
+      size="sm"
+      scrollType="hover"
+      className="hide-scrollbar size-full overflow-y-auto"
+      viewportClassName="px-4"
+    >
+      <PageContentBrowser
+        className="mt-0"
+        editorRef={editorRef}
+        emptyState={<PageNavigationPaneOutlineTabEmptyState />}
+      />
+    </ScrollArea>
+  );
+}
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
new file mode 100644
index 0000000..2566ad7
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { TabsPanel } from "@makeplane/propel/components/tabs";
+// components
+import type { TPageRootHandlers } from "@/components/pages/editor/page-root";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+// local imports
+import { PageNavigationPaneAssetsTabPanel } from "./assets";
+import { PageNavigationPaneInfoTabPanel } from "./info/root";
+import { PageNavigationPaneOutlineTabPanel } from "./outline";
+import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from ".";
+
+type Props = {
+  page: TPageInstance;
+  versionHistory: Pick<TPageRootHandlers, "fetchAllVersions" | "fetchVersionDetails">;
+};
+
+export function PageNavigationPaneTabPanelsRoot(props: Props) {
+  const { page, versionHistory } = props;
+
+  return (
+    // Grid wrapper: Propel's TabsPanel omits className, so the single mounted panel gets its
+    // fill height from a one-row grid instead.
+    <div className="grid min-h-0 w-full flex-1 grid-rows-1 overflow-hidden py-2">
+      {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
+        <TabsPanel key={tab.key} value={tab.key}>
+          {tab.key === "outline" && <PageNavigationPaneOutlineTabPanel page={page} />}
+          {tab.key === "info" && <PageNavigationPaneInfoTabPanel page={page} versionHistory={versionHistory} />}
+          {tab.key === "assets" && <PageNavigationPaneAssetsTabPanel page={page} />}
+        </TabsPanel>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
new file mode 100644
index 0000000..afc7cbf
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { Tab, TabsList } from "@makeplane/propel/components/tabs";
+import { useTranslation } from "@plane/i18n";
+// plane web components
+import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/components/pages/navigation-pane/tab-panels";
+
+export function PageNavigationPaneTabsList() {
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="mx-3.5">
+      <TabsList>
+        {ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => (
+          <Tab key={tab.key} value={tab.key} label={t(tab.i18n_label)} />
+        ))}
+      </TabsList>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/pages/navigation-pane/types/extensions.ts b/apps/web/core/components/pages/navigation-pane/types/extensions.ts
new file mode 100644
index 0000000..89cd3b1
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/types/extensions.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import type { EPageStoreType } from "@/hooks/store";
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export interface INavigationPaneExtensionProps<T = Record<string, unknown>> {
+  page: TPageInstance;
+  extensionData?: T;
+  storeType: EPageStoreType;
+}
+
+export interface INavigationPaneExtensionComponent<T = Record<string, unknown>> {
+  (props: INavigationPaneExtensionProps<T>): ReactNode;
+}
+
+export interface INavigationPaneExtension<T = Record<string, unknown>> {
+  id: string;
+  triggerParam: string;
+  component: INavigationPaneExtensionComponent<T>;
+  data?: T;
+  width?: number;
+}
diff --git a/apps/web/core/components/pages/navigation-pane/types/index.ts b/apps/web/core/components/pages/navigation-pane/types/index.ts
new file mode 100644
index 0000000..f833485
--- /dev/null
+++ b/apps/web/core/components/pages/navigation-pane/types/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Export generic extension system interfaces
+export type {
+  INavigationPaneExtensionProps,
+  INavigationPaneExtensionComponent,
+  INavigationPaneExtension,
+} from "./extensions";
diff --git a/apps/web/core/components/pages/pages-list-main-content.tsx b/apps/web/core/components/pages/pages-list-main-content.tsx
new file mode 100644
index 0000000..d835df6
--- /dev/null
+++ b/apps/web/core/components/pages/pages-list-main-content.tsx
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useParams, useRouter } from "next/navigation";
+import { EUserPermissionsLevel, EPageAccess } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TPage, TPageNavigationTabs } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+// components
+import { PageLoader } from "@/components/pages/loaders/page-loader";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/hooks/store";
+
+type Props = {
+  children: React.ReactNode;
+  pageType: TPageNavigationTabs;
+  storeType: EPageStoreType;
+};
+
+export const PagesListMainContent = observer(function PagesListMainContent(props: Props) {
+  const { children, pageType, storeType } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  const { isAnyPageAvailable, getCurrentProjectFilteredPageIdsByTab, getCurrentProjectPageIdsByTab, loader } =
+    usePageStore(storeType);
+  const { allowPermissions } = useUserPermissions();
+  const { createPage } = usePageStore(EPageStoreType.PROJECT);
+  // states
+  const [isCreatingPage, setIsCreatingPage] = useState(false);
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = useParams();
+  // derived values
+  const pageIds = getCurrentProjectPageIdsByTab(pageType);
+  const filteredPageIds = getCurrentProjectFilteredPageIdsByTab(pageType);
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.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) => {
+        const pageId = `/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages/${res?.id}`;
+        router.push(pageId);
+      })
+      .catch((err) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: err?.data?.error || "Page could not be created. Please try again.",
+        });
+      })
+      .finally(() => setIsCreatingPage(false));
+  };
+
+  if (loader === "init-loader") return <PageLoader />;
+  // if no pages exist in the active page type
+  if (!isAnyPageAvailable || pageIds?.length === 0) {
+    if (!isAnyPageAvailable) {
+      return (
+        <EmptyStateDetailed
+          assetKey="page"
+          title={t("project_empty_state.pages.title")}
+          description={t("project_empty_state.pages.description")}
+          actions={[
+            {
+              label: t("project_empty_state.pages.cta_primary"),
+              onClick: () => {
+                handleCreatePage();
+              },
+              variant: "primary",
+              disabled: !canPerformEmptyStateActions || isCreatingPage,
+            },
+          ]}
+        />
+      );
+    }
+    if (pageType === "public")
+      return (
+        <EmptyStateDetailed
+          assetKey="page"
+          title={t("project_empty_state.pages.title")}
+          description={t("project_empty_state.pages.description")}
+          actions={[
+            {
+              label: t("project_empty_state.pages.cta_primary"),
+              onClick: () => {
+                handleCreatePage();
+              },
+              variant: "primary",
+              disabled: !canPerformEmptyStateActions || isCreatingPage,
+            },
+          ]}
+        />
+      );
+    if (pageType === "private")
+      return (
+        <EmptyStateDetailed
+          assetKey="page"
+          title={t("project_empty_state.pages.title")}
+          description={t("project_empty_state.pages.description")}
+          actions={[
+            {
+              label: t("project_empty_state.pages.cta_primary"),
+              onClick: () => {
+                handleCreatePage();
+              },
+              variant: "primary",
+              disabled: !canPerformEmptyStateActions || isCreatingPage,
+            },
+          ]}
+        />
+      );
+    if (pageType === "archived")
+      return (
+        <EmptyStateDetailed
+          assetKey="page"
+          title={t("project_empty_state.archive_pages.title")}
+          description={t("project_empty_state.archive_pages.description")}
+        />
+      );
+  }
+  // if no pages match the filter criteria
+  if (filteredPageIds?.length === 0)
+    return (
+      <EmptyStateDetailed
+        assetKey="search"
+        title={t("common_empty_state.search.title")}
+        description={t("common_empty_state.search.description")}
+      />
+    );
+
+  return <div className="h-full w-full overflow-hidden">{children}</div>;
+});
diff --git a/apps/web/core/components/pages/pages-list-view.tsx b/apps/web/core/components/pages/pages-list-view.tsx
new file mode 100644
index 0000000..0a90546
--- /dev/null
+++ b/apps/web/core/components/pages/pages-list-view.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import type { TPageNavigationTabs } from "@plane/types";
+// hooks
+import type { EPageStoreType } from "@/hooks/store";
+import { usePageStore } from "@/hooks/store";
+// local imports
+import { PagesListHeaderRoot } from "./header";
+import { PagesListMainContent } from "./pages-list-main-content";
+
+type TPageView = {
+  children: React.ReactNode;
+  pageType: TPageNavigationTabs;
+  projectId: string;
+  storeType: EPageStoreType;
+  workspaceSlug: string;
+};
+
+export const PagesListView = observer(function PagesListView(props: TPageView) {
+  const { children, pageType, projectId, storeType, workspaceSlug } = props;
+  // store hooks
+  const { isAnyPageAvailable, fetchPagesList } = usePageStore(storeType);
+  // fetching pages list
+  useSWR(
+    workspaceSlug && projectId && pageType ? `PROJECT_PAGES_${projectId}` : null,
+    workspaceSlug && projectId && pageType ? () => fetchPagesList(workspaceSlug, projectId, pageType) : null
+  );
+
+  // pages loader
+  return (
+    <div className="relative flex h-full w-full flex-col overflow-hidden">
+      {/* tab header */}
+      {isAnyPageAvailable && (
+        <PagesListHeaderRoot
+          pageType={pageType}
+          projectId={projectId}
+          storeType={storeType}
+          workspaceSlug={workspaceSlug}
+        />
+      )}
+      <PagesListMainContent pageType={pageType} storeType={storeType}>
+        {children}
+      </PagesListMainContent>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/version/editor.tsx b/apps/web/core/components/pages/version/editor.tsx
new file mode 100644
index 0000000..e9b36eb
--- /dev/null
+++ b/apps/web/core/components/pages/version/editor.tsx
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { TDisplayConfig } from "@plane/editor";
+import type { JSONContent, TPageVersion } from "@plane/types";
+import { Loader } from "@plane/ui";
+import { isJSONContentEmpty } from "@plane/utils";
+// components
+import { DocumentEditor } from "@/components/editor/document/editor";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { usePageFilters } from "@/hooks/use-page-filters";
+// plane web hooks
+import type { EPageStoreType } from "@/hooks/store";
+
+export type TVersionEditorProps = {
+  activeVersion: string | null;
+  versionDetails: TPageVersion | undefined;
+  storeType: EPageStoreType;
+};
+
+export const PagesVersionEditor = observer(function PagesVersionEditor(props: TVersionEditorProps) {
+  const { activeVersion, versionDetails } = props;
+  // params
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  // derived values
+  const workspaceDetails = getWorkspaceBySlug(workspaceSlug?.toString() ?? "");
+  // page filters
+  const { fontSize, fontStyle } = usePageFilters();
+
+  const displayConfig: TDisplayConfig = {
+    fontSize,
+    fontStyle,
+    wideLayout: true,
+  };
+
+  if (!versionDetails)
+    return (
+      <div className="size-full px-5">
+        <Loader className="relative space-y-4">
+          <Loader.Item width="50%" height="36px" />
+          <div className="space-y-2">
+            <div className="py-2">
+              <Loader.Item width="100%" height="36px" />
+            </div>
+            <Loader.Item width="80%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="60%" height="36px" />
+            </div>
+            <Loader.Item width="70%" height="22px" />
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="50%" height="30px" />
+            </div>
+            <Loader.Item width="100%" height="22px" />
+            <div className="py-2">
+              <Loader.Item width="30%" height="30px" />
+            </div>
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <div className="py-2">
+                <Loader.Item width="30px" height="30px" />
+              </div>
+              <Loader.Item width="30%" height="22px" />
+            </div>
+          </div>
+        </Loader>
+      </div>
+    );
+
+  const description = isJSONContentEmpty(versionDetails?.description_json as JSONContent)
+    ? versionDetails?.description_html
+    : versionDetails?.description_json;
+
+  if (!description) return null;
+
+  return (
+    <DocumentEditor
+      key={activeVersion ?? ""}
+      editable={false}
+      id={activeVersion ?? ""}
+      value={description}
+      containerClassName="p-0 pb-64 border-none"
+      displayConfig={displayConfig}
+      editorClassName="pl-10"
+      projectId={projectId?.toString()}
+      workspaceId={workspaceDetails?.id ?? ""}
+      workspaceSlug={workspaceSlug?.toString() ?? ""}
+    />
+  );
+});
diff --git a/apps/web/core/components/pages/version/index.ts b/apps/web/core/components/pages/version/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/pages/version/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/pages/version/main-content.tsx b/apps/web/core/components/pages/version/main-content.tsx
new file mode 100644
index 0000000..bd978ef
--- /dev/null
+++ b/apps/web/core/components/pages/version/main-content.tsx
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { ShowOutline, WarningTriangleOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TPageVersion } from "@plane/types";
+import { renderFormattedDate, renderFormattedTime } from "@plane/utils";
+// helpers
+import type { EPageStoreType } from "@/hooks/store";
+// local imports
+import type { TVersionEditorProps } from "./editor";
+
+type Props = {
+  activeVersion: string | null;
+  editorComponent: React.FC<TVersionEditorProps>;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  handleClose: () => void;
+  handleRestore: (descriptionHTML: string) => Promise<void>;
+  pageId: string;
+  restoreEnabled: boolean;
+  storeType: EPageStoreType;
+};
+
+export const PageVersionsMainContent = observer(function PageVersionsMainContent(props: Props) {
+  const {
+    activeVersion,
+    editorComponent,
+    fetchVersionDetails,
+    handleClose,
+    handleRestore,
+    pageId,
+    restoreEnabled,
+    storeType,
+  } = props;
+  // states
+  const [isRestoring, setIsRestoring] = useState(false);
+  const [isRetrying, setIsRetrying] = useState(false);
+
+  const {
+    data: versionDetails,
+    error: versionDetailsError,
+    mutate: mutateVersionDetails,
+  } = useSWR(
+    pageId && activeVersion ? `PAGE_VERSION_${activeVersion}` : null,
+    pageId && activeVersion ? () => fetchVersionDetails(pageId, activeVersion) : null
+  );
+
+  const handleRestoreVersion = async () => {
+    if (!restoreEnabled) return;
+    setIsRestoring(true);
+    await handleRestore(versionDetails?.description_html ?? "<p></p>")
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Page version restored.",
+        });
+        handleClose();
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Failed to restore page version.",
+        })
+      )
+      .finally(() => setIsRestoring(false));
+  };
+
+  const handleRetry = async () => {
+    setIsRetrying(true);
+    await mutateVersionDetails();
+    setIsRetrying(false);
+  };
+
+  const VersionEditor = editorComponent;
+
+  return (
+    <div className="flex flex-grow flex-col overflow-hidden">
+      {versionDetailsError ? (
+        <div className="grid flex-grow place-items-center">
+          <div className="flex flex-col items-center gap-4 text-center">
+            <span className="grid size-11 flex-shrink-0 place-items-center text-tertiary">
+              <WarningTriangleOutline className="size-10" />
+            </span>
+            <div>
+              <h6 className="text-16 font-semibold">Something went wrong!</h6>
+              <p className="text-13 text-tertiary">The version could not be loaded, please try again.</p>
+            </div>
+            <Button variant="link" onClick={handleRetry} loading={isRetrying}>
+              Try again
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="flex min-h-14 items-center justify-between gap-2 border-b border-subtle px-5 py-3">
+            <div className="flex items-center gap-4">
+              <h6 className="text-14 font-medium">
+                {versionDetails
+                  ? `${renderFormattedDate(versionDetails.last_saved_at)} ${renderFormattedTime(versionDetails.last_saved_at)}`
+                  : "Loading version details"}
+              </h6>
+              <span className="flex flex-shrink-0 items-center gap-1 rounded-sm bg-accent-primary/20 px-1.5 py-1 text-11 font-medium text-accent-primary">
+                <ShowOutline className="size-3 flex-shrink-0" />
+                View only
+              </span>
+            </div>
+            {restoreEnabled && (
+              <Button variant="primary" className="flex-shrink-0" onClick={handleRestoreVersion} loading={isRestoring}>
+                {isRestoring ? "Restoring" : "Restore"}
+              </Button>
+            )}
+          </div>
+          <div className="vertical-scrollbar scrollbar-sm h-full overflow-y-scroll pt-8">
+            <VersionEditor activeVersion={activeVersion} storeType={storeType} versionDetails={versionDetails} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/pages/version/root.tsx b/apps/web/core/components/pages/version/root.tsx
new file mode 100644
index 0000000..775a583
--- /dev/null
+++ b/apps/web/core/components/pages/version/root.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useRouter, useSearchParams } from "next/navigation";
+// plane imports
+import type { TPageVersion } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { useQueryParams } from "@/hooks/use-query-params";
+// plane web imports
+import type { EPageStoreType } from "@/hooks/store";
+// local imports
+import { PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM, PAGE_NAVIGATION_PANE_WIDTH } from "../navigation-pane";
+import type { TVersionEditorProps } from "./editor";
+import { PageVersionsMainContent } from "./main-content";
+
+type Props = {
+  editorComponent: React.FC<TVersionEditorProps>;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  handleRestore: (descriptionHTML: string) => Promise<void>;
+  pageId: string;
+  restoreEnabled: boolean;
+  storeType: EPageStoreType;
+};
+
+export const PageVersionsOverlay = observer(function PageVersionsOverlay(props: Props) {
+  const { editorComponent, fetchVersionDetails, handleRestore, pageId, restoreEnabled, storeType } = props;
+  // navigation
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // query params
+  const { updateQueryParams } = useQueryParams();
+  // derived values
+  const activeVersion = searchParams.get(PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM);
+  const isOpen = !!activeVersion;
+
+  const handleClose = useCallback(() => {
+    const updatedRoute = updateQueryParams({
+      paramsToRemove: [PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM],
+    });
+    router.push(updatedRoute);
+  }, [router, updateQueryParams]);
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-0 z-[16] flex h-full overflow-hidden bg-surface-1 opacity-0 transition-opacity",
+        {
+          "pointer-events-auto opacity-100": isOpen,
+        }
+      )}
+      style={{
+        width: `calc(100% - ${PAGE_NAVIGATION_PANE_WIDTH}px)`,
+      }}
+    >
+      <PageVersionsMainContent
+        activeVersion={activeVersion}
+        editorComponent={editorComponent}
+        fetchVersionDetails={fetchVersionDetails}
+        handleClose={handleClose}
+        handleRestore={handleRestore}
+        pageId={pageId}
+        restoreEnabled={restoreEnabled}
+        storeType={storeType}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/power-k/actions/helper.ts b/apps/web/core/components/power-k/actions/helper.ts
new file mode 100644
index 0000000..a72f9d4
--- /dev/null
+++ b/apps/web/core/components/power-k/actions/helper.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { store } from "@/lib/store-context";
+
+export const openProjectAndScrollToSidebar = (itemProjectId: string | undefined) => {
+  if (!itemProjectId) {
+    console.warn("No project id provided. Cannot open project and scroll to sidebar.");
+    return;
+  }
+  // open the project list
+  store.commandPalette.toggleProjectListOpen(itemProjectId, true);
+  // scroll to the element
+  const scrollElementId = `sidebar-${itemProjectId}-JOINED`;
+  const scrollElement = document.getElementById(scrollElementId);
+  // if the element exists, scroll to it
+  if (scrollElement) {
+    setTimeout(() => {
+      scrollElement.scrollIntoView({ behavior: "smooth", block: "start" });
+      // Restart the highlight animation every time
+      scrollElement.style.animation = "none";
+      // Trigger a reflow to ensure the animation is restarted
+      void scrollElement.offsetWidth;
+      // Restart the highlight animation
+      scrollElement.style.animation = "highlight 2s ease-in-out";
+    });
+  }
+};
diff --git a/apps/web/core/components/power-k/config/account-commands.ts b/apps/web/core/components/power-k/config/account-commands.ts
new file mode 100644
index 0000000..e726a30
--- /dev/null
+++ b/apps/web/core/components/power-k/config/account-commands.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { LogOutOutline, MailOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// hooks
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+/**
+ * Account commands - Account related commands
+ */
+export const usePowerKAccountCommands = (): TPowerKCommandConfig[] => {
+  // navigation
+  const router = useAppRouter();
+  // store
+  const { signOut } = useUser();
+  // translation
+  const { t } = useTranslation();
+
+  const handleSignOut = useCallback(() => {
+    signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("auth.sign_out.toast.error.title"),
+        message: t("auth.sign_out.toast.error.message"),
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [signOut]);
+
+  return [
+    {
+      id: "workspace_invites",
+      type: "action",
+      group: "account",
+      i18n_title: "power_k.account_actions.workspace_invites",
+      icon: MailOutline,
+      action: () => router.push("/invitations"),
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "sign_out",
+      type: "action",
+      group: "account",
+      i18n_title: "power_k.account_actions.sign_out",
+      icon: LogOutOutline,
+      action: handleSignOut,
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+  ];
+};
diff --git a/apps/web/core/components/power-k/config/commands.ts b/apps/web/core/components/power-k/config/commands.ts
new file mode 100644
index 0000000..eef139a
--- /dev/null
+++ b/apps/web/core/components/power-k/config/commands.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import type { TPowerKCommandConfig } from "../core/types";
+import { usePowerKContextBasedActions } from "../ui/pages/context-based";
+import { usePowerKAccountCommands } from "./account-commands";
+import { usePowerKCreationCommands } from "./creation/root";
+import { usePowerKHelpCommands } from "./help-commands";
+import { usePowerKMiscellaneousCommands } from "./miscellaneous-commands";
+import { usePowerKNavigationCommands } from "./navigation/root";
+import { usePowerKPreferencesCommands } from "./preferences-commands";
+
+export const useProjectsAppPowerKCommands = (): TPowerKCommandConfig[] => {
+  const navigationCommands = usePowerKNavigationCommands();
+  const creationCommands = usePowerKCreationCommands();
+  const contextualCommands = usePowerKContextBasedActions();
+  const accountCommands = usePowerKAccountCommands();
+  const miscellaneousCommands = usePowerKMiscellaneousCommands();
+  const preferencesCommands = usePowerKPreferencesCommands();
+  const helpCommands = usePowerKHelpCommands();
+
+  return [
+    ...navigationCommands,
+    ...creationCommands,
+    ...contextualCommands,
+    ...accountCommands,
+    ...miscellaneousCommands,
+    ...preferencesCommands,
+    ...helpCommands,
+  ];
+};
diff --git a/apps/web/core/components/power-k/config/creation/command.ts b/apps/web/core/components/power-k/config/creation/command.ts
new file mode 100644
index 0000000..a6fb815
--- /dev/null
+++ b/apps/web/core/components/power-k/config/creation/command.ts
@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { SquarePlus } from "lucide-react";
+import {
+  CreateFolderOutline,
+  CyclesOutline,
+  DocumentationOutline,
+  ModuleOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+// components
+import { EUserProjectRoles } from "@plane/types";
+import type { TPowerKCommandConfig, TPowerKContext } from "@/components/power-k/core/types";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+import { useInstance } from "@/hooks/store/use-instance";
+
+export type TPowerKCreationCommandKeys =
+  | "create_work_item"
+  | "create_page"
+  | "create_view"
+  | "create_cycle"
+  | "create_module"
+  | "create_project"
+  | "create_workspace";
+
+/**
+ * Creation commands - Create any entity in the app
+ */
+export const usePowerKCreationCommandsRecord = (): Record<TPowerKCreationCommandKeys, TPowerKCommandConfig> => {
+  // store
+  const { config } = useInstance();
+  const {
+    canPerformAnyCreateAction,
+    permission: { allowPermissions },
+  } = useUser();
+  const { workspaceProjectIds, getPartialProjectById } = useProject();
+  const {
+    toggleCreateIssueModal,
+    toggleCreateProjectModal,
+    toggleCreateCycleModal,
+    toggleCreateModuleModal,
+    toggleCreateViewModal,
+    toggleCreatePageModal,
+  } = useCommandPalette();
+  // derived values
+  const canCreateWorkItem = canPerformAnyCreateAction && workspaceProjectIds && workspaceProjectIds.length > 0;
+  const canCreateProject = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const hasProjectMemberLevelPermissions = (ctx: TPowerKContext) =>
+    allowPermissions(
+      [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      ctx.params.workspaceSlug?.toString(),
+      ctx.params.projectId?.toString()
+    );
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? false;
+
+  const getProjectDetails = (ctx: TPowerKContext) =>
+    ctx.params.projectId ? getPartialProjectById(ctx.params.projectId.toString()) : undefined;
+
+  return {
+    create_work_item: {
+      id: "create_work_item",
+      type: "action",
+      group: "create",
+      i18n_title: "power_k.creation_actions.create_work_item",
+      icon: WorkItemsOutline,
+      keySequence: "ni",
+      action: () => toggleCreateIssueModal(true),
+      isEnabled: () => Boolean(canCreateWorkItem),
+      isVisible: () => Boolean(canCreateWorkItem),
+      closeOnSelect: true,
+    },
+    create_page: {
+      id: "create_page",
+      type: "action",
+      group: "create",
+      i18n_title: "power_k.creation_actions.create_page",
+      icon: DocumentationOutline,
+      keySequence: "nd",
+      action: () => toggleCreatePageModal({ isOpen: true }),
+      isEnabled: (ctx) => Boolean(getProjectDetails(ctx)?.page_view && hasProjectMemberLevelPermissions(ctx)),
+      isVisible: (ctx) =>
+        Boolean(ctx.params.projectId && getProjectDetails(ctx)?.page_view && hasProjectMemberLevelPermissions(ctx)),
+      closeOnSelect: true,
+    },
+    create_view: {
+      id: "create_view",
+      type: "action",
+      group: "create",
+      i18n_title: "power_k.creation_actions.create_view",
+      icon: WorkItemsOutline,
+      keySequence: "nv",
+      action: () => toggleCreateViewModal(true),
+      isEnabled: (ctx) => Boolean(getProjectDetails(ctx)?.issue_views_view && hasProjectMemberLevelPermissions(ctx)),
+      isVisible: (ctx) =>
+        Boolean(
+          ctx.params.projectId && getProjectDetails(ctx)?.issue_views_view && hasProjectMemberLevelPermissions(ctx)
+        ),
+      closeOnSelect: true,
+    },
+    create_cycle: {
+      id: "create_cycle",
+      type: "action",
+      group: "create",
+      i18n_title: "power_k.creation_actions.create_cycle",
+      icon: CyclesOutline,
+      keySequence: "nc",
+      action: () => toggleCreateCycleModal(true),
+      isEnabled: (ctx) => Boolean(getProjectDetails(ctx)?.cycle_view && hasProjectMemberLevelPermissions(ctx)),
+      isVisible: (ctx) =>
+        Boolean(ctx.params.projectId && getProjectDetails(ctx)?.cycle_view && hasProjectMemberLevelPermissions(ctx)),
+      closeOnSelect: true,
+    },
+    create_module: {
+      id: "create_module",
+      type: "action",
+      group: "create",
+      i18n_title: "power_k.creation_actions.create_module",
+      icon: ModuleOutline,
+      keySequence: "nm",
+      action: () => toggleCreateModuleModal(true),
+      isEnabled: (ctx) => Boolean(getProjectDetails(ctx)?.module_view && hasProjectMemberLevelPermissions(ctx)),
+      isVisible: (ctx) =>
+        Boolean(ctx.params.projectId && getProjectDetails(ctx)?.module_view && hasProjectMemberLevelPermissions(ctx)),
+      closeOnSelect: true,
+    },
+    create_project: {
+      id: "create_project",
+      type: "action",
+      group: "create",
+      i18n_title: "power_k.creation_actions.create_project",
+      icon: CreateFolderOutline,
+      keySequence: "np",
+      action: () => toggleCreateProjectModal(true),
+      isEnabled: () => Boolean(canCreateProject),
+      isVisible: () => Boolean(canCreateProject),
+      closeOnSelect: true,
+    },
+    create_workspace: {
+      id: "create_workspace",
+      type: "action",
+      group: "create",
+      i18n_title: "power_k.creation_actions.create_workspace",
+      icon: SquarePlus,
+      action: (ctx) => ctx.router.push("/create-workspace"),
+      isEnabled: () => Boolean(!isWorkspaceCreationDisabled),
+      isVisible: () => Boolean(!isWorkspaceCreationDisabled),
+      closeOnSelect: true,
+    },
+  };
+};
diff --git a/apps/web/core/components/power-k/config/creation/root.ts b/apps/web/core/components/power-k/config/creation/root.ts
new file mode 100644
index 0000000..10bc943
--- /dev/null
+++ b/apps/web/core/components/power-k/config/creation/root.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// local imports
+import { usePowerKCreationCommandsRecord } from "./command";
+import type { TPowerKCreationCommandKeys } from "./command";
+
+export const usePowerKCreationCommands = (): TPowerKCommandConfig[] => {
+  const optionsList: Record<TPowerKCreationCommandKeys, TPowerKCommandConfig> = usePowerKCreationCommandsRecord();
+  return [
+    optionsList["create_work_item"],
+    optionsList["create_page"],
+    optionsList["create_view"],
+    optionsList["create_cycle"],
+    optionsList["create_module"],
+    optionsList["create_project"],
+    optionsList["create_workspace"],
+  ];
+};
diff --git a/apps/web/core/components/power-k/config/help-commands.ts b/apps/web/core/components/power-k/config/help-commands.ts
new file mode 100644
index 0000000..3481b9f
--- /dev/null
+++ b/apps/web/core/components/power-k/config/help-commands.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ChatOutline, DocumentationOutline, Github, RocketOutline } from "@makeplane/propel/icons";
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// hooks
+import { usePowerK } from "@/hooks/store/use-power-k";
+
+/**
+ * Help commands - Help related commands
+ */
+export const usePowerKHelpCommands = (): TPowerKCommandConfig[] => {
+  // store
+  const { toggleShortcutsListModal } = usePowerK();
+
+  return [
+    {
+      id: "open_keyboard_shortcuts",
+      type: "action",
+      group: "help",
+      i18n_title: "power_k.help_actions.open_keyboard_shortcuts",
+      icon: RocketOutline,
+      modifierShortcut: "cmd+/",
+      action: () => toggleShortcutsListModal(true),
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "open_plane_documentation",
+      type: "action",
+      group: "help",
+      i18n_title: "power_k.help_actions.open_plane_documentation",
+      icon: DocumentationOutline,
+      action: () => {
+        window.open("https://docs.plane.so/", "_blank", "noopener,noreferrer");
+      },
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "join_forum",
+      type: "action",
+      group: "help",
+      i18n_title: "power_k.help_actions.join_forum",
+      icon: ChatOutline,
+      action: () => {
+        window.open("https://forum.plane.so", "_blank", "noopener,noreferrer");
+      },
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "report_bug",
+      type: "action",
+      group: "help",
+      i18n_title: "power_k.help_actions.report_bug",
+      icon: Github,
+      action: () => {
+        window.open("https://github.com/makeplane/plane/issues/new/choose", "_blank", "noopener,noreferrer");
+      },
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+  ];
+};
diff --git a/apps/web/core/components/power-k/config/miscellaneous-commands.ts b/apps/web/core/components/power-k/config/miscellaneous-commands.ts
new file mode 100644
index 0000000..2432a4b
--- /dev/null
+++ b/apps/web/core/components/power-k/config/miscellaneous-commands.ts
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { LeftSidePaneOutline, LinkOutline, SearchOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+// plane imports
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { copyTextToClipboard } from "@plane/utils";
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { usePowerK } from "@/hooks/store/use-power-k";
+
+export const usePowerKMiscellaneousCommands = (): TPowerKCommandConfig[] => {
+  // store hooks
+  const { toggleSidebar } = useAppTheme();
+  const { topNavInputRef, topNavSearchInputRef } = usePowerK();
+  // translation
+  const { t } = useTranslation();
+
+  const copyCurrentPageUrlToClipboard = useCallback(() => {
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("power_k.miscellaneous_actions.copy_current_page_url_toast_success"),
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("power_k.miscellaneous_actions.copy_current_page_url_toast_error"),
+        });
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const focusTopNavSearch = useCallback(() => {
+    // Focus PowerK input if available, otherwise focus regular search input
+    if (topNavSearchInputRef?.current) {
+      topNavSearchInputRef.current.focus();
+    } else if (topNavInputRef?.current) {
+      topNavInputRef.current.focus();
+    }
+  }, [topNavInputRef, topNavSearchInputRef]);
+
+  return [
+    {
+      id: "toggle_app_sidebar",
+      group: "miscellaneous",
+      type: "action",
+      i18n_title: "power_k.miscellaneous_actions.toggle_app_sidebar",
+      icon: LeftSidePaneOutline,
+      action: () => toggleSidebar(),
+      modifierShortcut: "cmd+b",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "copy_current_page_url",
+      group: "miscellaneous",
+      type: "action",
+      i18n_title: "power_k.miscellaneous_actions.copy_current_page_url",
+      icon: LinkOutline,
+      action: copyCurrentPageUrlToClipboard,
+      modifierShortcut: "cmd+shift+c",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "focus_top_nav_search",
+      group: "miscellaneous",
+      type: "action",
+      i18n_title: "power_k.miscellaneous_actions.focus_top_nav_search",
+      icon: SearchOutline,
+      action: focusTopNavSearch,
+      modifierShortcut: "cmd+f",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+  ];
+};
diff --git a/apps/web/core/components/power-k/config/navigation/commands.ts b/apps/web/core/components/power-k/config/navigation/commands.ts
new file mode 100644
index 0000000..22e1558
--- /dev/null
+++ b/apps/web/core/components/power-k/config/navigation/commands.ts
@@ -0,0 +1,538 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  ActivityOutline,
+  ArchiveOutline,
+  BarOutline,
+  CyclesOutline,
+  DocumentationOutline,
+  EditOutline,
+  HomeOutline,
+  InboxOutline,
+  IntakeOutline,
+  ModuleOutline,
+  ProjectsOutline,
+  SettingsOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import type { ICycle, IModule, IPartialProject, IProjectView, IWorkspace } from "@plane/types";
+import { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
+// components
+import type { TPowerKCommandConfig, TPowerKContext } from "@/components/power-k/core/types";
+import { handlePowerKNavigate } from "@/components/power-k/utils/navigation";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+
+export type TPowerKNavigationCommandKeys =
+  | "open_workspace"
+  | "nav_home"
+  | "nav_inbox"
+  | "nav_your_work"
+  | "nav_account_settings"
+  | "open_project"
+  | "nav_projects_list"
+  | "nav_all_workspace_work_items"
+  | "nav_assigned_workspace_work_items"
+  | "nav_created_workspace_work_items"
+  | "nav_subscribed_workspace_work_items"
+  | "nav_workspace_analytics"
+  | "nav_workspace_drafts"
+  | "nav_workspace_archives"
+  | "open_workspace_setting"
+  | "nav_workspace_settings"
+  | "nav_project_work_items"
+  | "open_project_cycle"
+  | "nav_project_cycles"
+  | "open_project_module"
+  | "nav_project_modules"
+  | "open_project_view"
+  | "nav_project_views"
+  | "nav_project_pages"
+  | "nav_project_intake"
+  | "nav_project_archives"
+  | "open_project_setting"
+  | "nav_project_settings";
+
+/**
+ * Navigation commands - Navigate to all pages in the app
+ */
+export const usePowerKNavigationCommandsRecord = (): Record<TPowerKNavigationCommandKeys, TPowerKCommandConfig> => {
+  // store hooks
+  const {
+    data: currentUser,
+    permission: { allowPermissions },
+  } = useUser();
+  const { getPartialProjectById } = useProject();
+  // derived values
+  const hasWorkspaceMemberLevelPermissions = (ctx: TPowerKContext) =>
+    allowPermissions(
+      [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      EUserPermissionsLevel.WORKSPACE,
+      ctx.params.workspaceSlug?.toString()
+    );
+  const hasProjectMemberLevelPermissions = (ctx: TPowerKContext) =>
+    allowPermissions(
+      [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      ctx.params.workspaceSlug?.toString(),
+      ctx.params.projectId?.toString()
+    );
+  const baseWorkspaceConditions = (ctx: TPowerKContext) => Boolean(ctx.params.workspaceSlug?.toString());
+  const baseProjectConditions = (ctx: TPowerKContext) =>
+    Boolean(ctx.params.workspaceSlug?.toString() && ctx.params.projectId?.toString());
+  const getContextProject = (ctx: TPowerKContext) => getPartialProjectById(ctx.params.projectId?.toString());
+
+  return {
+    open_workspace: {
+      id: "open_workspace",
+      type: "change-page",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.open_workspace",
+      icon: ProjectsOutline,
+      keySequence: "ow",
+      page: "open-workspace",
+      onSelect: (data, ctx) => {
+        const workspaceDetails = data as IWorkspace;
+        handlePowerKNavigate(ctx, [workspaceDetails.slug]);
+      },
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_home: {
+      id: "nav_home",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_home",
+      icon: HomeOutline,
+      keySequence: "gh",
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString()]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_inbox: {
+      id: "nav_inbox",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_inbox",
+      icon: InboxOutline,
+      keySequence: "gx",
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "notifications"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_your_work: {
+      id: "nav_your_work",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_your_work",
+      icon: ActivityOutline,
+      keySequence: "gy",
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "profile", currentUser?.id]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx) && hasWorkspaceMemberLevelPermissions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx) && hasWorkspaceMemberLevelPermissions(ctx),
+      closeOnSelect: true,
+    },
+    nav_account_settings: {
+      id: "nav_account_settings",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_account_settings",
+      icon: SettingsOutline,
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "settings", "account"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    open_project: {
+      id: "open_project",
+      type: "change-page",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.open_project",
+      icon: ProjectsOutline,
+      keySequence: "op",
+      page: "open-project",
+      onSelect: (data, ctx) => {
+        const projectDetails = data as IPartialProject;
+        handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "projects", projectDetails.id, "issues"]);
+      },
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_projects_list: {
+      id: "nav_projects_list",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_projects_list",
+      icon: ProjectsOutline,
+      keySequence: "gp",
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "projects"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_all_workspace_work_items: {
+      id: "nav_all_workspace_work_items",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_all_workspace_work_items",
+      icon: WorkItemsOutline,
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "workspace-views", "all-issues"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_assigned_workspace_work_items: {
+      id: "nav_assigned_workspace_work_items",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_assigned_workspace_work_items",
+      icon: WorkItemsOutline,
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "workspace-views", "assigned"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_created_workspace_work_items: {
+      id: "nav_created_workspace_work_items",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_created_workspace_work_items",
+      icon: WorkItemsOutline,
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "workspace-views", "created"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_subscribed_workspace_work_items: {
+      id: "nav_subscribed_workspace_work_items",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_subscribed_workspace_work_items",
+      icon: WorkItemsOutline,
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "workspace-views", "subscribed"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_workspace_analytics: {
+      id: "nav_workspace_analytics",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_workspace_analytics",
+      icon: BarOutline,
+      keySequence: "ga",
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "analytics", "overview"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx) && hasWorkspaceMemberLevelPermissions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx) && hasWorkspaceMemberLevelPermissions(ctx),
+      closeOnSelect: true,
+    },
+    nav_workspace_drafts: {
+      id: "nav_workspace_drafts",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_workspace_drafts",
+      icon: EditOutline,
+      keySequence: "gj",
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "drafts"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx) && hasWorkspaceMemberLevelPermissions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx) && hasWorkspaceMemberLevelPermissions(ctx),
+      closeOnSelect: true,
+    },
+    nav_workspace_archives: {
+      id: "nav_workspace_archives",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_workspace_archives",
+      icon: ArchiveOutline,
+      keySequence: "gr",
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "projects", "archives"]),
+      isEnabled: (ctx) =>
+        baseWorkspaceConditions(ctx) && !baseProjectConditions(ctx) && hasWorkspaceMemberLevelPermissions(ctx),
+      isVisible: (ctx) =>
+        baseWorkspaceConditions(ctx) && !baseProjectConditions(ctx) && hasWorkspaceMemberLevelPermissions(ctx),
+      closeOnSelect: true,
+    },
+    open_workspace_setting: {
+      id: "open_workspace_setting",
+      type: "change-page",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.open_workspace_setting",
+      icon: SettingsOutline,
+      keySequence: "os",
+      page: "open-workspace-setting",
+      onSelect: (data, ctx) => {
+        const settingsHref = data as string;
+        handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), settingsHref]);
+      },
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx) && !baseProjectConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx) && !baseProjectConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_workspace_settings: {
+      id: "nav_workspace_settings",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_workspace_settings",
+      icon: SettingsOutline,
+      keySequence: "gs",
+      action: (ctx) => handlePowerKNavigate(ctx, [ctx.params.workspaceSlug?.toString(), "settings"]),
+      isEnabled: (ctx) => baseWorkspaceConditions(ctx) && !baseProjectConditions(ctx),
+      isVisible: (ctx) => baseWorkspaceConditions(ctx) && !baseProjectConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_project_work_items: {
+      id: "nav_project_work_items",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_project_work_items",
+      icon: WorkItemsOutline,
+      keySequence: "gi",
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "issues",
+        ]),
+      isEnabled: (ctx) => baseProjectConditions(ctx),
+      isVisible: (ctx) => baseProjectConditions(ctx),
+      closeOnSelect: true,
+    },
+    open_project_cycle: {
+      id: "open_project_cycle",
+      type: "change-page",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.open_project_cycle",
+      icon: CyclesOutline,
+      keySequence: "oc",
+      page: "open-project-cycle",
+      onSelect: (data, ctx) => {
+        const cycleDetails = data as ICycle;
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "cycles",
+          cycleDetails.id,
+        ]);
+      },
+      isEnabled: (ctx) =>
+        baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx) && !!getContextProject(ctx)?.cycle_view,
+      isVisible: (ctx) =>
+        baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx) && !!getContextProject(ctx)?.cycle_view,
+      closeOnSelect: true,
+    },
+    nav_project_cycles: {
+      id: "nav_project_cycles",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_project_cycles",
+      icon: CyclesOutline,
+      keySequence: "gc",
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "cycles",
+        ]),
+      isEnabled: (ctx) =>
+        baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx) && !!getContextProject(ctx)?.cycle_view,
+      isVisible: (ctx) =>
+        baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx) && !!getContextProject(ctx)?.cycle_view,
+      closeOnSelect: true,
+    },
+    open_project_module: {
+      id: "open_project_module",
+      type: "change-page",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.open_project_module",
+      icon: ModuleOutline,
+      keySequence: "om",
+      page: "open-project-module",
+      onSelect: (data, ctx) => {
+        const moduleDetails = data as IModule;
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "modules",
+          moduleDetails.id,
+        ]);
+      },
+      isEnabled: (ctx) =>
+        baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx) && !!getContextProject(ctx)?.module_view,
+      isVisible: (ctx) =>
+        baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx) && !!getContextProject(ctx)?.module_view,
+      closeOnSelect: true,
+    },
+    nav_project_modules: {
+      id: "nav_project_modules",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_project_modules",
+      icon: ModuleOutline,
+      keySequence: "gm",
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "modules",
+        ]),
+      isEnabled: (ctx) =>
+        baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx) && !!getContextProject(ctx)?.module_view,
+      isVisible: (ctx) =>
+        baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx) && !!getContextProject(ctx)?.module_view,
+      closeOnSelect: true,
+    },
+    open_project_view: {
+      id: "open_project_view",
+      type: "change-page",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.open_project_view",
+      icon: WorkItemsOutline,
+      keySequence: "ov",
+      page: "open-project-view",
+      onSelect: (data, ctx) => {
+        const viewDetails = data as IProjectView;
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "views",
+          viewDetails.id,
+        ]);
+      },
+      isEnabled: (ctx) => baseProjectConditions(ctx) && !!getContextProject(ctx)?.issue_views_view,
+      isVisible: (ctx) => baseProjectConditions(ctx) && !!getContextProject(ctx)?.issue_views_view,
+      closeOnSelect: true,
+    },
+    nav_project_views: {
+      id: "nav_project_views",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_project_views",
+      icon: WorkItemsOutline,
+      keySequence: "gv",
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "views",
+        ]),
+      isEnabled: (ctx) => baseProjectConditions(ctx) && !!getContextProject(ctx)?.issue_views_view,
+      isVisible: (ctx) => baseProjectConditions(ctx) && !!getContextProject(ctx)?.issue_views_view,
+      closeOnSelect: true,
+    },
+    nav_project_pages: {
+      id: "nav_project_pages",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_project_pages",
+      icon: DocumentationOutline,
+      keySequence: "gd",
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "pages",
+        ]),
+      isEnabled: (ctx) => baseProjectConditions(ctx) && !!getContextProject(ctx)?.page_view,
+      isVisible: (ctx) => baseProjectConditions(ctx) && !!getContextProject(ctx)?.page_view,
+      closeOnSelect: true,
+    },
+    nav_project_intake: {
+      id: "nav_project_intake",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_project_intake",
+      icon: IntakeOutline,
+      keySequence: "gk",
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "intake",
+        ]),
+      isEnabled: (ctx) => baseProjectConditions(ctx) && !!getContextProject(ctx)?.inbox_view,
+      isVisible: (ctx) => baseProjectConditions(ctx) && !!getContextProject(ctx)?.inbox_view,
+      closeOnSelect: true,
+    },
+    nav_project_archives: {
+      id: "nav_project_archives",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_project_archives",
+      icon: ArchiveOutline,
+      keySequence: "gr",
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "projects",
+          ctx.params.projectId?.toString(),
+          "archives",
+          "issues",
+        ]),
+      isEnabled: (ctx) => baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx),
+      isVisible: (ctx) => baseProjectConditions(ctx) && hasProjectMemberLevelPermissions(ctx),
+      closeOnSelect: true,
+    },
+    open_project_setting: {
+      id: "open_project_setting",
+      type: "change-page",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.open_project_setting",
+      icon: SettingsOutline,
+      keySequence: "os",
+      page: "open-project-setting",
+      onSelect: (data, ctx) => {
+        const settingsHref = data as string;
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "settings",
+          "projects",
+          ctx.params.projectId?.toString(),
+          settingsHref,
+        ]);
+      },
+      isEnabled: (ctx) => baseProjectConditions(ctx),
+      isVisible: (ctx) => baseProjectConditions(ctx),
+      closeOnSelect: true,
+    },
+    nav_project_settings: {
+      id: "nav_project_settings",
+      type: "action",
+      group: "navigation",
+      i18n_title: "power_k.navigation_actions.nav_project_settings",
+      icon: SettingsOutline,
+      keySequence: "gs",
+      action: (ctx) =>
+        handlePowerKNavigate(ctx, [
+          ctx.params.workspaceSlug?.toString(),
+          "settings",
+          "projects",
+          ctx.params.projectId?.toString(),
+        ]),
+      isEnabled: (ctx) => baseProjectConditions(ctx),
+      isVisible: (ctx) => baseProjectConditions(ctx),
+      closeOnSelect: true,
+    },
+  };
+};
diff --git a/apps/web/core/components/power-k/config/navigation/root.ts b/apps/web/core/components/power-k/config/navigation/root.ts
new file mode 100644
index 0000000..b2f8cb2
--- /dev/null
+++ b/apps/web/core/components/power-k/config/navigation/root.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// local imports
+import type { TPowerKNavigationCommandKeys } from "./commands";
+import { usePowerKNavigationCommandsRecord } from "./commands";
+
+export const usePowerKNavigationCommands = (): TPowerKCommandConfig[] => {
+  const optionsList: Record<TPowerKNavigationCommandKeys, TPowerKCommandConfig> = usePowerKNavigationCommandsRecord();
+
+  return [
+    // Open actions from lowest to highest scope
+    optionsList["open_project_cycle"],
+    optionsList["open_project_module"],
+    optionsList["open_project_view"],
+    optionsList["open_project_setting"],
+    optionsList["open_project"],
+    optionsList["open_workspace_setting"],
+    optionsList["open_workspace"],
+    // User-Level Navigation
+    optionsList["nav_home"],
+    optionsList["nav_inbox"],
+    optionsList["nav_your_work"],
+    // Project-Level Navigation (Only visible in project context)
+    optionsList["nav_project_work_items"],
+    optionsList["nav_project_pages"],
+    optionsList["nav_project_cycles"],
+    optionsList["nav_project_modules"],
+    optionsList["nav_project_views"],
+    optionsList["nav_project_intake"],
+    optionsList["nav_project_settings"],
+    optionsList["nav_project_archives"],
+    // Navigate to workspace-level pages
+    optionsList["nav_all_workspace_work_items"],
+    optionsList["nav_assigned_workspace_work_items"],
+    optionsList["nav_created_workspace_work_items"],
+    optionsList["nav_subscribed_workspace_work_items"],
+    optionsList["nav_workspace_analytics"],
+    optionsList["nav_workspace_settings"],
+    optionsList["nav_workspace_drafts"],
+    optionsList["nav_workspace_archives"],
+    optionsList["nav_projects_list"],
+    // Account-Level Navigation
+    optionsList["nav_account_settings"],
+  ];
+};
diff --git a/apps/web/core/components/power-k/config/preferences-commands.ts b/apps/web/core/components/power-k/config/preferences-commands.ts
new file mode 100644
index 0000000..499db1c
--- /dev/null
+++ b/apps/web/core/components/power-k/config/preferences-commands.ts
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { useTheme } from "next-themes";
+import { Languages } from "lucide-react";
+import { CalendarOutline, GlobeOutline, PaletteOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { EStartOfTheWeek, TUserProfile } from "@plane/types";
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// hooks
+import { useUser, useUserProfile } from "@/hooks/store/user";
+
+/**
+ * Preferences commands - Preferences related commands
+ */
+export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
+  // store hooks
+  const { setTheme } = useTheme();
+  const { updateCurrentUser } = useUser();
+  const { updateUserProfile, updateUserTheme } = useUserProfile();
+  // translation
+  const { t } = useTranslation();
+
+  const handleUpdateTheme = useCallback(
+    async (newTheme: string) => {
+      setTheme(newTheme);
+      return updateUserTheme({ theme: newTheme })
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Theme updated",
+            message: "Reloading to apply changes...",
+          });
+          // reload the page after showing the toast
+          window.location.reload();
+          return;
+        })
+        .catch(() => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("power_k.preferences_actions.toast.theme.error"),
+          });
+          return;
+        });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [setTheme, updateUserTheme]
+  );
+
+  const handleUpdateTimezone = useCallback(
+    (value: string) => {
+      updateCurrentUser({ user_timezone: value })
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("toast.success"),
+            message: t("power_k.preferences_actions.toast.timezone.success"),
+          });
+          return;
+        })
+        .catch(() => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("power_k.preferences_actions.toast.timezone.error"),
+          });
+          return;
+        });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [updateCurrentUser]
+  );
+
+  const handleUpdateUserProfile = useCallback(
+    (payload: Partial<TUserProfile>) => {
+      updateUserProfile(payload)
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("toast.success"),
+            message: t("power_k.preferences_actions.toast.generic.success"),
+          });
+          return;
+        })
+        .catch(() => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("power_k.preferences_actions.toast.generic.error"),
+          });
+          return;
+        });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [updateUserProfile]
+  );
+
+  return [
+    {
+      id: "update_interface_theme",
+      group: "preferences",
+      type: "change-page",
+      page: "update-theme",
+      i18n_title: "power_k.preferences_actions.update_theme",
+      icon: PaletteOutline,
+      onSelect: (data) => {
+        const theme = data as string;
+        void handleUpdateTheme(theme);
+      },
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "update_timezone",
+      group: "preferences",
+      page: "update-timezone",
+      type: "change-page",
+      i18n_title: "power_k.preferences_actions.update_timezone",
+      icon: GlobeOutline,
+      onSelect: (data) => {
+        const timezone = data as string;
+        handleUpdateTimezone(timezone);
+      },
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "update_start_of_week",
+      group: "preferences",
+      page: "update-start-of-week",
+      type: "change-page",
+      i18n_title: "power_k.preferences_actions.update_start_of_week",
+      icon: CalendarOutline,
+      onSelect: (data) => {
+        const startOfWeek = data as EStartOfTheWeek;
+        handleUpdateUserProfile({ start_of_the_week: startOfWeek });
+      },
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "update_interface_language",
+      group: "preferences",
+      page: "update-language",
+      type: "change-page",
+      i18n_title: "power_k.preferences_actions.update_language",
+      icon: Languages,
+      onSelect: (data) => {
+        const language = data as string;
+        handleUpdateUserProfile({ language });
+      },
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+  ];
+};
diff --git a/apps/web/core/components/power-k/core/context-detector.ts b/apps/web/core/components/power-k/core/context-detector.ts
new file mode 100644
index 0000000..0111896
--- /dev/null
+++ b/apps/web/core/components/power-k/core/context-detector.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Params } from "react-router";
+// local imports
+import type { TPowerKContextType } from "./types";
+
+export const detectContextFromURL = (params: Params): TPowerKContextType | null => {
+  if (params.workItem) return "work-item";
+  if (params.cycleId) return "cycle";
+  if (params.moduleId) return "module";
+  if (params.pageId) return "page";
+
+  return null;
+};
diff --git a/apps/web/core/components/power-k/core/registry.ts b/apps/web/core/components/power-k/core/registry.ts
new file mode 100644
index 0000000..08ed75a
--- /dev/null
+++ b/apps/web/core/components/power-k/core/registry.ts
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, observable, makeObservable } from "mobx";
+import { computedFn } from "mobx-utils";
+import type { TPowerKCommandConfig, TPowerKContext, TPowerKCommandGroup } from "./types";
+
+export interface IPowerKCommandRegistry {
+  // observables
+  commands: Map<string, TPowerKCommandConfig>;
+  // Registration
+  register(command: TPowerKCommandConfig): void;
+  registerMultiple(commands: TPowerKCommandConfig[]): void;
+  // Retrieval
+  getCommand(id: string): TPowerKCommandConfig | undefined;
+  getAllCommands(): TPowerKCommandConfig[];
+  getAllCommandsWithShortcuts(): TPowerKCommandConfig[];
+  getVisibleCommands(ctx: TPowerKContext): TPowerKCommandConfig[];
+  getCommandsByGroup(group: TPowerKCommandGroup, ctx: TPowerKContext): TPowerKCommandConfig[];
+  // Shortcut lookup
+  getShortcutMap: (ctx: TPowerKContext) => Map<string, string>; // key -> command id
+  getKeySequenceMap: (ctx: TPowerKContext) => Map<string, string>; // sequence -> command id
+  getModifierShortcutMap: (ctx: TPowerKContext) => Map<string, string>; // modifier shortcut -> command id
+  findByShortcut(ctx: TPowerKContext, key: string): TPowerKCommandConfig | undefined;
+  findByKeySequence(ctx: TPowerKContext, sequence: string): TPowerKCommandConfig | undefined;
+  findByModifierShortcut(ctx: TPowerKContext, shortcut: string): TPowerKCommandConfig | undefined;
+  // Utility
+  clear(): void;
+}
+
+/**
+ * Stores commands and provides lookup by shortcuts, search, etc.
+ */
+export class PowerKCommandRegistry implements IPowerKCommandRegistry {
+  // observables
+  commands = new Map<string, TPowerKCommandConfig>();
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      commands: observable,
+      // actions
+      register: action,
+      registerMultiple: action,
+      clear: action,
+    });
+  }
+
+  // ============================================================================
+  // Registration
+  // ============================================================================
+
+  register: IPowerKCommandRegistry["register"] = action((command) => {
+    this.commands.set(command.id, command);
+  });
+
+  registerMultiple: IPowerKCommandRegistry["registerMultiple"] = action((commands) => {
+    commands.forEach((command) => this.register(command));
+  });
+
+  // ============================================================================
+  // Retrieval
+  // ============================================================================
+
+  getCommand: IPowerKCommandRegistry["getCommand"] = (id) => this.commands.get(id);
+
+  getAllCommands: IPowerKCommandRegistry["getAllCommands"] = () => Array.from(this.commands.values());
+
+  getAllCommandsWithShortcuts: IPowerKCommandRegistry["getAllCommandsWithShortcuts"] = () =>
+    Array.from(this.commands.values()).filter(
+      (command) => command.shortcut || command.keySequence || command.modifierShortcut
+    );
+
+  getVisibleCommands: IPowerKCommandRegistry["getVisibleCommands"] = computedFn((ctx) =>
+    Array.from(this.commands.values()).filter((command) => this.isCommandVisible(command, ctx))
+  );
+
+  getCommandsByGroup: IPowerKCommandRegistry["getCommandsByGroup"] = computedFn((group, ctx) =>
+    this.getVisibleCommands(ctx).filter((command) => command.group === group)
+  );
+
+  // ============================================================================
+  // Shortcut Lookup
+  // ============================================================================
+
+  getShortcutMap: IPowerKCommandRegistry["getShortcutMap"] = computedFn((ctx) => {
+    const shortcutMap = new Map<string, string>();
+    this.getVisibleCommands(ctx).forEach((command) => {
+      if (command.shortcut) {
+        shortcutMap.set(command.shortcut.toLowerCase(), command.id);
+      }
+    });
+    return shortcutMap;
+  });
+
+  getKeySequenceMap: IPowerKCommandRegistry["getKeySequenceMap"] = computedFn((ctx) => {
+    const keySequenceMap = new Map<string, string>();
+    this.getVisibleCommands(ctx).forEach((command) => {
+      if (command.keySequence) {
+        keySequenceMap.set(command.keySequence.toLowerCase(), command.id);
+      }
+    });
+    return keySequenceMap;
+  });
+
+  getModifierShortcutMap: IPowerKCommandRegistry["getModifierShortcutMap"] = computedFn((ctx) => {
+    const modifierShortcutMap = new Map<string, string>();
+    this.getVisibleCommands(ctx).forEach((command) => {
+      if (command.modifierShortcut) {
+        modifierShortcutMap.set(command.modifierShortcut.toLowerCase(), command.id);
+      }
+    });
+    return modifierShortcutMap;
+  });
+
+  findByShortcut: IPowerKCommandRegistry["findByShortcut"] = computedFn((ctx, key) => {
+    const commandId = this.getShortcutMap(ctx).get(key.toLowerCase());
+    return commandId ? this.commands.get(commandId) : undefined;
+  });
+
+  findByKeySequence: IPowerKCommandRegistry["findByKeySequence"] = computedFn((ctx, sequence) => {
+    const commandId = this.getKeySequenceMap(ctx).get(sequence.toLowerCase());
+    return commandId ? this.commands.get(commandId) : undefined;
+  });
+
+  findByModifierShortcut: IPowerKCommandRegistry["findByModifierShortcut"] = computedFn((ctx, shortcut) => {
+    const commandId = this.getModifierShortcutMap(ctx).get(shortcut.toLowerCase());
+    return commandId ? this.commands.get(commandId) : undefined;
+  });
+
+  // ============================================================================
+  // Utility
+  // ============================================================================
+
+  clear: IPowerKCommandRegistry["clear"] = action(() => {
+    this.commands.clear();
+  });
+
+  // ============================================================================
+  // Private Helpers
+  // ============================================================================
+
+  private isCommandVisible(command: TPowerKCommandConfig, ctx: TPowerKContext): boolean {
+    // Check custom visibility function
+    if (command.isVisible && !command.isVisible(ctx)) {
+      return false;
+    }
+
+    // Check context type filtering
+    if ("contextType" in command) {
+      // Command requires specific context
+      if (!ctx.activeContext || ctx.activeContext !== command.contextType) {
+        return false;
+      }
+
+      if (!ctx.shouldShowContextBasedActions) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+}
diff --git a/apps/web/core/components/power-k/core/shortcut-handler.ts b/apps/web/core/components/power-k/core/shortcut-handler.ts
new file mode 100644
index 0000000..85bcb27
--- /dev/null
+++ b/apps/web/core/components/power-k/core/shortcut-handler.ts
@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IPowerKCommandRegistry } from "./registry";
+import type { TPowerKCommandConfig, TPowerKContext } from "./types";
+
+/**
+ * Formats a keyboard event into a modifier shortcut string
+ * e.g., "cmd+k", "cmd+shift+,", "cmd+delete"
+ */
+export function formatModifierShortcut(e: KeyboardEvent): string {
+  const parts: string[] = [];
+
+  if (e.ctrlKey || e.metaKey) parts.push("cmd");
+  if (e.altKey) parts.push("alt");
+  if (e.shiftKey) parts.push("shift");
+
+  const key = e.key.toLowerCase();
+  parts.push(key === " " ? "space" : key);
+
+  return parts.join("+");
+}
+
+/**
+ * Checks if the event target is a typing-focused element
+ */
+export function isTypingInInput(target: EventTarget | null): boolean {
+  if (!target) return false;
+
+  if (target instanceof HTMLInputElement) return true;
+  if (target instanceof HTMLTextAreaElement) return true;
+
+  const element = target as Element;
+  if (element.classList?.contains("ProseMirror")) return true;
+  if (element.getAttribute?.("contenteditable") === "true") return true;
+
+  return false;
+}
+
+/**
+ * Global shortcut handler
+ * Handles all keyboard shortcuts: single keys, sequences, and modifiers
+ */
+export class ShortcutHandler {
+  private sequence = "";
+  private sequenceTimeout: number | null = null;
+  private registry: IPowerKCommandRegistry;
+  private getContext: () => TPowerKContext;
+  private openPalette: () => void;
+  private isEnabled = true;
+
+  constructor(registry: IPowerKCommandRegistry, getContext: () => TPowerKContext, openPalette: () => void) {
+    this.registry = registry;
+    this.getContext = getContext;
+    this.openPalette = openPalette;
+  }
+
+  /**
+   * Enable/disable the shortcut handler
+   */
+  setEnabled(enabled: boolean): void {
+    this.isEnabled = enabled;
+  }
+
+  /**
+   * Main keyboard event handler
+   */
+  handleKeyDown = (e: KeyboardEvent): void => {
+    if (!this.isEnabled) return;
+
+    const key = e.key.toLowerCase();
+    const hasModifier = e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
+
+    // Special: Cmd+K always opens command palette
+    if ((e.metaKey || e.ctrlKey) && key === "k") {
+      e.preventDefault();
+      this.openPalette();
+      return;
+    }
+
+    // Don't handle shortcuts when typing in inputs (except Cmd+K)
+    if (isTypingInInput(e.target)) {
+      return;
+    }
+
+    // Handle modifier shortcuts (Cmd+Delete, Cmd+Shift+,, etc.)
+    if (hasModifier) {
+      this.handleModifierShortcut(e);
+      return;
+    }
+
+    // Handle single key shortcuts and sequences (c, p, gm, op, etc.)
+    this.handleKeyOrSequence(e, key);
+  };
+
+  /**
+   * Handle modifier shortcuts (Cmd+X, Cmd+Shift+X, etc.)
+   */
+  private handleModifierShortcut(e: KeyboardEvent): void {
+    const shortcut = formatModifierShortcut(e);
+    const command = this.registry.findByModifierShortcut(this.getContext(), shortcut);
+
+    if (command && this.canExecuteCommand(command)) {
+      e.preventDefault();
+      this.executeCommand(command);
+    }
+  }
+
+  /**
+   * Handle single key shortcuts or build sequences (c, gm, op, etc.)
+   */
+  private handleKeyOrSequence(e: KeyboardEvent, key: string): void {
+    // Add key to sequence
+    this.sequence += key;
+
+    // Check if sequence matches a command (e.g., "gm", "op")
+    const sequenceCommand = this.registry.findByKeySequence(this.getContext(), this.sequence);
+    if (sequenceCommand && this.canExecuteCommand(sequenceCommand)) {
+      e.preventDefault();
+      this.executeCommand(sequenceCommand);
+      this.resetSequence();
+      return;
+    }
+
+    // If sequence is one character, check for single-key shortcut
+    if (this.sequence.length === 1) {
+      const singleKeyCommand = this.registry.findByShortcut(this.getContext(), key);
+      if (singleKeyCommand && this.canExecuteCommand(singleKeyCommand)) {
+        e.preventDefault();
+        this.executeCommand(singleKeyCommand);
+        this.resetSequence();
+        return;
+      }
+    }
+
+    // Reset sequence after 1 second of no typing
+    this.scheduleSequenceReset();
+  }
+
+  /**
+   * Schedule sequence reset
+   */
+  private scheduleSequenceReset(): void {
+    if (this.sequenceTimeout) {
+      window.clearTimeout(this.sequenceTimeout);
+    }
+
+    this.sequenceTimeout = window.setTimeout(() => {
+      this.resetSequence();
+    }, 1000);
+  }
+
+  /**
+   * Reset key sequence
+   */
+  private resetSequence(): void {
+    this.sequence = "";
+    if (this.sequenceTimeout) {
+      window.clearTimeout(this.sequenceTimeout);
+      this.sequenceTimeout = null;
+    }
+  }
+
+  /**
+   * Check if command can be executed
+   */
+  private canExecuteCommand(command: TPowerKCommandConfig): boolean {
+    const ctx = this.getContext();
+
+    // Check visibility
+    if (command.isVisible && !command.isVisible(ctx)) {
+      return false;
+    }
+
+    // Check enablement
+    if (command.isEnabled && !command.isEnabled(ctx)) {
+      return false;
+    }
+
+    // Check context type requirement
+    if ("contextType" in command) {
+      if (!ctx.activeContext || ctx.activeContext !== command.contextType) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * Execute a command
+   */
+  private executeCommand(command: TPowerKCommandConfig): void {
+    const ctx = this.getContext();
+
+    if (command.type === "action") {
+      // Direct action
+      command.action(ctx);
+    } else if (command.type === "change-page") {
+      // Opens a selection page - open palette and set active page
+      this.openPalette();
+      ctx.setActiveCommand(command);
+      ctx.setActivePage(command.page);
+    }
+  }
+
+  /**
+   * Cleanup
+   */
+  destroy(): void {
+    this.resetSequence();
+    this.isEnabled = false;
+  }
+}
diff --git a/apps/web/core/components/power-k/core/types.ts b/apps/web/core/components/power-k/core/types.ts
new file mode 100644
index 0000000..f315019
--- /dev/null
+++ b/apps/web/core/components/power-k/core/types.ts
@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { useRouter } from "next/navigation";
+
+export type TPowerKContextType = "work-item" | "page" | "cycle" | "module";
+
+export type TPowerKContext = {
+  // Route information
+  params: Record<string, string | string[] | undefined>;
+  // Current user
+  currentUserId?: string;
+  activeCommand: TPowerKCommandConfig | null;
+  // Active context
+  activeContext: TPowerKContextType | null;
+  shouldShowContextBasedActions: boolean;
+  setShouldShowContextBasedActions: (shouldShowContextBasedActions: boolean) => void;
+  // Router for navigation
+  router: ReturnType<typeof useRouter>;
+  // UI control
+  closePalette: () => void;
+  setActiveCommand: (command: TPowerKCommandConfig | null) => void;
+  setActivePage: (page: TPowerKPageType | null) => void;
+};
+
+export type TPowerKPageType =
+  // open entity based actions
+  | "open-workspace"
+  | "open-project"
+  | "open-workspace-setting"
+  | "open-project-cycle"
+  | "open-project-module"
+  | "open-project-view"
+  | "open-project-setting"
+  // work item context based actions
+  | "update-work-item-state"
+  | "update-work-item-priority"
+  | "update-work-item-assignee"
+  | "update-work-item-estimate"
+  | "update-work-item-cycle"
+  | "update-work-item-module"
+  | "update-work-item-labels"
+  // module context based actions
+  | "update-module-member"
+  | "update-module-status"
+  // preferences
+  | "update-theme"
+  | "update-timezone"
+  | "update-start-of-week"
+  | "update-language";
+
+export type TPowerKCommandGroup =
+  | "contextual"
+  | "navigation"
+  | "create"
+  | "general"
+  | "settings"
+  | "help"
+  | "account"
+  | "miscellaneous"
+  | "preferences";
+
+export type TPowerKCommandConfig = {
+  // Identity
+  id: string;
+  i18n_title: string;
+  i18n_description?: string;
+  icon?: React.ComponentType<{ className?: string }>;
+  iconNode?: React.ReactNode;
+
+  // Shortcuts (ONE of these)
+  shortcut?: string; // Single key: "c", "p", "s"
+  keySequence?: string; // Sequence: "gm", "op", "oc"
+  modifierShortcut?: string; // With modifiers: "cmd+k", "cmd+delete", "cmd+shift+,"
+
+  // Visibility & Context
+  closeOnSelect: boolean; // Whether to close the palette after selection
+
+  // Conditions
+  isVisible: (ctx: TPowerKContext) => boolean; // Dynamic visibility
+  isEnabled: (ctx: TPowerKContext) => boolean; // Dynamic enablement
+
+  // Search
+  keywords?: string[]; // Alternative search keywords
+} & (
+  | {
+      group: Extract<TPowerKCommandGroup, "contextual">; // For UI grouping
+      contextType: TPowerKContextType; // Only show when this context is active
+    }
+  | {
+      group: Exclude<TPowerKCommandGroup, "contextual">;
+    }
+) &
+  (
+    | {
+        type: "change-page";
+        page: TPowerKPageType; // Opens selection page
+        onSelect: (data: unknown, ctx: TPowerKContext) => void | Promise<void>; // Called after page selection
+      }
+    | {
+        type: "action";
+        action: (ctx: TPowerKContext) => void | Promise<void>; // Direct action
+      }
+  );
+
+// ============================================================================
+// UI State Types
+// ============================================================================
+
+export type TCommandPaletteState = {
+  isOpen: boolean;
+  searchTerm: string;
+  activePage: TPowerKPageType | null;
+  activeContext: TPowerKContextType | null;
+  selectedCommand: TPowerKCommandConfig | null;
+};
+
+export type TSelectionPageProps<T = any> = {
+  workspaceSlug: string;
+  projectId?: string;
+  searchTerm?: string;
+  onSelect: (item: T) => void;
+  onClose: () => void;
+};
+
+export type TPowerKSearchResultsKeys = "workspace" | "project" | "issue" | "cycle" | "module" | "issue_view" | "page";
diff --git a/apps/web/core/components/power-k/global-shortcuts.tsx b/apps/web/core/components/power-k/global-shortcuts.tsx
new file mode 100644
index 0000000..fe4fe8e
--- /dev/null
+++ b/apps/web/core/components/power-k/global-shortcuts.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { usePowerK } from "@/hooks/store/use-power-k";
+// local imports
+import { detectContextFromURL } from "./core/context-detector";
+import { ShortcutHandler } from "./core/shortcut-handler";
+import type { TPowerKCommandConfig, TPowerKContext } from "./core/types";
+import { ShortcutsModal } from "./ui/modal/shortcuts-root";
+
+type GlobalShortcutsProps = {
+  context: TPowerKContext;
+  commands: TPowerKCommandConfig[];
+};
+
+/**
+ * Global shortcuts component - sets up keyboard listeners and context detection
+ * Should be mounted once at the app root level
+ */
+export const GlobalShortcutsProvider = observer(function GlobalShortcutsProvider(props: GlobalShortcutsProps) {
+  const { context, commands } = props;
+  // router
+  const params = useParams();
+  // store hooks
+  const { commandRegistry, isShortcutsListModalOpen, setActiveContext, togglePowerKModal, toggleShortcutsListModal } =
+    usePowerK();
+
+  // Detect context from URL and update store
+  useEffect(() => {
+    const detected = detectContextFromURL(params);
+    setActiveContext(detected);
+  }, [params, setActiveContext]);
+
+  // Register commands on mount
+  useEffect(() => {
+    commandRegistry.clear();
+    commandRegistry.registerMultiple(commands);
+  }, [commandRegistry, commands]);
+
+  // Store context in ref to avoid recreation on context changes
+  const contextRef = useRef(context);
+  useEffect(() => {
+    contextRef.current = context;
+  }, [context]);
+
+  // Store handler in ref to avoid recreation on context changes
+  const handlerRef = useRef<ShortcutHandler | null>(null);
+
+  // Setup global shortcut handler - only recreate when commandRegistry or togglePowerKModal changes
+  useEffect(() => {
+    // Clean up previous handler if it exists
+    if (handlerRef.current) {
+      document.removeEventListener("keydown", handlerRef.current.handleKeyDown);
+      handlerRef.current.destroy();
+    }
+
+    // Create new handler with function that reads from ref
+    handlerRef.current = new ShortcutHandler(
+      commandRegistry,
+      () => contextRef.current,
+      () => togglePowerKModal(true)
+    );
+
+    document.addEventListener("keydown", handlerRef.current.handleKeyDown);
+
+    return () => {
+      if (handlerRef.current) {
+        document.removeEventListener("keydown", handlerRef.current.handleKeyDown);
+        handlerRef.current.destroy();
+        handlerRef.current = null;
+      }
+    };
+  }, [commandRegistry, togglePowerKModal]);
+
+  return <ShortcutsModal isOpen={isShortcutsListModalOpen} onClose={() => toggleShortcutsListModal(false)} />;
+});
diff --git a/apps/web/core/components/power-k/hooks/use-context-indicator.ts b/apps/web/core/components/power-k/hooks/use-context-indicator.ts
new file mode 100644
index 0000000..d7a36e2
--- /dev/null
+++ b/apps/web/core/components/power-k/hooks/use-context-indicator.ts
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useParams } from "next/navigation";
+// plane imports
+import { getPageName } from "@plane/utils";
+// hooks
+import { EPageStoreType, usePageStore } from "@/hooks/store";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useModule } from "@/hooks/store/use-module";
+// local imports
+import type { TPowerKContextType } from "../core/types";
+
+type TArgs = {
+  activeContext: TPowerKContextType | null;
+};
+
+export const useContextIndicator = (args: TArgs): string | null => {
+  const { activeContext } = args;
+  // navigation
+  const { workItem: workItemIdentifier, cycleId, moduleId, pageId } = useParams();
+  // store hooks
+  const { getCycleById } = useCycle();
+  const { getModuleById } = useModule();
+  const { getPageById } = usePageStore(EPageStoreType.PROJECT);
+  let indicator: string | undefined | null = null;
+
+  switch (activeContext) {
+    case "work-item": {
+      indicator = workItemIdentifier ? workItemIdentifier.toString() : null;
+      break;
+    }
+    case "cycle": {
+      const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : null;
+      indicator = cycleDetails?.name;
+      break;
+    }
+    case "module": {
+      const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : null;
+      indicator = moduleDetails?.name;
+      break;
+    }
+    case "page": {
+      const pageInstance = pageId ? getPageById(pageId.toString()) : null;
+      indicator = getPageName(pageInstance?.name);
+      break;
+    }
+    default: {
+      indicator = null;
+    }
+  }
+
+  return indicator ?? null;
+};
diff --git a/apps/web/core/components/power-k/menus/builder.tsx b/apps/web/core/components/power-k/menus/builder.tsx
new file mode 100644
index 0000000..5a6565c
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/builder.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Command } from "cmdk";
+// local imports
+import { PowerKModalCommandItem } from "../ui/modal/command-item";
+import { PowerKMenuEmptyState } from "./empty-state";
+
+type Props<T> = {
+  heading?: string;
+  items: T[];
+  onSelect: (item: T) => void;
+  getIcon?: (item: T) => React.ComponentType<{ className?: string }>;
+  getIconNode?: (item: T) => React.ReactNode;
+  getKey: (item: T) => string;
+  getLabel: (item: T) => React.ReactNode;
+  getValue: (item: T) => string;
+  isSelected?: (item: T) => boolean;
+  emptyText?: string;
+};
+
+export function PowerKMenuBuilder<T>({
+  heading,
+  items,
+  onSelect,
+  getIcon,
+  getIconNode,
+  getKey,
+  getLabel,
+  getValue,
+  isSelected,
+  emptyText,
+}: Props<T>) {
+  if (items.length === 0) return <PowerKMenuEmptyState emptyText={emptyText} />;
+
+  return (
+    <Command.Group heading={heading}>
+      {items.map((item) => (
+        <PowerKModalCommandItem
+          key={getKey(item)}
+          icon={getIcon?.(item)}
+          iconNode={getIconNode?.(item)}
+          value={getValue(item)}
+          label={getLabel(item)}
+          isSelected={isSelected?.(item)}
+          onSelect={() => onSelect(item)}
+        />
+      ))}
+    </Command.Group>
+  );
+}
diff --git a/apps/web/core/components/power-k/menus/cycles.tsx b/apps/web/core/components/power-k/menus/cycles.tsx
new file mode 100644
index 0000000..b441075
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/cycles.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { CyclesOutline } from "@makeplane/propel/icons";
+import type { ICycle } from "@plane/types";
+// local imports
+import { PowerKMenuBuilder } from "./builder";
+
+type Props = {
+  cycles: ICycle[];
+  onSelect: (cycle: ICycle) => void;
+  value?: string | null;
+};
+
+export const PowerKCyclesMenu = observer(function PowerKCyclesMenu({ cycles, onSelect, value }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={cycles}
+      getIcon={() => CyclesOutline}
+      getKey={(cycle) => cycle.id}
+      getValue={(cycle) => cycle.name}
+      getLabel={(cycle) => cycle.name}
+      isSelected={(cycle) => value === cycle.id}
+      onSelect={onSelect}
+      emptyText="No cycles found"
+    />
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/empty-state.tsx b/apps/web/core/components/power-k/menus/empty-state.tsx
new file mode 100644
index 0000000..89496a3
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/empty-state.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+type Props = {
+  emptyText?: string;
+};
+
+export function PowerKMenuEmptyState({ emptyText = "No results found" }: Props) {
+  return <div className="px-3 py-8 text-center text-13 text-tertiary">{emptyText}</div>;
+}
diff --git a/apps/web/core/components/power-k/menus/labels.tsx b/apps/web/core/components/power-k/menus/labels.tsx
new file mode 100644
index 0000000..21878fc
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/labels.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { IIssueLabel } from "@plane/types";
+// local imports
+import { PowerKMenuBuilder } from "./builder";
+
+type Props = {
+  labels: IIssueLabel[];
+  onSelect: (label: IIssueLabel) => void;
+  value?: string[];
+};
+
+export const PowerKLabelsMenu = observer(function PowerKLabelsMenu({ labels, onSelect, value }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={labels}
+      getIconNode={(label) => (
+        <span className="grid size-3.5 shrink-0 place-items-center">
+          <span className="size-2.5 rounded-full" style={{ backgroundColor: label.color }} />
+        </span>
+      )}
+      getKey={(label) => label.id}
+      getValue={(label) => label.name}
+      getLabel={(label) => label.name}
+      isSelected={(label) => !!value?.includes(label.id)}
+      onSelect={onSelect}
+      emptyText="No labels found"
+    />
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/members.tsx b/apps/web/core/components/power-k/menus/members.tsx
new file mode 100644
index 0000000..dc16d2e
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/members.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+// plane imports
+
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// local imports
+import { PowerKModalCommandItem } from "../ui/modal/command-item";
+
+type Props = {
+  handleSelect: (assigneeId: string) => void;
+  heading?: string;
+  userIds: string[] | undefined;
+  value: string[];
+};
+
+export const PowerKMembersMenu = observer(function PowerKMembersMenu(props: Props) {
+  const { handleSelect, heading, userIds, value } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  return (
+    <Command.Group heading={heading}>
+      {userIds?.map((memberId) => {
+        const memberDetails = getUserDetails(memberId);
+        if (!memberDetails) return;
+
+        return (
+          <PowerKModalCommandItem
+            key={memberId}
+            iconNode={
+              <Avatar
+                alt={memberDetails?.display_name}
+                fallback={memberDetails?.display_name?.[0]?.toUpperCase()}
+                src={getFileURL(memberDetails?.avatar_url ?? "")}
+                size="xs"
+              />
+            }
+            isSelected={value.includes(memberId)}
+            label={memberDetails?.display_name}
+            onSelect={() => handleSelect(memberId)}
+          />
+        );
+      })}
+    </Command.Group>
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/modules.tsx b/apps/web/core/components/power-k/menus/modules.tsx
new file mode 100644
index 0000000..8c17a5f
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/modules.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import type { IModule } from "@plane/types";
+// local imports
+import { PowerKMenuBuilder } from "./builder";
+
+type Props = {
+  modules: IModule[];
+  onSelect: (module: IModule) => void;
+  value?: string[];
+};
+
+export const PowerKModulesMenu = observer(function PowerKModulesMenu({ modules, onSelect, value }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={modules}
+      getKey={(module) => module.id}
+      getIconNode={(module) => <ModuleStatusIcon status={module.status ?? "backlog"} className="size-3.5 shrink-0" />}
+      getValue={(module) => module.name}
+      getLabel={(module) => module.name}
+      isSelected={(module) => !!value?.includes(module.id)}
+      onSelect={onSelect}
+      emptyText="No modules found"
+    />
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/projects.tsx b/apps/web/core/components/power-k/menus/projects.tsx
new file mode 100644
index 0000000..a2a7d98
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/projects.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// components
+import { Logo } from "@plane/propel/emoji-icon-picker";
+// plane imports
+import type { TPartialProject } from "@plane/types";
+// local imports
+import { PowerKMenuBuilder } from "./builder";
+
+type Props = {
+  projects: TPartialProject[];
+  onSelect: (project: TPartialProject) => void;
+};
+
+export function PowerKProjectsMenu({ projects, onSelect }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={projects}
+      getKey={(project) => project.id}
+      getIconNode={(project) => (
+        <span className="shrink-0">
+          <Logo logo={project.logo_props} size={14} />
+        </span>
+      )}
+      getValue={(project) => project.name}
+      getLabel={(project) => project.name}
+      onSelect={onSelect}
+      emptyText="No projects found"
+    />
+  );
+}
diff --git a/apps/web/core/components/power-k/menus/settings.tsx b/apps/web/core/components/power-k/menus/settings.tsx
new file mode 100644
index 0000000..da08b08
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/settings.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// local imports
+import { PowerKMenuBuilder } from "./builder";
+
+type TSettingItem = {
+  key: string;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  href: string;
+};
+
+type Props = {
+  settings: TSettingItem[];
+  onSelect: (setting: TSettingItem) => void;
+};
+
+export const PowerKSettingsMenu = observer(function PowerKSettingsMenu({ settings, onSelect }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={settings}
+      getKey={(setting) => setting.key}
+      getIcon={(setting) => setting.icon}
+      getValue={(setting) => setting.label}
+      getLabel={(setting) => setting.label}
+      onSelect={onSelect}
+      emptyText="No settings found"
+    />
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/views.tsx b/apps/web/core/components/power-k/menus/views.tsx
new file mode 100644
index 0000000..e56cff7
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/views.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { WorkItemsOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { IProjectView } from "@plane/types";
+// local imports
+import { PowerKMenuBuilder } from "./builder";
+
+type Props = {
+  views: IProjectView[];
+  onSelect: (view: IProjectView) => void;
+};
+
+export const PowerKViewsMenu = observer(function PowerKViewsMenu({ views, onSelect }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={views}
+      getKey={(view) => view.id}
+      getIcon={() => WorkItemsOutline}
+      getValue={(view) => view.name}
+      getLabel={(view) => view.name}
+      onSelect={onSelect}
+      emptyText="No views found"
+    />
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/workspaces.tsx b/apps/web/core/components/power-k/menus/workspaces.tsx
new file mode 100644
index 0000000..e5b5cda
--- /dev/null
+++ b/apps/web/core/components/power-k/menus/workspaces.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// plane imports
+import type { IWorkspace } from "@plane/types";
+// components
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// local imports
+import { PowerKMenuBuilder } from "./builder";
+
+type Props = {
+  workspaces: IWorkspace[];
+  onSelect: (workspace: IWorkspace) => void;
+};
+
+export function PowerKWorkspacesMenu({ workspaces, onSelect }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={workspaces}
+      getKey={(workspace) => workspace.id}
+      getIconNode={(workspace) => (
+        <WorkspaceLogo logo={workspace.logo_url} name={workspace.name} classNames="shrink-0" />
+      )}
+      getValue={(workspace) => workspace.name}
+      getLabel={(workspace) => workspace.name}
+      onSelect={onSelect}
+      emptyText="No workspaces found"
+    />
+  );
+}
diff --git a/apps/web/core/components/power-k/projects-app-provider.tsx b/apps/web/core/components/power-k/projects-app-provider.tsx
new file mode 100644
index 0000000..897c154
--- /dev/null
+++ b/apps/web/core/components/power-k/projects-app-provider.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { usePowerK } from "@/hooks/store/use-power-k";
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web imports
+import { ProjectLevelModals } from "@/components/modals/project-level";
+import { WorkItemLevelModals } from "@/components/modals/work-item-level";
+import { WorkspaceLevelModals } from "@/components/modals/workspace-level";
+// local imports
+import { useProjectsAppPowerKCommands } from "./config/commands";
+import type { TPowerKCommandConfig, TPowerKContext } from "./core/types";
+import { GlobalShortcutsProvider } from "./global-shortcuts";
+import { ProjectsAppPowerKCommandsList } from "./ui/modal/commands-list";
+import { ProjectsAppPowerKModalWrapper } from "./ui/modal/wrapper";
+
+/**
+ * Projects App PowerK provider
+ */
+export const ProjectsAppPowerKProvider = observer(function ProjectsAppPowerKProvider() {
+  // router
+  const router = useAppRouter();
+  const params = useParams();
+  const { workspaceSlug, projectId: routerProjectId, workItem: workItemIdentifier } = params;
+  // states
+  const [activeCommand, setActiveCommand] = useState<TPowerKCommandConfig | null>(null);
+  const [shouldShowContextBasedActions, setShouldShowContextBasedActions] = useState(true);
+  // store hooks
+  const { activeContext, isPowerKModalOpen, togglePowerKModal, setActivePage } = usePowerK();
+  const { data: currentUser } = useUser();
+  // derived values
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+  // derived values
+  const workItemId = workItemIdentifier ? getIssueIdByIdentifier(workItemIdentifier.toString()) : undefined;
+  const workItemDetails = workItemId ? getIssueById(workItemId) : undefined;
+  const projectId: string | string[] | undefined | null = routerProjectId ?? workItemDetails?.project_id;
+  const commands = useProjectsAppPowerKCommands();
+  // Build command context from props and store
+  const context: TPowerKContext = useMemo(
+    () => ({
+      currentUserId: currentUser?.id,
+      activeCommand,
+      activeContext,
+      shouldShowContextBasedActions,
+      setShouldShowContextBasedActions,
+      params: {
+        ...params,
+        projectId,
+      },
+      router,
+      closePalette: () => togglePowerKModal(false),
+      setActiveCommand,
+      setActivePage,
+    }),
+    [
+      currentUser?.id,
+      activeCommand,
+      activeContext,
+      shouldShowContextBasedActions,
+      params,
+      projectId,
+      router,
+      togglePowerKModal,
+      setActivePage,
+    ]
+  );
+
+  return (
+    <>
+      <GlobalShortcutsProvider context={context} commands={commands} />
+      {workspaceSlug && <WorkspaceLevelModals workspaceSlug={workspaceSlug.toString()} />}
+      {workspaceSlug && projectId && (
+        <ProjectLevelModals workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+      )}
+      <WorkItemLevelModals workItemIdentifier={workItemIdentifier?.toString()} />
+      <ProjectsAppPowerKModalWrapper
+        commandsListComponent={ProjectsAppPowerKCommandsList}
+        context={context}
+        isOpen={isPowerKModalOpen}
+        onClose={() => togglePowerKModal(false)}
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx b/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx
new file mode 100644
index 0000000..57ad412
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/command-item-shortcut-badge.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+/**
+ * Formats a shortcut string for display
+ * Converts "cmd+shift+," to proper keyboard symbols
+ */
+export const formatShortcutForDisplay = (shortcut: string | undefined): string | null => {
+  if (!shortcut) return null;
+
+  const isMac = typeof window !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+
+  const parts = shortcut.split("+").map((part) => {
+    const lower = part.toLowerCase().trim();
+
+    // Map to proper symbols
+    switch (lower) {
+      case "cmd":
+      case "meta":
+        return isMac ? "⌘" : "Ctrl";
+      case "ctrl":
+        return isMac ? "⌃" : "Ctrl";
+      case "alt":
+      case "option":
+        return isMac ? "⌥" : "Alt";
+      case "shift":
+        return isMac ? "⇧" : "Shift";
+      case "delete":
+      case "backspace":
+        return "⌫";
+      case "enter":
+      case "return":
+        return "↵";
+      case "space":
+        return "Space";
+      case "escape":
+      case "esc":
+        return "Esc";
+      case "tab":
+        return "Tab";
+      case "arrowup":
+      case "up":
+        return "↑";
+      case "arrowdown":
+      case "down":
+        return "↓";
+      case "arrowleft":
+      case "left":
+        return "←";
+      case "arrowright":
+      case "right":
+        return "→";
+      case ",":
+        return ",";
+      case ".":
+        return ".";
+      default:
+        return part.toUpperCase();
+    }
+  });
+
+  return parts.join("");
+};
+
+export function ShortcutBadge({ shortcut }: { shortcut: string | undefined }) {
+  if (!shortcut) return null;
+
+  const formatted = formatShortcutForDisplay(shortcut);
+
+  return (
+    <div className="pointer-events-none inline-flex shrink-0 items-center gap-1 font-medium select-none">
+      {formatted?.split("").map((char, index) => (
+        <React.Fragment key={index}>
+          <kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-code text-10 font-medium text-tertiary">
+            {char.toUpperCase()}
+          </kbd>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Formats key sequence for display (e.g., "gm" -> "G then M")
+ */
+export const formatKeySequenceForDisplay = (sequence: string | undefined): string => {
+  if (!sequence) return "";
+
+  const chars = sequence.split("");
+  return chars.map((c) => c.toUpperCase()).join(" then ");
+};
+
+export function KeySequenceBadge({ sequence }: { sequence: string | undefined }) {
+  if (!sequence) return null;
+
+  const chars = sequence.split("");
+
+  return (
+    <div className="pointer-events-none inline-flex shrink-0 items-center gap-1 font-medium select-none">
+      {chars.map((char, index) => (
+        <React.Fragment key={index}>
+          <kbd className="inline-flex h-5 items-center justify-center rounded-sm border border-strong bg-surface-1 px-1.5 font-code text-10 font-medium text-tertiary">
+            {char.toUpperCase()}
+          </kbd>
+          {index < chars.length - 1 && <span className="text-10 text-placeholder">then</span>}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/modal/command-item.tsx b/apps/web/core/components/power-k/ui/modal/command-item.tsx
new file mode 100644
index 0000000..17f794b
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/command-item.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Command } from "cmdk";
+
+import { TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import { cn } from "@plane/utils";
+// local imports
+import { KeySequenceBadge, ShortcutBadge } from "./command-item-shortcut-badge";
+
+type Props = {
+  icon?: React.ComponentType<{ className?: string }>;
+  iconNode?: React.ReactNode;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  keySequence?: string;
+  label: string | React.ReactNode;
+  onSelect: () => void;
+  shortcut?: string;
+  value?: string;
+};
+
+export function PowerKModalCommandItem(props: Props) {
+  const { icon: Icon, iconNode, isDisabled, isSelected, keySequence, label, onSelect, shortcut, value } = props;
+
+  return (
+    <Command.Item value={value} onSelect={onSelect} className="focus:outline-none" disabled={isDisabled}>
+      <div
+        className={cn("flex items-center gap-2 text-secondary", {
+          "opacity-70": isDisabled,
+        })}
+      >
+        {Icon && <Icon className="size-3.5 shrink-0" />}
+        {iconNode}
+        {label}
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        {isSelected && <TickOutline className="size-3 shrink-0 text-secondary" />}
+        {keySequence && <KeySequenceBadge sequence={keySequence} />}
+        {shortcut && <ShortcutBadge shortcut={shortcut} />}
+      </div>
+    </Command.Item>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/modal/commands-list.tsx b/apps/web/core/components/power-k/ui/modal/commands-list.tsx
new file mode 100644
index 0000000..69e7ce1
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/commands-list.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TPowerKCommandConfig, TPowerKContext, TPowerKPageType } from "../../core/types";
+import { PowerKModalPagesList } from "../pages";
+import { PowerKContextBasedPagesList } from "../pages/context-based";
+import { PowerKModalSearchMenu } from "./search-menu";
+
+export type TPowerKCommandsListProps = {
+  activePage: TPowerKPageType | null;
+  context: TPowerKContext;
+  handleCommandSelect: (command: TPowerKCommandConfig) => void;
+  handlePageDataSelection: (data: unknown) => void;
+  isWorkspaceLevel: boolean;
+  searchTerm: string;
+  setSearchTerm: (value: string) => void;
+  handleSearchMenuClose?: () => void;
+};
+
+export function ProjectsAppPowerKCommandsList(props: TPowerKCommandsListProps) {
+  const {
+    activePage,
+    context,
+    handleCommandSelect,
+    handlePageDataSelection,
+    isWorkspaceLevel,
+    searchTerm,
+    setSearchTerm,
+    handleSearchMenuClose,
+  } = props;
+
+  return (
+    <>
+      <PowerKModalSearchMenu
+        activePage={activePage}
+        context={context}
+        isWorkspaceLevel={!context.params.projectId || isWorkspaceLevel}
+        searchTerm={searchTerm}
+        updateSearchTerm={setSearchTerm}
+        handleSearchMenuClose={handleSearchMenuClose}
+      />
+      <PowerKContextBasedPagesList
+        activeContext={context.activeContext}
+        activePage={activePage}
+        handleSelection={handlePageDataSelection}
+      />
+      <PowerKModalPagesList
+        activePage={activePage}
+        context={context}
+        onPageDataSelect={handlePageDataSelection}
+        onCommandSelect={handleCommandSelect}
+      />
+    </>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/modal/constants.ts b/apps/web/core/components/power-k/ui/modal/constants.ts
new file mode 100644
index 0000000..90adcca
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/constants.ts
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import type { TPowerKPageType } from "../../core/types";
+
+export type TPowerKModalPageDetails = {
+  i18n_placeholder: string;
+};
+
+export const POWER_K_MODAL_PAGE_DETAILS: Record<TPowerKPageType, TPowerKModalPageDetails> = {
+  "open-workspace": {
+    i18n_placeholder: "power_k.page_placeholders.open_workspace",
+  },
+  "open-project": {
+    i18n_placeholder: "power_k.page_placeholders.open_project",
+  },
+  "open-workspace-setting": {
+    i18n_placeholder: "power_k.page_placeholders.open_workspace_setting",
+  },
+  "open-project-cycle": {
+    i18n_placeholder: "power_k.page_placeholders.open_project_cycle",
+  },
+  "open-project-module": {
+    i18n_placeholder: "power_k.page_placeholders.open_project_module",
+  },
+  "open-project-view": {
+    i18n_placeholder: "power_k.page_placeholders.open_project_view",
+  },
+  "open-project-setting": {
+    i18n_placeholder: "power_k.page_placeholders.open_project_setting",
+  },
+  "update-work-item-state": {
+    i18n_placeholder: "power_k.page_placeholders.update_work_item_state",
+  },
+  "update-work-item-priority": {
+    i18n_placeholder: "power_k.page_placeholders.update_work_item_priority",
+  },
+  "update-work-item-assignee": {
+    i18n_placeholder: "power_k.page_placeholders.update_work_item_assignee",
+  },
+  "update-work-item-estimate": {
+    i18n_placeholder: "power_k.page_placeholders.update_work_item_estimate",
+  },
+  "update-work-item-cycle": {
+    i18n_placeholder: "power_k.page_placeholders.update_work_item_cycle",
+  },
+  "update-work-item-module": {
+    i18n_placeholder: "power_k.page_placeholders.update_work_item_module",
+  },
+  "update-work-item-labels": {
+    i18n_placeholder: "power_k.page_placeholders.update_work_item_labels",
+  },
+  "update-module-member": {
+    i18n_placeholder: "power_k.page_placeholders.update_module_member",
+  },
+  "update-module-status": {
+    i18n_placeholder: "power_k.page_placeholders.update_module_status",
+  },
+  "update-theme": {
+    i18n_placeholder: "power_k.page_placeholders.update_theme",
+  },
+  "update-timezone": {
+    i18n_placeholder: "power_k.page_placeholders.update_timezone",
+  },
+  "update-start-of-week": {
+    i18n_placeholder: "power_k.page_placeholders.update_start_of_week",
+  },
+  "update-language": {
+    i18n_placeholder: "power_k.page_placeholders.update_language",
+  },
+};
diff --git a/apps/web/core/components/power-k/ui/modal/context-indicator.tsx b/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
new file mode 100644
index 0000000..d678054
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/context-indicator.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CloseOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// local imports
+import type { TPowerKContextType } from "../../core/types";
+import { useContextIndicator } from "../../hooks/use-context-indicator";
+import { CONTEXT_ENTITY_MAP } from "../pages/context-based";
+
+type Props = {
+  activeContext: TPowerKContextType | null;
+  handleClearContext: () => void;
+};
+
+export function PowerKModalContextIndicator(props: Props) {
+  const { activeContext, handleClearContext } = props;
+  // context indicator
+  const contextIndicator = useContextIndicator({ activeContext });
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const contextEntity = activeContext ? CONTEXT_ENTITY_MAP[activeContext] : null;
+
+  if (!activeContext || !contextEntity) return null;
+
+  return (
+    <div className="w-full px-4 pt-3 pb-2">
+      <div className="inline-flex max-w-full items-center gap-1 truncate rounded-sm bg-layer-1 py-0.5 pr-1 pl-2">
+        <div className="flex items-center gap-1.5 truncate text-11 font-medium">
+          <span className="shrink-0 text-secondary">{t(contextEntity.i18n_indicator)}</span>
+          <span className="size-1 shrink-0 rounded-full bg-layer-1" />
+          <p className="truncate">{contextIndicator}</p>
+        </div>
+        <button
+          type="button"
+          onClick={handleClearContext}
+          className="grid shrink-0 place-items-center p-1 text-secondary transition-colors hover:text-primary"
+          title="Clear context (Backspace)"
+          aria-label="Clear context (Backspace)"
+          tabIndex={-1}
+        >
+          <CloseOutline className="size-2.5" />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/modal/footer.tsx b/apps/web/core/components/power-k/ui/modal/footer.tsx
new file mode 100644
index 0000000..0a61362
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/footer.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Switch } from "@makeplane/propel/components/switch";
+
+type Props = {
+  isWorkspaceLevel: boolean;
+  projectId: string | undefined;
+  onWorkspaceLevelChange: (value: boolean) => void;
+};
+
+export const PowerKModalFooter = observer(function PowerKModalFooter(props: Props) {
+  const { isWorkspaceLevel, projectId, onWorkspaceLevelChange } = props;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex w-full items-center justify-between rounded-b-lg border-t border-subtle bg-surface-2/80 px-4 py-2">
+      <div />
+      <div className="flex items-center gap-2">
+        <span className="text-11 text-tertiary">{t("power_k.footer.workspace_level")}</span>
+        <Switch
+          size="sm"
+          checked={isWorkspaceLevel}
+          onCheckedChange={onWorkspaceLevelChange}
+          disabled={!projectId}
+          aria-label={t("power_k.footer.workspace_level")}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/modal/header.tsx b/apps/web/core/components/power-k/ui/modal/header.tsx
new file mode 100644
index 0000000..f86c6f1
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/header.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Command } from "cmdk";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+// plane imports
+// local imports
+import type { TPowerKContext, TPowerKPageType } from "../../core/types";
+import { POWER_K_MODAL_PAGE_DETAILS } from "./constants";
+import { PowerKModalContextIndicator } from "./context-indicator";
+
+type Props = {
+  activePage: TPowerKPageType | null;
+  context: TPowerKContext;
+  onSearchChange: (value: string) => void;
+  searchTerm: string;
+};
+
+export function PowerKModalHeader(props: Props) {
+  const { context, searchTerm, onSearchChange, activePage } = props;
+  // translation
+  const { t } = useTranslation();
+  // derived values
+  const placeholder = activePage
+    ? t(POWER_K_MODAL_PAGE_DETAILS[activePage].i18n_placeholder)
+    : t("power_k.page_placeholders.default");
+
+  return (
+    <div className="border-b border-subtle">
+      {/* Context Indicator */}
+      {context.shouldShowContextBasedActions && !activePage && (
+        <PowerKModalContextIndicator
+          activeContext={context.activeContext}
+          handleClearContext={() => context.setShouldShowContextBasedActions(false)}
+        />
+      )}
+
+      {/* Search Input */}
+      <div className="flex items-center gap-2 px-4 py-3">
+        <SearchOutline className="size-4 shrink-0 text-placeholder" />
+        <Command.Input
+          value={searchTerm}
+          onValueChange={onSearchChange}
+          placeholder={placeholder}
+          className="flex-1 bg-transparent text-13 text-primary placeholder-(--text-color-placeholder) outline-none"
+          autoFocus
+        />
+        {searchTerm && (
+          <button
+            onClick={() => onSearchChange("")}
+            className="flex-shrink-0 rounded-sm p-1 text-placeholder hover:bg-layer-1 hover:text-secondary"
+          >
+            <CloseOutline className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/modal/no-results-command.tsx b/apps/web/core/components/power-k/ui/modal/no-results-command.tsx
new file mode 100644
index 0000000..528af77
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/no-results-command.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Command } from "cmdk";
+import { useTranslation } from "@plane/i18n";
+import { SearchOutline } from "@makeplane/propel/icons";
+// components
+import type { TPowerKContext } from "@/components/power-k/core/types";
+import { PowerKModalCommandItem } from "@/components/power-k/ui/modal/command-item";
+
+export type TPowerKModalNoSearchResultsCommandProps = {
+  context: TPowerKContext;
+  searchTerm: string;
+  updateSearchTerm: (value: string) => void;
+};
+
+export function PowerKModalNoSearchResultsCommand(props: TPowerKModalNoSearchResultsCommandProps) {
+  const { updateSearchTerm } = props;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <Command.Group>
+      <PowerKModalCommandItem
+        icon={SearchOutline}
+        value="no-results"
+        label={
+          <p className="flex items-center gap-2">
+            {t("power_k.search_menu.no_results")}{" "}
+            <span className="shrink-0 text-13 text-tertiary">{t("power_k.search_menu.clear_search")}</span>
+          </p>
+        }
+        onSelect={() => updateSearchTerm("")}
+      />
+    </Command.Group>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/modal/search-menu.tsx b/apps/web/core/components/power-k/ui/modal/search-menu.tsx
new file mode 100644
index 0000000..62fcaaa
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/search-menu.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import { useParams } from "next/navigation";
+// plane imports
+import { WORKSPACE_DEFAULT_SEARCH_RESULT } from "@plane/constants";
+import type { IWorkspaceSearchResults } from "@plane/types";
+import { cn } from "@plane/utils";
+// hooks
+import { usePowerK } from "@/hooks/store/use-power-k";
+import useDebounce from "@/hooks/use-debounce";
+import { WorkspaceService } from "@/services/workspace.service";
+// local imports
+import type { TPowerKContext, TPowerKPageType } from "../../core/types";
+import { PowerKModalNoSearchResultsCommand } from "./no-results-command";
+import { PowerKModalSearchResults } from "./search-results";
+// services init
+const workspaceService = new WorkspaceService();
+
+type Props = {
+  activePage: TPowerKPageType | null;
+  context: TPowerKContext;
+  isWorkspaceLevel: boolean;
+  searchTerm: string;
+  updateSearchTerm: (value: string) => void;
+  handleSearchMenuClose?: () => void;
+};
+
+export function PowerKModalSearchMenu(props: Props) {
+  const { activePage, context, isWorkspaceLevel, searchTerm, updateSearchTerm, handleSearchMenuClose } = props;
+  // states
+  const [resultsCount, setResultsCount] = useState(0);
+  const [isSearching, setIsSearching] = useState(false);
+  const [results, setResults] = useState<IWorkspaceSearchResults>(WORKSPACE_DEFAULT_SEARCH_RESULT);
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  // navigation
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { togglePowerKModal } = usePowerK();
+
+  useEffect(() => {
+    if (activePage || !workspaceSlug) return;
+    setIsSearching(true);
+
+    if (debouncedSearchTerm) {
+      workspaceService
+        .searchWorkspace(workspaceSlug.toString(), {
+          ...(projectId ? { project_id: projectId.toString() } : {}),
+          search: debouncedSearchTerm,
+          workspace_search: !projectId ? true : isWorkspaceLevel,
+        })
+        // oxlint-disable-next-line no-shadow oxlint-disable-next-line promise/always-return
+        .then((results) => {
+          setResults(results);
+          const count = Object.keys(results.results).reduce(
+            (accumulator, key) => results.results[key as keyof typeof results.results]?.length + accumulator,
+            0
+          );
+          setResultsCount(count);
+        })
+        .catch(() => {
+          setResults(WORKSPACE_DEFAULT_SEARCH_RESULT);
+          setResultsCount(0);
+        })
+        .finally(() => setIsSearching(false));
+    } else {
+      setResults(WORKSPACE_DEFAULT_SEARCH_RESULT);
+      setIsSearching(false);
+    }
+  }, [debouncedSearchTerm, isWorkspaceLevel, projectId, workspaceSlug, activePage]);
+
+  if (activePage) return null;
+
+  const handleClosePalette = () => {
+    handleSearchMenuClose?.();
+    togglePowerKModal(false);
+  };
+
+  return (
+    <>
+      {searchTerm.trim() !== "" && (
+        <div className="mt-4 flex items-center justify-between gap-2 px-4">
+          <h5
+            className={cn("text-11 text-primary", {
+              "animate-pulse": isSearching,
+            })}
+          >
+            Search results for{" "}
+            <span className="font-medium">
+              {'"'}
+              {searchTerm}
+              {'"'}
+            </span>{" "}
+            in {isWorkspaceLevel ? "workspace" : "project"}:
+          </h5>
+        </div>
+      )}
+
+      {/* Show empty state only when not loading and no results */}
+      {!isSearching && resultsCount === 0 && searchTerm.trim() !== "" && debouncedSearchTerm.trim() !== "" && (
+        <PowerKModalNoSearchResultsCommand
+          context={context}
+          searchTerm={searchTerm}
+          updateSearchTerm={updateSearchTerm}
+        />
+      )}
+
+      {searchTerm.trim() !== "" && <PowerKModalSearchResults closePalette={handleClosePalette} results={results} />}
+    </>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/modal/search-results-map.tsx b/apps/web/core/components/power-k/ui/modal/search-results-map.tsx
new file mode 100644
index 0000000..e337258
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/search-results-map.tsx
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  CyclesOutline,
+  DocumentationOutline,
+  GridOutline,
+  ModuleOutline,
+  ProjectsOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import type {
+  IWorkspaceDefaultSearchResult,
+  IWorkspaceIssueSearchResult,
+  IWorkspacePageSearchResult,
+  IWorkspaceProjectSearchResult,
+  IWorkspaceSearchResult,
+} from "@plane/types";
+import { generateWorkItemLink } from "@plane/utils";
+// components
+import type { TPowerKSearchResultsKeys } from "@/components/power-k/core/types";
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+
+export type TPowerKSearchResultGroupDetails = {
+  icon?: React.ComponentType<{ className?: string }>;
+  itemName: (item: any) => React.ReactNode;
+  path: (item: any, projectId: string | undefined) => string;
+  title: string;
+};
+
+export const POWER_K_SEARCH_RESULTS_GROUPS_MAP: Record<TPowerKSearchResultsKeys, TPowerKSearchResultGroupDetails> = {
+  cycle: {
+    icon: CyclesOutline,
+    itemName: (cycle: IWorkspaceDefaultSearchResult) => (
+      <p>
+        <span className="text-11 text-tertiary">{cycle.project__identifier}</span> {cycle.name}
+      </p>
+    ),
+    path: (cycle: IWorkspaceDefaultSearchResult) =>
+      `/${cycle?.workspace__slug}/projects/${cycle?.project_id}/cycles/${cycle?.id}`,
+    title: "Cycles",
+  },
+  issue: {
+    itemName: (workItem: IWorkspaceIssueSearchResult) => (
+      <div className="flex gap-2">
+        <IssueIdentifier
+          projectId={workItem.project_id}
+          issueTypeId={workItem.type_id}
+          projectIdentifier={workItem.project__identifier}
+          issueSequenceId={workItem.sequence_id}
+          size="xs"
+        />{" "}
+        {workItem.name}
+      </div>
+    ),
+    path: (workItem: IWorkspaceIssueSearchResult) =>
+      generateWorkItemLink({
+        workspaceSlug: workItem?.workspace__slug,
+        projectId: workItem?.project_id,
+        issueId: workItem?.id,
+        projectIdentifier: workItem.project__identifier,
+        sequenceId: workItem?.sequence_id,
+      }),
+    title: "Work items",
+  },
+  issue_view: {
+    icon: WorkItemsOutline,
+    itemName: (view: IWorkspaceDefaultSearchResult) => (
+      <p>
+        <span className="text-11 text-tertiary">{view.project__identifier}</span> {view.name}
+      </p>
+    ),
+    path: (view: IWorkspaceDefaultSearchResult) =>
+      `/${view?.workspace__slug}/projects/${view?.project_id}/views/${view?.id}`,
+    title: "Views",
+  },
+  module: {
+    icon: ModuleOutline,
+    itemName: (module: IWorkspaceDefaultSearchResult) => (
+      <p>
+        <span className="text-11 text-tertiary">{module.project__identifier}</span> {module.name}
+      </p>
+    ),
+    path: (module: IWorkspaceDefaultSearchResult) =>
+      `/${module?.workspace__slug}/projects/${module?.project_id}/modules/${module?.id}`,
+    title: "Modules",
+  },
+  page: {
+    icon: DocumentationOutline,
+    itemName: (page: IWorkspacePageSearchResult) => (
+      <p>
+        <span className="text-11 text-tertiary">{page.project__identifiers?.[0]}</span> {page.name}
+      </p>
+    ),
+    path: (page: IWorkspacePageSearchResult, projectId: string | undefined) => {
+      let redirectProjectId = page?.project_ids?.[0];
+      if (!!projectId && page?.project_ids?.includes(projectId)) redirectProjectId = projectId;
+      return redirectProjectId
+        ? `/${page?.workspace__slug}/projects/${redirectProjectId}/pages/${page?.id}`
+        : `/${page?.workspace__slug}/wiki/${page?.id}`;
+    },
+    title: "Pages",
+  },
+  project: {
+    icon: ProjectsOutline,
+    itemName: (project: IWorkspaceProjectSearchResult) => project?.name,
+    path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
+    title: "Projects",
+  },
+  workspace: {
+    icon: GridOutline,
+    itemName: (workspace: IWorkspaceSearchResult) => workspace?.name,
+    path: (workspace: IWorkspaceSearchResult) => `/${workspace?.slug}/`,
+    title: "Workspaces",
+  },
+};
diff --git a/apps/web/core/components/power-k/ui/modal/search-results.tsx b/apps/web/core/components/power-k/ui/modal/search-results.tsx
new file mode 100644
index 0000000..eaa5eb9
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/search-results.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { IWorkspaceSearchResults } from "@plane/types";
+// hooks
+import { useAppRouter } from "@/hooks/use-app-router";
+// helpers
+import { PowerKModalCommandItem } from "./command-item";
+import { POWER_K_SEARCH_RESULTS_GROUPS_MAP } from "./search-results-map";
+
+type Props = {
+  closePalette: () => void;
+  results: IWorkspaceSearchResults;
+};
+
+export const PowerKModalSearchResults = observer(function PowerKModalSearchResults(props: Props) {
+  const { closePalette, results } = props;
+  // router
+  const router = useAppRouter();
+  const { projectId: routerProjectId } = useParams();
+  // derived values
+  const projectId = routerProjectId?.toString();
+
+  return (
+    <>
+      {Object.keys(results.results).map((key) => {
+        const section = results.results[key as keyof typeof results.results];
+        const currentSection = POWER_K_SEARCH_RESULTS_GROUPS_MAP[key as keyof typeof POWER_K_SEARCH_RESULTS_GROUPS_MAP];
+
+        if (!currentSection) return null;
+        if (section.length <= 0) return null;
+
+        return (
+          <Command.Group key={key} heading={currentSection.title}>
+            {section.map((item) => {
+              let value = `${key}-${item?.id}-${item.name}`;
+
+              if ("project__identifier" in item) {
+                value = `${value}-${item.project__identifier}`;
+              }
+
+              if ("sequence_id" in item) {
+                value = `${value}-${item.sequence_id}`;
+              }
+
+              return (
+                <PowerKModalCommandItem
+                  key={item.id}
+                  label={currentSection.itemName(item)}
+                  icon={currentSection.icon}
+                  onSelect={() => {
+                    closePalette();
+                    router.push(currentSection.path(item, projectId));
+                    // const itemProjectId =
+                    //   item?.project_id ||
+                    //   (Array.isArray(item?.project_ids) && item?.project_ids?.length > 0
+                    //     ? item?.project_ids[0]
+                    //     : undefined);
+                    // if (itemProjectId) openProjectAndScrollToSidebar(itemProjectId);
+                  }}
+                  value={value}
+                />
+              );
+            })}
+          </Command.Group>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
new file mode 100644
index 0000000..9797142
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, Fragment } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+// plane imports
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+import { ScrollArea } from "@plane/propel/scrollarea";
+
+// hooks
+import { usePowerK } from "@/hooks/store/use-power-k";
+// local imports
+import { ShortcutRenderer } from "../renderer/shortcut";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export function ShortcutsModal(props: Props) {
+  const { isOpen, onClose } = props;
+  // states
+  const [query, setQuery] = useState("");
+  // store hooks
+  const { commandRegistry } = usePowerK();
+
+  // Get all commands from registry
+  const allCommandsWithShortcuts = commandRegistry.getAllCommandsWithShortcuts();
+
+  const handleClose = () => {
+    onClose();
+    setQuery("");
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-30 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative flex h-full items-center justify-center">
+                <div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-surface-1 py-5 shadow-raised-200 transition-all sm:w-[28rem]">
+                  <Dialog.Title as="h3" className="flex justify-between px-5">
+                    <span className="text-16 font-medium">Keyboard shortcuts</span>
+                    <button type="button" onClick={handleClose}>
+                      <CloseOutline className="h-4 w-4 text-secondary hover:text-primary" aria-hidden="true" />
+                    </button>
+                  </Dialog.Title>
+                  <div className="px-5">
+                    <InputGroup size="2xl">
+                      <SearchOutline className="h-3.5 w-3.5 text-secondary" />
+                      <Input
+                        size="2xl"
+                        id="search"
+                        name="search"
+                        type="text"
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                        placeholder="Search for shortcuts"
+                        aria-label="Search for shortcuts"
+                        autoFocus
+                        tabIndex={1}
+                      />
+                    </InputGroup>
+                  </div>
+
+                  <ScrollArea size="sm" rootClassName="overflow-y-scroll px-5">
+                    <ShortcutRenderer searchQuery={query} commands={allCommandsWithShortcuts} />
+                  </ScrollArea>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/modal/wrapper.tsx b/apps/web/core/components/power-k/ui/modal/wrapper.tsx
new file mode 100644
index 0000000..0c2a0c9
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/modal/wrapper.tsx
@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import { usePowerK } from "@/hooks/store/use-power-k";
+// local imports
+import type { TPowerKCommandConfig, TPowerKContext } from "../../core/types";
+import type { TPowerKCommandsListProps } from "./commands-list";
+import { PowerKModalFooter } from "./footer";
+import { PowerKModalHeader } from "./header";
+
+type Props = {
+  commandsListComponent: React.FC<TPowerKCommandsListProps>;
+  context: TPowerKContext;
+  hideFooter?: boolean;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const ProjectsAppPowerKModalWrapper = observer(function ProjectsAppPowerKModalWrapper(props: Props) {
+  const { commandsListComponent: CommandsListComponent, context, hideFooter = false, isOpen, onClose } = props;
+  // states
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
+  // store hooks
+  const { activePage, setActivePage } = usePowerK();
+
+  // Handle command selection
+  const handleCommandSelect = useCallback(
+    (command: TPowerKCommandConfig) => {
+      if (command.type === "action") {
+        // Direct action - execute and potentially close
+        command.action(context);
+        if (command.closeOnSelect === true) {
+          context.closePalette();
+        }
+      } else if (command.type === "change-page") {
+        // Opens a selection page
+        context.setActiveCommand(command);
+        setActivePage(command.page);
+        setSearchTerm("");
+      }
+    },
+    [context, setActivePage]
+  );
+
+  // Handle selection page item selection
+  const handlePageDataSelection = useCallback(
+    (data: unknown) => {
+      if (context.activeCommand?.type === "change-page") {
+        context.activeCommand.onSelect(data, context);
+      }
+      // Go back to main page
+      if (context.activeCommand?.closeOnSelect === true) {
+        context.closePalette();
+      }
+    },
+    [context]
+  );
+
+  // Handle keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      // Cmd/Ctrl+K closes palette
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+
+      // Escape closes palette or clears search
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (searchTerm) {
+          setSearchTerm("");
+        } else {
+          onClose();
+        }
+        return;
+      }
+
+      // Backspace clears context or goes back from page
+      if (e.key === "Backspace" && !searchTerm) {
+        e.preventDefault();
+        if (activePage) {
+          // Go back from selection page
+          setActivePage(null);
+          context.setActiveCommand(null);
+        } else {
+          // Hide context based actions
+          context.setShouldShowContextBasedActions(false);
+        }
+        return;
+      }
+    },
+    [searchTerm, activePage, onClose, setActivePage, context]
+  );
+
+  // Reset state when modal closes
+  useEffect(() => {
+    if (!isOpen) {
+      setTimeout(() => {
+        setSearchTerm("");
+        setActivePage(null);
+        context.setActiveCommand(null);
+        context.setShouldShowContextBasedActions(true);
+      }, 200);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={onClose}>
+        {/* Backdrop */}
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+        </Transition.Child>
+        {/* Modal Container */}
+        <div className="fixed inset-0 z-30 overflow-y-auto">
+          <div className="flex items-center justify-center p-4 sm:p-6 md:p-20">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="divide-opacity-10 relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-subtle-1 rounded-lg bg-surface-1 shadow-raised-200 transition-all">
+                <Command
+                  filter={(i18nValue: string, search: string) => {
+                    if (i18nValue === "no-results") return 1;
+                    if (i18nValue.toLowerCase().includes(search.toLowerCase())) return 1;
+                    return 0;
+                  }}
+                  shouldFilter={searchTerm.length > 0}
+                  onKeyDown={handleKeyDown}
+                  className="w-full"
+                >
+                  <PowerKModalHeader
+                    activePage={activePage}
+                    context={context}
+                    onSearchChange={setSearchTerm}
+                    searchTerm={searchTerm}
+                  />
+                  <Command.List className="vertical-scrollbar scrollbar-sm max-h-96 overflow-scroll outline-none">
+                    <CommandsListComponent
+                      activePage={activePage}
+                      context={context}
+                      handleCommandSelect={handleCommandSelect}
+                      handlePageDataSelection={handlePageDataSelection}
+                      isWorkspaceLevel={isWorkspaceLevel}
+                      searchTerm={searchTerm}
+                      setSearchTerm={setSearchTerm}
+                    />
+                  </Command.List>
+                  {/* Footer hints */}
+                  {!hideFooter && (
+                    <PowerKModalFooter
+                      isWorkspaceLevel={isWorkspaceLevel}
+                      projectId={context.params.projectId?.toString()}
+                      onWorkspaceLevelChange={setIsWorkspaceLevel}
+                    />
+                  )}
+                </Command>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts
new file mode 100644
index 0000000..a86c79f
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/cycle/commands.ts
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { useParams } from "next/navigation";
+import { StarOff } from "lucide-react";
+import { LinkOutline, StarOutline } from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { copyTextToClipboard } from "@plane/utils";
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useUser } from "@/hooks/store/user";
+
+export const usePowerKCycleContextBasedActions = (): TPowerKCommandConfig[] => {
+  // navigation
+  const { workspaceSlug, cycleId } = useParams();
+  // store
+  const {
+    permission: { allowPermissions },
+  } = useUser();
+  const { getCycleById, addCycleToFavorites, removeCycleFromFavorites } = useCycle();
+  // derived values
+  const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : null;
+  const isFavorite = !!cycleDetails?.is_favorite;
+  // permission
+  const isEditingAllowed =
+    allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT) &&
+    !cycleDetails?.archived_at;
+  // translation
+  const { t } = useTranslation();
+
+  const toggleFavorite = useCallback(() => {
+    if (!workspaceSlug || !cycleDetails || !cycleDetails.project_id) return;
+    try {
+      if (isFavorite) removeCycleFromFavorites(workspaceSlug.toString(), cycleDetails.project_id, cycleDetails.id);
+      else addCycleToFavorites(workspaceSlug.toString(), cycleDetails.project_id, cycleDetails.id);
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Some error occurred",
+      });
+    }
+  }, [addCycleToFavorites, removeCycleFromFavorites, workspaceSlug, cycleDetails, isFavorite]);
+
+  const copyCycleUrlToClipboard = useCallback(() => {
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("power_k.contextual_actions.cycle.copy_url_toast_success"),
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("power_k.contextual_actions.cycle.copy_url_toast_error"),
+        });
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [
+    {
+      id: "toggle_cycle_favorite",
+      i18n_title: isFavorite
+        ? "power_k.contextual_actions.cycle.remove_from_favorites"
+        : "power_k.contextual_actions.cycle.add_to_favorites",
+      icon: isFavorite ? StarOff : StarOutline,
+      group: "contextual",
+      contextType: "cycle",
+      type: "action",
+      action: toggleFavorite,
+      modifierShortcut: "shift+f",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: true,
+    },
+    {
+      id: "copy_cycle_url",
+      i18n_title: "power_k.contextual_actions.cycle.copy_url",
+      icon: LinkOutline,
+      group: "contextual",
+      contextType: "cycle",
+      type: "action",
+      action: copyCycleUrlToClipboard,
+      modifierShortcut: "cmd+shift+,",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+  ];
+};
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/index.ts b/apps/web/core/components/power-k/ui/pages/context-based/index.ts
new file mode 100644
index 0000000..3e67e97
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/index.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+
+// components
+import type { TPowerKContextType } from "@/components/power-k/core/types";
+
+export type TContextEntityMap = {
+  i18n_title: string;
+  i18n_indicator: string;
+};
+
+export const CONTEXT_ENTITY_MAP: Record<TPowerKContextType, TContextEntityMap> = {
+  "work-item": {
+    i18n_title: "power_k.contextual_actions.work_item.title",
+    i18n_indicator: "power_k.contextual_actions.work_item.indicator",
+  },
+  page: {
+    i18n_title: "power_k.contextual_actions.page.title",
+    i18n_indicator: "power_k.contextual_actions.page.indicator",
+  },
+  cycle: {
+    i18n_title: "power_k.contextual_actions.cycle.title",
+    i18n_indicator: "power_k.contextual_actions.cycle.indicator",
+  },
+  module: {
+    i18n_title: "power_k.contextual_actions.module.title",
+    i18n_indicator: "power_k.contextual_actions.module.indicator",
+  },
+};
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
new file mode 100644
index 0000000..28a9102
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/commands.tsx
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { useParams } from "next/navigation";
+import { StarOff } from "lucide-react";
+import { LinkOutline, MembersOutline, StarOutline } from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { IModule, TModuleStatus } from "@plane/types";
+import { EUserPermissions } from "@plane/types";
+import { copyTextToClipboard } from "@plane/utils";
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { useUser } from "@/hooks/store/user";
+
+export const usePowerKModuleContextBasedActions = (): TPowerKCommandConfig[] => {
+  // navigation
+  const { workspaceSlug, projectId, moduleId } = useParams();
+  // store
+  const {
+    permission: { allowPermissions },
+  } = useUser();
+  const { getModuleById, addModuleToFavorites, removeModuleFromFavorites, updateModuleDetails } = useModule();
+  // derived values
+  const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : null;
+  const isFavorite = !!moduleDetails?.is_favorite;
+  // permission
+  const isEditingAllowed =
+    allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT) &&
+    !moduleDetails?.archived_at;
+  // translation
+  const { t } = useTranslation();
+
+  const handleUpdateModule = useCallback(
+    async (formData: Partial<IModule>) => {
+      if (!workspaceSlug || !projectId || !moduleDetails) return;
+      await updateModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleDetails.id, formData).catch(
+        () => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "Module could not be updated. Please try again.",
+          });
+        }
+      );
+    },
+    [moduleDetails, projectId, updateModuleDetails, workspaceSlug]
+  );
+
+  const handleUpdateMember = useCallback(
+    (memberId: string) => {
+      if (!moduleDetails) return;
+
+      const updatedMembers = moduleDetails.member_ids ?? [];
+      if (updatedMembers.includes(memberId)) updatedMembers.splice(updatedMembers.indexOf(memberId), 1);
+      else updatedMembers.push(memberId);
+
+      handleUpdateModule({ member_ids: updatedMembers });
+    },
+    [handleUpdateModule, moduleDetails]
+  );
+
+  const toggleFavorite = useCallback(() => {
+    if (!workspaceSlug || !moduleDetails || !moduleDetails.project_id) return;
+    try {
+      if (isFavorite) removeModuleFromFavorites(workspaceSlug.toString(), moduleDetails.project_id, moduleDetails.id);
+      else addModuleToFavorites(workspaceSlug.toString(), moduleDetails.project_id, moduleDetails.id);
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Some error occurred",
+      });
+    }
+  }, [addModuleToFavorites, removeModuleFromFavorites, workspaceSlug, moduleDetails, isFavorite]);
+
+  const copyModuleUrlToClipboard = useCallback(() => {
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("power_k.contextual_actions.module.copy_url_toast_success"),
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("power_k.contextual_actions.module.copy_url_toast_error"),
+        });
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [
+    {
+      id: "add_remove_module_members",
+      i18n_title: "power_k.contextual_actions.module.add_remove_members",
+      icon: MembersOutline,
+      group: "contextual",
+      contextType: "module",
+      type: "change-page",
+      page: "update-module-member",
+      onSelect: (data) => {
+        const memberId = data as string;
+        handleUpdateMember(memberId);
+      },
+      shortcut: "m",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: false,
+    },
+    {
+      id: "change_module_status",
+      i18n_title: "power_k.contextual_actions.module.change_status",
+      iconNode: <ModuleStatusIcon status="backlog" className="size-3.5 shrink-0" />,
+      group: "contextual",
+      contextType: "module",
+      type: "change-page",
+      page: "update-module-status",
+      onSelect: (data) => {
+        const status = data as TModuleStatus;
+        handleUpdateModule({ status });
+      },
+      shortcut: "s",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: true,
+    },
+    {
+      id: "toggle_module_favorite",
+      i18n_title: isFavorite
+        ? "power_k.contextual_actions.module.remove_from_favorites"
+        : "power_k.contextual_actions.module.add_to_favorites",
+      icon: isFavorite ? StarOff : StarOutline,
+      group: "contextual",
+      contextType: "module",
+      type: "action",
+      action: toggleFavorite,
+      modifierShortcut: "shift+f",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: true,
+    },
+    {
+      id: "copy_module_url",
+      i18n_title: "power_k.contextual_actions.module.copy_url",
+      icon: LinkOutline,
+      group: "contextual",
+      contextType: "module",
+      type: "action",
+      action: copyModuleUrlToClipboard,
+      modifierShortcut: "cmd+shift+,",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+  ];
+};
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/index.ts b/apps/web/core/components/power-k/ui/pages/context-based/module/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/root.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/root.tsx
new file mode 100644
index 0000000..86b7e77
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/root.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import type { TPowerKPageType } from "@/components/power-k/core/types";
+import { PowerKMembersMenu } from "@/components/power-k/menus/members";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+// local imports
+import { PowerKModuleStatusMenu } from "./status-menu";
+
+type Props = {
+  activePage: TPowerKPageType | null;
+  handleSelection: (data: unknown) => void;
+};
+
+export const PowerKModuleContextBasedPages = observer(function PowerKModuleContextBasedPages(props: Props) {
+  const { activePage, handleSelection } = props;
+  // navigation
+  const { moduleId } = useParams();
+  // store hooks
+  const { getModuleById } = useModule();
+  const {
+    project: { getProjectMemberIds },
+  } = useMember();
+  // derived values
+  const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : null;
+  const projectMemberIds = moduleDetails?.project_id ? getProjectMemberIds(moduleDetails.project_id, false) : [];
+
+  if (!moduleDetails) return null;
+
+  return (
+    <>
+      {/* members menu */}
+      {activePage === "update-module-member" && moduleDetails && (
+        <PowerKMembersMenu
+          handleSelect={handleSelection}
+          userIds={projectMemberIds ?? undefined}
+          value={moduleDetails.member_ids}
+        />
+      )}
+      {/* status menu */}
+      {activePage === "update-module-status" && moduleDetails?.status && (
+        <PowerKModuleStatusMenu handleSelect={handleSelection} value={moduleDetails.status} />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
new file mode 100644
index 0000000..38291cb
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/module/status-menu.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+// plane imports
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ModuleStatusIcon } from "@plane/propel/icons";
+import type { TModuleStatus } from "@plane/types";
+// local imports
+import { PowerKModalCommandItem } from "../../../modal/command-item";
+
+type Props = {
+  handleSelect: (data: TModuleStatus) => void;
+  value: TModuleStatus;
+};
+
+export const PowerKModuleStatusMenu = observer(function PowerKModuleStatusMenu(props: Props) {
+  const { handleSelect, value } = props;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <Command.Group>
+      {MODULE_STATUS.map((status) => (
+        <PowerKModalCommandItem
+          key={status.value}
+          iconNode={<ModuleStatusIcon status={status.value} className="size-3.5 shrink-0" />}
+          label={t(status.i18n_label)}
+          isSelected={status.value === value}
+          onSelect={() => handleSelect(status.value)}
+        />
+      ))}
+    </Command.Group>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
new file mode 100644
index 0000000..ecede47
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
@@ -0,0 +1,189 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { useParams } from "next/navigation";
+import { StarOff } from "lucide-react";
+import {
+  ArchiveOutline,
+  GlobeOutline,
+  LinkOutline,
+  LockOutline,
+  LockedOutline,
+  RestoreOutline,
+  StarOutline,
+  UnlockedOutline,
+} from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+// plane imports
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { EPageAccess } from "@plane/types";
+import { copyTextToClipboard } from "@plane/utils";
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// plane web imports
+import { EPageStoreType, usePageStore } from "@/hooks/store";
+
+export const usePowerKPageContextBasedActions = (): TPowerKCommandConfig[] => {
+  // navigation
+  const { pageId } = useParams();
+  // store hooks
+  const { getPageById } = usePageStore(EPageStoreType.PROJECT);
+  // derived values
+  const page = pageId ? getPageById(pageId.toString()) : null;
+  const {
+    access,
+    archived_at,
+    canCurrentUserArchivePage,
+    canCurrentUserChangeAccess,
+    canCurrentUserFavoritePage,
+    canCurrentUserLockPage,
+    addToFavorites,
+    removePageFromFavorites,
+    lock,
+    unlock,
+    makePrivate,
+    makePublic,
+    archive,
+    restore,
+  } = page ?? {};
+  const isFavorite = !!page?.is_favorite;
+  const isLocked = !!page?.is_locked;
+  // translation
+  const { t } = useTranslation();
+
+  const toggleFavorite = useCallback(() => {
+    try {
+      if (isFavorite) removePageFromFavorites?.();
+      else addToFavorites?.();
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Some error occurred",
+      });
+    }
+  }, [addToFavorites, removePageFromFavorites, isFavorite]);
+
+  const copyPageUrlToClipboard = useCallback(() => {
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("power_k.contextual_actions.page.copy_url_toast_success"),
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("power_k.contextual_actions.page.copy_url_toast_error"),
+        });
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [
+    {
+      id: "toggle_page_lock",
+      i18n_title: isLocked ? "power_k.contextual_actions.page.unlock" : "power_k.contextual_actions.page.lock",
+      icon: isLocked ? UnlockedOutline : LockedOutline,
+      group: "contextual",
+      contextType: "page",
+      type: "action",
+      action: () => {
+        if (isLocked)
+          unlock?.({
+            shouldSync: true,
+            recursive: true,
+          });
+        else
+          lock?.({
+            shouldSync: true,
+            recursive: true,
+          });
+      },
+      modifierShortcut: "shift+l",
+      isEnabled: () => !!canCurrentUserLockPage,
+      isVisible: () => !!canCurrentUserLockPage,
+      closeOnSelect: true,
+    },
+    {
+      id: "toggle_page_access",
+      i18n_title:
+        access === EPageAccess.PUBLIC
+          ? "power_k.contextual_actions.page.make_private"
+          : "power_k.contextual_actions.page.make_public",
+      icon: access === EPageAccess.PUBLIC ? LockOutline : GlobeOutline,
+      group: "contextual",
+      contextType: "page",
+      type: "action",
+      action: () => {
+        if (access === EPageAccess.PUBLIC)
+          makePrivate?.({
+            shouldSync: true,
+          });
+        else
+          makePublic?.({
+            shouldSync: true,
+          });
+      },
+      modifierShortcut: "shift+a",
+      isEnabled: () => !!canCurrentUserChangeAccess,
+      isVisible: () => !!canCurrentUserChangeAccess,
+      closeOnSelect: true,
+    },
+    {
+      id: "toggle_page_archive",
+      i18n_title: archived_at ? "power_k.contextual_actions.page.restore" : "power_k.contextual_actions.page.archive",
+      icon: archived_at ? RestoreOutline : ArchiveOutline,
+      group: "contextual",
+      contextType: "page",
+      type: "action",
+      action: () => {
+        if (archived_at)
+          restore?.({
+            shouldSync: true,
+          });
+        else
+          archive?.({
+            shouldSync: true,
+          });
+      },
+      modifierShortcut: "shift+r",
+      isEnabled: () => !!canCurrentUserArchivePage,
+      isVisible: () => !!canCurrentUserArchivePage,
+      closeOnSelect: true,
+    },
+    {
+      id: "toggle_page_favorite",
+      i18n_title: isFavorite
+        ? "power_k.contextual_actions.page.remove_from_favorites"
+        : "power_k.contextual_actions.page.add_to_favorites",
+      icon: isFavorite ? StarOff : StarOutline,
+      group: "contextual",
+      contextType: "page",
+      type: "action",
+      action: () => toggleFavorite(),
+      modifierShortcut: "shift+f",
+      isEnabled: () => !!canCurrentUserFavoritePage,
+      isVisible: () => !!canCurrentUserFavoritePage,
+      closeOnSelect: true,
+    },
+    {
+      id: "copy_page_url",
+      i18n_title: "power_k.contextual_actions.page.copy_url",
+      icon: LinkOutline,
+      group: "contextual",
+      contextType: "page",
+      type: "action",
+      action: copyPageUrlToClipboard,
+      modifierShortcut: "cmd+shift+,",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+  ];
+};
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/root.tsx b/apps/web/core/components/power-k/ui/pages/context-based/root.tsx
new file mode 100644
index 0000000..5618e18
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/root.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components
+import type { TPowerKCommandConfig, TPowerKContextType, TPowerKPageType } from "@/components/power-k/core/types";
+// local imports
+import { usePowerKCycleContextBasedActions } from "./cycle/commands";
+import { PowerKModuleContextBasedPages } from "./module";
+import { usePowerKModuleContextBasedActions } from "./module/commands";
+import { usePowerKPageContextBasedActions } from "./page/commands";
+import { PowerKWorkItemContextBasedPages } from "./work-item";
+import { usePowerKWorkItemContextBasedCommands } from "./work-item/commands";
+
+export type ContextBasedActionsProps = {
+  activePage: TPowerKPageType | null;
+  activeContext: TPowerKContextType | null;
+  handleSelection: (data: unknown) => void;
+};
+
+export function PowerKContextBasedPagesList(props: ContextBasedActionsProps) {
+  const { activeContext, activePage, handleSelection } = props;
+
+  return (
+    <>
+      {activeContext === "work-item" && (
+        <PowerKWorkItemContextBasedPages activePage={activePage} handleSelection={handleSelection} />
+      )}
+      {activeContext === "module" && (
+        <PowerKModuleContextBasedPages activePage={activePage} handleSelection={handleSelection} />
+      )}
+    </>
+  );
+}
+
+export const usePowerKContextBasedActions = (): TPowerKCommandConfig[] => {
+  const workItemCommands = usePowerKWorkItemContextBasedCommands();
+  const cycleCommands = usePowerKCycleContextBasedActions();
+  const moduleCommands = usePowerKModuleContextBasedActions();
+  const pageCommands = usePowerKPageContextBasedActions();
+
+  return [...workItemCommands, ...cycleCommands, ...moduleCommands, ...pageCommands];
+};
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts
new file mode 100644
index 0000000..4c7e58a
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/commands.ts
@@ -0,0 +1,459 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { useParams } from "next/navigation";
+import { Signal, TicketCheck, Triangle } from "lucide-react";
+import {
+  CyclesOutline,
+  DeleteOutline,
+  LabelsOutline,
+  LinkOutline,
+  MembersOutline,
+  ModuleOutline,
+  StateOutline,
+  SubscribeOutline,
+  TextOutline,
+  UnsubscribeOutline,
+  UserMinusOutline,
+  UserPlusOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { ICycle, IIssueLabel, IModule, TIssue, TIssuePriorities } from "@plane/types";
+import { EIssueServiceType, EUserPermissions } from "@plane/types";
+import { copyTextToClipboard } from "@plane/utils";
+// components
+import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+
+export const usePowerKWorkItemContextBasedCommands = (): TPowerKCommandConfig[] => {
+  // params
+  const { workspaceSlug, workItem: entityIdentifier } = useParams();
+  // store
+  const {
+    data: currentUser,
+    permission: { allowPermissions },
+  } = useUser();
+  const { toggleDeleteIssueModal } = useCommandPalette();
+  const { getProjectById } = useProject();
+  const { areEstimateEnabledByProjectId } = useProjectEstimates();
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier, addCycleToIssue, removeIssueFromCycle, changeModulesInIssue },
+    subscription: { getSubscriptionByIssueId, createSubscription, removeSubscription },
+    updateIssue,
+  } = useIssueDetail(EIssueServiceType.ISSUES);
+  const {
+    issue: {
+      addCycleToIssue: addCycleToEpic,
+      removeIssueFromCycle: removeEpicFromCycle,
+      changeModulesInIssue: changeModulesInEpic,
+    },
+    subscription: { createSubscription: createEpicSubscription, removeSubscription: removeEpicSubscription },
+    updateIssue: updateEpic,
+  } = useIssueDetail(EIssueServiceType.EPICS);
+  // derived values
+  const entityId = entityIdentifier ? getIssueIdByIdentifier(entityIdentifier.toString()) : null;
+  const entityDetails = entityId ? getIssueById(entityId) : null;
+  const isEpic = !!entityDetails?.is_epic;
+  const projectDetails = entityDetails?.project_id ? getProjectById(entityDetails?.project_id) : undefined;
+  const isCurrentUserAssigned = !!entityDetails?.assignee_ids?.includes(currentUser?.id ?? "");
+  const isEstimateEnabled = entityDetails?.project_id
+    ? areEstimateEnabledByProjectId(entityDetails?.project_id)
+    : false;
+  const isSubscribed = Boolean(entityId ? getSubscriptionByIssueId(entityId) : false);
+  // translation
+  const { t } = useTranslation();
+  // handlers
+  const updateEntity = isEpic ? updateEpic : updateIssue;
+  const createEntitySubscription = isEpic ? createEpicSubscription : createSubscription;
+  const removeEntitySubscription = isEpic ? removeEpicSubscription : removeSubscription;
+  // permission
+  const isEditingAllowed =
+    allowPermissions(
+      [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+      EUserPermissionsLevel.PROJECT,
+      workspaceSlug?.toString(),
+      entityDetails?.project_id ?? undefined
+    ) && !entityDetails?.archived_at;
+
+  const handleUpdateEntity = useCallback(
+    async (formData: Partial<TIssue>) => {
+      if (!workspaceSlug || !entityDetails || !entityDetails.project_id) return;
+      await updateEntity(workspaceSlug.toString(), entityDetails.project_id, entityDetails.id, formData).catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: `${isEpic ? "Epic" : "Work item"} could not be updated. Please try again.`,
+        });
+      });
+    },
+    [entityDetails, isEpic, updateEntity, workspaceSlug]
+  );
+
+  const handleUpdateAssignee = useCallback(
+    (assigneeId: string) => {
+      if (!entityDetails) return;
+
+      const updatedAssignees = [...(entityDetails.assignee_ids ?? [])];
+      if (updatedAssignees.includes(assigneeId)) updatedAssignees.splice(updatedAssignees.indexOf(assigneeId), 1);
+      else updatedAssignees.push(assigneeId);
+
+      handleUpdateEntity({ assignee_ids: updatedAssignees });
+    },
+    [entityDetails, handleUpdateEntity]
+  );
+
+  const handleSubscription = useCallback(async () => {
+    if (!workspaceSlug || !entityDetails || !entityDetails.project_id) return;
+
+    try {
+      if (isSubscribed) {
+        await removeEntitySubscription(workspaceSlug.toString(), entityDetails.project_id, entityDetails.id);
+      } else {
+        await createEntitySubscription(workspaceSlug.toString(), entityDetails.project_id, entityDetails.id);
+      }
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("toast.success"),
+        message: isSubscribed
+          ? t("issue.subscription.actions.unsubscribed")
+          : t("issue.subscription.actions.subscribed"),
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: t("common.error.message"),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [createEntitySubscription, entityDetails, isSubscribed, removeEntitySubscription, workspaceSlug]);
+
+  const handleDeleteWorkItem = useCallback(() => {
+    toggleDeleteIssueModal(true);
+  }, [toggleDeleteIssueModal]);
+
+  const copyWorkItemIdToClipboard = useCallback(() => {
+    const id = `${projectDetails?.identifier}-${entityDetails?.sequence_id}`;
+    copyTextToClipboard(id)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("power_k.contextual_actions.work_item.copy_id_toast_success"),
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("power_k.contextual_actions.work_item.copy_id_toast_error"),
+        });
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [entityDetails?.sequence_id, projectDetails?.identifier]);
+
+  const copyWorkItemTitleToClipboard = useCallback(() => {
+    copyTextToClipboard(entityDetails?.name ?? "")
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("power_k.contextual_actions.work_item.copy_title_toast_success"),
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("power_k.contextual_actions.work_item.copy_title_toast_error"),
+        });
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [entityDetails?.name]);
+
+  const copyWorkItemUrlToClipboard = useCallback(() => {
+    const url = new URL(window.location.href);
+    copyTextToClipboard(url.href)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("power_k.contextual_actions.work_item.copy_url_toast_success"),
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("power_k.contextual_actions.work_item.copy_url_toast_error"),
+        });
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [
+    {
+      id: "change_work_item_state",
+      i18n_title: "power_k.contextual_actions.work_item.change_state",
+      icon: StateOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "change-page",
+      page: "update-work-item-state",
+      onSelect: (data) => {
+        const stateId = data as string;
+        if (entityDetails?.state_id === stateId) return;
+        handleUpdateEntity({
+          state_id: stateId,
+        });
+      },
+      shortcut: "s",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: true,
+    },
+    {
+      id: "change_work_item_priority",
+      i18n_title: "power_k.contextual_actions.work_item.change_priority",
+      icon: Signal,
+      group: "contextual",
+      contextType: "work-item",
+      type: "change-page",
+      page: "update-work-item-priority",
+      onSelect: (data) => {
+        const priority = data as TIssuePriorities;
+        if (entityDetails?.priority === priority) return;
+        handleUpdateEntity({
+          priority,
+        });
+      },
+      shortcut: "p",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: true,
+    },
+    {
+      id: "change_work_item_assignees",
+      i18n_title: "power_k.contextual_actions.work_item.change_assignees",
+      icon: MembersOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "change-page",
+      page: "update-work-item-assignee",
+      onSelect: (data) => {
+        const assigneeId = data as string;
+        handleUpdateAssignee(assigneeId);
+      },
+      shortcut: "a",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: false,
+    },
+    {
+      id: "assign_work_item_to_me",
+      i18n_title: isCurrentUserAssigned
+        ? "power_k.contextual_actions.work_item.unassign_from_me"
+        : "power_k.contextual_actions.work_item.assign_to_me",
+      icon: isCurrentUserAssigned ? UserMinusOutline : UserPlusOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "action",
+      action: () => {
+        if (!currentUser) return;
+        handleUpdateAssignee(currentUser.id);
+      },
+      shortcut: "i",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: true,
+    },
+    {
+      id: "change_work_item_estimate",
+      i18n_title: "power_k.contextual_actions.work_item.change_estimate",
+      icon: Triangle,
+      group: "contextual",
+      contextType: "work-item",
+      type: "change-page",
+      page: "update-work-item-estimate",
+      onSelect: (data) => {
+        const estimatePointId = data as string | null;
+        if (entityDetails?.estimate_point === estimatePointId) return;
+        handleUpdateEntity({
+          estimate_point: estimatePointId,
+        });
+      },
+      modifierShortcut: "shift+e",
+      isEnabled: () => isEstimateEnabled && isEditingAllowed,
+      isVisible: () => isEstimateEnabled && isEditingAllowed,
+      closeOnSelect: true,
+    },
+    {
+      id: "add_work_item_to_cycle",
+      i18n_title: "power_k.contextual_actions.work_item.add_to_cycle",
+      icon: CyclesOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "change-page",
+      page: "update-work-item-cycle",
+      onSelect: (data) => {
+        const cycleId = (data as ICycle)?.id;
+        if (!workspaceSlug || !entityDetails || !entityDetails.project_id) return;
+        if (entityDetails.cycle_id === cycleId) return;
+        // handlers
+        const addCycleToEntity = entityDetails.is_epic ? addCycleToEpic : addCycleToIssue;
+        const removeCycleFromEntity = entityDetails.is_epic ? removeEpicFromCycle : removeIssueFromCycle;
+
+        try {
+          if (cycleId) {
+            addCycleToEntity(workspaceSlug.toString(), entityDetails.project_id, cycleId, entityDetails.id);
+          } else {
+            removeCycleFromEntity(
+              workspaceSlug.toString(),
+              entityDetails.project_id,
+              entityDetails.cycle_id ?? "",
+              entityDetails.id
+            );
+          }
+        } catch {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: `${entityDetails.is_epic ? "Epic" : "Work item"} could not be updated. Please try again.`,
+          });
+        }
+      },
+      modifierShortcut: "shift+c",
+      isEnabled: () => Boolean(projectDetails?.cycle_view && isEditingAllowed),
+      isVisible: () => Boolean(projectDetails?.cycle_view && isEditingAllowed),
+      closeOnSelect: true,
+    },
+    {
+      id: "add_work_item_to_modules",
+      i18n_title: "power_k.contextual_actions.work_item.add_to_modules",
+      icon: ModuleOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "change-page",
+      page: "update-work-item-module",
+      onSelect: (data) => {
+        const moduleId = (data as IModule)?.id;
+        if (!workspaceSlug || !entityDetails || !entityDetails.project_id) return;
+        // handlers
+        const changeModulesInEntity = entityDetails.is_epic ? changeModulesInEpic : changeModulesInIssue;
+        try {
+          if (entityDetails.module_ids?.includes(moduleId)) {
+            changeModulesInEntity(workspaceSlug.toString(), entityDetails.project_id, entityDetails.id, [], [moduleId]);
+          } else {
+            changeModulesInEntity(workspaceSlug.toString(), entityDetails.project_id, entityDetails.id, [moduleId], []);
+          }
+        } catch {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: `${entityDetails.is_epic ? "Epic" : "Work item"} could not be updated. Please try again.`,
+          });
+        }
+      },
+      modifierShortcut: "shift+m",
+      isEnabled: () => Boolean(projectDetails?.module_view && isEditingAllowed),
+      isVisible: () => Boolean(projectDetails?.module_view && isEditingAllowed),
+      closeOnSelect: false,
+    },
+    {
+      id: "add_work_item_labels",
+      i18n_title: "power_k.contextual_actions.work_item.add_labels",
+      icon: LabelsOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "change-page",
+      page: "update-work-item-labels",
+      onSelect: (data) => {
+        const labelId = (data as IIssueLabel)?.id;
+        if (!workspaceSlug || !entityDetails || !entityDetails.project_id) return;
+        const updatedLabels = [...(entityDetails.label_ids ?? [])];
+        if (updatedLabels.includes(labelId)) updatedLabels.splice(updatedLabels.indexOf(labelId), 1);
+        else updatedLabels.push(labelId);
+        handleUpdateEntity({
+          label_ids: updatedLabels,
+        });
+      },
+      shortcut: "l",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: false,
+    },
+    {
+      id: "subscribe_work_item",
+      i18n_title: isSubscribed
+        ? "power_k.contextual_actions.work_item.unsubscribe"
+        : "power_k.contextual_actions.work_item.subscribe",
+      icon: isSubscribed ? UnsubscribeOutline : SubscribeOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "action",
+      action: handleSubscription,
+      modifierShortcut: "shift+s",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: true,
+    },
+    {
+      id: "delete_work_item",
+      i18n_title: "power_k.contextual_actions.work_item.delete",
+      icon: DeleteOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "action",
+      action: handleDeleteWorkItem,
+      modifierShortcut: "cmd+backspace",
+      isEnabled: () => isEditingAllowed,
+      isVisible: () => isEditingAllowed,
+      closeOnSelect: true,
+    },
+    {
+      id: "copy_work_item_id",
+      i18n_title: "power_k.contextual_actions.work_item.copy_id",
+      icon: TicketCheck,
+      group: "contextual",
+      contextType: "work-item",
+      type: "action",
+      action: copyWorkItemIdToClipboard,
+      modifierShortcut: "cmd+.",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "copy_work_item_title",
+      i18n_title: "power_k.contextual_actions.work_item.copy_title",
+      icon: TextOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "action",
+      action: copyWorkItemTitleToClipboard,
+      modifierShortcut: "cmd+shift+'",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+    {
+      id: "copy_work_item_url",
+      i18n_title: "power_k.contextual_actions.work_item.copy_url",
+      icon: LinkOutline,
+      group: "contextual",
+      contextType: "work-item",
+      type: "action",
+      action: copyWorkItemUrlToClipboard,
+      modifierShortcut: "cmd+shift+,",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
+  ];
+};
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
new file mode 100644
index 0000000..a43374b
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/cycles-menu.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import type { ICycle, TIssue } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// components
+import { PowerKCyclesMenu } from "@/components/power-k/menus/cycles";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+
+type Props = {
+  handleSelect: (cycle: ICycle) => void;
+  workItemDetails: TIssue;
+};
+
+export const PowerKWorkItemCyclesMenu = observer(function PowerKWorkItemCyclesMenu(props: Props) {
+  const { handleSelect, workItemDetails } = props;
+  // store hooks
+  const { getProjectCycleIds, getCycleById } = useCycle();
+  // derived values
+  const projectCycleIds = workItemDetails.project_id ? getProjectCycleIds(workItemDetails.project_id) : undefined;
+  const cyclesList = projectCycleIds ? projectCycleIds.map((cycleId) => getCycleById(cycleId)) : undefined;
+  const filteredCyclesList = cyclesList ? cyclesList.filter((cycle) => !!cycle) : undefined;
+
+  if (!filteredCyclesList) return <Spinner />;
+
+  return <PowerKCyclesMenu cycles={filteredCyclesList} onSelect={handleSelect} value={workItemDetails.cycle_id} />;
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
new file mode 100644
index 0000000..fa9cd01
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/estimates-menu.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { Triangle } from "lucide-react";
+// plane types
+import { useTranslation } from "@plane/i18n";
+import { EEstimateSystem } from "@plane/types";
+import type { TIssue } from "@plane/types";
+import { Spinner } from "@plane/ui";
+import { convertMinutesToHoursMinutesString } from "@plane/utils";
+// hooks
+import { useEstimate, useProjectEstimates } from "@/hooks/store/estimates";
+// local imports
+import { PowerKModalCommandItem } from "../../../modal/command-item";
+
+type Props = {
+  handleSelect: (estimatePointId: string | null) => void;
+  workItemDetails: TIssue;
+};
+
+export const PowerKWorkItemEstimatesMenu = observer(function PowerKWorkItemEstimatesMenu(props: Props) {
+  const { handleSelect, workItemDetails } = props;
+  // store hooks
+  const { currentActiveEstimateIdByProjectId, getEstimateById } = useProjectEstimates();
+  const currentActiveEstimateId = workItemDetails.project_id
+    ? currentActiveEstimateIdByProjectId(workItemDetails.project_id)
+    : undefined;
+  const { estimatePointIds, estimatePointById } = useEstimate(currentActiveEstimateId);
+  // derived values
+  const currentActiveEstimate = currentActiveEstimateId ? getEstimateById(currentActiveEstimateId) : undefined;
+  // translation
+  const { t } = useTranslation();
+
+  if (!estimatePointIds) return <Spinner />;
+
+  return (
+    <Command.Group>
+      <PowerKModalCommandItem
+        icon={Triangle}
+        label={t("project_settings.estimates.no_estimate")}
+        isSelected={workItemDetails.estimate_point === null}
+        onSelect={() => handleSelect(null)}
+      />
+      {estimatePointIds.length > 0 ? (
+        estimatePointIds.map((estimatePointId) => {
+          const estimatePoint = estimatePointById(estimatePointId);
+          if (!estimatePoint) return null;
+
+          return (
+            <PowerKModalCommandItem
+              key={estimatePoint.id}
+              icon={Triangle}
+              label={
+                currentActiveEstimate?.type === EEstimateSystem.TIME
+                  ? convertMinutesToHoursMinutesString(Number(estimatePoint.value))
+                  : estimatePoint.value
+              }
+              isSelected={workItemDetails.estimate_point === estimatePoint.id}
+              onSelect={() => handleSelect(estimatePoint.id ?? null)}
+            />
+          );
+        })
+      ) : (
+        <div className="text-center">No estimate found</div>
+      )}
+    </Command.Group>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/index.ts b/apps/web/core/components/power-k/ui/pages/context-based/work-item/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
new file mode 100644
index 0000000..42a5f61
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/labels-menu.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import type { IIssueLabel, TIssue } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// components
+import { PowerKLabelsMenu } from "@/components/power-k/menus/labels";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+
+type Props = {
+  handleSelect: (label: IIssueLabel) => void;
+  workItemDetails: TIssue;
+};
+
+export const PowerKWorkItemLabelsMenu = observer(function PowerKWorkItemLabelsMenu(props: Props) {
+  const { handleSelect, workItemDetails } = props;
+  // store hooks
+  const { getProjectLabelIds, getLabelById } = useLabel();
+  // derived values
+  const projectLabelIds = workItemDetails.project_id ? getProjectLabelIds(workItemDetails.project_id) : undefined;
+  const labelsList = projectLabelIds ? projectLabelIds.map((labelId) => getLabelById(labelId)) : undefined;
+  const filteredLabelsList = labelsList ? labelsList.filter((label) => !!label) : undefined;
+
+  if (!filteredLabelsList) return <Spinner />;
+
+  return <PowerKLabelsMenu labels={filteredLabelsList} onSelect={handleSelect} value={workItemDetails.label_ids} />;
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
new file mode 100644
index 0000000..d780f8c
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/modules-menu.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import type { IModule, TIssue } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// components
+import { PowerKModulesMenu } from "@/components/power-k/menus/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+
+type Props = {
+  handleSelect: (module: IModule) => void;
+  workItemDetails: TIssue;
+};
+
+export const PowerKWorkItemModulesMenu = observer(function PowerKWorkItemModulesMenu(props: Props) {
+  const { handleSelect, workItemDetails } = props;
+  // store hooks
+  const { getProjectModuleIds, getModuleById } = useModule();
+  // derived values
+  const projectModuleIds = workItemDetails.project_id ? getProjectModuleIds(workItemDetails.project_id) : undefined;
+  const modulesList = projectModuleIds ? projectModuleIds.map((moduleId) => getModuleById(moduleId)) : undefined;
+  const filteredModulesList = modulesList ? modulesList.filter((module) => !!module) : undefined;
+
+  if (!filteredModulesList) return <Spinner />;
+
+  return (
+    <PowerKModulesMenu modules={filteredModulesList} onSelect={handleSelect} value={workItemDetails.module_ids ?? []} />
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx
new file mode 100644
index 0000000..1ea30eb
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/priorities-menu.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+// plane imports
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { PriorityIcon } from "@plane/propel/icons";
+import type { TIssue, TIssuePriorities } from "@plane/types";
+// local imports
+import { PowerKModalCommandItem } from "../../../modal/command-item";
+
+type Props = {
+  handleSelect: (priority: TIssuePriorities) => void;
+  workItemDetails: TIssue;
+};
+
+export const PowerKWorkItemPrioritiesMenu = observer(function PowerKWorkItemPrioritiesMenu(props: Props) {
+  const { handleSelect, workItemDetails } = props;
+
+  return (
+    <Command.Group>
+      {ISSUE_PRIORITIES.map((priority) => (
+        <PowerKModalCommandItem
+          key={priority.key}
+          iconNode={<PriorityIcon priority={priority.key} />}
+          label={priority.title}
+          isSelected={priority.key === workItemDetails.priority}
+          onSelect={() => handleSelect(priority.key)}
+        />
+      ))}
+    </Command.Group>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/root.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/root.tsx
new file mode 100644
index 0000000..70dc439
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/root.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EIssueServiceType } from "@plane/types";
+// components
+import type { TPowerKPageType } from "@/components/power-k/core/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useMember } from "@/hooks/store/use-member";
+// local imports
+import { PowerKMembersMenu } from "../../../../menus/members";
+import { PowerKWorkItemCyclesMenu } from "./cycles-menu";
+import { PowerKWorkItemEstimatesMenu } from "./estimates-menu";
+import { PowerKWorkItemLabelsMenu } from "./labels-menu";
+import { PowerKWorkItemModulesMenu } from "./modules-menu";
+import { PowerKWorkItemPrioritiesMenu } from "./priorities-menu";
+import { PowerKProjectStatesMenu } from "./states-menu";
+
+type Props = {
+  activePage: TPowerKPageType | null;
+  handleSelection: (data: unknown) => void;
+};
+
+export const PowerKWorkItemContextBasedPages = observer(function PowerKWorkItemContextBasedPages(props: Props) {
+  const { activePage, handleSelection } = props;
+  // navigation
+  const { workItem: entityIdentifier } = useParams();
+  // store hooks
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail(EIssueServiceType.ISSUES);
+  const {
+    project: { getProjectMemberIds },
+  } = useMember();
+  // derived values
+  const entityId = entityIdentifier ? getIssueIdByIdentifier(entityIdentifier.toString()) : null;
+  const entityDetails = entityId ? getIssueById(entityId) : null;
+  const projectMemberIds = entityDetails?.project_id ? getProjectMemberIds(entityDetails.project_id, false) : [];
+
+  if (!entityDetails) return null;
+
+  return (
+    <>
+      {/* states menu */}
+      {activePage === "update-work-item-state" && (
+        <PowerKProjectStatesMenu handleSelect={handleSelection} workItemDetails={entityDetails} />
+      )}
+      {/* priority menu */}
+      {activePage === "update-work-item-priority" && (
+        <PowerKWorkItemPrioritiesMenu handleSelect={handleSelection} workItemDetails={entityDetails} />
+      )}
+      {/* members menu */}
+      {activePage === "update-work-item-assignee" && (
+        <PowerKMembersMenu
+          handleSelect={handleSelection}
+          userIds={projectMemberIds ?? undefined}
+          value={entityDetails.assignee_ids}
+        />
+      )}
+      {/* estimates menu */}
+      {activePage === "update-work-item-estimate" && (
+        <PowerKWorkItemEstimatesMenu handleSelect={handleSelection} workItemDetails={entityDetails} />
+      )}
+      {/* cycles menu */}
+      {activePage === "update-work-item-cycle" && (
+        <PowerKWorkItemCyclesMenu handleSelect={handleSelection} workItemDetails={entityDetails} />
+      )}
+      {/* modules menu */}
+      {activePage === "update-work-item-module" && (
+        <PowerKWorkItemModulesMenu handleSelect={handleSelection} workItemDetails={entityDetails} />
+      )}
+      {/* labels menu */}
+      {activePage === "update-work-item-labels" && (
+        <PowerKWorkItemLabelsMenu handleSelect={handleSelection} workItemDetails={entityDetails} />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/state-menu-item.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/state-menu-item.tsx
new file mode 100644
index 0000000..a407f3d
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/state-menu-item.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { StateGroupIcon } from "@plane/propel/icons";
+import type { IState } from "@plane/types";
+// components
+import { PowerKModalCommandItem } from "@/components/power-k/ui/modal/command-item";
+
+export type TPowerKProjectStatesMenuItemsProps = {
+  handleSelect: (stateId: string) => void;
+  projectId: string | undefined;
+  selectedStateId: string | undefined;
+  states: IState[];
+  workspaceSlug: string;
+};
+
+export const PowerKProjectStatesMenuItems = observer(function PowerKProjectStatesMenuItems(
+  props: TPowerKProjectStatesMenuItemsProps
+) {
+  const { handleSelect, selectedStateId, states } = props;
+
+  return (
+    <>
+      {states.map((state) => (
+        <PowerKModalCommandItem
+          key={state.id}
+          iconNode={<StateGroupIcon stateGroup={state.group} color={state.color} className="size-3.5 shrink-0" />}
+          label={state.name}
+          isSelected={state.id === selectedStateId}
+          onSelect={() => handleSelect(state.id)}
+        />
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx b/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
new file mode 100644
index 0000000..749ddf5
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/context-based/work-item/states-menu.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+// plane types
+import { useParams } from "next/navigation";
+import type { TIssue } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+// local imports
+import { PowerKProjectStatesMenuItems } from "./state-menu-item";
+
+type Props = {
+  handleSelect: (stateId: string) => void;
+  workItemDetails: TIssue;
+};
+
+export const PowerKProjectStatesMenu = observer(function PowerKProjectStatesMenu(props: Props) {
+  const { workItemDetails } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getProjectStateIds, getStateById } = useProjectState();
+  // derived values
+  const projectStateIds = workItemDetails.project_id ? getProjectStateIds(workItemDetails.project_id) : undefined;
+  const projectStates = projectStateIds ? projectStateIds.map((stateId) => getStateById(stateId)) : undefined;
+  const filteredProjectStates = projectStates ? projectStates.filter((state) => !!state) : undefined;
+
+  if (!filteredProjectStates) return <Spinner />;
+
+  return (
+    <Command.Group>
+      <PowerKProjectStatesMenuItems
+        {...props}
+        projectId={workItemDetails.project_id ?? undefined}
+        selectedStateId={workItemDetails.state_id ?? undefined}
+        states={filteredProjectStates}
+        workspaceSlug={workspaceSlug?.toString()}
+      />
+    </Command.Group>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/default.tsx b/apps/web/core/components/power-k/ui/pages/default.tsx
new file mode 100644
index 0000000..6d3f6dd
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/default.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// hooks
+import { usePowerK } from "@/hooks/store/use-power-k";
+// local imports
+import type { TPowerKCommandConfig, TPowerKContext } from "../../core/types";
+import { CommandRenderer } from "../renderer/command";
+
+type Props = {
+  context: TPowerKContext;
+  onCommandSelect: (command: TPowerKCommandConfig) => void;
+};
+
+export function PowerKModalDefaultPage(props: Props) {
+  const { context, onCommandSelect } = props;
+  // store hooks
+  const { commandRegistry } = usePowerK();
+  // Get commands to display
+  const commands = commandRegistry.getVisibleCommands(context);
+
+  return <CommandRenderer context={context} commands={commands} onCommandSelect={onCommandSelect} />;
+}
diff --git a/apps/web/core/components/power-k/ui/pages/index.ts b/apps/web/core/components/power-k/ui/pages/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
new file mode 100644
index 0000000..0b2b7fd
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-cycles-menu.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import type { ICycle } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// components
+import type { TPowerKContext } from "@/components/power-k/core/types";
+import { PowerKCyclesMenu } from "@/components/power-k/menus/cycles";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+
+type Props = {
+  context: TPowerKContext;
+  handleSelect: (cycle: ICycle) => void;
+};
+
+export const PowerKOpenProjectCyclesMenu = observer(function PowerKOpenProjectCyclesMenu(props: Props) {
+  const { context, handleSelect } = props;
+  // store hooks
+  const { fetchedMap, getProjectCycleIds, getCycleById } = useCycle();
+  // derived values
+  const projectId = context.params.projectId?.toString();
+  const isFetched = projectId ? fetchedMap[projectId] : false;
+  const projectCycleIds = projectId ? getProjectCycleIds(projectId) : undefined;
+  const cyclesList = projectCycleIds
+    ? projectCycleIds.map((cycleId) => getCycleById(cycleId)).filter((cycle) => !!cycle)
+    : [];
+
+  if (!isFetched) return <Spinner />;
+
+  return <PowerKCyclesMenu cycles={cyclesList} onSelect={handleSelect} />;
+});
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
new file mode 100644
index 0000000..b359501
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-modules-menu.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import type { IModule } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// components
+import type { TPowerKContext } from "@/components/power-k/core/types";
+import { PowerKModulesMenu } from "@/components/power-k/menus/modules";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+
+type Props = {
+  context: TPowerKContext;
+  handleSelect: (module: IModule) => void;
+};
+
+export const PowerKOpenProjectModulesMenu = observer(function PowerKOpenProjectModulesMenu(props: Props) {
+  const { context, handleSelect } = props;
+  // store hooks
+  const { fetchedMap, getProjectModuleIds, getModuleById } = useModule();
+  // derived values
+  const projectId = context.params.projectId?.toString();
+  const isFetched = projectId ? fetchedMap[projectId] : false;
+  const projectModuleIds = projectId ? getProjectModuleIds(projectId) : undefined;
+  const modulesList = projectModuleIds
+    ? projectModuleIds.map((moduleId) => getModuleById(moduleId)).filter((module) => !!module)
+    : [];
+
+  if (!isFetched) return <Spinner />;
+
+  return <PowerKModulesMenu modules={modulesList} onSelect={handleSelect} />;
+});
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-settings-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-settings-menu.tsx
new file mode 100644
index 0000000..5a1be46
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-settings-menu.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { EUserPermissionsLevel, PROJECT_SETTINGS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import type { TPowerKContext } from "@/components/power-k/core/types";
+import { PowerKSettingsMenu } from "@/components/power-k/menus/settings";
+import { PROJECT_SETTINGS_ICONS } from "@/components/settings/project/sidebar/item-icon";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  context: TPowerKContext;
+  handleSelect: (href: string) => void;
+};
+
+export const PowerKOpenProjectSettingsMenu = observer(function PowerKOpenProjectSettingsMenu(props: Props) {
+  const { context, handleSelect } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const settingsList = Object.values(PROJECT_SETTINGS).filter(
+    (setting) =>
+      context.params.workspaceSlug &&
+      context.params.projectId &&
+      allowPermissions(
+        setting.access,
+        EUserPermissionsLevel.PROJECT,
+        context.params.workspaceSlug?.toString(),
+        context.params.projectId?.toString()
+      )
+  );
+  const settingsListWithIcons = settingsList.map((setting) => ({
+    ...setting,
+    label: t(setting.i18n_label),
+    icon: PROJECT_SETTINGS_ICONS[setting.key],
+  }));
+
+  return <PowerKSettingsMenu settings={settingsListWithIcons} onSelect={(setting) => handleSelect(setting.href)} />;
+});
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
new file mode 100644
index 0000000..16a0453
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/project-views-menu.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import type { IProjectView } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// components
+import type { TPowerKContext } from "@/components/power-k/core/types";
+// hooks
+import { PowerKViewsMenu } from "@/components/power-k/menus/views";
+import { useProjectView } from "@/hooks/store/use-project-view";
+
+type Props = {
+  context: TPowerKContext;
+  handleSelect: (view: IProjectView) => void;
+};
+
+export const PowerKOpenProjectViewsMenu = observer(function PowerKOpenProjectViewsMenu(props: Props) {
+  const { context, handleSelect } = props;
+  // store hooks
+  const { fetchedMap, getProjectViews } = useProjectView();
+  // derived values
+  const projectId = context.params.projectId?.toString();
+  const isFetched = projectId ? fetchedMap[projectId] : false;
+  const viewsList = projectId ? (getProjectViews(projectId)?.filter((view) => !!view) ?? []) : [];
+
+  if (!isFetched) return <Spinner />;
+
+  return <PowerKViewsMenu views={viewsList} onSelect={handleSelect} />;
+});
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
new file mode 100644
index 0000000..a1d48b5
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/projects-menu.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import type { IPartialProject } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// components
+import { PowerKProjectsMenu } from "@/components/power-k/menus/projects";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  handleSelect: (project: IPartialProject) => void;
+};
+
+export const PowerKOpenProjectMenu = observer(function PowerKOpenProjectMenu(props: Props) {
+  const { handleSelect } = props;
+  // store hooks
+  const { loader, joinedProjectIds, getPartialProjectById } = useProject();
+  // derived values
+  const projectsList = joinedProjectIds
+    ? joinedProjectIds.map((id) => getPartialProjectById(id)).filter((project) => project !== undefined)
+    : [];
+
+  if (loader === "init-loader") return <Spinner />;
+
+  return <PowerKProjectsMenu projects={projectsList} onSelect={handleSelect} />;
+});
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/root.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/root.tsx
new file mode 100644
index 0000000..c6de0cc
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/root.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import { PowerKOpenProjectCyclesMenu } from "./project-cycles-menu";
+import { PowerKOpenProjectModulesMenu } from "./project-modules-menu";
+import { PowerKOpenProjectSettingsMenu } from "./project-settings-menu";
+import { PowerKOpenProjectViewsMenu } from "./project-views-menu";
+import { PowerKOpenProjectMenu } from "./projects-menu";
+import type { TPowerKOpenEntityActionsProps } from "./shared";
+import { PowerKOpenWorkspaceSettingsMenu } from "./workspace-settings-menu";
+import { PowerKOpenWorkspaceMenu } from "./workspaces-menu";
+
+export function PowerKOpenEntityPages(props: TPowerKOpenEntityActionsProps) {
+  const { activePage, context, handleSelection } = props;
+
+  return (
+    <>
+      {activePage === "open-workspace" && <PowerKOpenWorkspaceMenu handleSelect={handleSelection} />}
+      {activePage === "open-project" && <PowerKOpenProjectMenu handleSelect={handleSelection} />}
+      {activePage === "open-workspace-setting" && (
+        <PowerKOpenWorkspaceSettingsMenu context={context} handleSelect={handleSelection} />
+      )}
+      {activePage === "open-project-setting" && (
+        <PowerKOpenProjectSettingsMenu context={context} handleSelect={handleSelection} />
+      )}
+      {activePage === "open-project-cycle" && (
+        <PowerKOpenProjectCyclesMenu context={context} handleSelect={handleSelection} />
+      )}
+      {activePage === "open-project-module" && (
+        <PowerKOpenProjectModulesMenu context={context} handleSelect={handleSelection} />
+      )}
+      {activePage === "open-project-view" && (
+        <PowerKOpenProjectViewsMenu context={context} handleSelect={handleSelection} />
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/shared.ts b/apps/web/core/components/power-k/ui/pages/open-entity/shared.ts
new file mode 100644
index 0000000..c399a6c
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/shared.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import type { TPowerKContext, TPowerKPageType } from "@/components/power-k/core/types";
+
+export type TPowerKOpenEntityActionsProps = {
+  activePage: TPowerKPageType | null;
+  context: TPowerKContext;
+  handleSelection: (data: unknown) => void;
+};
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx
new file mode 100644
index 0000000..7dc8805
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/workspace-settings-menu.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import { EUserPermissionsLevel, WORKSPACE_SETTINGS } from "@plane/constants";
+// components
+import { useTranslation } from "@plane/i18n";
+import type { TPowerKContext } from "@/components/power-k/core/types";
+import { PowerKSettingsMenu } from "@/components/power-k/menus/settings";
+import { WORKSPACE_SETTINGS_ICONS } from "@/components/settings/workspace/sidebar/item-icon";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  context: TPowerKContext;
+  handleSelect: (href: string) => void;
+};
+
+export const PowerKOpenWorkspaceSettingsMenu = observer(function PowerKOpenWorkspaceSettingsMenu(props: Props) {
+  const { context, handleSelect } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const settingsList = Object.values(WORKSPACE_SETTINGS).filter(
+    (setting) =>
+      context.params.workspaceSlug &&
+      allowPermissions(setting.access, EUserPermissionsLevel.WORKSPACE, context.params.workspaceSlug?.toString())
+  );
+  const settingsListWithIcons = settingsList.map((setting) => ({
+    ...setting,
+    label: t(setting.i18n_label),
+    icon: WORKSPACE_SETTINGS_ICONS[setting.key],
+  }));
+
+  return <PowerKSettingsMenu settings={settingsListWithIcons} onSelect={(setting) => handleSelect(setting.href)} />;
+});
diff --git a/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx b/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
new file mode 100644
index 0000000..70df60e
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/open-entity/workspaces-menu.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane types
+import type { IWorkspace } from "@plane/types";
+import { Spinner } from "@plane/ui";
+// components
+import { PowerKWorkspacesMenu } from "@/components/power-k/menus/workspaces";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+type Props = {
+  handleSelect: (workspace: IWorkspace) => void;
+};
+
+export const PowerKOpenWorkspaceMenu = observer(function PowerKOpenWorkspaceMenu(props: Props) {
+  const { handleSelect } = props;
+  // store hooks
+  const { loader, workspaces } = useWorkspace();
+  // derived values
+  const workspacesList = workspaces ? Object.values(workspaces) : [];
+
+  if (loader) return <Spinner />;
+
+  return <PowerKWorkspacesMenu workspaces={workspacesList} onSelect={handleSelect} />;
+});
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/index.ts b/apps/web/core/components/power-k/ui/pages/preferences/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/preferences/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/languages-menu.tsx b/apps/web/core/components/power-k/ui/pages/preferences/languages-menu.tsx
new file mode 100644
index 0000000..1a26320
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/preferences/languages-menu.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+// plane imports
+import { SUPPORTED_LANGUAGES } from "@plane/i18n";
+// local imports
+import { PowerKModalCommandItem } from "../../modal/command-item";
+
+type Props = {
+  onSelect: (language: string) => void;
+};
+
+export const PowerKPreferencesLanguagesMenu = observer(function PowerKPreferencesLanguagesMenu(props: Props) {
+  const { onSelect } = props;
+
+  return (
+    <Command.Group>
+      {SUPPORTED_LANGUAGES.map((language) => (
+        <PowerKModalCommandItem key={language.value} onSelect={() => onSelect(language.value)} label={language.label} />
+      ))}
+    </Command.Group>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/root.tsx b/apps/web/core/components/power-k/ui/pages/preferences/root.tsx
new file mode 100644
index 0000000..32d21df
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/preferences/root.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// components
+import type { TPowerKPageType } from "@/components/power-k/core/types";
+// local imports
+import { PowerKPreferencesLanguagesMenu } from "./languages-menu";
+import { PowerKPreferencesStartOfWeekMenu } from "./start-of-week-menu";
+import { PowerKPreferencesThemesMenu } from "./themes-menu";
+import { PowerKPreferencesTimezonesMenu } from "./timezone-menu";
+
+type Props = {
+  activePage: TPowerKPageType | null;
+  handleSelection: (data: unknown) => void;
+};
+
+export const PowerKAccountPreferencesPages = observer(function PowerKAccountPreferencesPages(props: Props) {
+  const { activePage, handleSelection } = props;
+
+  return (
+    <>
+      {activePage === "update-theme" && <PowerKPreferencesThemesMenu onSelect={handleSelection} />}
+      {activePage === "update-timezone" && <PowerKPreferencesTimezonesMenu onSelect={handleSelection} />}
+      {activePage === "update-start-of-week" && <PowerKPreferencesStartOfWeekMenu onSelect={handleSelection} />}
+      {activePage === "update-language" && <PowerKPreferencesLanguagesMenu onSelect={handleSelection} />}
+    </>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/start-of-week-menu.tsx b/apps/web/core/components/power-k/ui/pages/preferences/start-of-week-menu.tsx
new file mode 100644
index 0000000..2d9c8b6
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/preferences/start-of-week-menu.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Command } from "cmdk";
+// plane imports
+import { START_OF_THE_WEEK_OPTIONS } from "@plane/constants";
+import type { EStartOfTheWeek } from "@plane/types";
+// local imports
+import { PowerKModalCommandItem } from "../../modal/command-item";
+
+type Props = {
+  onSelect: (day: EStartOfTheWeek) => void;
+};
+
+export function PowerKPreferencesStartOfWeekMenu(props: Props) {
+  const { onSelect } = props;
+
+  return (
+    <Command.Group>
+      {START_OF_THE_WEEK_OPTIONS.map((day) => (
+        <PowerKModalCommandItem key={day.value} onSelect={() => onSelect(day.value)} label={day.label} />
+      ))}
+    </Command.Group>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/themes-menu.tsx b/apps/web/core/components/power-k/ui/pages/preferences/themes-menu.tsx
new file mode 100644
index 0000000..6018fe2
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/preferences/themes-menu.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState } from "react";
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+// plane imports
+import { THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// local imports
+import { PowerKModalCommandItem } from "../../modal/command-item";
+
+type Props = {
+  onSelect: (theme: string) => void;
+};
+
+export const PowerKPreferencesThemesMenu = observer(function PowerKPreferencesThemesMenu(props: Props) {
+  const { onSelect } = props;
+  // hooks
+  const { t } = useTranslation();
+  // states
+  const [mounted, setMounted] = useState(false);
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <Command.Group>
+      {THEME_OPTIONS.map((theme) => (
+        <PowerKModalCommandItem key={theme.value} onSelect={() => onSelect(theme.value)} label={t(theme.i18n_label)} />
+      ))}
+    </Command.Group>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/preferences/timezone-menu.tsx b/apps/web/core/components/power-k/ui/pages/preferences/timezone-menu.tsx
new file mode 100644
index 0000000..3d309bd
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/preferences/timezone-menu.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+// hooks
+import useTimezone from "@/hooks/use-timezone";
+// local imports
+import { PowerKModalCommandItem } from "../../modal/command-item";
+
+type Props = {
+  onSelect: (timezone: string) => void;
+};
+
+export const PowerKPreferencesTimezonesMenu = observer(function PowerKPreferencesTimezonesMenu(props: Props) {
+  const { onSelect } = props;
+  // timezones
+  const { timezones } = useTimezone();
+
+  return (
+    <Command.Group>
+      {timezones.map((timezone) => (
+        <PowerKModalCommandItem
+          key={timezone.value}
+          onSelect={() => onSelect(timezone.value)}
+          label={timezone.content}
+        />
+      ))}
+    </Command.Group>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/root.tsx b/apps/web/core/components/power-k/ui/pages/root.tsx
new file mode 100644
index 0000000..21524be
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/root.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// local imports
+import type { TPowerKCommandConfig, TPowerKContext, TPowerKPageType } from "../../core/types";
+import { PowerKModalDefaultPage } from "./default";
+import { PowerKOpenEntityPages } from "./open-entity/root";
+import { PowerKAccountPreferencesPages } from "./preferences";
+
+type Props = {
+  activePage: TPowerKPageType | null;
+  context: TPowerKContext;
+  onCommandSelect: (command: TPowerKCommandConfig) => void;
+  onPageDataSelect: (value: unknown) => void;
+};
+
+export const PowerKModalPagesList = observer(function PowerKModalPagesList(props: Props) {
+  const { activePage, context, onCommandSelect, onPageDataSelect } = props;
+
+  // Main page content (no specific page)
+  if (!activePage) {
+    return <PowerKModalDefaultPage context={context} onCommandSelect={onCommandSelect} />;
+  }
+
+  return (
+    <>
+      <PowerKOpenEntityPages activePage={activePage} context={context} handleSelection={onPageDataSelect} />
+      <PowerKAccountPreferencesPages activePage={activePage} handleSelection={onPageDataSelect} />
+    </>
+  );
+});
diff --git a/apps/web/core/components/power-k/ui/pages/work-item-selection-page.tsx b/apps/web/core/components/power-k/ui/pages/work-item-selection-page.tsx
new file mode 100644
index 0000000..4cfe000
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/pages/work-item-selection-page.tsx
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+// plane imports
+// import { useTranslation } from "@plane/i18n";
+import type { TIssueEntityData, TIssueSearchResponse, TActivityEntityData } from "@plane/types";
+// import { generateWorkItemLink } from "@plane/utils";
+// components
+// import { CommandPaletteEntityList } from "@/components/command-palette";
+// import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+// hooks
+// import { useCommandPalette } from "@/hooks/store/use-command-palette";
+// import { usePowerK } from "@/hooks/store/use-power-k";
+// import { useAppRouter } from "@/hooks/use-app-router";
+// plane web imports
+// import { IssueIdentifier } from "@/plane-web/components/issues/issue-details/issue-identifier";
+import { WorkspaceService } from "@/services/workspace.service";
+
+const workspaceService = new WorkspaceService();
+
+type Props = {
+  workspaceSlug: string | undefined;
+  projectId: string | undefined;
+  searchTerm: string;
+  debouncedSearchTerm: string;
+  isLoading: boolean;
+  isSearching: boolean;
+  resolvedPath: string;
+  isWorkspaceLevel?: boolean;
+};
+
+export function WorkItemSelectionPage(props: Props) {
+  const { workspaceSlug, projectId, debouncedSearchTerm, isWorkspaceLevel = false } = props;
+  // router
+  // const router = useAppRouter();
+  // plane hooks
+  // const { t } = useTranslation();
+  // store hooks
+  // const { togglePowerKModal } = usePowerK();
+  // states
+  const [_recentIssues, setRecentIssues] = useState<TIssueEntityData[]>([]);
+  const [_issueResults, setIssueResults] = useState<TIssueSearchResponse[]>([]);
+
+  // Load recent issues when component mounts
+  useEffect(() => {
+    if (!workspaceSlug) return;
+
+    workspaceService
+      .fetchWorkspaceRecents(workspaceSlug.toString(), "issue")
+      .then((res) =>
+        setRecentIssues(res.map((r: TActivityEntityData) => r.entity_data as TIssueEntityData).slice(0, 10))
+      )
+      .catch(() => setRecentIssues([]));
+  }, [workspaceSlug]);
+
+  // Search issues based on search term
+  useEffect(() => {
+    if (!workspaceSlug || !debouncedSearchTerm) {
+      setIssueResults([]);
+      return;
+    }
+
+    workspaceService
+      .searchEntity(workspaceSlug.toString(), {
+        count: 10,
+        query: debouncedSearchTerm,
+        query_type: ["issue"],
+        ...(!isWorkspaceLevel && projectId ? { project_id: projectId.toString() } : {}),
+      })
+      // oxlint-disable-next-line promise/always-return
+      .then((res) => {
+        setIssueResults(res.issue || []);
+      })
+      .catch(() => setIssueResults([]));
+  }, [debouncedSearchTerm, workspaceSlug, projectId, isWorkspaceLevel]);
+
+  if (!workspaceSlug) return null;
+
+  return (
+    <>
+      {/* {searchTerm === "" ? (
+        recentIssues.length > 0 ? (
+          <CommandPaletteEntityList
+            heading="Issues"
+            items={recentIssues}
+            getKey={(issue) => issue.id}
+            getLabel={(issue) => `${issue.project_identifier}-${issue.sequence_id} ${issue.name}`}
+            renderItem={(issue) => (
+              <div className="flex items-center gap-2">
+                {issue.project_id && (
+                  <IssueIdentifier
+                    projectId={issue.project_id}
+                    projectIdentifier={issue.project_identifier}
+                    issueSequenceId={issue.sequence_id}
+                    textContainerClassName="text-13 text-secondary"
+                  />
+                )}
+                <span className="truncate">{issue.name}</span>
+              </div>
+            )}
+            onSelect={(issue) => {
+              if (!issue.project_id) return;
+              togglePowerKModal(false);
+              router.push(
+                generateWorkItemLink({
+                  workspaceSlug: workspaceSlug.toString(),
+                  projectId: issue.project_id,
+                  issueId: issue.id,
+                  projectIdentifier: issue.project_identifier,
+                  sequenceId: issue.sequence_id,
+                  isEpic: issue.is_epic,
+                })
+              );
+            }}
+            emptyText="Search for issue id or issue title"
+          />
+        ) : (
+          <div className="px-3 py-8 text-center text-13 text-tertiary">Search for issue id or issue title</div>
+        )
+      ) : issueResults.length > 0 ? (
+        <CommandPaletteEntityList
+          heading="Issues"
+          items={issueResults}
+          getKey={(issue) => issue.id}
+          getLabel={(issue) => `${issue.project__identifier}-${issue.sequence_id} ${issue.name}`}
+          renderItem={(issue) => (
+            <div className="flex items-center gap-2">
+              {issue.project_id && issue.project__identifier && issue.sequence_id && (
+                <IssueIdentifier
+                  projectId={issue.project_id}
+                  projectIdentifier={issue.project__identifier}
+                  issueSequenceId={issue.sequence_id}
+                  textContainerClassName="text-13 text-secondary"
+                />
+              )}
+              <span className="truncate">{issue.name}</span>
+            </div>
+          )}
+          onSelect={(issue) => {
+            if (!issue.project_id) return;
+            togglePowerKModal(false);
+            router.push(
+              generateWorkItemLink({
+                workspaceSlug: workspaceSlug.toString(),
+                projectId: issue.project_id,
+                issueId: issue.id,
+                projectIdentifier: issue.project__identifier,
+                sequenceId: issue.sequence_id,
+              })
+            );
+          }}
+          emptyText={t("command_k.empty_state.search.title") as string}
+        />
+      ) : (
+        !isLoading &&
+        !isSearching && (
+          <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
+            <SimpleEmptyState title={t("command_k.empty_state.search.title")} assetPath={resolvedPath} />
+          </div>
+        )
+      )} */}
+    </>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/renderer/command.tsx b/apps/web/core/components/power-k/ui/renderer/command.tsx
new file mode 100644
index 0000000..408a454
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/renderer/command.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Command } from "cmdk";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// local imports
+import type { TPowerKCommandConfig, TPowerKCommandGroup, TPowerKContext } from "../../core/types";
+import { PowerKModalCommandItem } from "../modal/command-item";
+import { CONTEXT_ENTITY_MAP } from "../pages/context-based";
+import { POWER_K_GROUP_PRIORITY, POWER_K_GROUP_I18N_TITLES } from "./shared";
+
+type Props = {
+  commands: TPowerKCommandConfig[];
+  context: TPowerKContext;
+  onCommandSelect: (command: TPowerKCommandConfig) => void;
+};
+
+export function CommandRenderer(props: Props) {
+  const { commands, context, onCommandSelect } = props;
+  // derived values
+  const { activeContext } = context;
+  // translation
+  const { t } = useTranslation();
+
+  const commandsByGroup = commands.reduce(
+    (acc, command) => {
+      const group = command.group || "general";
+      if (!acc[group]) acc[group] = [];
+      acc[group].push(command);
+      return acc;
+    },
+    {} as Record<TPowerKCommandGroup, TPowerKCommandConfig[]>
+  );
+
+  const sortedGroups = Object.keys(commandsByGroup).sort((a, b) => {
+    const aPriority = POWER_K_GROUP_PRIORITY[a as TPowerKCommandGroup];
+    const bPriority = POWER_K_GROUP_PRIORITY[b as TPowerKCommandGroup];
+    return aPriority - bPriority;
+  }) as TPowerKCommandGroup[];
+
+  return (
+    <>
+      {sortedGroups.map((groupKey) => {
+        const groupCommands = commandsByGroup[groupKey];
+        if (!groupCommands || groupCommands.length === 0) return null;
+
+        const title =
+          groupKey === "contextual" && activeContext
+            ? t(CONTEXT_ENTITY_MAP[activeContext].i18n_title)
+            : t(POWER_K_GROUP_I18N_TITLES[groupKey]);
+
+        return (
+          <Command.Group key={groupKey} heading={title}>
+            {groupCommands.map((command) => (
+              <PowerKModalCommandItem
+                key={command.id}
+                icon={command.icon}
+                iconNode={command.iconNode}
+                label={t(command.i18n_title)}
+                keySequence={command.keySequence}
+                shortcut={command.shortcut || command.modifierShortcut}
+                onSelect={() => onCommandSelect(command)}
+              />
+            ))}
+          </Command.Group>
+        );
+      })}
+    </>
+  );
+}
diff --git a/apps/web/core/components/power-k/ui/renderer/shared.ts b/apps/web/core/components/power-k/ui/renderer/shared.ts
new file mode 100644
index 0000000..bf65ab8
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/renderer/shared.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TPowerKCommandGroup } from "../../core/types";
+
+export const POWER_K_GROUP_PRIORITY: Record<TPowerKCommandGroup, number> = {
+  contextual: 1,
+  create: 2,
+  navigation: 3,
+  general: 7,
+  settings: 8,
+  account: 9,
+  miscellaneous: 10,
+  preferences: 11,
+  help: 12,
+};
+
+export const POWER_K_GROUP_I18N_TITLES: Record<TPowerKCommandGroup, string> = {
+  contextual: "power_k.group_titles.contextual",
+  navigation: "power_k.group_titles.navigation",
+  create: "power_k.group_titles.create",
+  general: "power_k.group_titles.general",
+  settings: "power_k.group_titles.settings",
+  help: "power_k.group_titles.help",
+  account: "power_k.group_titles.account",
+  miscellaneous: "power_k.group_titles.miscellaneous",
+  preferences: "power_k.group_titles.preferences",
+};
diff --git a/apps/web/core/components/power-k/ui/renderer/shortcut.tsx b/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
new file mode 100644
index 0000000..9f4d509
--- /dev/null
+++ b/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { substringMatch } from "@plane/utils";
+// components
+import type { TPowerKCommandConfig, TPowerKCommandGroup } from "@/components/power-k/core/types";
+import { KeySequenceBadge, ShortcutBadge } from "@/components/power-k/ui/modal/command-item-shortcut-badge";
+// types
+import { CONTEXT_ENTITY_MAP } from "@/components/power-k/ui/pages/context-based";
+// local imports
+import { POWER_K_GROUP_I18N_TITLES, POWER_K_GROUP_PRIORITY } from "./shared";
+
+type Props = {
+  searchQuery: string;
+  commands: TPowerKCommandConfig[];
+};
+
+export function ShortcutRenderer(props: Props) {
+  const { searchQuery, commands } = props;
+  // translation
+  const { t } = useTranslation();
+
+  // Apply search filter
+  const filteredCommands = commands.filter((command) => substringMatch(t(command.i18n_title), searchQuery));
+
+  // Group commands - separate contextual by context type, others by group
+  type GroupedCommands = {
+    key: string;
+    title: string;
+    priority: number;
+    commands: TPowerKCommandConfig[];
+  };
+
+  const groupedCommands: GroupedCommands[] = [];
+
+  filteredCommands.forEach((command) => {
+    if (command.group === "contextual") {
+      // For contextual commands, group by context type
+      const contextKey = `contextual-${command.contextType}`;
+      let group = groupedCommands.find((g) => g.key === contextKey);
+
+      if (!group) {
+        group = {
+          key: contextKey,
+          title: t(CONTEXT_ENTITY_MAP[command.contextType].i18n_title),
+          priority: POWER_K_GROUP_PRIORITY.contextual,
+          commands: [],
+        };
+        groupedCommands.push(group);
+      }
+      group.commands.push(command);
+    } else {
+      // For other commands, group by command group
+      const groupKey = command.group || "general";
+      let group = groupedCommands.find((g) => g.key === groupKey);
+
+      if (!group) {
+        group = {
+          key: groupKey,
+          title: t(POWER_K_GROUP_I18N_TITLES[groupKey as TPowerKCommandGroup]),
+          priority: POWER_K_GROUP_PRIORITY[groupKey as TPowerKCommandGroup],
+          commands: [],
+        };
+        groupedCommands.push(group);
+      }
+      group.commands.push(command);
+    }
+  });
+
+  // Sort groups by priority
+  groupedCommands.sort((a, b) => a.priority - b.priority);
+
+  const isShortcutsEmpty = groupedCommands.length === 0;
+
+  return (
+    <div className="flex flex-col gap-y-3">
+      {!isShortcutsEmpty ? (
+        groupedCommands.map((group) => (
+          <div key={group.key}>
+            <h5 className="pt-1 pb-2 text-left text-13 font-medium">{group.title}</h5>
+            <div className="space-y-3 px-1">
+              {group.commands.map((command) => (
+                <div key={command.id} className="mt-1">
+                  <div className="flex items-center justify-between">
+                    <h4 className="text-left text-11 text-secondary">{t(command.i18n_title)}</h4>
+                    <div className="flex items-center gap-x-1.5">
+                      {command.keySequence && <KeySequenceBadge sequence={command.keySequence} />}
+                      {(command.shortcut || command.modifierShortcut) && (
+                        <ShortcutBadge shortcut={command.shortcut || command.modifierShortcut} />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))
+      ) : (
+        <p className="flex justify-center text-center text-13 text-secondary">
+          No shortcuts found for{" "}
+          <span className="font-semibold italic">
+            {`"`}
+            {searchQuery}
+            {`"`}
+          </span>
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/power-k/utils/navigation.ts b/apps/web/core/components/power-k/utils/navigation.ts
new file mode 100644
index 0000000..f5b3323
--- /dev/null
+++ b/apps/web/core/components/power-k/utils/navigation.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { joinUrlPath } from "@plane/utils";
+// local imports
+import type { TPowerKContext } from "../core/types";
+
+export const handlePowerKNavigate = (context: TPowerKContext, routerSegments: (string | undefined)[]) => {
+  const validRouterSegments = routerSegments.filter((segment) => segment !== undefined);
+
+  if (validRouterSegments.length === 0) {
+    console.warn("No valid router segments provided", routerSegments);
+    return;
+  }
+
+  if (validRouterSegments.length !== routerSegments.length) {
+    console.warn("Some of the router segments are undefined", routerSegments);
+  }
+
+  const route = joinUrlPath(...validRouterSegments);
+  context.router.push(route);
+};
diff --git a/apps/web/core/components/profile/activity/activity-list.tsx b/apps/web/core/components/profile/activity/activity-list.tsx
new file mode 100644
index 0000000..dbdb43a
--- /dev/null
+++ b/apps/web/core/components/profile/activity/activity-list.tsx
@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { ChatOutline, HistoryOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { IUserActivityResponse } from "@plane/types";
+import { calculateTimeAgo, getFileURL } from "@plane/utils";
+// components
+import { ActivityIcon, ActivityMessage, IssueLink } from "@/components/core/activity";
+import { RichTextEditor } from "@/components/editor/rich-text";
+import { ActivitySettingsLoader } from "@/components/ui/loader/settings/activity";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  activity: IUserActivityResponse | undefined;
+};
+
+export const ActivityList = observer(function ActivityList(props: Props) {
+  const { activity } = props;
+  // params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { getWorkspaceBySlug } = useWorkspace();
+  // derived values
+  const workspaceId = getWorkspaceBySlug(workspaceSlug?.toString() ?? "")?.id ?? "";
+
+  // TODO: refactor this component
+  return (
+    <>
+      {activity ? (
+        <ul role="list">
+          {activity.results.map((activityItem) => {
+            if (activityItem.field === "comment")
+              return (
+                <div key={activityItem.id} className="mt-2">
+                  <div className="relative flex items-start space-x-3">
+                    <div className="relative px-1">
+                      {activityItem.field ? (
+                        activityItem.new_value === "restore" && (
+                          <HistoryOutline className="h-3.5 w-3.5 text-secondary" />
+                        )
+                      ) : activityItem.actor_detail.avatar_url && activityItem.actor_detail.avatar_url !== "" ? (
+                        <img
+                          src={getFileURL(activityItem.actor_detail.avatar_url)}
+                          alt={activityItem.actor_detail.display_name}
+                          height={30}
+                          width={30}
+                          className="bg-gray-500 grid h-7 w-7 place-items-center rounded-full border-2 border-white text-on-color"
+                        />
+                      ) : (
+                        <div className="bg-gray-500 grid h-7 w-7 place-items-center rounded-full border-2 border-white text-on-color capitalize">
+                          {activityItem.actor_detail.display_name?.[0]}
+                        </div>
+                      )}
+
+                      <span className="flex h-6 w-6 items-center justify-center rounded-full bg-layer-1 text-secondary ring-6 ring-white">
+                        <ChatOutline className="h-6 w-6 !text-20 text-secondary" aria-hidden="true" />
+                      </span>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div>
+                        <div className="text-11">
+                          {activityItem.actor_detail.is_bot
+                            ? activityItem.actor_detail.first_name + " Bot"
+                            : activityItem.actor_detail.display_name}
+                        </div>
+                        <p className="mt-0.5 text-11 text-secondary">
+                          Commented {calculateTimeAgo(activityItem.created_at)}
+                        </p>
+                      </div>
+                      <div className="issue-comments-section p-0">
+                        <RichTextEditor
+                          editable={false}
+                          id={activityItem.id}
+                          initialValue={
+                            activityItem?.new_value !== ""
+                              ? (activityItem.new_value?.toString() as string)
+                              : (activityItem.old_value?.toString() as string)
+                          }
+                          containerClassName="text-11 bg-surface-1"
+                          workspaceId={workspaceId}
+                          workspaceSlug={workspaceSlug?.toString() ?? ""}
+                          projectId={activityItem.project}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+
+            const message =
+              activityItem.verb === "created" &&
+              !["cycles", "modules", "attachment", "link", "estimate"].includes(
+                activityItem.field?.toString() as string
+              ) &&
+              !activityItem.field ? (
+                <span>
+                  created <IssueLink activity={activityItem} />
+                </span>
+              ) : (
+                <ActivityMessage activity={activityItem} showIssue />
+              );
+
+            if ("field" in activityItem && activityItem.field !== "updated_by")
+              return (
+                <li key={activityItem.id}>
+                  <div className="relative pb-1">
+                    <div className="relative flex items-start space-x-2">
+                      <>
+                        <div>
+                          <div className="relative mt-4 px-1.5">
+                            <div className="mt-1.5">
+                              <div className="flex h-6 w-6 items-center justify-center">
+                                {activityItem.field ? (
+                                  activityItem.new_value === "restore" ? (
+                                    <HistoryOutline className="h-5 w-5 text-secondary" />
+                                  ) : (
+                                    <ActivityIcon activity={activityItem} />
+                                  )
+                                ) : activityItem.actor_detail.avatar_url &&
+                                  activityItem.actor_detail.avatar_url !== "" ? (
+                                  <img
+                                    src={getFileURL(activityItem.actor_detail.avatar_url)}
+                                    alt={activityItem.actor_detail.display_name}
+                                    height={24}
+                                    width={24}
+                                    className="h-full w-full rounded-full object-cover"
+                                  />
+                                ) : (
+                                  <div className="bg-gray-700 grid h-6 w-6 place-items-center rounded-full border-2 border-white text-11 text-on-color capitalize">
+                                    {activityItem.actor_detail.display_name?.[0]}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div className="min-w-0 flex-1 border-b border-subtle py-4">
+                          <div className="text-13 break-words text-secondary">
+                            {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
+                              <span className="text-gray font-medium">Plane</span>
+                            ) : activityItem.actor_detail.is_bot ? (
+                              <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
+                            ) : (
+                              <Link
+                                href={`/${activityItem.workspace_detail?.slug}/profile/${activityItem.actor_detail.id}`}
+                                className="inline"
+                              >
+                                <span className="text-gray font-medium">
+                                  {currentUser?.id === activityItem.actor_detail.id
+                                    ? "You"
+                                    : activityItem.actor_detail.display_name}
+                                </span>
+                              </Link>
+                            )}{" "}
+                            <div className="inline gap-1">
+                              {message}{" "}
+                              <span className="flex-shrink-0 whitespace-nowrap">
+                                {calculateTimeAgo(activityItem.created_at)}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </>
+                    </div>
+                  </div>
+                </li>
+              );
+          })}
+        </ul>
+      ) : (
+        <ActivitySettingsLoader />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/profile/activity/download-button.tsx b/apps/web/core/components/profile/activity/download-button.tsx
new file mode 100644
index 0000000..d162dbd
--- /dev/null
+++ b/apps/web/core/components/profile/activity/download-button.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { useParams } from "next/navigation";
+// services
+// ui
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+// helpers
+import { renderFormattedPayloadDate } from "@plane/utils";
+import { UserService } from "@/services/user.service";
+
+const userService = new UserService();
+
+export function DownloadActivityButton() {
+  // states
+  const [isDownloading, setIsDownloading] = useState(false);
+  // router
+  const { workspaceSlug, userId } = useParams();
+  //hooks
+  const { t } = useTranslation();
+
+  const handleDownload = async () => {
+    const today = renderFormattedPayloadDate(new Date());
+
+    if (!workspaceSlug || !userId || !today) return;
+
+    setIsDownloading(true);
+
+    const csv = await userService
+      .downloadProfileActivity(workspaceSlug.toString(), userId.toString(), {
+        date: today,
+      })
+      .finally(() => setIsDownloading(false));
+
+    // create a Blob object
+    const blob = new Blob([csv], { type: "text/csv" });
+
+    // create URL for the Blob object
+    const url = window.URL.createObjectURL(blob);
+
+    // create a link element
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `profile-activity-${Date.now()}.csv`;
+    document.body.appendChild(a);
+
+    // simulate click on the link element to trigger download
+    a.click();
+
+    // cleanup
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  };
+
+  return (
+    <Button onClick={handleDownload} loading={isDownloading}>
+      {isDownloading ? t("profile.stats.recent_activity.button_loading") : t("profile.stats.recent_activity.button")}
+    </Button>
+  );
+}
diff --git a/apps/web/core/components/profile/activity/workspace-activity-list.tsx b/apps/web/core/components/profile/activity/workspace-activity-list.tsx
new file mode 100644
index 0000000..fb90b35
--- /dev/null
+++ b/apps/web/core/components/profile/activity/workspace-activity-list.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// services
+import { USER_PROFILE_ACTIVITY } from "@plane/constants";
+import { UserService } from "@/services/user.service";
+// components
+import { ActivityList } from "./activity-list";
+// fetch-keys
+
+// services
+const userService = new UserService();
+
+type Props = {
+  cursor: string;
+  perPage: number;
+  updateResultsCount: (count: number) => void;
+  updateTotalPages: (count: number) => void;
+};
+
+export function WorkspaceActivityListPage(props: Props) {
+  const { cursor, perPage, updateResultsCount, updateTotalPages } = props;
+  // router
+  const { workspaceSlug, userId } = useParams();
+
+  const { data: userProfileActivity } = useSWR(
+    workspaceSlug && userId
+      ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString(), {
+          cursor,
+        })
+      : null,
+    workspaceSlug && userId
+      ? () =>
+          userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString(), {
+            cursor,
+            per_page: perPage,
+          })
+      : null
+  );
+
+  useEffect(() => {
+    if (!userProfileActivity) return;
+
+    updateTotalPages(userProfileActivity.total_pages);
+    updateResultsCount(userProfileActivity.results.length);
+  }, [updateResultsCount, updateTotalPages, userProfileActivity]);
+
+  return <ActivityList activity={userProfileActivity} />;
+}
diff --git a/apps/web/core/components/profile/overview/activity.tsx b/apps/web/core/components/profile/overview/activity.tsx
new file mode 100644
index 0000000..9535041
--- /dev/null
+++ b/apps/web/core/components/profile/overview/activity.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// ui
+import { useTranslation } from "@plane/i18n";
+import { Avatar } from "@plane/propel/avatar";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { Loader, Card } from "@plane/ui";
+import { calculateTimeAgo, getFileURL } from "@plane/utils";
+// components
+import { ActivityMessage, IssueLink } from "@/components/core/activity";
+// constants
+import { USER_PROFILE_ACTIVITY } from "@plane/constants";
+// helpers
+// hooks
+import { useUser } from "@/hooks/store/user";
+// services
+import { UserService } from "@/services/user.service";
+
+const userService = new UserService();
+
+export const ProfileActivity = observer(function ProfileActivity() {
+  const { workspaceSlug, userId } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { t } = useTranslation();
+
+  const { data: userProfileActivity } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString(), {}) : null,
+    workspaceSlug && userId
+      ? () =>
+          userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString(), {
+            per_page: 10,
+          })
+      : null
+  );
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-16 font-medium">{t("profile.stats.recent_activity.title")}</h3>
+      <Card>
+        {!userProfileActivity ? (
+          <Loader className="space-y-5">
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+            <Loader.Item height="40px" />
+          </Loader>
+        ) : Array.isArray(userProfileActivity.results) && userProfileActivity.results.length > 0 ? (
+          <div className="space-y-5">
+            {userProfileActivity.results.map((activity) => (
+              <div key={activity.id} className="flex gap-3">
+                <Avatar
+                  name={activity.actor_detail?.display_name}
+                  src={getFileURL(activity.actor_detail?.avatar_url)}
+                  size="base"
+                  shape="square"
+                />
+                <div className="-mt-1 w-4/5 break-words">
+                  <p className="inline text-13 text-secondary">
+                    <span className="font-medium text-primary">
+                      {currentUser?.id === activity.actor_detail?.id ? "You" : activity.actor_detail?.display_name}{" "}
+                    </span>
+                    {activity.field ? (
+                      <ActivityMessage activity={activity} showIssue />
+                    ) : (
+                      <span>
+                        created <IssueLink activity={activity} />
+                      </span>
+                    )}
+                  </p>
+                  <p className="text-11 whitespace-nowrap text-secondary">{calculateTimeAgo(activity.created_at)}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <EmptyStateCompact title={t("no_data_yet")} assetKey="unknown" assetClassName="size-20" />
+        )}
+      </Card>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/profile/overview/priority-distribution.tsx b/apps/web/core/components/profile/overview/priority-distribution.tsx
new file mode 100644
index 0000000..1128e82
--- /dev/null
+++ b/apps/web/core/components/profile/overview/priority-distribution.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { BarChart } from "@plane/propel/charts/bar-chart";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import type { IUserProfileData } from "@plane/types";
+import { Loader, Card } from "@plane/ui";
+import { capitalizeFirstLetter } from "@plane/utils";
+
+type Props = {
+  userProfile: IUserProfileData | undefined;
+};
+
+const priorityColors = {
+  urgent: "#991b1b",
+  high: "#ef4444",
+  medium: "#f59e0b",
+  low: "#16a34a",
+  none: "#e5e5e5",
+};
+
+export function ProfilePriorityDistribution({ userProfile }: Props) {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col space-y-2">
+      <h3 className="text-16 font-medium">{t("profile.stats.priority_distribution.title")}</h3>
+      {userProfile ? (
+        <Card>
+          {userProfile.priority_distribution.length > 0 ? (
+            <BarChart
+              className="h-[300px] w-full"
+              margin={{ top: 20, right: 30, bottom: 5, left: 0 }}
+              data={userProfile.priority_distribution.map((priority) => ({
+                key: priority.priority ?? "None",
+                name: capitalizeFirstLetter(priority.priority ?? "None"),
+                count: priority.priority_count,
+              }))}
+              bars={[
+                {
+                  key: "count",
+                  label: "Count",
+                  stackId: "bar-one",
+                  fill: (payload: any) => priorityColors[payload.key as keyof typeof priorityColors], // TODO: fix types
+                  textClassName: "",
+                  showPercentage: false,
+                  showTopBorderRadius: () => true,
+                  showBottomBorderRadius: () => true,
+                },
+              ]}
+              xAxis={{
+                key: "name",
+                label: t("common.priority"),
+              }}
+              yAxis={{
+                key: "count",
+                label: "",
+              }}
+              barSize={20}
+            />
+          ) : (
+            <EmptyStateCompact
+              assetKey="priority"
+              assetClassName="size-20"
+              title={t("workspace_empty_state.your_work_by_priority.title")}
+            />
+          )}
+        </Card>
+      ) : (
+        <div className="grid place-items-center p-7">
+          <Loader className="flex items-end gap-12">
+            <Loader.Item width="30px" height="200px" />
+            <Loader.Item width="30px" height="150px" />
+            <Loader.Item width="30px" height="250px" />
+            <Loader.Item width="30px" height="150px" />
+            <Loader.Item width="30px" height="100px" />
+          </Loader>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/profile/overview/state-distribution.tsx b/apps/web/core/components/profile/overview/state-distribution.tsx
new file mode 100644
index 0000000..457e558
--- /dev/null
+++ b/apps/web/core/components/profile/overview/state-distribution.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { PieChart } from "@plane/propel/charts/pie-chart";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import type { IUserProfileData, IUserStateDistribution } from "@plane/types";
+import { Card } from "@plane/ui";
+import { capitalizeFirstLetter } from "@plane/utils";
+
+type Props = {
+  stateDistribution: IUserStateDistribution[];
+  userProfile: IUserProfileData | undefined;
+};
+
+export function ProfileStateDistribution({ stateDistribution, userProfile }: Props) {
+  const { t } = useTranslation();
+  if (!userProfile) return null;
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <h3 className="text-16 font-medium">{t("profile.stats.state_distribution.title")}</h3>
+      <Card className="h-full">
+        {userProfile.state_distribution.length > 0 ? (
+          <div className="grid h-[300px] w-full grid-cols-1 gap-x-6 md:grid-cols-2">
+            <PieChart
+              className="size-full"
+              dataKey="value"
+              margin={{
+                top: 0,
+                right: -10,
+                bottom: 12,
+                left: -10,
+              }}
+              data={
+                userProfile.state_distribution.map((group) => ({
+                  id: group.state_group,
+                  key: group.state_group,
+                  value: group.state_count,
+                  name: capitalizeFirstLetter(group.state_group),
+                  color: STATE_GROUPS[group.state_group]?.color,
+                })) ?? []
+              }
+              cells={userProfile.state_distribution.map((group) => ({
+                key: group.state_group,
+                fill: STATE_GROUPS[group.state_group]?.color,
+              }))}
+              showTooltip
+              tooltipLabel="Count"
+              paddingAngle={5}
+              cornerRadius={4}
+              innerRadius="50%"
+              showLabel={false}
+            />
+            <div className="flex items-center">
+              <div className="w-full space-y-4">
+                {stateDistribution.map((group) => (
+                  <div key={group.state_group} className="flex items-center justify-between gap-2 text-11">
+                    <div className="flex items-center gap-1.5">
+                      <div
+                        className="h-2.5 w-2.5 rounded-xs"
+                        style={{
+                          backgroundColor:
+                            STATE_GROUPS[group.state_group]?.color ?? "var(--background-color-accent-primary)",
+                        }}
+                      />
+                      <div className="whitespace-nowrap">{STATE_GROUPS[group.state_group].label}</div>
+                    </div>
+                    <div>{group.state_count}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : (
+          <EmptyStateCompact
+            assetKey="priority"
+            assetClassName="size-20"
+            title={t("workspace_empty_state.your_work_by_priority.title")}
+          />
+        )}
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/profile/overview/stats.tsx b/apps/web/core/components/profile/overview/stats.tsx
new file mode 100644
index 0000000..c4ac86e
--- /dev/null
+++ b/apps/web/core/components/profile/overview/stats.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+
+// ui
+import { useTranslation } from "@plane/i18n";
+import { LayerStackIcon } from "@plane/propel/icons";
+import { AddOutline, UserOutline } from "@makeplane/propel/icons";
+import type { IUserProfileData } from "@plane/types";
+import { Loader, Card, ECardSpacing, ECardDirection } from "@plane/ui";
+// types
+
+type Props = {
+  userProfile: IUserProfileData | undefined;
+};
+
+export function ProfileStats({ userProfile }: Props) {
+  const { workspaceSlug, userId } = useParams();
+
+  const { t } = useTranslation();
+
+  const overviewCards = [
+    {
+      icon: AddOutline,
+      route: "created",
+      i18n_title: "profile.stats.created",
+      value: userProfile?.created_issues ?? "...",
+    },
+    {
+      icon: UserOutline,
+      route: "assigned",
+      i18n_title: "profile.stats.assigned",
+      value: userProfile?.assigned_issues ?? "...",
+    },
+    {
+      icon: LayerStackIcon,
+      route: "subscribed",
+      i18n_title: "profile.stats.subscribed",
+      value: userProfile?.subscribed_issues ?? "...",
+    },
+  ];
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-16 font-medium">{t("profile.stats.overview")}</h3>
+      {userProfile ? (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {overviewCards.map((card) => (
+            <Link key={card.route} href={`/${workspaceSlug}/profile/${userId}/${card.route}`}>
+              <Card direction={ECardDirection.ROW} spacing={ECardSpacing.SM} className="h-full">
+                <div className="grid h-11 w-11 place-items-center rounded-sm bg-surface-2">
+                  <card.icon className="h-5 w-5" />
+                </div>
+                <div className="space-y-1">
+                  <p className="text-13 text-placeholder">{t(card.i18n_title)}</p>
+                  <p className="text-18 font-semibold">{card.value}</p>
+                </div>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <Loader className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <Loader.Item height="80px" />
+          <Loader.Item height="80px" />
+          <Loader.Item height="80px" />
+        </Loader>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/profile/overview/workload.tsx b/apps/web/core/components/profile/overview/workload.tsx
new file mode 100644
index 0000000..89112cc
--- /dev/null
+++ b/apps/web/core/components/profile/overview/workload.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
+// types
+import { useTranslation } from "@plane/i18n";
+import type { IUserStateDistribution } from "@plane/types";
+import { Card, ECardDirection, ECardSpacing } from "@plane/ui";
+// constants
+
+type Props = {
+  stateDistribution: IUserStateDistribution[];
+};
+
+export function ProfileWorkload({ stateDistribution }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-16 font-medium">{t("profile.stats.workload")}</h3>
+      <div className="grid grid-cols-1 justify-stretch gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+        {stateDistribution.map((group) => (
+          <div key={group.state_group}>
+            <a>
+              <Card direction={ECardDirection.ROW} spacing={ECardSpacing.SM}>
+                <div
+                  className="my-2 h-3 w-3 rounded-xs"
+                  style={{
+                    backgroundColor: STATE_GROUPS[group.state_group].color,
+                  }}
+                />
+                <div className="flex-col space-y-1">
+                  <span className="text-13 text-placeholder">
+                    {group.state_group === "unstarted"
+                      ? "Not started"
+                      : group.state_group === "started"
+                        ? "Working on"
+                        : STATE_GROUPS[group.state_group].label}
+                  </span>
+                  <p className="text-18 font-semibold">{group.state_count}</p>
+                </div>
+              </Card>
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/profile/profile-issues-filter.tsx b/apps/web/core/components/profile/profile-issues-filter.tsx
new file mode 100644
index 0000000..73a4066
--- /dev/null
+++ b/apps/web/core/components/profile/profile-issues-filter.tsx
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane constants
+import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, LayoutSelection } from "@/components/issues/issue-layouts/filters";
+import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+
+export const ProfileIssuesFilter = observer(function ProfileIssuesFilter() {
+  // i18n
+  const { t } = useTranslation();
+  // router
+  const { workspaceSlug, userId: routeUserId } = useParams();
+  const userId = routeUserId ? routeUserId.toString() : undefined;
+  // store hook
+  const {
+    issuesFilter: { issueFilters, updateFilters },
+  } = useIssues(EIssuesStoreType.PROFILE);
+  // derived values
+  const activeLayout = issueFilters?.displayFilters?.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: EIssueLayoutTypes) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(workspaceSlug.toString(), undefined, EIssueFilterType.DISPLAY_FILTERS, { layout: layout }, userId);
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  const handleDisplayFilters = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(
+        workspaceSlug.toString(),
+        undefined,
+        EIssueFilterType.DISPLAY_FILTERS,
+        updatedDisplayFilter,
+        userId
+      );
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  const handleDisplayProperties = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !userId) return;
+      updateFilters(workspaceSlug.toString(), undefined, EIssueFilterType.DISPLAY_PROPERTIES, property, userId);
+    },
+    [workspaceSlug, updateFilters, userId]
+  );
+
+  return (
+    <div className="relative flex items-center justify-end gap-2">
+      <LayoutSelection
+        layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN]}
+        onChange={(layout) => handleLayoutChange(layout)}
+        selectedLayout={activeLayout}
+      />
+      {userId && <WorkItemFiltersToggle entityType={EIssuesStoreType.PROFILE} entityId={userId} />}
+      <FiltersDropdown title={t("common.display")} placement="bottom-end">
+        <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>
+  );
+});
diff --git a/apps/web/core/components/profile/profile-issues.tsx b/apps/web/core/components/profile/profile-issues.tsx
new file mode 100644
index 0000000..4822a6e
--- /dev/null
+++ b/apps/web/core/components/profile/profile-issues.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssuesStoreType } from "@plane/types";
+// components
+import { ProfileIssuesKanBanLayout } from "@/components/issues/issue-layouts/kanban/roots/profile-issues-root";
+import { ProfileIssuesListLayout } from "@/components/issues/issue-layouts/list/roots/profile-issues-root";
+import { IssuePeekOverview } from "@/components/issues/peek-overview";
+import { WorkspaceLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/workspace-level";
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
+
+type Props = {
+  type: "assigned" | "subscribed" | "created";
+};
+
+export const ProfileIssuesPage = observer(function ProfileIssuesPage(props: Props) {
+  const { type } = props;
+  const { workspaceSlug, userId } = useParams();
+  // store hooks
+  const {
+    issues: { setViewId },
+    issuesFilter: { issueFilters, fetchFilters, updateFilterExpression },
+  } = useIssues(EIssuesStoreType.PROFILE);
+  // derived values
+  const activeLayout = issueFilters?.displayFilters?.layout || undefined;
+
+  useEffect(() => {
+    if (setViewId) setViewId(type);
+  }, [type, setViewId]);
+
+  useSWR(
+    workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}` : null,
+    async () => {
+      if (workspaceSlug && userId) {
+        await fetchFilters(workspaceSlug, userId);
+      }
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  return (
+    <IssuesStoreContext.Provider value={EIssuesStoreType.PROFILE}>
+      <WorkspaceLevelWorkItemFiltersHOC
+        entityId={userId}
+        entityType={EIssuesStoreType.PROFILE}
+        filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.profile_issues.filters}
+        initialWorkItemFilters={issueFilters}
+        updateFilters={updateFilterExpression.bind(updateFilterExpression, workspaceSlug, userId)}
+        workspaceSlug={workspaceSlug}
+      >
+        {({ filter: profileWorkItemsFilter }) => (
+          <>
+            <div className="flex h-full w-full flex-col">
+              {profileWorkItemsFilter && <WorkItemFiltersRow filter={profileWorkItemsFilter} />}
+              <div className="relative h-full w-full overflow-auto">
+                {activeLayout === "list" ? (
+                  <ProfileIssuesListLayout />
+                ) : activeLayout === "kanban" ? (
+                  <ProfileIssuesKanBanLayout />
+                ) : null}
+              </div>
+            </div>
+            {/* peek overview */}
+            <IssuePeekOverview />
+          </>
+        )}
+      </WorkspaceLevelWorkItemFiltersHOC>
+    </IssuesStoreContext.Provider>
+  );
+});
diff --git a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
new file mode 100644
index 0000000..b827ff4
--- /dev/null
+++ b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cn } from "@plane/utils";
+import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function ProfileSettingContentWrapper(props: Props) {
+  const { children, className = "" } = props;
+  return (
+    <div className="flex h-full flex-col">
+      <div className="block flex-shrink-0 border-b border-subtle p-4 md:hidden">
+        <SidebarHamburgerToggle />
+      </div>
+
+      <div
+        className={cn(
+          "vertical-scrollbar mx-auto scrollbar-md flex h-full w-full flex-col px-8 py-10 md:px-20 md:py-16 lg:px-36 xl:px-56",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
new file mode 100644
index 0000000..4bb2cbe
--- /dev/null
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -0,0 +1,296 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Disclosure, Transition } from "@headlessui/react";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { IconButton } from "@plane/propel/icon-button";
+import { ChevronDownOutline, EditOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IUserProfileProjectSegregation } from "@plane/types";
+import { Loader } from "@plane/ui";
+import { cn, renderFormattedDate, getFileURL } from "@plane/utils";
+// components
+import { CoverImage } from "@/components/common/cover-image";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// components
+import { ProfileSidebarTime } from "./time";
+
+type TProfileSidebar = {
+  userProjectsData: IUserProfileProjectSegregation | undefined;
+  className?: string;
+};
+
+export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSidebar) {
+  const { userProjectsData, className = "" } = props;
+  // refs
+  const ref = useRef<HTMLDivElement>(null);
+  // router
+  const { userId } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { profileSidebarCollapsed, toggleProfileSidebar } = useAppTheme();
+  const { getProjectById } = useProject();
+  const { toggleProfileSettingsModal } = useCommandPalette();
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+  // derived values
+  const userData = userProjectsData?.user_data;
+
+  useOutsideClickDetector(ref, () => {
+    if (profileSidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        toggleProfileSidebar();
+      }
+    }
+  });
+
+  const userDetails = [
+    {
+      i18n_label: "profile.details.joined_on",
+      value: renderFormattedDate(userData?.date_joined ?? ""),
+    },
+    {
+      i18n_label: "profile.details.time_zone",
+      value: <ProfileSidebarTime timeZone={userData?.user_timezone} />,
+    },
+  ];
+
+  useEffect(() => {
+    const handleToggleProfileSidebar = () => {
+      if (window && window.innerWidth < 768) {
+        toggleProfileSidebar(true);
+      }
+      if (window && profileSidebarCollapsed && window.innerWidth >= 768) {
+        toggleProfileSidebar(false);
+      }
+    };
+
+    window.addEventListener("resize", handleToggleProfileSidebar);
+    handleToggleProfileSidebar();
+    return () => window.removeEventListener("resize", handleToggleProfileSidebar);
+  }, []);
+
+  return (
+    <div
+      className={cn(
+        `vertical-scrollbar fixed z-5 scrollbar-md h-full w-full shrink-0 overflow-hidden overflow-y-auto border-l border-subtle bg-surface-1 shadow-raised-200 transition-all md:relative md:w-[300px]`,
+        className
+      )}
+      style={profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
+    >
+      {userProjectsData ? (
+        <>
+          <div className="relative h-[110px]">
+            {currentUser?.id === userId && (
+              <div className="absolute top-3.5 right-3.5">
+                <IconButton
+                  variant="secondary"
+                  icon={EditOutline}
+                  onClick={() =>
+                    toggleProfileSettingsModal({
+                      activeTab: "general",
+                      isOpen: true,
+                    })
+                  }
+                />
+              </div>
+            )}
+            <CoverImage
+              src={userData?.cover_image_url ?? undefined}
+              alt={userData?.display_name}
+              className="h-[110px] w-full"
+              showDefaultWhenEmpty
+            />
+            <div className="absolute -bottom-[26px] left-5 h-[52px] w-[52px] rounded-sm">
+              {userData?.avatar_url && userData?.avatar_url !== "" ? (
+                <img
+                  src={getFileURL(userData?.avatar_url)}
+                  alt={userData?.display_name}
+                  className="h-full w-full rounded-sm object-cover"
+                />
+              ) : (
+                <div className="flex h-[52px] w-[52px] items-center justify-center rounded-sm bg-accent-primary text-on-color capitalize">
+                  {userData?.first_name?.[0]}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="px-5">
+            <div className="mt-[38px]">
+              <h4 className="text-16 font-semibold">
+                {userData?.first_name} {userData?.last_name}
+              </h4>
+              <h6 className="text-13 text-secondary">({userData?.display_name})</h6>
+            </div>
+            <div className="mt-6 space-y-5">
+              {userDetails.map((detail) => (
+                <div key={detail.i18n_label} className="flex items-center gap-4 text-13">
+                  <div className="w-2/5 flex-shrink-0 text-secondary">{t(detail.i18n_label)}</div>
+                  <div className="w-3/5 font-medium break-words">{detail.value}</div>
+                </div>
+              ))}
+            </div>
+            <div className="mt-9 divide-y divide-subtle">
+              {userProjectsData.project_data.map((project, index) => {
+                const projectDetails = getProjectById(project.id);
+
+                const totalIssues =
+                  project.created_issues + project.assigned_issues + project.pending_issues + project.completed_issues;
+
+                const completedIssuePercentage =
+                  project.assigned_issues === 0
+                    ? 0
+                    : Math.round((project.completed_issues / project.assigned_issues) * 100);
+
+                if (!projectDetails) return null;
+
+                return (
+                  <Disclosure key={project.id} as="div" className={`${index === 0 ? "pb-3" : "py-3"}`}>
+                    {({ open }) => (
+                      <div className="w-full">
+                        <Disclosure.Button className="flex w-full items-center justify-between gap-2">
+                          <div className="flex w-3/4 items-center gap-2">
+                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center">
+                              <Logo logo={projectDetails.logo_props} />
+                            </span>
+                            <div className="truncate text-13 font-medium break-words">{projectDetails.name}</div>
+                          </div>
+                          <div className="flex flex-shrink-0 items-center gap-2">
+                            {project.assigned_issues > 0 && (
+                              <Tooltip label="Completion percentage" side="left" disabled={isMobile}>
+                                <div
+                                  className={`rounded-sm px-1 py-0.5 text-11 font-medium ${
+                                    completedIssuePercentage <= 35
+                                      ? "bg-danger-subtle text-danger-primary"
+                                      : completedIssuePercentage <= 70
+                                        ? "bg-yellow-500/10 text-yellow-500"
+                                        : "bg-success-subtle text-success-primary"
+                                  }`}
+                                >
+                                  {completedIssuePercentage}%
+                                </div>
+                              </Tooltip>
+                            )}
+                            <ChevronDownOutline className="h-4 w-4" />
+                          </div>
+                        </Disclosure.Button>
+                        <Transition
+                          as="div"
+                          show={open}
+                          enter="transition duration-100 ease-out"
+                          enterFrom="transform opacity-0"
+                          enterTo="transform opacity-100"
+                          leave="transition duration-75 ease-out"
+                          leaveFrom="transform opacity-100"
+                          leaveTo="transform opacity-0"
+                        >
+                          <Disclosure.Panel className="mt-5 pl-9">
+                            {totalIssues > 0 && (
+                              <div className="flex items-center gap-0.5">
+                                <div
+                                  className="h-1 rounded-sm"
+                                  style={{
+                                    backgroundColor: "#203b80",
+                                    width: `${(project.created_issues / totalIssues) * 100}%`,
+                                  }}
+                                />
+                                <div
+                                  className="h-1 rounded-sm"
+                                  style={{
+                                    backgroundColor: "#3f76ff",
+                                    width: `${(project.assigned_issues / totalIssues) * 100}%`,
+                                  }}
+                                />
+                                <div
+                                  className="h-1 rounded-sm"
+                                  style={{
+                                    backgroundColor: "#f59e0b",
+                                    width: `${(project.pending_issues / totalIssues) * 100}%`,
+                                  }}
+                                />
+                                <div
+                                  className="h-1 rounded-sm"
+                                  style={{
+                                    backgroundColor: "#16a34a",
+                                    width: `${(project.completed_issues / totalIssues) * 100}%`,
+                                  }}
+                                />
+                              </div>
+                            )}
+                            <div className="mt-7 space-y-5 text-13 text-secondary">
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <div className="h-2.5 w-2.5 rounded-xs bg-[#203b80]" />
+                                  Created
+                                </div>
+                                <div className="font-medium">
+                                  {project.created_issues} {t("issues")}
+                                </div>
+                              </div>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <div className="h-2.5 w-2.5 rounded-xs bg-[#3f76ff]" />
+                                  Assigned
+                                </div>
+                                <div className="font-medium">
+                                  {project.assigned_issues} {t("issues")}
+                                </div>
+                              </div>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <div className="h-2.5 w-2.5 rounded-xs bg-[#f59e0b]" />
+                                  Due
+                                </div>
+                                <div className="font-medium">
+                                  {project.pending_issues} {t("issues")}
+                                </div>
+                              </div>
+                              <div className="flex items-center justify-between gap-2">
+                                <div className="flex items-center gap-2">
+                                  <div className="h-2.5 w-2.5 rounded-xs bg-[#16a34a]" />
+                                  Completed
+                                </div>
+                                <div className="font-medium">
+                                  {project.completed_issues} {t("issues")}
+                                </div>
+                              </div>
+                            </div>
+                          </Disclosure.Panel>
+                        </Transition>
+                      </div>
+                    )}
+                  </Disclosure>
+                );
+              })}
+            </div>
+          </div>
+        </>
+      ) : (
+        <Loader className="space-y-7 px-5">
+          <Loader.Item height="130px" />
+          <div className="space-y-5">
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+            <Loader.Item height="20px" />
+          </div>
+        </Loader>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/profile/start-of-week-preference.tsx b/apps/web/core/components/profile/start-of-week-preference.tsx
new file mode 100644
index 0000000..93893b4
--- /dev/null
+++ b/apps/web/core/components/profile/start-of-week-preference.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { START_OF_THE_WEEK_OPTIONS } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { EStartOfTheWeek } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+// components
+import { SettingsControlItem } from "@/components/settings/control-item";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+
+const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
+  START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
+
+export const StartOfWeekPreference = observer(function StartOfWeekPreference(props: {
+  option: { title: string; description: string };
+}) {
+  // hooks
+  const { data: userProfile, updateUserProfile } = useUserProfile();
+
+  const handleStartOfWeekChange = async (val: number) => {
+    try {
+      await updateUserProfile({ start_of_the_week: val });
+      setToast({ type: TOAST_TYPE.SUCCESS, title: "Success", message: "First day of the week updated successfully" });
+    } catch (_error) {
+      setToast({ type: TOAST_TYPE.ERROR, title: "Update failed", message: "Please try again later." });
+    }
+  };
+
+  return (
+    <SettingsControlItem
+      title={props.option.title}
+      description={props.option.description}
+      control={
+        <CustomSelect
+          value={userProfile.start_of_the_week}
+          label={getStartOfWeekLabel(userProfile.start_of_the_week)}
+          onChange={handleStartOfWeekChange}
+          buttonClassName="border border-subtle-1"
+          input
+          maxHeight="lg"
+          placement="bottom-end"
+        >
+          <>
+            {START_OF_THE_WEEK_OPTIONS.map((day) => (
+              <CustomSelect.Option key={day.value} value={day.value}>
+                {day.label}
+              </CustomSelect.Option>
+            ))}
+          </>
+        </CustomSelect>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/profile/time.tsx b/apps/web/core/components/profile/time.tsx
new file mode 100644
index 0000000..5265e2b
--- /dev/null
+++ b/apps/web/core/components/profile/time.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// hooks
+import { useCurrentTime } from "@/hooks/use-current-time";
+
+type Props = {
+  timeZone: string | undefined;
+};
+
+export function ProfileSidebarTime(props: Props) {
+  const { timeZone } = props;
+  // current time hook
+  const { currentTime } = useCurrentTime();
+
+  // Create a date object for the current time in the specified timezone
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone: timeZone,
+    hour12: false, // Use 24-hour format
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+  const timeString = formatter.format(currentTime);
+
+  return (
+    <span>
+      {timeString} <span className="text-secondary">{timeZone}</span>
+    </span>
+  );
+}
diff --git a/apps/web/core/components/project-states/create-update/create.tsx b/apps/web/core/components/project-states/create-update/create.tsx
new file mode 100644
index 0000000..5945fc1
--- /dev/null
+++ b/apps/web/core/components/project-states/create-update/create.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { STATE_GROUPS } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+// components
+import { StateForm } from "@/components/project-states";
+
+type TStateCreate = {
+  groupKey: TStateGroups;
+  createStateCallback: TStateOperationsCallbacks["createState"];
+  handleClose: () => void;
+};
+
+export const StateCreate = observer(function StateCreate(props: TStateCreate) {
+  const { groupKey, createStateCallback, handleClose } = props;
+
+  // states
+  const [loader, setLoader] = useState(false);
+
+  const onCancel = () => {
+    setLoader(false);
+    handleClose();
+  };
+
+  const onSubmit = async (formData: Partial<IState>) => {
+    if (!groupKey) return { status: "error" };
+
+    try {
+      await createStateCallback({ ...formData, group: groupKey });
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "State created successfully.",
+      });
+      handleClose();
+      return { status: "success" };
+    } catch (error) {
+      const errorStatus = error as { status: number; data: { error: string } };
+      if (errorStatus?.status === 400) {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "State with that name already exists. Please try again with another name.",
+        });
+        return { status: "already_exists" };
+      } else {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: errorStatus.data.error ?? "State could not be created. Please try again.",
+        });
+        return { status: "error" };
+      }
+    }
+  };
+
+  return (
+    <StateForm
+      data={{ name: "", description: "", color: STATE_GROUPS[groupKey].color }}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      buttonDisabled={loader}
+      buttonTitle={loader ? `Creating` : `Create`}
+    />
+  );
+});
diff --git a/apps/web/core/components/project-states/create-update/form.tsx b/apps/web/core/components/project-states/create-update/form.tsx
new file mode 100644
index 0000000..4f4e6aa
--- /dev/null
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { TwitterPicker } from "react-color";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { Button } from "@plane/propel/button";
+import type { IState } from "@plane/types";
+import { Popover } from "@plane/ui";
+type TStateForm = {
+  data: Partial<IState>;
+  onSubmit: (formData: Partial<IState>) => Promise<{ status: string }>;
+  onCancel: () => void;
+  buttonDisabled: boolean;
+  buttonTitle: string;
+};
+
+function PopoverButton({ color }: { color?: string }) {
+  return (
+    <div
+      className="group inline-flex h-5 w-5 items-center rounded-sm text-14 font-medium transition-all focus:outline-none"
+      style={{
+        backgroundColor: color ?? "black",
+      }}
+    />
+  );
+}
+
+export function StateForm(props: TStateForm) {
+  const { data, onSubmit, onCancel, buttonDisabled, buttonTitle } = props;
+  // states
+  const [formData, setFromData] = useState<Partial<IState> | undefined>(undefined);
+  const [errors, setErrors] = useState<Partial<Record<keyof IState, string>> | undefined>(undefined);
+
+  useEffect(() => {
+    if (data && !formData) setFromData(data);
+  }, [data, formData]);
+
+  const handleFormData = <T extends keyof IState>(key: T, value: IState[T]) => {
+    setFromData((prev) => ({ ...prev, [key]: value }));
+    setErrors((prev) => ({ ...prev, [key]: "" }));
+  };
+
+  const formSubmit = async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    event.preventDefault();
+
+    const name = formData?.name || undefined;
+    if (!formData || !name) {
+      let currentErrors: Partial<Record<keyof IState, string>> = {};
+      if (!name) currentErrors = { ...currentErrors, name: "Name is required" };
+      setErrors(currentErrors);
+      return;
+    }
+
+    try {
+      await onSubmit(formData);
+    } catch (error) {
+      console.log("error", error);
+    }
+  };
+
+  return (
+    <div className="relative flex space-x-2 rounded-sm bg-surface-1 p-3">
+      {/* color */}
+      <div className="mt-2 h-full flex-shrink-0">
+        <Popover button={<PopoverButton color={formData?.color} />} panelClassName="mt-4 -ml-3">
+          <TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
+        </Popover>
+      </div>
+
+      <div className="w-full space-y-2">
+        {/* title */}
+        <Field name="name" invalid={(errors && Boolean(errors.name)) || false}>
+          <InputGroup size="2xl">
+            <Input
+              size="2xl"
+              id="name"
+              type="text"
+              name="name"
+              placeholder="Name"
+              value={formData?.name}
+              onChange={(e) => handleFormData("name", e.target.value)}
+              maxLength={100}
+              autoFocus
+            />
+          </InputGroup>
+        </Field>
+
+        {/* description */}
+        <Field name="description" invalid={(errors && Boolean(errors.description)) || false}>
+          <TextAreaGroup resize="none">
+            <TextArea
+              size="lg"
+              surface="field"
+              autoResize
+              maxRows={8}
+              id="description"
+              name="description"
+              placeholder="Describe this state for your members."
+              value={formData?.description ?? ""}
+              onChange={(e) => handleFormData("description", e.target.value)}
+            />
+          </TextAreaGroup>
+        </Field>
+
+        <div className="flex items-center space-x-2">
+          <Button onClick={formSubmit} variant="primary" size="lg" disabled={buttonDisabled}>
+            {buttonTitle}
+          </Button>
+          <Button type="button" variant="secondary" size="lg" disabled={buttonDisabled} onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/project-states/create-update/index.ts b/apps/web/core/components/project-states/create-update/index.ts
new file mode 100644
index 0000000..8afd9cc
--- /dev/null
+++ b/apps/web/core/components/project-states/create-update/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./create";
+export * from "./update";
+export * from "./form";
diff --git a/apps/web/core/components/project-states/create-update/update.tsx b/apps/web/core/components/project-states/create-update/update.tsx
new file mode 100644
index 0000000..f64fd11
--- /dev/null
+++ b/apps/web/core/components/project-states/create-update/update.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+// components
+import { StateForm } from "@/components/project-states";
+
+type TStateUpdate = {
+  state: IState;
+  updateStateCallback: TStateOperationsCallbacks["updateState"];
+  handleClose: () => void;
+};
+
+export const StateUpdate = observer(function StateUpdate(props: TStateUpdate) {
+  const { state, updateStateCallback, handleClose } = props;
+  // states
+  const [loader, setLoader] = useState(false);
+
+  const onCancel = () => {
+    setLoader(false);
+    handleClose();
+  };
+
+  const onSubmit = async (formData: Partial<IState>) => {
+    if (!state.id) return { status: "error" };
+
+    try {
+      await updateStateCallback(state.id, formData);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "State updated successfully.",
+      });
+      handleClose();
+      return { status: "success" };
+    } catch (error) {
+      const errorStatus = error as { status: number };
+      if (errorStatus?.status === 400) {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Another state exists with the same name. Please try again with another name.",
+        });
+        return { status: "already_exists" };
+      } else {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "State could not be updated. Please try again.",
+        });
+        return { status: "error" };
+      }
+    }
+  };
+
+  return (
+    <StateForm
+      data={state}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      buttonDisabled={loader}
+      buttonTitle={loader ? `Updating` : `Update`}
+    />
+  );
+});
diff --git a/apps/web/core/components/project-states/group-item.tsx b/apps/web/core/components/project-states/group-item.tsx
new file mode 100644
index 0000000..ca8bca3
--- /dev/null
+++ b/apps/web/core/components/project-states/group-item.tsx
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef } from "react";
+import { observer } from "mobx-react";
+
+// plane imports
+import { EIconSize } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { AddOutline, ChevronDownOutline } from "@makeplane/propel/icons";
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { StateList, StateCreate } from "@/components/project-states";
+
+type TGroupItem = {
+  groupKey: TStateGroups;
+  groupsExpanded: Partial<TStateGroups>[];
+  groupedStates: Record<string, IState[]>;
+  states: IState[];
+  stateOperationsCallbacks: TStateOperationsCallbacks;
+  isEditable: boolean;
+  groupItemClassName?: string;
+  stateItemClassName?: string;
+  handleGroupCollapse: (groupKey: TStateGroups) => void;
+  handleExpand: (groupKey: TStateGroups) => void;
+};
+
+export const GroupItem = observer(function GroupItem(props: TGroupItem) {
+  const {
+    groupKey,
+    groupedStates,
+    states,
+    groupsExpanded,
+    isEditable,
+    stateOperationsCallbacks,
+    groupItemClassName,
+    stateItemClassName,
+    handleExpand,
+    handleGroupCollapse,
+  } = props;
+  // refs
+  const dropElementRef = useRef<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // state
+  const [createState, setCreateState] = useState(false);
+  // derived values
+  const currentStateExpanded = groupsExpanded.includes(groupKey);
+  const shouldShowEmptyState = states.length === 0 && currentStateExpanded && !createState;
+
+  return (
+    <div
+      className={cn("space-y-1 rounded-sm border border-subtle bg-surface-2 p-2 transition-all", groupItemClassName)}
+      ref={dropElementRef}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <div
+          className="flex w-full cursor-pointer items-center py-1"
+          onClick={() => (!currentStateExpanded ? handleExpand(groupKey) : handleGroupCollapse(groupKey))}
+        >
+          <div
+            className={cn(
+              "flex h-5 w-5 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all",
+              {
+                "rotate-0": currentStateExpanded,
+                "-rotate-90": !currentStateExpanded,
+              }
+            )}
+          >
+            <ChevronDownOutline className="h-4 w-4" />
+          </div>
+          <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
+            <StateGroupIcon stateGroup={groupKey} size={EIconSize.XL} />
+          </div>
+          <div className="px-1 text-14 font-medium text-secondary capitalize">{groupKey}</div>
+        </div>
+        <button
+          type="button"
+          className={cn(
+            "flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm text-accent-primary/80 transition-colors hover:bg-layer-1 hover:text-accent-primary",
+            (!isEditable || createState) && "cursor-not-allowed text-placeholder hover:text-placeholder"
+          )}
+          onClick={() => {
+            if (!createState) {
+              handleExpand(groupKey);
+              setCreateState(true);
+            }
+          }}
+          disabled={!isEditable || createState}
+        >
+          <AddOutline className="h-4 w-4" />
+        </button>
+      </div>
+
+      {shouldShowEmptyState && (
+        <div className="flex h-full flex-col items-center justify-center py-4 text-13 text-tertiary">
+          <div>{t("project_settings.states.empty_state.title", { groupKey })}</div>
+          {isEditable && <div>{t("project_settings.states.empty_state.description")}</div>}
+        </div>
+      )}
+
+      {currentStateExpanded && (
+        <div id="group-droppable-container">
+          <StateList
+            groupKey={groupKey}
+            groupedStates={groupedStates}
+            states={states}
+            disabled={!isEditable}
+            stateOperationsCallbacks={stateOperationsCallbacks}
+            stateItemClassName={stateItemClassName}
+          />
+        </div>
+      )}
+
+      {isEditable && createState && (
+        <div className="">
+          <StateCreate
+            groupKey={groupKey}
+            handleClose={() => setCreateState(false)}
+            createStateCallback={stateOperationsCallbacks.createState}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/project-states/group-list.tsx b/apps/web/core/components/project-states/group-list.tsx
new file mode 100644
index 0000000..12bb1ca
--- /dev/null
+++ b/apps/web/core/components/project-states/group-list.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { GroupItem } from "@/components/project-states";
+
+type TGroupList = {
+  groupedStates: Record<string, IState[]>;
+  stateOperationsCallbacks: TStateOperationsCallbacks;
+  isEditable: boolean;
+  groupListClassName?: string;
+  groupItemClassName?: string;
+  stateItemClassName?: string;
+};
+
+export const GroupList = observer(function GroupList(props: TGroupList) {
+  const {
+    groupedStates,
+    stateOperationsCallbacks,
+    isEditable,
+    groupListClassName,
+    groupItemClassName,
+    stateItemClassName,
+  } = props;
+  // states
+  const [groupsExpanded, setGroupsExpanded] = useState<Partial<TStateGroups>[]>([
+    "backlog",
+    "unstarted",
+    "started",
+    "completed",
+    "cancelled",
+  ]);
+
+  const handleGroupCollapse = (groupKey: TStateGroups) => {
+    setGroupsExpanded((prev) => {
+      if (prev.includes(groupKey)) {
+        return prev.filter((key) => key !== groupKey);
+      }
+      return prev;
+    });
+  };
+
+  const handleExpand = (groupKey: TStateGroups) => {
+    setGroupsExpanded((prev) => {
+      if (prev.includes(groupKey)) {
+        return prev;
+      }
+      return [...prev, groupKey];
+    });
+  };
+  return (
+    <div className={cn("space-y-5", groupListClassName)}>
+      {Object.entries(groupedStates).map(([key, value]) => {
+        const groupKey = key as TStateGroups;
+        const groupStates = value;
+        return (
+          <GroupItem
+            key={groupKey}
+            groupKey={groupKey}
+            states={groupStates}
+            groupedStates={groupedStates}
+            groupsExpanded={groupsExpanded}
+            stateOperationsCallbacks={stateOperationsCallbacks}
+            isEditable={isEditable}
+            handleGroupCollapse={handleGroupCollapse}
+            handleExpand={handleExpand}
+            groupItemClassName={groupItemClassName}
+            stateItemClassName={stateItemClassName}
+          />
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/project-states/index.ts b/apps/web/core/components/project-states/index.ts
new file mode 100644
index 0000000..58dbbc4
--- /dev/null
+++ b/apps/web/core/components/project-states/index.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+
+export * from "./group-list";
+export * from "./group-item";
+
+export * from "./state-list";
+export * from "./state-item";
+export * from "./options";
+
+export * from "./loader";
+export * from "./create-update";
+export * from "./state-delete-modal";
+export * from "./state-item-title";
diff --git a/apps/web/core/components/project-states/loader.tsx b/apps/web/core/components/project-states/loader.tsx
new file mode 100644
index 0000000..876110c
--- /dev/null
+++ b/apps/web/core/components/project-states/loader.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Loader } from "@plane/ui";
+
+export function ProjectStateLoader() {
+  return (
+    <Loader className="space-y-5 md:w-2/3">
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/project-states/options/delete.tsx b/apps/web/core/components/project-states/options/delete.tsx
new file mode 100644
index 0000000..44747af
--- /dev/null
+++ b/apps/web/core/components/project-states/options/delete.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, LoadingOutline } from "@makeplane/propel/icons";
+// plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+import { AlertModalCore } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TStateDelete = {
+  totalStates: number;
+  state: IState;
+  deleteStateCallback: TStateOperationsCallbacks["deleteState"];
+};
+
+export const StateDelete = observer(function StateDelete(props: TStateDelete) {
+  const { totalStates, state, deleteStateCallback } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // states
+  const [isDeleteModal, setIsDeleteModal] = useState(false);
+  const [isDelete, setIsDelete] = useState(false);
+  // derived values
+  const isDeleteDisabled = state.default ? true : totalStates === 1 ? true : false;
+
+  const handleDeleteState = async () => {
+    if (isDeleteDisabled) return;
+
+    setIsDelete(true);
+
+    try {
+      await deleteStateCallback(state.id);
+      setIsDelete(false);
+    } catch (error) {
+      const errorStatus = error as { status: number; data: { error: string } };
+      if (errorStatus.status === 400) {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message:
+            "This state contains some work items within it, please move them to some other state to delete this state.",
+        });
+      } else {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "State could not be deleted. Please try again.",
+        });
+      }
+      setIsDelete(false);
+    }
+  };
+
+  return (
+    <>
+      <AlertModalCore
+        handleClose={() => setIsDeleteModal(false)}
+        handleSubmit={handleDeleteState}
+        isSubmitting={isDelete}
+        isOpen={isDeleteModal}
+        title="Delete State"
+        content={
+          <>
+            Are you sure you want to delete state- <span className="font-medium text-primary">{state?.name}</span>? All
+            of the data related to the state will be permanently removed. This action cannot be undone.
+          </>
+        }
+      />
+
+      <button
+        type="button"
+        className={cn(
+          "flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-colors focus:outline-none",
+          isDeleteDisabled ? "bg-surface-2 text-secondary" : "text-danger-primary hover:bg-layer-1"
+        )}
+        disabled={isDeleteDisabled}
+        onClick={() => setIsDeleteModal(true)}
+      >
+        <Tooltip
+          label={
+            state.default ? "Cannot delete the default state." : totalStates === 1 ? `Cannot have an empty group.` : ``
+          }
+          layout="stacked"
+          disabled={!isDeleteDisabled || isMobile}
+        >
+          {isDelete ? (
+            <LoadingOutline className="h-3.5 w-3.5 text-secondary" />
+          ) : (
+            <CloseOutline className="h-3.5 w-3.5" />
+          )}
+        </Tooltip>
+      </button>
+    </>
+  );
+});
diff --git a/apps/web/core/components/project-states/options/index.ts b/apps/web/core/components/project-states/options/index.ts
new file mode 100644
index 0000000..77e6d70
--- /dev/null
+++ b/apps/web/core/components/project-states/options/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./mark-as-default";
+export * from "./delete";
diff --git a/apps/web/core/components/project-states/options/mark-as-default.tsx b/apps/web/core/components/project-states/options/mark-as-default.tsx
new file mode 100644
index 0000000..de3e0b1
--- /dev/null
+++ b/apps/web/core/components/project-states/options/mark-as-default.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { TStateOperationsCallbacks } from "@plane/types";
+import { cn } from "@plane/utils";
+
+type TStateMarksAsDefault = {
+  stateId: string;
+  isDefault: boolean;
+  markStateAsDefaultCallback: TStateOperationsCallbacks["markStateAsDefault"];
+};
+
+export const StateMarksAsDefault = observer(function StateMarksAsDefault(props: TStateMarksAsDefault) {
+  const { stateId, isDefault, markStateAsDefaultCallback } = props;
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleMarkAsDefault = async () => {
+    if (!stateId || isDefault) return;
+    setIsLoading(true);
+
+    try {
+      setIsLoading(false);
+      await markStateAsDefaultCallback(stateId);
+      setIsLoading(false);
+    } catch {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <button
+      className={cn(
+        "text-11 whitespace-nowrap transition-colors",
+        isDefault ? "text-tertiary" : "text-secondary hover:text-primary"
+      )}
+      disabled={isDefault || isLoading}
+      onClick={handleMarkAsDefault}
+    >
+      {isLoading ? "Marking as default" : isDefault ? `Default` : `Mark as default`}
+    </button>
+  );
+});
diff --git a/apps/web/core/components/project-states/root.tsx b/apps/web/core/components/project-states/root.tsx
new file mode 100644
index 0000000..5bbb298
--- /dev/null
+++ b/apps/web/core/components/project-states/root.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { EUserPermissionsLevel } from "@plane/constants";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+import { ProjectStateLoader, GroupList } from "@/components/project-states";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useUserPermissions } from "@/hooks/store/user";
+
+type TProjectState = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectStateRoot = observer(function ProjectStateRoot(props: TProjectState) {
+  const { workspaceSlug, projectId } = props;
+  // hooks
+  const {
+    groupedProjectStates,
+    fetchProjectStates,
+    createState,
+    moveStatePosition,
+    updateState,
+    deleteState,
+    markStateAsDefault,
+  } = useProjectState();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const isEditable = allowPermissions(
+    [EUserProjectRoles.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+
+  // Fetching all project states
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // State operations callbacks
+  const stateOperationsCallbacks: TStateOperationsCallbacks = useMemo(
+    () => ({
+      createState: async (data: Partial<IState>) => createState(workspaceSlug, projectId, data),
+      updateState: async (stateId: string, data: Partial<IState>) =>
+        updateState(workspaceSlug, projectId, stateId, data),
+      deleteState: async (stateId: string) => deleteState(workspaceSlug, projectId, stateId),
+      moveStatePosition: async (stateId: string, data: Partial<IState>) =>
+        moveStatePosition(workspaceSlug, projectId, stateId, data),
+      markStateAsDefault: async (stateId: string) => markStateAsDefault(workspaceSlug, projectId, stateId),
+    }),
+    [workspaceSlug, projectId, createState, moveStatePosition, updateState, deleteState, markStateAsDefault]
+  );
+
+  // Loader
+  if (!groupedProjectStates) return <ProjectStateLoader />;
+
+  return (
+    <GroupList
+      groupedStates={groupedProjectStates}
+      stateOperationsCallbacks={stateOperationsCallbacks}
+      isEditable={isEditable}
+    />
+  );
+});
diff --git a/apps/web/core/components/project-states/state-delete-modal.tsx b/apps/web/core/components/project-states/state-delete-modal.tsx
new file mode 100644
index 0000000..c1b04d4
--- /dev/null
+++ b/apps/web/core/components/project-states/state-delete-modal.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// Plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IState } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+type TStateDeleteModal = {
+  isOpen: boolean;
+  onClose: () => void;
+  data: IState | null;
+};
+
+export const StateDeleteModal = observer(function StateDeleteModal(props: TStateDeleteModal) {
+  const { isOpen, onClose, data } = props;
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  const { deleteState } = useProjectState();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug || !data) return;
+
+    setIsDeleteLoading(true);
+
+    await deleteState(workspaceSlug.toString(), data.project_id, data.id)
+      .then(() => {
+        handleClose();
+      })
+      .catch((err) => {
+        if (err.status === 400)
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message:
+              "This state contains some work items within it, please move them to some other state to delete this state.",
+          });
+        else
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "State could not be deleted. Please try again.",
+          });
+      })
+      .finally(() => {
+        setIsDeleteLoading(false);
+      });
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isSubmitting={isDeleteLoading}
+      isOpen={isOpen}
+      title="Delete State"
+      content={
+        <>
+          Are you sure you want to delete state- <span className="font-medium text-primary">{data?.name}</span>? All of
+          the data related to the state will be permanently removed. This action cannot be undone.
+        </>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/project-states/state-item-title.tsx b/apps/web/core/components/project-states/state-item-title.tsx
new file mode 100644
index 0000000..da953ff
--- /dev/null
+++ b/apps/web/core/components/project-states/state-item-title.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { SetStateAction } from "react";
+import { observer } from "mobx-react";
+import { DragDropOutline, EditOutline } from "@makeplane/propel/icons";
+import { EIconSize } from "@plane/constants";
+// plane imports
+import { StateGroupIcon } from "@plane/propel/icons";
+import type { IState, TStateOperationsCallbacks } from "@plane/types";
+// local imports
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { StateDelete, StateMarksAsDefault } from "./options";
+
+type TBaseStateItemTitleProps = {
+  stateCount: number;
+  state: IState;
+  shouldShowDescription?: boolean;
+  setUpdateStateModal: (value: SetStateAction<boolean>) => void;
+};
+
+type TEnabledStateItemTitleProps = TBaseStateItemTitleProps & {
+  disabled: false;
+  stateOperationsCallbacks: Pick<TStateOperationsCallbacks, "markStateAsDefault" | "deleteState">;
+};
+
+type TDisabledStateItemTitleProps = TBaseStateItemTitleProps & {
+  disabled: true;
+};
+
+export type TStateItemTitleProps = TEnabledStateItemTitleProps | TDisabledStateItemTitleProps;
+
+export const StateItemTitle = observer(function StateItemTitle(props: TStateItemTitleProps) {
+  const { stateCount, setUpdateStateModal, disabled, state, shouldShowDescription = true } = props;
+  // store hooks
+  const { getStatePercentageInGroup } = useProjectState();
+  // derived values
+  const statePercentage = getStatePercentageInGroup(state.id);
+  const percentage = statePercentage ? statePercentage / 100 : undefined;
+
+  return (
+    <div className="flex w-full items-center justify-between gap-2">
+      <div className="flex items-center gap-1 px-1">
+        {/* draggable indicator */}
+        {!disabled && stateCount != 1 && (
+          <div className="absolute -left-1.5 hidden h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs bg-surface-2 text-secondary transition-colors group-hover:flex hover:text-primary">
+            <DragDropOutline className="h-3 w-3" />
+          </div>
+        )}
+        {/* state icon */}
+        <div className="flex-shrink-0">
+          <StateGroupIcon stateGroup={state.group} color={state.color} size={EIconSize.XL} percentage={percentage} />
+        </div>
+        {/* state title and description */}
+        <div className="min-h-5 px-2 text-13">
+          <h6 className="text-13 font-medium">{state.name}</h6>
+          {shouldShowDescription && <p className="text-11 text-secondary">{state.description}</p>}
+        </div>
+      </div>
+      {!disabled && (
+        <div className="hidden items-center gap-2 group-hover:flex">
+          {/* state mark as default option */}
+          <div className="flex-shrink-0 text-11 transition-all">
+            <StateMarksAsDefault
+              stateId={state.id}
+              isDefault={state.default ? true : false}
+              markStateAsDefaultCallback={props.stateOperationsCallbacks.markStateAsDefault}
+            />
+          </div>
+          {/* state edit options */}
+          <div className="flex items-center gap-1 transition-all">
+            <button
+              className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm text-secondary transition-colors hover:bg-layer-1 hover:text-primary"
+              onClick={() => setUpdateStateModal(true)}
+            >
+              <EditOutline className="h-3 w-3" />
+            </button>
+            <StateDelete
+              totalStates={stateCount}
+              state={state}
+              deleteStateCallback={props.stateOperationsCallbacks.deleteState}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/project-states/state-item.tsx b/apps/web/core/components/project-states/state-item.tsx
new file mode 100644
index 0000000..fa0fb15
--- /dev/null
+++ b/apps/web/core/components/project-states/state-item.tsx
@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { observer } from "mobx-react";
+// Plane
+import type { TDraggableData } from "@plane/constants";
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+import { DropIndicator } from "@plane/ui";
+import { cn, getCurrentStateSequence } from "@plane/utils";
+// components
+import { StateItemTitle, StateUpdate } from "@/components/project-states";
+// helpers
+type TStateItem = {
+  groupKey: TStateGroups;
+  groupedStates: Record<string, IState[]>;
+  totalStates: number;
+  state: IState;
+  stateOperationsCallbacks: TStateOperationsCallbacks;
+  disabled?: boolean;
+  stateItemClassName?: string;
+};
+
+export const StateItem = observer(function StateItem(props: TStateItem) {
+  const {
+    groupKey,
+    groupedStates,
+    totalStates,
+    state,
+    stateOperationsCallbacks,
+    disabled = false,
+    stateItemClassName,
+  } = props;
+  // ref
+  const draggableElementRef = useRef<HTMLDivElement | null>(null);
+  // states
+  const [updateStateModal, setUpdateStateModal] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const [closestEdge, setClosestEdge] = useState<string | null>(null);
+  // derived values
+  const isDraggable = totalStates === 1 ? false : true;
+  const commonStateItemListProps = {
+    stateCount: totalStates,
+    state: state,
+    setUpdateStateModal: setUpdateStateModal,
+  };
+
+  const handleStateSequence = useCallback(
+    async (payload: Partial<IState>) => {
+      try {
+        if (!payload.id) return;
+        await stateOperationsCallbacks.moveStatePosition(payload.id, payload);
+      } catch (error) {
+        console.error("error", error);
+      }
+    },
+    [stateOperationsCallbacks]
+  );
+
+  useEffect(() => {
+    const elementRef = draggableElementRef.current;
+    const initialData: TDraggableData = { groupKey: groupKey, id: state.id };
+
+    if (elementRef && state) {
+      combine(
+        draggable({
+          element: elementRef,
+          getInitialData: () => initialData,
+          onDragStart: () => setIsDragging(true),
+          onDrop: () => setIsDragging(false),
+          canDrag: () => isDraggable && !disabled,
+        }),
+        dropTargetForElements({
+          element: elementRef,
+          getData: ({ input, element }) =>
+            attachClosestEdge(initialData, {
+              input,
+              element,
+              allowedEdges: ["top", "bottom"],
+            }),
+          onDragEnter: (args) => {
+            setIsDraggedOver(true);
+            setClosestEdge(extractClosestEdge(args.self.data));
+          },
+          onDragLeave: () => {
+            setIsDraggedOver(false);
+            setClosestEdge(null);
+          },
+          onDrop: (data) => {
+            setIsDraggedOver(false);
+            const { self, source } = data;
+            const sourceData = source.data as TDraggableData;
+            const destinationData = self.data as TDraggableData;
+
+            if (sourceData && destinationData && sourceData.id) {
+              const destinationGroupKey = destinationData.groupKey;
+              const edge = extractClosestEdge(destinationData) || undefined;
+              const payload: Partial<IState> = {
+                id: sourceData.id,
+                group: destinationGroupKey,
+                sequence: getCurrentStateSequence(groupedStates[destinationGroupKey], destinationData, edge),
+              };
+              handleStateSequence(payload);
+            }
+          },
+        })
+      );
+    }
+  }, [draggableElementRef, state, groupKey, isDraggable, groupedStates, handleStateSequence, disabled]);
+  // DND ends
+
+  if (updateStateModal)
+    return (
+      <StateUpdate
+        state={state}
+        updateStateCallback={stateOperationsCallbacks.updateState}
+        handleClose={() => setUpdateStateModal(false)}
+      />
+    );
+
+  return (
+    <Fragment>
+      {/* draggable drop top indicator */}
+      <DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />
+      <div
+        ref={draggableElementRef}
+        className={cn(
+          "group relative rounded-sm border border-subtle bg-surface-1 px-3.5 py-3",
+          isDragging ? `opacity-50` : `opacity-100`,
+          totalStates === 1 ? `cursor-auto` : `cursor-grab`,
+          stateItemClassName
+        )}
+      >
+        {disabled ? (
+          <StateItemTitle {...commonStateItemListProps} disabled />
+        ) : (
+          <StateItemTitle
+            {...commonStateItemListProps}
+            disabled={false}
+            stateOperationsCallbacks={{
+              markStateAsDefault: stateOperationsCallbacks.markStateAsDefault,
+              deleteState: stateOperationsCallbacks.deleteState,
+            }}
+          />
+        )}
+      </div>
+      {/* draggable drop bottom indicator */}
+      <DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />
+    </Fragment>
+  );
+});
diff --git a/apps/web/core/components/project-states/state-list.tsx b/apps/web/core/components/project-states/state-list.tsx
new file mode 100644
index 0000000..12bc679
--- /dev/null
+++ b/apps/web/core/components/project-states/state-list.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
+// components
+import { StateItem } from "@/components/project-states";
+
+type TStateList = {
+  groupKey: TStateGroups;
+  groupedStates: Record<string, IState[]>;
+  states: IState[];
+  stateOperationsCallbacks: TStateOperationsCallbacks;
+  disabled?: boolean;
+  stateItemClassName?: string;
+};
+
+export const StateList = observer(function StateList(props: TStateList) {
+  const { groupKey, groupedStates, states, stateOperationsCallbacks, disabled = false, stateItemClassName } = props;
+
+  return (
+    <>
+      {states.map((state: IState) => (
+        <StateItem
+          key={state?.name}
+          groupKey={groupKey}
+          groupedStates={groupedStates}
+          totalStates={states.length || 0}
+          state={state}
+          disabled={disabled}
+          stateOperationsCallbacks={stateOperationsCallbacks}
+          stateItemClassName={stateItemClassName}
+        />
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/applied-filters/access.tsx b/apps/web/core/components/project/applied-filters/access.tsx
new file mode 100644
index 0000000..ddeccb3
--- /dev/null
+++ b/apps/web/core/components/project/applied-filters/access.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// constants
+import { NETWORK_CHOICES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline } from "@makeplane/propel/icons";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedAccessFilters = observer(function AppliedAccessFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {values.map((status) => {
+        const accessDetails = NETWORK_CHOICES.find((s) => `${s.key}` === status);
+        return (
+          <div key={status} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
+            {accessDetails && t(accessDetails?.i18n_label)}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(status)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/applied-filters/date.tsx b/apps/web/core/components/project/applied-filters/date.tsx
new file mode 100644
index 0000000..15acbf2
--- /dev/null
+++ b/apps/web/core/components/project/applied-filters/date.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@plane/constants";
+import { CloseOutline } from "@makeplane/propel/icons";
+// helpers
+import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
+// constants
+
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
+  const { editable, handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = PROJECT_CREATED_AT_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderFormattedDate(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <>
+      {values.map((date) => (
+        <div key={date} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          {editable && (
+            <button
+              type="button"
+              className="grid place-items-center text-tertiary hover:text-secondary"
+              onClick={() => handleRemove(date)}
+            >
+              <CloseOutline height={10} width={10} />
+            </button>
+          )}
+        </div>
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/applied-filters/index.ts b/apps/web/core/components/project/applied-filters/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/project/applied-filters/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/project/applied-filters/members.tsx b/apps/web/core/components/project/applied-filters/members.tsx
new file mode 100644
index 0000000..c5e356d
--- /dev/null
+++ b/apps/web/core/components/project/applied-filters/members.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { CloseOutline } from "@makeplane/propel/icons";
+// helpers
+import { getFileURL } from "@plane/utils";
+// types
+import { useMember } from "@/hooks/store/use-member";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+  editable: boolean | undefined;
+};
+
+export const AppliedMembersFilters = observer(function AppliedMembersFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  // store hooks
+  const {
+    workspace: { getWorkspaceMemberDetails },
+  } = useMember();
+
+  return (
+    <>
+      {values.map((memberId) => {
+        const memberDetails = getWorkspaceMemberDetails(memberId)?.member;
+
+        if (!memberDetails) return null;
+
+        return (
+          <div key={memberId} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
+            <Avatar
+              alt={memberDetails.display_name}
+              fallback={memberDetails.display_name?.[0]?.toUpperCase()}
+              src={getFileURL(memberDetails.avatar_url)}
+              size="2xs"
+            />
+            <span className="normal-case">{memberDetails.display_name}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(memberId)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/applied-filters/project-display-filters.tsx b/apps/web/core/components/project/applied-filters/project-display-filters.tsx
new file mode 100644
index 0000000..70c3026
--- /dev/null
+++ b/apps/web/core/components/project/applied-filters/project-display-filters.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// icons
+// types
+import { PROJECT_DISPLAY_FILTER_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { TProjectAppliedDisplayFilterKeys } from "@plane/types";
+// constants
+
+type Props = {
+  handleRemove: (key: TProjectAppliedDisplayFilterKeys) => void;
+  values: TProjectAppliedDisplayFilterKeys[];
+  editable: boolean | undefined;
+};
+
+export const AppliedProjectDisplayFilters = observer(function AppliedProjectDisplayFilters(props: Props) {
+  const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      {values.map((key) => {
+        const filterLabel = PROJECT_DISPLAY_FILTER_OPTIONS.find((s) => s.key === key)?.i18n_label;
+        return (
+          <div key={key} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
+            {filterLabel && t(filterLabel)}
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(key)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/applied-filters/root.tsx b/apps/web/core/components/project/applied-filters/root.tsx
new file mode 100644
index 0000000..330058e
--- /dev/null
+++ b/apps/web/core/components/project/applied-filters/root.tsx
@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { PillButton } from "@makeplane/propel/components/pill";
+import { CloseOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
+import { EHeaderVariant, Header } from "@plane/ui";
+import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
+// local imports
+import { AppliedAccessFilters } from "./access";
+import { AppliedDateFilters } from "./date";
+import { AppliedMembersFilters } from "./members";
+import { AppliedProjectDisplayFilters } from "./project-display-filters";
+
+type Props = {
+  appliedFilters: TProjectFilters;
+  appliedDisplayFilters: TProjectAppliedDisplayFilterKeys[];
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof TProjectFilters, value: string | null) => void;
+  handleRemoveDisplayFilter: (key: TProjectAppliedDisplayFilterKeys) => void;
+  alwaysAllowEditing?: boolean;
+  filteredProjects: number;
+  totalProjects: number;
+};
+
+const MEMBERS_FILTERS = ["lead", "members"];
+const DATE_FILTERS = ["created_at"];
+
+export function ProjectAppliedFiltersList(props: Props) {
+  const { t } = useTranslation();
+  const {
+    appliedFilters,
+    appliedDisplayFilters,
+    handleClearAllFilters,
+    handleRemoveFilter,
+    handleRemoveDisplayFilter,
+    alwaysAllowEditing,
+    filteredProjects,
+    totalProjects,
+  } = props;
+
+  if (!appliedFilters && !appliedDisplayFilters) return null;
+  if (Object.keys(appliedFilters).length === 0 && appliedDisplayFilters.length === 0) return null;
+
+  const isEditingAllowed = alwaysAllowEditing;
+
+  return (
+    <Header variant={EHeaderVariant.TERNARY}>
+      <Header.LeftItem>
+        {/* Applied filters */}
+        {Object.entries(appliedFilters ?? {}).map(([key, value]) => {
+          const filterKey = key as keyof TProjectFilters;
+
+          if (!value) return;
+          if (Array.isArray(value) && value.length === 0) return;
+
+          return (
+            <div
+              key={filterKey}
+              className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary"
+            >
+              <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+              {filterKey === "access" && (
+                <AppliedAccessFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter("access", val)}
+                  values={value}
+                />
+              )}
+              {DATE_FILTERS.includes(filterKey) && (
+                <AppliedDateFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={value}
+                />
+              )}
+              {MEMBERS_FILTERS.includes(filterKey) && (
+                <AppliedMembersFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={value}
+                />
+              )}
+              {isEditingAllowed && (
+                <button
+                  type="button"
+                  className="grid place-items-center text-tertiary hover:text-secondary"
+                  onClick={() => handleRemoveFilter(filterKey, null)}
+                >
+                  <CloseOutline height={12} width={12} />
+                </button>
+              )}
+            </div>
+          );
+        })}
+        {/* Applied display filters */}
+        {appliedDisplayFilters.length > 0 && (
+          <div
+            key="project_display_filters"
+            className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary"
+          >
+            <span className="text-11 text-tertiary">{t("common.projects")}</span>
+            <AppliedProjectDisplayFilters
+              editable={isEditingAllowed}
+              values={appliedDisplayFilters}
+              handleRemove={(key) => handleRemoveDisplayFilter(key)}
+            />
+          </div>
+        )}
+        {isEditingAllowed && (
+          <PillButton
+            type="button"
+            size="md"
+            variant="outline"
+            label={t("common.clear_all")}
+            endIcon={<CloseOutline height={12} width={12} />}
+            onClick={handleClearAllFilters}
+          />
+        )}
+      </Header.LeftItem>
+      <Header.RightItem>
+        <Tooltip label={`${filteredProjects} of ${totalProjects} projects match the applied filters.`} layout="stacked">
+          <span className="rounded-full bg-layer-1 px-2.5 py-1 text-13 font-medium">
+            {filteredProjects}/{totalProjects}
+          </span>
+        </Tooltip>
+      </Header.RightItem>
+    </Header>
+  );
+}
diff --git a/apps/web/core/components/project/archive-restore-modal.tsx b/apps/web/core/components/project/archive-restore-modal.tsx
new file mode 100644
index 0000000..0f17ce9
--- /dev/null
+++ b/apps/web/core/components/project/archive-restore-modal.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// ui
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  workspaceSlug: string;
+
+  projectId: string;
+  isOpen: boolean;
+  onClose: () => void;
+  archive: boolean;
+};
+
+export function ArchiveRestoreProjectModal(props: Props) {
+  const { workspaceSlug, projectId, isOpen, onClose, archive } = props;
+  // router
+  const router = useAppRouter();
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+  // store hooks
+  const { getProjectById, archiveProject, restoreProject } = useProject();
+
+  const projectDetails = getProjectById(projectId);
+  if (!projectDetails) return null;
+
+  const handleClose = () => {
+    setIsLoading(false);
+    onClose();
+  };
+
+  const handleArchiveProject = async () => {
+    setIsLoading(true);
+    await archiveProject(workspaceSlug, projectId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Archive success",
+          message: `${projectDetails.name} has been archived successfully`,
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/`);
+        return;
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Project could not be archived. Please try again.",
+        })
+      )
+      .finally(() => setIsLoading(false));
+  };
+
+  const handleRestoreProject = async () => {
+    setIsLoading(true);
+    await restoreProject(workspaceSlug, projectId)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Restore success",
+          message: `You can find ${projectDetails.name} in your projects.`,
+        });
+        onClose();
+        router.push(`/${workspaceSlug}/projects/`);
+        return;
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Project could not be restored. Please try again.",
+        })
+      )
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.LG}>
+      <div className="px-5 py-4">
+        <h3 className="text-18 font-medium 2xl:text-20">
+          {archive ? "Archive" : "Restore"} {projectDetails.name}
+        </h3>
+        <p className="mt-3 text-13 text-secondary">
+          {archive
+            ? "This project and its work items, cycles, modules, and pages will be archived. Its work items won't appear in search. Only project admins can restore the project."
+            : "Restoring a project will activate it and make it visible to all members of the project. Are you sure you want to continue?"}
+        </p>
+        <div className="mt-3 flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            tabIndex={1}
+            onClick={archive ? handleArchiveProject : handleRestoreProject}
+            loading={isLoading}
+          >
+            {archive ? (isLoading ? "Archiving" : "Archive") : isLoading ? "Restoring" : "Restore"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/project/card-list.tsx b/apps/web/core/components/project/card-list.tsx
new file mode 100644
index 0000000..961045d
--- /dev/null
+++ b/apps/web/core/components/project/card-list.tsx
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { ContentWrapper } from "@plane/ui";
+// components
+import { calculateTotalFilters } from "@plane/utils";
+import { ProjectsLoader } from "@/components/ui/loader/projects-loader";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectFilter } from "@/hooks/store/use-project-filter";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ProjectCard } from "./card";
+
+type TProjectCardListProps = {
+  totalProjectIds?: string[];
+  filteredProjectIds?: string[];
+};
+
+export const ProjectCardList = observer(function ProjectCardList(props: TProjectCardListProps) {
+  const { totalProjectIds: totalProjectIdsProps, filteredProjectIds: filteredProjectIdsProps } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const {
+    loader,
+    fetchStatus,
+    workspaceProjectIds: storeWorkspaceProjectIds,
+    filteredProjectIds: storeFilteredProjectIds,
+    getProjectById,
+  } = useProject();
+  const { currentWorkspaceDisplayFilters, currentWorkspaceFilters } = useProjectFilter();
+  const { allowPermissions } = useUserPermissions();
+
+  // derived values
+  const workspaceProjectIds = totalProjectIdsProps ?? storeWorkspaceProjectIds;
+  const filteredProjectIds = filteredProjectIdsProps ?? storeFilteredProjectIds;
+
+  // permissions
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  if (!filteredProjectIds || !workspaceProjectIds || loader === "init-loader" || fetchStatus !== "complete")
+    return <ProjectsLoader />;
+
+  if (workspaceProjectIds?.length === 0 && !currentWorkspaceDisplayFilters?.archived_projects)
+    return (
+      <EmptyStateDetailed
+        title={t("workspace_projects.empty_state.general.title")}
+        description={t("workspace_projects.empty_state.general.description")}
+        assetKey="project"
+        assetClassName="size-40"
+        actions={[
+          {
+            label: t("workspace_projects.empty_state.general.primary_button.text"),
+            onClick: () => {
+              toggleCreateProjectModal(true);
+            },
+            disabled: !canPerformEmptyStateActions,
+            variant: "primary",
+          },
+        ]}
+      />
+    );
+
+  if (filteredProjectIds.length === 0)
+    return (
+      <EmptyStateDetailed
+        title={
+          currentWorkspaceDisplayFilters?.archived_projects &&
+          calculateTotalFilters(currentWorkspaceFilters ?? {}) === 0
+            ? t("workspace_empty_state.projects_archived.title")
+            : t("common_empty_state.search.title")
+        }
+        description={
+          currentWorkspaceDisplayFilters?.archived_projects &&
+          calculateTotalFilters(currentWorkspaceFilters ?? {}) === 0
+            ? t("workspace_empty_state.projects_archived.description")
+            : t("common_empty_state.search.description")
+        }
+        assetKey={
+          currentWorkspaceDisplayFilters?.archived_projects &&
+          calculateTotalFilters(currentWorkspaceFilters ?? {}) === 0
+            ? "archived-work-item"
+            : "search"
+        }
+        assetClassName="size-40"
+      />
+    );
+
+  return (
+    <ContentWrapper>
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {filteredProjectIds.map((projectId) => {
+          const projectDetails = getProjectById(projectId);
+          if (!projectDetails) return;
+          return <ProjectCard key={projectDetails.id} project={projectDetails} />;
+        })}
+      </div>
+    </ContentWrapper>
+  );
+});
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
new file mode 100644
index 0000000..45dbcb1
--- /dev/null
+++ b/apps/web/core/components/project/card.tsx
@@ -0,0 +1,388 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import {
+  DeleteOutline,
+  LinkOutline,
+  LockOutline,
+  NewTabOutline,
+  RestoreOutline,
+  SettingsOutline,
+  TickOutline,
+  UserPlusOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IProject } from "@plane/types";
+import type { TContextMenuItem } from "@plane/ui";
+import { ContextMenu, FavoriteStar } from "@plane/ui";
+import { copyUrlToClipboard, cn, getFileURL, renderFormattedDate } from "@plane/utils";
+// components
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { AvatarGroupOverflow } from "@/components/common/avatar-group-overflow";
+import { CoverImage } from "@/components/common/cover-image";
+import { DeleteProjectModal } from "./delete-project-modal";
+import { JoinProjectModal } from "./join-project-modal";
+import { ArchiveRestoreProjectModal } from "./archive-restore-modal";
+
+type Props = {
+  project: IProject;
+};
+
+export const ProjectCard = observer(function ProjectCard(props: Props) {
+  const { project } = props;
+  // states
+  const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
+  const [joinProjectModalOpen, setJoinProjectModal] = useState(false);
+  const [restoreProject, setRestoreProject] = useState(false);
+  // refs
+  const projectCardRef = useRef(null);
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { addProjectToFavorites, removeProjectFromFavorites } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // derived values
+  const projectMembersIds = project.members;
+  const shouldRenderFavorite = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  // auth
+  const isMemberOfProject = !!project.member_role;
+  const hasAdminRole = project.member_role === EUserPermissions.ADMIN;
+  const hasMemberRole = project.member_role === EUserPermissions.MEMBER;
+  // archive
+  const isArchived = !!project.archived_at;
+  // local storage
+  const { setValue: toggleFavoriteMenu, storedValue: isFavoriteMenuOpen } = useLocalStorage<boolean>(
+    IS_FAVORITE_MENU_OPEN,
+    false
+  );
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug) return;
+
+    const addToFavoritePromise = addProjectToFavorites(workspaceSlug.toString(), project.id);
+    setPromiseToast(addToFavoritePromise, {
+      loading: "Adding project to favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Project added to favorites.",
+        actionItems: () => {
+          if (!isFavoriteMenuOpen) toggleFavoriteMenu(true);
+          return <></>;
+        },
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't add the project to favorites. Please try again.",
+      },
+    });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug) return;
+
+    const removeFromFavoritePromise = removeProjectFromFavorites(workspaceSlug.toString(), project.id);
+    setPromiseToast(removeFromFavoritePromise, {
+      loading: "Removing project from favorites...",
+      success: {
+        title: "Success!",
+        message: () => "Project removed from favorites.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Couldn't remove the project from favorites. Please try again.",
+      },
+    });
+  };
+
+  const projectLink = `${workspaceSlug}/projects/${project.id}/issues`;
+  const handleCopyText = () =>
+    copyUrlToClipboard(projectLink).then(() =>
+      setToast({
+        type: TOAST_TYPE.INFO,
+        title: "Link Copied!",
+        message: "Project link copied to clipboard.",
+      })
+    );
+  const handleOpenInNewTab = () => window.open(`/${projectLink}`, "_blank");
+
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "settings",
+      action: () => router.push(`/${workspaceSlug}/settings/projects/${project.id}`),
+      title: "Settings",
+      icon: SettingsOutline,
+      shouldRender: !isArchived && (hasAdminRole || hasMemberRole),
+    },
+    {
+      key: "join",
+      action: () => setJoinProjectModal(true),
+      title: "Join",
+      icon: UserPlusOutline,
+      shouldRender: !isMemberOfProject && !isArchived,
+    },
+    {
+      key: "open-new-tab",
+      action: handleOpenInNewTab,
+      title: "Open in new tab",
+      icon: NewTabOutline,
+      shouldRender: !isMemberOfProject && !isArchived,
+    },
+    {
+      key: "copy-link",
+      action: handleCopyText,
+      title: "Copy link",
+      icon: LinkOutline,
+      shouldRender: !isArchived,
+    },
+    {
+      key: "restore",
+      action: () => setRestoreProject(true),
+      title: "Restore",
+      icon: RestoreOutline,
+      shouldRender: isArchived && hasAdminRole,
+    },
+    {
+      key: "delete",
+      action: () => setDeleteProjectModal(true),
+      title: "Delete",
+      icon: DeleteOutline,
+      shouldRender: isArchived && hasAdminRole,
+    },
+  ];
+
+  return (
+    <>
+      {/* Delete Project Modal */}
+      <DeleteProjectModal
+        project={project}
+        isOpen={deleteProjectModalOpen}
+        onClose={() => setDeleteProjectModal(false)}
+      />
+      {/* Join Project Modal */}
+      {workspaceSlug && (
+        <JoinProjectModal
+          workspaceSlug={workspaceSlug.toString()}
+          project={project}
+          isOpen={joinProjectModalOpen}
+          handleClose={() => setJoinProjectModal(false)}
+        />
+      )}
+      {/* Restore project modal */}
+      {workspaceSlug && project && (
+        <ArchiveRestoreProjectModal
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={project.id}
+          isOpen={restoreProject}
+          onClose={() => setRestoreProject(false)}
+          archive={false}
+        />
+      )}
+      <Link
+        ref={projectCardRef}
+        href={`/${workspaceSlug}/projects/${project.id}/issues`}
+        onClick={(e) => {
+          if (!isMemberOfProject || isArchived) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!isArchived) setJoinProjectModal(true);
+          }
+        }}
+        data-prevent-progress={!isMemberOfProject || isArchived}
+        className={cn(
+          "group/project-card flex w-full flex-col justify-between overflow-hidden rounded-lg border border-subtle bg-layer-2 transition-all duration-300 hover:border-strong hover:shadow-raised-200"
+        )}
+      >
+        <ContextMenu parentRef={projectCardRef} items={MENU_ITEMS} />
+        <div className="relative h-[118px] w-full rounded-t">
+          <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/60 to-transparent" />
+
+          <CoverImage
+            src={project.cover_image_url}
+            alt={project.name}
+            className="absolute top-0 left-0 h-full w-full rounded-t"
+          />
+
+          <div className="absolute bottom-4 z-[1] flex h-10 w-full items-center justify-between gap-3 px-4">
+            <div className="flex flex-grow items-center gap-2.5 truncate">
+              <div className="grid h-9 w-9 flex-shrink-0 place-items-center rounded-sm bg-white/10">
+                <Logo logo={project.logo_props} size={18} />
+              </div>
+
+              <div className="flex w-full flex-col justify-between gap-0.5 truncate">
+                <h3 className="truncate font-semibold text-on-color">{project.name}</h3>
+                <span className="flex items-center gap-1.5">
+                  <p className="text-11 font-medium text-on-color">{project.identifier} </p>
+                  {project.network === 0 && <LockOutline className="h-2.5 w-2.5 text-on-color" />}
+                </span>
+              </div>
+            </div>
+
+            {!isArchived && (
+              <div data-prevent-progress className="flex h-full flex-shrink-0 items-center gap-2">
+                <button
+                  className="flex h-6 w-6 items-center justify-center rounded-sm bg-white/10"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    handleCopyText();
+                  }}
+                >
+                  <LinkOutline className="h-3 w-3 text-on-color" />
+                </button>
+                {shouldRenderFavorite && (
+                  <FavoriteStar
+                    buttonClassName="h-6 w-6 bg-white/10 rounded-sm"
+                    iconClassName={cn("h-3 w-3", {
+                      "text-on-color": !project.is_favorite,
+                    })}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      if (project.is_favorite) handleRemoveFromFavorites();
+                      else handleAddToFavorites();
+                    }}
+                    selected={!!project.is_favorite}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div
+          className={cn("flex h-[104px] w-full flex-col justify-between rounded-b-sm p-4", {
+            "opacity-90": isArchived,
+          })}
+        >
+          <p className="line-clamp-2 text-13 break-words text-tertiary">
+            {project.description && project.description.trim() !== ""
+              ? project.description
+              : `Created on ${renderFormattedDate(project.created_at)}`}
+          </p>
+          <div className="item-center flex justify-between">
+            <div className="flex items-center justify-center gap-2">
+              <Tooltip
+                label={project.members?.length ? `Members: ${project.members.length}` : "No members"}
+                layout="stacked"
+                disabled={isMobile}
+              >
+                {projectMembersIds && projectMembersIds.length > 0 ? (
+                  <div className="flex cursor-pointer items-center gap-2 text-secondary">
+                    <AvatarGroupOverflow size="xs">
+                      {projectMembersIds.map((memberId) => {
+                        const member = getUserDetails(memberId);
+                        if (!member) return null;
+                        return (
+                          <Avatar
+                            key={member.id}
+                            alt={member.display_name}
+                            fallback={member.display_name?.[0]?.toUpperCase()}
+                            src={getFileURL(member.avatar_url)}
+                          />
+                        );
+                      })}
+                    </AvatarGroupOverflow>
+                  </div>
+                ) : (
+                  <span className="text-13 text-placeholder italic">No Member Yet</span>
+                )}
+              </Tooltip>
+              {isArchived && <div className="text-11 font-medium text-placeholder">Archived</div>}
+            </div>
+            {isArchived ? (
+              hasAdminRole && (
+                <div className="flex items-center justify-center gap-2">
+                  <div
+                    className="flex items-center justify-center text-11 font-medium text-placeholder hover:text-secondary"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setRestoreProject(true);
+                    }}
+                  >
+                    <div className="flex items-center gap-1.5">
+                      <RestoreOutline className="h-3.5 w-3.5" />
+                      Restore
+                    </div>
+                  </div>
+                  <div
+                    className="flex items-center justify-center text-11 font-medium text-placeholder hover:text-secondary"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setDeleteProjectModal(true);
+                    }}
+                  >
+                    <DeleteOutline className="h-3.5 w-3.5" />
+                  </div>
+                </div>
+              )
+            ) : (
+              <>
+                {isMemberOfProject &&
+                  (hasAdminRole || hasMemberRole ? (
+                    <Link
+                      className="flex items-center justify-center rounded-sm p-1 text-placeholder hover:bg-layer-1 hover:text-secondary"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                      }}
+                      href={`/${workspaceSlug}/settings/projects/${project.id}`}
+                    >
+                      <SettingsOutline className="h-3.5 w-3.5" />
+                    </Link>
+                  ) : (
+                    <span className="flex items-center gap-1 text-13 text-placeholder">
+                      <TickOutline className="h-3.5 w-3.5" />
+                      Joined
+                    </span>
+                  ))}
+                {!isMemberOfProject && (
+                  <div className="flex items-center">
+                    <Button
+                      variant="link"
+                      className="!p-0 font-semibold"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setJoinProjectModal(true);
+                      }}
+                    >
+                      Join
+                    </Button>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </Link>
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/confirm-project-member-remove.tsx b/apps/web/core/components/project/confirm-project-member-remove.tsx
new file mode 100644
index 0000000..04145f1
--- /dev/null
+++ b/apps/web/core/components/project/confirm-project-member-remove.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { WarningTriangleOutline } from "@makeplane/propel/icons";
+// types
+import { Button } from "@plane/propel/button";
+import type { IUserLite } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  data: Partial<IUserLite>;
+  onSubmit: () => Promise<void>;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMemberRemove(props: Props) {
+  const { data, onSubmit, isOpen, onClose } = props;
+  // router
+  const { projectId } = useParams();
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { getProjectById } = useProject();
+
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsDeleteLoading(true);
+
+    await onSubmit();
+
+    handleClose();
+  };
+
+  if (!projectId) return <></>;
+
+  const isCurrentUser = currentUser?.id === data?.id;
+  const currentProjectDetails = getProjectById(projectId.toString());
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="bg-surface-1 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="sm:flex sm:items-start">
+          <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
+            <WarningTriangleOutline className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </div>
+          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <h3 className="text-16 leading-6 font-medium text-primary">
+              {isCurrentUser ? "Leave project?" : `Remove ${data?.display_name}?`}
+            </h3>
+            <div className="mt-2">
+              <p className="text-13 text-secondary">
+                {isCurrentUser ? (
+                  <>
+                    Are you sure you want to leave the <span className="font-bold">{currentProjectDetails?.name}</span>{" "}
+                    project? You will be able to join the project if invited again or if it{"'"}s public.
+                  </>
+                ) : (
+                  <>
+                    Are you sure you want to remove member- <span className="font-bold">{data?.display_name}</span>?
+                    They will no longer have access to this project. This action cannot be undone.
+                  </>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-end gap-2 p-4 sm:px-6">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isDeleteLoading}>
+          {isCurrentUser ? (isDeleteLoading ? "Leaving..." : "Leave") : isDeleteLoading ? "Removing..." : "Remove"}
+        </Button>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/project/create-project-modal.tsx b/apps/web/core/components/project/create-project-modal.tsx
new file mode 100644
index 0000000..45e2ed5
--- /dev/null
+++ b/apps/web/core/components/project/create-project-modal.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { getAssetIdFromUrl, checkURLValidity } from "@plane/utils";
+// plane ui
+// helpers
+// hooks
+import useKeypress from "@/hooks/use-keypress";
+// plane web components
+import { CreateProjectForm } from "@/components/projects/create/root";
+// plane web types
+import type { TProject } from "@plane/types";
+// services
+import { FileService } from "@/services/file.service";
+const fileService = new FileService();
+import { ProjectFeatureUpdate } from "./project-feature-update";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  setToFavorite?: boolean;
+  workspaceSlug: string;
+  data?: Partial<TProject>;
+  templateId?: string;
+};
+
+enum EProjectCreationSteps {
+  CREATE_PROJECT = "CREATE_PROJECT",
+  FEATURE_SELECTION = "FEATURE_SELECTION",
+}
+
+export function CreateProjectModal(props: Props) {
+  const { isOpen, onClose, setToFavorite = false, workspaceSlug, data, templateId } = props;
+  // states
+  const [currentStep, setCurrentStep] = useState<EProjectCreationSteps>(EProjectCreationSteps.CREATE_PROJECT);
+  const [createdProjectId, setCreatedProjectId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setCurrentStep(EProjectCreationSteps.CREATE_PROJECT);
+      setCreatedProjectId(null);
+    }
+  }, [isOpen]);
+
+  const handleNextStep = (projectId: string) => {
+    if (!projectId) return;
+    setCreatedProjectId(projectId);
+    setCurrentStep(EProjectCreationSteps.FEATURE_SELECTION);
+  };
+
+  const handleCoverImageStatusUpdate = async (projectId: string, coverImage: string) => {
+    if (!checkURLValidity(coverImage)) {
+      await fileService.updateBulkProjectAssetsUploadStatus(workspaceSlug, projectId, projectId, {
+        asset_ids: [getAssetIdFromUrl(coverImage)],
+      });
+    }
+  };
+
+  useKeypress("Escape", () => {
+    if (isOpen) onClose();
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXXXL}>
+      {currentStep === EProjectCreationSteps.CREATE_PROJECT && (
+        <CreateProjectForm
+          setToFavorite={setToFavorite}
+          workspaceSlug={workspaceSlug}
+          onClose={onClose}
+          updateCoverImageStatus={handleCoverImageStatusUpdate}
+          handleNextStep={handleNextStep}
+          data={data}
+          templateId={templateId}
+        />
+      )}
+      {currentStep === EProjectCreationSteps.FEATURE_SELECTION && (
+        <ProjectFeatureUpdate projectId={createdProjectId} workspaceSlug={workspaceSlug} onClose={onClose} />
+      )}
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/project/create/common-attributes.tsx b/apps/web/core/components/project/create/common-attributes.tsx
new file mode 100644
index 0000000..3d22e4d
--- /dev/null
+++ b/apps/web/core/components/project/create/common-attributes.tsx
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ChangeEvent } from "react";
+import type { UseFormSetValue } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { InfoOutline } from "@makeplane/propel/icons";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TProject } from "@plane/types";
+// ui
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { projectIdentifierSanitizer, getTabIndex } from "@plane/utils";
+
+type Props = {
+  setValue: UseFormSetValue<TProject>;
+  isMobile: boolean;
+  shouldAutoSyncIdentifier: boolean;
+  setShouldAutoSyncIdentifier: (value: boolean) => void;
+  handleFormOnChange?: () => void;
+};
+
+function ProjectCommonAttributes(props: Props) {
+  const { setValue, isMobile, shouldAutoSyncIdentifier, setShouldAutoSyncIdentifier, handleFormOnChange } = props;
+  const {
+    formState: { errors },
+    control,
+  } = useFormContext<TProject>();
+
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+  const { t } = useTranslation();
+
+  const handleNameChange =
+    (onChange: (event: ChangeEvent<HTMLInputElement>) => void) => (e: ChangeEvent<HTMLInputElement>) => {
+      if (!shouldAutoSyncIdentifier) {
+        onChange(e);
+        return;
+      }
+      if (e.target.value === "") setValue("identifier", "");
+      else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 10));
+      onChange(e);
+      handleFormOnChange?.();
+    };
+
+  const handleIdentifierChange = (onChange: (value: string) => void) => (e: ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    const alphanumericValue = projectIdentifierSanitizer(value);
+    setShouldAutoSyncIdentifier(false);
+    onChange(alphanumericValue);
+    handleFormOnChange?.();
+  };
+  return (
+    <div className="grid grid-cols-1 gap-x-2 gap-y-3 md:grid-cols-4">
+      <div className="md:col-span-3">
+        <Controller
+          control={control}
+          name="name"
+          rules={{
+            required: t("name_is_required"),
+            maxLength: {
+              value: 255,
+              message: t("title_should_be_less_than_255_characters"),
+            },
+          }}
+          render={({ field: { value, onChange } }) => (
+            <Field name="name" invalid={Boolean(errors.name)}>
+              <InputGroup size="2xl">
+                <Input
+                  size="2xl"
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={handleNameChange(onChange)}
+                  placeholder={t("project_name")}
+                  tabIndex={getIndex("name")}
+                />
+              </InputGroup>
+            </Field>
+          )}
+        />
+        <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
+      </div>
+      <div className="relative">
+        <Controller
+          control={control}
+          name="identifier"
+          rules={{
+            required: t("project_id_is_required"),
+            // allow only alphanumeric & non-latin characters
+            validate: (value) =>
+              /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) || t("only_alphanumeric_non_latin_characters_allowed"),
+            minLength: {
+              value: 1,
+              message: t("project_id_min_char"),
+            },
+            maxLength: {
+              value: 10,
+              message: t("project_id_max_char"),
+            },
+          }}
+          render={({ field: { value, onChange } }) => (
+            <Field name="identifier" invalid={Boolean(errors.identifier)}>
+              <InputGroup size="2xl">
+                <Input
+                  size="2xl"
+                  id="identifier"
+                  name="identifier"
+                  type="text"
+                  value={value}
+                  onChange={handleIdentifierChange(onChange)}
+                  placeholder={t("project_id")}
+                  tabIndex={getIndex("identifier")}
+                />
+              </InputGroup>
+            </Field>
+          )}
+        />
+        <Tooltip
+          label={t("project_id_tooltip_content")}
+          layout="stacked"
+          side="right"
+          align="start"
+          disabled={isMobile}
+        >
+          <InfoOutline className="absolute top-2.5 right-2 h-3 w-3 text-placeholder" />
+        </Tooltip>
+        <span className="text-11 text-danger-primary">{errors?.identifier?.message}</span>
+      </div>
+      <div className="md:col-span-4">
+        <Controller
+          name="description"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <Field name="description" invalid={Boolean(errors?.description)}>
+              <TextAreaGroup resize="none">
+                <TextArea
+                  size="lg"
+                  surface="field"
+                  autoResize
+                  maxRows={8}
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder={t("description")}
+                  onChange={(e) => {
+                    onChange(e);
+                    handleFormOnChange?.();
+                  }}
+                  tabIndex={getIndex("description")}
+                />
+              </TextAreaGroup>
+            </Field>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ProjectCommonAttributes;
diff --git a/apps/web/core/components/project/create/header.tsx b/apps/web/core/components/project/create/header.tsx
new file mode 100644
index 0000000..356ec1c
--- /dev/null
+++ b/apps/web/core/components/project/create/header.tsx
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { CloseOutline } from "@makeplane/propel/icons";
+// plane types
+import type { IProject } from "@plane/types";
+// plane ui
+import { getTabIndex } from "@plane/utils";
+// components
+import { CoverImage } from "@/components/common/cover-image";
+import { ImagePickerPopover } from "@/components/core/image-picker-popover";
+
+type Props = {
+  handleClose: () => void;
+  isMobile?: boolean;
+  handleFormOnChange?: () => void;
+  isClosable?: boolean;
+  handleTemplateSelect?: () => void;
+  showActionButtons?: boolean;
+};
+
+function ProjectCreateHeader(props: Props) {
+  const { handleClose, isMobile = false, handleFormOnChange, isClosable = true } = props;
+  const { watch, control, setValue } = useFormContext<IProject>();
+  const { t } = useTranslation();
+  // derived values
+  const coverImage = watch("cover_image_url");
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+
+  return (
+    <div className="group relative h-44 w-full rounded-lg">
+      <CoverImage
+        src={coverImage}
+        alt={t("project_cover_image_alt")}
+        className="absolute top-0 left-0 h-full w-full rounded-lg"
+      />
+      {isClosable && (
+        <div className="absolute top-2 right-2 p-2">
+          <button type="button" onClick={handleClose} tabIndex={getIndex("close")}>
+            <CloseOutline className="h-5 w-5 text-on-color" />
+          </button>
+        </div>
+      )}
+      <div className="absolute right-2 bottom-2">
+        <Controller
+          name="cover_image_url"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <ImagePickerPopover
+              label={t("change_cover")}
+              onChange={(data) => {
+                onChange(data);
+                handleFormOnChange?.();
+              }}
+              control={control}
+              value={value ?? null}
+              tabIndex={getIndex("cover_image")}
+            />
+          )}
+        />
+      </div>
+      <div className="absolute -bottom-[22px] left-3">
+        <Controller
+          name="logo_props"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <EmojiPicker
+              iconType="material"
+              isOpen={isOpen}
+              handleToggle={(val: boolean) => setIsOpen(val)}
+              className="flex items-center justify-center"
+              buttonClassName="flex items-center justify-center"
+              label={
+                <span className="grid h-11 w-11 place-items-center rounded-md border border-subtle bg-layer-2">
+                  <Logo logo={value} size={20} />
+                </span>
+              }
+              onChange={(val: any) => {
+                let logoValue = {};
+
+                if (val?.type === "emoji")
+                  logoValue = {
+                    value: val.value,
+                  };
+                else if (val?.type === "icon") logoValue = val.value;
+
+                const newLogoProps = {
+                  in_use: val?.type,
+                  [val?.type]: logoValue,
+                };
+                setValue("logo_props", newLogoProps, {
+                  shouldDirty: true,
+                });
+                onChange(newLogoProps);
+                handleFormOnChange?.();
+                setIsOpen(false);
+              }}
+              defaultIconColor={value?.in_use && value.in_use === "icon" ? value.icon?.color : undefined}
+              defaultOpen={
+                value?.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+              }
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ProjectCreateHeader;
diff --git a/apps/web/core/components/project/create/project-create-buttons.tsx b/apps/web/core/components/project/create/project-create-buttons.tsx
new file mode 100644
index 0000000..ae66ca7
--- /dev/null
+++ b/apps/web/core/components/project/create/project-create-buttons.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useFormContext } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IProject } from "@plane/types";
+// ui
+// helpers
+import { getTabIndex } from "@plane/utils";
+
+type Props = {
+  handleClose: () => void;
+  isMobile?: boolean;
+};
+
+function ProjectCreateButtons(props: Props) {
+  const { t } = useTranslation();
+  const { handleClose, isMobile = false } = props;
+  const {
+    formState: { isSubmitting },
+  } = useFormContext<IProject>();
+
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+
+  return (
+    <div className="flex justify-end gap-2 border-t border-subtle py-4">
+      <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
+        {t("common.cancel")}
+      </Button>
+      <Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
+        {isSubmitting ? t("creating") : t("create_project")}
+      </Button>
+    </div>
+  );
+}
+
+export default ProjectCreateButtons;
diff --git a/apps/web/core/components/project/delete-project-modal.tsx b/apps/web/core/components/project/delete-project-modal.tsx
new file mode 100644
index 0000000..b4ee30a
--- /dev/null
+++ b/apps/web/core/components/project/delete-project-modal.tsx
@@ -0,0 +1,160 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useParams } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+import { WarningTriangleOutline } from "@makeplane/propel/icons";
+// Plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IProject } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type DeleteProjectModal = {
+  isOpen: boolean;
+  project: IProject;
+  onClose: () => void;
+};
+
+const defaultValues = {
+  projectName: "",
+  confirmDelete: "",
+};
+
+export function DeleteProjectModal(props: DeleteProjectModal) {
+  const { isOpen, project, onClose } = props;
+  // store hooks
+  const { deleteProject } = useProject();
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  // form info
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm({ defaultValues });
+
+  const canDelete = watch("projectName") === project?.name && watch("confirmDelete") === "delete my project";
+
+  const handleClose = () => {
+    const timer = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timer);
+    }, 350);
+
+    onClose();
+  };
+
+  const onSubmit = async () => {
+    if (!workspaceSlug || !canDelete) return;
+
+    try {
+      await deleteProject(workspaceSlug.toString(), project.id);
+      if (projectId && projectId.toString() === project.id) router.push(`/${workspaceSlug}/projects`);
+      handleClose();
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Project deleted successfully.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Something went wrong. Please try again later.",
+      });
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
+        <div className="flex w-full items-center justify-start gap-6">
+          <span className="place-items-center rounded-full bg-danger-subtle p-4">
+            <WarningTriangleOutline className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </span>
+          <span className="flex items-center justify-start">
+            <h3 className="text-18 font-medium 2xl:text-20">Delete project</h3>
+          </span>
+        </div>
+        <span>
+          <p className="text-13 leading-7 text-secondary">
+            Are you sure you want to delete project <span className="font-semibold break-words">{project?.name}</span>?
+            All of the data related to the project will be permanently removed. This action cannot be undone
+          </p>
+        </span>
+        <div className="text-secondary">
+          <p className="text-13 break-words">
+            Enter the project name <span className="font-medium text-primary">{project?.name}</span> to continue:
+          </p>
+          <Controller
+            control={control}
+            name="projectName"
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="projectName" invalid={Boolean(errors.projectName)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="projectName"
+                    name="projectName"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    placeholder="Project name"
+                    autoComplete="off"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </div>
+        <div className="text-secondary">
+          <p className="text-13">
+            To confirm, type <span className="font-medium text-primary">delete my project</span> below:
+          </p>
+          <Controller
+            control={control}
+            name="confirmDelete"
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="confirmDelete" invalid={Boolean(errors.confirmDelete)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="confirmDelete"
+                    name="confirmDelete"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    placeholder="Enter 'delete my project'"
+                    autoComplete="off"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
+            {isSubmitting ? "Deleting" : "Delete project"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/project/dropdowns/filters/access.tsx b/apps/web/core/components/project/dropdowns/filters/access.tsx
new file mode 100644
index 0000000..32a5648
--- /dev/null
+++ b/apps/web/core/components/project/dropdowns/filters/access.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { NETWORK_CHOICES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// local imports
+import { ProjectNetworkIcon } from "../../project-network-icon";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterAccess = observer(function FilterAccess(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // states
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const { t } = useTranslation();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+  const filteredOptions = NETWORK_CHOICES.filter((a) => a.i18n_label.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Access${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((access) => (
+              <FilterOption
+                key={access.key}
+                isChecked={appliedFilters?.includes(`${access.key}`) ? true : false}
+                onClick={() => handleUpdate(`${access.key}`)}
+                icon={<ProjectNetworkIcon iconKey={access.iconKey} />}
+                title={t(access.i18n_label)}
+              />
+            ))
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/dropdowns/filters/created-at.tsx b/apps/web/core/components/project/dropdowns/filters/created-at.tsx
new file mode 100644
index 0000000..4ce2bf0
--- /dev/null
+++ b/apps/web/core/components/project/dropdowns/filters/created-at.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+// plane constants
+import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@plane/constants";
+// components
+import { isInDateFormat } from "@plane/utils";
+import { DateFilterModal } from "@/components/core/filters/date-filter-modal";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+// helpers
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  searchQuery: string;
+};
+
+export const FilterCreatedDate = observer(function FilterCreatedDate(props: Props) {
+  const { appliedFilters, handleUpdate, searchQuery } = props;
+  // state
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+  // derived values
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+  const filteredOptions = PROJECT_CREATED_AT_FILTER_OPTIONS.filter((d) =>
+    d.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const isCustomDateSelected = () => {
+    const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
+    return isValidDateSelected.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Created date"
+        />
+      )}
+      <FilterHeader
+        title={`Created date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple={false}
+                />
+              ))}
+              <FilterOption
+                isChecked={isCustomDateSelected()}
+                onClick={handleCustomDate}
+                title="Custom"
+                multiple={false}
+              />
+            </>
+          ) : (
+            <p className="text-11 text-placeholder italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/dropdowns/filters/index.ts b/apps/web/core/components/project/dropdowns/filters/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/project/dropdowns/filters/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/project/dropdowns/filters/lead.tsx b/apps/web/core/components/project/dropdowns/filters/lead.tsx
new file mode 100644
index 0000000..b47ec8c
--- /dev/null
+++ b/apps/web/core/components/project/dropdowns/filters/lead.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterLead = observer(function FilterLead(props: Props) {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Lead${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`lead-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          alt={member.display_name}
+                          fallback={member.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(member.avatar_url)}
+                          size="xs"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/dropdowns/filters/member-list.tsx b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
new file mode 100644
index 0000000..5489554
--- /dev/null
+++ b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+import { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
+// plane ui
+import { CustomMenu } from "@plane/ui";
+// components
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
+interface IRoleOption {
+  value: string;
+  label: string;
+}
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (role: string) => void;
+  memberType: "project" | "workspace";
+};
+
+const PROJECT_ROLE_OPTIONS: IRoleOption[] = [
+  { value: String(EUserProjectRoles.ADMIN), label: "Admin" },
+  { value: String(EUserProjectRoles.MEMBER), label: "Member" },
+  { value: String(EUserProjectRoles.GUEST), label: "Guest" },
+];
+
+const WORKSPACE_ROLE_OPTIONS: IRoleOption[] = [
+  { value: String(EUserWorkspaceRoles.ADMIN), label: "Admin" },
+  { value: String(EUserWorkspaceRoles.MEMBER), label: "Member" },
+  { value: String(EUserWorkspaceRoles.GUEST), label: "Guest" },
+  { value: "suspended", label: "Suspended" },
+];
+
+// Role filter group component
+const RoleFilterGroup = observer(function RoleFilterGroup({
+  appliedFilters,
+  handleUpdate,
+  memberType,
+}: {
+  appliedFilters: string[] | null;
+  handleUpdate: (role: string) => void;
+  memberType: "project" | "workspace";
+}) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+  const roleOptions = memberType === "project" ? PROJECT_ROLE_OPTIONS : WORKSPACE_ROLE_OPTIONS;
+
+  return (
+    <div className="space-y-2">
+      <FilterHeader
+        title={`Roles${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={isExpanded}
+        handleIsPreviewEnabled={() => setIsExpanded(!isExpanded)}
+      />
+
+      {isExpanded && (
+        <div className="space-y-1">
+          {roleOptions.map((role) => {
+            const isSelected = appliedFilters?.includes(role.value) ?? false;
+            return (
+              <FilterOption
+                key={`role-${role.value}`}
+                isChecked={isSelected}
+                title={role.label}
+                onClick={() => handleUpdate(role.value)}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const MemberListFilters = observer(function MemberListFilters(props: Props) {
+  const { appliedFilters, handleUpdate, memberType } = props;
+
+  return (
+    <div className="space-y-4">
+      {/* Role Filter Group */}
+      <RoleFilterGroup appliedFilters={appliedFilters} handleUpdate={handleUpdate} memberType={memberType} />
+    </div>
+  );
+});
+
+// Dropdown component for member list filters
+export const MemberListFiltersDropdown = observer(function MemberListFiltersDropdown(props: Props) {
+  const { appliedFilters, handleUpdate, memberType } = props;
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  return (
+    <CustomMenu
+      customButton={
+        <div className="relative">
+          <Button variant="secondary" size="lg" className="flex items-center gap-2">
+            <span>Filters</span>
+            <ChevronDownOutline className="h-3 w-3" />
+          </Button>
+          {appliedFiltersCount > 0 && (
+            <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-accent-primary" />
+          )}
+        </div>
+      }
+      placement="bottom-start"
+    >
+      <MemberListFilters appliedFilters={appliedFilters} handleUpdate={handleUpdate} memberType={memberType} />
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/project/dropdowns/filters/members.tsx b/apps/web/core/components/project/dropdowns/filters/members.tsx
new file mode 100644
index 0000000..b13b7e3
--- /dev/null
+++ b/apps/web/core/components/project/dropdowns/filters/members.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import { sortBy } from "lodash-es";
+import { observer } from "mobx-react";
+// plane ui
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Loader } from "@plane/ui";
+// components
+import { getFileURL } from "@plane/utils";
+import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  memberIds: string[] | undefined;
+  searchQuery: string;
+};
+
+export const FilterMembers = observer(function FilterMembers(props: Props) {
+  const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
+  // states
+  const [itemsToRender, setItemsToRender] = useState(5);
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  // store hooks
+  const { getUserDetails } = useMember();
+  const { data: currentUser } = useUser();
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const sortedOptions = useMemo(() => {
+    const filteredOptions = (memberIds || []).filter((memberId) =>
+      getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return sortBy(filteredOptions, [
+      (memberId) => !(appliedFilters ?? []).includes(memberId),
+      (memberId) => memberId !== currentUser?.id,
+      (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+
+  const handleViewToggle = () => {
+    if (!sortedOptions) return;
+
+    if (itemsToRender === sortedOptions.length) setItemsToRender(5);
+    else setItemsToRender(sortedOptions.length);
+  };
+
+  return (
+    <>
+      <FilterHeader
+        title={`Members${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {sortedOptions ? (
+            sortedOptions.length > 0 ? (
+              <>
+                {sortedOptions.slice(0, itemsToRender).map((memberId) => {
+                  const member = getUserDetails(memberId);
+
+                  if (!member) return null;
+                  return (
+                    <FilterOption
+                      key={`member-${member.id}`}
+                      isChecked={appliedFilters?.includes(member.id) ? true : false}
+                      onClick={() => handleUpdate(member.id)}
+                      icon={
+                        <Avatar
+                          alt={member.display_name}
+                          fallback={member.display_name?.[0]?.toUpperCase()}
+                          src={getFileURL(member.avatar_url)}
+                          size="xs"
+                        />
+                      }
+                      title={currentUser?.id === member.id ? "You" : member?.display_name}
+                    />
+                  );
+                })}
+                {sortedOptions.length > 5 && (
+                  <button
+                    type="button"
+                    className="ml-8 text-11 font-medium text-accent-primary"
+                    onClick={handleViewToggle}
+                  >
+                    {itemsToRender === sortedOptions.length ? "View less" : "View all"}
+                  </button>
+                )}
+              </>
+            ) : (
+              <p className="text-11 text-placeholder italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/dropdowns/filters/root.tsx b/apps/web/core/components/project/dropdowns/filters/root.tsx
new file mode 100644
index 0000000..858dac6
--- /dev/null
+++ b/apps/web/core/components/project/dropdowns/filters/root.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TProjectDisplayFilters, TProjectFilters } from "@plane/types";
+// components
+import { FilterOption } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { FilterAccess } from "./access";
+import { FilterCreatedDate } from "./created-at";
+import { FilterLead } from "./lead";
+import { FilterMembers } from "./members";
+
+type Props = {
+  displayFilters: TProjectDisplayFilters;
+  filters: TProjectFilters;
+  handleFiltersUpdate: (key: keyof TProjectFilters, value: string | string[]) => void;
+  handleDisplayFiltersUpdate: (updatedDisplayProperties: Partial<TProjectDisplayFilters>) => void;
+  memberIds?: string[] | undefined;
+};
+
+export const ProjectFiltersSelection = observer(function ProjectFiltersSelection(props: Props) {
+  const { displayFilters, filters, handleFiltersUpdate, handleDisplayFiltersUpdate, memberIds } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+  // store
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchOutline className="text-placeholder" width={12} height={12} />
+          <input
+            type="text"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus={!isMobile}
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <CloseOutline className="text-tertiary" height={12} width={12} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
+        <div className="py-2">
+          <FilterOption
+            isChecked={!!displayFilters.my_projects}
+            onClick={() =>
+              handleDisplayFiltersUpdate({
+                my_projects: !displayFilters.my_projects,
+              })
+            }
+            title="My projects"
+          />
+        </div>
+
+        {/* access */}
+        <div className="py-2">
+          <FilterAccess
+            appliedFilters={filters.access ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("access", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* lead */}
+        <div className="py-2">
+          <FilterLead
+            appliedFilters={filters.lead ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("lead", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* members */}
+        <div className="py-2">
+          <FilterMembers
+            appliedFilters={filters.members ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("members", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+
+        {/* created date */}
+        <div className="py-2">
+          <FilterCreatedDate
+            appliedFilters={filters.created_at ?? null}
+            handleUpdate={(val) => handleFiltersUpdate("created_at", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/project/dropdowns/order-by.tsx b/apps/web/core/components/project/dropdowns/order-by.tsx
new file mode 100644
index 0000000..1a363d1
--- /dev/null
+++ b/apps/web/core/components/project/dropdowns/order-by.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { SortDescendingOutline, TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import { PROJECT_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { getButtonStyling } from "@plane/propel/button";
+import type { TProjectOrderByOptions } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+
+type Props = {
+  onChange: (value: TProjectOrderByOptions) => void;
+  value: TProjectOrderByOptions | undefined;
+  isMobile?: boolean;
+};
+
+const DISABLED_ORDERING_OPTIONS = ["sort_order"];
+
+export function ProjectOrderByDropdown(props: Props) {
+  const { onChange, value, isMobile = false } = props;
+  const { t } = useTranslation();
+
+  const orderByDetails = PROJECT_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
+
+  const isDescending = value?.[0] === "-";
+  const isOrderingDisabled = !!value && DISABLED_ORDERING_OPTIONS.includes(value);
+
+  return (
+    <CustomMenu
+      className={`${isMobile ? "flex w-full justify-center" : ""}`}
+      customButton={
+        <>
+          {isMobile ? (
+            <div className={getButtonStyling("secondary", "lg")}>
+              <SortDescendingOutline className="size-3.5 shrink-0" />
+              {orderByDetails && t(orderByDetails?.i18n_label)}
+            </div>
+          ) : (
+            <div className={getButtonStyling("secondary", "lg")}>
+              <SortDescendingOutline className="size-3.5 shrink-0" />
+              {orderByDetails && t(orderByDetails?.i18n_label)}
+            </div>
+          )}
+        </>
+      }
+      placement="bottom-end"
+      closeOnSelect
+    >
+      {PROJECT_ORDER_BY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() => {
+            if (isDescending)
+              onChange(option.key == "sort_order" ? option.key : (`-${option.key}` as TProjectOrderByOptions));
+            else onChange(option.key);
+          }}
+        >
+          {option && t(option?.i18n_label)}
+          {value?.includes(option.key) && <TickOutline className="h-3 w-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+      <hr className="my-2 border-subtle" />
+      <CustomMenu.MenuItem
+        className="flex items-center justify-between gap-2"
+        onClick={() => {
+          if (isDescending) onChange(value.slice(1) as TProjectOrderByOptions);
+        }}
+        disabled={isOrderingDisabled}
+      >
+        Ascending
+        {!isOrderingDisabled && !isDescending && <TickOutline className="h-3 w-3" />}
+      </CustomMenu.MenuItem>
+      <CustomMenu.MenuItem
+        className="flex items-center justify-between gap-2"
+        onClick={() => {
+          if (!isDescending) onChange(`-${value}` as TProjectOrderByOptions);
+        }}
+        disabled={isOrderingDisabled}
+      >
+        Descending
+        {!isOrderingDisabled && isDescending && <TickOutline className="h-3 w-3" />}
+      </CustomMenu.MenuItem>
+    </CustomMenu>
+  );
+}
diff --git a/apps/web/core/components/project/empty-state.tsx b/apps/web/core/components/project/empty-state.tsx
new file mode 100644
index 0000000..4e4bce8
--- /dev/null
+++ b/apps/web/core/components/project/empty-state.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// ui
+import { Button } from "@plane/propel/button";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image: any;
+  primaryButton?: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  secondaryButton?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export function EmptyState({ title, description, image, primaryButton, secondaryButton, disabled = false }: Props) {
+  return (
+    <div className="flex h-full w-full items-center justify-center px-5 md:px-10 lg:p-20">
+      <div className="relative h-full w-full max-w-6xl">
+        <img src={image} className="w-52 object-cover sm:w-60" alt={primaryButton?.text ?? ""} />
+      </div>
+      <div className="absolute flex w-full flex-col items-center pt-[30vh] text-center md:pt-[35vh] lg:pt-[45vh]">
+        <h6 className="mt-6 text-18 font-semibold">{title}</h6>
+        {description && <p className="mb-7 text-tertiary">{description}</p>}
+        <div className="flex items-center gap-4">
+          {primaryButton && (
+            <Button
+              size="xl"
+              variant="primary"
+              prependIcon={primaryButton.icon}
+              onClick={primaryButton.onClick}
+              disabled={disabled}
+            >
+              {primaryButton.text}
+            </Button>
+          )}
+          {secondaryButton}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/project/filters.tsx b/apps/web/core/components/project/filters.tsx
new file mode 100644
index 0000000..b03ad47
--- /dev/null
+++ b/apps/web/core/components/project/filters.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { FilterOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TProjectFilters } from "@plane/types";
+import { cn, calculateTotalFilters } from "@plane/utils";
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectFilter } from "@/hooks/store/use-project-filter";
+// local imports
+import { ProjectFiltersSelection } from "./dropdowns/filters";
+import { ProjectOrderByDropdown } from "./dropdowns/order-by";
+
+type Props = {
+  filterMenuButton?: React.ReactNode;
+  classname?: string;
+  filterClassname?: string;
+  isMobile?: boolean;
+};
+
+const HeaderFilters = observer(function HeaderFilters({
+  filterMenuButton,
+  isMobile,
+  classname = "",
+  filterClassname = "",
+}: Props) {
+  // i18n
+  const { t } = useTranslation();
+  // router
+  const { workspaceSlug } = useParams();
+  const {
+    currentWorkspaceDisplayFilters: displayFilters,
+    currentWorkspaceFilters: filters,
+    updateFilters,
+    updateDisplayFilters,
+  } = useProjectFilter();
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+  const handleFilters = useCallback(
+    (key: keyof TProjectFilters, value: string | string[]) => {
+      if (!workspaceSlug) return;
+      let newValues = filters?.[key] ?? [];
+      if (Array.isArray(value)) {
+        if (key === "created_at" && newValues.find((v) => v.includes("custom"))) newValues = [];
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      } else {
+        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else {
+          if (key === "created_at") newValues = [value];
+          else newValues.push(value);
+        }
+      }
+
+      updateFilters(workspaceSlug.toString(), { [key]: newValues });
+    },
+    [filters, updateFilters, workspaceSlug]
+  );
+  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
+
+  return (
+    <div className={cn("flex gap-3", classname)}>
+      <ProjectOrderByDropdown
+        value={displayFilters?.order_by}
+        onChange={(val) => {
+          if (!workspaceSlug || val === displayFilters?.order_by) return;
+          updateDisplayFilters(workspaceSlug.toString(), {
+            order_by: val,
+          });
+        }}
+        isMobile={isMobile}
+      />
+      <div className={cn(filterClassname)}>
+        <FiltersDropdown
+          icon={<FilterOutline className="h-3 w-3" />}
+          title={t("common.filters")}
+          placement="bottom-end"
+          isFiltersApplied={isFiltersApplied}
+          menuButton={filterMenuButton || null}
+        >
+          <ProjectFiltersSelection
+            displayFilters={displayFilters ?? {}}
+            filters={filters ?? {}}
+            handleFiltersUpdate={handleFilters}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!workspaceSlug) return;
+              updateDisplayFilters(workspaceSlug.toString(), val);
+            }}
+            memberIds={workspaceMemberIds ?? undefined}
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
+export default HeaderFilters;
diff --git a/apps/web/core/components/project/form-loader.tsx b/apps/web/core/components/project/form-loader.tsx
new file mode 100644
index 0000000..a78d4d1
--- /dev/null
+++ b/apps/web/core/components/project/form-loader.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components
+import { Loader } from "@plane/ui";
+
+export function ProjectDetailsFormLoader() {
+  return (
+    <>
+      <div className="relative mt-6 h-44 w-full">
+        <Loader>
+          <Loader.Item height="auto" width="46px" />
+        </Loader>
+        <div className="absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
+          <div className="flex flex-grow gap-3 truncate">
+            <div className="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-surface-2">
+              <Loader>
+                <Loader.Item height="46px" width="46px" />
+              </Loader>
+            </div>
+          </div>
+          <div className="flex flex-shrink-0 justify-center">
+            <Loader>
+              <Loader.Item height="32px" width="108px" />
+            </Loader>
+          </div>
+        </div>
+      </div>
+      <div className="my-8 flex flex-col gap-8">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13">Project name</h4>
+          <Loader>
+            <Loader.Item height="46px" width="100%" />
+          </Loader>
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13">Description</h4>
+          <Loader className="w-full">
+            <Loader.Item height="102px" width="full" />
+          </Loader>
+        </div>
+        <div className="flex w-full items-center justify-between gap-10">
+          <div className="flex w-1/2 flex-col gap-1">
+            <h4 className="text-13">Identifier</h4>
+            <Loader>
+              <Loader.Item height="36px" width="100%" />
+            </Loader>
+          </div>
+          <div className="flex w-1/2 flex-col gap-1">
+            <h4 className="text-13">Network</h4>
+            <Loader className="w-full">
+              <Loader.Item height="46px" width="100%" />
+            </Loader>
+          </div>
+        </div>
+        <div className="flex items-center justify-between py-2">
+          <Loader className="mt-2 w-full">
+            <Loader.Item height="34px" width="100px" />
+          </Loader>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
new file mode 100644
index 0000000..e5aaab4
--- /dev/null
+++ b/apps/web/core/components/project/form.tsx
@@ -0,0 +1,466 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { InfoOutline, LockOutline } from "@makeplane/propel/icons";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { NETWORK_CHOICES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { EFileAssetType } from "@plane/types";
+import type { IProject, IWorkspace } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+import { renderFormattedDate } from "@plane/utils";
+import { CoverImage } from "@/components/common/cover-image";
+import { ImagePickerPopover } from "@/components/core/image-picker-popover";
+import { TimezoneSelect } from "@/components/global";
+// helpers
+import { handleCoverImageChange } from "@/helpers/cover-image.helper";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// services
+import { ProjectService } from "@/services/project";
+// local imports
+import { ProjectNetworkIcon } from "./project-network-icon";
+
+export interface IProjectDetailsForm {
+  project: IProject;
+  workspaceSlug: string;
+  projectId: string;
+  isAdmin: boolean;
+}
+const projectService = new ProjectService();
+
+export function ProjectDetailsForm(props: IProjectDetailsForm) {
+  const { project, workspaceSlug, projectId, isAdmin } = props;
+  const { t } = useTranslation();
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  // store hooks
+  const { updateProject } = useProject();
+  const { isMobile } = usePlatformOS();
+
+  // form info
+  const {
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    setError,
+    reset,
+    formState: { errors },
+    getValues,
+  } = useForm<IProject>({
+    defaultValues: {
+      ...project,
+      workspace: (project.workspace as IWorkspace).id,
+    },
+  });
+  // derived values
+  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
+  const coverImage = watch("cover_image_url");
+
+  useEffect(() => {
+    if (project && projectId !== getValues("id")) {
+      reset({
+        ...project,
+        workspace: (project.workspace as IWorkspace).id,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [project, projectId]);
+
+  // handlers
+  const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
+    const formattedValue = alphanumericValue.toUpperCase();
+    setValue("identifier", formattedValue);
+  };
+
+  const handleUpdateChange = async (payload: Partial<IProject>) => {
+    if (!workspaceSlug || !project) return;
+    return updateProject(workspaceSlug.toString(), project.id, payload)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("toast.success"),
+          message: t("project_settings.general.toast.success"),
+        });
+      })
+      .catch((err) => {
+        try {
+          // Handle the new error format where codes are nested in arrays under field names
+          const errorData = err ?? {};
+
+          const nameError = errorData.name?.includes("PROJECT_NAME_ALREADY_EXIST");
+          const identifierError = errorData?.identifier?.includes("PROJECT_IDENTIFIER_ALREADY_EXIST");
+          const nameSpecialCharError = errorData?.name?.includes("PROJECT_NAME_CANNOT_CONTAIN_SPECIAL_CHARACTERS");
+
+          if (nameError || identifierError || nameSpecialCharError) {
+            if (nameError) {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: t("toast.error"),
+                message: t("project_name_already_taken"),
+              });
+            }
+
+            if (identifierError) {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: t("toast.error"),
+                message: t("project_identifier_already_taken"),
+              });
+            }
+
+            if (nameSpecialCharError) {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: t("toast.error"),
+                message: t("project_name_cannot_contain_special_characters"),
+              });
+            }
+          } else {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: t("toast.error"),
+              message: t("something_went_wrong"),
+            });
+          }
+        } catch (error) {
+          // Fallback error handling if the error processing fails
+          console.error("Error processing API error:", error);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("something_went_wrong"),
+          });
+        }
+      });
+  };
+
+  const onSubmit = async (formData: IProject) => {
+    if (!workspaceSlug) return;
+    setIsLoading(true);
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+
+      logo_props: formData.logo_props,
+      timezone: formData.timezone,
+    };
+
+    // Handle cover image changes
+    try {
+      const coverImagePayload = await handleCoverImageChange(project.cover_image_url, formData.cover_image_url, {
+        workspaceSlug: workspaceSlug.toString(),
+        entityIdentifier: project.id,
+        entityType: EFileAssetType.PROJECT_COVER,
+        isUserAsset: false,
+      });
+
+      if (coverImagePayload) {
+        Object.assign(payload, coverImagePayload);
+      }
+    } catch (error) {
+      console.error("Error handling cover image:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: error instanceof Error ? error.message : "Failed to process cover image",
+      });
+      setIsLoading(false);
+      return;
+    }
+
+    if (project.identifier !== formData.identifier)
+      await projectService
+        .checkProjectIdentifierAvailability(workspaceSlug, payload.identifier ?? "")
+        .then(async (res) => {
+          if (res.exists) setError("identifier", { message: t("common.identifier_already_exists") });
+          else await handleUpdateChange(payload);
+        });
+    else await handleUpdateChange(payload);
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 300);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="relative h-44 w-full">
+        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
+        <CoverImage src={coverImage} alt="Project cover image" className="h-44 w-full rounded-md" />
+        <div className="absolute bottom-4 z-5 flex w-full items-end justify-between gap-3 px-4">
+          <div className="flex flex-grow gap-3 truncate">
+            <Controller
+              control={control}
+              name="logo_props"
+              render={({ field: { value, onChange } }) => (
+                <EmojiPicker
+                  iconType="material"
+                  closeOnSelect={false}
+                  isOpen={isOpen}
+                  handleToggle={(val: boolean) => setIsOpen(val)}
+                  className="flex items-center justify-center"
+                  buttonClassName="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-white/10"
+                  label={<Logo logo={value} size={28} />}
+                  // TODO: fix types
+                  onChange={(val: any) => {
+                    let logoValue = {};
+
+                    if (val?.type === "emoji")
+                      logoValue = {
+                        value: val.value,
+                      };
+                    else if (val?.type === "icon") logoValue = val.value;
+
+                    onChange({
+                      in_use: val?.type,
+                      [val?.type]: logoValue,
+                    });
+                    setIsOpen(false);
+                  }}
+                  defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined}
+                  defaultOpen={
+                    value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+                  }
+                  disabled={!isAdmin}
+                />
+              )}
+            />
+            <div className="flex flex-col gap-1 truncate text-on-color">
+              <span className="truncate text-16 font-semibold">{watch("name")}</span>
+              <span className="flex items-center gap-2 text-13">
+                <span>{watch("identifier")} .</span>
+                <span className="flex items-center gap-1.5">
+                  {project.network === 0 && <LockOutline className="h-2.5 w-2.5 text-on-color" />}
+                  {currentNetwork && t(currentNetwork?.i18n_label)}
+                </span>
+              </span>
+            </div>
+          </div>
+          <div className="flex flex-shrink-0 justify-center">
+            <div>
+              <Controller
+                control={control}
+                name="cover_image_url"
+                render={({ field: { value, onChange } }) => (
+                  <ImagePickerPopover
+                    label={t("change_cover")}
+                    control={control}
+                    onChange={onChange}
+                    value={value ?? null}
+                    disabled={!isAdmin}
+                    projectId={project.id}
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mt-8 flex flex-col gap-8">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13">{t("common.project_name")}</h4>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: t("name_is_required"),
+              maxLength: {
+                value: 255,
+                message: "Project name should be less than 255 characters",
+              },
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="name" invalid={Boolean(errors.name)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="name"
+                    name="name"
+                    type="text"
+                    ref={ref}
+                    value={value}
+                    onChange={onChange}
+                    placeholder={t("common.project_name")}
+                    disabled={!isAdmin}
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+          <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13">{t("description")}</h4>
+          <Controller
+            name="description"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <Field name="description" invalid={Boolean(errors?.description)} disabled={!isAdmin}>
+                <TextAreaGroup resize="none">
+                  <TextArea
+                    size="lg"
+                    surface="field"
+                    autoResize
+                    maxRows={8}
+                    id="description"
+                    name="description"
+                    value={value}
+                    placeholder={t("project_description_placeholder")}
+                    onChange={onChange}
+                  />
+                </TextAreaGroup>
+              </Field>
+            )}
+          />
+        </div>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          <div className="flex flex-col gap-1">
+            <h4 className="text-13">Project ID</h4>
+            <div className="relative">
+              <Controller
+                control={control}
+                name="identifier"
+                rules={{
+                  required: t("project_id_is_required"),
+                  validate: (value) => /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) || t("project_id_allowed_char"),
+                  minLength: {
+                    value: 1,
+                    message: t("project_id_min_char"),
+                  },
+                  maxLength: {
+                    value: 10,
+                    message: t("project_id_max_char"),
+                  },
+                }}
+                render={({ field: { value, ref } }) => (
+                  <Field name="identifier" invalid={Boolean(errors.identifier)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="identifier"
+                        name="identifier"
+                        type="text"
+                        value={value}
+                        onChange={handleIdentifierChange}
+                        ref={ref}
+                        placeholder={t("project_settings.general.enter_project_id")}
+                        disabled={!isAdmin}
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+              <Tooltip
+                label={t("project_id_tooltip_content")}
+                layout="stacked"
+                side="right"
+                align="start"
+                disabled={isMobile}
+              >
+                <InfoOutline className="absolute top-2.5 right-2 h-4 w-4 text-placeholder" />
+              </Tooltip>
+            </div>
+            <span className="text-11 text-danger-primary">
+              <>{errors?.identifier?.message}</>
+            </span>
+          </div>
+          <div className="flex flex-col gap-1">
+            <h4 className="text-13">{t("workspace_projects.network.label")}</h4>
+            <Controller
+              name="network"
+              control={control}
+              render={({ field: { value, onChange } }) => {
+                const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === value);
+                return (
+                  <CustomSelect
+                    value={value}
+                    onChange={onChange}
+                    label={
+                      <div className="flex items-center gap-1">
+                        {selectedNetwork ? (
+                          <>
+                            <ProjectNetworkIcon iconKey={selectedNetwork.iconKey} className="h-3.5 w-3.5" />
+                            {t(selectedNetwork.i18n_label)}
+                          </>
+                        ) : (
+                          <span className="text-placeholder">{t("select_network")}</span>
+                        )}
+                      </div>
+                    }
+                    buttonClassName="!border-subtle !shadow-none font-medium rounded-md"
+                    input
+                    disabled={!isAdmin}
+                    // optionsClassName="w-full"
+                  >
+                    {NETWORK_CHOICES.map((network) => (
+                      <CustomSelect.Option key={network.key} value={network.key}>
+                        <div className="flex items-start gap-2">
+                          <ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
+                          <div className="-mt-1">
+                            <p>{t(network.i18n_label)}</p>
+                            <p className="text-11 text-placeholder">{t(network.description)}</p>
+                          </div>
+                        </div>
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                );
+              }}
+            />
+          </div>
+          <div className="col-span-1 flex flex-col gap-1 sm:col-span-2 xl:col-span-1">
+            <h4 className="text-13">{t("common.project_timezone")}</h4>
+            <Controller
+              name="timezone"
+              control={control}
+              rules={{ required: t("project_settings.general.please_select_a_timezone") }}
+              render={({ field: { value, onChange } }) => (
+                <>
+                  <TimezoneSelect
+                    value={value}
+                    onChange={(value: string) => {
+                      onChange(value);
+                    }}
+                    error={Boolean(errors.timezone)}
+                    buttonClassName="!border-subtle !shadow-none font-medium rounded-md"
+                    disabled={!isAdmin}
+                  />
+                </>
+              )}
+            />
+            {errors.timezone && <span className="text-11 text-danger-primary">{errors.timezone.message}</span>}
+          </div>
+        </div>
+        <div className="flex items-center justify-between py-2">
+          <>
+            <Button variant="primary" size="lg" type="submit" loading={isLoading} disabled={!isAdmin}>
+              {isLoading ? t("updating") : t("common.update_project")}
+            </Button>
+            <span className="text-13 text-placeholder italic">
+              {t("common.created_on")} {renderFormattedDate(project?.created_at)}
+            </span>
+          </>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/apps/web/core/components/project/header.tsx b/apps/web/core/components/project/header.tsx
new file mode 100644
index 0000000..15503bd
--- /dev/null
+++ b/apps/web/core/components/project/header.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+// i18n
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Button } from "@plane/propel/button";
+import { ProjectsOutline } from "@makeplane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web constants
+// components
+import HeaderFilters from "./filters";
+import { ProjectSearch } from "./search-projects";
+
+export const ProjectsBaseHeader = observer(function ProjectsBaseHeader() {
+  // i18n
+  const { t } = useTranslation();
+  // store hooks
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+
+  const pathname = usePathname();
+  // auth
+  const isAuthorizedUser = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const isArchived = pathname.includes("/archives");
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={t("workspace_projects.label", { count: 2 })}
+                icon={<ProjectsOutline className="h-4 w-4 text-tertiary" />}
+              />
+            }
+          />
+          {isArchived && <Breadcrumbs.Item component={<BreadcrumbLink label="Archived" />} />}
+        </Breadcrumbs>
+      </Header.LeftItem>
+      <Header.RightItem>
+        <ProjectSearch />
+        <div className="hidden md:flex">
+          <HeaderFilters />
+        </div>
+        {isAuthorizedUser && !isArchived ? (
+          <Button
+            variant="primary"
+            size="lg"
+            onClick={() => {
+              toggleCreateProjectModal(true);
+            }}
+            className="items-center gap-1"
+          >
+            <span className="hidden sm:inline-block">{t("workspace_projects.create.label")}</span>
+            <span className="inline-block sm:hidden">{t("workspace_projects.label", { count: 1 })}</span>
+          </Button>
+        ) : (
+          <></>
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});
diff --git a/apps/web/core/components/project/integration-card.tsx b/apps/web/core/components/project/integration-card.tsx
new file mode 100644
index 0000000..e4cd4e0
--- /dev/null
+++ b/apps/web/core/components/project/integration-card.tsx
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useParams } from "next/navigation";
+import useSWR, { mutate } from "swr";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspaceIntegration } from "@plane/types";
+// assets
+import GithubLogo from "@/app/assets/logos/github-square.png?url";
+import SlackLogo from "@/app/assets/services/slack.png?url";
+// components
+import { SelectChannel } from "@/components/integration/slack/select-channel";
+import { SelectRepository } from "@/components/integration/github/select-repository";
+// constants
+import { PROJECT_GITHUB_REPOSITORY } from "@plane/constants";
+// services
+import { ProjectService } from "@/services/project";
+
+type Props = {
+  integration: IWorkspaceIntegration;
+};
+
+const integrationDetails: { [key: string]: any } = {
+  github: {
+    logo: GithubLogo,
+    description: "Select GitHub repository to enable sync.",
+  },
+  slack: {
+    logo: SlackLogo,
+    description: "Get regular updates and control which notification you want to receive.",
+  },
+};
+
+// services
+const projectService = new ProjectService();
+
+export function IntegrationCard({ integration }: Props) {
+  const { workspaceSlug, projectId } = useParams();
+
+  const { data: syncedGithubRepository } = useSWR(projectId ? PROJECT_GITHUB_REPOSITORY(projectId) : null, () =>
+    workspaceSlug && projectId && integration
+      ? projectService.getProjectGithubRepository(workspaceSlug, projectId, integration.id)
+      : null
+  );
+
+  const handleChange = (repo: any) => {
+    if (!workspaceSlug || !projectId || !integration) return;
+
+    const {
+      html_url,
+      owner: { login },
+      id,
+      name,
+    } = repo;
+
+    projectService
+      .syncGithubRepository(workspaceSlug, projectId, integration.id, {
+        name,
+        owner: login,
+        repository_id: id,
+        url: html_url,
+      })
+      .then(() => {
+        mutate(PROJECT_GITHUB_REPOSITORY(projectId));
+
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: `${login}/${name} repository synced with the project successfully.`,
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Repository could not be synced with the project. Please try again.",
+        });
+      });
+  };
+
+  return (
+    <>
+      {integration && (
+        <div className="flex items-center justify-between gap-2 border-b border-subtle bg-surface-1 px-4 py-6">
+          <div className="flex items-start gap-4">
+            <div className="h-10 w-10 flex-shrink-0">
+              <img
+                src={integrationDetails[integration.integration_detail.provider].logo}
+                className="h-full w-full object-cover"
+                alt={`${integration.integration_detail.title} Logo`}
+              />
+            </div>
+            <div>
+              <h3 className="flex items-center gap-4 text-13 font-medium">{integration.integration_detail.title}</h3>
+              <p className="text-13 tracking-tight text-secondary">
+                {integrationDetails[integration.integration_detail.provider].description}
+              </p>
+            </div>
+          </div>
+          {integration.integration_detail.provider === "github" && (
+            <SelectRepository
+              integration={integration}
+              value={
+                syncedGithubRepository && syncedGithubRepository.length > 0
+                  ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                  : null
+              }
+              label={
+                syncedGithubRepository && syncedGithubRepository.length > 0
+                  ? `${syncedGithubRepository[0].repo_detail.owner}/${syncedGithubRepository[0].repo_detail.name}`
+                  : "Select Repository"
+              }
+              onChange={handleChange}
+            />
+          )}
+          {integration.integration_detail.provider === "slack" && <SelectChannel integration={integration} />}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/project/join-project-modal.tsx b/apps/web/core/components/project/join-project-modal.tsx
new file mode 100644
index 0000000..8d10884
--- /dev/null
+++ b/apps/web/core/components/project/join-project-modal.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// types
+import { Button } from "@plane/propel/button";
+import type { IProject } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+// type
+type TJoinProjectModalProps = {
+  isOpen: boolean;
+  workspaceSlug: string;
+  project: IProject;
+  handleClose: () => void;
+};
+
+export function JoinProjectModal(props: TJoinProjectModalProps) {
+  const { handleClose, isOpen, project, workspaceSlug } = props;
+  // states
+  const [isJoiningLoading, setIsJoiningLoading] = useState(false);
+  // store hooks
+  const { joinProject } = useUserPermissions();
+  // router
+  const router = useAppRouter();
+
+  const handleJoin = async () => {
+    setIsJoiningLoading(true);
+
+    await joinProject(workspaceSlug, project.id)
+      .then(() => {
+        router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
+        handleClose();
+        return;
+      })
+      .catch(() => {
+        console.error("Error joining project");
+      })
+      .finally(() => {
+        setIsJoiningLoading(false);
+      });
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XL}>
+      <div className="space-y-5 px-5 py-8 sm:p-6">
+        <h3 className="text-16 leading-6 font-medium text-primary">Join Project?</h3>
+        <p>
+          Are you sure you want to join the project <span className="font-semibold break-words">{project?.name}</span>?
+          Please click the 'Join Project' button below to continue.
+        </p>
+        <div className="space-y-3" />
+      </div>
+      <div className="mt-5 flex justify-end gap-2 px-5 pb-8 sm:px-6 sm:pb-6">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" size="lg" tabIndex={1} type="submit" onClick={handleJoin} loading={isJoiningLoading}>
+          {isJoiningLoading ? "Joining..." : "Join Project"}
+        </Button>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/project/leave-project-modal.tsx b/apps/web/core/components/project/leave-project-modal.tsx
new file mode 100644
index 0000000..addd3c3
--- /dev/null
+++ b/apps/web/core/components/project/leave-project-modal.tsx
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+import { WarningTriangleOutline } from "@makeplane/propel/icons";
+// Plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IProject } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type FormData = {
+  projectName: string;
+  confirmLeave: string;
+};
+
+const defaultValues: FormData = {
+  projectName: "",
+  confirmLeave: "",
+};
+
+export interface ILeaveProjectModal {
+  project: IProject;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILeaveProjectModal) {
+  const { project, isOpen, onClose } = props;
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { leaveProject } = useUserPermissions();
+
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm({ defaultValues });
+
+  const handleClose = () => {
+    reset({ ...defaultValues });
+    onClose();
+  };
+
+  const onSubmit = async (data: any) => {
+    if (!workspaceSlug) return;
+
+    if (data) {
+      if (data.projectName === project?.name) {
+        if (data.confirmLeave === "Leave Project") {
+          router.push(`/${workspaceSlug}/projects`);
+          return leaveProject(workspaceSlug.toString(), project.id)
+            .then(() => {
+              handleClose();
+            })
+            .catch((_err) => {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: "Error!",
+                message: "Something went wrong please try again later.",
+              });
+            });
+        } else {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "Please confirm leaving the project by typing the 'Leave Project'.",
+          });
+        }
+      } else {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Please enter the project name as shown in the description.",
+        });
+      }
+    } else {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Please fill all fields.",
+      });
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
+        <div className="flex w-full items-center justify-start gap-6">
+          <span className="place-items-center rounded-full bg-danger-subtle p-4">
+            <WarningTriangleOutline className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </span>
+          <span className="flex items-center justify-start">
+            <h3 className="text-18 font-medium 2xl:text-20">Leave Project</h3>
+          </span>
+        </div>
+
+        <span>
+          <p className="text-13 leading-7 text-secondary">
+            Are you sure you want to leave the project -
+            <span className="font-medium text-primary">{` "${project?.name}" `}</span>? All of the work items associated
+            with you will become inaccessible.
+          </p>
+        </span>
+
+        <div className="text-secondary">
+          <p className="text-13 break-words">
+            Enter the project name <span className="font-medium text-primary">{project?.name}</span> to continue:
+          </p>
+          <Controller
+            control={control}
+            name="projectName"
+            rules={{
+              required: "Label title is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="projectName" invalid={Boolean(errors.projectName)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="projectName"
+                    name="projectName"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    placeholder="Enter project name"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </div>
+
+        <div className="text-secondary">
+          <p className="text-13">
+            To confirm, type <span className="font-medium text-primary">Leave Project</span> below:
+          </p>
+          <Controller
+            control={control}
+            name="confirmLeave"
+            render={({ field: { value, onChange, ref } }) => (
+              <Field name="confirmLeave" invalid={Boolean(errors.confirmLeave)}>
+                <InputGroup size="2xl">
+                  <Input
+                    size="2xl"
+                    id="confirmLeave"
+                    name="confirmLeave"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    placeholder="Enter 'leave project'"
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="error-fill" size="lg" type="submit" loading={isSubmitting}>
+            {isSubmitting ? "Leaving..." : "Leave Project"}
+          </Button>
+        </div>
+      </form>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/project/member-header-column.tsx b/apps/web/core/components/project/member-header-column.tsx
new file mode 100644
index 0000000..d333fe8
--- /dev/null
+++ b/apps/web/core/components/project/member-header-column.tsx
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// ui
+import { observer } from "mobx-react";
+import { Eraser } from "lucide-react";
+import {
+  ArrowNarrowRightOutline,
+  ChevronDownOutline,
+  SortAscendingOutline,
+  SortDescendingOutline,
+  TickOutline,
+} from "@makeplane/propel/icons";
+// constants
+import type { IProjectMemberDisplayProperties, TMemberOrderByOptions } from "@plane/constants";
+import { MEMBER_PROPERTY_DETAILS } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import { CustomMenu } from "@plane/ui";
+import type { IMemberFilters } from "@/store/member/utils";
+
+interface Props {
+  property: keyof IProjectMemberDisplayProperties;
+  displayFilters?: IMemberFilters;
+  handleDisplayFilterUpdate: (data: Partial<IMemberFilters>) => void;
+}
+
+export const MemberHeaderColumn = observer(function MemberHeaderColumn(props: Props) {
+  const { displayFilters, handleDisplayFilterUpdate, property } = props;
+  // i18n
+  const { t } = useTranslation();
+
+  const propertyDetails = MEMBER_PROPERTY_DETAILS[property];
+
+  const activeSortingProperty = displayFilters?.order_by;
+
+  const handleOrderBy = (order: TMemberOrderByOptions, _itemKey: keyof IProjectMemberDisplayProperties) => {
+    handleDisplayFilterUpdate({ order_by: order });
+  };
+
+  const handleClearSorting = () => {
+    handleDisplayFilterUpdate({ order_by: undefined });
+  };
+
+  if (!propertyDetails) return null;
+
+  return (
+    <CustomMenu
+      customButtonClassName="clickable !w-full"
+      customButtonTabIndex={-1}
+      className="!w-full"
+      customButton={
+        <div className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-13 text-secondary hover:text-primary">
+          <span>{t(propertyDetails.i18n_title)}</span>
+          <div className="ml-3 flex">
+            {(activeSortingProperty === propertyDetails.ascendingOrderKey ||
+              activeSortingProperty === propertyDetails.descendingOrderKey) && (
+              <div className="flex h-3.5 w-3.5 items-center justify-center rounded-full">
+                {propertyDetails.ascendingOrderKey === activeSortingProperty ? (
+                  <SortDescendingOutline className="h-3 w-3" />
+                ) : (
+                  <SortAscendingOutline className="h-3 w-3" />
+                )}
+              </div>
+            )}
+            <ChevronDownOutline className="h-3 w-3" aria-hidden="true" />
+          </div>
+        </div>
+      }
+      placement="bottom-end"
+      closeOnSelect
+    >
+      {propertyDetails.isSortingAllowed && (
+        <>
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
+            <div
+              className={`flex items-center justify-between gap-1.5 px-1 ${
+                activeSortingProperty === propertyDetails.ascendingOrderKey
+                  ? "text-primary"
+                  : "text-secondary hover:text-primary"
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <SortDescendingOutline className="h-3 w-3 stroke-[1.5]" />
+                <span>{propertyDetails.ascendingOrderTitle}</span>
+                <ArrowNarrowRightOutline className="h-3 w-3" />
+                <span>{propertyDetails.descendingOrderTitle}</span>
+              </div>
+              {activeSortingProperty === propertyDetails.ascendingOrderKey && <TickOutline className="h-3 w-3" />}
+            </div>
+          </CustomMenu.MenuItem>
+
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
+            <div
+              className={`flex items-center justify-between gap-1.5 px-1 ${
+                activeSortingProperty === propertyDetails.descendingOrderKey
+                  ? "text-primary"
+                  : "text-secondary hover:text-primary"
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <SortAscendingOutline className="h-3 w-3 stroke-[1.5]" />
+                <span>{propertyDetails.descendingOrderTitle}</span>
+                <ArrowNarrowRightOutline className="h-3 w-3" />
+                <span>{propertyDetails.ascendingOrderTitle}</span>
+              </div>
+              {activeSortingProperty === propertyDetails.descendingOrderKey && <TickOutline className="h-3 w-3" />}
+            </div>
+          </CustomMenu.MenuItem>
+
+          {(activeSortingProperty === propertyDetails.ascendingOrderKey ||
+            activeSortingProperty === propertyDetails.descendingOrderKey) && (
+            <CustomMenu.MenuItem className="mt-0.5" key={property} onClick={handleClearSorting}>
+              <div className="flex items-center gap-2 px-1">
+                <Eraser className="h-3 w-3" />
+                <span>{t("common.actions.clear_sorting")}</span>
+              </div>
+            </CustomMenu.MenuItem>
+          )}
+        </>
+      )}
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/project/member-list-item.tsx b/apps/web/core/components/project/member-list-item.tsx
new file mode 100644
index 0000000..1925690
--- /dev/null
+++ b/apps/web/core/components/project/member-list-item.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Table } from "@plane/ui";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web imports
+import { useProjectColumns } from "@/components/projects/settings/useProjectColumns";
+// store
+import type { IProjectMemberDetails } from "@/store/member/project/base-project-member.store";
+// local imports
+import { ConfirmProjectMemberRemove } from "./confirm-project-member-remove";
+
+type Props = {
+  memberDetails: (IProjectMemberDetails | null)[];
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const ProjectMemberListItem = observer(function ProjectMemberListItem(props: Props) {
+  const { memberDetails, projectId, workspaceSlug } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { leaveProject } = useUserPermissions();
+  const { data: currentUser } = useUser();
+  const {
+    project: { removeMemberFromProject },
+  } = useMember();
+  // helper hooks
+  const { columns, removeMemberModal, setRemoveMemberModal } = useProjectColumns({
+    projectId,
+    workspaceSlug,
+  });
+
+  const handleRemove = async (memberId: string) => {
+    if (!workspaceSlug || !projectId || !memberId) return;
+
+    if (memberId === currentUser?.id) {
+      await leaveProject(workspaceSlug.toString(), projectId.toString())
+        // oxlint-disable-next-line promise/always-return
+        .then(async () => {
+          router.push(`/${workspaceSlug}/projects`);
+        })
+        .catch((err) => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "You can’t leave this project yet.",
+            message: err?.error || "Something went wrong. Please try again.",
+          });
+        });
+    } else
+      await removeMemberFromProject(workspaceSlug.toString(), projectId.toString(), memberId).catch((err) =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "You can't remove the member from this project yet.",
+          message: err?.error || "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  if (!memberDetails) return null;
+  return (
+    <>
+      {removeMemberModal && (
+        <ConfirmProjectMemberRemove
+          isOpen={removeMemberModal !== null}
+          onClose={() => setRemoveMemberModal(null)}
+          data={{ id: removeMemberModal.member.id, display_name: removeMemberModal.member.display_name || "" }}
+          onSubmit={() => handleRemove(removeMemberModal.member.id)}
+        />
+      )}
+      <Table
+        columns={columns}
+        data={(memberDetails?.filter((member): member is IProjectMemberDetails => member !== null) ?? []) as any}
+        keyExtractor={(rowData) => rowData?.member.id ?? ""}
+        tHeadClassName="border-b border-subtle"
+        thClassName="text-left font-medium divide-x-0 text-placeholder"
+        tBodyClassName="divide-y-0"
+        tBodyTrClassName="divide-x-0 p-4 h-[40px] text-secondary"
+        tHeadTrClassName="divide-x-0"
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/member-list.tsx b/apps/web/core/components/project/member-list.tsx
new file mode 100644
index 0000000..d6c04a1
--- /dev/null
+++ b/apps/web/core/components/project/member-list.tsx
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+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";
+import { SearchOutline } from "@makeplane/propel/icons";
+// components
+import { MembersSettingsLoader } from "@/components/ui/loader/settings/members";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { MemberListFiltersDropdown } from "./dropdowns/filters/member-list";
+import { ProjectMemberListItem } from "./member-list-item";
+import { SendProjectInvitationModal } from "./send-project-invitation-modal";
+
+type TProjectMemberListProps = {
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const ProjectMemberList = observer(function ProjectMemberList(props: TProjectMemberListProps) {
+  const { projectId, workspaceSlug } = props;
+  // states
+  const [inviteModal, setInviteModal] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const {
+    project: { projectMemberIds, getFilteredProjectMemberDetails, filters },
+  } = useMember();
+  const { allowPermissions } = useUserPermissions();
+
+  const { t } = useTranslation();
+
+  const searchedProjectMembers = (projectMemberIds ?? []).filter((userId) => {
+    const memberDetails = projectId ? getFilteredProjectMemberDetails(userId, projectId.toString()) : null;
+
+    if (!memberDetails?.member || !memberDetails.original_role) return false;
+
+    const fullName = `${memberDetails?.member.first_name} ${memberDetails?.member.last_name}`.toLowerCase();
+    const displayName = memberDetails?.member.display_name.toLowerCase();
+
+    return displayName?.includes(searchQuery.toLowerCase()) || fullName.includes(searchQuery.toLowerCase());
+  });
+
+  const memberDetails = searchedProjectMembers?.map((memberId) =>
+    projectId ? getFilteredProjectMemberDetails(memberId, projectId.toString()) : null
+  );
+
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+
+  // Handler for role filter updates
+  const handleRoleFilterUpdate = (role: string) => {
+    if (projectId) {
+      const currentFilters = filters.getFilters(projectId);
+      const currentRoles = currentFilters?.roles || [];
+      const updatedRoles = currentRoles.includes(role)
+        ? currentRoles.filter((r) => r !== role)
+        : [...currentRoles, role];
+
+      filters.updateFilters(projectId, {
+        roles: updatedRoles.length > 0 ? updatedRoles : undefined,
+      });
+    }
+  };
+
+  // Get current role filters
+  const appliedRoleFilters = projectId ? filters.getFilters(projectId)?.roles || [] : [];
+
+  return (
+    <>
+      <SendProjectInvitationModal
+        isOpen={inviteModal}
+        onClose={() => setInviteModal(false)}
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+      />
+      <div className="flex items-center justify-between gap-4 overflow-x-hidden border-b border-subtle py-2">
+        <div className="text-14 font-semibold">{t("common.members")}</div>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center justify-start gap-1.5 rounded-md border border-subtle bg-surface-1 px-2 py-1">
+            <SearchOutline className="h-3.5 w-3.5" />
+            <input
+              className="w-full max-w-[234px] border-none bg-transparent text-13 placeholder:text-placeholder focus:outline-none"
+              placeholder="Search"
+              value={searchQuery}
+              autoFocus
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <MemberListFiltersDropdown
+            appliedFilters={appliedRoleFilters}
+            handleUpdate={handleRoleFilterUpdate}
+            memberType="project"
+          />
+          {isAdmin && (
+            <Button
+              variant="primary"
+              onClick={() => {
+                setInviteModal(true);
+              }}
+            >
+              {t("add_member")}
+            </Button>
+          )}
+        </div>
+      </div>
+      {!projectMemberIds ? (
+        <MembersSettingsLoader />
+      ) : (
+        <div className="divide-y divide-subtle overflow-scroll">
+          {searchedProjectMembers.length !== 0 && (
+            <ProjectMemberListItem
+              memberDetails={memberDetails ?? []}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+            />
+          )}
+          {searchedProjectMembers.length === 0 && (
+            <h4 className="mt-16 text-center text-13 text-placeholder">{t("no_matching_members")}</h4>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/member-select.tsx b/apps/web/core/components/project/member-select.tsx
new file mode 100644
index 0000000..d813297
--- /dev/null
+++ b/apps/web/core/components/project/member-select.tsx
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Ban } from "lucide-react";
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { EUserProjectRoles } from "@plane/types";
+// plane ui
+import { CustomSearchSelect } from "@plane/ui";
+// helpers
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+type Props = {
+  value: any;
+  onChange: (val: string) => void;
+  isDisabled?: boolean;
+};
+
+export const MemberSelect = observer(function MemberSelect(props: Props) {
+  const { value, onChange, isDisabled = false } = props;
+  // router
+  const { projectId } = useParams();
+  // store hooks
+  const {
+    project: { projectMemberIds, getProjectMemberDetails },
+  } = useMember();
+
+  const options = projectMemberIds
+    ?.map((userId) => {
+      const memberDetails = projectId ? getProjectMemberDetails(userId, projectId.toString()) : null;
+
+      if (!memberDetails?.member) return;
+      const isGuest = memberDetails.role === EUserProjectRoles.GUEST;
+      if (isGuest) return;
+
+      return {
+        value: `${memberDetails?.member.id}`,
+        query: `${memberDetails?.member.display_name}`,
+        content: (
+          <div className="flex items-center gap-2">
+            <Avatar
+              alt={memberDetails?.member.display_name}
+              fallback={memberDetails?.member.display_name?.[0]?.toUpperCase()}
+              src={getFileURL(memberDetails?.member.avatar_url)}
+              size="xs"
+            />
+            {memberDetails?.member.display_name}
+          </div>
+        ),
+      };
+    })
+    .filter((option) => !!option) as
+    | {
+        value: string;
+        query: string;
+        content: React.ReactNode;
+      }[]
+    | undefined;
+  const selectedOption = projectId ? getProjectMemberDetails(value, projectId.toString()) : null;
+
+  return (
+    <CustomSearchSelect
+      value={value}
+      label={
+        <div className="flex h-3.5 items-center gap-2">
+          {selectedOption && (
+            <Avatar
+              alt={selectedOption.member?.display_name}
+              fallback={selectedOption.member?.display_name?.[0]?.toUpperCase()}
+              src={getFileURL(selectedOption.member?.avatar_url)}
+              size="xs"
+            />
+          )}
+          {selectedOption ? (
+            selectedOption.member?.display_name
+          ) : (
+            <div className="flex items-center gap-2">
+              <Ban className="h-3.5 w-3.5 rotate-90 text-placeholder" />
+              <span className="text-13 text-placeholder">None</span>
+            </div>
+          )}
+        </div>
+      }
+      buttonClassName="!px-3 !py-2 bg-surface-1"
+      options={
+        options &&
+        options && [
+          ...options,
+          {
+            value: "none",
+            query: "none",
+            content: (
+              <div className="flex items-center gap-2">
+                <Ban className="h-3.5 w-3.5 rotate-90 text-placeholder" />
+                <span className="py-0.5 text-13 text-placeholder">None</span>
+              </div>
+            ),
+          },
+        ]
+      }
+      maxHeight="md"
+      onChange={onChange}
+      disabled={isDisabled}
+    />
+  );
+});
diff --git a/apps/web/core/components/project/multi-select-modal.tsx b/apps/web/core/components/project/multi-select-modal.tsx
new file mode 100644
index 0000000..ca0eeee
--- /dev/null
+++ b/apps/web/core/components/project/multi-select-modal.tsx
@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { xor } from "lodash-es";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+import { Combobox } from "@headlessui/react";
+// plane ui
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+import { Checkbox } from "@makeplane/propel/components/checkbox";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { cn } from "@plane/utils";
+// assets
+import darkProjectAsset from "@/app/assets/empty-state/search/project-dark.webp?url";
+import lightProjectAsset from "@/app/assets/empty-state/search/project-light.webp?url";
+// components
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedProjectIds: string[];
+  projectIds: string[];
+  onSubmit: (projectIds: string[]) => Promise<void>;
+};
+
+export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal(props: Props) {
+  const { isOpen, onClose, selectedProjectIds: selectedProjectIdsProp, projectIds, onSubmit } = props;
+  // states
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedProjectIds, setSelectedProjectIds] = useState<string[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  // refs
+  const moveButtonRef = useRef<HTMLButtonElement>(null);
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { getProjectById } = useProject();
+  // derived values
+  const projectDetailsMap = useMemo(
+    () => new Map(projectIds.map((id) => [id, getProjectById(id)])),
+    [projectIds, getProjectById]
+  );
+  const areSelectedProjectsChanged = xor(selectedProjectIds, selectedProjectIdsProp).length > 0;
+  const filteredProjectIds = projectIds.filter((id) => {
+    const project = projectDetailsMap.get(id);
+    const projectQuery = `${project?.identifier} ${project?.name}`.toLowerCase();
+    return projectQuery.includes(searchTerm.toLowerCase());
+  });
+  const filteredProjectResolvedPath = resolvedTheme === "light" ? lightProjectAsset : darkProjectAsset;
+
+  useEffect(() => {
+    if (isOpen) setSelectedProjectIds(selectedProjectIdsProp);
+  }, [isOpen, selectedProjectIdsProp]);
+
+  const handleClose = () => {
+    onClose();
+    setTimeout(() => {
+      setSearchTerm("");
+      setSelectedProjectIds([]);
+    }, 300);
+  };
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    await onSubmit(selectedProjectIds);
+    setIsSubmitting(false);
+    handleClose();
+  };
+
+  const handleSelectedProjectChange = (val: string[]) => {
+    setSelectedProjectIds(val);
+    setSearchTerm("");
+    moveButtonRef.current?.focus();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <ModalCore isOpen={isOpen} width={EModalWidth.LG} position={EModalPosition.TOP} handleClose={handleClose}>
+      <Combobox as="div" multiple value={selectedProjectIds} onChange={handleSelectedProjectChange}>
+        <div className="flex items-center gap-2 border-b border-subtle px-4">
+          <SearchOutline className="size-4 flex-shrink-0 text-placeholder" aria-hidden="true" />
+          <Combobox.Input
+            className="h-12 w-full border-0 bg-transparent text-13 text-primary outline-none placeholder:text-placeholder focus:ring-0"
+            placeholder="Search for projects"
+            displayValue={() => ""}
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+        {selectedProjectIds.length > 0 && (
+          <div className="flex flex-wrap gap-2 px-4 pt-2">
+            {selectedProjectIds.map((projectId) => {
+              const projectDetails = projectDetailsMap.get(projectId);
+              if (!projectDetails) return null;
+              return (
+                <div
+                  key={projectDetails.id}
+                  className="group flex cursor-pointer items-center gap-1.5 rounded-sm bg-surface-2 px-2 py-1"
+                  onClick={() => {
+                    handleSelectedProjectChange(selectedProjectIds.filter((id) => id !== projectDetails.id));
+                  }}
+                >
+                  <Logo logo={projectDetails.logo_props} size={14} />
+                  <p className="truncate text-11 text-tertiary transition-colors group-hover:text-secondary">
+                    {projectDetails.identifier}
+                  </p>
+                  <CloseOutline className="size-3 flex-shrink-0 text-placeholder transition-colors group-hover:text-secondary" />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <Combobox.Options
+          as="ul"
+          static
+          className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto py-2 transition-[height] duration-200 ease-in-out"
+        >
+          {filteredProjectIds.length === 0 ? (
+            <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
+              <SimpleEmptyState
+                title={t("workspace_projects.empty_state.filter.title")}
+                description={t("workspace_projects.empty_state.filter.description")}
+                assetPath={filteredProjectResolvedPath}
+              />
+            </div>
+          ) : (
+            <ul
+              className={cn("text-primary", {
+                "px-2": filteredProjectIds.length > 0,
+              })}
+            >
+              {filteredProjectIds.map((projectId) => {
+                const projectDetails = projectDetailsMap.get(projectId);
+                if (!projectDetails) return null;
+                const isProjectSelected = selectedProjectIds.includes(projectDetails.id);
+                return (
+                  <Combobox.Option
+                    as="li"
+                    key={projectDetails.id}
+                    value={projectDetails.id}
+                    className={({ active }) =>
+                      cn(
+                        "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-md p-2 text-secondary transition-colors select-none",
+                        {
+                          "bg-layer-1": active,
+                          "text-primary": isProjectSelected,
+                        }
+                      )
+                    }
+                  >
+                    <div className="flex items-center gap-2 truncate">
+                      <span className="flex flex-shrink-0 items-center gap-2.5">
+                        <span className="pointer-events-none">
+                          <Checkbox checked={isProjectSelected} aria-label={projectDetails.name} />
+                        </span>
+                        <Logo logo={projectDetails.logo_props} size={16} />
+                      </span>
+                      <span className="flex-shrink-0 text-10">{projectDetails.identifier}</span>
+                      <p className="truncate text-13">{projectDetails.name}</p>
+                    </div>
+                  </Combobox.Option>
+                );
+              })}
+            </ul>
+          )}
+        </Combobox.Options>
+      </Combobox>
+      <div className="flex items-center justify-end gap-2 border-t border-subtle p-3">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          {t("cancel")}
+        </Button>
+        <Button
+          ref={moveButtonRef}
+          variant="primary"
+          size="lg"
+          onClick={handleSubmit}
+          loading={isSubmitting}
+          disabled={!areSelectedProjectsChanged}
+        >
+          {isSubmitting ? t("confirming") : t("confirm")}
+        </Button>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/project/project-feature-update.tsx b/apps/web/core/components/project/project-feature-update.tsx
new file mode 100644
index 0000000..931f36b
--- /dev/null
+++ b/apps/web/core/components/project/project-feature-update.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { Row } from "@plane/ui";
+// components
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// plane web imports
+import { ProjectFeaturesList } from "@/components/project/settings/features-list";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string | null;
+  onClose: () => void;
+};
+
+export const ProjectFeatureUpdate = observer(function ProjectFeatureUpdate(props: Props) {
+  const { workspaceSlug, projectId, onClose } = props;
+  // store hooks
+  const { t } = useTranslation();
+  const { getProjectById } = useProject();
+
+  if (!workspaceSlug || !projectId) return null;
+  const currentProjectDetails = getProjectById(projectId);
+  if (!currentProjectDetails) return null;
+
+  return (
+    <>
+      <Row className="py-6">
+        <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
+      </Row>
+      <div className="mt-4 flex items-center justify-between gap-2 border-t border-subtle px-6 py-4">
+        <div className="flex gap-1 text-13 font-medium text-tertiary">
+          {t("congrats")}
+          <Logo logo={currentProjectDetails.logo_props} /> <p className="break-all">{currentProjectDetails.name}</p>{" "}
+          {t("created").toLowerCase()}.
+        </div>
+        <div className="flex gap-2">
+          {/* eslint-disable-next-line jsx-a11y/tabindex-no-positive */}
+          <Button variant="secondary" size="lg" onClick={onClose} tabIndex={1}>
+            {t("close")}
+          </Button>
+          <Link
+            href={`/${workspaceSlug}/projects/${projectId}/issues`}
+            onClick={onClose}
+            className={getButtonStyling("primary", "lg")}
+            // oxlint-disable-next-line jsx-a11y/tabindex-no-positive
+            tabIndex={2}
+          >
+            {t("open_project")}
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/project-network-icon.tsx b/apps/web/core/components/project/project-network-icon.tsx
new file mode 100644
index 0000000..a44ccbc
--- /dev/null
+++ b/apps/web/core/components/project/project-network-icon.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TNetworkChoiceIconKey } from "@plane/constants";
+// plane imports
+import { GlobeOutline, LockOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+
+type Props = {
+  iconKey: TNetworkChoiceIconKey;
+  className?: string;
+};
+
+export function ProjectNetworkIcon(props: Props) {
+  const { iconKey, className } = props;
+  // Get the icon key
+  const getProjectNetworkIcon = () => {
+    switch (iconKey) {
+      case "Lock":
+        return LockOutline;
+      case "Globe2":
+        return GlobeOutline;
+      default:
+        return null;
+    }
+  };
+
+  // Get the icon
+  const Icon = getProjectNetworkIcon();
+  if (!Icon) return null;
+
+  return <Icon className={cn("h-3 w-3", className)} />;
+}
diff --git a/apps/web/core/components/project/project-settings-member-defaults.tsx b/apps/web/core/components/project/project-settings-member-defaults.tsx
new file mode 100644
index 0000000..f15d6c0
--- /dev/null
+++ b/apps/web/core/components/project/project-settings-member-defaults.tsx
@@ -0,0 +1,203 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import useSWR from "swr";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IProject, IUserLite, IWorkspace } from "@plane/types";
+import { Switch } from "@makeplane/propel/components/switch";
+import { Loader } from "@plane/ui";
+// constants
+import { PROJECT_DETAILS } from "@plane/constants";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { MemberSelect } from "./member-select";
+
+const defaultValues: Partial<IProject> = {
+  project_lead: null,
+  default_assignee: null,
+};
+
+type TDefaultSettingItemProps = {
+  title: string;
+  description: string;
+  children: ReactNode;
+};
+
+function DefaultSettingItem({ title, description, children }: TDefaultSettingItemProps) {
+  return (
+    <div className="flex items-center justify-between gap-x-2">
+      <div className="flex flex-col gap-0.5">
+        <h4 className="text-13 font-medium">{title}</h4>
+        <p className="text-11 text-tertiary">{description}</p>
+      </div>
+      <div className="w-full max-w-48 sm:max-w-64">{children}</div>
+    </div>
+  );
+}
+
+type TProjectSettingsMemberDefaultsProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMemberDefaults(
+  props: TProjectSettingsMemberDefaultsProps
+) {
+  const { workspaceSlug, projectId } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+
+  const { currentProjectDetails, fetchProjectDetails, updateProject } = useProject();
+  // derived values
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    currentProjectDetails?.id
+  );
+  // form info
+  const { reset, control } = useForm<IProject>({ defaultValues });
+  // fetching user members
+  useSWR(
+    workspaceSlug && projectId ? PROJECT_DETAILS(workspaceSlug, projectId) : null,
+    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug, projectId) : null
+  );
+
+  useEffect(() => {
+    if (!currentProjectDetails) return;
+
+    reset({
+      ...currentProjectDetails,
+      default_assignee:
+        (currentProjectDetails.default_assignee as IUserLite)?.id ?? currentProjectDetails.default_assignee,
+      project_lead: (currentProjectDetails.project_lead as IUserLite)?.id ?? currentProjectDetails.project_lead,
+      workspace: (currentProjectDetails.workspace as IWorkspace).id,
+    });
+  }, [currentProjectDetails, reset]);
+
+  const submitChanges = async (formData: Partial<IProject>) => {
+    if (!workspaceSlug || !projectId) return;
+
+    reset({
+      ...currentProjectDetails,
+      default_assignee:
+        (currentProjectDetails?.default_assignee as IUserLite)?.id ?? currentProjectDetails?.default_assignee,
+      project_lead: (currentProjectDetails?.project_lead as IUserLite)?.id ?? currentProjectDetails?.project_lead,
+      ...formData,
+    });
+
+    await updateProject(workspaceSlug, projectId, {
+      default_assignee:
+        formData.default_assignee === "none"
+          ? null
+          : (formData.default_assignee ?? currentProjectDetails?.default_assignee),
+      project_lead:
+        formData.project_lead === "none" ? null : (formData.project_lead ?? currentProjectDetails?.project_lead),
+    })
+      .then(() => {
+        setToast({
+          title: `${t("success")}!`,
+          type: TOAST_TYPE.SUCCESS,
+          message: t("project_settings.general.toast.success"),
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  const toggleGuestViewAllIssues = async (value: boolean) => {
+    if (!workspaceSlug || !projectId) return;
+
+    updateProject(workspaceSlug, projectId, {
+      guest_view_all_features: value,
+    })
+      .then(() => {
+        setToast({
+          title: `${t("success")}!`,
+          type: TOAST_TYPE.SUCCESS,
+          message: t("project_settings.general.toast.success"),
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  return (
+    <div className="my-6 flex flex-col gap-y-6">
+      <DefaultSettingItem title="Project Lead" description="Select the project lead for the project.">
+        {currentProjectDetails ? (
+          <Controller
+            control={control}
+            name="project_lead"
+            render={({ field: { value } }) => (
+              <MemberSelect
+                value={value}
+                onChange={(val: string) => {
+                  submitChanges({ project_lead: val });
+                }}
+                isDisabled={!isAdmin}
+              />
+            )}
+          />
+        ) : (
+          <Loader className="h-9 w-full">
+            <Loader.Item width="100%" height="100%" />
+          </Loader>
+        )}
+      </DefaultSettingItem>
+      <DefaultSettingItem title="Default Assignee" description="Select the default assignee for the project.">
+        {currentProjectDetails ? (
+          <Controller
+            control={control}
+            name="default_assignee"
+            render={({ field: { value } }) => (
+              <MemberSelect
+                value={value}
+                onChange={(val: string) => {
+                  submitChanges({ default_assignee: val });
+                }}
+                isDisabled={!isAdmin}
+              />
+            )}
+          />
+        ) : (
+          <Loader className="h-9 w-full">
+            <Loader.Item width="100%" height="100%" />
+          </Loader>
+        )}
+      </DefaultSettingItem>
+      {currentProjectDetails && (
+        <DefaultSettingItem
+          title="Guest access"
+          description="This will allow guests to have view access to all the project work items."
+        >
+          <div className="flex items-center justify-end">
+            <Switch
+              size="sm"
+              checked={!!currentProjectDetails?.guest_view_all_features}
+              onCheckedChange={toggleGuestViewAllIssues}
+              disabled={!isAdmin}
+              aria-label="Guest access"
+            />
+          </div>
+        </DefaultSettingItem>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
new file mode 100644
index 0000000..c0674da
--- /dev/null
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -0,0 +1,343 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+
+// types
+import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { GlobeOutline, NewTabOutline, TickOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TProjectPublishLayouts, TProjectPublishSettings } from "@plane/types";
+// ui
+import { Switch } from "@makeplane/propel/components/switch";
+import { Loader, CustomSelect, ModalCore, EModalWidth } from "@plane/ui";
+// helpers
+import { copyTextToClipboard } from "@plane/utils";
+// hooks
+import { useProjectPublish } from "@/hooks/store/use-project-publish";
+
+type Props = {
+  isOpen: boolean;
+  projectId: string;
+  onClose: () => void;
+};
+
+const defaultValues: Partial<TProjectPublishSettings> = {
+  is_comments_enabled: false,
+  is_reactions_enabled: false,
+  is_votes_enabled: false,
+  inbox: null,
+  view_props: {
+    list: true,
+    kanban: true,
+  },
+};
+
+const VIEW_OPTIONS: {
+  key: TProjectPublishLayouts;
+  label: string;
+}[] = [
+  { key: "list", label: "List" },
+  { key: "kanban", label: "Kanban" },
+];
+
+export const PublishProjectModal = observer(function PublishProjectModal(props: Props) {
+  const { isOpen, onClose, projectId } = props;
+  // states
+  const [isUnPublishing, setIsUnPublishing] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const {
+    fetchPublishSettings,
+    getPublishSettingsByProjectID,
+    publishProject,
+    updatePublishSettings,
+    unPublishProject,
+    fetchSettingsLoader,
+  } = useProjectPublish();
+  // derived values
+  const projectPublishSettings = getPublishSettingsByProjectID(projectId);
+  const isProjectPublished = !!projectPublishSettings?.anchor;
+  // form info
+  const {
+    control,
+    formState: { isDirty, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm({
+    defaultValues,
+  });
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  // fetch publish settings
+  useEffect(() => {
+    if (!workspaceSlug || !isOpen) return;
+
+    if (!projectPublishSettings) {
+      fetchPublishSettings(workspaceSlug.toString(), projectId);
+    }
+  }, [fetchPublishSettings, isOpen, projectId, projectPublishSettings, workspaceSlug]);
+
+  const handlePublishProject = async (payload: Partial<TProjectPublishSettings>) => {
+    if (!workspaceSlug) return;
+    await publishProject(workspaceSlug.toString(), projectId, payload);
+  };
+
+  const handleUpdatePublishSettings = async (payload: Partial<TProjectPublishSettings>) => {
+    if (!workspaceSlug || !payload.id) return;
+
+    await updatePublishSettings(workspaceSlug.toString(), projectId, payload.id, payload).then((res) => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Publish settings updated successfully!",
+      });
+
+      handleClose();
+      return res;
+    });
+  };
+
+  const handleUnPublishProject = async (publishId: string) => {
+    if (!workspaceSlug || !publishId) return;
+
+    setIsUnPublishing(true);
+
+    await unPublishProject(workspaceSlug.toString(), projectId, publishId)
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Something went wrong while unpublishing the project.",
+        })
+      )
+      .finally(() => setIsUnPublishing(false));
+  };
+
+  const selectedLayouts = Object.entries(watch("view_props") ?? {})
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    .filter(([key, value]) => value)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    .map(([key, value]) => key)
+    .filter((l) => VIEW_OPTIONS.find((o) => o.key === l));
+
+  const handleFormSubmit = async (formData: Partial<TProjectPublishSettings>) => {
+    if (!selectedLayouts || selectedLayouts.length === 0) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Please select at least one view layout to publish the project.",
+      });
+      return;
+    }
+
+    const payload: Partial<TProjectPublishSettings> = {
+      id: formData.id,
+      is_comments_enabled: formData.is_comments_enabled,
+      is_reactions_enabled: formData.is_reactions_enabled,
+      is_votes_enabled: formData.is_votes_enabled,
+      view_props: formData.view_props,
+    };
+
+    if (formData.id && isProjectPublished) await handleUpdatePublishSettings(payload);
+    else await handlePublishProject(payload);
+  };
+
+  // prefill form values for already published projects
+  useEffect(() => {
+    if (!projectPublishSettings?.anchor) return;
+
+    reset({
+      ...defaultValues,
+      ...projectPublishSettings,
+    });
+  }, [projectPublishSettings, reset]);
+
+  const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH;
+  const publishLink = `${SPACE_APP_URL}/issues/${projectPublishSettings?.anchor}`;
+
+  const handleCopyLink = () =>
+    copyTextToClipboard(publishLink).then(() =>
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "",
+        message: "Published page link copied successfully.",
+      })
+    );
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(handleFormSubmit)}>
+        <div className="flex items-center justify-between gap-2 p-5">
+          <h5 className="text-18 font-medium text-secondary">Publish project</h5>
+          {isProjectPublished && (
+            <Button
+              variant="error-fill"
+              size="lg"
+              onClick={() => handleUnPublishProject(watch("id") ?? "")}
+              loading={isUnPublishing}
+            >
+              {isUnPublishing ? "Unpublishing" : "Unpublish"}
+            </Button>
+          )}
+        </div>
+
+        {/* content */}
+        {fetchSettingsLoader ? (
+          <Loader className="space-y-4 px-5">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </Loader>
+        ) : (
+          <div className="space-y-4 px-5">
+            {isProjectPublished && projectPublishSettings && (
+              <>
+                <div className="flex items-center justify-between gap-2 rounded-md border border-strong py-1.5 pr-1 pl-4">
+                  <a
+                    href={publishLink}
+                    className="truncate text-13 text-secondary"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {publishLink}
+                  </a>
+                  <div className="flex flex-shrink-0 items-center gap-1">
+                    <a
+                      href={publishLink}
+                      className="grid size-8 place-items-center rounded-sm bg-layer-3 hover:bg-layer-3-hover"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <NewTabOutline className="size-4" />
+                    </a>
+                    <button
+                      type="button"
+                      className="h-8 rounded-sm bg-layer-3 px-3 py-2 text-11 font-medium hover:bg-layer-3-hover"
+                      onClick={handleCopyLink}
+                    >
+                      Copy link
+                    </button>
+                  </div>
+                </div>
+                <p className="mt-3 flex items-center gap-1 text-13 font-medium text-accent-primary">
+                  <span className="relative grid size-2.5 place-items-center">
+                    <span className="absolute inline-flex size-full animate-ping rounded-full bg-accent-primary opacity-75" />
+                    <span className="relative inline-flex size-1.5 rounded-full bg-accent-primary" />
+                  </span>
+                  This project is now live on web
+                </p>
+              </>
+            )}
+            <div className="space-y-4">
+              <div className="relative flex items-center justify-between gap-2">
+                <div className="text-13">Views</div>
+                <Controller
+                  control={control}
+                  name="view_props"
+                  render={({ field: { onChange, value } }) => (
+                    <CustomSelect
+                      value={value}
+                      label={VIEW_OPTIONS.filter((o) => selectedLayouts.includes(o.key))
+                        .map((o) => o.label)
+                        .join(", ")}
+                      onChange={(val: TProjectPublishLayouts) => {
+                        if (selectedLayouts.length === 1 && selectedLayouts[0] === val) return;
+                        onChange({
+                          ...value,
+                          [val]: !value?.[val],
+                        });
+                      }}
+                      buttonClassName="border-none"
+                      placement="bottom-end"
+                    >
+                      {VIEW_OPTIONS.map((option) => (
+                        <CustomSelect.Option
+                          key={option.key}
+                          value={option.key}
+                          className="flex items-center justify-between gap-2"
+                        >
+                          {option.label}
+                          {selectedLayouts.includes(option.key) && <TickOutline className="size-3.5 flex-shrink-0" />}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+              </div>
+              <div className="relative flex items-center justify-between gap-2">
+                <div className="text-13">Allow comments</div>
+                <Controller
+                  control={control}
+                  name="is_comments_enabled"
+                  render={({ field: { onChange, value } }) => (
+                    <Switch size="sm" checked={!!value} onCheckedChange={onChange} aria-label="Allow comments" />
+                  )}
+                />
+              </div>
+              <div className="relative flex items-center justify-between gap-2">
+                <div className="text-13">Allow reactions</div>
+                <Controller
+                  control={control}
+                  name="is_reactions_enabled"
+                  render={({ field: { onChange, value } }) => (
+                    <Switch size="sm" checked={!!value} onCheckedChange={onChange} aria-label="Allow reactions" />
+                  )}
+                />
+              </div>
+              <div className="relative flex items-center justify-between gap-2">
+                <div className="text-13">Allow voting</div>
+                <Controller
+                  control={control}
+                  name="is_votes_enabled"
+                  render={({ field: { onChange, value } }) => (
+                    <Switch size="sm" checked={!!value} onCheckedChange={onChange} aria-label="Allow voting" />
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* modal handlers */}
+        <div className="relative mt-4 flex items-center justify-between border-t border-subtle px-5 py-4">
+          <div className="flex items-center gap-1 text-13 text-placeholder">
+            <GlobeOutline className="size-3.5" />
+            <div className="text-13">Anyone with the link can access</div>
+          </div>
+          {!fetchSettingsLoader && (
+            <div className="relative flex items-center gap-2">
+              <Button variant="secondary" size="lg" onClick={handleClose}>
+                Cancel
+              </Button>
+              {isProjectPublished ? (
+                isDirty && (
+                  <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+                    {isSubmitting ? "Updating" : "Update settings"}
+                  </Button>
+                )
+              ) : (
+                <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+                  {isSubmitting ? "Publishing" : "Publish"}
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </form>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/project/root.tsx b/apps/web/core/components/project/root.tsx
new file mode 100644
index 0000000..45dc41b
--- /dev/null
+++ b/apps/web/core/components/project/root.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
+import { calculateTotalFilters } from "@plane/utils";
+// components
+import { PageHead } from "@/components/core/page-title";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectFilter } from "@/hooks/store/use-project-filter";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// local imports
+import { ProjectAppliedFiltersList } from "./applied-filters";
+import { ProjectCardList } from "./card-list";
+
+export const ProjectRoot = observer(function ProjectRoot() {
+  const { currentWorkspace } = useWorkspace();
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  const { t } = useTranslation();
+  // store
+  const { totalProjectIds, filteredProjectIds } = useProject();
+  const {
+    currentWorkspaceFilters,
+    currentWorkspaceAppliedDisplayFilters,
+    clearAllFilters,
+    clearAllAppliedDisplayFilters,
+    updateFilters,
+    updateDisplayFilters,
+  } = useProjectFilter();
+  // derived values
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace?.name} - ${t("workspace_projects.label", { count: 2 })}`
+    : undefined;
+
+  const isArchived = pathname.includes("/archives");
+
+  const allowedDisplayFilters =
+    currentWorkspaceAppliedDisplayFilters?.filter((filter) => filter !== "archived_projects") ?? [];
+
+  const handleRemoveFilter = useCallback(
+    (key: keyof TProjectFilters, value: string | null) => {
+      if (!workspaceSlug) return;
+      let newValues = currentWorkspaceFilters?.[key] ?? [];
+
+      if (!value) newValues = [];
+      else newValues = newValues.filter((val) => val !== value);
+
+      updateFilters(workspaceSlug.toString(), { [key]: newValues });
+    },
+    [currentWorkspaceFilters, updateFilters, workspaceSlug]
+  );
+
+  const handleRemoveDisplayFilter = useCallback(
+    (key: TProjectAppliedDisplayFilterKeys) => {
+      if (!workspaceSlug) return;
+      updateDisplayFilters(workspaceSlug.toString(), { [key]: false });
+    },
+    [updateDisplayFilters, workspaceSlug]
+  );
+
+  const handleClearAllFilters = useCallback(() => {
+    if (!workspaceSlug) return;
+    clearAllFilters(workspaceSlug.toString());
+    clearAllAppliedDisplayFilters(workspaceSlug.toString());
+    if (isArchived) updateDisplayFilters(workspaceSlug.toString(), { archived_projects: true });
+  }, [clearAllFilters, clearAllAppliedDisplayFilters, workspaceSlug]);
+
+  useEffect(() => {
+    updateDisplayFilters(workspaceSlug.toString(), { archived_projects: isArchived });
+  }, [pathname]);
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      <div className="flex h-full w-full flex-col">
+        {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 || allowedDisplayFilters.length > 0) && (
+          <ProjectAppliedFiltersList
+            appliedFilters={currentWorkspaceFilters ?? {}}
+            appliedDisplayFilters={allowedDisplayFilters}
+            handleClearAllFilters={handleClearAllFilters}
+            handleRemoveFilter={handleRemoveFilter}
+            handleRemoveDisplayFilter={handleRemoveDisplayFilter}
+            filteredProjects={filteredProjectIds?.length ?? 0}
+            totalProjects={totalProjectIds?.length ?? 0}
+            alwaysAllowEditing
+          />
+        )}
+        <ProjectCardList />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/search-projects.tsx b/apps/web/core/components/project/search-projects.tsx
new file mode 100644
index 0000000..402f88b
--- /dev/null
+++ b/apps/web/core/components/project/search-projects.tsx
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane hooks
+import { useOutsideClickDetector } from "@plane/hooks";
+// i18n
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useProjectFilter } from "@/hooks/store/use-project-filter";
+import { IconButton } from "@plane/propel/icon-button";
+
+export const ProjectSearch = observer(function ProjectSearch() {
+  // i18n
+  const { t } = useTranslation();
+  // hooks
+  const { searchQuery, updateSearchQuery } = useProjectFilter();
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
+      else setIsSearchOpen(false);
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      {!isSearchOpen && (
+        <IconButton
+          variant="ghost"
+          size="lg"
+          className="-mr-1"
+          onClick={() => {
+            setIsSearchOpen(true);
+            inputRef.current?.focus();
+          }}
+          icon={SearchOutline}
+        />
+      )}
+      <div
+        className={cn(
+          "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
+          {
+            "w-30 border-subtle px-2.5 py-1.5 opacity-100 md:w-64": isSearchOpen,
+          }
+        )}
+      >
+        <SearchOutline className="h-3.5 w-3.5" />
+        <input
+          ref={inputRef}
+          className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
+          placeholder={t("common.search.label")}
+          value={searchQuery}
+          onChange={(e) => updateSearchQuery(e.target.value)}
+          onKeyDown={handleInputKeyDown}
+        />
+        {isSearchOpen && (
+          <button
+            type="button"
+            className="grid place-items-center"
+            onClick={() => {
+              updateSearchQuery("");
+              setIsSearchOpen(false);
+            }}
+          >
+            <CloseOutline className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/project/send-project-invitation-modal.tsx b/apps/web/core/components/project/send-project-invitation-modal.tsx
new file mode 100644
index 0000000..e2906fb
--- /dev/null
+++ b/apps/web/core/components/project/send-project-invitation-modal.tsx
@@ -0,0 +1,321 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useForm, Controller, useFieldArray } from "react-hook-form";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { ROLE, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { AddOutline, ChevronDownOutline, CloseOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { CustomSelect, CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// helpers
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+type member = {
+  role: EUserPermissions;
+  member_id: string;
+};
+
+type FormValues = {
+  members: member[];
+};
+
+const defaultValues: FormValues = {
+  members: [
+    {
+      role: 5,
+      member_id: "",
+    },
+  ],
+};
+
+export const SendProjectInvitationModal = observer(function SendProjectInvitationModal(props: Props) {
+  const { isOpen, onClose, onSuccess, projectId, workspaceSlug } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+  const {
+    project: { getProjectMemberDetails, bulkAddMembersToProject },
+    workspace: { workspaceMemberIds, getWorkspaceMemberDetails },
+  } = useMember();
+  // form info
+  const {
+    formState: { errors, isSubmitting },
+    watch,
+    setValue,
+    reset,
+    handleSubmit,
+    control,
+  } = useForm<FormValues>();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "members",
+  });
+  // derived values
+  const currentProjectRole = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
+  const uninvitedPeople = workspaceMemberIds?.filter((userId) => {
+    const projectMemberDetails = getProjectMemberDetails(userId, projectId);
+    const isInvited = projectMemberDetails?.member.id && projectMemberDetails?.original_role;
+    return !isInvited;
+  });
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
+
+    const payload = { ...formData };
+
+    await bulkAddMembersToProject(workspaceSlug.toString(), projectId.toString(), payload)
+      .then(() => {
+        if (onSuccess) onSuccess();
+        onClose();
+        setToast({
+          title: "Success!",
+          type: TOAST_TYPE.SUCCESS,
+          message: "Members added successfully.",
+        });
+      })
+      .catch((error) => {
+        console.error(error);
+      })
+      .finally(() => {
+        reset(defaultValues);
+      });
+  };
+
+  const handleClose = () => {
+    onClose();
+
+    const timeout = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timeout);
+    }, 500);
+  };
+
+  const appendField = () => {
+    append({
+      role: 5,
+      member_id: "",
+    });
+  };
+
+  useEffect(() => {
+    if (fields.length === 0) {
+      append([
+        {
+          role: 5,
+          member_id: "",
+        },
+      ]);
+    }
+  }, [fields, append]);
+
+  const options = uninvitedPeople
+    ?.map((userId) => {
+      const memberDetails = getWorkspaceMemberDetails(userId);
+
+      if (!memberDetails?.member) return;
+      return {
+        value: `${memberDetails?.member.id}`,
+        query: `${memberDetails?.member.first_name} ${
+          memberDetails?.member.last_name
+        } ${memberDetails?.member.display_name.toLowerCase()}`,
+        content: (
+          <div className="flex w-full items-center gap-2">
+            <div className="shrink-0 pt-0.5">
+              <Avatar
+                alt={memberDetails?.member.display_name}
+                fallback={memberDetails?.member.display_name?.[0]?.toUpperCase()}
+                src={getFileURL(memberDetails?.member.avatar_url)}
+                size="xs"
+              />
+            </div>
+            <div className="truncate">
+              {memberDetails?.member.display_name} (
+              {memberDetails?.member.first_name + " " + memberDetails?.member.last_name})
+            </div>
+          </div>
+        ),
+      };
+    })
+    .filter((option) => !!option) as
+    | {
+        value: string;
+        query: string;
+        content: React.ReactNode;
+      }[]
+    | undefined;
+
+  const checkCurrentOptionWorkspaceRole = (value: string) => {
+    const currentMemberWorkspaceRole = getWorkspaceMemberDetails(value)?.role;
+    if (!value || !currentMemberWorkspaceRole) return ROLE;
+
+    const isGuestOROwner = [EUserPermissions.ADMIN, EUserPermissions.GUEST].includes(
+      currentMemberWorkspaceRole as EUserPermissions
+    );
+
+    return Object.fromEntries(
+      Object.entries(ROLE).filter(([key]) => !isGuestOROwner || [currentMemberWorkspaceRole].includes(parseInt(key)))
+    );
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)} className="p-5">
+        <div className="space-y-5">
+          <h3 className="text-16 leading-6 font-medium text-primary">
+            {t("project_settings.members.invite_members.title")}
+          </h3>
+          <div className="mt-2">
+            <p className="text-13 text-secondary">{t("project_settings.members.invite_members.sub_heading")}</p>
+          </div>
+
+          <div className="mb-3 space-y-4">
+            {fields.map((field, index) => (
+              <div key={field.id} className="group mb-1 flex w-full items-start justify-between gap-x-4 text-13">
+                <div className="flex w-full grow flex-col gap-1">
+                  <Controller
+                    control={control}
+                    name={`members.${index}.member_id`}
+                    rules={{ required: "Please select a member" }}
+                    render={({ field: { value, onChange } }) => {
+                      const selectedMember = getWorkspaceMemberDetails(value);
+                      return (
+                        <CustomSearchSelect
+                          value={value}
+                          customButton={
+                            <button className="shadow-sm flex w-full items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
+                              {value && value !== "" ? (
+                                <div className="flex items-center gap-2">
+                                  <Avatar
+                                    alt={selectedMember?.member.display_name}
+                                    fallback={selectedMember?.member.display_name?.[0]?.toUpperCase()}
+                                    src={getFileURL(selectedMember?.member.avatar_url ?? "")}
+                                    size="xs"
+                                  />
+                                  {selectedMember?.member.display_name}
+                                </div>
+                              ) : (
+                                <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
+                              )}
+                              <ChevronDownOutline className="h-3 w-3" aria-hidden="true" />
+                            </button>
+                          }
+                          onChange={(val: string) => {
+                            onChange(val);
+                            // Update the role to the workspace role when member ID changes
+                            const workspaceMemberDetails = getWorkspaceMemberDetails(val);
+                            const workspaceRole = workspaceMemberDetails?.role ?? 5;
+                            const newValue = ROLE[workspaceRole].toUpperCase();
+                            setValue(
+                              `members.${index}.role`,
+                              EUserPermissions[newValue as keyof typeof EUserPermissions]
+                            );
+                          }}
+                          options={options}
+                          optionsClassName="w-48"
+                        />
+                      );
+                    }}
+                  />
+                  {errors.members && errors.members[index]?.member_id && (
+                    <span className="px-1 text-13 text-danger-primary">
+                      {errors.members[index]?.member_id?.message}
+                    </span>
+                  )}
+                </div>
+
+                <div className="flex shrink-0 items-center justify-between gap-2">
+                  <div className="flex flex-col gap-1">
+                    <Controller
+                      name={`members.${index}.role`}
+                      control={control}
+                      rules={{ required: "Select Role" }}
+                      render={({ field }) => (
+                        <CustomSelect
+                          {...field}
+                          customButton={
+                            <div className="shadow-sm flex w-24 items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2.5 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
+                              <span className="capitalize">{field.value ? ROLE[field.value] : "Select role"}</span>
+                              <ChevronDownOutline className="h-3 w-3" aria-hidden="true" />
+                            </div>
+                          }
+                          input
+                        >
+                          {Object.entries(checkCurrentOptionWorkspaceRole(watch(`members.${index}.member_id`))).map(
+                            ([key, label]) => {
+                              if (parseInt(key) > (currentProjectRole ?? EUserPermissions.GUEST)) return null;
+
+                              return (
+                                <CustomSelect.Option key={key} value={key}>
+                                  {label}
+                                </CustomSelect.Option>
+                              );
+                            }
+                          )}
+                        </CustomSelect>
+                      )}
+                    />
+                    {errors.members && errors.members[index]?.role && (
+                      <span className="px-1 text-13 text-danger-primary">{errors.members[index]?.role?.message}</span>
+                    )}
+                  </div>
+
+                  {fields.length > 1 && (
+                    <div className="flex-item flex w-6">
+                      <button
+                        type="button"
+                        className="place-items-center self-center rounded-sm"
+                        onClick={() => remove(index)}
+                      >
+                        <CloseOutline className="h-4 w-4 text-secondary" />
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mt-5 flex items-center justify-between gap-2">
+          <button
+            type="button"
+            className="flex items-center gap-2 bg-transparent py-2 pr-3 text-13 font-medium text-accent-primary outline-accent-strong"
+            onClick={appendField}
+          >
+            <AddOutline className="h-4 w-4" />
+            {t("common.add_more")}
+          </button>
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              {t("cancel")}
+            </Button>
+            <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+              {isSubmitting
+                ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
+                : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/project/settings/control-section.tsx b/apps/web/core/components/project/settings/control-section.tsx
new file mode 100644
index 0000000..de56790
--- /dev/null
+++ b/apps/web/core/components/project/settings/control-section.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "react-router";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// local imports
+import { ArchiveRestoreProjectModal } from "../archive-restore-modal";
+import { DeleteProjectModal } from "../delete-project-modal";
+
+type Props = {
+  projectId: string;
+};
+
+export const GeneralProjectSettingsControlSection = observer(function GeneralProjectSettingsControlSection(
+  props: Props
+) {
+  const { projectId } = props;
+  // states
+  const [selectProject, setSelectedProject] = useState<string | null>(null);
+  const [archiveProject, setArchiveProject] = useState<boolean>(false);
+  // params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { currentProjectDetails } = useProject();
+  // translation
+  const { t } = useTranslation();
+
+  if (!currentProjectDetails) return null;
+
+  return (
+    <div className="mt-10">
+      {workspaceSlug && (
+        <ArchiveRestoreProjectModal
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          isOpen={archiveProject}
+          onClose={() => setArchiveProject(false)}
+          archive
+        />
+      )}
+      <DeleteProjectModal
+        project={currentProjectDetails}
+        isOpen={Boolean(selectProject)}
+        onClose={() => setSelectedProject(null)}
+      />
+      <div className="rounded-lg border border-subtle bg-layer-2">
+        {/* Project Selector */}
+        <SettingsBoxedControlItem
+          className="rounded-b-none border-0 border-b"
+          title={t("archive")}
+          description="Archiving a project will unlist your project from your side navigation although you will still be able to access it from your projects page. You can restore the project or delete it whenever you want."
+          control={
+            <Button variant="secondary" onClick={() => setArchiveProject(true)}>
+              {t("archive")}
+            </Button>
+          }
+        />
+        {/* Format Selector */}
+        <SettingsBoxedControlItem
+          className="rounded-t-none border-0"
+          title={t("delete")}
+          description="When deleting a project, all of the data and resources within that project will be permanently removed and cannot be recovered."
+          control={
+            <Button variant="error-outline" onClick={() => setSelectedProject(currentProjectDetails.id ?? null)}>
+              {t("delete")}
+            </Button>
+          }
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/project/settings/features-list.tsx b/apps/web/core/components/project/settings/features-list.tsx
new file mode 100644
index 0000000..f4411c2
--- /dev/null
+++ b/apps/web/core/components/project/settings/features-list.tsx
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { setPromiseToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IProject } from "@plane/types";
+import { CyclesOutline, IntakeOutline, ModuleOutline, PagesOutline, ViewsOutline } from "@makeplane/propel/icons";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+import { SettingsHeading } from "@/components/settings/heading";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+// plane web imports
+import { UpgradeBadge } from "@/components/workspace/upgrade-badge";
+// local imports
+import { ProjectFeatureToggle } from "./helper";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  isAdmin: boolean;
+};
+
+const PROJECT_FEATURES_LIST = {
+  cycles: {
+    key: "cycles",
+    property: "cycle_view",
+    title: "Cycles",
+    description: "Timebox work as you see fit per project and change frequency from one period to the next.",
+    icon: <CyclesOutline className="h-5 w-5 flex-shrink-0 rotate-180 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+  modules: {
+    key: "modules",
+    property: "module_view",
+    title: "Modules",
+    description: "Group work into sub-project-like set-ups with their own leads and assignees.",
+    icon: <ModuleOutline width={20} height={20} className="flex-shrink-0 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+  views: {
+    key: "views",
+    property: "issue_views_view",
+    title: "Views",
+    description: "Save sorts, filters, and display options for later or share them.",
+    icon: <ViewsOutline className="h-5 w-5 flex-shrink-0 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+  pages: {
+    key: "pages",
+    property: "page_view",
+    title: "Pages",
+    description: "Write anything like you write anything.",
+    icon: <PagesOutline className="h-5 w-5 flex-shrink-0 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+  inbox: {
+    key: "intake",
+    property: "inbox_view",
+    title: "Intake",
+    description: "Consider and discuss work items before you add them to your project.",
+    icon: <IntakeOutline className="h-5 w-5 flex-shrink-0 text-tertiary" />,
+    isPro: false,
+    isEnabled: true,
+  },
+};
+
+export const ProjectFeaturesList = observer(function ProjectFeaturesList(props: Props) {
+  const { workspaceSlug, projectId, isAdmin } = props;
+  // store hooks
+  const { t } = useTranslation();
+  const { getProjectById, updateProject } = useProject();
+  // derived values
+  const currentProjectDetails = getProjectById(projectId);
+
+  const handleSubmit = (_featureKey: string, featureProperty: string) => {
+    if (!workspaceSlug || !projectId || !currentProjectDetails) return;
+
+    // making the request to update the project feature
+    const settingsPayload = {
+      [featureProperty]: !currentProjectDetails?.[featureProperty as keyof IProject],
+    };
+    const updateProjectPromise = updateProject(workspaceSlug, projectId, settingsPayload);
+
+    setPromiseToast(updateProjectPromise, {
+      loading: "Updating project feature...",
+      success: {
+        title: "Success!",
+        message: () => "Project feature updated successfully.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Something went wrong while updating project feature. Please try again.",
+      },
+    });
+    void updateProjectPromise.then(() => {
+      return undefined;
+    });
+  };
+
+  return (
+    <>
+      <div>
+        <SettingsHeading title={t("projects_and_issues")} description={t("projects_and_issues_description")} />
+        <div className="mt-6 flex flex-col gap-y-4">
+          {Object.entries(PROJECT_FEATURES_LIST).map(([featureItemKey, featureItem]) => (
+            <div key={featureItemKey}>
+              <SettingsBoxedControlItem
+                title={
+                  <span className="flex items-center gap-2">
+                    {t(featureItem.key)}
+                    {featureItem.isPro && (
+                      <Tooltip label="Pro feature">
+                        <UpgradeBadge className="rounded-sm" />
+                      </Tooltip>
+                    )}
+                  </span>
+                }
+                description={t(`${featureItem.key}_description`)}
+                control={
+                  <ProjectFeatureToggle
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    featureItem={featureItem}
+                    value={Boolean(currentProjectDetails?.[featureItem.property as keyof IProject])}
+                    handleSubmit={handleSubmit}
+                    disabled={!isAdmin}
+                  />
+                }
+              />
+              {/* {currentProjectDetails?.[featureItem.property as keyof IProject] && (
+                <div className="pl-14">{featureItem.renderChildren?.(currentProjectDetails, workspaceSlug)}</div>
+              )} */}
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/project/settings/helper.tsx b/apps/web/core/components/project/settings/helper.tsx
new file mode 100644
index 0000000..0671411
--- /dev/null
+++ b/apps/web/core/components/project/settings/helper.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
+import { EPillVariant, Pill, EPillSize } from "@plane/propel/pill";
+import { Switch } from "@makeplane/propel/components/switch";
+import { joinUrlPath } from "@plane/utils";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  featureItem: any;
+  value: boolean;
+  handleSubmit: (featureKey: string, featureProperty: string) => void;
+  disabled?: boolean;
+};
+
+export function ProjectFeatureToggle(props: Props) {
+  const { workspaceSlug, projectId, featureItem, value, handleSubmit, disabled } = props;
+  return featureItem?.href ? (
+    <Link href={joinUrlPath(workspaceSlug, "settings", "projects", projectId, "features", featureItem?.href)}>
+      <div className="flex items-center gap-2">
+        <Pill
+          variant={value ? EPillVariant.PRIMARY : EPillVariant.DEFAULT}
+          size={EPillSize.SM}
+          className="rounded-lg border-none"
+        >
+          {value ? "Enabled" : "Disabled"}
+        </Pill>
+        <ChevronRightOutline className="h-4 w-4 text-tertiary" />
+      </div>
+    </Link>
+  ) : (
+    <Switch
+      size="sm"
+      checked={value}
+      onCheckedChange={() => handleSubmit(featureItem?.key, featureItem?.property)}
+      disabled={disabled}
+      aria-label="Toggle project feature"
+    />
+  );
+}
diff --git a/apps/web/core/components/project/settings/member-columns.tsx b/apps/web/core/components/project/settings/member-columns.tsx
new file mode 100644
index 0000000..8a99a73
--- /dev/null
+++ b/apps/web/core/components/project/settings/member-columns.tsx
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { Controller, useForm } from "react-hook-form";
+import { CircleMinus } from "lucide-react";
+import { Disclosure } from "@headlessui/react";
+// plane imports
+import { ROLE, EUserPermissions } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { EUserProjectRoles, IUser, IWorkspaceMember, TProjectMembership } from "@plane/types";
+import { CustomMenu, CustomSelect } from "@plane/ui";
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+
+export interface RowData extends Pick<TProjectMembership, "original_role"> {
+  member: IWorkspaceMember;
+}
+
+type NameProps = {
+  rowData: RowData;
+  workspaceSlug: string;
+  isAdmin: boolean;
+  currentUser: IUser | undefined;
+  setRemoveMemberModal: (rowData: RowData) => void;
+};
+
+type AccountTypeProps = {
+  rowData: RowData;
+  currentProjectRole: EUserPermissions | undefined;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export function NameColumn(props: NameProps) {
+  const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
+  // derived values
+  const { avatar_url, display_name, email, first_name, id, last_name } = rowData.member;
+
+  return (
+    <Disclosure>
+      {({}) => (
+        <div className="group relative">
+          <div className="flex w-72 items-center gap-2">
+            <div className="flex flex-1 items-center gap-x-2 gap-y-2">
+              {avatar_url && avatar_url.trim() !== "" ? (
+                <Link href={`/${workspaceSlug}/profile/${id}`}>
+                  <span className="relative flex size-6 items-center justify-center rounded-full text-on-color capitalize">
+                    <img
+                      src={getFileURL(avatar_url)}
+                      className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
+                      alt={display_name || email}
+                    />
+                  </span>
+                </Link>
+              ) : (
+                <Link href={`/${workspaceSlug}/profile/${id}`}>
+                  <span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-on-color capitalize">
+                    {(email ?? display_name ?? "?")[0]}
+                  </span>
+                </Link>
+              )}
+              {first_name} {last_name}
+            </div>
+            {(isAdmin || id === currentUser?.id) && (
+              <CustomMenu
+                ellipsis
+                buttonClassName="p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
+                optionsClassName="p-1.5"
+                placement="bottom-end"
+              >
+                <CustomMenu.MenuItem>
+                  <div
+                    className="flex cursor-pointer items-center gap-x-1 font-medium text-danger-primary"
+                    onClick={() => setRemoveMemberModal(rowData)}
+                  >
+                    <CircleMinus className="size-3.5 flex-shrink-0" />
+                    {rowData.member?.id === currentUser?.id ? "Leave " : "Remove "}
+                  </div>
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            )}
+          </div>
+        </div>
+      )}
+    </Disclosure>
+  );
+}
+
+export const AccountTypeColumn = observer(function AccountTypeColumn(props: AccountTypeProps) {
+  const { rowData, projectId, workspaceSlug } = props;
+  // store hooks
+  const {
+    project: { updateMemberRole },
+    workspace: { getWorkspaceMemberDetails },
+  } = useMember();
+  const { data: currentUser } = useUser();
+  const { getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+  // form info
+  const {
+    control,
+    formState: { errors },
+  } = useForm();
+  // derived values
+  const roleLabel = ROLE[rowData.original_role ?? EUserPermissions.GUEST];
+  const isCurrentUser = currentUser?.id === rowData.member.id;
+  const isRowDataWorkspaceAdmin = [EUserPermissions.ADMIN].includes(
+    Number(getWorkspaceMemberDetails(rowData.member.id)?.role) ?? EUserPermissions.GUEST
+  );
+  const isCurrentUserWorkspaceAdmin = currentUser
+    ? [EUserPermissions.ADMIN].includes(
+        Number(getWorkspaceMemberDetails(currentUser.id)?.role) ?? EUserPermissions.GUEST
+      )
+    : false;
+  const currentProjectRole = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
+
+  const isCurrentUserProjectAdmin = currentProjectRole
+    ? ![EUserPermissions.MEMBER, EUserPermissions.GUEST].includes(Number(currentProjectRole) ?? EUserPermissions.GUEST)
+    : false;
+
+  // logic
+  // Workspace admin can change his own role
+  // Project admin can change any role except his own and workspace admin's role
+  const isRoleEditable =
+    (isCurrentUserWorkspaceAdmin && isCurrentUser) ||
+    (isCurrentUserProjectAdmin && !isRowDataWorkspaceAdmin && !isCurrentUser);
+  const checkCurrentOptionWorkspaceRole = (value: string) => {
+    const currentMemberWorkspaceRole = getWorkspaceMemberDetails(value)?.role as EUserPermissions | undefined;
+    if (!value || !currentMemberWorkspaceRole) return ROLE;
+
+    const isGuest = [EUserPermissions.GUEST].includes(currentMemberWorkspaceRole);
+
+    return Object.fromEntries(
+      Object.entries(ROLE).filter(([key]) => !isGuest || parseInt(key) === EUserPermissions.GUEST)
+    );
+  };
+
+  return (
+    <>
+      {isRoleEditable ? (
+        <Controller
+          name="role"
+          control={control}
+          rules={{ required: "Role is required." }}
+          render={() => (
+            <CustomSelect
+              value={rowData.original_role}
+              onChange={async (value: EUserProjectRoles) => {
+                if (!workspaceSlug) return;
+                await updateMemberRole(workspaceSlug.toString(), projectId.toString(), rowData.member.id, value).catch(
+                  (err) => {
+                    console.log(err, "err");
+                    const error = err.error;
+                    const errorString = Array.isArray(error) ? error[0] : error;
+
+                    setToast({
+                      type: TOAST_TYPE.ERROR,
+                      title: "You can’t change this role yet.",
+                      message: errorString ?? "An error occurred while updating member role. Please try again.",
+                    });
+                  }
+                );
+              }}
+              label={
+                <div className="flex">
+                  <span>{roleLabel}</span>
+                </div>
+              }
+              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
+              className="w-32 rounded-md p-0"
+              input
+            >
+              {Object.entries(checkCurrentOptionWorkspaceRole(rowData.member.id)).map(([key, label]) => (
+                <CustomSelect.Option key={key} value={key}>
+                  {label}
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
+        />
+      ) : (
+        <div className="flex w-32">
+          <span>{roleLabel}</span>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/projects/create/attributes.tsx b/apps/web/core/components/projects/create/attributes.tsx
new file mode 100644
index 0000000..b5dd64e
--- /dev/null
+++ b/apps/web/core/components/projects/create/attributes.tsx
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Controller, useFormContext } from "react-hook-form";
+// plane imports
+import { NETWORK_CHOICES, ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IProject } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+import { getTabIndex } from "@plane/utils";
+// components
+import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
+import { ProjectNetworkIcon } from "@/components/project/project-network-icon";
+
+type Props = {
+  isMobile?: boolean;
+};
+
+function ProjectAttributes(props: Props) {
+  const { isMobile = false } = props;
+  const { t } = useTranslation();
+  const { control } = useFormContext<IProject>();
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Controller
+        name="network"
+        control={control}
+        render={({ field: { onChange, value } }) => {
+          const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
+
+          return (
+            <div className="h-7 flex-shrink-0" tabIndex={getIndex("network")}>
+              <CustomSelect
+                value={value}
+                onChange={onChange}
+                label={
+                  <div className="flex h-full items-center gap-1">
+                    {currentNetwork ? (
+                      <>
+                        <ProjectNetworkIcon iconKey={currentNetwork.iconKey} />
+                        {t(currentNetwork.i18n_label)}
+                      </>
+                    ) : (
+                      <span className="text-placeholder">{t("select_network")}</span>
+                    )}
+                  </div>
+                }
+                placement="bottom-start"
+                className="h-full"
+                buttonClassName="h-full"
+                noChevron
+                tabIndex={getIndex("network")}
+              >
+                {NETWORK_CHOICES.map((network) => (
+                  <CustomSelect.Option key={network.key} value={network.key}>
+                    <div className="flex items-start gap-2">
+                      <ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
+                      <div className="-mt-1">
+                        <p>{t(network.i18n_label)}</p>
+                        <p className="text-11 text-placeholder">{t(network.description)}</p>
+                      </div>
+                    </div>
+                  </CustomSelect.Option>
+                ))}
+              </CustomSelect>
+            </div>
+          );
+        }}
+      />
+      <Controller
+        name="project_lead"
+        control={control}
+        render={({ field: { value, onChange } }) => {
+          if (value === undefined || value === null || typeof value === "string")
+            return (
+              <div className="h-7 flex-shrink-0" tabIndex={getIndex("lead")}>
+                <MemberDropdown
+                  value={value ?? null}
+                  onChange={(lead) => onChange(lead === value ? null : lead)}
+                  placeholder={t("lead")}
+                  multiple={false}
+                  buttonVariant="border-with-text"
+                  tabIndex={getIndex("lead")}
+                />
+              </div>
+            );
+          else return <></>;
+        }}
+      />
+    </div>
+  );
+}
+
+export default ProjectAttributes;
+
+export { ProjectAttributes };
diff --git a/apps/web/core/components/projects/create/root.tsx b/apps/web/core/components/projects/create/root.tsx
new file mode 100644
index 0000000..87fe51c
--- /dev/null
+++ b/apps/web/core/components/projects/create/root.tsx
@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { FormProvider, useForm } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EFileAssetType } from "@plane/types";
+// components
+import ProjectCommonAttributes from "@/components/project/create/common-attributes";
+import ProjectCreateHeader from "@/components/project/create/header";
+import ProjectCreateButtons from "@/components/project/create/project-create-buttons";
+// hooks
+import { getCoverImageType, uploadCoverImage } from "@/helpers/cover-image.helper";
+import { useProject } from "@/hooks/store/use-project";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web types
+import type { TProject } from "@plane/types";
+import { ProjectAttributes } from "./attributes";
+import { getProjectFormValues } from "./utils";
+
+export type TCreateProjectFormProps = {
+  setToFavorite?: boolean;
+  workspaceSlug: string;
+  onClose: () => void;
+  handleNextStep: (projectId: string) => void;
+  data?: Partial<TProject>;
+  templateId?: string;
+  updateCoverImageStatus: (projectId: string, coverImage: string) => Promise<void>;
+};
+
+export const CreateProjectForm = observer(function CreateProjectForm(props: TCreateProjectFormProps) {
+  const { setToFavorite, workspaceSlug, data, onClose, handleNextStep, updateCoverImageStatus } = props;
+  // store
+  const { t } = useTranslation();
+  const { addProjectToFavorites, createProject, updateProject } = useProject();
+  // states
+  const [shouldAutoSyncIdentifier, setShouldAutoSyncIdentifier] = useState(true);
+  // form info
+  const methods = useForm<TProject>({
+    defaultValues: { ...getProjectFormValues(), ...data },
+    reValidateMode: "onChange",
+  });
+  const { handleSubmit, reset, setValue } = methods;
+  const { isMobile } = usePlatformOS();
+  const handleAddToFavorites = (projectId: string) => {
+    if (!workspaceSlug) return;
+
+    addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: t("failed_to_remove_project_from_favorites"),
+      });
+    });
+  };
+
+  const onSubmit = async (formData: Partial<TProject>) => {
+    // Upper case identifier
+    formData.identifier = formData.identifier?.toUpperCase();
+    const coverImage = formData.cover_image_url;
+    let uploadedAssetUrl: string | null = null;
+
+    if (coverImage) {
+      const imageType = getCoverImageType(coverImage);
+
+      if (imageType === "local_static") {
+        try {
+          uploadedAssetUrl = await uploadCoverImage(coverImage, {
+            workspaceSlug: workspaceSlug.toString(),
+            entityIdentifier: "",
+            entityType: EFileAssetType.PROJECT_COVER,
+            isUserAsset: false,
+          });
+        } catch (error) {
+          console.error("Error uploading cover image:", error);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: error instanceof Error ? error.message : "Failed to upload cover image",
+          });
+          return Promise.reject(error);
+        }
+      } else {
+        formData.cover_image = coverImage;
+        formData.cover_image_asset = null;
+      }
+    }
+
+    return createProject(workspaceSlug.toString(), formData)
+      .then(async (res) => {
+        if (uploadedAssetUrl) {
+          await updateCoverImageStatus(res.id, uploadedAssetUrl);
+          await updateProject(workspaceSlug.toString(), res.id, { cover_image_url: uploadedAssetUrl });
+        } else if (coverImage && coverImage.startsWith("http")) {
+          await updateCoverImageStatus(res.id, coverImage);
+          await updateProject(workspaceSlug.toString(), res.id, { cover_image_url: coverImage });
+        }
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("success"),
+          message: t("project_created_successfully"),
+        });
+
+        if (setToFavorite) {
+          handleAddToFavorites(res.id);
+        }
+        return handleNextStep(res.id);
+      })
+      .catch((err) => {
+        try {
+          // Handle the new error format where codes are nested in arrays under field names
+          const errorData = err?.data ?? {};
+
+          const nameError = errorData.name?.includes("PROJECT_NAME_ALREADY_EXIST");
+          const identifierError = errorData?.identifier?.includes("PROJECT_IDENTIFIER_ALREADY_EXIST");
+          const nameSpecialCharError = errorData?.name?.includes("PROJECT_NAME_CANNOT_CONTAIN_SPECIAL_CHARACTERS");
+
+          if (nameError || identifierError || nameSpecialCharError) {
+            if (nameError) {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: t("toast.error"),
+                message: t("project_name_already_taken"),
+              });
+            }
+
+            if (identifierError) {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: t("toast.error"),
+                message: t("project_identifier_already_taken"),
+              });
+            }
+
+            if (nameSpecialCharError) {
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: t("toast.error"),
+                message: t("project_name_cannot_contain_special_characters"),
+              });
+            }
+          } else {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: t("toast.error"),
+              message: t("something_went_wrong"),
+            });
+          }
+        } catch (error) {
+          // Fallback error handling if the error processing fails
+          console.error("Error processing API error:", error);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: t("something_went_wrong"),
+          });
+        }
+      });
+  };
+
+  const handleClose = () => {
+    onClose();
+    setShouldAutoSyncIdentifier(true);
+    setTimeout(() => {
+      reset();
+    }, 300);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <ProjectCreateHeader handleClose={handleClose} isMobile={isMobile} />
+
+      <form onSubmit={handleSubmit(onSubmit)} className="px-3">
+        <div className="mt-9 space-y-6 pb-5">
+          <ProjectCommonAttributes
+            setValue={setValue}
+            isMobile={isMobile}
+            shouldAutoSyncIdentifier={shouldAutoSyncIdentifier}
+            setShouldAutoSyncIdentifier={setShouldAutoSyncIdentifier}
+          />
+          <ProjectAttributes isMobile={isMobile} />
+        </div>
+        <ProjectCreateButtons handleClose={handleClose} />
+      </form>
+    </FormProvider>
+  );
+});
diff --git a/apps/web/core/components/projects/create/utils.ts b/apps/web/core/components/projects/create/utils.ts
new file mode 100644
index 0000000..513819b
--- /dev/null
+++ b/apps/web/core/components/projects/create/utils.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { RANDOM_EMOJI_CODES } from "@plane/constants";
+import type { IProject } from "@plane/types";
+import { getRandomCoverImage } from "@/helpers/cover-image.helper";
+
+export const getProjectFormValues = (): Partial<IProject> => ({
+  cover_image_url: getRandomCoverImage(),
+  description: "",
+  logo_props: {
+    in_use: "emoji",
+    emoji: {
+      value: RANDOM_EMOJI_CODES[Math.floor(Math.random() * RANDOM_EMOJI_CODES.length)],
+    },
+  },
+  identifier: "",
+  name: "",
+  network: 2,
+  project_lead: null,
+});
diff --git a/apps/web/core/components/projects/mobile-header.tsx b/apps/web/core/components/projects/mobile-header.tsx
new file mode 100644
index 0000000..175f9cd
--- /dev/null
+++ b/apps/web/core/components/projects/mobile-header.tsx
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { ChevronDownOutline, FilterOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { TProjectFilters } from "@plane/types";
+import { calculateTotalFilters } from "@plane/utils";
+// components
+import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { ProjectFiltersSelection } from "@/components/project/dropdowns/filters";
+import { ProjectOrderByDropdown } from "@/components/project/dropdowns/order-by";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectFilter } from "@/hooks/store/use-project-filter";
+
+export const ProjectsListMobileHeader = observer(function ProjectsListMobileHeader() {
+  // i18n
+  const { t } = useTranslation();
+  // router
+  const { workspaceSlug } = useParams();
+  const {
+    currentWorkspaceDisplayFilters: displayFilters,
+    currentWorkspaceFilters: filters,
+    updateDisplayFilters,
+    updateFilters,
+  } = useProjectFilter();
+
+  const {
+    workspace: { workspaceMemberIds },
+  } = useMember();
+
+  const handleFilters = useCallback(
+    (key: keyof TProjectFilters, value: string | string[]) => {
+      if (!workspaceSlug) return;
+      const newValues = filters?.[key] ?? [];
+      if (Array.isArray(value))
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
+        });
+      else {
+        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+      updateFilters(workspaceSlug.toString(), { [key]: newValues });
+    },
+    [filters, updateFilters, workspaceSlug]
+  );
+
+  const isFiltersApplied = calculateTotalFilters(filters ?? {}) !== 0;
+
+  return (
+    <div className="flex w-full border-b border-subtle bg-surface-1 py-2 md:hidden">
+      <ProjectOrderByDropdown
+        value={displayFilters?.order_by}
+        onChange={(val) => {
+          if (!workspaceSlug || val === displayFilters?.order_by) return;
+          updateDisplayFilters(workspaceSlug.toString(), {
+            order_by: val,
+          });
+        }}
+        isMobile
+      />
+      <div className="flex w-full justify-around border-l border-subtle">
+        <FiltersDropdown
+          icon={<FilterOutline className="h-3 w-3" />}
+          title={t("common.filters")}
+          placement="bottom-end"
+          menuButton={
+            <div className="flex items-center gap-2 text-13 text-secondary">
+              <FilterOutline className="h-3 w-3" />
+              {t("common.filters")}
+              <ChevronDownOutline className="h-3 w-3" />
+            </div>
+          }
+          isFiltersApplied={isFiltersApplied}
+        >
+          <ProjectFiltersSelection
+            displayFilters={displayFilters ?? {}}
+            filters={filters ?? {}}
+            handleFiltersUpdate={handleFilters}
+            handleDisplayFiltersUpdate={(val) => {
+              if (!workspaceSlug) return;
+              updateDisplayFilters(workspaceSlug.toString(), val);
+            }}
+            memberIds={workspaceMemberIds ?? undefined}
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/projects/page.tsx b/apps/web/core/components/projects/page.tsx
new file mode 100644
index 0000000..cb5af31
--- /dev/null
+++ b/apps/web/core/components/projects/page.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import { ProjectRoot } from "@/components/project/root";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+export const ProjectPageRoot = observer(function ProjectPageRoot() {
+  // router
+  const { workspaceSlug } = useParams();
+  // store
+  const { currentWorkspace } = useWorkspace();
+  const { fetchProjects } = useProject();
+  // fetching workspace projects
+  useSWR(
+    workspaceSlug && currentWorkspace ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace ? () => fetchProjects(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  return <ProjectRoot />;
+});
diff --git a/apps/web/core/components/projects/settings/intake/header.tsx b/apps/web/core/components/projects/settings/intake/header.tsx
new file mode 100644
index 0000000..a46617c
--- /dev/null
+++ b/apps/web/core/components/projects/settings/intake/header.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { IntakeOutline, RefreshOutline } from "@makeplane/propel/icons";
+// ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { InboxIssueCreateModalRoot } from "@/components/inbox/modals/create-modal";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web imports
+import { CommonProjectBreadcrumbs } from "@/components/breadcrumbs/common";
+
+export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
+  // states
+  const [createIssueModal, setCreateIssueModal] = useState(false);
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+
+  const { currentProjectDetails, loader: currentProjectDetailsLoader } = useProject();
+  const { loader } = useProjectInbox();
+
+  // derived value
+  const isAuthorized = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <div className="flex flex-grow items-center gap-4">
+          <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
+            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label="Intake"
+                  href={`/${workspaceSlug}/projects/${projectId}/intake/`}
+                  icon={<IntakeOutline className="h-4 w-4 text-tertiary" />}
+                  isLast
+                />
+              }
+              isLast
+            />
+          </Breadcrumbs>
+
+          {loader === "pagination-loading" && (
+            <div className="flex items-center gap-1.5 text-tertiary">
+              <RefreshOutline className="h-3.5 w-3.5 animate-spin" />
+              <p className="text-13">{t("syncing")}...</p>
+            </div>
+          )}
+        </div>
+      </Header.LeftItem>
+      <Header.RightItem>
+        {currentProjectDetails?.inbox_view && workspaceSlug && projectId && isAuthorized ? (
+          <div className="flex items-center gap-2">
+            <InboxIssueCreateModalRoot
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              modalState={createIssueModal}
+              handleModalClose={() => setCreateIssueModal(false)}
+            />
+            <Button variant="primary" size="lg" onClick={() => setCreateIssueModal(true)}>
+              {t("add_work_item")}
+            </Button>
+          </div>
+        ) : (
+          <></>
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});
diff --git a/apps/web/core/components/projects/settings/useProjectColumns.tsx b/apps/web/core/components/projects/settings/useProjectColumns.tsx
new file mode 100644
index 0000000..75e6156
--- /dev/null
+++ b/apps/web/core/components/projects/settings/useProjectColumns.tsx
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import type { IWorkspaceMember, TProjectMembership } from "@plane/types";
+import { renderFormattedDate } from "@plane/utils";
+// components
+import { MemberHeaderColumn } from "@/components/project/member-header-column";
+import { AccountTypeColumn, NameColumn } from "@/components/project/settings/member-columns";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import type { IMemberFilters } from "@/store/member/utils";
+
+export interface RowData extends Pick<TProjectMembership, "original_role"> {
+  member: IWorkspaceMember;
+}
+
+type TUseProjectColumnsProps = {
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const useProjectColumns = (props: TUseProjectColumnsProps) => {
+  const { projectId, workspaceSlug } = props;
+  // states
+  const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
+
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { allowPermissions, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+  const {
+    project: {
+      filters: { getFilters, updateFilters },
+    },
+  } = useMember();
+  // derived values
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    projectId.toString()
+  );
+  const currentProjectRole =
+    getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug.toString(), projectId.toString()) ?? EUserPermissions.GUEST;
+
+  const displayFilters = getFilters(projectId);
+
+  // handlers
+  const handleDisplayFilterUpdate = (filters: Partial<IMemberFilters>) => {
+    updateFilters(projectId, filters);
+  };
+
+  const columns = [
+    {
+      key: "Full Name",
+      content: "Full name",
+      thClassName: "text-left",
+      thRender: () => (
+        <MemberHeaderColumn
+          property="full_name"
+          displayFilters={displayFilters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+      tdRender: (rowData: RowData) => (
+        <NameColumn
+          rowData={rowData}
+          workspaceSlug={workspaceSlug}
+          isAdmin={isAdmin}
+          currentUser={currentUser}
+          setRemoveMemberModal={setRemoveMemberModal}
+        />
+      ),
+    },
+    {
+      key: "Display Name",
+      content: "Display name",
+      thRender: () => (
+        <MemberHeaderColumn
+          property="display_name"
+          displayFilters={displayFilters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+      tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
+    },
+    {
+      key: "Email",
+      content: "Email",
+      thRender: () => (
+        <MemberHeaderColumn
+          property="email"
+          displayFilters={displayFilters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+      tdRender: (rowData: RowData) => <div className="w-48 text-secondary">{rowData.member.email}</div>,
+    },
+    {
+      key: "Account Type",
+      content: "Account type",
+      thRender: () => (
+        <MemberHeaderColumn
+          property="role"
+          displayFilters={displayFilters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+      tdRender: (rowData: RowData) => (
+        <AccountTypeColumn
+          rowData={rowData}
+          currentProjectRole={currentProjectRole}
+          projectId={projectId}
+          workspaceSlug={workspaceSlug}
+        />
+      ),
+    },
+    {
+      key: "Joining Date",
+      content: "Joining date",
+      thRender: () => (
+        <MemberHeaderColumn
+          property="joining_date"
+          displayFilters={displayFilters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+      tdRender: (rowData: RowData) => <div>{renderFormattedDate(rowData?.member?.joining_date)}</div>,
+    },
+  ];
+  return {
+    columns,
+    removeMemberModal,
+    setRemoveMemberModal,
+    displayFilters,
+    handleDisplayFilterUpdate,
+  };
+};
diff --git a/apps/web/core/components/readonly/cycle.tsx b/apps/web/core/components/readonly/cycle.tsx
new file mode 100644
index 0000000..28a0772
--- /dev/null
+++ b/apps/web/core/components/readonly/cycle.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { CyclesOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+
+export type TReadonlyCycleProps = {
+  className?: string;
+  hideIcon?: boolean;
+  value: string | null;
+  placeholder?: string;
+  projectId: string | undefined;
+  workspaceSlug: string;
+};
+
+export const ReadonlyCycle = observer(function ReadonlyCycle(props: TReadonlyCycleProps) {
+  const { className, hideIcon = false, value, placeholder, projectId, workspaceSlug } = props;
+
+  const { t } = useTranslation();
+  const { getCycleNameById, fetchAllCycles } = useCycle();
+  const cycleName = value ? getCycleNameById(value) : null;
+
+  useEffect(() => {
+    if (projectId) {
+      fetchAllCycles(workspaceSlug, projectId);
+    }
+  }, [projectId, workspaceSlug]);
+
+  return (
+    <div className={cn("flex items-center gap-1 text-13", className)}>
+      {!hideIcon && <CyclesOutline className="size-4 flex-shrink-0" />}
+      <span className="flex-grow truncate">{cycleName ?? placeholder ?? t("common.none")}</span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/readonly/date.tsx b/apps/web/core/components/readonly/date.tsx
new file mode 100644
index 0000000..8592da8
--- /dev/null
+++ b/apps/web/core/components/readonly/date.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { CalendarOutline } from "@makeplane/propel/icons";
+import { cn, renderFormattedDate, getDate } from "@plane/utils";
+
+export type TReadonlyDateProps = {
+  className?: string;
+  hideIcon?: boolean;
+  value: Date | string | null;
+  placeholder?: string;
+  formatToken?: string;
+};
+
+export const ReadonlyDate = observer(function ReadonlyDate(props: TReadonlyDateProps) {
+  const { className, hideIcon = false, value, placeholder, formatToken } = props;
+
+  const { t } = useTranslation();
+  const formattedDate = value ? renderFormattedDate(getDate(value), formatToken) : null;
+
+  return (
+    <div className={cn("flex items-center gap-1 text-13", className)}>
+      {!hideIcon && <CalendarOutline className="size-4 flex-shrink-0" />}
+      <span className="flex-grow truncate">{formattedDate ?? placeholder ?? t("common.none")}</span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/readonly/estimate.tsx b/apps/web/core/components/readonly/estimate.tsx
new file mode 100644
index 0000000..9b28228
--- /dev/null
+++ b/apps/web/core/components/readonly/estimate.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { EstimateOutline } from "@makeplane/propel/icons";
+import { EEstimateSystem } from "@plane/types";
+import { cn, convertMinutesToHoursMinutesString } from "@plane/utils";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useEstimate } from "@/hooks/store/estimates/use-estimate";
+
+export type TReadonlyEstimateProps = {
+  className?: string;
+  hideIcon?: boolean;
+  value: string | undefined | null;
+  placeholder?: string;
+  projectId: string | undefined;
+  workspaceSlug: string;
+};
+
+export const ReadonlyEstimate = observer(function ReadonlyEstimate(props: TReadonlyEstimateProps) {
+  const { className, hideIcon = false, value, placeholder, projectId, workspaceSlug } = props;
+
+  const { t } = useTranslation();
+  const { currentActiveEstimateIdByProjectId, getEstimateById, getProjectEstimates } = useProjectEstimates();
+
+  const currentActiveEstimateId = projectId ? currentActiveEstimateIdByProjectId(projectId) : undefined;
+  const currentActiveEstimate = currentActiveEstimateId ? getEstimateById(currentActiveEstimateId) : undefined;
+  const { estimatePointById } = useEstimate(currentActiveEstimateId);
+
+  const estimatePoint = value ? estimatePointById(value) : null;
+
+  const displayValue = estimatePoint
+    ? currentActiveEstimate?.type === EEstimateSystem.TIME
+      ? convertMinutesToHoursMinutesString(Number(estimatePoint.value))
+      : estimatePoint.value
+    : null;
+
+  useEffect(() => {
+    if (projectId) {
+      getProjectEstimates(workspaceSlug, projectId);
+    }
+  }, [projectId, workspaceSlug]);
+
+  return (
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+      {!hideIcon && <EstimateOutline className="size-4 flex-shrink-0" />}
+      <span className="flex-grow truncate">{displayValue ?? placeholder ?? t("common.none")}</span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/readonly/index.tsx b/apps/web/core/components/readonly/index.tsx
new file mode 100644
index 0000000..dea8208
--- /dev/null
+++ b/apps/web/core/components/readonly/index.tsx
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Readonly components for displaying single values instead of interactive dropdowns
+// These components handle their own data fetching using internal hooks
+export { ReadonlyState, type TReadonlyStateProps } from "./state";
+export { ReadonlyPriority, type TReadonlyPriorityProps } from "./priority";
+export { ReadonlyMember, type TReadonlyMemberProps } from "./member";
+export { ReadonlyLabels, type TReadonlyLabelsProps } from "./labels";
+export { ReadonlyCycle, type TReadonlyCycleProps } from "./cycle";
+export { ReadonlyDate, type TReadonlyDateProps } from "./date";
+export { ReadonlyEstimate, type TReadonlyEstimateProps } from "./estimate";
+export { ReadonlyModule, type TReadonlyModuleProps } from "./module";
diff --git a/apps/web/core/components/readonly/labels.tsx b/apps/web/core/components/readonly/labels.tsx
new file mode 100644
index 0000000..eb0518d
--- /dev/null
+++ b/apps/web/core/components/readonly/labels.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// hooks
+import { useLabel } from "@/hooks/store/use-label";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+export type TReadonlyLabelsProps = {
+  className?: string;
+  hideIcon?: boolean;
+  value: string[];
+  placeholder?: string;
+  projectId: string | undefined;
+  workspaceSlug: string;
+};
+
+export const ReadonlyLabels = observer(function ReadonlyLabels(props: TReadonlyLabelsProps) {
+  const { className, value, projectId, workspaceSlug } = props;
+
+  const { getLabelById, fetchProjectLabels } = useLabel();
+  const { isMobile } = usePlatformOS();
+  const labels = value
+    .map((labelId) => getLabelById(labelId))
+    .filter((label): label is NonNullable<typeof label> => Boolean(label));
+
+  useEffect(() => {
+    if (projectId) {
+      fetchProjectLabels(workspaceSlug?.toString(), projectId);
+    }
+  }, [projectId, workspaceSlug]);
+
+  return (
+    <div className={cn("flex items-center gap-2 text-body-xs-regular", className)}>
+      {labels && (
+        <>
+          <Tooltip
+            label={`Labels: ${labels.map((l) => l?.name).join(", ")}`}
+            layout="stacked"
+            disabled={labels.length === 0 || isMobile}
+          >
+            <div className="flex h-full items-center gap-1 rounded-sm py-1 text-body-xs-bold">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
+              <span>{value.length}</span>
+              <span>Labels</span>
+            </div>
+          </Tooltip>
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/readonly/member.tsx b/apps/web/core/components/readonly/member.tsx
new file mode 100644
index 0000000..b2518b7
--- /dev/null
+++ b/apps/web/core/components/readonly/member.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { LucideIcon } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+// components
+import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+export type TReadonlyMemberProps = {
+  className?: string;
+  icon?: LucideIcon;
+  hideIcon?: boolean;
+  value: string | string[];
+  placeholder?: string;
+  multiple?: boolean;
+  projectId?: string;
+};
+
+export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyMemberProps) {
+  const { className, icon: Icon, hideIcon = false, value, placeholder, multiple = false } = props;
+
+  const { t } = useTranslation();
+  const { getUserDetails } = useMember();
+  const memberIds = Array.isArray(value) ? value : value ? [value] : [];
+  const members = memberIds.map((id) => getUserDetails(id)).filter(Boolean);
+
+  if (members.length === 0) {
+    return (
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+        {<ButtonAvatars showTooltip={false} userIds={value} icon={Icon} />}
+        <span className="flex-grow truncate">{placeholder ?? t("common.none")}</span>
+      </div>
+    );
+  }
+
+  if (multiple) {
+    return (
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+        {!hideIcon && Icon && <Icon className="h-3 w-3 flex-shrink-0" />}
+        <ButtonAvatars showTooltip={false} userIds={memberIds} />
+      </div>
+    );
+  }
+
+  const member = members[0];
+
+  return (
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+      {!hideIcon && Icon && <Icon className="size-4 flex-shrink-0" />}
+      <div className="flex items-center gap-2">
+        <div className="flex size-4 items-center justify-center rounded-full bg-layer-1">
+          <span className="text-13 font-medium">
+            {member?.display_name?.charAt(0) ?? member?.email?.charAt(0) ?? "?"}
+          </span>
+        </div>
+        <span className="flex-grow truncate">{member?.display_name ?? member?.email}</span>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/readonly/module.tsx b/apps/web/core/components/readonly/module.tsx
new file mode 100644
index 0000000..600488b
--- /dev/null
+++ b/apps/web/core/components/readonly/module.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { WorkItemsOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+
+export type TReadonlyModuleProps = {
+  className?: string;
+  hideIcon?: boolean;
+  value: string | string[] | null;
+  placeholder?: string;
+  projectId: string | undefined;
+  multiple?: boolean;
+  showCount?: boolean;
+  workspaceSlug: string;
+};
+
+export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyModuleProps) {
+  const {
+    className,
+    hideIcon = false,
+    value,
+    placeholder,
+    multiple = false,
+    showCount = true,
+    workspaceSlug,
+    projectId,
+  } = props;
+
+  const { t } = useTranslation();
+  const { getModuleById, fetchModules } = useModule();
+
+  const moduleIds = Array.isArray(value) ? value : value ? [value] : [];
+  const modules = moduleIds.map((id) => getModuleById(id)).filter(Boolean);
+
+  useEffect(() => {
+    if (moduleIds.length > 0 && projectId) {
+      fetchModules(workspaceSlug, projectId);
+    }
+  }, [value, projectId, workspaceSlug]);
+
+  if (modules.length === 0) {
+    return (
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+        {!hideIcon && <WorkItemsOutline className="size-4 flex-shrink-0" />}
+        <span className="flex-grow truncate">{placeholder ?? t("common.none")}</span>
+      </div>
+    );
+  }
+
+  if (multiple) {
+    const displayText =
+      showCount && modules.length > 1 ? `${modules[0]?.name} +${modules.length - 1}` : modules[0]?.name;
+
+    return (
+      <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+        {!hideIcon && <WorkItemsOutline className="size-4 flex-shrink-0" />}
+        <span className="flex-grow truncate">{displayText}</span>
+      </div>
+    );
+  }
+
+  const moduleItem = modules[0];
+  return (
+    <div className={cn("flex items-center gap-2 text-body-xs-regular", className)}>
+      {!hideIcon && <WorkItemsOutline className="size-4 flex-shrink-0" />}
+      <span className="flex-grow truncate">{moduleItem?.name}</span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/readonly/priority.tsx b/apps/web/core/components/readonly/priority.tsx
new file mode 100644
index 0000000..c3343ac
--- /dev/null
+++ b/apps/web/core/components/readonly/priority.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { PriorityIcon } from "@plane/propel/icons";
+import type { TIssuePriorities } from "@plane/types";
+import { cn } from "@plane/utils";
+
+export type TReadonlyPriorityProps = {
+  className?: string;
+  hideIcon?: boolean;
+  value: TIssuePriorities | undefined | null;
+  placeholder?: string;
+};
+
+export const ReadonlyPriority = observer(function ReadonlyPriority(props: TReadonlyPriorityProps) {
+  const { className, hideIcon = false, value, placeholder } = props;
+
+  const { t } = useTranslation();
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === value);
+
+  return (
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+      {!hideIcon && <PriorityIcon priority={value ?? "none"} size={12} className="flex-shrink-0" withContainer />}
+      <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder ?? t("common.none")}</span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/readonly/state.tsx b/apps/web/core/components/readonly/state.tsx
new file mode 100644
index 0000000..f041dcb
--- /dev/null
+++ b/apps/web/core/components/readonly/state.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+
+export type TReadonlyStateProps = {
+  className?: string;
+  iconSize?: string;
+  hideIcon?: boolean;
+  value: string | undefined | null;
+  placeholder?: string;
+  projectId: string | undefined;
+  workspaceSlug: string;
+};
+
+export const ReadonlyState = observer(function ReadonlyState(props: TReadonlyStateProps) {
+  const { className, iconSize = "size-4", hideIcon = false, value, placeholder, projectId, workspaceSlug } = props;
+  // states
+  const [stateLoader, setStateLoader] = useState(false);
+  const { t } = useTranslation();
+  const { getStateById, getProjectStateIds, fetchProjectStates } = useProjectState();
+  // derived values
+  const stateIds = getProjectStateIds(projectId);
+  const state = getStateById(value);
+
+  // fetch states if not provided
+  const fetchStates = async () => {
+    if ((stateIds === undefined || stateIds.length === 0) && projectId) {
+      setStateLoader(true);
+      try {
+        await fetchProjectStates(workspaceSlug, projectId);
+      } finally {
+        setStateLoader(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    fetchStates();
+  }, [projectId, workspaceSlug]);
+
+  if (stateLoader) {
+    return (
+      <Loader className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+        <Loader.Item height="16px" width="16px" className="rounded-full" />
+        <Loader.Item height="16px" width="50px" />
+      </Loader>
+    );
+  }
+
+  return (
+    <div className={cn("flex items-center gap-1 text-body-xs-regular", className)}>
+      {!hideIcon && (
+        <StateGroupIcon
+          stateGroup={state?.group ?? "backlog"}
+          className={cn(iconSize, "flex-shrink-0")}
+          color={state?.color}
+        />
+      )}
+      <span className="flex-grow truncate">{state?.name ?? placeholder ?? t("common.none")}</span>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/relations/index.tsx b/apps/web/core/components/relations/index.tsx
new file mode 100644
index 0000000..602fb01
--- /dev/null
+++ b/apps/web/core/components/relations/index.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { BlockingOutline, CloseCircleOutline, DuplicateOfOutline, RelatesToOutline } from "@makeplane/propel/icons";
+import type { TRelationObject } from "@/components/issues/issue-detail-widgets/relations";
+import type { TIssueRelationTypes } from "@plane/types";
+
+export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject> = {
+  relates_to: {
+    key: "relates_to",
+    i18n_label: "issue.relation.relates_to",
+    className: "bg-layer-1 text-secondary",
+    icon: (size) => <RelatesToOutline height={size} width={size} className="text-secondary" />,
+    placeholder: "Add related work items",
+  },
+  duplicate: {
+    key: "duplicate",
+    i18n_label: "issue.relation.duplicate",
+    className: "bg-layer-1 text-secondary",
+    icon: (size) => <DuplicateOfOutline width={size} height={size} className="text-secondary" />,
+    placeholder: "None",
+  },
+  blocked_by: {
+    key: "blocked_by",
+    i18n_label: "issue.relation.blocked_by",
+    className: "bg-danger-subtle text-danger-primary",
+    icon: (size) => <BlockingOutline width={size} height={size} className="text-secondary" />,
+    placeholder: "None",
+  },
+  blocking: {
+    key: "blocking",
+    i18n_label: "issue.relation.blocking",
+    className: "bg-yellow-500/20 text-yellow-700",
+    icon: (size) => <CloseCircleOutline width={size} height={size} className="text-secondary" />,
+    placeholder: "None",
+  },
+};
+
+export const useTimeLineRelationOptions = () => ISSUE_RELATION_OPTIONS;
diff --git a/apps/web/core/components/rich-filters/add-filters/button.tsx b/apps/web/core/components/rich-filters/add-filters/button.tsx
new file mode 100644
index 0000000..3d7d4f6
--- /dev/null
+++ b/apps/web/core/components/rich-filters/add-filters/button.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { FilterOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TButtonSize, TButtonVariant } from "@plane/propel/button";
+import { getButtonStyling } from "@plane/propel/button";
+import type { IFilterInstance } from "@plane/shared-state";
+import type { TExternalFilter, TFilterProperty, TSupportedOperators } from "@plane/types";
+import { LOGICAL_OPERATOR } from "@plane/types";
+import { cn } from "@plane/utils";
+// local imports
+import { AddFilterDropdown } from "./dropdown";
+
+export type TAddFilterButtonProps<P extends TFilterProperty, E extends TExternalFilter> = {
+  buttonConfig?: {
+    label: string | null;
+    variant?: TButtonVariant;
+    size?: TButtonSize;
+    className?: string;
+    defaultOpen?: boolean;
+    iconConfig?: {
+      shouldShowIcon: boolean;
+      iconComponent?: React.ElementType;
+    };
+    isDisabled?: boolean;
+  };
+  filter: IFilterInstance<P, E>;
+  onFilterSelect?: (id: string) => void;
+};
+
+export const AddFilterButton = observer(function AddFilterButton<P extends TFilterProperty, E extends TExternalFilter>(
+  props: TAddFilterButtonProps<P, E>
+) {
+  const { filter, buttonConfig, onFilterSelect } = props;
+  const {
+    variant = "secondary",
+    size = "base",
+    className,
+    label,
+    iconConfig = { shouldShowIcon: true },
+    isDisabled = false,
+  } = buttonConfig || {};
+  // derived values
+  const FilterIcon = iconConfig.iconComponent || FilterOutline;
+
+  const handleFilterSelect = (property: P, operator: TSupportedOperators, isNegation: boolean) => {
+    filter.addCondition(
+      LOGICAL_OPERATOR.AND,
+      {
+        property,
+        operator,
+        value: undefined,
+      },
+      isNegation
+    );
+    onFilterSelect?.(property);
+  };
+
+  if (isDisabled) return null;
+  return (
+    <AddFilterDropdown
+      {...props}
+      buttonConfig={{
+        ...buttonConfig,
+        className: cn(getButtonStyling(variant, size), "py-[5px]", className),
+      }}
+      handleFilterSelect={handleFilterSelect}
+      customButton={
+        <div className="flex items-center gap-1">
+          {iconConfig.shouldShowIcon && <FilterIcon className="size-4 text-secondary" />}
+          {label}
+        </div>
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/rich-filters/add-filters/dropdown.tsx b/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
new file mode 100644
index 0000000..505162b
--- /dev/null
+++ b/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { IFilterInstance } from "@plane/shared-state";
+import type { TExternalFilter, TFilterProperty, TSupportedOperators } from "@plane/types";
+import { CustomSearchSelect } from "@plane/ui";
+import { getOperatorForPayload } from "@plane/utils";
+
+export type TAddFilterDropdownProps<P extends TFilterProperty, E extends TExternalFilter> = {
+  customButton: React.ReactNode;
+  buttonConfig?: {
+    className?: string;
+    defaultOpen?: boolean;
+    isDisabled?: boolean;
+  };
+  filter: IFilterInstance<P, E>;
+  handleFilterSelect: (property: P, operator: TSupportedOperators, isNegation: boolean) => void;
+};
+
+export const AddFilterDropdown = observer(function AddFilterDropdown<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+>(props: TAddFilterDropdownProps<P, E>) {
+  const { filter, customButton, buttonConfig } = props;
+  const { className, defaultOpen = false, isDisabled = false } = buttonConfig || {};
+
+  // Transform available filter configs to CustomSearchSelect options format
+  const filterOptions = filter.configManager.allAvailableConfigs.map((config) => ({
+    value: config.id,
+    content: (
+      <div className="flex items-center justify-between gap-2 text-secondary transition-all duration-200 ease-in-out">
+        <div className="flex items-center gap-2">
+          {config.icon && (
+            <config.icon className="size-4 text-tertiary transition-transform duration-200 ease-in-out" />
+          )}
+          <span>{config.label}</span>
+        </div>
+        {config.rightContent}
+      </div>
+    ),
+    query: config.label.toLowerCase(),
+  }));
+
+  // If all filters are applied, show disabled options
+  const allFiltersApplied = filterOptions.length === 0;
+  const displayOptions = allFiltersApplied
+    ? [
+        {
+          value: "all_filters_applied",
+          content: <div className="text-placeholder italic">All filters applied</div>,
+          query: "all filters applied",
+          disabled: true,
+        },
+      ]
+    : filterOptions;
+
+  const handleFilterSelect = (property: P) => {
+    const config = filter.configManager.getConfigByProperty(property);
+    if (config?.firstOperator) {
+      const { operator, isNegation } = getOperatorForPayload(config.firstOperator);
+      props.handleFilterSelect(property, operator, isNegation);
+    } else {
+      setToast({
+        title: "Filter configuration error",
+        message: "This filter is not properly configured and cannot be applied",
+        type: TOAST_TYPE.ERROR,
+      });
+    }
+  };
+
+  return (
+    <div className="relative transition-all duration-200 ease-in-out">
+      <CustomSearchSelect
+        defaultOpen={defaultOpen}
+        value={""}
+        onChange={handleFilterSelect}
+        options={displayOptions}
+        optionsClassName="w-56"
+        maxHeight="2xl"
+        placement="bottom-start"
+        disabled={isDisabled}
+        customButtonClassName={className}
+        customButton={customButton}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filter-item/close-button.tsx b/apps/web/core/components/rich-filters/filter-item/close-button.tsx
new file mode 100644
index 0000000..1ad84be
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-item/close-button.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { CloseOutline } from "@makeplane/propel/icons";
+import type { IFilterInstance } from "@plane/shared-state";
+import type { TExternalFilter, TFilterProperty } from "@plane/types";
+
+interface FilterItemCloseButtonProps<P extends TFilterProperty, E extends TExternalFilter> {
+  conditionId: string;
+  filter: IFilterInstance<P, E>;
+}
+
+export const FilterItemCloseButton = observer(function FilterItemCloseButton<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+>(props: FilterItemCloseButtonProps<P, E>) {
+  const { conditionId, filter } = props;
+
+  const handleRemoveFilter = () => {
+    filter.removeCondition(conditionId);
+  };
+
+  return (
+    <button
+      onClick={handleRemoveFilter}
+      className="bg-layer-transparent px-1.5 text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary focus:outline-none"
+      type="button"
+      aria-label="Remove filter"
+    >
+      <CloseOutline className="size-3.5" />
+    </button>
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filter-item/container.tsx b/apps/web/core/components/rich-filters/filter-item/container.tsx
new file mode 100644
index 0000000..d956a89
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-item/container.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/propel/utils";
+import type { SingleOrArray, TFilterValue } from "@plane/types";
+import { hasValidValue } from "@plane/utils";
+
+interface FilterItemContainerProps {
+  children: React.ReactNode;
+  conditionValue: SingleOrArray<TFilterValue>;
+  showTransition: boolean;
+  variant?: "default" | "error";
+  tooltipContent?: string;
+}
+
+export function FilterItemContainer(props: FilterItemContainerProps) {
+  const { children, conditionValue, showTransition, variant = "default", tooltipContent } = props;
+  // refs
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  // effects
+  useEffect(() => {
+    if (!showTransition) return;
+
+    const element = itemRef.current;
+    if (!element) return;
+
+    if (hasValidValue(conditionValue)) return;
+
+    const applyInitialStyles = () => {
+      element.style.opacity = "0";
+      element.style.transform = "scale(0.95)";
+    };
+
+    const applyFinalStyles = () => {
+      // Force a reflow to ensure the initial state is applied
+      void element.offsetWidth;
+      element.style.opacity = "1";
+      element.style.transform = "scale(1)";
+    };
+
+    applyInitialStyles();
+    applyFinalStyles();
+
+    return () => {
+      applyInitialStyles();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Tooltip label={tooltipContent ?? ""} layout="stacked" side="bottom" disabled={!tooltipContent}>
+      <div
+        ref={itemRef}
+        className={cn("flex h-7 items-stretch overflow-hidden rounded-sm border transition-all duration-200", {
+          "border-subtle bg-surface-1": variant === "default",
+          "border-danger-strong bg-surface-2": variant === "error",
+        })}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/rich-filters/filter-item/invalid.tsx b/apps/web/core/components/rich-filters/filter-item/invalid.tsx
new file mode 100644
index 0000000..678f12d
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-item/invalid.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { WarningCircleOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TExternalFilter, TFilterProperty } from "@plane/types";
+// local imports
+import { FilterItemCloseButton } from "./close-button";
+import { FilterItemContainer } from "./container";
+import { FilterItemProperty } from "./property";
+import type { IFilterItemProps } from "./root";
+
+export const InvalidFilterItem = observer(function InvalidFilterItem<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+>(props: IFilterItemProps<P, E>) {
+  const { condition, filter, isDisabled = false, showTransition = true } = props;
+
+  return (
+    <FilterItemContainer
+      conditionValue={condition.value}
+      showTransition={showTransition}
+      variant="error"
+      tooltipContent="This filter condition is no longer valid. The property may have been deleted or your access to it may have changed."
+    >
+      {/* Property section */}
+      <FilterItemProperty
+        conditionId={condition.id}
+        icon={WarningCircleOutline}
+        label="Invalid filter"
+        filter={filter}
+        isDisabled={isDisabled}
+      />
+      {/* Remove button */}
+      {!isDisabled && <FilterItemCloseButton conditionId={condition.id} filter={filter} />}
+    </FilterItemContainer>
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filter-item/loader.tsx b/apps/web/core/components/rich-filters/filter-item/loader.tsx
new file mode 100644
index 0000000..508d754
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-item/loader.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Loader } from "@plane/ui";
+
+export function FilterItemLoader() {
+  return (
+    <Loader>
+      <Loader.Item height="28px" width="180px" />
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/rich-filters/filter-item/property.tsx b/apps/web/core/components/rich-filters/filter-item/property.tsx
new file mode 100644
index 0000000..8cbdefa
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-item/property.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/propel/utils";
+import type { IFilterInstance } from "@plane/shared-state";
+import type { TExternalFilter, TFilterProperty, TSupportedOperators } from "@plane/types";
+// local imports
+import { AddFilterDropdown } from "../add-filters/dropdown";
+import { COMMON_FILTER_ITEM_BORDER_CLASSNAME } from "../shared";
+
+interface IFilterItemPropertyProps<P extends TFilterProperty, E extends TExternalFilter> {
+  conditionId: string;
+  icon: React.FC<React.SVGAttributes<SVGElement>> | undefined;
+  isDisabled?: boolean;
+  filter: IFilterInstance<P, E>;
+  label: string;
+  tooltipContent?: string;
+}
+
+export const FilterItemProperty = observer(function FilterItemProperty<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+>(props: IFilterItemPropertyProps<P, E>) {
+  const { conditionId, filter, isDisabled } = props;
+
+  if (isDisabled) {
+    return <PropertyButton {...props} />;
+  }
+
+  const handleFilterSelect = (property: P, operator: TSupportedOperators, isNegation: boolean) => {
+    filter.updateConditionProperty(conditionId, property, operator, isNegation);
+  };
+
+  return (
+    <AddFilterDropdown
+      {...props}
+      handleFilterSelect={handleFilterSelect}
+      customButton={<PropertyButton {...props} />}
+    />
+  );
+});
+
+type TPropertyButtonProps<P extends TFilterProperty, E extends TExternalFilter> = IFilterItemPropertyProps<P, E> & {
+  className?: string;
+};
+
+function PropertyButton<P extends TFilterProperty, E extends TExternalFilter>(props: TPropertyButtonProps<P, E>) {
+  const { icon: Icon, label, tooltipContent, className } = props;
+
+  return (
+    <Tooltip label={tooltipContent ?? ""} layout="stacked" side="bottom" align="start" disabled={!tooltipContent}>
+      <div
+        className={cn(
+          "flex h-full min-w-0 items-center gap-1 px-2 py-[5px] text-11 text-tertiary",
+          COMMON_FILTER_ITEM_BORDER_CLASSNAME,
+          className
+        )}
+      >
+        {Icon && (
+          <div className="flex-shrink-0 transition-transform duration-200 ease-in-out">
+            <Icon className="size-3.5" />
+          </div>
+        )}
+        <span className="truncate">{label}</span>
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/rich-filters/filter-item/root.tsx b/apps/web/core/components/rich-filters/filter-item/root.tsx
new file mode 100644
index 0000000..0970d89
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-item/root.tsx
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { IFilterInstance } from "@plane/shared-state";
+import type {
+  SingleOrArray,
+  TExternalFilter,
+  TFilterProperty,
+  TFilterValue,
+  TFilterConditionNodeForDisplay,
+  TAllAvailableOperatorsForDisplay,
+} from "@plane/types";
+import { CustomSearchSelect } from "@plane/ui";
+import { cn, getOperatorForPayload } from "@plane/utils";
+// local imports
+import { FilterValueInput } from "../filter-value-input/root";
+import { COMMON_FILTER_ITEM_BORDER_CLASSNAME } from "../shared";
+import { FilterItemCloseButton } from "./close-button";
+import { FilterItemContainer } from "./container";
+import { InvalidFilterItem } from "./invalid";
+import { FilterItemLoader } from "./loader";
+import { FilterItemProperty } from "./property";
+
+export interface IFilterItemProps<P extends TFilterProperty, E extends TExternalFilter> {
+  condition: TFilterConditionNodeForDisplay<P, TFilterValue>;
+  filter: IFilterInstance<P, E>;
+  isDisabled?: boolean;
+  showTransition?: boolean;
+}
+
+export const FilterItem = observer(function FilterItem<P extends TFilterProperty, E extends TExternalFilter>(
+  props: IFilterItemProps<P, E>
+) {
+  const { condition, filter, isDisabled = false, showTransition = true } = props;
+  // derived values
+  const filterConfig = condition?.property ? filter.configManager.getConfigByProperty(condition.property) : undefined;
+  const operatorOptions = filterConfig
+    ?.getAllDisplayOperatorOptionsByValue(condition.value as TFilterValue)
+    .map((option) => ({
+      value: option.value,
+      content: option.label,
+      query: option.label.toLowerCase(),
+    }));
+  const selectedOperatorFieldConfig = filterConfig?.getOperatorConfig(condition.operator);
+  const selectedOperatorOption = filterConfig?.getDisplayOperatorByValue(
+    condition.operator,
+    condition.value as TFilterValue
+  );
+  // Disable operator selection when filter is disabled or only one operator option is available and selected
+  const isOperatorSelectionDisabled =
+    isDisabled ||
+    (condition.operator && operatorOptions?.length === 1 && operatorOptions[0]?.value === condition.operator);
+
+  const handleOperatorChange = (operator: TAllAvailableOperatorsForDisplay) => {
+    if (operator) {
+      const { operator: positiveOperator, isNegation } = getOperatorForPayload(operator);
+      filter.updateConditionOperator(condition.id, positiveOperator, isNegation);
+    }
+  };
+
+  const handleValueChange = (values: SingleOrArray<TFilterValue>) => {
+    filter.updateConditionValue(condition.id, values);
+  };
+
+  if (!filter.configManager.areConfigsReady) {
+    return <FilterItemLoader />;
+  }
+
+  if (!filterConfig) {
+    return (
+      <InvalidFilterItem
+        condition={condition}
+        filter={filter}
+        isDisabled={isDisabled}
+        showTransition={showTransition}
+      />
+    );
+  }
+
+  return (
+    <FilterItemContainer conditionValue={condition.value} showTransition={showTransition}>
+      {/* Property section */}
+      <FilterItemProperty
+        conditionId={condition.id}
+        filter={filter}
+        icon={filterConfig.icon}
+        isDisabled={isDisabled}
+        label={filterConfig.label}
+        tooltipContent={typeof filterConfig.tooltipContent === "string" ? filterConfig.tooltipContent : undefined}
+      />
+
+      {/* Operator section */}
+      <CustomSearchSelect
+        value={condition.operator}
+        onChange={handleOperatorChange}
+        options={operatorOptions}
+        className={COMMON_FILTER_ITEM_BORDER_CLASSNAME}
+        customButtonClassName={cn(
+          "h-full px-2 text-13 font-regular",
+          isOperatorSelectionDisabled && "hover:bg-layer-2-hover"
+        )}
+        optionsClassName="w-48"
+        maxHeight="2xl"
+        disabled={isOperatorSelectionDisabled}
+        customButton={
+          <div className="flex h-full items-center" aria-disabled={isOperatorSelectionDisabled}>
+            {filterConfig.getLabelForOperator(selectedOperatorOption)}
+          </div>
+        }
+      />
+
+      {/* Value section */}
+      {selectedOperatorFieldConfig && (
+        <FilterValueInput
+          filterFieldConfig={selectedOperatorFieldConfig}
+          condition={condition}
+          onChange={handleValueChange}
+          isDisabled={isDisabled}
+        />
+      )}
+
+      {/* Remove button */}
+      {!isDisabled && <FilterItemCloseButton conditionId={condition.id} filter={filter} />}
+    </FilterItemContainer>
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx b/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx
new file mode 100644
index 0000000..8a96acf
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-value-input/date/range.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { TDateRangeFilterFieldConfig, TFilterConditionNodeForDisplay, TFilterProperty } from "@plane/types";
+import { cn, isValidDate, renderFormattedPayloadDate, toFilterArray } from "@plane/utils";
+// components
+import { DateRangeDropdown } from "@/components/dropdowns/date-range";
+// local imports
+import { COMMON_FILTER_ITEM_BORDER_CLASSNAME, EMPTY_FILTER_PLACEHOLDER_TEXT } from "../../shared";
+
+type TDateRangeFilterValueInputProps<P extends TFilterProperty> = {
+  config: TDateRangeFilterFieldConfig<string>;
+  condition: TFilterConditionNodeForDisplay<P, string>;
+  isDisabled?: boolean;
+  onChange: (value: string[]) => void;
+};
+
+export const DateRangeFilterValueInput = observer(function DateRangeFilterValueInput<P extends TFilterProperty>(
+  props: TDateRangeFilterValueInputProps<P>
+) {
+  const { config, condition, isDisabled, onChange } = props;
+  // derived values
+  const [fromRaw, toRaw] = toFilterArray(condition.value) ?? [];
+  const from = isValidDate(fromRaw) ? new Date(fromRaw) : undefined;
+  const to = isValidDate(toRaw) ? new Date(toRaw) : undefined;
+  const isIncomplete = !from || !to;
+
+  // Handler for date range selection
+  const handleSelect = (range: { from?: Date; to?: Date } | undefined) => {
+    const formattedFrom = range?.from ? renderFormattedPayloadDate(range.from) : undefined;
+    const formattedTo = range?.to ? renderFormattedPayloadDate(range.to) : undefined;
+    if (formattedFrom && formattedTo) {
+      onChange([formattedFrom, formattedTo]);
+    } else {
+      onChange([]);
+    }
+  };
+
+  return (
+    <DateRangeDropdown
+      value={{ from, to }}
+      onSelect={handleSelect}
+      minDate={config.min}
+      maxDate={config.max}
+      mergeDates
+      placeholder={{ from: EMPTY_FILTER_PLACEHOLDER_TEXT }}
+      buttonVariant="transparent-with-text"
+      buttonClassName={cn("rounded-none", {
+        [COMMON_FILTER_ITEM_BORDER_CLASSNAME]: !isDisabled,
+        "text-danger-primary": isIncomplete,
+        "hover:bg-surface-1": isDisabled,
+      })}
+      renderPlaceholder
+      renderInPortal
+      defaultOpen={isIncomplete}
+      disabled={isDisabled}
+    />
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filter-value-input/date/single.tsx b/apps/web/core/components/rich-filters/filter-value-input/date/single.tsx
new file mode 100644
index 0000000..0eb70df
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-value-input/date/single.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type { TDateFilterFieldConfig, TFilterConditionNodeForDisplay, TFilterProperty } from "@plane/types";
+import { cn, renderFormattedPayloadDate } from "@plane/utils";
+import { DateDropdown } from "@/components/dropdowns/date";
+import { COMMON_FILTER_ITEM_BORDER_CLASSNAME, EMPTY_FILTER_PLACEHOLDER_TEXT } from "../../shared";
+
+type TSingleDateFilterValueInputProps<P extends TFilterProperty> = {
+  config: TDateFilterFieldConfig<string>;
+  condition: TFilterConditionNodeForDisplay<P, string>;
+  isDisabled?: boolean;
+  onChange: (value: string | null | undefined) => void;
+};
+
+export const SingleDateFilterValueInput = observer(function SingleDateFilterValueInput<P extends TFilterProperty>(
+  props: TSingleDateFilterValueInputProps<P>
+) {
+  const { config, condition, isDisabled, onChange } = props;
+  // derived values
+  const conditionValue = typeof condition.value === "string" ? condition.value : null;
+
+  return (
+    <DateDropdown
+      value={conditionValue}
+      onChange={(value: Date | null) => {
+        const formattedDate = value ? renderFormattedPayloadDate(value) : null;
+        onChange(formattedDate);
+      }}
+      buttonClassName={cn("rounded-none", {
+        [COMMON_FILTER_ITEM_BORDER_CLASSNAME]: !isDisabled,
+        "text-placeholder": !conditionValue,
+        "hover:bg-surface-1": isDisabled,
+      })}
+      minDate={config.min}
+      maxDate={config.max}
+      icon={null}
+      placeholder={EMPTY_FILTER_PLACEHOLDER_TEXT}
+      buttonVariant="transparent-with-text"
+      isClearable={false}
+      closeOnSelect
+      defaultOpen={!conditionValue}
+      disabled={isDisabled}
+    />
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filter-value-input/root.tsx b/apps/web/core/components/rich-filters/filter-value-input/root.tsx
new file mode 100644
index 0000000..9a87c0c
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-value-input/root.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+import { observer } from "mobx-react";
+// plane imports
+import type {
+  TFilterConditionNode,
+  TFilterValue,
+  TFilterProperty,
+  SingleOrArray,
+  TSingleSelectFilterFieldConfig,
+  TMultiSelectFilterFieldConfig,
+  TDateFilterFieldConfig,
+  TDateRangeFilterFieldConfig,
+  TFilterConditionNodeForDisplay,
+} from "@plane/types";
+import { FILTER_FIELD_TYPE } from "@plane/types";
+import type { TFilterValueInputProps } from "../shared";
+import { DateRangeFilterValueInput } from "./date/range";
+import { SingleDateFilterValueInput } from "./date/single";
+import { MultiSelectFilterValueInput } from "./select/multi";
+import { SingleSelectFilterValueInput } from "./select/single";
+
+export const FilterValueInput = observer(function FilterValueInput<P extends TFilterProperty, V extends TFilterValue>(
+  props: TFilterValueInputProps<P, V>
+) {
+  const { condition, filterFieldConfig, isDisabled = false, onChange } = props;
+
+  // Single select input
+  if (filterFieldConfig?.type === FILTER_FIELD_TYPE.SINGLE_SELECT) {
+    return (
+      <SingleSelectFilterValueInput<P>
+        config={filterFieldConfig as TSingleSelectFilterFieldConfig<string>}
+        condition={condition as TFilterConditionNodeForDisplay<P, string>}
+        isDisabled={isDisabled}
+        onChange={(value) => onChange(value as SingleOrArray<V>)}
+      />
+    );
+  }
+
+  // Multi select input
+  if (filterFieldConfig?.type === FILTER_FIELD_TYPE.MULTI_SELECT) {
+    return (
+      <MultiSelectFilterValueInput<P>
+        config={filterFieldConfig as TMultiSelectFilterFieldConfig<string>}
+        condition={condition as TFilterConditionNode<P, string>}
+        isDisabled={isDisabled}
+        onChange={(value) => onChange(value as SingleOrArray<V>)}
+      />
+    );
+  }
+
+  // Date filter input
+  if (filterFieldConfig?.type === FILTER_FIELD_TYPE.DATE) {
+    return (
+      <SingleDateFilterValueInput<P>
+        config={filterFieldConfig as TDateFilterFieldConfig<string>}
+        condition={condition as TFilterConditionNodeForDisplay<P, string>}
+        isDisabled={isDisabled}
+        onChange={(value) => onChange(value as SingleOrArray<V>)}
+      />
+    );
+  }
+
+  // Date range filter input
+  if (filterFieldConfig?.type === FILTER_FIELD_TYPE.DATE_RANGE) {
+    return (
+      <DateRangeFilterValueInput<P>
+        config={filterFieldConfig as TDateRangeFilterFieldConfig<string>}
+        condition={condition as TFilterConditionNodeForDisplay<P, string>}
+        isDisabled={isDisabled}
+        onChange={(value) => onChange(value as SingleOrArray<V>)}
+      />
+    );
+  }
+
+  return <AdditionalFilterValueInput {...props} />;
+});
+
+export const AdditionalFilterValueInput = observer(function AdditionalFilterValueInput<
+  P extends TFilterProperty,
+  V extends TFilterValue,
+>(_props: TFilterValueInputProps<P, V>) {
+  return (
+    // Fallback
+    <div className="flex h-full cursor-not-allowed items-center px-4 text-11 text-placeholder transition-opacity duration-200">
+      Filter type not supported
+    </div>
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx
new file mode 100644
index 0000000..2c5fb40
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/multi.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState, useEffect, useMemo } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type {
+  SingleOrArray,
+  IFilterOption,
+  TFilterProperty,
+  TMultiSelectFilterFieldConfig,
+  TFilterConditionNodeForDisplay,
+} from "@plane/types";
+import { CustomSearchSelect } from "@plane/ui";
+import { toFilterArray, getFilterValueLength } from "@plane/utils";
+// local imports
+import { SelectedOptionsDisplay } from "./selected-options-display";
+import { getCommonCustomSearchSelectProps, getFormattedOptions, loadOptions } from "./shared";
+
+type TMultiSelectFilterValueInputProps<P extends TFilterProperty> = {
+  config: TMultiSelectFilterFieldConfig<string>;
+  condition: TFilterConditionNodeForDisplay<P, string>;
+  isDisabled?: boolean;
+  onChange: (values: SingleOrArray<string>) => void;
+};
+
+export const MultiSelectFilterValueInput = observer(function MultiSelectFilterValueInput<P extends TFilterProperty>(
+  props: TMultiSelectFilterValueInputProps<P>
+) {
+  const { config, condition, isDisabled, onChange } = props;
+  // states
+  const [options, setOptions] = useState<IFilterOption<string>[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  // derived values
+  const formattedOptions = useMemo(() => getFormattedOptions<string>(options), [options]);
+
+  useEffect(() => {
+    loadOptions({ config, setOptions, setLoading });
+  }, [config]);
+
+  const handleSelectChange = (values: string[]) => {
+    onChange(values);
+  };
+
+  return (
+    <CustomSearchSelect
+      {...getCommonCustomSearchSelectProps(isDisabled)}
+      value={toFilterArray(condition.value)}
+      onChange={handleSelectChange}
+      options={formattedOptions}
+      multiple
+      disabled={loading || isDisabled}
+      customButton={<SelectedOptionsDisplay<string> selectedValue={condition.value} options={options} />}
+      defaultOpen={getFilterValueLength(condition.value) === 0}
+    />
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx
new file mode 100644
index 0000000..3dd7516
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/selected-options-display.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Transition } from "@headlessui/react";
+// plane imports
+import type { SingleOrArray, IFilterOption, TFilterValue } from "@plane/types";
+import { cn, toFilterArray } from "@plane/utils";
+import { EMPTY_FILTER_PLACEHOLDER_TEXT } from "../../shared";
+
+type TSelectedOptionsDisplayProps<V extends TFilterValue> = {
+  selectedValue: SingleOrArray<V>;
+  options: IFilterOption<V>[];
+  displayCount?: number;
+  emptyValue?: string;
+  fallbackText?: string;
+};
+
+export function SelectedOptionsDisplay<V extends TFilterValue>(props: TSelectedOptionsDisplayProps<V>) {
+  const { selectedValue, options, displayCount = 2, emptyValue = EMPTY_FILTER_PLACEHOLDER_TEXT, fallbackText } = props;
+  // derived values
+  const selectedArray = toFilterArray(selectedValue);
+  const remainingCount = selectedArray.length - displayCount;
+  const selectedOptions = selectedArray
+    .map((value) => options.find((opt) => opt.value === value))
+    .filter(Boolean) as IFilterOption<V>[];
+
+  // When no value is selected, display the empty value
+  if (selectedArray.length === 0) {
+    return <span className="text-placeholder">{emptyValue}</span>;
+  }
+
+  // When no options are found but we have a fallback text
+  if (options.length === 0) {
+    return <span className="text-placeholder">{fallbackText ?? `${selectedArray.length} option(s) selected`}</span>;
+  }
+
+  return (
+    <div className="flex h-full items-center overflow-hidden">
+      {selectedOptions.slice(0, displayCount).map((option, index) => (
+        <React.Fragment key={index}>
+          <div className="flex items-center whitespace-nowrap">
+            {option?.icon && <span className={cn("mr-1", option.iconClassName)}>{option.icon}</span>}
+            <span className="max-w-24 truncate">{option?.label}</span>
+          </div>
+          {index < Math.min(displayCount, selectedOptions.length) - 1 && <span className="mx-1 text-tertiary">,</span>}
+        </React.Fragment>
+      ))}
+      {remainingCount > 0 && (
+        <Transition
+          as="div"
+          show
+          appear
+          enter="transition-opacity duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          className="ml-1 whitespace-nowrap text-tertiary"
+        >
+          +{remainingCount} more
+        </Transition>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/shared.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/shared.tsx
new file mode 100644
index 0000000..a948b26
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/shared.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TSupportedFilterFieldConfigs, IFilterOption, TFilterValue } from "@plane/types";
+import { cn } from "@plane/utils";
+// local imports
+import { COMMON_FILTER_ITEM_BORDER_CLASSNAME } from "../../shared";
+
+type TLoadOptionsProps<V extends TFilterValue> = {
+  config: TSupportedFilterFieldConfigs<V>;
+  setOptions: (options: IFilterOption<V>[]) => void;
+  setLoading?: (loading: boolean) => void;
+};
+
+export const loadOptions = async <V extends TFilterValue>(props: TLoadOptionsProps<V>) => {
+  const { config, setOptions, setLoading } = props;
+
+  // if the config has a getOptions function, load the options
+  if ("getOptions" in config && typeof config.getOptions === "function") {
+    setLoading?.(true);
+    try {
+      const result = await config.getOptions();
+      setOptions(result);
+    } catch (error) {
+      console.error("Failed to load options:", error);
+    } finally {
+      setLoading?.(false);
+    }
+  }
+};
+
+export const getFormattedOptions = <V extends TFilterValue>(options: IFilterOption<V>[]) =>
+  options.map((option) => ({
+    value: option.value,
+    content: (
+      <div className="flex items-center gap-2 transition-all duration-200 ease-in-out">
+        {option.icon && (
+          <span className={cn("transition-transform duration-200", option.iconClassName)}>{option.icon}</span>
+        )}
+        <span>{option.label}</span>
+      </div>
+    ),
+    query: option.label.toString().toLowerCase(),
+    disabled: option.disabled,
+    tooltip: option.description,
+  }));
+
+export const getCommonCustomSearchSelectProps = (isDisabled?: boolean) => ({
+  customButtonClassName: cn(
+    "h-full w-full px-2 text-13 font-regular transition-all duration-300 ease-in-out",
+    !isDisabled && COMMON_FILTER_ITEM_BORDER_CLASSNAME,
+    isDisabled && "hover:bg-surface-1"
+  ),
+  optionsClassName: "w-56",
+  maxHeight: "md" as const,
+});
diff --git a/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx b/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx
new file mode 100644
index 0000000..2e525b5
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filter-value-input/select/single.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState, useEffect, useMemo } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import type {
+  IFilterOption,
+  TFilterProperty,
+  TSingleSelectFilterFieldConfig,
+  TFilterConditionNodeForDisplay,
+} from "@plane/types";
+import { CustomSearchSelect } from "@plane/ui";
+// local imports
+import { SelectedOptionsDisplay } from "./selected-options-display";
+import { getCommonCustomSearchSelectProps, getFormattedOptions, loadOptions } from "./shared";
+
+type TSingleSelectFilterValueInputProps<P extends TFilterProperty> = {
+  config: TSingleSelectFilterFieldConfig<string>;
+  condition: TFilterConditionNodeForDisplay<P, string>;
+  isDisabled?: boolean;
+  onChange: (value: string | null) => void;
+};
+
+export const SingleSelectFilterValueInput = observer(function SingleSelectFilterValueInput<P extends TFilterProperty>(
+  props: TSingleSelectFilterValueInputProps<P>
+) {
+  const { config, condition, onChange, isDisabled } = props;
+  // states
+  const [options, setOptions] = useState<IFilterOption<string>[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  // derived values
+  const formattedOptions = useMemo(() => getFormattedOptions<string>(options), [options]);
+
+  useEffect(() => {
+    loadOptions({ config, setOptions, setLoading });
+  }, [config]);
+
+  const handleSelectChange = (value: string) => {
+    if (value === condition.value) {
+      onChange(null);
+    } else {
+      onChange(value);
+    }
+  };
+
+  return (
+    <CustomSearchSelect
+      {...getCommonCustomSearchSelectProps(isDisabled)}
+      value={condition.value}
+      onChange={handleSelectChange}
+      options={formattedOptions}
+      multiple={false}
+      disabled={loading || isDisabled}
+      customButton={
+        <SelectedOptionsDisplay<string> selectedValue={condition.value} options={options} displayCount={1} />
+      }
+      defaultOpen={!condition.value}
+    />
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filters-row.tsx b/apps/web/core/components/rich-filters/filters-row.tsx
new file mode 100644
index 0000000..9a836fc
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import { AddFilterOutline } from "@makeplane/propel/icons";
+import { Transition } from "@headlessui/react";
+// plane imports
+import { Button } from "@plane/propel/button";
+import type { IFilterInstance } from "@plane/shared-state";
+import type { TExternalFilter, TFilterProperty } from "@plane/types";
+import { cn, EHeaderVariant, Header, Loader } from "@plane/ui";
+// local imports
+import type { TAddFilterButtonProps } from "./add-filters/button";
+import { AddFilterButton } from "./add-filters/button";
+import { FilterItem } from "./filter-item/root";
+
+export type TFiltersRowProps<K extends TFilterProperty, E extends TExternalFilter> = {
+  buttonConfig?: TAddFilterButtonProps<K, E>["buttonConfig"];
+  disabledAllOperations?: boolean;
+  filter: IFilterInstance<K, E>;
+  variant?: "modal" | "header";
+};
+
+export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty, E extends TExternalFilter>(
+  props: TFiltersRowProps<K, E>
+) {
+  const { buttonConfig, disabledAllOperations: disabledAllOperationsProp = false, filter, variant = "header" } = props;
+  // states
+  const [isUpdating, setIsUpdating] = useState(false);
+  // derived values
+  const disabledAllOperations = disabledAllOperationsProp || !filter.configManager.areConfigsReady;
+  const hasAnyConditions = filter.allConditionsForDisplay.length > 0;
+  const hasAvailableOperations =
+    !disabledAllOperations && (filter.canClearFilters || filter.canSaveView || filter.canUpdateView);
+
+  const headerButtonConfig: Partial<TAddFilterButtonProps<K, E>["buttonConfig"]> = {
+    label: null,
+  };
+
+  const modalButtonConfig: Partial<TAddFilterButtonProps<K, E>["buttonConfig"]> = {
+    label: !hasAnyConditions ? "Filters" : null,
+  };
+
+  const handleUpdate = useCallback(async () => {
+    setIsUpdating(true);
+    try {
+      await filter.updateView();
+    } finally {
+      setTimeout(() => setIsUpdating(false), 240); // To avoid flickering
+    }
+  }, [filter]);
+
+  const leftContent = (
+    <>
+      {filter.allConditionsForDisplay.map((condition) => (
+        <FilterItem key={condition.id} filter={filter} condition={condition} isDisabled={disabledAllOperations} />
+      ))}
+      <AddFilterButton
+        filter={filter}
+        buttonConfig={{
+          label: null,
+          ...(variant === "modal" ? modalButtonConfig : headerButtonConfig),
+          size: "lg",
+          iconConfig: {
+            shouldShowIcon: true,
+            iconComponent: AddFilterOutline,
+          },
+          ...buttonConfig,
+          isDisabled: disabledAllOperations,
+        }}
+      />
+    </>
+  );
+
+  const rightContent = !disabledAllOperations && (
+    <>
+      <ElementTransition show={filter.canClearFilters}>
+        <Button variant="secondary" className={COMMON_OPERATION_BUTTON_CLASSNAME} onClick={filter.clearFilters}>
+          {filter.clearFilterOptions?.label ?? "Clear all"}
+        </Button>
+      </ElementTransition>
+      <ElementTransition show={filter.canSaveView}>
+        <Button variant="secondary" className={COMMON_OPERATION_BUTTON_CLASSNAME} onClick={filter.saveView}>
+          {filter.saveViewOptions?.label ?? "Save view"}
+        </Button>
+      </ElementTransition>
+      <ElementTransition show={filter.canUpdateView}>
+        <Button
+          variant="secondary"
+          className={COMMON_OPERATION_BUTTON_CLASSNAME}
+          onClick={handleUpdate}
+          loading={isUpdating}
+          disabled={isUpdating}
+        >
+          {isUpdating ? "Confirming" : (filter.updateViewOptions?.label ?? "Update view")}
+        </Button>
+      </ElementTransition>
+    </>
+  );
+
+  const mainContent = (
+    <div className="flex w-full items-start gap-2 rounded-lg bg-layer-1 px-4 py-2">
+      <div className="flex w-full flex-wrap items-center gap-2">{leftContent}</div>
+      <div
+        className={cn("flex items-center gap-2 border-l border-subtle pl-4", {
+          "border-l-transparent pl-0": !hasAvailableOperations,
+        })}
+      >
+        {rightContent}
+      </div>
+    </div>
+  );
+
+  const ModalVariant = (
+    <div className="flex min-h-11 w-full flex-wrap items-center gap-2 rounded-lg bg-layer-1 p-2">{mainContent}</div>
+  );
+
+  const HeaderVariant = (
+    <Header variant={EHeaderVariant.TERNARY} className="min-h-11 bg-surface-1 !px-3">
+      {mainContent}
+    </Header>
+  );
+
+  if (!filter.configManager.areConfigsReady && !hasAnyConditions) {
+    return (
+      <RowTransition show={filter.isVisible}>
+        <Loader>
+          <Loader.Item height="44px" width="100%" className={cn({ "rounded-none": variant === "header" })} />
+        </Loader>
+      </RowTransition>
+    );
+  }
+
+  return <RowTransition show={filter.isVisible}>{variant === "modal" ? ModalVariant : HeaderVariant}</RowTransition>;
+});
+
+const COMMON_OPERATION_BUTTON_CLASSNAME = "py-1";
+
+type TElementTransitionProps = {
+  children: React.ReactNode;
+  show: boolean;
+};
+
+const ElementTransition = observer(function ElementTransition(props: TElementTransitionProps) {
+  return (
+    <Transition
+      as="div"
+      show={props.show}
+      enter="transition ease-out duration-200"
+      enterFrom="opacity-0 scale-95"
+      enterTo="opacity-100 scale-100"
+      leave="transition ease-in duration-150"
+      leaveFrom="opacity-100 scale-100"
+      leaveTo="opacity-0 scale-95"
+    >
+      {props.children}
+    </Transition>
+  );
+});
+
+type TRowTransitionProps = {
+  children: React.ReactNode;
+  show: boolean;
+};
+
+const RowTransition = observer(function RowTransition(props: TRowTransitionProps) {
+  return (
+    <Transition
+      as="div"
+      show={props.show}
+      enter="transition-all duration-150 ease-out"
+      enterFrom="opacity-0 -translate-y-1"
+      enterTo="opacity-100 translate-y-0"
+      leave="transition-all duration-100 ease-in"
+      leaveFrom="opacity-100 translate-y-0"
+      leaveTo="opacity-0 -translate-y-1"
+    >
+      {props.children}
+    </Transition>
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filters-toggle.tsx b/apps/web/core/components/rich-filters/filters-toggle.tsx
new file mode 100644
index 0000000..cbc7bcf
--- /dev/null
+++ b/apps/web/core/components/rich-filters/filters-toggle.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { IconButton } from "@plane/propel/icon-button";
+import { FilterOutline, SelectedFilterOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+import type { IFilterInstance } from "@plane/shared-state";
+import type { TExternalFilter, TFilterProperty } from "@plane/types";
+// components
+import { AddFilterButton } from "@/components/rich-filters/add-filters/button";
+
+type TFiltersToggleProps<P extends TFilterProperty, E extends TExternalFilter> = {
+  filter: IFilterInstance<P, E> | undefined;
+};
+
+const COMMON_CLASSNAME =
+  "grid place-items-center h-7 w-full py-0.5 px-2 rounded-md border border-subtle-1 transition-all duration-200 cursor-pointer";
+
+export const FiltersToggle = observer(function FiltersToggle<P extends TFilterProperty, E extends TExternalFilter>(
+  props: TFiltersToggleProps<P, E>
+) {
+  const { filter } = props;
+  // derived values
+  const hasAnyConditions = (filter?.allConditionsForDisplay.length ?? 0) > 0;
+  const isFilterRowVisible = filter?.isVisible ?? false;
+  const hasUpdates = filter?.canUpdateView === true && filter?.hasChanges === true;
+  const showFilterRowChangesPill = hasUpdates || hasAnyConditions === true;
+  const showAddFilterButton = !hasAnyConditions && !isFilterRowVisible && !hasUpdates;
+
+  const handleToggleFilter = () => {
+    if (!filter) {
+      console.error("Filters toggle error - filter instance not available");
+      return;
+    }
+    filter.toggleVisibility();
+  };
+
+  // Base classes when filter is active
+  const activeFilterBaseClasses =
+    "text-accent-primary border border-accent-subtle-1 hover:border-accent-subtle-1 active:border-accent-subtle-1 focus:border-accent-subtle-1";
+
+  // State classes that prevent hover/active/focus color changes
+  const noHoverStateClasses = "hover:text-accent-primary active:text-accent-primary focus:text-accent-primary";
+
+  // Background classes based on toggle state (darker when open, lighter when closed)
+  const backgroundClasses = isFilterRowVisible
+    ? "bg-accent-subtle-hover hover:bg-accent-subtle-hover active:bg-accent-subtle-hover focus:bg-accent-subtle-hover"
+    : "bg-accent-subtle hover:bg-accent-subtle active:bg-accent-subtle focus:bg-accent-subtle";
+
+  const buttonClassName = cn({
+    [activeFilterBaseClasses]: showFilterRowChangesPill,
+    [backgroundClasses]: showFilterRowChangesPill,
+    [noHoverStateClasses]: showFilterRowChangesPill,
+  });
+
+  const iconClassName = cn({
+    "text-accent-primary [&_path]:fill-current": showFilterRowChangesPill,
+  });
+
+  // Show the add filter button when there are no active conditions, the filter row is hidden, and no unsaved changes exist
+  if (filter && showAddFilterButton) {
+    return (
+      <AddFilterButton
+        filter={filter}
+        buttonConfig={{
+          variant: "secondary",
+          className: COMMON_CLASSNAME,
+          label: null,
+        }}
+        onFilterSelect={() => filter?.toggleVisibility(true)}
+      />
+    );
+  }
+
+  return (
+    <IconButton
+      size="lg"
+      variant="secondary"
+      icon={showFilterRowChangesPill ? SelectedFilterOutline : FilterOutline}
+      onClick={handleToggleFilter}
+      className={buttonClassName}
+      iconClassName={iconClassName}
+    />
+  );
+});
diff --git a/apps/web/core/components/rich-filters/shared.ts b/apps/web/core/components/rich-filters/shared.ts
new file mode 100644
index 0000000..498ac42
--- /dev/null
+++ b/apps/web/core/components/rich-filters/shared.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  SingleOrArray,
+  TFilterConditionNodeForDisplay,
+  TFilterProperty,
+  TFilterValue,
+  TSupportedFilterFieldConfigs,
+} from "@plane/types";
+
+export const COMMON_FILTER_ITEM_BORDER_CLASSNAME = "border-r border-subtle-1";
+
+export const EMPTY_FILTER_PLACEHOLDER_TEXT = "--";
+
+export type TFilterValueInputProps<P extends TFilterProperty, V extends TFilterValue> = {
+  condition: TFilterConditionNodeForDisplay<P, V>;
+  filterFieldConfig: TSupportedFilterFieldConfigs<V>;
+  isDisabled?: boolean;
+  onChange: (values: SingleOrArray<V>) => void;
+};
diff --git a/apps/web/core/components/settings/boxed-control-item.tsx b/apps/web/core/components/settings/boxed-control-item.tsx
new file mode 100644
index 0000000..2428d58
--- /dev/null
+++ b/apps/web/core/components/settings/boxed-control-item.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+  control?: React.ReactNode;
+  description?: React.ReactNode;
+  title: React.ReactNode;
+};
+
+export function SettingsBoxedControlItem(props: Props) {
+  const { className, control, description, title } = props;
+
+  return (
+    <div
+      className={cn(
+        "flex w-full flex-col items-start gap-4 rounded-lg border border-subtle bg-layer-2 px-4 py-3 md:flex-row md:items-center md:justify-between md:gap-8",
+        className
+      )}
+    >
+      <div className="flex flex-col gap-1.5">
+        <h4 className="text-body-sm-medium text-primary">{title}</h4>
+        {description && <p className="text-caption-md-regular text-tertiary">{description}</p>}
+      </div>
+      {control && <div className="shrink-0">{control}</div>}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/settings/content-wrapper.tsx b/apps/web/core/components/settings/content-wrapper.tsx
new file mode 100644
index 0000000..3c98292
--- /dev/null
+++ b/apps/web/core/components/settings/content-wrapper.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+import { cn } from "@plane/utils";
+// components
+import { AppHeader } from "@/components/core/app-header";
+
+type Props = {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  hugging?: boolean;
+};
+
+export function SettingsContentWrapper(props: Props) {
+  const { children, header, hugging = false } = props;
+
+  return (
+    <div className="@container flex size-full grow flex-col overflow-hidden">
+      {header && (
+        <div className="w-full shrink-0">
+          <AppHeader header={header} />
+        </div>
+      )}
+      <ScrollArea scrollType="hover" orientation="vertical" size="sm" className="size-full grow overflow-y-scroll">
+        <div
+          className={cn("py-9", {
+            "w-full px-page-x lg:px-12": hugging,
+            "mx-auto w-full max-w-225 px-page-x @min-[58.95rem]:px-0": !hugging, // 58.95rem = max-width(56.25rem) + padding-x(1.35rem * 2)
+          })}
+        >
+          {children}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/settings/control-item.tsx b/apps/web/core/components/settings/control-item.tsx
new file mode 100644
index 0000000..1b11dc6
--- /dev/null
+++ b/apps/web/core/components/settings/control-item.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+type Props = {
+  control: React.ReactNode;
+  description: string;
+  title: React.ReactNode;
+};
+
+export function SettingsControlItem(props: Props) {
+  const { control, description, title } = props;
+
+  return (
+    <div className="flex w-full flex-col items-start gap-4 py-3 md:flex-row md:items-center md:justify-between md:gap-8">
+      <div className="flex flex-col gap-1">
+        <h4 className="text-body-sm-medium text-primary">{title}</h4>
+        <p className="text-caption-md-regular text-secondary">{description}</p>
+      </div>
+      <div className="shrink-0">{control}</div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/settings/heading.tsx b/apps/web/core/components/settings/heading.tsx
new file mode 100644
index 0000000..32656f2
--- /dev/null
+++ b/apps/web/core/components/settings/heading.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { cn } from "@plane/ui";
+
+type Props = {
+  className?: string;
+  control?: React.ReactNode;
+  description?: React.ReactNode;
+  title?: React.ReactNode;
+  variant?: "h3" | "h4" | "h6";
+};
+
+export function SettingsHeading({ className, control, description, title, variant = "h3" }: Props) {
+  return (
+    <div className={cn("flex flex-col items-start justify-between gap-4 md:flex-row md:items-center", className)}>
+      <div className="flex flex-col items-start gap-1">
+        {title && (
+          <h3
+            className={cn("text-h3-medium text-primary", {
+              "text-h3-medium": variant === "h3",
+              "text-h4-medium": variant === "h4",
+              "text-h6-medium": variant === "h6",
+            })}
+          >
+            {title}
+          </h3>
+        )}
+        {description && <p className="text-body-xs-regular text-tertiary">{description}</p>}
+      </div>
+      {control}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/settings/helper.ts b/apps/web/core/components/settings/helper.ts
new file mode 100644
index 0000000..85b1fe1
--- /dev/null
+++ b/apps/web/core/components/settings/helper.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { GROUPED_WORKSPACE_SETTINGS, PROJECT_SETTINGS_FLAT_MAP } from "@plane/constants";
+
+const hrefToLabelMap = (options: Record<string, Array<{ href: string; i18n_label: string; [key: string]: any }>>) =>
+  Object.values(options)
+    .flat()
+    .reduce(
+      (acc, setting) => {
+        acc[setting.href] = setting.i18n_label;
+        return acc;
+      },
+      {} as Record<string, string>
+    );
+
+const workspaceHrefToLabelMap = hrefToLabelMap(GROUPED_WORKSPACE_SETTINGS);
+
+const projectHrefToLabelMap = PROJECT_SETTINGS_FLAT_MAP.reduce(
+  (acc, setting) => {
+    acc[setting.href] = setting.i18n_label;
+    return acc;
+  },
+  {} as Record<string, string>
+);
+
+export const pathnameToAccessKey = (pathname: string) => {
+  const pathArray = pathname.replace(/^\/|\/$/g, "").split("/"); // Regex removes leading and trailing slashes
+  const workspaceSlug = pathArray[0];
+  const accessKey = pathArray.slice(1, 3).join("/");
+  return { workspaceSlug, accessKey: `/${accessKey}` || "" };
+};
+
+export const getWorkspaceActivePath = (pathname: string) => {
+  const parts = pathname.split("/").filter(Boolean);
+  const settingsIndex = parts.indexOf("settings");
+  if (settingsIndex === -1) return null;
+  const subPath = "/" + parts.slice(settingsIndex, settingsIndex + 2).join("/");
+  return workspaceHrefToLabelMap[subPath];
+};
+
+export const getProjectActivePath = (pathname: string) => {
+  const parts = pathname.split("/").filter(Boolean);
+  const settingsIndex = parts.indexOf("settings");
+  if (settingsIndex === -1) return null;
+  const subPath = parts.slice(settingsIndex + 3, settingsIndex + 4).join("/");
+  return subPath ? projectHrefToLabelMap["/" + subPath] : projectHrefToLabelMap[subPath];
+};
diff --git a/apps/web/core/components/settings/layout.tsx b/apps/web/core/components/settings/layout.tsx
new file mode 100644
index 0000000..0c950a9
--- /dev/null
+++ b/apps/web/core/components/settings/layout.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+
+export const SettingsContentLayout = observer(function SettingsContentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // refs
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="h-full min-h-full w-full overflow-y-scroll" ref={ref}>
+      {children}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/mobile/nav.tsx b/apps/web/core/components/settings/mobile/nav.tsx
new file mode 100644
index 0000000..3e5767a
--- /dev/null
+++ b/apps/web/core/components/settings/mobile/nav.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import { Menu } from "lucide-react";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
+import { useUserSettings } from "@/hooks/store/user";
+import { IconButton } from "@plane/propel/icon-button";
+
+type Props = {
+  hamburgerContent: React.ComponentType<{ className?: string; isMobile?: boolean }>;
+  activePath: string;
+};
+
+export const SettingsMobileNav = observer(function SettingsMobileNav(props: Props) {
+  const { hamburgerContent: HamburgerContent, activePath } = props;
+  // refs
+  const sidebarRef = useRef<HTMLDivElement>(null);
+  // store hooks
+  const { sidebarCollapsed, toggleSidebar } = useUserSettings();
+  const { t } = useTranslation();
+
+  useOutsideClickDetector(sidebarRef, () => {
+    if (!sidebarCollapsed) toggleSidebar(true);
+  });
+
+  return (
+    <div className="flex items-center gap-4 border-b border-subtle px-page-x py-3 md:hidden">
+      <div ref={sidebarRef} className="relative z-50 w-fit">
+        {!sidebarCollapsed && (
+          <div className="absolute top-10.5 left-0 z-50">
+            <HamburgerContent className="max-h-100 rounded-lg border border-subtle pb-3" />
+          </div>
+        )}
+        <IconButton variant="secondary" className="group z-50 shrink-0" icon={Menu} onClick={() => toggleSidebar()} />
+      </div>
+      {/* path */}
+      <div className="flex items-center gap-2">
+        <ChevronRightOutline className="size-4 text-tertiary" />
+        <span className="text-13 font-medium text-secondary">{t(activePath)}</span>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/page-header.tsx b/apps/web/core/components/settings/page-header.tsx
new file mode 100644
index 0000000..2b3328a
--- /dev/null
+++ b/apps/web/core/components/settings/page-header.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Header } from "@plane/ui";
+
+type Props = {
+  leftItem?: React.ReactNode;
+  rightItem?: React.ReactNode;
+};
+
+export function SettingsPageHeader(props: Props) {
+  const { leftItem, rightItem } = props;
+
+  return (
+    <Header>
+      {leftItem && <Header.LeftItem>{leftItem}</Header.LeftItem>}
+      {rightItem && <Header.RightItem>{rightItem}</Header.RightItem>}
+    </Header>
+  );
+}
diff --git a/apps/web/core/components/settings/profile/content/index.ts b/apps/web/core/components/settings/profile/content/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
new file mode 100644
index 0000000..0d72173
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/api-tokens.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { APITokenService } from "@plane/services";
+// components
+import { CreateApiTokenModal } from "@/components/api-token/modal/create-token-modal";
+import { ApiTokenListItem } from "@/components/api-token/token-list-item";
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
+import { APITokenSettingsLoader } from "@/components/ui/loader/settings/api-token";
+// constants
+import { API_TOKENS_LIST } from "@plane/constants";
+
+const apiTokenService = new APITokenService();
+
+export const APITokensProfileSettings = observer(function APITokensProfileSettings() {
+  // states
+  const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
+  // store hooks
+  const { data: tokens } = useSWR(API_TOKENS_LIST, () => apiTokenService.list());
+  // translation
+  const { t } = useTranslation();
+
+  if (!tokens) {
+    return <APITokenSettingsLoader />;
+  }
+
+  return (
+    <div className="size-full">
+      <CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
+      <ProfileSettingsHeading
+        title={t("account_settings.api_tokens.title")}
+        description={t("account_settings.api_tokens.description")}
+        control={
+          <Button variant="primary" size="lg" onClick={() => setIsCreateTokenModalOpen(true)}>
+            {t("workspace_settings.settings.api_tokens.add_token")}
+          </Button>
+        }
+      />
+      <div className="mt-7">
+        {tokens.length > 0 ? (
+          <>
+            <div>
+              {tokens.map((token) => (
+                <ApiTokenListItem key={token.id} token={token} />
+              ))}
+            </div>
+          </>
+        ) : (
+          <EmptyStateCompact
+            assetKey="token"
+            assetClassName="size-20"
+            title={t("settings_empty_state.tokens.title")}
+            description={t("settings_empty_state.tokens.description")}
+            actions={[
+              {
+                label: t("settings_empty_state.tokens.cta_primary"),
+                onClick: () => {
+                  setIsCreateTokenModalOpen(true);
+                },
+              },
+            ]}
+            align="start"
+            rootClassName="py-20"
+          />
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/general/form.tsx b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
new file mode 100644
index 0000000..7ece5a8
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/general/form.tsx
@@ -0,0 +1,428 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { UserOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
+import { EFileAssetType } from "@plane/types";
+import type { IUser, TUserProfile } from "@plane/types";
+
+import { getFileURL } from "@plane/utils";
+// components
+import { DeactivateAccountModal } from "@/components/account/deactivate-account-modal";
+import { ImagePickerPopover } from "@/components/core/image-picker-popover";
+import { ChangeEmailModal } from "@/components/core/modals/change-email-modal";
+import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
+import { CoverImage } from "@/components/common/cover-image";
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// helpers
+import { handleCoverImageChange } from "@/helpers/cover-image.helper";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useUser, useUserProfile } from "@/hooks/store/user";
+// utils
+import { validatePersonName, validateDisplayName } from "@plane/utils";
+
+type TUserProfileForm = {
+  avatar_url: string;
+  cover_image: string;
+  cover_image_asset: any;
+  cover_image_url: string;
+  first_name: string;
+  last_name: string;
+  display_name: string;
+  email: string;
+  role: string;
+  language: string;
+  user_timezone: string;
+};
+
+type Props = {
+  user: IUser;
+  profile: TUserProfile;
+};
+
+export const GeneralProfileSettingsForm = observer(function GeneralProfileSettingsForm(props: Props) {
+  const { user, profile } = props;
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  const [deactivateAccountModal, setDeactivateAccountModal] = useState(false);
+  const [isChangeEmailModalOpen, setIsChangeEmailModalOpen] = useState(false);
+  // language support
+  const { t } = useTranslation();
+  // form info
+  const {
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    formState: { errors },
+  } = useForm<TUserProfileForm>({
+    defaultValues: {
+      avatar_url: user.avatar_url || "",
+      cover_image_asset: null,
+      cover_image_url: user.cover_image_url || "",
+      first_name: user.first_name || "",
+      last_name: user.last_name || "",
+      display_name: user.display_name || "",
+      email: user.email || "",
+      role: profile.role || "Product / Project Manager",
+      language: profile.language || "en",
+      user_timezone: user.user_timezone || "Asia/Kolkata",
+    },
+  });
+  // derived values
+  const userAvatar = watch("avatar_url");
+  const userCover = watch("cover_image_url");
+  // store hooks
+  const { data: currentUser, updateCurrentUser } = useUser();
+  const { updateUserProfile } = useUserProfile();
+  const { config } = useInstance();
+
+  const isSMTPConfigured = config?.is_smtp_configured || false;
+
+  const handleProfilePictureDelete = async (url: string | null | undefined) => {
+    if (!url) return;
+    await updateCurrentUser({
+      avatar_url: "",
+    })
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Profile picture deleted successfully.",
+        });
+        setValue("avatar_url", "");
+        return;
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "There was some error in deleting your profile picture. Please try again.",
+        });
+      })
+      .finally(() => {
+        setIsImageUploadModalOpen(false);
+      });
+  };
+
+  const onSubmit = async (formData: TUserProfileForm) => {
+    setIsLoading(true);
+    const userPayload: Partial<IUser> = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      avatar_url: formData.avatar_url,
+      display_name: formData?.display_name,
+    };
+
+    try {
+      const coverImagePayload = await handleCoverImageChange(user.cover_image_url, formData.cover_image_url, {
+        entityIdentifier: "",
+        entityType: EFileAssetType.USER_COVER,
+        isUserAsset: true,
+      });
+
+      if (coverImagePayload) {
+        Object.assign(userPayload, coverImagePayload);
+      }
+    } catch (error) {
+      console.error("Error handling cover image:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: error instanceof Error ? error.message : "Failed to process cover image",
+      });
+      setIsLoading(false);
+      return;
+    }
+
+    const profilePayload: Partial<TUserProfile> = {
+      role: formData.role,
+    };
+
+    const updateCurrentUserDetail = updateCurrentUser(userPayload);
+    const promises: Promise<IUser | TUserProfile | undefined>[] = [updateCurrentUserDetail];
+    if (profilePayload.role !== profile.role) {
+      const updateCurrentUserProfile = updateUserProfile(profilePayload);
+      promises.push(updateCurrentUserProfile);
+    }
+
+    const updatePromise = Promise.allSettled(promises)
+      .then((results) => {
+        const rejectedResult = results.find((result) => result.status === "rejected") as
+          | PromiseRejectedResult
+          | undefined;
+        if (rejectedResult) {
+          throw rejectedResult.reason ?? new Error("Failed to update profile");
+        }
+        const values = results.map(
+          (result) => (result as PromiseFulfilledResult<IUser | TUserProfile | undefined>).value
+        );
+        if (values.some((v) => v === undefined)) {
+          throw new Error("Failed to update profile");
+        }
+        return values;
+      })
+      .finally(() => setIsLoading(false));
+
+    setPromiseToast(updatePromise, {
+      loading: "Updating...",
+      success: {
+        title: "Success!",
+        message: () => `Profile updated successfully.`,
+      },
+      error: {
+        title: "Error!",
+        message: () => `There was some error in updating your profile. Please try again.`,
+      },
+    });
+  };
+
+  return (
+    <>
+      <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
+      <ChangeEmailModal isOpen={isChangeEmailModalOpen} onClose={() => setIsChangeEmailModalOpen(false)} />
+      <Controller
+        control={control}
+        name="avatar_url"
+        render={({ field: { onChange, value } }) => (
+          <UserImageUploadModal
+            isOpen={isImageUploadModalOpen}
+            onClose={() => setIsImageUploadModalOpen(false)}
+            handleRemove={async () => await handleProfilePictureDelete(currentUser?.avatar_url)}
+            onSuccess={(url) => {
+              onChange(url);
+              handleSubmit(onSubmit)();
+              setIsImageUploadModalOpen(false);
+            }}
+            value={value && value.trim() !== "" ? value : null}
+          />
+        )}
+      />
+      <form onSubmit={handleSubmit(onSubmit)} className="w-full">
+        <div className="flex w-full flex-col gap-7">
+          <div className="relative h-44 w-full">
+            <CoverImage
+              src={userCover}
+              className="h-44 w-full rounded-lg"
+              alt={currentUser?.first_name ?? "Cover image"}
+            />
+            <div className="absolute -bottom-6 left-6 flex items-end justify-between">
+              <div className="flex gap-3">
+                <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-surface-2">
+                  <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                    {!userAvatar || userAvatar === "" ? (
+                      <div className="h-16 w-16 rounded-md bg-layer-1 p-2">
+                        <UserOutline className="h-full w-full text-secondary" />
+                      </div>
+                    ) : (
+                      <div className="relative h-16 w-16 overflow-hidden">
+                        <img
+                          src={getFileURL(userAvatar)}
+                          className="absolute top-0 left-0 h-full w-full rounded-lg object-cover"
+                          onClick={() => setIsImageUploadModalOpen(true)}
+                          alt={currentUser?.display_name}
+                          role="button"
+                        />
+                      </div>
+                    )}
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className="absolute right-3 bottom-3 flex">
+              <Controller
+                control={control}
+                name="cover_image_url"
+                render={({ field: { value, onChange } }) => (
+                  <ImagePickerPopover
+                    label={t("change_cover")}
+                    control={control}
+                    onChange={(imageUrl) => onChange(imageUrl)}
+                    value={value}
+                    isProfileCover
+                  />
+                )}
+              />
+            </div>
+          </div>
+          <div className="item-center mt-6 flex justify-between">
+            <div className="flex flex-col">
+              <div className="item-center flex text-16 font-medium text-secondary">
+                <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
+              </div>
+              <span className="text-13 tracking-tight text-tertiary">{watch("email")}</span>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 xl:grid-cols-3">
+              <div className="flex flex-col gap-1">
+                <h4 className="text-13 font-medium text-secondary">
+                  {t("first_name")} 
+                  <span className="text-danger-primary">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="first_name"
+                  rules={{
+                    required: "Please enter first name",
+                    validate: validatePersonName,
+                  }}
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Field name="first_name" invalid={Boolean(errors.first_name)}>
+                      <InputGroup size="2xl">
+                        <Input
+                          size="2xl"
+                          id="first_name"
+                          name="first_name"
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          placeholder="Enter your first name"
+                          maxLength={50}
+                          autoComplete="on"
+                        />
+                      </InputGroup>
+                    </Field>
+                  )}
+                />
+                {errors.first_name && <span className="text-11 text-danger-primary">{errors.first_name.message}</span>}
+              </div>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-13 font-medium text-secondary">{t("last_name")}</h4>
+                <Controller
+                  control={control}
+                  name="last_name"
+                  rules={{
+                    validate: validatePersonName,
+                  }}
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Field name="last_name" invalid={Boolean(errors.last_name)}>
+                      <InputGroup size="2xl">
+                        <Input
+                          size="2xl"
+                          id="last_name"
+                          name="last_name"
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          placeholder="Enter your last name"
+                          maxLength={50}
+                          autoComplete="on"
+                        />
+                      </InputGroup>
+                    </Field>
+                  )}
+                />
+                {errors.last_name && <span className="text-11 text-danger-primary">{errors.last_name.message}</span>}
+              </div>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-13 font-medium text-secondary">
+                  {t("display_name")} 
+                  <span className="text-danger-primary">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="display_name"
+                  rules={{
+                    required: "Display name is required.",
+                    validate: validateDisplayName,
+                  }}
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Field name="display_name" invalid={Boolean(errors?.display_name)}>
+                      <InputGroup size="2xl">
+                        <Input
+                          size="2xl"
+                          id="display_name"
+                          name="display_name"
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          placeholder="Enter your display name"
+                          maxLength={50}
+                        />
+                      </InputGroup>
+                    </Field>
+                  )}
+                />
+                {errors?.display_name && (
+                  <span className="text-11 text-danger-primary">{errors?.display_name?.message}</span>
+                )}
+              </div>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-13 font-medium text-secondary">
+                  {t("auth.common.email.label")} 
+                  <span className="text-danger-primary">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="email"
+                  rules={{
+                    required: "Email is required.",
+                  }}
+                  render={({ field: { value, ref } }) => (
+                    <Field name="email" invalid={Boolean(errors.email)}>
+                      <InputGroup size="2xl">
+                        <Input
+                          size="2xl"
+                          id="email"
+                          name="email"
+                          type="email"
+                          value={value}
+                          ref={ref}
+                          placeholder="Enter your email"
+                          autoComplete="on"
+                          disabled
+                        />
+                      </InputGroup>
+                    </Field>
+                  )}
+                />
+                {isSMTPConfigured && (
+                  <button
+                    type="button"
+                    className="btn w-fit text-11 text-secondary underline"
+                    onClick={() => setIsChangeEmailModalOpen(true)}
+                  >
+                    {t("account_settings.profile.change_email_modal.title")}
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+          <div>
+            <Button variant="primary" type="submit" loading={isLoading}>
+              {isLoading ? t("saving") : t("save_changes")}
+            </Button>
+          </div>
+        </div>
+      </form>
+      <div className="mt-10">
+        <SettingsBoxedControlItem
+          title={t("deactivate_account")}
+          description={t("deactivate_account_description")}
+          control={
+            <Button variant="error-outline" onClick={() => setDeactivateAccountModal(true)}>
+              {t("deactivate_account")}
+            </Button>
+          }
+        />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/general/index.ts b/apps/web/core/components/settings/profile/content/pages/general/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/general/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/profile/content/pages/general/root.tsx b/apps/web/core/components/settings/profile/content/pages/general/root.tsx
new file mode 100644
index 0000000..2abf499
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/general/root.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// components
+import { PageHead } from "@/components/core/page-title";
+// hooks
+import { useUser } from "@/hooks/store/user";
+// local imports
+import { GeneralProfileSettingsForm } from "./form";
+
+export const GeneralProfileSettings = observer(function GeneralProfileSettings() {
+  const { t } = useTranslation();
+  // store hooks
+  const { data: currentUser, userProfile } = useUser();
+
+  if (!currentUser) return null;
+
+  return (
+    <>
+      <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
+      <GeneralProfileSettingsForm user={currentUser} profile={userProfile.data} />
+    </>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/index.ts b/apps/web/core/components/settings/profile/content/pages/index.ts
new file mode 100644
index 0000000..c9dfa24
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/index.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { lazy } from "react";
+// plane imports
+import type { TProfileSettingsTabs } from "@plane/types";
+
+export const PROFILE_SETTINGS_PAGES_MAP: Record<TProfileSettingsTabs, React.LazyExoticComponent<React.FC>> = {
+  general: lazy(() => import("./general").then((m) => ({ default: m.GeneralProfileSettings }))),
+  preferences: lazy(() => import("./preferences").then((m) => ({ default: m.PreferencesProfileSettings }))),
+  notifications: lazy(() => import("./notifications").then((m) => ({ default: m.NotificationsProfileSettings }))),
+  security: lazy(() => import("./security").then((m) => ({ default: m.SecurityProfileSettings }))),
+  "api-tokens": lazy(() => import("./api-tokens").then((m) => ({ default: m.APITokensProfileSettings }))),
+};
diff --git a/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx b/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx
new file mode 100644
index 0000000..006ec1f
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/notifications/email-notification-form.tsx
@@ -0,0 +1,172 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUserEmailNotificationSettings } from "@plane/types";
+import { Switch } from "@makeplane/propel/components/switch";
+// components
+import { SettingsControlItem } from "@/components/settings/control-item";
+// services
+import { UserService } from "@/services/user.service";
+
+type Props = {
+  data: IUserEmailNotificationSettings;
+};
+
+// services
+const userService = new UserService();
+
+export const NotificationsProfileSettingsForm = observer(function NotificationsProfileSettingsForm(props: Props) {
+  const { data } = props;
+  // translation
+  const { t } = useTranslation();
+  // form data
+  const { control, reset } = useForm<IUserEmailNotificationSettings>({
+    defaultValues: {
+      ...data,
+    },
+  });
+
+  const handleSettingChange = async (key: keyof IUserEmailNotificationSettings, value: boolean) => {
+    try {
+      await userService.updateCurrentUserEmailNotificationSettings({
+        [key]: value,
+      });
+      setToast({
+        title: t("success"),
+        type: TOAST_TYPE.SUCCESS,
+        message: t("email_notification_setting_updated_successfully"),
+      });
+    } catch (_error) {
+      setToast({
+        title: t("error"),
+        type: TOAST_TYPE.ERROR,
+        message: t("failed_to_update_email_notification_setting"),
+      });
+    }
+  };
+
+  useEffect(() => {
+    reset(data);
+  }, [reset, data]);
+
+  return (
+    <div className="flex flex-col gap-y-1">
+      <SettingsControlItem
+        title={t("property_changes")}
+        description={t("property_changes_description")}
+        control={
+          <Controller
+            control={control}
+            name="property_change"
+            render={({ field: { value, onChange } }) => (
+              <Switch
+                size="sm"
+                checked={value}
+                onCheckedChange={(newValue) => {
+                  onChange(newValue);
+                  void handleSettingChange("property_change", newValue);
+                }}
+                aria-label={t("property_changes")}
+              />
+            )}
+          />
+        }
+      />
+      <SettingsControlItem
+        title={t("state_change")}
+        description={t("state_change_description")}
+        control={
+          <Controller
+            control={control}
+            name="state_change"
+            render={({ field: { value, onChange } }) => (
+              <Switch
+                size="sm"
+                checked={value}
+                onCheckedChange={(newValue) => {
+                  onChange(newValue);
+                  void handleSettingChange("state_change", newValue);
+                }}
+                aria-label={t("state_change")}
+              />
+            )}
+          />
+        }
+      />
+      <div className="border-l-3 border-subtle-1 pl-3">
+        <SettingsControlItem
+          title={t("issue_completed")}
+          description={t("issue_completed_description")}
+          control={
+            <Controller
+              control={control}
+              name="issue_completed"
+              render={({ field: { value, onChange } }) => (
+                <Switch
+                  size="sm"
+                  checked={value}
+                  onCheckedChange={(newValue) => {
+                    onChange(newValue);
+                    void handleSettingChange("issue_completed", newValue);
+                  }}
+                  aria-label={t("issue_completed")}
+                />
+              )}
+            />
+          }
+        />
+      </div>
+      <SettingsControlItem
+        title={t("comments")}
+        description={t("comments_description")}
+        control={
+          <Controller
+            control={control}
+            name="comment"
+            render={({ field: { value, onChange } }) => (
+              <Switch
+                size="sm"
+                checked={value}
+                onCheckedChange={(newValue) => {
+                  onChange(newValue);
+                  void handleSettingChange("comment", newValue);
+                }}
+                aria-label={t("comments")}
+              />
+            )}
+          />
+        }
+      />
+      <SettingsControlItem
+        title={t("mentions")}
+        description={t("mentions_description")}
+        control={
+          <Controller
+            control={control}
+            name="mention"
+            render={({ field: { value, onChange } }) => (
+              <Switch
+                size="sm"
+                checked={value}
+                onCheckedChange={(newValue) => {
+                  onChange(newValue);
+                  void handleSettingChange("mention", newValue);
+                }}
+                aria-label={t("mentions")}
+              />
+            )}
+          />
+        }
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/notifications/index.ts b/apps/web/core/components/settings/profile/content/pages/notifications/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/notifications/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/profile/content/pages/notifications/root.tsx b/apps/web/core/components/settings/profile/content/pages/notifications/root.tsx
new file mode 100644
index 0000000..d28ef0f
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/notifications/root.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import useSWR from "swr";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
+import { EmailSettingsLoader } from "@/components/ui/loader/settings/email";
+// services
+import { UserService } from "@/services/user.service";
+// local imports
+import { NotificationsProfileSettingsForm } from "./email-notification-form";
+
+const userService = new UserService();
+
+export const NotificationsProfileSettings = observer(function NotificationsProfileSettings() {
+  const { t } = useTranslation();
+  // fetching user email notification settings
+  const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
+    userService.currentUserEmailNotificationSettings()
+  );
+
+  if (!data || isLoading) {
+    return <EmailSettingsLoader />;
+  }
+
+  return (
+    <div className="size-full">
+      <ProfileSettingsHeading
+        title={t("account_settings.notifications.heading")}
+        description={t("account_settings.notifications.description")}
+      />
+      <div className="mt-7">
+        <NotificationsProfileSettingsForm data={data} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx b/apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx
new file mode 100644
index 0000000..e5a248d
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { ThemeSwitcher } from "@/components/appearance";
+
+export const ProfileSettingsDefaultPreferencesList = observer(function ProfileSettingsDefaultPreferencesList() {
+  return (
+    <div className="flex flex-col gap-y-1">
+      <ThemeSwitcher
+        option={{
+          id: "theme",
+          title: "theme",
+          description: "select_or_customize_your_interface_color_scheme",
+        }}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/index.ts b/apps/web/core/components/settings/profile/content/pages/preferences/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx b/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx
new file mode 100644
index 0000000..5ec822a
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/language-and-timezone-list.tsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { SUPPORTED_LANGUAGES, useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { CustomSelect } from "@plane/ui";
+// components
+import { TimezoneSelect } from "@/components/global";
+import { StartOfWeekPreference } from "@/components/profile/start-of-week-preference";
+import { SettingsControlItem } from "@/components/settings/control-item";
+// hooks
+import { useUser, useUserProfile } from "@/hooks/store/user";
+
+export const ProfileSettingsLanguageAndTimezonePreferencesList = observer(
+  function ProfileSettingsLanguageAndTimezonePreferencesList() {
+    // store hooks
+    const {
+      data: user,
+      updateCurrentUser,
+      userProfile: { data: profile },
+    } = useUser();
+    const { updateUserProfile } = useUserProfile();
+    // translation
+    const { t } = useTranslation();
+
+    const handleTimezoneChange = async (value: string) => {
+      try {
+        await updateCurrentUser({ user_timezone: value });
+        setToast({
+          title: "Success!",
+          message: "Timezone updated successfully",
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } catch (_error) {
+        setToast({
+          title: "Error!",
+          message: "Failed to update timezone",
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+    };
+
+    const handleLanguageChange = async (value: string) => {
+      try {
+        await updateUserProfile({ language: value });
+        setToast({
+          title: "Success!",
+          message: "Language updated successfully",
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } catch (_error) {
+        setToast({
+          title: "Error!",
+          message: "Failed to update language",
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+    };
+
+    const getLanguageLabel = (value: string) => {
+      const selectedLanguage = SUPPORTED_LANGUAGES.find((l) => l.value === value);
+      if (!selectedLanguage) return value;
+      return selectedLanguage.label;
+    };
+
+    return (
+      <div className="flex flex-col gap-y-1">
+        <SettingsControlItem
+          title={t("timezone")}
+          description={t("timezone_setting")}
+          control={<TimezoneSelect value={user?.user_timezone || "Asia/Kolkata"} onChange={handleTimezoneChange} />}
+        />
+        <SettingsControlItem
+          title={t("language")}
+          description={t("language_setting")}
+          control={
+            <CustomSelect
+              value={profile?.language}
+              label={profile?.language ? getLanguageLabel(profile?.language) : "Select a language"}
+              onChange={handleLanguageChange}
+              buttonClassName="border border-subtle-1"
+              className="rounded-md"
+              input
+              placement="bottom-end"
+            >
+              {SUPPORTED_LANGUAGES.map((item) => (
+                <CustomSelect.Option key={item.value} value={item.value}>
+                  {item.label}
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          }
+        />
+        <StartOfWeekPreference
+          option={{
+            title: "First day of the week",
+            description: "This will change how all calendars in your app look.",
+          }}
+        />
+      </div>
+    );
+  }
+);
diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx b/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx
new file mode 100644
index 0000000..7011091
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/preferences/root.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+// local imports
+import { ProfileSettingsDefaultPreferencesList } from "./default-list";
+import { ProfileSettingsLanguageAndTimezonePreferencesList } from "./language-and-timezone-list";
+
+export const PreferencesProfileSettings = observer(function PreferencesProfileSettings() {
+  const { t } = useTranslation();
+  // hooks
+  const { data: userProfile } = useUserProfile();
+
+  if (!userProfile) return null;
+
+  return (
+    <div className="size-full">
+      <ProfileSettingsHeading
+        title={t("account_settings.preferences.heading")}
+        description={t("account_settings.preferences.description")}
+      />
+      <div className="mt-7 flex w-full flex-col gap-6">
+        <section>
+          <ProfileSettingsDefaultPreferencesList />
+        </section>
+        <section className="flex flex-col gap-y-3">
+          <div className="text-h6-medium text-primary">{t("language_and_time")}</div>
+          <ProfileSettingsLanguageAndTimezonePreferencesList />
+        </section>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/pages/security.tsx b/apps/web/core/components/settings/profile/content/pages/security.tsx
new file mode 100644
index 0000000..dfb6dfd
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/pages/security.tsx
@@ -0,0 +1,285 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { PasswordStrengthIndicator } from "@plane/ui";
+import { getPasswordStrength } from "@plane/utils";
+// components
+import { ProfileSettingsHeading } from "@/components/settings/profile/heading";
+// helpers
+import { authErrorHandler, EAuthenticationErrorCodes, passwordErrors } from "@/helpers/authentication.helper";
+// hooks
+import { useUser } from "@/hooks/store/user";
+// services
+import { AuthService } from "@/services/auth.service";
+
+export interface FormValues {
+  old_password: string;
+  new_password: string;
+  confirm_password: string;
+}
+
+const defaultValues: FormValues = {
+  old_password: "",
+  new_password: "",
+  confirm_password: "",
+};
+
+const authService = new AuthService();
+
+const defaultShowPassword = {
+  oldPassword: false,
+  password: false,
+  confirmPassword: false,
+};
+
+export const SecurityProfileSettings = observer(function SecurityProfileSettings() {
+  // store
+  const { data: currentUser, changePassword } = useUser();
+  // states
+  const [showPassword, setShowPassword] = useState(defaultShowPassword);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
+
+  // use form
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setError,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm<FormValues>({ defaultValues });
+  // derived values
+  const oldPassword = watch("old_password");
+  const password = watch("new_password");
+  const confirmPassword = watch("confirm_password");
+  const oldPasswordRequired = !currentUser?.is_password_autoset;
+  // i18n
+  const { t } = useTranslation();
+
+  const isNewPasswordSameAsOldPassword = oldPassword !== "" && password !== "" && password === oldPassword;
+
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  const handleChangePassword = async (formData: FormValues) => {
+    const { old_password, new_password } = formData;
+    try {
+      const csrfToken = await authService.requestCSRFToken().then((data) => data?.csrf_token);
+      if (!csrfToken) throw new Error("csrf token not found");
+
+      await changePassword(csrfToken, {
+        ...(oldPasswordRequired && { old_password }),
+        new_password,
+      });
+
+      reset(defaultValues);
+      setShowPassword(defaultShowPassword);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("auth.common.password.toast.change_password.success.title"),
+        message: t("auth.common.password.toast.change_password.success.message"),
+      });
+    } catch (error: unknown) {
+      const err = error as Error & { error_code?: string };
+      const code = err.error_code?.toString();
+      const errorInfo = code ? authErrorHandler(code as EAuthenticationErrorCodes) : undefined;
+
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: errorInfo?.title ?? t("auth.common.password.toast.change_password.error.title"),
+        message:
+          typeof errorInfo?.message === "string"
+            ? errorInfo.message
+            : t("auth.common.password.toast.change_password.error.message"),
+      });
+
+      if (code && passwordErrors.includes(code as EAuthenticationErrorCodes)) {
+        setError("new_password", {
+          type: "manual",
+          message: errorInfo?.message?.toString() || t("auth.common.password.toast.change_password.error.message"),
+        });
+      }
+    }
+  };
+
+  const isButtonDisabled =
+    getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID ||
+    (oldPasswordRequired && oldPassword.trim() === "") ||
+    password.trim() === "" ||
+    confirmPassword.trim() === "" ||
+    password !== confirmPassword ||
+    password === oldPassword;
+
+  const passwordSupport = password.length > 0 &&
+    getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
+      <PasswordStrengthIndicator password={password} isFocused={isPasswordInputFocused} />
+    );
+
+  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
+
+  return (
+    <div className="size-full">
+      <ProfileSettingsHeading title={t("auth.common.password.change_password.label.default")} />
+      <form onSubmit={handleSubmit(handleChangePassword)} className="mt-7 flex flex-col gap-8">
+        <div className="flex flex-col gap-y-7">
+          {oldPasswordRequired && (
+            <div className="flex flex-col gap-y-2">
+              <h4 className="text-13">{t("auth.common.password.current_password.label")}</h4>
+              <Controller
+                control={control}
+                name="old_password"
+                rules={{
+                  required: t("common.errors.required"),
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Field name="old_password" invalid={Boolean(errors.old_password)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="old_password"
+                        type={showPassword?.oldPassword ? "text" : "password"}
+                        value={value}
+                        onChange={onChange}
+                        placeholder={t("old_password")}
+                        autoComplete="current-password"
+                      />
+                      <button
+                        type="button"
+                        className="grid size-5 place-items-center"
+                        onClick={() => handleShowPassword("oldPassword")}
+                        aria-label={showPassword?.oldPassword ? "Hide password" : "Show password"}
+                      >
+                        {showPassword?.oldPassword ? (
+                          <HideOutline className="size-5 text-placeholder" />
+                        ) : (
+                          <ShowOutline className="size-5 text-placeholder" />
+                        )}
+                      </button>
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+              {errors.old_password && (
+                <span className="text-11 text-danger-primary">{errors.old_password.message}</span>
+              )}
+            </div>
+          )}
+          <div className="grid gap-x-4 gap-y-7 sm:grid-cols-2">
+            <div className="flex flex-col gap-y-2">
+              <h4 className="text-13">{t("auth.common.password.new_password.label")}</h4>
+              <Controller
+                control={control}
+                name="new_password"
+                rules={{
+                  required: t("common.errors.required"),
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Field name="new_password" invalid={Boolean(errors.new_password)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="new_password"
+                        type={showPassword?.password ? "text" : "password"}
+                        value={value}
+                        placeholder={t("auth.common.password.new_password.placeholder")}
+                        onChange={onChange}
+                        onFocus={() => setIsPasswordInputFocused(true)}
+                        onBlur={() => setIsPasswordInputFocused(false)}
+                        autoComplete="new-password"
+                      />
+                      <button
+                        type="button"
+                        className="grid size-5 place-items-center"
+                        onClick={() => handleShowPassword("password")}
+                        aria-label={showPassword?.password ? "Hide password" : "Show password"}
+                      >
+                        {showPassword?.password ? (
+                          <HideOutline className="size-5 text-placeholder" />
+                        ) : (
+                          <ShowOutline className="size-5 text-placeholder" />
+                        )}
+                      </button>
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+              {passwordSupport}
+              {errors.new_password && (
+                <span className="text-11 text-danger-primary">{errors.new_password.message}</span>
+              )}
+              {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
+                <span className="text-11 text-danger-primary">
+                  {t("new_password_must_be_different_from_old_password")}
+                </span>
+              )}
+            </div>
+            <div className="flex flex-col gap-y-2">
+              <h4 className="text-13">{t("auth.common.password.confirm_password.label")}</h4>
+              <Controller
+                control={control}
+                name="confirm_password"
+                rules={{
+                  required: t("common.errors.required"),
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Field name="confirm_password" invalid={Boolean(errors.confirm_password)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="confirm_password"
+                        type={showPassword?.confirmPassword ? "text" : "password"}
+                        placeholder={t("auth.common.password.confirm_password.placeholder")}
+                        value={value}
+                        onChange={onChange}
+                        onFocus={() => setIsRetryPasswordInputFocused(true)}
+                        onBlur={() => setIsRetryPasswordInputFocused(false)}
+                        autoComplete="new-password"
+                      />
+                      <button
+                        type="button"
+                        className="grid size-5 place-items-center"
+                        onClick={() => handleShowPassword("confirmPassword")}
+                        aria-label={showPassword?.confirmPassword ? "Hide password" : "Show password"}
+                      >
+                        {showPassword?.confirmPassword ? (
+                          <HideOutline className="size-5 text-placeholder" />
+                        ) : (
+                          <ShowOutline className="size-5 text-placeholder" />
+                        )}
+                      </button>
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+              {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
+                <span className="text-13 text-danger-primary">{t("auth.common.password.errors.match")}</span>
+              )}
+            </div>
+          </div>
+          <div>
+            <Button variant="primary" size="xl" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
+              {isSubmitting
+                ? `${t("auth.common.password.change_password.label.submitting")}`
+                : t("auth.common.password.change_password.label.default")}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/content/root.tsx b/apps/web/core/components/settings/profile/content/root.tsx
new file mode 100644
index 0000000..c407d2b
--- /dev/null
+++ b/apps/web/core/components/settings/profile/content/root.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Suspense } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+import type { TProfileSettingsTabs } from "@plane/types";
+import { cn } from "@plane/utils";
+// local imports
+import { PROFILE_SETTINGS_PAGES_MAP } from "./pages";
+
+type Props = {
+  activeTab: TProfileSettingsTabs;
+  className?: string;
+};
+
+export const ProfileSettingsContent = observer(function ProfileSettingsContent(props: Props) {
+  const { activeTab, className } = props;
+  const PageComponent = PROFILE_SETTINGS_PAGES_MAP[activeTab];
+
+  return (
+    <ScrollArea
+      className={cn("shrink-0 overflow-y-scroll bg-surface-1", className)}
+      viewportClassName="px-8 py-9"
+      scrollType="hover"
+      orientation="vertical"
+      size="sm"
+    >
+      <Suspense>
+        <PageComponent />
+      </Suspense>
+    </ScrollArea>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/heading.tsx b/apps/web/core/components/settings/profile/heading.tsx
new file mode 100644
index 0000000..017b2c1
--- /dev/null
+++ b/apps/web/core/components/settings/profile/heading.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { cn } from "@plane/ui";
+
+type Props = {
+  className?: string;
+  control?: React.ReactNode;
+  description?: React.ReactNode;
+  title?: React.ReactNode;
+};
+
+export function ProfileSettingsHeading({ className, control, description, title }: Props) {
+  return (
+    <div className={cn("flex flex-col items-start justify-between gap-4 md:flex-row md:items-center", className)}>
+      <div className="flex flex-col items-start gap-1">
+        {title && <h6 className="text-h6-medium text-primary">{title}</h6>}
+        {description && <p className="text-body-xs-regular text-tertiary">{description}</p>}
+      </div>
+      {control}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/settings/profile/modal.tsx b/apps/web/core/components/settings/profile/modal.tsx
new file mode 100644
index 0000000..ed45a87
--- /dev/null
+++ b/apps/web/core/components/settings/profile/modal.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { observer } from "mobx-react";
+// plane imports
+import { IconButton } from "@plane/propel/icon-button";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+// local imports
+import { ProfileSettingsContent } from "./content";
+import { ProfileSettingsSidebarRoot } from "./sidebar";
+
+export const ProfileSettingsModal = observer(function ProfileSettingsModal() {
+  // store hooks
+  const { profileSettingsModal, toggleProfileSettingsModal } = useCommandPalette();
+  // derived values
+  const activeTab = profileSettingsModal.activeTab ?? "general";
+
+  const handleClose = useCallback(() => {
+    toggleProfileSettingsModal({
+      isOpen: false,
+    });
+    setTimeout(() => {
+      toggleProfileSettingsModal({
+        activeTab: null,
+      });
+    }, 300);
+  }, [toggleProfileSettingsModal]);
+
+  return (
+    <ModalCore
+      isOpen={profileSettingsModal.isOpen}
+      handleClose={handleClose}
+      position={EModalPosition.CENTER}
+      width={EModalWidth.VIXL}
+      className="h-175"
+    >
+      <div className="@container relative size-full">
+        <div className="flex size-full">
+          <ProfileSettingsSidebarRoot
+            activeTab={activeTab}
+            className="w-[250px] rounded-l-xl"
+            updateActiveTab={(tab) => toggleProfileSettingsModal({ activeTab: tab })}
+          />
+          <ProfileSettingsContent activeTab={activeTab} className="flex-1 rounded-r-xl" />
+        </div>
+        <div className="absolute top-3.5 right-3.5">
+          <IconButton size="base" variant="tertiary" icon={CloseOutline} onClick={handleClose} />
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/sidebar/header.tsx b/apps/web/core/components/settings/profile/sidebar/header.tsx
new file mode 100644
index 0000000..a59fa2a
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/header.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useUser } from "@/hooks/store/user";
+
+export const ProfileSettingsSidebarHeader = observer(function ProfileSettingsSidebarHeader() {
+  // store hooks
+  const { data: currentUser } = useUser();
+
+  return (
+    <div className="flex shrink-0 items-center gap-2">
+      <div className="shrink-0">
+        <Avatar
+          alt={currentUser?.display_name}
+          fallback={currentUser?.display_name?.[0]?.toUpperCase()}
+          src={getFileURL(currentUser?.avatar_url ?? "")}
+          size="lg"
+        />
+      </div>
+      <div className="truncate">
+        <p className="truncate text-body-sm-medium">
+          {currentUser?.first_name} {currentUser?.last_name}
+        </p>
+        <p className="truncate text-caption-md-regular">{currentUser?.email}</p>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/sidebar/index.ts b/apps/web/core/components/settings/profile/sidebar/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/profile/sidebar/item-categories.tsx b/apps/web/core/components/settings/profile/sidebar/item-categories.tsx
new file mode 100644
index 0000000..5de5f28
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/item-categories.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type React from "react";
+import type { LucideIcon } from "lucide-react";
+import { KeyOutline, LockOutline, SettingsOutline, SubscribeOutline, UserOutline } from "@makeplane/propel/icons";
+import { observer } from "mobx-react";
+import { useParams } from "react-router";
+// plane imports
+import {
+  GROUPED_PROFILE_SETTINGS,
+  PROFILE_SETTINGS_CATEGORIES,
+  PROFILE_SETTINGS_CATEGORY_LABELS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { ISvgIcons } from "@plane/propel/icons";
+import type { TProfileSettingsTabs } from "@plane/types";
+// local imports
+import { SettingsSidebarItem } from "../../sidebar/item";
+import { ProfileSettingsSidebarWorkspaceOptions } from "./workspace-options";
+
+const ICONS: Record<TProfileSettingsTabs, LucideIcon | React.FC<ISvgIcons>> = {
+  general: UserOutline,
+  security: LockOutline,
+  preferences: SettingsOutline,
+  notifications: SubscribeOutline,
+  "api-tokens": KeyOutline,
+};
+
+type Props = {
+  activeTab: TProfileSettingsTabs;
+  updateActiveTab: (tab: TProfileSettingsTabs) => void;
+};
+
+export const ProfileSettingsSidebarItemCategories = observer(function ProfileSettingsSidebarItemCategories(
+  props: Props
+) {
+  const { activeTab, updateActiveTab } = props;
+  // params
+  const { profileTabId } = useParams();
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="mt-4 flex flex-col gap-y-4">
+      {PROFILE_SETTINGS_CATEGORIES.map((category) => {
+        const categoryItems = GROUPED_PROFILE_SETTINGS[category];
+
+        if (categoryItems.length === 0) return null;
+
+        return (
+          <div key={category} className="shrink-0">
+            <div className="p-2 text-caption-md-medium text-tertiary capitalize">
+              {t(PROFILE_SETTINGS_CATEGORY_LABELS[category])}
+            </div>
+            <div className="flex flex-col">
+              {categoryItems.map((item) => (
+                <SettingsSidebarItem
+                  key={item.key}
+                  as="button"
+                  onClick={() => updateActiveTab(item.key)}
+                  isActive={activeTab === item.key}
+                  icon={ICONS[item.key]}
+                  label={t(item.i18n_label)}
+                />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+      {profileTabId && <ProfileSettingsSidebarWorkspaceOptions />}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/profile/sidebar/root.tsx b/apps/web/core/components/settings/profile/sidebar/root.tsx
new file mode 100644
index 0000000..bef2b99
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/root.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+import type { TProfileSettingsTabs } from "@plane/types";
+import { cn } from "@plane/utils";
+// local imports
+import { ProfileSettingsSidebarHeader } from "./header";
+import { ProfileSettingsSidebarItemCategories } from "./item-categories";
+
+type Props = {
+  activeTab: TProfileSettingsTabs;
+  className?: string;
+  updateActiveTab: (tab: TProfileSettingsTabs) => void;
+};
+
+export function ProfileSettingsSidebarRoot(props: Props) {
+  const { activeTab, className, updateActiveTab } = props;
+
+  return (
+    <ScrollArea
+      scrollType="hover"
+      orientation="vertical"
+      size="sm"
+      rootClassName={cn("shrink-0 overflow-y-scroll border-r border-r-subtle bg-surface-2 px-3 py-4", className)}
+    >
+      <ProfileSettingsSidebarHeader />
+      <ProfileSettingsSidebarItemCategories activeTab={activeTab} updateActiveTab={updateActiveTab} />
+    </ScrollArea>
+  );
+}
diff --git a/apps/web/core/components/settings/profile/sidebar/workspace-options.tsx b/apps/web/core/components/settings/profile/sidebar/workspace-options.tsx
new file mode 100644
index 0000000..5459bef
--- /dev/null
+++ b/apps/web/core/components/settings/profile/sidebar/workspace-options.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { MailOutline, PlusCircleOutline } from "@makeplane/propel/icons";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { SettingsSidebarItem } from "@/components/settings/sidebar/item";
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+export const ProfileSettingsSidebarWorkspaceOptions = observer(function ProfileSettingsSidebarWorkspaceOptions() {
+  // store hooks
+  const { workspaces } = useWorkspace();
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="shrink-0">
+      <div className="p-2 text-caption-md-medium text-tertiary capitalize">{t("common.workspace")}</div>
+      <div className="flex flex-col">
+        {Object.values(workspaces).map((workspace) => (
+          <SettingsSidebarItem
+            key={workspace.id}
+            as="link"
+            href={`/${workspace.slug}/`}
+            iconNode={<WorkspaceLogo logo={workspace.logo_url} name={workspace.name} classNames="shrink-0" />}
+            label={workspace.name}
+            isActive={false}
+          />
+        ))}
+        <div className="mt-1.5">
+          <SettingsSidebarItem
+            as="link"
+            href="/create-workspace/"
+            icon={PlusCircleOutline}
+            label={t("create_workspace")}
+            isActive={false}
+          />
+          <SettingsSidebarItem
+            as="link"
+            href="/invitations/"
+            icon={MailOutline}
+            label={t("workspace_invites")}
+            isActive={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/project/content/feature-control-item.tsx b/apps/web/core/components/settings/project/content/feature-control-item.tsx
new file mode 100644
index 0000000..ae5c8eb
--- /dev/null
+++ b/apps/web/core/components/settings/project/content/feature-control-item.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { setPromiseToast } from "@plane/propel/toast";
+import type { IProject } from "@plane/types";
+import { Switch } from "@makeplane/propel/components/switch";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  description?: React.ReactNode;
+  disabled?: boolean;
+  projectId: string;
+  featureProperty: keyof IProject;
+  title: React.ReactNode;
+  value: boolean;
+  workspaceSlug: string;
+};
+
+export const ProjectSettingsFeatureControlItem = observer(function ProjectSettingsFeatureControlItem(props: Props) {
+  const { description, disabled, featureProperty, projectId, title, value, workspaceSlug } = props;
+  // store hooks
+  const { getProjectById, updateProject } = useProject();
+  // derived values
+  const currentProjectDetails = getProjectById(projectId);
+
+  const handleSubmit = () => {
+    if (!workspaceSlug || !projectId || !currentProjectDetails) return;
+
+    // making the request to update the project feature
+    const settingsPayload = {
+      [featureProperty]: !currentProjectDetails?.[featureProperty],
+    };
+    const updateProjectPromise = updateProject(workspaceSlug, projectId, settingsPayload);
+
+    setPromiseToast(updateProjectPromise, {
+      loading: "Updating project feature...",
+      success: {
+        title: "Success!",
+        message: () => "Project feature updated successfully.",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Something went wrong while updating project feature. Please try again.",
+      },
+    });
+    void updateProjectPromise.then(() => {
+      return undefined;
+    });
+  };
+
+  return (
+    <SettingsBoxedControlItem
+      title={title}
+      description={description}
+      control={
+        <Switch
+          size="sm"
+          checked={value}
+          onCheckedChange={handleSubmit}
+          disabled={disabled}
+          aria-label={typeof title === "string" ? title : "Toggle project feature"}
+        />
+      }
+    />
+  );
+});
diff --git a/apps/web/core/components/settings/project/sidebar/header.tsx b/apps/web/core/components/settings/project/sidebar/header.tsx
new file mode 100644
index 0000000..e257aef
--- /dev/null
+++ b/apps/web/core/components/settings/project/sidebar/header.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowNarrowLeftOutline } from "@makeplane/propel/icons";
+import { observer } from "mobx-react";
+// plane imports
+import { ROLE_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { IconButton } from "@plane/propel/icon-button";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useProject } from "@/hooks/store/use-project";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+type Props = {
+  projectId: string;
+};
+
+export const ProjectSettingsSidebarHeader = observer(function ProjectSettingsSidebarHeader(props: Props) {
+  const { projectId } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+  const { currentWorkspace } = useWorkspace();
+  const { getPartialProjectById } = useProject();
+  // derived values
+  const projectDetails = getPartialProjectById(projectId);
+  const currentProjectRole = currentWorkspace?.slug
+    ? getProjectRoleByWorkspaceSlugAndProjectId(currentWorkspace.slug, projectId)
+    : undefined;
+  // translation
+  const { t } = useTranslation();
+
+  if (!currentProjectRole) return null;
+
+  return (
+    <div className="shrink-0">
+      <div className="flex items-center gap-1 py-3 pr-5 pl-4 text-body-md-medium">
+        <IconButton
+          variant="ghost"
+          size="base"
+          icon={ArrowNarrowLeftOutline}
+          onClick={() => router.push(`/${currentWorkspace?.slug}/projects/${projectId}/issues/`)}
+        />
+        <p>Project settings</p>
+      </div>
+      <div className="mt-1.5 flex items-center gap-2 truncate px-5 py-0.5">
+        <div className="grid size-8 shrink-0 place-items-center rounded bg-layer-2">
+          <Logo logo={projectDetails?.logo_props} size={20} />
+        </div>
+        <div className="truncate">
+          <p className="truncate text-body-sm-medium">{projectDetails?.name}</p>
+          <p className="truncate text-caption-md-regular">{t(ROLE_DETAILS[currentProjectRole].i18n_title)}</p>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/project/sidebar/index.ts b/apps/web/core/components/settings/project/sidebar/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/settings/project/sidebar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/project/sidebar/item-categories.tsx b/apps/web/core/components/settings/project/sidebar/item-categories.tsx
new file mode 100644
index 0000000..d4b5b16
--- /dev/null
+++ b/apps/web/core/components/settings/project/sidebar/item-categories.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+import { useParams } from "react-router";
+// plane imports
+import {
+  EUserPermissionsLevel,
+  GROUPED_PROJECT_SETTINGS,
+  PROJECT_SETTINGS_CATEGORIES,
+  PROJECT_SETTINGS_CATEGORY_LABELS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { SettingsSidebarItem } from "@/components/settings/sidebar/item";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { PROJECT_SETTINGS_ICONS } from "./item-icon";
+
+type Props = {
+  projectId: string;
+};
+
+export const ProjectSettingsSidebarItemCategories = observer(function ProjectSettingsSidebarItemCategories(
+  props: Props
+) {
+  const { projectId } = props;
+  // params
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="mt-3 flex flex-col divide-y divide-subtle px-3">
+      {PROJECT_SETTINGS_CATEGORIES.map((category) => {
+        const categoryItems = GROUPED_PROJECT_SETTINGS[category];
+        const accessibleItems = categoryItems.filter((item) =>
+          allowPermissions(item.access, EUserPermissionsLevel.PROJECT, workspaceSlug, projectId)
+        );
+
+        if (accessibleItems.length === 0) return null;
+
+        return (
+          <div key={category} className="shrink-0 py-3 first:pt-0 last:pb-0">
+            <div className="p-2 text-caption-md-medium text-tertiary capitalize">
+              {t(PROJECT_SETTINGS_CATEGORY_LABELS[category])}
+            </div>
+            <div className="flex flex-col">
+              {accessibleItems.map((item) => {
+                const isItemActive =
+                  item.href === ""
+                    ? pathname === `/${workspaceSlug}/settings/projects/${projectId}${item.href}/`
+                    : new RegExp(`^/${workspaceSlug}/settings/projects/${projectId}${item.href}/`).test(pathname);
+
+                return (
+                  <SettingsSidebarItem
+                    key={item.key}
+                    as="link"
+                    href={`/${workspaceSlug}/settings/projects/${projectId}${item.href}/`}
+                    isActive={isItemActive}
+                    icon={PROJECT_SETTINGS_ICONS[item.key]}
+                    label={t(item.i18n_label)}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/project/sidebar/item-icon.tsx b/apps/web/core/components/settings/project/sidebar/item-icon.tsx
new file mode 100644
index 0000000..a58928a
--- /dev/null
+++ b/apps/web/core/components/settings/project/sidebar/item-icon.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LucideIcon } from "lucide-react";
+import {
+  CyclesOutline,
+  EstimateOutline,
+  IntakeOutline,
+  LabelsOutline,
+  MembersOutline,
+  ModuleOutline,
+  PagesOutline,
+  StateOutline,
+  TriggerOutline,
+  ViewsOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import type { ISvgIcons } from "@plane/propel/icons";
+import type { TProjectSettingsTabs } from "@plane/types";
+// components
+import { SettingIcon } from "@/components/icons/attachment";
+
+export const PROJECT_SETTINGS_ICONS: Record<TProjectSettingsTabs, LucideIcon | React.FC<ISvgIcons>> = {
+  general: SettingIcon,
+  members: MembersOutline,
+  features_cycles: CyclesOutline,
+  features_modules: ModuleOutline,
+  features_views: ViewsOutline,
+  features_pages: PagesOutline,
+  features_intake: IntakeOutline,
+  states: StateOutline,
+  labels: LabelsOutline,
+  estimates: EstimateOutline,
+  automations: TriggerOutline,
+};
diff --git a/apps/web/core/components/settings/project/sidebar/root.tsx b/apps/web/core/components/settings/project/sidebar/root.tsx
new file mode 100644
index 0000000..1352b0f
--- /dev/null
+++ b/apps/web/core/components/settings/project/sidebar/root.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+// local imports
+import { ProjectSettingsSidebarHeader } from "./header";
+import { ProjectSettingsSidebarItemCategories } from "./item-categories";
+
+type Props = {
+  projectId: string;
+};
+
+export function ProjectSettingsSidebarRoot(props: Props) {
+  const { projectId } = props;
+
+  return (
+    <ScrollArea
+      scrollType="hover"
+      orientation="vertical"
+      size="sm"
+      rootClassName="shrink-0 animate-fade-in h-full w-[250px] bg-surface-1 border-r border-r-subtle overflow-y-scroll"
+      viewportClassName="pb-5"
+    >
+      <ProjectSettingsSidebarHeader projectId={projectId} />
+      <ProjectSettingsSidebarItemCategories projectId={projectId} />
+    </ScrollArea>
+  );
+}
diff --git a/apps/web/core/components/settings/sidebar/item.tsx b/apps/web/core/components/settings/sidebar/item.tsx
new file mode 100644
index 0000000..47937c3
--- /dev/null
+++ b/apps/web/core/components/settings/sidebar/item.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import Link from "next/link";
+// plane imports
+import { cn } from "@plane/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ISvgIcons } from "@plane/propel/icons";
+
+type Props = {
+  isActive: boolean;
+  label: string;
+} & ({ as: "button"; onClick: () => void } | { as: "link"; href: string }) &
+  (
+    | {
+        icon: LucideIcon | React.FC<ISvgIcons>;
+      }
+    | { iconNode: React.ReactElement }
+  );
+
+export function SettingsSidebarItem(props: Props) {
+  const { as, isActive, label } = props;
+  // common class
+  const className = cn(
+    "flex items-center gap-2 rounded-lg px-2 py-1.5 text-left text-body-sm-medium text-secondary transition-colors",
+    {
+      "bg-layer-transparent-selected text-primary": isActive,
+      "hover:bg-layer-transparent-hover": !isActive,
+    }
+  );
+  // common content
+  const content = (
+    <>
+      {"icon" in props ? (
+        <span className="grid size-4 shrink-0 place-items-center">{<props.icon className="size-3.5" />}</span>
+      ) : (
+        props.iconNode
+      )}
+      <span className="truncate">{label}</span>
+    </>
+  );
+
+  if (as === "button") {
+    return (
+      <button type="button" className={className} onClick={props.onClick}>
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <Link className={className} href={props.href}>
+      {content}
+    </Link>
+  );
+}
diff --git a/apps/web/core/components/settings/workspace/sidebar/header.tsx b/apps/web/core/components/settings/workspace/sidebar/header.tsx
new file mode 100644
index 0000000..754d62c
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/header.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ArrowNarrowLeftOutline } from "@makeplane/propel/icons";
+import { observer } from "mobx-react";
+// plane imports
+import { ROLE_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
+// components
+import { WorkspaceLogo } from "@/components/workspace/logo";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+export const WorkspaceSettingsSidebarHeader = observer(function WorkspaceSettingsSidebarHeader() {
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { getWorkspaceRoleByWorkspaceSlug } = useUserPermissions();
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const currentWorkspaceRole = currentWorkspace?.slug
+    ? getWorkspaceRoleByWorkspaceSlug(currentWorkspace.slug)
+    : undefined;
+  // translation
+  const { t } = useTranslation();
+
+  if (!currentWorkspaceRole) return null;
+
+  return (
+    <div className="shrink-0">
+      <div className="flex items-center gap-1 py-3 pr-5 pl-4 text-body-md-medium">
+        <IconButton
+          variant="ghost"
+          size="base"
+          icon={ArrowNarrowLeftOutline}
+          onClick={() => router.push(`/${currentWorkspace?.slug}/`)}
+        />
+        <p>Workspace settings</p>
+      </div>
+      <div className="mt-1.5 flex items-center justify-between gap-2 px-5 py-0.5">
+        <div className="flex items-center gap-2 truncate">
+          <WorkspaceLogo
+            logo={currentWorkspace?.logo_url}
+            name={currentWorkspace?.name}
+            classNames="shrink-0 size-8 border border-subtle"
+          />
+          <div className="truncate">
+            <p className="truncate text-body-sm-medium">{currentWorkspace?.name}</p>
+            <p className="truncate text-caption-md-regular">{t(ROLE_DETAILS[currentWorkspaceRole].i18n_title)}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/workspace/sidebar/index.ts b/apps/web/core/components/settings/workspace/sidebar/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/settings/workspace/sidebar/item-categories.tsx b/apps/web/core/components/settings/workspace/sidebar/item-categories.tsx
new file mode 100644
index 0000000..dbc9306
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/item-categories.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+import { useParams } from "react-router";
+// plane imports
+import {
+  EUserPermissionsLevel,
+  GROUPED_WORKSPACE_SETTINGS,
+  WORKSPACE_SETTINGS_CATEGORIES,
+  WORKSPACE_SETTINGS_CATEGORY_LABELS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { joinUrlPath } from "@plane/utils";
+// components
+import { SettingsSidebarItem } from "@/components/settings/sidebar/item";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { WORKSPACE_SETTINGS_ICONS } from "./item-icon";
+
+export const WorkspaceSettingsSidebarItemCategories = observer(function WorkspaceSettingsSidebarItemCategories() {
+  // params
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div className="mt-3 flex flex-col divide-y divide-subtle px-3">
+      {WORKSPACE_SETTINGS_CATEGORIES.map((category) => {
+        const categoryItems = GROUPED_WORKSPACE_SETTINGS[category];
+        const accessibleItems = categoryItems.filter((item) =>
+          allowPermissions(item.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug)
+        );
+
+        if (accessibleItems.length === 0) return null;
+
+        return (
+          <div key={category} className="shrink-0 py-3 first:pt-0 last:pb-0">
+            <div className="p-2 text-caption-md-medium text-tertiary capitalize">
+              {t(WORKSPACE_SETTINGS_CATEGORY_LABELS[category])}
+            </div>
+            <div className="flex flex-col">
+              {accessibleItems.map((item) => {
+                const isItemActive =
+                  item.href === "/settings"
+                    ? pathname === `/${workspaceSlug}${item.href}/`
+                    : new RegExp(`^/${workspaceSlug}${item.href}/`).test(pathname);
+
+                return (
+                  <SettingsSidebarItem
+                    key={item.key}
+                    as="link"
+                    href={joinUrlPath(workspaceSlug ?? "", item.href)}
+                    isActive={isItemActive}
+                    icon={WORKSPACE_SETTINGS_ICONS[item.key]}
+                    label={t(item.i18n_label)}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx b/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx
new file mode 100644
index 0000000..b4afebb
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/item-icon.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LucideIcon } from "lucide-react";
+import {
+  BillingsOutline,
+  BuildingOutline,
+  ExportOutline,
+  MembersOutline,
+  WebhooksOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import type { ISvgIcons } from "@plane/propel/icons";
+import type { TWorkspaceSettingsTabs } from "@plane/types";
+
+export const WORKSPACE_SETTINGS_ICONS: Record<TWorkspaceSettingsTabs, LucideIcon | React.FC<ISvgIcons>> = {
+  general: BuildingOutline,
+  members: MembersOutline,
+  export: ExportOutline,
+  "billing-and-plans": BillingsOutline,
+  webhooks: WebhooksOutline,
+};
diff --git a/apps/web/core/components/settings/workspace/sidebar/root.tsx b/apps/web/core/components/settings/workspace/sidebar/root.tsx
new file mode 100644
index 0000000..e6d8b63
--- /dev/null
+++ b/apps/web/core/components/settings/workspace/sidebar/root.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ScrollArea } from "@plane/propel/scrollarea";
+import { cn } from "@plane/utils";
+// local imports
+import { WorkspaceSettingsSidebarHeader } from "./header";
+import { WorkspaceSettingsSidebarItemCategories } from "./item-categories";
+
+type Props = {
+  className?: string;
+};
+
+export function WorkspaceSettingsSidebarRoot(props: Props) {
+  const { className } = props;
+
+  return (
+    <ScrollArea
+      scrollType="hover"
+      orientation="vertical"
+      size="sm"
+      rootClassName={cn(
+        "h-full w-[250px] shrink-0 animate-fade-in overflow-y-scroll border-r border-r-subtle bg-surface-1",
+        className
+      )}
+    >
+      <WorkspaceSettingsSidebarHeader />
+      <WorkspaceSettingsSidebarItemCategories />
+    </ScrollArea>
+  );
+}
diff --git a/apps/web/core/components/sidebar/add-button.tsx b/apps/web/core/components/sidebar/add-button.tsx
new file mode 100644
index 0000000..6db327e
--- /dev/null
+++ b/apps/web/core/components/sidebar/add-button.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Button } from "@plane/propel/button";
+
+type Props = React.ComponentProps<"button"> & {
+  label: React.ReactNode;
+  onClick: () => void;
+};
+
+export function SidebarAddButton(props: Props) {
+  const { label, onClick, disabled, ...rest } = props;
+  return (
+    <Button
+      variant={"secondary"}
+      size={"xl"}
+      className="w-full justify-start"
+      onClick={onClick}
+      disabled={disabled}
+      {...rest}
+    >
+      {label}
+    </Button>
+  );
+}
diff --git a/apps/web/core/components/sidebar/resizable-sidebar.tsx b/apps/web/core/components/sidebar/resizable-sidebar.tsx
new file mode 100644
index 0000000..121fd01
--- /dev/null
+++ b/apps/web/core/components/sidebar/resizable-sidebar.tsx
@@ -0,0 +1,269 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, ReactElement, SetStateAction } from "react";
+import React, { useCallback, useEffect, useState, useRef } from "react";
+// helpers
+import { usePlatformOS } from "@plane/hooks";
+import { cn } from "@plane/utils";
+
+interface ResizableSidebarProps {
+  showPeek?: boolean;
+  togglePeek: (value?: boolean) => void;
+  isCollapsed?: boolean;
+  width: number;
+  setWidth: Dispatch<SetStateAction<number>>;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  defaultCollapsed?: boolean;
+  peekDuration?: number;
+  toggleCollapsed: (value?: boolean) => void;
+  onWidthChange?: (width: number) => void;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  className?: string;
+  children?: ReactElement;
+  extendedSidebar?: ReactElement;
+  isAnyExtendedSidebarExpanded?: boolean;
+  isAnySidebarDropdownOpen?: boolean;
+}
+
+export function ResizableSidebar({
+  showPeek = false,
+  togglePeek,
+  peekDuration = 500,
+  isCollapsed = false,
+  toggleCollapsed: toggleCollapsedProp,
+  onCollapsedChange,
+  width,
+  setWidth,
+  onWidthChange,
+  minWidth = 236,
+  maxWidth = 350,
+  className = "",
+  children,
+  extendedSidebar,
+  isAnyExtendedSidebarExpanded = false,
+  isAnySidebarDropdownOpen = false,
+}: ResizableSidebarProps) {
+  // states
+  const [isResizing, setIsResizing] = useState(false);
+  const [isHoveringTrigger, setIsHoveringTrigger] = useState(false);
+  // refs
+  const peekTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const initialWidthRef = useRef<number>(0);
+  const initialMouseXRef = useRef<number>(0);
+  // hooks
+  const { isMobile } = usePlatformOS();
+  // handlers
+  const setShowPeek = useCallback(
+    (value: boolean) => {
+      togglePeek(value);
+    },
+    [togglePeek]
+  );
+
+  const handleResize = useCallback(
+    (e: MouseEvent) => {
+      if (!isResizing) return;
+
+      const deltaX = e.clientX - initialMouseXRef.current;
+      const newWidth = Math.min(Math.max(initialWidthRef.current + deltaX, minWidth), maxWidth);
+      setWidth(newWidth);
+    },
+    [isResizing, minWidth, maxWidth, setWidth]
+  );
+
+  const startResizing = useCallback(
+    (e: React.MouseEvent) => {
+      setIsResizing(true);
+      initialWidthRef.current = width;
+      initialMouseXRef.current = e.clientX;
+    },
+    [width]
+  );
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const toggleCollapsed = useCallback(() => {
+    toggleCollapsedProp();
+    setShowPeek(false);
+    setIsHoveringTrigger(false);
+    if (peekTimeoutRef.current) {
+      clearTimeout(peekTimeoutRef.current);
+    }
+  }, [toggleCollapsedProp, setShowPeek]);
+
+  const handlePeekEnter = useCallback(() => {
+    if (isCollapsed && showPeek) {
+      if (peekTimeoutRef.current) {
+        clearTimeout(peekTimeoutRef.current);
+      }
+    }
+  }, [isCollapsed, showPeek]);
+
+  const handlePeekLeave = useCallback(() => {
+    if (isCollapsed && !isAnyExtendedSidebarExpanded && !isAnySidebarDropdownOpen) {
+      peekTimeoutRef.current = setTimeout(() => {
+        setShowPeek(false);
+      }, peekDuration);
+    }
+  }, [isCollapsed, peekDuration, setShowPeek, isAnyExtendedSidebarExpanded, isAnySidebarDropdownOpen]);
+
+  // Set up event listeners for resizing
+  useEffect(() => {
+    if (isResizing) {
+      document.addEventListener("mousemove", handleResize);
+      document.addEventListener("mouseup", stopResizing);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleResize);
+      document.removeEventListener("mouseup", stopResizing);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizing, handleResize, stopResizing]);
+
+  // Clean up timeout on unmount
+  useEffect(
+    () => () => {
+      if (peekTimeoutRef.current) {
+        clearTimeout(peekTimeoutRef.current);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!isAnySidebarDropdownOpen && isCollapsed && isHoveringTrigger) {
+      handlePeekLeave();
+    }
+  }, [isAnySidebarDropdownOpen]);
+
+  useEffect(() => {
+    if (!isAnyExtendedSidebarExpanded && isCollapsed && isHoveringTrigger) {
+      handlePeekLeave();
+    }
+  }, [isAnyExtendedSidebarExpanded]);
+
+  // Reset peek when sidebar is expanded
+  useEffect(() => {
+    if (!isCollapsed) {
+      setShowPeek(false);
+      setIsHoveringTrigger(false);
+      if (peekTimeoutRef.current) {
+        clearTimeout(peekTimeoutRef.current);
+      }
+    }
+  }, [isCollapsed, setShowPeek]);
+
+  // Call external handlers when state changes
+  useEffect(() => {
+    onWidthChange?.(width);
+  }, [width, onWidthChange]);
+
+  useEffect(() => {
+    onCollapsedChange?.(isCollapsed);
+  }, [isCollapsed, onCollapsedChange]);
+
+  return (
+    <>
+      {/* Main Sidebar */}
+      <div
+        id="main-sidebar"
+        className={cn(
+          "z-20 h-full border-r border-subtle bg-surface-1",
+          !isResizing && "transition-all duration-300 ease-in-out",
+          isCollapsed ? "w-0 translate-x-[-100%] opacity-0" : "translate-x-0 opacity-100",
+          isMobile && "absolute",
+          className
+        )}
+        style={{
+          width: `${isCollapsed ? 0 : width}px`,
+          minWidth: `${isCollapsed ? 0 : width}px`,
+          maxWidth: `${isCollapsed ? 0 : width}px`,
+        }}
+        role="complementary"
+        aria-label="Main sidebar"
+        data-prevent-outside-click={isMobile}
+      >
+        <aside
+          className={cn(
+            "group/sidebar relative flex h-full w-full flex-col overflow-hidden bg-surface-1 pt-3",
+            isAnyExtendedSidebarExpanded && "rounded-none"
+          )}
+        >
+          {children}
+
+          {/* Resize Handle */}
+          <div
+            className={cn(
+              "absolute z-[20] h-full w-1 cursor-ew-resize transition-all duration-200",
+              !isResizing && "hover:bg-surface-2",
+              isResizing && "w-1.5 bg-layer-1",
+              "top-0 right-0"
+            )}
+            // onDoubleClick toggle sidebar
+            onDoubleClick={() => toggleCollapsed()}
+            onMouseDown={(e) => startResizing(e)}
+            role="separator"
+            aria-label="Resize sidebar"
+          />
+        </aside>
+      </div>
+      {/* Peek View */}
+      <div
+        className={cn(
+          "shadow-sm absolute left-0 z-20 h-full bg-surface-1",
+          !isResizing && "transition-all duration-300 ease-in-out",
+          isCollapsed && showPeek ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0",
+          "pointer-events-none",
+          isCollapsed && showPeek && "pointer-events-auto",
+          !showPeek ? "w-0" : "w-full"
+        )}
+        style={{
+          width: `${width}px`,
+        }}
+        onMouseEnter={handlePeekEnter}
+        onMouseLeave={handlePeekLeave}
+        role="complementary"
+        aria-label="Sidebar peek view"
+      >
+        <aside
+          className={cn(
+            "group/sidebar relative z-20 flex h-full w-full flex-col overflow-hidden bg-surface-1 pt-4",
+            "self-center rounded-md rounded-tl-none rounded-bl-none border-r border-subtle",
+            isAnyExtendedSidebarExpanded && "rounded-none"
+          )}
+        >
+          {children}
+          {/* Resize Handle */}
+          <div
+            className={cn(
+              "absolute z-[20] h-full w-1 cursor-ew-resize transition-all duration-200",
+              !isResizing && "hover:bg-surface-2",
+              isResizing && "bg-layer-1",
+              "top-0 right-0"
+            )}
+            // onDoubleClick toggle sidebar
+            onDoubleClick={() => toggleCollapsed()}
+            onMouseDown={(e) => startResizing(e)}
+            role="separator"
+            aria-label="Resize sidebar"
+          />
+        </aside>
+      </div>
+
+      {/* Extended Sidebar */}
+      {extendedSidebar && extendedSidebar}
+    </>
+  );
+}
diff --git a/apps/web/core/components/sidebar/search-button.tsx b/apps/web/core/components/sidebar/search-button.tsx
new file mode 100644
index 0000000..30acec2
--- /dev/null
+++ b/apps/web/core/components/sidebar/search-button.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { SearchOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+
+type Props = {
+  isActive?: boolean;
+};
+
+export function SidebarSearchButton(props: Props) {
+  const { isActive } = props;
+  return (
+    <div
+      className={cn(
+        "shadow-sm grid aspect-square size-8 flex-shrink-0 place-items-center rounded-md border-[0.5px] border-strong outline-none hover:bg-surface-2",
+        {
+          "border-accent-strong-200 bg-accent-primary/10 hover:bg-accent-primary/10": isActive,
+        }
+      )}
+    >
+      <SearchOutline
+        className={cn("size-4 text-tertiary", {
+          "text-accent-secondary": isActive,
+        })}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/sidebar/sidebar-item.tsx b/apps/web/core/components/sidebar/sidebar-item.tsx
new file mode 100644
index 0000000..fa3cfef
--- /dev/null
+++ b/apps/web/core/components/sidebar/sidebar-item.tsx
@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+import { cn } from "@plane/utils";
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface AppSidebarItemData {
+  href?: string;
+  label?: string;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
+  showLabel?: boolean;
+}
+
+interface AppSidebarItemProps {
+  variant?: "link" | "button";
+  item?: AppSidebarItemData;
+}
+
+interface AppSidebarItemLabelProps {
+  highlight?: boolean;
+  label?: string;
+}
+
+interface AppSidebarItemIconProps {
+  icon?: React.ReactNode;
+  highlight?: boolean;
+}
+
+interface AppSidebarLinkItemProps {
+  href?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface AppSidebarButtonItemProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+// ============================================================================
+// STYLES
+// ============================================================================
+
+const styles = {
+  base: "group flex flex-col gap-0.5 items-center justify-center text-tertiary",
+  icon: "flex items-center justify-center gap-2 size-8 rounded-md text-tertiary",
+  iconActive: "bg-layer-transparent-selected text-secondary !text-icon-primary",
+  iconInactive: "group-hover:text-icon-secondary group-hover:bg-layer-transparent-hover !text-icon-tertiary",
+  label: "text-11 font-medium",
+  labelActive: "text-secondary",
+  labelInactive: "group-hover:text-secondary text-tertiary",
+} as const;
+
+// ============================================================================
+// SUB-COMPONENTS
+// ============================================================================
+
+function AppSidebarItemLabel({ highlight = false, label }: AppSidebarItemLabelProps) {
+  if (!label) return null;
+
+  return (
+    <span
+      className={cn(styles.label, {
+        [styles.labelActive]: highlight,
+        [styles.labelInactive]: !highlight,
+      })}
+    >
+      {label}
+    </span>
+  );
+}
+
+function AppSidebarItemIcon({ icon, highlight }: AppSidebarItemIconProps) {
+  if (!icon) return null;
+
+  return (
+    <div
+      className={cn(styles.icon, {
+        [styles.iconActive]: highlight,
+        [styles.iconInactive]: !highlight,
+      })}
+    >
+      {icon}
+    </div>
+  );
+}
+
+function AppSidebarLinkItem({ href, children, className }: AppSidebarLinkItemProps) {
+  if (!href) return null;
+
+  return (
+    <Link href={href} className={cn(styles.base, className)}>
+      {children}
+    </Link>
+  );
+}
+
+function AppSidebarButtonItem({ children, onClick, disabled = false, className }: AppSidebarButtonItemProps) {
+  return (
+    <button className={cn(styles.base, className)} onClick={onClick} disabled={disabled} type="button">
+      {children}
+    </button>
+  );
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+export type AppSidebarItemComponent = React.FC<AppSidebarItemProps> & {
+  Label: React.FC<AppSidebarItemLabelProps>;
+  Icon: React.FC<AppSidebarItemIconProps>;
+  Link: React.FC<AppSidebarLinkItemProps>;
+  Button: React.FC<AppSidebarButtonItemProps>;
+};
+
+function AppSidebarItem({ variant = "link", item }: AppSidebarItemProps) {
+  if (!item) return null;
+
+  const { icon, isActive, label, href, onClick, disabled, showLabel = true } = item;
+
+  const commonItems = (
+    <>
+      <AppSidebarItemIcon icon={icon} highlight={isActive} />
+      {showLabel && <AppSidebarItemLabel highlight={isActive} label={label} />}
+    </>
+  );
+
+  if (variant === "link") {
+    return <AppSidebarLinkItem href={href}>{commonItems}</AppSidebarLinkItem>;
+  }
+
+  return (
+    <AppSidebarButtonItem onClick={onClick} disabled={disabled}>
+      {commonItems}
+    </AppSidebarButtonItem>
+  );
+}
+
+// ============================================================================
+// COMPOUND COMPONENT ASSIGNMENT
+// ============================================================================
+
+AppSidebarItem.Label = AppSidebarItemLabel;
+AppSidebarItem.Icon = AppSidebarItemIcon;
+AppSidebarItem.Link = AppSidebarLinkItem;
+AppSidebarItem.Button = AppSidebarButtonItem;
+
+export { AppSidebarItem };
+export type { AppSidebarItemData, AppSidebarItemProps };
diff --git a/apps/web/core/components/sidebar/sidebar-navigation.tsx b/apps/web/core/components/sidebar/sidebar-navigation.tsx
new file mode 100644
index 0000000..4881516
--- /dev/null
+++ b/apps/web/core/components/sidebar/sidebar-navigation.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cn } from "@plane/utils";
+
+type TSidebarNavItem = {
+  className?: string;
+  isActive?: boolean;
+  children?: React.ReactNode;
+};
+
+export function SidebarNavItem(props: TSidebarNavItem) {
+  const { className, isActive, children } = props;
+  return (
+    <div
+      className={cn(
+        "group relative flex w-full cursor-pointer items-center justify-between gap-1.5 rounded-md px-2 py-1 outline-none",
+        {
+          "!bg-layer-transparent-active text-primary": isActive,
+          "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
+        },
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
new file mode 100644
index 0000000..4c3e9ef
--- /dev/null
+++ b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { LeftSidePaneOutline } from "@makeplane/propel/icons";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { IconButton } from "@plane/propel/icon-button";
+
+export const AppSidebarToggleButton = observer(function AppSidebarToggleButton() {
+  // store hooks
+  const { toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
+
+  return (
+    <IconButton
+      size="base"
+      variant="ghost"
+      icon={LeftSidePaneOutline}
+      onClick={() => {
+        if (sidebarPeek) toggleSidebarPeek(false);
+        toggleSidebar();
+      }}
+    />
+  );
+});
diff --git a/apps/web/core/components/sidebar/sidebar-wrapper.tsx b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
new file mode 100644
index 0000000..7e8700a
--- /dev/null
+++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+import { PreferencesOutline } from "@makeplane/propel/icons";
+import { ScrollArea } from "@plane/propel/scrollarea";
+// components
+import { CustomizeNavigationDialog } from "@/components/navigation/customize-navigation-dialog";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import useSize from "@/hooks/use-window-size";
+// plane web components
+import { WorkspaceEditionBadge } from "@/components/workspace/edition-badge";
+import { AppSidebarToggleButton } from "./sidebar-toggle-button";
+import { IconButton } from "@plane/propel/icon-button";
+
+type TSidebarWrapperProps = {
+  title: string;
+  children: React.ReactNode;
+  quickActions?: React.ReactNode;
+};
+
+export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWrapperProps) {
+  const { title, children, quickActions } = props;
+  // state
+  const [isCustomizeNavDialogOpen, setIsCustomizeNavDialogOpen] = useState(false);
+  // store hooks
+  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
+  const windowSize = useSize();
+  // refs
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (sidebarCollapsed === false && window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  });
+
+  useEffect(() => {
+    if (windowSize[0] < 768 && !sidebarCollapsed) toggleSidebar();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [windowSize]);
+
+  return (
+    <>
+      <CustomizeNavigationDialog isOpen={isCustomizeNavDialogOpen} onClose={() => setIsCustomizeNavDialogOpen(false)} />
+      <div ref={ref} className="flex h-full w-full animate-fade-in flex-col">
+        <div className="flex flex-col gap-3 px-3">
+          {/* Workspace switcher and settings */}
+
+          <div className="flex items-center justify-between gap-2 px-2">
+            <span className="pt-1 text-16 font-medium text-primary">{title}</span>
+            <div className="flex items-center gap-2">
+              {title === "Projects" && (
+                <IconButton
+                  size="base"
+                  variant="ghost"
+                  icon={PreferencesOutline}
+                  onClick={() => setIsCustomizeNavDialogOpen(true)}
+                />
+              )}
+              <AppSidebarToggleButton />
+            </div>
+          </div>
+          {/* Quick actions */}
+          {quickActions}
+        </div>
+
+        <ScrollArea
+          orientation="vertical"
+          scrollType="hover"
+          size="sm"
+          rootClassName="size-full overflow-x-hidden overflow-y-auto"
+          viewportClassName="flex flex-col gap-3 overflow-x-hidden h-full w-full overflow-y-auto px-3 pt-3 pb-0.5"
+        >
+          {children}
+        </ScrollArea>
+        {/* Help Section */}
+        <div className="flex h-12 items-center justify-between border-t border-subtle bg-surface-1 p-3">
+          <WorkspaceEditionBadge />
+          {/* TODO: To be checked if we need this */}
+          {/* <div className="flex items-center gap-2">
+          {!shouldRenderAppRail && <HelpMenu />}
+          {!isAppRailEnabled && <AppSidebarToggleButton />}
+        </div> */}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/stickies/action-bar.tsx b/apps/web/core/components/stickies/action-bar.tsx
new file mode 100644
index 0000000..2ff2236
--- /dev/null
+++ b/apps/web/core/components/stickies/action-bar.tsx
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane hooks
+import { useOutsideClickDetector } from "@plane/hooks";
+// plane ui
+import { AddOutline, CloseOutline, MultipleStickyOutline, StickyNoteOutline } from "@makeplane/propel/icons";
+import { PreviewCard, PreviewCardContent, PreviewCardTrigger } from "@makeplane/propel/components/preview-card";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useSticky } from "@/hooks/use-stickies";
+// components
+import { STICKY_COLORS_LIST } from "../editor/sticky-editor/color-palette";
+import { AllStickiesModal } from "./modal";
+import { StickyNote } from "./sticky";
+
+export const StickyActionBar = observer(function StickyActionBar() {
+  // states
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [newSticky, setNewSticky] = useState(false);
+  const [showRecentSticky, setShowRecentSticky] = useState(false);
+  // navigation
+  const { workspaceSlug } = useParams();
+  // refs
+  const ref = useRef(null);
+  // store hooks
+  const { stickies, activeStickyId, recentStickyId, updateActiveStickyId, fetchRecentSticky, toggleShowNewSticky } =
+    useSticky();
+  const { toggleAllStickiesModal, allStickiesModal } = useCommandPalette();
+  // derived values
+  const recentStickyBackgroundColor = recentStickyId
+    ? STICKY_COLORS_LIST.find((c) => c.key === stickies[recentStickyId].background_color)?.backgroundColor
+    : STICKY_COLORS_LIST[0].backgroundColor;
+
+  useSWR(
+    workspaceSlug ? `WORKSPACE_STICKIES_RECENT_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchRecentSticky(workspaceSlug.toString()) : null
+  );
+
+  useOutsideClickDetector(ref, () => {
+    setNewSticky(false);
+    setShowRecentSticky(false);
+    setIsExpanded(false);
+  });
+
+  const recentStickyButton = (
+    <button
+      className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
+      onClick={() => setShowRecentSticky(true)}
+      style={{ color: recentStickyBackgroundColor }}
+    >
+      <StickyNoteOutline className={cn("size-5 rotate-90")} color={recentStickyBackgroundColor} />
+    </button>
+  );
+
+  return (
+    <div
+      ref={ref}
+      className="sticky-action-bar__item flex flex-col overflow-hidden rounded-full border-2 border-accent-strong/10 bg-surface-2 p-[2px]"
+    >
+      <div
+        className={`flex origin-bottom flex-col gap-2 transition-all duration-300 ease-in-out ${isExpanded ? "mb-2 scale-y-100 opacity-100 " : "h-0 scale-y-0 opacity-0"}`}
+      >
+        <Tooltip label="All stickies" side="left">
+          <button
+            className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
+            onClick={() => toggleAllStickiesModal(true)}
+          >
+            <MultipleStickyOutline className="size-5 rotate-90 text-tertiary" />
+          </button>
+        </Tooltip>
+        {recentStickyId &&
+          (showRecentSticky ? (
+            recentStickyButton
+          ) : (
+            <PreviewCard>
+              <PreviewCardTrigger render={recentStickyButton} />
+              <PreviewCardContent side="left">
+                <div className="relative max-h-[150px] overflow-hidden rounded-lg">
+                  <StickyNote
+                    className="w-full"
+                    workspaceSlug={workspaceSlug.toString()}
+                    stickyId={newSticky ? activeStickyId : recentStickyId}
+                  />
+                  <div
+                    className="absolute top-0 right-0 h-full w-full"
+                    style={{
+                      background: `linear-gradient(to top, ${recentStickyBackgroundColor}, transparent)`,
+                    }}
+                  />
+                </div>
+              </PreviewCardContent>
+            </PreviewCard>
+          ))}
+        <Tooltip label="Add sticky" side="left">
+          <button
+            className="btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1"
+            onClick={() => {
+              updateActiveStickyId("");
+              toggleShowNewSticky(true);
+              setNewSticky(true);
+            }}
+          >
+            <AddOutline className="size-5 rotate-90 text-tertiary" />
+          </button>
+        </Tooltip>
+      </div>
+
+      <button
+        className={`btn btn--icon shadow-sm flex h-10 w-10 items-center justify-center rounded-full bg-surface-1 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        {isExpanded ? (
+          <CloseOutline className="size-5 text-tertiary" />
+        ) : (
+          <StickyNoteOutline className="size-5 rotate-90 text-tertiary" />
+        )}
+      </button>
+
+      <div
+        className={cn(
+          "absolute right-0 bottom-16 z-[20]",
+          "transform transition-all duration-300 ease-in-out",
+          newSticky || showRecentSticky ? "min-h-[300px] translate-y-[0%]" : "h-0 translate-y-[100%]"
+        )}
+      >
+        {(newSticky || (showRecentSticky && recentStickyId)) && (
+          <StickyNote
+            className={"w-[290px]"}
+            onClose={() => (newSticky ? setNewSticky(false) : setShowRecentSticky(false))}
+            workspaceSlug={workspaceSlug.toString()}
+            stickyId={newSticky ? activeStickyId : recentStickyId}
+          />
+        )}
+      </div>
+
+      <AllStickiesModal isOpen={allStickiesModal} handleClose={() => toggleAllStickiesModal(false)} />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/stickies/delete-modal.tsx b/apps/web/core/components/stickies/delete-modal.tsx
new file mode 100644
index 0000000..e26c0eb
--- /dev/null
+++ b/apps/web/core/components/stickies/delete-modal.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// ui
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { AlertModalCore } from "@plane/ui";
+
+interface IStickyDelete {
+  isOpen: boolean;
+  handleSubmit: () => Promise<void>;
+  handleClose: () => void;
+}
+
+export const StickyDeleteModal = observer(function StickyDeleteModal(props: IStickyDelete) {
+  const { isOpen, handleClose, handleSubmit } = props;
+  // states
+  const [loader, setLoader] = useState(false);
+  // hooks
+  const { t } = useTranslation();
+
+  const formSubmit = async () => {
+    try {
+      setLoader(true);
+      await handleSubmit();
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("stickies.toasts.not_removed.title"),
+        message: t("stickies.toasts.not_removed.message"),
+      });
+    } finally {
+      setLoader(false);
+    }
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={formSubmit}
+      isSubmitting={loader}
+      isOpen={isOpen}
+      title={t("stickies.delete")}
+      content={t("stickies.delete_confirmation")}
+    />
+  );
+});
diff --git a/apps/web/core/components/stickies/layout/stickies-infinite.tsx b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
new file mode 100644
index 0000000..ea7029a
--- /dev/null
+++ b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+import { STICKIES_PER_PAGE } from "@plane/constants";
+import { ContentWrapper, Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+import { useSticky } from "@/hooks/use-stickies";
+import { StickiesLayout } from "./stickies-list";
+
+export const StickiesInfinite = observer(function StickiesInfinite() {
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { fetchWorkspaceStickies, fetchNextWorkspaceStickies, getWorkspaceStickyIds, loader, paginationInfo } =
+    useSticky();
+  //state
+  const [elementRef, setElementRef] = useState<HTMLDivElement | null>(null);
+
+  // ref
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useSWR(
+    workspaceSlug ? `WORKSPACE_STICKIES_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWorkspaceStickies(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const handleLoadMore = () => {
+    if (loader === "pagination") return;
+    fetchNextWorkspaceStickies(workspaceSlug?.toString());
+  };
+
+  const hasNextPage = paginationInfo?.next_page_results && paginationInfo?.next_cursor !== undefined;
+  const shouldObserve = hasNextPage && loader !== "pagination";
+  const workspaceStickies = getWorkspaceStickyIds(workspaceSlug?.toString());
+  useIntersectionObserver(containerRef, shouldObserve ? elementRef : null, handleLoadMore);
+
+  return (
+    <ContentWrapper ref={containerRef} className="space-y-4">
+      <StickiesLayout
+        workspaceSlug={workspaceSlug.toString()}
+        intersectionElement={
+          hasNextPage &&
+          workspaceStickies?.length >= STICKIES_PER_PAGE && (
+            <div
+              className={cn("box-border flex min-h-[300px] w-full p-2")}
+              ref={setElementRef}
+              id="intersection-element"
+            >
+              <div className="flex min-h-[300px] w-full rounded-sm">
+                <Loader className="h-full w-full">
+                  <Loader.Item height="100%" width="100%" />
+                </Loader>
+              </div>
+            </div>
+          )
+        }
+      />
+    </ContentWrapper>
+  );
+});
diff --git a/apps/web/core/components/stickies/layout/stickies-list.tsx b/apps/web/core/components/stickies/layout/stickies-list.tsx
new file mode 100644
index 0000000..41c97c6
--- /dev/null
+++ b/apps/web/core/components/stickies/layout/stickies-list.tsx
@@ -0,0 +1,213 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type {
+  DropTargetRecord,
+  DragLocationHistory,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import type { ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+import Masonry from "react-masonry-component";
+
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+import { EUserWorkspaceRoles } from "@plane/types";
+// assets
+import darkStickiesAsset from "@/app/assets/empty-state/stickies/stickies-dark.webp?url";
+import lightStickiesAsset from "@/app/assets/empty-state/stickies/stickies-light.webp?url";
+import darkStickiesSearchAsset from "@/app/assets/empty-state/stickies/stickies-search-dark.webp?url";
+import lightStickiesSearchAsset from "@/app/assets/empty-state/stickies/stickies-search-light.webp?url";
+// components
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { SimpleEmptyState } from "@/components/empty-state/simple-empty-state-root";
+import { StickiesEmptyState } from "@/components/home/widgets/empty-states/stickies";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import { useSticky } from "@/hooks/use-stickies";
+// local imports
+import { useStickyOperations } from "../sticky/use-operations";
+import { StickiesLoader } from "./stickies-loader";
+import { StickyDNDWrapper } from "./sticky-dnd-wrapper";
+import { getInstructionFromPayload } from "./sticky.helpers";
+
+type TStickiesLayout = {
+  workspaceSlug: string;
+  intersectionElement?: React.ReactNode | null;
+};
+
+type TProps = TStickiesLayout & {
+  columnCount: number;
+};
+
+export const StickiesList = observer(function StickiesList(props: TProps) {
+  const { workspaceSlug, intersectionElement, columnCount } = props;
+  // navigation
+  const pathname = usePathname();
+  // theme hook
+  const { resolvedTheme } = useTheme();
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { getWorkspaceStickyIds, toggleShowNewSticky, searchQuery, loader } = useSticky();
+  const { allowPermissions } = useUserPermissions();
+  // sticky operations
+  const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
+  // derived values
+  const workspaceStickyIds = getWorkspaceStickyIds(workspaceSlug?.toString());
+  const itemWidth = `${100 / columnCount}%`;
+  const totalRows = Math.ceil(workspaceStickyIds.length / columnCount);
+  const isStickiesPage = pathname?.includes("stickies");
+  const hasGuestLevelPermissions = allowPermissions(
+    [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const stickiesResolvedPath = resolvedTheme === "light" ? lightStickiesAsset : darkStickiesAsset;
+  const stickiesSearchResolvedPath = resolvedTheme === "light" ? lightStickiesSearchAsset : darkStickiesSearchAsset;
+  const masonryRef = useRef<any>(null);
+
+  const handleLayout = () => {
+    if (masonryRef.current) {
+      // Force reflow
+      masonryRef.current.performLayout();
+    }
+  };
+
+  // Function to determine if an item is in first or last row
+  const getRowPositions = (index: number) => {
+    const currentRow = Math.floor(index / columnCount);
+    return {
+      isInFirstRow: currentRow === 0,
+      isInLastRow: currentRow === totalRows - 1 || index >= workspaceStickyIds.length - columnCount,
+    };
+  };
+
+  const handleDrop = (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => {
+    const dropTargets = location?.current?.dropTargets ?? [];
+    if (!dropTargets || dropTargets.length <= 0) return;
+
+    const dropTarget = dropTargets[0];
+    if (!dropTarget?.data?.id || !source.data?.id) return;
+
+    const instruction = getInstructionFromPayload(dropTarget, source, location);
+    const droppedId = dropTarget.data.id;
+    const sourceId = source.data.id;
+
+    try {
+      if (!instruction || !droppedId || !sourceId) return;
+      stickyOperations.updatePosition(workspaceSlug, sourceId as string, droppedId as string, instruction);
+    } catch (error) {
+      console.error("Error reordering sticky:", error);
+    }
+  };
+
+  if (loader === "init-loader") {
+    return <StickiesLoader />;
+  }
+
+  if (loader === "loaded" && workspaceStickyIds.length === 0) {
+    return (
+      <div className="grid size-full place-items-center">
+        {isStickiesPage ? (
+          <>
+            {searchQuery ? (
+              <SimpleEmptyState
+                title={t("stickies.empty_state.search.title")}
+                description={t("stickies.empty_state.search.description")}
+                assetPath={stickiesSearchResolvedPath}
+              />
+            ) : (
+              <DetailedEmptyState
+                title={t("stickies.empty_state.general.title")}
+                description={t("stickies.empty_state.general.description")}
+                assetPath={stickiesResolvedPath}
+                primaryButton={{
+                  prependIcon: <AddOutline className="size-4" />,
+                  text: t("stickies.empty_state.general.primary_button.text"),
+                  onClick: () => {
+                    toggleShowNewSticky(true);
+                    stickyOperations.create();
+                  },
+                  disabled: !hasGuestLevelPermissions,
+                }}
+              />
+            )}
+          </>
+        ) : (
+          <StickiesEmptyState />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="transition-opacity duration-300 ease-in-out">
+      {/* @ts-expect-error type mismatch here */}
+      <Masonry elementType="div" ref={masonryRef}>
+        {workspaceStickyIds.map((stickyId, index) => {
+          const { isInFirstRow, isInLastRow } = getRowPositions(index);
+          return (
+            <StickyDNDWrapper
+              key={stickyId}
+              stickyId={stickyId}
+              workspaceSlug={workspaceSlug.toString()}
+              itemWidth={itemWidth}
+              handleDrop={handleDrop}
+              isLastChild={index === workspaceStickyIds.length - 1}
+              isInFirstRow={isInFirstRow}
+              isInLastRow={isInLastRow}
+              handleLayout={handleLayout}
+            />
+          );
+        })}
+        {intersectionElement && <div style={{ width: itemWidth }}>{intersectionElement}</div>}
+      </Masonry>
+    </div>
+  );
+});
+
+export function StickiesLayout(props: TStickiesLayout) {
+  // states
+  const [containerWidth, setContainerWidth] = useState<number | null>(null);
+  // refs
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref?.current) return;
+
+    setContainerWidth(ref?.current.offsetWidth);
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+
+    resizeObserver.observe(ref?.current);
+    return () => resizeObserver.disconnect();
+  }, []);
+
+  const getColumnCount = (width: number | null): number => {
+    if (width === null) return 4;
+
+    if (width < 640) return 2; // sm
+    if (width < 850) return 3; // md
+    if (width < 1024) return 4; // lg
+    if (width < 1280) return 5; // xl
+    return 6; // 2xl and above
+  };
+  const columnCount = getColumnCount(containerWidth);
+
+  return (
+    <div ref={ref} className="size-full">
+      <StickiesList {...props} columnCount={columnCount} />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/stickies/layout/stickies-loader.tsx b/apps/web/core/components/stickies/layout/stickies-loader.tsx
new file mode 100644
index 0000000..f1666fc
--- /dev/null
+++ b/apps/web/core/components/stickies/layout/stickies-loader.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane ui
+import { Loader } from "@plane/ui";
+
+export function StickiesLoader() {
+  return (
+    <div className="grid grid-cols-4 gap-4 overflow-scroll pb-2">
+      {Array.from({ length: 4 }).map((_, index) => (
+        <Loader key={index} className="space-y-5 rounded-sm border border-subtle p-3">
+          <div className="space-y-2">
+            <Loader.Item height="20px" />
+            <Loader.Item height="15px" width="75%" />
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="100%" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="75%" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="90%" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="60%" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="50%" />
+            </div>
+          </div>
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <Loader.Item height="25px" width="25px" />
+              <Loader.Item height="25px" width="25px" />
+              <Loader.Item height="25px" width="25px" />
+            </div>
+            <Loader.Item height="25px" width="25px" className="flex-shrink-0" />
+          </div>
+        </Loader>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/stickies/layout/stickies-truncated.tsx b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
new file mode 100644
index 0000000..770709f
--- /dev/null
+++ b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane utils
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+// hooks
+import { useSticky } from "@/hooks/use-stickies";
+// components
+import { ContentOverflowWrapper } from "../../core/content-overflow-HOC";
+import { StickiesLayout } from "./stickies-list";
+
+type StickiesTruncatedProps = {
+  handleClose?: () => void;
+};
+
+export const StickiesTruncated = observer(function StickiesTruncated(props: StickiesTruncatedProps) {
+  const { handleClose = () => {} } = props;
+  // navigation
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { fetchWorkspaceStickies } = useSticky();
+  const { t } = useTranslation();
+
+  useSWR(
+    workspaceSlug ? `WORKSPACE_STICKIES_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWorkspaceStickies(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  return (
+    <ContentOverflowWrapper
+      maxHeight={620}
+      containerClassName="pb-2 box-border"
+      fallback={null}
+      customButton={
+        <Link
+          href={`/${workspaceSlug}/stickies`}
+          className={cn(
+            "w-full gap-1 bg-surface-2/20 text-13 font-medium text-accent-primary transition-opacity duration-300"
+          )}
+          onClick={handleClose}
+        >
+          {t("show_all")}
+        </Link>
+      }
+    >
+      <StickiesLayout workspaceSlug={workspaceSlug?.toString()} />
+    </ContentOverflowWrapper>
+  );
+});
diff --git a/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx b/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
new file mode 100644
index 0000000..82e2014
--- /dev/null
+++ b/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import type {
+  DropTargetRecord,
+  DragLocationHistory,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import type { ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+import { createRoot } from "react-dom/client";
+// plane types
+import type { InstructionType } from "@plane/types";
+// components
+import { StickyNote } from "../sticky";
+// helpers
+import { getInstructionFromPayload } from "./sticky.helpers";
+
+type Props = {
+  stickyId: string;
+  workspaceSlug: string;
+  itemWidth: string;
+  isLastChild: boolean;
+  isInFirstRow: boolean;
+  isInLastRow: boolean;
+  handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
+  handleLayout: () => void;
+};
+
+export const StickyDNDWrapper = observer(function StickyDNDWrapper(props: Props) {
+  const { stickyId, workspaceSlug, itemWidth, isLastChild, handleDrop, handleLayout } = props;
+  // states
+  const [isDragging, setIsDragging] = useState(false);
+  const [_instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
+  // refs
+  const elementRef = useRef<HTMLDivElement>(null);
+  // navigation
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+
+    const initialData = { id: stickyId, type: "sticky" };
+
+    if (pathname.includes("stickies"))
+      return combine(
+        draggable({
+          element,
+          dragHandle: element,
+          getInitialData: () => initialData,
+          onDragStart: () => {
+            setIsDragging(true);
+          },
+          onDrop: () => {
+            setIsDragging(false);
+          },
+          onGenerateDragPreview: ({ nativeSetDragImage }) => {
+            setCustomNativeDragPreview({
+              getOffset: pointerOutsideOfPreview({ x: "-200px", y: "0px" }),
+              render: ({ container }) => {
+                const root = createRoot(container);
+                root.render(
+                  <div className="scale-50">
+                    <div className="-m-2 max-h-[150px]">
+                      <StickyNote
+                        className={"w-[290px]"}
+                        workspaceSlug={workspaceSlug.toString()}
+                        stickyId={stickyId}
+                        showToolbar={false}
+                      />
+                    </div>
+                  </div>
+                );
+                return () => root.unmount();
+              },
+              nativeSetDragImage,
+            });
+          },
+        }),
+        dropTargetForElements({
+          element,
+          canDrop: ({ source }) => source.data?.type === "sticky",
+          getData: ({ input, element }) => {
+            const blockedStates: InstructionType[] = ["make-child"];
+            if (!isLastChild) {
+              blockedStates.push("reorder-below");
+            }
+
+            return attachInstruction(initialData, {
+              input,
+              element,
+              currentLevel: 1,
+              indentPerLevel: 0,
+              mode: isLastChild ? "last-in-group" : "standard",
+              block: blockedStates,
+            });
+          },
+          onDrag: ({ self, source, location }) => {
+            const instruction = getInstructionFromPayload(self, source, location);
+            setInstruction(instruction);
+          },
+          onDragLeave: () => {
+            setInstruction(undefined);
+          },
+          onDrop: ({ self, source, location }) => {
+            setInstruction(undefined);
+            handleDrop(self, source, location);
+          },
+        })
+      );
+  }, [handleDrop, isDragging, isLastChild, pathname, stickyId, workspaceSlug]);
+
+  return (
+    <div
+      className="box-border flex flex-col p-[8px]"
+      style={{
+        width: itemWidth,
+      }}
+    >
+      {/* {!isInFirstRow && <DropIndicator isVisible={instruction === "reorder-above"} />} */}
+      <StickyNote
+        key={stickyId || "new"}
+        workspaceSlug={workspaceSlug}
+        stickyId={stickyId}
+        handleLayout={handleLayout}
+      />
+      {/* {!isInLastRow && <DropIndicator isVisible={instruction === "reorder-below"} />} */}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/stickies/layout/sticky.helpers.ts b/apps/web/core/components/stickies/layout/sticky.helpers.ts
new file mode 100644
index 0000000..4855445
--- /dev/null
+++ b/apps/web/core/components/stickies/layout/sticky.helpers.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import type { InstructionType, IPragmaticPayloadLocation, TDropTarget } from "@plane/types";
+
+export type TargetData = {
+  id: string;
+  parentId: string | null;
+  isGroup: boolean;
+  isChild: boolean;
+};
+
+/**
+ * extracts the Payload and translates the instruction for the current dropTarget based on drag and drop payload
+ * @param dropTarget dropTarget for which the instruction is required
+ * @param source the dragging sticky data that is being dragged on the dropTarget
+ * @param location location includes the data of all the dropTargets the source is being dragged on
+ * @returns Instruction for dropTarget
+ */
+export const getInstructionFromPayload = (
+  dropTarget: TDropTarget,
+  source: TDropTarget,
+  location: IPragmaticPayloadLocation
+): InstructionType | undefined => {
+  const dropTargetData = dropTarget?.data as TargetData;
+  const sourceData = source?.data as TargetData;
+  const allDropTargets = location?.current?.dropTargets;
+
+  // if all the dropTargets are greater than 1 meaning the source is being dragged on a group and its child at the same time
+  // and also if the dropTarget in question is also a group then, it should be a child of the current Droptarget
+  if (allDropTargets?.length > 1 && dropTargetData?.isGroup) return "make-child";
+
+  if (!dropTargetData || !sourceData) return undefined;
+
+  let instruction = extractInstruction(dropTargetData)?.type;
+
+  // If the instruction is blocked then set an instruction based on if dropTarget it is a child or not
+  if (instruction === "instruction-blocked") {
+    instruction = dropTargetData.isChild ? "reorder-above" : "make-child";
+  }
+
+  // if source that is being dragged is a group. A group cannon be a child of any other sticky,
+  // hence if current instruction is to be a child of dropTarget then reorder-above instead
+  if (instruction === "make-child" && sourceData.isGroup) instruction = "reorder-above";
+
+  return instruction;
+};
diff --git a/apps/web/core/components/stickies/modal/index.tsx b/apps/web/core/components/stickies/modal/index.tsx
new file mode 100644
index 0000000..5dff0bb
--- /dev/null
+++ b/apps/web/core/components/stickies/modal/index.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { EModalWidth, ModalCore } from "@plane/ui";
+import { Stickies } from "./stickies";
+
+type TProps = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+export function AllStickiesModal(props: TProps) {
+  const { isOpen, handleClose } = props;
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.VXL}>
+      <Stickies handleClose={handleClose} />
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/stickies/modal/search.tsx b/apps/web/core/components/stickies/modal/search.tsx
new file mode 100644
index 0000000..dfed3db
--- /dev/null
+++ b/apps/web/core/components/stickies/modal/search.tsx
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useRef, useState } from "react";
+import { debounce } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane hooks
+import { useOutsideClickDetector } from "@plane/hooks";
+// helpers
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+import { useSticky } from "@/hooks/use-stickies";
+import { IconButton } from "@plane/propel/icon-button";
+
+export const StickySearch = observer(function StickySearch() {
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { searchQuery, updateSearchQuery, fetchWorkspaceStickies } = useSticky();
+  const { t } = useTranslation();
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (searchQuery && searchQuery.trim() !== "") {
+        updateSearchQuery("");
+        fetchStickies();
+      } else setIsSearchOpen(false);
+    }
+  };
+
+  const fetchStickies = async () => {
+    await fetchWorkspaceStickies(workspaceSlug.toString());
+  };
+
+  const debouncedSearch = useCallback(
+    debounce(async () => {
+      await fetchStickies();
+    }, 500),
+    [fetchWorkspaceStickies]
+  );
+
+  return (
+    <div className="my-auto mr-2 flex items-center">
+      {!isSearchOpen && (
+        <IconButton
+          variant="ghost"
+          size="lg"
+          className="-mr-2"
+          icon={SearchOutline}
+          onClick={() => {
+            setIsSearchOpen(true);
+            inputRef.current?.focus();
+          }}
+        />
+      )}
+      <div
+        className={cn(
+          "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent text-placeholder opacity-0 transition-[width] ease-linear",
+          {
+            "w-30 border-subtle px-2.5 py-1.5 opacity-100 md:w-64": isSearchOpen,
+          }
+        )}
+      >
+        <SearchOutline className="size-3.5 shrink-0" />
+        <input
+          ref={inputRef}
+          className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
+          placeholder={t("stickies.search_placeholder")}
+          value={searchQuery}
+          onChange={(e) => {
+            updateSearchQuery(e.target.value);
+            debouncedSearch();
+          }}
+          onKeyDown={handleInputKeyDown}
+        />
+        {isSearchOpen && (
+          <button
+            type="button"
+            className="grid place-items-center"
+            onClick={() => {
+              updateSearchQuery("");
+              setIsSearchOpen(false);
+              fetchStickies();
+            }}
+          >
+            <CloseOutline className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/stickies/modal/stickies.tsx b/apps/web/core/components/stickies/modal/stickies.tsx
new file mode 100644
index 0000000..e56978d
--- /dev/null
+++ b/apps/web/core/components/stickies/modal/stickies.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+
+// plane ui
+import { AddOutline, CloseOutline, MultipleStickyOutline } from "@makeplane/propel/icons";
+// hooks
+import { useSticky } from "@/hooks/use-stickies";
+// components
+import { StickiesTruncated } from "../layout/stickies-truncated";
+import { useStickyOperations } from "../sticky/use-operations";
+import { StickySearch } from "./search";
+
+type TProps = {
+  handleClose?: () => void;
+};
+
+export const Stickies = observer(function Stickies(props: TProps) {
+  const { handleClose } = props;
+  // navigation
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { creatingSticky, toggleShowNewSticky } = useSticky();
+  // sticky operations
+  const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
+
+  return (
+    <div className="min-h-[620px] p-6 pb-0">
+      {/* header */}
+      <div className="mb-6 flex items-center justify-between">
+        {/* Title */}
+        <div className="flex items-center gap-2 text-secondary">
+          <MultipleStickyOutline className="size-5 flex-shrink-0 rotate-90" />
+          <p className="text-18 font-medium">Your stickies</p>
+        </div>
+        {/* actions */}
+        <div className="flex gap-2">
+          <StickySearch />
+          <button
+            onClick={() => {
+              toggleShowNewSticky(true);
+              stickyOperations.create();
+            }}
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
+            disabled={creatingSticky}
+          >
+            <AddOutline className="my-auto size-4" /> <span>Add sticky</span>
+            {creatingSticky && (
+              <div className="ml-2 flex items-center justify-center">
+                <div
+                  className={`h-4 w-4 animate-spin rounded-full border-2 border-accent-strong border-t-transparent`}
+                  role="status"
+                  aria-label="loading"
+                />
+              </div>
+            )}
+          </button>
+          {handleClose && (
+            <button
+              type="button"
+              onClick={handleClose}
+              className="my-auto grid flex-shrink-0 place-items-center rounded-sm p-1 text-tertiary transition-colors hover:bg-layer-1 hover:text-primary"
+            >
+              <CloseOutline className="size-4 text-placeholder" />
+            </button>
+          )}
+        </div>
+      </div>
+      {/* content */}
+      <div className="mb-4 max-h-[625px] overflow-scroll">
+        <StickiesTruncated handleClose={handleClose} />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/stickies/sticky/index.ts b/apps/web/core/components/stickies/sticky/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/stickies/sticky/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/stickies/sticky/inputs.tsx b/apps/web/core/components/stickies/sticky/inputs.tsx
new file mode 100644
index 0000000..374f9ca
--- /dev/null
+++ b/apps/web/core/components/stickies/sticky/inputs.tsx
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef } from "react";
+import { usePathname } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import type { TSticky } from "@plane/types";
+import { cn, isCommentEmpty } from "@plane/utils";
+import { StickyEditor } from "@/components/editor/sticky-editor";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+
+// const StickyEditor = dynamic(() => import("../../editor/sticky-editor").then((mod) => mod.StickyEditor), {
+//   ssr: false,
+// });
+
+type TProps = {
+  stickyData: Partial<TSticky> | undefined;
+  workspaceSlug: string;
+  handleUpdate: (payload: Partial<TSticky>) => void;
+  stickyId: string | undefined;
+  showToolbar?: boolean;
+  handleChange: (data: Partial<TSticky>) => Promise<void>;
+  handleDelete: () => void;
+};
+
+export function StickyInput(props: TProps) {
+  const { stickyData, workspaceSlug, handleUpdate, stickyId, handleDelete, handleChange, showToolbar } = props;
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // navigation
+  const pathname = usePathname();
+  // store hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  // derived values
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id?.toString() ?? "";
+  const isStickiesPage = pathname?.includes("stickies");
+  // form info
+  const { handleSubmit, reset, control } = useForm<TSticky>({
+    defaultValues: {
+      description_html: stickyData?.description_html,
+    },
+  });
+  // handle description update
+  const handleFormSubmit = useCallback(
+    async (formdata: Partial<TSticky>) => {
+      await handleUpdate({
+        description_html: formdata.description_html ?? "<p></p>",
+      });
+    },
+    [handleUpdate]
+  );
+  // reset form values
+  useEffect(() => {
+    if (!stickyId) return;
+    reset({
+      id: stickyId,
+      description_html: stickyData?.description_html?.trim() === "" ? "<p></p>" : stickyData?.description_html,
+    });
+  }, [stickyData, stickyId, reset]);
+
+  return (
+    <div className="flex-1">
+      <Controller
+        name="description_html"
+        control={control}
+        render={({ field: { onChange } }) => (
+          <StickyEditor
+            id={`description-${stickyId}`}
+            initialValue={stickyData?.description_html ?? ""}
+            value={null}
+            workspaceSlug={workspaceSlug}
+            workspaceId={workspaceId}
+            onChange={(_description, description_html) => {
+              onChange(description_html);
+              handleSubmit(handleFormSubmit)();
+            }}
+            placeholder={(_, value) => {
+              const isContentEmpty = isCommentEmpty(value);
+              if (!isContentEmpty) return "";
+              return "Click to type here";
+            }}
+            containerClassName={cn(
+              "vertical-scrollbar scrollbar-sm max-h-[540px] min-h-[256px] w-full overflow-y-scroll p-4 text-14",
+              {
+                "max-h-[588px]": isStickiesPage,
+              }
+            )}
+            uploadFile={async () => ""}
+            duplicateFile={async () => ""}
+            showToolbar={showToolbar}
+            parentClassName="border-none p-0"
+            handleDelete={handleDelete}
+            handleColorChange={handleChange}
+            ref={editorRef}
+          />
+        )}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/stickies/sticky/root.tsx b/apps/web/core/components/stickies/sticky/root.tsx
new file mode 100644
index 0000000..17fa652
--- /dev/null
+++ b/apps/web/core/components/stickies/sticky/root.tsx
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useState } from "react";
+import { debounce } from "lodash-es";
+import { observer } from "mobx-react";
+import { ArrowCollapseOutline } from "@makeplane/propel/icons";
+// plane types
+import type { TSticky } from "@plane/types";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useSticky } from "@/hooks/use-stickies";
+// components
+import { STICKY_COLORS_LIST } from "../../editor/sticky-editor/color-palette";
+import { StickyDeleteModal } from "../delete-modal";
+import { StickyInput } from "./inputs";
+import { getRandomStickyColor, useStickyOperations } from "./use-operations";
+
+type TProps = {
+  onClose?: () => void;
+  workspaceSlug: string;
+  className?: string;
+  stickyId: string | undefined;
+  showToolbar?: boolean;
+  handleLayout?: () => void;
+};
+export const StickyNote = observer(function StickyNote(props: TProps) {
+  const { onClose, workspaceSlug, className = "", stickyId, showToolbar, handleLayout } = props;
+  // navigation
+  // const pathName = usePathname();
+  // states
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  // store hooks
+  const { stickies } = useSticky();
+  // sticky operations
+  const { stickyOperations } = useStickyOperations({ workspaceSlug });
+  // derived values
+  const stickyData: Partial<TSticky> = stickyId ? stickies[stickyId] : { background_color: getRandomStickyColor() };
+  // const isStickiesPage = pathName?.includes("stickies");
+  const backgroundColor =
+    STICKY_COLORS_LIST.find((c) => c.key === stickyData?.background_color)?.backgroundColor ||
+    STICKY_COLORS_LIST[0].backgroundColor;
+
+  const handleChange = useCallback(
+    async (payload: Partial<TSticky>) => {
+      if (stickyId) {
+        await stickyOperations.update(stickyId, payload);
+      } else {
+        await stickyOperations.create({
+          ...stickyData,
+          ...payload,
+        });
+      }
+    },
+    [stickyId, stickyOperations]
+  );
+
+  const debouncedFormSave = useCallback(
+    debounce(async (payload: Partial<TSticky>) => {
+      await handleChange(payload);
+    }, 500),
+    [stickyOperations, stickyData, handleChange]
+  );
+
+  const handleDelete = async () => {
+    if (!stickyId) return;
+    onClose?.();
+    stickyOperations.remove(stickyId);
+  };
+
+  return (
+    <>
+      <StickyDeleteModal
+        isOpen={isDeleteModalOpen}
+        handleSubmit={handleDelete}
+        handleClose={() => setIsDeleteModalOpen(false)}
+      />
+      <div
+        className={cn("group/sticky flex h-fit w-full flex-col overflow-y-scroll rounded-sm", className)}
+        style={{
+          backgroundColor,
+        }}
+      >
+        {/* {isStickiesPage && <StickyItemDragHandle isDragging={false} />}{" "} */}
+        {onClose && (
+          <button type="button" className="flex flex-shrink-0 justify-end p-2.5" onClick={onClose}>
+            <ArrowCollapseOutline className="size-4" />
+          </button>
+        )}
+        {/* inputs */}
+        <div className="-mt-2">
+          <StickyInput
+            stickyData={stickyData}
+            workspaceSlug={workspaceSlug}
+            handleUpdate={(payload) => {
+              handleLayout?.();
+              debouncedFormSave(payload);
+            }}
+            stickyId={stickyId}
+            handleDelete={() => setIsDeleteModalOpen(true)}
+            handleChange={handleChange}
+            showToolbar={showToolbar}
+          />
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx b/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
new file mode 100644
index 0000000..289bb1f
--- /dev/null
+++ b/apps/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// ui
+import { DragHandle } from "@plane/ui";
+// helper
+import { cn } from "@plane/utils";
+
+type Props = {
+  isDragging: boolean;
+};
+
+export const StickyItemDragHandle = observer(function StickyItemDragHandle(props: Props) {
+  const { isDragging } = props;
+
+  return (
+    <div
+      className={cn(
+        "absolute top-3 left-1/2 mr-2 hidden -translate-x-1/2 rotate-90 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/sticky:flex",
+        {
+          "cursor-grabbing": isDragging,
+        }
+      )}
+    >
+      <DragHandle className="bg-transparent" />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/stickies/sticky/use-operations.tsx b/apps/web/core/components/stickies/sticky/use-operations.tsx
new file mode 100644
index 0000000..c1177ec
--- /dev/null
+++ b/apps/web/core/components/stickies/sticky/use-operations.tsx
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+// plane types
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { InstructionType, TSticky } from "@plane/types";
+// plane utils
+import { isCommentEmpty } from "@plane/utils";
+// components
+import { STICKY_COLORS_LIST } from "@/components/editor/sticky-editor/color-palette";
+// hooks
+import { useSticky } from "@/hooks/use-stickies";
+
+export type TOperations = {
+  create: (data?: Partial<TSticky>) => Promise<void>;
+  update: (stickyId: string, data: Partial<TSticky>) => Promise<void>;
+  remove: (stickyId: string) => Promise<void>;
+  updatePosition: (
+    workspaceSlug: string,
+    sourceId: string,
+    droppedId: string,
+    instruction: InstructionType
+  ) => Promise<void>;
+};
+
+type TProps = {
+  workspaceSlug: string;
+};
+
+export const getRandomStickyColor = (): string => {
+  const randomIndex = Math.floor(Math.random() * STICKY_COLORS_LIST.length);
+  return STICKY_COLORS_LIST[randomIndex].key;
+};
+
+export const useStickyOperations = (props: TProps) => {
+  const { workspaceSlug } = props;
+  // store hooks
+  const { stickies, getWorkspaceStickyIds, createSticky, updateSticky, deleteSticky, updateStickyPosition } =
+    useSticky();
+  const { t } = useTranslation();
+
+  const isValid = (data: Partial<TSticky>) => {
+    if (data.name && data.name.length > 100) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("stickies.toasts.not_updated.title"),
+        message: t("stickies.toasts.errors.wrong_name"),
+      });
+      return false;
+    }
+    return true;
+  };
+
+  const stickyOperations: TOperations = useMemo(
+    () => ({
+      create: async (data?: Partial<TSticky>) => {
+        try {
+          const payload: Partial<TSticky> = {
+            background_color: getRandomStickyColor(),
+            ...data,
+          };
+          const workspaceStickIds = getWorkspaceStickyIds(workspaceSlug);
+          // check if latest sticky is empty
+          if (workspaceStickIds && workspaceStickIds.length >= 0) {
+            const latestSticky = stickies[workspaceStickIds[0]];
+            if (latestSticky && (!latestSticky.description_html || isCommentEmpty(latestSticky.description_html))) {
+              setToast({
+                message: t("stickies.toasts.errors.already_exists"),
+                type: TOAST_TYPE.WARNING,
+                title: t("stickies.toasts.not_created.title"),
+              });
+              return;
+            }
+          }
+          if (!workspaceSlug) throw new Error("Missing required fields");
+          if (!isValid(payload)) return;
+          await createSticky(workspaceSlug, payload);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("stickies.toasts.created.title"),
+            message: t("stickies.toasts.created.message"),
+          });
+        } catch (error: any) {
+          console.error("Error in creating sticky:", error);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("stickies.toasts.not_created.title"),
+            message: error?.data?.error ?? t("stickies.toasts.not_created.message"),
+          });
+        }
+      },
+      update: async (stickyId: string, data: Partial<TSticky>) => {
+        try {
+          if (!workspaceSlug) throw new Error("Missing required fields");
+          if (!isValid(data)) return;
+          await updateSticky(workspaceSlug, stickyId, data);
+        } catch (error) {
+          console.error("Error in updating sticky:", error);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("stickies.toasts.not_updated.title"),
+            message: t("stickies.toasts.not_updated.message"),
+          });
+        }
+      },
+      remove: async (stickyId: string) => {
+        try {
+          if (!workspaceSlug) throw new Error("Missing required fields");
+          await deleteSticky(workspaceSlug, stickyId);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("stickies.toasts.removed.title"),
+            message: t("stickies.toasts.removed.message"),
+          });
+        } catch (error) {
+          console.error("Error in removing sticky:", error);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("stickies.toasts.not_removed.title"),
+            message: t("stickies.toasts.not_removed.message"),
+          });
+        }
+      },
+      updatePosition: async (
+        workspaceSlug: string,
+        sourceId: string,
+        droppedId: string,
+        instruction: InstructionType
+      ) => {
+        try {
+          if (!workspaceSlug) throw new Error("Missing required fields");
+          await updateStickyPosition(workspaceSlug, sourceId, droppedId, instruction);
+        } catch (error) {
+          console.error("Error in updating sticky position:", error);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("stickies.toasts.not_updated.title"),
+            message: t("stickies.toasts.not_updated.message"),
+          });
+        }
+      },
+    }),
+    [createSticky, deleteSticky, getWorkspaceStickyIds, stickies, updateSticky, updateStickyPosition, workspaceSlug]
+  );
+
+  return {
+    stickyOperations,
+  };
+};
diff --git a/apps/web/core/components/stickies/widget.tsx b/apps/web/core/components/stickies/widget.tsx
new file mode 100644
index 0000000..8324312
--- /dev/null
+++ b/apps/web/core/components/stickies/widget.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { AddOutline } from "@makeplane/propel/icons";
+// hooks
+import { useSticky } from "@/hooks/use-stickies";
+// local imports
+import { StickiesTruncated } from "./layout/stickies-truncated";
+import { StickySearch } from "./modal/search";
+import { useStickyOperations } from "./sticky/use-operations";
+
+export const StickiesWidget = observer(function StickiesWidget() {
+  // params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { creatingSticky, toggleShowNewSticky } = useSticky();
+  const { t } = useTranslation();
+  // sticky operations
+  const { stickyOperations } = useStickyOperations({
+    workspaceSlug: workspaceSlug?.toString() ?? "",
+  });
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="text-14 font-semibold text-tertiary">{t("stickies.title")}</div>
+        {/* actions */}
+        <div className="flex gap-2">
+          <StickySearch />
+          <button
+            onClick={() => {
+              toggleShowNewSticky(true);
+              stickyOperations.create();
+            }}
+            className="my-auto flex gap-1 text-13 font-medium text-accent-primary"
+            disabled={creatingSticky}
+          >
+            <AddOutline className="my-auto size-4" />
+            <span>{t("stickies.add")}</span>
+            {creatingSticky && (
+              <div
+                className="size-4 animate-spin rounded-full border-2 border-accent-strong border-t-transparent"
+                role="status"
+                aria-label="loading"
+              />
+            )}
+          </button>
+        </div>
+      </div>
+      <div className="-mx-2">
+        <StickiesTruncated />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/ui/empty-space.tsx b/apps/web/core/components/ui/empty-space.tsx
new file mode 100644
index 0000000..1dacfd3
--- /dev/null
+++ b/apps/web/core/components/ui/empty-space.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// next
+import React from "react";
+import Link from "next/link";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
+
+type EmptySpaceProps = {
+  title: string;
+  description: string;
+  children: any;
+  Icon?: any;
+  link?: { text: string; href: string };
+};
+
+function EmptySpace({ title, description, children, Icon, link }: EmptySpaceProps) {
+  return (
+    <>
+      <div className="max-w-lg">
+        {Icon ? (
+          <div className="mb-4">
+            <Icon className="h-14 w-14 text-secondary" />
+          </div>
+        ) : null}
+
+        <h2 className="text-16 font-medium text-primary">{title}</h2>
+        <div className="mt-1 text-13 text-secondary">{description}</div>
+        <ul role="list" className="mt-6 divide-y divide-subtle-1 border-t border-b border-subtle">
+          {children}
+        </ul>
+        {link ? (
+          <div className="mt-6 flex">
+            <Link href={link.href}>
+              <span className="text-13 font-medium text-accent-primary hover:text-accent-primary">
+                {link.text}
+                <span aria-hidden="true"> →</span>
+              </span>
+            </Link>
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+type EmptySpaceItemProps = {
+  title: string;
+  description?: React.ReactNode | string;
+  Icon: any;
+  action?: () => void;
+  href?: string;
+};
+
+function EmptySpaceItem({ title, description, Icon, action, href }: EmptySpaceItemProps) {
+  let spaceItem = (
+    <div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
+      <div className="flex-shrink-0">
+        <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-accent-primary">
+          <Icon className="h-6 w-6 text-on-color" aria-hidden="true" />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1 text-secondary">
+        <div className="text-13 font-medium group-hover:text-primary">{title}</div>
+        {description ? <div className="text-13">{description}</div> : null}
+      </div>
+      <div className="flex-shrink-0 self-center">
+        <ChevronRightOutline className="h-5 w-5 text-secondary group-hover:text-primary" aria-hidden="true" />
+      </div>
+    </div>
+  );
+
+  if (href) {
+    spaceItem = <Link href={href}>{spaceItem}</Link>;
+  }
+
+  return (
+    <>
+      <li className="cursor-pointer" onClick={action} role="button">
+        {spaceItem}
+      </li>
+    </>
+  );
+}
+
+export { EmptySpace, EmptySpaceItem };
diff --git a/apps/web/core/components/ui/labels-list.tsx b/apps/web/core/components/ui/labels-list.tsx
new file mode 100644
index 0000000..3353c21
--- /dev/null
+++ b/apps/web/core/components/ui/labels-list.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// ui
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IIssueLabel } from "@plane/types";
+// types
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// hooks
+
+type IssueLabelsListProps = {
+  labels?: (IIssueLabel | undefined)[];
+  length?: number;
+  showLength?: boolean;
+};
+
+export function IssueLabelsList(props: IssueLabelsListProps) {
+  const { labels } = props;
+  const { isMobile } = usePlatformOS();
+  return (
+    <>
+      {labels && (
+        <>
+          <Tooltip label={`Labels: ${labels.map((l) => l?.name).join(", ")}`} layout="stacked" disabled={isMobile}>
+            <div className="flex h-full items-center gap-1 rounded-sm border-[0.5px] border-strong px-2 py-1 text-11 text-secondary">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-accent-primary" />
+              <span>{labels.length}</span>
+              <span> Labels</span>
+            </div>
+          </Tooltip>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx b/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
new file mode 100644
index 0000000..808811b
--- /dev/null
+++ b/apps/web/core/components/ui/loader/cycle-module-board-loader.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function CycleModuleBoardLayoutLoader() {
+  return (
+    <div className="h-full w-full animate-pulse">
+      <div className="flex h-full w-full justify-between">
+        <div className="3xl:grid-cols-4 grid h-full w-full auto-rows-max grid-cols-1 gap-6 overflow-y-auto p-8 transition-all lg:grid-cols-2 xl:grid-cols-3">
+          {range(5).map((i) => (
+            <div
+              key={i}
+              className="flex h-44 w-full flex-col justify-between rounded-sm border border-subtle bg-surface-1 p-4 text-13"
+            >
+              <div className="flex items-center justify-between">
+                <span className="h-6 w-24 rounded-sm bg-layer-1" />
+                <div className="flex items-center gap-2">
+                  <span className="h-6 w-20 rounded-sm bg-layer-1" />
+                  <span className="h-6 w-6 rounded-sm bg-layer-1" />
+                </div>
+              </div>
+              <div className="flex flex-col gap-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                    <span className="h-5 w-20 rounded-sm bg-layer-1" />
+                  </div>
+                  <span className="h-5 w-5 rounded-full bg-layer-1" />
+                </div>
+                <span className="h-1.5 rounded-sm bg-layer-1" />
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <span className="h-4 w-16 rounded-sm bg-layer-1" />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="h-4 w-4 rounded-sm bg-layer-1" />
+                    <span className="h-4 w-4 rounded-sm bg-layer-1" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx b/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
new file mode 100644
index 0000000..e923520
--- /dev/null
+++ b/apps/web/core/components/ui/loader/cycle-module-list-loader.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function CycleModuleListLayoutLoader() {
+  return (
+    <div className="h-full animate-pulse overflow-y-auto">
+      <div className="flex h-full w-full justify-between">
+        <div className="flex h-full w-full flex-col overflow-y-auto">
+          {range(5).map((i) => (
+            <div
+              key={i}
+              className="flex w-full flex-col items-center justify-between gap-5 border-b border-subtle px-5 py-6 sm:flex-row"
+            >
+              <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+                <div className="relative flex w-full items-center gap-3 overflow-hidden">
+                  <div className="flex items-center gap-4 truncate">
+                    <span className="h-10 w-10 rounded-full bg-layer-1" />
+                    <span className="h-5 w-20 rounded-sm bg-layer-1" />
+                  </div>
+                </div>
+                <span className="h-6 w-20 rounded-sm bg-layer-1" />
+              </div>
+              <div className="relative flex w-full items-center justify-between gap-2.5 overflow-hidden sm:w-auto sm:flex-shrink-0 sm:justify-end">
+                <div className="relative flex flex-shrink-0 items-center gap-3">
+                  <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                  <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                  <span className="h-5 w-5 rounded-sm bg-layer-1" />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
new file mode 100644
index 0000000..e7f0f12
--- /dev/null
+++ b/apps/web/core/components/ui/loader/layouts/calendar-layout-loader.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+import { getRandomInt } from "../utils";
+
+function CalendarDay() {
+  const dataCount = getRandomInt(0, 1);
+  const dataBlocks = range(dataCount).map((index) => (
+    <span key={index} className="mb-2 h-8 w-full rounded-sm bg-layer-1" />
+  ));
+
+  return (
+    <div className="flex min-h-[9rem] w-full flex-col">
+      <div className="flex w-full items-center justify-end p-2">
+        <span className="h-6 w-6 rounded-sm bg-layer-1" />
+      </div>
+      <div className="flex flex-col gap-2.5 p-2">{dataBlocks}</div>
+    </div>
+  );
+}
+
+export function CalendarLayoutLoader() {
+  return (
+    <div className="h-full w-full animate-pulse overflow-y-auto bg-surface-1">
+      <span className="relative grid grid-cols-5 divide-x-[0.5px] divide-subtle-1 text-13 font-medium">
+        {range(5).map((index) => (
+          <span key={index} className="h-11 w-full bg-layer-1" />
+        ))}
+      </span>
+      <div className="h-full w-full overflow-y-auto">
+        <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-subtle-1 overflow-y-auto">
+          {range(6).map((index) => (
+            <div key={index} className="grid grid-cols-5 divide-x-[0.5px] divide-subtle-1">
+              {range(5).map((index) => (
+                <CalendarDay key={index} />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
new file mode 100644
index 0000000..f188ffd
--- /dev/null
+++ b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+import { Row } from "@plane/ui";
+import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
+import { getRandomLength } from "../utils";
+
+export function GanttLayoutListItemLoader() {
+  return (
+    <div className="flex w-full items-center gap-4 px-6" style={{ height: `${BLOCK_HEIGHT}px` }}>
+      <div className="h-6 w-8 rounded-sm bg-layer-1 px-3" />
+      <div className={`h-6 px-3 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-layer-1`} />
+    </div>
+  );
+}
+
+export function GanttLayoutLoader() {
+  return (
+    <div className="flex h-full animate-pulse flex-col overflow-x-auto">
+      <div className="min-h-10 w-full border-b border-subtle">
+        <span className="h-6 w-12 rounded-sm bg-layer-1" />
+      </div>
+      <div className="flex h-full">
+        <div className="h-full w-[25.5rem] border-r border-subtle">
+          <Row className="flex h-header items-end border-b border-subtle py-2">
+            <div className="flex w-full items-center justify-between">
+              <span className="h-5 w-14 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+            </div>
+          </Row>
+          <Row className="flex h-11 w-full flex-col gap-3 py-4">
+            {range(6).map((index) => (
+              <div key={index} className="flex h-11 w-full items-center gap-3">
+                <span className="h-6 w-6 rounded-sm bg-layer-1" />
+                <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-layer-1`} />
+              </div>
+            ))}
+          </Row>
+        </div>
+        <div className="h-full w-full border-r border-subtle">
+          <div className="flex h-header flex-col justify-between gap-2 border-b border-subtle px-4 py-1.5">
+            <div className="flex items-center justify-start">
+              <span className="h-5 w-20 rounded-sm bg-layer-1" />
+            </div>
+            <div className="flex w-full items-center justify-between gap-3">
+              {range(15).map((index) => (
+                <span key={index} className="h-5 w-10 rounded-sm bg-layer-1" />
+              ))}
+            </div>
+          </div>
+          <div className="flex h-11 w-full flex-col gap-3 p-4">
+            {range(6).map((index) => (
+              <div
+                key={index}
+                className={`flex h-11 w-full items-center gap-3`}
+                style={{ paddingLeft: getRandomLength(["115px", "208px", "260px"]) }}
+              >
+                <span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-layer-1`} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
new file mode 100644
index 0000000..e20c01c
--- /dev/null
+++ b/apps/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { forwardRef } from "react";
+import { range } from "lodash-es";
+// plane ui
+import { ContentWrapper } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
+
+export const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader(
+  { cardHeight = 100, shouldAnimate = true }: { cardHeight?: number; shouldAnimate?: boolean },
+  ref: React.ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      ref={ref}
+      className={cn(`block rounded-sm bg-[var(--illustration-fill-secondary)]`, { "animate-pulse": shouldAnimate })}
+      style={{ height: `${cardHeight}px` }}
+    />
+  );
+});
+
+export function KanbanColumnLoader({
+  cardsInColumn = 3,
+  ignoreHeader = false,
+  cardHeight = 100,
+  shouldAnimate = true,
+}: {
+  cardsInColumn?: number;
+  ignoreHeader?: boolean;
+  cardHeight?: number;
+  shouldAnimate?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-3">
+      {!ignoreHeader && (
+        <div className="flex h-9 w-80 items-center justify-between">
+          <div className="item-center flex gap-3">
+            <span className={cn("h-6 w-6 rounded-sm bg-layer-1", { "animate-pulse": shouldAnimate })} />
+            <span className={cn("h-6 w-24 rounded-sm bg-layer-1", { "animate-pulse": shouldAnimate })} />
+          </div>
+        </div>
+      )}
+      {range(cardsInColumn).map((cardIndex) => (
+        <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
+      ))}
+    </div>
+  );
+}
+
+KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
+
+export function KanbanLayoutLoader({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) {
+  return (
+    <ContentWrapper className="flex-row gap-5 overflow-x-auto py-1.5">
+      {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
+        <KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
+      ))}
+    </ContentWrapper>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
new file mode 100644
index 0000000..a682891
--- /dev/null
+++ b/apps/web/core/components/ui/loader/layouts/list-layout-loader.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, forwardRef } from "react";
+import { range } from "lodash-es";
+// plane ui
+import { Row } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
+import { getRandomInt, getRandomLength } from "../utils";
+
+export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
+  {
+    shouldAnimate = true,
+    renderForPlaceHolder = false,
+    defaultPropertyCount = 6,
+  }: { shouldAnimate?: boolean; renderForPlaceHolder?: boolean; defaultPropertyCount?: number },
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <Row
+      ref={ref}
+      className={cn("flex h-11 items-center justify-between py-3", {
+        "bg-surface-1": renderForPlaceHolder,
+        "border-t border-subtle": !renderForPlaceHolder,
+      })}
+    >
+      <div className="flex items-center gap-3">
+        <span
+          className={cn("h-5 w-10 rounded-sm bg-[var(--illustration-fill-tertiary)]", {
+            "animate-pulse": shouldAnimate,
+            "bg-surface-2": renderForPlaceHolder,
+          })}
+        />
+        <span
+          className={cn(
+            `h-5 w-${getRandomLength(["32", "52", "72"])} rounded-sm bg-[var(--illustration-fill-tertiary)]`,
+            {
+              "animate-pulse": shouldAnimate,
+              "bg-surface-2": renderForPlaceHolder,
+            }
+          )}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        {range(defaultPropertyCount).map((index) => (
+          <Fragment key={index}>
+            {getRandomInt(1, 2) % 2 === 0 ? (
+              <span
+                key={index}
+                className={cn("h-5 w-5 rounded-sm bg-[var(--illustration-fill-tertiary)]", {
+                  "animate-pulse": shouldAnimate,
+                  "bg-surface-2": renderForPlaceHolder,
+                })}
+              />
+            ) : (
+              <span
+                className={cn("h-5 w-16 rounded-sm bg-[var(--illustration-fill-tertiary)]", {
+                  "animate-pulse": shouldAnimate,
+                  "bg-surface-2": renderForPlaceHolder,
+                })}
+              />
+            )}
+          </Fragment>
+        ))}
+      </div>
+    </Row>
+  );
+});
+
+ListLoaderItemRow.displayName = "ListLoaderItemRow";
+
+function ListSection({ itemCount }: { itemCount: number }) {
+  return (
+    <div className="flex flex-shrink-0 flex-col">
+      <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-subtle bg-surface-2 py-1">
+        <div className="flex w-full items-center gap-2 py-1.5">
+          <span className="h-6 w-6 animate-pulse rounded-sm bg-layer-1" />
+          <span className="h-6 w-24 animate-pulse rounded-sm bg-layer-1" />
+        </div>
+      </Row>
+      <div className="relative h-full w-full">
+        {range(itemCount).map((index) => (
+          <ListLoaderItemRow key={index} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function ListLayoutLoader() {
+  return (
+    <div className="flex flex-shrink-0 flex-col">
+      {[6, 5, 2].map((itemCount, index) => (
+        <ListSection key={index} itemCount={itemCount} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
new file mode 100644
index 0000000..34b4e6d
--- /dev/null
+++ b/apps/web/core/components/ui/loader/layouts/members-layout-loader.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+export function MembersLayoutLoader() {
+  return (
+    <div className="flex gap-5 overflow-x-auto py-1.5">
+      {range(5).map((columnIndex) => (
+        <div key={columnIndex} className="flex flex-col gap-3">
+          <div className={`flex h-9 items-center justify-between ${columnIndex === 0 ? "w-80" : "w-36"}`}>
+            <span className="h-6 w-24 animate-pulse rounded-sm bg-layer-1" />
+          </div>
+          {range(2).map((cardIndex) => (
+            <span className="h-8 w-full animate-pulse rounded-sm bg-layer-1" key={cardIndex} />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
new file mode 100644
index 0000000..41b09d1
--- /dev/null
+++ b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-layout-loader.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// ui
+import { Loader } from "@plane/ui";
+import { InboxSidebarLoader } from "./inbox-sidebar-loader";
+
+export function InboxLayoutLoader() {
+  return (
+    <div className="relative flex h-full w-full overflow-hidden">
+      <div className="h-full w-2/6 flex-shrink-0 border-r border-strong">
+        <InboxSidebarLoader />
+      </div>
+      <div className="w-4/6">
+        <Loader className="flex h-full flex-col gap-5 p-5">
+          <div className="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>
+          <Loader.Item height="150px" />
+        </Loader>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
new file mode 100644
index 0000000..a4759af
--- /dev/null
+++ b/apps/web/core/components/ui/loader/layouts/project-inbox/inbox-sidebar-loader.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { range } from "lodash-es";
+
+export function InboxSidebarLoader() {
+  return (
+    <div className="flex flex-col">
+      {range(6).map((index) => (
+        <div key={index} className="flex h-[105px] flex-col gap-2.5 space-y-3 border-b border-subtle p-4">
+          <div className="flex flex-col gap-2">
+            <span className="h-5 w-16 rounded-sm bg-layer-1" />
+            <span className="h-5 w-36 rounded-sm bg-layer-1" />
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="h-4 w-20 rounded-sm bg-layer-1" />
+            <span className="h-2 w-2 rounded-full bg-layer-1" />
+            <span className="h-4 w-16 rounded-sm bg-layer-1" />
+            <span className="h-4 w-16 rounded-sm bg-layer-1" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
new file mode 100644
index 0000000..e4a4d68
--- /dev/null
+++ b/apps/web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+import { Row } from "@plane/ui";
+import { getRandomLength } from "../utils";
+
+export function SpreadsheetIssueRowLoader(props: { columnCount: number }) {
+  return (
+    <tr className="border-b border-subtle bg-surface-1">
+      <td className="sticky left-0 z-[10] flex h-11 min-w-[28rem] items-center border-r-[0.5px] border-subtle bg-surface-1">
+        <Row className="flex items-center gap-3">
+          <span className="h-5 w-10 animate-pulse rounded-sm bg-layer-1" />
+          <span className={`h-5 w-${getRandomLength(["32", "52", "72"])} animate-pulse rounded-sm bg-layer-1`} />
+        </Row>
+      </td>
+      {range(props.columnCount).map((colIndex) => (
+        <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-subtle">
+          <div className="flex items-center justify-center gap-3 px-3">
+            <span className="h-5 w-20 animate-pulse rounded-sm bg-layer-1" />
+          </div>
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+export function SpreadsheetLayoutLoader() {
+  return (
+    <div className="horizontal-scroll-enable h-full w-full overflow-y-auto">
+      <table>
+        <thead>
+          <tr>
+            <th className="h-11 min-w-[28rem] animate-pulse border-r border-subtle bg-surface-2" />
+            {range(10).map((index) => (
+              <th key={index} className="h-11 w-full min-w-[8rem] animate-pulse border-r border-subtle bg-surface-2" />
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {range(16).map((rowIndex) => (
+            <SpreadsheetIssueRowLoader key={rowIndex} columnCount={10} />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/notification-loader.tsx b/apps/web/core/components/ui/loader/notification-loader.tsx
new file mode 100644
index 0000000..9ebcaf7
--- /dev/null
+++ b/apps/web/core/components/ui/loader/notification-loader.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function NotificationsLoader() {
+  return (
+    <div className="animate-pulse divide-y divide-subtle overflow-hidden">
+      {range(3).map((i) => (
+        <div key={i} className="flex w-full items-center gap-4 p-3">
+          <span className="min-h-12 min-w-12 rounded-full bg-layer-1" />
+          <div className="flex w-full flex-col gap-2.5">
+            <span className="h-5 w-36 rounded-sm bg-layer-1" />
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="h-5 w-28 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/pages-loader.tsx b/apps/web/core/components/ui/loader/pages-loader.tsx
new file mode 100644
index 0000000..8cfbf68
--- /dev/null
+++ b/apps/web/core/components/ui/loader/pages-loader.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function PagesLoader() {
+  return (
+    <div className="flex h-full flex-col space-y-5 overflow-hidden p-6">
+      <div className="flex justify-between gap-4">
+        <h3 className="text-20 font-semibold text-primary">Pages</h3>
+      </div>
+      <div className="flex items-center gap-3">
+        {range(5).map((i) => (
+          <span key={i} className="h-8 w-20 rounded-full bg-layer-1" />
+        ))}
+      </div>
+      <div className="divide-y divide-subtle-1">
+        {range(5).map((i) => (
+          <div key={i} className="flex h-12 w-full items-center justify-between px-3">
+            <div className="flex items-center gap-1.5">
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-20 rounded-sm bg-layer-1" />
+            </div>
+            <div className="flex items-center gap-1.5">
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/projects-loader.tsx b/apps/web/core/components/ui/loader/projects-loader.tsx
new file mode 100644
index 0000000..4f6b266
--- /dev/null
+++ b/apps/web/core/components/ui/loader/projects-loader.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function ProjectsLoader() {
+  return (
+    <div className="h-full w-full animate-pulse overflow-y-auto p-8">
+      <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+        {range(3).map((i) => (
+          <div key={i} className="flex cursor-pointer flex-col rounded-sm border border-subtle bg-surface-1">
+            <div className="relative min-h-[118px] w-full rounded-t border-b border-subtle">
+              <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/20 to-transparent">
+                <div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">
+                  <div className="flex flex-grow items-center gap-2.5 truncate">
+                    <span className="min-h-9 min-w-9 rounded-sm bg-layer-1" />
+                    <div className="flex w-full flex-col justify-between gap-0.5 truncate">
+                      <span className="h-4 w-28 rounded-sm bg-layer-1" />
+                      <span className="h-4 w-16 rounded-sm bg-layer-1" />
+                    </div>
+                  </div>
+                  <div className="flex h-full flex-shrink-0 items-center gap-2">
+                    <span className="h-6 w-6 rounded-sm bg-layer-1" />
+                    <span className="h-6 w-6 rounded-sm bg-layer-1" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="flex h-[104px] w-full flex-col justify-between rounded-b-sm p-4">
+              <span className="h-4 w-36 rounded-sm bg-layer-1" />
+              <div className="item-center flex justify-between">
+                <span className="h-5 w-20 rounded-sm bg-layer-1" />
+                <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/settings/activity.tsx b/apps/web/core/components/ui/loader/settings/activity.tsx
new file mode 100644
index 0000000..1cf5b5b
--- /dev/null
+++ b/apps/web/core/components/ui/loader/settings/activity.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+import { getRandomLength } from "../utils";
+
+export function ActivitySettingsLoader() {
+  return (
+    <div className="flex animate-pulse flex-col gap-3">
+      {range(10).map((i) => (
+        <div key={i} className="relative flex h-12 items-center gap-2 border-b border-subtle">
+          <span className="h-6 w-6 rounded-sm bg-layer-1" />
+          <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} rounded-sm bg-layer-1`} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/settings/api-token.tsx b/apps/web/core/components/ui/loader/settings/api-token.tsx
new file mode 100644
index 0000000..f799ae9
--- /dev/null
+++ b/apps/web/core/components/ui/loader/settings/api-token.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+import { useTranslation } from "@plane/i18n";
+export function APITokenSettingsLoader() {
+  const { t } = useTranslation();
+  return (
+    <section className="w-full overflow-y-auto">
+      <div className="mb-2 flex items-center justify-between border-b border-subtle pb-3.5">
+        <h3 className="text-18 font-medium">{t("workspace_settings.settings.api_tokens.title")}</h3>
+        <span className="h-8 w-28 rounded-sm bg-layer-1" />
+      </div>
+      <div className="divide-y-[0.5px] divide-subtle-1">
+        {range(2).map((i) => (
+          <div key={i} className="flex flex-col gap-2 py-3">
+            <div className="flex items-center gap-2">
+              <span className="h-5 w-28 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+            </div>
+            <span className="h-5 w-36 rounded-sm bg-layer-1" />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/settings/email.tsx b/apps/web/core/components/ui/loader/settings/email.tsx
new file mode 100644
index 0000000..bbf5cde
--- /dev/null
+++ b/apps/web/core/components/ui/loader/settings/email.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function EmailSettingsLoader() {
+  return (
+    <div className="pb- mx-auto mt-8 h-full w-full animate-pulse overflow-y-auto px-6 lg:px-20">
+      <div className="mb-2 flex flex-col gap-2 border-b border-subtle pt-6 pb-6">
+        <span className="h-7 w-40 rounded-sm bg-layer-1" />
+        <span className="h-5 w-96 rounded-sm bg-layer-1" />
+      </div>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center py-3">
+          <span className="h-7 w-32 rounded-sm bg-layer-1" />
+        </div>
+        {range(4).map((i) => (
+          <div key={i} className="flex items-center justify-between">
+            <div className="flex flex-col gap-2 py-3">
+              <span className="h-6 w-28 rounded-sm bg-layer-1" />
+              <span className="h-5 w-96 rounded-sm bg-layer-1" />
+            </div>
+            <div className="flex items-center">
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+            </div>
+          </div>
+        ))}
+        <div className="flex items-center py-12">
+          <span className="h-8 w-32 rounded-sm bg-layer-1" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/settings/import-and-export.tsx b/apps/web/core/components/ui/loader/settings/import-and-export.tsx
new file mode 100644
index 0000000..286b2f4
--- /dev/null
+++ b/apps/web/core/components/ui/loader/settings/import-and-export.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function ImportExportSettingsLoader() {
+  return (
+    <div className="animate-pulse divide-y-[0.5px] divide-subtle-1">
+      {range(2).map((i) => (
+        <div key={i} className="flex items-center justify-between gap-2 px-4 py-3">
+          <div className="flex flex-col gap-1.5">
+            <div className="flex items-center gap-2">
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+              <span className="h-5 w-16 rounded-sm bg-layer-1" />
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="h-4 w-28 rounded-sm bg-layer-1" />
+              <span className="h-4 w-28 rounded-sm bg-layer-1" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/settings/integration.tsx b/apps/web/core/components/ui/loader/settings/integration.tsx
new file mode 100644
index 0000000..8afe873
--- /dev/null
+++ b/apps/web/core/components/ui/loader/settings/integration.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function IntegrationsSettingsLoader() {
+  return (
+    <div className="animate-pulse divide-y-[0.5px] divide-subtle">
+      {range(2).map((i) => (
+        <div key={i} className="flex items-center justify-between gap-2 border-b border-subtle bg-surface-1 px-4 py-6">
+          <div className="flex items-start gap-4">
+            <span className="h-10 w-10 rounded-full bg-layer-1" />
+            <div className="flex flex-col gap-1">
+              <span className="h-5 w-20 rounded-sm bg-layer-1" />
+              <span className="h-4 w-60 rounded-sm bg-layer-1" />
+            </div>
+          </div>
+          <span className="h-8 w-16 rounded-sm bg-layer-1" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/settings/members.tsx b/apps/web/core/components/ui/loader/settings/members.tsx
new file mode 100644
index 0000000..d84831f
--- /dev/null
+++ b/apps/web/core/components/ui/loader/settings/members.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function MembersSettingsLoader() {
+  return (
+    <div className="divide-y-[0.5px] divide-subtle">
+      {range(3).map((i) => (
+        <div key={i} className="group grid grid-cols-5 items-center justify-evenly px-3 py-4">
+          <div className="col-span-2 flex items-center gap-x-2.5">
+            <span className="size-6 rounded-full bg-layer-1" />
+            <span className="h-5 w-24 rounded-sm bg-layer-1" />
+          </div>
+          <span className="h-5 w-24 rounded-sm bg-layer-1" />
+          <span className="h-5 w-20 rounded-sm bg-layer-1" />
+          <span className="h-5 w-28 rounded-sm bg-layer-1" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/settings/web-hook.tsx b/apps/web/core/components/ui/loader/settings/web-hook.tsx
new file mode 100644
index 0000000..3acb52b
--- /dev/null
+++ b/apps/web/core/components/ui/loader/settings/web-hook.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export function WebhookSettingsLoader() {
+  return (
+    <div className="h-full w-full overflow-hidden py-8 pr-9">
+      <div className="flex h-full w-full flex-col">
+        <div className="flex items-center justify-between gap-4 border-b border-subtle pb-3.5">
+          <div className="text-18 font-medium">Webhooks</div>
+          <span className="h-8 w-28 rounded-sm bg-layer-1" />
+        </div>
+        <div className="h-full w-full overflow-y-auto">
+          <div className="border-b border-subtle">
+            <div>
+              <span className="flex items-center justify-between gap-4 px-3.5 py-[18px]">
+                <span className="h-5 w-36 rounded-sm bg-layer-1" />
+                <span className="h-6 w-12 rounded-sm bg-layer-1" />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/utils.tsx b/apps/web/core/components/ui/loader/utils.tsx
new file mode 100644
index 0000000..0a2b2da
--- /dev/null
+++ b/apps/web/core/components/ui/loader/utils.tsx
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const getRandomInt = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+export const getRandomLength = (lengthArray: string[]) => {
+  const randomIndex = Math.floor(Math.random() * lengthArray.length);
+  return `${lengthArray[randomIndex]}`;
+};
diff --git a/apps/web/core/components/ui/loader/view-list-loader.tsx b/apps/web/core/components/ui/loader/view-list-loader.tsx
new file mode 100644
index 0000000..073789d
--- /dev/null
+++ b/apps/web/core/components/ui/loader/view-list-loader.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function ViewListLoader() {
+  return (
+    <div className="flex h-full w-full animate-pulse flex-col">
+      {range(8).map((i) => (
+        <div key={i} className="group border-b border-subtle">
+          <div className="relative flex w-full items-center justify-between rounded-sm p-4">
+            <div className="flex items-center gap-4">
+              <span className="min-h-10 min-w-10 rounded-sm bg-layer-1" />
+              <span className="h-6 w-28 rounded-sm bg-layer-1" />
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+              <span className="h-5 w-5 rounded-sm bg-layer-1" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/markdown-to-component.tsx b/apps/web/core/components/ui/markdown-to-component.tsx
new file mode 100644
index 0000000..af66e84
--- /dev/null
+++ b/apps/web/core/components/ui/markdown-to-component.tsx
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import ReactMarkdown from "react-markdown";
+
+interface CustomComponentProps {
+  href: string;
+  children: React.ReactNode;
+}
+
+type CustomComponent = React.ComponentType<CustomComponentProps>;
+
+interface Props {
+  markdown: string;
+  components?: {
+    a?: CustomComponent;
+    blockquote?: CustomComponent;
+    code?: CustomComponent;
+    del?: CustomComponent;
+    em?: CustomComponent;
+    heading?: CustomComponent;
+    hr?: CustomComponent;
+    image?: CustomComponent;
+    inlineCode?: CustomComponent;
+    link?: CustomComponent;
+    list?: CustomComponent;
+    listItem?: CustomComponent;
+    paragraph?: CustomComponent;
+    strong?: CustomComponent;
+    table?: CustomComponent;
+    tableCell?: CustomComponent;
+    tableHead?: CustomComponent;
+    tableRow?: CustomComponent;
+  };
+  options?: any;
+}
+
+function HeadingPrimary({ children }: { children: React.ReactNode }) {
+  return <h1 className="text-16 font-semibold text-primary">{children}</h1>;
+}
+
+function HeadingSecondary({ children }: { children: React.ReactNode }) {
+  return <h3 className="text-14 font-semibold text-primary">{children}</h3>;
+}
+
+function Paragraph({ children }: { children: React.ReactNode }) {
+  return <p className="text-13 text-secondary">{children}</p>;
+}
+
+function OrderedList({ children }: { children: React.ReactNode }) {
+  return <ol className="mb-4 ml-8 list-decimal text-13 text-secondary">{children}</ol>;
+}
+
+function UnorderedList({ children }: { children: React.ReactNode }) {
+  return <ul className="mb-4 ml-8 list-disc text-13 text-secondary">{children}</ul>;
+}
+
+function Link({ href, children }: CustomComponentProps) {
+  return (
+    <a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  );
+}
+
+export function MarkdownRenderer({ markdown, options = {} }: Props) {
+  const customComponents = {
+    h1: HeadingPrimary,
+    h3: HeadingSecondary,
+    p: Paragraph,
+    ol: OrderedList,
+    ul: UnorderedList,
+    a: Link,
+  };
+
+  return (
+    <ReactMarkdown components={customComponents} {...options}>
+      {markdown}
+    </ReactMarkdown>
+  );
+}
diff --git a/apps/web/core/components/ui/profile-empty-state.tsx b/apps/web/core/components/ui/profile-empty-state.tsx
new file mode 100644
index 0000000..09f2547
--- /dev/null
+++ b/apps/web/core/components/ui/profile-empty-state.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image: any;
+};
+
+export function ProfileEmptyState({ title, description, image }: Props) {
+  return (
+    <div className={`mx-auto grid h-full w-full place-items-center p-8`}>
+      <div className="flex w-full flex-col items-center text-center">
+        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-surface-2">
+          <img src={image} width="32" height="32" className="h-full w-full object-cover" alt={title} />
+        </div>
+        <h6 className="mt-3.5 mb-3 text-14 font-semibold">{title}</h6>
+        {description && <p className="text-13 text-tertiary">{description}</p>}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/user/index.ts b/apps/web/core/components/user/index.ts
new file mode 100644
index 0000000..320ded1
--- /dev/null
+++ b/apps/web/core/components/user/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./user-greetings";
diff --git a/apps/web/core/components/user/user-greetings.tsx b/apps/web/core/components/user/user-greetings.tsx
new file mode 100644
index 0000000..ff00a23
--- /dev/null
+++ b/apps/web/core/components/user/user-greetings.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane types
+import { useTranslation } from "@plane/i18n";
+// hooks
+import type { IUser } from "@plane/types";
+import { useCurrentTime } from "@/hooks/use-current-time";
+// types
+
+export interface IUserGreetingsView {
+  user: IUser;
+}
+
+export function UserGreetingsView(props: IUserGreetingsView) {
+  const { user } = props;
+  // current time hook
+  const { currentTime } = useCurrentTime();
+  // store hooks
+  const { t } = useTranslation();
+
+  const hour = new Intl.DateTimeFormat("en-US", {
+    hour12: false,
+    hour: "numeric",
+  }).format(currentTime);
+
+  const date = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+  }).format(currentTime);
+
+  const weekDay = new Intl.DateTimeFormat("en-US", {
+    weekday: "long",
+  }).format(currentTime);
+
+  const timeString = new Intl.DateTimeFormat("en-US", {
+    timeZone: user?.user_timezone,
+    hour12: false, // Use 24-hour format
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(currentTime);
+
+  const greeting = parseInt(hour, 10) < 12 ? "morning" : parseInt(hour, 10) < 18 ? "afternoon" : "evening";
+
+  return (
+    <div className="my-6 flex flex-col items-center">
+      <h2 className="text-center text-20 font-semibold">
+        {t("good")} {t(greeting)}, {user?.first_name} {user?.last_name}
+      </h2>
+      <h5 className="flex items-center gap-2 font-medium text-placeholder">
+        <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
+        <div>
+          {weekDay}, {date} {timeString}
+        </div>
+      </h5>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/views/applied-filters/access.tsx b/apps/web/core/components/views/applied-filters/access.tsx
new file mode 100644
index 0000000..a880baa
--- /dev/null
+++ b/apps/web/core/components/views/applied-filters/access.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// icons
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline } from "@makeplane/propel/icons";
+// constants
+// helpers
+import type { EViewAccess } from "@plane/types";
+import { VIEW_ACCESS_SPECIFIERS } from "@/helpers/views.helper";
+
+type Props = {
+  editable: boolean | undefined;
+  handleRemove: (val: EViewAccess) => void;
+  values: EViewAccess[];
+};
+
+export const AppliedAccessFilters = observer(function AppliedAccessFilters(props: Props) {
+  const { editable, handleRemove, values } = props;
+  const { t } = useTranslation();
+
+  const getAccessLabel = (val: EViewAccess) => {
+    const value = VIEW_ACCESS_SPECIFIERS.find((option) => option.key === val);
+    return value?.i18n_label;
+  };
+
+  return (
+    <>
+      {values.map((access) => {
+        const label = getAccessLabel(access);
+
+        if (!label) return null;
+
+        return (
+          <div key={access} className="flex items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11">
+            <span className="normal-case">{t(label)}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemove(access)}
+              >
+                <CloseOutline height={10} width={10} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/views/applied-filters/index.tsx b/apps/web/core/components/views/applied-filters/index.tsx
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/views/applied-filters/index.tsx
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/views/applied-filters/root.tsx b/apps/web/core/components/views/applied-filters/root.tsx
new file mode 100644
index 0000000..2f58af4
--- /dev/null
+++ b/apps/web/core/components/views/applied-filters/root.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useTranslation } from "@plane/i18n";
+import { PillButton } from "@makeplane/propel/components/pill";
+import { CloseOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { EViewAccess, TViewFilterProps } from "@plane/types";
+import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
+// components
+import { AppliedDateFilters } from "@/components/common/applied-filters/date";
+import { AppliedMembersFilters } from "@/components/common/applied-filters/members";
+// local imports
+import { AppliedAccessFilters } from "./access";
+
+type Props = {
+  appliedFilters: TViewFilterProps;
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof TViewFilterProps, value: string | EViewAccess | null) => void;
+  alwaysAllowEditing?: boolean;
+};
+
+const MEMBERS_FILTERS = ["owned_by"];
+const DATE_FILTERS = ["created_at"];
+const VIEW_ACCESS_FILTERS = ["view_type"];
+
+export function ViewAppliedFiltersList(props: Props) {
+  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
+  const { t } = useTranslation();
+
+  if (!appliedFilters) return null;
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  const isEditingAllowed = alwaysAllowEditing;
+
+  return (
+    <div className="flex flex-wrap items-stretch gap-2 bg-surface-1">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof TViewFilterProps;
+
+        if (!value) return;
+        if (Array.isArray(value) && value.length === 0) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="my-auto flex min-h-9 cursor-pointer flex-wrap items-center gap-1.5 rounded-md border border-subtle p-1.5 text-11 text-tertiary capitalize hover:text-secondary"
+          >
+            <span className="text-11 text-tertiary">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            {VIEW_ACCESS_FILTERS.includes(filterKey) && (
+              <AppliedAccessFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                values={Array.isArray(value) ? (value as EViewAccess[]) : []}
+              />
+            )}
+            {DATE_FILTERS.includes(filterKey) && (
+              <AppliedDateFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                values={Array.isArray(value) ? (value as string[]) : []}
+              />
+            )}
+            {MEMBERS_FILTERS.includes(filterKey) && (
+              <AppliedMembersFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                values={Array.isArray(value) ? (value as string[]) : []}
+              />
+            )}
+            {isEditingAllowed && (
+              <button
+                type="button"
+                className="grid place-items-center text-tertiary hover:text-secondary"
+                onClick={() => handleRemoveFilter(filterKey, null)}
+              >
+                <CloseOutline height={12} width={12} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+      {isEditingAllowed && (
+        <PillButton
+          type="button"
+          size="md"
+          variant="outline"
+          label={t("common.clear_all")}
+          endIcon={<CloseOutline height={12} width={12} />}
+          onClick={handleClearAllFilters}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/views/delete-view-modal.tsx b/apps/web/core/components/views/delete-view-modal.tsx
new file mode 100644
index 0000000..fa6f448
--- /dev/null
+++ b/apps/web/core/components/views/delete-view-modal.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams, useRouter } from "next/navigation";
+// types
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IProjectView } from "@plane/types";
+// ui
+import { AlertModalCore } from "@plane/ui";
+// hooks
+import { useProjectView } from "@/hooks/store/use-project-view";
+
+type Props = {
+  data: IProjectView;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const DeleteProjectViewModal = observer(function DeleteProjectViewModal(props: Props) {
+  const { data, isOpen, onClose } = props;
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  const router = useRouter();
+  // store hooks
+  const { deleteView } = useProjectView();
+  const { t } = useTranslation();
+  const handleClose = () => {
+    onClose();
+    setIsDeleteLoading(false);
+  };
+
+  const handleDeleteView = async () => {
+    if (!workspaceSlug || !projectId) return;
+    try {
+      setIsDeleteLoading(true);
+      await deleteView(workspaceSlug.toString(), projectId.toString(), data.id);
+      handleClose();
+      router.push(`/${workspaceSlug}/projects/${projectId}/views`);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "View deleted successfully.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "View could not be deleted. Please try again.",
+      });
+    }
+    setIsDeleteLoading(false);
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeleteView}
+      isSubmitting={isDeleteLoading}
+      isOpen={isOpen}
+      title={t("project_views.delete_view.title")}
+      content={<>{t("project_views.delete_view.content")}</>}
+    />
+  );
+});
diff --git a/apps/web/core/components/views/filters/filter-selection.tsx b/apps/web/core/components/views/filters/filter-selection.tsx
new file mode 100644
index 0000000..ed08adf
--- /dev/null
+++ b/apps/web/core/components/views/filters/filter-selection.tsx
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
+import type { TViewFilterProps, TViewFilters } from "@plane/types";
+import { EViewAccess } from "@plane/types";
+// components
+import { FilterCreatedDate } from "@/components/common/filters/created-at";
+import { FilterCreatedBy } from "@/components/common/filters/created-by";
+import { FilterOption } from "@/components/issues/issue-layouts/filters";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  filters: TViewFilters;
+  handleFiltersUpdate: <T extends keyof TViewFilters>(filterKey: T, filterValue: TViewFilters[T]) => void;
+  memberIds?: string[] | undefined;
+};
+
+export const ViewFiltersSelection = observer(function ViewFiltersSelection(props: Props) {
+  const { filters, handleFiltersUpdate, memberIds } = props;
+  // states
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+  // store
+  const { isMobile } = usePlatformOS();
+
+  // handles filter update
+  const handleFilters = (key: keyof TViewFilterProps, value: boolean | string | EViewAccess | string[]) => {
+    const currValues = (filters.filters?.[key] ?? []) as (string | EViewAccess)[];
+
+    if (typeof currValues === "boolean" && typeof value === "boolean") return;
+
+    if (Array.isArray(currValues)) {
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!currValues.includes(val)) currValues.push(val);
+          else currValues.splice(currValues.indexOf(val), 1);
+        });
+      } else if (typeof value !== "boolean") {
+        if (currValues?.includes(value)) currValues.splice(currValues.indexOf(value), 1);
+        else currValues.push(value);
+      }
+    }
+
+    handleFiltersUpdate("filters", {
+      ...filters.filters,
+      [key]: currValues,
+    });
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col overflow-hidden">
+      <div className="bg-surface-1 p-2.5 pb-0">
+        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
+          <SearchOutline className="text-placeholder" width={12} height={12} />
+          <input
+            type="text"
+            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            // oxlint-disable-next-line jsx_a11y/no-autofocus
+            autoFocus={!isMobile}
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <CloseOutline className="text-tertiary" height={12} width={12} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="vertical-scrollbar scrollbar-sm h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5">
+        <div className="py-2">
+          <FilterOption
+            isChecked={!!filters.filters?.favorites}
+            onClick={() =>
+              handleFiltersUpdate("filters", {
+                ...filters.filters,
+                favorites: !filters.filters?.favorites,
+              })
+            }
+            title="Favorites"
+          />
+        </div>
+
+        {/* created date */}
+        <div className="py-2">
+          <FilterCreatedDate
+            appliedFilters={filters.filters?.created_at ?? null}
+            handleUpdate={(val: string | string[]) => handleFilters("created_at", val)}
+            searchQuery={filtersSearchQuery}
+          />
+        </div>
+
+        {/* created by */}
+        <div className="py-2">
+          <FilterCreatedBy
+            appliedFilters={filters.filters?.owned_by ?? null}
+            handleUpdate={(val) => handleFilters("owned_by", val)}
+            searchQuery={filtersSearchQuery}
+            memberIds={memberIds}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/views/filters/order-by.tsx b/apps/web/core/components/views/filters/order-by.tsx
new file mode 100644
index 0000000..1ea41f7
--- /dev/null
+++ b/apps/web/core/components/views/filters/order-by.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { SortAscendingOutline, SortDescendingOutline, TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import { VIEW_SORT_BY_OPTIONS, VIEW_SORTING_KEY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { getButtonStyling } from "@plane/propel/button";
+import type { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+
+type Props = {
+  onChange: (value: { key?: TViewFiltersSortKey; order?: TViewFiltersSortBy }) => void;
+  sortBy: TViewFiltersSortBy;
+  sortKey: TViewFiltersSortKey;
+  isMobile?: boolean;
+};
+
+export function ViewOrderByDropdown(props: Props) {
+  const { onChange, sortBy, sortKey, isMobile = false } = props;
+  const { t } = useTranslation();
+
+  const orderByDetails = VIEW_SORTING_KEY_OPTIONS.find((option) => sortKey === option.key);
+  const isDescending = sortBy === "desc";
+
+  const buttonClassName = isMobile
+    ? "flex items-center text-13 text-secondary gap-2 w-full"
+    : getButtonStyling("secondary", "lg");
+
+  const icon = (
+    <>{!isDescending ? <SortAscendingOutline className="size-3" /> : <SortDescendingOutline className="size-3" />}</>
+  );
+  return (
+    <CustomMenu
+      customButton={
+        <span className={buttonClassName}>
+          {!isMobile && icon}
+          <span className="shrink-0"> {orderByDetails?.i18n_label && t(orderByDetails?.i18n_label)}</span>
+        </span>
+      }
+      placement="bottom-end"
+      className="flex w-full justify-center"
+      maxHeight="lg"
+      closeOnSelect
+    >
+      {VIEW_SORTING_KEY_OPTIONS.map((option) => (
+        <CustomMenu.MenuItem
+          key={option.key}
+          className="flex items-center justify-between gap-2"
+          onClick={() =>
+            onChange({
+              key: option.key as TViewFiltersSortKey,
+            })
+          }
+        >
+          {t(option.i18n_label)}
+          {sortKey === option.key && <TickOutline className="h-3 w-3" />}
+        </CustomMenu.MenuItem>
+      ))}
+      <hr className="my-2 border-subtle" />
+      {VIEW_SORT_BY_OPTIONS.map((option) => {
+        const isSelected = (option.key === "asc" && !isDescending) || (option.key === "desc" && isDescending);
+        return (
+          <CustomMenu.MenuItem
+            key={option.key}
+            className="flex items-center justify-between gap-2"
+            onClick={() => {
+              if (!isSelected)
+                onChange({
+                  order: option.key as TViewFiltersSortBy,
+                });
+            }}
+          >
+            {t(option.i18n_label)}
+            {isSelected && <TickOutline className="h-3 w-3" />}
+          </CustomMenu.MenuItem>
+        );
+      })}
+    </CustomMenu>
+  );
+}
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
new file mode 100644
index 0000000..2f58541
--- /dev/null
+++ b/apps/web/core/components/views/form.tsx
@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { ViewsOutline } from "@makeplane/propel/icons";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IProjectView,
+  EIssueLayoutTypes,
+  IIssueFilters,
+} from "@plane/types";
+import { EViewAccess, EIssuesStoreType } from "@plane/types";
+import { getComputedDisplayFilters, getComputedDisplayProperties, getTabIndex } from "@plane/utils";
+// components
+import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { LayoutDropDown } from "../dropdowns/layout";
+import { ProjectLevelWorkItemFiltersHOC } from "../work-item-filters/filters-hoc/project-level";
+
+type Props = {
+  data?: IProjectView | null;
+  handleClose: () => void;
+  handleFormSubmit: (values: IProjectView) => Promise<void>;
+  preLoadedData?: Partial<IProjectView> | null;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+const DEFAULT_VALUES: Partial<IProjectView> = {
+  name: "",
+  description: "",
+  access: EViewAccess.PUBLIC,
+  display_properties: getComputedDisplayProperties(),
+  display_filters: { ...getComputedDisplayFilters(), group_by: "state" },
+};
+
+export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
+  const { handleFormSubmit, handleClose, data, preLoadedData, projectId, workspaceSlug } = props;
+  // i18n
+  const { t } = useTranslation();
+  // state
+  const [isOpen, setIsOpen] = useState(false);
+  // store hooks
+  const { getProjectById } = useProject();
+  const { isMobile } = usePlatformOS();
+  // form info
+  const defaultValues = {
+    ...DEFAULT_VALUES,
+    ...preLoadedData,
+    ...data,
+  };
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    getValues,
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+  } = useForm<IProjectView>({
+    defaultValues,
+  });
+  // derived values
+  const projectDetails = getProjectById(projectId);
+  const logoValue = watch("logo_props");
+  const workItemFilters: IIssueFilters = {
+    richFilters: getValues("rich_filters"),
+    displayFilters: getValues("display_filters"),
+    displayProperties: getValues("display_properties"),
+    kanbanFilters: undefined,
+  };
+  const { getIndex } = getTabIndex(ETabIndices.PROJECT_VIEW, isMobile);
+
+  const handleCreateUpdateView = async (formData: IProjectView) => {
+    await handleFormSubmit({
+      name: formData.name,
+      description: formData.description,
+      logo_props: formData.logo_props,
+      rich_filters: formData.rich_filters,
+      display_filters: formData.display_filters,
+      display_properties: formData.display_properties,
+      access: formData.access,
+    } as IProjectView);
+
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateView)}>
+      <div className="space-y-5 p-5">
+        <h3 className="text-18 font-medium text-secondary">{data ? t("view.update.label") : t("view.create.label")}</h3>
+        <div className="space-y-3">
+          <div className="flex w-full items-start gap-2">
+            <EmojiPicker
+              iconType="lucide"
+              isOpen={isOpen}
+              handleToggle={(val: boolean) => setIsOpen(val)}
+              className="flex-shrink0 flex items-center justify-center"
+              buttonClassName="flex items-center justify-center"
+              label={
+                <span className="grid h-9 w-9 place-items-center rounded-md bg-surface-2">
+                  <>
+                    {logoValue?.in_use ? (
+                      <Logo logo={logoValue} size={18} type="lucide" />
+                    ) : (
+                      <ViewsOutline className="h-4 w-4 text-tertiary" />
+                    )}
+                  </>
+                </span>
+              }
+              // TODO: fix types
+              onChange={(val: any) => {
+                // oxlint-disable-next-line no-shadow
+                let logoValue = {};
+
+                if (val?.type === "emoji")
+                  logoValue = {
+                    value: val.value,
+                  };
+                else if (val?.type === "icon") logoValue = val.value;
+
+                setValue("logo_props", {
+                  in_use: val?.type,
+                  [val?.type]: logoValue,
+                });
+                setIsOpen(false);
+              }}
+              defaultIconColor={logoValue?.in_use && logoValue?.in_use === "icon" ? logoValue?.icon?.color : undefined}
+              defaultOpen={
+                logoValue?.in_use && logoValue?.in_use === "emoji"
+                  ? EmojiIconPickerTypes.EMOJI
+                  : EmojiIconPickerTypes.ICON
+              }
+            />
+            <div className="flew-grow w-full space-y-1">
+              <Controller
+                control={control}
+                name="name"
+                rules={{
+                  required: t("form.title.required"),
+                  maxLength: {
+                    value: 255,
+                    message: t("form.title.max_length", { length: 255 }),
+                  },
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Field name="name" invalid={Boolean(errors.name)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="name"
+                        type="name"
+                        name="name"
+                        value={value}
+                        onChange={onChange}
+                        placeholder={t("common.title")}
+                        tabIndex={getIndex("name")}
+                        // oxlint-disable-next-line jsx_a11y/no-autofocus
+                        autoFocus
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+              <span className="text-11 text-danger-primary">{errors?.name?.message?.toString()}</span>
+            </div>
+          </div>
+          <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup resize="none">
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      autoResize
+                      maxRows={8}
+                      id="description"
+                      name="description"
+                      placeholder={t("common.description")}
+                      value={value}
+                      onChange={onChange}
+                      tabIndex={getIndex("descriptions")}
+                    />
+                  </TextAreaGroup>
+                </Field>
+              )}
+            />
+          </div>
+          <div className="flex gap-2">
+            <Controller
+              control={control}
+              name="display_filters"
+              render={({ field: { onChange: onDisplayFiltersChange, value: displayFilters } }) => (
+                <>
+                  {/* layout dropdown */}
+                  <LayoutDropDown
+                    onChange={(selectedValue: EIssueLayoutTypes) =>
+                      onDisplayFiltersChange({
+                        ...displayFilters,
+                        layout: selectedValue,
+                      })
+                    }
+                    value={displayFilters.layout}
+                  />
+                  {/* display filters dropdown */}
+                  <Controller
+                    control={control}
+                    name="display_properties"
+                    render={({ field: { onChange: onDisplayPropertiesChange, value: displayProperties } }) => (
+                      <FiltersDropdown title={t("common.display")}>
+                        <DisplayFiltersSelection
+                          layoutDisplayFiltersOptions={
+                            ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.layoutOptions[displayFilters.layout]
+                          }
+                          displayFilters={displayFilters ?? {}}
+                          handleDisplayFiltersUpdate={(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+                            onDisplayFiltersChange({
+                              ...displayFilters,
+                              ...updatedDisplayFilter,
+                            });
+                          }}
+                          displayProperties={displayProperties ?? {}}
+                          handleDisplayPropertiesUpdate={(
+                            updatedDisplayProperties: Partial<IIssueDisplayProperties>
+                          ) => {
+                            onDisplayPropertiesChange({
+                              ...displayProperties,
+                              ...updatedDisplayProperties,
+                            });
+                          }}
+                          cycleViewDisabled={!projectDetails?.cycle_view}
+                          moduleViewDisabled={!projectDetails?.module_view}
+                        />
+                      </FiltersDropdown>
+                    )}
+                  />
+                </>
+              )}
+            />
+          </div>
+          <div>
+            {/* filters dropdown */}
+            <Controller
+              control={control}
+              name="rich_filters"
+              render={({ field: { onChange: onFiltersChange } }) => (
+                <ProjectLevelWorkItemFiltersHOC
+                  entityId={data?.id}
+                  entityType={EIssuesStoreType.PROJECT_VIEW}
+                  filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.issues.filters}
+                  initialWorkItemFilters={workItemFilters}
+                  isTemporary
+                  updateFilters={(updateFilters) => onFiltersChange(updateFilters)}
+                  projectId={projectId}
+                  showOnMount
+                  workspaceSlug={workspaceSlug}
+                >
+                  {({ filter: projectViewWorkItemsFilter }) =>
+                    projectViewWorkItemsFilter && (
+                      <WorkItemFiltersRow filter={projectViewWorkItemsFilter} variant="modal" />
+                    )
+                  }
+                </ProjectLevelWorkItemFiltersHOC>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
+          {t("common.cancel")}
+        </Button>
+        <Button variant="primary" size="lg" type="submit" tabIndex={getIndex("submit")} loading={isSubmitting}>
+          {data
+            ? isSubmitting
+              ? t("common.updating")
+              : t("view.update.label")
+            : isSubmitting
+              ? t("common.creating")
+              : t("view.create.label")}
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/views/helper.tsx b/apps/web/core/components/views/helper.tsx
new file mode 100644
index 0000000..2a8194b
--- /dev/null
+++ b/apps/web/core/components/views/helper.tsx
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { EIssueLayoutTypes } from "@plane/types";
+import { WorkspaceSpreadsheetRoot } from "@/components/issues/issue-layouts/spreadsheet/roots/workspace-root";
+
+export type TWorkspaceLayoutProps = {
+  activeLayout: EIssueLayoutTypes | undefined;
+  isDefaultView: boolean;
+  isLoading?: boolean;
+  toggleLoading: (value: boolean) => void;
+  workspaceSlug: string;
+  globalViewId: string;
+  routeFilters: {
+    [key: string]: string;
+  };
+  fetchNextPages: () => void;
+  globalViewsLoading: boolean;
+  issuesLoading: boolean;
+};
+
+export function WorkspaceActiveLayout(props: TWorkspaceLayoutProps) {
+  const {
+    activeLayout = EIssueLayoutTypes.SPREADSHEET,
+    isDefaultView,
+    isLoading,
+    toggleLoading,
+    workspaceSlug,
+    globalViewId,
+    routeFilters,
+    fetchNextPages,
+    globalViewsLoading,
+    issuesLoading,
+  } = props;
+  switch (activeLayout) {
+    case EIssueLayoutTypes.SPREADSHEET:
+      return (
+        <WorkspaceSpreadsheetRoot
+          isDefaultView={isDefaultView}
+          isLoading={isLoading}
+          toggleLoading={toggleLoading}
+          workspaceSlug={workspaceSlug}
+          globalViewId={globalViewId}
+          routeFilters={routeFilters}
+          fetchNextPages={fetchNextPages}
+          globalViewsLoading={globalViewsLoading}
+          issuesLoading={issuesLoading}
+        />
+      );
+    default:
+      return <></>;
+  }
+}
+
+export type TLayoutSelectionProps = {
+  onChange: (layout: EIssueLayoutTypes) => void;
+  selectedLayout: EIssueLayoutTypes;
+  workspaceSlug: string;
+};
diff --git a/apps/web/core/components/views/modal.tsx b/apps/web/core/components/views/modal.tsx
new file mode 100644
index 0000000..0d16de1
--- /dev/null
+++ b/apps/web/core/components/views/modal.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// types
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IProjectView } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
+import { useAppRouter } from "@/hooks/use-app-router";
+import useKeypress from "@/hooks/use-keypress";
+// local imports
+import { ProjectViewForm } from "./form";
+
+type Props = {
+  data?: IProjectView | null;
+  isOpen: boolean;
+  onClose: () => void;
+  preLoadedData?: Partial<IProjectView> | null;
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const CreateUpdateProjectViewModal = observer(function CreateUpdateProjectViewModal(props: Props) {
+  const { data, isOpen, onClose, preLoadedData, workspaceSlug, projectId } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { createView, updateView } = useProjectView();
+  const {
+    issuesFilter: { mutateFilters },
+  } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+  const { resetExpression } = useWorkItemFilters();
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const handleCreateView = async (payload: IProjectView) => {
+    try {
+      const res = await createView(workspaceSlug, projectId, payload);
+      handleClose();
+      router.push(`/${workspaceSlug}/projects/${projectId}/views/${res.id}`);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "View created successfully.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to create view. Please try again.",
+      });
+    }
+  };
+
+  const handleUpdateView = async (payload: IProjectView) => {
+    try {
+      const viewDetails = await updateView(workspaceSlug, projectId, data?.id as string, payload);
+      mutateFilters(workspaceSlug, viewDetails.id, viewDetails);
+      resetExpression(EIssuesStoreType.PROJECT_VIEW, viewDetails.id, viewDetails.rich_filters);
+      handleClose();
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to update view. Please try again.",
+      });
+    }
+  };
+
+  const handleFormSubmit = async (formData: IProjectView) => {
+    if (!data) await handleCreateView(formData);
+    else await handleUpdateView(formData);
+  };
+
+  useKeypress("Escape", () => {
+    if (isOpen) handleClose();
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <ProjectViewForm
+        data={data}
+        handleClose={handleClose}
+        handleFormSubmit={handleFormSubmit}
+        preLoadedData={preLoadedData}
+        projectId={projectId}
+        workspaceSlug={workspaceSlug}
+      />
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/views/publish/index.ts b/apps/web/core/components/views/publish/index.ts
new file mode 100644
index 0000000..3f1b845
--- /dev/null
+++ b/apps/web/core/components/views/publish/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-view-publish";
diff --git a/apps/web/core/components/views/publish/use-view-publish.tsx b/apps/web/core/components/views/publish/use-view-publish.tsx
new file mode 100644
index 0000000..133db0c
--- /dev/null
+++ b/apps/web/core/components/views/publish/use-view-publish.tsx
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useViewPublish = (isPublished: boolean, isAuthorized: boolean) => ({
+  isPublishModalOpen: false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setPublishModalOpen: (value: boolean) => {},
+  publishContextMenu: undefined,
+});
diff --git a/apps/web/core/components/views/quick-actions.tsx b/apps/web/core/components/views/quick-actions.tsx
new file mode 100644
index 0000000..94d8ba9
--- /dev/null
+++ b/apps/web/core/components/views/quick-actions.tsx
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
+// types
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { IconButton } from "@plane/propel/icon-button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IProjectView } from "@plane/types";
+// ui
+import type { TContextMenuItem } from "@plane/ui";
+import { ContextMenu, CustomMenu } from "@plane/ui";
+import { copyUrlToClipboard, cn } from "@plane/utils";
+// helpers
+import { useViewMenuItems } from "@/components/common/quick-actions-helper";
+// hooks
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useViewPublish } from "@/components/views/publish";
+// local imports
+import { DeleteProjectViewModal } from "./delete-view-modal";
+import { CreateUpdateProjectViewModal } from "./modal";
+
+type Props = {
+  parentRef: React.RefObject<HTMLElement | null>;
+  projectId: string;
+  view: IProjectView;
+  workspaceSlug: string;
+  customClassName?: string;
+};
+
+export const ViewQuickActions = observer(function ViewQuickActions(props: Props) {
+  const { parentRef, projectId, view, workspaceSlug, customClassName } = props;
+  // states
+  const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+  // store hooks
+  const { data } = useUser();
+  const { allowPermissions } = useUserPermissions();
+  // auth
+  const isOwner = view?.owned_by === data?.id;
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId);
+
+  const { publishContextMenu } = useViewPublish(!!view.anchor, isAdmin || isOwner);
+
+  const viewLink = `${workspaceSlug}/projects/${projectId}/views/${view.id}`;
+  const handleCopyText = () =>
+    // oxlint-disable-next-line promise/always-return
+    copyUrlToClipboard(viewLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "View link copied to clipboard.",
+      });
+    });
+  const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");
+
+  const menuResult = useViewMenuItems({
+    isOwner,
+    isAdmin,
+    workspaceSlug,
+    projectId,
+    view,
+    handleEdit: () => setCreateUpdateViewModal(true),
+    handleDelete: () => setDeleteViewModal(true),
+    handleCopyLink: handleCopyText,
+    handleOpenInNewTab,
+  });
+
+  // Handle both CE (array) and EE (object) return types
+  const MENU_ITEMS: TContextMenuItem[] = Array.isArray(menuResult) ? menuResult : menuResult.items;
+  const additionalModals = Array.isArray(menuResult) ? null : menuResult.modals;
+
+  if (publishContextMenu) MENU_ITEMS.splice(2, 0, publishContextMenu);
+
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+      action: () => {
+        item.action();
+      },
+    };
+  });
+
+  return (
+    <>
+      <CreateUpdateProjectViewModal
+        isOpen={createUpdateViewModal}
+        onClose={() => setCreateUpdateViewModal(false)}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        data={view}
+      />
+      <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+      {additionalModals}
+      <ContextMenu parentRef={parentRef} items={CONTEXT_MENU_ITEMS} />
+      <CustomMenu
+        customButton={<IconButton variant="tertiary" size="lg" icon={MoreHorizontalOutline} />}
+        placement="bottom-end"
+        closeOnSelect
+        buttonClassName={customClassName}
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/views/view-list-header.tsx b/apps/web/core/components/views/view-list-header.tsx
new file mode 100644
index 0000000..bc5e79d
--- /dev/null
+++ b/apps/web/core/components/views/view-list-header.tsx
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// icons
+import { CloseOutline, FilterOutline, SearchOutline } from "@makeplane/propel/icons";
+import { useOutsideClickDetector } from "@plane/hooks";
+// plane helpers
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { FiltersDropdown } from "../issues/issue-layouts/filters";
+import { ViewFiltersSelection } from "./filters/filter-selection";
+import { ViewOrderByDropdown } from "./filters/order-by";
+import { IconButton } from "@plane/propel/icon-button";
+
+export const ViewListHeader = observer(function ViewListHeader() {
+  // states
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+  // store hooks
+  const { filters, updateFilters } = useProjectView();
+  const {
+    project: { projectMemberIds },
+  } = useMember();
+
+  // handlers
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      if (filters?.searchQuery && filters?.searchQuery.trim() !== "") {
+        updateFilters("searchQuery", "");
+      } else {
+        setIsSearchOpen(false);
+        inputRef.current?.blur();
+      }
+    }
+  };
+
+  // outside click detector hook
+  useOutsideClickDetector(inputRef, () => {
+    if (isSearchOpen && filters?.searchQuery.trim() === "") setIsSearchOpen(false);
+  });
+
+  useEffect(() => {
+    if (filters?.searchQuery.trim() !== "") setIsSearchOpen(true);
+  }, [filters?.searchQuery]);
+
+  return (
+    <div className="flex h-full items-center gap-2">
+      <div className="flex items-center">
+        {!isSearchOpen && (
+          <IconButton
+            variant="ghost"
+            size="lg"
+            className="-mr-1"
+            onClick={() => {
+              setIsSearchOpen(true);
+              inputRef.current?.focus();
+            }}
+            icon={SearchOutline}
+          />
+        )}
+        <div
+          className={cn(
+            "ml-auto flex w-0 items-center justify-start gap-1 overflow-hidden rounded-md border border-transparent bg-surface-1 text-placeholder opacity-0 transition-[width] ease-linear",
+            {
+              "w-64 border-subtle px-2.5 py-1.5 opacity-100": isSearchOpen,
+            }
+          )}
+        >
+          <SearchOutline className="h-3.5 w-3.5" />
+          <input
+            ref={inputRef}
+            className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none"
+            placeholder="Search"
+            value={filters?.searchQuery}
+            onChange={(e) => updateFilters("searchQuery", e.target.value)}
+            onKeyDown={handleInputKeyDown}
+          />
+          {isSearchOpen && (
+            <button
+              type="button"
+              className="grid place-items-center"
+              onClick={() => {
+                updateFilters("searchQuery", "");
+                setIsSearchOpen(false);
+              }}
+            >
+              <CloseOutline className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="hidden items-center gap-2 md:flex">
+        <ViewOrderByDropdown
+          sortBy={filters.sortBy}
+          sortKey={filters.sortKey}
+          onChange={(val) => {
+            if (val.key) updateFilters("sortKey", val.key);
+            if (val.order) updateFilters("sortBy", val.order);
+          }}
+        />
+        <FiltersDropdown
+          icon={<FilterOutline className="h-3 w-3" />}
+          title="Filters"
+          placement="bottom-end"
+          isFiltersApplied={false}
+        >
+          <ViewFiltersSelection
+            filters={filters}
+            handleFiltersUpdate={updateFilters}
+            memberIds={projectMemberIds ?? undefined}
+          />
+        </FiltersDropdown>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/views/view-list-item-action.tsx b/apps/web/core/components/views/view-list-item-action.tsx
new file mode 100644
index 0000000..d526bc6
--- /dev/null
+++ b/apps/web/core/components/views/view-list-item-action.tsx
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { GlobeOutline, LockOutline } from "@makeplane/propel/icons";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IProjectView } from "@plane/types";
+import { EViewAccess } from "@plane/types";
+import { FavoriteStar } from "@plane/ui";
+import { getPublishViewLink } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ButtonAvatars } from "../dropdowns/member/avatar";
+import { DeleteProjectViewModal } from "./delete-view-modal";
+import { CreateUpdateProjectViewModal } from "./modal";
+import { ViewQuickActions } from "./quick-actions";
+
+type Props = {
+  parentRef: React.RefObject<HTMLElement | null>;
+  view: IProjectView;
+};
+
+export const ViewListItemAction = observer(function ViewListItemAction(props: Props) {
+  const { parentRef, view } = props;
+  // states
+  const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+  const [_, setPublishModalOpen] = useState<boolean>(false);
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store
+  const { allowPermissions } = useUserPermissions();
+
+  const { addViewToFavorites, removeViewFromFavorites } = useProjectView();
+  const { getUserDetails } = useMember();
+
+  // local storage
+  const { setValue: toggleFavoriteMenu, storedValue: isFavoriteOpen } = useLocalStorage<boolean>(
+    IS_FAVORITE_MENU_OPEN,
+    false
+  );
+
+  // derived values
+  const isEditingAllowed = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  const access = view.access;
+
+  const publishLink = getPublishViewLink(view?.anchor);
+
+  // handlers
+  const handleAddToFavorites = async () => {
+    if (!workspaceSlug || !projectId) return;
+
+    await addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
+    if (!isFavoriteOpen) toggleFavoriteMenu(true);
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
+  };
+
+  const ownedByDetails = view.owned_by ? getUserDetails(view.owned_by) : undefined;
+
+  return (
+    <>
+      {workspaceSlug && projectId && view && (
+        <CreateUpdateProjectViewModal
+          isOpen={createUpdateViewModal}
+          onClose={() => setCreateUpdateViewModal(false)}
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          data={view}
+        />
+      )}
+      <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+      <div className="cursor-default text-tertiary">
+        <Tooltip label={access === EViewAccess.PUBLIC ? "Public" : "Private"}>
+          {access === EViewAccess.PUBLIC ? <GlobeOutline className="h-4 w-4" /> : <LockOutline className="h-4 w-4" />}
+        </Tooltip>
+      </div>
+
+      {view?.anchor && publishLink ? (
+        // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+        <div
+          className="flex cursor-pointer items-center gap-1.5 rounded-sm bg-success-subtle px-3 py-1.5 text-11 font-medium text-success-primary"
+          onClick={() => setPublishModalOpen(true)}
+        >
+          <span className="size-1.5 flex-shrink-0 rounded-full bg-success-primary" />
+          Live
+        </div>
+      ) : (
+        <></>
+      )}
+
+      {/* created by */}
+      {<ButtonAvatars showTooltip={false} userIds={ownedByDetails?.id ?? []} />}
+
+      {isEditingAllowed && (
+        <FavoriteStar
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (view.is_favorite) handleRemoveFromFavorites();
+            else handleAddToFavorites();
+          }}
+          selected={view.is_favorite}
+        />
+      )}
+      {projectId && workspaceSlug && (
+        <div className="hidden md:block">
+          <ViewQuickActions
+            parentRef={parentRef}
+            projectId={projectId.toString()}
+            view={view}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/views/view-list-item.tsx b/apps/web/core/components/views/view-list-item.tsx
new file mode 100644
index 0000000..011b473
--- /dev/null
+++ b/apps/web/core/components/views/view-list-item.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { ViewsOutline } from "@makeplane/propel/icons";
+// types
+import type { IProjectView } from "@plane/types";
+// components
+import { ListItem } from "@/components/core/list";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { ViewQuickActions } from "./quick-actions";
+import { ViewListItemAction } from "./view-list-item-action";
+
+type Props = {
+  view: IProjectView;
+};
+
+export const ProjectViewListItem = observer(function ProjectViewListItem(props: Props) {
+  const { view } = props;
+  // refs
+  const parentRef = useRef(null);
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <ListItem
+      prependTitleElement={
+        <>
+          {view?.logo_props?.in_use ? (
+            <Logo logo={view?.logo_props} size={16} type="lucide" />
+          ) : (
+            <ViewsOutline className="h-4 w-4 text-tertiary" />
+          )}
+        </>
+      }
+      title={view.name}
+      itemLink={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
+      actionableItems={<ViewListItemAction parentRef={parentRef} view={view} />}
+      quickActionElement={
+        <div className="block md:hidden">
+          <ViewQuickActions
+            parentRef={parentRef}
+            projectId={projectId.toString()}
+            view={view}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        </div>
+      }
+      isMobile={isMobile}
+      parentRef={parentRef}
+    />
+  );
+});
diff --git a/apps/web/core/components/views/views-list.tsx b/apps/web/core/components/views/views-list.tsx
new file mode 100644
index 0000000..727f616
--- /dev/null
+++ b/apps/web/core/components/views/views-list.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+import { EUserProjectRoles } from "@plane/types";
+// components
+import { ListLayout } from "@/components/core/list";
+import { ViewListLoader } from "@/components/ui/loader/view-list-loader";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { ProjectViewListItem } from "./view-list-item";
+
+export const ProjectViewsList = observer(function ProjectViewsList() {
+  const { projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { toggleCreateViewModal } = useCommandPalette();
+  const { getProjectViews, getFilteredProjectViews, loader } = useProjectView();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const projectViews = getProjectViews(projectId?.toString());
+  const filteredProjectViews = getFilteredProjectViews(projectId?.toString());
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER, EUserProjectRoles.GUEST],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  if (loader || !projectViews || !filteredProjectViews) return <ViewListLoader />;
+
+  if (filteredProjectViews.length === 0 && projectViews.length > 0) {
+    return (
+      <EmptyStateDetailed
+        assetKey="search"
+        title={t("common_empty_state.search.title")}
+        description={t("common_empty_state.search.description")}
+      />
+    );
+  }
+
+  return (
+    <>
+      {filteredProjectViews.length > 0 ? (
+        <div className="flex h-full w-full flex-col">
+          <ListLayout>
+            {filteredProjectViews.length > 0 ? (
+              filteredProjectViews.map((view) => <ProjectViewListItem key={view.id} view={view} />)
+            ) : (
+              <p className="mt-10 text-center text-13 text-tertiary">No results found</p>
+            )}
+          </ListLayout>
+        </div>
+      ) : (
+        <EmptyStateDetailed
+          assetKey="view"
+          title={t("project_empty_state.views.title")}
+          description={t("project_empty_state.views.description")}
+          actions={[
+            {
+              label: t("project_empty_state.views.cta_primary"),
+              onClick: () => toggleCreateViewModal(true),
+              disabled: !canPerformEmptyStateActions,
+              variant: "primary",
+            },
+          ]}
+        />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/web-hooks/create-webhook-modal.tsx b/apps/web/core/components/web-hooks/create-webhook-modal.tsx
new file mode 100644
index 0000000..ccde260
--- /dev/null
+++ b/apps/web/core/components/web-hooks/create-webhook-modal.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { useParams } from "next/navigation";
+// types
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// helpers
+import { csvDownload } from "@plane/utils";
+// hooks
+import useKeypress from "@/hooks/use-keypress";
+// components
+import { WebhookForm } from "./form";
+import { GeneratedHookDetails } from "./generated-hook-details";
+// utils
+import { getCurrentHookAsCSV } from "./utils";
+
+interface ICreateWebhookModal {
+  currentWorkspace: IWorkspace | null;
+  isOpen: boolean;
+  clearSecretKey: () => void;
+  createWebhook: (
+    workspaceSlug: string,
+    data: Partial<IWebhook>
+  ) => Promise<{
+    webHook: IWebhook;
+    secretKey: string | null;
+  }>;
+  onClose: () => void;
+}
+
+export function CreateWebhookModal(props: ICreateWebhookModal) {
+  const { isOpen, onClose, currentWorkspace, createWebhook, clearSecretKey } = props;
+  // states
+  const [generatedWebhook, setGeneratedKey] = useState<IWebhook | null>(null);
+  // router
+  const { workspaceSlug } = useParams();
+  const { t } = useTranslation();
+
+  const handleCreateWebhook = async (formData: IWebhook, webhookEventType: TWebhookEventTypes) => {
+    if (!workspaceSlug) return;
+
+    let payload: Partial<IWebhook> = {
+      url: formData.url,
+    };
+
+    if (webhookEventType === "all")
+      payload = {
+        ...payload,
+        project: true,
+        cycle: true,
+        module: true,
+        issue: true,
+        issue_comment: true,
+      };
+    else
+      payload = {
+        ...payload,
+        project: formData.project ?? false,
+        cycle: formData.cycle ?? false,
+        module: formData.module ?? false,
+        issue: formData.issue ?? false,
+        issue_comment: formData.issue_comment ?? false,
+      };
+
+    await createWebhook(workspaceSlug.toString(), payload)
+      .then(({ webHook, secretKey }) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("workspace_settings.settings.webhooks.toasts.created.title"),
+          message: t("workspace_settings.settings.webhooks.toasts.created.message"),
+        });
+
+        setGeneratedKey(webHook);
+
+        const csvData = getCurrentHookAsCSV(currentWorkspace, webHook, secretKey ?? undefined);
+        csvDownload(csvData, `webhook-secret-key-${Date.now()}`);
+      })
+      .catch((error) => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("workspace_settings.settings.webhooks.toasts.not_created.title"),
+          message: error?.error ?? t("workspace_settings.settings.webhooks.toasts.not_created.message"),
+        });
+      });
+  };
+
+  const handleClose = () => {
+    onClose();
+    setTimeout(() => {
+      clearSecretKey();
+      setGeneratedKey(null);
+    }, 350);
+  };
+
+  useKeypress("Escape", () => {
+    if (isOpen && !generatedWebhook) handleClose();
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL} className="p-4 pb-0">
+      {!generatedWebhook ? (
+        <WebhookForm onSubmit={handleCreateWebhook} handleClose={handleClose} />
+      ) : (
+        <GeneratedHookDetails webhookDetails={generatedWebhook} handleClose={handleClose} />
+      )}
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/delete-webhook-modal.tsx b/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
new file mode 100644
index 0000000..1e13fde
--- /dev/null
+++ b/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { useParams } from "next/navigation";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { AlertModalCore } from "@plane/ui";
+// hooks
+import { useWebhook } from "@/hooks/store/use-webhook";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+interface IDeleteWebhook {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function DeleteWebhookModal(props: IDeleteWebhook) {
+  const { isOpen, onClose } = props;
+  // states
+  const [isDeleting, setIsDeleting] = useState(false);
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { removeWebhook } = useWebhook();
+
+  const { workspaceSlug, webhookId } = useParams();
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const handleDelete = async () => {
+    if (!workspaceSlug || !webhookId) return;
+    setIsDeleting(true);
+    try {
+      await removeWebhook(workspaceSlug.toString(), webhookId.toString());
+      router.replace(`/${workspaceSlug}/settings/webhooks/`);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Webhook deleted successfully.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Webhook could not be deleted. Please try again.",
+      });
+    }
+    setIsDeleting(false);
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDelete}
+      isSubmitting={isDeleting}
+      isOpen={isOpen}
+      title="Delete webhook"
+      content={
+        <>
+          Are you sure you want to delete this webhook? Future events will not be delivered to this webhook. This action
+          cannot be undone.
+        </>
+      }
+    />
+  );
+}
diff --git a/apps/web/core/components/web-hooks/empty-state.tsx b/apps/web/core/components/web-hooks/empty-state.tsx
new file mode 100644
index 0000000..e79debd
--- /dev/null
+++ b/apps/web/core/components/web-hooks/empty-state.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// ui
+import { Button } from "@plane/propel/button";
+// assets
+import EmptyWebhook from "@/app/assets/empty-state/web-hook.svg?url";
+
+type Props = {
+  onClick: () => void;
+};
+
+export function WebhooksEmptyState(props: Props) {
+  const { onClick } = props;
+  return (
+    <div
+      className={`mx-auto flex w-full items-center justify-center rounded-xs border border-subtle bg-surface-2 px-16 py-10 lg:w-3/4`}
+    >
+      <div className="flex w-full flex-col items-center text-center">
+        <img src={EmptyWebhook} className="w-52 object-cover sm:w-60" alt="empty" />
+        <h6 className="mt-6 mb-3 text-18 font-semibold sm:mt-8">No webhooks</h6>
+        <p className="mb-7 text-tertiary sm:mb-8">Create webhooks to receive real-time updates and automate actions</p>
+        <Button className="flex items-center gap-1.5" onClick={onClick}>
+          Add webhook
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/form/delete-section.tsx b/apps/web/core/components/web-hooks/form/delete-section.tsx
new file mode 100644
index 0000000..ef4f5bd
--- /dev/null
+++ b/apps/web/core/components/web-hooks/form/delete-section.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Disclosure, Transition } from "@headlessui/react";
+import { Button } from "@plane/propel/button";
+import { ChevronDownOutline, ChevronUpOutline } from "@makeplane/propel/icons";
+
+type Props = {
+  openDeleteModal: () => void;
+};
+
+export function WebhookDeleteSection(props: Props) {
+  const { openDeleteModal } = props;
+
+  return (
+    <Disclosure as="div" className="border-t border-subtle">
+      {({ open }) => (
+        <div className="w-full">
+          <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
+            <span className="text-16 tracking-tight">Danger zone</span>
+            {open ? <ChevronUpOutline className="h-5 w-5" /> : <ChevronDownOutline className="h-5 w-5" />}
+          </Disclosure.Button>
+
+          <Transition
+            as="div"
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform opacity-0"
+            enterTo="transform opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform opacity-100"
+            leaveTo="transform opacity-0"
+          >
+            <Disclosure.Panel>
+              <div className="flex flex-col gap-8">
+                <span className="text-13 tracking-tight">
+                  Once a webhook is deleted, it cannot be restored. Future events will no longer be delivered to this
+                  webhook.
+                </span>
+                <div>
+                  <Button variant="error-fill" size="lg" onClick={openDeleteModal}>
+                    Delete webhook
+                  </Button>
+                </div>
+              </div>
+            </Disclosure.Panel>
+          </Transition>
+        </div>
+      )}
+    </Disclosure>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/form/event-types.tsx b/apps/web/core/components/web-hooks/form/event-types.tsx
new file mode 100644
index 0000000..e98f89d
--- /dev/null
+++ b/apps/web/core/components/web-hooks/form/event-types.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import { useTranslation } from "@plane/i18n";
+import type { TWebhookEventTypes } from "@plane/types";
+
+type Props = {
+  value: string;
+  onChange: (value: TWebhookEventTypes) => void;
+};
+
+const WEBHOOK_EVENT_TYPES: { key: TWebhookEventTypes; i18n_label: string }[] = [
+  {
+    key: "all",
+    i18n_label: "workspace_settings.settings.webhooks.options.all",
+  },
+  {
+    key: "individual",
+    i18n_label: "workspace_settings.settings.webhooks.options.individual",
+  },
+];
+
+export function WebhookOptions(props: Props) {
+  const { value, onChange } = props;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <h6 className="text-13 font-medium">{t("workspace_settings.settings.webhooks.modal.question")}</h6>
+      <div className="space-y-3">
+        {WEBHOOK_EVENT_TYPES.map((option) => (
+          <div key={option.key} className="flex items-center gap-2">
+            <input
+              id={option.key}
+              type="radio"
+              value={option.key}
+              checked={value == option.key}
+              onChange={() => onChange(option.key)}
+            />
+            <label className="text-13" htmlFor={option.key}>
+              {t(option.i18n_label)}
+            </label>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/form/form.tsx b/apps/web/core/components/web-hooks/form/form.tsx
new file mode 100644
index 0000000..4800931
--- /dev/null
+++ b/apps/web/core/components/web-hooks/form/form.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IWebhook, TWebhookEventTypes } from "@plane/types";
+// hooks
+import {
+  WebhookIndividualEventOptions,
+  WebhookInput,
+  WebhookOptions,
+  WebhookSecretKey,
+  WebhookToggle,
+} from "@/components/web-hooks";
+import { useWebhook } from "@/hooks/store/use-webhook";
+// components
+// ui
+// types
+
+type Props = {
+  data?: Partial<IWebhook>;
+  onSubmit: (data: IWebhook, webhookEventType: TWebhookEventTypes) => Promise<void>;
+  handleClose?: () => void;
+};
+
+const initialWebhookPayload: Partial<IWebhook> = {
+  cycle: true,
+  issue: true,
+  issue_comment: true,
+  module: true,
+  project: true,
+  url: "",
+};
+
+export const WebhookForm = observer(function WebhookForm(props: Props) {
+  const { data, onSubmit, handleClose } = props;
+  // states
+  const [webhookEventType, setWebhookEventType] = useState<TWebhookEventTypes>("all");
+  // store hooks
+  const { webhookSecretKey } = useWebhook();
+  const { t } = useTranslation();
+  // use form
+  const {
+    handleSubmit,
+    control,
+    formState: { isSubmitting, errors },
+  } = useForm<IWebhook>({
+    defaultValues: { ...initialWebhookPayload, ...data },
+  });
+
+  const handleFormSubmit = async (formData: IWebhook) => {
+    await onSubmit(formData, webhookEventType);
+  };
+
+  useEffect(() => {
+    if (!data) return;
+
+    if (data.project && data.cycle && data.module && data.issue && data.issue_comment) setWebhookEventType("all");
+    else setWebhookEventType("individual");
+  }, [data]);
+
+  return (
+    <form onSubmit={handleSubmit(handleFormSubmit)}>
+      <div className="space-y-5">
+        <div className="text-18 font-medium text-secondary">
+          {data
+            ? t("workspace_settings.settings.webhooks.modal.details")
+            : t("workspace_settings.settings.webhooks.modal.title")}
+        </div>
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <Controller
+              control={control}
+              name="url"
+              rules={{
+                required: t("workspace_settings.settings.webhooks.modal.error"),
+              }}
+              render={({ field: { onChange, value } }) => (
+                <WebhookInput value={value} onChange={onChange} hasError={Boolean(errors.url)} />
+              )}
+            />
+            {errors.url && <div className="text-11 text-danger-primary">{errors.url.message}</div>}
+          </div>
+          {data && <WebhookToggle control={control} />}
+          <WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
+        </div>
+        <div className="mt-4">
+          {webhookEventType === "individual" && <WebhookIndividualEventOptions control={control} />}
+        </div>
+      </div>
+      {data ? (
+        <div className="space-y-5 pt-0">
+          <WebhookSecretKey data={data} />
+          <Button size="lg" type="submit" loading={isSubmitting}>
+            {isSubmitting ? t("updating") : t("update")}
+          </Button>
+        </div>
+      ) : (
+        <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+          <Button variant="secondary" size="lg" onClick={handleClose}>
+            {t("cancel")}
+          </Button>
+          {!webhookSecretKey && (
+            <Button type="submit" variant="primary" size="lg" loading={isSubmitting} className="capitalize">
+              {isSubmitting ? t("common.creating") : t("common.create")}
+            </Button>
+          )}
+        </div>
+      )}
+    </form>
+  );
+});
diff --git a/apps/web/core/components/web-hooks/form/index.ts b/apps/web/core/components/web-hooks/form/index.ts
new file mode 100644
index 0000000..5de5b3b
--- /dev/null
+++ b/apps/web/core/components/web-hooks/form/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./delete-section";
+export * from "./event-types";
+export * from "./form";
+export * from "./individual-event-options";
+export * from "./input";
+export * from "./secret-key";
+export * from "./toggle";
diff --git a/apps/web/core/components/web-hooks/form/individual-event-options.tsx b/apps/web/core/components/web-hooks/form/individual-event-options.tsx
new file mode 100644
index 0000000..107999d
--- /dev/null
+++ b/apps/web/core/components/web-hooks/form/individual-event-options.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+import { CheckboxField } from "@makeplane/propel/components/checkbox-field";
+import type { IWebhook } from "@plane/types";
+
+export const INDIVIDUAL_WEBHOOK_OPTIONS: {
+  key: keyof IWebhook;
+  label: string;
+  description: string;
+}[] = [
+  {
+    key: "project",
+    label: "Projects",
+    description: "Project created, updated, or deleted",
+  },
+  {
+    key: "cycle",
+    label: "Cycles",
+    description: "Cycle created, updated, or deleted",
+  },
+  {
+    key: "issue",
+    label: "Work items",
+    description: "Work item created, updated, deleted, added to a cycle or module",
+  },
+  {
+    key: "module",
+    label: "Modules",
+    description: "Module created, updated, or deleted",
+  },
+  {
+    key: "issue_comment",
+    label: "Work item comments",
+    description: "Comment posted, updated, or deleted",
+  },
+];
+
+type Props = {
+  control: Control<IWebhook, any>;
+};
+
+export function WebhookIndividualEventOptions({ control }: Props) {
+  return (
+    <div className="grid grid-cols-1 gap-x-4 gap-y-8 px-6 lg:grid-cols-2">
+      {INDIVIDUAL_WEBHOOK_OPTIONS.map((option) => (
+        <Controller
+          key={option.key}
+          control={control}
+          name={option.key}
+          render={({ field: { onChange, value } }) => (
+            <CheckboxField
+              name={option.key}
+              label={option.label}
+              size="lg"
+              description={option.description}
+              stretch="full"
+              checked={value === true}
+              onCheckedChange={onChange}
+            />
+          )}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/form/input.tsx b/apps/web/core/components/web-hooks/form/input.tsx
new file mode 100644
index 0000000..49ca0f1
--- /dev/null
+++ b/apps/web/core/components/web-hooks/form/input.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { useTranslation } from "@plane/i18n";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+  hasError: boolean;
+};
+export function WebhookInput(props: Props) {
+  const { value, onChange, hasError } = props;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <h6 className="text-13 font-medium">{t("workspace_settings.settings.webhooks.modal.payload")}</h6>
+      <Field name="payload" invalid={hasError}>
+        <InputGroup size="2xl">
+          <Input
+            size="2xl"
+            type="url"
+            onChange={(e) => onChange(e.target.value)}
+            value={value}
+            autoComplete="off"
+            placeholder="https://example.com/post"
+            autoFocus
+            aria-label={t("workspace_settings.settings.webhooks.modal.payload")}
+          />
+        </InputGroup>
+      </Field>
+    </>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/form/secret-key.tsx b/apps/web/core/components/web-hooks/form/secret-key.tsx
new file mode 100644
index 0000000..a4fe305
--- /dev/null
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { range } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { CopyOutline, HideOutline, RefreshOutline, ShowOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IWebhook } from "@plane/types";
+// ui
+import { csvDownload, copyTextToClipboard } from "@plane/utils";
+// hooks
+import { useWebhook } from "@/hooks/store/use-webhook";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// types
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// utils
+import { getCurrentHookAsCSV } from "../utils";
+// hooks
+
+type Props = {
+  data: Partial<IWebhook>;
+};
+
+export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props) {
+  const { data } = props;
+  // states
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  const [shouldShowKey, setShouldShowKey] = useState(false);
+  // router
+  const { workspaceSlug, webhookId } = useParams();
+  // store hooks
+  const { currentWorkspace } = useWorkspace();
+  const { currentWebhook, regenerateSecretKey, webhookSecretKey } = useWebhook();
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+  const handleCopySecretKey = () => {
+    if (!webhookSecretKey) return;
+
+    copyTextToClipboard(webhookSecretKey)
+      .then(() =>
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: `${t("success")}`,
+          message: t("workspace_settings.settings.webhooks.toasts.secret_key_copied.message"),
+        })
+      )
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: `${t("error")}!`,
+          message: t("workspace_settings.settings.webhooks.toasts.secret_key_not_copied.message"),
+        })
+      );
+  };
+
+  const handleRegenerateSecretKey = () => {
+    if (!workspaceSlug || !data.id) return;
+
+    setIsRegenerating(true);
+
+    regenerateSecretKey(workspaceSlug.toString(), data.id)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: `${t("success")}`,
+          message: "New key regenerated successfully.",
+        });
+
+        if (currentWebhook && webhookSecretKey) {
+          const csvData = getCurrentHookAsCSV(currentWorkspace, currentWebhook, webhookSecretKey);
+          csvDownload(csvData, `webhook-secret-key-${Date.now()}`);
+        }
+      })
+      .catch((err) =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: `${t("error")}!`,
+          message: err?.error ?? t("something_went_wrong_please_try_again"),
+        })
+      )
+      .finally(() => setIsRegenerating(false));
+  };
+
+  const toggleShowKey = () => setShouldShowKey((prevState) => !prevState);
+
+  const SECRET_KEY_OPTIONS = [
+    { label: "View secret key", Icon: shouldShowKey ? HideOutline : ShowOutline, onClick: toggleShowKey, key: "eye" },
+    { label: "Copy secret key", Icon: CopyOutline, onClick: handleCopySecretKey, key: "copy" },
+  ];
+
+  return (
+    <>
+      {(data || webhookSecretKey) && (
+        <div className="space-y-2">
+          {webhookId && (
+            <div className="text-13 font-medium">{t("workspace_settings.settings.webhooks.secret_key.title")}</div>
+          )}
+          <div className="text-11 text-placeholder">{t("workspace_settings.settings.webhooks.secret_key.message")}</div>
+          <div className="flex flex-col gap-4 md:flex-row md:items-center">
+            <div className="flex h-8 max-w-lg flex-grow items-center justify-between self-stretch rounded-sm border border-subtle px-2">
+              <div className="overflow-hidden font-medium select-none">
+                {shouldShowKey ? (
+                  <p className="text-11">{webhookSecretKey}</p>
+                ) : (
+                  <div className="mr-2 flex items-center gap-1.5 overflow-hidden">
+                    {range(30).map((index) => (
+                      <div key={index} className="h-1 w-1 flex-shrink-0 rounded-full bg-(--text-color-disabled)" />
+                    ))}
+                  </div>
+                )}
+              </div>
+              {webhookSecretKey && (
+                <div className="flex items-center gap-2">
+                  {SECRET_KEY_OPTIONS.map((option) => (
+                    <Tooltip key={option.key} label={option.label} layout="stacked" disabled={isMobile}>
+                      <button type="button" className="grid flex-shrink-0 place-items-center" onClick={option.onClick}>
+                        <option.Icon className="h-3 w-3 text-placeholder" />
+                      </button>
+                    </Tooltip>
+                  ))}
+                </div>
+              )}
+            </div>
+            {data && (
+              <div>
+                <Button
+                  onClick={handleRegenerateSecretKey}
+                  variant="secondary"
+                  size="lg"
+                  loading={isRegenerating}
+                  prependIcon={<RefreshOutline />}
+                >
+                  {isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/web-hooks/form/toggle.tsx b/apps/web/core/components/web-hooks/form/toggle.tsx
new file mode 100644
index 0000000..fe4eeff
--- /dev/null
+++ b/apps/web/core/components/web-hooks/form/toggle.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Control } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// constants
+import type { IWebhook } from "@plane/types";
+import { Switch } from "@makeplane/propel/components/switch";
+
+interface IWebHookToggle {
+  control: Control<IWebhook, any>;
+}
+
+export function WebhookToggle({ control }: IWebHookToggle) {
+  return (
+    <div className="flex gap-6">
+      <div className="text-13 font-medium">Enable webhook</div>
+      <Controller
+        control={control}
+        name="is_active"
+        render={({ field: { onChange, value } }) => (
+          <Switch size="sm" checked={value} onCheckedChange={onChange} aria-label="Enable webhook" />
+        )}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/generated-hook-details.tsx b/apps/web/core/components/web-hooks/generated-hook-details.tsx
new file mode 100644
index 0000000..0375526
--- /dev/null
+++ b/apps/web/core/components/web-hooks/generated-hook-details.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// components
+// ui
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IWebhook } from "@plane/types";
+// types
+import { WebhookSecretKey } from "./form";
+
+type Props = {
+  handleClose: () => void;
+  webhookDetails: IWebhook;
+};
+
+export function GeneratedHookDetails(props: Props) {
+  const { handleClose, webhookDetails } = props;
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div className="space-y-5 p-5">
+        <div className="space-y-3">
+          <h3 className="text-18 font-medium text-secondary">{t("workspace_settings.key_created")}</h3>
+          <p className="text-13 text-placeholder">{t("workspace_settings.copy_key")}</p>
+        </div>
+        <WebhookSecretKey data={webhookDetails} />
+      </div>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          Close
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/index.ts b/apps/web/core/components/web-hooks/index.ts
new file mode 100644
index 0000000..1fa7690
--- /dev/null
+++ b/apps/web/core/components/web-hooks/index.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./delete-webhook-modal";
+export * from "./empty-state";
+export * from "./form";
+export * from "./generated-hook-details";
+export * from "./utils";
+export * from "./create-webhook-modal";
+export * from "./webhooks-list-item";
+export * from "./webhooks-list";
diff --git a/apps/web/core/components/web-hooks/utils.ts b/apps/web/core/components/web-hooks/utils.ts
new file mode 100644
index 0000000..28a0029
--- /dev/null
+++ b/apps/web/core/components/web-hooks/utils.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import type { IWebhook, IWorkspace } from "@plane/types";
+import { renderFormattedPayloadDate } from "@plane/utils";
+// types
+
+export const getCurrentHookAsCSV = (
+  currentWorkspace: IWorkspace | null,
+  webhook: IWebhook | undefined,
+  secretKey: string | undefined
+) => ({
+  id: webhook?.id || "",
+  url: webhook?.url || "",
+  created_at: renderFormattedPayloadDate(webhook?.created_at || "") ?? "",
+  updated_at: renderFormattedPayloadDate(webhook?.updated_at || "") ?? "",
+  is_active: webhook?.is_active?.toString() || "",
+  secret_key: secretKey || "",
+  project: webhook?.project?.toString() || "",
+  issue: webhook?.issue?.toString() || "",
+  module: webhook?.module?.toString() || "",
+  cycle: webhook?.cycle?.toString() || "",
+  issue_comment: webhook?.issue_comment?.toString() || "",
+  workspace: currentWorkspace?.name || "",
+});
diff --git a/apps/web/core/components/web-hooks/webhooks-list-item.tsx b/apps/web/core/components/web-hooks/webhooks-list-item.tsx
new file mode 100644
index 0000000..776100c
--- /dev/null
+++ b/apps/web/core/components/web-hooks/webhooks-list-item.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+// Plane imports
+import type { IWebhook } from "@plane/types";
+import { Switch } from "@makeplane/propel/components/switch";
+// hooks
+import { useWebhook } from "@/hooks/store/use-webhook";
+
+interface IWebhookListItem {
+  webhook: IWebhook;
+}
+
+export function WebhooksListItem(props: IWebhookListItem) {
+  const { webhook } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { updateWebhook } = useWebhook();
+
+  const handleToggle = async () => {
+    if (!workspaceSlug || !webhook.id) return;
+    await updateWebhook(workspaceSlug.toString(), webhook.id, { is_active: !webhook.is_active });
+  };
+
+  return (
+    <div className="rounded-lg border border-subtle bg-layer-2 px-4 py-3">
+      <Link
+        href={`/${workspaceSlug}/settings/webhooks/${webhook?.id}`}
+        className="flex items-center justify-between gap-4"
+      >
+        <h5 className="truncate text-body-sm-medium">{webhook.url}</h5>
+        <div
+          className="shrink-0"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onKeyDown={(e) => e.stopPropagation()}
+          role="presentation"
+        >
+          <Switch
+            size="sm"
+            checked={webhook.is_active}
+            onCheckedChange={() => {
+              void handleToggle();
+            }}
+            aria-label="Toggle webhook"
+          />
+        </div>
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/webhooks-list.tsx b/apps/web/core/components/web-hooks/webhooks-list.tsx
new file mode 100644
index 0000000..f262ef8
--- /dev/null
+++ b/apps/web/core/components/web-hooks/webhooks-list.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// hooks
+import { useWebhook } from "@/hooks/store/use-webhook";
+// components
+import { WebhooksListItem } from "./webhooks-list-item";
+
+export const WebhooksList = observer(function WebhooksList() {
+  // store hooks
+  const { webhooks } = useWebhook();
+
+  return (
+    <div className="flex size-full flex-col gap-y-2 overflow-y-auto rounded-lg border border-subtle bg-layer-1 p-3">
+      {Object.values(webhooks ?? {}).map((webhook) => (
+        <WebhooksListItem key={webhook.id} webhook={webhook} />
+      ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/work-item-filters/filters-hoc/base.tsx b/apps/web/core/components/work-item-filters/filters-hoc/base.tsx
new file mode 100644
index 0000000..4d36116
--- /dev/null
+++ b/apps/web/core/components/work-item-filters/filters-hoc/base.tsx
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useMemo } from "react";
+import { observer } from "mobx-react";
+import { v4 as uuidv4 } from "uuid";
+// plane imports
+import type { TSaveViewOptions, TUpdateViewOptions } from "@plane/constants";
+import type { IWorkItemFilterInstance } from "@plane/shared-state";
+import type { IIssueFilters, TWorkItemFilterExpression } from "@plane/types";
+// store hooks
+import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
+// plane web imports
+import type { TWorkItemFiltersEntityProps } from "@/hooks/work-item-filters/use-work-item-filters-config";
+import { useWorkItemFiltersConfig } from "@/hooks/work-item-filters/use-work-item-filters-config";
+// local imports
+import type { TSharedWorkItemFiltersHOCProps, TSharedWorkItemFiltersProps } from "./shared";
+
+type TAdditionalWorkItemFiltersProps = {
+  saveViewOptions?: TSaveViewOptions<TWorkItemFilterExpression>;
+  updateViewOptions?: TUpdateViewOptions<TWorkItemFilterExpression>;
+} & TWorkItemFiltersEntityProps;
+
+type TWorkItemFiltersHOCProps = TSharedWorkItemFiltersHOCProps & TAdditionalWorkItemFiltersProps;
+
+export const WorkItemFiltersHOC = observer(function WorkItemFiltersHOC(props: TWorkItemFiltersHOCProps) {
+  const { children, initialWorkItemFilters } = props;
+
+  // Only initialize filter instance when initial work item filters are defined
+  if (!initialWorkItemFilters)
+    return <>{typeof children === "function" ? children({ filter: undefined }) : children}</>;
+
+  return (
+    <WorkItemFilterRoot {...props} initialWorkItemFilters={initialWorkItemFilters}>
+      {children}
+    </WorkItemFilterRoot>
+  );
+});
+
+type TWorkItemFilterProps = TSharedWorkItemFiltersProps &
+  TAdditionalWorkItemFiltersProps & {
+    initialWorkItemFilters: IIssueFilters;
+    children: React.ReactNode | ((props: { filter: IWorkItemFilterInstance }) => React.ReactNode);
+  };
+
+const WorkItemFilterRoot = observer(function WorkItemFilterRoot(props: TWorkItemFilterProps) {
+  const {
+    children,
+    entityType,
+    entityId,
+    filtersToShowByLayout,
+    initialWorkItemFilters,
+    isTemporary,
+    saveViewOptions,
+    updateFilters,
+    updateViewOptions,
+    showOnMount,
+    ...entityConfigProps
+  } = props;
+  // store hooks
+  const { getOrCreateFilter, deleteFilter } = useWorkItemFilters();
+  // derived values
+  const workItemEntityID = useMemo(
+    () => (isTemporary ? `TEMP-${entityId ?? uuidv4()}` : entityId),
+    [isTemporary, entityId]
+  );
+  // memoize initial values to prevent re-computations when reference changes
+  const initialUserFilters = useMemo(() => initialWorkItemFilters.richFilters, [initialWorkItemFilters]);
+  const workItemFiltersConfig = useWorkItemFiltersConfig({
+    allowedFilters: filtersToShowByLayout ? filtersToShowByLayout : [],
+    ...entityConfigProps,
+  });
+  // get or create filter instance
+  const workItemLayoutFilter = useMemo(
+    () =>
+      getOrCreateFilter({
+        entityType,
+        entityId: workItemEntityID,
+        initialExpression: initialUserFilters,
+        onExpressionChange: updateFilters,
+        expressionOptions: {
+          saveViewOptions,
+          updateViewOptions,
+        },
+        showOnMount,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [entityType, workItemEntityID, saveViewOptions, updateViewOptions, updateFilters]
+  );
+
+  // delete filter instance when component unmounts
+  useEffect(
+    () => () => {
+      deleteFilter(entityType, workItemEntityID);
+    },
+    [deleteFilter, entityType, workItemEntityID]
+  );
+
+  useEffect(() => {
+    workItemLayoutFilter.configManager.setAreConfigsReady(workItemFiltersConfig.areAllConfigsInitialized);
+    workItemLayoutFilter.configManager.registerAll(workItemFiltersConfig.configs);
+  }, [
+    workItemFiltersConfig.areAllConfigsInitialized,
+    workItemFiltersConfig.configs,
+    workItemLayoutFilter.configManager,
+  ]);
+
+  return <>{typeof children === "function" ? children({ filter: workItemLayoutFilter }) : children}</>;
+});
diff --git a/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx b/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx
new file mode 100644
index 0000000..5e583aa
--- /dev/null
+++ b/apps/web/core/components/work-item-filters/filters-hoc/project-level.tsx
@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo, useState } from "react";
+import { isEqual, cloneDeep } from "lodash-es";
+import { observer } from "mobx-react";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { IProjectView, TWorkItemFilterExpression } from "@plane/types";
+import { EUserProjectRoles, EViewAccess } from "@plane/types";
+// components
+import { removeNillKeys } from "@/components/issues/issue-layouts/utils";
+import { CreateUpdateProjectViewModal } from "@/components/views/modal";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { WorkItemFiltersHOC } from "./base";
+import type { TEnableSaveViewProps, TEnableUpdateViewProps, TSharedWorkItemFiltersHOCProps } from "./shared";
+
+type TProjectLevelWorkItemFiltersHOCProps = TSharedWorkItemFiltersHOCProps & {
+  workspaceSlug: string;
+  projectId: string;
+} & TEnableSaveViewProps &
+  TEnableUpdateViewProps;
+
+export const ProjectLevelWorkItemFiltersHOC = observer(function ProjectLevelWorkItemFiltersHOC(
+  props: TProjectLevelWorkItemFiltersHOCProps
+) {
+  const { children, enableSaveView, enableUpdateView, entityId, initialWorkItemFilters, projectId, workspaceSlug } =
+    props;
+  // states
+  const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
+  const [createViewPayload, setCreateViewPayload] = useState<Partial<IProjectView> | null>(null);
+  // hooks
+  const { getProjectById } = useProject();
+  const { getViewById, updateView } = useProjectView();
+  const { data: currentUser } = useUser();
+  const { allowPermissions } = useUserPermissions();
+  const { getProjectCycleIds } = useCycle();
+  const { getProjectLabelIds } = useLabel();
+  const {
+    project: { getProjectMemberIds },
+  } = useMember();
+  const { getProjectModuleIds } = useModule();
+  const { getProjectStateIds } = useProjectState();
+  // derived values
+  const hasProjectMemberLevelPermissions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+  const projectDetails = getProjectById(projectId);
+  const viewDetails = entityId ? getViewById(entityId) : null;
+  const isViewLocked = viewDetails ? viewDetails?.is_locked : false;
+  const isCurrentUserOwner = viewDetails ? viewDetails.owned_by === currentUser?.id : false;
+  const canCreateView = useMemo(
+    () =>
+      projectDetails?.issue_views_view === true &&
+      enableSaveView &&
+      !props.saveViewOptions?.isDisabled &&
+      hasProjectMemberLevelPermissions,
+    [
+      projectDetails?.issue_views_view,
+      enableSaveView,
+      props.saveViewOptions?.isDisabled,
+      hasProjectMemberLevelPermissions,
+    ]
+  );
+  const canUpdateView = useMemo(
+    () =>
+      enableUpdateView &&
+      !props.updateViewOptions?.isDisabled &&
+      !isViewLocked &&
+      hasProjectMemberLevelPermissions &&
+      isCurrentUserOwner,
+    [
+      enableUpdateView,
+      props.updateViewOptions?.isDisabled,
+      isViewLocked,
+      hasProjectMemberLevelPermissions,
+      isCurrentUserOwner,
+    ]
+  );
+  const createViewLabel = useMemo(() => props.saveViewOptions?.label, [props.saveViewOptions?.label]);
+  const updateViewLabel = useMemo(() => props.updateViewOptions?.label, [props.updateViewOptions?.label]);
+  const hasAdditionalChanges = useMemo(
+    () =>
+      !isEqual(initialWorkItemFilters?.displayFilters, viewDetails?.display_filters) ||
+      !isEqual(
+        removeNillKeys(initialWorkItemFilters?.displayProperties),
+        removeNillKeys(viewDetails?.display_properties)
+      ),
+    [initialWorkItemFilters, viewDetails]
+  );
+
+  const getDefaultViewDetailPayload: () => Partial<IProjectView> = useCallback(
+    () => ({
+      name: viewDetails ? `${viewDetails?.name} 2` : "Untitled",
+      description: viewDetails ? viewDetails.description : "",
+      logo_props: viewDetails ? viewDetails.logo_props : undefined,
+      access: viewDetails ? viewDetails.access : EViewAccess.PUBLIC,
+    }),
+    [viewDetails]
+  );
+
+  const getViewFilterPayload: (filterExpression: TWorkItemFilterExpression) => Partial<IProjectView> = useCallback(
+    (filterExpression: TWorkItemFilterExpression) => ({
+      rich_filters: cloneDeep(filterExpression),
+      display_filters: cloneDeep(initialWorkItemFilters?.displayFilters),
+      display_properties: cloneDeep(initialWorkItemFilters?.displayProperties),
+    }),
+    [initialWorkItemFilters]
+  );
+
+  const handleViewSave = useCallback(
+    (expression: TWorkItemFilterExpression) => {
+      setCreateViewPayload({
+        ...getDefaultViewDetailPayload(),
+        ...getViewFilterPayload(expression),
+      });
+      setIsCreateViewModalOpen(true);
+    },
+    [getDefaultViewDetailPayload, getViewFilterPayload]
+  );
+
+  const handleViewUpdate = useCallback(
+    (filterExpression: TWorkItemFilterExpression) => {
+      if (!viewDetails) {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "We couldn't find the view",
+          message: "The view you're trying to update doesn't exist.",
+        });
+
+        return;
+      }
+
+      updateView(workspaceSlug, projectId, viewDetails.id, {
+        ...getViewFilterPayload(filterExpression),
+      })
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Success!",
+            message: "Your view has been updated successfully.",
+          });
+        })
+        .catch(() => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "Your view could not be updated. Please try again.",
+          });
+        });
+    },
+    [viewDetails, updateView, workspaceSlug, projectId, getViewFilterPayload]
+  );
+
+  const saveViewOptions = useMemo(
+    () => ({
+      label: createViewLabel,
+      isDisabled: !canCreateView,
+      onViewSave: handleViewSave,
+    }),
+    [createViewLabel, canCreateView, handleViewSave]
+  );
+
+  const updateViewOptions = useMemo(
+    () => ({
+      label: updateViewLabel,
+      isDisabled: !canUpdateView,
+      hasAdditionalChanges,
+      onViewUpdate: handleViewUpdate,
+    }),
+    [updateViewLabel, canUpdateView, hasAdditionalChanges, handleViewUpdate]
+  );
+
+  return (
+    <>
+      <CreateUpdateProjectViewModal
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        preLoadedData={createViewPayload}
+        isOpen={isCreateViewModalOpen}
+        onClose={() => {
+          setCreateViewPayload(null);
+          setIsCreateViewModalOpen(false);
+        }}
+      />
+      <WorkItemFiltersHOC
+        {...props}
+        workspaceSlug={workspaceSlug}
+        cycleIds={getProjectCycleIds(projectId) ?? undefined}
+        labelIds={getProjectLabelIds(projectId)}
+        memberIds={getProjectMemberIds(projectId, false) ?? undefined}
+        moduleIds={getProjectModuleIds(projectId) ?? undefined}
+        stateIds={getProjectStateIds(projectId)}
+        saveViewOptions={saveViewOptions}
+        updateViewOptions={updateViewOptions}
+      >
+        {children}
+      </WorkItemFiltersHOC>
+    </>
+  );
+});
diff --git a/apps/web/core/components/work-item-filters/filters-hoc/shared.ts b/apps/web/core/components/work-item-filters/filters-hoc/shared.ts
new file mode 100644
index 0000000..7f598d6
--- /dev/null
+++ b/apps/web/core/components/work-item-filters/filters-hoc/shared.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TSaveViewOptions, TUpdateViewOptions } from "@plane/constants";
+import type { IWorkItemFilterInstance } from "@plane/shared-state";
+import type { EIssuesStoreType, IIssueFilters, TWorkItemFilterExpression, TWorkItemFilterProperty } from "@plane/types";
+
+export type TSharedWorkItemFiltersProps = {
+  entityType: EIssuesStoreType; // entity type (project, cycle, workspace, teamspace, etc)
+  filtersToShowByLayout: TWorkItemFilterProperty[];
+  updateFilters: (updatedFilters: TWorkItemFilterExpression) => void;
+  isTemporary?: boolean;
+  showOnMount?: boolean;
+} & ({ isTemporary: true; entityId?: string } | { isTemporary?: false; entityId: string }); // entity id (project_id, cycle_id, workspace_id, etc)
+
+export type TSharedWorkItemFiltersHOCProps = TSharedWorkItemFiltersProps & {
+  children: React.ReactNode | ((props: { filter: IWorkItemFilterInstance | undefined }) => React.ReactNode);
+  initialWorkItemFilters: IIssueFilters | undefined;
+};
+
+export type TEnableSaveViewProps = {
+  enableSaveView?: boolean;
+  saveViewOptions?: Omit<TSaveViewOptions<TWorkItemFilterExpression>, "onViewSave">;
+};
+
+export type TEnableUpdateViewProps = {
+  enableUpdateView?: boolean;
+  updateViewOptions?: Omit<TUpdateViewOptions<TWorkItemFilterExpression>, "onViewUpdate">;
+};
diff --git a/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx b/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx
new file mode 100644
index 0000000..bf09fd7
--- /dev/null
+++ b/apps/web/core/components/work-item-filters/filters-hoc/workspace-level.tsx
@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo, useState } from "react";
+import { isEqual, cloneDeep } from "lodash-es";
+import { observer } from "mobx-react";
+// plane imports
+import { DEFAULT_GLOBAL_VIEWS_LIST, EUserPermissionsLevel } from "@plane/constants";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import type { IWorkspaceView, TWorkItemFilterExpression } from "@plane/types";
+import { EUserProjectRoles, EViewAccess } from "@plane/types";
+// components
+import { removeNillKeys } from "@/components/issues/issue-layouts/utils";
+import { CreateUpdateWorkspaceViewModal } from "@/components/workspace/views/modal";
+// hooks
+import { useGlobalView } from "@/hooks/store/use-global-view";
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { WorkItemFiltersHOC } from "./base";
+import type { TEnableSaveViewProps, TEnableUpdateViewProps, TSharedWorkItemFiltersHOCProps } from "./shared";
+
+type TWorkspaceLevelWorkItemFiltersHOCProps = TSharedWorkItemFiltersHOCProps & {
+  workspaceSlug: string;
+} & TEnableSaveViewProps &
+  TEnableUpdateViewProps;
+
+export const WorkspaceLevelWorkItemFiltersHOC = observer(function WorkspaceLevelWorkItemFiltersHOC(
+  props: TWorkspaceLevelWorkItemFiltersHOCProps
+) {
+  const { children, enableSaveView, enableUpdateView, entityId, initialWorkItemFilters, workspaceSlug } = props;
+  // states
+  const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
+  const [createViewPayload, setCreateViewPayload] = useState<Partial<IWorkspaceView> | undefined>(undefined);
+  // hooks
+  const { getViewDetailsById, updateGlobalView } = useGlobalView();
+  const { data: currentUser } = useUser();
+  const { allowPermissions } = useUserPermissions();
+  const { joinedProjectIds } = useProject();
+  const {
+    workspace: { getWorkspaceMemberIds },
+  } = useMember();
+  const { getWorkspaceLabelIds } = useLabel();
+  // derived values
+  const hasWorkspaceMemberLevelPermissions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.WORKSPACE,
+    workspaceSlug
+  );
+  const viewDetails = entityId ? getViewDetailsById(entityId) : null;
+  const isDefaultView = typeof entityId === "string" && DEFAULT_GLOBAL_VIEWS_LIST.some((view) => view.key === entityId);
+  const isViewLocked = viewDetails ? viewDetails?.is_locked : false;
+  const isCurrentUserOwner = viewDetails ? viewDetails.owned_by === currentUser?.id : false;
+  const canCreateView = useMemo(
+    () => enableSaveView && !props.saveViewOptions?.isDisabled && hasWorkspaceMemberLevelPermissions,
+    [enableSaveView, props.saveViewOptions?.isDisabled, hasWorkspaceMemberLevelPermissions]
+  );
+  const canUpdateView = useMemo(
+    () =>
+      enableUpdateView &&
+      !isDefaultView &&
+      !props.updateViewOptions?.isDisabled &&
+      !isViewLocked &&
+      hasWorkspaceMemberLevelPermissions &&
+      isCurrentUserOwner,
+    [
+      enableUpdateView,
+      props.updateViewOptions?.isDisabled,
+      isDefaultView,
+      isViewLocked,
+      hasWorkspaceMemberLevelPermissions,
+      isCurrentUserOwner,
+    ]
+  );
+  const createViewLabel = useMemo(() => props.saveViewOptions?.label, [props.saveViewOptions?.label]);
+  const updateViewLabel = useMemo(() => props.updateViewOptions?.label, [props.updateViewOptions?.label]);
+  const hasAdditionalChanges = useMemo(
+    () =>
+      !isEqual(initialWorkItemFilters?.displayFilters, viewDetails?.display_filters) ||
+      !isEqual(
+        removeNillKeys(initialWorkItemFilters?.displayProperties),
+        removeNillKeys(viewDetails?.display_properties)
+      ),
+    [initialWorkItemFilters, viewDetails]
+  );
+
+  const getDefaultViewDetailPayload: () => Partial<IWorkspaceView> = useCallback(
+    () => ({
+      name: viewDetails ? `${viewDetails?.name} 2` : "Untitled",
+      description: viewDetails ? viewDetails.description : "",
+      access: viewDetails ? viewDetails.access : EViewAccess.PUBLIC,
+    }),
+    [viewDetails]
+  );
+
+  const getViewFilterPayload: (filterExpression: TWorkItemFilterExpression) => Partial<IWorkspaceView> = useCallback(
+    (filterExpression: TWorkItemFilterExpression) => ({
+      rich_filters: cloneDeep(filterExpression),
+      display_filters: cloneDeep(initialWorkItemFilters?.displayFilters),
+      display_properties: cloneDeep(initialWorkItemFilters?.displayProperties),
+    }),
+    [initialWorkItemFilters]
+  );
+
+  const handleViewSave = useCallback(
+    (expression: TWorkItemFilterExpression) => {
+      setCreateViewPayload({
+        ...getDefaultViewDetailPayload(),
+        ...getViewFilterPayload(expression),
+      });
+      setIsCreateViewModalOpen(true);
+    },
+    [getDefaultViewDetailPayload, getViewFilterPayload]
+  );
+
+  const handleViewUpdate = useCallback(
+    (filterExpression: TWorkItemFilterExpression) => {
+      if (!viewDetails) {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "We couldn't find the view",
+          message: "The view you're trying to update doesn't exist.",
+        });
+
+        return;
+      }
+
+      updateGlobalView(
+        workspaceSlug,
+        viewDetails.id,
+        {
+          ...getViewFilterPayload(filterExpression),
+        },
+        /* No need to sync filters here as updateFilters already handles it */
+        false
+      )
+        .then(() => {
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Success!",
+            message: "Your view has been updated successfully.",
+          });
+        })
+        .catch(() => {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "Your view could not be updated. Please try again.",
+          });
+        });
+    },
+    [viewDetails, updateGlobalView, workspaceSlug, getViewFilterPayload]
+  );
+
+  const saveViewOptions = useMemo(
+    () => ({
+      label: createViewLabel,
+      isDisabled: !canCreateView,
+      onViewSave: handleViewSave,
+    }),
+    [createViewLabel, canCreateView, handleViewSave]
+  );
+
+  const updateViewOptions = useMemo(
+    () => ({
+      label: updateViewLabel,
+      isDisabled: !canUpdateView,
+      hasAdditionalChanges,
+      onViewUpdate: handleViewUpdate,
+    }),
+    [updateViewLabel, canUpdateView, hasAdditionalChanges, handleViewUpdate]
+  );
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal
+        preLoadedData={createViewPayload}
+        isOpen={isCreateViewModalOpen}
+        onClose={() => {
+          setCreateViewPayload(undefined);
+          setIsCreateViewModalOpen(false);
+        }}
+      />
+      <WorkItemFiltersHOC
+        {...props}
+        memberIds={getWorkspaceMemberIds(workspaceSlug)}
+        labelIds={getWorkspaceLabelIds(workspaceSlug)}
+        projectIds={joinedProjectIds}
+        saveViewOptions={saveViewOptions}
+        updateViewOptions={updateViewOptions}
+      >
+        {children}
+      </WorkItemFiltersHOC>
+    </>
+  );
+});
diff --git a/apps/web/core/components/work-item-filters/filters-row.tsx b/apps/web/core/components/work-item-filters/filters-row.tsx
new file mode 100644
index 0000000..531701a
--- /dev/null
+++ b/apps/web/core/components/work-item-filters/filters-row.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import type { IWorkItemFilterInstance } from "@plane/shared-state";
+import type { TWorkItemFilterExpression, TWorkItemFilterProperty } from "@plane/types";
+// components
+import type { TFiltersRowProps } from "@/components/rich-filters/filters-row";
+import { FiltersRow } from "@/components/rich-filters/filters-row";
+
+type TWorkItemFiltersRowProps = TFiltersRowProps<TWorkItemFilterProperty, TWorkItemFilterExpression> & {
+  filter: IWorkItemFilterInstance;
+};
+
+export const WorkItemFiltersRow = observer(function WorkItemFiltersRow(props: TWorkItemFiltersRowProps) {
+  return <FiltersRow {...props} />;
+});
diff --git a/apps/web/core/components/work-item-filters/filters-toggle.tsx b/apps/web/core/components/work-item-filters/filters-toggle.tsx
new file mode 100644
index 0000000..17021b4
--- /dev/null
+++ b/apps/web/core/components/work-item-filters/filters-toggle.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import type { EIssuesStoreType } from "@plane/types";
+// components
+import { FiltersToggle } from "@/components/rich-filters/filters-toggle";
+// hooks
+import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
+
+type TWorkItemFiltersToggleProps = {
+  entityType: EIssuesStoreType;
+  entityId: string;
+};
+
+export const WorkItemFiltersToggle = observer(function WorkItemFiltersToggle(props: TWorkItemFiltersToggleProps) {
+  const { entityType, entityId } = props;
+  // store hooks
+  const { getFilter } = useWorkItemFilters();
+  // derived values
+  const filter = getFilter(entityType, entityId);
+
+  return <FiltersToggle filter={filter} />;
+});
diff --git a/apps/web/core/components/workflow/index.ts b/apps/web/core/components/workflow/index.ts
new file mode 100644
index 0000000..1d1f5f4
--- /dev/null
+++ b/apps/web/core/components/workflow/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./state-option";
+export * from "./use-workflow-drag-n-drop";
diff --git a/apps/web/core/components/workflow/state-option.tsx b/apps/web/core/components/workflow/state-option.tsx
new file mode 100644
index 0000000..cbf535c
--- /dev/null
+++ b/apps/web/core/components/workflow/state-option.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Combobox } from "@headlessui/react";
+import { TickOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+
+export type TStateOptionProps = {
+  projectId: string | null | undefined;
+  option: {
+    value: string | undefined;
+    query: string;
+    content: React.ReactNode;
+  };
+  selectedValue: string | null | undefined;
+  className?: string;
+  filterAvailableStateIds?: boolean;
+  isForWorkItemCreation?: boolean;
+  alwaysAllowStateChange?: boolean;
+};
+
+export const StateOption = observer(function StateOption(props: TStateOptionProps) {
+  const { option, className = "" } = props;
+
+  return (
+    <Combobox.Option
+      as="li"
+      key={option.value}
+      value={option.value}
+      className={({ active, selected }) =>
+        cn(`${className} ${active ? "bg-layer-transparent-hover" : ""} ${selected ? "text-primary" : "text-secondary"}`)
+      }
+    >
+      {({ selected }) => (
+        <>
+          <span className="flex-grow truncate">{option.content}</span>
+          {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+        </>
+      )}
+    </Combobox.Option>
+  );
+});
diff --git a/apps/web/core/components/workflow/use-workflow-drag-n-drop.ts b/apps/web/core/components/workflow/use-workflow-drag-n-drop.ts
new file mode 100644
index 0000000..4a5be99
--- /dev/null
+++ b/apps/web/core/components/workflow/use-workflow-drag-n-drop.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { TIssueGroupByOptions } from "@plane/types";
+
+export const useWorkFlowFDragNDrop = (
+  groupBy: TIssueGroupByOptions | undefined,
+  subGroupBy?: TIssueGroupByOptions
+) => ({
+  workflowDisabledSource: undefined,
+  isWorkflowDropDisabled: false,
+  getIsWorkflowWorkItemCreationDisabled: (groupId: string, subGroupId?: string) => false,
+  handleWorkFlowState: (
+    sourceGroupId: string,
+    destinationGroupId: string,
+    sourceSubGroupId?: string,
+    destinationSubGroupId?: string
+  ) => {},
+});
diff --git a/apps/web/core/components/workspace-notifications/index.ts b/apps/web/core/components/workspace-notifications/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx b/apps/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
new file mode 100644
index 0000000..935c36a
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { getNumberCount } from "@plane/utils";
+// components
+import { CountChip } from "@/components/common/count-chip";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+
+type TNotificationAppSidebarOption = {
+  workspaceSlug: string;
+};
+
+export const NotificationAppSidebarOption = observer(function NotificationAppSidebarOption(
+  props: TNotificationAppSidebarOption
+) {
+  const { workspaceSlug } = props;
+  // hooks
+  const { unreadNotificationsCount, getUnreadNotificationsCount } = useWorkspaceNotifications();
+
+  useSWR(
+    workspaceSlug ? "WORKSPACE_UNREAD_NOTIFICATION_COUNT" : null,
+    workspaceSlug ? () => getUnreadNotificationsCount(workspaceSlug) : null
+  );
+
+  // derived values
+  const isMentionsEnabled = unreadNotificationsCount.mention_unread_notifications_count > 0 ? true : false;
+  const totalNotifications = isMentionsEnabled
+    ? unreadNotificationsCount.mention_unread_notifications_count
+    : unreadNotificationsCount.total_unread_notifications_count;
+
+  if (totalNotifications <= 0) return <></>;
+
+  return (
+    <div className="ml-auto">
+      <CountChip count={`${isMentionsEnabled ? `@ ` : ``}${getNumberCount(totalNotifications)}`} />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/notification-card/content.ts b/apps/web/core/components/workspace-notifications/notification-card/content.ts
new file mode 100644
index 0000000..443a9f0
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/notification-card/content.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
+import type { TNotificationContentMap } from "@/components/workspace-notifications/sidebar/notification-card/content";
+
+// Additional notification content map for CE (empty - EE extends this)
+export const ADDITIONAL_NOTIFICATION_CONTENT_MAP: TNotificationContentMap = {};
+
+// Fallback action renderer for fields not in the map
+export const renderAdditionalAction = (notificationField: string, verb: string | undefined) => {
+  const baseAction = !["comment", "archived_at"].includes(notificationField) ? verb : "";
+  return `${baseAction} ${replaceUnderscoreIfSnakeCase(notificationField)}`;
+};
+
+// Fallback value renderer for fields not in the map
+export const renderAdditionalValue = (
+  _notificationField: string | undefined,
+  newValue: string | undefined,
+  _oldValue: string | undefined
+) => newValue;
+
+export const shouldShowConnector = (notificationField: string | undefined) =>
+  !["comment", "archived_at", "None", "assignees", "labels", "start_date", "target_date", "parent"].includes(
+    notificationField || ""
+  );
+
+export const shouldRender = (notificationField: string | undefined, verb: string | undefined) => verb !== "deleted";
diff --git a/apps/web/core/components/workspace-notifications/notification-card/root.tsx b/apps/web/core/components/workspace-notifications/notification-card/root.tsx
new file mode 100644
index 0000000..dbb3961
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/notification-card/root.tsx
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { NotificationItem } from "@/components/workspace-notifications/sidebar/notification-card/item";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+
+type TNotificationCardListRoot = {
+  workspaceSlug: string;
+  workspaceId: string;
+};
+
+export const NotificationCardListRoot = observer(function NotificationCardListRoot(props: TNotificationCardListRoot) {
+  const { workspaceSlug, workspaceId } = props;
+  // hooks
+  const { loader, paginationInfo, getNotifications, notificationIdsByWorkspaceId } = useWorkspaceNotifications();
+  const notificationIds = notificationIdsByWorkspaceId(workspaceId);
+  const { t } = useTranslation();
+
+  const getNextNotifications = async () => {
+    try {
+      await getNotifications(workspaceSlug, ENotificationLoader.PAGINATION_LOADER, ENotificationQueryParamType.NEXT);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  if (!workspaceSlug || !workspaceId || !notificationIds) return <></>;
+  return (
+    <div>
+      {notificationIds.map((notificationId: string) => (
+        <NotificationItem key={notificationId} workspaceSlug={workspaceSlug} notificationId={notificationId} />
+      ))}
+
+      {/* fetch next page notifications */}
+      {paginationInfo && paginationInfo?.next_page_results && (
+        <>
+          {loader === ENotificationLoader.PAGINATION_LOADER ? (
+            <div className="flex items-center justify-center py-4 text-13 font-medium">
+              <div className="text-accent-secondary">{t("loading")}...</div>
+            </div>
+          ) : (
+            // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+            <div className="flex items-center justify-center py-4 text-13 font-medium" onClick={getNextNotifications}>
+              <div className="cursor-pointer text-accent-secondary transition-all hover:text-accent-primary">
+                {t("load_more")}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/root.tsx b/apps/web/core/components/workspace-notifications/root.tsx
new file mode 100644
index 0000000..6a90120
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/root.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { cn } from "@plane/utils";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
+import { useNotificationPreview } from "@/hooks/use-notification-preview";
+// local imports
+import { InboxContentRoot } from "../inbox/content";
+
+type NotificationsRootProps = {
+  workspaceSlug?: string;
+};
+
+export const NotificationsRoot = observer(function NotificationsRoot({ workspaceSlug }: NotificationsRootProps) {
+  // hooks
+  const { currentWorkspace } = useWorkspace();
+  const {
+    currentSelectedNotificationId,
+    setCurrentSelectedNotificationId,
+    notificationLiteByNotificationId,
+    notificationIdsByWorkspaceId,
+    getNotifications,
+  } = useWorkspaceNotifications();
+  const { fetchUserProjectInfo } = useUserPermissions();
+  const { isWorkItem, PeekOverviewComponent, setPeekWorkItem } = useNotificationPreview();
+  // derived values
+  const { workspace_slug, project_id, issue_id, is_inbox_issue } =
+    notificationLiteByNotificationId(currentSelectedNotificationId);
+
+  // fetching workspace work item properties
+  useWorkspaceIssueProperties(workspaceSlug);
+
+  // fetch workspace notifications
+  const notificationMutation =
+    currentWorkspace && notificationIdsByWorkspaceId(currentWorkspace.id)
+      ? ENotificationLoader.MUTATION_LOADER
+      : ENotificationLoader.INIT_LOADER;
+  const notificationLoader =
+    currentWorkspace && notificationIdsByWorkspaceId(currentWorkspace.id)
+      ? ENotificationQueryParamType.CURRENT
+      : ENotificationQueryParamType.INIT;
+  useSWR(
+    currentWorkspace?.slug ? `WORKSPACE_NOTIFICATION_${currentWorkspace?.slug}` : null,
+    currentWorkspace?.slug
+      ? () => getNotifications(currentWorkspace?.slug, notificationMutation, notificationLoader)
+      : null
+  );
+
+  // fetching user project member info
+  const { isLoading: projectMemberInfoLoader } = useSWR(
+    workspace_slug && project_id && is_inbox_issue
+      ? `PROJECT_MEMBER_PERMISSION_INFO_${workspace_slug}_${project_id}`
+      : null,
+    workspace_slug && project_id && is_inbox_issue ? () => fetchUserProjectInfo(workspace_slug, project_id) : null
+  );
+
+  const embedRemoveCurrentNotification = useCallback(
+    () => setCurrentSelectedNotificationId(undefined),
+    [setCurrentSelectedNotificationId]
+  );
+
+  // clearing up the selected notifications when unmounting the page
+  useEffect(
+    () => () => {
+      setPeekWorkItem(undefined);
+    },
+    [setCurrentSelectedNotificationId, setPeekWorkItem]
+  );
+
+  return (
+    <div className={cn("h-full w-full overflow-hidden", isWorkItem && "overflow-y-auto")}>
+      {!currentSelectedNotificationId ? (
+        <div className="flex size-full items-center justify-center">
+          <EmptyStateCompact assetKey="unknown" assetClassName="size-20" />
+        </div>
+      ) : (
+        <>
+          {is_inbox_issue === true && workspace_slug && project_id && issue_id ? (
+            <>
+              {projectMemberInfoLoader ? (
+                <div className="flex h-full w-full items-center justify-center">
+                  <LogoSpinner />
+                </div>
+              ) : (
+                <InboxContentRoot
+                  setIsMobileSidebar={() => {}}
+                  isMobileSidebar={false}
+                  workspaceSlug={workspace_slug}
+                  projectId={project_id}
+                  inboxIssueId={issue_id}
+                  isNotificationEmbed
+                  embedRemoveCurrentNotification={embedRemoveCurrentNotification}
+                />
+              )}
+            </>
+          ) : (
+            <PeekOverviewComponent embedIssue embedRemoveCurrentNotification={embedRemoveCurrentNotification} />
+          )}
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx b/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
new file mode 100644
index 0000000..aed3b4a
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { ENotificationTab } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateCompact } from "@plane/propel/empty-state";
+
+type TNotificationEmptyStateProps = {
+  currentNotificationTab: ENotificationTab;
+};
+
+export const NotificationEmptyState = observer(function NotificationEmptyState({
+  currentNotificationTab,
+}: TNotificationEmptyStateProps) {
+  // plane imports
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <EmptyStateCompact
+        assetKey="inbox"
+        assetClassName="size-24"
+        title={
+          currentNotificationTab === ENotificationTab.ALL
+            ? t("workspace_empty_state.inbox_sidebar_all.title")
+            : t("workspace_empty_state.inbox_sidebar_mentions.title")
+        }
+        className="max-w-56"
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
new file mode 100644
index 0000000..71198f6
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { PillButton } from "@makeplane/propel/components/pill";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { Header, EHeaderVariant } from "@plane/ui";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+
+type TAppliedFilters = {
+  workspaceSlug: string;
+};
+
+export const AppliedFilters = observer(function AppliedFilters(props: TAppliedFilters) {
+  const { workspaceSlug } = props;
+  // hooks
+  const { filters, updateFilters } = useWorkspaceNotifications();
+  const { t } = useTranslation();
+  // derived values
+  const isFiltersEnabled = Object.entries(filters.type || {}).some(([, value]) => value);
+
+  const handleFilterTypeChange = (filterType: ENotificationFilterType, filterValue: boolean) =>
+    updateFilters("type", {
+      ...filters.type,
+      [filterType]: filterValue,
+    });
+
+  const handleClearFilters = () => {
+    updateFilters("type", {
+      [ENotificationFilterType.ASSIGNED]: false,
+      [ENotificationFilterType.CREATED]: false,
+      [ENotificationFilterType.SUBSCRIBED]: false,
+    });
+  };
+
+  if (!isFiltersEnabled || !workspaceSlug) return <></>;
+  return (
+    <Header variant={EHeaderVariant.TERNARY}>
+      <Header.LeftItem className="w-full">
+        {FILTER_TYPE_OPTIONS.map((filter) => {
+          const isSelected = filters?.type?.[filter?.value] || false;
+          if (!isSelected) return <></>;
+          return (
+            <PillButton
+              key={filter.value}
+              type="button"
+              size="md"
+              variant="outline"
+              label={t(filter.i18n_label)}
+              endIcon={<CloseOutline className="h-3 w-3" />}
+              onClick={() => handleFilterTypeChange(filter?.value, !isSelected)}
+            />
+          );
+        })}
+        <PillButton
+          type="button"
+          size="md"
+          variant="outline"
+          label={t("common.clear_all")}
+          endIcon={<CloseOutline height={12} width={12} />}
+          onClick={handleClearFilters}
+        />
+      </Header.LeftItem>
+    </Header>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/index.ts b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
new file mode 100644
index 0000000..44305f1
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import type { ENotificationFilterType } from "@plane/constants";
+import { TickOutline } from "@makeplane/propel/icons";
+// plane imports
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+
+export const NotificationFilterOptionItem = observer(function NotificationFilterOptionItem(props: {
+  label: string;
+  value: ENotificationFilterType;
+}) {
+  const { value, label } = props;
+  // hooks
+  const { filters, updateFilters } = useWorkspaceNotifications();
+
+  const handleFilterTypeChange = (filterType: ENotificationFilterType, filterValue: boolean) =>
+    updateFilters("type", {
+      ...filters.type,
+      [filterType]: filterValue,
+    });
+
+  // derived values
+  const isSelected = filters?.type?.[value] || false;
+
+  return (
+    <div
+      key={value}
+      className="flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 transition-all hover:bg-layer-1"
+      onClick={() => handleFilterTypeChange(value, !isSelected)}
+    >
+      <div
+        className={cn("flex h-3 w-3 flex-shrink-0 items-center justify-center rounded-xs transition-all", {
+          "bg-accent-primary text-on-color": isSelected,
+          "bg-surface-2": !isSelected,
+        })}
+      >
+        {isSelected && <TickOutline className="h-2.5 w-2.5" />}
+      </div>
+      <div
+        className={cn("text-body-xs-medium whitespace-nowrap", {
+          "text-primary": isSelected,
+          "text-secondary": !isSelected,
+        })}
+      >
+        {label}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
new file mode 100644
index 0000000..789827c
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { FilterOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { ENotificationFilterType } from "@plane/constants";
+import { FILTER_TYPE_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { PopoverMenu } from "@plane/ui";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { NotificationFilterOptionItem } from "./menu-option-item";
+import { IconButton } from "@plane/propel/icon-button";
+
+export const NotificationFilter = observer(function NotificationFilter() {
+  // hooks
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  const translatedFilterTypeOptions = FILTER_TYPE_OPTIONS.map((filter) => ({
+    ...filter,
+    label: t(filter.i18n_label),
+  }));
+
+  return (
+    <PopoverMenu
+      data={translatedFilterTypeOptions}
+      button={
+        <Tooltip label={t("notification.options.filters")} side="bottom" disabled={isMobile}>
+          <IconButton size="base" variant="ghost" icon={FilterOutline} />
+        </Tooltip>
+      }
+      keyExtractor={(item: { label: string; value: ENotificationFilterType }) => item.value}
+      render={(item) => <NotificationFilterOptionItem {...item} />}
+    />
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/index.ts b/apps/web/core/components/workspace-notifications/sidebar/header/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/index.ts b/apps/web/core/components/workspace-notifications/sidebar/header/options/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/index.ts b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
new file mode 100644
index 0000000..cf38253
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// components
+import { cn } from "@plane/utils";
+// local imports
+import type { TPopoverMenuOptions } from "./root";
+
+export const NotificationMenuOptionItem = observer(function NotificationMenuOptionItem(props: TPopoverMenuOptions) {
+  const { type, label = "", isActive, prependIcon, appendIcon, onClick } = props;
+
+  if (type === "menu-item")
+    return (
+      <div
+        className="mx-2 flex cursor-pointer items-center gap-2 rounded-xs p-1 px-2 transition-all hover:bg-layer-1"
+        onClick={() => onClick && onClick()}
+      >
+        {prependIcon && prependIcon}
+        <div
+          className={cn("text-body-xs-medium whitespace-nowrap", {
+            "text-primary": isActive,
+            "text-secondary": !isActive,
+          })}
+        >
+          {label}
+        </div>
+        {appendIcon && <div className="ml-auto">{appendIcon}</div>}
+      </div>
+    );
+
+  return <div className="border-b border-subtle" />;
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
new file mode 100644
index 0000000..39cd2de
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import {
+  ArchiveOutline,
+  ClockOutline,
+  MoreVerticalOutline,
+  TickCircleOutline,
+  TickOutline,
+} from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+// plane imports
+import type { TNotificationFilter } from "@plane/types";
+import { PopoverMenu } from "@plane/ui";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+// local imports
+import { NotificationMenuOptionItem } from "./menu-item";
+import { IconButton } from "@plane/propel/icon-button";
+
+export type TPopoverMenuOptions = {
+  key: string;
+  type: string;
+  label?: string | undefined;
+  isActive?: boolean | undefined;
+  prependIcon?: ReactNode | undefined;
+  appendIcon?: ReactNode | undefined;
+  onClick?: (() => void) | undefined;
+};
+
+export const NotificationHeaderMenuOption = observer(function NotificationHeaderMenuOption() {
+  // hooks
+  const { filters, updateFilters, updateBulkFilters } = useWorkspaceNotifications();
+  const { t } = useTranslation();
+
+  const handleFilterChange = (filterType: keyof TNotificationFilter, filterValue: boolean) =>
+    updateFilters(filterType, filterValue);
+
+  const handleBulkFilterChange = (filter: Partial<TNotificationFilter>) => updateBulkFilters(filter);
+
+  const popoverMenuOptions: TPopoverMenuOptions[] = [
+    {
+      key: "menu-unread",
+      type: "menu-item",
+      label: t("notification.options.show_unread"),
+      isActive: filters?.read,
+      prependIcon: <TickCircleOutline className="h-3 w-3 flex-shrink-0" />,
+      appendIcon: filters?.read ? <TickOutline className="h-3 w-3" /> : undefined,
+      onClick: () => handleFilterChange("read", !filters?.read),
+    },
+    {
+      key: "menu-archived",
+      type: "menu-item",
+      label: t("notification.options.show_archived"),
+      isActive: filters?.archived,
+      prependIcon: <ArchiveOutline className="h-3 w-3 flex-shrink-0" />,
+      appendIcon: filters?.archived ? <TickOutline className="h-3 w-3" /> : undefined,
+      onClick: () =>
+        handleBulkFilterChange({
+          archived: !filters?.archived,
+          snoozed: false,
+        }),
+    },
+    {
+      key: "menu-snoozed",
+      type: "menu-item",
+      label: t("notification.options.show_snoozed"),
+      isActive: filters?.snoozed,
+      prependIcon: <ClockOutline className="h-3 w-3 flex-shrink-0" />,
+      appendIcon: filters?.snoozed ? <TickOutline className="h-3 w-3" /> : undefined,
+      onClick: () =>
+        handleBulkFilterChange({
+          snoozed: !filters?.snoozed,
+          archived: false,
+        }),
+    },
+  ];
+
+  return (
+    <PopoverMenu
+      data={popoverMenuOptions}
+      button={<IconButton size="base" variant="ghost" icon={MoreVerticalOutline} />}
+      keyExtractor={(item: TPopoverMenuOptions) => item.key}
+      panelClassName="p-0 py-2 rounded-md border border-subtle bg-surface-1 space-y-1"
+      render={(item: TPopoverMenuOptions) => <NotificationMenuOptionItem {...item} />}
+    />
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
new file mode 100644
index 0000000..02784ee
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { CheckDoneOutline, RefreshOutline } from "@makeplane/propel/icons";
+// plane imports
+import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Spinner } from "@plane/ui";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { NotificationFilter } from "../../filters/menu";
+import { NotificationHeaderMenuOption } from "./menu-option";
+import { IconButton } from "@plane/propel/icon-button";
+
+type TNotificationSidebarHeaderOptions = {
+  workspaceSlug: string;
+};
+
+export const NotificationSidebarHeaderOptions = observer(function NotificationSidebarHeaderOptions(
+  props: TNotificationSidebarHeaderOptions
+) {
+  const { workspaceSlug } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+  const { loader, getNotifications, markAllNotificationsAsRead } = useWorkspaceNotifications();
+  const { t } = useTranslation();
+
+  const refreshNotifications = async () => {
+    if (loader) return;
+    try {
+      await getNotifications(workspaceSlug, ENotificationLoader.MUTATION_LOADER, ENotificationQueryParamType.CURRENT);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleMarkAllNotificationsAsRead = async () => {
+    // NOTE: We are using loader to prevent continues request when we are making all the notification to read
+    if (loader) return;
+    try {
+      await markAllNotificationsAsRead(workspaceSlug);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div className="relative flex items-center justify-center gap-2 text-body-xs-medium">
+      {/* mark all notifications as read*/}
+      <Tooltip label={t("notification.options.mark_all_as_read")} side="bottom" disabled={isMobile}>
+        <IconButton
+          size="base"
+          variant="ghost"
+          icon={loader === ENotificationLoader.MARK_ALL_AS_READY ? Spinner : CheckDoneOutline}
+          onClick={() => {
+            handleMarkAllNotificationsAsRead();
+          }}
+        />
+      </Tooltip>
+
+      {/* refetch current notifications */}
+      <Tooltip label={t("notification.options.refresh")} side="bottom" disabled={isMobile}>
+        <IconButton
+          size="base"
+          variant="ghost"
+          icon={RefreshOutline}
+          className={loader === ENotificationLoader.MUTATION_LOADER ? "animate-spin" : ""}
+          onClick={refreshNotifications}
+        />
+      </Tooltip>
+
+      {/* notification filters */}
+      <NotificationFilter />
+
+      {/* notification menu options */}
+      <NotificationHeaderMenuOption />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
new file mode 100644
index 0000000..c2440ea
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { InboxOutline } from "@makeplane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+// local imports
+import { NotificationSidebarHeaderOptions } from "./options";
+
+type TNotificationSidebarHeader = {
+  workspaceSlug: string;
+};
+
+export const NotificationSidebarHeader = observer(function NotificationSidebarHeader(
+  props: TNotificationSidebarHeader
+) {
+  const { workspaceSlug } = props;
+  const { t } = useTranslation();
+
+  if (!workspaceSlug) return <></>;
+  return (
+    <Header className="my-auto bg-surface-1">
+      <Header.LeftItem>
+        <Breadcrumbs>
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={t("notification.label")}
+                icon={<InboxOutline className="h-4 w-4 text-primary" />}
+                disableTooltip
+              />
+            }
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+      <Header.RightItem>
+        <NotificationSidebarHeaderOptions workspaceSlug={workspaceSlug} />
+      </Header.RightItem>
+    </Header>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/index.ts b/apps/web/core/components/workspace-notifications/sidebar/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/loader.tsx b/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
new file mode 100644
index 0000000..eaf3bf5
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+
+export function NotificationsLoader() {
+  return (
+    <div className="animate-pulse divide-y divide-subtle overflow-hidden">
+      {range(8).map((i) => (
+        <div key={i} className="flex w-full items-center gap-4 p-3">
+          <span className="min-h-12 min-w-12 rounded-full bg-layer-1" />
+          <div className="flex w-full flex-col gap-2.5">
+            <span className="h-5 w-36 rounded-xs bg-layer-1" />
+            <div className="flex w-full items-center justify-between gap-2">
+              <span className="h-5 w-28 rounded-xs bg-layer-1" />
+              <span className="h-5 w-16 rounded-xs bg-layer-1" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx
new file mode 100644
index 0000000..593acff
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/content.tsx
@@ -0,0 +1,234 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+// plane imports
+import type { TNotification } from "@plane/types";
+import {
+  convertMinutesToHoursMinutesString,
+  renderFormattedDate,
+  sanitizeCommentForNotification,
+  stripAndTruncateHTML,
+} from "@plane/utils";
+// components
+import { LiteTextEditor } from "@/components/editor/lite-text";
+import {
+  ADDITIONAL_NOTIFICATION_CONTENT_MAP,
+  renderAdditionalAction,
+  renderAdditionalValue,
+  shouldShowConnector,
+} from "../../notification-card/content";
+
+// Types
+export type TNotificationFieldData = {
+  field: string | undefined;
+  newValue: string | undefined;
+  oldValue: string | undefined;
+  verb: string | undefined;
+};
+
+export type TNotificationContentDetails = {
+  action?: ReactNode;
+  value?: ReactNode;
+  showConnector?: boolean;
+};
+
+export type TNotificationContentHandler = (data: TNotificationFieldData) => TNotificationContentDetails | null;
+
+export type TNotificationContentMap = {
+  [key: string]: TNotificationContentHandler;
+};
+
+// Base notification content map for core fields
+export const BASE_NOTIFICATION_CONTENT_MAP: TNotificationContentMap = {
+  duplicate: ({ verb }) => ({
+    action:
+      verb === "created"
+        ? "marked that this work item is a duplicate of"
+        : "marked that this work item is not a duplicate",
+    value: null,
+    showConnector: false,
+  }),
+  assignees: ({ newValue, oldValue }) => ({
+    action: newValue !== "" ? "added assignee" : "removed assignee",
+    value: newValue !== "" ? newValue : oldValue,
+    showConnector: false,
+  }),
+  start_date: ({ newValue }) => ({
+    action: newValue !== "" ? "set start date" : "removed the start date",
+    value: renderFormattedDate(newValue),
+    showConnector: false,
+  }),
+  target_date: ({ newValue }) => ({
+    action: newValue !== "" ? "set due date" : "removed the due date",
+    value: renderFormattedDate(newValue),
+    showConnector: false,
+  }),
+  labels: ({ newValue, oldValue }) => ({
+    action: newValue !== "" ? "added label" : "removed label",
+    value: newValue !== "" ? newValue : oldValue,
+    showConnector: false,
+  }),
+  parent: ({ newValue, oldValue }) => ({
+    action: newValue !== "" ? "added parent" : "removed parent",
+    value: newValue !== "" ? newValue : oldValue,
+    showConnector: false,
+  }),
+  relates_to: () => ({
+    action: "marked that this work item is related to",
+    value: null,
+    showConnector: true,
+  }),
+  comment: ({ newValue }, renderCommentBox?: boolean) => ({
+    action: "commented",
+    value: renderCommentBox ? null : sanitizeCommentForNotification(newValue),
+    showConnector: false,
+  }),
+  archived_at: ({ newValue }) => ({
+    action: newValue === "restore" ? "restored the work item" : "archived the work item",
+    value: null,
+    showConnector: false,
+  }),
+  None: () => ({
+    action: null,
+    value: "the work item and assigned it to you.",
+    showConnector: false,
+  }),
+  // Fields below only define value - action falls through to default handler
+  attachment: () => ({
+    action: null,
+    value: "the work item",
+    showConnector: true,
+  }),
+  description: ({ newValue }) => ({
+    value: stripAndTruncateHTML(newValue || "", 55),
+    showConnector: true,
+  }),
+  estimate_time: ({ newValue, oldValue }) => ({
+    value:
+      newValue !== ""
+        ? convertMinutesToHoursMinutesString(Number(newValue))
+        : convertMinutesToHoursMinutesString(Number(oldValue)),
+    showConnector: true,
+  }),
+};
+
+// Helper to get content details from maps
+const getNotificationContentDetails = (
+  fieldData: TNotificationFieldData,
+  renderCommentBox?: boolean
+): TNotificationContentDetails | null => {
+  const { field } = fieldData;
+  if (!field) return null;
+
+  // Check base map first
+  const baseHandler = BASE_NOTIFICATION_CONTENT_MAP[field];
+  if (baseHandler) {
+    // Special case for comment field that needs renderCommentBox
+    if (field === "comment") {
+      return (baseHandler as (data: TNotificationFieldData, renderCommentBox?: boolean) => TNotificationContentDetails)(
+        fieldData,
+        renderCommentBox
+      );
+    }
+    return baseHandler(fieldData);
+  }
+
+  // Check additional map from plane-web (EE extensions)
+  const additionalHandler = ADDITIONAL_NOTIFICATION_CONTENT_MAP[field];
+  if (additionalHandler) {
+    return additionalHandler(fieldData);
+  }
+
+  return null;
+};
+
+export function NotificationContent({
+  notification,
+  workspaceId,
+  workspaceSlug,
+  projectId,
+  renderCommentBox = false,
+}: {
+  notification: TNotification;
+  workspaceId: string;
+  workspaceSlug: string;
+  projectId: string;
+  renderCommentBox?: boolean;
+}) {
+  const { data, triggered_by_details: triggeredBy } = notification;
+  const notificationField = data?.issue_activity.field;
+  const newValue = data?.issue_activity.new_value;
+  const oldValue = data?.issue_activity.old_value;
+  const verb = data?.issue_activity.verb;
+
+  const fieldData: TNotificationFieldData = {
+    field: notificationField,
+    newValue,
+    oldValue,
+    verb,
+  };
+
+  const renderTriggerName = () => (
+    <span className="font-medium text-primary">
+      {triggeredBy?.is_bot ? triggeredBy.first_name : triggeredBy?.display_name}{" "}
+    </span>
+  );
+
+  // Get content details from map
+  const contentDetails = getNotificationContentDetails(fieldData, renderCommentBox);
+
+  // Render action - use map value if defined, otherwise fall through to default handler
+  // Note: undefined = fall through to default, null = explicitly no action text
+  const renderAction = (): ReactNode => {
+    if (!notificationField) return "";
+    // Check if action is explicitly defined in map (including null)
+    if (contentDetails && "action" in contentDetails) return contentDetails.action;
+    // Fallback to default action handler for fields not in map or without action defined
+    return renderAdditionalAction(notificationField, verb);
+  };
+
+  // Render value - use map value if defined, otherwise fall through to default handler
+  const renderValue = (): ReactNode => {
+    // Check if value is explicitly defined in map
+    if (contentDetails && "value" in contentDetails) return contentDetails.value;
+    // Fallback to default value handler for fields not in map or without value defined
+    return renderAdditionalValue(notificationField, newValue, oldValue);
+  };
+
+  // Determine if connector should be shown - prefer map value, fallback to function
+  const showConnector =
+    contentDetails?.showConnector !== undefined ? contentDetails.showConnector : shouldShowConnector(notificationField);
+
+  return (
+    <>
+      {renderTriggerName()}
+      <span className="text-tertiary">{renderAction()} </span>
+      {verb !== "deleted" && (
+        <>
+          {showConnector && <span className="text-tertiary">to </span>}
+          <span className="font-medium text-primary">{renderValue()}</span>
+          {notificationField === "comment" && renderCommentBox && (
+            <div className="origin-left scale-75">
+              <LiteTextEditor
+                editable={false}
+                id=""
+                initialValue={newValue ?? ""}
+                workspaceId={workspaceId}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                displayConfig={{
+                  fontSize: "small-font",
+                }}
+              />
+            </div>
+          )}
+          {"."}
+        </>
+      )}
+    </>
+  );
+}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
new file mode 100644
index 0000000..b00e18a
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { ClockOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Row } from "@plane/ui";
+import { cn, calculateTimeAgo, renderFormattedDate, renderFormattedTime, getFileURL } from "@plane/utils";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+import { useNotification } from "@/hooks/store/notifications/use-notification";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// local imports
+import { NotificationContent } from "./content";
+import { NotificationOption } from "./options";
+
+type TNotificationItem = {
+  workspaceSlug: string;
+  notificationId: string;
+};
+
+export const NotificationItem = observer(function NotificationItem(props: TNotificationItem) {
+  const { workspaceSlug, notificationId } = props;
+  // hooks
+  const { currentSelectedNotificationId, setCurrentSelectedNotificationId } = useWorkspaceNotifications();
+  const { asJson: notification, markNotificationAsRead } = useNotification(notificationId);
+  const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
+  const { getWorkspaceBySlug } = useWorkspace();
+  // states
+  const [isSnoozeStateModalOpen, setIsSnoozeStateModalOpen] = useState(false);
+  const [customSnoozeModal, setCustomSnoozeModal] = useState(false);
+
+  // derived values
+  const projectId = notification?.project || undefined;
+  const issueId = notification?.data?.issue?.id || undefined;
+  const workspace = getWorkspaceBySlug(workspaceSlug);
+
+  const notificationField = notification?.data?.issue_activity.field || undefined;
+  const notificationTriggeredBy = notification.triggered_by_details || undefined;
+
+  const handleNotificationIssuePeekOverview = async () => {
+    if (workspaceSlug && projectId && issueId && !isSnoozeStateModalOpen && !customSnoozeModal) {
+      setPeekIssue(undefined);
+      setCurrentSelectedNotificationId(notificationId);
+
+      // make the notification as read
+      if (notification.read_at === null) {
+        try {
+          await markNotificationAsRead(workspaceSlug);
+        } catch (error) {
+          console.error(error);
+        }
+      }
+
+      if (notification?.is_inbox_issue === false) {
+        if (!getIsIssuePeeked(issueId)) {
+          setPeekIssue({ workspaceSlug, projectId, issueId });
+        }
+      }
+    }
+  };
+
+  if (!workspaceSlug || !notificationId || !notification?.id || !notificationField || !workspace?.id || !projectId)
+    return <></>;
+
+  return (
+    <Row
+      className={cn(
+        "group relative flex cursor-pointer items-center gap-2 border-b border-subtle py-4 transition-all",
+        {
+          "bg-layer-1/30": currentSelectedNotificationId === notification?.id,
+          "bg-accent-primary/5": notification.read_at === null,
+        }
+      )}
+      onClick={handleNotificationIssuePeekOverview}
+    >
+      {notification.read_at === null && (
+        <div className="absolute top-[50%] left-2 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-accent-primary" />
+      )}
+
+      <div className="relative flex w-full gap-2">
+        <div className="relative flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-layer-1">
+          {notificationTriggeredBy && (
+            <Avatar
+              alt={notificationTriggeredBy.display_name || notificationTriggeredBy?.first_name}
+              fallback={(notificationTriggeredBy.display_name ||
+                notificationTriggeredBy?.first_name)?.[0]?.toUpperCase()}
+              src={getFileURL(notificationTriggeredBy.avatar_url)}
+              size="xl"
+            />
+          )}
+        </div>
+
+        <div className="-mt-2 w-full space-y-1">
+          <div className="relative flex h-8 items-center gap-3">
+            <div className="line-clamp-1 w-full truncate overflow-hidden text-body-xs-medium break-all whitespace-normal text-primary">
+              <NotificationContent
+                notification={notification}
+                workspaceId={workspace.id}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+              />
+            </div>
+            <NotificationOption
+              workspaceSlug={workspaceSlug}
+              notificationId={notification?.id}
+              isSnoozeStateModalOpen={isSnoozeStateModalOpen}
+              setIsSnoozeStateModalOpen={setIsSnoozeStateModalOpen}
+              customSnoozeModal={customSnoozeModal}
+              setCustomSnoozeModal={setCustomSnoozeModal}
+            />
+          </div>
+
+          <div className="relative flex items-center gap-3 text-caption-sm-regular text-secondary">
+            <div className="line-clamp-1 w-full truncate overflow-hidden break-words whitespace-normal">
+              {notification?.data?.issue?.identifier}-{notification?.data?.issue?.sequence_id} 
+              {notification?.data?.issue?.name}
+            </div>
+            <div className="flex-shrink-0">
+              {notification?.snoozed_till ? (
+                <p className="flex flex-shrink-0 items-center justify-end gap-x-1 text-tertiary">
+                  <ClockOutline className="h-4 w-4" />
+                  <span>
+                    Till {renderFormattedDate(notification.snoozed_till)}, 
+                    {renderFormattedTime(notification.snoozed_till, "12-hour")}
+                  </span>
+                </p>
+              ) : (
+                <p className="mt-auto flex-shrink-0 text-tertiary">
+                  {notification.created_at && calculateTimeAgo(notification.created_at)}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Row>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
new file mode 100644
index 0000000..5a43666
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { ArchiveOutline, RestoreOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// store
+import type { INotification } from "@/store/notifications/notification";
+// local imports
+import { NotificationItemOptionButton } from "./button";
+
+type TNotificationItemArchiveOption = {
+  workspaceSlug: string;
+  notification: INotification;
+};
+
+export const NotificationItemArchiveOption = observer(function NotificationItemArchiveOption(
+  props: TNotificationItemArchiveOption
+) {
+  const { workspaceSlug, notification } = props;
+  // hooks
+  const { asJson: data, archiveNotification, unArchiveNotification } = notification;
+  const { t } = useTranslation();
+
+  const handleNotificationUpdate = async () => {
+    try {
+      const request = data.archived_at ? unArchiveNotification : archiveNotification;
+      await request(workspaceSlug);
+      setToast({
+        title: data.archived_at ? t("notification.toasts.unarchived") : t("notification.toasts.archived"),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return (
+    <NotificationItemOptionButton
+      tooltipContent={
+        data.archived_at ? t("notification.options.mark_unarchive") : t("notification.options.mark_archive")
+      }
+      callBack={handleNotificationUpdate}
+    >
+      {data.archived_at ? (
+        <RestoreOutline className="h-3 w-3 text-tertiary" />
+      ) : (
+        <ArchiveOutline className="h-3 w-3 text-tertiary" />
+      )}
+    </NotificationItemOptionButton>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx
new file mode 100644
index 0000000..fcc2d41
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/button.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type TNotificationItemOptionButton = {
+  tooltipContent?: string;
+  buttonClassName?: string;
+  callBack: () => void;
+  children: ReactNode;
+};
+
+export function NotificationItemOptionButton(props: TNotificationItemOptionButton) {
+  const { tooltipContent = "", buttonClassName = "", children, callBack } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <Tooltip label={tooltipContent} layout="stacked" disabled={isMobile}>
+      <button
+        type="button"
+        className={cn(
+          "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs bg-layer-1 outline-none hover:bg-surface-2",
+          buttonClassName
+        )}
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          callBack && callBack();
+        }}
+      >
+        {children}
+      </button>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/index.ts b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/index.ts
new file mode 100644
index 0000000..173eda6
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+
+export * from "./read";
+export * from "./archive";
+export * from "./snooze";
+
+export * from "./button";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
new file mode 100644
index 0000000..f2f7f9c
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { ChatOutline } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// store
+import type { INotification } from "@/store/notifications/notification";
+// local imports
+import { NotificationItemOptionButton } from "./button";
+
+type TNotificationItemReadOption = {
+  workspaceSlug: string;
+  notification: INotification;
+};
+
+export const NotificationItemReadOption = observer(function NotificationItemReadOption(
+  props: TNotificationItemReadOption
+) {
+  const { workspaceSlug, notification } = props;
+  // hooks
+  const { asJson: data, markNotificationAsRead, markNotificationAsUnRead } = notification;
+  const { t } = useTranslation();
+
+  const handleNotificationUpdate = async () => {
+    try {
+      const request = data.read_at ? markNotificationAsUnRead : markNotificationAsRead;
+      await request(workspaceSlug);
+      setToast({
+        title: data.read_at ? t("notification.toasts.unread") : t("notification.toasts.read"),
+        type: TOAST_TYPE.SUCCESS,
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return (
+    <NotificationItemOptionButton
+      tooltipContent={data.read_at ? t("notification.options.mark_unread") : t("notification.options.mark_read")}
+      callBack={handleNotificationUpdate}
+    >
+      <ChatOutline className="h-3 w-3 text-tertiary" />
+    </NotificationItemOptionButton>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx
new file mode 100644
index 0000000..1b66566
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/root.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, SetStateAction } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { cn } from "@plane/utils";
+// hooks
+import { useNotification } from "@/hooks/store/notifications/use-notification";
+// local imports
+import { NotificationItemArchiveOption } from "./archive";
+import { NotificationItemReadOption } from "./read";
+import { NotificationItemSnoozeOption } from "./snooze";
+
+type TNotificationOption = {
+  workspaceSlug: string;
+  notificationId: string;
+  isSnoozeStateModalOpen: boolean;
+  setIsSnoozeStateModalOpen: Dispatch<SetStateAction<boolean>>;
+  customSnoozeModal: boolean;
+  setCustomSnoozeModal: Dispatch<SetStateAction<boolean>>;
+};
+
+export const NotificationOption = observer(function NotificationOption(props: TNotificationOption) {
+  const {
+    workspaceSlug,
+    notificationId,
+    isSnoozeStateModalOpen,
+    setIsSnoozeStateModalOpen,
+    customSnoozeModal,
+    setCustomSnoozeModal,
+  } = props;
+  // hooks
+  const notification = useNotification(notificationId);
+
+  return (
+    <div
+      className={cn("hidden flex-shrink-0 text-body-xs-medium group-hover:block", {
+        block: isSnoozeStateModalOpen,
+      })}
+    >
+      <div className="relative flex items-center justify-center gap-2">
+        {/* read */}
+        <NotificationItemReadOption workspaceSlug={workspaceSlug} notification={notification} />
+
+        {/* archive */}
+        <NotificationItemArchiveOption workspaceSlug={workspaceSlug} notification={notification} />
+
+        {/* snooze notification */}
+        <NotificationItemSnoozeOption
+          workspaceSlug={workspaceSlug}
+          notification={notification}
+          setIsSnoozeStateModalOpen={setIsSnoozeStateModalOpen}
+          customSnoozeModal={customSnoozeModal}
+          setCustomSnoozeModal={setCustomSnoozeModal}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/index.ts b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/index.ts
new file mode 100644
index 0000000..b5ea89d
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+export * from "./modal";
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
new file mode 100644
index 0000000..b1eadc5
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useParams } from "next/navigation";
+import { useForm, Controller } from "react-hook-form";
+// plane imports
+import { allTimeIn30MinutesInterval12HoursFormat } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { CustomSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// components
+import { getDate, cn } from "@plane/utils";
+import { DateDropdown } from "@/components/dropdowns/date";
+
+type TNotificationSnoozeModal = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (dateTime?: Date) => Promise<void>;
+};
+
+type FormValues = {
+  time: string | undefined;
+  date: Date | undefined;
+  period: "AM" | "PM";
+};
+
+const defaultValues: FormValues = {
+  time: undefined,
+  date: undefined,
+  period: "AM",
+};
+
+const timeStamps = allTimeIn30MinutesInterval12HoursFormat;
+
+export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
+  const { isOpen, onClose, onSubmit: handleSubmitSnooze } = props;
+
+  const { workspaceSlug } = useParams();
+
+  const {
+    formState: { isSubmitting },
+    reset,
+    handleSubmit,
+    control,
+    watch,
+    setValue,
+  } = useForm({
+    defaultValues,
+  });
+
+  const handleClose = () => {
+    // This is a workaround to fix the issue of the Notification popover modal close on closing this modal
+    const closeTimeout = setTimeout(() => {
+      onClose();
+      clearTimeout(closeTimeout);
+    }, 50);
+
+    const timeout = setTimeout(() => {
+      reset({ ...defaultValues });
+      clearTimeout(timeout);
+    }, 500);
+  };
+
+  const getTimeStamp = () => {
+    const today = new Date();
+    const formDataDate = watch("date");
+
+    if (!formDataDate) return timeStamps;
+
+    const isToday = today.toDateString() === getDate(formDataDate)?.toDateString();
+
+    if (!isToday) return timeStamps;
+
+    const hours = today.getHours();
+    const minutes = today.getMinutes();
+
+    return timeStamps.filter((optionTime) => {
+      let optionHours = parseInt(optionTime.value.split(":")[0]);
+      const optionMinutes = parseInt(optionTime.value.split(":")[1]);
+
+      const period = watch("period");
+
+      if (period === "PM" && optionHours !== 12) optionHours += 12;
+
+      if (optionHours < hours) return false;
+      if (optionHours === hours && optionMinutes < minutes) return false;
+
+      return true;
+    });
+  };
+
+  const onSubmit = async (formData: FormValues) => {
+    if (!workspaceSlug || !formData.date || !formData.time) return;
+
+    const period = formData.period;
+
+    const time = formData.time.split(":");
+    const hours = parseInt(
+      `${period === "AM" ? time[0] : parseInt(time[0]) + 12 === 24 ? "00" : parseInt(time[0]) + 12}`
+    );
+    const minutes = parseInt(time[1]);
+
+    const dateTime: Date | undefined = getDate(formData?.date);
+    dateTime?.setHours(hours);
+    dateTime?.setMinutes(minutes);
+
+    await handleSubmitSnooze(dateTime).then(() => {
+      handleClose();
+    });
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <form onSubmit={handleSubmit(onSubmit)} className="p-5">
+        <div className="flex items-center justify-between">
+          <h3 className="text-h5-medium leading-6 text-primary">Customize Snooze Time</h3>
+
+          <div>
+            <button type="button" onClick={handleClose}>
+              <CloseOutline className="h-5 w-5 text-primary" />
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-5 flex flex-col gap-3 md:!flex-row md:items-center">
+          <div className="flex-1 pb-3 md:pb-0">
+            <h6 className="mb-2 block text-body-xs-medium text-placeholder">Pick a date</h6>
+            <Controller
+              name="date"
+              control={control}
+              rules={{ required: "Please select a date" }}
+              render={({ field: { value, onChange } }) => (
+                <DateDropdown
+                  value={value || null}
+                  placeholder="Select date"
+                  onChange={(val) => {
+                    setValue("time", undefined);
+                    onChange(val);
+                  }}
+                  minDate={new Date()}
+                  buttonVariant="border-with-text"
+                  buttonContainerClassName="w-full text-left"
+                  buttonClassName="border-strong px-3 py-2.5"
+                  hideIcon
+                />
+              )}
+            />
+          </div>
+          <div className="flex-1">
+            <h6 className="mb-2 block text-body-xs-medium text-placeholder">Pick a time</h6>
+            <Controller
+              control={control}
+              name="time"
+              rules={{ required: "Please select a time" }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={
+                    <div className="truncate">
+                      {value ? (
+                        <span>
+                          {value} {watch("period").toLowerCase()}
+                        </span>
+                      ) : (
+                        <span className="text-body-xs-medium text-placeholder">Select a time</span>
+                      )}
+                    </div>
+                  }
+                  input
+                >
+                  <div className="mb-2 flex h-9 w-full overflow-hidden rounded-xs">
+                    <div
+                      onClick={() => {
+                        setValue("period", "AM");
+                      }}
+                      className={cn("flex h-full w-1/2 cursor-pointer items-center justify-center text-center", {
+                        "bg-accent-primary/90 text-on-color": watch("period") === "AM",
+                        "bg-layer-1": watch("period") !== "AM",
+                      })}
+                    >
+                      AM
+                    </div>
+                    <div
+                      onClick={() => {
+                        setValue("period", "PM");
+                      }}
+                      className={cn("flex h-full w-1/2 cursor-pointer items-center justify-center text-center", {
+                        "bg-accent-primary/90 text-on-color": watch("period") === "PM",
+                        "bg-layer-1": watch("period") !== "PM",
+                      })}
+                    >
+                      PM
+                    </div>
+                  </div>
+                  {getTimeStamp().length > 0 ? (
+                    getTimeStamp().map((time, index) => (
+                      <CustomSelect.Option key={`${time}-${index}`} value={time.value}>
+                        <div className="flex items-center">
+                          <span className="ml-3 block truncate">{time.label}</span>
+                        </div>
+                      </CustomSelect.Option>
+                    ))
+                  ) : (
+                    <p className="p-3 text-center text-secondary">No available time for this date.</p>
+                  )}
+                </CustomSelect>
+              )}
+            />
+          </div>
+        </div>
+
+        <div className="mt-5 flex items-center justify-between gap-2">
+          <div className="flex w-full items-center justify-end gap-2">
+            <Button variant="secondary" size="lg" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
+              {isSubmitting ? "Submitting..." : "Submit"}
+            </Button>
+          </div>
+        </div>
+      </form>
+    </ModalCore>
+  );
+}
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
new file mode 100644
index 0000000..71299f9
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, SetStateAction } from "react";
+import { Fragment } from "react";
+import { observer } from "mobx-react";
+import { ClockOutline } from "@makeplane/propel/icons";
+import { Popover, Transition } from "@headlessui/react";
+// plane imports
+import { NOTIFICATION_SNOOZE_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// store
+import type { INotification } from "@/store/notifications/notification";
+// local imports
+import { NotificationSnoozeModal } from "./modal";
+
+type TNotificationItemSnoozeOption = {
+  workspaceSlug: string;
+  notification: INotification;
+  setIsSnoozeStateModalOpen: Dispatch<SetStateAction<boolean>>;
+  customSnoozeModal: boolean;
+  setCustomSnoozeModal: Dispatch<SetStateAction<boolean>>;
+};
+
+export const NotificationItemSnoozeOption = observer(function NotificationItemSnoozeOption(
+  props: TNotificationItemSnoozeOption
+) {
+  const { workspaceSlug, notification, setIsSnoozeStateModalOpen, customSnoozeModal, setCustomSnoozeModal } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+  const {} = useWorkspaceNotifications();
+  const { t } = useTranslation();
+  const { asJson: data, snoozeNotification, unSnoozeNotification } = notification;
+
+  const handleNotificationSnoozeDate = async (snoozeTill: Date | undefined) => {
+    if (snoozeTill) {
+      try {
+        await snoozeNotification(workspaceSlug, snoozeTill);
+        setToast({
+          title: `${t("common.success")}!`,
+          message: t("notification.toasts.snoozed"),
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    } else {
+      try {
+        await unSnoozeNotification(workspaceSlug);
+        setToast({
+          title: `${t("common.success")}!`,
+          message: t("notification.toasts.unsnoozed"),
+          type: TOAST_TYPE.SUCCESS,
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    setCustomSnoozeModal(false);
+    setIsSnoozeStateModalOpen(false);
+  };
+
+  const handleDropdownSelect = (snoozeDate: Date | "un-snooze" | undefined) => {
+    if (snoozeDate === "un-snooze") {
+      handleNotificationSnoozeDate(undefined);
+      return;
+    }
+    if (snoozeDate) {
+      handleNotificationSnoozeDate(snoozeDate);
+    } else {
+      setCustomSnoozeModal(true);
+    }
+  };
+
+  return (
+    <>
+      <NotificationSnoozeModal
+        isOpen={customSnoozeModal}
+        onClose={() => setCustomSnoozeModal(false)}
+        onSubmit={handleNotificationSnoozeDate}
+      />
+      <Popover className="relative">
+        {({ open }) => {
+          if (open) setIsSnoozeStateModalOpen(true);
+          else setIsSnoozeStateModalOpen(false);
+
+          return (
+            <>
+              <Tooltip
+                label={
+                  data.snoozed_till ? t("notification.options.mark_unsnooze") : t("notification.options.mark_snooze")
+                }
+                disabled={isMobile}
+              >
+                <Popover.Button
+                  className={cn(
+                    "relative flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-xs bg-layer-1 outline-none hover:bg-surface-2",
+                    open ? "bg-layer-1" : ""
+                  )}
+                >
+                  <ClockOutline className="h-3 w-3 text-tertiary" />
+                </Popover.Button>
+              </Tooltip>
+
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel className="absolute right-0 z-10 mt-2 min-w-44 select-none">
+                  <div className="space-y-1 rounded-md border border-subtle bg-surface-1 p-2">
+                    {data.snoozed_till && (
+                      <button
+                        className="w-full cursor-pointer rounded-xs p-1 px-2 text-left text-body-xs-medium text-secondary transition-all hover:bg-layer-1"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleDropdownSelect("un-snooze");
+                        }}
+                      >
+                        <div>{t("notification.options.mark_unsnooze")}</div>
+                      </button>
+                    )}
+
+                    {NOTIFICATION_SNOOZE_OPTIONS.map((option) => (
+                      <button
+                        key={option.key}
+                        className="w-full cursor-pointer rounded-xs p-1 px-2 text-left text-body-xs-medium text-secondary transition-all hover:bg-layer-1"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleDropdownSelect(option.value != undefined ? option.value() : option.value);
+                        }}
+                      >
+                        <div>{t(option?.i18n_label)}</div>
+                      </button>
+                    ))}
+                  </div>
+                </Popover.Panel>
+              </Transition>
+            </>
+          );
+        }}
+      </Popover>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace-notifications/sidebar/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
new file mode 100644
index 0000000..2a3285a
--- /dev/null
+++ b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import type { TNotificationTab } from "@plane/constants";
+import { NOTIFICATION_TABS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
+import { cn, getNumberCount } from "@plane/utils";
+// components
+import { CountChip } from "@/components/common/count-chip";
+// hooks
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+// local imports
+import { NotificationEmptyState } from "./empty-state";
+import { AppliedFilters } from "./filters/applied-filter";
+import { NotificationSidebarHeader } from "./header";
+import { NotificationsLoader } from "./loader";
+import { NotificationCardListRoot } from "../notification-card/root";
+
+export const NotificationsSidebarRoot = observer(function NotificationsSidebarRoot() {
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { getWorkspaceBySlug } = useWorkspace();
+  const {
+    currentSelectedNotificationId,
+    unreadNotificationsCount,
+    loader,
+    notificationIdsByWorkspaceId,
+    currentNotificationTab,
+    setCurrentNotificationTab,
+  } = useWorkspaceNotifications();
+
+  const { t } = useTranslation();
+  // derived values
+  const workspace = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : undefined;
+  const notificationIds = workspace ? notificationIdsByWorkspaceId(workspace.id) : undefined;
+
+  const handleTabClick = useCallback(
+    (tabValue: TNotificationTab) => {
+      if (currentNotificationTab !== tabValue) {
+        setCurrentNotificationTab(tabValue);
+      }
+    },
+    [currentNotificationTab, setCurrentNotificationTab]
+  );
+
+  if (!workspaceSlug || !workspace) return <></>;
+
+  return (
+    <div
+      className={cn(
+        "relative z-[10] h-full flex-shrink-0 border-0 border-subtle bg-surface-1 transition-all max-md:overflow-hidden md:border-r",
+        currentSelectedNotificationId ? "w-0 md:w-3/12" : "w-full md:w-3/12"
+      )}
+    >
+      <div className="relative flex h-full w-full flex-col">
+        <Row className="flex h-header flex-shrink-0 border-b border-subtle">
+          <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
+        </Row>
+
+        <Header variant={EHeaderVariant.SECONDARY} className="justify-start">
+          {NOTIFICATION_TABS.map((tab) => (
+            // oxlint-disable-next-line jsx_a11y/click-events-have-key-events oxlint-disable-next-line jsx_a11y/no-static-element-interactions
+            <div
+              key={tab.value}
+              className="relative h-full cursor-pointer px-3"
+              onClick={() => handleTabClick(tab.value)}
+            >
+              <div
+                className={cn(
+                  "relative flex h-full items-center justify-center gap-1 text-body-xs-medium transition-all",
+                  {
+                    "text-accent-primary": currentNotificationTab === tab.value,
+                    "text-primary hover:text-secondary": currentNotificationTab !== tab.value,
+                  }
+                )}
+              >
+                <div className="font-medium">{t(tab.i18n_label)}</div>
+                {tab.count(unreadNotificationsCount) > 0 && (
+                  <CountChip count={getNumberCount(tab.count(unreadNotificationsCount))} />
+                )}
+              </div>
+              {currentNotificationTab === tab.value && (
+                <div className="absolute right-0 bottom-0 left-0 rounded-t-md border border-accent-strong" />
+              )}
+            </div>
+          ))}
+        </Header>
+
+        {/* applied filters */}
+        <AppliedFilters workspaceSlug={workspaceSlug.toString()} />
+
+        {/* rendering notifications */}
+        {loader === "init-loader" ? (
+          <div className="relative h-full w-full overflow-hidden">
+            <NotificationsLoader />
+          </div>
+        ) : (
+          <>
+            {notificationIds && notificationIds.length > 0 ? (
+              <ContentWrapper variant={ERowVariant.HUGGING}>
+                <NotificationCardListRoot workspaceSlug={workspaceSlug.toString()} workspaceId={workspace?.id} />
+              </ContentWrapper>
+            ) : (
+              <div className="relative flex h-full w-full items-center justify-center">
+                <NotificationEmptyState currentNotificationTab={currentNotificationTab} />
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
new file mode 100644
index 0000000..4037c59
--- /dev/null
+++ b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { WarningTriangleOutline } from "@makeplane/propel/icons";
+import { Dialog, Transition } from "@headlessui/react";
+import { Button } from "@plane/propel/button";
+import { useUser } from "@/hooks/store/user";
+import type { Props } from "./confirm-workspace-member-remove";
+
+export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMemberRemove(props: Props) {
+  const { isOpen, onClose, onSubmit, userDetails } = props;
+  // states
+  const [isRemoving, setIsRemoving] = useState(false);
+  // store hooks
+  const { data: currentUser } = useUser();
+
+  const handleClose = () => {
+    onClose();
+    setIsRemoving(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsRemoving(true);
+
+    await onSubmit();
+
+    handleClose();
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-20 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
+                      <WarningTriangleOutline className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+                    </div>
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title as="h3" className="text-16 leading-6 font-medium text-primary">
+                        {currentUser?.id === userDetails.id
+                          ? "Leave workspace?"
+                          : `Remove ${userDetails?.display_name}?`}
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        {currentUser?.id === userDetails.id ? (
+                          <p className="text-13 text-secondary">
+                            Are you sure you want to leave the workspace? You will no longer have access to this
+                            workspace. This action cannot be undone.
+                          </p>
+                        ) : (
+                          <p className="text-13 text-secondary">
+                            Are you sure you want to remove member-{" "}
+                            <span className="font-bold">{userDetails?.display_name}</span>? They will no longer have
+                            access to this workspace. This action cannot be undone.
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-end gap-2 p-4 sm:px-6">
+                  <Button variant="secondary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="error-fill" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
+                    {currentUser?.id === userDetails.id
+                      ? isRemoving
+                        ? "Leaving"
+                        : "Leave"
+                      : isRemoving
+                        ? "Removing"
+                        : "Remove"}
+                  </Button>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/apps/web/core/components/workspace/billing/comparison/base.tsx b/apps/web/core/components/workspace/billing/comparison/base.tsx
new file mode 100644
index 0000000..f36cad4
--- /dev/null
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { ArrowDownOutline, TopArrowOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Button } from "@plane/propel/button";
+import { cn } from "@plane/utils";
+// constants
+import type { TPlanePlans } from "@/components/workspace/billing/comparison/plans";
+import { ComingSoonBadge, PLANE_PLANS, PLANS_LIST } from "@/components/workspace/billing/comparison/plans";
+// local imports
+import { PlanFeatureDetail } from "./feature-detail";
+
+type TPlansComparisonBaseProps = {
+  planeDetails: React.ReactNode;
+  isSelfManaged: boolean;
+  isCompareAllFeaturesSectionOpen: boolean;
+  setIsCompareAllFeaturesSectionOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const shouldRenderPlanDetail = (planKey: TPlanePlans) => {
+  // Free plan is not required to be shown in the comparison
+  if (planKey === "free") return false;
+  // Plane one plan is not longer available
+  if (planKey === "one") return false;
+  return true;
+};
+
+export const PlansComparisonBase = observer(function PlansComparisonBase(props: TPlansComparisonBaseProps) {
+  const { planeDetails, isSelfManaged, isCompareAllFeaturesSectionOpen, setIsCompareAllFeaturesSectionOpen } = props;
+  // plan details
+  const { planDetails, planHighlights, planComparison } = PLANE_PLANS;
+  const numberOfPlansToRender = Object.keys(planDetails).filter((planKey) =>
+    shouldRenderPlanDetail(planKey as TPlanePlans)
+  ).length;
+
+  const getSubscriptionType = (planKey: TPlanePlans) => planDetails[planKey].id;
+
+  return (
+    <div className="horizontal-scrollbar scrollbar-sm size-full overflow-x-auto">
+      <div className="max-w-full" style={{ minWidth: `${numberOfPlansToRender * 280}px` }}>
+        <div className="flex h-full flex-col gap-y-10">
+          <div
+            className={cn("sticky top-2 z-10 grid flex-shrink-0 gap-3 bg-layer-1 text-caption-md-medium")}
+            style={{
+              gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))`,
+            }}
+          >
+            <div className="col-span-1 space-y-0.5 p-3 text-body-sm-medium" />
+            {planeDetails}
+          </div>
+          {/* Plan Headers */}
+          <section className="flex-shrink-0">
+            {/* Plan Highlights */}
+            <div
+              className="text-caption-md grid gap-3 rounded-xs py-1 text-secondary even:bg-surface-2"
+              style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
+            >
+              <div className="col-span-1 p-3 text-body-sm-medium">Highlights</div>
+              {Object.entries(planHighlights).map(
+                ([planKey, highlights]) =>
+                  shouldRenderPlanDetail(planKey as TPlanePlans) && (
+                    <div key={planKey} className="col-span-1 p-3">
+                      <ul className="list-disc space-y-1 text-body-xs-regular">
+                        {highlights.map((highlight, index) => (
+                          <li key={index}>{highlight}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  )
+              )}
+            </div>
+          </section>
+
+          {/* Feature Comparison */}
+          {isCompareAllFeaturesSectionOpen && (
+            <>
+              {planComparison.map((section, sectionIdx) => (
+                <section key={sectionIdx} className="flex-shrink-0">
+                  <h2 className="mb-2 flex items-start gap-2 pl-2 text-h5-semibold text-secondary">
+                    {section.title} {section.comingSoon && <ComingSoonBadge />}
+                  </h2>
+                  <div className="border-t border-subtle">
+                    {section.features.map((feature, featureIdx) => (
+                      <div
+                        key={featureIdx}
+                        className="text-caption-md grid gap-3 rounded-xs bg-layer-transparent text-secondary even:bg-layer-1"
+                        style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
+                      >
+                        <div className="col-span-1 flex items-center p-3 text-body-sm-medium">
+                          <div className="flex w-full items-start justify-between gap-2">
+                            {feature.title} {feature.comingSoon && <ComingSoonBadge />}
+                          </div>
+                        </div>
+                        {PLANS_LIST.map(
+                          (planKey) =>
+                            shouldRenderPlanDetail(planKey) && (
+                              <div
+                                key={planKey}
+                                className="col-span-1 flex items-center justify-center p-3 text-center text-body-xs-regular"
+                              >
+                                <PlanFeatureDetail
+                                  subscriptionType={getSubscriptionType(planKey)}
+                                  data={
+                                    isSelfManaged
+                                      ? (feature["self-hosted"]?.[planKey] ?? feature.cloud[planKey])
+                                      : feature.cloud[planKey]
+                                  }
+                                />
+                              </div>
+                            )
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </section>
+              ))}
+            </>
+          )}
+        </div>
+
+        {/* Toggle Button */}
+        <div className="my-4 flex items-center justify-center gap-1 pb-2">
+          <Button
+            variant="ghost"
+            onClick={() => {
+              setIsCompareAllFeaturesSectionOpen(!isCompareAllFeaturesSectionOpen);
+            }}
+            appendIcon={isCompareAllFeaturesSectionOpen ? <TopArrowOutline /> : <ArrowDownOutline />}
+          >
+            {isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx b/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
new file mode 100644
index 0000000..85ad64c
--- /dev/null
+++ b/apps/web/core/components/workspace/billing/comparison/feature-detail.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { MinusCircle } from "lucide-react";
+import { MinusOutline, TickCircleOutline } from "@makeplane/propel/icons";
+import type { EProductSubscriptionEnum } from "@plane/types";
+// plane imports
+// constants
+import type { TPlanFeatureData } from "@/components/workspace/billing/comparison/plans";
+
+type TPlanFeatureDetailProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  data: TPlanFeatureData;
+};
+
+export function PlanFeatureDetail(props: TPlanFeatureDetailProps) {
+  const { data } = props;
+
+  if (data === null || data === undefined) {
+    return <MinusOutline className="size-4 text-placeholder" />;
+  }
+  if (data === true) {
+    return <TickCircleOutline className="size-4 text-accent-primary" />;
+  }
+  if (data === false) {
+    return <MinusCircle className="size-4 text-placeholder" />;
+  }
+  return <>{data}</>;
+}
diff --git a/apps/web/core/components/workspace/billing/comparison/frequency-toggle.tsx b/apps/web/core/components/workspace/billing/comparison/frequency-toggle.tsx
new file mode 100644
index 0000000..da81c45
--- /dev/null
+++ b/apps/web/core/components/workspace/billing/comparison/frequency-toggle.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { observer } from "mobx-react";
+import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
+import { calculateYearlyDiscount, cn } from "@plane/utils";
+
+type TPlanFrequencyToggleProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  monthlyPrice: number;
+  yearlyPrice: number;
+  selectedFrequency: TBillingFrequency;
+  setSelectedFrequency: (frequency: TBillingFrequency) => void;
+};
+
+export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props: TPlanFrequencyToggleProps) {
+  const { monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
+  // derived values
+  const yearlyDiscount = calculateYearlyDiscount(monthlyPrice, yearlyPrice);
+
+  return (
+    <div className="flex w-full cursor-pointer items-center py-1">
+      <div className="flex w-full space-x-1 rounded-md bg-layer-3 p-0.5">
+        <button
+          type="button"
+          onClick={() => setSelectedFrequency("month")}
+          className={cn(
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
+            selectedFrequency === "month"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+              : "text-tertiary hover:text-secondary"
+          )}
+        >
+          Monthly
+        </button>
+        <button
+          type="button"
+          onClick={() => setSelectedFrequency("year")}
+          className={cn(
+            "w-full rounded-sm px-1 py-0.5 text-center text-caption-sm-medium leading-5",
+            selectedFrequency === "year"
+              ? "border border-subtle-1 bg-layer-2 text-primary shadow-raised-100"
+              : "text-tertiary hover:text-secondary"
+          )}
+        >
+          Yearly
+          {yearlyDiscount > 0 && (
+            <span className="ml-1.5 rounded-full bg-accent-primary px-1 py-0.5 text-caption-xs-regular text-on-color">
+              -{yearlyDiscount}%
+            </span>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/billing/comparison/index.ts b/apps/web/core/components/workspace/billing/comparison/index.ts
new file mode 100644
index 0000000..df6fd75
--- /dev/null
+++ b/apps/web/core/components/workspace/billing/comparison/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./base";
+export * from "./plans";
diff --git a/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx b/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx
new file mode 100644
index 0000000..27d2b8c
--- /dev/null
+++ b/apps/web/core/components/workspace/billing/comparison/plan-detail.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import {
+  SUBSCRIPTION_REDIRECTION_URLS,
+  SUBSCRIPTION_WITH_BILLING_FREQUENCY,
+  TALK_TO_SALES_URL,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { TBillingFrequency } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+import { getSubscriptionName } from "@plane/utils";
+// components
+import { DiscountInfo } from "@/components/license/modal/card/discount-info";
+import type { TPlanDetail } from "@/components/workspace/billing/comparison/plans";
+// local imports
+import { PlanFrequencyToggle } from "./frequency-toggle";
+
+type TPlanDetailProps = {
+  subscriptionType: EProductSubscriptionEnum;
+  planDetail: TPlanDetail;
+  billingFrequency: TBillingFrequency | undefined;
+  setBillingFrequency: (frequency: TBillingFrequency) => void;
+};
+
+export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps) {
+  const { subscriptionType, planDetail, billingFrequency, setBillingFrequency } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // subscription details
+  const subscriptionName = getSubscriptionName(subscriptionType);
+  const isSubscriptionActive = planDetail.isActive;
+  // pricing details
+  const displayPrice = billingFrequency === "month" ? planDetail.monthlyPrice : planDetail.yearlyPrice;
+  const pricingDescription = isSubscriptionActive ? "a user per month" : "Quote on request";
+  const pricingSecondaryDescription =
+    billingFrequency === "month"
+      ? planDetail.monthlyPriceSecondaryDescription
+      : planDetail.yearlyPriceSecondaryDescription;
+
+  const handleRedirection = () => {
+    const frequency = billingFrequency ?? "year";
+    // Get the redirection URL based on the subscription type and billing frequency
+    const redirectUrl = SUBSCRIPTION_REDIRECTION_URLS[subscriptionType][frequency] ?? TALK_TO_SALES_URL;
+    // Open the URL in a new tab
+    window.open(redirectUrl, "_blank");
+  };
+
+  return (
+    <div className="col-span-1 flex flex-col justify-between space-y-0.5 p-3">
+      {/* Plan name and pricing section */}
+      <div className="flex flex-col items-start">
+        <div className="flex w-full items-center gap-2 text-h4-semibold">
+          <span>{subscriptionName}</span>
+          {subscriptionType === EProductSubscriptionEnum.PRO && (
+            <span className="rounded-sm bg-accent-primary px-2 py-0.5 text-caption-sm-medium text-on-color">
+              Popular
+            </span>
+          )}
+        </div>
+        <div className="flex items-start gap-x-2 pb-1 text-tertiary">
+          {isSubscriptionActive && displayPrice !== undefined && (
+            <div className="flex items-center gap-1 text-h3-semibold text-primary">
+              <DiscountInfo
+                currency="$"
+                frequency={billingFrequency ?? "month"}
+                price={displayPrice}
+                subscriptionType={subscriptionType}
+                className="mr-1.5"
+              />
+            </div>
+          )}
+          <div className="pt-1">
+            {pricingDescription && <div>{pricingDescription}</div>}
+            {pricingSecondaryDescription && (
+              <div className="text-caption-xs text-placeholder">{pricingSecondaryDescription}</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Billing frequency toggle */}
+      {SUBSCRIPTION_WITH_BILLING_FREQUENCY.includes(subscriptionType) && billingFrequency && (
+        <div className="h-8 py-0.5">
+          <PlanFrequencyToggle
+            subscriptionType={subscriptionType}
+            monthlyPrice={planDetail.monthlyPrice || 0}
+            yearlyPrice={planDetail.yearlyPrice || 0}
+            selectedFrequency={billingFrequency}
+            setSelectedFrequency={setBillingFrequency}
+          />
+        </div>
+      )}
+
+      {/* Subscription button */}
+      <div className="flex flex-col items-start gap-1 py-3">
+        <Button variant="primary" size="lg" onClick={handleRedirection} className="w-full">
+          {isSubscriptionActive ? `Upgrade to ${subscriptionName}` : t("common.upgrade_cta.talk_to_sales")}
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/billing/comparison/plans.tsx b/apps/web/core/components/workspace/billing/comparison/plans.tsx
new file mode 100644
index 0000000..3273aff
--- /dev/null
+++ b/apps/web/core/components/workspace/billing/comparison/plans.tsx
@@ -0,0 +1,1311 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ChatOutline, MailOutline } from "@makeplane/propel/icons";
+import { EProductSubscriptionEnum } from "@plane/types";
+// plane imports
+import { cn } from "@plane/utils";
+
+export type TPlanFeatureData = React.ReactNode | boolean | null;
+
+// TODO: we should change this type and use TProductSubscriptionType instead. Need changes in common constants.
+export type TPlanePlans = "free" | "one" | "pro" | "business" | "enterprise";
+
+export type TPlanDetail = {
+  id: EProductSubscriptionEnum;
+  name: React.ReactNode;
+  monthlyPrice?: number;
+  yearlyPrice?: number;
+  monthlyPriceSecondaryDescription?: React.ReactNode;
+  yearlyPriceSecondaryDescription?: React.ReactNode;
+  buttonCTA?: React.ReactNode;
+  isActive: boolean;
+};
+
+type TPlanFeatureDetails = {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  selfHostedDescription?: React.ReactNode;
+  comingSoon?: boolean;
+  selfHostedOnly?: boolean;
+  cloud: Record<TPlanePlans, TPlanFeatureData>;
+  "self-hosted"?: Record<TPlanePlans, TPlanFeatureData>;
+};
+
+type TPlansComparisonDetails = {
+  id: string;
+  title: React.ReactNode;
+  comingSoon?: boolean;
+  cloudOnly?: boolean;
+  selfHostedOnly?: boolean;
+  features: TPlanFeatureDetails[];
+};
+
+type PlanePlans = {
+  planDetails: Record<TPlanePlans, TPlanDetail>;
+  planHighlights: Record<TPlanePlans, string[]>;
+  planComparison: TPlansComparisonDetails[];
+};
+
+function ForumIcon({ className }: { className?: string }) {
+  return <ChatOutline className={cn(className, "size-5 text-secondary")} />;
+}
+
+export function ComingSoonBadge({ className }: { className?: string }) {
+  return (
+    <span
+      className={cn(
+        "w-fit rounded-sm bg-accent-primary px-1.5 py-0.5 text-9 font-semibold whitespace-nowrap text-on-color",
+        className
+      )}
+    >
+      COMING SOON
+    </span>
+  );
+}
+
+export const PLANS_LIST: TPlanePlans[] = ["free", "one", "pro", "business", "enterprise"];
+
+export const PLANS_COMPARISON_LIST: TPlansComparisonDetails[] = [
+  {
+    id: "project-work-tracking",
+    title: "Project + work tracking",
+    features: [
+      {
+        title: "Projects",
+        description: "Add projects to house work items, cycles, and modules.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Work items",
+        description: "Add work via work items, set properties for tracking, and add to\ncycles or modules.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Comments",
+        description: "Respond to work items, @mention members, and brainstorm\ntogether without leaving Plane.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Cycles",
+        description: "Track work in timeboxes with differing frequency.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Modules",
+        description: "Group replicable work in modules with their own\nleads.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Intake",
+        description:
+          "See suggestions and feedback from viewers and\nguests before you decide to add them to your\nproject.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Estimates",
+        description: "Measure effort in points in a system that works for\nyou.",
+        cloud: {
+          free: "Basic",
+          one: "Basic",
+          pro: "Advanced",
+          business: "Advanced",
+          enterprise: "Advanced",
+        },
+      },
+    ],
+  },
+  {
+    id: "project-work-management",
+    title: "Project + work management",
+    features: [
+      {
+        title: "Bulk Ops",
+        description: "Add several work items to cycles or modules, transfer\nthem, or edit their properties.",
+        cloud: {
+          free: false,
+          one: "Limited props",
+          pro: "All props",
+          business: (
+            <span className="flex flex-col items-end gap-1 lg:items-center">
+              <ComingSoonBadge />
+              Work item transfers and conversions
+            </span>
+          ),
+          enterprise: (
+            <span className="flex flex-col items-end gap-1 lg:items-center">
+              <ComingSoonBadge />
+              Work item transfers and conversions
+            </span>
+          ),
+        },
+      },
+      {
+        title: "Time Tracking + Worklogs",
+        description: "Track time per work item, see aggregated reports, and\nfilter by need.",
+        cloud: {
+          free: false,
+          one: "Basic",
+          pro: "Historical timesheets",
+          business: "Historical timesheets\nand approvals",
+          enterprise: "Historical timesheets\nand approvals",
+        },
+      },
+      {
+        title: "Active Cycles",
+        description: "See all running cycles across all projects, or soon, in\na single project.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Work item Types",
+        description: "Create your own work item types with your own\nproperties.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Custom Properties",
+        description: "Create your own properties and apply them to your\nworkspace or project.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: "Project-level\ncustom properties",
+          business: "Workspace-level\nproperties and roll-ups",
+          enterprise: "Workspace-level\nproperties and roll-ups",
+        },
+      },
+      {
+        title: "Dependencies in Gantt",
+        description: "Adjust timelines for dependent work items visually on\nour Gantt layout.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Work item Transfers",
+        description: "Move a work item from a project or a cycle to\nanother.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Auto-transfer Cycle Work items",
+        description:
+          "Transfer incomplete work items from a completed cycle\nto the next cycle or to the default project state. ",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Epics",
+        description: "Organize long-term work in epics that house work items,\ncycles, and modules.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Initiatives",
+        description: "Create initiatives to roll up several epics.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Checkpoints",
+        description:
+          "Add markers to Projects, Epics and Initiatives to keep your\nteam on track and report on progress.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Module Overview",
+        description: "Like Cycle Overviews, see relevant details and\nprogress charts for each module.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Auto-assignment In Modules",
+        description: "Choose assignment rules for work items in a\nmodule including Linear, Round Robin, or Capacity.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: "Linear",
+          business: "Round-robin and Capacity",
+          enterprise: "Round-robin and Capacity",
+        },
+      },
+      // {
+      //   title: "Project Overview",
+      //   description: "See just-in-time snapshots of your project with\nessential metrics.",
+      //   comingSoon: true,
+      //   cloud: {
+      //     free: false,
+      //     one: false,
+      //     pro: true,
+      //     business: true,
+      //     enterprise: true,
+      //   },
+      // },
+      {
+        title: "Public, Private, and Secret projects",
+        description:
+          "Public projects are visible and accessible to\neveryone. Private ones are visible but need approval\nto join. Secret projects aren't visible or accessible.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "State Of Projects",
+        description:
+          "See all projects laid across states that highlight\nthose that need attention and those on track.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      // {
+      //   title: "Project Updates",
+      //   description:
+      //     "Keep stakeholders in the loop with a dedicated\nspace for updates that everyone in the project can\nsee.",
+      //   comingSoon: true,
+      //   cloud: {
+      //     free: false,
+      //     one: false,
+      //     pro: true,
+      //     business: true,
+      //     enterprise: true,
+      //   },
+      // },
+      {
+        title: "Pre-defined work item Templates",
+        description:
+          "Choose from our available work item templates that\ncustomize work item types and properties for several\nuse cases.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Teamspace Cycles",
+        description: "See multiple cycles in multiple projects at once.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Project Templates",
+        description: "Save states, workflows, automation, and other project\nsettings into templates.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Baselines And Deviations",
+        description: "Declare baselines for how your projects progress\nand zoom in on deviations.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Scheduled Comms",
+        description: "Schedule reports, notifications, and messages to\nthird-party tools.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Intake Assignees",
+        description: "Assign approved Intake work items to a member by\ndefault.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Custom SLAs",
+        description: "Set SLA matrices for time-sensitive work items.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Intake Forms",
+        description: "Take Intake work items from externally accessible web\nforms.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Emails For Intake",
+        description: "Get an email address for reporting work items\ndirectly into a project's Intake.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+    ],
+  },
+  {
+    id: "visualization",
+    title: "Visualization",
+    features: [
+      {
+        title: "Layouts",
+        description:
+          "Choose from the List, the Board, the Calendar, the\nGantt, or the Spreadsheet layout for your work items.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Views",
+        description: "Save sort, filter, and display options on a layout to a\nview.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Shared Views",
+        description: "Choose a few members to share a view with.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Publish Views",
+        description: "Put a view on the Internet and let your customers\ninteract with them.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Dashboards and Widgets",
+        description: "Create your own dashboards with custom widgets\nand data types.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+    ],
+  },
+  {
+    id: "analytics-reports",
+    title: "Analytics + reports",
+    features: [
+      {
+        title: "Progress Charts",
+        description:
+          "Track progress in cycles, modules, and overviews\nthroughout Plane without switching to dashboards\nor Analytics.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Cycle Reports",
+        description: "Get on-demand cycle reports during and after a\ncycle. Revisit reports anytime from permalinks.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Insights",
+        description: "Hindsight, On-demand insights, Foresights.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      // {
+      //   title: "Time Capsule",
+      //   description: "Go back in your project's timeline and see point-in-\ntime snapshots.",
+      //   comingSoon: true,
+      //   cloud: {
+      //     free: false,
+      //     one: false,
+      //     pro: false,
+      //     business: true,
+      //     enterprise: true,
+      //   },
+      // },
+      {
+        title: "Advanced Pages Analytics",
+        description: "See who's viewing, sharing, and commenting on\nyour pages along with other useful info.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Custom Reports",
+        description: "Generate reports by any dimension and metric\nacross your project or workspace.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+    ],
+  },
+  {
+    id: "navigation",
+    title: "Navigation",
+    features: [
+      {
+        title: "Power K",
+        description: "Access a keyboard-first gateway to almost anything\nin Plane.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      // {
+      //   title: "Search",
+      //   description: "Search via natural-language queries, operators, or\nPQL",
+      //   cloud: {
+      //     free: "Basic text search",
+      //     one: "Basic text search",
+      //     pro: (
+      //       <span className="flex flex-col items-end lg:items-center gap-1">
+      //         <span className="bg-[#3f76ff] text-on-color font-semibold text-9 p-0.5 w-fit whitespace-nowrap rounded-xs">
+      //           COMING SOON
+      //         </span>
+      //         Operator capsules from text or PQL
+      //       </span>
+      //     ),
+      //     business: (
+      //       <span className="flex flex-col items-end lg:items-center gap-1">
+      //         <span className="bg-[#3f76ff] text-on-color font-semibold text-9 p-0.5 w-fit whitespace-nowrap rounded-xs">
+      //           COMING SOON
+      //         </span>
+      //         Operator capsules from text or PQL
+      //       </span>
+      //     ),
+      //     enterprise: (
+      //       <span className="flex flex-col items-end lg:items-center gap-1">
+      //         <span className="bg-[#3f76ff] text-on-color font-semibold text-9 p-0.5 w-fit whitespace-nowrap rounded-xs">
+      //           COMING SOON
+      //         </span>
+      //         Operator capsules from text or PQL
+      //       </span>
+      //     ),
+      //   },
+      // },
+      {
+        title: "PQL",
+        description:
+          "Write Plane Query Language in search with support\nfor Boolean operators. Soon, you can write natural\nlanguage queries.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+    ],
+  },
+  {
+    id: "workspace-user-management",
+    title: "Workspace and user management",
+    features: [
+      {
+        title: "Member limit",
+        description: "Number of seats that can use project and work management features",
+        selfHostedDescription: "Number of users that our standard infra supports\nIncrease infra to get more users",
+        cloud: {
+          free: "12",
+          one: "",
+          pro: "Unlimited",
+          business: "Unlimited",
+          enterprise: "Unlimited",
+        },
+        "self-hosted": {
+          free: "~50",
+          one: "~50",
+          pro: "~200",
+          business: "~200",
+          enterprise: "Unlimited",
+        },
+      },
+      {
+        title: "Roles",
+        description: "Choose from one of four pre-defined roles or create\ncustom ones with RBAC.",
+        cloud: {
+          free: "Basic",
+          one: "Basic",
+          pro: "Pre-defined roles",
+          business: "RBAC",
+          enterprise: "GAC",
+        },
+      },
+      {
+        title: "Guests",
+        description: "Let some users see everything or just their work items in\na project.",
+        cloud: {
+          free: false,
+          one: "5 per paid member",
+          pro: "5 per paid member",
+          business: "5 per paid member",
+          enterprise: "5 per paid member",
+        },
+      },
+      {
+        title: "Approvals",
+        description: "Set workspace, project, and work item type approvals to\ndesignated admins.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Admin Interface",
+        description: "Get an admin overview to manage workspace and\nproject settings.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Workspace Activity Logs",
+        description: "See filterable activity logs for your entire\nworkspace.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "API-enabled Audit Logs",
+        description: "See a full-workspace audit log and use APIs to flag\nPlane activity in compliance systems.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+    ],
+  },
+  {
+    id: "automations-workflows",
+    title: "Automations and workflows",
+    features: [
+      {
+        title: "Trigger And Action",
+        description: "Choose a trigger and a corresponding action per\nautomation flow.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Decisions And Loops Automation",
+        description: "Use actions as triggers indefinitely in an\nautomation flow.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Number of automations",
+        description: "Total number of automation flows in your\nworkspace",
+        cloud: {
+          free: false,
+          one: false,
+          pro: "5,000",
+          business: "10,000",
+          enterprise: "Unlimited",
+        },
+      },
+    ],
+  },
+  {
+    id: "knowledge-management",
+    title: "Knowledge management",
+    features: [
+      {
+        title: "Pages",
+        description: "Build knowledge bases for your teams which are\naccessible & shareable.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Real-time Collab",
+        description: "Edit a page together with members in your project,\nteam, or workspace.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Work item Embeds",
+        description: "Embed work items from any project you are a member\nof.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Link-to-work items",
+        description: "Link pages in work items in a separate section in work item\ndetails.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Publish",
+        description:
+          "Put your pages on the web for external users and let\nthem comment without signing into your workspace.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Wiki",
+        description: "Create company-wide wikis or knowledge bases\nwithout creating a project.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Exports",
+        description: "Export page content into PDFs or Word-compatible\ndocs.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: "One download\nat a time",
+          business: "Queued downloads",
+          enterprise: "Queued downloads",
+        },
+      },
+      {
+        title: "Templates",
+        description: "Use pages as templates for your project, team, or\nworkspace.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Versions",
+        description: "See restorable version of edits to your pages.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: "2 days",
+          business: "3 months",
+          enterprise: "Unlimited",
+        },
+      },
+      {
+        title: "Databases + Formulas",
+        description:
+          "Put databases and formulas into a page without\nworrying about losing text, images, or other content\ntypes.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Nested Pages",
+        description: "Pages inside a page, organize your pages\nas you see fit for the progressive\ndisclosure.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: "Word-compatible + other format downloads",
+          enterprise: "Word-compatible + other format downloads",
+        },
+      },
+    ],
+  },
+  {
+    id: "importers",
+    title: "Importers",
+    features: [
+      {
+        title: "Jira",
+        description: "Import your work items and members from Jira.",
+        cloud: {
+          free: "Without custom props",
+          one: "Without custom props",
+          pro: "With custom props",
+          business: "With custom props",
+          enterprise: "With custom props",
+        },
+      },
+      {
+        title: "GitHub",
+        description: "Import your work items and members from GitHub.",
+        cloud: {
+          free: "Without custom props",
+          one: "Without custom props",
+          pro: "With custom props",
+          business: "With custom props",
+          enterprise: "With custom props",
+        },
+      },
+    ],
+  },
+  {
+    id: "integrations",
+    title: "Integrations",
+    comingSoon: true,
+    features: [
+      {
+        title: "GitHub",
+        description:
+          "Sync Plane work items and states to GitHub work items and\nstates. Update GitHub automatically with activity\nfrom Plane and vice-versa.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Slack",
+        description: "Get Plane activity in Slack and use / commands in\nSlack to make changes in Plane.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Zapier",
+        description: "Run if-then-else automations using Zapier.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Zendesk",
+        description: "Create Plane work items from Zendesk tickets.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Freshdesk",
+        description: "Create Plane work items from Freshdesk tickets.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+    ],
+  },
+  {
+    id: "storage",
+    title: "Storage",
+    cloudOnly: true,
+    features: [
+      {
+        title: "Space",
+        description: "Total storage allowed per workspace",
+        cloud: {
+          free: "5GB",
+          one: false,
+          pro: "1 TB",
+          business: "5 TB",
+          enterprise: "Custom",
+        },
+      },
+      {
+        title: "Max file size",
+        description: "Limit for uploads to your workspace",
+        cloud: {
+          free: "5 MB",
+          one: false,
+          pro: "100 MB",
+          business: "200 MB",
+          enterprise: "Custom",
+        },
+      },
+    ],
+  },
+  {
+    id: "security",
+    title: "Security",
+    features: [
+      {
+        title: "SAML",
+        description: "Get the officially supported SAML implementation\nand make Plane secure with any IdP.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "OIDC",
+        description: "Get the officially supported OIDC implementation\nand make Plane secure with any IdP.",
+        selfHostedOnly: true,
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Domain Security",
+        description:
+          "Choose other domains that can authenticate into\nyour Plane workspace or restrict all but one domain.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Two-factor authentication and passkeys",
+        description: "Secure your Plane workspace with device-\ndependent two-factor authentication and passkeys. ",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Password Policy",
+        description: "Set custom password policies in line with your\ncompliance requirements.",
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "LDAP",
+        description: "Get our official LDAP implementation and secure\nyour Plane workspace with your LDAP server.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: false,
+          enterprise: true,
+        },
+      },
+    ],
+  },
+  {
+    id: "self-hosted",
+    title: "Self-hosted",
+    selfHostedOnly: true,
+    features: [
+      {
+        title: "God Mode",
+        description: "Manage your self-hosted Plane instance better with\nan instance admin interface.",
+        cloud: {
+          free: true,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "One-click Deployment",
+        description: "Install and deploy your self-hosted Plane to any\nprivate cloud with a single-line command.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Digital Ocean Marketplace app",
+        description: "Get our Digital Ocean-compatible app on their\nmarketplace.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Heroku Platform app",
+        description: "Get our Heroku Platform-compatible app and deploy\nto Heroku easily.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "AWS AMI",
+        description: "Get our AMI-compatible app from the AWS\nmarketplace.",
+        cloud: {
+          free: false,
+          one: true,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+      {
+        title: "Private deployments",
+        description: "Get our hosted Cloud app on a private Cloud\nmanaged by us.",
+        comingSoon: true,
+        cloud: {
+          free: false,
+          one: false,
+          pro: false,
+          business: false,
+          enterprise: true,
+        },
+      },
+    ],
+  },
+  {
+    id: "support",
+    title: "Support",
+    features: [
+      {
+        title: "Channels",
+        description: "Get access to one or more Support channels\nby your plan.",
+        cloud: {
+          free: (
+            <>
+              <ForumIcon className="size-4" />
+            </>
+          ),
+          one: (
+            <div className="flex items-center gap-1">
+              <MailOutline className="size-4 flex-shrink-0" />
+              <ForumIcon className="size-4 flex-shrink-0" />
+            </div>
+          ),
+          pro: (
+            <div className="flex items-center gap-1">
+              <MailOutline className="size-4 flex-shrink-0" />
+              <ForumIcon className="size-4 flex-shrink-0" />
+              <ChatOutline className="size-4 flex-shrink-0" />
+            </div>
+          ),
+          business: "Full-suite\nprofessional services",
+          enterprise: "Full-suite\nprofessional services",
+        },
+      },
+      {
+        title: "SLA",
+        description: (
+          <>
+            Get business-friendly SLAs with higher plans. SLAs are by priority of work item and tiers{" "}
+            <a href="https://plane.so/talk-to-sales" target="_blank" rel="noopener noreferrer" className="underline">
+              can be requested
+            </a>
+            .
+          </>
+        ),
+        cloud: {
+          free: false,
+          one: false,
+          pro: true,
+          business: true,
+          enterprise: true,
+        },
+      },
+    ],
+  },
+];
+
+export const PLANE_PLANS: PlanePlans = {
+  planDetails: {
+    free: {
+      id: EProductSubscriptionEnum.FREE,
+      name: "Free",
+      monthlyPrice: 0,
+      yearlyPrice: 0,
+      isActive: true,
+    },
+    one: {
+      id: EProductSubscriptionEnum.ONE,
+      name: "One",
+      monthlyPrice: 799,
+      yearlyPrice: 799,
+      monthlyPriceSecondaryDescription: "per workspace",
+      yearlyPriceSecondaryDescription: "per workspace",
+      buttonCTA: "Upgrade",
+      isActive: false,
+    },
+    pro: {
+      id: EProductSubscriptionEnum.PRO,
+      name: "Pro",
+      monthlyPrice: 8,
+      yearlyPrice: 6,
+      monthlyPriceSecondaryDescription: "billed monthly",
+      yearlyPriceSecondaryDescription: "billed yearly",
+      buttonCTA: "Upgrade",
+      isActive: true,
+    },
+    business: {
+      id: EProductSubscriptionEnum.BUSINESS,
+      name: "Business",
+      monthlyPriceSecondaryDescription: "billed monthly",
+      yearlyPriceSecondaryDescription: "billed yearly",
+      buttonCTA: "Talk to Sales",
+      isActive: false,
+    },
+    enterprise: {
+      id: EProductSubscriptionEnum.ENTERPRISE,
+      name: "Enterprise",
+      monthlyPriceSecondaryDescription: "billed monthly",
+      yearlyPriceSecondaryDescription: "billed yearly",
+      buttonCTA: "Talk to Sales",
+      isActive: false,
+    },
+  },
+  planHighlights: {
+    free: ["Upto 12 users", "Pages", "Unlimited projects", "Unlimited cycles and modules"],
+    one: ["Upto 50 users", "OIDC and SAML", "Active cycles", "Limited time tracking"],
+    pro: ["Unlimited users", "Custom work items + Properties", "Work item templates", "Full Time Tracking"],
+    business: ["RBAC", "Project Templates", "Baselines And Deviations", "Custom Reports"],
+    enterprise: ["Private + managed deployments", "GAC", "LDAP support", "Databases + Formulas"],
+  },
+  planComparison: PLANS_COMPARISON_LIST,
+};
diff --git a/apps/web/core/components/workspace/billing/comparison/root.tsx b/apps/web/core/components/workspace/billing/comparison/root.tsx
new file mode 100644
index 0000000..1c04554
--- /dev/null
+++ b/apps/web/core/components/workspace/billing/comparison/root.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import type { EProductSubscriptionEnum, TBillingFrequency } from "@plane/types";
+// components
+import { PlansComparisonBase, shouldRenderPlanDetail } from "@/components/workspace/billing/comparison/base";
+import type { TPlanePlans } from "@/components/workspace/billing/comparison/plans";
+import { PLANE_PLANS } from "@/components/workspace/billing/comparison/plans";
+// plane web imports
+import { PlanDetail } from "./plan-detail";
+
+type TPlansComparisonProps = {
+  isCompareAllFeaturesSectionOpen: boolean;
+  getBillingFrequency: (subscriptionType: EProductSubscriptionEnum) => TBillingFrequency | undefined;
+  setBillingFrequency: (subscriptionType: EProductSubscriptionEnum, frequency: TBillingFrequency) => void;
+  setIsCompareAllFeaturesSectionOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export const PlansComparison = observer(function PlansComparison(props: TPlansComparisonProps) {
+  const {
+    isCompareAllFeaturesSectionOpen,
+    getBillingFrequency,
+    setBillingFrequency,
+    setIsCompareAllFeaturesSectionOpen,
+  } = props;
+  // plan details
+  const { planDetails } = PLANE_PLANS;
+
+  return (
+    <PlansComparisonBase
+      planeDetails={Object.entries(planDetails).map(([planKey, plan]) => {
+        const currentPlanKey = planKey as TPlanePlans;
+        if (!shouldRenderPlanDetail(currentPlanKey)) return null;
+        return (
+          <PlanDetail
+            key={planKey}
+            subscriptionType={plan.id}
+            planDetail={plan}
+            billingFrequency={getBillingFrequency(plan.id)}
+            setBillingFrequency={(frequency) => setBillingFrequency(plan.id, frequency)}
+          />
+        );
+      })}
+      isSelfManaged
+      isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+      setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+    />
+  );
+});
diff --git a/apps/web/core/components/workspace/billing/index.ts b/apps/web/core/components/workspace/billing/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/workspace/billing/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/workspace/billing/root.tsx b/apps/web/core/components/workspace/billing/root.tsx
new file mode 100644
index 0000000..33100a4
--- /dev/null
+++ b/apps/web/core/components/workspace/billing/root.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { DEFAULT_PRODUCT_BILLING_FREQUENCY, SUBSCRIPTION_WITH_BILLING_FREQUENCY } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TBillingFrequency, TProductBillingFrequency } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+import { SettingsHeading } from "@/components/settings/heading";
+// local imports
+import { PlansComparison } from "./comparison/root";
+
+export const BillingRoot = observer(function BillingRoot() {
+  const [isCompareAllFeaturesSectionOpen, setIsCompareAllFeaturesSectionOpen] = useState(false);
+  const [productBillingFrequency, setProductBillingFrequency] = useState<TProductBillingFrequency>(
+    DEFAULT_PRODUCT_BILLING_FREQUENCY
+  );
+  const { t } = useTranslation();
+
+  /**
+   * Retrieves the billing frequency for a given subscription type
+   * @param {EProductSubscriptionEnum} subscriptionType - Type of subscription to get frequency for
+   * @returns {TBillingFrequency | undefined} - Billing frequency if subscription supports it, undefined otherwise
+   */
+  const getBillingFrequency = (subscriptionType: EProductSubscriptionEnum): TBillingFrequency | undefined =>
+    SUBSCRIPTION_WITH_BILLING_FREQUENCY.includes(subscriptionType)
+      ? productBillingFrequency[subscriptionType]
+      : undefined;
+
+  /**
+   * Updates the billing frequency for a specific subscription type
+   * @param {EProductSubscriptionEnum} subscriptionType - Type of subscription to update
+   * @param {TBillingFrequency} frequency - New billing frequency to set
+   * @returns {void}
+   */
+  const setBillingFrequency = (subscriptionType: EProductSubscriptionEnum, frequency: TBillingFrequency): void =>
+    setProductBillingFrequency({ ...productBillingFrequency, [subscriptionType]: frequency });
+
+  return (
+    <section className="relative scrollbar-hide size-full overflow-y-auto">
+      <div>
+        <SettingsHeading
+          title={t("workspace_settings.settings.billing_and_plans.heading")}
+          description={t("workspace_settings.settings.billing_and_plans.description")}
+        />
+        <div className="mt-6">
+          <SettingsBoxedControlItem
+            title="Community"
+            description="Unlimited projects, issues, cycles, modules, pages, and storage"
+          />
+        </div>
+      </div>
+      <div className="mt-10 flex flex-col gap-y-3">
+        <h4 className="text-h6-semibold">All plans</h4>
+        <PlansComparison
+          isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+          getBillingFrequency={getBillingFrequency}
+          setBillingFrequency={setBillingFrequency}
+          setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+        />
+      </div>
+    </section>
+  );
+});
diff --git a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
new file mode 100644
index 0000000..274b65f
--- /dev/null
+++ b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { WarningTriangleOutline } from "@makeplane/propel/icons";
+// ui
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useUser } from "@/hooks/store/user";
+
+export type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: () => Promise<void>;
+  userDetails: {
+    id: string;
+    display_name: string;
+  };
+};
+
+export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMemberRemove(props: Props) {
+  const { isOpen, onClose, onSubmit, userDetails } = props;
+  // states
+  const [isRemoving, setIsRemoving] = useState(false);
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { t } = useTranslation();
+
+  const handleClose = () => {
+    onClose();
+    setIsRemoving(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsRemoving(true);
+
+    await onSubmit();
+
+    handleClose();
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="sm:flex sm:items-start">
+          <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-danger-subtle sm:mx-0 sm:h-10 sm:w-10">
+            <WarningTriangleOutline className="h-6 w-6 text-danger-primary" aria-hidden="true" />
+          </div>
+          <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+            <h3 className="text-h5-medium leading-6 text-primary">
+              {currentUser?.id === userDetails.id ? "Leave workspace?" : `Remove ${userDetails?.display_name}?`}
+            </h3>
+            <div className="mt-2">
+              {currentUser?.id === userDetails.id ? (
+                <p className="text-body-xs-regular text-secondary">
+                  {t("workspace_settings.settings.members.leave_confirmation")}
+                </p>
+              ) : (
+                <p className="text-body-xs-regular text-secondary">
+                  {/* TODO: Add translation here */}
+                  Are you sure you want to remove member- <span className="font-bold">{userDetails?.display_name}</span>
+                  ? They will no longer have access to this workspace. This action cannot be undone.
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex justify-end gap-2 p-4 sm:px-6">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          {t("cancel")}
+        </Button>
+        <Button variant="error-fill" size="lg" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
+          {currentUser?.id === userDetails.id
+            ? isRemoving
+              ? t("leaving")
+              : t("leave")
+            : isRemoving
+              ? t("removing")
+              : t("remove")}
+        </Button>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/workspace/content-wrapper.tsx b/apps/web/core/components/workspace/content-wrapper.tsx
new file mode 100644
index 0000000..3d605d6
--- /dev/null
+++ b/apps/web/core/components/workspace/content-wrapper.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { cn } from "@plane/utils";
+import { AppRailRoot } from "@/components/navigation";
+import { useAppRailVisibility } from "@/lib/app-rail";
+import { TopNavigationRoot } from "@/components/navigation/top-navigation-root";
+
+export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Use the context to determine if app rail should render
+  const { shouldRenderAppRail } = useAppRailVisibility();
+
+  return (
+    <div className="relative flex size-full flex-col overflow-hidden bg-canvas transition-all duration-300 ease-in-out">
+      <TopNavigationRoot />
+      <div className="relative flex size-full overflow-hidden">
+        {/* Conditionally render AppRailRoot based on context */}
+        {shouldRenderAppRail && <AppRailRoot />}
+        <div
+          className={cn(
+            "relative size-full flex-grow overflow-hidden pr-2 pb-2 pl-2 transition-all duration-300 ease-in-out",
+            {
+              "pl-0!": shouldRenderAppRail,
+            }
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/create-workspace-form.tsx b/apps/web/core/components/workspace/create-workspace-form.tsx
new file mode 100644
index 0000000..ae73a70
--- /dev/null
+++ b/apps/web/core/components/workspace/create-workspace-form.tsx
@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspace } from "@plane/types";
+// ui
+import { CustomSelect } from "@plane/ui";
+import { validateWorkspaceName, validateSlug } from "@plane/utils";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useAppRouter } from "@/hooks/use-app-router";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+
+type Props = {
+  onSubmit?: (res: IWorkspace) => Promise<void>;
+  defaultValues: {
+    name: string;
+    slug: string;
+    organization_size: string;
+  };
+  setDefaultValues: Dispatch<SetStateAction<Pick<IWorkspace, "name" | "slug" | "organization_size">>>;
+  secondaryButton?: React.ReactNode;
+  primaryButtonText?: {
+    loading: string;
+    default: string;
+  };
+};
+
+const workspaceService = new WorkspaceService();
+
+export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props: Props) {
+  const { t } = useTranslation();
+  const {
+    onSubmit,
+    defaultValues,
+    setDefaultValues,
+    secondaryButton,
+    primaryButtonText = {
+      loading: "workspace_creation.button.loading",
+      default: "workspace_creation.button.default",
+    },
+  } = props;
+  // states
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { createWorkspace } = useWorkspace();
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    getValues,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
+
+  const handleCreateWorkspace = async (formData: IWorkspace) => {
+    try {
+      const res = (await workspaceService.workspaceSlugCheck(formData.slug)) as { status: boolean };
+      if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
+        setSlugError(false);
+        try {
+          const workspaceResponse = await createWorkspace(formData);
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: t("workspace_creation.toast.success.title"),
+            message: t("workspace_creation.toast.success.message"),
+          });
+
+          if (onSubmit) await onSubmit(workspaceResponse);
+        } catch {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("workspace_creation.toast.error.title"),
+            message: t("workspace_creation.toast.error.message"),
+          });
+        }
+      } else {
+        setSlugError(true);
+      }
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("workspace_creation.toast.error.title"),
+        message: t("workspace_creation.toast.error.message"),
+      });
+    }
+  };
+
+  useEffect(
+    () => () => {
+      // when the component unmounts set the default values to whatever user typed in
+      setDefaultValues(getValues());
+    },
+    [getValues, setDefaultValues]
+  );
+
+  return (
+    <form
+      className="space-y-6 sm:space-y-9"
+      onSubmit={(e) => {
+        void handleSubmit(handleCreateWorkspace)(e);
+      }}
+    >
+      <div className="space-y-6 sm:space-y-7">
+        <div className="flex flex-col gap-2 text-13">
+          <label htmlFor="workspaceName">
+            {t("workspace_creation.form.name.label")}
+            <span className="ml-0.5 text-danger-primary">*</span>
+          </label>
+          <div className="flex flex-col gap-1">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: t("common.errors.required"),
+                validate: (value) => validateWorkspaceName(value, true),
+                maxLength: {
+                  value: 80,
+                  message: t("workspace_creation.errors.validation.name_length"),
+                },
+              }}
+              render={({ field: { value, ref, onChange } }) => (
+                <Field name="workspaceName" invalid={Boolean(errors.name)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      id="workspaceName"
+                      type="text"
+                      value={value}
+                      onChange={(e) => {
+                        onChange(e.target.value);
+                        setValue("name", e.target.value);
+                        setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
+                          shouldValidate: true,
+                        });
+                      }}
+                      ref={ref}
+                      placeholder={t("workspace_creation.form.name.placeholder")}
+                    />
+                  </InputGroup>
+                </Field>
+              )}
+            />
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2 text-13">
+          <label htmlFor="workspaceUrl">
+            {t("workspace_creation.form.url.label")}
+            <span className="ml-0.5 text-danger-primary">*</span>
+          </label>
+          <Controller
+            control={control}
+            name="slug"
+            rules={{
+              required: t("common.errors.required"),
+              maxLength: {
+                value: 48,
+                message: t("workspace_creation.errors.validation.url_length"),
+              },
+            }}
+            render={({ field: { onChange, value, ref } }) => (
+              <Field name="workspaceUrl" invalid={invalidSlug || Boolean(errors.slug)}>
+                <InputGroup size="2xl">
+                  <span className="text-12 whitespace-nowrap text-secondary">{window && window.location.host}/</span>
+                  <Input
+                    size="2xl"
+                    id="workspaceUrl"
+                    type="text"
+                    value={value.toLocaleLowerCase().trim().replace(/ /g, "-")}
+                    onChange={(e) => {
+                      const validation = validateSlug(e.target.value);
+                      if (validation === true) setInvalidSlug(false);
+                      else setInvalidSlug(true);
+                      onChange(e.target.value.toLowerCase());
+                    }}
+                    ref={ref}
+                    placeholder={t("workspace_creation.form.url.placeholder")}
+                  />
+                </InputGroup>
+              </Field>
+            )}
+          />
+          {slugError && (
+            <p className="-mt-3 text-13 text-danger-primary">
+              {t("workspace_creation.errors.validation.url_already_taken")}
+            </p>
+          )}
+          {invalidSlug && (
+            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+          )}
+          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
+        </div>
+        <div className="flex flex-col gap-2 text-13">
+          <span>
+            {t("workspace_creation.form.organization_size.label")}
+            <span className="ml-0.5 text-danger-primary">*</span>
+          </span>
+          <div className="w-full">
+            <Controller
+              name="organization_size"
+              control={control}
+              rules={{ required: t("common.errors.required") }}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={
+                    ORGANIZATION_SIZE.find((c) => c === value) ?? (
+                      <span className="text-placeholder">
+                        {t("workspace_creation.form.organization_size.placeholder")}
+                      </span>
+                    )
+                  }
+                  buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
+                  input
+                >
+                  {ORGANIZATION_SIZE.map((item) => (
+                    <CustomSelect.Option key={item} value={item}>
+                      {item}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+            {errors.organization_size && (
+              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center gap-4">
+        {secondaryButton}
+        <Button variant="primary" type="submit" size="xl" disabled={!isValid} loading={isSubmitting}>
+          {isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
+        </Button>
+        {!secondaryButton && (
+          <Button variant="secondary" type="button" size="xl" onClick={() => router.back()}>
+            {t("common.go_back")}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/workspace/delete-workspace-form.tsx b/apps/web/core/components/workspace/delete-workspace-form.tsx
new file mode 100644
index 0000000..1a837c5
--- /dev/null
+++ b/apps/web/core/components/workspace/delete-workspace-form.tsx
@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { WarningTriangleOutline } from "@makeplane/propel/icons";
+// Plane Imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspace } from "@plane/types";
+
+import { cn } from "@plane/utils";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserSettings } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  data: IWorkspace | null;
+  onClose: () => void;
+};
+
+const defaultValues = {
+  workspaceName: "",
+  confirmDelete: "",
+};
+
+export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props: Props) {
+  const { data, onClose } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { deleteWorkspace } = useWorkspace();
+  const { t } = useTranslation();
+  const { getWorkspaceRedirectionUrl } = useWorkspace();
+  const { fetchCurrentUserSettings } = useUserSettings();
+  // form info
+  const {
+    control,
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    reset,
+    watch,
+  } = useForm({ defaultValues });
+
+  const canDelete = watch("workspaceName") === data?.name && watch("confirmDelete") === "delete my workspace";
+
+  const handleClose = () => {
+    const timer = setTimeout(() => {
+      reset(defaultValues);
+      clearTimeout(timer);
+    }, 350);
+
+    onClose();
+  };
+
+  const onSubmit = async () => {
+    if (!data || !canDelete) return;
+
+    try {
+      await deleteWorkspace(data.slug);
+      await fetchCurrentUserSettings();
+      handleClose();
+      router.push(getWorkspaceRedirectionUrl());
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("workspace_settings.settings.general.delete_modal.success_title"),
+        message: t("workspace_settings.settings.general.delete_modal.success_message"),
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("workspace_settings.settings.general.delete_modal.error_title"),
+        message: t("workspace_settings.settings.general.delete_modal.error_message"),
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
+      <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-start">
+        <span
+          className={cn(
+            "grid size-12 shrink-0 place-items-center rounded-full bg-danger-subtle text-danger-primary sm:size-10"
+          )}
+        >
+          <WarningTriangleOutline className="size-5 text-danger-primary" aria-hidden="true" />
+        </span>
+        <div>
+          <div className="text-center sm:text-left">
+            <h3 className="text-h5-medium">{t("workspace_settings.settings.general.delete_modal.title")}</h3>
+            <p className="mt-1 text-body-xs-regular text-secondary">
+              You are about to delete the workspace{" "}
+              <span className="text-body-xs-semibold break-words">{data?.name}</span>. If you confirm, you will lose
+              access to all your work data in this workspace without any way to restore it. Tread very carefully.
+            </p>
+          </div>
+
+          <div className="mt-4 text-secondary">
+            <p className="text-body-xs-regular break-words">Type in this workspace's name to continue.</p>
+            <Controller
+              control={control}
+              name="workspaceName"
+              render={({ field: { value, onChange, ref } }) => (
+                <Field name="workspaceName" invalid={Boolean(errors.workspaceName)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      id="workspaceName"
+                      name="workspaceName"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      placeholder={data?.name}
+                      autoComplete="off"
+                    />
+                  </InputGroup>
+                </Field>
+              )}
+            />
+          </div>
+
+          <div className="mt-4 text-secondary">
+            <p className="text-body-xs-regular">
+              For final confirmation, type{" "}
+              <span className="text-body-xs-medium text-primary">delete my workspace </span>
+              below.
+            </p>
+            <Controller
+              control={control}
+              name="confirmDelete"
+              render={({ field: { value, onChange, ref } }) => (
+                <Field name="confirmDelete" invalid={Boolean(errors.confirmDelete)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      id="confirmDelete"
+                      name="confirmDelete"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      placeholder=""
+                      autoComplete="off"
+                    />
+                  </InputGroup>
+                </Field>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          {t("cancel")}
+        </Button>
+        <Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
+          {isSubmitting ? t("deleting") : t("confirm")}
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/workspace/delete-workspace-modal.tsx b/apps/web/core/components/workspace/delete-workspace-modal.tsx
new file mode 100644
index 0000000..19e5e5b
--- /dev/null
+++ b/apps/web/core/components/workspace/delete-workspace-modal.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import type { IWorkspace } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// constants
+// hooks
+
+import { DeleteWorkspaceForm } from "@/components/workspace/delete-workspace-form";
+
+type Props = {
+  isOpen: boolean;
+  data: IWorkspace | null;
+  onClose: () => void;
+};
+
+export const DeleteWorkspaceModal = observer(function DeleteWorkspaceModal(props: Props) {
+  const { isOpen, data, onClose } = props;
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={() => onClose()} position={EModalPosition.CENTER} width={EModalWidth.XL}>
+      <DeleteWorkspaceForm data={data} onClose={onClose} />
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/workspace/delete-workspace-section.tsx b/apps/web/core/components/workspace/delete-workspace-section.tsx
new file mode 100644
index 0000000..6a6f845
--- /dev/null
+++ b/apps/web/core/components/workspace/delete-workspace-section.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IWorkspace } from "@plane/types";
+// components
+import { SettingsBoxedControlItem } from "@/components/settings/boxed-control-item";
+// local imports
+import { DeleteWorkspaceModal } from "./delete-workspace-modal";
+
+type TDeleteWorkspace = {
+  workspace: IWorkspace | null;
+};
+
+export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(props: TDeleteWorkspace) {
+  const { workspace } = props;
+  // states
+  const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false);
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <DeleteWorkspaceModal
+        data={workspace}
+        isOpen={deleteWorkspaceModal}
+        onClose={() => setDeleteWorkspaceModal(false)}
+      />
+      <SettingsBoxedControlItem
+        title={t("workspace_settings.settings.general.delete_workspace")}
+        description={t("workspace_settings.settings.general.delete_workspace_description")}
+        control={
+          <Button variant="error-outline" onClick={() => setDeleteWorkspaceModal(true)}>
+            {t("delete")}
+          </Button>
+        }
+      />
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/edition-badge.tsx b/apps/web/core/components/workspace/edition-badge.tsx
new file mode 100644
index 0000000..b4bebe7
--- /dev/null
+++ b/apps/web/core/components/workspace/edition-badge.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// ui
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+import packageJson from "package.json";
+// local components
+import { Button } from "@plane/propel/button";
+import { PaidPlanUpgradeModal } from "@/components/license/modal/upgrade-modal";
+
+export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
+  // states
+  const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
+  // translation
+  const { t } = useTranslation();
+  // platform
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <>
+      <PaidPlanUpgradeModal
+        isOpen={isPaidPlanPurchaseModalOpen}
+        handleClose={() => setIsPaidPlanPurchaseModalOpen(false)}
+      />
+      <Tooltip label={`Version: v${packageJson.version}`} disabled={isMobile}>
+        <Button
+          variant="tertiary"
+          size="lg"
+          onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
+          aria-haspopup="dialog"
+          aria-label={t("aria_labels.projects_sidebar.edition_badge")}
+        >
+          Community
+        </Button>
+      </Tooltip>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/invite-modal/actions.tsx b/apps/web/core/components/workspace/invite-modal/actions.tsx
new file mode 100644
index 0000000..17a800f
--- /dev/null
+++ b/apps/web/core/components/workspace/invite-modal/actions.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { AddOutline } from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+
+type TInvitationModalActionsProps = {
+  isInviteDisabled?: boolean;
+  isSubmitting?: boolean;
+  handleClose: () => void;
+  appendField: () => void;
+  addMoreButtonText?: string;
+  submitButtonText?: {
+    default: string;
+    loading: string;
+  };
+  cancelButtonText?: string;
+  className?: string;
+};
+
+export const InvitationModalActions = observer(function InvitationModalActions(props: TInvitationModalActionsProps) {
+  const {
+    isInviteDisabled = false,
+    isSubmitting = false,
+    handleClose,
+    appendField,
+    addMoreButtonText,
+    submitButtonText,
+    cancelButtonText,
+    className,
+  } = props;
+  // store hooks
+  const { t } = useTranslation();
+
+  return (
+    <div className={cn("mt-5 flex items-center justify-between gap-2", className)}>
+      <button
+        type="button"
+        className={cn(
+          "flex items-center gap-1 bg-transparent py-2 pr-3 text-caption-md-medium text-accent-primary outline-accent-strong",
+          {
+            "cursor-not-allowed opacity-60": isInviteDisabled,
+          }
+        )}
+        onClick={appendField}
+        disabled={isInviteDisabled}
+      >
+        <AddOutline className="h-3.5 w-3.5" />
+        {addMoreButtonText || t("common.add_more")}
+      </button>
+      <div className="flex items-center gap-2">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
+          {cancelButtonText || t("cancel")}
+        </Button>
+        <Button variant="primary" size="lg" type="submit" loading={isSubmitting} disabled={isInviteDisabled}>
+          {isSubmitting
+            ? submitButtonText?.loading || t("workspace_settings.settings.members.modal.button_loading")
+            : submitButtonText?.default || t("workspace_settings.settings.members.modal.button")}
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/invite-modal/fields.tsx b/apps/web/core/components/workspace/invite-modal/fields.tsx
new file mode 100644
index 0000000..b73f435
--- /dev/null
+++ b/apps/web/core/components/workspace/invite-modal/fields.tsx
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import type { Control, FieldArrayWithId, FormState } from "react-hook-form";
+import { Controller } from "react-hook-form";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { ROLE } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { CustomSelect } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import type { InvitationFormValues } from "@/hooks/use-workspace-invitation";
+
+type TInvitationFieldsProps = {
+  workspaceSlug: string;
+  fields: FieldArrayWithId<InvitationFormValues, "emails", "id">[];
+  control: Control<InvitationFormValues>;
+  formState: FormState<InvitationFormValues>;
+  remove: (index: number) => void;
+  className?: string;
+};
+
+export const InvitationFields = observer(function InvitationFields(props: TInvitationFieldsProps) {
+  const {
+    workspaceSlug,
+    fields,
+    control,
+    formState: { errors },
+    remove,
+    className,
+  } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { workspaceInfoBySlug } = useUserPermissions();
+  // derived values
+  const currentWorkspaceRole = workspaceInfoBySlug(workspaceSlug.toString())?.role;
+
+  return (
+    <div className={cn("mb-3 space-y-4", className)}>
+      {fields.map((field, index) => (
+        <div
+          key={field.id}
+          className="group relative mb-1 flex w-full items-start justify-between gap-x-4 text-body-xs-regular"
+        >
+          <div className="w-full">
+            <Controller
+              control={control}
+              name={`emails.${index}.email`}
+              rules={{
+                required: t("workspace_settings.settings.members.modal.errors.required"),
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: t("workspace_settings.settings.members.modal.errors.invalid"),
+                },
+              }}
+              render={({ field: { value, onChange, ref } }) => (
+                <>
+                  <Field name="input" invalid={Boolean(errors.emails?.[index]?.email)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id={`emails.${index}.email`}
+                        name={`emails.${index}.email`}
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        placeholder={t("workspace_settings.settings.members.modal.placeholder")}
+                      />
+                    </InputGroup>
+                  </Field>
+                  {errors.emails?.[index]?.email && (
+                    <span className="ml-1 text-caption-sm-regular text-danger-primary">
+                      {errors.emails?.[index]?.email?.message}
+                    </span>
+                  )}
+                </>
+              )}
+            />
+          </div>
+          <div className="flex shrink-0 items-center justify-between gap-2">
+            <div className="flex flex-col gap-1">
+              <Controller
+                control={control}
+                name={`emails.${index}.role`}
+                rules={{ required: true }}
+                render={({ field: { value, onChange } }) => (
+                  <CustomSelect
+                    value={value}
+                    label={<span className="text-caption-sm-regular sm:text-body-xs-regular">{ROLE[value]}</span>}
+                    onChange={onChange}
+                    className="w-24 flex-grow"
+                    input
+                  >
+                    {Object.entries(ROLE).map(([key, value]) => {
+                      if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
+                        return (
+                          <CustomSelect.Option key={key} value={parseInt(key)}>
+                            {value}
+                          </CustomSelect.Option>
+                        );
+                    })}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+            {fields.length > 1 && (
+              <div className="flex-item flex w-6">
+                <button
+                  type="button"
+                  className="place-items-center self-center rounded-sm"
+                  onClick={() => remove(index)}
+                >
+                  <CloseOutline className="h-4 w-4 text-secondary" />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/invite-modal/form.tsx b/apps/web/core/components/workspace/invite-modal/form.tsx
new file mode 100644
index 0000000..486fe6d
--- /dev/null
+++ b/apps/web/core/components/workspace/invite-modal/form.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Dialog } from "@headlessui/react";
+
+type TInvitationFormProps = {
+  title: string;
+  description: React.ReactNode;
+  children: React.ReactNode;
+  onSubmit: () => void;
+  actions: React.ReactNode;
+  className?: string;
+};
+
+export const InvitationForm = observer(function InvitationForm(props: TInvitationFormProps) {
+  const { title, description, children, actions, onSubmit, className } = props;
+
+  return (
+    <form onSubmit={onSubmit} className={className}>
+      <div className="space-y-4">
+        <Dialog.Title as="h3" className="text-body-md-medium leading-6 text-primary">
+          {title}
+        </Dialog.Title>
+        <div className="text-body-xs-regular text-secondary">{description}</div>
+        {children}
+      </div>
+      {actions}
+    </form>
+  );
+});
diff --git a/apps/web/core/components/workspace/logo.tsx b/apps/web/core/components/workspace/logo.tsx
new file mode 100644
index 0000000..7255c3f
--- /dev/null
+++ b/apps/web/core/components/workspace/logo.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { cn, getFileURL } from "@plane/utils";
+
+type Props = {
+  logo: string | null | undefined;
+  name: string | undefined;
+  classNames?: string;
+};
+
+export const WorkspaceLogo = observer(function WorkspaceLogo(props: Props) {
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        `relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
+          !props.logo && "rounded-md bg-accent-primary text-on-color"
+        } ${props.classNames ? props.classNames : ""}`
+      )}
+    >
+      {props.logo && props.logo !== "" ? (
+        <img
+          src={getFileURL(props.logo)}
+          className="absolute top-0 left-0 h-full w-full rounded-md object-cover"
+          alt={t("aria_labels.projects_sidebar.workspace_logo")}
+        />
+      ) : (
+        (props.name?.[0] ?? "...")
+      )}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/members/index.ts b/apps/web/core/components/workspace/members/index.ts
new file mode 100644
index 0000000..a6e8c72
--- /dev/null
+++ b/apps/web/core/components/workspace/members/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./invite-modal";
diff --git a/apps/web/core/components/workspace/members/invite-modal.tsx b/apps/web/core/components/workspace/members/invite-modal.tsx
new file mode 100644
index 0000000..5e97a69
--- /dev/null
+++ b/apps/web/core/components/workspace/members/invite-modal.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { IWorkspaceBulkInviteFormData } from "@plane/types";
+import { EModalWidth, EModalPosition, ModalCore } from "@plane/ui";
+// components
+import { InvitationModalActions } from "@/components/workspace/invite-modal/actions";
+import { InvitationFields } from "@/components/workspace/invite-modal/fields";
+import { InvitationForm } from "@/components/workspace/invite-modal/form";
+// hooks
+import { useWorkspaceInvitationActions } from "@/hooks/use-workspace-invitation";
+
+export type TSendWorkspaceInvitationModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: IWorkspaceBulkInviteFormData) => Promise<void> | undefined;
+};
+
+export const SendWorkspaceInvitationModal = observer(function SendWorkspaceInvitationModal(
+  props: TSendWorkspaceInvitationModalProps
+) {
+  const { isOpen, onClose, onSubmit } = props;
+  // store hooks
+  const { t } = useTranslation();
+  // router
+  const { workspaceSlug } = useParams();
+  // derived values
+  const { control, fields, formState, remove, onFormSubmit, handleClose, appendField } = useWorkspaceInvitationActions({
+    onSubmit,
+    onClose,
+  });
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <InvitationForm
+        title={t("workspace_settings.settings.members.modal.title")}
+        description={t("workspace_settings.settings.members.modal.description")}
+        onSubmit={onFormSubmit}
+        actions={
+          <InvitationModalActions
+            isSubmitting={formState.isSubmitting}
+            handleClose={handleClose}
+            appendField={appendField}
+          />
+        }
+        className="p-5"
+      >
+        <InvitationFields
+          workspaceSlug={workspaceSlug.toString()}
+          fields={fields}
+          control={control}
+          formState={formState}
+          remove={remove}
+        />
+      </InvitationForm>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/workspace/settings/invitations-list-item.tsx b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
new file mode 100644
index 0000000..708b63d
--- /dev/null
+++ b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { ROLE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { ChevronDownOutline, DeleteOutline, LinkOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { TContextMenuItem } from "@plane/ui";
+import { CustomSelect, CustomMenu } from "@plane/ui";
+import { cn, copyTextToClipboard } from "@plane/utils";
+// components
+import { ConfirmWorkspaceMemberRemove } from "@/components/workspace/confirm-workspace-member-remove";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUserPermissions } from "@/hooks/store/user";
+
+type Props = {
+  invitationId: string;
+};
+
+export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitationsListItem(props: Props) {
+  const { invitationId } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // states
+  const [removeMemberModal, setRemoveMemberModal] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { allowPermissions, workspaceInfoBySlug } = useUserPermissions();
+  const {
+    workspace: { updateMemberInvitation, deleteMemberInvitation, getWorkspaceInvitationDetails },
+  } = useMember();
+  // derived values
+  const invitationDetails = getWorkspaceInvitationDetails(invitationId);
+  const currentWorkspaceMemberInfo = workspaceInfoBySlug(workspaceSlug.toString());
+  const currentWorkspaceRole = currentWorkspaceMemberInfo?.role;
+  // is the current logged in user admin
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  // role change access-
+  // 1. user cannot change their own role
+  // 2. only admin or member can change role
+  // 3. user cannot change role of higher role
+  const hasRoleChangeAccess = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  const handleRemoveInvitation = async () => {
+    try {
+      if (!workspaceSlug || !invitationDetails) return;
+
+      await deleteMemberInvitation(workspaceSlug.toString(), invitationDetails.id);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Invitation removed successfully.",
+      });
+    } catch (err: unknown) {
+      const error = err as { error?: string };
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: error?.error || "Something went wrong. Please try again.",
+      });
+    }
+  };
+
+  if (!invitationDetails || !currentWorkspaceMemberInfo) return null;
+
+  const handleCopyText = async () => {
+    try {
+      const inviteLink = new URL(invitationDetails.invite_link, window.location.origin).href;
+      await copyTextToClipboard(inviteLink);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("common.link_copied"),
+        message: t("entity.link_copied_to_clipboard", { entity: t("common.invite") }),
+      });
+    } catch (error) {
+      console.error("Error generating invite link:", error);
+    }
+  };
+
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "copy-link",
+      action: () => void handleCopyText(),
+      title: t("common.actions.copy_link"),
+      icon: LinkOutline,
+      shouldRender: !!invitationDetails.invite_link,
+    },
+    {
+      key: "remove",
+      action: () => {
+        setRemoveMemberModal(true);
+      },
+      title: t("common.remove"),
+      icon: DeleteOutline,
+      shouldRender: isAdmin,
+      className: "text-danger-primary",
+      iconClassName: "text-danger-primary",
+    },
+  ];
+
+  return (
+    <>
+      <ConfirmWorkspaceMemberRemove
+        isOpen={removeMemberModal}
+        onClose={() => setRemoveMemberModal(false)}
+        userDetails={{
+          id: invitationDetails.id,
+          display_name: `${invitationDetails.email}`,
+        }}
+        onSubmit={handleRemoveInvitation}
+      />
+      <div className="group flex h-full w-full items-center justify-between px-3 py-4 hover:bg-layer-transparent-hover">
+        <div className="flex items-center gap-x-4 gap-y-2">
+          <span className="relative flex h-10 w-10 items-center justify-center rounded-sm bg-layer-3 p-4 text-tertiary capitalize">
+            {(invitationDetails.email ?? "?")[0]}
+          </span>
+          <div>
+            <h4 className="cursor-default text-body-xs-regular">{invitationDetails.email}</h4>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 text-11">
+          <div className="flex items-center justify-center rounded-sm bg-label-yellow-bg-strong/20 px-2.5 py-1 text-center text-caption-sm-medium text-label-yellow-text">
+            <p>{t("common.pending")}</p>
+          </div>
+          <CustomSelect
+            customButton={
+              <div className="item-center flex gap-1 rounded-sm px-2 py-0.5">
+                <span
+                  className={`flex items-center rounded-sm text-caption-sm-medium ${
+                    hasRoleChangeAccess ? "" : "text-placeholder"
+                  }`}
+                >
+                  {ROLE[invitationDetails.role]}
+                </span>
+                {hasRoleChangeAccess && (
+                  <span className="grid place-items-center">
+                    <ChevronDownOutline className="h-3 w-3" />
+                  </span>
+                )}
+              </div>
+            }
+            value={invitationDetails.role}
+            onChange={(value: EUserPermissions) => {
+              if (!workspaceSlug || !value) return;
+
+              updateMemberInvitation(workspaceSlug.toString(), invitationDetails.id, {
+                role: value,
+              }).catch((err: unknown) => {
+                const error = err as { error?: string };
+                setToast({
+                  type: TOAST_TYPE.ERROR,
+                  title: "Error!",
+                  message: error?.error || "An error occurred while updating member role. Please try again.",
+                });
+              });
+            }}
+            disabled={!hasRoleChangeAccess}
+            placement="bottom-end"
+          >
+            {Object.keys(ROLE).map((key) => {
+              if (
+                currentWorkspaceRole &&
+                Number(currentWorkspaceRole) !== 20 &&
+                Number(currentWorkspaceRole) < parseInt(key)
+              )
+                return null;
+
+              return (
+                <CustomSelect.Option key={key} value={parseInt(key, 10)}>
+                  <>{ROLE[parseInt(key) as keyof typeof ROLE]}</>
+                </CustomSelect.Option>
+              );
+            })}
+          </CustomSelect>
+          {isAdmin && (
+            <CustomMenu ellipsis placement="bottom-end" closeOnSelect>
+              {MENU_ITEMS.map((item) => {
+                if (item.shouldRender === false) return null;
+                return (
+                  <CustomMenu.MenuItem
+                    key={item.key}
+                    onClick={() => {
+                      item.action();
+                    }}
+                    className={cn(
+                      "flex items-center gap-2",
+                      {
+                        "text-placeholder": item.disabled,
+                      },
+                      item.className
+                    )}
+                    disabled={item.disabled}
+                  >
+                    {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+                    <div>
+                      <h5>{item.title}</h5>
+                      {item.description && (
+                        <p
+                          className={cn("whitespace-pre-line text-tertiary", {
+                            "text-placeholder": item.disabled,
+                          })}
+                        >
+                          {item.description}
+                        </p>
+                      )}
+                    </div>
+                  </CustomMenu.MenuItem>
+                );
+              })}
+            </CustomMenu>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/settings/member-columns.tsx b/apps/web/core/components/workspace/settings/member-columns.tsx
new file mode 100644
index 0000000..54e7118
--- /dev/null
+++ b/apps/web/core/components/workspace/settings/member-columns.tsx
@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { Controller, useForm } from "react-hook-form";
+
+import { Disclosure } from "@headlessui/react";
+// plane imports
+import { ROLE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { DeactivatedUserOutline, DeleteOutline } from "@makeplane/propel/icons";
+import { Pill, EPillVariant, EPillSize } from "@plane/propel/pill";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IUser, IWorkspaceMember } from "@plane/types";
+// plane ui
+import { CustomSelect, PopoverMenu } from "@plane/ui";
+// helpers
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+
+export interface RowData {
+  member: IWorkspaceMember;
+  role: EUserPermissions;
+  is_active: boolean;
+}
+
+type NameProps = {
+  rowData: RowData;
+  workspaceSlug: string;
+  isAdmin: boolean;
+  currentUser: IUser | undefined;
+  setRemoveMemberModal: (rowData: RowData) => void;
+};
+
+type AccountTypeProps = {
+  rowData: RowData;
+  workspaceSlug: string;
+};
+
+export function NameColumn(props: NameProps) {
+  const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
+  // derived values
+  const { avatar_url, display_name, email, first_name, id, last_name } = rowData.member;
+  const isSuspended = rowData.is_active === false;
+
+  return (
+    <Disclosure>
+      {() => (
+        <div className="group relative">
+          <div className="flex w-72 items-center justify-between gap-x-4 gap-y-2">
+            <div className="flex flex-1 items-center gap-x-2 gap-y-2">
+              {isSuspended ? (
+                <div className="rounded-full bg-layer-1">
+                  <DeactivatedUserOutline className="size-6 text-placeholder" />
+                </div>
+              ) : avatar_url && avatar_url.trim() !== "" ? (
+                <Link href={`/${workspaceSlug}/profile/${id}`}>
+                  <span className="relative flex size-6 items-center justify-center rounded-full text-on-color capitalize">
+                    <img
+                      src={getFileURL(avatar_url)}
+                      className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
+                      alt={display_name || email}
+                    />
+                  </span>
+                </Link>
+              ) : (
+                <Link href={`/${workspaceSlug}/profile/${id}`}>
+                  <span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-tertiary capitalize">
+                    {(email ?? display_name ?? "?")[0]}
+                  </span>
+                </Link>
+              )}
+              <span className={isSuspended ? "text-placeholder" : ""}>
+                {first_name} {last_name}
+              </span>
+            </div>
+
+            {!isSuspended && (isAdmin || id === currentUser?.id) && (
+              <PopoverMenu
+                data={[""]}
+                keyExtractor={(item) => item}
+                popoverClassName="justify-end"
+                buttonClassName="outline-none	origin-center rotate-90 size-8 aspect-square flex-shrink-0 grid place-items-center opacity-0 group-hover:opacity-100 transition-opacity"
+                render={() => (
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    className="flex cursor-pointer items-center gap-x-3"
+                    onClick={() => setRemoveMemberModal(rowData)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        setRemoveMemberModal(rowData);
+                      }
+                    }}
+                  >
+                    <DeleteOutline className="size-3.5 align-middle" /> {id === currentUser?.id ? "Leave " : "Remove "}
+                  </div>
+                )}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </Disclosure>
+  );
+}
+
+export const AccountTypeColumn = observer(function AccountTypeColumn(props: AccountTypeProps) {
+  const { rowData, workspaceSlug } = props;
+  // form info
+  const {
+    control,
+    formState: { errors },
+  } = useForm();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+
+  const {
+    workspace: { updateMember },
+  } = useMember();
+  const { data: currentUser } = useUser();
+
+  // derived values
+  const isCurrentUser = currentUser?.id === rowData.member.id;
+  const isAdminRole = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const isRoleNonEditable = isCurrentUser || !isAdminRole;
+  const isSuspended = rowData.is_active === false;
+
+  return (
+    <>
+      {isSuspended ? (
+        <div className="flex w-32">
+          <Pill variant={EPillVariant.DEFAULT} size={EPillSize.SM} className="border-none">
+            Suspended
+          </Pill>
+        </div>
+      ) : isRoleNonEditable ? (
+        <div className="flex w-32">
+          <span>{ROLE[rowData.role]}</span>
+        </div>
+      ) : (
+        <Controller
+          name="role"
+          control={control}
+          rules={{ required: "Role is required." }}
+          render={({ field: { value } }) => (
+            <CustomSelect
+              value={value as EUserPermissions}
+              onChange={async (value: EUserPermissions) => {
+                if (!workspaceSlug) return;
+                try {
+                  await updateMember(workspaceSlug.toString(), rowData.member.id, {
+                    role: value as unknown as EUserPermissions,
+                  });
+                } catch (err: unknown) {
+                  const error = err as { error?: string | string[] };
+                  const errorString = Array.isArray(error?.error) ? error.error[0] : error?.error;
+
+                  setToast({
+                    type: TOAST_TYPE.ERROR,
+                    title: "Error!",
+                    message: errorString ?? "An error occurred while updating member role. Please try again.",
+                  });
+                }
+              }}
+              label={
+                <div className="flex">
+                  <span>{ROLE[rowData.role]}</span>
+                </div>
+              }
+              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
+              className="w-32 rounded-md p-0"
+              input
+            >
+              {Object.keys(ROLE).map((item) => (
+                <CustomSelect.Option key={item} value={item as unknown as EUserPermissions}>
+                  {ROLE[item as unknown as keyof typeof ROLE]}
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
+        />
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/settings/members-list-item.tsx b/apps/web/core/components/workspace/settings/members-list-item.tsx
new file mode 100644
index 0000000..8ae6651
--- /dev/null
+++ b/apps/web/core/components/workspace/settings/members-list-item.tsx
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty } from "lodash-es";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspaceMember } from "@plane/types";
+import { Table } from "@plane/ui";
+// components
+import { MembersLayoutLoader } from "@/components/ui/loader/layouts/members-layout-loader";
+import { ConfirmWorkspaceMemberRemove } from "@/components/workspace/confirm-workspace-member-remove";
+import type { RowData } from "@/components/workspace/settings/member-columns";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserPermissions, useUserSettings } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web imports
+import { useMemberColumns } from "@/components/workspace/settings/useMemberColumns";
+
+type Props = {
+  memberDetails: (IWorkspaceMember | null)[];
+};
+
+export const WorkspaceMembersListItem = observer(function WorkspaceMembersListItem(props: Props) {
+  const { memberDetails } = props;
+  const { columns, workspaceSlug, removeMemberModal, setRemoveMemberModal } = useMemberColumns();
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    workspace: { removeMemberFromWorkspace },
+  } = useMember();
+  const { leaveWorkspace } = useUserPermissions();
+  const { getWorkspaceRedirectionUrl } = useWorkspace();
+  const { fetchCurrentUserSettings } = useUserSettings();
+  const { t } = useTranslation();
+  // derived values
+
+  const handleLeaveWorkspace = async () => {
+    if (!workspaceSlug || !currentUser) return;
+
+    try {
+      await leaveWorkspace(workspaceSlug.toString());
+      await fetchCurrentUserSettings();
+      router.push(getWorkspaceRedirectionUrl());
+    } catch (err: unknown) {
+      const error = err as { error?: string };
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: error?.error || t("something_went_wrong_please_try_again"),
+      });
+    }
+  };
+
+  const handleRemoveMember = async (memberId: string) => {
+    if (!workspaceSlug || !memberId) return;
+
+    try {
+      await removeMemberFromWorkspace(workspaceSlug.toString(), memberId);
+    } catch (err: unknown) {
+      const error = err as { error?: string };
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: error?.error || t("something_went_wrong_please_try_again"),
+      });
+    }
+  };
+
+  const handleRemove = async (memberId: string) => {
+    if (memberId === currentUser?.id) await handleLeaveWorkspace();
+    else await handleRemoveMember(memberId);
+  };
+
+  // is the member current logged in user
+  // const isCurrentUser = memberDetails?.member.id === currentUser?.id;
+  // is the current logged in user admin
+  // role change access-
+  // 1. user cannot change their own role
+  // 2. only admin or member can change role
+  // 3. user cannot change role of higher role
+
+  if (isEmpty(columns)) return <MembersLayoutLoader />;
+
+  return (
+    <div className="grid border-t border-subtle">
+      {removeMemberModal && (
+        <ConfirmWorkspaceMemberRemove
+          isOpen={removeMemberModal.member.id.length > 0}
+          onClose={() => setRemoveMemberModal(null)}
+          userDetails={{
+            id: removeMemberModal.member.id,
+            display_name: removeMemberModal.member.display_name || "",
+          }}
+          onSubmit={() => handleRemove(removeMemberModal.member.id)}
+        />
+      )}
+      <Table<RowData>
+        columns={columns ?? []}
+        data={
+          (memberDetails?.filter((member): member is IWorkspaceMember => member !== null) ?? []) as unknown as RowData[]
+        }
+        keyExtractor={(rowData) => rowData?.member.id ?? ""}
+        tHeadClassName="border-b border-subtle"
+        thClassName="text-left font-medium divide-x-0 text-placeholder"
+        tBodyClassName="divide-y-0"
+        tBodyTrClassName="divide-x-0 p-4 h-10 text-secondary"
+        tHeadTrClassName="divide-x-0"
+      />
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/settings/members-list.tsx b/apps/web/core/components/workspace/settings/members-list.tsx
new file mode 100644
index 0000000..99c75a9
--- /dev/null
+++ b/apps/web/core/components/workspace/settings/members-list.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// plane imports
+import { Collapsible } from "@makeplane/propel/components/collapsible";
+import { useTranslation } from "@plane/i18n";
+// components
+import { CountChip } from "@/components/common/count-chip";
+import { MembersSettingsLoader } from "@/components/ui/loader/settings/members";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// local imports
+import { WorkspaceInvitationsListItem } from "./invitations-list-item";
+import { WorkspaceMembersListItem } from "./members-list-item";
+
+export const WorkspaceMembersList = observer(function WorkspaceMembersList(props: {
+  searchQuery: string;
+  isAdmin: boolean;
+}) {
+  const { searchQuery, isAdmin } = props;
+  const [showPendingInvites, setShowPendingInvites] = useState<boolean>(true);
+
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const {
+    workspace: {
+      fetchWorkspaceMembers,
+      fetchWorkspaceMemberInvitations,
+      workspaceMemberIds,
+      getFilteredWorkspaceMemberIds,
+      getSearchedWorkspaceMemberIds,
+      workspaceMemberInvitationIds,
+      getSearchedWorkspaceInvitationIds,
+      getWorkspaceMemberDetails,
+    },
+  } = useMember();
+  const { t } = useTranslation();
+  // fetching workspace invitations
+  useSWR(
+    workspaceSlug ? `WORKSPACE_MEMBERS_AND_MEMBER_INVITATIONS_${workspaceSlug.toString()}` : null,
+    workspaceSlug
+      ? async () => {
+          await fetchWorkspaceMemberInvitations(workspaceSlug.toString());
+          await fetchWorkspaceMembers(workspaceSlug.toString());
+        }
+      : null
+  );
+
+  if (!workspaceMemberIds && !workspaceMemberInvitationIds) return <MembersSettingsLoader />;
+
+  // derived values
+  const filteredMemberIds = workspaceSlug ? getFilteredWorkspaceMemberIds(workspaceSlug.toString()) : [];
+  const searchedMemberIds = searchQuery ? getSearchedWorkspaceMemberIds(searchQuery) : filteredMemberIds;
+  const searchedInvitationsIds = getSearchedWorkspaceInvitationIds(searchQuery);
+  const memberDetails = searchedMemberIds
+    ?.map((memberId) => getWorkspaceMemberDetails(memberId))
+    .sort((a, b) => {
+      if (a?.is_active && !b?.is_active) return -1;
+      if (!a?.is_active && b?.is_active) return 1;
+      return 0;
+    });
+
+  return (
+    <>
+      <div className="divide-y-[0.5px] divide-subtle overflow-scroll">
+        {searchedMemberIds?.length !== 0 && <WorkspaceMembersListItem memberDetails={memberDetails ?? []} />}
+        {searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (
+          <h4 className="mt-16 text-center text-body-xs-regular text-placeholder">{t("no_matching_members")}</h4>
+        )}
+      </div>
+      {isAdmin && searchedInvitationsIds && searchedInvitationsIds.length > 0 && (
+        <div className="pt-4">
+          <Collapsible
+            open={showPendingInvites}
+            onOpenChange={setShowPendingInvites}
+            trigger={
+              <span className="inline-flex items-center gap-2 py-2">
+                <span className="text-h5-medium">{t("workspace_settings.settings.members.pending_invites")}</span>
+                {searchedInvitationsIds && <CountChip count={searchedInvitationsIds.length} className="h-5" />}
+              </span>
+            }
+          >
+            <div className="ml-auto items-center gap-1.5 rounded-md bg-surface-1 py-1.5">
+              {searchedInvitationsIds?.map((invitationId) => (
+                <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
+              ))}
+            </div>
+          </Collapsible>
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/settings/useMemberColumns.tsx b/apps/web/core/components/workspace/settings/useMemberColumns.tsx
new file mode 100644
index 0000000..fc60ff5
--- /dev/null
+++ b/apps/web/core/components/workspace/settings/useMemberColumns.tsx
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel, LOGIN_MEDIUM_LABELS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { renderFormattedDate } from "@plane/utils";
+import { MemberHeaderColumn } from "@/components/project/member-header-column";
+import type { RowData } from "@/components/workspace/settings/member-columns";
+import { AccountTypeColumn, NameColumn } from "@/components/workspace/settings/member-columns";
+import { useMember } from "@/hooks/store/use-member";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import type { IMemberFilters } from "@/store/member/utils";
+
+export const useMemberColumns = () => {
+  // states
+  const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
+
+  const { workspaceSlug } = useParams();
+
+  const { data: currentUser } = useUser();
+  const { allowPermissions } = useUserPermissions();
+  const {
+    workspace: {
+      filtersStore: { filters, updateFilters },
+    },
+  } = useMember();
+  const { t } = useTranslation();
+
+  // derived values
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+
+  // oxlint-disable-next-line unicorn/consistent-function-scoping
+  const isSuspended = (rowData: RowData) => rowData.is_active === false;
+
+  // handlers
+  const handleDisplayFilterUpdate = (filterUpdates: Partial<IMemberFilters>) => {
+    updateFilters(filterUpdates);
+  };
+
+  const columns = [
+    {
+      key: "Full name",
+      content: t("workspace_settings.settings.members.details.full_name"),
+      thClassName: "text-left",
+      thRender: () => (
+        <MemberHeaderColumn
+          property="full_name"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+      tdRender: (rowData: RowData) => (
+        <NameColumn
+          rowData={rowData}
+          workspaceSlug={workspaceSlug}
+          isAdmin={isAdmin}
+          currentUser={currentUser}
+          setRemoveMemberModal={setRemoveMemberModal}
+        />
+      ),
+    },
+
+    {
+      key: "Display name",
+      content: t("workspace_settings.settings.members.details.display_name"),
+      tdRender: (rowData: RowData) => (
+        <div className={`w-32 ${isSuspended(rowData) ? "text-placeholder" : ""}`}>{rowData.member.display_name}</div>
+      ),
+      thRender: () => (
+        <MemberHeaderColumn
+          property="display_name"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+    },
+
+    {
+      key: "Email address",
+      content: t("workspace_settings.settings.members.details.email_address"),
+      tdRender: (rowData: RowData) => (
+        <div className={`w-48 truncate ${isSuspended(rowData) ? "text-placeholder" : ""}`}>{rowData.member.email}</div>
+      ),
+      thRender: () => (
+        <MemberHeaderColumn
+          property="email"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+    },
+
+    {
+      key: "Account type",
+      content: t("workspace_settings.settings.members.details.account_type"),
+      thRender: () => (
+        <MemberHeaderColumn
+          property="role"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+      tdRender: (rowData: RowData) => <AccountTypeColumn rowData={rowData} workspaceSlug={workspaceSlug} />,
+    },
+
+    {
+      key: "Authentication",
+      content: t("workspace_settings.settings.members.details.authentication"),
+      tdRender: (rowData: RowData) => {
+        if (isSuspended(rowData)) return null;
+        const loginMedium = rowData.member.last_login_medium;
+        if (!loginMedium) return null;
+        return <div>{LOGIN_MEDIUM_LABELS[loginMedium]}</div>;
+      },
+    },
+
+    {
+      key: "Joining date",
+      content: t("workspace_settings.settings.members.details.joining_date"),
+      tdRender: (rowData: RowData) =>
+        isSuspended(rowData) ? null : <div>{renderFormattedDate(rowData?.member?.joining_date)}</div>,
+      thRender: () => (
+        <MemberHeaderColumn
+          property="joining_date"
+          displayFilters={filters}
+          handleDisplayFilterUpdate={handleDisplayFilterUpdate}
+        />
+      ),
+    },
+  ];
+  return { columns, workspaceSlug, removeMemberModal, setRemoveMemberModal };
+};
diff --git a/apps/web/core/components/workspace/settings/workspace-details.tsx b/apps/web/core/components/workspace/settings/workspace-details.tsx
new file mode 100644
index 0000000..bf96889
--- /dev/null
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -0,0 +1,314 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// Plane Imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { ORGANIZATION_SIZE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { EditOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspace } from "@plane/types";
+import { CustomSelect } from "@plane/ui";
+import { cn, copyUrlToClipboard, getFileURL, validateWorkspaceName } from "@plane/utils";
+// components
+import { WorkspaceImageUploadModal } from "@/components/core/modals/workspace-image-upload-modal";
+import { TimezoneSelect } from "@/components/global/timezone-select";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web components
+import { DeleteWorkspaceSection } from "@/components/workspace/delete-workspace-section";
+
+const defaultValues: Partial<IWorkspace> = {
+  name: "",
+  url: "",
+  organization_size: "2-10",
+  logo_url: null,
+  timezone: "UTC",
+};
+
+export const WorkspaceDetails = observer(function WorkspaceDetails() {
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  // store hooks
+  const { currentWorkspace, updateWorkspace } = useWorkspace();
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+
+  // form info
+  const {
+    handleSubmit,
+    control,
+    reset,
+    watch,
+    formState: { errors },
+  } = useForm<IWorkspace>({
+    defaultValues: { ...defaultValues, ...currentWorkspace },
+  });
+  // derived values
+  const workspaceLogo = watch("logo_url");
+
+  const onSubmit = async (formData: IWorkspace) => {
+    if (!currentWorkspace) return;
+
+    setIsLoading(true);
+
+    const payload: Partial<IWorkspace> = {
+      name: formData.name,
+      organization_size: formData.organization_size,
+      timezone: formData.timezone,
+    };
+
+    try {
+      await updateWorkspace(currentWorkspace.slug, payload);
+      setToast({
+        title: "Success!",
+        type: TOAST_TYPE.SUCCESS,
+        message: "Workspace updated successfully",
+      });
+    } catch (err: unknown) {
+      console.error(err);
+    } finally {
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 300);
+    }
+  };
+
+  const handleRemoveLogo = async () => {
+    if (!currentWorkspace) return;
+
+    try {
+      await updateWorkspace(currentWorkspace.slug, {
+        logo_url: "",
+      });
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Workspace picture removed successfully.",
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "There was some error in deleting your profile picture. Please try again.",
+      });
+    }
+  };
+
+  const handleCopyUrl = () => {
+    if (!currentWorkspace) return;
+
+    void copyUrlToClipboard(`${currentWorkspace.slug}`)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Workspace URL copied to the clipboard.",
+        });
+        return undefined;
+      })
+      .catch(() => {
+        // Silently handle clipboard errors
+      });
+  };
+
+  useEffect(() => {
+    if (currentWorkspace) reset({ ...currentWorkspace });
+  }, [currentWorkspace, reset]);
+
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+
+  if (!currentWorkspace) return null;
+
+  return (
+    <>
+      <Controller
+        control={control}
+        name="logo_url"
+        render={({ field: { onChange, value } }) => (
+          <WorkspaceImageUploadModal
+            isOpen={isImageUploadModalOpen}
+            onClose={() => setIsImageUploadModalOpen(false)}
+            handleRemove={handleRemoveLogo}
+            onSuccess={(imageUrl) => {
+              onChange(imageUrl);
+              setIsImageUploadModalOpen(false);
+            }}
+            value={value}
+          />
+        )}
+      />
+      <div className={cn("flex w-full flex-col gap-y-7", { "opacity-60": !isAdmin })}>
+        <div className="flex items-center gap-5">
+          <div className="flex shrink-0 flex-col gap-1">
+            <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
+              {workspaceLogo && workspaceLogo !== "" ? (
+                <div className="relative flex size-14">
+                  <img
+                    src={getFileURL(workspaceLogo)}
+                    className="absolute top-0 left-0 size-full rounded-md object-cover"
+                    alt="Workspace Logo"
+                  />
+                </div>
+              ) : (
+                <div className="relative grid size-14 place-items-center rounded-md bg-accent-primary text-24 text-on-color uppercase">
+                  {currentWorkspace?.name?.charAt(0) ?? "N"}
+                </div>
+              )}
+            </button>
+          </div>
+          <div className="flex flex-col gap-1">
+            <div className="mb:-my-5 text-h5-semibold leading-6">{watch("name")}</div>
+            <button type="button" onClick={handleCopyUrl} className="text-left text-body-xs-regular tracking-tight">{`${
+              typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "")
+            }/${currentWorkspace.slug}`}</button>
+            {isAdmin && (
+              <button
+                type="button"
+                className="flex items-center gap-1.5 text-left text-caption-sm-medium text-accent-primary"
+                onClick={() => setIsImageUploadModalOpen(true)}
+              >
+                {workspaceLogo && workspaceLogo !== "" ? (
+                  <>
+                    <EditOutline className="h-3 w-3" />
+                    {t("workspace_settings.settings.general.edit_logo")}
+                  </>
+                ) : (
+                  t("workspace_settings.settings.general.upload_logo")
+                )}
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="flex flex-col gap-7">
+          <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-10 xl:grid-cols-2 2xl:grid-cols-3">
+            <div className="flex flex-col gap-2">
+              <h4 className="text-body-sm-medium text-tertiary">{t("workspace_settings.settings.general.name")}</h4>
+              <Controller
+                control={control}
+                name="name"
+                rules={{
+                  validate: (value) => validateWorkspaceName(value, true),
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Field name="name" invalid={Boolean(errors.name)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="name"
+                        name="name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        placeholder={t("workspace_settings.settings.general.name")}
+                        disabled={!isAdmin}
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+              {errors.name && <p className="text-caption-sm-regular text-danger-primary">{errors.name.message}</p>}
+            </div>
+            <div className="flex flex-col gap-2">
+              <h4 className="text-body-sm-medium text-tertiary">
+                {t("workspace_settings.settings.general.company_size")}
+              </h4>
+              <Controller
+                name="organization_size"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <CustomSelect
+                    value={value}
+                    onChange={onChange}
+                    label={
+                      ORGANIZATION_SIZE.find((c) => c === value) ??
+                      t("workspace_settings.settings.general.errors.company_size.select_a_range")
+                    }
+                    buttonClassName="border border-subtle bg-layer-2 !shadow-none !rounded-md"
+                    input
+                    disabled={!isAdmin}
+                  >
+                    {ORGANIZATION_SIZE.map((item) => (
+                      <CustomSelect.Option key={item} value={item}>
+                        {item}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <h4 className="text-body-sm-medium text-tertiary">{t("workspace_settings.settings.general.url")}</h4>
+              <Controller
+                control={control}
+                name="url"
+                render={({ field: { onChange, ref } }) => (
+                  <Field name="url" invalid={Boolean(errors.url)}>
+                    <InputGroup size="2xl">
+                      <Input
+                        size="2xl"
+                        id="url"
+                        name="url"
+                        type="url"
+                        value={`${
+                          typeof window !== "undefined" &&
+                          window.location.origin.replace("http://", "").replace("https://", "")
+                        }/${currentWorkspace.slug}`}
+                        onChange={onChange}
+                        ref={ref}
+                        disabled
+                      />
+                    </InputGroup>
+                  </Field>
+                )}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <h4 className="text-body-sm-medium text-tertiary">
+                {t("workspace_settings.settings.general.workspace_timezone")}
+              </h4>
+              <Controller
+                name="timezone"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <>
+                    <TimezoneSelect value={value} onChange={onChange} disabled={!isAdmin} />
+                  </>
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        {isAdmin && (
+          <div className="flex items-center justify-between py-2">
+            <Button
+              variant="primary"
+              size="lg"
+              onClick={(e) => {
+                void handleSubmit(onSubmit)(e);
+              }}
+              loading={isLoading}
+            >
+              {isLoading ? t("updating") : t("workspace_settings.settings.general.update_workspace")}
+            </Button>
+          </div>
+        )}
+      </div>
+      {isAdmin && (
+        <div className="mt-10">
+          <DeleteWorkspaceSection workspace={currentWorkspace} />
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
new file mode 100644
index 0000000..b4c7f04
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { SettingsOutline, TickOutline, UserPlusOutline } from "@makeplane/propel/icons";
+import { Menu } from "@headlessui/react";
+// plane imports
+import { EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IWorkspace } from "@plane/types";
+import { cn, getFileURL, getUserRole } from "@plane/utils";
+
+type TProps = {
+  workspace: IWorkspace;
+  activeWorkspace: IWorkspace | null;
+  handleItemClick: () => void;
+  handleWorkspaceNavigation: (workspace: IWorkspace) => void;
+  handleClose: () => void;
+};
+const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps) {
+  const { workspace, activeWorkspace, handleItemClick, handleWorkspaceNavigation, handleClose } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { t } = useTranslation();
+
+  return (
+    <Link
+      key={workspace.id}
+      href={`/${workspace.slug}`}
+      onClick={() => {
+        handleWorkspaceNavigation(workspace);
+        handleItemClick();
+      }}
+      className="w-full"
+      id={workspace.id}
+    >
+      <Menu.Item
+        as="div"
+        className={cn("px-4 py-2", {
+          "bg-layer-transparent-active": workspace.id === activeWorkspace?.id,
+          "hover:bg-layer-transparent-hover": workspace.id !== activeWorkspace?.id,
+        })}
+      >
+        <div className="flex items-center justify-between gap-1 rounded-sm p-1 text-13 text-primary">
+          <div className="relative flex w-[80%] items-center justify-start gap-2.5">
+            <span
+              className={`relative flex h-8 w-8 flex-shrink-0 items-center justify-center border-subtle p-2 text-14 font-medium uppercase ${
+                !workspace?.logo_url && "rounded-md bg-[#026292] text-on-color"
+              }`}
+            >
+              {workspace?.logo_url && workspace.logo_url !== "" ? (
+                <img
+                  src={getFileURL(workspace.logo_url)}
+                  className="absolute top-0 left-0 h-full w-full rounded-sm object-cover"
+                  alt={t("workspace_logo")}
+                />
+              ) : (
+                (workspace?.name?.[0] ?? "...")
+              )}
+            </span>
+            <div className="w-[inherit]">
+              <div
+                className={`truncate text-left text-13 font-medium text-ellipsis ${workspaceSlug === workspace.slug ? "" : "text-secondary"}`}
+              >
+                {workspace.name}
+              </div>
+              <div className="flex w-fit gap-2 text-13 text-tertiary capitalize">
+                <span>{getUserRole(workspace.role)?.toLowerCase() || "guest"}</span>
+                <div className="m-auto h-1 w-1 rounded-full bg-layer-1/50" />
+                <span className="capitalize">{t("member", { count: workspace.total_members || 0 })}</span>
+              </div>
+            </div>
+          </div>
+          {workspace.id === activeWorkspace?.id ? (
+            <span className="flex-shrink-0 p-1">
+              <TickOutline className="h-5 w-5 text-primary" />
+            </span>
+          ) : null}
+        </div>
+        {workspace.id === activeWorkspace?.id && (
+          <>
+            <div className="mt-2 mb-1 flex gap-2">
+              {[EUserPermissions.ADMIN, EUserPermissions.MEMBER].includes(workspace?.role) && (
+                <Link
+                  href={`/${workspace.slug}/settings`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleClose();
+                  }}
+                  className="flex gap-1.5 rounded-md border border-strong bg-layer-2 px-2.5 py-1.5 text-secondary transition-colors hover:border-strong hover:text-secondary hover:shadow-raised-100"
+                >
+                  <SettingsOutline className="my-auto h-4 w-4 flex-shrink-0" />
+                  <span className="my-auto text-13 font-medium whitespace-nowrap">{t("settings")}</span>
+                </Link>
+              )}
+              {[EUserPermissions.ADMIN].includes(workspace?.role) && (
+                <Link
+                  href={`/${workspace.slug}/settings/members`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleClose();
+                  }}
+                  className="flex gap-1.5 rounded-md border border-strong bg-layer-2 px-2.5 py-1.5 text-secondary transition-colors hover:border-strong hover:text-secondary hover:shadow-raised-100"
+                >
+                  <UserPlusOutline className="my-auto h-4 w-4 flex-shrink-0" />
+                  <span className="my-auto text-13 font-medium whitespace-nowrap">
+                    {t("project_settings.members.invite_members.title")}
+                  </span>
+                </Link>
+              )}
+            </div>
+          </>
+        )}
+      </Menu.Item>
+    </Link>
+  );
+});
+
+export default SidebarDropdownItem;
diff --git a/apps/web/core/components/workspace/sidebar/extended-sidebar-item.tsx b/apps/web/core/components/workspace/sidebar/extended-sidebar-item.tsx
new file mode 100644
index 0000000..952c651
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -0,0 +1,225 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { PinOutline, UnpinOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { IWorkspaceSidebarNavigationItem } from "@plane/constants";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { DragHandle, DropIndicator } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
+import { UpgradeBadge } from "@/components/workspace/upgrade-badge";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceNavigationPreferences } from "@/hooks/use-navigation-preferences";
+// local imports
+import { getSidebarNavigationItemIcon } from "./helper";
+
+type TExtendedSidebarItemProps = {
+  item: IWorkspaceSidebarNavigationItem;
+  handleOnNavigationItemDrop?: (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => void;
+  disableDrag?: boolean;
+  disableDrop?: boolean;
+  isLastChild: boolean;
+};
+
+export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props: TExtendedSidebarItemProps) {
+  const { item, handleOnNavigationItemDrop, disableDrag = false, disableDrop = false, isLastChild } = props;
+  const { t } = useTranslation();
+  // states
+  const [isDragging, setIsDragging] = useState(false);
+  const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
+  // refs
+  const navigationIemRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
+
+  // nextjs hooks
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { toggleExtendedSidebar } = useAppTheme();
+  const { data } = useUser();
+  const { allowPermissions } = useUserPermissions();
+  const { preferences: workspacePreferences, toggleWorkspaceItem } = useWorkspaceNavigationPreferences();
+
+  // derived values
+  const isPinned = workspacePreferences.items[item.key]?.is_pinned ?? false;
+
+  const handleLinkClick = () => toggleExtendedSidebar(true);
+
+  useEffect(() => {
+    const element = navigationIemRef.current;
+    const dragHandleElement = dragHandleRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => !disableDrag,
+        dragHandle: dragHandleElement ?? undefined,
+        getInitialData: () => ({ id: item.key, dragInstanceId: "NAVIGATION" }), // var1
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) =>
+          !disableDrop && source?.data?.id !== item.key && source?.data?.dragInstanceId === "NAVIGATION",
+        // oxlint-disable-next-line no-shadow
+        getData: ({ input, element }) => {
+          // oxlint-disable-next-line no-shadow
+          const data = { id: item.key };
+
+          // attach instruction for last in list
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+          });
+        },
+        onDrag: ({ self }) => {
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          // check if the highlight is to be shown above or below
+          setInstruction(
+            extractedInstruction
+              ? extractedInstruction === "reorder-below" && isLastChild
+                ? "DRAG_BELOW"
+                : "DRAG_OVER"
+              : undefined
+          );
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ self, source }) => {
+          setInstruction(undefined);
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          const currentInstruction = extractedInstruction
+            ? extractedInstruction === "reorder-below" && isLastChild
+              ? "DRAG_BELOW"
+              : "DRAG_OVER"
+            : undefined;
+          if (!currentInstruction) return;
+
+          const sourceId = source?.data?.id as string | undefined;
+          const destinationId = self?.data?.id as string | undefined;
+
+          if (handleOnNavigationItemDrop)
+            handleOnNavigationItemDrop(sourceId, destinationId, currentInstruction === "DRAG_BELOW");
+        },
+      })
+    );
+  }, [isLastChild, handleOnNavigationItemDrop, disableDrag, disableDrop, item.key]);
+
+  const itemHref =
+    item.key === "your_work"
+      ? `/${workspaceSlug.toString()}${item.href}${data?.id}`
+      : `/${workspaceSlug.toString()}${item.href}`;
+  const isActive = itemHref === pathname;
+
+  const pinNavigationItem = (key: string) => {
+    toggleWorkspaceItem(key, true);
+  };
+
+  const unPinNavigationItem = (key: string) => {
+    toggleWorkspaceItem(key, false);
+  };
+
+  const icon = getSidebarNavigationItemIcon(item.key);
+
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
+    return null;
+  }
+
+  return (
+    <div
+      id={`sidebar-${item.key}`}
+      className={cn("relative", {
+        "bg-layer-1 opacity-60": isDragging,
+      })}
+      ref={navigationIemRef}
+    >
+      <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
+      <div
+        className={cn(
+          "group/project-item relative flex w-full items-center rounded-md text-primary hover:bg-surface-2"
+        )}
+        id={`${item.key}`}
+      >
+        {!disableDrag && (
+          <Tooltip label={t("drag_to_rearrange")} align="start" disabled={isDragging}>
+            <button
+              type="button"
+              className={cn(
+                "absolute top-1/2 -left-3 flex -translate-y-1/2 cursor-grab items-center justify-center rounded text-placeholder opacity-0 group-hover/project-item:opacity-100",
+                {
+                  "cursor-grabbing": isDragging,
+                  "opacity-100": isDragging,
+                }
+              )}
+              ref={dragHandleRef}
+            >
+              <DragHandle className="bg-transparent" />
+            </button>
+          </Tooltip>
+        )}
+        <SidebarNavItem isActive={isActive}>
+          <Link href={itemHref} onClick={() => handleLinkClick()} className="group flex-grow">
+            <div className="flex items-center gap-1.5 py-[1px]">
+              {icon}
+              <p className="text-13 leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+            </div>
+          </Link>
+          <div className="flex items-center gap-2">
+            {item.key === "active_cycles" && (
+              <div className="flex-shrink-0">
+                <UpgradeBadge />
+              </div>
+            )}
+            {isPinned ? (
+              <Tooltip label="Unpin">
+                <UnpinOutline
+                  className="size-3.5 flex-shrink-0 text-placeholder outline-none hover:text-tertiary"
+                  onClick={() => unPinNavigationItem(item.key)}
+                />
+              </Tooltip>
+            ) : (
+              <Tooltip label="Pin">
+                <PinOutline
+                  className="size-3.5 flex-shrink-0 text-placeholder outline-none hover:text-tertiary"
+                  onClick={() => pinNavigationItem(item.key)}
+                />
+              </Tooltip>
+            )}
+          </div>
+        </SidebarNavItem>
+      </div>
+      {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
new file mode 100644
index 0000000..d87cb4f
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -0,0 +1,297 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import type {
+  DragLocationHistory,
+  ElementDragPayload,
+  DropTargetRecord,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+
+import { orderBy } from "lodash-es";
+import { useParams } from "next/navigation";
+import { createRoot } from "react-dom/client";
+import {
+  ChevronRightOutline,
+  DraftsOutline,
+  DragDropOutline,
+  MoreHorizontalOutline,
+  StarFilled,
+} from "@makeplane/propel/icons";
+import { Disclosure, Transition } from "@headlessui/react";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { FavoriteFolderIcon } from "@plane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IFavorite, InstructionType } from "@plane/types";
+import { CustomMenu, DropIndicator, DragHandle } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useFavorite } from "@/hooks/store/use-favorite";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { FavoriteRoot } from "./favorite-items";
+import { getCanDrop, getInstructionFromPayload } from "./favorites.helpers";
+import { NewFavoriteFolder } from "./new-fav-folder";
+
+type Props = {
+  isLastChild: boolean;
+  favorite: IFavorite;
+  handleRemoveFromFavorites: (favorite: IFavorite) => void;
+  handleRemoveFromFavoritesFolder: (favoriteId: string) => void;
+  handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
+};
+
+export function FavoriteFolder(props: Props) {
+  const { favorite, handleRemoveFromFavorites, isLastChild, handleDrop } = props;
+  // store hooks
+  const { fetchGroupedFavorites } = useFavorite();
+  const { isMobile } = usePlatformOS();
+  const { workspaceSlug } = useParams();
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [folderToRename, setFolderToRename] = useState<string | boolean | null>(null);
+  const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
+  // refs
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+  const elementRef = useRef<HTMLDivElement | null>(null);
+  // translation
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (favorite.children === undefined && workspaceSlug) {
+      fetchGroupedFavorites(workspaceSlug.toString(), favorite.id);
+    }
+  }, [favorite.id, favorite.children, workspaceSlug, fetchGroupedFavorites]);
+
+  useEffect(() => {
+    const element = elementRef.current;
+
+    if (!element) return;
+    const initialData = { id: favorite.id, isGroup: true, isChild: false };
+
+    return combine(
+      draggable({
+        element,
+        getInitialData: () => initialData,
+        onDragStart: () => setIsDragging(true),
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
+            render: ({ container }) => {
+              const root = createRoot(container);
+              root.render(
+                <div className="flex gap-1 rounded-sm bg-surface-1 p-1 pr-2 text-13">
+                  <div className="grid size-5 flex-shrink-0 place-items-center">
+                    <FavoriteFolderIcon />
+                  </div>
+                  <p className="truncate text-13 font-medium text-secondary">{favorite.name}</p>
+                </div>
+              );
+              return () => root.unmount();
+            },
+            nativeSetDragImage,
+          });
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        }, // canDrag: () => isDraggable,
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => getCanDrop(source, favorite, false),
+        getData: ({ input, element }) => {
+          const blockedStates: InstructionType[] = [];
+          if (!isLastChild) {
+            blockedStates.push("reorder-below");
+          }
+
+          return attachInstruction(initialData, {
+            input,
+            element,
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+            block: blockedStates,
+          });
+        },
+        onDrag: ({ source, self, location }) => {
+          const instruction = getInstructionFromPayload(self, source, location);
+          setInstruction(instruction);
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ self, source, location }) => {
+          setInstruction(undefined);
+          handleDrop(self, source, location);
+        },
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDragging, favorite.id, isLastChild, favorite.id]);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
+  return folderToRename ? (
+    <NewFavoriteFolder
+      setCreateNewFolder={setFolderToRename}
+      actionType="rename"
+      defaultName={favorite.name}
+      favoriteId={favorite.id}
+    />
+  ) : (
+    <>
+      <Disclosure key={`${favorite.id}`} ref={elementRef} defaultOpen={false}>
+        {({ open }) => (
+          <div
+            // id={`sidebar-${projectId}-${projectListType}`}
+            className={cn("relative", {
+              "bg-layer-1 opacity-60": isDragging,
+              "border-[2px] border-accent-strong": instruction === "make-child",
+            })}
+          >
+            {/* draggable drop top indicator */}
+            <DropIndicator isVisible={instruction === "reorder-above"} />
+            <div
+              className={cn(
+                "group/project-item relative flex w-full items-center rounded-md px-2 py-1.5 text-primary hover:bg-layer-1-hover",
+                {
+                  "bg-surface-2": isMenuActive,
+                }
+              )}
+            >
+              {/* draggable indicator */}
+
+              <div className="absolute left-0 hidden h-3 w-3 flex-shrink-0 cursor-pointer items-center justify-center rounded-xs bg-surface-2 text-secondary transition-colors group-hover:flex hover:text-primary">
+                <DragDropOutline className="h-3 w-3" />
+              </div>
+
+              <>
+                <Tooltip label={`${favorite.name}`} layout="stacked" side="right" sideOffset={40} disabled={isMobile}>
+                  <div className="flex flex-grow truncate">
+                    <Disclosure.Button
+                      as="button"
+                      type="button"
+                      className="flex w-full flex-grow items-center gap-1.5 text-left select-none"
+                    >
+                      <Tooltip
+                        label={favorite.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
+                        align="end"
+                        disabled={isDragging || isMobile}
+                      >
+                        <button
+                          type="button"
+                          className={cn(
+                            "absolute top-1/2 -left-3 hidden -translate-y-1/2 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/project-item:flex",
+                            {
+                              "cursor-not-allowed opacity-60": favorite.sort_order === null,
+                              "cursor-grabbing": isDragging,
+                            }
+                          )}
+                        >
+                          <DragHandle className="bg-transparent" />
+                        </button>
+                      </Tooltip>
+                      <div className="grid size-5 flex-shrink-0 place-items-center">
+                        <FavoriteFolderIcon />
+                      </div>
+                      <p className="truncate text-13 font-medium text-secondary">{favorite.name}</p>
+                    </Disclosure.Button>
+                  </div>
+                </Tooltip>
+                <CustomMenu
+                  customButton={
+                    <span
+                      ref={actionSectionRef}
+                      className="grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1"
+                    >
+                      <MoreHorizontalOutline className="size-3" />
+                    </span>
+                  }
+                  menuButtonOnClick={() => setIsMenuActive(!isMenuActive)}
+                  className={cn(
+                    "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
+                    {
+                      "pointer-events-auto opacity-100": isMenuActive,
+                    }
+                  )}
+                  customButtonClassName="grid place-items-center"
+                  placement="bottom-start"
+                  ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+                >
+                  <CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
+                    <span className="flex items-center justify-start gap-2">
+                      <StarFilled className="text-yellow-500 h-3.5 w-3.5" />
+                      <span>Remove from favorites</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={() => setFolderToRename(favorite.id)}>
+                    <div className="flex items-center justify-start gap-2">
+                      <DraftsOutline className="h-3.5 w-3.5 stroke-[1.5] text-tertiary" />
+                      <span>Rename Folder</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+                <Disclosure.Button
+                  as="button"
+                  type="button"
+                  className={cn("hidden rounded-sm p-0.5 group-hover/project-item:inline-block hover:bg-layer-1", {
+                    "inline-block": isMenuActive,
+                  })}
+                  aria-label={t(
+                    open ? "aria_labels.projects_sidebar.close_folder" : "aria_labels.projects_sidebar.open_folder"
+                  )}
+                >
+                  <ChevronRightOutline
+                    className={cn("size-3 flex-shrink-0 text-placeholder transition-transform", {
+                      "rotate-90": open,
+                    })}
+                  />
+                </Disclosure.Button>
+              </>
+            </div>
+            {favorite.children && favorite.children.length > 0 && (
+              <Transition
+                as="div"
+                enter="transition duration-100 ease-out"
+                enterFrom="transform scale-95 opacity-0"
+                enterTo="transform scale-100 opacity-100"
+                leave="transition duration-75 ease-out"
+                leaveFrom="transform scale-100 opacity-100"
+                leaveTo="transform scale-95 opacity-0"
+              >
+                <Disclosure.Panel as="div" className="mt-1 flex flex-col gap-0.5 px-2">
+                  {orderBy(favorite.children, "sequence", "desc").map((child, index) => (
+                    <FavoriteRoot
+                      key={child.id}
+                      workspaceSlug={workspaceSlug.toString()}
+                      favorite={child}
+                      isLastChild={index === favorite.children.length - 1}
+                      parentId={favorite.id}
+                      handleRemoveFromFavorites={handleRemoveFromFavorites}
+                      handleDrop={handleDrop}
+                    />
+                  ))}
+                </Disclosure.Panel>
+              </Transition>
+            )}
+            {/* draggable drop bottom indicator */}
+            {isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
+          </div>
+        )}
+      </Disclosure>
+    </>
+  );
+}
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
new file mode 100644
index 0000000..2ae959f
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-drag-handle.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+// ui
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { DragHandle } from "@plane/ui";
+// helper
+import { cn } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  sort_order: number | null;
+  isDragging: boolean;
+};
+
+export const FavoriteItemDragHandle = observer(function FavoriteItemDragHandle(props: Props) {
+  const { sort_order, isDragging } = props;
+  // store hooks
+  const { isMobile } = usePlatformOS();
+
+  return (
+    <Tooltip
+      label={sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
+      align="end"
+      disabled={isDragging || isMobile}
+    >
+      <div
+        className={cn(
+          "absolute top-1/2 -left-3 hidden -translate-y-1/2 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/project-item:flex",
+          {
+            "cursor-not-allowed opacity-60": sort_order === null,
+            "cursor-grabbing": isDragging,
+          }
+        )}
+      >
+        <DragHandle className="bg-transparent" />
+      </div>
+    </Tooltip>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx
new file mode 100644
index 0000000..a425535
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-icon.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LucideIcon } from "lucide-react";
+// plane imports
+import type { TLogoProps } from "@plane/types";
+import { FavoriteFolderIcon } from "@plane/propel/icons";
+import { CyclesOutline, ModuleOutline, PagesOutline, ProjectsOutline, ViewsOutline } from "@makeplane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+
+const ICON_MAP: Record<string, React.FC<ISvgIcons> | LucideIcon> = {
+  page: PagesOutline,
+  project: ProjectsOutline,
+  view: ViewsOutline,
+  module: ModuleOutline,
+  cycle: CyclesOutline,
+  folder: FavoriteFolderIcon,
+};
+
+type Props = {
+  type: string;
+  logo?: TLogoProps;
+};
+
+export const FavoriteItemIcon = ({ type, logo }: Props) => {
+  const Icon = ICON_MAP[type] ?? PagesOutline;
+
+  return (
+    <>
+      <div className="hidden size-5 items-center justify-center group-hover:flex">
+        <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
+      </div>
+      <div className="flex size-5 items-center justify-center group-hover:hidden">
+        {logo?.in_use ? (
+          <Logo logo={logo} size={16} type={type === "project" ? "material" : "lucide"} />
+        ) : (
+          <Icon className="m-auto size-4 flex-shrink-0 stroke-[1.5]" />
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
new file mode 100644
index 0000000..75dd830
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-quick-action.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { MoreHorizontalOutline, StarFilled } from "@makeplane/propel/icons";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { IFavorite } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+
+type Props = {
+  ref: React.MutableRefObject<HTMLDivElement | null>;
+  isMenuActive: boolean;
+  favorite: IFavorite;
+  onChange: (value: boolean) => void;
+  handleRemoveFromFavorites: (favorite: IFavorite) => void;
+};
+
+export const FavoriteItemQuickAction = observer(function FavoriteItemQuickAction(props: Props) {
+  const { ref, isMenuActive, onChange, handleRemoveFromFavorites, favorite } = props;
+  // translation
+  const { t } = useTranslation();
+
+  return (
+    <CustomMenu
+      customButton={
+        <span ref={ref} className="grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1">
+          <MoreHorizontalOutline className="size-4" />
+        </span>
+      }
+      menuButtonOnClick={() => onChange(!isMenuActive)}
+      className={cn(
+        "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
+        {
+          "pointer-events-auto opacity-100": isMenuActive,
+        }
+      )}
+      customButtonClassName="grid place-items-center"
+      placement="bottom-start"
+      ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+    >
+      <CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
+        <span className="flex items-center justify-start gap-2">
+          <StarFilled className="text-yellow-500 h-3.5 w-3.5 flex-shrink-0" />
+          <span>Remove from favorites</span>
+        </span>
+      </CustomMenu.MenuItem>
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
new file mode 100644
index 0000000..bf201c5
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type Props = {
+  href: string;
+  title: string;
+  icon: React.ReactNode;
+};
+
+export const FavoriteItemTitle = observer(function FavoriteItemTitle(props: Props) {
+  const { href, title, icon } = props;
+  // store hooks
+  const { toggleSidebar } = useAppTheme();
+  const { isMobile } = usePlatformOS();
+
+  const handleOnClick = () => {
+    if (isMobile) toggleSidebar();
+  };
+
+  return (
+    <Tooltip label={title} layout="stacked" side="right" sideOffset={40} disabled={isMobile}>
+      <Link href={href} className="flex w-full items-center gap-1.5 truncate" draggable onClick={handleOnClick}>
+        <span className="flex size-5 items-center justify-center">{icon}</span>
+        <span className="flex-1 truncate text-13 leading-5 font-medium">{title}</span>
+      </Link>
+    </Tooltip>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
new file mode 100644
index 0000000..b1655f9
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { cn } from "@plane/utils";
+
+type Props = {
+  children: React.ReactNode;
+  elementRef: React.RefObject<HTMLDivElement | null>;
+  isMenuActive?: boolean;
+};
+
+export function FavoriteItemWrapper(props: Props) {
+  const { children, elementRef, isMenuActive = false } = props;
+  return (
+    <>
+      <div
+        ref={elementRef}
+        className={cn(
+          "group/project-item relative flex w-full items-center rounded-md px-2 py-1.5 text-primary hover:bg-layer-transparent-hover",
+          {
+            "bg-surface-2": isMenuActive,
+          }
+        )}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
new file mode 100644
index 0000000..ae4bb44
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { FAVORITE_ITEM_LINKS } from "@plane/constants";
+import type { IFavorite } from "@plane/types";
+
+export const generateFavoriteItemLink = (workspaceSlug: string, favorite: IFavorite) => {
+  const entityLinkDetails = FAVORITE_ITEM_LINKS[favorite.entity_type];
+
+  if (!entityLinkDetails) {
+    console.error(`Unrecognized favorite entity type: ${favorite.entity_type}`);
+    return `/${workspaceSlug}`;
+  }
+
+  if (entityLinkDetails.itemLevel === "workspace") {
+    return `/${workspaceSlug}/${entityLinkDetails.getLink(favorite)}`;
+  } else if (entityLinkDetails.itemLevel === "project") {
+    return `/${workspaceSlug}/projects/${favorite.project_id}/${entityLinkDetails.getLink(favorite)}`;
+  } else {
+    return `/${workspaceSlug}`;
+  }
+};
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts
new file mode 100644
index 0000000..4e13083
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./favorite-item-drag-handle";
+export * from "./favorite-item-icon";
+export * from "./favorite-item-quick-action";
+export * from "./favorite-item-wrapper";
+export * from "./favorite-item-title";
+export * from "./helper";
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/index.ts b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/index.ts
new file mode 100644
index 0000000..6feb334
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./common";
+export * from "./root";
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
new file mode 100644
index 0000000..2ecba7a
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import type {
+  DropTargetRecord,
+  DragLocationHistory,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import type { ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+import { createRoot } from "react-dom/client";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+import type { IFavorite, InstructionType } from "@plane/types";
+import { DropIndicator } from "@plane/ui";
+// hooks
+import { useFavoriteItemDetails } from "@/hooks/use-favorite-item-details";
+// local imports
+import { getCanDrop, getInstructionFromPayload } from "../favorites.helpers";
+import { FavoriteItemDragHandle, FavoriteItemQuickAction, FavoriteItemTitle, FavoriteItemWrapper } from "./common";
+
+type Props = {
+  isLastChild: boolean;
+  parentId: string | undefined;
+  workspaceSlug: string;
+  favorite: IFavorite;
+  handleRemoveFromFavorites: (favorite: IFavorite) => void;
+  handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
+};
+
+export const FavoriteRoot = observer(function FavoriteRoot(props: Props) {
+  // props
+  const { isLastChild, parentId, workspaceSlug, favorite, handleRemoveFromFavorites, handleDrop } = props;
+  // store hooks
+  const { itemLink, itemIcon, itemTitle } = useFavoriteItemDetails(workspaceSlug, favorite);
+  //state
+  const [isDragging, setIsDragging] = useState(false);
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
+
+  //ref
+  const elementRef = useRef<HTMLDivElement>(null);
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+
+  const handleQuickAction = (value: boolean) => setIsMenuActive(value);
+
+  // drag and drop
+  useEffect(() => {
+    const element = elementRef.current;
+
+    if (!element) return;
+    const initialData = { id: favorite.id, isGroup: false, isChild: !!parentId, parentId };
+    return combine(
+      draggable({
+        element,
+        dragHandle: element,
+        getInitialData: () => initialData,
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          setCustomNativeDragPreview({
+            getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
+            render: ({ container }) => {
+              const root = createRoot(container);
+              root.render(
+                <div className="rounded-sm bg-surface-1 p-1 pr-2 text-13">
+                  <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} />
+                </div>
+              );
+              return () => root.unmount();
+            },
+            nativeSetDragImage,
+          });
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => getCanDrop(source, favorite, !!parentId),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        getData: ({ input, element }) => {
+          const blockedStates: InstructionType[] = ["make-child"];
+          if (!isLastChild) {
+            blockedStates.push("reorder-below");
+          }
+
+          return attachInstruction(initialData, {
+            input,
+            element,
+            currentLevel: 1,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+            block: blockedStates,
+          });
+        },
+        onDrag: ({ self, source, location }) => {
+          const instruction = getInstructionFromPayload(self, source, location);
+          setInstruction(instruction);
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ self, source, location }) => {
+          setInstruction(undefined);
+          handleDrop(self, source, location);
+        },
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef?.current, isDragging, isLastChild, favorite.id]);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
+  return (
+    <>
+      {isDragging && <DropIndicator isVisible={instruction === "reorder-above"} />}
+      <FavoriteItemWrapper elementRef={elementRef} isMenuActive={isMenuActive}>
+        <FavoriteItemDragHandle isDragging={isDragging} sort_order={favorite.sort_order} />
+        <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} />
+        <FavoriteItemQuickAction
+          favorite={favorite}
+          ref={actionSectionRef}
+          isMenuActive={isMenuActive}
+          onChange={handleQuickAction}
+          handleRemoveFromFavorites={handleRemoveFromFavorites}
+        />
+      </FavoriteItemWrapper>
+      {isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
new file mode 100644
index 0000000..fb0eec8
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -0,0 +1,288 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import type {
+  DragLocationHistory,
+  DropTargetRecord,
+  ElementDragPayload,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { orderBy } from "lodash-es";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { ChevronRightOutline, CreateFolderOutline } from "@makeplane/propel/icons";
+import { Disclosure, Transition } from "@headlessui/react";
+import { IS_FAVORITE_MENU_OPEN } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { IFavorite } from "@plane/types";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useFavorite } from "@/hooks/store/use-favorite";
+import useLocalStorage from "@/hooks/use-local-storage";
+// plane web components
+import { FavoriteFolder } from "./favorite-folder";
+import { FavoriteRoot } from "./favorite-items";
+import type { TargetData } from "./favorites.helpers";
+import { getInstructionFromPayload } from "./favorites.helpers";
+import { NewFavoriteFolder } from "./new-fav-folder";
+import { IconButton } from "@plane/propel/icon-button";
+
+export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
+  // states
+  const [createNewFolder, setCreateNewFolder] = useState<boolean | string | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  // navigation
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { groupedFavorites, deleteFavorite, removeFromFavoriteFolder, reOrderFavorite, moveFavoriteToFolder } =
+    useFavorite();
+  // translation
+  const { t } = useTranslation();
+  // local storage
+  const { setValue: toggleFavoriteMenu, storedValue } = useLocalStorage<boolean>(IS_FAVORITE_MENU_OPEN, false);
+  // derived values
+  const isFavoriteMenuOpen = !!storedValue;
+  // refs
+  const containerRef = useRef<HTMLDivElement>(null);
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  const handleMoveToFolder = (sourceId: string, destinationId: string) => {
+    moveFavoriteToFolder(workspaceSlug.toString(), sourceId, {
+      parent: destinationId,
+    }).catch(() => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("failed_to_move_favorite"),
+      });
+    });
+  };
+
+  const handleDrop = (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => {
+    const isFolder = self.data?.isGroup;
+    const dropTargets = location?.current?.dropTargets ?? [];
+    if (!dropTargets || dropTargets.length <= 0) return;
+    const dropTarget =
+      dropTargets.length > 1 ? dropTargets.find((target: DropTargetRecord) => target?.data?.isChild) : dropTargets[0];
+
+    const dropTargetData = dropTarget?.data as TargetData;
+
+    if (!dropTarget || !dropTargetData) return;
+    const instruction = getInstructionFromPayload(dropTarget, source, location);
+    const parentId = instruction === "make-child" ? dropTargetData.id : dropTargetData.parentId;
+    const droppedFavId = instruction !== "make-child" ? dropTargetData.id : undefined;
+    const sourceData = source.data as TargetData;
+
+    if (!sourceData.id) return;
+    if (isFolder) {
+      // handle move to a new parent folder if dropped on a folder
+      if (parentId && parentId !== sourceData.parentId) {
+        handleMoveToFolder(sourceData.id, parentId); /**parent id  */
+      }
+      // handle reordering at root level
+      if (droppedFavId) {
+        if (instruction != "make-child") {
+          handleReorder(sourceData.id, droppedFavId, instruction); /** sequence */
+        }
+      }
+    } else {
+      //handling reordering for favorites
+      if (droppedFavId) {
+        handleReorder(sourceData.id, droppedFavId, instruction); /** sequence */
+      }
+    }
+
+    /**remove if dropped outside and source is a child */
+    if (!parentId && sourceData.isChild) {
+      handleRemoveFromFavoritesFolder(sourceData.id); /**parent null */
+    }
+  };
+
+  const handleRemoveFromFavorites = (favorite: IFavorite) => {
+    deleteFavorite(workspaceSlug.toString(), favorite.id)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("success"),
+          message: t("favorite_removed_successfully"),
+        });
+        return;
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("error"),
+          message: t("something_went_wrong"),
+        });
+      });
+  };
+
+  const handleRemoveFromFavoritesFolder = (favoriteId: string) => {
+    removeFromFavoriteFolder(workspaceSlug.toString(), favoriteId).catch(() => {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("failed_to_move_favorite"),
+      });
+    });
+  };
+
+  const handleReorder = useCallback(
+    (favoriteId: string, droppedFavId: string, edge: string | undefined) => {
+      reOrderFavorite(workspaceSlug.toString(), favoriteId, droppedFavId, edge).catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("error"),
+          message: t("failed_to_reorder_favorite"),
+        });
+      });
+    },
+    [workspaceSlug, reOrderFavorite, t]
+  );
+
+  useEffect(() => {
+    const element = elementRef.current;
+
+    if (!element) return;
+
+    return combine(
+      dropTargetForElements({
+        element,
+        onDragEnter: () => {
+          setIsDragging(true);
+        },
+        onDragLeave: () => {
+          setIsDragging(false);
+        },
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: ({ source }) => {
+          setIsDragging(false);
+          const sourceId = source?.data?.id as string | undefined;
+          console.log({ sourceId });
+          if (!sourceId || !groupedFavorites[sourceId].parent) return;
+        },
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementRef.current, isDragging]);
+
+  return (
+    <>
+      <Disclosure as="div" defaultOpen ref={containerRef}>
+        <div
+          ref={elementRef}
+          className={cn(
+            "group/favorites-button flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-placeholder hover:bg-layer-transparent-hover"
+          )}
+        >
+          <Disclosure.Button
+            as="button"
+            type="button"
+            className={cn(
+              "flex w-full items-center gap-1 text-left text-13 font-semibold whitespace-nowrap text-placeholder",
+              {
+                "bg-layer-1 opacity-60": isDragging,
+              }
+            )}
+            onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
+            aria-label={t(
+              isFavoriteMenuOpen
+                ? "aria_labels.projects_sidebar.close_favorites_menu"
+                : "aria_labels.projects_sidebar.open_favorites_menu"
+            )}
+          >
+            <span className="text-13 font-semibold">{t("favorites")}</span>
+          </Disclosure.Button>
+          <div className="pointer-events-none flex items-center opacity-0 group-hover/favorites-button:pointer-events-auto group-hover/favorites-button:opacity-100">
+            <Tooltip label={t("create_folder")}>
+              <IconButton
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setCreateNewFolder(true);
+                  if (!isFavoriteMenuOpen) toggleFavoriteMenu(!isFavoriteMenuOpen);
+                }}
+                aria-label={t("aria_labels.projects_sidebar.create_favorites_folder")}
+                icon={CreateFolderOutline}
+              />
+            </Tooltip>
+            <Disclosure.Button
+              as="button"
+              type="button"
+              className="grid flex-shrink-0 place-items-center rounded-sm p-0.5 hover:bg-layer-transparent-hover"
+              onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
+              aria-label={t(
+                isFavoriteMenuOpen
+                  ? "aria_labels.projects_sidebar.close_favorites_menu"
+                  : "aria_labels.projects_sidebar.open_favorites_menu"
+              )}
+            >
+              <ChevronRightOutline
+                className={cn("size-3 flex-shrink-0 transition-all", {
+                  "rotate-90": isFavoriteMenuOpen,
+                })}
+              />
+            </Disclosure.Button>
+          </div>
+        </div>
+        <Transition
+          as="div"
+          show={isFavoriteMenuOpen}
+          enter="transition duration-100 ease-out"
+          enterFrom="transform scale-95 opacity-0"
+          enterTo="transform scale-100 opacity-100"
+          leave="transition duration-75 ease-out"
+          leaveFrom="transform scale-100 opacity-100"
+          leaveTo="transform scale-95 opacity-0"
+        >
+          {isFavoriteMenuOpen && (
+            <Disclosure.Panel as="div" className="mt-0.5 flex flex-col gap-0.5" static>
+              {createNewFolder && <NewFavoriteFolder setCreateNewFolder={setCreateNewFolder} actionType="create" />}
+              {Object.keys(groupedFavorites).length === 0 ? (
+                <>
+                  <span className="px-8 py-1.5 text-11 font-medium text-placeholder">{t("no_favorites_yet")}</span>
+                </>
+              ) : (
+                orderBy(Object.values(groupedFavorites), "sequence", "desc")
+                  .filter((fav) => !fav.parent)
+                  .map((fav, index, { length }) => (
+                    <>
+                      {fav?.is_folder ? (
+                        <FavoriteFolder
+                          favorite={fav}
+                          isLastChild={index === length - 1}
+                          handleRemoveFromFavorites={handleRemoveFromFavorites}
+                          handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}
+                          handleDrop={handleDrop}
+                        />
+                      ) : (
+                        <FavoriteRoot
+                          workspaceSlug={workspaceSlug.toString()}
+                          favorite={fav}
+                          isLastChild={index === length - 1}
+                          parentId={undefined}
+                          handleRemoveFromFavorites={handleRemoveFromFavorites}
+                          handleDrop={handleDrop}
+                        />
+                      )}
+                    </>
+                  ))
+              )}
+            </Disclosure.Panel>
+          )}
+        </Transition>
+      </Disclosure>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts b/apps/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts
new file mode 100644
index 0000000..a911f59
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorites.helpers.ts
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import type { IFavorite, InstructionType, IPragmaticPayloadLocation, TDropTarget } from "@plane/types";
+
+export type TargetData = {
+  id: string;
+  parentId: string | null;
+  isGroup: boolean;
+  isChild: boolean;
+};
+
+/**
+ * extracts the Payload and translates the instruction for the current dropTarget based on drag and drop payload
+ * @param dropTarget dropTarget for which the instruction is required
+ * @param source the dragging favorite data that is being dragged on the dropTarget
+ * @param location location includes the data of all the dropTargets the source is being dragged on
+ * @returns Instruction for dropTarget
+ */
+export const getInstructionFromPayload = (
+  dropTarget: TDropTarget,
+  source: TDropTarget,
+  location: IPragmaticPayloadLocation
+): InstructionType | undefined => {
+  const dropTargetData = dropTarget?.data as TargetData;
+  const sourceData = source?.data as TargetData;
+  const allDropTargets = location?.current?.dropTargets;
+
+  // if all the dropTargets are greater than 1 meaning the source is being dragged on a group and its child at the same time
+  // and also if the dropTarget in question is also a group then, it should be a child of the current Droptarget
+  if (allDropTargets?.length > 1 && dropTargetData?.isGroup) return "make-child";
+
+  if (!dropTargetData || !sourceData) return undefined;
+
+  let instruction = extractInstruction(dropTargetData)?.type;
+
+  // If the instruction is blocked then set an instruction based on if dropTarget it is a child or not
+  if (instruction === "instruction-blocked") {
+    instruction = dropTargetData.isChild ? "reorder-above" : "make-child";
+  }
+
+  // if source that is being dragged is a group. A group cannon be a child of any other favorite,
+  // hence if current instruction is to be a child of dropTarget then reorder-above instead
+  if (instruction === "make-child" && sourceData.isGroup) instruction = "reorder-above";
+
+  return instruction;
+};
+
+/**
+ * This provides a boolean to indicate if the favorite can be dropped onto the droptarget
+ * @param source
+ * @param favorite
+ * @param isCurrentChild if the dropTarget is a child
+ * @returns
+ */
+export const getCanDrop = (source: TDropTarget, favorite: IFavorite | undefined, isCurrentChild: boolean) => {
+  const sourceData = source?.data;
+
+  if (!sourceData) return false;
+
+  // a favorite cannot be dropped on to itself
+  if (sourceData.id === favorite?.id) return false;
+
+  // if current dropTarget is a child and the favorite being dropped is a group then don't enable drop
+  if (isCurrentChild && sourceData.isGroup) return false;
+
+  return true;
+};
diff --git a/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
new file mode 100644
index 0000000..20d6181
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import type { SubmitHandler } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+// plane helpers
+// plane ui
+import { FavoriteFolderIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+
+// hooks
+import { useFavorite } from "@/hooks/store/use-favorite";
+
+type TForm = {
+  name: string;
+  entity_type: string;
+  parent: string | null;
+  project_id: string | null;
+  is_folder: boolean;
+};
+type TProps = {
+  setCreateNewFolder: (value: boolean | string | null) => void;
+  actionType: "create" | "rename";
+  defaultName?: string;
+  favoriteId?: string;
+};
+export const NewFavoriteFolder = observer(function NewFavoriteFolder(props: TProps) {
+  const { setCreateNewFolder, actionType, defaultName, favoriteId } = props;
+  const { t } = useTranslation();
+  const { workspaceSlug } = useParams();
+  const { addFavorite, updateFavorite, existingFolders } = useFavorite();
+
+  // ref
+  const ref = useRef(null);
+
+  // form info
+  const { handleSubmit, control, setValue, setFocus } = useForm<TForm>({
+    reValidateMode: "onChange",
+    defaultValues: {
+      name: defaultName,
+    },
+  });
+
+  const handleAddNewFolder: SubmitHandler<TForm> = (formData) => {
+    if (existingFolders.includes(formData.name))
+      return setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("folder_already_exists"),
+      });
+    formData = {
+      entity_type: "folder",
+      is_folder: true,
+      name: formData.name.trim(),
+      parent: null,
+      project_id: null,
+    };
+
+    if (formData.name === "")
+      return setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("folder_name_cannot_be_empty"),
+      });
+
+    addFavorite(workspaceSlug.toString(), formData)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("success"),
+          message: t("favorite_created_successfully"),
+        });
+        return;
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("error"),
+          message: t("something_went_wrong"),
+        });
+      });
+    setCreateNewFolder(false);
+    setValue("name", "");
+  };
+
+  const handleRenameFolder: SubmitHandler<TForm> = (formData) => {
+    if (!favoriteId) return;
+    if (existingFolders.includes(formData.name))
+      return setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("folder_already_exists"),
+      });
+    const payload = {
+      name: formData.name.trim(),
+    };
+
+    if (formData.name.trim() === "")
+      return setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("error"),
+        message: t("folder_name_cannot_be_empty"),
+      });
+
+    updateFavorite(workspaceSlug.toString(), favoriteId, payload)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: t("success"),
+          message: t("favorite_updated_successfully"),
+        });
+        return;
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("error"),
+          message: t("something_went_wrong"),
+        });
+      });
+    setCreateNewFolder(false);
+    setValue("name", "");
+  };
+
+  useEffect(() => {
+    setFocus("name");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useOutsideClickDetector(ref, () => {
+    setCreateNewFolder(false);
+  });
+  return (
+    <div className="flex items-center gap-1.5 px-2 py-[1px]" ref={ref}>
+      <FavoriteFolderIcon className="size-4" />
+      <form onSubmit={handleSubmit(actionType === "create" ? handleAddNewFolder : handleRenameFolder)}>
+        <Controller
+          name="name"
+          control={control}
+          rules={{ required: true }}
+          render={({ field }) => (
+            <InputGroup size="2xl">
+              <Input
+                size="2xl"
+                placeholder={t("new_folder")}
+                aria-label={t("aria_labels.projects_sidebar.enter_folder_name")}
+                {...field}
+              />
+            </InputGroup>
+          )}
+        />
+      </form>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/help-section/index.ts b/apps/web/core/components/workspace/sidebar/help-section/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/help-section/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/apps/web/core/components/workspace/sidebar/help-section/root.tsx b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
new file mode 100644
index 0000000..6b23af1
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { HelpOutline, PagesOutline, UserOutline } from "@makeplane/propel/icons";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { CustomMenu } from "@plane/ui";
+// components
+import { ProductUpdatesModal } from "@/components/global";
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+import { PlaneVersionNumber } from "@/components/global/version-number";
+// hooks
+import { usePowerK } from "@/hooks/store/use-power-k";
+
+export const HelpMenuRoot = observer(function HelpMenuRoot() {
+  // store hooks
+  const { t } = useTranslation();
+  const { toggleShortcutsListModal } = usePowerK();
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  const [isProductUpdatesModalOpen, setProductUpdatesModalOpen] = useState(false);
+
+  return (
+    <>
+      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} handleClose={() => setProductUpdatesModalOpen(false)} />
+
+      <CustomMenu
+        customButton={
+          <AppSidebarItem
+            variant="button"
+            item={{
+              icon: <HelpOutline className="size-5" />,
+              isActive: isNeedHelpOpen,
+            }}
+          />
+        }
+        // customButtonClassName="relative grid place-items-center rounded-md p-1.5 outline-none"
+        menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
+        onMenuClose={() => setIsNeedHelpOpen(false)}
+        placement="bottom-end"
+        maxHeight="lg"
+        closeOnSelect
+      >
+        <CustomMenu.MenuItem onClick={() => window.open("https://go.plane.so/p-docs", "_blank")}>
+          <div className="flex items-center gap-x-2 rounded-sm text-11">
+            <PagesOutline className="h-3.5 w-3.5 text-secondary" height={14} width={14} />
+            <span className="text-11">{t("documentation")}</span>
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={() => window.open("mailto:sales@plane.so", "_blank")}>
+          <div className="flex items-center gap-x-2 rounded-sm text-11">
+            <UserOutline className="h-3.5 w-3.5 text-secondary" width={14} height={14} />
+            <span className="text-11">{t("contact_sales")}</span>
+          </div>
+        </CustomMenu.MenuItem>
+        <div className="my-1 border-t border-subtle" />
+        <CustomMenu.MenuItem>
+          <button
+            type="button"
+            onClick={() => toggleShortcutsListModal(true)}
+            className="justify-sbg-layer-211 flex w-full items-center hover:bg-layer-1"
+          >
+            <span className="text-11">{t("keyboard_shortcuts")}</span>
+          </button>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem>
+          <button
+            type="button"
+            onClick={() => setProductUpdatesModalOpen(true)}
+            className="justify-sbg-layer-211 flex w-full items-center hover:bg-layer-1"
+          >
+            <span className="text-11">{t("whats_new")}</span>
+          </button>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={() => window.open("https://forum.plane.so", "_blank", "noopener,noreferrer")}>
+          <div className="flex items-center gap-x-2 rounded-sm text-11">
+            <span className="text-11">Forum</span>
+          </div>
+        </CustomMenu.MenuItem>
+        <div className="mt-1 border-t border-subtle px-1 pt-2 text-11 text-secondary">
+          <PlaneVersionNumber />
+        </div>
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/helper.tsx b/apps/web/core/components/workspace/sidebar/helper.tsx
new file mode 100644
index 0000000..0e8fae6
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/helper.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  AnalyticsOutline,
+  ArchiveOutline,
+  CyclesOutline,
+  DraftsOutline,
+  HomeOutline,
+  InboxOutline,
+  MultipleStickyOutline,
+  ProjectsOutline,
+  ViewsOutline,
+  YourWorkOutline,
+} from "@makeplane/propel/icons";
+import { cn } from "@plane/utils";
+
+export const getSidebarNavigationItemIcon = (key: string, className: string = "") => {
+  switch (key) {
+    case "home":
+      return <HomeOutline className={cn("size-4 flex-shrink-0", className)} />;
+    case "inbox":
+      return <InboxOutline className={cn("size-4 flex-shrink-0", className)} />;
+    case "projects":
+      return <ProjectsOutline className={cn("size-4 flex-shrink-0", className)} />;
+    case "views":
+      return <ViewsOutline className={cn("size-4 flex-shrink-0", className)} />;
+    case "active_cycles":
+      return <CyclesOutline className={cn("size-4 flex-shrink-0", className)} />;
+    case "analytics":
+      return <AnalyticsOutline className={cn("size-4 flex-shrink-0", className)} />;
+    case "your_work":
+      return <YourWorkOutline className={cn("size-4 flex-shrink-0", className)} />;
+    case "drafts":
+      return <DraftsOutline className={cn("size-4 flex-shrink-0", className)} />;
+    case "archives":
+      return <ArchiveOutline className={cn("size-4 flex-shrink-0", className)} />;
+    case "stickies":
+      return <MultipleStickyOutline className={cn("size-4 flex-shrink-0", className)} />;
+  }
+};
diff --git a/apps/web/core/components/workspace/sidebar/project-navigation.tsx b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
new file mode 100644
index 0000000..e7dfc73
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import {
+  CyclesOutline,
+  IntakeOutline,
+  ModuleOutline,
+  PagesOutline,
+  ViewsOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+import type { EUserProjectRoles } from "@plane/types";
+// plane ui
+// components
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+
+export type TNavigationItem = {
+  name: string;
+  href: string;
+  icon: React.ElementType;
+  access: EUserPermissions[] | EUserProjectRoles[];
+  shouldRender: boolean;
+  sortOrder: number;
+  i18n_key: string;
+  key: string;
+};
+
+type TProjectItemsProps = {
+  workspaceSlug: string;
+  projectId: string;
+  additionalNavigationItems?: (workspaceSlug: string, projectId: string) => TNavigationItem[];
+};
+
+export const ProjectNavigation = observer(function ProjectNavigation(props: TProjectItemsProps) {
+  const { workspaceSlug, projectId, additionalNavigationItems } = props;
+  const { workItem: workItemIdentifierFromRoute } = useParams();
+  // store hooks
+  const { t } = useTranslation();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar, toggleSidebar } = useAppTheme();
+  const { getPartialProjectById } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  const {
+    issue: { getIssueIdByIdentifier, getIssueById },
+  } = useIssueDetail();
+  // pathname
+  const pathname = usePathname();
+  // derived values
+  const workItemId = workItemIdentifierFromRoute
+    ? getIssueIdByIdentifier(workItemIdentifierFromRoute?.toString())
+    : undefined;
+  const workItem = workItemId ? getIssueById(workItemId) : undefined;
+  const project = getPartialProjectById(projectId);
+  // handlers
+  const handleProjectClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+    // close the extended sidebar if it is open
+    if (isExtendedProjectSidebarOpened) {
+      toggleExtendedProjectSidebar(false);
+    }
+  };
+
+  const baseNavigation = useCallback(
+    (workspaceSlug: string, projectId: string): TNavigationItem[] => [
+      {
+        i18n_key: "sidebar.work_items",
+        key: "work_items",
+        name: "Work items",
+        href: `/${workspaceSlug}/projects/${projectId}/issues`,
+        icon: WorkItemsOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: true,
+        sortOrder: 1,
+      },
+      {
+        i18n_key: "sidebar.cycles",
+        key: "cycles",
+        name: "Cycles",
+        href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+        icon: CyclesOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+        shouldRender: project?.cycle_view ?? false,
+        sortOrder: 2,
+      },
+      {
+        i18n_key: "sidebar.modules",
+        key: "modules",
+        name: "Modules",
+        href: `/${workspaceSlug}/projects/${projectId}/modules`,
+        icon: ModuleOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+        shouldRender: project?.module_view ?? false,
+        sortOrder: 3,
+      },
+      {
+        i18n_key: "sidebar.views",
+        key: "views",
+        name: "Views",
+        href: `/${workspaceSlug}/projects/${projectId}/views`,
+        icon: ViewsOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: project?.issue_views_view ?? false,
+        sortOrder: 4,
+      },
+      {
+        i18n_key: "sidebar.pages",
+        key: "pages",
+        name: "Pages",
+        href: `/${workspaceSlug}/projects/${projectId}/pages`,
+        icon: PagesOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: project?.page_view ?? false,
+        sortOrder: 5,
+      },
+      {
+        i18n_key: "sidebar.intake",
+        key: "intake",
+        name: "Intake",
+        href: `/${workspaceSlug}/projects/${projectId}/intake`,
+        icon: IntakeOutline,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: project?.inbox_view ?? false,
+        sortOrder: 6,
+      },
+    ],
+    [project]
+  );
+
+  // memoized navigation items and adding additional navigation items
+  const navigationItemsMemo = useMemo(() => {
+    const navigationItems = (workspaceSlug: string, projectId: string): TNavigationItem[] => {
+      const navItems = baseNavigation(workspaceSlug, projectId);
+
+      if (additionalNavigationItems) {
+        navItems.push(...additionalNavigationItems(workspaceSlug, projectId));
+      }
+
+      return navItems;
+    };
+
+    // sort navigation items by sortOrder
+    const sortedNavigationItems = navigationItems(workspaceSlug, projectId).sort(
+      (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0)
+    );
+
+    return sortedNavigationItems;
+  }, [workspaceSlug, projectId, baseNavigation, additionalNavigationItems]);
+
+  const isActive = useCallback(
+    (item: TNavigationItem) => {
+      // work item condition
+      const workItemCondition = workItemId && workItem && !workItem?.is_epic && workItem?.project_id === projectId;
+      // epic condition
+      const epicCondition = workItemId && workItem && workItem?.is_epic && workItem?.project_id === projectId;
+      // is active
+      const isWorkItemActive = item.key === "work_items" && workItemCondition;
+      const isEpicActive = item.key === "epics" && epicCondition;
+      // pathname condition
+      const isPathnameActive = pathname.includes(item.href);
+      // return
+      return isWorkItemActive || isEpicActive || isPathnameActive;
+    },
+    [pathname, workItem, workItemId, projectId]
+  );
+
+  if (!project) return null;
+
+  return (
+    <>
+      {navigationItemsMemo.map((item) => {
+        if (!item.shouldRender) return;
+
+        const hasAccess = allowPermissions(item.access, EUserPermissionsLevel.PROJECT, workspaceSlug, project.id);
+        if (!hasAccess) return null;
+
+        const shouldShowCount = item.key === "intake" && (project.intake_count ?? 0) > 0;
+
+        return (
+          <Link key={item.key} href={item.href} onClick={handleProjectClick}>
+            <SidebarNavItem isActive={!!isActive(item)}>
+              <div className="flex w-full items-center justify-between gap-1.5 py-[1px]">
+                <div className="flex items-center gap-1.5">
+                  <item.icon
+                    className={`size-4 flex-shrink-0 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`}
+                  />
+                  <span className="text-11 font-medium">{t(item.i18n_key)}</span>
+                </div>
+                {shouldShowCount && <span className="text-11 font-medium text-tertiary">{project.intake_count}</span>}
+              </div>
+            </SidebarNavItem>
+          </Link>
+        );
+      })}
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
new file mode 100644
index 0000000..9d0fa86
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -0,0 +1,495 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { observer } from "mobx-react";
+import { useParams, useRouter } from "next/navigation";
+import { createRoot } from "react-dom/client";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
+import {
+  ArchiveOutline,
+  ChevronRightOutline,
+  LinkOutline,
+  LogOutOutline,
+  MoreHorizontalOutline,
+  SettingsOutline,
+  ShareAltOutline,
+} from "@makeplane/propel/icons";
+import { Disclosure, Transition } from "@headlessui/react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { IconButton } from "@plane/propel/icon-button";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { DEFAULT_TAB_KEY, getTabUrl } from "@/components/navigation/tab-navigation-utils";
+import { useTabPreferences } from "@/components/navigation/use-tab-preferences";
+import { LeaveProjectModal } from "@/components/project/leave-project-modal";
+import { PublishProjectModal } from "@/components/project/publish-project/modal";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { HIGHLIGHT_CLASS, highlightIssueOnDrop } from "../../issues/issue-layouts/utils";
+import { ProjectNavigation } from "./project-navigation";
+import { useNavigationItems } from "@/components/navigation/use-navigation-items";
+
+type Props = {
+  projectId: string;
+  handleCopyText: () => void;
+  handleOnProjectDrop?: (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => void;
+  projectListType: "JOINED" | "FAVORITES";
+  disableDrag?: boolean;
+  disableDrop?: boolean;
+  isLastChild: boolean;
+  renderInExtendedSidebar?: boolean;
+};
+
+export const SidebarProjectsListItem = observer(function SidebarProjectsListItem(props: Props) {
+  const {
+    projectId,
+    handleCopyText,
+    disableDrag,
+    disableDrop,
+    isLastChild,
+    handleOnProjectDrop,
+    projectListType,
+    renderInExtendedSidebar = false,
+  } = props;
+  // store hooks
+  const { t } = useTranslation();
+  const { getPartialProjectById } = useProject();
+  const { isMobile } = usePlatformOS();
+  const { allowPermissions } = useUserPermissions();
+  const { getIsProjectListOpen, toggleProjectListOpen } = useCommandPalette();
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar, toggleAnySidebarDropdown } = useAppTheme();
+
+  // states
+  const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
+  const [publishModalOpen, setPublishModal] = useState(false);
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const isProjectListOpen = getIsProjectListOpen(projectId);
+  const [instruction, setInstruction] = useState<"DRAG_OVER" | "DRAG_BELOW" | undefined>(undefined);
+  // refs
+  const actionSectionRef = useRef<HTMLButtonElement | null>(null);
+  const projectRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
+  // router
+  const { workspaceSlug, projectId: URLProjectId } = useParams();
+  const router = useRouter();
+  // derived values
+  const project = getPartialProjectById(projectId);
+
+  // Get available navigation items for this project
+  const navigationItems = useNavigationItems({
+    workspaceSlug: workspaceSlug.toString(),
+    projectId,
+    project,
+    allowPermissions,
+  });
+  const availableTabKeys = navigationItems.map((item) => item.key);
+
+  // Get preferences from hook
+  const { tabPreferences } = useTabPreferences(workspaceSlug.toString(), projectId);
+  const defaultTabKey = tabPreferences.defaultTab;
+  // Validate that the default tab is available
+  const validatedDefaultTabKey = availableTabKeys.includes(defaultTabKey) ? defaultTabKey : DEFAULT_TAB_KEY;
+  const defaultTabUrl = project ? getTabUrl(workspaceSlug.toString(), project.id, validatedDefaultTabKey) : "";
+
+  // toggle project list open
+  const setIsProjectListOpen = useCallback(
+    (value: boolean) => toggleProjectListOpen(projectId, value),
+    [projectId, toggleProjectListOpen]
+  );
+  // auth
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    project?.id
+  );
+  const isAuthorized = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    project?.id
+  );
+
+  const handleLeaveProject = () => {
+    setLeaveProjectModal(true);
+  };
+
+  useEffect(() => {
+    const element = projectRef.current;
+    const dragHandleElement = dragHandleRef.current;
+
+    if (!element) return;
+
+    return combine(
+      draggable({
+        element,
+        canDrag: () => !disableDrag,
+        dragHandle: dragHandleElement ?? undefined,
+        getInitialData: () => ({ id: projectId, dragInstanceId: "PROJECTS" }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
+          // Add a custom drag image
+          setCustomNativeDragPreview({
+            getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
+            render: ({ container }) => {
+              const root = createRoot(container);
+              root.render(
+                <div className="flex items-center rounded-sm bg-surface-1 p-1 pr-2 text-13">
+                  <div className="grid size-4 flex-shrink-0 place-items-center">
+                    {project && <Logo logo={project?.logo_props} />}
+                  </div>
+                  <p className="truncate text-secondary">{project?.name}</p>
+                </div>
+              );
+              return () => root.unmount();
+            },
+            nativeSetDragImage,
+          });
+        },
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) =>
+          !disableDrop && source?.data?.id !== projectId && source?.data?.dragInstanceId === "PROJECTS",
+        // oxlint-disable-next-line no-shadow
+        getData: ({ input, element }) => {
+          const data = { id: projectId };
+
+          // attach instruction for last in list
+          return attachInstruction(data, {
+            input,
+            element,
+            currentLevel: 0,
+            indentPerLevel: 0,
+            mode: isLastChild ? "last-in-group" : "standard",
+          });
+        },
+        onDrag: ({ self }) => {
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          // check if the highlight is to be shown above or below
+          setInstruction(
+            extractedInstruction
+              ? extractedInstruction === "reorder-below" && isLastChild
+                ? "DRAG_BELOW"
+                : "DRAG_OVER"
+              : undefined
+          );
+        },
+        onDragLeave: () => {
+          setInstruction(undefined);
+        },
+        onDrop: ({ self, source }) => {
+          setInstruction(undefined);
+          const extractedInstruction = extractInstruction(self?.data)?.type;
+          const currentInstruction = extractedInstruction
+            ? extractedInstruction === "reorder-below" && isLastChild
+              ? "DRAG_BELOW"
+              : "DRAG_OVER"
+            : undefined;
+          if (!currentInstruction) return;
+
+          const sourceId = source?.data?.id as string | undefined;
+          const destinationId = self?.data?.id as string | undefined;
+
+          handleOnProjectDrop?.(sourceId, destinationId, currentInstruction === "DRAG_BELOW");
+
+          highlightIssueOnDrop(`sidebar-${sourceId}-${projectListType}`);
+        },
+      })
+    );
+    // oxlint-disable-next-line eslint-plugin-react-hooks/exhaustive-deps
+  }, [projectId, isLastChild, projectListType, handleOnProjectDrop]);
+
+  useEffect(() => {
+    if (isMenuActive) toggleAnySidebarDropdown(true);
+    else toggleAnySidebarDropdown(false);
+  }, [isMenuActive, toggleAnySidebarDropdown]);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+  useOutsideClickDetector(projectRef, () => projectRef?.current?.classList?.remove(HIGHLIGHT_CLASS));
+
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+    if (URLProjectId === project?.id) {
+      setIsProjectListOpen(true);
+      // Scroll to active project
+      if (projectRef.current) {
+        timeoutId = setTimeout(() => {
+          if (projectRef.current) {
+            scrollIntoView(projectRef.current, {
+              behavior: "smooth",
+              block: "center",
+              scrollMode: "if-needed",
+            });
+          }
+        }, 200);
+      }
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [URLProjectId, project?.id, setIsProjectListOpen]);
+
+  if (!project) return null;
+
+  const isAccordionMode = projectPreferences.navigationMode === "ACCORDION";
+
+  const handleItemClick = () => {
+    if (projectPreferences.navigationMode === "ACCORDION") {
+      setIsProjectListOpen(!isProjectListOpen);
+    } else {
+      router.push(defaultTabUrl);
+    }
+    // close the extended sidebar if it is open
+    if (isExtendedProjectSidebarOpened && !isAccordionMode) {
+      toggleExtendedProjectSidebar(false);
+    }
+  };
+
+  const shouldHighlightProject = URLProjectId === project?.id && projectPreferences.navigationMode !== "ACCORDION";
+
+  return (
+    <>
+      <PublishProjectModal isOpen={publishModalOpen} projectId={projectId} onClose={() => setPublishModal(false)} />
+      <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={() => setLeaveProjectModal(false)} />
+      <Disclosure key={`${project.id}_${URLProjectId}`} defaultOpen={isProjectListOpen} as="div">
+        <div
+          id={`sidebar-${projectId}-${projectListType}`}
+          className={cn("relative", {
+            "bg-layer-1 opacity-60": isDragging,
+          })}
+          ref={projectRef}
+        >
+          <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
+          <div
+            className={cn(
+              "group/project-item relative flex w-full items-center rounded-md px-2 py-1.5 text-primary hover:bg-layer-transparent-hover",
+              {
+                "bg-surface-2": isMenuActive,
+                "bg-layer-transparent-active": shouldHighlightProject,
+              }
+            )}
+            id={`${project?.id}`}
+          >
+            {!disableDrag && (
+              <Tooltip
+                label={project.sort_order === null ? t("join_the_project_to_rearrange") : t("drag_to_rearrange")}
+                align="end"
+                disabled={isDragging || isMobile}
+              >
+                <button
+                  type="button"
+                  className={cn(
+                    "absolute top-1/2 -left-3 hidden -translate-y-1/2 cursor-grab items-center justify-center rounded-sm text-placeholder group-hover/project-item:flex",
+                    {
+                      "cursor-not-allowed opacity-60": project.sort_order === null,
+                      "cursor-grabbing": isDragging,
+                      flex: isMenuActive || renderInExtendedSidebar,
+                    }
+                  )}
+                  ref={dragHandleRef}
+                >
+                  <DragHandle className="bg-transparent" />
+                </button>
+              </Tooltip>
+            )}
+            <>
+              <ControlLink href={defaultTabUrl} className="flex flex-grow truncate" onClick={handleItemClick}>
+                {isAccordionMode ? (
+                  <Disclosure.Button
+                    as="button"
+                    type="button"
+                    className={cn("flex w-full flex-grow items-center gap-1.5 text-left select-none", {})}
+                    aria-label={
+                      isProjectListOpen
+                        ? t("aria_labels.projects_sidebar.close_project_menu")
+                        : t("aria_labels.projects_sidebar.open_project_menu")
+                    }
+                  >
+                    <div className="grid size-4 flex-shrink-0 place-items-center">
+                      <Logo logo={project.logo_props} size={16} />
+                    </div>
+                    <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
+                  </Disclosure.Button>
+                ) : (
+                  <div className="flex w-full flex-grow items-center gap-1.5 text-left select-none">
+                    <div className="grid size-4 flex-shrink-0 place-items-center">
+                      <Logo logo={project.logo_props} size={16} />
+                    </div>
+                    <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
+                  </div>
+                )}
+              </ControlLink>
+              <div className="flex items-center gap-1">
+                <CustomMenu
+                  customButton={
+                    <IconButton
+                      ref={actionSectionRef}
+                      variant="ghost"
+                      size="sm"
+                      icon={MoreHorizontalOutline}
+                      onClick={() => setIsMenuActive(!isMenuActive)}
+                      className="text-placeholder"
+                    />
+                  }
+                  className={cn(
+                    "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
+                    {
+                      "pointer-events-auto opacity-100": isMenuActive,
+                    }
+                  )}
+                  customButtonClassName="grid place-items-center"
+                  placement="bottom-start"
+                  ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+                  useCaptureForOutsideClick
+                  closeOnSelect
+                  onMenuClose={() => setIsMenuActive(false)}
+                >
+                  {/* TODO: Removed is_favorite logic due to the optimization in projects API */}
+                  {/* {isAuthorized && (
+                    <CustomMenu.MenuItem
+                      onClick={project.is_favorite ? handleRemoveFromFavorites : handleAddToFavorites}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <Star
+                          className={cn("h-3.5 w-3.5 ", {
+                            "fill-yellow-500 stroke-yellow-500": project.is_favorite,
+                          })}
+                        />
+                        <span>{project.is_favorite ? t("remove_from_favorites") : t("add_to_favorites")}</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )} */}
+
+                  {/* publish project settings */}
+                  {isAdmin && (
+                    <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
+                      <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
+                        <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded-sm text-secondary transition-all duration-300 hover:bg-layer-1">
+                          <ShareAltOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+                        </div>
+                        <div>{t("publish_project")}</div>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>{t("copy_link")}</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  {isAuthorized && (
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        router.push(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
+                      }}
+                    >
+                      <div className="flex cursor-pointer items-center justify-start gap-2">
+                        <ArchiveOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>{t("archives")}</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      router.push(`/${workspaceSlug}/settings/projects/${project?.id}`);
+                    }}
+                  >
+                    <div className="flex cursor-pointer items-center justify-start gap-2">
+                      <SettingsOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>{t("settings")}</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                  {/* leave project */}
+                  {!isAuthorized && (
+                    <CustomMenu.MenuItem onClick={handleLeaveProject}>
+                      <div className="flex items-center justify-start gap-2">
+                        <LogOutOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>{t("leave_project")}</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
+                {isAccordionMode && (
+                  <IconButton
+                    variant="ghost"
+                    size="sm"
+                    icon={ChevronRightOutline}
+                    onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                    className={cn("hidden text-placeholder group-hover/project-item:inline-flex", {
+                      "inline-flex": isMenuActive,
+                    })}
+                    iconClassName={cn("transition-transform", {
+                      "rotate-90": isProjectListOpen,
+                    })}
+                    aria-label={t(
+                      isProjectListOpen
+                        ? "aria_labels.projects_sidebar.close_project_menu"
+                        : "aria_labels.projects_sidebar.open_project_menu"
+                    )}
+                  />
+                )}
+              </div>
+            </>
+          </div>
+          {isAccordionMode && (
+            <Transition
+              as="div"
+              show={isProjectListOpen}
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              leaveTo="transform scale-95 opacity-0"
+            >
+              {isProjectListOpen && (
+                <Disclosure.Panel as="div" className="relative mt-1 mb-1.5 flex flex-col gap-0.5 pl-6">
+                  <div className="absolute top-0 bottom-1 left-[15px] w-[1px] bg-layer-3" />
+                  <ProjectNavigation workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+                </Disclosure.Panel>
+              )}
+            </Transition>
+          )}
+          {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
+        </div>
+      </Disclosure>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
new file mode 100644
index 0000000..4f96a2a
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -0,0 +1,290 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef, useEffect } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import { AddOutline, ChevronRightOutline, MoreHorizontalOutline } from "@makeplane/propel/icons";
+import { Disclosure, Transition } from "@headlessui/react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { Loader } from "@plane/ui";
+import { copyUrlToClipboard, cn, orderJoinedProjects } from "@plane/utils";
+// components
+import { CreateProjectModal } from "@/components/project/create-project-modal";
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+// plane web imports
+import type { TProject } from "@plane/types";
+// local imports
+import { SidebarProjectsListItem } from "./projects-list-item";
+
+export const SidebarProjectsList = observer(function SidebarProjectsList() {
+  // states
+  const [isAllProjectsListOpen, setIsAllProjectsListOpen] = useState(true);
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false); // scroll animation state
+  // refs
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  // store hooks
+  const { t } = useTranslation();
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar } = useAppTheme();
+
+  const { loader, getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
+  // router params
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+
+  // auth
+  const isAuthorizedUser = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  // Compute limited projects for main sidebar
+  const displayedProjects = projectPreferences.showLimitedProjects
+    ? joinedProjects.slice(0, projectPreferences.limitedProjectsCount)
+    : joinedProjects;
+
+  // Check if there are more projects to show
+  const hasMoreProjects =
+    projectPreferences.showLimitedProjects && joinedProjects.length > projectPreferences.limitedProjectsCount;
+
+  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"),
+      });
+    });
+  };
+
+  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"),
+        });
+      });
+  };
+
+  /**
+   * Implementing scroll animation styles based on the scroll length of the container
+   */
+  useEffect(() => {
+    const handleScroll = () => {
+      if (containerRef.current) {
+        const scrollTop = containerRef.current.scrollTop;
+        setIsScrolled(scrollTop > 0);
+      }
+    };
+    const currentContainerRef = containerRef.current;
+    if (currentContainerRef) {
+      currentContainerRef.addEventListener("scroll", handleScroll);
+    }
+    return () => {
+      if (currentContainerRef) {
+        currentContainerRef.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [containerRef]);
+
+  useEffect(() => {
+    const element = containerRef.current;
+
+    if (!element) return;
+
+    return combine(
+      autoScrollForElements({
+        element,
+        canScroll: ({ source }) => source?.data?.dragInstanceId === "PROJECTS",
+        getAllowedAxis: () => "vertical",
+      })
+    );
+  }, [containerRef]);
+
+  const toggleListDisclosure = (isOpen: boolean) => {
+    setIsAllProjectsListOpen(isOpen);
+    localStorage.setItem("isAllProjectsListOpen", isOpen.toString());
+  };
+  useEffect(() => {
+    if (pathname.includes("projects")) {
+      setIsAllProjectsListOpen(true);
+      localStorage.setItem("isAllProjectsListOpen", "true");
+    }
+  }, [pathname]);
+  return (
+    <>
+      {workspaceSlug && (
+        <CreateProjectModal
+          isOpen={isProjectModalOpen}
+          onClose={() => setIsProjectModalOpen(false)}
+          setToFavorite={false}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <div
+        ref={containerRef}
+        className={cn({
+          "border-t border-strong": isScrolled,
+        })}
+      >
+        <>
+          <Disclosure as="div" className="flex flex-col" defaultOpen={isAllProjectsListOpen}>
+            <div className="group flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-placeholder hover:bg-layer-transparent-hover">
+              <Disclosure.Button
+                as="button"
+                type="button"
+                className="flex w-full items-center gap-1 text-left text-13 font-semibold whitespace-nowrap text-placeholder"
+                onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
+                aria-label={t(
+                  isAllProjectsListOpen
+                    ? "aria_labels.projects_sidebar.close_projects_menu"
+                    : "aria_labels.projects_sidebar.open_projects_menu"
+                )}
+              >
+                <span className="text-13 font-semibold">{t("projects")}</span>
+              </Disclosure.Button>
+              <div className="flex items-center gap-1">
+                {isAuthorizedUser && (
+                  <Tooltip label={t("create_project")}>
+                    <IconButton
+                      variant="ghost"
+                      size="sm"
+                      icon={AddOutline}
+                      onClick={() => {
+                        setIsProjectModalOpen(true);
+                      }}
+                      className="hidden text-placeholder group-hover:inline-flex"
+                      aria-label={t("aria_labels.projects_sidebar.create_new_project")}
+                    />
+                  </Tooltip>
+                )}
+                <IconButton
+                  variant="ghost"
+                  size="sm"
+                  icon={ChevronRightOutline}
+                  onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
+                  className="text-placeholder"
+                  iconClassName={cn("transition-transform", {
+                    "rotate-90": isAllProjectsListOpen,
+                  })}
+                  aria-label={t(
+                    isAllProjectsListOpen
+                      ? "aria_labels.projects_sidebar.close_projects_menu"
+                      : "aria_labels.projects_sidebar.open_projects_menu"
+                  )}
+                />
+              </div>
+            </div>
+            <Transition
+              as="div"
+              show={isAllProjectsListOpen}
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              leaveTo="transform scale-95 opacity-0"
+            >
+              {loader === "init-loader" && (
+                <Loader className="w-full space-y-1.5">
+                  {Array.from({ length: 4 }).map((_, index) => (
+                    <Loader.Item key={index} height="28px" />
+                  ))}
+                </Loader>
+              )}
+              {isAllProjectsListOpen && (
+                <Disclosure.Panel as="div" className="flex flex-col gap-0.5" static>
+                  <>
+                    {displayedProjects.map((projectId, index) => (
+                      <SidebarProjectsListItem
+                        key={projectId}
+                        projectId={projectId}
+                        handleCopyText={() => handleCopyText(projectId)}
+                        projectListType={"JOINED"}
+                        disableDrag={false}
+                        disableDrop={false}
+                        isLastChild={index === displayedProjects.length - 1}
+                        handleOnProjectDrop={handleOnProjectDrop}
+                      />
+                    ))}
+                    {hasMoreProjects && (
+                      <SidebarNavItem>
+                        <button
+                          type="button"
+                          onClick={() => toggleExtendedProjectSidebar()}
+                          className="flex flex-grow items-center gap-1.5 text-13 font-medium text-tertiary"
+                          id="extended-project-sidebar-toggle"
+                          aria-label={t(
+                            isExtendedProjectSidebarOpened
+                              ? "aria_labels.app_sidebar.close_extended_sidebar"
+                              : "aria_labels.app_sidebar.open_extended_sidebar"
+                          )}
+                        >
+                          <MoreHorizontalOutline className="size-4 flex-shrink-0" />
+                          <span>{isExtendedProjectSidebarOpened ? "Hide" : "More"}</span>
+                        </button>
+                      </SidebarNavItem>
+                    )}
+                  </>
+                </Disclosure.Panel>
+              )}
+            </Transition>
+          </Disclosure>
+        </>
+
+        {isAuthorizedUser && joinedProjects?.length === 0 && (
+          <button
+            type="button"
+            className="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-13 leading-5 font-medium text-secondary hover:bg-surface-2"
+            onClick={() => {
+              toggleCreateProjectModal(true);
+            }}
+          >
+            {t("add_project")}
+          </button>
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/quick-actions.tsx b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
new file mode 100644
index 0000000..2142c62
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { AddWorkItemOutline } from "@makeplane/propel/icons";
+import type { TIssue } from "@plane/types";
+// components
+import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
+import { SidebarAddButton } from "@/components/sidebar/add-button";
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import useLocalStorage from "@/hooks/use-local-storage";
+
+export const SidebarQuickActions = observer(function SidebarQuickActions() {
+  const { t } = useTranslation();
+  // states
+  const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
+  const [_isDraftButtonOpen, setIsDraftButtonOpen] = useState(false);
+  // refs
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const timeoutRef = useRef<any>(undefined);
+  // router
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  // store hooks
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { joinedProjectIds } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  // local storage
+  const { storedValue, setValue } = useLocalStorage<Record<string, Partial<TIssue>>>("draftedIssue", {});
+  // derived values
+  const canCreateIssue = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const disabled = joinedProjectIds.length === 0 || !canCreateIssue;
+  const workspaceDraftIssue = workspaceSlug ? (storedValue?.[workspaceSlug] ?? undefined) : undefined;
+
+  const handleMouseEnter = () => {
+    // if enter before time out clear the timeout
+    if (timeoutRef?.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsDraftButtonOpen(true);
+  };
+
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsDraftButtonOpen(false);
+    }, 300);
+  };
+
+  const removeWorkspaceDraftIssue = () => {
+    const draftIssues = storedValue ?? {};
+    if (workspaceSlug && draftIssues[workspaceSlug]) delete draftIssues[workspaceSlug];
+    setValue(draftIssues);
+    return Promise.resolve();
+  };
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={isDraftIssueModalOpen}
+        onClose={() => setIsDraftIssueModalOpen(false)}
+        data={workspaceDraftIssue ?? {}}
+        onSubmit={() => removeWorkspaceDraftIssue()}
+        fetchIssueDetails={false}
+        isDraft
+      />
+      <div className="flex cursor-pointer items-center justify-between gap-2">
+        <SidebarAddButton
+          label={
+            <>
+              <AddWorkItemOutline className="size-4" />
+              <span className="max-w-[145px] truncate text-13 font-medium">{t("sidebar.new_work_item")}</span>
+            </>
+          }
+          onClick={() => toggleCreateIssueModal(true)}
+          disabled={disabled}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/sidebar-item.tsx b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
new file mode 100644
index 0000000..03d3015
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import type { IWorkspaceSidebarNavigationItem } from "@plane/constants";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { joinUrlPath } from "@plane/utils";
+// components
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceNavigationPreferences } from "@/hooks/use-navigation-preferences";
+// plane web imports
+import { getSidebarNavigationItemIcon } from "@/components/workspace/sidebar/helper";
+
+type Props = {
+  item: IWorkspaceSidebarNavigationItem;
+  additionalRender?: (itemKey: string, workspaceSlug: string) => ReactNode;
+  additionalStaticItems?: string[];
+};
+
+export const SidebarItemBase = observer(function SidebarItemBase({
+  item,
+  additionalRender,
+  additionalStaticItems,
+}: Props) {
+  const { t } = useTranslation();
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams();
+  const { allowPermissions } = useUserPermissions();
+  const { isWorkspaceItemPinned } = useWorkspaceNavigationPreferences();
+  const { data } = useUser();
+
+  const { toggleSidebar, isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
+
+  const handleLinkClick = () => {
+    if (window.innerWidth < 768) toggleSidebar();
+    if (isExtendedSidebarOpened) toggleExtendedSidebar(false);
+  };
+
+  const staticItems = [
+    "home",
+    "pi_chat",
+    "projects",
+    "your_work",
+    "stickies",
+    "drafts",
+    ...(additionalStaticItems || []),
+  ];
+  const slug = workspaceSlug?.toString() || "";
+
+  if (!allowPermissions(item.access, EUserPermissionsLevel.WORKSPACE, slug)) return null;
+
+  const isPinned = isWorkspaceItemPinned(item.key);
+  if (!isPinned && !staticItems.includes(item.key)) return null;
+
+  const itemHref =
+    item.key === "your_work" && data?.id ? joinUrlPath(slug, item.href, data?.id) : joinUrlPath(slug, item.href);
+  const icon = getSidebarNavigationItemIcon(item.key);
+
+  return (
+    <Link href={itemHref} onClick={handleLinkClick}>
+      <SidebarNavItem isActive={item.highlight(pathname, itemHref)}>
+        <div className="flex items-center gap-1.5 py-[1px]">
+          {icon}
+          <p className="text-13 leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+        </div>
+        {additionalRender?.(item.key, slug)}
+      </SidebarNavItem>
+    </Link>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
new file mode 100644
index 0000000..d70f84d
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo } from "react";
+import { observer } from "mobx-react";
+import { ChevronRightOutline, MoreHorizontalOutline } from "@makeplane/propel/icons";
+import { Disclosure, Transition } from "@headlessui/react";
+// plane imports
+import {
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS,
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS,
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS,
+  WORKSPACE_SIDEBAR_STATIC_PINNED_NAVIGATION_ITEMS_LINKS,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+// components
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
+// store hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import useLocalStorage from "@/hooks/use-local-storage";
+import {
+  usePersonalNavigationPreferences,
+  useWorkspaceNavigationPreferences,
+} from "@/hooks/use-navigation-preferences";
+import { SidebarItemBase } from "./sidebar-item";
+
+export const SidebarMenuItems = observer(function SidebarMenuItems() {
+  // routers
+  const { setValue: toggleWorkspaceMenu, storedValue: isWorkspaceMenuOpen } = useLocalStorage<boolean>(
+    "is_workspace_menu_open",
+    true
+  );
+
+  // store hooks
+  const { isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
+  // hooks
+  const { preferences: personalPreferences } = usePersonalNavigationPreferences();
+  const { preferences: workspacePreferences } = useWorkspaceNavigationPreferences();
+  // translation
+  const { t } = useTranslation();
+
+  const toggleListDisclosure = (isOpen: boolean) => {
+    toggleWorkspaceMenu(isOpen);
+  };
+
+  // Filter static navigation items based on personal preferences
+  const filteredStaticNavigationItems = useMemo(() => {
+    const items = [...WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS];
+    const personalItems: Array<(typeof items)[0] & { sort_order: number }> = [];
+
+    // Add personal items based on preferences with their sort_order
+    const stickiesItem = WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["stickies"];
+    if (personalPreferences.items.stickies?.enabled && stickiesItem) {
+      personalItems.push({
+        ...stickiesItem,
+        sort_order: personalPreferences.items.stickies.sort_order,
+      });
+    }
+    if (personalPreferences.items.your_work?.enabled && WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["your-work"]) {
+      personalItems.push({
+        ...WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["your-work"],
+        sort_order: personalPreferences.items.your_work.sort_order,
+      });
+    }
+    if (personalPreferences.items.drafts?.enabled && WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["drafts"]) {
+      personalItems.push({
+        ...WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["drafts"],
+        sort_order: personalPreferences.items.drafts.sort_order,
+      });
+    }
+
+    // Sort personal items by sort_order
+    personalItems.sort((a, b) => a.sort_order - b.sort_order);
+
+    // Merge static items with sorted personal items
+    return [...items, ...personalItems];
+  }, [personalPreferences]);
+
+  const sortedNavigationItems = useMemo(
+    () =>
+      // oxlint-disable-next-line oxc/no-map-spread
+      WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.map((item) => {
+        const preference = workspacePreferences.items[item.key];
+        return {
+          ...item,
+          sort_order: preference ? preference.sort_order : 0,
+        };
+      }).sort((a, b) => a.sort_order - b.sort_order),
+    [workspacePreferences]
+  );
+
+  return (
+    <>
+      <div className="flex flex-col gap-0.5">
+        {filteredStaticNavigationItems.map((item, _index) => (
+          // oxlint-disable-next-line react/no-array-index-key
+          <SidebarItemBase key={`static_${_index}`} item={item} />
+        ))}
+      </div>
+      <Disclosure as="div" className="flex flex-col" defaultOpen={!!isWorkspaceMenuOpen}>
+        <div className="group flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-placeholder hover:bg-layer-transparent-hover">
+          <Disclosure.Button
+            as="button"
+            type="button"
+            className="flex w-full items-center gap-1 text-left text-13 font-semibold whitespace-nowrap text-placeholder"
+            onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
+            aria-label={t(
+              isWorkspaceMenuOpen
+                ? "aria_labels.app_sidebar.close_workspace_menu"
+                : "aria_labels.app_sidebar.open_workspace_menu"
+            )}
+          >
+            <span className="text-13 font-semibold">{t("common.workspace")}</span>
+          </Disclosure.Button>
+          <div className="pointer-events-none flex items-center opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
+            <Disclosure.Button
+              as="button"
+              type="button"
+              className="flex-shrink-0 rounded-sm p-0.5 hover:bg-layer-1"
+              onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
+              aria-label={t(
+                isWorkspaceMenuOpen
+                  ? "aria_labels.app_sidebar.close_workspace_menu"
+                  : "aria_labels.app_sidebar.open_workspace_menu"
+              )}
+            >
+              <ChevronRightOutline
+                className={cn("size-3 flex-shrink-0 transition-all", {
+                  "rotate-90": isWorkspaceMenuOpen,
+                })}
+              />
+            </Disclosure.Button>
+          </div>
+        </div>
+        <Transition
+          as="div"
+          show={!!isWorkspaceMenuOpen}
+          enter="transition duration-100 ease-out"
+          enterFrom="transform scale-95 opacity-0"
+          enterTo="transform scale-100 opacity-100"
+          leave="transition duration-75 ease-out"
+          leaveFrom="transform scale-100 opacity-100"
+          leaveTo="transform scale-95 opacity-0"
+        >
+          {isWorkspaceMenuOpen && (
+            <Disclosure.Panel as="div" className="flex flex-col gap-0.5" static>
+              <>
+                {WORKSPACE_SIDEBAR_STATIC_PINNED_NAVIGATION_ITEMS_LINKS.map((item, _index) => (
+                  // oxlint-disable-next-line react/no-array-index-key
+                  <SidebarItemBase key={`static_${_index}`} item={item} />
+                ))}
+                {sortedNavigationItems.map((item, _index) => (
+                  // oxlint-disable-next-line react/no-array-index-key
+                  <SidebarItemBase key={`dynamic_${_index}`} item={item} />
+                ))}
+                <SidebarNavItem>
+                  <button
+                    type="button"
+                    onClick={() => toggleExtendedSidebar()}
+                    className="flex flex-grow items-center gap-1.5 text-13 font-medium text-tertiary"
+                    id="extended-sidebar-toggle"
+                    aria-label={t(
+                      isExtendedSidebarOpened
+                        ? "aria_labels.app_sidebar.close_extended_sidebar"
+                        : "aria_labels.app_sidebar.open_extended_sidebar"
+                    )}
+                  >
+                    <MoreHorizontalOutline className="size-4 flex-shrink-0" />
+                    <span>{isExtendedSidebarOpened ? "Hide" : "More"}</span>
+                  </button>
+                </SidebarNavItem>
+              </>
+            </Disclosure.Panel>
+          )}
+        </Transition>
+      </Disclosure>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/user-menu-item.tsx b/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
new file mode 100644
index 0000000..02aa128
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { EUserWorkspaceRoles } from "@plane/types";
+// components
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
+import { NotificationAppSidebarOption } from "@/components/workspace-notifications/notification-app-sidebar-option";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useUserPermissions } from "@/hooks/store/user";
+
+export interface SidebarUserMenuItemProps {
+  item: {
+    key: string;
+    href: string;
+    access: EUserWorkspaceRoles[];
+    labelTranslationKey: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Icon: any;
+  };
+  draftIssueCount: number;
+}
+
+export const SidebarUserMenuItem = observer(function SidebarUserMenuItem(props: SidebarUserMenuItemProps) {
+  const { item, draftIssueCount } = props;
+  // nextjs hooks
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  // package hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { toggleSidebar } = useAppTheme();
+
+  const isActive = pathname === item.href;
+
+  if (item.key === "drafts" && draftIssueCount === 0) return null;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) return null;
+
+  const handleLinkClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  };
+
+  return (
+    <Link href={item.href} onClick={handleLinkClick}>
+      <SidebarNavItem isActive={isActive}>
+        <div className="flex items-center gap-1.5 py-[1px]">
+          <item.Icon className="size-4 flex-shrink-0" />
+          <p className="text-13 leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+        </div>
+        {item.key === "notifications" && <NotificationAppSidebarOption workspaceSlug={workspaceSlug.toString()} />}
+      </SidebarNavItem>
+    </Link>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
new file mode 100644
index 0000000..95b78f5
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
+import { LogOutOutline, SettingsOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { GOD_MODE_URL } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { CustomMenu } from "@plane/ui";
+import { getFileURL } from "@plane/utils";
+// components
+import { CoverImage } from "@/components/common/cover-image";
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useUser } from "@/hooks/store/user";
+
+export const UserMenuRoot = observer(function UserMenuRoot() {
+  // states
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  // router
+  const router = useRouter();
+  // store hooks
+  const { toggleAnySidebarDropdown } = useAppTheme();
+  const { data: currentUser } = useUser();
+  const { signOut } = useUser();
+  const { toggleProfileSettingsModal } = useCommandPalette();
+  // derived values
+  const isUserInstanceAdmin = false;
+  // translation
+  const { t } = useTranslation();
+
+  const handleSignOut = () => {
+    signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("auth.sign_out.toast.error.title"),
+        message: t("auth.sign_out.toast.error.message"),
+      })
+    );
+  };
+
+  // Toggle sidebar dropdown state when menu is open
+  useEffect(() => {
+    if (isUserMenuOpen) toggleAnySidebarDropdown(true);
+    else toggleAnySidebarDropdown(false);
+  }, [isUserMenuOpen, toggleAnySidebarDropdown]);
+
+  return (
+    <CustomMenu
+      className="flex items-center"
+      customButton={
+        <AppSidebarItem
+          variant="button"
+          item={{
+            icon: (
+              <Avatar
+                alt={currentUser?.display_name}
+                fallback={currentUser?.display_name?.[0]?.toUpperCase()}
+                src={getFileURL(currentUser?.avatar_url ?? "")}
+                size="xs"
+              />
+            ),
+            isActive: isUserMenuOpen,
+          }}
+        />
+      }
+      menuButtonOnClick={() => !isUserMenuOpen && setIsUserMenuOpen(true)}
+      onMenuClose={() => setIsUserMenuOpen(false)}
+      placement="bottom-end"
+      maxHeight="2xl"
+      optionsClassName="w-72 p-3 flex flex-col gap-y-3"
+      closeOnSelect
+    >
+      <div className="relative h-29 w-full rounded-lg">
+        <CoverImage
+          src={currentUser?.cover_image_url ?? undefined}
+          alt={currentUser?.display_name}
+          className="h-29 w-full rounded-lg"
+          showDefaultWhenEmpty
+        />
+        <div className="absolute inset-0 bg-layer-1/50" />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          <div className="flex flex-col items-center gap-y-2">
+            <div>
+              <Avatar
+                alt={currentUser?.display_name}
+                fallback={currentUser?.display_name?.[0]?.toUpperCase()}
+                src={getFileURL(currentUser?.avatar_url ?? "")}
+                size="xl"
+              />
+            </div>
+            <div className="text-center">
+              <p className="text-body-sm-medium">
+                {currentUser?.first_name} {currentUser?.last_name}
+              </p>
+              <p className="text-caption-md-regular">{currentUser?.email}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <CustomMenu.MenuItem
+          onClick={() =>
+            toggleProfileSettingsModal({
+              activeTab: "general",
+              isOpen: true,
+            })
+          }
+          className="flex items-center gap-2"
+        >
+          <SettingsOutline className="size-3.5 shrink-0" />
+          {t("settings")}
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem
+          onClick={() =>
+            toggleProfileSettingsModal({
+              activeTab: "preferences",
+              isOpen: true,
+            })
+          }
+          className="flex items-center gap-2"
+        >
+          <SettingsOutline className="size-3.5 shrink-0" />
+          {t("preferences")}
+        </CustomMenu.MenuItem>
+      </div>
+      <CustomMenu.MenuItem onClick={handleSignOut} className="flex items-center gap-2">
+        <LogOutOutline className="size-3.5 shrink-0" />
+        {t("sign_out")}
+      </CustomMenu.MenuItem>
+      {isUserInstanceAdmin && (
+        <CustomMenu.MenuItem
+          onClick={() => router.push(GOD_MODE_URL)}
+          className="bg-accent-primary/20 text-accent-primary hover:bg-accent-primary/30 hover:text-accent-secondary"
+        >
+          {t("enter_god_mode")}
+        </CustomMenu.MenuItem>
+      )}
+    </CustomMenu>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/user-menu.tsx b/apps/web/core/components/workspace/sidebar/user-menu.tsx
new file mode 100644
index 0000000..a7835fc
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/user-menu.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { PiChatLogo } from "@plane/propel/icons";
+import { DashboardsOutline, DraftsOutline, HomeOutline, YourWorkOutline } from "@makeplane/propel/icons";
+import { EUserWorkspaceRoles } from "@plane/types";
+// hooks
+import { useUserPermissions, useUser } from "@/hooks/store/user";
+// local imports
+import { SidebarUserMenuItem } from "./user-menu-item";
+
+export const SidebarUserMenu = observer(function SidebarUserMenu() {
+  // navigation
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { workspaceUserInfo } = useUserPermissions();
+  const { data: currentUser } = useUser();
+
+  const SIDEBAR_USER_MENU_ITEMS = [
+    {
+      key: "home",
+      labelTranslationKey: "sidebar.home",
+      href: `/${workspaceSlug.toString()}/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+      Icon: HomeOutline,
+    },
+    {
+      key: "dashboards",
+      labelTranslationKey: "workspace_dashboards",
+      href: `/${workspaceSlug.toString()}/dashboards/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: DashboardsOutline,
+    },
+    {
+      key: "your-work",
+      labelTranslationKey: "sidebar.your_work",
+      href: `/${workspaceSlug.toString()}/profile/${currentUser?.id}/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: YourWorkOutline,
+    },
+    {
+      key: "drafts",
+      labelTranslationKey: "sidebar.drafts",
+      href: `/${workspaceSlug.toString()}/drafts/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: DraftsOutline,
+    },
+    {
+      key: "pi-chat",
+      labelTranslationKey: "sidebar.pi_chat",
+      href: `/${workspaceSlug.toString()}/pi-chat/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+      Icon: PiChatLogo,
+    },
+  ];
+
+  const draftIssueCount = workspaceUserInfo[workspaceSlug.toString()]?.draft_issue_count;
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      {SIDEBAR_USER_MENU_ITEMS.map((item) => (
+        <SidebarUserMenuItem key={item.key} item={item} draftIssueCount={draftIssueCount} />
+      ))}
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
new file mode 100644
index 0000000..57bb83a
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams, useRouter } from "next/navigation";
+import { ArchiveOutline, ChevronRightOutline, MoreHorizontalOutline, SettingsOutline } from "@makeplane/propel/icons";
+import { Disclosure } from "@headlessui/react";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { EUserWorkspaceRoles } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// store hooks
+import { useUserPermissions } from "@/hooks/store/user";
+
+export type SidebarWorkspaceMenuHeaderProps = {
+  isWorkspaceMenuOpen: boolean;
+  toggleWorkspaceMenu: (value: boolean) => void;
+};
+
+export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenuHeader(
+  props: SidebarWorkspaceMenuHeaderProps
+) {
+  const { isWorkspaceMenuOpen, toggleWorkspaceMenu } = props;
+  // state
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  // refs
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { workspaceSlug } = useParams();
+  const router = useRouter();
+  const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
+  // TODO: fix types
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const isAdmin = allowPermissions([EUserWorkspaceRoles.ADMIN] as any, EUserPermissionsLevel.WORKSPACE);
+
+  return (
+    <div className="group/workspace-button mt-2.5 flex rounded-sm bg-surface-1 px-2 hover:bg-surface-2">
+      <Disclosure.Button
+        as="button"
+        className="sticky top-0 z-10 flex w-full flex-1 items-center justify-between gap-1 py-1.5 text-13 font-semibold text-placeholder"
+        onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
+      >
+        <span>{t("common.workspace")}</span>
+      </Disclosure.Button>
+      <CustomMenu
+        customButton={
+          <span
+            ref={actionSectionRef}
+            className="my-auto grid place-items-center rounded-sm p-0.5 text-placeholder hover:bg-layer-1"
+            onClick={() => {
+              setIsMenuActive(!isMenuActive);
+            }}
+          >
+            <MoreHorizontalOutline className="size-4" />
+          </span>
+        }
+        className={cn(
+          "pointer-events-none z-20 my-auto flex h-full flex-shrink-0 items-center opacity-0 group-hover/workspace-button:pointer-events-auto group-hover/workspace-button:opacity-100",
+          {
+            "pointer-events-auto opacity-100": isMenuActive,
+          }
+        )}
+        customButtonClassName="grid place-items-center"
+        placement="bottom-start"
+      >
+        <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/projects/archives`)}>
+          <div className="flex items-center justify-start gap-2">
+            <ArchiveOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+            <span>{t("archives")}</span>
+          </div>
+        </CustomMenu.MenuItem>
+
+        {isAdmin && (
+          <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings`)}>
+            <div className="flex items-center justify-start gap-2">
+              <SettingsOutline className="h-3.5 w-3.5 stroke-[1.5]" />
+              <span>{t("settings")}</span>
+            </div>
+          </CustomMenu.MenuItem>
+        )}
+      </CustomMenu>
+      <Disclosure.Button
+        as="button"
+        className="group/workspace-button sticky top-0 z-10 flex items-center justify-between gap-1 rounded-sm px-0.5 py-1.5 text-11 font-semibold text-placeholder hover:bg-surface-2"
+        onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
+      >
+        {" "}
+        <span className="pointer-events-none flex-shrink-0 rounded-sm opacity-0 group-hover/workspace-button:pointer-events-auto group-hover/workspace-button:opacity-100 hover:bg-layer-1">
+          <ChevronRightOutline
+            className={cn("size-4 flex-shrink-0 text-placeholder transition-transform", {
+              "rotate-90": isWorkspaceMenuOpen,
+            })}
+          />
+        </span>
+      </Disclosure.Button>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-item.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-item.tsx
new file mode 100644
index 0000000..1e297da
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-item.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { EUserWorkspaceRoles } from "@plane/types";
+import { cn } from "@plane/utils";
+// components
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web imports
+import { UpgradeBadge } from "@/components/workspace/upgrade-badge";
+
+export type SidebarWorkspaceMenuItemProps = {
+  item: {
+    labelTranslationKey: string;
+    key: string;
+    href: string;
+    Icon: any;
+    access: EUserWorkspaceRoles[];
+  };
+};
+
+export const SidebarWorkspaceMenuItem = observer(function SidebarWorkspaceMenuItem(
+  props: SidebarWorkspaceMenuItemProps
+) {
+  const { item } = props;
+
+  const { t } = useTranslation();
+  // nextjs hooks
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams();
+  const { allowPermissions } = useUserPermissions();
+  // store hooks
+  const { toggleSidebar } = useAppTheme();
+
+  const handleLinkClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  };
+
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
+    return null;
+  }
+
+  const isActive = item.href === pathname;
+
+  return (
+    <Link href={item.href} onClick={() => handleLinkClick()}>
+      <SidebarNavItem isActive={isActive}>
+        <div className="flex items-center gap-1.5 py-[1px]">
+          <item.Icon
+            className={cn("size-4", {
+              "rotate-180": item.key === "active_cycles",
+            })}
+          />
+          <p className="text-13 leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+        </div>
+        <div className="flex-shrink-0">
+          <UpgradeBadge />
+        </div>
+      </SidebarNavItem>
+    </Link>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
new file mode 100644
index 0000000..be082f4
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Fragment, useState, useEffect } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { ChevronDownOutline, LogOutOutline, MailOutline, PlusCircleOutline } from "@makeplane/propel/icons";
+// ui
+import { Menu, Transition } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspace } from "@plane/types";
+import { Loader } from "@plane/ui";
+import { orderWorkspacesList, cn } from "@plane/utils";
+// helpers
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserProfile } from "@/hooks/store/user";
+import { useInstance } from "@/hooks/store/use-instance";
+// components
+import { WorkspaceLogo } from "../logo";
+import SidebarDropdownItem from "./dropdown-item";
+
+type WorkspaceMenuRootProps = {
+  variant: "sidebar" | "top-navigation";
+};
+
+export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: WorkspaceMenuRootProps) {
+  const { variant } = props;
+  // store hooks
+  const { toggleSidebar, toggleAnySidebarDropdown } = useAppTheme();
+  const { config } = useInstance();
+  const { data: currentUser } = useUser();
+  const { signOut } = useUser();
+  const { updateUserProfile } = useUserProfile();
+  const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
+  // derived values
+  const isWorkspaceCreationDisabled = config?.is_workspace_creation_disabled ?? false;
+  // translation
+  const { t } = useTranslation();
+  // local state
+  const [isWorkspaceMenuOpen, setIsWorkspaceMenuOpen] = useState(false);
+
+  const handleWorkspaceNavigation = (workspace: IWorkspace) => updateUserProfile({ last_workspace_id: workspace?.id });
+
+  const handleSignOut = async () => {
+    await signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("auth.sign_out.toast.error.title"),
+        message: t("auth.sign_out.toast.error.message"),
+      })
+    );
+  };
+
+  const handleItemClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  };
+  const workspacesList = orderWorkspacesList(Object.values(workspaces ?? {}));
+  // TODO: fix workspaces list scroll
+
+  // Toggle sidebar dropdown state when either menu is open
+  useEffect(() => {
+    toggleAnySidebarDropdown(isWorkspaceMenuOpen);
+  }, [isWorkspaceMenuOpen, toggleAnySidebarDropdown]);
+
+  return (
+    <Menu
+      as="div"
+      className={cn("relative flex h-full w-fit max-w-48 truncate whitespace-nowrap", {
+        "w-full justify-center text-center": variant === "sidebar",
+        "flex-grow justify-stretch truncate text-left": variant === "top-navigation",
+      })}
+    >
+      {({ open, close }: { open: boolean; close: () => void }) => {
+        // Update local state directly
+        if (isWorkspaceMenuOpen !== open) {
+          setIsWorkspaceMenuOpen(open);
+        }
+
+        return (
+          <>
+            {variant === "sidebar" && (
+              <Menu.Button
+                className={cn("flex size-8 w-full items-center justify-center rounded-md", {
+                  "bg-layer-1": open,
+                })}
+              >
+                <AppSidebarItem
+                  variant="button"
+                  item={{
+                    icon: (
+                      <WorkspaceLogo
+                        logo={activeWorkspace?.logo_url}
+                        name={activeWorkspace?.name}
+                        classNames="size-8 rounded-md border border-subtle"
+                      />
+                    ),
+                  }}
+                />
+              </Menu.Button>
+            )}
+            {variant === "top-navigation" && (
+              <Menu.Button
+                className={cn(
+                  "group/menu-button flex flex-grow items-center justify-between gap-1 truncate rounded-sm p-1 text-13 font-medium text-secondary hover:bg-layer-1 focus:outline-none",
+                  {
+                    "bg-layer-1": open,
+                  }
+                )}
+                aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
+              >
+                <div className="flex flex-grow items-center gap-2 truncate">
+                  <WorkspaceLogo
+                    logo={activeWorkspace?.logo_url}
+                    name={activeWorkspace?.name}
+                    classNames="border border-subtle rounded-md size-7"
+                  />
+                  <h4 className="truncate text-14 font-medium text-primary">{activeWorkspace?.name ?? t("loading")}</h4>
+                </div>
+                <ChevronDownOutline
+                  className={cn("size-4 flex-shrink-0 text-placeholder duration-300", {
+                    "rotate-180": open,
+                  })}
+                />
+              </Menu.Button>
+            )}
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="trnsform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items as={Fragment}>
+                <div
+                  className={cn(
+                    "fixed z-21 mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-subtle rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 outline-none",
+                    {
+                      "top-11 left-14": variant === "sidebar",
+                      "top-10 left-4": variant === "top-navigation",
+                    }
+                  )}
+                >
+                  <div className="vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-x-hidden overflow-y-scroll">
+                    <span className="sticky top-0 z-21 h-full w-full flex-shrink-0 truncate rounded-md bg-surface-1 px-4 pt-3 pb-1 text-left text-13 font-medium text-placeholder">
+                      {currentUser?.email}
+                    </span>
+                    {workspacesList ? (
+                      <div className="flex size-full flex-col items-start justify-start">
+                        {(activeWorkspace
+                          ? [
+                              activeWorkspace,
+                              ...workspacesList.filter((workspace) => workspace.id !== activeWorkspace?.id),
+                            ]
+                          : workspacesList
+                        ).map((workspace) => (
+                          <SidebarDropdownItem
+                            key={workspace.id}
+                            workspace={workspace}
+                            activeWorkspace={activeWorkspace}
+                            handleItemClick={handleItemClick}
+                            handleWorkspaceNavigation={handleWorkspaceNavigation}
+                            handleClose={close}
+                          />
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="w-full">
+                        <Loader className="space-y-2">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="30px" />
+                        </Loader>
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex w-full flex-col items-start justify-start gap-2 px-4 py-2 text-13">
+                    {!isWorkspaceCreationDisabled && (
+                      <Link href="/create-workspace" className="w-full">
+                        <Menu.Item
+                          as="div"
+                          className="flex items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium text-secondary hover:bg-layer-transparent-hover"
+                        >
+                          <PlusCircleOutline className="size-4 flex-shrink-0" />
+                          {t("create_workspace")}
+                        </Menu.Item>
+                      </Link>
+                    )}
+
+                    <Link href="/invitations" className="w-full" onClick={handleItemClick}>
+                      <Menu.Item
+                        as="div"
+                        className="flex items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium text-secondary hover:bg-layer-transparent-hover"
+                      >
+                        <MailOutline className="h-4 w-4 flex-shrink-0" />
+                        {t("workspace_invites")}
+                      </Menu.Item>
+                    </Link>
+
+                    <div className="w-full">
+                      <Menu.Item
+                        as="button"
+                        type="button"
+                        className="flex w-full items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium text-danger-primary hover:bg-layer-transparent-hover"
+                        onClick={handleSignOut}
+                      >
+                        <LogOutOutline className="size-4 flex-shrink-0" />
+                        {t("sign_out")}
+                      </Menu.Item>
+                    </div>
+                  </div>
+                </div>
+              </Menu.Items>
+            </Transition>
+          </>
+        );
+      }}
+    </Menu>
+  );
+});
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
new file mode 100644
index 0000000..fa003ae
--- /dev/null
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Disclosure, Transition } from "@headlessui/react";
+// plane imports
+import { AnalyticsOutline, CyclesOutline, ProjectsOutline, ViewsOutline } from "@makeplane/propel/icons";
+import { EUserWorkspaceRoles } from "@plane/types";
+// hooks
+import useLocalStorage from "@/hooks/use-local-storage";
+// local imports
+import { SidebarWorkspaceMenuHeader } from "./workspace-menu-header";
+import { SidebarWorkspaceMenuItem } from "./workspace-menu-item";
+
+export const SidebarWorkspaceMenu = observer(function SidebarWorkspaceMenu() {
+  // router params
+  const { workspaceSlug } = useParams();
+  // local storage
+  const { setValue: toggleWorkspaceMenu, storedValue } = useLocalStorage<boolean>("is_workspace_menu_open", true);
+  // derived values
+  const isWorkspaceMenuOpen = !!storedValue;
+
+  const SIDEBAR_WORKSPACE_MENU_ITEMS = [
+    {
+      key: "projects",
+      labelTranslationKey: "sidebar.projects",
+      href: `/${workspaceSlug}/projects/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+      Icon: ProjectsOutline,
+    },
+    {
+      key: "views",
+      labelTranslationKey: "sidebar.views",
+      href: `/${workspaceSlug}/workspace-views/all-issues/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+      Icon: ViewsOutline,
+    },
+    {
+      key: "active-cycles",
+      labelTranslationKey: "sidebar.cycles",
+      href: `/${workspaceSlug}/active-cycles/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: CyclesOutline,
+    },
+    {
+      key: "analytics",
+      labelTranslationKey: "sidebar.analytics",
+      href: `/${workspaceSlug}/analytics/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: AnalyticsOutline,
+    },
+  ];
+
+  return (
+    <Disclosure as="div" defaultOpen>
+      <SidebarWorkspaceMenuHeader isWorkspaceMenuOpen={isWorkspaceMenuOpen} toggleWorkspaceMenu={toggleWorkspaceMenu} />
+      <Transition
+        as="div"
+        show={isWorkspaceMenuOpen}
+        enter="transition duration-100 ease-out"
+        enterFrom="transform scale-95 opacity-0"
+        enterTo="transform scale-100 opacity-100"
+        leave="transition duration-75 ease-out"
+        leaveFrom="transform scale-100 opacity-100"
+        leaveTo="transform scale-95 opacity-0"
+      >
+        {isWorkspaceMenuOpen && (
+          <Disclosure.Panel as="div" className="mt-0.5 flex flex-col gap-0.5" static>
+            {SIDEBAR_WORKSPACE_MENU_ITEMS.map((item) => (
+              <SidebarWorkspaceMenuItem key={item.key} item={item} />
+            ))}
+          </Disclosure.Panel>
+        )}
+      </Transition>
+    </Disclosure>
+  );
+});
diff --git a/apps/web/core/components/workspace/upgrade-badge.tsx b/apps/web/core/components/workspace/upgrade-badge.tsx
new file mode 100644
index 0000000..5bddd91
--- /dev/null
+++ b/apps/web/core/components/workspace/upgrade-badge.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
+
+type TUpgradeBadge = {
+  className?: string;
+  size?: "sm" | "md";
+};
+
+export function UpgradeBadge(props: TUpgradeBadge) {
+  const { className, size = "sm" } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        "w-fit cursor-pointer rounded-2xl bg-accent-primary/20 text-center font-medium text-accent-secondary outline-none",
+        {
+          "px-3 text-13": size === "md",
+          "px-2 text-11": size === "sm",
+        },
+        className
+      )}
+    >
+      {t("sidebar.pro")}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/workspace/views/default-view-list-item.tsx b/apps/web/core/components/workspace/views/default-view-list-item.tsx
new file mode 100644
index 0000000..cb58342
--- /dev/null
+++ b/apps/web/core/components/workspace/views/default-view-list-item.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { useTranslation } from "@plane/i18n";
+// helpers
+import { truncateText } from "@plane/utils";
+
+type Props = { view: { key: string; i18n_label: string } };
+
+export const GlobalDefaultViewListItem = observer(function GlobalDefaultViewListItem(props: Props) {
+  const { view } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  const { t } = useTranslation();
+
+  return (
+    <div className="group border-b border-subtle hover:bg-surface-2">
+      <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
+        <div className="relative flex h-[52px] w-full items-center justify-between rounded-sm px-5 py-4">
+          <div className="flex w-full items-center justify-between">
+            <div className="flex items-center gap-4">
+              <div className="flex flex-col">
+                <p className="truncate text-13 leading-4 font-medium">{truncateText(t(view.i18n_label), 75)}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/workspace/views/default-view-quick-action.tsx b/apps/web/core/components/workspace/views/default-view-quick-action.tsx
new file mode 100644
index 0000000..732134b
--- /dev/null
+++ b/apps/web/core/components/workspace/views/default-view-quick-action.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+
+import { useTranslation } from "@plane/i18n";
+// plane imports
+import { LinkOutline, NewTabOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// ui
+import type { TStaticViewTypes } from "@plane/types";
+import type { TContextMenuItem } from "@plane/ui";
+import { CustomMenu } from "@plane/ui";
+import { copyUrlToClipboard, cn } from "@plane/utils";
+// helpers
+type Props = {
+  workspaceSlug: string;
+  view: {
+    key: TStaticViewTypes;
+    i18n_label: string;
+  };
+};
+
+export const DefaultWorkspaceViewQuickActions = observer(function DefaultWorkspaceViewQuickActions(props: Props) {
+  const { workspaceSlug, view } = props;
+
+  const { t } = useTranslation();
+
+  const viewLink = `${workspaceSlug}/workspace-views/${view.key}`;
+  const handleCopyText = () =>
+    copyUrlToClipboard(viewLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link Copied!",
+        message: "View link copied to clipboard.",
+      });
+    });
+  const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");
+
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "open-new-tab",
+      action: handleOpenInNewTab,
+      title: t("open_in_new_tab"),
+      icon: NewTabOutline,
+    },
+    {
+      key: "copy-link",
+      action: handleCopyText,
+      title: t("copy_link"),
+      icon: LinkOutline,
+    },
+  ];
+
+  return (
+    <>
+      <CustomMenu
+        ellipsis
+        placement="bottom-end"
+        closeOnSelect
+        buttonClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-layer-1/70 rounded-sm"
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{t(item.title || "")}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/views/delete-view-modal.tsx b/apps/web/core/components/workspace/views/delete-view-modal.tsx
new file mode 100644
index 0000000..3659062
--- /dev/null
+++ b/apps/web/core/components/workspace/views/delete-view-modal.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// Plane Imports
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspaceView } from "@plane/types";
+import { AlertModalCore } from "@plane/ui";
+// hooks
+import { useGlobalView } from "@/hooks/store/use-global-view";
+
+type Props = {
+  data: IWorkspaceView;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const DeleteGlobalViewModal = observer(function DeleteGlobalViewModal(props: Props) {
+  const { data, isOpen, onClose } = props;
+  // states
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { deleteGlobalView } = useGlobalView();
+  const { t } = useTranslation();
+  const handleClose = () => onClose();
+
+  const handleDeletion = async () => {
+    if (!workspaceSlug) return;
+    setIsDeleteLoading(true);
+
+    try {
+      await deleteGlobalView(workspaceSlug.toString(), data.id);
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to delete the view. Please try again.",
+      });
+    }
+
+    setIsDeleteLoading(false);
+    handleClose();
+    // remove filters from local storage
+    localStorage.removeItem(`global_view_filters/${data.id}`);
+  };
+
+  return (
+    <AlertModalCore
+      handleClose={handleClose}
+      handleSubmit={handleDeletion}
+      isSubmitting={isDeleteLoading}
+      isOpen={isOpen}
+      title={t("workspace_views.delete_view.title")}
+      content={<>{t("workspace_views.delete_view.content")}</>}
+    />
+  );
+});
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
new file mode 100644
index 0000000..1d89625
--- /dev/null
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -0,0 +1,213 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { Field } from "@makeplane/propel/components/field";
+import { Input, InputGroup } from "@makeplane/propel/components/input";
+import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";
+import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IWorkspaceView, IIssueFilters } from "@plane/types";
+import { EViewAccess, EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
+import { getComputedDisplayFilters, getComputedDisplayProperties } from "@plane/utils";
+// components
+import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
+import { WorkspaceLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/workspace-level";
+// plane web imports
+import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
+
+type Props = {
+  handleFormSubmit: (values: Partial<IWorkspaceView>) => Promise<void>;
+  handleClose: () => void;
+  data?: IWorkspaceView;
+  preLoadedData?: Partial<IWorkspaceView>;
+  workspaceSlug: string;
+};
+
+const DEFAULT_VALUES: Partial<IWorkspaceView> = {
+  name: "",
+  description: "",
+  access: EViewAccess.PUBLIC,
+  display_properties: getComputedDisplayProperties(),
+  display_filters: getComputedDisplayFilters({
+    layout: EIssueLayoutTypes.SPREADSHEET,
+    order_by: "-created_at",
+  }),
+};
+
+export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Props) {
+  const { handleFormSubmit, handleClose, data, preLoadedData, workspaceSlug } = props;
+  // i18n
+  const { t } = useTranslation();
+  // form info
+  const defaultValues = {
+    ...DEFAULT_VALUES,
+    ...preLoadedData,
+    ...data,
+  };
+  const {
+    formState: { errors, isSubmitting },
+    handleSubmit,
+    control,
+    reset,
+    getValues,
+  } = useForm<IWorkspaceView>({
+    defaultValues,
+  });
+  // derived values
+  const workItemFilters: IIssueFilters = {
+    richFilters: getValues("rich_filters"),
+    displayFilters: getValues("display_filters"),
+    displayProperties: getValues("display_properties"),
+    kanbanFilters: undefined,
+  };
+
+  const handleCreateUpdateView = async (formData: Partial<IWorkspaceView>) => {
+    await handleFormSubmit(formData);
+    reset({
+      ...defaultValues,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(handleCreateUpdateView)}>
+      <div className="space-y-5 p-5">
+        <h3 className="text-18 font-medium text-secondary">{data ? t("view.update.label") : t("view.create.label")}</h3>
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <Controller
+              control={control}
+              name="name"
+              rules={{
+                required: t("form.title.required"),
+                maxLength: {
+                  value: 255,
+                  message: t("form.title.max_length", { length: 255 }),
+                },
+              }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Field name="name" invalid={Boolean(errors.name)}>
+                  <InputGroup size="2xl">
+                    <Input
+                      size="2xl"
+                      id="name"
+                      name="name"
+                      type="name"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      placeholder={t("common.title")}
+                    />
+                  </InputGroup>
+                </Field>
+              )}
+            />
+            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
+          </div>
+          <div>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <Field name="description" invalid={Boolean(errors?.description)}>
+                  <TextAreaGroup resize="none">
+                    <TextArea
+                      size="lg"
+                      surface="field"
+                      autoResize
+                      maxRows={8}
+                      id="description"
+                      name="description"
+                      value={value}
+                      placeholder={t("common.description")}
+                      onChange={onChange}
+                    />
+                  </TextAreaGroup>
+                </Field>
+              )}
+            />
+          </div>
+          <div className="flex gap-2">
+            {/* display filters dropdown */}
+            <Controller
+              control={control}
+              name="display_filters"
+              render={({ field: { onChange: onDisplayFiltersChange, value: displayFilters } }) => (
+                <Controller
+                  control={control}
+                  name="display_properties"
+                  render={({ field: { onChange: onDisplayPropertiesChange, value: displayProperties } }) => (
+                    <FiltersDropdown title={t("common.display")}>
+                      <DisplayFiltersSelection
+                        layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.layoutOptions.spreadsheet}
+                        displayFilters={displayFilters ?? {}}
+                        handleDisplayFiltersUpdate={(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+                          onDisplayFiltersChange({
+                            ...displayFilters,
+                            ...updatedDisplayFilter,
+                          });
+                        }}
+                        displayProperties={displayProperties ?? {}}
+                        handleDisplayPropertiesUpdate={(updatedDisplayProperties: Partial<IIssueDisplayProperties>) => {
+                          onDisplayPropertiesChange({
+                            ...displayProperties,
+                            ...updatedDisplayProperties,
+                          });
+                        }}
+                      />
+                    </FiltersDropdown>
+                  )}
+                />
+              )}
+            />
+          </div>
+          <div>
+            {/* filters dropdown */}
+            <Controller
+              control={control}
+              name="rich_filters"
+              render={({ field: { onChange: onFiltersChange } }) => (
+                <WorkspaceLevelWorkItemFiltersHOC
+                  entityId={data?.id}
+                  entityType={EIssuesStoreType.GLOBAL}
+                  filtersToShowByLayout={ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.filters}
+                  initialWorkItemFilters={workItemFilters}
+                  isTemporary
+                  updateFilters={(updateFilters) => onFiltersChange(updateFilters)}
+                  showOnMount
+                  workspaceSlug={workspaceSlug}
+                >
+                  {({ filter: workspaceViewWorkItemsFilter }) =>
+                    workspaceViewWorkItemsFilter && (
+                      <WorkItemFiltersRow filter={workspaceViewWorkItemsFilter} variant="modal" />
+                    )
+                  }
+                </WorkspaceLevelWorkItemFiltersHOC>
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-2 border-t-[0.5px] border-subtle px-5 py-4">
+        <Button variant="secondary" onClick={handleClose}>
+          {t("common.cancel")}
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {data
+            ? isSubmitting
+              ? t("common.updating")
+              : t("view.update.label")
+            : isSubmitting
+              ? t("common.creating")
+              : t("view.create.label")}
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/apps/web/core/components/workspace/views/header.tsx b/apps/web/core/components/workspace/views/header.tsx
new file mode 100644
index 0000000..0ad9eff
--- /dev/null
+++ b/apps/web/core/components/workspace/views/header.tsx
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+
+// plane imports
+import { DEFAULT_GLOBAL_VIEWS_LIST, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { AddOutline } from "@makeplane/propel/icons";
+import type { TStaticViewTypes } from "@plane/types";
+import { Header, EHeaderVariant } from "@plane/ui";
+// hooks
+import { useGlobalView } from "@/hooks/store/use-global-view";
+import { useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { DefaultWorkspaceViewQuickActions } from "./default-view-quick-action";
+import { CreateUpdateWorkspaceViewModal } from "./modal";
+import { WorkspaceViewQuickActions } from "./quick-action";
+
+const ViewTab = observer(function ViewTab(props: { viewId: string }) {
+  const { viewId } = props;
+  // refs
+  const parentRef = useRef<HTMLDivElement>(null);
+  // router
+  const { workspaceSlug, globalViewId } = useParams();
+  // store hooks
+  const { getViewDetailsById } = useGlobalView();
+
+  const view = getViewDetailsById(viewId);
+
+  if (!view || !workspaceSlug || !globalViewId) return null;
+
+  return (
+    <div ref={parentRef} className="relative">
+      <WorkspaceViewQuickActions workspaceSlug={workspaceSlug?.toString()} view={view} />
+    </div>
+  );
+});
+
+function DefaultViewTab(props: {
+  tab: {
+    key: TStaticViewTypes;
+    i18n_label: string;
+  };
+}) {
+  const { tab } = props;
+  // refs
+  const parentRef = useRef<HTMLDivElement>(null);
+  // router
+  const { workspaceSlug, globalViewId } = useParams();
+
+  if (!workspaceSlug || !globalViewId) return null;
+  return (
+    <div key={tab.key} ref={parentRef} className="relative">
+      <DefaultWorkspaceViewQuickActions workspaceSlug={workspaceSlug?.toString()} view={tab} />
+    </div>
+  );
+}
+
+export const GlobalViewsHeader = observer(function GlobalViewsHeader() {
+  // states
+  const [createViewModal, setCreateViewModal] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  // router
+  const { globalViewId } = useParams();
+  // store hooks
+  const { currentWorkspaceViews } = useGlobalView();
+  const { allowPermissions } = useUserPermissions();
+
+  // bring the active view to the centre of the header
+  useEffect(() => {
+    if (globalViewId && currentWorkspaceViews) {
+      const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
+      if (activeTabElement && containerRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const activeTabRect = activeTabElement.getBoundingClientRect();
+        const diff = containerRect.right - activeTabRect.right;
+        activeTabElement.scrollIntoView({ behavior: "smooth", inline: diff > 500 ? "center" : "nearest" });
+      }
+    }
+  }, [globalViewId, currentWorkspaceViews, containerRef]);
+
+  const isAuthorizedUser = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  return (
+    <Header variant={EHeaderVariant.SECONDARY} className="z-[12] min-h-[44px] bg-surface-1">
+      <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
+      <div
+        ref={containerRef}
+        className="horizontal-scrollbar scrollbar-sm flex h-full w-full items-center overflow-x-auto overflow-y-hidden"
+      >
+        {DEFAULT_GLOBAL_VIEWS_LIST.map((tab, index) => (
+          <DefaultViewTab key={`${tab.key}-${index}`} tab={tab} />
+        ))}
+
+        {currentWorkspaceViews?.map((viewId) => (
+          <ViewTab key={viewId} viewId={viewId} />
+        ))}
+      </div>
+
+      {isAuthorizedUser ? (
+        <button
+          type="button"
+          className="sticky -right-4 flex flex-shrink-0 items-center justify-center border-transparent bg-surface-1 py-3 hover:border-subtle hover:text-placeholder"
+          onClick={() => setCreateViewModal(true)}
+        >
+          <AddOutline className="h-4 w-4 text-accent-secondary" />
+        </button>
+      ) : (
+        <></>
+      )}
+    </Header>
+  );
+});
diff --git a/apps/web/core/components/workspace/views/modal.tsx b/apps/web/core/components/workspace/views/modal.tsx
new file mode 100644
index 0000000..8f9be46
--- /dev/null
+++ b/apps/web/core/components/workspace/views/modal.tsx
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspaceView } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useGlobalView } from "@/hooks/store/use-global-view";
+import { useWorkItemFilters } from "@/hooks/store/work-item-filters/use-work-item-filters";
+import { useAppRouter } from "@/hooks/use-app-router";
+// local imports
+import { WorkspaceViewForm } from "./form";
+
+type Props = {
+  data?: IWorkspaceView;
+  isOpen: boolean;
+  onClose: () => void;
+  preLoadedData?: Partial<IWorkspaceView>;
+};
+
+export const CreateUpdateWorkspaceViewModal = observer(function CreateUpdateWorkspaceViewModal(props: Props) {
+  const { isOpen, onClose, data, preLoadedData } = props;
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug: routerWorkspaceSlug } = useParams();
+  const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
+  // store hooks
+  const { createGlobalView, updateGlobalView } = useGlobalView();
+  const { resetExpression } = useWorkItemFilters();
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const handleCreateView = async (payload: Partial<IWorkspaceView>) => {
+    if (!workspaceSlug) return;
+
+    try {
+      const payloadData: Partial<IWorkspaceView> = {
+        ...payload,
+        rich_filters: {
+          ...payload?.rich_filters,
+        },
+      };
+      const res = await createGlobalView(workspaceSlug, payloadData);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "View created successfully.",
+      });
+      router.push(`/${workspaceSlug}/workspace-views/${res.id}`);
+      handleClose();
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "View could not be created. Please try again.",
+      });
+    }
+  };
+
+  const handleUpdateView = async (payload: Partial<IWorkspaceView>) => {
+    if (!workspaceSlug || !data) return;
+
+    try {
+      const payloadData: Partial<IWorkspaceView> = {
+        ...payload,
+        query: {
+          ...payload?.rich_filters,
+        },
+      };
+      const res = await updateGlobalView(workspaceSlug, data.id, payloadData);
+      if (res) {
+        resetExpression(EIssuesStoreType.GLOBAL, data.id, res.rich_filters);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "View updated successfully.",
+        });
+        handleClose();
+      }
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "View could not be updated. Please try again.",
+      });
+    }
+  };
+
+  const handleFormSubmit = async (formData: Partial<IWorkspaceView>) => {
+    if (!workspaceSlug) return;
+
+    if (!data) await handleCreateView(formData);
+    else await handleUpdateView(formData);
+  };
+
+  if (!workspaceSlug) return null;
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <WorkspaceViewForm
+        handleFormSubmit={handleFormSubmit}
+        handleClose={handleClose}
+        data={data}
+        preLoadedData={preLoadedData}
+        workspaceSlug={workspaceSlug}
+      />
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/workspace/views/quick-action.tsx b/apps/web/core/components/workspace/views/quick-action.tsx
new file mode 100644
index 0000000..6e24f79
--- /dev/null
+++ b/apps/web/core/components/workspace/views/quick-action.tsx
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IWorkspaceView } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
+import { copyUrlToClipboard, cn } from "@plane/utils";
+// helpers
+import { useViewMenuItems } from "@/components/common/quick-actions-helper";
+// hooks
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+// local imports
+import { DeleteGlobalViewModal } from "./delete-view-modal";
+import { CreateUpdateWorkspaceViewModal } from "./modal";
+
+type Props = {
+  workspaceSlug: string;
+  view: IWorkspaceView;
+};
+
+export const WorkspaceViewQuickActions = observer(function WorkspaceViewQuickActions(props: Props) {
+  const { workspaceSlug, view } = props;
+  // states
+  const [updateViewModal, setUpdateViewModal] = useState(false);
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+  // store hooks
+  const { data } = useUser();
+  const { allowPermissions } = useUserPermissions();
+  // auth
+  const isOwner = view?.owned_by === data?.id;
+  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+
+  const viewLink = `${workspaceSlug}/workspace-views/${view.id}`;
+  const handleCopyText = async () => {
+    await copyUrlToClipboard(viewLink);
+    setToast({
+      type: TOAST_TYPE.SUCCESS,
+      title: "Link Copied!",
+      message: "View link copied to clipboard.",
+    });
+  };
+
+  const handleOpenInNewTab = () => window.open(`/${viewLink}`, "_blank");
+
+  const MENU_ITEMS = useViewMenuItems({
+    isOwner,
+    isAdmin,
+    handleDelete: () => setDeleteViewModal(true),
+    handleEdit: () => setUpdateViewModal(true),
+    handleOpenInNewTab,
+    handleCopyLink: handleCopyText,
+    workspaceSlug,
+    view,
+  });
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
+      <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+      <CustomMenu
+        ellipsis
+        placement="bottom-end"
+        closeOnSelect
+        buttonClassName="flex-shrink-0 flex items-center justify-center size-[26px] bg-layer-1/70 rounded-sm"
+      >
+        {MENU_ITEMS.items.map((item) => {
+          if (item.shouldRender === false) return null;
+          return (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={() => {
+                item.action();
+              }}
+              className={cn(
+                "flex items-center gap-2",
+                {
+                  "text-placeholder": item.disabled,
+                },
+                item.className
+              )}
+              disabled={item.disabled}
+            >
+              {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+              <div>
+                <h5>{item.title}</h5>
+                {item.description && (
+                  <p
+                    className={cn("whitespace-pre-line text-tertiary", {
+                      "text-placeholder": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/views/view-list-item.tsx b/apps/web/core/components/workspace/views/view-list-item.tsx
new file mode 100644
index 0000000..f30956a
--- /dev/null
+++ b/apps/web/core/components/workspace/views/view-list-item.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+// plane imports
+import { DeleteOutline, EditOutline } from "@makeplane/propel/icons";
+import { CustomMenu } from "@plane/ui";
+import { truncateText } from "@plane/utils";
+// hooks
+import { useGlobalView } from "@/hooks/store/use-global-view";
+// local imports
+import { DeleteGlobalViewModal } from "./delete-view-modal";
+import { CreateUpdateWorkspaceViewModal } from "./modal";
+
+type Props = { viewId: string };
+
+export const GlobalViewListItem = observer(function GlobalViewListItem(props: Props) {
+  const { viewId } = props;
+  // states
+  const [updateViewModal, setUpdateViewModal] = useState(false);
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getViewDetailsById } = useGlobalView();
+  // derived data
+  const view = getViewDetailsById(viewId);
+
+  if (!view) return null;
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
+      <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+      <div className="group border-b border-subtle hover:bg-surface-2">
+        <Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
+          <div className="relative flex h-[52px] w-full items-center justify-between rounded-sm p-4">
+            <div className="flex w-full items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="flex flex-col">
+                  <p className="truncate text-13 leading-4 font-medium">{truncateText(view.name, 75)}</p>
+                  {view?.description && <p className="text-11 text-secondary">{view.description}</p>}
+                </div>
+              </div>
+              <div className="ml-2 flex flex-shrink-0">
+                <div className="flex items-center gap-4">
+                  <CustomMenu ellipsis>
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        setUpdateViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <EditOutline width={14} height={14} />
+                        <span>Edit View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        setDeleteViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <DeleteOutline width={14} height={14} />
+                        <span>Delete View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Link>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/workspace/views/views-list.tsx b/apps/web/core/components/workspace/views/views-list.tsx
new file mode 100644
index 0000000..34d3c6b
--- /dev/null
+++ b/apps/web/core/components/workspace/views/views-list.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import { ViewListLoader } from "@/components/ui/loader/view-list-loader";
+// hooks
+import { useGlobalView } from "@/hooks/store/use-global-view";
+// local imports
+import { GlobalViewListItem } from "./view-list-item";
+
+type Props = {
+  searchQuery: string;
+};
+
+export const GlobalViewsList = observer(function GlobalViewsList(props: Props) {
+  const { searchQuery } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { fetchAllGlobalViews, currentWorkspaceViews, getSearchedViews } = useGlobalView();
+
+  useSWR(
+    workspaceSlug ? `GLOBAL_VIEWS_LIST_${workspaceSlug.toString()}` : null,
+    workspaceSlug ? () => fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  if (!currentWorkspaceViews) return <ViewListLoader />;
+
+  const filteredViewsList = getSearchedViews(searchQuery);
+
+  return (
+    <>
+      {filteredViewsList?.map((viewId) => (
+        <GlobalViewListItem key={viewId} viewId={viewId} />
+      ))}
+    </>
+  );
+});
diff --git a/apps/web/core/hooks/context/use-issue-modal.tsx b/apps/web/core/hooks/context/use-issue-modal.tsx
new file mode 100644
index 0000000..2cb6a35
--- /dev/null
+++ b/apps/web/core/hooks/context/use-issue-modal.tsx
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// components
+import { IssueModalContext } from "@/components/issues/issue-modal/context";
+import type { TIssueModalContext } from "@/components/issues/issue-modal/context";
+
+export const useIssueModal = (): TIssueModalContext => {
+  const context = useContext(IssueModalContext);
+  if (context === undefined) throw new Error("useIssueModal must be used within IssueModalProvider");
+  return context;
+};
diff --git a/apps/web/core/hooks/editor/index.ts b/apps/web/core/hooks/editor/index.ts
new file mode 100644
index 0000000..90fb185
--- /dev/null
+++ b/apps/web/core/hooks/editor/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-editor-config";
+export * from "./use-editor-mention";
diff --git a/apps/web/core/hooks/editor/use-editor-config.ts b/apps/web/core/hooks/editor/use-editor-config.ts
new file mode 100644
index 0000000..ecc9876
--- /dev/null
+++ b/apps/web/core/hooks/editor/use-editor-config.ts
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+// plane imports
+import type { TFileHandler } from "@plane/editor";
+import { getEditorAssetDownloadSrc, getEditorAssetSrc } from "@plane/utils";
+// hooks
+import { useEditorAsset } from "@/hooks/store/use-editor-asset";
+// plane web hooks
+import { useExtendedEditorConfig } from "@/hooks/editor/use-extended-editor-config";
+import { useFileSize } from "@/hooks/use-file-size";
+// services
+import { FileService } from "@/services/file.service";
+const fileService = new FileService();
+
+type TArgs = {
+  projectId?: string;
+  uploadFile: TFileHandler["upload"];
+  duplicateFile: TFileHandler["duplicate"];
+  workspaceId: string;
+  workspaceSlug: string;
+};
+
+export const useEditorConfig = () => {
+  // store hooks
+  const { assetsUploadPercentage } = useEditorAsset();
+  // file size
+  const { maxFileSize } = useFileSize();
+  const { getExtendedEditorFileHandlers } = useExtendedEditorConfig();
+
+  const getEditorFileHandlers = useCallback(
+    (args: TArgs): TFileHandler => {
+      const { projectId, uploadFile, duplicateFile, workspaceId, workspaceSlug } = args;
+
+      return {
+        assetsUploadStatus: assetsUploadPercentage,
+        cancel: fileService.cancelUpload,
+        checkIfAssetExists: async (assetId: string) => {
+          const res = await fileService.checkIfAssetExists(workspaceSlug, assetId);
+          return res?.exists ?? false;
+        },
+        delete: async (src: string) => {
+          if (src?.startsWith("http")) {
+            await fileService.deleteOldWorkspaceAsset(workspaceId, src);
+          } else {
+            await fileService.deleteNewAsset(
+              getEditorAssetSrc({
+                assetId: src,
+                projectId,
+                workspaceSlug,
+              }) ?? ""
+            );
+          }
+        },
+        getAssetDownloadSrc: async (path) => {
+          if (!path) return "";
+          if (path?.startsWith("http")) {
+            return path;
+          } else {
+            return (
+              getEditorAssetDownloadSrc({
+                assetId: path,
+                projectId,
+                workspaceSlug,
+              }) ?? ""
+            );
+          }
+        },
+        getAssetSrc: async (path) => {
+          if (!path) return "";
+          if (path?.startsWith("http")) {
+            return path;
+          } else {
+            return (
+              getEditorAssetSrc({
+                assetId: path,
+                projectId,
+                workspaceSlug,
+              }) ?? ""
+            );
+          }
+        },
+        restore: async (src: string) => {
+          if (src?.startsWith("http")) {
+            await fileService.restoreOldEditorAsset(workspaceId, src);
+          } else {
+            await fileService.restoreNewAsset(workspaceSlug, src);
+          }
+        },
+        upload: uploadFile,
+        duplicate: duplicateFile,
+        validation: {
+          maxFileSize,
+        },
+        ...getExtendedEditorFileHandlers({ projectId, workspaceSlug }),
+      };
+    },
+    [assetsUploadPercentage, getExtendedEditorFileHandlers, maxFileSize]
+  );
+
+  return {
+    getEditorFileHandlers,
+  };
+};
diff --git a/apps/web/core/hooks/editor/use-editor-mention.tsx b/apps/web/core/hooks/editor/use-editor-mention.tsx
new file mode 100644
index 0000000..89ac01e
--- /dev/null
+++ b/apps/web/core/hooks/editor/use-editor-mention.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+// plane editor
+import { Avatar } from "@makeplane/propel/components/avatar";
+import type { TMentionSection, TMentionSuggestion } from "@plane/editor";
+// plane types
+import type { TSearchEntities, TSearchEntityRequestPayload, TSearchResponse, TUserSearchResponse } from "@plane/types";
+// helpers
+import { getFileURL } from "@plane/utils";
+// plane web hooks
+import { useAdditionalEditorMention } from "@/hooks/use-additional-editor-mention";
+
+type TArgs = {
+  enableAdvancedMentions?: boolean;
+  searchEntity: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+};
+
+export const useEditorMention = (args: TArgs) => {
+  const { enableAdvancedMentions = false, searchEntity } = args;
+  // additional mentions
+  const { editorMentionTypes, updateAdditionalSections } = useAdditionalEditorMention({
+    enableAdvancedMentions,
+  });
+  // fetch mentions handler
+  const fetchMentions = useCallback(
+    async (query: string): Promise<TMentionSection[]> => {
+      try {
+        const res = await searchEntity({
+          count: 5,
+          query_type: editorMentionTypes,
+          query,
+        });
+        const suggestionSections: TMentionSection[] = [];
+        if (!res) {
+          throw new Error("No response found");
+        }
+        Object.keys(res).map((key) => {
+          const responseKey = key as TSearchEntities;
+          const response = res[responseKey];
+          if (responseKey === "user_mention" && response && response.length > 0) {
+            const items: TMentionSuggestion[] = (response as TUserSearchResponse[]).map((user) => ({
+              icon: (
+                <Avatar
+                  alt={user.member__display_name}
+                  fallback={user.member__display_name?.[0]?.toUpperCase()}
+                  src={getFileURL(user.member__avatar_url)}
+                  size="xs"
+                />
+              ),
+              id: user.member__id,
+              entity_identifier: user.member__id,
+              entity_name: "user_mention",
+              title: user.member__display_name,
+            }));
+            suggestionSections.push({
+              key: "users",
+              title: "Users",
+              items,
+            });
+          }
+        });
+        const { sections } = updateAdditionalSections({
+          response: res,
+        });
+        return [...suggestionSections, ...sections];
+      } catch (error) {
+        console.error("Error in fetching mentions:", error);
+        throw error;
+      }
+    },
+    [editorMentionTypes, searchEntity, updateAdditionalSections]
+  );
+
+  return {
+    fetchMentions,
+  };
+};
diff --git a/apps/web/core/hooks/editor/use-extended-editor-config.ts b/apps/web/core/hooks/editor/use-extended-editor-config.ts
new file mode 100644
index 0000000..172d902
--- /dev/null
+++ b/apps/web/core/hooks/editor/use-extended-editor-config.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+// plane imports
+import type { TExtendedFileHandler } from "@plane/editor";
+
+export type TExtendedEditorFileHandlersArgs = {
+  projectId?: string;
+  workspaceSlug: string;
+};
+
+export type TExtendedEditorConfig = {
+  getExtendedEditorFileHandlers: (args: TExtendedEditorFileHandlersArgs) => TExtendedFileHandler;
+};
+
+export const useExtendedEditorConfig = (): TExtendedEditorConfig => {
+  const getExtendedEditorFileHandlers: TExtendedEditorConfig["getExtendedEditorFileHandlers"] = useCallback(
+    () => ({}),
+    []
+  );
+
+  return {
+    getExtendedEditorFileHandlers,
+  };
+};
diff --git a/apps/web/core/hooks/oauth/core.tsx b/apps/web/core/hooks/oauth/core.tsx
new file mode 100644
index 0000000..1614883
--- /dev/null
+++ b/apps/web/core/hooks/oauth/core.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import { API_BASE_URL } from "@plane/constants";
+import type { TOAuthConfigs, TOAuthOption } from "@plane/types";
+// assets
+import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
+import GithubLightLogo from "@/app/assets/logos/github-black.png?url";
+import GithubDarkLogo from "@/app/assets/logos/github-dark.svg?url";
+import gitlabLogo from "@/app/assets/logos/gitlab-logo.svg?url";
+import googleLogo from "@/app/assets/logos/google-logo.svg?url";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+
+export const useCoreOAuthConfig = (oauthActionText: string): TOAuthConfigs => {
+  //router
+  const searchParams = useSearchParams();
+  // query params
+  const next_path = searchParams.get("next_path");
+  // theme
+  const { resolvedTheme } = useTheme();
+  // store hooks
+  const { config } = useInstance();
+  // derived values
+  const isOAuthEnabled =
+    (config &&
+      (config?.is_google_enabled ||
+        config?.is_github_enabled ||
+        config?.is_gitlab_enabled ||
+        config?.is_gitea_enabled)) ||
+    false;
+  const oAuthOptions: TOAuthOption[] = [
+    {
+      id: "google",
+      text: `${oauthActionText} with Google`,
+      icon: <img src={googleLogo} height={18} width={18} alt="Google Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_google_enabled,
+    },
+    {
+      id: "github",
+      text: `${oauthActionText} with GitHub`,
+      icon: (
+        <img
+          src={resolvedTheme === "dark" ? GithubDarkLogo : GithubLightLogo}
+          height={18}
+          width={18}
+          alt="GitHub Logo"
+        />
+      ),
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_github_enabled,
+    },
+    {
+      id: "gitlab",
+      text: `${oauthActionText} with GitLab`,
+      icon: <img src={gitlabLogo} height={18} width={18} alt="GitLab Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitlab_enabled,
+    },
+    {
+      id: "gitea",
+      text: `${oauthActionText} with Gitea`,
+      icon: <img src={giteaLogo} height={18} width={18} alt="Gitea Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitea/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitea_enabled,
+    },
+  ];
+
+  return {
+    isOAuthEnabled,
+    oAuthOptions,
+  };
+};
diff --git a/apps/web/core/hooks/oauth/extended.tsx b/apps/web/core/hooks/oauth/extended.tsx
new file mode 100644
index 0000000..01608b6
--- /dev/null
+++ b/apps/web/core/hooks/oauth/extended.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TOAuthConfigs } from "@plane/types";
+
+export const useExtendedOAuthConfig = (_oauthActionText: string): TOAuthConfigs => {
+  return {
+    isOAuthEnabled: false,
+    oAuthOptions: [],
+  };
+};
diff --git a/apps/web/core/hooks/oauth/index.ts b/apps/web/core/hooks/oauth/index.ts
new file mode 100644
index 0000000..e88c743
--- /dev/null
+++ b/apps/web/core/hooks/oauth/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TOAuthConfigs } from "@plane/types";
+// local imports
+import { useCoreOAuthConfig } from "./core";
+import { useExtendedOAuthConfig } from "./extended";
+
+export const useOAuthConfig = (oauthActionText: string = "Continue"): TOAuthConfigs => {
+  const coreOAuthConfig = useCoreOAuthConfig(oauthActionText);
+  const extendedOAuthConfig = useExtendedOAuthConfig(oauthActionText);
+  return {
+    isOAuthEnabled: coreOAuthConfig.isOAuthEnabled || extendedOAuthConfig.isOAuthEnabled,
+    oAuthOptions: [...coreOAuthConfig.oAuthOptions, ...extendedOAuthConfig.oAuthOptions],
+  };
+};
diff --git a/apps/web/core/hooks/pages/index.ts b/apps/web/core/hooks/pages/index.ts
new file mode 100644
index 0000000..564955b
--- /dev/null
+++ b/apps/web/core/hooks/pages/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-extended-editor-extensions";
+export * from "./use-pages-pane-extensions";
diff --git a/apps/web/core/hooks/pages/use-extended-editor-extensions.ts b/apps/web/core/hooks/pages/use-extended-editor-extensions.ts
new file mode 100644
index 0000000..e64837d
--- /dev/null
+++ b/apps/web/core/hooks/pages/use-extended-editor-extensions.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IEditorPropsExtended } from "@plane/editor";
+import type { TSearchEntityRequestPayload, TSearchResponse } from "@plane/types";
+import type { TPageInstance } from "@/store/pages/base-page";
+import type { EPageStoreType } from "@/hooks/store";
+
+export type TExtendedEditorExtensionsHookParams = {
+  workspaceSlug: string;
+  page: TPageInstance;
+  storeType: EPageStoreType;
+  fetchEntity: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+  getRedirectionLink: (pageId?: string) => string;
+  extensionHandlers?: Map<string, unknown>;
+  projectId?: string;
+};
+
+export type TExtendedEditorExtensionsConfig = IEditorPropsExtended;
+
+export const useExtendedEditorProps = (
+  _params: TExtendedEditorExtensionsHookParams
+): TExtendedEditorExtensionsConfig => ({});
diff --git a/apps/web/core/hooks/pages/use-pages-pane-extensions.ts b/apps/web/core/hooks/pages/use-pages-pane-extensions.ts
new file mode 100644
index 0000000..980f994
--- /dev/null
+++ b/apps/web/core/hooks/pages/use-pages-pane-extensions.ts
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import type { RefObject } from "react";
+import { useSearchParams } from "next/navigation";
+import type { EditorRefApi } from "@plane/editor";
+import {
+  PAGE_NAVIGATION_PANE_TAB_KEYS,
+  PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM,
+  PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM,
+} from "@/components/pages/navigation-pane";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useQueryParams } from "@/hooks/use-query-params";
+import type { TPageNavigationPaneTab } from "@/components/pages/navigation-pane/tab-panels";
+import type { INavigationPaneExtension } from "@/components/pages/navigation-pane";
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageExtensionHookParams = {
+  page: TPageInstance;
+  editorRef: RefObject<EditorRefApi | null>;
+};
+
+export const usePagesPaneExtensions = (_params: TPageExtensionHookParams) => {
+  const router = useAppRouter();
+  const { updateQueryParams } = useQueryParams();
+  const searchParams = useSearchParams();
+
+  // Generic navigation pane logic - hook manages feature-specific routing
+  const navigationPaneQueryParam = searchParams.get(
+    PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM
+  ) as TPageNavigationPaneTab | null;
+
+  const isNavigationPaneOpen =
+    !!navigationPaneQueryParam && PAGE_NAVIGATION_PANE_TAB_KEYS.includes(navigationPaneQueryParam);
+
+  const handleOpenNavigationPane = useCallback(() => {
+    const updatedRoute = updateQueryParams({
+      paramsToAdd: { [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: "outline" },
+    });
+    router.push(updatedRoute);
+  }, [router, updateQueryParams]);
+
+  const editorExtensionHandlers: Map<string, unknown> = useMemo(() => {
+    const map: Map<string, unknown> = new Map();
+    return map;
+  }, []);
+
+  const navigationPaneExtensions: INavigationPaneExtension[] = [];
+
+  const handleCloseNavigationPane = useCallback(() => {
+    const updatedRoute = updateQueryParams({
+      paramsToRemove: [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM, PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM],
+    });
+    router.push(updatedRoute);
+  }, [router, updateQueryParams]);
+
+  return {
+    editorExtensionHandlers,
+    navigationPaneExtensions,
+    handleOpenNavigationPane,
+    isNavigationPaneOpen,
+    handleCloseNavigationPane,
+  };
+};
diff --git a/apps/web/core/hooks/rich-filters/use-filters-operator-configs.ts b/apps/web/core/hooks/rich-filters/use-filters-operator-configs.ts
new file mode 100644
index 0000000..23d4601
--- /dev/null
+++ b/apps/web/core/hooks/rich-filters/use-filters-operator-configs.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TSupportedOperators } from "@plane/types";
+import { CORE_OPERATORS } from "@plane/types";
+
+export type TFiltersOperatorConfigs = {
+  allowedOperators: Set<TSupportedOperators>;
+  allowNegative: boolean;
+};
+
+export type TUseFiltersOperatorConfigsProps = {
+  workspaceSlug: string;
+};
+
+export const useFiltersOperatorConfigs = (_props: TUseFiltersOperatorConfigsProps): TFiltersOperatorConfigs => ({
+  allowedOperators: new Set(Object.values(CORE_OPERATORS)),
+  allowNegative: false,
+});
diff --git a/apps/web/core/hooks/store/estimates/index.ts b/apps/web/core/hooks/store/estimates/index.ts
new file mode 100644
index 0000000..3316d5e
--- /dev/null
+++ b/apps/web/core/hooks/store/estimates/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-project-estimate";
+export * from "./use-estimate";
+export * from "./use-estimate-point";
diff --git a/apps/web/core/hooks/store/estimates/use-estimate-point.ts b/apps/web/core/hooks/store/estimates/use-estimate-point.ts
new file mode 100644
index 0000000..1478364
--- /dev/null
+++ b/apps/web/core/hooks/store/estimates/use-estimate-point.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// mobx store
+import type { IEstimatePoint } from "@/store/estimates/estimate-point";
+
+export const useEstimatePoint = (
+  estimateId: string | undefined,
+  estimatePointId: string | undefined
+): IEstimatePoint => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useEstimatePoint must be used within StoreProvider");
+  if (!estimateId || !estimatePointId) return {} as IEstimatePoint;
+
+  return context.projectEstimate.estimates?.[estimateId]?.estimatePoints?.[estimatePointId] || {};
+};
diff --git a/apps/web/core/hooks/store/estimates/use-estimate.ts b/apps/web/core/hooks/store/estimates/use-estimate.ts
new file mode 100644
index 0000000..2a66049
--- /dev/null
+++ b/apps/web/core/hooks/store/estimates/use-estimate.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// mobx store
+import type { IEstimate } from "@/store/estimates/estimate";
+
+export const useEstimate = (estimateId: string | undefined): IEstimate => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useEstimate must be used within StoreProvider");
+  if (!estimateId) return {} as IEstimate;
+
+  return context.projectEstimate.estimates?.[estimateId] ?? {};
+};
diff --git a/apps/web/core/hooks/store/estimates/use-project-estimate.ts b/apps/web/core/hooks/store/estimates/use-project-estimate.ts
new file mode 100644
index 0000000..08b5482
--- /dev/null
+++ b/apps/web/core/hooks/store/estimates/use-project-estimate.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// context
+import { StoreContext } from "@/lib/store-context";
+// mobx store
+import type { IProjectEstimateStore } from "@/store/estimates/project-estimate.store";
+
+export const useProjectEstimates = (): IProjectEstimateStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useProjectPage must be used within StoreProvider");
+
+  return context.projectEstimate;
+};
diff --git a/apps/web/core/hooks/store/index.ts b/apps/web/core/hooks/store/index.ts
new file mode 100644
index 0000000..c514dce
--- /dev/null
+++ b/apps/web/core/hooks/store/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-page-store";
+export * from "./use-page";
diff --git a/apps/web/core/hooks/store/notifications/index.ts b/apps/web/core/hooks/store/notifications/index.ts
new file mode 100644
index 0000000..7a7b57e
--- /dev/null
+++ b/apps/web/core/hooks/store/notifications/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-workspace-notifications";
+export * from "./use-notification";
diff --git a/apps/web/core/hooks/store/notifications/use-notification.ts b/apps/web/core/hooks/store/notifications/use-notification.ts
new file mode 100644
index 0000000..e4e9ed0
--- /dev/null
+++ b/apps/web/core/hooks/store/notifications/use-notification.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// mobx store
+import type { INotification } from "@/store/notifications/notification";
+
+export const useNotification = (notificationId: string | undefined): INotification => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useNotification must be used within StoreProvider");
+  if (!notificationId) return {} as INotification;
+
+  return context.workspaceNotification.notifications?.[notificationId] ?? {};
+};
diff --git a/apps/web/core/hooks/store/notifications/use-workspace-notifications.ts b/apps/web/core/hooks/store/notifications/use-workspace-notifications.ts
new file mode 100644
index 0000000..bd52683
--- /dev/null
+++ b/apps/web/core/hooks/store/notifications/use-workspace-notifications.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// context
+import { StoreContext } from "@/lib/store-context";
+// mobx store
+import type { IWorkspaceNotificationStore } from "@/store/notifications/workspace-notifications.store";
+
+export const useWorkspaceNotifications = (): IWorkspaceNotificationStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useWorkspaceNotifications must be used within StoreProvider");
+
+  return context.workspaceNotification;
+};
diff --git a/apps/web/core/hooks/store/use-analytics.ts b/apps/web/core/hooks/store/use-analytics.ts
new file mode 100644
index 0000000..2ec50a6
--- /dev/null
+++ b/apps/web/core/hooks/store/use-analytics.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IBaseAnalyticsStore as IAnalyticsStore } from "@/store/analytics.store";
+
+export const useAnalytics = (): IAnalyticsStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useAnalytics must be used within StoreProvider");
+  return context.analytics;
+};
diff --git a/apps/web/core/hooks/store/use-app-theme.ts b/apps/web/core/hooks/store/use-app-theme.ts
new file mode 100644
index 0000000..bd639f0
--- /dev/null
+++ b/apps/web/core/hooks/store/use-app-theme.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+import type { IThemeStore } from "@/store/theme.store";
+
+export const useAppTheme = (): IThemeStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useAppTheme must be used within StoreProvider");
+  return context.theme;
+};
diff --git a/apps/web/core/hooks/store/use-calendar-view.ts b/apps/web/core/hooks/store/use-calendar-view.ts
new file mode 100644
index 0000000..cf19bec
--- /dev/null
+++ b/apps/web/core/hooks/store/use-calendar-view.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { ICalendarStore } from "@/store/issue/issue_calendar_view.store";
+
+export const useCalendarView = (): ICalendarStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useLabel must be used within StoreProvider");
+  return context.issue.issueCalendarView;
+};
diff --git a/apps/web/core/hooks/store/use-command-palette.ts b/apps/web/core/hooks/store/use-command-palette.ts
new file mode 100644
index 0000000..8869273
--- /dev/null
+++ b/apps/web/core/hooks/store/use-command-palette.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { ICommandPaletteStore } from "@/store/base-command-palette.store";
+
+export const useCommandPalette = (): ICommandPaletteStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useCommandPalette must be used within StoreProvider");
+  return context.commandPalette;
+};
diff --git a/apps/web/core/hooks/store/use-cycle-filter.ts b/apps/web/core/hooks/store/use-cycle-filter.ts
new file mode 100644
index 0000000..0c53363
--- /dev/null
+++ b/apps/web/core/hooks/store/use-cycle-filter.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { ICycleFilterStore } from "@/store/cycle_filter.store";
+
+export const useCycleFilter = (): ICycleFilterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useCycleFilter must be used within StoreProvider");
+  return context.cycleFilter;
+};
diff --git a/apps/web/core/hooks/store/use-cycle.ts b/apps/web/core/hooks/store/use-cycle.ts
new file mode 100644
index 0000000..7e22fc8
--- /dev/null
+++ b/apps/web/core/hooks/store/use-cycle.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { ICycleStore } from "@/store/cycle.store";
+
+export const useCycle = (): ICycleStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useCycle must be used within StoreProvider");
+  return context.cycle;
+};
diff --git a/apps/web/core/hooks/store/use-dashboard.ts b/apps/web/core/hooks/store/use-dashboard.ts
new file mode 100644
index 0000000..eaba6c5
--- /dev/null
+++ b/apps/web/core/hooks/store/use-dashboard.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IDashboardStore } from "@/store/dashboard.store";
+
+export const useDashboard = (): IDashboardStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useDashboard must be used within StoreProvider");
+  return context.dashboard;
+};
diff --git a/apps/web/core/hooks/store/use-editor-asset.ts b/apps/web/core/hooks/store/use-editor-asset.ts
new file mode 100644
index 0000000..ec46c54
--- /dev/null
+++ b/apps/web/core/hooks/store/use-editor-asset.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+import type { IEditorAssetStore } from "@/store/editor/asset.store";
+
+export const useEditorAsset = (): IEditorAssetStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useEditorAsset must be used within StoreProvider");
+  return context.editorAssetStore;
+};
diff --git a/apps/web/core/hooks/store/use-favorite.ts b/apps/web/core/hooks/store/use-favorite.ts
new file mode 100644
index 0000000..788ec94
--- /dev/null
+++ b/apps/web/core/hooks/store/use-favorite.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+import type { IFavoriteStore } from "@/store/favorite.store";
+
+export const useFavorite = (): IFavoriteStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useFavorites must be used within StoreProvider");
+  return context.favorite;
+};
diff --git a/apps/web/core/hooks/store/use-global-view.ts b/apps/web/core/hooks/store/use-global-view.ts
new file mode 100644
index 0000000..e8ece7d
--- /dev/null
+++ b/apps/web/core/hooks/store/use-global-view.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IGlobalViewStore } from "@/store/global-view.store";
+
+export const useGlobalView = (): IGlobalViewStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useGlobalView must be used within StoreProvider");
+  return context.globalView;
+};
diff --git a/apps/web/core/hooks/store/use-home.ts b/apps/web/core/hooks/store/use-home.ts
new file mode 100644
index 0000000..3012ea7
--- /dev/null
+++ b/apps/web/core/hooks/store/use-home.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IHomeStore } from "@/store/workspace/home";
+
+export const useHome = (): IHomeStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useDashboard must be used within StoreProvider");
+  return context.workspaceRoot.home;
+};
diff --git a/apps/web/core/hooks/store/use-inbox-issues.ts b/apps/web/core/hooks/store/use-inbox-issues.ts
new file mode 100644
index 0000000..bdd1ebe
--- /dev/null
+++ b/apps/web/core/hooks/store/use-inbox-issues.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
+
+export const useInboxIssues = (inboxIssueId: string): IInboxIssueStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useInboxIssues must be used within StoreProvider");
+  return context.projectInbox.getIssueInboxByIssueId(inboxIssueId);
+};
diff --git a/apps/web/core/hooks/store/use-instance.ts b/apps/web/core/hooks/store/use-instance.ts
new file mode 100644
index 0000000..a64b455
--- /dev/null
+++ b/apps/web/core/hooks/store/use-instance.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+import type { IInstanceStore } from "@/store/instance.store";
+
+export const useInstance = (): IInstanceStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useInstance must be used within StoreProvider");
+  return context.instance;
+};
diff --git a/apps/web/core/hooks/store/use-issue-detail.ts b/apps/web/core/hooks/store/use-issue-detail.ts
new file mode 100644
index 0000000..a8a4f8a
--- /dev/null
+++ b/apps/web/core/hooks/store/use-issue-detail.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+import type { TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IIssueDetail } from "@/store/issue/issue-details/root.store";
+
+export const useIssueDetail = (serviceType: TIssueServiceType = EIssueServiceType.ISSUES): IIssueDetail => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useIssueDetail must be used within StoreProvider");
+  if (serviceType === EIssueServiceType.EPICS) return context.issue.epicDetail;
+  else return context.issue.issueDetail;
+};
diff --git a/apps/web/core/hooks/store/use-issues.ts b/apps/web/core/hooks/store/use-issues.ts
new file mode 100644
index 0000000..3c8a1af
--- /dev/null
+++ b/apps/web/core/hooks/store/use-issues.ts
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+import { merge } from "lodash-es";
+import type { TIssueMap } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { StoreContext } from "@/lib/store-context";
+import type { IArchivedIssues, IArchivedIssuesFilter } from "@/store/issue/archived";
+import type { IWorkspaceIssues } from "@/store/issue/workspace/issue.store";
+import type { ICycleIssues, ICycleIssuesFilter } from "@/store/issue/cycle";
+import type { IModuleIssues, IModuleIssuesFilter } from "@/store/issue/module";
+import type { IProfileIssues, IProfileIssuesFilter } from "@/store/issue/profile";
+import type { IProjectIssues, IProjectIssuesFilter } from "@/store/issue/project";
+import type { IProjectViewIssues, IProjectViewIssuesFilter } from "@/store/issue/project-views";
+import type { IWorkspaceIssuesFilter } from "@/store/issue/workspace";
+import type { IWorkspaceDraftIssues, IWorkspaceDraftIssuesFilter } from "@/store/issue/workspace-draft";
+// constants
+
+type defaultIssueStore = {
+  issueMap: TIssueMap;
+};
+
+export type TStoreIssues = {
+  [EIssuesStoreType.GLOBAL]: defaultIssueStore & {
+    issues: IWorkspaceIssues;
+    issuesFilter: IWorkspaceIssuesFilter;
+  };
+  [EIssuesStoreType.WORKSPACE_DRAFT]: defaultIssueStore & {
+    issues: IWorkspaceDraftIssues;
+    issuesFilter: IWorkspaceDraftIssuesFilter;
+  };
+  [EIssuesStoreType.PROFILE]: defaultIssueStore & {
+    issues: IProfileIssues;
+    issuesFilter: IProfileIssuesFilter;
+  };
+  [EIssuesStoreType.TEAM]: defaultIssueStore & {
+    issues: IProjectIssues;
+    issuesFilter: IProjectIssuesFilter;
+  };
+  [EIssuesStoreType.PROJECT]: defaultIssueStore & {
+    issues: IProjectIssues;
+    issuesFilter: IProjectIssuesFilter;
+  };
+  [EIssuesStoreType.CYCLE]: defaultIssueStore & {
+    issues: ICycleIssues;
+    issuesFilter: ICycleIssuesFilter;
+  };
+  [EIssuesStoreType.MODULE]: defaultIssueStore & {
+    issues: IModuleIssues;
+    issuesFilter: IModuleIssuesFilter;
+  };
+  [EIssuesStoreType.TEAM_VIEW]: defaultIssueStore & {
+    issues: IProjectViewIssues;
+    issuesFilter: IProjectViewIssuesFilter;
+  };
+  [EIssuesStoreType.PROJECT_VIEW]: defaultIssueStore & {
+    issues: IProjectViewIssues;
+    issuesFilter: IProjectViewIssuesFilter;
+  };
+  [EIssuesStoreType.ARCHIVED]: defaultIssueStore & {
+    issues: IArchivedIssues;
+    issuesFilter: IArchivedIssuesFilter;
+  };
+  [EIssuesStoreType.DEFAULT]: defaultIssueStore & {
+    issues: IProjectIssues;
+    issuesFilter: IProjectIssuesFilter;
+  };
+  [EIssuesStoreType.EPIC]: defaultIssueStore & {
+    issues: IProjectIssues;
+    issuesFilter: IProjectIssuesFilter;
+  };
+  [EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS]: defaultIssueStore & {
+    issues: IProjectIssues;
+    issuesFilter: IProjectIssuesFilter;
+  };
+};
+
+export const useIssues = <T extends EIssuesStoreType>(storeType?: T): TStoreIssues[T] => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useIssues must be used within StoreProvider");
+
+  const defaultStore: defaultIssueStore = {
+    issueMap: context.issue.issues.issuesMap,
+  };
+
+  switch (storeType) {
+    case EIssuesStoreType.GLOBAL:
+      return merge(defaultStore, {
+        issues: context.issue.workspaceIssues,
+        issuesFilter: context.issue.workspaceIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.WORKSPACE_DRAFT:
+      return merge(defaultStore, {
+        issues: context.issue.workspaceDraftIssues,
+        issuesFilter: context.issue.workspaceDraftIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.PROFILE:
+      return merge(defaultStore, {
+        issues: context.issue.profileIssues,
+        issuesFilter: context.issue.profileIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.TEAM:
+      return merge(defaultStore, {
+        issues: context.issue.teamIssues,
+        issuesFilter: context.issue.teamIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.PROJECT:
+      return merge(defaultStore, {
+        issues: context.issue.projectIssues,
+        issuesFilter: context.issue.projectIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.CYCLE:
+      return merge(defaultStore, {
+        issues: context.issue.cycleIssues,
+        issuesFilter: context.issue.cycleIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.MODULE:
+      return merge(defaultStore, {
+        issues: context.issue.moduleIssues,
+        issuesFilter: context.issue.moduleIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.TEAM_VIEW:
+      return merge(defaultStore, {
+        issues: context.issue.teamViewIssues,
+        issuesFilter: context.issue.teamViewIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.PROJECT_VIEW:
+      return merge(defaultStore, {
+        issues: context.issue.projectViewIssues,
+        issuesFilter: context.issue.projectViewIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.ARCHIVED:
+      return merge(defaultStore, {
+        issues: context.issue.archivedIssues,
+        issuesFilter: context.issue.archivedIssuesFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.EPIC:
+      return merge(defaultStore, {
+        issues: context.issue.projectEpics,
+        issuesFilter: context.issue.projectEpicsFilter,
+      }) as TStoreIssues[T];
+    case EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS:
+      return merge(defaultStore, {
+        issues: context.issue.teamProjectWorkItems,
+        issuesFilter: context.issue.teamProjectWorkItemsFilter,
+      }) as TStoreIssues[T];
+    default:
+      return merge(defaultStore, {
+        issues: context.issue.projectIssues,
+        issuesFilter: context.issue.projectIssuesFilter,
+      }) as TStoreIssues[T];
+  }
+};
diff --git a/apps/web/core/hooks/store/use-kanban-view.ts b/apps/web/core/hooks/store/use-kanban-view.ts
new file mode 100644
index 0000000..d1d4f46
--- /dev/null
+++ b/apps/web/core/hooks/store/use-kanban-view.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IIssueKanBanViewStore } from "@/store/issue/issue_kanban_view.store";
+
+export const useKanbanView = (): IIssueKanBanViewStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useLabel must be used within StoreProvider");
+  return context.issue.issueKanBanView;
+};
diff --git a/apps/web/core/hooks/store/use-label.ts b/apps/web/core/hooks/store/use-label.ts
new file mode 100644
index 0000000..abefad4
--- /dev/null
+++ b/apps/web/core/hooks/store/use-label.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { ILabelStore } from "@/store/label.store";
+
+export const useLabel = (): ILabelStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useLabel must be used within StoreProvider");
+  return context.label;
+};
diff --git a/apps/web/core/hooks/store/use-member.ts b/apps/web/core/hooks/store/use-member.ts
new file mode 100644
index 0000000..745bfd3
--- /dev/null
+++ b/apps/web/core/hooks/store/use-member.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types;
+import type { IMemberRootStore } from "@/store/member";
+
+export const useMember = (): IMemberRootStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useMember must be used within StoreProvider");
+  return context.memberRoot;
+};
diff --git a/apps/web/core/hooks/store/use-module-filter.ts b/apps/web/core/hooks/store/use-module-filter.ts
new file mode 100644
index 0000000..6ba4ab5
--- /dev/null
+++ b/apps/web/core/hooks/store/use-module-filter.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IModuleFilterStore } from "@/store/module_filter.store";
+
+export const useModuleFilter = (): IModuleFilterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useModuleFilter must be used within StoreProvider");
+  return context.moduleFilter;
+};
diff --git a/apps/web/core/hooks/store/use-module.ts b/apps/web/core/hooks/store/use-module.ts
new file mode 100644
index 0000000..cf47e4e
--- /dev/null
+++ b/apps/web/core/hooks/store/use-module.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IModuleStore } from "@/store/module.store";
+
+export const useModule = (): IModuleStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useModule must be used within StoreProvider");
+  return context.module;
+};
diff --git a/apps/web/core/hooks/store/use-multiple-select-store.ts b/apps/web/core/hooks/store/use-multiple-select-store.ts
new file mode 100644
index 0000000..70d9bae
--- /dev/null
+++ b/apps/web/core/hooks/store/use-multiple-select-store.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+
+export const useMultipleSelectStore = () => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useMultipleSelectStore must be used within StoreProvider");
+  return context.multipleSelect;
+};
diff --git a/apps/web/core/hooks/store/use-page-store.ts b/apps/web/core/hooks/store/use-page-store.ts
new file mode 100644
index 0000000..e9fe577
--- /dev/null
+++ b/apps/web/core/hooks/store/use-page-store.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// context
+import { StoreContext } from "@/lib/store-context";
+// mobx store
+import type { IProjectPageStore } from "@/store/pages/project-page.store";
+
+export enum EPageStoreType {
+  PROJECT = "PROJECT_PAGE",
+}
+
+export type TReturnType = {
+  [EPageStoreType.PROJECT]: IProjectPageStore;
+};
+
+export const usePageStore = <T extends EPageStoreType>(storeType: T): TReturnType[T] => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("usePageStore must be used within StoreProvider");
+
+  if (storeType === EPageStoreType.PROJECT) {
+    return context.projectPages;
+  }
+
+  throw new Error(`Invalid store type: ${storeType}`);
+};
diff --git a/apps/web/core/hooks/store/use-page.ts b/apps/web/core/hooks/store/use-page.ts
new file mode 100644
index 0000000..2afe8b7
--- /dev/null
+++ b/apps/web/core/hooks/store/use-page.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// plane web hooks
+import type { EPageStoreType } from "./use-page-store";
+import { usePageStore } from "./use-page-store";
+
+export type TArgs = {
+  pageId: string;
+  storeType: EPageStoreType;
+};
+
+export const usePage = (args: TArgs) => {
+  const { pageId, storeType } = args;
+  // context
+  const context = useContext(StoreContext);
+  // store hooks
+  const pageStore = usePageStore(storeType);
+
+  if (context === undefined) throw new Error("usePage must be used within StoreProvider");
+  if (!pageId) throw new Error("pageId is required");
+
+  return pageStore.getPageById(pageId);
+};
diff --git a/apps/web/core/hooks/store/use-power-k.ts b/apps/web/core/hooks/store/use-power-k.ts
new file mode 100644
index 0000000..e6597cf
--- /dev/null
+++ b/apps/web/core/hooks/store/use-power-k.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IBasePowerKStore as IPowerKStore } from "@/store/base-power-k.store";
+
+export const usePowerK = (): IPowerKStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("usePowerK must be used within StoreProvider");
+  return context.powerK;
+};
diff --git a/apps/web/core/hooks/store/use-project-filter.ts b/apps/web/core/hooks/store/use-project-filter.ts
new file mode 100644
index 0000000..686e344
--- /dev/null
+++ b/apps/web/core/hooks/store/use-project-filter.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IProjectFilterStore } from "@/store/project/project_filter.store";
+
+export const useProjectFilter = (): IProjectFilterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useProjectFilter must be used within StoreProvider");
+  return context.projectRoot.projectFilter;
+};
diff --git a/apps/web/core/hooks/store/use-project-inbox.ts b/apps/web/core/hooks/store/use-project-inbox.ts
new file mode 100644
index 0000000..6b45235
--- /dev/null
+++ b/apps/web/core/hooks/store/use-project-inbox.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+import type { IProjectInboxStore } from "@/store/inbox/project-inbox.store";
+
+export const useProjectInbox = (): IProjectInboxStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useProjectInbox must be used within StoreProvider");
+  return context.projectInbox;
+};
diff --git a/apps/web/core/hooks/store/use-project-publish.ts b/apps/web/core/hooks/store/use-project-publish.ts
new file mode 100644
index 0000000..5f0f111
--- /dev/null
+++ b/apps/web/core/hooks/store/use-project-publish.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IProjectPublishStore } from "@/store/project/project-publish.store";
+
+export const useProjectPublish = (): IProjectPublishStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useProjectPublish must be used within StoreProvider");
+  return context.projectRoot.publish;
+};
diff --git a/apps/web/core/hooks/store/use-project-state.ts b/apps/web/core/hooks/store/use-project-state.ts
new file mode 100644
index 0000000..566461e
--- /dev/null
+++ b/apps/web/core/hooks/store/use-project-state.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+import type { IStateStore } from "@/store/state.store";
+
+export const useProjectState = (): IStateStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useProjectState must be used within StoreProvider");
+  return context.state;
+};
diff --git a/apps/web/core/hooks/store/use-project-view.ts b/apps/web/core/hooks/store/use-project-view.ts
new file mode 100644
index 0000000..b552947
--- /dev/null
+++ b/apps/web/core/hooks/store/use-project-view.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IProjectViewStore } from "@/store/project-view.store";
+
+export const useProjectView = (): IProjectViewStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useProjectView must be used within StoreProvider");
+  return context.projectView;
+};
diff --git a/apps/web/core/hooks/store/use-project.ts b/apps/web/core/hooks/store/use-project.ts
new file mode 100644
index 0000000..4694f03
--- /dev/null
+++ b/apps/web/core/hooks/store/use-project.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IProjectStore } from "@/store/project/project.store";
+
+export const useProject = (): IProjectStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useProject must be used within StoreProvider");
+  return context.projectRoot.project;
+};
diff --git a/apps/web/core/hooks/store/use-router-params.ts b/apps/web/core/hooks/store/use-router-params.ts
new file mode 100644
index 0000000..19a49ce
--- /dev/null
+++ b/apps/web/core/hooks/store/use-router-params.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+import type { IRouterStore } from "@/store/router.store";
+
+export const useRouterParams = (): IRouterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useRouterParams must be used within StoreProvider");
+  return context.router;
+};
diff --git a/apps/web/core/hooks/store/use-webhook.ts b/apps/web/core/hooks/store/use-webhook.ts
new file mode 100644
index 0000000..ed8dd13
--- /dev/null
+++ b/apps/web/core/hooks/store/use-webhook.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IWebhookStore } from "@/store/workspace/webhook.store";
+
+export const useWebhook = (): IWebhookStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useWebhook must be used within StoreProvider");
+  return context.workspaceRoot.webhook;
+};
diff --git a/apps/web/core/hooks/store/use-workspace.ts b/apps/web/core/hooks/store/use-workspace.ts
new file mode 100644
index 0000000..482e800
--- /dev/null
+++ b/apps/web/core/hooks/store/use-workspace.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IWorkspaceRootStore } from "@/store/workspace";
+
+export const useWorkspace = (): IWorkspaceRootStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useWorkspace must be used within StoreProvider");
+  return context.workspaceRoot;
+};
diff --git a/apps/web/core/hooks/store/user/index.ts b/apps/web/core/hooks/store/user/index.ts
new file mode 100644
index 0000000..845d751
--- /dev/null
+++ b/apps/web/core/hooks/store/user/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./user-user";
+export * from "./user-user-profile";
+export * from "./user-user-settings";
+export * from "./user-permissions";
diff --git a/apps/web/core/hooks/store/user/user-permissions.ts b/apps/web/core/hooks/store/user/user-permissions.ts
new file mode 100644
index 0000000..e532960
--- /dev/null
+++ b/apps/web/core/hooks/store/user/user-permissions.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// plane web imports
+import type { IUserPermissionStore } from "@/store/user/base-permissions.store";
+
+export const useUserPermissions = (): IUserPermissionStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserPermissions must be used within StoreProvider");
+
+  return context.user.permission;
+};
diff --git a/apps/web/core/hooks/store/user/user-user-profile.ts b/apps/web/core/hooks/store/user/user-user-profile.ts
new file mode 100644
index 0000000..d7393dd
--- /dev/null
+++ b/apps/web/core/hooks/store/user/user-user-profile.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IUserProfileStore } from "@/store/user/profile.store";
+
+export const useUserProfile = (): IUserProfileStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
+  return context.user.userProfile;
+};
diff --git a/apps/web/core/hooks/store/user/user-user-settings.ts b/apps/web/core/hooks/store/user/user-user-settings.ts
new file mode 100644
index 0000000..b14a8d1
--- /dev/null
+++ b/apps/web/core/hooks/store/user/user-user-settings.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IUserSettingsStore } from "@/store/user/settings.store";
+
+export const useUserSettings = (): IUserSettingsStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUserSettings must be used within StoreProvider");
+  return context.user.userSettings;
+};
diff --git a/apps/web/core/hooks/store/user/user-user.ts b/apps/web/core/hooks/store/user/user-user.ts
new file mode 100644
index 0000000..6c57579
--- /dev/null
+++ b/apps/web/core/hooks/store/user/user-user.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IUserStore } from "@/store/user";
+
+export const useUser = (): IUserStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useUser must be used within StoreProvider");
+  return context.user;
+};
diff --git a/apps/web/core/hooks/store/work-item-filters/use-work-item-filter-instance.ts b/apps/web/core/hooks/store/work-item-filters/use-work-item-filter-instance.ts
new file mode 100644
index 0000000..fca3685
--- /dev/null
+++ b/apps/web/core/hooks/store/work-item-filters/use-work-item-filter-instance.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IWorkItemFilterInstance } from "@plane/shared-state";
+import type { EIssuesStoreType } from "@plane/types";
+// local imports
+import { useWorkItemFilters } from "./use-work-item-filters";
+
+export const useWorkItemFilterInstance = (
+  entityType: EIssuesStoreType,
+  entityId: string | undefined
+): IWorkItemFilterInstance | undefined => {
+  const { getFilter } = useWorkItemFilters();
+  return entityId ? getFilter(entityType, entityId) : undefined;
+};
diff --git a/apps/web/core/hooks/store/work-item-filters/use-work-item-filters.ts b/apps/web/core/hooks/store/work-item-filters/use-work-item-filters.ts
new file mode 100644
index 0000000..1a3ac33
--- /dev/null
+++ b/apps/web/core/hooks/store/work-item-filters/use-work-item-filters.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// plane imports
+import type { IWorkItemFilterStore } from "@plane/shared-state";
+// context
+import { StoreContext } from "@/lib/store-context";
+
+export const useWorkItemFilters = (): IWorkItemFilterStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useWorkItemFilters must be used within StoreProvider");
+  return context.workItemFilters;
+};
diff --git a/apps/web/core/hooks/store/workspace-draft/index.ts b/apps/web/core/hooks/store/workspace-draft/index.ts
new file mode 100644
index 0000000..5e14851
--- /dev/null
+++ b/apps/web/core/hooks/store/workspace-draft/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-workspace-draft-issue";
+export * from "./use-workspace-draft-issue-filters";
diff --git a/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue-filters.ts b/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue-filters.ts
new file mode 100644
index 0000000..1c0b96e
--- /dev/null
+++ b/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue-filters.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IWorkspaceDraftIssues } from "@/store/issue/workspace-draft";
+
+export const useWorkspaceDraftIssueFilters = (): IWorkspaceDraftIssues => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useWorkspaceDraftIssueFilters must be used within StoreProvider");
+
+  return context.issue.workspaceDraftIssues;
+};
diff --git a/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue.ts b/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue.ts
new file mode 100644
index 0000000..929e156
--- /dev/null
+++ b/apps/web/core/hooks/store/workspace-draft/use-workspace-draft-issue.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import type { IWorkspaceDraftIssues } from "@/store/issue/workspace-draft";
+
+export const useWorkspaceDraftIssues = (): IWorkspaceDraftIssues => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useWorkspaceDraftIssues must be used within StoreProvider");
+
+  return context.issue.workspaceDraftIssues;
+};
diff --git a/apps/web/core/hooks/use-additional-editor-mention.tsx b/apps/web/core/hooks/use-additional-editor-mention.tsx
new file mode 100644
index 0000000..3f936eb
--- /dev/null
+++ b/apps/web/core/hooks/use-additional-editor-mention.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+// plane editor
+import type { TMentionSection } from "@plane/editor";
+// plane types
+import type { TSearchEntities, TSearchResponse } from "@plane/types";
+
+export type TUseAdditionalEditorMentionArgs = {
+  enableAdvancedMentions: boolean;
+};
+
+export type TAdditionalEditorMentionHandlerArgs = {
+  response: TSearchResponse;
+};
+
+export type TAdditionalEditorMentionHandlerReturnType = {
+  sections: TMentionSection[];
+};
+
+export type TAdditionalParseEditorContentArgs = {
+  id: string;
+  entityType: TSearchEntities;
+};
+
+export type TAdditionalParseEditorContentReturnType =
+  | {
+      redirectionPath: string;
+      textContent: string;
+    }
+  | undefined;
+
+export const useAdditionalEditorMention = (_args: TUseAdditionalEditorMentionArgs) => {
+  const updateAdditionalSections = useCallback(
+    (_args: TAdditionalEditorMentionHandlerArgs): TAdditionalEditorMentionHandlerReturnType => ({
+      sections: [],
+    }),
+    []
+  );
+
+  const parseAdditionalEditorContent = useCallback(
+    (_args: TAdditionalParseEditorContentArgs): TAdditionalParseEditorContentReturnType => undefined,
+    []
+  );
+
+  const editorMentionTypes: TSearchEntities[] = useMemo(() => ["user_mention"], []);
+
+  return {
+    updateAdditionalSections,
+    parseAdditionalEditorContent,
+    editorMentionTypes,
+  };
+};
diff --git a/apps/web/core/hooks/use-additional-favorite-item-details.tsx b/apps/web/core/hooks/use-additional-favorite-item-details.tsx
new file mode 100644
index 0000000..6f39212
--- /dev/null
+++ b/apps/web/core/hooks/use-additional-favorite-item-details.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IFavorite } from "@plane/types";
+// components
+import { FavoriteItemIcon } from "@/components/workspace/sidebar/favorites/favorite-items/common";
+
+const getAdditionalFavoriteItemDetails = (_workspaceSlug: string, favorite: IFavorite) => {
+  const { entity_type: favoriteItemEntityType } = favorite;
+  const favoriteItemName = favorite?.entity_data?.name || favorite?.name;
+
+  let itemIcon;
+  let itemTitle;
+
+  switch (favoriteItemEntityType) {
+    default:
+      itemTitle = favoriteItemName;
+      itemIcon = <FavoriteItemIcon type={favoriteItemEntityType} logo={favorite.entity_data?.logo_props} />;
+      break;
+  }
+  return { itemIcon, itemTitle };
+};
+
+export const useAdditionalFavoriteItemDetails = () => ({
+  getAdditionalFavoriteItemDetails,
+});
diff --git a/apps/web/core/hooks/use-app-router.tsx b/apps/web/core/hooks/use-app-router.tsx
new file mode 100644
index 0000000..a86920b
--- /dev/null
+++ b/apps/web/core/hooks/use-app-router.tsx
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// router from n-progress-bar
+import { useRouter } from "next/navigation";
+
+export const useAppRouter = () => useRouter();
diff --git a/apps/web/core/hooks/use-auto-save.tsx b/apps/web/core/hooks/use-auto-save.tsx
new file mode 100644
index 0000000..351a34c
--- /dev/null
+++ b/apps/web/core/hooks/use-auto-save.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { debounce } from "lodash-es";
+
+const AUTO_SAVE_TIME = 30000;
+
+const useAutoSave = (handleSaveDescription: () => void) => {
+  const intervalIdRef = useRef<any>(null);
+  const handleSaveDescriptionRef = useRef(handleSaveDescription);
+
+  // Update the ref to always point to the latest handleSaveDescription
+  useEffect(() => {
+    handleSaveDescriptionRef.current = handleSaveDescription;
+  }, [handleSaveDescription]);
+
+  // Set up the interval to run every 10 seconds
+  useEffect(() => {
+    intervalIdRef.current = setInterval(() => {
+      try {
+        handleSaveDescriptionRef.current();
+      } catch (error) {
+        console.error("Autosave before manual save failed:", error);
+      }
+    }, AUTO_SAVE_TIME);
+
+    return () => {
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current);
+      }
+    };
+  }, []);
+
+  // Debounced save function for manual save (Ctrl+S or Cmd+S) and clearing the
+  // interval for auto save and setting up the interval again
+  useEffect(() => {
+    const debouncedSave = debounce(() => {
+      try {
+        handleSaveDescriptionRef.current();
+      } catch (error) {
+        console.error("Manual save failed:", error);
+      }
+
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current);
+        intervalIdRef.current = setInterval(() => {
+          try {
+            handleSaveDescriptionRef.current();
+          } catch (error) {
+            console.error("Autosave after manual save failed:", error);
+          }
+        }, AUTO_SAVE_TIME);
+      }
+    }, 500);
+
+    const handleSave = (e: KeyboardEvent) => {
+      const { ctrlKey, metaKey, key } = e;
+      const cmdClicked = ctrlKey || metaKey;
+
+      if (cmdClicked && key.toLowerCase() === "s") {
+        e.preventDefault();
+        e.stopPropagation();
+        debouncedSave();
+      }
+    };
+
+    window.addEventListener("keydown", handleSave);
+
+    return () => {
+      window.removeEventListener("keydown", handleSave);
+    };
+  }, []);
+};
+
+export default useAutoSave;
diff --git a/apps/web/core/hooks/use-auto-scroller.tsx b/apps/web/core/hooks/use-auto-scroller.tsx
new file mode 100644
index 0000000..daca389
--- /dev/null
+++ b/apps/web/core/hooks/use-auto-scroller.tsx
@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
+import { useEffect, useRef } from "react";
+
+const SCROLL_BY = 3;
+
+const AUTO_SCROLL_THRESHOLD = 15;
+const MAX_SPEED_THRESHOLD = 5;
+
+export const useAutoScroller = (
+  containerRef: RefObject<HTMLDivElement | null>,
+  shouldScroll = false,
+  leftOffset = 0,
+  topOffset = 0
+) => {
+  const containerDimensions = useRef<DOMRect | undefined>(undefined);
+  const intervalId = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+  const mousePosition = useRef<{ clientX: number; clientY: number } | undefined>(undefined);
+
+  const clearRegisteredTimeout = () => {
+    clearInterval(intervalId.current);
+  };
+
+  const onDragEnd = () => clearRegisteredTimeout();
+
+  const handleAutoScroll = (e: MouseEvent) => {
+    const rect = containerDimensions.current;
+    clearInterval(intervalId.current);
+
+    if (!rect || !shouldScroll || (e.clientX === 0 && e.clientY === 0)) return;
+
+    let diffX = 0,
+      diffY = 0;
+
+    if (mousePosition.current) {
+      diffX = e.clientX - mousePosition.current.clientX;
+      diffY = e.clientY - mousePosition.current.clientY;
+    }
+
+    mousePosition.current = { clientX: e.clientX, clientY: e.clientY };
+    const { left, top, width, height } = rect;
+
+    const mouseX = e.clientX - left - leftOffset;
+    const mouseY = e.clientY - top - topOffset;
+
+    const currWidth = width - leftOffset;
+    const currHeight = height - topOffset;
+
+    // Get Threshold in percentages
+    const thresholdX = (currWidth / 100) * AUTO_SCROLL_THRESHOLD;
+    const thresholdY = (currHeight / 100) * AUTO_SCROLL_THRESHOLD;
+    const maxSpeedX = (currWidth / 100) * MAX_SPEED_THRESHOLD;
+    const maxSpeedY = (currHeight / 100) * MAX_SPEED_THRESHOLD;
+
+    let scrollByX = 0,
+      scrollByY = 0;
+
+    // Check mouse positions against thresholds
+    if (mouseX < thresholdX && diffX <= 0) {
+      scrollByX = -1 * SCROLL_BY;
+      if (mouseX < maxSpeedX) {
+        scrollByX *= 2;
+      }
+    }
+
+    if (mouseX > currWidth - thresholdX && diffX >= 0) {
+      scrollByX = SCROLL_BY;
+      if (mouseX > currWidth - maxSpeedX) {
+        scrollByX *= 2;
+      }
+    }
+
+    if (mouseY < thresholdY && diffY <= 0) {
+      scrollByY = -1 * SCROLL_BY;
+      if (mouseX < maxSpeedY) {
+        scrollByY *= 2;
+      }
+    }
+
+    if (mouseY > currHeight - thresholdY && diffY >= 0) {
+      scrollByY = SCROLL_BY;
+      if (mouseY > currHeight - maxSpeedY) {
+        scrollByY *= 2;
+      }
+    }
+
+    // if mouse position breaches threshold, then start to scroll
+    if (scrollByX || scrollByY) {
+      containerRef.current?.scrollBy(scrollByX, scrollByY);
+      intervalId.current = setInterval(() => {
+        containerRef.current?.scrollBy(scrollByX, scrollByY);
+      }, 16);
+    }
+  };
+
+  useEffect(() => {
+    const containerElement = containerRef.current;
+
+    if (!containerElement || !shouldScroll) return;
+
+    containerElement.addEventListener("drag", handleAutoScroll);
+    containerElement.addEventListener("mousemove", handleAutoScroll);
+    document.addEventListener("mouseup", onDragEnd);
+    document.addEventListener("dragend", onDragEnd);
+
+    return () => {
+      containerElement?.removeEventListener("drag", handleAutoScroll);
+      containerElement?.removeEventListener("mousemove", handleAutoScroll);
+      document.removeEventListener("mouseup", onDragEnd);
+      document.removeEventListener("dragend", onDragEnd);
+    };
+  }, [shouldScroll, intervalId]);
+
+  useEffect(() => {
+    const containerElement = containerRef.current;
+
+    if (!containerElement || !shouldScroll) {
+      clearRegisteredTimeout();
+      containerDimensions.current = undefined;
+    }
+
+    containerDimensions.current = containerElement?.getBoundingClientRect();
+  }, [shouldScroll]);
+};
diff --git a/apps/web/core/hooks/use-bulk-operation-status.ts b/apps/web/core/hooks/use-bulk-operation-status.ts
new file mode 100644
index 0000000..5397790
--- /dev/null
+++ b/apps/web/core/hooks/use-bulk-operation-status.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const useBulkOperationStatus = () => false;
diff --git a/apps/web/core/hooks/use-collaborative-page-actions.tsx b/apps/web/core/hooks/use-collaborative-page-actions.tsx
new file mode 100644
index 0000000..d212b47
--- /dev/null
+++ b/apps/web/core/hooks/use-collaborative-page-actions.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+import type { TDocumentEventsServer } from "@plane/editor";
+import type { TDocumentEventsClient } from "@plane/editor/lib";
+import { DocumentCollaborativeEvents, getServerEventName } from "@plane/editor/lib";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+export type CollaborativeAction = {
+  execute: (shouldSync?: boolean, recursive?: boolean) => Promise<void>;
+  errorMessage: string;
+};
+
+type CollaborativeActionEvent =
+  | { type: "sendMessageToServer"; message: TDocumentEventsServer; recursive?: boolean }
+  | { type: "receivedMessageFromServer"; message: TDocumentEventsClient };
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const useCollaborativePageActions = (props: Props) => {
+  const { page } = props;
+  const editorRef = page.editor.editorRef;
+  // currentUserAction local state to track if the current action is being processed, a
+  // local action is basically the action performed by the current user to avoid double operations
+  const [currentActionBeingProcessed, setCurrentActionBeingProcessed] = useState<TDocumentEventsClient | null>(null);
+
+  // @ts-expect-error - TODO: fix this
+  const actionHandlerMap: Record<TDocumentEventsClient, CollaborativeAction> = useMemo(
+    () => ({
+      [DocumentCollaborativeEvents.lock.client]: {
+        execute: (shouldSync?: boolean, recursive?: boolean) => page.lock({ shouldSync, recursive }),
+        errorMessage: "Page could not be locked. Please try again later.",
+      },
+      [DocumentCollaborativeEvents.unlock.client]: {
+        execute: (shouldSync?: boolean, recursive?: boolean) => page.unlock({ shouldSync, recursive }),
+        errorMessage: "Page could not be unlocked. Please try again later.",
+      },
+      [DocumentCollaborativeEvents.archive.client]: {
+        execute: (shouldSync?: boolean) => page.archive({ shouldSync }),
+        errorMessage: "Page could not be archived. Please try again later.",
+      },
+      [DocumentCollaborativeEvents.unarchive.client]: {
+        execute: (shouldSync?: boolean) => page.restore({ shouldSync }),
+        errorMessage: "Page could not be restored. Please try again later.",
+      },
+      [DocumentCollaborativeEvents["make-public"].client]: {
+        execute: (shouldSync?: boolean) => page.makePublic({ shouldSync }),
+        errorMessage: "Page could not be made public. Please try again later.",
+      },
+      [DocumentCollaborativeEvents["make-private"].client]: {
+        execute: (shouldSync?: boolean) => page.makePrivate({ shouldSync }),
+        errorMessage: "Page could not be made private. Please try again later.",
+      },
+    }),
+    [page]
+  );
+
+  const executeCollaborativeAction = useCallback(
+    async (event: CollaborativeActionEvent) => {
+      const isPerformedByCurrentUser = event.type === "sendMessageToServer";
+      const clientAction = isPerformedByCurrentUser ? DocumentCollaborativeEvents[event.message].client : event.message;
+      const actionDetails = actionHandlerMap[clientAction];
+      try {
+        await actionDetails.execute(isPerformedByCurrentUser, isPerformedByCurrentUser ? event?.recursive : undefined);
+        if (isPerformedByCurrentUser) {
+          const serverEventName = getServerEventName(clientAction);
+          if (serverEventName) {
+            editorRef?.emitRealTimeUpdate(serverEventName);
+          }
+        }
+      } catch {
+        if (actionDetails?.errorMessage) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: actionDetails.errorMessage,
+          });
+        }
+      }
+    },
+    [actionHandlerMap, editorRef]
+  );
+
+  useEffect(() => {
+    const realTimeStatelessMessageListener = editorRef?.listenToRealTimeUpdate();
+    const handleStatelessMessage = (message: { payload: TDocumentEventsClient }) => {
+      if (currentActionBeingProcessed === message.payload) {
+        setCurrentActionBeingProcessed(null);
+        return;
+      }
+
+      if (message.payload) {
+        executeCollaborativeAction({ type: "receivedMessageFromServer", message: message.payload });
+      }
+    };
+
+    realTimeStatelessMessageListener?.on("stateless", handleStatelessMessage);
+
+    return () => {
+      realTimeStatelessMessageListener?.off("stateless", handleStatelessMessage);
+    };
+  }, [editorRef, currentActionBeingProcessed, executeCollaborativeAction]);
+
+  return {
+    executeCollaborativeAction,
+  };
+};
diff --git a/apps/web/core/hooks/use-current-time.tsx b/apps/web/core/hooks/use-current-time.tsx
new file mode 100644
index 0000000..f703b63
--- /dev/null
+++ b/apps/web/core/hooks/use-current-time.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+
+export const useCurrentTime = () => {
+  const [currentTime, setCurrentTime] = useState(new Date());
+  // update the current time every minute (60000ms)
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 60000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return {
+    currentTime,
+  };
+};
diff --git a/apps/web/core/hooks/use-debounce.tsx b/apps/web/core/hooks/use-debounce.tsx
new file mode 100644
index 0000000..6e833da
--- /dev/null
+++ b/apps/web/core/hooks/use-debounce.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+
+const useDebounce = <T,>(value: T, milliSeconds: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, milliSeconds);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, milliSeconds]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;
diff --git a/apps/web/core/hooks/use-debounced-duplicate-issues.tsx b/apps/web/core/hooks/use-debounced-duplicate-issues.tsx
new file mode 100644
index 0000000..3245990
--- /dev/null
+++ b/apps/web/core/hooks/use-debounced-duplicate-issues.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TDeDupeIssue } from "@plane/types";
+
+export const useDebouncedDuplicateIssues = (
+  _workspaceSlug: string | undefined,
+  _workspaceId: string | undefined,
+  _projectId: string | undefined,
+  _formData: { name: string | undefined; description_html?: string | undefined; issueId?: string | undefined }
+) => {
+  const duplicateIssues: TDeDupeIssue[] = [];
+
+  return { duplicateIssues };
+};
diff --git a/apps/web/core/hooks/use-dropdown-key-down.tsx b/apps/web/core/hooks/use-dropdown-key-down.tsx
new file mode 100644
index 0000000..ede4c1a
--- /dev/null
+++ b/apps/web/core/hooks/use-dropdown-key-down.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+
+type TUseDropdownKeyDown = {
+  (
+    onEnterKeyDown: () => void,
+    onEscKeyDown: () => void,
+    stopPropagation?: boolean
+  ): (event: React.KeyboardEvent<HTMLElement>) => void;
+};
+
+export const useDropdownKeyDown: TUseDropdownKeyDown = (onEnterKeyDown, onEscKeyDown, stopPropagation = true) => {
+  const stopEventPropagation = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    [stopPropagation]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+        stopEventPropagation(event);
+        onEnterKeyDown();
+      } else if (event.key === "Escape") {
+        stopEventPropagation(event);
+        onEscKeyDown();
+      } else if (event.key === "Tab") onEscKeyDown();
+    },
+    [onEnterKeyDown, onEscKeyDown, stopEventPropagation]
+  );
+
+  return handleKeyDown;
+};
diff --git a/apps/web/core/hooks/use-dropdown.ts b/apps/web/core/hooks/use-dropdown.ts
new file mode 100644
index 0000000..c1c59b0
--- /dev/null
+++ b/apps/web/core/hooks/use-dropdown.ts
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/hooks";
+// hooks
+import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
+import { usePlatformOS } from "./use-platform-os";
+
+type TArguments = {
+  dropdownRef: React.RefObject<HTMLDivElement | null>;
+  inputRef?: React.RefObject<HTMLInputElement | null>;
+  isOpen: boolean;
+  onClose?: () => void;
+  onOpen?: () => Promise<void> | void;
+  query?: string;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setQuery?: React.Dispatch<React.SetStateAction<string>>;
+};
+
+export const useDropdown = (args: TArguments) => {
+  const { dropdownRef, inputRef, isOpen, onClose, onOpen, query, setIsOpen, setQuery } = args;
+
+  const { isMobile } = usePlatformOS();
+
+  /**
+   * @description clear the search input when the user presses the escape key, if the search input is not empty
+   * @param {React.KeyboardEvent<HTMLInputElement>} e
+   */
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery?.("");
+    }
+  };
+
+  /**
+   * @description close the dropdown, clear the search input, and call the onClose callback
+   */
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose?.();
+    setQuery?.("");
+  };
+
+  // toggle the dropdown, call the onOpen callback if the dropdown is closed, and call the onClose callback if the dropdown is open
+  const toggleDropdown = () => {
+    if (!isOpen) onOpen?.();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose?.();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  /**
+   * @description toggle the dropdown on click
+   * @param {React.MouseEvent<HTMLButtonElement, MouseEvent>} e
+   */
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  // close the dropdown when the user clicks outside of the dropdown
+  // skip binding the document listener entirely while the dropdown is closed
+  useOutsideClickDetector(dropdownRef, handleClose, false, isOpen);
+
+  // focus the search input when the dropdown is open
+  useEffect(() => {
+    if (isOpen && inputRef?.current && !isMobile) {
+      inputRef.current.focus();
+    }
+  }, [inputRef, isOpen, isMobile]);
+
+  return {
+    handleClose,
+    handleKeyDown,
+    handleOnClick,
+    searchInputKeyDown,
+  };
+};
diff --git a/apps/web/core/hooks/use-editor-flagging.ts b/apps/web/core/hooks/use-editor-flagging.ts
new file mode 100644
index 0000000..019c62b
--- /dev/null
+++ b/apps/web/core/hooks/use-editor-flagging.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// editor
+import type { TExtensions } from "@plane/editor";
+import type { EPageStoreType } from "@/hooks/store";
+
+export type TEditorFlaggingHookReturnType = {
+  document: {
+    disabled: TExtensions[];
+    flagged: TExtensions[];
+  };
+  liteText: {
+    disabled: TExtensions[];
+    flagged: TExtensions[];
+  };
+  richText: {
+    disabled: TExtensions[];
+    flagged: TExtensions[];
+  };
+};
+
+export type TEditorFlaggingHookProps = {
+  workspaceSlug: string;
+  projectId?: string;
+  storeType?: EPageStoreType;
+};
+
+/**
+ * @description extensions disabled in various editors
+ */
+export const useEditorFlagging = (_props: TEditorFlaggingHookProps): TEditorFlaggingHookReturnType => ({
+  document: {
+    disabled: ["ai", "collaboration-cursor"],
+    flagged: [],
+  },
+  liteText: {
+    disabled: ["ai", "collaboration-cursor"],
+    flagged: [],
+  },
+  richText: {
+    disabled: ["ai", "collaboration-cursor"],
+    flagged: [],
+  },
+});
diff --git a/apps/web/core/hooks/use-expandable-search.ts b/apps/web/core/hooks/use-expandable-search.ts
new file mode 100644
index 0000000..a63252f
--- /dev/null
+++ b/apps/web/core/hooks/use-expandable-search.ts
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useOutsideClickDetector } from "@plane/hooks";
+
+type UseExpandableSearchOptions = {
+  onClose?: () => void;
+};
+
+/**
+ * Custom hook for expandable search input behavior
+ * Handles focus management to prevent unwanted opening on programmatic focus restoration
+ * Opens on click, typing, or keyboard shortcut (via PowerK Cmd+F)
+ */
+export const useExpandableSearch = (options?: UseExpandableSearchOptions) => {
+  const { onClose } = options || {};
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  // refs
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const wasClickedRef = useRef<boolean>(false);
+  const wasKeyboardTriggeredRef = useRef<boolean>(false);
+
+  // Handle close
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    inputRef.current?.blur();
+    onClose?.();
+  }, [onClose]);
+
+  // Outside click handler - memoized to prevent unnecessary re-registrations
+  const handleOutsideClick = useCallback(() => {
+    if (isOpen) {
+      handleClose();
+    }
+  }, [isOpen, handleClose]);
+
+  // Outside click detection
+  useOutsideClickDetector(containerRef, handleOutsideClick);
+
+  // Track keyboard shortcuts that trigger focus (Cmd+F / Ctrl+F)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
+        // Mark as keyboard triggered so handleFocus knows to open
+        wasKeyboardTriggeredRef.current = true;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  // Track explicit clicks
+  const handleMouseDown = useCallback(() => {
+    wasClickedRef.current = true;
+  }, []);
+
+  // Open on explicit clicks or keyboard shortcut, not programmatic focus restoration
+  const handleFocus = useCallback(() => {
+    if (wasClickedRef.current || wasKeyboardTriggeredRef.current) {
+      setIsOpen(true);
+      wasClickedRef.current = false;
+      wasKeyboardTriggeredRef.current = false;
+    }
+  }, []);
+
+  // Helper to open panel (for typing/onChange)
+  const openPanel = useCallback(() => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  }, [isOpen]);
+
+  return {
+    // State
+    isOpen,
+    setIsOpen,
+
+    // Refs
+    containerRef,
+    inputRef,
+
+    // Handlers
+    handleClose,
+    handleMouseDown,
+    handleFocus,
+    openPanel,
+  };
+};
diff --git a/apps/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx b/apps/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx
new file mode 100644
index 0000000..abdd8b6
--- /dev/null
+++ b/apps/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type React from "react";
+import { useEffect, useCallback } from "react";
+
+const useExtendedSidebarOutsideClickDetector = (
+  ref: React.RefObject<HTMLElement | null>,
+  callback: () => void,
+  targetId: string
+) => {
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      if (!(event.target instanceof HTMLElement)) return;
+      if (ref.current && !ref.current.contains(event.target)) {
+        // check for the closest element with attribute name data-prevent-outside-click
+        const preventOutsideClickElement = event.target.closest("[data-prevent-outside-click]");
+        // if the closest element with attribute name data-prevent-outside-click is found, return
+        if (preventOutsideClickElement) {
+          return;
+        }
+        // check if the click target is the current issue element or its children
+        let targetElement: HTMLElement | null = event.target;
+        while (targetElement) {
+          if (targetElement.id === targetId) {
+            // if the click target is the current issue element, return
+            return;
+          }
+          targetElement = targetElement.parentElement;
+        }
+        const delayOutsideClickElement = event.target.closest("[data-delay-outside-click]");
+        if (delayOutsideClickElement) {
+          // if the click target is the closest element with attribute name data-delay-outside-click, delay the callback
+          setTimeout(() => {
+            callback();
+          }, 0);
+          return;
+        }
+        // else, call the callback immediately
+        callback();
+      }
+    },
+    [ref, callback, targetId]
+  );
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [handleClick]);
+};
+
+export default useExtendedSidebarOutsideClickDetector;
diff --git a/apps/web/core/hooks/use-favorite-item-details.tsx b/apps/web/core/hooks/use-favorite-item-details.tsx
new file mode 100644
index 0000000..18b3d56
--- /dev/null
+++ b/apps/web/core/hooks/use-favorite-item-details.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IFavorite } from "@plane/types";
+// components
+import { getPageName } from "@plane/utils";
+import {
+  FavoriteItemIcon,
+  generateFavoriteItemLink,
+} from "@/components/workspace/sidebar/favorites/favorite-items/common";
+// helpers
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectView } from "@/hooks/store/use-project-view";
+// plane web hooks
+import { EPageStoreType, usePage } from "@/hooks/store";
+import { useAdditionalFavoriteItemDetails } from "@/hooks/use-additional-favorite-item-details";
+
+export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorite) => {
+  const {
+    entity_identifier: favoriteItemId,
+    entity_data: { logo_props: favoriteItemLogoProps },
+    entity_type: favoriteItemEntityType,
+  } = favorite;
+  const favoriteItemName = favorite?.entity_data?.name || favorite?.name;
+  // store hooks
+  const { getViewById } = useProjectView();
+  const { getProjectById } = useProject();
+  const { getCycleById } = useCycle();
+  const { getModuleById } = useModule();
+  // additional details
+  const { getAdditionalFavoriteItemDetails } = useAdditionalFavoriteItemDetails();
+  // derived values
+  const pageDetail = usePage({
+    pageId: favoriteItemId ?? "",
+    storeType: EPageStoreType.PROJECT,
+  });
+  const viewDetails = getViewById(favoriteItemId ?? "");
+  const cycleDetail = getCycleById(favoriteItemId ?? "");
+  const moduleDetail = getModuleById(favoriteItemId ?? "");
+  const currentProjectDetails = getProjectById(favorite.project_id ?? "");
+
+  let itemIcon;
+  let itemTitle;
+  const itemLink = generateFavoriteItemLink(workspaceSlug.toString(), favorite);
+
+  switch (favoriteItemEntityType) {
+    case "project":
+      itemTitle = currentProjectDetails?.name ?? favoriteItemName;
+      itemIcon = <FavoriteItemIcon type="project" logo={currentProjectDetails?.logo_props || favoriteItemLogoProps} />;
+      break;
+    case "page":
+      itemTitle = getPageName(pageDetail?.name ?? favoriteItemName);
+      itemIcon = <FavoriteItemIcon type="page" logo={pageDetail?.logo_props ?? favoriteItemLogoProps} />;
+      break;
+    case "view":
+      itemTitle = viewDetails?.name ?? favoriteItemName;
+      itemIcon = <FavoriteItemIcon type="view" logo={viewDetails?.logo_props || favoriteItemLogoProps} />;
+      break;
+    case "cycle":
+      itemTitle = cycleDetail?.name ?? favoriteItemName;
+      itemIcon = <FavoriteItemIcon type="cycle" />;
+      break;
+    case "module":
+      itemTitle = moduleDetail?.name ?? favoriteItemName;
+      itemIcon = <FavoriteItemIcon type="module" />;
+      break;
+    default: {
+      const additionalDetails = getAdditionalFavoriteItemDetails(workspaceSlug, favorite);
+      itemTitle = additionalDetails.itemTitle;
+      itemIcon = additionalDetails.itemIcon;
+      break;
+    }
+  }
+
+  return { itemIcon, itemTitle, itemLink };
+};
diff --git a/apps/web/core/hooks/use-file-size.ts b/apps/web/core/hooks/use-file-size.ts
new file mode 100644
index 0000000..a453d65
--- /dev/null
+++ b/apps/web/core/hooks/use-file-size.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { MAX_FILE_SIZE } from "@plane/constants";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+
+type TReturnProps = {
+  maxFileSize: number;
+};
+
+export const useFileSize = (): TReturnProps => {
+  // store hooks
+  const { config } = useInstance();
+
+  return {
+    maxFileSize: config?.file_size_limit ?? MAX_FILE_SIZE,
+  };
+};
diff --git a/apps/web/core/hooks/use-group-dragndrop.ts b/apps/web/core/hooks/use-group-dragndrop.ts
new file mode 100644
index 0000000..b21cdcb
--- /dev/null
+++ b/apps/web/core/hooks/use-group-dragndrop.ts
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useParams } from "next/navigation";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { EIssuesStoreType, TIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
+import type { GroupDropLocation } from "@/components/issues/issue-layouts/utils";
+import { handleGroupDragDrop } from "@/components/issues/issue-layouts/utils";
+import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/base-issues.store";
+import { useIssueDetail } from "./store/use-issue-detail";
+import { useIssues } from "./store/use-issues";
+import { useIssuesActions } from "./use-issues-actions";
+
+type DNDStoreType =
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.PROFILE
+  | EIssuesStoreType.ARCHIVED
+  | EIssuesStoreType.WORKSPACE_DRAFT
+  | EIssuesStoreType.TEAM
+  | EIssuesStoreType.TEAM_VIEW
+  | EIssuesStoreType.EPIC
+  | EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS;
+
+export const useGroupIssuesDragNDrop = (
+  storeType: DNDStoreType,
+  orderBy: TIssueOrderByOptions | undefined,
+  groupBy: TIssueGroupByOptions | undefined,
+  subGroupBy?: TIssueGroupByOptions
+) => {
+  const { workspaceSlug } = useParams();
+
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { updateIssue } = useIssuesActions(storeType);
+  const {
+    issues: { getIssueIds, addCycleToIssue, removeCycleFromIssue, changeModulesInIssue },
+  } = useIssues(storeType);
+
+  /**
+   * update Issue on Drop, checks if modules or cycles are changed and then calls appropriate functions
+   * @param projectId
+   * @param issueId
+   * @param data
+   * @param issueUpdates
+   */
+  const updateIssueOnDrop = async (
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssue>,
+    issueUpdates: {
+      [groupKey: string]: {
+        ADD: string[];
+        REMOVE: string[];
+      };
+    }
+  ) => {
+    const errorToastProps = {
+      type: TOAST_TYPE.ERROR,
+      title: "Error!",
+      message: "Error while updating work item",
+    };
+    const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
+    const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
+
+    const isModuleChanged = Object.keys(data).includes(moduleKey);
+    const isCycleChanged = Object.keys(data).includes(cycleKey);
+
+    if (isCycleChanged && workspaceSlug) {
+      if (data[cycleKey]) {
+        addCycleToIssue(workspaceSlug.toString(), projectId, data[cycleKey]?.toString() ?? "", issueId).catch(() =>
+          setToast(errorToastProps)
+        );
+      } else {
+        removeCycleFromIssue(workspaceSlug.toString(), projectId, issueId).catch(() => setToast(errorToastProps));
+      }
+      delete data[cycleKey];
+    }
+
+    if (isModuleChanged && workspaceSlug && issueUpdates[moduleKey]) {
+      changeModulesInIssue(
+        workspaceSlug.toString(),
+        projectId,
+        issueId,
+        issueUpdates[moduleKey].ADD,
+        issueUpdates[moduleKey].REMOVE
+      ).catch(() => setToast(errorToastProps));
+      delete data[moduleKey];
+    }
+
+    updateIssue && updateIssue(projectId, issueId, data).catch(() => setToast(errorToastProps));
+  };
+
+  const handleOnDrop = async (source: GroupDropLocation, destination: GroupDropLocation) => {
+    if (
+      source.columnId &&
+      destination.columnId &&
+      destination.columnId === source.columnId &&
+      destination.id === source.id
+    )
+      return;
+
+    await handleGroupDragDrop(
+      source,
+      destination,
+      getIssueById,
+      getIssueIds,
+      updateIssueOnDrop,
+      groupBy,
+      subGroupBy,
+      orderBy !== "sort_order"
+    ).catch((err) => {
+      setToast({
+        title: "Error!",
+        type: TOAST_TYPE.ERROR,
+        message: err?.detail ?? "Failed to perform this action",
+      });
+    });
+  };
+
+  return handleOnDrop;
+};
diff --git a/apps/web/core/hooks/use-integration-popup.tsx b/apps/web/core/hooks/use-integration-popup.tsx
new file mode 100644
index 0000000..e1faacc
--- /dev/null
+++ b/apps/web/core/hooks/use-integration-popup.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "next/navigation";
+
+const useIntegrationPopup = ({
+  provider,
+  stateParams,
+  github_app_name,
+  slack_client_id,
+}: {
+  provider: string | undefined;
+  stateParams?: string;
+  github_app_name?: string;
+  slack_client_id?: string;
+}) => {
+  const [authLoader, setAuthLoader] = useState(false);
+
+  const { workspaceSlug, projectId } = useParams();
+
+  const providerUrls: { [key: string]: string } = {
+    github: `https://github.com/apps/${github_app_name}/installations/new?state=${workspaceSlug?.toString()}`,
+    slack: `https://slack.com/oauth/v2/authorize?scope=chat:write,im:history,im:write,links:read,links:write,users:read,users:read.email&user_scope=&&client_id=${slack_client_id}&state=${workspaceSlug?.toString()}`,
+    slackChannel: `https://slack.com/oauth/v2/authorize?scope=incoming-webhook&client_id=${slack_client_id}&state=${workspaceSlug?.toString()},${projectId?.toString()}${
+      stateParams ? "," + stateParams : ""
+    }`,
+  };
+
+  const popup = useRef<Window | null>(null);
+  const popupCheckIntervalRef = useRef<ReturnType<typeof setInterval> | undefined>(undefined);
+
+  // release the polling interval if the component unmounts mid-auth
+  useEffect(
+    () => () => {
+      if (popupCheckIntervalRef.current) clearInterval(popupCheckIntervalRef.current);
+    },
+    []
+  );
+
+  const checkPopup = () => {
+    // a repeated click restarts the flow, so retire the previous poller before
+    // replacing the ref — otherwise it outlives its popup and clears its successor
+    if (popupCheckIntervalRef.current) clearInterval(popupCheckIntervalRef.current);
+
+    const intervalId = setInterval(() => {
+      if (!popup.current || popup.current.closed) {
+        clearInterval(intervalId);
+        popupCheckIntervalRef.current = undefined;
+        setAuthLoader(false);
+      }
+    }, 1000);
+    popupCheckIntervalRef.current = intervalId;
+  };
+
+  const openPopup = (): Window | null => {
+    if (!provider) return null;
+
+    const width = 600,
+      height = 600;
+    const left = window.innerWidth / 2 - width / 2;
+    const top = window.innerHeight / 2 - height / 2;
+    const url = providerUrls[provider];
+
+    return window.open(url, "", `width=${width}, height=${height}, top=${top}, left=${left}`);
+  };
+
+  const startAuth = () => {
+    popup.current = openPopup();
+    if (!popup.current) return;
+    checkPopup();
+    setAuthLoader(true);
+  };
+
+  return {
+    startAuth,
+    isConnecting: authLoader,
+  };
+};
+
+export default useIntegrationPopup;
diff --git a/apps/web/core/hooks/use-intersection-observer.ts b/apps/web/core/hooks/use-intersection-observer.ts
new file mode 100644
index 0000000..ea74c09
--- /dev/null
+++ b/apps/web/core/hooks/use-intersection-observer.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RefObject } from "react";
+import { useEffect } from "react";
+
+export type UseIntersectionObserverProps = {
+  containerRef: RefObject<HTMLDivElement | null> | undefined;
+  elementRef: HTMLElement | null;
+  callback: () => void;
+  rootMargin?: string;
+};
+
+export const useIntersectionObserver = (
+  containerRef: RefObject<HTMLDivElement | null>,
+  elementRef: HTMLElement | null,
+  callback: (() => void) | undefined,
+  rootMargin?: string
+) => {
+  useEffect(() => {
+    if (elementRef) {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[entries.length - 1].isIntersecting) {
+            callback && callback();
+          }
+        },
+        {
+          root: containerRef?.current,
+          rootMargin,
+        }
+      );
+      observer.observe(elementRef);
+      return () => {
+        if (elementRef) {
+          observer.unobserve(elementRef);
+        }
+      };
+    }
+    // When i am passing callback as a dependency, it is causing infinite loop,
+    // Please make sure you fix this eslint lint disable error with caution
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rootMargin, callback, elementRef, containerRef.current]);
+};
diff --git a/apps/web/core/hooks/use-issue-layout-store.ts b/apps/web/core/hooks/use-issue-layout-store.ts
new file mode 100644
index 0000000..dc1bae7
--- /dev/null
+++ b/apps/web/core/hooks/use-issue-layout-store.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { createContext, useContext } from "react";
+import { useParams } from "next/navigation";
+import { EIssuesStoreType } from "@plane/types";
+import { useIssues } from "./store/use-issues";
+
+export const IssuesStoreContext = createContext<EIssuesStoreType | undefined>(undefined);
+
+export const useIssueStoreType = () => {
+  const storeType = useContext(IssuesStoreContext);
+  const { globalViewId, viewId, projectId, cycleId, moduleId, userId, epicId, teamspaceId } = useParams();
+
+  // If store type exists in context, use that store type
+  if (storeType) return storeType;
+
+  // else check the router params to determine the issue store
+  if (globalViewId) return EIssuesStoreType.GLOBAL;
+
+  if (userId) return EIssuesStoreType.PROFILE;
+
+  if (teamspaceId && viewId) return EIssuesStoreType.TEAM_VIEW;
+
+  if (teamspaceId && projectId) return EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS;
+
+  if (viewId) return EIssuesStoreType.PROJECT_VIEW;
+
+  if (cycleId) return EIssuesStoreType.CYCLE;
+
+  if (moduleId) return EIssuesStoreType.MODULE;
+
+  if (epicId) return EIssuesStoreType.EPIC;
+
+  if (projectId) return EIssuesStoreType.PROJECT;
+
+  if (teamspaceId) return EIssuesStoreType.TEAM;
+
+  return EIssuesStoreType.PROJECT;
+};
+
+export const useIssuesStore = () => {
+  const storeType = useIssueStoreType();
+
+  return useIssues(storeType);
+};
diff --git a/apps/web/core/hooks/use-issue-peek-overview-redirection.tsx b/apps/web/core/hooks/use-issue-peek-overview-redirection.tsx
new file mode 100644
index 0000000..5e4f922
--- /dev/null
+++ b/apps/web/core/hooks/use-issue-peek-overview-redirection.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRouter } from "next/navigation";
+// types
+import type { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// helpers
+import { generateWorkItemLink } from "@plane/utils";
+// hooks
+import { useIssueDetail } from "./store/use-issue-detail";
+import { useProject } from "./store/use-project";
+
+const useIssuePeekOverviewRedirection = (isEpic: boolean = false) => {
+  // router
+  const router = useRouter();
+  //   store hooks
+  const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(
+    isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES
+  );
+  const { getProjectIdentifierById } = useProject();
+
+  const handleRedirection = (
+    workspaceSlug: string | undefined,
+    issue: TIssue | undefined,
+    isMobile = false,
+    nestingLevel?: number
+  ) => {
+    if (!issue) return;
+    const { project_id, id, archived_at, tempId } = issue;
+    const projectIdentifier = getProjectIdentifierById(issue?.project_id);
+
+    const workItemLink = generateWorkItemLink({
+      workspaceSlug,
+      projectId: project_id,
+      issueId: id,
+      projectIdentifier,
+      sequenceId: issue?.sequence_id,
+      isEpic,
+      isArchived: !!archived_at,
+    });
+    if (workspaceSlug && project_id && id && !getIsIssuePeeked(id) && !tempId) {
+      if (isMobile) {
+        router.push(workItemLink);
+      } else {
+        setPeekIssue({ workspaceSlug, projectId: project_id, issueId: id, nestingLevel, isArchived: !!archived_at });
+      }
+    }
+  };
+
+  return { handleRedirection };
+};
+
+export default useIssuePeekOverviewRedirection;
diff --git a/apps/web/core/hooks/use-issue-properties.tsx b/apps/web/core/hooks/use-issue-properties.tsx
new file mode 100644
index 0000000..310fd72
--- /dev/null
+++ b/apps/web/core/hooks/use-issue-properties.tsx
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssueServiceType } from "@plane/types";
+
+export const useWorkItemProperties = (
+  projectId: string | null | undefined,
+  workspaceSlug: string | null | undefined,
+  workItemId: string | null | undefined,
+  _issueServiceType: TIssueServiceType
+) => {
+  if (!projectId || !workspaceSlug || !workItemId) return;
+};
diff --git a/apps/web/core/hooks/use-issues-actions.tsx b/apps/web/core/hooks/use-issues-actions.tsx
new file mode 100644
index 0000000..6e42f6d
--- /dev/null
+++ b/apps/web/core/hooks/use-issues-actions.tsx
@@ -0,0 +1,807 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useCallback, useMemo } from "react";
+// types
+import { useParams } from "next/navigation";
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EDraftIssuePaginationType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IssuePaginationOptions,
+  TIssue,
+  TIssuesResponse,
+  TLoader,
+  TProfileViews,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { useIssues } from "./store/use-issues";
+
+export interface IssueActions {
+  fetchIssues: (
+    loadType: TLoader,
+    options: IssuePaginationOptions,
+    viewId?: string
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchNextIssues: (groupId?: string, subGroupId?: string) => Promise<TIssuesResponse | undefined>;
+  removeIssue: (projectId: string | undefined | null, issueId: string) => Promise<void>;
+  createIssue?: (projectId: string | undefined | null, data: Partial<TIssue>) => Promise<TIssue | undefined>;
+  quickAddIssue?: (projectId: string | undefined | null, data: TIssue) => Promise<TIssue | undefined>;
+  updateIssue?: (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  removeIssueFromView?: (projectId: string | undefined | null, issueId: string) => Promise<void>;
+  archiveIssue?: (projectId: string | undefined | null, issueId: string) => Promise<void>;
+  restoreIssue?: (projectId: string | undefined | null, issueId: string) => Promise<void>;
+  updateFilters: (
+    projectId: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate
+  ) => Promise<void>;
+}
+
+export const useIssuesActions = (storeType: EIssuesStoreType): IssueActions => {
+  const projectIssueActions = useProjectIssueActions();
+  const projectEpicsActions = useProjectEpicsActions();
+  const cycleIssueActions = useCycleIssueActions();
+  const moduleIssueActions = useModuleIssueActions();
+  const projectViewIssueActions = useProjectViewIssueActions();
+  const globalIssueActions = useGlobalIssueActions();
+  const profileIssueActions = useProfileIssueActions();
+  const archivedIssueActions = useArchivedIssueActions();
+  const workspaceDraftIssueActions = useWorkspaceDraftIssueActions();
+
+  switch (storeType) {
+    case EIssuesStoreType.PROJECT_VIEW:
+      return projectViewIssueActions;
+    case EIssuesStoreType.PROFILE:
+      return profileIssueActions;
+    case EIssuesStoreType.ARCHIVED:
+      return archivedIssueActions;
+    case EIssuesStoreType.CYCLE:
+      return cycleIssueActions;
+    case EIssuesStoreType.MODULE:
+      return moduleIssueActions;
+    case EIssuesStoreType.GLOBAL:
+      return globalIssueActions;
+    case EIssuesStoreType.WORKSPACE_DRAFT:
+      //@ts-expect-error type mismatch
+      return workspaceDraftIssueActions;
+    case EIssuesStoreType.EPIC:
+      return projectEpicsActions;
+    case EIssuesStoreType.PROJECT:
+    default:
+      return projectIssueActions;
+  }
+};
+
+const useProjectIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  // store hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+
+  const fetchIssues = useCallback(
+    async (loadType: TLoader, options: IssuePaginationOptions) => {
+      if (!workspaceSlug || !projectId) return;
+      return issues.fetchIssues(workspaceSlug.toString(), projectId.toString(), loadType, options);
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+  const fetchNextIssues = useCallback(
+    async (groupId?: string, subGroupId?: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), groupId, subGroupId);
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+
+  const createIssue = useCallback(
+    async (projectId: string | undefined | null, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.createIssue(workspaceSlug, projectId, data);
+    },
+    [issues.createIssue, workspaceSlug]
+  );
+  const quickAddIssue = useCallback(
+    async (projectId: string | undefined | null, data: TIssue) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.quickAddIssue(workspaceSlug, projectId, data);
+    },
+    [issues.quickAddIssue, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data);
+    },
+    [issues.updateIssue, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.archiveIssue, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (projectId: string, filterType: TSupportedFilterTypeForUpdate, filters: TSupportedFilterForUpdate) => {
+      if (!workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters);
+    },
+    [issuesFilter.updateFilters, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      fetchNextIssues,
+      createIssue,
+      quickAddIssue,
+      updateIssue,
+      removeIssue,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, fetchNextIssues, createIssue, quickAddIssue, updateIssue, removeIssue, archiveIssue, updateFilters]
+  );
+};
+
+const useProjectEpicsActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  // store hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.EPIC);
+
+  const fetchIssues = useCallback(
+    async (loadType: TLoader, options: IssuePaginationOptions) => {
+      if (!workspaceSlug || !projectId) return;
+      return issues.fetchIssues(workspaceSlug.toString(), projectId.toString(), loadType, options);
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+  const fetchNextIssues = useCallback(
+    async (groupId?: string, subGroupId?: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), groupId, subGroupId);
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+
+  const createIssue = useCallback(
+    async (projectId: string | undefined | null, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.createIssue(workspaceSlug, projectId, data);
+    },
+    [issues.createIssue, workspaceSlug]
+  );
+  const quickAddIssue = useCallback(
+    async (projectId: string | undefined | null, data: TIssue) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.quickAddIssue(workspaceSlug, projectId, data);
+    },
+    [issues.quickAddIssue, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data);
+    },
+    [issues.updateIssue, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.archiveIssue, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (projectId: string, filterType: TSupportedFilterTypeForUpdate, filters: TSupportedFilterForUpdate) => {
+      if (!workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters);
+    },
+    [issuesFilter.updateFilters, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      fetchNextIssues,
+      createIssue,
+      quickAddIssue,
+      updateIssue,
+      removeIssue,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, fetchNextIssues, createIssue, quickAddIssue, updateIssue, removeIssue, archiveIssue, updateFilters]
+  );
+};
+
+const useCycleIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, cycleId: routerCycleId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  const cycleId = routerCycleId?.toString();
+  // store hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
+
+  const fetchIssues = useCallback(
+    async (loadType: TLoader, options: IssuePaginationOptions, cycleId?: string) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+      return issues.fetchIssues(workspaceSlug.toString(), projectId.toString(), loadType, options, cycleId.toString());
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+  const fetchNextIssues = useCallback(
+    async (groupId?: string, subGroupId?: string) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+      return issues.fetchNextIssues(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        cycleId.toString(),
+        groupId,
+        subGroupId
+      );
+    },
+    [issues.fetchIssues, workspaceSlug, projectId, cycleId]
+  );
+
+  const createIssue = useCallback(
+    async (projectId: string | undefined | null, data: Partial<TIssue>) => {
+      if (!cycleId || !workspaceSlug || !projectId) return;
+      return await issues.createIssue(workspaceSlug, projectId, data, cycleId);
+    },
+    [issues.createIssue, cycleId, workspaceSlug]
+  );
+  const quickAddIssue = useCallback(
+    async (projectId: string | undefined | null, data: TIssue) => {
+      if (!cycleId || !workspaceSlug || !projectId) return;
+      return await issues.quickAddIssue(workspaceSlug, projectId, data, cycleId);
+    },
+    [issues.quickAddIssue, workspaceSlug, cycleId]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data);
+    },
+    [issues.updateIssue, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue, workspaceSlug]
+  );
+  const removeIssueFromView = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!cycleId || !workspaceSlug || !projectId) return;
+      return await issues.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+    },
+    [issues.removeIssueFromCycle, cycleId, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.archiveIssue, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (projectId: string, filterType: TSupportedFilterTypeForUpdate, filters: TSupportedFilterForUpdate) => {
+      if (!cycleId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, cycleId);
+    },
+    [issuesFilter.updateFilters, cycleId, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      fetchNextIssues,
+      createIssue,
+      quickAddIssue,
+      updateIssue,
+      removeIssue,
+      removeIssueFromView,
+      archiveIssue,
+      updateFilters,
+    }),
+    [
+      fetchIssues,
+      fetchNextIssues,
+      createIssue,
+      quickAddIssue,
+      updateIssue,
+      removeIssue,
+      removeIssueFromView,
+      archiveIssue,
+      updateFilters,
+    ]
+  );
+};
+
+const useModuleIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, moduleId: routerModuleId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  const moduleId = routerModuleId?.toString();
+  // store hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
+
+  const fetchIssues = useCallback(
+    async (loadType: TLoader, options: IssuePaginationOptions, moduleId?: string) => {
+      if (!workspaceSlug || !projectId || !moduleId) return;
+      return issues.fetchIssues(workspaceSlug.toString(), projectId.toString(), loadType, options, moduleId.toString());
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+  const fetchNextIssues = useCallback(
+    async (groupId?: string, subGroupId?: string) => {
+      if (!workspaceSlug || !projectId || !moduleId) return;
+      return issues.fetchNextIssues(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        moduleId.toString(),
+        groupId,
+        subGroupId
+      );
+    },
+    [issues.fetchIssues, workspaceSlug, projectId, moduleId]
+  );
+
+  const createIssue = useCallback(
+    async (projectId: string | undefined | null, data: Partial<TIssue>) => {
+      if (!moduleId || !workspaceSlug || !projectId) return;
+      return await issues.createIssue(workspaceSlug, projectId, data, moduleId);
+    },
+    [issues.createIssue, moduleId, workspaceSlug]
+  );
+  const quickAddIssue = useCallback(
+    async (projectId: string | undefined | null, data: TIssue) => {
+      if (!moduleId || !workspaceSlug || !projectId) return;
+      return await issues.quickAddIssue(workspaceSlug, projectId, data, moduleId);
+    },
+    [issues.quickAddIssue, workspaceSlug, moduleId]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data);
+    },
+    [issues.updateIssue, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue, workspaceSlug]
+  );
+  const removeIssueFromView = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!moduleId || !workspaceSlug || !projectId) return;
+      return await issues.removeIssuesFromModule(workspaceSlug, projectId, moduleId, [issueId]);
+    },
+    [issues.removeIssuesFromModule, moduleId, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.archiveIssue, moduleId, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (projectId: string, filterType: TSupportedFilterTypeForUpdate, filters: TSupportedFilterForUpdate) => {
+      if (!moduleId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, moduleId);
+    },
+    [issuesFilter.updateFilters, moduleId]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      fetchNextIssues,
+      createIssue,
+      quickAddIssue,
+      updateIssue,
+      removeIssue,
+      removeIssueFromView,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, createIssue, updateIssue, removeIssue, removeIssueFromView, archiveIssue, updateFilters]
+  );
+};
+
+const useProfileIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, userId: routerUserId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const userId = routerUserId?.toString();
+  // store hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROFILE);
+
+  const fetchIssues = useCallback(
+    async (loadType: TLoader, options: IssuePaginationOptions, viewId?: string) => {
+      if (!workspaceSlug || !userId || !viewId) return;
+      return issues.fetchIssues(
+        workspaceSlug.toString(),
+        userId.toString(),
+        loadType,
+        options,
+        viewId as TProfileViews
+      );
+    },
+    [issues.fetchIssues, workspaceSlug, userId]
+  );
+  const fetchNextIssues = useCallback(
+    async (groupId?: string, subGroupId?: string) => {
+      if (!workspaceSlug || !userId) return;
+      return issues.fetchNextIssues(workspaceSlug.toString(), userId.toString(), groupId, subGroupId);
+    },
+    [issues.fetchIssues, workspaceSlug, userId]
+  );
+
+  const createIssue = useCallback(
+    async (projectId: string | undefined | null, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.createIssue(workspaceSlug, projectId, data);
+    },
+    [issues.createIssue, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data);
+    },
+    [issues.updateIssue, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.archiveIssue, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (projectId: string, filterType: TSupportedFilterTypeForUpdate, filters: TSupportedFilterForUpdate) => {
+      if (!userId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, userId);
+    },
+    [issuesFilter.updateFilters, userId, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      fetchNextIssues,
+      createIssue,
+      updateIssue,
+      removeIssue,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, createIssue, updateIssue, removeIssue, archiveIssue, updateFilters]
+  );
+};
+
+const useProjectViewIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, viewId: routerViewId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  const viewId = routerViewId?.toString();
+  // store hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.PROJECT_VIEW);
+
+  const fetchIssues = useCallback(
+    async (loadType: TLoader, options: IssuePaginationOptions, viewId?: string) => {
+      if (!workspaceSlug || !projectId || !viewId) return;
+      return issues.fetchIssues(workspaceSlug.toString(), projectId.toString(), viewId, loadType, options);
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+  const fetchNextIssues = useCallback(
+    async (groupId?: string, subGroupId?: string) => {
+      if (!workspaceSlug || !projectId || !viewId) return;
+      return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), viewId, groupId, subGroupId);
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+
+  const createIssue = useCallback(
+    async (projectId: string | undefined | null, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.createIssue(workspaceSlug, projectId, data);
+    },
+    [issues.createIssue, workspaceSlug]
+  );
+  const quickAddIssue = useCallback(
+    async (projectId: string | undefined | null, data: TIssue) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.quickAddIssue(workspaceSlug, projectId, data);
+    },
+    [issues.quickAddIssue, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data);
+    },
+    [issues.updateIssue, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue, workspaceSlug]
+  );
+  const archiveIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.archiveIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.archiveIssue, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (projectId: string, filterType: TSupportedFilterTypeForUpdate, filters: TSupportedFilterForUpdate) => {
+      if (!viewId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, viewId);
+    },
+    [issuesFilter.updateFilters, viewId, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      fetchNextIssues,
+      createIssue,
+      quickAddIssue,
+      updateIssue,
+      removeIssue,
+      archiveIssue,
+      updateFilters,
+    }),
+    [fetchIssues, fetchNextIssues, createIssue, quickAddIssue, updateIssue, removeIssue, archiveIssue, updateFilters]
+  );
+};
+
+const useArchivedIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const projectId = routerProjectId?.toString();
+  // store hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
+
+  const fetchIssues = useCallback(
+    async (loadType: TLoader, options: IssuePaginationOptions) => {
+      if (!workspaceSlug || !projectId) return;
+      return issues.fetchIssues(workspaceSlug.toString(), projectId.toString(), loadType, options);
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+  const fetchNextIssues = useCallback(
+    async (groupId?: string, subGroupId?: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), groupId, subGroupId);
+    },
+    [issues.fetchIssues, workspaceSlug, projectId]
+  );
+
+  const removeIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue]
+  );
+  const restoreIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.restoreIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.restoreIssue]
+  );
+
+  const updateFilters = useCallback(
+    async (projectId: string, filterType: TSupportedFilterTypeForUpdate, filters: TSupportedFilterForUpdate) => {
+      if (!workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters);
+    },
+    [issuesFilter.updateFilters]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      fetchNextIssues,
+      removeIssue,
+      restoreIssue,
+      updateFilters,
+    }),
+    [fetchIssues, fetchNextIssues, removeIssue, restoreIssue, updateFilters]
+  );
+};
+
+const useGlobalIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, globalViewId: routerGlobalViewId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const globalViewId = routerGlobalViewId?.toString();
+  // store hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.GLOBAL);
+
+  const fetchIssues = useCallback(
+    async (loadType: TLoader, options: IssuePaginationOptions) => {
+      if (!workspaceSlug || !globalViewId) return;
+      return issues.fetchIssues(workspaceSlug.toString(), globalViewId.toString(), loadType, options);
+    },
+    [issues.fetchIssues, workspaceSlug, globalViewId]
+  );
+  const fetchNextIssues = useCallback(
+    async (groupId?: string, subGroupId?: string) => {
+      if (!workspaceSlug || !globalViewId) return;
+      return issues.fetchNextIssues(workspaceSlug.toString(), globalViewId.toString(), groupId, subGroupId);
+    },
+    [issues.fetchIssues, workspaceSlug, globalViewId]
+  );
+
+  const createIssue = useCallback(
+    async (projectId: string | undefined | null, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.createIssue(workspaceSlug, projectId, data);
+    },
+    [issues.createIssue, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.updateIssue(workspaceSlug, projectId, issueId, data);
+    },
+    [issues.updateIssue, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.removeIssue(workspaceSlug, projectId, issueId);
+    },
+    [issues.removeIssue, workspaceSlug]
+  );
+
+  const updateFilters = useCallback(
+    async (projectId: string, filterType: TSupportedFilterTypeForUpdate, filters: TSupportedFilterForUpdate) => {
+      if (!globalViewId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, projectId, filterType, filters, globalViewId);
+    },
+    [issuesFilter.updateFilters, globalViewId, workspaceSlug]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      fetchNextIssues,
+      createIssue,
+      updateIssue,
+      removeIssue,
+      updateFilters,
+    }),
+    [createIssue, updateIssue, removeIssue, updateFilters]
+  );
+};
+
+const useWorkspaceDraftIssueActions = () => {
+  // router
+  const { workspaceSlug: routerWorkspaceSlug, globalViewId: routerGlobalViewId } = useParams();
+  const workspaceSlug = routerWorkspaceSlug?.toString();
+  const globalViewId = routerGlobalViewId?.toString();
+  // store hooks
+  const { issues, issuesFilter } = useIssues(EIssuesStoreType.WORKSPACE_DRAFT);
+  const fetchIssues = useCallback(
+    async (loadType: TLoader, _options: IssuePaginationOptions) => {
+      if (!workspaceSlug) return;
+      return issues.fetchIssues(workspaceSlug.toString(), loadType, EDraftIssuePaginationType.INIT);
+    },
+    [workspaceSlug, issues]
+  );
+
+  const fetchNextIssues = useCallback(async () => {
+    if (!workspaceSlug) return;
+    return issues.fetchIssues(workspaceSlug.toString(), "pagination", EDraftIssuePaginationType.NEXT);
+  }, [workspaceSlug, issues]);
+
+  const createIssue = useCallback(
+    async (projectId: string | undefined | null, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.createIssue(workspaceSlug, data);
+    },
+    [issues, workspaceSlug]
+  );
+  const updateIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.updateIssue(workspaceSlug, issueId, data);
+    },
+    [issues, workspaceSlug]
+  );
+  const removeIssue = useCallback(
+    async (projectId: string | undefined | null, issueId: string) => {
+      if (!workspaceSlug || !projectId) return;
+      return await issues.removeIssue(issueId);
+    },
+    [issues, workspaceSlug]
+  );
+
+  // const moveToIssue = useCallback(
+  //   async (workspaceSlug: string, issueId: string, data: Partial<TIssue>) => {
+  //     if (!workspaceSlug || !issueId || !data) return;
+  //     return await issues.moveToIssues(workspaceSlug, issueId, data);
+  //   },
+  //   [issues]
+  // );
+
+  const updateFilters = useCallback(
+    async (projectId: string, filterType: TSupportedFilterTypeForUpdate, filters: TSupportedFilterForUpdate) => {
+      filters = filters as IIssueDisplayFilterOptions | IIssueDisplayProperties;
+      if (!globalViewId || !workspaceSlug) return;
+      return await issuesFilter.updateFilters(workspaceSlug, filterType, filters);
+    },
+    [globalViewId, workspaceSlug, issuesFilter]
+  );
+
+  return useMemo(
+    () => ({
+      fetchIssues,
+      fetchNextIssues,
+      createIssue,
+      updateIssue,
+      removeIssue,
+      updateFilters,
+    }),
+    [fetchIssues, fetchNextIssues, createIssue, updateIssue, removeIssue, updateFilters]
+  );
+};
diff --git a/apps/web/core/hooks/use-keypress.tsx b/apps/web/core/hooks/use-keypress.tsx
new file mode 100644
index 0000000..c3fad81
--- /dev/null
+++ b/apps/web/core/hooks/use-keypress.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+
+const useKeypress = (key: string, callback: (event: KeyboardEvent) => void) => {
+  // Keep the latest callback in a ref so callers can pass an inline arrow
+  // without tearing down and re-adding the document listener every render.
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === key) {
+        callbackRef.current(event);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeydown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, [key]);
+};
+
+export default useKeypress;
diff --git a/apps/web/core/hooks/use-local-storage.tsx b/apps/web/core/hooks/use-local-storage.tsx
new file mode 100644
index 0000000..e62c894
--- /dev/null
+++ b/apps/web/core/hooks/use-local-storage.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useCallback } from "react";
+
+export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
+  if (typeof window === undefined || typeof window === "undefined") return defaultValue;
+  try {
+    const item = window.localStorage.getItem(key);
+    return item ? JSON.parse(item) : defaultValue;
+  } catch (_error) {
+    window.localStorage.removeItem(key);
+    return defaultValue;
+  }
+};
+
+export const setValueIntoLocalStorage = (key: string, value: any) => {
+  if (typeof window === undefined || typeof window === "undefined") return false;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  } catch (_error) {
+    return false;
+  }
+};
+
+// TODO: Remove this once we migrate to the new hooks from plane/helpers
+const useLocalStorage = <T,>(key: string, initialValue: T) => {
+  const [storedValue, setStoredValue] = useState<T | null>(() => getValueFromLocalStorage(key, initialValue));
+
+  const setValue = useCallback(
+    (value: T) => {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      setStoredValue(value);
+      window.dispatchEvent(new Event(`local-storage:${key}`));
+    },
+    [key]
+  );
+
+  const clearValue = useCallback(() => {
+    window.localStorage.removeItem(key);
+    setStoredValue(null);
+    window.dispatchEvent(new Event(`local-storage:${key}`));
+  }, [key]);
+
+  const reHydrate = useCallback(() => {
+    const data = getValueFromLocalStorage(key, initialValue);
+    setStoredValue(data);
+  }, [key, initialValue]);
+
+  useEffect(() => {
+    window.addEventListener(`local-storage:${key}`, reHydrate);
+    return () => {
+      window.removeEventListener(`local-storage:${key}`, reHydrate);
+    };
+  }, [key, reHydrate]);
+
+  return { storedValue, setValue, clearValue } as const;
+};
+
+export default useLocalStorage;
diff --git a/apps/web/core/hooks/use-multiple-select.ts b/apps/web/core/hooks/use-multiple-select.ts
new file mode 100644
index 0000000..cb55c1c
--- /dev/null
+++ b/apps/web/core/hooks/use-multiple-select.ts
@@ -0,0 +1,411 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useMemo } from "react";
+// hooks
+import { useMultipleSelectStore } from "@/hooks/store/use-multiple-select-store";
+//
+import useReloadConfirmations from "./use-reload-confirmation";
+
+export type TEntityDetails = {
+  entityID: string;
+  groupID: string;
+};
+
+type Props = {
+  containerRef: React.MutableRefObject<HTMLElement | null>;
+  disabled: boolean;
+  entities: Record<string, string[]>; // { groupID: entityIds[] }
+};
+
+export type TSelectionSnapshot = {
+  isSelectionActive: boolean;
+  selectedEntityIds: string[];
+};
+
+export type TSelectionHelper = {
+  handleClearSelection: () => void;
+  handleEntityClick: (event: React.MouseEvent, entityID: string, groupId: string) => void;
+  getIsEntitySelected: (entityID: string) => boolean;
+  getIsEntityActive: (entityID: string) => boolean;
+  handleGroupClick: (groupID: string) => void;
+  isGroupSelected: (groupID: string) => "empty" | "partial" | "complete";
+  isSelectionDisabled: boolean;
+};
+
+export const useMultipleSelect = (props: Props) => {
+  const { containerRef, disabled, entities } = props;
+  // router
+  // const router = useAppRouter();
+  // store hooks
+  const {
+    selectedEntityIds,
+    updateSelectedEntityDetails,
+    bulkUpdateSelectedEntityDetails,
+    getActiveEntityDetails,
+    updateActiveEntityDetails,
+    getPreviousActiveEntity,
+    updatePreviousActiveEntity,
+    getNextActiveEntity,
+    updateNextActiveEntity,
+    getLastSelectedEntityDetails,
+    clearSelection,
+    getIsEntitySelected,
+    getIsEntityActive,
+    getEntityDetailsFromEntityID,
+  } = useMultipleSelectStore();
+
+  useReloadConfirmations(
+    selectedEntityIds && selectedEntityIds.length > 0,
+    "Are you sure you want to leave? Your current bulk operation selections will be lost.",
+    true,
+    () => {
+      clearSelection();
+    }
+  );
+
+  const groups = useMemo(() => Object.keys(entities), [entities]);
+
+  const entitiesList: TEntityDetails[] = useMemo(
+    () =>
+      groups
+        ?.map((groupID) =>
+          entities?.[groupID]?.map((entityID) => ({
+            entityID,
+            groupID,
+          }))
+        )
+        .flat(1),
+    [entities, groups]
+  );
+
+  const getPreviousAndNextEntities = useCallback(
+    (entityID: string) => {
+      const currentEntityIndex = entitiesList.findIndex((entity) => entity?.entityID === entityID);
+
+      // entity position
+      const isFirstEntity = currentEntityIndex === 0;
+      const isLastEntity = currentEntityIndex === entitiesList.length - 1;
+
+      let previousEntity: TEntityDetails | null = null;
+      let nextEntity: TEntityDetails | null = null;
+
+      if (isLastEntity) {
+        nextEntity = null;
+      } else {
+        nextEntity = entitiesList[currentEntityIndex + 1];
+      }
+
+      if (isFirstEntity) {
+        previousEntity = null;
+      } else {
+        previousEntity = entitiesList[currentEntityIndex - 1];
+      }
+
+      return {
+        previousEntity,
+        nextEntity,
+      };
+    },
+    [entitiesList]
+  );
+
+  const handleActiveEntityChange = useCallback(
+    (entityDetails: TEntityDetails | null, shouldScroll: boolean = true) => {
+      if (disabled) return;
+
+      if (!entityDetails) {
+        updateActiveEntityDetails(null);
+        updatePreviousActiveEntity(null);
+        updateNextActiveEntity(null);
+        return;
+      }
+
+      updateActiveEntityDetails(entityDetails);
+
+      // scroll to get the active element in view
+      const activeElement = document.querySelector(
+        `[data-entity-id="${entityDetails.entityID}"][data-entity-group-id="${entityDetails.groupID}"]`
+      );
+      if (activeElement && containerRef.current && shouldScroll) {
+        const SCROLL_OFFSET = 200;
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const elementRect = activeElement.getBoundingClientRect();
+
+        const isInView =
+          elementRect.top >= containerRect.top + SCROLL_OFFSET &&
+          elementRect.bottom <= containerRect.bottom - SCROLL_OFFSET;
+
+        if (!isInView) {
+          containerRef.current.scrollBy({
+            top: elementRect.top < containerRect.top + SCROLL_OFFSET ? -50 : 50,
+          });
+        }
+      }
+
+      const { previousEntity: previousActiveEntity, nextEntity: nextActiveEntity } = getPreviousAndNextEntities(
+        entityDetails.entityID
+      );
+      updatePreviousActiveEntity(previousActiveEntity);
+      updateNextActiveEntity(nextActiveEntity);
+    },
+    [
+      containerRef,
+      disabled,
+      getPreviousAndNextEntities,
+      updateActiveEntityDetails,
+      updateNextActiveEntity,
+      updatePreviousActiveEntity,
+    ]
+  );
+
+  const handleEntitySelection = useCallback(
+    (
+      entityDetails: TEntityDetails | TEntityDetails[],
+      shouldScroll: boolean = true,
+      forceAction: "force-add" | "force-remove" | null = null
+    ) => {
+      if (disabled) return;
+
+      if (Array.isArray(entityDetails)) {
+        bulkUpdateSelectedEntityDetails(entityDetails, forceAction === "force-add" ? "add" : "remove");
+        if (forceAction === "force-add" && entityDetails.length > 0) {
+          handleActiveEntityChange(entityDetails[entityDetails.length - 1], shouldScroll);
+        }
+        return;
+      }
+
+      if (forceAction) {
+        if (forceAction === "force-add") {
+          console.log("force adding");
+          updateSelectedEntityDetails(entityDetails, "add");
+          handleActiveEntityChange(entityDetails, shouldScroll);
+        }
+        if (forceAction === "force-remove") {
+          updateSelectedEntityDetails(entityDetails, "remove");
+        }
+        return;
+      }
+
+      const isSelected = getIsEntitySelected(entityDetails.entityID);
+      if (isSelected) {
+        updateSelectedEntityDetails(entityDetails, "remove");
+        handleActiveEntityChange(entityDetails, shouldScroll);
+      } else {
+        updateSelectedEntityDetails(entityDetails, "add");
+        handleActiveEntityChange(entityDetails, shouldScroll);
+      }
+    },
+    [
+      bulkUpdateSelectedEntityDetails,
+      disabled,
+      getIsEntitySelected,
+      handleActiveEntityChange,
+      updateSelectedEntityDetails,
+    ]
+  );
+
+  /**
+   * @description toggle entity selection
+   * @param {React.MouseEvent} event
+   * @param {string} entityID
+   * @param {string} groupID
+   */
+  const handleEntityClick = useCallback(
+    (e: React.MouseEvent, entityID: string, groupID: string) => {
+      if (disabled) return;
+      const lastSelectedEntityDetails = getLastSelectedEntityDetails();
+      if (e.shiftKey && lastSelectedEntityDetails) {
+        const currentEntityIndex = entitiesList.findIndex((entity) => entity?.entityID === entityID);
+
+        const lastEntityIndex = entitiesList.findIndex(
+          (entity) => entity?.entityID === lastSelectedEntityDetails.entityID
+        );
+        if (lastEntityIndex < currentEntityIndex) {
+          for (let i = lastEntityIndex + 1; i <= currentEntityIndex; i++) {
+            const entityDetails = entitiesList[i];
+            if (entityDetails) {
+              handleEntitySelection(entityDetails, false);
+            }
+          }
+        } else if (lastEntityIndex > currentEntityIndex) {
+          for (let i = currentEntityIndex; i <= lastEntityIndex - 1; i++) {
+            const entityDetails = entitiesList[i];
+            if (entityDetails) {
+              handleEntitySelection(entityDetails, false);
+            }
+          }
+        } else {
+          const startIndex = lastEntityIndex + 1;
+          const endIndex = currentEntityIndex;
+          for (let i = startIndex; i <= endIndex; i++) {
+            const entityDetails = entitiesList[i];
+            if (entityDetails) {
+              handleEntitySelection(entityDetails, false);
+            }
+          }
+        }
+        return;
+      }
+
+      handleEntitySelection({ entityID, groupID }, false);
+    },
+    [disabled, entitiesList, handleEntitySelection, getLastSelectedEntityDetails]
+  );
+
+  /**
+   * @description check if any entity of the group is selected
+   * @param {string} groupID
+   * @returns {boolean}
+   */
+  const isGroupSelected = useCallback(
+    (groupID: string) => {
+      const groupEntities = entitiesList.filter((entity) => entity.groupID === groupID);
+      const totalSelected = groupEntities.filter((entity) => getIsEntitySelected(entity?.entityID ?? "")).length;
+      if (totalSelected === 0) return "empty";
+      if (totalSelected === groupEntities.length) return "complete";
+      return "partial";
+    },
+    [entitiesList, getIsEntitySelected]
+  );
+
+  /**
+   * @description toggle group selection
+   * @param {string} groupID
+   */
+  const handleGroupClick = useCallback(
+    (groupID: string) => {
+      if (disabled) return;
+
+      const groupEntities = entitiesList.filter((entity) => entity.groupID === groupID);
+      const groupSelectionStatus = isGroupSelected(groupID);
+      handleEntitySelection(groupEntities, false, groupSelectionStatus === "empty" ? "force-add" : "force-remove");
+    },
+    [disabled, entitiesList, handleEntitySelection, isGroupSelected]
+  );
+
+  // select entities on shift + arrow up/down key press
+  useEffect(() => {
+    if (disabled) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!e.shiftKey) return;
+
+      const activeEntityDetails = getActiveEntityDetails();
+      const nextActiveEntity = getNextActiveEntity();
+      const previousActiveEntity = getPreviousActiveEntity();
+
+      if (e.key === "ArrowDown" && activeEntityDetails) {
+        if (!nextActiveEntity) return;
+        handleEntitySelection(nextActiveEntity);
+      }
+      if (e.key === "ArrowUp" && activeEntityDetails) {
+        if (!previousActiveEntity) return;
+        handleEntitySelection(previousActiveEntity);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [
+    disabled,
+    getActiveEntityDetails,
+    handleEntitySelection,
+    getLastSelectedEntityDetails,
+    getNextActiveEntity,
+    getPreviousActiveEntity,
+  ]);
+
+  useEffect(() => {
+    if (disabled) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.shiftKey) return;
+      const activeEntityDetails = getActiveEntityDetails();
+      // set active entity id to the first entity
+      if (["ArrowUp", "ArrowDown"].includes(e.key) && !activeEntityDetails) {
+        const firstElementDetails = entitiesList[0];
+        if (!firstElementDetails) return;
+        handleActiveEntityChange(firstElementDetails);
+      }
+
+      if (e.key === "ArrowDown" && activeEntityDetails) {
+        if (!activeEntityDetails) return;
+        const { nextEntity: nextActiveEntity } = getPreviousAndNextEntities(activeEntityDetails.entityID);
+        if (nextActiveEntity) {
+          handleActiveEntityChange(nextActiveEntity);
+        }
+      }
+
+      if (e.key === "ArrowUp" && activeEntityDetails) {
+        if (!activeEntityDetails) return;
+        const { previousEntity: previousActiveEntity } = getPreviousAndNextEntities(activeEntityDetails.entityID);
+        if (previousActiveEntity) {
+          handleActiveEntityChange(previousActiveEntity);
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [disabled, getActiveEntityDetails, entitiesList, groups, getPreviousAndNextEntities, handleActiveEntityChange]);
+
+  // clear selection on route change
+  // useEffect(() => {
+  //   const handleRouteChange = () => clearSelection();
+
+  //   router.events.on("routeChangeComplete", handleRouteChange);
+
+  //   return () => {
+  //     router.events.off("routeChangeComplete", handleRouteChange);
+  //   };
+  // }, [clearSelection, router.events]);
+
+  // when entities list change, remove entityIds from the selected entities array, which are not present in the new list
+  useEffect(() => {
+    if (disabled) return;
+    selectedEntityIds.map((entityID) => {
+      const isEntityPresent = entitiesList.find((en) => en?.entityID === entityID);
+      if (!isEntityPresent) {
+        const entityDetails = getEntityDetailsFromEntityID(entityID);
+        if (entityDetails) {
+          handleEntitySelection(entityDetails);
+        }
+      }
+    });
+  }, [disabled, entitiesList, getEntityDetailsFromEntityID, handleEntitySelection, selectedEntityIds]);
+
+  /**
+   * @description helper functions for selection
+   */
+  const helpers: TSelectionHelper = useMemo(
+    () => ({
+      handleClearSelection: clearSelection,
+      handleEntityClick,
+      getIsEntitySelected,
+      getIsEntityActive,
+      handleGroupClick,
+      isGroupSelected,
+      isSelectionDisabled: disabled,
+    }),
+    [
+      clearSelection,
+      disabled,
+      getIsEntityActive,
+      getIsEntitySelected,
+      handleEntityClick,
+      handleGroupClick,
+      isGroupSelected,
+    ]
+  );
+
+  return helpers;
+};
diff --git a/apps/web/core/hooks/use-navigation-preferences.ts b/apps/web/core/hooks/use-navigation-preferences.ts
new file mode 100644
index 0000000..843e2c1
--- /dev/null
+++ b/apps/web/core/hooks/use-navigation-preferences.ts
@@ -0,0 +1,305 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { useParams } from "next/navigation";
+import type {
+  TPersonalNavigationItemKey,
+  TPersonalNavigationPreferences,
+  TProjectNavigationPreferences,
+  TProjectNavigationMode,
+  TWorkspaceNavigationPreferences,
+  TWorkspaceNavigationItemState,
+  TAppRailPreferences,
+  TAppRailDisplayMode,
+} from "@plane/types";
+import {
+  DEFAULT_PERSONAL_PREFERENCES,
+  DEFAULT_PROJECT_PREFERENCES,
+  DEFAULT_WORKSPACE_PREFERENCES,
+  DEFAULT_APP_RAIL_PREFERENCES,
+} from "@plane/types";
+import { useWorkspace } from "./store/use-workspace";
+import useLocalStorage from "./use-local-storage";
+
+const APP_RAIL_PREFERENCES_KEY = "app_rail_preferences";
+
+export const usePersonalNavigationPreferences = () => {
+  const { workspaceSlug } = useParams();
+  const { getNavigationPreferences, updateBulkSidebarPreferences } = useWorkspace();
+
+  // Get preferences from the store
+  const storePreferences = getNavigationPreferences(workspaceSlug?.toString() || "");
+
+  // Convert store format to hook format for personal items
+  const preferences: TPersonalNavigationPreferences = useMemo(() => {
+    if (!storePreferences) {
+      return DEFAULT_PERSONAL_PREFERENCES;
+    }
+
+    // Extract personal items from the store (stickies, your_work, drafts)
+    const personalItems: Record<TPersonalNavigationItemKey, { enabled: boolean; sort_order: number }> = {
+      stickies: {
+        enabled: storePreferences.stickies?.is_pinned ?? DEFAULT_PERSONAL_PREFERENCES.items.stickies.enabled,
+        sort_order: storePreferences.stickies?.sort_order ?? DEFAULT_PERSONAL_PREFERENCES.items.stickies.sort_order,
+      },
+      your_work: {
+        enabled: storePreferences.your_work?.is_pinned ?? DEFAULT_PERSONAL_PREFERENCES.items.your_work.enabled,
+        sort_order: storePreferences.your_work?.sort_order ?? DEFAULT_PERSONAL_PREFERENCES.items.your_work.sort_order,
+      },
+      drafts: {
+        enabled: storePreferences.drafts?.is_pinned ?? DEFAULT_PERSONAL_PREFERENCES.items.drafts.enabled,
+        sort_order: storePreferences.drafts?.sort_order ?? DEFAULT_PERSONAL_PREFERENCES.items.drafts.sort_order,
+      },
+    };
+
+    return {
+      items: personalItems,
+    };
+  }, [storePreferences]);
+
+  const togglePersonalItem = useCallback(
+    async (key: TPersonalNavigationItemKey, enabled: boolean) => {
+      if (!workspaceSlug) return;
+
+      const currentItem = preferences.items[key] || { enabled: false, sort_order: 0 };
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), [
+        {
+          key,
+          is_pinned: enabled,
+          sort_order: currentItem.sort_order,
+        },
+      ]);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  const updatePersonalItemOrder = useCallback(
+    async (items: Array<{ key: TPersonalNavigationItemKey; sortOrder: number }>) => {
+      if (!workspaceSlug) return;
+
+      const bulkData = items.map((item) => {
+        const currentItem = preferences.items[item.key] || { enabled: true, sort_order: 0 };
+        return {
+          key: item.key,
+          is_pinned: currentItem.enabled,
+          sort_order: item.sortOrder,
+        };
+      });
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), bulkData);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  const isPersonalItemEnabled = useCallback(
+    (key: TPersonalNavigationItemKey): boolean => preferences.items[key]?.enabled ?? true,
+    [preferences]
+  );
+
+  return {
+    preferences,
+    togglePersonalItem,
+    updatePersonalItemOrder,
+    isPersonalItemEnabled,
+  };
+};
+
+export const useProjectNavigationPreferences = () => {
+  const { workspaceSlug } = useParams();
+  const { getProjectNavigationPreferences, updateProjectNavigationPreferences } = useWorkspace();
+
+  // Get preferences from the store
+  const storePreferences = getProjectNavigationPreferences(workspaceSlug?.toString() || "");
+
+  // Computed preferences with fallback logic: API → defaults
+  const preferences: TProjectNavigationPreferences = useMemo(() => {
+    // 1. Try API data first
+    if (
+      storePreferences &&
+      (storePreferences.navigation_control_preference || storePreferences.navigation_project_limit !== undefined)
+    ) {
+      const limit = storePreferences.navigation_project_limit ?? DEFAULT_PROJECT_PREFERENCES.limitedProjectsCount;
+
+      return {
+        navigationMode: storePreferences.navigation_control_preference || DEFAULT_PROJECT_PREFERENCES.navigationMode,
+        limitedProjectsCount: limit > 0 ? limit : DEFAULT_PROJECT_PREFERENCES.limitedProjectsCount,
+        showLimitedProjects: limit > 0, // Derived: 0 = false, >0 = true
+      };
+    }
+
+    // 2. Fall back to defaults
+    return DEFAULT_PROJECT_PREFERENCES;
+  }, [storePreferences]);
+
+  // Update navigation mode
+  const updateNavigationMode = useCallback(
+    async (mode: TProjectNavigationMode) => {
+      if (!workspaceSlug) return;
+
+      await updateProjectNavigationPreferences(workspaceSlug.toString(), {
+        navigation_control_preference: mode,
+      });
+    },
+    [workspaceSlug, updateProjectNavigationPreferences]
+  );
+
+  // Update show limited projects
+  const updateShowLimitedProjects = useCallback(
+    async (show: boolean) => {
+      if (!workspaceSlug) return;
+
+      // When toggling off, set to 0; when toggling on, use current count or default
+      const newLimit = show ? preferences.limitedProjectsCount || DEFAULT_PROJECT_PREFERENCES.limitedProjectsCount : 0;
+
+      await updateProjectNavigationPreferences(workspaceSlug.toString(), {
+        navigation_project_limit: newLimit,
+      });
+    },
+    [workspaceSlug, updateProjectNavigationPreferences, preferences.limitedProjectsCount]
+  );
+
+  // Update limited projects count
+  const updateLimitedProjectsCount = useCallback(
+    async (count: number) => {
+      if (!workspaceSlug) return;
+
+      await updateProjectNavigationPreferences(workspaceSlug.toString(), {
+        navigation_project_limit: count,
+      });
+    },
+    [workspaceSlug, updateProjectNavigationPreferences]
+  );
+
+  return {
+    preferences,
+    updateNavigationMode,
+    updateShowLimitedProjects,
+    updateLimitedProjectsCount,
+  };
+};
+
+export const useWorkspaceNavigationPreferences = () => {
+  const { workspaceSlug } = useParams();
+  const { getNavigationPreferences, updateBulkSidebarPreferences } = useWorkspace();
+
+  // Get preferences from the store
+  const storePreferences = getNavigationPreferences(workspaceSlug?.toString() || "");
+
+  // Convert store format to hook format
+  const preferences: TWorkspaceNavigationPreferences = useMemo(() => {
+    if (!storePreferences) {
+      return DEFAULT_WORKSPACE_PREFERENCES;
+    }
+
+    return {
+      items: storePreferences,
+    };
+  }, [storePreferences]);
+
+  const toggleWorkspaceItem = useCallback(
+    async (key: string, isPinned: boolean) => {
+      if (!workspaceSlug) return;
+
+      const currentItem = preferences.items[key] || { is_pinned: false, sort_order: 0 };
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), [
+        {
+          key,
+          is_pinned: isPinned,
+          sort_order: currentItem.sort_order,
+        },
+      ]);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  const updateWorkspaceItemOrder = useCallback(
+    async (items: Array<{ key: string; sortOrder: number }>) => {
+      if (!workspaceSlug) return;
+
+      const bulkData = items.map((item) => {
+        const currentItem = preferences.items[item.key] || { is_pinned: true, sort_order: 0 };
+        return {
+          key: item.key,
+          is_pinned: currentItem.is_pinned,
+          sort_order: item.sortOrder,
+        };
+      });
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), bulkData);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  const getWorkspaceItemState = useCallback(
+    (key: string): TWorkspaceNavigationItemState => preferences.items[key] || { is_pinned: false, sort_order: 0 },
+    [preferences]
+  );
+
+  const isWorkspaceItemPinned = useCallback(
+    (key: string): boolean => {
+      const state = getWorkspaceItemState(key);
+      return state.is_pinned;
+    },
+    [getWorkspaceItemState]
+  );
+
+  const updateWorkspaceItemSortOrder = useCallback(
+    async (key: string, sortOrder: number) => {
+      if (!workspaceSlug) return;
+
+      const currentItem = preferences.items[key] || { is_pinned: false, sort_order: 0 };
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), [
+        {
+          key,
+          is_pinned: currentItem.is_pinned,
+          sort_order: sortOrder,
+        },
+      ]);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  return {
+    preferences,
+    toggleWorkspaceItem,
+    updateWorkspaceItemOrder,
+    updateWorkspaceItemSortOrder,
+    getWorkspaceItemState,
+    isWorkspaceItemPinned,
+  };
+};
+
+export const useAppRailPreferences = () => {
+  const { storedValue, setValue } = useLocalStorage<TAppRailPreferences>(
+    APP_RAIL_PREFERENCES_KEY,
+    DEFAULT_APP_RAIL_PREFERENCES
+  );
+
+  const updateDisplayMode = useCallback(
+    (mode: TAppRailDisplayMode) => {
+      setValue({
+        displayMode: mode,
+      });
+    },
+    [setValue]
+  );
+
+  const toggleDisplayMode = useCallback(() => {
+    const currentPreferences = storedValue || DEFAULT_APP_RAIL_PREFERENCES;
+    const newMode = currentPreferences.displayMode === "icon_only" ? "icon_with_label" : "icon_only";
+    updateDisplayMode(newMode);
+  }, [storedValue, updateDisplayMode]);
+
+  return {
+    preferences: storedValue || DEFAULT_APP_RAIL_PREFERENCES,
+    updateDisplayMode,
+    toggleDisplayMode,
+  };
+};
diff --git a/apps/web/core/hooks/use-notification-preview.tsx b/apps/web/core/hooks/use-notification-preview.tsx
new file mode 100644
index 0000000..11bcbf4
--- /dev/null
+++ b/apps/web/core/hooks/use-notification-preview.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IWorkItemPeekOverview } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { IssuePeekOverview } from "@/components/issues/peek-overview";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import type { TPeekIssue } from "@/store/issue/issue-details/root.store";
+
+export type TNotificationPreview = {
+  isWorkItem: boolean;
+  PeekOverviewComponent: React.ComponentType<IWorkItemPeekOverview>;
+  setPeekWorkItem: (peekIssue: TPeekIssue | undefined) => void;
+};
+
+/**
+ * This function returns if the current active notification is related to work item or an epic.
+ * @returns isWorkItem: boolean, peekOverviewComponent: IWorkItemPeekOverview, setPeekWorkItem
+ */
+export const useNotificationPreview = (): TNotificationPreview => {
+  const { peekIssue, setPeekIssue } = useIssueDetail(EIssueServiceType.ISSUES);
+
+  return {
+    isWorkItem: Boolean(peekIssue),
+    PeekOverviewComponent: IssuePeekOverview,
+    setPeekWorkItem: setPeekIssue,
+  };
+};
diff --git a/apps/web/core/hooks/use-online-status.ts b/apps/web/core/hooks/use-online-status.ts
new file mode 100644
index 0000000..517738c
--- /dev/null
+++ b/apps/web/core/hooks/use-online-status.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+
+const useOnlineStatus = () => {
+  // states
+  const [isOnline, setIsOnline] = useState(typeof navigator !== "undefined" ? navigator.onLine : true);
+
+  const updateOnlineStatus = () => setIsOnline(navigator.onLine);
+
+  useEffect(() => {
+    window.addEventListener("online", updateOnlineStatus);
+    window.addEventListener("offline", updateOnlineStatus);
+
+    return () => {
+      window.removeEventListener("online", updateOnlineStatus);
+      window.removeEventListener("offline", updateOnlineStatus);
+    };
+  }, []);
+
+  return { isOnline };
+};
+
+export default useOnlineStatus;
diff --git a/apps/web/core/hooks/use-page-fallback.ts b/apps/web/core/hooks/use-page-fallback.ts
new file mode 100644
index 0000000..e407582
--- /dev/null
+++ b/apps/web/core/hooks/use-page-fallback.ts
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { EditorRefApi, CollaborationState } from "@plane/editor";
+// plane editor
+import { convertBinaryDataToBase64String, getBinaryDataFromDocumentEditorHTMLString } from "@plane/editor";
+// plane types
+import type { TDocumentPayload } from "@plane/types";
+// hooks
+import useAutoSave from "@/hooks/use-auto-save";
+import type { TPageInstance } from "@/store/pages/base-page";
+
+type TArgs = {
+  editorRef: React.RefObject<EditorRefApi | null>;
+  fetchPageDescription: () => Promise<ArrayBuffer>;
+  collaborationState: CollaborationState | null;
+  updatePageDescription: (data: TDocumentPayload) => Promise<void>;
+  page: TPageInstance;
+};
+
+export const usePageFallback = (args: TArgs) => {
+  const { editorRef, fetchPageDescription, collaborationState, updatePageDescription, page } = args;
+  const hasShownFallbackToast = useRef(false);
+
+  const [isFetchingFallbackBinary, setIsFetchingFallbackBinary] = useState(false);
+
+  // Derive connection failure from collaboration state
+  const hasConnectionFailed = collaborationState?.stage.kind === "disconnected";
+
+  const handleUpdateDescription = useCallback(async () => {
+    if (!hasConnectionFailed) return;
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    // Show toast notification when fallback mechanism kicks in (only once)
+    if (!hasShownFallbackToast.current) {
+      console.warn("Websocket Connection lost, your changes are being saved using backup mechanism.");
+      hasShownFallbackToast.current = true;
+    }
+
+    try {
+      setIsFetchingFallbackBinary(true);
+
+      const latestEncodedDescription = await fetchPageDescription();
+      let latestDecodedDescription: Uint8Array;
+      if (latestEncodedDescription && latestEncodedDescription.byteLength > 0) {
+        latestDecodedDescription = new Uint8Array(latestEncodedDescription);
+      } else {
+        const pageDescriptionHtml = page.description_html;
+        latestDecodedDescription = getBinaryDataFromDocumentEditorHTMLString(
+          pageDescriptionHtml ?? "<p></p>",
+          page.name
+        );
+      }
+
+      editor.setProviderDocument(latestDecodedDescription);
+      const { binary, html, json } = editor.getDocument();
+      if (!binary || !json) return;
+      const encodedBinary = convertBinaryDataToBase64String(binary);
+
+      await updatePageDescription({
+        description_binary: encodedBinary,
+        description_html: html,
+        description_json: json,
+      });
+    } catch (error: any) {
+      console.error(error);
+    } finally {
+      setIsFetchingFallbackBinary(false);
+    }
+  }, [editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription, page.description_html, page.name]);
+
+  useEffect(() => {
+    if (hasConnectionFailed) {
+      handleUpdateDescription();
+    } else {
+      // Reset toast flag when connection is restored
+      hasShownFallbackToast.current = false;
+    }
+  }, [handleUpdateDescription, hasConnectionFailed]);
+
+  useAutoSave(handleUpdateDescription);
+
+  return { isFetchingFallbackBinary };
+};
diff --git a/apps/web/core/hooks/use-page-filters.ts b/apps/web/core/hooks/use-page-filters.ts
new file mode 100644
index 0000000..df94467
--- /dev/null
+++ b/apps/web/core/hooks/use-page-filters.ts
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+// plane editor
+import type { TEditorFontSize, TEditorFontStyle } from "@plane/editor";
+// hooks
+import useLocalStorage from "@/hooks/use-local-storage";
+
+export type TPagesPersonalizationConfig = {
+  full_width: boolean;
+  font_size: TEditorFontSize;
+  font_style: TEditorFontStyle;
+  sticky_toolbar: boolean;
+};
+
+const DEFAULT_PERSONALIZATION_VALUES: TPagesPersonalizationConfig = {
+  full_width: false,
+  font_size: "large-font",
+  font_style: "sans-serif",
+  sticky_toolbar: true,
+};
+
+export const usePageFilters = () => {
+  // local storage
+  const { storedValue: pagesConfig, setValue: setPagesConfig } = useLocalStorage<TPagesPersonalizationConfig>(
+    "pages_config",
+    DEFAULT_PERSONALIZATION_VALUES
+  );
+  // stored values
+  const isFullWidth = useMemo(
+    () => (pagesConfig?.full_width === undefined ? DEFAULT_PERSONALIZATION_VALUES.full_width : pagesConfig?.full_width),
+    [pagesConfig?.full_width]
+  );
+  const isStickyToolbarEnabled = useMemo(
+    () =>
+      pagesConfig?.sticky_toolbar === undefined
+        ? DEFAULT_PERSONALIZATION_VALUES.sticky_toolbar
+        : pagesConfig?.sticky_toolbar,
+    [pagesConfig?.sticky_toolbar]
+  );
+  const fontSize = useMemo(
+    () => pagesConfig?.font_size ?? DEFAULT_PERSONALIZATION_VALUES.font_size,
+    [pagesConfig?.font_size]
+  );
+  const fontStyle = useMemo(
+    () => pagesConfig?.font_style ?? DEFAULT_PERSONALIZATION_VALUES.font_style,
+    [pagesConfig?.font_style]
+  );
+  // update action
+  const handleUpdateConfig = useCallback(
+    (payload: Partial<TPagesPersonalizationConfig>) => {
+      setPagesConfig({
+        ...(pagesConfig ?? DEFAULT_PERSONALIZATION_VALUES),
+        ...payload,
+      });
+    },
+    [pagesConfig, setPagesConfig]
+  );
+  /**
+   * @description action to update full_width value
+   * @param {boolean} value
+   */
+  const handleFullWidth = useCallback(
+    (value: boolean) => {
+      handleUpdateConfig({
+        full_width: value,
+      });
+    },
+    [handleUpdateConfig]
+  );
+  /**
+   * @description action to update font_size value
+   * @param {TEditorFontSize} value
+   */
+  const handleFontSize = useCallback(
+    (value: TEditorFontSize) => {
+      handleUpdateConfig({
+        font_size: value,
+      });
+    },
+    [handleUpdateConfig]
+  );
+  /**
+   * @description action to update font_size value
+   * @param {TEditorFontSize} value
+   */
+  const handleFontStyle = useCallback(
+    (value: TEditorFontStyle) => {
+      handleUpdateConfig({
+        font_style: value,
+      });
+    },
+    [handleUpdateConfig]
+  );
+  /**
+   * @description action to update full_width value
+   * @param {boolean} value
+   */
+  const handleStickyToolbar = useCallback(
+    (value: boolean) => {
+      handleUpdateConfig({
+        sticky_toolbar: value,
+      });
+    },
+    [handleUpdateConfig]
+  );
+
+  return {
+    fontSize,
+    handleFontSize,
+    fontStyle,
+    handleFontStyle,
+    isFullWidth,
+    handleFullWidth,
+    isStickyToolbarEnabled,
+    handleStickyToolbar,
+  };
+};
diff --git a/apps/web/core/hooks/use-page-flag.ts b/apps/web/core/hooks/use-page-flag.ts
new file mode 100644
index 0000000..1fff249
--- /dev/null
+++ b/apps/web/core/hooks/use-page-flag.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TPageFlagHookArgs = {
+  workspaceSlug: string;
+};
+
+export type TPageFlagHookReturnType = {
+  isMovePageEnabled: boolean;
+  isPageSharingEnabled: boolean;
+};
+
+export const usePageFlag = (args: TPageFlagHookArgs): TPageFlagHookReturnType => {
+  const {} = args;
+  return {
+    isMovePageEnabled: false,
+    isPageSharingEnabled: false,
+  };
+};
diff --git a/apps/web/core/hooks/use-page-operations.ts b/apps/web/core/hooks/use-page-operations.ts
new file mode 100644
index 0000000..13b3844
--- /dev/null
+++ b/apps/web/core/hooks/use-page-operations.ts
@@ -0,0 +1,225 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo } from "react";
+// plane imports
+import { IS_FAVORITE_MENU_OPEN } from "@plane/constants";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { EPageAccess } from "@plane/types";
+import { copyUrlToClipboard } from "@plane/utils";
+// hooks
+import { useCollaborativePageActions } from "@/hooks/use-collaborative-page-actions";
+// store types
+import type { TPageInstance } from "@/store/pages/base-page";
+// local storage
+import useLocalStorage from "./use-local-storage";
+
+export type TPageOperations = {
+  toggleLock: () => void;
+  toggleAccess: () => void;
+  toggleFavorite: () => void;
+  openInNewTab: () => void;
+  copyLink: () => void;
+  duplicate: () => void;
+  toggleArchive: () => void;
+};
+
+type Props = {
+  page: TPageInstance;
+};
+
+export const usePageOperations = (
+  props: Props
+): {
+  pageOperations: TPageOperations;
+} => {
+  const { page } = props;
+  // derived values
+  const {
+    access,
+    addToFavorites,
+    archived_at,
+    duplicate,
+    is_favorite,
+    is_locked,
+    getRedirectionLink,
+    removePageFromFavorites,
+  } = page;
+  // collaborative actions
+  const { executeCollaborativeAction } = useCollaborativePageActions(props);
+  // local storage
+  const { setValue: toggleFavoriteMenu, storedValue: isFavoriteMenuOpen } = useLocalStorage<boolean>(
+    IS_FAVORITE_MENU_OPEN,
+    false
+  );
+  // page operations
+  const pageOperations: TPageOperations = useMemo(() => {
+    const pageLink = getRedirectionLink();
+
+    return {
+      copyLink: async () => {
+        await copyUrlToClipboard(pageLink);
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Link Copied!",
+          message: "Page link copied to clipboard.",
+        });
+      },
+      duplicate: async () => {
+        try {
+          await duplicate();
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Success!",
+            message: "Page duplicated successfully.",
+          });
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: "Page could not be duplicated. Please try again later.",
+          });
+        }
+      },
+      move: async () => {},
+      openInNewTab: () => window.open(pageLink, "_blank"),
+      toggleAccess: async () => {
+        const changedPageType = access === EPageAccess.PUBLIC ? "private" : "public";
+        try {
+          if (access === EPageAccess.PUBLIC)
+            await executeCollaborativeAction({ type: "sendMessageToServer", message: "make-private" });
+          else await executeCollaborativeAction({ type: "sendMessageToServer", message: "make-public" });
+          setToast({
+            type: TOAST_TYPE.SUCCESS,
+            title: "Success!",
+            message: `The page has been marked ${changedPageType} and moved to the ${changedPageType} section.`,
+          });
+        } catch (_error) {
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: "Error!",
+            message: `The page couldn't be marked ${changedPageType}. Please try again.`,
+          });
+        }
+      },
+      toggleArchive: async () => {
+        if (archived_at) {
+          try {
+            await executeCollaborativeAction({ type: "sendMessageToServer", message: "unarchive" });
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page restored successfully.",
+            });
+          } catch (_error) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "Page could not be restored. Please try again later.",
+            });
+          }
+        } else {
+          try {
+            await executeCollaborativeAction({ type: "sendMessageToServer", message: "archive" });
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page archived successfully.",
+            });
+          } catch (_error) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "Page could not be archived. Please try again later.",
+            });
+          }
+        }
+      },
+      toggleFavorite: async () => {
+        if (is_favorite) {
+          try {
+            await removePageFromFavorites();
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page removed from favorites.",
+            });
+          } catch (_error) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "Page could not be removed from favorites. Please try again later.",
+            });
+          }
+        } else {
+          try {
+            await addToFavorites();
+            if (!isFavoriteMenuOpen) toggleFavoriteMenu(true);
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page added to favorites.",
+            });
+          } catch (_error) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "Page could not be added to favorites. Please try again later.",
+            });
+          }
+        }
+      },
+      toggleLock: async () => {
+        if (is_locked) {
+          try {
+            await executeCollaborativeAction({ type: "sendMessageToServer", message: "unlock" });
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page unlocked successfully.",
+            });
+          } catch (_error) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "Page could not be unlocked. Please try again later.",
+            });
+          }
+        } else {
+          try {
+            await executeCollaborativeAction({ type: "sendMessageToServer", message: "lock" });
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page locked successfully.",
+            });
+          } catch (_error) {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "Page could not be locked. Please try again later.",
+            });
+          }
+        }
+      },
+    };
+  }, [
+    access,
+    addToFavorites,
+    archived_at,
+    duplicate,
+    executeCollaborativeAction,
+    getRedirectionLink,
+    is_favorite,
+    is_locked,
+    isFavoriteMenuOpen,
+    removePageFromFavorites,
+    toggleFavoriteMenu,
+  ]);
+  return {
+    pageOperations,
+  };
+};
diff --git a/apps/web/core/hooks/use-parse-editor-content.ts b/apps/web/core/hooks/use-parse-editor-content.ts
new file mode 100644
index 0000000..c4b969d
--- /dev/null
+++ b/apps/web/core/hooks/use-parse-editor-content.ts
@@ -0,0 +1,279 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+// plane types
+import type { TSearchEntities } from "@plane/types";
+// helpers
+import { getBase64Image, getEditorAssetSrc } from "@plane/utils";
+import type { TCustomComponentsMetaData } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// plane web hooks
+import { useAdditionalEditorMention } from "@/hooks/use-additional-editor-mention";
+
+type TArgs = {
+  projectId?: string;
+  workspaceSlug: string;
+};
+
+export const useParseEditorContent = (args: TArgs) => {
+  const { projectId, workspaceSlug } = args;
+  // store hooks
+  const { getUserDetails } = useMember();
+  // parse additional content
+  const { parseAdditionalEditorContent } = useAdditionalEditorMention({
+    enableAdvancedMentions: true,
+  });
+
+  /**
+   * @description function to replace all the custom components from the html component to make it pdf compatible
+   * @param props
+   * @returns {Promise<string>}
+   */
+  const replaceCustomComponentsFromHTMLContent = useCallback(
+    async (props: { htmlContent: string; noAssets?: boolean }): Promise<string> => {
+      const { htmlContent, noAssets = false } = props;
+      // create a DOM parser
+      const parser = new DOMParser();
+      // parse the HTML string into a DOM document
+      const doc = parser.parseFromString(htmlContent, "text/html");
+      // replace all mention-component elements
+      const mentionComponents = doc.querySelectorAll("mention-component");
+      mentionComponents.forEach((component) => {
+        // create a span element to replace the mention-component
+        const span = doc.createElement("span");
+        span.setAttribute("data-node-type", "mention-block");
+        // get the user id from the component
+        const id = component.getAttribute("entity_identifier") || "";
+        const entityType = (component.getAttribute("entity_name") || "user_mention") as TSearchEntities;
+        let textContent = "user";
+        if (entityType === "user_mention") {
+          const userDetails = getUserDetails(id);
+          textContent = userDetails?.display_name ?? "";
+        } else {
+          const mentionDetails = parseAdditionalEditorContent({
+            id,
+            entityType,
+          });
+          if (mentionDetails) {
+            textContent = mentionDetails.textContent;
+          }
+        }
+        span.textContent = `@${textContent}`;
+        // replace the mention-component with the span element
+        component.replaceWith(span);
+      });
+      // handle code inside pre elements
+      const preElements = doc.querySelectorAll("pre");
+      preElements.forEach((preElement) => {
+        const codeElement = preElement.querySelector("code");
+        if (codeElement) {
+          // create a div element with the required attributes for code blocks
+          const div = doc.createElement("div");
+          div.setAttribute("data-node-type", "code-block");
+          div.setAttribute("class", "courier");
+          // transfer the content from the code block
+          div.innerHTML = codeElement.innerHTML.replace(/\n/g, "<br>") || "";
+          // replace the pre element with the new div
+          preElement.replaceWith(div);
+        }
+      });
+      // handle inline code elements (not inside pre tags)
+      const inlineCodeElements = doc.querySelectorAll("code");
+      inlineCodeElements.forEach((codeElement) => {
+        // check if the code element is inside a pre element
+        if (!codeElement.closest("pre")) {
+          // create a span element with the required attributes for inline code blocks
+          const span = doc.createElement("span");
+          span.setAttribute("data-node-type", "inline-code-block");
+          span.setAttribute("class", "courier-bold");
+          // transfer the code content
+          span.textContent = codeElement.textContent || "";
+          // replace the standalone code element with the new span
+          codeElement.replaceWith(span);
+        }
+      });
+      // handle image-component elements
+      const imageComponents = doc.querySelectorAll("image-component");
+      if (noAssets) {
+        // if no assets is enabled, remove the image component elements
+        imageComponents.forEach((component) => component.remove());
+        // remove default img elements
+        const imageElements = doc.querySelectorAll("img");
+        imageElements.forEach((img) => img.remove());
+      } else {
+        // if no assets is not enabled, replace the image component elements with img elements
+        imageComponents.forEach((component) => {
+          // get the image src from the component
+          const src = component.getAttribute("src") ?? "";
+          const height = component.getAttribute("height") ?? "";
+          const width = component.getAttribute("width") ?? "";
+          // create an img element to replace the image-component
+          const img = doc.createElement("img");
+          img.src = src;
+          img.style.height = height;
+          img.style.width = width;
+          // replace the image-component with the img element
+          component.replaceWith(img);
+        });
+      }
+      // convert all images to base64
+      const imgElements = doc.querySelectorAll("img");
+      await Promise.all(
+        Array.from(imgElements).map(async (img) => {
+          // get the image src from the img element
+          const src = img.getAttribute("src");
+          if (src) {
+            try {
+              const base64Image = await getBase64Image(src);
+              img.src = base64Image;
+            } catch (error) {
+              // log the error if the image conversion fails
+              console.error("Failed to convert image to base64:", error);
+            }
+          }
+        })
+      );
+      // replace all checkbox elements
+      const checkboxComponents = doc.querySelectorAll("input[type='checkbox']");
+      checkboxComponents.forEach((component) => {
+        // get the checked status from the element
+        const checked = component.getAttribute("checked");
+        // create a div element to replace the input element
+        const div = doc.createElement("div");
+        div.classList.value = "input-checkbox";
+        // add the checked class if the checkbox is checked
+        if (checked === "checked" || checked === "true") div.classList.add("checked");
+        // replace the input element with the div element
+        component.replaceWith(div);
+      });
+      // remove all issue-embed-component elements
+      const issueEmbedComponents = doc.querySelectorAll("issue-embed-component");
+      issueEmbedComponents.forEach((component) => component.remove());
+      // serialize the document back into a string
+      let serializedDoc = doc.body.innerHTML;
+      // remove null colors from table elements
+      serializedDoc = serializedDoc.replace(/background-color: null/g, "").replace(/color: null/g, "");
+      return serializedDoc;
+    },
+    [getUserDetails, parseAdditionalEditorContent]
+  );
+
+  /**
+   * @description function to replace all the custom components from the markdown content
+   * @param props
+   * @returns {string}
+   */
+  const replaceCustomComponentsFromMarkdownContent = useCallback(
+    (props: { markdownContent: string; noAssets?: boolean }): string => {
+      const { markdownContent, noAssets = false } = props;
+      let parsedMarkdownContent = markdownContent;
+      // replace the matched mention components with [display_name](redirect_url)
+      const mentionRegex =
+        /<mention-component[^>]*entity_identifier="([^"]+)"[^>]*entity_name="([^"]+)"[^>]*><\/mention-component>/g;
+      const originUrl = typeof window !== "undefined" && (window.location.origin ?? "");
+      parsedMarkdownContent = parsedMarkdownContent.replace(mentionRegex, (_match, id, entity_type) => {
+        const entityType = entity_type as TSearchEntities;
+        if (!id || !entityType) return "";
+        if (entityType === "user_mention") {
+          const userDetails = getUserDetails(id);
+          if (!userDetails) return "";
+          return `[${userDetails.display_name}](${originUrl}/${workspaceSlug}/profile/${id})`;
+        } else {
+          const mentionDetails = parseAdditionalEditorContent({
+            id,
+            entityType,
+          });
+          if (!mentionDetails) {
+            return "";
+          } else {
+            const { redirectionPath, textContent } = mentionDetails;
+            return `[${textContent}](${originUrl}/${redirectionPath})`;
+          }
+        }
+      });
+      // replace the matched image components with <img src={src} >
+      const imageComponentRegex = /<image-component[^>]*src="([^"]+)"[^>]*>[^]*<\/image-component>/g;
+      const imgTagRegex = /<img[^>]*src="([^"]+)"[^>]*\/?>/g;
+      if (noAssets) {
+        // remove all image components
+        parsedMarkdownContent = parsedMarkdownContent.replace(imageComponentRegex, "").replace(imgTagRegex, "");
+      } else {
+        // replace the matched image components with <img src={src} >
+        parsedMarkdownContent = parsedMarkdownContent.replace(
+          imageComponentRegex,
+          (_match, src) => `<img src="${src}" >`
+        );
+      }
+      // remove all issue-embed components
+      const issueEmbedRegex = /<issue-embed-component[^>]*>[^]*<\/issue-embed-component>/g;
+      parsedMarkdownContent = parsedMarkdownContent.replace(issueEmbedRegex, "");
+      return parsedMarkdownContent;
+    },
+    [getUserDetails, parseAdditionalEditorContent, workspaceSlug]
+  );
+
+  const getEditorMetaData = useCallback(
+    (htmlContent: string): TCustomComponentsMetaData => {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(htmlContent, "text/html");
+      const filesMetaData: TCustomComponentsMetaData["file_assets"] = [];
+      // process image components
+      const imageComponents = doc.querySelectorAll("image-component");
+      imageComponents.forEach((element) => {
+        const src = element.getAttribute("src");
+        if (src) {
+          const assetSrc = src.startsWith("http")
+            ? src
+            : getEditorAssetSrc({
+                assetId: src,
+                projectId,
+                workspaceSlug,
+              });
+          if (assetSrc) {
+            filesMetaData.push({
+              id: src,
+              name: src,
+              url: assetSrc,
+            });
+          }
+        }
+      });
+      // process user mentions
+      const userMentions: TCustomComponentsMetaData["user_mentions"] = [];
+      const mentionComponents = doc.querySelectorAll("mention-component");
+      mentionComponents.forEach((element) => {
+        const id = element.getAttribute("entity_identifier");
+        if (id) {
+          const userDetails = getUserDetails(id);
+          const originUrl = typeof window !== "undefined" && (window.location.origin ?? "");
+          const path = `${workspaceSlug}/profile/${id}`;
+          const url = `${originUrl}/${path}`;
+          if (userDetails) {
+            userMentions.push({
+              id,
+              display_name: userDetails.display_name,
+              url,
+            });
+          }
+        }
+      });
+
+      return {
+        file_assets: filesMetaData,
+        user_mentions: userMentions,
+      };
+    },
+    [getUserDetails, projectId, workspaceSlug]
+  );
+
+  return {
+    replaceCustomComponentsFromHTMLContent,
+    replaceCustomComponentsFromMarkdownContent,
+    getEditorMetaData,
+  };
+};
diff --git a/apps/web/core/hooks/use-peek-overview-outside-click.tsx b/apps/web/core/hooks/use-peek-overview-outside-click.tsx
new file mode 100644
index 0000000..ec8e52d
--- /dev/null
+++ b/apps/web/core/hooks/use-peek-overview-outside-click.tsx
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type React from "react";
+import { useEffect, useCallback } from "react";
+
+const usePeekOverviewOutsideClickDetector = (
+  ref: React.RefObject<HTMLElement | null>,
+  callback: () => void,
+  issueId: string,
+  excludePreventionElementIds?: string[]
+) => {
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      if (!(event.target instanceof HTMLElement)) return;
+      if (ref.current && !ref.current.contains(event.target)) {
+        // check for the closest element with attribute name data-prevent-outside-click
+        const preventOutsideClickElement = event.target.closest("[data-prevent-outside-click]");
+        // if the closest element with attribute name data-prevent-outside-click is found
+        if (preventOutsideClickElement) {
+          // Check if this element's ID is in the exclusion list
+          const elementId = preventOutsideClickElement.id;
+          const shouldExcludePrevention =
+            excludePreventionElementIds && elementId && excludePreventionElementIds.includes(elementId);
+
+          if (!shouldExcludePrevention && !preventOutsideClickElement.contains(ref.current)) {
+            // Only prevent the callback if the ref is NOT inside the same prevent-outside-click container.
+            // This allows normal outside click detection for elements within the same container
+            return;
+          }
+        }
+        // check if the click target is the current issue element or its children
+        let targetElement: HTMLElement | null = event.target;
+        while (targetElement) {
+          if (targetElement.id === `issue-${issueId}`) {
+            // if the click target is the current issue element, return
+            return;
+          }
+          targetElement = targetElement.parentElement;
+        }
+        const delayOutsideClickElement = event.target.closest("[data-delay-outside-click]");
+        if (delayOutsideClickElement) {
+          // if the click target is the closest element with attribute name data-delay-outside-click, delay the callback
+          setTimeout(() => {
+            callback();
+          }, 0);
+          return;
+        }
+        // else, call the callback immediately
+        callback();
+      }
+    },
+    [ref, callback, issueId, excludePreventionElementIds]
+  );
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [handleClick]);
+};
+
+export default usePeekOverviewOutsideClickDetector;
diff --git a/apps/web/core/hooks/use-platform-os.tsx b/apps/web/core/hooks/use-platform-os.tsx
new file mode 100644
index 0000000..0c9a972
--- /dev/null
+++ b/apps/web/core/hooks/use-platform-os.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+type PlatformOS = {
+  isMobile: boolean;
+  platform: string;
+};
+
+const detectPlatformOS = (): PlatformOS => {
+  if (typeof window === "undefined") {
+    return { isMobile: false, platform: "" };
+  }
+
+  const userAgent = window.navigator.userAgent;
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+  let platform = "";
+
+  if (!isMobile) {
+    if (userAgent.indexOf("Win") !== -1) {
+      platform = "Windows";
+    } else if (userAgent.indexOf("Mac") !== -1) {
+      platform = "MacOS";
+    } else if (userAgent.indexOf("Linux") !== -1) {
+      platform = "Linux";
+    } else {
+      platform = "Unknown";
+    }
+  }
+  return { isMobile, platform };
+};
+
+// device/OS can't change mid-session, so detect once at module load and return a stable reference
+const PLATFORM_OS: PlatformOS = Object.freeze(detectPlatformOS());
+
+export const usePlatformOS = () => PLATFORM_OS;
diff --git a/apps/web/core/hooks/use-project-issue-properties.ts b/apps/web/core/hooks/use-project-issue-properties.ts
new file mode 100644
index 0000000..2e496ea
--- /dev/null
+++ b/apps/web/core/hooks/use-project-issue-properties.ts
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useProjectEstimates } from "./store/estimates";
+import { useCycle } from "./store/use-cycle";
+import { useLabel } from "./store/use-label";
+import { useMember } from "./store/use-member";
+import { useModule } from "./store/use-module";
+import { useProjectState } from "./store/use-project-state";
+
+export const useProjectIssueProperties = () => {
+  const { fetchProjectStates } = useProjectState();
+  const {
+    project: { fetchProjectMembers },
+  } = useMember();
+  const { fetchProjectLabels } = useLabel();
+  const { fetchAllCycles: fetchProjectAllCycles } = useCycle();
+  const { fetchModules: fetchProjectAllModules } = useModule();
+  const { getProjectEstimates } = useProjectEstimates();
+
+  // fetching project states
+  const fetchStates = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectStates(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+  // fetching project members
+  const fetchMembers = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectMembers(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+
+  // fetching project labels
+  const fetchLabels = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectLabels(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+  // fetching project cycles
+  const fetchCycles = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectAllCycles(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+  // fetching project modules
+  const fetchModules = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await fetchProjectAllModules(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+  // fetching project estimates
+  const fetchEstimates = async (
+    workspaceSlug: string | string[] | undefined,
+    projectId: string | string[] | undefined
+  ) => {
+    if (workspaceSlug && projectId) {
+      await getProjectEstimates(workspaceSlug.toString(), projectId.toString());
+    }
+  };
+
+  const fetchAll = async (workspaceSlug: string | string[] | undefined, projectId: string | string[] | undefined) => {
+    if (workspaceSlug && projectId) {
+      await fetchStates(workspaceSlug, projectId);
+      await fetchMembers(workspaceSlug, projectId);
+      await fetchLabels(workspaceSlug, projectId);
+      await fetchCycles(workspaceSlug, projectId);
+      await fetchModules(workspaceSlug, projectId);
+      await fetchEstimates(workspaceSlug, projectId);
+    }
+  };
+
+  return {
+    fetchAll,
+    fetchStates,
+    fetchMembers,
+    fetchLabels,
+    fetchCycles,
+    fetchModules,
+    fetchEstimates,
+  };
+};
diff --git a/apps/web/core/hooks/use-query-params.ts b/apps/web/core/hooks/use-query-params.ts
new file mode 100644
index 0000000..b8ffbf5
--- /dev/null
+++ b/apps/web/core/hooks/use-query-params.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { useSearchParams, usePathname } from "next/navigation";
+
+type TParamsToAdd = {
+  [key: string]: string;
+};
+
+export const useQueryParams = () => {
+  // next navigation
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const updateQueryParams = useCallback(
+    ({ paramsToAdd = {}, paramsToRemove = [] }: { paramsToAdd?: TParamsToAdd; paramsToRemove?: string[] }) => {
+      const currentParams = new URLSearchParams(searchParams.toString());
+
+      // add or update query parameters
+      Object.keys(paramsToAdd).forEach((key) => {
+        currentParams.set(key, paramsToAdd[key]);
+      });
+
+      // remove specified query parameters
+      paramsToRemove.forEach((key) => {
+        currentParams.delete(key);
+      });
+
+      // construct the new route with the updated query parameters
+      const query = currentParams.toString();
+      const newRoute = query ? `${pathname}?${query}` : pathname;
+      return newRoute;
+    },
+    [pathname, searchParams]
+  );
+
+  return {
+    updateQueryParams,
+  };
+};
diff --git a/apps/web/core/hooks/use-realtime-page-events.tsx b/apps/web/core/hooks/use-realtime-page-events.tsx
new file mode 100644
index 0000000..ac0cbdc
--- /dev/null
+++ b/apps/web/core/hooks/use-realtime-page-events.tsx
@@ -0,0 +1,206 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+// plane imports
+import type { EventToPayloadMap } from "@plane/editor";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+// types
+import type { IUserLite } from "@plane/types";
+// components
+import type { TEditorBodyHandlers } from "@/components/pages/editor/editor-body";
+// hooks
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import type { EPageStoreType } from "@/hooks/store";
+import { usePageStore } from "@/hooks/store";
+// store
+import type { TPageInstance } from "@/store/pages/base-page";
+
+// Type for page update handlers with proper typing for action data
+export type PageUpdateHandler<T extends keyof EventToPayloadMap = keyof EventToPayloadMap> = (params: {
+  pageIds: string[];
+  data: EventToPayloadMap[T];
+  performAction: boolean;
+}) => void;
+
+// Type for custom event handlers that can be provided to override default behavior
+export type TCustomEventHandlers = {
+  [K in keyof EventToPayloadMap]?: PageUpdateHandler<K>;
+};
+
+interface UsePageEventsProps {
+  page: TPageInstance;
+  storeType: EPageStoreType;
+  getUserDetails: (userId: string) => IUserLite | undefined;
+  customRealtimeEventHandlers?: TCustomEventHandlers;
+  handlers: TEditorBodyHandlers;
+}
+
+export const useRealtimePageEvents = ({
+  page,
+  storeType,
+  getUserDetails,
+  customRealtimeEventHandlers,
+  handlers,
+}: UsePageEventsProps) => {
+  const router = useAppRouter();
+  const { removePage, getPageById } = usePageStore(storeType);
+
+  const { data: currentUser } = useUser();
+
+  // Helper function to safely get user display text
+  const getUserDisplayText = useCallback(
+    (userId: string | undefined) => {
+      if (!userId) return "";
+      try {
+        const userDetails = getUserDetails(userId);
+        return userDetails?.display_name ? ` by ${userDetails.display_name}` : "";
+      } catch {
+        return "";
+      }
+    },
+    [getUserDetails]
+  );
+
+  const ACTION_HANDLERS = useMemo(
+    function ACTION_HANDLERS() {
+      return {
+        archived: ({ pageIds, data }: { pageIds: string[]; data: EventToPayloadMap["archived"] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.archive({ archived_at: data.archived_at, shouldSync: false });
+          });
+        },
+
+        unarchived: ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.restore({ shouldSync: false });
+          });
+        },
+
+        locked: ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.lock({ shouldSync: false, recursive: false });
+          });
+        },
+
+        unlocked: ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.unlock({ shouldSync: false, recursive: false });
+          });
+        },
+
+        "made-public": ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.makePublic({ shouldSync: false });
+          });
+        },
+
+        "made-private": ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.makePrivate({ shouldSync: false });
+          });
+        },
+
+        deleted: ({ pageIds, data }: { pageIds: string[]; data: EventToPayloadMap["deleted"] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) {
+              removePage({ pageId, shouldSync: false });
+              if (page.id === pageId && data?.user_id !== currentUser?.id) {
+                setToast({
+                  type: TOAST_TYPE.ERROR,
+                  title: "Page deleted",
+                  message: `Page deleted${getUserDisplayText(data.user_id)}`,
+                });
+                router.push(handlers.getRedirectionLink());
+              } else if (page.id === pageId) {
+                router.push(handlers.getRedirectionLink());
+              }
+            }
+          });
+        },
+
+        property_updated: ({ pageIds, data }: { pageIds: string[]; data: EventToPayloadMap["property_updated"] }) => {
+          pageIds.forEach((pageId) => {
+            const pageInstance = getPageById(pageId);
+            const { name: updatedName, ...rest } = data;
+            if (updatedName != null) pageInstance?.updateTitle(updatedName);
+            pageInstance?.mutateProperties(rest);
+          });
+        },
+
+        error: ({ pageIds, data }: { pageIds: string[]; data: EventToPayloadMap["error"] }) => {
+          const errorType = data.error_type;
+          const errorMessage = data.error_message || "An error occurred";
+          const errorCode = data.error_code;
+
+          if (page.id && pageIds.includes(page.id)) {
+            // Show toast notification
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: errorType === "fetch" ? "Failed to load page" : "Failed to save page",
+              message: errorMessage,
+            });
+
+            // Handle specific error codes
+            const pageInstance = getPageById(page.id);
+            if (pageInstance) {
+              if (errorCode === "page_locked") {
+                // Lock the page if not already locked
+                if (!pageInstance.is_locked) {
+                  pageInstance.mutateProperties({ is_locked: true });
+                }
+              } else if (errorCode === "page_archived") {
+                // Mark page as archived if not already
+                if (!pageInstance.archived_at) {
+                  pageInstance.mutateProperties({ archived_at: new Date().toISOString() });
+                }
+              }
+            }
+          }
+        },
+
+        ...customRealtimeEventHandlers,
+      };
+    },
+    [getPageById, removePage, page, currentUser, getUserDisplayText, router, handlers, customRealtimeEventHandlers]
+  );
+
+  // The main function that will be returned from this hook
+  const updatePageProperties = useCallback(
+    <T extends keyof EventToPayloadMap>(
+      pageIds: string | string[],
+      actionType: T,
+      data: EventToPayloadMap[T],
+      performAction = false
+    ) => {
+      // Convert to array if single string is passed
+      const normalizedPageIds = Array.isArray(pageIds) ? pageIds : [pageIds];
+
+      if (normalizedPageIds.length === 0) return;
+
+      // Get the handler for this message type
+      const handler = ACTION_HANDLERS[actionType] as PageUpdateHandler<T> | undefined;
+
+      if (handler) {
+        // Now TypeScript knows that handler and data match in type
+        handler({ pageIds: normalizedPageIds, data, performAction });
+      } else {
+        console.warn(`No handler for message type: ${actionType.toString()}`);
+      }
+    },
+    [ACTION_HANDLERS]
+  );
+
+  return { updatePageProperties };
+};
diff --git a/apps/web/core/hooks/use-reload-confirmation.tsx b/apps/web/core/hooks/use-reload-confirmation.tsx
new file mode 100644
index 0000000..62332f0
--- /dev/null
+++ b/apps/web/core/hooks/use-reload-confirmation.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+
+//TODO: remove temp flag isActive later and use showAlert as the source of truth
+const useReloadConfirmations = (isActive = true, message?: string, defaultShowAlert = false, onLeave?: () => void) => {
+  const [showAlert, setShowAlert] = useState(defaultShowAlert);
+
+  const alertMessage = message ?? "Are you sure you want to leave? Changes you made may not be saved.";
+
+  const handleBeforeUnload = useCallback(
+    (event: BeforeUnloadEvent) => {
+      if (!isActive || !showAlert) return;
+      event.preventDefault();
+      event.returnValue = "";
+    },
+    [isActive, showAlert]
+  );
+
+  const handleAnchorClick = useCallback(
+    (event: MouseEvent) => {
+      if (!isActive || !showAlert) return;
+      // Skip if event target is not available or defaultPrevented
+      if (!event.target || event.defaultPrevented) return;
+      // Skip control/command/option/alt+click
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      // check if the event target is an anchor or a child of an anchor tag
+      const eventTarget = event.target as HTMLElement;
+      if (!eventTarget.closest("a")) return; // This is intentionally not type safe
+      // check if anchor target is _blank
+      const anchorElement = eventTarget.closest("a") as HTMLAnchorElement;
+      const isAnchorTargetBlank = anchorElement.getAttribute("target") === "_blank";
+      if (isAnchorTargetBlank) return;
+      // show confirm dialog
+      const isLeaving = confirm(alertMessage);
+      if (isLeaving) {
+        onLeave && onLeave();
+      } else {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [isActive, showAlert]
+  );
+
+  useEffect(() => {
+    // handle browser refresh
+    window.addEventListener("beforeunload", handleBeforeUnload, true);
+    // handle anchor tag click
+    window.addEventListener("click", handleAnchorClick, true);
+    // TODO: handle back / forward button click
+
+    return () => {
+      // cleanup
+      window.removeEventListener("beforeunload", handleBeforeUnload, true);
+      window.removeEventListener("click", handleAnchorClick, true);
+    };
+  }, [handleAnchorClick, handleBeforeUnload]);
+
+  return { setShowAlert };
+};
+
+export default useReloadConfirmations;
diff --git a/apps/web/core/hooks/use-stickies.tsx b/apps/web/core/hooks/use-stickies.tsx
new file mode 100644
index 0000000..8e197c3
--- /dev/null
+++ b/apps/web/core/hooks/use-stickies.tsx
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// context
+import { StoreContext } from "@/lib/store-context";
+import type { IStickyStore } from "@/store/sticky/sticky.store";
+// plane web stores
+
+export const useSticky = (): IStickyStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useSticky must be used within StoreProvider");
+  return context.stickyStore;
+};
diff --git a/apps/web/core/hooks/use-table-keyboard-navigation.tsx b/apps/web/core/hooks/use-table-keyboard-navigation.tsx
new file mode 100644
index 0000000..83d4690
--- /dev/null
+++ b/apps/web/core/hooks/use-table-keyboard-navigation.tsx
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const useTableKeyboardNavigation = () => {
+  const getPreviousRow = (element: HTMLElement) => {
+    const previousRow = element.closest("tr")?.previousSibling;
+
+    if (previousRow) return previousRow;
+    //if previous row does not exist in the parent check the row with the header of the table
+    return element.closest("tbody")?.previousSibling?.childNodes?.[0];
+  };
+
+  const getNextRow = (element: HTMLElement) => {
+    const nextRow = element.closest("tr")?.nextSibling;
+
+    if (nextRow) return nextRow;
+    //if next row does not exist in the parent check the row with the body of the table
+    return element.closest("thead")?.nextSibling?.childNodes?.[0];
+  };
+
+  const handleKeyBoardNavigation = function (e: React.KeyboardEvent<HTMLTableElement>) {
+    const element = e.target as HTMLElement;
+
+    if (!(element?.tagName === "TD" || element?.tagName === "TH")) return;
+
+    let c: HTMLElement | null = null;
+    if (e.key == "ArrowRight") {
+      // Right Arrow
+      c = element.nextSibling as HTMLElement;
+    } else if (e.key == "ArrowLeft") {
+      // Left Arrow
+      c = element.previousSibling as HTMLElement;
+    } else if (e.key == "ArrowUp") {
+      // Up Arrow
+      const index = Array.prototype.indexOf.call(element?.parentNode?.childNodes || [], element);
+      const prevRow = getPreviousRow(element);
+
+      c = prevRow?.childNodes?.[index] as HTMLElement;
+    } else if (e.key == "ArrowDown") {
+      // Down Arrow
+      const index = Array.prototype.indexOf.call(element?.parentNode?.childNodes || [], element);
+      const nextRow = getNextRow(element);
+
+      c = nextRow?.childNodes[index] as HTMLElement;
+    } else if (e.key == "Enter" || e.key == "Space") {
+      e.preventDefault();
+      (element?.querySelector(".clickable") as HTMLElement)?.click();
+      return;
+    }
+
+    if (!c) return;
+
+    e.preventDefault();
+    c?.focus();
+    c?.scrollIntoView({ behavior: "smooth", block: "center", inline: "end" });
+  };
+
+  return handleKeyBoardNavigation;
+};
diff --git a/apps/web/core/hooks/use-timeline-chart.ts b/apps/web/core/hooks/use-timeline-chart.ts
new file mode 100644
index 0000000..291362f
--- /dev/null
+++ b/apps/web/core/hooks/use-timeline-chart.ts
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useContext } from "react";
+// types
+import { GANTT_TIMELINE_TYPE, type TTimelineTypeCore, type TTimelineType } from "@plane/types";
+// lib
+import { StoreContext } from "@/lib/store-context";
+import type { IBaseTimelineStore } from "@/store/timeline/base-timeline.store";
+import type { ITimelineStore } from "@/store/timeline/timeline.store";
+import { useTimeLineType } from "../components/gantt-chart/contexts";
+
+export const getTimelineStore = (
+  timelineStore: ITimelineStore,
+  timelineType: TTimelineTypeCore
+): IBaseTimelineStore => {
+  if (timelineType === GANTT_TIMELINE_TYPE.ISSUE) {
+    return timelineStore.issuesTimeLineStore as IBaseTimelineStore;
+  }
+  if (timelineType === GANTT_TIMELINE_TYPE.MODULE) {
+    return timelineStore.modulesTimeLineStore as IBaseTimelineStore;
+  }
+  if (timelineType === GANTT_TIMELINE_TYPE.PROJECT) {
+    return timelineStore.projectTimeLineStore;
+  }
+  if (timelineType === GANTT_TIMELINE_TYPE.GROUPED) {
+    return timelineStore.groupedTimeLineStore;
+  }
+  throw new Error(`Unknown timeline type: ${timelineType}`);
+};
+
+export const useTimeLineChart = (timelineType: TTimelineType): IBaseTimelineStore => {
+  const context = useContext(StoreContext);
+  if (!context) throw new Error("useTimeLineChart must be used within StoreProvider");
+
+  return getTimelineStore(context.timelineStore, timelineType);
+};
+
+export const useTimeLineChartStore = (): IBaseTimelineStore => {
+  const context = useContext(StoreContext);
+  const timelineType = useTimeLineType();
+
+  if (!context) throw new Error("useTimeLineChartStore must be used within StoreProvider");
+  if (!timelineType) throw new Error("useTimeLineChartStore must be used within TimeLineTypeContext");
+
+  return getTimelineStore(context.timelineStore, timelineType);
+};
diff --git a/apps/web/core/hooks/use-timer.tsx b/apps/web/core/hooks/use-timer.tsx
new file mode 100644
index 0000000..c663d80
--- /dev/null
+++ b/apps/web/core/hooks/use-timer.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+
+const TIMER = 30;
+
+const useTimer = (initialValue: number = TIMER) => {
+  const [timer, setTimer] = useState(initialValue);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimer((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return { timer, setTimer };
+};
+
+export default useTimer;
diff --git a/apps/web/core/hooks/use-timezone-converter.tsx b/apps/web/core/hooks/use-timezone-converter.tsx
new file mode 100644
index 0000000..d4f6a75
--- /dev/null
+++ b/apps/web/core/hooks/use-timezone-converter.tsx
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { format } from "date-fns";
+import { useProject } from "@/hooks/store/use-project";
+import { useUser } from "@/hooks/store/user";
+
+export const useTimeZoneConverter = (projectId: string) => {
+  const { data: user } = useUser();
+  const { getProjectById } = useProject();
+  const userTimezone = user?.user_timezone;
+  const projectTimezone = getProjectById(projectId)?.timezone;
+
+  /**
+   * Render a date in the user's timezone
+   * @param date - The date to render
+   * @param formatToken - The format token to use
+   * @returns The formatted date
+   */
+  const renderFormattedDateInUserTimezone = useCallback(
+    (date: string, formatToken: string = "MMM dd, yyyy") => {
+      // return if undefined
+      if (!date || !userTimezone) return;
+      // convert the date to the user's timezone
+      const convertedDate = new Date(date).toLocaleString("en-US", { timeZone: userTimezone });
+      // return the formatted date
+      return format(convertedDate, formatToken);
+    },
+    [userTimezone]
+  );
+
+  /**
+   * Get the project's UTC offset
+   * @returns The project's UTC offset
+   */
+  const getProjectUTCOffset = useCallback(() => {
+    if (!projectTimezone) return;
+
+    // Get date in user's timezone
+    const projectDate = new Date(new Date().toLocaleString("en-US", { timeZone: projectTimezone }));
+    const utcDate = new Date(new Date().toLocaleString("en-US", { timeZone: "UTC" }));
+
+    // Calculate offset in minutes
+    const offsetInMinutes = (projectDate.getTime() - utcDate.getTime()) / 60000;
+
+    // return if undefined
+    if (!offsetInMinutes) return;
+
+    // Convert to hours and minutes
+    const hours = Math.floor(Math.abs(offsetInMinutes) / 60);
+    const minutes = Math.abs(offsetInMinutes) % 60;
+
+    // Format as +/-HH:mm
+    const sign = offsetInMinutes >= 0 ? "+" : "-";
+    return `UTC ${sign}${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+  }, [projectTimezone]);
+
+  /**
+   * Check if the project's timezone is different from the user's timezone
+   * @returns True if the project's timezone is different from the user's timezone, false otherwise
+   */
+  const isProjectTimeZoneDifferent = useCallback(() => {
+    if (!projectTimezone || !userTimezone) return false;
+    return projectTimezone !== userTimezone;
+  }, [projectTimezone, userTimezone]);
+
+  return {
+    renderFormattedDateInUserTimezone,
+    getProjectUTCOffset,
+    isProjectTimeZoneDifferent,
+  };
+};
diff --git a/apps/web/core/hooks/use-timezone.tsx b/apps/web/core/hooks/use-timezone.tsx
new file mode 100644
index 0000000..0453566
--- /dev/null
+++ b/apps/web/core/hooks/use-timezone.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import useSWR from "swr";
+import type { TTimezoneObject } from "@plane/types";
+// services
+import timezoneService from "@/services/timezone.service";
+
+// group timezones by value
+const groupTimezones = (timezones: TTimezoneObject[]): TTimezoneObject[] => {
+  const groupedMap = timezones.reduce((acc, timezone: TTimezoneObject) => {
+    const key = timezone.value;
+
+    if (!acc.has(key)) {
+      acc.set(key, {
+        utc_offset: timezone.utc_offset,
+        gmt_offset: timezone.gmt_offset,
+        value: timezone.value,
+        label: timezone.label,
+      });
+    } else {
+      const existing = acc.get(key);
+      existing.label = `${existing.label}, ${timezone.label}`;
+    }
+
+    return acc;
+  }, new Map());
+
+  return Array.from(groupedMap.values());
+};
+
+const useTimezone = () => {
+  // fetching the timezone from the server
+  const {
+    data: timezones,
+    isLoading: timezoneIsLoading,
+    error: timezonesError,
+  } = useSWR("TIMEZONES_LIST", () => timezoneService.fetch(), {
+    refreshInterval: 0,
+  });
+
+  // derived values
+  const isDisabled = timezoneIsLoading || timezonesError || !timezones;
+
+  const getTimeZoneLabel = (timezone: TTimezoneObject | undefined) => {
+    if (!timezone) return undefined;
+    return (
+      <div className="flex gap-1.5">
+        <span className="text-placeholder">{timezone.utc_offset}</span>
+        <span className="text-secondary">{timezone.label}</span>
+      </div>
+    );
+  };
+  const options = [
+    ...groupTimezones(timezones?.timezones || [])?.map((timezone) => ({
+      value: timezone.value,
+      query: `${timezone.value} ${timezone.label}, ${timezone.gmt_offset}, ${timezone.utc_offset}`,
+      content: getTimeZoneLabel(timezone),
+    })),
+    {
+      value: "UTC",
+      query: "utc, coordinated universal time",
+      content: "UTC",
+    },
+  ];
+
+  const selectedTimezone = (value: string | undefined) => options.find((option) => option.value === value)?.content;
+
+  return {
+    timezones: options,
+    isLoading: timezoneIsLoading,
+    error: timezonesError,
+    disabled: isDisabled,
+    selectedValue: selectedTimezone,
+  };
+};
+
+export default useTimezone;
diff --git a/apps/web/core/hooks/use-window-size.tsx b/apps/web/core/hooks/use-window-size.tsx
new file mode 100644
index 0000000..4516de5
--- /dev/null
+++ b/apps/web/core/hooks/use-window-size.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+
+const useSize = () => {
+  const [windowSize, setWindowSize] = useState([window.innerWidth, window.innerHeight]);
+
+  useEffect(() => {
+    const windowSizeHandler = () => {
+      setWindowSize([window.innerWidth, window.innerHeight]);
+    };
+    window.addEventListener("resize", windowSizeHandler);
+    return () => {
+      window.removeEventListener("resize", windowSizeHandler);
+    };
+  }, []);
+
+  return windowSize;
+};
+
+export default useSize;
diff --git a/apps/web/core/hooks/use-workspace-invitation.tsx b/apps/web/core/hooks/use-workspace-invitation.tsx
new file mode 100644
index 0000000..1ca9442
--- /dev/null
+++ b/apps/web/core/hooks/use-workspace-invitation.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect } from "react";
+import type { Control, FieldArrayWithId, FormState, UseFormWatch } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
+// plane imports
+import { EUserPermissions } from "@plane/constants";
+
+type EmailRole = {
+  email: string;
+  role: EUserPermissions;
+};
+
+export type InvitationFormValues = {
+  emails: EmailRole[];
+};
+
+const SEND_WORKSPACE_INVITATION_MODAL_DEFAULT_VALUES: InvitationFormValues = {
+  emails: [
+    {
+      email: "",
+      role: EUserPermissions.MEMBER,
+    },
+  ],
+};
+
+type TUseWorkspaceInvitationProps = {
+  onSubmit: (data: InvitationFormValues) => Promise<void> | undefined;
+  onClose: () => void;
+};
+
+type TUseWorkspaceInvitationReturn = {
+  control: Control<InvitationFormValues>;
+  fields: FieldArrayWithId<InvitationFormValues, "emails", "id">[];
+  formState: FormState<InvitationFormValues>;
+  watch: UseFormWatch<InvitationFormValues>;
+  remove: (index: number) => void;
+  onFormSubmit: () => void;
+  handleClose: () => void;
+  appendField: () => void;
+};
+
+export const useWorkspaceInvitationActions = (props: TUseWorkspaceInvitationProps): TUseWorkspaceInvitationReturn => {
+  const { onSubmit, onClose } = props;
+  // form info
+  const { control, reset, watch, handleSubmit, formState } = useForm<InvitationFormValues>({
+    defaultValues: SEND_WORKSPACE_INVITATION_MODAL_DEFAULT_VALUES,
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "emails",
+  });
+
+  const handleClose = () => {
+    onClose();
+    const timeout = setTimeout(() => {
+      reset(SEND_WORKSPACE_INVITATION_MODAL_DEFAULT_VALUES);
+      clearTimeout(timeout);
+    }, 350);
+  };
+
+  const appendField = () => {
+    append({ email: "", role: EUserPermissions.MEMBER });
+  };
+
+  const onSubmitForm = async (data: InvitationFormValues) => {
+    await onSubmit(data)?.then(() => {
+      reset(SEND_WORKSPACE_INVITATION_MODAL_DEFAULT_VALUES);
+    });
+  };
+
+  useEffect(() => {
+    if (fields.length === 0) append([{ email: "", role: EUserPermissions.MEMBER }]);
+  }, [fields, append]);
+
+  return {
+    control,
+    fields,
+    formState,
+    watch,
+    remove,
+    onFormSubmit: handleSubmit(onSubmitForm),
+    handleClose,
+    appendField,
+  };
+};
diff --git a/apps/web/core/hooks/use-workspace-issue-properties-extended.tsx b/apps/web/core/hooks/use-workspace-issue-properties-extended.tsx
new file mode 100644
index 0000000..a9d7b01
--- /dev/null
+++ b/apps/web/core/hooks/use-workspace-issue-properties-extended.tsx
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useWorkspaceIssuePropertiesExtended = (workspaceSlug: string | string[] | undefined) => {};
diff --git a/apps/web/core/hooks/use-workspace-issue-properties.ts b/apps/web/core/hooks/use-workspace-issue-properties.ts
new file mode 100644
index 0000000..9ee1099
--- /dev/null
+++ b/apps/web/core/hooks/use-workspace-issue-properties.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import useSWR from "swr";
+// plane web imports
+import { WORKSPACE_ESTIMATES, WORKSPACE_CYCLES, WORKSPACE_LABELS, WORKSPACE_MODULES } from "@plane/constants";
+import { useWorkspaceIssuePropertiesExtended } from "@/hooks/use-workspace-issue-properties-extended";
+// plane imports
+import { useProjectEstimates } from "./store/estimates";
+import { useCycle } from "./store/use-cycle";
+import { useLabel } from "./store/use-label";
+import { useModule } from "./store/use-module";
+
+export const useWorkspaceIssueProperties = (workspaceSlug: string | string[] | undefined) => {
+  const { fetchWorkspaceLabels } = useLabel();
+
+  const { getWorkspaceEstimates } = useProjectEstimates();
+
+  const { fetchWorkspaceModules } = useModule();
+
+  const { fetchWorkspaceCycles } = useCycle();
+
+  // fetch workspace Modules
+  useSWR(
+    workspaceSlug ? WORKSPACE_MODULES(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => fetchWorkspaceModules(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetch workspace Cycles
+  useSWR(
+    workspaceSlug ? WORKSPACE_CYCLES(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => fetchWorkspaceCycles(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetch workspace labels
+  useSWR(
+    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => fetchWorkspaceLabels(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetch workspace estimates
+  useSWR(
+    workspaceSlug ? WORKSPACE_ESTIMATES(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => getWorkspaceEstimates(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetch extended issue properties
+  useWorkspaceIssuePropertiesExtended(workspaceSlug);
+};
diff --git a/apps/web/core/hooks/use-workspace-paths.ts b/apps/web/core/hooks/use-workspace-paths.ts
new file mode 100644
index 0000000..7ba6a8d
--- /dev/null
+++ b/apps/web/core/hooks/use-workspace-paths.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useParams, usePathname } from "next/navigation";
+
+/**
+ * Custom hook to detect different workspace paths
+ * @returns Object containing boolean flags for different workspace paths
+ */
+export const useWorkspacePaths = () => {
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+
+  const isSettingsPath = pathname.includes(`/${workspaceSlug}/settings`);
+  const isWikiPath = pathname.includes(`/${workspaceSlug}/wiki`);
+  const isAiPath = pathname.includes(`/${workspaceSlug}/pi-chat`);
+  const isProjectsPath = pathname.includes(`/${workspaceSlug}/`) && !isWikiPath && !isAiPath && !isSettingsPath;
+  const isNotificationsPath = pathname.includes(`/${workspaceSlug}/notifications`);
+
+  return {
+    isSettingsPath,
+    isWikiPath,
+    isAiPath,
+    isProjectsPath,
+    isNotificationsPath,
+  };
+};
diff --git a/apps/web/core/hooks/work-item-filters/use-work-item-filters-config.tsx b/apps/web/core/hooks/work-item-filters/use-work-item-filters-config.tsx
new file mode 100644
index 0000000..6a6bb18
--- /dev/null
+++ b/apps/web/core/hooks/work-item-filters/use-work-item-filters-config.tsx
@@ -0,0 +1,404 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import {
+  AtOutline,
+  CalendarOutline,
+  CyclesOutline,
+  DueDateOutline,
+  LabelsOutline,
+  MembersOutline,
+  ModuleOutline,
+  PriorityOutline,
+  ProjectsOutline,
+  StartDateOutline,
+  StateOutline,
+  UserOutline,
+} from "@makeplane/propel/icons";
+// plane imports
+import { Avatar } from "@makeplane/propel/components/avatar";
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import type {
+  ICycle,
+  IState,
+  IUserLite,
+  TFilterConfig,
+  IIssueLabel,
+  IModule,
+  IProject,
+  TWorkItemFilterProperty,
+} from "@plane/types";
+
+import {
+  getAssigneeFilterConfig,
+  getCreatedAtFilterConfig,
+  getCreatedByFilterConfig,
+  getCycleFilterConfig,
+  getFileURL,
+  getLabelFilterConfig,
+  getMentionFilterConfig,
+  getModuleFilterConfig,
+  getPriorityFilterConfig,
+  getProjectFilterConfig,
+  getStartDateFilterConfig,
+  getStateFilterConfig,
+  getStateGroupFilterConfig,
+  getSubscriberFilterConfig,
+  getTargetDateFilterConfig,
+  getUpdatedAtFilterConfig,
+  isLoaderReady,
+} from "@plane/utils";
+// store hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+// plane web imports
+import { useFiltersOperatorConfigs } from "@/hooks/rich-filters/use-filters-operator-configs";
+
+export type TWorkItemFiltersEntityProps = {
+  workspaceSlug: string;
+  cycleIds?: string[];
+  labelIds?: string[];
+  memberIds?: string[];
+  moduleIds?: string[];
+  projectId?: string;
+  projectIds?: string[];
+  stateIds?: string[];
+};
+
+export type TUseWorkItemFiltersConfigProps = {
+  allowedFilters: TWorkItemFilterProperty[];
+} & TWorkItemFiltersEntityProps;
+
+export type TWorkItemFiltersConfig = {
+  areAllConfigsInitialized: boolean;
+  configs: TFilterConfig<TWorkItemFilterProperty>[];
+  configMap: {
+    [key in TWorkItemFilterProperty]?: TFilterConfig<TWorkItemFilterProperty>;
+  };
+  isFilterEnabled: (key: TWorkItemFilterProperty) => boolean;
+  members: IUserLite[];
+};
+
+export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps): TWorkItemFiltersConfig => {
+  const { allowedFilters, cycleIds, labelIds, memberIds, moduleIds, projectId, projectIds, stateIds, workspaceSlug } =
+    props;
+  // store hooks
+  const { loader: projectLoader, getProjectById } = useProject();
+  const { getCycleById } = useCycle();
+  const { getLabelById } = useLabel();
+  const { getModuleById } = useModule();
+  const { getStateById } = useProjectState();
+  const { getUserDetails } = useMember();
+  // derived values
+  const operatorConfigs = useFiltersOperatorConfigs({ workspaceSlug });
+  const filtersToShow = useMemo(() => new Set(allowedFilters), [allowedFilters]);
+  const project = useMemo(() => getProjectById(projectId), [projectId, getProjectById]);
+  const members: IUserLite[] | undefined = useMemo(
+    () =>
+      memberIds
+        ? (memberIds.map((memberId) => getUserDetails(memberId)).filter((member) => member) as IUserLite[])
+        : undefined,
+    [memberIds, getUserDetails]
+  );
+  const workItemStates: IState[] | undefined = useMemo(
+    () =>
+      stateIds ? (stateIds.map((stateId) => getStateById(stateId)).filter((state) => state) as IState[]) : undefined,
+    [stateIds, getStateById]
+  );
+  const workItemLabels: IIssueLabel[] | undefined = useMemo(
+    () =>
+      labelIds
+        ? (labelIds.map((labelId) => getLabelById(labelId)).filter((label) => label) as IIssueLabel[])
+        : undefined,
+    [labelIds, getLabelById]
+  );
+  const cycles = useMemo(
+    () => (cycleIds ? (cycleIds.map((cycleId) => getCycleById(cycleId)).filter((cycle) => cycle) as ICycle[]) : []),
+    [cycleIds, getCycleById]
+  );
+  const modules = useMemo(
+    () =>
+      moduleIds ? (moduleIds.map((moduleId) => getModuleById(moduleId)).filter((module) => module) as IModule[]) : [],
+    [moduleIds, getModuleById]
+  );
+  const projects = useMemo(
+    () =>
+      projectIds
+        ? (projectIds.map((projectId) => getProjectById(projectId)).filter((project) => project) as IProject[])
+        : [],
+    [projectIds, getProjectById]
+  );
+  const areAllConfigsInitialized = useMemo(() => isLoaderReady(projectLoader), [projectLoader]);
+
+  /**
+   * Checks if a filter is enabled based on the filters to show.
+   * @param key - The filter key.
+   * @param level - The level of the filter.
+   * @returns True if the filter is enabled, false otherwise.
+   */
+  const isFilterEnabled = useCallback((key: TWorkItemFilterProperty) => filtersToShow.has(key), [filtersToShow]);
+
+  // state group filter config
+  const stateGroupFilterConfig = useMemo(
+    () =>
+      getStateGroupFilterConfig<TWorkItemFilterProperty>("state_group")({
+        isEnabled: isFilterEnabled("state_group"),
+        filterIcon: StateOutline,
+        getOptionIcon: (stateGroupKey) => <StateGroupIcon stateGroup={stateGroupKey} />,
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, operatorConfigs]
+  );
+
+  // state filter config
+  const stateFilterConfig = useMemo(
+    () =>
+      getStateFilterConfig<TWorkItemFilterProperty>("state_id")({
+        isEnabled: isFilterEnabled("state_id") && workItemStates !== undefined,
+        filterIcon: StateOutline,
+        getOptionIcon: (state) => <StateGroupIcon stateGroup={state.group} color={state.color} />,
+        states: workItemStates ?? [],
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, workItemStates, operatorConfigs]
+  );
+
+  // label filter config
+  const labelFilterConfig = useMemo(
+    () =>
+      getLabelFilterConfig<TWorkItemFilterProperty>("label_id")({
+        isEnabled: isFilterEnabled("label_id") && workItemLabels !== undefined,
+        filterIcon: LabelsOutline,
+        labels: workItemLabels ?? [],
+        getOptionIcon: (color) => (
+          <span className="flex size-2.5 flex-shrink-0 rounded-full" style={{ backgroundColor: color }} />
+        ),
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, workItemLabels, operatorConfigs]
+  );
+
+  // cycle filter config
+  const cycleFilterConfig = useMemo(
+    () =>
+      getCycleFilterConfig<TWorkItemFilterProperty>("cycle_id")({
+        isEnabled: isFilterEnabled("cycle_id") && project?.cycle_view === true && cycles !== undefined,
+        filterIcon: CyclesOutline,
+        getOptionIcon: (cycleGroup) => <CycleGroupIcon cycleGroup={cycleGroup} className="h-3.5 w-3.5 flex-shrink-0" />,
+        cycles: cycles ?? [],
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, project?.cycle_view, cycles, operatorConfigs]
+  );
+
+  // module filter config
+  const moduleFilterConfig = useMemo(
+    () =>
+      getModuleFilterConfig<TWorkItemFilterProperty>("module_id")({
+        isEnabled: isFilterEnabled("module_id") && project?.module_view === true && modules !== undefined,
+        filterIcon: ModuleOutline,
+        getOptionIcon: () => <ModuleOutline className="h-3 w-3 flex-shrink-0" />,
+        modules: modules ?? [],
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, project?.module_view, modules, operatorConfigs]
+  );
+
+  // assignee filter config
+  const assigneeFilterConfig = useMemo(
+    () =>
+      getAssigneeFilterConfig<TWorkItemFilterProperty>("assignee_id")({
+        isEnabled: isFilterEnabled("assignee_id") && members !== undefined,
+        filterIcon: MembersOutline,
+        members: members ?? [],
+        getOptionIcon: (memberDetails) => (
+          <Avatar
+            alt={memberDetails.display_name}
+            fallback={memberDetails.display_name?.[0]?.toUpperCase()}
+            src={getFileURL(memberDetails.avatar_url)}
+            size="2xs"
+          />
+        ),
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, members, operatorConfigs]
+  );
+
+  // mention filter config
+  const mentionFilterConfig = useMemo(
+    () =>
+      getMentionFilterConfig<TWorkItemFilterProperty>("mention_id")({
+        isEnabled: isFilterEnabled("mention_id") && members !== undefined,
+        filterIcon: AtOutline,
+        members: members ?? [],
+        getOptionIcon: (memberDetails) => (
+          <Avatar
+            alt={memberDetails.display_name}
+            fallback={memberDetails.display_name?.[0]?.toUpperCase()}
+            src={getFileURL(memberDetails.avatar_url)}
+            size="2xs"
+          />
+        ),
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, members, operatorConfigs]
+  );
+
+  // created by filter config
+  const createdByFilterConfig = useMemo(
+    () =>
+      getCreatedByFilterConfig<TWorkItemFilterProperty>("created_by_id")({
+        isEnabled: isFilterEnabled("created_by_id") && members !== undefined,
+        filterIcon: UserOutline,
+        members: members ?? [],
+        getOptionIcon: (memberDetails) => (
+          <Avatar
+            alt={memberDetails.display_name}
+            fallback={memberDetails.display_name?.[0]?.toUpperCase()}
+            src={getFileURL(memberDetails.avatar_url)}
+            size="2xs"
+          />
+        ),
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, members, operatorConfigs]
+  );
+
+  // subscriber filter config
+  const subscriberFilterConfig = useMemo(
+    () =>
+      getSubscriberFilterConfig<TWorkItemFilterProperty>("subscriber_id")({
+        isEnabled: isFilterEnabled("subscriber_id") && members !== undefined,
+        filterIcon: MembersOutline,
+        members: members ?? [],
+        getOptionIcon: (memberDetails) => (
+          <Avatar
+            alt={memberDetails.display_name}
+            fallback={memberDetails.display_name?.[0]?.toUpperCase()}
+            src={getFileURL(memberDetails.avatar_url)}
+            size="2xs"
+          />
+        ),
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, members, operatorConfigs]
+  );
+
+  // priority filter config
+  const priorityFilterConfig = useMemo(
+    () =>
+      getPriorityFilterConfig<TWorkItemFilterProperty>("priority")({
+        isEnabled: isFilterEnabled("priority"),
+        filterIcon: PriorityOutline,
+        getOptionIcon: (priority) => <PriorityIcon priority={priority} />,
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, operatorConfigs]
+  );
+
+  // start date filter config
+  const startDateFilterConfig = useMemo(
+    () =>
+      getStartDateFilterConfig<TWorkItemFilterProperty>("start_date")({
+        isEnabled: true,
+        filterIcon: StartDateOutline,
+        ...operatorConfigs,
+      }),
+    [operatorConfigs]
+  );
+
+  // target date filter config
+  const targetDateFilterConfig = useMemo(
+    () =>
+      getTargetDateFilterConfig<TWorkItemFilterProperty>("target_date")({
+        isEnabled: true,
+        filterIcon: DueDateOutline,
+        ...operatorConfigs,
+      }),
+    [operatorConfigs]
+  );
+
+  // created at filter config
+  const createdAtFilterConfig = useMemo(
+    () =>
+      getCreatedAtFilterConfig<TWorkItemFilterProperty>("created_at")({
+        isEnabled: true,
+        filterIcon: CalendarOutline,
+        ...operatorConfigs,
+      }),
+    [operatorConfigs]
+  );
+
+  // updated at filter config
+  const updatedAtFilterConfig = useMemo(
+    () =>
+      getUpdatedAtFilterConfig<TWorkItemFilterProperty>("updated_at")({
+        isEnabled: true,
+        filterIcon: CalendarOutline,
+        ...operatorConfigs,
+      }),
+    [operatorConfigs]
+  );
+
+  // project filter config
+  const projectFilterConfig = useMemo(
+    () =>
+      getProjectFilterConfig<TWorkItemFilterProperty>("project_id")({
+        isEnabled: isFilterEnabled("project_id") && projects !== undefined,
+        filterIcon: ProjectsOutline,
+        projects: projects,
+        getOptionIcon: (project) => <Logo logo={project.logo_props} size={12} />,
+        ...operatorConfigs,
+      }),
+    [isFilterEnabled, projects, operatorConfigs]
+  );
+
+  return {
+    areAllConfigsInitialized,
+    configs: [
+      stateFilterConfig,
+      stateGroupFilterConfig,
+      assigneeFilterConfig,
+      priorityFilterConfig,
+      projectFilterConfig,
+      mentionFilterConfig,
+      labelFilterConfig,
+      cycleFilterConfig,
+      moduleFilterConfig,
+      startDateFilterConfig,
+      targetDateFilterConfig,
+      createdAtFilterConfig,
+      updatedAtFilterConfig,
+      createdByFilterConfig,
+      subscriberFilterConfig,
+    ],
+    configMap: {
+      project_id: projectFilterConfig,
+      state_group: stateGroupFilterConfig,
+      state_id: stateFilterConfig,
+      label_id: labelFilterConfig,
+      cycle_id: cycleFilterConfig,
+      module_id: moduleFilterConfig,
+      assignee_id: assigneeFilterConfig,
+      mention_id: mentionFilterConfig,
+      created_by_id: createdByFilterConfig,
+      subscriber_id: subscriberFilterConfig,
+      priority: priorityFilterConfig,
+      start_date: startDateFilterConfig,
+      target_date: targetDateFilterConfig,
+      created_at: createdAtFilterConfig,
+      updated_at: updatedAtFilterConfig,
+    },
+    isFilterEnabled,
+    members: members ?? [],
+  };
+};
diff --git a/apps/web/core/layouts/auth-layout/project-wrapper.tsx b/apps/web/core/layouts/auth-layout/project-wrapper.tsx
new file mode 100644
index 0000000..1a0a441
--- /dev/null
+++ b/apps/web/core/layouts/auth-layout/project-wrapper.tsx
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { GANTT_TIMELINE_TYPE } from "@plane/types";
+// components
+import { ProjectAccessRestriction } from "@/components/auth-screens/project/project-access-restriction";
+import {
+  PROJECT_DETAILS,
+  PROJECT_ME_INFORMATION,
+  PROJECT_LABELS,
+  PROJECT_MEMBERS,
+  PROJECT_MEMBER_PREFERENCES,
+  PROJECT_STATES,
+  PROJECT_ESTIMATES,
+  PROJECT_ALL_CYCLES,
+  PROJECT_MODULES,
+  PROJECT_VIEWS,
+  PROJECT_INTAKE_STATE,
+} from "@plane/constants";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useProjectView } from "@/hooks/store/use-project-view";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useTimeLineChart } from "@/hooks/use-timeline-chart";
+
+interface IProjectAuthWrapper {
+  workspaceSlug: string;
+  projectId: string;
+  children: ReactNode;
+  isLoading?: boolean;
+}
+
+export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IProjectAuthWrapper) {
+  const { workspaceSlug, projectId, children, isLoading: isParentLoading = false } = props;
+  // states
+  const [isJoiningProject, setIsJoiningProject] = useState(false);
+  // store hooks
+  const { fetchUserProjectInfo, allowPermissions, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
+  const { fetchProjectDetails } = useProject();
+  const { joinProject } = useUserPermissions();
+  const { fetchAllCycles } = useCycle();
+  const { fetchModulesSlim, fetchModules } = useModule();
+  const { initGantt } = useTimeLineChart(GANTT_TIMELINE_TYPE.MODULE);
+  const { fetchViews } = useProjectView();
+  const {
+    project: { fetchProjectMembers, fetchProjectUserProperties },
+  } = useMember();
+  const { fetchProjectStates, fetchProjectIntakeState } = useProjectState();
+  const { data: currentUserData } = useUser();
+  const { fetchProjectLabels } = useLabel();
+  const { getProjectEstimates } = useProjectEstimates();
+  // derived values
+  const hasPermissionToCurrentProject = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
+  const currentProjectRole = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
+  const isWorkspaceAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE, workspaceSlug);
+  // Initialize module timeline chart
+  useEffect(() => {
+    initGantt();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // fetching project details
+  const { isLoading: isProjectDetailsLoading, error: projectDetailsError } = useSWR(
+    PROJECT_DETAILS(workspaceSlug, projectId),
+    () => fetchProjectDetails(workspaceSlug, projectId)
+  );
+  // fetching user project member information
+  useSWR(PROJECT_ME_INFORMATION(workspaceSlug, projectId), () => fetchUserProjectInfo(workspaceSlug, projectId));
+  // fetching project member preferences
+  useSWR(
+    currentUserData?.id ? PROJECT_MEMBER_PREFERENCES(projectId, currentProjectRole) : null,
+    currentUserData?.id ? () => fetchProjectUserProperties(workspaceSlug, projectId) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetching project labels
+  useSWR(PROJECT_LABELS(projectId, currentProjectRole), () => fetchProjectLabels(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
+  // fetching project members
+  useSWR(PROJECT_MEMBERS(projectId, currentProjectRole), () => fetchProjectMembers(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
+  // fetching project states
+  useSWR(PROJECT_STATES(projectId, currentProjectRole), () => fetchProjectStates(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
+  // fetching project intake state
+  useSWR(PROJECT_INTAKE_STATE(projectId, currentProjectRole), () => fetchProjectIntakeState(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
+  // fetching project estimates
+  useSWR(PROJECT_ESTIMATES(projectId, currentProjectRole), () => getProjectEstimates(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
+  // fetching project cycles
+  useSWR(PROJECT_ALL_CYCLES(projectId, currentProjectRole), () => fetchAllCycles(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
+  // fetching project modules
+  useSWR(
+    PROJECT_MODULES(projectId, currentProjectRole),
+    async () => {
+      await Promise.all([fetchModulesSlim(workspaceSlug, projectId), fetchModules(workspaceSlug, projectId)]);
+    },
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetching project views
+  useSWR(PROJECT_VIEWS(projectId, currentProjectRole), () => fetchViews(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
+
+  // handle join project
+  const handleJoinProject = () => {
+    setIsJoiningProject(true);
+    joinProject(workspaceSlug, projectId).finally(() => setIsJoiningProject(false));
+  };
+
+  const isProjectLoading = (isParentLoading || isProjectDetailsLoading) && !projectDetailsError;
+
+  if (isProjectLoading) return null;
+
+  if (!isProjectLoading && hasPermissionToCurrentProject === false) {
+    return (
+      <ProjectAccessRestriction
+        errorStatusCode={projectDetailsError?.status}
+        isWorkspaceAdmin={isWorkspaceAdmin}
+        handleJoinProject={handleJoinProject}
+        isJoinButtonDisabled={isJoiningProject}
+      />
+    );
+  }
+
+  return <>{children}</>;
+});
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
new file mode 100644
index 0000000..c730c1c
--- /dev/null
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// ui
+import { LogOutOutline } from "@makeplane/propel/icons";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { Button, getButtonStyling } from "@plane/propel/button";
+import { PlaneLogo } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// assets
+import WorkSpaceNotAvailable from "@/app/assets/workspace/workspace-not-available.png?url";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+// constants
+import {
+  WORKSPACE_MEMBERS,
+  WORKSPACE_PARTIAL_PROJECTS,
+  WORKSPACE_MEMBER_ME_INFORMATION,
+  WORKSPACE_PROJECTS_ROLES_INFORMATION,
+  WORKSPACE_FAVORITE,
+  WORKSPACE_STATES,
+  WORKSPACE_SIDEBAR_PREFERENCES,
+  WORKSPACE_PROJECT_NAVIGATION_PREFERENCES,
+} from "@plane/constants";
+// hooks
+import { useFavorite } from "@/hooks/store/use-favorite";
+import { useMember } from "@/hooks/store/use-member";
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+interface IWorkspaceAuthWrapper {
+  children: ReactNode;
+  isLoading?: boolean;
+}
+
+export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props: IWorkspaceAuthWrapper) {
+  const { children, isLoading: isParentLoading = false } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { signOut, data: currentUser } = useUser();
+  const { fetchPartialProjects } = useProject();
+  const { fetchFavorite } = useFavorite();
+  const {
+    workspace: { fetchWorkspaceMembers },
+  } = useMember();
+  const { workspaces, fetchSidebarNavigationPreferences, fetchProjectNavigationPreferences } = useWorkspace();
+  const { isMobile } = usePlatformOS();
+  const { loader, workspaceInfoBySlug, fetchUserWorkspaceInfo, fetchUserProjectPermissions, allowPermissions } =
+    useUserPermissions();
+  const { fetchWorkspaceStates } = useProjectState();
+  // derived values
+  const canPerformWorkspaceMemberActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+  const allWorkspaces = workspaces ? Object.values(workspaces) : undefined;
+  const currentWorkspace =
+    (allWorkspaces && allWorkspaces.find((workspace) => workspace?.slug === workspaceSlug)) || undefined;
+  const currentWorkspaceInfo = workspaceSlug && workspaceInfoBySlug(workspaceSlug.toString());
+
+  // fetching user workspace information
+  useSWR(
+    workspaceSlug && currentWorkspace ? WORKSPACE_MEMBER_ME_INFORMATION(workspaceSlug.toString()) : null,
+    workspaceSlug && currentWorkspace ? () => fetchUserWorkspaceInfo(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  useSWR(
+    workspaceSlug && currentWorkspace ? WORKSPACE_PROJECTS_ROLES_INFORMATION(workspaceSlug.toString()) : null,
+    workspaceSlug && currentWorkspace ? () => fetchUserProjectPermissions(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetching workspace projects
+  useSWR(
+    workspaceSlug && currentWorkspace ? WORKSPACE_PARTIAL_PROJECTS(workspaceSlug.toString()) : null,
+    workspaceSlug && currentWorkspace ? () => fetchPartialProjects(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetch workspace members
+  useSWR(
+    workspaceSlug && currentWorkspace ? WORKSPACE_MEMBERS(workspaceSlug.toString()) : null,
+    workspaceSlug && currentWorkspace ? () => fetchWorkspaceMembers(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetch workspace favorite
+  useSWR(
+    workspaceSlug && currentWorkspace && canPerformWorkspaceMemberActions
+      ? WORKSPACE_FAVORITE(workspaceSlug.toString())
+      : null,
+    workspaceSlug && currentWorkspace && canPerformWorkspaceMemberActions
+      ? () => fetchFavorite(workspaceSlug.toString())
+      : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+  // fetch workspace states
+  useSWR(
+    workspaceSlug ? WORKSPACE_STATES(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => fetchWorkspaceStates(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetch workspace sidebar preferences
+  useSWR(
+    workspaceSlug ? WORKSPACE_SIDEBAR_PREFERENCES(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => fetchSidebarNavigationPreferences(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetch workspace project navigation preferences
+  useSWR(
+    workspaceSlug ? WORKSPACE_PROJECT_NAVIGATION_PREFERENCES(workspaceSlug.toString()) : null,
+    workspaceSlug ? () => fetchProjectNavigationPreferences(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  const handleSignOut = async () => {
+    await signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to sign out. Please try again.",
+      })
+    );
+  };
+
+  // if list of workspaces are not there then we have to render the spinner
+  if (isParentLoading || allWorkspaces === undefined || loader) {
+    return (
+      <div className="grid h-full place-items-center rounded-lg border border-subtle p-4">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <LogoSpinner />
+        </div>
+      </div>
+    );
+  }
+
+  // if workspaces are there and we are trying to access the workspace that we are not part of then show the existing workspaces
+  if (currentWorkspace === undefined && !currentWorkspaceInfo) {
+    return (
+      <div className="relative flex h-full w-full flex-col items-center justify-center bg-surface-2">
+        <div className="relative container mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
+          <div className="relative flex flex-shrink-0 items-center justify-between gap-4">
+            <div className="z-10 flex-shrink-0 bg-surface-2 py-4">
+              <PlaneLogo className="h-9 w-auto text-primary" />
+            </div>
+            <div className="relative flex items-center gap-2">
+              <div className="text-13 font-medium">{currentUser?.email}</div>
+              <div
+                className="relative flex h-6 w-6 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm hover:bg-layer-1"
+                onClick={handleSignOut}
+              >
+                <Tooltip label={"Sign out"} alignOffset={8} disabled={isMobile}>
+                  <LogOutOutline width={14} height={14} />
+                </Tooltip>
+              </div>
+            </div>
+          </div>
+          <div className="relative flex h-full w-full flex-grow flex-col items-center justify-center space-y-3">
+            <div className="relative flex-shrink-0">
+              <img src={WorkSpaceNotAvailable} className="h-[220px] object-contain object-center" alt="Plane logo" />
+            </div>
+            <h3 className="text-center text-16 font-semibold">Workspace not found</h3>
+            <p className="text-center text-13 text-secondary">
+              No workspace found with the URL. It may not exist or you lack authorization to view it.
+            </p>
+            <div className="flex items-center justify-center gap-2 pt-4">
+              {allWorkspaces && allWorkspaces.length > 0 && (
+                <Link href="/" className={cn(getButtonStyling("primary", "base"))}>
+                  Go Home
+                </Link>
+              )}
+              {allWorkspaces?.length > 0 && (
+                <Link href="/settings/profile/general/" className={cn(getButtonStyling("secondary", "base"))}>
+                  Visit Profile
+                </Link>
+              )}
+              {allWorkspaces && allWorkspaces.length === 0 && (
+                <Link href="/create-workspace/" className={cn(getButtonStyling("secondary", "base"))}>
+                  Create new workspace
+                </Link>
+              )}
+            </div>
+          </div>
+
+          <div className="absolute top-0 bottom-0 left-4 w-0 bg-layer-1 md:w-0.5" />
+        </div>
+      </div>
+    );
+  }
+
+  // while user does not have access to view that workspace
+  if (currentWorkspaceInfo === undefined) {
+    return (
+      <div className={`h-screen w-full overflow-hidden bg-surface-1`}>
+        <div className="grid h-full place-items-center p-4">
+          <div className="space-y-8 text-center">
+            <div className="space-y-2">
+              <h3 className="text-16 font-semibold">Not Authorized!</h3>
+              <p className="mx-auto w-1/2 text-13 text-secondary">
+                You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or
+                check your pending invitations.
+              </p>
+            </div>
+            <div className="flex items-center justify-center gap-2">
+              <Link href="/invitations">
+                <span>
+                  <Button variant="secondary">Check pending invites</Button>
+                </span>
+              </Link>
+              <Link href="/create-workspace">
+                <span>
+                  <Button variant="primary">Create new workspace</Button>
+                </span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+});
diff --git a/apps/web/core/layouts/default-layout/index.tsx b/apps/web/core/layouts/default-layout/index.tsx
new file mode 100644
index 0000000..850d828
--- /dev/null
+++ b/apps/web/core/layouts/default-layout/index.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { cn } from "@plane/utils";
+
+type Props = {
+  children: ReactNode;
+  gradient?: boolean;
+  className?: string;
+};
+
+function DefaultLayout({ children, gradient = false, className }: Props) {
+  return (
+    <div className={cn(`h-screen w-full overflow-hidden ${gradient ? "" : "bg-surface-1"}`, className)}>{children}</div>
+  );
+}
+
+export default DefaultLayout;
diff --git a/apps/web/core/lib/app-rail/context.tsx b/apps/web/core/lib/app-rail/context.tsx
new file mode 100644
index 0000000..70932d7
--- /dev/null
+++ b/apps/web/core/lib/app-rail/context.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { createContext, useContext } from "react";
+import type { IAppRailVisibilityContext } from "./types";
+
+/**
+ * Context for app-rail visibility control
+ * Provides access to app rail enabled state, collapse state, and toggle function
+ */
+export const AppRailVisibilityContext = createContext<IAppRailVisibilityContext | undefined>(undefined);
+
+/**
+ * Hook to consume the AppRailVisibilityContext
+ * Must be used within an AppRailVisibilityProvider
+ *
+ * @returns The app rail visibility context
+ * @throws Error if used outside of AppRailVisibilityProvider
+ */
+export const useAppRailVisibility = (): IAppRailVisibilityContext => {
+  const context = useContext(AppRailVisibilityContext);
+  if (context === undefined) {
+    throw new Error("useAppRailVisibility must be used within AppRailVisibilityProvider");
+  }
+  return context;
+};
diff --git a/apps/web/core/lib/app-rail/index.ts b/apps/web/core/lib/app-rail/index.ts
new file mode 100644
index 0000000..2e5c29a
--- /dev/null
+++ b/apps/web/core/lib/app-rail/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./context";
+export * from "./provider";
+export * from "./types";
diff --git a/apps/web/core/lib/app-rail/provider.tsx b/apps/web/core/lib/app-rail/provider.tsx
new file mode 100644
index 0000000..7788b78
--- /dev/null
+++ b/apps/web/core/lib/app-rail/provider.tsx
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useLocalStorage from "@/hooks/use-local-storage";
+import { AppRailVisibilityContext } from "./context";
+import type { IAppRailVisibilityContext } from "./types";
+
+interface AppRailVisibilityProviderProps {
+  children: React.ReactNode;
+  isEnabled?: boolean; // Allow override, default false
+}
+
+/**
+ * AppRailVisibilityProvider - manages app rail visibility state
+ * Base provider that accepts isEnabled as a prop
+ */
+export const AppRailVisibilityProvider = observer(function AppRailVisibilityProvider({
+  children,
+  isEnabled = false,
+}: AppRailVisibilityProviderProps) {
+  const { workspaceSlug } = useParams();
+
+  // User preference from localStorage
+  const { storedValue: isCollapsed, setValue: setIsCollapsed } = useLocalStorage<boolean>(
+    `APP_RAIL_${workspaceSlug}`,
+    false // Default: not collapsed (app rail visible)
+  );
+
+  const toggleAppRail = useCallback(() => {
+    setIsCollapsed(!isCollapsed);
+  }, [isCollapsed, setIsCollapsed]);
+
+  // Compute final visibility: enabled and not collapsed
+  const shouldRenderAppRail = isEnabled && !isCollapsed;
+
+  const value: IAppRailVisibilityContext = useMemo(
+    () => ({
+      isEnabled,
+      isCollapsed: isCollapsed ?? false,
+      shouldRenderAppRail,
+      toggleAppRail,
+    }),
+    [isEnabled, isCollapsed, shouldRenderAppRail, toggleAppRail]
+  );
+
+  return <AppRailVisibilityContext.Provider value={value}>{children}</AppRailVisibilityContext.Provider>;
+});
diff --git a/apps/web/core/lib/app-rail/types.ts b/apps/web/core/lib/app-rail/types.ts
new file mode 100644
index 0000000..459fed8
--- /dev/null
+++ b/apps/web/core/lib/app-rail/types.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Type definitions for app-rail visibility context
+ */
+
+export interface IAppRailVisibilityContext {
+  /**
+   * Whether the app rail is enabled
+   */
+  isEnabled: boolean;
+
+  /**
+   * Whether the app rail is collapsed (user preference from localStorage)
+   */
+  isCollapsed: boolean;
+
+  /**
+   * Computed property: whether the app rail should actually render
+   * True only if isEnabled && !isCollapsed
+   */
+  shouldRenderAppRail: boolean;
+
+  /**
+   * Toggle the collapse state of the app rail
+   */
+  toggleAppRail: () => void;
+}
diff --git a/apps/web/core/lib/b-progress/AppProgressBar.tsx b/apps/web/core/lib/b-progress/AppProgressBar.tsx
new file mode 100644
index 0000000..c3e0f03
--- /dev/null
+++ b/apps/web/core/lib/b-progress/AppProgressBar.tsx
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { BProgress } from "@bprogress/core";
+import { useNavigation } from "react-router";
+import "@bprogress/core/css";
+
+/**
+ * Progress bar configuration options
+ */
+interface ProgressConfig {
+  /** Whether to show the loading spinner */
+  showSpinner: boolean;
+  /** Minimum progress percentage (0-1) */
+  minimum: number;
+  /** Animation speed in milliseconds */
+  speed: number;
+  /** Auto-increment speed in milliseconds */
+  trickleSpeed: number;
+  /** CSS easing function */
+  easing: string;
+  /** Enable auto-increment */
+  trickle: boolean;
+  /** Delay before showing progress bar in milliseconds */
+  delay: number;
+  /** Whether to disable the progress bar */
+  isDisabled?: boolean;
+}
+
+/**
+ * Configuration for the progress bar
+ */
+const PROGRESS_CONFIG: Readonly<ProgressConfig> = {
+  showSpinner: false,
+  minimum: 0.1,
+  speed: 400,
+  trickleSpeed: 800,
+  easing: "ease",
+  trickle: true,
+  delay: 0,
+} as const;
+
+/**
+ * Navigation Progress Bar Component
+ *
+ * Automatically displays a progress bar at the top of the page during React Router navigation.
+ * Integrates with React Router's useNavigation hook to monitor route changes.
+ *
+ * Note: Progress bar is disabled in production builds.
+ *
+ * @returns null - This component doesn't render any visible elements
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <>
+ *       <AppProgressBar />
+ *       <Outlet />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export default function AppProgressBar(): null {
+  const navigation = useNavigation();
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const startedRef = useRef<boolean>(false);
+
+  // Initialize BProgress once on mount
+  useEffect(() => {
+    // Skip initialization in production builds
+    if (PROGRESS_CONFIG.isDisabled) {
+      return;
+    }
+
+    // Configure BProgress with our settings
+    BProgress.configure({
+      showSpinner: PROGRESS_CONFIG.showSpinner,
+      minimum: PROGRESS_CONFIG.minimum,
+      speed: PROGRESS_CONFIG.speed,
+      trickleSpeed: PROGRESS_CONFIG.trickleSpeed,
+      easing: PROGRESS_CONFIG.easing,
+      trickle: PROGRESS_CONFIG.trickle,
+    });
+
+    // Render the progress bar element in the DOM
+    BProgress.render(true);
+
+    // Cleanup on unmount
+    return () => {
+      if (BProgress.isStarted()) {
+        BProgress.done();
+      }
+    };
+  }, []);
+
+  // Handle navigation state changes
+  useEffect(() => {
+    // Skip navigation tracking in production builds
+    if (PROGRESS_CONFIG.isDisabled) {
+      return;
+    }
+
+    if (navigation.state === "idle") {
+      // Navigation complete - clear any pending timer
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+
+      // Complete progress if it was started
+      if (startedRef.current) {
+        BProgress.done();
+        startedRef.current = false;
+      }
+    } else {
+      // Navigation in progress (loading or submitting)
+      // Only start if not already started and no timer pending
+      if (timerRef.current === null && !startedRef.current) {
+        timerRef.current = setTimeout((): void => {
+          if (!BProgress.isStarted()) {
+            BProgress.start();
+            startedRef.current = true;
+          }
+          timerRef.current = null;
+        }, PROGRESS_CONFIG.delay);
+      }
+    }
+
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [navigation.state]);
+
+  return null;
+}
diff --git a/apps/web/core/lib/idle-task.ts b/apps/web/core/lib/idle-task.ts
new file mode 100644
index 0000000..3d6db72
--- /dev/null
+++ b/apps/web/core/lib/idle-task.ts
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type IdleTaskHandle = {
+  cancel: () => void;
+};
+
+const requestIdleFallback = (callback: IdleRequestCallback, options?: IdleRequestOptions): number => {
+  const start = Date.now();
+
+  return globalThis.setTimeout(() => {
+    callback({
+      didTimeout: false,
+      timeRemaining: () => Math.max(0, 50 - (Date.now() - start)),
+    });
+  }, options?.timeout ?? 1) as unknown as number;
+};
+
+const cancelIdleFallback = (id: number) => {
+  globalThis.clearTimeout(id);
+};
+
+export const requestIdle = (callback: IdleRequestCallback, options?: IdleRequestOptions): number => {
+  if (typeof globalThis.requestIdleCallback === "function") return globalThis.requestIdleCallback(callback, options);
+
+  return requestIdleFallback(callback, options);
+};
+
+export const cancelIdle = (id: number) => {
+  if (typeof globalThis.cancelIdleCallback === "function") return globalThis.cancelIdleCallback(id);
+
+  return cancelIdleFallback(id);
+};
+
+export const installIdleCallbackPolyfill = () => {
+  if (typeof globalThis === "undefined") return;
+
+  globalThis.requestIdleCallback = globalThis.requestIdleCallback ?? requestIdleFallback;
+  globalThis.cancelIdleCallback = globalThis.cancelIdleCallback ?? cancelIdleFallback;
+};
+
+/**
+ * Schedule lightweight work for idle time and return a cancel handle.
+ * Falls back to setTimeout when requestIdleCallback is unavailable.
+ */
+export const runIdleTask = (callback: IdleRequestCallback): IdleTaskHandle => {
+  const idleId = requestIdle(callback, { timeout: 300 });
+  return {
+    cancel: () => cancelIdle(idleId),
+  };
+};
diff --git a/apps/web/core/lib/local-storage.ts b/apps/web/core/lib/local-storage.ts
new file mode 100644
index 0000000..b68c122
--- /dev/null
+++ b/apps/web/core/lib/local-storage.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty } from "lodash-es";
+
+export const storage = {
+  set: (key: string, value: object | string | boolean): void => {
+    if (typeof window === undefined || typeof window === "undefined" || !key || !value) return undefined;
+    const tempValue: string | undefined = value
+      ? ["string", "boolean"].includes(typeof value)
+        ? value.toString()
+        : isEmpty(value)
+          ? undefined
+          : JSON.stringify(value)
+      : undefined;
+    if (!tempValue) return undefined;
+    window.localStorage.setItem(key, tempValue);
+  },
+
+  get: (key: string): string | undefined => {
+    if (typeof window === undefined || typeof window === "undefined") return undefined;
+    const item = window.localStorage.getItem(key);
+    return item ? item : undefined;
+  },
+
+  remove: (key: string): void => {
+    if (typeof window === undefined || typeof window === "undefined" || !key) return undefined;
+    window.localStorage.removeItem(key);
+  },
+};
diff --git a/apps/web/core/lib/polyfills/index.ts b/apps/web/core/lib/polyfills/index.ts
new file mode 100644
index 0000000..fae765e
--- /dev/null
+++ b/apps/web/core/lib/polyfills/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { installIdleCallbackPolyfill } from "@/lib/idle-task";
+
+installIdleCallbackPolyfill();
+
+export default true;
diff --git a/apps/web/core/lib/stale-asset-error.ts b/apps/web/core/lib/stale-asset-error.ts
new file mode 100644
index 0000000..5276c02
--- /dev/null
+++ b/apps/web/core/lib/stale-asset-error.ts
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Error signatures produced when a deploy removes hashed assets that an open tab
+// still references (stale-tab version skew).
+const STALE_ASSET_ERROR_SIGNATURES = [
+  "Failed to fetch dynamically imported module", // Chromium
+  "error loading dynamically imported module", // Firefox
+  "Importing a module script failed", // Safari
+  "Unable to preload CSS", // Vite preload helper
+  // React Router's own wrapper when a route module's lazy import fails during
+  // navigation — the original browser error above never reaches here as a
+  // window event, only this synthesized message.
+  "No result returned from dataStrategy for route",
+];
+
+export const isStaleAssetErrorMessage = (message: string): boolean =>
+  STALE_ASSET_ERROR_SIGNATURES.some((signature) => message.includes(signature));
+
+export const isStaleAssetError = (error: unknown): boolean => {
+  const message = error instanceof Error ? error.message : typeof error === "string" ? error : "";
+  return isStaleAssetErrorMessage(message);
+};
+
+// Reload-once-then-fall-through-to-boundary guard, shared by the window-level
+// listeners (entry.client.tsx) and the route ErrorBoundary (root.tsx) so both
+// paths to the same failure share one reload attempt instead of racing.
+const STALE_ASSET_RELOAD_KEY = "__plane_chunk_reload";
+const STALE_ASSET_RELOAD_WINDOW_MS = 30_000;
+
+const hasRecentStaleAssetReload = (): boolean => {
+  try {
+    const lastReloadAt = Number(sessionStorage.getItem(STALE_ASSET_RELOAD_KEY));
+    return Number.isFinite(lastReloadAt) && Date.now() - lastReloadAt < STALE_ASSET_RELOAD_WINDOW_MS;
+  } catch {
+    // No storage means no loop guard — never auto-reload in that case.
+    return true;
+  }
+};
+
+let isRecoveringFromStaleAsset = false;
+
+// Returns whether it actually triggered a reload, so callers that can otherwise
+// fall back to default browser error handling (e.g. Vite's preload-error
+// overlay) only suppress that fallback when a reload is really in flight.
+export const recoverFromStaleAsset = (): boolean => {
+  if (isRecoveringFromStaleAsset) return false;
+  isRecoveringFromStaleAsset = true;
+
+  if (hasRecentStaleAssetReload()) {
+    // Second failure in a row — surface to the route error boundary instead of looping.
+    isRecoveringFromStaleAsset = false;
+    return false;
+  }
+  try {
+    sessionStorage.setItem(STALE_ASSET_RELOAD_KEY, String(Date.now()));
+  } catch {
+    isRecoveringFromStaleAsset = false;
+    return false;
+  }
+  window.location.reload();
+  return true;
+};
diff --git a/apps/web/core/lib/store-context.tsx b/apps/web/core/lib/store-context.tsx
new file mode 100644
index 0000000..661d393
--- /dev/null
+++ b/apps/web/core/lib/store-context.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactElement } from "react";
+import { createContext } from "react";
+// plane web store
+import { RootStore } from "@/store/root.store";
+
+export let rootStore = new RootStore();
+
+export const StoreContext = createContext<RootStore>(rootStore);
+
+const initializeStore = () => {
+  const newRootStore = rootStore ?? new RootStore();
+  if (typeof window === "undefined") return newRootStore;
+  if (!rootStore) rootStore = newRootStore;
+  return newRootStore;
+};
+
+export const store = initializeStore();
+
+export function StoreProvider({ children }: { children: ReactElement }) {
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+}
diff --git a/apps/web/core/lib/wrappers/authentication-wrapper.tsx b/apps/web/core/lib/wrappers/authentication-wrapper.tsx
new file mode 100644
index 0000000..fc142c3
--- /dev/null
+++ b/apps/web/core/lib/wrappers/authentication-wrapper.tsx
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import { useSearchParams, usePathname } from "next/navigation";
+import useSWR from "swr";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+// helpers
+import { EPageTypes } from "@/helpers/authentication.helper";
+// hooks
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserProfile, useUserSettings } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type TPageType = EPageTypes;
+
+type TAuthenticationWrapper = {
+  children: ReactNode;
+  pageType?: TPageType;
+};
+
+const isValidURL = (url: string): boolean => {
+  const disallowedSchemes = /^(https?|ftp):\/\//i;
+  return !disallowedSchemes.test(url);
+};
+
+export const AuthenticationWrapper = observer(function AuthenticationWrapper(props: TAuthenticationWrapper) {
+  const pathname = usePathname();
+  const router = useAppRouter();
+  const searchParams = useSearchParams();
+  const nextPath = searchParams.get("next_path");
+  // props
+  const { children, pageType = EPageTypes.AUTHENTICATED } = props;
+  // hooks
+  const { isLoading: isUserLoading, data: currentUser, fetchCurrentUser } = useUser();
+  const { data: currentUserProfile } = useUserProfile();
+  const { data: currentUserSettings } = useUserSettings();
+  const { loader: workspacesLoader, workspaces } = useWorkspace();
+
+  const { isLoading: isUserSWRLoading } = useSWR("USER_INFORMATION", async () => await fetchCurrentUser(), {
+    revalidateOnFocus: false,
+    shouldRetryOnError: false,
+  });
+
+  const isUserOnboard =
+    currentUserProfile?.is_onboarded ||
+    (currentUserProfile?.onboarding_step?.profile_complete &&
+      currentUserProfile?.onboarding_step?.workspace_create &&
+      currentUserProfile?.onboarding_step?.workspace_invite &&
+      currentUserProfile?.onboarding_step?.workspace_join) ||
+    false;
+
+  const getWorkspaceRedirectionUrl = (): string => {
+    let redirectionRoute = "/create-workspace";
+
+    // validating the nextPath from the router query
+    if (nextPath && isValidURL(nextPath.toString())) {
+      redirectionRoute = nextPath.toString();
+      return redirectionRoute;
+    }
+
+    // validate the last and fallback workspace_slug
+    const currentWorkspaceSlug =
+      currentUserSettings?.workspace?.last_workspace_slug || currentUserSettings?.workspace?.fallback_workspace_slug;
+
+    // validate the current workspace_slug is available in the user's workspace list
+    const isCurrentWorkspaceValid = Object.values(workspaces || {}).findIndex(
+      (workspace) => workspace.slug === currentWorkspaceSlug
+    );
+
+    if (isCurrentWorkspaceValid >= 0) redirectionRoute = `/${currentWorkspaceSlug}`;
+
+    return redirectionRoute;
+  };
+
+  if ((isUserSWRLoading || isUserLoading || workspacesLoader) && !currentUser?.id)
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+
+  if (pageType === EPageTypes.PUBLIC) return <>{children}</>;
+
+  if (pageType === EPageTypes.NON_AUTHENTICATED) {
+    if (!currentUser?.id) return <>{children}</>;
+    else {
+      if (currentUserProfile?.id && isUserOnboard) {
+        const currentRedirectRoute = getWorkspaceRedirectionUrl();
+        router.push(currentRedirectRoute);
+        return <></>;
+      } else {
+        router.push("/onboarding");
+        return <></>;
+      }
+    }
+  }
+
+  if (pageType === EPageTypes.ONBOARDING) {
+    if (!currentUser?.id) {
+      router.push(`/${pathname ? `?next_path=${pathname}` : ``}`);
+      return <></>;
+    } else {
+      if (currentUser && currentUserProfile?.id && isUserOnboard) {
+        const currentRedirectRoute = getWorkspaceRedirectionUrl();
+        router.replace(currentRedirectRoute);
+        return <></>;
+      } else return <>{children}</>;
+    }
+  }
+
+  if (pageType === EPageTypes.SET_PASSWORD) {
+    if (!currentUser?.id) {
+      router.push(`/${pathname ? `?next_path=${pathname}` : ``}`);
+      return <></>;
+    } else {
+      if (currentUser && !currentUser?.is_password_autoset && currentUserProfile?.id && isUserOnboard) {
+        const currentRedirectRoute = getWorkspaceRedirectionUrl();
+        router.push(currentRedirectRoute);
+        return <></>;
+      } else return <>{children}</>;
+    }
+  }
+
+  if (pageType === EPageTypes.AUTHENTICATED) {
+    if (currentUser?.id) {
+      if (currentUserProfile && currentUserProfile?.id && isUserOnboard) return <>{children}</>;
+      else {
+        router.push(`/onboarding`);
+        return <></>;
+      }
+    } else {
+      router.push(`/${pathname ? `?next_path=${pathname}` : ``}`);
+      return <></>;
+    }
+  }
+
+  return <>{children}</>;
+});
diff --git a/apps/web/core/lib/wrappers/instance-wrapper.tsx b/apps/web/core/lib/wrappers/instance-wrapper.tsx
new file mode 100644
index 0000000..c5beae4
--- /dev/null
+++ b/apps/web/core/lib/wrappers/instance-wrapper.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { InstanceNotReady, MaintenanceView } from "@/components/instance";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+
+type TInstanceWrapper = {
+  children: ReactNode;
+};
+
+const InstanceWrapper = observer(function InstanceWrapper(props: TInstanceWrapper) {
+  const { children } = props;
+  // store
+  const { isLoading, instance, error, fetchInstanceInfo } = useInstance();
+
+  const { isLoading: isInstanceSWRLoading, error: instanceSWRError } = useSWR(
+    "INSTANCE_INFORMATION",
+    async () => await fetchInstanceInfo(),
+    { revalidateOnFocus: false }
+  );
+
+  // loading state
+  if ((isLoading || isInstanceSWRLoading) && !instance)
+    return (
+      <div className="relative flex h-screen w-full items-center justify-center">
+        <LogoSpinner />
+      </div>
+    );
+
+  if (instanceSWRError) return <MaintenanceView />;
+
+  // something went wrong while in the request
+  if (error && error?.status === "error") return <>{children}</>;
+
+  // instance is not ready and setup is not done
+  if (instance?.is_setup_done === false) return <InstanceNotReady />;
+
+  return <>{children}</>;
+});
+
+export default InstanceWrapper;
diff --git a/apps/web/core/lib/wrappers/store-wrapper.tsx b/apps/web/core/lib/wrappers/store-wrapper.tsx
new file mode 100644
index 0000000..d75b439
--- /dev/null
+++ b/apps/web/core/lib/wrappers/store-wrapper.tsx
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { useTheme } from "next-themes";
+// helpers
+import { applyCustomTheme, clearCustomTheme } from "@plane/utils";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useRouterParams } from "@/hooks/store/use-router-params";
+import { useUserProfile } from "@/hooks/store/user";
+
+type TStoreWrapper = {
+  children: ReactNode;
+};
+
+function StoreWrapper(props: TStoreWrapper) {
+  const { children } = props;
+  // theme
+  const { setTheme } = useTheme();
+  // router
+  const params = useParams();
+  // store hooks
+  const { setQuery } = useRouterParams();
+  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
+  const { data: userProfile } = useUserProfile();
+  // Track if we've initialized theme from server (one-time only)
+  const hasInitializedThemeRef = useRef(false);
+  // Track current user to reset on logout/login
+  const currentUserIdRef = useRef<string | undefined>(undefined);
+  // Track previous theme to detect transitions from custom theme
+  const previousThemeRef = useRef<string | undefined>(undefined);
+
+  /**
+   * Sidebar collapsed fetching from local storage
+   */
+  useEffect(() => {
+    const localValue = localStorage && localStorage.getItem("app_sidebar_collapsed");
+    const localBoolValue = localValue ? (localValue === "true" ? true : false) : false;
+    if (localValue && sidebarCollapsed === undefined) toggleSidebar(localBoolValue);
+  }, [sidebarCollapsed, setTheme, toggleSidebar]);
+
+  /**
+   * Effect 1: Initial theme sync from server (one-time only)
+   *
+   * This effect runs ONCE per user session to load theme from server.
+   * After initial load, all theme changes are localStorage-driven (next-themes).
+   * This prevents a feedback loop where server updates trigger UI updates in a cycle.
+   */
+  useEffect(() => {
+    const userId = userProfile?.id;
+
+    // Reset initialization flag when user changes (logout/login)
+    // This handles both logout (userId becomes undefined) and login (userId changes)
+    if (userId !== currentUserIdRef.current) {
+      hasInitializedThemeRef.current = false;
+      previousThemeRef.current = undefined;
+      currentUserIdRef.current = userId;
+    }
+
+    // Only initialize theme from server on FIRST load for this user
+    if (!userProfile?.theme?.theme || hasInitializedThemeRef.current) {
+      return; // Skip if already initialized or no profile data
+    }
+
+    // Apply theme from server profile (one-time only)
+    setTheme(userProfile?.theme?.theme || "system");
+
+    // Mark as initialized - prevents future syncs from server
+    hasInitializedThemeRef.current = true;
+  }, [userProfile?.theme?.theme, setTheme]);
+
+  /**
+   * Effect 2: Custom theme CSS application (runs on every change)
+   *
+   * This effect applies or clears custom theme CSS variables whenever
+   * the theme changes. It runs independently of the initial sync effect.
+   */
+  useEffect(() => {
+    if (!userProfile?.theme?.theme) return;
+
+    const currentTheme = userProfile?.theme?.theme;
+    const previousTheme = previousThemeRef.current;
+    const themeData = userProfile?.theme;
+
+    // Apply custom theme if current theme is custom
+    if (currentTheme === "custom" && themeData.primary && themeData.background && themeData.darkPalette !== undefined) {
+      applyCustomTheme(themeData.primary, themeData.background, themeData.darkPalette ? "dark" : "light");
+    }
+    // Clear custom theme CSS when switching away from custom
+    else if (previousTheme === "custom" && currentTheme !== "custom") {
+      clearCustomTheme();
+      // No reload needed - let CSS cascade handle it naturally
+    }
+
+    // Update previous theme for next comparison
+    previousThemeRef.current = currentTheme;
+  }, [userProfile?.theme]);
+
+  useEffect(() => {
+    if (!params) return;
+    setQuery(params);
+  }, [params, setQuery]);
+
+  return <>{children}</>;
+}
+
+export default observer(StoreWrapper);
diff --git a/apps/web/core/services/ai.service.ts b/apps/web/core/services/ai.service.ts
new file mode 100644
index 0000000..c529ca3
--- /dev/null
+++ b/apps/web/core/services/ai.service.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import { API_BASE_URL } from "@plane/constants";
+import type { AI_EDITOR_TASKS } from "@plane/constants";
+// services
+import { APIService } from "@/services/api.service";
+// types
+// FIXME:
+// import { IGptResponse } from "@plane/types";
+// helpers
+
+export type TTaskPayload = {
+  casual_score?: number;
+  formal_score?: number;
+  task: AI_EDITOR_TASKS;
+  text_input: string;
+};
+
+export class AIService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createGptTask(workspaceSlug: string, data: { prompt: string; task: string }): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/ai-assistant/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async performEditorTask(
+    workspaceSlug: string,
+    data: TTaskPayload
+  ): Promise<{
+    response: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/rephrase-grammar/`, data)
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/analytics.service.ts b/apps/web/core/services/analytics.service.ts
new file mode 100644
index 0000000..4480d37
--- /dev/null
+++ b/apps/web/core/services/analytics.service.ts
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type {
+  IAnalyticsResponse,
+  TAnalyticsTabsBase,
+  TAnalyticsGraphsBase,
+  TAnalyticsFilterParams,
+} from "@plane/types";
+// services
+import { APIService } from "./api.service";
+
+export class AnalyticsService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getAdvanceAnalytics<T extends IAnalyticsResponse>(
+    workspaceSlug: string,
+    tab: TAnalyticsTabsBase,
+    params?: TAnalyticsFilterParams,
+    isPeekView?: boolean
+  ): Promise<T> {
+    return this.get(this.processUrl<TAnalyticsTabsBase>("advance-analytics", workspaceSlug, tab, params, isPeekView), {
+      params: {
+        tab,
+        ...params,
+      },
+    })
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getAdvanceAnalyticsStats<T>(
+    workspaceSlug: string,
+    tab: Exclude<TAnalyticsTabsBase, "overview">,
+    params?: TAnalyticsFilterParams,
+    isPeekView?: boolean
+  ): Promise<T> {
+    const processedUrl = this.processUrl<Exclude<TAnalyticsTabsBase, "overview">>(
+      "advance-analytics-stats",
+      workspaceSlug,
+      tab,
+      params,
+      isPeekView
+    );
+    return this.get(processedUrl, {
+      params: {
+        type: tab,
+        ...params,
+      },
+    })
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getAdvanceAnalyticsCharts<T>(
+    workspaceSlug: string,
+    tab: TAnalyticsGraphsBase,
+    params?: TAnalyticsFilterParams,
+    isPeekView?: boolean
+  ): Promise<T> {
+    const processedUrl = this.processUrl<TAnalyticsGraphsBase>(
+      "advance-analytics-charts",
+      workspaceSlug,
+      tab,
+      params,
+      isPeekView
+    );
+    return this.get(processedUrl, {
+      params: {
+        type: tab,
+        ...params,
+      },
+    })
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  processUrl<_T extends string>(
+    endpoint: string,
+    workspaceSlug: string,
+    tab: TAnalyticsGraphsBase | TAnalyticsTabsBase,
+    params?: TAnalyticsFilterParams,
+    isPeekView?: boolean
+  ) {
+    let processedUrl = `/api/workspaces/${workspaceSlug}`;
+    if (isPeekView && (tab === "work-items" || tab === "custom-work-items")) {
+      const projectIds = params?.project_ids;
+      if (typeof projectIds !== "string" || !projectIds.trim()) {
+        throw new Error("project_ids parameter is required for peek view of work items");
+      }
+      const projectId = projectIds.split(",")[0];
+      if (!projectId) {
+        throw new Error("Invalid project_ids format - no project ID found");
+      }
+      processedUrl += `/projects/${projectId}`;
+    }
+    return `${processedUrl}/${endpoint}`;
+  }
+}
diff --git a/apps/web/core/services/api.service.ts b/apps/web/core/services/api.service.ts
new file mode 100644
index 0000000..af0fa0f
--- /dev/null
+++ b/apps/web/core/services/api.service.ts
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { AxiosInstance, AxiosRequestConfig } from "axios";
+import { create } from "axios";
+import { normalizeAPIRequestURL } from "@plane/services";
+
+export abstract class APIService {
+  protected baseURL: string;
+  private axiosInstance: AxiosInstance;
+
+  constructor(baseURL: string) {
+    this.baseURL = baseURL;
+    this.axiosInstance = create({
+      baseURL,
+      withCredentials: true,
+    });
+
+    this.setupInterceptors();
+  }
+
+  private setupInterceptors() {
+    this.axiosInstance.interceptors.request.use((config) => {
+      try {
+        if (config.url) {
+          config.url = normalizeAPIRequestURL(config.url, this.baseURL);
+        }
+      } catch (error) {
+        // Never block a request because of slash normalization — fall back to the
+        // original URL and let the call proceed.
+        console.warn("[APIService] Failed to normalize trailing slash:", config.url, error);
+      }
+      return config;
+    });
+
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response && error.response.status === 401) {
+          const currentPath = window.location.pathname;
+          window.location.replace(`/${currentPath ? `?next_path=${currentPath}` : ``}`);
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  get(url: string, params = {}, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.get(url, {
+      ...params,
+      ...config,
+    });
+  }
+
+  post(url: string, data = {}, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.post(url, data, config);
+  }
+
+  put(url: string, data = {}, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.put(url, data, config);
+  }
+
+  patch(url: string, data = {}, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.patch(url, data, config);
+  }
+
+  delete(url: string, data?: any, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.delete(url, { data, ...config });
+  }
+
+  request(config = {}) {
+    return this.axiosInstance(config);
+  }
+}
diff --git a/apps/web/core/services/app_config.service.ts b/apps/web/core/services/app_config.service.ts
new file mode 100644
index 0000000..f7d75c7
--- /dev/null
+++ b/apps/web/core/services/app_config.service.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// services
+import { API_BASE_URL } from "@plane/constants";
+import { APIService } from "@/services/api.service";
+// helper
+// types
+// FIXME:
+// import { TAppConfig } from "@plane/types";
+
+export class AppConfigService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async envConfig(): Promise<any> {
+    return this.get("/api/configs/", {
+      headers: { "Content-Type": "application/json" },
+    })
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/app_installation.service.ts b/apps/web/core/services/app_installation.service.ts
new file mode 100644
index 0000000..d91600c
--- /dev/null
+++ b/apps/web/core/services/app_installation.service.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// services
+import { API_BASE_URL } from "@plane/constants";
+import { APIService } from "@/services/api.service";
+// helpers
+
+export class AppInstallationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async addInstallationApp(workspaceSlug: string, provider: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/workspace-integrations/${provider}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async addSlackChannel(
+    workspaceSlug: string,
+    projectId: string,
+    integrationId: string | null | undefined,
+    data: any
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getSlackChannelDetail(
+    workspaceSlug: string,
+    projectId: string,
+    integrationId: string | null | undefined
+  ): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async removeSlackChannel(
+    workspaceSlug: string,
+    projectId: string,
+    integrationId: string | null | undefined,
+    slackSyncId: string | undefined
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/project-slack-sync/${slackSyncId}`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/apps/web/core/services/auth.service.ts b/apps/web/core/services/auth.service.ts
new file mode 100644
index 0000000..c2aff17
--- /dev/null
+++ b/apps/web/core/services/auth.service.ts
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import { API_BASE_URL } from "@plane/constants";
+import type { ICsrfTokenData, IEmailCheckData, IEmailCheckResponse } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class AuthService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async requestCSRFToken(): Promise<ICsrfTokenData> {
+    return this.get("/auth/get-csrf-token/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  emailCheck = async (data: IEmailCheckData): Promise<IEmailCheckResponse> =>
+    this.post("/auth/email-check/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+
+  async sendResetPasswordLink(data: { email: string }): Promise<any> {
+    return this.post(`/auth/forgot-password/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async setPassword(token: string, data: { password: string }): Promise<any> {
+    return this.post(`/auth/set-password/`, data, {
+      headers: {
+        "X-CSRFTOKEN": token,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async generateUniqueCode(data: { email: string }): Promise<any> {
+    return this.post("/auth/magic-generate/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async signOut(baseUrl: string): Promise<any> {
+    await this.requestCSRFToken().then((data) => {
+      const csrfToken = data?.csrf_token;
+
+      if (!csrfToken) throw Error("CSRF token not found");
+
+      const form = document.createElement("form");
+      const element1 = document.createElement("input");
+
+      form.method = "POST";
+      form.action = `${baseUrl}/auth/sign-out/`;
+
+      element1.value = csrfToken;
+      element1.name = "csrfmiddlewaretoken";
+      element1.type = "hidden";
+      form.appendChild(element1);
+
+      document.body.appendChild(form);
+
+      form.submit();
+    });
+  }
+}
diff --git a/apps/web/core/services/cycle.service.ts b/apps/web/core/services/cycle.service.ts
new file mode 100644
index 0000000..75385ed
--- /dev/null
+++ b/apps/web/core/services/cycle.service.ts
@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// services
+import { API_BASE_URL } from "@plane/constants";
+import type {
+  CycleDateCheckData,
+  ICycle,
+  TIssuesResponse,
+  IWorkspaceActiveCyclesResponse,
+  TCycleDistribution,
+  TProgressSnapshot,
+  TCycleEstimateDistribution,
+} from "@plane/types";
+import { APIService } from "@/services/api.service";
+
+export class CycleService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async workspaceActiveCyclesAnalytics(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    analytic_type: string = "points"
+  ): Promise<TCycleDistribution | TCycleEstimateDistribution> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/analytics?type=${analytic_type}`
+    )
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async workspaceActiveCyclesProgress(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<TProgressSnapshot> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/progress/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async workspaceActiveCyclesProgressPro(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<TProgressSnapshot> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-progress/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async workspaceActiveCycles(
+    workspaceSlug: string,
+    cursor: string,
+    per_page: number
+  ): Promise<IWorkspaceActiveCyclesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/active-cycles/`, {
+      params: {
+        per_page,
+        cursor,
+      },
+    })
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getWorkspaceCycles(workspaceSlug: string): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/cycles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createCycle(workspaceSlug: string, projectId: string, data: any): Promise<ICycle> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCyclesWithParams(workspaceSlug: string, projectId: string, cycleType?: "current"): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, {
+      params: {
+        cycle_view: cycleType,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getCycleDetails(workspaceSlug: string, projectId: string, cycleId: string): Promise<ICycle> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getCycleIssues(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    queries?: any,
+    config = {}
+  ): Promise<TIssuesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
+      {
+        params: queries,
+      },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchCycle(workspaceSlug: string, projectId: string, cycleId: string, data: Partial<ICycle>): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteCycle(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async cycleDateCheck(workspaceSlug: string, projectId: string, data: CycleDateCheckData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/date-check/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addCycleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      cycle: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async transferIssues(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: {
+      new_cycle_id: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/transfer-issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeCycleFromFavorites(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/${cycleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/cycle_archive.service.ts b/apps/web/core/services/cycle_archive.service.ts
new file mode 100644
index 0000000..564747d
--- /dev/null
+++ b/apps/web/core/services/cycle_archive.service.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// type
+import { API_BASE_URL } from "@plane/constants";
+import type { ICycle } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class CycleArchiveService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getArchivedCycles(workspaceSlug: string, projectId: string): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-cycles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getArchivedCycleDetails(workspaceSlug: string, projectId: string, cycleId: string): Promise<ICycle> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-cycles/${cycleId}/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async archiveCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreCycle(workspaceSlug: string, projectId: string, cycleId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/dashboard.service.ts b/apps/web/core/services/dashboard.service.ts
new file mode 100644
index 0000000..a6ebc46
--- /dev/null
+++ b/apps/web/core/services/dashboard.service.ts
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { THomeDashboardResponse, TWidget, TWidgetStatsResponse, TWidgetStatsRequestParams } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// helpers
+// types
+
+export class DashboardService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getHomeDashboardWidgets(workspaceSlug: string): Promise<THomeDashboardResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/dashboard/`, {
+      params: {
+        dashboard_type: "home",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWidgetStats(
+    workspaceSlug: string,
+    dashboardId: string,
+    params: TWidgetStatsRequestParams
+  ): Promise<TWidgetStatsResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/dashboard/${dashboardId}/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getDashboardDetails(dashboardId: string): Promise<TWidgetStatsResponse> {
+    return this.get(`/api/dashboard/${dashboardId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateDashboardWidget(dashboardId: string, widgetId: string, data: Partial<TWidget>): Promise<TWidget> {
+    return this.patch(`/api/dashboard/${dashboardId}/widgets/${widgetId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/estimate.service.ts b/apps/web/core/services/estimate.service.ts
new file mode 100644
index 0000000..343d4b0
--- /dev/null
+++ b/apps/web/core/services/estimate.service.ts
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable no-useless-catch */
+
+// types
+import { API_BASE_URL } from "@plane/constants";
+import type { IEstimate, IEstimateFormData, IEstimatePoint } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class EstimateService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchWorkspaceEstimates(workspaceSlug: string): Promise<IEstimate[] | undefined> {
+    try {
+      const { data } = await this.get(`/api/workspaces/${workspaceSlug}/estimates/`);
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async fetchProjectEstimates(workspaceSlug: string, projectId: string): Promise<IEstimate[] | undefined> {
+    try {
+      const { data } = await this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`);
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async fetchEstimateById(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string
+  ): Promise<IEstimate | undefined> {
+    try {
+      const { data } = await this.get(
+        `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`
+      );
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async createEstimate(
+    workspaceSlug: string,
+    projectId: string,
+    payload: IEstimateFormData
+  ): Promise<IEstimate | undefined> {
+    try {
+      const { data } = await this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`, payload);
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async deleteEstimate(workspaceSlug: string, projectId: string, estimateId: string): Promise<void> {
+    try {
+      await this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`);
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async createEstimatePoint(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    payload: Partial<IEstimatePoint>
+  ): Promise<IEstimatePoint | undefined> {
+    try {
+      const { data } = await this.post(
+        `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/estimate-points/`,
+        payload
+      );
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async updateEstimatePoint(
+    workspaceSlug: string,
+    projectId: string,
+    estimateId: string,
+    estimatePointId: string,
+    payload: Partial<IEstimatePoint>
+  ): Promise<IEstimatePoint | undefined> {
+    try {
+      const { data } = await this.patch(
+        `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/estimate-points/${estimatePointId}/`,
+        payload
+      );
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+}
+const estimateService = new EstimateService();
+
+export default estimateService;
diff --git a/apps/web/core/services/favorite/favorite.service.ts b/apps/web/core/services/favorite/favorite.service.ts
new file mode 100644
index 0000000..6e8dd9f
--- /dev/null
+++ b/apps/web/core/services/favorite/favorite.service.ts
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IFavorite } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+// types
+
+export class FavoriteService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async addFavorite(workspaceSlug: string, data: Partial<IFavorite>): Promise<IFavorite> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-favorites/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateFavorite(workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>): Promise<IFavorite> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/user-favorites/${favoriteId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteFavorite(workspaceSlug: string, favoriteId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/user-favorites/${favoriteId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getFavorites(workspaceSlug: string): Promise<IFavorite[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-favorites/`, {
+      params: {
+        all: true,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getGroupedFavorites(workspaceSlug: string, favoriteId: string): Promise<IFavorite[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-favorites/${favoriteId}/group/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/favorite/index.ts b/apps/web/core/services/favorite/index.ts
new file mode 100644
index 0000000..a789ea3
--- /dev/null
+++ b/apps/web/core/services/favorite/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./favorite.service";
diff --git a/apps/web/core/services/file-upload.service.ts b/apps/web/core/services/file-upload.service.ts
new file mode 100644
index 0000000..f8f4939
--- /dev/null
+++ b/apps/web/core/services/file-upload.service.ts
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { AxiosRequestConfig } from "axios";
+import axios from "axios";
+// services
+import { APIService } from "@/services/api.service";
+
+export class FileUploadService extends APIService {
+  private cancelSource: any;
+
+  constructor() {
+    super("");
+  }
+
+  async uploadFile(
+    url: string,
+    data: FormData,
+    uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
+  ): Promise<void> {
+    this.cancelSource = axios.CancelToken.source();
+    return this.post(url, data, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      cancelToken: this.cancelSource.token,
+      withCredentials: false,
+      onUploadProgress: uploadProgressHandler,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        if (axios.isCancel(error)) {
+          console.log(error.message);
+        } else {
+          throw error?.response?.data;
+        }
+      });
+  }
+
+  cancelUpload() {
+    this.cancelSource.cancel("Upload canceled");
+  }
+}
diff --git a/apps/web/core/services/file.service.ts b/apps/web/core/services/file.service.ts
new file mode 100644
index 0000000..6e252d7
--- /dev/null
+++ b/apps/web/core/services/file.service.ts
@@ -0,0 +1,299 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { AxiosRequestConfig } from "axios";
+// plane types
+import { API_BASE_URL } from "@plane/constants";
+import { getFileMetaDataForUpload, generateFileUploadPayload } from "@plane/services";
+import type { EFileAssetType, TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
+import { getAssetIdFromUrl } from "@plane/utils";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+import { FileUploadService } from "@/services/file-upload.service";
+
+export interface UnSplashImage {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  promoted_at: Date;
+  width: number;
+  height: number;
+  color: string;
+  blur_hash: string;
+  description: null;
+  alt_description: string;
+  urls: UnSplashImageUrls;
+  [key: string]: any;
+}
+
+export interface UnSplashImageUrls {
+  raw: string;
+  full: string;
+  regular: string;
+  small: string;
+  thumb: string;
+  small_s3: string;
+}
+
+export enum TFileAssetType {
+  COMMENT_DESCRIPTION = "COMMENT_DESCRIPTION",
+  ISSUE_ATTACHMENT = "ISSUE_ATTACHMENT",
+  ISSUE_DESCRIPTION = "ISSUE_DESCRIPTION",
+  PAGE_DESCRIPTION = "PAGE_DESCRIPTION",
+  PROJECT_COVER = "PROJECT_COVER",
+  USER_AVATAR = "USER_AVATAR",
+  USER_COVER = "USER_COVER",
+  WORKSPACE_LOGO = "WORKSPACE_LOGO",
+}
+
+export class FileService extends APIService {
+  private cancelSource: any;
+  private fileUploadService: FileUploadService;
+
+  constructor() {
+    super(API_BASE_URL);
+    this.cancelUpload = this.cancelUpload.bind(this);
+    // upload service
+    this.fileUploadService = new FileUploadService();
+  }
+
+  private async updateWorkspaceAssetUploadStatus(workspaceSlug: string, assetId: string): Promise<void> {
+    return this.patch(`/api/assets/v2/workspaces/${workspaceSlug}/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async uploadWorkspaceAsset(
+    workspaceSlug: string,
+    data: TFileEntityInfo,
+    file: File,
+    uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
+  ): Promise<TFileSignedURLResponse> {
+    const fileMetaData = await getFileMetaDataForUpload(file);
+    return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/`, {
+      ...data,
+      ...fileMetaData,
+    })
+      .then(async (response) => {
+        const signedURLResponse: TFileSignedURLResponse = response?.data;
+        const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
+        await this.fileUploadService.uploadFile(
+          signedURLResponse.upload_data.url,
+          fileUploadPayload,
+          uploadProgressHandler
+        );
+        await this.updateWorkspaceAssetUploadStatus(workspaceSlug.toString(), signedURLResponse.asset_id);
+        return signedURLResponse;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceAsset(workspaceSlug: string, assetId: string): Promise<void> {
+    return this.delete(`/api/assets/v2/workspaces/${workspaceSlug}/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  private async updateProjectAssetUploadStatus(
+    workspaceSlug: string,
+    projectId: string,
+    assetId: string
+  ): Promise<void> {
+    return this.patch(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateBulkWorkspaceAssetsUploadStatus(
+    workspaceSlug: string,
+    entityId: string,
+    data: {
+      asset_ids: string[];
+    }
+  ): Promise<void> {
+    return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/${entityId}/bulk/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateBulkProjectAssetsUploadStatus(
+    workspaceSlug: string,
+    projectId: string,
+    entityId: string,
+    data: {
+      asset_ids: string[];
+    }
+  ): Promise<void> {
+    return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${entityId}/bulk/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async uploadProjectAsset(
+    workspaceSlug: string,
+    projectId: string,
+    data: TFileEntityInfo,
+    file: File,
+    uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
+  ): Promise<TFileSignedURLResponse> {
+    const fileMetaData = await getFileMetaDataForUpload(file);
+    return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/`, {
+      ...data,
+      ...fileMetaData,
+    })
+      .then(async (response) => {
+        const signedURLResponse: TFileSignedURLResponse = response?.data;
+        const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
+        await this.fileUploadService.uploadFile(
+          signedURLResponse.upload_data.url,
+          fileUploadPayload,
+          uploadProgressHandler
+        );
+        await this.updateProjectAssetUploadStatus(workspaceSlug, projectId, signedURLResponse.asset_id);
+        return signedURLResponse;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  private async updateUserAssetUploadStatus(assetId: string): Promise<void> {
+    return this.patch(`/api/assets/v2/user-assets/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async uploadUserAsset(data: TFileEntityInfo, file: File): Promise<TFileSignedURLResponse> {
+    const fileMetaData = await getFileMetaDataForUpload(file);
+    return this.post(`/api/assets/v2/user-assets/`, {
+      ...data,
+      ...fileMetaData,
+    })
+      .then(async (response) => {
+        const signedURLResponse: TFileSignedURLResponse = response?.data;
+        const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
+        await this.fileUploadService.uploadFile(signedURLResponse.upload_data.url, fileUploadPayload);
+        await this.updateUserAssetUploadStatus(signedURLResponse.asset_id);
+        return signedURLResponse;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteUserAsset(assetId: string): Promise<void> {
+    return this.delete(`/api/assets/v2/user-assets/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteNewAsset(assetPath: string): Promise<void> {
+    return this.delete(assetPath)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteOldWorkspaceAsset(workspaceId: string, src: string): Promise<any> {
+    const assetKey = getAssetIdFromUrl(src);
+    return this.delete(`/api/workspaces/file-assets/${workspaceId}/${assetKey}/`)
+      .then((response) => response?.status)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteOldUserAsset(src: string): Promise<any> {
+    const assetKey = getAssetIdFromUrl(src);
+    return this.delete(`/api/users/file-assets/${assetKey}/`)
+      .then((response) => response?.status)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreNewAsset(workspaceSlug: string, src: string): Promise<void> {
+    // remove the last slash and get the asset id
+    const assetId = getAssetIdFromUrl(src);
+    return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/restore/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async checkIfAssetExists(
+    workspaceSlug: string,
+    assetId: string
+  ): Promise<{
+    exists: boolean;
+  }> {
+    return this.get(`/api/assets/v2/workspaces/${workspaceSlug}/check/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreOldEditorAsset(workspaceId: string, src: string): Promise<void> {
+    const assetKey = getAssetIdFromUrl(src);
+    return this.post(`/api/workspaces/file-assets/${workspaceId}/${assetKey}/restore/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  cancelUpload() {
+    this.cancelSource.cancel("Upload canceled");
+  }
+
+  async getUnsplashImages(query?: string): Promise<UnSplashImage[]> {
+    return this.get(`/api/unsplash/`, {
+      params: {
+        query,
+      },
+    })
+      .then((res) => res?.data?.results ?? res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async duplicateAsset(
+    workspaceSlug: string,
+    assetId: string,
+    data: {
+      entity_id?: string;
+      entity_type: EFileAssetType;
+      project_id?: string;
+    }
+  ): Promise<{ asset_id: string }> {
+    return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/duplicate-assets/${assetId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/inbox/inbox-issue.service.ts b/apps/web/core/services/inbox/inbox-issue.service.ts
new file mode 100644
index 0000000..af0b4de
--- /dev/null
+++ b/apps/web/core/services/inbox/inbox-issue.service.ts
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type { TInboxIssue, TIssue, TInboxIssueWithPagination } from "@plane/types";
+import { EInboxIssueSource } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class InboxIssueService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async list(workspaceSlug: string, projectId: string, params = {}): Promise<TInboxIssueWithPagination> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieve(workspaceSlug: string, projectId: string, inboxIssueId: string): Promise<TInboxIssue> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/${inboxIssueId}/?expand=issue_inbox`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async create(workspaceSlug: string, projectId: string, data: Partial<TIssue>): Promise<TInboxIssue> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/`, {
+      source: EInboxIssueSource.IN_APP,
+      issue: data,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async update(
+    workspaceSlug: string,
+    projectId: string,
+    inboxIssueId: string,
+    data: Partial<TInboxIssue>
+  ): Promise<TInboxIssue> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/${inboxIssueId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateIssue(
+    workspaceSlug: string,
+    projectId: string,
+    inboxIssueId: string,
+    data: Partial<TIssue>
+  ): Promise<TInboxIssue> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/${inboxIssueId}/`, {
+      issue: data,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async destroy(workspaceSlug: string, projectId: string, inboxIssueId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/${inboxIssueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/inbox/index.ts b/apps/web/core/services/inbox/index.ts
new file mode 100644
index 0000000..03fb811
--- /dev/null
+++ b/apps/web/core/services/inbox/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./inbox-issue.service";
+export * from "./intake-work_item_version.service";
diff --git a/apps/web/core/services/inbox/intake-work_item_version.service.ts b/apps/web/core/services/inbox/intake-work_item_version.service.ts
new file mode 100644
index 0000000..5d821db
--- /dev/null
+++ b/apps/web/core/services/inbox/intake-work_item_version.service.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type { TDescriptionVersionsListResponse, TDescriptionVersionDetails } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class IntakeWorkItemVersionService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async listDescriptionVersions(
+    workspaceSlug: string,
+    projectId: string,
+    intakeWorkItemId: string
+  ): Promise<TDescriptionVersionsListResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/intake-work-items/${intakeWorkItemId}/description-versions/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieveDescriptionVersion(
+    workspaceSlug: string,
+    projectId: string,
+    intakeWorkItemId: string,
+    versionId: string
+  ): Promise<TDescriptionVersionDetails> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/intake-work-items/${intakeWorkItemId}/description-versions/${versionId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/instance.service.ts b/apps/web/core/services/instance.service.ts
new file mode 100644
index 0000000..875401d
--- /dev/null
+++ b/apps/web/core/services/instance.service.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import { API_BASE_URL } from "@plane/constants";
+import type { IInstanceInfo } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class InstanceService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async requestCSRFToken(): Promise<{ csrf_token: string }> {
+    return this.get("/auth/get-csrf-token/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  async getInstanceInfo(): Promise<IInstanceInfo> {
+    return this.get("/api/instances/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+}
diff --git a/apps/web/core/services/integrations/github.service.ts b/apps/web/core/services/integrations/github.service.ts
new file mode 100644
index 0000000..5992ffa
--- /dev/null
+++ b/apps/web/core/services/integrations/github.service.ts
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IGithubRepoInfo, IGithubServiceImportFormData } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// helpers
+// types
+
+const integrationServiceType: string = "github";
+
+export class GithubIntegrationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async listAllRepositories(workspaceSlug: string, integrationSlug: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationSlug}/github-repositories`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getGithubRepoInfo(workspaceSlug: string, params: { owner: string; repo: string }): Promise<IGithubRepoInfo> {
+    return this.get(`/api/workspaces/${workspaceSlug}/importers/${integrationServiceType}/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createGithubServiceImport(workspaceSlug: string, data: IGithubServiceImportFormData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/importers/${integrationServiceType}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/integrations/index.ts b/apps/web/core/services/integrations/index.ts
new file mode 100644
index 0000000..595441e
--- /dev/null
+++ b/apps/web/core/services/integrations/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./github.service";
+export * from "./integration.service";
+export * from "./jira.service";
diff --git a/apps/web/core/services/integrations/integration.service.ts b/apps/web/core/services/integrations/integration.service.ts
new file mode 100644
index 0000000..e158ef3
--- /dev/null
+++ b/apps/web/core/services/integrations/integration.service.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IAppIntegration, IImporterService, IWorkspaceIntegration, IExportServiceResponse } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// types
+// helper
+
+export class IntegrationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getAppIntegrationsList(): Promise<IAppIntegration[]> {
+    return this.get(`/api/integrations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspaceIntegrationsList(workspaceSlug: string): Promise<IWorkspaceIntegration[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-integrations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceIntegration(workspaceSlug: string, integrationId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationId}/provider/`)
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getImporterServicesList(workspaceSlug: string): Promise<IImporterService[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/importers/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async getExportsServicesList(
+    workspaceSlug: string,
+    cursor: string,
+    per_page: number
+  ): Promise<IExportServiceResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/export-issues`, {
+      params: {
+        per_page,
+        cursor,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteImporterService(workspaceSlug: string, service: string, importerId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/importers/${service}/${importerId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/integrations/jira.service.ts b/apps/web/core/services/integrations/jira.service.ts
new file mode 100644
index 0000000..cbc3e36
--- /dev/null
+++ b/apps/web/core/services/integrations/jira.service.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IJiraMetadata, IJiraResponse, IJiraImporterForm } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// types
+
+export class JiraImporterService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getJiraProjectInfo(workspaceSlug: string, params: IJiraMetadata): Promise<IJiraResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/importers/jira`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createJiraImporter(workspaceSlug: string, data: IJiraImporterForm): Promise<IJiraResponse> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/importers/jira/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/index.ts b/apps/web/core/services/issue/index.ts
new file mode 100644
index 0000000..3b3525e
--- /dev/null
+++ b/apps/web/core/services/issue/index.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./issue_archive.service";
+export * from "./issue.service";
+export * from "./issue_reaction.service";
+export * from "./issue_label.service";
+export * from "./issue_attachment.service";
+export * from "./issue_activity.service";
+export * from "./issue_comment.service";
+export * from "./issue_relation.service";
+export * from "./work_item_version.service";
+export * from "./workspace_draft.service";
diff --git a/apps/web/core/services/issue/issue.service.ts b/apps/web/core/services/issue/issue.service.ts
new file mode 100644
index 0000000..f80ed38
--- /dev/null
+++ b/apps/web/core/services/issue/issue.service.ts
@@ -0,0 +1,459 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { EIssueServiceType } from "@plane/types";
+import type {
+  TIssueParams,
+  IIssueDisplayProperties,
+  TBulkOperationsPayload,
+  TIssue,
+  TIssueActivity,
+  TIssueLink,
+  TIssueServiceType,
+  TIssuesResponse,
+  TIssueSubIssues,
+} from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+
+export class IssueService extends APIService {
+  private serviceType: TIssueServiceType;
+
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
+    super(API_BASE_URL);
+    this.serviceType = serviceType;
+  }
+
+  async createIssue(workspaceSlug: string, projectId: string, data: Partial<TIssue>): Promise<TIssue> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssuesFromServer(
+    workspaceSlug: string,
+    projectId: string,
+    queries?: any,
+    config = {}
+  ): Promise<TIssuesResponse> {
+    const path =
+      (queries.expand as string)?.includes("issue_relation") && !queries.group_by
+        ? `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}-detail/`
+        : `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/`;
+    return this.get(
+      path,
+      {
+        params: queries,
+      },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssuesForSync(
+    workspaceSlug: string,
+    projectId: string,
+    queries?: any,
+    config = {}
+  ): Promise<TIssuesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/v2/${this.serviceType}/`,
+      { params: queries },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssues(
+    workspaceSlug: string,
+    projectId: string,
+    queries?: Partial<Record<TIssueParams, string | boolean>>,
+    config = {}
+  ): Promise<TIssuesResponse> {
+    return this.getIssuesFromServer(workspaceSlug, projectId, queries, config);
+  }
+
+  async getDeletedIssues(workspaceSlug: string, projectId: string, queries?: any): Promise<TIssuesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/deleted-issues/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssuesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    queries?: any
+  ): Promise<TIssue[] | { [key: string]: TIssue[] }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieve(workspaceSlug: string, projectId: string, issueId: string, queries?: any): Promise<TIssue> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/`, {
+      params: queries,
+    })
+      .then(async (response) => {
+        // add is_epic flag when the service type is epic
+        if (response.data && this.serviceType === EIssueServiceType.EPICS) {
+          response.data.is_epic = true;
+        }
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieveIssues(workspaceSlug: string, projectId: string, issueIds: string[]): Promise<TIssue[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/list/`, {
+      params: { issues: issueIds.join(",") },
+    })
+      .then(async (response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueActivities(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueActivity[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/history/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addIssueToCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: {
+      issues: string[];
+    }
+  ) {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeIssueFromCycle(workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/${bridgeId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueRelation(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: {
+      related_list: Array<{
+        relation_type: "duplicate" | "relates_to" | "blocked_by";
+        related_issue: string;
+      }>;
+      relation?: "blocking" | null;
+    }
+  ) {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/issue-relation/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueRelation(workspaceSlug: string, projectId: string, issueId: string, relationId: string) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/issue-relation/${relationId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getIssueDisplayProperties(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-display-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateIssueDisplayProperties(
+    workspaceSlug: string,
+    projectId: string,
+    data: IIssueDisplayProperties
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-display-properties/`, {
+      properties: data,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssue(workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issuesId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateIssueDates(
+    workspaceSlug: string,
+    projectId: string,
+    updates: { id: string; start_date?: string; target_date?: string }[]
+  ): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-dates/`, { updates })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async subIssues(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    queries?: Partial<Record<TIssueParams, string | boolean>>
+  ): Promise<TIssueSubIssues> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/${this.serviceType === EIssueServiceType.EPICS ? "issues" : "sub-issues"}/`,
+      { params: queries }
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addSubIssues(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { sub_issue_ids: string[] }
+  ): Promise<TIssueSubIssues> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/${this.serviceType === EIssueServiceType.EPICS ? "issues" : "sub-issues"}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchIssueLinks(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueLink[]> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/${this.serviceType === EIssueServiceType.EPICS ? "links" : "issue-links"}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueLink(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssueLink>
+  ): Promise<TIssueLink> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/${this.serviceType === EIssueServiceType.EPICS ? "links" : "issue-links"}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateIssueLink(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    linkId: string,
+    data: Partial<TIssueLink>
+  ): Promise<TIssueLink> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/${this.serviceType === EIssueServiceType.EPICS ? "links" : "issue-links"}/${linkId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueLink(workspaceSlug: string, projectId: string, issueId: string, linkId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/${this.serviceType === EIssueServiceType.EPICS ? "links" : "issue-links"}/${linkId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkOperations(workspaceSlug: string, projectId: string, data: TBulkOperationsPayload): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-operation-issues/`, data)
+      .then(async (response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkDeleteIssues(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      issue_ids: string[];
+    }
+  ): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`, data)
+      .then(async (response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkArchiveIssues(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      issue_ids: string[];
+    }
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-archive-issues/`, data)
+      .then(async (response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  // issue subscriptions
+  async getIssueNotificationSubscriptionStatus(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ): Promise<{
+    subscribed: boolean;
+  }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/subscribe/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async unsubscribeFromIssueNotifications(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/subscribe/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async subscribeToIssueNotifications(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/subscribe/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkSubscribeIssues(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      issue_ids: string[];
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-subscribe-issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueMetaFromURL(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ): Promise<{
+    project_identifier: string;
+    sequence_id: string;
+  }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/meta/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieveWithIdentifier(
+    workspaceSlug: string,
+    project_identifier: string,
+    issue_sequence: string,
+    queries?: any
+  ): Promise<TIssue> {
+    return this.get(`/api/workspaces/${workspaceSlug}/work-items/${project_identifier}-${issue_sequence}/`, {
+      params: queries,
+    })
+      .then(async (response) => {
+        // add is_epic flag when the service type is epic
+        if (response.data && this.serviceType === EIssueServiceType.EPICS) {
+          response.data.is_epic = true;
+        }
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/issue_activity.service.ts b/apps/web/core/services/issue/issue_activity.service.ts
new file mode 100644
index 0000000..61102f8
--- /dev/null
+++ b/apps/web/core/services/issue/issue_activity.service.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { TIssueActivity, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// types
+// helper
+
+export class IssueActivityService extends APIService {
+  private serviceType: TIssueServiceType;
+
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
+    super(API_BASE_URL);
+    this.serviceType = serviceType;
+  }
+
+  async getIssueActivities(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    params:
+      | {
+          created_at__gt: string;
+        }
+      | object = {}
+  ): Promise<TIssueActivity[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/history/`, {
+      params: {
+        activity_type: `${this.serviceType === EIssueServiceType.EPICS ? "epic-property" : "issue-property"}`,
+        ...params,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/issue_archive.service.ts b/apps/web/core/services/issue/issue_archive.service.ts
new file mode 100644
index 0000000..0ebf5ab
--- /dev/null
+++ b/apps/web/core/services/issue/issue_archive.service.ts
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { TIssue, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// types
+// constants
+
+export class IssueArchiveService extends APIService {
+  private serviceType: TIssueServiceType;
+
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
+    super(API_BASE_URL);
+    this.serviceType = serviceType;
+  }
+
+  async getArchivedIssues(workspaceSlug: string, projectId: string, queries?: any, config = {}): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/`,
+      {
+        params: { ...queries },
+      },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async archiveIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieveArchivedIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    queries?: any
+  ): Promise<TIssue> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/archive/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/issue_attachment.service.ts b/apps/web/core/services/issue/issue_attachment.service.ts
new file mode 100644
index 0000000..98660ae
--- /dev/null
+++ b/apps/web/core/services/issue/issue_attachment.service.ts
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { AxiosRequestConfig } from "axios";
+import { API_BASE_URL } from "@plane/constants";
+// plane types
+import { getFileMetaDataForUpload, generateFileUploadPayload } from "@plane/services";
+import type { TIssueAttachment, TIssueAttachmentUploadResponse, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+import { FileUploadService } from "@/services/file-upload.service";
+
+export class IssueAttachmentService extends APIService {
+  private fileUploadService: FileUploadService;
+  private serviceType: TIssueServiceType;
+
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
+    super(API_BASE_URL);
+    // upload service
+    this.fileUploadService = new FileUploadService();
+    this.serviceType = serviceType;
+  }
+
+  private async updateIssueAttachmentUploadStatus(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    attachmentId: string
+  ): Promise<void> {
+    return this.patch(
+      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/attachments/${attachmentId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async uploadIssueAttachment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    file: File,
+    uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
+  ): Promise<TIssueAttachment> {
+    const fileMetaData = await getFileMetaDataForUpload(file);
+    return this.post(
+      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/attachments/`,
+      fileMetaData
+    )
+      .then(async (response) => {
+        const signedURLResponse: TIssueAttachmentUploadResponse = response?.data;
+        const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
+        await this.fileUploadService.uploadFile(
+          signedURLResponse.upload_data.url,
+          fileUploadPayload,
+          uploadProgressHandler
+        );
+        await this.updateIssueAttachmentUploadStatus(workspaceSlug, projectId, issueId, signedURLResponse.asset_id);
+        return signedURLResponse.attachment;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueAttachments(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueAttachment[]> {
+    return this.get(
+      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/attachments/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueAttachment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    assetId: string
+  ): Promise<TIssueAttachment> {
+    return this.delete(
+      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/attachments/${assetId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/issue_comment.service.ts b/apps/web/core/services/issue/issue_comment.service.ts
new file mode 100644
index 0000000..873c8a1
--- /dev/null
+++ b/apps/web/core/services/issue/issue_comment.service.ts
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane types
+import { API_BASE_URL } from "@plane/constants";
+import type { TIssueComment, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+import { FileUploadService } from "@/services/file-upload.service";
+
+export class IssueCommentService extends APIService {
+  private fileUploadService: FileUploadService;
+  private serviceType: TIssueServiceType;
+
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
+    super(API_BASE_URL);
+    // upload service
+    this.fileUploadService = new FileUploadService();
+    this.serviceType = serviceType;
+  }
+
+  async getIssueComments(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    params:
+      | {
+          created_at__gt: string;
+        }
+      | object = {}
+  ): Promise<TIssueComment[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/history/`, {
+      params: {
+        activity_type: `${this.serviceType === EIssueServiceType.EPICS ? "epic-comment" : "issue-comment"}`,
+        ...params,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssueComment>
+  ): Promise<TIssueComment> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/comments/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: Partial<TIssueComment>
+  ): Promise<TIssueComment> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/comments/${commentId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string
+  ): Promise<void> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/comments/${commentId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/issue_label.service.ts b/apps/web/core/services/issue/issue_label.service.ts
new file mode 100644
index 0000000..d07fcd7
--- /dev/null
+++ b/apps/web/core/services/issue/issue_label.service.ts
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IIssueLabel } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+// types
+
+export class IssueLabelService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getWorkspaceIssueLabels(workspaceSlug: string): Promise<IIssueLabel[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/labels/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjectLabels(workspaceSlug: string, projectId: string): Promise<IIssueLabel[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueLabel(workspaceSlug: string, projectId: string, data: any): Promise<IIssueLabel> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueLabel(workspaceSlug: string, projectId: string, labelId: string, data: any): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueLabel(workspaceSlug: string, projectId: string, labelId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/issue_reaction.service.ts b/apps/web/core/services/issue/issue_reaction.service.ts
new file mode 100644
index 0000000..5136310
--- /dev/null
+++ b/apps/web/core/services/issue/issue_reaction.service.ts
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import { EIssueServiceType } from "@plane/types";
+import type { TIssueCommentReaction, TIssueReaction, TIssueServiceType } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+// types
+
+export class IssueReactionService extends APIService {
+  private serviceType: TIssueServiceType;
+
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
+    super(API_BASE_URL);
+    this.serviceType = serviceType;
+  }
+
+  async createIssueReaction(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssueReaction>
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/reactions/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async listIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueReaction[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/reactions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueReaction(workspaceSlug: string, projectId: string, issueId: string, reaction: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/reactions/${reaction}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueCommentReaction(
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    data: Partial<TIssueCommentReaction>
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async listIssueCommentReactions(
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string
+  ): Promise<TIssueCommentReaction[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueCommentReaction(
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    reaction: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/${reaction}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/issue_relation.service.ts b/apps/web/core/services/issue/issue_relation.service.ts
new file mode 100644
index 0000000..0cd128f
--- /dev/null
+++ b/apps/web/core/services/issue/issue_relation.service.ts
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { TIssueRelation, TIssue, TIssueRelationTypes } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+
+export class IssueRelationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async listIssueRelations(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueRelation> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueRelations(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { relation_type: TIssueRelationTypes; issues: string[] }
+  ): Promise<TIssue[]> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueRelation(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { relation_type: TIssueRelationTypes; related_issue: string }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/remove-relation/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/work_item_version.service.ts b/apps/web/core/services/issue/work_item_version.service.ts
new file mode 100644
index 0000000..d36cb52
--- /dev/null
+++ b/apps/web/core/services/issue/work_item_version.service.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { EIssueServiceType } from "@plane/types";
+import type { TDescriptionVersionsListResponse, TDescriptionVersionDetails, TIssueServiceType } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class WorkItemVersionService extends APIService {
+  private serviceType: TIssueServiceType;
+
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.WORK_ITEMS) {
+    super(API_BASE_URL);
+    this.serviceType = serviceType;
+  }
+
+  async listDescriptionVersions(
+    workspaceSlug: string,
+    projectId: string,
+    workItemId: string
+  ): Promise<TDescriptionVersionsListResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${workItemId}/description-versions/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieveDescriptionVersion(
+    workspaceSlug: string,
+    projectId: string,
+    workItemId: string,
+    versionId: string
+  ): Promise<TDescriptionVersionDetails> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${workItemId}/description-versions/${versionId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/issue/workspace_draft.service.ts b/apps/web/core/services/issue/workspace_draft.service.ts
new file mode 100644
index 0000000..f66841e
--- /dev/null
+++ b/apps/web/core/services/issue/workspace_draft.service.ts
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { TIssue, TWorkspaceDraftIssue, TWorkspaceDraftPaginationInfo } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class WorkspaceDraftService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getIssues(
+    workspaceSlug: string,
+    query: object = {}
+  ): Promise<TWorkspaceDraftPaginationInfo<TWorkspaceDraftIssue> | undefined> {
+    return this.get(`/api/workspaces/${workspaceSlug}/draft-issues/`, { params: { ...query } })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueById(workspaceSlug: string, issueId: string): Promise<TWorkspaceDraftIssue | undefined> {
+    return this.get(`/api/workspaces/${workspaceSlug}/draft-issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssue(
+    workspaceSlug: string,
+    payload: Partial<TWorkspaceDraftIssue | TIssue>
+  ): Promise<TWorkspaceDraftIssue | undefined> {
+    return this.post(`/api/workspaces/${workspaceSlug}/draft-issues/`, payload)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateIssue(
+    workspaceSlug: string,
+    issueId: string,
+    payload: Partial<TWorkspaceDraftIssue | TIssue>
+  ): Promise<TWorkspaceDraftIssue | undefined> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/draft-issues/${issueId}/`, payload)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssue(workspaceSlug: string, issueId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/draft-issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async moveIssue(workspaceSlug: string, issueId: string, payload: Partial<TWorkspaceDraftIssue>): Promise<TIssue> {
+    return this.post(`/api/workspaces/${workspaceSlug}/draft-to-issue/${issueId}/`, payload)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
+
+const workspaceDraftService = new WorkspaceDraftService();
+
+export default workspaceDraftService;
diff --git a/apps/web/core/services/issue_filter.service.ts b/apps/web/core/services/issue_filter.service.ts
new file mode 100644
index 0000000..ac3f8fb
--- /dev/null
+++ b/apps/web/core/services/issue_filter.service.ts
@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// services
+import { API_BASE_URL } from "@plane/constants";
+import type { IIssueFiltersResponse } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// types
+
+export class IssueFiltersService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  // // workspace issue filters
+  // async fetchWorkspaceFilters(workspaceSlug: string): Promise<IIssueFiltersResponse> {
+  //   return this.get(`/api/workspaces/${workspaceSlug}/user-properties/`)
+  //     .then((response) => response?.data)
+  //     .catch((error) => {
+  //       throw error?.response?.data;
+  //     });
+  // }
+  // async patchWorkspaceFilters(
+  //   workspaceSlug: string,
+  //   data: Partial<IIssueFiltersResponse>
+  // ): Promise<IIssueFiltersResponse> {
+  //   return this.patch(`/api/workspaces/${workspaceSlug}/user-properties/`, data)
+  //     .then((response) => response?.data)
+  //     .catch((error) => {
+  //       throw error?.response?.data;
+  //     });
+  // }
+
+  // epic issue filters
+  async fetchProjectEpicFilters(workspaceSlug: string, projectId: string): Promise<IIssueFiltersResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/epics-user-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async patchProjectEpicFilters(
+    workspaceSlug: string,
+    projectId: string,
+    data: Partial<IIssueFiltersResponse>
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/epics-user-properties/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  // cycle issue filters
+  async fetchCycleIssueFilters(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<IIssueFiltersResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/user-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async patchCycleIssueFilters(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: Partial<IIssueFiltersResponse>
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/user-properties/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  // module issue filters
+  async fetchModuleIssueFilters(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string
+  ): Promise<IIssueFiltersResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/user-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async patchModuleIssueFilters(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<IIssueFiltersResponse>
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/user-properties/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/module.service.ts b/apps/web/core/services/module.service.ts
new file mode 100644
index 0000000..8546ef0
--- /dev/null
+++ b/apps/web/core/services/module.service.ts
@@ -0,0 +1,224 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import { API_BASE_URL } from "@plane/constants";
+import type { IModule, ILinkDetails, ModuleLink, TIssuesResponse } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+
+export class ModuleService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getWorkspaceModules(workspaceSlug: string): Promise<IModule[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/modules/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModules(workspaceSlug: string, projectId: string): Promise<IModule[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createModule(workspaceSlug: string, projectId: string, data: any): Promise<IModule> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateModule(workspaceSlug: string, projectId: string, moduleId: string, data: any): Promise<any> {
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleDetails(workspaceSlug: string, projectId: string, moduleId: string): Promise<IModule> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<IModule>
+  ): Promise<IModule> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteModule(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleIssues(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    queries?: any,
+    config = {}
+  ): Promise<TIssuesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/`,
+      {
+        params: queries,
+      },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addIssuesToModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: { issues: string[] }
+  ): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addModulesToIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { modules: string[]; removed_modules?: string[] }
+  ): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/modules/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeIssuesFromModuleBulk(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    issueIds: string[]
+  ): Promise<void> {
+    const promiseDataUrls: any = [];
+    issueIds.forEach((issueId) => {
+      promiseDataUrls.push(
+        this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/${issueId}/`)
+      );
+    });
+    await Promise.all(promiseDataUrls)
+      .then((response) => response)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeModulesFromIssueBulk(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    moduleIds: string[]
+  ): Promise<void> {
+    const promiseDataUrls: any = [];
+    moduleIds.forEach((moduleId) => {
+      promiseDataUrls.push(
+        this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/${issueId}/`)
+      );
+    });
+    await Promise.all(promiseDataUrls)
+      .then((response) => response)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createModuleLink(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<ModuleLink>
+  ): Promise<ILinkDetails> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateModuleLink(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    linkId: string,
+    data: Partial<ModuleLink>
+  ): Promise<ILinkDetails> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/${linkId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteModuleLink(workspaceSlug: string, projectId: string, moduleId: string, linkId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/${linkId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addModuleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      module: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeModuleFromFavorites(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/module_archive.service.ts b/apps/web/core/services/module_archive.service.ts
new file mode 100644
index 0000000..be90746
--- /dev/null
+++ b/apps/web/core/services/module_archive.service.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// type
+import { API_BASE_URL } from "@plane/constants";
+import type { IModule } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class ModuleArchiveService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getArchivedModules(workspaceSlug: string, projectId: string): Promise<IModule[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-modules/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getArchivedModuleDetails(workspaceSlug: string, projectId: string, moduleId: string): Promise<IModule> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async archiveModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreModule(workspaceSlug: string, projectId: string, moduleId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/page/index.ts b/apps/web/core/services/page/index.ts
new file mode 100644
index 0000000..cd5daae
--- /dev/null
+++ b/apps/web/core/services/page/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./project-page-version.service";
+export * from "./project-page.service";
diff --git a/apps/web/core/services/page/project-page-version.service.ts b/apps/web/core/services/page/project-page-version.service.ts
new file mode 100644
index 0000000..452014b
--- /dev/null
+++ b/apps/web/core/services/page/project-page-version.service.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane types
+import { API_BASE_URL } from "@plane/constants";
+import type { TPageVersion } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class ProjectPageVersionService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchAllVersions(workspaceSlug: string, projectId: string, pageId: string): Promise<TPageVersion[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/versions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchVersionById(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    versionId: string
+  ): Promise<TPageVersion> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/versions/${versionId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreVersion(workspaceSlug: string, projectId: string, pageId: string, versionId: string): Promise<void> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/versions/${versionId}/restore/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/page/project-page.service.ts b/apps/web/core/services/page/project-page.service.ts
new file mode 100644
index 0000000..817907e
--- /dev/null
+++ b/apps/web/core/services/page/project-page.service.ts
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import { API_BASE_URL } from "@plane/constants";
+import type { TDocumentPayload, TPage } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+import { FileUploadService } from "@/services/file-upload.service";
+
+export class ProjectPageService extends APIService {
+  private fileUploadService: FileUploadService;
+
+  constructor() {
+    super(API_BASE_URL);
+    // upload service
+    this.fileUploadService = new FileUploadService();
+  }
+
+  async fetchAll(workspaceSlug: string, projectId: string): Promise<TPage[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchById(workspaceSlug: string, projectId: string, pageId: string, trackVisit: boolean): Promise<TPage> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`, {
+      params: {
+        track_visit: trackVisit,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async create(workspaceSlug: string, projectId: string, data: Partial<TPage>): Promise<TPage> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async update(workspaceSlug: string, projectId: string, pageId: string, data: Partial<TPage>): Promise<TPage> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateAccess(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    data: Pick<TPage, "access">
+  ): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/access/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async remove(workspaceSlug: string, projectId: string, pageId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchFavorites(workspaceSlug: string, projectId: string): Promise<TPage[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/favorite-pages/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addToFavorites(workspaceSlug: string, projectId: string, pageId: string): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/favorite-pages/${pageId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeFromFavorites(workspaceSlug: string, projectId: string, pageId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/favorite-pages/${pageId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchArchived(workspaceSlug: string, projectId: string): Promise<TPage[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-pages/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async archive(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restore(workspaceSlug: string, projectId: string, pageId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async lock(workspaceSlug: string, projectId: string, pageId: string): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/lock/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async unlock(workspaceSlug: string, projectId: string, pageId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/lock/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchDescriptionBinary(workspaceSlug: string, projectId: string, pageId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`, {
+      headers: {
+        "Content-Type": "application/octet-stream",
+      },
+      responseType: "arraybuffer",
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateDescription(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    data: TDocumentPayload
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  async duplicate(workspaceSlug: string, projectId: string, pageId: string): Promise<TPage> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/duplicate/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async move(workspaceSlug: string, projectId: string, pageId: string, newProjectId: string): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/move/`, {
+      new_project_id: newProjectId,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/project/index.ts b/apps/web/core/services/project/index.ts
new file mode 100644
index 0000000..0be71d3
--- /dev/null
+++ b/apps/web/core/services/project/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./project.service";
+export * from "./project-export.service";
+export * from "./project-member.service";
+export * from "./project-state.service";
+export * from "./project-publish.service";
+export * from "./project-archive.service";
diff --git a/apps/web/core/services/project/project-archive.service.ts b/apps/web/core/services/project/project-archive.service.ts
new file mode 100644
index 0000000..b60763f
--- /dev/null
+++ b/apps/web/core/services/project/project-archive.service.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import { API_BASE_URL } from "@plane/constants";
+// services
+import { APIService } from "@/services/api.service";
+
+export class ProjectArchiveService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async archiveProject(
+    workspaceSlug: string,
+    projectId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async restoreProject(workspaceSlug: string, projectId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/project/project-export.service.ts b/apps/web/core/services/project/project-export.service.ts
new file mode 100644
index 0000000..73dd124
--- /dev/null
+++ b/apps/web/core/services/project/project-export.service.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { TWorkItemFilterExpression } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// helpers
+
+export class ProjectExportService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async csvExport(
+    workspaceSlug: string,
+    data: {
+      provider: string;
+      project: string[];
+      multiple?: boolean;
+      rich_filters?: TWorkItemFilterExpression;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/export-issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/project/project-member.service.ts b/apps/web/core/services/project/project-member.service.ts
new file mode 100644
index 0000000..037fc1f
--- /dev/null
+++ b/apps/web/core/services/project/project-member.service.ts
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import { API_BASE_URL } from "@plane/constants";
+import type { IProjectBulkAddFormData, TProjectMembership } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+
+export class ProjectMemberService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchProjectMembers(workspaceSlug: string, projectId: string): Promise<TProjectMembership[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkAddMembersToProject(
+    workspaceSlug: string,
+    projectId: string,
+    data: IProjectBulkAddFormData
+  ): Promise<TProjectMembership[]> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectMemberMe(workspaceSlug: string, projectId: string): Promise<TProjectMembership> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getProjectMember(workspaceSlug: string, projectId: string, memberId: string): Promise<TProjectMembership> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProjectMember(
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string,
+    data: Partial<TProjectMembership>
+  ): Promise<TProjectMembership> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProjectMember(workspaceSlug: string, projectId: string, memberId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+const projectMemberService = new ProjectMemberService();
+
+export default projectMemberService;
diff --git a/apps/web/core/services/project/project-publish.service.ts b/apps/web/core/services/project/project-publish.service.ts
new file mode 100644
index 0000000..b027d73
--- /dev/null
+++ b/apps/web/core/services/project/project-publish.service.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import { API_BASE_URL } from "@plane/constants";
+import type { TProjectPublishSettings } from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class ProjectPublishService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchPublishSettings(workspaceSlug: string, projectID: string): Promise<TProjectPublishSettings> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectID}/project-deploy-boards/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async publishProject(
+    workspaceSlug: string,
+    projectID: string,
+    data: Partial<TProjectPublishSettings>
+  ): Promise<TProjectPublishSettings> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectID}/project-deploy-boards/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updatePublishSettings(
+    workspaceSlug: string,
+    projectID: string,
+    project_publish_id: string,
+    data: Partial<TProjectPublishSettings>
+  ): Promise<TProjectPublishSettings> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectID}/project-deploy-boards/${project_publish_id}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async unpublishProject(workspaceSlug: string, projectID: string, project_publish_id: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectID}/project-deploy-boards/${project_publish_id}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/apps/web/core/services/project/project-state.service.ts b/apps/web/core/services/project/project-state.service.ts
new file mode 100644
index 0000000..4ec2b97
--- /dev/null
+++ b/apps/web/core/services/project/project-state.service.ts
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// services
+import { API_BASE_URL } from "@plane/constants";
+import type { IIntakeState, IState } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// helpers
+// types
+
+export class ProjectStateService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createState(workspaceSlug: string, projectId: string, data: any): Promise<IState> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async markDefault(workspaceSlug: string, projectId: string, stateId: string): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/mark-default/`, {})
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getStates(workspaceSlug: string, projectId: string): Promise<IState[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIntakeState(workspaceSlug: string, projectId: string): Promise<IIntakeState> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/intake-state/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getState(workspaceSlug: string, projectId: string, stateId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateState(workspaceSlug: string, projectId: string, stateId: string, data: IState): Promise<any> {
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async patchState(workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteState(workspaceSlug: string, projectId: string, stateId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getWorkspaceStates(workspaceSlug: string): Promise<IState[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/states/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/project/project.service.ts b/apps/web/core/services/project/project.service.ts
new file mode 100644
index 0000000..aa789ab
--- /dev/null
+++ b/apps/web/core/services/project/project.service.ts
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type {
+  GithubRepositoriesResponse,
+  IProjectUserPropertiesResponse,
+  ISearchIssueResponse,
+  TProjectAnalyticsCount,
+  TProjectAnalyticsCountParams,
+  TProjectIssuesSearchParams,
+} from "@plane/types";
+// helpers
+// plane web types
+import type { TProject, TPartialProject } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+
+export class ProjectService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createProject(workspaceSlug: string, data: Partial<TProject>): Promise<TProject> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async checkProjectIdentifierAvailability(workspaceSlug: string, data: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/project-identifiers`, {
+      params: {
+        name: data,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjectsLite(workspaceSlug: string): Promise<TPartialProject[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjects(workspaceSlug: string): Promise<TProject[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/details/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProject(workspaceSlug: string, projectId: string): Promise<TProject> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getProjectAnalyticsCount(
+    workspaceSlug: string,
+    params?: TProjectAnalyticsCountParams
+  ): Promise<TProjectAnalyticsCount[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/project-stats/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProject(workspaceSlug: string, projectId: string, data: Partial<TProject>): Promise<TProject> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProject(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  // User Properties
+  async getProjectUserProperties(workspaceSlug: string, projectId: string): Promise<IProjectUserPropertiesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProjectUserProperties(
+    workspaceSlug: string,
+    projectId: string,
+    data: Partial<IProjectUserPropertiesResponse>
+  ): Promise<IProjectUserPropertiesResponse> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-properties/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getGithubRepositories(url: string): Promise<GithubRepositoriesResponse> {
+    return this.request({
+      method: "get",
+      url,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async syncGithubRepository(
+    workspaceSlug: string,
+    projectId: string,
+    workspaceIntegrationId: string,
+    data: {
+      name: string;
+      owner: string;
+      repository_id: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${workspaceIntegrationId}/github-repository-sync/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjectGithubRepository(workspaceSlug: string, projectId: string, integrationId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/github-repository-sync/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProjectFavorites(workspaceSlug: string): Promise<any[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addProjectToFavorites(workspaceSlug: string, project: string): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`, { project })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeProjectFromFavorites(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/user-favorite-projects/${projectId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectIssuesSearch(
+    workspaceSlug: string,
+    projectId: string,
+    params: TProjectIssuesSearchParams
+  ): Promise<ISearchIssueResponse[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/search-issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/sticky.service.ts b/apps/web/core/services/sticky.service.ts
new file mode 100644
index 0000000..ff4491e
--- /dev/null
+++ b/apps/web/core/services/sticky.service.ts
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import { STICKIES_PER_PAGE, API_BASE_URL } from "@plane/constants";
+import type { TSticky } from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+
+export class StickyService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createSticky(workspaceSlug: string, payload: Partial<TSticky>) {
+    return this.post(`/api/workspaces/${workspaceSlug}/stickies/`, payload)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getStickies(
+    workspaceSlug: string,
+    cursor: string,
+    query?: string,
+    per_page?: number
+  ): Promise<{ results: TSticky[]; total_pages: number }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/stickies/`, {
+      params: {
+        cursor,
+        per_page: per_page || STICKIES_PER_PAGE,
+        query,
+      },
+    })
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async getSticky(workspaceSlug: string, id: string) {
+    return this.get(`/api/workspaces/${workspaceSlug}/stickies/${id}`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async updateSticky(workspaceSlug: string, id: string, data: Partial<TSticky>) {
+    return await this.patch(`/api/workspaces/${workspaceSlug}/stickies/${id}/`, data)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  async deleteSticky(workspaceSlug: string, id: string) {
+    return await this.delete(`/api/workspaces/${workspaceSlug}/stickies/${id}`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/timezone.service.ts b/apps/web/core/services/timezone.service.ts
new file mode 100644
index 0000000..b66609a
--- /dev/null
+++ b/apps/web/core/services/timezone.service.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { TTimezones } from "@plane/types";
+// helpers
+// api services
+import { APIService } from "@/services/api.service";
+
+export class TimezoneService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetch(): Promise<TTimezones> {
+    return this.get(`/api/timezones/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+const timezoneService = new TimezoneService();
+
+export default timezoneService;
diff --git a/apps/web/core/services/user.service.ts b/apps/web/core/services/user.service.ts
new file mode 100644
index 0000000..185780c
--- /dev/null
+++ b/apps/web/core/services/user.service.ts
@@ -0,0 +1,296 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// services
+import { API_BASE_URL } from "@plane/constants";
+import type {
+  TIssue,
+  IUser,
+  IUserActivityResponse,
+  IInstanceAdminStatus,
+  IUserProfileData,
+  IUserProfileProjectSegregation,
+  IUserSettings,
+  IUserEmailNotificationSettings,
+  TIssuesResponse,
+  TUserProfile,
+  IEmailCheckResponse,
+} from "@plane/types";
+import { APIService } from "@/services/api.service";
+// types
+// helpers
+
+export class UserService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  currentUserConfig() {
+    return {
+      url: `${this.baseURL}/api/users/me/`,
+    };
+  }
+
+  async userIssues(
+    workspaceSlug: string,
+    params: any
+  ): Promise<
+    | {
+        [key: string]: TIssue[];
+      }
+    | TIssue[]
+  > {
+    return this.get(`/api/workspaces/${workspaceSlug}/my-issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async currentUser(): Promise<IUser> {
+    // Using validateStatus: null to bypass interceptors for unauthorized errors.
+    return this.get("/api/users/me/", { validateStatus: null })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getCurrentUserProfile(): Promise<TUserProfile> {
+    return this.get("/api/users/me/profile/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+  async updateCurrentUserProfile(data: any): Promise<any> {
+    return this.patch("/api/users/me/profile/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getCurrentUserAccounts(): Promise<any> {
+    return this.get("/api/users/me/accounts/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async currentUserInstanceAdminStatus(): Promise<IInstanceAdminStatus> {
+    return this.get("/api/users/me/instance-admin/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async currentUserSettings(bustCache: boolean = false): Promise<IUserSettings> {
+    const url = bustCache ? `/api/users/me/settings/?t=${Date.now()}` : "/api/users/me/settings/";
+    return this.get(url)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async currentUserEmailNotificationSettings(): Promise<IUserEmailNotificationSettings> {
+    return this.get("/api/users/me/notification-preferences/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateUser(data: Partial<IUser>): Promise<any> {
+    return this.patch("/api/users/me/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateUserOnBoard(): Promise<any> {
+    return this.patch("/api/users/me/onboard/", {
+      is_onboarded: true,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateUserTourCompleted(): Promise<any> {
+    return this.patch("/api/users/me/tour-completed/", {
+      is_tour_completed: true,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateCurrentUserEmailNotificationSettings(data: Partial<IUserEmailNotificationSettings>): Promise<any> {
+    return this.patch("/api/users/me/notification-preferences/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async changePassword(token: string, data: { old_password?: string; new_password: string }): Promise<any> {
+    return this.post(`/auth/change-password/`, data, {
+      headers: {
+        "X-CSRFTOKEN": token,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProfileData(workspaceSlug: string, userId: string): Promise<IUserProfileData> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-stats/${userId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProfileProjectsSegregation(
+    workspaceSlug: string,
+    userId: string
+  ): Promise<IUserProfileProjectSegregation> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-profile/${userId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProfileActivity(
+    workspaceSlug: string,
+    userId: string,
+    params: {
+      per_page: number;
+      cursor?: string;
+    }
+  ): Promise<IUserActivityResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-activity/${userId}/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async downloadProfileActivity(
+    workspaceSlug: string,
+    userId: string,
+    data: {
+      date: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-activity/${userId}/export/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getUserProfileIssues(
+    workspaceSlug: string,
+    userId: string,
+    params: any,
+    config = {}
+  ): Promise<TIssuesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/user-issues/${userId}/`,
+      {
+        params,
+      },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deactivateAccount() {
+    return this.delete(`/api/users/me/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async leaveWorkspace(workspaceSlug: string) {
+    return this.post(`/api/workspaces/${workspaceSlug}/members/leave/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinProject(workspaceSlug: string, project_ids: string[]): Promise<any> {
+    return this.post(`/api/users/me/workspaces/${workspaceSlug}/projects/invitations/`, { project_ids })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async leaveProject(workspaceSlug: string, projectId: string) {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/leave/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async checkEmail(token: string, email: string): Promise<IEmailCheckResponse> {
+    return this.post(
+      "/auth/email-check/",
+      { email },
+      {
+        headers: {
+          "X-CSRFTOKEN": token,
+        },
+      }
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async generateEmailCode(data: { email: string }): Promise<any> {
+    return this.post("/api/users/me/email/generate-code/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async verifyEmailCode(data: { email: string; code: string }): Promise<any> {
+    return this.patch("/api/users/me/email/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+const userService = new UserService();
+
+export default userService;
diff --git a/apps/web/core/services/view.service.ts b/apps/web/core/services/view.service.ts
new file mode 100644
index 0000000..7221283
--- /dev/null
+++ b/apps/web/core/services/view.service.ts
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IProjectView } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// types
+// helpers
+
+export class ViewService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createView(workspaceSlug: string, projectId: string, data: Partial<IProjectView>): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchView(workspaceSlug: string, projectId: string, viewId: string, data: Partial<IProjectView>): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteView(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViews(workspaceSlug: string, projectId: string): Promise<IProjectView[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewDetails(workspaceSlug: string, projectId: string, viewId: string): Promise<IProjectView> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewIssues(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addViewToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      view: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeViewFromFavorites(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/webhook.service.ts b/apps/web/core/services/webhook.service.ts
new file mode 100644
index 0000000..3f8e8f4
--- /dev/null
+++ b/apps/web/core/services/webhook.service.ts
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// api services
+import { API_BASE_URL } from "@plane/constants";
+import type { IWebhook } from "@plane/types";
+import { APIService } from "@/services/api.service";
+// helpers
+// types
+
+export class WebhookService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchWebhooksList(workspaceSlug: string): Promise<IWebhook[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/webhooks/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchWebhookDetails(workspaceSlug: string, webhookId: string): Promise<IWebhook> {
+    return this.get(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createWebhook(workspaceSlug: string, data = {}): Promise<IWebhook> {
+    return this.post(`/api/workspaces/${workspaceSlug}/webhooks/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateWebhook(workspaceSlug: string, webhookId: string, data = {}): Promise<IWebhook> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWebhook(workspaceSlug: string, webhookId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async regenerateSecretKey(workspaceSlug: string, webhookId: string): Promise<IWebhook> {
+    return this.post(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/regenerate/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/services/workspace-notification.service.ts b/apps/web/core/services/workspace-notification.service.ts
new file mode 100644
index 0000000..efdcde8
--- /dev/null
+++ b/apps/web/core/services/workspace-notification.service.ts
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable no-useless-catch */
+
+import { API_BASE_URL } from "@plane/constants";
+import type {
+  TNotificationPaginatedInfo,
+  TNotificationPaginatedInfoQueryParams,
+  TNotification,
+  TUnreadNotificationsCount,
+} from "@plane/types";
+// helpers
+// services
+import { APIService } from "@/services/api.service";
+
+export class WorkspaceNotificationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async fetchUnreadNotificationsCount(workspaceSlug: string): Promise<TUnreadNotificationsCount | undefined> {
+    try {
+      const { data } = await this.get(`/api/workspaces/${workspaceSlug}/users/notifications/unread/`);
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async fetchNotifications(
+    workspaceSlug: string,
+    params: TNotificationPaginatedInfoQueryParams
+  ): Promise<TNotificationPaginatedInfo | undefined> {
+    try {
+      const { data } = await this.get(`/api/workspaces/${workspaceSlug}/users/notifications/`, {
+        params,
+      });
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async updateNotificationById(
+    workspaceSlug: string,
+    notificationId: string,
+    payload: Partial<TNotification>
+  ): Promise<TNotification | undefined> {
+    try {
+      const { data } = await this.patch(
+        `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`,
+        payload
+      );
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async markNotificationAsRead(workspaceSlug: string, notificationId: string): Promise<TNotification | undefined> {
+    try {
+      const { data } = await this.post(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`);
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async markNotificationAsUnread(workspaceSlug: string, notificationId: string): Promise<TNotification | undefined> {
+    try {
+      const { data } = await this.delete(
+        `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`
+      );
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async markNotificationAsArchived(workspaceSlug: string, notificationId: string): Promise<TNotification | undefined> {
+    try {
+      const { data } = await this.post(
+        `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`
+      );
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async markNotificationAsUnArchived(
+    workspaceSlug: string,
+    notificationId: string
+  ): Promise<TNotification | undefined> {
+    try {
+      const { data } = await this.delete(
+        `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`
+      );
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async markAllNotificationsAsRead(
+    workspaceSlug: string,
+    payload: TNotificationPaginatedInfoQueryParams
+  ): Promise<TNotification | undefined> {
+    try {
+      const { data } = await this.post(`/api/workspaces/${workspaceSlug}/users/notifications/mark-all-read/`, payload);
+      return data || undefined;
+    } catch (error) {
+      throw error;
+    }
+  }
+}
+
+const workspaceNotificationService = new WorkspaceNotificationService();
+
+export default workspaceNotificationService;
diff --git a/apps/web/core/services/workspace.service.ts b/apps/web/core/services/workspace.service.ts
new file mode 100644
index 0000000..3c25653
--- /dev/null
+++ b/apps/web/core/services/workspace.service.ts
@@ -0,0 +1,426 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type {
+  IWorkspace,
+  IWorkspaceMemberMe,
+  IWorkspaceMember,
+  IWorkspaceMemberInvitation,
+  ILastActiveWorkspaceDetails,
+  IWorkspaceSearchResults,
+  IProductUpdateResponse,
+  IWorkspaceBulkInviteFormData,
+  IWorkspaceViewProps,
+  IUserProjectsRole,
+  IWorkspaceView,
+  TIssuesResponse,
+  TLink,
+  TSearchResponse,
+  TSearchEntityRequestPayload,
+  TWidgetEntityData,
+  TActivityEntityData,
+  IWorkspaceSidebarNavigationItem,
+  IWorkspaceSidebarNavigation,
+  IWorkspaceUserPropertiesResponse,
+} from "@plane/types";
+// services
+import { APIService } from "@/services/api.service";
+
+export class WorkspaceService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async userWorkspaces(): Promise<IWorkspace[]> {
+    return this.get("/api/users/me/workspaces/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspace(workspaceSlug: string): Promise<IWorkspace> {
+    return this.get(`/api/workspaces/${workspaceSlug}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createWorkspace(data: Partial<IWorkspace>): Promise<IWorkspace> {
+    return this.post("/api/workspaces/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateWorkspace(workspaceSlug: string, data: Partial<IWorkspace>): Promise<IWorkspace> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspace(workspaceSlug: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async inviteWorkspace(workspaceSlug: string, data: IWorkspaceBulkInviteFormData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/invitations/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinWorkspace(workspaceSlug: string, invitationId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/join/`, data, {
+      headers: {},
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async joinWorkspaces(data: any): Promise<any> {
+    return this.post("/api/users/me/workspaces/invitations/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
+    return this.get("/api/users/last-visited-workspace/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get("/api/users/me/workspaces/invitations/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceMemberMe(workspaceSlug: string): Promise<IWorkspaceMemberMe> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/me/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateWorkspaceView(workspaceSlug: string, data: { view_props: IWorkspaceViewProps }): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/workspace-views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async fetchWorkspaceMembers(workspaceSlug: string): Promise<IWorkspaceMember[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateWorkspaceMember(
+    workspaceSlug: string,
+    memberId: string,
+    data: Partial<IWorkspaceMember>
+  ): Promise<IWorkspaceMember> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/members/${memberId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceMember(workspaceSlug: string, memberId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/members/${memberId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceInvitations(workspaceSlug: string): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/invitations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspaceInvitation(workspaceSlug: string, invitationId: string): Promise<IWorkspaceMemberInvitation> {
+    return this.get(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/join/`, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateWorkspaceInvitation(
+    workspaceSlug: string,
+    invitationId: string,
+    data: Partial<IWorkspaceMember>
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async workspaceSlugCheck(slug: string): Promise<any> {
+    return this.get(`/api/workspace-slug-check/?slug=${slug}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async searchWorkspace(
+    workspaceSlug: string,
+    params: {
+      project_id?: string;
+      search: string;
+      workspace_search: boolean;
+    }
+  ): Promise<IWorkspaceSearchResults> {
+    return this.get(`/api/workspaces/${workspaceSlug}/search/`, {
+      params,
+    })
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+  async getProductUpdates(): Promise<IProductUpdateResponse[]> {
+    return this.get("/api/release-notes/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createView(workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
+    return this.post(`/api/workspaces/${workspaceSlug}/views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateView(workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/views/${viewId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteView(workspaceSlug: string, viewId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getAllViews(workspaceSlug: string): Promise<IWorkspaceView[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/views/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewDetails(workspaceSlug: string, viewId: string): Promise<IWorkspaceView> {
+    return this.get(`/api/workspaces/${workspaceSlug}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewIssues(workspaceSlug: string, params: any, config = {}): Promise<TIssuesResponse> {
+    const path = params.expand?.includes("issue_relation")
+      ? `/api/workspaces/${workspaceSlug}/issues-detail/`
+      : `/api/workspaces/${workspaceSlug}/issues/`;
+    return this.get(
+      path,
+      {
+        params,
+      },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getWorkspaceUserProjectsRole(workspaceSlug: string): Promise<IUserProjectsRole> {
+    return this.get(`/api/users/me/workspaces/${workspaceSlug}/project-roles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  // quicklinks
+  async fetchWorkspaceLinks(workspaceSlug: string): Promise<TLink[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/quick-links/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createWorkspaceLink(workspaceSlug: string, data: Partial<TLink>): Promise<TLink> {
+    return this.post(`/api/workspaces/${workspaceSlug}/quick-links/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateWorkspaceLink(workspaceSlug: string, linkId: string, data: Partial<TLink>): Promise<TLink> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/quick-links/${linkId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteWorkspaceLink(workspaceSlug: string, linkId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/quick-links/${linkId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async searchEntity(workspaceSlug: string, params: TSearchEntityRequestPayload): Promise<TSearchResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/entity-search/`, {
+      params: {
+        ...params,
+        query_type: params.query_type.join(","),
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  // recents
+  async fetchWorkspaceRecents(workspaceSlug: string, entity_name?: string): Promise<TActivityEntityData[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/recent-visits/`, {
+      params: {
+        entity_name,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  // widgets
+  async fetchWorkspaceWidgets(workspaceSlug: string): Promise<TWidgetEntityData[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/home-preferences/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateWorkspaceWidget(
+    workspaceSlug: string,
+    widgetKey: string,
+    data: Partial<TWidgetEntityData>
+  ): Promise<TWidgetEntityData> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/home-preferences/${widgetKey}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async fetchSidebarNavigationPreferences(workspaceSlug: string): Promise<IWorkspaceSidebarNavigation> {
+    return this.get(`/api/workspaces/${workspaceSlug}/sidebar-preferences/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateSidebarPreference(
+    workspaceSlug: string,
+    key: string,
+    data: Partial<IWorkspaceSidebarNavigationItem>
+  ): Promise<IWorkspaceSidebarNavigationItem> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/sidebar-preferences/${key}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateBulkSidebarPreferences(
+    workspaceSlug: string,
+    data: Array<{ key: string; is_pinned: boolean; sort_order: number }>
+  ): Promise<IWorkspaceSidebarNavigation> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/sidebar-preferences/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async fetchWorkspaceFilters(workspaceSlug: string): Promise<IWorkspaceUserPropertiesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchWorkspaceFilters(
+    workspaceSlug: string,
+    data: Partial<IWorkspaceUserPropertiesResponse>
+  ): Promise<IWorkspaceUserPropertiesResponse> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/user-properties/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/apps/web/core/store/analytics.store.ts b/apps/web/core/store/analytics.store.ts
new file mode 100644
index 0000000..b7e122c
--- /dev/null
+++ b/apps/web/core/store/analytics.store.ts
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { ANALYTICS_DURATION_FILTER_OPTIONS } from "@plane/constants";
+import type { TAnalyticsTabsBase } from "@plane/types";
+
+type DurationType = (typeof ANALYTICS_DURATION_FILTER_OPTIONS)[number]["value"];
+
+export interface IBaseAnalyticsStore {
+  //observables
+  currentTab: TAnalyticsTabsBase;
+  selectedProjects: string[];
+  selectedDuration: DurationType;
+  selectedCycle: string;
+  selectedModule: string;
+  isPeekView?: boolean;
+  isEpic?: boolean;
+  //computed
+  selectedDurationLabel: DurationType | null;
+
+  //actions
+  updateSelectedProjects: (projects: string[]) => void;
+  updateSelectedDuration: (duration: DurationType) => void;
+  updateSelectedCycle: (cycle: string) => void;
+  updateSelectedModule: (module: string) => void;
+  updateIsPeekView: (isPeekView: boolean) => void;
+  updateIsEpic: (isEpic: boolean) => void;
+}
+
+export class BaseAnalyticsStore implements IBaseAnalyticsStore {
+  //observables
+  currentTab: TAnalyticsTabsBase = "overview";
+  selectedProjects: string[] = [];
+  selectedDuration: DurationType = "last_30_days";
+  selectedCycle: string = "";
+  selectedModule: string = "";
+  isPeekView: boolean = false;
+  isEpic: boolean = false;
+  constructor() {
+    makeObservable(this, {
+      // observables
+      currentTab: observable.ref,
+      selectedDuration: observable.ref,
+      selectedProjects: observable,
+      selectedCycle: observable.ref,
+      selectedModule: observable.ref,
+      isPeekView: observable.ref,
+      isEpic: observable.ref,
+      // computed
+      selectedDurationLabel: computed,
+      // actions
+      updateSelectedProjects: action,
+      updateSelectedDuration: action,
+      updateSelectedCycle: action,
+      updateSelectedModule: action,
+      updateIsPeekView: action,
+      updateIsEpic: action,
+    });
+  }
+
+  get selectedDurationLabel() {
+    return ANALYTICS_DURATION_FILTER_OPTIONS.find((item) => item.value === this.selectedDuration)?.name ?? null;
+  }
+
+  updateSelectedProjects = (projects: string[]) => {
+    try {
+      runInAction(() => {
+        this.selectedProjects = projects;
+      });
+    } catch (error) {
+      console.error("Failed to update selected project");
+      throw error;
+    }
+  };
+
+  updateSelectedDuration = (duration: DurationType) => {
+    try {
+      runInAction(() => {
+        this.selectedDuration = duration;
+      });
+    } catch (error) {
+      console.error("Failed to update selected duration");
+      throw error;
+    }
+  };
+
+  updateSelectedCycle = (cycle: string) => {
+    runInAction(() => {
+      this.selectedCycle = cycle;
+    });
+  };
+
+  updateSelectedModule = (module: string) => {
+    runInAction(() => {
+      this.selectedModule = module;
+    });
+  };
+
+  updateIsPeekView = (isPeekView: boolean) => {
+    runInAction(() => {
+      this.isPeekView = isPeekView;
+    });
+  };
+
+  updateIsEpic = (isEpic: boolean) => {
+    runInAction(() => {
+      this.isEpic = isEpic;
+    });
+  };
+}
diff --git a/apps/web/core/store/base-command-palette.store.ts b/apps/web/core/store/base-command-palette.store.ts
new file mode 100644
index 0000000..7b9fb56
--- /dev/null
+++ b/apps/web/core/store/base-command-palette.store.ts
@@ -0,0 +1,290 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { TCreateModalStoreTypes, TCreatePageModal } from "@plane/constants";
+import { DEFAULT_CREATE_PAGE_MODAL_DATA, EPageAccess } from "@plane/constants";
+import type { TProfileSettingsTabs } from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+// lib
+import { store } from "@/lib/store-context";
+
+export interface ModalData {
+  store: EIssuesStoreType;
+  viewId: string;
+}
+
+export interface IBaseCommandPaletteStore {
+  // computed
+  isAnyModalOpen: boolean;
+  // observables
+  isCreateProjectModalOpen: boolean;
+  isCreateCycleModalOpen: boolean;
+  isCreateModuleModalOpen: boolean;
+  isCreateViewModalOpen: boolean;
+  createPageModal: TCreatePageModal;
+  isCreateIssueModalOpen: boolean;
+  isDeleteIssueModalOpen: boolean;
+  isBulkDeleteIssueModalOpen: boolean;
+  createIssueStoreType: TCreateModalStoreTypes;
+  createWorkItemAllowedProjectIds: string[] | undefined;
+  profileSettingsModal: {
+    activeTab: TProfileSettingsTabs | null;
+    isOpen: boolean;
+  };
+  allStickiesModal: boolean;
+  projectListOpenMap: Record<string, boolean>;
+  getIsProjectListOpen: (projectId: string) => boolean;
+  // toggle actions
+  toggleCreateProjectModal: (value?: boolean) => void;
+  toggleCreateCycleModal: (value?: boolean) => void;
+  toggleCreateViewModal: (value?: boolean) => void;
+  toggleCreatePageModal: (value?: TCreatePageModal) => void;
+  toggleCreateIssueModal: (value?: boolean, storeType?: TCreateModalStoreTypes, allowedProjectIds?: string[]) => void;
+  toggleCreateModuleModal: (value?: boolean) => void;
+  toggleDeleteIssueModal: (value?: boolean) => void;
+  toggleBulkDeleteIssueModal: (value?: boolean) => void;
+  toggleAllStickiesModal: (value?: boolean) => void;
+  toggleProjectListOpen: (projectId: string, value?: boolean) => void;
+  toggleProfileSettingsModal: (value: { activeTab?: TProfileSettingsTabs | null; isOpen?: boolean }) => void;
+}
+
+export class BaseCommandPaletteStore implements IBaseCommandPaletteStore {
+  // observables
+  isCreateProjectModalOpen: boolean = false;
+  isCreateCycleModalOpen: boolean = false;
+  isCreateModuleModalOpen: boolean = false;
+  isCreateViewModalOpen: boolean = false;
+  isCreateIssueModalOpen: boolean = false;
+  isDeleteIssueModalOpen: boolean = false;
+  isBulkDeleteIssueModalOpen: boolean = false;
+  createPageModal: TCreatePageModal = DEFAULT_CREATE_PAGE_MODAL_DATA;
+  createIssueStoreType: TCreateModalStoreTypes = EIssuesStoreType.PROJECT;
+  createWorkItemAllowedProjectIds: IBaseCommandPaletteStore["createWorkItemAllowedProjectIds"] = undefined;
+  profileSettingsModal: IBaseCommandPaletteStore["profileSettingsModal"] = {
+    activeTab: "general",
+    isOpen: false,
+  };
+  allStickiesModal: boolean = false;
+  projectListOpenMap: Record<string, boolean> = {};
+
+  constructor() {
+    makeObservable(this, {
+      // observable
+      isCreateProjectModalOpen: observable.ref,
+      isCreateCycleModalOpen: observable.ref,
+      isCreateModuleModalOpen: observable.ref,
+      isCreateViewModalOpen: observable.ref,
+      isCreateIssueModalOpen: observable.ref,
+      isDeleteIssueModalOpen: observable.ref,
+      isBulkDeleteIssueModalOpen: observable.ref,
+      createPageModal: observable,
+      createIssueStoreType: observable,
+      createWorkItemAllowedProjectIds: observable,
+      profileSettingsModal: observable,
+      allStickiesModal: observable,
+      projectListOpenMap: observable,
+      // toggle actions
+      toggleCreateProjectModal: action,
+      toggleCreateCycleModal: action,
+      toggleCreateViewModal: action,
+      toggleCreatePageModal: action,
+      toggleCreateIssueModal: action,
+      toggleCreateModuleModal: action,
+      toggleDeleteIssueModal: action,
+      toggleBulkDeleteIssueModal: action,
+      toggleAllStickiesModal: action,
+      toggleProjectListOpen: action,
+      toggleProfileSettingsModal: action,
+      isAnyModalOpen: computed,
+    });
+  }
+
+  get isAnyModalOpen(): boolean {
+    return Boolean(this.getCoreModalsState());
+  }
+
+  /**
+   * Returns whether any base modal is open
+   * @protected - allows access from child classes
+   */
+  protected getCoreModalsState(): boolean {
+    return Boolean(
+      this.isCreateIssueModalOpen ||
+      this.isCreateCycleModalOpen ||
+      this.isCreateProjectModalOpen ||
+      this.isCreateModuleModalOpen ||
+      this.isCreateViewModalOpen ||
+      store.powerK.isShortcutsListModalOpen ||
+      this.isBulkDeleteIssueModalOpen ||
+      this.isDeleteIssueModalOpen ||
+      this.createPageModal.isOpen ||
+      this.allStickiesModal
+    );
+  }
+  // computedFn
+  getIsProjectListOpen = computedFn((projectId: string) => this.projectListOpenMap[projectId]);
+
+  /**
+   * Toggles the project list open state
+   * @param projectId
+   * @param value
+   */
+  toggleProjectListOpen = (projectId: string, value?: boolean) => {
+    if (value !== undefined) this.projectListOpenMap[projectId] = value;
+    else this.projectListOpenMap[projectId] = !this.projectListOpenMap[projectId];
+  };
+
+  /**
+   * Toggles the create project modal
+   * @param value
+   * @returns
+   */
+  toggleCreateProjectModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCreateProjectModalOpen = value;
+    } else {
+      this.isCreateProjectModalOpen = !this.isCreateProjectModalOpen;
+    }
+  };
+
+  /**
+   * Toggles the create cycle modal
+   * @param value
+   * @returns
+   */
+  toggleCreateCycleModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCreateCycleModalOpen = value;
+    } else {
+      this.isCreateCycleModalOpen = !this.isCreateCycleModalOpen;
+    }
+  };
+
+  /**
+   * Toggles the create view modal
+   * @param value
+   * @returns
+   */
+  toggleCreateViewModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCreateViewModalOpen = value;
+    } else {
+      this.isCreateViewModalOpen = !this.isCreateViewModalOpen;
+    }
+  };
+
+  /**
+   * Toggles the create page modal along with the page access
+   * @param value
+   * @returns
+   */
+  toggleCreatePageModal = (value?: TCreatePageModal) => {
+    if (value) {
+      this.createPageModal = {
+        isOpen: value.isOpen,
+        pageAccess: value.pageAccess || EPageAccess.PUBLIC,
+      };
+    } else {
+      this.createPageModal = {
+        isOpen: !this.createPageModal.isOpen,
+        pageAccess: EPageAccess.PUBLIC,
+      };
+    }
+  };
+
+  /**
+   * Toggles the create issue modal
+   * @param value
+   * @param storeType
+   * @returns
+   */
+  toggleCreateIssueModal = (value?: boolean, storeType?: TCreateModalStoreTypes, allowedProjectIds?: string[]) => {
+    if (value !== undefined) {
+      this.isCreateIssueModalOpen = value;
+      this.createIssueStoreType = storeType || EIssuesStoreType.PROJECT;
+      this.createWorkItemAllowedProjectIds = allowedProjectIds ?? undefined;
+    } else {
+      this.isCreateIssueModalOpen = !this.isCreateIssueModalOpen;
+      this.createIssueStoreType = EIssuesStoreType.PROJECT;
+      this.createWorkItemAllowedProjectIds = undefined;
+    }
+  };
+
+  /**
+   * Toggles the delete issue modal
+   * @param value
+   * @returns
+   */
+  toggleDeleteIssueModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isDeleteIssueModalOpen = value;
+    } else {
+      this.isDeleteIssueModalOpen = !this.isDeleteIssueModalOpen;
+    }
+  };
+
+  /**
+   * Toggles the create module modal
+   * @param value
+   * @returns
+   */
+  toggleCreateModuleModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isCreateModuleModalOpen = value;
+    } else {
+      this.isCreateModuleModalOpen = !this.isCreateModuleModalOpen;
+    }
+  };
+
+  /**
+   * Toggles the bulk delete issue modal
+   * @param value
+   * @returns
+   */
+  toggleBulkDeleteIssueModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isBulkDeleteIssueModalOpen = value;
+    } else {
+      this.isBulkDeleteIssueModalOpen = !this.isBulkDeleteIssueModalOpen;
+    }
+  };
+
+  /**
+   * Toggles the all stickies modal
+   * @param value
+   * @returns
+   */
+  toggleAllStickiesModal = (value?: boolean) => {
+    if (value) {
+      this.allStickiesModal = value;
+    } else {
+      this.allStickiesModal = !this.allStickiesModal;
+    }
+  };
+
+  /**
+   * Toggles the profile settings modal
+   * @param value
+   * @returns
+   */
+  toggleProfileSettingsModal: IBaseCommandPaletteStore["toggleProfileSettingsModal"] = (payload) => {
+    const updatedSettings: IBaseCommandPaletteStore["profileSettingsModal"] = {
+      ...this.profileSettingsModal,
+      ...payload,
+    };
+
+    runInAction(() => {
+      this.profileSettingsModal = updatedSettings;
+    });
+  };
+}
+
+// Aliases so consumers can keep using CommandPaletteStore / ICommandPaletteStore
+export type ICommandPaletteStore = IBaseCommandPaletteStore;
+export { BaseCommandPaletteStore as CommandPaletteStore };
diff --git a/apps/web/core/store/base-power-k.store.ts b/apps/web/core/store/base-power-k.store.ts
new file mode 100644
index 0000000..3d087e4
--- /dev/null
+++ b/apps/web/core/store/base-power-k.store.ts
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observable, action, makeObservable } from "mobx";
+// plane imports
+import type { EIssuesStoreType } from "@plane/types";
+// components
+import type { IPowerKCommandRegistry } from "@/components/power-k/core/registry";
+import { PowerKCommandRegistry } from "@/components/power-k/core/registry";
+import type { TPowerKContextType, TPowerKPageType } from "@/components/power-k/core/types";
+
+export interface ModalData {
+  store: EIssuesStoreType;
+  viewId: string;
+}
+
+export interface IBasePowerKStore {
+  // observables
+  isPowerKModalOpen: boolean;
+  isShortcutsListModalOpen: boolean;
+  commandRegistry: IPowerKCommandRegistry;
+  activeContext: TPowerKContextType | null;
+  activePage: TPowerKPageType | null;
+  topNavInputRef: React.RefObject<HTMLInputElement | null> | null;
+  topNavSearchInputRef: React.RefObject<HTMLInputElement | null> | null;
+  setActiveContext: (entity: TPowerKContextType | null) => void;
+  setActivePage: (page: TPowerKPageType | null) => void;
+  setTopNavInputRef: (ref: React.RefObject<HTMLInputElement | null> | null) => void;
+  setTopNavSearchInputRef: (ref: React.RefObject<HTMLInputElement | null> | null) => void;
+  // toggle actions
+  togglePowerKModal: (value?: boolean) => void;
+  toggleShortcutsListModal: (value?: boolean) => void;
+}
+
+export class BasePowerKStore implements IBasePowerKStore {
+  // observables
+  isPowerKModalOpen: boolean = false;
+  isShortcutsListModalOpen: boolean = false;
+  commandRegistry: IPowerKCommandRegistry = new PowerKCommandRegistry();
+  activeContext: TPowerKContextType | null = null;
+  activePage: TPowerKPageType | null = null;
+  topNavInputRef: React.RefObject<HTMLInputElement | null> | null = null;
+  topNavSearchInputRef: React.RefObject<HTMLInputElement | null> | null = null;
+
+  constructor() {
+    makeObservable(this, {
+      // observable
+      isPowerKModalOpen: observable.ref,
+      isShortcutsListModalOpen: observable.ref,
+      commandRegistry: observable.ref,
+      activeContext: observable,
+      activePage: observable,
+      topNavInputRef: observable.ref,
+      topNavSearchInputRef: observable.ref,
+      // toggle actions
+      togglePowerKModal: action,
+      toggleShortcutsListModal: action,
+      setActiveContext: action,
+      setActivePage: action,
+      setTopNavInputRef: action,
+      setTopNavSearchInputRef: action,
+    });
+  }
+
+  /**
+   * Sets the active context entity
+   * @param entity
+   */
+  setActiveContext = (entity: TPowerKContextType | null) => {
+    this.activeContext = entity;
+  };
+
+  /**
+   * Sets the active page
+   * @param page
+   */
+  setActivePage = (page: TPowerKPageType | null) => {
+    this.activePage = page;
+  };
+
+  /**
+   * Sets the top nav input ref for keyboard shortcut access
+   * @param ref
+   */
+  setTopNavInputRef = (ref: React.RefObject<HTMLInputElement | null> | null) => {
+    this.topNavInputRef = ref;
+  };
+
+  /**
+   * Sets the top nav search input ref for keyboard shortcut access
+   * @param ref
+   */
+  setTopNavSearchInputRef = (ref: React.RefObject<HTMLInputElement | null> | null) => {
+    this.topNavSearchInputRef = ref;
+  };
+
+  /**
+   * Toggles the command palette modal
+   * @param value
+   * @returns
+   */
+  togglePowerKModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isPowerKModalOpen = value;
+    } else {
+      this.isPowerKModalOpen = !this.isPowerKModalOpen;
+    }
+  };
+
+  /**
+   * Toggles the shortcut modal
+   * @param value
+   * @returns
+   */
+  toggleShortcutsListModal = (value?: boolean) => {
+    if (value !== undefined) {
+      this.isShortcutsListModalOpen = value;
+    } else {
+      this.isShortcutsListModalOpen = !this.isShortcutsListModalOpen;
+    }
+  };
+}
diff --git a/apps/web/core/store/cycle.store.ts b/apps/web/core/store/cycle.store.ts
new file mode 100644
index 0000000..bd84433
--- /dev/null
+++ b/apps/web/core/store/cycle.store.ts
@@ -0,0 +1,725 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isPast, isToday } from "date-fns";
+import { sortBy, set, isEmpty } from "lodash-es";
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type {
+  ICycle,
+  TCyclePlotType,
+  TProgressSnapshot,
+  TCycleEstimateDistribution,
+  TCycleDistribution,
+  TCycleEstimateType,
+} from "@plane/types";
+import type { DistributionUpdates } from "@plane/utils";
+import { orderCycles, shouldFilterCycle, getDate, updateDistribution } from "@plane/utils";
+// helpers
+// services
+import { CycleService } from "@/services/cycle.service";
+import { CycleArchiveService } from "@/services/cycle_archive.service";
+import { IssueService } from "@/services/issue";
+import { ProjectService } from "@/services/project";
+// store
+import type { CoreRootStore } from "./root.store";
+
+export interface ICycleStore {
+  // loaders
+  loader: boolean;
+  progressLoader: boolean;
+  // observables
+  fetchedMap: Record<string, boolean>;
+  cycleMap: Record<string, ICycle>;
+  plotType: Record<string, TCyclePlotType>;
+  estimatedType: Record<string, TCycleEstimateType>;
+  activeCycleIdMap: Record<string, boolean>;
+
+  // computed
+  currentProjectCycleIds: string[] | null;
+  currentProjectCompletedCycleIds: string[] | null;
+  currentProjectIncompleteCycleIds: string[] | null;
+  currentProjectActiveCycleId: string | null;
+  currentProjectArchivedCycleIds: string[] | null;
+  currentProjectActiveCycle: ICycle | null;
+
+  // computed actions
+  getFilteredCycleIds: (projectId: string, sortByManual: boolean) => string[] | null;
+  getFilteredCompletedCycleIds: (projectId: string) => string[] | null;
+  getFilteredArchivedCycleIds: (projectId: string) => string[] | null;
+  getCycleById: (cycleId: string) => ICycle | null;
+  getCycleNameById: (cycleId: string) => string | undefined;
+  getProjectCycleDetails: (projectId: string) => ICycle[] | null;
+  getProjectCycleIds: (projectId: string) => string[] | null;
+  getPlotTypeByCycleId: (cycleId: string) => TCyclePlotType;
+  getEstimateTypeByCycleId: (cycleId: string) => TCycleEstimateType;
+  getIsPointsDataAvailable: (cycleId: string) => boolean;
+
+  // actions
+  updateCycleDistribution: (distributionUpdates: DistributionUpdates, cycleId: string) => void;
+  setPlotType: (cycleId: string, plotType: TCyclePlotType) => void;
+  setEstimateType: (cycleId: string, estimateType: TCycleEstimateType) => void;
+  // fetch
+  fetchWorkspaceCycles: (workspaceSlug: string) => Promise<ICycle[]>;
+  fetchAllCycles: (workspaceSlug: string, projectId: string) => Promise<undefined | ICycle[]>;
+  fetchActiveCycle: (workspaceSlug: string, projectId: string) => Promise<undefined | ICycle[]>;
+  fetchArchivedCycles: (workspaceSlug: string, projectId: string) => Promise<undefined | ICycle[]>;
+  fetchArchivedCycleDetails: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<ICycle>;
+  fetchCycleDetails: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<ICycle>;
+  fetchActiveCycleProgress: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<TProgressSnapshot>;
+  fetchActiveCycleProgressPro: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+  fetchActiveCycleAnalytics: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    analytic_type: string
+  ) => Promise<TCycleDistribution | TCycleEstimateDistribution>;
+  // crud
+  createCycle: (workspaceSlug: string, projectId: string, data: Partial<ICycle>) => Promise<ICycle>;
+  updateCycleDetails: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: Partial<ICycle>
+  ) => Promise<ICycle>;
+  deleteCycle: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+  // favorites
+  addCycleToFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
+  removeCycleFromFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+  // archive
+  archiveCycle: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+  restoreCycle: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+}
+
+export class CycleStore implements ICycleStore {
+  // observables
+  loader: boolean = false;
+  progressLoader: boolean = false;
+  cycleMap: Record<string, ICycle> = {};
+  plotType: Record<string, TCyclePlotType> = {};
+  estimatedType: Record<string, TCycleEstimateType> = {};
+  activeCycleIdMap: Record<string, boolean> = {};
+  //loaders
+  fetchedMap: Record<string, boolean> = {};
+  // root store
+  rootStore;
+  // services
+  projectService;
+  issueService;
+  cycleService;
+  cycleArchiveService;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      progressLoader: observable,
+      cycleMap: observable,
+      plotType: observable,
+      estimatedType: observable,
+      activeCycleIdMap: observable,
+      fetchedMap: observable,
+      // computed
+      currentProjectCycleIds: computed,
+      currentProjectCompletedCycleIds: computed,
+      currentProjectIncompleteCycleIds: computed,
+      currentProjectActiveCycleId: computed,
+      currentProjectArchivedCycleIds: computed,
+      currentProjectActiveCycle: computed,
+
+      // actions
+      setEstimateType: action,
+      fetchWorkspaceCycles: action,
+      fetchAllCycles: action,
+      fetchActiveCycle: action,
+      fetchArchivedCycles: action,
+      fetchArchivedCycleDetails: action,
+      fetchActiveCycleProgress: action,
+      fetchActiveCycleAnalytics: action,
+      fetchCycleDetails: action,
+      updateCycleDetails: action,
+      deleteCycle: action,
+      addCycleToFavorites: action,
+      removeCycleFromFavorites: action,
+      archiveCycle: action,
+      restoreCycle: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    // services
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+    this.cycleService = new CycleService();
+    this.cycleArchiveService = new CycleArchiveService();
+  }
+
+  // computed
+  /**
+   * returns all cycle ids for a project
+   */
+  get currentProjectCycleIds() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId || !this.fetchedMap[projectId]) return null;
+    let allCycles = Object.values(this.cycleMap ?? {}).filter((c) => c?.project_id === projectId && !c?.archived_at);
+    allCycles = sortBy(allCycles, [(c) => c.sort_order]);
+    const allCycleIds = allCycles.map((c) => c.id);
+    return allCycleIds;
+  }
+
+  /**
+   * returns all completed cycle ids for a project
+   */
+  get currentProjectCompletedCycleIds() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId || !this.fetchedMap[projectId]) return null;
+    let completedCycles = Object.values(this.cycleMap ?? {}).filter((c) => {
+      const endDate = getDate(c.end_date);
+      const hasEndDatePassed = endDate && isPast(endDate);
+      const isEndDateToday = endDate && isToday(endDate);
+      return (
+        c.project_id === projectId && ((hasEndDatePassed && !isEndDateToday) || c.status?.toLowerCase() === "completed")
+      );
+    });
+    completedCycles = sortBy(completedCycles, [(c) => c.sort_order]);
+    const completedCycleIds = completedCycles.map((c) => c.id);
+    return completedCycleIds;
+  }
+
+  /**
+   * returns all incomplete cycle ids for a project
+   */
+  get currentProjectIncompleteCycleIds() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId || !this.fetchedMap[projectId]) return null;
+    let incompleteCycles = Object.values(this.cycleMap ?? {}).filter((c) => {
+      const endDate = getDate(c.end_date);
+      const hasEndDatePassed = endDate && isPast(endDate);
+      return (
+        c.project_id === projectId && !hasEndDatePassed && !c?.archived_at && c.status?.toLowerCase() !== "completed"
+      );
+    });
+    incompleteCycles = sortBy(incompleteCycles, [(c) => c.sort_order]);
+    const incompleteCycleIds = incompleteCycles.map((c) => c.id);
+    return incompleteCycleIds;
+  }
+
+  /**
+   * returns active cycle id for a project
+   */
+  get currentProjectActiveCycleId() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId) return null;
+    const activeCycle = Object.keys(this.cycleMap ?? {}).find(
+      (cycleId) =>
+        this.cycleMap?.[cycleId]?.project_id === projectId &&
+        this.cycleMap?.[cycleId]?.status?.toLowerCase() === "current"
+    );
+    return activeCycle || null;
+  }
+
+  /**
+   * returns all archived cycle ids for a project
+   */
+  get currentProjectArchivedCycleIds() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId || !this.fetchedMap[projectId]) return null;
+    let archivedCycles = Object.values(this.cycleMap ?? {}).filter(
+      (c) => c.project_id === projectId && !!c.archived_at
+    );
+    archivedCycles = sortBy(archivedCycles, [(c) => c.sort_order]);
+    const archivedCycleIds = archivedCycles.map((c) => c.id);
+    return archivedCycleIds;
+  }
+
+  get currentProjectActiveCycle() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId && !this.currentProjectActiveCycleId) return null;
+    return this.cycleMap?.[this.currentProjectActiveCycleId!] ?? null;
+  }
+
+  getIsPointsDataAvailable = computedFn((cycleId: string) => {
+    const cycle = this.getCycleById(cycleId);
+    if (!cycle) return false;
+    if (cycle.version === 2) return cycle.progress?.some((p) => p.total_estimate_points > 0);
+    else if (cycle.version === 1) {
+      const completionChart = cycle.estimate_distribution?.completion_chart || {};
+      return !isEmpty(completionChart) && Object.keys(completionChart).some((p) => completionChart[p]! > 0);
+    } else return false;
+  });
+
+  /**
+   * @description returns filtered cycle ids based on display filters and filters
+   * @param {TCycleDisplayFilters} displayFilters
+   * @param {TCycleFilters} filters
+   * @returns {string[] | null}
+   */
+  getFilteredCycleIds = computedFn((projectId: string, sortByManual: boolean) => {
+    const filters = this.rootStore.cycleFilter.getFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.cycleFilter.searchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let cycles = Object.values(this.cycleMap ?? {}).filter(
+      (c) =>
+        c.project_id === projectId &&
+        !c.archived_at &&
+        c.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterCycle(c, filters ?? {})
+    );
+    cycles = orderCycles(cycles, sortByManual);
+    const cycleIds = cycles.map((c) => c.id);
+    return cycleIds;
+  });
+
+  /**
+   * @description returns filtered cycle ids based on display filters and filters
+   * @param {TCycleDisplayFilters} displayFilters
+   * @param {TCycleFilters} filters
+   * @returns {string[] | null}
+   */
+  getFilteredCompletedCycleIds = computedFn((projectId: string) => {
+    const filters = this.rootStore.cycleFilter.getFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.cycleFilter.searchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let cycles = Object.values(this.cycleMap ?? {}).filter(
+      (c) =>
+        c.project_id === projectId &&
+        !c.archived_at &&
+        c.status?.toLowerCase() === "completed" &&
+        c.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterCycle(c, filters ?? {})
+    );
+    cycles = sortBy(cycles, [(c) => !c.start_date]);
+    const cycleIds = cycles.map((c) => c.id);
+    return cycleIds;
+  });
+
+  /**
+   * @description returns filtered archived cycle ids based on display filters and filters
+   * @param {string} projectId
+   * @returns {string[] | null}
+   */
+  getFilteredArchivedCycleIds = computedFn((projectId: string) => {
+    const filters = this.rootStore.cycleFilter.getArchivedFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.cycleFilter.archivedCyclesSearchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let cycles = Object.values(this.cycleMap ?? {}).filter(
+      (c) =>
+        c.project_id === projectId &&
+        !!c.archived_at &&
+        c.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterCycle(c, filters ?? {})
+    );
+    cycles = sortBy(cycles, [(c) => !c.start_date]);
+    const cycleIds = cycles.map((c) => c.id);
+    return cycleIds;
+  });
+
+  /**
+   * @description returns cycle details by cycle id
+   * @param cycleId
+   * @returns
+   */
+  getCycleById = computedFn((cycleId: string): ICycle | null => this.cycleMap?.[cycleId] ?? null);
+
+  /**
+   * @description returns cycle name by cycle id
+   * @param cycleId
+   * @returns
+   */
+  getCycleNameById = computedFn((cycleId: string): string => this.cycleMap?.[cycleId]?.name);
+
+  /**
+   * @description returns list of cycle details of the project id passed as argument
+   * @param projectId
+   */
+  getProjectCycleDetails = computedFn((projectId: string): ICycle[] | null => {
+    if (!this.fetchedMap[projectId]) return null;
+
+    let cycles = Object.values(this.cycleMap ?? {}).filter((c) => c.project_id === projectId && !c?.archived_at);
+    cycles = sortBy(cycles, [(c) => c.sort_order]);
+    return cycles || null;
+  });
+
+  /**
+   * @description returns list of cycle ids of the project id passed as argument
+   * @param projectId
+   */
+  getProjectCycleIds = computedFn((projectId: string): string[] | null => {
+    const cycles = this.getProjectCycleDetails(projectId);
+    if (!cycles) return null;
+    const cycleIds = cycles.map((c) => c.id);
+    return cycleIds || null;
+  });
+
+  /**
+   * @description gets the plot type for the cycle store
+   * @param {TCyclePlotType} plotType
+   */
+  getPlotTypeByCycleId = computedFn((cycleId: string) => this.plotType[cycleId] || "burndown");
+
+  /**
+   * @description gets the estimate type for the cycle store
+   * @param {TCycleEstimateType} estimateType
+   */
+  getEstimateTypeByCycleId = computedFn((cycleId: string) => {
+    const { projectId } = this.rootStore.router;
+
+    return projectId && this.rootStore.projectEstimate.areEstimateEnabledByProjectId(projectId)
+      ? this.estimatedType[cycleId] || "issues"
+      : "issues";
+  });
+
+  /**
+   * @description updates the plot type for the cycle store
+   * @param {TCyclePlotType} plotType
+   */
+  setPlotType = (cycleId: string, plotType: TCyclePlotType) => {
+    set(this.plotType, [cycleId], plotType);
+  };
+
+  /**
+   * @description updates the estimate type for the cycle store
+   * @param {TCycleEstimateType} estimateType
+   */
+  setEstimateType = (cycleId: string, estimateType: TCycleEstimateType) => {
+    set(this.estimatedType, [cycleId], estimateType);
+  };
+
+  /**
+   * @description fetch all cycles
+   * @param workspaceSlug
+   * @returns ICycle[]
+   */
+  fetchWorkspaceCycles = async (workspaceSlug: string) =>
+    await this.cycleService.getWorkspaceCycles(workspaceSlug).then((response) => {
+      runInAction(() => {
+        response.forEach((cycle) => {
+          set(this.cycleMap, [cycle.id], { ...this.cycleMap[cycle.id], ...cycle });
+          set(this.fetchedMap, cycle.project_id, true);
+        });
+      });
+      return response;
+    });
+
+  /**
+   * @description fetches all cycles for a project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  fetchAllCycles = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      await this.cycleService.getCyclesWithParams(workspaceSlug, projectId).then((response) => {
+        runInAction(() => {
+          response.forEach((cycle) => {
+            set(this.cycleMap, [cycle.id], cycle);
+            if (cycle.status?.toLowerCase() === "current") {
+              set(this.activeCycleIdMap, [cycle.id], true);
+            }
+          });
+          set(this.fetchedMap, projectId, true);
+          this.loader = false;
+        });
+        return response;
+      });
+    } catch {
+      this.loader = false;
+      return undefined;
+    }
+  };
+
+  /**
+   * @description fetches archived cycles for a project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  fetchArchivedCycles = async (workspaceSlug: string, projectId: string) => {
+    this.loader = true;
+    return await this.cycleArchiveService
+      .getArchivedCycles(workspaceSlug, projectId)
+      .then((response) => {
+        runInAction(() => {
+          response.forEach((cycle) => {
+            set(this.cycleMap, [cycle.id], cycle);
+          });
+          this.loader = false;
+        });
+        return response;
+      })
+      .catch(() => {
+        this.loader = false;
+        return undefined;
+      });
+  };
+
+  /**
+   * @description fetches active cycle for a project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  fetchActiveCycle = async (workspaceSlug: string, projectId: string) =>
+    await this.cycleService.getCyclesWithParams(workspaceSlug, projectId, "current").then((response) => {
+      runInAction(() => {
+        response.forEach((cycle) => {
+          set(this.activeCycleIdMap, [cycle.id], true);
+          set(this.cycleMap, [cycle.id], cycle);
+        });
+      });
+      return response;
+    });
+
+  /**
+   * @description fetches active cycle progress
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   *  @returns
+   */
+  fetchActiveCycleProgress = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    this.progressLoader = true;
+    return await this.cycleService.workspaceActiveCyclesProgress(workspaceSlug, projectId, cycleId).then((progress) => {
+      runInAction(() => {
+        set(this.cycleMap, [cycleId], { ...this.cycleMap[cycleId], ...progress });
+        this.progressLoader = false;
+      });
+      return progress;
+    });
+  };
+
+  /**
+   * @description fetches active cycle progress for pro users
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   *  @returns
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  fetchActiveCycleProgressPro = action(async (workspaceSlug: string, projectId: string, cycleId: string) => {});
+
+  /**
+   * @description fetches active cycle analytics
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   *  @returns
+   */
+  fetchActiveCycleAnalytics = async (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    analytic_type: string
+  ) =>
+    await this.cycleService
+      .workspaceActiveCyclesAnalytics(workspaceSlug, projectId, cycleId, analytic_type)
+      .then((cycle) => {
+        runInAction(() => {
+          set(this.cycleMap, [cycleId, analytic_type === "points" ? "estimate_distribution" : "distribution"], cycle);
+        });
+        return cycle;
+      });
+
+  /**
+   * @description fetches cycle details
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @returns
+   */
+  fetchArchivedCycleDetails = async (workspaceSlug: string, projectId: string, cycleId: string) =>
+    await this.cycleArchiveService.getArchivedCycleDetails(workspaceSlug, projectId, cycleId).then((response) => {
+      runInAction(() => {
+        set(this.cycleMap, [response.id], { ...this.cycleMap?.[response.id], ...response });
+      });
+      return response;
+    });
+
+  /**
+   * @description fetches cycle details
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @returns
+   */
+  fetchCycleDetails = async (workspaceSlug: string, projectId: string, cycleId: string) =>
+    await this.cycleService.getCycleDetails(workspaceSlug, projectId, cycleId).then((response) => {
+      runInAction(() => {
+        set(this.cycleMap, [response.id], { ...this.cycleMap?.[response.id], ...response });
+      });
+      return response;
+    });
+
+  /**
+   * This method updates the cycle's stats locally without fetching the updated stats from backend
+   * @param distributionUpdates
+   * @param cycleId
+   * @returns
+   */
+  updateCycleDistribution = (distributionUpdates: DistributionUpdates, cycleId: string) => {
+    const cycle = this.getCycleById(cycleId);
+    if (!cycle) return;
+
+    runInAction(() => {
+      updateDistribution(cycle, distributionUpdates);
+    });
+  };
+
+  /**
+   * @description creates a new cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns
+   */
+  createCycle = action(
+    async (workspaceSlug: string, projectId: string, data: Partial<ICycle>) =>
+      await this.cycleService.createCycle(workspaceSlug, projectId, data).then((response) => {
+        runInAction(() => {
+          set(this.cycleMap, [response.id], response);
+        });
+        return response;
+      })
+  );
+
+  /**
+   * @description updates cycle details
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @param data
+   * @returns
+   */
+  updateCycleDetails = async (workspaceSlug: string, projectId: string, cycleId: string, data: Partial<ICycle>) => {
+    try {
+      runInAction(() => {
+        set(this.cycleMap, [cycleId], { ...this.cycleMap?.[cycleId], ...data });
+      });
+      const response = await this.cycleService.patchCycle(workspaceSlug, projectId, cycleId, data);
+      this.fetchCycleDetails(workspaceSlug, projectId, cycleId);
+      return response;
+    } catch (error) {
+      console.log("Failed to patch cycle from cycle store");
+      this.fetchAllCycles(workspaceSlug, projectId);
+      this.fetchActiveCycle(workspaceSlug, projectId);
+      throw error;
+    }
+  };
+
+  /**
+   * @description deletes a cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   */
+  deleteCycle = async (workspaceSlug: string, projectId: string, cycleId: string) =>
+    await this.cycleService.deleteCycle(workspaceSlug, projectId, cycleId).then(() => {
+      runInAction(() => {
+        delete this.cycleMap[cycleId];
+        delete this.activeCycleIdMap[cycleId];
+        if (this.rootStore.favorite.entityMap[cycleId]) this.rootStore.favorite.removeFavoriteFromStore(cycleId);
+      });
+    });
+
+  /**
+   * @description adds a cycle to favorites
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @returns
+   */
+  addCycleToFavorites = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    const currentCycle = this.getCycleById(cycleId);
+    try {
+      runInAction(() => {
+        if (currentCycle) set(this.cycleMap, [cycleId, "is_favorite"], true);
+      });
+      // updating through api.
+      const response = await this.rootStore.favorite.addFavorite(workspaceSlug.toString(), {
+        entity_type: "cycle",
+        entity_identifier: cycleId,
+        project_id: projectId,
+        entity_data: { name: currentCycle?.name || "" },
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        if (currentCycle) set(this.cycleMap, [cycleId, "is_favorite"], false);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description removes a cycle from favorites
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @returns
+   */
+  removeCycleFromFavorites = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    const currentCycle = this.getCycleById(cycleId);
+    try {
+      runInAction(() => {
+        if (currentCycle) set(this.cycleMap, [cycleId, "is_favorite"], false);
+      });
+      const response = await this.rootStore.favorite.removeFavoriteEntity(workspaceSlug, cycleId);
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        if (currentCycle) set(this.cycleMap, [cycleId, "is_favorite"], true);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description archives a cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @returns
+   */
+  archiveCycle = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    const cycleDetails = this.getCycleById(cycleId);
+    if (cycleDetails?.archived_at) return;
+    await this.cycleArchiveService
+      .archiveCycle(workspaceSlug, projectId, cycleId)
+      .then((response) => {
+        runInAction(() => {
+          set(this.cycleMap, [cycleId, "archived_at"], response.archived_at);
+          if (this.rootStore.favorite.entityMap[cycleId]) this.rootStore.favorite.removeFavoriteFromStore(cycleId);
+        });
+      })
+      .catch((error) => {
+        console.error("Failed to archive cycle in cycle store", error);
+      });
+  };
+
+  /**
+   * @description restores a cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @returns
+   */
+  restoreCycle = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    const cycleDetails = this.getCycleById(cycleId);
+    if (!cycleDetails?.archived_at) return;
+    await this.cycleArchiveService
+      .restoreCycle(workspaceSlug, projectId, cycleId)
+      .then(() => {
+        runInAction(() => {
+          set(this.cycleMap, [cycleId, "archived_at"], null);
+        });
+      })
+      .catch((error) => {
+        console.error("Failed to restore cycle in cycle store", error);
+      });
+  };
+}
diff --git a/apps/web/core/store/cycle_filter.store.ts b/apps/web/core/store/cycle_filter.store.ts
new file mode 100644
index 0000000..a3c72cf
--- /dev/null
+++ b/apps/web/core/store/cycle_filter.store.ts
@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { TCycleDisplayFilters, TCycleFilters, TCycleFiltersByState } from "@plane/types";
+// store
+import type { CoreRootStore } from "./root.store";
+
+export interface ICycleFilterStore {
+  // observables
+  displayFilters: Record<string, TCycleDisplayFilters>;
+  filters: Record<string, TCycleFiltersByState>;
+  searchQuery: string;
+  archivedCyclesSearchQuery: string;
+  // computed
+  currentProjectDisplayFilters: TCycleDisplayFilters | undefined;
+  currentProjectFilters: TCycleFilters | undefined;
+  currentProjectArchivedFilters: TCycleFilters | undefined;
+  // computed functions
+  getDisplayFiltersByProjectId: (projectId: string) => TCycleDisplayFilters | undefined;
+  getFiltersByProjectId: (projectId: string) => TCycleFilters | undefined;
+  getArchivedFiltersByProjectId: (projectId: string) => TCycleFilters | undefined;
+  // actions
+  updateDisplayFilters: (projectId: string, displayFilters: TCycleDisplayFilters) => void;
+  updateFilters: (projectId: string, filters: TCycleFilters, state?: keyof TCycleFiltersByState) => void;
+  updateSearchQuery: (query: string) => void;
+  updateArchivedCyclesSearchQuery: (query: string) => void;
+  clearAllFilters: (projectId: string, state?: keyof TCycleFiltersByState) => void;
+}
+
+export class CycleFilterStore implements ICycleFilterStore {
+  // observables
+  displayFilters: Record<string, TCycleDisplayFilters> = {};
+  filters: Record<string, TCycleFiltersByState> = {};
+  searchQuery: string = "";
+  archivedCyclesSearchQuery: string = "";
+  // root store
+  rootStore: CoreRootStore;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      displayFilters: observable,
+      filters: observable,
+      searchQuery: observable.ref,
+      archivedCyclesSearchQuery: observable.ref,
+      // computed
+      currentProjectDisplayFilters: computed,
+      currentProjectFilters: computed,
+      currentProjectArchivedFilters: computed,
+      // actions
+      updateDisplayFilters: action,
+      updateFilters: action,
+      updateSearchQuery: action,
+      updateArchivedCyclesSearchQuery: action,
+      clearAllFilters: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // initialize display filters of the current project
+    reaction(
+      () => this.rootStore.router.projectId,
+      (projectId) => {
+        if (!projectId) return;
+        this.initProjectCycleFilters(projectId);
+        this.searchQuery = "";
+      }
+    );
+  }
+
+  /**
+   * @description get display filters of the current project
+   */
+  get currentProjectDisplayFilters() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId) return;
+    return this.displayFilters[projectId];
+  }
+
+  /**
+   * @description get filters of the current project
+   */
+  get currentProjectFilters() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId) return;
+    return this.filters[projectId]?.default ?? {};
+  }
+
+  /**
+   * @description get archived filters of the current project
+   */
+  get currentProjectArchivedFilters() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId) return;
+    return this.filters[projectId].archived;
+  }
+
+  /**
+   * @description get display filters of a project by projectId
+   * @param {string} projectId
+   */
+  getDisplayFiltersByProjectId = computedFn((projectId: string) => this.displayFilters[projectId]);
+
+  /**
+   * @description get filters of a project by projectId
+   * @param {string} projectId
+   */
+  getFiltersByProjectId = computedFn((projectId: string) => this.filters[projectId]?.default ?? {});
+
+  /**
+   * @description get archived filters of a project by projectId
+   * @param {string} projectId
+   */
+  getArchivedFiltersByProjectId = computedFn((projectId: string) => this.filters[projectId].archived);
+
+  /**
+   * @description initialize display filters and filters of a project
+   * @param {string} projectId
+   */
+  initProjectCycleFilters = (projectId: string) => {
+    const displayFilters = this.getDisplayFiltersByProjectId(projectId);
+    runInAction(() => {
+      this.displayFilters[projectId] = {
+        active_tab: displayFilters?.active_tab || "active",
+        layout: displayFilters?.layout || "list",
+      };
+      this.filters[projectId] = this.filters[projectId] ?? {
+        default: {},
+        archived: {},
+      };
+    });
+  };
+
+  /**
+   * @description update display filters of a project
+   * @param {string} projectId
+   * @param {TCycleDisplayFilters} displayFilters
+   */
+  updateDisplayFilters = (projectId: string, displayFilters: TCycleDisplayFilters) => {
+    runInAction(() => {
+      Object.keys(displayFilters).forEach((key) => {
+        set(this.displayFilters, [projectId, key], displayFilters[key as keyof TCycleDisplayFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update filters of a project
+   * @param {string} projectId
+   * @param {TCycleFilters} filters
+   */
+  updateFilters = (projectId: string, filters: TCycleFilters, state: keyof TCycleFiltersByState = "default") => {
+    runInAction(() => {
+      Object.keys(filters).forEach((key) => {
+        set(this.filters, [projectId, state, key], filters[key as keyof TCycleFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update search query
+   * @param {string} query
+   */
+  updateSearchQuery = (query: string) => (this.searchQuery = query);
+
+  /**
+   * @description update archived search query
+   * @param {string} query
+   */
+  updateArchivedCyclesSearchQuery = (query: string) => (this.archivedCyclesSearchQuery = query);
+
+  /**
+   * @description clear all filters of a project
+   * @param {string} projectId
+   */
+  clearAllFilters = (projectId: string, state: keyof TCycleFiltersByState = "default") => {
+    runInAction(() => {
+      this.filters[projectId][state] = {};
+    });
+  };
+}
diff --git a/apps/web/core/store/dashboard.store.ts b/apps/web/core/store/dashboard.store.ts
new file mode 100644
index 0000000..a8a8186
--- /dev/null
+++ b/apps/web/core/store/dashboard.store.ts
@@ -0,0 +1,291 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type {
+  THomeDashboardResponse,
+  TWidget,
+  TWidgetFiltersFormData,
+  TWidgetStatsResponse,
+  TWidgetKeys,
+  TWidgetStatsRequestParams,
+} from "@plane/types";
+// services
+import { DashboardService } from "@/services/dashboard.service";
+// plane web store
+import type { CoreRootStore } from "./root.store";
+
+export interface IDashboardStore {
+  // error states
+  widgetStatsError: { [workspaceSlug: string]: Record<string, Record<TWidgetKeys, any | null>> };
+  // observables
+  homeDashboardId: string | null;
+  widgetDetails: { [workspaceSlug: string]: Record<string, TWidget[]> };
+  // {
+  //  workspaceSlug: {
+  //    dashboardId: TWidget[]
+  //   }
+  // }
+  widgetStats: { [workspaceSlug: string]: Record<string, Record<TWidgetKeys, TWidgetStatsResponse>> };
+  //  {
+  //    workspaceSlug: {
+  //      dashboardId: {
+  //        widgetKey: TWidgetStatsResponse;
+  //        }
+  //     }
+  //  }
+  // computed
+  homeDashboardWidgets: TWidget[] | undefined;
+  // computed actions
+  getWidgetDetails: (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => TWidget | undefined;
+  getWidgetStats: <T>(workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => T | undefined;
+  getWidgetStatsError: (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => any | null;
+  // actions
+  fetchHomeDashboardWidgets: (workspaceSlug: string) => Promise<THomeDashboardResponse>;
+  fetchWidgetStats: (
+    workspaceSlug: string,
+    dashboardId: string,
+    params: TWidgetStatsRequestParams
+  ) => Promise<TWidgetStatsResponse>;
+  updateDashboardWidget: (
+    workspaceSlug: string,
+    dashboardId: string,
+    widgetId: string,
+    data: Partial<TWidget>
+  ) => Promise<any>;
+  updateDashboardWidgetFilters: (
+    workspaceSlug: string,
+    dashboardId: string,
+    widgetId: string,
+    data: TWidgetFiltersFormData
+  ) => Promise<any>;
+}
+
+export class DashboardStore implements IDashboardStore {
+  // error states
+  widgetStatsError: { [workspaceSlug: string]: Record<string, Record<TWidgetKeys, any>> } = {};
+  // observables
+  homeDashboardId: string | null = null;
+  widgetDetails: { [workspaceSlug: string]: Record<string, TWidget[]> } = {};
+  widgetStats: { [workspaceSlug: string]: Record<string, Record<TWidgetKeys, TWidgetStatsResponse>> } = {};
+  // stores
+  routerStore;
+  issueStore;
+  // services
+  dashboardService;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // error states
+      widgetStatsError: observable,
+      // observables
+      homeDashboardId: observable.ref,
+      widgetDetails: observable,
+      widgetStats: observable,
+      // computed
+      homeDashboardWidgets: computed,
+      // fetch actions
+      fetchHomeDashboardWidgets: action,
+      fetchWidgetStats: action,
+      // update actions
+      updateDashboardWidget: action,
+      updateDashboardWidgetFilters: action,
+    });
+
+    // router store
+    this.routerStore = _rootStore.router;
+    this.issueStore = _rootStore.issue.issues;
+    // services
+    this.dashboardService = new DashboardService();
+  }
+
+  /**
+   * @description get home dashboard widgets
+   * @returns {TWidget[] | undefined}
+   */
+  get homeDashboardWidgets() {
+    const workspaceSlug = this.routerStore.workspaceSlug;
+    if (!workspaceSlug) return undefined;
+    const { homeDashboardId, widgetDetails } = this;
+    return homeDashboardId ? widgetDetails?.[workspaceSlug]?.[homeDashboardId] : undefined;
+  }
+
+  /**
+   * @description get widget details
+   * @param {string} workspaceSlug
+   * @param {string} dashboardId
+   * @param {TWidgetKeys} widgetKey
+   * @returns {TWidget | undefined}
+   */
+  getWidgetDetails = computedFn((workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) => {
+    const widgets = this.widgetDetails?.[workspaceSlug]?.[dashboardId];
+    if (!widgets) return undefined;
+    return widgets.find((widget) => widget.key === widgetKey);
+  });
+
+  /**
+   * @description get widget stats
+   * @param {string} workspaceSlug
+   * @param {string} dashboardId
+   * @param {TWidgetKeys} widgetKey
+   * @returns {T | undefined}
+   */
+  getWidgetStats = <T>(workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys): T | undefined =>
+    (this.widgetStats?.[workspaceSlug]?.[dashboardId]?.[widgetKey] as unknown as T) ?? undefined;
+
+  /**
+   * @description get widget stats error
+   * @param {string} workspaceSlug
+   * @param {string} dashboardId
+   * @param {TWidgetKeys} widgetKey
+   * @returns {any | null}
+   */
+  getWidgetStatsError = (workspaceSlug: string, dashboardId: string, widgetKey: TWidgetKeys) =>
+    this.widgetStatsError?.[workspaceSlug]?.[dashboardId]?.[widgetKey] ?? null;
+
+  /**
+   * @description fetch home dashboard details and widgets
+   * @param {string} workspaceSlug
+   * @returns {Promise<THomeDashboardResponse>}
+   */
+  fetchHomeDashboardWidgets = async (workspaceSlug: string): Promise<THomeDashboardResponse> => {
+    try {
+      const response = await this.dashboardService.getHomeDashboardWidgets(workspaceSlug);
+
+      runInAction(() => {
+        this.homeDashboardId = response.dashboard.id;
+        set(this.widgetDetails, [workspaceSlug, response.dashboard.id], response.widgets);
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.homeDashboardId = null;
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * @description fetch widget stats
+   * @param {string} workspaceSlug
+   * @param {string} dashboardId
+   * @param {TWidgetStatsRequestParams} widgetKey
+   * @returns widget stats
+   */
+  fetchWidgetStats = async (workspaceSlug: string, dashboardId: string, params: TWidgetStatsRequestParams) =>
+    this.dashboardService
+      .getWidgetStats(workspaceSlug, dashboardId, params)
+      .then((res: any) => {
+        runInAction(() => {
+          if (res.issues) this.issueStore.addIssue(res.issues);
+          set(this.widgetStats, [workspaceSlug, dashboardId, params.widget_key], res);
+          set(this.widgetStatsError, [workspaceSlug, dashboardId, params.widget_key], null);
+        });
+        return res;
+      })
+      .catch((error) => {
+        runInAction(() => {
+          set(this.widgetStatsError, [workspaceSlug, dashboardId, params.widget_key], error);
+        });
+
+        throw error;
+      });
+
+  /**
+   * @description update dashboard widget
+   * @param {string} dashboardId
+   * @param {string} widgetId
+   * @param {Partial<TWidget>} data
+   * @returns updated widget
+   */
+  updateDashboardWidget = async (
+    workspaceSlug: string,
+    dashboardId: string,
+    widgetId: string,
+    data: Partial<TWidget>
+  ): Promise<any> => {
+    // find all widgets in dashboard
+    const widgets = this.widgetDetails?.[workspaceSlug]?.[dashboardId];
+    if (!widgets) throw new Error("Dashboard not found");
+    // find widget index
+    const widgetIndex = widgets.findIndex((widget) => widget.id === widgetId);
+    // get original widget
+    const originalWidget = { ...widgets[widgetIndex] };
+    if (widgetIndex === -1) throw new Error("Widget not found");
+
+    try {
+      runInAction(() => {
+        this.widgetDetails[workspaceSlug][dashboardId][widgetIndex] = {
+          ...widgets[widgetIndex],
+          ...data,
+        };
+      });
+      const response = await this.dashboardService.updateDashboardWidget(dashboardId, widgetId, data);
+      return response;
+    } catch (error) {
+      // revert changes
+      runInAction(() => {
+        this.widgetDetails[workspaceSlug][dashboardId][widgetIndex] = originalWidget;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description update dashboard widget filters
+   * @param {string} dashboardId
+   * @param {string} widgetId
+   * @param {TWidgetFiltersFormData} data
+   * @returns updated widget
+   */
+  updateDashboardWidgetFilters = async (
+    workspaceSlug: string,
+    dashboardId: string,
+    widgetId: string,
+    data: TWidgetFiltersFormData
+  ): Promise<TWidget> => {
+    const widgetDetails = this.getWidgetDetails(workspaceSlug, dashboardId, data.widgetKey);
+    if (!widgetDetails) throw new Error("Widget not found");
+    try {
+      const updatedWidget = {
+        ...widgetDetails,
+        widget_filters: {
+          ...widgetDetails.widget_filters,
+          ...data.filters,
+        },
+      };
+      // update widget details optimistically
+      runInAction(() => {
+        set(
+          this.widgetDetails,
+          [workspaceSlug, dashboardId],
+          this.widgetDetails?.[workspaceSlug]?.[dashboardId]?.map((w) => (w.id === widgetId ? updatedWidget : w))
+        );
+      });
+      const response = await this.updateDashboardWidget(workspaceSlug, dashboardId, widgetId, {
+        filters: {
+          ...widgetDetails.widget_filters,
+          ...data.filters,
+        },
+      }).then((res) => res);
+
+      return response;
+    } catch (error) {
+      // revert changes
+      runInAction(() => {
+        this.widgetDetails[workspaceSlug][dashboardId] = this.widgetDetails?.[workspaceSlug]?.[dashboardId]?.map((w) =>
+          w.id === widgetId ? widgetDetails : w
+        );
+      });
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/editor/asset.store.ts b/apps/web/core/store/editor/asset.store.ts
new file mode 100644
index 0000000..8469f70
--- /dev/null
+++ b/apps/web/core/store/editor/asset.store.ts
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { debounce, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+import { v4 as uuidv4 } from "uuid";
+// plane types
+import type { EFileAssetType, TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
+// services
+import { FileService } from "@/services/file.service";
+import type { TAttachmentUploadStatus } from "../issue/issue-details/attachment.store";
+
+export interface IEditorAssetStore {
+  // computed
+  assetsUploadPercentage: Record<string, number>;
+  // helper methods
+  getAssetUploadStatusByEditorBlockId: (blockId: string) => TAttachmentUploadStatus | undefined;
+  // actions
+  uploadEditorAsset: ({
+    blockId,
+    data,
+    file,
+    projectId,
+    workspaceSlug,
+  }: {
+    blockId: string;
+    data: TFileEntityInfo;
+    file: File;
+    projectId?: string;
+    workspaceSlug: string;
+  }) => Promise<TFileSignedURLResponse>;
+  duplicateEditorAsset: ({
+    assetId,
+    entityId,
+    entityType,
+    projectId,
+    workspaceSlug,
+  }: {
+    assetId: string;
+    entityId?: string;
+    entityType: EFileAssetType;
+    projectId?: string;
+    workspaceSlug: string;
+  }) => Promise<{ asset_id: string }>;
+}
+
+export class EditorAssetStore implements IEditorAssetStore {
+  // observables
+  assetsUploadStatus: Record<string, TAttachmentUploadStatus> = {};
+  // services
+  fileService: FileService;
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      assetsUploadStatus: observable,
+      // computed
+      assetsUploadPercentage: computed,
+      // actions
+      uploadEditorAsset: action,
+    });
+    // services
+    this.fileService = new FileService();
+  }
+
+  get assetsUploadPercentage() {
+    const assetsStatus = this.assetsUploadStatus;
+    const assetsPercentage: Record<string, number> = {};
+    Object.keys(assetsStatus).forEach((blockId) => {
+      const asset = assetsStatus[blockId];
+      if (asset) assetsPercentage[blockId] = asset.progress;
+    });
+    return assetsPercentage;
+  }
+
+  // helper methods
+  getAssetUploadStatusByEditorBlockId: IEditorAssetStore["getAssetUploadStatusByEditorBlockId"] = computedFn(
+    (blockId) => {
+      const blockDetails = this.assetsUploadStatus[blockId];
+      if (!blockDetails) return undefined;
+      return blockDetails;
+    }
+  );
+
+  // actions
+  private debouncedUpdateProgress = debounce((blockId: string, progress: number) => {
+    runInAction(() => {
+      set(this.assetsUploadStatus, [blockId, "progress"], progress);
+    });
+  }, 16);
+
+  uploadEditorAsset: IEditorAssetStore["uploadEditorAsset"] = async (args) => {
+    const { blockId, data, file, projectId, workspaceSlug } = args;
+    const tempId = uuidv4();
+
+    try {
+      // update attachment upload status
+      runInAction(() => {
+        set(this.assetsUploadStatus, [blockId], {
+          id: tempId,
+          name: file.name,
+          progress: 0,
+          size: file.size,
+          type: file.type,
+        });
+      });
+      if (projectId) {
+        const response = await this.fileService.uploadProjectAsset(
+          workspaceSlug,
+          projectId,
+          data,
+          file,
+          (progressEvent) => {
+            const progressPercentage = Math.round((progressEvent.progress ?? 0) * 100);
+            this.debouncedUpdateProgress(blockId, progressPercentage);
+          }
+        );
+        return response;
+      } else {
+        const response = await this.fileService.uploadWorkspaceAsset(workspaceSlug, data, file, (progressEvent) => {
+          const progressPercentage = Math.round((progressEvent.progress ?? 0) * 100);
+          this.debouncedUpdateProgress(blockId, progressPercentage);
+        });
+        return response;
+      }
+    } catch (error) {
+      console.error("Error in uploading page asset:", error);
+      throw error;
+    } finally {
+      runInAction(() => {
+        delete this.assetsUploadStatus[blockId];
+      });
+    }
+  };
+  duplicateEditorAsset: IEditorAssetStore["duplicateEditorAsset"] = async (args) => {
+    const { assetId, entityId, entityType, projectId, workspaceSlug } = args;
+    const { asset_id } = await this.fileService.duplicateAsset(workspaceSlug, assetId, {
+      entity_id: entityId,
+      entity_type: entityType,
+      project_id: projectId,
+    });
+    return { asset_id };
+  };
+}
diff --git a/apps/web/core/store/estimates/estimate-point.ts b/apps/web/core/store/estimates/estimate-point.ts
new file mode 100644
index 0000000..3671a02
--- /dev/null
+++ b/apps/web/core/store/estimates/estimate-point.ts
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable no-useless-catch */
+
+import { set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import type { IEstimate, IEstimatePoint as IEstimatePointType } from "@plane/types";
+// plane web services
+import estimateService from "@/services/estimate.service";
+// store
+import type { CoreRootStore } from "@/store/root.store";
+
+type TErrorCodes = {
+  status: string;
+  message?: string;
+};
+
+export interface IEstimatePoint extends IEstimatePointType {
+  // observables
+  error: TErrorCodes | undefined;
+  // computed
+  asJson: IEstimatePointType;
+  // helper actions
+  updateEstimatePointObject: (estimatePoint: Partial<IEstimatePointType>) => void;
+  // actions
+  updateEstimatePoint: (
+    workspaceSlug: string,
+    projectId: string,
+    payload: Partial<IEstimatePointType>
+  ) => Promise<IEstimatePointType | undefined>;
+}
+
+export class EstimatePoint implements IEstimatePoint {
+  // data model observables
+  id: string | undefined = undefined;
+  key: number | undefined = undefined;
+  value: string | undefined = undefined;
+  description: string | undefined = undefined;
+  workspace: string | undefined = undefined;
+  project: string | undefined = undefined;
+  estimate: string | undefined = undefined;
+  created_at: Date | undefined = undefined;
+  updated_at: Date | undefined = undefined;
+  created_by: string | undefined = undefined;
+  updated_by: string | undefined = undefined;
+  // observables
+  error: TErrorCodes | undefined = undefined;
+
+  constructor(
+    private store: CoreRootStore,
+    private projectEstimate: IEstimate,
+    private data: IEstimatePointType
+  ) {
+    makeObservable(this, {
+      // data model observables
+      id: observable.ref,
+      key: observable.ref,
+      value: observable.ref,
+      description: observable.ref,
+      workspace: observable.ref,
+      project: observable.ref,
+      estimate: observable.ref,
+      created_at: observable.ref,
+      updated_at: observable.ref,
+      created_by: observable.ref,
+      updated_by: observable.ref,
+      // observables
+      error: observable.ref,
+      // computed
+      asJson: computed,
+      // actions
+      updateEstimatePoint: action,
+    });
+    this.id = this.data.id;
+    this.key = this.data.key;
+    this.value = this.data.value;
+    this.description = this.data.description;
+    this.workspace = this.data.workspace;
+    this.project = this.data.project;
+    this.estimate = this.data.estimate;
+    this.created_at = this.data.created_at;
+    this.updated_at = this.data.updated_at;
+    this.created_by = this.data.created_by;
+    this.updated_by = this.data.updated_by;
+  }
+
+  // computed
+  get asJson() {
+    return {
+      id: this.id,
+      key: this.key,
+      value: this.value,
+      description: this.description,
+      workspace: this.workspace,
+      project: this.project,
+      estimate: this.estimate,
+      created_at: this.created_at,
+      updated_at: this.updated_at,
+      created_by: this.created_by,
+      updated_by: this.updated_by,
+    };
+  }
+
+  // helper actions
+  /**
+   * @description updating an estimate point object in local store
+   * @param { Partial<IEstimatePointType> } estimatePoint
+   * @returns { void }
+   */
+  updateEstimatePointObject = (estimatePoint: Partial<IEstimatePointType>) => {
+    Object.keys(estimatePoint).map((key) => {
+      const estimatePointKey = key as keyof IEstimatePointType;
+      set(this, estimatePointKey, estimatePoint[estimatePointKey]);
+    });
+  };
+
+  // actions
+  /**
+   * @description updating an estimate point
+   * @param { Partial<IEstimatePointType> } payload
+   * @returns { IEstimatePointType | undefined }
+   */
+  updateEstimatePoint = async (
+    workspaceSlug: string,
+    projectId: string,
+    payload: Partial<IEstimatePointType>
+  ): Promise<IEstimatePointType | undefined> => {
+    try {
+      if (!this.projectEstimate?.id || !this.id || !payload) return undefined;
+
+      const estimatePoint = await estimateService.updateEstimatePoint(
+        workspaceSlug,
+        projectId,
+        this.projectEstimate?.id,
+        this.id,
+        payload
+      );
+      if (estimatePoint) {
+        runInAction(() => {
+          Object.keys(payload).map((key) => {
+            const estimatePointKey = key as keyof IEstimatePointType;
+            set(this, estimatePointKey, estimatePoint[estimatePointKey]);
+          });
+        });
+      }
+
+      return estimatePoint;
+    } catch (error) {
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/estimates/estimate.ts b/apps/web/core/store/estimates/estimate.ts
new file mode 100644
index 0000000..7e65494
--- /dev/null
+++ b/apps/web/core/store/estimates/estimate.ts
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { orderBy, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type {
+  IEstimate as IEstimateType,
+  IEstimatePoint as IEstimatePointType,
+  TEstimateSystemKeys,
+} from "@plane/types";
+// plane web services
+import estimateService from "@/services/estimate.service";
+// store
+import type { IEstimatePoint } from "@/store/estimates/estimate-point";
+import { EstimatePoint } from "@/store/estimates/estimate-point";
+import type { CoreRootStore } from "@/store/root.store";
+
+type TErrorCodes = {
+  status: string;
+  message?: string;
+};
+
+export interface IEstimate extends Omit<IEstimateType, "points"> {
+  // observables
+  error: TErrorCodes | undefined;
+  estimatePoints: Record<string, IEstimatePoint>;
+  // computed
+  asJson: Omit<IEstimateType, "points">;
+  estimatePointIds: string[] | undefined;
+  estimatePointById: (estimatePointId: string) => IEstimatePointType | undefined;
+  // actions
+  creteEstimatePoint: (
+    workspaceSlug: string,
+    projectId: string,
+    payload: Partial<IEstimatePointType>
+  ) => Promise<IEstimatePointType | undefined>;
+}
+
+export class Estimate implements IEstimate {
+  // data model observables
+  id: string | undefined = undefined;
+  name: string | undefined = undefined;
+  description: string | undefined = undefined;
+  type: TEstimateSystemKeys | undefined = undefined;
+  workspace: string | undefined = undefined;
+  project: string | undefined = undefined;
+  last_used: boolean | undefined = undefined;
+  created_at: Date | undefined = undefined;
+  updated_at: Date | undefined = undefined;
+  created_by: string | undefined = undefined;
+  updated_by: string | undefined = undefined;
+  // observables
+  error: TErrorCodes | undefined = undefined;
+  estimatePoints: Record<string, IEstimatePoint> = {};
+
+  constructor(
+    public store: CoreRootStore,
+    public data: IEstimateType
+  ) {
+    makeObservable(this, {
+      // data model observables
+      id: observable.ref,
+      name: observable.ref,
+      description: observable.ref,
+      type: observable.ref,
+      workspace: observable.ref,
+      project: observable.ref,
+      last_used: observable.ref,
+      created_at: observable.ref,
+      updated_at: observable.ref,
+      created_by: observable.ref,
+      updated_by: observable.ref,
+      // observables
+      error: observable.ref,
+      estimatePoints: observable,
+      // computed
+      asJson: computed,
+      estimatePointIds: computed,
+      // actions
+      creteEstimatePoint: action,
+    });
+    this.id = this.data.id;
+    this.name = this.data.name;
+    this.description = this.data.description;
+    this.type = this.data.type;
+    this.workspace = this.data.workspace;
+    this.project = this.data.project;
+    this.last_used = this.data.last_used;
+    this.created_at = this.data.created_at;
+    this.updated_at = this.data.updated_at;
+    this.created_by = this.data.created_by;
+    this.updated_by = this.data.updated_by;
+    this.data.points?.forEach((estimationPoint) => {
+      if (estimationPoint.id)
+        set(this.estimatePoints, [estimationPoint.id], new EstimatePoint(this.store, this.data, estimationPoint));
+    });
+  }
+
+  // computed
+  get asJson() {
+    return {
+      id: this.id,
+      name: this.name,
+      description: this.description,
+      type: this.type,
+      workspace: this.workspace,
+      project: this.project,
+      last_used: this.last_used,
+      created_at: this.created_at,
+      updated_at: this.updated_at,
+      created_by: this.created_by,
+      updated_by: this.updated_by,
+    };
+  }
+
+  get estimatePointIds() {
+    const { estimatePoints } = this;
+    if (!estimatePoints) return undefined;
+    let currentEstimatePoints = Object.values(estimatePoints).filter(
+      (estimatePoint) => estimatePoint?.estimate === this.id
+    );
+    currentEstimatePoints = orderBy(currentEstimatePoints, ["key"], "asc");
+    const estimatePointIds = currentEstimatePoints.map((estimatePoint) => estimatePoint.id) as string[];
+    return estimatePointIds ?? undefined;
+  }
+
+  estimatePointById = computedFn((estimatePointId: string) => {
+    if (!estimatePointId) return undefined;
+    return this.estimatePoints[estimatePointId] ?? undefined;
+  });
+
+  // actions
+  creteEstimatePoint = async (
+    workspaceSlug: string,
+    projectId: string,
+    payload: Partial<IEstimatePointType>
+  ): Promise<IEstimatePointType | undefined> => {
+    if (!this.id || !payload) return;
+
+    const estimatePoint = await estimateService.createEstimatePoint(workspaceSlug, projectId, this.id, payload);
+    if (estimatePoint) {
+      runInAction(() => {
+        if (estimatePoint.id) {
+          set(this.estimatePoints, [estimatePoint.id], new EstimatePoint(this.store, this.data, estimatePoint));
+        }
+      });
+    }
+  };
+}
diff --git a/apps/web/core/store/estimates/project-estimate.store.ts b/apps/web/core/store/estimates/project-estimate.store.ts
new file mode 100644
index 0000000..bfbe066
--- /dev/null
+++ b/apps/web/core/store/estimates/project-estimate.store.ts
@@ -0,0 +1,319 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { unset, orderBy, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { IEstimate as IEstimateType, IEstimateFormData, TEstimateSystemKeys } from "@plane/types";
+// plane web services
+import estimateService from "@/services/estimate.service";
+// plane web store
+import type { IEstimate } from "@/store/estimates/estimate";
+import { Estimate } from "@/store/estimates/estimate";
+// store
+import type { CoreRootStore } from "../root.store";
+
+type TEstimateLoader = "init-loader" | "mutation-loader" | undefined;
+type TErrorCodes = {
+  status: string;
+  message?: string;
+};
+
+export interface IProjectEstimateStore {
+  // observables
+  loader: TEstimateLoader;
+  estimates: Record<string, IEstimate>;
+  error: TErrorCodes | undefined;
+  // computed
+  currentActiveEstimateId: string | undefined;
+  currentActiveEstimate: IEstimate | undefined;
+  archivedEstimateIds: string[] | undefined;
+  currentProjectEstimateType: TEstimateSystemKeys | undefined;
+  areEstimateEnabledByProjectId: (projectId: string) => boolean;
+  estimateIdsByProjectId: (projectId: string) => string[] | undefined;
+  currentActiveEstimateIdByProjectId: (projectId: string) => string | undefined;
+  estimateById: (estimateId: string) => IEstimate | undefined;
+  // actions
+  getWorkspaceEstimates: (workspaceSlug: string, loader?: TEstimateLoader) => Promise<IEstimateType[] | undefined>;
+  getProjectEstimates: (
+    workspaceSlug: string,
+    projectId: string,
+    loader?: TEstimateLoader
+  ) => Promise<IEstimateType[] | undefined>;
+  getEstimateById: (estimateId: string) => IEstimate | undefined;
+  createEstimate: (
+    workspaceSlug: string,
+    projectId: string,
+    data: IEstimateFormData
+  ) => Promise<IEstimateType | undefined>;
+  deleteEstimate: (workspaceSlug: string, projectId: string, estimateId: string) => Promise<void>;
+}
+
+export class ProjectEstimateStore implements IProjectEstimateStore {
+  // observables
+  loader: TEstimateLoader = undefined;
+  estimates: Record<string, IEstimate> = {}; // estimate_id -> estimate
+  error: TErrorCodes | undefined = undefined;
+
+  constructor(private store: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      estimates: observable,
+      error: observable,
+      // computed
+      currentActiveEstimateId: computed,
+      currentActiveEstimate: computed,
+      archivedEstimateIds: computed,
+      currentProjectEstimateType: computed,
+      // actions
+      getWorkspaceEstimates: action,
+      getProjectEstimates: action,
+      getEstimateById: action,
+      createEstimate: action,
+      deleteEstimate: action,
+    });
+  }
+
+  // computed
+
+  get currentProjectEstimateType(): TEstimateSystemKeys | undefined {
+    return this.currentActiveEstimateId ? this.estimates[this.currentActiveEstimateId]?.type : undefined;
+  }
+
+  /**
+   * @description get current active estimate id for a project
+   * @returns { string | undefined }
+   */
+  get currentActiveEstimateId(): string | undefined {
+    const { projectId } = this.store.router;
+    if (!projectId) return undefined;
+    const currentActiveEstimateId = Object.values(this.estimates || {}).find(
+      (p) => p.project === projectId && p.last_used
+    );
+    return currentActiveEstimateId?.id ?? undefined;
+  }
+
+  // computed
+  /**
+   * @description get current active estimate for a project
+   * @returns { string | undefined }
+   */
+  get currentActiveEstimate(): IEstimate | undefined {
+    const { projectId } = this.store.router;
+    if (!projectId) return undefined;
+    const currentActiveEstimate = Object.values(this.estimates || {}).find(
+      (p) => p.project === projectId && p.last_used
+    );
+    return currentActiveEstimate ?? undefined;
+  }
+
+  /**
+   * @description get all archived estimate ids for a project
+   * @returns { string[] | undefined }
+   */
+  get archivedEstimateIds(): string[] | undefined {
+    const { projectId } = this.store.router;
+    if (!projectId) return undefined;
+    const archivedEstimates = orderBy(
+      Object.values(this.estimates || {}).filter((p) => p.project === projectId && !p.last_used),
+      ["created_at"],
+      "desc"
+    );
+    const archivedEstimateIds = archivedEstimates.map((p) => p.id) as string[];
+    return archivedEstimateIds ?? undefined;
+  }
+
+  /**
+   * @description get estimates are enabled in the project or not
+   * @returns { boolean }
+   */
+  areEstimateEnabledByProjectId = computedFn((projectId: string) => {
+    if (!projectId) return false;
+    const projectDetails = this.store.projectRoot.project.getProjectById(projectId);
+    if (!projectDetails) return false;
+    return Boolean(projectDetails.estimate) || false;
+  });
+
+  /**
+   * @description get all estimate ids for a project
+   * @returns { string[] | undefined }
+   */
+  estimateIdsByProjectId = computedFn((projectId: string) => {
+    if (!projectId) return undefined;
+    const projectEstimatesIds = Object.values(this.estimates || {})
+      .filter((p) => p.project === projectId)
+      .map((p) => p.id) as string[];
+    return projectEstimatesIds ?? undefined;
+  });
+
+  /**
+   * @description get current active estimate id for a project
+   * @returns { string | undefined }
+   */
+  currentActiveEstimateIdByProjectId = computedFn((projectId: string): string | undefined => {
+    if (!projectId) return undefined;
+    const currentActiveEstimateId = Object.values(this.estimates || {}).find(
+      (p) => p.project === projectId && p.last_used
+    );
+    return currentActiveEstimateId?.id ?? undefined;
+  });
+
+  /**
+   * @description get estimate by id
+   * @returns { IEstimate | undefined }
+   */
+  estimateById = computedFn((estimateId: string) => {
+    if (!estimateId) return undefined;
+    return this.estimates[estimateId] ?? undefined;
+  });
+
+  // actions
+  /**
+   * @description fetch all estimates for a workspace
+   * @param { string } workspaceSlug
+   * @returns { IEstimateType[] | undefined }
+   */
+  getWorkspaceEstimates = async (
+    workspaceSlug: string,
+    loader: TEstimateLoader = "mutation-loader"
+  ): Promise<IEstimateType[] | undefined> => {
+    try {
+      this.error = undefined;
+      if (Object.keys(this.estimates || {}).length <= 0) this.loader = loader ? loader : "init-loader";
+
+      const estimates = await estimateService.fetchWorkspaceEstimates(workspaceSlug);
+      if (estimates && estimates.length > 0) {
+        runInAction(() => {
+          estimates.forEach((estimate) => {
+            if (estimate.id)
+              set(
+                this.estimates,
+                [estimate.id],
+                new Estimate(this.store, { ...estimate, type: estimate.type?.toLowerCase() as TEstimateSystemKeys })
+              );
+          });
+        });
+      }
+
+      return estimates;
+    } catch (error) {
+      this.loader = undefined;
+      this.error = {
+        status: "error",
+        message: "Error fetching estimates",
+      };
+      throw error;
+    }
+  };
+
+  /**
+   * @description fetch all estimates for a project
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @returns { IEstimateType[] | undefined }
+   */
+  getProjectEstimates = async (
+    workspaceSlug: string,
+    projectId: string,
+    loader: TEstimateLoader = "mutation-loader"
+  ): Promise<IEstimateType[] | undefined> => {
+    try {
+      this.error = undefined;
+      if (!this.estimateIdsByProjectId(projectId)) this.loader = loader ? loader : "init-loader";
+
+      const estimates = await estimateService.fetchProjectEstimates(workspaceSlug, projectId);
+      if (estimates && estimates.length > 0) {
+        runInAction(() => {
+          estimates.forEach((estimate) => {
+            if (estimate.id)
+              set(
+                this.estimates,
+                [estimate.id],
+                new Estimate(this.store, { ...estimate, type: estimate.type?.toLowerCase() as TEstimateSystemKeys })
+              );
+          });
+        });
+      }
+
+      return estimates;
+    } catch (error) {
+      this.loader = undefined;
+      this.error = {
+        status: "error",
+        message: "Error fetching estimates",
+      };
+      throw error;
+    }
+  };
+
+  /**
+   * @param { string } estimateId
+   * @returns IEstimateType | undefined
+   */
+  getEstimateById = (estimateId: string): IEstimate | undefined => this.estimates[estimateId];
+
+  /**
+   * @description create an estimate for a project
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @param { Partial<IEstimateFormData> } payload
+   * @returns
+   */
+  createEstimate = async (
+    workspaceSlug: string,
+    projectId: string,
+    payload: IEstimateFormData
+  ): Promise<IEstimateType | undefined> => {
+    try {
+      this.error = undefined;
+
+      const estimate = await estimateService.createEstimate(workspaceSlug, projectId, payload);
+      if (estimate) {
+        // update estimate_id in current project
+        // await this.store.projectRoot.project.updateProject(workspaceSlug, projectId, {
+        //   estimate: estimate.id,
+        // });
+        runInAction(() => {
+          if (estimate.id)
+            set(
+              this.estimates,
+              [estimate.id],
+              new Estimate(this.store, { ...estimate, type: estimate.type?.toLowerCase() as TEstimateSystemKeys })
+            );
+        });
+      }
+
+      return estimate;
+    } catch (error) {
+      this.error = {
+        status: "error",
+        message: "Error creating estimate",
+      };
+      throw error;
+    }
+  };
+
+  /**
+   * @description delete the estimate for a project
+   * @param workspaceSlug
+   * @param projectId
+   * @param estimateId
+   */
+  deleteEstimate = async (workspaceSlug: string, projectId: string, estimateId: string) => {
+    try {
+      await estimateService.deleteEstimate(workspaceSlug, projectId, estimateId);
+      runInAction(() => estimateId && unset(this.estimates, [estimateId]));
+    } catch (error) {
+      this.error = {
+        status: "error",
+        message: "Error deleting estimate",
+      };
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/favorite.store.ts b/apps/web/core/store/favorite.store.ts
new file mode 100644
index 0000000..acf87ab
--- /dev/null
+++ b/apps/web/core/store/favorite.store.ts
@@ -0,0 +1,445 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { orderBy, uniqBy, set } from "lodash-es";
+import { action, observable, makeObservable, runInAction, computed } from "mobx";
+import { v4 as uuidv4 } from "uuid";
+import type { IFavorite } from "@plane/types";
+import { FavoriteService } from "@/services/favorite";
+import type { CoreRootStore } from "./root.store";
+
+export interface IFavoriteStore {
+  // observables
+  favoriteIds: string[];
+  favoriteMap: {
+    [favoriteId: string]: IFavorite;
+  };
+  entityMap: {
+    [entityId: string]: IFavorite;
+  };
+  // computed actions
+  existingFolders: string[];
+  groupedFavorites: { [favoriteId: string]: IFavorite };
+  // actions
+  fetchFavorite: (workspaceSlug: string) => Promise<IFavorite[]>;
+  // CRUD actions
+  addFavorite: (workspaceSlug: string, data: Partial<IFavorite>) => Promise<IFavorite>;
+  updateFavorite: (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => Promise<IFavorite>;
+  deleteFavorite: (workspaceSlug: string, favoriteId: string) => Promise<void>;
+  fetchGroupedFavorites: (workspaceSlug: string, favoriteId: string) => Promise<IFavorite[]>;
+  moveFavoriteToFolder: (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => Promise<void>;
+  removeFavoriteEntity: (workspaceSlug: string, entityId: string) => Promise<void>;
+  reOrderFavorite: (
+    workspaceSlug: string,
+    favoriteId: string,
+    destinationId: string,
+    edge: string | undefined
+  ) => Promise<void>;
+  removeFromFavoriteFolder: (workspaceSlug: string, favoriteId: string) => Promise<void>;
+  removeFavoriteFromStore: (entity_identifier: string) => void;
+}
+
+export class FavoriteStore implements IFavoriteStore {
+  // observables
+  favoriteIds: string[] = [];
+  favoriteMap: {
+    [favoriteId: string]: IFavorite;
+  } = {};
+  entityMap: {
+    [entityId: string]: IFavorite;
+  } = {};
+  // service
+  favoriteService;
+  rootStore;
+  viewStore;
+  projectStore;
+  pageStore;
+  cycleStore;
+  moduleStore;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observable
+      favoriteMap: observable,
+      entityMap: observable,
+      favoriteIds: observable,
+      //computed
+      currentWorkspaceFavorites: computed,
+      existingFolders: computed,
+      groupedFavorites: computed,
+      // action
+      fetchFavorite: action,
+      // CRUD actions
+      addFavorite: action,
+      fetchGroupedFavorites: action,
+      moveFavoriteToFolder: action,
+      removeFavoriteEntity: action,
+      reOrderFavorite: action,
+      removeFavoriteEntityFromStore: action,
+      removeFromFavoriteFolder: action,
+    });
+    this.favoriteService = new FavoriteService();
+    this.rootStore = _rootStore;
+    this.viewStore = _rootStore.projectView;
+    this.projectStore = _rootStore.projectRoot.project;
+    this.moduleStore = _rootStore.module;
+    this.cycleStore = _rootStore.cycle;
+    this.pageStore = _rootStore.projectPages;
+  }
+
+  get currentWorkspaceFavorites() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return {};
+    return Object.values(this.favoriteMap)
+      .filter((fav: IFavorite) => fav.workspace_id === currentWorkspace.id)
+      .reduce(
+        (acc, fav) => {
+          acc[fav.id] = fav;
+          return acc;
+        },
+        {} as { [favoriteId: string]: IFavorite }
+      );
+  }
+
+  get existingFolders() {
+    return Object.values(this.favoriteMap).map((fav) => fav.name);
+  }
+
+  get groupedFavorites() {
+    const data: { [favoriteId: string]: IFavorite } = JSON.parse(JSON.stringify(this.currentWorkspaceFavorites));
+
+    Object.values(data).forEach((fav) => {
+      if (fav.parent && data[fav.parent]) {
+        if (data[fav.parent].children) {
+          if (!data[fav.parent].children.some((f) => f.id === fav.id)) {
+            data[fav.parent].children.push(fav);
+          }
+        } else {
+          data[fav.parent].children = [fav];
+        }
+      }
+    });
+    return data;
+  }
+
+  /**
+   * Creates a favorite in the workspace and adds it to the store
+   * @param workspaceSlug
+   * @param data
+   * @returns Promise<IFavorite>
+   */
+  addFavorite = async (workspaceSlug: string, data: Partial<IFavorite>) => {
+    data = { ...data, parent: null, is_folder: data.entity_type === "folder" };
+
+    if (data.entity_identifier && this.entityMap[data.entity_identifier]) return this.entityMap[data.entity_identifier];
+    const id = uuidv4();
+    try {
+      // optimistic addition
+      runInAction(() => {
+        set(this.favoriteMap, [id], data);
+        if (data.entity_identifier) {
+          set(this.entityMap, [data.entity_identifier], data);
+        }
+        this.favoriteIds = [id, ...this.favoriteIds];
+      });
+      const response = await this.favoriteService.addFavorite(workspaceSlug, data);
+
+      // overwrite the temp id
+      runInAction(() => {
+        delete this.favoriteMap[id];
+        set(this.favoriteMap, [response.id], response);
+        if (response.entity_identifier) {
+          set(this.entityMap, [response.entity_identifier], response);
+        }
+        this.favoriteIds = [response.id, ...this.favoriteIds.filter((favId) => favId !== id)];
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        delete this.favoriteMap[id];
+        if (data.entity_identifier) {
+          delete this.entityMap[data.entity_identifier];
+        }
+      });
+      this.favoriteIds = this.favoriteIds.filter((favId) => favId !== id);
+
+      console.error("Failed to create favorite from favorite store");
+      throw error;
+    }
+  };
+
+  /**
+   * Updates a favorite in the workspace and updates the store
+   * @param workspaceSlug
+   * @param favoriteId
+   * @param data
+   * @returns Promise<IFavorite>
+   */
+  updateFavorite = async (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => {
+    const initialState = this.favoriteMap[favoriteId];
+    try {
+      runInAction(() => {
+        set(this.favoriteMap, [favoriteId], { ...this.favoriteMap[favoriteId], ...data });
+      });
+      const response = await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, data);
+
+      return response;
+    } catch (error) {
+      console.error("Failed to update favorite from favorite store");
+      runInAction(() => {
+        set(this.favoriteMap, [favoriteId], initialState);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Moves a favorite in the workspace and updates the store
+   * @param workspaceSlug
+   * @param favoriteId
+   * @param data
+   * @returns Promise<void>
+   */
+  moveFavoriteToFolder = async (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => {
+    try {
+      await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, data);
+      runInAction(() => {
+        // add parent of the favorite
+        set(this.favoriteMap, [favoriteId, "parent"], data.parent);
+      });
+    } catch (error) {
+      console.error("Failed to move favorite to folder", error);
+      throw error;
+    }
+  };
+
+  reOrderFavorite = async (
+    workspaceSlug: string,
+    favoriteId: string,
+    destinationId: string,
+    edge: string | undefined
+  ) => {
+    try {
+      let resultSequence = 10000;
+      if (edge) {
+        const sortedIds = orderBy(Object.values(this.favoriteMap), "sequence", "desc").map((fav: IFavorite) => fav.id);
+        const destinationSequence = this.favoriteMap[destinationId]?.sequence || undefined;
+        if (destinationSequence) {
+          const destinationIndex = sortedIds.findIndex((id) => id === destinationId);
+          if (edge === "reorder-above") {
+            const prevSequence = this.favoriteMap[sortedIds[destinationIndex - 1]]?.sequence || undefined;
+            if (prevSequence) {
+              resultSequence = (destinationSequence + prevSequence) / 2;
+            } else {
+              resultSequence = destinationSequence + resultSequence;
+            }
+          } else {
+            resultSequence = destinationSequence - resultSequence;
+          }
+        }
+      }
+
+      await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { sequence: resultSequence });
+
+      runInAction(() => {
+        set(this.favoriteMap, [favoriteId, "sequence"], resultSequence);
+      });
+    } catch (error) {
+      console.error("Failed to move favorite folder");
+      throw error;
+    }
+  };
+
+  removeFromFavoriteFolder = async (workspaceSlug: string, favoriteId: string) => {
+    try {
+      await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { parent: null });
+      runInAction(() => {
+        //remove parent
+        set(this.favoriteMap, [favoriteId, "parent"], null);
+      });
+    } catch (error) {
+      console.error("Failed to move favorite");
+      throw error;
+    }
+  };
+
+  removeFavoriteEntityFromStore = (entity_identifier: string, entity_type: string) => {
+    switch (entity_type) {
+      case "view":
+        return (
+          this.viewStore.viewMap[entity_identifier] && (this.viewStore.viewMap[entity_identifier].is_favorite = false)
+        );
+      case "module":
+        return (
+          this.moduleStore.moduleMap[entity_identifier] &&
+          (this.moduleStore.moduleMap[entity_identifier].is_favorite = false)
+        );
+      case "page":
+        return this.pageStore.data[entity_identifier] && (this.pageStore.data[entity_identifier].is_favorite = false);
+      case "cycle":
+        return (
+          this.cycleStore.cycleMap[entity_identifier] &&
+          (this.cycleStore.cycleMap[entity_identifier].is_favorite = false)
+        );
+      case "project":
+        return (
+          this.projectStore.projectMap[entity_identifier] &&
+          (this.projectStore.projectMap[entity_identifier].is_favorite = false)
+        );
+      default:
+        return;
+    }
+  };
+
+  /**
+   * Deletes a favorite from the workspace and updates the store
+   * @param workspaceSlug
+   * @param favoriteId
+   * @returns Promise<void>
+   */
+  deleteFavorite = async (workspaceSlug: string, favoriteId: string) => {
+    if (!this.favoriteMap[favoriteId]) return;
+    const parent = this.favoriteMap[favoriteId].parent;
+    const children = this.groupedFavorites[favoriteId].children;
+    const entity_identifier = this.favoriteMap[favoriteId].entity_identifier;
+    const initialState = this.favoriteMap[favoriteId];
+
+    try {
+      await this.favoriteService.deleteFavorite(workspaceSlug, favoriteId);
+      runInAction(() => {
+        delete this.favoriteMap[favoriteId];
+        if (entity_identifier) {
+          delete this.entityMap[entity_identifier];
+        }
+        this.favoriteIds = this.favoriteIds.filter((id) => id !== favoriteId);
+      });
+      runInAction(() => {
+        if (entity_identifier) {
+          this.removeFavoriteEntityFromStore(entity_identifier, initialState.entity_type);
+        }
+        if (children) {
+          children.forEach((child) => {
+            if (!child.entity_identifier) return;
+            this.removeFavoriteEntityFromStore(child.entity_identifier, child.entity_type);
+          });
+        }
+      });
+    } catch (error) {
+      console.error("Failed to delete favorite from favorite store", error);
+      runInAction(() => {
+        if (parent) set(this.favoriteMap, [parent, "children"], [...this.favoriteMap[parent].children, initialState]);
+        set(this.favoriteMap, [favoriteId], initialState);
+        if (entity_identifier) {
+          set(this.entityMap, [entity_identifier], initialState);
+        }
+        this.favoriteIds = [favoriteId, ...this.favoriteIds];
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Removes a favorite entity from the workspace and updates the store
+   * @param workspaceSlug
+   * @param entityId
+   * @returns Promise<void>
+   */
+  removeFavoriteEntity = async (workspaceSlug: string, entityId: string) => {
+    const initialState = this.entityMap[entityId];
+    try {
+      const favoriteId = this.entityMap[entityId].id;
+      await this.deleteFavorite(workspaceSlug, favoriteId);
+    } catch (error) {
+      console.error("Failed to remove favorite entity from favorite store", error);
+      runInAction(() => {
+        set(this.entityMap, [entityId], initialState);
+      });
+      throw error;
+    }
+  };
+
+  removeFavoriteFromStore = (entity_identifier: string) => {
+    try {
+      const favoriteId = this.entityMap[entity_identifier]?.id;
+      const oldData = this.favoriteMap[favoriteId];
+      const projectData = Object.values(this.favoriteMap).filter(
+        (fav) => fav.project_id === entity_identifier && fav.entity_type !== "project"
+      );
+      runInAction(() => {
+        if (projectData) {
+          projectData.forEach(async (fav) => {
+            if (fav.entity_identifier) {
+              this.removeFavoriteFromStore(fav.entity_identifier);
+              this.removeFavoriteEntityFromStore(fav.entity_identifier, fav.entity_type);
+            }
+          });
+        }
+
+        if (!favoriteId) return;
+        delete this.favoriteMap[favoriteId];
+        if (entity_identifier) {
+          this.removeFavoriteEntityFromStore(entity_identifier, oldData.entity_type);
+        }
+        delete this.entityMap[entity_identifier];
+        this.favoriteIds = this.favoriteIds.filter((id) => id !== favoriteId);
+      });
+    } catch (error) {
+      console.error("Failed to remove favorite from favorite store", error);
+      throw error;
+    }
+  };
+  /**
+   * get Grouped Favorites
+   * @param workspaceSlug
+   * @param favoriteId
+   * @returns Promise<IFavorite[]>
+   */
+  fetchGroupedFavorites = async (workspaceSlug: string, favoriteId: string) => {
+    if (!favoriteId) return [];
+    try {
+      const response = await this.favoriteService.getGroupedFavorites(workspaceSlug, favoriteId);
+      runInAction(() => {
+        // add the favorites to the map
+        response.forEach((favorite) => {
+          set(this.favoriteMap, [favorite.id], favorite);
+          this.favoriteIds.push(favorite.id);
+          this.favoriteIds = uniqBy(this.favoriteIds, (id) => id);
+          if (favorite.entity_identifier) set(this.entityMap, [favorite.entity_identifier], favorite);
+        });
+      });
+
+      return response;
+    } catch (error) {
+      console.error("Failed to get grouped favorites from favorite store");
+      throw error;
+    }
+  };
+
+  /**
+   * get Workspace favorite using workspace slug
+   * @param workspaceSlug
+   * @returns Promise<IFavorite[]>
+   *
+   */
+  fetchFavorite = async (workspaceSlug: string) => {
+    try {
+      const favorites = await this.favoriteService.getFavorites(workspaceSlug);
+      runInAction(() => {
+        favorites.forEach((favorite) => {
+          set(this.favoriteMap, [favorite.id], favorite);
+          this.favoriteIds.push(favorite.id);
+          if (favorite.entity_identifier) {
+            set(this.entityMap, [favorite.entity_identifier], favorite);
+          }
+        });
+      });
+      return favorites;
+    } catch (error) {
+      console.error("Failed to fetch favorites from workspace store");
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/global-view.store.ts b/apps/web/core/store/global-view.store.ts
new file mode 100644
index 0000000..185604f
--- /dev/null
+++ b/apps/web/core/store/global-view.store.ts
@@ -0,0 +1,203 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set, cloneDeep, isEqual } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { IWorkspaceView } from "@plane/types";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// store
+import type { CoreRootStore } from "./root.store";
+
+export interface IGlobalViewStore {
+  // observables
+  globalViewMap: Record<string, IWorkspaceView>;
+  // computed
+  currentWorkspaceViews: string[] | null;
+  // computed actions
+  getSearchedViews: (searchQuery: string) => string[] | null;
+  getViewDetailsById: (viewId: string) => IWorkspaceView | null;
+  // fetch actions
+  fetchAllGlobalViews: (workspaceSlug: string) => Promise<IWorkspaceView[]>;
+  fetchGlobalViewDetails: (workspaceSlug: string, viewId: string) => Promise<IWorkspaceView>;
+  // crud actions
+  createGlobalView: (workspaceSlug: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
+  updateGlobalView: (
+    workspaceSlug: string,
+    viewId: string,
+    data: Partial<IWorkspaceView>,
+    shouldSyncFilters?: boolean
+  ) => Promise<IWorkspaceView | undefined>;
+  deleteGlobalView: (workspaceSlug: string, viewId: string) => Promise<any>;
+}
+
+export class GlobalViewStore implements IGlobalViewStore {
+  // observables
+  globalViewMap: Record<string, IWorkspaceView> = {};
+  // root store
+  rootStore;
+  // services
+  workspaceService;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      globalViewMap: observable,
+      // computed
+      currentWorkspaceViews: computed,
+      // actions
+      fetchAllGlobalViews: action,
+      fetchGlobalViewDetails: action,
+      deleteGlobalView: action,
+      updateGlobalView: action,
+      createGlobalView: action,
+    });
+
+    // root store
+    this.rootStore = _rootStore;
+    // services
+    this.workspaceService = new WorkspaceService();
+
+    this.createGlobalView = this.createGlobalView.bind(this);
+    this.updateGlobalView = this.updateGlobalView.bind(this);
+  }
+
+  /**
+   * @description returns list of views for current workspace
+   */
+  get currentWorkspaceViews() {
+    const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspaceDetails) return null;
+
+    return (
+      Object.keys(this.globalViewMap ?? {})?.filter(
+        (viewId) => this.globalViewMap[viewId]?.workspace === currentWorkspaceDetails.id
+      ) ?? null
+    );
+  }
+
+  /**
+   * @description returns list of views for current workspace based on search query
+   * @param searchQuery
+   * @returns
+   */
+  getSearchedViews = computedFn((searchQuery: string) => {
+    const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspaceDetails) return null;
+
+    return (
+      Object.keys(this.globalViewMap ?? {})?.filter(
+        (viewId) =>
+          this.globalViewMap[viewId]?.workspace === currentWorkspaceDetails.id &&
+          this.globalViewMap[viewId]?.name?.toLowerCase().includes(searchQuery.toLowerCase())
+      ) ?? null
+    );
+  });
+
+  /**
+   * @description returns view details for given viewId
+   * @param viewId
+   */
+  getViewDetailsById = computedFn((viewId: string): IWorkspaceView | null => this.globalViewMap[viewId] ?? null);
+
+  /**
+   * @description fetch all global views for given workspace
+   * @param workspaceSlug
+   */
+  fetchAllGlobalViews = async (workspaceSlug: string): Promise<IWorkspaceView[]> =>
+    await this.workspaceService.getAllViews(workspaceSlug).then((response) => {
+      runInAction(() => {
+        response.forEach((view) => {
+          set(this.globalViewMap, view.id, view);
+        });
+      });
+      return response;
+    });
+
+  /**
+   * @description fetch view details for given viewId
+   * @param viewId
+   */
+  fetchGlobalViewDetails = async (workspaceSlug: string, viewId: string): Promise<IWorkspaceView> =>
+    await this.workspaceService.getViewDetails(workspaceSlug, viewId).then((response) => {
+      runInAction(() => {
+        set(this.globalViewMap, viewId, response);
+      });
+      return response;
+    });
+
+  /**
+   * @description create new global view
+   * @param workspaceSlug
+   * @param data
+   */
+  async createGlobalView(workspaceSlug: string, data: Partial<IWorkspaceView>) {
+    try {
+      const response = await this.workspaceService.createView(workspaceSlug, data);
+      runInAction(() => {
+        set(this.globalViewMap, response.id, response);
+      });
+
+      return response;
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }
+
+  /**
+   * @description update global view
+   * @param workspaceSlug
+   * @param viewId
+   * @param data
+   */
+  async updateGlobalView(
+    workspaceSlug: string,
+    viewId: string,
+    data: Partial<IWorkspaceView>,
+    shouldSyncFilters: boolean = true
+  ): Promise<IWorkspaceView | undefined> {
+    const currentViewData = this.getViewDetailsById(viewId) ? cloneDeep(this.getViewDetailsById(viewId)) : undefined;
+    try {
+      Object.keys(data).forEach((key) => {
+        const currentKey = key as keyof IWorkspaceView;
+        set(this.globalViewMap, [viewId, currentKey], data[currentKey]);
+      });
+
+      const currentView = await this.workspaceService.updateView(workspaceSlug, viewId, data);
+
+      // applying the filters in the global view
+      if (shouldSyncFilters && !isEqual(currentViewData?.rich_filters || {}, currentView?.rich_filters || {})) {
+        await this.rootStore.issue.workspaceIssuesFilter.updateFilterExpression(
+          workspaceSlug,
+          viewId,
+          currentView?.rich_filters || {}
+        );
+        this.rootStore.issue.workspaceIssues.fetchIssuesWithExistingPagination(workspaceSlug, viewId, "mutation");
+      }
+      return currentView;
+    } catch {
+      Object.keys(data).forEach((key) => {
+        const currentKey = key as keyof IWorkspaceView;
+        if (currentViewData) set(this.globalViewMap, [viewId, currentKey], currentViewData[currentKey]);
+      });
+    }
+  }
+
+  /**
+   * @description delete global view
+   * @param workspaceSlug
+   * @param viewId
+   */
+  deleteGlobalView = async (workspaceSlug: string, viewId: string): Promise<any> =>
+    await this.workspaceService.deleteView(workspaceSlug, viewId).then(() => {
+      runInAction(() => {
+        delete this.globalViewMap[viewId];
+      });
+    });
+}
diff --git a/apps/web/core/store/inbox/inbox-issue.store.ts b/apps/web/core/store/inbox/inbox-issue.store.ts
new file mode 100644
index 0000000..49a7d78
--- /dev/null
+++ b/apps/web/core/store/inbox/inbox-issue.store.ts
@@ -0,0 +1,280 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { clone, set } from "lodash-es";
+import { makeObservable, observable, runInAction, action } from "mobx";
+import type {
+  TInboxIssue,
+  TInboxIssueStatus,
+  EInboxIssueSource,
+  TIssue,
+  TInboxDuplicateIssueDetails,
+} from "@plane/types";
+import { EInboxIssueStatus } from "@plane/types";
+// helpers
+// services
+import { InboxIssueService } from "@/services/inbox";
+import { IssueService } from "@/services/issue";
+// store
+import type { CoreRootStore } from "../root.store";
+
+export interface IInboxIssueStore {
+  isLoading: boolean;
+  id: string;
+  status: TInboxIssueStatus;
+  issue: Partial<TIssue>;
+  snoozed_till: Date | undefined;
+  source: EInboxIssueSource | undefined;
+  duplicate_to: string | undefined;
+  created_by: string | undefined;
+  duplicate_issue_detail: TInboxDuplicateIssueDetails | undefined;
+  // actions
+  updateInboxIssueStatus: (status: TInboxIssueStatus) => Promise<void>; // accept, decline
+  updateInboxIssueDuplicateTo: (issueId: string) => Promise<void>; // connecting the inbox issue to the project existing issue
+  updateInboxIssueSnoozeTill: (date: Date | undefined) => Promise<void>; // snooze the issue
+  updateIssue: (issue: Partial<TIssue>) => Promise<void>; // updating the issue
+  updateProjectIssue: (issue: Partial<TIssue>) => Promise<void>; // updating the issue
+  fetchIssueActivity: () => Promise<void>; // fetching the issue activity
+}
+
+export class InboxIssueStore implements IInboxIssueStore {
+  // observables
+  isLoading: boolean = false;
+  id: string;
+  status: TInboxIssueStatus = EInboxIssueStatus.PENDING;
+  issue: Partial<TIssue> = {};
+  snoozed_till: Date | undefined;
+  source: EInboxIssueSource | undefined;
+  duplicate_to: string | undefined;
+  created_by: string | undefined;
+  duplicate_issue_detail: TInboxDuplicateIssueDetails | undefined = undefined;
+  workspaceSlug: string;
+  projectId: string;
+  // services
+  inboxIssueService;
+  issueService;
+
+  constructor(
+    workspaceSlug: string,
+    projectId: string,
+    data: TInboxIssue,
+    private store: CoreRootStore
+  ) {
+    this.id = data.id;
+    this.status = data.status;
+    this.issue = data?.issue;
+    this.snoozed_till = data?.snoozed_till || undefined;
+    this.duplicate_to = data?.duplicate_to || undefined;
+    this.created_by = data?.created_by || undefined;
+    this.source = data?.source || undefined;
+    this.duplicate_issue_detail = data?.duplicate_issue_detail || undefined;
+    this.workspaceSlug = workspaceSlug;
+    this.projectId = projectId;
+    // services
+    this.inboxIssueService = new InboxIssueService();
+    this.issueService = new IssueService();
+    // observable variables should be defined after the initialization of the values
+    makeObservable(this, {
+      id: observable,
+      status: observable,
+      issue: observable,
+      snoozed_till: observable,
+      duplicate_to: observable,
+      duplicate_issue_detail: observable,
+      created_by: observable,
+      source: observable,
+      // actions
+      updateInboxIssueStatus: action,
+      updateInboxIssueDuplicateTo: action,
+      updateInboxIssueSnoozeTill: action,
+      updateIssue: action,
+      updateProjectIssue: action,
+      fetchIssueActivity: action,
+    });
+  }
+
+  updateInboxIssueStatus = async (status: TInboxIssueStatus) => {
+    const previousData: Partial<TInboxIssue> = {
+      status: this.status,
+    };
+    const previousStatus = this.status;
+
+    try {
+      if (!this.issue.id) return;
+
+      const inboxIssue = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
+        status: status,
+      });
+      runInAction(() => {
+        set(this, "status", inboxIssue?.status);
+
+        // Handle intake_count transitions
+        if (previousStatus === EInboxIssueStatus.PENDING && inboxIssue.status !== EInboxIssueStatus.PENDING) {
+          // Changed from PENDING to something else: decrement
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(
+            this.store.projectRoot.project.projectMap,
+            [this.projectId, "intake_count"],
+            Math.max(0, currentCount - 1)
+          );
+        } else if (previousStatus !== EInboxIssueStatus.PENDING && inboxIssue.status === EInboxIssueStatus.PENDING) {
+          // Changed from something else to PENDING: increment
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(this.store.projectRoot.project.projectMap, [this.projectId, "intake_count"], currentCount + 1);
+        }
+      });
+
+      // Update counts
+      const currentTotalResults = this.store.projectInbox.inboxIssuePaginationInfo?.total_results ?? 0;
+      const updatedCount = currentTotalResults > 0 ? currentTotalResults - 1 : currentTotalResults;
+      set(this.store.projectInbox, ["inboxIssuePaginationInfo", "total_results"], updatedCount);
+
+      // If issue accepted sync issue to local db
+      if (status === EInboxIssueStatus.ACCEPTED) {
+        const updatedIssue = { ...this.issue, ...inboxIssue.issue };
+        this.store.issue.issues.addIssue([updatedIssue]);
+      }
+    } catch {
+      runInAction(() => set(this, "status", previousData.status));
+    }
+  };
+
+  updateInboxIssueDuplicateTo = async (issueId: string) => {
+    const inboxStatus = EInboxIssueStatus.DUPLICATE;
+    const previousData: Partial<TInboxIssue> = {
+      status: this.status,
+      duplicate_to: this.duplicate_to,
+      duplicate_issue_detail: this.duplicate_issue_detail,
+    };
+    const wasPending = this.status === EInboxIssueStatus.PENDING;
+    try {
+      if (!this.issue.id) return;
+      const inboxIssue = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
+        status: inboxStatus,
+        duplicate_to: issueId,
+      });
+      runInAction(() => {
+        set(this, "status", inboxIssue?.status);
+        set(this, "duplicate_to", inboxIssue?.duplicate_to);
+        set(this, "duplicate_issue_detail", inboxIssue?.duplicate_issue_detail);
+        // Decrement intake_count if the issue was PENDING
+        if (wasPending) {
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(
+            this.store.projectRoot.project.projectMap,
+            [this.projectId, "intake_count"],
+            Math.max(0, currentCount - 1)
+          );
+        }
+      });
+    } catch {
+      runInAction(() => {
+        set(this, "status", previousData.status);
+        set(this, "duplicate_to", previousData.duplicate_to);
+        set(this, "duplicate_issue_detail", previousData.duplicate_issue_detail);
+      });
+    }
+  };
+
+  updateInboxIssueSnoozeTill = async (date: Date | undefined) => {
+    const inboxStatus = date ? EInboxIssueStatus.SNOOZED : EInboxIssueStatus.PENDING;
+    const previousData: Partial<TInboxIssue> = {
+      status: this.status,
+      snoozed_till: this.snoozed_till,
+    };
+    const previousStatus = this.status;
+    try {
+      if (!this.issue.id) return;
+      const inboxIssue = await this.inboxIssueService.update(this.workspaceSlug, this.projectId, this.issue.id, {
+        status: inboxStatus,
+        snoozed_till: date ? new Date(date) : null,
+      });
+      runInAction(() => {
+        set(this, "status", inboxIssue?.status);
+        set(this, "snoozed_till", inboxIssue?.snoozed_till);
+        // Handle intake_count transitions
+        if (previousStatus === EInboxIssueStatus.PENDING && inboxIssue.status === EInboxIssueStatus.SNOOZED) {
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(
+            this.store.projectRoot.project.projectMap,
+            [this.projectId, "intake_count"],
+            Math.max(0, currentCount - 1)
+          );
+        } else if (previousStatus !== EInboxIssueStatus.PENDING && inboxIssue.status === EInboxIssueStatus.PENDING) {
+          const currentCount = this.store.projectRoot.project.projectMap[this.projectId]?.intake_count ?? 0;
+          set(this.store.projectRoot.project.projectMap, [this.projectId, "intake_count"], currentCount + 1);
+        }
+      });
+    } catch {
+      runInAction(() => {
+        set(this, "status", previousData.status);
+        set(this, "snoozed_till", previousData.snoozed_till);
+      });
+    }
+  };
+
+  updateIssue = async (issue: Partial<TIssue>) => {
+    const inboxIssue = clone(this.issue);
+    try {
+      if (!this.issue.id) return;
+      Object.keys(issue).forEach((key) => {
+        const issueKey = key as keyof TIssue;
+        set(this.issue, issueKey, issue[issueKey]);
+      });
+      await this.inboxIssueService.updateIssue(this.workspaceSlug, this.projectId, this.issue.id, issue);
+      // fetching activity
+      this.fetchIssueActivity();
+    } catch {
+      Object.keys(issue).forEach((key) => {
+        const issueKey = key as keyof TIssue;
+        set(this.issue, issueKey, inboxIssue[issueKey]);
+      });
+    }
+  };
+
+  updateProjectIssue = async (issue: Partial<TIssue>) => {
+    const inboxIssue = clone(this.issue);
+    try {
+      if (!this.issue.id) return;
+      Object.keys(issue).forEach((key) => {
+        const issueKey = key as keyof TIssue;
+        set(this.issue, issueKey, issue[issueKey]);
+      });
+      await this.issueService.patchIssue(this.workspaceSlug, this.projectId, this.issue.id, issue);
+      if (issue.cycle_id) {
+        await this.store.issue.issueDetail.addIssueToCycle(this.workspaceSlug, this.projectId, issue.cycle_id, [
+          this.issue.id,
+        ]);
+      }
+      if (issue.module_ids) {
+        await this.store.issue.issueDetail.changeModulesInIssue(
+          this.workspaceSlug,
+          this.projectId,
+          this.issue.id,
+          issue.module_ids,
+          []
+        );
+      }
+
+      // fetching activity
+      this.fetchIssueActivity();
+    } catch {
+      Object.keys(issue).forEach((key) => {
+        const issueKey = key as keyof TIssue;
+        set(this.issue, issueKey, inboxIssue[issueKey]);
+      });
+    }
+  };
+
+  fetchIssueActivity = async () => {
+    try {
+      if (!this.issue.id) return;
+      await this.store.issue.issueDetail.fetchActivities(this.workspaceSlug, this.projectId, this.issue.id);
+    } catch {
+      console.error("Failed to fetch issue activity");
+    }
+  };
+}
diff --git a/apps/web/core/store/inbox/project-inbox.store.ts b/apps/web/core/store/inbox/project-inbox.store.ts
new file mode 100644
index 0000000..6dc1f96
--- /dev/null
+++ b/apps/web/core/store/inbox/project-inbox.store.ts
@@ -0,0 +1,525 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { uniq, update, isEmpty, omit, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+import type { EPastDurationFilters } from "@plane/constants";
+// types
+import type {
+  TInboxIssue,
+  TInboxIssueCurrentTab,
+  TInboxIssueFilter,
+  TInboxIssueSorting,
+  TInboxIssuePaginationInfo,
+  TInboxIssueSortingOrderByQueryParam,
+} from "@plane/types";
+import { EInboxIssueCurrentTab, EInboxIssueStatus } from "@plane/types";
+import { getCustomDates } from "@plane/utils";
+// helpers
+// services
+import { InboxIssueService } from "@/services/inbox";
+// root store
+import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
+import { InboxIssueStore } from "@/store/inbox/inbox-issue.store";
+import type { CoreRootStore } from "../root.store";
+
+type TLoader =
+  | "init-loading"
+  | "mutation-loading"
+  | "filter-loading"
+  | "pagination-loading"
+  | "issue-loading"
+  | undefined;
+
+export interface IProjectInboxStore {
+  currentTab: TInboxIssueCurrentTab;
+  loader: TLoader;
+  error: { message: string; status: "init-error" | "pagination-error" } | undefined;
+  currentInboxProjectId: string;
+  filtersMap: Record<string, Partial<TInboxIssueFilter>>; // projectId -> Partial<TInboxIssueFilter>
+  sortingMap: Record<string, Partial<TInboxIssueSorting>>; // projectId -> Partial<TInboxIssueSorting>
+  inboxIssuePaginationInfo: TInboxIssuePaginationInfo | undefined;
+  inboxIssues: Record<string, IInboxIssueStore>; // issue_id -> IInboxIssueStore
+  inboxIssueIds: string[];
+  // computed
+  inboxFilters: Partial<TInboxIssueFilter>; // computed project inbox filters
+  inboxSorting: Partial<TInboxIssueSorting>; // computed project inbox sorting
+  getAppliedFiltersCount: number;
+  filteredInboxIssueIds: string[];
+  // computed functions
+  getIssueInboxByIssueId: (issueId: string) => IInboxIssueStore;
+  getIsIssueAvailable: (inboxIssueId: string) => boolean;
+  // helper actions
+  inboxIssueQueryParams: (
+    inboxFilters: Partial<TInboxIssueFilter>,
+    inboxSorting: Partial<TInboxIssueSorting>,
+    pagePerCount: number,
+    paginationCursor: string
+  ) => Partial<Record<keyof TInboxIssueFilter, string>>;
+  createOrUpdateInboxIssue: (inboxIssues: TInboxIssue[], workspaceSlug: string, projectId: string) => void;
+  initializeDefaultFilters: (projectId: string, tab: TInboxIssueCurrentTab) => void;
+  // actions
+  handleCurrentTab: (workspaceSlug: string, projectId: string, tab: TInboxIssueCurrentTab) => void;
+  handleInboxIssueFilters: <T extends keyof TInboxIssueFilter>(key: T, value: TInboxIssueFilter[T]) => void; // if user sends me undefined, I will remove the value from the filter key
+  handleInboxIssueSorting: <T extends keyof TInboxIssueSorting>(key: T, value: TInboxIssueSorting[T]) => void; // if user sends me undefined, I will remove the value from the filter key
+  fetchInboxIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    loadingType?: TLoader,
+    tab?: TInboxIssueCurrentTab
+  ) => Promise<void>;
+  fetchInboxPaginationIssues: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchInboxIssueById: (workspaceSlug: string, projectId: string, inboxIssueId: string) => Promise<TInboxIssue>;
+  createInboxIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    data: Partial<TInboxIssue>
+  ) => Promise<TInboxIssue | undefined>;
+  deleteInboxIssue: (workspaceSlug: string, projectId: string, inboxIssueId: string) => Promise<void>;
+}
+
+export class ProjectInboxStore implements IProjectInboxStore {
+  // constants
+  PER_PAGE_COUNT = 10;
+  // observables
+  currentTab: TInboxIssueCurrentTab = EInboxIssueCurrentTab.OPEN;
+  loader: TLoader = "init-loading";
+  error: { message: string; status: "init-error" | "pagination-error" } | undefined = undefined;
+  currentInboxProjectId: string = "";
+  filtersMap: Record<string, Partial<TInboxIssueFilter>> = {};
+  sortingMap: Record<string, Partial<TInboxIssueSorting>> = {};
+  inboxIssuePaginationInfo: TInboxIssuePaginationInfo | undefined = undefined;
+  inboxIssues: Record<string, IInboxIssueStore> = {};
+  inboxIssueIds: string[] = [];
+  // services
+  inboxIssueService;
+
+  constructor(private store: CoreRootStore) {
+    makeObservable(this, {
+      currentTab: observable.ref,
+      loader: observable.ref,
+      error: observable,
+      currentInboxProjectId: observable.ref,
+      filtersMap: observable,
+      sortingMap: observable,
+      inboxIssuePaginationInfo: observable,
+      inboxIssues: observable,
+      inboxIssueIds: observable,
+      // computed
+      inboxFilters: computed,
+      inboxSorting: computed,
+      getAppliedFiltersCount: computed,
+      filteredInboxIssueIds: computed,
+      // actions
+      handleInboxIssueFilters: action,
+      handleInboxIssueSorting: action,
+      fetchInboxIssues: action,
+      fetchInboxPaginationIssues: action,
+      fetchInboxIssueById: action,
+      createInboxIssue: action,
+      deleteInboxIssue: action,
+    });
+    this.inboxIssueService = new InboxIssueService();
+  }
+
+  // computed
+  /**
+   * @description computed project inbox filters
+   */
+  get inboxFilters() {
+    if (!this.currentInboxProjectId) return {} as TInboxIssueFilter;
+    return this.filtersMap?.[this.currentInboxProjectId];
+  }
+
+  /**
+   * @description computed project inbox sorting
+   */
+  get inboxSorting() {
+    if (!this.currentInboxProjectId) return {} as TInboxIssueSorting;
+    return this.sortingMap?.[this.currentInboxProjectId];
+  }
+
+  get getAppliedFiltersCount() {
+    let count = 0;
+    this.inboxFilters != undefined &&
+      Object.keys(this.inboxFilters).forEach((key) => {
+        const filterKey = key as keyof TInboxIssueFilter;
+        if (this.inboxFilters[filterKey] && this.inboxFilters?.[filterKey])
+          count = count + (this.inboxFilters?.[filterKey]?.length ?? 0);
+      });
+    return count;
+  }
+
+  get filteredInboxIssueIds() {
+    let appliedFilters =
+      this.currentTab === EInboxIssueCurrentTab.OPEN
+        ? [EInboxIssueStatus.PENDING, EInboxIssueStatus.SNOOZED]
+        : [EInboxIssueStatus.ACCEPTED, EInboxIssueStatus.DECLINED, EInboxIssueStatus.DUPLICATE];
+    appliedFilters = appliedFilters.filter((filter) => this.inboxFilters?.status?.includes(filter));
+    const currentTime = new Date().getTime();
+
+    return this.currentTab === EInboxIssueCurrentTab.OPEN
+      ? this.inboxIssueIds.filter((id) => {
+          if (appliedFilters.length == 2) return true;
+          if (appliedFilters[0] === EInboxIssueStatus.SNOOZED)
+            return (
+              this.inboxIssues[id].status === EInboxIssueStatus.SNOOZED &&
+              currentTime < new Date(this.inboxIssues[id].snoozed_till!).getTime()
+            );
+          if (appliedFilters[0] === EInboxIssueStatus.PENDING)
+            return (
+              appliedFilters.includes(this.inboxIssues[id].status) ||
+              (this.inboxIssues[id].status === EInboxIssueStatus.SNOOZED &&
+                currentTime > new Date(this.inboxIssues[id].snoozed_till!).getTime())
+            );
+        })
+      : this.inboxIssueIds.filter((id) => appliedFilters.includes(this.inboxIssues[id].status));
+  }
+
+  getIssueInboxByIssueId = computedFn((issueId: string) => this.inboxIssues?.[issueId]);
+
+  getIsIssueAvailable = computedFn((inboxIssueId: string) => {
+    if (!this.inboxIssueIds) return true;
+    return this.inboxIssueIds.includes(inboxIssueId);
+  });
+
+  inboxIssueQueryParams = (
+    inboxFilters: Partial<TInboxIssueFilter>,
+    inboxSorting: Partial<TInboxIssueSorting>,
+    pagePerCount: number,
+    paginationCursor: string
+  ) => {
+    const filters: Partial<Record<keyof TInboxIssueFilter, string>> = {};
+    !isEmpty(inboxFilters) &&
+      Object.keys(inboxFilters).forEach((key) => {
+        const filterKey = key as keyof TInboxIssueFilter;
+        if (inboxFilters[filterKey] && inboxFilters[filterKey]?.length) {
+          if (["created_at", "updated_at"].includes(filterKey) && (inboxFilters[filterKey] || [])?.length > 0) {
+            const appliedDateFilters: string[] = [];
+            inboxFilters[filterKey]?.forEach((value) => {
+              const dateValue = value as EPastDurationFilters;
+              appliedDateFilters.push(getCustomDates(dateValue));
+            });
+            filters[filterKey] = appliedDateFilters?.join(",");
+          } else filters[filterKey] = inboxFilters[filterKey]?.join(",");
+        }
+      });
+
+    const sorting: TInboxIssueSortingOrderByQueryParam = {
+      order_by: "-issue__created_at",
+    };
+    if (inboxSorting?.order_by && inboxSorting?.sort_by) {
+      switch (inboxSorting.order_by) {
+        case "issue__created_at":
+          if (inboxSorting.sort_by === "desc") sorting.order_by = `-issue__created_at`;
+          else sorting.order_by = "issue__created_at";
+          break;
+        case "issue__updated_at":
+          if (inboxSorting.sort_by === "desc") sorting.order_by = `-issue__updated_at`;
+          else sorting.order_by = "issue__updated_at";
+          break;
+        case "issue__sequence_id":
+          if (inboxSorting.sort_by === "desc") sorting.order_by = `-issue__sequence_id`;
+          else sorting.order_by = "issue__sequence_id";
+          break;
+        default:
+          sorting.order_by = "-issue__created_at";
+          break;
+      }
+    }
+
+    return {
+      ...filters,
+      ...sorting,
+      per_page: pagePerCount,
+      cursor: paginationCursor,
+    };
+  };
+
+  createOrUpdateInboxIssue = (inboxIssues: TInboxIssue[], workspaceSlug: string, projectId: string) => {
+    if (inboxIssues && inboxIssues.length > 0) {
+      inboxIssues.forEach((inbox: TInboxIssue) => {
+        const existingInboxIssueDetail = this.getIssueInboxByIssueId(inbox?.issue?.id);
+        if (existingInboxIssueDetail)
+          Object.assign(existingInboxIssueDetail, {
+            ...inbox,
+            issue: {
+              ...existingInboxIssueDetail.issue,
+              ...inbox.issue,
+            },
+          });
+        else
+          set(this.inboxIssues, [inbox?.issue?.id], new InboxIssueStore(workspaceSlug, projectId, inbox, this.store));
+      });
+    }
+  };
+
+  // actions
+  handleCurrentTab = (workspaceSlug: string, projectId: string, tab: TInboxIssueCurrentTab) => {
+    if (workspaceSlug && projectId) {
+      runInAction(() => {
+        set(this, "currentTab", tab);
+        set(this, ["inboxIssueIds"], []);
+        set(this, ["inboxIssuePaginationInfo"], undefined);
+        set(this.sortingMap, [projectId], { order_by: "issue__created_at", sort_by: "desc" });
+        set(this.filtersMap, [projectId], {
+          status:
+            tab === EInboxIssueCurrentTab.OPEN
+              ? [EInboxIssueStatus.PENDING]
+              : [EInboxIssueStatus.ACCEPTED, EInboxIssueStatus.DECLINED, EInboxIssueStatus.DUPLICATE],
+        });
+      });
+      this.fetchInboxIssues(workspaceSlug, projectId, "filter-loading");
+    }
+  };
+
+  handleInboxIssueFilters = <T extends keyof TInboxIssueFilter>(key: T, value: TInboxIssueFilter[T]) => {
+    const { workspaceSlug } = this.store.router;
+    const projectId = this.currentInboxProjectId;
+    if (workspaceSlug && projectId) {
+      runInAction(() => {
+        set(this.filtersMap, [projectId, key], value);
+        set(this, ["inboxIssuePaginationInfo"], undefined);
+      });
+      this.fetchInboxIssues(workspaceSlug, projectId, "filter-loading");
+    }
+  };
+
+  handleInboxIssueSorting = <T extends keyof TInboxIssueSorting>(key: T, value: TInboxIssueSorting[T]) => {
+    const { workspaceSlug } = this.store.router;
+    const projectId = this.currentInboxProjectId;
+    if (workspaceSlug && projectId) {
+      runInAction(() => {
+        set(this.sortingMap, [projectId, key], value);
+        set(this, ["inboxIssuePaginationInfo"], undefined);
+      });
+      this.fetchInboxIssues(workspaceSlug, projectId, "filter-loading");
+    }
+  };
+
+  initializeDefaultFilters = (projectId: string, tab: TInboxIssueCurrentTab) => {
+    if (!projectId || !tab) return;
+    if (isEmpty(this.inboxFilters)) {
+      set(this.filtersMap, [projectId], {
+        status:
+          tab === EInboxIssueCurrentTab.OPEN
+            ? [EInboxIssueStatus.PENDING]
+            : [EInboxIssueStatus.ACCEPTED, EInboxIssueStatus.DECLINED, EInboxIssueStatus.DUPLICATE],
+      });
+    }
+    if (isEmpty(this.inboxSorting)) {
+      set(this.sortingMap, [projectId], { order_by: "issue__created_at", sort_by: "desc" });
+    }
+  };
+
+  /**
+   * @description fetch intake issues with paginated data
+   * @param workspaceSlug
+   * @param projectId
+   */
+  fetchInboxIssues = async (
+    workspaceSlug: string,
+    projectId: string,
+    loadingType: TLoader = undefined,
+    tab: TInboxIssueCurrentTab | undefined = undefined
+  ) => {
+    try {
+      if (loadingType === undefined && tab) this.initializeDefaultFilters(projectId, tab);
+
+      if (this.currentInboxProjectId != projectId) {
+        runInAction(() => {
+          set(this, ["currentInboxProjectId"], projectId);
+          set(this, ["inboxIssues"], {});
+          set(this, ["inboxIssueIds"], []);
+          set(this, ["inboxIssuePaginationInfo"], undefined);
+        });
+      }
+      if (Object.keys(this.inboxIssueIds).length === 0) this.loader = "init-loading";
+      else this.loader = "mutation-loading";
+      if (loadingType) this.loader = loadingType;
+
+      const status = this.inboxFilters?.status;
+      const queryParams = this.inboxIssueQueryParams(
+        { ...this.inboxFilters, status },
+        this.inboxSorting,
+        this.PER_PAGE_COUNT,
+        `${this.PER_PAGE_COUNT}:0:0`
+      );
+      const { results, ...paginationInfo } = await this.inboxIssueService.list(workspaceSlug, projectId, queryParams);
+
+      runInAction(() => {
+        this.loader = undefined;
+        set(this, "inboxIssuePaginationInfo", paginationInfo);
+        if (results) {
+          const issueIds = results.map((value) => value?.issue?.id);
+          set(this, ["inboxIssueIds"], issueIds);
+          this.createOrUpdateInboxIssue(results, workspaceSlug, projectId);
+        }
+      });
+    } catch (error) {
+      console.error("Error fetching the intake issues", error);
+      this.loader = undefined;
+      this.error = {
+        message: "Error fetching the intake work items please try again later.",
+        status: "init-error",
+      };
+      throw error;
+    }
+  };
+
+  /**
+   * @description fetch intake issues with paginated data
+   * @param workspaceSlug
+   * @param projectId
+   */
+  fetchInboxPaginationIssues = async (workspaceSlug: string, projectId: string) => {
+    try {
+      if (
+        this.inboxIssuePaginationInfo &&
+        (!this.inboxIssuePaginationInfo?.total_results ||
+          (this.inboxIssuePaginationInfo?.total_results &&
+            this.inboxIssueIds.length < this.inboxIssuePaginationInfo?.total_results))
+      ) {
+        const queryParams = this.inboxIssueQueryParams(
+          this.inboxFilters,
+          this.inboxSorting,
+          this.PER_PAGE_COUNT,
+          this.inboxIssuePaginationInfo?.next_cursor || `${this.PER_PAGE_COUNT}:0:0`
+        );
+        const { results, ...paginationInfo } = await this.inboxIssueService.list(workspaceSlug, projectId, queryParams);
+
+        runInAction(() => {
+          set(this, "inboxIssuePaginationInfo", paginationInfo);
+          if (results && results.length > 0) {
+            const issueIds = results.map((value) => value?.issue?.id);
+            update(this, ["inboxIssueIds"], (ids) => uniq([...ids, ...issueIds]));
+            this.createOrUpdateInboxIssue(results, workspaceSlug, projectId);
+          }
+        });
+      } else set(this, ["inboxIssuePaginationInfo", "next_page_results"], false);
+    } catch (error) {
+      console.error("Error fetching the intake issues", error);
+      this.error = {
+        message: "Error fetching the paginated intake work items please try again later.",
+        status: "pagination-error",
+      };
+      throw error;
+    }
+  };
+
+  /**
+   * @description fetch intake issue with issue id
+   * @param workspaceSlug
+   * @param projectId
+   * @param inboxIssueId
+   */
+  fetchInboxIssueById = async (
+    workspaceSlug: string,
+    projectId: string,
+    inboxIssueId: string
+  ): Promise<TInboxIssue> => {
+    try {
+      this.loader = "issue-loading";
+      const inboxIssue = await this.inboxIssueService.retrieve(workspaceSlug, projectId, inboxIssueId);
+      const issueId = inboxIssue?.issue?.id || undefined;
+
+      if (inboxIssue && issueId) {
+        runInAction(() => {
+          this.createOrUpdateInboxIssue([inboxIssue], workspaceSlug, projectId);
+          set(this, "loader", undefined);
+        });
+        await Promise.all([
+          // fetching reactions
+          this.store.issue.issueDetail.fetchReactions(workspaceSlug, projectId, issueId),
+          // fetching activity
+          this.store.issue.issueDetail.fetchActivities(workspaceSlug, projectId, issueId),
+          // fetching comments
+          this.store.issue.issueDetail.fetchComments(workspaceSlug, projectId, issueId),
+          // fetching attachments
+          this.store.issue.issueDetail.fetchAttachments(workspaceSlug, projectId, issueId),
+        ]);
+      }
+      return inboxIssue;
+    } catch (error) {
+      console.error("Error fetching the intake issue with intake issue id");
+      this.loader = undefined;
+      throw error;
+    }
+  };
+
+  /**
+   * @description create intake issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   */
+  createInboxIssue = async (workspaceSlug: string, projectId: string, data: Partial<TInboxIssue>) => {
+    try {
+      const inboxIssueResponse = await this.inboxIssueService.create(workspaceSlug, projectId, data);
+      if (inboxIssueResponse)
+        runInAction(() => {
+          update(this, ["inboxIssueIds"], (ids) => [...ids, inboxIssueResponse?.issue?.id]);
+          set(
+            this.inboxIssues,
+            [inboxIssueResponse?.issue?.id],
+            new InboxIssueStore(workspaceSlug, projectId, inboxIssueResponse, this.store)
+          );
+          set(
+            this,
+            ["inboxIssuePaginationInfo", "total_results"],
+            (this.inboxIssuePaginationInfo?.total_results || 0) + 1
+          );
+          // Increment intake_count if the new issue is PENDING
+          if (inboxIssueResponse.status === EInboxIssueStatus.PENDING) {
+            const currentCount = this.store.projectRoot.project.projectMap[projectId]?.intake_count ?? 0;
+            set(this.store.projectRoot.project.projectMap, [projectId, "intake_count"], currentCount + 1);
+          }
+        });
+      return inboxIssueResponse;
+    } catch (error) {
+      console.error("Error creating the intake issue");
+      throw error;
+    }
+  };
+
+  /**
+   * @description delete intake issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param inboxIssueId
+   */
+  deleteInboxIssue = async (workspaceSlug: string, projectId: string, inboxIssueId: string) => {
+    const currentIssue = this.inboxIssues?.[inboxIssueId];
+    const wasPending = currentIssue?.status === EInboxIssueStatus.PENDING;
+    try {
+      if (!currentIssue) return;
+      await this.inboxIssueService.destroy(workspaceSlug, projectId, inboxIssueId).then(() => {
+        runInAction(() => {
+          set(
+            this,
+            ["inboxIssuePaginationInfo", "total_results"],
+            (this.inboxIssuePaginationInfo?.total_results || 0) - 1
+          );
+          set(this, "inboxIssues", omit(this.inboxIssues, inboxIssueId));
+          set(
+            this,
+            ["inboxIssueIds"],
+            this.inboxIssueIds.filter((id) => id !== inboxIssueId)
+          );
+          // Decrement intake_count if the deleted issue was PENDING
+          if (wasPending) {
+            const currentCount = this.store.projectRoot.project.projectMap[projectId]?.intake_count ?? 0;
+            set(this.store.projectRoot.project.projectMap, [projectId, "intake_count"], Math.max(0, currentCount - 1));
+          }
+        });
+      });
+    } catch (error) {
+      console.error("Error removing the intake issue");
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/instance.store.ts b/apps/web/core/store/instance.store.ts
new file mode 100644
index 0000000..89a283f
--- /dev/null
+++ b/apps/web/core/store/instance.store.ts
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import type { IInstance, IInstanceConfig } from "@plane/types";
+// services
+import { InstanceService } from "@/services/instance.service";
+
+type TError = {
+  status: string;
+  message: string;
+  data?: {
+    is_activated: boolean;
+    is_setup_done: boolean;
+  };
+};
+
+export interface IInstanceStore {
+  // issues
+  isLoading: boolean;
+  instance: IInstance | undefined;
+  config: IInstanceConfig | undefined;
+  error: TError | undefined;
+  // action
+  fetchInstanceInfo: () => Promise<void>;
+}
+
+export class InstanceStore implements IInstanceStore {
+  isLoading: boolean = true;
+  instance: IInstance | undefined = undefined;
+  config: IInstanceConfig | undefined = undefined;
+  error: TError | undefined = undefined;
+  // services
+  instanceService;
+
+  constructor() {
+    makeObservable(this, {
+      // observable
+      isLoading: observable.ref,
+      instance: observable,
+      config: observable,
+      error: observable,
+      // actions
+      fetchInstanceInfo: action,
+    });
+    // services
+    this.instanceService = new InstanceService();
+  }
+
+  /**
+   * @description fetching instance information
+   */
+  fetchInstanceInfo = async () => {
+    try {
+      this.isLoading = true;
+      this.error = undefined;
+      const instanceInfo = await this.instanceService.getInstanceInfo();
+      runInAction(() => {
+        this.isLoading = false;
+        this.instance = instanceInfo.instance;
+        this.config = instanceInfo.config;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.isLoading = false;
+        this.error = {
+          status: "error",
+          message: "Failed to fetch instance info",
+        };
+      });
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/archived/filter.store.ts b/apps/web/core/store/issue/archived/filter.store.ts
new file mode 100644
index 0000000..add4461
--- /dev/null
+++ b/apps/web/core/store/issue/archived/filter.store.ts
@@ -0,0 +1,300 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// base class
+import { computedFn } from "mobx-utils";
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EIssueFilterType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueKanbanFilters,
+  IIssueFilters,
+  TIssueParams,
+  IssuePaginationOptions,
+  TWorkItemFilterExpression,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { handleIssueQueryParamsByLayout } from "@plane/utils";
+import { IssueFiltersService } from "@/services/issue_filter.service";
+import type { IBaseIssueFilterStore } from "../helpers/issue-filter-helper.store";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import type { IIssueRootStore } from "../root.store";
+// constants
+// services
+
+export interface IArchivedIssuesFilter extends IBaseIssueFilterStore {
+  //helper actions
+  getFilterParams: (
+    options: IssuePaginationOptions,
+    projectId: string,
+    cursor: string | undefined,
+    groupId: string | undefined,
+    subGroupId: string | undefined
+  ) => Partial<Record<TIssueParams, string | boolean>>;
+  getIssueFilters(projectId: string): IIssueFilters | undefined;
+  // action
+  fetchFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
+  updateFilterExpression: (
+    workspaceSlug: string,
+    projectId: string,
+    filters: TWorkItemFilterExpression
+  ) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate
+  ) => Promise<void>;
+}
+
+export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArchivedIssuesFilter {
+  // observables
+  filters: { [projectId: string]: IIssueFilters } = {};
+  // root store
+  rootIssueStore;
+  // services
+  issueFilterService;
+
+  constructor(_rootStore: IIssueRootStore) {
+    super();
+    makeObservable(this, {
+      // observables
+      filters: observable,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // actions
+      fetchFilters: action,
+      updateFilters: action,
+    });
+    // root store
+    this.rootIssueStore = _rootStore;
+    // services
+    this.issueFilterService = new IssueFiltersService();
+  }
+
+  get issueFilters() {
+    const projectId = this.rootIssueStore.projectId;
+    if (!projectId) return undefined;
+
+    return this.getIssueFilters(projectId);
+  }
+
+  get appliedFilters() {
+    const projectId = this.rootIssueStore.projectId;
+    if (!projectId) return undefined;
+
+    return this.getAppliedFilters(projectId);
+  }
+
+  getIssueFilters(projectId: string) {
+    const displayFilters = this.filters[projectId] || undefined;
+    if (isEmpty(displayFilters)) return undefined;
+
+    const _filters: IIssueFilters = this.computedIssueFilters(displayFilters);
+
+    return _filters;
+  }
+
+  getAppliedFilters(projectId: string) {
+    const userFilters = this.getIssueFilters(projectId);
+    if (!userFilters) return undefined;
+
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues");
+    if (!filteredParams) return undefined;
+
+    const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
+      userFilters?.richFilters,
+      userFilters?.displayFilters,
+      filteredParams
+    );
+
+    return filteredRouteParams;
+  }
+
+  getFilterParams = computedFn(
+    (
+      options: IssuePaginationOptions,
+      projectId: string,
+      cursor: string | undefined,
+      groupId: string | undefined,
+      subGroupId: string | undefined
+    ) => {
+      const filterParams = this.getAppliedFilters(projectId);
+
+      const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
+      return paginationParams;
+    }
+  );
+
+  fetchFilters = async (workspaceSlug: string, projectId: string) => {
+    const _filters = this.handleIssuesLocalFilters.get(EIssuesStoreType.ARCHIVED, workspaceSlug, projectId, undefined);
+
+    const richFilters: TWorkItemFilterExpression = _filters?.richFilters;
+    const displayFilters: IIssueDisplayFilterOptions = this.computedDisplayFilters({
+      ..._filters?.display_filters,
+      sub_issue: true,
+    });
+    const displayProperties: IIssueDisplayProperties = this.computedDisplayProperties(_filters?.display_properties);
+    const kanbanFilters = {
+      group_by: [],
+      sub_group_by: [],
+    };
+    kanbanFilters.group_by = _filters?.kanban_filters?.group_by || [];
+    kanbanFilters.sub_group_by = _filters?.kanban_filters?.sub_group_by || [];
+
+    runInAction(() => {
+      set(this.filters, [projectId, "richFilters"], richFilters);
+      set(this.filters, [projectId, "displayFilters"], displayFilters);
+      set(this.filters, [projectId, "displayProperties"], displayProperties);
+      set(this.filters, [projectId, "kanbanFilters"], kanbanFilters);
+    });
+  };
+
+  /**
+   * NOTE: This method is designed as a fallback function for the work item filter store.
+   * Only use this method directly when initializing filter instances.
+   * For regular filter updates, use this method as a fallback function for the work item filter store methods instead.
+   */
+  updateFilterExpression: IArchivedIssuesFilter["updateFilterExpression"] = async (
+    workspaceSlug,
+    projectId,
+    filters
+  ) => {
+    try {
+      runInAction(() => {
+        set(this.filters, [projectId, "richFilters"], filters);
+      });
+
+      this.rootIssueStore.archivedIssues.fetchIssuesWithExistingPagination(workspaceSlug, projectId, "mutation");
+      this.handleIssuesLocalFilters.set(
+        EIssuesStoreType.ARCHIVED,
+        EIssueFilterType.FILTERS,
+        workspaceSlug,
+        projectId,
+        undefined,
+        {
+          rich_filters: filters,
+        }
+      );
+    } catch (error) {
+      console.log("error while updating rich filters", error);
+      throw error;
+    }
+  };
+
+  updateFilters: IArchivedIssuesFilter["updateFilters"] = async (workspaceSlug, projectId, type, filters) => {
+    try {
+      if (isEmpty(this.filters) || isEmpty(this.filters[projectId])) return;
+
+      const _filters = {
+        richFilters: this.filters[projectId].richFilters,
+        displayFilters: this.filters[projectId].displayFilters as IIssueDisplayFilterOptions,
+        displayProperties: this.filters[projectId].displayProperties as IIssueDisplayProperties,
+        kanbanFilters: this.filters[projectId].kanbanFilters as TIssueKanbanFilters,
+      };
+
+      switch (type) {
+        case EIssueFilterType.DISPLAY_FILTERS: {
+          const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
+          _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
+
+          // set sub_group_by to null if group_by is set to null
+          if (_filters.displayFilters.group_by === null) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+          if (
+            _filters.displayFilters.layout === "kanban" &&
+            _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+          ) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set group_by to state if layout is switched to kanban and group_by is null
+          if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null) {
+            _filters.displayFilters.group_by = "state";
+            updatedDisplayFilters.group_by = "state";
+          }
+
+          runInAction(() => {
+            Object.keys(updatedDisplayFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [projectId, "displayFilters", _key],
+                updatedDisplayFilters[_key as keyof IIssueDisplayFilterOptions]
+              );
+            });
+          });
+
+          if (this.getShouldReFetchIssues(updatedDisplayFilters)) {
+            this.rootIssueStore.archivedIssues.fetchIssuesWithExistingPagination(workspaceSlug, projectId, "mutation");
+          }
+
+          this.handleIssuesLocalFilters.set(EIssuesStoreType.ARCHIVED, type, workspaceSlug, projectId, undefined, {
+            display_filters: _filters.displayFilters,
+          });
+
+          break;
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
+          const updatedDisplayProperties = filters as IIssueDisplayProperties;
+          _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
+
+          runInAction(() => {
+            Object.keys(updatedDisplayProperties).forEach((_key) => {
+              set(
+                this.filters,
+                [projectId, "displayProperties", _key],
+                updatedDisplayProperties[_key as keyof IIssueDisplayProperties]
+              );
+            });
+          });
+
+          this.handleIssuesLocalFilters.set(EIssuesStoreType.ARCHIVED, type, workspaceSlug, projectId, undefined, {
+            display_properties: _filters.displayProperties,
+          });
+          break;
+        }
+
+        case EIssueFilterType.KANBAN_FILTERS: {
+          const updatedKanbanFilters = filters as TIssueKanbanFilters;
+          _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
+
+          const currentUserId = this.rootIssueStore.currentUserId;
+          if (currentUserId)
+            this.handleIssuesLocalFilters.set(EIssuesStoreType.ARCHIVED, type, workspaceSlug, projectId, undefined, {
+              kanban_filters: _filters.kanbanFilters,
+            });
+
+          runInAction(() => {
+            Object.keys(updatedKanbanFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [projectId, "kanbanFilters", _key],
+                updatedKanbanFilters[_key as keyof TIssueKanbanFilters]
+              );
+            });
+          });
+
+          break;
+        }
+        default:
+          break;
+      }
+    } catch (error) {
+      this.fetchFilters(workspaceSlug, projectId);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/archived/index.ts b/apps/web/core/store/issue/archived/index.ts
new file mode 100644
index 0000000..a21a791
--- /dev/null
+++ b/apps/web/core/store/issue/archived/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/apps/web/core/store/issue/archived/issue.store.ts b/apps/web/core/store/issue/archived/issue.store.ts
new file mode 100644
index 0000000..c3f9a69
--- /dev/null
+++ b/apps/web/core/store/issue/archived/issue.store.ts
@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, runInAction } from "mobx";
+// base class
+import type { TLoader, IssuePaginationOptions, TIssuesResponse, ViewFlags, TBulkOperationsPayload } from "@plane/types";
+// services
+// types
+import type { IBaseIssuesStore } from "../helpers/base-issues.store";
+import { BaseIssuesStore } from "../helpers/base-issues.store";
+import type { IIssueRootStore } from "../root.store";
+import type { IArchivedIssuesFilter } from "./filter.store";
+
+export interface IArchivedIssues extends IBaseIssuesStore {
+  // observable
+  viewFlags: ViewFlags;
+  // actions
+  fetchIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    option: IssuePaginationOptions
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchIssuesWithExistingPagination: (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchNextIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => Promise<TIssuesResponse | undefined>;
+
+  restoreIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  bulkUpdateProperties: (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => Promise<void>;
+
+  updateIssue: undefined;
+  archiveIssue: undefined;
+  archiveBulkIssues: undefined;
+  quickAddIssue: undefined;
+}
+
+export class ArchivedIssues extends BaseIssuesStore implements IArchivedIssues {
+  // filter store
+  issueFilterStore: IArchivedIssuesFilter;
+
+  //viewData
+  viewFlags = {
+    enableQuickAdd: false,
+    enableIssueCreation: false,
+    enableInlineEditing: true,
+  };
+
+  constructor(_rootStore: IIssueRootStore, issueFilterStore: IArchivedIssuesFilter) {
+    super(_rootStore, issueFilterStore, true);
+    makeObservable(this, {
+      // action
+      fetchIssues: action,
+      fetchNextIssues: action,
+      fetchIssuesWithExistingPagination: action,
+
+      restoreIssue: action,
+    });
+    // filter store
+    this.issueFilterStore = issueFilterStore;
+  }
+
+  /**
+   * Fetches the project details
+   * @param workspaceSlug
+   * @param projectId
+   */
+  fetchParentStats = async (workspaceSlug: string, projectId?: string) => {
+    projectId && this.rootIssueStore.rootStore.projectRoot.project.fetchProjectDetails(workspaceSlug, projectId);
+  };
+
+  /** */
+  updateParentStats = () => {};
+
+  /**
+   * This method is called to fetch the first issues of pagination
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @param options
+   * @returns
+   */
+  fetchIssues = async (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader = "init-loader",
+    options: IssuePaginationOptions,
+    isExistingPaginationOptions: boolean = false
+  ) => {
+    try {
+      // set loader and clear store
+      runInAction(() => {
+        this.setLoader(loadType);
+      });
+      this.clear(!isExistingPaginationOptions);
+
+      // get params from pagination options
+      const params = this.issueFilterStore?.getFilterParams(options, projectId, undefined, undefined, undefined);
+      // call the fetch issues API with the params
+      const response = await this.issueArchiveService.getArchivedIssues(workspaceSlug, projectId, params, {
+        signal: this.controller.signal,
+      });
+
+      // after fetching issues, call the base method to process the response further
+      this.onfetchIssues(response, options, workspaceSlug, projectId, undefined, !isExistingPaginationOptions);
+      return response;
+    } catch (error) {
+      // set loader to undefined if errored out
+      this.setLoader(undefined);
+      throw error;
+    }
+  };
+
+  /**
+   * This method is called subsequent pages of pagination
+   * if groupId/subgroupId is provided, only that specific group's next page is fetched
+   * else all the groups' next page is fetched
+   * @param workspaceSlug
+   * @param projectId
+   * @param groupId
+   * @param subGroupId
+   * @returns
+   */
+  fetchNextIssues = async (workspaceSlug: string, projectId: string, groupId?: string, subGroupId?: string) => {
+    const cursorObject = this.getPaginationData(groupId, subGroupId);
+    // if there are no pagination options and the next page results do not exist the return
+    if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
+    try {
+      // set Loader
+      this.setLoader("pagination", groupId, subGroupId);
+
+      // get params from stored pagination options
+      const params = this.issueFilterStore?.getFilterParams(
+        this.paginationOptions,
+        projectId,
+        this.getNextCursor(groupId, subGroupId),
+        groupId,
+        subGroupId
+      );
+      // call the fetch issues API with the params for next page in issues
+      const response = await this.issueArchiveService.getArchivedIssues(workspaceSlug, projectId, params);
+
+      // after the next page of issues are fetched, call the base method to process the response
+      this.onfetchNexIssues(response, groupId, subGroupId);
+      return response;
+    } catch (error) {
+      // set Loader as undefined if errored out
+      this.setLoader(undefined, groupId, subGroupId);
+      throw error;
+    }
+  };
+
+  /**
+   * This Method exists to fetch the first page of the issues with the existing stored pagination
+   * This is useful for refetching when filters, groupBy, orderBy etc changes
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @returns
+   */
+  fetchIssuesWithExistingPagination = async (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader = "mutation"
+  ) => {
+    if (!this.paginationOptions) return;
+    return await this.fetchIssues(workspaceSlug, projectId, loadType, this.paginationOptions, true);
+  };
+
+  /**
+   * Restored the current issue from the archived issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
+   * @returns
+   */
+  restoreIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    // call API to restore the issue
+    const response = await this.issueArchiveService.restoreIssue(workspaceSlug, projectId, issueId);
+
+    // update the store and remove from the archived issues list once restored
+    runInAction(() => {
+      this.rootIssueStore.issues.updateIssue(issueId, {
+        archived_at: null,
+      });
+      this.removeIssueFromList(issueId);
+    });
+
+    return response;
+  };
+
+  // Setting them as undefined as they can not performed on Archived issues
+  updateIssue = undefined;
+  archiveIssue = undefined;
+  archiveBulkIssues = undefined;
+  quickAddIssue = undefined;
+}
diff --git a/apps/web/core/store/issue/cycle/filter.store.ts b/apps/web/core/store/issue/cycle/filter.store.ts
new file mode 100644
index 0000000..1368005
--- /dev/null
+++ b/apps/web/core/store/issue/cycle/filter.store.ts
@@ -0,0 +1,320 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// base class
+import { computedFn } from "mobx-utils";
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EIssueFilterType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueKanbanFilters,
+  IIssueFilters,
+  TIssueParams,
+  IssuePaginationOptions,
+  TWorkItemFilterExpression,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { handleIssueQueryParamsByLayout } from "@plane/utils";
+import { IssueFiltersService } from "@/services/issue_filter.service";
+import type { IBaseIssueFilterStore } from "../helpers/issue-filter-helper.store";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import type { IIssueRootStore } from "../root.store";
+// constants
+// services
+
+export interface ICycleIssuesFilter extends IBaseIssueFilterStore {
+  //helper actions
+  getFilterParams: (
+    options: IssuePaginationOptions,
+    cycleId: string,
+    cursor: string | undefined,
+    groupId: string | undefined,
+    subGroupId: string | undefined
+  ) => Partial<Record<TIssueParams, string | boolean>>;
+  getIssueFilters(cycleId: string): IIssueFilters | undefined;
+  // action
+  fetchFilters: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+  updateFilterExpression: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    filters: TWorkItemFilterExpression
+  ) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate,
+    cycleId: string
+  ) => Promise<void>;
+}
+
+export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleIssuesFilter {
+  // observables
+  filters: { [cycleId: string]: IIssueFilters } = {};
+  // root store
+  rootIssueStore: IIssueRootStore;
+  // services
+  issueFilterService;
+
+  constructor(_rootStore: IIssueRootStore) {
+    super();
+    makeObservable(this, {
+      // observables
+      filters: observable,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // actions
+      fetchFilters: action,
+      updateFilters: action,
+    });
+    // root store
+    this.rootIssueStore = _rootStore;
+    // services
+    this.issueFilterService = new IssueFiltersService();
+  }
+
+  get issueFilters() {
+    const cycleId = this.rootIssueStore.cycleId;
+    if (!cycleId) return undefined;
+
+    return this.getIssueFilters(cycleId);
+  }
+
+  get appliedFilters() {
+    const cycleId = this.rootIssueStore.cycleId;
+    if (!cycleId) return undefined;
+
+    return this.getAppliedFilters(cycleId);
+  }
+
+  getIssueFilters(cycleId: string) {
+    const displayFilters = this.filters[cycleId] || undefined;
+    if (isEmpty(displayFilters)) return undefined;
+
+    const _filters: IIssueFilters = this.computedIssueFilters(displayFilters);
+
+    return _filters;
+  }
+
+  getAppliedFilters(cycleId: string) {
+    const userFilters = this.getIssueFilters(cycleId);
+    if (!userFilters) return undefined;
+
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues");
+    if (!filteredParams) return undefined;
+
+    if (filteredParams.includes("cycle")) filteredParams.splice(filteredParams.indexOf("cycle"), 1);
+
+    const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
+      userFilters?.richFilters,
+      userFilters?.displayFilters,
+      filteredParams
+    );
+
+    return filteredRouteParams;
+  }
+
+  getFilterParams = computedFn(
+    (
+      options: IssuePaginationOptions,
+      cycleId: string,
+      cursor: string | undefined,
+      groupId: string | undefined,
+      subGroupId: string | undefined
+    ) => {
+      let filterParams = this.getAppliedFilters(cycleId);
+
+      if (!filterParams) {
+        filterParams = {};
+      }
+      filterParams["cycle"] = cycleId;
+
+      const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
+      return paginationParams;
+    }
+  );
+
+  fetchFilters = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    const _filters = await this.issueFilterService.fetchCycleIssueFilters(workspaceSlug, projectId, cycleId);
+
+    const richFilters: TWorkItemFilterExpression = _filters?.rich_filters;
+    const displayFilters: IIssueDisplayFilterOptions = this.computedDisplayFilters(_filters?.display_filters);
+    const displayProperties: IIssueDisplayProperties = this.computedDisplayProperties(_filters?.display_properties);
+
+    // fetching the kanban toggle helpers in the local storage
+    const kanbanFilters = {
+      group_by: [],
+      sub_group_by: [],
+    };
+    const currentUserId = this.rootIssueStore.currentUserId;
+    if (currentUserId) {
+      const _kanbanFilters = this.handleIssuesLocalFilters.get(
+        EIssuesStoreType.CYCLE,
+        workspaceSlug,
+        cycleId,
+        currentUserId
+      );
+      kanbanFilters.group_by = _kanbanFilters?.kanban_filters?.group_by || [];
+      kanbanFilters.sub_group_by = _kanbanFilters?.kanban_filters?.sub_group_by || [];
+    }
+
+    runInAction(() => {
+      set(this.filters, [cycleId, "richFilters"], richFilters);
+      set(this.filters, [cycleId, "displayFilters"], displayFilters);
+      set(this.filters, [cycleId, "displayProperties"], displayProperties);
+      set(this.filters, [cycleId, "kanbanFilters"], kanbanFilters);
+    });
+  };
+
+  /**
+   * NOTE: This method is designed as a fallback function for the work item filter store.
+   * Only use this method directly when initializing filter instances.
+   * For regular filter updates, use this method as a fallback function for the work item filter store methods instead.
+   */
+  updateFilterExpression: ICycleIssuesFilter["updateFilterExpression"] = async (
+    workspaceSlug,
+    projectId,
+    cycleId,
+    filters
+  ) => {
+    try {
+      runInAction(() => {
+        set(this.filters, [cycleId, "richFilters"], filters);
+      });
+
+      this.rootIssueStore.cycleIssues.fetchIssuesWithExistingPagination(workspaceSlug, projectId, "mutation", cycleId);
+      await this.issueFilterService.patchCycleIssueFilters(workspaceSlug, projectId, cycleId, {
+        rich_filters: filters,
+      });
+    } catch (error) {
+      console.log("error while updating rich filters", error);
+      throw error;
+    }
+  };
+
+  updateFilters: ICycleIssuesFilter["updateFilters"] = async (workspaceSlug, projectId, type, filters, cycleId) => {
+    try {
+      if (isEmpty(this.filters) || isEmpty(this.filters[cycleId])) return;
+
+      const _filters = {
+        richFilters: this.filters[cycleId].richFilters,
+        displayFilters: this.filters[cycleId].displayFilters as IIssueDisplayFilterOptions,
+        displayProperties: this.filters[cycleId].displayProperties as IIssueDisplayProperties,
+        kanbanFilters: this.filters[cycleId].kanbanFilters as TIssueKanbanFilters,
+      };
+
+      switch (type) {
+        case EIssueFilterType.DISPLAY_FILTERS: {
+          const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
+          _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
+
+          // set sub_group_by to null if group_by is set to null
+          if (_filters.displayFilters.group_by === null) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+          if (
+            _filters.displayFilters.layout === "kanban" &&
+            _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+          ) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set group_by to state if layout is switched to kanban and group_by is null
+          if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null) {
+            _filters.displayFilters.group_by = "state";
+            updatedDisplayFilters.group_by = "state";
+          }
+
+          runInAction(() => {
+            Object.keys(updatedDisplayFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [cycleId, "displayFilters", _key],
+                updatedDisplayFilters[_key as keyof IIssueDisplayFilterOptions]
+              );
+            });
+          });
+
+          if (this.getShouldClearIssues(updatedDisplayFilters)) {
+            this.rootIssueStore.cycleIssues.clear(true); // clear issues for local store when some filters like layout changes
+          }
+
+          if (this.getShouldReFetchIssues(updatedDisplayFilters)) {
+            this.rootIssueStore.cycleIssues.fetchIssuesWithExistingPagination(
+              workspaceSlug,
+              projectId,
+              "mutation",
+              cycleId
+            );
+          }
+
+          await this.issueFilterService.patchCycleIssueFilters(workspaceSlug, projectId, cycleId, {
+            display_filters: _filters.displayFilters,
+          });
+
+          break;
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
+          const updatedDisplayProperties = filters as IIssueDisplayProperties;
+          _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
+
+          runInAction(() => {
+            Object.keys(updatedDisplayProperties).forEach((_key) => {
+              set(
+                this.filters,
+                [cycleId, "displayProperties", _key],
+                updatedDisplayProperties[_key as keyof IIssueDisplayProperties]
+              );
+            });
+          });
+
+          await this.issueFilterService.patchCycleIssueFilters(workspaceSlug, projectId, cycleId, {
+            display_properties: _filters.displayProperties,
+          });
+          break;
+        }
+
+        case EIssueFilterType.KANBAN_FILTERS: {
+          const updatedKanbanFilters = filters as TIssueKanbanFilters;
+          _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
+
+          const currentUserId = this.rootIssueStore.currentUserId;
+          if (currentUserId)
+            this.handleIssuesLocalFilters.set(EIssuesStoreType.CYCLE, type, workspaceSlug, cycleId, currentUserId, {
+              kanban_filters: _filters.kanbanFilters,
+            });
+
+          runInAction(() => {
+            Object.keys(updatedKanbanFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [cycleId, "kanbanFilters", _key],
+                updatedKanbanFilters[_key as keyof TIssueKanbanFilters]
+              );
+            });
+          });
+
+          break;
+        }
+        default:
+          break;
+      }
+    } catch (error) {
+      if (cycleId) this.fetchFilters(workspaceSlug, projectId, cycleId);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/cycle/index.ts b/apps/web/core/store/issue/cycle/index.ts
new file mode 100644
index 0000000..a21a791
--- /dev/null
+++ b/apps/web/core/store/issue/cycle/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/apps/web/core/store/issue/cycle/issue.store.ts b/apps/web/core/store/issue/cycle/issue.store.ts
new file mode 100644
index 0000000..e40bddc
--- /dev/null
+++ b/apps/web/core/store/issue/cycle/issue.store.ts
@@ -0,0 +1,435 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { get, set, concat, uniq, update } from "lodash-es";
+import { action, observable, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import { ALL_ISSUES } from "@plane/constants";
+import type {
+  TIssue,
+  TLoader,
+  IssuePaginationOptions,
+  TIssuesResponse,
+  ViewFlags,
+  TBulkOperationsPayload,
+} from "@plane/types";
+// helpers
+import { getDistributionPathsPostUpdate } from "@plane/utils";
+//local
+import { storage } from "@/lib/local-storage";
+import type { IBaseIssuesStore } from "../helpers/base-issues.store";
+import { BaseIssuesStore } from "../helpers/base-issues.store";
+//
+import type { IIssueRootStore } from "../root.store";
+import type { ICycleIssuesFilter } from "./filter.store";
+
+export const ACTIVE_CYCLE_ISSUES = "ACTIVE_CYCLE_ISSUES";
+
+export interface ActiveCycleIssueDetails {
+  issueIds: string[];
+  issueCount: number;
+  nextCursor: string;
+  nextPageResults: boolean;
+  perPageCount: number;
+}
+
+export interface ICycleIssues extends IBaseIssuesStore {
+  viewFlags: ViewFlags;
+  activeCycleIds: Record<string, ActiveCycleIssueDetails>;
+  //action helpers
+  getActiveCycleById: (cycleId: string) => ActiveCycleIssueDetails | undefined;
+  // actions
+  getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
+  fetchIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    options: IssuePaginationOptions,
+    cycleId: string
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchIssuesWithExistingPagination: (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    cycleId: string
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchNextIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => Promise<TIssuesResponse | undefined>;
+
+  fetchActiveCycleIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    perPageCount: number,
+    cycleId: string
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchNextActiveCycleIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ) => Promise<TIssuesResponse | undefined>;
+
+  createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>, cycleId: string) => Promise<TIssue>;
+  updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  quickAddIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    data: TIssue,
+    cycleId: string
+  ) => Promise<TIssue | undefined>;
+  removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  archiveBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  bulkUpdateProperties: (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => Promise<void>;
+
+  transferIssuesFromCycle: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    payload: {
+      new_cycle_id: string;
+    }
+  ) => Promise<TIssue>;
+}
+
+export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
+  activeCycleIds: Record<string, ActiveCycleIssueDetails> = {};
+  viewFlags = {
+    enableQuickAdd: true,
+    enableIssueCreation: true,
+    enableInlineEditing: true,
+  };
+  // filter store
+  issueFilterStore;
+
+  constructor(_rootStore: IIssueRootStore, issueFilterStore: ICycleIssuesFilter) {
+    super(_rootStore, issueFilterStore);
+    makeObservable(this, {
+      // observable
+      activeCycleIds: observable,
+      // action
+      fetchIssues: action,
+      fetchNextIssues: action,
+      fetchIssuesWithExistingPagination: action,
+
+      transferIssuesFromCycle: action,
+      fetchActiveCycleIssues: action,
+
+      quickAddIssue: action,
+    });
+    // filter store
+    this.issueFilterStore = issueFilterStore;
+  }
+
+  getActiveCycleById = computedFn((cycleId: string) => this.activeCycleIds[cycleId]);
+
+  /**
+   * Fetches the cycle details
+   * @param workspaceSlug
+   * @param projectId
+   * @param id is the cycle Id
+   */
+  fetchParentStats = (workspaceSlug: string, projectId?: string, id?: string) => {
+    const cycleId = id ?? this.cycleId;
+
+    if (projectId && cycleId) {
+      this.rootIssueStore.rootStore.cycle.fetchCycleDetails(workspaceSlug, projectId, cycleId);
+    }
+    // fetch cycle progress
+    const isSidebarCollapsed = storage.get("cycle_sidebar_collapsed");
+    if (
+      projectId &&
+      cycleId &&
+      this.rootIssueStore.rootStore.cycle.getCycleById(cycleId)?.version === 2 &&
+      isSidebarCollapsed &&
+      JSON.parse(isSidebarCollapsed) === false
+    ) {
+      this.rootIssueStore.rootStore.cycle.fetchActiveCycleProgressPro(workspaceSlug, projectId, cycleId);
+    }
+  };
+
+  updateParentStats = (prevIssueState?: TIssue, nextIssueState?: TIssue, id?: string) => {
+    try {
+      const distributionUpdates = getDistributionPathsPostUpdate(
+        prevIssueState,
+        nextIssueState,
+        this.rootIssueStore.rootStore.state.stateMap,
+        this.rootIssueStore.rootStore.projectEstimate?.currentActiveEstimate?.estimatePointById
+      );
+
+      const cycleId = id ?? this.cycleId;
+      if (cycleId) {
+        this.rootIssueStore.rootStore.cycle.updateCycleDistribution(distributionUpdates, cycleId);
+      }
+    } catch (_e) {
+      console.warn("could not update cycle statistics");
+    }
+  };
+
+  /**
+   * This method is called to fetch the first issues of pagination
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @param options
+   * @param cycleId
+   * @returns
+   */
+  fetchIssues = async (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    options: IssuePaginationOptions,
+    cycleId: string,
+    isExistingPaginationOptions: boolean = false
+  ) => {
+    try {
+      // set loader and clear store
+      runInAction(() => {
+        this.setLoader(loadType);
+        this.clear(!isExistingPaginationOptions); // clear while fetching from server.
+      });
+
+      // get params from pagination options
+      const params = this.issueFilterStore?.getFilterParams(options, cycleId, undefined, undefined, undefined);
+      // call the fetch issues API with the params
+      const response = await this.issueService.getIssues(workspaceSlug, projectId, params, {
+        signal: this.controller.signal,
+      });
+
+      // after fetching issues, call the base method to process the response further
+      this.onfetchIssues(response, options, workspaceSlug, projectId, cycleId, !isExistingPaginationOptions);
+      return response;
+    } catch (error) {
+      // set loader to undefined once errored out
+      this.setLoader(undefined);
+      throw error;
+    }
+  };
+
+  /**
+   * This method is called subsequent pages of pagination
+   * if groupId/subgroupId is provided, only that specific group's next page is fetched
+   * else all the groups' next page is fetched
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @param groupId
+   * @param subGroupId
+   * @returns
+   */
+  fetchNextIssues = async (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => {
+    const cursorObject = this.getPaginationData(groupId, subGroupId);
+    // if there are no pagination options and the next page results do not exist the return
+    if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
+    try {
+      // set Loader
+      this.setLoader("pagination", groupId, subGroupId);
+
+      // get params from stored pagination options
+      const params = this.issueFilterStore?.getFilterParams(
+        this.paginationOptions,
+        cycleId,
+        this.getNextCursor(groupId, subGroupId),
+        groupId,
+        subGroupId
+      );
+      // call the fetch issues API with the params for next page in issues
+      const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
+
+      // after the next page of issues are fetched, call the base method to process the response
+      this.onfetchNexIssues(response, groupId, subGroupId);
+      return response;
+    } catch (error) {
+      // set Loader as undefined if errored out
+      this.setLoader(undefined, groupId, subGroupId);
+      throw error;
+    }
+  };
+
+  /**
+   * This Method exists to fetch the first page of the issues with the existing stored pagination
+   * This is useful for refetching when filters, groupBy, orderBy etc changes
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @param cycleId
+   * @returns
+   */
+  fetchIssuesWithExistingPagination = async (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    cycleId: string
+  ) => {
+    if (!this.paginationOptions) return;
+    return await this.fetchIssues(workspaceSlug, projectId, loadType, this.paginationOptions, cycleId, true);
+  };
+
+  /**
+   * Override inherited create issue, to also add issue to cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @param cycleId
+   * @returns
+   */
+  override createIssue = async (workspaceSlug: string, projectId: string, data: Partial<TIssue>, cycleId: string) => {
+    const response = await super.createIssue(workspaceSlug, projectId, data, cycleId, false);
+    await this.addIssueToCycle(workspaceSlug, projectId, cycleId, [response.id], false);
+    return response;
+  };
+
+  /**
+   * This method is used to transfer issues from completed cycles to a new cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @param payload contains new cycle Id
+   * @returns
+   */
+  transferIssuesFromCycle = async (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    payload: {
+      new_cycle_id: string;
+    }
+  ) => {
+    // call API call to transfer issues
+    const response = await this.cycleService.transferIssues(workspaceSlug, projectId, cycleId, payload);
+    // call fetch issues
+    if (this.paginationOptions) {
+      await this.fetchIssues(workspaceSlug, projectId, "mutation", this.paginationOptions, cycleId);
+    }
+
+    return response;
+  };
+
+  /**
+   * This is Pagination for active cycle issues
+   * This method is called to fetch the first page of issues pagination
+   * @param workspaceSlug
+   * @param projectId
+   * @param perPageCount
+   * @param cycleId
+   * @returns
+   */
+  fetchActiveCycleIssues = async (workspaceSlug: string, projectId: string, perPageCount: number, cycleId: string) => {
+    // set loader
+    set(this.activeCycleIds, [cycleId], undefined);
+
+    // set params for urgent and high
+    const params = { priority: `urgent,high`, cursor: `${perPageCount}:0:0`, per_page: perPageCount };
+    // call the fetch issues API
+    const response = await this.cycleService.getCycleIssues(workspaceSlug, projectId, cycleId, params);
+
+    // Process issue response
+    const { issueList, groupedIssues } = this.processIssueResponse(response);
+
+    // add issues to the main Issue Map
+    this.rootIssueStore.issues.addIssue(issueList);
+    const activeIssueIds = groupedIssues[ALL_ISSUES] as string[];
+
+    // store the processed data in the current store
+    set(this.activeCycleIds, [cycleId], {
+      issueIds: activeIssueIds,
+      issueCount: response.total_count,
+      nextCursor: response.next_cursor,
+      nextPageResults: response.next_page_results,
+      perPageCount: perPageCount,
+    });
+
+    return response;
+  };
+
+  /**
+   * This is Pagination for active cycle issues
+   * This method is called subsequent pages of pagination
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @returns
+   */
+  fetchNextActiveCycleIssues = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    //get the previous pagination data for the cycle id
+    const activeCycle = get(this.activeCycleIds, [cycleId]);
+
+    // if there is no active cycle and the next pages does not exist return
+    if (!activeCycle || !activeCycle.nextPageResults) return;
+
+    // create params
+    const params = { priority: `urgent,high`, cursor: activeCycle.nextCursor, per_page: activeCycle.perPageCount };
+    // fetch API response
+    const response = await this.cycleService.getCycleIssues(workspaceSlug, projectId, cycleId, params);
+
+    // Process the response
+    const { issueList, groupedIssues } = this.processIssueResponse(response);
+
+    // add issues to main issue Map
+    this.rootIssueStore.issues.addIssue(issueList);
+
+    const activeIssueIds = groupedIssues[ALL_ISSUES] as string[];
+
+    // store the processed data for subsequent pages
+    set(this.activeCycleIds, [cycleId, "issueCount"], response.total_count);
+    set(this.activeCycleIds, [cycleId, "nextCursor"], response.next_cursor);
+    set(this.activeCycleIds, [cycleId, "nextPageResults"], response.next_page_results);
+    set(this.activeCycleIds, [cycleId, "issueCount"], response.total_count);
+    update(this.activeCycleIds, [cycleId, "issueIds"], (issueIds: string[] = []) =>
+      this.issuesSortWithOrderBy(uniq(concat(issueIds, activeIssueIds)), this.orderBy)
+    );
+
+    return response;
+  };
+
+  /**
+   * This Method overrides the base quickAdd issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @param cycleId
+   * @returns
+   */
+  quickAddIssue = async (workspaceSlug: string, projectId: string, data: TIssue, cycleId: string) => {
+    // add temporary issue to store list
+    this.addIssue(data);
+
+    // call overridden create issue
+    const response = await this.createIssue(workspaceSlug, projectId, data, cycleId);
+
+    // remove temp Issue from store list
+    runInAction(() => {
+      this.removeIssueFromList(data.id);
+      this.rootIssueStore.issues.removeIssue(data.id);
+    });
+
+    const currentModuleIds =
+      data.module_ids && data.module_ids.length > 0 ? data.module_ids.filter((moduleId) => moduleId != "None") : [];
+
+    if (currentModuleIds.length > 0) {
+      await this.changeModulesInIssue(workspaceSlug, projectId, response.id, currentModuleIds, []);
+    }
+
+    return response;
+  };
+
+  // Using aliased names as they cannot be overridden in other stores
+  archiveBulkIssues = this.bulkArchiveIssues;
+  updateIssue = this.issueUpdate;
+  archiveIssue = this.issueArchive;
+}
diff --git a/apps/web/core/store/issue/helpers/base-issues-utils.ts b/apps/web/core/store/issue/helpers/base-issues-utils.ts
new file mode 100644
index 0000000..b5b0e6e
--- /dev/null
+++ b/apps/web/core/store/issue/helpers/base-issues-utils.ts
@@ -0,0 +1,391 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { uniq, orderBy, isEmpty, indexOf, groupBy, cloneDeep, set } from "lodash-es";
+import { ALL_ISSUES, EIssueFilterType, FILTER_TO_ISSUE_MAP, ISSUE_PRIORITIES } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  ISubWorkItemFilters,
+  TIssue,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+} from "@plane/types";
+import { checkDateCriteria, convertToISODateString, parseDateFilter } from "@plane/utils";
+import { store } from "@/lib/store-context";
+import { EIssueGroupedAction, ISSUE_GROUP_BY_KEY } from "./base-issues.store";
+
+/**
+ * returns,
+ * A compound key, if both groupId & subGroupId are defined
+ * groupId, only if groupId is defined
+ * ALL_ISSUES, if both groupId & subGroupId are not defined
+ * @param groupId
+ * @param subGroupId
+ * @returns
+ */
+export const getGroupKey = (groupId?: string, subGroupId?: string) => {
+  if (groupId && subGroupId && subGroupId !== "null") return `${groupId}_${subGroupId}`;
+
+  if (groupId) return groupId;
+
+  return ALL_ISSUES;
+};
+
+/**
+ * This method returns the issue key actions for based on the difference in issue properties of grouped values
+ * @param addArray Array of groupIds at which the issue needs to be added
+ * @param deleteArray Array of groupIds at which the issue needs to be deleted
+ * @returns an array of objects that contains the issue Path at which it needs to be updated and the action that needs to be performed at the path as well
+ */
+export const getGroupIssueKeyActions = (
+  addArray: string[],
+  deleteArray: string[]
+): { path: string[]; action: EIssueGroupedAction }[] => {
+  const issueKeyActions = [];
+
+  // Add all the groupIds as IssueKey and action as Add
+  for (const addKey of addArray) {
+    issueKeyActions.push({ path: [addKey], action: EIssueGroupedAction.ADD });
+  }
+
+  // Add all the groupIds as IssueKey and action as Delete
+  for (const deleteKey of deleteArray) {
+    issueKeyActions.push({ path: [deleteKey], action: EIssueGroupedAction.DELETE });
+  }
+
+  return issueKeyActions;
+};
+
+/**
+ * This method returns the issue key actions for based on the difference in issue properties of grouped and subGrouped values
+ * @param groupActionsArray Addition and Deletion arrays of groupIds at which the issue needs to be added and deleted
+ * @param subGroupActionsArray Addition and Deletion arrays of subGroupIds at which the issue needs to be added and deleted
+ * @param previousIssueGroupProperties previous value of the issue property that on which grouping is dependent on
+ * @param currentIssueGroupProperties current value of the issue property that on which grouping is dependent on
+ * @param previousIssueSubGroupProperties previous value of the issue property that on which subGrouping is dependent on
+ * @param currentIssueSubGroupProperties current value of the issue property that on which subGrouping is dependent on
+ * @returns an array of objects that contains the issue Path at which it needs to be updated and the action that needs to be performed at the path as well
+ */
+export const getSubGroupIssueKeyActions = (
+  groupActionsArray: {
+    [EIssueGroupedAction.ADD]: string[];
+    [EIssueGroupedAction.DELETE]: string[];
+  },
+  subGroupActionsArray: {
+    [EIssueGroupedAction.ADD]: string[];
+    [EIssueGroupedAction.DELETE]: string[];
+  },
+  previousIssueGroupProperties: string[],
+  currentIssueGroupProperties: string[],
+  previousIssueSubGroupProperties: string[],
+  currentIssueSubGroupProperties: string[]
+): { path: string[]; action: EIssueGroupedAction }[] => {
+  const issueKeyActions: { [key: string]: { path: string[]; action: EIssueGroupedAction } } = {};
+
+  // For every groupId path for issue Id List, that needs to be added,
+  // It needs to be added at all the current Issue Properties that on which subGrouping depends on
+  for (const addKey of groupActionsArray[EIssueGroupedAction.ADD]) {
+    for (const subGroupProperty of currentIssueSubGroupProperties) {
+      issueKeyActions[getGroupKey(addKey, subGroupProperty)] = {
+        path: [addKey, subGroupProperty],
+        action: EIssueGroupedAction.ADD,
+      };
+    }
+  }
+
+  // For every groupId path for issue Id List, that needs to be deleted,
+  // It needs to be deleted at all the previous Issue Properties that on which subGrouping depends on
+  for (const deleteKey of groupActionsArray[EIssueGroupedAction.DELETE]) {
+    for (const subGroupProperty of previousIssueSubGroupProperties) {
+      issueKeyActions[getGroupKey(deleteKey, subGroupProperty)] = {
+        path: [deleteKey, subGroupProperty],
+        action: EIssueGroupedAction.DELETE,
+      };
+    }
+  }
+
+  // For every subGroupId path for issue Id List, that needs to be added,
+  // It needs to be added at all the current Issue Properties that on which grouping depends on
+  for (const addKey of subGroupActionsArray[EIssueGroupedAction.ADD]) {
+    for (const groupProperty of currentIssueGroupProperties) {
+      issueKeyActions[getGroupKey(groupProperty, addKey)] = {
+        path: [groupProperty, addKey],
+        action: EIssueGroupedAction.ADD,
+      };
+    }
+  }
+
+  // For every subGroupId path for issue Id List, that needs to be deleted,
+  // It needs to be deleted at all the previous Issue Properties that on which grouping depends on
+  for (const deleteKey of subGroupActionsArray[EIssueGroupedAction.DELETE]) {
+    for (const groupProperty of previousIssueGroupProperties) {
+      issueKeyActions[getGroupKey(groupProperty, deleteKey)] = {
+        path: [groupProperty, deleteKey],
+        action: EIssueGroupedAction.DELETE,
+      };
+    }
+  }
+
+  return Object.values(issueKeyActions);
+};
+
+/**
+ * This Method is used to get the difference between two arrays
+ * @param current
+ * @param previous
+ * @param action
+ * @returns returns two arrays, ADD and DELETE.
+ *           Whatever is newly added to current is added to ADD array
+ *           Whatever is removed from previous is added to DELETE array
+ */
+export const getDifference = (
+  current: string[],
+  previous: string[],
+  action?: EIssueGroupedAction.ADD | EIssueGroupedAction.DELETE
+): { [EIssueGroupedAction.ADD]: string[]; [EIssueGroupedAction.DELETE]: string[] } => {
+  const ADD = [];
+  const DELETE = [];
+
+  // For all the current issues values that are not in the previous array, Add them to the ADD array
+  for (const currentValue of current) {
+    if (previous.includes(currentValue)) continue;
+    ADD.push(currentValue);
+  }
+
+  // For all the previous issues values that are not in the current array, Add them to the ADD array
+  for (const previousValue of previous) {
+    if (current.includes(previousValue)) continue;
+    DELETE.push(previousValue);
+  }
+
+  // if there are no action provided, return the arrays
+  if (!action) return { [EIssueGroupedAction.ADD]: ADD, [EIssueGroupedAction.DELETE]: DELETE };
+
+  // If there is an action provided, return the values of both arrays under that array
+  if (action === EIssueGroupedAction.ADD)
+    return { [EIssueGroupedAction.ADD]: uniq([...ADD]), [EIssueGroupedAction.DELETE]: [] };
+  else return { [EIssueGroupedAction.DELETE]: uniq([...DELETE]), [EIssueGroupedAction.ADD]: [] };
+};
+
+/**
+ * This Method is mainly used to filter out empty values in the beginning
+ * @param key key of the value that is to be checked if empty
+ * @param object any object in which the key's value is to be checked
+ * @returns 1 if empty, 0 if not empty
+ */
+export const getSortOrderToFilterEmptyValues = (key: string, object: any) => {
+  const value = object?.[key];
+
+  if (typeof value !== "number" && isEmpty(value)) return 1;
+
+  return 0;
+};
+
+// get IssueIds from Issue data List
+export const getIssueIds = (issues: TIssue[]) => issues.map((issue) => issue?.id);
+
+/**
+ * Checks if an issue meets the date filter criteria
+ * @param issue The issue to check
+ * @param filterKey The date field to check ('start_date' or 'target_date')
+ * @param dateFilters Array of date filter strings
+ * @returns boolean indicating if the issue meets the date criteria
+ */
+export const checkIssueDateFilter = (
+  issue: TIssue,
+  filterKey: "start_date" | "target_date",
+  dateFilters: string[]
+): boolean => {
+  if (!dateFilters || dateFilters.length === 0) return true;
+
+  const issueDate = issue[filterKey];
+  if (!issueDate) return false;
+
+  // Issue should match all the date filters (AND operation)
+  return dateFilters.every((filterValue) => {
+    const parsed = parseDateFilter(filterValue);
+    if (!parsed?.date || !parsed?.type) {
+      // ignore invalid filter instead of failing the whole evaluation
+      console.warn(`[filters] Ignoring unparsable date filter "${filterValue}"`);
+      return true;
+    }
+    return checkDateCriteria(new Date(issueDate), parsed.date, parsed.type);
+  });
+};
+
+/**
+ * Helper method to get previous issues state
+ * @param issues - The array of issues to get the previous state for.
+ * @returns The previous state of the issues.
+ */
+export const getPreviousIssuesState = (issues: TIssue[]) => {
+  const issueIds = issues.map((issue) => issue.id);
+  const issuesPreviousState: Record<string, TIssue> = {};
+  issueIds.forEach((issueId) => {
+    if (store.issue.issues.issuesMap[issueId]) {
+      issuesPreviousState[issueId] = cloneDeep(store.issue.issues.issuesMap[issueId]);
+    }
+  });
+  return issuesPreviousState;
+};
+
+/**
+ * Filters the given work items based on the provided filters and display filters.
+ * @param work items - The array of work items to be filtered.
+ * @param filters - The filters to be applied to the issues.
+ * @param displayFilters - The display filters to be applied to the issues.
+ * @returns The filtered array of issues.
+ */
+export const getFilteredWorkItems = (workItems: TIssue[], filters: IIssueFilterOptions | undefined): TIssue[] => {
+  if (!filters) return workItems;
+  // Get all active filters
+  const activeFilters = Object.entries(filters).filter(([, value]) => value && value.length > 0);
+  // If no active filters, return all issues
+  if (activeFilters.length === 0) {
+    return workItems;
+  }
+
+  return workItems.filter((workItem) =>
+    // Check all filter conditions (AND operation between different filters)
+    activeFilters.every(([filterKey, filterValues]) => {
+      // Handle date filters separately
+      if (filterKey === "start_date" || filterKey === "target_date") {
+        return checkIssueDateFilter(workItem, filterKey, filterValues as string[]);
+      }
+      // Handle regular filters
+      const issueKey = FILTER_TO_ISSUE_MAP[filterKey as keyof IIssueFilterOptions];
+      if (!issueKey) return true; // Skip if no mapping exists
+      const issueValue = workItem[issueKey];
+      // Handle array-based properties vs single value properties
+      if (Array.isArray(issueValue)) {
+        return filterValues!.some((filterValue: any) => issueValue.includes(filterValue));
+      } else {
+        return filterValues!.includes(issueValue as string);
+      }
+    })
+  );
+};
+
+/**
+ * Orders the given work items based on the provided order by key.
+ * @param workItems - The array of work items to be ordered.
+ * @param orderByKey - The key to order the issues by.
+ * @returns The ordered array of work items.
+ */
+export const getOrderedWorkItems = (workItems: TIssue[], orderByKey: TIssueOrderByOptions): string[] => {
+  switch (orderByKey) {
+    case "-updated_at":
+      return getIssueIds(orderBy(workItems, (item) => convertToISODateString(item["updated_at"]), ["desc"]));
+
+    case "-created_at":
+      return getIssueIds(orderBy(workItems, (item) => convertToISODateString(item["created_at"]), ["desc"]));
+
+    case "-start_date":
+      return getIssueIds(
+        orderBy(
+          workItems,
+          [getSortOrderToFilterEmptyValues.bind(null, "start_date"), "start_date"], //preferring sorting based on empty values to always keep the empty values below
+          ["asc", "desc"]
+        )
+      );
+
+    case "-priority": {
+      const sortArray = ISSUE_PRIORITIES.map((i) => i.key);
+      return getIssueIds(
+        orderBy(workItems, (currentIssue: TIssue) => indexOf(sortArray, currentIssue?.priority), ["asc"])
+      );
+    }
+    default:
+      return getIssueIds(workItems);
+  }
+};
+
+export const getGroupedWorkItemIds = (
+  workItems: TIssue[],
+  groupByKey?: TIssueGroupByOptions,
+  orderByKey: TIssueOrderByOptions = "-created_at"
+): Record<string, string[]> => {
+  // If group by is not set set default as ALL ISSUES
+  if (!groupByKey) {
+    return {
+      [ALL_ISSUES]: getOrderedWorkItems(workItems, orderByKey),
+    };
+  }
+
+  // Get the default key for the group by key
+  const getDefaultGroupKey = (groupByKey: TIssueGroupByOptions) => {
+    switch (groupByKey) {
+      case "state_detail.group":
+        return "state__group";
+      case null:
+        return null;
+      default:
+        return ISSUE_GROUP_BY_KEY[groupByKey];
+    }
+  };
+
+  // Group work items
+  const groupKey = getDefaultGroupKey(groupByKey);
+  const groupedWorkItems = groupBy(workItems, (item) => {
+    const value = groupKey ? item[groupKey] : null;
+    if (Array.isArray(value)) {
+      if (value.length === 0) return "None";
+      // Sort & join to build deterministic set-like key
+      return value.slice().sort().join(",");
+    }
+    return value ?? "None";
+  });
+
+  // Convert to Record type
+  const groupedWorkItemsRecord: Record<string, string[]> = {};
+  Object.entries(groupedWorkItems).forEach(([key, items]) => {
+    groupedWorkItemsRecord[key] = getOrderedWorkItems(items, orderByKey);
+  });
+
+  return groupedWorkItemsRecord;
+};
+
+/**
+ * Updates the filters for a given work item.
+ * @param filtersMap - The map of filters for the work item.
+ * @param filterType - The type of filter to update.
+ * @param filters - The filters to update.
+ * @param workItemId - The ID of the work item to update.
+ */
+export const updateSubWorkItemFilters = (
+  filtersMap: Record<string, Partial<ISubWorkItemFilters>>,
+  filterType: EIssueFilterType,
+  filters: IIssueDisplayFilterOptions | IIssueDisplayProperties | IIssueFilterOptions,
+  workItemId: string
+) => {
+  const existingFilters = filtersMap[workItemId] ?? {};
+  const _filters = {
+    filters: existingFilters.filters,
+    displayFilters: existingFilters.displayFilters,
+    displayProperties: existingFilters.displayProperties,
+  };
+
+  switch (filterType) {
+    case EIssueFilterType.FILTERS: {
+      const updatedFilters = filters as IIssueFilterOptions;
+      _filters.filters = { ..._filters.filters, ...updatedFilters };
+      set(filtersMap, [workItemId, "filters"], { ..._filters.filters, ...updatedFilters });
+      break;
+    }
+    case EIssueFilterType.DISPLAY_FILTERS: {
+      set(filtersMap, [workItemId, "displayFilters"], { ..._filters.displayFilters, ...filters });
+      break;
+    }
+    case EIssueFilterType.DISPLAY_PROPERTIES:
+      set(filtersMap, [workItemId, "displayProperties"], {
+        ..._filters.displayProperties,
+        ...filters,
+      });
+      break;
+  }
+};
diff --git a/apps/web/core/store/issue/helpers/base-issues.store.ts b/apps/web/core/store/issue/helpers/base-issues.store.ts
new file mode 100644
index 0000000..c0de20f
--- /dev/null
+++ b/apps/web/core/store/issue/helpers/base-issues.store.ts
@@ -0,0 +1,1979 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEqual, concat, get, indexOf, isEmpty, orderBy, pull, set, uniq, update, clone } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane constants
+import { ALL_ISSUES, ISSUE_PRIORITIES } from "@plane/constants";
+// types
+import type {
+  TIssue,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+  TGroupedIssues,
+  TSubGroupedIssues,
+  TLoader,
+  IssuePaginationOptions,
+  TIssuesResponse,
+  TIssues,
+  TIssuePaginationData,
+  TGroupedIssueCount,
+  TPaginationData,
+  TBulkOperationsPayload,
+  IBlockUpdateDependencyData,
+} from "@plane/types";
+import { EIssueServiceType, EIssueLayoutTypes } from "@plane/types";
+// helpers
+import { convertToISODateString } from "@plane/utils";
+// plane web imports
+// services
+import { CycleService } from "@/services/cycle.service";
+import { IssueArchiveService, IssueService } from "@/services/issue";
+import { ModuleService } from "@/services/module.service";
+//
+import type { IIssueRootStore } from "../root.store";
+import {
+  getDifference,
+  getGroupIssueKeyActions,
+  getGroupKey,
+  getIssueIds,
+  getSortOrderToFilterEmptyValues,
+  getSubGroupIssueKeyActions,
+} from "./base-issues-utils";
+import type { IBaseIssueFilterStore } from "./issue-filter-helper.store";
+
+export type TIssueDisplayFilterOptions = Exclude<TIssueGroupByOptions, null> | "target_date";
+
+export enum EIssueGroupedAction {
+  ADD = "ADD",
+  DELETE = "DELETE",
+  REORDER = "REORDER",
+}
+export interface IBaseIssuesStore {
+  // observable
+  loader: Record<string, TLoader>;
+
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues | undefined; // object to store Issue Ids based on group or subgroup
+  groupedIssueCount: TGroupedIssueCount; // map of groupId/subgroup and issue count of that particular group/subgroup
+  issuePaginationData: TIssuePaginationData; // map of groupId/subgroup and pagination Data of that particular group/subgroup
+
+  //actions
+  removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  clear(shouldClearPaginationOptions?: boolean): void;
+  // helper methods
+  getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
+  issuesSortWithOrderBy(issueIds: string[], key: Partial<TIssueOrderByOptions>): string[];
+  getPaginationData(groupId: string | undefined, subGroupId: string | undefined): TPaginationData | undefined;
+  getIssueLoader(groupId?: string, subGroupId?: string): TLoader;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+
+  addIssueToCycle: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    issueIds: string[],
+    fetchAddedIssues?: boolean
+  ) => Promise<void>;
+  removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
+  addCycleToIssue: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
+  removeCycleFromIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+
+  addIssueToList: (issueId: string) => void;
+  removeIssueFromList: (issueId: string) => void;
+  addIssuesToModule: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    issueIds: string[],
+    fetchAddedIssues?: boolean
+  ) => Promise<void>;
+  removeIssuesFromModule: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    issueIds: string[]
+  ) => Promise<void>;
+  changeModulesInIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    addModuleIds: string[],
+    removeModuleIds: string[]
+  ): Promise<void>;
+  updateIssueDates(workspaceSlug: string, updates: IBlockUpdateDependencyData[], projectId?: string): Promise<void>;
+}
+
+// This constant maps the group by keys to the respective issue property that the key relies on
+export const ISSUE_GROUP_BY_KEY: Record<TIssueDisplayFilterOptions, keyof TIssue> = {
+  project: "project_id",
+  state: "state_id",
+  "state_detail.group": "state_id", // state_detail.group is only being used for state_group display,
+  priority: "priority",
+  labels: "label_ids",
+  created_by: "created_by",
+  assignees: "assignee_ids",
+  target_date: "target_date",
+  cycle: "cycle_id",
+  module: "module_ids",
+  team_project: "project_id",
+};
+
+export const ISSUE_FILTER_DEFAULT_DATA: Record<TIssueDisplayFilterOptions, keyof TIssue> = {
+  project: "project_id",
+  cycle: "cycle_id",
+  module: "module_ids",
+  state: "state_id",
+  "state_detail.group": "state__group", // state_detail.group is only being used for state_group display,
+  priority: "priority",
+  labels: "label_ids",
+  created_by: "created_by",
+  assignees: "assignee_ids",
+  target_date: "target_date",
+  team_project: "project_id",
+};
+
+// This constant maps the order by keys to the respective issue property that the key relies on
+const ISSUE_ORDERBY_KEY: Record<TIssueOrderByOptions, keyof TIssue> = {
+  created_at: "created_at",
+  "-created_at": "created_at",
+  updated_at: "updated_at",
+  "-updated_at": "updated_at",
+  priority: "priority",
+  "-priority": "priority",
+  sort_order: "sort_order",
+  state__name: "state_id",
+  "-state__name": "state_id",
+  assignees__first_name: "assignee_ids",
+  "-assignees__first_name": "assignee_ids",
+  labels__name: "label_ids",
+  "-labels__name": "label_ids",
+  issue_module__module__name: "module_ids",
+  "-issue_module__module__name": "module_ids",
+  issue_cycle__cycle__name: "cycle_id",
+  "-issue_cycle__cycle__name": "cycle_id",
+  target_date: "target_date",
+  "-target_date": "target_date",
+  estimate_point__key: "estimate_point",
+  "-estimate_point__key": "estimate_point",
+  start_date: "start_date",
+  "-start_date": "start_date",
+  link_count: "link_count",
+  "-link_count": "link_count",
+  attachment_count: "attachment_count",
+  "-attachment_count": "attachment_count",
+  sub_issues_count: "sub_issues_count",
+  "-sub_issues_count": "sub_issues_count",
+};
+
+export abstract class BaseIssuesStore implements IBaseIssuesStore {
+  loader: Record<string, TLoader> = {};
+  groupedIssueIds: TIssues | undefined = undefined;
+  issuePaginationData: TIssuePaginationData = {};
+
+  groupedIssueCount: TGroupedIssueCount = {};
+  //
+  paginationOptions: IssuePaginationOptions | undefined = undefined;
+
+  isArchived: boolean;
+
+  // services
+  issueService;
+  issueArchiveService;
+  moduleService;
+  cycleService;
+  // root store
+  rootIssueStore;
+  issueFilterStore;
+  // API Abort controller
+  controller: AbortController;
+
+  constructor(
+    _rootStore: IIssueRootStore,
+    issueFilterStore: IBaseIssueFilterStore,
+    isArchived = false,
+    serviceType = EIssueServiceType.ISSUES
+  ) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      groupedIssueIds: observable,
+      issuePaginationData: observable,
+      groupedIssueCount: observable,
+
+      paginationOptions: observable,
+      // computed
+      moduleId: computed,
+      cycleId: computed,
+      orderBy: computed,
+      groupBy: computed,
+      subGroupBy: computed,
+      orderByKey: computed,
+      issueGroupKey: computed,
+      issueSubGroupKey: computed,
+      // action
+      storePreviousPaginationValues: action.bound,
+
+      onfetchIssues: action.bound,
+      onfetchNexIssues: action.bound,
+      clear: action.bound,
+      setLoader: action.bound,
+      addIssue: action.bound,
+      removeIssueFromList: action.bound,
+
+      createIssue: action,
+      issueUpdate: action,
+      updateIssueDates: action,
+      issueQuickAdd: action.bound,
+      removeIssue: action.bound,
+      issueArchive: action.bound,
+      removeBulkIssues: action.bound,
+      bulkArchiveIssues: action.bound,
+      bulkUpdateProperties: action.bound,
+
+      addIssueToCycle: action.bound,
+      removeIssueFromCycle: action.bound,
+      addCycleToIssue: action.bound,
+      removeCycleFromIssue: action.bound,
+
+      addIssuesToModule: action.bound,
+      removeIssuesFromModule: action.bound,
+      changeModulesInIssue: action.bound,
+    });
+    this.rootIssueStore = _rootStore;
+    this.issueFilterStore = issueFilterStore;
+
+    this.isArchived = isArchived;
+
+    this.issueService = new IssueService(serviceType);
+    this.issueArchiveService = new IssueArchiveService();
+    this.moduleService = new ModuleService();
+    this.cycleService = new CycleService();
+
+    this.controller = new AbortController();
+  }
+
+  // Abstract class to be implemented to fetch parent stats such as project, module or cycle details
+  abstract fetchParentStats: (workspaceSlug: string, projectId?: string, id?: string) => void;
+
+  abstract updateParentStats: (prevIssueState?: TIssue, nextIssueState?: TIssue, id?: string) => void;
+
+  // current Module Id from url
+  get moduleId() {
+    return this.rootIssueStore.moduleId;
+  }
+
+  // current Cycle Id from url
+  get cycleId() {
+    return this.rootIssueStore.cycleId;
+  }
+
+  // current Order by value
+  get orderBy() {
+    const displayFilters = this.issueFilterStore?.issueFilters?.displayFilters;
+    if (!displayFilters) return;
+
+    return displayFilters?.order_by;
+  }
+
+  // current Group by value
+  get groupBy() {
+    const displayFilters = this.issueFilterStore?.issueFilters?.displayFilters;
+    if (!displayFilters || !displayFilters?.layout) return;
+
+    const layout = displayFilters?.layout;
+
+    return layout === EIssueLayoutTypes.CALENDAR
+      ? "target_date"
+      : [EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN]?.includes(layout)
+        ? displayFilters?.group_by
+        : undefined;
+  }
+
+  // current Sub group by value
+  get subGroupBy() {
+    const displayFilters = this.issueFilterStore?.issueFilters?.displayFilters;
+    if (!displayFilters || displayFilters.group_by === displayFilters.sub_group_by) return;
+
+    return displayFilters?.layout === "kanban" ? displayFilters?.sub_group_by : undefined;
+  }
+
+  getIssueIds = (groupId?: string, subGroupId?: string) => {
+    const groupedIssueIds = this.groupedIssueIds;
+
+    if (!groupedIssueIds) return undefined;
+
+    const allIssues = groupedIssueIds[ALL_ISSUES] ?? [];
+    if (!this.groupBy && !this.subGroupBy && allIssues && Array.isArray(allIssues)) {
+      return allIssues;
+    }
+
+    if (this.groupBy && groupId && groupedIssueIds?.[groupId] && Array.isArray(groupedIssueIds[groupId])) {
+      return groupedIssueIds[groupId] ?? [];
+    }
+
+    if (this.groupBy && this.subGroupBy && groupId && subGroupId) {
+      return (groupedIssueIds as TSubGroupedIssues)[groupId]?.[subGroupId] ?? [];
+    }
+
+    return undefined;
+  };
+
+  // The Issue Property corresponding to the order by value
+  get orderByKey() {
+    // oxlint-disable-next-line no-shadow
+    const orderBy = this.orderBy;
+    if (!orderBy) return;
+
+    return ISSUE_ORDERBY_KEY[orderBy];
+  }
+
+  // The Issue Property corresponding to the group by value
+  get issueGroupKey() {
+    const groupBy = this.groupBy;
+
+    if (!groupBy) return;
+
+    return ISSUE_GROUP_BY_KEY[groupBy];
+  }
+
+  // The Issue Property corresponding to the sub group by value
+  get issueSubGroupKey() {
+    const subGroupBy = this.subGroupBy;
+
+    if (!subGroupBy) return;
+
+    return ISSUE_GROUP_BY_KEY[subGroupBy];
+  }
+
+  /**
+   * Store the pagination data required for next subsequent issue pagination calls
+   * @param prevCursor cursor value of previous page
+   * @param nextCursor cursor value of next page
+   * @param nextPageResults boolean to indicate if the next page results exist i.e, have we reached end of pages
+   * @param groupId groupId and subGroupId to add the pagination data for the particular group/subgroup
+   * @param subGroupId
+   */
+  setPaginationData(
+    prevCursor: string,
+    nextCursor: string,
+    nextPageResults: boolean,
+    groupId?: string,
+    subGroupId?: string
+  ) {
+    const cursorObject = {
+      prevCursor,
+      nextCursor,
+      nextPageResults,
+    };
+
+    set(this.issuePaginationData, [getGroupKey(groupId, subGroupId)], cursorObject);
+  }
+
+  /**
+   * Sets the loader value of the particular groupId/subGroupId, or to ALL_ISSUES if both are undefined
+   * @param loaderValue
+   * @param groupId
+   * @param subGroupId
+   */
+  setLoader(loaderValue: TLoader, groupId?: string, subGroupId?: string) {
+    runInAction(() => {
+      set(this.loader, getGroupKey(groupId, subGroupId), loaderValue);
+    });
+  }
+
+  /**
+   * gets the Loader value of particular group/subgroup/ALL_ISSUES
+   */
+  getIssueLoader = (groupId?: string, subGroupId?: string) => get(this.loader, getGroupKey(groupId, subGroupId));
+
+  /**
+   * gets the pagination data of particular group/subgroup/ALL_ISSUES
+   */
+  getPaginationData = computedFn(
+    (groupId: string | undefined, subGroupId: string | undefined): TPaginationData | undefined =>
+      get(this.issuePaginationData, [getGroupKey(groupId, subGroupId)])
+  );
+
+  /**
+   * gets the issue count of particular group/subgroup/ALL_ISSUES
+   *
+   * if isSubGroupCumulative is true, sum up all the issueCount of the subGroupId, across all the groupIds
+   */
+  getGroupIssueCount = computedFn(
+    (
+      groupId: string | undefined,
+      subGroupId: string | undefined,
+      isSubGroupCumulative: boolean
+    ): number | undefined => {
+      if (isSubGroupCumulative && subGroupId) {
+        const groupIssuesKeys = Object.keys(this.groupedIssueCount);
+        let subGroupCumulativeCount = 0;
+
+        for (const groupKey of groupIssuesKeys) {
+          if (groupKey.includes(`_${subGroupId}`)) subGroupCumulativeCount += this.groupedIssueCount[groupKey];
+        }
+
+        return subGroupCumulativeCount;
+      }
+
+      return get(this.groupedIssueCount, [getGroupKey(groupId, subGroupId)]);
+    }
+  );
+
+  /**
+   * Gets the next page cursor based on number of issues currently available
+   * @param groupId groupId for the cursor
+   * @param subGroupId subgroupId for cursor
+   * @returns next page cursor or undefined
+   */
+  getNextCursor = (groupId: string | undefined, subGroupId: string | undefined): string | undefined => {
+    const groupedIssues = this.getIssueIds(groupId, subGroupId) ?? [];
+    const currentIssueCount = groupedIssues.length;
+
+    if (!this.paginationOptions) return;
+
+    const { perPageCount } = this.paginationOptions;
+    const nextPage = Math.floor(currentIssueCount / perPageCount);
+
+    return `${perPageCount}:${nextPage}:0`;
+  };
+
+  /**
+   * This Method is called after fetching the first paginated issues
+   *
+   * This method updates the appropriate issue list based on if groupByKey or subGroupByKey are defined
+   * If both groupByKey and subGroupByKey are not defined, then the issue list are added to another group called ALL_ISSUES
+   * @param issuesResponse  Paginated Response received from the API
+   * @param options Pagination options
+   * @param workspaceSlug
+   * @param projectId
+   * @param id Id can be anything from cycleId, moduleId, viewId or userId based on the store
+   */
+  onfetchIssues(
+    issuesResponse: TIssuesResponse,
+    options: IssuePaginationOptions,
+    workspaceSlug: string,
+    projectId?: string,
+    id?: string,
+    shouldClearPaginationOptions = true
+  ) {
+    // Process the Issue Response to get the following data from it
+    const { issueList, groupedIssues, groupedIssueCount } = this.processIssueResponse(issuesResponse);
+
+    // The Issue list is added to the main Issue Map
+    this.rootIssueStore.issues.addIssue(issueList);
+
+    // Update all the GroupIds to this Store's groupedIssueIds and update Individual group issue counts
+    runInAction(() => {
+      this.clear(shouldClearPaginationOptions);
+      this.updateGroupedIssueIds(groupedIssues, groupedIssueCount);
+      this.loader[getGroupKey()] = undefined;
+    });
+
+    // fetch parent stats if required, to be handled in the Implemented class
+    this.fetchParentStats(workspaceSlug, projectId, id);
+
+    this.rootIssueStore.issueDetail.relation.extractRelationsFromIssues(issueList);
+
+    // store Pagination options for next subsequent calls and data like next cursor etc
+    this.storePreviousPaginationValues(issuesResponse, options);
+  }
+
+  /**
+   * This Method is called on the subsequent pagination calls after the first initial call
+   *
+   * This method updates the appropriate issue list based on if groupId or subgroupIds are Passed
+   * @param issuesResponse Paginated Response received from the API
+   * @param groupId
+   * @param subGroupId
+   */
+  onfetchNexIssues(issuesResponse: TIssuesResponse, groupId?: string, subGroupId?: string) {
+    // Process the Issue Response to get the following data from it
+    const { issueList, groupedIssues, groupedIssueCount } = this.processIssueResponse(issuesResponse);
+
+    // The Issue list is added to the main Issue Map
+    this.rootIssueStore.issues.addIssue(issueList);
+
+    // Update all the GroupIds to this Store's groupedIssueIds and update Individual group issue counts
+    runInAction(() => {
+      this.updateGroupedIssueIds(groupedIssues, groupedIssueCount, groupId, subGroupId);
+      this.loader[getGroupKey(groupId, subGroupId)] = undefined;
+    });
+
+    this.rootIssueStore.issueDetail.relation.extractRelationsFromIssues(issueList);
+
+    // store Pagination data like next cursor etc
+    this.storePreviousPaginationValues(issuesResponse, undefined, groupId, subGroupId);
+  }
+
+  /**
+   * Method to create Issue. This method updates the store and calls the API to create an issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param data Default Issue Data
+   * @param id optional id like moduleId and cycleId, not used here but required in overridden the Module or cycle issues methods
+   * @param shouldUpdateList If false, then it would not update the Issue Id list but only makes an API call and adds to the main Issue Map
+   * @returns
+   */
+  async createIssue(
+    workspaceSlug: string,
+    projectId: string,
+    data: Partial<TIssue>,
+    id?: string,
+    shouldUpdateList = true
+  ) {
+    // perform an API call
+    const response = await this.issueService.createIssue(workspaceSlug, projectId, data);
+
+    // add Issue to Store
+    this.addIssue(response, shouldUpdateList);
+
+    // If shouldUpdateList is true, call fetchParentStats
+    // oxlint-disable-next-line no-unused-expressions
+    shouldUpdateList && (await this.fetchParentStats(workspaceSlug, projectId));
+
+    return response;
+  }
+
+  /**
+   * Updates the Issue, by calling the API and also updating the store
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
+   * @param data Partial Issue Data to be updated
+   * @param shouldSync If False then only issue is to be updated in the store not call API to update
+   * @returns
+   */
+  async issueUpdate(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssue>,
+    shouldSync = true
+  ) {
+    // Store Before state of the issue
+    const issueBeforeUpdate = clone(this.rootIssueStore.issues.getIssueById(issueId));
+    try {
+      // Update the Respective Stores
+      this.rootIssueStore.issues.updateIssue(issueId, data);
+      this.updateIssueList({ ...issueBeforeUpdate, ...data } as TIssue, issueBeforeUpdate);
+
+      // Check if should Sync
+      if (!shouldSync) return;
+
+      // update parent stats optimistically
+      this.updateParentStats(issueBeforeUpdate, {
+        ...issueBeforeUpdate,
+        ...data,
+      } as TIssue);
+
+      // call API to update the issue
+      await this.issueService.patchIssue(workspaceSlug, projectId, issueId, data);
+
+      // call fetch Parent Stats
+      this.fetchParentStats(workspaceSlug, projectId);
+    } catch (error) {
+      // If errored out update store again to revert the change
+      this.rootIssueStore.issues.updateIssue(issueId, issueBeforeUpdate ?? {});
+      this.updateIssueList(issueBeforeUpdate, { ...issueBeforeUpdate, ...data } as TIssue);
+      throw error;
+    }
+  }
+
+  /**
+   * This method is called to delete an issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
+   */
+  async removeIssue(workspaceSlug: string, projectId: string, issueId: string) {
+    // Store Before state of the issue
+    const issueBeforeRemoval = clone(this.rootIssueStore.issues.getIssueById(issueId));
+    // update parent stats optimistically
+    this.updateParentStats(issueBeforeRemoval, undefined);
+
+    // Male API call
+    await this.issueService.deleteIssue(workspaceSlug, projectId, issueId);
+    // Remove from Respective issue Id list
+    runInAction(() => {
+      this.removeIssueFromList(issueId);
+    });
+    // call fetch Parent stats
+    this.fetchParentStats(workspaceSlug, projectId);
+    // Remove issue from main issue Map store
+    this.rootIssueStore.issues.removeIssue(issueId);
+  }
+
+  /**
+   * This method is called to Archive an issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
+   */
+  async issueArchive(workspaceSlug: string, projectId: string, issueId: string) {
+    const issueBeforeArchive = clone(this.rootIssueStore.issues.getIssueById(issueId));
+    // update parent stats optimistically
+    this.updateParentStats(issueBeforeArchive, undefined);
+    // Male API call
+    const response = await this.issueArchiveService.archiveIssue(workspaceSlug, projectId, issueId);
+    // call fetch Parent stats
+    this.fetchParentStats(workspaceSlug, projectId);
+    runInAction(() => {
+      // Update the Archived at of the issue from store
+      this.rootIssueStore.issues.updateIssue(issueId, {
+        archived_at: response.archived_at,
+      });
+      // Since Archived remove the issue Id from the current store
+      this.removeIssueFromList(issueId);
+    });
+  }
+
+  /**
+   * Method to perform Quick add of issues
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns
+   */
+  async issueQuickAdd(workspaceSlug: string, projectId: string, data: TIssue) {
+    // Add issue to store with a temporary Id
+    this.addIssue(data);
+    // call Create issue method
+    const response = await this.createIssue(workspaceSlug, projectId, data);
+    runInAction(() => {
+      this.removeIssueFromList(data.id);
+      this.rootIssueStore.issues.removeIssue(data.id);
+    });
+    const currentCycleId = data.cycle_id !== "" && data.cycle_id === "None" ? undefined : data.cycle_id;
+    const currentModuleIds =
+      data.module_ids && data.module_ids.length > 0 ? data.module_ids.filter((moduleId) => moduleId != "None") : [];
+    const promiseRequests = [];
+    if (currentCycleId) {
+      promiseRequests.push(this.addCycleToIssue(workspaceSlug, projectId, currentCycleId, response.id));
+    }
+    if (currentModuleIds.length > 0) {
+      promiseRequests.push(this.changeModulesInIssue(workspaceSlug, projectId, response.id, currentModuleIds, []));
+    }
+    if (promiseRequests && promiseRequests.length > 0) {
+      await Promise.all(promiseRequests);
+    }
+    return response;
+  }
+
+  /**
+   * This is a method to delete issues in bulk
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueIds
+   * @returns
+   */
+  async removeBulkIssues(workspaceSlug: string, projectId: string, issueIds: string[]) {
+    // Make API call to bulk delete issues
+    const response = await this.issueService.bulkDeleteIssues(workspaceSlug, projectId, { issue_ids: issueIds });
+    // call fetch parent stats
+    this.fetchParentStats(workspaceSlug, projectId);
+    // Remove issues from the store
+    runInAction(() => {
+      issueIds.forEach((issueId) => {
+        this.removeIssueFromList(issueId);
+        this.rootIssueStore.issues.removeIssue(issueId);
+      });
+    });
+    return response;
+  }
+
+  /**
+   * Bulk Archive issues
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueIds
+   */
+  bulkArchiveIssues = async (workspaceSlug: string, projectId: string, issueIds: string[]) => {
+    const response = await this.issueService.bulkArchiveIssues(workspaceSlug, projectId, { issue_ids: issueIds });
+
+    runInAction(() => {
+      issueIds.forEach((issueId) => {
+        this.issueUpdate(
+          workspaceSlug,
+          projectId,
+          issueId,
+          {
+            archived_at: response.archived_at,
+          },
+          false
+        );
+        this.removeIssueFromList(issueId);
+      });
+    });
+  };
+
+  /**
+   * @description bulk update properties of selected issues
+   * @param {TBulkOperationsPayload} data
+   */
+  bulkUpdateProperties = async (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => {
+    const issueIds = data.issue_ids;
+    // make request to update issue properties
+    await this.issueService.bulkOperations(workspaceSlug, projectId, data);
+    // update issues in the store
+    runInAction(() => {
+      issueIds.forEach((issueId) => {
+        const issueBeforeUpdate = clone(this.rootIssueStore.issues.getIssueById(issueId));
+        if (!issueBeforeUpdate) throw new Error("Work item not found");
+        Object.keys(data.properties).forEach((key) => {
+          const property = key as keyof TBulkOperationsPayload["properties"];
+          const propertyValue = data.properties[property];
+          // update root issue map properties
+          if (Array.isArray(propertyValue)) {
+            // if property value is array, append it to the existing values
+            const existingValue = issueBeforeUpdate[property];
+            // convert existing value to an array
+            const newExistingValue = Array.isArray(existingValue) ? existingValue : [];
+            this.rootIssueStore.issues.updateIssue(issueId, {
+              [property]: uniq([...newExistingValue, ...propertyValue]),
+            });
+          } else {
+            // if property value is not an array, simply update the value
+            this.rootIssueStore.issues.updateIssue(issueId, {
+              [property]: propertyValue,
+            });
+          }
+        });
+        const issueDetails = this.rootIssueStore.issues.getIssueById(issueId);
+        this.updateIssueList(issueDetails, issueBeforeUpdate);
+      });
+    });
+  };
+
+  async updateIssueDates(
+    workspaceSlug: string,
+    updates: { id: string; start_date?: string; target_date?: string }[],
+    projectId?: string
+  ) {
+    if (!projectId) return;
+    const issueDatesBeforeChange: { id: string; start_date?: string; target_date?: string }[] = [];
+    try {
+      const getIssueById = this.rootIssueStore.issues.getIssueById;
+      runInAction(() => {
+        // oxlint-disable-next-line no-shadow
+        for (const update of updates) {
+          const dates: Partial<TIssue> = {};
+          if (update.start_date) dates.start_date = update.start_date;
+          if (update.target_date) dates.target_date = update.target_date;
+
+          const currIssue = getIssueById(update.id);
+
+          if (currIssue) {
+            issueDatesBeforeChange.push({
+              id: update.id,
+              start_date: currIssue.start_date ?? undefined,
+              target_date: currIssue.target_date ?? undefined,
+            });
+          }
+
+          this.issueUpdate(workspaceSlug, projectId, update.id, dates, false);
+        }
+      });
+
+      await this.issueService.updateIssueDates(workspaceSlug, projectId, updates);
+    } catch (e) {
+      runInAction(() => {
+        // oxlint-disable-next-line no-shadow
+        for (const update of issueDatesBeforeChange) {
+          const dates: Partial<TIssue> = {};
+          if (update.start_date) dates.start_date = update.start_date;
+          if (update.target_date) dates.target_date = update.target_date;
+
+          this.issueUpdate(workspaceSlug, projectId, update.id, dates, false);
+        }
+      });
+      console.error("error while updating Timeline dependencies");
+      throw e;
+    }
+  }
+
+  /**
+   * This method is used to add issues to a particular Cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @param issueIds
+   * @param fetchAddedIssues If True we make an additional call to fetch all the issues from their Ids, Since the addIssueToCycle API does not return them
+   */
+  async addIssueToCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    issueIds: string[],
+    fetchAddedIssues = true
+  ) {
+    // Perform an APi call to add issue to cycle
+    await this.issueService.addIssueToCycle(workspaceSlug, projectId, cycleId, {
+      issues: issueIds,
+    });
+
+    // if cycle Id is the current Cycle Id then call fetch parent stats
+    if (this.cycleId === cycleId) this.fetchParentStats(workspaceSlug, projectId);
+
+    // if true, fetch the issue data for all the issueIds
+    if (fetchAddedIssues) await this.rootIssueStore.issues.getIssues(workspaceSlug, projectId, issueIds);
+
+    // Update issueIds from current store
+    runInAction(() => {
+      // If cycle Id is the current cycle Id, then, add issue to list of issueIds
+      if (this.cycleId === cycleId) issueIds.forEach((issueId) => this.addIssueToList(issueId));
+      // If cycle Id is not the current cycle Id, then, remove issue to list of issueIds
+      else if (this.cycleId) issueIds.forEach((issueId) => this.removeIssueFromList(issueId));
+    });
+
+    // For Each issue update cycle Id by calling current store's update Issue, without making an API call
+    issueIds.forEach((issueId) => {
+      this.issueUpdate(workspaceSlug, projectId, issueId, { cycle_id: cycleId }, false);
+    });
+  }
+
+  /**
+   * This method is used to remove issue from a cycle
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @param issueId
+   */
+  async removeIssueFromCycle(workspaceSlug: string, projectId: string, cycleId: string, issueId: string) {
+    const issueBeforeRemoval = clone(this.rootIssueStore.issues.getIssueById(issueId));
+
+    // update parent stats optimistically
+    if (this.cycleId === cycleId) this.updateParentStats(issueBeforeRemoval, undefined, cycleId);
+
+    // Perform an APi call to remove issue from cycle
+    await this.issueService.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+
+    // if cycle Id is the current Cycle Id then call fetch parent stats
+    if (this.cycleId === cycleId) this.fetchParentStats(workspaceSlug, projectId, cycleId);
+
+    runInAction(() => {
+      // If cycle Id is the current cycle Id, then, remove issue from list of issueIds
+      // oxlint-disable-next-line no-unused-expressions
+      this.cycleId === cycleId && this.removeIssueFromList(issueId);
+    });
+
+    // update Issue cycle Id to null by calling current store's update Issue, without making an API call
+    this.issueUpdate(workspaceSlug, projectId, issueId, { cycle_id: null }, false);
+  }
+
+  /**
+   * Adds cycle to issue optimistically
+   * @param workspaceSlug
+   * @param projectId
+   * @param cycleId
+   * @param issueId
+   * @returns
+   */
+  addCycleToIssue = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
+    const issueCycleId = this.rootIssueStore.issues.getIssueById(issueId)?.cycle_id;
+
+    if (issueCycleId === cycleId) return;
+
+    const issueBeforeUpdate = clone(this.rootIssueStore.issues.getIssueById(issueId));
+
+    try {
+      // Update issueIds from current store
+      runInAction(() => {
+        // If cycle Id before update is the same as current cycle Id then, remove issueId from list
+        if (this.cycleId === issueCycleId) this.removeIssueFromList(issueId);
+        // If cycle Id is the current cycle Id, then, add issue to list of issueIds
+        if (this.cycleId === cycleId) this.addIssueToList(issueId);
+        // For Each issue update cycle Id by calling current store's update Issue, without making an API call
+        this.issueUpdate(workspaceSlug, projectId, issueId, { cycle_id: cycleId }, false);
+      });
+
+      const issueAfterUpdate = clone(this.rootIssueStore.issues.getIssueById(issueId));
+
+      // update parent stats optimistically
+      if (this.cycleId === cycleId || this.cycleId === issueCycleId)
+        this.updateParentStats(issueBeforeUpdate, issueAfterUpdate, this.cycleId);
+
+      await this.issueService.addIssueToCycle(workspaceSlug, projectId, cycleId, {
+        issues: [issueId],
+      });
+
+      // if cycle Id is the current Cycle Id then call fetch parent stats
+      if (this.cycleId === cycleId || this.cycleId === issueCycleId)
+        this.fetchParentStats(workspaceSlug, projectId, this.cycleId);
+    } catch (error) {
+      // remove the new issue ids from the cycle issues map
+      runInAction(() => {
+        // If cycle Id is the current cycle Id, then, remove issue to list of issueIds
+        if (this.cycleId === cycleId) this.removeIssueFromList(issueId);
+        // For Each issue update cycle Id to previous value by calling current store's update Issue, without making an API call
+        this.issueUpdate(workspaceSlug, projectId, issueId, { cycle_id: issueCycleId }, false);
+      });
+
+      throw error;
+    }
+  };
+
+  /*
+   * Remove a cycle from issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
+   * @returns
+   */
+  removeCycleFromIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const issueBeforeRemoval = clone(this.rootIssueStore.issues.getIssueById(issueId));
+    const issueCycleId = this.rootIssueStore.issues.getIssueById(issueId)?.cycle_id;
+    if (!issueCycleId) return;
+    try {
+      // perform optimistic update, update store
+      // Update issueIds from current store
+      runInAction(() => {
+        // If cycle Id is the current cycle Id, then, add issue to list of issueIds
+        if (this.cycleId === issueCycleId) this.removeIssueFromList(issueId);
+        // For Each issue update cycle Id by calling current store's update Issue, without making an API call
+        this.issueUpdate(workspaceSlug, projectId, issueId, { cycle_id: null }, false);
+      });
+
+      // update parent stats optimistically
+      if (this.cycleId === issueCycleId) this.updateParentStats(issueBeforeRemoval, undefined, issueCycleId);
+
+      // make API call
+      await this.issueService.removeIssueFromCycle(workspaceSlug, projectId, issueCycleId, issueId);
+
+      // if cycle Id is the current Cycle Id then call fetch parent stats
+      if (this.cycleId === issueCycleId) this.fetchParentStats(workspaceSlug, projectId, issueCycleId);
+    } catch (error) {
+      // revert back changes if fails
+      // Update issueIds from current store
+      runInAction(() => {
+        // If cycle Id is the current cycle Id, then, add issue to list of issueIds
+        if (this.cycleId === issueCycleId) this.addIssueToList(issueId);
+        // For Each issue update cycle Id by calling current store's update Issue, without making an API call
+        this.issueUpdate(workspaceSlug, projectId, issueId, { cycle_id: issueCycleId }, false);
+      });
+
+      throw error;
+    }
+  };
+
+  /**
+   * This method is used to add issues to a module
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @param issueIds
+   * @param fetchAddedIssues If True we make an additional call to fetch all the issues from their Ids, Since the addIssuesToModule API does not return them
+   */
+  async addIssuesToModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    issueIds: string[],
+    fetchAddedIssues = true
+  ) {
+    // Perform an APi call to add issue to module
+    await this.moduleService.addIssuesToModule(workspaceSlug, projectId, moduleId, {
+      issues: issueIds,
+    });
+
+    // if true, fetch the issue data for all the issueIds
+    if (fetchAddedIssues) await this.rootIssueStore.issues.getIssues(workspaceSlug, projectId, issueIds);
+
+    // if module Id is the current Module Id then call fetch parent stats
+    if (this.moduleId === moduleId) this.fetchParentStats(workspaceSlug, projectId);
+
+    runInAction(() => {
+      // if module Id is the current Module Id, then, add issue to list of issueIds
+      // oxlint-disable-next-line no-unused-expressions
+      this.moduleId === moduleId && issueIds.forEach((issueId) => this.addIssueToList(issueId));
+    });
+
+    // For Each issue update module Ids by calling current store's update Issue, without making an API call
+    issueIds.forEach((issueId) => {
+      const issueModuleIds = get(this.rootIssueStore.issues.issuesMap, [issueId, "module_ids"]) ?? [];
+      const updatedIssueModuleIds = uniq(concat(issueModuleIds, [moduleId]));
+      this.issueUpdate(workspaceSlug, projectId, issueId, { module_ids: updatedIssueModuleIds }, false);
+    });
+  }
+
+  /**
+   * This method is used to remove issue from a module
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @param issueIds
+   * @returns
+   */
+  async removeIssuesFromModule(workspaceSlug: string, projectId: string, moduleId: string, issueIds: string[]) {
+    // Perform an APi call to remove issue to module
+    const response = await this.moduleService.removeIssuesFromModuleBulk(workspaceSlug, projectId, moduleId, issueIds);
+
+    // if module Id is the current Module Id then call fetch parent stats
+    if (this.moduleId === moduleId) this.fetchParentStats(workspaceSlug, projectId);
+
+    runInAction(() => {
+      // if module Id is the current Module Id, then remove issue from list of issueIds
+      // oxlint-disable-next-line no-unused-expressions
+      this.moduleId === moduleId && issueIds.forEach((issueId) => this.removeIssueFromList(issueId));
+    });
+
+    // For Each issue update module Ids by calling current store's update Issue, without making an API call
+    runInAction(() => {
+      issueIds.forEach((issueId) => {
+        const issueModuleIds = get(this.rootIssueStore.issues.issuesMap, [issueId, "module_ids"]) ?? [];
+        const updatedIssueModuleIds = pull(issueModuleIds, moduleId);
+        this.issueUpdate(workspaceSlug, projectId, issueId, { module_ids: updatedIssueModuleIds }, false);
+      });
+    });
+
+    return response;
+  }
+
+  /*
+   * add Modules to Array in a non optimistic way while creating issues
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
+   * @param moduleIds array of modules to be added
+   */
+  async addModulesToIssue(workspaceSlug: string, projectId: string, issueId: string, moduleIds: string[]) {
+    // keep a copy of the original module ids
+    const originalModuleIds = get(this.rootIssueStore.issues.issuesMap, [issueId, "module_ids"]) ?? [];
+    //Perform API call
+    await this.moduleService.addModulesToIssue(workspaceSlug, projectId, issueId, {
+      modules: moduleIds,
+      removed_modules: [],
+    });
+
+    runInAction(() => {
+      // get current Module Ids of the issue
+      let currentModuleIds = [...originalModuleIds];
+
+      // If current Module Id is included in the modules list, then add Issue to List
+      if (moduleIds.includes(this.moduleId ?? "")) this.addIssueToList(issueId);
+      currentModuleIds = uniq(concat([...currentModuleIds], moduleIds));
+
+      // For current Issue, update module Ids by calling current store's update Issue, without making an API call
+      this.issueUpdate(workspaceSlug, projectId, issueId, { module_ids: currentModuleIds }, false);
+    });
+
+    if (moduleIds.includes(this.moduleId ?? "")) {
+      this.fetchParentStats(workspaceSlug, projectId, this.moduleId);
+    }
+  }
+
+  /*
+   * change modules array in issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param issueId
+   * @param addModuleIds array of modules to be added
+   * @param removeModuleIds array of modules to be removed
+   */
+  async changeModulesInIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    addModuleIds: string[],
+    removeModuleIds: string[]
+  ) {
+    // keep a copy of the original module ids
+    const issueBeforeChanges = clone(this.rootIssueStore.issues.getIssueById(issueId));
+    const originalModuleIds = get(this.rootIssueStore.issues.issuesMap, [issueId, "module_ids"]) ?? [];
+    try {
+      runInAction(() => {
+        // get current Module Ids of the issue
+        let currentModuleIds = [...originalModuleIds];
+        // remove the new issue id to the module issues
+        removeModuleIds.forEach((moduleId) => {
+          // If module Id is equal to current module Id, them remove Issue from List
+          // oxlint-disable-next-line no-unused-expressions
+          this.moduleId === moduleId && this.removeIssueFromList(issueId);
+          currentModuleIds = pull(currentModuleIds, moduleId);
+        });
+
+        // If current Module Id is included in the modules list, then add Issue to List
+        if (addModuleIds.includes(this.moduleId ?? "")) this.addIssueToList(issueId);
+        currentModuleIds = uniq(concat([...currentModuleIds], addModuleIds));
+
+        // For current Issue, update module Ids by calling current store's update Issue, without making an API call
+        this.issueUpdate(workspaceSlug, projectId, issueId, { module_ids: currentModuleIds }, false);
+      });
+
+      const issueAfterChanges = clone(this.rootIssueStore.issues.getIssueById(issueId));
+
+      // update parent stats optimistically
+      if (addModuleIds.includes(this.moduleId || "") || removeModuleIds.includes(this.moduleId || "")) {
+        this.updateParentStats(issueBeforeChanges, issueAfterChanges, this.moduleId);
+      }
+
+      //Perform API call
+      await this.moduleService.addModulesToIssue(workspaceSlug, projectId, issueId, {
+        modules: addModuleIds,
+        removed_modules: removeModuleIds,
+      });
+
+      if (addModuleIds.includes(this.moduleId || "") || removeModuleIds.includes(this.moduleId || "")) {
+        this.fetchParentStats(workspaceSlug, projectId);
+      }
+    } catch (error) {
+      // revert the issue back to its original module ids
+      runInAction(() => {
+        // If current Module Id is included in the add modules list, then remove Issue from List
+        if (addModuleIds.includes(this.moduleId ?? "")) this.removeIssueFromList(issueId);
+        // If current Module Id is included in the removed modules list, then add Issue to List
+        if (removeModuleIds.includes(this.moduleId ?? "")) this.addIssueToList(issueId);
+
+        // For current Issue, update module Ids by calling current store's update Issue, without making an API call
+        this.issueUpdate(workspaceSlug, projectId, issueId, { module_ids: originalModuleIds }, false);
+      });
+
+      throw error;
+    }
+  }
+
+  /**
+   * Add issue to the store
+   * @param issue
+   * @param shouldUpdateList indicates if the issue Id to be added to the list
+   */
+  addIssue(issue: TIssue, shouldUpdateList = true) {
+    runInAction(() => {
+      this.rootIssueStore.issues.addIssue([issue]);
+    });
+
+    // if true, add issue id to the list
+    if (shouldUpdateList) this.updateIssueList(issue, undefined, EIssueGroupedAction.ADD);
+  }
+
+  /**
+   * Method called to clear out the current store
+   */
+  clear(shouldClearPaginationOptions = true) {
+    runInAction(() => {
+      this.groupedIssueIds = undefined;
+      this.issuePaginationData = {};
+      this.groupedIssueCount = {};
+      if (shouldClearPaginationOptions) {
+        this.paginationOptions = undefined;
+      }
+    });
+    this.controller.abort();
+    this.controller = new AbortController();
+  }
+
+  /**
+   * Method called to add issue id to list.
+   * This will only work if the issue already exists in the main issue map
+   * @param issueId
+   */
+  addIssueToList(issueId: string) {
+    const issue = this.rootIssueStore.issues.getIssueById(issueId);
+    this.updateIssueList(issue, undefined, EIssueGroupedAction.ADD);
+  }
+
+  /**
+   * Method called to remove issue id from list.
+   * This will only work if the issue already exists in the main issue map
+   * @param issueId
+   */
+  removeIssueFromList(issueId: string) {
+    const issue = this.rootIssueStore.issues.getIssueById(issueId);
+    this.updateIssueList(undefined, issue, EIssueGroupedAction.DELETE);
+  }
+
+  /**
+   * Method called to update the issue list,
+   * If an action is passed, this method would add/remove the issue from list according to the action
+   * If there is no action, this method compares before and after states of the issue to decide, where to remove the issue id from and where to add it to
+   * if only issue is passed down then, the method determines where to add the issue Id and updates the list
+   * @param issue current issue state
+   * @param issueBeforeUpdate issue state before the update
+   * @param action specific action can be provided to force the method to that action
+   * @returns
+   */
+  updateIssueList(
+    issue?: TIssue,
+    issueBeforeUpdate?: TIssue,
+    // oxlint-disable-next-line no-shadow
+    action?: EIssueGroupedAction.ADD | EIssueGroupedAction.DELETE
+  ) {
+    if (!issue && !issueBeforeUpdate) return;
+
+    // get Issue ID from one of the issue objects
+    const issueId = issue?.id ?? issueBeforeUpdate?.id;
+    if (!issueId) return;
+
+    // Get display filters to check if 'Show sub Work items' is enabled - Do not add Work item to main list if disabled.
+    const isShowWorkItemsEnabled = this.issueFilterStore.issueFilters?.displayFilters?.sub_issue ?? false;
+
+    // get issueUpdates from another method by passing down the three arguments
+    // issueUpdates is nothing but an array of objects that contain the path of the issueId list that need updating and also the action that needs to be performed at the path
+    const issueUpdates = this.getUpdateDetails(issue, issueBeforeUpdate, action);
+    const accumulatedUpdatesForCount = {};
+    runInAction(() => {
+      // The issueUpdates
+      for (const issueUpdate of issueUpdates) {
+        //if update is add, add it at a particular path
+        if (issueUpdate.action === EIssueGroupedAction.ADD) {
+          const isSubIssue = issue?.parent_id;
+          if (isSubIssue && !isShowWorkItemsEnabled) continue;
+          // add issue Id at the path
+          update(this, ["groupedIssueIds", ...issueUpdate.path], (issueIds: string[] = []) =>
+            this.issuesSortWithOrderBy(uniq(concat(issueIds, issueId)), this.orderBy)
+          );
+        }
+
+        //if update is delete, remove it at a particular path
+        if (issueUpdate.action === EIssueGroupedAction.DELETE) {
+          // remove issue Id from the path
+          update(this, ["groupedIssueIds", ...issueUpdate.path], (issueIds: string[] = []) => pull(issueIds, issueId));
+        }
+
+        // accumulate the updates so that we don't end up updating the count twice for the same issue
+        this.accumulateIssueUpdates(accumulatedUpdatesForCount, issueUpdate.path, issueUpdate.action);
+
+        //if update is reorder, reorder it at a particular path
+        if (issueUpdate.action === EIssueGroupedAction.REORDER) {
+          // re-order/re-sort the issue Ids at the path
+          update(this, ["groupedIssueIds", ...issueUpdate.path], (issueIds: string[] = []) =>
+            this.issuesSortWithOrderBy(issueIds, this.orderBy)
+          );
+        }
+      }
+
+      // update the respective counts from the accumulation object
+      this.updateIssueCount(accumulatedUpdatesForCount);
+    });
+  }
+
+  /**
+   * This method processes the issueResponse to provide data that can be used to update the store
+   * @param issueResponse
+   * @returns  issueList, list of issue Data
+   * @returns groupedIssues, grouped issue Ids
+   * @returns groupedIssueCount, object containing issue counts of individual groups
+   */
+  processIssueResponse(issueResponse: TIssuesResponse): {
+    issueList: TIssue[];
+    groupedIssues: TIssues;
+    groupedIssueCount: TGroupedIssueCount;
+  } {
+    const issueResult = issueResponse?.results;
+
+    // if undefined return empty objects
+    if (!issueResult)
+      return {
+        issueList: [],
+        groupedIssues: {},
+        groupedIssueCount: {},
+      };
+
+    //if is an array then it's an ungrouped response. return values with groupId as ALL_ISSUES
+    if (Array.isArray(issueResult)) {
+      return {
+        issueList: issueResult,
+        groupedIssues: {
+          [ALL_ISSUES]: issueResult.map((issue) => issue.id),
+        },
+        groupedIssueCount: {
+          [ALL_ISSUES]: issueResponse.total_count,
+        },
+      };
+    }
+
+    const issueList: TIssue[] = [];
+    const groupedIssues: TGroupedIssues | TSubGroupedIssues = {};
+    const groupedIssueCount: TGroupedIssueCount = {};
+
+    // update total issue count to ALL_ISSUES
+    set(groupedIssueCount, [ALL_ISSUES], issueResponse.total_count);
+
+    // loop through all the groupIds from issue Result
+    for (const groupId in issueResult) {
+      const groupIssuesObject = issueResult[groupId];
+      const groupIssueResult = groupIssuesObject?.results;
+
+      // if groupIssueResult is undefined then continue the loop
+      if (!groupIssueResult) continue;
+
+      // set grouped Issue count of the current groupId
+      set(groupedIssueCount, [groupId], groupIssuesObject.total_results);
+
+      // if groupIssueResult, the it is not subGrouped
+      if (Array.isArray(groupIssueResult)) {
+        // add the result to issueList
+        issueList.push(...groupIssueResult);
+        // set the issue Ids to the groupId path
+        set(
+          groupedIssues,
+          [groupId],
+          groupIssueResult.map((issue) => issue.id)
+        );
+        continue;
+      }
+
+      // loop through all the subGroupIds from issue Result
+      for (const subGroupId in groupIssueResult) {
+        const subGroupIssuesObject = groupIssueResult[subGroupId];
+        const subGroupIssueResult = subGroupIssuesObject?.results;
+
+        // if subGroupIssueResult is undefined then continue the loop
+        if (!subGroupIssueResult) continue;
+
+        // set sub grouped Issue count of the current groupId
+        set(groupedIssueCount, [getGroupKey(groupId, subGroupId)], subGroupIssuesObject.total_results);
+
+        if (Array.isArray(subGroupIssueResult)) {
+          // add the result to issueList
+          issueList.push(...subGroupIssueResult);
+          // set the issue Ids to the [groupId, subGroupId] path
+          set(
+            groupedIssues,
+            [groupId, subGroupId],
+            subGroupIssueResult.map((issue) => issue.id)
+          );
+
+          continue;
+        }
+      }
+    }
+
+    return { issueList, groupedIssues, groupedIssueCount };
+  }
+
+  /**
+   * This method is used to update the grouped issue Ids to it's respected lists and also to update group Issue Counts
+   * @param groupedIssues Object that contains list of issueIds with respect to their groups/subgroups
+   * @param groupedIssueCount Object the contains the issue count of each groups
+   * @param groupId groupId string
+   * @param subGroupId subGroupId string
+   * @returns updates the store with the values
+   */
+  updateGroupedIssueIds(
+    groupedIssues: TIssues,
+    groupedIssueCount: TGroupedIssueCount,
+    groupId?: string,
+    subGroupId?: string
+  ) {
+    // if groupId exists and groupedIssues has ALL_ISSUES as a group,
+    // then it's an individual group/subgroup pagination
+    if (groupId && groupedIssues[ALL_ISSUES] && Array.isArray(groupedIssues[ALL_ISSUES])) {
+      const issueGroup = groupedIssues[ALL_ISSUES];
+      const issueGroupCount = groupedIssueCount[ALL_ISSUES];
+      const issuesPath = [groupId];
+      // issuesPath is the path for the issue List in the Grouped Issue List
+      // issuePath is either [groupId] for grouped pagination or [groupId, subGroupId] for subGrouped pagination
+      if (subGroupId) issuesPath.push(subGroupId);
+
+      // update the issue Count of the particular group/subGroup
+      set(this.groupedIssueCount, [getGroupKey(groupId, subGroupId)], issueGroupCount);
+
+      // update the issue list in the issuePath
+      this.updateIssueGroup(issueGroup, issuesPath);
+      return;
+    }
+
+    // if not in the above condition the it's a complete grouped pagination not individual group/subgroup pagination
+    // update total issue count as ALL_ISSUES count in `groupedIssueCount` object
+    set(this.groupedIssueCount, [ALL_ISSUES], groupedIssueCount[ALL_ISSUES]);
+
+    // loop through the groups of groupedIssues.
+    // oxlint-disable-next-line no-shadow
+    for (const groupId in groupedIssues) {
+      const issueGroup = groupedIssues[groupId];
+      const issueGroupCount = groupedIssueCount[groupId];
+
+      // update the groupId's issue count
+      set(this.groupedIssueCount, [groupId], issueGroupCount);
+
+      // This updates the group issue list in the store, if the issueGroup is a string
+      const storeUpdated = this.updateIssueGroup(issueGroup, [groupId]);
+      // if issueGroup is indeed a string, continue
+      if (storeUpdated) continue;
+
+      // if issueGroup is not a string, loop through the sub group Issues
+      // oxlint-disable-next-line no-shadow
+      for (const subGroupId in issueGroup) {
+        const issueSubGroup = (issueGroup as TGroupedIssues)[subGroupId];
+        const issueSubGroupCount = groupedIssueCount[getGroupKey(groupId, subGroupId)];
+
+        // update the subGroupId's issue count
+        set(this.groupedIssueCount, [getGroupKey(groupId, subGroupId)], issueSubGroupCount);
+        // This updates the subgroup issue list in the store
+        this.updateIssueGroup(issueSubGroup, [groupId, subGroupId]);
+      }
+    }
+  }
+
+  /**
+   * This Method is used to update the issue Id list at the particular issuePath
+   * @param groupedIssueIds could be an issue Id List for grouped issues or an object that contains a issue Id list in case of subGrouped
+   * @param issuePath array of string, to identify the path of the issueList to be updated with the above issue Id list
+   * @returns a boolean that indicates if the groupedIssueIds is indeed a array Id list, in which case the issue Id list is added to the store at issuePath
+   */
+  updateIssueGroup(groupedIssueIds: TGroupedIssues | string[], issuePath: string[]): boolean {
+    if (!groupedIssueIds) return true;
+
+    // if groupedIssueIds is an array, update the `groupedIssueIds` store at the issuePath
+    if (groupedIssueIds && Array.isArray(groupedIssueIds)) {
+      update(this, ["groupedIssueIds", ...issuePath], (issueIds: string[] = []) =>
+        this.issuesSortWithOrderBy(uniq(concat(issueIds, groupedIssueIds)), this.orderBy)
+      );
+      // return true to indicate the store has been updated
+      return true;
+    }
+
+    // return false to indicate the store has been updated and the groupedIssueIds is likely Object for subGrouped Issues
+    return false;
+  }
+
+  /**
+   * For Every issue update, accumulate it so that when an single issue is added to two groups, it doesn't increment the total count twice
+   * @param accumulator
+   * @param path
+   * @param action
+   * @returns
+   */
+  accumulateIssueUpdates(
+    accumulator: { [key: string]: EIssueGroupedAction },
+    path: string[],
+    // oxlint-disable-next-line no-shadow
+    action: EIssueGroupedAction
+  ) {
+    const [groupId, subGroupId] = path;
+
+    if (action !== EIssueGroupedAction.ADD && action !== EIssueGroupedAction.DELETE) return;
+
+    // if both groupId && subGroupId exists update the subgroup key
+    if (subGroupId && groupId) {
+      const groupKey = getGroupKey(groupId, subGroupId);
+      this.updateUpdateAccumulator(accumulator, groupKey, action);
+    }
+
+    // after above, if groupId exists update the group key
+    if (groupId) {
+      this.updateUpdateAccumulator(accumulator, groupId, action);
+    }
+
+    // if groupId is not ALL_ISSUES then update the  All_ISSUES key
+    // (if groupId is equal to ALL_ISSUES, it would have updated in the previous condition)
+    if (groupId !== ALL_ISSUES) {
+      this.updateUpdateAccumulator(accumulator, ALL_ISSUES, action);
+    }
+  }
+
+  /**
+   * This method's job is just to check and update the accumulator key
+   * @param accumulator accumulator object
+   * @param key object key like, subgroupKey, Group Key or ALL_ISSUES
+   * @param action
+   * @returns
+   */
+  updateUpdateAccumulator(
+    accumulator: { [key: string]: EIssueGroupedAction },
+    key: string,
+    // oxlint-disable-next-line no-shadow
+    action: EIssueGroupedAction
+  ) {
+    // if the key for accumulator is undefined, they update it with the action
+    if (!accumulator[key]) {
+      accumulator[key] = action;
+      return;
+    }
+
+    // if the key for accumulator is not the current action,
+    // Meaning if the key already has an action ADD and the current one is REMOVE,
+    // The key is deleted as both the actions cancel each other out
+    if (accumulator[key] !== action) {
+      delete accumulator[key];
+    }
+  }
+
+  /**
+   * This method is used to update the count of the issues at the path with the increment
+   * @param path issuePath, corresponding key is to be incremented
+   * @param increment
+   */
+  updateIssueCount(accumulatedUpdatesForCount: { [key: string]: EIssueGroupedAction }) {
+    const updateKeys = Object.keys(accumulatedUpdatesForCount);
+    for (const updateKey of updateKeys) {
+      // oxlint-disable-next-line no-shadow
+      const update = accumulatedUpdatesForCount[updateKey];
+      if (!update) continue;
+
+      const increment = update === EIssueGroupedAction.ADD ? 1 : -1;
+      // get current count at the key
+      const issueCount = get(this.groupedIssueCount, updateKey) ?? 0;
+      // update the count at the key
+      set(this.groupedIssueCount, updateKey, issueCount + increment);
+    }
+  }
+
+  /**
+   * This method is used to get update Details that would be used to update the issue Ids at the path
+   * @param issue current state of issue
+   * @param issueBeforeUpdate state of the issue before the update
+   * @param action optional action, to force the method to return back that action
+   * @returns an array of object that contains the path at which issue to be updated and the action to be performed at the path
+   */
+  getUpdateDetails = (
+    issue?: Partial<TIssue>,
+    issueBeforeUpdate?: Partial<TIssue>,
+    // oxlint-disable-next-line no-shadow
+    action?: EIssueGroupedAction.ADD | EIssueGroupedAction.DELETE
+  ): { path: string[]; action: EIssueGroupedAction }[] => {
+    // check the before and after states to return if there needs to be a re-sorting of issueId list if the issue property that orderBy  depends on has changed
+    const orderByUpdates = this.getOrderByUpdateDetails(issue, issueBeforeUpdate);
+    // if unGrouped, then return the path as ALL_ISSUES along with orderByUpdates
+    if (!this.issueGroupKey) return action ? [{ path: [ALL_ISSUES], action }, ...orderByUpdates] : orderByUpdates;
+
+    const issueGroupKeyValue = issue?.[this.issueGroupKey] as string | string[] | null | undefined;
+    const issueBeforeUpdateGroupKey = issueBeforeUpdate?.[this.issueGroupKey] as string | string[] | null | undefined;
+    // if grouped, the get the Difference between the two issue properties (this.issueGroupKey) on which groupBy is performed
+    const groupActionsArray = getDifference(
+      this.getArrayStringArray(issue, issueGroupKeyValue, this.groupBy),
+      this.getArrayStringArray(issueBeforeUpdate, issueBeforeUpdateGroupKey, this.groupBy),
+      action
+    );
+
+    // if not subGrouped, then use the differences to construct an updateDetails Array
+    if (!this.issueSubGroupKey)
+      return [
+        ...getGroupIssueKeyActions(
+          groupActionsArray[EIssueGroupedAction.ADD],
+          groupActionsArray[EIssueGroupedAction.DELETE]
+        ),
+        ...orderByUpdates,
+      ];
+
+    const issueSubGroupKey = issue?.[this.issueSubGroupKey] as string | string[] | null | undefined;
+    const issueBeforeUpdateSubGroupKey = issueBeforeUpdate?.[this.issueSubGroupKey] as
+      | string
+      | string[]
+      | null
+      | undefined;
+    // if subGrouped, the get the Difference between the two issue properties (this.issueGroupKey) on which subGroupBy is performed
+    const subGroupActionsArray = getDifference(
+      this.getArrayStringArray(issue, issueSubGroupKey, this.subGroupBy),
+      this.getArrayStringArray(issueBeforeUpdate, issueBeforeUpdateSubGroupKey, this.subGroupBy),
+      action
+    );
+
+    // Use the differences to construct an updateDetails Array
+    return [
+      ...getSubGroupIssueKeyActions(
+        groupActionsArray,
+        subGroupActionsArray,
+        this.getArrayStringArray(issueBeforeUpdate, issueBeforeUpdateGroupKey, this.groupBy),
+        this.getArrayStringArray(issue, issueGroupKeyValue, this.groupBy),
+        this.getArrayStringArray(issueBeforeUpdate, issueBeforeUpdateSubGroupKey, this.subGroupBy),
+        this.getArrayStringArray(issue, issueSubGroupKey, this.subGroupBy)
+      ),
+      ...orderByUpdates,
+    ];
+  };
+
+  /**
+   * This method is used to get update Details that would be used to re-order/re-sort the issue Ids at the path
+   * @param issue current state of issue
+   * @param issueBeforeUpdate state of the issue before the update
+   * @returns  an array of object that contains the path at which issue to be re-sorted/re-ordered
+   */
+  getOrderByUpdateDetails(
+    issue: Partial<TIssue> | undefined,
+    issueBeforeUpdate: Partial<TIssue> | undefined
+  ): { path: string[]; action: EIssueGroupedAction.REORDER }[] {
+    // if before and after states of the issue prop on which orderBy depends on then return and empty Array
+    if (
+      !issue ||
+      !issueBeforeUpdate ||
+      !this.orderByKey ||
+      isEqual(issue[this.orderByKey], issueBeforeUpdate[this.orderByKey])
+    )
+      return [];
+
+    // if they are not equal and issues are not grouped then, provide path as ALL_ISSUES
+    if (!this.issueGroupKey) return [{ path: [ALL_ISSUES], action: EIssueGroupedAction.REORDER }];
+
+    const issueGroupKey = issue?.[this.issueGroupKey] as string | string[] | null | undefined;
+    // if they are grouped then identify the paths based on props on which group by is dependent on
+    const issueKeyActions: { path: string[]; action: EIssueGroupedAction.REORDER }[] = [];
+    const groupByValues = this.getArrayStringArray(issue, issueGroupKey);
+
+    // if issues are not subGrouped then, provide path from groupByValues
+    if (!this.issueSubGroupKey) {
+      for (const groupKey of groupByValues) {
+        issueKeyActions.push({ path: [groupKey], action: EIssueGroupedAction.REORDER });
+      }
+
+      return issueKeyActions;
+    }
+
+    const issueSubGroupKey = issue?.[this.issueSubGroupKey] as string | string[] | null | undefined;
+    // if they are grouped then identify the paths based on props on which sub group by is dependent on
+    const subGroupByValues = this.getArrayStringArray(issue, issueSubGroupKey);
+
+    // if issues are subGrouped then, provide path from subGroupByValues
+    for (const groupKey of groupByValues) {
+      for (const subGroupKey of subGroupByValues) {
+        issueKeyActions.push({ path: [groupKey, subGroupKey], action: EIssueGroupedAction.REORDER });
+      }
+    }
+
+    return issueKeyActions;
+  }
+
+  // /**
+  //  * Normalizes group values into a consistent string array format
+  //  * @param issueObject - The issue object to extract values from
+  //  * @param value - The raw value (string, array, or null/undefined)
+  //  * @param groupByKey - The group by key to handle special cases
+  //  * @returns Normalized array of string values
+  //  */
+  getArrayStringArray = (
+    issueObject: Partial<TIssue> | undefined,
+    value: string | string[] | undefined | null,
+    groupByKey?: TIssueGroupByOptions
+  ): string[] => {
+    // if issue object is undefined return empty array
+    if (!issueObject) return [];
+    // if value is not defined, return None value in array
+    if (!value || isEmpty(value)) return ["None"];
+    // if array return the array
+    if (Array.isArray(value)) return value;
+
+    return this.getDefaultGroupValue(issueObject, value, groupByKey);
+  };
+
+  // /**
+  //  * Gets the default value for a group when the primary value is empty
+  //  * @param issueObject - The issue object to extract fallback values from
+  //  * @param groupByKey - The group by key to determine fallback logic
+  //  * @returns Default group value as string array
+  //  */
+  private getDefaultGroupValue = (
+    issueObject: Partial<TIssue>,
+    value: string,
+    groupByKey?: TIssueGroupByOptions
+  ): string[] => {
+    // Handle special case for state group
+    if (groupByKey === "state_detail.group") {
+      return [this.rootIssueStore.rootStore.state.stateMap?.[value]?.group ?? issueObject.state__group];
+    }
+
+    return [value];
+  };
+
+  /**
+   * This Method is used to get data of the issue based on the ids of the data for states, labels and assignees
+   * @param dataType what type of data is being sent
+   * @param dataIds id/ids of the data that is to be populated
+   * @param order ascending or descending for arrays of data
+   * @returns string | string[] of sortable fields to be used for sorting
+   */
+  populateIssueDataForSorting(
+    dataType: "state_id" | "label_ids" | "assignee_ids" | "module_ids" | "cycle_id" | "estimate_point",
+    dataIds: string | string[] | null | undefined,
+    projectId: string | undefined | null,
+    order?: "asc" | "desc"
+  ) {
+    if (!dataIds) return;
+
+    const dataValues: (string | number)[] = [];
+    const isDataIdsArray = Array.isArray(dataIds);
+    const dataIdsArray = isDataIdsArray ? dataIds : [dataIds];
+
+    switch (dataType) {
+      case "state_id": {
+        const stateMap = this.rootIssueStore?.stateMap;
+        if (!stateMap) break;
+        for (const dataId of dataIdsArray) {
+          const state = stateMap[dataId];
+          if (state && state.name) dataValues.push(state.name.toLocaleLowerCase());
+        }
+        break;
+      }
+      case "label_ids": {
+        const labelMap = this.rootIssueStore?.labelMap;
+        if (!labelMap) break;
+        for (const dataId of dataIdsArray) {
+          const label = labelMap[dataId];
+          if (label && label.name) dataValues.push(label.name.toLocaleLowerCase());
+        }
+        break;
+      }
+      case "assignee_ids": {
+        const memberMap = this.rootIssueStore?.memberMap;
+        if (!memberMap) break;
+        for (const dataId of dataIdsArray) {
+          const member = memberMap[dataId];
+          if (member && member.first_name) dataValues.push(member.first_name.toLocaleLowerCase());
+        }
+        break;
+      }
+      case "module_ids": {
+        const moduleMap = this.rootIssueStore?.moduleMap;
+        if (!moduleMap) break;
+        for (const dataId of dataIdsArray) {
+          const currentModule = moduleMap[dataId];
+          if (currentModule && currentModule.name) dataValues.push(currentModule.name.toLocaleLowerCase());
+        }
+        break;
+      }
+      case "cycle_id": {
+        const cycleMap = this.rootIssueStore?.cycleMap;
+        if (!cycleMap) break;
+        for (const dataId of dataIdsArray) {
+          const cycle = cycleMap[dataId];
+          if (cycle && cycle.name) dataValues.push(cycle.name.toLocaleLowerCase());
+        }
+        break;
+      }
+      case "estimate_point": {
+        // return if project Id does not exist
+        if (!projectId) break;
+        // get the estimate ID for the current Project
+        const currentProjectEstimateId =
+          this.rootIssueStore.rootStore.projectEstimate.currentActiveEstimateIdByProjectId(projectId);
+        // return if current Estimate Id for the project is not available
+        if (!currentProjectEstimateId) break;
+        // get Estimate based on Id
+        const estimate = this.rootIssueStore.rootStore.projectEstimate.estimateById(currentProjectEstimateId);
+        // If Estimate is not available, then return
+        if (!estimate) break;
+        // Get Estimate Value
+        const estimateKey = estimate?.estimatePointById(dataIds as string)?.key;
+
+        // If Value string i not available or empty then return
+        if (estimateKey === undefined) break;
+
+        dataValues.push(estimateKey);
+      }
+    }
+
+    return isDataIdsArray ? (order ? orderBy(dataValues, undefined, [order]) : dataValues) : dataValues;
+  }
+
+  issuesSortWithOrderBy = (issueIds: string[], key: TIssueOrderByOptions | undefined): string[] => {
+    const issues = this.rootIssueStore.issues.getIssuesByIds(issueIds, this.isArchived ? "archived" : "un-archived");
+    const array = orderBy(issues, (issue) => convertToISODateString(issue["created_at"]), ["desc"]);
+
+    switch (key) {
+      case "sort_order":
+        return getIssueIds(orderBy(array, "sort_order"));
+      case "state__name":
+        return getIssueIds(
+          orderBy(array, (issue) =>
+            this.populateIssueDataForSorting("state_id", issue?.["state_id"], issue?.["project_id"])
+          )
+        );
+      case "-state__name":
+        return getIssueIds(
+          orderBy(
+            array,
+            (issue) => this.populateIssueDataForSorting("state_id", issue?.["state_id"], issue?.["project_id"]),
+            ["desc"]
+          )
+        );
+      // dates
+      case "created_at":
+        return getIssueIds(orderBy(array, (issue) => convertToISODateString(issue["created_at"])));
+      case "-created_at":
+        return getIssueIds(orderBy(array, (issue) => convertToISODateString(issue["created_at"]), ["desc"]));
+      case "updated_at":
+        return getIssueIds(orderBy(array, (issue) => convertToISODateString(issue["updated_at"])));
+      case "-updated_at":
+        return getIssueIds(orderBy(array, (issue) => convertToISODateString(issue["updated_at"]), ["desc"]));
+      case "start_date":
+        return getIssueIds(orderBy(array, [getSortOrderToFilterEmptyValues.bind(null, "start_date"), "start_date"])); //preferring sorting based on empty values to always keep the empty values below
+      case "-start_date":
+        return getIssueIds(
+          orderBy(
+            array,
+            [getSortOrderToFilterEmptyValues.bind(null, "start_date"), "start_date"], //preferring sorting based on empty values to always keep the empty values below
+            ["asc", "desc"]
+          )
+        );
+
+      case "target_date":
+        return getIssueIds(orderBy(array, [getSortOrderToFilterEmptyValues.bind(null, "target_date"), "target_date"])); //preferring sorting based on empty values to always keep the empty values below
+      case "-target_date":
+        return getIssueIds(
+          orderBy(
+            array,
+            [getSortOrderToFilterEmptyValues.bind(null, "target_date"), "target_date"], //preferring sorting based on empty values to always keep the empty values below
+            ["asc", "desc"]
+          )
+        );
+
+      // custom
+      case "-priority": {
+        const sortArray = ISSUE_PRIORITIES.map((i) => i.key);
+        return getIssueIds(orderBy(array, (currentIssue: TIssue) => indexOf(sortArray, currentIssue?.priority)));
+      }
+      case "priority": {
+        const sortArray = ISSUE_PRIORITIES.map((i) => i.key);
+        return getIssueIds(
+          orderBy(array, (currentIssue: TIssue) => indexOf(sortArray, currentIssue?.priority), ["desc"])
+        );
+      }
+
+      // number
+      case "attachment_count":
+        return getIssueIds(orderBy(array, "attachment_count"));
+      case "-attachment_count":
+        return getIssueIds(orderBy(array, "attachment_count", ["desc"]));
+
+      case "estimate_point__key":
+        return getIssueIds(
+          orderBy(array, [
+            getSortOrderToFilterEmptyValues.bind(null, "estimate_point"),
+            (issue) =>
+              this.populateIssueDataForSorting("estimate_point", issue?.["estimate_point"], issue?.["project_id"]),
+          ])
+        ); //preferring sorting based on empty values to always keep the empty values below
+      case "-estimate_point__key":
+        return getIssueIds(
+          orderBy(
+            array,
+            [
+              getSortOrderToFilterEmptyValues.bind(null, "estimate_point"),
+              (issue) =>
+                this.populateIssueDataForSorting("estimate_point", issue?.["estimate_point"], issue?.["project_id"]),
+            ], //preferring sorting based on empty values to always keep the empty values below
+            ["asc", "desc"]
+          )
+        );
+
+      case "link_count":
+        return getIssueIds(orderBy(array, "link_count"));
+      case "-link_count":
+        return getIssueIds(orderBy(array, "link_count", ["desc"]));
+
+      case "sub_issues_count":
+        return getIssueIds(orderBy(array, "sub_issues_count"));
+      case "-sub_issues_count":
+        return getIssueIds(orderBy(array, "sub_issues_count", ["desc"]));
+
+      // Array
+      case "labels__name":
+        return getIssueIds(
+          orderBy(array, [
+            getSortOrderToFilterEmptyValues.bind(null, "label_ids"), //preferring sorting based on empty values to always keep the empty values below
+            (issue) =>
+              this.populateIssueDataForSorting("label_ids", issue?.["label_ids"], issue?.["project_id"], "asc"),
+          ])
+        );
+      case "-labels__name":
+        return getIssueIds(
+          orderBy(
+            array,
+            [
+              getSortOrderToFilterEmptyValues.bind(null, "label_ids"), //preferring sorting based on empty values to always keep the empty values below
+              (issue) =>
+                this.populateIssueDataForSorting("label_ids", issue?.["label_ids"], issue?.["project_id"], "asc"),
+            ],
+            ["asc", "desc"]
+          )
+        );
+
+      case "issue_module__module__name":
+        return getIssueIds(
+          orderBy(array, [
+            getSortOrderToFilterEmptyValues.bind(null, "module_ids"), //preferring sorting based on empty values to always keep the empty values below
+            (issue) =>
+              this.populateIssueDataForSorting("module_ids", issue?.["module_ids"], issue?.["project_id"], "asc"),
+          ])
+        );
+      case "-issue_module__module__name":
+        return getIssueIds(
+          orderBy(
+            array,
+            [
+              getSortOrderToFilterEmptyValues.bind(null, "module_ids"), //preferring sorting based on empty values to always keep the empty values below
+              (issue) =>
+                this.populateIssueDataForSorting("module_ids", issue?.["module_ids"], issue?.["project_id"], "asc"),
+            ],
+            ["asc", "desc"]
+          )
+        );
+
+      case "issue_cycle__cycle__name":
+        return getIssueIds(
+          orderBy(array, [
+            getSortOrderToFilterEmptyValues.bind(null, "cycle_id"), //preferring sorting based on empty values to always keep the empty values below
+            (issue) => this.populateIssueDataForSorting("cycle_id", issue?.["cycle_id"], issue?.["project_id"], "asc"),
+          ])
+        );
+      case "-issue_cycle__cycle__name":
+        return getIssueIds(
+          orderBy(
+            array,
+            [
+              getSortOrderToFilterEmptyValues.bind(null, "cycle_id"), //preferring sorting based on empty values to always keep the empty values below
+              (issue) =>
+                this.populateIssueDataForSorting("cycle_id", issue?.["cycle_id"], issue?.["project_id"], "asc"),
+            ],
+            ["asc", "desc"]
+          )
+        );
+
+      case "assignees__first_name":
+        return getIssueIds(
+          orderBy(array, [
+            getSortOrderToFilterEmptyValues.bind(null, "assignee_ids"), //preferring sorting based on empty values to always keep the empty values below
+            (issue) =>
+              this.populateIssueDataForSorting("assignee_ids", issue?.["assignee_ids"], issue?.["project_id"], "asc"),
+          ])
+        );
+      case "-assignees__first_name":
+        return getIssueIds(
+          orderBy(
+            array,
+            [
+              getSortOrderToFilterEmptyValues.bind(null, "assignee_ids"), //preferring sorting based on empty values to always keep the empty values below
+              (issue) =>
+                this.populateIssueDataForSorting("assignee_ids", issue?.["assignee_ids"], issue?.["project_id"], "asc"),
+            ],
+            ["asc", "desc"]
+          )
+        );
+
+      default:
+        return getIssueIds(array);
+    }
+  };
+
+  /**
+   * This Method is called to store the pagination options and paginated data from response
+   * @param issuesResponse issue list response
+   * @param options pagination options to be stored for next page call
+   * @param groupId
+   * @param subGroupId
+   */
+  storePreviousPaginationValues = (
+    issuesResponse: TIssuesResponse,
+    options?: IssuePaginationOptions,
+    groupId?: string,
+    subGroupId?: string
+  ) => {
+    if (options) this.paginationOptions = options;
+
+    this.setPaginationData(
+      issuesResponse.prev_cursor,
+      issuesResponse.next_cursor,
+      issuesResponse.next_page_results,
+      groupId,
+      subGroupId
+    );
+  };
+}
diff --git a/apps/web/core/store/issue/helpers/issue-filter-helper.store.ts b/apps/web/core/store/issue/helpers/issue-filter-helper.store.ts
new file mode 100644
index 0000000..b89801f
--- /dev/null
+++ b/apps/web/core/store/issue/helpers/issue-filter-helper.store.ts
@@ -0,0 +1,350 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty } from "lodash-es";
+// plane constants
+import type { EIssueFilterType } from "@plane/constants";
+import {
+  EIssueGroupByToServerOptions,
+  EServerGroupByToFilterOptions,
+  ENABLE_ISSUE_DEPENDENCIES,
+} from "@plane/constants";
+import type {
+  EIssuesStoreType,
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  IIssueFilters,
+  IIssueFiltersResponse,
+  IssuePaginationOptions,
+  TIssueKanbanFilters,
+  TIssueParams,
+  TStaticViewTypes,
+  TWorkItemFilterExpression,
+} from "@plane/types";
+import { EIssueLayoutTypes } from "@plane/types";
+// helpers
+import { getComputedDisplayFilters, getComputedDisplayProperties } from "@plane/utils";
+// lib
+import { storage } from "@/lib/local-storage";
+
+interface ILocalStoreIssueFilters {
+  key: EIssuesStoreType;
+  workspaceSlug: string;
+  viewId: string | undefined; // It can be projectId, moduleId, cycleId, projectViewId
+  userId: string | undefined;
+  filters: IIssueFilters;
+}
+
+export interface IBaseIssueFilterStore {
+  // observables
+  filters: Record<string, IIssueFilters>;
+  //computed
+  appliedFilters: Partial<Record<TIssueParams, string | boolean>> | undefined;
+  issueFilters: IIssueFilters | undefined;
+}
+
+export interface IIssueFilterHelperStore {
+  computedIssueFilters(filters: IIssueFilters): IIssueFilters;
+  computedFilteredParams(
+    richFilters: TWorkItemFilterExpression,
+    displayFilters: IIssueDisplayFilterOptions | undefined,
+    acceptableParamsByLayout: TIssueParams[]
+  ): Partial<Record<TIssueParams, string | boolean>>;
+  computedFilters(filters: IIssueFilterOptions): IIssueFilterOptions;
+  getFilterConditionBasedOnViews: (
+    currentUserId: string | undefined,
+    type: TStaticViewTypes
+  ) => Partial<Record<TIssueParams, string>> | undefined;
+  computedDisplayFilters(
+    displayFilters: IIssueDisplayFilterOptions,
+    defaultValues?: IIssueDisplayFilterOptions
+  ): IIssueDisplayFilterOptions;
+  computedDisplayProperties(filters: IIssueDisplayProperties): IIssueDisplayProperties;
+}
+
+export class IssueFilterHelperStore implements IIssueFilterHelperStore {
+  // oxlint-disable-next-line no-useless-constructor
+  constructor() {}
+
+  /**
+   * @description This method is used to apply the display filters on the issues
+   * @param {IIssueFilters} filters
+   * @returns {IIssueFilters}
+   */
+  computedIssueFilters = (filters: IIssueFilters): IIssueFilters => ({
+    richFilters: isEmpty(filters?.richFilters) ? {} : filters?.richFilters,
+    displayFilters: isEmpty(filters?.displayFilters) ? undefined : filters?.displayFilters,
+    displayProperties: isEmpty(filters?.displayProperties) ? undefined : filters?.displayProperties,
+    kanbanFilters: isEmpty(filters?.kanbanFilters) ? undefined : filters?.kanbanFilters,
+  });
+
+  /**
+   * @description This method is used to convert the filters array params to string params
+   * @param {TWorkItemFilterExpression} richFilters
+   * @param {IIssueDisplayFilterOptions} displayFilters
+   * @param {string[]} acceptableParamsByLayout
+   * @returns {Partial<Record<TIssueParams, string | boolean>>}
+   */
+  computedFilteredParams = (
+    richFilters: TWorkItemFilterExpression,
+    displayFilters: IIssueDisplayFilterOptions | undefined,
+    acceptableParamsByLayout: TIssueParams[]
+  ): Partial<Record<TIssueParams, string | boolean>> => {
+    const computedDisplayFilters: Partial<Record<TIssueParams, undefined | string[] | boolean | string>> = {
+      group_by: displayFilters?.group_by ? EIssueGroupByToServerOptions[displayFilters.group_by] : undefined,
+      sub_group_by: displayFilters?.sub_group_by
+        ? EIssueGroupByToServerOptions[displayFilters.sub_group_by]
+        : undefined,
+      order_by: displayFilters?.order_by || undefined,
+      sub_issue: displayFilters?.sub_issue ?? true,
+    };
+
+    const issueFiltersParams: Partial<Record<TIssueParams, boolean | string>> = {};
+    Object.keys(computedDisplayFilters).forEach((key) => {
+      const _key = key as TIssueParams;
+      const _value: string | boolean | string[] | undefined = computedDisplayFilters[_key];
+      const nonEmptyArrayValue = Array.isArray(_value) && _value.length === 0 ? undefined : _value;
+      if (nonEmptyArrayValue != undefined && acceptableParamsByLayout.includes(_key))
+        issueFiltersParams[_key] = Array.isArray(nonEmptyArrayValue)
+          ? nonEmptyArrayValue.join(",")
+          : nonEmptyArrayValue;
+    });
+
+    // work item filters
+    if (richFilters) issueFiltersParams.filters = JSON.stringify(richFilters);
+
+    if (displayFilters?.layout) issueFiltersParams.layout = displayFilters?.layout;
+
+    if (ENABLE_ISSUE_DEPENDENCIES && displayFilters?.layout === EIssueLayoutTypes.GANTT)
+      issueFiltersParams["expand"] = "issue_relation,issue_related";
+
+    return issueFiltersParams;
+  };
+
+  /**
+   * @description This method is used to apply the filters on the issues
+   * @param {IIssueFilterOptions} filters
+   * @returns {IIssueFilterOptions}
+   */
+  computedFilters = (filters: IIssueFilterOptions): IIssueFilterOptions => ({
+    priority: filters?.priority || null,
+    state: filters?.state || null,
+    state_group: filters?.state_group || null,
+    assignees: filters?.assignees || null,
+    mentions: filters?.mentions || null,
+    created_by: filters?.created_by || null,
+    labels: filters?.labels || null,
+    cycle: filters?.cycle || null,
+    module: filters?.module || null,
+    start_date: filters?.start_date || null,
+    target_date: filters?.target_date || null,
+    project: filters?.project || null,
+    team_project: filters?.team_project || null,
+    subscriber: filters?.subscriber || null,
+    issue_type: filters?.issue_type || null,
+  });
+
+  /**
+   * @description This method is used to get the filter conditions based on the views
+   * @param currentUserId
+   * @param type
+   * @returns
+   */
+  getFilterConditionBasedOnViews: IIssueFilterHelperStore["getFilterConditionBasedOnViews"] = (currentUserId, type) => {
+    if (!currentUserId) return undefined;
+    switch (type) {
+      case "assigned":
+        return {
+          assignees: currentUserId,
+        };
+      case "created":
+        return {
+          created_by: currentUserId,
+        };
+      case "subscribed":
+        return {
+          subscriber: currentUserId,
+        };
+      case "all-issues":
+      default:
+        return undefined;
+    }
+  };
+
+  /**
+   * @description This method is used to apply the display filters on the issues
+   * @param {IIssueDisplayFilterOptions} displayFilters
+   * @returns {IIssueDisplayFilterOptions}
+   */
+  computedDisplayFilters = (
+    displayFilters: IIssueDisplayFilterOptions,
+    defaultValues?: IIssueDisplayFilterOptions
+  ): IIssueDisplayFilterOptions => {
+    const computedFilters = getComputedDisplayFilters(displayFilters, defaultValues);
+    return computedFilters;
+  };
+
+  /**
+   * @description This method is used to apply the display properties on the issues
+   * @param {IIssueDisplayProperties} displayProperties
+   * @returns {IIssueDisplayProperties}
+   */
+  computedDisplayProperties = (displayProperties: IIssueDisplayProperties): IIssueDisplayProperties =>
+    getComputedDisplayProperties(displayProperties);
+
+  handleIssuesLocalFilters = {
+    fetchFiltersFromStorage: () => {
+      const _filters = storage.get("issue_local_filters");
+      return _filters ? JSON.parse(_filters) : [];
+    },
+
+    get: (
+      currentView: EIssuesStoreType,
+      workspaceSlug: string,
+      viewId: string | undefined, // It can be projectId, moduleId, cycleId, projectViewId
+      userId: string | undefined
+    ) => {
+      const storageFilters = this.handleIssuesLocalFilters.fetchFiltersFromStorage();
+      const currentFilterIndex = storageFilters.findIndex(
+        (filter: ILocalStoreIssueFilters) =>
+          filter.key === currentView &&
+          filter.workspaceSlug === workspaceSlug &&
+          filter.viewId === viewId &&
+          filter.userId === userId
+      );
+      if (!currentFilterIndex && currentFilterIndex.length < 0) return undefined;
+
+      return storageFilters[currentFilterIndex]?.filters || {};
+    },
+
+    set: (
+      currentView: EIssuesStoreType,
+      filterType: EIssueFilterType,
+      workspaceSlug: string,
+      viewId: string | undefined, // It can be projectId, moduleId, cycleId, projectViewId
+      userId: string | undefined,
+      filters: Partial<IIssueFiltersResponse & { kanban_filters: TIssueKanbanFilters }>
+    ) => {
+      const storageFilters = this.handleIssuesLocalFilters.fetchFiltersFromStorage();
+      const currentFilterIndex = storageFilters.findIndex(
+        (filter: ILocalStoreIssueFilters) =>
+          filter.key === currentView &&
+          filter.workspaceSlug === workspaceSlug &&
+          filter.viewId === viewId &&
+          filter.userId === userId
+      );
+
+      if (currentFilterIndex < 0)
+        storageFilters.push({
+          key: currentView,
+          workspaceSlug: workspaceSlug,
+          viewId: viewId,
+          userId: userId,
+          filters: filters,
+        });
+      else
+        storageFilters[currentFilterIndex] = {
+          ...storageFilters[currentFilterIndex],
+          filters: {
+            ...storageFilters[currentFilterIndex].filters,
+            [filterType]: filters[filterType as keyof IIssueFiltersResponse],
+          },
+        };
+      // All group_by "filters" are stored in a single array, will cause inconsistency in case of duplicated values
+      storage.set("issue_local_filters", JSON.stringify(storageFilters));
+    },
+  };
+
+  /**
+   * This Method returns true if the display properties changed requires a server side update
+   * @param displayFilters
+   * @returns
+   */
+  getShouldReFetchIssues = (displayFilters: IIssueDisplayFilterOptions) => {
+    const NON_SERVER_DISPLAY_FILTERS = ["order_by", "sub_issue", "type"];
+    const displayFilterKeys = Object.keys(displayFilters);
+
+    return NON_SERVER_DISPLAY_FILTERS.some((serverDisplayfilter: string) =>
+      displayFilterKeys.includes(serverDisplayfilter)
+    );
+  };
+
+  /**
+   * This Method returns true if the display properties changed requires a server side update
+   * @param displayFilters
+   * @returns
+   */
+  getShouldClearIssues = (displayFilters: IIssueDisplayFilterOptions) => {
+    const NON_SERVER_DISPLAY_FILTERS = ["layout"];
+    const displayFilterKeys = Object.keys(displayFilters);
+
+    return NON_SERVER_DISPLAY_FILTERS.some((serverDisplayfilter: string) =>
+      displayFilterKeys.includes(serverDisplayfilter)
+    );
+  };
+
+  /**
+   * This Method is used to construct the url params along with paginated values
+   * @param filterParams params generated from filters
+   * @param options pagination options
+   * @param cursor cursor if exists
+   * @param groupId groupId if to fetch By group
+   * @param subGroupId groupId if to fetch By sub group
+   * @returns
+   */
+  getPaginationParams(
+    filterParams: Partial<Record<TIssueParams, string | boolean>> | undefined,
+    options: IssuePaginationOptions,
+    cursor: string | undefined,
+    groupId?: string,
+    subGroupId?: string
+  ) {
+    // if cursor exists, use the cursor. If it doesn't exist construct the cursor based on per page count
+    const pageCursor = cursor ? cursor : groupId ? `${options.perPageCount}:1:0` : `${options.perPageCount}:0:0`;
+
+    // pagination params
+    const paginationParams: Partial<Record<TIssueParams, string | boolean>> = {
+      ...filterParams,
+      cursor: pageCursor,
+      per_page: options.perPageCount.toString(),
+    };
+
+    // If group by is specifically sent through options, like that for calendar layout, use that to group
+    if (options.groupedBy) {
+      paginationParams.group_by = options.groupedBy;
+    }
+
+    // If before and after dates are sent from option to filter by then, add them to filter the options
+    if (options.after && options.before) {
+      paginationParams["target_date"] = `${options.after};after,${options.before};before`;
+    }
+
+    // If groupId is passed down, add a filter param for that group Id
+    if (groupId) {
+      const groupBy = paginationParams["group_by"] as EIssueGroupByToServerOptions | undefined;
+      delete paginationParams["group_by"];
+
+      if (groupBy) {
+        const groupByFilterOption = EServerGroupByToFilterOptions[groupBy];
+        paginationParams[groupByFilterOption] = groupId;
+      }
+    }
+
+    // If subGroupId is passed down, add a filter param for that subGroup Id
+    if (subGroupId) {
+      const subGroupBy = paginationParams["sub_group_by"] as EIssueGroupByToServerOptions | undefined;
+      delete paginationParams["sub_group_by"];
+
+      if (subGroupBy) {
+        const subGroupByFilterOption = EServerGroupByToFilterOptions[subGroupBy];
+        paginationParams[subGroupByFilterOption] = subGroupId;
+      }
+    }
+
+    return paginationParams;
+  }
+}
diff --git a/apps/web/core/store/issue/issue-details/activity.store.ts b/apps/web/core/store/issue/issue-details/activity.store.ts
new file mode 100644
index 0000000..6687aeb
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/activity.store.ts
@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { concat, orderBy, set, uniq, update } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane package imports
+import type { E_SORT_ORDER } from "@plane/constants";
+import { EActivityFilterType } from "@plane/constants";
+import type {
+  TIssueActivityComment,
+  TIssueActivity,
+  TIssueActivityMap,
+  TIssueActivityIdMap,
+  TIssueServiceType,
+} from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// services
+import { IssueActivityService } from "@/services/issue";
+// store
+import type { CoreRootStore } from "@/store/root.store";
+
+export type TActivityLoader = "fetch" | "mutate" | undefined;
+
+export interface IIssueActivityStoreActions {
+  // actions
+  fetchActivities: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    loaderType?: TActivityLoader
+  ) => Promise<TIssueActivity[]>;
+}
+
+export interface IIssueActivityStore extends IIssueActivityStoreActions {
+  // observables
+  loader: TActivityLoader;
+  activities: TIssueActivityIdMap;
+  activityMap: TIssueActivityMap;
+  // helper methods
+  getActivitiesByIssueId: (issueId: string) => string[] | undefined;
+  getActivityById: (activityId: string) => TIssueActivity | undefined;
+  getActivityAndCommentsByIssueId: (issueId: string, sortOrder: E_SORT_ORDER) => TIssueActivityComment[] | undefined;
+}
+
+export class IssueActivityStore implements IIssueActivityStore {
+  // observables
+  loader: TActivityLoader = "fetch";
+  activities: TIssueActivityIdMap = {};
+  activityMap: TIssueActivityMap = {};
+  // services
+  serviceType;
+  issueActivityService;
+
+  constructor(
+    protected store: CoreRootStore,
+    serviceType: TIssueServiceType = EIssueServiceType.ISSUES
+  ) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      activities: observable,
+      activityMap: observable,
+      // actions
+      fetchActivities: action,
+    });
+    this.serviceType = serviceType;
+    // services
+    this.issueActivityService = new IssueActivityService(this.serviceType);
+  }
+
+  // helper methods
+  getActivitiesByIssueId = (issueId: string) => {
+    if (!issueId) return undefined;
+    return this.activities[issueId] ?? undefined;
+  };
+
+  getActivityById = (activityId: string) => {
+    if (!activityId) return undefined;
+    return this.activityMap[activityId] ?? undefined;
+  };
+
+  protected buildActivityAndCommentItems(issueId: string): TIssueActivityComment[] | undefined {
+    if (!issueId) return undefined;
+
+    const activityComments: TIssueActivityComment[] = [];
+
+    const currentStore =
+      this.serviceType === EIssueServiceType.EPICS ? this.store.issue.epicDetail : this.store.issue.issueDetail;
+
+    const activities = this.getActivitiesByIssueId(issueId);
+    const comments = currentStore.comment.getCommentsByIssueId(issueId);
+
+    if (!activities || !comments) return undefined;
+
+    activities.forEach((activityId) => {
+      const activity = this.getActivityById(activityId);
+      if (!activity) return;
+      const type =
+        activity.field === "state"
+          ? EActivityFilterType.STATE
+          : activity.field === "assignees"
+            ? EActivityFilterType.ASSIGNEE
+            : activity.field === null
+              ? EActivityFilterType.DEFAULT
+              : EActivityFilterType.ACTIVITY;
+      activityComments.push({
+        id: activity.id,
+        activity_type: type,
+        created_at: activity.created_at,
+      });
+    });
+
+    comments.forEach((commentId) => {
+      const comment = currentStore.comment.getCommentById(commentId);
+      if (!comment) return;
+      activityComments.push({
+        id: comment.id,
+        activity_type: EActivityFilterType.COMMENT,
+        created_at: comment.created_at,
+      });
+    });
+
+    return activityComments;
+  }
+
+  protected sortActivityComments(items: TIssueActivityComment[], sortOrder: E_SORT_ORDER): TIssueActivityComment[] {
+    return orderBy(items, (e) => new Date(e.created_at || 0), sortOrder);
+  }
+
+  getActivityAndCommentsByIssueId = computedFn((issueId: string, sortOrder: E_SORT_ORDER) => {
+    const baseItems = this.buildActivityAndCommentItems(issueId);
+    if (!baseItems) return undefined;
+    return this.sortActivityComments(baseItems, sortOrder);
+  });
+
+  // actions
+  public async fetchActivities(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    loaderType: TActivityLoader = "fetch"
+  ) {
+    try {
+      this.loader = loaderType;
+
+      let props = {};
+      const currentActivityIds = this.getActivitiesByIssueId(issueId);
+      if (currentActivityIds && currentActivityIds.length > 0) {
+        const currentActivity = this.getActivityById(currentActivityIds[currentActivityIds.length - 1]);
+        if (currentActivity) props = { created_at__gt: currentActivity.created_at };
+      }
+
+      const activities = await this.issueActivityService.getIssueActivities(workspaceSlug, projectId, issueId, props);
+
+      const activityIds = activities.map((activity) => activity.id);
+
+      runInAction(() => {
+        // oxlint-disable-next-line no-shadow
+        update(this.activities, issueId, (currentActivityIds) => {
+          if (!currentActivityIds) return activityIds;
+          return uniq(concat(currentActivityIds, activityIds));
+        });
+        activities.forEach((activity) => {
+          set(this.activityMap, activity.id, activity);
+        });
+        this.loader = undefined;
+      });
+
+      return activities;
+    } catch (error) {
+      this.loader = undefined;
+      throw error;
+    }
+  }
+}
diff --git a/apps/web/core/store/issue/issue-details/attachment.store.ts b/apps/web/core/store/issue/issue-details/attachment.store.ts
new file mode 100644
index 0000000..c9eeb11
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/attachment.store.ts
@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { uniq, pull, set, debounce, update, concat } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+import { v4 as uuidv4 } from "uuid";
+// types
+import type { TIssueAttachment, TIssueAttachmentMap, TIssueAttachmentIdMap, TIssueServiceType } from "@plane/types";
+// services
+import { IssueAttachmentService } from "@/services/issue";
+import type { IIssueRootStore } from "../root.store";
+import type { IIssueDetail } from "./root.store";
+
+export type TAttachmentUploadStatus = {
+  id: string;
+  name: string;
+  progress: number;
+  size: number;
+  type: string;
+};
+
+export interface IIssueAttachmentStoreActions {
+  // actions
+  addAttachments: (issueId: string, attachments: TIssueAttachment[]) => void;
+  fetchAttachments: (workspaceSlug: string, projectId: string, issueId: string) => Promise<TIssueAttachment[]>;
+  createAttachment: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    file: File
+  ) => Promise<TIssueAttachment>;
+  removeAttachment: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    attachmentId: string
+  ) => Promise<TIssueAttachment>;
+}
+
+export interface IIssueAttachmentStore extends IIssueAttachmentStoreActions {
+  // observables
+  attachments: TIssueAttachmentIdMap;
+  attachmentMap: TIssueAttachmentMap;
+  attachmentsUploadStatusMap: Record<string, Record<string, TAttachmentUploadStatus>>;
+  // computed
+  issueAttachments: string[] | undefined;
+  // helper methods
+  getAttachmentsUploadStatusByIssueId: (issueId: string) => TAttachmentUploadStatus[] | undefined;
+  getAttachmentsByIssueId: (issueId: string) => string[] | undefined;
+  getAttachmentById: (attachmentId: string) => TIssueAttachment | undefined;
+  getAttachmentsCountByIssueId: (issueId: string) => number;
+}
+
+export class IssueAttachmentStore implements IIssueAttachmentStore {
+  // observables
+  attachments: TIssueAttachmentIdMap = {};
+  attachmentMap: TIssueAttachmentMap = {};
+  attachmentsUploadStatusMap: Record<string, Record<string, TAttachmentUploadStatus>> = {};
+  // root store
+  rootIssueStore: IIssueRootStore;
+  rootIssueDetailStore: IIssueDetail;
+  // services
+  issueAttachmentService;
+
+  constructor(rootStore: IIssueRootStore, serviceType: TIssueServiceType) {
+    makeObservable(this, {
+      // observables
+      attachments: observable,
+      attachmentMap: observable,
+      attachmentsUploadStatusMap: observable,
+      // computed
+      issueAttachments: computed,
+      // actions
+      addAttachments: action.bound,
+      fetchAttachments: action,
+      createAttachment: action,
+      removeAttachment: action,
+    });
+    // root store
+    this.rootIssueStore = rootStore;
+    this.rootIssueDetailStore = rootStore.issueDetail;
+    // services
+    this.issueAttachmentService = new IssueAttachmentService(serviceType);
+  }
+
+  // computed
+  get issueAttachments() {
+    const issueId = this.rootIssueDetailStore.peekIssue?.issueId;
+    if (!issueId) return undefined;
+    return this.attachments[issueId] ?? undefined;
+  }
+
+  // helper methods
+  getAttachmentsUploadStatusByIssueId = computedFn((issueId: string) => {
+    if (!issueId) return undefined;
+    const attachmentsUploadStatus = Object.values(this.attachmentsUploadStatusMap[issueId] ?? {});
+    return attachmentsUploadStatus ?? undefined;
+  });
+
+  getAttachmentsByIssueId = (issueId: string) => {
+    if (!issueId) return undefined;
+    return this.attachments[issueId] ?? undefined;
+  };
+
+  getAttachmentById = (attachmentId: string) => {
+    if (!attachmentId) return undefined;
+    return this.attachmentMap[attachmentId] ?? undefined;
+  };
+
+  getAttachmentsCountByIssueId = (issueId: string) => {
+    const attachments = this.getAttachmentsByIssueId(issueId);
+    return attachments?.length ?? 0;
+  };
+
+  // actions
+  addAttachments = (issueId: string, attachments: TIssueAttachment[]) => {
+    if (attachments && attachments.length > 0) {
+      const newAttachmentIds = attachments.map((attachment) => attachment.id);
+      runInAction(() => {
+        update(this.attachments, [issueId], (attachmentIds = []) => uniq(concat(attachmentIds, newAttachmentIds)));
+        attachments.forEach((attachment) => set(this.attachmentMap, attachment.id, attachment));
+      });
+    }
+  };
+
+  fetchAttachments = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const response = await this.issueAttachmentService.getIssueAttachments(workspaceSlug, projectId, issueId);
+    this.addAttachments(issueId, response);
+    return response;
+  };
+
+  private debouncedUpdateProgress = debounce((issueId: string, tempId: string, progress: number) => {
+    runInAction(() => {
+      set(this.attachmentsUploadStatusMap, [issueId, tempId, "progress"], progress);
+    });
+  }, 16);
+
+  createAttachment = async (workspaceSlug: string, projectId: string, issueId: string, file: File) => {
+    const tempId = uuidv4();
+    try {
+      // update attachment upload status
+      runInAction(() => {
+        set(this.attachmentsUploadStatusMap, [issueId, tempId], {
+          id: tempId,
+          name: file.name,
+          progress: 0,
+          size: file.size,
+          type: file.type,
+        });
+      });
+      const response = await this.issueAttachmentService.uploadIssueAttachment(
+        workspaceSlug,
+        projectId,
+        issueId,
+        file,
+        (progressEvent) => {
+          const progressPercentage = Math.round((progressEvent.progress ?? 0) * 100);
+          this.debouncedUpdateProgress(issueId, tempId, progressPercentage);
+        }
+      );
+
+      if (response && response.id) {
+        runInAction(() => {
+          update(this.attachments, [issueId], (attachmentIds = []) => uniq(concat(attachmentIds, [response.id])));
+          set(this.attachmentMap, response.id, response);
+          this.rootIssueStore.issues.updateIssue(issueId, {
+            attachment_count: this.getAttachmentsCountByIssueId(issueId),
+          });
+        });
+      }
+
+      return response;
+    } catch (error) {
+      console.error("Error in uploading issue attachment:", error);
+      throw error;
+    } finally {
+      runInAction(() => {
+        delete this.attachmentsUploadStatusMap[issueId][tempId];
+      });
+    }
+  };
+
+  removeAttachment = async (workspaceSlug: string, projectId: string, issueId: string, attachmentId: string) => {
+    const response = await this.issueAttachmentService.deleteIssueAttachment(
+      workspaceSlug,
+      projectId,
+      issueId,
+      attachmentId
+    );
+
+    runInAction(() => {
+      update(this.attachments, [issueId], (attachmentIds = []) => {
+        if (attachmentIds.includes(attachmentId)) pull(attachmentIds, attachmentId);
+        return attachmentIds;
+      });
+      delete this.attachmentMap[attachmentId];
+      this.rootIssueStore.issues.updateIssue(issueId, {
+        attachment_count: this.getAttachmentsCountByIssueId(issueId),
+      });
+    });
+
+    return response;
+  };
+}
diff --git a/apps/web/core/store/issue/issue-details/comment.store.ts b/apps/web/core/store/issue/issue-details/comment.store.ts
new file mode 100644
index 0000000..b184ec6
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/comment.store.ts
@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { pull, concat, update, uniq, set } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+// Plane Imports
+import type { TIssueComment, TIssueCommentMap, TIssueCommentIdMap, TIssueServiceType } from "@plane/types";
+// services
+import { IssueCommentService } from "@/services/issue";
+// types
+import type { IIssueDetail } from "./root.store";
+
+export type TCommentLoader = "fetch" | "create" | "update" | "delete" | "mutate" | undefined;
+
+export interface IIssueCommentStoreActions {
+  fetchComments: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    loaderType?: TCommentLoader
+  ) => Promise<TIssueComment[]>;
+  createComment: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssueComment>
+  ) => Promise<any>;
+  updateComment: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: Partial<TIssueComment>
+  ) => Promise<any>;
+  removeComment: (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => Promise<any>;
+}
+
+export interface IIssueCommentStore extends IIssueCommentStoreActions {
+  // observables
+  loader: TCommentLoader;
+  comments: TIssueCommentIdMap;
+  commentMap: TIssueCommentMap;
+  // helper methods
+  getCommentsByIssueId: (issueId: string) => string[] | undefined;
+  getCommentById: (activityId: string) => TIssueComment | undefined;
+}
+
+export class IssueCommentStore implements IIssueCommentStore {
+  // observables
+  loader: TCommentLoader = "fetch";
+  comments: TIssueCommentIdMap = {};
+  commentMap: TIssueCommentMap = {};
+  serviceType;
+  // root store
+  rootIssueDetail: IIssueDetail;
+  // services
+  issueCommentService;
+
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      comments: observable,
+      commentMap: observable,
+      // actions
+      fetchComments: action,
+      createComment: action,
+      updateComment: action,
+      removeComment: action,
+    });
+    // root store
+    this.serviceType = serviceType;
+    this.rootIssueDetail = rootStore;
+    // services
+    this.issueCommentService = new IssueCommentService(serviceType);
+  }
+
+  // helper methods
+  getCommentsByIssueId = (issueId: string) => {
+    if (!issueId) return undefined;
+    return this.comments[issueId] ?? undefined;
+  };
+
+  getCommentById = (commentId: string) => {
+    if (!commentId) return undefined;
+    return this.commentMap[commentId] ?? undefined;
+  };
+
+  fetchComments = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    loaderType: TCommentLoader = "fetch"
+  ) => {
+    this.loader = loaderType;
+
+    let props = {};
+    const _commentIds = this.getCommentsByIssueId(issueId);
+    if (_commentIds && _commentIds.length > 0) {
+      const _comment = this.getCommentById(_commentIds[_commentIds.length - 1]);
+      if (_comment) props = { created_at__gt: _comment.created_at };
+    }
+
+    const comments = await this.issueCommentService.getIssueComments(workspaceSlug, projectId, issueId, props);
+
+    const commentIds = comments.map((comment) => comment.id);
+    runInAction(() => {
+      update(this.comments, issueId, (_commentIds) => {
+        if (!_commentIds) return commentIds;
+        return uniq(concat(_commentIds, commentIds));
+      });
+      comments.forEach((comment) => {
+        this.rootIssueDetail.commentReaction.applyCommentReactions(comment.id, comment?.comment_reactions || []);
+        set(this.commentMap, comment.id, comment);
+      });
+      this.loader = undefined;
+    });
+
+    return comments;
+  };
+
+  createComment = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssueComment>) => {
+    const response = await this.issueCommentService.createIssueComment(workspaceSlug, projectId, issueId, data);
+
+    runInAction(() => {
+      update(this.comments, issueId, (_commentIds) => {
+        if (!_commentIds) return [response.id];
+        return uniq(concat(_commentIds, [response.id]));
+      });
+      set(this.commentMap, response.id, response);
+    });
+
+    return response;
+  };
+
+  updateComment = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: Partial<TIssueComment>
+  ) => {
+    try {
+      runInAction(() => {
+        Object.keys(data).forEach((key) => {
+          set(this.commentMap, [commentId, key], data[key as keyof TIssueComment]);
+        });
+      });
+
+      const response = await this.issueCommentService.patchIssueComment(
+        workspaceSlug,
+        projectId,
+        issueId,
+        commentId,
+        data
+      );
+
+      runInAction(() => {
+        set(this.commentMap, [commentId, "updated_at"], response.updated_at);
+        set(this.commentMap, [commentId, "edited_at"], response.edited_at);
+      });
+
+      return response;
+    } catch (error) {
+      this.rootIssueDetail.activity.fetchActivities(workspaceSlug, projectId, issueId);
+      throw error;
+    }
+  };
+
+  removeComment = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) => {
+    const response = await this.issueCommentService.deleteIssueComment(workspaceSlug, projectId, issueId, commentId);
+
+    runInAction(() => {
+      pull(this.comments[issueId], commentId);
+      delete this.commentMap[commentId];
+    });
+
+    return response;
+  };
+}
diff --git a/apps/web/core/store/issue/issue-details/comment_reaction.store.ts b/apps/web/core/store/issue/issue-details/comment_reaction.store.ts
new file mode 100644
index 0000000..6e5b4d2
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/comment_reaction.store.ts
@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { pull, find, concat, update, set } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+// Plane Imports
+import type { TIssueCommentReaction, TIssueCommentReactionIdMap, TIssueCommentReactionMap } from "@plane/types";
+import { groupReactions } from "@plane/utils";
+// services
+import { IssueReactionService } from "@/services/issue";
+// types
+import type { IIssueDetail } from "./root.store";
+
+export interface IIssueCommentReactionStoreActions {
+  // actions
+  fetchCommentReactions: (
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string
+  ) => Promise<TIssueCommentReaction[]>;
+  applyCommentReactions: (commentId: string, commentReactions: TIssueCommentReaction[]) => void;
+  createCommentReaction: (
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    reaction: string
+  ) => Promise<any>;
+  removeCommentReaction: (
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    reaction: string,
+    userId: string
+  ) => Promise<any>;
+}
+
+export interface IIssueCommentReactionStore extends IIssueCommentReactionStoreActions {
+  // observables
+  commentReactions: TIssueCommentReactionIdMap;
+  commentReactionMap: TIssueCommentReactionMap;
+  // helper methods
+  getCommentReactionsByCommentId: (commentId: string) => { [reaction_id: string]: string[] } | undefined;
+  getCommentReactionById: (reactionId: string) => TIssueCommentReaction | undefined;
+  commentReactionsByUser: (commentId: string, userId: string) => TIssueCommentReaction[];
+}
+
+export class IssueCommentReactionStore implements IIssueCommentReactionStore {
+  // observables
+  commentReactions: TIssueCommentReactionIdMap = {};
+  commentReactionMap: TIssueCommentReactionMap = {};
+  // root store
+  rootIssueDetailStore: IIssueDetail;
+  // services
+  issueReactionService;
+
+  constructor(rootStore: IIssueDetail) {
+    makeObservable(this, {
+      // observables
+      commentReactions: observable,
+      commentReactionMap: observable,
+      // actions
+      fetchCommentReactions: action,
+      applyCommentReactions: action,
+      createCommentReaction: action,
+      removeCommentReaction: action,
+    });
+    // root store
+    this.rootIssueDetailStore = rootStore;
+    // services
+    this.issueReactionService = new IssueReactionService();
+  }
+
+  // helper methods
+  getCommentReactionsByCommentId = (commentId: string) => {
+    if (!commentId) return undefined;
+    return this.commentReactions[commentId] ?? undefined;
+  };
+
+  getCommentReactionById = (reactionId: string) => {
+    if (!reactionId) return undefined;
+    return this.commentReactionMap[reactionId] ?? undefined;
+  };
+
+  commentReactionsByUser = (commentId: string, userId: string) => {
+    if (!commentId || !userId) return [];
+
+    const reactions = this.getCommentReactionsByCommentId(commentId);
+    if (!reactions) return [];
+
+    const _userReactions: TIssueCommentReaction[] = [];
+    Object.keys(reactions).forEach((reaction) => {
+      if (reactions?.[reaction])
+        reactions?.[reaction].map((reactionId) => {
+          const currentReaction = this.getCommentReactionById(reactionId);
+          if (currentReaction && currentReaction.actor === userId) _userReactions.push(currentReaction);
+        });
+    });
+
+    return _userReactions;
+  };
+
+  // actions
+  fetchCommentReactions = async (workspaceSlug: string, projectId: string, commentId: string) => {
+    try {
+      const response = await this.issueReactionService.listIssueCommentReactions(workspaceSlug, projectId, commentId);
+
+      const groupedReactions = groupReactions(response || [], "reaction");
+
+      const commentReactionIdsMap: { [reaction: string]: string[] } = {};
+
+      Object.keys(groupedReactions).map((reactionId) => {
+        const reactionIds = (groupedReactions[reactionId] || []).map((reaction) => reaction.id);
+        commentReactionIdsMap[reactionId] = reactionIds;
+      });
+
+      runInAction(() => {
+        set(this.commentReactions, commentId, commentReactionIdsMap);
+        response.forEach((reaction) => set(this.commentReactionMap, reaction.id, reaction));
+      });
+
+      return response;
+    } catch (error) {
+      console.log("error", error);
+      throw error;
+    }
+  };
+
+  applyCommentReactions = (commentId: string, commentReactions: TIssueCommentReaction[]) => {
+    const groupedReactions = groupReactions(commentReactions || [], "reaction");
+
+    const commentReactionIdsMap: { [reaction: string]: string[] } = {};
+
+    Object.keys(groupedReactions).map((reactionId) => {
+      const reactionIds = (groupedReactions[reactionId] || []).map((reaction) => reaction.id);
+      commentReactionIdsMap[reactionId] = reactionIds;
+    });
+
+    runInAction(() => {
+      set(this.commentReactions, commentId, commentReactionIdsMap);
+      commentReactions.forEach((reaction) => set(this.commentReactionMap, reaction.id, reaction));
+    });
+
+    return;
+  };
+
+  createCommentReaction = async (workspaceSlug: string, projectId: string, commentId: string, reaction: string) => {
+    try {
+      const response = await this.issueReactionService.createIssueCommentReaction(workspaceSlug, projectId, commentId, {
+        reaction,
+      });
+
+      if (!this.commentReactions[commentId]) this.commentReactions[commentId] = {};
+      runInAction(() => {
+        update(this.commentReactions, `${commentId}.${reaction}`, (reactionId) => {
+          if (!reactionId) return [response.id];
+          return concat(reactionId, response.id);
+        });
+        set(this.commentReactionMap, response.id, response);
+      });
+
+      return response;
+    } catch (error) {
+      console.log("error", error);
+      throw error;
+    }
+  };
+
+  removeCommentReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    reaction: string,
+    userId: string
+  ) => {
+    try {
+      const userReactions = this.commentReactionsByUser(commentId, userId);
+      const currentReaction = find(userReactions, { actor: userId, reaction: reaction });
+
+      if (currentReaction && currentReaction.id) {
+        runInAction(() => {
+          pull(this.commentReactions[commentId][reaction], currentReaction.id);
+          delete this.commentReactionMap[reaction];
+        });
+      }
+
+      const response = await this.issueReactionService.deleteIssueCommentReaction(
+        workspaceSlug,
+        projectId,
+        commentId,
+        reaction
+      );
+
+      return response;
+    } catch (error) {
+      this.fetchCommentReactions(workspaceSlug, projectId, commentId);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/issue-details/issue.store.ts b/apps/web/core/store/issue/issue-details/issue.store.ts
new file mode 100644
index 0000000..4abf62b
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/issue.store.ts
@@ -0,0 +1,333 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { makeObservable, observable } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { TIssue, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// services
+import { IssueArchiveService, WorkspaceDraftService, IssueService } from "@/services/issue";
+// types
+import type { IIssueDetail } from "./root.store";
+
+export interface IIssueStoreActions {
+  // actions
+  fetchIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<TIssue>;
+  updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  addCycleToIssue: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
+  addIssueToCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => Promise<void>;
+  removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
+  changeModulesInIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    addModuleIds: string[],
+    removeModuleIds: string[]
+  ) => Promise<void>;
+  removeIssueFromModule: (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => Promise<void>;
+  fetchIssueWithIdentifier: (workspaceSlug: string, project_identifier: string, sequence_id: string) => Promise<TIssue>;
+}
+
+export interface IIssueStore extends IIssueStoreActions {
+  getIsFetchingIssueDetails: (issueId: string | undefined) => boolean;
+  // helper methods
+  getIssueById: (issueId: string) => TIssue | undefined;
+  getIssueIdByIdentifier: (issueIdentifier: string) => string | undefined;
+}
+
+export class IssueStore implements IIssueStore {
+  fetchingIssueDetails: string | undefined = undefined;
+  // root store
+  rootIssueDetailStore: IIssueDetail;
+  // services
+  serviceType;
+  issueService;
+  epicService;
+  issueArchiveService;
+  draftWorkItemService;
+
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
+    makeObservable(this, {
+      fetchingIssueDetails: observable.ref,
+    });
+    // root store
+    this.rootIssueDetailStore = rootStore;
+    // services
+    this.serviceType = serviceType;
+    this.issueService = new IssueService(serviceType);
+    this.epicService = new IssueService(EIssueServiceType.EPICS);
+    this.issueArchiveService = new IssueArchiveService(serviceType);
+    this.draftWorkItemService = new WorkspaceDraftService();
+  }
+
+  getIsFetchingIssueDetails = computedFn((issueId: string | undefined) => {
+    if (!issueId) return false;
+
+    return this.fetchingIssueDetails === issueId;
+  });
+
+  // helper methods
+  getIssueById = computedFn((issueId: string) => {
+    if (!issueId) return undefined;
+    return this.rootIssueDetailStore.rootIssueStore.issues.getIssueById(issueId) ?? undefined;
+  });
+
+  getIssueIdByIdentifier = computedFn((issueIdentifier: string) => {
+    if (!issueIdentifier) return undefined;
+    return this.rootIssueDetailStore.rootIssueStore.issues.getIssueIdByIdentifier(issueIdentifier) ?? undefined;
+  });
+
+  // actions
+  fetchIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const query = {
+      expand: "issue_reactions,issue_attachments,issue_link,parent",
+    };
+
+    this.fetchingIssueDetails = issueId;
+    const issue = await this.issueService.retrieve(workspaceSlug, projectId, issueId, query);
+
+    if (!issue) throw new Error("Work item not found");
+
+    const issuePayload = this.addIssueToStore(issue);
+
+    this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issuePayload]);
+
+    // store handlers from issue detail
+    // parent
+    if (issue && issue?.parent && issue?.parent?.id && issue?.parent?.project_id) {
+      this.issueService.retrieve(workspaceSlug, issue.parent.project_id, issue?.parent?.id).then((res) => {
+        this.rootIssueDetailStore.rootIssueStore.issues.addIssue([res]);
+      });
+    }
+    // assignees
+    // labels
+    // state
+
+    // issue reactions
+    if (issue.issue_reactions) this.rootIssueDetailStore.addReactions(issueId, issue.issue_reactions);
+
+    // fetch issue links
+    if (issue.issue_link) this.rootIssueDetailStore.addLinks(issueId, issue.issue_link);
+
+    // fetch issue attachments
+    if (issue.issue_attachments) this.rootIssueDetailStore.addAttachments(issueId, issue.issue_attachments);
+
+    this.rootIssueDetailStore.addSubscription(issueId, issue.is_subscribed);
+
+    // fetch issue activity
+    this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+
+    // fetch issue comments
+    this.rootIssueDetailStore.comment.fetchComments(workspaceSlug, projectId, issueId);
+
+    // fetch sub issues
+    this.rootIssueDetailStore.subIssues.fetchSubIssues(workspaceSlug, projectId, issueId);
+
+    // fetch issue relations
+    this.rootIssueDetailStore.relation.fetchRelations(workspaceSlug, projectId, issueId);
+
+    // fetching states
+    // TODO: check if this function is required
+    this.rootIssueDetailStore.rootIssueStore.rootStore.state.fetchProjectStates(workspaceSlug, projectId);
+
+    return issue;
+  };
+
+  addIssueToStore = (issue: TIssue) => {
+    const issuePayload: TIssue = {
+      id: issue?.id,
+      sequence_id: issue?.sequence_id,
+      name: issue?.name,
+      description_html: issue?.description_html,
+      sort_order: issue?.sort_order,
+      state_id: issue?.state_id,
+      priority: issue?.priority,
+      label_ids: issue?.label_ids,
+      assignee_ids: issue?.assignee_ids,
+      estimate_point: issue?.estimate_point,
+      sub_issues_count: issue?.sub_issues_count,
+      attachment_count: issue?.attachment_count,
+      link_count: issue?.link_count,
+      project_id: issue?.project_id,
+      parent_id: issue?.parent_id,
+      cycle_id: issue?.cycle_id,
+      module_ids: issue?.module_ids,
+      type_id: issue?.type_id,
+      created_at: issue?.created_at,
+      updated_at: issue?.updated_at,
+      start_date: issue?.start_date,
+      target_date: issue?.target_date,
+      completed_at: issue?.completed_at,
+      archived_at: issue?.archived_at,
+      created_by: issue?.created_by,
+      updated_by: issue?.updated_by,
+      is_draft: issue?.is_draft,
+      is_subscribed: issue?.is_subscribed,
+      is_epic: issue?.is_epic,
+    };
+
+    this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issuePayload]);
+    this.fetchingIssueDetails = undefined;
+
+    return issuePayload;
+  };
+
+  updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
+    const currentStore =
+      this.serviceType === EIssueServiceType.EPICS
+        ? this.rootIssueDetailStore.rootIssueStore.projectEpics
+        : this.rootIssueDetailStore.rootIssueStore.projectIssues;
+
+    await Promise.all([
+      currentStore.updateIssue(workspaceSlug, projectId, issueId, data),
+      this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId),
+    ]);
+  };
+
+  removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const currentStore =
+      this.serviceType === EIssueServiceType.EPICS
+        ? this.rootIssueDetailStore.rootIssueStore.projectEpics
+        : this.rootIssueDetailStore.rootIssueStore.projectIssues;
+    currentStore.removeIssue(workspaceSlug, projectId, issueId);
+  };
+
+  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const currentStore =
+      this.serviceType === EIssueServiceType.EPICS
+        ? this.rootIssueDetailStore.rootIssueStore.projectEpics
+        : this.rootIssueDetailStore.rootIssueStore.projectIssues;
+    currentStore.archiveIssue(workspaceSlug, projectId, issueId);
+  };
+
+  addCycleToIssue = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
+    await this.rootIssueDetailStore.rootIssueStore.cycleIssues.addCycleToIssue(
+      workspaceSlug,
+      projectId,
+      cycleId,
+      issueId
+    );
+    await this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+  };
+
+  addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) => {
+    await this.rootIssueDetailStore.rootIssueStore.cycleIssues.addIssueToCycle(
+      workspaceSlug,
+      projectId,
+      cycleId,
+      issueIds,
+      false
+    );
+    if (issueIds && issueIds.length > 0)
+      await this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueIds[0]);
+  };
+
+  removeIssueFromCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => {
+    const cycle = await this.rootIssueDetailStore.rootIssueStore.cycleIssues.removeIssueFromCycle(
+      workspaceSlug,
+      projectId,
+      cycleId,
+      issueId
+    );
+    await this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+    return cycle;
+  };
+
+  changeModulesInIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    addModuleIds: string[],
+    removeModuleIds: string[]
+  ) => {
+    await this.rootIssueDetailStore.rootIssueStore.moduleIssues.changeModulesInIssue(
+      workspaceSlug,
+      projectId,
+      issueId,
+      addModuleIds,
+      removeModuleIds
+    );
+    await this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+  };
+
+  removeIssueFromModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
+    const currentModule = await this.rootIssueDetailStore.rootIssueStore.moduleIssues.removeIssuesFromModule(
+      workspaceSlug,
+      projectId,
+      moduleId,
+      [issueId]
+    );
+    await this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+    return currentModule;
+  };
+
+  fetchIssueWithIdentifier = async (workspaceSlug: string, project_identifier: string, sequence_id: string) => {
+    const query = {
+      expand: "issue_reactions,issue_attachments,issue_link,parent",
+    };
+    const issue = await this.issueService.retrieveWithIdentifier(workspaceSlug, project_identifier, sequence_id, query);
+    const issueIdentifier = `${project_identifier}-${sequence_id}`;
+    const issueId = issue?.id;
+    const projectId = issue?.project_id;
+    const rootWorkItemDetailStore = issue?.is_epic
+      ? this.rootIssueDetailStore.rootIssueStore.epicDetail
+      : this.rootIssueDetailStore.rootIssueStore.issueDetail;
+
+    if (!issue || !projectId || !issueId) throw new Error("Issue not found");
+
+    const issuePayload = this.addIssueToStore(issue);
+    this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issuePayload]);
+
+    // handle parent issue if exists
+    if (issue?.parent && issue?.parent?.id && issue?.parent?.project_id) {
+      this.issueService.retrieve(workspaceSlug, issue.parent.project_id, issue.parent.id).then((res) => {
+        this.rootIssueDetailStore.rootIssueStore.issues.addIssue([res]);
+      });
+    }
+
+    // add identifiers to map
+    rootWorkItemDetailStore.rootIssueStore.issues.addIssueIdentifier(issueIdentifier, issueId);
+
+    // add related data
+    if (issue.issue_reactions) rootWorkItemDetailStore.addReactions(issue.id, issue.issue_reactions);
+    if (issue.issue_link) rootWorkItemDetailStore.addLinks(issue.id, issue.issue_link);
+    if (issue.issue_attachments) rootWorkItemDetailStore.addAttachments(issue.id, issue.issue_attachments);
+    rootWorkItemDetailStore.addSubscription(issue.id, issue.is_subscribed);
+
+    // fetch related data
+    // issue reactions
+    if (issue.issue_reactions) rootWorkItemDetailStore.addReactions(issueId, issue.issue_reactions);
+
+    // fetch issue links
+    if (issue.issue_link) rootWorkItemDetailStore.addLinks(issueId, issue.issue_link);
+
+    // fetch issue attachments
+    if (issue.issue_attachments) rootWorkItemDetailStore.addAttachments(issueId, issue.issue_attachments);
+
+    rootWorkItemDetailStore.addSubscription(issueId, issue.is_subscribed);
+
+    // fetch issue activity
+    rootWorkItemDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+
+    // fetch issue comments
+    rootWorkItemDetailStore.comment.fetchComments(workspaceSlug, projectId, issueId);
+
+    // fetch sub issues
+    rootWorkItemDetailStore.subIssues.fetchSubIssues(workspaceSlug, projectId, issueId);
+
+    // fetch issue relations
+    rootWorkItemDetailStore.relation.fetchRelations(workspaceSlug, projectId, issueId);
+
+    // fetching states
+    // TODO: check if this function is required
+    rootWorkItemDetailStore.rootIssueStore.rootStore.state.fetchProjectStates(workspaceSlug, projectId);
+
+    return issue;
+  };
+}
diff --git a/apps/web/core/store/issue/issue-details/link.store.ts b/apps/web/core/store/issue/issue-details/link.store.ts
new file mode 100644
index 0000000..e08d090
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/link.store.ts
@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// services
+import type { TIssueLink, TIssueLinkMap, TIssueLinkIdMap, TIssueServiceType } from "@plane/types";
+import { IssueService } from "@/services/issue";
+// types
+import type { IIssueDetail } from "./root.store";
+
+export interface IIssueLinkStoreActions {
+  addLinks: (issueId: string, links: TIssueLink[]) => void;
+  fetchLinks: (workspaceSlug: string, projectId: string, issueId: string) => Promise<TIssueLink[]>;
+  createLink: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<TIssueLink>
+  ) => Promise<TIssueLink>;
+  updateLink: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    linkId: string,
+    data: Partial<TIssueLink>
+  ) => Promise<TIssueLink>;
+  removeLink: (workspaceSlug: string, projectId: string, issueId: string, linkId: string) => Promise<void>;
+}
+
+export interface IIssueLinkStore extends IIssueLinkStoreActions {
+  // observables
+  links: TIssueLinkIdMap;
+  linkMap: TIssueLinkMap;
+  // computed
+  issueLinks: string[] | undefined;
+  // helper methods
+  getLinksByIssueId: (issueId: string) => string[] | undefined;
+  getLinkById: (linkId: string) => TIssueLink | undefined;
+}
+
+export class IssueLinkStore implements IIssueLinkStore {
+  // observables
+  links: TIssueLinkIdMap = {};
+  linkMap: TIssueLinkMap = {};
+  // root store
+  rootIssueDetailStore: IIssueDetail;
+  // services
+  issueService;
+  serviceType;
+
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
+    makeObservable(this, {
+      // observables
+      links: observable,
+      linkMap: observable,
+      // computed
+      issueLinks: computed,
+      // actions
+      addLinks: action.bound,
+      fetchLinks: action,
+      createLink: action,
+      updateLink: action,
+      removeLink: action,
+    });
+    this.serviceType = serviceType;
+    // root store
+    this.rootIssueDetailStore = rootStore;
+    // services
+    this.issueService = new IssueService(serviceType);
+  }
+
+  // computed
+  get issueLinks() {
+    const issueId = this.rootIssueDetailStore.peekIssue?.issueId;
+    if (!issueId) return undefined;
+    return this.links[issueId] ?? undefined;
+  }
+
+  // helper methods
+  getLinksByIssueId = (issueId: string) => {
+    if (!issueId) return undefined;
+    return this.links[issueId] ?? undefined;
+  };
+
+  getLinkById = (linkId: string) => {
+    if (!linkId) return undefined;
+    return this.linkMap[linkId] ?? undefined;
+  };
+
+  // actions
+  addLinks = (issueId: string, links: TIssueLink[]) => {
+    runInAction(() => {
+      this.links[issueId] = links.map((link) => link.id);
+      links.forEach((link) => set(this.linkMap, link.id, link));
+    });
+  };
+
+  fetchLinks = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const response = await this.issueService.fetchIssueLinks(workspaceSlug, projectId, issueId);
+    this.addLinks(issueId, response);
+    return response;
+  };
+
+  createLink = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssueLink>) => {
+    const response = await this.issueService.createIssueLink(workspaceSlug, projectId, issueId, data);
+    const issueLinkCount = this.getLinksByIssueId(issueId)?.length ?? 0;
+    runInAction(() => {
+      this.links[issueId].push(response.id);
+      set(this.linkMap, response.id, response);
+      this.rootIssueDetailStore.rootIssueStore.issues.updateIssue(issueId, {
+        link_count: issueLinkCount + 1, // increment link count
+      });
+    });
+    // fetching activity
+    this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+    return response;
+  };
+
+  updateLink = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    linkId: string,
+    data: Partial<TIssueLink>
+  ) => {
+    const initialData = { ...this.linkMap[linkId] };
+    try {
+      runInAction(() => {
+        Object.keys(data).forEach((key) => {
+          set(this.linkMap, [linkId, key], data[key as keyof TIssueLink]);
+        });
+      });
+
+      const response = await this.issueService.updateIssueLink(workspaceSlug, projectId, issueId, linkId, data);
+
+      // fetching activity
+      this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+      return response;
+    } catch (error) {
+      console.error("error", error);
+      runInAction(() => {
+        Object.keys(initialData).forEach((key) => {
+          set(this.linkMap, [linkId, key], initialData[key as keyof TIssueLink]);
+        });
+      });
+      throw error;
+    }
+  };
+
+  removeLink = async (workspaceSlug: string, projectId: string, issueId: string, linkId: string) => {
+    const issueLinkCount = this.getLinksByIssueId(issueId)?.length ?? 0;
+    await this.issueService.deleteIssueLink(workspaceSlug, projectId, issueId, linkId);
+
+    const linkIndex = this.links[issueId].findIndex((_comment) => _comment === linkId);
+    if (linkIndex >= 0)
+      runInAction(() => {
+        this.links[issueId].splice(linkIndex, 1);
+        delete this.linkMap[linkId];
+        this.rootIssueDetailStore.rootIssueStore.issues.updateIssue(issueId, {
+          link_count: issueLinkCount - 1, // decrement link count
+        });
+      });
+
+    // fetching activity
+    this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+  };
+}
diff --git a/apps/web/core/store/issue/issue-details/reaction.store.ts b/apps/web/core/store/issue/issue-details/reaction.store.ts
new file mode 100644
index 0000000..46a68a6
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/reaction.store.ts
@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { pull, find, concat, set, update } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+// Plane Imports
+import type { TIssueReaction, TIssueReactionMap, TIssueReactionIdMap, TIssueServiceType } from "@plane/types";
+import { groupReactions } from "@plane/utils";
+// services
+import { IssueReactionService } from "@/services/issue";
+// types
+import type { IIssueDetail } from "./root.store";
+
+export interface IIssueReactionStoreActions {
+  // actions
+  addReactions: (issueId: string, reactions: TIssueReaction[]) => void;
+  fetchReactions: (workspaceSlug: string, projectId: string, issueId: string) => Promise<TIssueReaction[]>;
+  createReaction: (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => Promise<any>;
+  removeReaction: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    reaction: string,
+    userId: string
+  ) => Promise<any>;
+}
+
+export interface IIssueReactionStore extends IIssueReactionStoreActions {
+  // observables
+  reactions: TIssueReactionIdMap;
+  reactionMap: TIssueReactionMap;
+  // helper methods
+  getReactionsByIssueId: (issueId: string) => { [reaction_id: string]: string[] } | undefined;
+  getReactionById: (reactionId: string) => TIssueReaction | undefined;
+  reactionsByUser: (issueId: string, userId: string) => TIssueReaction[];
+}
+
+export class IssueReactionStore implements IIssueReactionStore {
+  // observables
+  reactions: TIssueReactionIdMap = {};
+  reactionMap: TIssueReactionMap = {};
+  // root store
+  rootIssueDetailStore: IIssueDetail;
+  // services
+  issueReactionService;
+  serviceType;
+
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
+    makeObservable(this, {
+      // observables
+      reactions: observable,
+      reactionMap: observable,
+      // actions
+      addReactions: action.bound,
+      fetchReactions: action,
+      createReaction: action,
+      removeReaction: action,
+    });
+    this.serviceType = serviceType;
+    // root store
+    this.rootIssueDetailStore = rootStore;
+    // services
+    this.issueReactionService = new IssueReactionService(serviceType);
+  }
+
+  // helper methods
+  getReactionsByIssueId = (issueId: string) => {
+    if (!issueId) return undefined;
+    return this.reactions[issueId] ?? undefined;
+  };
+
+  getReactionById = (reactionId: string) => {
+    if (!reactionId) return undefined;
+    return this.reactionMap[reactionId] ?? undefined;
+  };
+
+  reactionsByUser = (issueId: string, userId: string) => {
+    if (!issueId || !userId) return [];
+
+    const reactions = this.getReactionsByIssueId(issueId);
+    if (!reactions) return [];
+
+    const _userReactions: TIssueReaction[] = [];
+    Object.keys(reactions).forEach((reaction) => {
+      if (reactions?.[reaction])
+        reactions?.[reaction].map((reactionId) => {
+          const currentReaction = this.getReactionById(reactionId);
+          if (currentReaction && currentReaction.actor === userId) _userReactions.push(currentReaction);
+        });
+    });
+
+    return _userReactions;
+  };
+
+  addReactions = (issueId: string, reactions: TIssueReaction[]) => {
+    const groupedReactions = groupReactions(reactions || [], "reaction");
+
+    const issueReactionIdsMap: { [reaction: string]: string[] } = {};
+
+    Object.keys(groupedReactions).map((reactionId) => {
+      const reactionIds = (groupedReactions[reactionId] || []).map((reaction) => reaction.id);
+      issueReactionIdsMap[reactionId] = reactionIds;
+    });
+
+    runInAction(() => {
+      set(this.reactions, issueId, issueReactionIdsMap);
+      reactions.forEach((reaction) => set(this.reactionMap, reaction.id, reaction));
+    });
+  };
+
+  // actions
+  fetchReactions = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const response = await this.issueReactionService.listIssueReactions(workspaceSlug, projectId, issueId);
+    this.addReactions(issueId, response);
+    return response;
+  };
+
+  createReaction = async (workspaceSlug: string, projectId: string, issueId: string, reaction: string) => {
+    const response = await this.issueReactionService.createIssueReaction(workspaceSlug, projectId, issueId, {
+      reaction,
+    });
+
+    runInAction(() => {
+      update(this.reactions, [issueId, reaction], (reactionId) => {
+        if (!reactionId) return [response.id];
+        return concat(reactionId, response.id);
+      });
+      set(this.reactionMap, response.id, response);
+    });
+
+    // fetching activity
+    this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+    return response;
+  };
+
+  removeReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    reaction: string,
+    userId: string
+  ) => {
+    const userReactions = this.reactionsByUser(issueId, userId);
+    const currentReaction = find(userReactions, { actor: userId, reaction: reaction });
+
+    if (currentReaction && currentReaction.id) {
+      runInAction(() => {
+        pull(this.reactions[issueId][reaction], currentReaction.id);
+        delete this.reactionMap[reaction];
+      });
+    }
+
+    const response = await this.issueReactionService.deleteIssueReaction(workspaceSlug, projectId, issueId, reaction);
+
+    // fetching activity
+    this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+    return response;
+  };
+}
diff --git a/apps/web/core/store/issue/issue-details/relation.store.ts b/apps/web/core/store/issue/issue-details/relation.store.ts
new file mode 100644
index 0000000..ed58247
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/relation.store.ts
@@ -0,0 +1,310 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { uniq, get, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { TIssueRelationIdMap, TIssueRelationMap, TIssueRelation, TIssue, TIssueRelationTypes } from "@plane/types";
+// components
+import type { TRelationObject } from "@/components/issues/issue-detail-widgets/relations";
+import { REVERSE_RELATIONS } from "@plane/constants";
+// services
+import { IssueRelationService } from "@/services/issue";
+// types
+import type { IIssueDetail } from "./root.store";
+export interface IIssueRelationStoreActions {
+  // actions
+  fetchRelations: (workspaceSlug: string, projectId: string, issueId: string) => Promise<TIssueRelation>;
+  createRelation: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    relationType: TIssueRelationTypes,
+    issues: string[]
+  ) => Promise<TIssue[]>;
+  removeRelation: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    relationType: TIssueRelationTypes,
+    related_issue: string,
+    updateLocally?: boolean
+  ) => Promise<void>;
+}
+
+export interface IIssueRelationStore extends IIssueRelationStoreActions {
+  // observables
+  relationMap: TIssueRelationMap; // Record defines relationType as key and reactions as value
+  // computed
+  issueRelations: TIssueRelationIdMap | undefined;
+  // helper methods
+  getRelationsByIssueId: (issueId: string) => TIssueRelationIdMap | undefined;
+  getRelationCountByIssueId: (
+    issueId: string,
+    ISSUE_RELATION_OPTIONS: { [key in TIssueRelationTypes]?: TRelationObject }
+  ) => number;
+  getRelationByIssueIdRelationType: (issueId: string, relationType: TIssueRelationTypes) => string[] | undefined;
+  extractRelationsFromIssues: (issues: TIssue[]) => void;
+  createCurrentRelation: (issueId: string, relationType: TIssueRelationTypes, relatedIssueId: string) => Promise<void>;
+}
+
+export class IssueRelationStore implements IIssueRelationStore {
+  // observables
+  relationMap: TIssueRelationMap = {};
+  // root store
+  rootIssueDetailStore: IIssueDetail;
+  // services
+  issueRelationService;
+
+  constructor(rootStore: IIssueDetail) {
+    makeObservable(this, {
+      // observables
+      relationMap: observable,
+      // computed
+      issueRelations: computed,
+      // actions
+      fetchRelations: action,
+      createRelation: action,
+      createCurrentRelation: action,
+      removeRelation: action,
+      extractRelationsFromIssues: action,
+    });
+    // root store
+    this.rootIssueDetailStore = rootStore;
+    // services
+    this.issueRelationService = new IssueRelationService();
+  }
+
+  // computed
+  get issueRelations() {
+    const issueId = this.rootIssueDetailStore.peekIssue?.issueId;
+    if (!issueId) return undefined;
+    return this.relationMap?.[issueId] ?? undefined;
+  }
+
+  // // helper methods
+  getRelationsByIssueId = (issueId: string) => {
+    if (!issueId) return undefined;
+    return this.relationMap?.[issueId] ?? undefined;
+  };
+
+  getRelationCountByIssueId = computedFn(
+    (issueId: string, ISSUE_RELATION_OPTIONS: { [key in TIssueRelationTypes]?: TRelationObject }) => {
+      const issueRelations = this.getRelationsByIssueId(issueId);
+
+      const issueRelationKeys = (Object.keys(issueRelations ?? {}) as TIssueRelationTypes[]).filter(
+        (relationKey) => !!ISSUE_RELATION_OPTIONS[relationKey]
+      );
+
+      return issueRelationKeys.reduce((acc, curr) => acc + (issueRelations?.[curr]?.length ?? 0), 0);
+    }
+  );
+
+  getRelationByIssueIdRelationType = (issueId: string, relationType: TIssueRelationTypes) => {
+    if (!issueId || !relationType) return undefined;
+    return this.relationMap?.[issueId]?.[relationType] ?? undefined;
+  };
+
+  // actions
+  fetchRelations = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const response = await this.issueRelationService.listIssueRelations(workspaceSlug, projectId, issueId);
+
+    runInAction(() => {
+      Object.keys(response).forEach((key) => {
+        const relation_key = key as TIssueRelationTypes;
+        const relation_issues = response[relation_key];
+        const issues = relation_issues.flat().map((issue) => issue);
+        if (issues && issues.length > 0) this.rootIssueDetailStore.rootIssueStore.issues.addIssue(issues);
+        set(
+          this.relationMap,
+          [issueId, relation_key],
+          issues && issues.length > 0 ? issues.map((issue) => issue.id) : []
+        );
+      });
+    });
+
+    return response;
+  };
+
+  createRelation = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    relationType: TIssueRelationTypes,
+    issues: string[]
+  ) => {
+    const response = await this.issueRelationService.createIssueRelations(workspaceSlug, projectId, issueId, {
+      relation_type: relationType,
+      issues,
+    });
+
+    const reverseRelatedType = REVERSE_RELATIONS[relationType];
+
+    const issuesOfRelation = get(this.relationMap, [issueId, relationType]) ?? [];
+
+    if (response && response.length > 0)
+      runInAction(() => {
+        response.forEach((issue) => {
+          const issuesOfRelated = get(this.relationMap, [issue.id, reverseRelatedType]);
+          this.rootIssueDetailStore.rootIssueStore.issues.addIssue([issue]);
+          issuesOfRelation.push(issue.id);
+
+          if (!issuesOfRelated) {
+            set(this.relationMap, [issue.id, reverseRelatedType], [issueId]);
+          } else {
+            set(this.relationMap, [issue.id, reverseRelatedType], uniq([...issuesOfRelated, issueId]));
+          }
+        });
+        set(this.relationMap, [issueId, relationType], uniq(issuesOfRelation));
+      });
+
+    // fetching activity
+    this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+    return response;
+  };
+
+  /**
+   * create Relation in current project optimistically
+   * @param issueId
+   * @param relationType
+   * @param relatedIssueId
+   * @returns
+   */
+  createCurrentRelation = async (issueId: string, relationType: TIssueRelationTypes, relatedIssueId: string) => {
+    const workspaceSlug = this.rootIssueDetailStore.rootIssueStore.workspaceSlug;
+    const projectId = this.rootIssueDetailStore.issue.getIssueById(issueId)?.project_id;
+
+    if (!workspaceSlug || !projectId) return;
+
+    const reverseRelatedType = REVERSE_RELATIONS[relationType];
+
+    const issuesOfRelation = get(this.relationMap, [issueId, relationType]);
+    const issuesOfRelated = get(this.relationMap, [relatedIssueId, reverseRelatedType]);
+
+    try {
+      // update relations before API call
+      runInAction(() => {
+        if (!issuesOfRelation) {
+          set(this.relationMap, [issueId, relationType], [relatedIssueId]);
+        } else {
+          set(this.relationMap, [issueId, relationType], uniq([...issuesOfRelation, relatedIssueId]));
+        }
+
+        if (!issuesOfRelated) {
+          set(this.relationMap, [relatedIssueId, reverseRelatedType], [issueId]);
+        } else {
+          set(this.relationMap, [relatedIssueId, reverseRelatedType], uniq([...issuesOfRelated, issueId]));
+        }
+      });
+
+      // perform API call
+      await this.issueRelationService.createIssueRelations(workspaceSlug, projectId, issueId, {
+        relation_type: relationType,
+        issues: [relatedIssueId],
+      });
+    } catch (e) {
+      // Revert back store changes if API fails
+      runInAction(() => {
+        if (issuesOfRelation) {
+          set(this.relationMap, [issueId, relationType], issuesOfRelation);
+        }
+
+        if (issuesOfRelated) {
+          set(this.relationMap, [relatedIssueId, reverseRelatedType], issuesOfRelated);
+        }
+      });
+
+      throw e;
+    }
+  };
+
+  removeRelation = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    relationType: TIssueRelationTypes,
+    related_issue: string,
+    updateLocally = false
+  ) => {
+    try {
+      const relationIndex = this.relationMap[issueId]?.[relationType]?.findIndex(
+        (_issueId) => _issueId === related_issue
+      );
+      if (relationIndex >= 0)
+        runInAction(() => {
+          this.relationMap[issueId]?.[relationType]?.splice(relationIndex, 1);
+        });
+
+      if (!updateLocally) {
+        await this.issueRelationService.deleteIssueRelation(workspaceSlug, projectId, issueId, {
+          relation_type: relationType,
+          related_issue,
+        });
+      }
+
+      // While removing one relation, reverse of the relation should also be removed
+      const reverseRelatedType = REVERSE_RELATIONS[relationType];
+      const relatedIndex = this.relationMap[related_issue]?.[reverseRelatedType]?.findIndex(
+        (_issueId) => _issueId === related_issue
+      );
+      if (relationIndex >= 0)
+        runInAction(() => {
+          this.relationMap[related_issue]?.[reverseRelatedType]?.splice(relatedIndex, 1);
+        });
+
+      // fetching activity
+      this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+    } catch (error) {
+      this.fetchRelations(workspaceSlug, projectId, issueId);
+      throw error;
+    }
+  };
+
+  /**
+   * Extract Relation from the issue Array objects and store it in this Store
+   * @param issues
+   */
+  extractRelationsFromIssues = (issues: TIssue[]) => {
+    try {
+      runInAction(() => {
+        for (const issue of issues) {
+          const { issue_relation, issue_related, id: issueId } = issue;
+
+          const issueRelations: { [key in TIssueRelationTypes]?: string[] } = {};
+
+          if (issue_relation && Array.isArray(issue_relation) && issue_relation.length) {
+            for (const relation of issue_relation) {
+              const { relation_type, id } = relation;
+
+              if (!relation_type) continue;
+
+              if (issueRelations[relation_type]) issueRelations[relation_type]?.push(id);
+              else issueRelations[relation_type] = [id];
+            }
+          }
+
+          if (issue_related && Array.isArray(issue_related) && issue_related.length) {
+            for (const relation of issue_related) {
+              const { relation_type, id } = relation;
+
+              if (!relation_type) continue;
+
+              const reverseRelatedType = REVERSE_RELATIONS[relation_type as TIssueRelationTypes];
+
+              if (issueRelations[reverseRelatedType]) issueRelations[reverseRelatedType]?.push(id);
+              else issueRelations[reverseRelatedType] = [id];
+            }
+          }
+
+          set(this.relationMap, [issueId], issueRelations);
+        }
+      });
+    } catch (_e) {
+      console.error("Error while extracting issue relations from issues");
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/issue-details/root.store.ts b/apps/web/core/store/issue/issue-details/root.store.ts
new file mode 100644
index 0000000..8596e1f
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/root.store.ts
@@ -0,0 +1,416 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, computed, makeObservable, observable } from "mobx";
+// types
+import type {
+  TIssue,
+  TIssueAttachment,
+  TIssueComment,
+  TIssueCommentReaction,
+  TIssueLink,
+  TIssueReaction,
+  TIssueRelationTypes,
+  TIssueServiceType,
+  TWorkItemWidgets,
+} from "@plane/types";
+// plane web store
+import { IssueActivityStore } from "./activity.store";
+import type { IIssueActivityStore, IIssueActivityStoreActions, TActivityLoader } from "./activity.store";
+import type { IIssueRootStore } from "../root.store";
+import { IssueAttachmentStore } from "./attachment.store";
+import type { IIssueAttachmentStore, IIssueAttachmentStoreActions } from "./attachment.store";
+import { IssueCommentStore } from "./comment.store";
+import type { IIssueCommentStore, IIssueCommentStoreActions, TCommentLoader } from "./comment.store";
+import { IssueCommentReactionStore } from "./comment_reaction.store";
+import type { IIssueCommentReactionStore, IIssueCommentReactionStoreActions } from "./comment_reaction.store";
+import { IssueStore } from "./issue.store";
+import type { IIssueStore, IIssueStoreActions } from "./issue.store";
+import { IssueLinkStore } from "./link.store";
+import type { IIssueLinkStore, IIssueLinkStoreActions } from "./link.store";
+import { IssueReactionStore } from "./reaction.store";
+import type { IIssueReactionStore, IIssueReactionStoreActions } from "./reaction.store";
+import { IssueRelationStore } from "./relation.store";
+import type { IIssueRelationStore, IIssueRelationStoreActions } from "./relation.store";
+import { IssueSubIssuesStore } from "./sub_issues.store";
+import type { IIssueSubIssuesStore, IIssueSubIssuesStoreActions } from "./sub_issues.store";
+import { IssueSubscriptionStore } from "./subscription.store";
+import type { IIssueSubscriptionStore, IIssueSubscriptionStoreActions } from "./subscription.store";
+
+export type TPeekIssue = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  nestingLevel?: number;
+  isArchived?: boolean;
+};
+
+export type TIssueRelationModal = {
+  issueId: string | null;
+  relationType: TIssueRelationTypes | null;
+};
+
+export type TIssueCrudState = { toggle: boolean; parentIssueId: string | undefined; issue: TIssue | undefined };
+
+export type TIssueCrudOperationState = {
+  create: TIssueCrudState;
+  existing: TIssueCrudState;
+};
+
+export interface IIssueDetail
+  extends
+    IIssueStoreActions,
+    IIssueReactionStoreActions,
+    IIssueLinkStoreActions,
+    IIssueSubIssuesStoreActions,
+    IIssueSubscriptionStoreActions,
+    IIssueAttachmentStoreActions,
+    IIssueRelationStoreActions,
+    IIssueActivityStoreActions,
+    IIssueCommentStoreActions,
+    IIssueCommentReactionStoreActions {
+  // observables
+  peekIssue: TPeekIssue | undefined;
+  relationKey: TIssueRelationTypes | null;
+  issueLinkData: TIssueLink | null;
+  issueCrudOperationState: TIssueCrudOperationState;
+  openWidgets: TWorkItemWidgets[];
+  lastWidgetAction: TWorkItemWidgets | null;
+  isCreateIssueModalOpen: boolean;
+  isIssueLinkModalOpen: boolean;
+  isParentIssueModalOpen: string | null;
+  isDeleteIssueModalOpen: string | null;
+  isArchiveIssueModalOpen: string | null;
+  isRelationModalOpen: TIssueRelationModal | null;
+  isSubIssuesModalOpen: string | null;
+  attachmentDeleteModalId: string | null;
+  // computed
+  isAnyModalOpen: boolean;
+  isPeekOpen: boolean;
+  // helper actions
+  getIsIssuePeeked: (issueId: string) => boolean;
+  // actions
+  setPeekIssue: (peekIssue: TPeekIssue | undefined) => void;
+  setIssueLinkData: (issueLinkData: TIssueLink | null) => void;
+  toggleCreateIssueModal: (value: boolean) => void;
+  toggleIssueLinkModal: (value: boolean) => void;
+  toggleParentIssueModal: (issueId: string | null) => void;
+  toggleDeleteIssueModal: (issueId: string | null) => void;
+  toggleArchiveIssueModal: (value: string | null) => void;
+  toggleRelationModal: (issueId: string | null, relationType: TIssueRelationTypes | null) => void;
+  toggleSubIssuesModal: (value: string | null) => void;
+  toggleDeleteAttachmentModal: (attachmentId: string | null) => void;
+  setOpenWidgets: (state: TWorkItemWidgets[]) => void;
+  setLastWidgetAction: (action: TWorkItemWidgets) => void;
+  toggleOpenWidget: (state: TWorkItemWidgets) => void;
+  setRelationKey: (relationKey: TIssueRelationTypes | null) => void;
+  setIssueCrudOperationState: (state: TIssueCrudOperationState) => void;
+  // store
+  rootIssueStore: IIssueRootStore;
+  issue: IIssueStore;
+  reaction: IIssueReactionStore;
+  attachment: IIssueAttachmentStore;
+  activity: IIssueActivityStore;
+  comment: IIssueCommentStore;
+  commentReaction: IIssueCommentReactionStore;
+  subIssues: IIssueSubIssuesStore;
+  link: IIssueLinkStore;
+  subscription: IIssueSubscriptionStore;
+  relation: IIssueRelationStore;
+}
+
+export class IssueDetail implements IIssueDetail {
+  // observables
+  peekIssue: TPeekIssue | undefined = undefined;
+  relationKey: TIssueRelationTypes | null = null;
+  issueLinkData: TIssueLink | null = null;
+  issueCrudOperationState: TIssueCrudOperationState = {
+    create: {
+      toggle: false,
+      parentIssueId: undefined,
+      issue: undefined,
+    },
+    existing: {
+      toggle: false,
+      parentIssueId: undefined,
+      issue: undefined,
+    },
+  };
+  openWidgets: TWorkItemWidgets[] = ["sub-work-items", "links", "attachments"];
+  lastWidgetAction: TWorkItemWidgets | null = null;
+  isCreateIssueModalOpen: boolean = false;
+  isIssueLinkModalOpen: boolean = false;
+  isParentIssueModalOpen: string | null = null;
+  isDeleteIssueModalOpen: string | null = null;
+  isArchiveIssueModalOpen: string | null = null;
+  isRelationModalOpen: TIssueRelationModal | null = null;
+  isSubIssuesModalOpen: string | null = null;
+  attachmentDeleteModalId: string | null = null;
+  // service type
+  serviceType: TIssueServiceType;
+  // store
+  rootIssueStore: IIssueRootStore;
+  issue: IIssueStore;
+  reaction: IIssueReactionStore;
+  attachment: IIssueAttachmentStore;
+  subIssues: IIssueSubIssuesStore;
+  link: IIssueLinkStore;
+  subscription: IIssueSubscriptionStore;
+  relation: IIssueRelationStore;
+  activity: IIssueActivityStore;
+  comment: IIssueCommentStore;
+  commentReaction: IIssueCommentReactionStore;
+
+  constructor(rootStore: IIssueRootStore, serviceType: TIssueServiceType) {
+    makeObservable(this, {
+      // observables
+      peekIssue: observable,
+      relationKey: observable,
+      issueLinkData: observable,
+      issueCrudOperationState: observable,
+      isCreateIssueModalOpen: observable,
+      isIssueLinkModalOpen: observable.ref,
+      isParentIssueModalOpen: observable.ref,
+      isDeleteIssueModalOpen: observable.ref,
+      isArchiveIssueModalOpen: observable.ref,
+      isRelationModalOpen: observable.ref,
+      isSubIssuesModalOpen: observable.ref,
+      attachmentDeleteModalId: observable.ref,
+      openWidgets: observable.ref,
+      lastWidgetAction: observable.ref,
+      // computed
+      isAnyModalOpen: computed,
+      isPeekOpen: computed,
+      // action
+      setPeekIssue: action,
+      setIssueLinkData: action,
+      toggleCreateIssueModal: action,
+      toggleIssueLinkModal: action,
+      toggleParentIssueModal: action,
+      toggleDeleteIssueModal: action,
+      toggleArchiveIssueModal: action,
+      toggleRelationModal: action,
+      toggleSubIssuesModal: action,
+      toggleDeleteAttachmentModal: action,
+      setOpenWidgets: action,
+      setLastWidgetAction: action,
+      toggleOpenWidget: action,
+      setRelationKey: action,
+      setIssueCrudOperationState: action,
+    });
+
+    // store
+    this.serviceType = serviceType;
+    this.rootIssueStore = rootStore;
+    this.issue = new IssueStore(this, serviceType);
+    this.reaction = new IssueReactionStore(this, serviceType);
+    this.attachment = new IssueAttachmentStore(rootStore, serviceType);
+    this.activity = new IssueActivityStore(rootStore.rootStore, serviceType);
+    this.comment = new IssueCommentStore(this, serviceType);
+    this.commentReaction = new IssueCommentReactionStore(this);
+    this.subIssues = new IssueSubIssuesStore(this, serviceType);
+    this.link = new IssueLinkStore(this, serviceType);
+    this.subscription = new IssueSubscriptionStore(this, serviceType);
+    this.relation = new IssueRelationStore(this);
+  }
+
+  // computed
+  get isAnyModalOpen() {
+    return (
+      this.isCreateIssueModalOpen ||
+      this.isIssueLinkModalOpen ||
+      !!this.isParentIssueModalOpen ||
+      !!this.isDeleteIssueModalOpen ||
+      !!this.isArchiveIssueModalOpen ||
+      !!this.isRelationModalOpen?.issueId ||
+      !!this.isSubIssuesModalOpen ||
+      !!this.attachmentDeleteModalId
+    );
+  }
+
+  get isPeekOpen() {
+    return !!this.peekIssue;
+  }
+
+  // helper actions
+  getIsIssuePeeked = (issueId: string) => this.peekIssue?.issueId === issueId;
+
+  // actions
+  setRelationKey = (relationKey: TIssueRelationTypes | null) => (this.relationKey = relationKey);
+  setIssueCrudOperationState = (state: TIssueCrudOperationState) => (this.issueCrudOperationState = state);
+  setPeekIssue = (peekIssue: TPeekIssue | undefined) => (this.peekIssue = peekIssue);
+  toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value);
+  toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value);
+  toggleParentIssueModal = (issueId: string | null) => (this.isParentIssueModalOpen = issueId);
+  toggleDeleteIssueModal = (issueId: string | null) => (this.isDeleteIssueModalOpen = issueId);
+  toggleArchiveIssueModal = (issueId: string | null) => (this.isArchiveIssueModalOpen = issueId);
+  toggleRelationModal = (issueId: string | null, relationType: TIssueRelationTypes | null) =>
+    (this.isRelationModalOpen = { issueId, relationType });
+  toggleSubIssuesModal = (issueId: string | null) => (this.isSubIssuesModalOpen = issueId);
+  toggleDeleteAttachmentModal = (attachmentId: string | null) => (this.attachmentDeleteModalId = attachmentId);
+  setOpenWidgets = (state: TWorkItemWidgets[]) => {
+    this.openWidgets = state;
+    if (this.lastWidgetAction) this.lastWidgetAction = null;
+  };
+  setLastWidgetAction = (action: TWorkItemWidgets) => {
+    this.openWidgets = [action];
+  };
+  toggleOpenWidget = (state: TWorkItemWidgets) => {
+    if (this.openWidgets && this.openWidgets.includes(state))
+      this.openWidgets = this.openWidgets.filter((s) => s !== state);
+    else this.openWidgets = [state, ...this.openWidgets];
+  };
+  setIssueLinkData = (issueLinkData: TIssueLink | null) => (this.issueLinkData = issueLinkData);
+
+  // issue
+  fetchIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.issue.fetchIssue(workspaceSlug, projectId, issueId);
+  fetchIssueWithIdentifier = async (workspaceSlug: string, projectIdentifier: string, sequenceId: string) =>
+    this.issue.fetchIssueWithIdentifier(workspaceSlug, projectIdentifier, sequenceId);
+  updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) =>
+    this.issue.updateIssue(workspaceSlug, projectId, issueId, data);
+  removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.issue.removeIssue(workspaceSlug, projectId, issueId);
+  archiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.issue.archiveIssue(workspaceSlug, projectId, issueId);
+  addCycleToIssue = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) =>
+    this.issue.addCycleToIssue(workspaceSlug, projectId, cycleId, issueId);
+  addIssueToCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueIds: string[]) =>
+    this.issue.addIssueToCycle(workspaceSlug, projectId, cycleId, issueIds);
+  removeIssueFromCycle = async (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) =>
+    this.issue.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
+  changeModulesInIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    addModuleIds: string[],
+    removeModuleIds: string[]
+  ) => this.issue.changeModulesInIssue(workspaceSlug, projectId, issueId, addModuleIds, removeModuleIds);
+  removeIssueFromModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) =>
+    this.issue.removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
+
+  // reactions
+  addReactions = (issueId: string, reactions: TIssueReaction[]) => this.reaction.addReactions(issueId, reactions);
+  fetchReactions = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.reaction.fetchReactions(workspaceSlug, projectId, issueId);
+  createReaction = async (workspaceSlug: string, projectId: string, issueId: string, reaction: string) =>
+    this.reaction.createReaction(workspaceSlug, projectId, issueId, reaction);
+  removeReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    reaction: string,
+    userId: string
+  ) => this.reaction.removeReaction(workspaceSlug, projectId, issueId, reaction, userId);
+
+  // attachments
+  addAttachments = (issueId: string, attachments: TIssueAttachment[]) =>
+    this.attachment.addAttachments(issueId, attachments);
+  fetchAttachments = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.attachment.fetchAttachments(workspaceSlug, projectId, issueId);
+  createAttachment = async (workspaceSlug: string, projectId: string, issueId: string, file: File) =>
+    this.attachment.createAttachment(workspaceSlug, projectId, issueId, file);
+  removeAttachment = async (workspaceSlug: string, projectId: string, issueId: string, attachmentId: string) =>
+    this.attachment.removeAttachment(workspaceSlug, projectId, issueId, attachmentId);
+
+  // link
+  addLinks = (issueId: string, links: TIssueLink[]) => this.link.addLinks(issueId, links);
+  fetchLinks = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.link.fetchLinks(workspaceSlug, projectId, issueId);
+  createLink = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssueLink>) =>
+    this.link.createLink(workspaceSlug, projectId, issueId, data);
+  updateLink = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    linkId: string,
+    data: Partial<TIssueLink>
+  ) => this.link.updateLink(workspaceSlug, projectId, issueId, linkId, data);
+  removeLink = async (workspaceSlug: string, projectId: string, issueId: string, linkId: string) =>
+    this.link.removeLink(workspaceSlug, projectId, issueId, linkId);
+
+  // sub issues
+  fetchSubIssues = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.subIssues.fetchSubIssues(workspaceSlug, projectId, issueId);
+  createSubIssues = async (workspaceSlug: string, projectId: string, parentIssueId: string, data: string[]) =>
+    this.subIssues.createSubIssues(workspaceSlug, projectId, parentIssueId, data);
+  updateSubIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueId: string,
+    issueData: Partial<TIssue>,
+    oldIssue?: Partial<TIssue>,
+    fromModal?: boolean
+  ) => this.subIssues.updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, issueData, oldIssue, fromModal);
+  removeSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) =>
+    this.subIssues.removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+  deleteSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) =>
+    this.subIssues.deleteSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+
+  // subscription
+  addSubscription = (issueId: string, isSubscribed: boolean | undefined | null) =>
+    this.subscription.addSubscription(issueId, isSubscribed);
+  fetchSubscriptions = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.subscription.fetchSubscriptions(workspaceSlug, projectId, issueId);
+  createSubscription = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.subscription.createSubscription(workspaceSlug, projectId, issueId);
+  removeSubscription = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.subscription.removeSubscription(workspaceSlug, projectId, issueId);
+
+  // relations
+  fetchRelations = async (workspaceSlug: string, projectId: string, issueId: string) =>
+    this.relation.fetchRelations(workspaceSlug, projectId, issueId);
+  createRelation = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    relationType: TIssueRelationTypes,
+    issues: string[]
+  ) => this.relation.createRelation(workspaceSlug, projectId, issueId, relationType, issues);
+  removeRelation = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    relationType: TIssueRelationTypes,
+    relatedIssue: string,
+    updateLocally?: boolean
+  ) => this.relation.removeRelation(workspaceSlug, projectId, issueId, relationType, relatedIssue, updateLocally);
+
+  // activity
+  fetchActivities = async (workspaceSlug: string, projectId: string, issueId: string, loaderType?: TActivityLoader) =>
+    this.activity.fetchActivities(workspaceSlug, projectId, issueId, loaderType);
+
+  // comment
+  fetchComments = async (workspaceSlug: string, projectId: string, issueId: string, loaderType?: TCommentLoader) =>
+    this.comment.fetchComments(workspaceSlug, projectId, issueId, loaderType);
+  createComment = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssueComment>) =>
+    this.comment.createComment(workspaceSlug, projectId, issueId, data);
+  updateComment = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: Partial<TIssueComment>
+  ) => this.comment.updateComment(workspaceSlug, projectId, issueId, commentId, data);
+  removeComment = async (workspaceSlug: string, projectId: string, issueId: string, commentId: string) =>
+    this.comment.removeComment(workspaceSlug, projectId, issueId, commentId);
+
+  // comment reaction
+  fetchCommentReactions = async (workspaceSlug: string, projectId: string, commentId: string) =>
+    this.commentReaction.fetchCommentReactions(workspaceSlug, projectId, commentId);
+  applyCommentReactions = async (commentId: string, commentReactions: TIssueCommentReaction[]) =>
+    this.commentReaction.applyCommentReactions(commentId, commentReactions);
+  createCommentReaction = async (workspaceSlug: string, projectId: string, commentId: string, reaction: string) =>
+    this.commentReaction.createCommentReaction(workspaceSlug, projectId, commentId, reaction);
+  removeCommentReaction = async (
+    workspaceSlug: string,
+    projectId: string,
+    commentId: string,
+    reaction: string,
+    userId: string
+  ) => this.commentReaction.removeCommentReaction(workspaceSlug, projectId, commentId, reaction, userId);
+}
diff --git a/apps/web/core/store/issue/issue-details/sub_issues.store.ts b/apps/web/core/store/issue/issue-details/sub_issues.store.ts
new file mode 100644
index 0000000..74ffad7
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/sub_issues.store.ts
@@ -0,0 +1,361 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { pull, concat, uniq, set, update } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// Plane Imports
+import type {
+  TIssue,
+  TIssueSubIssues,
+  TIssueSubIssuesStateDistributionMap,
+  TIssueSubIssuesIdMap,
+  TSubIssuesStateDistribution,
+  TIssueServiceType,
+  TLoader,
+} from "@plane/types";
+// services
+import { IssueService } from "@/services/issue";
+// store
+import type { IIssueDetail } from "./root.store";
+import type { IWorkItemSubIssueFiltersStore } from "./sub_issues_filter.store";
+import { WorkItemSubIssueFiltersStore } from "./sub_issues_filter.store";
+
+export interface IIssueSubIssuesStoreActions {
+  fetchSubIssues: (workspaceSlug: string, projectId: string, parentIssueId: string) => Promise<TIssueSubIssues>;
+  createSubIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueIds: string[]
+  ) => Promise<void>;
+  updateSubIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueId: string,
+    issueData: Partial<TIssue>,
+    oldIssue?: Partial<TIssue>,
+    fromModal?: boolean
+  ) => Promise<void>;
+  removeSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
+  deleteSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
+}
+
+type TSubIssueHelpersKeys = "issue_visibility" | "preview_loader" | "issue_loader";
+type TSubIssueHelpers = Record<TSubIssueHelpersKeys, string[]>;
+export interface IIssueSubIssuesStore extends IIssueSubIssuesStoreActions {
+  // observables
+  subIssuesStateDistribution: TIssueSubIssuesStateDistributionMap;
+  subIssues: TIssueSubIssuesIdMap;
+  subIssueHelpers: Record<string, TSubIssueHelpers>; // parent_issue_id -> TSubIssueHelpers
+  loader: TLoader;
+  filters: IWorkItemSubIssueFiltersStore;
+  // helper methods
+  stateDistributionByIssueId: (issueId: string) => TSubIssuesStateDistribution | undefined;
+  subIssuesByIssueId: (issueId: string) => string[] | undefined;
+  subIssueHelpersByIssueId: (issueId: string) => TSubIssueHelpers;
+  // actions
+  fetchOtherProjectProperties: (workspaceSlug: string, projectIds: string[]) => Promise<void>;
+  setSubIssueHelpers: (parentIssueId: string, key: TSubIssueHelpersKeys, value: string) => void;
+}
+
+export class IssueSubIssuesStore implements IIssueSubIssuesStore {
+  // observables
+  subIssuesStateDistribution: TIssueSubIssuesStateDistributionMap = {};
+  subIssues: TIssueSubIssuesIdMap = {};
+  subIssueHelpers: Record<string, TSubIssueHelpers> = {};
+  loader: TLoader = undefined;
+
+  filters: IWorkItemSubIssueFiltersStore;
+  // root store
+  rootIssueDetailStore: IIssueDetail;
+  // services
+  serviceType;
+  issueService;
+
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
+    makeObservable(this, {
+      // observables
+      subIssuesStateDistribution: observable,
+      subIssues: observable,
+      subIssueHelpers: observable,
+      loader: observable.ref,
+      // actions
+      setSubIssueHelpers: action,
+      fetchSubIssues: action,
+      createSubIssues: action,
+      updateSubIssue: action,
+      removeSubIssue: action,
+      deleteSubIssue: action,
+      fetchOtherProjectProperties: action,
+    });
+    this.filters = new WorkItemSubIssueFiltersStore(this);
+    // root store
+    this.rootIssueDetailStore = rootStore;
+    // services
+    this.serviceType = serviceType;
+    this.issueService = new IssueService(serviceType);
+  }
+
+  // helper methods
+  stateDistributionByIssueId = (issueId: string) => {
+    if (!issueId) return undefined;
+    return this.subIssuesStateDistribution[issueId] ?? undefined;
+  };
+
+  subIssuesByIssueId = computedFn((issueId: string) => this.subIssues[issueId]);
+
+  subIssueHelpersByIssueId = (issueId: string) => ({
+    preview_loader: this.subIssueHelpers?.[issueId]?.preview_loader || [],
+    issue_visibility: this.subIssueHelpers?.[issueId]?.issue_visibility || [],
+    issue_loader: this.subIssueHelpers?.[issueId]?.issue_loader || [],
+  });
+
+  // actions
+  setSubIssueHelpers = (parentIssueId: string, key: TSubIssueHelpersKeys, value: string) => {
+    if (!parentIssueId || !key || !value) return;
+
+    update(this.subIssueHelpers, [parentIssueId, key], (_subIssueHelpers: string[] = []) => {
+      if (_subIssueHelpers.includes(value)) return pull(_subIssueHelpers, value);
+      return concat(_subIssueHelpers, value);
+    });
+  };
+
+  fetchSubIssues = async (workspaceSlug: string, projectId: string, parentIssueId: string) => {
+    this.loader = "init-loader";
+    const response = await this.issueService.subIssues(workspaceSlug, projectId, parentIssueId);
+
+    const subIssuesStateDistribution = response?.state_distribution ?? {};
+
+    const issueList = (response.sub_issues ?? []) as TIssue[];
+
+    this.rootIssueDetailStore.rootIssueStore.issues.addIssue(issueList);
+
+    // fetch other issues states and members when sub-issues are from different project
+    if (issueList && issueList.length > 0) {
+      const otherProjectIds = uniq(
+        issueList.map((issue) => issue.project_id).filter((id) => !!id && id !== projectId)
+      ) as string[];
+      this.fetchOtherProjectProperties(workspaceSlug, otherProjectIds);
+    }
+    if (issueList) {
+      this.rootIssueDetailStore.rootIssueStore.issues.updateIssue(parentIssueId, {
+        sub_issues_count: issueList.length,
+      });
+    }
+
+    runInAction(() => {
+      set(this.subIssuesStateDistribution, parentIssueId, subIssuesStateDistribution);
+      set(
+        this.subIssues,
+        parentIssueId,
+        issueList.map((issue) => issue.id)
+      );
+    });
+
+    this.loader = undefined;
+    return response;
+  };
+
+  createSubIssues = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) => {
+    const response = await this.issueService.addSubIssues(workspaceSlug, projectId, parentIssueId, {
+      sub_issue_ids: issueIds,
+    });
+
+    const subIssuesStateDistribution = response?.state_distribution ?? {};
+    const subIssues = Array.isArray(response?.sub_issues) ? response.sub_issues : [];
+
+    // fetch other issues states and members when sub-issues are from different project
+    if (subIssues && subIssues.length > 0) {
+      const otherProjectIds = uniq(
+        subIssues.map((issue) => issue.project_id).filter((id) => !!id && id !== projectId)
+      ) as string[];
+      this.fetchOtherProjectProperties(workspaceSlug, otherProjectIds);
+    }
+
+    runInAction(() => {
+      Object.keys(subIssuesStateDistribution).forEach((key) => {
+        const stateGroup = key as keyof TSubIssuesStateDistribution;
+        update(this.subIssuesStateDistribution, [parentIssueId, stateGroup], (stateDistribution) => {
+          if (!stateDistribution) return subIssuesStateDistribution[stateGroup];
+          return concat(stateDistribution, subIssuesStateDistribution[stateGroup]);
+        });
+      });
+
+      const issueIds = subIssues.map((issue) => issue.id);
+      update(this.subIssues, [parentIssueId], (issues) => {
+        if (!issues) return issueIds;
+        return concat(issues, issueIds);
+      });
+    });
+
+    this.rootIssueDetailStore.rootIssueStore.issues.addIssue(subIssues);
+
+    // update sub-issues_count of the parent issue
+    set(
+      this.rootIssueDetailStore.rootIssueStore.issues.issuesMap,
+      [parentIssueId, "sub_issues_count"],
+      this.subIssues[parentIssueId].length
+    );
+
+    return;
+  };
+
+  updateSubIssue = async (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueId: string,
+    issueData: Partial<TIssue>,
+    oldIssue: Partial<TIssue> = {},
+    fromModal: boolean = false
+  ) => {
+    if (!fromModal)
+      await this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(
+        workspaceSlug,
+        projectId,
+        issueId,
+        issueData
+      );
+
+    // parent update
+    if (issueData.hasOwnProperty("parent_id") && issueData.parent_id !== oldIssue.parent_id) {
+      runInAction(() => {
+        if (oldIssue.parent_id) pull(this.subIssues[oldIssue.parent_id], issueId);
+        if (issueData.parent_id)
+          set(this.subIssues, [issueData.parent_id], concat(this.subIssues[issueData.parent_id], issueId));
+      });
+    }
+
+    // state update
+    if (issueData.hasOwnProperty("state_id") && issueData.state_id !== oldIssue.state_id) {
+      let oldIssueStateGroup: string | undefined = undefined;
+      let issueStateGroup: string | undefined = undefined;
+
+      if (oldIssue.state_id) {
+        const state = this.rootIssueDetailStore.rootIssueStore.rootStore.state.getStateById(oldIssue.state_id);
+        if (state?.group) oldIssueStateGroup = state.group;
+      }
+
+      if (issueData.state_id) {
+        const state = this.rootIssueDetailStore.rootIssueStore.rootStore.state.getStateById(issueData.state_id);
+        if (state?.group) issueStateGroup = state.group;
+      }
+
+      if (oldIssueStateGroup && issueStateGroup && issueStateGroup !== oldIssueStateGroup) {
+        runInAction(() => {
+          if (oldIssueStateGroup)
+            update(this.subIssuesStateDistribution, [parentIssueId, oldIssueStateGroup], (stateDistribution) => {
+              if (!stateDistribution) return;
+              return pull(stateDistribution, issueId);
+            });
+
+          if (issueStateGroup)
+            update(this.subIssuesStateDistribution, [parentIssueId, issueStateGroup], (stateDistribution) => {
+              if (!stateDistribution) return [issueId];
+              return concat(stateDistribution, issueId);
+            });
+        });
+      }
+    }
+
+    return;
+  };
+
+  removeSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
+    await this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, {
+      parent_id: null,
+    });
+
+    const issue = this.rootIssueDetailStore.issue.getIssueById(issueId);
+    if (issue && issue.state_id) {
+      let issueStateGroup: string | undefined = undefined;
+      const state = this.rootIssueDetailStore.rootIssueStore.rootStore.state.getStateById(issue.state_id);
+      if (state?.group) issueStateGroup = state.group;
+
+      if (issueStateGroup) {
+        runInAction(() => {
+          if (issueStateGroup)
+            update(this.subIssuesStateDistribution, [parentIssueId, issueStateGroup], (stateDistribution) => {
+              if (!stateDistribution) return;
+              return pull(stateDistribution, issueId);
+            });
+        });
+      }
+    }
+
+    runInAction(() => {
+      pull(this.subIssues[parentIssueId], issueId);
+      // update sub-issues_count of the parent issue
+      set(
+        this.rootIssueDetailStore.rootIssueStore.issues.issuesMap,
+        [parentIssueId, "sub_issues_count"],
+        this.subIssues[parentIssueId]?.length
+      );
+    });
+
+    return;
+  };
+
+  deleteSubIssue = async (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => {
+    await this.rootIssueDetailStore.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
+
+    const issue = this.rootIssueDetailStore.issue.getIssueById(issueId);
+    if (issue && issue.state_id) {
+      let issueStateGroup: string | undefined = undefined;
+      const state = this.rootIssueDetailStore.rootIssueStore.rootStore.state.getStateById(issue.state_id);
+      if (state?.group) issueStateGroup = state.group;
+
+      if (issueStateGroup) {
+        runInAction(() => {
+          if (issueStateGroup)
+            update(this.subIssuesStateDistribution, [parentIssueId, issueStateGroup], (stateDistribution) => {
+              if (!stateDistribution) return;
+              return pull(stateDistribution, issueId);
+            });
+        });
+      }
+    }
+
+    runInAction(() => {
+      pull(this.subIssues[parentIssueId], issueId);
+      // update sub-issues_count of the parent issue
+      set(
+        this.rootIssueDetailStore.rootIssueStore.issues.issuesMap,
+        [parentIssueId, "sub_issues_count"],
+        this.subIssues[parentIssueId]?.length
+      );
+    });
+
+    return;
+  };
+
+  fetchOtherProjectProperties = async (workspaceSlug: string, projectIds: string[]) => {
+    if (projectIds.length > 0) {
+      for (const projectId of projectIds) {
+        // fetching other project states
+        this.rootIssueDetailStore.rootIssueStore.rootStore.state.fetchProjectStates(workspaceSlug, projectId);
+        // fetching other project members
+        this.rootIssueDetailStore.rootIssueStore.rootStore.memberRoot.project.fetchProjectMembers(
+          workspaceSlug,
+          projectId
+        );
+        // fetching other project labels
+        this.rootIssueDetailStore.rootIssueStore.rootStore.label.fetchProjectLabels(workspaceSlug, projectId);
+        // fetching other project cycles
+        this.rootIssueDetailStore.rootIssueStore.rootStore.cycle.fetchAllCycles(workspaceSlug, projectId);
+        // fetching other project modules
+        this.rootIssueDetailStore.rootIssueStore.rootStore.module.fetchModules(workspaceSlug, projectId);
+        // fetching other project estimates
+        this.rootIssueDetailStore.rootIssueStore.rootStore.projectEstimate.getProjectEstimates(
+          workspaceSlug,
+          projectId
+        );
+      }
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/issue-details/sub_issues_filter.store.ts b/apps/web/core/store/issue/issue-details/sub_issues_filter.store.ts
new file mode 100644
index 0000000..63896f3
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/sub_issues_filter.store.ts
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+import type { EIssueFilterType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  ISubWorkItemFilters,
+  TGroupedIssues,
+  TIssue,
+} from "@plane/types";
+import { getFilteredWorkItems, getGroupedWorkItemIds, updateSubWorkItemFilters } from "../helpers/base-issues-utils";
+import type { IssueSubIssuesStore } from "./sub_issues.store";
+
+export const DEFAULT_DISPLAY_PROPERTIES = {
+  key: true,
+  issue_type: true,
+  assignee: true,
+  start_date: true,
+  due_date: true,
+  labels: true,
+  priority: true,
+  state: true,
+};
+export interface IWorkItemSubIssueFiltersStore {
+  subIssueFilters: Record<string, Partial<ISubWorkItemFilters>>;
+  // helpers methods
+  updateSubWorkItemFilters: (
+    filterType: EIssueFilterType,
+    filters: IIssueDisplayFilterOptions | IIssueDisplayProperties | IIssueFilterOptions,
+    workItemId: string
+  ) => void;
+  getGroupedSubWorkItems: (workItemId: string) => TGroupedIssues;
+  getFilteredSubWorkItems: (workItemId: string, filters: IIssueFilterOptions) => TIssue[];
+  getSubIssueFilters: (workItemId: string) => Partial<ISubWorkItemFilters>;
+  resetFilters: (workItemId: string) => void;
+}
+
+export class WorkItemSubIssueFiltersStore implements IWorkItemSubIssueFiltersStore {
+  // observables
+  subIssueFilters: Record<string, Partial<ISubWorkItemFilters>> = {};
+
+  // root store
+  subIssueStore: IssueSubIssuesStore;
+
+  constructor(subIssueStore: IssueSubIssuesStore) {
+    makeObservable(this, {
+      subIssueFilters: observable,
+      updateSubWorkItemFilters: action,
+      getSubIssueFilters: action,
+    });
+
+    // root store
+    this.subIssueStore = subIssueStore;
+  }
+
+  /**
+   * @description This method is used to get the sub issue filters
+   * @param workItemId
+   * @returns
+   */
+  getSubIssueFilters = (workItemId: string) => {
+    if (!this.subIssueFilters[workItemId]) {
+      this.initializeFilters(workItemId);
+    }
+    return this.subIssueFilters[workItemId];
+  };
+
+  /**
+   * @description This method is used to initialize the sub issue filters
+   * @param workItemId
+   */
+  initializeFilters = (workItemId: string) => {
+    set(this.subIssueFilters, [workItemId, "displayProperties"], DEFAULT_DISPLAY_PROPERTIES);
+    set(this.subIssueFilters, [workItemId, "filters"], {});
+    set(this.subIssueFilters, [workItemId, "displayFilters"], {});
+  };
+
+  /**
+   * @description This method updates filters for sub issues.
+   * @param filterType
+   * @param filters
+   */
+  updateSubWorkItemFilters = (
+    filterType: EIssueFilterType,
+    filters: IIssueDisplayFilterOptions | IIssueDisplayProperties | IIssueFilterOptions,
+    workItemId: string
+  ) => {
+    runInAction(() => {
+      updateSubWorkItemFilters(this.subIssueFilters, filterType, filters, workItemId);
+    });
+  };
+
+  /**
+   * @description This method is used to get the grouped sub work items
+   * @param parentWorkItemId
+   * @returns
+   */
+  getGroupedSubWorkItems = computedFn((parentWorkItemId: string) => {
+    const subIssueFilters = this.getSubIssueFilters(parentWorkItemId);
+
+    const filteredWorkItems = this.getFilteredSubWorkItems(parentWorkItemId, subIssueFilters.filters ?? {});
+
+    // get group by and order by
+    const groupByKey = subIssueFilters.displayFilters?.group_by;
+    const orderByKey = subIssueFilters.displayFilters?.order_by;
+
+    const groupedWorkItemIds = getGroupedWorkItemIds(filteredWorkItems, groupByKey, orderByKey);
+
+    return groupedWorkItemIds;
+  });
+
+  /**
+   * @description This method is used to get the filtered sub work items
+   * @param workItemId
+   * @returns
+   */
+  getFilteredSubWorkItems = computedFn((workItemId: string, filters: IIssueFilterOptions) => {
+    const subIssueIds = this.subIssueStore.subIssuesByIssueId(workItemId);
+    const workItems = this.subIssueStore.rootIssueDetailStore.rootIssueStore.issues.getIssuesByIds(
+      subIssueIds,
+      "un-archived"
+    );
+
+    const filteredWorkItems = getFilteredWorkItems(workItems, filters);
+
+    return filteredWorkItems;
+  });
+
+  /**
+   * @description This method is used to reset the filters
+   * @param workItemId
+   */
+  resetFilters = (workItemId: string) => {
+    this.initializeFilters(workItemId);
+  };
+}
diff --git a/apps/web/core/store/issue/issue-details/subscription.store.ts b/apps/web/core/store/issue/issue-details/subscription.store.ts
new file mode 100644
index 0000000..0b578cf
--- /dev/null
+++ b/apps/web/core/store/issue/issue-details/subscription.store.ts
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+// services
+import type { EIssueServiceType } from "@plane/types";
+import { IssueService } from "@/services/issue/issue.service";
+// types
+import type { IIssueDetail } from "./root.store";
+export interface IIssueSubscriptionStoreActions {
+  addSubscription: (issueId: string, isSubscribed: boolean | undefined | null) => void;
+  fetchSubscriptions: (workspaceSlug: string, projectId: string, issueId: string) => Promise<boolean>;
+  createSubscription: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  removeSubscription: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+}
+
+export interface IIssueSubscriptionStore extends IIssueSubscriptionStoreActions {
+  // observables
+  subscriptionMap: Record<string, Record<string, boolean>>; // Record defines subscriptionId as key and link as value
+  // helper methods
+  getSubscriptionByIssueId: (issueId: string) => boolean | undefined;
+}
+
+export class IssueSubscriptionStore implements IIssueSubscriptionStore {
+  // observables
+  subscriptionMap: Record<string, Record<string, boolean>> = {};
+  // root store
+  rootIssueDetail: IIssueDetail;
+  // services
+  issueService;
+
+  constructor(rootStore: IIssueDetail, serviceType: EIssueServiceType) {
+    makeObservable(this, {
+      // observables
+      subscriptionMap: observable,
+      // actions
+      addSubscription: action.bound,
+      fetchSubscriptions: action,
+      createSubscription: action,
+      removeSubscription: action,
+    });
+    // root store
+    this.rootIssueDetail = rootStore;
+    // services
+    this.issueService = new IssueService(serviceType);
+  }
+
+  // helper methods
+  getSubscriptionByIssueId = (issueId: string) => {
+    if (!issueId) return undefined;
+    const currentUserId = this.rootIssueDetail.rootIssueStore.currentUserId;
+    if (!currentUserId) return undefined;
+    return this.subscriptionMap[issueId]?.[currentUserId] ?? undefined;
+  };
+
+  addSubscription = (issueId: string, isSubscribed: boolean | undefined | null) => {
+    const currentUserId = this.rootIssueDetail.rootIssueStore.currentUserId;
+    if (!currentUserId) throw new Error("user id not available");
+
+    runInAction(() => {
+      set(this.subscriptionMap, [issueId, currentUserId], isSubscribed ?? false);
+    });
+  };
+
+  fetchSubscriptions = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    const subscription = await this.issueService.getIssueNotificationSubscriptionStatus(
+      workspaceSlug,
+      projectId,
+      issueId
+    );
+    this.addSubscription(issueId, subscription?.subscribed);
+    return subscription?.subscribed;
+  };
+
+  createSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const currentUserId = this.rootIssueDetail.rootIssueStore.currentUserId;
+      if (!currentUserId) throw new Error("user id not available");
+
+      runInAction(() => {
+        set(this.subscriptionMap, [issueId, currentUserId], true);
+      });
+
+      await this.issueService.subscribeToIssueNotifications(workspaceSlug, projectId, issueId);
+    } catch (error) {
+      this.fetchSubscriptions(workspaceSlug, projectId, issueId);
+      throw error;
+    }
+  };
+
+  removeSubscription = async (workspaceSlug: string, projectId: string, issueId: string) => {
+    try {
+      const currentUserId = this.rootIssueDetail.rootIssueStore.currentUserId;
+      if (!currentUserId) throw new Error("user id not available");
+
+      runInAction(() => {
+        set(this.subscriptionMap, [issueId, currentUserId], false);
+      });
+
+      await this.issueService.unsubscribeFromIssueNotifications(workspaceSlug, projectId, issueId);
+    } catch (error) {
+      this.fetchSubscriptions(workspaceSlug, projectId, issueId);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/issue.store.ts b/apps/web/core/store/issue/issue.store.ts
new file mode 100644
index 0000000..ad526ae
--- /dev/null
+++ b/apps/web/core/store/issue/issue.store.ts
@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set, update } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { TIssue } from "@plane/types";
+// helpers
+import { getCurrentDateTimeInISO } from "@plane/utils";
+import { rootStore } from "@/lib/store-context";
+// services
+import { IssueService } from "@/services/issue";
+
+export type IIssueStore = {
+  // observables
+  issuesMap: Record<string, TIssue>; // Record defines issue_id as key and TIssue as value
+  issuesIdentifierMap: Record<string, string>; // Record defines issue_identifier as key and issue_id as value
+  // actions
+  getIssues(workspaceSlug: string, projectId: string, issueIds: string[]): Promise<TIssue[]>;
+  addIssue(issues: TIssue[]): void;
+  addIssueIdentifier(issueIdentifier: string, issueId: string): void;
+  updateIssue(issueId: string, issue: Partial<TIssue>): void;
+  removeIssue(issueId: string): void;
+  // helper methods
+  getIssueById(issueId: string): undefined | TIssue;
+  getIssueIdByIdentifier(issueIdentifier: string): undefined | string;
+  getIssuesByIds(issueIds: string[], type: "archived" | "un-archived"): TIssue[]; // Record defines issue_id as key and TIssue as value
+};
+
+export class IssueStore implements IIssueStore {
+  // observables
+  issuesMap: { [issue_id: string]: TIssue } = {};
+  issuesIdentifierMap: { [issue_identifier: string]: string } = {};
+  // service
+  issueService;
+
+  constructor() {
+    makeObservable(this, {
+      // observable
+      issuesMap: observable,
+      issuesIdentifierMap: observable,
+      // actions
+      addIssue: action,
+      addIssueIdentifier: action,
+      updateIssue: action,
+      removeIssue: action,
+    });
+    this.issueService = new IssueService();
+  }
+
+  // actions
+  /**
+   * @description This method will add issues to the issuesMap
+   * @param {TIssue[]} issues
+   * @returns {void}
+   */
+  addIssue = (issues: TIssue[]) => {
+    if (issues && issues.length <= 0) return;
+    runInAction(() => {
+      issues.forEach((issue) => {
+        // add issue identifier to the issuesIdentifierMap
+        const projectIdentifier = rootStore.projectRoot.project.getProjectIdentifierById(issue?.project_id);
+        const workItemSequenceId = issue?.sequence_id;
+        const issueIdentifier = `${projectIdentifier}-${workItemSequenceId}`;
+        set(this.issuesIdentifierMap, issueIdentifier, issue.id);
+
+        if (!this.issuesMap[issue.id]) set(this.issuesMap, issue.id, issue);
+        else update(this.issuesMap, issue.id, (prevIssue) => ({ ...prevIssue, ...issue }));
+      });
+    });
+  };
+
+  /**
+   * @description This method will add issue_identifier to the issuesIdentifierMap
+   * @param issueIdentifier
+   * @param issueId
+   * @returns {void}
+   */
+  addIssueIdentifier = (issueIdentifier: string, issueId: string) => {
+    if (!issueIdentifier || !issueId) return;
+    runInAction(() => {
+      set(this.issuesIdentifierMap, issueIdentifier, issueId);
+    });
+  };
+
+  getIssues = async (workspaceSlug: string, projectId: string, issueIds: string[]) => {
+    const issues = await this.issueService.retrieveIssues(workspaceSlug, projectId, issueIds);
+
+    runInAction(() => {
+      issues.forEach((issue) => {
+        if (!this.issuesMap[issue.id]) set(this.issuesMap, issue.id, issue);
+      });
+    });
+
+    return issues;
+  };
+
+  /**
+   * @description This method will update the issue in the issuesMap
+   * @param {string} issueId
+   * @param {Partial<TIssue>} issue
+   * @returns {void}
+   */
+  updateIssue = (issueId: string, issue: Partial<TIssue>) => {
+    if (!issue || !issueId || !this.issuesMap[issueId]) return;
+    runInAction(() => {
+      set(this.issuesMap, [issueId, "updated_at"], getCurrentDateTimeInISO());
+      Object.keys(issue).forEach((key) => {
+        set(this.issuesMap, [issueId, key], issue[key as keyof TIssue]);
+      });
+    });
+  };
+
+  /**
+   * @description This method will remove the issue from the issuesMap
+   * @param {string} issueId
+   * @returns {void}
+   */
+  removeIssue = (issueId: string) => {
+    if (!issueId || !this.issuesMap[issueId]) return;
+    runInAction(() => {
+      delete this.issuesMap[issueId];
+    });
+  };
+
+  // helper methods
+  /**
+   * @description This method will return the issue from the issuesMap
+   * @param {string} issueId
+   * @returns {TIssue | undefined}
+   */
+  getIssueById = computedFn((issueId: string) => {
+    if (!issueId || !this.issuesMap[issueId]) return undefined;
+    return this.issuesMap[issueId];
+  });
+
+  /**
+   * @description This method will return the issue_id from the issuesIdentifierMap
+   * @param {string} issueIdentifier
+   * @returns {string | undefined}
+   */
+  getIssueIdByIdentifier = computedFn((issueIdentifier: string) => {
+    if (!issueIdentifier || !this.issuesIdentifierMap[issueIdentifier]) return undefined;
+    return this.issuesIdentifierMap[issueIdentifier];
+  });
+
+  /**
+   * @description This method will return the issues from the issuesMap
+   * @param {string[]} issueIds
+   * @param {boolean} archivedIssues
+   * @returns {Record<string, TIssue> | undefined}
+   */
+  getIssuesByIds = computedFn((issueIds: string[], type: "archived" | "un-archived") => {
+    if (!issueIds || issueIds.length <= 0) return [];
+    const filteredIssues: TIssue[] = [];
+    Object.values(issueIds).forEach((issueId) => {
+      // if type is archived then check archived_at is not null
+      // if type is un-archived then check archived_at is null
+      const issue = this.issuesMap[issueId];
+      if (issue && ((type === "archived" && issue.archived_at) || (type === "un-archived" && !issue?.archived_at))) {
+        filteredIssues.push(issue);
+      }
+    });
+    return filteredIssues;
+  });
+}
diff --git a/apps/web/core/store/issue/issue_calendar_view.store.ts b/apps/web/core/store/issue/issue_calendar_view.store.ts
new file mode 100644
index 0000000..4788139
--- /dev/null
+++ b/apps/web/core/store/issue/issue_calendar_view.store.ts
@@ -0,0 +1,215 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observable, action, makeObservable, runInAction, computed, reaction } from "mobx";
+
+// helpers
+import { computedFn } from "mobx-utils";
+import type { ICalendarPayload, ICalendarWeek } from "@plane/types";
+import { EStartOfTheWeek } from "@plane/types";
+import { generateCalendarData, getWeekNumberOfDate } from "@plane/utils";
+// types
+import type { IIssueRootStore } from "./root.store";
+
+export interface ICalendarStore {
+  calendarFilters: {
+    activeMonthDate: Date;
+    activeWeekDate: Date;
+  };
+  calendarPayload: ICalendarPayload | null;
+
+  // action
+  updateCalendarFilters: (filters: Partial<{ activeMonthDate: Date; activeWeekDate: Date }>) => void;
+  updateCalendarPayload: (date: Date) => void;
+  regenerateCalendar: () => void;
+
+  // computed
+  allWeeksOfActiveMonth:
+    | {
+        [weekNumber: string]: ICalendarWeek;
+      }
+    | undefined;
+  activeWeekNumber: number;
+  allDaysOfActiveWeek: ICalendarWeek | undefined;
+  getStartAndEndDate: (layout: "week" | "month") => { startDate: string; endDate: string } | undefined;
+}
+
+export class CalendarStore implements ICalendarStore {
+  loader: boolean = false;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  error: any | null = null;
+
+  // observables
+  calendarFilters: { activeMonthDate: Date; activeWeekDate: Date } = {
+    activeMonthDate: new Date(),
+    activeWeekDate: new Date(),
+  };
+  calendarPayload: ICalendarPayload | null = null;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: IIssueRootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      calendarFilters: observable.ref,
+      calendarPayload: observable.ref,
+
+      // actions
+      updateCalendarFilters: action,
+      updateCalendarPayload: action,
+      regenerateCalendar: action,
+
+      //computed
+      allWeeksOfActiveMonth: computed,
+      activeWeekNumber: computed,
+      allDaysOfActiveWeek: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.initCalendar();
+
+    // Watch for changes in startOfWeek preference and regenerate calendar
+    reaction(
+      () => this.rootStore.rootStore.user.userProfile.data?.start_of_the_week,
+      () => {
+        // Regenerate calendar when startOfWeek preference changes
+        this.regenerateCalendar();
+      }
+    );
+  }
+
+  get allWeeksOfActiveMonth() {
+    if (!this.calendarPayload) return undefined;
+
+    const { activeMonthDate } = this.calendarFilters;
+
+    const year = activeMonthDate.getFullYear();
+    const month = activeMonthDate.getMonth();
+
+    // Get the weeks for the current month
+    const weeks = this.calendarPayload[`y-${year}`][`m-${month}`];
+
+    // If no weeks exist, return undefined
+    if (!weeks) return undefined;
+
+    // Create a new object to store the reordered weeks
+    const reorderedWeeks: { [weekNumber: string]: ICalendarWeek } = {};
+
+    // Get all week numbers and sort them
+    const weekNumbers = Object.keys(weeks).map((key) => parseInt(key.replace("w-", "")));
+    weekNumbers.sort((a, b) => a - b);
+
+    // Reorder weeks based on start_of_week
+    weekNumbers.forEach((weekNumber) => {
+      const weekKey = `w-${weekNumber}`;
+      reorderedWeeks[weekKey] = weeks[weekKey];
+    });
+
+    return reorderedWeeks;
+  }
+
+  get activeWeekNumber() {
+    return getWeekNumberOfDate(this.calendarFilters.activeWeekDate);
+  }
+
+  get allDaysOfActiveWeek() {
+    if (!this.calendarPayload) return undefined;
+
+    const { activeWeekDate } = this.calendarFilters;
+    const year = activeWeekDate.getFullYear();
+    const month = activeWeekDate.getMonth();
+    const dayOfMonth = activeWeekDate.getDate();
+
+    // Check if calendar data exists for this year and month
+    const yearData = this.calendarPayload[`y-${year}`];
+    if (!yearData) return undefined;
+
+    const monthData = yearData[`m-${month}`];
+    if (!monthData) return undefined;
+
+    // Calculate firstDayOfMonth offset (same logic as calendar generation)
+    const startOfWeek = this.rootStore?.rootStore?.user?.userProfile?.data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
+    const firstDayOfMonthRaw = new Date(year, month, 1).getDay();
+    const firstDayOfMonth = (firstDayOfMonthRaw - startOfWeek + 7) % 7;
+
+    // Calculate which sequential week this date falls into
+    const weekIndex = Math.floor((dayOfMonth - 1 + firstDayOfMonth) / 7);
+
+    const weekKey = `w-${weekIndex}`;
+    if (!(weekKey in monthData)) {
+      return undefined;
+    }
+    return monthData[weekKey];
+  }
+
+  getStartAndEndDate = computedFn((layout: "week" | "month") => {
+    switch (layout) {
+      case "week": {
+        if (!this.allDaysOfActiveWeek) return;
+        const dates = Object.keys(this.allDaysOfActiveWeek);
+        return { startDate: dates[0], endDate: dates[dates.length - 1] };
+      }
+      case "month": {
+        if (!this.allWeeksOfActiveMonth) return;
+        const weeks = Object.keys(this.allWeeksOfActiveMonth);
+        const firstWeekDates = Object.keys(this.allWeeksOfActiveMonth[weeks[0]]);
+        const lastWeekDates = Object.keys(this.allWeeksOfActiveMonth[weeks[weeks.length - 1]]);
+
+        return { startDate: firstWeekDates[0], endDate: lastWeekDates[lastWeekDates.length - 1] };
+      }
+    }
+  });
+
+  updateCalendarFilters = (filters: Partial<{ activeMonthDate: Date; activeWeekDate: Date }>) => {
+    this.updateCalendarPayload(filters.activeMonthDate || filters.activeWeekDate || new Date());
+
+    runInAction(() => {
+      this.calendarFilters = {
+        ...this.calendarFilters,
+        ...filters,
+      };
+    });
+  };
+
+  updateCalendarPayload = (date: Date) => {
+    if (!this.calendarPayload) return null;
+
+    const nextDate = new Date(date);
+    const startOfWeek = this.rootStore.rootStore.user.userProfile.data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
+
+    runInAction(() => {
+      this.calendarPayload = generateCalendarData(this.calendarPayload, nextDate, startOfWeek);
+    });
+  };
+
+  initCalendar = () => {
+    const startOfWeek = this.rootStore.rootStore.user.userProfile.data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
+    const newCalendarPayload = generateCalendarData(null, new Date(), startOfWeek);
+
+    runInAction(() => {
+      this.calendarPayload = newCalendarPayload;
+    });
+  };
+
+  /**
+   * Force complete regeneration of calendar data
+   * This should be called when startOfWeek preference changes
+   */
+  regenerateCalendar = () => {
+    const startOfWeek = this.rootStore.rootStore.user.userProfile.data?.start_of_the_week ?? EStartOfTheWeek.SUNDAY;
+    const { activeMonthDate } = this.calendarFilters;
+
+    // Force complete regeneration by passing null to clear all cached data
+    const newCalendarPayload = generateCalendarData(null, activeMonthDate, startOfWeek);
+
+    runInAction(() => {
+      this.calendarPayload = newCalendarPayload;
+    });
+  };
+}
diff --git a/apps/web/core/store/issue/issue_gantt_view.store.ts b/apps/web/core/store/issue/issue_gantt_view.store.ts
new file mode 100644
index 0000000..4a0f5ce
--- /dev/null
+++ b/apps/web/core/store/issue/issue_gantt_view.store.ts
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// helpers
+import type { ChartDataType, TGanttViews } from "@plane/types";
+import { currentViewDataWithView } from "@/components/gantt-chart/data";
+// types
+
+export interface IGanttStore {
+  // observables
+  currentView: TGanttViews;
+  currentViewData: ChartDataType | undefined;
+  activeBlockId: string | null;
+  renderView: any;
+  // computed functions
+  isBlockActive: (blockId: string) => boolean;
+  // actions
+  updateCurrentView: (view: TGanttViews) => void;
+  updateCurrentViewData: (data: ChartDataType | undefined) => void;
+  updateActiveBlockId: (blockId: string | null) => void;
+  updateRenderView: (data: any[]) => void;
+}
+
+export class GanttStore implements IGanttStore {
+  // observables
+  currentView: TGanttViews = "month";
+  currentViewData: ChartDataType | undefined = undefined;
+  activeBlockId: string | null = null;
+  renderView: any[] = [];
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      currentView: observable.ref,
+      currentViewData: observable,
+      activeBlockId: observable.ref,
+      renderView: observable,
+      // actions
+      updateCurrentView: action.bound,
+      updateCurrentViewData: action.bound,
+      updateActiveBlockId: action.bound,
+      updateRenderView: action.bound,
+    });
+
+    this.initGantt();
+  }
+
+  /**
+   * @description check if block is active
+   * @param {string} blockId
+   */
+  isBlockActive = computedFn((blockId: string): boolean => this.activeBlockId === blockId);
+
+  /**
+   * @description update current view
+   * @param {TGanttViews} view
+   */
+  updateCurrentView = (view: TGanttViews) => {
+    this.currentView = view;
+  };
+
+  /**
+   * @description update current view data
+   * @param {ChartDataType | undefined} data
+   */
+  updateCurrentViewData = (data: ChartDataType | undefined) => {
+    this.currentViewData = data;
+  };
+
+  /**
+   * @description update active block
+   * @param {string | null} block
+   */
+  updateActiveBlockId = (blockId: string | null) => {
+    this.activeBlockId = blockId;
+  };
+
+  /**
+   * @description update render view
+   * @param {any[]} data
+   */
+  updateRenderView = (data: any[]) => {
+    this.renderView = data;
+  };
+
+  /**
+   * @description initialize gantt chart with month view
+   */
+  initGantt = () => {
+    const newCurrentViewData = currentViewDataWithView(this.currentView);
+
+    runInAction(() => {
+      this.currentViewData = newCurrentViewData;
+    });
+  };
+}
diff --git a/apps/web/core/store/issue/issue_kanban_view.store.ts b/apps/web/core/store/issue/issue_kanban_view.store.ts
new file mode 100644
index 0000000..1529409
--- /dev/null
+++ b/apps/web/core/store/issue/issue_kanban_view.store.ts
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, computed, makeObservable, observable } from "mobx";
+import { computedFn } from "mobx-utils";
+import { DRAG_ALLOWED_GROUPS } from "@plane/constants";
+// types
+import type { TIssueGroupByOptions } from "@plane/types";
+// constants
+// store
+import type { IssueRootStore } from "./root.store";
+
+export interface IIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  };
+  isDragging: boolean;
+  // computed
+  getCanUserDragDrop: (
+    group_by: TIssueGroupByOptions | undefined,
+    sub_group_by: TIssueGroupByOptions | undefined
+  ) => boolean;
+  canUserDragDropVertically: boolean;
+  canUserDragDropHorizontally: boolean;
+  // actions
+  handleKanBanToggle: (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => void;
+  setIsDragging: (isDragging: boolean) => void;
+}
+
+export class IssueKanBanViewStore implements IIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  } = { groupByHeaderMinMax: [], subgroupByIssuesVisibility: [] };
+  isDragging = false;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: IssueRootStore) {
+    makeObservable(this, {
+      kanBanToggle: observable,
+      isDragging: observable.ref,
+      // computed
+      canUserDragDropVertically: computed,
+      canUserDragDropHorizontally: computed,
+
+      // actions
+      handleKanBanToggle: action,
+      setIsDragging: action.bound,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  setIsDragging = (isDragging: boolean) => {
+    this.isDragging = isDragging;
+  };
+
+  getCanUserDragDrop = computedFn(
+    (group_by: TIssueGroupByOptions | undefined, sub_group_by: TIssueGroupByOptions | undefined) => {
+      if (group_by && DRAG_ALLOWED_GROUPS.includes(group_by)) {
+        if (!sub_group_by) return true;
+        if (sub_group_by && DRAG_ALLOWED_GROUPS.includes(sub_group_by)) return true;
+      }
+      return false;
+    }
+  );
+
+  get canUserDragDropVertically() {
+    return false;
+  }
+
+  get canUserDragDropHorizontally() {
+    return false;
+  }
+
+  handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    this.kanBanToggle = {
+      ...this.kanBanToggle,
+      [toggle]: this.kanBanToggle[toggle].includes(value)
+        ? this.kanBanToggle[toggle].filter((v) => v !== value)
+        : [...this.kanBanToggle[toggle], value],
+    };
+  };
+}
diff --git a/apps/web/core/store/issue/module/filter.store.ts b/apps/web/core/store/issue/module/filter.store.ts
new file mode 100644
index 0000000..ccf304b
--- /dev/null
+++ b/apps/web/core/store/issue/module/filter.store.ts
@@ -0,0 +1,325 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// base class
+import { computedFn } from "mobx-utils";
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EIssueFilterType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueKanbanFilters,
+  IIssueFilters,
+  TIssueParams,
+  IssuePaginationOptions,
+  TWorkItemFilterExpression,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { handleIssueQueryParamsByLayout } from "@plane/utils";
+import { IssueFiltersService } from "@/services/issue_filter.service";
+import type { IBaseIssueFilterStore } from "../helpers/issue-filter-helper.store";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import type { IIssueRootStore } from "../root.store";
+// constants
+// services
+
+export interface IModuleIssuesFilter extends IBaseIssueFilterStore {
+  //helper actions
+  getFilterParams: (
+    options: IssuePaginationOptions,
+    moduleId: string,
+    cursor: string | undefined,
+    groupId: string | undefined,
+    subGroupId: string | undefined
+  ) => Partial<Record<TIssueParams, string | boolean>>;
+  getIssueFilters(moduleId: string): IIssueFilters | undefined;
+  // action
+  fetchFilters: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  updateFilterExpression: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    filters: TWorkItemFilterExpression
+  ) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate,
+    moduleId: string
+  ) => Promise<void>;
+}
+
+export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModuleIssuesFilter {
+  // observables
+  filters: { [moduleId: string]: IIssueFilters } = {};
+  // root store
+  rootIssueStore: IIssueRootStore;
+  // services
+  issueFilterService;
+
+  constructor(_rootStore: IIssueRootStore) {
+    super();
+    makeObservable(this, {
+      // observables
+      filters: observable,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // actions
+      fetchFilters: action,
+      updateFilters: action,
+    });
+    // root store
+    this.rootIssueStore = _rootStore;
+    // services
+    this.issueFilterService = new IssueFiltersService();
+  }
+
+  get issueFilters() {
+    const moduleId = this.rootIssueStore.moduleId;
+    if (!moduleId) return undefined;
+
+    return this.getIssueFilters(moduleId);
+  }
+
+  get appliedFilters() {
+    const moduleId = this.rootIssueStore.moduleId;
+    if (!moduleId) return undefined;
+
+    return this.getAppliedFilters(moduleId);
+  }
+
+  getIssueFilters(moduleId: string) {
+    const displayFilters = this.filters[moduleId] || undefined;
+    if (isEmpty(displayFilters)) return undefined;
+
+    const _filters: IIssueFilters = this.computedIssueFilters(displayFilters);
+
+    return _filters;
+  }
+
+  getAppliedFilters(moduleId: string) {
+    const userFilters = this.getIssueFilters(moduleId);
+    if (!userFilters) return undefined;
+
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues");
+    if (!filteredParams) return undefined;
+
+    if (filteredParams.includes("module")) filteredParams.splice(filteredParams.indexOf("module"), 1);
+
+    const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
+      userFilters?.richFilters,
+      userFilters?.displayFilters,
+      filteredParams
+    );
+
+    return filteredRouteParams;
+  }
+
+  getFilterParams = computedFn(
+    (
+      options: IssuePaginationOptions,
+      moduleId: string,
+      cursor: string | undefined,
+      groupId: string | undefined,
+      subGroupId: string | undefined
+    ) => {
+      let filterParams = this.getAppliedFilters(moduleId);
+
+      if (!filterParams) {
+        filterParams = {};
+      }
+      filterParams["module"] = moduleId;
+
+      const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
+      return paginationParams;
+    }
+  );
+
+  fetchFilters = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    const _filters = await this.issueFilterService.fetchModuleIssueFilters(workspaceSlug, projectId, moduleId);
+
+    const richFilters: TWorkItemFilterExpression = _filters?.rich_filters;
+    const displayFilters: IIssueDisplayFilterOptions = this.computedDisplayFilters(_filters?.display_filters);
+    const displayProperties: IIssueDisplayProperties = this.computedDisplayProperties(_filters?.display_properties);
+
+    // fetching the kanban toggle helpers in the local storage
+    const kanbanFilters = {
+      group_by: [],
+      sub_group_by: [],
+    };
+    const currentUserId = this.rootIssueStore.currentUserId;
+    if (currentUserId) {
+      const _kanbanFilters = this.handleIssuesLocalFilters.get(
+        EIssuesStoreType.MODULE,
+        workspaceSlug,
+        moduleId,
+        currentUserId
+      );
+      kanbanFilters.group_by = _kanbanFilters?.kanban_filters?.group_by || [];
+      kanbanFilters.sub_group_by = _kanbanFilters?.kanban_filters?.sub_group_by || [];
+    }
+
+    runInAction(() => {
+      set(this.filters, [moduleId, "richFilters"], richFilters);
+      set(this.filters, [moduleId, "displayFilters"], displayFilters);
+      set(this.filters, [moduleId, "displayProperties"], displayProperties);
+      set(this.filters, [moduleId, "kanbanFilters"], kanbanFilters);
+    });
+  };
+
+  /**
+   * NOTE: This method is designed as a fallback function for the work item filter store.
+   * Only use this method directly when initializing filter instances.
+   * For regular filter updates, use this method as a fallback function for the work item filter store methods instead.
+   */
+  updateFilterExpression: IModuleIssuesFilter["updateFilterExpression"] = async (
+    workspaceSlug,
+    projectId,
+    moduleId,
+    filters
+  ) => {
+    try {
+      runInAction(() => {
+        set(this.filters, [moduleId, "richFilters"], filters);
+      });
+
+      this.rootIssueStore.moduleIssues.fetchIssuesWithExistingPagination(
+        workspaceSlug,
+        projectId,
+        "mutation",
+        moduleId
+      );
+      await this.issueFilterService.patchModuleIssueFilters(workspaceSlug, projectId, moduleId, {
+        rich_filters: filters,
+      });
+    } catch (error) {
+      console.log("error while updating rich filters", error);
+      throw error;
+    }
+  };
+
+  updateFilters: IModuleIssuesFilter["updateFilters"] = async (workspaceSlug, projectId, type, filters, moduleId) => {
+    try {
+      if (isEmpty(this.filters) || isEmpty(this.filters[moduleId])) return;
+
+      const _filters = {
+        richFilters: this.filters[moduleId].richFilters,
+        displayFilters: this.filters[moduleId].displayFilters as IIssueDisplayFilterOptions,
+        displayProperties: this.filters[moduleId].displayProperties as IIssueDisplayProperties,
+        kanbanFilters: this.filters[moduleId].kanbanFilters as TIssueKanbanFilters,
+      };
+
+      switch (type) {
+        case EIssueFilterType.DISPLAY_FILTERS: {
+          const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
+          _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
+
+          // set sub_group_by to null if group_by is set to null
+          if (_filters.displayFilters.group_by === null) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+          if (
+            _filters.displayFilters.layout === "kanban" &&
+            _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+          ) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set group_by to state if layout is switched to kanban and group_by is null
+          if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null) {
+            _filters.displayFilters.group_by = "state";
+            updatedDisplayFilters.group_by = "state";
+          }
+
+          runInAction(() => {
+            Object.keys(updatedDisplayFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [moduleId, "displayFilters", _key],
+                updatedDisplayFilters[_key as keyof IIssueDisplayFilterOptions]
+              );
+            });
+          });
+
+          if (this.getShouldClearIssues(updatedDisplayFilters)) {
+            this.rootIssueStore.moduleIssues.clear(true); // clear issues for local store when some filters like layout changes
+          }
+
+          if (this.getShouldReFetchIssues(updatedDisplayFilters)) {
+            this.rootIssueStore.moduleIssues.fetchIssuesWithExistingPagination(
+              workspaceSlug,
+              projectId,
+              "mutation",
+              moduleId
+            );
+          }
+
+          await this.issueFilterService.patchModuleIssueFilters(workspaceSlug, projectId, moduleId, {
+            display_filters: _filters.displayFilters,
+          });
+
+          break;
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
+          const updatedDisplayProperties = filters as IIssueDisplayProperties;
+          _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
+
+          runInAction(() => {
+            Object.keys(updatedDisplayProperties).forEach((_key) => {
+              set(
+                this.filters,
+                [moduleId, "displayProperties", _key],
+                updatedDisplayProperties[_key as keyof IIssueDisplayProperties]
+              );
+            });
+          });
+
+          await this.issueFilterService.patchModuleIssueFilters(workspaceSlug, projectId, moduleId, {
+            display_properties: _filters.displayProperties,
+          });
+          break;
+        }
+
+        case EIssueFilterType.KANBAN_FILTERS: {
+          const updatedKanbanFilters = filters as TIssueKanbanFilters;
+          _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
+
+          const currentUserId = this.rootIssueStore.currentUserId;
+          if (currentUserId)
+            this.handleIssuesLocalFilters.set(EIssuesStoreType.MODULE, type, workspaceSlug, moduleId, currentUserId, {
+              kanban_filters: _filters.kanbanFilters,
+            });
+
+          runInAction(() => {
+            Object.keys(updatedKanbanFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [moduleId, "kanbanFilters", _key],
+                updatedKanbanFilters[_key as keyof TIssueKanbanFilters]
+              );
+            });
+          });
+
+          break;
+        }
+        default:
+          break;
+      }
+    } catch (error) {
+      if (moduleId) this.fetchFilters(workspaceSlug, projectId, moduleId);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/module/index.ts b/apps/web/core/store/issue/module/index.ts
new file mode 100644
index 0000000..a21a791
--- /dev/null
+++ b/apps/web/core/store/issue/module/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/apps/web/core/store/issue/module/issue.store.ts b/apps/web/core/store/issue/module/issue.store.ts
new file mode 100644
index 0000000..4f3fbdd
--- /dev/null
+++ b/apps/web/core/store/issue/module/issue.store.ts
@@ -0,0 +1,289 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, runInAction } from "mobx";
+// base class
+import type {
+  TIssue,
+  TLoader,
+  ViewFlags,
+  IssuePaginationOptions,
+  TIssuesResponse,
+  TBulkOperationsPayload,
+} from "@plane/types";
+// helpers
+import { getDistributionPathsPostUpdate } from "@plane/utils";
+import type { IBaseIssuesStore } from "../helpers/base-issues.store";
+import { BaseIssuesStore } from "../helpers/base-issues.store";
+//
+import type { IIssueRootStore } from "../root.store";
+import type { IModuleIssuesFilter } from "./filter.store";
+
+export interface IModuleIssues extends IBaseIssuesStore {
+  viewFlags: ViewFlags;
+  // actions
+  getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
+  fetchIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    options: IssuePaginationOptions,
+    moduleId: string
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchIssuesWithExistingPagination: (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    moduleId: string
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchNextIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => Promise<TIssuesResponse | undefined>;
+
+  createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>, moduleId: string) => Promise<TIssue>;
+  updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  quickAddIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    data: TIssue,
+    moduleId: string
+  ) => Promise<TIssue | undefined>;
+  removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  archiveBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  bulkUpdateProperties: (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => Promise<void>;
+}
+
+export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
+  viewFlags = {
+    enableQuickAdd: true,
+    enableIssueCreation: true,
+    enableInlineEditing: true,
+  };
+  // filter store
+  issueFilterStore: IModuleIssuesFilter;
+
+  constructor(_rootStore: IIssueRootStore, issueFilterStore: IModuleIssuesFilter) {
+    super(_rootStore, issueFilterStore);
+
+    makeObservable(this, {
+      // action
+      fetchIssues: action,
+      fetchNextIssues: action,
+      fetchIssuesWithExistingPagination: action,
+
+      quickAddIssue: action,
+    });
+    // filter store
+    this.issueFilterStore = issueFilterStore;
+  }
+
+  /**
+   * Fetches the module details
+   * @param workspaceSlug
+   * @param projectId
+   * @param id is the module Id
+   */
+  fetchParentStats = (workspaceSlug: string, projectId?: string, id?: string) => {
+    const moduleId = id ?? this.moduleId;
+    projectId &&
+      moduleId &&
+      this.rootIssueStore.rootStore.module.fetchModuleDetails(workspaceSlug, projectId, moduleId);
+  };
+
+  /**
+   * Update Parent stats before fetching from server
+   * @param prevIssueState
+   * @param nextIssueState
+   * @param id
+   */
+  updateParentStats = (prevIssueState?: TIssue, nextIssueState?: TIssue, id?: string) => {
+    try {
+      // get distribution updates
+      const distributionUpdates = getDistributionPathsPostUpdate(
+        prevIssueState,
+        nextIssueState,
+        this.rootIssueStore.rootStore.state.stateMap,
+        this.rootIssueStore.rootStore.projectEstimate?.currentActiveEstimate?.estimatePointById
+      );
+
+      const moduleId = id ?? this.moduleId;
+
+      moduleId && this.rootIssueStore.rootStore.module.updateModuleDistribution(distributionUpdates, moduleId);
+    } catch (_e) {
+      console.warn("could not update module statistics");
+    }
+  };
+
+  /**
+   * This method is called to fetch the first issues of pagination
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @param options
+   * @param moduleId
+   * @returns
+   */
+  fetchIssues = async (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    options: IssuePaginationOptions,
+    moduleId: string,
+    isExistingPaginationOptions: boolean = false
+  ) => {
+    try {
+      // set loader and clear store
+      runInAction(() => {
+        this.setLoader(loadType);
+        this.clear(!isExistingPaginationOptions); // clear while fetching from server.
+      });
+
+      // get params from pagination options
+      const params = this.issueFilterStore?.getFilterParams(options, moduleId, undefined, undefined, undefined);
+      // call the fetch issues API with the params
+      const response = await this.issueService.getIssues(workspaceSlug, projectId, params, {
+        signal: this.controller.signal,
+      });
+
+      // after fetching issues, call the base method to process the response further
+      this.onfetchIssues(response, options, workspaceSlug, projectId, moduleId, !isExistingPaginationOptions);
+      return response;
+    } catch (error) {
+      // set loader to undefined once errored out
+      this.setLoader(undefined);
+      throw error;
+    }
+  };
+
+  /**
+   * This method is called subsequent pages of pagination
+   * if groupId/subgroupId is provided, only that specific group's next page is fetched
+   * else all the groups' next page is fetched
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @param groupId
+   * @param subGroupId
+   * @returns
+   */
+  fetchNextIssues = async (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => {
+    const cursorObject = this.getPaginationData(groupId, subGroupId);
+    // if there are no pagination options and the next page results do not exist the return
+    if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
+    try {
+      // set Loader
+      this.setLoader("pagination", groupId, subGroupId);
+
+      // get params from stored pagination options
+      const params = this.issueFilterStore?.getFilterParams(
+        this.paginationOptions,
+        moduleId,
+        this.getNextCursor(groupId, subGroupId),
+        groupId,
+        subGroupId
+      );
+      // call the fetch issues API with the params for next page in issues
+      const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
+
+      // after the next page of issues are fetched, call the base method to process the response
+      this.onfetchNexIssues(response, groupId, subGroupId);
+      return response;
+    } catch (error) {
+      // set Loader as undefined if errored out
+      this.setLoader(undefined, groupId, subGroupId);
+      throw error;
+    }
+  };
+
+  /**
+   * This Method exists to fetch the first page of the issues with the existing stored pagination
+   * This is useful for refetching when filters, groupBy, orderBy etc changes
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @param moduleId
+   * @returns
+   */
+  fetchIssuesWithExistingPagination = async (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    moduleId: string
+  ) => {
+    if (!this.paginationOptions) return;
+    return await this.fetchIssues(workspaceSlug, projectId, loadType, this.paginationOptions, moduleId, true);
+  };
+
+  /**
+   * Override inherited create issue, to also add issue to module
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @param moduleId
+   * @returns
+   */
+  override createIssue = async (workspaceSlug: string, projectId: string, data: Partial<TIssue>, moduleId: string) => {
+    try {
+      const response = await super.createIssue(workspaceSlug, projectId, data, moduleId, false);
+      const moduleIds = data.module_ids && data.module_ids.length > 1 ? data.module_ids : [moduleId];
+      await this.addModulesToIssue(workspaceSlug, projectId, response.id, moduleIds);
+
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * This Method overrides the base quickAdd issue
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @param moduleId
+   * @returns
+   */
+  quickAddIssue = async (workspaceSlug: string, projectId: string, data: TIssue, moduleId: string) => {
+    try {
+      // add temporary issue to store list
+      this.addIssue(data);
+
+      // call overridden create issue
+      const response = await this.createIssue(workspaceSlug, projectId, data, moduleId);
+
+      // remove temp Issue from store list
+      runInAction(() => {
+        this.removeIssueFromList(data.id);
+        this.rootIssueStore.issues.removeIssue(data.id);
+      });
+
+      const currentCycleId = data.cycle_id !== "" && data.cycle_id === "None" ? undefined : data.cycle_id;
+
+      if (currentCycleId) {
+        await this.addCycleToIssue(workspaceSlug, projectId, currentCycleId, response.id);
+      }
+
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  // Using aliased names as they cannot be overridden in other stores
+  archiveBulkIssues = this.bulkArchiveIssues;
+  updateIssue = this.issueUpdate;
+  archiveIssue = this.issueArchive;
+}
diff --git a/apps/web/core/store/issue/profile/filter.store.ts b/apps/web/core/store/issue/profile/filter.store.ts
new file mode 100644
index 0000000..78055d1
--- /dev/null
+++ b/apps/web/core/store/issue/profile/filter.store.ts
@@ -0,0 +1,290 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// base class
+import { computedFn } from "mobx-utils";
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EIssueFilterType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueKanbanFilters,
+  IIssueFilters,
+  TIssueParams,
+  IssuePaginationOptions,
+  TWorkItemFilterExpression,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { handleIssueQueryParamsByLayout } from "@plane/utils";
+import { IssueFiltersService } from "@/services/issue_filter.service";
+import type { IBaseIssueFilterStore } from "../helpers/issue-filter-helper.store";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import type { IIssueRootStore } from "../root.store";
+// constants
+// services
+
+export interface IProfileIssuesFilter extends IBaseIssueFilterStore {
+  // observables
+  userId: string;
+  //helper actions
+  getFilterParams: (
+    options: IssuePaginationOptions,
+    userId: string,
+    cursor: string | undefined,
+    groupId: string | undefined,
+    subGroupId: string | undefined
+  ) => Partial<Record<TIssueParams, string | boolean>>;
+  // action
+  fetchFilters: (workspaceSlug: string, userId: string) => Promise<void>;
+  updateFilterExpression: (workspaceSlug: string, userId: string, filters: TWorkItemFilterExpression) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    projectId: string | undefined,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate,
+    userId: string
+  ) => Promise<void>;
+}
+
+export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProfileIssuesFilter {
+  // observables
+  userId: string = "";
+  filters: { [userId: string]: IIssueFilters } = {};
+  // root store
+  rootIssueStore: IIssueRootStore;
+  // services
+  issueFilterService;
+
+  constructor(_rootStore: IIssueRootStore) {
+    super();
+    makeObservable(this, {
+      // observables
+      userId: observable.ref,
+      filters: observable,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // actions
+      fetchFilters: action,
+      updateFilters: action,
+    });
+    // root store
+    this.rootIssueStore = _rootStore;
+    // services
+    this.issueFilterService = new IssueFiltersService();
+  }
+
+  get issueFilters() {
+    const userId = this.rootIssueStore.userId;
+    if (!userId) return undefined;
+
+    return this.getIssueFilters(userId);
+  }
+
+  get appliedFilters() {
+    const userId = this.rootIssueStore.userId;
+    if (!userId) return undefined;
+
+    return this.getAppliedFilters(userId);
+  }
+
+  getIssueFilters(userId: string) {
+    const displayFilters = this.filters[userId] || undefined;
+    if (isEmpty(displayFilters)) return undefined;
+
+    const _filters: IIssueFilters = this.computedIssueFilters(displayFilters);
+
+    return _filters;
+  }
+
+  getAppliedFilters(userId: string) {
+    const userFilters = this.getIssueFilters(userId);
+    if (!userFilters) return undefined;
+
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "profile_issues");
+    if (!filteredParams) return undefined;
+
+    const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
+      userFilters?.richFilters,
+      userFilters?.displayFilters,
+      filteredParams
+    );
+
+    return filteredRouteParams;
+  }
+
+  getFilterParams = computedFn(
+    (
+      options: IssuePaginationOptions,
+      userId: string,
+      cursor: string | undefined,
+      groupId: string | undefined,
+      subGroupId: string | undefined
+    ) => {
+      const filterParams = this.getAppliedFilters(userId);
+
+      const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
+      return paginationParams;
+    }
+  );
+
+  fetchFilters = async (workspaceSlug: string, userId: string) => {
+    this.userId = userId;
+    const _filters = this.handleIssuesLocalFilters.get(EIssuesStoreType.PROFILE, workspaceSlug, userId, undefined);
+
+    const richFilters: TWorkItemFilterExpression = _filters?.rich_filters;
+    const displayFilters: IIssueDisplayFilterOptions = this.computedDisplayFilters(_filters?.display_filters);
+    const displayProperties: IIssueDisplayProperties = this.computedDisplayProperties(_filters?.display_properties);
+    const kanbanFilters = {
+      group_by: _filters?.kanban_filters?.group_by || [],
+      sub_group_by: _filters?.kanban_filters?.sub_group_by || [],
+    };
+
+    runInAction(() => {
+      set(this.filters, [userId, "richFilters"], richFilters);
+      set(this.filters, [userId, "displayFilters"], displayFilters);
+      set(this.filters, [userId, "displayProperties"], displayProperties);
+      set(this.filters, [userId, "kanbanFilters"], kanbanFilters);
+    });
+  };
+
+  /**
+   * NOTE: This method is designed as a fallback function for the work item filter store.
+   * Only use this method directly when initializing filter instances.
+   * For regular filter updates, use this method as a fallback function for the work item filter store methods instead.
+   */
+  updateFilterExpression: IProfileIssuesFilter["updateFilterExpression"] = async (workspaceSlug, userId, filters) => {
+    try {
+      runInAction(() => {
+        set(this.filters, [userId, "richFilters"], filters);
+      });
+
+      this.rootIssueStore.profileIssues.fetchIssuesWithExistingPagination(workspaceSlug, userId, "mutation");
+      this.handleIssuesLocalFilters.set(
+        EIssuesStoreType.PROFILE,
+        EIssueFilterType.FILTERS,
+        workspaceSlug,
+        userId,
+        undefined,
+        {
+          rich_filters: filters,
+        }
+      );
+    } catch (error) {
+      console.log("error while updating rich filters", error);
+      throw error;
+    }
+  };
+
+  updateFilters: IProfileIssuesFilter["updateFilters"] = async (workspaceSlug, _projectId, type, filters, userId) => {
+    try {
+      if (isEmpty(this.filters) || isEmpty(this.filters[userId])) return;
+
+      const _filters = {
+        richFilters: this.filters[userId].richFilters,
+        displayFilters: this.filters[userId].displayFilters as IIssueDisplayFilterOptions,
+        displayProperties: this.filters[userId].displayProperties as IIssueDisplayProperties,
+        kanbanFilters: this.filters[userId].kanbanFilters as TIssueKanbanFilters,
+      };
+
+      switch (type) {
+        case EIssueFilterType.DISPLAY_FILTERS: {
+          const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
+          _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
+
+          // set sub_group_by to null if group_by is set to null
+          if (_filters.displayFilters.group_by === null) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+          if (
+            _filters.displayFilters.layout === "kanban" &&
+            _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+          ) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set group_by to priority if layout is switched to kanban and group_by is null
+          if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null) {
+            _filters.displayFilters.group_by = "priority";
+            updatedDisplayFilters.group_by = "priority";
+          }
+
+          runInAction(() => {
+            Object.keys(updatedDisplayFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [userId, "displayFilters", _key],
+                updatedDisplayFilters[_key as keyof IIssueDisplayFilterOptions]
+              );
+            });
+          });
+
+          this.rootIssueStore.profileIssues.fetchIssuesWithExistingPagination(workspaceSlug, userId, "mutation");
+
+          this.handleIssuesLocalFilters.set(EIssuesStoreType.PROFILE, type, workspaceSlug, userId, undefined, {
+            display_filters: _filters.displayFilters,
+          });
+
+          break;
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
+          const updatedDisplayProperties = filters as IIssueDisplayProperties;
+          _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
+
+          runInAction(() => {
+            Object.keys(updatedDisplayProperties).forEach((_key) => {
+              set(
+                this.filters,
+                [userId, "displayProperties", _key],
+                updatedDisplayProperties[_key as keyof IIssueDisplayProperties]
+              );
+            });
+          });
+
+          this.handleIssuesLocalFilters.set(EIssuesStoreType.PROFILE, type, workspaceSlug, userId, undefined, {
+            display_properties: _filters.displayProperties,
+          });
+          break;
+        }
+
+        case EIssueFilterType.KANBAN_FILTERS: {
+          const updatedKanbanFilters = filters as TIssueKanbanFilters;
+          _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
+
+          const currentUserId = this.rootIssueStore.currentUserId;
+          if (currentUserId)
+            this.handleIssuesLocalFilters.set(EIssuesStoreType.PROFILE, type, workspaceSlug, userId, undefined, {
+              kanban_filters: _filters.kanbanFilters,
+            });
+
+          runInAction(() => {
+            Object.keys(updatedKanbanFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [userId, "kanbanFilters", _key],
+                updatedKanbanFilters[_key as keyof TIssueKanbanFilters]
+              );
+            });
+          });
+
+          break;
+        }
+        default:
+          break;
+      }
+    } catch (error) {
+      if (userId) this.fetchFilters(workspaceSlug, userId);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/profile/index.ts b/apps/web/core/store/issue/profile/index.ts
new file mode 100644
index 0000000..a21a791
--- /dev/null
+++ b/apps/web/core/store/issue/profile/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/apps/web/core/store/issue/profile/issue.store.ts b/apps/web/core/store/issue/profile/issue.store.ts
new file mode 100644
index 0000000..046824e
--- /dev/null
+++ b/apps/web/core/store/issue/profile/issue.store.ts
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
+// base class
+import type {
+  TIssue,
+  TLoader,
+  IssuePaginationOptions,
+  TIssuesResponse,
+  ViewFlags,
+  TBulkOperationsPayload,
+  TProfileViews,
+} from "@plane/types";
+import { UserService } from "@/services/user.service";
+
+// services
+// types
+import type { IBaseIssuesStore } from "../helpers/base-issues.store";
+import { BaseIssuesStore } from "../helpers/base-issues.store";
+import type { IIssueRootStore } from "../root.store";
+import type { IProfileIssuesFilter } from "./filter.store";
+
+export interface IProfileIssues extends IBaseIssuesStore {
+  // observable
+  currentView: TProfileViews;
+  viewFlags: ViewFlags;
+  // actions
+  setViewId: (viewId: TProfileViews) => void;
+  // action
+  fetchIssues: (
+    workspaceSlug: string,
+    userId: string,
+    loadType: TLoader,
+    option: IssuePaginationOptions,
+    view: TProfileViews,
+    isExistingPaginationOptions?: boolean
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchIssuesWithExistingPagination: (
+    workspaceSlug: string,
+    userId: string,
+    loadType: TLoader
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchNextIssues: (
+    workspaceSlug: string,
+    userId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => Promise<TIssuesResponse | undefined>;
+
+  createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
+  updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  archiveBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  bulkUpdateProperties: (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => Promise<void>;
+
+  quickAddIssue: undefined;
+}
+
+export class ProfileIssues extends BaseIssuesStore implements IProfileIssues {
+  currentView: TProfileViews = "assigned";
+  // filter store
+  issueFilterStore: IProfileIssuesFilter;
+  // services
+  userService;
+
+  constructor(_rootStore: IIssueRootStore, issueFilterStore: IProfileIssuesFilter) {
+    super(_rootStore, issueFilterStore);
+    makeObservable(this, {
+      // observable
+      currentView: observable.ref,
+      // computed
+      viewFlags: computed,
+      // action
+      setViewId: action.bound,
+      fetchIssues: action,
+      fetchNextIssues: action,
+      fetchIssuesWithExistingPagination: action,
+    });
+    // filter store
+    this.issueFilterStore = issueFilterStore;
+    // services
+    this.userService = new UserService();
+  }
+
+  get viewFlags() {
+    if (this.currentView === "subscribed")
+      return {
+        enableQuickAdd: false,
+        enableIssueCreation: false,
+        enableInlineEditing: true,
+      };
+    return {
+      enableQuickAdd: false,
+      enableIssueCreation: true,
+      enableInlineEditing: true,
+    };
+  }
+
+  setViewId(viewId: TProfileViews) {
+    this.currentView = viewId;
+  }
+
+  fetchParentStats = () => {};
+
+  /** */
+  updateParentStats = () => {};
+
+  /**
+   * This method is called to fetch the first issues of pagination
+   * @param workspaceSlug
+   * @param userId
+   * @param loadType
+   * @param options
+   * @param view
+   * @returns
+   */
+  fetchIssues: IProfileIssues["fetchIssues"] = async (
+    workspaceSlug: string,
+    userId: string,
+    loadType: TLoader,
+    options: IssuePaginationOptions,
+    view: TProfileViews,
+    isExistingPaginationOptions: boolean = false
+  ) => {
+    try {
+      // set loader and clear store
+      runInAction(() => {
+        this.setLoader(loadType);
+      });
+      this.clear(!isExistingPaginationOptions);
+
+      // set ViewId
+      this.setViewId(view);
+
+      // get params from pagination options
+      let params = this.issueFilterStore?.getFilterParams(options, userId, undefined, undefined, undefined);
+      params = {
+        ...params,
+        assignees: undefined,
+        created_by: undefined,
+        subscriber: undefined,
+      };
+      // modify params based on view
+      if (this.currentView === "assigned") params = { ...params, assignees: userId };
+      else if (this.currentView === "created") params = { ...params, created_by: userId };
+      else if (this.currentView === "subscribed") params = { ...params, subscriber: userId };
+
+      // call the fetch issues API with the params
+      const response = await this.userService.getUserProfileIssues(workspaceSlug, userId, params, {
+        signal: this.controller.signal,
+      });
+
+      // after fetching issues, call the base method to process the response further
+      this.onfetchIssues(response, options, workspaceSlug, undefined, undefined, !isExistingPaginationOptions);
+      return response;
+    } catch (error) {
+      // set loader to undefined if errored out
+      this.setLoader(undefined);
+      throw error;
+    }
+  };
+
+  /**
+   * This method is called subsequent pages of pagination
+   * if groupId/subgroupId is provided, only that specific group's next page is fetched
+   * else all the groups' next page is fetched
+   * @param workspaceSlug
+   * @param userId
+   * @param groupId
+   * @param subGroupId
+   * @returns
+   */
+  fetchNextIssues = async (workspaceSlug: string, userId: string, groupId?: string, subGroupId?: string) => {
+    const cursorObject = this.getPaginationData(groupId, subGroupId);
+    // if there are no pagination options and the next page results do not exist the return
+    if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
+    try {
+      // set Loader
+      this.setLoader("pagination", groupId, subGroupId);
+
+      // get params from stored pagination options
+      let params = this.issueFilterStore?.getFilterParams(
+        this.paginationOptions,
+        userId,
+        this.getNextCursor(groupId, subGroupId),
+        groupId,
+        subGroupId
+      );
+      params = {
+        ...params,
+        assignees: undefined,
+        created_by: undefined,
+        subscriber: undefined,
+      };
+      if (this.currentView === "assigned") params = { ...params, assignees: userId };
+      else if (this.currentView === "created") params = { ...params, created_by: userId };
+      else if (this.currentView === "subscribed") params = { ...params, subscriber: userId };
+
+      // call the fetch issues API with the params for next page in issues
+      const response = await this.userService.getUserProfileIssues(workspaceSlug, userId, params);
+
+      // after the next page of issues are fetched, call the base method to process the response
+      this.onfetchNexIssues(response, groupId, subGroupId);
+      return response;
+    } catch (error) {
+      // set Loader as undefined if errored out
+      this.setLoader(undefined, groupId, subGroupId);
+      throw error;
+    }
+  };
+
+  /**
+   * This Method exists to fetch the first page of the issues with the existing stored pagination
+   * This is useful for refetching when filters, groupBy, orderBy etc changes
+   * @param workspaceSlug
+   * @param userId
+   * @param loadType
+   * @returns
+   */
+  fetchIssuesWithExistingPagination = async (workspaceSlug: string, userId: string, loadType: TLoader) => {
+    if (!this.paginationOptions || !this.currentView) return;
+    return await this.fetchIssues(workspaceSlug, userId, loadType, this.paginationOptions, this.currentView, true);
+  };
+
+  // Using aliased names as they cannot be overridden in other stores
+  archiveBulkIssues = this.bulkArchiveIssues;
+  updateIssue = this.issueUpdate;
+  archiveIssue = this.issueArchive;
+
+  // Setting them as undefined as they can not performed on profile issues
+  quickAddIssue = undefined;
+}
diff --git a/apps/web/core/store/issue/project-views/filter.store.ts b/apps/web/core/store/issue/project-views/filter.store.ts
new file mode 100644
index 0000000..49c20d4
--- /dev/null
+++ b/apps/web/core/store/issue/project-views/filter.store.ts
@@ -0,0 +1,344 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// base class
+import { computedFn } from "mobx-utils";
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EIssueFilterType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueKanbanFilters,
+  IIssueFilters,
+  TIssueParams,
+  IssuePaginationOptions,
+  IProjectView,
+  TWorkItemFilterExpression,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { handleIssueQueryParamsByLayout } from "@plane/utils";
+// services
+import { ViewService } from "@/services/view.service";
+import type { IBaseIssueFilterStore } from "../helpers/issue-filter-helper.store";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import type { IIssueRootStore } from "../root.store";
+// constants
+
+export interface IProjectViewIssuesFilter extends IBaseIssueFilterStore {
+  //helper actions
+  getFilterParams: (
+    options: IssuePaginationOptions,
+    viewId: string,
+    cursor: string | undefined,
+    groupId: string | undefined,
+    subGroupId: string | undefined
+  ) => Partial<Record<TIssueParams, string | boolean>>;
+  getIssueFilters(viewId: string): IIssueFilters | undefined;
+  // helper actions
+  mutateFilters: (workspaceSlug: string, viewId: string, viewDetails: IProjectView) => void;
+  // action
+  fetchFilters: (workspaceSlug: string, projectId: string, viewId: string) => Promise<void>;
+  updateFilterExpression: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    filters: TWorkItemFilterExpression
+  ) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate,
+    viewId: string
+  ) => Promise<void>;
+  resetFilters: (workspaceSlug: string, viewId: string) => void;
+}
+
+export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements IProjectViewIssuesFilter {
+  // observables
+  filters: { [viewId: string]: IIssueFilters } = {};
+  // root store
+  rootIssueStore;
+  // services
+  issueFilterService;
+
+  constructor(_rootStore: IIssueRootStore) {
+    super();
+    makeObservable(this, {
+      // observables
+      filters: observable,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // actions
+      fetchFilters: action,
+      updateFilters: action,
+      resetFilters: action,
+    });
+    // root store
+    this.rootIssueStore = _rootStore;
+    // services
+    this.issueFilterService = new ViewService();
+  }
+
+  get issueFilters() {
+    const viewId = this.rootIssueStore.viewId;
+    if (!viewId) return undefined;
+
+    return this.getIssueFilters(viewId);
+  }
+
+  get appliedFilters() {
+    const viewId = this.rootIssueStore.viewId;
+    if (!viewId) return undefined;
+
+    return this.getAppliedFilters(viewId);
+  }
+
+  getIssueFilters(viewId: string) {
+    const displayFilters = this.filters[viewId] || undefined;
+    if (isEmpty(displayFilters)) return undefined;
+
+    const _filters: IIssueFilters = this.computedIssueFilters(displayFilters);
+
+    return _filters;
+  }
+
+  getAppliedFilters(viewId: string) {
+    const userFilters = this.getIssueFilters(viewId);
+    if (!userFilters) return undefined;
+
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues");
+    if (!filteredParams) return undefined;
+
+    const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
+      userFilters?.richFilters,
+      userFilters?.displayFilters,
+      filteredParams
+    );
+
+    return filteredRouteParams;
+  }
+
+  getFilterParams = computedFn(
+    (
+      options: IssuePaginationOptions,
+      viewId: string,
+      cursor: string | undefined,
+      groupId: string | undefined,
+      subGroupId: string | undefined
+    ) => {
+      const filterParams = this.getAppliedFilters(viewId);
+
+      const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
+      return paginationParams;
+    }
+  );
+
+  mutateFilters: IProjectViewIssuesFilter["mutateFilters"] = action((workspaceSlug, viewId, viewDetails) => {
+    const richFilters: TWorkItemFilterExpression = viewDetails?.rich_filters;
+    const displayFilters: IIssueDisplayFilterOptions = this.computedDisplayFilters(viewDetails?.display_filters);
+    const displayProperties: IIssueDisplayProperties = this.computedDisplayProperties(viewDetails?.display_properties);
+
+    // fetching the kanban toggle helpers in the local storage
+    const kanbanFilters = {
+      group_by: [],
+      sub_group_by: [],
+    };
+    const currentUserId = this.rootIssueStore.currentUserId;
+    if (currentUserId) {
+      const _kanbanFilters = this.handleIssuesLocalFilters.get(
+        EIssuesStoreType.PROJECT_VIEW,
+        workspaceSlug,
+        viewId,
+        currentUserId
+      );
+      kanbanFilters.group_by = _kanbanFilters?.kanban_filters?.group_by || [];
+      kanbanFilters.sub_group_by = _kanbanFilters?.kanban_filters?.sub_group_by || [];
+    }
+
+    runInAction(() => {
+      set(this.filters, [viewId, "richFilters"], richFilters);
+      set(this.filters, [viewId, "displayFilters"], displayFilters);
+      set(this.filters, [viewId, "displayProperties"], displayProperties);
+      set(this.filters, [viewId, "kanbanFilters"], kanbanFilters);
+    });
+  });
+
+  fetchFilters = async (workspaceSlug: string, projectId: string, viewId: string) => {
+    try {
+      const viewDetails = await this.issueFilterService.getViewDetails(workspaceSlug, projectId, viewId);
+      this.mutateFilters(workspaceSlug, viewId, viewDetails);
+    } catch (error) {
+      console.log("error while fetching project view filters", error);
+      throw error;
+    }
+  };
+
+  /**
+   * NOTE: This method is designed as a fallback function for the work item filter store.
+   * Only use this method directly when initializing filter instances.
+   * For regular filter updates, use this method as a fallback function for the work item filter store methods instead.
+   */
+  updateFilterExpression: IProjectViewIssuesFilter["updateFilterExpression"] = async (
+    workspaceSlug,
+    projectId,
+    viewId,
+    filters
+  ) => {
+    try {
+      runInAction(() => {
+        set(this.filters, [viewId, "richFilters"], filters);
+      });
+
+      this.rootIssueStore.projectViewIssues.fetchIssuesWithExistingPagination(
+        workspaceSlug,
+        projectId,
+        viewId,
+        "mutation"
+      );
+    } catch (error) {
+      console.log("error while updating rich filters", error);
+      throw error;
+    }
+  };
+
+  updateFilters: IProjectViewIssuesFilter["updateFilters"] = async (
+    workspaceSlug,
+    projectId,
+    type,
+    filters,
+    viewId
+  ) => {
+    try {
+      if (isEmpty(this.filters) || isEmpty(this.filters[viewId])) return;
+
+      const _filters = {
+        richFilters: this.filters[viewId].richFilters,
+        displayFilters: this.filters[viewId].displayFilters as IIssueDisplayFilterOptions,
+        displayProperties: this.filters[viewId].displayProperties as IIssueDisplayProperties,
+        kanbanFilters: this.filters[viewId].kanbanFilters as TIssueKanbanFilters,
+      };
+
+      switch (type) {
+        case EIssueFilterType.DISPLAY_FILTERS: {
+          const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
+          _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
+
+          // set sub_group_by to null if group_by is set to null
+          if (_filters.displayFilters.group_by === null) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+          if (
+            _filters.displayFilters.layout === "kanban" &&
+            _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+          ) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set group_by to state if layout is switched to kanban and group_by is null
+          if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null) {
+            _filters.displayFilters.group_by = "state";
+            updatedDisplayFilters.group_by = "state";
+          }
+
+          runInAction(() => {
+            Object.keys(updatedDisplayFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [viewId, "displayFilters", _key],
+                updatedDisplayFilters[_key as keyof IIssueDisplayFilterOptions]
+              );
+            });
+          });
+
+          if (this.getShouldClearIssues(updatedDisplayFilters)) {
+            this.rootIssueStore.projectIssues.clear(true); // clear issues for local store when some filters like layout changes
+          }
+
+          if (this.getShouldReFetchIssues(updatedDisplayFilters)) {
+            this.rootIssueStore.projectViewIssues.fetchIssuesWithExistingPagination(
+              workspaceSlug,
+              projectId,
+              viewId,
+              "mutation"
+            );
+          }
+
+          break;
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
+          const updatedDisplayProperties = filters as IIssueDisplayProperties;
+          _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
+
+          runInAction(() => {
+            Object.keys(updatedDisplayProperties).forEach((_key) => {
+              set(
+                this.filters,
+                [viewId, "displayProperties", _key],
+                updatedDisplayProperties[_key as keyof IIssueDisplayProperties]
+              );
+            });
+          });
+
+          break;
+        }
+        case EIssueFilterType.KANBAN_FILTERS: {
+          const updatedKanbanFilters = filters as TIssueKanbanFilters;
+          _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
+
+          const currentUserId = this.rootIssueStore.currentUserId;
+          if (currentUserId)
+            this.handleIssuesLocalFilters.set(
+              EIssuesStoreType.PROJECT_VIEW,
+              type,
+              workspaceSlug,
+              viewId,
+              currentUserId,
+              {
+                kanban_filters: _filters.kanbanFilters,
+              }
+            );
+
+          runInAction(() => {
+            Object.keys(updatedKanbanFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [viewId, "kanbanFilters", _key],
+                updatedKanbanFilters[_key as keyof TIssueKanbanFilters]
+              );
+            });
+          });
+
+          break;
+        }
+        default:
+          break;
+      }
+    } catch (error) {
+      if (viewId) this.fetchFilters(workspaceSlug, projectId, viewId);
+      throw error;
+    }
+  };
+
+  /**
+   * @description resets the filters for a project view
+   * @param workspaceSlug
+   * @param viewId
+   */
+  resetFilters: IProjectViewIssuesFilter["resetFilters"] = action((workspaceSlug, viewId) => {
+    const viewDetails = this.rootIssueStore.rootStore.projectView.getViewById(viewId);
+    if (!viewDetails) return;
+    this.mutateFilters(workspaceSlug, viewId, viewDetails);
+  });
+}
diff --git a/apps/web/core/store/issue/project-views/index.ts b/apps/web/core/store/issue/project-views/index.ts
new file mode 100644
index 0000000..a21a791
--- /dev/null
+++ b/apps/web/core/store/issue/project-views/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/apps/web/core/store/issue/project-views/issue.store.ts b/apps/web/core/store/issue/project-views/issue.store.ts
new file mode 100644
index 0000000..8dd1575
--- /dev/null
+++ b/apps/web/core/store/issue/project-views/issue.store.ts
@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, runInAction } from "mobx";
+// base class
+import type {
+  TIssue,
+  TLoader,
+  ViewFlags,
+  IssuePaginationOptions,
+  TIssuesResponse,
+  TBulkOperationsPayload,
+} from "@plane/types";
+// services
+// types
+import type { IBaseIssuesStore } from "../helpers/base-issues.store";
+import { BaseIssuesStore } from "../helpers/base-issues.store";
+import type { IIssueRootStore } from "../root.store";
+import type { IProjectViewIssuesFilter } from "./filter.store";
+
+export interface IProjectViewIssues extends IBaseIssuesStore {
+  viewFlags: ViewFlags;
+  // actions
+  fetchIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    loadType: TLoader,
+    options: IssuePaginationOptions
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchIssuesWithExistingPagination: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    loadType: TLoader
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchNextIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => Promise<TIssuesResponse | undefined>;
+
+  createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
+  updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  quickAddIssue: (workspaceSlug: string, projectId: string, data: TIssue) => Promise<TIssue | undefined>;
+  removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  archiveBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  bulkUpdateProperties: (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => Promise<void>;
+}
+
+export class ProjectViewIssues extends BaseIssuesStore implements IProjectViewIssues {
+  viewFlags = {
+    enableQuickAdd: true,
+    enableIssueCreation: true,
+    enableInlineEditing: true,
+  };
+  //filter store
+  issueFilterStore: IProjectViewIssuesFilter;
+
+  constructor(_rootStore: IIssueRootStore, issueFilterStore: IProjectViewIssuesFilter) {
+    super(_rootStore, issueFilterStore);
+    makeObservable(this, {
+      // action
+      fetchIssues: action,
+      fetchNextIssues: action,
+      fetchIssuesWithExistingPagination: action,
+    });
+    //filter store
+    this.issueFilterStore = issueFilterStore;
+  }
+
+  fetchParentStats = async () => {};
+
+  /** */
+  updateParentStats = () => {};
+
+  /**
+   * This method is called to fetch the first issues of pagination
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @param options
+   * @returns
+   */
+  fetchIssues = async (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    loadType: TLoader,
+    options: IssuePaginationOptions,
+    isExistingPaginationOptions: boolean = false
+  ) => {
+    try {
+      // set loader and clear store
+      runInAction(() => {
+        this.setLoader(loadType);
+        this.clear(!isExistingPaginationOptions); // clear while fetching from server.
+      });
+
+      // get params from pagination options
+      const params = this.issueFilterStore?.getFilterParams(options, viewId, undefined, undefined, undefined);
+      // call the fetch issues API with the params
+      const response = await this.issueService.getIssues(workspaceSlug, projectId, params, {
+        signal: this.controller.signal,
+      });
+
+      // after fetching issues, call the base method to process the response further
+      this.onfetchIssues(response, options, workspaceSlug, projectId, viewId, !isExistingPaginationOptions);
+      return response;
+    } catch (error) {
+      // set loader to undefined if errored out
+      this.setLoader(undefined);
+      throw error;
+    }
+  };
+
+  /**
+   * This method is called subsequent pages of pagination
+   * if groupId/subgroupId is provided, only that specific group's next page is fetched
+   * else all the groups' next page is fetched
+   * @param workspaceSlug
+   * @param projectId
+   * @param groupId
+   * @param subGroupId
+   * @returns
+   */
+  fetchNextIssues = async (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => {
+    const cursorObject = this.getPaginationData(groupId, subGroupId);
+    // if there are no pagination options and the next page results do not exist the return
+    if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
+    try {
+      // set Loader
+      this.setLoader("pagination", groupId, subGroupId);
+
+      // get params from stored pagination options
+      const params = this.issueFilterStore?.getFilterParams(
+        this.paginationOptions,
+        viewId,
+        this.getNextCursor(groupId, subGroupId),
+        groupId,
+        subGroupId
+      );
+      // call the fetch issues API with the params for next page in issues
+      const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
+
+      // after the next page of issues are fetched, call the base method to process the response
+      this.onfetchNexIssues(response, groupId, subGroupId);
+      return response;
+    } catch (error) {
+      // set Loader as undefined if errored out
+      this.setLoader(undefined, groupId, subGroupId);
+      throw error;
+    }
+  };
+
+  /**
+   * This Method exists to fetch the first page of the issues with the existing stored pagination
+   * This is useful for refetching when filters, groupBy, orderBy etc changes
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @returns
+   */
+  fetchIssuesWithExistingPagination = async (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    loadType: TLoader
+  ) => {
+    if (!this.paginationOptions) return;
+    return await this.fetchIssues(workspaceSlug, projectId, viewId, loadType, this.paginationOptions, true);
+  };
+
+  // Using aliased names as they cannot be overridden in other stores
+  archiveBulkIssues = this.bulkArchiveIssues;
+  quickAddIssue = this.issueQuickAdd;
+  updateIssue = this.issueUpdate;
+  archiveIssue = this.issueArchive;
+}
diff --git a/apps/web/core/store/issue/project/filter.store.ts b/apps/web/core/store/issue/project/filter.store.ts
new file mode 100644
index 0000000..657eee4
--- /dev/null
+++ b/apps/web/core/store/issue/project/filter.store.ts
@@ -0,0 +1,303 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// base class
+import { computedFn } from "mobx-utils";
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EIssueFilterType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueKanbanFilters,
+  IIssueFilters,
+  TIssueParams,
+  IssuePaginationOptions,
+  TWorkItemFilterExpression,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { handleIssueQueryParamsByLayout } from "@plane/utils";
+import type { IBaseIssueFilterStore } from "../helpers/issue-filter-helper.store";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// helpers
+// types
+import type { IIssueRootStore } from "../root.store";
+import { ProjectService } from "@/services/project";
+// constants
+// services
+
+export interface IProjectIssuesFilter extends IBaseIssueFilterStore {
+  //helper actions
+  getFilterParams: (
+    options: IssuePaginationOptions,
+    projectId: string,
+    cursor: string | undefined,
+    groupId: string | undefined,
+    subGroupId: string | undefined
+  ) => Partial<Record<TIssueParams, string | boolean>>;
+  getIssueFilters(projectId: string): IIssueFilters | undefined;
+  // action
+  fetchFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
+  updateFilterExpression: (
+    workspaceSlug: string,
+    projectId: string,
+    filters: TWorkItemFilterExpression
+  ) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate
+  ) => Promise<void>;
+}
+
+export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProjectIssuesFilter {
+  // observables
+  filters: { [projectId: string]: IIssueFilters } = {};
+  // root store
+  rootIssueStore: IIssueRootStore;
+  // services
+  projectService;
+
+  constructor(_rootStore: IIssueRootStore) {
+    super();
+    makeObservable(this, {
+      // observables
+      filters: observable,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // actions
+      fetchFilters: action,
+      updateFilterExpression: action,
+      updateFilters: action,
+    });
+    // root store
+    this.rootIssueStore = _rootStore;
+    // services
+    this.projectService = new ProjectService();
+  }
+
+  get issueFilters() {
+    const projectId = this.rootIssueStore.projectId;
+    if (!projectId) return undefined;
+
+    return this.getIssueFilters(projectId);
+  }
+
+  get appliedFilters() {
+    const projectId = this.rootIssueStore.projectId;
+    if (!projectId) return undefined;
+
+    return this.getAppliedFilters(projectId);
+  }
+
+  getIssueFilters(projectId: string) {
+    const displayFilters = this.filters[projectId] || undefined;
+    if (isEmpty(displayFilters)) return undefined;
+
+    return this.computedIssueFilters(displayFilters);
+  }
+
+  getAppliedFilters(projectId: string) {
+    const userFilters = this.getIssueFilters(projectId);
+    if (!userFilters) return undefined;
+
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues");
+    if (!filteredParams) return undefined;
+
+    const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
+      userFilters?.richFilters,
+      userFilters?.displayFilters,
+      filteredParams
+    );
+
+    return filteredRouteParams;
+  }
+
+  getFilterParams = computedFn(
+    (
+      options: IssuePaginationOptions,
+      projectId: string,
+      cursor: string | undefined,
+      groupId: string | undefined,
+      subGroupId: string | undefined
+    ) => {
+      const filterParams = this.getAppliedFilters(projectId);
+      const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
+      return paginationParams;
+    }
+  );
+
+  fetchFilters = async (workspaceSlug: string, projectId: string) => {
+    const _filters = await this.projectService.getProjectUserProperties(workspaceSlug, projectId);
+
+    const richFilters = _filters?.rich_filters;
+    const displayFilters = this.computedDisplayFilters(_filters?.display_filters);
+    const displayProperties = this.computedDisplayProperties(_filters?.display_properties);
+
+    // fetching the kanban toggle helpers in the local storage
+    const kanbanFilters = {
+      group_by: [],
+      sub_group_by: [],
+    };
+    const currentUserId = this.rootIssueStore.currentUserId;
+    if (currentUserId) {
+      const _kanbanFilters = this.handleIssuesLocalFilters.get(
+        EIssuesStoreType.PROJECT,
+        workspaceSlug,
+        projectId,
+        currentUserId
+      );
+      kanbanFilters.group_by = _kanbanFilters?.kanban_filters?.group_by || [];
+      kanbanFilters.sub_group_by = _kanbanFilters?.kanban_filters?.sub_group_by || [];
+    }
+
+    runInAction(() => {
+      set(this.filters, [projectId, "richFilters"], richFilters);
+      set(this.filters, [projectId, "displayFilters"], displayFilters);
+      set(this.filters, [projectId, "displayProperties"], displayProperties);
+      set(this.filters, [projectId, "kanbanFilters"], kanbanFilters);
+    });
+  };
+
+  /**
+   * NOTE: This method is designed as a fallback function for the work item filter store.
+   * Only use this method directly when initializing filter instances.
+   * For regular filter updates, use this method as a fallback function for the work item filter store methods instead.
+   */
+  updateFilterExpression: IProjectIssuesFilter["updateFilterExpression"] = async (
+    workspaceSlug,
+    projectId,
+    filters
+  ) => {
+    try {
+      runInAction(() => {
+        set(this.filters, [projectId, "richFilters"], filters);
+      });
+
+      this.rootIssueStore.projectIssues.fetchIssuesWithExistingPagination(workspaceSlug, projectId, "mutation");
+      await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, {
+        rich_filters: filters,
+      });
+    } catch (error) {
+      console.log("error while updating rich filters", error);
+      throw error;
+    }
+  };
+
+  updateFilters: IProjectIssuesFilter["updateFilters"] = async (workspaceSlug, projectId, type, filters) => {
+    try {
+      if (isEmpty(this.filters) || isEmpty(this.filters[projectId])) return;
+
+      const _filters = {
+        richFilters: this.filters[projectId].richFilters,
+        displayFilters: this.filters[projectId].displayFilters as IIssueDisplayFilterOptions,
+        displayProperties: this.filters[projectId].displayProperties as IIssueDisplayProperties,
+        kanbanFilters: this.filters[projectId].kanbanFilters as TIssueKanbanFilters,
+      };
+
+      switch (type) {
+        case EIssueFilterType.DISPLAY_FILTERS: {
+          const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
+          _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
+
+          // set sub_group_by to null if group_by is set to null
+          if (_filters.displayFilters.group_by === null) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+          if (
+            _filters.displayFilters.layout === "kanban" &&
+            _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+          ) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set group_by to state if layout is switched to kanban and group_by is null
+          if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null) {
+            _filters.displayFilters.group_by = "state";
+            updatedDisplayFilters.group_by = "state";
+          }
+
+          runInAction(() => {
+            Object.keys(updatedDisplayFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [projectId, "displayFilters", _key],
+                updatedDisplayFilters[_key as keyof IIssueDisplayFilterOptions]
+              );
+            });
+          });
+
+          if (this.getShouldClearIssues(updatedDisplayFilters)) {
+            this.rootIssueStore.projectIssues.clear(true); // clear issues for local store when some filters like layout changes
+          }
+
+          if (this.getShouldReFetchIssues(updatedDisplayFilters)) {
+            this.rootIssueStore.projectIssues.fetchIssuesWithExistingPagination(workspaceSlug, projectId, "mutation");
+          }
+
+          await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, {
+            display_filters: _filters.displayFilters,
+          });
+
+          break;
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
+          const updatedDisplayProperties = filters as IIssueDisplayProperties;
+          _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
+
+          runInAction(() => {
+            Object.keys(updatedDisplayProperties).forEach((_key) => {
+              set(
+                this.filters,
+                [projectId, "displayProperties", _key],
+                updatedDisplayProperties[_key as keyof IIssueDisplayProperties]
+              );
+            });
+          });
+
+          await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, {
+            display_properties: _filters.displayProperties,
+          });
+          break;
+        }
+
+        case EIssueFilterType.KANBAN_FILTERS: {
+          const updatedKanbanFilters = filters as TIssueKanbanFilters;
+          _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
+
+          const currentUserId = this.rootIssueStore.currentUserId;
+          if (currentUserId)
+            this.handleIssuesLocalFilters.set(EIssuesStoreType.PROJECT, type, workspaceSlug, projectId, currentUserId, {
+              kanban_filters: _filters.kanbanFilters,
+            });
+
+          runInAction(() => {
+            Object.keys(updatedKanbanFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [projectId, "kanbanFilters", _key],
+                updatedKanbanFilters[_key as keyof TIssueKanbanFilters]
+              );
+            });
+          });
+
+          break;
+        }
+        default:
+          break;
+      }
+    } catch (error) {
+      this.fetchFilters(workspaceSlug, projectId);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/project/index.ts b/apps/web/core/store/issue/project/index.ts
new file mode 100644
index 0000000..a21a791
--- /dev/null
+++ b/apps/web/core/store/issue/project/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/apps/web/core/store/issue/project/issue.store.ts b/apps/web/core/store/issue/project/issue.store.ts
new file mode 100644
index 0000000..234e018
--- /dev/null
+++ b/apps/web/core/store/issue/project/issue.store.ts
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, runInAction } from "mobx";
+// types
+import type {
+  TIssue,
+  TLoader,
+  ViewFlags,
+  IssuePaginationOptions,
+  TIssuesResponse,
+  TBulkOperationsPayload,
+} from "@plane/types";
+// helpers
+// base class
+import type { IBaseIssuesStore } from "../helpers/base-issues.store";
+import { BaseIssuesStore } from "../helpers/base-issues.store";
+// services
+import type { IIssueRootStore } from "../root.store";
+import type { IProjectIssuesFilter } from "./filter.store";
+
+export interface IProjectIssues extends IBaseIssuesStore {
+  viewFlags: ViewFlags;
+  // action
+  fetchIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader,
+    option: IssuePaginationOptions
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchIssuesWithExistingPagination: (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchNextIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => Promise<TIssuesResponse | undefined>;
+
+  createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
+  updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  quickAddIssue: (workspaceSlug: string, projectId: string, data: TIssue) => Promise<TIssue | undefined>;
+  removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  archiveBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  bulkUpdateProperties: (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => Promise<void>;
+}
+
+export class ProjectIssues extends BaseIssuesStore implements IProjectIssues {
+  viewFlags = {
+    enableQuickAdd: true,
+    enableIssueCreation: true,
+    enableInlineEditing: true,
+  };
+  router;
+
+  // filter store
+  issueFilterStore: IProjectIssuesFilter;
+
+  constructor(_rootStore: IIssueRootStore, issueFilterStore: IProjectIssuesFilter) {
+    super(_rootStore, issueFilterStore);
+    makeObservable(this, {
+      fetchIssues: action,
+      fetchNextIssues: action,
+      fetchIssuesWithExistingPagination: action,
+
+      quickAddIssue: action,
+    });
+    // filter store
+    this.issueFilterStore = issueFilterStore;
+    this.router = _rootStore.rootStore.router;
+  }
+
+  /**
+   * Fetches the project details
+   * @param workspaceSlug
+   * @param projectId
+   */
+  fetchParentStats = async (workspaceSlug: string, projectId?: string) => {
+    projectId && this.rootIssueStore.rootStore.projectRoot.project.fetchProjectDetails(workspaceSlug, projectId);
+  };
+
+  /** */
+  updateParentStats = () => {};
+
+  /**
+   * This method is called to fetch the first issues of pagination
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @param options
+   * @returns
+   */
+  fetchIssues = async (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader = "init-loader",
+    options: IssuePaginationOptions,
+    isExistingPaginationOptions: boolean = false
+  ) => {
+    try {
+      // set loader and clear store
+      runInAction(() => {
+        this.setLoader(loadType);
+        this.clear(!isExistingPaginationOptions); // clear while fetching from server.
+      });
+
+      // get params from pagination options
+      const params = this.issueFilterStore?.getFilterParams(options, projectId, undefined, undefined, undefined);
+      // call the fetch issues API with the params
+      const response = await this.issueService.getIssues(workspaceSlug, projectId, params, {
+        signal: this.controller.signal,
+      });
+
+      // after fetching issues, call the base method to process the response further
+      this.onfetchIssues(response, options, workspaceSlug, projectId, undefined, !isExistingPaginationOptions);
+      return response;
+    } catch (error) {
+      // set loader to undefined if errored out
+      this.setLoader(undefined);
+      throw error;
+    }
+  };
+
+  /**
+   * This method is called subsequent pages of pagination
+   * if groupId/subgroupId is provided, only that specific group's next page is fetched
+   * else all the groups' next page is fetched
+   * @param workspaceSlug
+   * @param projectId
+   * @param groupId
+   * @param subGroupId
+   * @returns
+   */
+  fetchNextIssues = async (workspaceSlug: string, projectId: string, groupId?: string, subGroupId?: string) => {
+    const cursorObject = this.getPaginationData(groupId, subGroupId);
+    // if there are no pagination options and the next page results do not exist the return
+    if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
+    try {
+      // set Loader
+      this.setLoader("pagination", groupId, subGroupId);
+
+      // get params from stored pagination options
+      const params = this.issueFilterStore?.getFilterParams(
+        this.paginationOptions,
+        projectId,
+        this.getNextCursor(groupId, subGroupId),
+        groupId,
+        subGroupId
+      );
+      // call the fetch issues API with the params for next page in issues
+      const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
+
+      // after the next page of issues are fetched, call the base method to process the response
+      this.onfetchNexIssues(response, groupId, subGroupId);
+      return response;
+    } catch (error) {
+      // set Loader as undefined if errored out
+      this.setLoader(undefined, groupId, subGroupId);
+      throw error;
+    }
+  };
+
+  /**
+   * This Method exists to fetch the first page of the issues with the existing stored pagination
+   * This is useful for refetching when filters, groupBy, orderBy etc changes
+   * @param workspaceSlug
+   * @param projectId
+   * @param loadType
+   * @returns
+   */
+  fetchIssuesWithExistingPagination = async (
+    workspaceSlug: string,
+    projectId: string,
+    loadType: TLoader = "mutation"
+  ) => {
+    if (!this.paginationOptions) return;
+    return await this.fetchIssues(workspaceSlug, projectId, loadType, this.paginationOptions, true);
+  };
+
+  /**
+   * Override inherited create issue, to update list only if user is on current project
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns
+   */
+  override createIssue = async (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => {
+    const response = await super.createIssue(workspaceSlug, projectId, data, "", projectId === this.router.projectId);
+    return response;
+  };
+
+  // Using aliased names as they cannot be overridden in other stores
+  archiveBulkIssues = this.bulkArchiveIssues;
+  quickAddIssue = this.issueQuickAdd;
+  updateIssue = this.issueUpdate;
+  archiveIssue = this.issueArchive;
+}
diff --git a/apps/web/core/store/issue/root.store.ts b/apps/web/core/store/issue/root.store.ts
new file mode 100644
index 0000000..f0e6ffe
--- /dev/null
+++ b/apps/web/core/store/issue/root.store.ts
@@ -0,0 +1,269 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty } from "lodash-es";
+import { autorun, makeObservable, observable } from "mobx";
+// types
+import type { ICycle, IIssueLabel, IModule, IProject, IState, IUserLite, TIssueServiceType } from "@plane/types";
+import { EIssueServiceType } from "@plane/types";
+// plane web store
+import type { IIssueDetail } from "@/store/issue/issue-details/root.store";
+import { IssueDetail } from "@/store/issue/issue-details/root.store";
+import type { RootStore } from "@/store/root.store";
+import type { IWorkspaceMembership } from "@/store/member/workspace/workspace-member.store";
+// issues data store
+import type { IArchivedIssuesFilter, IArchivedIssues } from "./archived";
+import { ArchivedIssuesFilter, ArchivedIssues } from "./archived";
+import type { ICycleIssuesFilter, ICycleIssues } from "./cycle";
+import { CycleIssuesFilter, CycleIssues } from "./cycle";
+import type { IIssueStore } from "./issue.store";
+import { IssueStore } from "./issue.store";
+import type { ICalendarStore } from "./issue_calendar_view.store";
+import { CalendarStore } from "./issue_calendar_view.store";
+import type { IIssueKanBanViewStore } from "./issue_kanban_view.store";
+import { IssueKanBanViewStore } from "./issue_kanban_view.store";
+import type { IModuleIssuesFilter, IModuleIssues } from "./module";
+import { ModuleIssuesFilter, ModuleIssues } from "./module";
+import type { IProfileIssuesFilter, IProfileIssues } from "./profile";
+import { ProfileIssuesFilter, ProfileIssues } from "./profile";
+import type { IProjectIssuesFilter, IProjectIssues } from "./project";
+import { ProjectIssuesFilter, ProjectIssues } from "./project";
+import type { IProjectViewIssuesFilter, IProjectViewIssues } from "./project-views";
+import { ProjectViewIssuesFilter, ProjectViewIssues } from "./project-views";
+import type { IWorkspaceIssuesFilter } from "./workspace";
+import { WorkspaceIssuesFilter } from "./workspace";
+import type { IWorkspaceIssues } from "./workspace/issue.store";
+import { WorkspaceIssues } from "./workspace/issue.store";
+import type { IWorkspaceDraftIssues, IWorkspaceDraftIssuesFilter } from "./workspace-draft";
+import { WorkspaceDraftIssues, WorkspaceDraftIssuesFilter } from "./workspace-draft";
+
+export interface IIssueRootStore {
+  currentUserId: string | undefined;
+  workspaceSlug: string | undefined;
+  teamspaceId: string | undefined;
+  projectId: string | undefined;
+  cycleId: string | undefined;
+  moduleId: string | undefined;
+  viewId: string | undefined;
+  globalViewId: string | undefined; // all issues view id
+  userId: string | undefined; // user profile detail Id
+  stateMap: Record<string, IState> | undefined;
+  stateDetails: IState[] | undefined;
+  workspaceStateDetails: IState[] | undefined;
+  labelMap: Record<string, IIssueLabel> | undefined;
+  workSpaceMemberRolesMap: Record<string, IWorkspaceMembership> | undefined;
+  memberMap: Record<string, IUserLite> | undefined;
+  projectMap: Record<string, IProject> | undefined;
+  moduleMap: Record<string, IModule> | undefined;
+  cycleMap: Record<string, ICycle> | undefined;
+
+  rootStore: RootStore;
+  serviceType: TIssueServiceType;
+
+  issues: IIssueStore;
+
+  issueDetail: IIssueDetail;
+  epicDetail: IIssueDetail;
+
+  workspaceIssuesFilter: IWorkspaceIssuesFilter;
+  workspaceIssues: IWorkspaceIssues;
+
+  workspaceDraftIssuesFilter: IWorkspaceDraftIssuesFilter;
+  workspaceDraftIssues: IWorkspaceDraftIssues;
+
+  profileIssuesFilter: IProfileIssuesFilter;
+  profileIssues: IProfileIssues;
+
+  teamIssuesFilter: IProjectIssuesFilter;
+  teamIssues: IProjectIssues;
+
+  projectIssuesFilter: IProjectIssuesFilter;
+  projectIssues: IProjectIssues;
+
+  cycleIssuesFilter: ICycleIssuesFilter;
+  cycleIssues: ICycleIssues;
+
+  moduleIssuesFilter: IModuleIssuesFilter;
+  moduleIssues: IModuleIssues;
+
+  teamViewIssuesFilter: IProjectViewIssuesFilter;
+  teamViewIssues: IProjectViewIssues;
+
+  teamProjectWorkItemsFilter: IProjectIssuesFilter;
+  teamProjectWorkItems: IProjectIssues;
+
+  projectViewIssuesFilter: IProjectViewIssuesFilter;
+  projectViewIssues: IProjectViewIssues;
+
+  archivedIssuesFilter: IArchivedIssuesFilter;
+  archivedIssues: IArchivedIssues;
+
+  issueKanBanView: IIssueKanBanViewStore;
+  issueCalendarView: ICalendarStore;
+
+  projectEpicsFilter: IProjectIssuesFilter;
+  projectEpics: IProjectIssues;
+}
+
+export class IssueRootStore implements IIssueRootStore {
+  currentUserId: string | undefined = undefined;
+  workspaceSlug: string | undefined = undefined;
+  teamspaceId: string | undefined = undefined;
+  projectId: string | undefined = undefined;
+  cycleId: string | undefined = undefined;
+  moduleId: string | undefined = undefined;
+  viewId: string | undefined = undefined;
+  globalViewId: string | undefined = undefined;
+  userId: string | undefined = undefined;
+  stateMap: Record<string, IState> | undefined = undefined;
+  stateDetails: IState[] | undefined = undefined;
+  workspaceStateDetails: IState[] | undefined = undefined;
+  labelMap: Record<string, IIssueLabel> | undefined = undefined;
+  workSpaceMemberRolesMap: Record<string, IWorkspaceMembership> | undefined = undefined;
+  memberMap: Record<string, IUserLite> | undefined = undefined;
+  projectMap: Record<string, IProject> | undefined = undefined;
+  moduleMap: Record<string, IModule> | undefined = undefined;
+  cycleMap: Record<string, ICycle> | undefined = undefined;
+
+  rootStore: RootStore;
+  serviceType: TIssueServiceType;
+
+  issues: IIssueStore;
+
+  issueDetail: IIssueDetail;
+  epicDetail: IIssueDetail;
+
+  workspaceIssuesFilter: IWorkspaceIssuesFilter;
+  workspaceIssues: IWorkspaceIssues;
+
+  workspaceDraftIssuesFilter: IWorkspaceDraftIssuesFilter;
+  workspaceDraftIssues: IWorkspaceDraftIssues;
+
+  profileIssuesFilter: IProfileIssuesFilter;
+  profileIssues: IProfileIssues;
+
+  teamIssuesFilter: IProjectIssuesFilter;
+  teamIssues: IProjectIssues;
+
+  projectIssuesFilter: IProjectIssuesFilter;
+  projectIssues: IProjectIssues;
+
+  cycleIssuesFilter: ICycleIssuesFilter;
+  cycleIssues: ICycleIssues;
+
+  moduleIssuesFilter: IModuleIssuesFilter;
+  moduleIssues: IModuleIssues;
+
+  teamViewIssuesFilter: IProjectViewIssuesFilter;
+  teamViewIssues: IProjectViewIssues;
+
+  projectViewIssuesFilter: IProjectViewIssuesFilter;
+  projectViewIssues: IProjectViewIssues;
+
+  teamProjectWorkItemsFilter: IProjectIssuesFilter;
+  teamProjectWorkItems: IProjectIssues;
+
+  archivedIssuesFilter: IArchivedIssuesFilter;
+  archivedIssues: IArchivedIssues;
+
+  issueKanBanView: IIssueKanBanViewStore;
+  issueCalendarView: ICalendarStore;
+
+  projectEpicsFilter: IProjectIssuesFilter;
+  projectEpics: IProjectIssues;
+
+  constructor(rootStore: RootStore, serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
+    makeObservable(this, {
+      workspaceSlug: observable.ref,
+      teamspaceId: observable.ref,
+      projectId: observable.ref,
+      cycleId: observable.ref,
+      moduleId: observable.ref,
+      viewId: observable.ref,
+      userId: observable.ref,
+      globalViewId: observable.ref,
+      stateMap: observable,
+      stateDetails: observable,
+      workspaceStateDetails: observable,
+      labelMap: observable,
+      memberMap: observable,
+      workSpaceMemberRolesMap: observable,
+      projectMap: observable,
+      moduleMap: observable,
+      cycleMap: observable,
+    });
+
+    this.serviceType = serviceType;
+    this.rootStore = rootStore;
+
+    autorun(() => {
+      if (rootStore?.user?.data?.id) this.currentUserId = rootStore?.user?.data?.id;
+      if (this.workspaceSlug !== rootStore.router.workspaceSlug) this.workspaceSlug = rootStore.router.workspaceSlug;
+      if (this.teamspaceId !== rootStore.router.teamspaceId) this.teamspaceId = rootStore.router.teamspaceId;
+      if (this.projectId !== rootStore.router.projectId) this.projectId = rootStore.router.projectId;
+      if (this.cycleId !== rootStore.router.cycleId) this.cycleId = rootStore.router.cycleId;
+      if (this.moduleId !== rootStore.router.moduleId) this.moduleId = rootStore.router.moduleId;
+      if (this.viewId !== rootStore.router.viewId) this.viewId = rootStore.router.viewId;
+      if (this.globalViewId !== rootStore.router.globalViewId) this.globalViewId = rootStore.router.globalViewId;
+      if (this.userId !== rootStore.router.userId) this.userId = rootStore.router.userId;
+      if (!isEmpty(rootStore?.state?.stateMap)) this.stateMap = rootStore?.state?.stateMap;
+      if (!isEmpty(rootStore?.state?.projectStates)) this.stateDetails = rootStore?.state?.projectStates;
+      if (!isEmpty(rootStore?.state?.workspaceStates)) this.workspaceStateDetails = rootStore?.state?.workspaceStates;
+      if (!isEmpty(rootStore?.label?.labelMap)) this.labelMap = rootStore?.label?.labelMap;
+      if (!isEmpty(rootStore?.memberRoot?.workspace?.workspaceMemberMap))
+        this.workSpaceMemberRolesMap = rootStore?.memberRoot?.workspace?.memberMap || undefined;
+      if (!isEmpty(rootStore?.memberRoot?.memberMap)) this.memberMap = rootStore?.memberRoot?.memberMap || undefined;
+      if (!isEmpty(rootStore?.projectRoot?.project?.projectMap))
+        this.projectMap = rootStore?.projectRoot?.project?.projectMap;
+      if (!isEmpty(rootStore?.module?.moduleMap)) this.moduleMap = rootStore?.module?.moduleMap;
+      if (!isEmpty(rootStore?.cycle?.cycleMap)) this.cycleMap = rootStore?.cycle?.cycleMap;
+    });
+
+    this.issues = new IssueStore();
+
+    this.issueDetail = new IssueDetail(this, EIssueServiceType.ISSUES);
+    this.epicDetail = new IssueDetail(this, EIssueServiceType.EPICS);
+
+    this.workspaceIssuesFilter = new WorkspaceIssuesFilter(this);
+    this.workspaceIssues = new WorkspaceIssues(this, this.workspaceIssuesFilter);
+
+    this.profileIssuesFilter = new ProfileIssuesFilter(this);
+    this.profileIssues = new ProfileIssues(this, this.profileIssuesFilter);
+
+    this.workspaceDraftIssuesFilter = new WorkspaceDraftIssuesFilter(this);
+    this.workspaceDraftIssues = new WorkspaceDraftIssues(this);
+
+    this.projectIssuesFilter = new ProjectIssuesFilter(this);
+    this.projectIssues = new ProjectIssues(this, this.projectIssuesFilter);
+
+    this.teamIssuesFilter = new ProjectIssuesFilter(this);
+    this.teamIssues = new ProjectIssues(this, this.teamIssuesFilter);
+
+    this.cycleIssuesFilter = new CycleIssuesFilter(this);
+    this.cycleIssues = new CycleIssues(this, this.cycleIssuesFilter);
+
+    this.moduleIssuesFilter = new ModuleIssuesFilter(this);
+    this.moduleIssues = new ModuleIssues(this, this.moduleIssuesFilter);
+
+    this.teamViewIssuesFilter = new ProjectViewIssuesFilter(this);
+    this.teamViewIssues = new ProjectViewIssues(this, this.teamViewIssuesFilter);
+
+    this.projectViewIssuesFilter = new ProjectViewIssuesFilter(this);
+    this.projectViewIssues = new ProjectViewIssues(this, this.projectViewIssuesFilter);
+
+    this.teamProjectWorkItemsFilter = new ProjectIssuesFilter(this);
+    this.teamProjectWorkItems = new ProjectIssues(this, this.teamProjectWorkItemsFilter);
+
+    this.archivedIssuesFilter = new ArchivedIssuesFilter(this);
+    this.archivedIssues = new ArchivedIssues(this, this.archivedIssuesFilter);
+
+    this.issueKanBanView = new IssueKanBanViewStore(this);
+    this.issueCalendarView = new CalendarStore(this);
+
+    this.projectEpicsFilter = new ProjectIssuesFilter(this);
+    this.projectEpics = new ProjectIssues(this, this.projectEpicsFilter);
+  }
+}
diff --git a/apps/web/core/store/issue/workspace-draft/filter.store.ts b/apps/web/core/store/issue/workspace-draft/filter.store.ts
new file mode 100644
index 0000000..c02f9c6
--- /dev/null
+++ b/apps/web/core/store/issue/workspace-draft/filter.store.ts
@@ -0,0 +1,274 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// Plane Imports
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EIssueFilterType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueKanbanFilters,
+  IIssueFilters,
+  TIssueParams,
+  IssuePaginationOptions,
+  TWorkItemFilterExpression,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import { handleIssueQueryParamsByLayout } from "@plane/utils";
+// services
+import { IssueFiltersService } from "@/services/issue_filter.service";
+// helpers
+import type { IBaseIssueFilterStore } from "../helpers/issue-filter-helper.store";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+// types
+import type { IIssueRootStore } from "../root.store";
+
+export interface IWorkspaceDraftIssuesFilter extends IBaseIssueFilterStore {
+  // observables
+  workspaceSlug: string;
+  //helper actions
+  getFilterParams: (
+    options: IssuePaginationOptions,
+    userId: string,
+    cursor: string | undefined,
+    groupId: string | undefined,
+    subGroupId: string | undefined
+  ) => Partial<Record<TIssueParams, string | boolean>>;
+  // action
+  fetchFilters: (workspaceSlug: string) => Promise<void>;
+  updateFilterExpression: (workspaceSlug: string, userId: string, filters: TWorkItemFilterExpression) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate
+  ) => Promise<void>;
+}
+
+export class WorkspaceDraftIssuesFilter extends IssueFilterHelperStore implements IWorkspaceDraftIssuesFilter {
+  // observables
+  workspaceSlug: string = "";
+  filters: { [userId: string]: IIssueFilters } = {};
+  // root store
+  rootIssueStore: IIssueRootStore;
+  // services
+  issueFilterService;
+
+  constructor(_rootStore: IIssueRootStore) {
+    super();
+    makeObservable(this, {
+      // observables
+      workspaceSlug: observable.ref,
+      filters: observable,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // actions
+      fetchFilters: action,
+      updateFilters: action,
+    });
+    // root store
+    this.rootIssueStore = _rootStore;
+    // services
+    this.issueFilterService = new IssueFiltersService();
+  }
+
+  get issueFilters() {
+    const workspaceSlug = this.rootIssueStore.workspaceSlug;
+    if (!workspaceSlug) return undefined;
+
+    return this.getIssueFilters(workspaceSlug);
+  }
+
+  get appliedFilters() {
+    const workspaceSlug = this.rootIssueStore.workspaceSlug;
+    if (!workspaceSlug) return undefined;
+
+    return this.getAppliedFilters(workspaceSlug);
+  }
+
+  getIssueFilters(workspaceSlug: string) {
+    const displayFilters = this.filters[workspaceSlug] || undefined;
+    if (isEmpty(displayFilters)) return undefined;
+
+    const _filters: IIssueFilters = this.computedIssueFilters(displayFilters);
+
+    return _filters;
+  }
+
+  getAppliedFilters(workspaceSlug: string) {
+    const userFilters = this.getIssueFilters(workspaceSlug);
+    if (!userFilters) return undefined;
+
+    const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "profile_issues");
+    if (!filteredParams) return undefined;
+
+    const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
+      userFilters?.richFilters,
+      userFilters?.displayFilters,
+      filteredParams
+    );
+
+    return filteredRouteParams;
+  }
+
+  getFilterParams = computedFn(
+    (
+      options: IssuePaginationOptions,
+      userId: string,
+      cursor: string | undefined,
+      groupId: string | undefined,
+      subGroupId: string | undefined
+    ) => {
+      const filterParams = this.getAppliedFilters(this.workspaceSlug);
+
+      const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
+      return paginationParams;
+    }
+  );
+
+  fetchFilters = async (workspaceSlug: string) => {
+    this.workspaceSlug = workspaceSlug;
+    const _filters = this.handleIssuesLocalFilters.get(
+      EIssuesStoreType.PROFILE,
+      workspaceSlug,
+      workspaceSlug,
+      undefined
+    );
+
+    const richFilters: TWorkItemFilterExpression = _filters?.rich_filters;
+    const displayFilters: IIssueDisplayFilterOptions = this.computedDisplayFilters(_filters?.display_filters);
+    const displayProperties: IIssueDisplayProperties = this.computedDisplayProperties(_filters?.display_properties);
+    const kanbanFilters = {
+      group_by: _filters?.kanban_filters?.group_by || [],
+      sub_group_by: _filters?.kanban_filters?.sub_group_by || [],
+    };
+
+    runInAction(() => {
+      set(this.filters, [workspaceSlug, "richFilters"], richFilters);
+      set(this.filters, [workspaceSlug, "displayFilters"], displayFilters);
+      set(this.filters, [workspaceSlug, "displayProperties"], displayProperties);
+      set(this.filters, [workspaceSlug, "kanbanFilters"], kanbanFilters);
+    });
+  };
+
+  /**
+   * NOTE: This method is designed as a fallback function for the work item filter store.
+   * Only use this method directly when initializing filter instances.
+   * For regular filter updates, use this method as a fallback function for the work item filter store methods instead.
+   */
+  updateFilterExpression: IWorkspaceDraftIssuesFilter["updateFilterExpression"] = async (
+    workspaceSlug,
+    userId,
+    filters
+  ) => {
+    try {
+      runInAction(() => {
+        set(this.filters, [workspaceSlug, "richFilters"], filters);
+      });
+
+      this.rootIssueStore.profileIssues.fetchIssuesWithExistingPagination(workspaceSlug, workspaceSlug, "mutation");
+      this.handleIssuesLocalFilters.set(
+        EIssuesStoreType.PROFILE,
+        EIssueFilterType.FILTERS,
+        workspaceSlug,
+        workspaceSlug,
+        undefined,
+        {
+          rich_filters: filters,
+        }
+      );
+    } catch (error) {
+      console.log("error while updating rich filters", error);
+      throw error;
+    }
+  };
+
+  updateFilters: IWorkspaceDraftIssuesFilter["updateFilters"] = async (workspaceSlug, type, filters) => {
+    try {
+      if (isEmpty(this.filters) || isEmpty(this.filters[workspaceSlug])) return;
+
+      const _filters = {
+        richFilters: this.filters[workspaceSlug].richFilters,
+        displayFilters: this.filters[workspaceSlug].displayFilters as IIssueDisplayFilterOptions,
+        displayProperties: this.filters[workspaceSlug].displayProperties as IIssueDisplayProperties,
+        kanbanFilters: this.filters[workspaceSlug].kanbanFilters as TIssueKanbanFilters,
+      };
+
+      switch (type) {
+        case EIssueFilterType.DISPLAY_FILTERS: {
+          const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
+          _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
+
+          // set sub_group_by to null if group_by is set to null
+          if (_filters.displayFilters.group_by === null) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+          if (
+            _filters.displayFilters.layout === "kanban" &&
+            _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+          ) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set group_by to priority if layout is switched to kanban and group_by is null
+          if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null) {
+            _filters.displayFilters.group_by = "priority";
+            updatedDisplayFilters.group_by = "priority";
+          }
+
+          runInAction(() => {
+            Object.keys(updatedDisplayFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [workspaceSlug, "displayFilters", _key],
+                updatedDisplayFilters[_key as keyof IIssueDisplayFilterOptions]
+              );
+            });
+          });
+
+          this.rootIssueStore.profileIssues.fetchIssuesWithExistingPagination(workspaceSlug, workspaceSlug, "mutation");
+
+          this.handleIssuesLocalFilters.set(EIssuesStoreType.PROFILE, type, workspaceSlug, workspaceSlug, undefined, {
+            display_filters: _filters.displayFilters,
+          });
+
+          break;
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
+          const updatedDisplayProperties = filters as IIssueDisplayProperties;
+          _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
+
+          runInAction(() => {
+            Object.keys(updatedDisplayProperties).forEach((_key) => {
+              set(
+                this.filters,
+                [workspaceSlug, "displayProperties", _key],
+                updatedDisplayProperties[_key as keyof IIssueDisplayProperties]
+              );
+            });
+          });
+
+          this.handleIssuesLocalFilters.set(EIssuesStoreType.PROFILE, type, workspaceSlug, workspaceSlug, undefined, {
+            display_properties: _filters.displayProperties,
+          });
+          break;
+        }
+
+        default:
+          break;
+      }
+    } catch (error) {
+      if (workspaceSlug) this.fetchFilters(workspaceSlug);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/workspace-draft/index.ts b/apps/web/core/store/issue/workspace-draft/index.ts
new file mode 100644
index 0000000..fa4278d
--- /dev/null
+++ b/apps/web/core/store/issue/workspace-draft/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./issue.store";
+export * from "./filter.store";
diff --git a/apps/web/core/store/issue/workspace-draft/issue.store.ts b/apps/web/core/store/issue/workspace-draft/issue.store.ts
new file mode 100644
index 0000000..850a9e0
--- /dev/null
+++ b/apps/web/core/store/issue/workspace-draft/issue.store.ts
@@ -0,0 +1,429 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { clone, update, unset, orderBy, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import { EDraftIssuePaginationType } from "@plane/constants";
+import type {
+  TWorkspaceDraftIssue,
+  TWorkspaceDraftPaginationInfo,
+  TWorkspaceDraftIssueLoader,
+  TWorkspaceDraftQueryParams,
+  TPaginationData,
+  TLoader,
+  TGroupedIssues,
+  TSubGroupedIssues,
+  ViewFlags,
+  TIssue,
+  TBulkOperationsPayload,
+} from "@plane/types";
+import { getCurrentDateTimeInISO, convertToISODateString } from "@plane/utils";
+// services
+import workspaceDraftService from "@/services/issue/workspace_draft.service";
+// types
+import type { IIssueRootStore } from "../root.store";
+
+export type TDraftIssuePaginationType = EDraftIssuePaginationType;
+
+export interface IWorkspaceDraftIssues {
+  // observables
+  loader: TWorkspaceDraftIssueLoader;
+  paginationInfo: Omit<TWorkspaceDraftPaginationInfo<TWorkspaceDraftIssue>, "results"> | undefined;
+  issuesMap: Record<string, TWorkspaceDraftIssue>; // issue_id -> issue;
+  issueMapIds: Record<string, string[]>; // workspace_id -> issue_ids;
+  // computed
+  issueIds: string[];
+  // computed functions
+  getIssueById: (issueId: string) => TWorkspaceDraftIssue | undefined;
+  // helper actions
+  addIssue: (issues: TWorkspaceDraftIssue[]) => void;
+  mutateIssue: (issueId: string, data: Partial<TWorkspaceDraftIssue>) => void;
+  removeIssue: (issueId: string) => Promise<void>;
+  // actions
+  fetchIssues: (
+    workspaceSlug: string,
+    loadType: TWorkspaceDraftIssueLoader,
+    paginationType?: TDraftIssuePaginationType
+  ) => Promise<TWorkspaceDraftPaginationInfo<TWorkspaceDraftIssue> | undefined>;
+  createIssue: (
+    workspaceSlug: string,
+    payload: Partial<TWorkspaceDraftIssue | TIssue>
+  ) => Promise<TWorkspaceDraftIssue | undefined>;
+  updateIssue: (
+    workspaceSlug: string,
+    issueId: string,
+    payload: Partial<TWorkspaceDraftIssue | TIssue>
+  ) => Promise<TWorkspaceDraftIssue | undefined>;
+  deleteIssue: (workspaceSlug: string, issueId: string) => Promise<void>;
+  moveIssue: (workspaceSlug: string, issueId: string, payload: Partial<TWorkspaceDraftIssue>) => Promise<TIssue>;
+  addCycleToIssue: (
+    workspaceSlug: string,
+    issueId: string,
+    cycleId: string
+  ) => Promise<TWorkspaceDraftIssue | undefined>;
+  addModulesToIssue: (
+    workspaceSlug: string,
+    issueId: string,
+    moduleIds: string[]
+  ) => Promise<TWorkspaceDraftIssue | undefined>;
+
+  // dummies
+  viewFlags: ViewFlags;
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues | undefined;
+  getIssueIds: (groupId?: string, subGroupId?: string) => string[] | undefined;
+  getPaginationData(groupId: string | undefined, subGroupId: string | undefined): TPaginationData | undefined;
+  getIssueLoader(groupId?: string, subGroupId?: string): TLoader;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  removeCycleFromIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  addIssueToCycle: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    issueIds: string[],
+    fetchAddedIssues?: boolean
+  ) => Promise<void>;
+  removeIssueFromCycle: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
+
+  removeIssuesFromModule: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    issueIds: string[]
+  ) => Promise<void>;
+  changeModulesInIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    addModuleIds: string[],
+    removeModuleIds: string[]
+  ): Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  archiveBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  bulkUpdateProperties: (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => Promise<void>;
+}
+
+export class WorkspaceDraftIssues implements IWorkspaceDraftIssues {
+  // local constants
+  paginatedCount = 50;
+  // observables
+  loader: TWorkspaceDraftIssueLoader = undefined;
+  paginationInfo: Omit<TWorkspaceDraftPaginationInfo<TWorkspaceDraftIssue>, "results"> | undefined = undefined;
+  issuesMap: Record<string, TWorkspaceDraftIssue> = {};
+  issueMapIds: Record<string, string[]> = {};
+
+  constructor(public issueStore: IIssueRootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      paginationInfo: observable,
+      issuesMap: observable,
+      issueMapIds: observable,
+      // computed
+      issueIds: computed,
+      // action
+      fetchIssues: action,
+      createIssue: action,
+      updateIssue: action,
+      deleteIssue: action,
+      moveIssue: action,
+      addCycleToIssue: action,
+      addModulesToIssue: action,
+    });
+  }
+
+  private updateWorkspaceUserDraftIssueCount(workspaceSlug: string, increment: number) {
+    const workspaceUserInfo = this.issueStore.rootStore.user.permission.workspaceUserInfo;
+    const currentCount = workspaceUserInfo[workspaceSlug]?.draft_issue_count ?? 0;
+
+    set(workspaceUserInfo, [workspaceSlug, "draft_issue_count"], currentCount + increment);
+  }
+
+  // computed
+  get issueIds() {
+    const workspaceSlug = this.issueStore.workspaceSlug;
+    if (!workspaceSlug) return [];
+    if (!this.issueMapIds[workspaceSlug]) return [];
+    const issueIds = this.issueMapIds[workspaceSlug];
+    return orderBy(issueIds, (issueId) => convertToISODateString(this.issuesMap[issueId]?.created_at), ["desc"]);
+  }
+
+  // computed functions
+  getIssueById = computedFn((issueId: string) => {
+    if (!issueId || !this.issuesMap[issueId]) return undefined;
+    return this.issuesMap[issueId];
+  });
+
+  // helper actions
+  addIssue = (issues: TWorkspaceDraftIssue[]) => {
+    if (issues && issues.length <= 0) return;
+    runInAction(() => {
+      issues.forEach((issue) => {
+        if (!this.issuesMap[issue.id]) set(this.issuesMap, issue.id, issue);
+        else update(this.issuesMap, issue.id, (prevIssue) => ({ ...prevIssue, ...issue }));
+      });
+    });
+  };
+
+  mutateIssue = (issueId: string, issue: Partial<TWorkspaceDraftIssue>) => {
+    if (!issue || !issueId || !this.issuesMap[issueId]) return;
+    runInAction(() => {
+      set(this.issuesMap, [issueId, "updated_at"], getCurrentDateTimeInISO());
+      Object.keys(issue).forEach((key) => {
+        set(this.issuesMap, [issueId, key], issue[key as keyof TWorkspaceDraftIssue]);
+      });
+    });
+  };
+
+  removeIssue = async (issueId: string) => {
+    if (!issueId || !this.issuesMap[issueId]) return;
+    runInAction(() => unset(this.issuesMap, issueId));
+  };
+
+  generateNotificationQueryParams = (
+    paramType: TDraftIssuePaginationType,
+    filterParams = {}
+  ): TWorkspaceDraftQueryParams => {
+    const queryCursorNext: string =
+      paramType === EDraftIssuePaginationType.INIT
+        ? `${this.paginatedCount}:0:0`
+        : paramType === EDraftIssuePaginationType.CURRENT
+          ? `${this.paginatedCount}:${0}:0`
+          : paramType === EDraftIssuePaginationType.NEXT && this.paginationInfo
+            ? (this.paginationInfo?.next_cursor ?? `${this.paginatedCount}:${0}:0`)
+            : `${this.paginatedCount}:${0}:0`;
+
+    const queryParams: TWorkspaceDraftQueryParams = {
+      per_page: this.paginatedCount,
+      cursor: queryCursorNext,
+      ...filterParams,
+    };
+
+    return queryParams;
+  };
+
+  // actions
+  fetchIssues = async (
+    workspaceSlug: string,
+    loadType: TWorkspaceDraftIssueLoader,
+    paginationType: TDraftIssuePaginationType = EDraftIssuePaginationType.INIT
+  ) => {
+    try {
+      this.loader = loadType;
+
+      // filter params and pagination params
+      const filterParams = {};
+      const params = this.generateNotificationQueryParams(paginationType, filterParams);
+
+      // fetching the paginated workspace draft issues
+      const draftIssuesResponse = await workspaceDraftService.getIssues(workspaceSlug, { ...params });
+      if (!draftIssuesResponse) return undefined;
+
+      const { results, ...paginationInfo } = draftIssuesResponse;
+      runInAction(() => {
+        if (results && results.length > 0) {
+          // adding issueIds
+          const issueIds = results.map((issue) => issue.id);
+          const existingIssueIds = this.issueMapIds[workspaceSlug] ?? [];
+          // new issueIds
+          const newIssueIds = issueIds.filter((issueId) => !existingIssueIds.includes(issueId));
+          this.addIssue(results);
+          // issue map update
+          update(this.issueMapIds, [workspaceSlug], (existingIssueIds = []) => [...newIssueIds, ...existingIssueIds]);
+          this.loader = undefined;
+        } else {
+          this.loader = "empty-state";
+        }
+        set(this, "paginationInfo", paginationInfo);
+      });
+      return draftIssuesResponse;
+    } catch (error) {
+      // set loader to undefined if errored out
+      this.loader = undefined;
+      throw error;
+    }
+  };
+
+  createIssue = async (
+    workspaceSlug: string,
+    payload: Partial<TWorkspaceDraftIssue | TIssue>
+  ): Promise<TWorkspaceDraftIssue | undefined> => {
+    try {
+      this.loader = "create";
+
+      const response = await workspaceDraftService.createIssue(workspaceSlug, payload);
+      if (response) {
+        runInAction(() => {
+          this.addIssue([response]);
+          update(this.issueMapIds, [workspaceSlug], (existingIssueIds = []) => [response.id, ...existingIssueIds]);
+          // increase the count of issues in the pagination info
+          if (this.paginationInfo?.total_count) {
+            set(this, "paginationInfo", {
+              ...this.paginationInfo,
+              total_count: this.paginationInfo.total_count + 1,
+            });
+          }
+          // Update draft issue count in workspaceUserInfo
+          this.updateWorkspaceUserDraftIssueCount(workspaceSlug, 1);
+        });
+      }
+
+      this.loader = undefined;
+      return response;
+    } catch (error) {
+      this.loader = undefined;
+      throw error;
+    }
+  };
+
+  updateIssue = async (workspaceSlug: string, issueId: string, payload: Partial<TWorkspaceDraftIssue | TIssue>) => {
+    const issueBeforeUpdate = clone(this.getIssueById(issueId));
+    try {
+      this.loader = "update";
+      runInAction(() => {
+        set(this.issuesMap, [issueId], {
+          ...issueBeforeUpdate,
+          ...payload,
+          ...{ updated_at: getCurrentDateTimeInISO() },
+        });
+      });
+      const response = await workspaceDraftService.updateIssue(workspaceSlug, issueId, payload);
+      this.loader = undefined;
+      return response;
+    } catch (error) {
+      this.loader = undefined;
+      runInAction(() => {
+        set(this.issuesMap, [issueId], issueBeforeUpdate);
+      });
+      throw error;
+    }
+  };
+
+  deleteIssue = async (workspaceSlug: string, issueId: string) => {
+    try {
+      this.loader = "delete";
+
+      const response = await workspaceDraftService.deleteIssue(workspaceSlug, issueId);
+      runInAction(() => {
+        // Remove the issue from the issueMapIds
+        this.issueMapIds[workspaceSlug] = (this.issueMapIds[workspaceSlug] || []).filter((id) => id !== issueId);
+        // Remove the issue from the issuesMap
+        delete this.issuesMap[issueId];
+        // reduce the count of issues in the pagination info
+        if (this.paginationInfo?.total_count) {
+          set(this, "paginationInfo", {
+            ...this.paginationInfo,
+            total_count: this.paginationInfo.total_count - 1,
+          });
+        }
+        // Update draft issue count in workspaceUserInfo
+        this.updateWorkspaceUserDraftIssueCount(workspaceSlug, -1);
+      });
+
+      this.loader = undefined;
+      return response;
+    } catch (error) {
+      this.loader = undefined;
+      throw error;
+    }
+  };
+
+  moveIssue = async (workspaceSlug: string, issueId: string, payload: Partial<TWorkspaceDraftIssue>) => {
+    try {
+      this.loader = "move";
+
+      const response = await workspaceDraftService.moveIssue(workspaceSlug, issueId, payload);
+      runInAction(() => {
+        // Remove the issue from the issueMapIds
+        this.issueMapIds[workspaceSlug] = (this.issueMapIds[workspaceSlug] || []).filter((id) => id !== issueId);
+        // Remove the issue from the issuesMap
+        delete this.issuesMap[issueId];
+        // reduce the count of issues in the pagination info
+        if (this.paginationInfo?.total_count) {
+          set(this, "paginationInfo", {
+            ...this.paginationInfo,
+            total_count: this.paginationInfo.total_count - 1,
+          });
+        }
+
+        // Update draft issue count in workspaceUserInfo
+        this.updateWorkspaceUserDraftIssueCount(workspaceSlug, -1);
+      });
+
+      this.loader = undefined;
+      return response;
+    } catch (error) {
+      this.loader = undefined;
+      throw error;
+    }
+  };
+
+  addCycleToIssue = async (workspaceSlug: string, issueId: string, cycleId: string) => {
+    try {
+      this.loader = "update";
+      const response = await this.updateIssue(workspaceSlug, issueId, { cycle_id: cycleId });
+      return response;
+    } catch (error) {
+      this.loader = undefined;
+      throw error;
+    }
+  };
+
+  addModulesToIssue = async (workspaceSlug: string, issueId: string, moduleIds: string[]) => {
+    try {
+      this.loader = "update";
+      const response = this.updateIssue(workspaceSlug, issueId, { module_ids: moduleIds });
+      return response;
+    } catch (error) {
+      this.loader = undefined;
+      throw error;
+    }
+  };
+
+  // dummies
+  viewFlags: ViewFlags = { enableQuickAdd: false, enableIssueCreation: false, enableInlineEditing: false };
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues | undefined = undefined;
+  getIssueIds = (_groupId?: string, _subGroupId?: string) => undefined;
+  getPaginationData = (_groupId: string | undefined, _subGroupId: string | undefined) => undefined;
+  getIssueLoader = (_groupId?: string, _subGroupId?: string) => "loaded" as TLoader;
+  getGroupIssueCount = (
+    _groupId: string | undefined,
+    _subGroupId: string | undefined,
+    _isSubGroupCumulative: boolean
+  ) => undefined;
+  removeCycleFromIssue = async (_workspaceSlug: string, _projectId: string, _issueId: string) => {};
+  addIssueToCycle = async (
+    _workspaceSlug: string,
+    _projectId: string,
+    _cycleId: string,
+    _issueIds: string[],
+    _fetchAddedIssues?: boolean
+  ) => {};
+  removeIssueFromCycle = async (_workspaceSlug: string, _projectId: string, _cycleId: string, _issueId: string) => {};
+
+  removeIssuesFromModule = async (
+    _workspaceSlug: string,
+    _projectId: string,
+    _moduleId: string,
+    _issueIds: string[]
+  ) => {};
+  changeModulesInIssue = async (
+    _workspaceSlug: string,
+    _projectId: string,
+    _issueId: string,
+    _addModuleIds: string[],
+    _removeModuleIds: string[]
+  ) => {};
+  archiveIssue = async (_workspaceSlug: string, _projectId: string, _issueId: string) => {};
+  archiveBulkIssues = async (_workspaceSlug: string, _projectId: string, _issueIds: string[]) => {};
+  removeBulkIssues = async (_workspaceSlug: string, _projectId: string, _issueIds: string[]) => {};
+  bulkUpdateProperties = async (_workspaceSlug: string, _projectId: string, _data: TBulkOperationsPayload) => {};
+}
diff --git a/apps/web/core/store/issue/workspace/filter.store.ts b/apps/web/core/store/issue/workspace/filter.store.ts
new file mode 100644
index 0000000..5b56a36
--- /dev/null
+++ b/apps/web/core/store/issue/workspace/filter.store.ts
@@ -0,0 +1,319 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
+import { EIssueFilterType } from "@plane/constants";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TIssueKanbanFilters,
+  IIssueFilters,
+  TIssueParams,
+  TStaticViewTypes,
+  IssuePaginationOptions,
+  TWorkItemFilterExpression,
+  TSupportedFilterForUpdate,
+} from "@plane/types";
+import { EIssuesStoreType, EIssueLayoutTypes, STATIC_VIEW_TYPES } from "@plane/types";
+import { handleIssueQueryParamsByLayout } from "@plane/utils";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// local imports
+import type { IBaseIssueFilterStore, IIssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
+import type { IIssueRootStore } from "../root.store";
+
+type TWorkspaceFilters = TStaticViewTypes;
+
+export type TBaseFilterStore = IBaseIssueFilterStore & IIssueFilterHelperStore;
+
+export interface IWorkspaceIssuesFilter extends TBaseFilterStore {
+  // fetch action
+  fetchFilters: (workspaceSlug: string, viewId: string) => Promise<void>;
+  updateFilterExpression: (workspaceSlug: string, viewId: string, filters: TWorkItemFilterExpression) => Promise<void>;
+  updateFilters: (
+    workspaceSlug: string,
+    projectId: string | undefined,
+    filterType: TSupportedFilterTypeForUpdate,
+    filters: TSupportedFilterForUpdate,
+    viewId: string
+  ) => Promise<void>;
+  //helper action
+  getIssueFilters: (viewId: string | undefined) => IIssueFilters | undefined;
+  getAppliedFilters: (viewId: string) => Partial<Record<TIssueParams, string | boolean>> | undefined;
+  getFilterParams: (
+    options: IssuePaginationOptions,
+    viewId: string,
+    cursor: string | undefined,
+    groupId: string | undefined,
+    subGroupId: string | undefined
+  ) => Partial<Record<TIssueParams, string | boolean>>;
+}
+
+export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWorkspaceIssuesFilter {
+  // observables
+  filters: { [viewId: string]: IIssueFilters } = {};
+  // root store
+  rootIssueStore;
+  // services
+  issueFilterService;
+
+  constructor(_rootStore: IIssueRootStore) {
+    super();
+    makeObservable(this, {
+      // observables
+      filters: observable,
+      // computed
+      issueFilters: computed,
+      appliedFilters: computed,
+      // fetch actions
+      fetchFilters: action,
+      updateFilters: action,
+    });
+    // root store
+    this.rootIssueStore = _rootStore;
+    // services
+    this.issueFilterService = new WorkspaceService();
+  }
+
+  getIssueFilters = (viewId: string | undefined) => {
+    if (!viewId) return undefined;
+
+    const displayFilters = this.filters[viewId] || undefined;
+    if (isEmpty(displayFilters)) return undefined;
+
+    const _filters: IIssueFilters = this.computedIssueFilters(displayFilters);
+
+    return _filters;
+  };
+
+  getAppliedFilters = (viewId: string | undefined) => {
+    if (!viewId) return undefined;
+
+    const userFilters = this.getIssueFilters(viewId);
+    if (!userFilters) return undefined;
+
+    const filteredParams = handleIssueQueryParamsByLayout(EIssueLayoutTypes.SPREADSHEET, "my_issues");
+    if (!filteredParams) return undefined;
+
+    const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
+      userFilters?.richFilters,
+      userFilters?.displayFilters,
+      filteredParams
+    );
+
+    return filteredRouteParams;
+  };
+
+  get issueFilters() {
+    const viewId = this.rootIssueStore.globalViewId;
+    return this.getIssueFilters(viewId);
+  }
+
+  get appliedFilters() {
+    const viewId = this.rootIssueStore.globalViewId;
+    return this.getAppliedFilters(viewId);
+  }
+
+  getFilterParams = computedFn(
+    (
+      options: IssuePaginationOptions,
+      viewId: string,
+      cursor: string | undefined,
+      groupId: string | undefined,
+      subGroupId: string | undefined
+    ) => {
+      let filterParams = this.getAppliedFilters(viewId);
+
+      if (!filterParams) {
+        filterParams = {};
+      }
+
+      if (STATIC_VIEW_TYPES.includes(viewId)) {
+        const currentUserId = this.rootIssueStore.currentUserId;
+        const paramForStaticView = this.getFilterConditionBasedOnViews(currentUserId, viewId);
+        if (paramForStaticView) {
+          filterParams = { ...filterParams, ...paramForStaticView };
+        }
+      }
+
+      const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
+      return paginationParams;
+    }
+  );
+
+  fetchFilters = async (workspaceSlug: string, viewId: TWorkspaceFilters) => {
+    let richFilters: TWorkItemFilterExpression;
+    let displayFilters: IIssueDisplayFilterOptions;
+    let displayProperties: IIssueDisplayProperties;
+    let kanbanFilters: TIssueKanbanFilters = {
+      group_by: [],
+      sub_group_by: [],
+    };
+
+    const _filters = this.handleIssuesLocalFilters.get(EIssuesStoreType.GLOBAL, workspaceSlug, undefined, viewId);
+    displayFilters = this.computedDisplayFilters(_filters?.display_filters, {
+      layout: EIssueLayoutTypes.SPREADSHEET,
+      order_by: "-created_at",
+    });
+    displayProperties = this.computedDisplayProperties(_filters?.display_properties);
+    kanbanFilters = {
+      group_by: _filters?.kanban_filters?.group_by || [],
+      sub_group_by: _filters?.kanban_filters?.sub_group_by || [],
+    };
+
+    // Get the view details if the view is not a static view
+    if (STATIC_VIEW_TYPES.includes(viewId) === false) {
+      const _filters = await this.issueFilterService.getViewDetails(workspaceSlug, viewId);
+      richFilters = _filters?.rich_filters;
+      displayFilters = this.computedDisplayFilters(_filters?.display_filters, {
+        layout: EIssueLayoutTypes.SPREADSHEET,
+        order_by: "-created_at",
+      });
+      displayProperties = this.computedDisplayProperties(_filters?.display_properties);
+    }
+
+    // override existing order by if ordered by manual sort_order
+    if (displayFilters.order_by === "sort_order") {
+      displayFilters.order_by = "-created_at";
+    }
+
+    runInAction(() => {
+      set(this.filters, [viewId, "richFilters"], richFilters);
+      set(this.filters, [viewId, "displayFilters"], displayFilters);
+      set(this.filters, [viewId, "displayProperties"], displayProperties);
+      set(this.filters, [viewId, "kanbanFilters"], kanbanFilters);
+    });
+  };
+
+  /**
+   * NOTE: This method is designed as a fallback function for the work item filter store.
+   * Only use this method directly when initializing filter instances.
+   * For regular filter updates, use this method as a fallback function for the work item filter store methods instead.
+   */
+  updateFilterExpression: IWorkspaceIssuesFilter["updateFilterExpression"] = async (workspaceSlug, viewId, filters) => {
+    try {
+      runInAction(() => {
+        set(this.filters, [viewId, "richFilters"], filters);
+      });
+
+      this.rootIssueStore.workspaceIssues.fetchIssuesWithExistingPagination(workspaceSlug, viewId, "mutation");
+    } catch (error) {
+      console.log("error while updating rich filters", error);
+      throw error;
+    }
+  };
+
+  updateFilters: IWorkspaceIssuesFilter["updateFilters"] = async (workspaceSlug, projectId, type, filters, viewId) => {
+    try {
+      const issueFilters = this.getIssueFilters(viewId);
+
+      if (!issueFilters) return;
+
+      const _filters = {
+        richFilters: issueFilters.richFilters,
+        displayFilters: issueFilters.displayFilters as IIssueDisplayFilterOptions,
+        displayProperties: issueFilters.displayProperties as IIssueDisplayProperties,
+        kanbanFilters: issueFilters.kanbanFilters as TIssueKanbanFilters,
+      };
+
+      switch (type) {
+        case EIssueFilterType.DISPLAY_FILTERS: {
+          const updatedDisplayFilters = filters as IIssueDisplayFilterOptions;
+          _filters.displayFilters = { ..._filters.displayFilters, ...updatedDisplayFilters };
+
+          // set sub_group_by to null if group_by is set to null
+          if (_filters.displayFilters.group_by === null) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set sub_group_by to null if layout is switched to kanban group_by and sub_group_by are same
+          if (
+            _filters.displayFilters.layout === "kanban" &&
+            _filters.displayFilters.group_by === _filters.displayFilters.sub_group_by
+          ) {
+            _filters.displayFilters.sub_group_by = null;
+            updatedDisplayFilters.sub_group_by = null;
+          }
+          // set group_by to state if layout is switched to kanban and group_by is null
+          if (_filters.displayFilters.layout === "kanban" && _filters.displayFilters.group_by === null) {
+            _filters.displayFilters.group_by = "state";
+            updatedDisplayFilters.group_by = "state";
+          }
+
+          runInAction(() => {
+            Object.keys(updatedDisplayFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [viewId, "displayFilters", _key],
+                updatedDisplayFilters[_key as keyof IIssueDisplayFilterOptions]
+              );
+            });
+          });
+
+          this.rootIssueStore.workspaceIssues.fetchIssuesWithExistingPagination(workspaceSlug, viewId, "mutation");
+
+          if (["all-issues", "assigned", "created", "subscribed"].includes(viewId))
+            this.handleIssuesLocalFilters.set(EIssuesStoreType.GLOBAL, type, workspaceSlug, undefined, viewId, {
+              display_filters: _filters.displayFilters,
+            });
+          break;
+        }
+        case EIssueFilterType.DISPLAY_PROPERTIES: {
+          const updatedDisplayProperties = filters as IIssueDisplayProperties;
+          _filters.displayProperties = { ..._filters.displayProperties, ...updatedDisplayProperties };
+
+          runInAction(() => {
+            Object.keys(updatedDisplayProperties).forEach((_key) => {
+              set(
+                this.filters,
+                [viewId, "displayProperties", _key],
+                updatedDisplayProperties[_key as keyof IIssueDisplayProperties]
+              );
+            });
+            if (["all-issues", "assigned", "created", "subscribed"].includes(viewId))
+              this.handleIssuesLocalFilters.set(EIssuesStoreType.GLOBAL, type, workspaceSlug, undefined, viewId, {
+                display_properties: _filters.displayProperties,
+              });
+          });
+          break;
+        }
+
+        case EIssueFilterType.KANBAN_FILTERS: {
+          const updatedKanbanFilters = filters as TIssueKanbanFilters;
+          _filters.kanbanFilters = { ..._filters.kanbanFilters, ...updatedKanbanFilters };
+
+          const currentUserId = this.rootIssueStore.currentUserId;
+          if (currentUserId)
+            this.handleIssuesLocalFilters.set(EIssuesStoreType.GLOBAL, type, workspaceSlug, undefined, viewId, {
+              kanban_filters: _filters.kanbanFilters,
+            });
+
+          runInAction(() => {
+            Object.keys(updatedKanbanFilters).forEach((_key) => {
+              set(
+                this.filters,
+                [viewId, "kanbanFilters", _key],
+                updatedKanbanFilters[_key as keyof TIssueKanbanFilters]
+              );
+            });
+          });
+
+          break;
+        }
+        default:
+          break;
+      }
+    } catch (error) {
+      if (viewId) this.fetchFilters(workspaceSlug, viewId);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/issue/workspace/index.ts b/apps/web/core/store/issue/workspace/index.ts
new file mode 100644
index 0000000..a21a791
--- /dev/null
+++ b/apps/web/core/store/issue/workspace/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/apps/web/core/store/issue/workspace/issue.store.ts b/apps/web/core/store/issue/workspace/issue.store.ts
new file mode 100644
index 0000000..eea2333
--- /dev/null
+++ b/apps/web/core/store/issue/workspace/issue.store.ts
@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, runInAction } from "mobx";
+// base class
+import type {
+  IssuePaginationOptions,
+  TBulkOperationsPayload,
+  TIssue,
+  TIssuesResponse,
+  TLoader,
+  ViewFlags,
+} from "@plane/types";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// types
+import type { IBaseIssuesStore } from "../helpers/base-issues.store";
+import { BaseIssuesStore } from "../helpers/base-issues.store";
+import type { IIssueRootStore } from "../root.store";
+import type { IWorkspaceIssuesFilter } from "./filter.store";
+
+export interface IWorkspaceIssues extends IBaseIssuesStore {
+  // observable
+  viewFlags: ViewFlags;
+  // actions
+  fetchIssues: (
+    workspaceSlug: string,
+    viewId: string,
+    loadType: TLoader,
+    options: IssuePaginationOptions
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchIssuesWithExistingPagination: (
+    workspaceSlug: string,
+    viewId: string,
+    loadType: TLoader
+  ) => Promise<TIssuesResponse | undefined>;
+  fetchNextIssues: (
+    workspaceSlug: string,
+    viewId: string,
+    groupId?: string,
+    subGroupId?: string
+  ) => Promise<TIssuesResponse | undefined>;
+
+  createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
+  updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
+  removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  archiveBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;
+  bulkUpdateProperties: (workspaceSlug: string, projectId: string, data: TBulkOperationsPayload) => Promise<void>;
+
+  quickAddIssue: undefined;
+  clear(): void;
+}
+
+export class WorkspaceIssues extends BaseIssuesStore implements IWorkspaceIssues {
+  viewFlags = {
+    enableQuickAdd: true,
+    enableIssueCreation: true,
+    enableInlineEditing: true,
+  };
+  // service
+  workspaceService;
+  // filterStore
+  issueFilterStore;
+
+  constructor(_rootStore: IIssueRootStore, issueFilterStore: IWorkspaceIssuesFilter) {
+    super(_rootStore, issueFilterStore);
+
+    makeObservable(this, {
+      // action
+      fetchIssues: action,
+      fetchNextIssues: action,
+      fetchIssuesWithExistingPagination: action,
+    });
+    // services
+    this.workspaceService = new WorkspaceService();
+    // filter store
+    this.issueFilterStore = issueFilterStore;
+  }
+
+  fetchParentStats = () => {};
+
+  /** */
+  updateParentStats = () => {};
+
+  /**
+   * This method is called to fetch the first issues of pagination
+   * @param workspaceSlug
+   * @param viewId
+   * @param loadType
+   * @param options
+   * @returns
+   */
+  fetchIssues = async (
+    workspaceSlug: string,
+    viewId: string,
+    loadType: TLoader,
+    options: IssuePaginationOptions,
+    isExistingPaginationOptions: boolean = false
+  ) => {
+    try {
+      // set loader and clear store
+      runInAction(() => {
+        this.setLoader(loadType);
+      });
+      this.clear(!isExistingPaginationOptions);
+
+      // get params from pagination options
+      const params = this.issueFilterStore?.getFilterParams(options, viewId, undefined, undefined, undefined);
+      // call the fetch issues API with the params
+      const response = await this.workspaceService.getViewIssues(workspaceSlug, params, {
+        signal: this.controller.signal,
+      });
+
+      // after fetching issues, call the base method to process the response further
+      this.onfetchIssues(response, options, workspaceSlug, undefined, undefined, !isExistingPaginationOptions);
+      return response;
+    } catch (error) {
+      // set loader to undefined if errored out
+      this.setLoader(undefined);
+      throw error;
+    }
+  };
+
+  /**
+   * This method is called subsequent pages of pagination
+   * if groupId/subgroupId is provided, only that specific group's next page is fetched
+   * else all the groups' next page is fetched
+   * @param workspaceSlug
+   * @param viewId
+   * @param groupId
+   * @param subGroupId
+   * @returns
+   */
+  fetchNextIssues = async (workspaceSlug: string, viewId: string, groupId?: string, subGroupId?: string) => {
+    const cursorObject = this.getPaginationData(groupId, subGroupId);
+    // if there are no pagination options and the next page results do not exist the return
+    if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
+    try {
+      // set Loader
+      this.setLoader("pagination", groupId, subGroupId);
+
+      // get params from stored pagination options
+      const params = this.issueFilterStore?.getFilterParams(
+        this.paginationOptions,
+        viewId,
+        this.getNextCursor(groupId, subGroupId),
+        groupId,
+        subGroupId
+      );
+      // call the fetch issues API with the params for next page in issues
+      const response = await this.workspaceService.getViewIssues(workspaceSlug, params);
+
+      // after the next page of issues are fetched, call the base method to process the response
+      this.onfetchNexIssues(response, groupId, subGroupId);
+      return response;
+    } catch (error) {
+      // set Loader as undefined if errored out
+      this.setLoader(undefined, groupId, subGroupId);
+      throw error;
+    }
+  };
+
+  /**
+   * This Method exists to fetch the first page of the issues with the existing stored pagination
+   * This is useful for refetching when filters, groupBy, orderBy etc changes
+   * @param workspaceSlug
+   * @param viewId
+   * @param loadType
+   * @returns
+   */
+  fetchIssuesWithExistingPagination = async (workspaceSlug: string, viewId: string, loadType: TLoader) => {
+    if (!this.paginationOptions) return;
+    return await this.fetchIssues(workspaceSlug, viewId, loadType, this.paginationOptions, true);
+  };
+
+  // Using aliased names as they cannot be overridden in other stores
+  archiveBulkIssues = this.bulkArchiveIssues;
+  updateIssue = this.issueUpdate;
+  archiveIssue = this.issueArchive;
+
+  // Setting them as undefined as they can not performed on workspace issues
+  quickAddIssue = undefined;
+}
diff --git a/apps/web/core/store/label.store.ts b/apps/web/core/store/label.store.ts
new file mode 100644
index 0000000..637ee84
--- /dev/null
+++ b/apps/web/core/store/label.store.ts
@@ -0,0 +1,309 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set, sortBy } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { IIssueLabel, IIssueLabelTree } from "@plane/types";
+// helpers
+import { buildTree } from "@plane/utils";
+// services
+import { IssueLabelService } from "@/services/issue";
+// store
+import type { CoreRootStore } from "./root.store";
+
+export interface ILabelStore {
+  //Loaders
+  fetchedMap: Record<string, boolean>;
+  //Observable
+  labelMap: Record<string, IIssueLabel>;
+  // computed
+  projectLabels: IIssueLabel[] | undefined;
+  projectLabelsTree: IIssueLabelTree[] | undefined;
+  workspaceLabels: IIssueLabel[] | undefined;
+  //computed actions
+  getWorkspaceLabels: (workspaceSlug: string) => IIssueLabel[] | undefined;
+  getWorkspaceLabelIds: (workspaceSlug: string) => string[] | undefined;
+  getProjectLabels: (projectId: string | undefined | null) => IIssueLabel[] | undefined;
+  getProjectLabelIds: (projectId: string | undefined | null) => string[] | undefined;
+  getLabelById: (labelId: string) => IIssueLabel | null;
+  // fetch actions
+  fetchWorkspaceLabels: (workspaceSlug: string) => Promise<IIssueLabel[]>;
+  fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<IIssueLabel[]>;
+  // crud actions
+  createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
+  updateLabel: (
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    data: Partial<IIssueLabel>
+  ) => Promise<IIssueLabel>;
+  updateLabelPosition: (
+    workspaceSlug: string,
+    projectId: string,
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => Promise<void>;
+  deleteLabel: (workspaceSlug: string, projectId: string, labelId: string) => Promise<void>;
+}
+
+export class LabelStore implements ILabelStore {
+  // root store
+  rootStore;
+  // root store labelMap
+  labelMap: Record<string, IIssueLabel> = {};
+  //loaders
+  fetchedMap: Record<string, boolean> = {};
+  // services
+  issueLabelService;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      labelMap: observable,
+      fetchedMap: observable,
+      // computed
+      projectLabels: computed,
+      projectLabelsTree: computed,
+
+      fetchProjectLabels: action,
+      createLabel: action,
+      updateLabel: action,
+      updateLabelPosition: action,
+      deleteLabel: action,
+    });
+
+    // root store
+    this.rootStore = _rootStore;
+    // services
+    this.issueLabelService = new IssueLabelService();
+  }
+
+  /**
+   * Returns the labelMap belongs to a specific workspace
+   */
+  get workspaceLabels() {
+    const currentWorkspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspaceDetails) return;
+    return this.getWorkspaceLabels(currentWorkspaceDetails.slug);
+  }
+
+  /**
+   * Returns the labelMap belonging to the current project
+   */
+  get projectLabels() {
+    const projectId = this.rootStore.router.projectId;
+    const workspaceSlug = this.rootStore.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
+    return sortBy(
+      Object.values(this.labelMap).filter((label) => label?.project_id === projectId),
+      "sort_order"
+    );
+  }
+
+  /**
+   * Returns the labelMap in a tree format
+   */
+  get projectLabelsTree() {
+    if (!this.projectLabels) return;
+    return buildTree(this.projectLabels);
+  }
+
+  getWorkspaceLabels = computedFn((workspaceSlug: string) => {
+    const workspaceDetails = this.rootStore.workspaceRoot.getWorkspaceBySlug(workspaceSlug);
+    if (!workspaceDetails || !this.fetchedMap[workspaceSlug]) return;
+    return sortBy(
+      Object.values(this.labelMap).filter((label) => label.workspace_id === workspaceDetails.id),
+      "sort_order"
+    );
+  });
+
+  getWorkspaceLabelIds = computedFn(
+    (workspaceSlug: string) => this.getWorkspaceLabels(workspaceSlug)?.map((label) => label.id) ?? undefined
+  );
+
+  getProjectLabels = computedFn((projectId: string | undefined | null) => {
+    const workspaceSlug = this.rootStore.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
+    return sortBy(
+      Object.values(this.labelMap).filter((label) => label?.project_id === projectId),
+      "sort_order"
+    );
+  });
+
+  /**
+   * Returns the label ids for a specific project
+   * @param projectId
+   * @returns string[]
+   */
+  getProjectLabelIds = computedFn((projectId: string | undefined | null) => {
+    const workspaceSlug = this.rootStore.router.workspaceSlug;
+    if (!workspaceSlug || !projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug]))
+      return undefined;
+    return this.getProjectLabels(projectId)?.map((label) => label.id) ?? [];
+  });
+
+  /**
+   * get label info from the map of labels in the store using label id
+   * @param labelId
+   */
+  getLabelById = computedFn((labelId: string): IIssueLabel | null => this.labelMap?.[labelId] || null);
+
+  /**
+   * Fetches all the labelMap belongs to a specific project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<IIssueLabel[]>
+   */
+  fetchProjectLabels = async (workspaceSlug: string, projectId: string) =>
+    await this.issueLabelService.getProjectLabels(workspaceSlug, projectId).then((response) => {
+      runInAction(() => {
+        response.forEach((label) => {
+          set(this.labelMap, [label.id], label);
+        });
+        set(this.fetchedMap, projectId, true);
+      });
+      return response;
+    });
+
+  /**
+   * Fetches all the labelMap belongs to a specific project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<IIssueLabel[]>
+   */
+  fetchWorkspaceLabels = async (workspaceSlug: string) =>
+    await this.issueLabelService.getWorkspaceIssueLabels(workspaceSlug).then((response) => {
+      runInAction(() => {
+        response.forEach((label) => {
+          set(this.labelMap, [label.id], label);
+        });
+        set(this.fetchedMap, workspaceSlug, true);
+      });
+      return response;
+    });
+
+  /**
+   * Creates a new label for a specific project and add it to the store
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns Promise<IIssueLabel>
+   */
+  createLabel = async (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) =>
+    await this.issueLabelService.createIssueLabel(workspaceSlug, projectId, data).then((response) => {
+      runInAction(() => {
+        set(this.labelMap, [response.id], response);
+      });
+      return response;
+    });
+
+  /**
+   * Updates a label for a specific project and update it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @param labelId
+   * @param data
+   * @returns Promise<IIssueLabel>
+   */
+  updateLabel = async (workspaceSlug: string, projectId: string, labelId: string, data: Partial<IIssueLabel>) => {
+    const originalLabel = this.labelMap[labelId];
+    try {
+      runInAction(() => {
+        set(this.labelMap, [labelId], { ...originalLabel, ...data });
+      });
+      const response = await this.issueLabelService.patchIssueLabel(workspaceSlug, projectId, labelId, data);
+      return response;
+    } catch (error) {
+      console.log("Failed to update label from project store");
+      runInAction(() => {
+        set(this.labelMap, [labelId], originalLabel);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * updates the sort order of a label and updates the label information using API.
+   * @param workspaceSlug
+   * @param projectId
+   * @param labelId
+   * @param parentId
+   * @param index
+   * @param isSameParent
+   * @param prevIndex
+   * @returns
+   */
+  updateLabelPosition = async (
+    workspaceSlug: string,
+    projectId: string,
+    draggingLabelId: string,
+    droppedParentId: string | null,
+    droppedLabelId: string | undefined,
+    dropAtEndOfList: boolean
+  ) => {
+    const currLabel = this.labelMap?.[draggingLabelId];
+    const labelTree = this.projectLabelsTree;
+    let currentArray: IIssueLabel[];
+
+    if (!currLabel || !labelTree) return;
+
+    //If its is dropped in the same parent then, there is not specific label on which it is mentioned then keep it's original position
+    if (currLabel.parent === droppedParentId && !droppedLabelId) return;
+
+    const data: Partial<IIssueLabel> = { parent: droppedParentId };
+
+    // find array in which the label is to be added
+    if (!droppedParentId) currentArray = labelTree;
+    else currentArray = labelTree?.find((label) => label.id === droppedParentId)?.children || [];
+
+    let droppedLabelIndex = currentArray.findIndex((label) => label.id === droppedLabelId);
+    //if the position of droppedLabelId cannot be determined then drop it at the end of the list
+    if (dropAtEndOfList || droppedLabelIndex === -1) droppedLabelIndex = currentArray.length;
+
+    //if currently adding to a new array, then let backend assign a sort order
+    if (currentArray.length > 0) {
+      let prevSortOrder: number | undefined, nextSortOrder: number | undefined;
+
+      if (typeof currentArray[droppedLabelIndex - 1] !== "undefined") {
+        prevSortOrder = currentArray[droppedLabelIndex - 1].sort_order;
+      }
+      if (typeof currentArray[droppedLabelIndex] !== "undefined") {
+        nextSortOrder = currentArray[droppedLabelIndex].sort_order;
+      }
+
+      let sortOrder: number = 65535;
+      //based on the next and previous labelMap calculate current sort order
+      if (prevSortOrder && nextSortOrder) {
+        sortOrder = (prevSortOrder + nextSortOrder) / 2;
+      } else if (nextSortOrder) {
+        sortOrder = nextSortOrder / 2;
+      } else if (prevSortOrder) {
+        sortOrder = prevSortOrder + 10000;
+      }
+      data.sort_order = sortOrder;
+    }
+
+    return this.updateLabel(workspaceSlug, projectId, draggingLabelId, data);
+  };
+
+  /**
+   * Delete the label from the project and remove it from the labelMap object
+   * @param workspaceSlug
+   * @param projectId
+   * @param labelId
+   */
+  deleteLabel = async (workspaceSlug: string, projectId: string, labelId: string) => {
+    if (!this.labelMap[labelId]) return;
+    await this.issueLabelService.deleteIssueLabel(workspaceSlug, projectId, labelId).then(() => {
+      runInAction(() => {
+        delete this.labelMap[labelId];
+      });
+    });
+  };
+}
diff --git a/apps/web/core/store/member/index.ts b/apps/web/core/store/member/index.ts
new file mode 100644
index 0000000..10474ab
--- /dev/null
+++ b/apps/web/core/store/member/index.ts
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { makeObservable, observable } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { IUserLite } from "@plane/types";
+// plane web imports
+import type { IProjectMemberStore } from "@/store/member/project/base-project-member.store";
+import { ProjectMemberStore } from "@/store/member/project/base-project-member.store";
+import type { RootStore } from "@/store/root.store";
+// local imports
+import type { IWorkspaceMemberStore } from "./workspace/workspace-member.store";
+import { WorkspaceMemberStore } from "./workspace/workspace-member.store";
+
+export interface IMemberRootStore {
+  // observables
+  memberMap: Record<string, IUserLite>;
+  // computed actions
+  getMemberIds: () => string[];
+  getUserDetails: (userId: string) => IUserLite | undefined;
+  // sub-stores
+  workspace: IWorkspaceMemberStore;
+  project: IProjectMemberStore;
+}
+
+export class MemberRootStore implements IMemberRootStore {
+  // observables
+  memberMap: Record<string, IUserLite> = {};
+  // sub-stores
+  workspace: IWorkspaceMemberStore;
+  project: IProjectMemberStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      memberMap: observable,
+    });
+    // sub-stores
+    this.workspace = new WorkspaceMemberStore(this, _rootStore);
+    this.project = new ProjectMemberStore(this, _rootStore);
+  }
+
+  /**
+   * @description get all member ids
+   */
+  getMemberIds = computedFn(() => Object.keys(this.memberMap));
+
+  /**
+   * @description get user details from userId
+   * @param userId
+   */
+  getUserDetails = computedFn((userId: string): IUserLite | undefined => this.memberMap?.[userId] ?? undefined);
+}
diff --git a/apps/web/core/store/member/project/base-project-member.store.ts b/apps/web/core/store/member/project/base-project-member.store.ts
new file mode 100644
index 0000000..5ec4c09
--- /dev/null
+++ b/apps/web/core/store/member/project/base-project-member.store.ts
@@ -0,0 +1,501 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { uniq, unset, set, update, sortBy } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import { EUserPermissions } from "@plane/constants";
+import type {
+  EUserProjectRoles,
+  IProjectBulkAddFormData,
+  IProjectUserPropertiesResponse,
+  IUserLite,
+  TProjectMembership,
+} from "@plane/types";
+// plane web imports
+import type { RootStore } from "@/store/root.store";
+// services
+import { ProjectMemberService, ProjectService } from "@/services/project";
+// store
+import type { IProjectStore } from "@/store/project/project.store";
+import type { IRouterStore } from "@/store/router.store";
+import type { IUserStore } from "@/store/user";
+// local imports
+import type { IMemberRootStore } from "../index";
+import { sortProjectMembers } from "../utils";
+import type { IProjectMemberFiltersStore } from "./project-member-filters.store";
+import { ProjectMemberFiltersStore } from "./project-member-filters.store";
+
+export interface IProjectMemberDetails extends Omit<TProjectMembership, "member"> {
+  member: IUserLite;
+}
+
+export interface IBaseProjectMemberStore {
+  // observables
+  projectMemberFetchStatusMap: {
+    [projectId: string]: boolean;
+  };
+  projectMemberMap: {
+    [projectId: string]: Record<string, TProjectMembership>;
+  };
+  projectUserPropertiesMap: {
+    [projectId: string]: IProjectUserPropertiesResponse;
+  };
+  // filters store
+  filters: IProjectMemberFiltersStore;
+  // computed
+  projectMemberIds: string[] | null;
+  // computed actions
+  getProjectMemberFetchStatus: (projectId: string) => boolean;
+  getProjectMemberDetails: (userId: string, projectId: string) => IProjectMemberDetails | null;
+  getProjectMemberIds: (projectId: string, includeGuestUsers: boolean) => string[] | null;
+  getFilteredProjectMemberDetails: (userId: string, projectId: string) => IProjectMemberDetails | null;
+  getProjectUserProperties: (projectId: string) => IProjectUserPropertiesResponse | null;
+  // fetch actions
+  fetchProjectMembers: (
+    workspaceSlug: string,
+    projectId: string,
+    clearExistingMembers?: boolean
+  ) => Promise<TProjectMembership[]>;
+  fetchProjectUserProperties: (workspaceSlug: string, projectId: string) => Promise<IProjectUserPropertiesResponse>;
+  // update actions
+  updateProjectUserProperties: (
+    workspaceSlug: string,
+    projectId: string,
+    data: Partial<IProjectUserPropertiesResponse>
+  ) => Promise<IProjectUserPropertiesResponse>;
+  // bulk operation actions
+  bulkAddMembersToProject: (
+    workspaceSlug: string,
+    projectId: string,
+    data: IProjectBulkAddFormData
+  ) => Promise<TProjectMembership[]>;
+  // crud actions
+  updateMemberRole: (
+    workspaceSlug: string,
+    projectId: string,
+    userId: string,
+    role: EUserProjectRoles
+  ) => Promise<TProjectMembership>;
+  removeMemberFromProject: (workspaceSlug: string, projectId: string, userId: string) => Promise<void>;
+}
+
+export class BaseProjectMemberStore implements IBaseProjectMemberStore {
+  // observables
+  projectMemberFetchStatusMap: {
+    [projectId: string]: boolean;
+  } = {};
+  projectMemberMap: {
+    [projectId: string]: Record<string, TProjectMembership>;
+  } = {};
+  projectUserPropertiesMap: {
+    [projectId: string]: IProjectUserPropertiesResponse;
+  } = {};
+  // filters store
+  filters: IProjectMemberFiltersStore;
+  // stores
+  routerStore: IRouterStore;
+  userStore: IUserStore;
+  memberRoot: IMemberRootStore;
+  projectRoot: IProjectStore;
+  rootStore: RootStore;
+  // services
+  projectMemberService;
+  projectService;
+
+  constructor(_memberRoot: IMemberRootStore, _rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      projectMemberMap: observable,
+      projectUserPropertiesMap: observable,
+      // computed
+      projectMemberIds: computed,
+      // actions
+      fetchProjectMembers: action,
+      fetchProjectUserProperties: action,
+      updateProjectUserProperties: action,
+      bulkAddMembersToProject: action,
+      updateMemberRole: action,
+      removeMemberFromProject: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    this.routerStore = _rootStore.router;
+    this.userStore = _rootStore.user;
+    this.memberRoot = _memberRoot;
+    this.projectRoot = _rootStore.projectRoot.project;
+    this.filters = new ProjectMemberFiltersStore();
+    // services
+    this.projectMemberService = new ProjectMemberService();
+    this.projectService = new ProjectService();
+  }
+
+  /**
+   * @description get the list of all the user ids of all the members of the current project
+   * Returns filtered and sorted member IDs based on current filters
+   */
+  get projectMemberIds() {
+    const projectId = this.routerStore.projectId;
+    if (!projectId) return null;
+
+    const members = Object.values(this.projectMemberMap?.[projectId] ?? {});
+    if (members.length === 0) return null;
+
+    // Access the filters directly to ensure MobX tracking
+    const currentFilters = this.filters.filtersMap[projectId];
+
+    // Apply filters and sorting directly here to ensure MobX tracking
+    const sortedMembers = sortProjectMembers(
+      members,
+      this.memberRoot?.memberMap || {},
+      (member) => member.member,
+      currentFilters
+    );
+
+    return sortedMembers.map((member) => member.member);
+  }
+
+  /**
+   * @description get the fetch status of a project member
+   * @param projectId
+   */
+  getProjectMemberFetchStatus = computedFn((projectId: string) => this.projectMemberFetchStatusMap?.[projectId]);
+
+  /**
+   * @description get the project memberships
+   * @param projectId
+   */
+  protected getProjectMemberships = computedFn((projectId: string) =>
+    Object.values(this.projectMemberMap?.[projectId] ?? {})
+  );
+
+  /**
+   * @description get the project membership by user id
+   * @param userId
+   * @param projectId
+   */
+  protected getProjectMembershipByUserId = computedFn(
+    (userId: string, projectId: string) => this.projectMemberMap?.[projectId]?.[userId]
+  );
+
+  /**
+   * @description get the role from the project membership
+   * @param userId
+   * @param projectId
+   */
+  protected getRoleFromProjectMembership = computedFn(
+    (userId: string, projectId: string): EUserProjectRoles | undefined => {
+      const projectMembership = this.getProjectMembershipByUserId(userId, projectId);
+      if (!projectMembership) return undefined;
+      const projectMembershipRole = projectMembership.original_role ?? projectMembership.role;
+      return projectMembershipRole ? (projectMembershipRole as EUserProjectRoles) : undefined;
+    }
+  );
+
+  /**
+   * @description Returns the project membership role for a user
+   * @description This method is specifically used when adding new members to a project. For existing members,
+   * the role is fetched directly from the backend during member listing.
+   * @param { string } userId - The ID of the user
+   * @param { string } projectId - The ID of the project
+   * @returns { EUserProjectRoles | undefined } The user's role in the project, or undefined if not found
+   */
+  getUserProjectRole = computedFn((userId: string, projectId: string): EUserProjectRoles | undefined =>
+    this.getRoleFromProjectMembership(userId, projectId)
+  );
+
+  /**
+   * @description get the details of a project member
+   * @param userId
+   * @param projectId
+   */
+  getProjectMemberDetails = computedFn((userId: string, projectId: string) => {
+    const projectMember = this.getProjectMembershipByUserId(userId, projectId);
+    const userDetails = this.memberRoot?.memberMap?.[projectMember?.member];
+    if (!projectMember || !userDetails) return null;
+    const memberDetails: IProjectMemberDetails = {
+      id: projectMember.id,
+      role: projectMember.role,
+      original_role: projectMember.original_role,
+      member: {
+        ...userDetails,
+        joining_date: projectMember.created_at ?? undefined,
+      },
+      created_at: projectMember.created_at,
+    };
+    return memberDetails;
+  });
+
+  /**
+   * @description get the list of all the user ids of all the members of a project using projectId
+   * @param projectId
+   */
+  getProjectMemberIds = computedFn((projectId: string, includeGuestUsers: boolean): string[] | null => {
+    if (!this.projectMemberMap?.[projectId]) return null;
+    let members = this.getProjectMemberships(projectId);
+    if (includeGuestUsers === false) {
+      members = members.filter((m) => m.role !== EUserPermissions.GUEST);
+    }
+    members = sortBy(members, [
+      (m) => m.member !== this.userStore.data?.id,
+      (m) => this.memberRoot?.memberMap?.[m.member]?.display_name?.toLowerCase(),
+    ]);
+    const memberIds = members.map((m) => m.member);
+    return memberIds;
+  });
+
+  /**
+   * @description get the filtered project member details for a specific user
+   * @param userId
+   * @param projectId
+   */
+  getFilteredProjectMemberDetails = computedFn((userId: string, projectId: string) => {
+    const projectMember = this.getProjectMembershipByUserId(userId, projectId);
+    const userDetails = this.memberRoot?.memberMap?.[projectMember?.member];
+    if (!projectMember || !userDetails) return null;
+
+    // Check if this member passes the current filters
+    const allMembers = this.getProjectMemberships(projectId);
+    const filteredMemberIds = this.filters.getFilteredMemberIds(
+      allMembers,
+      this.memberRoot?.memberMap || {},
+      (member) => member.member,
+      projectId
+    );
+
+    // Return null if this user doesn't pass the filters
+    if (!filteredMemberIds.includes(userId)) return null;
+
+    const memberDetails: IProjectMemberDetails = {
+      id: projectMember.id,
+      role: projectMember.role,
+      original_role: projectMember.original_role,
+      member: {
+        ...userDetails,
+        joining_date: projectMember.created_at ?? undefined,
+      },
+      created_at: projectMember.created_at,
+    };
+    return memberDetails;
+  });
+
+  /**
+   * @description fetch the list of all the members of a project
+   * @param workspaceSlug
+   * @param projectId
+   */
+  fetchProjectMembers = async (workspaceSlug: string, projectId: string, clearExistingMembers: boolean = false) =>
+    await this.projectMemberService.fetchProjectMembers(workspaceSlug, projectId).then((response) => {
+      runInAction(() => {
+        if (clearExistingMembers) {
+          unset(this.projectMemberMap, [projectId]);
+        }
+        response.forEach((member) => {
+          set(this.projectMemberMap, [projectId, member.member], member);
+        });
+        set(this.projectMemberFetchStatusMap, [projectId], true);
+      });
+      return response;
+    });
+
+  /**
+   * @description bulk add members to a project
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns Promise<TProjectMembership[]>
+   */
+  bulkAddMembersToProject = async (workspaceSlug: string, projectId: string, data: IProjectBulkAddFormData) =>
+    await this.projectMemberService.bulkAddMembersToProject(workspaceSlug, projectId, data).then((response) => {
+      runInAction(() => {
+        response.forEach((member) => {
+          set(this.projectMemberMap, [projectId, member.member], {
+            ...member,
+            role: this.getUserProjectRole(member.member, projectId) ?? member.role,
+            original_role: member.role,
+          });
+        });
+      });
+      update(this.projectRoot.projectMap, [projectId, "members"], (memberIds) =>
+        uniq([...memberIds, ...data.members.map((m) => m.member_id)])
+      );
+      this.projectRoot.projectMap[projectId].members = this.projectRoot.projectMap?.[projectId]?.members?.concat(
+        data.members.map((m) => m.member_id)
+      );
+
+      return response;
+    });
+
+  /**
+   * @description Returns the role to use when updating a project member
+   * @param projectId
+   * @param userId
+   * @param role
+   */
+  getProjectMemberRoleForUpdate = (_projectId: string, _userId: string, role: EUserProjectRoles): EUserProjectRoles =>
+    role;
+
+  /**
+   * @description update the role of a member in a project
+   * @param workspaceSlug
+   * @param projectId
+   * @param userId
+   * @param data
+   */
+  updateMemberRole = async (workspaceSlug: string, projectId: string, userId: string, role: EUserProjectRoles) => {
+    const memberDetails = this.getProjectMemberDetails(userId, projectId);
+    if (!memberDetails || !memberDetails?.id) throw new Error("Member not found");
+    // original data to revert back in case of error
+    const isCurrentUser = this.rootStore.user.data?.id === userId;
+    const membershipBeforeUpdate = { ...this.getProjectMembershipByUserId(userId, projectId) };
+    const permissionBeforeUpdate = isCurrentUser
+      ? this.rootStore.user.permission.getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId)
+      : undefined;
+    const updatedProjectRole = this.getProjectMemberRoleForUpdate(projectId, userId, role);
+    try {
+      runInAction(() => {
+        set(this.projectMemberMap, [projectId, userId, "original_role"], role);
+        set(this.projectMemberMap, [projectId, userId, "role"], updatedProjectRole);
+        if (isCurrentUser) {
+          set(
+            this.rootStore.user.permission.workspaceProjectsPermissions,
+            [workspaceSlug, projectId],
+            updatedProjectRole
+          );
+        }
+        set(this.rootStore.user.permission.projectUserInfo, [workspaceSlug, projectId, "role"], updatedProjectRole);
+      });
+      const response = await this.projectMemberService.updateProjectMember(
+        workspaceSlug,
+        projectId,
+        memberDetails?.id,
+        {
+          role,
+        }
+      );
+      return response;
+    } catch (error) {
+      // revert back to original members in case of error
+      runInAction(() => {
+        set(this.projectMemberMap, [projectId, userId, "original_role"], membershipBeforeUpdate?.original_role);
+        set(this.projectMemberMap, [projectId, userId, "role"], membershipBeforeUpdate?.role);
+        if (isCurrentUser) {
+          set(
+            this.rootStore.user.permission.workspaceProjectsPermissions,
+            [workspaceSlug, projectId],
+            membershipBeforeUpdate?.original_role
+          );
+          set(
+            this.rootStore.user.permission.projectUserInfo,
+            [workspaceSlug, projectId, "role"],
+            permissionBeforeUpdate
+          );
+        }
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description Handles the removal of a member from a project
+   * @param projectId - The ID of the project to remove the member from
+   * @param userId - The ID of the user to remove from the project
+   */
+  protected handleMemberRemoval = (projectId: string, userId: string) => {
+    unset(this.projectMemberMap, [projectId, userId]);
+    set(
+      this.projectRoot.projectMap,
+      [projectId, "members"],
+      this.projectRoot.projectMap?.[projectId]?.members?.filter((memberId) => memberId !== userId)
+    );
+  };
+
+  /**
+   * @description Processes the removal of a member from a project
+   * @param projectId - The ID of the project to remove the member from
+   * @param userId - The ID of the user to remove from the project
+   */
+  processMemberRemoval = (projectId: string, userId: string) => this.handleMemberRemoval(projectId, userId);
+
+  /**
+   * @description remove a member from a project
+   * @param workspaceSlug
+   * @param projectId
+   * @param userId
+   */
+  removeMemberFromProject = async (workspaceSlug: string, projectId: string, userId: string) => {
+    const memberDetails = this.getProjectMemberDetails(userId, projectId);
+    if (!memberDetails || !memberDetails?.id) throw new Error("Member not found");
+    // oxlint-disable-next-line promise/always-return
+    await this.projectMemberService.deleteProjectMember(workspaceSlug, projectId, memberDetails?.id).then(() => {
+      runInAction(() => {
+        this.processMemberRemoval(projectId, userId);
+      });
+    });
+  };
+
+  /**
+   * @description get project member preferences
+   * @param projectId
+   */
+  getProjectUserProperties = computedFn(
+    (projectId: string): IProjectUserPropertiesResponse | null => this.projectUserPropertiesMap[projectId] || null
+  );
+
+  /**
+   * @description fetch project member preferences
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   */
+  fetchProjectUserProperties = async (
+    workspaceSlug: string,
+    projectId: string
+  ): Promise<IProjectUserPropertiesResponse> => {
+    const response = await this.projectService.getProjectUserProperties(workspaceSlug, projectId);
+    runInAction(() => {
+      set(this.projectUserPropertiesMap, [projectId], response);
+    });
+    return response;
+  };
+
+  /**
+   * @description update project member preferences
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   */
+  updateProjectUserProperties = async (
+    workspaceSlug: string,
+    projectId: string,
+    data: Partial<IProjectUserPropertiesResponse>
+  ): Promise<IProjectUserPropertiesResponse> => {
+    const previousProperties = this.projectUserPropertiesMap[projectId];
+    try {
+      // Optimistically update the store
+      runInAction(() => {
+        set(this.projectUserPropertiesMap, [projectId], data);
+      });
+      const response = await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, data);
+      return response;
+    } catch (error) {
+      // Revert on error
+      runInAction(() => {
+        if (previousProperties) {
+          set(this.projectUserPropertiesMap, [projectId], previousProperties);
+        } else {
+          unset(this.projectUserPropertiesMap, [projectId]);
+        }
+      });
+      throw error;
+    }
+  };
+}
+
+// Aliases so consumers can keep using ProjectMemberStore / IProjectMemberStore
+export type IProjectMemberStore = IBaseProjectMemberStore;
+export { BaseProjectMemberStore as ProjectMemberStore };
diff --git a/apps/web/core/store/member/project/project-member-filters.store.ts b/apps/web/core/store/member/project/project-member-filters.store.ts
new file mode 100644
index 0000000..2d4fa40
--- /dev/null
+++ b/apps/web/core/store/member/project/project-member-filters.store.ts
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, observable } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { IUserLite, TProjectMembership } from "@plane/types";
+// local imports
+import type { IMemberFilters } from "../utils";
+import { sortProjectMembers } from "../utils";
+
+export interface IProjectMemberFiltersStore {
+  // observables
+  filtersMap: Record<string, IMemberFilters>;
+  // computed actions
+  getFilteredMemberIds: (
+    members: TProjectMembership[],
+    memberDetailsMap: Record<string, IUserLite>,
+    getMemberKey: (member: TProjectMembership) => string,
+    projectId: string
+  ) => string[];
+  // actions
+  updateFilters: (projectId: string, filters: Partial<IMemberFilters>) => void;
+  getFilters: (projectId: string) => IMemberFilters | undefined;
+}
+
+export class ProjectMemberFiltersStore implements IProjectMemberFiltersStore {
+  // observables
+  filtersMap: Record<string, IMemberFilters> = {};
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      filtersMap: observable,
+      // actions
+      updateFilters: action,
+    });
+  }
+
+  /**
+   * @description get filtered and sorted member ids
+   * @param members - array of project membership objects
+   * @param memberDetailsMap - map of member details by user id
+   * @param getMemberKey - function to get member key from membership object
+   * @param projectId - project id to get filters for
+   */
+  getFilteredMemberIds = computedFn(
+    (
+      members: TProjectMembership[],
+      memberDetailsMap: Record<string, IUserLite>,
+      getMemberKey: (member: TProjectMembership) => string,
+      projectId: string
+    ): string[] => {
+      if (!members || members.length === 0) return [];
+
+      // Apply filters and sorting
+      const sortedMembers = sortProjectMembers(members, memberDetailsMap, getMemberKey, this.filtersMap[projectId]);
+
+      return sortedMembers.map(getMemberKey);
+    }
+  );
+
+  getFilters = (projectId: string) => this.filtersMap[projectId];
+
+  /**
+   * @description update filters
+   * @param projectId - project id
+   * @param filters - partial filters to update
+   */
+  updateFilters = (projectId: string, filters: Partial<IMemberFilters>) => {
+    const current = this.filtersMap[projectId] ?? {};
+    this.filtersMap[projectId] = { ...current, ...filters };
+  };
+}
diff --git a/apps/web/core/store/member/utils.ts b/apps/web/core/store/member/utils.ts
new file mode 100644
index 0000000..2376766
--- /dev/null
+++ b/apps/web/core/store/member/utils.ts
@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Types and utilities for member filtering
+import type { EUserPermissions, TMemberOrderByOptions } from "@plane/constants";
+import type { IUserLite, TProjectMembership } from "@plane/types";
+
+export interface IMemberFilters {
+  order_by?: TMemberOrderByOptions;
+  roles?: string[];
+}
+
+// Helper function to parse order key and direction
+export const parseOrderKey = (orderKey?: TMemberOrderByOptions): { field: string; direction: "asc" | "desc" } => {
+  // Default to sorting by display_name in ascending order when no order key is provided
+  if (!orderKey) {
+    return {
+      field: "display_name",
+      direction: "asc",
+    };
+  }
+
+  const isDescending = orderKey.startsWith("-");
+  const field = isDescending ? orderKey.slice(1) : orderKey;
+  return {
+    field,
+    direction: isDescending ? "desc" : "asc",
+  };
+};
+
+// Unified function to get sort key for any member type
+export const getMemberSortKey = (memberDetails: IUserLite, field: string, memberRole?: string): string | Date => {
+  switch (field) {
+    case "display_name":
+      return memberDetails.display_name?.toLowerCase() || "";
+    case "full_name": {
+      const firstName = memberDetails.first_name || "";
+      const lastName = memberDetails.last_name || "";
+      return `${firstName} ${lastName}`.toLowerCase().trim();
+    }
+    case "email":
+      return memberDetails.email?.toLowerCase() || "";
+    case "joining_date": {
+      if (!memberDetails.joining_date) {
+        // Return a very old date for missing dates to sort them last
+        return new Date(0);
+      }
+      const date = new Date(memberDetails.joining_date);
+      // Return a very old date for invalid dates to sort them last
+      return isNaN(date.getTime()) ? new Date(0) : date;
+    }
+    case "role":
+      return (memberRole ?? "").toString().toLowerCase();
+    default:
+      return "";
+  }
+};
+
+// Filter functions
+export const filterProjectMembersByRole = (
+  members: TProjectMembership[],
+  roleFilters: string[]
+): TProjectMembership[] => {
+  if (roleFilters.length === 0) return members;
+
+  return members.filter((member) => {
+    const memberRole = String(member.role ?? member.original_role ?? "");
+    return roleFilters.includes(memberRole);
+  });
+};
+
+export const filterWorkspaceMembersByRole = <T extends { role: string | EUserPermissions; is_active?: boolean }>(
+  members: T[],
+  roleFilters: string[]
+): T[] => {
+  if (roleFilters.length === 0) return members;
+
+  return members.filter((member) => {
+    const memberRole = String(member.role ?? "");
+    const isSuspended = member.is_active === false;
+
+    // Check if suspended is in the role filters
+    const hasSuspendedFilter = roleFilters.includes("suspended");
+    // Get non-suspended role filters
+    const activeRoleFilters = roleFilters.filter((role) => role !== "suspended");
+
+    // For suspended users, include them only if suspended filter is selected
+    if (isSuspended) {
+      return hasSuspendedFilter;
+    }
+
+    // For active users, include them only if their role matches any active role filter
+    return activeRoleFilters.includes(memberRole);
+  });
+};
+
+// Unified sorting function
+export const sortMembers = <T>(
+  members: T[],
+  memberDetailsMap: Record<string, IUserLite>,
+  getMemberKey: (member: T) => string,
+  getMemberRole: (member: T) => string,
+  orderBy?: TMemberOrderByOptions
+): T[] => {
+  if (!orderBy) return members;
+
+  const { field, direction } = parseOrderKey(orderBy);
+
+  return [...members].sort((a, b) => {
+    const aKey = getMemberKey(a);
+    const bKey = getMemberKey(b);
+    const aMemberDetails = memberDetailsMap[aKey];
+    const bMemberDetails = memberDetailsMap[bKey];
+
+    if (!aMemberDetails || !bMemberDetails) return 0;
+
+    const aRole = getMemberRole(a);
+    const bRole = getMemberRole(b);
+
+    const aValue = getMemberSortKey(aMemberDetails, field, aRole);
+    const bValue = getMemberSortKey(bMemberDetails, field, bRole);
+
+    let comparison = 0;
+
+    if (field === "joining_date") {
+      // For dates, we need to handle Date objects and ensure they're valid
+      const aDate = aValue instanceof Date ? aValue : new Date(aValue);
+      const bDate = bValue instanceof Date ? bValue : new Date(bValue);
+
+      // Handle invalid dates by treating them as very old dates
+      const aTime = isNaN(aDate.getTime()) ? 0 : aDate.getTime();
+      const bTime = isNaN(bDate.getTime()) ? 0 : bDate.getTime();
+
+      comparison = aTime - bTime;
+    } else {
+      // For strings, use localeCompare for proper alphabetical sorting
+      const aStr = String(aValue);
+      const bStr = String(bValue);
+      comparison = aStr.localeCompare(bStr);
+    }
+
+    return direction === "desc" ? -comparison : comparison;
+  });
+};
+
+// Specific implementations using the unified functions
+export const sortProjectMembers = (
+  members: TProjectMembership[],
+  memberDetailsMap: Record<string, IUserLite>,
+  getMemberKey: (member: TProjectMembership) => string,
+  filters?: IMemberFilters
+): TProjectMembership[] => {
+  // Apply role filtering first
+  const filteredMembers =
+    filters?.roles && filters.roles.length > 0 ? filterProjectMembersByRole(members, filters.roles) : members;
+
+  // If no order_by filter, return filtered members
+  if (!filters?.order_by) return filteredMembers;
+
+  // Apply sorting
+  return sortMembers(
+    filteredMembers,
+    memberDetailsMap,
+    getMemberKey,
+    (member) => String(member.role ?? member.original_role ?? ""),
+    filters.order_by
+  );
+};
+
+export const sortWorkspaceMembers = <T extends { role: string | EUserPermissions; is_active?: boolean }>(
+  members: T[],
+  memberDetailsMap: Record<string, IUserLite>,
+  getMemberKey: (member: T) => string,
+  filters?: IMemberFilters
+): T[] => {
+  const filteredMembers =
+    filters?.roles && filters.roles.length > 0 ? filterWorkspaceMembersByRole(members, filters.roles) : members;
+
+  // If no order_by filter, return filtered members
+  if (!filters?.order_by) return filteredMembers;
+
+  // Apply sorting
+  return sortMembers(
+    filteredMembers,
+    memberDetailsMap,
+    getMemberKey,
+    (member) => String(member.role ?? ""),
+    filters.order_by
+  );
+};
diff --git a/apps/web/core/store/member/workspace/workspace-member-filters.store.ts b/apps/web/core/store/member/workspace/workspace-member-filters.store.ts
new file mode 100644
index 0000000..4041be9
--- /dev/null
+++ b/apps/web/core/store/member/workspace/workspace-member-filters.store.ts
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, observable } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { EUserPermissions } from "@plane/constants";
+import type { IUserLite } from "@plane/types";
+// local imports
+import type { IMemberFilters } from "../utils";
+import { sortWorkspaceMembers } from "../utils";
+
+// Workspace membership interface matching the store structure
+interface IWorkspaceMembership {
+  id: string;
+  member: string;
+  role: EUserPermissions;
+  is_active?: boolean;
+}
+
+export interface IWorkspaceMemberFiltersStore {
+  // observables
+  filters: IMemberFilters;
+  // computed actions
+  getFilteredMemberIds: (
+    members: IWorkspaceMembership[],
+    memberDetailsMap: Record<string, IUserLite>,
+    getMemberKey: (member: IWorkspaceMembership) => string
+  ) => string[];
+  // actions
+  updateFilters: (filters: Partial<IMemberFilters>) => void;
+}
+
+export class WorkspaceMemberFiltersStore implements IWorkspaceMemberFiltersStore {
+  // observables
+  filters: IMemberFilters = {};
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      filters: observable,
+      // actions
+      updateFilters: action,
+    });
+  }
+
+  /**
+   * @description get filtered and sorted member ids
+   * @param members - array of workspace membership objects
+   * @param memberDetailsMap - map of member details by user id
+   * @param getMemberKey - function to get member key from membership object
+   */
+  getFilteredMemberIds = computedFn(
+    (
+      members: IWorkspaceMembership[],
+      memberDetailsMap: Record<string, IUserLite>,
+      getMemberKey: (member: IWorkspaceMembership) => string
+    ): string[] => {
+      if (!members || members.length === 0) return [];
+
+      // Apply filters and sorting
+      const sortedMembers = sortWorkspaceMembers(members, memberDetailsMap, getMemberKey, this.filters);
+
+      return sortedMembers.map(getMemberKey);
+    }
+  );
+
+  /**
+   * @description update filters
+   * @param filters - partial filters to update
+   */
+  updateFilters = (filters: Partial<IMemberFilters>) => {
+    this.filters = { ...this.filters, ...filters };
+  };
+}
diff --git a/apps/web/core/store/member/workspace/workspace-member.store.ts b/apps/web/core/store/member/workspace/workspace-member.store.ts
new file mode 100644
index 0000000..6028d56
--- /dev/null
+++ b/apps/web/core/store/member/workspace/workspace-member.store.ts
@@ -0,0 +1,366 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set, sortBy } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { EUserPermissions } from "@plane/constants";
+import type { IWorkspaceBulkInviteFormData, IWorkspaceMember, IWorkspaceMemberInvitation } from "@plane/types";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// types
+import type { IRouterStore } from "@/store/router.store";
+import type { IUserStore } from "@/store/user";
+// store
+import type { IMemberRootStore } from "../index.ts";
+import type { IWorkspaceMemberFiltersStore } from "./workspace-member-filters.store";
+import { WorkspaceMemberFiltersStore } from "./workspace-member-filters.store";
+import type { RootStore } from "@/store/root.store";
+
+export interface IWorkspaceMembership {
+  id: string;
+  member: string;
+  role: EUserPermissions;
+  is_active?: boolean;
+}
+
+export interface IWorkspaceMemberStore {
+  // observables
+  workspaceMemberMap: Record<string, Record<string, IWorkspaceMembership>>;
+  workspaceMemberInvitations: Record<string, IWorkspaceMemberInvitation[]>;
+  // filters store
+  filtersStore: IWorkspaceMemberFiltersStore;
+  // computed
+  workspaceMemberIds: string[] | null;
+  workspaceMemberInvitationIds: string[] | null;
+  memberMap: Record<string, IWorkspaceMembership> | null;
+  // computed actions
+  getWorkspaceMemberIds: (workspaceSlug: string) => string[];
+  getFilteredWorkspaceMemberIds: (workspaceSlug: string) => string[];
+  getSearchedWorkspaceMemberIds: (searchQuery: string) => string[] | null;
+  getSearchedWorkspaceInvitationIds: (searchQuery: string) => string[] | null;
+  getWorkspaceMemberDetails: (workspaceMemberId: string) => IWorkspaceMember | null;
+  getWorkspaceInvitationDetails: (invitationId: string) => IWorkspaceMemberInvitation | null;
+  // fetch actions
+  fetchWorkspaceMembers: (workspaceSlug: string) => Promise<IWorkspaceMember[]>;
+  fetchWorkspaceMemberInvitations: (workspaceSlug: string) => Promise<IWorkspaceMemberInvitation[]>;
+  // crud actions
+  updateMember: (workspaceSlug: string, userId: string, data: { role: EUserPermissions }) => Promise<void>;
+  removeMemberFromWorkspace: (workspaceSlug: string, userId: string) => Promise<void>;
+  // invite actions
+  inviteMembersToWorkspace: (workspaceSlug: string, data: IWorkspaceBulkInviteFormData) => Promise<void>;
+  updateMemberInvitation: (
+    workspaceSlug: string,
+    invitationId: string,
+    data: Partial<IWorkspaceMemberInvitation>
+  ) => Promise<void>;
+  deleteMemberInvitation: (workspaceSlug: string, invitationId: string) => Promise<void>;
+  isUserSuspended: (userId: string, workspaceSlug: string) => boolean;
+}
+
+export class WorkspaceMemberStore implements IWorkspaceMemberStore {
+  // observables
+  workspaceMemberMap: {
+    [workspaceSlug: string]: Record<string, IWorkspaceMembership>;
+  } = {}; // { workspaceSlug: { userId: userDetails } }
+  workspaceMemberInvitations: Record<string, IWorkspaceMemberInvitation[]> = {}; // { workspaceSlug: [invitations] }
+  // filters store
+  filtersStore: IWorkspaceMemberFiltersStore;
+  // stores
+  routerStore: IRouterStore;
+  userStore: IUserStore;
+  memberRoot: IMemberRootStore;
+  // services
+  workspaceService;
+
+  constructor(_memberRoot: IMemberRootStore, _rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      workspaceMemberMap: observable,
+      workspaceMemberInvitations: observable,
+      // computed
+      workspaceMemberIds: computed,
+      workspaceMemberInvitationIds: computed,
+      memberMap: computed,
+      // actions
+      fetchWorkspaceMembers: action,
+      updateMember: action,
+      removeMemberFromWorkspace: action,
+      fetchWorkspaceMemberInvitations: action,
+      updateMemberInvitation: action,
+      deleteMemberInvitation: action,
+    });
+    // initialize filters store
+    this.filtersStore = new WorkspaceMemberFiltersStore();
+    // root store
+    this.routerStore = _rootStore.router;
+    this.userStore = _rootStore.user;
+    this.memberRoot = _memberRoot;
+    // services
+    this.workspaceService = new WorkspaceService();
+  }
+
+  /**
+   * @description get the list of all the user ids of all the members of the current workspace
+   */
+  get workspaceMemberIds() {
+    const workspaceSlug = this.routerStore.workspaceSlug;
+    if (!workspaceSlug) return null;
+
+    return this.getWorkspaceMemberIds(workspaceSlug);
+  }
+
+  get memberMap() {
+    const workspaceSlug = this.routerStore.workspaceSlug;
+    if (!workspaceSlug) return null;
+    return this.workspaceMemberMap?.[workspaceSlug] ?? {};
+  }
+
+  get workspaceMemberInvitationIds() {
+    const workspaceSlug = this.routerStore.workspaceSlug;
+    if (!workspaceSlug) return null;
+    return this.workspaceMemberInvitations?.[workspaceSlug]?.map((inv) => inv.id);
+  }
+
+  getWorkspaceMemberIds = computedFn((workspaceSlug: string) => {
+    let members = Object.values(this.workspaceMemberMap?.[workspaceSlug] ?? {});
+    members = sortBy(members, [
+      (m) => m.member !== this.userStore?.data?.id,
+      (m) => this.memberRoot?.memberMap?.[m.member]?.display_name?.toLowerCase(),
+    ]);
+    //filter out bots
+    const memberIds = members.filter((m) => !this.memberRoot?.memberMap?.[m.member]?.is_bot).map((m) => m.member);
+    return memberIds;
+  });
+
+  /**
+   * @description get the filtered and sorted list of all the user ids of all the members of the workspace
+   * @param workspaceSlug
+   */
+  getFilteredWorkspaceMemberIds = computedFn((workspaceSlug: string) => {
+    let members = Object.values(this.workspaceMemberMap?.[workspaceSlug] ?? {});
+    //filter out bots and inactive members
+    members = members.filter((m) => !this.memberRoot?.memberMap?.[m.member]?.is_bot);
+
+    // Use filters store to get filtered member ids
+    const memberIds = this.filtersStore.getFilteredMemberIds(
+      members,
+      this.memberRoot?.memberMap || {},
+      (member) => member.member
+    );
+
+    return memberIds;
+  });
+
+  /**
+   * @description get the list of all the user ids that match the search query of all the members of the current workspace
+   * @param searchQuery
+   */
+  getSearchedWorkspaceMemberIds = computedFn((searchQuery: string) => {
+    const workspaceSlug = this.routerStore.workspaceSlug;
+    if (!workspaceSlug) return null;
+    const filteredMemberIds = this.getFilteredWorkspaceMemberIds(workspaceSlug);
+    if (!filteredMemberIds) return null;
+    const searchedWorkspaceMemberIds = filteredMemberIds.filter((userId) => {
+      const memberDetails = this.getWorkspaceMemberDetails(userId);
+      if (!memberDetails) return false;
+      const memberSearchQuery = `${memberDetails.member.first_name} ${memberDetails.member.last_name} ${
+        memberDetails.member?.display_name
+      } ${memberDetails.member.email ?? ""}`;
+      return memberSearchQuery.toLowerCase()?.includes(searchQuery.toLowerCase());
+    });
+    return searchedWorkspaceMemberIds;
+  });
+
+  /**
+   * @description get the list of all the invitation ids that match the search query of all the member invitations of the current workspace
+   * @param searchQuery
+   */
+  getSearchedWorkspaceInvitationIds = computedFn((searchQuery: string) => {
+    const workspaceSlug = this.routerStore.workspaceSlug;
+    if (!workspaceSlug) return null;
+    const workspaceMemberInvitationIds = this.workspaceMemberInvitationIds;
+    if (!workspaceMemberInvitationIds) return null;
+    const searchedWorkspaceMemberInvitationIds = workspaceMemberInvitationIds.filter((invitationId) => {
+      const invitationDetails = this.getWorkspaceInvitationDetails(invitationId);
+      if (!invitationDetails) return false;
+      const invitationSearchQuery = `${invitationDetails.email}`;
+      return invitationSearchQuery.toLowerCase()?.includes(searchQuery.toLowerCase());
+    });
+    return searchedWorkspaceMemberInvitationIds;
+  });
+
+  /**
+   * @description get the details of a workspace member
+   * @param userId
+   */
+  getWorkspaceMemberDetails = computedFn((userId: string) => {
+    const workspaceSlug = this.routerStore.workspaceSlug;
+    if (!workspaceSlug) return null;
+    const workspaceMember = this.workspaceMemberMap?.[workspaceSlug]?.[userId];
+    if (!workspaceMember) return null;
+
+    const memberDetails: IWorkspaceMember = {
+      id: workspaceMember.id,
+      role: workspaceMember.role,
+      member: this.memberRoot?.memberMap?.[workspaceMember.member],
+      is_active: workspaceMember.is_active,
+    };
+    return memberDetails;
+  });
+
+  /**
+   * @description get the details of a workspace member invitation
+   * @param workspaceSlug
+   * @param memberId
+   */
+  getWorkspaceInvitationDetails = computedFn((invitationId: string) => {
+    const workspaceSlug = this.routerStore.workspaceSlug;
+    if (!workspaceSlug) return null;
+    const invitationsList = this.workspaceMemberInvitations?.[workspaceSlug];
+    if (!invitationsList) return null;
+
+    const invitation = invitationsList.find((inv) => inv.id === invitationId);
+    return invitation ?? null;
+  });
+
+  /**
+   * @description fetch all the members of a workspace
+   * @param workspaceSlug
+   */
+  fetchWorkspaceMembers = async (workspaceSlug: string) =>
+    await this.workspaceService.fetchWorkspaceMembers(workspaceSlug).then((response) => {
+      runInAction(() => {
+        response.forEach((member) => {
+          set(this.memberRoot?.memberMap, member.member.id, { ...member.member, joining_date: member.created_at });
+          set(this.workspaceMemberMap, [workspaceSlug, member.member.id], {
+            id: member.id,
+            member: member.member.id,
+            role: member.role,
+            is_active: member.is_active,
+          });
+        });
+      });
+      return response;
+    });
+
+  /**
+   * @description update the role of a workspace member
+   * @param workspaceSlug
+   * @param userId
+   * @param data
+   */
+  updateMember = async (workspaceSlug: string, userId: string, data: { role: EUserPermissions }) => {
+    const memberDetails = this.getWorkspaceMemberDetails(userId);
+    if (!memberDetails) throw new Error("Member not found");
+    // original data to revert back in case of error
+    const originalProjectMemberData = { ...this.workspaceMemberMap?.[workspaceSlug]?.[userId] };
+    try {
+      runInAction(() => {
+        set(this.workspaceMemberMap, [workspaceSlug, userId, "role"], data.role);
+      });
+      await this.workspaceService.updateWorkspaceMember(workspaceSlug, memberDetails.id, data);
+    } catch (error) {
+      // revert back to original members in case of error
+      runInAction(() => {
+        set(this.workspaceMemberMap, [workspaceSlug, userId], originalProjectMemberData);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description remove a member from workspace
+   * @param workspaceSlug
+   * @param userId
+   */
+  removeMemberFromWorkspace = async (workspaceSlug: string, userId: string) => {
+    const memberDetails = this.getWorkspaceMemberDetails(userId);
+    if (!memberDetails) throw new Error("Member not found");
+    // oxlint-disable-next-line promise/always-return
+    await this.workspaceService.deleteWorkspaceMember(workspaceSlug, memberDetails?.id).then(() => {
+      runInAction(() => {
+        set(this.workspaceMemberMap, [workspaceSlug, userId, "is_active"], false);
+      });
+    });
+  };
+
+  /**
+   * @description fetch all the member invitations of a workspace
+   * @param workspaceSlug
+   */
+  fetchWorkspaceMemberInvitations = async (workspaceSlug: string) =>
+    await this.workspaceService.workspaceInvitations(workspaceSlug).then((response) => {
+      runInAction(() => {
+        set(this.workspaceMemberInvitations, workspaceSlug, response);
+      });
+      return response;
+    });
+
+  /**
+   * @description bulk invite members to a workspace
+   * @param workspaceSlug
+   * @param data
+   */
+  inviteMembersToWorkspace = async (workspaceSlug: string, data: IWorkspaceBulkInviteFormData) => {
+    const response = await this.workspaceService.inviteWorkspace(workspaceSlug, data);
+    await this.fetchWorkspaceMemberInvitations(workspaceSlug);
+    return response;
+  };
+
+  /**
+   * @description update the role of a member invitation
+   * @param workspaceSlug
+   * @param invitationId
+   * @param data
+   */
+  updateMemberInvitation = async (
+    workspaceSlug: string,
+    invitationId: string,
+    data: Partial<IWorkspaceMemberInvitation>
+  ) => {
+    const originalMemberInvitations = [...(this.workspaceMemberInvitations?.[workspaceSlug] ?? [])]; // in case of error, we will revert back to original members
+    try {
+      const memberInvitations = originalMemberInvitations?.map((invitation) => ({
+        ...invitation,
+        ...(invitation.id === invitationId && data),
+      }));
+      // optimistic update
+      runInAction(() => {
+        set(this.workspaceMemberInvitations, workspaceSlug, memberInvitations);
+      });
+      await this.workspaceService.updateWorkspaceInvitation(workspaceSlug, invitationId, data);
+    } catch (error) {
+      // revert back to original members in case of error
+      runInAction(() => {
+        set(this.workspaceMemberInvitations, workspaceSlug, originalMemberInvitations);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description delete a member invitation
+   * @param workspaceSlug
+   * @param memberId
+   */
+  deleteMemberInvitation = async (workspaceSlug: string, invitationId: string) =>
+    // oxlint-disable-next-line promise/always-return
+    await this.workspaceService.deleteWorkspaceInvitations(workspaceSlug.toString(), invitationId).then(() => {
+      runInAction(() => {
+        this.workspaceMemberInvitations[workspaceSlug] = this.workspaceMemberInvitations[workspaceSlug].filter(
+          (inv) => inv.id !== invitationId
+        );
+      });
+    });
+
+  isUserSuspended = computedFn((userId: string, workspaceSlug: string) => {
+    if (!workspaceSlug) return false;
+    const workspaceMember = this.workspaceMemberMap?.[workspaceSlug]?.[userId];
+    return workspaceMember?.is_active === false;
+  });
+}
diff --git a/apps/web/core/store/module.store.ts b/apps/web/core/store/module.store.ts
new file mode 100644
index 0000000..2605c9c
--- /dev/null
+++ b/apps/web/core/store/module.store.ts
@@ -0,0 +1,641 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { update, concat, set, sortBy } from "lodash-es";
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { IModule, ILinkDetails, TModulePlotType } from "@plane/types";
+import type { DistributionUpdates } from "@plane/utils";
+import { updateDistribution, orderModules, shouldFilterModule } from "@plane/utils";
+// helpers
+// services
+import { ModuleService } from "@/services/module.service";
+import { ModuleArchiveService } from "@/services/module_archive.service";
+import { ProjectService } from "@/services/project";
+// store
+import type { CoreRootStore } from "./root.store";
+
+export interface IModuleStore {
+  //Loaders
+  loader: boolean;
+  fetchedMap: Record<string, boolean>;
+  plotType: Record<string, TModulePlotType>;
+  // observables
+  moduleMap: Record<string, IModule>;
+  // computed
+  projectModuleIds: string[] | null;
+  projectArchivedModuleIds: string[] | null;
+  // computed actions
+  getModulesFetchStatusByProjectId: (projectId: string) => boolean;
+  getFilteredModuleIds: (projectId: string) => string[] | null;
+  getFilteredArchivedModuleIds: (projectId: string) => string[] | null;
+  getModuleById: (moduleId: string) => IModule | null;
+  getModuleNameById: (moduleId: string) => string;
+  getProjectModuleDetails: (projectId: string) => IModule[] | null;
+  getProjectModuleIds: (projectId: string) => string[] | null;
+  getPlotTypeByModuleId: (moduleId: string) => TModulePlotType;
+  // actions
+  setPlotType: (moduleId: string, plotType: TModulePlotType) => void;
+  // fetch
+  updateModuleDistribution: (distributionUpdates: DistributionUpdates, moduleId: string) => void;
+  fetchWorkspaceModules: (workspaceSlug: string) => Promise<IModule[]>;
+  fetchModules: (workspaceSlug: string, projectId: string) => Promise<undefined | IModule[]>;
+  fetchModulesSlim: (workspaceSlug: string, projectId: string) => Promise<undefined | IModule[]>;
+  fetchArchivedModules: (workspaceSlug: string, projectId: string) => Promise<undefined | IModule[]>;
+  fetchArchivedModuleDetails: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<IModule>;
+  fetchModuleDetails: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<IModule>;
+  // crud
+  createModule: (workspaceSlug: string, projectId: string, data: Partial<IModule>) => Promise<IModule>;
+  updateModuleDetails: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<IModule>
+  ) => Promise<IModule>;
+  deleteModule: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  createModuleLink: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<ILinkDetails>
+  ) => Promise<ILinkDetails>;
+  updateModuleLink: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    linkId: string,
+    data: Partial<ILinkDetails>
+  ) => Promise<ILinkDetails>;
+  deleteModuleLink: (workspaceSlug: string, projectId: string, moduleId: string, linkId: string) => Promise<void>;
+  // favorites
+  addModuleToFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  removeModuleFromFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  // archive
+  archiveModule: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+  restoreModule: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
+}
+
+export class ModulesStore implements IModuleStore {
+  // observables
+  loader: boolean = false;
+  moduleMap: Record<string, IModule> = {};
+  plotType: Record<string, TModulePlotType> = {};
+  //loaders
+  fetchedMap: Record<string, boolean> = {};
+  // root store
+  rootStore;
+  // services
+  projectService;
+  moduleService;
+  moduleArchiveService;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      moduleMap: observable,
+      plotType: observable.ref,
+      fetchedMap: observable,
+      // computed
+      projectModuleIds: computed,
+      projectArchivedModuleIds: computed,
+      // actions
+      setPlotType: action,
+      fetchWorkspaceModules: action,
+      fetchModules: action,
+      fetchArchivedModules: action,
+      fetchArchivedModuleDetails: action,
+      fetchModuleDetails: action,
+      createModule: action,
+      updateModuleDetails: action,
+      deleteModule: action,
+      createModuleLink: action,
+      updateModuleLink: action,
+      deleteModuleLink: action,
+      addModuleToFavorites: action,
+      removeModuleFromFavorites: action,
+      archiveModule: action,
+      restoreModule: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    // services
+    this.projectService = new ProjectService();
+    this.moduleService = new ModuleService();
+    this.moduleArchiveService = new ModuleArchiveService();
+  }
+
+  // computed
+  /**
+   * get all module ids for the current project
+   */
+  get projectModuleIds() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId || !this.fetchedMap[projectId]) return null;
+    let projectModules = Object.values(this.moduleMap).filter((m) => m.project_id === projectId && !m?.archived_at);
+    projectModules = sortBy(projectModules, [(m) => m.sort_order]);
+    const projectModuleIds = projectModules.map((m) => m.id);
+    return projectModuleIds || null;
+  }
+
+  /**
+   * get all archived module ids for the current project
+   */
+  get projectArchivedModuleIds() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId || !this.fetchedMap[projectId]) return null;
+    let archivedModules = Object.values(this.moduleMap).filter((m) => m.project_id === projectId && !!m?.archived_at);
+    archivedModules = sortBy(archivedModules, [(m) => m.sort_order]);
+    const projectModuleIds = archivedModules.map((m) => m.id);
+    return projectModuleIds || null;
+  }
+
+  /**
+   * Returns the fetch status for a specific project
+   * @param projectId
+   * @returns boolean
+   */
+  getModulesFetchStatusByProjectId = computedFn((projectId: string) => this.fetchedMap[projectId] ?? false);
+
+  /**
+   * @description returns filtered module ids based on display filters and filters
+   * @param {TModuleDisplayFilters} displayFilters
+   * @param {TModuleFilters} filters
+   * @returns {string[] | null}
+   */
+  getFilteredModuleIds = computedFn((projectId: string) => {
+    const displayFilters = this.rootStore.moduleFilter.getDisplayFiltersByProjectId(projectId);
+    const filters = this.rootStore.moduleFilter.getFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.moduleFilter.searchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let modules = Object.values(this.moduleMap ?? {}).filter(
+      (m) =>
+        m.project_id === projectId &&
+        !m.archived_at &&
+        m.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterModule(m, displayFilters ?? {}, filters ?? {})
+    );
+    modules = orderModules(modules, displayFilters?.order_by);
+    const moduleIds = modules.map((m) => m.id);
+    return moduleIds;
+  });
+
+  /**
+   * @description returns filtered archived module ids based on display filters and filters
+   * @param {string} projectId
+   * @returns {string[] | null}
+   */
+  getFilteredArchivedModuleIds = computedFn((projectId: string) => {
+    const displayFilters = this.rootStore.moduleFilter.getDisplayFiltersByProjectId(projectId);
+    const filters = this.rootStore.moduleFilter.getArchivedFiltersByProjectId(projectId);
+    const searchQuery = this.rootStore.moduleFilter.archivedModulesSearchQuery;
+    if (!this.fetchedMap[projectId]) return null;
+    let modules = Object.values(this.moduleMap ?? {}).filter(
+      (m) =>
+        m.project_id === projectId &&
+        !!m.archived_at &&
+        m.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        shouldFilterModule(m, displayFilters ?? {}, filters ?? {})
+    );
+    modules = orderModules(modules, displayFilters?.order_by);
+    const moduleIds = modules.map((m) => m.id);
+    return moduleIds;
+  });
+
+  /**
+   * @description get module by id
+   * @param moduleId
+   * @returns IModule | null
+   */
+  getModuleById = computedFn((moduleId: string) => this.moduleMap?.[moduleId] || null);
+
+  /**
+   * @description get module by id
+   * @param moduleId
+   * @returns IModule | null
+   */
+  getModuleNameById = computedFn((moduleId: string) => this.moduleMap?.[moduleId]?.name);
+
+  /**
+   * @description returns list of module details of the project id passed as argument
+   * @param projectId
+   */
+  getProjectModuleDetails = computedFn((projectId: string) => {
+    if (!this.fetchedMap[projectId]) return null;
+    let projectModules = Object.values(this.moduleMap).filter((m) => m.project_id === projectId && !m.archived_at);
+    projectModules = sortBy(projectModules, [(m) => m.sort_order]);
+    return projectModules;
+  });
+
+  /**
+   * @description returns list of module ids of the project id passed as argument
+   * @param projectId
+   */
+  getProjectModuleIds = computedFn((projectId: string) => {
+    const projectModules = this.getProjectModuleDetails(projectId);
+    if (!projectModules) return null;
+    const projectModuleIds = projectModules.map((m) => m.id);
+    return projectModuleIds;
+  });
+
+  /**
+   * @description gets the plot type for the module store
+   * @param {TModulePlotType} plotType
+   */
+  getPlotTypeByModuleId = (moduleId: string) => {
+    const { projectId } = this.rootStore.router;
+
+    return projectId && this.rootStore.projectEstimate.areEstimateEnabledByProjectId(projectId)
+      ? this.plotType[moduleId] || "burndown"
+      : "burndown";
+  };
+
+  /**
+   * @description updates the plot type for the module store
+   * @param {TModulePlotType} plotType
+   */
+  setPlotType = (moduleId: string, plotType: TModulePlotType) => {
+    set(this.plotType, [moduleId], plotType);
+  };
+
+  /**
+   * @description fetch all modules
+   * @param workspaceSlug
+   * @returns IModule[]
+   */
+  fetchWorkspaceModules = async (workspaceSlug: string) =>
+    await this.moduleService.getWorkspaceModules(workspaceSlug).then((response) => {
+      runInAction(() => {
+        response.forEach((module) => {
+          set(this.moduleMap, [module.id], { ...this.moduleMap[module.id], ...module });
+        });
+        // check for all unique project ids and update the fetchedMap
+        const uniqueProjectIds = new Set(response.map((module) => module.project_id));
+        uniqueProjectIds.forEach((projectId) => {
+          set(this.fetchedMap, projectId, true);
+        });
+      });
+      return response;
+    });
+
+  /**
+   * @description fetch all modules
+   * @param workspaceSlug
+   * @param projectId
+   * @returns IModule[]
+   */
+  fetchModules = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      await this.moduleService.getModules(workspaceSlug, projectId).then((response) => {
+        runInAction(() => {
+          response.forEach((module) => {
+            set(this.moduleMap, [module.id], { ...this.moduleMap[module.id], ...module });
+          });
+          set(this.fetchedMap, projectId, true);
+          this.loader = false;
+        });
+        return response;
+      });
+    } catch {
+      this.loader = false;
+      return undefined;
+    }
+  };
+
+  /**
+   * @description fetch all modules
+   * @param workspaceSlug
+   * @param projectId
+   * @returns IModule[]
+   */
+  fetchModulesSlim = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      await this.moduleService.getWorkspaceModules(workspaceSlug).then((response) => {
+        const projectModules = response.filter((module) => module.project_id === projectId);
+        runInAction(() => {
+          projectModules.forEach((module) => {
+            set(this.moduleMap, [module.id], { ...this.moduleMap[module.id], ...module });
+          });
+          set(this.fetchedMap, projectId, true);
+          this.loader = false;
+        });
+        return projectModules;
+      });
+    } catch {
+      this.loader = false;
+      return undefined;
+    }
+  };
+
+  /**
+   * @description fetch all archived modules
+   * @param workspaceSlug
+   * @param projectId
+   * @returns IModule[]
+   */
+  fetchArchivedModules = async (workspaceSlug: string, projectId: string) => {
+    this.loader = true;
+    return await this.moduleArchiveService
+      .getArchivedModules(workspaceSlug, projectId)
+      .then((response) => {
+        runInAction(() => {
+          response.forEach((module) => {
+            set(this.moduleMap, [module.id], { ...this.moduleMap[module.id], ...module });
+          });
+          this.loader = false;
+        });
+        return response;
+      })
+      .catch(() => {
+        this.loader = false;
+        return undefined;
+      });
+  };
+
+  /**
+   * @description fetch module details
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @returns IModule
+   */
+  fetchArchivedModuleDetails = async (workspaceSlug: string, projectId: string, moduleId: string) =>
+    await this.moduleArchiveService.getArchivedModuleDetails(workspaceSlug, projectId, moduleId).then((response) => {
+      runInAction(() => {
+        set(this.moduleMap, [response.id], { ...this.moduleMap?.[response.id], ...response });
+      });
+      return response;
+    });
+
+  /**
+   * This method updates the module's stats locally without fetching the updated stats from backend
+   * @param distributionUpdates
+   * @param moduleId
+   * @returns
+   */
+  updateModuleDistribution = (distributionUpdates: DistributionUpdates, moduleId: string) => {
+    const moduleInfo = this.moduleMap[moduleId];
+
+    if (!moduleInfo) return;
+
+    runInAction(() => {
+      updateDistribution(moduleInfo, distributionUpdates);
+    });
+  };
+
+  /**
+   * @description fetch module details
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @returns IModule
+   */
+  fetchModuleDetails = async (workspaceSlug: string, projectId: string, moduleId: string) =>
+    await this.moduleService.getModuleDetails(workspaceSlug, projectId, moduleId).then((response) => {
+      runInAction(() => {
+        set(this.moduleMap, [moduleId], response);
+      });
+      return response;
+    });
+
+  /**
+   * @description creates a new module
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns IModule
+   */
+  createModule = async (workspaceSlug: string, projectId: string, data: Partial<IModule>) =>
+    await this.moduleService.createModule(workspaceSlug, projectId, data).then((response) => {
+      runInAction(() => {
+        set(this.moduleMap, [response?.id], response);
+      });
+      return response;
+    });
+
+  /**
+   * @description updates module details
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @param data
+   * @returns IModule
+   */
+  updateModuleDetails = async (workspaceSlug: string, projectId: string, moduleId: string, data: Partial<IModule>) => {
+    const originalModuleDetails = this.getModuleById(moduleId);
+    try {
+      runInAction(() => {
+        set(this.moduleMap, [moduleId], { ...originalModuleDetails, ...data });
+      });
+      const response = await this.moduleService.patchModule(workspaceSlug, projectId, moduleId, data);
+      return response;
+    } catch (error) {
+      console.error("Failed to update module in module store", error);
+      runInAction(() => {
+        set(this.moduleMap, [moduleId], { ...originalModuleDetails });
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description deletes a module
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   */
+  deleteModule = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    const moduleDetails = this.getModuleById(moduleId);
+    if (!moduleDetails) return;
+    await this.moduleService.deleteModule(workspaceSlug, projectId, moduleId).then(() => {
+      runInAction(() => {
+        delete this.moduleMap[moduleId];
+        if (this.rootStore.favorite.entityMap[moduleId]) this.rootStore.favorite.removeFavoriteFromStore(moduleId);
+      });
+    });
+  };
+
+  /**
+   * @description creates a new module link
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @param data
+   * @returns ILinkDetails
+   */
+  createModuleLink = async (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<ILinkDetails>
+  ) => {
+    try {
+      const moduleLink = await this.moduleService.createModuleLink(workspaceSlug, projectId, moduleId, data);
+      runInAction(() => {
+        update(this.moduleMap, [moduleId, "link_module"], (moduleLinks = []) => concat(moduleLinks, moduleLink));
+      });
+      return moduleLink;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * @description updates module link details
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @param linkId
+   * @param data
+   * @returns ILinkDetails
+   */
+  updateModuleLink = async (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    linkId: string,
+    data: Partial<ILinkDetails>
+  ) => {
+    const originalModuleDetails = this.getModuleById(moduleId);
+    try {
+      const linkModules = originalModuleDetails?.link_module?.map((link) =>
+        link.id === linkId ? { ...link, ...data } : link
+      );
+      runInAction(() => {
+        set(this.moduleMap, [moduleId, "link_module"], linkModules);
+      });
+      const response = await this.moduleService.updateModuleLink(workspaceSlug, projectId, moduleId, linkId, data);
+      return response;
+    } catch (error) {
+      console.error("Failed to update module link in module store", error);
+      runInAction(() => {
+        set(this.moduleMap, [moduleId, "link_module"], originalModuleDetails?.link_module);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description deletes a module link
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @param linkId
+   */
+  deleteModuleLink = async (workspaceSlug: string, projectId: string, moduleId: string, linkId: string) => {
+    try {
+      const moduleLink = await this.moduleService.deleteModuleLink(workspaceSlug, projectId, moduleId, linkId);
+      runInAction(() => {
+        update(this.moduleMap, [moduleId, "link_module"], (moduleLinks = []) =>
+          moduleLinks.filter((link: ILinkDetails) => link.id !== linkId)
+        );
+      });
+      return moduleLink;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * @description adds a module to favorites
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @returns
+   */
+  addModuleToFavorites = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      const moduleDetails = this.getModuleById(moduleId);
+      if (moduleDetails?.is_favorite) return;
+      runInAction(() => {
+        set(this.moduleMap, [moduleId, "is_favorite"], true);
+      });
+      await this.rootStore.favorite.addFavorite(workspaceSlug.toString(), {
+        entity_type: "module",
+        entity_identifier: moduleId,
+        project_id: projectId,
+        entity_data: { name: this.moduleMap[moduleId].name || "" },
+      });
+    } catch (error) {
+      console.error("Failed to add module to favorites in module store", error);
+      runInAction(() => {
+        set(this.moduleMap, [moduleId, "is_favorite"], false);
+      });
+    }
+  };
+
+  /**
+   * @description removes a module from favorites
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @returns
+   */
+  removeModuleFromFavorites = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      const moduleDetails = this.getModuleById(moduleId);
+      if (!moduleDetails?.is_favorite) return;
+      runInAction(() => {
+        set(this.moduleMap, [moduleId, "is_favorite"], false);
+      });
+      await this.rootStore.favorite.removeFavoriteEntity(workspaceSlug, moduleId);
+    } catch (error) {
+      console.error("Failed to remove module from favorites in module store", error);
+      runInAction(() => {
+        set(this.moduleMap, [moduleId, "is_favorite"], true);
+      });
+    }
+  };
+
+  /**
+   * @description archives a module
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @returns
+   */
+  archiveModule = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    const moduleDetails = this.getModuleById(moduleId);
+    if (moduleDetails?.archived_at) return;
+    await this.moduleArchiveService
+      .archiveModule(workspaceSlug, projectId, moduleId)
+      .then((response) => {
+        runInAction(() => {
+          set(this.moduleMap, [moduleId, "archived_at"], response.archived_at);
+          if (this.rootStore.favorite.entityMap[moduleId]) this.rootStore.favorite.removeFavoriteFromStore(moduleId);
+        });
+      })
+      .catch((error) => {
+        console.error("Failed to archive module in module store", error);
+      });
+  };
+
+  /**
+   * @description restores a module
+   * @param workspaceSlug
+   * @param projectId
+   * @param moduleId
+   * @returns
+   */
+  restoreModule = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    const moduleDetails = this.getModuleById(moduleId);
+    if (!moduleDetails?.archived_at) return;
+    await this.moduleArchiveService
+      .restoreModule(workspaceSlug, projectId, moduleId)
+      .then(() => {
+        runInAction(() => {
+          set(this.moduleMap, [moduleId, "archived_at"], null);
+        });
+      })
+      .catch((error) => {
+        console.error("Failed to restore module in module store", error);
+      });
+  };
+}
diff --git a/apps/web/core/store/module_filter.store.ts b/apps/web/core/store/module_filter.store.ts
new file mode 100644
index 0000000..258ca3e
--- /dev/null
+++ b/apps/web/core/store/module_filter.store.ts
@@ -0,0 +1,255 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { TModuleDisplayFilters, TModuleFilters, TModuleFiltersByState } from "@plane/types";
+// helpers
+import { storage } from "@/lib/local-storage";
+// store
+import type { CoreRootStore } from "./root.store";
+
+// localStorage keys
+const MODULE_DISPLAY_FILTERS_KEY = "module_display_filters";
+const MODULE_FILTERS_KEY = "module_filters";
+
+export interface IModuleFilterStore {
+  // observables
+  displayFilters: Record<string, TModuleDisplayFilters>;
+  filters: Record<string, TModuleFiltersByState>;
+  searchQuery: string;
+  archivedModulesSearchQuery: string;
+  // computed
+  currentProjectDisplayFilters: TModuleDisplayFilters | undefined;
+  currentProjectFilters: TModuleFilters | undefined;
+  currentProjectArchivedFilters: TModuleFilters | undefined;
+  // computed functions
+  getDisplayFiltersByProjectId: (projectId: string) => TModuleDisplayFilters | undefined;
+  getFiltersByProjectId: (projectId: string) => TModuleFilters | undefined;
+  getArchivedFiltersByProjectId: (projectId: string) => TModuleFilters | undefined;
+  // actions
+  updateDisplayFilters: (projectId: string, displayFilters: TModuleDisplayFilters) => void;
+  updateFilters: (projectId: string, filters: TModuleFilters, state?: keyof TModuleFiltersByState) => void;
+  updateSearchQuery: (query: string) => void;
+  updateArchivedModulesSearchQuery: (query: string) => void;
+  clearAllFilters: (projectId: string, state?: keyof TModuleFiltersByState) => void;
+}
+
+export class ModuleFilterStore implements IModuleFilterStore {
+  // observables
+  displayFilters: Record<string, TModuleDisplayFilters> = {};
+  filters: Record<string, TModuleFiltersByState> = {};
+  searchQuery: string = "";
+  archivedModulesSearchQuery: string = "";
+  // root store
+  rootStore: CoreRootStore;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      displayFilters: observable,
+      filters: observable,
+      searchQuery: observable.ref,
+      archivedModulesSearchQuery: observable.ref,
+      // computed
+      currentProjectDisplayFilters: computed,
+      currentProjectFilters: computed,
+      currentProjectArchivedFilters: computed,
+      // actions
+      updateDisplayFilters: action,
+      updateFilters: action,
+      updateSearchQuery: action,
+      updateArchivedModulesSearchQuery: action,
+      clearAllFilters: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+
+    // initialize display filters of the current project
+    reaction(
+      () => this.rootStore.router.projectId,
+      (projectId) => {
+        if (!projectId) return;
+        this.initProjectModuleFilters(projectId);
+        this.searchQuery = "";
+      }
+    );
+
+    // Load initial data from localStorage after reactions are set up
+    this.loadFromLocalStorage();
+  }
+
+  /**
+   * @description Load filters from localStorage
+   */
+  loadFromLocalStorage = () => {
+    try {
+      const displayFiltersData = storage.get(MODULE_DISPLAY_FILTERS_KEY);
+      const filtersData = storage.get(MODULE_FILTERS_KEY);
+
+      runInAction(() => {
+        if (displayFiltersData) {
+          const parsed = JSON.parse(displayFiltersData);
+          if (typeof parsed === "object" && parsed !== null) {
+            this.displayFilters = parsed;
+          }
+        }
+        if (filtersData) {
+          const parsed = JSON.parse(filtersData);
+          if (typeof parsed === "object" && parsed !== null) {
+            this.filters = parsed;
+          }
+        }
+      });
+    } catch (error) {
+      console.error("Failed to load module filters from localStorage:", error);
+      // Reset to defaults on error
+      runInAction(() => {
+        this.displayFilters = {};
+        this.filters = {};
+      });
+    }
+  };
+
+  /**
+   * @description Save display filters to localStorage (debounced)
+   */
+  saveDisplayFiltersToLocalStorage = () => {
+    storage.set(MODULE_DISPLAY_FILTERS_KEY, this.displayFilters);
+  };
+
+  /**
+   * @description Save filters to localStorage (debounced)
+   */
+  saveFiltersToLocalStorage = () => {
+    storage.set(MODULE_FILTERS_KEY, this.filters);
+  };
+
+  /**
+   * @description get display filters of the current project
+   */
+  get currentProjectDisplayFilters() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId) return;
+    return this.displayFilters[projectId];
+  }
+
+  /**
+   * @description get filters of the current project
+   */
+  get currentProjectFilters() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId) return;
+    return this.filters[projectId]?.default ?? {};
+  }
+
+  /**
+   * @description get archived filters of the current project
+   */
+  get currentProjectArchivedFilters() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId) return;
+    return this.filters[projectId].archived;
+  }
+
+  /**
+   * @description get display filters of a project by projectId
+   * @param {string} projectId
+   */
+  getDisplayFiltersByProjectId = computedFn((projectId: string) => this.displayFilters[projectId]);
+
+  /**
+   * @description get filters of a project by projectId
+   * @param {string} projectId
+   */
+  getFiltersByProjectId = computedFn((projectId: string) => this.filters[projectId]?.default ?? {});
+
+  /**
+   * @description get archived filters of a project by projectId
+   * @param {string} projectId
+   */
+  getArchivedFiltersByProjectId = computedFn((projectId: string) => this.filters[projectId].archived);
+
+  /**
+   * @description initialize display filters and filters of a project
+   * @param {string} projectId
+   */
+  initProjectModuleFilters = (projectId: string) => {
+    const displayFilters = this.getDisplayFiltersByProjectId(projectId);
+    runInAction(() => {
+      this.displayFilters[projectId] = {
+        favorites: displayFilters?.favorites || false,
+        layout: displayFilters?.layout || "list",
+        order_by: displayFilters?.order_by || "name",
+      };
+      this.filters[projectId] = this.filters[projectId] ?? {
+        default: {},
+        archived: {},
+      };
+    });
+    this.saveDisplayFiltersToLocalStorage();
+    this.saveFiltersToLocalStorage();
+  };
+
+  /**
+   * @description update display filters of a project
+   * @param {string} projectId
+   * @param {TModuleDisplayFilters} displayFilters
+   */
+  updateDisplayFilters = (projectId: string, displayFilters: TModuleDisplayFilters) => {
+    runInAction(() => {
+      Object.keys(displayFilters).forEach((key) => {
+        set(this.displayFilters, [projectId, key], displayFilters[key as keyof TModuleDisplayFilters]);
+      });
+    });
+    this.saveDisplayFiltersToLocalStorage();
+  };
+
+  /**
+   * @description update filters of a project
+   * @param {string} projectId
+   * @param {TModuleFilters} filters
+   */
+  updateFilters = (projectId: string, filters: TModuleFilters, state: keyof TModuleFiltersByState = "default") => {
+    runInAction(() => {
+      Object.keys(filters).forEach((key) => {
+        set(this.filters, [projectId, state, key], filters[key as keyof TModuleFilters]);
+      });
+    });
+    this.saveFiltersToLocalStorage();
+  };
+
+  /**
+   * @description update search query
+   * @param {string} query
+   */
+  updateSearchQuery = (query: string) => {
+    this.searchQuery = query;
+  };
+
+  /**
+   * @description update archived search query
+   * @param {string} query
+   */
+  updateArchivedModulesSearchQuery = (query: string) => {
+    this.archivedModulesSearchQuery = query;
+  };
+
+  /**
+   * @description clear all filters of a project
+   * @param {string} projectId
+   */
+  clearAllFilters = (projectId: string, state: keyof TModuleFiltersByState = "default") => {
+    runInAction(() => {
+      this.filters[projectId][state] = {};
+      this.displayFilters[projectId].favorites = false;
+    });
+    this.saveFiltersToLocalStorage();
+    this.saveDisplayFiltersToLocalStorage();
+  };
+}
diff --git a/apps/web/core/store/multiple_select.store.ts b/apps/web/core/store/multiple_select.store.ts
new file mode 100644
index 0000000..e479a23
--- /dev/null
+++ b/apps/web/core/store/multiple_select.store.ts
@@ -0,0 +1,238 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { differenceWith, remove, isEqual } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// hooks
+import type { TEntityDetails } from "@/hooks/use-multiple-select";
+// services
+import { IssueService } from "@/services/issue";
+
+export type IMultipleSelectStore = {
+  // computed functions
+  isSelectionActive: boolean;
+  selectedEntityIds: string[];
+  // helper actions
+  getIsEntitySelected: (entityID: string) => boolean;
+  getIsEntityActive: (entityID: string) => boolean;
+  getLastSelectedEntityDetails: () => TEntityDetails | null;
+  getPreviousActiveEntity: () => TEntityDetails | null;
+  getNextActiveEntity: () => TEntityDetails | null;
+  getActiveEntityDetails: () => TEntityDetails | null;
+  getEntityDetailsFromEntityID: (entityID: string) => TEntityDetails | null;
+  // entity actions
+  updateSelectedEntityDetails: (entityDetails: TEntityDetails, action: "add" | "remove") => void;
+  bulkUpdateSelectedEntityDetails: (entitiesList: TEntityDetails[], action: "add" | "remove") => void;
+  updateLastSelectedEntityDetails: (entityDetails: TEntityDetails | null) => void;
+  updatePreviousActiveEntity: (entityDetails: TEntityDetails | null) => void;
+  updateNextActiveEntity: (entityDetails: TEntityDetails | null) => void;
+  updateActiveEntityDetails: (entityDetails: TEntityDetails | null) => void;
+  clearSelection: () => void;
+};
+
+/**
+ * @description the MultipleSelectStore manages multiple selection states by keeping track of the selected entities and providing a bunch of helper functions and actions to maintain the selected states
+ * @description use the useMultipleSelectStore custom hook to access the observables
+ * @description use the useMultipleSelect custom hook for added functionality on top of the store, including-
+ * 1. Keyboard and mouse interaction
+ * 2. Clear state on route change
+ */
+export class MultipleSelectStore implements IMultipleSelectStore {
+  // observables
+  selectedEntityDetails: TEntityDetails[] = [];
+  lastSelectedEntityDetails: TEntityDetails | null = null;
+  previousActiveEntity: TEntityDetails | null = null;
+  nextActiveEntity: TEntityDetails | null = null;
+  activeEntityDetails: TEntityDetails | null = null;
+  // service
+  issueService;
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      selectedEntityDetails: observable,
+      lastSelectedEntityDetails: observable,
+      previousActiveEntity: observable,
+      nextActiveEntity: observable,
+      activeEntityDetails: observable,
+      // computed functions
+      isSelectionActive: computed,
+      selectedEntityIds: computed,
+      // actions
+      updateSelectedEntityDetails: action,
+      bulkUpdateSelectedEntityDetails: action,
+      updateLastSelectedEntityDetails: action,
+      updatePreviousActiveEntity: action,
+      updateNextActiveEntity: action,
+      updateActiveEntityDetails: action,
+      clearSelection: action,
+    });
+
+    this.issueService = new IssueService();
+  }
+
+  get isSelectionActive() {
+    return this.selectedEntityDetails.length > 0;
+  }
+
+  get selectedEntityIds() {
+    return this.selectedEntityDetails.map((en) => en.entityID);
+  }
+
+  // helper actions
+  /**
+   * @description returns if the entity is selected or not
+   * @param {string} entityID
+   * @returns {boolean}
+   */
+  getIsEntitySelected = computedFn((entityID: string): boolean =>
+    this.selectedEntityDetails.some((en) => en.entityID === entityID)
+  );
+
+  /**
+   * @description returns if the entity is active or not
+   * @param {string} entityID
+   * @returns {boolean}
+   */
+  getIsEntityActive = computedFn((entityID: string): boolean => this.activeEntityDetails?.entityID === entityID);
+
+  /**
+   * @description get the last selected entity details
+   * @returns {TEntityDetails}
+   */
+  getLastSelectedEntityDetails = computedFn(() => this.lastSelectedEntityDetails);
+
+  /**
+   * @description get the details of the entity preceding the active entity
+   * @returns {TEntityDetails}
+   */
+  getPreviousActiveEntity = computedFn(() => this.previousActiveEntity);
+
+  /**
+   * @description get the details of the entity succeeding the active entity
+   * @returns {TEntityDetails}
+   */
+  getNextActiveEntity = computedFn(() => this.nextActiveEntity);
+
+  /**
+   * @description get the active entity details
+   * @returns {TEntityDetails}
+   */
+  getActiveEntityDetails = computedFn(() => this.activeEntityDetails);
+
+  /**
+   * @description get the entity details from entityID
+   * @param {string} entityID
+   * @returns {TEntityDetails | null}
+   */
+  getEntityDetailsFromEntityID = computedFn(
+    (entityID: string): TEntityDetails | null =>
+      this.selectedEntityDetails.find((en) => en.entityID === entityID) ?? null
+  );
+
+  // entity actions
+  /**
+   * @description add or remove entities
+   * @param {TEntityDetails} entityDetails
+   * @param {"add" | "remove"} action
+   */
+  updateSelectedEntityDetails = (entityDetails: TEntityDetails, action: "add" | "remove") => {
+    if (action === "add") {
+      runInAction(() => {
+        if (this.getIsEntitySelected(entityDetails.entityID)) {
+          remove(this.selectedEntityDetails, (en) => en.entityID === entityDetails.entityID);
+        }
+        this.selectedEntityDetails.push(entityDetails);
+        this.updateLastSelectedEntityDetails(entityDetails);
+      });
+    } else {
+      let currentSelection = [...this.selectedEntityDetails];
+      currentSelection = currentSelection.filter((en) => en.entityID !== entityDetails.entityID);
+      runInAction(() => {
+        remove(this.selectedEntityDetails, (en) => en.entityID === entityDetails.entityID);
+        this.updateLastSelectedEntityDetails(currentSelection[currentSelection.length - 1] ?? null);
+      });
+    }
+  };
+
+  /**
+   * @description add or remove multiple entities
+   * @param {TEntityDetails[]} entitiesList
+   * @param {"add" | "remove"} action
+   */
+  bulkUpdateSelectedEntityDetails = (entitiesList: TEntityDetails[], action: "add" | "remove") => {
+    if (action === "add") {
+      runInAction(() => {
+        let newEntities: TEntityDetails[] = [];
+        newEntities = differenceWith(this.selectedEntityDetails, entitiesList, isEqual);
+        newEntities = newEntities.concat(entitiesList);
+        this.selectedEntityDetails = newEntities;
+        if (entitiesList.length > 0) this.updateLastSelectedEntityDetails(entitiesList[entitiesList.length - 1]);
+      });
+    } else {
+      const newEntities = differenceWith(this.selectedEntityDetails, entitiesList, (obj1, obj2) =>
+        isEqual(obj1.entityID, obj2.entityID)
+      );
+      runInAction(() => {
+        this.selectedEntityDetails = newEntities;
+      });
+    }
+  };
+
+  /**
+   * @description update last selected entity
+   * @param {TEntityDetails} entityDetails
+   */
+  updateLastSelectedEntityDetails = (entityDetails: TEntityDetails | null) => {
+    runInAction(() => {
+      this.lastSelectedEntityDetails = entityDetails;
+    });
+  };
+
+  /**
+   * @description update previous active entity
+   * @param {TEntityDetails} entityDetails
+   */
+  updatePreviousActiveEntity = (entityDetails: TEntityDetails | null) => {
+    runInAction(() => {
+      this.previousActiveEntity = entityDetails;
+    });
+  };
+
+  /**
+   * @description update next active entity
+   * @param {TEntityDetails} entityDetails
+   */
+  updateNextActiveEntity = (entityDetails: TEntityDetails | null) => {
+    runInAction(() => {
+      this.nextActiveEntity = entityDetails;
+    });
+  };
+
+  /**
+   * @description update active entity
+   * @param {TEntityDetails} entityDetails
+   */
+  updateActiveEntityDetails = (entityDetails: TEntityDetails | null) => {
+    runInAction(() => {
+      this.activeEntityDetails = entityDetails;
+    });
+  };
+
+  /**
+   * @description clear selection and reset all the observables
+   */
+  clearSelection = () => {
+    runInAction(() => {
+      this.selectedEntityDetails = [];
+      this.lastSelectedEntityDetails = null;
+      this.previousActiveEntity = null;
+      this.nextActiveEntity = null;
+      this.activeEntityDetails = null;
+    });
+  };
+}
diff --git a/apps/web/core/store/notifications/notification.ts b/apps/web/core/store/notifications/notification.ts
new file mode 100644
index 0000000..1668108
--- /dev/null
+++ b/apps/web/core/store/notifications/notification.ts
@@ -0,0 +1,325 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable no-useless-catch */
+import { set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import type { IUserLite, TNotification, TNotificationData } from "@plane/types";
+// services
+import workspaceNotificationService from "@/services/workspace-notification.service";
+// store
+import type { CoreRootStore } from "../root.store";
+
+export interface INotification extends TNotification {
+  // observables
+  // computed
+  asJson: TNotification;
+  // computed functions
+  // helper functions
+  mutateNotification: (notification: Partial<TNotification>) => void;
+  // actions
+  updateNotification: (workspaceSlug: string, payload: Partial<TNotification>) => Promise<TNotification | undefined>;
+  markNotificationAsRead: (workspaceSlug: string) => Promise<TNotification | undefined>;
+  markNotificationAsUnRead: (workspaceSlug: string) => Promise<TNotification | undefined>;
+  archiveNotification: (workspaceSlug: string) => Promise<TNotification | undefined>;
+  unArchiveNotification: (workspaceSlug: string) => Promise<TNotification | undefined>;
+  snoozeNotification: (workspaceSlug: string, snoozeTill: Date) => Promise<TNotification | undefined>;
+  unSnoozeNotification: (workspaceSlug: string) => Promise<TNotification | undefined>;
+}
+
+export class Notification implements INotification {
+  // observables
+  id: string;
+  title: string | undefined = undefined;
+  data: TNotificationData | undefined = undefined;
+  entity_identifier: string | undefined = undefined;
+  entity_name: string | undefined = undefined;
+  message_html: string | undefined = undefined;
+  message: undefined = undefined;
+  message_stripped: undefined = undefined;
+  sender: string | undefined = undefined;
+  receiver: string | undefined = undefined;
+  triggered_by: string | undefined = undefined;
+  triggered_by_details: IUserLite | undefined = undefined;
+  read_at: string | undefined = undefined;
+  archived_at: string | undefined = undefined;
+  snoozed_till: string | undefined = undefined;
+  is_inbox_issue: boolean | undefined = undefined;
+  is_mentioned_notification: boolean | undefined = undefined;
+  workspace: string | undefined = undefined;
+  project: string | undefined = undefined;
+  created_at: string | undefined = undefined;
+  updated_at: string | undefined = undefined;
+  created_by: string | undefined = undefined;
+  updated_by: string | undefined = undefined;
+
+  constructor(
+    private store: CoreRootStore,
+    private notification: TNotification
+  ) {
+    this.id = this.notification.id;
+    makeObservable(this, {
+      // observables
+      id: observable.ref,
+      title: observable.ref,
+      data: observable,
+      entity_identifier: observable.ref,
+      entity_name: observable.ref,
+      message_html: observable.ref,
+      message: observable.ref,
+      message_stripped: observable.ref,
+      sender: observable.ref,
+      receiver: observable.ref,
+      triggered_by: observable.ref,
+      triggered_by_details: observable,
+      read_at: observable.ref,
+      archived_at: observable.ref,
+      snoozed_till: observable.ref,
+      is_inbox_issue: observable.ref,
+      is_mentioned_notification: observable.ref,
+      workspace: observable.ref,
+      project: observable.ref,
+      created_at: observable.ref,
+      updated_at: observable.ref,
+      created_by: observable.ref,
+      updated_by: observable.ref,
+      // computed
+      asJson: computed,
+      // actions
+      updateNotification: action,
+      markNotificationAsRead: action,
+      markNotificationAsUnRead: action,
+      archiveNotification: action,
+      unArchiveNotification: action,
+      snoozeNotification: action,
+      unSnoozeNotification: action,
+    });
+    this.title = this.notification.title;
+    this.data = this.notification.data;
+    this.entity_identifier = this.notification.entity_identifier;
+    this.entity_name = this.notification.entity_name;
+    this.message_html = this.notification.message_html;
+    this.message = this.notification.message;
+    this.message_stripped = this.notification.message_stripped;
+    this.sender = this.notification.sender;
+    this.receiver = this.notification.receiver;
+    this.triggered_by = this.notification.triggered_by;
+    this.triggered_by_details = this.notification.triggered_by_details;
+    this.read_at = this.notification.read_at;
+    this.archived_at = this.notification.archived_at;
+    this.snoozed_till = this.notification.snoozed_till;
+    this.is_inbox_issue = this.notification.is_inbox_issue;
+    this.is_mentioned_notification = this.notification.is_mentioned_notification;
+    this.workspace = this.notification.workspace;
+    this.project = this.notification.project;
+    this.created_at = this.notification.created_at;
+    this.updated_at = this.notification.updated_at;
+    this.created_by = this.notification.created_by;
+    this.updated_by = this.notification.updated_by;
+  }
+
+  // computed
+  /**
+   * @description get notification as json
+   */
+  get asJson() {
+    return {
+      id: this.id,
+      title: this.title,
+      data: this.data,
+      entity_identifier: this.entity_identifier,
+      entity_name: this.entity_name,
+      message_html: this.message_html,
+      message: this.message,
+      message_stripped: this.message_stripped,
+      sender: this.sender,
+      receiver: this.receiver,
+      triggered_by: this.triggered_by,
+      triggered_by_details: this.triggered_by_details,
+      read_at: this.read_at,
+      archived_at: this.archived_at,
+      snoozed_till: this.snoozed_till,
+      is_inbox_issue: this.is_inbox_issue,
+      is_mentioned_notification: this.is_mentioned_notification,
+      workspace: this.workspace,
+      project: this.project,
+      created_at: this.created_at,
+      updated_at: this.updated_at,
+      created_by: this.created_by,
+      updated_by: this.updated_by,
+    };
+  }
+
+  // computed functions
+
+  // helper functions
+  mutateNotification = (notification: Partial<TNotification>) => {
+    Object.entries(notification).forEach(([key, value]) => {
+      if (key in this) {
+        set(this, key, value);
+      }
+    });
+  };
+
+  // actions
+  /**
+   * @description update notification
+   * @param { string } workspaceSlug
+   * @param { Partial<TNotification> } payload
+   * @returns { TNotification | undefined }
+   */
+  updateNotification = async (
+    workspaceSlug: string,
+    payload: Partial<TNotification>
+  ): Promise<TNotification | undefined> => {
+    try {
+      const notification = await workspaceNotificationService.updateNotificationById(workspaceSlug, this.id, payload);
+      if (notification) {
+        runInAction(() => this.mutateNotification(notification));
+      }
+      return notification;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  /**
+   * @description mark notification as read
+   * @param { string } workspaceSlug
+   * @returns { TNotification | undefined }
+   */
+  markNotificationAsRead = async (workspaceSlug: string): Promise<TNotification | undefined> => {
+    const currentNotificationReadAt = this.read_at;
+    try {
+      const payload: Partial<TNotification> = {
+        read_at: new Date().toISOString(),
+      };
+      this.store.workspaceNotification.setUnreadNotificationsCount("decrement");
+      runInAction(() => this.mutateNotification(payload));
+      const notification = await workspaceNotificationService.markNotificationAsRead(workspaceSlug, this.id);
+      if (notification) {
+        runInAction(() => this.mutateNotification(notification));
+      }
+      return notification;
+    } catch (error) {
+      runInAction(() => this.mutateNotification({ read_at: currentNotificationReadAt }));
+      this.store.workspaceNotification.setUnreadNotificationsCount("increment");
+      throw error;
+    }
+  };
+
+  /**
+   * @description mark notification as unread
+   * @param { string } workspaceSlug
+   * @returns { TNotification | undefined }
+   */
+  markNotificationAsUnRead = async (workspaceSlug: string): Promise<TNotification | undefined> => {
+    const currentNotificationReadAt = this.read_at;
+    try {
+      const payload: Partial<TNotification> = {
+        read_at: undefined,
+      };
+      this.store.workspaceNotification.setUnreadNotificationsCount("increment");
+      runInAction(() => this.mutateNotification(payload));
+      const notification = await workspaceNotificationService.markNotificationAsUnread(workspaceSlug, this.id);
+      if (notification) {
+        runInAction(() => this.mutateNotification(notification));
+      }
+      return notification;
+    } catch (error) {
+      this.store.workspaceNotification.setUnreadNotificationsCount("decrement");
+      runInAction(() => this.mutateNotification({ read_at: currentNotificationReadAt }));
+      throw error;
+    }
+  };
+
+  /**
+   * @description archive notification
+   * @param { string } workspaceSlug
+   * @returns { TNotification | undefined }
+   */
+  archiveNotification = async (workspaceSlug: string): Promise<TNotification | undefined> => {
+    const currentNotificationArchivedAt = this.archived_at;
+    try {
+      const payload: Partial<TNotification> = {
+        archived_at: new Date().toISOString(),
+      };
+      runInAction(() => this.mutateNotification(payload));
+      const notification = await workspaceNotificationService.markNotificationAsArchived(workspaceSlug, this.id);
+      if (notification) {
+        runInAction(() => this.mutateNotification(notification));
+      }
+      return notification;
+    } catch (error) {
+      runInAction(() => this.mutateNotification({ archived_at: currentNotificationArchivedAt }));
+      throw error;
+    }
+  };
+
+  /**
+   * @description unarchive notification
+   * @param { string } workspaceSlug
+   * @returns { TNotification | undefined }
+   */
+  unArchiveNotification = async (workspaceSlug: string): Promise<TNotification | undefined> => {
+    const currentNotificationArchivedAt = this.archived_at;
+    try {
+      const payload: Partial<TNotification> = {
+        archived_at: undefined,
+      };
+      runInAction(() => this.mutateNotification(payload));
+      const notification = await workspaceNotificationService.markNotificationAsUnArchived(workspaceSlug, this.id);
+      if (notification) {
+        runInAction(() => this.mutateNotification(notification));
+      }
+      return notification;
+    } catch (error) {
+      runInAction(() => this.mutateNotification({ archived_at: currentNotificationArchivedAt }));
+      throw error;
+    }
+  };
+
+  /**
+   * @description snooze notification
+   * @param { string } workspaceSlug
+   * @param { Date } snoozeTill
+   * @returns { TNotification | undefined }
+   */
+  snoozeNotification = async (workspaceSlug: string, snoozeTill: Date): Promise<TNotification | undefined> => {
+    const currentNotificationSnoozeTill = this.snoozed_till;
+    try {
+      const payload: Partial<TNotification> = {
+        snoozed_till: snoozeTill.toISOString(),
+      };
+      runInAction(() => this.mutateNotification(payload));
+      const notification = await workspaceNotificationService.updateNotificationById(workspaceSlug, this.id, payload);
+      return notification;
+    } catch (error) {
+      runInAction(() => this.mutateNotification({ snoozed_till: currentNotificationSnoozeTill }));
+      throw error;
+    }
+  };
+
+  /**
+   * @description un snooze notification
+   * @param { string } workspaceSlug
+   * @returns { TNotification | undefined }
+   */
+  unSnoozeNotification = async (workspaceSlug: string): Promise<TNotification | undefined> => {
+    const currentNotificationSnoozeTill = this.snoozed_till;
+    try {
+      const payload: Partial<TNotification> = {
+        snoozed_till: undefined,
+      };
+      runInAction(() => this.mutateNotification(payload));
+      const notification = await workspaceNotificationService.updateNotificationById(workspaceSlug, this.id, payload);
+      return notification;
+    } catch (error) {
+      runInAction(() => this.mutateNotification({ snoozed_till: currentNotificationSnoozeTill }));
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/notifications/workspace-notifications.store.ts b/apps/web/core/store/notifications/workspace-notifications.store.ts
new file mode 100644
index 0000000..b11f563
--- /dev/null
+++ b/apps/web/core/store/notifications/workspace-notifications.store.ts
@@ -0,0 +1,402 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { orderBy, isEmpty, update, set } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { TNotificationTab } from "@plane/constants";
+import { ENotificationTab, ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
+import type {
+  TNotification,
+  TNotificationFilter,
+  TNotificationLite,
+  TNotificationPaginatedInfo,
+  TNotificationPaginatedInfoQueryParams,
+  TUnreadNotificationsCount,
+} from "@plane/types";
+// helpers
+import { convertToEpoch } from "@plane/utils";
+// services
+import workspaceNotificationService from "@/services/workspace-notification.service";
+// store
+import type { INotification } from "@/store/notifications/notification";
+import { Notification } from "@/store/notifications/notification";
+import type { CoreRootStore } from "@/store/root.store";
+
+type TNotificationLoader = ENotificationLoader | undefined;
+type TNotificationQueryParamType = ENotificationQueryParamType;
+
+export interface IWorkspaceNotificationStore {
+  // observables
+  loader: TNotificationLoader;
+  unreadNotificationsCount: TUnreadNotificationsCount;
+  notifications: Record<string, INotification>; // notification_id -> notification
+  currentNotificationTab: TNotificationTab;
+  currentSelectedNotificationId: string | undefined;
+  paginationInfo: Omit<TNotificationPaginatedInfo, "results"> | undefined;
+  filters: TNotificationFilter;
+  // computed
+  // computed functions
+  notificationIdsByWorkspaceId: (workspaceId: string) => string[] | undefined;
+  notificationLiteByNotificationId: (notificationId: string | undefined) => TNotificationLite;
+  // helper actions
+  mutateNotifications: (notifications: TNotification[]) => void;
+  updateFilters: <T extends keyof TNotificationFilter>(key: T, value: TNotificationFilter[T]) => void;
+  updateBulkFilters: (filters: Partial<TNotificationFilter>) => void;
+  // actions
+  setCurrentNotificationTab: (tab: TNotificationTab) => void;
+  setCurrentSelectedNotificationId: (notificationId: string | undefined) => void;
+  setUnreadNotificationsCount: (type: "increment" | "decrement", newCount?: number) => void;
+  getUnreadNotificationsCount: (workspaceSlug: string) => Promise<TUnreadNotificationsCount | undefined>;
+  getNotifications: (
+    workspaceSlug: string,
+    loader?: TNotificationLoader,
+    queryCursorType?: TNotificationQueryParamType
+  ) => Promise<TNotificationPaginatedInfo | undefined>;
+  markAllNotificationsAsRead: (workspaceId: string) => Promise<void>;
+}
+
+export class WorkspaceNotificationStore implements IWorkspaceNotificationStore {
+  // constants
+  paginatedCount = 300;
+  // observables
+  loader: TNotificationLoader = undefined;
+  unreadNotificationsCount: TUnreadNotificationsCount = {
+    total_unread_notifications_count: 0,
+    mention_unread_notifications_count: 0,
+  };
+  notifications: Record<string, INotification> = {};
+  currentNotificationTab: TNotificationTab = ENotificationTab.ALL;
+  currentSelectedNotificationId: string | undefined = undefined;
+  paginationInfo: Omit<TNotificationPaginatedInfo, "results"> | undefined = undefined;
+  filters: TNotificationFilter = {
+    type: {
+      assigned: false,
+      created: false,
+      subscribed: false,
+    },
+    snoozed: false,
+    archived: false,
+    read: false,
+  };
+
+  constructor(protected store: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      unreadNotificationsCount: observable,
+      notifications: observable,
+      currentNotificationTab: observable.ref,
+      currentSelectedNotificationId: observable,
+      paginationInfo: observable,
+      filters: observable,
+      // computed
+      // helper actions
+      setCurrentNotificationTab: action,
+      setCurrentSelectedNotificationId: action,
+      setUnreadNotificationsCount: action,
+      mutateNotifications: action,
+      updateFilters: action,
+      updateBulkFilters: action,
+      // actions
+      getUnreadNotificationsCount: action,
+      getNotifications: action,
+      markAllNotificationsAsRead: action,
+    });
+  }
+
+  // computed
+
+  // computed functions
+  /**
+   * @description get notification ids by workspace id
+   * @param { string } workspaceId
+   */
+  notificationIdsByWorkspaceId = computedFn((workspaceId: string) => {
+    if (!workspaceId || isEmpty(this.notifications)) return undefined;
+    const workspaceNotifications = orderBy(
+      Object.values(this.notifications || []),
+      (n) => convertToEpoch(n.created_at),
+      ["desc"]
+    );
+    const workspaceNotificationIds = workspaceNotifications
+      .filter((n) => n.workspace === workspaceId)
+      .filter((n) =>
+        this.currentNotificationTab === ENotificationTab.MENTIONS
+          ? n.is_mentioned_notification
+          : !n.is_mentioned_notification
+      )
+      .filter((n) => {
+        if (!this.filters.archived && !this.filters.snoozed) {
+          if (n.archived_at) {
+            return false;
+          } else if (n.snoozed_till) {
+            return false;
+          } else {
+            return true;
+          }
+        } else {
+          if (this.filters.snoozed) {
+            return n.snoozed_till ? true : false;
+          } else if (this.filters.archived) {
+            return n.archived_at ? true : false;
+          } else {
+            return true;
+          }
+        }
+      })
+      // .filter((n) => (this.filters.read ? (n.read_at ? true : false) : n.read_at ? false : true))
+      .map((n) => n.id);
+    return workspaceNotificationIds;
+  });
+
+  /**
+   * @description get notification lite by notification id
+   * @param { string } notificationId
+   */
+  notificationLiteByNotificationId = computedFn((notificationId: string | undefined) => {
+    if (!notificationId) return {} as TNotificationLite;
+    const { workspaceSlug } = this.store.router;
+    const notification = this.notifications[notificationId];
+    if (!notification || !workspaceSlug) return {} as TNotificationLite;
+    return {
+      workspace_slug: workspaceSlug,
+      project_id: notification.project,
+      notification_id: notification.id,
+      issue_id: notification.data?.issue?.id,
+      is_inbox_issue: notification.is_inbox_issue || false,
+    };
+  });
+
+  // helper functions
+  /**
+   * @description generate notification query params
+   * @returns { object }
+   */
+  generateNotificationQueryParams = (paramType: TNotificationQueryParamType): TNotificationPaginatedInfoQueryParams => {
+    const queryParamsType =
+      Object.entries(this.filters.type)
+        .filter(([, value]) => value)
+        .map(([key]) => key)
+        .join(",") || undefined;
+
+    const queryCursorNext =
+      paramType === ENotificationQueryParamType.INIT
+        ? `${this.paginatedCount}:0:0`
+        : paramType === ENotificationQueryParamType.CURRENT
+          ? `${this.paginatedCount}:${0}:0`
+          : paramType === ENotificationQueryParamType.NEXT && this.paginationInfo
+            ? this.paginationInfo?.next_cursor
+            : `${this.paginatedCount}:${0}:0`;
+
+    const queryParams: TNotificationPaginatedInfoQueryParams = {
+      type: queryParamsType,
+      snoozed: this.filters.snoozed || false,
+      archived: this.filters.archived || false,
+      read: undefined,
+      per_page: this.paginatedCount,
+      cursor: queryCursorNext,
+    };
+
+    // NOTE: This validation is required to show all the read and unread notifications in a single place it may change in future.
+    queryParams.read = this.filters.read === true ? false : undefined;
+
+    if (this.currentNotificationTab === ENotificationTab.MENTIONS) queryParams.mentioned = true;
+
+    return queryParams;
+  };
+
+  // helper actions
+  /**
+   * @description mutate and validate current existing and new notifications
+   * @param { TNotification[] } notifications
+   */
+  mutateNotifications = (notifications: TNotification[]) => {
+    (notifications || []).forEach((notification) => {
+      if (!notification.id) return;
+      if (this.notifications[notification.id]) {
+        this.notifications[notification.id].mutateNotification(notification);
+      } else {
+        set(this.notifications, notification.id, new Notification(this.store, notification));
+      }
+    });
+  };
+
+  /**
+   * @description update filters
+   * @param { T extends keyof TNotificationFilter } key
+   * @param { TNotificationFilter[T] } value
+   */
+  updateFilters = <T extends keyof TNotificationFilter>(key: T, value: TNotificationFilter[T]) => {
+    set(this.filters, key, value);
+    const { workspaceSlug } = this.store.router;
+    if (!workspaceSlug) return;
+
+    set(this, "notifications", {});
+    this.getNotifications(workspaceSlug, ENotificationLoader.INIT_LOADER, ENotificationQueryParamType.INIT);
+  };
+
+  /**
+   * @description update bulk filters
+   * @param { Partial<TNotificationFilter> } filters
+   */
+  updateBulkFilters = (filters: Partial<TNotificationFilter>) => {
+    Object.entries(filters).forEach(([key, value]) => {
+      set(this.filters, key, value);
+    });
+
+    const { workspaceSlug } = this.store.router;
+    if (!workspaceSlug) return;
+
+    set(this, "notifications", {});
+    this.getNotifications(workspaceSlug, ENotificationLoader.INIT_LOADER, ENotificationQueryParamType.INIT);
+  };
+
+  // actions
+  /**
+   * @description set notification tab
+   * @returns { void }
+   */
+  setCurrentNotificationTab = (tab: TNotificationTab): void => {
+    set(this, "currentNotificationTab", tab);
+
+    const { workspaceSlug } = this.store.router;
+    if (!workspaceSlug) return;
+
+    set(this, "notifications", {});
+    this.getNotifications(workspaceSlug, ENotificationLoader.INIT_LOADER, ENotificationQueryParamType.INIT);
+  };
+
+  /**
+   * @description set current selected notification
+   * @param { string | undefined } notificationId
+   * @returns { void }
+   */
+  setCurrentSelectedNotificationId = (notificationId: string | undefined): void => {
+    set(this, "currentSelectedNotificationId", notificationId);
+  };
+
+  /**
+   * @description set unread notifications count
+   * @param { "increment" | "decrement" } type
+   * @returns { void }
+   */
+  setUnreadNotificationsCount = (type: "increment" | "decrement", newCount: number = 1): void => {
+    const validCount = Math.max(0, Math.abs(newCount));
+
+    switch (this.currentNotificationTab) {
+      case ENotificationTab.ALL:
+        update(
+          this.unreadNotificationsCount,
+          "total_unread_notifications_count",
+          (count: number) => +Math.max(0, type === "increment" ? count + validCount : count - validCount)
+        );
+        break;
+      case ENotificationTab.MENTIONS:
+        update(
+          this.unreadNotificationsCount,
+          "mention_unread_notifications_count",
+          (count: number) => +Math.max(0, type === "increment" ? count + validCount : count - validCount)
+        );
+        break;
+      default:
+        break;
+    }
+  };
+
+  /**
+   * @description get unread notifications count
+   * @param { string } workspaceSlug,
+   * @param { TNotificationQueryParamType } queryCursorType,
+   * @returns { number | undefined }
+   */
+  getUnreadNotificationsCount = async (workspaceSlug: string): Promise<TUnreadNotificationsCount | undefined> => {
+    try {
+      const unreadNotificationCount = await workspaceNotificationService.fetchUnreadNotificationsCount(workspaceSlug);
+      if (unreadNotificationCount)
+        runInAction(() => {
+          set(this, "unreadNotificationsCount", unreadNotificationCount);
+        });
+      return unreadNotificationCount || undefined;
+    } catch (error) {
+      console.error("WorkspaceNotificationStore -> getUnreadNotificationsCount -> error", error);
+      throw error;
+    }
+  };
+
+  /**
+   * @description get all workspace notification
+   * @param { string } workspaceSlug,
+   * @param { TNotificationLoader } loader,
+   * @returns { TNotification | undefined }
+   */
+  getNotifications = async (
+    workspaceSlug: string,
+    loader: TNotificationLoader = ENotificationLoader.INIT_LOADER,
+    queryParamType: TNotificationQueryParamType = ENotificationQueryParamType.INIT
+  ): Promise<TNotificationPaginatedInfo | undefined> => {
+    this.loader = loader;
+    try {
+      const queryParams = this.generateNotificationQueryParams(queryParamType);
+      await this.getUnreadNotificationsCount(workspaceSlug);
+      const notificationResponse = await workspaceNotificationService.fetchNotifications(workspaceSlug, queryParams);
+      if (notificationResponse) {
+        const { results, ...paginationInfo } = notificationResponse;
+        runInAction(() => {
+          if (results) {
+            this.mutateNotifications(results);
+          }
+          set(this, "paginationInfo", paginationInfo);
+        });
+      }
+      return notificationResponse;
+    } catch (error) {
+      console.error("WorkspaceNotificationStore -> getNotifications -> error", error);
+      throw error;
+    } finally {
+      runInAction(() => (this.loader = undefined));
+    }
+  };
+
+  /**
+   * @description mark all notifications as read
+   * @param { string } workspaceSlug,
+   * @returns { void }
+   */
+  markAllNotificationsAsRead = async (workspaceSlug: string): Promise<void> => {
+    try {
+      this.loader = ENotificationLoader.MARK_ALL_AS_READY;
+      const queryParams = this.generateNotificationQueryParams(ENotificationQueryParamType.INIT);
+      const params = {
+        type: queryParams.type,
+        snoozed: queryParams.snoozed,
+        archived: queryParams.archived,
+        read: queryParams.read,
+      };
+      await workspaceNotificationService.markAllNotificationsAsRead(workspaceSlug, params);
+      runInAction(() => {
+        update(
+          this.unreadNotificationsCount,
+          this.currentNotificationTab === ENotificationTab.ALL
+            ? "total_unread_notifications_count"
+            : "mention_unread_notifications_count",
+          () => 0
+        );
+        Object.values(this.notifications).forEach((notification) =>
+          notification.mutateNotification({
+            read_at: new Date().toUTCString(),
+          })
+        );
+      });
+    } catch (error) {
+      console.error("WorkspaceNotificationStore -> markAllNotificationsAsRead -> error", error);
+      throw error;
+    } finally {
+      runInAction(() => (this.loader = undefined));
+    }
+  };
+}
diff --git a/apps/web/core/store/pages/base-page.ts b/apps/web/core/store/pages/base-page.ts
new file mode 100644
index 0000000..1936a6b
--- /dev/null
+++ b/apps/web/core/store/pages/base-page.ts
@@ -0,0 +1,554 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
+// plane imports
+import { EPageAccess } from "@plane/constants";
+import type { TChangeHandlerProps } from "@plane/propel/emoji-icon-picker";
+import type { TDocumentPayload, TLogoProps, TNameDescriptionLoader, TPage } from "@plane/types";
+// plane web store
+import { ExtendedBasePage } from "@/store/pages/extended-base-page";
+import type { RootStore } from "@/store/root.store";
+// local imports
+import { PageEditorInstance } from "./page-editor-info";
+
+export type TBasePage = TPage & {
+  // observables
+  isSubmitting: TNameDescriptionLoader;
+  isSyncingWithServer: "syncing" | "synced" | "error";
+  // computed
+  asJSON: TPage | undefined;
+  isCurrentUserOwner: boolean;
+  // helpers
+  oldName: string;
+  setIsSubmitting: (value: TNameDescriptionLoader) => void;
+  cleanup: () => void;
+  // actions
+  update: (pageData: Partial<TPage>) => Promise<Partial<TPage> | undefined>;
+  updateTitle: (title: string) => void;
+  updateDescription: (document: TDocumentPayload) => Promise<void>;
+  makePublic: (params: { shouldSync?: boolean }) => Promise<void>;
+  makePrivate: (params: { shouldSync?: boolean }) => Promise<void>;
+  lock: (params: { shouldSync?: boolean; recursive?: boolean }) => Promise<void>;
+  unlock: (params: { shouldSync?: boolean; recursive?: boolean }) => Promise<void>;
+  archive: (params: { shouldSync?: boolean; archived_at?: string | null }) => Promise<void>;
+  restore: (params: { shouldSync?: boolean }) => Promise<void>;
+  updatePageLogo: (value: TChangeHandlerProps) => Promise<void>;
+  addToFavorites: () => Promise<void>;
+  removePageFromFavorites: () => Promise<void>;
+  duplicate: () => Promise<TPage | undefined>;
+  mutateProperties: (data: Partial<TPage>, shouldUpdateName?: boolean) => void;
+  setSyncingStatus: (status: "syncing" | "synced" | "error") => void;
+  // sub-store
+  editor: PageEditorInstance;
+};
+
+export type TBasePagePermissions = {
+  canCurrentUserAccessPage: boolean;
+  canCurrentUserEditPage: boolean;
+  canCurrentUserDuplicatePage: boolean;
+  canCurrentUserLockPage: boolean;
+  canCurrentUserChangeAccess: boolean;
+  canCurrentUserArchivePage: boolean;
+  canCurrentUserDeletePage: boolean;
+  canCurrentUserFavoritePage: boolean;
+  canCurrentUserMovePage: boolean;
+  isContentEditable: boolean;
+};
+
+export type TBasePageServices = {
+  update: (payload: Partial<TPage>) => Promise<Partial<TPage>>;
+  updateDescription: (document: TDocumentPayload) => Promise<void>;
+  updateAccess: (payload: Pick<TPage, "access">) => Promise<void>;
+  lock: () => Promise<void>;
+  unlock: () => Promise<void>;
+  archive: () => Promise<{
+    archived_at: string;
+  }>;
+  restore: () => Promise<void>;
+  duplicate: () => Promise<TPage>;
+};
+
+export type TPageInstance = TBasePage &
+  TBasePagePermissions & {
+    getRedirectionLink: () => string;
+  };
+
+export class BasePage extends ExtendedBasePage implements TBasePage {
+  // loaders
+  isSubmitting: TNameDescriptionLoader = "saved";
+  isSyncingWithServer: "syncing" | "synced" | "error" = "syncing";
+  // page properties
+  id: string | undefined;
+  name: string | undefined;
+  logo_props: TLogoProps | undefined;
+  description_json: object | undefined;
+  description_html: string | undefined;
+  color: string | undefined;
+  label_ids: string[] | undefined;
+  owned_by: string | undefined;
+  access: EPageAccess | undefined;
+  is_favorite: boolean;
+  is_locked: boolean;
+  archived_at: string | null | undefined;
+  workspace: string | undefined;
+  project_ids?: string[] | undefined;
+  created_by: string | undefined;
+  updated_by: string | undefined;
+  created_at: Date | undefined;
+  updated_at: Date | undefined;
+  deleted_at: Date | undefined;
+  // helpers
+  oldName: string = "";
+  // services
+  services: TBasePageServices;
+  // reactions
+  disposers: Array<() => void> = [];
+  // root store
+  rootStore: RootStore;
+  // sub-store
+  editor: PageEditorInstance;
+
+  constructor(
+    private store: RootStore,
+    page: TPage,
+    services: TBasePageServices
+  ) {
+    super(store, page, services);
+
+    this.id = page?.id || undefined;
+    this.name = page?.name;
+    this.logo_props = page?.logo_props || undefined;
+    this.description_json = page?.description_json || undefined;
+    this.description_html = page?.description_html || undefined;
+    this.color = page?.color || undefined;
+    this.label_ids = page?.label_ids || undefined;
+    this.owned_by = page?.owned_by || undefined;
+    this.access = page?.access || EPageAccess.PUBLIC;
+    this.is_favorite = page?.is_favorite || false;
+    this.is_locked = page?.is_locked || false;
+    this.archived_at = page?.archived_at || undefined;
+    this.workspace = page?.workspace || undefined;
+    this.project_ids = page?.project_ids || undefined;
+    this.created_by = page?.created_by || undefined;
+    this.updated_by = page?.updated_by || undefined;
+    this.created_at = page?.created_at || undefined;
+    this.updated_at = page?.updated_at || undefined;
+    this.oldName = page?.name || "";
+    this.deleted_at = page?.deleted_at || undefined;
+
+    makeObservable(this, {
+      // loaders
+      isSubmitting: observable.ref,
+      // page properties
+      id: observable.ref,
+      name: observable.ref,
+      logo_props: observable.ref,
+      description_json: observable.ref,
+      description_html: observable.ref,
+      color: observable.ref,
+      label_ids: observable,
+      owned_by: observable.ref,
+      access: observable.ref,
+      is_favorite: observable.ref,
+      is_locked: observable.ref,
+      archived_at: observable.ref,
+      workspace: observable.ref,
+      project_ids: observable,
+      created_by: observable.ref,
+      updated_by: observable.ref,
+      created_at: observable.ref,
+      updated_at: observable.ref,
+      deleted_at: observable.ref,
+      isSyncingWithServer: observable.ref,
+      // helpers
+      oldName: observable.ref,
+      setIsSubmitting: action,
+      cleanup: action,
+      // computed
+      asJSON: computed,
+      isCurrentUserOwner: computed,
+      // actions
+      update: action,
+      updateTitle: action,
+      updateDescription: action,
+      makePublic: action,
+      makePrivate: action,
+      lock: action,
+      unlock: action,
+      archive: action,
+      restore: action,
+      updatePageLogo: action,
+      addToFavorites: action,
+      removePageFromFavorites: action,
+      duplicate: action,
+      mutateProperties: action,
+    });
+
+    // init
+    this.services = services;
+    this.rootStore = store;
+    this.editor = new PageEditorInstance();
+
+    const titleDisposer = reaction(
+      () => this.name,
+      (name) => {
+        this.isSubmitting = "submitting";
+        this.services
+          .update({
+            name,
+          })
+          .catch(() =>
+            runInAction(() => {
+              this.name = this.oldName;
+            })
+          )
+          .finally(() =>
+            runInAction(() => {
+              this.isSubmitting = "submitted";
+            })
+          );
+      },
+      { delay: 2000 }
+    );
+    this.disposers.push(titleDisposer);
+  }
+
+  // computed
+  get asJSON() {
+    return {
+      id: this.id,
+      name: this.name,
+      description_json: this.description_json,
+      description_html: this.description_html,
+      color: this.color,
+      label_ids: this.label_ids,
+      owned_by: this.owned_by,
+      access: this.access,
+      logo_props: this.logo_props,
+      is_favorite: this.is_favorite,
+      is_locked: this.is_locked,
+      archived_at: this.archived_at,
+      workspace: this.workspace,
+      project_ids: this.project_ids,
+      created_by: this.created_by,
+      updated_by: this.updated_by,
+      created_at: this.created_at,
+      updated_at: this.updated_at,
+      deleted_at: this.deleted_at,
+      ...this.asJSONExtended,
+    };
+  }
+
+  get isCurrentUserOwner() {
+    const currentUserId = this.store.user.data?.id;
+    if (!currentUserId) return false;
+    return this.owned_by === currentUserId;
+  }
+
+  /**
+   * @description update the submitting state
+   * @param value
+   */
+  setIsSubmitting = (value: TNameDescriptionLoader) => {
+    runInAction(() => {
+      this.isSubmitting = value;
+    });
+  };
+
+  cleanup = () => {
+    this.disposers.forEach((disposer) => {
+      disposer();
+    });
+  };
+
+  /**
+   * @description update the page
+   * @param {Partial<TPage>} pageData
+   */
+  update = async (pageData: Partial<TPage>) => {
+    const currentPage = this.asJSON;
+    try {
+      runInAction(() => {
+        Object.keys(pageData).forEach((key) => {
+          const currentPageKey = key as keyof TPage;
+          set(this, key, pageData[currentPageKey] || undefined);
+        });
+      });
+
+      return await this.services.update(currentPage);
+    } catch (error) {
+      runInAction(() => {
+        Object.keys(pageData).forEach((key) => {
+          const currentPageKey = key as keyof TPage;
+          set(this, key, currentPage?.[currentPageKey] || undefined);
+        });
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description update the page title
+   * @param title
+   */
+  updateTitle = (title: string) => {
+    this.oldName = this.name ?? "";
+    this.name = title;
+  };
+
+  /**
+   * @description update the page description
+   * @param {TDocumentPayload} document
+   */
+  updateDescription = async (document: TDocumentPayload) => {
+    const currentDescription = this.description_html;
+    runInAction(() => {
+      this.description_html = document.description_html;
+    });
+
+    try {
+      await this.services.updateDescription(document);
+    } catch (error) {
+      runInAction(() => {
+        this.description_html = currentDescription;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description make the page public
+   */
+  makePublic = async ({ shouldSync = true }) => {
+    const pageAccess = this.access;
+    runInAction(() => {
+      this.access = EPageAccess.PUBLIC;
+    });
+
+    if (shouldSync) {
+      try {
+        await this.services.updateAccess({
+          access: EPageAccess.PUBLIC,
+        });
+      } catch (error) {
+        runInAction(() => {
+          this.access = pageAccess;
+        });
+        throw error;
+      }
+    }
+  };
+
+  /**
+   * @description make the page private
+   */
+  makePrivate = async ({ shouldSync = true }) => {
+    const pageAccess = this.access;
+    runInAction(() => {
+      this.access = EPageAccess.PRIVATE;
+    });
+
+    if (shouldSync) {
+      try {
+        await this.services.updateAccess({
+          access: EPageAccess.PRIVATE,
+        });
+      } catch (error) {
+        runInAction(() => {
+          this.access = pageAccess;
+        });
+        throw error;
+      }
+    }
+  };
+
+  /**
+   * @description lock the page
+   */
+  lock = async ({ shouldSync = true }) => {
+    const pageIsLocked = this.is_locked;
+    runInAction(() => (this.is_locked = true));
+
+    if (shouldSync) {
+      await this.services.lock().catch((error) => {
+        runInAction(() => {
+          this.is_locked = pageIsLocked;
+        });
+        throw error;
+      });
+    }
+  };
+
+  /**
+   * @description unlock the page
+   */
+  unlock = async ({ shouldSync = true }) => {
+    const pageIsLocked = this.is_locked;
+    runInAction(() => (this.is_locked = false));
+
+    if (shouldSync) {
+      await this.services.unlock().catch((error) => {
+        runInAction(() => {
+          this.is_locked = pageIsLocked;
+        });
+        throw error;
+      });
+    }
+  };
+
+  /**
+   * @description archive the page
+   */
+  archive = async ({ shouldSync = true, archived_at }: { shouldSync?: boolean; archived_at?: string | null }) => {
+    if (!this.id) return undefined;
+
+    try {
+      runInAction(() => {
+        this.archived_at = archived_at ?? new Date().toISOString();
+      });
+
+      if (this.rootStore.favorite.entityMap[this.id]) this.rootStore.favorite.removeFavoriteFromStore(this.id);
+
+      if (shouldSync) {
+        const response = await this.services.archive();
+        runInAction(() => {
+          this.archived_at = response.archived_at;
+        });
+      }
+    } catch (error) {
+      console.error(error);
+      runInAction(() => {
+        this.archived_at = null;
+      });
+    }
+  };
+
+  /**
+   * @description restore the page
+   */
+  restore = async ({ shouldSync = true }: { shouldSync?: boolean }) => {
+    const archivedAtBeforeRestore = this.archived_at;
+
+    try {
+      runInAction(() => {
+        this.archived_at = null;
+      });
+
+      if (shouldSync) {
+        await this.services.restore();
+      }
+    } catch (error) {
+      console.error(error);
+      runInAction(() => {
+        this.archived_at = archivedAtBeforeRestore;
+      });
+      throw error;
+    }
+  };
+
+  updatePageLogo = async (value: TChangeHandlerProps) => {
+    const originalLogoProps = { ...this.logo_props };
+    try {
+      let logoValue = {};
+      if (value?.type === "emoji")
+        logoValue = {
+          value: value.value,
+          url: undefined,
+        };
+      else if (value?.type === "icon") logoValue = value.value;
+
+      const logoProps: TLogoProps = {
+        in_use: value?.type,
+        [value?.type]: logoValue,
+      };
+
+      runInAction(() => {
+        this.logo_props = logoProps;
+      });
+      await this.services.update({
+        logo_props: logoProps,
+      });
+    } catch (error) {
+      console.error("Error in updating page logo", error);
+      runInAction(() => {
+        this.logo_props = originalLogoProps as TLogoProps;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description add the page to favorites
+   */
+  addToFavorites = async () => {
+    const { workspaceSlug } = this.store.router;
+    const projectId = this.project_ids?.[0] ?? null;
+    if (!workspaceSlug || !this.id) return undefined;
+
+    const pageIsFavorite = this.is_favorite;
+    runInAction(() => {
+      this.is_favorite = true;
+    });
+    await this.rootStore.favorite
+      .addFavorite(workspaceSlug.toString(), {
+        entity_type: "page",
+        entity_identifier: this.id,
+        project_id: projectId,
+        entity_data: { name: this.name || "" },
+      })
+      .catch((error) => {
+        runInAction(() => {
+          this.is_favorite = pageIsFavorite;
+        });
+        throw error;
+      });
+  };
+
+  /**
+   * @description remove the page from favorites
+   */
+  removePageFromFavorites = async () => {
+    const { workspaceSlug } = this.store.router;
+    if (!workspaceSlug || !this.id) return undefined;
+
+    const pageIsFavorite = this.is_favorite;
+    runInAction(() => {
+      this.is_favorite = false;
+    });
+
+    await this.rootStore.favorite.removeFavoriteEntity(workspaceSlug, this.id).catch((error) => {
+      runInAction(() => {
+        this.is_favorite = pageIsFavorite;
+      });
+      throw error;
+    });
+  };
+
+  /**
+   * @description duplicate the page
+   */
+  duplicate = async () => await this.services.duplicate();
+
+  /**
+   * @description mutate multiple properties at once
+   * @param data Partial<TPage>
+   */
+  mutateProperties = (data: Partial<TPage>, shouldUpdateName: boolean = true) => {
+    Object.keys(data).forEach((key) => {
+      const value = data[key as keyof TPage];
+      if (key === "name" && !shouldUpdateName) return;
+      set(this, key, value);
+    });
+  };
+
+  setSyncingStatus = (status: "syncing" | "synced" | "error") => {
+    runInAction(() => {
+      this.isSyncingWithServer = status;
+    });
+  };
+}
diff --git a/apps/web/core/store/pages/extended-base-page.ts b/apps/web/core/store/pages/extended-base-page.ts
new file mode 100644
index 0000000..5663445
--- /dev/null
+++ b/apps/web/core/store/pages/extended-base-page.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TPage, TPageExtended } from "@plane/types";
+import type { CoreRootStore } from "@/store/root.store";
+import type { TBasePageServices } from "@/store/pages/base-page";
+
+export type TExtendedPageInstance = TPageExtended & {
+  asJSONExtended: TPageExtended;
+};
+
+export class ExtendedBasePage implements TExtendedPageInstance {
+  // oxlint-disable-next-line no-useless-constructor, no-unused-vars
+  constructor(store: CoreRootStore, page: TPage, services: TBasePageServices) {}
+
+  get asJSONExtended(): TExtendedPageInstance["asJSONExtended"] {
+    return {};
+  }
+}
diff --git a/apps/web/core/store/pages/page-editor-info.ts b/apps/web/core/store/pages/page-editor-info.ts
new file mode 100644
index 0000000..5048137
--- /dev/null
+++ b/apps/web/core/store/pages/page-editor-info.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, observable, runInAction } from "mobx";
+// plane imports
+import type { EditorRefApi, TEditorAsset } from "@plane/editor";
+
+export type TPageEditorInstance = {
+  // observables
+  assetsList: TEditorAsset[];
+  editorRef: EditorRefApi | null;
+  // actions
+  setEditorRef: (editorRef: EditorRefApi | null) => void;
+  updateAssetsList: (assets: TEditorAsset[]) => void;
+};
+
+export class PageEditorInstance implements TPageEditorInstance {
+  // observables
+  editorRef: EditorRefApi | null = null;
+  assetsList: TEditorAsset[] = [];
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      editorRef: observable.ref,
+      assetsList: observable,
+      // actions
+      setEditorRef: action,
+      updateAssetsList: action,
+    });
+  }
+
+  setEditorRef: TPageEditorInstance["setEditorRef"] = (editorRef) => {
+    runInAction(() => {
+      this.editorRef = editorRef;
+    });
+  };
+
+  updateAssetsList: TPageEditorInstance["updateAssetsList"] = (assets) => {
+    runInAction(() => {
+      this.assetsList = assets;
+    });
+  };
+}
diff --git a/apps/web/core/store/pages/project-page.store.ts b/apps/web/core/store/pages/project-page.store.ts
new file mode 100644
index 0000000..4fc70ea
--- /dev/null
+++ b/apps/web/core/store/pages/project-page.store.ts
@@ -0,0 +1,370 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { unset, set } from "lodash-es";
+import { makeObservable, observable, runInAction, action, reaction, computed } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import { EUserPermissions } from "@plane/constants";
+import type { TPage, TPageFilters, TPageNavigationTabs } from "@plane/types";
+import { EUserProjectRoles } from "@plane/types";
+// helpers
+import { filterPagesByPageType, getPageName, orderPages, shouldFilterPage } from "@plane/utils";
+// plane web constants
+// plane web store
+// services
+import { ProjectPageService } from "@/services/page";
+// store
+import type { CoreRootStore } from "../root.store";
+import type { TProjectPage } from "./project-page";
+import { ProjectPage } from "./project-page";
+
+type TLoader = "init-loader" | "mutation-loader" | undefined;
+
+type TError = { title: string; description: string };
+
+export const ROLE_PERMISSIONS_TO_CREATE_PAGE = [
+  EUserPermissions.ADMIN,
+  EUserPermissions.MEMBER,
+  EUserProjectRoles.ADMIN,
+  EUserProjectRoles.MEMBER,
+];
+
+export interface IProjectPageStore {
+  // observables
+  loader: TLoader;
+  data: Record<string, TProjectPage>; // pageId => Page
+  error: TError | undefined;
+  filters: TPageFilters;
+  // computed
+  isAnyPageAvailable: boolean;
+  canCurrentUserCreatePage: boolean;
+  // helper actions
+  getCurrentProjectPageIdsByTab: (pageType: TPageNavigationTabs) => string[] | undefined;
+  getCurrentProjectPageIds: (projectId: string) => string[];
+  getCurrentProjectFilteredPageIdsByTab: (pageType: TPageNavigationTabs) => string[] | undefined;
+  getPageById: (pageId: string) => TProjectPage | undefined;
+  updateFilters: <T extends keyof TPageFilters>(filterKey: T, filterValue: TPageFilters[T]) => void;
+  clearAllFilters: () => void;
+  // actions
+  fetchPagesList: (
+    workspaceSlug: string,
+    projectId: string,
+    pageType?: TPageNavigationTabs
+  ) => Promise<TPage[] | undefined>;
+  fetchPageDetails: (
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    options?: { trackVisit?: boolean }
+  ) => Promise<TPage | undefined>;
+  createPage: (pageData: Partial<TPage>) => Promise<TPage | undefined>;
+  removePage: (params: { pageId: string; shouldSync?: boolean }) => Promise<void>;
+  movePage: (workspaceSlug: string, projectId: string, pageId: string, newProjectId: string) => Promise<void>;
+}
+
+export class ProjectPageStore implements IProjectPageStore {
+  // observables
+  loader: TLoader = "init-loader";
+  data: Record<string, TProjectPage> = {}; // pageId => Page
+  error: TError | undefined = undefined;
+  filters: TPageFilters = {
+    searchQuery: "",
+    sortKey: "updated_at",
+    sortBy: "desc",
+  };
+  // service
+  service: ProjectPageService;
+  rootStore: CoreRootStore;
+
+  constructor(private store: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      data: observable,
+      error: observable,
+      filters: observable,
+      // computed
+      isAnyPageAvailable: computed,
+      canCurrentUserCreatePage: computed,
+      // helper actions
+      updateFilters: action,
+      clearAllFilters: action,
+      // actions
+      fetchPagesList: action,
+      fetchPageDetails: action,
+      createPage: action,
+      removePage: action,
+      movePage: action,
+    });
+    this.rootStore = store;
+    // service
+    this.service = new ProjectPageService();
+    // initialize display filters of the current project
+    reaction(
+      () => this.store.router.projectId,
+      (projectId) => {
+        if (!projectId) return;
+        this.filters.searchQuery = "";
+      }
+    );
+  }
+
+  /**
+   * @description check if any page is available
+   */
+  get isAnyPageAvailable() {
+    if (this.loader) return true;
+    return Object.keys(this.data).length > 0;
+  }
+
+  /**
+   * @description returns true if the current logged in user can create a page
+   */
+  get canCurrentUserCreatePage() {
+    const { workspaceSlug, projectId } = this.store.router;
+    const currentUserProjectRole = this.store.user.permission.getProjectRoleByWorkspaceSlugAndProjectId(
+      workspaceSlug?.toString() || "",
+      projectId?.toString() || ""
+    );
+    return !!currentUserProjectRole && ROLE_PERMISSIONS_TO_CREATE_PAGE.includes(currentUserProjectRole);
+  }
+
+  /**
+   * @description get the current project page ids based on the pageType
+   * @param {TPageNavigationTabs} pageType
+   */
+  getCurrentProjectPageIdsByTab = computedFn((pageType: TPageNavigationTabs) => {
+    const { projectId } = this.store.router;
+    if (!projectId) return undefined;
+    // helps to filter pages based on the pageType
+    let pagesByType = filterPagesByPageType(pageType, Object.values(this?.data || {}));
+    pagesByType = pagesByType.filter((p) => p.project_ids?.includes(projectId));
+
+    const pages = (pagesByType.map((page) => page.id) as string[]) || undefined;
+
+    return pages ?? undefined;
+  });
+
+  /**
+   * @description get the current project page ids
+   * @param {string} projectId
+   */
+  getCurrentProjectPageIds = computedFn((projectId: string) => {
+    if (!projectId) return [];
+    const pages = Object.values(this?.data || {}).filter((page) => page.project_ids?.includes(projectId));
+    return pages.map((page) => page.id) as string[];
+  });
+
+  /**
+   * @description get the current project filtered page ids based on the pageType
+   * @param {TPageNavigationTabs} pageType
+   */
+  getCurrentProjectFilteredPageIdsByTab = computedFn((pageType: TPageNavigationTabs) => {
+    const { projectId } = this.store.router;
+    if (!projectId) return undefined;
+
+    // helps to filter pages based on the pageType
+    const pagesByType = filterPagesByPageType(pageType, Object.values(this?.data || {}));
+    let filteredPages = pagesByType.filter(
+      (p) =>
+        p.project_ids?.includes(projectId) &&
+        getPageName(p.name).toLowerCase().includes(this.filters.searchQuery.toLowerCase()) &&
+        shouldFilterPage(p, this.filters.filters)
+    );
+    filteredPages = orderPages(filteredPages, this.filters.sortKey, this.filters.sortBy);
+
+    const pages = (filteredPages.map((page) => page.id) as string[]) || undefined;
+
+    return pages ?? undefined;
+  });
+
+  /**
+   * @description get the page store by id
+   * @param {string} pageId
+   */
+  getPageById = computedFn((pageId: string) => this.data?.[pageId] || undefined);
+
+  updateFilters = <T extends keyof TPageFilters>(filterKey: T, filterValue: TPageFilters[T]) => {
+    runInAction(() => {
+      set(this.filters, [filterKey], filterValue);
+    });
+  };
+
+  /**
+   * @description clear all the filters
+   */
+  clearAllFilters = () =>
+    runInAction(() => {
+      set(this.filters, ["filters"], {});
+    });
+
+  /**
+   * @description fetch all the pages
+   */
+  fetchPagesList = async (workspaceSlug: string, projectId: string, pageType?: TPageNavigationTabs) => {
+    try {
+      if (!workspaceSlug || !projectId) return undefined;
+
+      const currentPageIds = pageType ? this.getCurrentProjectPageIdsByTab(pageType) : undefined;
+      runInAction(() => {
+        this.loader = currentPageIds && currentPageIds.length > 0 ? `mutation-loader` : `init-loader`;
+        this.error = undefined;
+      });
+
+      const pages = await this.service.fetchAll(workspaceSlug, projectId);
+      runInAction(() => {
+        for (const page of pages) {
+          if (page?.id) {
+            const existingPage = this.getPageById(page.id);
+            if (existingPage) {
+              // If page already exists, update all fields except name
+
+              const { name, ...otherFields } = page;
+              existingPage.mutateProperties(otherFields, false);
+            } else {
+              // If new page, create a new instance with all data
+              set(this.data, [page.id], new ProjectPage(this.store, page));
+            }
+          }
+        }
+        this.loader = undefined;
+      });
+
+      return pages;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = undefined;
+        this.error = {
+          title: "Failed",
+          description: "Failed to fetch the pages, Please try again later.",
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description fetch the details of a page
+   * @param {string} pageId
+   */
+  fetchPageDetails = async (...args: Parameters<IProjectPageStore["fetchPageDetails"]>) => {
+    const [workspaceSlug, projectId, pageId, options] = args;
+    const { trackVisit } = options || {};
+    try {
+      if (!workspaceSlug || !projectId || !pageId) return undefined;
+
+      const currentPageId = this.getPageById(pageId);
+      runInAction(() => {
+        this.loader = currentPageId ? `mutation-loader` : `init-loader`;
+        this.error = undefined;
+      });
+
+      const page = await this.service.fetchById(workspaceSlug, projectId, pageId, trackVisit ?? true);
+
+      runInAction(() => {
+        if (page?.id) {
+          const pageInstance = this.getPageById(page.id);
+          if (pageInstance) {
+            pageInstance.mutateProperties(page, false);
+          } else {
+            set(this.data, [page.id], new ProjectPage(this.store, page));
+          }
+        }
+        this.loader = undefined;
+      });
+
+      return page;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = undefined;
+        this.error = {
+          title: "Failed",
+          description: "Failed to fetch the page, Please try again later.",
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description create a page
+   * @param {Partial<TPage>} pageData
+   */
+  createPage = async (pageData: Partial<TPage>) => {
+    try {
+      const { workspaceSlug, projectId } = this.store.router;
+      if (!workspaceSlug || !projectId) return undefined;
+
+      runInAction(() => {
+        this.loader = "mutation-loader";
+        this.error = undefined;
+      });
+
+      const page = await this.service.create(workspaceSlug, projectId, pageData);
+      runInAction(() => {
+        if (page?.id) set(this.data, [page.id], new ProjectPage(this.store, page));
+        this.loader = undefined;
+      });
+
+      return page;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = undefined;
+        this.error = {
+          title: "Failed",
+          description: "Failed to create a page, Please try again later.",
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description delete a page
+   * @param {string} pageId
+   */
+  removePage = async ({ pageId, shouldSync: _shouldSync = true }: { pageId: string; shouldSync?: boolean }) => {
+    try {
+      const { workspaceSlug, projectId } = this.store.router;
+      if (!workspaceSlug || !projectId || !pageId) return undefined;
+
+      await this.service.remove(workspaceSlug, projectId, pageId);
+      runInAction(() => {
+        unset(this.data, [pageId]);
+        if (this.rootStore.favorite.entityMap[pageId]) this.rootStore.favorite.removeFavoriteFromStore(pageId);
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = undefined;
+        this.error = {
+          title: "Failed",
+          description: "Failed to delete a page, Please try again later.",
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description move a page to a new project
+   * @param {string} workspaceSlug
+   * @param {string} projectId
+   * @param {string} pageId
+   * @param {string} newProjectId
+   */
+  movePage = async (workspaceSlug: string, projectId: string, pageId: string, newProjectId: string) => {
+    try {
+      await this.service.move(workspaceSlug, projectId, pageId, newProjectId);
+      runInAction(() => {
+        unset(this.data, [pageId]);
+      });
+    } catch (error) {
+      console.error("Unable to move page", error);
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/pages/project-page.ts b/apps/web/core/store/pages/project-page.ts
new file mode 100644
index 0000000..5b31fa3
--- /dev/null
+++ b/apps/web/core/store/pages/project-page.ts
@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { computed, makeObservable } from "mobx";
+import { computedFn } from "mobx-utils";
+// constants
+import { EPageAccess, EUserPermissions } from "@plane/constants";
+import type { TPage } from "@plane/types";
+// plane web store
+import type { RootStore } from "@/store/root.store";
+// services
+import { ProjectPageService } from "@/services/page";
+const projectPageService = new ProjectPageService();
+// store
+import { BasePage } from "./base-page";
+import type { TPageInstance } from "./base-page";
+
+export type TProjectPage = TPageInstance;
+
+export class ProjectPage extends BasePage implements TProjectPage {
+  constructor(store: RootStore, page: TPage) {
+    // required fields for API calls
+    const { workspaceSlug } = store.router;
+    const projectId = page.project_ids?.[0];
+    // initialize base instance
+    super(store, page, {
+      update: async (payload) => {
+        if (!workspaceSlug || !projectId || !page.id) throw new Error("Missing required fields.");
+        return await projectPageService.update(workspaceSlug, projectId, page.id, payload);
+      },
+      updateDescription: async (document) => {
+        if (!workspaceSlug || !projectId || !page.id) throw new Error("Missing required fields.");
+        await projectPageService.updateDescription(workspaceSlug, projectId, page.id, document);
+      },
+      updateAccess: async (payload) => {
+        if (!workspaceSlug || !projectId || !page.id) throw new Error("Missing required fields.");
+        await projectPageService.updateAccess(workspaceSlug, projectId, page.id, payload);
+      },
+      lock: async () => {
+        if (!workspaceSlug || !projectId || !page.id) throw new Error("Missing required fields.");
+        await projectPageService.lock(workspaceSlug, projectId, page.id);
+      },
+      unlock: async () => {
+        if (!workspaceSlug || !projectId || !page.id) throw new Error("Missing required fields.");
+        await projectPageService.unlock(workspaceSlug, projectId, page.id);
+      },
+      archive: async () => {
+        if (!workspaceSlug || !projectId || !page.id) throw new Error("Missing required fields.");
+        return await projectPageService.archive(workspaceSlug, projectId, page.id);
+      },
+      restore: async () => {
+        if (!workspaceSlug || !projectId || !page.id) throw new Error("Missing required fields.");
+        await projectPageService.restore(workspaceSlug, projectId, page.id);
+      },
+      duplicate: async () => {
+        if (!workspaceSlug || !projectId || !page.id) throw new Error("Missing required fields.");
+        return await projectPageService.duplicate(workspaceSlug, projectId, page.id);
+      },
+    });
+    makeObservable(this, {
+      // computed
+      canCurrentUserAccessPage: computed,
+      canCurrentUserEditPage: computed,
+      canCurrentUserDuplicatePage: computed,
+      canCurrentUserLockPage: computed,
+      canCurrentUserChangeAccess: computed,
+      canCurrentUserArchivePage: computed,
+      canCurrentUserDeletePage: computed,
+      canCurrentUserFavoritePage: computed,
+      canCurrentUserMovePage: computed,
+      isContentEditable: computed,
+    });
+  }
+
+  private getHighestRoleAcrossProjects = computedFn((): EUserPermissions | undefined => {
+    const { workspaceSlug } = this.rootStore.router;
+    if (!workspaceSlug || !this.project_ids?.length) return;
+    let highestRole: EUserPermissions | undefined = undefined;
+    this.project_ids.map((projectId) => {
+      const currentUserProjectRole = this.rootStore.user.permission.getProjectRoleByWorkspaceSlugAndProjectId(
+        workspaceSlug?.toString() || "",
+        projectId?.toString() || ""
+      );
+      if (currentUserProjectRole) {
+        if (!highestRole) highestRole = currentUserProjectRole;
+        else if (currentUserProjectRole > highestRole) highestRole = currentUserProjectRole;
+      }
+    });
+    return highestRole;
+  });
+
+  /**
+   * @description returns true if the current logged in user can access the page
+   */
+  get canCurrentUserAccessPage() {
+    const isPagePublic = this.access === EPageAccess.PUBLIC;
+    return isPagePublic || this.isCurrentUserOwner;
+  }
+
+  /**
+   * @description returns true if the current logged in user can edit the page
+   */
+  get canCurrentUserEditPage() {
+    const highestRole = this.getHighestRoleAcrossProjects();
+    const isPagePublic = this.access === EPageAccess.PUBLIC;
+    return (
+      (isPagePublic && !!highestRole && highestRole >= EUserPermissions.MEMBER) ||
+      (!isPagePublic && this.isCurrentUserOwner)
+    );
+  }
+
+  /**
+   * @description returns true if the current logged in user can create a duplicate the page
+   */
+  get canCurrentUserDuplicatePage() {
+    const highestRole = this.getHighestRoleAcrossProjects();
+    return !!highestRole && highestRole >= EUserPermissions.MEMBER;
+  }
+
+  /**
+   * @description returns true if the current logged in user can lock the page
+   */
+  get canCurrentUserLockPage() {
+    const highestRole = this.getHighestRoleAcrossProjects();
+    return this.isCurrentUserOwner || highestRole === EUserPermissions.ADMIN;
+  }
+
+  /**
+   * @description returns true if the current logged in user can change the access of the page
+   */
+  get canCurrentUserChangeAccess() {
+    const highestRole = this.getHighestRoleAcrossProjects();
+    return this.isCurrentUserOwner || highestRole === EUserPermissions.ADMIN;
+  }
+
+  /**
+   * @description returns true if the current logged in user can archive the page
+   */
+  get canCurrentUserArchivePage() {
+    const highestRole = this.getHighestRoleAcrossProjects();
+    return this.isCurrentUserOwner || highestRole === EUserPermissions.ADMIN;
+  }
+
+  /**
+   * @description returns true if the current logged in user can delete the page
+   */
+  get canCurrentUserDeletePage() {
+    const highestRole = this.getHighestRoleAcrossProjects();
+    return this.isCurrentUserOwner || highestRole === EUserPermissions.ADMIN;
+  }
+
+  /**
+   * @description returns true if the current logged in user can favorite the page
+   */
+  get canCurrentUserFavoritePage() {
+    const highestRole = this.getHighestRoleAcrossProjects();
+    return !!highestRole && highestRole >= EUserPermissions.MEMBER;
+  }
+
+  /**
+   * @description returns true if the current logged in user can move the page
+   */
+  get canCurrentUserMovePage() {
+    const highestRole = this.getHighestRoleAcrossProjects();
+    return this.isCurrentUserOwner || highestRole === EUserPermissions.ADMIN;
+  }
+
+  /**
+   * @description returns true if the page can be edited
+   */
+  get isContentEditable() {
+    const highestRole = this.getHighestRoleAcrossProjects();
+    const isOwner = this.isCurrentUserOwner;
+    const isPublic = this.access === EPageAccess.PUBLIC;
+    const isArchived = this.archived_at;
+    const isLocked = this.is_locked;
+
+    return (
+      !isArchived && !isLocked && (isOwner || (isPublic && !!highestRole && highestRole >= EUserPermissions.MEMBER))
+    );
+  }
+
+  getRedirectionLink = computedFn(() => {
+    const { workspaceSlug } = this.rootStore.router;
+    return `/${workspaceSlug}/projects/${this.project_ids?.[0]}/pages/${this.id}`;
+  });
+}
diff --git a/apps/web/core/store/project-view.store.ts b/apps/web/core/store/project-view.store.ts
new file mode 100644
index 0000000..f4e4007
--- /dev/null
+++ b/apps/web/core/store/project-view.store.ts
@@ -0,0 +1,307 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { IProjectView, TViewFilters } from "@plane/types";
+// constants
+// helpers
+import { getValidatedViewFilters, getViewName, orderViews, shouldFilterView } from "@plane/utils";
+// services
+import { ViewService } from "@/services/view.service";
+// store
+import type { CoreRootStore } from "./root.store";
+
+export interface IProjectViewStore {
+  //Loaders
+  loader: boolean;
+  fetchedMap: Record<string, boolean>;
+  // observables
+  viewMap: Record<string, IProjectView>;
+  filters: TViewFilters;
+  // computed
+  projectViewIds: string[] | null;
+  // computed actions
+  getProjectViews: (projectId: string) => IProjectView[] | undefined;
+  getFilteredProjectViews: (projectId: string) => IProjectView[] | undefined;
+  getViewById: (viewId: string) => IProjectView;
+  // fetch actions
+  fetchViews: (workspaceSlug: string, projectId: string) => Promise<undefined | IProjectView[]>;
+  fetchViewDetails: (workspaceSlug: string, projectId: string, viewId: string) => Promise<IProjectView>;
+  // CRUD actions
+  createView: (workspaceSlug: string, projectId: string, data: Partial<IProjectView>) => Promise<IProjectView>;
+  updateView: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IProjectView>
+  ) => Promise<IProjectView>;
+  deleteView: (workspaceSlug: string, projectId: string, viewId: string) => Promise<any>;
+  updateFilters: <T extends keyof TViewFilters>(filterKey: T, filterValue: TViewFilters[T]) => void;
+  clearAllFilters: () => void;
+  // favorites actions
+  addViewToFavorites: (workspaceSlug: string, projectId: string, viewId: string) => Promise<any>;
+  removeViewFromFavorites: (workspaceSlug: string, projectId: string, viewId: string) => Promise<any>;
+}
+
+export class ProjectViewStore implements IProjectViewStore {
+  // observables
+  loader: boolean = false;
+  viewMap: Record<string, IProjectView> = {};
+  //loaders
+  fetchedMap: Record<string, boolean> = {};
+  filters: TViewFilters = { searchQuery: "", sortBy: "desc", sortKey: "updated_at" };
+  // root store
+  rootStore;
+  // services
+  viewService;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      viewMap: observable,
+      fetchedMap: observable,
+      filters: observable,
+      // computed
+      projectViewIds: computed,
+      // fetch actions
+      fetchViews: action,
+      fetchViewDetails: action,
+      // CRUD actions
+      createView: action,
+      updateView: action,
+      deleteView: action,
+      // actions
+      updateFilters: action,
+      clearAllFilters: action,
+      // favorites actions
+      addViewToFavorites: action,
+      removeViewFromFavorites: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // services
+    this.viewService = new ViewService();
+
+    this.createView = this.createView.bind(this);
+    this.updateView = this.updateView.bind(this);
+  }
+
+  /**
+   * Returns array of view ids for current project
+   */
+  get projectViewIds() {
+    const projectId = this.rootStore.router.projectId;
+    if (!projectId || !this.fetchedMap[projectId]) return null;
+    const viewIds = Object.keys(this.viewMap ?? {})?.filter((viewId) => this.viewMap?.[viewId]?.project === projectId);
+    return viewIds;
+  }
+
+  getProjectViews = computedFn((projectId: string) => {
+    if (!this.fetchedMap[projectId]) return undefined;
+
+    const ViewsList = Object.values(this.viewMap ?? {});
+    // helps to filter views based on the projectId
+    let filteredViews = ViewsList.filter((view) => view?.project === projectId);
+    filteredViews = orderViews(filteredViews, this.filters.sortKey, this.filters.sortBy);
+
+    return filteredViews ?? undefined;
+  });
+  /**
+   * returns viewsIds of issues
+   */
+  getFilteredProjectViews = computedFn((projectId: string) => {
+    if (!this.fetchedMap[projectId]) return undefined;
+
+    const ViewsList = Object.values(this.viewMap ?? {});
+    // helps to filter views based on the projectId, searchQuery and filters
+    let filteredViews = ViewsList.filter(
+      (view) =>
+        view?.project === projectId &&
+        getViewName(view.name).toLowerCase().includes(this.filters.searchQuery.toLowerCase()) &&
+        shouldFilterView(view, this.filters.filters)
+    );
+    filteredViews = orderViews(filteredViews, this.filters.sortKey, this.filters.sortBy);
+
+    return filteredViews ?? undefined;
+  });
+
+  /**
+   * Returns view details by id
+   */
+  getViewById = computedFn((viewId: string) => this.viewMap?.[viewId] ?? null);
+
+  /**
+   * Updates the filter
+   * @param filterKey
+   * @param filterValue
+   */
+  updateFilters = <T extends keyof TViewFilters>(filterKey: T, filterValue: TViewFilters[T]) => {
+    runInAction(() => {
+      set(this.filters, [filterKey], filterValue);
+    });
+  };
+
+  /**
+   * @description clears all the filters
+   */
+  clearAllFilters = () =>
+    runInAction(() => {
+      set(this.filters, ["filters"], {});
+    });
+
+  /**
+   * Fetches views for current project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<IProjectView[]>
+   */
+  fetchViews = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      await this.viewService.getViews(workspaceSlug, projectId).then((response) => {
+        runInAction(() => {
+          response.forEach((view) => {
+            set(this.viewMap, [view.id], view);
+          });
+          set(this.fetchedMap, projectId, true);
+          this.loader = false;
+        });
+        return response;
+      });
+    } catch (_error) {
+      this.loader = false;
+      return undefined;
+    }
+  };
+
+  /**
+   * Fetches view details for a specific view
+   * @param workspaceSlug
+   * @param projectId
+   * @param viewId
+   * @returns Promise<IProjectView>
+   */
+  fetchViewDetails = async (workspaceSlug: string, projectId: string, viewId: string): Promise<IProjectView> =>
+    await this.viewService.getViewDetails(workspaceSlug, projectId, viewId).then((response) => {
+      runInAction(() => {
+        set(this.viewMap, [viewId], response);
+      });
+      return response;
+    });
+
+  /**
+   * Creates a new view for a specific project and adds it to the store
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns Promise<IProjectView>
+   */
+  async createView(workspaceSlug: string, projectId: string, data: Partial<IProjectView>): Promise<IProjectView> {
+    const response = await this.viewService.createView(workspaceSlug, projectId, getValidatedViewFilters(data));
+
+    runInAction(() => {
+      set(this.viewMap, [response.id], response);
+    });
+
+    return response;
+  }
+
+  /**
+   * Updates a view details of specific view and updates it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @param viewId
+   * @param data
+   * @returns Promise<IProjectView>
+   */
+  async updateView(
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IProjectView>
+  ): Promise<IProjectView> {
+    const currentView = this.getViewById(viewId);
+
+    runInAction(() => {
+      set(this.viewMap, [viewId], { ...currentView, ...data });
+    });
+
+    const response = await this.viewService.patchView(workspaceSlug, projectId, viewId, data);
+
+    return response;
+  }
+
+  /**
+   * Deletes a view and removes it from the viewMap object
+   * @param workspaceSlug
+   * @param projectId
+   * @param viewId
+   * @returns
+   */
+  deleteView = async (workspaceSlug: string, projectId: string, viewId: string): Promise<any> => {
+    await this.viewService.deleteView(workspaceSlug, projectId, viewId).then(() => {
+      runInAction(() => {
+        delete this.viewMap[viewId];
+        if (this.rootStore.favorite.entityMap[viewId]) this.rootStore.favorite.removeFavoriteFromStore(viewId);
+      });
+    });
+  };
+
+  /**
+   * Adds a view to favorites
+   * @param workspaceSlug
+   * @param projectId
+   * @param viewId
+   * @returns
+   */
+  addViewToFavorites = async (workspaceSlug: string, projectId: string, viewId: string) => {
+    try {
+      const currentView = this.getViewById(viewId);
+      if (currentView?.is_favorite) return;
+      runInAction(() => {
+        set(this.viewMap, [viewId, "is_favorite"], true);
+      });
+      await this.rootStore.favorite.addFavorite(workspaceSlug.toString(), {
+        entity_type: "view",
+        entity_identifier: viewId,
+        project_id: projectId,
+        entity_data: { name: this.viewMap[viewId].name || "" },
+      });
+    } catch (error) {
+      console.error("Failed to add view to favorites in view store", error);
+      runInAction(() => {
+        set(this.viewMap, [viewId, "is_favorite"], false);
+      });
+    }
+  };
+
+  /**
+   * Removes a view from favorites
+   * @param workspaceSlug
+   * @param projectId
+   * @param viewId
+   * @returns
+   */
+  removeViewFromFavorites = async (workspaceSlug: string, projectId: string, viewId: string) => {
+    try {
+      const currentView = this.getViewById(viewId);
+      if (!currentView?.is_favorite) return;
+      runInAction(() => {
+        set(this.viewMap, [viewId, "is_favorite"], false);
+      });
+      await this.rootStore.favorite.removeFavoriteEntity(workspaceSlug, viewId);
+    } catch (error) {
+      console.error("Failed to remove view from favorites in view store", error);
+      runInAction(() => {
+        set(this.viewMap, [viewId, "is_favorite"], true);
+      });
+    }
+  };
+}
diff --git a/apps/web/core/store/project/index.ts b/apps/web/core/store/project/index.ts
new file mode 100644
index 0000000..bd04991
--- /dev/null
+++ b/apps/web/core/store/project/index.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { CoreRootStore } from "../root.store";
+import type { IProjectPublishStore } from "./project-publish.store";
+import { ProjectPublishStore } from "./project-publish.store";
+import type { IProjectStore } from "./project.store";
+import { ProjectStore } from "./project.store";
+import type { IProjectFilterStore } from "./project_filter.store";
+import { ProjectFilterStore } from "./project_filter.store";
+
+export interface IProjectRootStore {
+  project: IProjectStore;
+  projectFilter: IProjectFilterStore;
+  publish: IProjectPublishStore;
+}
+
+export class ProjectRootStore {
+  project: IProjectStore;
+  projectFilter: IProjectFilterStore;
+  publish: IProjectPublishStore;
+
+  constructor(_root: CoreRootStore) {
+    this.project = new ProjectStore(_root);
+    this.projectFilter = new ProjectFilterStore(_root);
+    this.publish = new ProjectPublishStore(this);
+  }
+}
diff --git a/apps/web/core/store/project/project-publish.store.ts b/apps/web/core/store/project/project-publish.store.ts
new file mode 100644
index 0000000..f520c31
--- /dev/null
+++ b/apps/web/core/store/project/project-publish.store.ts
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { unset, set } from "lodash-es";
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import type { TProjectPublishSettings } from "@plane/types";
+// services
+import { ProjectPublishService } from "@/services/project";
+// store
+import type { ProjectRootStore } from "@/store/project";
+
+export interface IProjectPublishStore {
+  // states
+  generalLoader: boolean;
+  fetchSettingsLoader: boolean;
+  // observables
+  publishSettingsMap: Record<string, TProjectPublishSettings>; // projectID => TProjectPublishSettings
+  // helpers
+  getPublishSettingsByProjectID: (projectID: string) => TProjectPublishSettings | undefined;
+  // actions
+  fetchPublishSettings: (workspaceSlug: string, projectID: string) => Promise<TProjectPublishSettings>;
+  updatePublishSettings: (
+    workspaceSlug: string,
+    projectID: string,
+    projectPublishId: string,
+    data: Partial<TProjectPublishSettings>
+  ) => Promise<TProjectPublishSettings>;
+  publishProject: (
+    workspaceSlug: string,
+    projectID: string,
+    data: Partial<TProjectPublishSettings>
+  ) => Promise<TProjectPublishSettings>;
+  unPublishProject: (workspaceSlug: string, projectID: string, projectPublishId: string) => Promise<void>;
+}
+
+export class ProjectPublishStore implements IProjectPublishStore {
+  // states
+  generalLoader: boolean = false;
+  fetchSettingsLoader: boolean = false;
+  // observables
+  publishSettingsMap: Record<string, TProjectPublishSettings> = {};
+  // root store
+  projectRootStore: ProjectRootStore;
+  // services
+  projectPublishService;
+
+  constructor(_projectRootStore: ProjectRootStore) {
+    makeObservable(this, {
+      // states
+      generalLoader: observable.ref,
+      fetchSettingsLoader: observable.ref,
+      // observables
+      publishSettingsMap: observable,
+      // actions
+      fetchPublishSettings: action,
+      updatePublishSettings: action,
+      publishProject: action,
+      unPublishProject: action,
+    });
+    // root store
+    this.projectRootStore = _projectRootStore;
+    // services
+    this.projectPublishService = new ProjectPublishService();
+  }
+
+  /**
+   * @description returns the publish settings of a particular project
+   * @param {string} projectID
+   * @returns {TProjectPublishSettings | undefined}
+   */
+  getPublishSettingsByProjectID = (projectID: string): TProjectPublishSettings | undefined =>
+    this.publishSettingsMap?.[projectID] ?? undefined;
+
+  /**
+   * Fetches project publish settings
+   * @param workspaceSlug
+   * @param projectID
+   * @returns
+   */
+  fetchPublishSettings = async (workspaceSlug: string, projectID: string) => {
+    try {
+      runInAction(() => {
+        this.fetchSettingsLoader = true;
+      });
+      const response = await this.projectPublishService.fetchPublishSettings(workspaceSlug, projectID);
+
+      runInAction(() => {
+        set(this.publishSettingsMap, [projectID], response);
+        this.fetchSettingsLoader = false;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.fetchSettingsLoader = false;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Publishes project and updates project publish status in the store
+   * @param workspaceSlug
+   * @param projectID
+   * @param data
+   * @returns
+   */
+  publishProject = async (workspaceSlug: string, projectID: string, data: Partial<TProjectPublishSettings>) => {
+    try {
+      runInAction(() => {
+        this.generalLoader = true;
+      });
+      const response = await this.projectPublishService.publishProject(workspaceSlug, projectID, data);
+      runInAction(() => {
+        set(this.publishSettingsMap, [projectID], response);
+        set(this.projectRootStore.project.projectMap, [projectID, "anchor"], response.anchor);
+        this.generalLoader = false;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.generalLoader = false;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Updates project publish settings
+   * @param workspaceSlug
+   * @param projectID
+   * @param projectPublishId
+   * @param data
+   * @returns
+   */
+  updatePublishSettings = async (
+    workspaceSlug: string,
+    projectID: string,
+    projectPublishId: string,
+    data: Partial<TProjectPublishSettings>
+  ) => {
+    try {
+      runInAction(() => {
+        this.generalLoader = true;
+      });
+      const response = await this.projectPublishService.updatePublishSettings(
+        workspaceSlug,
+        projectID,
+        projectPublishId,
+        data
+      );
+      runInAction(() => {
+        set(this.publishSettingsMap, [projectID], response);
+        this.generalLoader = false;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.generalLoader = false;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Unpublishes project and updates project publish status in the store
+   * @param workspaceSlug
+   * @param projectID
+   * @param projectPublishId
+   * @returns
+   */
+  unPublishProject = async (workspaceSlug: string, projectID: string, projectPublishId: string) => {
+    try {
+      runInAction(() => {
+        this.generalLoader = true;
+      });
+      const response = await this.projectPublishService.unpublishProject(workspaceSlug, projectID, projectPublishId);
+      runInAction(() => {
+        unset(this.publishSettingsMap, [projectID]);
+        set(this.projectRootStore.project.projectMap, [projectID, "anchor"], null);
+        this.generalLoader = false;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.generalLoader = false;
+      });
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/project/project.store.ts b/apps/web/core/store/project/project.store.ts
new file mode 100644
index 0000000..5cadeaa
--- /dev/null
+++ b/apps/web/core/store/project/project.store.ts
@@ -0,0 +1,636 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { sortBy, cloneDeep, update, set } from "lodash-es";
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { TFetchStatus, TLoader, TProjectAnalyticsCount, TProjectAnalyticsCountParams } from "@plane/types";
+// helpers
+import { orderProjects, shouldFilterProject } from "@plane/utils";
+// services
+import type { TProject, TPartialProject } from "@plane/types";
+import { IssueLabelService, IssueService } from "@/services/issue";
+import { ProjectService, ProjectStateService, ProjectArchiveService } from "@/services/project";
+// store
+import type { CoreRootStore } from "../root.store";
+
+type ProjectOverviewCollapsible = "links" | "attachments" | "milestones";
+
+export interface IProjectStore {
+  // observables
+  isUpdatingProject: boolean;
+  loader: TLoader;
+  fetchStatus: TFetchStatus;
+  projectMap: Record<string, TProject>; // projectId: project info
+  projectAnalyticsCountMap: Record<string, TProjectAnalyticsCount>; // projectId: project analytics count
+  // computed
+  isInitializingProjects: boolean;
+  filteredProjectIds: string[] | undefined;
+  workspaceProjectIds: string[] | undefined;
+  archivedProjectIds: string[] | undefined;
+  totalProjectIds: string[] | undefined;
+  joinedProjectIds: string[];
+  favoriteProjectIds: string[];
+  currentProjectDetails: TProject | undefined;
+  currentProjectNextSequenceId: number | undefined;
+  // actions
+  getProjectById: (projectId: string | undefined | null) => TProject | undefined;
+  getPartialProjectById: (projectId: string | undefined | null) => TPartialProject | undefined;
+  getProjectIdentifierById: (projectId: string | undefined | null) => string;
+  getProjectAnalyticsCountById: (projectId: string | undefined | null) => TProjectAnalyticsCount | undefined;
+  getProjectByIdentifier: (projectIdentifier: string) => TProject | undefined;
+  // collapsible
+  openCollapsibleSection: ProjectOverviewCollapsible[];
+  lastCollapsibleAction: ProjectOverviewCollapsible | null;
+
+  setOpenCollapsibleSection: (section: ProjectOverviewCollapsible[]) => void;
+  setLastCollapsibleAction: (section: ProjectOverviewCollapsible) => void;
+  toggleOpenCollapsibleSection: (section: ProjectOverviewCollapsible) => void;
+
+  // helper actions
+  processProjectAfterCreation: (workspaceSlug: string, data: TProject) => void;
+
+  // fetch actions
+  fetchPartialProjects: (workspaceSlug: string) => Promise<TPartialProject[]>;
+  fetchProjects: (workspaceSlug: string) => Promise<TProject[]>;
+  fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<TProject>;
+  fetchProjectAnalyticsCount: (
+    workspaceSlug: string,
+    params?: TProjectAnalyticsCountParams
+  ) => Promise<TProjectAnalyticsCount[]>;
+  // favorites actions
+  addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
+  removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
+  // project-view action
+  updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
+  // CRUD actions
+  createProject: (workspaceSlug: string, data: Partial<TProject>) => Promise<TProject>;
+  updateProject: (workspaceSlug: string, projectId: string, data: Partial<TProject>) => Promise<TProject>;
+  deleteProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  // archive actions
+  archiveProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  restoreProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+}
+
+export class ProjectStore implements IProjectStore {
+  // observables
+  isUpdatingProject: boolean = false;
+  loader: TLoader = "init-loader";
+  fetchStatus: TFetchStatus = undefined;
+  projectMap: Record<string, TProject> = {};
+  projectAnalyticsCountMap: Record<string, TProjectAnalyticsCount> = {};
+  openCollapsibleSection: ProjectOverviewCollapsible[] = ["milestones"];
+  lastCollapsibleAction: ProjectOverviewCollapsible | null = null;
+
+  // root store
+  rootStore: CoreRootStore;
+  // service
+  projectService;
+  projectArchiveService;
+  issueLabelService;
+  issueService;
+  stateService;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      isUpdatingProject: observable,
+      loader: observable.ref,
+      fetchStatus: observable.ref,
+      projectMap: observable,
+      projectAnalyticsCountMap: observable,
+      openCollapsibleSection: observable.ref,
+      lastCollapsibleAction: observable.ref,
+      // computed
+      isInitializingProjects: computed,
+      filteredProjectIds: computed,
+      workspaceProjectIds: computed,
+      archivedProjectIds: computed,
+      totalProjectIds: computed,
+      currentProjectDetails: computed,
+      joinedProjectIds: computed,
+      favoriteProjectIds: computed,
+      currentProjectNextSequenceId: computed,
+      // helper actions
+      processProjectAfterCreation: action,
+      // fetch actions
+      fetchPartialProjects: action,
+      fetchProjects: action,
+      fetchProjectDetails: action,
+      fetchProjectAnalyticsCount: action,
+      // favorites actions
+      addProjectToFavorites: action,
+      removeProjectFromFavorites: action,
+      // project-view action
+      updateProjectView: action,
+      // CRUD actions
+      createProject: action,
+      updateProject: action,
+      // collapsible actions
+      setOpenCollapsibleSection: action,
+      setLastCollapsibleAction: action,
+      toggleOpenCollapsibleSection: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // services
+    this.projectService = new ProjectService();
+    this.projectArchiveService = new ProjectArchiveService();
+    this.issueService = new IssueService();
+    this.issueLabelService = new IssueLabelService();
+    this.stateService = new ProjectStateService();
+  }
+
+  /**
+   * @description returns true if projects are still initializing
+   */
+  get isInitializingProjects() {
+    return this.loader === "init-loader";
+  }
+
+  /**
+   * @description returns filtered projects based on filters and search query
+   */
+  get filteredProjectIds() {
+    const workspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
+    const {
+      currentWorkspaceDisplayFilters: displayFilters,
+      currentWorkspaceFilters: filters,
+      searchQuery,
+    } = this.rootStore.projectRoot.projectFilter;
+    if (!workspaceDetails || !displayFilters || !filters) return;
+    let workspaceProjects = Object.values(this.projectMap).filter(
+      (p) =>
+        p.workspace === workspaceDetails.id &&
+        (p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          p.identifier.toLowerCase().includes(searchQuery.toLowerCase())) &&
+        shouldFilterProject(p, displayFilters, filters)
+    );
+    workspaceProjects = orderProjects(workspaceProjects, displayFilters.order_by);
+    return workspaceProjects.map((p) => p.id);
+  }
+
+  /**
+   * Returns project IDs belong to the current workspace
+   */
+  get workspaceProjectIds() {
+    const workspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!workspaceDetails) return;
+    const workspaceProjects = Object.values(this.projectMap).filter(
+      (p) => p.workspace === workspaceDetails.id && !p.archived_at
+    );
+    const projectIds = workspaceProjects.map((p) => p.id);
+    return projectIds ?? null;
+  }
+
+  /**
+   * Returns archived project IDs belong to current workspace.
+   */
+  get archivedProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return;
+
+    let projects = Object.values(this.projectMap ?? {});
+    projects = sortBy(projects, "archived_at");
+
+    const projectIds = projects
+      .filter((project) => project.workspace === currentWorkspace.id && !!project.archived_at)
+      .map((project) => project.id);
+    return projectIds;
+  }
+
+  /**
+   * Returns total project IDs belong to the current workspace
+   */
+  // workspaceProjectIds + archivedProjectIds
+  get totalProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return;
+
+    const workspaceProjects = this.workspaceProjectIds ?? [];
+    const archivedProjects = this.archivedProjectIds ?? [];
+    return [...workspaceProjects, ...archivedProjects];
+  }
+
+  /**
+   * Returns current project details
+   */
+  get currentProjectDetails() {
+    if (!this.rootStore.router.projectId) return;
+    return this.projectMap?.[this.rootStore.router.projectId];
+  }
+
+  /**
+   * Returns the next sequence ID for the current project
+   * Used for calculating identifier width in list layouts
+   */
+  get currentProjectNextSequenceId() {
+    if (!this.rootStore.router.projectId) return undefined;
+    return this.currentProjectDetails?.next_work_item_sequence;
+  }
+
+  /**
+   * Returns joined project IDs belong to the current workspace
+   */
+  get joinedProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return [];
+
+    let projects = Object.values(this.projectMap ?? {});
+    projects = sortBy(projects, "sort_order");
+
+    const projectIds = projects
+      .filter((project) => project.workspace === currentWorkspace.id && !!project.member_role && !project.archived_at)
+      .map((project) => project.id);
+    return projectIds;
+  }
+
+  /**
+   * Returns favorite project IDs belong to the current workspace
+   */
+  get favoriteProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return [];
+
+    let projects = Object.values(this.projectMap ?? {});
+    projects = sortBy(projects, "created_at");
+
+    const projectIds = projects
+      .filter(
+        (project) =>
+          project.workspace === currentWorkspace.id &&
+          !!project.member_role &&
+          project.is_favorite &&
+          !project.archived_at
+      )
+      .map((project) => project.id);
+    return projectIds;
+  }
+
+  setOpenCollapsibleSection = (section: ProjectOverviewCollapsible[]) => {
+    this.openCollapsibleSection = section;
+    if (this.lastCollapsibleAction) this.lastCollapsibleAction = null;
+  };
+
+  setLastCollapsibleAction = (section: ProjectOverviewCollapsible) => {
+    this.openCollapsibleSection = [...this.openCollapsibleSection, section];
+  };
+
+  toggleOpenCollapsibleSection = (section: ProjectOverviewCollapsible) => {
+    if (this.openCollapsibleSection && this.openCollapsibleSection.includes(section)) {
+      this.openCollapsibleSection = this.openCollapsibleSection.filter((s) => s !== section);
+    } else {
+      this.openCollapsibleSection = [...this.openCollapsibleSection, section];
+    }
+  };
+
+  /**
+   * @description process project after creation
+   * @param workspaceSlug
+   * @param data
+   */
+  processProjectAfterCreation = (workspaceSlug: string, data: TProject) => {
+    runInAction(() => {
+      set(this.projectMap, [data.id], data);
+      // updating the user project role in workspaceProjectsPermissions
+      set(this.rootStore.user.permission.workspaceProjectsPermissions, [workspaceSlug, data.id], data.member_role);
+    });
+  };
+
+  /**
+   * get Workspace projects partial data using workspace slug
+   * @param workspaceSlug
+   * @returns Promise<TPartialProject[]>
+   *
+   */
+  fetchPartialProjects = async (workspaceSlug: string) => {
+    try {
+      this.loader = "init-loader";
+      const projectsResponse = await this.projectService.getProjectsLite(workspaceSlug);
+      runInAction(() => {
+        projectsResponse.forEach((project) => {
+          update(this.projectMap, [project.id], (p) => ({ ...p, ...project }));
+        });
+        this.loader = "loaded";
+        if (!this.fetchStatus) this.fetchStatus = "partial";
+      });
+      return projectsResponse;
+    } catch (error) {
+      console.log("Failed to fetch project from workspace store");
+      this.loader = "loaded";
+      throw error;
+    }
+  };
+
+  /**
+   * get Workspace projects using workspace slug
+   * @param workspaceSlug
+   * @returns Promise<TProject[]>
+   *
+   */
+  fetchProjects = async (workspaceSlug: string) => {
+    try {
+      if (this.workspaceProjectIds && this.workspaceProjectIds.length > 0) {
+        this.loader = "mutation";
+      } else {
+        this.loader = "init-loader";
+      }
+      const projectsResponse = await this.projectService.getProjects(workspaceSlug);
+      runInAction(() => {
+        projectsResponse.forEach((project) => {
+          update(this.projectMap, [project.id], (p) => ({ ...p, ...project }));
+        });
+        this.loader = "loaded";
+        this.fetchStatus = "complete";
+      });
+      return projectsResponse;
+    } catch (error) {
+      console.log("Failed to fetch project from workspace store");
+      this.loader = "loaded";
+      throw error;
+    }
+  };
+
+  /**
+   * Fetches project details using workspace slug and project id
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<TProject>
+   */
+  fetchProjectDetails = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectService.getProject(workspaceSlug, projectId);
+      runInAction(() => {
+        update(this.projectMap, [projectId], (p) => ({ ...p, ...response }));
+      });
+      return response;
+    } catch (error) {
+      console.log("Error while fetching project details", error);
+      throw error;
+    }
+  };
+
+  /**
+   * Fetches project analytics count using workspace slug and project id
+   * @param workspaceSlug
+   * @param params TProjectAnalyticsCountParams
+   * @returns Promise<TProjectAnalyticsCount[]>
+   */
+  fetchProjectAnalyticsCount = async (
+    workspaceSlug: string,
+    params?: TProjectAnalyticsCountParams
+  ): Promise<TProjectAnalyticsCount[]> => {
+    try {
+      const response = await this.projectService.getProjectAnalyticsCount(workspaceSlug, params);
+      runInAction(() => {
+        for (const analyticsData of response) {
+          set(this.projectAnalyticsCountMap, [analyticsData.id], analyticsData);
+        }
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to fetch project analytics count", error);
+      throw error;
+    }
+  };
+
+  /**
+   * Returns project details using project id
+   * @param projectId
+   * @returns TProject | null
+   */
+  getProjectById = computedFn((projectId: string | undefined | null) => {
+    const projectInfo = this.projectMap[projectId ?? ""] || undefined;
+    return projectInfo;
+  });
+
+  /**
+   * Returns project details using project identifier
+   * @param projectIdentifier
+   * @returns TProject | undefined
+   */
+  getProjectByIdentifier = computedFn((projectIdentifier: string) =>
+    Object.values(this.projectMap).find((project) => project.identifier === projectIdentifier)
+  );
+
+  /**
+   * Returns project lite using project id
+   * This method is used just for type safety
+   * @param projectId
+   * @returns TPartialProject | null
+   */
+  getPartialProjectById = computedFn((projectId: string | undefined | null) => {
+    const projectInfo = this.projectMap[projectId ?? ""] || undefined;
+    return projectInfo;
+  });
+
+  /**
+   * Returns project identifier using project id
+   * @param projectId
+   * @returns string
+   */
+  getProjectIdentifierById = computedFn((projectId: string | undefined | null) => {
+    const projectInfo = this.projectMap?.[projectId ?? ""];
+    return projectInfo?.identifier;
+  });
+
+  /**
+   * Returns project analytics count using project id
+   * @param projectId
+   * @returns TProjectAnalyticsCount[]
+   */
+  getProjectAnalyticsCountById = computedFn((projectId: string | undefined | null) => {
+    if (!projectId) return undefined;
+    return this.projectAnalyticsCountMap?.[projectId];
+  });
+
+  /**
+   * Adds project to favorites and updates project favorite status in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  addProjectToFavorites = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const currentProject = this.getProjectById(projectId);
+      if (currentProject.is_favorite) return;
+      runInAction(() => {
+        set(this.projectMap, [projectId, "is_favorite"], true);
+      });
+      const response = await this.rootStore.favorite.addFavorite(workspaceSlug.toString(), {
+        entity_type: "project",
+        entity_identifier: projectId,
+        project_id: projectId,
+        entity_data: { name: this.projectMap[projectId].name || "" },
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to add project to favorite");
+      runInAction(() => {
+        set(this.projectMap, [projectId, "is_favorite"], false);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Removes project from favorites and updates project favorite status in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  removeProjectFromFavorites = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const currentProject = this.getProjectById(projectId);
+      if (!currentProject.is_favorite) return;
+      runInAction(() => {
+        set(this.projectMap, [projectId, "is_favorite"], false);
+      });
+      const response = await this.rootStore.favorite.removeFavoriteEntity(workspaceSlug.toString(), projectId);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to add project to favorite");
+      runInAction(() => {
+        set(this.projectMap, [projectId, "is_favorite"], true);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Updates the project view
+   * @param workspaceSlug
+   * @param projectId
+   * @param viewProps
+   * @returns
+   */
+  updateProjectView = async (workspaceSlug: string, projectId: string, viewProps: { sort_order: number }) => {
+    const currentProjectSortOrder = this.getProjectById(projectId)?.sort_order;
+    try {
+      runInAction(() => {
+        set(this.projectMap, [projectId, "sort_order"], viewProps?.sort_order);
+      });
+      const response = await this.projectService.updateProjectUserProperties(workspaceSlug, projectId, viewProps);
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        set(this.projectMap, [projectId, "sort_order"], currentProjectSortOrder);
+      });
+      console.log("Failed to update sort order of the projects");
+      throw error;
+    }
+  };
+
+  /**
+   * Creates a project in the workspace and adds it to the store
+   * @param workspaceSlug
+   * @param data
+   * @returns Promise<TProject>
+   */
+  createProject = async (workspaceSlug: string, data: any) => {
+    try {
+      const response = await this.projectService.createProject(workspaceSlug, data);
+      this.processProjectAfterCreation(workspaceSlug, response);
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+      throw error;
+    }
+  };
+
+  /**
+   * Updates a details of a project and updates it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns Promise<TProject>
+   */
+  updateProject = async (workspaceSlug: string, projectId: string, data: Partial<TProject>) => {
+    const projectDetails = cloneDeep(this.getProjectById(projectId));
+    try {
+      runInAction(() => {
+        set(this.projectMap, [projectId], { ...projectDetails, ...data });
+        this.isUpdatingProject = true;
+      });
+      const response = await this.projectService.updateProject(workspaceSlug, projectId, data);
+      runInAction(() => {
+        this.isUpdatingProject = false;
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+      runInAction(() => {
+        set(this.projectMap, [projectId], projectDetails);
+        this.isUpdatingProject = false;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Deletes a project from specific workspace and deletes it from the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<void>
+   */
+  deleteProject = async (workspaceSlug: string, projectId: string) => {
+    try {
+      if (!this.projectMap?.[projectId]) return;
+      await this.projectService.deleteProject(workspaceSlug, projectId);
+      runInAction(() => {
+        delete this.projectMap[projectId];
+        if (this.rootStore.favorite.entityMap[projectId]) this.rootStore.favorite.removeFavoriteFromStore(projectId);
+        delete this.rootStore.user.permission.workspaceProjectsPermissions[workspaceSlug][projectId];
+      });
+    } catch (error) {
+      console.log("Failed to delete project from project store");
+      throw error;
+    }
+  };
+
+  /**
+   * Archives a project from specific workspace and updates it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<void>
+   */
+  archiveProject = async (workspaceSlug: string, projectId: string) => {
+    await this.projectArchiveService
+      .archiveProject(workspaceSlug, projectId)
+      .then((response) => {
+        runInAction(() => {
+          set(this.projectMap, [projectId, "archived_at"], response.archived_at);
+          this.rootStore.favorite.removeFavoriteFromStore(projectId);
+        });
+      })
+      .catch((error) => {
+        console.log("Failed to archive project from project store");
+        throw error;
+      });
+  };
+
+  /**
+   * Restores a project from specific workspace and updates it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<void>
+   */
+  restoreProject = async (workspaceSlug: string, projectId: string) => {
+    await this.projectArchiveService
+      .restoreProject(workspaceSlug, projectId)
+      .then(() => {
+        runInAction(() => {
+          set(this.projectMap, [projectId, "archived_at"], null);
+        });
+      })
+      .catch((error) => {
+        console.log("Failed to restore project from project store");
+        throw error;
+      });
+  };
+}
diff --git a/apps/web/core/store/project/project_filter.store.ts b/apps/web/core/store/project/project_filter.store.ts
new file mode 100644
index 0000000..c769d1c
--- /dev/null
+++ b/apps/web/core/store/project/project_filter.store.ts
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { TProjectDisplayFilters, TProjectFilters, TProjectAppliedDisplayFilterKeys } from "@plane/types";
+// store
+import type { CoreRootStore } from "../root.store";
+
+export interface IProjectFilterStore {
+  // observables
+  displayFilters: Record<string, TProjectDisplayFilters>;
+  filters: Record<string, TProjectFilters>;
+  searchQuery: string;
+  // computed
+  currentWorkspaceDisplayFilters: TProjectDisplayFilters | undefined;
+  currentWorkspaceAppliedDisplayFilters: TProjectAppliedDisplayFilterKeys[] | undefined;
+  currentWorkspaceFilters: TProjectFilters | undefined;
+  // computed functions
+  getDisplayFiltersByWorkspaceSlug: (workspaceSlug: string) => TProjectDisplayFilters | undefined;
+  getFiltersByWorkspaceSlug: (workspaceSlug: string) => TProjectFilters | undefined;
+  // actions
+  updateDisplayFilters: (workspaceSlug: string, displayFilters: TProjectDisplayFilters) => void;
+  updateFilters: (workspaceSlug: string, filters: TProjectFilters) => void;
+  updateSearchQuery: (query: string) => void;
+  clearAllFilters: (workspaceSlug: string) => void;
+  clearAllAppliedDisplayFilters: (workspaceSlug: string) => void;
+}
+
+export class ProjectFilterStore implements IProjectFilterStore {
+  // observables
+  displayFilters: Record<string, TProjectDisplayFilters> = {};
+  filters: Record<string, TProjectFilters> = {};
+  searchQuery: string = "";
+  // root store
+  rootStore: CoreRootStore;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      displayFilters: observable,
+      filters: observable,
+      searchQuery: observable.ref,
+      // computed
+      currentWorkspaceDisplayFilters: computed,
+      currentWorkspaceAppliedDisplayFilters: computed,
+      currentWorkspaceFilters: computed,
+      // actions
+      updateDisplayFilters: action,
+      updateFilters: action,
+      updateSearchQuery: action,
+      clearAllFilters: action,
+      clearAllAppliedDisplayFilters: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // initialize display filters of the current workspace
+    reaction(
+      () => this.rootStore.router.workspaceSlug,
+      (workspaceSlug) => {
+        if (!workspaceSlug) return;
+        this.initWorkspaceFilters(workspaceSlug);
+        this.searchQuery = "";
+      }
+    );
+  }
+
+  /**
+   * @description get display filters of the current workspace
+   */
+  get currentWorkspaceDisplayFilters() {
+    const workspaceSlug = this.rootStore.router.workspaceSlug;
+    if (!workspaceSlug) return;
+    return this.displayFilters[workspaceSlug];
+  }
+
+  /**
+   * @description get project state applied display filter of the current workspace
+   * @returns {TProjectAppliedDisplayFilterKeys[] | undefined} // An array of keys of applied display filters
+   */
+  // TODO: Figure out a better approach for this
+  get currentWorkspaceAppliedDisplayFilters() {
+    const workspaceSlug = this.rootStore.router.workspaceSlug;
+    if (!workspaceSlug) return;
+    const displayFilters = this.displayFilters[workspaceSlug];
+    return Object.keys(displayFilters).filter(
+      (key): key is TProjectAppliedDisplayFilterKeys =>
+        ["my_projects", "archived_projects"].includes(key) && !!displayFilters[key as keyof TProjectDisplayFilters]
+    );
+  }
+
+  /**
+   * @description get filters of the current workspace
+   */
+  get currentWorkspaceFilters() {
+    const workspaceSlug = this.rootStore.router.workspaceSlug;
+    if (!workspaceSlug) return;
+    return this.filters[workspaceSlug];
+  }
+
+  /**
+   * @description get display filters of a workspace by workspaceSlug
+   * @param {string} workspaceSlug
+   */
+  getDisplayFiltersByWorkspaceSlug = computedFn((workspaceSlug: string) => this.displayFilters[workspaceSlug]);
+
+  /**
+   * @description get filters of a workspace by workspaceSlug
+   * @param {string} workspaceSlug
+   */
+  getFiltersByWorkspaceSlug = computedFn((workspaceSlug: string) => this.filters[workspaceSlug]);
+
+  /**
+   * @description initialize display filters and filters of a workspace
+   * @param {string} workspaceSlug
+   */
+  initWorkspaceFilters = (workspaceSlug: string) => {
+    const displayFilters = this.getDisplayFiltersByWorkspaceSlug(workspaceSlug);
+    runInAction(() => {
+      this.displayFilters[workspaceSlug] = {
+        order_by: displayFilters?.order_by || "created_at",
+      };
+      this.filters[workspaceSlug] = this.filters[workspaceSlug] ?? {};
+    });
+  };
+
+  /**
+   * @description update display filters of a workspace
+   * @param {string} workspaceSlug
+   * @param {TProjectDisplayFilters} displayFilters
+   */
+  updateDisplayFilters = (workspaceSlug: string, displayFilters: TProjectDisplayFilters) => {
+    runInAction(() => {
+      Object.keys(displayFilters).forEach((key) => {
+        set(this.displayFilters, [workspaceSlug, key], displayFilters[key as keyof TProjectDisplayFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update filters of a workspace
+   * @param {string} workspaceSlug
+   * @param {TProjectFilters} filters
+   */
+  updateFilters = (workspaceSlug: string, filters: TProjectFilters) => {
+    runInAction(() => {
+      Object.keys(filters).forEach((key) => {
+        set(this.filters, [workspaceSlug, key], filters[key as keyof TProjectFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update search query
+   * @param {string} query
+   */
+  updateSearchQuery = (query: string) => (this.searchQuery = query);
+
+  /**
+   * @description clear all filters of a workspace
+   * @param {string} workspaceSlug
+   */
+  clearAllFilters = (workspaceSlug: string) => {
+    runInAction(() => {
+      this.filters[workspaceSlug] = {};
+    });
+  };
+
+  /**
+   * @description clear project display filters of a workspace
+   * @param {string} workspaceSlug
+   */
+  clearAllAppliedDisplayFilters = (workspaceSlug: string) => {
+    runInAction(() => {
+      if (!this.currentWorkspaceAppliedDisplayFilters) return;
+      this.currentWorkspaceAppliedDisplayFilters.forEach((key) => {
+        set(this.displayFilters, [workspaceSlug, key], false);
+      });
+    });
+  };
+}
diff --git a/apps/web/core/store/root.store.ts b/apps/web/core/store/root.store.ts
new file mode 100644
index 0000000..ebca38e
--- /dev/null
+++ b/apps/web/core/store/root.store.ts
@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { enableStaticRendering } from "mobx-react";
+// plane imports
+import { FALLBACK_LANGUAGE, setLanguage } from "@plane/i18n";
+import type { IWorkItemFilterStore } from "@plane/shared-state";
+import { WorkItemFilterStore } from "@plane/shared-state";
+// plane web store
+import type { IBaseAnalyticsStore as IAnalyticsStore } from "@/store/analytics.store";
+import { BaseAnalyticsStore as AnalyticsStore } from "@/store/analytics.store";
+import type { IBasePowerKStore as IPowerKStore } from "@/store/base-power-k.store";
+import { BasePowerKStore as PowerKStore } from "@/store/base-power-k.store";
+import type { IStateStore } from "@/store/state.store";
+import { StateStore } from "@/store/state.store";
+import type { ICommandPaletteStore } from "@/store/base-command-palette.store";
+import { CommandPaletteStore } from "@/store/base-command-palette.store";
+import { WorkspaceRootStore } from "@/store/workspace";
+import type { ITimelineStore } from "./timeline/timeline.store";
+import { TimeLineStore } from "./timeline/timeline.store";
+// stores
+import type { ICycleStore } from "./cycle.store";
+import { CycleStore } from "./cycle.store";
+import type { ICycleFilterStore } from "./cycle_filter.store";
+import { CycleFilterStore } from "./cycle_filter.store";
+import type { IDashboardStore } from "./dashboard.store";
+import { DashboardStore } from "./dashboard.store";
+import type { IEditorAssetStore } from "./editor/asset.store";
+import { EditorAssetStore } from "./editor/asset.store";
+import type { IProjectEstimateStore } from "./estimates/project-estimate.store";
+import { ProjectEstimateStore } from "./estimates/project-estimate.store";
+import type { IFavoriteStore } from "./favorite.store";
+import { FavoriteStore } from "./favorite.store";
+import type { IGlobalViewStore } from "./global-view.store";
+import { GlobalViewStore } from "./global-view.store";
+import type { IProjectInboxStore } from "./inbox/project-inbox.store";
+import { ProjectInboxStore } from "./inbox/project-inbox.store";
+import type { IInstanceStore } from "./instance.store";
+import { InstanceStore } from "./instance.store";
+import type { IIssueRootStore } from "./issue/root.store";
+import { IssueRootStore } from "./issue/root.store";
+import type { ILabelStore } from "./label.store";
+import { LabelStore } from "./label.store";
+import type { IMemberRootStore } from "./member";
+import { MemberRootStore } from "./member";
+import type { IModuleStore } from "./module.store";
+import { ModulesStore } from "./module.store";
+import type { IModuleFilterStore } from "./module_filter.store";
+import { ModuleFilterStore } from "./module_filter.store";
+import type { IMultipleSelectStore } from "./multiple_select.store";
+import { MultipleSelectStore } from "./multiple_select.store";
+import type { IWorkspaceNotificationStore } from "./notifications/workspace-notifications.store";
+import { WorkspaceNotificationStore } from "./notifications/workspace-notifications.store";
+import type { IProjectPageStore } from "./pages/project-page.store";
+import { ProjectPageStore } from "./pages/project-page.store";
+import type { IProjectRootStore } from "./project";
+import { ProjectRootStore } from "./project";
+import type { IProjectViewStore } from "./project-view.store";
+import { ProjectViewStore } from "./project-view.store";
+import type { IRouterStore } from "./router.store";
+import { RouterStore } from "./router.store";
+import type { IStickyStore } from "./sticky/sticky.store";
+import { StickyStore } from "./sticky/sticky.store";
+import type { IThemeStore } from "./theme.store";
+import { ThemeStore } from "./theme.store";
+import type { IUserStore } from "./user";
+import { UserStore } from "./user";
+import type { IWorkspaceRootStore } from "./workspace";
+
+enableStaticRendering(typeof window === "undefined");
+
+export class CoreRootStore {
+  workspaceRoot: IWorkspaceRootStore;
+  projectRoot: IProjectRootStore;
+  memberRoot: IMemberRootStore;
+  cycle: ICycleStore;
+  cycleFilter: ICycleFilterStore;
+  module: IModuleStore;
+  moduleFilter: IModuleFilterStore;
+  projectView: IProjectViewStore;
+  globalView: IGlobalViewStore;
+  issue: IIssueRootStore;
+  state: IStateStore;
+  label: ILabelStore;
+  dashboard: IDashboardStore;
+  analytics: IAnalyticsStore;
+  projectPages: IProjectPageStore;
+  router: IRouterStore;
+  commandPalette: ICommandPaletteStore;
+  theme: IThemeStore;
+  instance: IInstanceStore;
+  user: IUserStore;
+  projectInbox: IProjectInboxStore;
+  projectEstimate: IProjectEstimateStore;
+  multipleSelect: IMultipleSelectStore;
+  workspaceNotification: IWorkspaceNotificationStore;
+  favorite: IFavoriteStore;
+  stickyStore: IStickyStore;
+  editorAssetStore: IEditorAssetStore;
+  workItemFilters: IWorkItemFilterStore;
+  powerK: IPowerKStore;
+  timelineStore: ITimelineStore;
+
+  constructor() {
+    this.router = new RouterStore();
+    this.commandPalette = new CommandPaletteStore();
+    this.instance = new InstanceStore();
+    this.user = new UserStore(this);
+    this.theme = new ThemeStore();
+    this.workspaceRoot = new WorkspaceRootStore(this);
+    this.projectRoot = new ProjectRootStore(this);
+    this.memberRoot = new MemberRootStore(this);
+    this.cycle = new CycleStore(this);
+    this.cycleFilter = new CycleFilterStore(this);
+    this.module = new ModulesStore(this);
+    this.moduleFilter = new ModuleFilterStore(this);
+    this.projectView = new ProjectViewStore(this);
+    this.globalView = new GlobalViewStore(this);
+    this.issue = new IssueRootStore(this);
+    this.state = new StateStore(this);
+    this.label = new LabelStore(this);
+    this.dashboard = new DashboardStore(this);
+    this.multipleSelect = new MultipleSelectStore();
+    this.projectInbox = new ProjectInboxStore(this);
+    this.projectPages = new ProjectPageStore(this);
+    this.projectEstimate = new ProjectEstimateStore(this);
+    this.workspaceNotification = new WorkspaceNotificationStore(this);
+    this.favorite = new FavoriteStore(this);
+    this.stickyStore = new StickyStore();
+    this.editorAssetStore = new EditorAssetStore();
+    this.analytics = new AnalyticsStore();
+    this.workItemFilters = new WorkItemFilterStore();
+    this.powerK = new PowerKStore();
+    this.timelineStore = new TimeLineStore(this);
+  }
+
+  resetOnSignOut() {
+    // handling the system theme when user logged out from the app
+    localStorage.setItem("theme", "system");
+    void setLanguage(FALLBACK_LANGUAGE);
+    this.router = new RouterStore();
+    this.commandPalette = new CommandPaletteStore();
+    this.instance = new InstanceStore();
+    this.user = new UserStore(this);
+    this.workspaceRoot = new WorkspaceRootStore(this);
+    this.projectRoot = new ProjectRootStore(this);
+    this.memberRoot = new MemberRootStore(this);
+    this.cycle = new CycleStore(this);
+    this.cycleFilter = new CycleFilterStore(this);
+    this.module = new ModulesStore(this);
+    this.moduleFilter = new ModuleFilterStore(this);
+    this.projectView = new ProjectViewStore(this);
+    this.globalView = new GlobalViewStore(this);
+    this.issue = new IssueRootStore(this);
+    this.state = new StateStore(this);
+    this.label = new LabelStore(this);
+    this.dashboard = new DashboardStore(this);
+    this.projectInbox = new ProjectInboxStore(this);
+    this.projectPages = new ProjectPageStore(this);
+    this.multipleSelect = new MultipleSelectStore();
+    this.projectEstimate = new ProjectEstimateStore(this);
+    this.workspaceNotification = new WorkspaceNotificationStore(this);
+    this.favorite = new FavoriteStore(this);
+    this.stickyStore = new StickyStore();
+    this.editorAssetStore = new EditorAssetStore();
+    this.workItemFilters = new WorkItemFilterStore();
+    this.powerK = new PowerKStore();
+    this.timelineStore = new TimeLineStore(this);
+  }
+}
+
+export { CoreRootStore as RootStore };
diff --git a/apps/web/core/store/router.store.ts b/apps/web/core/store/router.store.ts
new file mode 100644
index 0000000..1e15b8e
--- /dev/null
+++ b/apps/web/core/store/router.store.ts
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ParsedUrlQuery } from "node:querystring";
+import { action, makeObservable, observable, computed, runInAction } from "mobx";
+
+import type { TProfileViews } from "@plane/types";
+export interface IRouterStore {
+  // observables
+  query: ParsedUrlQuery;
+  // actions
+  setQuery: (query: ParsedUrlQuery) => void;
+  // computed
+  workspaceSlug: string | undefined;
+  teamspaceId: string | undefined;
+  projectId: string | undefined;
+  cycleId: string | undefined;
+  moduleId: string | undefined;
+  viewId: string | undefined;
+  globalViewId: string | undefined;
+  profileViewId: TProfileViews | undefined;
+  userId: string | undefined;
+  peekId: string | undefined;
+  issueId: string | undefined;
+  inboxId: string | undefined;
+  webhookId: string | undefined;
+  epicId: string | undefined;
+}
+
+export class RouterStore implements IRouterStore {
+  // observables
+  query: ParsedUrlQuery = {};
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      query: observable,
+      // actions
+      setQuery: action.bound,
+      //computed
+      workspaceSlug: computed,
+      teamspaceId: computed,
+      projectId: computed,
+      cycleId: computed,
+      moduleId: computed,
+      viewId: computed,
+      globalViewId: computed,
+      profileViewId: computed,
+      userId: computed,
+      peekId: computed,
+      issueId: computed,
+      inboxId: computed,
+      webhookId: computed,
+      epicId: computed,
+    });
+  }
+
+  /**
+   * Sets the query
+   * @param query
+   */
+  setQuery = (query: ParsedUrlQuery) => {
+    runInAction(() => {
+      this.query = query;
+    });
+  };
+
+  /**
+   * Returns the workspace slug from the query
+   * @returns string|undefined
+   */
+  get workspaceSlug() {
+    return this.query?.workspaceSlug?.toString();
+  }
+
+  /**
+   * Returns the teamspace id from the query
+   * @returns string|undefined
+   */
+  get teamspaceId() {
+    return this.query?.teamspaceId?.toString();
+  }
+
+  /**
+   * Returns the project id from the query
+   * @returns string|undefined
+   */
+  get projectId() {
+    return this.query?.projectId?.toString();
+  }
+
+  /**
+   * Returns the module id from the query
+   * @returns string|undefined
+   */
+  get moduleId() {
+    return this.query?.moduleId?.toString();
+  }
+
+  /**
+   * Returns the cycle id from the query
+   * @returns string|undefined
+   */
+  get cycleId() {
+    return this.query?.cycleId?.toString();
+  }
+
+  /**
+   * Returns the view id from the query
+   * @returns string|undefined
+   */
+  get viewId() {
+    return this.query?.viewId?.toString();
+  }
+
+  /**
+   * Returns the global view id from the query
+   * @returns string|undefined
+   */
+  get globalViewId() {
+    return this.query?.globalViewId?.toString();
+  }
+
+  /**
+   * Returns the profile view id from the query
+   * @returns string|undefined
+   */
+  get profileViewId() {
+    return this.query?.profileViewId?.toString() as TProfileViews;
+  }
+
+  /**
+   * Returns the user id from the query
+   * @returns string|undefined
+   */
+  get userId() {
+    return this.query?.userId?.toString();
+  }
+
+  /**
+   * Returns the peek id from the query
+   * @returns string|undefined
+   */
+  get peekId() {
+    return this.query?.peekId?.toString();
+  }
+
+  /**
+   * Returns the issue id from the query
+   * @returns string|undefined
+   */
+  get issueId() {
+    return this.query?.issueId?.toString();
+  }
+
+  /**
+   * Returns the inbox id from the query
+   * @returns string|undefined
+   */
+  get inboxId() {
+    return this.query?.inboxId?.toString();
+  }
+
+  /**
+   * Returns the webhook id from the query
+   * @returns string|undefined
+   */
+  get webhookId() {
+    return this.query?.webhookId?.toString();
+  }
+
+  /**
+   * Returns the epic id from the query
+   * @returns string|undefined
+   */
+  get epicId() {
+    return this.query?.epicId?.toString();
+  }
+}
diff --git a/apps/web/core/store/state.store.ts b/apps/web/core/store/state.store.ts
new file mode 100644
index 0000000..a8c28bd
--- /dev/null
+++ b/apps/web/core/store/state.store.ts
@@ -0,0 +1,393 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set, groupBy } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
+import type { IIntakeState, IState } from "@plane/types";
+// helpers
+import { sortStates } from "@plane/utils";
+// plane web
+import { ProjectStateService } from "@/services/project/project-state.service";
+import type { RootStore } from "@/store/root.store";
+
+export interface IStateStore {
+  //Loaders
+  fetchedMap: Record<string, boolean>;
+  fetchedIntakeMap: Record<string, boolean>;
+  // observables
+  stateMap: Record<string, IState>;
+  intakeStateMap: Record<string, IIntakeState>;
+  // computed
+  workspaceStates: IState[] | undefined;
+  projectStates: IState[] | undefined;
+  groupedProjectStates: Record<string, IState[]> | undefined;
+  // computed actions
+  getStateById: (stateId: string | null | undefined) => IState | undefined;
+  getIntakeStateById: (intakeStateId: string | null | undefined) => IIntakeState | undefined;
+  getProjectStates: (projectId: string | null | undefined) => IState[] | undefined;
+  getProjectIntakeState: (projectId: string | null | undefined) => IIntakeState | undefined;
+  getProjectStateIds: (projectId: string | null | undefined) => string[] | undefined;
+  getProjectIntakeStateIds: (projectId: string | null | undefined) => string[] | undefined;
+  getProjectDefaultStateId: (projectId: string | null | undefined) => string | undefined;
+  // fetch actions
+  fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<IState[]>;
+  fetchProjectIntakeState: (workspaceSlug: string, projectId: string) => Promise<IIntakeState>;
+  fetchWorkspaceStates: (workspaceSlug: string) => Promise<IState[]>;
+  // crud actions
+  createState: (workspaceSlug: string, projectId: string, data: Partial<IState>) => Promise<IState>;
+  updateState: (
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    data: Partial<IState>
+  ) => Promise<IState | undefined>;
+  deleteState: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
+  markStateAsDefault: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
+  moveStatePosition: (
+    workspaceSlug: string,
+    projectId: string,
+    stateId: string,
+    payload: Partial<IState>
+  ) => Promise<void>;
+
+  getStatePercentageInGroup: (stateId: string | null | undefined) => number | undefined;
+}
+
+export class StateStore implements IStateStore {
+  stateMap: Record<string, IState> = {};
+  intakeStateMap: Record<string, IIntakeState> = {};
+  //loaders
+  fetchedMap: Record<string, boolean> = {};
+  fetchedIntakeMap: Record<string, boolean> = {};
+  rootStore: RootStore;
+  router;
+  stateService: ProjectStateService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      stateMap: observable,
+      intakeStateMap: observable,
+      fetchedMap: observable,
+      fetchedIntakeMap: observable,
+      // computed
+      projectStates: computed,
+      groupedProjectStates: computed,
+      // fetch action
+      fetchProjectStates: action,
+      fetchProjectIntakeState: action,
+      // CRUD actions
+      createState: action,
+      updateState: action,
+      deleteState: action,
+      // state actions
+      markStateAsDefault: action,
+      moveStatePosition: action,
+    });
+    this.stateService = new ProjectStateService();
+    this.router = _rootStore.router;
+    this.rootStore = _rootStore;
+  }
+
+  /**
+   * Returns the stateMap belongs to a specific workspace
+   */
+  get workspaceStates() {
+    const workspaceSlug = this.router.workspaceSlug || "";
+    if (!workspaceSlug || !this.fetchedMap[workspaceSlug]) return;
+    return sortStates(Object.values(this.stateMap));
+  }
+
+  /**
+   * Returns the stateMap belongs to a specific project
+   */
+  get projectStates() {
+    const projectId = this.router.projectId;
+    const workspaceSlug = this.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
+    return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
+  }
+
+  /**
+   * Returns the stateMap belongs to a specific project grouped by group
+   */
+  get groupedProjectStates() {
+    if (!this.router.projectId) return;
+
+    // First group the existing states
+    const groupedStates = groupBy(this.projectStates, "group") as Record<string, IState[]>;
+
+    // Ensure all STATE_GROUPS are present
+    const allGroups = Object.keys(STATE_GROUPS).reduce(
+      (acc, group) => ({
+        // oxlint-disable-next-line oxc/no-accumulating-spread
+        ...acc,
+        [group]: groupedStates[group] || [],
+      }),
+      {} as Record<string, IState[]>
+    );
+
+    return allGroups;
+  }
+
+  /**
+   * @description returns state details using state id
+   * @param stateId
+   */
+  getStateById = computedFn((stateId: string | null | undefined) => {
+    if (!this.stateMap || !stateId) return;
+    return this.stateMap[stateId] ?? undefined;
+  });
+
+  /**
+   * @description returns intake state details using intake state id
+   * @param intakeStateId
+   */
+  getIntakeStateById = computedFn((intakeStateId: string | null | undefined) => {
+    if (!this.intakeStateMap || !intakeStateId) return;
+    return this.intakeStateMap[intakeStateId] ?? undefined;
+  });
+
+  /**
+   * Returns the stateMap belongs to a project by projectId
+   * @param projectId
+   * @returns IState[]
+   */
+  getProjectStates = computedFn((projectId: string | null | undefined) => {
+    const workspaceSlug = this.router.workspaceSlug || "";
+    if (!projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug])) return;
+    return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
+  });
+
+  /**
+   * Returns the intake state for a project by projectId
+   * @param projectId
+   * @returns IIntakeState | undefined
+   */
+  getProjectIntakeState = computedFn((projectId: string | null | undefined) => {
+    if (!projectId || !this.fetchedIntakeMap[projectId]) return;
+    return Object.values(this.intakeStateMap).find((state) => state.project_id === projectId);
+  });
+
+  /**
+   * Returns the state ids for a project by projectId
+   * @param projectId
+   * @returns string[]
+   */
+  getProjectStateIds = computedFn((projectId: string | null | undefined) => {
+    const workspaceSlug = this.router.workspaceSlug;
+    if (!workspaceSlug || !projectId || !(this.fetchedMap[projectId] || this.fetchedMap[workspaceSlug]))
+      return undefined;
+    const projectStates = this.getProjectStates(projectId);
+    return projectStates?.map((state) => state.id) ?? [];
+  });
+
+  /**
+   * Returns the intake state ids for a project by projectId
+   * @param projectId
+   * @returns string[]
+   */
+  getProjectIntakeStateIds = computedFn((projectId: string | null | undefined) => {
+    const workspaceSlug = this.router.workspaceSlug;
+    if (!workspaceSlug || !projectId || !this.fetchedIntakeMap[projectId]) return undefined;
+    const projectIntakeState = this.getProjectIntakeState(projectId);
+    return projectIntakeState?.id ? [projectIntakeState.id] : [];
+  });
+
+  /**
+   * Returns the default state id for a project
+   * @param projectId
+   * @returns string | undefined
+   */
+  getProjectDefaultStateId = computedFn((projectId: string | null | undefined) => {
+    const projectStates = this.getProjectStates(projectId);
+    return projectStates?.find((state) => state.default)?.id;
+  });
+
+  /**
+   * fetches the stateMap of a project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  fetchProjectStates = async (workspaceSlug: string, projectId: string) => {
+    const statesResponse = await this.stateService.getStates(workspaceSlug, projectId);
+    runInAction(() => {
+      statesResponse.forEach((state) => {
+        set(this.stateMap, [state.id], state);
+      });
+      set(this.fetchedMap, projectId, true);
+    });
+    return statesResponse;
+  };
+
+  /**
+   * fetches the intakeStateMap of a project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  fetchProjectIntakeState = async (workspaceSlug: string, projectId: string) => {
+    const intakeStateResponse = await this.stateService.getIntakeState(workspaceSlug, projectId);
+    runInAction(() => {
+      set(this.intakeStateMap, [intakeStateResponse.id], intakeStateResponse);
+      set(this.fetchedIntakeMap, projectId, true);
+    });
+    return intakeStateResponse;
+  };
+
+  /**
+   * fetches the stateMap of all the states in workspace
+   * @param workspaceSlug
+   * @returns
+   */
+  fetchWorkspaceStates = async (workspaceSlug: string) => {
+    const statesResponse = await this.stateService.getWorkspaceStates(workspaceSlug);
+    runInAction(() => {
+      statesResponse.forEach((state) => {
+        set(this.stateMap, [state.id], state);
+      });
+      set(this.fetchedMap, workspaceSlug, true);
+    });
+    return statesResponse;
+  };
+
+  /**
+   * creates a new state in a project and adds it to the store
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns
+   */
+  createState = async (workspaceSlug: string, projectId: string, data: Partial<IState>) =>
+    await this.stateService.createState(workspaceSlug, projectId, data).then((response) => {
+      runInAction(() => {
+        set(this.stateMap, [response?.id], response);
+      });
+      return response;
+    });
+
+  /**
+   * Updates the state details in the store, in case of failure reverts back to original state
+   * @param workspaceSlug
+   * @param projectId
+   * @param stateId
+   * @param data
+   * @returns
+   */
+  updateState = async (workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>) => {
+    const originalState = this.stateMap[stateId];
+    try {
+      runInAction(() => {
+        set(this.stateMap, [stateId], { ...this.stateMap?.[stateId], ...data });
+      });
+      const response = await this.stateService.patchState(workspaceSlug, projectId, stateId, data);
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.stateMap = {
+          ...this.stateMap,
+          [stateId]: originalState,
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * deletes the state from the store, in case of failure reverts back to original state
+   * @param workspaceSlug
+   * @param projectId
+   * @param stateId
+   */
+  deleteState = async (workspaceSlug: string, projectId: string, stateId: string) => {
+    if (!this.stateMap?.[stateId]) return;
+    // oxlint-disable-next-line promise/always-return
+    await this.stateService.deleteState(workspaceSlug, projectId, stateId).then(() => {
+      runInAction(() => {
+        delete this.stateMap[stateId];
+      });
+    });
+  };
+
+  /**
+   * marks a state as default in a project
+   * @param workspaceSlug
+   * @param projectId
+   * @param stateId
+   */
+  markStateAsDefault = async (workspaceSlug: string, projectId: string, stateId: string) => {
+    const originalStates = this.stateMap;
+    const currentDefaultState = Object.values(this.stateMap).find(
+      (state) => state.project_id === projectId && state.default
+    );
+    try {
+      runInAction(() => {
+        if (currentDefaultState) set(this.stateMap, [currentDefaultState.id, "default"], false);
+        set(this.stateMap, [stateId, "default"], true);
+      });
+      await this.stateService.markDefault(workspaceSlug, projectId, stateId);
+    } catch (error) {
+      // reverting back to old state group if api fails
+      runInAction(() => {
+        this.stateMap = originalStates;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * updates the sort order of a state and updates the state information using API, in case of failure reverts back to original state
+   * @param workspaceSlug
+   * @param projectId
+   * @param stateId
+   * @param direction
+   * @param groupIndex
+   */
+  moveStatePosition = async (workspaceSlug: string, projectId: string, stateId: string, payload: Partial<IState>) => {
+    const originalStates = this.stateMap;
+    try {
+      Object.entries(payload).forEach(([key, value]) => {
+        runInAction(() => {
+          set(this.stateMap, [stateId, key], value);
+        });
+      });
+      // updating using api
+      await this.stateService.patchState(workspaceSlug, projectId, stateId, payload);
+    } catch {
+      // reverting back to old state group if api fails
+      runInAction(() => {
+        this.stateMap = originalStates;
+      });
+    }
+  };
+
+  /**
+   * Returns the percentage position of a state within its group based on sequence
+   * @param stateId The ID of the state to find the percentage for
+   * @returns The percentage position of the state in its group (0-100), or -1 if not found
+   */
+  getStatePercentageInGroup = computedFn((stateId: string | null | undefined) => {
+    if (!stateId || !this.stateMap[stateId]) return -1;
+
+    const state = this.stateMap[stateId];
+    const group = state.group;
+
+    if (!group || !this.groupedProjectStates || !this.groupedProjectStates[group]) return -1;
+
+    // Get all states in the same group
+    const statesInGroup = this.groupedProjectStates[group];
+    const stateIndex = statesInGroup.findIndex((s) => s.id === stateId);
+
+    if (stateIndex === -1) return undefined;
+
+    // Calculate percentage: ((index + 1) / totalLength) * 100
+    return ((stateIndex + 1) / statesInGroup.length) * 100;
+  });
+}
diff --git a/apps/web/core/store/sticky/sticky.store.ts b/apps/web/core/store/sticky/sticky.store.ts
new file mode 100644
index 0000000..0983321
--- /dev/null
+++ b/apps/web/core/store/sticky/sticky.store.ts
@@ -0,0 +1,277 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { orderBy, set } from "lodash-es";
+import { observable, action, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+import { STICKIES_PER_PAGE } from "@plane/constants";
+import type { InstructionType, TLoader, TPaginationInfo, TSticky } from "@plane/types";
+import { StickyService } from "@/services/sticky.service";
+
+export interface IStickyStore {
+  creatingSticky: boolean;
+  loader: TLoader;
+  workspaceStickies: Record<string, string[]>; // workspaceId -> stickyIds
+  stickies: Record<string, TSticky>; // stickyId -> sticky
+  searchQuery: string;
+  activeStickyId: string | undefined;
+  recentStickyId: string | undefined;
+  showAddNewSticky: boolean;
+  paginationInfo: TPaginationInfo | undefined;
+  // computed
+  getWorkspaceStickyIds: (workspaceSlug: string) => string[];
+  // actions
+  toggleShowNewSticky: (value: boolean) => void;
+  updateSearchQuery: (query: string) => void;
+  fetchWorkspaceStickies: (workspaceSlug: string) => void;
+  createSticky: (workspaceSlug: string, sticky: Partial<TSticky>) => Promise<void>;
+  updateSticky: (workspaceSlug: string, id: string, updates: Partial<TSticky>) => Promise<void>;
+  deleteSticky: (workspaceSlug: string, id: string) => Promise<void>;
+  updateActiveStickyId: (id: string | undefined) => void;
+  fetchRecentSticky: (workspaceSlug: string) => Promise<void>;
+  fetchNextWorkspaceStickies: (workspaceSlug: string) => Promise<void>;
+  updateStickyPosition: (
+    workspaceSlug: string,
+    stickyId: string,
+    destinationId: string,
+    edge: InstructionType
+  ) => Promise<void>;
+}
+
+export class StickyStore implements IStickyStore {
+  loader: TLoader = "init-loader";
+  creatingSticky = false;
+  workspaceStickies: Record<string, string[]> = {};
+  stickies: Record<string, TSticky> = {};
+  recentStickyId: string | undefined = undefined;
+  searchQuery = "";
+  activeStickyId: string | undefined = undefined;
+  showAddNewSticky = false;
+  paginationInfo: TPaginationInfo | undefined = undefined;
+
+  // services
+  stickyService;
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      creatingSticky: observable,
+      loader: observable,
+      activeStickyId: observable,
+      showAddNewSticky: observable,
+      recentStickyId: observable,
+      workspaceStickies: observable,
+      stickies: observable,
+      searchQuery: observable,
+      // actions
+      updateSearchQuery: action,
+      updateSticky: action,
+      deleteSticky: action,
+      fetchNextWorkspaceStickies: action,
+      fetchWorkspaceStickies: action,
+      createSticky: action,
+      updateActiveStickyId: action,
+      toggleShowNewSticky: action,
+      fetchRecentSticky: action,
+      updateStickyPosition: action,
+    });
+    this.stickyService = new StickyService();
+  }
+
+  getWorkspaceStickyIds = computedFn((workspaceSlug: string) =>
+    orderBy(
+      (this.workspaceStickies[workspaceSlug] || []).map((stickyId) => this.stickies[stickyId]),
+      ["sort_order"],
+      ["desc"]
+    ).map((sticky) => sticky.id)
+  );
+
+  toggleShowNewSticky = (value: boolean) => {
+    this.showAddNewSticky = value;
+  };
+
+  updateSearchQuery = (query: string) => {
+    this.searchQuery = query;
+  };
+
+  updateActiveStickyId = (id: string | undefined) => {
+    this.activeStickyId = id;
+  };
+
+  fetchRecentSticky = async (workspaceSlug: string) => {
+    const response = await this.stickyService.getStickies(workspaceSlug, "1:0:0", undefined, 1);
+    runInAction(() => {
+      this.recentStickyId = response.results[0]?.id;
+      this.stickies[response.results[0]?.id] = response.results[0];
+    });
+  };
+  fetchNextWorkspaceStickies = async (workspaceSlug: string) => {
+    try {
+      if (!this.paginationInfo?.next_cursor || !this.paginationInfo.next_page_results || this.loader === "pagination") {
+        return;
+      }
+      this.loader = "pagination";
+      const response = await this.stickyService.getStickies(
+        workspaceSlug,
+        this.paginationInfo.next_cursor,
+        this.searchQuery
+      );
+
+      runInAction(() => {
+        const { results, ...paginationInfo } = response;
+
+        // Add new stickies to store
+        results.forEach((sticky) => {
+          if (!this.workspaceStickies[workspaceSlug]?.includes(sticky.id)) {
+            this.workspaceStickies[workspaceSlug] = [...(this.workspaceStickies[workspaceSlug] || []), sticky.id];
+          }
+          this.stickies[sticky.id] = sticky;
+        });
+
+        // Update pagination info directly from backend
+        set(this, "paginationInfo", paginationInfo);
+        set(this, "loader", "loaded");
+      });
+    } catch (e) {
+      console.error(e);
+      runInAction(() => {
+        this.loader = "loaded";
+      });
+    }
+  };
+
+  fetchWorkspaceStickies = async (workspaceSlug: string) => {
+    try {
+      if (this.workspaceStickies[workspaceSlug]) {
+        this.loader = "mutation";
+      } else {
+        this.loader = "init-loader";
+      }
+
+      const response = await this.stickyService.getStickies(
+        workspaceSlug,
+        `${STICKIES_PER_PAGE}:0:0`,
+        this.searchQuery
+      );
+
+      runInAction(() => {
+        const { results, ...paginationInfo } = response;
+
+        results.forEach((sticky) => {
+          this.stickies[sticky.id] = sticky;
+        });
+        this.workspaceStickies[workspaceSlug] = results.map((sticky) => sticky.id);
+        set(this, "paginationInfo", paginationInfo);
+        this.loader = "loaded";
+      });
+    } catch (e) {
+      console.error(e);
+      runInAction(() => {
+        this.loader = "loaded";
+      });
+    }
+  };
+
+  createSticky = async (workspaceSlug: string, sticky: Partial<TSticky>) => {
+    if (!this.showAddNewSticky) return;
+    this.showAddNewSticky = false;
+    this.creatingSticky = true;
+    const workspaceStickies = this.workspaceStickies[workspaceSlug] || [];
+    const response = await this.stickyService.createSticky(workspaceSlug, sticky);
+    runInAction(() => {
+      this.stickies[response.id] = response;
+      this.workspaceStickies[workspaceSlug] = [response.id, ...workspaceStickies];
+      this.activeStickyId = response.id;
+      this.recentStickyId = response.id;
+      this.creatingSticky = false;
+    });
+  };
+
+  updateSticky = async (workspaceSlug: string, id: string, updates: Partial<TSticky>) => {
+    const sticky = this.stickies[id];
+    if (!sticky) return;
+    try {
+      runInAction(() => {
+        Object.keys(updates).forEach((key) => {
+          const currentStickyKey = key as keyof TSticky;
+          set(this.stickies[id], key, updates[currentStickyKey] || undefined);
+        });
+      });
+      this.recentStickyId = id;
+      await this.stickyService.updateSticky(workspaceSlug, id, updates);
+    } catch (error) {
+      console.error("Error in updating sticky:", error);
+      this.stickies[id] = sticky;
+      throw new Error();
+    }
+  };
+
+  deleteSticky = async (workspaceSlug: string, id: string) => {
+    const sticky = this.stickies[id];
+    if (!sticky) return;
+    try {
+      this.workspaceStickies[workspaceSlug] = this.workspaceStickies[workspaceSlug].filter(
+        (stickyId) => stickyId !== id
+      );
+      if (this.activeStickyId === id) this.activeStickyId = undefined;
+      delete this.stickies[id];
+      this.recentStickyId = this.workspaceStickies[workspaceSlug][0];
+      await this.stickyService.deleteSticky(workspaceSlug, id);
+    } catch (e) {
+      console.log(e);
+      this.stickies[id] = sticky;
+    }
+  };
+
+  updateStickyPosition = async (
+    workspaceSlug: string,
+    stickyId: string,
+    destinationId: string,
+    edge: InstructionType
+  ) => {
+    const previousSortOrder = this.stickies[stickyId].sort_order;
+    try {
+      let resultSequence = 10000;
+      const workspaceStickies = this.workspaceStickies[workspaceSlug] || [];
+      const stickies = workspaceStickies.map((id) => this.stickies[id]);
+      const sortedStickies = orderBy(stickies, "sort_order", "desc").map((sticky) => sticky.id);
+      const destinationSequence = this.stickies[destinationId]?.sort_order || undefined;
+
+      if (destinationSequence) {
+        const destinationIndex = sortedStickies.findIndex((id) => id === destinationId);
+
+        if (edge === "reorder-above") {
+          const prevSequence = this.stickies[sortedStickies[destinationIndex - 1]]?.sort_order || undefined;
+          if (prevSequence) {
+            resultSequence = (destinationSequence + prevSequence) / 2;
+          } else {
+            resultSequence = destinationSequence + resultSequence;
+          }
+        } else {
+          // reorder-below
+          resultSequence = destinationSequence - resultSequence;
+        }
+      }
+
+      runInAction(() => {
+        this.stickies[stickyId] = {
+          ...this.stickies[stickyId],
+          sort_order: resultSequence,
+        };
+      });
+
+      await this.stickyService.updateSticky(workspaceSlug, stickyId, {
+        sort_order: resultSequence,
+      });
+    } catch (error) {
+      console.error("Failed to move sticky");
+      runInAction(() => {
+        this.stickies[stickyId].sort_order = previousSortOrder;
+      });
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/theme.store.ts b/apps/web/core/store/theme.store.ts
new file mode 100644
index 0000000..78d6cbc
--- /dev/null
+++ b/apps/web/core/store/theme.store.ts
@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, observable, makeObservable, runInAction } from "mobx";
+
+export interface IThemeStore {
+  // observables
+  isAnySidebarDropdownOpen: boolean | undefined;
+  sidebarCollapsed: boolean | undefined;
+  sidebarPeek: boolean | undefined;
+  isExtendedSidebarOpened: boolean | undefined;
+  isExtendedProjectSidebarOpened: boolean | undefined;
+  profileSidebarCollapsed: boolean | undefined;
+  workspaceAnalyticsSidebarCollapsed: boolean | undefined;
+  issueDetailSidebarCollapsed: boolean | undefined;
+  epicDetailSidebarCollapsed: boolean | undefined;
+  initiativesSidebarCollapsed: boolean | undefined;
+  projectOverviewSidebarCollapsed: boolean | undefined;
+  // actions
+  toggleAnySidebarDropdown: (open?: boolean) => void;
+  toggleSidebar: (collapsed?: boolean) => void;
+  toggleSidebarPeek: (peek?: boolean) => void;
+  toggleExtendedSidebar: (collapsed?: boolean) => void;
+  toggleExtendedProjectSidebar: (collapsed?: boolean) => void;
+  toggleProfileSidebar: (collapsed?: boolean) => void;
+  toggleWorkspaceAnalyticsSidebar: (collapsed?: boolean) => void;
+  toggleIssueDetailSidebar: (collapsed?: boolean) => void;
+  toggleEpicDetailSidebar: (collapsed?: boolean) => void;
+  toggleInitiativesSidebar: (collapsed?: boolean) => void;
+  toggleProjectOverviewSidebar: (collapsed?: boolean) => void;
+}
+
+export class ThemeStore implements IThemeStore {
+  // observables
+  isAnySidebarDropdownOpen: boolean | undefined = undefined;
+  sidebarCollapsed: boolean | undefined = undefined;
+  sidebarPeek: boolean | undefined = undefined;
+  isExtendedSidebarOpened: boolean | undefined = undefined;
+  isExtendedProjectSidebarOpened: boolean | undefined = undefined;
+  profileSidebarCollapsed: boolean | undefined = undefined;
+  workspaceAnalyticsSidebarCollapsed: boolean | undefined = undefined;
+  issueDetailSidebarCollapsed: boolean | undefined = undefined;
+  epicDetailSidebarCollapsed: boolean | undefined = undefined;
+  initiativesSidebarCollapsed: boolean | undefined = undefined;
+  projectOverviewSidebarCollapsed: boolean | undefined = undefined;
+
+  constructor() {
+    makeObservable(this, {
+      // observable
+      isAnySidebarDropdownOpen: observable.ref,
+      sidebarCollapsed: observable.ref,
+      sidebarPeek: observable.ref,
+      isExtendedSidebarOpened: observable.ref,
+      isExtendedProjectSidebarOpened: observable.ref,
+      profileSidebarCollapsed: observable.ref,
+      workspaceAnalyticsSidebarCollapsed: observable.ref,
+      issueDetailSidebarCollapsed: observable.ref,
+      epicDetailSidebarCollapsed: observable.ref,
+      initiativesSidebarCollapsed: observable.ref,
+      projectOverviewSidebarCollapsed: observable.ref,
+      // action
+      toggleAnySidebarDropdown: action,
+      toggleSidebar: action,
+      toggleSidebarPeek: action,
+      toggleExtendedSidebar: action,
+      toggleExtendedProjectSidebar: action,
+      toggleProfileSidebar: action,
+      toggleWorkspaceAnalyticsSidebar: action,
+      toggleIssueDetailSidebar: action,
+      toggleEpicDetailSidebar: action,
+      toggleInitiativesSidebar: action,
+      toggleProjectOverviewSidebar: action,
+    });
+  }
+
+  toggleAnySidebarDropdown = (open?: boolean) => {
+    if (open === undefined) {
+      this.isAnySidebarDropdownOpen = !this.isAnySidebarDropdownOpen;
+    } else {
+      this.isAnySidebarDropdownOpen = open;
+    }
+  };
+
+  /**
+   * Toggle the sidebar collapsed state
+   * @param collapsed
+   */
+  toggleSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.sidebarCollapsed = !this.sidebarCollapsed;
+    } else {
+      this.sidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
+  };
+
+  /**
+   * Toggle the sidebar peek state
+   * @param peek
+   */
+  toggleSidebarPeek = (peek?: boolean) => {
+    if (peek === undefined) {
+      this.sidebarPeek = !this.sidebarPeek;
+    } else {
+      this.sidebarPeek = peek;
+    }
+  };
+
+  /**
+   * Toggle the extended sidebar collapsed state
+   * @param collapsed
+   */
+  toggleExtendedSidebar = (collapsed?: boolean) => {
+    const updatedState = collapsed ?? !this.isExtendedSidebarOpened;
+    runInAction(() => {
+      this.isExtendedSidebarOpened = updatedState;
+    });
+    localStorage.setItem("extended_sidebar_collapsed", updatedState.toString());
+  };
+
+  /**
+   * Toggle the extended project sidebar collapsed state
+   * @param collapsed
+   */
+  toggleExtendedProjectSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.isExtendedProjectSidebarOpened = !this.isExtendedProjectSidebarOpened;
+    } else {
+      this.isExtendedProjectSidebarOpened = collapsed;
+    }
+    localStorage.setItem("extended_project_sidebar_collapsed", this.isExtendedProjectSidebarOpened.toString());
+  };
+
+  /**
+   * Toggle the profile sidebar collapsed state
+   * @param collapsed
+   */
+  toggleProfileSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.profileSidebarCollapsed = !this.profileSidebarCollapsed;
+    } else {
+      this.profileSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("profile_sidebar_collapsed", this.profileSidebarCollapsed.toString());
+  };
+
+  /**
+   * Toggle the profile sidebar collapsed state
+   * @param collapsed
+   */
+  toggleWorkspaceAnalyticsSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.workspaceAnalyticsSidebarCollapsed = !this.workspaceAnalyticsSidebarCollapsed;
+    } else {
+      this.workspaceAnalyticsSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("workspace_analytics_sidebar_collapsed", this.workspaceAnalyticsSidebarCollapsed.toString());
+  };
+
+  toggleIssueDetailSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.issueDetailSidebarCollapsed = !this.issueDetailSidebarCollapsed;
+    } else {
+      this.issueDetailSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("issue_detail_sidebar_collapsed", this.issueDetailSidebarCollapsed.toString());
+  };
+
+  toggleEpicDetailSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.epicDetailSidebarCollapsed = !this.epicDetailSidebarCollapsed;
+    } else {
+      this.epicDetailSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("epic_detail_sidebar_collapsed", this.epicDetailSidebarCollapsed.toString());
+  };
+
+  toggleInitiativesSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.initiativesSidebarCollapsed = !this.initiativesSidebarCollapsed;
+    } else {
+      this.initiativesSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("initiatives_sidebar_collapsed", this.initiativesSidebarCollapsed.toString());
+  };
+
+  toggleProjectOverviewSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.projectOverviewSidebarCollapsed = !this.projectOverviewSidebarCollapsed;
+    } else {
+      this.projectOverviewSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("project_overview_sidebar_collapsed", this.projectOverviewSidebarCollapsed.toString());
+  };
+}
diff --git a/apps/web/core/store/timeline/base-timeline.store.ts b/apps/web/core/store/timeline/base-timeline.store.ts
new file mode 100644
index 0000000..d5b1a55
--- /dev/null
+++ b/apps/web/core/store/timeline/base-timeline.store.ts
@@ -0,0 +1,346 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEqual, set } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// components
+import type {
+  ChartDataType,
+  IBlockUpdateDependencyData,
+  IGanttBlock,
+  TGanttViews,
+  EGanttBlockType,
+} from "@plane/types";
+import { renderFormattedPayloadDate } from "@plane/utils";
+import { currentViewDataWithView } from "@/components/gantt-chart/data";
+import {
+  getDateFromPositionOnGantt,
+  getItemPositionWidth,
+  getPositionFromDate,
+} from "@/components/gantt-chart/views/helpers";
+// helpers
+// store
+import type { RootStore } from "@/store/root.store";
+
+// types
+type BlockData = {
+  id: string;
+  name: string;
+  sort_order: number | null;
+  start_date?: string | undefined | null;
+  target_date?: string | undefined | null;
+  project_id?: string | undefined | null;
+};
+
+export interface IBaseTimelineStore {
+  // observables
+  currentView: TGanttViews;
+  currentViewData: ChartDataType | undefined;
+  activeBlockId: string | null;
+  renderView: any;
+  isDragging: boolean;
+  isDependencyEnabled: boolean;
+  //
+  setBlockIds: (ids: string[]) => void;
+  getBlockById: (blockId: string) => IGanttBlock;
+  // computed functions
+  getIsCurrentDependencyDragging: (blockId: string) => boolean;
+  isBlockActive: (blockId: string) => boolean;
+  // actions
+  updateCurrentView: (view: TGanttViews) => void;
+  updateCurrentViewData: (data: ChartDataType | undefined) => void;
+  updateActiveBlockId: (blockId: string | null) => void;
+  updateRenderView: (data: any) => void;
+  updateAllBlocksOnChartChangeWhileDragging: (addedWidth: number) => void;
+  getUpdatedPositionAfterDrag: (
+    id: string,
+    shouldUpdateHalfBlock: boolean,
+    ignoreDependencies?: boolean
+  ) => IBlockUpdateDependencyData[];
+  updateBlockPosition: (id: string, deltaLeft: number, deltaWidth: number, ignoreDependencies?: boolean) => void;
+  getNumberOfDaysFromPosition: (position: number | undefined) => number | undefined;
+  setIsDragging: (isDragging: boolean) => void;
+  initGantt: () => void;
+
+  getDateFromPositionOnGantt: (position: number, offsetDays: number) => Date | undefined;
+  getPositionFromDateOnGantt: (date: string | Date, offSetWidth: number) => number | undefined;
+}
+
+export class BaseTimeLineStore implements IBaseTimelineStore {
+  blocksMap: Record<string, IGanttBlock> = {};
+  blockIds: string[] | undefined = undefined;
+
+  isDragging: boolean = false;
+  currentView: TGanttViews = "week";
+  currentViewData: ChartDataType | undefined = undefined;
+  activeBlockId: string | null = null;
+  renderView: any = [];
+
+  rootStore: RootStore;
+
+  isDependencyEnabled = false;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      blocksMap: observable,
+      blockIds: observable,
+      isDragging: observable.ref,
+      currentView: observable.ref,
+      currentViewData: observable,
+      activeBlockId: observable.ref,
+      renderView: observable,
+      // actions
+      setIsDragging: action,
+      setBlockIds: action.bound,
+      initGantt: action.bound,
+      updateCurrentView: action.bound,
+      updateCurrentViewData: action.bound,
+      updateActiveBlockId: action.bound,
+      updateRenderView: action.bound,
+    });
+
+    this.initGantt();
+
+    this.rootStore = _rootStore;
+  }
+
+  /**
+   * Update Block Ids to derive blocks from
+   * @param ids
+   */
+  setBlockIds = (ids: string[]) => {
+    this.blockIds = ids;
+  };
+
+  /**
+   * setIsDragging
+   * @param isDragging
+   */
+  setIsDragging = (isDragging: boolean) => {
+    runInAction(() => {
+      this.isDragging = isDragging;
+    });
+  };
+
+  /**
+   * @description check if block is active
+   * @param {string} blockId
+   */
+  isBlockActive = computedFn((blockId: string): boolean => this.activeBlockId === blockId);
+
+  /**
+   * @description update current view
+   * @param {TGanttViews} view
+   */
+  updateCurrentView = (view: TGanttViews) => {
+    this.currentView = view;
+  };
+
+  /**
+   * @description update current view data
+   * @param {ChartDataType | undefined} data
+   */
+  updateCurrentViewData = (data: ChartDataType | undefined) => {
+    runInAction(() => {
+      this.currentViewData = data;
+    });
+  };
+
+  /**
+   * @description update active block
+   * @param {string | null} block
+   */
+  updateActiveBlockId = (blockId: string | null) => {
+    this.activeBlockId = blockId;
+  };
+
+  /**
+   * @description update render view
+   * @param {any[]} data
+   */
+  updateRenderView = (data: any[]) => {
+    this.renderView = data;
+  };
+
+  /**
+   * @description initialize gantt chart with month view
+   */
+  initGantt = () => {
+    const newCurrentViewData = currentViewDataWithView(this.currentView);
+
+    runInAction(() => {
+      this.currentViewData = newCurrentViewData;
+      this.blocksMap = {};
+      this.blockIds = undefined;
+    });
+  };
+
+  /** Gets Block from Id */
+  getBlockById = computedFn((blockId: string) => this.blocksMap[blockId]);
+
+  /**
+   * updates the BlocksMap from blockIds
+   * @param getDataById
+   * @returns
+   */
+  updateBlocks(getDataById: (id: string) => BlockData | undefined | null, type?: EGanttBlockType, index?: number) {
+    if (!this.blockIds || !Array.isArray(this.blockIds) || this.isDragging) return true;
+
+    const updatedBlockMaps: { path: string[]; value: any }[] = [];
+    const newBlocks: IGanttBlock[] = [];
+
+    // Loop through blockIds to generate blocks Data
+    for (const blockId of this.blockIds) {
+      const blockData = getDataById(blockId);
+      if (!blockData) continue;
+
+      const block: IGanttBlock = {
+        data: blockData,
+        id: blockData?.id,
+        name: blockData.name,
+        sort_order: blockData?.sort_order ?? undefined,
+        start_date: blockData?.start_date ?? undefined,
+        target_date: blockData?.target_date ?? undefined,
+        meta: {
+          type,
+          index,
+          project_id: blockData?.project_id,
+        },
+      };
+      if (this.currentViewData && (this.currentViewData?.data?.startDate || this.currentViewData?.data?.dayWidth)) {
+        block.position = getItemPositionWidth(this.currentViewData, block);
+      }
+
+      // create block updates if the block already exists, or push them to newBlocks
+      if (this.blocksMap[blockId]) {
+        for (const key of Object.keys(block)) {
+          const currValue = this.blocksMap[blockId][key as keyof IGanttBlock];
+          const nextValue = block[key as keyof IGanttBlock];
+          if (!isEqual(currValue, nextValue)) {
+            updatedBlockMaps.push({ path: [blockId, key], value: nextValue });
+          }
+        }
+      } else {
+        newBlocks.push(block);
+      }
+    }
+
+    // update the store with the block updates
+    runInAction(() => {
+      for (const updatedBlock of updatedBlockMaps) {
+        set(this.blocksMap, updatedBlock.path, updatedBlock.value);
+      }
+
+      for (const newBlock of newBlocks) {
+        set(this.blocksMap, [newBlock.id], newBlock);
+      }
+    });
+  }
+
+  /**
+   * returns number of days that the position pixels span across the timeline chart
+   * @param position
+   * @returns
+   */
+  getNumberOfDaysFromPosition = (position: number | undefined) => {
+    if (!this.currentViewData || !position) return;
+
+    return Math.round(position / this.currentViewData.data.dayWidth);
+  };
+
+  /**
+   * returns position of the date on chart
+   */
+  getPositionFromDateOnGantt = computedFn((date: string | Date, offSetWidth: number) => {
+    if (!this.currentViewData) return;
+
+    return getPositionFromDate(this.currentViewData, date, offSetWidth);
+  });
+
+  /**
+   * returns the date at which the position corresponds to on the timeline chart
+   */
+  getDateFromPositionOnGantt = computedFn((position: number, offsetDays: number) => {
+    if (!this.currentViewData) return;
+
+    return getDateFromPositionOnGantt(position, this.currentViewData, offsetDays);
+  });
+
+  /**
+   * Adds width on Chart position change while the blocks are being dragged
+   * @param addedWidth
+   */
+  updateAllBlocksOnChartChangeWhileDragging = action((addedWidth: number) => {
+    if (!this.blockIds || !this.isDragging) return;
+
+    runInAction(() => {
+      this.blockIds?.forEach((blockId) => {
+        const currBlock = this.blocksMap[blockId];
+
+        if (!currBlock || !currBlock.position) return;
+
+        currBlock.position.marginLeft += addedWidth;
+      });
+    });
+  });
+
+  /**
+   * returns updates dates of blocks post drag.
+   * @param id
+   * @param shouldUpdateHalfBlock if is a half block then update the incomplete block only if this is true
+   * @returns
+   */
+  getUpdatedPositionAfterDrag = action((id: string, shouldUpdateHalfBlock: boolean) => {
+    const currBlock = this.blocksMap[id];
+
+    if (!currBlock?.position || !this.currentViewData) return [];
+
+    const updatePayload: IBlockUpdateDependencyData = { id, meta: currBlock.meta };
+
+    // If shouldUpdateHalfBlock or the start date is available then update start date
+    if (shouldUpdateHalfBlock || currBlock.start_date) {
+      updatePayload.start_date = renderFormattedPayloadDate(
+        getDateFromPositionOnGantt(currBlock.position.marginLeft, this.currentViewData)
+      );
+    }
+    // If shouldUpdateHalfBlock or the target date is available then update target date
+    if (shouldUpdateHalfBlock || currBlock.target_date) {
+      updatePayload.target_date = renderFormattedPayloadDate(
+        getDateFromPositionOnGantt(currBlock.position.marginLeft + currBlock.position.width, this.currentViewData, -1)
+      );
+    }
+
+    return [updatePayload];
+  });
+
+  /**
+   * updates the block's position such as marginLeft and width while dragging
+   * @param id
+   * @param deltaLeft
+   * @param deltaWidth
+   * @returns
+   */
+  updateBlockPosition = action((id: string, deltaLeft: number, deltaWidth: number) => {
+    const currBlock = this.blocksMap[id];
+
+    if (!currBlock?.position) return;
+
+    const newMarginLeft = currBlock.position.marginLeft + deltaLeft;
+    const newWidth = currBlock.position.width + deltaWidth;
+
+    runInAction(() => {
+      set(this.blocksMap, [id, "position"], {
+        marginLeft: newMarginLeft ?? currBlock.position?.marginLeft,
+        width: newWidth ?? currBlock.position?.width,
+      });
+    });
+  });
+
+  // Dummy method to return if the current Block's dependency is being dragged
+  getIsCurrentDependencyDragging = computedFn((_blockId: string) => false);
+}
diff --git a/apps/web/core/store/timeline/issues-timeline.store.ts b/apps/web/core/store/timeline/issues-timeline.store.ts
new file mode 100644
index 0000000..54a502b
--- /dev/null
+++ b/apps/web/core/store/timeline/issues-timeline.store.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { autorun } from "mobx";
+import type { RootStore } from "@/store/root.store";
+import type { IBaseTimelineStore } from "@/store/timeline/base-timeline.store";
+import { BaseTimeLineStore } from "@/store/timeline/base-timeline.store";
+
+export interface IIssuesTimeLineStore extends IBaseTimelineStore {
+  isDependencyEnabled: boolean;
+}
+
+export class IssuesTimeLineStore extends BaseTimeLineStore implements IIssuesTimeLineStore {
+  constructor(_rootStore: RootStore) {
+    super(_rootStore);
+
+    autorun(() => {
+      const getIssueById = this.rootStore.issue.issues.getIssueById;
+      this.updateBlocks(getIssueById);
+    });
+  }
+}
diff --git a/apps/web/core/store/timeline/modules-timeline.store.ts b/apps/web/core/store/timeline/modules-timeline.store.ts
new file mode 100644
index 0000000..7df60f2
--- /dev/null
+++ b/apps/web/core/store/timeline/modules-timeline.store.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { autorun } from "mobx";
+import type { RootStore } from "@/store/root.store";
+import { BaseTimeLineStore } from "@/store/timeline/base-timeline.store";
+import type { IBaseTimelineStore } from "@/store/timeline/base-timeline.store";
+
+export interface IModulesTimeLineStore extends IBaseTimelineStore {
+  isDependencyEnabled: boolean;
+}
+
+export class ModulesTimeLineStore extends BaseTimeLineStore implements IModulesTimeLineStore {
+  constructor(_rootStore: RootStore) {
+    super(_rootStore);
+
+    autorun(() => {
+      const getModuleById = this.rootStore.module.getModuleById;
+      this.updateBlocks(getModuleById);
+    });
+  }
+}
diff --git a/apps/web/core/store/timeline/timeline.store.ts b/apps/web/core/store/timeline/timeline.store.ts
new file mode 100644
index 0000000..b74e9cc
--- /dev/null
+++ b/apps/web/core/store/timeline/timeline.store.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RootStore } from "@/store/root.store";
+import { IssuesTimeLineStore } from "@/store/timeline/issues-timeline.store";
+import type { IIssuesTimeLineStore } from "@/store/timeline/issues-timeline.store";
+import { ModulesTimeLineStore } from "@/store/timeline/modules-timeline.store";
+import type { IModulesTimeLineStore } from "@/store/timeline/modules-timeline.store";
+import { BaseTimeLineStore } from "./base-timeline.store";
+import type { IBaseTimelineStore } from "./base-timeline.store";
+
+export interface ITimelineStore {
+  issuesTimeLineStore: IIssuesTimeLineStore;
+  modulesTimeLineStore: IModulesTimeLineStore;
+  projectTimeLineStore: IBaseTimelineStore;
+  groupedTimeLineStore: IBaseTimelineStore;
+}
+
+export class TimeLineStore implements ITimelineStore {
+  issuesTimeLineStore: IIssuesTimeLineStore;
+  modulesTimeLineStore: IModulesTimeLineStore;
+  projectTimeLineStore: IBaseTimelineStore;
+  groupedTimeLineStore: IBaseTimelineStore;
+
+  constructor(rootStore: RootStore) {
+    this.issuesTimeLineStore = new IssuesTimeLineStore(rootStore);
+    this.modulesTimeLineStore = new ModulesTimeLineStore(rootStore);
+    // Dummy store
+    this.projectTimeLineStore = new BaseTimeLineStore(rootStore);
+    this.groupedTimeLineStore = new BaseTimeLineStore(rootStore);
+  }
+}
diff --git a/apps/web/core/store/user/account.store.ts b/apps/web/core/store/user/account.store.ts
new file mode 100644
index 0000000..4736912
--- /dev/null
+++ b/apps/web/core/store/user/account.store.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { makeObservable, observable } from "mobx";
+// types
+import type { IUserAccount } from "@plane/types";
+// services
+import { UserService } from "@/services/user.service";
+// store
+import type { CoreRootStore } from "../root.store";
+
+export interface IAccountStore {
+  // observables
+  isLoading: boolean;
+  error: any | undefined;
+  // model observables
+  provider_account_id: string | undefined;
+  provider: string | undefined;
+}
+
+export class AccountStore implements IAccountStore {
+  isLoading: boolean = false;
+  error: any | undefined = undefined;
+  // model observables
+  provider_account_id: string | undefined = undefined;
+  provider: string | undefined = undefined;
+  // service
+  userService: UserService;
+  constructor(
+    private store: CoreRootStore,
+    private _account: IUserAccount
+  ) {
+    makeObservable(this, {
+      // observables
+      isLoading: observable.ref,
+      error: observable,
+      // model observables
+      provider_account_id: observable.ref,
+      provider: observable.ref,
+    });
+    // service
+    this.userService = new UserService();
+    // set account data
+    Object.entries(this._account).forEach(([key, value]) => {
+      set(this, [key], value ?? undefined);
+    });
+  }
+}
diff --git a/apps/web/core/store/user/base-permissions.store.ts b/apps/web/core/store/user/base-permissions.store.ts
new file mode 100644
index 0000000..7afa71a
--- /dev/null
+++ b/apps/web/core/store/user/base-permissions.store.ts
@@ -0,0 +1,361 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { unset, set } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { TUserPermissions, TUserPermissionsLevel } from "@plane/constants";
+import {
+  EUserPermissions,
+  EUserPermissionsLevel,
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS,
+} from "@plane/constants";
+import type { EUserProjectRoles, IUserProjectsRole, IWorkspaceMemberMe, TProjectMembership } from "@plane/types";
+import { EUserWorkspaceRoles } from "@plane/types";
+// plane web imports
+import { WorkspaceService } from "@/services/workspace.service";
+import type { RootStore } from "@/store/root.store";
+// services
+import projectMemberService from "@/services/project/project-member.service";
+import userService from "@/services/user.service";
+
+// derived services
+const workspaceService = new WorkspaceService();
+
+type ETempUserRole = TUserPermissions | EUserWorkspaceRoles | EUserProjectRoles; // TODO: Remove this once we have migrated user permissions to enums to plane constants package
+
+export interface IBaseUserPermissionStore {
+  loader: boolean;
+  // observables
+  workspaceUserInfo: Record<string, IWorkspaceMemberMe>; // workspaceSlug -> IWorkspaceMemberMe
+  projectUserInfo: Record<string, Record<string, TProjectMembership>>; // workspaceSlug -> projectId -> TProjectMembership
+  workspaceProjectsPermissions: Record<string, IUserProjectsRole>; // workspaceSlug -> IUserProjectsRole
+  // computed helpers
+  workspaceInfoBySlug: (workspaceSlug: string) => IWorkspaceMemberMe | undefined;
+  getWorkspaceRoleByWorkspaceSlug: (workspaceSlug: string) => TUserPermissions | EUserWorkspaceRoles | undefined;
+  getProjectRolesByWorkspaceSlug: (workspaceSlug: string) => IUserProjectsRole;
+  getProjectRoleByWorkspaceSlugAndProjectId: (
+    workspaceSlug: string,
+    projectId?: string
+  ) => EUserPermissions | undefined;
+  fetchWorkspaceLevelProjectEntities: (workspaceSlug: string, projectId: string) => void;
+  allowPermissions: (
+    allowPermissions: ETempUserRole[],
+    level: TUserPermissionsLevel,
+    workspaceSlug?: string,
+    projectId?: string,
+    onPermissionAllowed?: () => boolean
+  ) => boolean;
+  // actions
+  fetchUserWorkspaceInfo: (workspaceSlug: string) => Promise<IWorkspaceMemberMe>;
+  leaveWorkspace: (workspaceSlug: string) => Promise<void>;
+  fetchUserProjectInfo: (workspaceSlug: string, projectId: string) => Promise<TProjectMembership>;
+  fetchUserProjectPermissions: (workspaceSlug: string) => Promise<IUserProjectsRole>;
+  joinProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  leaveProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  hasPageAccess: (workspaceSlug: string, key: string) => boolean;
+}
+
+/**
+ * @description This store is used to handle permission layer for the currently logged user.
+ * It manages workspace and project level permissions, roles and access control.
+ */
+export class BaseUserPermissionStore implements IBaseUserPermissionStore {
+  loader: boolean = false;
+  // constants
+  workspaceUserInfo: Record<string, IWorkspaceMemberMe> = {};
+  projectUserInfo: Record<string, Record<string, TProjectMembership>> = {};
+  workspaceProjectsPermissions: Record<string, IUserProjectsRole> = {};
+  // observables
+
+  constructor(protected store: RootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      workspaceUserInfo: observable,
+      projectUserInfo: observable,
+      workspaceProjectsPermissions: observable,
+      // computed
+      // actions
+      fetchUserWorkspaceInfo: action,
+      leaveWorkspace: action,
+      fetchUserProjectInfo: action,
+      fetchUserProjectPermissions: action,
+      joinProject: action,
+      leaveProject: action,
+    });
+  }
+
+  // computed helpers
+  /**
+   * @description Returns the current workspace information
+   * @param { string } workspaceSlug
+   * @returns { IWorkspaceMemberMe | undefined }
+   */
+  workspaceInfoBySlug = computedFn((workspaceSlug: string): IWorkspaceMemberMe | undefined => {
+    if (!workspaceSlug) return undefined;
+    return this.workspaceUserInfo[workspaceSlug] || undefined;
+  });
+
+  /**
+   * @description Returns the workspace role by slug
+   * @param { string } workspaceSlug
+   * @returns { TUserPermissions | EUserWorkspaceRoles | undefined }
+   */
+  getWorkspaceRoleByWorkspaceSlug = computedFn(
+    (workspaceSlug: string): TUserPermissions | EUserWorkspaceRoles | undefined => {
+      if (!workspaceSlug) return undefined;
+      return this.workspaceUserInfo[workspaceSlug]?.role as TUserPermissions | EUserWorkspaceRoles | undefined;
+    }
+  );
+
+  /**
+   * @description Returns the project membership permission
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @returns { EUserPermissions | undefined }
+   */
+  protected getProjectRole = computedFn((workspaceSlug: string, projectId?: string): EUserPermissions | undefined => {
+    if (!workspaceSlug || !projectId) return undefined;
+    const projectRole = this.workspaceProjectsPermissions?.[workspaceSlug]?.[projectId];
+    if (!projectRole) return undefined;
+    const workspaceRole = this.workspaceUserInfo?.[workspaceSlug]?.role;
+    if (workspaceRole === EUserWorkspaceRoles.ADMIN) return EUserPermissions.ADMIN;
+    else return projectRole;
+  });
+
+  /**
+   * @description Returns the project permissions by workspace slug
+   * @param { string } workspaceSlug
+   * @returns { IUserProjectsRole }
+   */
+  getProjectRolesByWorkspaceSlug = computedFn((workspaceSlug: string): IUserProjectsRole => {
+    const projectPermissions = this.workspaceProjectsPermissions[workspaceSlug] || {};
+    return Object.keys(projectPermissions).reduce((acc, projectId) => {
+      const projectRole = this.getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
+      if (projectRole) {
+        acc[projectId] = projectRole;
+      }
+      return acc;
+    }, {} as IUserProjectsRole);
+  });
+
+  /**
+   * @description Returns the current project permissions
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @returns { EUserPermissions | undefined }
+   */
+  getProjectRoleByWorkspaceSlugAndProjectId = computedFn(
+    (workspaceSlug: string, projectId?: string): EUserPermissions | undefined =>
+      this.getProjectRole(workspaceSlug, projectId)
+  );
+
+  /**
+   * @description Fetches project-level entities that are not automatically loaded by the project wrapper.
+   * This is used when joining a project to ensure all necessary workspace-level project data is available.
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @returns { Promise<void> }
+   */
+  fetchWorkspaceLevelProjectEntities = (workspaceSlug: string, projectId: string): void => {
+    void this.store.projectRoot.project.fetchProjectDetails(workspaceSlug, projectId);
+  };
+
+  /**
+   * @description Returns whether the user has the permission to access a page
+   * @param { string } page
+   * @returns { boolean }
+   */
+  hasPageAccess = computedFn((workspaceSlug: string, key: string): boolean => {
+    if (!workspaceSlug || !key) return false;
+    const settings = WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.find((item) => item.key === key);
+    if (settings) {
+      return this.allowPermissions(settings.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug);
+    }
+    return false;
+  });
+
+  // action helpers
+  /**
+   * @description Returns whether the user has the permission to perform an action
+   * @param { TUserPermissions[] } allowPermissions
+   * @param { TUserPermissionsLevel } level
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @param { () => boolean } onPermissionAllowed
+   * @returns { boolean }
+   */
+  allowPermissions = (
+    allowPermissions: ETempUserRole[],
+    level: TUserPermissionsLevel,
+    workspaceSlug?: string,
+    projectId?: string,
+    onPermissionAllowed?: () => boolean
+  ): boolean => {
+    const { workspaceSlug: currentWorkspaceSlug, projectId: currentProjectId } = this.store.router;
+    if (!workspaceSlug) workspaceSlug = currentWorkspaceSlug;
+    if (!projectId) projectId = currentProjectId;
+
+    let currentUserRole: TUserPermissions | undefined = undefined;
+
+    if (level === EUserPermissionsLevel.WORKSPACE) {
+      currentUserRole = (workspaceSlug && this.getWorkspaceRoleByWorkspaceSlug(workspaceSlug)) as
+        | EUserPermissions
+        | undefined;
+    }
+
+    if (level === EUserPermissionsLevel.PROJECT) {
+      currentUserRole = (workspaceSlug &&
+        projectId &&
+        this.getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId)) as EUserPermissions | undefined;
+    }
+
+    if (typeof currentUserRole === "string") {
+      currentUserRole = parseInt(currentUserRole);
+    }
+
+    if (currentUserRole && typeof currentUserRole === "number" && allowPermissions.includes(currentUserRole)) {
+      if (onPermissionAllowed) {
+        return onPermissionAllowed();
+      } else {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  // actions
+  /**
+   * @description Fetches the user's workspace information
+   * @param { string } workspaceSlug
+   * @returns { Promise<IWorkspaceMemberMe | undefined> }
+   */
+  fetchUserWorkspaceInfo = async (workspaceSlug: string): Promise<IWorkspaceMemberMe> => {
+    try {
+      this.loader = true;
+      const response = await workspaceService.workspaceMemberMe(workspaceSlug);
+      if (response) {
+        runInAction(() => {
+          set(this.workspaceUserInfo, [workspaceSlug], response);
+          this.loader = false;
+        });
+      }
+      return response;
+    } catch (error) {
+      console.error("Error fetching user workspace information", error);
+      this.loader = false;
+      throw error;
+    }
+  };
+
+  /**
+   * @description Leaves a workspace
+   * @param { string } workspaceSlug
+   * @returns { Promise<void | undefined> }
+   */
+  leaveWorkspace = async (workspaceSlug: string): Promise<void> => {
+    try {
+      await userService.leaveWorkspace(workspaceSlug);
+      runInAction(() => {
+        unset(this.workspaceUserInfo, workspaceSlug);
+        unset(this.projectUserInfo, workspaceSlug);
+        unset(this.workspaceProjectsPermissions, workspaceSlug);
+      });
+    } catch (error) {
+      console.error("Error user leaving the workspace", error);
+      throw error;
+    }
+  };
+
+  /**
+   * @description Fetches the user's project information
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @returns { Promise<TProjectMembership | undefined> }
+   */
+  fetchUserProjectInfo = async (workspaceSlug: string, projectId: string): Promise<TProjectMembership> => {
+    try {
+      const response = await projectMemberService.projectMemberMe(workspaceSlug, projectId);
+      if (response) {
+        runInAction(() => {
+          set(this.projectUserInfo, [workspaceSlug, projectId], response);
+          set(this.workspaceProjectsPermissions, [workspaceSlug, projectId], response.role);
+        });
+      }
+      return response;
+    } catch (error) {
+      console.error("Error fetching user project information", error);
+      throw error;
+    }
+  };
+
+  /**
+   * @description Fetches the user's project permissions
+   * @param { string } workspaceSlug
+   * @returns { Promise<IUserProjectsRole | undefined> }
+   */
+  fetchUserProjectPermissions = async (workspaceSlug: string): Promise<IUserProjectsRole> => {
+    try {
+      const response = await workspaceService.getWorkspaceUserProjectsRole(workspaceSlug);
+      runInAction(() => {
+        set(this.workspaceProjectsPermissions, [workspaceSlug], response);
+      });
+      return response;
+    } catch (error) {
+      console.error("Error fetching user project permissions", error);
+      throw error;
+    }
+  };
+
+  /**
+   * @description Joins a project
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @returns { Promise<void> }
+   */
+  joinProject = async (workspaceSlug: string, projectId: string): Promise<void> => {
+    try {
+      const response = await userService.joinProject(workspaceSlug, [projectId]);
+      const projectMemberRole = this.getWorkspaceRoleByWorkspaceSlug(workspaceSlug) ?? EUserPermissions.MEMBER;
+      if (response) {
+        runInAction(() => {
+          set(this.workspaceProjectsPermissions, [workspaceSlug, projectId], projectMemberRole);
+        });
+        void this.fetchWorkspaceLevelProjectEntities(workspaceSlug, projectId);
+      }
+    } catch (error) {
+      console.error("Error user joining the project", error);
+      throw error;
+    }
+  };
+
+  /**
+   * @description Leaves a project
+   * @param { string } workspaceSlug
+   * @param { string } projectId
+   * @returns { Promise<void> }
+   */
+  leaveProject = async (workspaceSlug: string, projectId: string): Promise<void> => {
+    try {
+      await userService.leaveProject(workspaceSlug, projectId);
+      runInAction(() => {
+        unset(this.workspaceProjectsPermissions, [workspaceSlug, projectId]);
+        unset(this.projectUserInfo, [workspaceSlug, projectId]);
+        unset(this.store.projectRoot.project.projectMap, [projectId]);
+      });
+    } catch (error) {
+      console.error("Error user leaving the project", error);
+      throw error;
+    }
+  };
+}
+
+// Aliases so consumers can keep using UserPermissionStore / IUserPermissionStore
+export type IUserPermissionStore = IBaseUserPermissionStore;
+export { BaseUserPermissionStore as UserPermissionStore };
diff --git a/apps/web/core/store/user/index.ts b/apps/web/core/store/user/index.ts
new file mode 100644
index 0000000..74eb6f0
--- /dev/null
+++ b/apps/web/core/store/user/index.ts
@@ -0,0 +1,307 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cloneDeep, set } from "lodash-es";
+import { action, makeObservable, observable, runInAction, computed } from "mobx";
+// plane imports
+import { EUserPermissions, API_BASE_URL } from "@plane/constants";
+import type { IUser, TUserPermissions } from "@plane/types";
+// plane web imports
+import type { RootStore } from "@/store/root.store";
+import type { IUserPermissionStore } from "@/store/user/base-permissions.store";
+import { UserPermissionStore } from "@/store/user/base-permissions.store";
+// services
+import { AuthService } from "@/services/auth.service";
+import { UserService } from "@/services/user.service";
+// stores
+import type { IAccountStore } from "@/store/user/account.store";
+import type { IUserProfileStore } from "@/store/user/profile.store";
+import { ProfileStore } from "@/store/user/profile.store";
+// local imports
+import type { IUserSettingsStore } from "./settings.store";
+import { UserSettingsStore } from "./settings.store";
+
+type TUserErrorStatus = {
+  status: string;
+  message: string;
+};
+
+export interface IUserStore {
+  // observables
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  error: TUserErrorStatus | undefined;
+  data: IUser | undefined;
+  // store observables
+  userProfile: IUserProfileStore;
+  userSettings: IUserSettingsStore;
+  accounts: Record<string, IAccountStore>;
+  permission: IUserPermissionStore;
+  // actions
+  fetchCurrentUser: () => Promise<IUser | undefined>;
+  updateCurrentUser: (data: Partial<IUser>) => Promise<IUser | undefined>;
+  handleSetPassword: (csrfToken: string, data: { password: string }) => Promise<IUser | undefined>;
+  deactivateAccount: () => Promise<void>;
+  changePassword: (
+    csrfToken: string,
+    payload: { old_password?: string; new_password: string }
+  ) => Promise<IUser | undefined>;
+  reset: () => void;
+  signOut: () => Promise<void>;
+  // computed
+  canPerformAnyCreateAction: boolean;
+  projectsWithCreatePermissions: { [projectId: string]: number } | null;
+}
+
+export class UserStore implements IUserStore {
+  // observables
+  isAuthenticated: boolean = false;
+  isLoading: boolean = false;
+  error: TUserErrorStatus | undefined = undefined;
+  data: IUser | undefined = undefined;
+  // store observables
+  userProfile: IUserProfileStore;
+  userSettings: IUserSettingsStore;
+  accounts: Record<string, IAccountStore> = {};
+  permission: IUserPermissionStore;
+  // service
+  userService: UserService;
+  authService: AuthService;
+
+  constructor(private store: RootStore) {
+    // stores
+    this.userProfile = new ProfileStore(store);
+    this.userSettings = new UserSettingsStore();
+    this.permission = new UserPermissionStore(store);
+    // service
+    this.userService = new UserService();
+    this.authService = new AuthService();
+    // observables
+    makeObservable(this, {
+      // observables
+      isAuthenticated: observable.ref,
+      isLoading: observable.ref,
+      error: observable,
+      // model observables
+      data: observable,
+      userProfile: observable,
+      userSettings: observable,
+      accounts: observable,
+      permission: observable,
+      // actions
+      fetchCurrentUser: action,
+      updateCurrentUser: action,
+      handleSetPassword: action,
+      deactivateAccount: action,
+      changePassword: action,
+      reset: action,
+      signOut: action,
+      // computed
+      canPerformAnyCreateAction: computed,
+      projectsWithCreatePermissions: computed,
+    });
+  }
+
+  /**
+   * @description fetches the current user
+   * @returns {Promise<IUser>}
+   */
+  fetchCurrentUser = async (): Promise<IUser> => {
+    try {
+      runInAction(() => {
+        this.isLoading = true;
+        this.error = undefined;
+      });
+      const user = await this.userService.currentUser();
+      if (user && user?.id) {
+        await Promise.all([
+          this.userProfile.fetchUserProfile(),
+          this.userSettings.fetchCurrentUserSettings(),
+          this.store.workspaceRoot.fetchWorkspaces(),
+        ]);
+        runInAction(() => {
+          this.data = user;
+          this.isLoading = false;
+          this.isAuthenticated = true;
+        });
+      } else
+        runInAction(() => {
+          this.data = user;
+          this.isLoading = false;
+          this.isAuthenticated = false;
+        });
+      return user;
+    } catch (error) {
+      runInAction(() => {
+        this.isLoading = false;
+        this.isAuthenticated = false;
+        this.error = {
+          status: "user-fetch-error",
+          message: "Failed to fetch current user",
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description updates the current user
+   * @param data
+   * @returns {Promise<IUser>}
+   */
+  updateCurrentUser = async (data: Partial<IUser>): Promise<IUser> => {
+    const currentUserData = cloneDeep(this.data);
+    try {
+      if (currentUserData) {
+        Object.keys(data).forEach((key: string) => {
+          const userKey: keyof IUser = key as keyof IUser;
+          if (this.data) set(this.data, userKey, data[userKey]);
+        });
+      }
+      const user = await this.userService.updateUser(data);
+      if (user && this.data) {
+        runInAction(() => {
+          Object.keys(user).forEach((key: string) => {
+            const userKey: keyof IUser = key as keyof IUser;
+            if (this.data) set(this.data, userKey, user[userKey]);
+          });
+        });
+      }
+      return user;
+    } catch (error) {
+      if (currentUserData) {
+        Object.keys(currentUserData).forEach((key: string) => {
+          const userKey: keyof IUser = key as keyof IUser;
+          if (this.data) set(this.data, userKey, currentUserData[userKey]);
+        });
+      }
+      runInAction(() => {
+        this.error = {
+          status: "user-update-error",
+          message: "Failed to update current user",
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description update the user password
+   * @param data
+   * @returns {Promise<IUser>}
+   */
+  handleSetPassword = async (csrfToken: string, data: { password: string }): Promise<IUser | undefined> => {
+    const currentUserData = cloneDeep(this.data);
+    try {
+      if (currentUserData && currentUserData.is_password_autoset && this.data) {
+        const user = await this.authService.setPassword(csrfToken, { password: data.password });
+        set(this.data, ["is_password_autoset"], false);
+        return user;
+      }
+      return undefined;
+    } catch (error) {
+      if (this.data) set(this.data, ["is_password_autoset"], true);
+      runInAction(() => {
+        this.error = {
+          status: "user-update-error",
+          message: "Failed to update current user",
+        };
+      });
+      throw error;
+    }
+  };
+
+  changePassword = async (
+    csrfToken: string,
+    payload: {
+      old_password?: string;
+      new_password: string;
+    }
+  ): Promise<IUser | undefined> => {
+    try {
+      const user = await this.userService.changePassword(csrfToken, payload);
+      if (this.data) set(this.data, ["is_password_autoset"], false);
+      return user;
+    } catch (error) {
+      console.log(error);
+      throw error;
+    }
+  };
+
+  /**
+   * @description deactivates the current user
+   * @returns {Promise<void>}
+   */
+  deactivateAccount = async (): Promise<void> => {
+    await this.userService.deactivateAccount();
+    this.store.resetOnSignOut();
+  };
+
+  /**
+   * @description resets the user store
+   * @returns {void}
+   */
+  reset = (): void => {
+    runInAction(() => {
+      this.isAuthenticated = false;
+      this.isLoading = false;
+      this.error = undefined;
+      this.data = undefined;
+      this.userProfile = new ProfileStore(this.store);
+      this.userSettings = new UserSettingsStore();
+      this.permission = new UserPermissionStore(this.store);
+    });
+  };
+
+  /**
+   * @description signs out the current user
+   * @returns {Promise<void>}
+   */
+  signOut = async (): Promise<void> => {
+    await this.authService.signOut(API_BASE_URL);
+    this.store.resetOnSignOut();
+  };
+
+  // helper actions
+  /**
+   * @description fetches the projects with write permissions
+   * @returns {{[projectId: string]: number} || null}
+   */
+  fetchProjectsWithCreatePermissions = (): { [key: string]: TUserPermissions } => {
+    const { workspaceSlug } = this.store.router;
+
+    const allWorkspaceProjectRoles = this.permission.getProjectRolesByWorkspaceSlug(workspaceSlug || "");
+
+    const userPermissions =
+      (allWorkspaceProjectRoles &&
+        Object.keys(allWorkspaceProjectRoles)
+          .filter((key) => allWorkspaceProjectRoles[key] >= EUserPermissions.MEMBER)
+          .reduce(
+            (res: { [projectId: string]: number }, key: string) => ((res[key] = allWorkspaceProjectRoles[key]), res),
+            {}
+          )) ||
+      null;
+
+    return userPermissions;
+  };
+
+  /**
+   * @description returns projects where user has permissions
+   * @returns {{[projectId: string]: number} || null}
+   */
+  get projectsWithCreatePermissions() {
+    return this.fetchProjectsWithCreatePermissions();
+  }
+
+  /**
+   * @description returns true if user has permissions to write in any project
+   * @returns {boolean}
+   */
+  get canPerformAnyCreateAction() {
+    const filteredProjects = this.fetchProjectsWithCreatePermissions();
+    return filteredProjects ? Object.keys(filteredProjects).length > 0 : false;
+  }
+}
diff --git a/apps/web/core/store/user/profile.store.ts b/apps/web/core/store/user/profile.store.ts
new file mode 100644
index 0000000..d9024c4
--- /dev/null
+++ b/apps/web/core/store/user/profile.store.ts
@@ -0,0 +1,256 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cloneDeep, set } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+// plane imports
+import { setLanguage } from "@plane/i18n";
+import type { TLanguage } from "@plane/i18n";
+// types
+import type { IUserTheme, TUserProfile } from "@plane/types";
+import { EStartOfTheWeek } from "@plane/types";
+// services
+import { UserService } from "@/services/user.service";
+// store
+import type { CoreRootStore } from "../root.store";
+
+type TError = {
+  status: string;
+  message: string;
+};
+
+export interface IUserProfileStore {
+  // observables
+  isLoading: boolean;
+  error: TError | undefined;
+  data: TUserProfile;
+  // actions
+  fetchUserProfile: () => Promise<TUserProfile | undefined>;
+  updateUserProfile: (data: Partial<TUserProfile>) => Promise<TUserProfile | undefined>;
+  finishUserOnboarding: () => Promise<void>;
+  updateTourCompleted: () => Promise<TUserProfile | undefined>;
+  updateUserTheme: (data: Partial<IUserTheme>) => Promise<TUserProfile | undefined>;
+}
+
+export class ProfileStore implements IUserProfileStore {
+  isLoading: boolean = false;
+  error: TError | undefined = undefined;
+  data: TUserProfile = {
+    id: undefined,
+    user: undefined,
+    role: undefined,
+    last_workspace_id: undefined,
+    theme: {
+      theme: undefined,
+      primary: undefined,
+      background: undefined,
+      darkPalette: false,
+    },
+    onboarding_step: {
+      workspace_join: false,
+      profile_complete: false,
+      workspace_create: false,
+      workspace_invite: false,
+    },
+    is_onboarded: false,
+    is_tour_completed: false,
+    use_case: undefined,
+    billing_address_country: undefined,
+    billing_address: undefined,
+    has_billing_address: false,
+    has_marketing_email_consent: false,
+    created_at: "",
+    updated_at: "",
+    language: "",
+    start_of_the_week: EStartOfTheWeek.SUNDAY,
+  };
+
+  // services
+  userService: UserService;
+
+  constructor(public store: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      isLoading: observable.ref,
+      error: observable,
+      data: observable,
+      // actions
+      fetchUserProfile: action,
+      updateUserProfile: action,
+      updateTourCompleted: action,
+      updateUserTheme: action,
+    });
+    // services
+    this.userService = new UserService();
+  }
+
+  // helper action
+  mutateUserProfile = (data: Partial<TUserProfile>) => {
+    if (!data) return;
+    Object.entries(data).forEach(([key, value]) => {
+      if (key in this.data) set(this.data, key, value);
+    });
+  };
+
+  // actions
+  /**
+   * @description fetches user profile information
+   * @returns {Promise<TUserProfile | undefined>}
+   */
+  fetchUserProfile = async (): Promise<TUserProfile | undefined> => {
+    try {
+      runInAction(() => {
+        this.isLoading = true;
+        this.error = undefined;
+      });
+      const userProfile = await this.userService.getCurrentUserProfile();
+      runInAction(() => {
+        this.isLoading = false;
+        this.data = userProfile;
+      });
+      if (userProfile.language) {
+        void setLanguage(userProfile.language as TLanguage);
+      }
+      return userProfile;
+    } catch (error) {
+      runInAction(() => {
+        this.isLoading = false;
+        this.error = {
+          status: "user-profile-fetch-error",
+          message: "Failed to fetch user profile",
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description updated the user profile information
+   * @param {Partial<TUserProfile>} data
+   * @returns {Promise<TUserProfile | undefined>}
+   */
+  updateUserProfile = async (data: Partial<TUserProfile>): Promise<TUserProfile | undefined> => {
+    const currentUserProfileData = this.data;
+    try {
+      if (currentUserProfileData) {
+        this.mutateUserProfile(data);
+      }
+      if (data.language) {
+        void setLanguage(data.language as TLanguage);
+      }
+      const userProfile = await this.userService.updateCurrentUserProfile(data);
+      return userProfile;
+    } catch {
+      if (currentUserProfileData) {
+        this.mutateUserProfile(currentUserProfileData);
+      }
+      runInAction(() => {
+        this.error = {
+          status: "user-profile-update-error",
+          message: "Failed to update user profile",
+        };
+      });
+    }
+  };
+
+  /**
+   * @description finishes the user onboarding
+   * @returns { void }
+   */
+  finishUserOnboarding = async (): Promise<void> => {
+    try {
+      const firstWorkspace = Object.values(this.store.workspaceRoot.workspaces ?? {})?.[0];
+      const dataToUpdate: Partial<TUserProfile> = {
+        onboarding_step: {
+          profile_complete: true,
+          workspace_join: true,
+          workspace_create: true,
+          workspace_invite: true,
+        },
+        last_workspace_id: firstWorkspace?.id,
+      };
+
+      // update user onboarding steps
+      await this.userService.updateCurrentUserProfile(dataToUpdate);
+
+      // update user onboarding status
+      await this.userService.updateUserOnBoard();
+
+      // Wait for user settings to be refreshed with cache-busting before updating onboarding status
+      await Promise.all([
+        this.fetchUserProfile(),
+        this.store.user.userSettings.fetchCurrentUserSettings(true), // Cache-busting enabled
+      ]);
+
+      // Only after settings are refreshed, update the user profile store to mark as onboarded
+      runInAction(() => {
+        this.mutateUserProfile({ ...dataToUpdate, is_onboarded: true });
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.error = {
+          status: "user-profile-onboard-finish-error",
+          message: "Failed to finish user onboarding",
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description updates the user tour completed status
+   * @returns @returns {Promise<TUserProfile | undefined>}
+   */
+  updateTourCompleted = async () => {
+    const isUserProfileTourCompleted = this.data.is_tour_completed || false;
+    try {
+      this.mutateUserProfile({ is_tour_completed: true });
+      const userProfile = await this.userService.updateUserTourCompleted();
+      return userProfile;
+    } catch (error) {
+      runInAction(() => {
+        this.mutateUserProfile({ is_tour_completed: isUserProfileTourCompleted });
+        this.error = {
+          status: "user-profile-tour-complete-error",
+          message: "Failed to update user profile is_tour_completed",
+        };
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * @description updates the user theme
+   * @returns @returns {Promise<TUserProfile | undefined>}
+   */
+  updateUserTheme = async (data: Partial<IUserTheme>) => {
+    const currentProfileTheme = cloneDeep(this.data.theme);
+    try {
+      runInAction(() => {
+        Object.keys(data).forEach((key) => {
+          const dataKey = key as keyof IUserTheme;
+          if (this.data.theme) set(this.data.theme, dataKey, data[dataKey]);
+        });
+      });
+      const userProfile = await this.userService.updateCurrentUserProfile({
+        theme: this.data.theme,
+      });
+      return userProfile;
+    } catch (error) {
+      runInAction(() => {
+        Object.keys(data).forEach((key: string) => {
+          const userKey: keyof IUserTheme = key as keyof IUserTheme;
+          if (currentProfileTheme) set(this.data.theme, userKey, currentProfileTheme[userKey]);
+        });
+        this.error = {
+          status: "user-profile-theme-update-error",
+          message: "Failed to update user profile theme",
+        };
+      });
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/user/settings.store.ts b/apps/web/core/store/user/settings.store.ts
new file mode 100644
index 0000000..ff504d1
--- /dev/null
+++ b/apps/web/core/store/user/settings.store.ts
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, observable, runInAction } from "mobx";
+// plane imports
+import type { IUserSettings } from "@plane/types";
+// services
+import { UserService } from "@/services/user.service";
+
+type TError = {
+  status: string;
+  message: string;
+};
+
+export interface IUserSettingsStore {
+  // observables
+  isLoading: boolean;
+  error: TError | undefined;
+  data: IUserSettings;
+  sidebarCollapsed: boolean;
+  isScrolled: boolean;
+  // actions
+  fetchCurrentUserSettings: (bustCache?: boolean) => Promise<IUserSettings | undefined>;
+  toggleSidebar: (collapsed?: boolean) => void;
+  toggleIsScrolled: (isScrolled?: boolean) => void;
+}
+
+export class UserSettingsStore implements IUserSettingsStore {
+  // observables
+  isLoading: boolean = false;
+  sidebarCollapsed: boolean = true;
+  error: TError | undefined = undefined;
+  isScrolled: boolean = false;
+  data: IUserSettings = {
+    id: undefined,
+    email: undefined,
+    workspace: {
+      last_workspace_id: undefined,
+      last_workspace_slug: undefined,
+      last_workspace_name: undefined,
+      last_workspace_logo: undefined,
+      fallback_workspace_id: undefined,
+      fallback_workspace_slug: undefined,
+      invites: undefined,
+    },
+  };
+  // services
+  userService: UserService;
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      isLoading: observable.ref,
+      error: observable,
+      data: observable,
+      sidebarCollapsed: observable.ref,
+      isScrolled: observable.ref,
+      // actions
+      fetchCurrentUserSettings: action,
+      toggleSidebar: action,
+      toggleIsScrolled: action,
+    });
+    // services
+    this.userService = new UserService();
+  }
+
+  // actions
+  toggleSidebar = (collapsed?: boolean) => {
+    this.sidebarCollapsed = collapsed ?? !this.sidebarCollapsed;
+  };
+
+  toggleIsScrolled = (isScrolled?: boolean) => {
+    this.isScrolled = isScrolled ?? !this.isScrolled;
+  };
+
+  // actions
+  /**
+   * @description fetches user profile information
+   * @returns {Promise<IUserSettings | undefined>}
+   */
+  fetchCurrentUserSettings = async (bustCache: boolean = false) => {
+    try {
+      runInAction(() => {
+        this.isLoading = true;
+        this.error = undefined;
+      });
+      const userSettings = await this.userService.currentUserSettings(bustCache);
+      runInAction(() => {
+        this.isLoading = false;
+        this.data = userSettings;
+      });
+      return userSettings;
+    } catch (error) {
+      runInAction(() => {
+        this.isLoading = false;
+        this.error = {
+          status: "error",
+          message: "Failed to fetch user settings",
+        };
+      });
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/workspace/api-token.store.ts b/apps/web/core/store/workspace/api-token.store.ts
new file mode 100644
index 0000000..03e95b3
--- /dev/null
+++ b/apps/web/core/store/workspace/api-token.store.ts
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, observable, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import { APITokenService } from "@plane/services";
+import type { IApiToken } from "@plane/types";
+// services
+// store
+import type { CoreRootStore } from "../root.store";
+
+export interface IApiTokenStore {
+  // observables
+  apiTokens: Record<string, IApiToken> | null;
+  // computed actions
+  getApiTokenById: (apiTokenId: string) => IApiToken | null;
+  // fetch actions
+  fetchApiTokens: () => Promise<IApiToken[]>;
+  fetchApiTokenDetails: (tokenId: string) => Promise<IApiToken>;
+  // crud actions
+  createApiToken: (data: Partial<IApiToken>) => Promise<IApiToken>;
+  deleteApiToken: (tokenId: string) => Promise<void>;
+}
+
+export class ApiTokenStore implements IApiTokenStore {
+  // observables
+  apiTokens: Record<string, IApiToken> | null = null;
+  // services
+  apiTokenService;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      apiTokens: observable,
+      // fetch actions
+      fetchApiTokens: action,
+      fetchApiTokenDetails: action,
+      // CRUD actions
+      createApiToken: action,
+      deleteApiToken: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // services
+    this.apiTokenService = new APITokenService();
+  }
+
+  /**
+   * get API token by id
+   * @param apiTokenId
+   */
+  getApiTokenById = computedFn((apiTokenId: string) => {
+    if (!this.apiTokens) return null;
+    return this.apiTokens[apiTokenId] || null;
+  });
+
+  /**
+   * fetch all the API tokens
+   */
+  fetchApiTokens = async () =>
+    await this.apiTokenService.list().then((response) => {
+      const apiTokensObject: { [apiTokenId: string]: IApiToken } = response.reduce((accumulator, currentWebhook) => {
+        if (currentWebhook && currentWebhook.id) {
+          return { ...accumulator, [currentWebhook.id]: currentWebhook };
+        }
+        return accumulator;
+      }, {});
+      runInAction(() => {
+        this.apiTokens = apiTokensObject;
+      });
+      return response;
+    });
+
+  /**
+   * fetch API token details using token id
+   * @param tokenId
+   */
+  fetchApiTokenDetails = async (tokenId: string) =>
+    await this.apiTokenService.retrieve(tokenId).then((response) => {
+      runInAction(() => {
+        this.apiTokens = { ...this.apiTokens, [response.id]: response };
+      });
+      return response;
+    });
+
+  /**
+   * create API token using data
+   * @param data
+   */
+  createApiToken = async (data: Partial<IApiToken>) =>
+    await this.apiTokenService.create(data).then((response) => {
+      runInAction(() => {
+        this.apiTokens = { ...this.apiTokens, [response.id]: response };
+      });
+      return response;
+    });
+
+  /**
+   * delete API token using token id
+   * @param tokenId
+   */
+  deleteApiToken = async (tokenId: string) =>
+    await this.apiTokenService.destroy(tokenId).then(() => {
+      const updatedApiTokens = { ...this.apiTokens };
+      delete updatedApiTokens[tokenId];
+      runInAction(() => {
+        this.apiTokens = updatedApiTokens;
+      });
+    });
+}
diff --git a/apps/web/core/store/workspace/home.ts b/apps/web/core/store/workspace/home.ts
new file mode 100644
index 0000000..de4099d
--- /dev/null
+++ b/apps/web/core/store/workspace/home.ts
@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { orderBy, clone, set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// plane imports
+import type { THomeWidgetKeys, TWidgetEntityData } from "@plane/types";
+// plane web services
+import { WorkspaceService } from "@/services/workspace.service";
+// store
+import type { IWorkspaceLinkStore } from "./link.store";
+import { WorkspaceLinkStore } from "./link.store";
+
+export interface IHomeStore {
+  // observables
+  loading: boolean;
+  showWidgetSettings: boolean;
+  widgetsMap: Record<string, TWidgetEntityData>;
+  widgets: THomeWidgetKeys[];
+  // computed
+  isAnyWidgetEnabled: boolean;
+  orderedWidgets: THomeWidgetKeys[];
+  //stores
+  quickLinks: IWorkspaceLinkStore;
+  // actions
+  toggleWidgetSettings: (value?: boolean) => void;
+  fetchWidgets: (workspaceSlug: string) => Promise<void>;
+  reorderWidget: (
+    workspaceSlug: string,
+    widgetKey: string,
+    destinationId: string,
+    edge: string | undefined
+  ) => Promise<void>;
+  toggleWidget: (workspaceSlug: string, widgetKey: string, is_enabled: boolean) => void;
+}
+
+export class HomeStore implements IHomeStore {
+  // observables
+  showWidgetSettings = false;
+  loading = false;
+  widgetsMap: Record<string, TWidgetEntityData> = {};
+  widgets: THomeWidgetKeys[] = [];
+  // stores
+  quickLinks: IWorkspaceLinkStore;
+  // services
+  workspaceService: WorkspaceService;
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      loading: observable,
+      showWidgetSettings: observable,
+      widgetsMap: observable,
+      widgets: observable,
+      // computed
+      isAnyWidgetEnabled: computed,
+      orderedWidgets: computed,
+      // actions
+      toggleWidgetSettings: action,
+      fetchWidgets: action,
+      reorderWidget: action,
+      toggleWidget: action,
+    });
+    // services
+    this.workspaceService = new WorkspaceService();
+
+    // stores
+    this.quickLinks = new WorkspaceLinkStore();
+  }
+
+  get isAnyWidgetEnabled() {
+    return Object.values(this.widgetsMap).some((widget) => widget.is_enabled);
+  }
+
+  get orderedWidgets() {
+    return orderBy(Object.values(this.widgetsMap), "sort_order", "desc").map((widget) => widget.key);
+  }
+
+  toggleWidgetSettings = (value?: boolean) => {
+    this.showWidgetSettings = value !== undefined ? value : !this.showWidgetSettings;
+  };
+
+  fetchWidgets = async (workspaceSlug: string) => {
+    try {
+      this.loading = true;
+      const widgets = await this.workspaceService.fetchWorkspaceWidgets(workspaceSlug);
+      runInAction(() => {
+        this.widgets = orderBy(Object.values(widgets), "sort_order", "desc").map((widget) => widget.key);
+        widgets.forEach((widget) => {
+          this.widgetsMap[widget.key] = widget;
+        });
+        this.loading = false;
+      });
+    } catch (error) {
+      console.error("Failed to fetch widgets");
+      this.loading = false;
+      throw error;
+    }
+  };
+
+  toggleWidget = async (workspaceSlug: string, widgetKey: string, is_enabled: boolean) => {
+    try {
+      await this.workspaceService.updateWorkspaceWidget(workspaceSlug, widgetKey, {
+        is_enabled,
+      });
+      runInAction(() => {
+        this.widgetsMap[widgetKey].is_enabled = is_enabled;
+      });
+    } catch (error) {
+      console.error("Failed to toggle widget");
+      throw error;
+    }
+  };
+
+  reorderWidget = async (workspaceSlug: string, widgetKey: string, destinationId: string, edge: string | undefined) => {
+    const sortOrderBeforeUpdate = clone(this.widgetsMap[widgetKey]?.sort_order);
+    try {
+      let resultSequence = 10000;
+      if (edge) {
+        const sortedIds = orderBy(Object.values(this.widgetsMap), "sort_order", "desc").map((widget) => widget.key);
+        const destinationSequence = this.widgetsMap[destinationId]?.sort_order || undefined;
+        if (destinationSequence) {
+          const destinationIndex = sortedIds.findIndex((id) => id === destinationId);
+          if (edge === "reorder-above") {
+            const prevSequence = this.widgetsMap[sortedIds[destinationIndex - 1]]?.sort_order || undefined;
+            if (prevSequence) {
+              resultSequence = (destinationSequence + prevSequence) / 2;
+            } else {
+              resultSequence = destinationSequence + resultSequence;
+            }
+          } else {
+            resultSequence = destinationSequence - resultSequence;
+          }
+        }
+      }
+      runInAction(() => {
+        set(this.widgetsMap, [widgetKey, "sort_order"], resultSequence);
+      });
+      await this.workspaceService.updateWorkspaceWidget(workspaceSlug, widgetKey, {
+        sort_order: resultSequence,
+      });
+    } catch (error) {
+      console.error("Failed to move widget");
+      runInAction(() => {
+        set(this.widgetsMap, [widgetKey, "sort_order"], sortOrderBeforeUpdate);
+      });
+      throw error;
+    }
+  };
+}
diff --git a/apps/web/core/store/workspace/index.ts b/apps/web/core/store/workspace/index.ts
new file mode 100644
index 0000000..27bb470
--- /dev/null
+++ b/apps/web/core/store/workspace/index.ts
@@ -0,0 +1,395 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { clone, set } from "lodash-es";
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+// types
+import { computedFn } from "mobx-utils";
+import type {
+  IWorkspaceSidebarNavigationItem,
+  IWorkspace,
+  IWorkspaceSidebarNavigation,
+  IWorkspaceUserPropertiesResponse,
+} from "@plane/types";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+// store
+import type { CoreRootStore } from "@/store/root.store";
+// sub-stores
+import type { IApiTokenStore } from "./api-token.store";
+import { ApiTokenStore } from "./api-token.store";
+import type { IHomeStore } from "./home";
+import { HomeStore } from "./home";
+import type { IWebhookStore } from "./webhook.store";
+import { WebhookStore } from "./webhook.store";
+
+export interface IWorkspaceRootStore {
+  loader: boolean;
+  // observables
+  workspaces: Record<string, IWorkspace>;
+  // computed
+  currentWorkspace: IWorkspace | null;
+  workspacesCreatedByCurrentUser: IWorkspace[] | null;
+  navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation>;
+  projectNavigationPreferencesMap: Record<string, IWorkspaceUserPropertiesResponse>;
+  getWorkspaceRedirectionUrl: () => string;
+  // computed actions
+  getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
+  getWorkspaceById: (workspaceId: string) => IWorkspace | null;
+  // fetch actions
+  fetchWorkspaces: () => Promise<IWorkspace[]>;
+  // crud actions
+  createWorkspace: (data: Partial<IWorkspace>) => Promise<IWorkspace>;
+  updateWorkspace: (workspaceSlug: string, data: Partial<IWorkspace>) => Promise<IWorkspace>;
+  updateWorkspaceLogo: (workspaceSlug: string, logoURL: string) => void;
+  deleteWorkspace: (workspaceSlug: string) => Promise<void>;
+  fetchSidebarNavigationPreferences: (workspaceSlug: string) => Promise<void>;
+  updateSidebarPreference: (
+    workspaceSlug: string,
+    key: string,
+    data: Partial<IWorkspaceSidebarNavigationItem>
+  ) => Promise<IWorkspaceSidebarNavigationItem | undefined>;
+  updateBulkSidebarPreferences: (
+    workspaceSlug: string,
+    data: Array<{ key: string; is_pinned: boolean; sort_order: number }>
+  ) => Promise<void>;
+  getNavigationPreferences: (workspaceSlug: string) => IWorkspaceSidebarNavigation | undefined;
+  getProjectNavigationPreferences: (workspaceSlug: string) => IWorkspaceUserPropertiesResponse | undefined;
+  fetchProjectNavigationPreferences: (workspaceSlug: string) => Promise<void>;
+  updateProjectNavigationPreferences: (
+    workspaceSlug: string,
+    data: Partial<IWorkspaceUserPropertiesResponse>
+  ) => Promise<void>;
+  mutateWorkspaceMembersActivity: (workspaceSlug: string) => Promise<void>;
+  // sub-stores
+  webhook: IWebhookStore;
+  apiToken: IApiTokenStore;
+  home: IHomeStore;
+}
+
+export class BaseWorkspaceRootStore implements IWorkspaceRootStore {
+  loader: boolean = false;
+  // observables
+  workspaces: Record<string, IWorkspace> = {};
+  navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation> = {};
+  projectNavigationPreferencesMap: Record<string, IWorkspaceUserPropertiesResponse> = {};
+  // services
+  workspaceService;
+  // root store
+  router;
+  user;
+  home;
+  // sub-stores
+  webhook: IWebhookStore;
+  apiToken: IApiTokenStore;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      // observables
+      workspaces: observable,
+      navigationPreferencesMap: observable,
+      projectNavigationPreferencesMap: observable,
+      // computed
+      currentWorkspace: computed,
+      workspacesCreatedByCurrentUser: computed,
+      // computed actions
+      getWorkspaceBySlug: action,
+      getWorkspaceById: action,
+      // actions
+      fetchWorkspaces: action,
+      createWorkspace: action,
+      updateWorkspace: action,
+      updateWorkspaceLogo: action,
+      deleteWorkspace: action,
+      fetchSidebarNavigationPreferences: action,
+      updateSidebarPreference: action,
+      updateBulkSidebarPreferences: action,
+      fetchProjectNavigationPreferences: action,
+      updateProjectNavigationPreferences: action,
+    });
+
+    // services
+    this.workspaceService = new WorkspaceService();
+    // root store
+    this.router = _rootStore.router;
+    this.user = _rootStore.user;
+    this.home = new HomeStore();
+    // sub-stores
+    this.webhook = new WebhookStore(_rootStore);
+    this.apiToken = new ApiTokenStore(_rootStore);
+  }
+
+  /**
+   * get the workspace redirection url based on the last and fallback workspace_slug
+   */
+  getWorkspaceRedirectionUrl = () => {
+    let redirectionRoute = "/create-workspace";
+    // validate the last and fallback workspace_slug
+    const currentWorkspaceSlug =
+      this.user.userSettings?.data?.workspace?.last_workspace_slug ||
+      this.user.userSettings?.data?.workspace?.fallback_workspace_slug;
+
+    // validate the current workspace_slug is available in the user's workspace list
+    const isCurrentWorkspaceValid = Object.values(this.workspaces || {}).findIndex(
+      (workspace) => workspace.slug === currentWorkspaceSlug
+    );
+
+    if (isCurrentWorkspaceValid >= 0) redirectionRoute = `/${currentWorkspaceSlug}`;
+    return redirectionRoute;
+  };
+
+  /**
+   * computed value of current workspace based on workspace slug saved in the query store
+   */
+  get currentWorkspace() {
+    const workspaceSlug = this.router.workspaceSlug;
+    if (!workspaceSlug) return null;
+    const workspaceDetails = Object.values(this.workspaces ?? {})?.find((w) => w.slug === workspaceSlug);
+    return workspaceDetails || null;
+  }
+
+  /**
+   * computed value of all the workspaces created by the current logged in user
+   */
+  get workspacesCreatedByCurrentUser() {
+    if (!this.workspaces) return null;
+    const user = this.user.data;
+    if (!user) return null;
+    const userWorkspaces = Object.values(this.workspaces ?? {})?.filter((w) => w.created_by === user?.id);
+    return userWorkspaces || null;
+  }
+
+  /**
+   * get workspace info from the array of workspaces in the store using workspace slug
+   * @param workspaceSlug
+   */
+  getWorkspaceBySlug = (workspaceSlug: string) =>
+    Object.values(this.workspaces ?? {})?.find((w) => w.slug == workspaceSlug) || null;
+
+  /**
+   * get workspace info from the array of workspaces in the store using workspace id
+   * @param workspaceId
+   */
+  getWorkspaceById = (workspaceId: string) => this.workspaces?.[workspaceId] || null; // TODO: use undefined instead of null
+
+  /**
+   * fetch user workspaces from API
+   */
+  fetchWorkspaces = async () => {
+    this.loader = true;
+    try {
+      const workspaceResponse = await this.workspaceService.userWorkspaces();
+      runInAction(() => {
+        workspaceResponse.forEach((workspace) => {
+          set(this.workspaces, [workspace.id], workspace);
+        });
+      });
+      return workspaceResponse;
+    } finally {
+      this.loader = false;
+    }
+  };
+
+  /**
+   * create workspace using the workspace data
+   * @param data
+   */
+  createWorkspace = async (data: Partial<IWorkspace>) =>
+    await this.workspaceService.createWorkspace(data).then((response) => {
+      runInAction(() => {
+        this.workspaces = set(this.workspaces, response.id, response);
+      });
+      return response;
+    });
+
+  /**
+   * update workspace using the workspace slug and new workspace data
+   * @param workspaceSlug
+   * @param data
+   */
+  updateWorkspace = async (workspaceSlug: string, data: Partial<IWorkspace>) =>
+    await this.workspaceService.updateWorkspace(workspaceSlug, data).then((res) => {
+      if (res && res.id) {
+        runInAction(() => {
+          Object.keys(data).forEach((key) => {
+            set(this.workspaces, [res.id, key], data[key as keyof IWorkspace]);
+          });
+        });
+      }
+      return res;
+    });
+
+  /**
+   * update workspace using the workspace slug and new workspace data
+   * @param {string} workspaceSlug
+   * @param {string} logoURL
+   */
+  updateWorkspaceLogo = (workspaceSlug: string, logoURL: string) => {
+    const workspaceId = this.getWorkspaceBySlug(workspaceSlug)?.id;
+    if (!workspaceId) {
+      throw new Error("Workspace not found");
+    }
+    runInAction(() => {
+      set(this.workspaces[workspaceId], ["logo_url"], logoURL);
+    });
+  };
+
+  /**
+   * delete workspace using the workspace slug
+   * @param workspaceSlug
+   */
+  deleteWorkspace = async (workspaceSlug: string) => {
+    try {
+      await this.workspaceService.deleteWorkspace(workspaceSlug);
+      const updatedWorkspacesList = this.workspaces;
+      const workspaceId = this.getWorkspaceBySlug(workspaceSlug)?.id;
+      delete updatedWorkspacesList[`${workspaceId}`];
+      runInAction(() => {
+        this.workspaces = updatedWorkspacesList;
+      });
+    } catch (error) {
+      console.error("Failed to delete workspace:", error);
+    }
+  };
+
+  fetchSidebarNavigationPreferences = async (workspaceSlug: string) => {
+    try {
+      const response = await this.workspaceService.fetchSidebarNavigationPreferences(workspaceSlug);
+
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = response;
+      });
+    } catch (error) {
+      console.error("Failed to fetch sidebar preferences:", error);
+    }
+  };
+
+  updateSidebarPreference = async (
+    workspaceSlug: string,
+    key: string,
+    data: Partial<IWorkspaceSidebarNavigationItem>
+  ) => {
+    // Store the data before update to use for reverting if needed
+    const beforeUpdateData = clone(this.navigationPreferencesMap[workspaceSlug]?.[key]);
+
+    try {
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = {
+          ...this.navigationPreferencesMap[workspaceSlug],
+          [key]: {
+            ...beforeUpdateData,
+            ...data,
+          },
+        };
+      });
+
+      const response = await this.workspaceService.updateSidebarPreference(workspaceSlug, key, data);
+      return response;
+    } catch (error) {
+      // Revert to original data if API call fails
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = {
+          ...this.navigationPreferencesMap[workspaceSlug],
+          [key]: beforeUpdateData,
+        };
+      });
+      console.error("Failed to update sidebar preference:", error);
+    }
+  };
+
+  getNavigationPreferences = computedFn(
+    (workspaceSlug: string): IWorkspaceSidebarNavigation | undefined => this.navigationPreferencesMap[workspaceSlug]
+  );
+
+  updateBulkSidebarPreferences = async (
+    workspaceSlug: string,
+    data: Array<{ key: string; is_pinned: boolean; sort_order: number }>
+  ) => {
+    const beforeUpdateData = clone(this.navigationPreferencesMap[workspaceSlug]);
+
+    try {
+      // Optimistically update store
+      const updatedPreferences: IWorkspaceSidebarNavigation = {};
+      data.forEach((item) => {
+        updatedPreferences[item.key] = item;
+      });
+
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = {
+          ...this.navigationPreferencesMap[workspaceSlug],
+          ...updatedPreferences,
+        };
+      });
+
+      // Call API to persist changes
+      await this.workspaceService.updateBulkSidebarPreferences(workspaceSlug, data);
+    } catch (error) {
+      // Rollback on failure
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = beforeUpdateData;
+      });
+      console.error("Failed to update bulk sidebar preferences:", error);
+      throw error;
+    }
+  };
+
+  getProjectNavigationPreferences = computedFn(
+    (workspaceSlug: string): IWorkspaceUserPropertiesResponse | undefined =>
+      this.projectNavigationPreferencesMap[workspaceSlug]
+  );
+
+  fetchProjectNavigationPreferences = async (workspaceSlug: string) => {
+    try {
+      const response = await this.workspaceService.fetchWorkspaceFilters(workspaceSlug);
+
+      runInAction(() => {
+        this.projectNavigationPreferencesMap[workspaceSlug] = response;
+      });
+    } catch (error) {
+      console.error("Failed to fetch project navigation preferences:", error);
+      throw error;
+    }
+  };
+
+  updateProjectNavigationPreferences = async (
+    workspaceSlug: string,
+    data: Partial<IWorkspaceUserPropertiesResponse>
+  ) => {
+    const beforeUpdateData = clone(this.projectNavigationPreferencesMap[workspaceSlug]);
+
+    try {
+      // Optimistically update store
+      runInAction(() => {
+        this.projectNavigationPreferencesMap[workspaceSlug] = {
+          ...this.projectNavigationPreferencesMap[workspaceSlug],
+          ...data,
+        };
+      });
+
+      // Call API to persist changes
+      await this.workspaceService.patchWorkspaceFilters(workspaceSlug, data);
+    } catch (error) {
+      // Rollback on failure
+      runInAction(() => {
+        this.projectNavigationPreferencesMap[workspaceSlug] = beforeUpdateData;
+      });
+      console.error("Failed to update project navigation preferences:", error);
+      throw error;
+    }
+  };
+
+  /**
+   * Mutate workspace members activity — no-op in CE
+   * @param workspaceSlug
+   */
+  mutateWorkspaceMembersActivity = async (_workspaceSlug: string): Promise<void> => {
+    // No-op in default/CE version
+  };
+}
+
+// Alias so consumers can keep using WorkspaceRootStore
+export { BaseWorkspaceRootStore as WorkspaceRootStore };
diff --git a/apps/web/core/store/workspace/link.store.ts b/apps/web/core/store/workspace/link.store.ts
new file mode 100644
index 0000000..3b6ead0
--- /dev/null
+++ b/apps/web/core/store/workspace/link.store.ts
@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, makeObservable, observable, runInAction } from "mobx";
+// types
+import type { TLink, TLinkIdMap, TLinkMap } from "@plane/types";
+// services
+import { WorkspaceService } from "@/services/workspace.service";
+
+export interface IWorkspaceLinkStoreActions {
+  addLinks: (projectId: string, links: TLink[]) => void;
+  fetchLinks: (workspaceSlug: string) => Promise<TLink[]>;
+  createLink: (workspaceSlug: string, data: Partial<TLink>) => Promise<TLink>;
+  updateLink: (workspaceSlug: string, linkId: string, data: Partial<TLink>) => Promise<TLink>;
+  removeLink: (workspaceSlug: string, linkId: string) => Promise<void>;
+  setLinkData: (link: TLink | undefined) => void;
+  toggleLinkModal: (isOpen: boolean) => void;
+}
+
+export interface IWorkspaceLinkStore extends IWorkspaceLinkStoreActions {
+  // observables
+  links: TLinkIdMap;
+  linkMap: TLinkMap;
+  linkData: TLink | undefined;
+  isLinkModalOpen: boolean;
+  // helper methods
+  getLinksByWorkspaceId: (projectId: string) => string[] | undefined;
+  getLinkById: (linkId: string) => TLink | undefined;
+}
+
+export class WorkspaceLinkStore implements IWorkspaceLinkStore {
+  // observables
+  links: TLinkIdMap = {};
+  linkMap: TLinkMap = {};
+  linkData: TLink | undefined = undefined;
+  isLinkModalOpen = false;
+  // services
+  workspaceService: WorkspaceService;
+
+  constructor() {
+    makeObservable(this, {
+      // observables
+      links: observable,
+      linkMap: observable,
+      linkData: observable,
+      isLinkModalOpen: observable,
+      // actions
+      addLinks: action.bound,
+      fetchLinks: action,
+      createLink: action,
+      updateLink: action,
+      removeLink: action,
+      setLinkData: action,
+      toggleLinkModal: action,
+    });
+    // services
+    this.workspaceService = new WorkspaceService();
+  }
+
+  // helper methods
+  getLinksByWorkspaceId = (projectId: string) => {
+    if (!projectId) return undefined;
+    return this.links[projectId] ?? undefined;
+  };
+
+  getLinkById = (linkId: string) => {
+    if (!linkId) return undefined;
+    return this.linkMap[linkId] ?? undefined;
+  };
+
+  // actions
+  setLinkData = (link: TLink | undefined) => {
+    runInAction(() => {
+      this.linkData = link;
+    });
+  };
+
+  toggleLinkModal = (isOpen: boolean) => {
+    runInAction(() => {
+      this.isLinkModalOpen = isOpen;
+    });
+  };
+
+  addLinks = (workspaceSlug: string, links: TLink[]) => {
+    runInAction(() => {
+      this.links[workspaceSlug] = links.map((link) => link.id);
+      links.forEach((link) => set(this.linkMap, link.id, link));
+    });
+  };
+
+  fetchLinks = async (workspaceSlug: string) => {
+    const response = await this.workspaceService.fetchWorkspaceLinks(workspaceSlug);
+    this.addLinks(workspaceSlug, response);
+    return response;
+  };
+
+  createLink = async (workspaceSlug: string, data: Partial<TLink>) => {
+    const response = await this.workspaceService.createWorkspaceLink(workspaceSlug, data);
+
+    runInAction(() => {
+      this.links[workspaceSlug] = [response.id, ...(this.links[workspaceSlug] ?? [])];
+      set(this.linkMap, response.id, response);
+    });
+    return response;
+  };
+
+  updateLink = async (workspaceSlug: string, linkId: string, data: Partial<TLink>) => {
+    runInAction(() => {
+      Object.keys(data).forEach((key) => {
+        set(this.linkMap, [linkId, key], data[key as keyof TLink]);
+      });
+    });
+
+    const response = await this.workspaceService.updateWorkspaceLink(workspaceSlug, linkId, data);
+    return response;
+  };
+
+  removeLink = async (workspaceSlug: string, linkId: string) => {
+    // const issueLinkCount = this.getLinksByWorkspaceId(projectId)?.length ?? 0;
+    await this.workspaceService.deleteWorkspaceLink(workspaceSlug, linkId);
+
+    const linkIndex = this.links[workspaceSlug].findIndex((link) => link === linkId);
+    if (linkIndex >= 0)
+      runInAction(() => {
+        this.links[workspaceSlug].splice(linkIndex, 1);
+        delete this.linkMap[linkId];
+      });
+  };
+}
diff --git a/apps/web/core/store/workspace/webhook.store.ts b/apps/web/core/store/workspace/webhook.store.ts
new file mode 100644
index 0000000..4d4fe78
--- /dev/null
+++ b/apps/web/core/store/workspace/webhook.store.ts
@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// mobx
+import { action, observable, makeObservable, computed, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { IWebhook } from "@plane/types";
+// services
+import { WebhookService } from "@/services/webhook.service";
+// store
+import type { CoreRootStore } from "../root.store";
+
+export interface IWebhookStore {
+  // observables
+  webhooks: Record<string, IWebhook> | null;
+  webhookSecretKey: string | null;
+  // computed
+  currentWebhook: IWebhook | null;
+  // computed actions
+  getWebhookById: (webhookId: string) => IWebhook | null;
+  // fetch actions
+  fetchWebhooks: (workspaceSlug: string) => Promise<IWebhook[]>;
+  fetchWebhookById: (workspaceSlug: string, webhookId: string) => Promise<IWebhook>;
+  // crud actions
+  createWebhook: (
+    workspaceSlug: string,
+    data: Partial<IWebhook>
+  ) => Promise<{ webHook: IWebhook; secretKey: string | null }>;
+  updateWebhook: (workspaceSlug: string, webhookId: string, data: Partial<IWebhook>) => Promise<IWebhook>;
+  removeWebhook: (workspaceSlug: string, webhookId: string) => Promise<void>;
+  // secret key actions
+  regenerateSecretKey: (
+    workspaceSlug: string,
+    webhookId: string
+  ) => Promise<{ webHook: IWebhook; secretKey: string | null }>;
+  clearSecretKey: () => void;
+}
+
+export class WebhookStore implements IWebhookStore {
+  // observables
+  webhooks: Record<string, IWebhook> | null = null;
+  webhookSecretKey: string | null = null;
+  // services
+  webhookService;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      webhooks: observable,
+      webhookSecretKey: observable.ref,
+      // computed
+      currentWebhook: computed,
+      // fetch actions
+      fetchWebhooks: action,
+      fetchWebhookById: action,
+      // CRUD actions
+      createWebhook: action,
+      updateWebhook: action,
+      removeWebhook: action,
+      // secret key actions
+      regenerateSecretKey: action,
+      clearSecretKey: action,
+    });
+
+    // services
+    this.webhookService = new WebhookService();
+    // root store
+    this.rootStore = _rootStore;
+  }
+
+  /**
+   * computed value of current webhook based on webhook id saved in the query store
+   */
+  get currentWebhook() {
+    const webhookId = this.rootStore.router.webhookId;
+    if (!webhookId) return null;
+    const currentWebhook = this.webhooks?.[webhookId] ?? null;
+    return currentWebhook;
+  }
+
+  /**
+   * get webhook info from the object of webhooks in the store using webhook id
+   * @param webhookId
+   */
+  getWebhookById = computedFn((webhookId: string) => this.webhooks?.[webhookId] || null);
+
+  /**
+   * fetch all the webhooks for a workspace
+   * @param workspaceSlug
+   */
+  fetchWebhooks = async (workspaceSlug: string) =>
+    await this.webhookService.fetchWebhooksList(workspaceSlug).then((response) => {
+      const webHookObject: { [webhookId: string]: IWebhook } = response.reduce((accumulator, currentWebhook) => {
+        if (currentWebhook && currentWebhook.id) {
+          return { ...accumulator, [currentWebhook.id]: currentWebhook };
+        }
+        return accumulator;
+      }, {});
+      runInAction(() => {
+        this.webhooks = webHookObject;
+      });
+      return response;
+    });
+
+  /**
+   * fetch webhook info from API using webhook id
+   * @param workspaceSlug
+   * @param webhookId
+   */
+  fetchWebhookById = async (workspaceSlug: string, webhookId: string) =>
+    await this.webhookService.fetchWebhookDetails(workspaceSlug, webhookId).then((response) => {
+      runInAction(() => {
+        this.webhooks = {
+          ...this.webhooks,
+          [response.id]: response,
+        };
+      });
+      return response;
+    });
+
+  /**
+   * create a new webhook for a workspace using the data
+   * @param workspaceSlug
+   * @param data
+   */
+  createWebhook = async (workspaceSlug: string, data: Partial<IWebhook>) =>
+    await this.webhookService.createWebhook(workspaceSlug, data).then((response) => {
+      const _secretKey = response?.secret_key ?? null;
+      delete response?.secret_key;
+      const _webhooks = this.webhooks;
+      if (response && response.id && _webhooks) _webhooks[response.id] = response;
+      runInAction(() => {
+        this.webhookSecretKey = _secretKey || null;
+        this.webhooks = _webhooks;
+      });
+      return { webHook: response, secretKey: _secretKey };
+    });
+
+  /**
+   * update a webhook using the data
+   * @param workspaceSlug
+   * @param webhookId
+   * @param data
+   */
+  updateWebhook = async (workspaceSlug: string, webhookId: string, data: Partial<IWebhook>) =>
+    await this.webhookService.updateWebhook(workspaceSlug, webhookId, data).then((response) => {
+      let _webhooks = this.webhooks;
+      if (webhookId && _webhooks && this.webhooks)
+        _webhooks = { ..._webhooks, [webhookId]: { ...this.webhooks[webhookId], ...data } };
+      runInAction(() => {
+        this.webhooks = _webhooks;
+      });
+      return response;
+    });
+
+  /**
+   * delete a webhook using webhook id
+   * @param workspaceSlug
+   * @param webhookId
+   */
+  removeWebhook = async (workspaceSlug: string, webhookId: string) =>
+    await this.webhookService.deleteWebhook(workspaceSlug, webhookId).then(() => {
+      const _webhooks = this.webhooks ?? {};
+      delete _webhooks[webhookId];
+      runInAction(() => {
+        this.webhooks = _webhooks;
+      });
+    });
+
+  /**
+   * regenerate secret key for a webhook using webhook id
+   * @param workspaceSlug
+   * @param webhookId
+   */
+  regenerateSecretKey = async (workspaceSlug: string, webhookId: string) =>
+    await this.webhookService.regenerateSecretKey(workspaceSlug, webhookId).then((response) => {
+      const _secretKey = response?.secret_key ?? null;
+      delete response?.secret_key;
+      const _webhooks = this.webhooks;
+      if (_webhooks && response && response.id) {
+        _webhooks[response.id] = response;
+      }
+      runInAction(() => {
+        this.webhookSecretKey = _secretKey || null;
+        this.webhooks = _webhooks;
+      });
+      return { webHook: response, secretKey: _secretKey };
+    });
+
+  /**
+   * clear secret key from the store
+   */
+  clearSecretKey = () => {
+    this.webhookSecretKey = null;
+  };
+}
diff --git a/apps/web/google.d.ts b/apps/web/google.d.ts
new file mode 100644
index 0000000..0a8bf46
--- /dev/null
+++ b/apps/web/google.d.ts
@@ -0,0 +1,91 @@
+// google.d.ts
+
+interface IdConfiguration {
+  client_id: string;
+  auto_select?: boolean;
+  callback: (handleCredentialResponse: CredentialResponse) => void;
+  login_uri?: string;
+  native_callback?: (...args: any[]) => void;
+  cancel_on_tap_outside?: boolean;
+  prompt_parent_id?: string;
+  nonce?: string;
+  context?: string;
+  state_cookie_domain?: string;
+  ux_mode?: "popup" | "redirect";
+  allowed_parent_origin?: string | string[];
+  intermediate_iframe_close_callback?: (...args: any[]) => void;
+}
+
+interface CredentialResponse {
+  credential?: string;
+  select_by?:
+    | "auto"
+    | "user"
+    | "user_1tap"
+    | "user_2tap"
+    | "btn"
+    | "btn_confirm"
+    | "brn_add_session"
+    | "btn_confirm_add_session";
+  clientId?: string;
+}
+
+interface GsiButtonConfiguration {
+  type: "standard" | "icon";
+  theme?: "outline" | "filled_blue" | "filled_black";
+  size?: "large" | "medium" | "small";
+  text?: "signin_with" | "signup_with" | "continue_with";
+  shape?: "rectangular" | "pill" | "circle" | "square";
+  logo_alignment?: "left" | "center";
+  width?: number;
+  local?: string;
+}
+
+interface PromptMomentNotification {
+  isDisplayMoment: () => boolean;
+  isDisplayed: () => boolean;
+  isNotDisplayed: () => boolean;
+  getNotDisplayedReason: () =>
+    | "browser_not_supported"
+    | "invalid_client"
+    | "missing_client_id"
+    | "opt_out_or_no_session"
+    | "secure_http_required"
+    | "suppressed_by_user"
+    | "unregistered_origin"
+    | "unknown_reason";
+  isSkippedMoment: () => boolean;
+  getSkippedReason: () => "auto_cancel" | "user_cancel" | "tap_outside" | "issuing_failed";
+  isDismissedMoment: () => boolean;
+  getDismissedReason: () => "credential_returned" | "cancel_called" | "flow_restarted";
+  getMomentType: () => "display" | "skipped" | "dismissed";
+}
+
+interface RevocationResponse {
+  successful: boolean;
+  error: string;
+}
+
+interface Credential {
+  id: string;
+  password: string;
+}
+
+interface Google {
+  accounts: {
+    id: {
+      initialize: (input: IdConfiguration) => void;
+      prompt: (momentListener?: (res: PromptMomentNotification) => void) => void;
+      renderButton: (parent: HTMLElement, options: GsiButtonConfiguration) => void;
+      disableAutoSelect: () => void;
+      storeCredential: (credentials: Credential, callback: () => void) => void;
+      cancel: () => void;
+      onGoogleLibraryLoad: () => void;
+      revoke: (hint: string, callback: (done: RevocationResponse) => void) => void;
+    };
+  };
+}
+
+interface Window {
+  google?: Google;
+}
diff --git a/apps/web/helpers/authentication.helper.tsx b/apps/web/helpers/authentication.helper.tsx
new file mode 100644
index 0000000..977f094
--- /dev/null
+++ b/apps/web/helpers/authentication.helper.tsx
@@ -0,0 +1,450 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import Link from "next/link";
+// plane imports
+import { SUPPORT_EMAIL } from "@plane/constants";
+
+export enum EPageTypes {
+  PUBLIC = "PUBLIC",
+  NON_AUTHENTICATED = "NON_AUTHENTICATED",
+  SET_PASSWORD = "SET_PASSWORD",
+  ONBOARDING = "ONBOARDING",
+  AUTHENTICATED = "AUTHENTICATED",
+}
+
+export enum EAuthModes {
+  SIGN_IN = "SIGN_IN",
+  SIGN_UP = "SIGN_UP",
+}
+
+export enum EAuthSteps {
+  EMAIL = "EMAIL",
+  PASSWORD = "PASSWORD",
+  UNIQUE_CODE = "UNIQUE_CODE",
+}
+
+export enum EErrorAlertType {
+  BANNER_ALERT = "BANNER_ALERT",
+  INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
+  INLINE_EMAIL = "INLINE_EMAIL",
+  INLINE_PASSWORD = "INLINE_PASSWORD",
+  INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
+}
+
+export enum EAuthenticationErrorCodes {
+  // Global
+  INSTANCE_NOT_CONFIGURED = "5000",
+  INVALID_EMAIL = "5005",
+  EMAIL_REQUIRED = "5010",
+  SIGNUP_DISABLED = "5015",
+  MAGIC_LINK_LOGIN_DISABLED = "5016",
+  BOT_USER_LOGIN_FORBIDDEN = "5017",
+  PASSWORD_LOGIN_DISABLED = "5018",
+  USER_ACCOUNT_DEACTIVATED = "5019",
+  // Password strength
+  INVALID_PASSWORD = "5020",
+  PASSWORD_TOO_WEAK = "5021",
+  SMTP_NOT_CONFIGURED = "5025",
+  // Sign Up
+  USER_ALREADY_EXIST = "5030",
+  AUTHENTICATION_FAILED_SIGN_UP = "5035",
+  REQUIRED_EMAIL_PASSWORD_SIGN_UP = "5040",
+  INVALID_EMAIL_SIGN_UP = "5045",
+  INVALID_EMAIL_MAGIC_SIGN_UP = "5050",
+  MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED = "5055",
+  // Sign In
+  USER_DOES_NOT_EXIST = "5060",
+  AUTHENTICATION_FAILED_SIGN_IN = "5065",
+  REQUIRED_EMAIL_PASSWORD_SIGN_IN = "5070",
+  INVALID_EMAIL_SIGN_IN = "5075",
+  INVALID_EMAIL_MAGIC_SIGN_IN = "5080",
+  MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED = "5085",
+  // Both Sign in and Sign up for magic
+  INVALID_MAGIC_CODE_SIGN_IN = "5090",
+  INVALID_MAGIC_CODE_SIGN_UP = "5092",
+  EXPIRED_MAGIC_CODE_SIGN_IN = "5095",
+  EXPIRED_MAGIC_CODE_SIGN_UP = "5097",
+  EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN = "5100",
+  EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP = "5102",
+  // Oauth
+  OAUTH_NOT_CONFIGURED = "5104",
+  GOOGLE_NOT_CONFIGURED = "5105",
+  GITHUB_NOT_CONFIGURED = "5110",
+  GITLAB_NOT_CONFIGURED = "5111",
+  GOOGLE_OAUTH_PROVIDER_ERROR = "5115",
+  GITHUB_OAUTH_PROVIDER_ERROR = "5120",
+  GITLAB_OAUTH_PROVIDER_ERROR = "5121",
+  // Reset Password
+  INVALID_PASSWORD_TOKEN = "5125",
+  EXPIRED_PASSWORD_TOKEN = "5130",
+  // Change password
+  INCORRECT_OLD_PASSWORD = "5135",
+  MISSING_PASSWORD = "5138",
+  INVALID_NEW_PASSWORD = "5140",
+  // set password
+  PASSWORD_ALREADY_SET = "5145",
+  // Admin
+  ADMIN_ALREADY_EXIST = "5150",
+  REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5155",
+  INVALID_ADMIN_EMAIL = "5160",
+  INVALID_ADMIN_PASSWORD = "5165",
+  REQUIRED_ADMIN_EMAIL_PASSWORD = "5170",
+  ADMIN_AUTHENTICATION_FAILED = "5175",
+  ADMIN_USER_ALREADY_EXIST = "5180",
+  ADMIN_USER_DOES_NOT_EXIST = "5185",
+  ADMIN_USER_DEACTIVATED = "5190",
+  // Rate limit
+  RATE_LIMIT_EXCEEDED = "5900",
+}
+
+export type TAuthErrorInfo = {
+  type: EErrorAlertType;
+  code: EAuthenticationErrorCodes;
+  title: string;
+  message: ReactNode;
+};
+
+// TODO: move all error messages to translation files
+const errorCodeMessages: {
+  [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string) => ReactNode };
+} = {
+  // global
+  [EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED]: {
+    title: `Instance not configured`,
+    message: () => `Instance not configured. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_EMAIL]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.EMAIL_REQUIRED]: {
+    title: `Email required`,
+    message: () => `Email required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.SIGNUP_DISABLED]: {
+    title: `Sign up disabled`,
+    message: () => `Sign up disabled. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.MAGIC_LINK_LOGIN_DISABLED]: {
+    title: `Magic link login disabled`,
+    message: () => `Magic link login disabled. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.PASSWORD_LOGIN_DISABLED]: {
+    title: `Password login disabled`,
+    message: () => `Password login disabled. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED]: {
+    title: `User account deactivated`,
+    message: () => `User account deactivated. Please contact ${SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+  },
+  [EAuthenticationErrorCodes.BOT_USER_LOGIN_FORBIDDEN]: {
+    title: `Sign in not allowed`,
+    message: () => `This account cannot be used to sign in. Please use a personal account.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_PASSWORD]: {
+    title: `Invalid password`,
+    message: () => `Invalid password. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.PASSWORD_TOO_WEAK]: {
+    title: `Password too weak`,
+    message: () => `Please use a stronger password.`,
+  },
+  [EAuthenticationErrorCodes.SMTP_NOT_CONFIGURED]: {
+    title: `SMTP not configured`,
+    message: () => `SMTP not configured. Please contact your administrator.`,
+  },
+
+  // sign up
+  [EAuthenticationErrorCodes.USER_ALREADY_EXIST]: {
+    title: `User already exists`,
+    message: (email = undefined) => (
+      <div>
+        Your account is already registered. 
+        <Link
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
+          href={`/sign-in${email ? `?email=${encodeURIComponent(email)}` : ``}`}
+        >
+          Sign In
+        </Link>
+         now.
+      </div>
+    ),
+  },
+  [EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_UP]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_UP]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED]: {
+    title: `Email and code required`,
+    message: () => `Email and code required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+
+  [EAuthenticationErrorCodes.USER_DOES_NOT_EXIST]: {
+    title: `User does not exist`,
+    message: (email = undefined) => (
+      <div>
+        No account found. 
+        <Link
+          className="font-medium underline underline-offset-4 transition-all hover:font-bold"
+          href={`/${email ? `?email=${encodeURIComponent(email)}` : ``}`}
+        >
+          Create one
+        </Link>
+         to get started.
+      </div>
+    ),
+  },
+  [EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_IN]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_IN]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED]: {
+    title: `Email and code required`,
+    message: () => `Email and code required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+
+  // Both Sign in and Sign up
+  [EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_IN]: {
+    title: `Authentication failed`,
+    message: () => `Invalid magic code. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_UP]: {
+    title: `Authentication failed`,
+    message: () => `Invalid magic code. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_IN]: {
+    title: `Expired magic code`,
+    message: () => `Expired magic code. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_UP]: {
+    title: `Expired magic code`,
+    message: () => `Expired magic code. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN]: {
+    title: `Expired magic code`,
+    message: () => `Expired magic code. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP]: {
+    title: `Expired magic code`,
+    message: () => `Expired magic code. Please try again.`,
+  },
+
+  // Oauth
+  [EAuthenticationErrorCodes.OAUTH_NOT_CONFIGURED]: {
+    title: `OAuth not configured`,
+    message: () => `OAuth not configured. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.GOOGLE_NOT_CONFIGURED]: {
+    title: `Google not configured`,
+    message: () => `Google not configured. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.GITHUB_NOT_CONFIGURED]: {
+    title: `GitHub not configured`,
+    message: () => `GitHub not configured. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.GITLAB_NOT_CONFIGURED]: {
+    title: `GitLab not configured`,
+    message: () => `GitLab not configured. Please contact your administrator.`,
+  },
+  [EAuthenticationErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR]: {
+    title: `Google OAuth provider error`,
+    message: () => `Google OAuth provider error. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.GITHUB_OAUTH_PROVIDER_ERROR]: {
+    title: `GitHub OAuth provider error`,
+    message: () => `GitHub OAuth provider error. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.GITLAB_OAUTH_PROVIDER_ERROR]: {
+    title: `GitLab OAuth provider error`,
+    message: () => `GitLab OAuth provider error. Please try again.`,
+  },
+
+  // Reset Password
+  [EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN]: {
+    title: `Invalid password token`,
+    message: () => `Invalid password token.`,
+  },
+  [EAuthenticationErrorCodes.EXPIRED_PASSWORD_TOKEN]: {
+    title: `Expired password token`,
+    message: () => `Expired password token. Please try again.`,
+  },
+
+  // Change password
+  [EAuthenticationErrorCodes.MISSING_PASSWORD]: {
+    title: `Password required`,
+    message: () => `Password required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INCORRECT_OLD_PASSWORD]: {
+    title: `Incorrect old password`,
+    message: () => `Incorrect old password. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_NEW_PASSWORD]: {
+    title: `Invalid new password`,
+    message: () => `Invalid new password. Please try again.`,
+  },
+
+  // set password
+  [EAuthenticationErrorCodes.PASSWORD_ALREADY_SET]: {
+    title: `Password already set`,
+    message: () => `Password already set. Please try again.`,
+  },
+
+  // admin
+  [EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST]: {
+    title: `Admin already exists`,
+    message: () => `Admin already exists. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
+    title: `Email, password and first name required`,
+    message: () => `Email, password and first name required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL]: {
+    title: `Invalid admin email`,
+    message: () => `Invalid admin email. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD]: {
+    title: `Invalid admin password`,
+    message: () => `Invalid admin password. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
+    title: `Admin user already exists`,
+    message: () => (
+      <div>
+        Admin user already exists. 
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
+          Sign In
+        </Link>
+         now.
+      </div>
+    ),
+  },
+  [EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
+    title: `Admin user does not exist`,
+    message: () => (
+      <div>
+        Admin user does not exist. 
+        <Link className="font-medium underline underline-offset-4 transition-all hover:font-bold" href={`/admin`}>
+          Sign In
+        </Link>
+         now.
+      </div>
+    ),
+  },
+  [EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED]: {
+    title: `Admin user deactivated`,
+    message: () => <div>Your account is deactivated</div>,
+  },
+  [EAuthenticationErrorCodes.RATE_LIMIT_EXCEEDED]: {
+    title: "",
+    message: () => `Rate limit exceeded. Please try again later.`,
+  },
+};
+
+export const authErrorHandler = (errorCode: EAuthenticationErrorCodes, email?: string): TAuthErrorInfo | undefined => {
+  const bannerAlertErrorCodes = [
+    EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED,
+    EAuthenticationErrorCodes.INVALID_EMAIL,
+    EAuthenticationErrorCodes.EMAIL_REQUIRED,
+    EAuthenticationErrorCodes.SIGNUP_DISABLED,
+    EAuthenticationErrorCodes.MAGIC_LINK_LOGIN_DISABLED,
+    EAuthenticationErrorCodes.PASSWORD_LOGIN_DISABLED,
+    EAuthenticationErrorCodes.BOT_USER_LOGIN_FORBIDDEN,
+    EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED,
+    EAuthenticationErrorCodes.INVALID_PASSWORD,
+    EAuthenticationErrorCodes.SMTP_NOT_CONFIGURED,
+    EAuthenticationErrorCodes.USER_ALREADY_EXIST,
+    EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_UP,
+    EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP,
+    EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_UP,
+    EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP,
+    EAuthenticationErrorCodes.MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED,
+    EAuthenticationErrorCodes.USER_DOES_NOT_EXIST,
+    EAuthenticationErrorCodes.AUTHENTICATION_FAILED_SIGN_IN,
+    EAuthenticationErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN,
+    EAuthenticationErrorCodes.INVALID_EMAIL_SIGN_IN,
+    EAuthenticationErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN,
+    EAuthenticationErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED,
+    EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_IN,
+    EAuthenticationErrorCodes.INVALID_MAGIC_CODE_SIGN_UP,
+    EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_IN,
+    EAuthenticationErrorCodes.EXPIRED_MAGIC_CODE_SIGN_UP,
+    EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN,
+    EAuthenticationErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP,
+    EAuthenticationErrorCodes.OAUTH_NOT_CONFIGURED,
+    EAuthenticationErrorCodes.GOOGLE_NOT_CONFIGURED,
+    EAuthenticationErrorCodes.GITHUB_NOT_CONFIGURED,
+    EAuthenticationErrorCodes.GITLAB_NOT_CONFIGURED,
+    EAuthenticationErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR,
+    EAuthenticationErrorCodes.GITHUB_OAUTH_PROVIDER_ERROR,
+    EAuthenticationErrorCodes.GITLAB_OAUTH_PROVIDER_ERROR,
+    EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN,
+    EAuthenticationErrorCodes.EXPIRED_PASSWORD_TOKEN,
+    EAuthenticationErrorCodes.INCORRECT_OLD_PASSWORD,
+    EAuthenticationErrorCodes.MISSING_PASSWORD,
+    EAuthenticationErrorCodes.INVALID_NEW_PASSWORD,
+    EAuthenticationErrorCodes.PASSWORD_ALREADY_SET,
+    EAuthenticationErrorCodes.ADMIN_ALREADY_EXIST,
+    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
+    EAuthenticationErrorCodes.INVALID_ADMIN_EMAIL,
+    EAuthenticationErrorCodes.INVALID_ADMIN_PASSWORD,
+    EAuthenticationErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
+    EAuthenticationErrorCodes.ADMIN_AUTHENTICATION_FAILED,
+    EAuthenticationErrorCodes.ADMIN_USER_ALREADY_EXIST,
+    EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
+    EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED,
+    EAuthenticationErrorCodes.RATE_LIMIT_EXCEEDED,
+    EAuthenticationErrorCodes.PASSWORD_TOO_WEAK,
+  ];
+
+  if (bannerAlertErrorCodes.includes(errorCode))
+    return {
+      type: EErrorAlertType.BANNER_ALERT,
+      code: errorCode,
+      title: errorCodeMessages[errorCode]?.title || "Error",
+      message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
+    };
+
+  return undefined;
+};
+
+export const passwordErrors = [
+  EAuthenticationErrorCodes.PASSWORD_TOO_WEAK,
+  EAuthenticationErrorCodes.INVALID_NEW_PASSWORD,
+];
diff --git a/apps/web/helpers/cover-image.helper.ts b/apps/web/helpers/cover-image.helper.ts
new file mode 100644
index 0000000..ebb5c19
--- /dev/null
+++ b/apps/web/helpers/cover-image.helper.ts
@@ -0,0 +1,289 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EFileAssetType } from "@plane/types";
+import { getFileURL } from "@plane/utils";
+
+import CoverImage1 from "@/app/assets/cover-images/image_1.jpg?url";
+import CoverImage10 from "@/app/assets/cover-images/image_10.jpg?url";
+import CoverImage11 from "@/app/assets/cover-images/image_11.jpg?url";
+import CoverImage12 from "@/app/assets/cover-images/image_12.jpg?url";
+import CoverImage13 from "@/app/assets/cover-images/image_13.jpg?url";
+import CoverImage14 from "@/app/assets/cover-images/image_14.jpg?url";
+import CoverImage15 from "@/app/assets/cover-images/image_15.jpg?url";
+import CoverImage16 from "@/app/assets/cover-images/image_16.jpg?url";
+import CoverImage17 from "@/app/assets/cover-images/image_17.jpg?url";
+import CoverImage18 from "@/app/assets/cover-images/image_18.jpg?url";
+import CoverImage19 from "@/app/assets/cover-images/image_19.jpg?url";
+import CoverImage2 from "@/app/assets/cover-images/image_2.jpg?url";
+import CoverImage20 from "@/app/assets/cover-images/image_20.jpg?url";
+import CoverImage21 from "@/app/assets/cover-images/image_21.jpg?url";
+import CoverImage22 from "@/app/assets/cover-images/image_22.jpg?url";
+import CoverImage23 from "@/app/assets/cover-images/image_23.jpg?url";
+import CoverImage24 from "@/app/assets/cover-images/image_24.jpg?url";
+import CoverImage25 from "@/app/assets/cover-images/image_25.jpg?url";
+import CoverImage26 from "@/app/assets/cover-images/image_26.jpg?url";
+import CoverImage27 from "@/app/assets/cover-images/image_27.jpg?url";
+import CoverImage28 from "@/app/assets/cover-images/image_28.jpg?url";
+import CoverImage29 from "@/app/assets/cover-images/image_29.jpg?url";
+import CoverImage3 from "@/app/assets/cover-images/image_3.jpg?url";
+import CoverImage4 from "@/app/assets/cover-images/image_4.jpg?url";
+import CoverImage5 from "@/app/assets/cover-images/image_5.jpg?url";
+import CoverImage6 from "@/app/assets/cover-images/image_6.jpg?url";
+import CoverImage7 from "@/app/assets/cover-images/image_7.jpg?url";
+import CoverImage8 from "@/app/assets/cover-images/image_8.jpg?url";
+import CoverImage9 from "@/app/assets/cover-images/image_9.jpg?url";
+
+import { FileService } from "@/services/file.service";
+
+const fileService = new FileService();
+
+/**
+ * Map of all available static cover images
+ * These are pre-loaded images available in the assets/cover-images folder
+ */
+export const STATIC_COVER_IMAGES = {
+  IMAGE_1: CoverImage1,
+  IMAGE_2: CoverImage2,
+  IMAGE_3: CoverImage3,
+  IMAGE_4: CoverImage4,
+  IMAGE_5: CoverImage5,
+  IMAGE_6: CoverImage6,
+  IMAGE_7: CoverImage7,
+  IMAGE_8: CoverImage8,
+  IMAGE_9: CoverImage9,
+  IMAGE_10: CoverImage10,
+  IMAGE_11: CoverImage11,
+  IMAGE_12: CoverImage12,
+  IMAGE_13: CoverImage13,
+  IMAGE_14: CoverImage14,
+  IMAGE_15: CoverImage15,
+  IMAGE_16: CoverImage16,
+  IMAGE_17: CoverImage17,
+  IMAGE_18: CoverImage18,
+  IMAGE_19: CoverImage19,
+  IMAGE_20: CoverImage20,
+  IMAGE_21: CoverImage21,
+  IMAGE_22: CoverImage22,
+  IMAGE_23: CoverImage23,
+  IMAGE_24: CoverImage24,
+  IMAGE_25: CoverImage25,
+  IMAGE_26: CoverImage26,
+  IMAGE_27: CoverImage27,
+  IMAGE_28: CoverImage28,
+  IMAGE_29: CoverImage29,
+} as const;
+
+export const DEFAULT_COVER_IMAGE_URL = STATIC_COVER_IMAGES.IMAGE_1;
+
+/**
+ * Set of static image URLs for fast O(1) lookup
+ */
+const STATIC_COVER_IMAGES_SET = new Set<string>(Object.values(STATIC_COVER_IMAGES));
+
+export type TCoverImageType = "local_static" | "uploaded_asset" | "unsplash";
+
+export type TCoverImageResult = {
+  needsUpload: boolean;
+  imageType: TCoverImageType;
+  shouldUpdate: boolean;
+};
+
+export type TCoverImagePayload = {
+  cover_image?: string | null;
+  cover_image_url?: string | null;
+  cover_image_asset?: string | null;
+};
+
+/**
+ * Checks if a given URL is a valid static cover image
+ */
+export const isStaticCoverImage = (imageUrl: string | null | undefined): boolean => {
+  if (!imageUrl) return false;
+  return STATIC_COVER_IMAGES_SET.has(imageUrl);
+};
+
+/**
+ * Determines the type of cover image URL
+ * Uses explicit validation against known static images for better accuracy
+ */
+export const getCoverImageType = (imageUrl: string): TCoverImageType => {
+  // Check against the explicit set of static images
+  if (isStaticCoverImage(imageUrl)) return "local_static";
+
+  // Check if it's an Unsplash image by validating the hostname
+  try {
+    const url = new URL(imageUrl);
+    const hostname = url.hostname.toLowerCase();
+    if (hostname === "unsplash.com" || hostname.endsWith(".unsplash.com")) {
+      return "unsplash";
+    }
+  } catch {
+    // If URL parsing fails (e.g., relative path), fall through to other checks
+  }
+
+  if (imageUrl.startsWith("http")) return "uploaded_asset";
+
+  return "uploaded_asset";
+};
+
+/**
+ * Gets the correct display URL for a cover image
+ * - Local static images: returned as-is (served from assets folder)
+ * - Uploaded assets: processed through getFileURL (adds backend URL)
+ */
+export function getCoverImageDisplayURL(imageUrl: string | null | undefined, fallbackUrl: string): string;
+export function getCoverImageDisplayURL(imageUrl: string | null | undefined, fallbackUrl: null): string | null;
+export function getCoverImageDisplayURL(
+  imageUrl: string | null | undefined,
+  fallbackUrl: string | null
+): string | null {
+  if (!imageUrl) {
+    return fallbackUrl;
+  }
+
+  const imageType = getCoverImageType(imageUrl);
+
+  if (imageType === "local_static" || imageType === "unsplash") {
+    return imageUrl;
+  }
+
+  if (imageType === "uploaded_asset") {
+    return getFileURL(imageUrl) || imageUrl;
+  }
+
+  return imageUrl;
+}
+
+/**
+ * Analyzes cover image change and determines what action to take
+ * Merged with isUnsplashImage logic - now detects unsplash images as a separate type
+ */
+export const analyzeCoverImageChange = (
+  currentImage: string | null | undefined,
+  newImage: string | null | undefined
+): TCoverImageResult => {
+  const hasChanged = currentImage !== newImage;
+
+  if (!hasChanged) {
+    return {
+      needsUpload: false,
+      imageType: "uploaded_asset",
+      shouldUpdate: false,
+    };
+  }
+
+  if (!newImage) {
+    return {
+      needsUpload: false,
+      imageType: "uploaded_asset",
+      shouldUpdate: true,
+    };
+  }
+
+  const imageType = getCoverImageType(newImage);
+
+  return {
+    needsUpload: imageType === "local_static" || imageType === "unsplash",
+    imageType,
+    shouldUpdate: hasChanged,
+  };
+};
+
+/**
+ * Uploads a local static image to S3
+ */
+export const uploadCoverImage = async (
+  imageUrl: string,
+  uploadConfig: {
+    workspaceSlug?: string;
+    entityIdentifier: string;
+    entityType: EFileAssetType;
+    isUserAsset?: boolean;
+  }
+): Promise<string> => {
+  const { workspaceSlug, entityIdentifier, entityType, isUserAsset = false } = uploadConfig;
+
+  // Fetch the local image
+  const response = await fetch(imageUrl);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch image: ${response.statusText}`);
+  }
+
+  const blob = await response.blob();
+
+  // Validate it's actually an image
+  if (!blob.type.startsWith("image/")) {
+    throw new Error("Invalid file type. Please select an image.");
+  }
+
+  const fileName = imageUrl.split("/").pop()?.split("?")[0] || "image.jpg";
+  const file = new File([blob], fileName, { type: blob.type });
+
+  // Upload based on context
+  if (isUserAsset) {
+    const uploadResult = await fileService.uploadUserAsset(
+      {
+        entity_identifier: entityIdentifier,
+        entity_type: entityType,
+      },
+      file
+    );
+    return uploadResult.asset_url;
+  } else {
+    if (!workspaceSlug) {
+      throw new Error("Workspace slug is required for workspace asset upload");
+    }
+
+    const uploadResult = await fileService.uploadWorkspaceAsset(
+      workspaceSlug,
+      {
+        entity_identifier: entityIdentifier,
+        entity_type: entityType,
+      },
+      file
+    );
+    return uploadResult.asset_url;
+  }
+};
+
+/**
+ * Main utility to handle cover image changes with upload
+ */
+export const handleCoverImageChange = async (
+  currentImage: string | null | undefined,
+  newImage: string | null | undefined,
+  uploadConfig: {
+    workspaceSlug?: string;
+    entityIdentifier: string;
+    entityType: EFileAssetType;
+    isUserAsset?: boolean;
+  }
+): Promise<TCoverImagePayload | undefined> => {
+  const analysis = analyzeCoverImageChange(currentImage, newImage);
+  if (!analysis.shouldUpdate) return;
+
+  if (!newImage) {
+    return { cover_image: null, cover_image_url: null, cover_image_asset: null };
+  }
+
+  if (analysis.needsUpload) {
+    const assetUrl = await uploadCoverImage(newImage, uploadConfig);
+    // cover_image requires an absolute URL; cover_image_url is relative (matches GET /api/users/me/ format)
+    return { cover_image: getFileURL(assetUrl) || assetUrl, cover_image_url: assetUrl };
+  }
+
+  // cover_image requires an absolute URL; getFileURL converts relative paths from the Upload tab
+  return { cover_image: getFileURL(newImage) || newImage, cover_image_url: newImage };
+};
+
+/**
+ * Returns a random cover image from the STATIC_COVER_IMAGES object
+ * @returns {string} A random cover image URL
+ */
+export const getRandomCoverImage = (): string =>
+  Object.values(STATIC_COVER_IMAGES)[Math.floor(Math.random() * Object.keys(STATIC_COVER_IMAGES).length)];
diff --git a/apps/web/helpers/dashboard.helper.ts b/apps/web/helpers/dashboard.helper.ts
new file mode 100644
index 0000000..2d21975
--- /dev/null
+++ b/apps/web/helpers/dashboard.helper.ts
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { endOfMonth, endOfWeek, endOfYear, startOfMonth, startOfWeek, startOfYear } from "date-fns";
+// helpers
+// types
+import { DURATION_FILTER_OPTIONS, EDurationFilters } from "@plane/constants";
+import type { TIssuesListTypes } from "@plane/types";
+// constants
+import { renderFormattedDate, renderFormattedPayloadDate } from "@plane/utils";
+
+// -------------------- DEPRECATED --------------------
+
+/**
+ * @description returns date range based on the duration filter
+ * @param duration
+ */
+export const getCustomDates = (duration: EDurationFilters, customDates: string[]): string => {
+  const today = new Date();
+  let firstDay, lastDay;
+
+  switch (duration) {
+    case EDurationFilters.NONE:
+      return "";
+    case EDurationFilters.TODAY:
+      firstDay = renderFormattedPayloadDate(today);
+      lastDay = renderFormattedPayloadDate(today);
+      return `${firstDay};after,${lastDay};before`;
+    case EDurationFilters.THIS_WEEK:
+      firstDay = renderFormattedPayloadDate(startOfWeek(today));
+      lastDay = renderFormattedPayloadDate(endOfWeek(today));
+      return `${firstDay};after,${lastDay};before`;
+    case EDurationFilters.THIS_MONTH:
+      firstDay = renderFormattedPayloadDate(startOfMonth(today));
+      lastDay = renderFormattedPayloadDate(endOfMonth(today));
+      return `${firstDay};after,${lastDay};before`;
+    case EDurationFilters.THIS_YEAR:
+      firstDay = renderFormattedPayloadDate(startOfYear(today));
+      lastDay = renderFormattedPayloadDate(endOfYear(today));
+      return `${firstDay};after,${lastDay};before`;
+    case EDurationFilters.CUSTOM:
+      return customDates.join(",");
+  }
+};
+
+/**
+ * @description returns redirection filters for the issues list
+ * @param type
+ */
+export const getRedirectionFilters = (type: TIssuesListTypes): string => {
+  const today = renderFormattedPayloadDate(new Date());
+
+  const filterParams =
+    type === "pending"
+      ? "?state_group=backlog,unstarted,started"
+      : type === "upcoming"
+        ? `?target_date=${today};after`
+        : type === "overdue"
+          ? `?target_date=${today};before`
+          : "?state_group=completed";
+
+  return filterParams;
+};
+
+/**
+ * @description returns the tab key based on the duration filter
+ * @param duration
+ * @param tab
+ */
+export const getTabKey = (duration: EDurationFilters, tab: TIssuesListTypes | undefined): TIssuesListTypes => {
+  if (!tab) return "completed";
+
+  if (tab === "completed") return tab;
+
+  if (duration === "none") return "pending";
+  else {
+    if (["upcoming", "overdue"].includes(tab)) return tab;
+    else return "upcoming";
+  }
+};
+
+/**
+ * @description returns the label for the duration filter dropdown
+ * @param duration
+ * @param customDates
+ */
+export const getDurationFilterDropdownLabel = (duration: EDurationFilters, customDates: string[]): string => {
+  if (duration !== "custom") return DURATION_FILTER_OPTIONS.find((option) => option.key === duration)?.label ?? "";
+  else {
+    const afterDate = customDates.find((date) => date.includes("after"))?.split(";")[0];
+    const beforeDate = customDates.find((date) => date.includes("before"))?.split(";")[0];
+
+    if (afterDate && beforeDate) return `${renderFormattedDate(afterDate)} - ${renderFormattedDate(beforeDate)}`;
+    else if (afterDate) return `After ${renderFormattedDate(afterDate)}`;
+    else if (beforeDate) return `Before ${renderFormattedDate(beforeDate)}`;
+    else return "";
+  }
+};
diff --git a/apps/web/helpers/emoji.helper.tsx b/apps/web/helpers/emoji.helper.tsx
new file mode 100644
index 0000000..55edd2c
--- /dev/null
+++ b/apps/web/helpers/emoji.helper.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Renders an emoji or icon
+ * @param {string | { name: string; color: string }} emoji - The emoji or icon to render
+ * @returns {React.ReactNode} The rendered emoji or icon
+ */
+export const renderEmoji = (
+  emoji:
+    | string
+    | {
+        name: string;
+        color: string;
+      }
+): React.ReactNode => {
+  if (!emoji) return;
+
+  if (typeof emoji === "object")
+    return (
+      <span style={{ fontSize: "16px", color: emoji.color }} className="material-symbols-rounded">
+        {emoji.name}
+      </span>
+    );
+  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
+};
diff --git a/apps/web/helpers/graph.helper.ts b/apps/web/helpers/graph.helper.ts
new file mode 100644
index 0000000..055df63
--- /dev/null
+++ b/apps/web/helpers/graph.helper.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// ------------ DEPRECATED (Use re-charts and its helpers instead) ------------
+
+export const generateYAxisTickValues = (data: number[]) => {
+  if (!data || !Array.isArray(data) || data.length === 0) return [];
+
+  const minValue = 0;
+  const maxValue = Math.max(...data);
+
+  const valueRange = maxValue - minValue;
+
+  let tickInterval = 1;
+
+  if (valueRange < 10) tickInterval = 1;
+  else if (valueRange < 20) tickInterval = 2;
+  else if (valueRange < 50) tickInterval = 5;
+  else tickInterval = (Math.ceil(valueRange / 100) * 100) / 10;
+
+  const tickValues: number[] = [];
+  let tickValue = minValue;
+  while (tickValue <= maxValue) {
+    tickValues.push(tickValue);
+    tickValue += tickInterval;
+  }
+
+  return tickValues;
+};
diff --git a/apps/web/helpers/issue-filter.helper.ts b/apps/web/helpers/issue-filter.helper.ts
new file mode 100644
index 0000000..7e2fff4
--- /dev/null
+++ b/apps/web/helpers/issue-filter.helper.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { IIssueDisplayProperties } from "@plane/types";
+// lib
+import { store } from "@/lib/store-context";
+
+export const shouldRenderColumn = (key: keyof IIssueDisplayProperties): boolean => {
+  const isEstimateEnabled: boolean = store.projectRoot.project.currentProjectDetails?.estimate !== null;
+  switch (key) {
+    case "estimate":
+      return isEstimateEnabled;
+    default:
+      return true;
+  }
+};
diff --git a/apps/web/helpers/react-hook-form.helper.ts b/apps/web/helpers/react-hook-form.helper.ts
new file mode 100644
index 0000000..da9a9fc
--- /dev/null
+++ b/apps/web/helpers/react-hook-form.helper.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { FieldError, FieldValues } from "react-hook-form";
+
+/**
+ * Get a nested error from a form's errors object
+ * @param errors - The form's errors object
+ * @param path - The path to the error
+ * @returns The error or undefined if not found
+ */
+export const getNestedError = <T extends FieldValues>(errors: T, path: string): FieldError | undefined => {
+  const keys = path.split(".");
+  let current: unknown = errors;
+
+  for (const key of keys) {
+    if (current && typeof current === "object" && key in current) {
+      current = (current as Record<string, unknown>)[key];
+    } else {
+      return undefined;
+    }
+  }
+
+  // Check if the final value is a FieldError
+  if (current && typeof current === "object" && "message" in current) {
+    return current as FieldError;
+  }
+
+  return undefined;
+};
diff --git a/apps/web/helpers/views.helper.ts b/apps/web/helpers/views.helper.ts
new file mode 100644
index 0000000..b4ca7ca
--- /dev/null
+++ b/apps/web/helpers/views.helper.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LucideIcon } from "lucide-react";
+import { VIEW_ACCESS_SPECIFIERS as VIEW_ACCESS_SPECIFIERS_CONSTANTS } from "@plane/constants";
+import { GlobeOutline, LockOutline } from "@makeplane/propel/icons";
+
+import type { ISvgIcons } from "@plane/propel/icons";
+import { EViewAccess } from "@plane/types";
+
+const VIEW_ACCESS_ICONS = {
+  [EViewAccess.PUBLIC]: GlobeOutline,
+  [EViewAccess.PRIVATE]: LockOutline,
+};
+
+export const VIEW_ACCESS_SPECIFIERS: {
+  key: EViewAccess;
+  i18n_label: string;
+  icon: LucideIcon | React.FC<ISvgIcons>;
+}[] = VIEW_ACCESS_SPECIFIERS_CONSTANTS.map((option) => ({
+  ...option,
+  icon: VIEW_ACCESS_ICONS[option.key as keyof typeof VIEW_ACCESS_ICONS],
+}));
diff --git a/apps/web/manifest.json b/apps/web/manifest.json
new file mode 100644
index 0000000..5a00515
--- /dev/null
+++ b/apps/web/manifest.json
@@ -0,0 +1,32 @@
+{
+  "theme_color": "#3579f6",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "name": "Plane | Accelerate software development with peace.",
+  "short_name": "Plane",
+  "description": "Plane accelerated the software development by order of magnitude for agencies and product companies.",
+  "icons": [
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/apps/web/package.json b/apps/web/package.json
new file mode 100644
index 0000000..8394394
--- /dev/null
+++ b/apps/web/package.json
@@ -0,0 +1,92 @@
+{
+  "name": "web",
+  "version": "1.4.2",
+  "private": true,
+  "license": "AGPL-3.0",
+  "type": "module",
+  "scripts": {
+    "dev": "react-router dev --port 3000",
+    "build": "react-router build",
+    "preview": "react-router build && serve -s build/client -l 3000",
+    "start": "serve -s build/client -l 3000",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf .react-router && rm -rf node_modules && rm -rf dist && rm -rf build",
+    "check:lint": "oxlint --max-warnings=11957 .",
+    "check:types": "react-router typegen && tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt ."
+  },
+  "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "catalog:",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "catalog:",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
+    "@bprogress/core": "catalog:",
+    "@fontsource-variable/inter": "catalog:",
+    "@fontsource/ibm-plex-mono": "catalog:",
+    "@fontsource/material-symbols-rounded": "catalog:",
+    "@headlessui/react": "catalog:",
+    "@makeplane/propel": "catalog:",
+    "@plane/constants": "workspace:*",
+    "@plane/editor": "workspace:*",
+    "@plane/hooks": "workspace:*",
+    "@plane/i18n": "workspace:*",
+    "@plane/propel": "workspace:*",
+    "@plane/services": "workspace:*",
+    "@plane/shared-state": "workspace:*",
+    "@plane/types": "workspace:*",
+    "@plane/ui": "workspace:*",
+    "@plane/utils": "workspace:*",
+    "@popperjs/core": "catalog:",
+    "@react-pdf/renderer": "catalog:",
+    "@react-router/node": "catalog:",
+    "@tanstack/react-table": "catalog:",
+    "axios": "catalog:",
+    "clsx": "catalog:",
+    "cmdk": "catalog:",
+    "comlink": "catalog:",
+    "date-fns": "catalog:",
+    "emoji-picker-react": "catalog:",
+    "export-to-csv": "catalog:",
+    "isbot": "catalog:",
+    "lodash-es": "catalog:",
+    "lucide-react": "catalog:",
+    "mobx": "catalog:",
+    "mobx-react": "catalog:",
+    "mobx-utils": "catalog:",
+    "next-themes": "catalog:",
+    "react": "catalog:",
+    "react-color": "catalog:",
+    "react-dom": "catalog:",
+    "react-dropzone": "catalog:",
+    "react-fast-compare": "catalog:",
+    "react-hook-form": "catalog:",
+    "react-is": "catalog:",
+    "react-markdown": "catalog:",
+    "react-masonry-component": "catalog:",
+    "react-pdf-html": "catalog:",
+    "react-popper": "catalog:",
+    "react-router": "catalog:",
+    "recharts": "catalog:",
+    "serve": "catalog:",
+    "smooth-scroll-into-view-if-needed": "catalog:",
+    "swr": "catalog:",
+    "use-font-face-observer": "catalog:",
+    "uuid": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/tailwind-config": "workspace:*",
+    "@plane/typescript-config": "workspace:*",
+    "@react-router/dev": "catalog:",
+    "@tailwindcss/postcss": "catalog:",
+    "@tailwindcss/typography": "catalog:",
+    "@types/lodash-es": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-color": "catalog:",
+    "@types/react-dom": "catalog:",
+    "dotenv": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-tsconfig-paths": "catalog:"
+  }
+}
diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
new file mode 100644
index 0000000..3ad28f1
--- /dev/null
+++ b/apps/web/postcss.config.js
@@ -0,0 +1,3 @@
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;
diff --git a/apps/web/public/favicon/android-chrome-192x192.png b/apps/web/public/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000..4a005e5
Binary files /dev/null and b/apps/web/public/favicon/android-chrome-192x192.png differ
diff --git a/apps/web/public/favicon/android-chrome-512x512.png b/apps/web/public/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000..27fafe8
Binary files /dev/null and b/apps/web/public/favicon/android-chrome-512x512.png differ
diff --git a/apps/web/public/favicon/site.webmanifest b/apps/web/public/favicon/site.webmanifest
new file mode 100644
index 0000000..1d41057
--- /dev/null
+++ b/apps/web/public/favicon/site.webmanifest
@@ -0,0 +1,11 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/favicon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/favicon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/apps/web/public/icons/icon-192x192.png b/apps/web/public/icons/icon-192x192.png
new file mode 100644
index 0000000..1654263
Binary files /dev/null and b/apps/web/public/icons/icon-192x192.png differ
diff --git a/apps/web/public/icons/icon-348x348.png b/apps/web/public/icons/icon-348x348.png
new file mode 100644
index 0000000..c457397
Binary files /dev/null and b/apps/web/public/icons/icon-348x348.png differ
diff --git a/apps/web/public/icons/icon-512x512.png b/apps/web/public/icons/icon-512x512.png
new file mode 100644
index 0000000..4c070d0
Binary files /dev/null and b/apps/web/public/icons/icon-512x512.png differ
diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json
new file mode 100644
index 0000000..3591773
--- /dev/null
+++ b/apps/web/public/manifest.json
@@ -0,0 +1,27 @@
+{
+  "name": "Plane",
+  "short_name": "Plane",
+  "icons": [
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-348x348.png",
+      "sizes": "348x348",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#FFFFFF",
+  "background_color": "#FFFFFF",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait"
+}
diff --git a/apps/web/public/plane-logos/plane-mobile-pwa.png b/apps/web/public/plane-logos/plane-mobile-pwa.png
new file mode 100644
index 0000000..d1b36f5
Binary files /dev/null and b/apps/web/public/plane-logos/plane-mobile-pwa.png differ
diff --git a/apps/web/public/site.webmanifest.json b/apps/web/public/site.webmanifest.json
new file mode 100644
index 0000000..7f53eaa
--- /dev/null
+++ b/apps/web/public/site.webmanifest.json
@@ -0,0 +1,13 @@
+{
+  "name": "Plane",
+  "short_name": "Plane",
+  "description": "Plane helps you plan your issues, cycles, and product modules.",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#f9fafb",
+  "theme_color": "#3f76ff",
+  "icons": [
+    { "src": "/plane-logos/plane-mobile-pwa.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/plane-logos/plane-mobile-pwa.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}
diff --git a/apps/web/public/sw.js b/apps/web/public/sw.js
new file mode 100644
index 0000000..afb1d51
--- /dev/null
+++ b/apps/web/public/sw.js
@@ -0,0 +1,102 @@
+/**
+ * Copyright 2018 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// If the loader is already loaded, just stop.
+if (!self.define) {
+  let registry = {};
+
+  // Used for `eval` and `importScripts` where we can't get script URL by other means.
+  // In both cases, it's safe to use a global var because those functions are synchronous.
+  let nextDefineUri;
+
+  const singleRequire = (uri, parentUri) => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return (
+      registry[uri] ||
+      new Promise((resolve) => {
+        if ("document" in self) {
+          const script = document.createElement("script");
+          script.src = uri;
+          script.onload = resolve;
+          document.head.appendChild(script);
+        } else {
+          nextDefineUri = uri;
+          importScripts(uri);
+          resolve();
+        }
+      }).then(() => {
+        let promise = registry[uri];
+        if (!promise) {
+          throw new Error(`Module ${uri} didn’t register its module`);
+        }
+        return promise;
+      })
+    );
+  };
+
+  self.define = (depsNames, factory) => {
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
+    if (registry[uri]) {
+      // Module is already loading or loaded.
+      return;
+    }
+    let exports = {};
+    const require = (depUri) => singleRequire(depUri, uri);
+    const specialDeps = {
+      module: { uri },
+      exports,
+      require,
+    };
+    registry[uri] = Promise.all(depsNames.map((depName) => specialDeps[depName] || require(depName))).then((deps) => {
+      factory(...deps);
+      return exports;
+    });
+  };
+}
+define(["./workbox-9f2f79cf"], function (workbox) {
+  "use strict";
+
+  importScripts();
+  self.skipWaiting();
+  workbox.clientsClaim();
+  workbox.registerRoute(
+    "/",
+    new workbox.NetworkFirst({
+      cacheName: "start-url",
+      plugins: [
+        {
+          cacheWillUpdate: async ({ request, response, event, state }) => {
+            if (response && response.type === "opaqueredirect") {
+              return new Response(response.body, {
+                status: 200,
+                statusText: "OK",
+                headers: response.headers,
+              });
+            }
+            return response;
+          },
+        },
+      ],
+    }),
+    "GET"
+  );
+  workbox.registerRoute(
+    /.*/i,
+    new workbox.NetworkOnly({
+      cacheName: "dev",
+      plugins: [],
+    }),
+    "GET"
+  );
+});
+//# sourceMappingURL=sw.js.map
diff --git a/apps/web/public/sw.js.map b/apps/web/public/sw.js.map
new file mode 100644
index 0000000..ed9a51e
--- /dev/null
+++ b/apps/web/public/sw.js.map
@@ -0,0 +1,32 @@
+{
+  "version": 3,
+  "file": "sw.js",
+  "sources": [
+    "../../../../../private/tmp/50f50ba014f4feaeaa3ddc8366af217e/sw.js"
+  ],
+  "sourcesContent": [
+    "import {registerRoute as workbox_routing_registerRoute} from '/Users/aaryan610/Desktop/plane/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/aaryan610/Desktop/plane/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/aaryan610/Desktop/plane/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/aaryan610/Desktop/plane/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({ request, response, event, state }) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, { status: 200, statusText: 'OK', headers: response.headers }) } return response } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"
+  ],
+  "names": [
+    "importScripts",
+    "self",
+    "skipWaiting",
+    "workbox_core_clientsClaim",
+    "workbox_routing_registerRoute",
+    "workbox_strategies_NetworkFirst",
+    "plugins",
+    "cacheWillUpdate",
+    "request",
+    "response",
+    "event",
+    "state",
+    "type",
+    "Response",
+    "body",
+    "status",
+    "statusText",
+    "headers",
+    "workbox_strategies_NetworkOnly"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAa,EAEZ,CAAA;EAQDC,CAAI,CAAA,CAAA,CAAA,CAACC,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAE,CAAA;AAElBC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAyB,EAAE,CAAA;AAI3BC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAA6B,CAAC,CAAA,CAAA,CAAG,CAAE,CAAA,CAAA,CAAA,CAAA,CAAIC,oBAA+B,CAAC,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,EAAC,CAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAO,EAAE,CAAC,CAAA;GAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAe,EAAE,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;QAAEC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;AAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAAM,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAIF,QAAQ,CAAIA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAQ,CAACG,CAAI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,gBAAgB,CAAE,CAAA,CAAA;AAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAO,CAAIC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAQ,CAACJ,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAACK,IAAI,CAAE,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAM,EAAE,CAAG,CAAA,CAAA,CAAA;EAAEC,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAU,EAAE,CAAI,CAAA,CAAA,CAAA,CAAA;YAAEC,CAAO,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAER,CAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAACQ,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA;AAAQ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAC,CAAC,CAAA;EAAC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAOR,QAAQ,CAAA;EAAC,CAAA,CAAA,CAAA,CAAA,CAAA;KAAG,CAAA;AAAE,CAAA,CAAA,CAAC,CAAC,CAAA,CAAE,CAAK,CAAA,CAAA,CAAA,CAAA,CAAC,CAAA;AACxWL,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAA6B,CAAC,CAAA,CAAA,CAAA,CAAA,CAAK,CAAE,CAAA,CAAA,CAAA,CAAA,CAAIc,mBAA8B,CAAC,CAAA;EAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAW,EAAC,CAAK,CAAA,CAAA,CAAA,CAAA,CAAA;EAAEZ,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,CAAO,EAAE,CAAA,CAAA;EAAG,CAAC,CAAC,CAAE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAK,CAAC,CAAA;;"
+}
diff --git a/apps/web/public/workbox-9f2f79cf.js b/apps/web/public/workbox-9f2f79cf.js
new file mode 100644
index 0000000..8596f66
--- /dev/null
+++ b/apps/web/public/workbox-9f2f79cf.js
@@ -0,0 +1,2479 @@
+define(["exports"], function (exports) {
+  "use strict";
+
+  // @ts-ignore
+  try {
+    self["workbox:core:6.6.0"] && _();
+  } catch (e) {}
+
+  /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const logger = (() => {
+    // Don't overwrite this value if it's already set.
+    // See https://github.com/GoogleChrome/workbox/pull/2284#issuecomment-560470923
+    if (!("__WB_DISABLE_DEV_LOGS" in globalThis)) {
+      self.__WB_DISABLE_DEV_LOGS = false;
+    }
+    let inGroup = false;
+    const methodToColorMap = {
+      debug: `#7f8c8d`,
+      log: `#2ecc71`,
+      warn: `#f39c12`,
+      error: `#c0392b`,
+      groupCollapsed: `#3498db`,
+      groupEnd: null, // No colored prefix on groupEnd
+    };
+    const print = function (method, args) {
+      if (self.__WB_DISABLE_DEV_LOGS) {
+        return;
+      }
+      if (method === "groupCollapsed") {
+        // Safari doesn't print all console.groupCollapsed() arguments:
+        // https://bugs.webkit.org/show_bug.cgi?id=182754
+        if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+          console[method](...args);
+          return;
+        }
+      }
+      const styles = [
+        `background: ${methodToColorMap[method]}`,
+        `border-radius: 0.5em`,
+        `color: white`,
+        `font-weight: bold`,
+        `padding: 2px 0.5em`,
+      ];
+      // When in a group, the workbox prefix is not displayed.
+      const logPrefix = inGroup ? [] : ["%cworkbox", styles.join(";")];
+      console[method](...logPrefix, ...args);
+      if (method === "groupCollapsed") {
+        inGroup = true;
+      }
+      if (method === "groupEnd") {
+        inGroup = false;
+      }
+    };
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const api = {};
+    const loggerMethods = Object.keys(methodToColorMap);
+    for (const key of loggerMethods) {
+      const method = key;
+      api[method] = (...args) => {
+        print(method, args);
+      };
+    }
+    return api;
+  })();
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const messages$1 = {
+    "invalid-value": ({ paramName, validValueDescription, value }) => {
+      if (!paramName || !validValueDescription) {
+        throw new Error(`Unexpected input to 'invalid-value' error.`);
+      }
+      return (
+        `The '${paramName}' parameter was given a value with an ` +
+        `unexpected value. ${validValueDescription} Received a value of ` +
+        `${JSON.stringify(value)}.`
+      );
+    },
+    "not-an-array": ({ moduleName, className, funcName, paramName }) => {
+      if (!moduleName || !className || !funcName || !paramName) {
+        throw new Error(`Unexpected input to 'not-an-array' error.`);
+      }
+      return (
+        `The parameter '${paramName}' passed into ` + `'${moduleName}.${className}.${funcName}()' must be an array.`
+      );
+    },
+    "incorrect-type": ({ expectedType, paramName, moduleName, className, funcName }) => {
+      if (!expectedType || !paramName || !moduleName || !funcName) {
+        throw new Error(`Unexpected input to 'incorrect-type' error.`);
+      }
+      const classNameStr = className ? `${className}.` : "";
+      return (
+        `The parameter '${paramName}' passed into ` +
+        `'${moduleName}.${classNameStr}` +
+        `${funcName}()' must be of type ${expectedType}.`
+      );
+    },
+    "incorrect-class": ({ expectedClassName, paramName, moduleName, className, funcName, isReturnValueProblem }) => {
+      if (!expectedClassName || !moduleName || !funcName) {
+        throw new Error(`Unexpected input to 'incorrect-class' error.`);
+      }
+      const classNameStr = className ? `${className}.` : "";
+      if (isReturnValueProblem) {
+        return (
+          `The return value from ` +
+          `'${moduleName}.${classNameStr}${funcName}()' ` +
+          `must be an instance of class ${expectedClassName}.`
+        );
+      }
+      return (
+        `The parameter '${paramName}' passed into ` +
+        `'${moduleName}.${classNameStr}${funcName}()' ` +
+        `must be an instance of class ${expectedClassName}.`
+      );
+    },
+    "missing-a-method": ({ expectedMethod, paramName, moduleName, className, funcName }) => {
+      if (!expectedMethod || !paramName || !moduleName || !className || !funcName) {
+        throw new Error(`Unexpected input to 'missing-a-method' error.`);
+      }
+      return (
+        `${moduleName}.${className}.${funcName}() expected the ` +
+        `'${paramName}' parameter to expose a '${expectedMethod}' method.`
+      );
+    },
+    "add-to-cache-list-unexpected-type": ({ entry }) => {
+      return (
+        `An unexpected entry was passed to ` +
+        `'workbox-precaching.PrecacheController.addToCacheList()' The entry ` +
+        `'${JSON.stringify(entry)}' isn't supported. You must supply an array of ` +
+        `strings with one or more characters, objects with a url property or ` +
+        `Request objects.`
+      );
+    },
+    "add-to-cache-list-conflicting-entries": ({ firstEntry, secondEntry }) => {
+      if (!firstEntry || !secondEntry) {
+        throw new Error(`Unexpected input to ` + `'add-to-cache-list-duplicate-entries' error.`);
+      }
+      return (
+        `Two of the entries passed to ` +
+        `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` +
+        `${firstEntry} but different revision details. Workbox is ` +
+        `unable to cache and version the asset correctly. Please remove one ` +
+        `of the entries.`
+      );
+    },
+    "plugin-error-request-will-fetch": ({ thrownErrorMessage }) => {
+      if (!thrownErrorMessage) {
+        throw new Error(`Unexpected input to ` + `'plugin-error-request-will-fetch', error.`);
+      }
+      return (
+        `An error was thrown by a plugins 'requestWillFetch()' method. ` +
+        `The thrown error message was: '${thrownErrorMessage}'.`
+      );
+    },
+    "invalid-cache-name": ({ cacheNameId, value }) => {
+      if (!cacheNameId) {
+        throw new Error(`Expected a 'cacheNameId' for error 'invalid-cache-name'`);
+      }
+      return (
+        `You must provide a name containing at least one character for ` +
+        `setCacheDetails({${cacheNameId}: '...'}). Received a value of ` +
+        `'${JSON.stringify(value)}'`
+      );
+    },
+    "unregister-route-but-not-found-with-method": ({ method }) => {
+      if (!method) {
+        throw new Error(`Unexpected input to ` + `'unregister-route-but-not-found-with-method' error.`);
+      }
+      return (
+        `The route you're trying to unregister was not  previously ` + `registered for the method type '${method}'.`
+      );
+    },
+    "unregister-route-route-not-registered": () => {
+      return `The route you're trying to unregister was not previously ` + `registered.`;
+    },
+    "queue-replay-failed": ({ name }) => {
+      return `Replaying the background sync queue '${name}' failed.`;
+    },
+    "duplicate-queue-name": ({ name }) => {
+      return (
+        `The Queue name '${name}' is already being used. ` +
+        `All instances of backgroundSync.Queue must be given unique names.`
+      );
+    },
+    "expired-test-without-max-age": ({ methodName, paramName }) => {
+      return `The '${methodName}()' method can only be used when the ` + `'${paramName}' is used in the constructor.`;
+    },
+    "unsupported-route-type": ({ moduleName, className, funcName, paramName }) => {
+      return (
+        `The supplied '${paramName}' parameter was an unsupported type. ` +
+        `Please check the docs for ${moduleName}.${className}.${funcName} for ` +
+        `valid input types.`
+      );
+    },
+    "not-array-of-class": ({ value, expectedClass, moduleName, className, funcName, paramName }) => {
+      return (
+        `The supplied '${paramName}' parameter must be an array of ` +
+        `'${expectedClass}' objects. Received '${JSON.stringify(value)},'. ` +
+        `Please check the call to ${moduleName}.${className}.${funcName}() ` +
+        `to fix the issue.`
+      );
+    },
+    "max-entries-or-age-required": ({ moduleName, className, funcName }) => {
+      return (
+        `You must define either config.maxEntries or config.maxAgeSeconds` + `in ${moduleName}.${className}.${funcName}`
+      );
+    },
+    "statuses-or-headers-required": ({ moduleName, className, funcName }) => {
+      return `You must define either config.statuses or config.headers` + `in ${moduleName}.${className}.${funcName}`;
+    },
+    "invalid-string": ({ moduleName, funcName, paramName }) => {
+      if (!paramName || !moduleName || !funcName) {
+        throw new Error(`Unexpected input to 'invalid-string' error.`);
+      }
+      return (
+        `When using strings, the '${paramName}' parameter must start with ` +
+        `'http' (for cross-origin matches) or '/' (for same-origin matches). ` +
+        `Please see the docs for ${moduleName}.${funcName}() for ` +
+        `more info.`
+      );
+    },
+    "channel-name-required": () => {
+      return `You must provide a channelName to construct a ` + `BroadcastCacheUpdate instance.`;
+    },
+    "invalid-responses-are-same-args": () => {
+      return (
+        `The arguments passed into responsesAreSame() appear to be ` +
+        `invalid. Please ensure valid Responses are used.`
+      );
+    },
+    "expire-custom-caches-only": () => {
+      return (
+        `You must provide a 'cacheName' property when using the ` + `expiration plugin with a runtime caching strategy.`
+      );
+    },
+    "unit-must-be-bytes": ({ normalizedRangeHeader }) => {
+      if (!normalizedRangeHeader) {
+        throw new Error(`Unexpected input to 'unit-must-be-bytes' error.`);
+      }
+      return (
+        `The 'unit' portion of the Range header must be set to 'bytes'. ` +
+        `The Range header provided was "${normalizedRangeHeader}"`
+      );
+    },
+    "single-range-only": ({ normalizedRangeHeader }) => {
+      if (!normalizedRangeHeader) {
+        throw new Error(`Unexpected input to 'single-range-only' error.`);
+      }
+      return (
+        `Multiple ranges are not supported. Please use a  single start ` +
+        `value, and optional end value. The Range header provided was ` +
+        `"${normalizedRangeHeader}"`
+      );
+    },
+    "invalid-range-values": ({ normalizedRangeHeader }) => {
+      if (!normalizedRangeHeader) {
+        throw new Error(`Unexpected input to 'invalid-range-values' error.`);
+      }
+      return (
+        `The Range header is missing both start and end values. At least ` +
+        `one of those values is needed. The Range header provided was ` +
+        `"${normalizedRangeHeader}"`
+      );
+    },
+    "no-range-header": () => {
+      return `No Range header was found in the Request provided.`;
+    },
+    "range-not-satisfiable": ({ size, start, end }) => {
+      return (
+        `The start (${start}) and end (${end}) values in the Range are ` +
+        `not satisfiable by the cached response, which is ${size} bytes.`
+      );
+    },
+    "attempt-to-cache-non-get-request": ({ url, method }) => {
+      return `Unable to cache '${url}' because it is a '${method}' request and ` + `only 'GET' requests can be cached.`;
+    },
+    "cache-put-with-no-response": ({ url }) => {
+      return `There was an attempt to cache '${url}' but the response was not ` + `defined.`;
+    },
+    "no-response": ({ url, error }) => {
+      let message = `The strategy could not generate a response for '${url}'.`;
+      if (error) {
+        message += ` The underlying error is ${error}.`;
+      }
+      return message;
+    },
+    "bad-precaching-response": ({ url, status }) => {
+      return `The precaching request for '${url}' failed` + (status ? ` with an HTTP status of ${status}.` : `.`);
+    },
+    "non-precached-url": ({ url }) => {
+      return (
+        `createHandlerBoundToURL('${url}') was called, but that URL is ` +
+        `not precached. Please pass in a URL that is precached instead.`
+      );
+    },
+    "add-to-cache-list-conflicting-integrities": ({ url }) => {
+      return (
+        `Two of the entries passed to ` +
+        `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` +
+        `${url} with different integrity values. Please remove one of them.`
+      );
+    },
+    "missing-precache-entry": ({ cacheName, url }) => {
+      return `Unable to find a precached response in ${cacheName} for ${url}.`;
+    },
+    "cross-origin-copy-response": ({ origin }) => {
+      return (
+        `workbox-core.copyResponse() can only be used with same-origin ` +
+        `responses. It was passed a response with origin ${origin}.`
+      );
+    },
+    "opaque-streams-source": ({ type }) => {
+      const message = `One of the workbox-streams sources resulted in an ` + `'${type}' response.`;
+      if (type === "opaqueredirect") {
+        return `${message} Please do not use a navigation request that results ` + `in a redirect as a source.`;
+      }
+      return `${message} Please ensure your sources are CORS-enabled.`;
+    },
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const generatorFunction = (code, details = {}) => {
+    const message = messages$1[code];
+    if (!message) {
+      throw new Error(`Unable to find message for code '${code}'.`);
+    }
+    return message(details);
+  };
+  const messageGenerator = generatorFunction;
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * Workbox errors should be thrown with this class.
+   * This allows use to ensure the type easily in tests,
+   * helps developers identify errors from workbox
+   * easily and allows use to optimise error
+   * messages correctly.
+   *
+   * @private
+   */
+  class WorkboxError extends Error {
+    /**
+     *
+     * @param {string} errorCode The error code that
+     * identifies this particular error.
+     * @param {Object=} details Any relevant arguments
+     * that will help developers identify issues should
+     * be added as a key on the context object.
+     */
+    constructor(errorCode, details) {
+      const message = messageGenerator(errorCode, details);
+      super(message);
+      this.name = errorCode;
+      this.details = details;
+    }
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /*
+   * This method throws if the supplied value is not an array.
+   * The destructed values are required to produce a meaningful error for users.
+   * The destructed and restructured object is so it's clear what is
+   * needed.
+   */
+  const isArray = (value, details) => {
+    if (!Array.isArray(value)) {
+      throw new WorkboxError("not-an-array", details);
+    }
+  };
+  const hasMethod = (object, expectedMethod, details) => {
+    const type = typeof object[expectedMethod];
+    if (type !== "function") {
+      details["expectedMethod"] = expectedMethod;
+      throw new WorkboxError("missing-a-method", details);
+    }
+  };
+  const isType = (object, expectedType, details) => {
+    if (typeof object !== expectedType) {
+      details["expectedType"] = expectedType;
+      throw new WorkboxError("incorrect-type", details);
+    }
+  };
+  const isInstance = (
+    object,
+    // Need the general type to do the check later.
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    expectedClass,
+    details
+  ) => {
+    if (!(object instanceof expectedClass)) {
+      details["expectedClassName"] = expectedClass.name;
+      throw new WorkboxError("incorrect-class", details);
+    }
+  };
+  const isOneOf = (value, validValues, details) => {
+    if (!validValues.includes(value)) {
+      details["validValueDescription"] = `Valid values are ${JSON.stringify(validValues)}.`;
+      throw new WorkboxError("invalid-value", details);
+    }
+  };
+  const isArrayOfClass = (
+    value,
+    // Need general type to do check later.
+    expectedClass,
+    // eslint-disable-line
+    details
+  ) => {
+    const error = new WorkboxError("not-array-of-class", details);
+    if (!Array.isArray(value)) {
+      throw error;
+    }
+    for (const item of value) {
+      if (!(item instanceof expectedClass)) {
+        throw error;
+      }
+    }
+  };
+  const finalAssertExports = {
+    hasMethod,
+    isArray,
+    isInstance,
+    isOneOf,
+    isType,
+    isArrayOfClass,
+  };
+
+  // @ts-ignore
+  try {
+    self["workbox:routing:6.6.0"] && _();
+  } catch (e) {}
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * The default HTTP method, 'GET', used when there's no specific method
+   * configured for a route.
+   *
+   * @type {string}
+   *
+   * @private
+   */
+  const defaultMethod = "GET";
+  /**
+   * The list of valid HTTP methods associated with requests that could be routed.
+   *
+   * @type {Array<string>}
+   *
+   * @private
+   */
+  const validMethods = ["DELETE", "GET", "HEAD", "PATCH", "POST", "PUT"];
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * @param {function()|Object} handler Either a function, or an object with a
+   * 'handle' method.
+   * @return {Object} An object with a handle method.
+   *
+   * @private
+   */
+  const normalizeHandler = (handler) => {
+    if (handler && typeof handler === "object") {
+      {
+        finalAssertExports.hasMethod(handler, "handle", {
+          moduleName: "workbox-routing",
+          className: "Route",
+          funcName: "constructor",
+          paramName: "handler",
+        });
+      }
+      return handler;
+    } else {
+      {
+        finalAssertExports.isType(handler, "function", {
+          moduleName: "workbox-routing",
+          className: "Route",
+          funcName: "constructor",
+          paramName: "handler",
+        });
+      }
+      return {
+        handle: handler,
+      };
+    }
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * A `Route` consists of a pair of callback functions, "match" and "handler".
+   * The "match" callback determine if a route should be used to "handle" a
+   * request by returning a non-falsy value if it can. The "handler" callback
+   * is called when there is a match and should return a Promise that resolves
+   * to a `Response`.
+   *
+   * @memberof workbox-routing
+   */
+  class Route {
+    /**
+     * Constructor for Route class.
+     *
+     * @param {workbox-routing~matchCallback} match
+     * A callback function that determines whether the route matches a given
+     * `fetch` event by returning a non-falsy value.
+     * @param {workbox-routing~handlerCallback} handler A callback
+     * function that returns a Promise resolving to a Response.
+     * @param {string} [method='GET'] The HTTP method to match the Route
+     * against.
+     */
+    constructor(match, handler, method = defaultMethod) {
+      {
+        finalAssertExports.isType(match, "function", {
+          moduleName: "workbox-routing",
+          className: "Route",
+          funcName: "constructor",
+          paramName: "match",
+        });
+        if (method) {
+          finalAssertExports.isOneOf(method, validMethods, {
+            paramName: "method",
+          });
+        }
+      }
+      // These values are referenced directly by Router so cannot be
+      // altered by minificaton.
+      this.handler = normalizeHandler(handler);
+      this.match = match;
+      this.method = method;
+    }
+    /**
+     *
+     * @param {workbox-routing-handlerCallback} handler A callback
+     * function that returns a Promise resolving to a Response
+     */
+    setCatchHandler(handler) {
+      this.catchHandler = normalizeHandler(handler);
+    }
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * RegExpRoute makes it easy to create a regular expression based
+   * {@link workbox-routing.Route}.
+   *
+   * For same-origin requests the RegExp only needs to match part of the URL. For
+   * requests against third-party servers, you must define a RegExp that matches
+   * the start of the URL.
+   *
+   * @memberof workbox-routing
+   * @extends workbox-routing.Route
+   */
+  class RegExpRoute extends Route {
+    /**
+     * If the regular expression contains
+     * [capture groups]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references},
+     * the captured values will be passed to the
+     * {@link workbox-routing~handlerCallback} `params`
+     * argument.
+     *
+     * @param {RegExp} regExp The regular expression to match against URLs.
+     * @param {workbox-routing~handlerCallback} handler A callback
+     * function that returns a Promise resulting in a Response.
+     * @param {string} [method='GET'] The HTTP method to match the Route
+     * against.
+     */
+    constructor(regExp, handler, method) {
+      {
+        finalAssertExports.isInstance(regExp, RegExp, {
+          moduleName: "workbox-routing",
+          className: "RegExpRoute",
+          funcName: "constructor",
+          paramName: "pattern",
+        });
+      }
+      const match = ({ url }) => {
+        const result = regExp.exec(url.href);
+        // Return immediately if there's no match.
+        if (!result) {
+          return;
+        }
+        // Require that the match start at the first character in the URL string
+        // if it's a cross-origin request.
+        // See https://github.com/GoogleChrome/workbox/issues/281 for the context
+        // behind this behavior.
+        if (url.origin !== location.origin && result.index !== 0) {
+          {
+            logger.debug(
+              `The regular expression '${regExp.toString()}' only partially matched ` +
+                `against the cross-origin URL '${url.toString()}'. RegExpRoute's will only ` +
+                `handle cross-origin requests if they match the entire URL.`
+            );
+          }
+          return;
+        }
+        // If the route matches, but there aren't any capture groups defined, then
+        // this will return [], which is truthy and therefore sufficient to
+        // indicate a match.
+        // If there are capture groups, then it will return their values.
+        return result.slice(1);
+      };
+      super(match, handler, method);
+    }
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const getFriendlyURL = (url) => {
+    const urlObj = new URL(String(url), location.href);
+    // See https://github.com/GoogleChrome/workbox/issues/2323
+    // We want to include everything, except for the origin if it's same-origin.
+    return urlObj.href.replace(new RegExp(`^${location.origin}`), "");
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * The Router can be used to process a `FetchEvent` using one or more
+   * {@link workbox-routing.Route}, responding with a `Response` if
+   * a matching route exists.
+   *
+   * If no route matches a given a request, the Router will use a "default"
+   * handler if one is defined.
+   *
+   * Should the matching Route throw an error, the Router will use a "catch"
+   * handler if one is defined to gracefully deal with issues and respond with a
+   * Request.
+   *
+   * If a request matches multiple routes, the **earliest** registered route will
+   * be used to respond to the request.
+   *
+   * @memberof workbox-routing
+   */
+  class Router {
+    /**
+     * Initializes a new Router.
+     */
+    constructor() {
+      this._routes = new Map();
+      this._defaultHandlerMap = new Map();
+    }
+    /**
+     * @return {Map<string, Array<workbox-routing.Route>>} routes A `Map` of HTTP
+     * method name ('GET', etc.) to an array of all the corresponding `Route`
+     * instances that are registered.
+     */
+    get routes() {
+      return this._routes;
+    }
+    /**
+     * Adds a fetch event listener to respond to events when a route matches
+     * the event's request.
+     */
+    addFetchListener() {
+      // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+      self.addEventListener("fetch", (event) => {
+        const { request } = event;
+        const responsePromise = this.handleRequest({
+          request,
+          event,
+        });
+        if (responsePromise) {
+          event.respondWith(responsePromise);
+        }
+      });
+    }
+    /**
+     * Adds a message event listener for URLs to cache from the window.
+     * This is useful to cache resources loaded on the page prior to when the
+     * service worker started controlling it.
+     *
+     * The format of the message data sent from the window should be as follows.
+     * Where the `urlsToCache` array may consist of URL strings or an array of
+     * URL string + `requestInit` object (the same as you'd pass to `fetch()`).
+     *
+     * ```
+     * {
+     *   type: 'CACHE_URLS',
+     *   payload: {
+     *     urlsToCache: [
+     *       './script1.js',
+     *       './script2.js',
+     *       ['./script3.js', {mode: 'no-cors'}],
+     *     ],
+     *   },
+     * }
+     * ```
+     */
+    addCacheListener() {
+      // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+      self.addEventListener("message", (event) => {
+        // event.data is type 'any'
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (event.data && event.data.type === "CACHE_URLS") {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const { payload } = event.data;
+          {
+            logger.debug(`Caching URLs from the window`, payload.urlsToCache);
+          }
+          const requestPromises = Promise.all(
+            payload.urlsToCache.map((entry) => {
+              if (typeof entry === "string") {
+                entry = [entry];
+              }
+              const request = new Request(...entry);
+              return this.handleRequest({
+                request,
+                event,
+              });
+              // TODO(philipwalton): TypeScript errors without this typecast for
+              // some reason (probably a bug). The real type here should work but
+              // doesn't: `Array<Promise<Response> | undefined>`.
+            })
+          ); // TypeScript
+          event.waitUntil(requestPromises);
+          // If a MessageChannel was used, reply to the message on success.
+          if (event.ports && event.ports[0]) {
+            void requestPromises.then(() => event.ports[0].postMessage(true));
+          }
+        }
+      });
+    }
+    /**
+     * Apply the routing rules to a FetchEvent object to get a Response from an
+     * appropriate Route's handler.
+     *
+     * @param {Object} options
+     * @param {Request} options.request The request to handle.
+     * @param {ExtendableEvent} options.event The event that triggered the
+     *     request.
+     * @return {Promise<Response>|undefined} A promise is returned if a
+     *     registered route can handle the request. If there is no matching
+     *     route and there's no `defaultHandler`, `undefined` is returned.
+     */
+    handleRequest({ request, event }) {
+      {
+        finalAssertExports.isInstance(request, Request, {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "handleRequest",
+          paramName: "options.request",
+        });
+      }
+      const url = new URL(request.url, location.href);
+      if (!url.protocol.startsWith("http")) {
+        {
+          logger.debug(`Workbox Router only supports URLs that start with 'http'.`);
+        }
+        return;
+      }
+      const sameOrigin = url.origin === location.origin;
+      const { params, route } = this.findMatchingRoute({
+        event,
+        request,
+        sameOrigin,
+        url,
+      });
+      let handler = route && route.handler;
+      const debugMessages = [];
+      {
+        if (handler) {
+          debugMessages.push([`Found a route to handle this request:`, route]);
+          if (params) {
+            debugMessages.push([`Passing the following params to the route's handler:`, params]);
+          }
+        }
+      }
+      // If we don't have a handler because there was no matching route, then
+      // fall back to defaultHandler if that's defined.
+      const method = request.method;
+      if (!handler && this._defaultHandlerMap.has(method)) {
+        {
+          debugMessages.push(
+            `Failed to find a matching route. Falling ` + `back to the default handler for ${method}.`
+          );
+        }
+        handler = this._defaultHandlerMap.get(method);
+      }
+      if (!handler) {
+        {
+          // No handler so Workbox will do nothing. If logs is set of debug
+          // i.e. verbose, we should print out this information.
+          logger.debug(`No route found for: ${getFriendlyURL(url)}`);
+        }
+        return;
+      }
+      {
+        // We have a handler, meaning Workbox is going to handle the route.
+        // print the routing details to the console.
+        logger.groupCollapsed(`Router is responding to: ${getFriendlyURL(url)}`);
+        debugMessages.forEach((msg) => {
+          if (Array.isArray(msg)) {
+            logger.log(...msg);
+          } else {
+            logger.log(msg);
+          }
+        });
+        logger.groupEnd();
+      }
+      // Wrap in try and catch in case the handle method throws a synchronous
+      // error. It should still callback to the catch handler.
+      let responsePromise;
+      try {
+        responsePromise = handler.handle({
+          url,
+          request,
+          event,
+          params,
+        });
+      } catch (err) {
+        responsePromise = Promise.reject(err);
+      }
+      // Get route's catch handler, if it exists
+      const catchHandler = route && route.catchHandler;
+      if (responsePromise instanceof Promise && (this._catchHandler || catchHandler)) {
+        responsePromise = responsePromise.catch(async (err) => {
+          // If there's a route catch handler, process that first
+          if (catchHandler) {
+            {
+              // Still include URL here as it will be async from the console group
+              // and may not make sense without the URL
+              logger.groupCollapsed(
+                `Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to route's Catch Handler.`
+              );
+              logger.error(`Error thrown by:`, route);
+              logger.error(err);
+              logger.groupEnd();
+            }
+            try {
+              return await catchHandler.handle({
+                url,
+                request,
+                event,
+                params,
+              });
+            } catch (catchErr) {
+              if (catchErr instanceof Error) {
+                err = catchErr;
+              }
+            }
+          }
+          if (this._catchHandler) {
+            {
+              // Still include URL here as it will be async from the console group
+              // and may not make sense without the URL
+              logger.groupCollapsed(
+                `Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to global Catch Handler.`
+              );
+              logger.error(`Error thrown by:`, route);
+              logger.error(err);
+              logger.groupEnd();
+            }
+            return this._catchHandler.handle({
+              url,
+              request,
+              event,
+            });
+          }
+          throw err;
+        });
+      }
+      return responsePromise;
+    }
+    /**
+     * Checks a request and URL (and optionally an event) against the list of
+     * registered routes, and if there's a match, returns the corresponding
+     * route along with any params generated by the match.
+     *
+     * @param {Object} options
+     * @param {URL} options.url
+     * @param {boolean} options.sameOrigin The result of comparing `url.origin`
+     *     against the current origin.
+     * @param {Request} options.request The request to match.
+     * @param {Event} options.event The corresponding event.
+     * @return {Object} An object with `route` and `params` properties.
+     *     They are populated if a matching route was found or `undefined`
+     *     otherwise.
+     */
+    findMatchingRoute({ url, sameOrigin, request, event }) {
+      const routes = this._routes.get(request.method) || [];
+      for (const route of routes) {
+        let params;
+        // route.match returns type any, not possible to change right now.
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const matchResult = route.match({
+          url,
+          sameOrigin,
+          request,
+          event,
+        });
+        if (matchResult) {
+          {
+            // Warn developers that using an async matchCallback is almost always
+            // not the right thing to do.
+            if (matchResult instanceof Promise) {
+              logger.warn(
+                `While routing ${getFriendlyURL(url)}, an async ` +
+                  `matchCallback function was used. Please convert the ` +
+                  `following route to use a synchronous matchCallback function:`,
+                route
+              );
+            }
+          }
+          // See https://github.com/GoogleChrome/workbox/issues/2079
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          params = matchResult;
+          if (Array.isArray(params) && params.length === 0) {
+            // Instead of passing an empty array in as params, use undefined.
+            params = undefined;
+          } else if (
+            matchResult.constructor === Object &&
+            // eslint-disable-line
+            Object.keys(matchResult).length === 0
+          ) {
+            // Instead of passing an empty object in as params, use undefined.
+            params = undefined;
+          } else if (typeof matchResult === "boolean") {
+            // For the boolean value true (rather than just something truth-y),
+            // don't set params.
+            // See https://github.com/GoogleChrome/workbox/pull/2134#issuecomment-513924353
+            params = undefined;
+          }
+          // Return early if have a match.
+          return {
+            route,
+            params,
+          };
+        }
+      }
+      // If no match was found above, return and empty object.
+      return {};
+    }
+    /**
+     * Define a default `handler` that's called when no routes explicitly
+     * match the incoming request.
+     *
+     * Each HTTP method ('GET', 'POST', etc.) gets its own default handler.
+     *
+     * Without a default handler, unmatched requests will go against the
+     * network as if there were no service worker present.
+     *
+     * @param {workbox-routing~handlerCallback} handler A callback
+     * function that returns a Promise resulting in a Response.
+     * @param {string} [method='GET'] The HTTP method to associate with this
+     * default handler. Each method has its own default.
+     */
+    setDefaultHandler(handler, method = defaultMethod) {
+      this._defaultHandlerMap.set(method, normalizeHandler(handler));
+    }
+    /**
+     * If a Route throws an error while handling a request, this `handler`
+     * will be called and given a chance to provide a response.
+     *
+     * @param {workbox-routing~handlerCallback} handler A callback
+     * function that returns a Promise resulting in a Response.
+     */
+    setCatchHandler(handler) {
+      this._catchHandler = normalizeHandler(handler);
+    }
+    /**
+     * Registers a route with the router.
+     *
+     * @param {workbox-routing.Route} route The route to register.
+     */
+    registerRoute(route) {
+      {
+        finalAssertExports.isType(route, "object", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route",
+        });
+        finalAssertExports.hasMethod(route, "match", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route",
+        });
+        finalAssertExports.isType(route.handler, "object", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route",
+        });
+        finalAssertExports.hasMethod(route.handler, "handle", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route.handler",
+        });
+        finalAssertExports.isType(route.method, "string", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route.method",
+        });
+      }
+      if (!this._routes.has(route.method)) {
+        this._routes.set(route.method, []);
+      }
+      // Give precedence to all of the earlier routes by adding this additional
+      // route to the end of the array.
+      this._routes.get(route.method).push(route);
+    }
+    /**
+     * Unregisters a route with the router.
+     *
+     * @param {workbox-routing.Route} route The route to unregister.
+     */
+    unregisterRoute(route) {
+      if (!this._routes.has(route.method)) {
+        throw new WorkboxError("unregister-route-but-not-found-with-method", {
+          method: route.method,
+        });
+      }
+      const routeIndex = this._routes.get(route.method).indexOf(route);
+      if (routeIndex > -1) {
+        this._routes.get(route.method).splice(routeIndex, 1);
+      } else {
+        throw new WorkboxError("unregister-route-route-not-registered");
+      }
+    }
+  }
+
+  /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  let defaultRouter;
+  /**
+   * Creates a new, singleton Router instance if one does not exist. If one
+   * does already exist, that instance is returned.
+   *
+   * @private
+   * @return {Router}
+   */
+  const getOrCreateDefaultRouter = () => {
+    if (!defaultRouter) {
+      defaultRouter = new Router();
+      // The helpers that use the default Router assume these listeners exist.
+      defaultRouter.addFetchListener();
+      defaultRouter.addCacheListener();
+    }
+    return defaultRouter;
+  };
+
+  /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * Easily register a RegExp, string, or function with a caching
+   * strategy to a singleton Router instance.
+   *
+   * This method will generate a Route for you if needed and
+   * call {@link workbox-routing.Router#registerRoute}.
+   *
+   * @param {RegExp|string|workbox-routing.Route~matchCallback|workbox-routing.Route} capture
+   * If the capture param is a `Route`, all other arguments will be ignored.
+   * @param {workbox-routing~handlerCallback} [handler] A callback
+   * function that returns a Promise resulting in a Response. This parameter
+   * is required if `capture` is not a `Route` object.
+   * @param {string} [method='GET'] The HTTP method to match the Route
+   * against.
+   * @return {workbox-routing.Route} The generated `Route`.
+   *
+   * @memberof workbox-routing
+   */
+  function registerRoute(capture, handler, method) {
+    let route;
+    if (typeof capture === "string") {
+      const captureUrl = new URL(capture, location.href);
+      {
+        if (!(capture.startsWith("/") || capture.startsWith("http"))) {
+          throw new WorkboxError("invalid-string", {
+            moduleName: "workbox-routing",
+            funcName: "registerRoute",
+            paramName: "capture",
+          });
+        }
+        // We want to check if Express-style wildcards are in the pathname only.
+        // TODO: Remove this log message in v4.
+        const valueToCheck = capture.startsWith("http") ? captureUrl.pathname : capture;
+        // See https://github.com/pillarjs/path-to-regexp#parameters
+        const wildcards = "[*:?+]";
+        if (new RegExp(`${wildcards}`).exec(valueToCheck)) {
+          logger.debug(
+            `The '$capture' parameter contains an Express-style wildcard ` +
+              `character (${wildcards}). Strings are now always interpreted as ` +
+              `exact matches; use a RegExp for partial or wildcard matches.`
+          );
+        }
+      }
+      const matchCallback = ({ url }) => {
+        {
+          if (url.pathname === captureUrl.pathname && url.origin !== captureUrl.origin) {
+            logger.debug(
+              `${capture} only partially matches the cross-origin URL ` +
+                `${url.toString()}. This route will only handle cross-origin requests ` +
+                `if they match the entire URL.`
+            );
+          }
+        }
+        return url.href === captureUrl.href;
+      };
+      // If `capture` is a string then `handler` and `method` must be present.
+      route = new Route(matchCallback, handler, method);
+    } else if (capture instanceof RegExp) {
+      // If `capture` is a `RegExp` then `handler` and `method` must be present.
+      route = new RegExpRoute(capture, handler, method);
+    } else if (typeof capture === "function") {
+      // If `capture` is a function then `handler` and `method` must be present.
+      route = new Route(capture, handler, method);
+    } else if (capture instanceof Route) {
+      route = capture;
+    } else {
+      throw new WorkboxError("unsupported-route-type", {
+        moduleName: "workbox-routing",
+        funcName: "registerRoute",
+        paramName: "capture",
+      });
+    }
+    const defaultRouter = getOrCreateDefaultRouter();
+    defaultRouter.registerRoute(route);
+    return route;
+  }
+
+  // @ts-ignore
+  try {
+    self["workbox:strategies:6.6.0"] && _();
+  } catch (e) {}
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const cacheOkAndOpaquePlugin = {
+    /**
+     * Returns a valid response (to allow caching) if the status is 200 (OK) or
+     * 0 (opaque).
+     *
+     * @param {Object} options
+     * @param {Response} options.response
+     * @return {Response|null}
+     *
+     * @private
+     */
+    cacheWillUpdate: async ({ response }) => {
+      if (response.status === 200 || response.status === 0) {
+        return response;
+      }
+      return null;
+    },
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const _cacheNameDetails = {
+    googleAnalytics: "googleAnalytics",
+    precache: "precache-v2",
+    prefix: "workbox",
+    runtime: "runtime",
+    suffix: typeof registration !== "undefined" ? registration.scope : "",
+  };
+  const _createCacheName = (cacheName) => {
+    return [_cacheNameDetails.prefix, cacheName, _cacheNameDetails.suffix]
+      .filter((value) => value && value.length > 0)
+      .join("-");
+  };
+  const eachCacheNameDetail = (fn) => {
+    for (const key of Object.keys(_cacheNameDetails)) {
+      fn(key);
+    }
+  };
+  const cacheNames = {
+    updateDetails: (details) => {
+      eachCacheNameDetail((key) => {
+        if (typeof details[key] === "string") {
+          _cacheNameDetails[key] = details[key];
+        }
+      });
+    },
+    getGoogleAnalyticsName: (userCacheName) => {
+      return userCacheName || _createCacheName(_cacheNameDetails.googleAnalytics);
+    },
+    getPrecacheName: (userCacheName) => {
+      return userCacheName || _createCacheName(_cacheNameDetails.precache);
+    },
+    getPrefix: () => {
+      return _cacheNameDetails.prefix;
+    },
+    getRuntimeName: (userCacheName) => {
+      return userCacheName || _createCacheName(_cacheNameDetails.runtime);
+    },
+    getSuffix: () => {
+      return _cacheNameDetails.suffix;
+    },
+  };
+
+  /*
+      Copyright 2020 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  function stripParams(fullURL, ignoreParams) {
+    const strippedURL = new URL(fullURL);
+    for (const param of ignoreParams) {
+      strippedURL.searchParams.delete(param);
+    }
+    return strippedURL.href;
+  }
+  /**
+   * Matches an item in the cache, ignoring specific URL params. This is similar
+   * to the `ignoreSearch` option, but it allows you to ignore just specific
+   * params (while continuing to match on the others).
+   *
+   * @private
+   * @param {Cache} cache
+   * @param {Request} request
+   * @param {Object} matchOptions
+   * @param {Array<string>} ignoreParams
+   * @return {Promise<Response|undefined>}
+   */
+  async function cacheMatchIgnoreParams(cache, request, ignoreParams, matchOptions) {
+    const strippedRequestURL = stripParams(request.url, ignoreParams);
+    // If the request doesn't include any ignored params, match as normal.
+    if (request.url === strippedRequestURL) {
+      return cache.match(request, matchOptions);
+    }
+    // Otherwise, match by comparing keys
+    const keysOptions = Object.assign(Object.assign({}, matchOptions), {
+      ignoreSearch: true,
+    });
+    const cacheKeys = await cache.keys(request, keysOptions);
+    for (const cacheKey of cacheKeys) {
+      const strippedCacheKeyURL = stripParams(cacheKey.url, ignoreParams);
+      if (strippedRequestURL === strippedCacheKeyURL) {
+        return cache.match(cacheKey, matchOptions);
+      }
+    }
+    return;
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * The Deferred class composes Promises in a way that allows for them to be
+   * resolved or rejected from outside the constructor. In most cases promises
+   * should be used directly, but Deferreds can be necessary when the logic to
+   * resolve a promise must be separate.
+   *
+   * @private
+   */
+  class Deferred {
+    /**
+     * Creates a promise and exposes its resolve and reject functions as methods.
+     */
+    constructor() {
+      this.promise = new Promise((resolve, reject) => {
+        this.resolve = resolve;
+        this.reject = reject;
+      });
+    }
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  // Callbacks to be executed whenever there's a quota error.
+  // Can't change Function type right now.
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  const quotaErrorCallbacks = new Set();
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * Runs all of the callback functions, one at a time sequentially, in the order
+   * in which they were registered.
+   *
+   * @memberof workbox-core
+   * @private
+   */
+  async function executeQuotaErrorCallbacks() {
+    {
+      logger.log(`About to run ${quotaErrorCallbacks.size} ` + `callbacks to clean up caches.`);
+    }
+    for (const callback of quotaErrorCallbacks) {
+      await callback();
+      {
+        logger.log(callback, "is complete.");
+      }
+    }
+    {
+      logger.log("Finished running callbacks.");
+    }
+  }
+
+  /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * Returns a promise that resolves and the passed number of milliseconds.
+   * This utility is an async/await-friendly version of `setTimeout`.
+   *
+   * @param {number} ms
+   * @return {Promise}
+   * @private
+   */
+  function timeout(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  function toRequest(input) {
+    return typeof input === "string" ? new Request(input) : input;
+  }
+  /**
+   * A class created every time a Strategy instance instance calls
+   * {@link workbox-strategies.Strategy~handle} or
+   * {@link workbox-strategies.Strategy~handleAll} that wraps all fetch and
+   * cache actions around plugin callbacks and keeps track of when the strategy
+   * is "done" (i.e. all added `event.waitUntil()` promises have resolved).
+   *
+   * @memberof workbox-strategies
+   */
+  class StrategyHandler {
+    /**
+     * Creates a new instance associated with the passed strategy and event
+     * that's handling the request.
+     *
+     * The constructor also initializes the state that will be passed to each of
+     * the plugins handling this request.
+     *
+     * @param {workbox-strategies.Strategy} strategy
+     * @param {Object} options
+     * @param {Request|string} options.request A request to run this strategy for.
+     * @param {ExtendableEvent} options.event The event associated with the
+     *     request.
+     * @param {URL} [options.url]
+     * @param {*} [options.params] The return value from the
+     *     {@link workbox-routing~matchCallback} (if applicable).
+     */
+    constructor(strategy, options) {
+      this._cacheKeys = {};
+      /**
+       * The request the strategy is performing (passed to the strategy's
+       * `handle()` or `handleAll()` method).
+       * @name request
+       * @instance
+       * @type {Request}
+       * @memberof workbox-strategies.StrategyHandler
+       */
+      /**
+       * The event associated with this request.
+       * @name event
+       * @instance
+       * @type {ExtendableEvent}
+       * @memberof workbox-strategies.StrategyHandler
+       */
+      /**
+       * A `URL` instance of `request.url` (if passed to the strategy's
+       * `handle()` or `handleAll()` method).
+       * Note: the `url` param will be present if the strategy was invoked
+       * from a workbox `Route` object.
+       * @name url
+       * @instance
+       * @type {URL|undefined}
+       * @memberof workbox-strategies.StrategyHandler
+       */
+      /**
+       * A `param` value (if passed to the strategy's
+       * `handle()` or `handleAll()` method).
+       * Note: the `param` param will be present if the strategy was invoked
+       * from a workbox `Route` object and the
+       * {@link workbox-routing~matchCallback} returned
+       * a truthy value (it will be that value).
+       * @name params
+       * @instance
+       * @type {*|undefined}
+       * @memberof workbox-strategies.StrategyHandler
+       */
+      {
+        finalAssertExports.isInstance(options.event, ExtendableEvent, {
+          moduleName: "workbox-strategies",
+          className: "StrategyHandler",
+          funcName: "constructor",
+          paramName: "options.event",
+        });
+      }
+      Object.assign(this, options);
+      this.event = options.event;
+      this._strategy = strategy;
+      this._handlerDeferred = new Deferred();
+      this._extendLifetimePromises = [];
+      // Copy the plugins list (since it's mutable on the strategy),
+      // so any mutations don't affect this handler instance.
+      this._plugins = [...strategy.plugins];
+      this._pluginStateMap = new Map();
+      for (const plugin of this._plugins) {
+        this._pluginStateMap.set(plugin, {});
+      }
+      this.event.waitUntil(this._handlerDeferred.promise);
+    }
+    /**
+     * Fetches a given request (and invokes any applicable plugin callback
+     * methods) using the `fetchOptions` (for non-navigation requests) and
+     * `plugins` defined on the `Strategy` object.
+     *
+     * The following plugin lifecycle methods are invoked when using this method:
+     * - `requestWillFetch()`
+     * - `fetchDidSucceed()`
+     * - `fetchDidFail()`
+     *
+     * @param {Request|string} input The URL or request to fetch.
+     * @return {Promise<Response>}
+     */
+    async fetch(input) {
+      const { event } = this;
+      let request = toRequest(input);
+      if (request.mode === "navigate" && event instanceof FetchEvent && event.preloadResponse) {
+        const possiblePreloadResponse = await event.preloadResponse;
+        if (possiblePreloadResponse) {
+          {
+            logger.log(`Using a preloaded navigation response for ` + `'${getFriendlyURL(request.url)}'`);
+          }
+          return possiblePreloadResponse;
+        }
+      }
+      // If there is a fetchDidFail plugin, we need to save a clone of the
+      // original request before it's either modified by a requestWillFetch
+      // plugin or before the original request's body is consumed via fetch().
+      const originalRequest = this.hasCallback("fetchDidFail") ? request.clone() : null;
+      try {
+        for (const cb of this.iterateCallbacks("requestWillFetch")) {
+          request = await cb({
+            request: request.clone(),
+            event,
+          });
+        }
+      } catch (err) {
+        if (err instanceof Error) {
+          throw new WorkboxError("plugin-error-request-will-fetch", {
+            thrownErrorMessage: err.message,
+          });
+        }
+      }
+      // The request can be altered by plugins with `requestWillFetch` making
+      // the original request (most likely from a `fetch` event) different
+      // from the Request we make. Pass both to `fetchDidFail` to aid debugging.
+      const pluginFilteredRequest = request.clone();
+      try {
+        let fetchResponse;
+        // See https://github.com/GoogleChrome/workbox/issues/1796
+        fetchResponse = await fetch(request, request.mode === "navigate" ? undefined : this._strategy.fetchOptions);
+        if ("development" !== "production") {
+          logger.debug(
+            `Network request for ` +
+              `'${getFriendlyURL(request.url)}' returned a response with ` +
+              `status '${fetchResponse.status}'.`
+          );
+        }
+        for (const callback of this.iterateCallbacks("fetchDidSucceed")) {
+          fetchResponse = await callback({
+            event,
+            request: pluginFilteredRequest,
+            response: fetchResponse,
+          });
+        }
+        return fetchResponse;
+      } catch (error) {
+        {
+          logger.log(`Network request for ` + `'${getFriendlyURL(request.url)}' threw an error.`, error);
+        }
+        // `originalRequest` will only exist if a `fetchDidFail` callback
+        // is being used (see above).
+        if (originalRequest) {
+          await this.runCallbacks("fetchDidFail", {
+            error: error,
+            event,
+            originalRequest: originalRequest.clone(),
+            request: pluginFilteredRequest.clone(),
+          });
+        }
+        throw error;
+      }
+    }
+    /**
+     * Calls `this.fetch()` and (in the background) runs `this.cachePut()` on
+     * the response generated by `this.fetch()`.
+     *
+     * The call to `this.cachePut()` automatically invokes `this.waitUntil()`,
+     * so you do not have to manually call `waitUntil()` on the event.
+     *
+     * @param {Request|string} input The request or URL to fetch and cache.
+     * @return {Promise<Response>}
+     */
+    async fetchAndCachePut(input) {
+      const response = await this.fetch(input);
+      const responseClone = response.clone();
+      void this.waitUntil(this.cachePut(input, responseClone));
+      return response;
+    }
+    /**
+     * Matches a request from the cache (and invokes any applicable plugin
+     * callback methods) using the `cacheName`, `matchOptions`, and `plugins`
+     * defined on the strategy object.
+     *
+     * The following plugin lifecycle methods are invoked when using this method:
+     * - cacheKeyWillByUsed()
+     * - cachedResponseWillByUsed()
+     *
+     * @param {Request|string} key The Request or URL to use as the cache key.
+     * @return {Promise<Response|undefined>} A matching response, if found.
+     */
+    async cacheMatch(key) {
+      const request = toRequest(key);
+      let cachedResponse;
+      const { cacheName, matchOptions } = this._strategy;
+      const effectiveRequest = await this.getCacheKey(request, "read");
+      const multiMatchOptions = Object.assign(Object.assign({}, matchOptions), {
+        cacheName,
+      });
+      cachedResponse = await caches.match(effectiveRequest, multiMatchOptions);
+      {
+        if (cachedResponse) {
+          logger.debug(`Found a cached response in '${cacheName}'.`);
+        } else {
+          logger.debug(`No cached response found in '${cacheName}'.`);
+        }
+      }
+      for (const callback of this.iterateCallbacks("cachedResponseWillBeUsed")) {
+        cachedResponse =
+          (await callback({
+            cacheName,
+            matchOptions,
+            cachedResponse,
+            request: effectiveRequest,
+            event: this.event,
+          })) || undefined;
+      }
+      return cachedResponse;
+    }
+    /**
+     * Puts a request/response pair in the cache (and invokes any applicable
+     * plugin callback methods) using the `cacheName` and `plugins` defined on
+     * the strategy object.
+     *
+     * The following plugin lifecycle methods are invoked when using this method:
+     * - cacheKeyWillByUsed()
+     * - cacheWillUpdate()
+     * - cacheDidUpdate()
+     *
+     * @param {Request|string} key The request or URL to use as the cache key.
+     * @param {Response} response The response to cache.
+     * @return {Promise<boolean>} `false` if a cacheWillUpdate caused the response
+     * not be cached, and `true` otherwise.
+     */
+    async cachePut(key, response) {
+      const request = toRequest(key);
+      // Run in the next task to avoid blocking other cache reads.
+      // https://github.com/w3c/ServiceWorker/issues/1397
+      await timeout(0);
+      const effectiveRequest = await this.getCacheKey(request, "write");
+      {
+        if (effectiveRequest.method && effectiveRequest.method !== "GET") {
+          throw new WorkboxError("attempt-to-cache-non-get-request", {
+            url: getFriendlyURL(effectiveRequest.url),
+            method: effectiveRequest.method,
+          });
+        }
+        // See https://github.com/GoogleChrome/workbox/issues/2818
+        const vary = response.headers.get("Vary");
+        if (vary) {
+          logger.debug(
+            `The response for ${getFriendlyURL(effectiveRequest.url)} ` +
+              `has a 'Vary: ${vary}' header. ` +
+              `Consider setting the {ignoreVary: true} option on your strategy ` +
+              `to ensure cache matching and deletion works as expected.`
+          );
+        }
+      }
+      if (!response) {
+        {
+          logger.error(`Cannot cache non-existent response for ` + `'${getFriendlyURL(effectiveRequest.url)}'.`);
+        }
+        throw new WorkboxError("cache-put-with-no-response", {
+          url: getFriendlyURL(effectiveRequest.url),
+        });
+      }
+      const responseToCache = await this._ensureResponseSafeToCache(response);
+      if (!responseToCache) {
+        {
+          logger.debug(`Response '${getFriendlyURL(effectiveRequest.url)}' ` + `will not be cached.`, responseToCache);
+        }
+        return false;
+      }
+      const { cacheName, matchOptions } = this._strategy;
+      const cache = await self.caches.open(cacheName);
+      const hasCacheUpdateCallback = this.hasCallback("cacheDidUpdate");
+      const oldResponse = hasCacheUpdateCallback
+        ? await cacheMatchIgnoreParams(
+            // TODO(philipwalton): the `__WB_REVISION__` param is a precaching
+            // feature. Consider into ways to only add this behavior if using
+            // precaching.
+            cache,
+            effectiveRequest.clone(),
+            ["__WB_REVISION__"],
+            matchOptions
+          )
+        : null;
+      {
+        logger.debug(
+          `Updating the '${cacheName}' cache with a new Response ` + `for ${getFriendlyURL(effectiveRequest.url)}.`
+        );
+      }
+      try {
+        await cache.put(effectiveRequest, hasCacheUpdateCallback ? responseToCache.clone() : responseToCache);
+      } catch (error) {
+        if (error instanceof Error) {
+          // See https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-QuotaExceededError
+          if (error.name === "QuotaExceededError") {
+            await executeQuotaErrorCallbacks();
+          }
+          throw error;
+        }
+      }
+      for (const callback of this.iterateCallbacks("cacheDidUpdate")) {
+        await callback({
+          cacheName,
+          oldResponse,
+          newResponse: responseToCache.clone(),
+          request: effectiveRequest,
+          event: this.event,
+        });
+      }
+      return true;
+    }
+    /**
+     * Checks the list of plugins for the `cacheKeyWillBeUsed` callback, and
+     * executes any of those callbacks found in sequence. The final `Request`
+     * object returned by the last plugin is treated as the cache key for cache
+     * reads and/or writes. If no `cacheKeyWillBeUsed` plugin callbacks have
+     * been registered, the passed request is returned unmodified
+     *
+     * @param {Request} request
+     * @param {string} mode
+     * @return {Promise<Request>}
+     */
+    async getCacheKey(request, mode) {
+      const key = `${request.url} | ${mode}`;
+      if (!this._cacheKeys[key]) {
+        let effectiveRequest = request;
+        for (const callback of this.iterateCallbacks("cacheKeyWillBeUsed")) {
+          effectiveRequest = toRequest(
+            await callback({
+              mode,
+              request: effectiveRequest,
+              event: this.event,
+              // params has a type any can't change right now.
+              params: this.params, // eslint-disable-line
+            })
+          );
+        }
+        this._cacheKeys[key] = effectiveRequest;
+      }
+      return this._cacheKeys[key];
+    }
+    /**
+     * Returns true if the strategy has at least one plugin with the given
+     * callback.
+     *
+     * @param {string} name The name of the callback to check for.
+     * @return {boolean}
+     */
+    hasCallback(name) {
+      for (const plugin of this._strategy.plugins) {
+        if (name in plugin) {
+          return true;
+        }
+      }
+      return false;
+    }
+    /**
+     * Runs all plugin callbacks matching the given name, in order, passing the
+     * given param object (merged ith the current plugin state) as the only
+     * argument.
+     *
+     * Note: since this method runs all plugins, it's not suitable for cases
+     * where the return value of a callback needs to be applied prior to calling
+     * the next callback. See
+     * {@link workbox-strategies.StrategyHandler#iterateCallbacks}
+     * below for how to handle that case.
+     *
+     * @param {string} name The name of the callback to run within each plugin.
+     * @param {Object} param The object to pass as the first (and only) param
+     *     when executing each callback. This object will be merged with the
+     *     current plugin state prior to callback execution.
+     */
+    async runCallbacks(name, param) {
+      for (const callback of this.iterateCallbacks(name)) {
+        // TODO(philipwalton): not sure why `any` is needed. It seems like
+        // this should work with `as WorkboxPluginCallbackParam[C]`.
+        await callback(param);
+      }
+    }
+    /**
+     * Accepts a callback and returns an iterable of matching plugin callbacks,
+     * where each callback is wrapped with the current handler state (i.e. when
+     * you call each callback, whatever object parameter you pass it will
+     * be merged with the plugin's current state).
+     *
+     * @param {string} name The name fo the callback to run
+     * @return {Array<Function>}
+     */
+    *iterateCallbacks(name) {
+      for (const plugin of this._strategy.plugins) {
+        if (typeof plugin[name] === "function") {
+          const state = this._pluginStateMap.get(plugin);
+          const statefulCallback = (param) => {
+            const statefulParam = Object.assign(Object.assign({}, param), {
+              state,
+            });
+            // TODO(philipwalton): not sure why `any` is needed. It seems like
+            // this should work with `as WorkboxPluginCallbackParam[C]`.
+            return plugin[name](statefulParam);
+          };
+          yield statefulCallback;
+        }
+      }
+    }
+    /**
+     * Adds a promise to the
+     * [extend lifetime promises]{@link https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises}
+     * of the event event associated with the request being handled (usually a
+     * `FetchEvent`).
+     *
+     * Note: you can await
+     * {@link workbox-strategies.StrategyHandler~doneWaiting}
+     * to know when all added promises have settled.
+     *
+     * @param {Promise} promise A promise to add to the extend lifetime promises
+     *     of the event that triggered the request.
+     */
+    waitUntil(promise) {
+      this._extendLifetimePromises.push(promise);
+      return promise;
+    }
+    /**
+     * Returns a promise that resolves once all promises passed to
+     * {@link workbox-strategies.StrategyHandler~waitUntil}
+     * have settled.
+     *
+     * Note: any work done after `doneWaiting()` settles should be manually
+     * passed to an event's `waitUntil()` method (not this handler's
+     * `waitUntil()` method), otherwise the service worker thread my be killed
+     * prior to your work completing.
+     */
+    async doneWaiting() {
+      let promise;
+      while ((promise = this._extendLifetimePromises.shift())) {
+        await promise;
+      }
+    }
+    /**
+     * Stops running the strategy and immediately resolves any pending
+     * `waitUntil()` promises.
+     */
+    destroy() {
+      this._handlerDeferred.resolve(null);
+    }
+    /**
+     * This method will call cacheWillUpdate on the available plugins (or use
+     * status === 200) to determine if the Response is safe and valid to cache.
+     *
+     * @param {Request} options.request
+     * @param {Response} options.response
+     * @return {Promise<Response|undefined>}
+     *
+     * @private
+     */
+    async _ensureResponseSafeToCache(response) {
+      let responseToCache = response;
+      let pluginsUsed = false;
+      for (const callback of this.iterateCallbacks("cacheWillUpdate")) {
+        responseToCache =
+          (await callback({
+            request: this.request,
+            response: responseToCache,
+            event: this.event,
+          })) || undefined;
+        pluginsUsed = true;
+        if (!responseToCache) {
+          break;
+        }
+      }
+      if (!pluginsUsed) {
+        if (responseToCache && responseToCache.status !== 200) {
+          responseToCache = undefined;
+        }
+        {
+          if (responseToCache) {
+            if (responseToCache.status !== 200) {
+              if (responseToCache.status === 0) {
+                logger.warn(
+                  `The response for '${this.request.url}' ` +
+                    `is an opaque response. The caching strategy that you're ` +
+                    `using will not cache opaque responses by default.`
+                );
+              } else {
+                logger.debug(
+                  `The response for '${this.request.url}' ` +
+                    `returned a status code of '${response.status}' and won't ` +
+                    `be cached as a result.`
+                );
+              }
+            }
+          }
+        }
+      }
+      return responseToCache;
+    }
+  }
+
+  /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * An abstract base class that all other strategy classes must extend from:
+   *
+   * @memberof workbox-strategies
+   */
+  class Strategy {
+    /**
+     * Creates a new instance of the strategy and sets all documented option
+     * properties as public instance properties.
+     *
+     * Note: if a custom strategy class extends the base Strategy class and does
+     * not need more than these properties, it does not need to define its own
+     * constructor.
+     *
+     * @param {Object} [options]
+     * @param {string} [options.cacheName] Cache name to store and retrieve
+     * requests. Defaults to the cache names provided by
+     * {@link workbox-core.cacheNames}.
+     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+     * to use in conjunction with this caching strategy.
+     * @param {Object} [options.fetchOptions] Values passed along to the
+     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+     * `fetch()` requests made by this strategy.
+     * @param {Object} [options.matchOptions] The
+     * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
+     * for any `cache.match()` or `cache.put()` calls made by this strategy.
+     */
+    constructor(options = {}) {
+      /**
+       * Cache name to store and retrieve
+       * requests. Defaults to the cache names provided by
+       * {@link workbox-core.cacheNames}.
+       *
+       * @type {string}
+       */
+      this.cacheName = cacheNames.getRuntimeName(options.cacheName);
+      /**
+       * The list
+       * [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+       * used by this strategy.
+       *
+       * @type {Array<Object>}
+       */
+      this.plugins = options.plugins || [];
+      /**
+       * Values passed along to the
+       * [`init`]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters}
+       * of all fetch() requests made by this strategy.
+       *
+       * @type {Object}
+       */
+      this.fetchOptions = options.fetchOptions;
+      /**
+       * The
+       * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
+       * for any `cache.match()` or `cache.put()` calls made by this strategy.
+       *
+       * @type {Object}
+       */
+      this.matchOptions = options.matchOptions;
+    }
+    /**
+     * Perform a request strategy and returns a `Promise` that will resolve with
+     * a `Response`, invoking all relevant plugin callbacks.
+     *
+     * When a strategy instance is registered with a Workbox
+     * {@link workbox-routing.Route}, this method is automatically
+     * called when the route matches.
+     *
+     * Alternatively, this method can be used in a standalone `FetchEvent`
+     * listener by passing it to `event.respondWith()`.
+     *
+     * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+     *     properties listed below.
+     * @param {Request|string} options.request A request to run this strategy for.
+     * @param {ExtendableEvent} options.event The event associated with the
+     *     request.
+     * @param {URL} [options.url]
+     * @param {*} [options.params]
+     */
+    handle(options) {
+      const [responseDone] = this.handleAll(options);
+      return responseDone;
+    }
+    /**
+     * Similar to {@link workbox-strategies.Strategy~handle}, but
+     * instead of just returning a `Promise` that resolves to a `Response` it
+     * it will return an tuple of `[response, done]` promises, where the former
+     * (`response`) is equivalent to what `handle()` returns, and the latter is a
+     * Promise that will resolve once any promises that were added to
+     * `event.waitUntil()` as part of performing the strategy have completed.
+     *
+     * You can await the `done` promise to ensure any extra work performed by
+     * the strategy (usually caching responses) completes successfully.
+     *
+     * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+     *     properties listed below.
+     * @param {Request|string} options.request A request to run this strategy for.
+     * @param {ExtendableEvent} options.event The event associated with the
+     *     request.
+     * @param {URL} [options.url]
+     * @param {*} [options.params]
+     * @return {Array<Promise>} A tuple of [response, done]
+     *     promises that can be used to determine when the response resolves as
+     *     well as when the handler has completed all its work.
+     */
+    handleAll(options) {
+      // Allow for flexible options to be passed.
+      if (options instanceof FetchEvent) {
+        options = {
+          event: options,
+          request: options.request,
+        };
+      }
+      const event = options.event;
+      const request = typeof options.request === "string" ? new Request(options.request) : options.request;
+      const params = "params" in options ? options.params : undefined;
+      const handler = new StrategyHandler(this, {
+        event,
+        request,
+        params,
+      });
+      const responseDone = this._getResponse(handler, request, event);
+      const handlerDone = this._awaitComplete(responseDone, handler, request, event);
+      // Return an array of promises, suitable for use with Promise.all().
+      return [responseDone, handlerDone];
+    }
+    async _getResponse(handler, request, event) {
+      await handler.runCallbacks("handlerWillStart", {
+        event,
+        request,
+      });
+      let response = undefined;
+      try {
+        response = await this._handle(request, handler);
+        // The "official" Strategy subclasses all throw this error automatically,
+        // but in case a third-party Strategy doesn't, ensure that we have a
+        // consistent failure when there's no response or an error response.
+        if (!response || response.type === "error") {
+          throw new WorkboxError("no-response", {
+            url: request.url,
+          });
+        }
+      } catch (error) {
+        if (error instanceof Error) {
+          for (const callback of handler.iterateCallbacks("handlerDidError")) {
+            response = await callback({
+              error,
+              event,
+              request,
+            });
+            if (response) {
+              break;
+            }
+          }
+        }
+        if (!response) {
+          throw error;
+        } else {
+          logger.log(
+            `While responding to '${getFriendlyURL(request.url)}', ` +
+              `an ${error instanceof Error ? error.toString() : ""} error occurred. Using a fallback response provided by ` +
+              `a handlerDidError plugin.`
+          );
+        }
+      }
+      for (const callback of handler.iterateCallbacks("handlerWillRespond")) {
+        response = await callback({
+          event,
+          request,
+          response,
+        });
+      }
+      return response;
+    }
+    async _awaitComplete(responseDone, handler, request, event) {
+      let response;
+      let error;
+      try {
+        response = await responseDone;
+      } catch (error) {
+        // Ignore errors, as response errors should be caught via the `response`
+        // promise above. The `done` promise will only throw for errors in
+        // promises passed to `handler.waitUntil()`.
+      }
+      try {
+        await handler.runCallbacks("handlerDidRespond", {
+          event,
+          request,
+          response,
+        });
+        await handler.doneWaiting();
+      } catch (waitUntilError) {
+        if (waitUntilError instanceof Error) {
+          error = waitUntilError;
+        }
+      }
+      await handler.runCallbacks("handlerDidComplete", {
+        event,
+        request,
+        response,
+        error: error,
+      });
+      handler.destroy();
+      if (error) {
+        throw error;
+      }
+    }
+  }
+  /**
+   * Classes extending the `Strategy` based class should implement this method,
+   * and leverage the {@link workbox-strategies.StrategyHandler}
+   * arg to perform all fetching and cache logic, which will ensure all relevant
+   * cache, cache options, fetch options and plugins are used (per the current
+   * strategy instance).
+   *
+   * @name _handle
+   * @instance
+   * @abstract
+   * @function
+   * @param {Request} request
+   * @param {workbox-strategies.StrategyHandler} handler
+   * @return {Promise<Response>}
+   *
+   * @memberof workbox-strategies.Strategy
+   */
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const messages = {
+    strategyStart: (strategyName, request) => `Using ${strategyName} to respond to '${getFriendlyURL(request.url)}'`,
+    printFinalResponse: (response) => {
+      if (response) {
+        logger.groupCollapsed(`View the final response here.`);
+        logger.log(response || "[No response returned]");
+        logger.groupEnd();
+      }
+    },
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * An implementation of a
+   * [network first](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-first-falling-back-to-cache)
+   * request strategy.
+   *
+   * By default, this strategy will cache responses with a 200 status code as
+   * well as [opaque responses](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#opaque-responses).
+   * Opaque responses are are cross-origin requests where the response doesn't
+   * support [CORS](https://enable-cors.org/).
+   *
+   * If the network request fails, and there is no cache match, this will throw
+   * a `WorkboxError` exception.
+   *
+   * @extends workbox-strategies.Strategy
+   * @memberof workbox-strategies
+   */
+  class NetworkFirst extends Strategy {
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.cacheName] Cache name to store and retrieve
+     * requests. Defaults to cache names provided by
+     * {@link workbox-core.cacheNames}.
+     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+     * to use in conjunction with this caching strategy.
+     * @param {Object} [options.fetchOptions] Values passed along to the
+     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+     * `fetch()` requests made by this strategy.
+     * @param {Object} [options.matchOptions] [`CacheQueryOptions`](https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions)
+     * @param {number} [options.networkTimeoutSeconds] If set, any network requests
+     * that fail to respond within the timeout will fallback to the cache.
+     *
+     * This option can be used to combat
+     * "[lie-fi]{@link https://developers.google.com/web/fundamentals/performance/poor-connectivity/#lie-fi}"
+     * scenarios.
+     */
+    constructor(options = {}) {
+      super(options);
+      // If this instance contains no plugins with a 'cacheWillUpdate' callback,
+      // prepend the `cacheOkAndOpaquePlugin` plugin to the plugins list.
+      if (!this.plugins.some((p) => "cacheWillUpdate" in p)) {
+        this.plugins.unshift(cacheOkAndOpaquePlugin);
+      }
+      this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;
+      {
+        if (this._networkTimeoutSeconds) {
+          finalAssertExports.isType(this._networkTimeoutSeconds, "number", {
+            moduleName: "workbox-strategies",
+            className: this.constructor.name,
+            funcName: "constructor",
+            paramName: "networkTimeoutSeconds",
+          });
+        }
+      }
+    }
+    /**
+     * @private
+     * @param {Request|string} request A request to run this strategy for.
+     * @param {workbox-strategies.StrategyHandler} handler The event that
+     *     triggered the request.
+     * @return {Promise<Response>}
+     */
+    async _handle(request, handler) {
+      const logs = [];
+      {
+        finalAssertExports.isInstance(request, Request, {
+          moduleName: "workbox-strategies",
+          className: this.constructor.name,
+          funcName: "handle",
+          paramName: "makeRequest",
+        });
+      }
+      const promises = [];
+      let timeoutId;
+      if (this._networkTimeoutSeconds) {
+        const { id, promise } = this._getTimeoutPromise({
+          request,
+          logs,
+          handler,
+        });
+        timeoutId = id;
+        promises.push(promise);
+      }
+      const networkPromise = this._getNetworkPromise({
+        timeoutId,
+        request,
+        logs,
+        handler,
+      });
+      promises.push(networkPromise);
+      const response = await handler.waitUntil(
+        (async () => {
+          // Promise.race() will resolve as soon as the first promise resolves.
+          return (
+            (await handler.waitUntil(Promise.race(promises))) ||
+            // If Promise.race() resolved with null, it might be due to a network
+            // timeout + a cache miss. If that were to happen, we'd rather wait until
+            // the networkPromise resolves instead of returning null.
+            // Note that it's fine to await an already-resolved promise, so we don't
+            // have to check to see if it's still "in flight".
+            (await networkPromise)
+          );
+        })()
+      );
+      {
+        logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));
+        for (const log of logs) {
+          logger.log(log);
+        }
+        messages.printFinalResponse(response);
+        logger.groupEnd();
+      }
+      if (!response) {
+        throw new WorkboxError("no-response", {
+          url: request.url,
+        });
+      }
+      return response;
+    }
+    /**
+     * @param {Object} options
+     * @param {Request} options.request
+     * @param {Array} options.logs A reference to the logs array
+     * @param {Event} options.event
+     * @return {Promise<Response>}
+     *
+     * @private
+     */
+    _getTimeoutPromise({ request, logs, handler }) {
+      let timeoutId;
+      const timeoutPromise = new Promise((resolve) => {
+        const onNetworkTimeout = async () => {
+          {
+            logs.push(`Timing out the network response at ` + `${this._networkTimeoutSeconds} seconds.`);
+          }
+          resolve(await handler.cacheMatch(request));
+        };
+        timeoutId = setTimeout(onNetworkTimeout, this._networkTimeoutSeconds * 1000);
+      });
+      return {
+        promise: timeoutPromise,
+        id: timeoutId,
+      };
+    }
+    /**
+     * @param {Object} options
+     * @param {number|undefined} options.timeoutId
+     * @param {Request} options.request
+     * @param {Array} options.logs A reference to the logs Array.
+     * @param {Event} options.event
+     * @return {Promise<Response>}
+     *
+     * @private
+     */
+    async _getNetworkPromise({ timeoutId, request, logs, handler }) {
+      let error;
+      let response;
+      try {
+        response = await handler.fetchAndCachePut(request);
+      } catch (fetchError) {
+        if (fetchError instanceof Error) {
+          error = fetchError;
+        }
+      }
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      {
+        if (response) {
+          logs.push(`Got response from network.`);
+        } else {
+          logs.push(`Unable to get a response from the network. Will respond ` + `with a cached response.`);
+        }
+      }
+      if (error || !response) {
+        response = await handler.cacheMatch(request);
+        {
+          if (response) {
+            logs.push(`Found a cached response in the '${this.cacheName}'` + ` cache.`);
+          } else {
+            logs.push(`No response found in the '${this.cacheName}' cache.`);
+          }
+        }
+      }
+      return response;
+    }
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * An implementation of a
+   * [network-only](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-only)
+   * request strategy.
+   *
+   * This class is useful if you want to take advantage of any
+   * [Workbox plugins](https://developer.chrome.com/docs/workbox/using-plugins/).
+   *
+   * If the network request fails, this will throw a `WorkboxError` exception.
+   *
+   * @extends workbox-strategies.Strategy
+   * @memberof workbox-strategies
+   */
+  class NetworkOnly extends Strategy {
+    /**
+     * @param {Object} [options]
+     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+     * to use in conjunction with this caching strategy.
+     * @param {Object} [options.fetchOptions] Values passed along to the
+     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+     * `fetch()` requests made by this strategy.
+     * @param {number} [options.networkTimeoutSeconds] If set, any network requests
+     * that fail to respond within the timeout will result in a network error.
+     */
+    constructor(options = {}) {
+      super(options);
+      this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;
+    }
+    /**
+     * @private
+     * @param {Request|string} request A request to run this strategy for.
+     * @param {workbox-strategies.StrategyHandler} handler The event that
+     *     triggered the request.
+     * @return {Promise<Response>}
+     */
+    async _handle(request, handler) {
+      {
+        finalAssertExports.isInstance(request, Request, {
+          moduleName: "workbox-strategies",
+          className: this.constructor.name,
+          funcName: "_handle",
+          paramName: "request",
+        });
+      }
+      let error = undefined;
+      let response;
+      try {
+        const promises = [handler.fetch(request)];
+        if (this._networkTimeoutSeconds) {
+          const timeoutPromise = timeout(this._networkTimeoutSeconds * 1000);
+          promises.push(timeoutPromise);
+        }
+        response = await Promise.race(promises);
+        if (!response) {
+          throw new Error(`Timed out the network response after ` + `${this._networkTimeoutSeconds} seconds.`);
+        }
+      } catch (err) {
+        if (err instanceof Error) {
+          error = err;
+        }
+      }
+      {
+        logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));
+        if (response) {
+          logger.log(`Got response from network.`);
+        } else {
+          logger.log(`Unable to get a response from the network.`);
+        }
+        messages.printFinalResponse(response);
+        logger.groupEnd();
+      }
+      if (!response) {
+        throw new WorkboxError("no-response", {
+          url: request.url,
+          error,
+        });
+      }
+      return response;
+    }
+  }
+
+  /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * Claim any currently available clients once the service worker
+   * becomes active. This is normally used in conjunction with `skipWaiting()`.
+   *
+   * @memberof workbox-core
+   */
+  function clientsClaim() {
+    self.addEventListener("activate", () => self.clients.claim());
+  }
+
+  exports.NetworkFirst = NetworkFirst;
+  exports.NetworkOnly = NetworkOnly;
+  exports.clientsClaim = clientsClaim;
+  exports.registerRoute = registerRoute;
+});
+//# sourceMappingURL=workbox-9f2f79cf.js.map
diff --git a/apps/web/public/workbox-9f2f79cf.js.map b/apps/web/public/workbox-9f2f79cf.js.map
new file mode 100644
index 0000000..8bdd51e
--- /dev/null
+++ b/apps/web/public/workbox-9f2f79cf.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"workbox-9f2f79cf.js","sources":["../node_modules/workbox-core/_version.js","../node_modules/workbox-core/_private/logger.js","../node_modules/workbox-core/models/messages/messages.js","../node_modules/workbox-core/models/messages/messageGenerator.js","../node_modules/workbox-core/_private/WorkboxError.js","../node_modules/workbox-core/_private/assert.js","../node_modules/workbox-routing/_version.js","../node_modules/workbox-routing/utils/constants.js","../node_modules/workbox-routing/utils/normalizeHandler.js","../node_modules/workbox-routing/Route.js","../node_modules/workbox-routing/RegExpRoute.js","../node_modules/workbox-core/_private/getFriendlyURL.js","../node_modules/workbox-routing/Router.js","../node_modules/workbox-routing/utils/getOrCreateDefaultRouter.js","../node_modules/workbox-routing/registerRoute.js","../node_modules/workbox-strategies/_version.js","../node_modules/workbox-strategies/plugins/cacheOkAndOpaquePlugin.js","../node_modules/workbox-core/_private/cacheNames.js","../node_modules/workbox-core/_private/cacheMatchIgnoreParams.js","../node_modules/workbox-core/_private/Deferred.js","../node_modules/workbox-core/models/quotaErrorCallbacks.js","../node_modules/workbox-core/_private/executeQuotaErrorCallbacks.js","../node_modules/workbox-core/_private/timeout.js","../node_modules/workbox-strategies/StrategyHandler.js","../node_modules/workbox-strategies/Strategy.js","../node_modules/workbox-strategies/utils/messages.js","../node_modules/workbox-strategies/NetworkFirst.js","../node_modules/workbox-strategies/NetworkOnly.js","../node_modules/workbox-core/clientsClaim.js"],"sourcesContent":["\"use strict\";\n// @ts-ignore\ntry {\n    self['workbox:core:6.6.0'] && _();\n}\ncatch (e) { }\n","/*\n  Copyright 2019 Google LLC\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nconst logger = (process.env.NODE_ENV === 'production'\n    ? null\n    : (() => {\n        // Don't overwrite this value if it's already set.\n        // See https://github.com/GoogleChrome/workbox/pull/2284#issuecomment-560470923\n        if (!('__WB_DISABLE_DEV_LOGS' in globalThis)) {\n            self.__WB_DISABLE_DEV_LOGS = false;\n        }\n        let inGroup = false;\n        const methodToColorMap = {\n            debug: `#7f8c8d`,\n            log: `#2ecc71`,\n            warn: `#f39c12`,\n            error: `#c0392b`,\n            groupCollapsed: `#3498db`,\n            groupEnd: null, // No colored prefix on groupEnd\n        };\n        const print = function (method, args) {\n            if (self.__WB_DISABLE_DEV_LOGS) {\n                return;\n            }\n            if (method === 'groupCollapsed') {\n                // Safari doesn't print all console.groupCollapsed() arguments:\n                // https://bugs.webkit.org/show_bug.cgi?id=182754\n                if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {\n                    console[method](...args);\n                    return;\n                }\n            }\n            const styles = [\n                `background: ${methodToColorMap[method]}`,\n                `border-radius: 0.5em`,\n                `color: white`,\n                `font-weight: bold`,\n                `padding: 2px 0.5em`,\n            ];\n            // When in a group, the workbox prefix is not displayed.\n            const logPrefix = inGroup ? [] : ['%cworkbox', styles.join(';')];\n            console[method](...logPrefix, ...args);\n            if (method === 'groupCollapsed') {\n                inGroup = true;\n            }\n            if (method === 'groupEnd') {\n                inGroup = false;\n            }\n        };\n        // eslint-disable-next-line @typescript-eslint/ban-types\n        const api = {};\n        const loggerMethods = Object.keys(methodToColorMap);\n        for (const key of loggerMethods) {\n            const method = key;\n            api[method] = (...args) => {\n                print(method, args);\n            };\n        }\n        return api;\n    })());\nexport { logger };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../../_version.js';\nexport const messages = {\n    'invalid-value': ({ paramName, validValueDescription, value }) => {\n        if (!paramName || !validValueDescription) {\n            throw new Error(`Unexpected input to 'invalid-value' error.`);\n        }\n        return (`The '${paramName}' parameter was given a value with an ` +\n            `unexpected value. ${validValueDescription} Received a value of ` +\n            `${JSON.stringify(value)}.`);\n    },\n    'not-an-array': ({ moduleName, className, funcName, paramName }) => {\n        if (!moduleName || !className || !funcName || !paramName) {\n            throw new Error(`Unexpected input to 'not-an-array' error.`);\n        }\n        return (`The parameter '${paramName}' passed into ` +\n            `'${moduleName}.${className}.${funcName}()' must be an array.`);\n    },\n    'incorrect-type': ({ expectedType, paramName, moduleName, className, funcName, }) => {\n        if (!expectedType || !paramName || !moduleName || !funcName) {\n            throw new Error(`Unexpected input to 'incorrect-type' error.`);\n        }\n        const classNameStr = className ? `${className}.` : '';\n        return (`The parameter '${paramName}' passed into ` +\n            `'${moduleName}.${classNameStr}` +\n            `${funcName}()' must be of type ${expectedType}.`);\n    },\n    'incorrect-class': ({ expectedClassName, paramName, moduleName, className, funcName, isReturnValueProblem, }) => {\n        if (!expectedClassName || !moduleName || !funcName) {\n            throw new Error(`Unexpected input to 'incorrect-class' error.`);\n        }\n        const classNameStr = className ? `${className}.` : '';\n        if (isReturnValueProblem) {\n            return (`The return value from ` +\n                `'${moduleName}.${classNameStr}${funcName}()' ` +\n                `must be an instance of class ${expectedClassName}.`);\n        }\n        return (`The parameter '${paramName}' passed into ` +\n            `'${moduleName}.${classNameStr}${funcName}()' ` +\n            `must be an instance of class ${expectedClassName}.`);\n    },\n    'missing-a-method': ({ expectedMethod, paramName, moduleName, className, funcName, }) => {\n        if (!expectedMethod ||\n            !paramName ||\n            !moduleName ||\n            !className ||\n            !funcName) {\n            throw new Error(`Unexpected input to 'missing-a-method' error.`);\n        }\n        return (`${moduleName}.${className}.${funcName}() expected the ` +\n            `'${paramName}' parameter to expose a '${expectedMethod}' method.`);\n    },\n    'add-to-cache-list-unexpected-type': ({ entry }) => {\n        return (`An unexpected entry was passed to ` +\n            `'workbox-precaching.PrecacheController.addToCacheList()' The entry ` +\n            `'${JSON.stringify(entry)}' isn't supported. You must supply an array of ` +\n            `strings with one or more characters, objects with a url property or ` +\n            `Request objects.`);\n    },\n    'add-to-cache-list-conflicting-entries': ({ firstEntry, secondEntry }) => {\n        if (!firstEntry || !secondEntry) {\n            throw new Error(`Unexpected input to ` + `'add-to-cache-list-duplicate-entries' error.`);\n        }\n        return (`Two of the entries passed to ` +\n            `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` +\n            `${firstEntry} but different revision details. Workbox is ` +\n            `unable to cache and version the asset correctly. Please remove one ` +\n            `of the entries.`);\n    },\n    'plugin-error-request-will-fetch': ({ thrownErrorMessage }) => {\n        if (!thrownErrorMessage) {\n            throw new Error(`Unexpected input to ` + `'plugin-error-request-will-fetch', error.`);\n        }\n        return (`An error was thrown by a plugins 'requestWillFetch()' method. ` +\n            `The thrown error message was: '${thrownErrorMessage}'.`);\n    },\n    'invalid-cache-name': ({ cacheNameId, value }) => {\n        if (!cacheNameId) {\n            throw new Error(`Expected a 'cacheNameId' for error 'invalid-cache-name'`);\n        }\n        return (`You must provide a name containing at least one character for ` +\n            `setCacheDetails({${cacheNameId}: '...'}). Received a value of ` +\n            `'${JSON.stringify(value)}'`);\n    },\n    'unregister-route-but-not-found-with-method': ({ method }) => {\n        if (!method) {\n            throw new Error(`Unexpected input to ` +\n                `'unregister-route-but-not-found-with-method' error.`);\n        }\n        return (`The route you're trying to unregister was not  previously ` +\n            `registered for the method type '${method}'.`);\n    },\n    'unregister-route-route-not-registered': () => {\n        return (`The route you're trying to unregister was not previously ` +\n            `registered.`);\n    },\n    'queue-replay-failed': ({ name }) => {\n        return `Replaying the background sync queue '${name}' failed.`;\n    },\n    'duplicate-queue-name': ({ name }) => {\n        return (`The Queue name '${name}' is already being used. ` +\n            `All instances of backgroundSync.Queue must be given unique names.`);\n    },\n    'expired-test-without-max-age': ({ methodName, paramName }) => {\n        return (`The '${methodName}()' method can only be used when the ` +\n            `'${paramName}' is used in the constructor.`);\n    },\n    'unsupported-route-type': ({ moduleName, className, funcName, paramName }) => {\n        return (`The supplied '${paramName}' parameter was an unsupported type. ` +\n            `Please check the docs for ${moduleName}.${className}.${funcName} for ` +\n            `valid input types.`);\n    },\n    'not-array-of-class': ({ value, expectedClass, moduleName, className, funcName, paramName, }) => {\n        return (`The supplied '${paramName}' parameter must be an array of ` +\n            `'${expectedClass}' objects. Received '${JSON.stringify(value)},'. ` +\n            `Please check the call to ${moduleName}.${className}.${funcName}() ` +\n            `to fix the issue.`);\n    },\n    'max-entries-or-age-required': ({ moduleName, className, funcName }) => {\n        return (`You must define either config.maxEntries or config.maxAgeSeconds` +\n            `in ${moduleName}.${className}.${funcName}`);\n    },\n    'statuses-or-headers-required': ({ moduleName, className, funcName }) => {\n        return (`You must define either config.statuses or config.headers` +\n            `in ${moduleName}.${className}.${funcName}`);\n    },\n    'invalid-string': ({ moduleName, funcName, paramName }) => {\n        if (!paramName || !moduleName || !funcName) {\n            throw new Error(`Unexpected input to 'invalid-string' error.`);\n        }\n        return (`When using strings, the '${paramName}' parameter must start with ` +\n            `'http' (for cross-origin matches) or '/' (for same-origin matches). ` +\n            `Please see the docs for ${moduleName}.${funcName}() for ` +\n            `more info.`);\n    },\n    'channel-name-required': () => {\n        return (`You must provide a channelName to construct a ` +\n            `BroadcastCacheUpdate instance.`);\n    },\n    'invalid-responses-are-same-args': () => {\n        return (`The arguments passed into responsesAreSame() appear to be ` +\n            `invalid. Please ensure valid Responses are used.`);\n    },\n    'expire-custom-caches-only': () => {\n        return (`You must provide a 'cacheName' property when using the ` +\n            `expiration plugin with a runtime caching strategy.`);\n    },\n    'unit-must-be-bytes': ({ normalizedRangeHeader }) => {\n        if (!normalizedRangeHeader) {\n            throw new Error(`Unexpected input to 'unit-must-be-bytes' error.`);\n        }\n        return (`The 'unit' portion of the Range header must be set to 'bytes'. ` +\n            `The Range header provided was \"${normalizedRangeHeader}\"`);\n    },\n    'single-range-only': ({ normalizedRangeHeader }) => {\n        if (!normalizedRangeHeader) {\n            throw new Error(`Unexpected input to 'single-range-only' error.`);\n        }\n        return (`Multiple ranges are not supported. Please use a  single start ` +\n            `value, and optional end value. The Range header provided was ` +\n            `\"${normalizedRangeHeader}\"`);\n    },\n    'invalid-range-values': ({ normalizedRangeHeader }) => {\n        if (!normalizedRangeHeader) {\n            throw new Error(`Unexpected input to 'invalid-range-values' error.`);\n        }\n        return (`The Range header is missing both start and end values. At least ` +\n            `one of those values is needed. The Range header provided was ` +\n            `\"${normalizedRangeHeader}\"`);\n    },\n    'no-range-header': () => {\n        return `No Range header was found in the Request provided.`;\n    },\n    'range-not-satisfiable': ({ size, start, end }) => {\n        return (`The start (${start}) and end (${end}) values in the Range are ` +\n            `not satisfiable by the cached response, which is ${size} bytes.`);\n    },\n    'attempt-to-cache-non-get-request': ({ url, method }) => {\n        return (`Unable to cache '${url}' because it is a '${method}' request and ` +\n            `only 'GET' requests can be cached.`);\n    },\n    'cache-put-with-no-response': ({ url }) => {\n        return (`There was an attempt to cache '${url}' but the response was not ` +\n            `defined.`);\n    },\n    'no-response': ({ url, error }) => {\n        let message = `The strategy could not generate a response for '${url}'.`;\n        if (error) {\n            message += ` The underlying error is ${error}.`;\n        }\n        return message;\n    },\n    'bad-precaching-response': ({ url, status }) => {\n        return (`The precaching request for '${url}' failed` +\n            (status ? ` with an HTTP status of ${status}.` : `.`));\n    },\n    'non-precached-url': ({ url }) => {\n        return (`createHandlerBoundToURL('${url}') was called, but that URL is ` +\n            `not precached. Please pass in a URL that is precached instead.`);\n    },\n    'add-to-cache-list-conflicting-integrities': ({ url }) => {\n        return (`Two of the entries passed to ` +\n            `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` +\n            `${url} with different integrity values. Please remove one of them.`);\n    },\n    'missing-precache-entry': ({ cacheName, url }) => {\n        return `Unable to find a precached response in ${cacheName} for ${url}.`;\n    },\n    'cross-origin-copy-response': ({ origin }) => {\n        return (`workbox-core.copyResponse() can only be used with same-origin ` +\n            `responses. It was passed a response with origin ${origin}.`);\n    },\n    'opaque-streams-source': ({ type }) => {\n        const message = `One of the workbox-streams sources resulted in an ` +\n            `'${type}' response.`;\n        if (type === 'opaqueredirect') {\n            return (`${message} Please do not use a navigation request that results ` +\n                `in a redirect as a source.`);\n        }\n        return `${message} Please ensure your sources are CORS-enabled.`;\n    },\n};\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { messages } from './messages.js';\nimport '../../_version.js';\nconst fallback = (code, ...args) => {\n    let msg = code;\n    if (args.length > 0) {\n        msg += ` :: ${JSON.stringify(args)}`;\n    }\n    return msg;\n};\nconst generatorFunction = (code, details = {}) => {\n    const message = messages[code];\n    if (!message) {\n        throw new Error(`Unable to find message for code '${code}'.`);\n    }\n    return message(details);\n};\nexport const messageGenerator = process.env.NODE_ENV === 'production' ? fallback : generatorFunction;\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { messageGenerator } from '../models/messages/messageGenerator.js';\nimport '../_version.js';\n/**\n * Workbox errors should be thrown with this class.\n * This allows use to ensure the type easily in tests,\n * helps developers identify errors from workbox\n * easily and allows use to optimise error\n * messages correctly.\n *\n * @private\n */\nclass WorkboxError extends Error {\n    /**\n     *\n     * @param {string} errorCode The error code that\n     * identifies this particular error.\n     * @param {Object=} details Any relevant arguments\n     * that will help developers identify issues should\n     * be added as a key on the context object.\n     */\n    constructor(errorCode, details) {\n        const message = messageGenerator(errorCode, details);\n        super(message);\n        this.name = errorCode;\n        this.details = details;\n    }\n}\nexport { WorkboxError };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { WorkboxError } from '../_private/WorkboxError.js';\nimport '../_version.js';\n/*\n * This method throws if the supplied value is not an array.\n * The destructed values are required to produce a meaningful error for users.\n * The destructed and restructured object is so it's clear what is\n * needed.\n */\nconst isArray = (value, details) => {\n    if (!Array.isArray(value)) {\n        throw new WorkboxError('not-an-array', details);\n    }\n};\nconst hasMethod = (object, expectedMethod, details) => {\n    const type = typeof object[expectedMethod];\n    if (type !== 'function') {\n        details['expectedMethod'] = expectedMethod;\n        throw new WorkboxError('missing-a-method', details);\n    }\n};\nconst isType = (object, expectedType, details) => {\n    if (typeof object !== expectedType) {\n        details['expectedType'] = expectedType;\n        throw new WorkboxError('incorrect-type', details);\n    }\n};\nconst isInstance = (object, \n// Need the general type to do the check later.\n// eslint-disable-next-line @typescript-eslint/ban-types\nexpectedClass, details) => {\n    if (!(object instanceof expectedClass)) {\n        details['expectedClassName'] = expectedClass.name;\n        throw new WorkboxError('incorrect-class', details);\n    }\n};\nconst isOneOf = (value, validValues, details) => {\n    if (!validValues.includes(value)) {\n        details['validValueDescription'] = `Valid values are ${JSON.stringify(validValues)}.`;\n        throw new WorkboxError('invalid-value', details);\n    }\n};\nconst isArrayOfClass = (value, \n// Need general type to do check later.\nexpectedClass, // eslint-disable-line\ndetails) => {\n    const error = new WorkboxError('not-array-of-class', details);\n    if (!Array.isArray(value)) {\n        throw error;\n    }\n    for (const item of value) {\n        if (!(item instanceof expectedClass)) {\n            throw error;\n        }\n    }\n};\nconst finalAssertExports = process.env.NODE_ENV === 'production'\n    ? null\n    : {\n        hasMethod,\n        isArray,\n        isInstance,\n        isOneOf,\n        isType,\n        isArrayOfClass,\n    };\nexport { finalAssertExports as assert };\n","\"use strict\";\n// @ts-ignore\ntry {\n    self['workbox:routing:6.6.0'] && _();\n}\ncatch (e) { }\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\n/**\n * The default HTTP method, 'GET', used when there's no specific method\n * configured for a route.\n *\n * @type {string}\n *\n * @private\n */\nexport const defaultMethod = 'GET';\n/**\n * The list of valid HTTP methods associated with requests that could be routed.\n *\n * @type {Array<string>}\n *\n * @private\n */\nexport const validMethods = [\n    'DELETE',\n    'GET',\n    'HEAD',\n    'PATCH',\n    'POST',\n    'PUT',\n];\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport '../_version.js';\n/**\n * @param {function()|Object} handler Either a function, or an object with a\n * 'handle' method.\n * @return {Object} An object with a handle method.\n *\n * @private\n */\nexport const normalizeHandler = (handler) => {\n    if (handler && typeof handler === 'object') {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.hasMethod(handler, 'handle', {\n                moduleName: 'workbox-routing',\n                className: 'Route',\n                funcName: 'constructor',\n                paramName: 'handler',\n            });\n        }\n        return handler;\n    }\n    else {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isType(handler, 'function', {\n                moduleName: 'workbox-routing',\n                className: 'Route',\n                funcName: 'constructor',\n                paramName: 'handler',\n            });\n        }\n        return { handle: handler };\n    }\n};\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { defaultMethod, validMethods } from './utils/constants.js';\nimport { normalizeHandler } from './utils/normalizeHandler.js';\nimport './_version.js';\n/**\n * A `Route` consists of a pair of callback functions, \"match\" and \"handler\".\n * The \"match\" callback determine if a route should be used to \"handle\" a\n * request by returning a non-falsy value if it can. The \"handler\" callback\n * is called when there is a match and should return a Promise that resolves\n * to a `Response`.\n *\n * @memberof workbox-routing\n */\nclass Route {\n    /**\n     * Constructor for Route class.\n     *\n     * @param {workbox-routing~matchCallback} match\n     * A callback function that determines whether the route matches a given\n     * `fetch` event by returning a non-falsy value.\n     * @param {workbox-routing~handlerCallback} handler A callback\n     * function that returns a Promise resolving to a Response.\n     * @param {string} [method='GET'] The HTTP method to match the Route\n     * against.\n     */\n    constructor(match, handler, method = defaultMethod) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isType(match, 'function', {\n                moduleName: 'workbox-routing',\n                className: 'Route',\n                funcName: 'constructor',\n                paramName: 'match',\n            });\n            if (method) {\n                assert.isOneOf(method, validMethods, { paramName: 'method' });\n            }\n        }\n        // These values are referenced directly by Router so cannot be\n        // altered by minificaton.\n        this.handler = normalizeHandler(handler);\n        this.match = match;\n        this.method = method;\n    }\n    /**\n     *\n     * @param {workbox-routing-handlerCallback} handler A callback\n     * function that returns a Promise resolving to a Response\n     */\n    setCatchHandler(handler) {\n        this.catchHandler = normalizeHandler(handler);\n    }\n}\nexport { Route };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { Route } from './Route.js';\nimport './_version.js';\n/**\n * RegExpRoute makes it easy to create a regular expression based\n * {@link workbox-routing.Route}.\n *\n * For same-origin requests the RegExp only needs to match part of the URL. For\n * requests against third-party servers, you must define a RegExp that matches\n * the start of the URL.\n *\n * @memberof workbox-routing\n * @extends workbox-routing.Route\n */\nclass RegExpRoute extends Route {\n    /**\n     * If the regular expression contains\n     * [capture groups]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references},\n     * the captured values will be passed to the\n     * {@link workbox-routing~handlerCallback} `params`\n     * argument.\n     *\n     * @param {RegExp} regExp The regular expression to match against URLs.\n     * @param {workbox-routing~handlerCallback} handler A callback\n     * function that returns a Promise resulting in a Response.\n     * @param {string} [method='GET'] The HTTP method to match the Route\n     * against.\n     */\n    constructor(regExp, handler, method) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(regExp, RegExp, {\n                moduleName: 'workbox-routing',\n                className: 'RegExpRoute',\n                funcName: 'constructor',\n                paramName: 'pattern',\n            });\n        }\n        const match = ({ url }) => {\n            const result = regExp.exec(url.href);\n            // Return immediately if there's no match.\n            if (!result) {\n                return;\n            }\n            // Require that the match start at the first character in the URL string\n            // if it's a cross-origin request.\n            // See https://github.com/GoogleChrome/workbox/issues/281 for the context\n            // behind this behavior.\n            if (url.origin !== location.origin && result.index !== 0) {\n                if (process.env.NODE_ENV !== 'production') {\n                    logger.debug(`The regular expression '${regExp.toString()}' only partially matched ` +\n                        `against the cross-origin URL '${url.toString()}'. RegExpRoute's will only ` +\n                        `handle cross-origin requests if they match the entire URL.`);\n                }\n                return;\n            }\n            // If the route matches, but there aren't any capture groups defined, then\n            // this will return [], which is truthy and therefore sufficient to\n            // indicate a match.\n            // If there are capture groups, then it will return their values.\n            return result.slice(1);\n        };\n        super(match, handler, method);\n    }\n}\nexport { RegExpRoute };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nconst getFriendlyURL = (url) => {\n    const urlObj = new URL(String(url), location.href);\n    // See https://github.com/GoogleChrome/workbox/issues/2323\n    // We want to include everything, except for the origin if it's same-origin.\n    return urlObj.href.replace(new RegExp(`^${location.origin}`), '');\n};\nexport { getFriendlyURL };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { getFriendlyURL } from 'workbox-core/_private/getFriendlyURL.js';\nimport { defaultMethod } from './utils/constants.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { normalizeHandler } from './utils/normalizeHandler.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport './_version.js';\n/**\n * The Router can be used to process a `FetchEvent` using one or more\n * {@link workbox-routing.Route}, responding with a `Response` if\n * a matching route exists.\n *\n * If no route matches a given a request, the Router will use a \"default\"\n * handler if one is defined.\n *\n * Should the matching Route throw an error, the Router will use a \"catch\"\n * handler if one is defined to gracefully deal with issues and respond with a\n * Request.\n *\n * If a request matches multiple routes, the **earliest** registered route will\n * be used to respond to the request.\n *\n * @memberof workbox-routing\n */\nclass Router {\n    /**\n     * Initializes a new Router.\n     */\n    constructor() {\n        this._routes = new Map();\n        this._defaultHandlerMap = new Map();\n    }\n    /**\n     * @return {Map<string, Array<workbox-routing.Route>>} routes A `Map` of HTTP\n     * method name ('GET', etc.) to an array of all the corresponding `Route`\n     * instances that are registered.\n     */\n    get routes() {\n        return this._routes;\n    }\n    /**\n     * Adds a fetch event listener to respond to events when a route matches\n     * the event's request.\n     */\n    addFetchListener() {\n        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705\n        self.addEventListener('fetch', ((event) => {\n            const { request } = event;\n            const responsePromise = this.handleRequest({ request, event });\n            if (responsePromise) {\n                event.respondWith(responsePromise);\n            }\n        }));\n    }\n    /**\n     * Adds a message event listener for URLs to cache from the window.\n     * This is useful to cache resources loaded on the page prior to when the\n     * service worker started controlling it.\n     *\n     * The format of the message data sent from the window should be as follows.\n     * Where the `urlsToCache` array may consist of URL strings or an array of\n     * URL string + `requestInit` object (the same as you'd pass to `fetch()`).\n     *\n     * ```\n     * {\n     *   type: 'CACHE_URLS',\n     *   payload: {\n     *     urlsToCache: [\n     *       './script1.js',\n     *       './script2.js',\n     *       ['./script3.js', {mode: 'no-cors'}],\n     *     ],\n     *   },\n     * }\n     * ```\n     */\n    addCacheListener() {\n        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705\n        self.addEventListener('message', ((event) => {\n            // event.data is type 'any'\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n            if (event.data && event.data.type === 'CACHE_URLS') {\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                const { payload } = event.data;\n                if (process.env.NODE_ENV !== 'production') {\n                    logger.debug(`Caching URLs from the window`, payload.urlsToCache);\n                }\n                const requestPromises = Promise.all(payload.urlsToCache.map((entry) => {\n                    if (typeof entry === 'string') {\n                        entry = [entry];\n                    }\n                    const request = new Request(...entry);\n                    return this.handleRequest({ request, event });\n                    // TODO(philipwalton): TypeScript errors without this typecast for\n                    // some reason (probably a bug). The real type here should work but\n                    // doesn't: `Array<Promise<Response> | undefined>`.\n                })); // TypeScript\n                event.waitUntil(requestPromises);\n                // If a MessageChannel was used, reply to the message on success.\n                if (event.ports && event.ports[0]) {\n                    void requestPromises.then(() => event.ports[0].postMessage(true));\n                }\n            }\n        }));\n    }\n    /**\n     * Apply the routing rules to a FetchEvent object to get a Response from an\n     * appropriate Route's handler.\n     *\n     * @param {Object} options\n     * @param {Request} options.request The request to handle.\n     * @param {ExtendableEvent} options.event The event that triggered the\n     *     request.\n     * @return {Promise<Response>|undefined} A promise is returned if a\n     *     registered route can handle the request. If there is no matching\n     *     route and there's no `defaultHandler`, `undefined` is returned.\n     */\n    handleRequest({ request, event, }) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(request, Request, {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'handleRequest',\n                paramName: 'options.request',\n            });\n        }\n        const url = new URL(request.url, location.href);\n        if (!url.protocol.startsWith('http')) {\n            if (process.env.NODE_ENV !== 'production') {\n                logger.debug(`Workbox Router only supports URLs that start with 'http'.`);\n            }\n            return;\n        }\n        const sameOrigin = url.origin === location.origin;\n        const { params, route } = this.findMatchingRoute({\n            event,\n            request,\n            sameOrigin,\n            url,\n        });\n        let handler = route && route.handler;\n        const debugMessages = [];\n        if (process.env.NODE_ENV !== 'production') {\n            if (handler) {\n                debugMessages.push([`Found a route to handle this request:`, route]);\n                if (params) {\n                    debugMessages.push([\n                        `Passing the following params to the route's handler:`,\n                        params,\n                    ]);\n                }\n            }\n        }\n        // If we don't have a handler because there was no matching route, then\n        // fall back to defaultHandler if that's defined.\n        const method = request.method;\n        if (!handler && this._defaultHandlerMap.has(method)) {\n            if (process.env.NODE_ENV !== 'production') {\n                debugMessages.push(`Failed to find a matching route. Falling ` +\n                    `back to the default handler for ${method}.`);\n            }\n            handler = this._defaultHandlerMap.get(method);\n        }\n        if (!handler) {\n            if (process.env.NODE_ENV !== 'production') {\n                // No handler so Workbox will do nothing. If logs is set of debug\n                // i.e. verbose, we should print out this information.\n                logger.debug(`No route found for: ${getFriendlyURL(url)}`);\n            }\n            return;\n        }\n        if (process.env.NODE_ENV !== 'production') {\n            // We have a handler, meaning Workbox is going to handle the route.\n            // print the routing details to the console.\n            logger.groupCollapsed(`Router is responding to: ${getFriendlyURL(url)}`);\n            debugMessages.forEach((msg) => {\n                if (Array.isArray(msg)) {\n                    logger.log(...msg);\n                }\n                else {\n                    logger.log(msg);\n                }\n            });\n            logger.groupEnd();\n        }\n        // Wrap in try and catch in case the handle method throws a synchronous\n        // error. It should still callback to the catch handler.\n        let responsePromise;\n        try {\n            responsePromise = handler.handle({ url, request, event, params });\n        }\n        catch (err) {\n            responsePromise = Promise.reject(err);\n        }\n        // Get route's catch handler, if it exists\n        const catchHandler = route && route.catchHandler;\n        if (responsePromise instanceof Promise &&\n            (this._catchHandler || catchHandler)) {\n            responsePromise = responsePromise.catch(async (err) => {\n                // If there's a route catch handler, process that first\n                if (catchHandler) {\n                    if (process.env.NODE_ENV !== 'production') {\n                        // Still include URL here as it will be async from the console group\n                        // and may not make sense without the URL\n                        logger.groupCollapsed(`Error thrown when responding to: ` +\n                            ` ${getFriendlyURL(url)}. Falling back to route's Catch Handler.`);\n                        logger.error(`Error thrown by:`, route);\n                        logger.error(err);\n                        logger.groupEnd();\n                    }\n                    try {\n                        return await catchHandler.handle({ url, request, event, params });\n                    }\n                    catch (catchErr) {\n                        if (catchErr instanceof Error) {\n                            err = catchErr;\n                        }\n                    }\n                }\n                if (this._catchHandler) {\n                    if (process.env.NODE_ENV !== 'production') {\n                        // Still include URL here as it will be async from the console group\n                        // and may not make sense without the URL\n                        logger.groupCollapsed(`Error thrown when responding to: ` +\n                            ` ${getFriendlyURL(url)}. Falling back to global Catch Handler.`);\n                        logger.error(`Error thrown by:`, route);\n                        logger.error(err);\n                        logger.groupEnd();\n                    }\n                    return this._catchHandler.handle({ url, request, event });\n                }\n                throw err;\n            });\n        }\n        return responsePromise;\n    }\n    /**\n     * Checks a request and URL (and optionally an event) against the list of\n     * registered routes, and if there's a match, returns the corresponding\n     * route along with any params generated by the match.\n     *\n     * @param {Object} options\n     * @param {URL} options.url\n     * @param {boolean} options.sameOrigin The result of comparing `url.origin`\n     *     against the current origin.\n     * @param {Request} options.request The request to match.\n     * @param {Event} options.event The corresponding event.\n     * @return {Object} An object with `route` and `params` properties.\n     *     They are populated if a matching route was found or `undefined`\n     *     otherwise.\n     */\n    findMatchingRoute({ url, sameOrigin, request, event, }) {\n        const routes = this._routes.get(request.method) || [];\n        for (const route of routes) {\n            let params;\n            // route.match returns type any, not possible to change right now.\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n            const matchResult = route.match({ url, sameOrigin, request, event });\n            if (matchResult) {\n                if (process.env.NODE_ENV !== 'production') {\n                    // Warn developers that using an async matchCallback is almost always\n                    // not the right thing to do.\n                    if (matchResult instanceof Promise) {\n                        logger.warn(`While routing ${getFriendlyURL(url)}, an async ` +\n                            `matchCallback function was used. Please convert the ` +\n                            `following route to use a synchronous matchCallback function:`, route);\n                    }\n                }\n                // See https://github.com/GoogleChrome/workbox/issues/2079\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                params = matchResult;\n                if (Array.isArray(params) && params.length === 0) {\n                    // Instead of passing an empty array in as params, use undefined.\n                    params = undefined;\n                }\n                else if (matchResult.constructor === Object && // eslint-disable-line\n                    Object.keys(matchResult).length === 0) {\n                    // Instead of passing an empty object in as params, use undefined.\n                    params = undefined;\n                }\n                else if (typeof matchResult === 'boolean') {\n                    // For the boolean value true (rather than just something truth-y),\n                    // don't set params.\n                    // See https://github.com/GoogleChrome/workbox/pull/2134#issuecomment-513924353\n                    params = undefined;\n                }\n                // Return early if have a match.\n                return { route, params };\n            }\n        }\n        // If no match was found above, return and empty object.\n        return {};\n    }\n    /**\n     * Define a default `handler` that's called when no routes explicitly\n     * match the incoming request.\n     *\n     * Each HTTP method ('GET', 'POST', etc.) gets its own default handler.\n     *\n     * Without a default handler, unmatched requests will go against the\n     * network as if there were no service worker present.\n     *\n     * @param {workbox-routing~handlerCallback} handler A callback\n     * function that returns a Promise resulting in a Response.\n     * @param {string} [method='GET'] The HTTP method to associate with this\n     * default handler. Each method has its own default.\n     */\n    setDefaultHandler(handler, method = defaultMethod) {\n        this._defaultHandlerMap.set(method, normalizeHandler(handler));\n    }\n    /**\n     * If a Route throws an error while handling a request, this `handler`\n     * will be called and given a chance to provide a response.\n     *\n     * @param {workbox-routing~handlerCallback} handler A callback\n     * function that returns a Promise resulting in a Response.\n     */\n    setCatchHandler(handler) {\n        this._catchHandler = normalizeHandler(handler);\n    }\n    /**\n     * Registers a route with the router.\n     *\n     * @param {workbox-routing.Route} route The route to register.\n     */\n    registerRoute(route) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isType(route, 'object', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route',\n            });\n            assert.hasMethod(route, 'match', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route',\n            });\n            assert.isType(route.handler, 'object', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route',\n            });\n            assert.hasMethod(route.handler, 'handle', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route.handler',\n            });\n            assert.isType(route.method, 'string', {\n                moduleName: 'workbox-routing',\n                className: 'Router',\n                funcName: 'registerRoute',\n                paramName: 'route.method',\n            });\n        }\n        if (!this._routes.has(route.method)) {\n            this._routes.set(route.method, []);\n        }\n        // Give precedence to all of the earlier routes by adding this additional\n        // route to the end of the array.\n        this._routes.get(route.method).push(route);\n    }\n    /**\n     * Unregisters a route with the router.\n     *\n     * @param {workbox-routing.Route} route The route to unregister.\n     */\n    unregisterRoute(route) {\n        if (!this._routes.has(route.method)) {\n            throw new WorkboxError('unregister-route-but-not-found-with-method', {\n                method: route.method,\n            });\n        }\n        const routeIndex = this._routes.get(route.method).indexOf(route);\n        if (routeIndex > -1) {\n            this._routes.get(route.method).splice(routeIndex, 1);\n        }\n        else {\n            throw new WorkboxError('unregister-route-route-not-registered');\n        }\n    }\n}\nexport { Router };\n","/*\n  Copyright 2019 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { Router } from '../Router.js';\nimport '../_version.js';\nlet defaultRouter;\n/**\n * Creates a new, singleton Router instance if one does not exist. If one\n * does already exist, that instance is returned.\n *\n * @private\n * @return {Router}\n */\nexport const getOrCreateDefaultRouter = () => {\n    if (!defaultRouter) {\n        defaultRouter = new Router();\n        // The helpers that use the default Router assume these listeners exist.\n        defaultRouter.addFetchListener();\n        defaultRouter.addCacheListener();\n    }\n    return defaultRouter;\n};\n","/*\n  Copyright 2019 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport { Route } from './Route.js';\nimport { RegExpRoute } from './RegExpRoute.js';\nimport { getOrCreateDefaultRouter } from './utils/getOrCreateDefaultRouter.js';\nimport './_version.js';\n/**\n * Easily register a RegExp, string, or function with a caching\n * strategy to a singleton Router instance.\n *\n * This method will generate a Route for you if needed and\n * call {@link workbox-routing.Router#registerRoute}.\n *\n * @param {RegExp|string|workbox-routing.Route~matchCallback|workbox-routing.Route} capture\n * If the capture param is a `Route`, all other arguments will be ignored.\n * @param {workbox-routing~handlerCallback} [handler] A callback\n * function that returns a Promise resulting in a Response. This parameter\n * is required if `capture` is not a `Route` object.\n * @param {string} [method='GET'] The HTTP method to match the Route\n * against.\n * @return {workbox-routing.Route} The generated `Route`.\n *\n * @memberof workbox-routing\n */\nfunction registerRoute(capture, handler, method) {\n    let route;\n    if (typeof capture === 'string') {\n        const captureUrl = new URL(capture, location.href);\n        if (process.env.NODE_ENV !== 'production') {\n            if (!(capture.startsWith('/') || capture.startsWith('http'))) {\n                throw new WorkboxError('invalid-string', {\n                    moduleName: 'workbox-routing',\n                    funcName: 'registerRoute',\n                    paramName: 'capture',\n                });\n            }\n            // We want to check if Express-style wildcards are in the pathname only.\n            // TODO: Remove this log message in v4.\n            const valueToCheck = capture.startsWith('http')\n                ? captureUrl.pathname\n                : capture;\n            // See https://github.com/pillarjs/path-to-regexp#parameters\n            const wildcards = '[*:?+]';\n            if (new RegExp(`${wildcards}`).exec(valueToCheck)) {\n                logger.debug(`The '$capture' parameter contains an Express-style wildcard ` +\n                    `character (${wildcards}). Strings are now always interpreted as ` +\n                    `exact matches; use a RegExp for partial or wildcard matches.`);\n            }\n        }\n        const matchCallback = ({ url }) => {\n            if (process.env.NODE_ENV !== 'production') {\n                if (url.pathname === captureUrl.pathname &&\n                    url.origin !== captureUrl.origin) {\n                    logger.debug(`${capture} only partially matches the cross-origin URL ` +\n                        `${url.toString()}. This route will only handle cross-origin requests ` +\n                        `if they match the entire URL.`);\n                }\n            }\n            return url.href === captureUrl.href;\n        };\n        // If `capture` is a string then `handler` and `method` must be present.\n        route = new Route(matchCallback, handler, method);\n    }\n    else if (capture instanceof RegExp) {\n        // If `capture` is a `RegExp` then `handler` and `method` must be present.\n        route = new RegExpRoute(capture, handler, method);\n    }\n    else if (typeof capture === 'function') {\n        // If `capture` is a function then `handler` and `method` must be present.\n        route = new Route(capture, handler, method);\n    }\n    else if (capture instanceof Route) {\n        route = capture;\n    }\n    else {\n        throw new WorkboxError('unsupported-route-type', {\n            moduleName: 'workbox-routing',\n            funcName: 'registerRoute',\n            paramName: 'capture',\n        });\n    }\n    const defaultRouter = getOrCreateDefaultRouter();\n    defaultRouter.registerRoute(route);\n    return route;\n}\nexport { registerRoute };\n","\"use strict\";\n// @ts-ignore\ntry {\n    self['workbox:strategies:6.6.0'] && _();\n}\ncatch (e) { }\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nexport const cacheOkAndOpaquePlugin = {\n    /**\n     * Returns a valid response (to allow caching) if the status is 200 (OK) or\n     * 0 (opaque).\n     *\n     * @param {Object} options\n     * @param {Response} options.response\n     * @return {Response|null}\n     *\n     * @private\n     */\n    cacheWillUpdate: async ({ response }) => {\n        if (response.status === 200 || response.status === 0) {\n            return response;\n        }\n        return null;\n    },\n};\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nconst _cacheNameDetails = {\n    googleAnalytics: 'googleAnalytics',\n    precache: 'precache-v2',\n    prefix: 'workbox',\n    runtime: 'runtime',\n    suffix: typeof registration !== 'undefined' ? registration.scope : '',\n};\nconst _createCacheName = (cacheName) => {\n    return [_cacheNameDetails.prefix, cacheName, _cacheNameDetails.suffix]\n        .filter((value) => value && value.length > 0)\n        .join('-');\n};\nconst eachCacheNameDetail = (fn) => {\n    for (const key of Object.keys(_cacheNameDetails)) {\n        fn(key);\n    }\n};\nexport const cacheNames = {\n    updateDetails: (details) => {\n        eachCacheNameDetail((key) => {\n            if (typeof details[key] === 'string') {\n                _cacheNameDetails[key] = details[key];\n            }\n        });\n    },\n    getGoogleAnalyticsName: (userCacheName) => {\n        return userCacheName || _createCacheName(_cacheNameDetails.googleAnalytics);\n    },\n    getPrecacheName: (userCacheName) => {\n        return userCacheName || _createCacheName(_cacheNameDetails.precache);\n    },\n    getPrefix: () => {\n        return _cacheNameDetails.prefix;\n    },\n    getRuntimeName: (userCacheName) => {\n        return userCacheName || _createCacheName(_cacheNameDetails.runtime);\n    },\n    getSuffix: () => {\n        return _cacheNameDetails.suffix;\n    },\n};\n","/*\n  Copyright 2020 Google LLC\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\nfunction stripParams(fullURL, ignoreParams) {\n    const strippedURL = new URL(fullURL);\n    for (const param of ignoreParams) {\n        strippedURL.searchParams.delete(param);\n    }\n    return strippedURL.href;\n}\n/**\n * Matches an item in the cache, ignoring specific URL params. This is similar\n * to the `ignoreSearch` option, but it allows you to ignore just specific\n * params (while continuing to match on the others).\n *\n * @private\n * @param {Cache} cache\n * @param {Request} request\n * @param {Object} matchOptions\n * @param {Array<string>} ignoreParams\n * @return {Promise<Response|undefined>}\n */\nasync function cacheMatchIgnoreParams(cache, request, ignoreParams, matchOptions) {\n    const strippedRequestURL = stripParams(request.url, ignoreParams);\n    // If the request doesn't include any ignored params, match as normal.\n    if (request.url === strippedRequestURL) {\n        return cache.match(request, matchOptions);\n    }\n    // Otherwise, match by comparing keys\n    const keysOptions = Object.assign(Object.assign({}, matchOptions), { ignoreSearch: true });\n    const cacheKeys = await cache.keys(request, keysOptions);\n    for (const cacheKey of cacheKeys) {\n        const strippedCacheKeyURL = stripParams(cacheKey.url, ignoreParams);\n        if (strippedRequestURL === strippedCacheKeyURL) {\n            return cache.match(cacheKey, matchOptions);\n        }\n    }\n    return;\n}\nexport { cacheMatchIgnoreParams };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\n/**\n * The Deferred class composes Promises in a way that allows for them to be\n * resolved or rejected from outside the constructor. In most cases promises\n * should be used directly, but Deferreds can be necessary when the logic to\n * resolve a promise must be separate.\n *\n * @private\n */\nclass Deferred {\n    /**\n     * Creates a promise and exposes its resolve and reject functions as methods.\n     */\n    constructor() {\n        this.promise = new Promise((resolve, reject) => {\n            this.resolve = resolve;\n            this.reject = reject;\n        });\n    }\n}\nexport { Deferred };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\n// Callbacks to be executed whenever there's a quota error.\n// Can't change Function type right now.\n// eslint-disable-next-line @typescript-eslint/ban-types\nconst quotaErrorCallbacks = new Set();\nexport { quotaErrorCallbacks };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { logger } from '../_private/logger.js';\nimport { quotaErrorCallbacks } from '../models/quotaErrorCallbacks.js';\nimport '../_version.js';\n/**\n * Runs all of the callback functions, one at a time sequentially, in the order\n * in which they were registered.\n *\n * @memberof workbox-core\n * @private\n */\nasync function executeQuotaErrorCallbacks() {\n    if (process.env.NODE_ENV !== 'production') {\n        logger.log(`About to run ${quotaErrorCallbacks.size} ` +\n            `callbacks to clean up caches.`);\n    }\n    for (const callback of quotaErrorCallbacks) {\n        await callback();\n        if (process.env.NODE_ENV !== 'production') {\n            logger.log(callback, 'is complete.');\n        }\n    }\n    if (process.env.NODE_ENV !== 'production') {\n        logger.log('Finished running callbacks.');\n    }\n}\nexport { executeQuotaErrorCallbacks };\n","/*\n  Copyright 2019 Google LLC\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport '../_version.js';\n/**\n * Returns a promise that resolves and the passed number of milliseconds.\n * This utility is an async/await-friendly version of `setTimeout`.\n *\n * @param {number} ms\n * @return {Promise}\n * @private\n */\nexport function timeout(ms) {\n    return new Promise((resolve) => setTimeout(resolve, ms));\n}\n","/*\n  Copyright 2020 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { cacheMatchIgnoreParams } from 'workbox-core/_private/cacheMatchIgnoreParams.js';\nimport { Deferred } from 'workbox-core/_private/Deferred.js';\nimport { executeQuotaErrorCallbacks } from 'workbox-core/_private/executeQuotaErrorCallbacks.js';\nimport { getFriendlyURL } from 'workbox-core/_private/getFriendlyURL.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { timeout } from 'workbox-core/_private/timeout.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport './_version.js';\nfunction toRequest(input) {\n    return typeof input === 'string' ? new Request(input) : input;\n}\n/**\n * A class created every time a Strategy instance instance calls\n * {@link workbox-strategies.Strategy~handle} or\n * {@link workbox-strategies.Strategy~handleAll} that wraps all fetch and\n * cache actions around plugin callbacks and keeps track of when the strategy\n * is \"done\" (i.e. all added `event.waitUntil()` promises have resolved).\n *\n * @memberof workbox-strategies\n */\nclass StrategyHandler {\n    /**\n     * Creates a new instance associated with the passed strategy and event\n     * that's handling the request.\n     *\n     * The constructor also initializes the state that will be passed to each of\n     * the plugins handling this request.\n     *\n     * @param {workbox-strategies.Strategy} strategy\n     * @param {Object} options\n     * @param {Request|string} options.request A request to run this strategy for.\n     * @param {ExtendableEvent} options.event The event associated with the\n     *     request.\n     * @param {URL} [options.url]\n     * @param {*} [options.params] The return value from the\n     *     {@link workbox-routing~matchCallback} (if applicable).\n     */\n    constructor(strategy, options) {\n        this._cacheKeys = {};\n        /**\n         * The request the strategy is performing (passed to the strategy's\n         * `handle()` or `handleAll()` method).\n         * @name request\n         * @instance\n         * @type {Request}\n         * @memberof workbox-strategies.StrategyHandler\n         */\n        /**\n         * The event associated with this request.\n         * @name event\n         * @instance\n         * @type {ExtendableEvent}\n         * @memberof workbox-strategies.StrategyHandler\n         */\n        /**\n         * A `URL` instance of `request.url` (if passed to the strategy's\n         * `handle()` or `handleAll()` method).\n         * Note: the `url` param will be present if the strategy was invoked\n         * from a workbox `Route` object.\n         * @name url\n         * @instance\n         * @type {URL|undefined}\n         * @memberof workbox-strategies.StrategyHandler\n         */\n        /**\n         * A `param` value (if passed to the strategy's\n         * `handle()` or `handleAll()` method).\n         * Note: the `param` param will be present if the strategy was invoked\n         * from a workbox `Route` object and the\n         * {@link workbox-routing~matchCallback} returned\n         * a truthy value (it will be that value).\n         * @name params\n         * @instance\n         * @type {*|undefined}\n         * @memberof workbox-strategies.StrategyHandler\n         */\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(options.event, ExtendableEvent, {\n                moduleName: 'workbox-strategies',\n                className: 'StrategyHandler',\n                funcName: 'constructor',\n                paramName: 'options.event',\n            });\n        }\n        Object.assign(this, options);\n        this.event = options.event;\n        this._strategy = strategy;\n        this._handlerDeferred = new Deferred();\n        this._extendLifetimePromises = [];\n        // Copy the plugins list (since it's mutable on the strategy),\n        // so any mutations don't affect this handler instance.\n        this._plugins = [...strategy.plugins];\n        this._pluginStateMap = new Map();\n        for (const plugin of this._plugins) {\n            this._pluginStateMap.set(plugin, {});\n        }\n        this.event.waitUntil(this._handlerDeferred.promise);\n    }\n    /**\n     * Fetches a given request (and invokes any applicable plugin callback\n     * methods) using the `fetchOptions` (for non-navigation requests) and\n     * `plugins` defined on the `Strategy` object.\n     *\n     * The following plugin lifecycle methods are invoked when using this method:\n     * - `requestWillFetch()`\n     * - `fetchDidSucceed()`\n     * - `fetchDidFail()`\n     *\n     * @param {Request|string} input The URL or request to fetch.\n     * @return {Promise<Response>}\n     */\n    async fetch(input) {\n        const { event } = this;\n        let request = toRequest(input);\n        if (request.mode === 'navigate' &&\n            event instanceof FetchEvent &&\n            event.preloadResponse) {\n            const possiblePreloadResponse = (await event.preloadResponse);\n            if (possiblePreloadResponse) {\n                if (process.env.NODE_ENV !== 'production') {\n                    logger.log(`Using a preloaded navigation response for ` +\n                        `'${getFriendlyURL(request.url)}'`);\n                }\n                return possiblePreloadResponse;\n            }\n        }\n        // If there is a fetchDidFail plugin, we need to save a clone of the\n        // original request before it's either modified by a requestWillFetch\n        // plugin or before the original request's body is consumed via fetch().\n        const originalRequest = this.hasCallback('fetchDidFail')\n            ? request.clone()\n            : null;\n        try {\n            for (const cb of this.iterateCallbacks('requestWillFetch')) {\n                request = await cb({ request: request.clone(), event });\n            }\n        }\n        catch (err) {\n            if (err instanceof Error) {\n                throw new WorkboxError('plugin-error-request-will-fetch', {\n                    thrownErrorMessage: err.message,\n                });\n            }\n        }\n        // The request can be altered by plugins with `requestWillFetch` making\n        // the original request (most likely from a `fetch` event) different\n        // from the Request we make. Pass both to `fetchDidFail` to aid debugging.\n        const pluginFilteredRequest = request.clone();\n        try {\n            let fetchResponse;\n            // See https://github.com/GoogleChrome/workbox/issues/1796\n            fetchResponse = await fetch(request, request.mode === 'navigate' ? undefined : this._strategy.fetchOptions);\n            if (process.env.NODE_ENV !== 'production') {\n                logger.debug(`Network request for ` +\n                    `'${getFriendlyURL(request.url)}' returned a response with ` +\n                    `status '${fetchResponse.status}'.`);\n            }\n            for (const callback of this.iterateCallbacks('fetchDidSucceed')) {\n                fetchResponse = await callback({\n                    event,\n                    request: pluginFilteredRequest,\n                    response: fetchResponse,\n                });\n            }\n            return fetchResponse;\n        }\n        catch (error) {\n            if (process.env.NODE_ENV !== 'production') {\n                logger.log(`Network request for ` +\n                    `'${getFriendlyURL(request.url)}' threw an error.`, error);\n            }\n            // `originalRequest` will only exist if a `fetchDidFail` callback\n            // is being used (see above).\n            if (originalRequest) {\n                await this.runCallbacks('fetchDidFail', {\n                    error: error,\n                    event,\n                    originalRequest: originalRequest.clone(),\n                    request: pluginFilteredRequest.clone(),\n                });\n            }\n            throw error;\n        }\n    }\n    /**\n     * Calls `this.fetch()` and (in the background) runs `this.cachePut()` on\n     * the response generated by `this.fetch()`.\n     *\n     * The call to `this.cachePut()` automatically invokes `this.waitUntil()`,\n     * so you do not have to manually call `waitUntil()` on the event.\n     *\n     * @param {Request|string} input The request or URL to fetch and cache.\n     * @return {Promise<Response>}\n     */\n    async fetchAndCachePut(input) {\n        const response = await this.fetch(input);\n        const responseClone = response.clone();\n        void this.waitUntil(this.cachePut(input, responseClone));\n        return response;\n    }\n    /**\n     * Matches a request from the cache (and invokes any applicable plugin\n     * callback methods) using the `cacheName`, `matchOptions`, and `plugins`\n     * defined on the strategy object.\n     *\n     * The following plugin lifecycle methods are invoked when using this method:\n     * - cacheKeyWillByUsed()\n     * - cachedResponseWillByUsed()\n     *\n     * @param {Request|string} key The Request or URL to use as the cache key.\n     * @return {Promise<Response|undefined>} A matching response, if found.\n     */\n    async cacheMatch(key) {\n        const request = toRequest(key);\n        let cachedResponse;\n        const { cacheName, matchOptions } = this._strategy;\n        const effectiveRequest = await this.getCacheKey(request, 'read');\n        const multiMatchOptions = Object.assign(Object.assign({}, matchOptions), { cacheName });\n        cachedResponse = await caches.match(effectiveRequest, multiMatchOptions);\n        if (process.env.NODE_ENV !== 'production') {\n            if (cachedResponse) {\n                logger.debug(`Found a cached response in '${cacheName}'.`);\n            }\n            else {\n                logger.debug(`No cached response found in '${cacheName}'.`);\n            }\n        }\n        for (const callback of this.iterateCallbacks('cachedResponseWillBeUsed')) {\n            cachedResponse =\n                (await callback({\n                    cacheName,\n                    matchOptions,\n                    cachedResponse,\n                    request: effectiveRequest,\n                    event: this.event,\n                })) || undefined;\n        }\n        return cachedResponse;\n    }\n    /**\n     * Puts a request/response pair in the cache (and invokes any applicable\n     * plugin callback methods) using the `cacheName` and `plugins` defined on\n     * the strategy object.\n     *\n     * The following plugin lifecycle methods are invoked when using this method:\n     * - cacheKeyWillByUsed()\n     * - cacheWillUpdate()\n     * - cacheDidUpdate()\n     *\n     * @param {Request|string} key The request or URL to use as the cache key.\n     * @param {Response} response The response to cache.\n     * @return {Promise<boolean>} `false` if a cacheWillUpdate caused the response\n     * not be cached, and `true` otherwise.\n     */\n    async cachePut(key, response) {\n        const request = toRequest(key);\n        // Run in the next task to avoid blocking other cache reads.\n        // https://github.com/w3c/ServiceWorker/issues/1397\n        await timeout(0);\n        const effectiveRequest = await this.getCacheKey(request, 'write');\n        if (process.env.NODE_ENV !== 'production') {\n            if (effectiveRequest.method && effectiveRequest.method !== 'GET') {\n                throw new WorkboxError('attempt-to-cache-non-get-request', {\n                    url: getFriendlyURL(effectiveRequest.url),\n                    method: effectiveRequest.method,\n                });\n            }\n            // See https://github.com/GoogleChrome/workbox/issues/2818\n            const vary = response.headers.get('Vary');\n            if (vary) {\n                logger.debug(`The response for ${getFriendlyURL(effectiveRequest.url)} ` +\n                    `has a 'Vary: ${vary}' header. ` +\n                    `Consider setting the {ignoreVary: true} option on your strategy ` +\n                    `to ensure cache matching and deletion works as expected.`);\n            }\n        }\n        if (!response) {\n            if (process.env.NODE_ENV !== 'production') {\n                logger.error(`Cannot cache non-existent response for ` +\n                    `'${getFriendlyURL(effectiveRequest.url)}'.`);\n            }\n            throw new WorkboxError('cache-put-with-no-response', {\n                url: getFriendlyURL(effectiveRequest.url),\n            });\n        }\n        const responseToCache = await this._ensureResponseSafeToCache(response);\n        if (!responseToCache) {\n            if (process.env.NODE_ENV !== 'production') {\n                logger.debug(`Response '${getFriendlyURL(effectiveRequest.url)}' ` +\n                    `will not be cached.`, responseToCache);\n            }\n            return false;\n        }\n        const { cacheName, matchOptions } = this._strategy;\n        const cache = await self.caches.open(cacheName);\n        const hasCacheUpdateCallback = this.hasCallback('cacheDidUpdate');\n        const oldResponse = hasCacheUpdateCallback\n            ? await cacheMatchIgnoreParams(\n            // TODO(philipwalton): the `__WB_REVISION__` param is a precaching\n            // feature. Consider into ways to only add this behavior if using\n            // precaching.\n            cache, effectiveRequest.clone(), ['__WB_REVISION__'], matchOptions)\n            : null;\n        if (process.env.NODE_ENV !== 'production') {\n            logger.debug(`Updating the '${cacheName}' cache with a new Response ` +\n                `for ${getFriendlyURL(effectiveRequest.url)}.`);\n        }\n        try {\n            await cache.put(effectiveRequest, hasCacheUpdateCallback ? responseToCache.clone() : responseToCache);\n        }\n        catch (error) {\n            if (error instanceof Error) {\n                // See https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-QuotaExceededError\n                if (error.name === 'QuotaExceededError') {\n                    await executeQuotaErrorCallbacks();\n                }\n                throw error;\n            }\n        }\n        for (const callback of this.iterateCallbacks('cacheDidUpdate')) {\n            await callback({\n                cacheName,\n                oldResponse,\n                newResponse: responseToCache.clone(),\n                request: effectiveRequest,\n                event: this.event,\n            });\n        }\n        return true;\n    }\n    /**\n     * Checks the list of plugins for the `cacheKeyWillBeUsed` callback, and\n     * executes any of those callbacks found in sequence. The final `Request`\n     * object returned by the last plugin is treated as the cache key for cache\n     * reads and/or writes. If no `cacheKeyWillBeUsed` plugin callbacks have\n     * been registered, the passed request is returned unmodified\n     *\n     * @param {Request} request\n     * @param {string} mode\n     * @return {Promise<Request>}\n     */\n    async getCacheKey(request, mode) {\n        const key = `${request.url} | ${mode}`;\n        if (!this._cacheKeys[key]) {\n            let effectiveRequest = request;\n            for (const callback of this.iterateCallbacks('cacheKeyWillBeUsed')) {\n                effectiveRequest = toRequest(await callback({\n                    mode,\n                    request: effectiveRequest,\n                    event: this.event,\n                    // params has a type any can't change right now.\n                    params: this.params, // eslint-disable-line\n                }));\n            }\n            this._cacheKeys[key] = effectiveRequest;\n        }\n        return this._cacheKeys[key];\n    }\n    /**\n     * Returns true if the strategy has at least one plugin with the given\n     * callback.\n     *\n     * @param {string} name The name of the callback to check for.\n     * @return {boolean}\n     */\n    hasCallback(name) {\n        for (const plugin of this._strategy.plugins) {\n            if (name in plugin) {\n                return true;\n            }\n        }\n        return false;\n    }\n    /**\n     * Runs all plugin callbacks matching the given name, in order, passing the\n     * given param object (merged ith the current plugin state) as the only\n     * argument.\n     *\n     * Note: since this method runs all plugins, it's not suitable for cases\n     * where the return value of a callback needs to be applied prior to calling\n     * the next callback. See\n     * {@link workbox-strategies.StrategyHandler#iterateCallbacks}\n     * below for how to handle that case.\n     *\n     * @param {string} name The name of the callback to run within each plugin.\n     * @param {Object} param The object to pass as the first (and only) param\n     *     when executing each callback. This object will be merged with the\n     *     current plugin state prior to callback execution.\n     */\n    async runCallbacks(name, param) {\n        for (const callback of this.iterateCallbacks(name)) {\n            // TODO(philipwalton): not sure why `any` is needed. It seems like\n            // this should work with `as WorkboxPluginCallbackParam[C]`.\n            await callback(param);\n        }\n    }\n    /**\n     * Accepts a callback and returns an iterable of matching plugin callbacks,\n     * where each callback is wrapped with the current handler state (i.e. when\n     * you call each callback, whatever object parameter you pass it will\n     * be merged with the plugin's current state).\n     *\n     * @param {string} name The name fo the callback to run\n     * @return {Array<Function>}\n     */\n    *iterateCallbacks(name) {\n        for (const plugin of this._strategy.plugins) {\n            if (typeof plugin[name] === 'function') {\n                const state = this._pluginStateMap.get(plugin);\n                const statefulCallback = (param) => {\n                    const statefulParam = Object.assign(Object.assign({}, param), { state });\n                    // TODO(philipwalton): not sure why `any` is needed. It seems like\n                    // this should work with `as WorkboxPluginCallbackParam[C]`.\n                    return plugin[name](statefulParam);\n                };\n                yield statefulCallback;\n            }\n        }\n    }\n    /**\n     * Adds a promise to the\n     * [extend lifetime promises]{@link https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises}\n     * of the event event associated with the request being handled (usually a\n     * `FetchEvent`).\n     *\n     * Note: you can await\n     * {@link workbox-strategies.StrategyHandler~doneWaiting}\n     * to know when all added promises have settled.\n     *\n     * @param {Promise} promise A promise to add to the extend lifetime promises\n     *     of the event that triggered the request.\n     */\n    waitUntil(promise) {\n        this._extendLifetimePromises.push(promise);\n        return promise;\n    }\n    /**\n     * Returns a promise that resolves once all promises passed to\n     * {@link workbox-strategies.StrategyHandler~waitUntil}\n     * have settled.\n     *\n     * Note: any work done after `doneWaiting()` settles should be manually\n     * passed to an event's `waitUntil()` method (not this handler's\n     * `waitUntil()` method), otherwise the service worker thread my be killed\n     * prior to your work completing.\n     */\n    async doneWaiting() {\n        let promise;\n        while ((promise = this._extendLifetimePromises.shift())) {\n            await promise;\n        }\n    }\n    /**\n     * Stops running the strategy and immediately resolves any pending\n     * `waitUntil()` promises.\n     */\n    destroy() {\n        this._handlerDeferred.resolve(null);\n    }\n    /**\n     * This method will call cacheWillUpdate on the available plugins (or use\n     * status === 200) to determine if the Response is safe and valid to cache.\n     *\n     * @param {Request} options.request\n     * @param {Response} options.response\n     * @return {Promise<Response|undefined>}\n     *\n     * @private\n     */\n    async _ensureResponseSafeToCache(response) {\n        let responseToCache = response;\n        let pluginsUsed = false;\n        for (const callback of this.iterateCallbacks('cacheWillUpdate')) {\n            responseToCache =\n                (await callback({\n                    request: this.request,\n                    response: responseToCache,\n                    event: this.event,\n                })) || undefined;\n            pluginsUsed = true;\n            if (!responseToCache) {\n                break;\n            }\n        }\n        if (!pluginsUsed) {\n            if (responseToCache && responseToCache.status !== 200) {\n                responseToCache = undefined;\n            }\n            if (process.env.NODE_ENV !== 'production') {\n                if (responseToCache) {\n                    if (responseToCache.status !== 200) {\n                        if (responseToCache.status === 0) {\n                            logger.warn(`The response for '${this.request.url}' ` +\n                                `is an opaque response. The caching strategy that you're ` +\n                                `using will not cache opaque responses by default.`);\n                        }\n                        else {\n                            logger.debug(`The response for '${this.request.url}' ` +\n                                `returned a status code of '${response.status}' and won't ` +\n                                `be cached as a result.`);\n                        }\n                    }\n                }\n            }\n        }\n        return responseToCache;\n    }\n}\nexport { StrategyHandler };\n","/*\n  Copyright 2020 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { cacheNames } from 'workbox-core/_private/cacheNames.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { getFriendlyURL } from 'workbox-core/_private/getFriendlyURL.js';\nimport { StrategyHandler } from './StrategyHandler.js';\nimport './_version.js';\n/**\n * An abstract base class that all other strategy classes must extend from:\n *\n * @memberof workbox-strategies\n */\nclass Strategy {\n    /**\n     * Creates a new instance of the strategy and sets all documented option\n     * properties as public instance properties.\n     *\n     * Note: if a custom strategy class extends the base Strategy class and does\n     * not need more than these properties, it does not need to define its own\n     * constructor.\n     *\n     * @param {Object} [options]\n     * @param {string} [options.cacheName] Cache name to store and retrieve\n     * requests. Defaults to the cache names provided by\n     * {@link workbox-core.cacheNames}.\n     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}\n     * to use in conjunction with this caching strategy.\n     * @param {Object} [options.fetchOptions] Values passed along to the\n     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)\n     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)\n     * `fetch()` requests made by this strategy.\n     * @param {Object} [options.matchOptions] The\n     * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}\n     * for any `cache.match()` or `cache.put()` calls made by this strategy.\n     */\n    constructor(options = {}) {\n        /**\n         * Cache name to store and retrieve\n         * requests. Defaults to the cache names provided by\n         * {@link workbox-core.cacheNames}.\n         *\n         * @type {string}\n         */\n        this.cacheName = cacheNames.getRuntimeName(options.cacheName);\n        /**\n         * The list\n         * [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}\n         * used by this strategy.\n         *\n         * @type {Array<Object>}\n         */\n        this.plugins = options.plugins || [];\n        /**\n         * Values passed along to the\n         * [`init`]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters}\n         * of all fetch() requests made by this strategy.\n         *\n         * @type {Object}\n         */\n        this.fetchOptions = options.fetchOptions;\n        /**\n         * The\n         * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}\n         * for any `cache.match()` or `cache.put()` calls made by this strategy.\n         *\n         * @type {Object}\n         */\n        this.matchOptions = options.matchOptions;\n    }\n    /**\n     * Perform a request strategy and returns a `Promise` that will resolve with\n     * a `Response`, invoking all relevant plugin callbacks.\n     *\n     * When a strategy instance is registered with a Workbox\n     * {@link workbox-routing.Route}, this method is automatically\n     * called when the route matches.\n     *\n     * Alternatively, this method can be used in a standalone `FetchEvent`\n     * listener by passing it to `event.respondWith()`.\n     *\n     * @param {FetchEvent|Object} options A `FetchEvent` or an object with the\n     *     properties listed below.\n     * @param {Request|string} options.request A request to run this strategy for.\n     * @param {ExtendableEvent} options.event The event associated with the\n     *     request.\n     * @param {URL} [options.url]\n     * @param {*} [options.params]\n     */\n    handle(options) {\n        const [responseDone] = this.handleAll(options);\n        return responseDone;\n    }\n    /**\n     * Similar to {@link workbox-strategies.Strategy~handle}, but\n     * instead of just returning a `Promise` that resolves to a `Response` it\n     * it will return an tuple of `[response, done]` promises, where the former\n     * (`response`) is equivalent to what `handle()` returns, and the latter is a\n     * Promise that will resolve once any promises that were added to\n     * `event.waitUntil()` as part of performing the strategy have completed.\n     *\n     * You can await the `done` promise to ensure any extra work performed by\n     * the strategy (usually caching responses) completes successfully.\n     *\n     * @param {FetchEvent|Object} options A `FetchEvent` or an object with the\n     *     properties listed below.\n     * @param {Request|string} options.request A request to run this strategy for.\n     * @param {ExtendableEvent} options.event The event associated with the\n     *     request.\n     * @param {URL} [options.url]\n     * @param {*} [options.params]\n     * @return {Array<Promise>} A tuple of [response, done]\n     *     promises that can be used to determine when the response resolves as\n     *     well as when the handler has completed all its work.\n     */\n    handleAll(options) {\n        // Allow for flexible options to be passed.\n        if (options instanceof FetchEvent) {\n            options = {\n                event: options,\n                request: options.request,\n            };\n        }\n        const event = options.event;\n        const request = typeof options.request === 'string'\n            ? new Request(options.request)\n            : options.request;\n        const params = 'params' in options ? options.params : undefined;\n        const handler = new StrategyHandler(this, { event, request, params });\n        const responseDone = this._getResponse(handler, request, event);\n        const handlerDone = this._awaitComplete(responseDone, handler, request, event);\n        // Return an array of promises, suitable for use with Promise.all().\n        return [responseDone, handlerDone];\n    }\n    async _getResponse(handler, request, event) {\n        await handler.runCallbacks('handlerWillStart', { event, request });\n        let response = undefined;\n        try {\n            response = await this._handle(request, handler);\n            // The \"official\" Strategy subclasses all throw this error automatically,\n            // but in case a third-party Strategy doesn't, ensure that we have a\n            // consistent failure when there's no response or an error response.\n            if (!response || response.type === 'error') {\n                throw new WorkboxError('no-response', { url: request.url });\n            }\n        }\n        catch (error) {\n            if (error instanceof Error) {\n                for (const callback of handler.iterateCallbacks('handlerDidError')) {\n                    response = await callback({ error, event, request });\n                    if (response) {\n                        break;\n                    }\n                }\n            }\n            if (!response) {\n                throw error;\n            }\n            else if (process.env.NODE_ENV !== 'production') {\n                logger.log(`While responding to '${getFriendlyURL(request.url)}', ` +\n                    `an ${error instanceof Error ? error.toString() : ''} error occurred. Using a fallback response provided by ` +\n                    `a handlerDidError plugin.`);\n            }\n        }\n        for (const callback of handler.iterateCallbacks('handlerWillRespond')) {\n            response = await callback({ event, request, response });\n        }\n        return response;\n    }\n    async _awaitComplete(responseDone, handler, request, event) {\n        let response;\n        let error;\n        try {\n            response = await responseDone;\n        }\n        catch (error) {\n            // Ignore errors, as response errors should be caught via the `response`\n            // promise above. The `done` promise will only throw for errors in\n            // promises passed to `handler.waitUntil()`.\n        }\n        try {\n            await handler.runCallbacks('handlerDidRespond', {\n                event,\n                request,\n                response,\n            });\n            await handler.doneWaiting();\n        }\n        catch (waitUntilError) {\n            if (waitUntilError instanceof Error) {\n                error = waitUntilError;\n            }\n        }\n        await handler.runCallbacks('handlerDidComplete', {\n            event,\n            request,\n            response,\n            error: error,\n        });\n        handler.destroy();\n        if (error) {\n            throw error;\n        }\n    }\n}\nexport { Strategy };\n/**\n * Classes extending the `Strategy` based class should implement this method,\n * and leverage the {@link workbox-strategies.StrategyHandler}\n * arg to perform all fetching and cache logic, which will ensure all relevant\n * cache, cache options, fetch options and plugins are used (per the current\n * strategy instance).\n *\n * @name _handle\n * @instance\n * @abstract\n * @function\n * @param {Request} request\n * @param {workbox-strategies.StrategyHandler} handler\n * @return {Promise<Response>}\n *\n * @memberof workbox-strategies.Strategy\n */\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { getFriendlyURL } from 'workbox-core/_private/getFriendlyURL.js';\nimport '../_version.js';\nexport const messages = {\n    strategyStart: (strategyName, request) => `Using ${strategyName} to respond to '${getFriendlyURL(request.url)}'`,\n    printFinalResponse: (response) => {\n        if (response) {\n            logger.groupCollapsed(`View the final response here.`);\n            logger.log(response || '[No response returned]');\n            logger.groupEnd();\n        }\n    },\n};\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport { cacheOkAndOpaquePlugin } from './plugins/cacheOkAndOpaquePlugin.js';\nimport { Strategy } from './Strategy.js';\nimport { messages } from './utils/messages.js';\nimport './_version.js';\n/**\n * An implementation of a\n * [network first](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-first-falling-back-to-cache)\n * request strategy.\n *\n * By default, this strategy will cache responses with a 200 status code as\n * well as [opaque responses](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#opaque-responses).\n * Opaque responses are are cross-origin requests where the response doesn't\n * support [CORS](https://enable-cors.org/).\n *\n * If the network request fails, and there is no cache match, this will throw\n * a `WorkboxError` exception.\n *\n * @extends workbox-strategies.Strategy\n * @memberof workbox-strategies\n */\nclass NetworkFirst extends Strategy {\n    /**\n     * @param {Object} [options]\n     * @param {string} [options.cacheName] Cache name to store and retrieve\n     * requests. Defaults to cache names provided by\n     * {@link workbox-core.cacheNames}.\n     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}\n     * to use in conjunction with this caching strategy.\n     * @param {Object} [options.fetchOptions] Values passed along to the\n     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)\n     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)\n     * `fetch()` requests made by this strategy.\n     * @param {Object} [options.matchOptions] [`CacheQueryOptions`](https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions)\n     * @param {number} [options.networkTimeoutSeconds] If set, any network requests\n     * that fail to respond within the timeout will fallback to the cache.\n     *\n     * This option can be used to combat\n     * \"[lie-fi]{@link https://developers.google.com/web/fundamentals/performance/poor-connectivity/#lie-fi}\"\n     * scenarios.\n     */\n    constructor(options = {}) {\n        super(options);\n        // If this instance contains no plugins with a 'cacheWillUpdate' callback,\n        // prepend the `cacheOkAndOpaquePlugin` plugin to the plugins list.\n        if (!this.plugins.some((p) => 'cacheWillUpdate' in p)) {\n            this.plugins.unshift(cacheOkAndOpaquePlugin);\n        }\n        this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;\n        if (process.env.NODE_ENV !== 'production') {\n            if (this._networkTimeoutSeconds) {\n                assert.isType(this._networkTimeoutSeconds, 'number', {\n                    moduleName: 'workbox-strategies',\n                    className: this.constructor.name,\n                    funcName: 'constructor',\n                    paramName: 'networkTimeoutSeconds',\n                });\n            }\n        }\n    }\n    /**\n     * @private\n     * @param {Request|string} request A request to run this strategy for.\n     * @param {workbox-strategies.StrategyHandler} handler The event that\n     *     triggered the request.\n     * @return {Promise<Response>}\n     */\n    async _handle(request, handler) {\n        const logs = [];\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(request, Request, {\n                moduleName: 'workbox-strategies',\n                className: this.constructor.name,\n                funcName: 'handle',\n                paramName: 'makeRequest',\n            });\n        }\n        const promises = [];\n        let timeoutId;\n        if (this._networkTimeoutSeconds) {\n            const { id, promise } = this._getTimeoutPromise({ request, logs, handler });\n            timeoutId = id;\n            promises.push(promise);\n        }\n        const networkPromise = this._getNetworkPromise({\n            timeoutId,\n            request,\n            logs,\n            handler,\n        });\n        promises.push(networkPromise);\n        const response = await handler.waitUntil((async () => {\n            // Promise.race() will resolve as soon as the first promise resolves.\n            return ((await handler.waitUntil(Promise.race(promises))) ||\n                // If Promise.race() resolved with null, it might be due to a network\n                // timeout + a cache miss. If that were to happen, we'd rather wait until\n                // the networkPromise resolves instead of returning null.\n                // Note that it's fine to await an already-resolved promise, so we don't\n                // have to check to see if it's still \"in flight\".\n                (await networkPromise));\n        })());\n        if (process.env.NODE_ENV !== 'production') {\n            logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));\n            for (const log of logs) {\n                logger.log(log);\n            }\n            messages.printFinalResponse(response);\n            logger.groupEnd();\n        }\n        if (!response) {\n            throw new WorkboxError('no-response', { url: request.url });\n        }\n        return response;\n    }\n    /**\n     * @param {Object} options\n     * @param {Request} options.request\n     * @param {Array} options.logs A reference to the logs array\n     * @param {Event} options.event\n     * @return {Promise<Response>}\n     *\n     * @private\n     */\n    _getTimeoutPromise({ request, logs, handler, }) {\n        let timeoutId;\n        const timeoutPromise = new Promise((resolve) => {\n            const onNetworkTimeout = async () => {\n                if (process.env.NODE_ENV !== 'production') {\n                    logs.push(`Timing out the network response at ` +\n                        `${this._networkTimeoutSeconds} seconds.`);\n                }\n                resolve(await handler.cacheMatch(request));\n            };\n            timeoutId = setTimeout(onNetworkTimeout, this._networkTimeoutSeconds * 1000);\n        });\n        return {\n            promise: timeoutPromise,\n            id: timeoutId,\n        };\n    }\n    /**\n     * @param {Object} options\n     * @param {number|undefined} options.timeoutId\n     * @param {Request} options.request\n     * @param {Array} options.logs A reference to the logs Array.\n     * @param {Event} options.event\n     * @return {Promise<Response>}\n     *\n     * @private\n     */\n    async _getNetworkPromise({ timeoutId, request, logs, handler, }) {\n        let error;\n        let response;\n        try {\n            response = await handler.fetchAndCachePut(request);\n        }\n        catch (fetchError) {\n            if (fetchError instanceof Error) {\n                error = fetchError;\n            }\n        }\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        if (process.env.NODE_ENV !== 'production') {\n            if (response) {\n                logs.push(`Got response from network.`);\n            }\n            else {\n                logs.push(`Unable to get a response from the network. Will respond ` +\n                    `with a cached response.`);\n            }\n        }\n        if (error || !response) {\n            response = await handler.cacheMatch(request);\n            if (process.env.NODE_ENV !== 'production') {\n                if (response) {\n                    logs.push(`Found a cached response in the '${this.cacheName}'` + ` cache.`);\n                }\n                else {\n                    logs.push(`No response found in the '${this.cacheName}' cache.`);\n                }\n            }\n        }\n        return response;\n    }\n}\nexport { NetworkFirst };\n","/*\n  Copyright 2018 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport { assert } from 'workbox-core/_private/assert.js';\nimport { logger } from 'workbox-core/_private/logger.js';\nimport { timeout } from 'workbox-core/_private/timeout.js';\nimport { WorkboxError } from 'workbox-core/_private/WorkboxError.js';\nimport { Strategy } from './Strategy.js';\nimport { messages } from './utils/messages.js';\nimport './_version.js';\n/**\n * An implementation of a\n * [network-only](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-only)\n * request strategy.\n *\n * This class is useful if you want to take advantage of any\n * [Workbox plugins](https://developer.chrome.com/docs/workbox/using-plugins/).\n *\n * If the network request fails, this will throw a `WorkboxError` exception.\n *\n * @extends workbox-strategies.Strategy\n * @memberof workbox-strategies\n */\nclass NetworkOnly extends Strategy {\n    /**\n     * @param {Object} [options]\n     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}\n     * to use in conjunction with this caching strategy.\n     * @param {Object} [options.fetchOptions] Values passed along to the\n     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)\n     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)\n     * `fetch()` requests made by this strategy.\n     * @param {number} [options.networkTimeoutSeconds] If set, any network requests\n     * that fail to respond within the timeout will result in a network error.\n     */\n    constructor(options = {}) {\n        super(options);\n        this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;\n    }\n    /**\n     * @private\n     * @param {Request|string} request A request to run this strategy for.\n     * @param {workbox-strategies.StrategyHandler} handler The event that\n     *     triggered the request.\n     * @return {Promise<Response>}\n     */\n    async _handle(request, handler) {\n        if (process.env.NODE_ENV !== 'production') {\n            assert.isInstance(request, Request, {\n                moduleName: 'workbox-strategies',\n                className: this.constructor.name,\n                funcName: '_handle',\n                paramName: 'request',\n            });\n        }\n        let error = undefined;\n        let response;\n        try {\n            const promises = [\n                handler.fetch(request),\n            ];\n            if (this._networkTimeoutSeconds) {\n                const timeoutPromise = timeout(this._networkTimeoutSeconds * 1000);\n                promises.push(timeoutPromise);\n            }\n            response = await Promise.race(promises);\n            if (!response) {\n                throw new Error(`Timed out the network response after ` +\n                    `${this._networkTimeoutSeconds} seconds.`);\n            }\n        }\n        catch (err) {\n            if (err instanceof Error) {\n                error = err;\n            }\n        }\n        if (process.env.NODE_ENV !== 'production') {\n            logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));\n            if (response) {\n                logger.log(`Got response from network.`);\n            }\n            else {\n                logger.log(`Unable to get a response from the network.`);\n            }\n            messages.printFinalResponse(response);\n            logger.groupEnd();\n        }\n        if (!response) {\n            throw new WorkboxError('no-response', { url: request.url, error });\n        }\n        return response;\n    }\n}\nexport { NetworkOnly };\n","/*\n  Copyright 2019 Google LLC\n\n  Use of this source code is governed by an MIT-style\n  license that can be found in the LICENSE file or at\n  https://opensource.org/licenses/MIT.\n*/\nimport './_version.js';\n/**\n * Claim any currently available clients once the service worker\n * becomes active. This is normally used in conjunction with `skipWaiting()`.\n *\n * @memberof workbox-core\n */\nfunction clientsClaim() {\n    self.addEventListener('activate', () => self.clients.claim());\n}\nexport { clientsClaim };\n"],"names":["self","_","e","logger","globalThis","__WB_DISABLE_DEV_LOGS","inGroup","methodToColorMap","debug","log","warn","error","groupCollapsed","groupEnd","print","method","args","test","navigator","userAgent","console","styles","logPrefix","join","api","loggerMethods","Object","keys","key","messages","invalid-value","paramName","validValueDescription","value","Error","JSON","stringify","not-an-array","moduleName","className","funcName","incorrect-type","expectedType","classNameStr","incorrect-class","expectedClassName","isReturnValueProblem","missing-a-method","expectedMethod","add-to-cache-list-unexpected-type","entry","add-to-cache-list-conflicting-entries","firstEntry","secondEntry","plugin-error-request-will-fetch","thrownErrorMessage","invalid-cache-name","cacheNameId","unregister-route-but-not-found-with-method","unregister-route-route-not-registered","queue-replay-failed","name","duplicate-queue-name","expired-test-without-max-age","methodName","unsupported-route-type","not-array-of-class","expectedClass","max-entries-or-age-required","statuses-or-headers-required","invalid-string","channel-name-required","invalid-responses-are-same-args","expire-custom-caches-only","unit-must-be-bytes","normalizedRangeHeader","single-range-only","invalid-range-values","no-range-header","range-not-satisfiable","size","start","end","attempt-to-cache-non-get-request","url","cache-put-with-no-response","no-response","message","bad-precaching-response","status","non-precached-url","add-to-cache-list-conflicting-integrities","missing-precache-entry","cacheName","cross-origin-copy-response","origin","opaque-streams-source","type","generatorFunction","code","details","messageGenerator","WorkboxError","constructor","errorCode","isArray","Array","hasMethod","object","isType","isInstance","isOneOf","validValues","includes","isArrayOfClass","item","finalAssertExports","defaultMethod","validMethods","normalizeHandler","handler","assert","handle","Route","match","setCatchHandler","catchHandler","RegExpRoute","regExp","RegExp","result","exec","href","location","index","toString","slice","getFriendlyURL","urlObj","URL","String","replace","Router","_routes","Map","_defaultHandlerMap","routes","addFetchListener","addEventListener","event","request","responsePromise","handleRequest","respondWith","addCacheListener","data","payload","urlsToCache","requestPromises","Promise","all","map","Request","waitUntil","ports","then","postMessage","protocol","startsWith","sameOrigin","params","route","findMatchingRoute","debugMessages","push","has","get","forEach","msg","err","reject","_catchHandler","catch","catchErr","matchResult","length","undefined","setDefaultHandler","set","registerRoute","unregisterRoute","routeIndex","indexOf","splice","defaultRouter","getOrCreateDefaultRouter","capture","captureUrl","valueToCheck","pathname","wildcards","matchCallback","cacheOkAndOpaquePlugin","cacheWillUpdate","response","_cacheNameDetails","googleAnalytics","precache","prefix","runtime","suffix","registration","scope","_createCacheName","filter","eachCacheNameDetail","fn","cacheNames","updateDetails","getGoogleAnalyticsName","userCacheName","getPrecacheName","getPrefix","getRuntimeName","getSuffix","stripParams","fullURL","ignoreParams","strippedURL","param","searchParams","delete","cacheMatchIgnoreParams","cache","matchOptions","strippedRequestURL","keysOptions","assign","ignoreSearch","cacheKeys","cacheKey","strippedCacheKeyURL","Deferred","promise","resolve","quotaErrorCallbacks","Set","executeQuotaErrorCallbacks","callback","timeout","ms","setTimeout","toRequest","input","StrategyHandler","strategy","options","_cacheKeys","ExtendableEvent","_strategy","_handlerDeferred","_extendLifetimePromises","_plugins","plugins","_pluginStateMap","plugin","fetch","mode","FetchEvent","preloadResponse","possiblePreloadResponse","originalRequest","hasCallback","clone","cb","iterateCallbacks","pluginFilteredRequest","fetchResponse","fetchOptions","runCallbacks","fetchAndCachePut","responseClone","cachePut","cacheMatch","cachedResponse","effectiveRequest","getCacheKey","multiMatchOptions","caches","vary","headers","responseToCache","_ensureResponseSafeToCache","open","hasCacheUpdateCallback","oldResponse","put","newResponse","state","statefulCallback","statefulParam","doneWaiting","shift","destroy","pluginsUsed","Strategy","responseDone","handleAll","_getResponse","handlerDone","_awaitComplete","_handle","waitUntilError","strategyStart","strategyName","printFinalResponse","NetworkFirst","some","p","unshift","_networkTimeoutSeconds","networkTimeoutSeconds","logs","promises","timeoutId","id","_getTimeoutPromise","networkPromise","_getNetworkPromise","race","timeoutPromise","onNetworkTimeout","fetchError","clearTimeout","NetworkOnly","clientsClaim","clients","claim"],"mappings":";;IACA;IACA,IAAI;IACAA,EAAAA,IAAI,CAAC,oBAAoB,CAAC,IAAIC,CAAC,EAAE,CAAA;IACrC,CAAC,CACD,OAAOC,CAAC,EAAE;;ICLV;IACA;IACA;IACA;IACA;IACA;IAEA,MAAMC,MAAM,GAEN,CAAC,MAAM;IACL;IACA;IACA,EAAA,IAAI,EAAE,uBAAuB,IAAIC,UAAU,CAAC,EAAE;QAC1CJ,IAAI,CAACK,qBAAqB,GAAG,KAAK,CAAA;IACtC,GAAA;MACA,IAAIC,OAAO,GAAG,KAAK,CAAA;IACnB,EAAA,MAAMC,gBAAgB,GAAG;IACrBC,IAAAA,KAAK,EAAE,CAAS,OAAA,CAAA;IAChBC,IAAAA,GAAG,EAAE,CAAS,OAAA,CAAA;IACdC,IAAAA,IAAI,EAAE,CAAS,OAAA,CAAA;IACfC,IAAAA,KAAK,EAAE,CAAS,OAAA,CAAA;IAChBC,IAAAA,cAAc,EAAE,CAAS,OAAA,CAAA;QACzBC,QAAQ,EAAE,IAAI;OACjB,CAAA;IACD,EAAA,MAAMC,KAAK,GAAG,UAAUC,MAAM,EAAEC,IAAI,EAAE;QAClC,IAAIhB,IAAI,CAACK,qBAAqB,EAAE;IAC5B,MAAA,OAAA;IACJ,KAAA;QACA,IAAIU,MAAM,KAAK,gBAAgB,EAAE;IAC7B;IACA;UACA,IAAI,gCAAgC,CAACE,IAAI,CAACC,SAAS,CAACC,SAAS,CAAC,EAAE;IAC5DC,QAAAA,OAAO,CAACL,MAAM,CAAC,CAAC,GAAGC,IAAI,CAAC,CAAA;IACxB,QAAA,OAAA;IACJ,OAAA;IACJ,KAAA;IACA,IAAA,MAAMK,MAAM,GAAG,CACX,CAAed,YAAAA,EAAAA,gBAAgB,CAACQ,MAAM,CAAC,CAAE,CAAA,EACzC,sBAAsB,EACtB,CAAA,YAAA,CAAc,EACd,CAAmB,iBAAA,CAAA,EACnB,oBAAoB,CACvB,CAAA;IACD;IACA,IAAA,MAAMO,SAAS,GAAGhB,OAAO,GAAG,EAAE,GAAG,CAAC,WAAW,EAAEe,MAAM,CAACE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;QAChEH,OAAO,CAACL,MAAM,CAAC,CAAC,GAAGO,SAAS,EAAE,GAAGN,IAAI,CAAC,CAAA;QACtC,IAAID,MAAM,KAAK,gBAAgB,EAAE;IAC7BT,MAAAA,OAAO,GAAG,IAAI,CAAA;IAClB,KAAA;QACA,IAAIS,MAAM,KAAK,UAAU,EAAE;IACvBT,MAAAA,OAAO,GAAG,KAAK,CAAA;IACnB,KAAA;OACH,CAAA;IACD;MACA,MAAMkB,GAAG,GAAG,EAAE,CAAA;IACd,EAAA,MAAMC,aAAa,GAAGC,MAAM,CAACC,IAAI,CAACpB,gBAAgB,CAAC,CAAA;IACnD,EAAA,KAAK,MAAMqB,GAAG,IAAIH,aAAa,EAAE;QAC7B,MAAMV,MAAM,GAAGa,GAAG,CAAA;IAClBJ,IAAAA,GAAG,CAACT,MAAM,CAAC,GAAG,CAAC,GAAGC,IAAI,KAAK;IACvBF,MAAAA,KAAK,CAACC,MAAM,EAAEC,IAAI,CAAC,CAAA;SACtB,CAAA;IACL,GAAA;IACA,EAAA,OAAOQ,GAAG,CAAA;IACd,CAAC,GAAI;;IC/DT;IACA;AACA;IACA;IACA;IACA;IACA;IAEO,MAAMK,UAAQ,GAAG;IACpB,EAAA,eAAe,EAAEC,CAAC;QAAEC,SAAS;QAAEC,qBAAqB;IAAEC,IAAAA,KAAAA;IAAM,GAAC,KAAK;IAC9D,IAAA,IAAI,CAACF,SAAS,IAAI,CAACC,qBAAqB,EAAE;IACtC,MAAA,MAAM,IAAIE,KAAK,CAAC,CAAA,0CAAA,CAA4C,CAAC,CAAA;IACjE,KAAA;IACA,IAAA,OAAQ,CAAQH,KAAAA,EAAAA,SAAS,CAAwC,sCAAA,CAAA,GAC7D,qBAAqBC,qBAAqB,CAAA,qBAAA,CAAuB,GACjE,CAAA,EAAGG,IAAI,CAACC,SAAS,CAACH,KAAK,CAAC,CAAG,CAAA,CAAA,CAAA;OAClC;IACD,EAAA,cAAc,EAAEI,CAAC;QAAEC,UAAU;QAAEC,SAAS;QAAEC,QAAQ;IAAET,IAAAA,SAAAA;IAAU,GAAC,KAAK;QAChE,IAAI,CAACO,UAAU,IAAI,CAACC,SAAS,IAAI,CAACC,QAAQ,IAAI,CAACT,SAAS,EAAE;IACtD,MAAA,MAAM,IAAIG,KAAK,CAAC,CAAA,yCAAA,CAA2C,CAAC,CAAA;IAChE,KAAA;QACA,OAAQ,CAAA,eAAA,EAAkBH,SAAS,CAAA,cAAA,CAAgB,GAC/C,CAAA,CAAA,EAAIO,UAAU,CAAIC,CAAAA,EAAAA,SAAS,CAAIC,CAAAA,EAAAA,QAAQ,CAAuB,qBAAA,CAAA,CAAA;OACrE;IACD,EAAA,gBAAgB,EAAEC,CAAC;QAAEC,YAAY;QAAEX,SAAS;QAAEO,UAAU;QAAEC,SAAS;IAAEC,IAAAA,QAAAA;IAAU,GAAC,KAAK;QACjF,IAAI,CAACE,YAAY,IAAI,CAACX,SAAS,IAAI,CAACO,UAAU,IAAI,CAACE,QAAQ,EAAE;IACzD,MAAA,MAAM,IAAIN,KAAK,CAAC,CAAA,2CAAA,CAA6C,CAAC,CAAA;IAClE,KAAA;QACA,MAAMS,YAAY,GAAGJ,SAAS,GAAG,GAAGA,SAAS,CAAA,CAAA,CAAG,GAAG,EAAE,CAAA;IACrD,IAAA,OAAQ,CAAkBR,eAAAA,EAAAA,SAAS,CAAgB,cAAA,CAAA,GAC/C,IAAIO,UAAU,CAAA,CAAA,EAAIK,YAAY,CAAA,CAAE,GAChC,CAAA,EAAGH,QAAQ,CAAA,oBAAA,EAAuBE,YAAY,CAAG,CAAA,CAAA,CAAA;OACxD;IACD,EAAA,iBAAiB,EAAEE,CAAC;QAAEC,iBAAiB;QAAEd,SAAS;QAAEO,UAAU;QAAEC,SAAS;QAAEC,QAAQ;IAAEM,IAAAA,oBAAAA;IAAsB,GAAC,KAAK;QAC7G,IAAI,CAACD,iBAAiB,IAAI,CAACP,UAAU,IAAI,CAACE,QAAQ,EAAE;IAChD,MAAA,MAAM,IAAIN,KAAK,CAAC,CAAA,4CAAA,CAA8C,CAAC,CAAA;IACnE,KAAA;QACA,MAAMS,YAAY,GAAGJ,SAAS,GAAG,GAAGA,SAAS,CAAA,CAAA,CAAG,GAAG,EAAE,CAAA;IACrD,IAAA,IAAIO,oBAAoB,EAAE;IACtB,MAAA,OAAQ,CAAwB,sBAAA,CAAA,GAC5B,CAAIR,CAAAA,EAAAA,UAAU,CAAIK,CAAAA,EAAAA,YAAY,CAAGH,EAAAA,QAAQ,CAAM,IAAA,CAAA,GAC/C,CAAgCK,6BAAAA,EAAAA,iBAAiB,CAAG,CAAA,CAAA,CAAA;IAC5D,KAAA;IACA,IAAA,OAAQ,CAAkBd,eAAAA,EAAAA,SAAS,CAAgB,cAAA,CAAA,GAC/C,IAAIO,UAAU,CAAA,CAAA,EAAIK,YAAY,CAAA,EAAGH,QAAQ,CAAA,IAAA,CAAM,GAC/C,CAAA,6BAAA,EAAgCK,iBAAiB,CAAG,CAAA,CAAA,CAAA;OAC3D;IACD,EAAA,kBAAkB,EAAEE,CAAC;QAAEC,cAAc;QAAEjB,SAAS;QAAEO,UAAU;QAAEC,SAAS;IAAEC,IAAAA,QAAAA;IAAU,GAAC,KAAK;IACrF,IAAA,IAAI,CAACQ,cAAc,IACf,CAACjB,SAAS,IACV,CAACO,UAAU,IACX,CAACC,SAAS,IACV,CAACC,QAAQ,EAAE;IACX,MAAA,MAAM,IAAIN,KAAK,CAAC,CAAA,6CAAA,CAA+C,CAAC,CAAA;IACpE,KAAA;IACA,IAAA,OAAQ,CAAGI,EAAAA,UAAU,CAAIC,CAAAA,EAAAA,SAAS,CAAIC,CAAAA,EAAAA,QAAQ,CAAkB,gBAAA,CAAA,GAC5D,CAAIT,CAAAA,EAAAA,SAAS,CAA4BiB,yBAAAA,EAAAA,cAAc,CAAW,SAAA,CAAA,CAAA;OACzE;IACD,EAAA,mCAAmC,EAAEC,CAAC;IAAEC,IAAAA,KAAAA;IAAM,GAAC,KAAK;IAChD,IAAA,OAAQ,CAAoC,kCAAA,CAAA,GACxC,CAAqE,mEAAA,CAAA,GACrE,IAAIf,IAAI,CAACC,SAAS,CAACc,KAAK,CAAC,CAAA,+CAAA,CAAiD,GAC1E,CAAA,oEAAA,CAAsE,GACtE,CAAkB,gBAAA,CAAA,CAAA;OACzB;IACD,EAAA,uCAAuC,EAAEC,CAAC;QAAEC,UAAU;IAAEC,IAAAA,WAAAA;IAAY,GAAC,KAAK;IACtE,IAAA,IAAI,CAACD,UAAU,IAAI,CAACC,WAAW,EAAE;IAC7B,MAAA,MAAM,IAAInB,KAAK,CAAC,CAAsB,oBAAA,CAAA,GAAG,8CAA8C,CAAC,CAAA;IAC5F,KAAA;QACA,OAAQ,CAAA,6BAAA,CAA+B,GACnC,CAAA,qEAAA,CAAuE,GACvE,CAAA,EAAGkB,UAAU,CAA8C,4CAAA,CAAA,GAC3D,CAAqE,mEAAA,CAAA,GACrE,CAAiB,eAAA,CAAA,CAAA;OACxB;IACD,EAAA,iCAAiC,EAAEE,CAAC;IAAEC,IAAAA,kBAAAA;IAAmB,GAAC,KAAK;QAC3D,IAAI,CAACA,kBAAkB,EAAE;IACrB,MAAA,MAAM,IAAIrB,KAAK,CAAC,CAAsB,oBAAA,CAAA,GAAG,2CAA2C,CAAC,CAAA;IACzF,KAAA;IACA,IAAA,OAAQ,CAAgE,8DAAA,CAAA,GACpE,CAAkCqB,+BAAAA,EAAAA,kBAAkB,CAAI,EAAA,CAAA,CAAA;OAC/D;IACD,EAAA,oBAAoB,EAAEC,CAAC;QAAEC,WAAW;IAAExB,IAAAA,KAAAA;IAAM,GAAC,KAAK;QAC9C,IAAI,CAACwB,WAAW,EAAE;IACd,MAAA,MAAM,IAAIvB,KAAK,CAAC,CAAA,uDAAA,CAAyD,CAAC,CAAA;IAC9E,KAAA;IACA,IAAA,OAAQ,CAAgE,8DAAA,CAAA,GACpE,CAAoBuB,iBAAAA,EAAAA,WAAW,CAAiC,+BAAA,CAAA,GAChE,CAAItB,CAAAA,EAAAA,IAAI,CAACC,SAAS,CAACH,KAAK,CAAC,CAAG,CAAA,CAAA,CAAA;OACnC;IACD,EAAA,4CAA4C,EAAEyB,CAAC;IAAE3C,IAAAA,MAAAA;IAAO,GAAC,KAAK;QAC1D,IAAI,CAACA,MAAM,EAAE;IACT,MAAA,MAAM,IAAImB,KAAK,CAAC,CAAsB,oBAAA,CAAA,GAClC,qDAAqD,CAAC,CAAA;IAC9D,KAAA;IACA,IAAA,OAAQ,CAA4D,0DAAA,CAAA,GAChE,CAAmCnB,gCAAAA,EAAAA,MAAM,CAAI,EAAA,CAAA,CAAA;OACpD;MACD,uCAAuC,EAAE4C,MAAM;QAC3C,OAAQ,CAAA,yDAAA,CAA2D,GAC/D,CAAa,WAAA,CAAA,CAAA;OACpB;IACD,EAAA,qBAAqB,EAAEC,CAAC;IAAEC,IAAAA,IAAAA;IAAK,GAAC,KAAK;QACjC,OAAO,CAAA,qCAAA,EAAwCA,IAAI,CAAW,SAAA,CAAA,CAAA;OACjE;IACD,EAAA,sBAAsB,EAAEC,CAAC;IAAED,IAAAA,IAAAA;IAAK,GAAC,KAAK;IAClC,IAAA,OAAQ,CAAmBA,gBAAAA,EAAAA,IAAI,CAA2B,yBAAA,CAAA,GACtD,CAAmE,iEAAA,CAAA,CAAA;OAC1E;IACD,EAAA,8BAA8B,EAAEE,CAAC;QAAEC,UAAU;IAAEjC,IAAAA,SAAAA;IAAU,GAAC,KAAK;IAC3D,IAAA,OAAQ,QAAQiC,UAAU,CAAA,qCAAA,CAAuC,GAC7D,CAAA,CAAA,EAAIjC,SAAS,CAA+B,6BAAA,CAAA,CAAA;OACnD;IACD,EAAA,wBAAwB,EAAEkC,CAAC;QAAE3B,UAAU;QAAEC,SAAS;QAAEC,QAAQ;IAAET,IAAAA,SAAAA;IAAU,GAAC,KAAK;IAC1E,IAAA,OAAQ,CAAiBA,cAAAA,EAAAA,SAAS,CAAuC,qCAAA,CAAA,GACrE,CAA6BO,0BAAAA,EAAAA,UAAU,CAAIC,CAAAA,EAAAA,SAAS,CAAIC,CAAAA,EAAAA,QAAQ,CAAO,KAAA,CAAA,GACvE,CAAoB,kBAAA,CAAA,CAAA;OAC3B;IACD,EAAA,oBAAoB,EAAE0B,CAAC;QAAEjC,KAAK;QAAEkC,aAAa;QAAE7B,UAAU;QAAEC,SAAS;QAAEC,QAAQ;IAAET,IAAAA,SAAAA;IAAW,GAAC,KAAK;QAC7F,OAAQ,CAAA,cAAA,EAAiBA,SAAS,CAAkC,gCAAA,CAAA,GAChE,IAAIoC,aAAa,CAAA,qBAAA,EAAwBhC,IAAI,CAACC,SAAS,CAACH,KAAK,CAAC,CAAA,IAAA,CAAM,GACpE,CAAA,yBAAA,EAA4BK,UAAU,CAAA,CAAA,EAAIC,SAAS,CAAIC,CAAAA,EAAAA,QAAQ,CAAK,GAAA,CAAA,GACpE,CAAmB,iBAAA,CAAA,CAAA;OAC1B;IACD,EAAA,6BAA6B,EAAE4B,CAAC;QAAE9B,UAAU;QAAEC,SAAS;IAAEC,IAAAA,QAAAA;IAAS,GAAC,KAAK;QACpE,OAAQ,CAAA,gEAAA,CAAkE,GACtE,CAAMF,GAAAA,EAAAA,UAAU,IAAIC,SAAS,CAAA,CAAA,EAAIC,QAAQ,CAAE,CAAA,CAAA;OAClD;IACD,EAAA,8BAA8B,EAAE6B,CAAC;QAAE/B,UAAU;QAAEC,SAAS;IAAEC,IAAAA,QAAAA;IAAS,GAAC,KAAK;QACrE,OAAQ,CAAA,wDAAA,CAA0D,GAC9D,CAAMF,GAAAA,EAAAA,UAAU,IAAIC,SAAS,CAAA,CAAA,EAAIC,QAAQ,CAAE,CAAA,CAAA;OAClD;IACD,EAAA,gBAAgB,EAAE8B,CAAC;QAAEhC,UAAU;QAAEE,QAAQ;IAAET,IAAAA,SAAAA;IAAU,GAAC,KAAK;QACvD,IAAI,CAACA,SAAS,IAAI,CAACO,UAAU,IAAI,CAACE,QAAQ,EAAE;IACxC,MAAA,MAAM,IAAIN,KAAK,CAAC,CAAA,2CAAA,CAA6C,CAAC,CAAA;IAClE,KAAA;IACA,IAAA,OAAQ,CAA4BH,yBAAAA,EAAAA,SAAS,CAA8B,4BAAA,CAAA,GACvE,CAAsE,oEAAA,CAAA,GACtE,CAA2BO,wBAAAA,EAAAA,UAAU,CAAIE,CAAAA,EAAAA,QAAQ,CAAS,OAAA,CAAA,GAC1D,CAAY,UAAA,CAAA,CAAA;OACnB;MACD,uBAAuB,EAAE+B,MAAM;QAC3B,OAAQ,CAAA,8CAAA,CAAgD,GACpD,CAAgC,8BAAA,CAAA,CAAA;OACvC;MACD,iCAAiC,EAAEC,MAAM;QACrC,OAAQ,CAAA,0DAAA,CAA4D,GAChE,CAAkD,gDAAA,CAAA,CAAA;OACzD;MACD,2BAA2B,EAAEC,MAAM;QAC/B,OAAQ,CAAA,uDAAA,CAAyD,GAC7D,CAAoD,kDAAA,CAAA,CAAA;OAC3D;IACD,EAAA,oBAAoB,EAAEC,CAAC;IAAEC,IAAAA,qBAAAA;IAAsB,GAAC,KAAK;QACjD,IAAI,CAACA,qBAAqB,EAAE;IACxB,MAAA,MAAM,IAAIzC,KAAK,CAAC,CAAA,+CAAA,CAAiD,CAAC,CAAA;IACtE,KAAA;IACA,IAAA,OAAQ,CAAiE,+DAAA,CAAA,GACrE,CAAkCyC,+BAAAA,EAAAA,qBAAqB,CAAG,CAAA,CAAA,CAAA;OACjE;IACD,EAAA,mBAAmB,EAAEC,CAAC;IAAED,IAAAA,qBAAAA;IAAsB,GAAC,KAAK;QAChD,IAAI,CAACA,qBAAqB,EAAE;IACxB,MAAA,MAAM,IAAIzC,KAAK,CAAC,CAAA,8CAAA,CAAgD,CAAC,CAAA;IACrE,KAAA;IACA,IAAA,OAAQ,gEAAgE,GACpE,CAAA,6DAAA,CAA+D,GAC/D,CAAA,CAAA,EAAIyC,qBAAqB,CAAG,CAAA,CAAA,CAAA;OACnC;IACD,EAAA,sBAAsB,EAAEE,CAAC;IAAEF,IAAAA,qBAAAA;IAAsB,GAAC,KAAK;QACnD,IAAI,CAACA,qBAAqB,EAAE;IACxB,MAAA,MAAM,IAAIzC,KAAK,CAAC,CAAA,iDAAA,CAAmD,CAAC,CAAA;IACxE,KAAA;IACA,IAAA,OAAQ,kEAAkE,GACtE,CAAA,6DAAA,CAA+D,GAC/D,CAAA,CAAA,EAAIyC,qBAAqB,CAAG,CAAA,CAAA,CAAA;OACnC;MACD,iBAAiB,EAAEG,MAAM;IACrB,IAAA,OAAO,CAAoD,kDAAA,CAAA,CAAA;OAC9D;IACD,EAAA,uBAAuB,EAAEC,CAAC;QAAEC,IAAI;QAAEC,KAAK;IAAEC,IAAAA,GAAAA;IAAI,GAAC,KAAK;QAC/C,OAAQ,CAAA,WAAA,EAAcD,KAAK,CAAcC,WAAAA,EAAAA,GAAG,4BAA4B,GACpE,CAAA,iDAAA,EAAoDF,IAAI,CAAS,OAAA,CAAA,CAAA;OACxE;IACD,EAAA,kCAAkC,EAAEG,CAAC;QAAEC,GAAG;IAAErE,IAAAA,MAAAA;IAAO,GAAC,KAAK;IACrD,IAAA,OAAQ,oBAAoBqE,GAAG,CAAA,mBAAA,EAAsBrE,MAAM,CAAA,cAAA,CAAgB,GACvE,CAAoC,kCAAA,CAAA,CAAA;OAC3C;IACD,EAAA,4BAA4B,EAAEsE,CAAC;IAAED,IAAAA,GAAAA;IAAI,GAAC,KAAK;IACvC,IAAA,OAAQ,CAAkCA,+BAAAA,EAAAA,GAAG,CAA6B,2BAAA,CAAA,GACtE,CAAU,QAAA,CAAA,CAAA;OACjB;IACD,EAAA,aAAa,EAAEE,CAAC;QAAEF,GAAG;IAAEzE,IAAAA,KAAAA;IAAM,GAAC,KAAK;IAC/B,IAAA,IAAI4E,OAAO,GAAG,CAAmDH,gDAAAA,EAAAA,GAAG,CAAI,EAAA,CAAA,CAAA;IACxE,IAAA,IAAIzE,KAAK,EAAE;UACP4E,OAAO,IAAI,CAA4B5E,yBAAAA,EAAAA,KAAK,CAAG,CAAA,CAAA,CAAA;IACnD,KAAA;IACA,IAAA,OAAO4E,OAAO,CAAA;OACjB;IACD,EAAA,yBAAyB,EAAEC,CAAC;QAAEJ,GAAG;IAAEK,IAAAA,MAAAA;IAAO,GAAC,KAAK;QAC5C,OAAQ,CAAA,4BAAA,EAA+BL,GAAG,CAAA,QAAA,CAAU,IAC/CK,MAAM,GAAG,CAAA,wBAAA,EAA2BA,MAAM,CAAA,CAAA,CAAG,GAAG,CAAA,CAAA,CAAG,CAAC,CAAA;OAC5D;IACD,EAAA,mBAAmB,EAAEC,CAAC;IAAEN,IAAAA,GAAAA;IAAI,GAAC,KAAK;IAC9B,IAAA,OAAQ,CAA4BA,yBAAAA,EAAAA,GAAG,CAAiC,+BAAA,CAAA,GACpE,CAAgE,8DAAA,CAAA,CAAA;OACvE;IACD,EAAA,2CAA2C,EAAEO,CAAC;IAAEP,IAAAA,GAAAA;IAAI,GAAC,KAAK;IACtD,IAAA,OAAQ,+BAA+B,GACnC,CAAA,qEAAA,CAAuE,GACvE,CAAA,EAAGA,GAAG,CAA8D,4DAAA,CAAA,CAAA;OAC3E;IACD,EAAA,wBAAwB,EAAEQ,CAAC;QAAEC,SAAS;IAAET,IAAAA,GAAAA;IAAI,GAAC,KAAK;IAC9C,IAAA,OAAO,CAA0CS,uCAAAA,EAAAA,SAAS,CAAQT,KAAAA,EAAAA,GAAG,CAAG,CAAA,CAAA,CAAA;OAC3E;IACD,EAAA,4BAA4B,EAAEU,CAAC;IAAEC,IAAAA,MAAAA;IAAO,GAAC,KAAK;IAC1C,IAAA,OAAQ,CAAgE,8DAAA,CAAA,GACpE,CAAmDA,gDAAAA,EAAAA,MAAM,CAAG,CAAA,CAAA,CAAA;OACnE;IACD,EAAA,uBAAuB,EAAEC,CAAC;IAAEC,IAAAA,IAAAA;IAAK,GAAC,KAAK;IACnC,IAAA,MAAMV,OAAO,GAAG,CAAA,kDAAA,CAAoD,GAChE,CAAA,CAAA,EAAIU,IAAI,CAAa,WAAA,CAAA,CAAA;QACzB,IAAIA,IAAI,KAAK,gBAAgB,EAAE;IAC3B,MAAA,OAAQ,CAAGV,EAAAA,OAAO,CAAuD,qDAAA,CAAA,GACrE,CAA4B,0BAAA,CAAA,CAAA;IACpC,KAAA;QACA,OAAO,CAAA,EAAGA,OAAO,CAA+C,6CAAA,CAAA,CAAA;IACpE,GAAA;IACJ,CAAC;;ICnOD;IACA;AACA;IACA;IACA;IACA;IACA;IAUA,MAAMW,iBAAiB,GAAGA,CAACC,IAAI,EAAEC,OAAO,GAAG,EAAE,KAAK;IAC9C,EAAA,MAAMb,OAAO,GAAG1D,UAAQ,CAACsE,IAAI,CAAC,CAAA;MAC9B,IAAI,CAACZ,OAAO,EAAE;IACV,IAAA,MAAM,IAAIrD,KAAK,CAAC,CAAoCiE,iCAAAA,EAAAA,IAAI,IAAI,CAAC,CAAA;IACjE,GAAA;MACA,OAAOZ,OAAO,CAACa,OAAO,CAAC,CAAA;IAC3B,CAAC,CAAA;IACM,MAAMC,gBAAgB,GAAsDH,iBAAiB;;ICvBpG;IACA;AACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMI,YAAY,SAASpE,KAAK,CAAC;IAC7B;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACIqE,EAAAA,WAAWA,CAACC,SAAS,EAAEJ,OAAO,EAAE;IAC5B,IAAA,MAAMb,OAAO,GAAGc,gBAAgB,CAACG,SAAS,EAAEJ,OAAO,CAAC,CAAA;QACpD,KAAK,CAACb,OAAO,CAAC,CAAA;QACd,IAAI,CAAC1B,IAAI,GAAG2C,SAAS,CAAA;QACrB,IAAI,CAACJ,OAAO,GAAGA,OAAO,CAAA;IAC1B,GAAA;IACJ;;ICjCA;IACA;AACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMK,OAAO,GAAGA,CAACxE,KAAK,EAAEmE,OAAO,KAAK;IAChC,EAAA,IAAI,CAACM,KAAK,CAACD,OAAO,CAACxE,KAAK,CAAC,EAAE;IACvB,IAAA,MAAM,IAAIqE,YAAY,CAAC,cAAc,EAAEF,OAAO,CAAC,CAAA;IACnD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMO,SAAS,GAAGA,CAACC,MAAM,EAAE5D,cAAc,EAAEoD,OAAO,KAAK;IACnD,EAAA,MAAMH,IAAI,GAAG,OAAOW,MAAM,CAAC5D,cAAc,CAAC,CAAA;MAC1C,IAAIiD,IAAI,KAAK,UAAU,EAAE;IACrBG,IAAAA,OAAO,CAAC,gBAAgB,CAAC,GAAGpD,cAAc,CAAA;IAC1C,IAAA,MAAM,IAAIsD,YAAY,CAAC,kBAAkB,EAAEF,OAAO,CAAC,CAAA;IACvD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMS,MAAM,GAAGA,CAACD,MAAM,EAAElE,YAAY,EAAE0D,OAAO,KAAK;IAC9C,EAAA,IAAI,OAAOQ,MAAM,KAAKlE,YAAY,EAAE;IAChC0D,IAAAA,OAAO,CAAC,cAAc,CAAC,GAAG1D,YAAY,CAAA;IACtC,IAAA,MAAM,IAAI4D,YAAY,CAAC,gBAAgB,EAAEF,OAAO,CAAC,CAAA;IACrD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMU,UAAU,GAAGA,CAACF,MAAM;IAC1B;IACA;IACAzC,aAAa,EAAEiC,OAAO,KAAK;IACvB,EAAA,IAAI,EAAEQ,MAAM,YAAYzC,aAAa,CAAC,EAAE;IACpCiC,IAAAA,OAAO,CAAC,mBAAmB,CAAC,GAAGjC,aAAa,CAACN,IAAI,CAAA;IACjD,IAAA,MAAM,IAAIyC,YAAY,CAAC,iBAAiB,EAAEF,OAAO,CAAC,CAAA;IACtD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMW,OAAO,GAAGA,CAAC9E,KAAK,EAAE+E,WAAW,EAAEZ,OAAO,KAAK;IAC7C,EAAA,IAAI,CAACY,WAAW,CAACC,QAAQ,CAAChF,KAAK,CAAC,EAAE;QAC9BmE,OAAO,CAAC,uBAAuB,CAAC,GAAG,CAAA,iBAAA,EAAoBjE,IAAI,CAACC,SAAS,CAAC4E,WAAW,CAAC,CAAG,CAAA,CAAA,CAAA;IACrF,IAAA,MAAM,IAAIV,YAAY,CAAC,eAAe,EAAEF,OAAO,CAAC,CAAA;IACpD,GAAA;IACJ,CAAC,CAAA;IACD,MAAMc,cAAc,GAAGA,CAACjF,KAAK;IAC7B;IACAkC,aAAa;IAAE;IACfiC,OAAO,KAAK;MACR,MAAMzF,KAAK,GAAG,IAAI2F,YAAY,CAAC,oBAAoB,EAAEF,OAAO,CAAC,CAAA;IAC7D,EAAA,IAAI,CAACM,KAAK,CAACD,OAAO,CAACxE,KAAK,CAAC,EAAE;IACvB,IAAA,MAAMtB,KAAK,CAAA;IACf,GAAA;IACA,EAAA,KAAK,MAAMwG,IAAI,IAAIlF,KAAK,EAAE;IACtB,IAAA,IAAI,EAAEkF,IAAI,YAAYhD,aAAa,CAAC,EAAE;IAClC,MAAA,MAAMxD,KAAK,CAAA;IACf,KAAA;IACJ,GAAA;IACJ,CAAC,CAAA;IACD,MAAMyG,kBAAkB,GAElB;MACET,SAAS;MACTF,OAAO;MACPK,UAAU;MACVC,OAAO;MACPF,MAAM;IACNK,EAAAA,cAAAA;IACJ,CAAC;;ICtEL;IACA,IAAI;IACAlH,EAAAA,IAAI,CAAC,uBAAuB,CAAC,IAAIC,CAAC,EAAE,CAAA;IACxC,CAAC,CACD,OAAOC,CAAC,EAAE;;ICLV;IACA;AACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACO,MAAMmH,aAAa,GAAG,KAAK,CAAA;IAClC;IACA;IACA;IACA;IACA;IACA;IACA;IACO,MAAMC,YAAY,GAAG,CACxB,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,CACR;;IC/BD;IACA;AACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IACA;IACO,MAAMC,gBAAgB,GAAIC,OAAO,IAAK;IACzC,EAAA,IAAIA,OAAO,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;QACG;IACvCC,MAAAA,kBAAM,CAACd,SAAS,CAACa,OAAO,EAAE,QAAQ,EAAE;IAChClF,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,OAAO;IAClBC,QAAAA,QAAQ,EAAE,aAAa;IACvBT,QAAAA,SAAS,EAAE,SAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,OAAOyF,OAAO,CAAA;IAClB,GAAC,MACI;QAC0C;IACvCC,MAAAA,kBAAM,CAACZ,MAAM,CAACW,OAAO,EAAE,UAAU,EAAE;IAC/BlF,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,OAAO;IAClBC,QAAAA,QAAQ,EAAE,aAAa;IACvBT,QAAAA,SAAS,EAAE,SAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,OAAO;IAAE2F,MAAAA,MAAM,EAAEF,OAAAA;SAAS,CAAA;IAC9B,GAAA;IACJ,CAAC;;ICvCD;IACA;AACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMG,KAAK,CAAC;IACR;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACIpB,WAAWA,CAACqB,KAAK,EAAEJ,OAAO,EAAEzG,MAAM,GAAGsG,aAAa,EAAE;QACL;IACvCI,MAAAA,kBAAM,CAACZ,MAAM,CAACe,KAAK,EAAE,UAAU,EAAE;IAC7BtF,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,OAAO;IAClBC,QAAAA,QAAQ,EAAE,aAAa;IACvBT,QAAAA,SAAS,EAAE,OAAA;IACf,OAAC,CAAC,CAAA;IACF,MAAA,IAAIhB,MAAM,EAAE;IACR0G,QAAAA,kBAAM,CAACV,OAAO,CAAChG,MAAM,EAAEuG,YAAY,EAAE;IAAEvF,UAAAA,SAAS,EAAE,QAAA;IAAS,SAAC,CAAC,CAAA;IACjE,OAAA;IACJ,KAAA;IACA;IACA;IACA,IAAA,IAAI,CAACyF,OAAO,GAAGD,gBAAgB,CAACC,OAAO,CAAC,CAAA;QACxC,IAAI,CAACI,KAAK,GAAGA,KAAK,CAAA;QAClB,IAAI,CAAC7G,MAAM,GAAGA,MAAM,CAAA;IACxB,GAAA;IACA;IACJ;IACA;IACA;IACA;MACI8G,eAAeA,CAACL,OAAO,EAAE;IACrB,IAAA,IAAI,CAACM,YAAY,GAAGP,gBAAgB,CAACC,OAAO,CAAC,CAAA;IACjD,GAAA;IACJ;;IC1DA;IACA;AACA;IACA;IACA;IACA;IACA;IAKA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMO,WAAW,SAASJ,KAAK,CAAC;IAC5B;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIpB,EAAAA,WAAWA,CAACyB,MAAM,EAAER,OAAO,EAAEzG,MAAM,EAAE;QACU;IACvC0G,MAAAA,kBAAM,CAACX,UAAU,CAACkB,MAAM,EAAEC,MAAM,EAAE;IAC9B3F,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,aAAa;IACxBC,QAAAA,QAAQ,EAAE,aAAa;IACvBT,QAAAA,SAAS,EAAE,SAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,MAAM6F,KAAK,GAAGA,CAAC;IAAExC,MAAAA,GAAAA;IAAI,KAAC,KAAK;UACvB,MAAM8C,MAAM,GAAGF,MAAM,CAACG,IAAI,CAAC/C,GAAG,CAACgD,IAAI,CAAC,CAAA;IACpC;UACA,IAAI,CAACF,MAAM,EAAE;IACT,QAAA,OAAA;IACJ,OAAA;IACA;IACA;IACA;IACA;IACA,MAAA,IAAI9C,GAAG,CAACW,MAAM,KAAKsC,QAAQ,CAACtC,MAAM,IAAImC,MAAM,CAACI,KAAK,KAAK,CAAC,EAAE;YACX;cACvCnI,MAAM,CAACK,KAAK,CAAC,CAAA,wBAAA,EAA2BwH,MAAM,CAACO,QAAQ,EAAE,CAAA,yBAAA,CAA2B,GAChF,CAAiCnD,8BAAAA,EAAAA,GAAG,CAACmD,QAAQ,EAAE,CAA6B,2BAAA,CAAA,GAC5E,4DAA4D,CAAC,CAAA;IACrE,SAAA;IACA,QAAA,OAAA;IACJ,OAAA;IACA;IACA;IACA;IACA;IACA,MAAA,OAAOL,MAAM,CAACM,KAAK,CAAC,CAAC,CAAC,CAAA;SACzB,CAAA;IACD,IAAA,KAAK,CAACZ,KAAK,EAAEJ,OAAO,EAAEzG,MAAM,CAAC,CAAA;IACjC,GAAA;IACJ;;ICvEA;IACA;AACA;IACA;IACA;IACA;IACA;IAEA,MAAM0H,cAAc,GAAIrD,GAAG,IAAK;IAC5B,EAAA,MAAMsD,MAAM,GAAG,IAAIC,GAAG,CAACC,MAAM,CAACxD,GAAG,CAAC,EAAEiD,QAAQ,CAACD,IAAI,CAAC,CAAA;IAClD;IACA;IACA,EAAA,OAAOM,MAAM,CAACN,IAAI,CAACS,OAAO,CAAC,IAAIZ,MAAM,CAAC,CAAA,CAAA,EAAII,QAAQ,CAACtC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;IACrE,CAAC;;ICbD;IACA;AACA;IACA;IACA;IACA;IACA;IAQA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAM+C,MAAM,CAAC;IACT;IACJ;IACA;IACIvC,EAAAA,WAAWA,GAAG;IACV,IAAA,IAAI,CAACwC,OAAO,GAAG,IAAIC,GAAG,EAAE,CAAA;IACxB,IAAA,IAAI,CAACC,kBAAkB,GAAG,IAAID,GAAG,EAAE,CAAA;IACvC,GAAA;IACA;IACJ;IACA;IACA;IACA;MACI,IAAIE,MAAMA,GAAG;QACT,OAAO,IAAI,CAACH,OAAO,CAAA;IACvB,GAAA;IACA;IACJ;IACA;IACA;IACII,EAAAA,gBAAgBA,GAAG;IACf;IACAnJ,IAAAA,IAAI,CAACoJ,gBAAgB,CAAC,OAAO,EAAIC,KAAK,IAAK;UACvC,MAAM;IAAEC,QAAAA,OAAAA;IAAQ,OAAC,GAAGD,KAAK,CAAA;IACzB,MAAA,MAAME,eAAe,GAAG,IAAI,CAACC,aAAa,CAAC;YAAEF,OAAO;IAAED,QAAAA,KAAAA;IAAM,OAAC,CAAC,CAAA;IAC9D,MAAA,IAAIE,eAAe,EAAE;IACjBF,QAAAA,KAAK,CAACI,WAAW,CAACF,eAAe,CAAC,CAAA;IACtC,OAAA;IACJ,KAAE,CAAC,CAAA;IACP,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIG,EAAAA,gBAAgBA,GAAG;IACf;IACA1J,IAAAA,IAAI,CAACoJ,gBAAgB,CAAC,SAAS,EAAIC,KAAK,IAAK;IACzC;IACA;UACA,IAAIA,KAAK,CAACM,IAAI,IAAIN,KAAK,CAACM,IAAI,CAAC1D,IAAI,KAAK,YAAY,EAAE;IAChD;YACA,MAAM;IAAE2D,UAAAA,OAAAA;aAAS,GAAGP,KAAK,CAACM,IAAI,CAAA;YACa;cACvCxJ,MAAM,CAACK,KAAK,CAAC,CAAA,4BAAA,CAA8B,EAAEoJ,OAAO,CAACC,WAAW,CAAC,CAAA;IACrE,SAAA;IACA,QAAA,MAAMC,eAAe,GAAGC,OAAO,CAACC,GAAG,CAACJ,OAAO,CAACC,WAAW,CAACI,GAAG,CAAE/G,KAAK,IAAK;IACnE,UAAA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;gBAC3BA,KAAK,GAAG,CAACA,KAAK,CAAC,CAAA;IACnB,WAAA;IACA,UAAA,MAAMoG,OAAO,GAAG,IAAIY,OAAO,CAAC,GAAGhH,KAAK,CAAC,CAAA;cACrC,OAAO,IAAI,CAACsG,aAAa,CAAC;gBAAEF,OAAO;IAAED,YAAAA,KAAAA;IAAM,WAAC,CAAC,CAAA;IAC7C;IACA;IACA;aACH,CAAC,CAAC,CAAC;IACJA,QAAAA,KAAK,CAACc,SAAS,CAACL,eAAe,CAAC,CAAA;IAChC;YACA,IAAIT,KAAK,CAACe,KAAK,IAAIf,KAAK,CAACe,KAAK,CAAC,CAAC,CAAC,EAAE;IAC/B,UAAA,KAAKN,eAAe,CAACO,IAAI,CAAC,MAAMhB,KAAK,CAACe,KAAK,CAAC,CAAC,CAAC,CAACE,WAAW,CAAC,IAAI,CAAC,CAAC,CAAA;IACrE,SAAA;IACJ,OAAA;IACJ,KAAE,CAAC,CAAA;IACP,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACId,EAAAA,aAAaA,CAAC;QAAEF,OAAO;IAAED,IAAAA,KAAAA;IAAO,GAAC,EAAE;QACY;IACvC5B,MAAAA,kBAAM,CAACX,UAAU,CAACwC,OAAO,EAAEY,OAAO,EAAE;IAChC5H,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBT,QAAAA,SAAS,EAAE,iBAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,MAAMqD,GAAG,GAAG,IAAIuD,GAAG,CAACW,OAAO,CAAClE,GAAG,EAAEiD,QAAQ,CAACD,IAAI,CAAC,CAAA;QAC/C,IAAI,CAAChD,GAAG,CAACmF,QAAQ,CAACC,UAAU,CAAC,MAAM,CAAC,EAAE;UACS;IACvCrK,QAAAA,MAAM,CAACK,KAAK,CAAC,CAAA,yDAAA,CAA2D,CAAC,CAAA;IAC7E,OAAA;IACA,MAAA,OAAA;IACJ,KAAA;QACA,MAAMiK,UAAU,GAAGrF,GAAG,CAACW,MAAM,KAAKsC,QAAQ,CAACtC,MAAM,CAAA;QACjD,MAAM;UAAE2E,MAAM;IAAEC,MAAAA,KAAAA;IAAM,KAAC,GAAG,IAAI,CAACC,iBAAiB,CAAC;UAC7CvB,KAAK;UACLC,OAAO;UACPmB,UAAU;IACVrF,MAAAA,GAAAA;IACJ,KAAC,CAAC,CAAA;IACF,IAAA,IAAIoC,OAAO,GAAGmD,KAAK,IAAIA,KAAK,CAACnD,OAAO,CAAA;QACpC,MAAMqD,aAAa,GAAG,EAAE,CAAA;QACmB;IACvC,MAAA,IAAIrD,OAAO,EAAE;YACTqD,aAAa,CAACC,IAAI,CAAC,CAAC,uCAAuC,EAAEH,KAAK,CAAC,CAAC,CAAA;IACpE,QAAA,IAAID,MAAM,EAAE;cACRG,aAAa,CAACC,IAAI,CAAC,CACf,sDAAsD,EACtDJ,MAAM,CACT,CAAC,CAAA;IACN,SAAA;IACJ,OAAA;IACJ,KAAA;IACA;IACA;IACA,IAAA,MAAM3J,MAAM,GAAGuI,OAAO,CAACvI,MAAM,CAAA;QAC7B,IAAI,CAACyG,OAAO,IAAI,IAAI,CAACyB,kBAAkB,CAAC8B,GAAG,CAAChK,MAAM,CAAC,EAAE;UACN;YACvC8J,aAAa,CAACC,IAAI,CAAC,CAAA,yCAAA,CAA2C,GAC1D,CAAmC/J,gCAAAA,EAAAA,MAAM,GAAG,CAAC,CAAA;IACrD,OAAA;UACAyG,OAAO,GAAG,IAAI,CAACyB,kBAAkB,CAAC+B,GAAG,CAACjK,MAAM,CAAC,CAAA;IACjD,KAAA;QACA,IAAI,CAACyG,OAAO,EAAE;UACiC;IACvC;IACA;YACArH,MAAM,CAACK,KAAK,CAAC,CAAA,oBAAA,EAAuBiI,cAAc,CAACrD,GAAG,CAAC,CAAA,CAAE,CAAC,CAAA;IAC9D,OAAA;IACA,MAAA,OAAA;IACJ,KAAA;QAC2C;IACvC;IACA;UACAjF,MAAM,CAACS,cAAc,CAAC,CAAA,yBAAA,EAA4B6H,cAAc,CAACrD,GAAG,CAAC,CAAA,CAAE,CAAC,CAAA;IACxEyF,MAAAA,aAAa,CAACI,OAAO,CAAEC,GAAG,IAAK;IAC3B,QAAA,IAAIxE,KAAK,CAACD,OAAO,CAACyE,GAAG,CAAC,EAAE;IACpB/K,UAAAA,MAAM,CAACM,GAAG,CAAC,GAAGyK,GAAG,CAAC,CAAA;IACtB,SAAC,MACI;IACD/K,UAAAA,MAAM,CAACM,GAAG,CAACyK,GAAG,CAAC,CAAA;IACnB,SAAA;IACJ,OAAC,CAAC,CAAA;UACF/K,MAAM,CAACU,QAAQ,EAAE,CAAA;IACrB,KAAA;IACA;IACA;IACA,IAAA,IAAI0I,eAAe,CAAA;QACnB,IAAI;IACAA,MAAAA,eAAe,GAAG/B,OAAO,CAACE,MAAM,CAAC;YAAEtC,GAAG;YAAEkE,OAAO;YAAED,KAAK;IAAEqB,QAAAA,MAAAA;IAAO,OAAC,CAAC,CAAA;SACpE,CACD,OAAOS,GAAG,EAAE;IACR5B,MAAAA,eAAe,GAAGQ,OAAO,CAACqB,MAAM,CAACD,GAAG,CAAC,CAAA;IACzC,KAAA;IACA;IACA,IAAA,MAAMrD,YAAY,GAAG6C,KAAK,IAAIA,KAAK,CAAC7C,YAAY,CAAA;QAChD,IAAIyB,eAAe,YAAYQ,OAAO,KACjC,IAAI,CAACsB,aAAa,IAAIvD,YAAY,CAAC,EAAE;IACtCyB,MAAAA,eAAe,GAAGA,eAAe,CAAC+B,KAAK,CAAC,MAAOH,GAAG,IAAK;IACnD;IACA,QAAA,IAAIrD,YAAY,EAAE;cAC6B;IACvC;IACA;gBACA3H,MAAM,CAACS,cAAc,CAAC,CAAmC,iCAAA,CAAA,GACrD,CAAI6H,CAAAA,EAAAA,cAAc,CAACrD,GAAG,CAAC,CAAA,wCAAA,CAA0C,CAAC,CAAA;IACtEjF,YAAAA,MAAM,CAACQ,KAAK,CAAC,CAAkB,gBAAA,CAAA,EAAEgK,KAAK,CAAC,CAAA;IACvCxK,YAAAA,MAAM,CAACQ,KAAK,CAACwK,GAAG,CAAC,CAAA;gBACjBhL,MAAM,CAACU,QAAQ,EAAE,CAAA;IACrB,WAAA;cACA,IAAI;IACA,YAAA,OAAO,MAAMiH,YAAY,CAACJ,MAAM,CAAC;kBAAEtC,GAAG;kBAAEkE,OAAO;kBAAED,KAAK;IAAEqB,cAAAA,MAAAA;IAAO,aAAC,CAAC,CAAA;eACpE,CACD,OAAOa,QAAQ,EAAE;gBACb,IAAIA,QAAQ,YAAYrJ,KAAK,EAAE;IAC3BiJ,cAAAA,GAAG,GAAGI,QAAQ,CAAA;IAClB,aAAA;IACJ,WAAA;IACJ,SAAA;YACA,IAAI,IAAI,CAACF,aAAa,EAAE;cACuB;IACvC;IACA;gBACAlL,MAAM,CAACS,cAAc,CAAC,CAAmC,iCAAA,CAAA,GACrD,CAAI6H,CAAAA,EAAAA,cAAc,CAACrD,GAAG,CAAC,CAAA,uCAAA,CAAyC,CAAC,CAAA;IACrEjF,YAAAA,MAAM,CAACQ,KAAK,CAAC,CAAkB,gBAAA,CAAA,EAAEgK,KAAK,CAAC,CAAA;IACvCxK,YAAAA,MAAM,CAACQ,KAAK,CAACwK,GAAG,CAAC,CAAA;gBACjBhL,MAAM,CAACU,QAAQ,EAAE,CAAA;IACrB,WAAA;IACA,UAAA,OAAO,IAAI,CAACwK,aAAa,CAAC3D,MAAM,CAAC;gBAAEtC,GAAG;gBAAEkE,OAAO;IAAED,YAAAA,KAAAA;IAAM,WAAC,CAAC,CAAA;IAC7D,SAAA;IACA,QAAA,MAAM8B,GAAG,CAAA;IACb,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,OAAO5B,eAAe,CAAA;IAC1B,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIqB,EAAAA,iBAAiBA,CAAC;QAAExF,GAAG;QAAEqF,UAAU;QAAEnB,OAAO;IAAED,IAAAA,KAAAA;IAAO,GAAC,EAAE;IACpD,IAAA,MAAMH,MAAM,GAAG,IAAI,CAACH,OAAO,CAACiC,GAAG,CAAC1B,OAAO,CAACvI,MAAM,CAAC,IAAI,EAAE,CAAA;IACrD,IAAA,KAAK,MAAM4J,KAAK,IAAIzB,MAAM,EAAE;IACxB,MAAA,IAAIwB,MAAM,CAAA;IACV;IACA;IACA,MAAA,MAAMc,WAAW,GAAGb,KAAK,CAAC/C,KAAK,CAAC;YAAExC,GAAG;YAAEqF,UAAU;YAAEnB,OAAO;IAAED,QAAAA,KAAAA;IAAM,OAAC,CAAC,CAAA;IACpE,MAAA,IAAImC,WAAW,EAAE;YAC8B;IACvC;IACA;cACA,IAAIA,WAAW,YAAYzB,OAAO,EAAE;IAChC5J,YAAAA,MAAM,CAACO,IAAI,CAAC,CAAA,cAAA,EAAiB+H,cAAc,CAACrD,GAAG,CAAC,CAAA,WAAA,CAAa,GACzD,CAAsD,oDAAA,CAAA,GACtD,CAA8D,4DAAA,CAAA,EAAEuF,KAAK,CAAC,CAAA;IAC9E,WAAA;IACJ,SAAA;IACA;IACA;IACAD,QAAAA,MAAM,GAAGc,WAAW,CAAA;IACpB,QAAA,IAAI9E,KAAK,CAACD,OAAO,CAACiE,MAAM,CAAC,IAAIA,MAAM,CAACe,MAAM,KAAK,CAAC,EAAE;IAC9C;IACAf,UAAAA,MAAM,GAAGgB,SAAS,CAAA;IACtB,SAAC,MACI,IAAIF,WAAW,CAACjF,WAAW,KAAK7E,MAAM;IAAI;YAC3CA,MAAM,CAACC,IAAI,CAAC6J,WAAW,CAAC,CAACC,MAAM,KAAK,CAAC,EAAE;IACvC;IACAf,UAAAA,MAAM,GAAGgB,SAAS,CAAA;IACtB,SAAC,MACI,IAAI,OAAOF,WAAW,KAAK,SAAS,EAAE;IACvC;IACA;IACA;IACAd,UAAAA,MAAM,GAAGgB,SAAS,CAAA;IACtB,SAAA;IACA;YACA,OAAO;cAAEf,KAAK;IAAED,UAAAA,MAAAA;aAAQ,CAAA;IAC5B,OAAA;IACJ,KAAA;IACA;IACA,IAAA,OAAO,EAAE,CAAA;IACb,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIiB,EAAAA,iBAAiBA,CAACnE,OAAO,EAAEzG,MAAM,GAAGsG,aAAa,EAAE;QAC/C,IAAI,CAAC4B,kBAAkB,CAAC2C,GAAG,CAAC7K,MAAM,EAAEwG,gBAAgB,CAACC,OAAO,CAAC,CAAC,CAAA;IAClE,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;MACIK,eAAeA,CAACL,OAAO,EAAE;IACrB,IAAA,IAAI,CAAC6D,aAAa,GAAG9D,gBAAgB,CAACC,OAAO,CAAC,CAAA;IAClD,GAAA;IACA;IACJ;IACA;IACA;IACA;MACIqE,aAAaA,CAAClB,KAAK,EAAE;QAC0B;IACvClD,MAAAA,kBAAM,CAACZ,MAAM,CAAC8D,KAAK,EAAE,QAAQ,EAAE;IAC3BrI,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBT,QAAAA,SAAS,EAAE,OAAA;IACf,OAAC,CAAC,CAAA;IACF0F,MAAAA,kBAAM,CAACd,SAAS,CAACgE,KAAK,EAAE,OAAO,EAAE;IAC7BrI,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBT,QAAAA,SAAS,EAAE,OAAA;IACf,OAAC,CAAC,CAAA;UACF0F,kBAAM,CAACZ,MAAM,CAAC8D,KAAK,CAACnD,OAAO,EAAE,QAAQ,EAAE;IACnClF,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBT,QAAAA,SAAS,EAAE,OAAA;IACf,OAAC,CAAC,CAAA;UACF0F,kBAAM,CAACd,SAAS,CAACgE,KAAK,CAACnD,OAAO,EAAE,QAAQ,EAAE;IACtClF,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBT,QAAAA,SAAS,EAAE,eAAA;IACf,OAAC,CAAC,CAAA;UACF0F,kBAAM,CAACZ,MAAM,CAAC8D,KAAK,CAAC5J,MAAM,EAAE,QAAQ,EAAE;IAClCuB,QAAAA,UAAU,EAAE,iBAAiB;IAC7BC,QAAAA,SAAS,EAAE,QAAQ;IACnBC,QAAAA,QAAQ,EAAE,eAAe;IACzBT,QAAAA,SAAS,EAAE,cAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,IAAI,CAAC,IAAI,CAACgH,OAAO,CAACgC,GAAG,CAACJ,KAAK,CAAC5J,MAAM,CAAC,EAAE;UACjC,IAAI,CAACgI,OAAO,CAAC6C,GAAG,CAACjB,KAAK,CAAC5J,MAAM,EAAE,EAAE,CAAC,CAAA;IACtC,KAAA;IACA;IACA;IACA,IAAA,IAAI,CAACgI,OAAO,CAACiC,GAAG,CAACL,KAAK,CAAC5J,MAAM,CAAC,CAAC+J,IAAI,CAACH,KAAK,CAAC,CAAA;IAC9C,GAAA;IACA;IACJ;IACA;IACA;IACA;MACImB,eAAeA,CAACnB,KAAK,EAAE;QACnB,IAAI,CAAC,IAAI,CAAC5B,OAAO,CAACgC,GAAG,CAACJ,KAAK,CAAC5J,MAAM,CAAC,EAAE;IACjC,MAAA,MAAM,IAAIuF,YAAY,CAAC,4CAA4C,EAAE;YACjEvF,MAAM,EAAE4J,KAAK,CAAC5J,MAAAA;IAClB,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,MAAMgL,UAAU,GAAG,IAAI,CAAChD,OAAO,CAACiC,GAAG,CAACL,KAAK,CAAC5J,MAAM,CAAC,CAACiL,OAAO,CAACrB,KAAK,CAAC,CAAA;IAChE,IAAA,IAAIoB,UAAU,GAAG,CAAC,CAAC,EAAE;IACjB,MAAA,IAAI,CAAChD,OAAO,CAACiC,GAAG,CAACL,KAAK,CAAC5J,MAAM,CAAC,CAACkL,MAAM,CAACF,UAAU,EAAE,CAAC,CAAC,CAAA;IACxD,KAAC,MACI;IACD,MAAA,MAAM,IAAIzF,YAAY,CAAC,uCAAuC,CAAC,CAAA;IACnE,KAAA;IACJ,GAAA;IACJ;;ICvYA;IACA;AACA;IACA;IACA;IACA;IACA;IAGA,IAAI4F,aAAa,CAAA;IACjB;IACA;IACA;IACA;IACA;IACA;IACA;IACO,MAAMC,wBAAwB,GAAGA,MAAM;MAC1C,IAAI,CAACD,aAAa,EAAE;IAChBA,IAAAA,aAAa,GAAG,IAAIpD,MAAM,EAAE,CAAA;IAC5B;QACAoD,aAAa,CAAC/C,gBAAgB,EAAE,CAAA;QAChC+C,aAAa,CAACxC,gBAAgB,EAAE,CAAA;IACpC,GAAA;IACA,EAAA,OAAOwC,aAAa,CAAA;IACxB,CAAC;;ICzBD;IACA;AACA;IACA;IACA;IACA;IACA;IAOA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,SAASL,aAAaA,CAACO,OAAO,EAAE5E,OAAO,EAAEzG,MAAM,EAAE;IAC7C,EAAA,IAAI4J,KAAK,CAAA;IACT,EAAA,IAAI,OAAOyB,OAAO,KAAK,QAAQ,EAAE;QAC7B,MAAMC,UAAU,GAAG,IAAI1D,GAAG,CAACyD,OAAO,EAAE/D,QAAQ,CAACD,IAAI,CAAC,CAAA;QACP;IACvC,MAAA,IAAI,EAAEgE,OAAO,CAAC5B,UAAU,CAAC,GAAG,CAAC,IAAI4B,OAAO,CAAC5B,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE;IAC1D,QAAA,MAAM,IAAIlE,YAAY,CAAC,gBAAgB,EAAE;IACrChE,UAAAA,UAAU,EAAE,iBAAiB;IAC7BE,UAAAA,QAAQ,EAAE,eAAe;IACzBT,UAAAA,SAAS,EAAE,SAAA;IACf,SAAC,CAAC,CAAA;IACN,OAAA;IACA;IACA;IACA,MAAA,MAAMuK,YAAY,GAAGF,OAAO,CAAC5B,UAAU,CAAC,MAAM,CAAC,GACzC6B,UAAU,CAACE,QAAQ,GACnBH,OAAO,CAAA;IACb;UACA,MAAMI,SAAS,GAAG,QAAQ,CAAA;IAC1B,MAAA,IAAI,IAAIvE,MAAM,CAAC,CAAA,EAAGuE,SAAS,CAAA,CAAE,CAAC,CAACrE,IAAI,CAACmE,YAAY,CAAC,EAAE;YAC/CnM,MAAM,CAACK,KAAK,CAAC,CAA8D,4DAAA,CAAA,GACvE,cAAcgM,SAAS,CAAA,yCAAA,CAA2C,GAClE,CAAA,4DAAA,CAA8D,CAAC,CAAA;IACvE,OAAA;IACJ,KAAA;QACA,MAAMC,aAAa,GAAGA,CAAC;IAAErH,MAAAA,GAAAA;IAAI,KAAC,KAAK;UACY;IACvC,QAAA,IAAIA,GAAG,CAACmH,QAAQ,KAAKF,UAAU,CAACE,QAAQ,IACpCnH,GAAG,CAACW,MAAM,KAAKsG,UAAU,CAACtG,MAAM,EAAE;IAClC5F,UAAAA,MAAM,CAACK,KAAK,CAAC,CAAG4L,EAAAA,OAAO,+CAA+C,GAClE,CAAA,EAAGhH,GAAG,CAACmD,QAAQ,EAAE,CAAsD,oDAAA,CAAA,GACvE,+BAA+B,CAAC,CAAA;IACxC,SAAA;IACJ,OAAA;IACA,MAAA,OAAOnD,GAAG,CAACgD,IAAI,KAAKiE,UAAU,CAACjE,IAAI,CAAA;SACtC,CAAA;IACD;QACAuC,KAAK,GAAG,IAAIhD,KAAK,CAAC8E,aAAa,EAAEjF,OAAO,EAAEzG,MAAM,CAAC,CAAA;IACrD,GAAC,MACI,IAAIqL,OAAO,YAAYnE,MAAM,EAAE;IAChC;QACA0C,KAAK,GAAG,IAAI5C,WAAW,CAACqE,OAAO,EAAE5E,OAAO,EAAEzG,MAAM,CAAC,CAAA;IACrD,GAAC,MACI,IAAI,OAAOqL,OAAO,KAAK,UAAU,EAAE;IACpC;QACAzB,KAAK,GAAG,IAAIhD,KAAK,CAACyE,OAAO,EAAE5E,OAAO,EAAEzG,MAAM,CAAC,CAAA;IAC/C,GAAC,MACI,IAAIqL,OAAO,YAAYzE,KAAK,EAAE;IAC/BgD,IAAAA,KAAK,GAAGyB,OAAO,CAAA;IACnB,GAAC,MACI;IACD,IAAA,MAAM,IAAI9F,YAAY,CAAC,wBAAwB,EAAE;IAC7ChE,MAAAA,UAAU,EAAE,iBAAiB;IAC7BE,MAAAA,QAAQ,EAAE,eAAe;IACzBT,MAAAA,SAAS,EAAE,SAAA;IACf,KAAC,CAAC,CAAA;IACN,GAAA;IACA,EAAA,MAAMmK,aAAa,GAAGC,wBAAwB,EAAE,CAAA;IAChDD,EAAAA,aAAa,CAACL,aAAa,CAAClB,KAAK,CAAC,CAAA;IAClC,EAAA,OAAOA,KAAK,CAAA;IAChB;;IC1FA;IACA,IAAI;IACA3K,EAAAA,IAAI,CAAC,0BAA0B,CAAC,IAAIC,CAAC,EAAE,CAAA;IAC3C,CAAC,CACD,OAAOC,CAAC,EAAE;;ICLV;IACA;AACA;IACA;IACA;IACA;IACA;IAEO,MAAMwM,sBAAsB,GAAG;IAClC;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACIC,eAAe,EAAE,OAAO;IAAEC,IAAAA,QAAAA;IAAS,GAAC,KAAK;QACrC,IAAIA,QAAQ,CAACnH,MAAM,KAAK,GAAG,IAAImH,QAAQ,CAACnH,MAAM,KAAK,CAAC,EAAE;IAClD,MAAA,OAAOmH,QAAQ,CAAA;IACnB,KAAA;IACA,IAAA,OAAO,IAAI,CAAA;IACf,GAAA;IACJ,CAAC;;ICzBD;IACA;AACA;IACA;IACA;IACA;IACA;IAEA,MAAMC,iBAAiB,GAAG;IACtBC,EAAAA,eAAe,EAAE,iBAAiB;IAClCC,EAAAA,QAAQ,EAAE,aAAa;IACvBC,EAAAA,MAAM,EAAE,SAAS;IACjBC,EAAAA,OAAO,EAAE,SAAS;MAClBC,MAAM,EAAE,OAAOC,YAAY,KAAK,WAAW,GAAGA,YAAY,CAACC,KAAK,GAAG,EAAA;IACvE,CAAC,CAAA;IACD,MAAMC,gBAAgB,GAAIxH,SAAS,IAAK;IACpC,EAAA,OAAO,CAACgH,iBAAiB,CAACG,MAAM,EAAEnH,SAAS,EAAEgH,iBAAiB,CAACK,MAAM,CAAC,CACjEI,MAAM,CAAErL,KAAK,IAAKA,KAAK,IAAIA,KAAK,CAACwJ,MAAM,GAAG,CAAC,CAAC,CAC5ClK,IAAI,CAAC,GAAG,CAAC,CAAA;IAClB,CAAC,CAAA;IACD,MAAMgM,mBAAmB,GAAIC,EAAE,IAAK;MAChC,KAAK,MAAM5L,GAAG,IAAIF,MAAM,CAACC,IAAI,CAACkL,iBAAiB,CAAC,EAAE;QAC9CW,EAAE,CAAC5L,GAAG,CAAC,CAAA;IACX,GAAA;IACJ,CAAC,CAAA;IACM,MAAM6L,UAAU,GAAG;MACtBC,aAAa,EAAGtH,OAAO,IAAK;QACxBmH,mBAAmB,CAAE3L,GAAG,IAAK;IACzB,MAAA,IAAI,OAAOwE,OAAO,CAACxE,GAAG,CAAC,KAAK,QAAQ,EAAE;IAClCiL,QAAAA,iBAAiB,CAACjL,GAAG,CAAC,GAAGwE,OAAO,CAACxE,GAAG,CAAC,CAAA;IACzC,OAAA;IACJ,KAAC,CAAC,CAAA;OACL;MACD+L,sBAAsB,EAAGC,aAAa,IAAK;IACvC,IAAA,OAAOA,aAAa,IAAIP,gBAAgB,CAACR,iBAAiB,CAACC,eAAe,CAAC,CAAA;OAC9E;MACDe,eAAe,EAAGD,aAAa,IAAK;IAChC,IAAA,OAAOA,aAAa,IAAIP,gBAAgB,CAACR,iBAAiB,CAACE,QAAQ,CAAC,CAAA;OACvE;MACDe,SAAS,EAAEA,MAAM;QACb,OAAOjB,iBAAiB,CAACG,MAAM,CAAA;OAClC;MACDe,cAAc,EAAGH,aAAa,IAAK;IAC/B,IAAA,OAAOA,aAAa,IAAIP,gBAAgB,CAACR,iBAAiB,CAACI,OAAO,CAAC,CAAA;OACtE;MACDe,SAAS,EAAEA,MAAM;QACb,OAAOnB,iBAAiB,CAACK,MAAM,CAAA;IACnC,GAAA;IACJ,CAAC;;IChDD;IACA;IACA;IACA;IACA;IACA;IAEA,SAASe,WAAWA,CAACC,OAAO,EAAEC,YAAY,EAAE;IACxC,EAAA,MAAMC,WAAW,GAAG,IAAIzF,GAAG,CAACuF,OAAO,CAAC,CAAA;IACpC,EAAA,KAAK,MAAMG,KAAK,IAAIF,YAAY,EAAE;IAC9BC,IAAAA,WAAW,CAACE,YAAY,CAACC,MAAM,CAACF,KAAK,CAAC,CAAA;IAC1C,GAAA;MACA,OAAOD,WAAW,CAAChG,IAAI,CAAA;IAC3B,CAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,eAAeoG,sBAAsBA,CAACC,KAAK,EAAEnF,OAAO,EAAE6E,YAAY,EAAEO,YAAY,EAAE;MAC9E,MAAMC,kBAAkB,GAAGV,WAAW,CAAC3E,OAAO,CAAClE,GAAG,EAAE+I,YAAY,CAAC,CAAA;IACjE;IACA,EAAA,IAAI7E,OAAO,CAAClE,GAAG,KAAKuJ,kBAAkB,EAAE;IACpC,IAAA,OAAOF,KAAK,CAAC7G,KAAK,CAAC0B,OAAO,EAAEoF,YAAY,CAAC,CAAA;IAC7C,GAAA;IACA;IACA,EAAA,MAAME,WAAW,GAAGlN,MAAM,CAACmN,MAAM,CAACnN,MAAM,CAACmN,MAAM,CAAC,EAAE,EAAEH,YAAY,CAAC,EAAE;IAAEI,IAAAA,YAAY,EAAE,IAAA;IAAK,GAAC,CAAC,CAAA;MAC1F,MAAMC,SAAS,GAAG,MAAMN,KAAK,CAAC9M,IAAI,CAAC2H,OAAO,EAAEsF,WAAW,CAAC,CAAA;IACxD,EAAA,KAAK,MAAMI,QAAQ,IAAID,SAAS,EAAE;QAC9B,MAAME,mBAAmB,GAAGhB,WAAW,CAACe,QAAQ,CAAC5J,GAAG,EAAE+I,YAAY,CAAC,CAAA;QACnE,IAAIQ,kBAAkB,KAAKM,mBAAmB,EAAE;IAC5C,MAAA,OAAOR,KAAK,CAAC7G,KAAK,CAACoH,QAAQ,EAAEN,YAAY,CAAC,CAAA;IAC9C,KAAA;IACJ,GAAA;IACA,EAAA,OAAA;IACJ;;IC1CA;IACA;AACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMQ,QAAQ,CAAC;IACX;IACJ;IACA;IACI3I,EAAAA,WAAWA,GAAG;QACV,IAAI,CAAC4I,OAAO,GAAG,IAAIpF,OAAO,CAAC,CAACqF,OAAO,EAAEhE,MAAM,KAAK;UAC5C,IAAI,CAACgE,OAAO,GAAGA,OAAO,CAAA;UACtB,IAAI,CAAChE,MAAM,GAAGA,MAAM,CAAA;IACxB,KAAC,CAAC,CAAA;IACN,GAAA;IACJ;;IC1BA;IACA;AACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA,MAAMiE,mBAAmB,GAAG,IAAIC,GAAG,EAAE;;ICXrC;IACA;AACA;IACA;IACA;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,eAAeC,0BAA0BA,GAAG;MACG;QACvCpP,MAAM,CAACM,GAAG,CAAC,CAAgB4O,aAAAA,EAAAA,mBAAmB,CAACrK,IAAI,CAAA,CAAA,CAAG,GAClD,CAAA,6BAAA,CAA+B,CAAC,CAAA;IACxC,GAAA;IACA,EAAA,KAAK,MAAMwK,QAAQ,IAAIH,mBAAmB,EAAE;QACxC,MAAMG,QAAQ,EAAE,CAAA;QAC2B;IACvCrP,MAAAA,MAAM,CAACM,GAAG,CAAC+O,QAAQ,EAAE,cAAc,CAAC,CAAA;IACxC,KAAA;IACJ,GAAA;MAC2C;IACvCrP,IAAAA,MAAM,CAACM,GAAG,CAAC,6BAA6B,CAAC,CAAA;IAC7C,GAAA;IACJ;;IC/BA;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACO,SAASgP,OAAOA,CAACC,EAAE,EAAE;MACxB,OAAO,IAAI3F,OAAO,CAAEqF,OAAO,IAAKO,UAAU,CAACP,OAAO,EAAEM,EAAE,CAAC,CAAC,CAAA;IAC5D;;ICjBA;IACA;AACA;IACA;IACA;IACA;IACA;IAUA,SAASE,SAASA,CAACC,KAAK,EAAE;MACtB,OAAO,OAAOA,KAAK,KAAK,QAAQ,GAAG,IAAI3F,OAAO,CAAC2F,KAAK,CAAC,GAAGA,KAAK,CAAA;IACjE,CAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMC,eAAe,CAAC;IAClB;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACIvJ,EAAAA,WAAWA,CAACwJ,QAAQ,EAAEC,OAAO,EAAE;IAC3B,IAAA,IAAI,CAACC,UAAU,GAAG,EAAE,CAAA;IACpB;IACR;IACA;IACA;IACA;IACA;IACA;IACA;IACQ;IACR;IACA;IACA;IACA;IACA;IACA;IACQ;IACR;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACQ;IACR;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;QACmD;UACvCxI,kBAAM,CAACX,UAAU,CAACkJ,OAAO,CAAC3G,KAAK,EAAE6G,eAAe,EAAE;IAC9C5N,QAAAA,UAAU,EAAE,oBAAoB;IAChCC,QAAAA,SAAS,EAAE,iBAAiB;IAC5BC,QAAAA,QAAQ,EAAE,aAAa;IACvBT,QAAAA,SAAS,EAAE,eAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;IACAL,IAAAA,MAAM,CAACmN,MAAM,CAAC,IAAI,EAAEmB,OAAO,CAAC,CAAA;IAC5B,IAAA,IAAI,CAAC3G,KAAK,GAAG2G,OAAO,CAAC3G,KAAK,CAAA;QAC1B,IAAI,CAAC8G,SAAS,GAAGJ,QAAQ,CAAA;IACzB,IAAA,IAAI,CAACK,gBAAgB,GAAG,IAAIlB,QAAQ,EAAE,CAAA;QACtC,IAAI,CAACmB,uBAAuB,GAAG,EAAE,CAAA;IACjC;IACA;QACA,IAAI,CAACC,QAAQ,GAAG,CAAC,GAAGP,QAAQ,CAACQ,OAAO,CAAC,CAAA;IACrC,IAAA,IAAI,CAACC,eAAe,GAAG,IAAIxH,GAAG,EAAE,CAAA;IAChC,IAAA,KAAK,MAAMyH,MAAM,IAAI,IAAI,CAACH,QAAQ,EAAE;UAChC,IAAI,CAACE,eAAe,CAAC5E,GAAG,CAAC6E,MAAM,EAAE,EAAE,CAAC,CAAA;IACxC,KAAA;QACA,IAAI,CAACpH,KAAK,CAACc,SAAS,CAAC,IAAI,CAACiG,gBAAgB,CAACjB,OAAO,CAAC,CAAA;IACvD,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,MAAMuB,KAAKA,CAACb,KAAK,EAAE;QACf,MAAM;IAAExG,MAAAA,KAAAA;IAAM,KAAC,GAAG,IAAI,CAAA;IACtB,IAAA,IAAIC,OAAO,GAAGsG,SAAS,CAACC,KAAK,CAAC,CAAA;IAC9B,IAAA,IAAIvG,OAAO,CAACqH,IAAI,KAAK,UAAU,IAC3BtH,KAAK,YAAYuH,UAAU,IAC3BvH,KAAK,CAACwH,eAAe,EAAE;IACvB,MAAA,MAAMC,uBAAuB,GAAI,MAAMzH,KAAK,CAACwH,eAAgB,CAAA;IAC7D,MAAA,IAAIC,uBAAuB,EAAE;YACkB;IACvC3Q,UAAAA,MAAM,CAACM,GAAG,CAAC,CAAA,0CAAA,CAA4C,GACnD,CAAA,CAAA,EAAIgI,cAAc,CAACa,OAAO,CAAClE,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3C,SAAA;IACA,QAAA,OAAO0L,uBAAuB,CAAA;IAClC,OAAA;IACJ,KAAA;IACA;IACA;IACA;IACA,IAAA,MAAMC,eAAe,GAAG,IAAI,CAACC,WAAW,CAAC,cAAc,CAAC,GAClD1H,OAAO,CAAC2H,KAAK,EAAE,GACf,IAAI,CAAA;QACV,IAAI;UACA,KAAK,MAAMC,EAAE,IAAI,IAAI,CAACC,gBAAgB,CAAC,kBAAkB,CAAC,EAAE;YACxD7H,OAAO,GAAG,MAAM4H,EAAE,CAAC;IAAE5H,UAAAA,OAAO,EAAEA,OAAO,CAAC2H,KAAK,EAAE;IAAE5H,UAAAA,KAAAA;IAAM,SAAC,CAAC,CAAA;IAC3D,OAAA;SACH,CACD,OAAO8B,GAAG,EAAE;UACR,IAAIA,GAAG,YAAYjJ,KAAK,EAAE;IACtB,QAAA,MAAM,IAAIoE,YAAY,CAAC,iCAAiC,EAAE;cACtD/C,kBAAkB,EAAE4H,GAAG,CAAC5F,OAAAA;IAC5B,SAAC,CAAC,CAAA;IACN,OAAA;IACJ,KAAA;IACA;IACA;IACA;IACA,IAAA,MAAM6L,qBAAqB,GAAG9H,OAAO,CAAC2H,KAAK,EAAE,CAAA;QAC7C,IAAI;IACA,MAAA,IAAII,aAAa,CAAA;IACjB;IACAA,MAAAA,aAAa,GAAG,MAAMX,KAAK,CAACpH,OAAO,EAAEA,OAAO,CAACqH,IAAI,KAAK,UAAU,GAAGjF,SAAS,GAAG,IAAI,CAACyE,SAAS,CAACmB,YAAY,CAAC,CAAA;UAC3G,IAAI,aAAoB,KAAK,YAAY,EAAE;IACvCnR,QAAAA,MAAM,CAACK,KAAK,CAAC,sBAAsB,GAC/B,CAAA,CAAA,EAAIiI,cAAc,CAACa,OAAO,CAAClE,GAAG,CAAC,6BAA6B,GAC5D,CAAA,QAAA,EAAWiM,aAAa,CAAC5L,MAAM,IAAI,CAAC,CAAA;IAC5C,OAAA;UACA,KAAK,MAAM+J,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,iBAAiB,CAAC,EAAE;YAC7DE,aAAa,GAAG,MAAM7B,QAAQ,CAAC;cAC3BnG,KAAK;IACLC,UAAAA,OAAO,EAAE8H,qBAAqB;IAC9BxE,UAAAA,QAAQ,EAAEyE,aAAAA;IACd,SAAC,CAAC,CAAA;IACN,OAAA;IACA,MAAA,OAAOA,aAAa,CAAA;SACvB,CACD,OAAO1Q,KAAK,EAAE;UACiC;IACvCR,QAAAA,MAAM,CAACM,GAAG,CAAC,CAAA,oBAAA,CAAsB,GAC7B,CAAIgI,CAAAA,EAAAA,cAAc,CAACa,OAAO,CAAClE,GAAG,CAAC,CAAmB,iBAAA,CAAA,EAAEzE,KAAK,CAAC,CAAA;IAClE,OAAA;IACA;IACA;IACA,MAAA,IAAIoQ,eAAe,EAAE;IACjB,QAAA,MAAM,IAAI,CAACQ,YAAY,CAAC,cAAc,EAAE;IACpC5Q,UAAAA,KAAK,EAAEA,KAAK;cACZ0I,KAAK;IACL0H,UAAAA,eAAe,EAAEA,eAAe,CAACE,KAAK,EAAE;IACxC3H,UAAAA,OAAO,EAAE8H,qBAAqB,CAACH,KAAK,EAAC;IACzC,SAAC,CAAC,CAAA;IACN,OAAA;IACA,MAAA,MAAMtQ,KAAK,CAAA;IACf,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,MAAM6Q,gBAAgBA,CAAC3B,KAAK,EAAE;QAC1B,MAAMjD,QAAQ,GAAG,MAAM,IAAI,CAAC8D,KAAK,CAACb,KAAK,CAAC,CAAA;IACxC,IAAA,MAAM4B,aAAa,GAAG7E,QAAQ,CAACqE,KAAK,EAAE,CAAA;IACtC,IAAA,KAAK,IAAI,CAAC9G,SAAS,CAAC,IAAI,CAACuH,QAAQ,CAAC7B,KAAK,EAAE4B,aAAa,CAAC,CAAC,CAAA;IACxD,IAAA,OAAO7E,QAAQ,CAAA;IACnB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,MAAM+E,UAAUA,CAAC/P,GAAG,EAAE;IAClB,IAAA,MAAM0H,OAAO,GAAGsG,SAAS,CAAChO,GAAG,CAAC,CAAA;IAC9B,IAAA,IAAIgQ,cAAc,CAAA;QAClB,MAAM;UAAE/L,SAAS;IAAE6I,MAAAA,YAAAA;SAAc,GAAG,IAAI,CAACyB,SAAS,CAAA;QAClD,MAAM0B,gBAAgB,GAAG,MAAM,IAAI,CAACC,WAAW,CAACxI,OAAO,EAAE,MAAM,CAAC,CAAA;IAChE,IAAA,MAAMyI,iBAAiB,GAAGrQ,MAAM,CAACmN,MAAM,CAACnN,MAAM,CAACmN,MAAM,CAAC,EAAE,EAAEH,YAAY,CAAC,EAAE;IAAE7I,MAAAA,SAAAA;IAAU,KAAC,CAAC,CAAA;QACvF+L,cAAc,GAAG,MAAMI,MAAM,CAACpK,KAAK,CAACiK,gBAAgB,EAAEE,iBAAiB,CAAC,CAAA;QAC7B;IACvC,MAAA,IAAIH,cAAc,EAAE;IAChBzR,QAAAA,MAAM,CAACK,KAAK,CAAC,CAA+BqF,4BAAAA,EAAAA,SAAS,IAAI,CAAC,CAAA;IAC9D,OAAC,MACI;IACD1F,QAAAA,MAAM,CAACK,KAAK,CAAC,CAAgCqF,6BAAAA,EAAAA,SAAS,IAAI,CAAC,CAAA;IAC/D,OAAA;IACJ,KAAA;QACA,KAAK,MAAM2J,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,0BAA0B,CAAC,EAAE;IACtES,MAAAA,cAAc,GACV,CAAC,MAAMpC,QAAQ,CAAC;YACZ3J,SAAS;YACT6I,YAAY;YACZkD,cAAc;IACdtI,QAAAA,OAAO,EAAEuI,gBAAgB;YACzBxI,KAAK,EAAE,IAAI,CAACA,KAAAA;WACf,CAAC,KAAKqC,SAAS,CAAA;IACxB,KAAA;IACA,IAAA,OAAOkG,cAAc,CAAA;IACzB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMF,QAAQA,CAAC9P,GAAG,EAAEgL,QAAQ,EAAE;IAC1B,IAAA,MAAMtD,OAAO,GAAGsG,SAAS,CAAChO,GAAG,CAAC,CAAA;IAC9B;IACA;QACA,MAAM6N,OAAO,CAAC,CAAC,CAAC,CAAA;QAChB,MAAMoC,gBAAgB,GAAG,MAAM,IAAI,CAACC,WAAW,CAACxI,OAAO,EAAE,OAAO,CAAC,CAAA;QACtB;UACvC,IAAIuI,gBAAgB,CAAC9Q,MAAM,IAAI8Q,gBAAgB,CAAC9Q,MAAM,KAAK,KAAK,EAAE;IAC9D,QAAA,MAAM,IAAIuF,YAAY,CAAC,kCAAkC,EAAE;IACvDlB,UAAAA,GAAG,EAAEqD,cAAc,CAACoJ,gBAAgB,CAACzM,GAAG,CAAC;cACzCrE,MAAM,EAAE8Q,gBAAgB,CAAC9Q,MAAAA;IAC7B,SAAC,CAAC,CAAA;IACN,OAAA;IACA;UACA,MAAMkR,IAAI,GAAGrF,QAAQ,CAACsF,OAAO,CAAClH,GAAG,CAAC,MAAM,CAAC,CAAA;IACzC,MAAA,IAAIiH,IAAI,EAAE;IACN9R,QAAAA,MAAM,CAACK,KAAK,CAAC,oBAAoBiI,cAAc,CAACoJ,gBAAgB,CAACzM,GAAG,CAAC,CAAG,CAAA,CAAA,GACpE,gBAAgB6M,IAAI,CAAA,UAAA,CAAY,GAChC,CAAkE,gEAAA,CAAA,GAClE,0DAA0D,CAAC,CAAA;IACnE,OAAA;IACJ,KAAA;QACA,IAAI,CAACrF,QAAQ,EAAE;UACgC;IACvCzM,QAAAA,MAAM,CAACQ,KAAK,CAAC,CAAA,uCAAA,CAAyC,GAClD,CAAA,CAAA,EAAI8H,cAAc,CAACoJ,gBAAgB,CAACzM,GAAG,CAAC,IAAI,CAAC,CAAA;IACrD,OAAA;IACA,MAAA,MAAM,IAAIkB,YAAY,CAAC,4BAA4B,EAAE;IACjDlB,QAAAA,GAAG,EAAEqD,cAAc,CAACoJ,gBAAgB,CAACzM,GAAG,CAAA;IAC5C,OAAC,CAAC,CAAA;IACN,KAAA;QACA,MAAM+M,eAAe,GAAG,MAAM,IAAI,CAACC,0BAA0B,CAACxF,QAAQ,CAAC,CAAA;QACvE,IAAI,CAACuF,eAAe,EAAE;UACyB;IACvChS,QAAAA,MAAM,CAACK,KAAK,CAAC,CAAA,UAAA,EAAaiI,cAAc,CAACoJ,gBAAgB,CAACzM,GAAG,CAAC,CAAI,EAAA,CAAA,GAC9D,CAAqB,mBAAA,CAAA,EAAE+M,eAAe,CAAC,CAAA;IAC/C,OAAA;IACA,MAAA,OAAO,KAAK,CAAA;IAChB,KAAA;QACA,MAAM;UAAEtM,SAAS;IAAE6I,MAAAA,YAAAA;SAAc,GAAG,IAAI,CAACyB,SAAS,CAAA;QAClD,MAAM1B,KAAK,GAAG,MAAMzO,IAAI,CAACgS,MAAM,CAACK,IAAI,CAACxM,SAAS,CAAC,CAAA;IAC/C,IAAA,MAAMyM,sBAAsB,GAAG,IAAI,CAACtB,WAAW,CAAC,gBAAgB,CAAC,CAAA;IACjE,IAAA,MAAMuB,WAAW,GAAGD,sBAAsB,GACpC,MAAM9D,sBAAsB;IAC9B;IACA;IACA;IACAC,IAAAA,KAAK,EAAEoD,gBAAgB,CAACZ,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,EAAEvC,YAAY,CAAC,GACjE,IAAI,CAAA;QACiC;IACvCvO,MAAAA,MAAM,CAACK,KAAK,CAAC,CAAA,cAAA,EAAiBqF,SAAS,CAA8B,4BAAA,CAAA,GACjE,CAAO4C,IAAAA,EAAAA,cAAc,CAACoJ,gBAAgB,CAACzM,GAAG,CAAC,GAAG,CAAC,CAAA;IACvD,KAAA;QACA,IAAI;IACA,MAAA,MAAMqJ,KAAK,CAAC+D,GAAG,CAACX,gBAAgB,EAAES,sBAAsB,GAAGH,eAAe,CAAClB,KAAK,EAAE,GAAGkB,eAAe,CAAC,CAAA;SACxG,CACD,OAAOxR,KAAK,EAAE;UACV,IAAIA,KAAK,YAAYuB,KAAK,EAAE;IACxB;IACA,QAAA,IAAIvB,KAAK,CAACkD,IAAI,KAAK,oBAAoB,EAAE;cACrC,MAAM0L,0BAA0B,EAAE,CAAA;IACtC,SAAA;IACA,QAAA,MAAM5O,KAAK,CAAA;IACf,OAAA;IACJ,KAAA;QACA,KAAK,MAAM6O,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,gBAAgB,CAAC,EAAE;IAC5D,MAAA,MAAM3B,QAAQ,CAAC;YACX3J,SAAS;YACT0M,WAAW;IACXE,QAAAA,WAAW,EAAEN,eAAe,CAAClB,KAAK,EAAE;IACpC3H,QAAAA,OAAO,EAAEuI,gBAAgB;YACzBxI,KAAK,EAAE,IAAI,CAACA,KAAAA;IAChB,OAAC,CAAC,CAAA;IACN,KAAA;IACA,IAAA,OAAO,IAAI,CAAA;IACf,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMyI,WAAWA,CAACxI,OAAO,EAAEqH,IAAI,EAAE;QAC7B,MAAM/O,GAAG,GAAG,CAAG0H,EAAAA,OAAO,CAAClE,GAAG,CAAA,GAAA,EAAMuL,IAAI,CAAE,CAAA,CAAA;IACtC,IAAA,IAAI,CAAC,IAAI,CAACV,UAAU,CAACrO,GAAG,CAAC,EAAE;UACvB,IAAIiQ,gBAAgB,GAAGvI,OAAO,CAAA;UAC9B,KAAK,MAAMkG,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,oBAAoB,CAAC,EAAE;IAChEU,QAAAA,gBAAgB,GAAGjC,SAAS,CAAC,MAAMJ,QAAQ,CAAC;cACxCmB,IAAI;IACJrH,UAAAA,OAAO,EAAEuI,gBAAgB;cACzBxI,KAAK,EAAE,IAAI,CAACA,KAAK;IACjB;IACAqB,UAAAA,MAAM,EAAE,IAAI,CAACA,MAAM;IACvB,SAAC,CAAC,CAAC,CAAA;IACP,OAAA;IACA,MAAA,IAAI,CAACuF,UAAU,CAACrO,GAAG,CAAC,GAAGiQ,gBAAgB,CAAA;IAC3C,KAAA;IACA,IAAA,OAAO,IAAI,CAAC5B,UAAU,CAACrO,GAAG,CAAC,CAAA;IAC/B,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;MACIoP,WAAWA,CAACnN,IAAI,EAAE;QACd,KAAK,MAAM4M,MAAM,IAAI,IAAI,CAACN,SAAS,CAACI,OAAO,EAAE;UACzC,IAAI1M,IAAI,IAAI4M,MAAM,EAAE;IAChB,QAAA,OAAO,IAAI,CAAA;IACf,OAAA;IACJ,KAAA;IACA,IAAA,OAAO,KAAK,CAAA;IAChB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMc,YAAYA,CAAC1N,IAAI,EAAEwK,KAAK,EAAE;QAC5B,KAAK,MAAMmB,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAACtN,IAAI,CAAC,EAAE;IAChD;IACA;UACA,MAAM2L,QAAQ,CAACnB,KAAK,CAAC,CAAA;IACzB,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,CAAC8C,gBAAgBA,CAACtN,IAAI,EAAE;QACpB,KAAK,MAAM4M,MAAM,IAAI,IAAI,CAACN,SAAS,CAACI,OAAO,EAAE;IACzC,MAAA,IAAI,OAAOE,MAAM,CAAC5M,IAAI,CAAC,KAAK,UAAU,EAAE;YACpC,MAAM6O,KAAK,GAAG,IAAI,CAAClC,eAAe,CAACxF,GAAG,CAACyF,MAAM,CAAC,CAAA;YAC9C,MAAMkC,gBAAgB,GAAItE,KAAK,IAAK;IAChC,UAAA,MAAMuE,aAAa,GAAGlR,MAAM,CAACmN,MAAM,CAACnN,MAAM,CAACmN,MAAM,CAAC,EAAE,EAAER,KAAK,CAAC,EAAE;IAAEqE,YAAAA,KAAAA;IAAM,WAAC,CAAC,CAAA;IACxE;IACA;IACA,UAAA,OAAOjC,MAAM,CAAC5M,IAAI,CAAC,CAAC+O,aAAa,CAAC,CAAA;aACrC,CAAA;IACD,QAAA,MAAMD,gBAAgB,CAAA;IAC1B,OAAA;IACJ,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACIxI,SAASA,CAACgF,OAAO,EAAE;IACf,IAAA,IAAI,CAACkB,uBAAuB,CAACvF,IAAI,CAACqE,OAAO,CAAC,CAAA;IAC1C,IAAA,OAAOA,OAAO,CAAA;IAClB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,MAAM0D,WAAWA,GAAG;IAChB,IAAA,IAAI1D,OAAO,CAAA;QACX,OAAQA,OAAO,GAAG,IAAI,CAACkB,uBAAuB,CAACyC,KAAK,EAAE,EAAG;IACrD,MAAA,MAAM3D,OAAO,CAAA;IACjB,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACI4D,EAAAA,OAAOA,GAAG;IACN,IAAA,IAAI,CAAC3C,gBAAgB,CAAChB,OAAO,CAAC,IAAI,CAAC,CAAA;IACvC,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACI,MAAMgD,0BAA0BA,CAACxF,QAAQ,EAAE;QACvC,IAAIuF,eAAe,GAAGvF,QAAQ,CAAA;QAC9B,IAAIoG,WAAW,GAAG,KAAK,CAAA;QACvB,KAAK,MAAMxD,QAAQ,IAAI,IAAI,CAAC2B,gBAAgB,CAAC,iBAAiB,CAAC,EAAE;IAC7DgB,MAAAA,eAAe,GACX,CAAC,MAAM3C,QAAQ,CAAC;YACZlG,OAAO,EAAE,IAAI,CAACA,OAAO;IACrBsD,QAAAA,QAAQ,EAAEuF,eAAe;YACzB9I,KAAK,EAAE,IAAI,CAACA,KAAAA;WACf,CAAC,KAAKqC,SAAS,CAAA;IACpBsH,MAAAA,WAAW,GAAG,IAAI,CAAA;UAClB,IAAI,CAACb,eAAe,EAAE;IAClB,QAAA,MAAA;IACJ,OAAA;IACJ,KAAA;QACA,IAAI,CAACa,WAAW,EAAE;IACd,MAAA,IAAIb,eAAe,IAAIA,eAAe,CAAC1M,MAAM,KAAK,GAAG,EAAE;IACnD0M,QAAAA,eAAe,GAAGzG,SAAS,CAAA;IAC/B,OAAA;UAC2C;IACvC,QAAA,IAAIyG,eAAe,EAAE;IACjB,UAAA,IAAIA,eAAe,CAAC1M,MAAM,KAAK,GAAG,EAAE;IAChC,YAAA,IAAI0M,eAAe,CAAC1M,MAAM,KAAK,CAAC,EAAE;IAC9BtF,cAAAA,MAAM,CAACO,IAAI,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC4I,OAAO,CAAClE,GAAG,CAAI,EAAA,CAAA,GACjD,CAA0D,wDAAA,CAAA,GAC1D,mDAAmD,CAAC,CAAA;IAC5D,aAAC,MACI;IACDjF,cAAAA,MAAM,CAACK,KAAK,CAAC,qBAAqB,IAAI,CAAC8I,OAAO,CAAClE,GAAG,CAAI,EAAA,CAAA,GAClD,8BAA8BwH,QAAQ,CAACnH,MAAM,CAAc,YAAA,CAAA,GAC3D,wBAAwB,CAAC,CAAA;IACjC,aAAA;IACJ,WAAA;IACJ,SAAA;IACJ,OAAA;IACJ,KAAA;IACA,IAAA,OAAO0M,eAAe,CAAA;IAC1B,GAAA;IACJ;;ICngBA;IACA;AACA;IACA;IACA;IACA;IACA;IAOA;IACA;IACA;IACA;IACA;IACA,MAAMc,QAAQ,CAAC;IACX;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI1M,EAAAA,WAAWA,CAACyJ,OAAO,GAAG,EAAE,EAAE;IACtB;IACR;IACA;IACA;IACA;IACA;IACA;QACQ,IAAI,CAACnK,SAAS,GAAG4H,UAAU,CAACM,cAAc,CAACiC,OAAO,CAACnK,SAAS,CAAC,CAAA;IAC7D;IACR;IACA;IACA;IACA;IACA;IACA;IACQ,IAAA,IAAI,CAAC0K,OAAO,GAAGP,OAAO,CAACO,OAAO,IAAI,EAAE,CAAA;IACpC;IACR;IACA;IACA;IACA;IACA;IACA;IACQ,IAAA,IAAI,CAACe,YAAY,GAAGtB,OAAO,CAACsB,YAAY,CAAA;IACxC;IACR;IACA;IACA;IACA;IACA;IACA;IACQ,IAAA,IAAI,CAAC5C,YAAY,GAAGsB,OAAO,CAACtB,YAAY,CAAA;IAC5C,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACIhH,MAAMA,CAACsI,OAAO,EAAE;QACZ,MAAM,CAACkD,YAAY,CAAC,GAAG,IAAI,CAACC,SAAS,CAACnD,OAAO,CAAC,CAAA;IAC9C,IAAA,OAAOkD,YAAY,CAAA;IACvB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;MACIC,SAASA,CAACnD,OAAO,EAAE;IACf;QACA,IAAIA,OAAO,YAAYY,UAAU,EAAE;IAC/BZ,MAAAA,OAAO,GAAG;IACN3G,QAAAA,KAAK,EAAE2G,OAAO;YACd1G,OAAO,EAAE0G,OAAO,CAAC1G,OAAAA;WACpB,CAAA;IACL,KAAA;IACA,IAAA,MAAMD,KAAK,GAAG2G,OAAO,CAAC3G,KAAK,CAAA;IAC3B,IAAA,MAAMC,OAAO,GAAG,OAAO0G,OAAO,CAAC1G,OAAO,KAAK,QAAQ,GAC7C,IAAIY,OAAO,CAAC8F,OAAO,CAAC1G,OAAO,CAAC,GAC5B0G,OAAO,CAAC1G,OAAO,CAAA;QACrB,MAAMoB,MAAM,GAAG,QAAQ,IAAIsF,OAAO,GAAGA,OAAO,CAACtF,MAAM,GAAGgB,SAAS,CAAA;IAC/D,IAAA,MAAMlE,OAAO,GAAG,IAAIsI,eAAe,CAAC,IAAI,EAAE;UAAEzG,KAAK;UAAEC,OAAO;IAAEoB,MAAAA,MAAAA;IAAO,KAAC,CAAC,CAAA;QACrE,MAAMwI,YAAY,GAAG,IAAI,CAACE,YAAY,CAAC5L,OAAO,EAAE8B,OAAO,EAAED,KAAK,CAAC,CAAA;IAC/D,IAAA,MAAMgK,WAAW,GAAG,IAAI,CAACC,cAAc,CAACJ,YAAY,EAAE1L,OAAO,EAAE8B,OAAO,EAAED,KAAK,CAAC,CAAA;IAC9E;IACA,IAAA,OAAO,CAAC6J,YAAY,EAAEG,WAAW,CAAC,CAAA;IACtC,GAAA;IACA,EAAA,MAAMD,YAAYA,CAAC5L,OAAO,EAAE8B,OAAO,EAAED,KAAK,EAAE;IACxC,IAAA,MAAM7B,OAAO,CAAC+J,YAAY,CAAC,kBAAkB,EAAE;UAAElI,KAAK;IAAEC,MAAAA,OAAAA;IAAQ,KAAC,CAAC,CAAA;QAClE,IAAIsD,QAAQ,GAAGlB,SAAS,CAAA;QACxB,IAAI;UACAkB,QAAQ,GAAG,MAAM,IAAI,CAAC2G,OAAO,CAACjK,OAAO,EAAE9B,OAAO,CAAC,CAAA;IAC/C;IACA;IACA;UACA,IAAI,CAACoF,QAAQ,IAAIA,QAAQ,CAAC3G,IAAI,KAAK,OAAO,EAAE;IACxC,QAAA,MAAM,IAAIK,YAAY,CAAC,aAAa,EAAE;cAAElB,GAAG,EAAEkE,OAAO,CAAClE,GAAAA;IAAI,SAAC,CAAC,CAAA;IAC/D,OAAA;SACH,CACD,OAAOzE,KAAK,EAAE;UACV,IAAIA,KAAK,YAAYuB,KAAK,EAAE;YACxB,KAAK,MAAMsN,QAAQ,IAAIhI,OAAO,CAAC2J,gBAAgB,CAAC,iBAAiB,CAAC,EAAE;cAChEvE,QAAQ,GAAG,MAAM4C,QAAQ,CAAC;gBAAE7O,KAAK;gBAAE0I,KAAK;IAAEC,YAAAA,OAAAA;IAAQ,WAAC,CAAC,CAAA;IACpD,UAAA,IAAIsD,QAAQ,EAAE;IACV,YAAA,MAAA;IACJ,WAAA;IACJ,SAAA;IACJ,OAAA;UACA,IAAI,CAACA,QAAQ,EAAE;IACX,QAAA,MAAMjM,KAAK,CAAA;IACf,OAAC,MAC+C;YAC5CR,MAAM,CAACM,GAAG,CAAC,CAAwBgI,qBAAAA,EAAAA,cAAc,CAACa,OAAO,CAAClE,GAAG,CAAC,CAAA,GAAA,CAAK,GAC/D,CAAA,GAAA,EAAMzE,KAAK,YAAYuB,KAAK,GAAGvB,KAAK,CAAC4H,QAAQ,EAAE,GAAG,EAAE,CAAA,uDAAA,CAAyD,GAC7G,CAAA,yBAAA,CAA2B,CAAC,CAAA;IACpC,OAAA;IACJ,KAAA;QACA,KAAK,MAAMiH,QAAQ,IAAIhI,OAAO,CAAC2J,gBAAgB,CAAC,oBAAoB,CAAC,EAAE;UACnEvE,QAAQ,GAAG,MAAM4C,QAAQ,CAAC;YAAEnG,KAAK;YAAEC,OAAO;IAAEsD,QAAAA,QAAAA;IAAS,OAAC,CAAC,CAAA;IAC3D,KAAA;IACA,IAAA,OAAOA,QAAQ,CAAA;IACnB,GAAA;MACA,MAAM0G,cAAcA,CAACJ,YAAY,EAAE1L,OAAO,EAAE8B,OAAO,EAAED,KAAK,EAAE;IACxD,IAAA,IAAIuD,QAAQ,CAAA;IACZ,IAAA,IAAIjM,KAAK,CAAA;QACT,IAAI;UACAiM,QAAQ,GAAG,MAAMsG,YAAY,CAAA;SAChC,CACD,OAAOvS,KAAK,EAAE;IACV;IACA;IACA;IAAA,KAAA;QAEJ,IAAI;IACA,MAAA,MAAM6G,OAAO,CAAC+J,YAAY,CAAC,mBAAmB,EAAE;YAC5ClI,KAAK;YACLC,OAAO;IACPsD,QAAAA,QAAAA;IACJ,OAAC,CAAC,CAAA;IACF,MAAA,MAAMpF,OAAO,CAACqL,WAAW,EAAE,CAAA;SAC9B,CACD,OAAOW,cAAc,EAAE;UACnB,IAAIA,cAAc,YAAYtR,KAAK,EAAE;IACjCvB,QAAAA,KAAK,GAAG6S,cAAc,CAAA;IAC1B,OAAA;IACJ,KAAA;IACA,IAAA,MAAMhM,OAAO,CAAC+J,YAAY,CAAC,oBAAoB,EAAE;UAC7ClI,KAAK;UACLC,OAAO;UACPsD,QAAQ;IACRjM,MAAAA,KAAK,EAAEA,KAAAA;IACX,KAAC,CAAC,CAAA;QACF6G,OAAO,CAACuL,OAAO,EAAE,CAAA;IACjB,IAAA,IAAIpS,KAAK,EAAE;IACP,MAAA,MAAMA,KAAK,CAAA;IACf,KAAA;IACJ,GAAA;IACJ,CAAA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;ICnOA;IACA;AACA;IACA;IACA;IACA;IACA;IAIO,MAAMkB,QAAQ,GAAG;IACpB4R,EAAAA,aAAa,EAAEA,CAACC,YAAY,EAAEpK,OAAO,KAAK,CAAA,MAAA,EAASoK,YAAY,CAAA,gBAAA,EAAmBjL,cAAc,CAACa,OAAO,CAAClE,GAAG,CAAC,CAAG,CAAA,CAAA;MAChHuO,kBAAkB,EAAG/G,QAAQ,IAAK;IAC9B,IAAA,IAAIA,QAAQ,EAAE;IACVzM,MAAAA,MAAM,CAACS,cAAc,CAAC,CAAA,6BAAA,CAA+B,CAAC,CAAA;IACtDT,MAAAA,MAAM,CAACM,GAAG,CAACmM,QAAQ,IAAI,wBAAwB,CAAC,CAAA;UAChDzM,MAAM,CAACU,QAAQ,EAAE,CAAA;IACrB,KAAA;IACJ,GAAA;IACJ,CAAC;;ICnBD;IACA;AACA;IACA;IACA;IACA;IACA;IAQA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAM+S,YAAY,SAASX,QAAQ,CAAC;IAChC;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI1M,EAAAA,WAAWA,CAACyJ,OAAO,GAAG,EAAE,EAAE;QACtB,KAAK,CAACA,OAAO,CAAC,CAAA;IACd;IACA;IACA,IAAA,IAAI,CAAC,IAAI,CAACO,OAAO,CAACsD,IAAI,CAAEC,CAAC,IAAK,iBAAiB,IAAIA,CAAC,CAAC,EAAE;IACnD,MAAA,IAAI,CAACvD,OAAO,CAACwD,OAAO,CAACrH,sBAAsB,CAAC,CAAA;IAChD,KAAA;IACA,IAAA,IAAI,CAACsH,sBAAsB,GAAGhE,OAAO,CAACiE,qBAAqB,IAAI,CAAC,CAAA;QACrB;UACvC,IAAI,IAAI,CAACD,sBAAsB,EAAE;YAC7BvM,kBAAM,CAACZ,MAAM,CAAC,IAAI,CAACmN,sBAAsB,EAAE,QAAQ,EAAE;IACjD1R,UAAAA,UAAU,EAAE,oBAAoB;IAChCC,UAAAA,SAAS,EAAE,IAAI,CAACgE,WAAW,CAAC1C,IAAI;IAChCrB,UAAAA,QAAQ,EAAE,aAAa;IACvBT,UAAAA,SAAS,EAAE,uBAAA;IACf,SAAC,CAAC,CAAA;IACN,OAAA;IACJ,KAAA;IACJ,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMwR,OAAOA,CAACjK,OAAO,EAAE9B,OAAO,EAAE;QAC5B,MAAM0M,IAAI,GAAG,EAAE,CAAA;QAC4B;IACvCzM,MAAAA,kBAAM,CAACX,UAAU,CAACwC,OAAO,EAAEY,OAAO,EAAE;IAChC5H,QAAAA,UAAU,EAAE,oBAAoB;IAChCC,QAAAA,SAAS,EAAE,IAAI,CAACgE,WAAW,CAAC1C,IAAI;IAChCrB,QAAAA,QAAQ,EAAE,QAAQ;IAClBT,QAAAA,SAAS,EAAE,aAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,MAAMoS,QAAQ,GAAG,EAAE,CAAA;IACnB,IAAA,IAAIC,SAAS,CAAA;QACb,IAAI,IAAI,CAACJ,sBAAsB,EAAE;UAC7B,MAAM;YAAEK,EAAE;IAAElF,QAAAA,OAAAA;IAAQ,OAAC,GAAG,IAAI,CAACmF,kBAAkB,CAAC;YAAEhL,OAAO;YAAE4K,IAAI;IAAE1M,QAAAA,OAAAA;IAAQ,OAAC,CAAC,CAAA;IAC3E4M,MAAAA,SAAS,GAAGC,EAAE,CAAA;IACdF,MAAAA,QAAQ,CAACrJ,IAAI,CAACqE,OAAO,CAAC,CAAA;IAC1B,KAAA;IACA,IAAA,MAAMoF,cAAc,GAAG,IAAI,CAACC,kBAAkB,CAAC;UAC3CJ,SAAS;UACT9K,OAAO;UACP4K,IAAI;IACJ1M,MAAAA,OAAAA;IACJ,KAAC,CAAC,CAAA;IACF2M,IAAAA,QAAQ,CAACrJ,IAAI,CAACyJ,cAAc,CAAC,CAAA;QAC7B,MAAM3H,QAAQ,GAAG,MAAMpF,OAAO,CAAC2C,SAAS,CAAC,CAAC,YAAY;IAClD;IACA,MAAA,OAAQ,CAAC,MAAM3C,OAAO,CAAC2C,SAAS,CAACJ,OAAO,CAAC0K,IAAI,CAACN,QAAQ,CAAC,CAAC;IACpD;IACA;IACA;IACA;IACA;IACC,MAAA,MAAMI,cAAc,CAAC,CAAA;SAC7B,GAAG,CAAC,CAAA;QACsC;IACvCpU,MAAAA,MAAM,CAACS,cAAc,CAACiB,QAAQ,CAAC4R,aAAa,CAAC,IAAI,CAAClN,WAAW,CAAC1C,IAAI,EAAEyF,OAAO,CAAC,CAAC,CAAA;IAC7E,MAAA,KAAK,MAAM7I,GAAG,IAAIyT,IAAI,EAAE;IACpB/T,QAAAA,MAAM,CAACM,GAAG,CAACA,GAAG,CAAC,CAAA;IACnB,OAAA;IACAoB,MAAAA,QAAQ,CAAC8R,kBAAkB,CAAC/G,QAAQ,CAAC,CAAA;UACrCzM,MAAM,CAACU,QAAQ,EAAE,CAAA;IACrB,KAAA;QACA,IAAI,CAAC+L,QAAQ,EAAE;IACX,MAAA,MAAM,IAAItG,YAAY,CAAC,aAAa,EAAE;YAAElB,GAAG,EAAEkE,OAAO,CAAClE,GAAAA;IAAI,OAAC,CAAC,CAAA;IAC/D,KAAA;IACA,IAAA,OAAOwH,QAAQ,CAAA;IACnB,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI0H,EAAAA,kBAAkBA,CAAC;QAAEhL,OAAO;QAAE4K,IAAI;IAAE1M,IAAAA,OAAAA;IAAS,GAAC,EAAE;IAC5C,IAAA,IAAI4M,SAAS,CAAA;IACb,IAAA,MAAMM,cAAc,GAAG,IAAI3K,OAAO,CAAEqF,OAAO,IAAK;IAC5C,MAAA,MAAMuF,gBAAgB,GAAG,YAAY;YACU;cACvCT,IAAI,CAACpJ,IAAI,CAAC,CAAqC,mCAAA,CAAA,GAC3C,GAAG,IAAI,CAACkJ,sBAAsB,CAAA,SAAA,CAAW,CAAC,CAAA;IAClD,SAAA;YACA5E,OAAO,CAAC,MAAM5H,OAAO,CAACmK,UAAU,CAACrI,OAAO,CAAC,CAAC,CAAA;WAC7C,CAAA;UACD8K,SAAS,GAAGzE,UAAU,CAACgF,gBAAgB,EAAE,IAAI,CAACX,sBAAsB,GAAG,IAAI,CAAC,CAAA;IAChF,KAAC,CAAC,CAAA;QACF,OAAO;IACH7E,MAAAA,OAAO,EAAEuF,cAAc;IACvBL,MAAAA,EAAE,EAAED,SAAAA;SACP,CAAA;IACL,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMI,kBAAkBA,CAAC;QAAEJ,SAAS;QAAE9K,OAAO;QAAE4K,IAAI;IAAE1M,IAAAA,OAAAA;IAAS,GAAC,EAAE;IAC7D,IAAA,IAAI7G,KAAK,CAAA;IACT,IAAA,IAAIiM,QAAQ,CAAA;QACZ,IAAI;IACAA,MAAAA,QAAQ,GAAG,MAAMpF,OAAO,CAACgK,gBAAgB,CAAClI,OAAO,CAAC,CAAA;SACrD,CACD,OAAOsL,UAAU,EAAE;UACf,IAAIA,UAAU,YAAY1S,KAAK,EAAE;IAC7BvB,QAAAA,KAAK,GAAGiU,UAAU,CAAA;IACtB,OAAA;IACJ,KAAA;IACA,IAAA,IAAIR,SAAS,EAAE;UACXS,YAAY,CAACT,SAAS,CAAC,CAAA;IAC3B,KAAA;QAC2C;IACvC,MAAA,IAAIxH,QAAQ,EAAE;IACVsH,QAAAA,IAAI,CAACpJ,IAAI,CAAC,CAAA,0BAAA,CAA4B,CAAC,CAAA;IAC3C,OAAC,MACI;IACDoJ,QAAAA,IAAI,CAACpJ,IAAI,CAAC,CAA0D,wDAAA,CAAA,GAChE,yBAAyB,CAAC,CAAA;IAClC,OAAA;IACJ,KAAA;IACA,IAAA,IAAInK,KAAK,IAAI,CAACiM,QAAQ,EAAE;IACpBA,MAAAA,QAAQ,GAAG,MAAMpF,OAAO,CAACmK,UAAU,CAACrI,OAAO,CAAC,CAAA;UACD;IACvC,QAAA,IAAIsD,QAAQ,EAAE;cACVsH,IAAI,CAACpJ,IAAI,CAAC,CAAmC,gCAAA,EAAA,IAAI,CAACjF,SAAS,CAAA,CAAA,CAAG,GAAG,CAAA,OAAA,CAAS,CAAC,CAAA;IAC/E,SAAC,MACI;cACDqO,IAAI,CAACpJ,IAAI,CAAC,CAAA,0BAAA,EAA6B,IAAI,CAACjF,SAAS,UAAU,CAAC,CAAA;IACpE,SAAA;IACJ,OAAA;IACJ,KAAA;IACA,IAAA,OAAO+G,QAAQ,CAAA;IACnB,GAAA;IACJ;;ICnMA;IACA;AACA;IACA;IACA;IACA;IACA;IAQA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMkI,WAAW,SAAS7B,QAAQ,CAAC;IAC/B;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACI1M,EAAAA,WAAWA,CAACyJ,OAAO,GAAG,EAAE,EAAE;QACtB,KAAK,CAACA,OAAO,CAAC,CAAA;IACd,IAAA,IAAI,CAACgE,sBAAsB,GAAGhE,OAAO,CAACiE,qBAAqB,IAAI,CAAC,CAAA;IACpE,GAAA;IACA;IACJ;IACA;IACA;IACA;IACA;IACA;IACI,EAAA,MAAMV,OAAOA,CAACjK,OAAO,EAAE9B,OAAO,EAAE;QACe;IACvCC,MAAAA,kBAAM,CAACX,UAAU,CAACwC,OAAO,EAAEY,OAAO,EAAE;IAChC5H,QAAAA,UAAU,EAAE,oBAAoB;IAChCC,QAAAA,SAAS,EAAE,IAAI,CAACgE,WAAW,CAAC1C,IAAI;IAChCrB,QAAAA,QAAQ,EAAE,SAAS;IACnBT,QAAAA,SAAS,EAAE,SAAA;IACf,OAAC,CAAC,CAAA;IACN,KAAA;QACA,IAAIpB,KAAK,GAAG+K,SAAS,CAAA;IACrB,IAAA,IAAIkB,QAAQ,CAAA;QACZ,IAAI;UACA,MAAMuH,QAAQ,GAAG,CACb3M,OAAO,CAACkJ,KAAK,CAACpH,OAAO,CAAC,CACzB,CAAA;UACD,IAAI,IAAI,CAAC0K,sBAAsB,EAAE;YAC7B,MAAMU,cAAc,GAAGjF,OAAO,CAAC,IAAI,CAACuE,sBAAsB,GAAG,IAAI,CAAC,CAAA;IAClEG,QAAAA,QAAQ,CAACrJ,IAAI,CAAC4J,cAAc,CAAC,CAAA;IACjC,OAAA;IACA9H,MAAAA,QAAQ,GAAG,MAAM7C,OAAO,CAAC0K,IAAI,CAACN,QAAQ,CAAC,CAAA;UACvC,IAAI,CAACvH,QAAQ,EAAE;YACX,MAAM,IAAI1K,KAAK,CAAC,CAAuC,qCAAA,CAAA,GACnD,GAAG,IAAI,CAAC8R,sBAAsB,CAAA,SAAA,CAAW,CAAC,CAAA;IAClD,OAAA;SACH,CACD,OAAO7I,GAAG,EAAE;UACR,IAAIA,GAAG,YAAYjJ,KAAK,EAAE;IACtBvB,QAAAA,KAAK,GAAGwK,GAAG,CAAA;IACf,OAAA;IACJ,KAAA;QAC2C;IACvChL,MAAAA,MAAM,CAACS,cAAc,CAACiB,QAAQ,CAAC4R,aAAa,CAAC,IAAI,CAAClN,WAAW,CAAC1C,IAAI,EAAEyF,OAAO,CAAC,CAAC,CAAA;IAC7E,MAAA,IAAIsD,QAAQ,EAAE;IACVzM,QAAAA,MAAM,CAACM,GAAG,CAAC,CAAA,0BAAA,CAA4B,CAAC,CAAA;IAC5C,OAAC,MACI;IACDN,QAAAA,MAAM,CAACM,GAAG,CAAC,CAAA,0CAAA,CAA4C,CAAC,CAAA;IAC5D,OAAA;IACAoB,MAAAA,QAAQ,CAAC8R,kBAAkB,CAAC/G,QAAQ,CAAC,CAAA;UACrCzM,MAAM,CAACU,QAAQ,EAAE,CAAA;IACrB,KAAA;QACA,IAAI,CAAC+L,QAAQ,EAAE;IACX,MAAA,MAAM,IAAItG,YAAY,CAAC,aAAa,EAAE;YAAElB,GAAG,EAAEkE,OAAO,CAAClE,GAAG;IAAEzE,QAAAA,KAAAA;IAAM,OAAC,CAAC,CAAA;IACtE,KAAA;IACA,IAAA,OAAOiM,QAAQ,CAAA;IACnB,GAAA;IACJ;;IChGA;IACA;AACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IACA;IACA,SAASmI,YAAYA,GAAG;IACpB/U,EAAAA,IAAI,CAACoJ,gBAAgB,CAAC,UAAU,EAAE,MAAMpJ,IAAI,CAACgV,OAAO,CAACC,KAAK,EAAE,CAAC,CAAA;IACjE;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/apps/web/react-router.config.ts b/apps/web/react-router.config.ts
new file mode 100644
index 0000000..dfaf7d0
--- /dev/null
+++ b/apps/web/react-router.config.ts
@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  appDirectory: "app",
+  // Web runs as a client-side app; build a static client bundle only
+  ssr: false,
+} satisfies Config;
diff --git a/apps/web/styles/emoji.css b/apps/web/styles/emoji.css
new file mode 100644
index 0000000..50e5064
--- /dev/null
+++ b/apps/web/styles/emoji.css
@@ -0,0 +1,53 @@
+@layer components {
+  .EmojiPickerReact {
+    --epr-category-navigation-button-size: 1.25rem !important;
+    --epr-category-label-height: 1.5rem !important;
+    --epr-emoji-size: 1.25rem !important;
+    --epr-picker-border-radius: 0.25rem !important;
+    --epr-horizontal-padding: 0.5rem !important;
+    --epr-emoji-padding: 0.5rem !important;
+    @apply bg-surface-1!;
+  }
+
+  .epr-main {
+    border: none !important;
+    border-radius: 0 !important;
+  }
+
+  .epr-emoji-category-label {
+    font-size: 0.7875rem !important;
+    @apply bg-surface-1/80! text-tertiary!;
+  }
+
+  .epr-category-nav,
+  .epr-header-overlay {
+    padding: 0.5rem !important;
+  }
+
+  button.epr-emoji:hover > *,
+  button.epr-emoji:focus > * {
+    @apply bg-layer-2!;
+  }
+
+  input.epr-search {
+    font-size: 0.7875rem !important;
+    height: 2rem !important;
+    background: transparent !important;
+    @apply border-subtle!;
+    border-radius: 0.25rem !important;
+  }
+
+  input.epr-search::placeholder {
+    @apply text-placeholder!;
+  }
+
+  button.epr-btn-clear-search:hover {
+    @apply bg-layer-2!;
+    @apply text-tertiary!;
+  }
+
+  .epr-emoji-variation-picker {
+    @apply bg-surface-1!;
+    @apply border-subtle-1!;
+  }
+}
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
new file mode 100644
index 0000000..156a0fb
--- /dev/null
+++ b/apps/web/styles/globals.css
@@ -0,0 +1,170 @@
+@import "@plane/tailwind-config/index.css";
+@import "@plane/editor/styles";
+@import "@plane/propel/styles/react-day-picker.css";
+@import "./power-k.css";
+@import "./emoji.css";
+@plugin "@tailwindcss/typography";
+
+/* stickies and editor colors
+ * Text colors and the themed light/dark background ramps come from
+ * @plane/editor/styles (imported above), which is their single source of truth.
+ * Only the un-themed :root fallback below is kept: the editor package declares
+ * background colors solely under [data-theme*="light"] / [data-theme*="dark"],
+ * so without this they are undefined until a theme lands on the element. */
+:root {
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
+}
+
+.shadow-custom {
+  box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
+}
+/* backdrop filter */
+.backdrop-blur-custom {
+  @apply backdrop-filter blur-[9px];
+}
+
+.epr-search-container > input {
+  @apply bg-surface-2! text-primary!;
+  border: none !important;
+}
+
+.epr-search-container > input::placeholder {
+  @apply text-placeholder!;
+}
+
+.epr-search-container > .epr-icn-search {
+  @apply text-placeholder!;
+}
+
+/* Lock icon animations */
+@keyframes textSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateX(-8px);
+    max-width: 0px;
+  }
+  40% {
+    opacity: 0.7;
+    max-width: 60px;
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+    max-width: 60px;
+  }
+}
+
+@keyframes textFadeOut {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+}
+
+@keyframes lockIconAnimation {
+  0% {
+    transform: rotate(-5deg) scale(1);
+  }
+  25% {
+    transform: rotate(0deg) scale(1.15);
+  }
+  50% {
+    transform: rotate(5deg) scale(1.08);
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+@keyframes unlockIconAnimation {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  40% {
+    transform: rotate(-8deg) scale(1.15);
+  }
+  80% {
+    transform: rotate(3deg) scale(1.05);
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.animate-text-slide-in {
+  animation: textSlideIn 400ms ease-out forwards;
+}
+
+.animate-text-fade-out {
+  animation: textFadeOut 600ms ease-in 300ms forwards;
+}
+
+.animate-lock-icon {
+  animation: lockIconAnimation 600ms ease-out forwards;
+}
+
+.animate-unlock-icon {
+  animation: unlockIconAnimation 600ms ease-out forwards;
+}
+
+.animate-fade-out {
+  animation: fadeOut 500ms ease-in 100ms forwards;
+}
+
+@keyframes highlight {
+  0% {
+    background-color: var(--background-color-layer-2);
+    border-radius: 4px;
+  }
+  100% {
+    background-color: transparent;
+    border-radius: 4px;
+  }
+}
+
+/* Progress Bar Styles */
+:root {
+  --bprogress-color: var(--background-color-accent-primary);
+  --bprogress-height: 2.5px !important;
+}
+
+.bprogress {
+  pointer-events: none;
+}
+
+.bprogress .bar {
+  background: linear-gradient(
+    90deg,
+    --alpha(var(--background-color-accent-primary) / 80%) 0%,
+    --alpha(var(--background-color-accent-primary) / 100%) 100%
+  ) !important;
+  will-change: width, opacity;
+}
+
+.bprogress .peg {
+  display: block;
+  box-shadow:
+    0 0 8px --alpha(var(--background-color-accent-primary) / 60%),
+    0 0 4px --alpha(var(--background-color-accent-primary) / 40%) !important;
+  will-change: transform, opacity;
+}
diff --git a/apps/web/styles/power-k.css b/apps/web/styles/power-k.css
new file mode 100644
index 0000000..f795461
--- /dev/null
+++ b/apps/web/styles/power-k.css
@@ -0,0 +1,27 @@
+@layer components {
+  [cmdk-group] {
+    @apply mt-2 px-[0.45rem];
+  }
+
+  [cmdk-group-heading] {
+    @apply text-tertiary text-12 font-medium mb-2 px-[0.45rem];
+  }
+
+  [cmdk-item] {
+    @apply flex items-center justify-between cursor-pointer bg-layer-transparent text-body-xs-regular p-2 rounded-md;
+
+    &:focus,
+    &[aria-selected="true"] {
+      @apply bg-layer-transparent-active;
+    }
+
+    &[aria-disabled="true"],
+    &[data-disabled="true"] {
+      @apply bg-layer-transparent opacity-50 cursor-not-allowed;
+
+      &:focus {
+        @apply bg-layer-1/70;
+      }
+    }
+  }
+}
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
new file mode 100644
index 0000000..0a35dbb
--- /dev/null
+++ b/apps/web/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "rootDirs": [".", "./.react-router/types"],
+    "paths": {
+      "@/*": ["./core/*"],
+      "@/app/*": ["./app/*"],
+      "@/helpers/*": ["./helpers/*"],
+      "@/styles/*": ["./styles/*"],
+      "package.json": ["./package.json"]
+    },
+    "strictNullChecks": true,
+    "exactOptionalPropertyTypes": false,
+    "noUnusedParameters": false,
+    "noUnusedLocals": false,
+    "noImplicitReturns": false,
+    "noImplicitOverride": false,
+    "types": ["vite/client"]
+  },
+  "extends": "@plane/typescript-config/react-router.json",
+  "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"]
+}
diff --git a/apps/web/use-font-face-observer.d.ts b/apps/web/use-font-face-observer.d.ts
new file mode 100644
index 0000000..1743301
--- /dev/null
+++ b/apps/web/use-font-face-observer.d.ts
@@ -0,0 +1 @@
+declare module "use-font-face-observer";
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
new file mode 100644
index 0000000..f94ebce
--- /dev/null
+++ b/apps/web/vite.config.ts
@@ -0,0 +1,38 @@
+import path from "node:path";
+import * as dotenv from "dotenv";
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+dotenv.config({ path: path.resolve(__dirname, ".env") });
+
+// Expose only vars starting with VITE_
+const viteEnv = Object.keys(process.env)
+  .filter((k) => k.startsWith("VITE_"))
+  .reduce<Record<string, string>>((a, k) => {
+    a[k] = process.env[k] ?? "";
+    return a;
+  }, {});
+
+export default defineConfig(() => ({
+  define: {
+    "process.env": JSON.stringify(viteEnv),
+  },
+  build: {
+    assetsInlineLimit: 0,
+  },
+  plugins: [reactRouter(), tsconfigPaths({ projects: [path.resolve(__dirname, "tsconfig.json")] })],
+  resolve: {
+    alias: {
+      // Next.js compatibility shims used within web
+      "next/link": path.resolve(__dirname, "app/compat/next/link.tsx"),
+      "next/navigation": path.resolve(__dirname, "app/compat/next/navigation.ts"),
+      "next/script": path.resolve(__dirname, "app/compat/next/script.tsx"),
+    },
+    dedupe: ["react", "react-dom", "@headlessui/react"],
+  },
+  server: {
+    host: "127.0.0.1",
+  },
+  // No SSR-specific overrides needed; alias resolves to ESM build
+}));
diff --git a/deployments/aio/community/Dockerfile b/deployments/aio/community/Dockerfile
new file mode 100644
index 0000000..035ab91
--- /dev/null
+++ b/deployments/aio/community/Dockerfile
@@ -0,0 +1,91 @@
+ARG PLANE_VERSION=v0.27.1
+FROM --platform=$BUILDPLATFORM tonistiigi/binfmt AS binfmt
+
+# **************************************************
+#  STAGE 0: Image Loading
+# **************************************************
+FROM node:22-alpine AS node
+
+FROM makeplane/plane-frontend:${PLANE_VERSION} AS web-img
+FROM makeplane/plane-backend:${PLANE_VERSION} AS backend-img
+FROM makeplane/plane-space:${PLANE_VERSION} AS space-img
+FROM makeplane/plane-admin:${PLANE_VERSION} AS admin-img
+FROM makeplane/plane-live:${PLANE_VERSION} AS live-img
+FROM makeplane/plane-proxy:${PLANE_VERSION} AS proxy-img
+
+# **************************************************
+#  STAGE 1: Runner
+# **************************************************
+FROM python:3.12.12-alpine AS runner
+
+WORKDIR /app
+
+# OS security updates. --available forces reinstall from the current repos;
+# bump APK_SECURITY_PATCH to bust buildx's cached layer (keyed on this command
+# string), otherwise a rebuild silently re-ships the old packages.
+ARG APK_SECURITY_PATCH=2026-09-07
+RUN echo "apk-security-patch ${APK_SECURITY_PATCH}" && apk update && apk upgrade --no-cache --available
+
+# All apk work must happen BEFORE the `COPY --from=node /usr/lib` below: that
+# copy overwrites /usr/lib/libapk.so.* with node:22-alpine's copy, which is a
+# different Alpine release, leaving /sbin/apk linked against a libapk that no
+# longer exports the symbols it needs. Every later apk call then dies with
+# "Error relocating /sbin/apk: ... symbol not found" (exit 127), and apk cannot
+# repair itself because apk is the broken binary. So the runtime tools that used
+# to be installed further down are folded in here.
+RUN apk add --no-cache \
+    "libpq" \
+    "libxslt" \
+    "xmlsec" \
+    "nss-tools" \
+    "bash" \
+    "curl" \
+    "uuidgen" \
+    "ncdu" \
+    "vim"
+
+
+COPY --from=node /usr/lib /usr/lib
+COPY --from=node /usr/local/lib /usr/local/lib
+COPY --from=node /usr/local/include /usr/local/include
+COPY --from=node /usr/local/bin /usr/local/bin
+
+# The copy above re-introduces node:22-alpine's npm, whose bundled dependencies
+# carry known vulnerabilities (pacote, ip-address, brace-expansion, tar,
+# sigstore) -- the per-service images strip npm, so without this the AIO is the
+# only place they come back. npm is not needed at runtime: the space program in
+# supervisor.conf execs its react-router-serve bin shim directly rather than
+# going through npx.
+RUN rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
+
+COPY --from=web-img /usr/share/caddy/html /app/web
+COPY --from=space-img /app /app/space
+COPY --from=admin-img /usr/share/caddy/html/god-mode /app/admin
+COPY --from=live-img /app /app/live
+
+RUN rm -rf /app/space/apps/space/.next/cache
+
+COPY --from=proxy-img /usr/bin/caddy /usr/bin/caddy
+COPY dist/Caddyfile /app/proxy/Caddyfile
+
+COPY --from=backend-img /code /app/backend
+COPY --from=backend-img /usr/local/lib/python3.12/site-packages/ /usr/local/lib/python3.12/site-packages/
+COPY --from=backend-img /usr/local/bin/ /usr/local/bin/
+
+RUN pip install supervisor
+RUN mkdir -p /etc/supervisor/conf.d
+
+COPY start.sh /app/start.sh
+COPY dist/plane.env /app/plane.env
+COPY supervisor.conf /etc/supervisor/conf.d/supervisor.conf
+
+RUN mkdir -p /app/logs/access && \
+    mkdir -p /app/logs/error && \
+    mkdir -p /app/data && \
+    chmod +x /app/start.sh
+
+VOLUME ["/app/data", "/app/logs"]
+
+EXPOSE 80 443
+
+CMD ["/app/start.sh"] 
diff --git a/deployments/aio/community/README.md b/deployments/aio/community/README.md
new file mode 100644
index 0000000..8e945a8
--- /dev/null
+++ b/deployments/aio/community/README.md
@@ -0,0 +1,174 @@
+# Plane Community All-In-One (AIO) Docker Image
+
+The Plane Community All-In-One Docker image packages all Plane services into a single container for easy deployment and testing. This image includes web interface, API server, background workers, live server, and more.
+
+## What's Included
+
+The AIO image contains the following services:
+
+- **Web App** (Port 3001): Main Plane web interface
+- **Space** (Port 3002): Public project spaces
+- **Admin** (Port 3003): Administrative interface  
+- **API Server** (Port 3004): Backend API
+- **Live Server** (Port 3005): Real-time collaboration
+- **Proxy** (Port 80, 443): Caddy reverse proxy
+- **Worker & Beat**: Background task processing
+
+## Prerequisites
+
+### Required External Services
+
+The AIO image requires these external services to be running:
+
+- **PostgreSQL Database**: For data storage
+- **Redis**: For caching and session management  
+- **RabbitMQ**: For message queuing
+- **S3-Compatible Storage**: For file uploads (AWS S3 or MinIO)
+
+### Required Environment Variables
+
+You must provide these environment variables:
+
+#### Core Configuration
+
+- `DOMAIN_NAME`: Your domain name or IP address
+- `DATABASE_URL`: PostgreSQL connection string
+- `REDIS_URL`: Redis connection string  
+- `AMQP_URL`: RabbitMQ connection string
+
+#### Storage Configuration
+
+- `AWS_REGION`: AWS region (e.g., us-east-1)
+- `AWS_ACCESS_KEY_ID`: S3 access key
+- `AWS_SECRET_ACCESS_KEY`: S3 secret key
+- `AWS_S3_BUCKET_NAME`: S3 bucket name
+- `AWS_S3_ENDPOINT_URL`: S3 endpoint (optional, defaults to AWS)
+
+## Quick Start
+
+### Basic Usage
+
+```bash
+docker run --name plane-aio --rm -it \
+    -p 80:80 \
+    -e DOMAIN_NAME=your-domain.com \
+    -e DATABASE_URL=postgresql://user:pass@host:port/database \
+    -e REDIS_URL=redis://host:port \
+    -e AMQP_URL=amqp://user:pass@host:port/vhost \
+    -e AWS_REGION=us-east-1 \
+    -e AWS_ACCESS_KEY_ID=your-access-key \
+    -e AWS_SECRET_ACCESS_KEY=your-secret-key \
+    -e AWS_S3_BUCKET_NAME=your-bucket \
+    makeplane/plane-aio-community:latest
+```
+
+### Example with IP Address
+
+```bash
+MYIP=192.168.68.169
+docker run --name myaio --rm -it \
+    -p 80:80 \
+    -e DOMAIN_NAME=${MYIP} \
+    -e DATABASE_URL=postgresql://plane:plane@${MYIP}:15432/plane \
+    -e REDIS_URL=redis://${MYIP}:16379 \
+    -e AMQP_URL=amqp://plane:plane@${MYIP}:15673/plane \
+    -e AWS_REGION=us-east-1 \
+    -e AWS_ACCESS_KEY_ID=5MV45J9NF5TEFZWYCRAX \
+    -e AWS_SECRET_ACCESS_KEY=7xMqAiAHsf2UUjMH+EwICXlyJL9TO30m8leEaDsL \
+    -e AWS_S3_BUCKET_NAME=plane-app \
+    -e AWS_S3_ENDPOINT_URL=http://${MYIP}:19000 \
+    -e FILE_SIZE_LIMIT=10485760 \
+    makeplane/plane-aio-community:latest
+```
+
+## Configuration Options
+
+### Optional Environment Variables
+
+#### Network & Protocol
+
+- `SITE_ADDRESS`: Server bind address (default: `:80`)
+
+
+#### Security & Secrets
+
+- `SECRET_KEY`: Django secret key (default provided)
+- `LIVE_SERVER_SECRET_KEY`: Live server secret (default provided)
+
+#### File Handling
+
+- `FILE_SIZE_LIMIT`: Maximum file upload size in bytes (default: `5242880` = 5MB)
+
+#### API Configuration
+
+- `API_KEY_RATE_LIMIT`: API key rate limit (default: `60/minute`)
+
+## Port Mapping
+
+The following ports are exposed:
+
+- `80`: Main web interface (HTTP)
+- `443`: HTTPS (if SSL configured)
+
+## Volume Mounts
+
+### Recommended Persistent Volumes
+
+```bash
+-v /path/to/logs:/app/logs \
+-v /path/to/data:/app/data 
+```
+
+## Building the Image
+
+To build the AIO image yourself:
+
+```bash
+cd deployments/aio/community
+IMAGE_NAME=myplane-aio ./build.sh --release=v0.27.1 [--platform=linux/amd64]
+```
+
+Available build options:
+
+- `--release`: Plane version to build (required)
+- `--image-name`: Custom image name (default: `plane-aio-community`)
+
+## Troubleshooting
+
+### Logs
+
+All service logs are available in `/app/logs/`:
+
+- Access logs: `/app/logs/access/`
+- Error logs: `/app/logs/error/`
+
+### Health Checks
+
+The container runs multiple services managed by Supervisor. Check service status:
+
+```bash
+docker exec -it <container-name> supervisorctl status
+```
+
+### Common Issues
+
+1. **Database Connection Failed**: Ensure PostgreSQL is accessible and credentials are correct
+2. **Redis Connection Failed**: Verify Redis server is running and URL is correct  
+3. **File Upload Issues**: Check S3 credentials and bucket permissions
+
+### Environment Validation
+
+The container will validate required environment variables on startup and display helpful error messages if any are missing.
+
+## Production Considerations
+
+- Use proper SSL certificates for HTTPS
+- Configure proper backup strategies for data
+- Monitor resource usage and scale accordingly
+- Use external load balancer for high availability
+- Regularly update to latest versions
+- Secure your environment variables and secrets
+
+## Support
+
+For issues and support, please refer to the official Plane documentation.
diff --git a/deployments/aio/community/build.sh b/deployments/aio/community/build.sh
new file mode 100755
index 0000000..5c9573a
--- /dev/null
+++ b/deployments/aio/community/build.sh
@@ -0,0 +1,145 @@
+#!/bin/bash
+
+set -e
+
+DIST_DIR=${DIST_DIR:-./dist}
+CPU_ARCH=$(uname -m)
+IMAGE_NAME=${IMAGE_NAME:-makeplane/plane-aio-community}
+
+
+# loop though all flags and set the variables
+for arg in "$@"; do
+    case $arg in
+        --release)
+            APP_RELEASE_VERSION="$2"
+            shift
+            shift
+            ;;
+        --release=*)
+            APP_RELEASE_VERSION="${arg#*=}"
+            shift
+            ;;
+        --image-name)
+            IMAGE_NAME="$2"
+            shift
+            shift
+            ;;
+        --image-name=*)
+            IMAGE_NAME="${arg#*=}"
+            shift
+            ;;
+    esac
+done
+
+
+if [ -z "$APP_RELEASE_VERSION" ]; then
+    echo ""
+    echo "Usage: "
+    echo "   ./build.sh [flags]"
+    echo ""
+    echo "Flags:"
+    echo "  --release=<APP_RELEASE_VERSION>     required (e.g. v0.27.1)"
+    echo ""
+    echo "Example: ./build.sh --release=v0.27.1 --platform=linux/amd64"
+    exit 1
+fi
+
+# Install yq if not present
+if ! command -v yq &> /dev/null; then
+    echo "Installing yq..."
+    sudo wget -qO /usr/local/bin/yq https://github.com/mikefarah/yq/releases/latest/download/yq_linux_${CPU_ARCH}
+    sudo chmod +x /usr/local/bin/yq
+fi
+
+cd $(dirname "$0")
+
+string_replace(){
+    local file="$1"
+    local search="$2"
+    local replace="$3"
+    
+    if [[ "$OSTYPE" == "darwin"* ]]; then
+        sed -i '' "s|$search|$replace|g" "$file"
+    else
+        sed -i "s|$search|$replace|g" "$file"
+    fi
+}
+remove_line(){
+    local file="$1"
+    local line="$2"
+
+    if [[ "$OSTYPE" == "darwin"* ]]; then
+        sed -i '' '/'$line'/d' "$file"
+    else
+        sed -i '/'$line'/d' "$file"
+    fi
+}
+
+update_env_file(){
+    local file="$1"
+    local key="$2"
+    local value="$3"
+
+    # if key is in file, replace it
+    if [[ "$OSTYPE" == "darwin"* ]]; then
+        sed -i '' 's|^'$key'=.*|'$key'='$value'|' "$file"
+    else
+        sed -i 's|^'$key'=.*|'$key'='$value'|' "$file"
+    fi
+
+    # if key not in file, add it
+    if ! grep -q "^$key=" "$file"; then
+        echo "$key=$value" >> "$file"
+    fi
+}
+
+build_dist_files(){
+    cp ./variables.env $DIST_DIR/plane.env
+    cp ../../../apps/proxy/Caddyfile.aio.ce $DIST_DIR/Caddyfile
+
+    echo "" >> $DIST_DIR/plane.env
+    echo "" >> $DIST_DIR/plane.env
+
+    # update the plane.env file with the APP_RELEASE_VERSION
+    update_env_file $DIST_DIR/plane.env "APP_RELEASE_VERSION" "$APP_RELEASE_VERSION"
+    update_env_file $DIST_DIR/plane.env "APP_RELEASE" "$APP_RELEASE_VERSION"
+    update_env_file $DIST_DIR/plane.env "APP_VERSION" "$APP_RELEASE_VERSION"
+    
+    update_env_file $DIST_DIR/plane.env "API_BASE_URL" "http://localhost:3004"
+    update_env_file $DIST_DIR/plane.env "SITE_ADDRESS" ":80"
+
+
+    # print docker build command
+    echo "------------------------------------------------"
+    echo "Run the following command to build the image:"
+    echo "------------------------------------------------"
+    echo ""
+    echo "docker build -t $IMAGE_NAME \\"
+    echo "  -f $(pwd)/Dockerfile \\"
+    echo "  --build-arg PLANE_VERSION=$APP_RELEASE_VERSION \\"
+    echo "  $(pwd)"
+    echo ""
+    echo "------------------------------------------------"
+}
+
+
+main(){
+    # check if the dist directory exists
+    echo ""
+    if [ -d "$DIST_DIR" ]; then
+        echo "Cleaning existing dist directory..."
+        rm -rf $DIST_DIR
+    fi
+    echo "Creating dist directory..." 
+    mkdir -p $DIST_DIR
+    echo ""
+
+    build_dist_files
+    if [ $? -ne 0 ]; then
+        echo "Error: Failed to build docker image"
+        exit 1
+    fi
+}
+
+main "$@"
+
diff --git a/deployments/aio/community/start.sh b/deployments/aio/community/start.sh
new file mode 100644
index 0000000..0ace73c
--- /dev/null
+++ b/deployments/aio/community/start.sh
@@ -0,0 +1,195 @@
+#!/bin/bash -e
+
+print_header(){
+    clear
+    echo "------------------------------------------------"
+    echo "Plane Community (All-In-One)"
+    echo "------------------------------------------------"
+    echo ""
+    echo "You are required to pass below environment variables to the script"
+    echo "    DOMAIN_NAME, DATABASE_URL, REDIS_URL, AMQP_URL"
+    echo "    AWS_REGION, AWS_ACCESS_KEY_ID"
+    echo "    AWS_SECRET_ACCESS_KEY, AWS_S3_BUCKET_NAME"
+    echo ""
+    echo "Other optional environment variables: "
+    echo "    SITE_ADDRESS (default: ':80')"
+    echo "    FILE_SIZE_LIMIT (default: 5242880)"
+    echo "    APP_PROTOCOL (http or https)"
+    echo "    SECRET_KEY (auto-generated on first boot if not set)"
+    echo "    LIVE_SERVER_SECRET_KEY (auto-generated on first boot if not set)"
+    echo ""
+    echo ""
+}
+
+check_required_env(){
+    echo "Checking required environment variables..."
+    local keys=("DOMAIN_NAME" "DATABASE_URL" "REDIS_URL" "AMQP_URL" 
+                "AWS_REGION" "AWS_ACCESS_KEY_ID" "AWS_SECRET_ACCESS_KEY" "AWS_S3_BUCKET_NAME")
+    
+    local missing_keys=()
+    # Check if the environment variable is set and not empty
+    for key in "${keys[@]}"; do
+        if [ -z "${!key}" ]; then
+            echo "  ❌  '$key' is not set or is empty"
+            missing_keys+=("$key")
+        fi
+    done
+
+    if [ ${#missing_keys[@]} -gt 0 ]; then
+        echo ""
+        exit 1
+    fi
+    # add checkmark
+    echo "✅ Required environment variables are available"
+    echo ""
+}
+
+update_env_value(){
+    local key="$1"
+    local value="$2"
+
+    # check if the file exists
+    if [ ! -f "plane.env" ]; then
+        echo "plane.env file not found"
+        exit 1
+    fi
+
+    # check if the key exists and add it if it doesn't
+    if ! grep -q "^$key=.*" plane.env; then
+        echo "${key}=${value}" >> plane.env
+        return 0
+    fi
+
+    # if key and value are not empty, update the value
+    if [ -n "$key" ] && [ -n "$value" ]; then
+        sed -i "s|^$key=.*|$key=$value|" plane.env
+        return 0
+    fi
+
+}
+
+check_pre_requisites(){
+    check_required_env
+
+    # check if the file exists
+    if [ ! -f "plane.env" ]; then
+        echo "plane.env file not found"
+        exit 1
+    fi
+    # add a new line to the end of the file
+    echo "" >> plane.env
+    echo "" >> plane.env
+    echo "✅ Pre-requisites checked"
+    echo ""
+    
+}
+
+validate_domain_name() {
+    local domain="$1"
+    
+    # Check if it's an IP address first
+    if [[ "$domain" =~ ^[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+        echo "IP"
+        return 0
+    fi
+    
+    # FQDN validation regex
+    local fqdn_regex='^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.?$'
+    
+    if [[ "$domain" =~ $fqdn_regex ]]; then
+        # Additional checks
+        if [[ ${#domain} -le 253 ]] && [[ ! "$domain" =~ \.\. ]] && [[ ! "$domain" =~ ^- ]] && [[ ! "$domain" =~ -\. ]]; then
+            echo "FQDN"
+            return 0
+        fi
+    fi
+    
+    echo "INVALID"
+    return 1
+}
+
+update_env_file(){
+    echo "Updating environment file..."
+    # check if DOMAIN_NAME is valid IP address
+    local domain_type=$(validate_domain_name "$DOMAIN_NAME")
+    if [ "$domain_type" == "INVALID" ]; then
+        echo "DOMAIN_NAME is not a valid FQDN or IP address"
+        exit 1
+    fi
+
+    local app_protocol=${APP_PROTOCOL:-http}
+    
+    update_env_value "APP_PROTOCOL" "$app_protocol"
+    update_env_value "DOMAIN_NAME" "$DOMAIN_NAME"
+    update_env_value "APP_DOMAIN" "$DOMAIN_NAME"
+    if [ -n "$SITE_ADDRESS" ]; then
+        update_env_value "SITE_ADDRESS" "$SITE_ADDRESS"
+    else
+        update_env_value "SITE_ADDRESS" ":80"
+    fi
+    update_env_value "WEB_URL" "$app_protocol://$DOMAIN_NAME"
+    update_env_value "CORS_ALLOWED_ORIGINS" "http://$DOMAIN_NAME,https://$DOMAIN_NAME"
+
+    # update database url
+    update_env_value "DATABASE_URL" "$DATABASE_URL"
+    update_env_value "REDIS_URL" "$REDIS_URL"
+    update_env_value "AMQP_URL" "$AMQP_URL"
+    
+    # update aws credentials
+    update_env_value "AWS_REGION" "$AWS_REGION"
+    update_env_value "AWS_ACCESS_KEY_ID" "$AWS_ACCESS_KEY_ID"
+    update_env_value "AWS_SECRET_ACCESS_KEY" "$AWS_SECRET_ACCESS_KEY"
+    update_env_value "AWS_S3_BUCKET_NAME" "$AWS_S3_BUCKET_NAME"
+    update_env_value "AWS_S3_ENDPOINT_URL" "${AWS_S3_ENDPOINT_URL:-https://s3.${AWS_REGION}.amazonaws.com}"
+    update_env_value "BUCKET_NAME" "$AWS_S3_BUCKET_NAME"
+    update_env_value "USE_MINIO" "0"
+
+    # Optional environment variables
+    # SECRET_KEY: if absent or set to a known placeholder/insecure value, preserve whatever
+    # is already stored in plane.env (survives restarts), or generate a fresh random value on
+    # first boot. Never write a publicly-known or placeholder value into plane.env.
+    local _insecure_sk="60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5"
+    local _placeholder_sk="change-this-key-on-deployment"
+    if [ -z "$SECRET_KEY" ] || [ "$SECRET_KEY" = "$_insecure_sk" ] || [ "$SECRET_KEY" = "$_placeholder_sk" ]; then
+        local _stored_sk
+        _stored_sk=$(grep "^SECRET_KEY=" plane.env 2>/dev/null | cut -d'=' -f2-)
+        if [ -n "$_stored_sk" ] && [ "$_stored_sk" != "$_insecure_sk" ] && [ "$_stored_sk" != "$_placeholder_sk" ]; then
+            SECRET_KEY="$_stored_sk"
+        else
+            SECRET_KEY=$(tr -dc 'a-zA-Z0-9' < /dev/urandom | head -c50)
+        fi
+    fi
+    update_env_value "SECRET_KEY" "$SECRET_KEY"
+    update_env_value "FILE_SIZE_LIMIT" "${FILE_SIZE_LIMIT:-5242880}"
+    # LIVE_SERVER_SECRET_KEY: same first-boot generation strategy.
+    local _insecure_lssk="htbqvBJAgpm9bzvf3r4urJer0ENReatceh"
+    local _placeholder_lssk="change-this-key-on-deployment"
+    if [ -z "$LIVE_SERVER_SECRET_KEY" ] || [ "$LIVE_SERVER_SECRET_KEY" = "$_insecure_lssk" ] || [ "$LIVE_SERVER_SECRET_KEY" = "$_placeholder_lssk" ]; then
+        local _stored_lssk
+        _stored_lssk=$(grep "^LIVE_SERVER_SECRET_KEY=" plane.env 2>/dev/null | cut -d'=' -f2-)
+        if [ -n "$_stored_lssk" ] && [ "$_stored_lssk" != "$_insecure_lssk" ] && [ "$_stored_lssk" != "$_placeholder_lssk" ]; then
+            LIVE_SERVER_SECRET_KEY="$_stored_lssk"
+        else
+            LIVE_SERVER_SECRET_KEY=$(tr -dc 'a-zA-Z0-9' < /dev/urandom | head -c50)
+        fi
+    fi
+    update_env_value "LIVE_SERVER_SECRET_KEY" "$LIVE_SERVER_SECRET_KEY"
+
+    update_env_value "API_KEY_RATE_LIMIT" "${API_KEY_RATE_LIMIT:-60/minute}"
+
+    echo "✅ Environment file updated"
+    echo ""
+}
+
+main(){
+    print_header
+    check_pre_requisites
+    update_env_file
+
+    # load plane.env as exported variables
+    export $(grep -v '^#' plane.env | xargs)
+
+    /usr/local/bin/supervisord -c /etc/supervisor/conf.d/supervisor.conf
+}
+
+main "$@"
\ No newline at end of file
diff --git a/deployments/aio/community/supervisor.conf b/deployments/aio/community/supervisor.conf
new file mode 100644
index 0000000..22a7ac0
--- /dev/null
+++ b/deployments/aio/community/supervisor.conf
@@ -0,0 +1,100 @@
+[supervisord]
+user=root
+nodaemon=true
+stderr_logfile=/app/logs/error/supervisor.err.log
+stdout_logfile=/app/logs/access/supervisor.log
+
+[program:migrator]
+directory=/app/backend
+command=sh -c "./bin/docker-entrypoint-migrator.sh"
+autostart=true
+autorestart=unexpected
+stdout_logfile=/app/logs/access/migrator.log
+stderr_logfile=/app/logs/error/migrator.err.log
+# stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=50MB
+stderr_logfile_backups=5
+priority=10
+
+
+[program:space]
+directory=/app/space/apps/space
+command=sh -c "./node_modules/.bin/react-router-serve ./build/server/index.js"
+autostart=true
+autorestart=true
+stdout_logfile=/app/logs/access/space.log
+stderr_logfile=/app/logs/error/space.err.log
+# stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=50MB
+stderr_logfile_backups=5
+environment=PORT=3002,HOSTNAME=0.0.0.0
+priority=15
+
+[program:api]
+directory=/app/backend
+command=sh -c "./bin/docker-entrypoint-api.sh"
+autostart=true
+autorestart=true
+stdout_logfile=/app/logs/access/api.log
+stdout_logfile_maxbytes=0
+stderr_logfile=/app/logs/error/api.err.log
+# stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=50MB
+stderr_logfile_backups=5
+environment=PORT=3004,HOSTNAME=0.0.0.0
+priority=15
+
+
+[program:worker]
+directory=/app/backend
+command=sh -c "./bin/docker-entrypoint-worker.sh"
+autostart=true
+autorestart=true
+stdout_logfile=/app/logs/access/worker.log
+stdout_logfile_maxbytes=0
+stderr_logfile=/app/logs/error/worker.err.log
+# stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=50MB
+stderr_logfile_backups=5
+priority=20
+
+[program:beat]
+directory=/app/backend
+command=sh -c "./bin/docker-entrypoint-beat.sh"
+autostart=true
+autorestart=true
+stdout_logfile=/app/logs/access/beat.log
+stdout_logfile_maxbytes=0
+stderr_logfile=/app/logs/error/beat.err.log
+# stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=50MB
+stderr_logfile_backups=5
+priority=20
+
+
+[program:live]
+command=sh -c "node /app/live/apps/live"
+autostart=true
+autorestart=true
+stdout_logfile=/app/logs/access/live.log
+stdout_logfile_maxbytes=0
+stderr_logfile=/app/logs/error/live.err.log
+# stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=50MB
+stderr_logfile_backups=5
+environment=PORT=3005,HOSTNAME=0.0.0.0
+priority=20
+
+
+[program:proxy]
+directory=/app/proxy
+command=sh -c "caddy run --config /app/proxy/Caddyfile"
+autostart=true
+autorestart=true
+stdout_logfile=/app/logs/access/proxy.log
+stdout_logfile_maxbytes=0
+stderr_logfile=/app/logs/error/proxy.err.log
+# stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=50MB
+stderr_logfile_backups=5
+priority=20
\ No newline at end of file
diff --git a/deployments/aio/community/variables.env b/deployments/aio/community/variables.env
new file mode 100644
index 0000000..0a74aa2
--- /dev/null
+++ b/deployments/aio/community/variables.env
@@ -0,0 +1,74 @@
+APP_DOMAIN=localhost
+APP_RELEASE=stable
+
+# If SSL Cert to be generated, set CERT_EMAIl="email <EMAIL_ADDRESS>"
+CERT_EMAIL=
+CERT_ACME_CA=https://acme-v02.api.letsencrypt.org/directory
+
+SITE_ADDRESS=:80
+
+# For DNS Challenge based certificate generation, set the CERT_ACME_DNS, CERT_EMAIL
+# CERT_ACME_DNS="acme_dns <CERT_DNS_PROVIDER> <CERT_DNS_PROVIDER_API_KEY>"
+CERT_ACME_DNS=
+
+WEB_URL=http://localhost
+DEBUG=0
+CORS_ALLOWED_ORIGINS=http://localhost
+API_BASE_URL=http://localhost:3004
+
+#DB SETTINGS
+DATABASE_URL=
+
+# REDIS SETTINGS
+REDIS_URL=
+
+# RabbitMQ Settings
+AMQP_URL=
+
+# Secret Key — change this before deploying to production.
+# Generate a secure value with: python3 -c "from django.utils.crypto import get_random_secret_key; print(get_random_secret_key())"
+# or: openssl rand -hex 32
+# The startup script auto-generates and persists a random key on first boot if the
+# placeholder value below is left unchanged.
+SECRET_KEY=change-this-key-on-deployment
+
+# DATA STORE SETTINGS
+USE_MINIO=0
+AWS_REGION=
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_S3_ENDPOINT_URL=https://s3.amazonaws.com
+AWS_S3_BUCKET_NAME=
+BUCKET_NAME=
+FILE_SIZE_LIMIT=5242880
+
+# Gunicorn Workers
+GUNICORN_WORKERS=1
+
+
+
+# Force HTTPS for handling SSL Termination
+MINIO_ENDPOINT_SSL=0
+
+# API key rate limit
+API_KEY_RATE_LIMIT=60/minute
+
+# Per-IP throttle for anonymous authentication endpoints (magic-link
+# generate / sign-in / sign-up, email sign-in). DRF format: "<n>/<period>"
+# where period is second/minute/hour/day.
+AUTHENTICATION_RATE_LIMIT=10/minute
+
+# Live Server Secret Key — change this before deploying to production.
+# Generate a secure value with: openssl rand -hex 32
+# The startup script auto-generates and persists a random key on first boot if the
+# placeholder value below is left unchanged.
+LIVE_SERVER_SECRET_KEY=change-this-key-on-deployment
+
+# Webhook IP allowlist — comma-separated IPs or CIDR ranges allowed as webhook targets
+# even if they resolve to private networks (e.g. "10.0.0.0/8,192.168.1.0/24,172.16.0.5")
+WEBHOOK_ALLOWED_IPS=
+
+# Webhook hostname allowlist — comma-separated hostnames that bypass the private-IP
+# SSRF check. Useful for trusted internal services whose container/service IPs are
+# dynamic (e.g. "silo,silo.namespace.svc.cluster.local")
+WEBHOOK_ALLOWED_HOSTS=
diff --git a/deployments/cli/community/README.md b/deployments/cli/community/README.md
new file mode 100644
index 0000000..dd50793
--- /dev/null
+++ b/deployments/cli/community/README.md
@@ -0,0 +1,630 @@
+# Self Hosting
+
+In this guide, we will walk you through the process of setting up a self-hosted environment. Self-hosting allows you to have full control over your applications and data. It's a great way to ensure privacy, control, and customization.
+
+We will cover two main options for setting up your self-hosted environment: using a cloud server or using your desktop. For the cloud server, we will use an AWS EC2 instance. For the desktop, we will use Docker to create a local environment.
+
+Let's get started!
+
+## Setting up Docker Environment
+
+<details>
+  <summary>Option 1 - Using Cloud Server</summary>
+  <p>Best way to start is to create EC2 machine on AWS. It must have minimum of 2vCPU and 4GB RAM.</p>
+  <p>Run the below command to install docker engine.</p>
+
+`curl -fsSL https://get.docker.com | sh -`
+
+</details>
+
+---
+
+<details>
+  <summary>Option 2 - Using Desktop</summary>
+
+#### For Mac
+
+  <ol>
+    <li> Download Docker Desktop for Mac from the <a href="https://hub.docker.com/editions/community/docker-ce-desktop-mac/" target="_blank">Docker Hub</a>. </li>
+    <li> Double-click the downloaded `.dmg` file and drag the Docker app icon to the Applications folder. </li>
+    <li>Open Docker Desktop from the Applications folder. You might be asked to provide your system password to install additional software.</li>
+  </ol>
+
+#### For Windows:
+
+  <ol>
+    <li>Download Docker Desktop for Windows from the <a href="https://hub.docker.com/editions/community/docker-ce-desktop-windows/" target="_blank">Docker Hub</a>.</li>
+    <li>Run the installer and follow the instructions. You might be asked to enable Hyper-V and "Containers" Windows features.</li>
+    <li>Open Docker Desktop. You might be asked to log out and log back in, or restart your machine, for changes to take effect.</li>
+  </ol>
+
+After installation, you can verify the installation by opening a terminal (Command Prompt on Windows, Terminal app on Mac) and running the command `docker --version`. This should display the installed version of Docker.
+
+</details>
+
+---
+
+## Installing Plane
+
+Installing plane is a very easy and minimal step process.
+
+### Prerequisite
+
+- Docker installed and running
+- OS with bash scripting enabled (Ubuntu, Linux AMI, macos). Windows systems need to have [gitbash](https://git-scm.com/download/win)
+- User context used must have access to docker services. In most cases, use sudo su to switch as root user
+- Use the terminal (or gitbash) window to run all the future steps
+
+### Downloading Latest Release
+
+```
+mkdir plane-selfhost
+
+cd plane-selfhost
+```
+
+#### For *Docker Compose* based setup
+
+```
+curl -fsSL -o setup.sh https://github.com/makeplane/plane/releases/latest/download/setup.sh
+
+chmod +x setup.sh
+```
+
+#### For *Docker Swarm* based setup
+
+```
+curl -fsSL -o setup.sh https://github.com/makeplane/plane/releases/latest/download/swarm.sh
+
+chmod +x setup.sh
+```
+
+---
+
+### Proceed with setup
+
+Above steps will set you ready to install and start plane services.
+
+Lets get started by running the `./setup.sh` command.
+
+This will prompt you with the below options.
+
+#### Docker Compose 
+```bash
+Select an Action you want to perform:
+   1) Install (x86_64)
+   2) Start
+   3) Stop
+   4) Restart
+   5) Upgrade
+   6) View Logs
+   7) Backup Data
+   8) Exit
+
+Action [2]: 1
+```
+
+For the 1st time setup, type "1" as action input.
+
+This will create a folder `plane-app` and will download 2 files inside that
+
+- `docker-compose.yaml`
+- `plane.env`
+
+Again the `options [1-8]` will be popped up, and this time hit `8` to exit.
+
+#### Docker Swarm
+
+```bash
+Select an Action you want to perform:
+   1) Deploy Stack
+   2) Remove Stack
+   3) View Stack Status
+   4) Redeploy Stack
+   5) Upgrade
+   6) View Logs
+   7) Exit
+
+Action [3]: 1
+```
+
+For the 1st time setup, type "1" as action input.
+
+This will create a create a folder `plane-app` and will download 2 files inside that
+
+- `docker-compose.yaml`
+- `plane.env`
+
+Again the `options [1-7]` will be popped up, and this time hit `7` to exit.
+
+---
+
+### Continue with setup - Environment Settings
+
+Before proceeding, we suggest used to review `.env` file and set the values.
+Below are the most import keys you must refer to. _<span style="color: #fcba03">You can use any text editor to edit this file</span>_.
+
+> `LISTEN_HTTP_PORT` - This is default set to `80`. Make sure the port you choose to use is not preoccupied. (e.g `LISTEN_HTTP_PORT=8080`)
+
+> `WEB_URL` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with LISTEN_HTTP_PORT (eg. `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`)
+
+> `CORS_ALLOWED_ORIGINS` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with LISTEN_HTTP_PORT (eg. `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`)
+
+There are many other settings you can play with, but we suggest you configure `EMAIL SETTINGS` as it will enable you to invite your teammates onto the platform.
+
+---
+
+### Continue with setup - Start Server (Docker Compose)
+
+Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `2` to start the services
+
+```bash
+Select a Action you want to perform:
+   1) Install (x86_64)
+   2) Start
+   3) Stop
+   4) Restart
+   5) Upgrade
+   6) View Logs
+   7) Backup Data
+   8) Exit
+
+Action [2]: 2
+```
+
+Expect something like this.  
+![Downloading docker images](images/download.png)
+
+Be patient as it might take sometime based on download speed and system configuration. If all goes well, you must see something like this
+
+![Downloading completed](images/started.png)
+
+This is the confirmation that all images were downloaded and the services are up & running.
+
+You have successfully self hosted `Plane` instance. Access the application by going to IP or domain you have configured it (e.g `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`)
+
+---
+
+### Stopping the Server / Remove Stack
+
+In case you want to make changes to `plane.env` variables, we suggest you to stop the services before doing that.
+
+#### Docker Compose 
+
+Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `3` to stop the services
+
+```bash
+Select a Action you want to perform:
+   1) Install (x86_64)
+   2) Start
+   3) Stop
+   4) Restart
+   5) Upgrade
+   6) View Logs
+   7) Backup Data
+   8) Exit
+
+Action [2]: 3
+```
+
+If all goes well, you must see something like this
+
+![Stop Services](images/stopped.png)
+
+#### Docker Swarm
+
+Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `2` to stop the services
+
+```bash
+Select an Action you want to perform:
+   1) Deploy Stack
+   2) Remove Stack
+   3) View Stack Status
+   4) Redeploy Stack
+   5) Upgrade
+   6) View Logs
+   7) Exit
+
+Action [3]: 2
+```
+
+If all goes well, you will see the confirmation from docker cli
+
+---
+
+### Restarting the Server / Redeploy Stack
+
+In case you want to make changes to `plane.env` variables, without stopping the server or you noticed some abnormalies in services, you can restart the services with `RESTART` / `REDEPLOY` option.
+
+Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `4` to restart the services
+
+#### Docker Compose
+```bash
+Select a Action you want to perform:
+   1) Install (x86_64)
+   2) Start
+   3) Stop
+   4) Restart
+   5) Upgrade
+   6) View Logs
+   7) Backup Data
+   8) Exit
+
+Action [2]: 4
+```
+
+If all goes well, you must see something like this
+
+![Restart Services](images/restart.png)
+
+#### Docker Swarm
+
+```bash
+   1) Deploy Stack
+   2) Remove Stack
+   3) View Stack Status
+   4) Redeploy Stack
+   5) Upgrade
+   6) View Logs
+   7) Exit
+
+Action [3]: 4
+```
+
+If all goes well, you will see the confirmation from docker cli
+
+---
+
+### Upgrading Plane Version 
+
+It is always advised to keep Plane up to date with the latest release.
+
+Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `5` to upgrade the release.
+
+#### Docker Compose
+
+```bash
+Select a Action you want to perform:
+   1) Install (x86_64)
+   2) Start
+   3) Stop
+   4) Restart
+   5) Upgrade
+   6) View Logs
+   7) Backup Data
+   8) Exit
+
+Action [2]: 5
+```
+
+By choosing this, it will stop the services and then will download the latest `docker-compose.yaml` and `plane.env`.
+
+You must expect the below message
+
+![Alt text](images/upgrade.png)
+
+Once done, choose `8` to exit from prompt.
+
+> It is very important for you to validate the `plane.env` for the new changes.
+
+Once done with making changes in `plane.env` file, jump on to `Start Server`
+
+#### Docker Swarm
+
+Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `5` to upgrade the release.
+
+```bash
+   1) Deploy Stack
+   2) Remove Stack
+   3) View Stack Status
+   4) Redeploy Stack
+   5) Upgrade
+   6) View Logs
+   7) Exit
+
+Action [3]: 5
+```
+
+By choosing this, it will stop the services and then will download the latest `docker-compose.yaml` and `plane.env`.
+
+Once done, choose `7` to exit from prompt.
+
+> It is very important for you to validate the `plane.env` for the new changes.
+
+Once done with making changes in `plane.env` file, jump on to `Redeploy Stack`
+
+---
+
+### View Logs
+
+There would a time when you might want to check what is happening inside the API, Worker or any other container.  
+
+Lets again run the `./setup.sh` command. You will again be prompted with the below options. 
+
+This time select `6` to view logs.
+
+#### Docker Compose
+
+```bash
+Select a Action you want to perform:
+   1) Install (x86_64)
+   2) Start
+   3) Stop
+   4) Restart
+   5) Upgrade
+   6) View Logs
+   7) Backup Data
+   8) Exit
+
+Action [2]: 6
+```
+
+#### Docker Swarm
+
+
+```bash
+   1) Deploy Stack
+   2) Remove Stack
+   3) View Stack Status
+   4) Redeploy Stack
+   5) Upgrade
+   6) View Logs
+   7) Exit
+
+Action [3]: 6
+```
+
+#### Service Menu Options for Logs
+This will further open sub-menu with list of services
+```bash
+Select a Service you want to view the logs for:
+   1) Web
+   2) Space
+   3) API
+   4) Worker
+   5) Beat-Worker
+   6) Migrator
+   7) Proxy
+   8) Redis
+   9) Postgres
+   10) Minio
+   11) RabbitMQ
+   0) Back to Main Menu
+
+Service: 3
+```
+
+Select any of the service to view the logs e.g. `3`. Expect something similar to this
+```bash
+api-1  | Waiting for database...
+api-1  | Database available!
+api-1  | Waiting for database migrations to complete...
+api-1  | Waiting for database migrations to complete...
+api-1  | Waiting for database migrations to complete...
+api-1  | Waiting for database migrations to complete...
+api-1  | Waiting for database migrations to complete...
+api-1  | Waiting for database migrations to complete...
+api-1  | Waiting for database migrations to complete...
+api-1  | No migrations Pending. Starting processes ...
+api-1  | Instance registered
+api-1  | ENABLE_SIGNUP loaded with value from environment variable.
+api-1  | ENABLE_EMAIL_PASSWORD loaded with value from environment variable.
+api-1  | ENABLE_MAGIC_LINK_LOGIN loaded with value from environment variable.
+api-1  | GOOGLE_CLIENT_ID loaded with value from environment variable.
+api-1  | GITHUB_CLIENT_ID loaded with value from environment variable.
+api-1  | GITHUB_CLIENT_SECRET loaded with value from environment variable.
+api-1  | EMAIL_HOST loaded with value from environment variable.
+api-1  | EMAIL_HOST_USER loaded with value from environment variable.
+api-1  | EMAIL_HOST_PASSWORD loaded with value from environment variable.
+api-1  | EMAIL_PORT loaded with value from environment variable.
+api-1  | EMAIL_FROM loaded with value from environment variable.
+api-1  | EMAIL_USE_TLS loaded with value from environment variable.
+api-1  | EMAIL_USE_SSL loaded with value from environment variable.
+api-1  | OPENAI_API_KEY loaded with value from environment variable.
+api-1  | GPT_ENGINE loaded with value from environment variable.
+api-1  | UNSPLASH_ACCESS_KEY loaded with value from environment variable.
+api-1  | Checking bucket...
+api-1  | Bucket 'uploads' does not exist. Creating bucket...
+api-1  | Bucket 'uploads' created successfully.
+api-1  | Public read access policy set for bucket 'uploads'.
+api-1  | Cache Cleared
+api-1  | [2024-05-02 03:56:01 +0000] [1] [INFO] Starting gunicorn 21.2.0
+api-1  | [2024-05-02 03:56:01 +0000] [1] [INFO] Listening at: http://0.0.0.0:8000 (1)
+api-1  | [2024-05-02 03:56:01 +0000] [1] [INFO] Using worker: uvicorn.workers.UvicornWorker
+api-1  | [2024-05-02 03:56:01 +0000] [25] [INFO] Booting worker with pid: 25
+api-1  | [2024-05-02 03:56:03 +0000] [25] [INFO] Started server process [25]
+api-1  | [2024-05-02 03:56:03 +0000] [25] [INFO] Waiting for application startup.
+api-1  | [2024-05-02 03:56:03 +0000] [25] [INFO] ASGI 'lifespan' protocol appears unsupported.
+api-1  | [2024-05-02 03:56:03 +0000] [25] [INFO] Application startup complete.
+
+```
+
+To exit this, use `CTRL+C` and then you will land on to the main-menu with the list of actions. 
+
+Similarly, you can view the logs of other services. 
+
+---
+
+### Backup Data (Docker Compose)
+
+There would a time when you might want to backup your data from docker volumes to external storage like S3 or drives.
+
+Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `7` to Backup the data.
+
+```bash
+Select a Action you want to perform:
+   1) Install (x86_64)
+   2) Start
+   3) Stop
+   4) Restart
+   5) Upgrade
+   6) View Logs
+   7) Backup Data
+   8) Exit
+
+Action [2]: 7
+```
+
+In response, you can find the backup folder
+
+```bash
+Backing Up plane-app_pgdata
+Backing Up plane-app_redisdata
+Backing Up plane-app_uploads
+
+Backup completed successfully. Backup files are stored in /....../plane-app/backup/20240502-1120
+```
+
+---
+
+### Restore Data (Docker Compose)
+
+When you want to restore the previously backed-up data, follow the instructions below.
+
+1. Make sure that Plane-CE is installed, started, and then stopped. This ensures that the Docker volumes are created.
+
+1. Download the restore script using the command below. We suggest downloading it in the same folder as `setup.sh`.
+
+   ```bash
+   curl -fsSL -o restore.sh https://github.com/makeplane/plane/releases/latest/download/restore.sh
+   chmod +x restore.sh
+   ```
+
+1. Execute the command below to restore your data.
+
+   ```bash
+   ./restore.sh <path to backup folder containing *.tar.gz files>
+   ```
+
+   As an example, for a backup folder `/opt/plane-selfhost/plane-app/backup/20240722-0914`, expect the response below:
+
+   ```bash
+   --------------------------------------------
+    ____  _                          ///////// 
+   |  _ \| | __ _ _ __   ___         ///////// 
+   | |_) | |/ _` | '_ \ / _ \   /////    ///// 
+   |  __/| | (_| | | | |  __/   /////    ///// 
+   |_|   |_|\__,_|_| |_|\___|        ////      
+                                    ////      
+   --------------------------------------------
+   Project management tool from the future
+   --------------------------------------------
+   Found /opt/plane-selfhost/plane-app/backup/20240722-0914/pgdata.tar.gz
+   .....Restoring plane-app_pgdata
+   .....Successfully restored volume plane-app_pgdata from pgdata.tar.gz
+
+   Found /opt/plane-selfhost/plane-app/backup/20240722-0914/redisdata.tar.gz
+   .....Restoring plane-app_redisdata
+   .....Successfully restored volume plane-app_redisdata from redisdata.tar.gz
+
+   Found /opt/plane-selfhost/plane-app/backup/20240722-0914/uploads.tar.gz
+   .....Restoring plane-app_uploads
+   .....Successfully restored volume plane-app_uploads from uploads.tar.gz
+
+
+   Restore completed successfully.
+   ```
+
+1. Start the Plane instance using `./setup.sh start`.
+
+---
+
+### Restore for Commercial Air-Gapped (Docker Compose)
+
+When you want to restore the previously backed-up data on Plane Commercial Air-Gapped version, follow the instructions below.
+
+1. Download the restore script using the command below
+
+   ```bash
+   curl -fsSL -o restore-airgapped.sh https://github.com/makeplane/plane/releases/latest/download/restore-airgapped.sh
+   chmod +x restore-airgapped.sh
+   ```
+
+1. Copy the backup folder and the `restore-airgapped.sh` to `Commercial Airgapped Edition` server
+
+1. Make sure that Plane Commercial (Airgapped) is extracted and ready to get started. In case it is running, you would need to stop that.
+
+1. Execute the command below to restore your data.
+
+   ```bash
+   ./restore-airgapped.sh <path to backup folder containing *.tar.gz files>
+   ```
+
+1. After restoration, you are ready to start Plane Commercial (Airgapped) will all your previously saved data. 
+
+---
+
+<details>
+   <summary><h2>Upgrading from v0.13.2 to v0.14.x</h2></summary>
+
+This is one time activity for users who are upgrading from v0.13.2 to v0.14.0
+
+As there has been significant changes to Self Hosting process, this step mainly covers the data migration from current (v0.13.2) docker volumes from newly created volumes
+
+> Before we begin with migration, make sure your v0.14.0 was started and then stopped. This is required to know the newly created docker volume names.
+
+Begin with downloading the migration script using below command
+
+```
+
+curl -fsSL -o migrate.sh https://raw.githubusercontent.com/makeplane/plane/master/deploy/selfhost/migration-0.13-0.14.sh
+
+chmod +x migrate.sh
+
+```
+
+Now run the `./migrate.sh` command and expect the instructions as below
+
+```
+******************************************************************
+
+This script is solely for the migration purpose only.
+This is a 1 time migration of volume data from v0.13.2 => v0.14.x
+
+Assumption:
+1. Postgres data volume name ends with _pgdata
+2. Minio data volume name ends with _uploads
+3. Redis data volume name ends with _redisdata
+
+Any changes to this script can break the migration.
+
+Before you proceed, make sure you run the below command
+to know the docker volumes
+
+docker volume ls -q | grep -i "_pgdata"
+docker volume ls -q | grep -i "_uploads"
+docker volume ls -q | grep -i "_redisdata"
+
+*******************************************************
+
+Given below list of REDIS volumes, identify the prefix of source and destination volumes leaving "_redisdata"
+---------------------
+plane-app_redisdata
+v0132_redisdata
+
+Provide the Source Volume Prefix :
+```
+
+**Open another terminal window**, and run the mentioned 3 command. This may be different for users who have changed the volume names in their previous setup (v0.13.2)
+
+For every command you must see 2 records something like shown in above example of `redisdata`
+
+To move forward, you would need PREFIX of old setup and new setup. As per above example, `v0132` is the prefix of v0.13.2 and `plane-app` is the prefix of v0.14.0 setup
+
+**Back to original terminal window**, _Provide the Source Volume Prefix_ and hit ENTER.
+
+Now you will be prompted to _Provide Destination Volume Prefix_. Provide the value and hit ENTER
+
+```
+Provide the Source Volume Prefix : v0132
+Provide the Destination Volume Prefix : plane-app
+```
+
+In case the suffixes are wrong or the mentioned volumes are not found, you will receive the error shown below. The image below displays an error for source volumes.
+
+![Migrate Error](images/migrate-error.png)
+
+In case of successful migration, it will be a silent exit without error.
+
+Now its time to restart v0.14.0 setup.
+</details>
\ No newline at end of file
diff --git a/deployments/cli/community/build.yml b/deployments/cli/community/build.yml
new file mode 100644
index 0000000..f7fc6a5
--- /dev/null
+++ b/deployments/cli/community/build.yml
@@ -0,0 +1,36 @@
+services:
+  web:
+    image: ${DOCKERHUB_USER:-local}/plane-frontend:${APP_RELEASE:-latest}
+    build:
+      context: ../../
+      dockerfile: apps/web/Dockerfile.web
+
+  space:
+    image: ${DOCKERHUB_USER:-local}/plane-space:${APP_RELEASE:-latest}
+    build:
+      context: ../../
+      dockerfile: apps/space/Dockerfile.space
+
+  admin:
+    image: ${DOCKERHUB_USER:-local}/plane-admin:${APP_RELEASE:-latest}
+    build:
+      context: ../../
+      dockerfile: apps/admin/Dockerfile.admin
+
+  live:
+    image: ${DOCKERHUB_USER:-local}/plane-live:${APP_RELEASE:-latest}
+    build:
+      context: ../../
+      dockerfile: apps/live/Dockerfile.live
+
+  api:
+    image: ${DOCKERHUB_USER:-local}/plane-backend:${APP_RELEASE:-latest}
+    build:
+      context: ../../apps/api
+      dockerfile: Dockerfile.api
+
+  proxy:
+    image: ${DOCKERHUB_USER:-local}/plane-proxy:${APP_RELEASE:-latest}
+    build:
+      context: ../../apps/proxy
+      dockerfile: Dockerfile.ce
diff --git a/deployments/cli/community/docker-compose.yml b/deployments/cli/community/docker-compose.yml
new file mode 100644
index 0000000..cd41be8
--- /dev/null
+++ b/deployments/cli/community/docker-compose.yml
@@ -0,0 +1,257 @@
+x-db-env: &db-env
+  PGHOST: ${PGHOST:-plane-db}
+  PGDATABASE: ${PGDATABASE:-plane}
+  POSTGRES_USER: ${POSTGRES_USER:-plane}
+  POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-plane}
+  POSTGRES_DB: ${POSTGRES_DB:-plane}
+  POSTGRES_PORT: ${POSTGRES_PORT:-5432}
+  PGDATA: ${PGDATA:-/var/lib/postgresql/data}
+
+x-redis-env: &redis-env
+  REDIS_HOST: ${REDIS_HOST:-plane-redis}
+  REDIS_PORT: ${REDIS_PORT:-6379}
+  REDIS_URL: ${REDIS_URL:-redis://plane-redis:6379/}
+
+x-minio-env: &minio-env
+  MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID:-access-key}
+  MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY:-secret-key}
+
+x-aws-s3-env: &aws-s3-env
+  AWS_REGION: ${AWS_REGION:-}
+  AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID:-access-key}
+  AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY:-secret-key}
+  AWS_S3_ENDPOINT_URL: ${AWS_S3_ENDPOINT_URL:-http://plane-minio:9000}
+  AWS_S3_BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
+
+x-proxy-env: &proxy-env
+  APP_DOMAIN: ${APP_DOMAIN:-localhost}
+  FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
+  CERT_EMAIL: ${CERT_EMAIL}
+  CERT_ACME_CA: ${CERT_ACME_CA}
+  CERT_ACME_DNS: ${CERT_ACME_DNS}
+  LISTEN_HTTP_PORT: ${LISTEN_HTTP_PORT:-80}
+  LISTEN_HTTPS_PORT: ${LISTEN_HTTPS_PORT:-443}
+  BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
+  SITE_ADDRESS: ${SITE_ADDRESS:-:80}
+
+x-mq-env: &mq-env # RabbitMQ Settings
+  RABBITMQ_HOST: ${RABBITMQ_HOST:-plane-mq}
+  RABBITMQ_PORT: ${RABBITMQ_PORT:-5672}
+  RABBITMQ_DEFAULT_USER: ${RABBITMQ_USER:-plane}
+  RABBITMQ_DEFAULT_PASS: ${RABBITMQ_PASSWORD:-plane}
+  RABBITMQ_DEFAULT_VHOST: ${RABBITMQ_VHOST:-plane}
+  RABBITMQ_VHOST: ${RABBITMQ_VHOST:-plane}
+
+x-live-env: &live-env
+  API_BASE_URL: ${API_BASE_URL:-http://api:8000}
+  LIVE_SERVER_SECRET_KEY: ${LIVE_SERVER_SECRET_KEY}
+
+x-app-env: &app-env
+  WEB_URL: ${WEB_URL:-http://localhost}
+  DEBUG: ${DEBUG:-0}
+  CORS_ALLOWED_ORIGINS: ${CORS_ALLOWED_ORIGINS}
+  GUNICORN_WORKERS: 1
+  USE_MINIO: ${USE_MINIO:-1}
+  DATABASE_URL: ${DATABASE_URL:-postgresql://plane:plane@plane-db/plane}
+  SECRET_KEY: ${SECRET_KEY}
+  AMQP_URL: ${AMQP_URL:-amqp://plane:plane@plane-mq:5672/plane}
+  API_KEY_RATE_LIMIT: ${API_KEY_RATE_LIMIT:-60/minute}
+  MINIO_ENDPOINT_SSL: ${MINIO_ENDPOINT_SSL:-0}
+  LIVE_SERVER_SECRET_KEY: ${LIVE_SERVER_SECRET_KEY}
+  WEBHOOK_ALLOWED_IPS: ${WEBHOOK_ALLOWED_IPS:-}
+  WEBHOOK_ALLOWED_HOSTS: ${WEBHOOK_ALLOWED_HOSTS:-}
+
+services:
+  web:
+    image: makeplane/plane-frontend:${APP_RELEASE:-stable}
+    deploy:
+      replicas: ${WEB_REPLICAS:-1}
+      restart_policy:
+        condition: any
+    depends_on:
+      - api
+      - worker
+
+  space:
+    image: makeplane/plane-space:${APP_RELEASE:-stable}
+    deploy:
+      replicas: ${SPACE_REPLICAS:-1}
+      restart_policy:
+        condition: any
+    depends_on:
+      - api
+      - worker
+      - web
+
+  admin:
+    image: makeplane/plane-admin:${APP_RELEASE:-stable}
+    deploy:
+      replicas: ${ADMIN_REPLICAS:-1}
+      restart_policy:
+        condition: any
+    depends_on:
+      - api
+      - web
+
+  live:
+    image: makeplane/plane-live:${APP_RELEASE:-stable}
+    environment:
+      <<: [*live-env, *redis-env]
+    deploy:
+      replicas: ${LIVE_REPLICAS:-1}
+      restart_policy:
+        condition: any
+    depends_on:
+      - api
+      - web
+
+  api:
+    image: makeplane/plane-backend:${APP_RELEASE:-stable}
+    command: ./bin/docker-entrypoint-api.sh
+    deploy:
+      replicas: ${API_REPLICAS:-1}
+      restart_policy:
+        condition: any
+    volumes:
+      - logs_api:/code/plane/logs
+    environment:
+      <<: [*app-env, *db-env, *redis-env, *minio-env, *aws-s3-env, *proxy-env]
+    depends_on:
+      - plane-db
+      - plane-redis
+      - plane-mq
+
+  worker:
+    image: makeplane/plane-backend:${APP_RELEASE:-stable}
+    command: ./bin/docker-entrypoint-worker.sh
+    deploy:
+      replicas: ${WORKER_REPLICAS:-1}
+      restart_policy:
+        condition: any
+    volumes:
+      - logs_worker:/code/plane/logs
+    environment:
+      <<: [*app-env, *db-env, *redis-env, *minio-env, *aws-s3-env, *proxy-env]
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+      - plane-mq
+
+  beat-worker:
+    image: makeplane/plane-backend:${APP_RELEASE:-stable}
+    command: ./bin/docker-entrypoint-beat.sh
+    deploy:
+      replicas: ${BEAT_WORKER_REPLICAS:-1}
+      restart_policy:
+        condition: any
+    volumes:
+      - logs_beat-worker:/code/plane/logs
+    environment:
+      <<: [*app-env, *db-env, *redis-env, *minio-env, *aws-s3-env, *proxy-env]
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+      - plane-mq
+
+  migrator:
+    image: makeplane/plane-backend:${APP_RELEASE:-stable}
+    command: ./bin/docker-entrypoint-migrator.sh
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: on-failure
+    volumes:
+      - logs_migrator:/code/plane/logs
+    environment:
+      <<: [*app-env, *db-env, *redis-env, *minio-env, *aws-s3-env, *proxy-env]
+    depends_on:
+      - plane-db
+      - plane-redis
+
+  # Comment this if you already have a database running
+  plane-db:
+    image: postgres:15.7-alpine
+    command: postgres -c 'max_connections=1000'
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: any
+    environment:
+      <<: *db-env
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+
+  plane-redis:
+    image: valkey/valkey:7.2.11-alpine
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: any
+    volumes:
+      - redisdata:/data
+
+  plane-mq:
+    image: rabbitmq:3.13.6-management-alpine
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: any
+    environment:
+      <<: *mq-env
+    volumes:
+      - rabbitmq_data:/var/lib/rabbitmq
+
+  # Comment this if you using any external s3 compatible storage
+  plane-minio:
+    image: minio/minio:latest
+    command: server /export --console-address ":9090"
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: any
+    environment:
+      <<: *minio-env
+    volumes:
+      - uploads:/export
+
+  # Comment this if you already have a reverse proxy running
+  proxy:
+    image: makeplane/plane-proxy:${APP_RELEASE:-stable}
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: any
+    environment:
+      <<: *proxy-env
+    ports:
+      - target: 80
+        published: ${LISTEN_HTTP_PORT:-80}
+        protocol: tcp
+        mode: host
+      - target: 443
+        published: ${LISTEN_HTTPS_PORT:-443}
+        protocol: tcp
+        mode: host
+    volumes:
+      - proxy_config:/config
+      - proxy_data:/data
+    depends_on:
+      - web
+      - api
+      - space
+      - admin
+      - live
+
+volumes:
+  pgdata:
+  redisdata:
+  uploads:
+  logs_api:
+  logs_worker:
+  logs_beat-worker:
+  logs_migrator:
+  rabbitmq_data:
+  proxy_config:
+  proxy_data:
diff --git a/deployments/cli/community/images/download.png b/deployments/cli/community/images/download.png
new file mode 100644
index 0000000..bb0d118
Binary files /dev/null and b/deployments/cli/community/images/download.png differ
diff --git a/deployments/cli/community/images/migrate-error.png b/deployments/cli/community/images/migrate-error.png
new file mode 100644
index 0000000..f42ec44
Binary files /dev/null and b/deployments/cli/community/images/migrate-error.png differ
diff --git a/deployments/cli/community/images/restart.png b/deployments/cli/community/images/restart.png
new file mode 100644
index 0000000..0387599
Binary files /dev/null and b/deployments/cli/community/images/restart.png differ
diff --git a/deployments/cli/community/images/started.png b/deployments/cli/community/images/started.png
new file mode 100644
index 0000000..d6a0a0b
Binary files /dev/null and b/deployments/cli/community/images/started.png differ
diff --git a/deployments/cli/community/images/stopped.png b/deployments/cli/community/images/stopped.png
new file mode 100644
index 0000000..0f58768
Binary files /dev/null and b/deployments/cli/community/images/stopped.png differ
diff --git a/deployments/cli/community/images/upgrade.png b/deployments/cli/community/images/upgrade.png
new file mode 100644
index 0000000..b78fbbb
Binary files /dev/null and b/deployments/cli/community/images/upgrade.png differ
diff --git a/deployments/cli/community/install.sh b/deployments/cli/community/install.sh
new file mode 100755
index 0000000..accd89c
--- /dev/null
+++ b/deployments/cli/community/install.sh
@@ -0,0 +1,714 @@
+#!/bin/bash
+
+BRANCH=${BRANCH:-master}
+SCRIPT_DIR=$PWD
+SERVICE_FOLDER=plane-app
+PLANE_INSTALL_DIR=$PWD/$SERVICE_FOLDER
+export APP_RELEASE=stable
+export DOCKERHUB_USER=makeplane
+export PULL_POLICY=${PULL_POLICY:-if_not_present}
+export GH_REPO=makeplane/plane
+export RELEASE_DOWNLOAD_URL="https://github.com/$GH_REPO/releases/download"
+export FALLBACK_DOWNLOAD_URL="https://raw.githubusercontent.com/$GH_REPO/$BRANCH/deployments/cli/community"
+
+CPU_ARCH=$(uname -m)
+OS_NAME=$(uname)
+UPPER_CPU_ARCH=$(tr '[:lower:]' '[:upper:]' <<< "$CPU_ARCH")
+
+mkdir -p $PLANE_INSTALL_DIR/archive
+DOCKER_FILE_PATH=$PLANE_INSTALL_DIR/docker-compose.yaml
+DOCKER_ENV_PATH=$PLANE_INSTALL_DIR/plane.env
+
+function print_header() {
+clear
+
+cat <<"EOF"
+##+.    ##+    .##-                  
+ ######+.######-.######.              
+ #######.   -###    +#####+.          
+ #######.      +       +######.       
+ #######.              .#######       
+ #######.              .#######       
+  #######       +      .#######       
+    .+#####+    ###-   .#######       
+        .######.-#####+.+######       
+            -##.    -##    .+##
+EOF
+}
+
+function spinner() {
+    local pid=$1
+    local delay=.5
+    local spinstr='|/-\'
+
+    if ! ps -p "$pid" > /dev/null; then  
+        echo "Invalid PID: $pid"  
+        return 1  
+    fi  
+    while ps -p "$pid" > /dev/null; do  
+        local temp=${spinstr#?}
+        printf " [%c]  " "$spinstr" >&2
+        local spinstr=$temp${spinstr%"$temp"}
+        sleep $delay
+        printf "\b\b\b\b\b\b" >&2
+    done
+    printf "    \b\b\b\b" >&2
+}
+
+function checkLatestRelease(){
+    echo "Checking for the latest release..." >&2
+    local latest_release=$(curl -sSL https://api.github.com/repos/$GH_REPO/releases/latest |  grep -o '"tag_name": "[^"]*"' | sed 's/"tag_name": "//;s/"//g')
+    if [ -z "$latest_release" ]; then
+        echo "Failed to check for the latest release. Exiting..." >&2
+        exit 1
+    fi
+
+    echo $latest_release    
+}
+
+function initialize(){
+    printf "Please wait while we check the availability of Docker images for the selected release ($APP_RELEASE) with ${UPPER_CPU_ARCH} support." >&2
+
+    if [ "$CUSTOM_BUILD" == "true" ]; then
+        echo "" >&2
+        echo "" >&2
+        echo "${UPPER_CPU_ARCH} images are not available for selected release ($APP_RELEASE)." >&2
+        echo "build"
+        return 1
+    fi
+
+    local IMAGE_NAME=makeplane/plane-proxy
+    local IMAGE_TAG=${APP_RELEASE}
+    docker manifest inspect "${IMAGE_NAME}:${IMAGE_TAG}" | grep -q "\"architecture\": \"${CPU_ARCH}\"" &
+    local pid=$!
+    spinner "$pid"
+    
+    echo "" >&2
+
+    wait "$pid"
+
+    if [ $? -eq 0 ]; then
+        echo "Plane supports ${CPU_ARCH}" >&2
+        echo "available"
+        return 0
+    else
+        echo "" >&2
+        echo "" >&2
+        echo "${UPPER_CPU_ARCH} images are not available for selected release ($APP_RELEASE)." >&2
+        echo "" >&2
+        echo "build"
+        return 1
+    fi
+}
+function getEnvValue() {
+    local key=$1
+    local file=$2
+
+    if [ -z "$key" ] || [ -z "$file" ]; then
+        echo "Invalid arguments supplied"
+        exit 1
+    fi
+
+    if [ -f "$file" ]; then
+        grep -q "^$key=" "$file"
+        if [ $? -eq 0 ]; then
+            local value
+            value=$(grep "^$key=" "$file" | cut -d'=' -f2)
+            echo "$value"
+        else
+            echo ""
+        fi
+    fi
+}
+function updateEnvFile() {
+    local key=$1
+    local value=$2
+    local file=$3
+
+    if [ -z "$key" ] || [ -z "$value" ] || [ -z "$file" ]; then
+        echo "Invalid arguments supplied"
+        exit 1
+    fi
+
+    if [ -f "$file" ]; then
+        # check if key exists in the file
+        grep -q "^$key=" "$file"
+        if [ $? -ne 0 ]; then
+            echo "$key=$value" >> "$file"
+            return
+        else 
+            if [ "$OS_NAME" == "Darwin" ]; then
+                value=$(echo "$value" | sed 's/|/\\|/g')
+                sed -i '' "s|^$key=.*|$key=$value|g" "$file"
+            else
+                value=$(echo "$value" | sed 's/\//\\\//g')
+                sed -i "s/^$key=.*/$key=$value/g" "$file"
+            fi
+        fi
+    else
+        echo "File not found: $file"
+        exit 1
+    fi
+}
+
+function updateCustomVariables(){
+    echo "Updating custom variables..." >&2
+    updateEnvFile "DOCKERHUB_USER" "$DOCKERHUB_USER" "$DOCKER_ENV_PATH"
+    updateEnvFile "APP_RELEASE" "$APP_RELEASE" "$DOCKER_ENV_PATH"
+    updateEnvFile "PULL_POLICY" "$PULL_POLICY" "$DOCKER_ENV_PATH"
+    updateEnvFile "CUSTOM_BUILD" "$CUSTOM_BUILD" "$DOCKER_ENV_PATH"
+    echo "Custom variables updated successfully" >&2
+}
+
+function syncEnvFile(){
+    echo "Syncing environment variables..." >&2
+    if [ -f "$PLANE_INSTALL_DIR/plane.env.bak" ]; then
+        updateCustomVariables
+        
+        # READ keys of plane.env and update the values from plane.env.bak
+        while IFS= read -r line
+        do
+            # ignore is the line is empty or starts with #
+            if [ -z "$line" ] || [[ $line == \#* ]]; then
+                continue
+            fi
+            key=$(echo "$line" | cut -d'=' -f1)
+            value=$(getEnvValue "$key" "$PLANE_INSTALL_DIR/plane.env.bak")
+            if [ -n "$value" ]; then
+                updateEnvFile "$key" "$value" "$DOCKER_ENV_PATH"
+            fi
+        done < "$DOCKER_ENV_PATH"
+    fi
+    echo "Environment variables synced successfully" >&2
+}
+
+function buildYourOwnImage(){
+    echo "Building images locally..."
+
+    export DOCKERHUB_USER="myplane"
+    export APP_RELEASE="local"
+    export PULL_POLICY="never"
+    CUSTOM_BUILD="true"
+
+    # checkout the code to ~/tmp/plane folder and build the images
+    local PLANE_TEMP_CODE_DIR=~/tmp/plane
+    rm -rf $PLANE_TEMP_CODE_DIR
+    mkdir -p $PLANE_TEMP_CODE_DIR
+    REPO=https://github.com/$GH_REPO.git
+    git clone "$REPO" "$PLANE_TEMP_CODE_DIR"  --branch "$BRANCH" --single-branch --depth 1
+
+    cp "$PLANE_TEMP_CODE_DIR/deployments/cli/community/build.yml" "$PLANE_TEMP_CODE_DIR/build.yml"
+
+    cd "$PLANE_TEMP_CODE_DIR" || exit
+
+    /bin/bash -c "$COMPOSE_CMD -f build.yml build --no-cache"  >&2
+    if [ $? -ne 0 ]; then
+        echo "Build failed. Exiting..."
+        exit 1
+    fi
+    echo "Build completed successfully"
+    echo ""
+    echo "You can now start the services by running the command: ./setup.sh start"
+    echo ""
+}
+
+function install() {
+    echo "Begin Installing Plane"
+    echo ""
+
+    if [ "$APP_RELEASE" == "stable" ]; then
+        export APP_RELEASE=$(checkLatestRelease)
+    fi
+
+    local build_image=$(initialize)
+
+    if [ "$build_image" == "build" ]; then
+        # ask for confirmation to continue building the images
+        echo "Do you want to continue with building the Docker images locally?"
+        read -p "Continue? [y/N]: " confirm
+        if [[ ! "$confirm" =~ ^[Yy]$ ]]; then
+            echo "Exiting..."
+            exit 0
+        fi
+    fi
+
+    if [ "$build_image" == "build" ]; then
+        download "true"
+    else
+        download "false"
+    fi
+}
+
+function download() {
+    local LOCAL_BUILD=$1
+    cd $SCRIPT_DIR
+    TS=$(date +%s)
+    if [ -f "$PLANE_INSTALL_DIR/docker-compose.yaml" ]
+    then
+        mv $PLANE_INSTALL_DIR/docker-compose.yaml $PLANE_INSTALL_DIR/archive/$TS.docker-compose.yaml
+    fi
+
+    RESPONSE=$(curl -sSL -H 'Cache-Control: no-cache, no-store' -w "HTTPSTATUS:%{http_code}" "$RELEASE_DOWNLOAD_URL/$APP_RELEASE/docker-compose.yml?$(date +%s)")
+    BODY=$(echo "$RESPONSE" | sed -e 's/HTTPSTATUS\:.*//g')
+    STATUS=$(echo "$RESPONSE" | tr -d '\n' | sed -e 's/.*HTTPSTATUS://')
+
+    if [ "$STATUS" -eq 200 ]; then
+        echo "$BODY" > $PLANE_INSTALL_DIR/docker-compose.yaml
+    else
+        # Fallback to download from the raw github url
+        RESPONSE=$(curl -sSL -H 'Cache-Control: no-cache, no-store' -w "HTTPSTATUS:%{http_code}" "$FALLBACK_DOWNLOAD_URL/docker-compose.yml?$(date +%s)")
+        BODY=$(echo "$RESPONSE" | sed -e 's/HTTPSTATUS\:.*//g')
+        STATUS=$(echo "$RESPONSE" | tr -d '\n' | sed -e 's/.*HTTPSTATUS://')
+
+        if [ "$STATUS" -eq 200 ]; then
+            echo "$BODY" > $PLANE_INSTALL_DIR/docker-compose.yaml
+        else
+            echo "Failed to download docker-compose.yml. HTTP Status: $STATUS"
+            echo "URL: $RELEASE_DOWNLOAD_URL/$APP_RELEASE/docker-compose.yml"
+            mv $PLANE_INSTALL_DIR/archive/$TS.docker-compose.yaml $PLANE_INSTALL_DIR/docker-compose.yaml
+            exit 1
+        fi
+    fi
+
+    RESPONSE=$(curl -sSL -H 'Cache-Control: no-cache, no-store' -w "HTTPSTATUS:%{http_code}" "$RELEASE_DOWNLOAD_URL/$APP_RELEASE/variables.env?$(date +%s)")
+    BODY=$(echo "$RESPONSE" | sed -e 's/HTTPSTATUS\:.*//g')
+    STATUS=$(echo "$RESPONSE" | tr -d '\n' | sed -e 's/.*HTTPSTATUS://')
+
+    if [ "$STATUS" -eq 200 ]; then
+        echo "$BODY" > $PLANE_INSTALL_DIR/variables-upgrade.env
+    else
+        # Fallback to download from the raw github url
+        RESPONSE=$(curl -sSL -H 'Cache-Control: no-cache, no-store' -w "HTTPSTATUS:%{http_code}" "$FALLBACK_DOWNLOAD_URL/variables.env?$(date +%s)")
+        BODY=$(echo "$RESPONSE" | sed -e 's/HTTPSTATUS\:.*//g')
+        STATUS=$(echo "$RESPONSE" | tr -d '\n' | sed -e 's/.*HTTPSTATUS://')
+
+        if [ "$STATUS" -eq 200 ]; then
+            echo "$BODY" > $PLANE_INSTALL_DIR/variables-upgrade.env
+        else
+            echo "Failed to download variables.env. HTTP Status: $STATUS"
+            echo "URL: $RELEASE_DOWNLOAD_URL/$APP_RELEASE/variables.env"
+            mv $PLANE_INSTALL_DIR/archive/$TS.docker-compose.yaml $PLANE_INSTALL_DIR/docker-compose.yaml
+            exit 1
+        fi
+    fi
+
+    if [ -f "$DOCKER_ENV_PATH" ];
+    then
+        cp "$DOCKER_ENV_PATH" "$PLANE_INSTALL_DIR/archive/$TS.env"
+        cp "$DOCKER_ENV_PATH" "$PLANE_INSTALL_DIR/plane.env.bak"
+    fi
+
+    mv $PLANE_INSTALL_DIR/variables-upgrade.env $DOCKER_ENV_PATH
+
+    syncEnvFile
+
+    if [ "$LOCAL_BUILD" == "true" ]; then
+        export DOCKERHUB_USER="myplane"
+        export APP_RELEASE="local"
+        export PULL_POLICY="never"
+        CUSTOM_BUILD="true"
+
+        buildYourOwnImage
+
+        if [ $? -ne 0 ]; then
+            echo ""
+            echo "Build failed. Exiting..."
+            exit 1
+        fi
+        updateCustomVariables
+    else
+        CUSTOM_BUILD="false"
+        updateCustomVariables
+        /bin/bash -c "$COMPOSE_CMD -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH pull --policy always"
+
+        if [ $? -ne 0 ]; then
+            echo ""
+            echo "Failed to pull the images. Exiting..."
+            exit 1
+        fi
+    fi
+    
+    echo ""
+    echo "Most recent version of Plane is now available for you to use"
+    echo ""
+    echo "In case of 'Upgrade', please check the 'plane.env 'file for any new variables and update them accordingly"
+    echo ""
+}
+function startServices() {
+    /bin/bash -c "$COMPOSE_CMD -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH up -d --pull if_not_present --quiet-pull"
+
+    local migrator_container_id=$(docker container ls -aq -f "name=$SERVICE_FOLDER-migrator")
+    if [ -n "$migrator_container_id" ]; then
+        local idx=0
+        while docker inspect --format='{{.State.Status}}' $migrator_container_id | grep -q "running"; do
+            local message=">> Waiting for Data Migration to finish"
+            local dots=$(printf '%*s' $idx | tr ' ' '.')
+            echo -ne "\r$message$dots"
+            ((idx++))
+            sleep 1
+        done
+    fi
+    printf "\r\033[K"
+    echo ""
+    echo "   Data Migration completed successfully ✅"
+
+    # if migrator exit status is not 0, show error message and exit
+    if [ -n "$migrator_container_id" ]; then
+        local migrator_exit_code=$(docker inspect --format='{{.State.ExitCode}}' $migrator_container_id)
+        if [ $migrator_exit_code -ne 0 ]; then
+            echo "Plane Server failed to start ❌"
+            # stopServices
+            echo
+            echo "Please check the logs for the 'migrator' service and resolve the issue(s)."
+            echo "Stop the services by running the command: ./setup.sh stop"
+            exit 1
+        fi
+    fi
+
+    local api_container_id=$(docker container ls -q -f "name=$SERVICE_FOLDER-api")
+
+    # Verify container exists
+    if [ -z "$api_container_id" ]; then
+        echo "   Error: API container not found. Please check if services are running."
+        exit 1
+    fi
+
+    local idx2=0
+    local api_ready=true        # assume success, flip on timeout
+    local max_wait_time=300  # 5 minutes timeout
+    local start_time=$(date +%s)
+
+    echo "   Waiting for API Service to be ready..."
+    while ! docker exec "$api_container_id" python3 -c "import urllib.request; urllib.request.urlopen('http://localhost:8000/', timeout=3)" > /dev/null 2>&1; do
+        local current_time=$(date +%s)
+        local elapsed_time=$((current_time - start_time))
+
+        if [ $elapsed_time -gt $max_wait_time ]; then
+            echo ""
+            echo "   API Service health check timed out after 5 minutes"
+            echo "   Checking if API container is still running..."
+            if docker ps | grep -q "$SERVICE_FOLDER-api"; then
+                echo "   API container is running but did not pass the health-check. Continuing without marking it ready."
+                api_ready=false
+                break
+            else
+                echo "   API container is not running. Please check logs."
+                exit 1
+            fi
+        fi
+
+        local message=">> Waiting for API Service to Start (${elapsed_time}s)"
+        local dots=$(printf '%*s' $idx2 | tr ' ' '.')
+        echo -ne "\r$message$dots"
+        ((idx2++))
+        sleep 1
+    done
+    printf "\r\033[K"
+    if [ "$api_ready" = true ]; then
+        echo "   API Service started successfully ✅"
+    else
+        echo "   ⚠️  API Service did not respond to health-check – please verify manually."
+    fi
+    source "${DOCKER_ENV_PATH}"
+    echo "   Plane Server started successfully ✅"
+    echo ""
+    echo "   You can access the application at $WEB_URL"
+    echo ""
+
+}
+function stopServices() {
+    /bin/bash -c "$COMPOSE_CMD -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH down"
+}
+function restartServices() {
+    stopServices
+    startServices
+}
+function upgrade() {
+    local latest_release=$(checkLatestRelease)
+
+    echo ""
+    echo "Current release: $APP_RELEASE"
+
+    if [ "$latest_release" == "$APP_RELEASE" ]; then
+        echo ""
+        echo "You are already using the latest release"
+        exit 0
+    fi
+
+    echo "Latest release: $latest_release"
+    echo ""
+
+    # Check for confirmation to upgrade
+    echo "Do you want to upgrade to the latest release ($latest_release)?"
+    read -p "Continue? [y/N]: " confirm
+
+    if [[ ! "$confirm" =~ ^[Yy]$ ]]; then
+        echo "Exiting..."
+        exit 0
+    fi
+
+    export APP_RELEASE=$latest_release
+
+    echo "Upgrading Plane to the latest release..."
+    echo ""
+
+    echo "***** STOPPING SERVICES ****"
+    stopServices
+
+    echo
+    echo "***** DOWNLOADING STABLE VERSION ****"
+    install
+
+    echo "***** PLEASE VALIDATE AND START SERVICES ****"
+}
+function viewSpecificLogs(){
+    local SERVICE_NAME=$1
+
+    if /bin/bash -c "$COMPOSE_CMD -f $DOCKER_FILE_PATH ps | grep -q '$SERVICE_NAME'"; then
+        echo "Service '$SERVICE_NAME' is running."
+    else
+        echo "Service '$SERVICE_NAME' is not running."
+    fi
+
+    /bin/bash -c "$COMPOSE_CMD -f $DOCKER_FILE_PATH logs -f $SERVICE_NAME"
+}
+function viewLogs(){
+    
+    ARG_SERVICE_NAME=$2
+
+    if [ -z "$ARG_SERVICE_NAME" ];
+    then
+        echo
+        echo "Select a Service you want to view the logs for:"
+        echo "   1) Web"
+        echo "   2) Space"
+        echo "   3) API"
+        echo "   4) Worker"
+        echo "   5) Beat-Worker"
+        echo "   6) Migrator"
+        echo "   7) Proxy"
+        echo "   8) Redis"
+        echo "   9) Postgres"
+        echo "   10) Minio"
+        echo "   11) RabbitMQ"
+        echo "   0) Back to Main Menu"
+        echo 
+        read -p "Service: " DOCKER_SERVICE_NAME
+
+        until (( DOCKER_SERVICE_NAME >= 0 && DOCKER_SERVICE_NAME <= 11 )); do
+            echo "Invalid selection. Please enter a number between 0 and 11."
+            read -p "Service: " DOCKER_SERVICE_NAME
+        done
+
+        if [ -z "$DOCKER_SERVICE_NAME" ];
+        then
+            echo "INVALID SERVICE NAME SUPPLIED"
+        else
+            case $DOCKER_SERVICE_NAME in
+                1) viewSpecificLogs "web";;
+                2) viewSpecificLogs "space";;
+                3) viewSpecificLogs "api";;
+                4) viewSpecificLogs "worker";;
+                5) viewSpecificLogs "beat-worker";;
+                6) viewSpecificLogs "migrator";;
+                7) viewSpecificLogs "proxy";;
+                8) viewSpecificLogs "plane-redis";;
+                9) viewSpecificLogs "plane-db";;
+                10) viewSpecificLogs "plane-minio";;
+                11) viewSpecificLogs "plane-mq";;
+                0) askForAction;;
+                *) echo "INVALID SERVICE NAME SUPPLIED";;
+            esac
+        fi
+    elif [ -n "$ARG_SERVICE_NAME" ];
+    then
+        ARG_SERVICE_NAME=$(echo "$ARG_SERVICE_NAME" | tr '[:upper:]' '[:lower:]')
+        case $ARG_SERVICE_NAME in
+            web) viewSpecificLogs "web";;
+            space) viewSpecificLogs "space";;
+            api) viewSpecificLogs "api";;
+            worker) viewSpecificLogs "worker";;
+            beat-worker) viewSpecificLogs "beat-worker";;
+            migrator) viewSpecificLogs "migrator";;
+            proxy) viewSpecificLogs "proxy";;
+            redis) viewSpecificLogs "plane-redis";;
+            postgres) viewSpecificLogs "plane-db";;
+            minio) viewSpecificLogs "plane-minio";;
+            rabbitmq) viewSpecificLogs "plane-mq";;
+            *) echo "INVALID SERVICE NAME SUPPLIED";;
+        esac
+    else
+        echo "INVALID SERVICE NAME SUPPLIED"
+    fi
+}
+function backup_container_dir() {
+    local BACKUP_FOLDER=$1
+    local CONTAINER_NAME=$2
+    local CONTAINER_DATA_DIR=$3
+    local SERVICE_FOLDER=$4
+
+    echo "Backing up $CONTAINER_NAME data..."
+    local CONTAINER_ID=$(/bin/bash -c "$COMPOSE_CMD -f $DOCKER_FILE_PATH ps -q $CONTAINER_NAME")
+    if [ -z "$CONTAINER_ID" ]; then
+        echo "Error: $CONTAINER_NAME container not found. Make sure the services are running."
+        return 1
+    fi
+
+    # Create a temporary directory for the backup
+    mkdir -p "$BACKUP_FOLDER/$SERVICE_FOLDER"
+
+    # Copy the data directory from the running container
+    echo "Copying $CONTAINER_NAME data directory..."
+    docker cp -q "$CONTAINER_ID:$CONTAINER_DATA_DIR/." "$BACKUP_FOLDER/$SERVICE_FOLDER/"
+    local cp_status=$?
+
+    if [ $cp_status -ne 0 ]; then
+        echo "Error: Failed to copy $SERVICE_FOLDER data"
+        rm -rf $BACKUP_FOLDER/$SERVICE_FOLDER
+        return 1
+    fi
+
+    # Create tar.gz of the data
+    cd "$BACKUP_FOLDER"
+    tar -czf "${SERVICE_FOLDER}.tar.gz" "$SERVICE_FOLDER/"
+    local tar_status=$?
+    if [ $tar_status -eq 0 ]; then
+        rm -rf "$SERVICE_FOLDER/"
+    fi
+    cd - > /dev/null
+
+    if [ $tar_status -ne 0 ]; then
+        echo "Error: Failed to create tar archive"
+        return 1
+    fi
+
+    echo "Successfully backed up $SERVICE_FOLDER data"
+}
+
+function backupData() {
+    local datetime=$(date +"%Y%m%d-%H%M")
+    local BACKUP_FOLDER=$PLANE_INSTALL_DIR/backup/$datetime
+    mkdir -p "$BACKUP_FOLDER"
+
+    # Check if docker-compose.yml exists
+    if [ ! -f "$DOCKER_FILE_PATH" ]; then
+        echo "Error: docker-compose.yml not found at $DOCKER_FILE_PATH"
+        exit 1
+    fi
+
+    backup_container_dir "$BACKUP_FOLDER" "plane-db" "/var/lib/postgresql/data" "pgdata" || exit 1
+    backup_container_dir "$BACKUP_FOLDER" "plane-minio" "/export" "uploads" || exit 1
+    backup_container_dir "$BACKUP_FOLDER" "plane-mq" "/var/lib/rabbitmq" "rabbitmq_data" || exit 1
+    backup_container_dir "$BACKUP_FOLDER" "plane-redis" "/data" "redisdata" || exit 1
+
+    echo ""
+    echo "Backup completed successfully. Backup files are stored in $BACKUP_FOLDER"
+    echo ""
+}
+function askForAction() {
+    local DEFAULT_ACTION=$1
+
+    if [ -z "$DEFAULT_ACTION" ];
+    then
+        echo
+        echo "Select a Action you want to perform:"
+        echo "   1) Install"
+        echo "   2) Start"
+        echo "   3) Stop"
+        echo "   4) Restart"
+        echo "   5) Upgrade"
+        echo "   6) View Logs"
+        echo "   7) Backup Data"
+        echo "   8) Exit"
+        echo 
+        read -p "Action [2]: " ACTION
+        until [[ -z "$ACTION" || "$ACTION" =~ ^[1-8]$ ]]; do
+            echo "$ACTION: invalid selection."
+            read -p "Action [2]: " ACTION
+        done
+
+        if [ -z "$ACTION" ];
+        then
+            ACTION=2
+        fi
+        echo
+    fi
+
+    if [ "$ACTION" == "1" ] || [ "$DEFAULT_ACTION" == "install" ];
+    then
+        install
+        # askForAction
+    elif [ "$ACTION" == "2" ] || [ "$DEFAULT_ACTION" == "start" ];
+    then
+        startServices
+        # askForAction
+    elif [ "$ACTION" == "3" ] || [ "$DEFAULT_ACTION" == "stop" ];
+    then
+        stopServices
+        # askForAction
+    elif [ "$ACTION" == "4" ] || [ "$DEFAULT_ACTION" == "restart" ];
+    then
+        restartServices
+        # askForAction
+    elif [ "$ACTION" == "5" ]  || [ "$DEFAULT_ACTION" == "upgrade" ];
+    then
+        upgrade
+        # askForAction
+    elif [ "$ACTION" == "6" ]  || [ "$DEFAULT_ACTION" == "logs" ];
+    then
+        viewLogs "$@"
+        askForAction
+    elif [ "$ACTION" == "7" ]  || [ "$DEFAULT_ACTION" == "backup" ];
+    then
+        backupData
+    elif [ "$ACTION" == "8" ]
+    then
+        exit 0
+    else
+        echo "INVALID ACTION SUPPLIED"
+    fi
+}
+
+# if docker-compose is installed
+if command -v docker-compose &> /dev/null
+then
+    COMPOSE_CMD="docker-compose"
+else
+    COMPOSE_CMD="docker compose"
+fi
+
+if [ "$CPU_ARCH" == "x86_64" ] || [ "$CPU_ARCH" == "amd64" ]; then
+    CPU_ARCH="amd64"
+elif [ "$CPU_ARCH" == "aarch64" ] || [ "$CPU_ARCH" == "arm64" ]; then
+    CPU_ARCH="arm64"
+fi
+
+if [ -f "$DOCKER_ENV_PATH" ]; then
+    DOCKERHUB_USER=$(getEnvValue "DOCKERHUB_USER" "$DOCKER_ENV_PATH")
+    APP_RELEASE=$(getEnvValue "APP_RELEASE" "$DOCKER_ENV_PATH")
+    PULL_POLICY=$(getEnvValue "PULL_POLICY" "$DOCKER_ENV_PATH")
+    CUSTOM_BUILD=$(getEnvValue "CUSTOM_BUILD" "$DOCKER_ENV_PATH")
+
+    if [ -z "$DOCKERHUB_USER" ]; then
+        DOCKERHUB_USER=makeplane
+        updateEnvFile "DOCKERHUB_USER" "$DOCKERHUB_USER" "$DOCKER_ENV_PATH"
+    fi
+
+    if [ -z "$APP_RELEASE" ]; then
+        APP_RELEASE=stable
+        updateEnvFile "APP_RELEASE" "$APP_RELEASE" "$DOCKER_ENV_PATH"
+    fi
+
+    if [ -z "$PULL_POLICY" ]; then
+        PULL_POLICY=if_not_present
+        updateEnvFile "PULL_POLICY" "$PULL_POLICY" "$DOCKER_ENV_PATH"
+    fi
+
+    if [ -z "$CUSTOM_BUILD" ]; then
+        CUSTOM_BUILD=false
+        updateEnvFile "CUSTOM_BUILD" "$CUSTOM_BUILD" "$DOCKER_ENV_PATH"
+    fi
+fi
+
+print_header
+askForAction "$@"
diff --git a/deployments/cli/community/migration-0.13-0.14.sh b/deployments/cli/community/migration-0.13-0.14.sh
new file mode 100755
index 0000000..d03f877
--- /dev/null
+++ b/deployments/cli/community/migration-0.13-0.14.sh
@@ -0,0 +1,118 @@
+#!/bin/bash
+
+echo '
+******************************************************************
+
+This script is solely for the migration purpose only. 
+This is a 1 time migration of volume data from v0.13.2 => v0.14.x
+
+Assumption: 
+1. Postgres data volume name ends with _pgdata
+2. Minio data volume name ends with _uploads
+3. Redis data volume name ends with _redisdata
+
+Any changes to this script can break the migration. 
+
+Before you proceed, make sure you run the below command
+to know the docker volumes
+
+docker volume ls -q | grep -i "_pgdata"
+docker volume ls -q | grep -i "_uploads"
+docker volume ls -q | grep -i "_redisdata"
+
+*******************************************************
+'
+
+DOWNLOAD_FOL=./download
+rm -rf ${DOWNLOAD_FOL}
+mkdir -p ${DOWNLOAD_FOL}
+
+function volumeExists {
+  if [ "$(docker volume ls -f name=$1 | awk '{print $NF}' | grep -E '^'$1'$')" ]; then
+    return 0
+  else
+    return 1
+  fi
+}
+
+function readPrefixes(){
+    echo ''
+    echo 'Given below list of REDIS volumes, identify the prefix of source and destination volumes leaving "_redisdata" '
+    echo '---------------------'
+    docker volume ls -q | grep -i "_redisdata"
+    echo ''
+    
+    read -p "Provide the Source Volume Prefix : " SRC_VOL_PREFIX
+    until [ "$SRC_VOL_PREFIX"  ]; do
+        read -p "Provide the Source Volume Prefix : " SRC_VOL_PREFIX
+    done
+
+    read -p "Provide the Destination Volume Prefix : " DEST_VOL_PREFIX
+    until [ "$DEST_VOL_PREFIX"  ]; do
+        read -p "Provide the Source Volume Prefix : " DEST_VOL_PREFIX
+    done
+
+    echo ''
+    echo 'Prefix Provided '
+    echo "  Source : ${SRC_VOL_PREFIX}"
+    echo "  Destination : ${DEST_VOL_PREFIX}"
+    echo '---------------------------------------'
+}
+
+function migrate(){
+
+    SRC_VOLUME=${SRC_VOL_PREFIX}_${VOL_NAME_SUFFIX}
+    DEST_VOLUME=${DEST_VOL_PREFIX}_${VOL_NAME_SUFFIX}
+
+    if volumeExists $SRC_VOLUME; then
+        if volumeExists $DEST_VOLUME; then
+            GOOD_TO_GO=1
+        else 
+            echo "Destination Volume '$DEST_VOLUME' does not exist"
+            echo ''
+        fi
+    else
+        echo "Source Volume '$SRC_VOLUME' does not exist"
+        echo ''
+    fi
+
+    if [ $GOOD_TO_GO = 1 ]; then
+
+        echo "MIGRATING ${VOL_NAME_SUFFIX} FROM ${SRC_VOLUME} => ${DEST_VOLUME}"
+    
+        TEMP_CONTAINER=$(docker run -d -v $SRC_VOLUME:$CONTAINER_VOL_FOLDER busybox true)
+        docker cp -q $TEMP_CONTAINER:$CONTAINER_VOL_FOLDER ${DOWNLOAD_FOL}/${VOL_NAME_SUFFIX}
+        docker rm $TEMP_CONTAINER &> /dev/null
+        
+        TEMP_CONTAINER=$(docker run -d -v $DEST_VOLUME:$CONTAINER_VOL_FOLDER busybox true)
+        if [ "$VOL_NAME_SUFFIX" = "pgdata" ]; then
+            docker cp -q ${DOWNLOAD_FOL}/${VOL_NAME_SUFFIX} $TEMP_CONTAINER:$CONTAINER_VOL_FOLDER/_temp
+            docker run --rm -v $DEST_VOLUME:$CONTAINER_VOL_FOLDER \
+                    -e DATA_FOLDER="${CONTAINER_VOL_FOLDER}" \
+                    busybox /bin/sh -c 'cp -Rf $DATA_FOLDER/_temp/* $DATA_FOLDER '
+        else
+            docker cp -q ${DOWNLOAD_FOL}/${VOL_NAME_SUFFIX} $TEMP_CONTAINER:$CONTAINER_VOL_FOLDER   
+        fi
+        docker rm $TEMP_CONTAINER &> /dev/null
+
+        echo ''
+    fi
+}
+
+readPrefixes
+
+# MIGRATE DB
+CONTAINER_VOL_FOLDER=/var/lib/postgresql/data
+VOL_NAME_SUFFIX=pgdata
+migrate
+
+# MIGRATE REDIS
+CONTAINER_VOL_FOLDER=/data
+VOL_NAME_SUFFIX=redisdata
+migrate
+
+# MIGRATE MINIO
+CONTAINER_VOL_FOLDER=/export
+VOL_NAME_SUFFIX=uploads
+migrate
+
diff --git a/deployments/cli/community/restore-airgapped.sh b/deployments/cli/community/restore-airgapped.sh
new file mode 100755
index 0000000..9da02fd
--- /dev/null
+++ b/deployments/cli/community/restore-airgapped.sh
@@ -0,0 +1,144 @@
+#!/bin/bash
++set -euo pipefail
+
+function print_header() {
+clear
+
+cat <<"EOF"
+--------------------------------------------
+ ____  _                          ///////// 
+|  _ \| | __ _ _ __   ___         ///////// 
+| |_) | |/ _` | '_ \ / _ \   /////    ///// 
+|  __/| | (_| | | | |  __/   /////    ///// 
+|_|   |_|\__,_|_| |_|\___|        ////      
+                                  ////      
+--------------------------------------------
+Project management tool from the future
+--------------------------------------------
+EOF
+}
+
+function restoreData() {
+
+    echo ""
+    echo "****************************************************"
+    echo "We are about to restore your data from the backup files."
+    echo "****************************************************"
+    echo ""
+
+    # set the backup folder path
+    BACKUP_FOLDER=${1}
+
+    if [ -z "$BACKUP_FOLDER" ]; then
+        BACKUP_FOLDER="$PWD/backup"
+        read -p "Enter the backup folder path [$BACKUP_FOLDER]: " BACKUP_FOLDER
+        if [ -z "$BACKUP_FOLDER" ]; then
+            BACKUP_FOLDER="$PWD/backup"
+        fi
+    fi
+
+    # check if the backup folder exists
+    if [ ! -d "$BACKUP_FOLDER" ]; then
+        echo "Error: Backup folder not found at $BACKUP_FOLDER"
+        exit 1
+    fi
+
+    # check if there are any .tar.gz files in the backup folder
+    if ! ls "$BACKUP_FOLDER"/*.tar.gz 1> /dev/null 2>&1; then
+        echo "Error: Backup folder does not contain .tar.gz files"
+        exit 1
+    fi
+
+    echo ""
+    echo "Using backup folder: $BACKUP_FOLDER"
+    echo ""
+
+    # ask for current install path
+    AIRGAPPED_INSTALL_PATH="$HOME/planeairgapped"
+    read -p "Enter the airgapped instance install path [$AIRGAPPED_INSTALL_PATH]: " AIRGAPPED_INSTALL_PATH
+    if [ -z "$AIRGAPPED_INSTALL_PATH" ]; then
+        AIRGAPPED_INSTALL_PATH="$HOME/planeairgapped"
+    fi
+
+    # check if the airgapped instance install path exists
+    if [ ! -d "$AIRGAPPED_INSTALL_PATH" ]; then
+        echo "Error: Airgapped instance install path not found at $AIRGAPPED_INSTALL_PATH"
+        exit 1
+    fi
+
+    echo ""
+    echo "Using airgapped instance install path: $AIRGAPPED_INSTALL_PATH"
+    echo ""
+
+    # check if the docker-compose.yaml exists
+    if [ ! -f "$AIRGAPPED_INSTALL_PATH/docker-compose.yml" ]; then
+        echo "Error: docker-compose.yml not found at $AIRGAPPED_INSTALL_PATH/docker-compose.yml"
+        exit 1
+    fi
+
+    local dockerServiceStatus
+    if command -v jq &> /dev/null; then
+        dockerServiceStatus=$($COMPOSE_CMD ls --filter name=plane-airgapped --format=json | jq -r .[0].Status)
+    else
+        dockerServiceStatus=$($COMPOSE_CMD ls --filter name=plane-airgapped | grep -o "running" | head -n 1)
+    fi
+
+    if [[ $dockerServiceStatus == "running" ]]; then
+        echo "Plane Airgapped is running. Please STOP the Plane Airgapped before restoring data."
+        exit 1
+    fi
+
+    CURRENT_USER_ID=$(id -u)
+    CURRENT_GROUP_ID=$(id -g)
+
+    # if the data folder not exists, create it
+    if [ ! -d "$AIRGAPPED_INSTALL_PATH/data" ]; then
+        mkdir -p "$AIRGAPPED_INSTALL_PATH/data"
+        chown -R $CURRENT_USER_ID:$CURRENT_GROUP_ID "$AIRGAPPED_INSTALL_PATH/data"
+    fi
+
+    for BACKUP_FILE in "$BACKUP_FOLDER/*.tar.gz"; do
+        if [ -e "$BACKUP_FILE" ]; then
+
+            # get the basefilename without the extension
+            BASE_FILE_NAME=$(basename "$BACKUP_FILE" ".tar.gz")
+
+            # extract the restoreFile to the airgapped instance install path
+            echo "Restoring $BASE_FILE_NAME"
+            rm -rf "$AIRGAPPED_INSTALL_PATH/data/$BASE_FILE_NAME" || true
+            
+            tar -xvzf "$BACKUP_FILE" -C "$AIRGAPPED_INSTALL_PATH/data/"
+            if [ $? -ne 0 ]; then
+                echo "Error: Failed to extract $BACKUP_FILE"
+                exit 1
+            fi
+            chown -R $CURRENT_USER_ID:$CURRENT_GROUP_ID "$AIRGAPPED_INSTALL_PATH/data/$BASE_FILE_NAME"
+            if [ $? -ne 0 ]; then
+                echo "Error: Failed to change ownership of $AIRGAPPED_INSTALL_PATH/data/$BASE_FILE_NAME"
+                exit 1
+            fi
+        else
+            echo "No .tar.gz files found in the current directory."
+            echo ""
+            echo "Please provide the path to the backup file."
+            echo ""
+            echo "Usage: $0 /path/to/backup"  
+            exit 1
+        fi
+    done
+
+    echo ""
+    echo "Restore completed successfully."
+    echo ""
+}
+
+# if docker-compose is installed
+if command -v docker-compose &> /dev/null
+then
+    COMPOSE_CMD="docker-compose"
+else
+    COMPOSE_CMD="docker compose"
+fi
+
+print_header
+restoreData "$@"
diff --git a/deployments/cli/community/restore.sh b/deployments/cli/community/restore.sh
new file mode 100755
index 0000000..23b8de6
--- /dev/null
+++ b/deployments/cli/community/restore.sh
@@ -0,0 +1,123 @@
+#!/bin/bash
+
+function print_header() {
+clear
+
+cat <<"EOF"
+--------------------------------------------
+ ____  _                          ///////// 
+|  _ \| | __ _ _ __   ___         ///////// 
+| |_) | |/ _` | '_ \ / _ \   /////    ///// 
+|  __/| | (_| | | | |  __/   /////    ///// 
+|_|   |_|\__,_|_| |_|\___|        ////      
+                                  ////      
+--------------------------------------------
+Project management tool from the future
+--------------------------------------------
+EOF
+}
+
+function restoreSingleVolume() {
+    selectedVolume=$1
+    backupFolder=$2
+    restoreFile=$3
+
+    docker volume rm "$selectedVolume" > /dev/null 2>&1
+    
+    if [ $? -ne 0 ]; then
+        echo "Error: Failed to remove volume $selectedVolume"
+        echo ""
+        return 1
+    fi
+
+    docker volume create "$selectedVolume" > /dev/null 2>&1
+    if [ $? -ne 0 ]; then
+        echo "Error: Failed to create volume $selectedVolume"
+        echo ""
+        return 1
+    fi
+
+    docker run --rm \
+        -e TAR_NAME="$restoreFile" \
+        -v "$selectedVolume":"/vol" \
+        -v "$backupFolder":/backup \
+        busybox sh -c 'mkdir -p /restore && tar -xzf "/backup/${TAR_NAME}.tar.gz" -C /restore && mv /restore/${TAR_NAME}/* /vol'
+    
+    if [ $? -ne 0 ]; then
+        echo "Error: Failed to restore volume ${selectedVolume} from ${restoreFile}.tar.gz"
+        echo ""
+        return 1
+    fi
+    echo ".....Successfully restored volume $selectedVolume from ${restoreFile}.tar.gz"
+    echo ""
+}
+
+function restoreData() {
+    print_header
+    local BACKUP_FOLDER=${1:-$PWD}
+
+    local dockerServiceStatus
+    dockerServiceStatus=$($COMPOSE_CMD ls --filter name=plane-app --format=json | jq -r .[0].Status)
+    local dockerServicePrefix
+    dockerServicePrefix="running"
+
+    if [[ $dockerServiceStatus == $dockerServicePrefix* ]]; then
+        echo "Plane App is running. Please STOP the Plane App before restoring data."
+        exit 1
+    fi
+
+    local volume_suffix
+    volume_suffix="_pgdata|_redisdata|_uploads|_rabbitmq_data"
+    local volumes
+    volumes=$(docker volume ls -f "name=plane-app" --format "{{.Name}}" | grep -E "$volume_suffix")
+    # Check if there are any matching volumes
+    if [ -z "$volumes" ]; then
+        echo ".....No volumes found starting with 'plane-app'"
+        exit 1
+    fi
+    
+
+    for BACKUP_FILE in $BACKUP_FOLDER/*.tar.gz; do
+        if [ -e "$BACKUP_FILE" ]; then
+            
+            local restoreFileName
+            restoreFileName=$(basename "$BACKUP_FILE")
+            restoreFileName="${restoreFileName%.tar.gz}"
+
+            local restoreVolName
+            restoreVolName="plane-app_${restoreFileName}"
+            echo "Found $BACKUP_FILE"
+
+            local docVol
+            docVol=$(docker volume ls -f "name=$restoreVolName" --format "{{.Name}}" | grep -E "$volume_suffix")
+
+            if [ -z "$docVol" ]; then
+                echo "Skipping: No volume found with name $restoreVolName"
+            else
+                echo ".....Restoring $docVol"
+                restoreSingleVolume "$docVol" "$BACKUP_FOLDER" "$restoreFileName"
+            fi
+        else
+            echo "No .tar.gz files found in the current directory."
+            echo ""
+            echo "Please provide the path to the backup file."
+            echo ""
+            echo "Usage: ./restore.sh /path/to/backup"
+            exit 1
+        fi
+    done
+
+    echo ""
+    echo "Restore completed successfully."
+    echo ""
+}
+
+# if docker-compose is installed
+if command -v docker-compose &> /dev/null
+then
+    COMPOSE_CMD="docker-compose"
+else
+    COMPOSE_CMD="docker compose"
+fi
+
+restoreData "$@"
\ No newline at end of file
diff --git a/deployments/cli/community/variables.env b/deployments/cli/community/variables.env
new file mode 100644
index 0000000..f141d01
--- /dev/null
+++ b/deployments/cli/community/variables.env
@@ -0,0 +1,98 @@
+APP_DOMAIN=localhost
+APP_RELEASE=stable
+
+WEB_REPLICAS=1
+SPACE_REPLICAS=1
+ADMIN_REPLICAS=1
+API_REPLICAS=1
+WORKER_REPLICAS=1
+BEAT_WORKER_REPLICAS=1
+LIVE_REPLICAS=1
+
+LISTEN_HTTP_PORT=80
+LISTEN_HTTPS_PORT=443
+
+WEB_URL=http://${APP_DOMAIN}
+DEBUG=0
+CORS_ALLOWED_ORIGINS=http://${APP_DOMAIN}
+API_BASE_URL=http://api:8000
+
+#DB SETTINGS
+PGHOST=plane-db
+PGDATABASE=plane
+POSTGRES_USER=plane
+POSTGRES_PASSWORD=plane
+POSTGRES_DB=plane
+POSTGRES_PORT=5432
+PGDATA=/var/lib/postgresql/data
+DATABASE_URL=
+
+# REDIS SETTINGS
+REDIS_HOST=plane-redis
+REDIS_PORT=6379
+REDIS_URL=
+
+# RabbitMQ Settings
+RABBITMQ_HOST=plane-mq
+RABBITMQ_PORT=5672
+RABBITMQ_USER=plane
+RABBITMQ_PASSWORD=plane
+RABBITMQ_VHOST=plane
+AMQP_URL=
+
+# If SSL Cert to be generated, set CERT_EMAIl="email <EMAIL_ADDRESS>"
+CERT_ACME_CA=https://acme-v02.api.letsencrypt.org/directory
+TRUSTED_PROXIES=0.0.0.0/0
+SITE_ADDRESS=:80
+CERT_EMAIL=
+
+
+
+# For DNS Challenge based certificate generation, set the CERT_ACME_DNS, CERT_EMAIL
+# CERT_ACME_DNS="acme_dns <CERT_DNS_PROVIDER> <CERT_DNS_PROVIDER_API_KEY>"
+CERT_ACME_DNS=
+
+
+# Secret Key — change this before deploying to production.
+# Generate a secure value with: python3 -c "from django.utils.crypto import get_random_secret_key; print(get_random_secret_key())"
+# or: openssl rand -hex 32
+SECRET_KEY=change-this-key-on-deployment
+
+# DATA STORE SETTINGS
+USE_MINIO=1
+AWS_REGION=
+AWS_ACCESS_KEY_ID=access-key
+AWS_SECRET_ACCESS_KEY=secret-key
+AWS_S3_ENDPOINT_URL=http://plane-minio:9000
+AWS_S3_BUCKET_NAME=uploads
+FILE_SIZE_LIMIT=5242880
+
+# Gunicorn Workers
+GUNICORN_WORKERS=1
+
+# UNCOMMENT `DOCKER_PLATFORM` IF YOU ARE ON `ARM64` AND DOCKER IMAGE IS NOT AVAILABLE FOR RESPECTIVE `APP_RELEASE`
+# DOCKER_PLATFORM=linux/amd64
+
+# Force HTTPS for handling SSL Termination
+MINIO_ENDPOINT_SSL=0
+
+# API key rate limit
+API_KEY_RATE_LIMIT=60/minute
+
+# Per-IP throttle for anonymous authentication endpoints (magic-link
+# generate / sign-in / sign-up, email sign-in). DRF format: "<n>/<period>"
+# where period is second/minute/hour/day.
+AUTHENTICATION_RATE_LIMIT=10/minute
+
+# Live server environment variables — change this before deploying to production.
+# Generate a secure value with: openssl rand -hex 32
+LIVE_SERVER_SECRET_KEY=change-this-key-on-deployment
+
+# Webhook IP allowlist — comma-separated IPs or CIDR ranges allowed as webhook targets
+# even if they resolve to private networks (e.g. "10.0.0.0/8,192.168.1.0/24,172.16.0.5")
+WEBHOOK_ALLOWED_IPS=
+
+# Webhook hostname allowlist — comma-separated hostnames that bypass the private-IP
+# SSRF check. Useful for trusted internal services whose container/service IPs are
+# dynamic (e.g. "silo,silo.namespace.svc.cluster.local")
+WEBHOOK_ALLOWED_HOSTS=
diff --git a/deployments/kubernetes/community/README.md b/deployments/kubernetes/community/README.md
new file mode 100644
index 0000000..c1000c7
--- /dev/null
+++ b/deployments/kubernetes/community/README.md
@@ -0,0 +1,5 @@
+# Helm Chart: Plane Community
+
+Click on the below link to access the helm chart instructions.
+
+[![Artifact Hub](https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/makeplane)](https://artifacthub.io/packages/helm/makeplane/plane-ce)
diff --git a/deployments/swarm/community/swarm.sh b/deployments/swarm/community/swarm.sh
new file mode 100755
index 0000000..02f170f
--- /dev/null
+++ b/deployments/swarm/community/swarm.sh
@@ -0,0 +1,611 @@
+#!/bin/bash
+
+BRANCH=${BRANCH:-master}
+SERVICE_FOLDER=plane-app
+SCRIPT_DIR=$PWD
+PLANE_INSTALL_DIR=$PWD/$SERVICE_FOLDER
+export APP_RELEASE="stable"
+export DOCKERHUB_USER=makeplane
+
+export GH_REPO=makeplane/plane
+export RELEASE_DOWNLOAD_URL="https://github.com/$GH_REPO/releases/download"
+export FALLBACK_DOWNLOAD_URL="https://raw.githubusercontent.com/$GH_REPO/$BRANCH/deployments/cli/community"
+
+OS_NAME=$(uname)
+
+# Create necessary directories
+mkdir -p $PLANE_INSTALL_DIR/archive
+
+DOCKER_FILE_PATH=$PLANE_INSTALL_DIR/docker-compose.yml
+DOCKER_ENV_PATH=$PLANE_INSTALL_DIR/plane.env
+
+function print_header() {
+clear
+
+cat <<"EOF"
+--------------------------------------------
+ ____  _                          ///////// 
+|  _ \| | __ _ _ __   ___         ///////// 
+| |_) | |/ _` | '_ \ / _ \   /////    ///// 
+|  __/| | (_| | | | |  __/   /////    ///// 
+|_|   |_|\__,_|_| |_|\___|        ////      
+                                  ////      
+--------------------------------------------
+Project management tool from the future
+--------------------------------------------
+EOF
+}
+
+function checkLatestRelease(){
+    echo "Checking for the latest release..." >&2
+    local latest_release=$(curl -s https://api.github.com/repos/$GH_REPO/releases/latest |  grep -o '"tag_name": "[^"]*"' | sed 's/"tag_name": "//;s/"//g')
+    if [ -z "$latest_release" ]; then
+        echo "Failed to check for the latest release. Exiting..." >&2
+        exit 1
+    fi
+
+    echo $latest_release    
+}
+
+# Function to read stack name from env file
+function readStackName() {
+    if [ -f "$DOCKER_ENV_PATH" ]; then
+        local saved_stack_name=$(grep "^STACK_NAME=" "$DOCKER_ENV_PATH" | cut -d'=' -f2)
+        if [ -n "$saved_stack_name" ]; then
+            stack_name=$saved_stack_name
+            return 1
+        fi
+    fi
+    return 0
+}
+
+# Function to get stack name (either from env or user input)
+function getStackName() {
+    read -p "Enter stack name [plane]: " input_stack_name
+    if [ -z "$input_stack_name" ]; then
+        input_stack_name="plane"
+    fi
+    stack_name=$input_stack_name
+    updateEnvFile "STACK_NAME" "$stack_name" "$DOCKER_ENV_PATH"
+    echo "Using stack name: $stack_name"
+}
+
+function syncEnvFile(){
+    echo "Syncing environment variables..." >&2
+    if [ -f "$PLANE_INSTALL_DIR/plane.env.bak" ]; then        
+        # READ keys of plane.env and update the values from plane.env.bak
+        while IFS= read -r line
+        do
+            # ignore if the line is empty or starts with #
+            if [ -z "$line" ] || [[ $line == \#* ]]; then
+                continue
+            fi
+            key=$(echo "$line" | cut -d'=' -f1)
+            value=$(getEnvValue "$key" "$PLANE_INSTALL_DIR/plane.env.bak")
+            if [ -n "$value" ]; then
+                updateEnvFile "$key" "$value" "$DOCKER_ENV_PATH"
+            fi
+        done < "$DOCKER_ENV_PATH"
+
+        value=$(getEnvValue "STACK_NAME" "$PLANE_INSTALL_DIR/plane.env.bak")
+        if [ -n "$value" ]; then
+            updateEnvFile "STACK_NAME" "$value" "$DOCKER_ENV_PATH"
+        fi
+    fi
+    echo "Environment variables synced successfully" >&2
+    rm -f $PLANE_INSTALL_DIR/plane.env.bak
+}
+
+function getEnvValue() {
+    local key=$1
+    local file=$2
+
+    if [ -z "$key" ] || [ -z "$file" ]; then
+        echo "Invalid arguments supplied"
+        exit 1
+    fi
+
+    if [ -f "$file" ]; then
+        grep -q "^$key=" "$file"
+        if [ $? -eq 0 ]; then
+            local value
+            value=$(grep "^$key=" "$file" | cut -d'=' -f2)
+            echo "$value"
+        else
+            echo ""
+        fi
+    fi
+}
+
+function updateEnvFile() {
+    local key=$1
+    local value=$2
+    local file=$3
+
+    if [ -z "$key" ] || [ -z "$value" ] || [ -z "$file" ]; then
+        echo "Invalid arguments supplied"
+        exit 1
+    fi
+
+    if [ -f "$file" ]; then
+        # check if key exists in the file
+        grep -q "^$key=" "$file"
+        if [ $? -ne 0 ]; then
+            echo "$key=$value" >> "$file"
+            return
+        else 
+            if [ "$OS_NAME" == "Darwin" ]; then
+                value=$(echo "$value" | sed 's/|/\\|/g')
+                sed -i '' "s|^$key=.*|$key=$value|g" "$file"
+            else
+                sed -i "s/^$key=.*/$key=$value/g" "$file"
+            fi
+        fi
+    else
+        echo "File not found: $file"
+        exit 1
+    fi
+}
+
+function download() {
+    cd $SCRIPT_DIR || exit 1  
+    TS=$(date +%s)
+    if [ -f "$PLANE_INSTALL_DIR/docker-compose.yml" ]; then
+        mv $PLANE_INSTALL_DIR/docker-compose.yml $PLANE_INSTALL_DIR/archive/$TS.docker-compose.yml
+    fi
+
+    echo $RELEASE_DOWNLOAD_URL
+    echo $FALLBACK_DOWNLOAD_URL
+    echo $APP_RELEASE
+
+    RESPONSE=$(curl -H 'Cache-Control: no-cache, no-store' -s -w "HTTPSTATUS:%{http_code}" "$RELEASE_DOWNLOAD_URL/$APP_RELEASE/docker-compose.yml?$(date +%s)")
+    BODY=$(echo "$RESPONSE" | sed -e 's/HTTPSTATUS\:.*//g')
+    STATUS=$(echo "$RESPONSE" | tr -d '\n' | sed -e 's/.*HTTPSTATUS://')
+
+    if [ "$STATUS" -eq 200 ]; then
+        echo "$BODY" > $PLANE_INSTALL_DIR/docker-compose.yml
+    else
+        # Fallback to download from the raw github url
+        RESPONSE=$(curl -H 'Cache-Control: no-cache, no-store' -s -w "HTTPSTATUS:%{http_code}" "$FALLBACK_DOWNLOAD_URL/docker-compose.yml?$(date +%s)")
+        BODY=$(echo "$RESPONSE" | sed -e 's/HTTPSTATUS\:.*//g')
+        STATUS=$(echo "$RESPONSE" | tr -d '\n' | sed -e 's/.*HTTPSTATUS://')
+
+        if [ "$STATUS" -eq 200 ]; then
+            echo "$BODY" > $PLANE_INSTALL_DIR/docker-compose.yml
+        else
+            echo "Failed to download docker-compose.yml. HTTP Status: $STATUS"
+            echo "URL: $RELEASE_DOWNLOAD_URL/$APP_RELEASE/docker-compose.yml"
+            mv $PLANE_INSTALL_DIR/archive/$TS.docker-compose.yml $PLANE_INSTALL_DIR/docker-compose.yml
+            exit 1
+        fi
+    fi
+
+    RESPONSE=$(curl -H 'Cache-Control: no-cache, no-store' -s -w "HTTPSTATUS:%{http_code}" "$RELEASE_DOWNLOAD_URL/$APP_RELEASE/variables.env?$(date +%s)")
+    BODY=$(echo "$RESPONSE" | sed -e 's/HTTPSTATUS\:.*//g')
+    STATUS=$(echo "$RESPONSE" | tr -d '\n' | sed -e 's/.*HTTPSTATUS://')
+
+    if [ "$STATUS" -eq 200 ]; then
+        echo "$BODY" > $PLANE_INSTALL_DIR/variables-upgrade.env
+    else
+        # Fallback to download from the raw github url
+        RESPONSE=$(curl -H 'Cache-Control: no-cache, no-store' -s -w "HTTPSTATUS:%{http_code}" "$FALLBACK_DOWNLOAD_URL/variables.env?$(date +%s)")
+        BODY=$(echo "$RESPONSE" | sed -e 's/HTTPSTATUS\:.*//g')
+        STATUS=$(echo "$RESPONSE" | tr -d '\n' | sed -e 's/.*HTTPSTATUS://')
+
+        if [ "$STATUS" -eq 200 ]; then
+            echo "$BODY" > $PLANE_INSTALL_DIR/variables-upgrade.env
+        else
+            echo "Failed to download variables.env. HTTP Status: $STATUS"
+            echo "URL: $RELEASE_DOWNLOAD_URL/$APP_RELEASE/variables.env"
+            mv $PLANE_INSTALL_DIR/archive/$TS.docker-compose.yml $PLANE_INSTALL_DIR/docker-compose.yml
+            exit 1
+        fi
+    fi
+
+    if [ -f "$DOCKER_ENV_PATH" ];
+    then
+        cp "$DOCKER_ENV_PATH" "$PLANE_INSTALL_DIR/archive/$TS.env"
+        cp "$DOCKER_ENV_PATH" "$PLANE_INSTALL_DIR/plane.env.bak"
+    fi
+
+    mv $PLANE_INSTALL_DIR/variables-upgrade.env $DOCKER_ENV_PATH
+
+    syncEnvFile
+
+    updateEnvFile "APP_RELEASE" "$APP_RELEASE" "$DOCKER_ENV_PATH"
+
+}
+function deployStack() {   
+    # Check if docker compose file and env file exist
+    if [ ! -f "$DOCKER_FILE_PATH" ] || [ ! -f "$DOCKER_ENV_PATH" ]; then
+        echo "Configuration files not found"
+        echo "Downloading it now......"
+        APP_RELEASE=$(checkLatestRelease)
+        download
+    fi
+    if [ -z "$stack_name" ]; then
+        getStackName
+    fi
+    echo "Starting ${stack_name} stack..."
+
+    # Pull envs 
+    if [ -f "$DOCKER_ENV_PATH" ]; then
+        set -o allexport; source $DOCKER_ENV_PATH; set +o allexport;
+    else
+        echo "Environment file not found: $DOCKER_ENV_PATH"
+        exit 1
+    fi
+
+    # Deploy the stack
+    docker stack deploy -c $DOCKER_FILE_PATH $stack_name
+
+    echo "Waiting for services to be deployed..."
+    sleep 10
+
+    # Check migrator service
+    local migrator_service=$(docker service ls --filter name=${stack_name}_migrator -q)
+    if [ -n "$migrator_service" ]; then
+        echo ">> Waiting for Data Migration to finish"
+        while docker service ls --filter name=${stack_name}_migrator | grep -q "running"; do
+            echo -n "."
+            sleep 1
+        done
+        echo ""
+        
+        # Get the most recent container for the migrator service
+        local migrator_container=$(docker ps -a --filter name=${stack_name}_migrator --latest -q)
+        
+        if [ -n "$migrator_container" ]; then
+            # Get the exit code of the container
+            local exit_code=$(docker inspect --format='{{.State.ExitCode}}' $migrator_container)
+            
+            if [ "$exit_code" != "0" ]; then
+                echo "Server failed to start ❌"
+                echo "Migration failed with exit code: $exit_code"
+                echo "Please check the logs for the 'migrator' service and resolve the issue(s)."
+                echo "Stop the services by running the command: ./swarm.sh stop"
+                exit 1
+            else
+                echo "   Data Migration completed successfully ✅"
+            fi
+        else
+            echo "Warning: Could not find migrator container to check exit status"
+        fi
+    fi
+
+    # Check API service
+    local api_service=$(docker service ls --filter name=${stack_name}_api -q)
+    while docker service ls --filter name=${stack_name}_api | grep -q "running"; do
+        local running_container=$(docker ps --filter "name=${stack_name}_api" --filter "status=running" -q)
+        if [ -n "$running_container" ]; then
+            if docker container logs $running_container 2>/dev/null | grep -q "Application Startup Complete"; then
+                break
+            fi
+        fi
+        sleep 2
+    done
+
+    if [ -z "$api_service" ]; then
+        echo "Plane Server failed to start ❌"
+        echo "Please check the logs for the 'api' service and resolve the issue(s)."
+        echo "Stop the services by running the command: ./swarm.sh stop"
+        exit 1
+    fi
+    echo "   Plane Server started successfully ✅"
+    echo ""
+    echo "   You can access the application at $WEB_URL"
+    echo ""
+}
+
+function removeStack() {
+    if [ -z "$stack_name" ]; then
+        echo "Stack name not found"
+        exit 1
+    fi
+    echo "Removing ${stack_name} stack..."
+    docker stack rm "$stack_name"
+    echo "Waiting for services to be removed..."
+    while docker stack ls | grep -q "$stack_name"; do
+        sleep 1
+    done
+    sleep 20
+    echo "Services stopped successfully ✅"
+}
+
+function viewStatus() {
+    echo "Checking status of ${stack_name} stack..."
+    if [ -z "$stack_name" ]; then
+        echo "Stack name not found"
+        exit 1
+    fi
+    docker stack ps "$stack_name"
+}
+
+function redeployStack() {   
+    removeStack
+    echo "ReDeploying ${stack_name} stack..."
+    deployStack
+}
+
+function upgrade() {
+
+    echo "Checking status of ${stack_name} stack..."
+    if [ -z "$stack_name" ]; then
+        echo "Stack name not found"
+        exit 1
+    fi
+    
+    local latest_release=$(checkLatestRelease)
+
+    echo ""
+    echo "Current release: $APP_RELEASE"
+
+    if [ "$latest_release" == "$APP_RELEASE" ]; then
+        echo ""
+        echo "You are already using the latest release"
+        exit 0
+    fi
+
+    echo "Latest release: $latest_release"
+    echo ""
+
+    # Check for confirmation to upgrade
+    echo "Do you want to upgrade to the latest release ($latest_release)?"
+    read -p "Continue? [y/N]: " confirm
+
+    if [[ ! "$confirm" =~ ^[Yy]$ ]]; then
+        echo "Exiting..."
+        exit 0
+    fi
+
+    export APP_RELEASE=$latest_release
+
+    # check if stack exists
+    echo "Upgrading ${stack_name} stack..."
+
+    # check env file and take backup
+    if [ -f "$DOCKER_ENV_PATH" ]; then
+        cp "$DOCKER_ENV_PATH" "${DOCKER_ENV_PATH}.bak"
+    fi
+
+    download
+    redeployStack
+}
+
+function viewSpecificLogs() {
+    local service=$1
+    
+    # Input validation
+    if [ -z "$service" ]; then
+        echo "Error: Please specify a service name"
+        return 1
+    fi
+
+    # Main loop for service logs
+    while true; do
+        # Get all running containers for the service
+        local running_containers=$(docker ps --filter "name=${stack_name}_${service}" --filter "status=running" -q)
+
+        # If no running containers found, try service logs
+        if [ -z "$running_containers" ]; then
+            echo "No running containers found for ${stack_name}_${service}, checking service logs..."
+            if docker service inspect ${stack_name}_${service} >/dev/null 2>&1; then
+                echo "Press Ctrl+C or 'q' to exit logs"
+                docker service logs ${stack_name}_${service} -f
+                break
+            else
+                echo "Error: No running containers or services found for ${stack_name}_${service}"
+                return 1
+            fi
+            return
+        fi
+
+        # If multiple containers are running, let user choose
+        if [ $(echo "$running_containers" | grep -v '^$' | wc -l) -gt 1 ]; then
+            clear
+            echo "Multiple containers found for ${stack_name}_${service}:"
+            local i=1
+            # Use regular arrays instead of associative arrays
+            container_ids=()
+            container_names=()
+            
+            while read -r container_id; do
+                if [ -n "$container_id" ]; then
+                    local container_name=$(docker inspect --format '{{.Name}}' "$container_id" | sed 's/\///')
+                    container_ids[$i]=$container_id
+                    container_names[$i]=$container_name
+                    echo "[$i] ${container_names[$i]} (${container_ids[$i]})"
+                    i=$((i+1))
+                fi
+            done <<< "$running_containers"
+            
+            echo -e "\nPlease select a container number:"
+            read -r selection
+
+            if [[ "$selection" =~ ^[0-9]+$ ]] && [ -n "${container_ids[$selection]}" ]; then
+                local selected_container=${container_ids[$selection]}
+                clear
+                echo "Showing logs for container: ${container_names[$selection]}"
+                echo "Press Ctrl+C or 'q' to return to container selection"
+                
+                # Start watching logs in the background
+                docker container logs -f "$selected_container" &
+                local log_pid=$!
+                
+                while true; do
+                    read -r -n 1 input
+                    if [[ $input == "q" ]]; then
+                        kill $log_pid 2>/dev/null
+                        wait $log_pid 2>/dev/null
+                        break
+                    fi
+                done
+                clear
+            else
+                echo "Error: Invalid selection"
+                sleep 2
+            fi
+        else
+            # Single container case
+            local container_name=$(docker inspect --format '{{.Name}}' "$running_containers" | sed 's/\///')
+            echo "Showing logs for container: $container_name"
+            echo "Press Ctrl+C or 'q' to exit logs"
+            docker container logs -f "$running_containers" &
+            local log_pid=$!
+            
+            while true; do
+                read -r -n 1 input
+                if [[ $input == "q" ]]; then
+                    kill $log_pid 2>/dev/null
+                    wait $log_pid 2>/dev/null
+                    break
+                fi
+            done
+            break
+        fi
+    done
+}
+
+function viewLogs(){
+    
+    ARG_SERVICE_NAME=$2
+    if [ -z "$ARG_SERVICE_NAME" ];
+    then
+        echo
+        echo "Select a Service you want to view the logs for:"
+        echo "   1) Web"
+        echo "   2) Space"
+        echo "   3) API"
+        echo "   4) Worker"
+        echo "   5) Beat-Worker"
+        echo "   6) Migrator"
+        echo "   7) Proxy"
+        echo "   8) Redis"
+        echo "   9) Postgres"
+        echo "   10) Minio"
+        echo "   11) RabbitMQ"
+        echo "   0) Back to Main Menu"
+        echo 
+        read -p "Service: " DOCKER_SERVICE_NAME 
+
+        until (( DOCKER_SERVICE_NAME >= 0 && DOCKER_SERVICE_NAME <= 11 )); do
+            echo "Invalid selection. Please enter a number between 0 and 11."
+            read -p "Service: " DOCKER_SERVICE_NAME
+        done
+
+        if [ -z "$DOCKER_SERVICE_NAME" ];
+        then
+            echo "INVALID SERVICE NAME SUPPLIED"
+        else
+            case $DOCKER_SERVICE_NAME in
+                1) viewSpecificLogs "web";;
+                2) viewSpecificLogs "space";;
+                3) viewSpecificLogs "api";;
+                4) viewSpecificLogs "worker";;
+                5) viewSpecificLogs "beat-worker";;
+                6) viewSpecificLogs "migrator";;
+                7) viewSpecificLogs "proxy";;
+                8) viewSpecificLogs "plane-redis";;
+                9) viewSpecificLogs "plane-db";;
+                10) viewSpecificLogs "plane-minio";;
+                11) viewSpecificLogs "plane-mq";;
+                0) askForAction;;
+                *) echo "INVALID SERVICE NAME SUPPLIED";;
+            esac
+        fi
+    elif [ -n "$ARG_SERVICE_NAME" ];
+    then
+        ARG_SERVICE_NAME=$(echo "$ARG_SERVICE_NAME" | tr '[:upper:]' '[:lower:]')
+        case $ARG_SERVICE_NAME in
+            web) viewSpecificLogs "web";;
+            space) viewSpecificLogs "space";;
+            api) viewSpecificLogs "api";;
+            worker) viewSpecificLogs "worker";;
+            beat-worker) viewSpecificLogs "beat-worker";;
+            migrator) viewSpecificLogs "migrator";;
+            proxy) viewSpecificLogs "proxy";;
+            redis) viewSpecificLogs "plane-redis";;
+            postgres) viewSpecificLogs "plane-db";;
+            minio) viewSpecificLogs "plane-minio";;
+            rabbitmq) viewSpecificLogs "plane-mq";;
+            *) echo "INVALID SERVICE NAME SUPPLIED";;
+        esac
+    else
+        echo "INVALID SERVICE NAME SUPPLIED"
+    fi
+}
+
+
+
+function askForAction() {
+    # Rest of askForAction remains the same but use $stack_name instead of $STACK_NAME
+    local DEFAULT_ACTION=$1
+
+    if [ -z "$DEFAULT_ACTION" ]; then
+        echo
+        echo "Select an Action you want to perform:"
+        echo "   1) Deploy Stack"
+        echo "   2) Remove Stack"
+        echo "   3) View Stack Status"
+        echo "   4) Redeploy Stack"
+        echo "   5) Upgrade"
+        echo "   6) View Logs"
+        echo "   7) Exit"
+        echo 
+        read -p "Action [3]: " ACTION
+        until [[ -z "$ACTION" || "$ACTION" =~ ^[1-6]$ ]]; do
+            echo "$ACTION: invalid selection."
+            read -p "Action [3]: " ACTION
+        done
+
+        if [ -z "$ACTION" ]; then
+            ACTION=3
+        fi
+        echo
+    fi
+
+    if [ "$ACTION" == "1" ] || [ "$DEFAULT_ACTION" == "deploy" ]; then
+        deployStack
+    elif [ "$ACTION" == "2" ] || [ "$DEFAULT_ACTION" == "remove" ]; then
+        removeStack
+    elif [ "$ACTION" == "3" ] || [ "$DEFAULT_ACTION" == "status" ]; then
+        viewStatus
+    elif [ "$ACTION" == "4" ] || [ "$DEFAULT_ACTION" == "redeploy" ]; then
+        redeployStack
+    elif [ "$ACTION" == "5" ] || [ "$DEFAULT_ACTION" == "upgrade" ]; then
+        upgrade
+    elif [ "$ACTION" == "6" ] || [ "$DEFAULT_ACTION" == "logs" ]; then
+        viewLogs "$@"
+    elif [ "$ACTION" == "7" ] || [ "$DEFAULT_ACTION" == "exit" ]; then
+        exit 0
+    else
+        echo "INVALID ACTION SUPPLIED"
+    fi
+}
+
+# Initialize stack name at script start
+
+if [ -z "$stack_name" ]; then
+    readStackName
+fi
+
+# Sync environment variables
+if [ -f "$DOCKER_ENV_PATH" ]; then
+    DOCKERHUB_USER=$(getEnvValue "DOCKERHUB_USER" "$DOCKER_ENV_PATH")
+    APP_RELEASE=$(getEnvValue "APP_RELEASE" "$DOCKER_ENV_PATH")
+
+    if [ -z "$DOCKERHUB_USER" ]; then
+        DOCKERHUB_USER=makeplane
+        updateEnvFile "DOCKERHUB_USER" "$DOCKERHUB_USER" "$DOCKER_ENV_PATH"
+    fi
+
+    if [ -z "$APP_RELEASE" ]; then
+        APP_RELEASE=stable
+        updateEnvFile "APP_RELEASE" "$APP_RELEASE" "$DOCKER_ENV_PATH"
+    fi
+fi
+
+
+# Main execution
+print_header
+askForAction "$@"
diff --git a/docker-compose-local.yml b/docker-compose-local.yml
new file mode 100644
index 0000000..6bc5ee3
--- /dev/null
+++ b/docker-compose-local.yml
@@ -0,0 +1,151 @@
+services:
+  plane-redis:
+    image: valkey/valkey:7.2.11-alpine
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - redisdata:/data
+    ports:
+      - "6379:6379"
+
+  plane-mq:
+    image: rabbitmq:3.13.6-management-alpine
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - rabbitmq_data:/var/lib/rabbitmq
+    env_file:
+      - .env
+    environment:
+      RABBITMQ_DEFAULT_USER: ${RABBITMQ_USER}
+      RABBITMQ_DEFAULT_PASS: ${RABBITMQ_PASSWORD}
+      RABBITMQ_DEFAULT_VHOST: ${RABBITMQ_VHOST}
+
+  plane-minio:
+    image: minio/minio
+    restart: unless-stopped
+    networks:
+      - dev_env
+    entrypoint: >
+      /bin/sh -c "
+      mkdir -p /export/${AWS_S3_BUCKET_NAME} &&
+      minio server /export --console-address ':9090' &
+      sleep 5 &&
+      mc alias set myminio http://localhost:9000 ${AWS_ACCESS_KEY_ID} ${AWS_SECRET_ACCESS_KEY} &&
+      mc mb myminio/${AWS_S3_BUCKET_NAME} -p || true
+      && tail -f /dev/null
+      "
+    volumes:
+      - uploads:/export
+    env_file:
+      - .env
+    environment:
+      MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
+      MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
+    ports:
+      - "9000:9000"
+      - "9090:9090"
+
+  plane-db:
+    image: postgres:15.7-alpine
+    restart: unless-stopped
+    networks:
+      - dev_env
+    command: postgres -c 'max_connections=1000'
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    env_file:
+      - .env
+    environment:
+      PGDATA: /var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+
+  api:
+    build:
+      context: ./apps/api
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - ./apps/api:/code
+    command: ./bin/docker-entrypoint-api-local.sh
+    env_file:
+      - ./apps/api/.env
+    depends_on:
+      - plane-db
+      - plane-redis
+      - plane-mq
+    ports:
+      - "8000:8000"
+
+  worker:
+    build:
+      context: ./apps/api
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - ./apps/api:/code
+    command: ./bin/docker-entrypoint-worker.sh
+    env_file:
+      - ./apps/api/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  beat-worker:
+    build:
+      context: ./apps/api
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: unless-stopped
+    networks:
+      - dev_env
+    volumes:
+      - ./apps/api:/code
+    command: ./bin/docker-entrypoint-beat.sh
+    env_file:
+      - ./apps/api/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  migrator:
+    build:
+      context: ./apps/api
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: "no"
+    networks:
+      - dev_env
+    volumes:
+      - ./apps/api:/code
+    command: ./bin/docker-entrypoint-migrator.sh --settings=plane.settings.local
+    env_file:
+      - ./apps/api/.env
+    depends_on:
+      - plane-db
+      - plane-redis
+
+volumes:
+  redisdata:
+  uploads:
+  pgdata:
+  rabbitmq_data:
+
+networks:
+  dev_env:
+    driver: bridge
diff --git a/docker-compose-test.yml b/docker-compose-test.yml
new file mode 100644
index 0000000..b4cdc1f
--- /dev/null
+++ b/docker-compose-test.yml
@@ -0,0 +1,151 @@
+# Docker Compose for running the API pytest suite in a contained environment.
+#
+# Prerequisite:
+#   ./setup.sh    # creates apps/api/.env (and the other env files) from .env.example
+#
+# Usage:
+#   # Run the full suite (defaults to `pytest`):
+#   docker compose -f docker-compose-test.yml up --build --abort-on-container-exit --exit-code-from api-tests
+#
+#   # Run a subset by overriding the command:
+#   docker compose -f docker-compose-test.yml run --rm --build api-tests pytest -m unit
+#   docker compose -f docker-compose-test.yml run --rm api-tests pytest plane/tests/unit -k "test_workspace"
+#
+#   # Tear down (removes ephemeral volumes and the test network):
+#   docker compose -f docker-compose-test.yml down -v
+#
+# Notes:
+# - Postgres / Valkey / RabbitMQ / MinIO start with health checks; the test
+#   runner only starts once each dependency is healthy.
+# - Data dirs are tmpfs so every run begins from a clean state.
+# - Env vars come from apps/api/.env (the same file the local stack uses); tests
+#   use plane.settings.test, which inherits from common and reads DATABASE_URL,
+#   REDIS_URL, RABBITMQ_* etc. from the environment.
+
+services:
+  test-db:
+    image: postgres:15.7-alpine
+    networks:
+      - test_env
+    env_file:
+      - ./apps/api/.env
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER:-plane}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-plane}
+      POSTGRES_DB: ${POSTGRES_DB:-plane}
+    tmpfs:
+      - /var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-plane} -d ${POSTGRES_DB:-plane}"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+
+  test-redis:
+    image: valkey/valkey:7.2.11-alpine
+    networks:
+      - test_env
+    tmpfs:
+      - /data
+    healthcheck:
+      test: ["CMD", "valkey-cli", "ping"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+  test-mq:
+    image: rabbitmq:3.13.6-management-alpine
+    networks:
+      - test_env
+    env_file:
+      - ./apps/api/.env
+    environment:
+      RABBITMQ_DEFAULT_USER: ${RABBITMQ_USER:-plane}
+      RABBITMQ_DEFAULT_PASS: ${RABBITMQ_PASSWORD:-plane}
+      RABBITMQ_DEFAULT_VHOST: ${RABBITMQ_VHOST:-plane}
+    tmpfs:
+      - /var/lib/rabbitmq
+    healthcheck:
+      test: ["CMD", "rabbitmq-diagnostics", "-q", "ping"]
+      interval: 10s
+      timeout: 10s
+      retries: 10
+
+  test-minio:
+    image: minio/minio
+    networks:
+      - test_env
+    env_file:
+      - ./apps/api/.env
+    environment:
+      MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID:-access-key}
+      MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY:-secret-key}
+    entrypoint: >
+      /bin/sh -c "
+      mkdir -p /export/${AWS_S3_BUCKET_NAME:-uploads} &&
+      minio server /export --console-address ':9090' &
+      sleep 3 &&
+      mc alias set local http://localhost:9000 ${AWS_ACCESS_KEY_ID:-access-key} ${AWS_SECRET_ACCESS_KEY:-secret-key} &&
+      mc mb local/${AWS_S3_BUCKET_NAME:-uploads} -p || true &&
+      tail -f /dev/null
+      "
+    tmpfs:
+      - /export
+    healthcheck:
+      test: ["CMD", "mc", "ready", "local"]
+      interval: 10s
+      timeout: 5s
+      retries: 10
+
+  api-tests:
+    build:
+      context: ./apps/api
+      dockerfile: Dockerfile.dev
+      args:
+        DOCKER_BUILDKIT: 1
+    networks:
+      - test_env
+    env_file:
+      - ./apps/api/.env
+    environment:
+      DJANGO_SETTINGS_MODULE: plane.settings.test
+      # Override service hostnames to point at the test-only services above.
+      POSTGRES_HOST: test-db
+      DATABASE_URL: postgresql://${POSTGRES_USER:-plane}:${POSTGRES_PASSWORD:-plane}@test-db:5432/${POSTGRES_DB:-plane}
+      REDIS_HOST: test-redis
+      REDIS_URL: redis://test-redis:6379/
+      RABBITMQ_HOST: test-mq
+      AWS_S3_ENDPOINT_URL: http://test-minio:9000
+      # Magic-link tests mock the celery delay but the view first checks that
+      # EMAIL_HOST is configured. Set a placeholder so the check passes.
+      EMAIL_HOST: test-smtp.invalid
+    volumes:
+      - ./apps/api:/code
+    working_dir: /code
+    depends_on:
+      test-db:
+        condition: service_healthy
+      test-redis:
+        condition: service_healthy
+      test-mq:
+        condition: service_healthy
+      test-minio:
+        condition: service_healthy
+    # Install test-only requirements (not in local.txt) then exec pytest.
+    # Any args passed via `docker compose run api-tests <args>` replace the default command.
+    entrypoint:
+      - /bin/sh
+      - -c
+      - |
+        set -e
+        pip install --no-cache-dir -r requirements/test.txt
+        # STATIC_ROOT must exist or Django's static middleware emits a
+        # UserWarning on every request (~100 of the warnings in test runs).
+        mkdir -p plane/static-assets/collected-static
+        exec "$@"
+      - --
+    command: ["pytest"]
+
+networks:
+  test_env:
+    driver: bridge
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..787ba64
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,177 @@
+services:
+  web:
+    container_name: web
+    build:
+      context: .
+      dockerfile: ./apps/web/Dockerfile.web
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    depends_on:
+      - api
+
+  admin:
+    container_name: admin
+    build:
+      context: .
+      dockerfile: ./apps/admin/Dockerfile.admin
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    depends_on:
+      - api
+      - web
+
+  space:
+    container_name: space
+    build:
+      context: .
+      dockerfile: ./apps/space/Dockerfile.space
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    depends_on:
+      - api
+      - web
+
+  api:
+    container_name: api
+    build:
+      context: ./apps/api
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: ./bin/docker-entrypoint-api.sh
+    env_file:
+      - ./apps/api/.env
+    depends_on:
+      - plane-db
+      - plane-redis
+
+  worker:
+    container_name: bgworker
+    build:
+      context: ./apps/api
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: ./bin/docker-entrypoint-worker.sh
+    env_file:
+      - ./apps/api/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  beat-worker:
+    container_name: beatworker
+    build:
+      context: ./apps/api
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+    command: ./bin/docker-entrypoint-beat.sh
+    env_file:
+      - ./apps/api/.env
+    depends_on:
+      - api
+      - plane-db
+      - plane-redis
+
+  migrator:
+    container_name: plane-migrator
+    build:
+      context: ./apps/api
+      dockerfile: Dockerfile.api
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: no
+    command: ./bin/docker-entrypoint-migrator.sh
+    env_file:
+      - ./apps/api/.env
+    depends_on:
+      - plane-db
+      - plane-redis
+
+  live:
+    container_name: plane-live
+    build:
+      context: .
+      dockerfile: ./apps/live/Dockerfile.live
+      args:
+        DOCKER_BUILDKIT: 1
+    restart: always
+
+  plane-db:
+    container_name: plane-db
+    image: postgres:15.7-alpine
+    restart: always
+    command: postgres -c 'max_connections=1000'
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    env_file:
+      - .env
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_DB: ${POSTGRES_DB}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      PGDATA: /var/lib/postgresql/data
+
+  plane-redis:
+    container_name: plane-redis
+    image: valkey/valkey:7.2.11-alpine
+    restart: always
+    volumes:
+      - redisdata:/data
+
+  plane-mq:
+    container_name: plane-mq
+    image: rabbitmq:3.13.6-management-alpine
+    restart: always
+    env_file:
+      - .env
+    environment:
+      RABBITMQ_DEFAULT_USER: ${RABBITMQ_USER}
+      RABBITMQ_DEFAULT_PASS: ${RABBITMQ_PASSWORD}
+      RABBITMQ_DEFAULT_VHOST: ${RABBITMQ_VHOST}
+    volumes:
+      - rabbitmq_data:/var/lib/rabbitmq
+
+  plane-minio:
+    container_name: plane-minio
+    image: minio/minio
+    restart: always
+    command: server /export --console-address ":9090"
+    volumes:
+      - uploads:/export
+    environment:
+      MINIO_ROOT_USER: ${AWS_ACCESS_KEY_ID}
+      MINIO_ROOT_PASSWORD: ${AWS_SECRET_ACCESS_KEY}
+
+  # Comment this if you already have a reverse proxy running
+  proxy:
+    container_name: proxy
+    build:
+      context: ./apps/proxy
+      dockerfile: Dockerfile.ce
+    restart: always
+    ports:
+      - ${LISTEN_HTTP_PORT}:80
+      - ${LISTEN_HTTPS_PORT}:443
+    environment:
+      FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
+      BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
+    depends_on:
+      - web
+      - api
+      - space
+      - admin
+
+volumes:
+  pgdata:
+  redisdata:
+  uploads:
+  rabbitmq_data:
diff --git a/docs/linting.md b/docs/linting.md
new file mode 100644
index 0000000..d5cdd75
--- /dev/null
+++ b/docs/linting.md
@@ -0,0 +1,92 @@
+# Linting in Plane - How It Works
+
+We use [OxLint](https://oxc.rs/docs/guide/usage/linter) for linting across the entire monorepo. OxLint is a single Rust binary that's 50-100x faster than ESLint, with zero Node.js dependencies at runtime.
+
+## Key Points
+
+1. **Single Root Config** - One `.oxlintrc.json` at the repo root handles all packages and apps
+2. **No Build Required** - OxLint doesn't need TypeScript build artifacts, so lint runs independently of build
+3. **Plugin Coverage** - react, typescript, jsx-a11y, import, promise, unicorn, oxc
+
+## How to Run
+
+From the root of the repo:
+
+```bash
+# Check for lint errors
+pnpm check:lint
+
+# Auto-fix lint errors
+pnpm fix:lint
+```
+
+To lint a specific package:
+
+```bash
+pnpm turbo run check:lint --filter=@plane/ui
+```
+
+## VS Code Integration
+
+Install the [OxLint extension](https://marketplace.visualstudio.com/items?itemName=nicolo-ribaudo.vscode-oxlint) for inline errors/warnings as you type.
+
+## What Gets Linted
+
+The config applies to all TypeScript and JavaScript files across:
+
+- `apps/web`, `apps/admin`, `apps/space`, `apps/live`
+- All packages in `packages/`
+
+**Ignored paths:**
+
+- `node_modules/`, `dist/`, `build/`, `.next/`, `.turbo/`
+- Config files (`*.config.{js,mjs,cjs,ts}`)
+- Public folders, coverage, storybook-static
+
+## Rules Overview
+
+OxLint uses category-based configuration:
+
+| Category        | Level | What It Catches                                    |
+| --------------- | ----- | -------------------------------------------------- |
+| **correctness** | error | Real bugs that will cause runtime errors            |
+| **suspicious**  | warn  | Code patterns that are likely mistakes              |
+| **perf**        | warn  | Performance anti-patterns                           |
+
+Additional rule overrides:
+- `react/prop-types` off (TypeScript handles prop validation)
+- `no-unused-vars` warns with `_` prefix pattern ignored
+- Several noisy unicorn rules disabled
+
+## Backward Compatibility
+
+OxLint supports `eslint-disable` comments, so existing inline suppressions continue to work.
+
+## Suppressing Warnings
+
+```typescript
+// Single line
+// eslint-disable-next-line no-unused-vars
+const data = response;
+
+// Block
+/* eslint-disable no-unused-vars */
+// ... code
+/* eslint-enable no-unused-vars */
+```
+
+**Please use sparingly** - most warnings indicate real issues that should be fixed.
+
+## Pre-commit Hook
+
+Lint-staged runs automatically on commit via Husky:
+
+- oxfmt formats your staged files
+- OxLint fixes what it can (with `--deny-warnings`)
+
+If the commit fails due to lint errors, fix them before committing.
+
+## Reference Files
+
+- [.oxlintrc.json](../.oxlintrc.json) - OxLint configuration
+- [package.json](../package.json) - Available scripts
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..66760eb
--- /dev/null
+++ b/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "plane",
+  "version": "1.4.2",
+  "private": true,
+  "description": "Open-source project management that unlocks customer value",
+  "license": "AGPL-3.0",
+  "repository": "https://github.com/makeplane/plane.git",
+  "scripts": {
+    "build": "turbo run build",
+    "dev": "turbo run dev --concurrency=18",
+    "start": "turbo run start",
+    "clean": "turbo run clean && rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
+    "fix": "turbo run fix",
+    "fix:format": "turbo run fix:format",
+    "fix:lint": "turbo run fix:lint",
+    "check": "turbo run check",
+    "check:lint": "turbo run check:lint",
+    "check:format": "turbo run check:format",
+    "check:types": "turbo run check:types",
+    "prepare": "husky",
+    "doctor": "npx react-doctor@latest"
+  },
+  "devDependencies": {
+    "husky": "catalog:",
+    "lint-staged": "catalog:",
+    "oxfmt": "catalog:",
+    "oxlint": "catalog:",
+    "react-doctor": "^0.4.2",
+    "turbo": "catalog:"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts,json,css,md}": [
+      "pnpm exec oxfmt --no-error-on-unmatched-pattern"
+    ],
+    "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts}": [
+      "pnpm exec oxlint --fix --deny-warnings"
+    ]
+  },
+  "engines": {
+    "node": ">=22.22.0"
+  },
+  "packageManager": "pnpm@11.10.0+sha512.0b7f8b98060031904c017e3a41eb187a16d40eeb829b95c4f8cb03681761fc4ab53dd219115b9b447f4dce1a05a214764461e7d3703392a9f32f9511ce8c86c8"
+}
diff --git a/packages/codemods/.prettierignore b/packages/codemods/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/codemods/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/codemods/function-declaration.ts b/packages/codemods/function-declaration.ts
new file mode 100644
index 0000000..40897d8
--- /dev/null
+++ b/packages/codemods/function-declaration.ts
@@ -0,0 +1,537 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CommentKind } from "ast-types/gen/kinds";
+import {
+  API,
+  FileInfo,
+  Options,
+  JSCodeshift,
+  TSTypeReference,
+  Identifier,
+  BlockStatement,
+  Expression,
+  Pattern,
+  SpreadElement,
+  JSXNamespacedName,
+  ASTNode,
+  Node,
+  FunctionDeclaration,
+  TSType,
+  VariableDeclarator,
+  ArrowFunctionExpression,
+  FunctionExpression,
+} from "jscodeshift";
+
+const COMPONENT_TYPE_NAMES = new Set([
+  "FC",
+  "FunctionComponent",
+  "VFC",
+  "VoidFunctionComponent",
+]);
+
+const COMPONENT_NAME_PATTERN = /^[A-Z]/;
+
+function isReactComponentType(typeReference: TSTypeReference, j: JSCodeshift) {
+  const typeName = typeReference.typeName;
+
+  if (!typeName) {
+    return false;
+  }
+
+  if (j.Identifier.check(typeName)) {
+    return COMPONENT_TYPE_NAMES.has(typeName.name);
+  }
+
+  if (
+    j.TSQualifiedName.check(typeName) &&
+    j.Identifier.check(typeName.left) &&
+    j.Identifier.check(typeName.right)
+  ) {
+    return (
+      typeName.left.name === "React" &&
+      COMPONENT_TYPE_NAMES.has(typeName.right.name)
+    );
+  }
+
+  return false;
+}
+
+function isComponentNameIdentifier(identifier: Identifier | null | undefined) {
+  if (!identifier) {
+    return false;
+  }
+
+  // Must start with uppercase
+  if (!COMPONENT_NAME_PATTERN.test(identifier.name)) {
+    return false;
+  }
+
+  // Ignore CONSTANT_CASE (all uppercase)
+  if (
+    identifier.name.toUpperCase() === identifier.name &&
+    identifier.name.length > 1
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+function addComments(target: Node, comments: CommentKind[]) {
+  if (!comments || comments.length === 0) {
+    return;
+  }
+  target.comments ||= [];
+  target.comments.push(...comments);
+}
+
+function copyOuterComments(source: Node, target: Node, j: JSCodeshift) {
+  if (!j.Node.check(source) || !j.Node.check(target) || !source.comments) {
+    return;
+  }
+  const outerComments = source.comments.filter((c) => c.leading || c.trailing);
+  addComments(target, outerComments);
+}
+
+function ensureParamType(
+  param: Pattern,
+  propsType: TSType | null | undefined,
+  j: JSCodeshift
+) {
+  if (!j.Pattern.check(param)) {
+    return;
+  }
+
+  if (!("typeAnnotation" in param)) {
+    return;
+  }
+
+  if (!propsType) {
+    return;
+  }
+
+  if (j.TSTypeReference.check(propsType) && propsType.typeName) {
+    param.typeAnnotation = j.tsTypeAnnotation(
+      propsType.typeParameters
+        ? j.tsTypeReference(propsType.typeName, propsType.typeParameters)
+        : j.tsTypeReference(propsType.typeName)
+    );
+    return;
+  }
+
+  if (j.TSType.check(propsType)) {
+    // @ts-expect-error: jscodeshift types are too strict here
+    param.typeAnnotation = j.tsTypeAnnotation(propsType);
+  }
+}
+
+function toBlockBody(j: JSCodeshift, body: BlockStatement | Expression) {
+  if (j.BlockStatement.check(body)) {
+    return body;
+  }
+
+  // @ts-expect-error: jscodeshift types are too strict here
+  const returnStatement = j.returnStatement(body);
+
+  return j.blockStatement([returnStatement]);
+}
+
+function isFunction(
+  node: Node,
+  j: JSCodeshift
+): node is ArrowFunctionExpression | FunctionExpression {
+  return (
+    j.ArrowFunctionExpression.check(node) || j.FunctionExpression.check(node)
+  );
+}
+
+function extractArrowFunction(
+  init: Expression | SpreadElement | JSXNamespacedName,
+  j: JSCodeshift
+): ArrowFunctionExpression | FunctionExpression | undefined {
+  if (isFunction(init, j)) {
+    return init;
+  }
+
+  // If it's a CallExpression like observer(() => {}), extract the arrow function
+  if (j.CallExpression.check(init)) {
+    const firstArg = init.arguments?.[0];
+    if (firstArg && isFunction(firstArg, j)) {
+      return firstArg;
+    }
+  }
+
+  return;
+}
+
+function extractPropsTypeFromWrapper(
+  init: Expression | SpreadElement | JSXNamespacedName,
+  j: JSCodeshift
+) {
+  // If it's a CallExpression like observer<React.FC<Props>>((props) => {})
+  // Extract the Props type from React.FC<Props>
+  if (!j.CallExpression.check(init)) {
+    return;
+  }
+
+  if (!("typeParameters" in init)) {
+    return;
+  }
+
+  const typeParameters = init.typeParameters;
+  if (!j.TSTypeParameterInstantiation.check(typeParameters)) {
+    return;
+  }
+
+  const typeParam = typeParameters.params?.[0];
+
+  if (!typeParam) {
+    return;
+  }
+
+  if (
+    j.TSTypeReference.check(typeParam) &&
+    isReactComponentType(typeParam, j)
+  ) {
+    // Extract the generic type from React.FC<PropsType>
+    return typeParam.typeParameters?.params?.[0];
+  }
+
+  // Check for memo<Props>
+  const callee = init.callee;
+  let isMemo = false;
+  if (j.Identifier.check(callee) && callee.name === "memo") {
+    isMemo = true;
+  } else if (
+    j.MemberExpression.check(callee) &&
+    j.Identifier.check(callee.property) &&
+    callee.property.name === "memo"
+  ) {
+    isMemo = true;
+  }
+
+  if (isMemo) {
+    // For memo<Props>, the first type parameter is the props type
+    // @ts-expect-error: jscodeshift types are too strict here
+    return typeParam;
+  }
+
+  return;
+}
+
+function isReactForwardRef(
+  init: Expression | SpreadElement | JSXNamespacedName,
+  j: JSCodeshift
+) {
+  if (!j.CallExpression.check(init)) {
+    return false;
+  }
+
+  const callee = init.callee;
+
+  // Check for React.forwardRef
+  if (
+    j.MemberExpression.check(callee) &&
+    j.Identifier.check(callee.object) &&
+    j.Identifier.check(callee.property)
+  ) {
+    return (
+      callee.object.name === "React" && callee.property.name === "forwardRef"
+    );
+  }
+
+  // Check for forwardRef (imported directly)
+  if (j.Identifier.check(callee)) {
+    return callee.name === "forwardRef";
+  }
+
+  return false;
+}
+
+function extractForwardRefTypes(
+  init: Expression | SpreadElement | JSXNamespacedName,
+  j: JSCodeshift
+) {
+  if (!isReactForwardRef(init, j)) {
+    return;
+  }
+
+  if (!j.CallExpression.check(init) || !("typeParameters" in init)) {
+    return;
+  }
+
+  const typeParameters = init.typeParameters;
+
+  // If no type parameters, we still want to apply default empty object for props
+  if (
+    !j.TSTypeParameterInstantiation.check(typeParameters) ||
+    typeParameters.params.length === 0
+  ) {
+    return; // Let the default props type handling take care of it
+  }
+
+  const typeParams = typeParameters.params;
+
+  // React.forwardRef<ElementType, PropsType>
+  // If PropsType is not specified, use Record<string, unknown> to avoid ESLint errors
+  const [elementType] = typeParams;
+
+  if (!elementType) {
+    return;
+  }
+
+  const propsType =
+    typeParams.length >= 2 && typeParams[1]
+      ? typeParams[1]
+      : j.tsTypeReference(
+          j.identifier("Record"),
+          j.tsTypeParameterInstantiation([
+            j.tsStringKeyword(),
+            j.tsUnknownKeyword(),
+          ])
+        );
+
+  // Create React.ForwardedRef<ElementType> for the ref parameter
+  const refType = j.tsTypeReference(
+    j.tsQualifiedName(j.identifier("React"), j.identifier("ForwardedRef")),
+    j.tsTypeParameterInstantiation([elementType])
+  );
+
+  return { propsType, refType };
+}
+
+function isEmptyObjectType(type: TSType, j: JSCodeshift) {
+  return j.TSTypeLiteral.check(type) && type.members.length === 0;
+}
+
+function convertToFunction(
+  j: JSCodeshift,
+  declaration: VariableDeclarator,
+  init: Expression | SpreadElement | JSXNamespacedName,
+  propsType: TSType | null | undefined
+) {
+  if (!j.Identifier.check(declaration.id)) {
+    throw new Error("Declaration id must be an identifier");
+  }
+  const componentName = declaration.id.name;
+  const arrowFn = extractArrowFunction(init, j);
+
+  if (!arrowFn) {
+    throw new Error("Expected ArrowFunctionExpression or FunctionExpression");
+  }
+
+  const params = arrowFn.params;
+  const body = toBlockBody(j, arrowFn.body);
+
+  const newFunction = j.functionDeclaration(
+    j.identifier(componentName),
+    params,
+    body
+  );
+
+  // Check if this is React.forwardRef and extract types for props and ref
+  const forwardRefTypes = extractForwardRefTypes(init, j);
+
+  if (forwardRefTypes) {
+    // Apply props type to first parameter
+    const [firstParam, secondParam] = newFunction.params;
+    if (j.Pattern.check(firstParam) && "typeAnnotation" in firstParam) {
+      ensureParamType(firstParam, forwardRefTypes.propsType, j);
+    }
+    // Apply ref type to second parameter
+    if (j.Pattern.check(secondParam) && "typeAnnotation" in secondParam) {
+      ensureParamType(secondParam, forwardRefTypes.refType, j);
+    }
+  } else if (newFunction.params.length > 0) {
+    const [firstParam] = newFunction.params;
+    if (firstParam) {
+      ensureParamType(firstParam, propsType, j);
+    }
+  } else if (propsType && !isEmptyObjectType(propsType, j)) {
+    // If there are no params but a non-empty propsType exists, add _props parameter
+    const propsParam = j.identifier("_props");
+    ensureParamType(propsParam, propsType, j);
+    newFunction.params.push(propsParam);
+  }
+
+  if (arrowFn.returnType) {
+    newFunction.returnType = arrowFn.returnType;
+  }
+
+  // Preserve type parameters (generics) from arrow function
+  if (arrowFn.typeParameters) {
+    newFunction.typeParameters = arrowFn.typeParameters;
+  }
+
+  newFunction.async = arrowFn.async;
+  newFunction.generator = arrowFn.generator;
+
+  return newFunction;
+}
+
+function containsJsx(j: JSCodeshift, body: ASTNode) {
+  return (
+    j(body).find(j.JSXElement).paths().length > 0 ||
+    j(body).find(j.JSXFragment).paths().length > 0
+  );
+}
+
+function toFunctionExpression(
+  j: JSCodeshift,
+  declaration: FunctionDeclaration
+) {
+  const expression = j.functionExpression(
+    declaration.id,
+    declaration.params,
+    declaration.body,
+    declaration.generator,
+    declaration.async
+  );
+  expression.returnType = declaration.returnType;
+  expression.typeParameters = declaration.typeParameters;
+  return expression;
+}
+
+export default function transform(file: FileInfo, api: API, options: Options) {
+  const baseJ = api.jscodeshift;
+  const j =
+    typeof baseJ.withParser === "function" ? baseJ.withParser("tsx") : baseJ;
+  const root = j(file.source);
+
+  root
+    .find(j.VariableDeclaration)
+    .filter((path) => {
+      const [firstDeclaration] = path.node.declarations;
+
+      if (!j.VariableDeclarator.check(firstDeclaration)) {
+        return false;
+      }
+
+      if (
+        !j.Identifier.check(firstDeclaration.id) ||
+        !isComponentNameIdentifier(firstDeclaration.id)
+      ) {
+        return false;
+      }
+
+      const init = firstDeclaration.init;
+
+      if (!init) {
+        return false;
+      }
+
+      const functionToCheck = extractArrowFunction(init, j);
+
+      if (!functionToCheck) {
+        return false;
+      }
+
+      if (file.path && !file.path.endsWith(".tsx")) {
+        if (!containsJsx(j, functionToCheck)) {
+          return false;
+        }
+      }
+
+      return true;
+    })
+    .forEach((path) => {
+      const [firstDeclaration] = path.node.declarations;
+      if (!j.VariableDeclarator.check(firstDeclaration)) {
+        return;
+      }
+      const init = firstDeclaration.init;
+
+      if (!init) {
+        return;
+      }
+
+      let typeAnnotation: ASTNode | null | undefined;
+      if (j.Identifier.check(firstDeclaration.id)) {
+        typeAnnotation = firstDeclaration.id.typeAnnotation?.typeAnnotation;
+      }
+
+      // Try to get props type from variable type annotation first
+      let propsType: TSType | undefined = undefined;
+
+      if (
+        j.TSTypeReference.check(typeAnnotation) &&
+        isReactComponentType(typeAnnotation, j)
+      ) {
+        propsType = typeAnnotation.typeParameters?.params?.[0];
+      }
+
+      // If no props type from variable annotation, try to extract from wrapper's type parameters
+      if (!propsType) {
+        propsType = extractPropsTypeFromWrapper(init, j);
+      }
+
+      const newFunction = convertToFunction(
+        j,
+        firstDeclaration,
+        init,
+        propsType
+      );
+
+      const originalNode = path.node;
+
+      // Check if init is wrapped in a call expression (e.g., observer(...))
+      const hasWrapper = j.CallExpression.check(init);
+
+      if (hasWrapper) {
+        // Preserve the wrapper by keeping it as a const assignment
+        // e.g., export const Foo = observer(() => {}) becomes export const Foo = observer(function Foo() {...})
+
+        // Convert function declaration to function expression for wrapping
+        const functionExpression = toFunctionExpression(j, newFunction);
+
+        const wrappedFunction = j.callExpression(init.callee, [
+          functionExpression,
+          ...init.arguments.slice(1),
+        ]);
+
+        if (!j.Identifier.check(firstDeclaration.id)) {
+          return;
+        }
+
+        const newDeclarator = j.variableDeclarator(
+          j.identifier(firstDeclaration.id.name),
+          wrappedFunction
+        );
+
+        const newVarDecl = j.variableDeclaration("const", [newDeclarator]);
+
+        // Copy comments from original declaration to new function
+        copyOuterComments(originalNode, newVarDecl, j);
+
+        j(path).replaceWith(newVarDecl);
+        return;
+      }
+
+      // Copy outer comments from original declaration to new function
+      copyOuterComments(originalNode, newFunction, j);
+
+      // Copy comments from VariableDeclarator (e.g. export /* comment */ const Foo)
+      if (firstDeclaration.comments) {
+        addComments(newFunction, firstDeclaration.comments);
+      }
+
+      // Copy comments from arrow function
+      if (init.comments) {
+        addComments(newFunction, init.comments);
+      }
+
+      j(path).replaceWith(newFunction);
+    });
+
+  const quote = options.quote ?? '"';
+
+  const source = root.toSource({
+    quote,
+  });
+
+  return source;
+}
diff --git a/packages/codemods/headlessui-v2-default-tags.ts b/packages/codemods/headlessui-v2-default-tags.ts
new file mode 100644
index 0000000..1d3e760
--- /dev/null
+++ b/packages/codemods/headlessui-v2-default-tags.ts
@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API, FileInfo, JSXOpeningElement, Options } from "jscodeshift";
+
+/**
+ * Headless UI v1 -> v2 default-tag preservation.
+ *
+ * v2 changed the element some components render by default. Every call site that relied on
+ * the v1 default therefore silently changes its DOM — it still compiles and still runs, so
+ * nothing catches it but the eye. Adding an explicit `as=` at those sites pins the emitted
+ * markup to what v1 produced.
+ *
+ * Derived by diffing the `defaultTag` values in the v1.7.19 and v2.2.10 dist bundles:
+ *
+ *   bare <Transition>   div      -> Fragment   =>  as="div"
+ *   Combobox.Options    ul       -> div        =>  as="ul"
+ *   Combobox.Option     li       -> div        =>  as="li"
+ *   Listbox.Options     ul       -> div        =>  as="ul"
+ *   Listbox.Option      li       -> div        =>  as="li"
+ *   Tab.Group           Fragment -> div        =>  as={Fragment}
+ *
+ * Menu.*, Dialog.*, Disclosure.*, Popover.*, Switch and RadioGroup are byte-identical
+ * between the two versions and are deliberately left alone.
+ */
+
+type AsValue = { kind: "string"; value: string } | { kind: "fragment" };
+
+/** Keyed by `<Object>.<Property>` as written in JSX. */
+const MEMBER_TARGETS: Record<string, AsValue> = {
+  "Combobox.Options": { kind: "string", value: "ul" },
+  "Combobox.Option": { kind: "string", value: "li" },
+  "Listbox.Options": { kind: "string", value: "ul" },
+  "Listbox.Option": { kind: "string", value: "li" },
+  "Tab.Group": { kind: "fragment" },
+};
+
+/** Keyed by the bare JSX identifier. */
+const IDENTIFIER_TARGETS: Record<string, AsValue> = {
+  Transition: { kind: "string", value: "div" },
+};
+
+export default function transform(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Only rewrite components this file actually imports from Headless UI — the repo has
+  // first-party components sharing these names (e.g. its own <Transition> wrappers).
+  // Map local name -> imported name so aliases such as `Popover as HeadlessReactPopover`
+  // still resolve to the Headless UI component they came from.
+  const importedNameByLocal = new Map<string, string>();
+  root
+    .find(j.ImportDeclaration, { source: { value: "@headlessui/react" } })
+    .forEach((path) => {
+      for (const specifier of path.node.specifiers ?? []) {
+        if (specifier.type === "ImportSpecifier" && specifier.local) {
+          importedNameByLocal.set(
+            specifier.local.name,
+            specifier.imported.name as string
+          );
+        }
+      }
+    });
+
+  if (importedNameByLocal.size === 0) return file.source;
+
+  let mutations = 0;
+  let usedFragment = false;
+
+  const resolveTarget = (
+    node: JSXOpeningElement["name"]
+  ): AsValue | undefined => {
+    if (node.type === "JSXMemberExpression") {
+      const object = node.object;
+      if (object.type !== "JSXIdentifier") return undefined;
+      const importedName = importedNameByLocal.get(object.name);
+      if (!importedName) return undefined;
+      return MEMBER_TARGETS[`${importedName}.${node.property.name}`];
+    }
+    if (node.type === "JSXIdentifier") {
+      const importedName = importedNameByLocal.get(node.name);
+      if (!importedName) return undefined;
+      return IDENTIFIER_TARGETS[importedName];
+    }
+    return undefined;
+  };
+
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const target = resolveTarget(path.node.name);
+    if (!target) return;
+
+    const attributes = path.node.attributes ?? [];
+
+    // An explicit `as` already pins the tag — including when it sits on a continuation line.
+    const hasExplicitAs = attributes.some(
+      (attribute) =>
+        attribute.type === "JSXAttribute" && attribute.name?.name === "as"
+    );
+    if (hasExplicitAs) return;
+
+    // A spread may carry `as` at runtime; setting it here would override the caller.
+    const hasSpread = attributes.some(
+      (attribute) => attribute.type === "JSXSpreadAttribute"
+    );
+    if (hasSpread) return;
+
+    const value =
+      target.kind === "fragment"
+        ? j.jsxExpressionContainer(j.identifier("Fragment"))
+        : j.literal(target.value);
+
+    if (target.kind === "fragment") usedFragment = true;
+
+    attributes.unshift(j.jsxAttribute(j.jsxIdentifier("as"), value));
+    path.node.attributes = attributes;
+    mutations += 1;
+  });
+
+  if (mutations === 0) return file.source;
+
+  if (usedFragment) ensureFragmentImport(j, root);
+
+  return root.toSource(options);
+}
+
+/** Adds `Fragment` to the file's react import, creating that import if it has none. */
+function ensureFragmentImport(
+  j: API["jscodeshift"],
+  root: ReturnType<API["jscodeshift"]>
+) {
+  const reactImports = root.find(j.ImportDeclaration, {
+    source: { value: "react" },
+  });
+
+  // `Fragment` is usable only when a value specifier binds that exact local name:
+  // `import type { Fragment }` binds no runtime value, and
+  // `import { Fragment as ReactFragment }` binds no local `Fragment` identifier.
+  const alreadyImported = reactImports.nodes().some(
+    (node) =>
+      node.importKind !== "type" &&
+      (node.specifiers ?? []).some(
+        (specifier) =>
+          specifier.type === "ImportSpecifier" &&
+          // `import { type Fragment }`: ast-types typings lack importKind on specifiers.
+          (specifier as { importKind?: string }).importKind !== "type" &&
+          specifier.local?.name === "Fragment"
+      )
+  );
+  if (alreadyImported) return;
+
+  // Prefer a value import; `import type { X } from "react"` cannot carry a runtime binding.
+  const valueImport = reactImports
+    .nodes()
+    .find((node) => node.importKind !== "type");
+
+  if (valueImport) {
+    valueImport.specifiers = valueImport.specifiers ?? [];
+    valueImport.specifiers.push(j.importSpecifier(j.identifier("Fragment")));
+    return;
+  }
+
+  const declaration = j.importDeclaration(
+    [j.importSpecifier(j.identifier("Fragment"))],
+    j.literal("react")
+  );
+
+  const firstImport = root.find(j.ImportDeclaration).at(0);
+  if (firstImport.size() > 0) {
+    firstImport.insertBefore(declaration);
+  } else {
+    root.get().node.program.body.unshift(declaration);
+  }
+}
diff --git a/packages/codemods/instructions.md b/packages/codemods/instructions.md
new file mode 100644
index 0000000..18212ba
--- /dev/null
+++ b/packages/codemods/instructions.md
@@ -0,0 +1,385 @@
+# jscodeshift Instructions
+
+## API Reference
+
+### Core API
+
+#### `jscodeshift`
+
+The main function that returns the jscodeshift instance.
+
+- **Parameters**: `source` (String)
+- **Example**:
+  ```javascript
+  const j = jscodeshift(sourceCode);
+  ```
+
+### Node Traversal APIs
+
+#### `find`
+
+Finds nodes that match the provided type.
+
+- **Parameters**: `type` (String or Function)
+- **Example**:
+  ```javascript
+  const variableDeclarations = j.find(j.VariableDeclaration);
+  ```
+
+#### `findImportDeclarations`
+
+Finds all ImportDeclarations optionally filtered by name.
+
+- **Parameters**: `sourcePath` (String)
+- **Example**:
+  ```javascript
+  const routerImports = j.findImportDeclarations("react-router-dom");
+  ```
+
+#### `closestScope`
+
+Finds the closest enclosing scope of a node.
+
+- **Example**:
+  ```javascript
+  const closestScopes = j.find(j.Identifier).closestScope();
+  ```
+
+#### `closest`
+
+Finds the nearest parent node that matches the specified type.
+
+- **Parameters**: `type` (String or Function)
+- **Example**:
+  ```javascript
+  const closestFunction = j.find(j.Identifier).closest(j.FunctionDeclaration);
+  ```
+
+#### `getVariableDeclarators`
+
+Retrieves variable declarators from the current collection.
+
+- **Parameters**: `callback` (Function)
+- **Example**:
+  ```javascript
+  const variableDeclarators = j
+    .find(j.Identifier)
+    .getVariableDeclarators((path) => path.value.name);
+  ```
+
+#### `findVariableDeclarators`
+
+Finds variable declarators by name.
+
+- **Parameters**: `name` (String)
+- **Example**:
+  ```javascript
+  const variableDeclarators = j.findVariableDeclarators("a");
+  ```
+
+#### `filter`
+
+Filters nodes based on a predicate function.
+
+- **Parameters**: `predicate` (Function)
+- **Example**:
+  ```javascript
+  const constDeclarations = j
+    .find(j.VariableDeclaration)
+    .filter((path) => path.node.kind === "const");
+  ```
+
+#### `forEach`
+
+Iterates over each node in the collection.
+
+- **Parameters**: `callback` (Function)
+- **Example**:
+  ```javascript
+  j.find(j.VariableDeclaration).forEach((path) => {
+    console.log(path.node);
+  });
+  ```
+
+#### `some`
+
+Checks if at least one element in the collection passes the test.
+
+- **Parameters**: `callback` (Function)
+- **Example**:
+  ```javascript
+  const hasVariableA = root
+    .find(j.VariableDeclarator)
+    .some((path) => path.node.id.name === "a");
+  ```
+
+#### `every`
+
+Checks if all elements in the collection pass the test.
+
+- **Parameters**: `callback` (Function)
+- **Example**:
+  ```javascript
+  const allAreConst = root
+    .find(j.VariableDeclaration)
+    .every((path) => path.node.kind === "const");
+  ```
+
+#### `map`
+
+Maps each node in the collection to a new value.
+
+- **Parameters**: `callback` (Function)
+- **Example**:
+  ```javascript
+  const variableNames = j
+    .find(j.VariableDeclaration)
+    .map((path) => path.node.declarations.map((decl) => decl.id.name));
+  ```
+
+#### `size`
+
+Returns the number of nodes in the collection.
+
+- **Example**:
+  ```javascript
+  const numberOfNodes = j.find(j.VariableDeclaration).size();
+  ```
+
+#### `length`
+
+Returns the number of elements in the collection.
+
+- **Example**:
+  ```javascript
+  const varCount = root.find(j.VariableDeclarator).length;
+  ```
+
+#### `nodes`
+
+Returns the AST nodes in the collection.
+
+- **Example**:
+  ```javascript
+  const nodes = j.find(j.VariableDeclaration).nodes();
+  ```
+
+#### `paths`
+
+Returns the paths of the found nodes.
+
+- **Example**:
+  ```javascript
+  const paths = j.find(j.VariableDeclaration).paths();
+  ```
+
+#### `getAST`
+
+Returns the root AST node of the collection.
+
+- **Example**:
+  ```javascript
+  const ast = root.getAST();
+  ```
+
+#### `get`
+
+Gets the first node in the collection.
+
+- **Example**:
+  ```javascript
+  const firstVariableDeclaration = j.find(j.VariableDeclaration).get();
+  ```
+
+#### `at`
+
+Navigates to a specific path in the AST.
+
+- **Parameters**: `index` (Number)
+- **Example**:
+  ```javascript
+  const secondVariableDeclaration = j.find(j.VariableDeclaration).at(1);
+  ```
+
+#### `getTypes`
+
+Returns the set of node types present in the collection.
+
+- **Example**:
+  ```javascript
+  const types = root.find(j.VariableDeclarator).getTypes();
+  ```
+
+#### `isOfType`
+
+Checks if the node in the collection is of a specific type.
+
+- **Parameters**: `type` (String)
+- **Example**:
+  ```javascript
+  const isVariableDeclarator = root
+    .find(j.VariableDeclarator)
+    .at(0)
+    .isOfType("VariableDeclarator");
+  ```
+
+### Node Transformation APIs
+
+#### `replaceWith`
+
+Replaces the current node(s) with a new node.
+
+- **Parameters**: `newNode` (Node or Function)
+- **Example**:
+  ```javascript
+  j.find(j.Identifier).replaceWith((path) =>
+    j.identifier(path.node.name.toUpperCase())
+  );
+  ```
+
+#### `insertBefore`
+
+Inserts a node before the current node.
+
+- **Parameters**: `newNode` (Node)
+- **Example**:
+  ```javascript
+  j.find(j.FunctionDeclaration).insertBefore(
+    j.expressionStatement(j.stringLiteral("Inserted before"))
+  );
+  ```
+
+#### `insertAfter`
+
+Inserts a node after the current node.
+
+- **Parameters**: `newNode` (Node)
+- **Example**:
+  ```javascript
+  j.find(j.FunctionDeclaration).insertAfter(
+    j.expressionStatement(j.stringLiteral("Inserted after"))
+  );
+  ```
+
+#### `remove`
+
+Removes the current node(s).
+
+- **Example**:
+  ```javascript
+  j.find(j.VariableDeclaration).remove();
+  ```
+
+#### `renameTo`
+
+Renames the nodes in the collection to a new name.
+
+- **Parameters**: `newName` (String)
+- **Example**:
+  ```javascript
+  root.find(j.Identifier, { name: "a" }).renameTo("x");
+  ```
+
+#### `toSource`
+
+Converts the transformed AST back to source code.
+
+- **Parameters**: `options` (Object)
+- **Example**:
+  ```javascript
+  const transformedSource = j.toSource({ quote: "single" });
+  ```
+
+## AST Grammar
+
+jscodeshift provides 278 node types which are mapped to their corresponding node type in `ast-types`.
+
+### Common Node Types
+
+- **AnyTypeAnnotation**: A type annotation representing any type.
+- **ArrayExpression**: Represents an array literal.
+- **ArrayPattern**: A pattern that matches an array from a destructuring assignment.
+- **ArrayTypeAnnotation**: A type annotation for arrays.
+- **ArrowFunctionExpression**: An arrow function expression.
+- **AssignmentExpression**: Represents an assignment expression.
+- **AssignmentPattern**: A pattern that matches an assignment from a destructuring assignment.
+- **AwaitExpression**: Represents an await expression.
+- **BigIntLiteral**: A literal representing a big integer.
+- **BinaryExpression**: Represents a binary expression.
+- **BlockStatement**: Represents a block statement.
+- **BooleanLiteral**: A literal representing a boolean value.
+- **BreakStatement**: Represents a break statement.
+- **CallExpression**: Represents a call expression.
+- **CatchClause**: Represents a catch clause in a try statement.
+- **ClassDeclaration**: Represents a class declaration.
+- **ClassExpression**: Represents a class expression.
+- **ClassMethod**: Represents a method of a class.
+- **ClassProperty**: Represents a property of a class.
+- **Comment**: Represents a comment in the code.
+- **ConditionalExpression**: Represents a conditional expression (ternary).
+- **ContinueStatement**: Represents a continue statement.
+- **DebuggerStatement**: Represents a debugger statement.
+- **Declaration**: Represents a declaration in the code.
+- **DoWhileStatement**: Represents a do…while statement.
+- **ExportAllDeclaration**: Represents an export all declaration.
+- **ExportDeclaration**: Represents an export declaration.
+- **ExportDefaultDeclaration**: Represents an export default declaration.
+- **ExportNamedDeclaration**: Represents a named export declaration.
+- **ExpressionStatement**: Represents an expression statement.
+- **File**: Represents a file in the AST.
+- **ForInStatement**: Represents a for-in statement.
+- **ForOfStatement**: Represents a for-of statement.
+- **ForStatement**: Represents a for statement.
+- **FunctionDeclaration**: Represents a function declaration.
+- **FunctionExpression**: Represents a function expression.
+- **Identifier**: Represents an identifier.
+- **IfStatement**: Represents an if statement.
+- **ImportDeclaration**: Represents an import declaration.
+- **ImportDefaultSpecifier**: Represents a default import specifier.
+- **ImportNamespaceSpecifier**: Represents a namespace import specifier.
+- **ImportSpecifier**: Represents an import specifier.
+- **InterfaceDeclaration**: Represents an interface declaration.
+- **JSXAttribute**: Represents an attribute in a JSX element.
+- **JSXElement**: Represents a JSX element.
+- **JSXExpressionContainer**: Represents an expression container in JSX.
+- **JSXFragment**: Represents a JSX fragment.
+- **JSXIdentifier**: Represents an identifier in JSX.
+- **JSXText**: Represents text in JSX.
+- **Literal**: Represents a literal value.
+- **LogicalExpression**: Represents a logical expression.
+- **MemberExpression**: Represents a member expression.
+- **MethodDefinition**: Represents a method definition.
+- **NewExpression**: Represents a new expression.
+- **ObjectExpression**: Represents an object expression.
+- **ObjectPattern**: Represents an object pattern for destructuring.
+- **ObjectProperty**: Represents a property in an object.
+- **Program**: Represents the entire program.
+- **Property**: Represents a property in an object.
+- **ReturnStatement**: Represents a return statement.
+- **SpreadElement**: Represents a spread element in an array or function call.
+- **StringLiteral**: Represents a string literal.
+- **SwitchCase**: Represents a case in a switch statement.
+- **SwitchStatement**: Represents a switch statement.
+- **TemplateLiteral**: Represents a template literal.
+- **ThisExpression**: Represents the `this` expression.
+- **ThrowStatement**: Represents a throw statement.
+- **TryStatement**: Represents a try statement.
+- **TSAnyKeyword**: Represents the TypeScript `any` keyword.
+- **TSArrayType**: Represents a TypeScript array type.
+- **TSAsExpression**: Represents a TypeScript as-expression.
+- **TSBooleanKeyword**: Represents the TypeScript `boolean` keyword.
+- **TSDeclareFunction**: Represents a TypeScript function declaration.
+- **TSEnumDeclaration**: Represents a TypeScript enum declaration.
+- **TSInterfaceDeclaration**: Represents a TypeScript interface declaration.
+- **TSNumberKeyword**: Represents the TypeScript `number` keyword.
+- **TSStringKeyword**: Represents the TypeScript `string` keyword.
+- **TSTypeAliasDeclaration**: Represents a TypeScript type alias declaration.
+- **TSTypeAnnotation**: Represents a TypeScript type annotation.
+- **TSTypeReference**: Represents a type reference in TypeScript.
+- **TSUnionType**: Represents a union type in TypeScript.
+- **UnaryExpression**: Represents a unary expression.
+- **VariableDeclaration**: Represents a variable declaration.
+- **VariableDeclarator**: Represents a variable declarator.
+- **WhileStatement**: Represents a while statement.
+
+For a complete list and detailed structure of each node, refer to the [AST Grammar documentation](https://jscodeshift.com/build/ast-grammar/).
diff --git a/packages/codemods/package.json b/packages/codemods/package.json
new file mode 100644
index 0000000..83842d8
--- /dev/null
+++ b/packages/codemods/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "@plane/codemods",
+  "version": "1.4.2",
+  "private": true,
+  "scripts": {
+    "test": "vitest run",
+    "function-declaration": "jscodeshift -t ./function-declaration.ts --extensions=tsx --parser=tsx ../../apps/*/app ../../apps/*/ce ../../apps/*/core ../../apps/*/ee ../../apps/*/helpers ../../packages/*/src --ignore-pattern='**/node_modules/**' --ignore-pattern='**/dist/**' --ignore-pattern='**/build/**' --ignore-pattern='**/*.d.ts'",
+    "remove-directives": "jscodeshift -t ./remove-directives.ts --extensions=ts,tsx --parser=tsx ../../apps/*/app ../../apps/*/ce ../../apps/*/core ../../apps/*/ee ../../apps/*/helpers ../../apps/*/src ../../packages/*/src --ignore-pattern='**/node_modules/**' --ignore-pattern='**/dist/**' --ignore-pattern='**/build/**' --ignore-pattern='**/*.d.ts'",
+    "headlessui-v2-default-tags": "jscodeshift -t ./headlessui-v2-default-tags.ts --extensions=tsx --parser=tsx ../../apps/*/app ../../apps/*/ce ../../apps/*/components ../../apps/*/core ../../apps/*/ee ../../apps/*/helpers ../../apps/*/src ../../packages/*/src --ignore-pattern='**/node_modules/**' --ignore-pattern='**/dist/**' --ignore-pattern='**/build/**' --ignore-pattern='**/*.d.ts'"
+  },
+  "devDependencies": {
+    "@hypermod/utils": "catalog:",
+    "@types/jscodeshift": "catalog:",
+    "ast-types": "catalog:",
+    "jscodeshift": "catalog:",
+    "vitest": "catalog:"
+  }
+}
diff --git a/packages/codemods/remove-directives.ts b/packages/codemods/remove-directives.ts
new file mode 100644
index 0000000..5848fa3
--- /dev/null
+++ b/packages/codemods/remove-directives.ts
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API, FileInfo, Options } from "jscodeshift";
+import type { CommentKind, DirectiveKind } from "ast-types/gen/kinds";
+
+export default function transform(file: FileInfo, api: API, options: Options) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+
+    const directivesToRemove = new Set(["use client", "use server", "use-client", "use-server"]);
+
+    root.find(j.Program).forEach((path) => {
+        // Handle ASTs where directives are stored in 'directives' property (Babel/TS)
+        if (path.node.directives) {
+            const newDirectives: DirectiveKind[] = [];
+            let capturedComments: CommentKind[] = [];
+
+            path.node.directives.forEach((directive) => {
+                if (directive.type === 'Directive' && directive.value.type === 'DirectiveLiteral' && typeof directive.value.value === 'string' && directivesToRemove.has(directive.value.value)) {
+                    // Directive is being removed. Capture its comments.
+                    if (directive.comments) {
+                        capturedComments.push(...directive.comments);
+                    }
+                } else {
+                    // Keep this directive
+                    // If we have captured comments from previous removed directives, attach them here?
+                    // Usually comments belong to the next node.
+                    if (capturedComments.length > 0) {
+                        directive.comments = directive.comments || [];
+                        directive.comments.unshift(...capturedComments);
+                        capturedComments = [];
+                    }
+                    newDirectives.push(directive);
+                }
+            });
+
+            path.node.directives = newDirectives;
+
+            // If we still have captured comments (e.g. all directives removed, or last one removed),
+            // attach them to the first body node.
+            if (capturedComments.length > 0) {
+                if (path.node.body.length > 0) {
+                    const firstBodyNode = path.node.body[0];
+                    if (firstBodyNode) {
+                        firstBodyNode.comments = firstBodyNode.comments || [];
+                        firstBodyNode.comments.unshift(...capturedComments);
+                    }
+                } else {
+                    // If empty body, attach to Program?
+                    // jscodeshift might not print Program comments easily if they are not attached to children.
+                    // But let's try attaching to the Program node itself if possible, or leave them (they might be lost).
+                    path.node.comments = path.node.comments || [];
+                    path.node.comments.push(...capturedComments);
+                }
+            }
+        }
+
+        // Also handle the case where they might be in body as ExpressionStatements
+        if (path.node.body) {
+            const newBody: any[] = [];
+            let capturedComments: any[] = [];
+
+            path.node.body.forEach((node) => {
+                let shouldRemove = false;
+                if (j.ExpressionStatement.check(node)) {
+                    const expression = node.expression;
+                    if (j.StringLiteral.check(expression) && directivesToRemove.has(expression.value)) {
+                        shouldRemove = true;
+                    } else if (j.Literal.check(expression) && typeof expression.value === 'string' && directivesToRemove.has(expression.value)) {
+                        shouldRemove = true;
+                    }
+                }
+
+                if (shouldRemove) {
+                    if (node.comments) {
+                        capturedComments.push(...node.comments);
+                    }
+                } else {
+                    if (capturedComments.length > 0) {
+                        node.comments = node.comments || [];
+                        node.comments.unshift(...capturedComments);
+                        capturedComments = [];
+                    }
+                    newBody.push(node);
+                }
+            });
+
+            // If comments left at the end (e.g. removed last statement), usually they are trailing comments of the file.
+            // But if we removed the ONLY statement, they become dangling.
+            // We attached to next node, so if we are at the end, there is no next node.
+            // If we removed a directive at the top, and there are more statements, they got attached.
+
+            path.node.body = newBody;
+        }
+    });
+
+    return root.toSource(options);
+}
+
diff --git a/packages/codemods/tests/function-declaration.spec.ts b/packages/codemods/tests/function-declaration.spec.ts
new file mode 100644
index 0000000..7fe5b00
--- /dev/null
+++ b/packages/codemods/tests/function-declaration.spec.ts
@@ -0,0 +1,572 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { describe, it, expect } from "vitest";
+import { applyTransform } from "@hypermod/utils";
+import * as transformer from "../function-declaration";
+
+describe("function-declaration", () => {
+  it("should convert arrow function components to function declarations", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      export const MyComponent: React.FC<{}> = () => {
+        return <div>Hello, world!</div>;
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export function MyComponent() {
+              return <div>Hello, world!</div>;
+            }"
+    `);
+  });
+
+  it("should handle components with props", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      interface IMyComponentProps {
+        name: string;
+      }
+
+      export const MyComponent: React.FC<IMyComponentProps> = ({ name }) => {
+        return <div>Hello, {name}!</div>;
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            interface IMyComponentProps {
+              name: string;
+            }
+
+            export function MyComponent(
+              {
+                name
+              }: IMyComponentProps
+            ) {
+              return <div>Hello, {name}!</div>;
+            }"
+    `);
+  });
+
+  it("should preserve default props", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      interface IMyComponentProps {
+        name?: string;
+      }
+
+      export const MyComponent: React.FC<IMyComponentProps> = ({ name = "world" }) => {
+        return <div>Hello, {name}!</div>;
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            interface IMyComponentProps {
+              name?: string;
+            }
+
+            export function MyComponent(
+              {
+                name = "world"
+              }: IMyComponentProps
+            ) {
+              return <div>Hello, {name}!</div>;
+            }"
+    `);
+  });
+
+  it("should not transform non-component arrow functions", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      const myFunction = () => {
+        return "hello";
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "const myFunction = () => {
+              return "hello";
+            };"
+    `);
+  });
+
+  it("should handle observer-wrapped components", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { observer } from "mobx-react";
+
+      export const WorkspaceAnalyticsHeader = observer(() => {
+        return <div>Analytics</div>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { observer } from "mobx-react";
+
+            export const WorkspaceAnalyticsHeader = observer(function WorkspaceAnalyticsHeader() {
+              return <div>Analytics</div>;
+            });"
+    `);
+  });
+
+  it("should handle inline arrow function components", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const StarUsOnGitHubLink = () => {
+        return <a href="https://github.com">Star us</a>;
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "export function StarUsOnGitHubLink() {
+              return <a href="https://github.com">Star us</a>;
+            }"
+    `);
+  });
+
+  it("should handle React.FC type without generics", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import type { FC } from "react";
+
+      export const ProjectAppSidebar: FC = observer(() => {
+        return <div>Sidebar</div>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { FC } from "react";
+
+            export const ProjectAppSidebar = observer(function ProjectAppSidebar() {
+              return <div>Sidebar</div>;
+            });"
+    `);
+  });
+
+  it("should handle inline JSX arrow function", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const DateAlert = (props: TDateAlertProps) => <></>;
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "export function DateAlert(props: TDateAlertProps) {
+                  return <></>;
+            }"
+    `);
+  });
+
+  it("should handle observer with generic type parameters", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { observer } from "mobx-react";
+
+      export const InstanceProvider = observer<React.FC<React.PropsWithChildren>>((props) => {
+        const { children } = props;
+        return <>{children}</>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { observer } from "mobx-react";
+
+            export const InstanceProvider = observer(function InstanceProvider(props: React.PropsWithChildren) {
+              const { children } = props;
+              return <>{children}</>;
+            });"
+    `);
+  });
+
+  it("should not add double semicolons after use client directive", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use client";
+      import { observer } from "mobx-react";
+
+      export const MyComponent = observer(() => {
+        return <div>Hello</div>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      ""use client";
+            import { observer } from "mobx-react";
+
+            export const MyComponent = observer(function MyComponent() {
+              return <div>Hello</div>;
+            });"
+    `);
+  });
+
+  it("should preserve generic type parameters in wrapper functions", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      export const ScatterChart = React.memo(<K extends string, T extends string>(props: TScatterChartProps<K, T>) => {
+        return <div>Chart</div>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export const ScatterChart = React.memo(
+              function ScatterChart<K extends string, T extends string>(props: TScatterChartProps<K, T>) {
+                return <div>Chart</div>;
+              }
+            );"
+    `);
+  });
+
+  it("should preserve generic type parameters on React.forwardRef", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+        return <button ref={ref}>Click me</button>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            const Button = React.forwardRef(
+              function Button(props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) {
+                return <button ref={ref}>Click me</button>;
+              }
+            );"
+    `);
+  });
+
+  it("should prefix unused props parameter with underscore", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import type { TCallbackMentionComponentProps } from "@plane/editor";
+
+      export const EditorAdditionalMentionsRoot: React.FC<TCallbackMentionComponentProps> = () => null;
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { TCallbackMentionComponentProps } from "@plane/editor";
+
+            export function EditorAdditionalMentionsRoot(_props: TCallbackMentionComponentProps) {
+                  return null;
+            }"
+    `);
+  });
+
+  it("should add Record<string, unknown> type for React.forwardRef with only element type", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { forwardRef } from "react";
+
+      const ListLoaderItemRow = forwardRef<HTMLDivElement>((props, ref) => (
+        <div ref={ref}>Content</div>
+      ));
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { forwardRef } from "react";
+
+            const ListLoaderItemRow = forwardRef(
+              function ListLoaderItemRow(props: Record<string, unknown>, ref: React.ForwardedRef<HTMLDivElement>) {
+                return (<div ref={ref}>Content</div>);
+              }
+            );"
+    `);
+  });
+
+  it("should preserve comments in function body", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const PreloadResources = () => (
+        // usePreloadResources();
+        null
+      );
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "export function PreloadResources() {
+              return (
+                // usePreloadResources();
+                (null)
+              );
+            }"
+    `);
+  });
+
+  it("should preserve leading comments before export declaration", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+"use client";
+
+// TODO: Check if we need this
+// https://nextjs.org/docs/app/api-reference/functions/generate-metadata#link-relpreload
+// export const usePreloadResources = () => {
+//   useEffect(() => {
+//     const preloadItem = (url: string) => {
+//       ReactDOM.preload(url, { as: "fetch", crossOrigin: "use-credentials" });
+//     };
+//
+//     const urls = [
+//       \`\${process.env.VITE_API_BASE_URL}/api/instances/\`,
+//       \`\${process.env.VITE_API_BASE_URL}/api/users/me/\`,
+//       \`\${process.env.VITE_API_BASE_URL}/api/users/me/profile/\`,
+//       \`\${process.env.VITE_API_BASE_URL}/api/users/me/settings/\`,
+//       \`\${process.env.VITE_API_BASE_URL}/api/users/me/workspaces/?v=\${Date.now()}\`,
+//     ];
+//
+//     urls.forEach((url) => preloadItem(url));
+//   }, []);
+// };
+
+export const PreloadResources = () =>
+  // usePreloadResources();
+  null;
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      ""use client";
+
+      // TODO: Check if we need this
+      // https://nextjs.org/docs/app/api-reference/functions/generate-metadata#link-relpreload
+      // export const usePreloadResources = () => {
+      //   useEffect(() => {
+      //     const preloadItem = (url: string) => {
+      //       ReactDOM.preload(url, { as: "fetch", crossOrigin: "use-credentials" });
+      //     };
+      //
+      //     const urls = [
+      //       \`\${process.env.VITE_API_BASE_URL}/api/instances/\`,
+      //       \`\${process.env.VITE_API_BASE_URL}/api/users/me/\`,
+      //       \`\${process.env.VITE_API_BASE_URL}/api/users/me/profile/\`,
+      //       \`\${process.env.VITE_API_BASE_URL}/api/users/me/settings/\`,
+      //       \`\${process.env.VITE_API_BASE_URL}/api/users/me/workspaces/?v=\${Date.now()}\`,
+      //     ];
+      //
+      //     urls.forEach((url) => preloadItem(url));
+      //   }, []);
+      // };
+
+      export function PreloadResources() {
+        return (
+          // usePreloadResources();
+          null
+        );
+      }"
+    `);
+  });
+
+  it("should preserve leading comments before wrapped export declaration", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+// This is a wrapped component
+// It uses observer for reactivity
+export const MyObserverComponent = observer(() => {
+  return <div>Observer component</div>;
+});
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "// This is a wrapped component
+      // It uses observer for reactivity
+      export const MyObserverComponent = observer(function MyObserverComponent() {
+        return <div>Observer component</div>;
+      });"
+    `);
+  });
+
+  it("should preserve trailing comments on exported variable declaration", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const Foo = () => <div />; // trailing comment
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toContain("// trailing comment");
+  });
+
+  it("should preserve leading comments on exported variable declaration inside export", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export /* leading comment */ const Foo = () => <div />;
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toContain("/* leading comment */");
+  });
+
+  it("should preserve dependency arrays when transforming wrapped components", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { useMemo } from "react";
+
+      const MyComponent = useMemo(() => {
+        return () => <div>Hello</div>;
+      }, [dep]);
+      `,
+      { parser: "tsx", path: "file.tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { useMemo } from "react";
+
+            const MyComponent = useMemo(function MyComponent() {
+              return () => <div>Hello</div>;
+            }, [dep]);"
+    `);
+  });
+
+  it("should preserve dependency arrays for constants that look like components", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { useMemo } from "react";
+
+      const ACTION_HANDLERS = useMemo(function ACTION_HANDLERS() {
+        return {
+          archived: () => {},
+        };
+      }, []);
+      `,
+      { parser: "tsx", path: "file.tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { useMemo } from "react";
+
+            const ACTION_HANDLERS = useMemo(function ACTION_HANDLERS() {
+              return {
+                archived: () => {},
+              };
+            }, []);"
+    `);
+  });
+
+  it("should handle memo with generic type arguments correctly", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { memo } from "react";
+
+      type TAccessMenuProps = {
+        currentAccess: number;
+      };
+
+      export const AccessMenu = memo<TAccessMenuProps>(
+        ({ currentAccess }) => {
+          return <div>{currentAccess}</div>;
+        }
+      );
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { memo } from "react";
+
+            type TAccessMenuProps = {
+              currentAccess: number;
+            };
+
+            export const AccessMenu = memo(function AccessMenu(
+              {
+                currentAccess
+              }: TAccessMenuProps
+            ) {
+              return <div>{currentAccess}</div>;
+            });"
+    `);
+  });
+
+  it("should not transform CONSTANT_CASE variables", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const MY_CONSTANT = () => {
+        return "value";
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "export const MY_CONSTANT = () => {
+              return "value";
+            };"
+    `);
+  });
+});
diff --git a/packages/codemods/tests/headlessui-v2-default-tags.spec.ts b/packages/codemods/tests/headlessui-v2-default-tags.spec.ts
new file mode 100644
index 0000000..4d44763
--- /dev/null
+++ b/packages/codemods/tests/headlessui-v2-default-tags.spec.ts
@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { describe, it, expect } from "vitest";
+import { applyTransform } from "@hypermod/utils";
+import * as transformer from "../headlessui-v2-default-tags";
+
+const apply = (source: string) =>
+  applyTransform(transformer, source, { parser: "tsx" });
+
+describe("headlessui-v2-default-tags", () => {
+  it("pins a bare <Transition> to the v1 div default", async () => {
+    const result = await apply(`
+      import { Transition } from "@headlessui/react";
+
+      export const Panel = () => (
+        <Transition show={open} className="grid">
+          <div>body</div>
+        </Transition>
+      );
+    `);
+
+    expect(result).toContain(
+      `<Transition as="div" show={open} className="grid">`
+    );
+  });
+
+  it("pins Combobox.Options to ul and Combobox.Option to li", async () => {
+    const result = await apply(`
+      import { Combobox } from "@headlessui/react";
+
+      export const Select = () => (
+        <Combobox.Options className="list">
+          <Combobox.Option value="a">A</Combobox.Option>
+        </Combobox.Options>
+      );
+    `);
+
+    expect(result).toContain(`<Combobox.Options as="ul" className="list">`);
+    expect(result).toContain(`<Combobox.Option as="li" value="a">`);
+  });
+
+  it("pins Listbox.Options to ul and Listbox.Option to li", async () => {
+    const result = await apply(`
+      import { Listbox } from "@headlessui/react";
+
+      export const Select = () => (
+        <Listbox.Options>
+          <Listbox.Option value="a">A</Listbox.Option>
+        </Listbox.Options>
+      );
+    `);
+
+    expect(result).toContain(`<Listbox.Options as="ul">`);
+    expect(result).toContain(`<Listbox.Option as="li" value="a">`);
+  });
+
+  it("pins Tab.Group to Fragment and imports Fragment", async () => {
+    const result = await apply(`
+      import { useState } from "react";
+      import { Tab } from "@headlessui/react";
+
+      export const Tabs = () => (
+        <Tab.Group>
+          <Tab.List>
+            <Tab>One</Tab>
+          </Tab.List>
+        </Tab.Group>
+      );
+    `);
+
+    expect(result).toContain("<Tab.Group as={Fragment}>");
+    expect(result).toMatch(/import \{ useState, Fragment \} from "react"/);
+    // Tab.List and Tab are unchanged between v1 and v2.
+    expect(result).toContain("<Tab.List>");
+    expect(result).toContain("<Tab>One</Tab>");
+  });
+
+  it("adds a value Fragment import alongside an existing type-only one", async () => {
+    const result = await apply(`
+      import type { Fragment } from "react";
+      import { Tab } from "@headlessui/react";
+
+      export const Tabs = () => <Tab.Group><Tab.List /></Tab.Group>;
+    `);
+
+    expect(result).toContain("<Tab.Group as={Fragment}>");
+    // The type-only specifier binds no runtime value, so a real value import must appear.
+    expect(result).toMatch(/import \{ Fragment \} from "react"/);
+  });
+
+  it("does not mistake an aliased Fragment import for a local Fragment binding", async () => {
+    const result = await apply(`
+      import { Fragment as ReactFragment } from "react";
+      import { Tab } from "@headlessui/react";
+
+      export const Tabs = () => <Tab.Group><Tab.List /></Tab.Group>;
+    `);
+
+    expect(result).toContain("<Tab.Group as={Fragment}>");
+    expect(result).toMatch(
+      /import \{ Fragment as ReactFragment, Fragment \} from "react"/
+    );
+  });
+
+  it("adds a react import when the file has none", async () => {
+    const result = await apply(`
+      import { Tab } from "@headlessui/react";
+
+      export const Tabs = () => <Tab.Group><Tab.List /></Tab.Group>;
+    `);
+
+    expect(result).toMatch(/import \{ Fragment \} from "react"/);
+  });
+
+  it("leaves an existing explicit as= alone", async () => {
+    const result = await apply(`
+      import { Transition, Combobox } from "@headlessui/react";
+
+      export const Panel = () => (
+        <Transition
+          as={Fragment}
+          show={open}
+        >
+          <Combobox.Options as="div">x</Combobox.Options>
+        </Transition>
+      );
+    `);
+
+    expect(result).toContain("as={Fragment}");
+    expect(result).not.toContain(`as="div" as={Fragment}`);
+    expect(result).toContain(`<Combobox.Options as="div">`);
+    // exactly one `as` per element
+    expect(result.match(/as=/g)).toHaveLength(2);
+  });
+
+  it("skips elements carrying a spread that could supply as", async () => {
+    const result = await apply(`
+      import { Transition } from "@headlessui/react";
+
+      export const Panel = (props) => <Transition {...props}>x</Transition>;
+    `);
+
+    expect(result).not.toContain("as=");
+  });
+
+  it("ignores same-named components not imported from Headless UI", async () => {
+    const result = await apply(`
+      import { Transition } from "@/components/transition";
+
+      export const Panel = () => <Transition show>x</Transition>;
+    `);
+
+    expect(result).not.toContain("as=");
+  });
+
+  it("does not touch Menu, Dialog, Disclosure or Popover subcomponents", async () => {
+    const result = await apply(`
+      import { Menu, Dialog, Disclosure, Popover } from "@headlessui/react";
+
+      export const All = () => (
+        <>
+          <Menu.Items><Menu.Item>a</Menu.Item></Menu.Items>
+          <Dialog.Panel><Dialog.Title>t</Dialog.Title></Dialog.Panel>
+          <Disclosure.Button /><Disclosure.Panel />
+          <Popover.Button /><Popover.Panel />
+        </>
+      );
+    `);
+
+    expect(result).not.toContain("as=");
+  });
+
+  it("resolves aliased Headless UI imports by their imported name", async () => {
+    const result = await apply(`
+      import { Transition as HeadlessTransition } from "@headlessui/react";
+
+      export const Panel = () => <HeadlessTransition show>x</HeadlessTransition>;
+    `);
+
+    expect(result).toContain(`<HeadlessTransition as="div" show>`);
+  });
+
+  it("resolves aliased member expressions too", async () => {
+    const result = await apply(`
+      import { Combobox as HeadlessCombobox } from "@headlessui/react";
+
+      export const Select = () => (
+        <HeadlessCombobox.Options>
+          <HeadlessCombobox.Option value="a">A</HeadlessCombobox.Option>
+        </HeadlessCombobox.Options>
+      );
+    `);
+
+    expect(result).toContain(`<HeadlessCombobox.Options as="ul">`);
+    expect(result).toContain(`<HeadlessCombobox.Option as="li" value="a">`);
+  });
+});
diff --git a/packages/codemods/tests/remove-directives.spec.ts b/packages/codemods/tests/remove-directives.spec.ts
new file mode 100644
index 0000000..231236a
--- /dev/null
+++ b/packages/codemods/tests/remove-directives.spec.ts
@@ -0,0 +1,296 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { describe, it, expect } from "vitest";
+import { applyTransform } from "@hypermod/utils";
+import * as transformer from "../remove-directives";
+
+describe("remove-directives", () => {
+  it("should remove 'use client' directive", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use client";
+      import React from "react";
+
+      export const MyComponent = () => {
+        return <div>Hello, world!</div>;
+      };
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export const MyComponent = () => {
+              return <div>Hello, world!</div>;
+            };"
+    `);
+  });
+
+  it("should remove 'use server' directive", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use server";
+      import db from "./db";
+
+      export const getData = async () => {
+        return db.query("SELECT * FROM users");
+      };
+      `,
+      { parser: "ts" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import db from "./db";
+
+            export const getData = async () => {
+              return db.query("SELECT * FROM users");
+            };"
+    `);
+  });
+
+  it("should remove 'use client' directive with single quotes", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      'use client';
+      import React from "react";
+
+      export const MyComponent = () => {
+        return <div>Hello, world!</div>;
+      };
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export const MyComponent = () => {
+              return <div>Hello, world!</div>;
+            };"
+    `);
+  });
+
+  it("should remove multiple directives", async () => {
+      const result = await applyTransform(
+        transformer,
+        `
+        "use client";
+        "use strict";
+        import React from "react";
+
+        export const MyComponent = () => {
+          return <div>Hello, world!</div>;
+        };
+        `,
+        { parser: "tsx" },
+      );
+
+      expect(result).toMatchInlineSnapshot(`
+        ""use strict";;
+                import React from "react";
+
+                export const MyComponent = () => {
+                  return <div>Hello, world!</div>;
+                };"
+      `);
+    });
+
+  it("should ignore directives inside functions", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      export const MyComponent = () => {
+        "use client";
+        return <div>Hello, world!</div>;
+      };
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export const MyComponent = () => {
+              "use client";
+              return <div>Hello, world!</div>;
+            };"
+    `);
+  });
+  
+  it("should preserve comments", async () => {
+     const result = await applyTransform(
+      transformer,
+      `
+      // comment before
+      "use client";
+      // comment after
+      import React from "react";
+      `,
+      { parser: "tsx" }
+     );
+     
+     expect(result).toMatchInlineSnapshot(`
+       "// comment before
+             // comment after
+             import React from "react";"
+     `);
+  });
+
+  it("should remove 'use-client' directive with hyphen", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use-client";
+      import type { FC } from "react";
+      // types
+      import type { TDeDupeIssue } from "@plane/types";
+
+      type TDuplicateModalRootProps = {
+        workspaceSlug: string;
+        issues: TDeDupeIssue[];
+        handleDuplicateIssueModal: (value: boolean) => void;
+      };
+
+      export function DuplicateModalRoot(props: TDuplicateModalRootProps) {
+        const { workspaceSlug, issues, handleDuplicateIssueModal } = props;
+        return <></>;
+      }
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { FC } from "react";
+            // types
+            import type { TDeDupeIssue } from "@plane/types";
+
+            type TDuplicateModalRootProps = {
+              workspaceSlug: string;
+              issues: TDeDupeIssue[];
+              handleDuplicateIssueModal: (value: boolean) => void;
+            };
+
+            export function DuplicateModalRoot(props: TDuplicateModalRootProps) {
+              const { workspaceSlug, issues, handleDuplicateIssueModal } = props;
+              return <></>;
+            }"
+    `);
+  });
+
+  it("should remove 'use-client' directive with hyphen and single quotes", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      'use-client';
+      import type { FC } from "react";
+      import { useState } from "react";
+      // plane imports
+      import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+
+      export function MyComponent() {
+        return <div>Hello</div>;
+      }
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { FC } from "react";
+            import { useState } from "react";
+            // plane imports
+            import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+
+            export function MyComponent() {
+              return <div>Hello</div>;
+            }"
+    `);
+  });
+
+  it("should remove 'use-server' directive with hyphen", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use-server";
+      import db from "./db";
+
+      export const getData = async () => {
+        return db.query("SELECT * FROM users");
+      };
+      `,
+      { parser: "ts" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import db from "./db";
+
+            export const getData = async () => {
+              return db.query("SELECT * FROM users");
+            };"
+    `);
+  });
+
+  it("should handle 'use-client' in modal component structure", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use-client";
+
+      import type { FC } from "react";
+      import { useState } from "react";
+      // plane imports
+      import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+      // hooks
+      import useKeypress from "@/hooks/use-keypress";
+      // local imports
+      import { InboxIssueCreateRoot } from "./create-root";
+
+      type TInboxIssueCreateModalRoot = {
+        workspaceSlug: string;
+        projectId: string;
+        modalState: boolean;
+        handleModalClose: () => void;
+      };
+
+      export function InboxIssueCreateModalRoot(props: TInboxIssueCreateModalRoot) {
+        const { workspaceSlug, projectId, modalState, handleModalClose } = props;
+        return <></>;
+      }
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { FC } from "react";
+            import { useState } from "react";
+            // plane imports
+            import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+            // hooks
+            import useKeypress from "@/hooks/use-keypress";
+            // local imports
+            import { InboxIssueCreateRoot } from "./create-root";
+
+            type TInboxIssueCreateModalRoot = {
+              workspaceSlug: string;
+              projectId: string;
+              modalState: boolean;
+              handleModalClose: () => void;
+            };
+
+            export function InboxIssueCreateModalRoot(props: TInboxIssueCreateModalRoot) {
+              const { workspaceSlug, projectId, modalState, handleModalClose } = props;
+              return <></>;
+            }"
+    `);
+  });
+});
+
diff --git a/packages/codemods/tsconfig.json b/packages/codemods/tsconfig.json
new file mode 100644
index 0000000..07945fe
--- /dev/null
+++ b/packages/codemods/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}
diff --git a/packages/codemods/vitest.config.ts b/packages/codemods/vitest.config.ts
new file mode 100644
index 0000000..f624398
--- /dev/null
+++ b/packages/codemods/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+  },
+});
diff --git a/packages/constants/.prettierignore b/packages/constants/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/constants/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/constants/package.json b/packages/constants/package.json
new file mode 100644
index 0000000..c10def6
--- /dev/null
+++ b/packages/constants/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@plane/constants",
+  "version": "1.4.2",
+  "private": true,
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "tsdown --watch --no-clean",
+    "build": "tsdown",
+    "check:lint": "oxlint --max-warnings=2 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "@plane/types": "workspace:*"
+  },
+  "devDependencies": {
+    "@plane/typescript-config": "workspace:*",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/packages/constants/src/ai.ts b/packages/constants/src/ai.ts
new file mode 100644
index 0000000..42fafe9
--- /dev/null
+++ b/packages/constants/src/ai.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum AI_EDITOR_TASKS {
+  ASK_ANYTHING = "ASK_ANYTHING",
+}
+
+export const LOADING_TEXTS = {
+  [AI_EDITOR_TASKS.ASK_ANYTHING]: "Pi is generating response",
+} satisfies { [key in AI_EDITOR_TASKS]: string };
diff --git a/packages/constants/src/analytics/common.ts b/packages/constants/src/analytics/common.ts
new file mode 100644
index 0000000..01c56d1
--- /dev/null
+++ b/packages/constants/src/analytics/common.ts
@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TAnalyticsTabsBase } from "@plane/types";
+import { ChartXAxisProperty, ChartYAxisMetric } from "@plane/types";
+
+export interface IInsightField {
+  key: string;
+  i18nKey: string;
+  i18nProps?: {
+    entity?: string;
+    entityPlural?: string;
+    prefix?: string;
+    suffix?: string;
+    [key: string]: unknown;
+  };
+}
+
+export const ANALYTICS_INSIGHTS_FIELDS: Record<TAnalyticsTabsBase, IInsightField[]> = {
+  overview: [
+    {
+      key: "total_users",
+      i18nKey: "workspace_analytics.total",
+      i18nProps: {
+        entity: "common.users",
+      },
+    },
+    {
+      key: "total_admins",
+      i18nKey: "workspace_analytics.total",
+      i18nProps: {
+        entity: "common.admins",
+      },
+    },
+    {
+      key: "total_members",
+      i18nKey: "workspace_analytics.total",
+      i18nProps: {
+        entity: "common.members",
+      },
+    },
+    {
+      key: "total_guests",
+      i18nKey: "workspace_analytics.total",
+      i18nProps: {
+        entity: "common.guests",
+      },
+    },
+    {
+      key: "total_projects",
+      i18nKey: "workspace_analytics.total",
+      i18nProps: {
+        entity: "common.projects",
+      },
+    },
+    {
+      key: "total_work_items",
+      i18nKey: "workspace_analytics.total",
+      i18nProps: {
+        entity: "common.work_items",
+      },
+    },
+    {
+      key: "total_cycles",
+      i18nKey: "workspace_analytics.total",
+      i18nProps: {
+        entity: "common.cycles",
+      },
+    },
+    {
+      key: "total_intake",
+      i18nKey: "workspace_analytics.total",
+      i18nProps: {
+        entity: "sidebar.intake",
+      },
+    },
+  ],
+  "work-items": [
+    {
+      key: "total_work_items",
+      i18nKey: "workspace_analytics.total",
+    },
+    {
+      key: "started_work_items",
+      i18nKey: "workspace_analytics.started_work_items",
+    },
+    {
+      key: "backlog_work_items",
+      i18nKey: "workspace_analytics.backlog_work_items",
+    },
+    {
+      key: "un_started_work_items",
+      i18nKey: "workspace_analytics.un_started_work_items",
+    },
+    {
+      key: "completed_work_items",
+      i18nKey: "workspace_analytics.completed_work_items",
+    },
+  ],
+};
+
+export const ANALYTICS_DURATION_FILTER_OPTIONS = [
+  {
+    name: "Yesterday",
+    value: "yesterday",
+  },
+  {
+    name: "Last 7 days",
+    value: "last_7_days",
+  },
+  {
+    name: "Last 30 days",
+    value: "last_30_days",
+  },
+  {
+    name: "Last 3 months",
+    value: "last_3_months",
+  },
+];
+
+export const ANALYTICS_X_AXIS_VALUES: { value: ChartXAxisProperty; label: string }[] = [
+  {
+    value: ChartXAxisProperty.STATES,
+    label: "State name",
+  },
+  {
+    value: ChartXAxisProperty.STATE_GROUPS,
+    label: "State group",
+  },
+  {
+    value: ChartXAxisProperty.PRIORITY,
+    label: "Priority",
+  },
+  {
+    value: ChartXAxisProperty.LABELS,
+    label: "Label",
+  },
+  {
+    value: ChartXAxisProperty.ASSIGNEES,
+    label: "Assignee",
+  },
+  {
+    value: ChartXAxisProperty.ESTIMATE_POINTS,
+    label: "Estimate point",
+  },
+  {
+    value: ChartXAxisProperty.CYCLES,
+    label: "Cycle",
+  },
+  {
+    value: ChartXAxisProperty.MODULES,
+    label: "Module",
+  },
+  {
+    value: ChartXAxisProperty.COMPLETED_AT,
+    label: "Completed date",
+  },
+  {
+    value: ChartXAxisProperty.TARGET_DATE,
+    label: "Due date",
+  },
+  {
+    value: ChartXAxisProperty.START_DATE,
+    label: "Start date",
+  },
+  {
+    value: ChartXAxisProperty.CREATED_AT,
+    label: "Created date",
+  },
+];
+
+export const ANALYTICS_Y_AXIS_VALUES: { value: ChartYAxisMetric; label: string }[] = [
+  {
+    value: ChartYAxisMetric.WORK_ITEM_COUNT,
+    label: "Work item",
+  },
+  {
+    value: ChartYAxisMetric.ESTIMATE_POINT_COUNT,
+    label: "Estimate",
+  },
+  {
+    value: ChartYAxisMetric.EPIC_WORK_ITEM_COUNT,
+    label: "Epic",
+  },
+];
+
+export const ANALYTICS_V2_DATE_KEYS = ["completed_at", "target_date", "start_date", "created_at"];
diff --git a/packages/constants/src/analytics/index.ts b/packages/constants/src/analytics/index.ts
new file mode 100644
index 0000000..5d755be
--- /dev/null
+++ b/packages/constants/src/analytics/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./common";
diff --git a/packages/constants/src/auth/core.ts b/packages/constants/src/auth/core.ts
new file mode 100644
index 0000000..a6a26c6
--- /dev/null
+++ b/packages/constants/src/auth/core.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TCoreLoginMediums } from "@plane/types";
+
+export const CORE_LOGIN_MEDIUM_LABELS: Record<TCoreLoginMediums, string> = {
+  email: "Email",
+  "magic-code": "Magic code",
+  github: "GitHub",
+  gitlab: "GitLab",
+  google: "Google",
+  gitea: "Gitea",
+};
diff --git a/packages/constants/src/auth/extended.ts b/packages/constants/src/auth/extended.ts
new file mode 100644
index 0000000..aaf067a
--- /dev/null
+++ b/packages/constants/src/auth/extended.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TExtendedLoginMediums } from "@plane/types";
+
+export const EXTENDED_LOGIN_MEDIUM_LABELS: Record<TExtendedLoginMediums, string> = {};
diff --git a/packages/constants/src/auth/index.ts b/packages/constants/src/auth/index.ts
new file mode 100644
index 0000000..9d29181
--- /dev/null
+++ b/packages/constants/src/auth/index.ts
@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TLoginMediums } from "@plane/types";
+import { CORE_LOGIN_MEDIUM_LABELS } from "./core";
+import { EXTENDED_LOGIN_MEDIUM_LABELS } from "./extended";
+
+export enum E_PASSWORD_STRENGTH {
+  EMPTY = "empty",
+  LENGTH_NOT_VALID = "length_not_valid",
+  STRENGTH_NOT_VALID = "strength_not_valid",
+  STRENGTH_VALID = "strength_valid",
+}
+
+export const PASSWORD_MIN_LENGTH = 8;
+
+export const SPACE_PASSWORD_CRITERIA = [
+  {
+    key: "min_8_char",
+    label: "Min 8 characters",
+    isCriteriaValid: (password: string) => password.length >= PASSWORD_MIN_LENGTH,
+  },
+  // {
+  //   key: "min_1_upper_case",
+  //   label: "Min 1 upper-case letter",
+  //   isCriteriaValid: (password: string) => PASSWORD_NUMBER_REGEX.test(password),
+  // },
+  // {
+  //   key: "min_1_number",
+  //   label: "Min 1 number",
+  //   isCriteriaValid: (password: string) => PASSWORD_CHAR_CAPS_REGEX.test(password),
+  // },
+  // {
+  //   key: "min_1_special_char",
+  //   label: "Min 1 special character",
+  //   isCriteriaValid: (password: string) => PASSWORD_SPECIAL_CHAR_REGEX.test(password),
+  // },
+];
+
+export enum EAuthPageTypes {
+  PUBLIC = "PUBLIC",
+  NON_AUTHENTICATED = "NON_AUTHENTICATED",
+  SET_PASSWORD = "SET_PASSWORD",
+  ONBOARDING = "ONBOARDING",
+  AUTHENTICATED = "AUTHENTICATED",
+}
+
+export enum EPageTypes {
+  INIT = "INIT",
+  PUBLIC = "PUBLIC",
+  NON_AUTHENTICATED = "NON_AUTHENTICATED",
+  ONBOARDING = "ONBOARDING",
+  AUTHENTICATED = "AUTHENTICATED",
+}
+
+export enum EAuthModes {
+  SIGN_IN = "SIGN_IN",
+  SIGN_UP = "SIGN_UP",
+}
+
+export enum EAuthSteps {
+  EMAIL = "EMAIL",
+  PASSWORD = "PASSWORD",
+  UNIQUE_CODE = "UNIQUE_CODE",
+}
+
+export enum EErrorAlertType {
+  BANNER_ALERT = "BANNER_ALERT",
+  TOAST_ALERT = "TOAST_ALERT",
+  INLINE_FIRST_NAME = "INLINE_FIRST_NAME",
+  INLINE_EMAIL = "INLINE_EMAIL",
+  INLINE_PASSWORD = "INLINE_PASSWORD",
+  INLINE_EMAIL_CODE = "INLINE_EMAIL_CODE",
+}
+
+export type TAuthErrorInfo = {
+  type: EErrorAlertType;
+  code: EAuthErrorCodes;
+  title: string;
+  message: string | React.ReactNode;
+};
+
+export enum EAdminAuthErrorCodes {
+  // Admin
+  ADMIN_ALREADY_EXIST = "5150",
+  REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5155",
+  INVALID_ADMIN_EMAIL = "5160",
+  INVALID_ADMIN_PASSWORD = "5165",
+  REQUIRED_ADMIN_EMAIL_PASSWORD = "5170",
+  ADMIN_AUTHENTICATION_FAILED = "5175",
+  ADMIN_USER_ALREADY_EXIST = "5180",
+  ADMIN_USER_DOES_NOT_EXIST = "5185",
+  ADMIN_USER_DEACTIVATED = "5190",
+}
+
+export type TAdminAuthErrorInfo = {
+  type: EErrorAlertType;
+  code: EAdminAuthErrorCodes;
+  title: string;
+  message: string | React.ReactNode;
+};
+
+export enum EAuthErrorCodes {
+  // Global
+  INSTANCE_NOT_CONFIGURED = "5000",
+  INVALID_EMAIL = "5005",
+  EMAIL_REQUIRED = "5010",
+  SIGNUP_DISABLED = "5015",
+  MAGIC_LINK_LOGIN_DISABLED = "5016",
+  BOT_USER_LOGIN_FORBIDDEN = "5017",
+  PASSWORD_LOGIN_DISABLED = "5018",
+  USER_ACCOUNT_DEACTIVATED = "5019",
+  // Password strength
+  INVALID_PASSWORD = "5020",
+  PASSWORD_TOO_WEAK = "5021",
+  SMTP_NOT_CONFIGURED = "5025",
+  // Sign Up
+  USER_ALREADY_EXIST = "5030",
+  AUTHENTICATION_FAILED_SIGN_UP = "5035",
+  REQUIRED_EMAIL_PASSWORD_SIGN_UP = "5040",
+  INVALID_EMAIL_SIGN_UP = "5045",
+  INVALID_EMAIL_MAGIC_SIGN_UP = "5050",
+  MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED = "5055",
+  // Sign In
+  USER_DOES_NOT_EXIST = "5060",
+  AUTHENTICATION_FAILED_SIGN_IN = "5065",
+  REQUIRED_EMAIL_PASSWORD_SIGN_IN = "5070",
+  INVALID_EMAIL_SIGN_IN = "5075",
+  INVALID_EMAIL_MAGIC_SIGN_IN = "5080",
+  MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED = "5085",
+  // Both Sign in and Sign up for magic
+  INVALID_MAGIC_CODE_SIGN_IN = "5090",
+  INVALID_MAGIC_CODE_SIGN_UP = "5092",
+  EXPIRED_MAGIC_CODE_SIGN_IN = "5095",
+  EXPIRED_MAGIC_CODE_SIGN_UP = "5097",
+  EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN = "5100",
+  EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP = "5102",
+  // Oauth
+  OAUTH_NOT_CONFIGURED = "5104",
+  GOOGLE_NOT_CONFIGURED = "5105",
+  GITHUB_NOT_CONFIGURED = "5110",
+  GITLAB_NOT_CONFIGURED = "5111",
+  GOOGLE_OAUTH_PROVIDER_ERROR = "5115",
+  GITHUB_OAUTH_PROVIDER_ERROR = "5120",
+  GITLAB_OAUTH_PROVIDER_ERROR = "5121",
+  // Reset Password
+  INVALID_PASSWORD_TOKEN = "5125",
+  EXPIRED_PASSWORD_TOKEN = "5130",
+  // Change password
+  INCORRECT_OLD_PASSWORD = "5135",
+  MISSING_PASSWORD = "5138",
+  INVALID_NEW_PASSWORD = "5140",
+  // set password
+  PASSWORD_ALREADY_SET = "5145",
+  // Admin
+  ADMIN_ALREADY_EXIST = "5150",
+  REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME = "5155",
+  INVALID_ADMIN_EMAIL = "5160",
+  INVALID_ADMIN_PASSWORD = "5165",
+  REQUIRED_ADMIN_EMAIL_PASSWORD = "5170",
+  ADMIN_AUTHENTICATION_FAILED = "5175",
+  ADMIN_USER_ALREADY_EXIST = "5180",
+  ADMIN_USER_DOES_NOT_EXIST = "5185",
+  ADMIN_USER_DEACTIVATED = "5190",
+  // Rate limit
+  RATE_LIMIT_EXCEEDED = "5900",
+}
+
+export const LOGIN_MEDIUM_LABELS: Record<TLoginMediums, string> = {
+  ...CORE_LOGIN_MEDIUM_LABELS,
+  ...EXTENDED_LOGIN_MEDIUM_LABELS,
+} as const;
diff --git a/packages/constants/src/calendar.ts b/packages/constants/src/calendar.ts
new file mode 100644
index 0000000..86d1d62
--- /dev/null
+++ b/packages/constants/src/calendar.ts
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TCalendarLayouts } from "@plane/types";
+import { EStartOfTheWeek } from "@plane/types";
+
+export const MONTHS_LIST: {
+  [monthNumber: number]: {
+    shortTitle: string;
+    title: string;
+  };
+} = {
+  1: {
+    shortTitle: "Jan",
+    title: "January",
+  },
+  2: {
+    shortTitle: "Feb",
+    title: "February",
+  },
+  3: {
+    shortTitle: "Mar",
+    title: "March",
+  },
+  4: {
+    shortTitle: "Apr",
+    title: "April",
+  },
+  5: {
+    shortTitle: "May",
+    title: "May",
+  },
+  6: {
+    shortTitle: "Jun",
+    title: "June",
+  },
+  7: {
+    shortTitle: "Jul",
+    title: "July",
+  },
+  8: {
+    shortTitle: "Aug",
+    title: "August",
+  },
+  9: {
+    shortTitle: "Sep",
+    title: "September",
+  },
+  10: {
+    shortTitle: "Oct",
+    title: "October",
+  },
+  11: {
+    shortTitle: "Nov",
+    title: "November",
+  },
+  12: {
+    shortTitle: "Dec",
+    title: "December",
+  },
+};
+
+export const DAYS_LIST: {
+  [dayIndex: number]: {
+    shortTitle: string;
+    title: string;
+    value: EStartOfTheWeek;
+  };
+} = {
+  1: {
+    shortTitle: "Sun",
+    title: "Sunday",
+    value: EStartOfTheWeek.SUNDAY,
+  },
+  2: {
+    shortTitle: "Mon",
+    title: "Monday",
+    value: EStartOfTheWeek.MONDAY,
+  },
+  3: {
+    shortTitle: "Tue",
+    title: "Tuesday",
+    value: EStartOfTheWeek.TUESDAY,
+  },
+  4: {
+    shortTitle: "Wed",
+    title: "Wednesday",
+    value: EStartOfTheWeek.WEDNESDAY,
+  },
+  5: {
+    shortTitle: "Thu",
+    title: "Thursday",
+    value: EStartOfTheWeek.THURSDAY,
+  },
+  6: {
+    shortTitle: "Fri",
+    title: "Friday",
+    value: EStartOfTheWeek.FRIDAY,
+  },
+  7: {
+    shortTitle: "Sat",
+    title: "Saturday",
+    value: EStartOfTheWeek.SATURDAY,
+  },
+};
+
+export const CALENDAR_LAYOUTS: {
+  [layout in TCalendarLayouts]: {
+    key: TCalendarLayouts;
+    title: string;
+  };
+} = {
+  month: {
+    key: "month",
+    title: "Month layout",
+  },
+  week: {
+    key: "week",
+    title: "Week layout",
+  },
+};
diff --git a/packages/constants/src/chart.ts b/packages/constants/src/chart.ts
new file mode 100644
index 0000000..8a002a5
--- /dev/null
+++ b/packages/constants/src/chart.ts
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TChartColorScheme } from "@plane/types";
+import { ChartXAxisProperty } from "@plane/types";
+
+export const LABEL_CLASSNAME = "uppercase text-tertiary/60 text-13 tracking-wide";
+export const AXIS_LABEL_CLASSNAME = "uppercase text-tertiary/60 text-13 tracking-wide";
+
+export enum ChartXAxisDateGrouping {
+  DAY = "DAY",
+  WEEK = "WEEK",
+  MONTH = "MONTH",
+  YEAR = "YEAR",
+}
+
+export const TO_CAPITALIZE_PROPERTIES: ChartXAxisProperty[] = [
+  ChartXAxisProperty.PRIORITY,
+  ChartXAxisProperty.STATE_GROUPS,
+];
+
+export const CHART_X_AXIS_DATE_PROPERTIES: ChartXAxisProperty[] = [
+  ChartXAxisProperty.START_DATE,
+  ChartXAxisProperty.TARGET_DATE,
+  ChartXAxisProperty.CREATED_AT,
+  ChartXAxisProperty.COMPLETED_AT,
+];
+
+export enum EChartModels {
+  BASIC = "BASIC",
+  STACKED = "STACKED",
+  GROUPED = "GROUPED",
+  MULTI_LINE = "MULTI_LINE",
+  COMPARISON = "COMPARISON",
+  PROGRESS = "PROGRESS",
+}
+
+export const CHART_COLOR_PALETTES: {
+  key: TChartColorScheme;
+  i18n_label: string;
+  light: string[];
+  dark: string[];
+}[] = [
+  {
+    key: "modern",
+    i18n_label: "dashboards.widget.color_palettes.modern",
+    light: [
+      "#6172E8",
+      "#8B6EDB",
+      "#E05F99",
+      "#29A383",
+      "#CB8A37",
+      "#3AA7C1",
+      "#F1B24A",
+      "#E84855",
+      "#50C799",
+      "#B35F9E",
+    ],
+    dark: [
+      "#6B7CDE",
+      "#8E9DE6",
+      "#D45D9E",
+      "#2EAF85",
+      "#D4A246",
+      "#29A7C1",
+      "#B89F6A",
+      "#D15D64",
+      "#4ED079",
+      "#A169A4",
+    ],
+  },
+  {
+    key: "horizon",
+    i18n_label: "dashboards.widget.color_palettes.horizon",
+    light: [
+      "#E76E50",
+      "#289D90",
+      "#F3A362",
+      "#E9C368",
+      "#264753",
+      "#8A6FA0",
+      "#5B9EE5",
+      "#7CC474",
+      "#BA7DB5",
+      "#CF8640",
+    ],
+    dark: [
+      "#E05A3A",
+      "#1D8A7E",
+      "#D98B4D",
+      "#D1AC50",
+      "#3A6B7C",
+      "#7D6297",
+      "#4D8ACD",
+      "#569C64",
+      "#C16A8C",
+      "#B77436",
+    ],
+  },
+  {
+    key: "earthen",
+    i18n_label: "dashboards.widget.color_palettes.earthen",
+    light: [
+      "#386641",
+      "#6A994E",
+      "#A7C957",
+      "#E97F4E",
+      "#BC4749",
+      "#9E2A2B",
+      "#80CED1",
+      "#5C3E79",
+      "#526EAB",
+      "#6B5B95",
+    ],
+    dark: [
+      "#497752",
+      "#7BAA5F",
+      "#B8DA68",
+      "#FA905F",
+      "#CD585A",
+      "#AF3B3C",
+      "#91DFE2",
+      "#6D4F8A",
+      "#637FBC",
+      "#7C6CA6",
+    ],
+  },
+];
diff --git a/packages/constants/src/cycle.ts b/packages/constants/src/cycle.ts
new file mode 100644
index 0000000..253a8cf
--- /dev/null
+++ b/packages/constants/src/cycle.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+export const CYCLE_STATUS: {
+  i18n_label: string;
+  value: "current" | "upcoming" | "completed" | "draft";
+  i18n_title: string;
+  color: string;
+  textColor: string;
+  bgColor: string;
+}[] = [
+  {
+    i18n_label: "project_cycles.status.days_left",
+    value: "current",
+    i18n_title: "project_cycles.status.in_progress",
+    color: "#F59E0B",
+    textColor: "text-amber-500",
+    bgColor: "bg-amber-50",
+  },
+  {
+    i18n_label: "project_cycles.status.yet_to_start",
+    value: "upcoming",
+    i18n_title: "project_cycles.status.yet_to_start",
+    color: "#3F76FF",
+    textColor: "text-blue-500",
+    bgColor: "bg-indigo-50",
+  },
+  {
+    i18n_label: "project_cycles.status.completed",
+    value: "completed",
+    i18n_title: "project_cycles.status.completed",
+    color: "#16A34A",
+    textColor: "text-success-primary",
+    bgColor: "bg-success-subtle",
+  },
+  {
+    i18n_label: "project_cycles.status.draft",
+    value: "draft",
+    i18n_title: "project_cycles.status.draft",
+    color: "#525252",
+    textColor: "text-tertiary",
+    bgColor: "bg-surface-2",
+  },
+];
diff --git a/packages/constants/src/dashboard.ts b/packages/constants/src/dashboard.ts
new file mode 100644
index 0000000..dbc097c
--- /dev/null
+++ b/packages/constants/src/dashboard.ts
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { TIssuesListTypes } from "@plane/types";
+
+export enum EDurationFilters {
+  NONE = "none",
+  TODAY = "today",
+  THIS_WEEK = "this_week",
+  THIS_MONTH = "this_month",
+  THIS_YEAR = "this_year",
+  CUSTOM = "custom",
+}
+
+// filter duration options
+export const DURATION_FILTER_OPTIONS: {
+  key: EDurationFilters;
+  label: string;
+}[] = [
+  {
+    key: EDurationFilters.NONE,
+    label: "All time",
+  },
+  {
+    key: EDurationFilters.TODAY,
+    label: "Due today",
+  },
+  {
+    key: EDurationFilters.THIS_WEEK,
+    label: "Due this week",
+  },
+  {
+    key: EDurationFilters.THIS_MONTH,
+    label: "Due this month",
+  },
+  {
+    key: EDurationFilters.THIS_YEAR,
+    label: "Due this year",
+  },
+  {
+    key: EDurationFilters.CUSTOM,
+    label: "Custom",
+  },
+];
+
+// random background colors for project cards
+export const PROJECT_BACKGROUND_COLORS = [
+  "bg-gray-500/20",
+  "bg-success-subtle",
+  "bg-danger-subtle",
+  "bg-orange-500/20",
+  "bg-blue-500/20",
+  "bg-yellow-500/20",
+  "bg-pink-500/20",
+  "bg-purple-500/20",
+];
+
+// assigned and created issues widgets tabs list
+export const FILTERED_ISSUES_TABS_LIST: {
+  key: TIssuesListTypes;
+  label: string;
+}[] = [
+  {
+    key: "upcoming",
+    label: "Upcoming",
+  },
+  {
+    key: "overdue",
+    label: "Overdue",
+  },
+  {
+    key: "completed",
+    label: "Marked completed",
+  },
+];
+
+// assigned and created issues widgets tabs list
+export const UNFILTERED_ISSUES_TABS_LIST: {
+  key: TIssuesListTypes;
+  label: string;
+}[] = [
+  {
+    key: "pending",
+    label: "Pending",
+  },
+  {
+    key: "completed",
+    label: "Marked completed",
+  },
+];
+
+export type TLinkOptions = {
+  userId: string | undefined;
+};
diff --git a/packages/constants/src/emoji.ts b/packages/constants/src/emoji.ts
new file mode 100644
index 0000000..1fcc864
--- /dev/null
+++ b/packages/constants/src/emoji.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const ISSUE_REACTION_EMOJI_CODES = [
+  "128077",
+  "128078",
+  "128516",
+  "128165",
+  "128533",
+  "129505",
+  "9992",
+  "128064",
+];
+
+export const RANDOM_EMOJI_CODES = [
+  "8986",
+  "9200",
+  "128204",
+  "127773",
+  "127891",
+  "128076",
+  "128077",
+  "128187",
+  "128188",
+  "128512",
+  "128522",
+  "128578",
+];
diff --git a/packages/constants/src/endpoints.ts b/packages/constants/src/endpoints.ts
new file mode 100644
index 0000000..630f07e
--- /dev/null
+++ b/packages/constants/src/endpoints.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const API_BASE_URL = process.env.VITE_API_BASE_URL || "";
+export const API_BASE_PATH = process.env.VITE_API_BASE_PATH || "";
+export const API_URL = encodeURI(`${API_BASE_URL}${API_BASE_PATH}`);
+// God Mode Admin App Base Url
+export const ADMIN_BASE_URL = process.env.VITE_ADMIN_BASE_URL || "";
+export const ADMIN_BASE_PATH = process.env.VITE_ADMIN_BASE_PATH || "";
+export const GOD_MODE_URL = encodeURI(`${ADMIN_BASE_URL}${ADMIN_BASE_PATH}`);
+// Publish App Base Url
+export const SPACE_BASE_URL = process.env.VITE_SPACE_BASE_URL || "";
+export const SPACE_BASE_PATH = process.env.VITE_SPACE_BASE_PATH || "";
+export const SITES_URL = encodeURI(`${SPACE_BASE_URL}${SPACE_BASE_PATH}`);
+// Live App Base Url
+export const LIVE_BASE_URL = process.env.VITE_LIVE_BASE_URL || "";
+export const LIVE_BASE_PATH = process.env.VITE_LIVE_BASE_PATH || "";
+export const LIVE_URL = encodeURI(`${LIVE_BASE_URL}${LIVE_BASE_PATH}`);
+// Web App Base Url
+export const WEB_BASE_URL = process.env.VITE_WEB_BASE_URL || "";
+export const WEB_BASE_PATH = process.env.VITE_WEB_BASE_PATH || "";
+export const WEB_URL = encodeURI(`${WEB_BASE_URL}${WEB_BASE_PATH}`);
+// plane website url
+export const WEBSITE_URL = process.env.VITE_WEBSITE_URL || "https://plane.so";
+// support email
+export const SUPPORT_EMAIL = process.env.VITE_SUPPORT_EMAIL || "support@plane.so";
+// marketing links
+export const MARKETING_PRICING_PAGE_LINK = "https://plane.so/pricing";
+export const MARKETING_CONTACT_US_PAGE_LINK = "https://plane.so/contact";
+export const MARKETING_PLANE_ONE_PAGE_LINK = "https://plane.so/one";
diff --git a/packages/constants/src/estimates.ts b/packages/constants/src/estimates.ts
new file mode 100644
index 0000000..d8145b7
--- /dev/null
+++ b/packages/constants/src/estimates.ts
@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TEstimateSystems } from "@plane/types";
+
+export const MAX_ESTIMATE_POINT_INPUT_LENGTH = 20;
+
+export enum EEstimateSystem {
+  POINTS = "points",
+  CATEGORIES = "categories",
+  TIME = "time",
+}
+
+export enum EEstimateUpdateStages {
+  CREATE = "create",
+  EDIT = "edit",
+  SWITCH = "switch",
+}
+
+export const estimateCount = {
+  min: 2,
+  max: 6,
+};
+
+export const ESTIMATE_SYSTEMS: TEstimateSystems = {
+  points: {
+    name: "Points",
+    i18n_name: "project_settings.estimates.systems.points.label",
+    templates: {
+      fibonacci: {
+        title: "Fibonacci",
+        i18n_title: "project_settings.estimates.systems.points.fibonacci",
+        values: [
+          { id: undefined, key: 1, value: "1" },
+          { id: undefined, key: 2, value: "2" },
+          { id: undefined, key: 3, value: "3" },
+          { id: undefined, key: 4, value: "5" },
+          { id: undefined, key: 5, value: "8" },
+          { id: undefined, key: 6, value: "13" },
+        ],
+      },
+      linear: {
+        title: "Linear",
+        i18n_title: "project_settings.estimates.systems.points.linear",
+        values: [
+          { id: undefined, key: 1, value: "1" },
+          { id: undefined, key: 2, value: "2" },
+          { id: undefined, key: 3, value: "3" },
+          { id: undefined, key: 4, value: "4" },
+          { id: undefined, key: 5, value: "5" },
+          { id: undefined, key: 6, value: "6" },
+        ],
+      },
+      squares: {
+        title: "Squares",
+        i18n_title: "project_settings.estimates.systems.points.squares",
+        values: [
+          { id: undefined, key: 1, value: "1" },
+          { id: undefined, key: 2, value: "4" },
+          { id: undefined, key: 3, value: "9" },
+          { id: undefined, key: 4, value: "16" },
+          { id: undefined, key: 5, value: "25" },
+          { id: undefined, key: 6, value: "36" },
+        ],
+      },
+      custom: {
+        title: "Custom",
+        i18n_title: "project_settings.estimates.systems.points.custom",
+        values: [
+          { id: undefined, key: 1, value: "1" },
+          { id: undefined, key: 2, value: "2" },
+        ],
+        hide: true,
+      },
+    },
+    is_available: true,
+    is_ee: false,
+  },
+  categories: {
+    name: "Categories",
+    i18n_name: "project_settings.estimates.systems.categories.label",
+    templates: {
+      t_shirt_sizes: {
+        title: "T-Shirt Sizes",
+        i18n_title: "project_settings.estimates.systems.categories.t_shirt_sizes",
+        values: [
+          { id: undefined, key: 1, value: "XS" },
+          { id: undefined, key: 2, value: "S" },
+          { id: undefined, key: 3, value: "M" },
+          { id: undefined, key: 4, value: "L" },
+          { id: undefined, key: 5, value: "XL" },
+          { id: undefined, key: 6, value: "XXL" },
+        ],
+      },
+      easy_to_hard: {
+        title: "Easy to hard",
+        i18n_title: "project_settings.estimates.systems.categories.easy_to_hard",
+        values: [
+          { id: undefined, key: 1, value: "Easy" },
+          { id: undefined, key: 2, value: "Medium" },
+          { id: undefined, key: 3, value: "Hard" },
+          { id: undefined, key: 4, value: "Very Hard" },
+        ],
+      },
+      custom: {
+        title: "Custom",
+        i18n_title: "project_settings.estimates.systems.categories.custom",
+        values: [
+          { id: undefined, key: 1, value: "Easy" },
+          { id: undefined, key: 2, value: "Hard" },
+        ],
+        hide: true,
+      },
+    },
+    is_available: true,
+    is_ee: false,
+  },
+  time: {
+    name: "Time",
+    i18n_name: "project_settings.estimates.systems.time.label",
+    templates: {
+      hours: {
+        title: "Hours",
+        i18n_title: "project_settings.estimates.systems.time.hours",
+        values: [
+          { id: undefined, key: 1, value: "1" },
+          { id: undefined, key: 2, value: "2" },
+          { id: undefined, key: 3, value: "3" },
+          { id: undefined, key: 4, value: "4" },
+          { id: undefined, key: 5, value: "5" },
+          { id: undefined, key: 6, value: "6" },
+        ],
+      },
+    },
+    is_available: true,
+    is_ee: true,
+  },
+};
diff --git a/packages/constants/src/fetch-keys.ts b/packages/constants/src/fetch-keys.ts
new file mode 100644
index 0000000..e0db818
--- /dev/null
+++ b/packages/constants/src/fetch-keys.ts
@@ -0,0 +1,206 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EUserPermissions, IJiraMetadata } from "@plane/types";
+
+const paramsToKey = (params: any) => {
+  const {
+    state,
+    state_group,
+    priority,
+    mentions,
+    assignees,
+    created_by,
+    labels,
+    start_date,
+    target_date,
+    sub_issue,
+    project,
+    layout,
+    subscriber,
+  } = params;
+
+  let projectKey = project ? project.split(",") : [];
+  let stateKey = state ? state.split(",") : [];
+  let stateGroupKey = state_group ? state_group.split(",") : [];
+  let priorityKey = priority ? priority.split(",") : [];
+  let mentionsKey = mentions ? mentions.split(",") : [];
+  let assigneesKey = assignees ? assignees.split(",") : [];
+  let createdByKey = created_by ? created_by.split(",") : [];
+  let labelsKey = labels ? labels.split(",") : [];
+  let subscriberKey = subscriber ? subscriber.split(",") : [];
+  const startDateKey = start_date ?? "";
+  const targetDateKey = target_date ?? "";
+  const type = params.type ? params.type.toUpperCase() : "NULL";
+  const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
+  const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
+  const layoutKey = layout ? layout.toUpperCase() : "";
+
+  // sorting each keys in ascending order
+  projectKey = projectKey.toSorted().join("_");
+  stateKey = stateKey.toSorted().join("_");
+  stateGroupKey = stateGroupKey.toSorted().join("_");
+  priorityKey = priorityKey.toSorted().join("_");
+  assigneesKey = assigneesKey.toSorted().join("_");
+  mentionsKey = mentionsKey.toSorted().join("_");
+  createdByKey = createdByKey.toSorted().join("_");
+  labelsKey = labelsKey.toSorted().join("_");
+  subscriberKey = subscriberKey.toSorted().join("_");
+
+  return `${layoutKey}_${projectKey}_${stateGroupKey}_${stateKey}_${priorityKey}_${assigneesKey}_${mentionsKey}_${createdByKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${startDateKey}_${targetDateKey}_${sub_issue}_${subscriberKey}`;
+};
+
+export const USER_WORKSPACES_LIST = "USER_WORKSPACES_LIST";
+
+export const WORKSPACE_PARTIAL_PROJECTS = (workspaceSlug: string) =>
+  `WORKSPACE_PARTIAL_PROJECTS_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_MODULES = (workspaceSlug: string) => `WORKSPACE_MODULES_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_CYCLES = (workspaceSlug: string) => `WORKSPACE_CYCLES_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_LABELS = (workspaceSlug: string) => `WORKSPACE_LABELS_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_ESTIMATES = (workspaceSlug: string) => `WORKSPACE_ESTIMATES_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_WORKFLOW_STATES = (workspaceSlug: string) =>
+  `WORKSPACE_WORKFLOW_STATES_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_INVITATION = (invitationId: string) => `WORKSPACE_INVITATION_${invitationId}`;
+
+export const WORKSPACE_MEMBER_ME_INFORMATION = (workspaceSlug: string) =>
+  `WORKSPACE_MEMBER_ME_INFORMATION_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_MEMBER_ACTIVITY = (workspaceSlug: string) =>
+  `WORKSPACE_MEMBER_ACTIVITY_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_PROJECTS_ROLES_INFORMATION = (workspaceSlug: string) =>
+  `WORKSPACE_PROJECTS_ROLES_INFORMATION_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_FAVORITE = (workspaceSlug: string) => `WORKSPACE_FAVORITE_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_STATES = (workspaceSlug: string) => `WORKSPACE_STATES_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_SIDEBAR_PREFERENCES = (workspaceSlug: string) =>
+  `WORKSPACE_SIDEBAR_PREFERENCES_${workspaceSlug.toUpperCase()}`;
+
+export const WORKSPACE_PROJECT_NAVIGATION_PREFERENCES = (workspaceSlug: string) =>
+  `WORKSPACE_PROJECT_NAVIGATION_PREFERENCES_${workspaceSlug.toUpperCase()}`;
+
+export const PROJECT_GITHUB_REPOSITORY = (projectId: string) => `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
+
+// cycles
+export const WORKSPACE_ACTIVE_CYCLES_LIST = (workspaceSlug: string, cursor: string, per_page: string) =>
+  `WORKSPACE_ACTIVE_CYCLES_LIST_${workspaceSlug.toUpperCase()}_${cursor.toUpperCase()}_${per_page.toUpperCase()}`;
+export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => {
+  if (!params) return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}`;
+
+  const paramsKey = paramsToKey(params);
+
+  return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}_${paramsKey.toUpperCase()}`;
+};
+
+export const USER_ACTIVITY = (params: { cursor?: string }) => `USER_ACTIVITY_${params?.cursor}`;
+
+// Issues
+export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId.toUpperCase()}`;
+
+// integrations
+export const APP_INTEGRATIONS = "APP_INTEGRATIONS";
+export const WORKSPACE_INTEGRATIONS = (workspaceSlug: string) =>
+  `WORKSPACE_INTEGRATIONS_${workspaceSlug.toUpperCase()}`;
+
+export const JIRA_IMPORTER_DETAIL = (workspaceSlug: string, params: IJiraMetadata) => {
+  const { api_token, cloud_hostname, email, project_key } = params;
+
+  return `JIRA_IMPORTER_DETAIL_${workspaceSlug.toUpperCase()}_${api_token}_${cloud_hostname}_${email}_${project_key}`;
+};
+
+//import-export
+export const IMPORTER_SERVICES_LIST = (workspaceSlug: string) =>
+  `IMPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}`;
+
+//export
+export const EXPORT_SERVICES_LIST = (workspaceSlug: string, cursor: string, per_page: string) =>
+  `EXPORTER_SERVICES_LIST_${workspaceSlug.toUpperCase()}_${cursor.toUpperCase()}_${per_page.toUpperCase()}`;
+
+// github-importer
+export const GITHUB_REPOSITORY_INFO = (workspaceSlug: string, repoName: string) =>
+  `GITHUB_REPO_INFO_${workspaceSlug.toString().toUpperCase()}_${repoName.toUpperCase()}`;
+
+// slack-project-integration
+export const SLACK_CHANNEL_INFO = (workspaceSlug: string, projectId: string) =>
+  `SLACK_CHANNEL_INFO_${workspaceSlug.toString().toUpperCase()}_${projectId.toUpperCase()}`;
+
+// profile
+export const USER_PROFILE_DATA = (workspaceSlug: string, userId: string) =>
+  `USER_PROFILE_ACTIVITY_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`;
+export const USER_PROFILE_ACTIVITY = (
+  workspaceSlug: string,
+  userId: string,
+  params: {
+    cursor?: string;
+  }
+) => `USER_WORKSPACE_PROFILE_ACTIVITY_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}_${params?.cursor}`;
+export const USER_PROFILE_PROJECT_SEGREGATION = (workspaceSlug: string, userId: string) =>
+  `USER_PROFILE_PROJECT_SEGREGATION_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}`;
+
+// api-tokens
+export const API_TOKENS_LIST = `API_TOKENS_LIST`;
+
+// marketplace
+export const APPLICATIONS_LIST = (workspaceSlug: string) => `APPLICATIONS_LIST_${workspaceSlug.toUpperCase()}`;
+export const APPLICATION_DETAILS = (applicationId: string) => `APPLICATION_DETAILS_${applicationId.toUpperCase()}`;
+export const APPLICATION_BY_CLIENT_ID = (clientId: string) => `APPLICATION_BY_CLIENT_ID_${clientId.toUpperCase()}`;
+export const APPLICATION_CATEGORIES_LIST = () => `APPLICATION_CATEGORIES_LIST`;
+
+// project level keys
+export const PROJECT_DETAILS = (_workspaceSlug: string, projectId: string) =>
+  `PROJECT_DETAILS_${projectId.toString().toUpperCase()}`;
+
+export const PROJECT_ME_INFORMATION = (_workspaceSlug: string, projectId: string) =>
+  `PROJECT_ME_INFORMATION_${projectId.toString().toUpperCase()}`;
+
+export const PROJECT_LABELS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_LABELS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_MEMBERS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_MEMBERS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_STATES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_STATES_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_INTAKE_STATE = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_INTAKE_STATE_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_ESTIMATES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_ESTIMATES_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_ALL_CYCLES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_ALL_CYCLES_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_MODULES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_MODULES_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_VIEWS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_VIEWS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_MEMBER_PREFERENCES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_MEMBER_PREFERENCES_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_WORKFLOWS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_WORKFLOWS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const EPICS_PROPERTIES_AND_OPTIONS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `EPICS_PROPERTIES_AND_OPTIONS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const WORK_ITEM_TYPES_PROPERTIES_AND_OPTIONS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `WORK_ITEM_TYPES_PROPERTIES_AND_OPTIONS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_MILESTONES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_MILESTONES_${projectId.toString().toUpperCase()}_${projectRole}`;
diff --git a/packages/constants/src/file.ts b/packages/constants/src/file.ts
new file mode 100644
index 0000000..bd784e0
--- /dev/null
+++ b/packages/constants/src/file.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+
+export const ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE = {
+  "image/jpeg": [],
+  "image/jpg": [],
+  "image/png": [],
+  "image/webp": [],
+};
+export const ACCEPTED_COVER_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE = {
+  "image/jpeg": [],
+  "image/jpg": [],
+  "image/png": [],
+  "image/webp": [],
+};
+
+/**
+ * Dangerous file extensions that should be blocked
+ */
+export const DANGEROUS_EXTENSIONS = [
+  "exe",
+  "bat",
+  "cmd",
+  "sh",
+  "php",
+  "asp",
+  "aspx",
+  "jsp",
+  "cgi",
+  "dll",
+  "vbs",
+  "jar",
+  "ps1",
+];
diff --git a/packages/constants/src/filter.ts b/packages/constants/src/filter.ts
new file mode 100644
index 0000000..9141a2b
--- /dev/null
+++ b/packages/constants/src/filter.ts
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum E_SORT_ORDER {
+  ASC = "asc",
+  DESC = "desc",
+}
+export const DATE_AFTER_FILTER_OPTIONS = [
+  {
+    name: "1 week from now",
+    value: "1_weeks;after;fromnow",
+  },
+  {
+    name: "2 weeks from now",
+    value: "2_weeks;after;fromnow",
+  },
+  {
+    name: "1 month from now",
+    value: "1_months;after;fromnow",
+  },
+  {
+    name: "2 months from now",
+    value: "2_months;after;fromnow",
+  },
+];
+
+export const DATE_BEFORE_FILTER_OPTIONS = [
+  {
+    name: "1 week ago",
+    value: "1_weeks;before;fromnow",
+  },
+  {
+    name: "2 weeks ago",
+    value: "2_weeks;before;fromnow",
+  },
+  {
+    name: "1 month ago",
+    i18n_name: "date_filters.1_month_ago",
+    value: "1_months;before;fromnow",
+  },
+];
+
+export const PROJECT_CREATED_AT_FILTER_OPTIONS = [
+  {
+    name: "Today",
+    value: "today;custom;custom",
+  },
+  {
+    name: "Yesterday",
+    value: "yesterday;custom;custom",
+  },
+  {
+    name: "Last 7 days",
+    value: "last_7_days;custom;custom",
+  },
+  {
+    name: "Last 30 days",
+    value: "last_30_days;custom;custom",
+  },
+];
diff --git a/packages/constants/src/gantt-chart.ts b/packages/constants/src/gantt-chart.ts
new file mode 100644
index 0000000..7ed5c04
--- /dev/null
+++ b/packages/constants/src/gantt-chart.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssueRelationTypes } from "@plane/types";
+
+export const REVERSE_RELATIONS: { [key in TIssueRelationTypes]: TIssueRelationTypes } = {
+  blocked_by: "blocking",
+  blocking: "blocked_by",
+  relates_to: "relates_to",
+  duplicate: "duplicate",
+};
diff --git a/packages/constants/src/graph.ts b/packages/constants/src/graph.ts
new file mode 100644
index 0000000..6ae6053
--- /dev/null
+++ b/packages/constants/src/graph.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const CHARTS_THEME = {
+  background: "transparent",
+  text: {
+    color: "var(--text-color-secondary)",
+  },
+  axis: {
+    domain: {
+      line: {
+        stroke: "var(--background-color-layer-2)",
+        strokeWidth: 0.5,
+      },
+    },
+  },
+  tooltip: {
+    container: {
+      background: "var(--background-color-layer-2)",
+      color: "var(--text-color-secondary)",
+      fontSize: "0.8rem",
+      border: "1px solid var(--border-color-strong)",
+    },
+  },
+  grid: {
+    line: {
+      stroke: "var(--border-color-subtle)",
+    },
+  },
+};
+
+export const CHART_DEFAULT_MARGIN = {
+  top: 50,
+  right: 50,
+  bottom: 50,
+  left: 50,
+};
diff --git a/packages/constants/src/icon.ts b/packages/constants/src/icon.ts
new file mode 100644
index 0000000..06dfa29
--- /dev/null
+++ b/packages/constants/src/icon.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EIconSize {
+  XS = "xs",
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+}
diff --git a/packages/constants/src/index.ts b/packages/constants/src/index.ts
new file mode 100644
index 0000000..fe89380
--- /dev/null
+++ b/packages/constants/src/index.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./ai";
+export * from "./analytics";
+export * from "./auth";
+export * from "./calendar";
+export * from "./chart";
+export * from "./cycle";
+export * from "./dashboard";
+export * from "./emoji";
+export * from "./endpoints";
+export * from "./estimates";
+export * from "./file";
+export * from "./fetch-keys";
+export * from "./filter";
+export * from "./gantt-chart";
+export * from "./graph";
+export * from "./icon";
+export * from "./instance";
+export * from "./intake";
+export * from "./issue";
+export * from "./members";
+export * from "./label";
+export * from "./metadata";
+export * from "./module";
+export * from "./notification";
+export * from "./page";
+export * from "./payment";
+export * from "./profile";
+export * from "./project";
+export * from "./rich-filters";
+export * from "./settings";
+export * from "./sidebar-favorites";
+export * from "./sidebar";
+export * from "./spreadsheet";
+export * from "./state";
+export * from "./stickies";
+export * from "./subscription";
+export * from "./swr";
+export * from "./tab-indices";
+export * from "./themes";
+export * from "./user";
+export * from "./views";
+export * from "./workspace-drafts";
+export * from "./workspace";
diff --git a/packages/constants/src/instance.ts b/packages/constants/src/instance.ts
new file mode 100644
index 0000000..29931a7
--- /dev/null
+++ b/packages/constants/src/instance.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EInstanceStatus {
+  ERROR = "ERROR",
+  NOT_YET_READY = "NOT_YET_READY",
+}
+
+export type TInstanceStatus = {
+  status: EInstanceStatus | undefined;
+  data?: object;
+};
diff --git a/packages/constants/src/intake.ts b/packages/constants/src/intake.ts
new file mode 100644
index 0000000..40ef386
--- /dev/null
+++ b/packages/constants/src/intake.ts
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TInboxIssueStatus } from "@plane/types";
+import { EInboxIssueStatus } from "@plane/types";
+
+export const INBOX_STATUS: {
+  key: string;
+  status: TInboxIssueStatus;
+  i18n_title: string;
+  i18n_description: () => string;
+}[] = [
+  {
+    key: "pending",
+    i18n_title: "inbox_issue.status.pending.title",
+    status: EInboxIssueStatus.PENDING,
+    i18n_description: () => `inbox_issue.status.pending.description`,
+  },
+  {
+    key: "declined",
+    i18n_title: "inbox_issue.status.declined.title",
+    status: EInboxIssueStatus.DECLINED,
+    i18n_description: () => `inbox_issue.status.declined.description`,
+  },
+  {
+    key: "snoozed",
+    i18n_title: "inbox_issue.status.snoozed.title",
+    status: EInboxIssueStatus.SNOOZED,
+    i18n_description: () => `inbox_issue.status.snoozed.description`,
+  },
+  {
+    key: "accepted",
+    i18n_title: "inbox_issue.status.accepted.title",
+    status: EInboxIssueStatus.ACCEPTED,
+    i18n_description: () => `inbox_issue.status.accepted.description`,
+  },
+  {
+    key: "duplicate",
+    i18n_title: "inbox_issue.status.duplicate.title",
+    status: EInboxIssueStatus.DUPLICATE,
+    i18n_description: () => `inbox_issue.status.duplicate.description`,
+  },
+];
+
+export const INBOX_ISSUE_ORDER_BY_OPTIONS = [
+  {
+    key: "issue__created_at",
+    i18n_label: "inbox_issue.order_by.created_at",
+  },
+  {
+    key: "issue__updated_at",
+    i18n_label: "inbox_issue.order_by.updated_at",
+  },
+  {
+    key: "issue__sequence_id",
+    i18n_label: "inbox_issue.order_by.id",
+  },
+];
+
+export const INBOX_ISSUE_SORT_BY_OPTIONS = [
+  {
+    key: "asc",
+    i18n_label: "common.sort.asc",
+  },
+  {
+    key: "desc",
+    i18n_label: "common.sort.desc",
+  },
+];
+
+export enum EPastDurationFilters {
+  TODAY = "today",
+  YESTERDAY = "yesterday",
+  LAST_7_DAYS = "last_7_days",
+  LAST_30_DAYS = "last_30_days",
+}
+
+export const PAST_DURATION_FILTER_OPTIONS: {
+  name: string;
+  value: string;
+}[] = [
+  {
+    name: "Today",
+    value: EPastDurationFilters.TODAY,
+  },
+  {
+    name: "Yesterday",
+    value: EPastDurationFilters.YESTERDAY,
+  },
+  {
+    name: "Last 7 days",
+    value: EPastDurationFilters.LAST_7_DAYS,
+  },
+  {
+    name: "Last 30 days",
+    value: EPastDurationFilters.LAST_30_DAYS,
+  },
+];
diff --git a/packages/constants/src/issue/common.ts b/packages/constants/src/issue/common.ts
new file mode 100644
index 0000000..fe56c44
--- /dev/null
+++ b/packages/constants/src/issue/common.ts
@@ -0,0 +1,366 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TIssue,
+  EIssuesStoreType,
+} from "@plane/types";
+
+export const ALL_ISSUES = "All Issues";
+
+export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
+
+export type TIssueFilterPriorityObject = {
+  key: TIssuePriorities;
+  titleTranslationKey: string;
+  className: string;
+  icon: string;
+};
+
+export enum EIssueGroupByToServerOptions {
+  "state" = "state_id",
+  "priority" = "priority",
+  "labels" = "labels__id",
+  "state_detail.group" = "state__group",
+  "assignees" = "assignees__id",
+  "cycle" = "cycle_id",
+  "module" = "issue_module__module_id",
+  "target_date" = "target_date",
+  "project" = "project_id",
+  "created_by" = "created_by",
+  // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
+  "team_project" = "project_id",
+}
+
+export enum EIssueGroupBYServerToProperty {
+  "state_id" = "state_id",
+  "priority" = "priority",
+  "labels__id" = "label_ids",
+  "state__group" = "state__group",
+  "assignees__id" = "assignee_ids",
+  "cycle_id" = "cycle_id",
+  "issue_module__module_id" = "module_ids",
+  "target_date" = "target_date",
+  "project_id" = "project_id",
+  "created_by" = "created_by",
+}
+
+export enum EIssueCommentAccessSpecifier {
+  EXTERNAL = "EXTERNAL",
+  INTERNAL = "INTERNAL",
+}
+
+export enum EIssueListRow {
+  HEADER = "HEADER",
+  ISSUE = "ISSUE",
+  NO_ISSUES = "NO_ISSUES",
+  QUICK_ADD = "QUICK_ADD",
+}
+
+export const ISSUE_PRIORITIES: {
+  key: TIssuePriorities;
+  title: string;
+}[] = [
+  {
+    key: "urgent",
+    title: "Urgent",
+  },
+  {
+    key: "high",
+    title: "High",
+  },
+  {
+    key: "medium",
+    title: "Medium",
+  },
+  {
+    key: "low",
+    title: "Low",
+  },
+  {
+    key: "none",
+    title: "None",
+  },
+];
+
+export const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = [
+  "state",
+  "priority",
+  "assignees",
+  "labels",
+  "module",
+  "cycle",
+];
+
+export type TCreateModalStoreTypes =
+  | EIssuesStoreType.TEAM
+  | EIssuesStoreType.PROJECT
+  | EIssuesStoreType.TEAM_VIEW
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.PROFILE
+  | EIssuesStoreType.CYCLE
+  | EIssuesStoreType.MODULE
+  | EIssuesStoreType.EPIC
+  | EIssuesStoreType.TEAM_PROJECT_WORK_ITEMS;
+
+export const ISSUE_GROUP_BY_OPTIONS: {
+  key: TIssueGroupByOptions;
+  titleTranslationKey: string;
+}[] = [
+  { key: "state", titleTranslationKey: "common.states" },
+  { key: "state_detail.group", titleTranslationKey: "common.state_groups" },
+  { key: "priority", titleTranslationKey: "common.priority" },
+  { key: "team_project", titleTranslationKey: "common.team_project" }, // required this on team issues
+  { key: "project", titleTranslationKey: "common.project" }, // required this on my issues
+  { key: "cycle", titleTranslationKey: "common.cycle" }, // required this on my issues
+  { key: "module", titleTranslationKey: "common.module" }, // required this on my issues
+  { key: "labels", titleTranslationKey: "common.labels" },
+  { key: "assignees", titleTranslationKey: "common.assignees" },
+  { key: "created_by", titleTranslationKey: "common.created_by" },
+  { key: null, titleTranslationKey: "common.none" },
+];
+
+export const ISSUE_ORDER_BY_OPTIONS: {
+  key: TIssueOrderByOptions;
+  titleTranslationKey: string;
+}[] = [
+  { key: "sort_order", titleTranslationKey: "common.order_by.manual" },
+  { key: "-created_at", titleTranslationKey: "common.order_by.last_created" },
+  { key: "-updated_at", titleTranslationKey: "common.order_by.last_updated" },
+  { key: "start_date", titleTranslationKey: "common.order_by.start_date" },
+  { key: "target_date", titleTranslationKey: "common.order_by.due_date" },
+  { key: "-priority", titleTranslationKey: "common.priority" },
+];
+
+export const ISSUE_DISPLAY_PROPERTIES_KEYS: (keyof IIssueDisplayProperties)[] = [
+  "assignee",
+  "start_date",
+  "due_date",
+  "labels",
+  "key",
+  "priority",
+  "state",
+  "sub_issue_count",
+  "link",
+  "attachment_count",
+  "estimate",
+  "created_on",
+  "updated_on",
+  "modules",
+  "cycle",
+  "issue_type",
+];
+
+export const SUB_ISSUES_DISPLAY_PROPERTIES_KEYS: (keyof IIssueDisplayProperties)[] = [
+  "key",
+  "assignee",
+  "start_date",
+  "due_date",
+  "priority",
+  "state",
+];
+
+export const ISSUE_DISPLAY_PROPERTIES: {
+  key: keyof IIssueDisplayProperties;
+  titleTranslationKey: string;
+}[] = [
+  {
+    key: "key",
+    titleTranslationKey: "issue.display.properties.id",
+  },
+  {
+    key: "assignee",
+    titleTranslationKey: "common.assignee",
+  },
+  {
+    key: "start_date",
+    titleTranslationKey: "common.order_by.start_date",
+  },
+  {
+    key: "due_date",
+    titleTranslationKey: "common.order_by.due_date",
+  },
+  { key: "labels", titleTranslationKey: "common.labels" },
+  {
+    key: "priority",
+    titleTranslationKey: "common.priority",
+  },
+  { key: "state", titleTranslationKey: "common.state" },
+  {
+    key: "sub_issue_count",
+    titleTranslationKey: "issue.display.properties.sub_issue_count",
+  },
+  {
+    key: "attachment_count",
+    titleTranslationKey: "issue.display.properties.attachment_count",
+  },
+  { key: "link", titleTranslationKey: "common.link" },
+  {
+    key: "estimate",
+    titleTranslationKey: "common.estimate",
+  },
+  { key: "modules", titleTranslationKey: "common.module" },
+  { key: "cycle", titleTranslationKey: "common.cycle" },
+];
+
+export const SPREADSHEET_PROPERTY_LIST: (keyof IIssueDisplayProperties)[] = [
+  "state",
+  "priority",
+  "assignee",
+  "labels",
+  "modules",
+  "cycle",
+  "start_date",
+  "due_date",
+  "estimate",
+  "created_on",
+  "updated_on",
+  "link",
+  "attachment_count",
+  "sub_issue_count",
+];
+
+export const SPREADSHEET_PROPERTY_DETAILS: {
+  [key in keyof IIssueDisplayProperties]: {
+    i18n_title: string;
+    ascendingOrderKey: TIssueOrderByOptions;
+    ascendingOrderTitle: string;
+    descendingOrderKey: TIssueOrderByOptions;
+    descendingOrderTitle: string;
+    icon: string;
+  };
+} = {
+  assignee: {
+    i18n_title: "common.assignees",
+    ascendingOrderKey: "assignees__first_name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-assignees__first_name",
+    descendingOrderTitle: "Z",
+    icon: "MembersPropertyIcon",
+  },
+  created_on: {
+    i18n_title: "common.sort.created_on",
+    ascendingOrderKey: "-created_at",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "created_at",
+    descendingOrderTitle: "Old",
+    icon: "CalendarDays",
+  },
+  due_date: {
+    i18n_title: "common.order_by.due_date",
+    ascendingOrderKey: "-target_date",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "target_date",
+    descendingOrderTitle: "Old",
+    icon: "DueDatePropertyIcon",
+  },
+  estimate: {
+    i18n_title: "common.estimate",
+    ascendingOrderKey: "estimate_point__key",
+    ascendingOrderTitle: "Low",
+    descendingOrderKey: "-estimate_point__key",
+    descendingOrderTitle: "High",
+    icon: "EstimatePropertyIcon",
+  },
+  labels: {
+    i18n_title: "common.labels",
+    ascendingOrderKey: "labels__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-labels__name",
+    descendingOrderTitle: "Z",
+    icon: "LabelPropertyIcon",
+  },
+  modules: {
+    i18n_title: "common.modules",
+    ascendingOrderKey: "issue_module__module__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-issue_module__module__name",
+    descendingOrderTitle: "Z",
+    icon: "DiceIcon",
+  },
+  cycle: {
+    i18n_title: "common.cycle",
+    ascendingOrderKey: "issue_cycle__cycle__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-issue_cycle__cycle__name",
+    descendingOrderTitle: "Z",
+    icon: "ContrastIcon",
+  },
+  priority: {
+    i18n_title: "common.priority",
+    ascendingOrderKey: "priority",
+    ascendingOrderTitle: "None",
+    descendingOrderKey: "-priority",
+    descendingOrderTitle: "Urgent",
+    icon: "PriorityPropertyIcon",
+  },
+  start_date: {
+    i18n_title: "common.order_by.start_date",
+    ascendingOrderKey: "-start_date",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "start_date",
+    descendingOrderTitle: "Old",
+    icon: "StartDatePropertyIcon",
+  },
+  state: {
+    i18n_title: "common.state",
+    ascendingOrderKey: "state__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-state__name",
+    descendingOrderTitle: "Z",
+    icon: "StatePropertyIcon",
+  },
+  updated_on: {
+    i18n_title: "common.sort.updated_on",
+    ascendingOrderKey: "-updated_at",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "updated_at",
+    descendingOrderTitle: "Old",
+    icon: "CalendarDays",
+  },
+  link: {
+    i18n_title: "common.link",
+    ascendingOrderKey: "-link_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "link_count",
+    descendingOrderTitle: "Least",
+    icon: "Link2",
+  },
+  attachment_count: {
+    i18n_title: "common.attachment",
+    ascendingOrderKey: "-attachment_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "attachment_count",
+    descendingOrderTitle: "Least",
+    icon: "Paperclip",
+  },
+  sub_issue_count: {
+    i18n_title: "issue.display.properties.sub_issue",
+    ascendingOrderKey: "-sub_issues_count",
+    ascendingOrderTitle: "Most",
+    descendingOrderKey: "sub_issues_count",
+    descendingOrderTitle: "Least",
+    icon: "LayersIcon",
+  },
+};
+
+// Map filter keys to their corresponding issue property keys
+export const FILTER_TO_ISSUE_MAP: Partial<Record<keyof IIssueFilterOptions, keyof TIssue>> = {
+  assignees: "assignee_ids",
+  created_by: "created_by",
+  labels: "label_ids",
+  priority: "priority",
+  cycle: "cycle_id",
+  module: "module_ids",
+  project: "project_id",
+  state: "state_id",
+  issue_type: "type_id",
+  state_group: "state__group",
+} as const;
diff --git a/packages/constants/src/issue/filter.ts b/packages/constants/src/issue/filter.ts
new file mode 100644
index 0000000..115b885
--- /dev/null
+++ b/packages/constants/src/issue/filter.ts
@@ -0,0 +1,368 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  IIssueFilterOptions,
+  ILayoutDisplayFiltersOptions,
+  TIssueActivityComment,
+  TWorkItemFilterProperty,
+} from "@plane/types";
+import { EIssuesStoreType } from "@plane/types";
+import type { TIssueFilterPriorityObject } from "./common";
+import { ISSUE_DISPLAY_PROPERTIES_KEYS, SUB_ISSUES_DISPLAY_PROPERTIES_KEYS } from "./common";
+
+import type { TIssueLayout } from "./layout";
+
+export type TIssueFilterKeys = "priority" | "state" | "labels";
+
+export enum EServerGroupByToFilterOptions {
+  "state_id" = "state",
+  "priority" = "priority",
+  "labels__id" = "labels",
+  "state__group" = "state_group",
+  "assignees__id" = "assignees",
+  "cycle_id" = "cycle",
+  "issue_module__module_id" = "module",
+  "target_date" = "target_date",
+  "project_id" = "project",
+  "created_by" = "created_by",
+}
+
+export enum EIssueFilterType {
+  FILTERS = "rich_filters",
+  DISPLAY_FILTERS = "display_filters",
+  DISPLAY_PROPERTIES = "display_properties",
+  KANBAN_FILTERS = "kanban_filters",
+}
+
+export type TSupportedFilterTypeForUpdate =
+  | EIssueFilterType.DISPLAY_FILTERS
+  | EIssueFilterType.DISPLAY_PROPERTIES
+  | EIssueFilterType.KANBAN_FILTERS;
+
+export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
+  [key in TIssueLayout]: Record<"filters", TIssueFilterKeys[]>;
+} = {
+  list: {
+    filters: ["priority", "state", "labels"],
+  },
+  kanban: {
+    filters: ["priority", "state", "labels"],
+  },
+  calendar: {
+    filters: ["priority", "state", "labels"],
+  },
+  spreadsheet: {
+    filters: ["priority", "state", "labels"],
+  },
+  gantt: {
+    filters: ["priority", "state", "labels"],
+  },
+};
+
+export const ISSUE_PRIORITY_FILTERS: TIssueFilterPriorityObject[] = [
+  {
+    key: "urgent",
+    titleTranslationKey: "issue.priority.urgent",
+    className: "bg-layer-2 text-priority-urgent border-strong",
+    icon: "error",
+  },
+  {
+    key: "high",
+    titleTranslationKey: "issue.priority.high",
+    className: "bg-layer-2 text-priority-high border-strong",
+    icon: "signal_cellular_alt",
+  },
+  {
+    key: "medium",
+    titleTranslationKey: "issue.priority.medium",
+    className: "bg-layer-2 text-priority-medium border-strong",
+    icon: "signal_cellular_alt_2_bar",
+  },
+  {
+    key: "low",
+    titleTranslationKey: "issue.priority.low",
+    className: "bg-layer-2 text-priority-low border-strong",
+    icon: "signal_cellular_alt_1_bar",
+  },
+  {
+    key: "none",
+    titleTranslationKey: "common.none",
+    className: "bg-layer-2 text-priority-none border-strong",
+    icon: "block",
+  },
+];
+
+export type TFiltersLayoutOptions = {
+  [layoutType: string]: ILayoutDisplayFiltersOptions;
+};
+
+export type TFilterPropertiesByPageType = {
+  filters: TWorkItemFilterProperty[];
+  layoutOptions: TFiltersLayoutOptions;
+};
+
+export type TIssueFiltersToDisplayByPageType = {
+  [pageType: string]: TFilterPropertiesByPageType;
+};
+
+export const ISSUE_DISPLAY_FILTERS_BY_PAGE: TIssueFiltersToDisplayByPageType = {
+  profile_issues: {
+    filters: ["priority", "state_group", "label_id", "start_date", "target_date"],
+    layoutOptions: {
+      list: {
+        display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+        display_filters: {
+          group_by: ["state_detail.group", "priority", "project", "labels", null],
+          order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: true,
+          values: ["show_empty_groups", "sub_issue"],
+        },
+      },
+      kanban: {
+        display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+        display_filters: {
+          group_by: ["state_detail.group", "priority", "project", "labels"],
+          order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: true,
+          values: ["show_empty_groups"],
+        },
+      },
+    },
+  },
+  archived_issues: {
+    filters: [
+      "priority",
+      "state_group",
+      "state_id",
+      "cycle_id",
+      "module_id",
+      "assignee_id",
+      "created_by_id",
+      "label_id",
+      "start_date",
+      "target_date",
+    ],
+    layoutOptions: {
+      list: {
+        display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+        display_filters: {
+          group_by: ["state", "cycle", "module", "priority", "labels", "assignees", "created_by", null],
+          order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: true,
+          values: ["show_empty_groups"],
+        },
+      },
+    },
+  },
+  my_issues: {
+    filters: [
+      "priority",
+      "state_group",
+      "label_id",
+      "assignee_id",
+      "created_by_id",
+      "subscriber_id",
+      "project_id",
+      "start_date",
+      "target_date",
+    ],
+    layoutOptions: {
+      spreadsheet: {
+        display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+        display_filters: {
+          order_by: [],
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: true,
+          values: ["sub_issue"],
+        },
+      },
+      list: {
+        display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+        display_filters: {
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: false,
+          values: [],
+        },
+      },
+    },
+  },
+  issues: {
+    filters: [
+      "priority",
+      "state_group",
+      "state_id",
+      "cycle_id",
+      "module_id",
+      "assignee_id",
+      "mention_id",
+      "created_by_id",
+      "label_id",
+      "start_date",
+      "target_date",
+    ],
+    layoutOptions: {
+      list: {
+        display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+        display_filters: {
+          group_by: ["state", "priority", "cycle", "module", "labels", "assignees", "created_by", null],
+          order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority", "target_date"],
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: true,
+          values: ["show_empty_groups", "sub_issue"],
+        },
+      },
+      kanban: {
+        display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+        display_filters: {
+          group_by: ["state", "priority", "cycle", "module", "labels", "assignees", "created_by"],
+          sub_group_by: ["state", "priority", "cycle", "module", "labels", "assignees", "created_by", null],
+          order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority", "target_date"],
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: true,
+          values: ["show_empty_groups", "sub_issue"],
+        },
+      },
+      calendar: {
+        display_properties: ["key", "issue_type"],
+        display_filters: {
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: true,
+          values: ["sub_issue"],
+        },
+      },
+      spreadsheet: {
+        display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+        display_filters: {
+          order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: true,
+          values: ["sub_issue"],
+        },
+      },
+      gantt_chart: {
+        display_properties: ["key", "issue_type"],
+        display_filters: {
+          order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
+          type: ["active", "backlog"],
+        },
+        extra_options: {
+          access: true,
+          values: ["sub_issue"],
+        },
+      },
+    },
+  },
+  sub_work_items: {
+    filters: ["priority", "state_id", "assignee_id", "start_date", "target_date"],
+    layoutOptions: {
+      list: {
+        display_properties: SUB_ISSUES_DISPLAY_PROPERTIES_KEYS,
+        display_filters: {
+          order_by: ["-created_at", "-updated_at", "start_date", "-priority"],
+          group_by: ["state", "priority", "assignees", null],
+        },
+        extra_options: {
+          access: true,
+          values: ["sub_issue"],
+        },
+      },
+    },
+  },
+};
+
+export const ISSUE_STORE_TO_FILTERS_MAP: Partial<Record<EIssuesStoreType, TFilterPropertiesByPageType>> = {
+  [EIssuesStoreType.PROJECT]: ISSUE_DISPLAY_FILTERS_BY_PAGE.issues,
+};
+
+export const SUB_WORK_ITEM_AVAILABLE_FILTERS_FOR_WORK_ITEM_PAGE: (keyof IIssueFilterOptions)[] = [
+  "priority",
+  "state",
+  "issue_type",
+  "assignees",
+  "start_date",
+  "target_date",
+];
+
+export enum EActivityFilterType {
+  ACTIVITY = "ACTIVITY",
+  COMMENT = "COMMENT",
+  STATE = "STATE",
+  ASSIGNEE = "ASSIGNEE",
+  DEFAULT = "DEFAULT",
+}
+
+export type TActivityFilters = EActivityFilterType;
+
+export type TActivityFilterOptionsKey = Exclude<TActivityFilters, EActivityFilterType.DEFAULT>;
+
+export const ACTIVITY_FILTER_TYPE_OPTIONS: Record<TActivityFilterOptionsKey, { labelTranslationKey: string }> = {
+  [EActivityFilterType.ACTIVITY]: {
+    labelTranslationKey: "common.updates",
+  },
+  [EActivityFilterType.COMMENT]: {
+    labelTranslationKey: "common.comments",
+  },
+  [EActivityFilterType.STATE]: {
+    labelTranslationKey: "common.state",
+  },
+  [EActivityFilterType.ASSIGNEE]: {
+    labelTranslationKey: "common.assignee",
+  },
+};
+
+export type TActivityFilterOption = {
+  key: TActivityFilters;
+  labelTranslationKey: string;
+  isSelected: boolean;
+  onClick: () => void;
+};
+
+export const defaultActivityFilters: TActivityFilters[] = [
+  EActivityFilterType.ACTIVITY,
+  EActivityFilterType.COMMENT,
+  EActivityFilterType.STATE,
+  EActivityFilterType.ASSIGNEE,
+];
+
+export const filterActivityOnSelectedFilters = (
+  activity: TIssueActivityComment[],
+  filters: TActivityFilters[]
+): TIssueActivityComment[] =>
+  activity.filter((activity) => {
+    if (activity.activity_type === EActivityFilterType.DEFAULT) return true;
+    return filters.includes(activity.activity_type as TActivityFilters);
+  });
+
+export const ENABLE_ISSUE_DEPENDENCIES = false;
+
+export const BASE_ACTIVITY_FILTER_TYPES = [
+  EActivityFilterType.ACTIVITY,
+  EActivityFilterType.STATE,
+  EActivityFilterType.ASSIGNEE,
+  EActivityFilterType.DEFAULT,
+];
diff --git a/packages/constants/src/issue/index.ts b/packages/constants/src/issue/index.ts
new file mode 100644
index 0000000..d5660c6
--- /dev/null
+++ b/packages/constants/src/issue/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./common";
+export * from "./filter";
+export * from "./layout";
+export * from "./modal";
diff --git a/packages/constants/src/issue/layout.ts b/packages/constants/src/issue/layout.ts
new file mode 100644
index 0000000..a649543
--- /dev/null
+++ b/packages/constants/src/issue/layout.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { EIssueLayoutTypes } from "@plane/types";
+
+export type TIssueLayout = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
+
+export type TIssueLayoutMap = Record<
+  EIssueLayoutTypes,
+  {
+    key: EIssueLayoutTypes;
+    i18n_title: string;
+    i18n_label: string;
+  }
+>;
+
+export const SITES_ISSUE_LAYOUTS: {
+  key: TIssueLayout;
+  titleTranslationKey: string;
+  icon: string;
+}[] = [
+  {
+    key: "list",
+    icon: "List",
+    titleTranslationKey: "issue.layouts.list",
+  },
+  {
+    key: "kanban",
+    icon: "Kanban",
+    titleTranslationKey: "issue.layouts.kanban",
+  },
+];
+
+export const ISSUE_LAYOUT_MAP: TIssueLayoutMap = {
+  [EIssueLayoutTypes.LIST]: {
+    key: EIssueLayoutTypes.LIST,
+    i18n_title: "issue.layouts.title.list",
+    i18n_label: "issue.layouts.list",
+  },
+  [EIssueLayoutTypes.KANBAN]: {
+    key: EIssueLayoutTypes.KANBAN,
+    i18n_title: "issue.layouts.title.kanban",
+    i18n_label: "issue.layouts.kanban",
+  },
+  [EIssueLayoutTypes.CALENDAR]: {
+    key: EIssueLayoutTypes.CALENDAR,
+    i18n_title: "issue.layouts.title.calendar",
+    i18n_label: "issue.layouts.calendar",
+  },
+  [EIssueLayoutTypes.SPREADSHEET]: {
+    key: EIssueLayoutTypes.SPREADSHEET,
+    i18n_title: "issue.layouts.title.spreadsheet",
+    i18n_label: "issue.layouts.spreadsheet",
+  },
+  [EIssueLayoutTypes.GANTT]: {
+    key: EIssueLayoutTypes.GANTT,
+    i18n_title: "issue.layouts.title.gantt",
+    i18n_label: "issue.layouts.gantt",
+  },
+};
+
+export const ISSUE_LAYOUTS: {
+  key: EIssueLayoutTypes;
+  i18n_title: string;
+  i18n_label: string;
+}[] = Object.values(ISSUE_LAYOUT_MAP);
diff --git a/packages/constants/src/issue/modal.ts b/packages/constants/src/issue/modal.ts
new file mode 100644
index 0000000..b5ce1f8
--- /dev/null
+++ b/packages/constants/src/issue/modal.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TIssue } from "@plane/types";
+
+export const DEFAULT_WORK_ITEM_FORM_VALUES: Partial<TIssue> = {
+  project_id: "",
+  type_id: null,
+  name: "",
+  description_html: "",
+  estimate_point: null,
+  state_id: "",
+  parent_id: null,
+  priority: "none",
+  assignee_ids: [],
+  label_ids: [],
+  cycle_id: null,
+  module_ids: null,
+  start_date: null,
+  target_date: null,
+};
diff --git a/packages/constants/src/label.ts b/packages/constants/src/label.ts
new file mode 100644
index 0000000..37c360e
--- /dev/null
+++ b/packages/constants/src/label.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const LABEL_COLOR_OPTIONS = [
+  "#FF6900",
+  "#FCB900",
+  "#7BDCB5",
+  "#00D084",
+  "#8ED1FC",
+  "#0693E3",
+  "#ABB8C3",
+  "#EB144C",
+  "#F78DA7",
+  "#9900EF",
+];
+
+export const getRandomLabelColor = () => {
+  const randomIndex = Math.floor(Math.random() * LABEL_COLOR_OPTIONS.length);
+  return LABEL_COLOR_OPTIONS[randomIndex];
+};
diff --git a/packages/constants/src/members.ts b/packages/constants/src/members.ts
new file mode 100644
index 0000000..94e1c51
--- /dev/null
+++ b/packages/constants/src/members.ts
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Member property constants - Single source of truth for member spreadsheet properties
+
+export type TMemberOrderByOptions =
+  | "display_name"
+  | "-display_name"
+  | "full_name"
+  | "-full_name"
+  | "email"
+  | "-email"
+  | "joining_date"
+  | "-joining_date"
+  | "role"
+  | "-role";
+
+export interface IProjectMemberDisplayProperties {
+  full_name: boolean;
+  display_name: boolean;
+  email: boolean;
+  joining_date: boolean;
+  role: boolean;
+}
+
+export const MEMBER_PROPERTY_DETAILS: {
+  [key in keyof IProjectMemberDisplayProperties]: {
+    i18n_title: string;
+    ascendingOrderKey: TMemberOrderByOptions;
+    ascendingOrderTitle: string;
+    descendingOrderKey: TMemberOrderByOptions;
+    descendingOrderTitle: string;
+    iconName: string;
+    isSortingAllowed: boolean;
+  };
+} = {
+  full_name: {
+    i18n_title: "project_members.full_name",
+    ascendingOrderKey: "full_name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-full_name",
+    descendingOrderTitle: "Z",
+    iconName: "User",
+    isSortingAllowed: true,
+  },
+  display_name: {
+    i18n_title: "project_members.display_name",
+    ascendingOrderKey: "display_name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-display_name",
+    descendingOrderTitle: "Z",
+    iconName: "User",
+    isSortingAllowed: true,
+  },
+  email: {
+    i18n_title: "project_members.email",
+    ascendingOrderKey: "email",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-email",
+    descendingOrderTitle: "Z",
+    iconName: "Mail",
+    isSortingAllowed: true,
+  },
+  joining_date: {
+    i18n_title: "project_members.joining_date",
+    ascendingOrderKey: "joining_date",
+    ascendingOrderTitle: "Old",
+    descendingOrderKey: "-joining_date",
+    descendingOrderTitle: "New",
+    iconName: "Calendar",
+    isSortingAllowed: true,
+  },
+  role: {
+    i18n_title: "project_members.role",
+    ascendingOrderKey: "role",
+    ascendingOrderTitle: "Guest",
+    descendingOrderKey: "-role",
+    descendingOrderTitle: "Admin",
+    iconName: "Shield",
+    isSortingAllowed: true,
+  },
+};
diff --git a/packages/constants/src/metadata.ts b/packages/constants/src/metadata.ts
new file mode 100644
index 0000000..c44e441
--- /dev/null
+++ b/packages/constants/src/metadata.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const SITE_NAME = "Plane | Simple, extensible, open-source project management tool.";
+export const SITE_TITLE = "Plane | Simple, extensible, open-source project management tool.";
+export const SITE_DESCRIPTION =
+  "Open-source project management tool to manage work items, cycles, and product roadmaps easily";
+export const SITE_KEYWORDS =
+  "software development, plan, ship, software, accelerate, code management, release management, project management, work items tracking, agile, scrum, kanban, collaboration";
+export const SITE_URL = "https://app.plane.so/";
+export const TWITTER_USER_NAME = "Plane | Simple, extensible, open-source project management tool.";
+
+// Plane Sites Metadata
+export const SPACE_SITE_NAME = "Plane Publish | Make your Plane boards and roadmaps pubic with just one-click. ";
+export const SPACE_SITE_TITLE = "Plane Publish | Make your Plane boards public with one-click";
+export const SPACE_SITE_DESCRIPTION = "Plane Publish is a customer feedback management tool built on top of plane.so";
+export const SPACE_SITE_KEYWORDS =
+  "software development, customer feedback, software, accelerate, code management, release management, project management, work items tracking, agile, scrum, kanban, collaboration";
+export const SPACE_SITE_URL = "https://app.plane.so/";
+export const SPACE_TWITTER_USER_NAME = "planepowers";
diff --git a/packages/constants/src/module.ts b/packages/constants/src/module.ts
new file mode 100644
index 0000000..b036180
--- /dev/null
+++ b/packages/constants/src/module.ts
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { TModuleLayoutOptions, TModuleOrderByOptions, TModuleStatus } from "@plane/types";
+
+export const MODULE_STATUS_COLORS: {
+  [key in TModuleStatus]: string;
+} = {
+  backlog: "#a3a3a2",
+  planned: "#3f76ff",
+  paused: "#525252",
+  completed: "#16a34a",
+  cancelled: "#ef4444",
+  "in-progress": "#f39e1f",
+};
+
+export const MODULE_STATUS: {
+  i18n_label: string;
+  value: TModuleStatus;
+  color: string;
+  textColor: string;
+  bgColor: string;
+}[] = [
+  {
+    i18n_label: "project_modules.status.backlog",
+    value: "backlog",
+    color: MODULE_STATUS_COLORS.backlog,
+    textColor: "text-placeholder",
+    bgColor: "bg-layer-1",
+  },
+  {
+    i18n_label: "project_modules.status.planned",
+    value: "planned",
+    color: MODULE_STATUS_COLORS.planned,
+    textColor: "text-blue-500",
+    bgColor: "bg-indigo-50",
+  },
+  {
+    i18n_label: "project_modules.status.in_progress",
+    value: "in-progress",
+    color: MODULE_STATUS_COLORS["in-progress"],
+    textColor: "text-amber-500",
+    bgColor: "bg-amber-50",
+  },
+  {
+    i18n_label: "project_modules.status.paused",
+    value: "paused",
+    color: MODULE_STATUS_COLORS.paused,
+    textColor: "text-tertiary",
+    bgColor: "bg-surface-2",
+  },
+  {
+    i18n_label: "project_modules.status.completed",
+    value: "completed",
+    color: MODULE_STATUS_COLORS.completed,
+    textColor: "text-success-primary",
+    bgColor: "bg-success-subtle",
+  },
+  {
+    i18n_label: "project_modules.status.cancelled",
+    value: "cancelled",
+    color: MODULE_STATUS_COLORS.cancelled,
+    textColor: "text-danger-primary",
+    bgColor: "bg-danger-subtle",
+  },
+];
+
+export const MODULE_VIEW_LAYOUTS: {
+  key: TModuleLayoutOptions;
+  i18n_title: string;
+}[] = [
+  {
+    key: "list",
+    i18n_title: "project_modules.layout.list",
+  },
+  {
+    key: "board",
+    i18n_title: "project_modules.layout.board",
+  },
+  {
+    key: "gantt",
+    i18n_title: "project_modules.layout.timeline",
+  },
+];
+
+export const MODULE_ORDER_BY_OPTIONS: {
+  key: TModuleOrderByOptions;
+  i18n_label: string;
+}[] = [
+  {
+    key: "name",
+    i18n_label: "project_modules.order_by.name",
+  },
+  {
+    key: "progress",
+    i18n_label: "project_modules.order_by.progress",
+  },
+  {
+    key: "issues_length",
+    i18n_label: "project_modules.order_by.issues",
+  },
+  {
+    key: "target_date",
+    i18n_label: "project_modules.order_by.due_date",
+  },
+  {
+    key: "created_at",
+    i18n_label: "project_modules.order_by.created_at",
+  },
+  {
+    key: "sort_order",
+    i18n_label: "project_modules.order_by.manual",
+  },
+];
diff --git a/packages/constants/src/notification.ts b/packages/constants/src/notification.ts
new file mode 100644
index 0000000..9c560f7
--- /dev/null
+++ b/packages/constants/src/notification.ts
@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TUnreadNotificationsCount } from "@plane/types";
+
+export enum ENotificationTab {
+  ALL = "all",
+  MENTIONS = "mentions",
+}
+
+export enum ENotificationFilterType {
+  CREATED = "created",
+  ASSIGNED = "assigned",
+  SUBSCRIBED = "subscribed",
+}
+
+export enum ENotificationLoader {
+  INIT_LOADER = "init-loader",
+  MUTATION_LOADER = "mutation-loader",
+  PAGINATION_LOADER = "pagination-loader",
+  REFRESH = "refresh",
+  MARK_ALL_AS_READY = "mark-all-as-read",
+}
+
+export enum ENotificationQueryParamType {
+  INIT = "init",
+  CURRENT = "current",
+  NEXT = "next",
+}
+
+export type TNotificationTab = ENotificationTab.ALL | ENotificationTab.MENTIONS;
+
+export const NOTIFICATION_TABS = [
+  {
+    i18n_label: "notification.tabs.all",
+    value: ENotificationTab.ALL,
+    count: (unReadNotification: TUnreadNotificationsCount) => unReadNotification?.total_unread_notifications_count || 0,
+  },
+  {
+    i18n_label: "notification.tabs.mentions",
+    value: ENotificationTab.MENTIONS,
+    count: (unReadNotification: TUnreadNotificationsCount) =>
+      unReadNotification?.mention_unread_notifications_count || 0,
+  },
+];
+
+export const FILTER_TYPE_OPTIONS = [
+  {
+    i18n_label: "notification.filter.assigned",
+    value: ENotificationFilterType.ASSIGNED,
+  },
+  {
+    i18n_label: "notification.filter.created",
+    value: ENotificationFilterType.CREATED,
+  },
+  {
+    i18n_label: "notification.filter.subscribed",
+    value: ENotificationFilterType.SUBSCRIBED,
+  },
+];
+
+export const NOTIFICATION_SNOOZE_OPTIONS = [
+  {
+    key: "1_day",
+    i18n_label: "notification.snooze.1_day",
+    value: () => {
+      const date = new Date();
+      return new Date(date.getTime() + 24 * 60 * 60 * 1000);
+    },
+  },
+  {
+    key: "3_days",
+    i18n_label: "notification.snooze.3_days",
+    value: () => {
+      const date = new Date();
+      return new Date(date.getTime() + 3 * 24 * 60 * 60 * 1000);
+    },
+  },
+  {
+    key: "5_days",
+    i18n_label: "notification.snooze.5_days",
+    value: () => {
+      const date = new Date();
+      return new Date(date.getTime() + 5 * 24 * 60 * 60 * 1000);
+    },
+  },
+  {
+    key: "1_week",
+    i18n_label: "notification.snooze.1_week",
+    value: () => {
+      const date = new Date();
+      return new Date(date.getTime() + 7 * 24 * 60 * 60 * 1000);
+    },
+  },
+  {
+    key: "2_weeks",
+    i18n_label: "notification.snooze.2_weeks",
+    value: () => {
+      const date = new Date();
+      return new Date(date.getTime() + 14 * 24 * 60 * 60 * 1000);
+    },
+  },
+  {
+    key: "custom",
+    i18n_label: "notification.snooze.custom",
+    value: undefined,
+  },
+];
+
+// Constant for all time values in 30 minutes interval in 12 hours format
+export const allTimeIn30MinutesInterval12HoursFormat: Array<{
+  label: string;
+  value: string;
+}> = [
+  { label: "12:00", value: "12:00" },
+  { label: "12:30", value: "12:30" },
+  { label: "01:00", value: "01:00" },
+  { label: "01:30", value: "01:30" },
+  { label: "02:00", value: "02:00" },
+  { label: "02:30", value: "02:30" },
+  { label: "03:00", value: "03:00" },
+  { label: "03:30", value: "03:30" },
+  { label: "04:00", value: "04:00" },
+  { label: "04:30", value: "04:30" },
+  { label: "05:00", value: "05:00" },
+  { label: "05:30", value: "05:30" },
+  { label: "06:00", value: "06:00" },
+  { label: "06:30", value: "06:30" },
+  { label: "07:00", value: "07:00" },
+  { label: "07:30", value: "07:30" },
+  { label: "08:00", value: "08:00" },
+  { label: "08:30", value: "08:30" },
+  { label: "09:00", value: "09:00" },
+  { label: "09:30", value: "09:30" },
+  { label: "10:00", value: "10:00" },
+  { label: "10:30", value: "10:30" },
+  { label: "11:00", value: "11:00" },
+  { label: "11:30", value: "11:30" },
+];
diff --git a/packages/constants/src/page.ts b/packages/constants/src/page.ts
new file mode 100644
index 0000000..39f0e5d
--- /dev/null
+++ b/packages/constants/src/page.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EPageAccess {
+  PUBLIC = 0,
+  PRIVATE = 1,
+}
+
+export type TCreatePageModal = {
+  isOpen: boolean;
+  pageAccess?: EPageAccess;
+};
+
+export const DEFAULT_CREATE_PAGE_MODAL_DATA: TCreatePageModal = {
+  isOpen: false,
+  pageAccess: EPageAccess.PUBLIC,
+};
diff --git a/packages/constants/src/payment.ts b/packages/constants/src/payment.ts
new file mode 100644
index 0000000..19fab65
--- /dev/null
+++ b/packages/constants/src/payment.ts
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IPaymentProduct, TBillingFrequency, TProductBillingFrequency } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+
+/**
+ * Default billing frequency for each product subscription type
+ */
+export const DEFAULT_PRODUCT_BILLING_FREQUENCY: TProductBillingFrequency = {
+  [EProductSubscriptionEnum.FREE]: undefined,
+  [EProductSubscriptionEnum.ONE]: undefined,
+  [EProductSubscriptionEnum.PRO]: "month",
+  [EProductSubscriptionEnum.BUSINESS]: "month",
+  [EProductSubscriptionEnum.ENTERPRISE]: "month",
+};
+
+/**
+ * Subscription types that support billing frequency toggle (monthly/yearly)
+ */
+export const SUBSCRIPTION_WITH_BILLING_FREQUENCY = [
+  EProductSubscriptionEnum.PRO,
+  EProductSubscriptionEnum.BUSINESS,
+  EProductSubscriptionEnum.ENTERPRISE,
+];
+
+/**
+ * Mapping of product subscription types to their respective payment product details
+ * Used to provide information about each product's pricing and features
+ */
+export const PLANE_COMMUNITY_PRODUCTS: Record<string, IPaymentProduct> = {
+  [EProductSubscriptionEnum.PRO]: {
+    id: EProductSubscriptionEnum.PRO,
+    name: "Plane Pro",
+    description:
+      "More views, more cycles powers, more pages features, new reports, and better dashboards are waiting to be unlocked.",
+    type: "PRO",
+    prices: [
+      {
+        id: `price_monthly_${EProductSubscriptionEnum.PRO}`,
+        unit_amount: 800,
+        recurring: "month",
+        currency: "usd",
+        workspace_amount: 800,
+        product: EProductSubscriptionEnum.PRO,
+      },
+      {
+        id: `price_yearly_${EProductSubscriptionEnum.PRO}`,
+        unit_amount: 7200,
+        recurring: "year",
+        currency: "usd",
+        workspace_amount: 7200,
+        product: EProductSubscriptionEnum.PRO,
+      },
+    ],
+    payment_quantity: 1,
+    is_active: true,
+  },
+  [EProductSubscriptionEnum.BUSINESS]: {
+    id: EProductSubscriptionEnum.BUSINESS,
+    name: "Plane Business",
+    description:
+      "The earliest packaging of Business at $10 a seat a month billed annually, $12 a seat a month billed monthly for Plane Cloud",
+    type: "BUSINESS",
+    prices: [
+      {
+        id: `price_yearly_${EProductSubscriptionEnum.BUSINESS}`,
+        unit_amount: 15600,
+        recurring: "year",
+        currency: "usd",
+        workspace_amount: 15600,
+        product: EProductSubscriptionEnum.BUSINESS,
+      },
+      {
+        id: `price_monthly_${EProductSubscriptionEnum.BUSINESS}`,
+        unit_amount: 1500,
+        recurring: "month",
+        currency: "usd",
+        workspace_amount: 1500,
+        product: EProductSubscriptionEnum.BUSINESS,
+      },
+    ],
+    payment_quantity: 1,
+    is_active: true,
+  },
+  [EProductSubscriptionEnum.ENTERPRISE]: {
+    id: EProductSubscriptionEnum.ENTERPRISE,
+    name: "Plane Enterprise",
+    description: "",
+    type: "ENTERPRISE",
+    prices: [
+      {
+        id: `price_yearly_${EProductSubscriptionEnum.ENTERPRISE}`,
+        unit_amount: 0,
+        recurring: "year",
+        currency: "usd",
+        workspace_amount: 0,
+        product: EProductSubscriptionEnum.ENTERPRISE,
+      },
+      {
+        id: `price_monthly_${EProductSubscriptionEnum.ENTERPRISE}`,
+        unit_amount: 0,
+        recurring: "month",
+        currency: "usd",
+        workspace_amount: 0,
+        product: EProductSubscriptionEnum.ENTERPRISE,
+      },
+    ],
+    payment_quantity: 1,
+    is_active: false,
+  },
+};
+
+/**
+ * URL for the "Talk to Sales" page where users can contact sales team
+ */
+export const TALK_TO_SALES_URL = "https://plane.so/talk-to-sales";
+
+/**
+ * Mapping of subscription types to their respective upgrade/redirection URLs based on billing frequency
+ * Used for self-hosted installations to redirect users to appropriate upgrade pages
+ */
+export const SUBSCRIPTION_REDIRECTION_URLS: Record<EProductSubscriptionEnum, Record<TBillingFrequency, string>> = {
+  [EProductSubscriptionEnum.FREE]: {
+    month: TALK_TO_SALES_URL,
+    year: TALK_TO_SALES_URL,
+  },
+  [EProductSubscriptionEnum.ONE]: {
+    month: TALK_TO_SALES_URL,
+    year: TALK_TO_SALES_URL,
+  },
+  [EProductSubscriptionEnum.PRO]: {
+    month: "https://app.plane.so/upgrade/pro/self-hosted?plan=month",
+    year: "https://app.plane.so/upgrade/pro/self-hosted?plan=year",
+  },
+  [EProductSubscriptionEnum.BUSINESS]: {
+    month: "https://app.plane.so/upgrade/business/self-hosted?plan=month",
+    year: "https://app.plane.so/upgrade/business/self-hosted?plan=year",
+  },
+  [EProductSubscriptionEnum.ENTERPRISE]: {
+    month: TALK_TO_SALES_URL,
+    year: TALK_TO_SALES_URL,
+  },
+};
+
+/**
+ * Mapping of subscription types to their respective marketing webpage URLs
+ * Used to direct users to learn more about each plan's features and pricing
+ */
+export const SUBSCRIPTION_WEBPAGE_URLS: Record<EProductSubscriptionEnum, string> = {
+  [EProductSubscriptionEnum.FREE]: TALK_TO_SALES_URL,
+  [EProductSubscriptionEnum.ONE]: TALK_TO_SALES_URL,
+  [EProductSubscriptionEnum.PRO]: "https://plane.so/pro",
+  [EProductSubscriptionEnum.BUSINESS]: "https://plane.so/business",
+  [EProductSubscriptionEnum.ENTERPRISE]: "https://plane.so/business",
+};
diff --git a/packages/constants/src/profile.ts b/packages/constants/src/profile.ts
new file mode 100644
index 0000000..5af2770
--- /dev/null
+++ b/packages/constants/src/profile.ts
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { EStartOfTheWeek } from "@plane/types";
+
+export const PROFILE_VIEWER_TAB = [
+  {
+    key: "summary",
+    route: "",
+    i18n_label: "profile.tabs.summary",
+    selected: "/",
+  },
+];
+
+export const PROFILE_ADMINS_TAB = [
+  {
+    key: "assigned",
+    route: "assigned",
+    i18n_label: "profile.tabs.assigned",
+    selected: "/assigned/",
+  },
+  {
+    key: "created",
+    route: "created",
+    i18n_label: "profile.tabs.created",
+    selected: "/created/",
+  },
+  {
+    key: "subscribed",
+    route: "subscribed",
+    i18n_label: "profile.tabs.subscribed",
+    selected: "/subscribed/",
+  },
+  {
+    key: "activity",
+    route: "activity",
+    i18n_label: "profile.tabs.activity",
+    selected: "/activity/",
+  },
+];
+
+export const PREFERENCE_OPTIONS: {
+  id: string;
+  title: string;
+  description: string;
+}[] = [
+  {
+    id: "theme",
+    title: "theme",
+    description: "select_or_customize_your_interface_color_scheme",
+  },
+];
+
+/**
+ * @description The options for the start of the week
+ * @type {Array<{value: EStartOfTheWeek, label: string}>}
+ * @constant
+ */
+export const START_OF_THE_WEEK_OPTIONS = [
+  {
+    value: EStartOfTheWeek.SUNDAY,
+    label: "Sunday",
+  },
+  {
+    value: EStartOfTheWeek.MONDAY,
+    label: "Monday",
+  },
+  {
+    value: EStartOfTheWeek.TUESDAY,
+    label: "Tuesday",
+  },
+  {
+    value: EStartOfTheWeek.WEDNESDAY,
+    label: "Wednesday",
+  },
+  {
+    value: EStartOfTheWeek.THURSDAY,
+    label: "Thursday",
+  },
+  {
+    value: EStartOfTheWeek.FRIDAY,
+    label: "Friday",
+  },
+  {
+    value: EStartOfTheWeek.SATURDAY,
+    label: "Saturday",
+  },
+];
diff --git a/packages/constants/src/project.ts b/packages/constants/src/project.ts
new file mode 100644
index 0000000..b8218d6
--- /dev/null
+++ b/packages/constants/src/project.ts
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TProjectAppliedDisplayFilterKeys, TProjectOrderByOptions } from "@plane/types";
+// local imports
+
+export type TNetworkChoiceIconKey = "Lock" | "Globe2";
+
+export type TNetworkChoice = {
+  key: 0 | 2;
+  labelKey: string;
+  i18n_label: string;
+  description: string;
+  iconKey: TNetworkChoiceIconKey;
+};
+
+export const NETWORK_CHOICES: TNetworkChoice[] = [
+  {
+    key: 0,
+    labelKey: "Private",
+    i18n_label: "workspace_projects.network.private.title",
+    description: "workspace_projects.network.private.description", //"Accessible only by invite",
+    iconKey: "Lock",
+  },
+  {
+    key: 2,
+    labelKey: "Public",
+    i18n_label: "workspace_projects.network.public.title",
+    description: "workspace_projects.network.public.description", //"Anyone in the workspace except Guests can join",
+    iconKey: "Globe2",
+  },
+];
+
+export const GROUP_CHOICES = {
+  backlog: {
+    key: "backlog",
+    i18n_label: "workspace_projects.state.backlog",
+  },
+  unstarted: {
+    key: "unstarted",
+    i18n_label: "workspace_projects.state.unstarted",
+  },
+  started: {
+    key: "started",
+    i18n_label: "workspace_projects.state.started",
+  },
+  completed: {
+    key: "completed",
+    i18n_label: "workspace_projects.state.completed",
+  },
+  cancelled: {
+    key: "cancelled",
+    i18n_label: "workspace_projects.state.cancelled",
+  },
+};
+
+export const PROJECT_AUTOMATION_MONTHS = [
+  { i18n_label: "workspace_projects.common.months_count", value: 1 },
+  { i18n_label: "workspace_projects.common.months_count", value: 3 },
+  { i18n_label: "workspace_projects.common.months_count", value: 6 },
+  { i18n_label: "workspace_projects.common.months_count", value: 9 },
+  { i18n_label: "workspace_projects.common.months_count", value: 12 },
+];
+
+export const PROJECT_ORDER_BY_OPTIONS: {
+  key: TProjectOrderByOptions;
+  i18n_label: string;
+}[] = [
+  {
+    key: "sort_order",
+    i18n_label: "workspace_projects.sort.manual",
+  },
+  {
+    key: "name",
+    i18n_label: "workspace_projects.sort.name",
+  },
+  {
+    key: "created_at",
+    i18n_label: "workspace_projects.sort.created_at",
+  },
+  {
+    key: "members_length",
+    i18n_label: "workspace_projects.sort.members_length",
+  },
+];
+
+export const PROJECT_DISPLAY_FILTER_OPTIONS: {
+  key: TProjectAppliedDisplayFilterKeys;
+  i18n_label: string;
+}[] = [
+  {
+    key: "my_projects",
+    i18n_label: "workspace_projects.scope.my_projects",
+  },
+  {
+    key: "archived_projects",
+    i18n_label: "workspace_projects.scope.archived_projects",
+  },
+];
+
+export const PROJECT_ERROR_MESSAGES = {
+  permissionError: {
+    i18n_title: "workspace_projects.error.permission",
+    i18n_message: undefined,
+  },
+  cycleDeleteError: {
+    i18n_title: "error",
+    i18n_message: "workspace_projects.error.cycle_delete",
+  },
+  moduleDeleteError: {
+    i18n_title: "error",
+    i18n_message: "workspace_projects.error.module_delete",
+  },
+  issueDeleteError: {
+    i18n_title: "error",
+    i18n_message: "workspace_projects.error.issue_delete",
+  },
+};
+
+export enum EProjectFeatureKey {
+  WORK_ITEMS = "work_items",
+  CYCLES = "cycles",
+  MODULES = "modules",
+  VIEWS = "views",
+  PAGES = "pages",
+  INTAKE = "intake",
+}
diff --git a/packages/constants/src/rich-filters/index.ts b/packages/constants/src/rich-filters/index.ts
new file mode 100644
index 0000000..ca9f1a5
--- /dev/null
+++ b/packages/constants/src/rich-filters/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./operator-labels";
+export * from "./option";
diff --git a/packages/constants/src/rich-filters/operator-labels/core.ts b/packages/constants/src/rich-filters/operator-labels/core.ts
new file mode 100644
index 0000000..a973c5f
--- /dev/null
+++ b/packages/constants/src/rich-filters/operator-labels/core.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TCoreSupportedOperators, TCoreSupportedDateFilterOperators } from "@plane/types";
+import { CORE_EQUALITY_OPERATOR, CORE_COLLECTION_OPERATOR, CORE_COMPARISON_OPERATOR } from "@plane/types";
+
+/**
+ * Core operator labels
+ */
+export const CORE_OPERATOR_LABELS_MAP: Record<TCoreSupportedOperators, string> = {
+  [CORE_EQUALITY_OPERATOR.EXACT]: "is",
+  [CORE_COLLECTION_OPERATOR.IN]: "is any of",
+  [CORE_COMPARISON_OPERATOR.RANGE]: "between",
+} as const;
+
+/**
+ * Core date-specific operator labels
+ */
+export const CORE_DATE_OPERATOR_LABELS_MAP: Record<TCoreSupportedDateFilterOperators, string> = {
+  [CORE_EQUALITY_OPERATOR.EXACT]: "is",
+  [CORE_COMPARISON_OPERATOR.RANGE]: "between",
+} as const;
diff --git a/packages/constants/src/rich-filters/operator-labels/extended.ts b/packages/constants/src/rich-filters/operator-labels/extended.ts
new file mode 100644
index 0000000..2c02099
--- /dev/null
+++ b/packages/constants/src/rich-filters/operator-labels/extended.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TExtendedSupportedOperators } from "@plane/types";
+
+/**
+ * Extended operator labels
+ */
+export const EXTENDED_OPERATOR_LABELS_MAP: Record<TExtendedSupportedOperators, string> = {} as const;
+
+/**
+ * Extended date-specific operator labels
+ */
+export const EXTENDED_DATE_OPERATOR_LABELS_MAP: Record<TExtendedSupportedOperators, string> = {} as const;
+
+/**
+ * Negated operator labels for all operators
+ */
+export const NEGATED_OPERATOR_LABELS_MAP: Record<never, string> = {} as const;
+
+/**
+ * Negated date operator labels for all date operators
+ */
+export const NEGATED_DATE_OPERATOR_LABELS_MAP: Record<never, string> = {} as const;
diff --git a/packages/constants/src/rich-filters/operator-labels/index.ts b/packages/constants/src/rich-filters/operator-labels/index.ts
new file mode 100644
index 0000000..4887007
--- /dev/null
+++ b/packages/constants/src/rich-filters/operator-labels/index.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TAllAvailableOperatorsForDisplay, TAllAvailableDateFilterOperatorsForDisplay } from "@plane/types";
+import { CORE_OPERATOR_LABELS_MAP, CORE_DATE_OPERATOR_LABELS_MAP } from "./core";
+import {
+  EXTENDED_OPERATOR_LABELS_MAP,
+  EXTENDED_DATE_OPERATOR_LABELS_MAP,
+  NEGATED_OPERATOR_LABELS_MAP,
+  NEGATED_DATE_OPERATOR_LABELS_MAP,
+} from "./extended";
+
+/**
+ * Empty operator label for unselected state
+ */
+export const EMPTY_OPERATOR_LABEL = "--";
+
+/**
+ * Complete operator labels mapping - combines core, extended, and negated labels
+ */
+export const OPERATOR_LABELS_MAP: Record<TAllAvailableOperatorsForDisplay, string> = {
+  ...CORE_OPERATOR_LABELS_MAP,
+  ...EXTENDED_OPERATOR_LABELS_MAP,
+  ...NEGATED_OPERATOR_LABELS_MAP,
+} as const;
+
+/**
+ * Complete date operator labels mapping - combines core, extended, and negated labels
+ */
+export const DATE_OPERATOR_LABELS_MAP: Record<TAllAvailableDateFilterOperatorsForDisplay, string> = {
+  ...CORE_DATE_OPERATOR_LABELS_MAP,
+  ...EXTENDED_DATE_OPERATOR_LABELS_MAP,
+  ...NEGATED_DATE_OPERATOR_LABELS_MAP,
+} as const;
+
+// -------- RE-EXPORTS --------
+
+export * from "./core";
+export * from "./extended";
diff --git a/packages/constants/src/rich-filters/option.ts b/packages/constants/src/rich-filters/option.ts
new file mode 100644
index 0000000..e937a1d
--- /dev/null
+++ b/packages/constants/src/rich-filters/option.ts
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TExternalFilter } from "@plane/types";
+
+/**
+ * Filter config options.
+ */
+export type TConfigOptions = Record<string, unknown>;
+
+/**
+ * Default filter config options.
+ */
+export const DEFAULT_FILTER_CONFIG_OPTIONS: TConfigOptions = {};
+
+/**
+ * Clear filter config.
+ */
+export type TClearFilterOptions = {
+  label?: string;
+  onFilterClear: () => void | Promise<void>;
+  isDisabled?: boolean;
+};
+
+/**
+ * Save view config.
+ */
+export type TSaveViewOptions<E extends TExternalFilter> = {
+  label?: string;
+  onViewSave: (expression: E) => void | Promise<void>;
+  isDisabled?: boolean;
+};
+
+/**
+ * Update view config.
+ */
+export type TUpdateViewOptions<E extends TExternalFilter> = {
+  label?: string;
+  hasAdditionalChanges?: boolean;
+  onViewUpdate: (expression: E) => void | Promise<void>;
+  isDisabled?: boolean;
+};
+
+/**
+ * Filter expression options.
+ */
+export type TExpressionOptions<E extends TExternalFilter> = {
+  clearFilterOptions?: TClearFilterOptions;
+  saveViewOptions?: TSaveViewOptions<E>;
+  updateViewOptions?: TUpdateViewOptions<E>;
+};
+
+/**
+ * Default filter expression options.
+ */
+export const DEFAULT_FILTER_EXPRESSION_OPTIONS: TExpressionOptions<TExternalFilter> = {};
+
+/**
+ * Auto visibility options.
+ */
+export type TAutoVisibilityOptions =
+  | {
+      autoSetVisibility: true;
+    }
+  | {
+      autoSetVisibility: false;
+      isVisibleOnMount: boolean;
+    };
+
+/**
+ * Default filter visibility options.
+ */
+export const DEFAULT_FILTER_VISIBILITY_OPTIONS: TAutoVisibilityOptions = {
+  autoSetVisibility: true,
+};
+
+/**
+ * Filter options.
+ * - expression: Filter expression options.
+ * - config: Filter config options.
+ */
+export type TFilterOptions<E extends TExternalFilter> = {
+  expression: Partial<TExpressionOptions<E>>;
+  config: Partial<TConfigOptions>;
+  visibility: TAutoVisibilityOptions;
+};
diff --git a/packages/constants/src/settings/index.ts b/packages/constants/src/settings/index.ts
new file mode 100644
index 0000000..ce07612
--- /dev/null
+++ b/packages/constants/src/settings/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./profile";
+export * from "./project";
+export * from "./workspace";
diff --git a/packages/constants/src/settings/profile.ts b/packages/constants/src/settings/profile.ts
new file mode 100644
index 0000000..734dee0
--- /dev/null
+++ b/packages/constants/src/settings/profile.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TProfileSettingsTabs } from "@plane/types";
+
+export enum PROFILE_SETTINGS_CATEGORY {
+  YOUR_PROFILE = "your profile",
+  DEVELOPER = "developer",
+}
+
+export const PROFILE_SETTINGS_CATEGORIES: PROFILE_SETTINGS_CATEGORY[] = [
+  PROFILE_SETTINGS_CATEGORY.YOUR_PROFILE,
+  PROFILE_SETTINGS_CATEGORY.DEVELOPER,
+];
+
+export const PROFILE_SETTINGS_CATEGORY_LABELS: Record<PROFILE_SETTINGS_CATEGORY, string> = {
+  [PROFILE_SETTINGS_CATEGORY.YOUR_PROFILE]: "common.your_profile",
+  [PROFILE_SETTINGS_CATEGORY.DEVELOPER]: "common.developer",
+};
+
+export const PROFILE_SETTINGS: Record<
+  TProfileSettingsTabs,
+  {
+    key: TProfileSettingsTabs;
+    i18n_label: string;
+  }
+> = {
+  general: {
+    key: "general",
+    i18n_label: "profile.actions.profile",
+  },
+  security: {
+    key: "security",
+    i18n_label: "profile.actions.security",
+  },
+  preferences: {
+    key: "preferences",
+    i18n_label: "profile.actions.preferences",
+  },
+  notifications: {
+    key: "notifications",
+    i18n_label: "profile.actions.notifications",
+  },
+  "api-tokens": {
+    key: "api-tokens",
+    i18n_label: "profile.actions.api-tokens",
+  },
+};
+
+export const PROFILE_SETTINGS_TABS: TProfileSettingsTabs[] = Object.keys(PROFILE_SETTINGS) as TProfileSettingsTabs[];
+
+export const GROUPED_PROFILE_SETTINGS: Record<
+  PROFILE_SETTINGS_CATEGORY,
+  { key: TProfileSettingsTabs; i18n_label: string }[]
+> = {
+  [PROFILE_SETTINGS_CATEGORY.YOUR_PROFILE]: [
+    PROFILE_SETTINGS["general"],
+    PROFILE_SETTINGS["preferences"],
+    PROFILE_SETTINGS["notifications"],
+    PROFILE_SETTINGS["security"],
+  ],
+  [PROFILE_SETTINGS_CATEGORY.DEVELOPER]: [PROFILE_SETTINGS["api-tokens"]],
+};
diff --git a/packages/constants/src/settings/project.ts b/packages/constants/src/settings/project.ts
new file mode 100644
index 0000000..b05ae08
--- /dev/null
+++ b/packages/constants/src/settings/project.ts
@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { EUserProjectRoles } from "@plane/types";
+import type { TProjectSettingsItem, TProjectSettingsTabs } from "@plane/types";
+
+export enum PROJECT_SETTINGS_CATEGORY {
+  GENERAL = "general",
+  FEATURES = "features",
+  WORK_STRUCTURE = "work-structure",
+  EXECUTION = "execution",
+}
+
+export const PROJECT_SETTINGS_CATEGORIES: PROJECT_SETTINGS_CATEGORY[] = [
+  PROJECT_SETTINGS_CATEGORY.GENERAL,
+  PROJECT_SETTINGS_CATEGORY.FEATURES,
+  PROJECT_SETTINGS_CATEGORY.WORK_STRUCTURE,
+  PROJECT_SETTINGS_CATEGORY.EXECUTION,
+];
+
+export const PROJECT_SETTINGS_CATEGORY_LABELS: Record<PROJECT_SETTINGS_CATEGORY, string> = {
+  [PROJECT_SETTINGS_CATEGORY.GENERAL]: "common.general",
+  [PROJECT_SETTINGS_CATEGORY.FEATURES]: "common.features",
+  [PROJECT_SETTINGS_CATEGORY.WORK_STRUCTURE]: "common.work_structure",
+  [PROJECT_SETTINGS_CATEGORY.EXECUTION]: "common.execution",
+};
+
+export const PROJECT_SETTINGS: Record<TProjectSettingsTabs, TProjectSettingsItem> = {
+  general: {
+    key: "general",
+    i18n_label: "common.general",
+    href: ``,
+    access: [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER, EUserProjectRoles.GUEST],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`,
+  },
+  members: {
+    key: "members",
+    i18n_label: "common.members",
+    href: `/members`,
+    access: [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER, EUserProjectRoles.GUEST],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/members/`,
+  },
+  features_cycles: {
+    key: "features_cycles",
+    i18n_label: "project_settings.features.cycles.short_title",
+    href: `/features/cycles`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/cycles/`,
+  },
+  features_modules: {
+    key: "features_modules",
+    i18n_label: "project_settings.features.modules.short_title",
+    href: `/features/modules`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/modules/`,
+  },
+  features_views: {
+    key: "features_views",
+    i18n_label: "project_settings.features.views.short_title",
+    href: `/features/views`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/views/`,
+  },
+  features_pages: {
+    key: "features_pages",
+    i18n_label: "project_settings.features.pages.short_title",
+    href: `/features/pages`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/pages/`,
+  },
+  features_intake: {
+    key: "features_intake",
+    i18n_label: "project_settings.features.intake.short_title",
+    href: `/features/intake`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/features/intake/`,
+  },
+  states: {
+    key: "states",
+    i18n_label: "common.states",
+    href: `/states`,
+    access: [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/states/`,
+  },
+  labels: {
+    key: "labels",
+    i18n_label: "common.labels",
+    href: `/labels`,
+    access: [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/labels/`,
+  },
+  estimates: {
+    key: "estimates",
+    i18n_label: "common.estimates",
+    href: `/estimates`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/estimates/`,
+  },
+  automations: {
+    key: "automations",
+    i18n_label: "project_settings.automations.label",
+    href: `/automations`,
+    access: [EUserProjectRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/automations/`,
+  },
+};
+
+export const PROJECT_SETTINGS_FLAT_MAP: TProjectSettingsItem[] = Object.values(PROJECT_SETTINGS);
+
+export const GROUPED_PROJECT_SETTINGS: Record<PROJECT_SETTINGS_CATEGORY, TProjectSettingsItem[]> = {
+  [PROJECT_SETTINGS_CATEGORY.GENERAL]: [PROJECT_SETTINGS["general"], PROJECT_SETTINGS["members"]],
+  [PROJECT_SETTINGS_CATEGORY.FEATURES]: [
+    PROJECT_SETTINGS["features_cycles"],
+    PROJECT_SETTINGS["features_modules"],
+    PROJECT_SETTINGS["features_views"],
+    PROJECT_SETTINGS["features_pages"],
+    PROJECT_SETTINGS["features_intake"],
+  ],
+  [PROJECT_SETTINGS_CATEGORY.WORK_STRUCTURE]: [
+    PROJECT_SETTINGS["states"],
+    PROJECT_SETTINGS["labels"],
+    PROJECT_SETTINGS["estimates"],
+  ],
+  [PROJECT_SETTINGS_CATEGORY.EXECUTION]: [PROJECT_SETTINGS["automations"]],
+};
diff --git a/packages/constants/src/settings/workspace.ts b/packages/constants/src/settings/workspace.ts
new file mode 100644
index 0000000..e9d326e
--- /dev/null
+++ b/packages/constants/src/settings/workspace.ts
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TWorkspaceSettingsItem, TWorkspaceSettingsTabs } from "@plane/types";
+import { EUserWorkspaceRoles } from "@plane/types";
+
+export enum WORKSPACE_SETTINGS_CATEGORY {
+  ADMINISTRATION = "administration",
+  FEATURES = "features",
+  DEVELOPER = "developer",
+}
+
+export const WORKSPACE_SETTINGS_CATEGORIES: WORKSPACE_SETTINGS_CATEGORY[] = [
+  WORKSPACE_SETTINGS_CATEGORY.ADMINISTRATION,
+  WORKSPACE_SETTINGS_CATEGORY.FEATURES,
+  WORKSPACE_SETTINGS_CATEGORY.DEVELOPER,
+];
+
+export const WORKSPACE_SETTINGS_CATEGORY_LABELS: Record<WORKSPACE_SETTINGS_CATEGORY, string> = {
+  [WORKSPACE_SETTINGS_CATEGORY.ADMINISTRATION]: "common.administration",
+  [WORKSPACE_SETTINGS_CATEGORY.FEATURES]: "common.features",
+  [WORKSPACE_SETTINGS_CATEGORY.DEVELOPER]: "common.developer",
+};
+
+export const WORKSPACE_SETTINGS: Record<TWorkspaceSettingsTabs, TWorkspaceSettingsItem> = {
+  general: {
+    key: "general",
+    i18n_label: "workspace_settings.settings.general.title",
+    href: `/settings`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
+  },
+  members: {
+    key: "members",
+    i18n_label: "workspace_settings.settings.members.title",
+    href: `/settings/members`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
+  },
+  "billing-and-plans": {
+    key: "billing-and-plans",
+    i18n_label: "workspace_settings.settings.billing_and_plans.title",
+    href: `/settings/billing`,
+    access: [EUserWorkspaceRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing/`,
+  },
+  export: {
+    key: "export",
+    i18n_label: "workspace_settings.settings.exports.title",
+    href: `/settings/exports`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports/`,
+  },
+  webhooks: {
+    key: "webhooks",
+    i18n_label: "workspace_settings.settings.webhooks.title",
+    href: `/settings/webhooks`,
+    access: [EUserWorkspaceRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks/`,
+  },
+};
+
+export const WORKSPACE_SETTINGS_ACCESS = Object.fromEntries(
+  Object.entries(WORKSPACE_SETTINGS).map(([_, { href, access }]) => [href, access])
+);
+
+export const GROUPED_WORKSPACE_SETTINGS: Record<WORKSPACE_SETTINGS_CATEGORY, TWorkspaceSettingsItem[]> = {
+  [WORKSPACE_SETTINGS_CATEGORY.ADMINISTRATION]: [
+    WORKSPACE_SETTINGS["general"],
+    WORKSPACE_SETTINGS["members"],
+    WORKSPACE_SETTINGS["billing-and-plans"],
+    WORKSPACE_SETTINGS["export"],
+  ],
+  [WORKSPACE_SETTINGS_CATEGORY.FEATURES]: [],
+  [WORKSPACE_SETTINGS_CATEGORY.DEVELOPER]: [WORKSPACE_SETTINGS["webhooks"]],
+};
diff --git a/packages/constants/src/sidebar-favorites.ts b/packages/constants/src/sidebar-favorites.ts
new file mode 100644
index 0000000..af8d740
--- /dev/null
+++ b/packages/constants/src/sidebar-favorites.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IFavorite } from "@plane/types";
+
+export const FAVORITE_ITEM_LINKS: {
+  [key: string]: {
+    itemLevel: "project" | "workspace";
+    getLink: (favorite: IFavorite) => string;
+  };
+} = {
+  project: {
+    itemLevel: "project",
+    getLink: () => `issues`,
+  },
+  cycle: {
+    itemLevel: "project",
+    getLink: (favorite) => `cycles/${favorite.entity_identifier}`,
+  },
+  module: {
+    itemLevel: "project",
+    getLink: (favorite) => `modules/${favorite.entity_identifier}`,
+  },
+  view: {
+    itemLevel: "project",
+    getLink: (favorite) => `views/${favorite.entity_identifier}`,
+  },
+  page: {
+    itemLevel: "project",
+    getLink: (favorite) => `pages/${favorite.entity_identifier}`,
+  },
+};
diff --git a/packages/constants/src/sidebar.ts b/packages/constants/src/sidebar.ts
new file mode 100644
index 0000000..cb7d7f7
--- /dev/null
+++ b/packages/constants/src/sidebar.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const SIDEBAR_WIDTH = 250;
+export const EXTENDED_SIDEBAR_WIDTH = 300;
diff --git a/packages/constants/src/spreadsheet.ts b/packages/constants/src/spreadsheet.ts
new file mode 100644
index 0000000..45bf900
--- /dev/null
+++ b/packages/constants/src/spreadsheet.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const SPREADSHEET_SELECT_GROUP = "spreadsheet-issues";
diff --git a/packages/constants/src/state.ts b/packages/constants/src/state.ts
new file mode 100644
index 0000000..36adef1
--- /dev/null
+++ b/packages/constants/src/state.ts
@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TStateGroups } from "@plane/types";
+
+export type TDraggableData = {
+  groupKey: TStateGroups;
+  id: string;
+};
+
+export const STATE_GROUPS: {
+  [key in TStateGroups]: {
+    key: TStateGroups;
+    label: string;
+    defaultStateName: string;
+    color: string;
+  };
+} = {
+  backlog: {
+    key: "backlog",
+    label: "Backlog",
+    defaultStateName: "Backlog",
+    color: "#d9d9d9",
+  },
+  unstarted: {
+    key: "unstarted",
+    label: "Unstarted",
+    defaultStateName: "Todo",
+    color: "#3f76ff",
+  },
+  started: {
+    key: "started",
+    label: "Started",
+    defaultStateName: "In Progress",
+    color: "#f59e0b",
+  },
+  completed: {
+    key: "completed",
+    label: "Completed",
+    defaultStateName: "Done",
+    color: "#16a34a",
+  },
+  cancelled: {
+    key: "cancelled",
+    label: "Canceled",
+    defaultStateName: "Cancelled",
+    color: "#dc2626",
+  },
+};
+
+export const ARCHIVABLE_STATE_GROUPS = [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key];
+export const COMPLETED_STATE_GROUPS = [STATE_GROUPS.completed.key];
+export const PENDING_STATE_GROUPS = [
+  STATE_GROUPS.backlog.key,
+  STATE_GROUPS.unstarted.key,
+  STATE_GROUPS.started.key,
+  STATE_GROUPS.cancelled.key,
+];
+
+export const STATE_DISTRIBUTION = {
+  [STATE_GROUPS.backlog.key]: {
+    key: STATE_GROUPS.backlog.key,
+    issues: "backlog_issues",
+    points: "backlog_estimate_points",
+  },
+  [STATE_GROUPS.unstarted.key]: {
+    key: STATE_GROUPS.unstarted.key,
+    issues: "unstarted_issues",
+    points: "unstarted_estimate_points",
+  },
+  [STATE_GROUPS.started.key]: {
+    key: STATE_GROUPS.started.key,
+    issues: "started_issues",
+    points: "started_estimate_points",
+  },
+  [STATE_GROUPS.completed.key]: {
+    key: STATE_GROUPS.completed.key,
+    issues: "completed_issues",
+    points: "completed_estimate_points",
+  },
+  [STATE_GROUPS.cancelled.key]: {
+    key: STATE_GROUPS.cancelled.key,
+    issues: "cancelled_issues",
+    points: "cancelled_estimate_points",
+  },
+};
+
+export const PROGRESS_STATE_GROUPS_DETAILS = [
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#16A34A",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#F59E0B",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#3A3A3A",
+  },
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#A3A3A3",
+  },
+];
+
+export const DISPLAY_WORKFLOW_PRO_CTA = false;
diff --git a/packages/constants/src/stickies.ts b/packages/constants/src/stickies.ts
new file mode 100644
index 0000000..4275393
--- /dev/null
+++ b/packages/constants/src/stickies.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const STICKIES_PER_PAGE = 30;
diff --git a/packages/constants/src/subscription.ts b/packages/constants/src/subscription.ts
new file mode 100644
index 0000000..eeb948a
--- /dev/null
+++ b/packages/constants/src/subscription.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const ENTERPRISE_PLAN_FEATURES = [
+  "Private + managed deployments",
+  "GAC",
+  "LDAP support",
+  "Databases + Formulas",
+  "Unlimited and full Automation Flows",
+  "Full-suite professional services",
+];
+
+export const BUSINESS_PLAN_FEATURES = [
+  "Project Templates",
+  "Workflows + Approvals",
+  "Decision + Loops Automation",
+  "Custom Reports",
+  "Nested Pages",
+  "Intake Forms",
+];
+
+export const PRO_PLAN_FEATURES = [
+  "Dashboards + Reports",
+  "Full Time Tracking + Bulk Ops",
+  "Teamspaces",
+  "Trigger And Action",
+  "Wikis",
+  "Popular integrations",
+];
+
+export const ONE_PLAN_FEATURES = [
+  "OIDC + SAML for SSO",
+  "Active Cycles",
+  "Real-time collab + public views and page",
+  "Link pages in issues and vice-versa",
+  "Time-tracking + limited bulk ops",
+  "Docker, Kubernetes and more",
+];
+
+export const FREE_PLAN_UPGRADE_FEATURES = [
+  "OIDC + SAML for SSO",
+  "Time Tracking and Bulk Ops",
+  "Integrations",
+  "Public Views and Pages",
+];
diff --git a/packages/constants/src/swr.ts b/packages/constants/src/swr.ts
new file mode 100644
index 0000000..faceae2
--- /dev/null
+++ b/packages/constants/src/swr.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const DEFAULT_SWR_CONFIG = {
+  refreshWhenHidden: false,
+  revalidateIfStale: false,
+  revalidateOnFocus: false,
+  revalidateOnMount: true,
+  refreshInterval: 600000,
+  errorRetryCount: 3,
+};
+
+export const WEB_SWR_CONFIG = {
+  refreshWhenHidden: false,
+  revalidateIfStale: true,
+  revalidateOnFocus: true,
+  revalidateOnMount: true,
+  errorRetryCount: 3,
+};
diff --git a/packages/constants/src/tab-indices.ts b/packages/constants/src/tab-indices.ts
new file mode 100644
index 0000000..2e771a4
--- /dev/null
+++ b/packages/constants/src/tab-indices.ts
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const ISSUE_FORM_TAB_INDICES = [
+  "name",
+  "description_html",
+  "feeling_lucky",
+  "state_id",
+  "priority",
+  "assignee_ids",
+  "label_ids",
+  "start_date",
+  "target_date",
+  "cycle_id",
+  "module_ids",
+  "estimate_point",
+  "parent_id",
+  "create_more",
+  "discard_button",
+  "draft_button",
+  "submit_button",
+  "project_id",
+  "remove_parent",
+];
+
+export const INTAKE_ISSUE_CREATE_FORM_TAB_INDICES = [
+  "name",
+  "description_html",
+  "state_id",
+  "priority",
+  "assignee_ids",
+  "label_ids",
+  "start_date",
+  "target_date",
+  "cycle_id",
+  "module_ids",
+  "estimate_point",
+  "parent_id",
+  "create_more",
+  "discard_button",
+  "submit_button",
+];
+
+export const CREATE_LABEL_TAB_INDICES = ["name", "color", "cancel", "submit"];
+
+export const PROJECT_CREATE_TAB_INDICES = [
+  "name",
+  "identifier",
+  "description",
+  "network",
+  "lead",
+  "cancel",
+  "submit",
+  "close",
+  "cover_image",
+  "logo_props",
+];
+
+export const PROJECT_CYCLE_TAB_INDICES = ["name", "description", "date_range", "cancel", "submit", "project_id"];
+
+export const PROJECT_MODULE_TAB_INDICES = [
+  "name",
+  "description",
+  "date_range",
+  "status",
+  "lead",
+  "member_ids",
+  "cancel",
+  "submit",
+];
+
+export const PROJECT_VIEW_TAB_INDICES = ["name", "description", "filters", "cancel", "submit"];
+
+export const PROJECT_PAGE_TAB_INDICES = ["name", "public", "private", "cancel", "submit"];
+
+export enum ETabIndices {
+  ISSUE_FORM = "issue-form",
+  INTAKE_ISSUE_FORM = "intake-issue-form",
+  CREATE_LABEL = "create-label",
+  PROJECT_CREATE = "project-create",
+  PROJECT_CYCLE = "project-cycle",
+  PROJECT_MODULE = "project-module",
+  PROJECT_VIEW = "project-view",
+  PROJECT_PAGE = "project-page",
+}
+
+export const TAB_INDEX_MAP: Record<ETabIndices, string[]> = {
+  [ETabIndices.ISSUE_FORM]: ISSUE_FORM_TAB_INDICES,
+  [ETabIndices.INTAKE_ISSUE_FORM]: INTAKE_ISSUE_CREATE_FORM_TAB_INDICES,
+  [ETabIndices.CREATE_LABEL]: CREATE_LABEL_TAB_INDICES,
+  [ETabIndices.PROJECT_CREATE]: PROJECT_CREATE_TAB_INDICES,
+  [ETabIndices.PROJECT_CYCLE]: PROJECT_CYCLE_TAB_INDICES,
+  [ETabIndices.PROJECT_MODULE]: PROJECT_MODULE_TAB_INDICES,
+  [ETabIndices.PROJECT_VIEW]: PROJECT_VIEW_TAB_INDICES,
+  [ETabIndices.PROJECT_PAGE]: PROJECT_PAGE_TAB_INDICES,
+};
diff --git a/packages/constants/src/themes.ts b/packages/constants/src/themes.ts
new file mode 100644
index 0000000..4c2cf21
--- /dev/null
+++ b/packages/constants/src/themes.ts
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const THEMES = ["light", "dark", "light-contrast", "dark-contrast", "custom"];
+
+export interface I_THEME_OPTION {
+  key: string;
+  value: string;
+  i18n_label: string;
+  type: string;
+  icon: {
+    border: string;
+    color1: string;
+    color2: string;
+  };
+}
+
+export const THEME_OPTIONS: I_THEME_OPTION[] = [
+  {
+    key: "system_preference",
+    value: "system",
+    i18n_label: "System preference",
+    type: "light",
+    icon: {
+      border: "#DEE2E6",
+      color1: "#FAFAFA",
+      color2: "#3F76FF",
+    },
+  },
+  {
+    key: "light",
+    value: "light",
+    i18n_label: "Light",
+    type: "light",
+    icon: {
+      border: "#DEE2E6",
+      color1: "#FAFAFA",
+      color2: "#3F76FF",
+    },
+  },
+  {
+    key: "dark",
+    value: "dark",
+    i18n_label: "Dark",
+    type: "dark",
+    icon: {
+      border: "#2E3234",
+      color1: "#191B1B",
+      color2: "#3C85D9",
+    },
+  },
+  {
+    key: "light_contrast",
+    value: "light-contrast",
+    i18n_label: "Light high contrast",
+    type: "light",
+    icon: {
+      border: "#000000",
+      color1: "#FFFFFF",
+      color2: "#3F76FF",
+    },
+  },
+  {
+    key: "dark_contrast",
+    value: "dark-contrast",
+    i18n_label: "Dark high contrast",
+    type: "dark",
+    icon: {
+      border: "#FFFFFF",
+      color1: "#030303",
+      color2: "#3A8BE9",
+    },
+  },
+  {
+    key: "custom",
+    value: "custom",
+    i18n_label: "Custom theme",
+    type: "light",
+    icon: {
+      border: "#FFC9C9",
+      color1: "#FFF7F7",
+      color2: "#FF5151",
+    },
+  },
+];
diff --git a/packages/constants/src/user.ts b/packages/constants/src/user.ts
new file mode 100644
index 0000000..7b65c93
--- /dev/null
+++ b/packages/constants/src/user.ts
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EAuthenticationPageType {
+  STATIC = "STATIC",
+  NOT_AUTHENTICATED = "NOT_AUTHENTICATED",
+  AUTHENTICATED = "AUTHENTICATED",
+}
+
+export enum EInstancePageType {
+  PRE_SETUP = "PRE_SETUP",
+  POST_SETUP = "POST_SETUP",
+}
+
+export enum EUserStatus {
+  ERROR = "ERROR",
+  AUTHENTICATION_NOT_DONE = "AUTHENTICATION_NOT_DONE",
+  NOT_YET_READY = "NOT_YET_READY",
+}
+
+export type TUserStatus = {
+  status: EUserStatus | undefined;
+  message?: string;
+};
+
+export enum EUserPermissionsLevel {
+  WORKSPACE = "WORKSPACE",
+  PROJECT = "PROJECT",
+}
+
+export type TUserPermissionsLevel = EUserPermissionsLevel;
+
+export enum EUserPermissions {
+  ADMIN = 20,
+  MEMBER = 15,
+  GUEST = 5,
+}
+export type TUserPermissions = EUserPermissions;
+
+export type TUserAllowedPermissionsObject = {
+  create: TUserPermissions[];
+  update: TUserPermissions[];
+  delete: TUserPermissions[];
+  read: TUserPermissions[];
+};
+export type TUserAllowedPermissions = {
+  workspace: {
+    [key: string]: Partial<TUserAllowedPermissionsObject>;
+  };
+  project: {
+    [key: string]: Partial<TUserAllowedPermissionsObject>;
+  };
+};
+
+export const USER_ALLOWED_PERMISSIONS: TUserAllowedPermissions = {
+  workspace: {
+    dashboard: {
+      read: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    },
+  },
+  project: {},
+};
diff --git a/packages/constants/src/views.ts b/packages/constants/src/views.ts
new file mode 100644
index 0000000..90b017d
--- /dev/null
+++ b/packages/constants/src/views.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { EViewAccess } from "@plane/types";
+
+export const VIEW_ACCESS_SPECIFIERS: {
+  key: EViewAccess;
+  i18n_label: string;
+}[] = [
+  { key: EViewAccess.PUBLIC, i18n_label: "common.access.public" },
+  { key: EViewAccess.PRIVATE, i18n_label: "common.access.private" },
+];
+
+export const VIEW_SORTING_KEY_OPTIONS = [
+  { key: "name", i18n_label: "project_view.sort_by.name" },
+  { key: "created_at", i18n_label: "project_view.sort_by.created_at" },
+  { key: "updated_at", i18n_label: "project_view.sort_by.updated_at" },
+];
+
+export const VIEW_SORT_BY_OPTIONS = [
+  { key: "asc", i18n_label: "common.order_by.asc" },
+  { key: "desc", i18n_label: "common.order_by.desc" },
+];
diff --git a/packages/constants/src/workspace-drafts.ts b/packages/constants/src/workspace-drafts.ts
new file mode 100644
index 0000000..472b0d0
--- /dev/null
+++ b/packages/constants/src/workspace-drafts.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EDraftIssuePaginationType {
+  INIT = "INIT",
+  NEXT = "NEXT",
+  PREV = "PREV",
+  CURRENT = "CURRENT",
+}
diff --git a/packages/constants/src/workspace.ts b/packages/constants/src/workspace.ts
new file mode 100644
index 0000000..6083c77
--- /dev/null
+++ b/packages/constants/src/workspace.ts
@@ -0,0 +1,303 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TStaticViewTypes, IWorkspaceSearchResults } from "@plane/types";
+import { EUserWorkspaceRoles } from "@plane/types";
+
+export const ORGANIZATION_SIZE: string[] = ["Just myself", "2-10", "11-50", "51-200", "201-500", "500+"];
+
+export const RESTRICTED_URLS: string[] = [
+  "404",
+  "accounts",
+  "api",
+  "create-workspace",
+  "god-mode",
+  "installations",
+  "invitations",
+  "onboarding",
+  "profile",
+  "spaces",
+  "workspace-invitations",
+  "password",
+  "flags",
+  "monitor",
+  "monitoring",
+  "ingest",
+  "plane-pro",
+  "plane-ultimate",
+  "enterprise",
+  "plane-enterprise",
+  "disco",
+  "silo",
+  "chat",
+  "calendar",
+  "drive",
+  "channels",
+  "upgrade",
+  "billing",
+  "sign-in",
+  "sign-up",
+  "signin",
+  "signup",
+  "config",
+  "live",
+  "admin",
+  "m",
+  "import",
+  "importers",
+  "integrations",
+  "integration",
+  "configuration",
+  "initiatives",
+  "initiative",
+  "config",
+  "workflow",
+  "workflows",
+  "epics",
+  "epic",
+  "story",
+  "mobile",
+  "dashboard",
+  "desktop",
+  "onload",
+  "real-time",
+  "one",
+  "pages",
+  "mobile",
+  "business",
+  "pro",
+  "settings",
+  "monitor",
+  "license",
+  "licenses",
+  "instances",
+  "instance",
+];
+
+export const ROLE = {
+  [EUserWorkspaceRoles.GUEST]: "Guest",
+  [EUserWorkspaceRoles.MEMBER]: "Member",
+  [EUserWorkspaceRoles.ADMIN]: "Admin",
+};
+
+export const ROLE_DETAILS = {
+  [EUserWorkspaceRoles.GUEST]: {
+    i18n_title: "role_details.guest.title",
+    i18n_description: "role_details.guest.description",
+  },
+  [EUserWorkspaceRoles.MEMBER]: {
+    i18n_title: "role_details.member.title",
+    i18n_description: "role_details.member.description",
+  },
+  [EUserWorkspaceRoles.ADMIN]: {
+    i18n_title: "role_details.admin.title",
+    i18n_description: "role_details.admin.description",
+  },
+};
+
+export const USER_ROLES = [
+  {
+    value: "Product / Project Manager",
+    i18n_label: "user_roles.product_or_project_manager",
+  },
+  {
+    value: "Development / Engineering",
+    i18n_label: "user_roles.development_or_engineering",
+  },
+  {
+    value: "Founder / Executive",
+    i18n_label: "user_roles.founder_or_executive",
+  },
+  {
+    value: "Freelancer / Consultant",
+    i18n_label: "user_roles.freelancer_or_consultant",
+  },
+  { value: "Marketing / Growth", i18n_label: "user_roles.marketing_or_growth" },
+  {
+    value: "Sales / Business Development",
+    i18n_label: "user_roles.sales_or_business_development",
+  },
+  {
+    value: "Support / Operations",
+    i18n_label: "user_roles.support_or_operations",
+  },
+  {
+    value: "Student / Professor",
+    i18n_label: "user_roles.student_or_professor",
+  },
+  { value: "Human Resources", i18n_label: "user_roles.human_resources" },
+  { value: "Other", i18n_label: "user_roles.other" },
+];
+
+export const IMPORTERS_LIST = [
+  {
+    provider: "github",
+    type: "import",
+    i18n_title: "importer.github.title",
+    i18n_description: "importer.github.description",
+  },
+  {
+    provider: "jira",
+    type: "import",
+    i18n_title: "importer.jira.title",
+    i18n_description: "importer.jira.description",
+  },
+];
+
+export const EXPORTERS_LIST = [
+  {
+    provider: "csv",
+    type: "export",
+    i18n_title: "exporter.csv.title",
+    i18n_description: "exporter.csv.description",
+  },
+  {
+    provider: "xlsx",
+    type: "export",
+    i18n_title: "exporter.excel.title",
+    i18n_description: "exporter.csv.description",
+  },
+  {
+    provider: "json",
+    type: "export",
+    i18n_title: "exporter.json.title",
+    i18n_description: "exporter.csv.description",
+  },
+];
+
+export const DEFAULT_GLOBAL_VIEWS_LIST: {
+  key: TStaticViewTypes;
+  i18n_label: string;
+}[] = [
+  {
+    key: "all-issues",
+    i18n_label: "default_global_view.all_issues",
+  },
+  {
+    key: "assigned",
+    i18n_label: "default_global_view.assigned",
+  },
+  {
+    key: "created",
+    i18n_label: "default_global_view.created",
+  },
+  {
+    key: "subscribed",
+    i18n_label: "default_global_view.subscribed",
+  },
+];
+
+export interface IWorkspaceSidebarNavigationItem {
+  key: string;
+  labelTranslationKey: string;
+  href: string;
+  access: EUserWorkspaceRoles[];
+  highlight: (pathname: string, url: string) => boolean;
+}
+
+export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
+  views: {
+    key: "views",
+    labelTranslationKey: "views",
+    href: `/workspace-views/all-issues/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+    highlight: (pathname: string, url: string) => pathname.includes(url),
+  },
+  analytics: {
+    key: "analytics",
+    labelTranslationKey: "analytics",
+    href: `/analytics/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, url: string) => pathname.includes(url),
+  },
+  archives: {
+    key: "archives",
+    labelTranslationKey: "archives",
+    href: `/projects/archives/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, url: string) => pathname.includes(url),
+  },
+};
+
+export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["views"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["analytics"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["archives"],
+];
+
+export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
+  home: {
+    key: "home",
+    labelTranslationKey: "home.title",
+    href: `/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+    highlight: (pathname: string, url: string) => pathname === url,
+  },
+  inbox: {
+    key: "inbox",
+    labelTranslationKey: "notification.label",
+    href: `/notifications/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+    highlight: (pathname: string, url: string) => pathname.includes(url),
+  },
+  "your-work": {
+    key: "your_work",
+    labelTranslationKey: "your_work",
+    href: `/profile/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, url: string) => pathname.includes(url),
+  },
+  stickies: {
+    key: "stickies",
+    labelTranslationKey: "sidebar.stickies",
+    href: `/stickies/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+    highlight: (pathname: string, url: string) => pathname.includes(url),
+  },
+  drafts: {
+    key: "drafts",
+    labelTranslationKey: "drafts",
+    href: `/drafts/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, url: string) => pathname.includes(url),
+  },
+  projects: {
+    key: "projects",
+    labelTranslationKey: "projects",
+    href: `/projects/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+    highlight: (pathname: string, url: string) => pathname === url,
+  },
+};
+
+export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"],
+];
+
+export const WORKSPACE_SIDEBAR_STATIC_PINNED_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
+];
+
+export const IS_FAVORITE_MENU_OPEN = "is_favorite_menu_open";
+export const WORKSPACE_DEFAULT_SEARCH_RESULT: IWorkspaceSearchResults = {
+  results: {
+    workspace: [],
+    project: [],
+    issue: [],
+    cycle: [],
+    module: [],
+    issue_view: [],
+    page: [],
+  },
+};
+
+export const USE_CASES = [
+  "Plan and track product roadmaps",
+  "Manage engineering sprints",
+  "Coordinate cross-functional projects",
+  "Replace our current tool",
+  "Just exploring",
+];
diff --git a/packages/constants/tsconfig.json b/packages/constants/tsconfig.json
new file mode 100644
index 0000000..3cb6780
--- /dev/null
+++ b/packages/constants/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@plane/typescript-config/node-library.json",
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/constants/tsdown.config.ts b/packages/constants/tsdown.config.ts
new file mode 100644
index 0000000..5f7ccad
--- /dev/null
+++ b/packages/constants/tsdown.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  exports: true,
+});
diff --git a/packages/decorators/.prettierignore b/packages/decorators/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/decorators/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/decorators/README.md b/packages/decorators/README.md
new file mode 100644
index 0000000..f607ca2
--- /dev/null
+++ b/packages/decorators/README.md
@@ -0,0 +1,95 @@
+# @plane/decorators
+
+A lightweight TypeScript decorator library for building Express.js controllers with a clean, declarative syntax.
+
+## Features
+
+- TypeScript-first design
+- Decorators for HTTP methods (GET, POST, PUT, PATCH, DELETE)
+- WebSocket support
+- Middleware support
+- No build step required - works directly with TypeScript files
+
+## Installation
+
+This package is part of the Plane workspace and can be used by adding it to your project's dependencies:
+
+```json
+{
+  "dependencies": {
+    "@plane/decorators": "workspace:*"
+  }
+}
+```
+
+## Usage
+
+### Basic REST Controller
+
+```typescript
+import { Controller, Get, Post, BaseController } from "@plane/decorators";
+import { Router, Request, Response } from "express";
+
+@Controller("/api/users")
+class UserController extends BaseController {
+  @Get("/")
+  async getUsers(req: Request, res: Response) {
+    return res.json({ users: [] });
+  }
+
+  @Post("/")
+  async createUser(req: Request, res: Response) {
+    return res.json({ success: true });
+  }
+}
+
+// Register routes
+const router = Router();
+const userController = new UserController();
+userController.registerRoutes(router);
+```
+
+### WebSocket Controller
+
+```typescript
+import { Controller, WebSocket, BaseWebSocketController } from "@plane/decorators";
+import { Request } from "express";
+import { WebSocket as WS } from "ws";
+
+@Controller("/ws/chat")
+class ChatController extends BaseWebSocketController {
+  @WebSocket("/")
+  handleConnection(ws: WS, req: Request) {
+    ws.on("message", (message) => {
+      ws.send(`Received: ${message}`);
+    });
+  }
+}
+
+// Register WebSocket routes
+const router = require("express-ws")(app).router;
+const chatController = new ChatController();
+chatController.registerWebSocketRoutes(router);
+```
+
+## API Reference
+
+### Decorators
+
+- `@Controller(baseRoute: string)` - Class decorator for defining a base route
+- `@Get(route: string)` - Method decorator for HTTP GET endpoints
+- `@Post(route: string)` - Method decorator for HTTP POST endpoints
+- `@Put(route: string)` - Method decorator for HTTP PUT endpoints
+- `@Patch(route: string)` - Method decorator for HTTP PATCH endpoints
+- `@Delete(route: string)` - Method decorator for HTTP DELETE endpoints
+- `@WebSocket(route: string)` - Method decorator for WebSocket endpoints
+- `@Middleware(middleware: RequestHandler)` - Method decorator for applying middleware
+
+### Classes
+
+- `BaseController` - Base class for REST controllers
+- `BaseWebSocketController` - Base class for WebSocket controllers
+
+## License
+
+This project is licensed under the [GNU Affero General Public License v3.0](https://github.com/makeplane/plane/blob/master/LICENSE.txt).
diff --git a/packages/decorators/package.json b/packages/decorators/package.json
new file mode 100644
index 0000000..8646e39
--- /dev/null
+++ b/packages/decorators/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@plane/decorators",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Controller and route decorators for Express.js applications",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=3 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "devDependencies": {
+    "@plane/typescript-config": "workspace:*",
+    "@types/express": "catalog:",
+    "@types/node": "catalog:",
+    "@types/ws": "catalog:",
+    "reflect-metadata": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  },
+  "inlinedDependencies": {
+    "@types/express": "4.17.23",
+    "@types/express-serve-static-core": "4.19.6",
+    "reflect-metadata": "0.2.2"
+  }
+}
diff --git a/packages/decorators/src/controller.ts b/packages/decorators/src/controller.ts
new file mode 100644
index 0000000..779ee80
--- /dev/null
+++ b/packages/decorators/src/controller.ts
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RequestHandler, Router, Request } from "express";
+import type { WebSocket } from "ws";
+
+import "reflect-metadata";
+
+export type HttpMethod = "get" | "post" | "put" | "delete" | "patch" | "options" | "head" | "ws";
+
+type ControllerInstance = {
+  [key: string]: any;
+};
+
+export type ControllerConstructor = {
+  new (...args: any[]): ControllerInstance;
+  prototype: ControllerInstance;
+};
+
+export function registerController(
+  router: Router,
+  Controller: ControllerConstructor,
+  dependencies: unknown[] = []
+): void {
+  // Create the controller instance with dependencies
+  const instance = new Controller(...dependencies);
+
+  // Determine if it's a WebSocket controller or REST controller by checking
+  // if it has any methods with the "ws" method metadata
+  const isWebsocket = Object.getOwnPropertyNames(Controller.prototype).some((methodName) => {
+    if (methodName === "constructor") return false;
+    return Reflect.getMetadata("method", instance, methodName) === "ws";
+  });
+
+  if (isWebsocket) {
+    // Register as WebSocket controller
+    // Pass the existing instance with dependencies to avoid creating a new instance without them
+    registerWebSocketController(router, Controller, instance);
+  } else {
+    // Register as REST controller with the existing instance
+    registerRestController(router, Controller, instance);
+  }
+}
+
+function registerRestController(
+  router: Router,
+  Controller: ControllerConstructor,
+  existingInstance?: ControllerInstance
+): void {
+  const instance = existingInstance || new Controller();
+  const baseRoute = Reflect.getMetadata("baseRoute", Controller) as string;
+
+  Object.getOwnPropertyNames(Controller.prototype).forEach((methodName) => {
+    if (methodName === "constructor") return; // Skip the constructor
+
+    const method = Reflect.getMetadata("method", instance, methodName) as HttpMethod;
+    const route = Reflect.getMetadata("route", instance, methodName) as string;
+    const middlewares = (Reflect.getMetadata("middlewares", instance, methodName) as RequestHandler[]) || [];
+
+    if (method && route) {
+      const handler = instance[methodName] as unknown;
+
+      if (typeof handler === "function") {
+        if (method !== "ws") {
+          (router[method] as (path: string, ...handlers: RequestHandler[]) => void)(
+            `${baseRoute}${route}`,
+            ...middlewares,
+            handler.bind(instance)
+          );
+        }
+      }
+    }
+  });
+}
+
+function registerWebSocketController(
+  router: Router,
+  Controller: ControllerConstructor,
+  existingInstance?: ControllerInstance
+): void {
+  const instance = existingInstance || new Controller();
+  const baseRoute = Reflect.getMetadata("baseRoute", Controller) as string;
+
+  Object.getOwnPropertyNames(Controller.prototype).forEach((methodName) => {
+    if (methodName === "constructor") return; // Skip the constructor
+
+    const method = Reflect.getMetadata("method", instance, methodName) as string;
+    const route = Reflect.getMetadata("route", instance, methodName) as string;
+
+    if (method === "ws" && route) {
+      const handler = instance[methodName] as unknown;
+
+      if (typeof handler === "function" && "ws" in router && typeof router.ws === "function") {
+        router.ws(`${baseRoute}${route}`, (ws: WebSocket, req: Request) => {
+          try {
+            handler.call(instance, ws, req);
+          } catch (error) {
+            console.error(`WebSocket error in ${Controller.name}.${methodName}`, error);
+            ws.close(1011, error instanceof Error ? error.message : "Internal server error");
+          }
+        });
+      }
+    }
+  });
+}
diff --git a/packages/decorators/src/index.ts b/packages/decorators/src/index.ts
new file mode 100644
index 0000000..b31ab97
--- /dev/null
+++ b/packages/decorators/src/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./controller";
+export * from "./rest";
+export * from "./websocket";
diff --git a/packages/decorators/src/rest.ts b/packages/decorators/src/rest.ts
new file mode 100644
index 0000000..1615195
--- /dev/null
+++ b/packages/decorators/src/rest.ts
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import "reflect-metadata";
+import type { RequestHandler } from "express";
+
+// Define valid HTTP methods
+type RestMethod = "get" | "post" | "put" | "patch" | "delete";
+
+/**
+ * Controller decorator
+ * @param baseRoute
+ * @returns
+ */
+export function Controller(baseRoute: string = ""): ClassDecorator {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  return function (target: Function) {
+    Reflect.defineMetadata("baseRoute", baseRoute, target);
+  };
+}
+
+/**
+ * Factory function to create HTTP method decorators
+ * @param method HTTP method to handle
+ * @returns Method decorator
+ */
+function createHttpMethodDecorator(method: RestMethod): (route: string) => MethodDecorator {
+  return function (route: string): MethodDecorator {
+    return function (target: object, propertyKey: string | symbol) {
+      Reflect.defineMetadata("method", method, target, propertyKey);
+      Reflect.defineMetadata("route", route, target, propertyKey);
+    };
+  };
+}
+
+// Export HTTP method decorators using the factory
+export const Get = createHttpMethodDecorator("get");
+export const Post = createHttpMethodDecorator("post");
+export const Put = createHttpMethodDecorator("put");
+export const Patch = createHttpMethodDecorator("patch");
+export const Delete = createHttpMethodDecorator("delete");
+
+/**
+ * Middleware decorator
+ * @param middleware
+ * @returns
+ */
+export function Middleware(middleware: RequestHandler): MethodDecorator {
+  return function (target: object, propertyKey: string | symbol) {
+    const middlewares = Reflect.getMetadata("middlewares", target, propertyKey) || [];
+    middlewares.push(middleware);
+    Reflect.defineMetadata("middlewares", middlewares, target, propertyKey);
+  };
+}
diff --git a/packages/decorators/src/websocket.ts b/packages/decorators/src/websocket.ts
new file mode 100644
index 0000000..2efbe9f
--- /dev/null
+++ b/packages/decorators/src/websocket.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import "reflect-metadata";
+
+/**
+ * WebSocket method decorator
+ * @param route
+ * @returns
+ */
+export function WebSocket(route: string): MethodDecorator {
+  return function (target: object, propertyKey: string | symbol) {
+    Reflect.defineMetadata("method", "ws", target, propertyKey);
+    Reflect.defineMetadata("route", route, target, propertyKey);
+  };
+}
diff --git a/packages/decorators/tsconfig.json b/packages/decorators/tsconfig.json
new file mode 100644
index 0000000..f87ea2e
--- /dev/null
+++ b/packages/decorators/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@plane/typescript-config/node-library.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/decorators/tsdown.config.ts b/packages/decorators/tsdown.config.ts
new file mode 100644
index 0000000..5f7ccad
--- /dev/null
+++ b/packages/decorators/tsdown.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  exports: true,
+});
diff --git a/packages/editor/.prettierignore b/packages/editor/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/editor/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/editor/Readme.md b/packages/editor/Readme.md
new file mode 100644
index 0000000..75aad2c
--- /dev/null
+++ b/packages/editor/Readme.md
@@ -0,0 +1,82 @@
+# @plane/editor
+
+## Description
+
+The `@plane/editor` package serves as the foundation for our editor system. It provides the base functionality for our other editor packages, but it will not be used directly in any of the projects but only for extending other editors.
+
+## Utilities
+
+We provide a wide range of utilities for extending the core itself.
+
+1. Merging classes and custom styling
+2. Adding new extensions
+3. Adding custom props
+4. Base menu items, and their commands
+
+This allows for extensive customization and flexibility in the Editors created using our `editor-core` package.
+
+### Here's a detailed overview of what's exported
+
+1. useEditor - A hook that you can use to extend the Plane editor.
+
+   | Prop                      | Type                                                             | Description                                                                                                                                                             |
+   | ------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | `extensions`              | `Extension[]`                                                    | An array of custom extensions you want to add into the editor to extend it's core features                                                                              |
+   | `editorProps`             | `EditorProps`                                                    | Extend the editor props by passing in a custom props object                                                                                                             |
+   | `uploadFile`              | `(file: File) => Promise<string>`                                | A function that handles file upload. It takes a file as input and handles the process of uploading that file.                                                           |
+   | `deleteFile`              | `(assetUrlWithWorkspaceId: string) => Promise<any>`              | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image.                                      |
+   | `value`                   | `html string`                                                    | The initial content of the editor.                                                                                                                                      |
+   | `debouncedUpdatesEnabled` | `boolean`                                                        | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+   | `onChange`                | `(json: any, html: string) => void`                              | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats.                                        |
+   | `setIsSubmitting`         | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status.                                                                                                                |
+   | `setShouldShowAlert`      | `(showAlert: boolean) => void`                                   | This function is used to show or hide an alert in case of content not being "saved".                                                                                    |
+   | `forwardedRef`            | `any`                                                            | Pass this in whenever you want to control the editor's state from an external component                                                                                 |
+
+2. useReadOnlyEditor - A hook that can be used to extend a Read Only instance of the core editor.
+
+   | Prop           | Type          | Description                                                                                |
+   | -------------- | ------------- | ------------------------------------------------------------------------------------------ |
+   | `value`        | `string`      | The initial content of the editor.                                                         |
+   | `forwardedRef` | `any`         | Pass this in whenever you want to control the editor's state from an external component    |
+   | `extensions`   | `Extension[]` | An array of custom extensions you want to add into the editor to extend it's core features |
+   | `editorProps`  | `EditorProps` | Extend the editor props by passing in a custom props object                                |
+
+3. Items and Commands - H1, H2, H3, task list, quote, code block, etc's methods.
+
+4. UI Wrappers
+
+- `EditorContainer` - Wrap your Editor Container with this to apply base classes and styles.
+- `EditorContentWrapper` - Use this to get Editor's Content and base menus.
+
+5. Extending with Custom Styles
+
+```ts
+const customEditorClassNames = getEditorClassNames({
+  noBorder,
+  borderOnFocus,
+  customClassName,
+});
+```
+
+## Core features
+
+- **Content Trimming**: The Editor’s content is now automatically trimmed of empty line breaks from the start and end before submitting it to the backend. This ensures cleaner, more consistent data.
+- **Value Cleaning**: The Editor’s value is cleaned at the editor core level, eliminating the need for additional validation before sending from our app. This results in cleaner code and less potential for errors.
+- **Turbo Pipeline**: Added a turbo pipeline for both dev and build tasks for projects depending on the editor package.
+
+## Base extensions included
+
+- BulletList
+- OrderedList
+- Blockquote
+- Code
+- Gapcursor
+- Link
+- Image
+- Basic Marks
+  - Underline
+  - TextStyle
+  - Color
+- TaskList
+- Markdown
+- Table
diff --git a/packages/editor/package.json b/packages/editor/package.json
new file mode 100644
index 0000000..8f71154
--- /dev/null
+++ b/packages/editor/package.json
@@ -0,0 +1,102 @@
+{
+  "name": "@plane/editor",
+  "version": "1.4.2",
+  "private": true,
+  "description": "Core Editor that powers Plane",
+  "keywords": [
+    "editor",
+    "markdown",
+    "nextjs",
+    "react",
+    "rich-text"
+  ],
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./lib": "./dist/lib.js",
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/styles/index.css",
+    "./styles": "./dist/styles/index.css"
+  },
+  "scripts": {
+    "build": "tsc && tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=416 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "catalog:",
+    "@floating-ui/react": "catalog:",
+    "@headlessui/react": "catalog:",
+    "@hocuspocus/provider": "catalog:",
+    "@makeplane/propel": "catalog:",
+    "@plane/constants": "workspace:*",
+    "@plane/hooks": "workspace:*",
+    "@plane/propel": "workspace:*",
+    "@plane/types": "workspace:*",
+    "@plane/ui": "workspace:*",
+    "@plane/utils": "workspace:*",
+    "@tiptap/core": "catalog:",
+    "@tiptap/extension-blockquote": "catalog:",
+    "@tiptap/extension-character-count": "catalog:",
+    "@tiptap/extension-collaboration": "catalog:",
+    "@tiptap/extension-document": "catalog:",
+    "@tiptap/extension-emoji": "catalog:",
+    "@tiptap/extension-heading": "catalog:",
+    "@tiptap/extension-image": "catalog:",
+    "@tiptap/extension-list-item": "catalog:",
+    "@tiptap/extension-mention": "catalog:",
+    "@tiptap/extension-placeholder": "catalog:",
+    "@tiptap/extension-task-item": "catalog:",
+    "@tiptap/extension-task-list": "catalog:",
+    "@tiptap/extension-text": "catalog:",
+    "@tiptap/extension-text-align": "catalog:",
+    "@tiptap/extension-text-style": "catalog:",
+    "@tiptap/extension-underline": "catalog:",
+    "@tiptap/html": "catalog:",
+    "@tiptap/pm": "catalog:",
+    "@tiptap/react": "catalog:",
+    "@tiptap/starter-kit": "catalog:",
+    "@tiptap/suggestion": "catalog:",
+    "buffer": "catalog:",
+    "emoji-regex": "catalog:",
+    "highlight.js": "catalog:",
+    "is-emoji-supported": "catalog:",
+    "jsx-dom-cjs": "catalog:",
+    "linkifyjs": "catalog:",
+    "lodash-es": "catalog:",
+    "lowlight": "catalog:",
+    "lucide-react": "catalog:",
+    "prosemirror-codemark": "catalog:",
+    "tippy.js": "catalog:",
+    "tiptap-markdown": "catalog:",
+    "uuid": "catalog:",
+    "y-indexeddb": "catalog:",
+    "y-prosemirror": "catalog:",
+    "y-protocols": "catalog:",
+    "yjs": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/tailwind-config": "workspace:*",
+    "@plane/typescript-config": "workspace:*",
+    "@types/lodash-es": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "postcss": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
diff --git a/packages/editor/postcss.config.js b/packages/editor/postcss.config.js
new file mode 100644
index 0000000..3ad28f1
--- /dev/null
+++ b/packages/editor/postcss.config.js
@@ -0,0 +1,3 @@
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;
diff --git a/packages/editor/src/components/document-editor-side-effects.ts b/packages/editor/src/components/document-editor-side-effects.ts
new file mode 100644
index 0000000..af00a64
--- /dev/null
+++ b/packages/editor/src/components/document-editor-side-effects.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import type { ReactElement } from "react";
+import type { IEditorPropsExtended } from "@/types";
+
+export type DocumentEditorSideEffectsProps = {
+  editor: Editor;
+  id: string;
+  updatePageProperties?: unknown;
+  extendedEditorProps?: IEditorPropsExtended;
+};
+
+export const DocumentEditorSideEffects = (_props: DocumentEditorSideEffectsProps): ReactElement | null => null;
diff --git a/packages/editor/src/components/editors/document/collaborative-editor.tsx b/packages/editor/src/components/editors/document/collaborative-editor.tsx
new file mode 100644
index 0000000..ba132d5
--- /dev/null
+++ b/packages/editor/src/components/editors/document/collaborative-editor.tsx
@@ -0,0 +1,169 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+// components
+import { PageRenderer } from "@/components/editors";
+// constants
+import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
+// contexts
+import { CollaborationProvider, useCollaboration } from "@/contexts/collaboration-context";
+// helpers
+import { getEditorClassNames } from "@/helpers/common";
+// hooks
+import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
+// types
+import type { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";
+
+// Inner component that has access to collaboration context
+function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorProps) {
+  const {
+    aiHandler,
+    bubbleMenuEnabled = true,
+    containerClassName,
+    documentLoaderClassName,
+    extensions = [],
+    disabledExtensions,
+    displayConfig = DEFAULT_DISPLAY_CONFIG,
+    editable,
+    editorClassName = "",
+    editorProps,
+    extendedEditorProps,
+    fileHandler,
+    flaggedExtensions,
+    forwardedRef,
+    getEditorMetaData,
+    handleEditorReady,
+    id,
+    dragDropEnabled = true,
+    isTouchDevice,
+    mentionHandler,
+    onAssetChange,
+    onChange,
+    onEditorFocus,
+    onTransaction,
+    placeholder,
+    tabIndex,
+    user,
+    extendedDocumentEditorProps,
+    titleRef,
+    updatePageProperties,
+    isFetchingFallbackBinary,
+  } = props;
+
+  // Get non-null provider from context
+  const { provider, state, actions } = useCollaboration();
+
+  // Editor initialization with guaranteed non-null provider
+  const { editor, titleEditor } = useCollaborativeEditor({
+    provider,
+    disabledExtensions,
+    editable,
+    editorClassName,
+    editorProps,
+    extendedEditorProps,
+    extensions,
+    fileHandler,
+    flaggedExtensions,
+    getEditorMetaData,
+    forwardedRef,
+    handleEditorReady,
+    id,
+    dragDropEnabled,
+    isTouchDevice,
+    mentionHandler,
+    onAssetChange,
+    onChange,
+    onEditorFocus,
+    onTransaction,
+    placeholder,
+    tabIndex,
+    titleRef,
+    updatePageProperties,
+    user,
+    actions,
+  });
+
+  const editorContainerClassNames = getEditorClassNames({
+    noBorder: true,
+    borderOnFocus: false,
+    containerClassName,
+  });
+
+  // Show loader ONLY when cache is known empty and server hasn't synced yet
+  const shouldShowSyncLoader = state.isCacheReady && !state.hasCachedContent && !state.isServerSynced;
+  const shouldWaitForFallbackBinary = isFetchingFallbackBinary && !state.hasCachedContent && state.isServerDisconnected;
+  const isLoading = shouldShowSyncLoader || shouldWaitForFallbackBinary;
+
+  // Gate content rendering on isDocReady to prevent empty editor flash
+  const showContentSkeleton = !state.isDocReady;
+
+  if (!editor || !titleEditor) return null;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "transition-opacity duration-200",
+          showContentSkeleton && !isLoading && "pointer-events-none opacity-0"
+        )}
+      >
+        <PageRenderer
+          aiHandler={aiHandler}
+          bubbleMenuEnabled={bubbleMenuEnabled}
+          displayConfig={displayConfig}
+          documentLoaderClassName={documentLoaderClassName}
+          disabledExtensions={disabledExtensions}
+          extendedDocumentEditorProps={extendedDocumentEditorProps}
+          editor={editor}
+          flaggedExtensions={flaggedExtensions}
+          titleEditor={titleEditor}
+          editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
+          extendedEditorProps={extendedEditorProps}
+          id={id}
+          isLoading={isLoading}
+          isTouchDevice={!!isTouchDevice}
+          tabIndex={tabIndex}
+          provider={provider}
+          state={state}
+        />
+      </div>
+    </>
+  );
+}
+
+// Outer component that provides collaboration context
+function CollaborativeDocumentEditor(props: ICollaborativeDocumentEditorProps) {
+  const { id, realtimeConfig, serverHandler, user } = props;
+
+  const token = useMemo(() => JSON.stringify(user), [user]);
+
+  return (
+    <CollaborationProvider
+      docId={id}
+      serverUrl={realtimeConfig.url}
+      authToken={token}
+      onStateChange={serverHandler?.onStateChange}
+    >
+      <CollaborativeDocumentEditorInner {...props} />
+    </CollaborationProvider>
+  );
+}
+
+const CollaborativeDocumentEditorWithRef = React.forwardRef(function CollaborativeDocumentEditorWithRef(
+  props: ICollaborativeDocumentEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return (
+    <CollaborativeDocumentEditor key={props.id} {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi>} />
+  );
+});
+
+CollaborativeDocumentEditorWithRef.displayName = "CollaborativeDocumentEditorWithRef";
+
+export { CollaborativeDocumentEditorWithRef };
diff --git a/packages/editor/src/components/editors/document/editor.tsx b/packages/editor/src/components/editors/document/editor.tsx
new file mode 100644
index 0000000..cb0e112
--- /dev/null
+++ b/packages/editor/src/components/editors/document/editor.tsx
@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Extensions } from "@tiptap/core";
+import type { MutableRefObject } from "react";
+import { forwardRef, useMemo } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+// components
+import { PageRenderer } from "@/components/editors";
+// constants
+import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
+// extensions
+import { HeadingListExtension, SideMenuExtension } from "@/extensions";
+// helpers
+import { getEditorClassNames } from "@/helpers/common";
+// hooks
+import { useEditor } from "@/hooks/use-editor";
+// plane editor extensions
+import { DocumentEditorAdditionalExtensions } from "@/extensions/document-extensions";
+// types
+import type { EditorRefApi, IDocumentEditorProps } from "@/types";
+
+function DocumentEditor(props: IDocumentEditorProps) {
+  const {
+    bubbleMenuEnabled = false,
+    containerClassName,
+    disabledExtensions,
+    displayConfig = DEFAULT_DISPLAY_CONFIG,
+    editable,
+    editorClassName = "",
+    extendedEditorProps,
+    fileHandler,
+    flaggedExtensions,
+    forwardedRef,
+    getEditorMetaData,
+    handleEditorReady,
+    id,
+    isTouchDevice,
+    mentionHandler,
+    onChange,
+    user,
+    value,
+  } = props;
+  const extensions: Extensions = useMemo(() => {
+    const additionalExtensions: Extensions = [];
+    additionalExtensions.push(
+      SideMenuExtension({
+        aiEnabled: !disabledExtensions?.includes("ai"),
+        dragDropEnabled: true,
+      }),
+      HeadingListExtension,
+      ...DocumentEditorAdditionalExtensions({
+        disabledExtensions,
+        extendedEditorProps,
+        flaggedExtensions,
+        isEditable: editable,
+        fileHandler,
+        userDetails: user ?? {
+          id: "",
+          name: "",
+          color: "",
+        },
+      })
+    );
+    return additionalExtensions;
+  }, [disabledExtensions, editable, extendedEditorProps, fileHandler, flaggedExtensions, user]);
+
+  const editor = useEditor({
+    disabledExtensions,
+    editable,
+    editorClassName,
+    enableHistory: true,
+    extendedEditorProps,
+    extensions,
+    fileHandler,
+    flaggedExtensions,
+    forwardedRef,
+    getEditorMetaData,
+    handleEditorReady,
+    id,
+    initialValue: value,
+    mentionHandler,
+    onChange,
+  });
+
+  const editorContainerClassName = getEditorClassNames({
+    containerClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <PageRenderer
+      bubbleMenuEnabled={bubbleMenuEnabled}
+      displayConfig={displayConfig}
+      editor={editor}
+      editorContainerClassName={cn(editorContainerClassName, "document-editor")}
+      extendedEditorProps={extendedEditorProps}
+      id={id}
+      flaggedExtensions={flaggedExtensions}
+      disabledExtensions={disabledExtensions}
+      isTouchDevice={!!isTouchDevice}
+    />
+  );
+}
+
+const DocumentEditorWithRef = forwardRef(function DocumentEditorWithRef(
+  props: IDocumentEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <DocumentEditor {...props} forwardedRef={ref as MutableRefObject<EditorRefApi | null>} />;
+});
+
+DocumentEditorWithRef.displayName = "DocumentEditorWithRef";
+
+export { DocumentEditorWithRef };
diff --git a/packages/editor/src/components/editors/document/index.ts b/packages/editor/src/components/editors/document/index.ts
new file mode 100644
index 0000000..18c289f
--- /dev/null
+++ b/packages/editor/src/components/editors/document/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./collaborative-editor";
+export * from "./editor";
+export * from "./loader";
+export * from "./page-renderer";
diff --git a/packages/editor/src/components/editors/document/loader.tsx b/packages/editor/src/components/editors/document/loader.tsx
new file mode 100644
index 0000000..c4f50f8
--- /dev/null
+++ b/packages/editor/src/components/editors/document/loader.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+};
+
+export function DocumentContentLoader(props: Props) {
+  const { className } = props;
+
+  return (
+    <div className={cn("document-editor-loader", className)}>
+      <Loader className="relative space-y-4">
+        <div className="space-y-2">
+          <div className="py-2">
+            <Loader.Item width="100%" height="36px" />
+          </div>
+          <Loader.Item width="80%" height="22px" />
+          <div className="relative flex items-center gap-2">
+            <Loader.Item width="30px" height="30px" />
+            <Loader.Item width="30%" height="22px" />
+          </div>
+          <div className="py-2">
+            <Loader.Item width="60%" height="36px" />
+          </div>
+          <Loader.Item width="70%" height="22px" />
+          <Loader.Item width="30%" height="22px" />
+          <div className="relative flex items-center gap-2">
+            <Loader.Item width="30px" height="30px" />
+            <Loader.Item width="30%" height="22px" />
+          </div>
+          <div className="py-2">
+            <Loader.Item width="50%" height="30px" />
+          </div>
+          <Loader.Item width="100%" height="22px" />
+          <div className="py-2">
+            <Loader.Item width="30%" height="30px" />
+          </div>
+          <Loader.Item width="30%" height="22px" />
+          <div className="relative flex items-center gap-2">
+            <div className="py-2">
+              <Loader.Item width="30px" height="30px" />
+            </div>
+            <Loader.Item width="30%" height="22px" />
+          </div>
+        </div>
+      </Loader>
+    </div>
+  );
+}
diff --git a/packages/editor/src/components/editors/document/page-renderer.tsx b/packages/editor/src/components/editors/document/page-renderer.tsx
new file mode 100644
index 0000000..9171f58
--- /dev/null
+++ b/packages/editor/src/components/editors/document/page-renderer.tsx
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { Editor } from "@tiptap/react";
+// plane imports
+import { cn } from "@plane/utils";
+// components
+import { DocumentContentLoader, EditorContainer, EditorContentWrapper } from "@/components/editors";
+import { BlockMenu, EditorBubbleMenu } from "@/components/menus";
+// types
+import type { TCollabValue } from "@/contexts";
+import type {
+  ICollaborativeDocumentEditorPropsExtended,
+  IEditorProps,
+  IEditorPropsExtended,
+  TAIHandler,
+  TDisplayConfig,
+} from "@/types";
+
+type Props = {
+  aiHandler?: TAIHandler;
+  bubbleMenuEnabled: boolean;
+  disabledExtensions: IEditorProps["disabledExtensions"];
+  displayConfig: TDisplayConfig;
+  documentLoaderClassName?: string;
+  editor: Editor;
+  titleEditor?: Editor;
+  editorContainerClassName: string;
+  extendedDocumentEditorProps?: ICollaborativeDocumentEditorPropsExtended;
+  extendedEditorProps: IEditorPropsExtended;
+  flaggedExtensions: IEditorProps["flaggedExtensions"];
+  id: string;
+  isLoading?: boolean;
+  isTouchDevice: boolean;
+  tabIndex?: number;
+  provider?: HocuspocusProvider;
+  state?: TCollabValue["state"];
+};
+
+export function PageRenderer(props: Props) {
+  const {
+    bubbleMenuEnabled,
+    disabledExtensions,
+    displayConfig,
+    documentLoaderClassName,
+    editor,
+    editorContainerClassName,
+    extendedEditorProps,
+    flaggedExtensions,
+    id,
+    isLoading,
+    isTouchDevice,
+    tabIndex,
+    titleEditor,
+    provider,
+    state,
+  } = props;
+  return (
+    <div
+      className={cn("frame-renderer w-full flex-grow", {
+        "wide-layout": displayConfig.wideLayout,
+      })}
+    >
+      {isLoading ? (
+        <DocumentContentLoader className={documentLoaderClassName} />
+      ) : (
+        <>
+          {titleEditor && (
+            <div className="relative w-full py-3">
+              <EditorContainer
+                editor={titleEditor}
+                id={id + "-title"}
+                isTouchDevice={isTouchDevice}
+                editorContainerClassName="page-title-editor bg-transparent py-3 border-none"
+                displayConfig={displayConfig}
+              >
+                <EditorContentWrapper
+                  editor={titleEditor}
+                  id={id + "-title"}
+                  tabIndex={tabIndex}
+                  className="no-scrollbar placeholder-placeholder w-full resize-none rounded-none border-none bg-transparent p-0 text-[2rem] leading-[2.375rem] font-bold tracking-[-2%] outline-none"
+                />
+              </EditorContainer>
+            </div>
+          )}
+          <EditorContainer
+            displayConfig={displayConfig}
+            editor={editor}
+            editorContainerClassName={editorContainerClassName}
+            id={id}
+            isTouchDevice={isTouchDevice}
+            provider={provider}
+            state={state}
+          >
+            <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
+            {editor.isEditable && !isTouchDevice && (
+              <div>
+                {bubbleMenuEnabled && (
+                  <EditorBubbleMenu
+                    editor={editor}
+                    disabledExtensions={disabledExtensions}
+                    extendedEditorProps={extendedEditorProps}
+                    flaggedExtensions={flaggedExtensions}
+                  />
+                )}
+                <BlockMenu
+                  editor={editor}
+                  flaggedExtensions={flaggedExtensions}
+                  disabledExtensions={disabledExtensions}
+                />
+              </div>
+            )}
+          </EditorContainer>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/packages/editor/src/components/editors/editor-container.tsx b/packages/editor/src/components/editors/editor-container.tsx
new file mode 100644
index 0000000..4d2f2f8
--- /dev/null
+++ b/packages/editor/src/components/editors/editor-container.tsx
@@ -0,0 +1,185 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { Editor } from "@tiptap/react";
+import type { ReactNode } from "react";
+import { useCallback, useEffect, useRef } from "react";
+// plane utils
+import { cn } from "@plane/utils";
+// constants
+import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// components
+import type { TCollabValue } from "@/contexts";
+import { LinkContainer } from "@/components/link-container";
+// plugins
+import { nodeHighlightPluginKey } from "@/plugins/highlight";
+// types
+import type { TDisplayConfig } from "@/types";
+
+type Props = {
+  children: ReactNode;
+  displayConfig: TDisplayConfig;
+  editor: Editor;
+  editorContainerClassName: string;
+  id: string;
+  isTouchDevice: boolean;
+  provider?: HocuspocusProvider | undefined;
+  state?: TCollabValue["state"];
+};
+
+export function EditorContainer(props: Props) {
+  const { children, displayConfig, editor, editorContainerClassName, id, isTouchDevice, provider, state } = props;
+  // refs
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hasScrolledOnce = useRef(false);
+  const scrollToNode = useCallback(
+    (nodeId: string) => {
+      if (!editor) return false;
+
+      const doc = editor.state.doc;
+      let pos: number | null = null;
+
+      doc.descendants((node, position) => {
+        if (node.attrs && node.attrs.id === nodeId) {
+          pos = position;
+          return false;
+        }
+      });
+
+      if (pos === null) {
+        return false;
+      }
+
+      const nodePosition = pos;
+      const tr = editor.state.tr.setMeta(nodeHighlightPluginKey, { nodeId });
+      editor.view.dispatch(tr);
+
+      requestAnimationFrame(() => {
+        const domNode = editor.view.nodeDOM(nodePosition);
+        if (domNode instanceof HTMLElement) {
+          domNode.scrollIntoView({ behavior: "instant", block: "center" });
+        }
+      });
+
+      editor.once("focus", () => {
+        const clearTr = editor.state.tr.setMeta(nodeHighlightPluginKey, { nodeId: null });
+        editor.view.dispatch(clearTr);
+      });
+
+      hasScrolledOnce.current = true;
+      return true;
+    },
+
+    [editor]
+  );
+
+  useEffect(() => {
+    const nodeId = window.location.href.split("#")[1];
+
+    const handleSynced = () => scrollToNode(nodeId);
+
+    if (nodeId && !hasScrolledOnce.current) {
+      if (provider && state) {
+        const { hasCachedContent } = state;
+        // If the provider is synced or the cached content is available and the server is disconnected, scroll to the node
+        if (hasCachedContent) {
+          const hasScrolled = handleSynced();
+          if (!hasScrolled) {
+            provider.on("synced", handleSynced);
+          }
+        } else if (provider.isSynced) {
+          handleSynced();
+        } else {
+          provider.on("synced", handleSynced);
+        }
+      } else {
+        handleSynced();
+      }
+      return () => {
+        if (provider) {
+          provider.off("synced", handleSynced);
+        }
+      };
+    }
+  }, [scrollToNode, provider, state]);
+
+  const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (event.target !== event.currentTarget) return;
+    if (!editor) return;
+    if (!editor.isEditable) return;
+    try {
+      if (editor.isFocused) return; // If editor is already focused, do nothing
+
+      const { selection } = editor.state;
+      const currentNode = selection.$from.node();
+
+      editor?.chain().focus("end", { scrollIntoView: false }).run(); // Focus the editor at the end
+
+      if (
+        currentNode.content.size === 0 && // Check if the current node is empty
+        !(
+          editor.isActive(CORE_EXTENSIONS.ORDERED_LIST) ||
+          editor.isActive(CORE_EXTENSIONS.BULLET_LIST) ||
+          editor.isActive(CORE_EXTENSIONS.TASK_ITEM) ||
+          editor.isActive(CORE_EXTENSIONS.TABLE) ||
+          editor.isActive(CORE_EXTENSIONS.BLOCKQUOTE) ||
+          editor.isActive(CORE_EXTENSIONS.CODE_BLOCK)
+        ) // Check if it's an empty node within an orderedList, bulletList, taskItem, table, quote or code block
+      ) {
+        return;
+      }
+
+      // Get the last child node in the document
+      const doc = editor.state.doc;
+      const lastNode = doc.lastChild;
+
+      // Check if its last node and add new node
+      if (lastNode) {
+        const isLastNodeParagraph = lastNode.type.name === CORE_EXTENSIONS.PARAGRAPH;
+        // Insert a new paragraph if the last node is not a paragraph and not a doc node
+        if (!isLastNodeParagraph && lastNode.type.name !== CORE_EXTENSIONS.DOCUMENT) {
+          // Only insert a new paragraph if the last node is not an empty paragraph and not a doc node
+          const endPosition = editor?.state.doc.content.size;
+          editor?.chain().insertContentAt(endPosition, { type: "paragraph" }).focus("end").run();
+        }
+      }
+    } catch (error) {
+      console.error("An error occurred while handling container click to insert new empty node at bottom:", error);
+    }
+  };
+
+  const handleContainerMouseLeave = () => {
+    const dragHandleElement = document.querySelector("#editor-side-menu");
+    if (!dragHandleElement?.classList.contains("side-menu-hidden")) {
+      dragHandleElement?.classList.add("side-menu-hidden");
+    }
+  };
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        id={`editor-container-${id}`}
+        onClick={handleContainerClick}
+        onMouseLeave={handleContainerMouseLeave}
+        className={cn(
+          `editor-container relative cursor-text line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
+          {
+            "active-editor": editor?.isFocused && editor?.isEditable,
+          },
+          displayConfig.fontSize ?? DEFAULT_DISPLAY_CONFIG.fontSize,
+          displayConfig.fontStyle ?? DEFAULT_DISPLAY_CONFIG.fontStyle,
+          editorContainerClassName
+        )}
+      >
+        {children}
+        {!isTouchDevice && <LinkContainer editor={editor} containerRef={containerRef} />}
+      </div>
+    </>
+  );
+}
diff --git a/packages/editor/src/components/editors/editor-content.tsx b/packages/editor/src/components/editors/editor-content.tsx
new file mode 100644
index 0000000..9179c61
--- /dev/null
+++ b/packages/editor/src/components/editors/editor-content.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { EditorContent } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import type { ReactNode } from "react";
+
+type Props = {
+  className?: string;
+  children?: ReactNode;
+  editor: Editor | null;
+  id: string;
+  tabIndex?: number;
+};
+
+export function EditorContentWrapper(props: Props) {
+  const { editor, className, children, tabIndex, id } = props;
+
+  return (
+    <div
+      tabIndex={tabIndex}
+      onFocus={() => editor?.chain().focus(undefined, { scrollIntoView: false }).run()}
+      className={className}
+    >
+      <EditorContent editor={editor} id={id} />
+      {children}
+    </div>
+  );
+}
diff --git a/packages/editor/src/components/editors/editor-wrapper.tsx b/packages/editor/src/components/editors/editor-wrapper.tsx
new file mode 100644
index 0000000..69f0fd2
--- /dev/null
+++ b/packages/editor/src/components/editors/editor-wrapper.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor, Extensions } from "@tiptap/core";
+// components
+import { EditorContainer } from "@/components/editors";
+// constants
+import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
+// hooks
+import { getEditorClassNames } from "@/helpers/common";
+import { useEditor } from "@/hooks/use-editor";
+// types
+import type { IEditorProps } from "@/types";
+import { EditorContentWrapper } from "./editor-content";
+
+type Props = IEditorProps & {
+  children?: (editor: Editor) => React.ReactNode;
+  editable: boolean;
+  extensions: Extensions;
+};
+
+export function EditorWrapper(props: Props) {
+  const {
+    children,
+    containerClassName,
+    disabledExtensions,
+    displayConfig = DEFAULT_DISPLAY_CONFIG,
+    editable,
+    editorClassName = "",
+    editorProps,
+    extendedEditorProps,
+    extensions,
+    getEditorMetaData,
+    id,
+    initialValue,
+    isTouchDevice,
+    fileHandler,
+    flaggedExtensions,
+    forwardedRef,
+    mentionHandler,
+    onChange,
+    onEditorFocus,
+    onTransaction,
+    handleEditorReady,
+    autofocus,
+    placeholder,
+    showPlaceholderOnEmpty,
+    tabIndex,
+    value,
+  } = props;
+
+  const editor = useEditor({
+    editable,
+    disabledExtensions,
+    editorClassName,
+    editorProps,
+    enableHistory: true,
+    extendedEditorProps,
+    extensions,
+    fileHandler,
+    flaggedExtensions,
+    forwardedRef,
+    getEditorMetaData,
+    id,
+    isTouchDevice,
+    initialValue,
+    mentionHandler,
+    onChange,
+    onEditorFocus,
+    onTransaction,
+    handleEditorReady,
+    autofocus,
+    placeholder,
+    showPlaceholderOnEmpty,
+    tabIndex,
+    value,
+  });
+
+  const editorContainerClassName = getEditorClassNames({
+    noBorder: true,
+    borderOnFocus: false,
+    containerClassName,
+  });
+
+  if (!editor) return null;
+
+  return (
+    <EditorContainer
+      displayConfig={displayConfig}
+      editor={editor}
+      editorContainerClassName={editorContainerClassName}
+      id={id}
+      isTouchDevice={!!isTouchDevice}
+    >
+      {children?.(editor)}
+      <div className="flex flex-col">
+        <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
+      </div>
+    </EditorContainer>
+  );
+}
diff --git a/packages/editor/src/components/editors/index.ts b/packages/editor/src/components/editors/index.ts
new file mode 100644
index 0000000..e32a2a9
--- /dev/null
+++ b/packages/editor/src/components/editors/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./document";
+export * from "./lite-text";
+export * from "./rich-text";
+export * from "./editor-container";
+export * from "./editor-content";
+export * from "./editor-wrapper";
diff --git a/packages/editor/src/components/editors/link-view-container.tsx b/packages/editor/src/components/editors/link-view-container.tsx
new file mode 100644
index 0000000..ea92a97
--- /dev/null
+++ b/packages/editor/src/components/editors/link-view-container.tsx
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { autoUpdate, flip, hide, shift, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// components
+import type { LinkViewProps } from "@/components/links";
+import { LinkView } from "@/components/links";
+
+type Props = {
+  editor: Editor;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export function LinkViewContainer({ editor, containerRef }: Props) {
+  const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
+  const [isOpen, setIsOpen] = useState(false);
+  const [virtualElement, setVirtualElement] = useState<Element | null>(null);
+  const hoverTimeoutRef = useRef<number | null>(null);
+
+  const editorState = useEditorState({
+    editor,
+    selector: ({ editor }: { editor: Editor }) => ({
+      linkExtensionStorage: editor.storage.link,
+    }),
+  });
+
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    elements: {
+      reference: virtualElement,
+    },
+    middleware: [
+      flip({
+        fallbackPlacements: ["top", "bottom"],
+      }),
+      shift({
+        padding: 5,
+      }),
+      hide(),
+    ],
+    whileElementsMounted: autoUpdate,
+    placement: "bottom-start",
+  });
+
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
+
+  // Clear any existing timeout
+  const clearHoverTimeout = useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      window.clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+  }, []);
+
+  // Set timeout to close link view after delay
+  const setCloseTimeout = useCallback(() => {
+    clearHoverTimeout();
+    hoverTimeoutRef.current = window.setTimeout(() => {
+      setIsOpen(false);
+      editorState.linkExtensionStorage.isPreviewOpen = false;
+    }, 400);
+  }, [clearHoverTimeout, editorState.linkExtensionStorage]);
+
+  const handleLinkHover = useCallback(
+    (event: MouseEvent) => {
+      if (!editor || editorState.linkExtensionStorage?.isBubbleMenuOpen) return;
+
+      // Find the closest anchor tag from the event target
+      const target = (event.target as HTMLElement)?.closest("a");
+      if (!target) return;
+
+      const referenceProps = getReferenceProps();
+      Object.entries(referenceProps).forEach(([key, value]) => {
+        target.setAttribute(key, value as string);
+      });
+
+      const view = editor.view;
+      if (!view) return;
+
+      try {
+        const pos = view.posAtDOM(target, 0);
+        if (pos === undefined || pos < 0) return;
+
+        const node = view.state.doc.nodeAt(pos);
+        if (!node) return;
+
+        const linkMark = node.marks?.find((mark) => mark.type.name === "link");
+        if (!linkMark) return;
+
+        setVirtualElement(target);
+
+        // Clear any pending close timeout when hovering over a link
+        clearHoverTimeout();
+
+        // Only update if not already open or if hovering over a different link
+        if (!isOpen || (linkViewProps && (linkViewProps.from !== pos || linkViewProps.to !== pos + node.nodeSize))) {
+          setLinkViewProps({
+            view: "LinkPreview", // Always start with preview for new links
+            url: linkMark.attrs.href,
+            text: node.text || "",
+            editor: editor,
+            from: pos,
+            to: pos + node.nodeSize,
+            closeLinkView: () => {
+              setIsOpen(false);
+              editorState.linkExtensionStorage.isPreviewOpen = false;
+            },
+          });
+          setIsOpen(true);
+        }
+      } catch (error) {
+        console.error("Error handling link hover:", error);
+      }
+    },
+    [editor, editorState.linkExtensionStorage, getReferenceProps, isOpen, linkViewProps, clearHoverTimeout]
+  );
+
+  // Handle mouse enter on floating element (cancel close timeout)
+  const handleFloatingMouseEnter = useCallback(() => {
+    clearHoverTimeout();
+  }, [clearHoverTimeout]);
+
+  // Handle mouse leave from floating element (start close timeout)
+  const handleFloatingMouseLeave = useCallback(() => {
+    setCloseTimeout();
+  }, [setCloseTimeout]);
+
+  const handleContainerMouseEnter = useCallback(() => {
+    // Cancel any pending close timeout when mouse enters container
+    clearHoverTimeout();
+  }, [clearHoverTimeout]);
+
+  const handleContainerMouseLeave = useCallback(
+    (event: MouseEvent) => {
+      if (!editor || !isOpen) return;
+
+      // Check if mouse is truly leaving the container area
+      const relatedTarget = event.relatedTarget as HTMLElement;
+      const container = containerRef.current;
+      const floatingElement = refs.floating;
+
+      // Only start close timeout if mouse is not moving to the floating element
+      // and is actually leaving the container
+      if (
+        container &&
+        relatedTarget &&
+        !container.contains(relatedTarget) &&
+        (!floatingElement || !floatingElement.current?.contains(relatedTarget))
+      ) {
+        setCloseTimeout();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [editor, isOpen, setCloseTimeout, refs.floating]
+  );
+
+  // Set up event listeners
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener("mouseover", handleLinkHover);
+    container.addEventListener("mouseenter", handleContainerMouseEnter);
+    container.addEventListener("mouseleave", handleContainerMouseLeave);
+
+    return () => {
+      container.removeEventListener("mouseover", handleLinkHover);
+      container.removeEventListener("mouseenter", handleContainerMouseEnter);
+      container.removeEventListener("mouseleave", handleContainerMouseLeave);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleLinkHover, handleContainerMouseEnter, handleContainerMouseLeave]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => () => clearHoverTimeout(), [clearHoverTimeout]);
+
+  // Close link view when bubble menu opens
+  useEffect(() => {
+    if (editorState.linkExtensionStorage?.isBubbleMenuOpen && isOpen) {
+      setIsOpen(false);
+    }
+  }, [editorState.linkExtensionStorage, isOpen]);
+
+  return (
+    <>
+      {isOpen && linkViewProps && virtualElement && (
+        <div
+          ref={refs.setFloating}
+          style={{ ...floatingStyles, zIndex: 100 }}
+          {...getFloatingProps()}
+          onMouseEnter={handleFloatingMouseEnter}
+          onMouseLeave={handleFloatingMouseLeave}
+        >
+          <LinkView {...linkViewProps} style={floatingStyles} />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/editor/src/components/editors/lite-text/editor.tsx b/packages/editor/src/components/editors/lite-text/editor.tsx
new file mode 100644
index 0000000..41f986e
--- /dev/null
+++ b/packages/editor/src/components/editors/lite-text/editor.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { forwardRef, useMemo } from "react";
+// components
+import { EditorWrapper } from "@/components/editors/editor-wrapper";
+// extensions
+import { EnterKeyExtension } from "@/extensions";
+// types
+import type { EditorRefApi, ILiteTextEditorProps } from "@/types";
+
+function LiteTextEditor(props: ILiteTextEditorProps) {
+  const { onEnterKeyPress, disabledExtensions, extensions: externalExtensions = [] } = props;
+
+  const extensions = useMemo(() => {
+    const resolvedExtensions = [...externalExtensions];
+
+    if (!disabledExtensions?.includes("enter-key")) {
+      resolvedExtensions.push(EnterKeyExtension(onEnterKeyPress));
+    }
+
+    return resolvedExtensions;
+  }, [externalExtensions, disabledExtensions, onEnterKeyPress]);
+
+  return <EditorWrapper {...props} extensions={extensions} />;
+}
+
+const LiteTextEditorWithRef = forwardRef(function LiteTextEditorWithRef(
+  props: ILiteTextEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <LiteTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />;
+});
+
+LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";
+
+export { LiteTextEditorWithRef };
diff --git a/packages/editor/src/components/editors/lite-text/index.ts b/packages/editor/src/components/editors/lite-text/index.ts
new file mode 100644
index 0000000..4c9233a
--- /dev/null
+++ b/packages/editor/src/components/editors/lite-text/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./editor";
diff --git a/packages/editor/src/components/editors/rich-text/editor.tsx b/packages/editor/src/components/editors/rich-text/editor.tsx
new file mode 100644
index 0000000..c00bba3
--- /dev/null
+++ b/packages/editor/src/components/editors/rich-text/editor.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { forwardRef, useCallback } from "react";
+// components
+import { EditorWrapper } from "@/components/editors";
+import { BlockMenu, EditorBubbleMenu } from "@/components/menus";
+// extensions
+import { SideMenuExtension } from "@/extensions";
+// plane editor imports
+import { RichTextEditorAdditionalExtensions } from "@/extensions/rich-text-extensions";
+// types
+import type { EditorRefApi, IRichTextEditorProps } from "@/types";
+
+function RichTextEditor(props: IRichTextEditorProps) {
+  const {
+    bubbleMenuEnabled = true,
+    disabledExtensions,
+    dragDropEnabled,
+    extensions: externalExtensions = [],
+    fileHandler,
+    flaggedExtensions,
+    extendedEditorProps,
+    workItemIdentifier,
+  } = props;
+
+  const getExtensions = useCallback(() => {
+    const extensions = [
+      ...externalExtensions,
+      SideMenuExtension({
+        aiEnabled: false,
+        dragDropEnabled: !!dragDropEnabled,
+      }),
+      ...RichTextEditorAdditionalExtensions({
+        disabledExtensions,
+        fileHandler,
+        flaggedExtensions,
+        extendedEditorProps,
+      }),
+    ];
+
+    return extensions;
+  }, [dragDropEnabled, disabledExtensions, externalExtensions, fileHandler, flaggedExtensions, extendedEditorProps]);
+
+  return (
+    <EditorWrapper {...props} extensions={getExtensions()}>
+      {(editor) => (
+        <>
+          {editor && bubbleMenuEnabled && (
+            <EditorBubbleMenu
+              disabledExtensions={disabledExtensions}
+              editor={editor}
+              extendedEditorProps={extendedEditorProps}
+              flaggedExtensions={flaggedExtensions}
+            />
+          )}
+          <BlockMenu
+            editor={editor}
+            flaggedExtensions={flaggedExtensions}
+            disabledExtensions={disabledExtensions}
+            workItemIdentifier={workItemIdentifier}
+          />
+        </>
+      )}
+    </EditorWrapper>
+  );
+}
+
+const RichTextEditorWithRef = forwardRef(function RichTextEditorWithRef(
+  props: IRichTextEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <RichTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />;
+});
+
+RichTextEditorWithRef.displayName = "RichTextEditorWithRef";
+
+export { RichTextEditorWithRef };
diff --git a/packages/editor/src/components/editors/rich-text/index.ts b/packages/editor/src/components/editors/rich-text/index.ts
new file mode 100644
index 0000000..4c9233a
--- /dev/null
+++ b/packages/editor/src/components/editors/rich-text/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./editor";
diff --git a/packages/editor/src/components/link-container.tsx b/packages/editor/src/components/link-container.tsx
new file mode 100644
index 0000000..c53bad5
--- /dev/null
+++ b/packages/editor/src/components/link-container.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { LinkViewContainer } from "@/components/editors/link-view-container";
+
+export function LinkContainer({
+  editor,
+  containerRef,
+}: {
+  editor: Editor;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+}) {
+  return (
+    <>
+      <LinkViewContainer editor={editor} containerRef={containerRef} />
+    </>
+  );
+}
diff --git a/packages/editor/src/components/links/index.ts b/packages/editor/src/components/links/index.ts
new file mode 100644
index 0000000..206f7ce
--- /dev/null
+++ b/packages/editor/src/components/links/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./link-edit-view";
+export * from "./link-preview";
+export * from "./link-view";
diff --git a/packages/editor/src/components/links/link-edit-view.tsx b/packages/editor/src/components/links/link-edit-view.tsx
new file mode 100644
index 0000000..cc4b2b9
--- /dev/null
+++ b/packages/editor/src/components/links/link-edit-view.tsx
@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Node } from "@tiptap/pm/model";
+import { UnlinkOutline } from "@makeplane/propel/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+// components
+import type { LinkViewProps, LinkViews } from "@/components/links";
+// helpers
+import { isValidHttpUrl } from "@/helpers/common";
+
+type InputViewProps = {
+  label: string;
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+  autoFocus?: boolean;
+};
+
+function InputView({ label, value, placeholder, onChange, autoFocus }: InputViewProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="inline-block text-11 font-semibold text-placeholder">{label}</label>
+      <input
+        placeholder={placeholder}
+        onClick={(e) => e.stopPropagation()}
+        className="w-[280px] rounded-md border border-strong bg-layer-1 p-2 text-13 text-primary outline-none"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        autoFocus={autoFocus}
+      />
+    </div>
+  );
+}
+
+type LinkEditViewProps = {
+  viewProps: LinkViewProps;
+  switchView: (view: LinkViews) => void;
+};
+
+export function LinkEditView({ viewProps }: LinkEditViewProps) {
+  const { editor, from, to, url: initialUrl, text: initialText, closeLinkView } = viewProps;
+
+  // State
+  const [positionRef] = useState({ from, to });
+  const [localUrl, setLocalUrl] = useState(initialUrl);
+  const [localText, setLocalText] = useState(initialText ?? "");
+  const [linkRemoved, setLinkRemoved] = useState(false);
+  const hasSubmitted = useRef(false);
+
+  const removeLink = useCallback(() => {
+    editor.view.dispatch(editor.state.tr.removeMark(from, to, editor.schema.marks.link));
+    setLinkRemoved(true);
+    closeLinkView();
+  }, [editor, from, to, closeLinkView]);
+
+  // Effects
+  useEffect(
+    () =>
+      // Cleanup effect: Remove link if not submitted and url is empty
+      () => {
+        if (!hasSubmitted.current && !linkRemoved && initialUrl === "") {
+          try {
+            removeLink();
+          } catch (e) {
+            console.error("Error removing link", e);
+          }
+        }
+      },
+    [removeLink, linkRemoved, initialUrl]
+  );
+
+  // Sync state with props
+  useEffect(() => {
+    setLocalUrl(initialUrl);
+  }, [initialUrl]);
+
+  useEffect(() => {
+    if (initialText) setLocalText(initialText);
+  }, [initialText]);
+
+  // Handlers
+  const handleTextChange = useCallback((value: string) => {
+    if (value.trim() !== "") setLocalText(value);
+  }, []);
+
+  const applyChanges = useCallback((): boolean => {
+    if (linkRemoved) return false;
+    hasSubmitted.current = true;
+
+    const { url, isValid } = isValidHttpUrl(localUrl);
+    if (to >= editor.state.doc.content.size || !isValid) return false;
+
+    // Apply URL change
+    const tr = editor.state.tr;
+    tr.removeMark(from, to, editor.schema.marks.link).addMark(from, to, editor.schema.marks.link.create({ href: url }));
+    editor.view.dispatch(tr);
+
+    // Apply text change if different
+    if (localText !== initialText) {
+      const node = editor.view.state.doc.nodeAt(from) as Node;
+      if (!node || !node.marks) return false;
+
+      editor
+        .chain()
+        .setTextSelection(from)
+        .deleteRange({ from: positionRef.from, to: positionRef.to })
+        .insertContent(localText)
+        .setTextSelection({ from, to: from + localText.length })
+        .run();
+      //
+      // Restore marks
+      node.marks.forEach((mark) => {
+        editor.chain().setMark(mark.type.name, mark.attrs).run();
+      });
+    }
+
+    return true;
+  }, [linkRemoved, positionRef, editor, from, to, initialText, localText, localUrl]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.stopPropagation();
+        if (applyChanges()) {
+          closeLinkView();
+          setLocalUrl("");
+          setLocalText("");
+        }
+      }
+    },
+    [applyChanges, closeLinkView]
+  );
+
+  return (
+    <div
+      onKeyDown={handleKeyDown}
+      className="shadow-md animate-in fade-in flex translate-y-1 flex-col gap-3 rounded-sm border-2 border-subtle bg-layer-1 p-2"
+      style={{
+        transition: "all 0.1s cubic-bezier(.55, .085, .68, .53)",
+      }}
+      tabIndex={0}
+    >
+      <InputView label="URL" placeholder="Enter or paste URL" value={localUrl} onChange={setLocalUrl} autoFocus />
+      <InputView label="Text" placeholder="Enter Text to display" value={localText} onChange={handleTextChange} />
+      <div className="bg-strong mb-1 h-[1px] w-full gap-2" />
+      <div className="flex items-center gap-2 text-13 text-secondary">
+        <UnlinkOutline width={14} height={14} className="inline-block" />
+        <button onClick={removeLink} className="cursor-pointer transition-colors hover:text-placeholder">
+          Remove Link
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/editor/src/components/links/link-preview.tsx b/packages/editor/src/components/links/link-preview.tsx
new file mode 100644
index 0000000..b689dcf
--- /dev/null
+++ b/packages/editor/src/components/links/link-preview.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CopyOutline, EditOutline, GlobeOutline, UnlinkOutline } from "@makeplane/propel/icons";
+// components
+import type { LinkViewProps, LinkViews } from "@/components/links";
+
+export function LinkPreview({
+  viewProps,
+  switchView,
+}: {
+  viewProps: LinkViewProps;
+  switchView: (view: LinkViews) => void;
+}) {
+  const { editor, from, to, url } = viewProps;
+
+  const removeLink = () => {
+    editor.view.dispatch(editor.state.tr.removeMark(from, to, editor.schema.marks.link));
+    viewProps.closeLinkView();
+  };
+
+  const copyLinkToClipboard = () => {
+    navigator.clipboard.writeText(url);
+    viewProps.closeLinkView();
+  };
+
+  return (
+    <div
+      className="animate-in fade-in absolute top-0 left-0 max-w-max translate-y-1"
+      style={{
+        transition: "all 0.2s cubic-bezier(.55, .085, .68, .53)",
+      }}
+    >
+      <div className="shadow-md flex items-center gap-3 rounded-sm border-2 border-subtle bg-layer-1 p-2 text-11 text-tertiary">
+        <GlobeOutline width={14} height={14} className="inline-block" />
+        <p>{url?.length > 40 ? url.slice(0, 40) + "..." : url}</p>
+        <div className="flex gap-2">
+          <button onClick={copyLinkToClipboard} className="cursor-pointer transition-colors hover:text-primary">
+            <CopyOutline width={14} height={14} className="inline-block" />
+          </button>
+          {editor.isEditable && (
+            <>
+              <button
+                onClick={() => switchView("LinkEditView")}
+                className="cursor-pointer transition-colors hover:text-primary"
+              >
+                <EditOutline width={14} height={14} className="inline-block" />
+              </button>
+              <button onClick={removeLink} className="cursor-pointer transition-colors hover:text-primary">
+                <UnlinkOutline width={14} height={14} className="inline-block" />
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/editor/src/components/links/link-view.tsx b/packages/editor/src/components/links/link-view.tsx
new file mode 100644
index 0000000..f6d1874
--- /dev/null
+++ b/packages/editor/src/components/links/link-view.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/react";
+import type { CSSProperties } from "react";
+import { useEffect, useState } from "react";
+// components
+import { LinkEditView, LinkPreview } from "@/components/links";
+
+export type LinkViews = "LinkPreview" | "LinkEditView";
+
+export type LinkViewProps = {
+  view?: LinkViews;
+  editor: Editor;
+  from: number;
+  to: number;
+  url: string;
+  text?: string;
+  closeLinkView: () => void;
+};
+
+export function LinkView(props: LinkViewProps & { style: CSSProperties }) {
+  const [currentView, setCurrentView] = useState<LinkViews>(props.view ?? "LinkPreview");
+  const [prevFrom, setPrevFrom] = useState(props.from);
+
+  const switchView = (view: LinkViews) => {
+    setCurrentView(view);
+  };
+
+  useEffect(() => {
+    if (props.from !== prevFrom) {
+      setCurrentView("LinkPreview");
+      setPrevFrom(props.from);
+    }
+  }, [prevFrom, props.from]);
+
+  return (
+    <>
+      {currentView === "LinkPreview" && <LinkPreview viewProps={props} switchView={switchView} />}
+      {currentView === "LinkEditView" && <LinkEditView viewProps={props} switchView={switchView} />}
+    </>
+  );
+}
diff --git a/packages/editor/src/components/menus/ai-menu.tsx b/packages/editor/src/components/menus/ai-menu.tsx
new file mode 100644
index 0000000..5a046d8
--- /dev/null
+++ b/packages/editor/src/components/menus/ai-menu.tsx
@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import tippy from "tippy.js";
+import type { Instance } from "tippy.js";
+// plane utils
+import { cn } from "@plane/utils";
+// types
+import type { TAIHandler } from "@/types";
+
+type Props = {
+  menu: TAIHandler["menu"];
+};
+
+export function AIFeaturesMenu(props: Props) {
+  const { menu } = props;
+  // states
+  const [isPopupVisible, setIsPopupVisible] = useState(false);
+  // refs
+  const menuRef = useRef<HTMLDivElement>(null);
+  const popup = useRef<Instance | null>(null);
+
+  useEffect(() => {
+    if (!menuRef.current) return;
+
+    menuRef.current.remove();
+    menuRef.current.style.visibility = "visible";
+
+    // @ts-expect-error - Tippy types are incorrect
+    popup.current = tippy(document.body, {
+      getReferenceClientRect: null,
+      content: menuRef.current,
+      appendTo: () => document.querySelector(".frame-renderer"),
+      trigger: "manual",
+      interactive: true,
+      arrow: false,
+      placement: "bottom-start",
+      animation: "shift-away",
+      hideOnClick: true,
+      onShown: () => menuRef.current?.focus(),
+    });
+
+    return () => {
+      popup.current?.destroy();
+      popup.current = null;
+    };
+  }, []);
+
+  const hidePopup = useCallback(() => {
+    popup.current?.hide();
+    setIsPopupVisible(false);
+  }, []);
+
+  useEffect(() => {
+    const handleClickAIHandle = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.matches("#ai-handle") || menuRef.current?.contains(e.target as Node)) {
+        e.preventDefault();
+
+        if (!isPopupVisible) {
+          popup.current?.setProps({
+            getReferenceClientRect: () => target.getBoundingClientRect(),
+          });
+          popup.current?.show();
+          setIsPopupVisible(true);
+        }
+        return;
+      }
+
+      hidePopup();
+      return;
+    };
+
+    document.addEventListener("click", handleClickAIHandle);
+    document.addEventListener("contextmenu", handleClickAIHandle);
+    document.addEventListener("keydown", hidePopup);
+
+    return () => {
+      document.removeEventListener("click", handleClickAIHandle);
+      document.removeEventListener("contextmenu", handleClickAIHandle);
+      document.removeEventListener("keydown", hidePopup);
+    };
+  }, [hidePopup, isPopupVisible]);
+
+  return (
+    <div
+      className={cn("pointer-events-none fixed inset-0 z-10 size-full opacity-0 transition-opacity", {
+        "pointer-events-auto opacity-100": isPopupVisible,
+      })}
+    >
+      <div ref={menuRef} className="z-10">
+        {menu?.({
+          isOpen: isPopupVisible,
+          onClose: hidePopup,
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/editor/src/components/menus/block-menu-options.tsx b/packages/editor/src/components/menus/block-menu-options.tsx
new file mode 100644
index 0000000..6fe33c2
--- /dev/null
+++ b/packages/editor/src/components/menus/block-menu-options.tsx
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { TableMap } from "@tiptap/pm/tables";
+import type { Editor } from "@tiptap/react";
+import { DragDropOutline } from "@makeplane/propel/icons";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// types
+import type { BlockMenuOption } from "./block-menu";
+
+const findSelectedTable = (editor: Editor): { tableNode: ProseMirrorNode | null; tablePos: number } => {
+  const { state } = editor;
+  const selectedNode = state.selection.content().content.firstChild;
+
+  if (selectedNode?.type.name === CORE_EXTENSIONS.TABLE) {
+    return {
+      tableNode: selectedNode,
+      tablePos: state.selection.from,
+    };
+  }
+
+  return { tableNode: null, tablePos: -1 };
+};
+
+const setTableToFullWidth = (editor: Editor): void => {
+  try {
+    const { state, view } = editor;
+
+    // Find the selected table
+    const { tableNode, tablePos } = findSelectedTable(editor);
+    if (!tableNode) return;
+
+    // Get content width from CSS variable
+    const editorContainer = view.dom.closest(".editor-container");
+    if (!editorContainer) return;
+
+    const contentWidthVar = getComputedStyle(editorContainer).getPropertyValue("--editor-content-width").trim();
+    if (!contentWidthVar) return;
+
+    const contentWidth = parseInt(contentWidthVar);
+    if (isNaN(contentWidth) || contentWidth <= 0) return;
+
+    // Calculate equal width for each column
+    const map = TableMap.get(tableNode);
+    const equalWidth = Math.floor(contentWidth / map.width);
+
+    // Update all cell widths
+    const tr = state.tr;
+    const tableStart = tablePos + 1;
+    const updatedCells = new Set<number>();
+
+    for (let row = 0; row < map.height; row++) {
+      for (let col = 0; col < map.width; col++) {
+        const cellIndex = row * map.width + col;
+        const cellPos = map.map[cellIndex];
+
+        // Skip if cell already updated (for merged cells)
+        if (updatedCells.has(cellPos)) continue;
+
+        const cell = state.doc.nodeAt(tableStart + cellPos);
+        if (!cell) continue;
+
+        // Handle colspan for merged cells
+        const colspan = cell.attrs.colspan || 1;
+        tr.setNodeMarkup(tableStart + cellPos, null, {
+          ...cell.attrs,
+          colwidth: Array(colspan).fill(equalWidth),
+        });
+
+        updatedCells.add(cellPos);
+      }
+    }
+
+    view.dispatch(tr);
+  } catch (error) {
+    console.error("Error setting table to full width:", error);
+  }
+};
+
+export const getNodeOptions = (editor: Editor): BlockMenuOption[] => [
+  {
+    icon: DragDropOutline,
+    key: "table-full-width",
+    label: "Fit to width",
+    isDisabled: !editor.isActive(CORE_EXTENSIONS.TABLE),
+    onClick: () => setTableToFullWidth(editor),
+  },
+];
diff --git a/packages/editor/src/components/menus/block-menu.tsx b/packages/editor/src/components/menus/block-menu.tsx
new file mode 100644
index 0000000..d50feae
--- /dev/null
+++ b/packages/editor/src/components/menus/block-menu.tsx
@@ -0,0 +1,255 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useDismiss,
+  useInteractions,
+  FloatingPortal,
+} from "@floating-ui/react";
+import type { Editor } from "@tiptap/react";
+import type { LucideIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { CopyOutline, DeleteOutline } from "@makeplane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { cn } from "@plane/utils";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// types
+import type { IEditorProps } from "@/types";
+// components
+import { getNodeOptions } from "./block-menu-options";
+
+type Props = {
+  disabledExtensions?: IEditorProps["disabledExtensions"];
+  editor: Editor;
+  flaggedExtensions?: IEditorProps["flaggedExtensions"];
+  workItemIdentifier?: IEditorProps["workItemIdentifier"];
+};
+export type BlockMenuOption = {
+  icon: LucideIcon | React.FC<ISvgIcons>;
+  key: string;
+  label: string;
+  onClick: (e: React.MouseEvent) => void;
+  isDisabled?: boolean;
+};
+
+export function BlockMenu(props: Props) {
+  const { editor } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isAnimatedIn, setIsAnimatedIn] = useState(false);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const virtualReferenceRef = useRef<{ getBoundingClientRect: () => DOMRect }>({
+    getBoundingClientRect: () => new DOMRect(),
+  });
+
+  // Set up Floating UI with virtual reference element
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [offset({ crossAxis: -10 }), flip(), shift()],
+    whileElementsMounted: autoUpdate,
+    placement: "left-start",
+  });
+
+  const dismiss = useDismiss(context);
+  const { getFloatingProps } = useInteractions([dismiss]);
+
+  const openBlockMenu = useCallback(() => {
+    if (!isOpen) {
+      setIsOpen(true);
+      editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.SIDE_MENU);
+    }
+  }, [editor, isOpen]);
+
+  const closeBlockMenu = useCallback(() => {
+    if (isOpen) {
+      setIsOpen(false);
+      editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.SIDE_MENU);
+    }
+  }, [editor, isOpen]);
+
+  // Handle click on drag handle
+  const handleClickDragHandle = useCallback(
+    (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const dragHandle = target.closest("#drag-handle");
+
+      if (dragHandle) {
+        event.preventDefault();
+
+        // Update virtual reference with current drag handle position
+        virtualReferenceRef.current = {
+          getBoundingClientRect: () => dragHandle.getBoundingClientRect(),
+        };
+
+        // Set the virtual reference as the reference element
+        refs.setReference(virtualReferenceRef.current);
+
+        // Show the menu
+        openBlockMenu();
+        return;
+      }
+
+      // If clicking outside and not on a menu item, hide the menu
+      if (menuRef.current && !menuRef.current.contains(target)) {
+        closeBlockMenu();
+      }
+    },
+    [refs, openBlockMenu, closeBlockMenu]
+  );
+
+  // Set up event listeners
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        closeBlockMenu();
+      }
+    };
+
+    const handleScroll = () => {
+      closeBlockMenu();
+    };
+
+    document.addEventListener("click", handleClickDragHandle);
+    document.addEventListener("contextmenu", handleClickDragHandle);
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("scroll", handleScroll, true);
+
+    return () => {
+      document.removeEventListener("click", handleClickDragHandle);
+      document.removeEventListener("contextmenu", handleClickDragHandle);
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [editor.commands, handleClickDragHandle, closeBlockMenu]);
+
+  // Animation effect
+  useEffect(() => {
+    if (isOpen) {
+      setIsAnimatedIn(false);
+      // Add a small delay before starting the animation
+      const timeout = setTimeout(() => {
+        requestAnimationFrame(() => {
+          setIsAnimatedIn(true);
+        });
+      }, 50);
+
+      return () => clearTimeout(timeout);
+    } else {
+      setIsAnimatedIn(false);
+    }
+  }, [isOpen]);
+
+  const MENU_ITEMS: BlockMenuOption[] = [
+    {
+      icon: DeleteOutline,
+      key: "delete",
+      label: "Delete",
+      onClick: (_e) => {
+        // Execute the delete action
+        editor.chain().deleteSelection().focus().run();
+      },
+    },
+    {
+      icon: CopyOutline,
+      key: "duplicate",
+      label: "Duplicate",
+      isDisabled:
+        editor.state.selection.content().content.firstChild?.type.name === CORE_EXTENSIONS.IMAGE ||
+        editor.isActive(CORE_EXTENSIONS.CUSTOM_IMAGE),
+      onClick: (_e) => {
+        try {
+          const { state } = editor;
+          const { selection } = state;
+          const firstChild = selection.content().content.firstChild;
+          const docSize = state.doc.content.size;
+
+          if (!firstChild) {
+            throw new Error("No content selected or content is not duplicable.");
+          }
+
+          // Directly use selection.to as the insertion position
+          const insertPos = selection.to;
+
+          // Ensure the insertion position is within the document's bounds
+          if (insertPos < 0 || insertPos > docSize) {
+            throw new Error("The insertion position is invalid or outside the document.");
+          }
+
+          const contentToInsert = firstChild.toJSON();
+
+          // Insert the content at the calculated position
+          editor
+            .chain()
+            .insertContentAt(insertPos, contentToInsert, {
+              updateSelection: true,
+            })
+            .focus(Math.min(insertPos + 1, docSize), { scrollIntoView: false })
+            .run();
+        } catch (error) {
+          if (error instanceof Error) {
+            console.error(error.message);
+          }
+        }
+      },
+    },
+    ...getNodeOptions(editor),
+  ];
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <FloatingPortal>
+      <div
+        ref={(node) => {
+          refs.setFloating(node);
+          menuRef.current = node;
+        }}
+        style={{
+          ...floatingStyles,
+          animationFillMode: "forwards",
+          transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", // Expo ease out
+          zIndex: 100,
+        }}
+        className={cn(
+          "max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-raised-200",
+          "origin-top-right transform transition-all duration-300",
+          isAnimatedIn ? "scale-100 opacity-100" : "scale-75 opacity-0"
+        )}
+        {...getFloatingProps()}
+      >
+        {MENU_ITEMS.map((item) => {
+          if (item.isDisabled) return null;
+
+          return (
+            <button
+              key={item.key}
+              type="button"
+              className="flex w-full items-center gap-1.5 truncate rounded-sm px-1 py-1.5 text-11 text-secondary hover:bg-layer-1"
+              onClick={(e) => {
+                item.onClick(e);
+                e.preventDefault();
+                e.stopPropagation();
+                closeBlockMenu();
+              }}
+              disabled={item.isDisabled}
+            >
+              <item.icon className="h-3 w-3" />
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+    </FloatingPortal>
+  );
+}
diff --git a/packages/editor/src/components/menus/bubble-menu/alignment-selector.tsx b/packages/editor/src/components/menus/bubble-menu/alignment-selector.tsx
new file mode 100644
index 0000000..311eaa5
--- /dev/null
+++ b/packages/editor/src/components/menus/bubble-menu/alignment-selector.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import type { ComponentType, SVGProps } from "react";
+import { AlignCenterOutline, AlignLeftOutline, AlignRightOutline } from "@makeplane/propel/icons";
+// plane utils
+import { cn } from "@plane/utils";
+// components
+import { TextAlignItem } from "@/components/menus";
+// types
+import type { TEditorCommands } from "@/types";
+import type { EditorStateType } from "./root";
+
+type Props = {
+  editor: Editor;
+  editorState: EditorStateType;
+};
+
+export function TextAlignmentSelector(props: Props) {
+  const { editor, editorState } = props;
+  const menuItem = TextAlignItem(editor);
+
+  const textAlignmentOptions: {
+    itemKey: TEditorCommands;
+    renderKey: string;
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    command: () => void;
+    isActive: () => boolean;
+  }[] = [
+    {
+      itemKey: "text-align",
+      renderKey: "text-align-left",
+      icon: AlignLeftOutline,
+      command: () =>
+        menuItem.command({
+          alignment: "left",
+        }),
+      isActive: () => editorState.left,
+    },
+    {
+      itemKey: "text-align",
+      renderKey: "text-align-center",
+      icon: AlignCenterOutline,
+      command: () =>
+        menuItem.command({
+          alignment: "center",
+        }),
+      isActive: () => editorState.center,
+    },
+    {
+      itemKey: "text-align",
+      renderKey: "text-align-right",
+      icon: AlignRightOutline,
+      command: () =>
+        menuItem.command({
+          alignment: "right",
+        }),
+      isActive: () => editorState.right,
+    },
+  ];
+  if (editorState.code) return null;
+
+  return (
+    <div className="flex gap-0.5 px-2">
+      {textAlignmentOptions.map((item) => (
+        <button
+          key={item.renderKey}
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            item.command();
+          }}
+          className={cn(
+            "grid size-7 place-items-center rounded-sm text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
+            {
+              "bg-layer-1 text-primary": item.isActive(),
+            }
+          )}
+        >
+          <item.icon className="size-4" />
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/editor/src/components/menus/bubble-menu/color-selector.tsx b/packages/editor/src/components/menus/bubble-menu/color-selector.tsx
new file mode 100644
index 0000000..b2ad51e
--- /dev/null
+++ b/packages/editor/src/components/menus/bubble-menu/color-selector.tsx
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/react";
+import { Ban } from "lucide-react";
+import { TextOutline } from "@makeplane/propel/icons";
+import { useMemo } from "react";
+// plane utils
+import { cn } from "@plane/utils";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+// local imports
+import { FloatingMenuRoot } from "../floating-menu/root";
+import { useFloatingMenu } from "../floating-menu/use-floating-menu";
+import { BackgroundColorItem, TextColorItem } from "../menu-items";
+import type { EditorStateType } from "./root";
+
+type Props = {
+  editor: Editor;
+  editorState: EditorStateType;
+};
+
+export function BubbleMenuColorSelector(props: Props) {
+  const { editor, editorState } = props;
+  // floating ui
+  const { options, getReferenceProps, getFloatingProps } = useFloatingMenu({});
+
+  const activeTextColor = useMemo(() => editorState.color, [editorState.color]);
+  const activeBackgroundColor = useMemo(() => editorState.backgroundColor, [editorState.backgroundColor]);
+
+  return (
+    <FloatingMenuRoot
+      classNames={{
+        buttonContainer: "h-full",
+        button:
+          "flex items-center gap-1 h-full whitespace-nowrap px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm transition-colors",
+      }}
+      menuButton={
+        <>
+          <span>Color</span>
+          <span
+            className={cn("grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong", {
+              "bg-surface-1": !activeBackgroundColor,
+            })}
+            style={{
+              backgroundColor: activeBackgroundColor ? activeBackgroundColor.backgroundColor : "transparent",
+            }}
+          >
+            <TextOutline
+              className={cn("size-3.5", {
+                "text-primary": !activeTextColor,
+              })}
+              style={{
+                color: activeTextColor ? activeTextColor.textColor : "inherit",
+              }}
+            />
+          </span>
+        </>
+      }
+      options={options}
+      getFloatingProps={getFloatingProps}
+      getReferenceProps={getReferenceProps}
+    >
+      <section className="mt-1 space-y-2 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200">
+        <div className="space-y-1.5">
+          <p className="text-11 font-semibold text-tertiary">Text colors</p>
+          <div className="flex items-center gap-2">
+            {COLORS_LIST.map((color) => (
+              <button
+                key={color.key}
+                type="button"
+                className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
+                style={{
+                  backgroundColor: color.textColor,
+                }}
+                onClick={() => TextColorItem(editor).command({ color: color.key })}
+              />
+            ))}
+            <button
+              type="button"
+              className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
+              onClick={() => TextColorItem(editor).command({ color: undefined })}
+            >
+              <Ban className="size-4" />
+            </button>
+          </div>
+        </div>
+        <div className="space-y-1.5">
+          <p className="text-11 font-semibold text-tertiary">Background colors</p>
+          <div className="flex items-center gap-2">
+            {COLORS_LIST.map((color) => (
+              <button
+                key={color.key}
+                type="button"
+                className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
+                style={{
+                  backgroundColor: color.backgroundColor,
+                }}
+                onClick={() => BackgroundColorItem(editor).command({ color: color.key })}
+              />
+            ))}
+            <button
+              type="button"
+              className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1"
+              onClick={() => BackgroundColorItem(editor).command({ color: undefined })}
+            >
+              <Ban className="size-4" />
+            </button>
+          </div>
+        </div>
+      </section>
+    </FloatingMenuRoot>
+  );
+}
diff --git a/packages/editor/src/components/menus/bubble-menu/index.ts b/packages/editor/src/components/menus/bubble-menu/index.ts
new file mode 100644
index 0000000..122fad4
--- /dev/null
+++ b/packages/editor/src/components/menus/bubble-menu/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./color-selector";
+export * from "./node-selector";
+export * from "./root";
diff --git a/packages/editor/src/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/components/menus/bubble-menu/link-selector.tsx
new file mode 100644
index 0000000..8526122
--- /dev/null
+++ b/packages/editor/src/components/menus/bubble-menu/link-selector.tsx
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+
+import { useCallback, useRef, useState } from "react";
+import { DeleteOutline, LinkOutline, TickOutline } from "@makeplane/propel/icons";
+// plane imports
+import { cn } from "@plane/utils";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { isValidHttpUrl } from "@/helpers/common";
+import { setLinkEditor, unsetLinkEditor } from "@/helpers/editor-commands";
+import { FloatingMenuRoot } from "../floating-menu/root";
+import { useFloatingMenu } from "../floating-menu/use-floating-menu";
+
+type Props = {
+  editor: Editor;
+};
+
+export function BubbleMenuLinkSelector(props: Props) {
+  const { editor } = props;
+  // states
+  const [error, setError] = useState(false);
+  // floating ui
+  const { options, getReferenceProps, getFloatingProps } = useFloatingMenu({});
+  const { context } = options;
+  // refs
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleLinkSubmit = useCallback(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    const url = input.value;
+    if (!url) return;
+    const { isValid, url: validatedUrl } = isValidHttpUrl(url);
+    if (isValid) {
+      setLinkEditor(editor, validatedUrl);
+      context.onOpenChange(false);
+      setError(false);
+    } else {
+      setError(true);
+    }
+  }, [editor, inputRef, context]);
+
+  return (
+    <FloatingMenuRoot
+      classNames={{
+        buttonContainer: "h-full",
+        button: cn(
+          "flex h-full items-center gap-1 rounded-sm px-3 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
+          {
+            "bg-layer-1": context.open,
+            "text-primary": editor.isActive(CORE_EXTENSIONS.CUSTOM_LINK),
+          }
+        ),
+      }}
+      getFloatingProps={getFloatingProps}
+      getReferenceProps={getReferenceProps}
+      menuButton={
+        <>
+          Link
+          <LinkOutline className="size-3 shrink-0" />
+        </>
+      }
+      options={options}
+    >
+      <div className="mt-1 w-60 rounded-md bg-surface-1 shadow-raised-200">
+        <div
+          className={cn("flex rounded-sm border-[0.5px] border-strong transition-colors", {
+            "border-danger-strong": error,
+          })}
+        >
+          <input
+            ref={inputRef}
+            type="url"
+            placeholder="Enter or paste a link"
+            onClick={(e) => e.stopPropagation()}
+            className="flex-1 rounded-sm border-r-[0.5px] border-strong bg-surface-1 px-1.5 py-2 text-11 outline-none placeholder:text-placeholder"
+            defaultValue={editor.getAttributes("link").href || ""}
+            onKeyDown={(e) => {
+              setError(false);
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleLinkSubmit();
+              }
+            }}
+            onFocus={() => setError(false)}
+            autoFocus
+          />
+          {editor.getAttributes("link").href ? (
+            <button
+              type="button"
+              className="grid place-items-center rounded-xs p-1 text-danger-primary transition-all hover:bg-danger-subtle-hover"
+              onClick={(e) => {
+                unsetLinkEditor(editor);
+                e.stopPropagation();
+                context.onOpenChange(false);
+              }}
+            >
+              <DeleteOutline className="size-4" />
+            </button>
+          ) : (
+            <button
+              type="button"
+              className="grid aspect-square h-full place-items-center rounded-xs p-1 text-tertiary transition-all hover:bg-layer-1"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleLinkSubmit();
+              }}
+            >
+              <TickOutline className="size-4" />
+            </button>
+          )}
+        </div>
+        {error && (
+          <p className="animate-in fade-in slide-in-from-top-0 pointer-events-none my-1 px-2 text-11 text-danger-primary">
+            Please enter a valid URL
+          </p>
+        )}
+      </div>
+    </FloatingMenuRoot>
+  );
+}
diff --git a/packages/editor/src/components/menus/bubble-menu/node-selector.tsx b/packages/editor/src/components/menus/bubble-menu/node-selector.tsx
new file mode 100644
index 0000000..78663ab
--- /dev/null
+++ b/packages/editor/src/components/menus/bubble-menu/node-selector.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/react";
+
+import { ChevronDownOutline, TickOutline } from "@makeplane/propel/icons";
+// plane utils
+import { cn } from "@plane/utils";
+// components
+import type { EditorMenuItem } from "@/components/menus";
+import {
+  BulletListItem,
+  HeadingOneItem,
+  HeadingThreeItem,
+  HeadingTwoItem,
+  NumberedListItem,
+  QuoteItem,
+  CodeItem,
+  TodoListItem,
+  TextItem,
+  HeadingFourItem,
+  HeadingFiveItem,
+  HeadingSixItem,
+} from "@/components/menus";
+// types
+import type { TEditorCommands } from "@/types";
+// local imports
+import { FloatingMenuRoot } from "../floating-menu/root";
+import { useFloatingMenu } from "../floating-menu/use-floating-menu";
+
+type Props = {
+  editor: Editor;
+};
+
+export function BubbleMenuNodeSelector(props: Props) {
+  const { editor } = props;
+  // floating ui
+  const { options, getReferenceProps, getFloatingProps } = useFloatingMenu({});
+  const { context } = options;
+  const items: EditorMenuItem<TEditorCommands>[] = [
+    TextItem(editor),
+    HeadingOneItem(editor),
+    HeadingTwoItem(editor),
+    HeadingThreeItem(editor),
+    HeadingFourItem(editor),
+    HeadingFiveItem(editor),
+    HeadingSixItem(editor),
+    BulletListItem(editor),
+    NumberedListItem(editor),
+    TodoListItem(editor),
+    QuoteItem(editor),
+    CodeItem(editor),
+  ] as EditorMenuItem<TEditorCommands>[];
+
+  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
+    name: "Multiple",
+  };
+
+  return (
+    <FloatingMenuRoot
+      classNames={{
+        buttonContainer: "h-full",
+        button: cn(
+          "flex h-full items-center gap-1 rounded-sm px-3 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
+          {
+            "bg-layer-1": context.open,
+          }
+        ),
+      }}
+      menuButton={
+        <>
+          <span>{activeItem?.name}</span>
+          <ChevronDownOutline className="size-3 shrink-0" />
+        </>
+      }
+      options={options}
+      getFloatingProps={getFloatingProps}
+      getReferenceProps={getReferenceProps}
+    >
+      <section className="mt-1 flex max-h-[90vh] w-48 flex-col overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200">
+        {items.map((item) => (
+          <button
+            key={item.name}
+            type="button"
+            onClick={(e) => {
+              item.command();
+              context.onOpenChange(false);
+              e.stopPropagation();
+            }}
+            className={cn(
+              "flex items-center justify-between rounded-sm px-1 py-1.5 text-13 text-secondary hover:bg-layer-1",
+              {
+                "bg-layer-1": activeItem.name === item.name,
+              }
+            )}
+          >
+            <div className="flex items-center space-x-2">
+              <item.icon className="size-3 flex-shrink-0" />
+              <span>{item.name}</span>
+            </div>
+            {activeItem.name === item.name && <TickOutline className="size-3 flex-shrink-0 text-tertiary" />}
+          </button>
+        ))}
+      </section>
+    </FloatingMenuRoot>
+  );
+}
diff --git a/packages/editor/src/components/menus/bubble-menu/root.tsx b/packages/editor/src/components/menus/bubble-menu/root.tsx
new file mode 100644
index 0000000..0173275
--- /dev/null
+++ b/packages/editor/src/components/menus/bubble-menu/root.tsx
@@ -0,0 +1,234 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isNodeSelection } from "@tiptap/core";
+import type { Editor } from "@tiptap/core";
+import { BubbleMenu, useEditorState } from "@tiptap/react";
+import type { BubbleMenuProps } from "@tiptap/react";
+import { useEffect, useState, useRef } from "react";
+// plane utils
+import { cn } from "@plane/utils";
+// components
+import type { EditorMenuItem } from "@/components/menus";
+import {
+  BackgroundColorItem,
+  BoldItem,
+  BubbleMenuColorSelector,
+  BubbleMenuNodeSelector,
+  CodeItem,
+  ItalicItem,
+  StrikeThroughItem,
+  TextAlignItem,
+  TextColorItem,
+  UnderLineItem,
+} from "@/components/menus";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// extensions
+import { isCellSelection } from "@/extensions/table/table/utilities/helpers";
+// types
+import type { IEditorPropsExtended, TEditorCommands, TExtensions } from "@/types";
+// local imports
+import { TextAlignmentSelector } from "./alignment-selector";
+import { BubbleMenuLinkSelector } from "./link-selector";
+
+type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
+
+export type EditorStateType = {
+  code: boolean;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strikethrough: boolean;
+  left: boolean;
+  right: boolean;
+  center: boolean;
+  color:
+    | {
+        key: string;
+        label: string;
+        textColor: string;
+        backgroundColor: string;
+      }
+    | undefined;
+  backgroundColor:
+    | {
+        key: string;
+        label: string;
+        textColor: string;
+        backgroundColor: string;
+      }
+    | undefined;
+};
+
+type Props = {
+  disabledExtensions: TExtensions[];
+  editor: Editor;
+  extendedEditorProps: IEditorPropsExtended;
+  flaggedExtensions: TExtensions[];
+};
+
+export function EditorBubbleMenu(props: Props) {
+  const { editor } = props;
+  // states
+  const [isSelecting, setIsSelecting] = useState(false);
+  // refs
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const formattingItems = {
+    code: CodeItem(editor),
+    bold: BoldItem(editor),
+    italic: ItalicItem(editor),
+    underline: UnderLineItem(editor),
+    strikethrough: StrikeThroughItem(editor),
+    "text-align": TextAlignItem(editor),
+  } satisfies {
+    [K in TEditorCommands]?: EditorMenuItem<K>;
+  };
+
+  const editorState: EditorStateType = useEditorState({
+    editor,
+    selector: ({ editor }) => ({
+      code: formattingItems.code.isActive(),
+      bold: formattingItems.bold.isActive(),
+      italic: formattingItems.italic.isActive(),
+      underline: formattingItems.underline.isActive(),
+      strikethrough: formattingItems.strikethrough.isActive(),
+      left: formattingItems["text-align"].isActive({ alignment: "left" }),
+      right: formattingItems["text-align"].isActive({ alignment: "right" }),
+      center: formattingItems["text-align"].isActive({ alignment: "center" }),
+      color: COLORS_LIST.find((c) => TextColorItem(editor).isActive({ color: c.key })),
+      backgroundColor: COLORS_LIST.find((c) => BackgroundColorItem(editor).isActive({ color: c.key })),
+    }),
+  });
+
+  const basicFormattingOptions = editorState.code
+    ? [formattingItems.code]
+    : [formattingItems.bold, formattingItems.italic, formattingItems.underline, formattingItems.strikethrough];
+
+  const bubbleMenuProps: EditorBubbleMenuProps = {
+    editor,
+    shouldShow: ({ state, editor }) => {
+      const { selection } = state;
+      const { empty } = selection;
+
+      if (
+        empty ||
+        !editor.isEditable ||
+        editor.isActive(CORE_EXTENSIONS.IMAGE) ||
+        editor.isActive(CORE_EXTENSIONS.CUSTOM_IMAGE) ||
+        isNodeSelection(selection) ||
+        isCellSelection(selection) ||
+        isSelecting
+      ) {
+        return false;
+      }
+      return true;
+    },
+    tippyOptions: {
+      moveTransition: "transform 0.15s ease-out",
+      duration: [300, 0],
+      zIndex: 9,
+      onShow: () => {
+        if (editor.storage.link) {
+          editor.storage.link.isBubbleMenuOpen = true;
+        }
+        editor.commands.addActiveDropbarExtension("bubble-menu");
+      },
+      onHide: () => {
+        if (editor.storage.link) {
+          editor.storage.link.isBubbleMenuOpen = false;
+        }
+        setTimeout(() => {
+          editor.commands.removeActiveDropbarExtension("bubble-menu");
+        }, 0);
+      },
+      onHidden: () => {
+        if (editor.storage.link) {
+          editor.storage.link.isBubbleMenuOpen = false;
+        }
+        setTimeout(() => {
+          editor.commands.removeActiveDropbarExtension("bubble-menu");
+        }, 0);
+      },
+    },
+  };
+
+  useEffect(() => {
+    function handleMouseDown(e: MouseEvent) {
+      if (menuRef.current?.contains(e.target as Node)) return;
+
+      function handleMouseMove() {
+        if (!editor.state.selection.empty) {
+          setIsSelecting(true);
+          document.removeEventListener("mousemove", handleMouseMove);
+        }
+      }
+
+      function handleMouseUp() {
+        setIsSelecting(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      }
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+
+    document.addEventListener("mousedown", handleMouseDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [editor]);
+
+  return (
+    <BubbleMenu {...bubbleMenuProps}>
+      {!isSelecting && (
+        <div
+          ref={menuRef}
+          className="horizontal-scrollbar flex scrollbar-xs divide-x divide-subtle-1 overflow-x-scroll rounded-lg border border-subtle bg-surface-1 py-2 shadow-raised-200"
+        >
+          <div className="px-2">
+            <BubbleMenuNodeSelector editor={editor} />
+          </div>
+          {!editorState.code && (
+            <div className="px-2">
+              <BubbleMenuLinkSelector editor={editor} />
+            </div>
+          )}
+          {!editorState.code && (
+            <div className="px-2">
+              <BubbleMenuColorSelector editor={editor} editorState={editorState} />
+            </div>
+          )}
+          <div className="flex gap-0.5 px-2">
+            {basicFormattingOptions.map((item) => (
+              <button
+                key={item.key}
+                type="button"
+                onClick={(e) => {
+                  item.command();
+                  e.stopPropagation();
+                }}
+                className={cn(
+                  "grid size-7 place-items-center rounded-sm text-tertiary transition-colors hover:bg-layer-1 active:bg-layer-1",
+                  {
+                    "bg-layer-1 text-primary": editorState[item.key],
+                  }
+                )}
+              >
+                <item.icon className="size-4" />
+              </button>
+            ))}
+          </div>
+          <TextAlignmentSelector editor={editor} editorState={editorState} />
+        </div>
+      )}
+    </BubbleMenu>
+  );
+}
diff --git a/packages/editor/src/components/menus/floating-menu/root.tsx b/packages/editor/src/components/menus/floating-menu/root.tsx
new file mode 100644
index 0000000..1bb0882
--- /dev/null
+++ b/packages/editor/src/components/menus/floating-menu/root.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { FloatingOverlay, FloatingPortal } from "@floating-ui/react";
+import type { UseInteractionsReturn, UseFloatingReturn } from "@floating-ui/react";
+
+type Props = {
+  children: React.ReactNode;
+  classNames?: {
+    buttonContainer?: string;
+    button?: string;
+  };
+  getFloatingProps: UseInteractionsReturn["getFloatingProps"];
+  getReferenceProps: UseInteractionsReturn["getReferenceProps"];
+  menuButton: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  options: UseFloatingReturn;
+};
+
+export function FloatingMenuRoot(props: Props) {
+  const { children, classNames, getFloatingProps, getReferenceProps, menuButton, onClick, options } = props;
+  // derived values
+  const { refs, floatingStyles, context } = options;
+
+  return (
+    <>
+      <div className={classNames?.buttonContainer}>
+        <button
+          ref={refs.setReference}
+          {...getReferenceProps()}
+          type="button"
+          className={classNames?.button}
+          onClick={(e) => {
+            context.onOpenChange(!context.open);
+            onClick?.(e);
+          }}
+        >
+          {menuButton}
+        </button>
+      </div>
+      {context.open && (
+        <FloatingPortal>
+          {/* Backdrop */}
+          <FloatingOverlay
+            style={{
+              zIndex: 99,
+            }}
+            lockScroll
+          />
+          <div
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+            style={{
+              ...floatingStyles,
+              zIndex: 100,
+            }}
+          >
+            {children}
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}
diff --git a/packages/editor/src/components/menus/floating-menu/use-floating-menu.ts b/packages/editor/src/components/menus/floating-menu/use-floating-menu.ts
new file mode 100644
index 0000000..eebeb8e
--- /dev/null
+++ b/packages/editor/src/components/menus/floating-menu/use-floating-menu.ts
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  shift,
+  flip,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  autoUpdate,
+  useClick,
+  useRole,
+} from "@floating-ui/react";
+import type { UseInteractionsReturn, UseFloatingReturn } from "@floating-ui/react";
+import { useState } from "react";
+
+type TArgs = {
+  handleOpenChange?: (open: boolean) => void;
+};
+
+type TReturn = {
+  options: UseFloatingReturn;
+  getReferenceProps: UseInteractionsReturn["getReferenceProps"];
+  getFloatingProps: UseInteractionsReturn["getFloatingProps"];
+};
+
+export const useFloatingMenu = (args: TArgs): TReturn => {
+  const { handleOpenChange } = args;
+  // states
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // floating ui
+  const options = useFloating({
+    placement: "bottom-start",
+    middleware: [
+      flip({
+        fallbackPlacements: ["top-start", "bottom-start", "top-end", "bottom-end"],
+      }),
+      shift({
+        padding: 8,
+      }),
+    ],
+    open: isDropdownOpen,
+    onOpenChange: (open) => {
+      setIsDropdownOpen(open);
+      handleOpenChange?.(open);
+    },
+    whileElementsMounted: autoUpdate,
+  });
+  const { context } = options;
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click, role]);
+
+  return {
+    options,
+    getReferenceProps,
+    getFloatingProps,
+  };
+};
diff --git a/packages/editor/src/components/menus/index.ts b/packages/editor/src/components/menus/index.ts
new file mode 100644
index 0000000..6e67563
--- /dev/null
+++ b/packages/editor/src/components/menus/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./ai-menu";
+export * from "./bubble-menu";
+export * from "./block-menu";
+export * from "./menu-items";
diff --git a/packages/editor/src/components/menus/menu-items.ts b/packages/editor/src/components/menus/menu-items.ts
new file mode 100644
index 0000000..90f54d7
--- /dev/null
+++ b/packages/editor/src/components/menus/menu-items.ts
@@ -0,0 +1,285 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/react";
+import {
+  AlignCenterOutline,
+  BoldOutline,
+  CheckSquareOutline,
+  CodeOutline,
+  H1Outline,
+  H2Outline,
+  H3Outline,
+  H4Outline,
+  H5Outline,
+  H6Outline,
+  ImageOutline,
+  ItalicOutline,
+  LinkOutline,
+  ListOutline,
+  MinusSquareOutline,
+  NumberedListOutline,
+  PaletteOutline,
+  QuoteOutline,
+  StrikethroughOutline,
+  TableOutline,
+  TextOutline,
+  UnderlineOutline,
+} from "@makeplane/propel/icons";
+import type { ComponentType, SVGProps } from "react";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import {
+  insertHorizontalRule,
+  insertImage,
+  insertTableCommand,
+  setLinkEditor,
+  setText,
+  setTextAlign,
+  toggleBackgroundColor,
+  toggleBlockquote,
+  toggleBold,
+  toggleBulletList,
+  toggleCodeBlock,
+  toggleHeading,
+  toggleItalic,
+  toggleOrderedList,
+  toggleStrike,
+  toggleTaskList,
+  toggleTextColor,
+  toggleUnderline,
+  unsetLinkEditor,
+} from "@/helpers/editor-commands";
+// types
+import type { TCommandWithProps, TEditorCommands } from "@/types";
+type isActiveFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => boolean;
+type commandFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => void;
+
+export type EditorMenuItem<T extends TEditorCommands> = {
+  key: T;
+  name: string;
+  command: commandFunction<T>;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  isActive: isActiveFunction<T>;
+};
+
+export const TextItem = (editor: Editor): EditorMenuItem<"text"> => ({
+  key: "text",
+  name: "Text",
+  isActive: () => editor.isActive(CORE_EXTENSIONS.PARAGRAPH),
+  command: () => setText(editor),
+  icon: TextOutline,
+});
+
+type SupportedHeadingLevels = Extract<TEditorCommands, "h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
+
+const HeadingItem = <T extends SupportedHeadingLevels>(
+  editor: Editor,
+  level: 1 | 2 | 3 | 4 | 5 | 6,
+  key: T,
+  name: string,
+  icon: ComponentType<SVGProps<SVGSVGElement>>
+): EditorMenuItem<T> => ({
+  key,
+  name,
+  isActive: () => editor.isActive(CORE_EXTENSIONS.HEADING, { level }),
+  command: () => toggleHeading(editor, level),
+  icon,
+});
+
+export const HeadingOneItem = (editor: Editor): EditorMenuItem<"h1"> =>
+  HeadingItem(editor, 1, "h1", "Heading 1", H1Outline);
+
+export const HeadingTwoItem = (editor: Editor): EditorMenuItem<"h2"> =>
+  HeadingItem(editor, 2, "h2", "Heading 2", H2Outline);
+
+export const HeadingThreeItem = (editor: Editor): EditorMenuItem<"h3"> =>
+  HeadingItem(editor, 3, "h3", "Heading 3", H3Outline);
+
+export const HeadingFourItem = (editor: Editor): EditorMenuItem<"h4"> =>
+  HeadingItem(editor, 4, "h4", "Heading 4", H4Outline);
+
+export const HeadingFiveItem = (editor: Editor): EditorMenuItem<"h5"> =>
+  HeadingItem(editor, 5, "h5", "Heading 5", H5Outline);
+
+export const HeadingSixItem = (editor: Editor): EditorMenuItem<"h6"> =>
+  HeadingItem(editor, 6, "h6", "Heading 6", H6Outline);
+
+export const BoldItem = (editor: Editor): EditorMenuItem<"bold"> => ({
+  key: "bold",
+  name: "Bold",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.BOLD),
+  command: () => toggleBold(editor),
+  icon: BoldOutline,
+});
+
+export const ItalicItem = (editor: Editor): EditorMenuItem<"italic"> => ({
+  key: "italic",
+  name: "Italic",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.ITALIC),
+  command: () => toggleItalic(editor),
+  icon: ItalicOutline,
+});
+
+export const UnderLineItem = (editor: Editor): EditorMenuItem<"underline"> => ({
+  key: "underline",
+  name: "Underline",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.UNDERLINE),
+  command: () => toggleUnderline(editor),
+  icon: UnderlineOutline,
+});
+
+export const StrikeThroughItem = (editor: Editor): EditorMenuItem<"strikethrough"> => ({
+  key: "strikethrough",
+  name: "Strikethrough",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.STRIKETHROUGH),
+  command: () => toggleStrike(editor),
+  icon: StrikethroughOutline,
+});
+
+export const BulletListItem = (editor: Editor): EditorMenuItem<"bulleted-list"> => ({
+  key: "bulleted-list",
+  name: "Bulleted list",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.BULLET_LIST),
+  command: () => toggleBulletList(editor),
+  icon: ListOutline,
+});
+
+export const NumberedListItem = (editor: Editor): EditorMenuItem<"numbered-list"> => ({
+  key: "numbered-list",
+  name: "Numbered list",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.ORDERED_LIST),
+  command: () => toggleOrderedList(editor),
+  icon: NumberedListOutline,
+});
+
+export const TodoListItem = (editor: Editor): EditorMenuItem<"to-do-list"> => ({
+  key: "to-do-list",
+  name: "To-do list",
+  isActive: () => editor.isActive(CORE_EXTENSIONS.TASK_ITEM),
+  command: () => toggleTaskList(editor),
+  icon: CheckSquareOutline,
+});
+
+export const QuoteItem = (editor: Editor): EditorMenuItem<"quote"> => ({
+  key: "quote",
+  name: "Quote",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.BLOCKQUOTE),
+  command: () => toggleBlockquote(editor),
+  icon: QuoteOutline,
+});
+
+export const CodeItem = (editor: Editor): EditorMenuItem<"code"> => ({
+  key: "code",
+  name: "Code",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.CODE_INLINE) || editor?.isActive(CORE_EXTENSIONS.CODE_BLOCK),
+  command: () => toggleCodeBlock(editor),
+  icon: CodeOutline,
+});
+
+export const TableItem = (editor: Editor): EditorMenuItem<"table"> => ({
+  key: "table",
+  name: "Table",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.TABLE),
+  command: () => insertTableCommand(editor),
+  icon: TableOutline,
+});
+
+export const ImageItem = (editor: Editor): EditorMenuItem<"image"> => ({
+  key: "image",
+  name: "Image",
+  isActive: () => editor?.isActive(CORE_EXTENSIONS.IMAGE) || editor?.isActive(CORE_EXTENSIONS.CUSTOM_IMAGE),
+  command: () => insertImage({ editor, event: "insert", pos: editor.state.selection.from }),
+  icon: ImageOutline,
+});
+
+export const HorizontalRuleItem = (editor: Editor): EditorMenuItem<"divider"> =>
+  ({
+    key: "divider",
+    name: "Divider",
+    isActive: () => editor?.isActive(CORE_EXTENSIONS.HORIZONTAL_RULE),
+    command: () => insertHorizontalRule(editor),
+    icon: MinusSquareOutline,
+  }) as const;
+
+export const LinkItem = (editor: Editor): EditorMenuItem<"link"> =>
+  ({
+    key: "link",
+    name: "Link",
+    isActive: () => editor?.isActive("link"),
+
+    command: (props) => {
+      if (!props) return;
+      if (props.url) setLinkEditor(editor, props.url, props.text);
+      else unsetLinkEditor(editor);
+    },
+
+    icon: LinkOutline,
+  }) as const;
+
+export const TextColorItem = (editor: Editor): EditorMenuItem<"text-color"> => ({
+  key: "text-color",
+  name: "Color",
+  isActive: (props) => editor.isActive(CORE_EXTENSIONS.CUSTOM_COLOR, { color: props?.color }),
+  command: (props) => {
+    if (!props) return;
+    toggleTextColor(props.color, editor);
+  },
+  icon: PaletteOutline,
+});
+
+export const BackgroundColorItem = (editor: Editor): EditorMenuItem<"background-color"> => ({
+  key: "background-color",
+  name: "Background color",
+  isActive: (props) => editor.isActive(CORE_EXTENSIONS.CUSTOM_COLOR, { backgroundColor: props?.color }),
+  command: (props) => {
+    if (!props) return;
+    toggleBackgroundColor(props.color, editor);
+  },
+  icon: PaletteOutline,
+});
+
+export const TextAlignItem = (editor: Editor): EditorMenuItem<"text-align"> => ({
+  key: "text-align",
+  name: "Text align",
+  isActive: (props) => editor.isActive({ textAlign: props?.alignment }),
+  command: (props) => {
+    if (!props) return;
+    setTextAlign(props.alignment, editor);
+  },
+  icon: AlignCenterOutline,
+});
+
+export const getEditorMenuItems = (editor: Editor | null): EditorMenuItem<TEditorCommands>[] => {
+  if (!editor) return [];
+
+  return [
+    TextItem(editor),
+    HeadingOneItem(editor),
+    HeadingTwoItem(editor),
+    HeadingThreeItem(editor),
+    HeadingFourItem(editor),
+    HeadingFiveItem(editor),
+    HeadingSixItem(editor),
+    BoldItem(editor),
+    ItalicItem(editor),
+    UnderLineItem(editor),
+    StrikeThroughItem(editor),
+    BulletListItem(editor),
+    TodoListItem(editor),
+    CodeItem(editor),
+    NumberedListItem(editor),
+    QuoteItem(editor),
+    TableItem(editor),
+    ImageItem(editor),
+    HorizontalRuleItem(editor),
+    LinkItem(editor),
+    TextColorItem(editor),
+    BackgroundColorItem(editor),
+    TextAlignItem(editor),
+  ] as EditorMenuItem<TEditorCommands>[];
+};
diff --git a/packages/editor/src/constants/assets.ts b/packages/editor/src/constants/assets.ts
new file mode 100644
index 0000000..ec6d002
--- /dev/null
+++ b/packages/editor/src/constants/assets.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// helpers
+import type { TAssetMetaDataRecord } from "@/helpers/assets";
+// local imports
+import type { ADDITIONAL_EXTENSIONS } from "./extensions";
+
+export const ADDITIONAL_ASSETS_META_DATA_RECORD: Partial<Record<ADDITIONAL_EXTENSIONS, TAssetMetaDataRecord>> = {};
diff --git a/packages/editor/src/constants/common.ts b/packages/editor/src/constants/common.ts
new file mode 100644
index 0000000..a202ab5
--- /dev/null
+++ b/packages/editor/src/constants/common.ts
@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ComponentType, SVGProps } from "react";
+import {
+  AlignCenterOutline,
+  AlignLeftOutline,
+  AlignRightOutline,
+  BoldOutline,
+  CodeOutline,
+  H1Outline,
+  H2Outline,
+  H3Outline,
+  H4Outline,
+  H5Outline,
+  H6Outline,
+  ImageOutline,
+  ItalicOutline,
+  ListOutline,
+  NumberedListOutline,
+  QuoteOutline,
+  StrikethroughOutline,
+  TableEditorOutline,
+  TextOutline,
+  ToDoOutline,
+  UnderlineOutline,
+} from "@makeplane/propel/icons";
+import { MonospaceIcon, SansSerifIcon, SerifIcon } from "@plane/propel/icons";
+import type { TCommandExtraProps, TEditorCommands, TEditorFontStyle } from "@/types";
+
+export type TEditorTypes = "lite" | "document" | "sticky";
+
+// Utility type to enforce the necessary extra props or make extraProps optional
+export type ExtraPropsForCommand<T extends TEditorCommands> = T extends keyof TCommandExtraProps
+  ? TCommandExtraProps[T]
+  : object; // Default to empty object for commands without extra props
+
+export type ToolbarMenuItem<T extends TEditorCommands = TEditorCommands> = {
+  itemKey: T;
+  renderKey: string;
+  name: string;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  shortcut?: string[];
+  editors: TEditorTypes[];
+  extraProps?: ExtraPropsForCommand<T>;
+};
+
+export const TYPOGRAPHY_ITEMS: ToolbarMenuItem<"text" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6">[] = [
+  { itemKey: "text", renderKey: "text", name: "Text", icon: TextOutline, editors: ["document"] },
+  { itemKey: "h1", renderKey: "h1", name: "Heading 1", icon: H1Outline, editors: ["document"] },
+  { itemKey: "h2", renderKey: "h2", name: "Heading 2", icon: H2Outline, editors: ["document"] },
+  { itemKey: "h3", renderKey: "h3", name: "Heading 3", icon: H3Outline, editors: ["document"] },
+  { itemKey: "h4", renderKey: "h4", name: "Heading 4", icon: H4Outline, editors: ["document"] },
+  { itemKey: "h5", renderKey: "h5", name: "Heading 5", icon: H5Outline, editors: ["document"] },
+  { itemKey: "h6", renderKey: "h6", name: "Heading 6", icon: H6Outline, editors: ["document"] },
+];
+
+export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-left",
+    name: "Left align",
+    icon: AlignLeftOutline,
+    shortcut: ["Cmd", "Shift", "L"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "left",
+    },
+  },
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-center",
+    name: "Center align",
+    icon: AlignCenterOutline,
+    shortcut: ["Cmd", "Shift", "E"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "center",
+    },
+  },
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-right",
+    name: "Right align",
+    icon: AlignRightOutline,
+    shortcut: ["Cmd", "Shift", "R"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "right",
+    },
+  },
+];
+
+const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strikethrough">[] = [
+  {
+    itemKey: "bold",
+    renderKey: "bold",
+    name: "Bold",
+    icon: BoldOutline,
+    shortcut: ["Cmd", "B"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "italic",
+    renderKey: "italic",
+    name: "Italic",
+    icon: ItalicOutline,
+    shortcut: ["Cmd", "I"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "underline",
+    renderKey: "underline",
+    name: "Underline",
+    icon: UnderlineOutline,
+    shortcut: ["Cmd", "U"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "strikethrough",
+    renderKey: "strikethrough",
+    name: "Strikethrough",
+    icon: StrikethroughOutline,
+    shortcut: ["Cmd", "Shift", "S"],
+    editors: ["lite", "document"],
+  },
+];
+
+const LIST_ITEMS: ToolbarMenuItem<"bulleted-list" | "numbered-list" | "to-do-list">[] = [
+  {
+    itemKey: "bulleted-list",
+    renderKey: "bulleted-list",
+    name: "Bulleted list",
+    icon: ListOutline,
+    shortcut: ["Cmd", "Shift", "7"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "numbered-list",
+    renderKey: "numbered-list",
+    name: "Numbered list",
+    icon: NumberedListOutline,
+    shortcut: ["Cmd", "Shift", "8"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "to-do-list",
+    renderKey: "to-do-list",
+    name: "To-do list",
+    icon: ToDoOutline,
+    shortcut: ["Cmd", "Shift", "9"],
+    editors: ["lite", "document"],
+  },
+];
+
+export const USER_ACTION_ITEMS: ToolbarMenuItem<"quote" | "code">[] = [
+  { itemKey: "quote", renderKey: "quote", name: "Quote", icon: QuoteOutline, editors: ["lite", "document"] },
+  { itemKey: "code", renderKey: "code", name: "Code", icon: CodeOutline, editors: ["lite", "document"] },
+];
+
+export const COMPLEX_ITEMS: ToolbarMenuItem<"table" | "image">[] = [
+  { itemKey: "table", renderKey: "table", name: "Table", icon: TableEditorOutline, editors: ["document"] },
+  { itemKey: "image", renderKey: "image", name: "Image", icon: ImageOutline, editors: ["lite", "document"] },
+];
+
+export const IMAGE_ITEM = COMPLEX_ITEMS.find((item): item is ToolbarMenuItem<"image"> => item.itemKey === "image")!;
+
+export const TOOLBAR_ITEMS: {
+  [editorType in TEditorTypes]: {
+    [key: string]: ToolbarMenuItem[];
+  };
+} = {
+  lite: {
+    basic: BASIC_MARK_ITEMS.filter((item) => item.editors.includes("lite")),
+    alignment: TEXT_ALIGNMENT_ITEMS.filter((item) => item.editors.includes("lite")),
+    list: LIST_ITEMS.filter((item) => item.editors.includes("lite")),
+    userAction: USER_ACTION_ITEMS.filter((item) => item.editors.includes("lite")),
+    complex: COMPLEX_ITEMS.filter((item) => item.editors.includes("lite")),
+  },
+  document: {
+    basic: BASIC_MARK_ITEMS.filter((item) => item.editors.includes("document")),
+    alignment: TEXT_ALIGNMENT_ITEMS.filter((item) => item.editors.includes("document")),
+    list: LIST_ITEMS.filter((item) => item.editors.includes("document")),
+    userAction: USER_ACTION_ITEMS.filter((item) => item.editors.includes("document")),
+    complex: COMPLEX_ITEMS.filter((item) => item.editors.includes("document")),
+  },
+  sticky: {
+    basic: BASIC_MARK_ITEMS.filter((item) => ["bold", "italic"].includes(item.itemKey)),
+    list: LIST_ITEMS.filter((item) => ["to-do-list"].includes(item.itemKey)),
+  },
+};
+
+export const COLORS_LIST: {
+  key: string;
+  label: string;
+  textColor: string;
+  backgroundColor: string;
+}[] = [
+  {
+    key: "gray",
+    label: "Gray",
+    textColor: "var(--editor-colors-gray-text)",
+    backgroundColor: "var(--editor-colors-gray-background)",
+  },
+  {
+    key: "peach",
+    label: "Peach",
+    textColor: "var(--editor-colors-peach-text)",
+    backgroundColor: "var(--editor-colors-peach-background)",
+  },
+  {
+    key: "pink",
+    label: "Pink",
+    textColor: "var(--editor-colors-pink-text)",
+    backgroundColor: "var(--editor-colors-pink-background)",
+  },
+  {
+    key: "orange",
+    label: "Orange",
+    textColor: "var(--editor-colors-orange-text)",
+    backgroundColor: "var(--editor-colors-orange-background)",
+  },
+  {
+    key: "green",
+    label: "Green",
+    textColor: "var(--editor-colors-green-text)",
+    backgroundColor: "var(--editor-colors-green-background)",
+  },
+  {
+    key: "light-blue",
+    label: "Light blue",
+    textColor: "var(--editor-colors-light-blue-text)",
+    backgroundColor: "var(--editor-colors-light-blue-background)",
+  },
+  {
+    key: "dark-blue",
+    label: "Dark blue",
+    textColor: "var(--editor-colors-dark-blue-text)",
+    backgroundColor: "var(--editor-colors-dark-blue-background)",
+  },
+  {
+    key: "purple",
+    label: "Purple",
+    textColor: "var(--editor-colors-purple-text)",
+    backgroundColor: "var(--editor-colors-purple-background)",
+  },
+  // {
+  //   key: "pink-blue-gradient",
+  //   label: "Pink blue gradient",
+  //   textColor: "var(--editor-colors-pink-blue-gradient-text)",
+  //   backgroundColor: "var(--editor-colors-pink-blue-gradient-background)",
+  // },
+];
+
+export const EDITOR_FONT_STYLES: {
+  key: TEditorFontStyle;
+  label: string;
+  icon: React.FC;
+}[] = [
+  { key: "sans-serif", label: "Sans serif", icon: SansSerifIcon },
+  { key: "serif", label: "Serif", icon: SerifIcon },
+  { key: "monospace", label: "Mono", icon: MonospaceIcon },
+];
diff --git a/packages/editor/src/constants/config.ts b/packages/editor/src/constants/config.ts
new file mode 100644
index 0000000..64508e6
--- /dev/null
+++ b/packages/editor/src/constants/config.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { TDisplayConfig } from "@/types";
+
+export const DEFAULT_DISPLAY_CONFIG: TDisplayConfig = {
+  fontSize: "large-font",
+  fontStyle: "sans-serif",
+  lineSpacing: "regular",
+  wideLayout: false,
+};
+
+export const ACCEPTED_IMAGE_MIME_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif"];
+
+export const ACCEPTED_ATTACHMENT_MIME_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/svg+xml",
+  "image/webp",
+  "image/tiff",
+  "image/bmp",
+  "application/pdf",
+  "application/msword",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/vnd.ms-excel",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-powerpoint",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "text/plain",
+  "text/markdown",
+  "application/rtf",
+  "audio/mpeg",
+  "audio/wav",
+  "audio/ogg",
+  "audio/midi",
+  "audio/x-midi",
+  "audio/aac",
+  "audio/flac",
+  "audio/x-m4a",
+  "video/mp4",
+  "video/mpeg",
+  "video/ogg",
+  "video/webm",
+  "video/quicktime",
+  "video/x-msvideo",
+  "video/x-ms-wmv",
+  "application/zip",
+  "application/x-rar-compressed",
+  "application/x-tar",
+  "application/gzip",
+  "model/gltf-binary",
+  "model/gltf+json",
+  "application/octet-stream",
+  "font/ttf",
+  "font/otf",
+  "font/woff",
+  "font/woff2",
+  "text/css",
+  "text/javascript",
+  "application/json",
+  "text/xml",
+  "text/csv",
+  "application/xml",
+];
diff --git a/packages/editor/src/constants/document-collaborative-events.ts b/packages/editor/src/constants/document-collaborative-events.ts
new file mode 100644
index 0000000..e8df6f1
--- /dev/null
+++ b/packages/editor/src/constants/document-collaborative-events.ts
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EPageAccess } from "@plane/constants";
+import type { TPage } from "@plane/types";
+import type { CreatePayload, BaseActionPayload } from "@/types";
+
+// Define all payload types for each event.
+export type ArchivedPayload = CreatePayload<{ archived_at: string | null }>;
+export type UnarchivedPayload = BaseActionPayload;
+export type LockedPayload = CreatePayload<{ is_locked: boolean }>;
+export type UnlockedPayload = BaseActionPayload;
+export type MadePublicPayload = CreatePayload<{ access: EPageAccess }>;
+export type MadePrivatePayload = CreatePayload<{ access: EPageAccess }>;
+export type DeletedPayload = CreatePayload<{ deleted_at: Date | null }>;
+export type DuplicatedPayload = CreatePayload<{ new_page_id: string }>;
+export type PropertyUpdatedPayload = CreatePayload<Partial<TPage>>;
+export type MovedPayload = CreatePayload<{
+  new_project_id: string;
+  new_page_id: string;
+}>;
+export type RestoredPayload = CreatePayload<{ deleted_page_ids?: string[] }>;
+export type ErrorPayload = CreatePayload<{
+  error_message: string;
+  error_type: "fetch" | "store";
+  error_code?: "content_too_large" | "page_locked" | "page_archived";
+  should_disconnect?: boolean;
+}>;
+
+// Enhanced DocumentCollaborativeEvents with payload types.
+// Both the client name and server name are defined, and we add a "payloadType" property
+// so that we can later derive a mapping from client event to payload type.
+export const DocumentCollaborativeEvents = {
+  lock: {
+    client: "locked",
+    server: "lock",
+    payloadType: {} as LockedPayload,
+  },
+  unlock: {
+    client: "unlocked",
+    server: "unlock",
+    payloadType: {} as UnlockedPayload,
+  },
+  archive: {
+    client: "archived",
+    server: "archive",
+    payloadType: {} as ArchivedPayload,
+  },
+  unarchive: {
+    client: "unarchived",
+    server: "unarchive",
+    payloadType: {} as UnarchivedPayload,
+  },
+  "make-public": {
+    client: "made-public",
+    server: "make-public",
+    payloadType: {} as MadePublicPayload,
+  },
+  "make-private": {
+    client: "made-private",
+    server: "make-private",
+    payloadType: {} as MadePrivatePayload,
+  },
+  delete: {
+    client: "deleted",
+    server: "delete",
+    payloadType: {} as DeletedPayload,
+  },
+  move: {
+    client: "moved",
+    server: "move",
+    payloadType: {} as MovedPayload,
+  },
+  duplicate: {
+    client: "duplicated",
+    server: "duplicate",
+    payloadType: {} as DuplicatedPayload,
+  },
+  property_update: {
+    client: "property_updated",
+    server: "property_update",
+    payloadType: {} as PropertyUpdatedPayload,
+  },
+  restore: {
+    client: "restored",
+    server: "restore",
+    payloadType: {} as RestoredPayload,
+  },
+  error: {
+    client: "error",
+    server: "error",
+    payloadType: {} as ErrorPayload,
+  },
+} as const;
diff --git a/packages/editor/src/constants/extension.ts b/packages/editor/src/constants/extension.ts
new file mode 100644
index 0000000..3226cfd
--- /dev/null
+++ b/packages/editor/src/constants/extension.ts
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum CORE_EXTENSIONS {
+  BLOCKQUOTE = "blockquote",
+  BOLD = "bold",
+  BULLET_LIST = "bulletList",
+  CALLOUT = "calloutComponent",
+  CHARACTER_COUNT = "characterCount",
+  CODE_BLOCK = "codeBlock",
+  CODE_INLINE = "code",
+  CUSTOM_COLOR = "customColor",
+  CUSTOM_IMAGE = "imageComponent",
+  CUSTOM_LINK = "link",
+  DOCUMENT = "doc",
+  DROP_CURSOR = "dropCursor",
+  ENTER_KEY = "enterKey",
+  GAP_CURSOR = "gapCursor",
+  HARD_BREAK = "hardBreak",
+  HEADING = "heading",
+  HEADINGS_LIST = "headingsList",
+  HISTORY = "history",
+  HORIZONTAL_RULE = "horizontalRule",
+  IMAGE = "image",
+  ITALIC = "italic",
+  LIST_ITEM = "listItem",
+  MARKDOWN_CLIPBOARD = "markdownClipboard",
+  MENTION = "mention",
+  ORDERED_LIST = "orderedList",
+  PARAGRAPH = "paragraph",
+  PLACEHOLDER = "placeholder",
+  SIDE_MENU = "editorSideMenu",
+  SLASH_COMMANDS = "slash-command",
+  STRIKETHROUGH = "strike",
+  TABLE = "table",
+  TABLE_CELL = "tableCell",
+  TABLE_HEADER = "tableHeader",
+  TABLE_ROW = "tableRow",
+  TASK_ITEM = "taskItem",
+  TASK_LIST = "taskList",
+  TEXT_ALIGN = "textAlign",
+  TEXT_STYLE = "textStyle",
+  TYPOGRAPHY = "typography",
+  UNDERLINE = "underline",
+  UTILITY = "utility",
+  WORK_ITEM_EMBED = "issue-embed-component",
+  EMOJI = "emoji",
+  UNIQUE_ID = "uniqueID",
+}
+
+export const BLOCK_NODE_TYPES = [
+  // Basic block nodes
+  CORE_EXTENSIONS.PARAGRAPH,
+  CORE_EXTENSIONS.HEADING,
+  CORE_EXTENSIONS.BLOCKQUOTE,
+  CORE_EXTENSIONS.CODE_BLOCK,
+  CORE_EXTENSIONS.HORIZONTAL_RULE,
+
+  // List nodes
+  CORE_EXTENSIONS.BULLET_LIST,
+  CORE_EXTENSIONS.ORDERED_LIST,
+  CORE_EXTENSIONS.LIST_ITEM,
+  CORE_EXTENSIONS.TASK_LIST,
+  CORE_EXTENSIONS.TASK_ITEM,
+
+  // Table nodes
+  CORE_EXTENSIONS.TABLE,
+
+  // Media and embed nodes
+  CORE_EXTENSIONS.IMAGE,
+  CORE_EXTENSIONS.CUSTOM_IMAGE,
+  CORE_EXTENSIONS.CALLOUT,
+  CORE_EXTENSIONS.WORK_ITEM_EMBED,
+];
diff --git a/packages/editor/src/constants/extensions.ts b/packages/editor/src/constants/extensions.ts
new file mode 100644
index 0000000..6674bc5
--- /dev/null
+++ b/packages/editor/src/constants/extensions.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum ADDITIONAL_EXTENSIONS {}
+
+export const ADDITIONAL_BLOCK_NODE_TYPES = [];
diff --git a/packages/editor/src/constants/meta.ts b/packages/editor/src/constants/meta.ts
new file mode 100644
index 0000000..6a4aa87
--- /dev/null
+++ b/packages/editor/src/constants/meta.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum CORE_EDITOR_META {
+  SKIP_FILE_DELETION = "skipFileDeletion",
+  INTENTIONAL_DELETION = "intentionalDeletion",
+  ADD_TO_HISTORY = "addToHistory",
+}
diff --git a/packages/editor/src/constants/utility.ts b/packages/editor/src/constants/utility.ts
new file mode 100644
index 0000000..a523df0
--- /dev/null
+++ b/packages/editor/src/constants/utility.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { ADDITIONAL_EXTENSIONS } from "@plane/utils";
+import { CORE_EXTENSIONS } from "@plane/utils";
+// plane editor imports
+import type { ExtensionFileSetStorageKey } from "@/types/storage";
+
+export type NodeFileMapType = Partial<
+  Record<
+    CORE_EXTENSIONS | ADDITIONAL_EXTENSIONS,
+    {
+      fileSetName: ExtensionFileSetStorageKey;
+    }
+  >
+>;
+
+export const NODE_FILE_MAP: NodeFileMapType = {
+  [CORE_EXTENSIONS.IMAGE]: {
+    fileSetName: "deletedImageSet",
+  },
+  [CORE_EXTENSIONS.CUSTOM_IMAGE]: {
+    fileSetName: "deletedImageSet",
+  },
+};
diff --git a/packages/editor/src/contexts/collaboration-context.tsx b/packages/editor/src/contexts/collaboration-context.tsx
new file mode 100644
index 0000000..a4dc1fb
--- /dev/null
+++ b/packages/editor/src/contexts/collaboration-context.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { createContext, useContext } from "react";
+// hooks
+import { useYjsSetup } from "@/hooks/use-yjs-setup";
+
+export type TCollabValue = NonNullable<ReturnType<typeof useYjsSetup>>;
+
+const CollabContext = createContext<TCollabValue | null>(null);
+
+type CollabProviderProps = Parameters<typeof useYjsSetup>[0] & {
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export function CollaborationProvider({ fallback = null, children, ...args }: CollabProviderProps) {
+  const setup = useYjsSetup(args);
+
+  // Only wait for provider setup, not content ready
+  // Consumers can check state.isDocReady to gate content rendering
+  if (!setup) {
+    return <>{fallback}</>;
+  }
+
+  return <CollabContext.Provider value={setup}>{children}</CollabContext.Provider>;
+}
+
+export function useCollaboration(): TCollabValue {
+  const ctx = useContext(CollabContext);
+  if (!ctx) {
+    throw new Error("useCollaboration must be used inside <CollaborationProvider>");
+  }
+  return ctx; // guaranteed non-null
+}
diff --git a/packages/editor/src/contexts/index.ts b/packages/editor/src/contexts/index.ts
new file mode 100644
index 0000000..45651a3
--- /dev/null
+++ b/packages/editor/src/contexts/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./collaboration-context";
diff --git a/packages/editor/src/extensions/additional-slash-command-options.tsx b/packages/editor/src/extensions/additional-slash-command-options.tsx
new file mode 100644
index 0000000..370acb0
--- /dev/null
+++ b/packages/editor/src/extensions/additional-slash-command-options.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// extensions
+import type { TSlashCommandAdditionalOption } from "@/extensions";
+// types
+import type { IEditorProps } from "@/types";
+
+type Props = Pick<IEditorProps, "disabledExtensions" | "flaggedExtensions">;
+
+export const coreEditorAdditionalSlashCommandOptions = (props: Props): TSlashCommandAdditionalOption[] => {
+  const {} = props;
+  const options: TSlashCommandAdditionalOption[] = [];
+  return options;
+};
diff --git a/packages/editor/src/extensions/callout/block.tsx b/packages/editor/src/extensions/callout/block.tsx
new file mode 100644
index 0000000..4d1fb21
--- /dev/null
+++ b/packages/editor/src/extensions/callout/block.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { NodeViewProps } from "@tiptap/react";
+import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
+import { useState } from "react";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+// local components
+import { CalloutBlockColorSelector } from "./color-selector";
+import { CalloutBlockLogoSelector } from "./logo-selector";
+// types
+import type { TCalloutBlockAttributes } from "./types";
+import { ECalloutAttributeNames } from "./types";
+// utils
+import { updateStoredBackgroundColor } from "./utils";
+
+export type CustomCalloutNodeViewProps = NodeViewProps & {
+  node: NodeViewProps["node"] & {
+    attrs: TCalloutBlockAttributes;
+  };
+  updateAttributes: (attrs: Partial<TCalloutBlockAttributes>) => void;
+};
+
+export function CustomCalloutBlock(props: CustomCalloutNodeViewProps) {
+  const { editor, node, updateAttributes } = props;
+  // states
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
+  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+  // derived values
+  const activeBackgroundColor = COLORS_LIST.find((c) => node.attrs["data-background"] === c.key)?.backgroundColor;
+
+  return (
+    <NodeViewWrapper
+      key={node.attrs[ECalloutAttributeNames.ID]}
+      className="editor-callout-component group/callout-node relative my-2 flex items-start gap-4 rounded-lg bg-layer-3 p-4 break-words text-primary transition-colors duration-500"
+      style={{
+        backgroundColor: activeBackgroundColor,
+      }}
+    >
+      <CalloutBlockLogoSelector
+        key={node.attrs[ECalloutAttributeNames.ID]}
+        blockAttributes={node.attrs}
+        disabled={!editor.isEditable}
+        isOpen={isEmojiPickerOpen}
+        handleOpen={(val) => setIsEmojiPickerOpen(val)}
+        updateAttributes={updateAttributes}
+      />
+      <CalloutBlockColorSelector
+        disabled={!editor.isEditable}
+        isOpen={isColorPickerOpen}
+        toggleDropdown={() => setIsColorPickerOpen((prev) => !prev)}
+        onSelect={(val) => {
+          updateAttributes({
+            [ECalloutAttributeNames.BACKGROUND]: val,
+          });
+          updateStoredBackgroundColor(val);
+        }}
+      />
+      <NodeViewContent as="div" className="w-full break-words" />
+    </NodeViewWrapper>
+  );
+}
diff --git a/packages/editor/src/extensions/callout/color-selector.tsx b/packages/editor/src/extensions/callout/color-selector.tsx
new file mode 100644
index 0000000..cb535b3
--- /dev/null
+++ b/packages/editor/src/extensions/callout/color-selector.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Ban } from "lucide-react";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+// plane utils
+import { cn } from "@plane/utils";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+
+type Props = {
+  disabled: boolean;
+  isOpen: boolean;
+  onSelect: (color: string | null) => void;
+  toggleDropdown: () => void;
+};
+
+export function CalloutBlockColorSelector(props: Props) {
+  const { disabled, isOpen, onSelect, toggleDropdown } = props;
+
+  const handleColorSelect = (val: string | null) => {
+    onSelect(val);
+    toggleDropdown();
+  };
+
+  return (
+    <div
+      className={cn("pointer-events-none absolute top-2 right-2 z-10 opacity-0 transition-opacity", {
+        "group-hover/callout-node:pointer-events-auto group-hover/callout-node:opacity-100": !disabled,
+        "pointer-events-auto opacity-100": isOpen,
+      })}
+      contentEditable={false}
+    >
+      <div className="relative">
+        <button
+          type="button"
+          onClick={(e) => {
+            toggleDropdown();
+            e.stopPropagation();
+          }}
+          className={cn(
+            "flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-13 font-medium whitespace-nowrap text-tertiary transition-colors hover:bg-layer-1-hover active:bg-layer-1-active",
+            {
+              "bg-layer-1": isOpen,
+            }
+          )}
+          disabled={disabled}
+        >
+          <span className="text-12">Color</span>
+          <ChevronDownOutline className="size-3 flex-shrink-0" />
+        </button>
+        {isOpen && (
+          <section className="animate-in fade-in slide-in-from-top-1 absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200">
+            <div className="flex items-center gap-2">
+              {COLORS_LIST.map((color) => (
+                <button
+                  key={color.key}
+                  type="button"
+                  className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
+                  style={{
+                    backgroundColor: color.backgroundColor,
+                  }}
+                  onClick={() => handleColorSelect(color.key)}
+                />
+              ))}
+              <button
+                type="button"
+                className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1-hover"
+                onClick={() => handleColorSelect(null)}
+              >
+                <Ban className="size-4" />
+              </button>
+            </div>
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/editor/src/extensions/callout/extension-config.ts b/packages/editor/src/extensions/callout/extension-config.ts
new file mode 100644
index 0000000..dd5ab78
--- /dev/null
+++ b/packages/editor/src/extensions/callout/extension-config.ts
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Node, mergeAttributes } from "@tiptap/core";
+import type { MarkdownSerializerState } from "@tiptap/pm/markdown";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// types
+import { ECalloutAttributeNames } from "./types";
+import type { CustomCalloutExtensionType, TCalloutBlockAttributes } from "./types";
+// utils
+import { DEFAULT_CALLOUT_BLOCK_ATTRIBUTES } from "./utils";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    [CORE_EXTENSIONS.CALLOUT]: {
+      insertCallout: () => ReturnType;
+    };
+  }
+}
+
+export const CustomCalloutExtensionConfig: CustomCalloutExtensionType = Node.create({
+  name: CORE_EXTENSIONS.CALLOUT,
+  group: "block",
+  content: "block+",
+
+  addAttributes() {
+    const attributes = {
+      // Reduce instead of map to accumulate the attributes directly into an object
+      ...Object.values(ECalloutAttributeNames).reduce(
+        (acc, value) => {
+          acc[value] = {
+            default: DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[value],
+          };
+          return acc;
+        },
+        {} as Record<ECalloutAttributeNames, { default: TCalloutBlockAttributes[ECalloutAttributeNames] }>
+      ),
+    };
+
+    return attributes;
+  },
+
+  addStorage() {
+    return {
+      markdown: {
+        serialize(state: MarkdownSerializerState, node: ProseMirrorNode) {
+          const attrs = node.attrs as TCalloutBlockAttributes;
+          const logoInUse = attrs["data-logo-in-use"];
+          // add callout logo
+          if (logoInUse === "emoji") {
+            state.write(
+              `> <img src="${attrs["data-emoji-url"]}" alt="${attrs["data-emoji-unicode"]}" width="30px" />\n`
+            );
+          } else {
+            state.write(`> <icon>${attrs["data-icon-name"]} icon</icon>\n`);
+          }
+          // add an empty line after the logo
+          state.write("> \n");
+          // add '> ' before each line of the callout content
+          state.wrapBlock("> ", null, node, () => state.renderContent(node));
+          state.closeBlock(node);
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `div[${ECalloutAttributeNames.BLOCK_TYPE}="${DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[ECalloutAttributeNames.BLOCK_TYPE]}"]`,
+      },
+    ];
+  },
+
+  // Render HTML for the callout node
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes), 0];
+  },
+});
diff --git a/packages/editor/src/extensions/callout/extension.tsx b/packages/editor/src/extensions/callout/extension.tsx
new file mode 100644
index 0000000..5868583
--- /dev/null
+++ b/packages/editor/src/extensions/callout/extension.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { findParentNodeClosestToPos, ReactNodeViewRenderer } from "@tiptap/react";
+import type { Predicate } from "@tiptap/react";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
+// local imports
+import { CustomCalloutBlock } from "./block";
+import type { CustomCalloutNodeViewProps } from "./block";
+import { CustomCalloutExtensionConfig } from "./extension-config";
+import type { CustomCalloutExtensionOptions, CustomCalloutExtensionStorage } from "./types";
+import { getStoredBackgroundColor, getStoredLogo } from "./utils";
+
+export const CustomCalloutExtension = CustomCalloutExtensionConfig.extend<
+  CustomCalloutExtensionOptions,
+  CustomCalloutExtensionStorage
+>({
+  selectable: true,
+  draggable: true,
+
+  addCommands() {
+    return {
+      insertCallout:
+        () =>
+        ({ commands }) => {
+          // get stored logo values and background color from the local storage
+          const storedLogoValues = getStoredLogo();
+          const storedBackgroundValue = getStoredBackgroundColor();
+
+          return commands.insertContent({
+            type: this.name,
+            content: [
+              {
+                type: CORE_EXTENSIONS.PARAGRAPH,
+              },
+            ],
+            attrs: {
+              ...storedLogoValues,
+              "data-background": storedBackgroundValue,
+            },
+          });
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Backspace: ({ editor }) => {
+        const { $from, empty } = editor.state.selection;
+        try {
+          const isParentNodeCallout: Predicate = (node) => node.type === this.type;
+          const parentNodeDetails = findParentNodeClosestToPos($from, isParentNodeCallout);
+          // Check if selection is empty and at the beginning of the callout
+          if (empty && parentNodeDetails) {
+            const isCursorAtCalloutBeginning = $from.pos === parentNodeDetails.start + 1;
+            if (parentNodeDetails.node.content.size > 2 && isCursorAtCalloutBeginning) {
+              editor.commands.setTextSelection(parentNodeDetails.pos - 1);
+              return true;
+            }
+          }
+        } catch (error) {
+          console.error("Error in performing backspace action on callout", error);
+        }
+        return false; // Allow the default behavior if conditions are not met
+      },
+      ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
+      ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
+    };
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer((props) => (
+      <CustomCalloutBlock {...props} node={props.node as CustomCalloutNodeViewProps["node"]} />
+    ));
+  },
+});
diff --git a/packages/editor/src/extensions/callout/index.ts b/packages/editor/src/extensions/callout/index.ts
new file mode 100644
index 0000000..2dcbf26
--- /dev/null
+++ b/packages/editor/src/extensions/callout/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./extension";
diff --git a/packages/editor/src/extensions/callout/logo-selector.tsx b/packages/editor/src/extensions/callout/logo-selector.tsx
new file mode 100644
index 0000000..a12c137
--- /dev/null
+++ b/packages/editor/src/extensions/callout/logo-selector.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import type { TLogoProps } from "@plane/types";
+import { cn } from "@plane/utils";
+// types
+import type { TCalloutBlockAttributes } from "./types";
+// utils
+import { DEFAULT_CALLOUT_BLOCK_ATTRIBUTES, updateStoredLogo } from "./utils";
+
+type Props = {
+  blockAttributes: TCalloutBlockAttributes;
+  disabled: boolean;
+  handleOpen: (val: boolean) => void;
+  isOpen: boolean;
+  updateAttributes: (attrs: Partial<TCalloutBlockAttributes>) => void;
+};
+
+export function CalloutBlockLogoSelector(props: Props) {
+  const { blockAttributes, disabled, handleOpen, isOpen, updateAttributes } = props;
+
+  const logoValue: TLogoProps = {
+    in_use: blockAttributes["data-logo-in-use"],
+    icon: {
+      color: blockAttributes["data-icon-color"],
+      name: blockAttributes["data-icon-name"],
+    },
+    emoji: {
+      value: blockAttributes["data-emoji-unicode"]?.toString(),
+      url: blockAttributes["data-emoji-url"],
+    },
+  };
+
+  return (
+    <div contentEditable={false}>
+      <EmojiPicker
+        closeOnSelect={true}
+        isOpen={isOpen}
+        handleToggle={handleOpen}
+        className="grid flex-shrink-0 place-items-center"
+        buttonClassName={cn("grid size-8 flex-shrink-0 place-items-center rounded-lg text-primary", {
+          "hover:bg-layer-1-hover": !disabled,
+        })}
+        label={<Logo logo={logoValue} size={18} type="lucide" />}
+        onChange={(val) => {
+          // construct the new logo value based on the type of value
+          let newLogoValue: Partial<TCalloutBlockAttributes> = {};
+          let newLogoValueToStoreInLocalStorage: TLogoProps = {
+            in_use: "emoji",
+            emoji: {
+              value: DEFAULT_CALLOUT_BLOCK_ATTRIBUTES["data-emoji-unicode"],
+              url: DEFAULT_CALLOUT_BLOCK_ATTRIBUTES["data-emoji-url"],
+            },
+          };
+          if (val.type === "emoji") {
+            // val.value is now a string in decimal format (e.g. "128512")
+            const emojiValue = val.value;
+            newLogoValue = {
+              "data-emoji-unicode": emojiValue,
+              "data-emoji-url": undefined,
+            };
+            newLogoValueToStoreInLocalStorage = {
+              in_use: "emoji",
+              emoji: {
+                value: emojiValue,
+                url: undefined,
+              },
+            };
+          } else if (val.type === "icon") {
+            const iconValue = val.value as { name: string; color: string };
+            newLogoValue = {
+              "data-icon-name": iconValue.name,
+              "data-icon-color": iconValue.color,
+            };
+            newLogoValueToStoreInLocalStorage = {
+              in_use: "icon",
+              icon: {
+                name: iconValue.name,
+                color: iconValue.color,
+              },
+            };
+          }
+          // update node attributes
+          updateAttributes({
+            "data-logo-in-use": val.type,
+            ...newLogoValue,
+          });
+          // update stored logo in local storage
+          updateStoredLogo(newLogoValueToStoreInLocalStorage);
+          handleOpen(false);
+        }}
+        defaultIconColor={logoValue?.in_use && logoValue.in_use === "icon" ? logoValue?.icon?.color : undefined}
+        defaultOpen={logoValue.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON}
+        disabled={disabled}
+        searchDisabled
+      />
+    </div>
+  );
+}
diff --git a/packages/editor/src/extensions/callout/types.ts b/packages/editor/src/extensions/callout/types.ts
new file mode 100644
index 0000000..3ec0529
--- /dev/null
+++ b/packages/editor/src/extensions/callout/types.ts
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Node as ProseMirrorNode } from "@tiptap/core";
+
+export enum ECalloutAttributeNames {
+  ID = "id",
+  ICON_COLOR = "data-icon-color",
+  ICON_NAME = "data-icon-name",
+  EMOJI_UNICODE = "data-emoji-unicode",
+  EMOJI_URL = "data-emoji-url",
+  LOGO_IN_USE = "data-logo-in-use",
+  BACKGROUND = "data-background",
+  BLOCK_TYPE = "data-block-type",
+}
+
+export type TCalloutBlockIconAttributes = {
+  [ECalloutAttributeNames.ICON_COLOR]: string | undefined;
+  [ECalloutAttributeNames.ICON_NAME]: string | undefined;
+};
+
+export type TCalloutBlockEmojiAttributes = {
+  [ECalloutAttributeNames.EMOJI_UNICODE]: string | undefined;
+  [ECalloutAttributeNames.EMOJI_URL]: string | undefined;
+};
+
+export type TCalloutBlockAttributes = {
+  [ECalloutAttributeNames.ID]: string | null;
+  [ECalloutAttributeNames.LOGO_IN_USE]: "emoji" | "icon";
+  [ECalloutAttributeNames.BACKGROUND]: string | undefined;
+  [ECalloutAttributeNames.BLOCK_TYPE]: "callout-component";
+} & TCalloutBlockIconAttributes &
+  TCalloutBlockEmojiAttributes;
+
+export type CustomCalloutExtensionOptions = unknown;
+export type CustomCalloutExtensionStorage = unknown;
+
+export type CustomCalloutExtensionType = ProseMirrorNode<CustomCalloutExtensionOptions, CustomCalloutExtensionStorage>;
diff --git a/packages/editor/src/extensions/callout/utils.ts b/packages/editor/src/extensions/callout/utils.ts
new file mode 100644
index 0000000..dd83f62
--- /dev/null
+++ b/packages/editor/src/extensions/callout/utils.ts
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TLogoProps } from "@plane/types";
+import { sanitizeHTML } from "@plane/utils";
+// types
+import type { TCalloutBlockAttributes, TCalloutBlockEmojiAttributes, TCalloutBlockIconAttributes } from "./types";
+import { ECalloutAttributeNames } from "./types";
+
+export const DEFAULT_CALLOUT_BLOCK_ATTRIBUTES: TCalloutBlockAttributes = {
+  [ECalloutAttributeNames.ID]: null,
+  [ECalloutAttributeNames.LOGO_IN_USE]: "emoji",
+  [ECalloutAttributeNames.ICON_COLOR]: undefined,
+  [ECalloutAttributeNames.ICON_NAME]: undefined,
+  [ECalloutAttributeNames.EMOJI_UNICODE]: "128161",
+  [ECalloutAttributeNames.EMOJI_URL]: "https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f4a1.png",
+  [ECalloutAttributeNames.BACKGROUND]: undefined,
+  [ECalloutAttributeNames.BLOCK_TYPE]: "callout-component",
+};
+
+type TStoredLogoValue = Pick<TCalloutBlockAttributes, ECalloutAttributeNames.LOGO_IN_USE> &
+  (TCalloutBlockEmojiAttributes | TCalloutBlockIconAttributes);
+
+// function to get the stored logo from local storage
+export const getStoredLogo = (): TStoredLogoValue => {
+  const fallBackValues: TStoredLogoValue = {
+    [ECalloutAttributeNames.LOGO_IN_USE]: "emoji",
+    [ECalloutAttributeNames.EMOJI_UNICODE]: DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[ECalloutAttributeNames.EMOJI_UNICODE],
+    [ECalloutAttributeNames.EMOJI_URL]: DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[ECalloutAttributeNames.EMOJI_URL],
+  };
+
+  if (typeof window !== "undefined") {
+    const storedData = sanitizeHTML(localStorage.getItem("editor-calloutComponent-logo") ?? "");
+    if (storedData) {
+      let parsedData: TLogoProps;
+      try {
+        parsedData = JSON.parse(storedData) as TLogoProps;
+      } catch (error) {
+        console.error(`Error parsing stored callout logo, stored value- ${storedData}`, error);
+        localStorage.removeItem("editor-calloutComponent-logo");
+        return fallBackValues;
+      }
+      if (parsedData.in_use === "emoji" && parsedData.emoji?.value) {
+        return {
+          [ECalloutAttributeNames.LOGO_IN_USE]: "emoji",
+          [ECalloutAttributeNames.EMOJI_UNICODE]:
+            parsedData.emoji.value || DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[ECalloutAttributeNames.EMOJI_UNICODE],
+          [ECalloutAttributeNames.EMOJI_URL]:
+            parsedData.emoji.url || DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[ECalloutAttributeNames.EMOJI_URL],
+        };
+      }
+      if (parsedData.in_use === "icon" && parsedData.icon?.name) {
+        return {
+          [ECalloutAttributeNames.LOGO_IN_USE]: "icon",
+          [ECalloutAttributeNames.ICON_NAME]:
+            parsedData.icon.name || DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[ECalloutAttributeNames.ICON_NAME],
+          [ECalloutAttributeNames.ICON_COLOR]:
+            parsedData.icon.color || DEFAULT_CALLOUT_BLOCK_ATTRIBUTES[ECalloutAttributeNames.ICON_COLOR],
+        };
+      }
+    }
+  }
+  // fallback values
+  return fallBackValues;
+};
+// function to update the stored logo on local storage
+export const updateStoredLogo = (value: TLogoProps): void => {
+  if (typeof window === "undefined") return;
+  localStorage.setItem("editor-calloutComponent-logo", JSON.stringify(value));
+};
+// function to get the stored background color from local storage
+export const getStoredBackgroundColor = (): string | null => {
+  if (typeof window !== "undefined") {
+    return sanitizeHTML(localStorage.getItem("editor-calloutComponent-background") ?? "");
+  }
+  return null;
+};
+// function to update the stored background color on local storage
+export const updateStoredBackgroundColor = (value: string | null): void => {
+  if (typeof window === "undefined") return;
+  if (value === null) {
+    localStorage.removeItem("editor-calloutComponent-background");
+    return;
+  } else {
+    localStorage.setItem("editor-calloutComponent-background", value);
+  }
+};
diff --git a/packages/editor/src/extensions/code-inline/index.tsx b/packages/editor/src/extensions/code-inline/index.tsx
new file mode 100644
index 0000000..2344615
--- /dev/null
+++ b/packages/editor/src/extensions/code-inline/index.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Mark, markInputRule, markPasteRule, mergeAttributes } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+type InlineCodeOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    [CORE_EXTENSIONS.CODE_INLINE]: {
+      /**
+       * Set a code mark
+       */
+      setCode: () => ReturnType;
+      /**
+       * Toggle inline code
+       */
+      toggleCode: () => ReturnType;
+      /**
+       * Unset a code mark
+       */
+      unsetCode: () => ReturnType;
+    };
+  }
+}
+
+export const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/;
+const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/g;
+
+export const CustomCodeInlineExtension = Mark.create<InlineCodeOptions>({
+  name: CORE_EXTENSIONS.CODE_INLINE,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class:
+          "rounded-sm bg-layer-3 px-[6px] py-[1.5px] font-code font-medium text-(--extended-color-orange-600) border-[0.5px] border-subtle",
+        spellcheck: "false",
+      },
+    };
+  },
+
+  excludes: "_",
+
+  code: true,
+
+  exitable: true,
+
+  parseHTML() {
+    return [{ tag: "code" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["code", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setCode:
+        () =>
+        ({ commands }) =>
+          commands.setMark(this.name),
+      toggleCode:
+        () =>
+        ({ commands }) =>
+          commands.toggleMark(this.name),
+      unsetCode:
+        () =>
+        ({ commands }) =>
+          commands.unsetMark(this.name),
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-e": () => this.editor.commands.toggleCode(),
+    };
+  },
+
+  addInputRules() {
+    return [
+      markInputRule({
+        find: inputRegex,
+        type: this.type,
+      }),
+    ];
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: pasteRegex,
+        type: this.type,
+      }),
+    ];
+  },
+});
diff --git a/packages/editor/src/extensions/code/code-block-lowlight.ts b/packages/editor/src/extensions/code/code-block-lowlight.ts
new file mode 100644
index 0000000..6356d07
--- /dev/null
+++ b/packages/editor/src/extensions/code/code-block-lowlight.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// import CodeBlock, { CodeBlockOptions } from "@tiptap/extension-code-block";
+
+import type { CodeBlockOptions } from "./code-block";
+import { CodeBlock } from "./code-block";
+import { LowlightPlugin } from "./lowlight-plugin";
+
+type CodeBlockLowlightOptions = CodeBlockOptions & {
+  lowlight: any;
+  defaultLanguage: string | null | undefined;
+};
+
+export const CodeBlockLowlight = CodeBlock.extend<CodeBlockLowlightOptions>({
+  addOptions() {
+    return {
+      ...(this.parent?.() ?? {
+        languageClassPrefix: "language-",
+        exitOnTripleEnter: true,
+        exitOnArrowDown: true,
+        HTMLAttributes: {},
+      }),
+      lowlight: {},
+      defaultLanguage: null,
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      ...(this.parent?.() || []),
+      LowlightPlugin({
+        name: this.name,
+        lowlight: this.options.lowlight,
+        defaultLanguage: this.options.defaultLanguage,
+      }),
+    ];
+  },
+});
diff --git a/packages/editor/src/extensions/code/code-block-node-view.tsx b/packages/editor/src/extensions/code/code-block-node-view.tsx
new file mode 100644
index 0000000..4a1acf3
--- /dev/null
+++ b/packages/editor/src/extensions/code/code-block-node-view.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
+import ts from "highlight.js/lib/languages/typescript";
+import { common, createLowlight } from "lowlight";
+import { CopyOutline, TickOutline } from "@makeplane/propel/icons";
+import { useState } from "react";
+// ui
+import { Tooltip } from "@plane/propel/tooltip";
+// plane utils
+import { cn } from "@plane/utils";
+// types
+import type { TCodeBlockAttributes } from "./types";
+import { ECodeBlockAttributeNames } from "./types";
+
+// we just have ts support for now
+const lowlight = createLowlight(common);
+lowlight.register("ts", ts);
+
+type Props = {
+  node: ProseMirrorNode;
+};
+
+export function CodeBlockComponent({ node }: Props) {
+  const [copied, setCopied] = useState(false);
+  // derived values
+  const attrs = node.attrs as TCodeBlockAttributes;
+
+  const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    try {
+      await navigator.clipboard.writeText(node.textContent);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1000);
+    } catch {
+      setCopied(false);
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  return (
+    <NodeViewWrapper key={attrs[ECodeBlockAttributeNames.ID]} className="code-block group/code relative">
+      <Tooltip tooltipContent="Copy code">
+        <button
+          type="button"
+          className={cn(
+            "group/button absolute top-2 right-2 z-10 hidden size-8 items-center justify-center rounded-md border border-subtle bg-layer-1 backdrop-blur-sm transition duration-150 ease-in-out group-hover/code:flex",
+            {
+              "bg-success-subtle hover:bg-success-subtle-1 active:bg-success-subtle-1": copied,
+            }
+          )}
+          onClick={(e) => void copyToClipboard(e)}
+        >
+          {copied ? (
+            <TickOutline className="h-3 w-3 text-success-primary" />
+          ) : (
+            <CopyOutline className="h-3 w-3 text-tertiary group-hover/button:text-primary" />
+          )}
+        </button>
+      </Tooltip>
+
+      <pre className="my-2 rounded-lg bg-layer-3 p-4 text-primary">
+        <NodeViewContent as="code" className="whitespace-pre-wrap" />
+      </pre>
+    </NodeViewWrapper>
+  );
+}
diff --git a/packages/editor/src/extensions/code/code-block.ts b/packages/editor/src/extensions/code/code-block.ts
new file mode 100644
index 0000000..93c60f5
--- /dev/null
+++ b/packages/editor/src/extensions/code/code-block.ts
@@ -0,0 +1,353 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { mergeAttributes, Node, textblockTypeInputRule } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+export type CodeBlockOptions = {
+  /**
+   * Adds a prefix to language classes that are applied to code tags.
+   * Defaults to `'language-'`.
+   */
+  languageClassPrefix: string;
+  /**
+   * Define whether the node should be exited on triple enter.
+   * Defaults to `true`.
+   */
+  exitOnTripleEnter: boolean;
+  /**
+   * Define whether the node should be exited on arrow down if there is no node after it.
+   * Defaults to `true`.
+   */
+  exitOnArrowDown: boolean;
+  /**
+   * Custom HTML attributes that should be added to the rendered HTML tag.
+   */
+  HTMLAttributes: Record<string, unknown>;
+};
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    [CORE_EXTENSIONS.CODE_BLOCK]: {
+      /**
+       * Set a code block
+       */
+      setCodeBlock: (attributes?: { language: string }) => ReturnType;
+      /**
+       * Toggle a code block
+       */
+      toggleCodeBlock: (attributes?: { language: string }) => ReturnType;
+    };
+  }
+}
+
+export const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
+export const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
+
+export const CodeBlock = Node.create<CodeBlockOptions>({
+  name: CORE_EXTENSIONS.CODE_BLOCK,
+
+  addOptions() {
+    return {
+      languageClassPrefix: "language-",
+      exitOnTripleEnter: true,
+      exitOnArrowDown: true,
+      HTMLAttributes: {},
+    };
+  },
+  content: "text*",
+
+  marks: "",
+
+  group: "block",
+
+  code: true,
+
+  defining: true,
+
+  addAttributes() {
+    return {
+      language: {
+        default: null,
+        parseHTML: (element) => {
+          const { languageClassPrefix } = this.options;
+          const classNames = [...(element.firstElementChild?.classList || [])];
+          const languages = classNames
+            .filter((className) => className.startsWith(languageClassPrefix))
+            .map((className) => className.replace(languageClassPrefix, ""));
+          const language = languages[0];
+
+          if (!language) {
+            return null;
+          }
+
+          return language;
+        },
+        rendered: false,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "pre",
+        preserveWhitespace: "full",
+      },
+    ];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "pre",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      [
+        "code",
+        {
+          class: node.attrs.language ? this.options.languageClassPrefix + node.attrs.language : null,
+        },
+        0,
+      ],
+    ];
+  },
+
+  addCommands() {
+    return {
+      setCodeBlock:
+        (attributes) =>
+        ({ commands }) =>
+          commands.setNode(this.name, attributes),
+      toggleCodeBlock:
+        (attributes) =>
+        ({ commands }) =>
+          commands.toggleNode(this.name, CORE_EXTENSIONS.PARAGRAPH, attributes),
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-c": () => this.editor.commands.toggleCodeBlock(),
+
+      // remove codeBlock when at start of document or codeBlock is empty
+      Backspace: () => {
+        try {
+          const { empty, $anchor } = this.editor.state.selection;
+          const isAtStart = $anchor.pos === 1;
+
+          if (!empty || $anchor.parent.type.name !== this.name) {
+            return false;
+          }
+
+          if (isAtStart || !$anchor.parent.textContent.length) {
+            return this.editor.commands.clearNodes();
+          }
+
+          return false;
+        } catch (error) {
+          console.error("Error handling Backspace in code block:", error);
+          return false;
+        }
+      },
+
+      // exit node on triple enter
+      Enter: ({ editor }) => {
+        try {
+          if (!this.options.exitOnTripleEnter) {
+            return false;
+          }
+
+          const { state } = editor;
+          const { selection } = state;
+          const { $from, empty } = selection;
+
+          if (!empty || $from.parent.type !== this.type) {
+            return false;
+          }
+
+          const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+          const endsWithDoubleNewline = $from.parent.textContent.endsWith("\n\n");
+
+          if (!isAtEnd || !endsWithDoubleNewline) {
+            return false;
+          }
+
+          return editor
+            .chain()
+            .command(({ tr }) => {
+              tr.delete($from.pos - 2, $from.pos);
+
+              return true;
+            })
+            .exitCode()
+            .run();
+        } catch (error) {
+          console.error("Error handling Enter in code block:", error);
+          return false;
+        }
+      },
+
+      // exit node on arrow down
+      ArrowDown: ({ editor }) => {
+        try {
+          if (!this.options.exitOnArrowDown) {
+            return false;
+          }
+
+          const { state } = editor;
+          const { selection, doc } = state;
+          const { $from, empty } = selection;
+
+          if (!empty || $from.parent.type !== this.type) {
+            return false;
+          }
+
+          const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+
+          if (!isAtEnd) {
+            return false;
+          }
+
+          const after = $from.after();
+
+          if (after === undefined) {
+            return false;
+          }
+
+          const nodeAfter = doc.nodeAt(after);
+
+          if (nodeAfter) {
+            return false;
+          }
+
+          return editor.commands.exitCode();
+        } catch (error) {
+          console.error("Error handling ArrowDown in code block:", error);
+          return false;
+        }
+      },
+    };
+  },
+
+  addInputRules() {
+    return [
+      textblockTypeInputRule({
+        find: backtickInputRegex,
+        type: this.type,
+        getAttributes: (match) => ({
+          language: match[1],
+        }),
+      }),
+      textblockTypeInputRule({
+        find: tildeInputRegex,
+        type: this.type,
+        getAttributes: (match) => ({
+          language: match[1],
+        }),
+      }),
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("codeBlockVSCodeHandlerCustom"),
+        props: {
+          handlePaste: (view, event) => {
+            try {
+              if (!event.clipboardData) {
+                return false;
+              }
+
+              if (this.editor.isActive(this.type.name)) {
+                return false;
+              }
+
+              if (this.editor.isActive(CORE_EXTENSIONS.CODE_INLINE)) {
+                // Check if it's an inline code block
+                event.preventDefault();
+                const text = event.clipboardData.getData("text/plain");
+
+                if (!text) {
+                  console.error("Pasted text is empty.");
+                  return false;
+                }
+
+                const { tr } = view.state;
+                const { $from, $to } = tr.selection;
+
+                if ($from.pos > $to.pos) {
+                  console.error("Invalid selection range.");
+                  return false;
+                }
+
+                const docSize = tr.doc.content.size;
+                if ($from.pos < 0 || $to.pos > docSize) {
+                  console.error("Selection range is out of document bounds.");
+                  return false;
+                }
+
+                // Extend the current selection to replace it with the pasted text
+                // wrapped in an inline code mark
+                const codeMark = view.state.schema.marks.code.create();
+                tr.replaceWith($from.pos, $to.pos, view.state.schema.text(text, [codeMark]));
+                view.dispatch(tr);
+                return true;
+              }
+
+              event.preventDefault();
+              const text = event.clipboardData.getData("text/plain");
+              const vscode = event.clipboardData.getData("vscode-editor-data");
+              const vscodeData = vscode ? JSON.parse(vscode) : undefined;
+              const language = vscodeData?.mode;
+
+              if (vscodeData && language) {
+                const { tr } = view.state;
+                const { $from } = tr.selection;
+
+                // Check if the current line is empty
+                const isCurrentLineEmpty = !$from.parent.textContent.trim();
+
+                let insertPos;
+
+                if (isCurrentLineEmpty) {
+                  // If the current line is empty, use the current position
+                  insertPos = $from.pos - 1;
+                } else {
+                  // If the current line is not empty, insert below the current block node
+                  insertPos = $from.end($from.depth) + 1;
+                }
+
+                // Ensure insertPos is within document bounds
+                if (insertPos < 0 || insertPos > tr.doc.content.size) {
+                  console.error("Invalid insert position.");
+                  return false;
+                }
+
+                // Create a new code block node with the pasted content
+                const textNode = view.state.schema.text(text.replace(/\r\n?/g, "\n"));
+                const codeBlock = this.type.create({ language }, textNode);
+                if (insertPos <= tr.doc.content.size) {
+                  tr.insert(insertPos, codeBlock);
+                  view.dispatch(tr);
+                  return true;
+                }
+
+                return false;
+              } else {
+                // TODO: complicated paste logic, to be handled later
+                return false;
+              }
+            } catch (error) {
+              console.error("Error handling paste in CodeBlock extension:", error);
+              return false;
+            }
+          },
+        },
+      }),
+    ];
+  },
+});
diff --git a/packages/editor/src/extensions/code/index.tsx b/packages/editor/src/extensions/code/index.tsx
new file mode 100644
index 0000000..da489c8
--- /dev/null
+++ b/packages/editor/src/extensions/code/index.tsx
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Selection } from "@tiptap/pm/state";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import ts from "highlight.js/lib/languages/typescript";
+import { common, createLowlight } from "lowlight";
+// components
+import { CodeBlockLowlight } from "./code-block-lowlight";
+import { CodeBlockComponent } from "./code-block-node-view";
+
+const lowlight = createLowlight(common);
+lowlight.register("ts", ts);
+
+export const CustomCodeBlockExtension = CodeBlockLowlight.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeBlockComponent);
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Tab: ({ editor }) => {
+        try {
+          const { state } = editor;
+          const { selection } = state;
+          const { $from, empty } = selection;
+
+          if (!empty || $from.parent.type !== this.type) {
+            return false;
+          }
+
+          // Use ProseMirror's insertText transaction to insert the tab character
+          const tr = state.tr.insertText("\t", $from.pos, $from.pos);
+          editor.view.dispatch(tr);
+
+          return true;
+        } catch (error) {
+          console.error("Error handling Tab in CustomCodeBlockExtension:", error);
+          return false;
+        }
+      },
+      ArrowUp: ({ editor }) => {
+        try {
+          const { state } = editor;
+          const { selection } = state;
+          const { $from, empty } = selection;
+
+          if (!empty || $from.parent.type !== this.type) {
+            return false;
+          }
+
+          const isAtStart = $from.parentOffset === 0;
+
+          if (!isAtStart) {
+            return false;
+          }
+
+          // Check if codeBlock is the first node
+          const isFirstNode = $from.depth === 1 && $from.index($from.depth - 1) === 0;
+
+          if (isFirstNode) {
+            // Insert a new paragraph at the start of the document and move the cursor to it
+            return editor.commands.command(({ tr }) => {
+              const node = editor.schema.nodes.paragraph.create();
+              tr.insert(0, node);
+              tr.setSelection(Selection.near(tr.doc.resolve(1)));
+              return true;
+            });
+          }
+
+          return false;
+        } catch (error) {
+          console.error("Error handling ArrowUp in CustomCodeBlockExtension:", error);
+          return false;
+        }
+      },
+      ArrowDown: ({ editor }) => {
+        try {
+          if (!this.options.exitOnArrowDown) {
+            return false;
+          }
+
+          const { state } = editor;
+          const { selection, doc } = state;
+          const { $from, empty } = selection;
+
+          if (!empty || $from.parent.type !== this.type) {
+            return false;
+          }
+
+          const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+
+          if (!isAtEnd) {
+            return false;
+          }
+
+          const after = $from.after();
+
+          if (after === undefined) {
+            return false;
+          }
+
+          const nodeAfter = doc.nodeAt(after);
+
+          if (nodeAfter) {
+            return editor.commands.command(({ tr }) => {
+              tr.setSelection(Selection.near(doc.resolve(after)));
+              return true;
+            });
+          }
+
+          return editor.commands.exitCode();
+        } catch (error) {
+          console.error("Error handling ArrowDown in CustomCodeBlockExtension:", error);
+          return false;
+        }
+      },
+    };
+  },
+}).configure({
+  lowlight,
+  defaultLanguage: "plaintext",
+  exitOnTripleEnter: false,
+  HTMLAttributes: {
+    class: "",
+  },
+});
diff --git a/packages/editor/src/extensions/code/lowlight-plugin.ts b/packages/editor/src/extensions/code/lowlight-plugin.ts
new file mode 100644
index 0000000..6471f05
--- /dev/null
+++ b/packages/editor/src/extensions/code/lowlight-plugin.ts
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// TODO: check all the type errors and fix them
+
+import { findChildren } from "@tiptap/core";
+import type { Node as ProsemirrorNode } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import highlight from "highlight.js/lib/core";
+
+function parseNodes(nodes: any[], className: string[] = []): { text: string; classes: string[] }[] {
+  return nodes
+    .map((node) => {
+      const classes = [...className, ...(node.properties ? node.properties.className : [])];
+
+      if (node.children) {
+        return parseNodes(node.children, classes);
+      }
+
+      return {
+        text: node.value,
+        classes,
+      };
+    })
+    .flat();
+}
+
+function getHighlightNodes(result: any) {
+  // `.value` for lowlight v1, `.children` for lowlight v2
+  return result.value || result.children || [];
+}
+
+function registered(aliasOrLanguage: string) {
+  return Boolean(highlight.getLanguage(aliasOrLanguage));
+}
+
+function getDecorations({
+  doc,
+  name,
+  lowlight,
+  defaultLanguage,
+}: {
+  doc: ProsemirrorNode;
+  name: string;
+  lowlight: any;
+  defaultLanguage: string | null | undefined;
+}) {
+  const decorations: Decoration[] = [];
+
+  findChildren(doc, (node) => node.type.name === name).forEach((block) => {
+    let from = block.pos + 1;
+    const language = block.node.attrs.language || defaultLanguage;
+    const languages = lowlight.listLanguages();
+
+    const nodes =
+      language && (languages.includes(language) || registered(language))
+        ? getHighlightNodes(lowlight.highlight(language, block.node.textContent))
+        : getHighlightNodes(lowlight.highlightAuto(block.node.textContent));
+
+    parseNodes(nodes).forEach((node) => {
+      const to = from + node.text.length;
+
+      if (node.classes.length) {
+        const decoration = Decoration.inline(from, to, {
+          class: node.classes.join(" "),
+        });
+
+        decorations.push(decoration);
+      }
+
+      from = to;
+    });
+  });
+
+  return DecorationSet.create(doc, decorations);
+}
+
+function isFunction(param: () => any) {
+  return typeof param === "function";
+}
+
+export function LowlightPlugin({
+  name,
+  lowlight,
+  defaultLanguage,
+}: {
+  name: string;
+  lowlight: any;
+  defaultLanguage: string | null | undefined;
+}) {
+  if (!["highlight", "highlightAuto", "listLanguages"].every((api) => isFunction(lowlight[api]))) {
+    throw Error("You should provide an instance of lowlight to use the code-block-lowlight extension");
+  }
+
+  const lowlightPlugin: Plugin = new Plugin({
+    key: new PluginKey("lowlight"),
+
+    state: {
+      init: (_, { doc }) =>
+        getDecorations({
+          doc,
+          name,
+          lowlight,
+          defaultLanguage,
+        }),
+      apply: (transaction, decorationSet, oldState, newState) => {
+        const oldNodeName = oldState.selection.$head.parent.type.name;
+        const newNodeName = newState.selection.$head.parent.type.name;
+        const oldNodes = findChildren(oldState.doc, (node) => node.type.name === name);
+        const newNodes = findChildren(newState.doc, (node) => node.type.name === name);
+
+        if (
+          transaction.docChanged &&
+          // Apply decorations if:
+          // selection includes named node,
+          ([oldNodeName, newNodeName].includes(name) ||
+            // OR transaction adds/removes named node,
+            newNodes.length !== oldNodes.length ||
+            // OR transaction has changes that completely encapsulate a node
+            // (for example, a transaction that affects the entire document).
+            // Such transactions can happen during collab syncing via y-prosemirror, for example.
+            transaction.steps.some(
+              (step) =>
+                // @ts-expect-error type error
+                step.from !== undefined &&
+                // @ts-expect-error type error
+                step.to !== undefined &&
+                oldNodes.some(
+                  (node) =>
+                    // @ts-expect-error type error
+                    node.pos >= step.from &&
+                    // @ts-expect-error type error
+                    node.pos + node.node.nodeSize <= step.to
+                )
+            ))
+        ) {
+          return getDecorations({
+            doc: transaction.doc,
+            name,
+            lowlight,
+            defaultLanguage,
+          });
+        }
+
+        return decorationSet.map(transaction.mapping, transaction.doc);
+      },
+    },
+
+    props: {
+      decorations(state) {
+        return lowlightPlugin.getState(state);
+      },
+    },
+  });
+
+  return lowlightPlugin;
+}
diff --git a/packages/editor/src/extensions/code/types.ts b/packages/editor/src/extensions/code/types.ts
new file mode 100644
index 0000000..767cb2d
--- /dev/null
+++ b/packages/editor/src/extensions/code/types.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum ECodeBlockAttributeNames {
+  ID = "id",
+  LANGUAGE = "language",
+}
+
+export type TCodeBlockAttributes = {
+  [ECodeBlockAttributeNames.ID]: string | null;
+  [ECodeBlockAttributeNames.LANGUAGE]: string | null;
+};
diff --git a/packages/editor/src/extensions/code/utils/replace-code-block-with-text.ts b/packages/editor/src/extensions/code/utils/replace-code-block-with-text.ts
new file mode 100644
index 0000000..43e43b5
--- /dev/null
+++ b/packages/editor/src/extensions/code/utils/replace-code-block-with-text.ts
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { findParentNode } from "@tiptap/core";
+
+type ReplaceCodeBlockParams = {
+  editor: Editor;
+  from: number;
+  to: number;
+  textContent: string;
+  cursorPosInsideCodeblock: number;
+};
+
+export function replaceCodeWithText(editor: Editor): void {
+  try {
+    const { from, to } = editor.state.selection;
+    const cursorPosInsideCodeblock = from;
+    let replaced = false;
+
+    editor.state.doc.nodesBetween(from, to, (node, pos) => {
+      if (node.type === editor.state.schema.nodes.codeBlock) {
+        const startPos = pos;
+        const endPos = pos + node.nodeSize;
+        const textContent = node.textContent;
+
+        if (textContent.length === 0) {
+          editor.chain().focus().toggleCodeBlock().run();
+        } else {
+          transformCodeBlockToParagraphs({
+            editor,
+            from: startPos,
+            to: endPos,
+            textContent,
+            cursorPosInsideCodeblock,
+          });
+        }
+
+        replaced = true;
+        return false;
+      }
+    });
+
+    if (!replaced) {
+      console.log("No code block to replace.");
+    }
+  } catch (error) {
+    console.error("An error occurred while replacing code block content:", error);
+  }
+}
+
+function transformCodeBlockToParagraphs({
+  editor,
+  from,
+  to,
+  textContent,
+  cursorPosInsideCodeblock,
+}: ReplaceCodeBlockParams): void {
+  const { schema } = editor.state;
+  const { paragraph } = schema.nodes;
+  const docSize = editor.state.doc.content.size;
+
+  if (from < 0 || to > docSize || from > to) {
+    console.error("Invalid range for replacement: ", from, to, "in a document of size", docSize);
+    return;
+  }
+
+  // Split the textContent by new lines to handle each line as a separate paragraph for Windows (\r\n) and Unix (\n)
+  const lines = textContent.split(/\r?\n/);
+  const tr = editor.state.tr;
+  let insertPos = from;
+
+  // Remove the code block first
+  tr.delete(from, to);
+
+  // For each line, create a paragraph node and insert it
+  lines.forEach((line) => {
+    // if the line is empty, create a paragraph node with no content
+    const paragraphNode = line.length === 0 ? paragraph.create({}) : paragraph.create({}, schema.text(line));
+    tr.insert(insertPos, paragraphNode);
+    insertPos += paragraphNode.nodeSize;
+  });
+
+  // Now persist the focus to the converted paragraph
+  const parentNodeOffset = findParentNode((node) => node.type === schema.nodes.codeBlock)(editor.state.selection)?.pos;
+
+  if (parentNodeOffset === undefined) throw new Error("Invalid code block offset");
+
+  const lineNumber = getLineNumber(textContent, cursorPosInsideCodeblock, parentNodeOffset);
+  const cursorPosOutsideCodeblock = cursorPosInsideCodeblock + (lineNumber - 1);
+
+  editor.view.dispatch(tr);
+  editor.chain().focus(cursorPosOutsideCodeblock).run();
+}
+
+/**
+ * Calculates the line number where the cursor is located inside the code block.
+ * Assumes the indexing of the content inside the code block is like ProseMirror's indexing.
+ *
+ * @param {string} textContent - The content of the code block.
+ * @param {number} cursorPosition - The absolute cursor position in the document.
+ * @param {number} codeBlockNodePos - The starting position of the code block node in the document.
+ * @returns {number} The 1-based line number where the cursor is located.
+ */
+function getLineNumber(textContent: string, cursorPosition: number, codeBlockNodePos: number): number {
+  // Split the text content into lines, handling both Unix and Windows newlines
+  const lines = textContent.split(/\r?\n/);
+  const cursorPosInsideCodeblockRelative = cursorPosition - codeBlockNodePos;
+
+  let startPosition = 0;
+  let lineNumber = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    // Calculate the end position of the current line
+    const endPosition = startPosition + lines[i].length + 1; // +1 for the newline character
+
+    // Check if the cursor position is within the current line
+    if (cursorPosInsideCodeblockRelative >= startPosition && cursorPosInsideCodeblockRelative <= endPosition) {
+      lineNumber = i + 1; // Line numbers are 1-based
+      break;
+    }
+
+    // Update the start position for the next line
+    startPosition = endPosition;
+  }
+
+  return lineNumber;
+}
diff --git a/packages/editor/src/extensions/code/without-props.tsx b/packages/editor/src/extensions/code/without-props.tsx
new file mode 100644
index 0000000..50389d0
--- /dev/null
+++ b/packages/editor/src/extensions/code/without-props.tsx
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Selection } from "@tiptap/pm/state";
+import ts from "highlight.js/lib/languages/typescript";
+import { common, createLowlight } from "lowlight";
+// components
+import { CodeBlockLowlight } from "./code-block-lowlight";
+
+const lowlight = createLowlight(common);
+lowlight.register("ts", ts);
+
+export const CustomCodeBlockExtensionWithoutProps = CodeBlockLowlight.extend({
+  addKeyboardShortcuts() {
+    return {
+      Tab: ({ editor }) => {
+        try {
+          const { state } = editor;
+          const { selection } = state;
+          const { $from, empty } = selection;
+
+          if (!empty || $from.parent.type !== this.type) {
+            return false;
+          }
+
+          // Use ProseMirror's insertText transaction to insert the tab character
+          const tr = state.tr.insertText("\t", $from.pos, $from.pos);
+          editor.view.dispatch(tr);
+
+          return true;
+        } catch (error) {
+          console.error("Error handling Tab in CustomCodeBlockExtension:", error);
+          return false;
+        }
+      },
+      ArrowUp: ({ editor }) => {
+        try {
+          const { state } = editor;
+          const { selection } = state;
+          const { $from, empty } = selection;
+
+          if (!empty || $from.parent.type !== this.type) {
+            return false;
+          }
+
+          const isAtStart = $from.parentOffset === 0;
+
+          if (!isAtStart) {
+            return false;
+          }
+
+          // Check if codeBlock is the first node
+          const isFirstNode = $from.depth === 1 && $from.index($from.depth - 1) === 0;
+
+          if (isFirstNode) {
+            // Insert a new paragraph at the start of the document and move the cursor to it
+            return editor.commands.command(({ tr }) => {
+              const node = editor.schema.nodes.paragraph.create();
+              tr.insert(0, node);
+              tr.setSelection(Selection.near(tr.doc.resolve(1)));
+              return true;
+            });
+          }
+
+          return false;
+        } catch (error) {
+          console.error("Error handling ArrowUp in CustomCodeBlockExtension:", error);
+          return false;
+        }
+      },
+      ArrowDown: ({ editor }) => {
+        try {
+          if (!this.options.exitOnArrowDown) {
+            return false;
+          }
+
+          const { state } = editor;
+          const { selection, doc } = state;
+          const { $from, empty } = selection;
+
+          if (!empty || $from.parent.type !== this.type) {
+            return false;
+          }
+
+          const isAtEnd = $from.parentOffset === $from.parent.nodeSize - 2;
+
+          if (!isAtEnd) {
+            return false;
+          }
+
+          const after = $from.after();
+
+          if (after === undefined) {
+            return false;
+          }
+
+          const nodeAfter = doc.nodeAt(after);
+
+          if (nodeAfter) {
+            return editor.commands.command(({ tr }) => {
+              tr.setSelection(Selection.near(doc.resolve(after)));
+              return true;
+            });
+          }
+
+          return editor.commands.exitCode();
+        } catch (error) {
+          console.error("Error handling ArrowDown in CustomCodeBlockExtension:", error);
+          return false;
+        }
+      },
+    };
+  },
+}).configure({
+  lowlight,
+  defaultLanguage: "plaintext",
+  exitOnTripleEnter: false,
+});
diff --git a/packages/editor/src/extensions/core-without-props.ts b/packages/editor/src/extensions/core-without-props.ts
new file mode 100644
index 0000000..b610c96
--- /dev/null
+++ b/packages/editor/src/extensions/core-without-props.ts
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Underline } from "@tiptap/extension-underline";
+// plane editor imports
+import { CoreEditorAdditionalExtensionsWithoutProps } from "@/extensions/core/without-props";
+// extensions
+import { CustomCalloutExtensionConfig } from "./callout/extension-config";
+import { CustomCodeBlockExtensionWithoutProps } from "./code/without-props";
+import { CustomCodeInlineExtension } from "./code-inline";
+import { CustomColorExtension } from "./custom-color";
+import { CustomImageExtensionConfig } from "./custom-image/extension-config";
+import { CustomLinkExtension } from "./custom-link";
+import { EmojiExtension } from "./emoji/extension";
+import { CustomHorizontalRule } from "./horizontal-rule";
+import { ImageExtensionConfig } from "./image";
+import { CustomMentionExtensionConfig } from "./mentions/extension-config";
+import { CustomQuoteExtension } from "./quote";
+import { CustomStarterKitExtension } from "./starter-kit";
+import { TableHeader, TableCell, TableRow, Table } from "./table";
+import { CustomTextAlignExtension } from "./text-align";
+import { WorkItemEmbedExtensionConfig } from "./work-item-embed/extension-config";
+
+export const CoreEditorExtensionsWithoutProps = [
+  CustomStarterKitExtension({
+    enableHistory: true,
+  }),
+  EmojiExtension,
+  CustomQuoteExtension,
+  CustomHorizontalRule,
+  CustomLinkExtension,
+  ImageExtensionConfig,
+  CustomImageExtensionConfig,
+  Underline,
+  TextStyle,
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "not-prose pl-2 space-y-2",
+    },
+  }),
+  TaskItem.configure({
+    HTMLAttributes: {
+      class: "flex",
+    },
+    nested: true,
+  }),
+  CustomCodeInlineExtension,
+  CustomCodeBlockExtensionWithoutProps,
+  Table,
+  TableHeader,
+  TableCell,
+  TableRow,
+  CustomMentionExtensionConfig,
+  CustomTextAlignExtension,
+  CustomCalloutExtensionConfig,
+  CustomColorExtension,
+  ...CoreEditorAdditionalExtensionsWithoutProps,
+];
+
+export const DocumentEditorExtensionsWithoutProps = [WorkItemEmbedExtensionConfig];
diff --git a/packages/editor/src/extensions/core/extensions.ts b/packages/editor/src/extensions/core/extensions.ts
new file mode 100644
index 0000000..cf3bddc
--- /dev/null
+++ b/packages/editor/src/extensions/core/extensions.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Extensions } from "@tiptap/core";
+// types
+import type { IEditorProps } from "@/types";
+
+export type TCoreAdditionalExtensionsProps = Pick<
+  IEditorProps,
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "extendedEditorProps"
+>;
+
+export const CoreEditorAdditionalExtensions = (props: TCoreAdditionalExtensionsProps): Extensions => {
+  const {} = props;
+  return [];
+};
diff --git a/packages/editor/src/extensions/core/index.ts b/packages/editor/src/extensions/core/index.ts
new file mode 100644
index 0000000..5c8c992
--- /dev/null
+++ b/packages/editor/src/extensions/core/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./extensions";
diff --git a/packages/editor/src/extensions/core/without-props.ts b/packages/editor/src/extensions/core/without-props.ts
new file mode 100644
index 0000000..e571502
--- /dev/null
+++ b/packages/editor/src/extensions/core/without-props.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Extensions } from "@tiptap/core";
+
+export const CoreEditorAdditionalExtensionsWithoutProps: Extensions = [];
diff --git a/packages/editor/src/extensions/custom-color.ts b/packages/editor/src/extensions/custom-color.ts
new file mode 100644
index 0000000..a7f23e6
--- /dev/null
+++ b/packages/editor/src/extensions/custom-color.ts
@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Mark, mergeAttributes } from "@tiptap/core";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    [CORE_EXTENSIONS.CUSTOM_COLOR]: {
+      /**
+       * Set the text color
+       * @param {string} color The color to set
+       * @example editor.commands.setTextColor('red')
+       */
+      setTextColor: (color: string) => ReturnType;
+
+      /**
+       * Unset the text color
+       * @example editor.commands.unsetTextColor()
+       */
+      unsetTextColor: () => ReturnType;
+      /**
+       * Set the background color
+       * @param {string} backgroundColor The color to set
+       * @example editor.commands.setBackgroundColor('red')
+       */
+      setBackgroundColor: (backgroundColor: string) => ReturnType;
+
+      /**
+       * Unset the background color
+       * @example editor.commands.unsetBackgroundColorColor()
+       */
+      unsetBackgroundColor: () => ReturnType;
+    };
+  }
+}
+
+export const CustomColorExtension = Mark.create({
+  name: CORE_EXTENSIONS.CUSTOM_COLOR,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.getAttribute("data-text-color"),
+        renderHTML: (attributes: { color: string }) => {
+          const { color } = attributes;
+          if (!color) {
+            return {};
+          }
+
+          let elementAttributes: Record<string, string> = {
+            "data-text-color": color,
+          };
+
+          if (!COLORS_LIST.find((c) => c.key === color)) {
+            elementAttributes = {
+              ...elementAttributes,
+              style: `color: ${color}`,
+            };
+          }
+
+          return elementAttributes;
+        },
+      },
+      backgroundColor: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.getAttribute("data-background-color"),
+        renderHTML: (attributes: { backgroundColor: string }) => {
+          const { backgroundColor } = attributes;
+          if (!backgroundColor) {
+            return {};
+          }
+
+          let elementAttributes: Record<string, string> = {
+            "data-background-color": backgroundColor,
+          };
+
+          if (!COLORS_LIST.find((c) => c.key === backgroundColor)) {
+            elementAttributes = {
+              ...elementAttributes,
+              style: `background-color: ${backgroundColor}`,
+            };
+          }
+
+          return elementAttributes;
+        },
+      },
+    };
+  },
+
+  addStorage() {
+    return {
+      markdown: {
+        serialize: {
+          open: "",
+          close: "",
+          mixable: true,
+          expelEnclosingWhitespace: true,
+        },
+      },
+    };
+  },
+
+  // @ts-expect-error types are incorrect
+  // TODO: check this and update types
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        getAttrs: (node) => node.getAttribute("data-text-color") && null,
+      },
+      {
+        tag: "span",
+        getAttrs: (node) => node.getAttribute("data-background-color") && null,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["span", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setTextColor:
+        (color: string) =>
+        ({ chain }) =>
+          chain().setMark(this.name, { color }).run(),
+      unsetTextColor:
+        () =>
+        ({ chain }) =>
+          chain().setMark(this.name, { color: null }).run(),
+      setBackgroundColor:
+        (backgroundColor: string) =>
+        ({ chain }) =>
+          chain().setMark(this.name, { backgroundColor }).run(),
+      unsetBackgroundColor:
+        () =>
+        ({ chain }) =>
+          chain().setMark(this.name, { backgroundColor: null }).run(),
+    };
+  },
+});
diff --git a/packages/editor/src/extensions/custom-image/components/block.tsx b/packages/editor/src/extensions/custom-image/components/block.tsx
new file mode 100644
index 0000000..acb3e26
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/block.tsx
@@ -0,0 +1,355 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { NodeSelection } from "@tiptap/pm/state";
+import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+// local imports
+import { ECustomImageAttributeNames } from "../types";
+import type { Pixel, TCustomImageAttributes, TCustomImageSize } from "../types";
+import { ensurePixelString, getImageBlockId, isImageDuplicating } from "../utils";
+import type { CustomImageNodeViewProps } from "./node-view";
+import { ImageToolbarRoot } from "./toolbar";
+import { ImageUploadStatus } from "./upload-status";
+
+const MIN_SIZE = 100;
+
+type CustomImageBlockProps = CustomImageNodeViewProps & {
+  editorContainer: HTMLDivElement | null;
+  imageFromFileSystem: string | undefined;
+  setEditorContainer: (editorContainer: HTMLDivElement | null) => void;
+  setFailedToLoadImage: (isError: boolean) => void;
+  src: string | undefined;
+  downloadSrc: string | undefined;
+};
+
+export function CustomImageBlock(props: CustomImageBlockProps) {
+  // props
+  const {
+    editor,
+    editorContainer,
+    extension,
+    getPos,
+    imageFromFileSystem,
+    node,
+    selected,
+    setEditorContainer,
+    setFailedToLoadImage,
+    src: resolvedImageSrc,
+    downloadSrc: resolvedDownloadSrc,
+    updateAttributes,
+  } = props;
+  const {
+    width: nodeWidth,
+    height: nodeHeight,
+    aspectRatio: nodeAspectRatio,
+    src: imgNodeSrc,
+    alignment: nodeAlignment,
+    status,
+  } = node.attrs;
+  // states
+  const [size, setSize] = useState<TCustomImageSize>({
+    width: ensurePixelString(nodeWidth, "35%") ?? "35%",
+    height: ensurePixelString(nodeHeight, "auto") ?? "auto",
+    aspectRatio: nodeAspectRatio || null,
+  });
+  const [isResizing, setIsResizing] = useState(false);
+  const [initialResizeComplete, setInitialResizeComplete] = useState(false);
+  // refs
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRect = useRef<DOMRect | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const [hasErroredOnFirstLoad, setHasErroredOnFirstLoad] = useState(false);
+  const [hasTriedRestoringImageOnce, setHasTriedRestoringImageOnce] = useState(false);
+  // extension options
+  const isTouchDevice = !!(editor.storage.utility as { isTouchDevice?: boolean } | undefined)?.isTouchDevice;
+
+  const updateAttributesSafely = useCallback(
+    (attributes: Partial<TCustomImageAttributes>, errorMessage: string) => {
+      try {
+        updateAttributes(attributes);
+      } catch (error) {
+        console.error(`${errorMessage}:`, error);
+      }
+    },
+    [updateAttributes]
+  );
+
+  const handleImageLoad = useCallback(() => {
+    const img = imageRef.current;
+    if (!img) return;
+    let closestEditorContainer: HTMLDivElement | null = null;
+
+    if (editorContainer) {
+      closestEditorContainer = editorContainer;
+    } else {
+      closestEditorContainer = img.closest(".editor-container");
+      if (!closestEditorContainer) {
+        console.error("Editor container not found");
+        return;
+      }
+    }
+    if (!closestEditorContainer) {
+      console.error("Editor container not found");
+      return;
+    }
+
+    setEditorContainer(closestEditorContainer);
+    const aspectRatioCalculated = img.naturalWidth / img.naturalHeight;
+
+    if (nodeWidth === "35%") {
+      const editorWidth = closestEditorContainer.clientWidth;
+      const initialWidth = Math.max(editorWidth * 0.35, MIN_SIZE);
+      const initialHeight = initialWidth / aspectRatioCalculated;
+
+      const initialComputedSize: TCustomImageSize = {
+        width: `${Math.round(initialWidth)}px` satisfies Pixel,
+        height: `${Math.round(initialHeight)}px` satisfies Pixel,
+        aspectRatio: aspectRatioCalculated,
+      };
+      setSize(initialComputedSize);
+      updateAttributesSafely(
+        initialComputedSize,
+        "Failed to update attributes while initializing an image for the first time:"
+      );
+    } else {
+      // as the aspect ratio in not stored for old images, we need to update the attrs
+      // or if aspectRatioCalculated from the image's width and height doesn't match stored aspectRatio then also we'll update the attrs
+      if (!nodeAspectRatio || nodeAspectRatio !== aspectRatioCalculated) {
+        setSize((prevSize) => {
+          const newSize = { ...prevSize, aspectRatio: aspectRatioCalculated };
+          updateAttributesSafely(
+            newSize,
+            "Failed to update attributes while initializing images with width but no aspect ratio:"
+          );
+          return newSize;
+        });
+      }
+    }
+    setInitialResizeComplete(true);
+  }, [nodeWidth, updateAttributesSafely, editorContainer, nodeAspectRatio, setEditorContainer]);
+
+  // for real time resizing
+  useLayoutEffect(() => {
+    setSize((prevSize) => ({
+      ...prevSize,
+      width: ensurePixelString(nodeWidth) ?? "35%",
+      height: ensurePixelString(nodeHeight) ?? "auto",
+      aspectRatio: nodeAspectRatio,
+    }));
+  }, [nodeWidth, nodeHeight, nodeAspectRatio]);
+
+  const handleResize = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (!containerRef.current || !containerRect.current || !size.aspectRatio) return;
+
+      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+
+      if (nodeAlignment === "right") {
+        const newWidth = Math.max(containerRect.current.right - clientX, MIN_SIZE);
+        const newHeight = newWidth / size.aspectRatio;
+        setSize((prevSize) => ({ ...prevSize, width: `${newWidth}px`, height: `${newHeight}px` }));
+      } else {
+        const newWidth = Math.max(clientX - containerRect.current.left, MIN_SIZE);
+        const newHeight = newWidth / size.aspectRatio;
+        setSize((prevSize) => ({ ...prevSize, width: `${newWidth}px`, height: `${newHeight}px` }));
+      }
+    },
+    [nodeAlignment, size.aspectRatio]
+  );
+
+  const handleResizeEnd = useCallback(() => {
+    setIsResizing(false);
+    updateAttributesSafely(size, "Failed to update attributes at the end of resizing:");
+  }, [size, updateAttributesSafely]);
+
+  const handleResizeStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+
+    if (containerRef.current) {
+      containerRect.current = containerRef.current.getBoundingClientRect();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener("mousemove", handleResize);
+      window.addEventListener("mouseup", handleResizeEnd);
+      window.addEventListener("mouseleave", handleResizeEnd);
+      window.addEventListener("touchmove", handleResize);
+      window.addEventListener("touchend", handleResizeEnd);
+
+      return () => {
+        window.removeEventListener("mousemove", handleResize);
+        window.removeEventListener("mouseup", handleResizeEnd);
+        window.removeEventListener("mouseleave", handleResizeEnd);
+        window.removeEventListener("touchmove", handleResize);
+        window.removeEventListener("touchend", handleResizeEnd);
+      };
+    }
+  }, [isResizing, handleResize, handleResizeEnd]);
+
+  const handleImageMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (isTouchDevice) {
+        e.preventDefault();
+        editor.commands.blur();
+      }
+      const pos = getPos();
+      if (pos === undefined) return;
+      const nodeSelection = NodeSelection.create(editor.state.doc, pos);
+      editor.view.dispatch(editor.state.tr.setSelection(nodeSelection));
+    },
+    [editor, getPos, isTouchDevice]
+  );
+
+  const isDuplicating = isImageDuplicating(status);
+  // show the image loader if the remote image's src or preview image from filesystem is not set yet (while loading the image post upload) (or)
+  // if the initial resize (from 35% width and "auto" height attrs to the actual size in px) is not complete
+  const showImageLoader =
+    (!resolvedImageSrc && !isDuplicating) || !initialResizeComplete || hasErroredOnFirstLoad || isDuplicating; // show the image upload status only when the resolvedImageSrc is not ready
+  const showUploadStatus = !resolvedImageSrc && !isDuplicating;
+  // show the image utils only if the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
+  const showImageToolbar = resolvedImageSrc && resolvedDownloadSrc && initialResizeComplete && !isDuplicating;
+  // show the image resizer only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
+  const showImageResizer = editor.isEditable && resolvedImageSrc && initialResizeComplete && !isDuplicating;
+  // show the preview image from the file system if the remote image's src is not set
+  const displayedImageSrc = resolvedImageSrc || imageFromFileSystem;
+
+  return (
+    <div
+      id={
+        node.attrs[ECustomImageAttributeNames.ID]
+          ? getImageBlockId(node.attrs[ECustomImageAttributeNames.ID])
+          : undefined
+      }
+      className={cn("w-fit max-w-full transition-all", {
+        "ml-[50%] -translate-x-1/2": nodeAlignment === "center",
+        "ml-[100%] -translate-x-full": nodeAlignment === "right",
+      })}
+    >
+      <div
+        ref={containerRef}
+        className="group/image-component relative inline-block max-w-full"
+        onMouseDown={handleImageMouseDown}
+        style={{
+          width: size.width,
+          ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
+        }}
+      >
+        {showImageLoader && (
+          <div className="animate-pulse rounded-md bg-layer-1" style={{ width: size.width, height: size.height }} />
+        )}
+        <img
+          ref={imageRef}
+          src={displayedImageSrc}
+          alt=""
+          onLoad={handleImageLoad}
+          onError={(_e) =>
+            void (async () => {
+              // for old image extension this command doesn't exist or if the image failed to load for the first time
+              if (!extension.options.restoreImage || hasTriedRestoringImageOnce) {
+                setFailedToLoadImage(true);
+                return;
+              }
+
+              try {
+                setHasErroredOnFirstLoad(true);
+                // this is a type error from tiptap, don't remove await until it's fixed
+                if (!imgNodeSrc) {
+                  throw new Error("No source image to restore from");
+                }
+                await extension.options.restoreImage?.(imgNodeSrc);
+                if (!imageRef.current) {
+                  throw new Error("Image reference not found");
+                }
+                if (!resolvedImageSrc) {
+                  throw new Error("No resolved image source available");
+                }
+                if (isTouchDevice) {
+                  const refreshedSrc = await extension.options.getImageSource?.(imgNodeSrc);
+                  imageRef.current.src = refreshedSrc;
+                } else {
+                  imageRef.current.src = resolvedImageSrc;
+                }
+              } catch (error) {
+                // if the image failed to even restore, then show the error state
+                setFailedToLoadImage(true);
+                console.error("Error while loading image", error);
+              } finally {
+                setHasErroredOnFirstLoad(false);
+                setHasTriedRestoringImageOnce(true);
+              }
+            })()
+          }
+          width={size.width}
+          className={cn("image-component block rounded-md", {
+            // hide the image while the background calculations of the image loader are in progress (to avoid flickering) and show the loader until then
+            hidden: showImageLoader,
+            "read-only-image": !editor.isEditable,
+            "loading-image opacity-80 blur-sm": !resolvedImageSrc,
+          })}
+          style={{
+            width: size.width,
+            ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
+          }}
+        />
+        {showUploadStatus && node.attrs[ECustomImageAttributeNames.ID] && (
+          <ImageUploadStatus editor={editor} nodeId={node.attrs[ECustomImageAttributeNames.ID]} />
+        )}
+        {showImageToolbar && (
+          <ImageToolbarRoot
+            alignment={nodeAlignment ?? "left"}
+            editor={editor}
+            aspectRatio={size.aspectRatio === null ? 1 : size.aspectRatio}
+            downloadSrc={resolvedDownloadSrc}
+            handleAlignmentChange={(alignment) =>
+              updateAttributesSafely({ alignment }, "Failed to update attributes while changing alignment:")
+            }
+            height={size.height}
+            isTouchDevice={isTouchDevice}
+            width={size.width}
+            src={resolvedImageSrc}
+          />
+        )}
+        {selected && displayedImageSrc === resolvedImageSrc && (
+          <div className="pointer-events-none absolute inset-0 size-full bg-accent-primary/30" />
+        )}
+        {showImageResizer && (
+          <>
+            <div
+              className={cn(
+                "pointer-events-none absolute inset-0 rounded-md border-2 border-accent-strong transition-opacity duration-100 ease-in-out",
+                {
+                  "opacity-100": isResizing,
+                  "opacity-0 group-hover/image-component:opacity-100": !isResizing,
+                }
+              )}
+            />
+            <div
+              className={cn(
+                "absolute bottom-0 size-4 translate-y-1/2 rounded-full border-2 border-white bg-accent-primary transition-opacity duration-100 ease-in-out",
+                {
+                  "pointer-events-auto opacity-100": isResizing,
+                  "pointer-events-none opacity-0 group-hover/image-component:pointer-events-auto group-hover/image-component:opacity-100":
+                    !isResizing,
+                  "left-0 -translate-x-1/2 cursor-nesw-resize": nodeAlignment === "right",
+                  "right-0 translate-x-1/2 cursor-nwse-resize": nodeAlignment !== "right",
+                }
+              )}
+              onMouseDown={handleResizeStart}
+              onTouchStart={handleResizeStart}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/editor/src/extensions/custom-image/components/node-view.tsx b/packages/editor/src/extensions/custom-image/components/node-view.tsx
new file mode 100644
index 0000000..6e4104f
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/node-view.tsx
@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { NodeViewWrapper } from "@tiptap/react";
+import type { NodeViewProps } from "@tiptap/react";
+import { useEffect, useRef, useState } from "react";
+// local imports
+import type { CustomImageExtensionType, TCustomImageAttributes } from "../types";
+import { ECustomImageAttributeNames, ECustomImageStatus } from "../types";
+import { hasImageDuplicationFailed } from "../utils";
+import { CustomImageBlock } from "./block";
+import { CustomImageUploader } from "./uploader";
+
+export type CustomImageNodeViewProps = Omit<NodeViewProps, "extension" | "updateAttributes"> & {
+  extension: CustomImageExtensionType;
+  node: NodeViewProps["node"] & {
+    attrs: TCustomImageAttributes;
+  };
+  updateAttributes: (attrs: Partial<TCustomImageAttributes>) => void;
+};
+
+export function CustomImageNodeView(props: CustomImageNodeViewProps) {
+  const { editor, extension, node, updateAttributes } = props;
+  const { src: imgNodeSrc, status } = node.attrs;
+
+  const [isUploaded, setIsUploaded] = useState(!!imgNodeSrc);
+  const [resolvedSrc, setResolvedSrc] = useState<string | undefined>(undefined);
+  const [resolvedDownloadSrc, setResolvedDownloadSrc] = useState<string | undefined>(undefined);
+  const [imageFromFileSystem, setImageFromFileSystem] = useState<string | undefined>(undefined);
+  const [failedToLoadImage, setFailedToLoadImage] = useState(false);
+
+  const [editorContainer, setEditorContainer] = useState<HTMLDivElement | null>(null);
+  const imageComponentRef = useRef<HTMLDivElement>(null);
+  const hasRetriedOnMount = useRef(false);
+  const isDuplicatingRef = useRef(false);
+
+  useEffect(() => {
+    const closestEditorContainer = imageComponentRef.current?.closest(".editor-container");
+    if (closestEditorContainer) {
+      setEditorContainer(closestEditorContainer as HTMLDivElement);
+    }
+  }, []);
+
+  // the image is already uploaded if the image-component node has src attribute
+  // and we need to remove the blob from our file system
+  useEffect(() => {
+    if (resolvedSrc || imgNodeSrc) {
+      setIsUploaded(true);
+      setImageFromFileSystem(undefined);
+    } else {
+      setIsUploaded(false);
+    }
+  }, [resolvedSrc, imgNodeSrc]);
+
+  useEffect(() => {
+    if (!imgNodeSrc) {
+      setResolvedSrc(undefined);
+      setResolvedDownloadSrc(undefined);
+      return;
+    }
+
+    setResolvedSrc(undefined);
+    setResolvedDownloadSrc(undefined);
+    setFailedToLoadImage(false);
+
+    const getImageSource = async () => {
+      try {
+        const url = await extension.options.getImageSource?.(imgNodeSrc);
+        setResolvedSrc(url);
+        const downloadUrl = await extension.options.getImageDownloadSource?.(imgNodeSrc);
+        setResolvedDownloadSrc(downloadUrl);
+      } catch (error) {
+        console.error("Error fetching image source:", error);
+        setFailedToLoadImage(true);
+      }
+    };
+    void getImageSource();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imgNodeSrc, extension.options.getImageSource, extension.options.getImageDownloadSource]);
+
+  useEffect(() => {
+    const handleDuplication = async () => {
+      if (status !== ECustomImageStatus.DUPLICATING || !extension.options.duplicateImage || !imgNodeSrc) {
+        return;
+      }
+
+      // Prevent duplicate calls - check if already duplicating this asset
+      if (isDuplicatingRef.current) {
+        return;
+      }
+
+      isDuplicatingRef.current = true;
+      try {
+        hasRetriedOnMount.current = true;
+
+        const newAssetId = await extension.options.duplicateImage(imgNodeSrc);
+
+        if (!newAssetId) {
+          throw new Error("Duplication returned invalid asset ID");
+        }
+
+        setFailedToLoadImage(false);
+        updateAttributes({ src: newAssetId, status: ECustomImageStatus.UPLOADED });
+      } catch (error: unknown) {
+        console.error("Failed to duplicate image:", error);
+        // Update status to failed
+        updateAttributes({ status: ECustomImageStatus.DUPLICATION_FAILED });
+      } finally {
+        isDuplicatingRef.current = false;
+      }
+    };
+
+    void handleDuplication();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, imgNodeSrc, extension.options.duplicateImage, updateAttributes]);
+
+  useEffect(() => {
+    if (hasImageDuplicationFailed(status) && !hasRetriedOnMount.current && imgNodeSrc) {
+      hasRetriedOnMount.current = true;
+      // Add a small delay before retrying to avoid immediate retries
+      updateAttributes({ status: ECustomImageStatus.DUPLICATING });
+    }
+  }, [status, imgNodeSrc, updateAttributes]);
+
+  useEffect(() => {
+    if (status === ECustomImageStatus.UPLOADED) {
+      hasRetriedOnMount.current = false;
+      setFailedToLoadImage(false);
+    }
+  }, [status]);
+
+  const hasDuplicationFailed = hasImageDuplicationFailed(status);
+  const hasValidImageSource = imageFromFileSystem || (isUploaded && resolvedSrc);
+  const shouldShowBlock = hasValidImageSource && !failedToLoadImage && !hasDuplicationFailed;
+
+  return (
+    <NodeViewWrapper key={node.attrs[ECustomImageAttributeNames.ID]}>
+      <div className="mx-0 my-2 p-0" data-drag-handle ref={imageComponentRef}>
+        {shouldShowBlock && !hasDuplicationFailed ? (
+          <CustomImageBlock
+            editorContainer={editorContainer}
+            imageFromFileSystem={imageFromFileSystem}
+            setEditorContainer={setEditorContainer}
+            setFailedToLoadImage={setFailedToLoadImage}
+            src={resolvedSrc}
+            downloadSrc={resolvedDownloadSrc}
+            {...props}
+          />
+        ) : (
+          <CustomImageUploader
+            failedToLoadImage={failedToLoadImage}
+            hasDuplicationFailed={hasDuplicationFailed}
+            loadImageFromFileSystem={setImageFromFileSystem}
+            maxFileSize={(editor.storage.imageComponent as { maxFileSize?: number } | undefined)?.maxFileSize ?? 0}
+            setIsUploaded={setIsUploaded}
+            {...props}
+          />
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+}
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx
new file mode 100644
index 0000000..2b8602b
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+// local imports
+import type { TCustomImageAlignment } from "../../types";
+import { IMAGE_ALIGNMENT_OPTIONS } from "../../utils";
+
+type Props = {
+  activeAlignment: TCustomImageAlignment;
+  handleChange: (alignment: TCustomImageAlignment) => void;
+  isTouchDevice: boolean;
+  toggleToolbarViewStatus: (val: boolean) => void;
+};
+
+export function ImageAlignmentAction(props: Props) {
+  const { activeAlignment, handleChange, isTouchDevice, toggleToolbarViewStatus } = props;
+  // states
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  // derived values
+  const activeAlignmentDetails = IMAGE_ALIGNMENT_OPTIONS.find((option) => option.value === activeAlignment);
+
+  useOutsideClickDetector(dropdownRef, () => setIsDropdownOpen(false));
+
+  useEffect(() => {
+    toggleToolbarViewStatus(isDropdownOpen);
+  }, [isDropdownOpen, toggleToolbarViewStatus]);
+
+  return (
+    <div ref={dropdownRef} className="relative h-full">
+      <Tooltip disabled={isTouchDevice} tooltipContent="Align">
+        <button
+          type="button"
+          className="flex h-full items-center gap-1 text-white/60 transition-colors hover:text-white"
+          onClick={() => setIsDropdownOpen((prev) => !prev)}
+        >
+          {activeAlignmentDetails && <activeAlignmentDetails.icon className="size-3 flex-shrink-0" />}
+          <ChevronDownOutline className="size-2 flex-shrink-0" />
+        </button>
+      </Tooltip>
+      {isDropdownOpen && (
+        <div className="absolute top-full left-1/2 mt-0.5 flex h-7 -translate-x-1/2 items-center gap-2 rounded-sm bg-black/80 px-2">
+          {IMAGE_ALIGNMENT_OPTIONS.map((option) => (
+            <Tooltip disabled={isTouchDevice} key={option.value} tooltipContent={option.label}>
+              <button
+                type="button"
+                className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
+                onClick={() => {
+                  handleChange(option.value);
+                  setIsDropdownOpen(false);
+                }}
+              >
+                <option.icon className="size-3" />
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx
new file mode 100644
index 0000000..9230989
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { DownloadOutline } from "@makeplane/propel/icons";
+// plane imports
+import { Tooltip } from "@plane/propel/tooltip";
+
+type Props = {
+  src: string;
+};
+
+export function ImageDownloadAction(props: Props) {
+  const { src } = props;
+
+  return (
+    <Tooltip tooltipContent="Download">
+      <button
+        type="button"
+        onClick={() => window.open(src, "_blank")}
+        className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
+        aria-label="Download image"
+      >
+        <DownloadOutline className="size-3" />
+      </button>
+    </Tooltip>
+  );
+}
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/index.ts b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/modal.tsx
new file mode 100644
index 0000000..b1da541
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -0,0 +1,311 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { AddOutline, CloseOutline, DownloadOutline, MinusOutline, NewTabOutline } from "@makeplane/propel/icons";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+// plane imports
+import { cn } from "@plane/utils";
+
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 2;
+const ZOOM_SPEED = 0.05;
+const ZOOM_STEPS = [0.5, 1, 1.5, 2];
+
+type Props = {
+  aspectRatio: number;
+  downloadSrc: string;
+  isFullScreenEnabled: boolean;
+  isTouchDevice: boolean;
+  src: string;
+  toggleFullScreenMode: (val: boolean) => void;
+  width: string;
+};
+
+function ImageFullScreenModalWithoutPortal(props: Props) {
+  const { aspectRatio, isFullScreenEnabled, isTouchDevice, downloadSrc, src, toggleFullScreenMode, width } = props;
+  // refs
+  const dragStart = useRef({ x: 0, y: 0 });
+  const dragOffset = useRef({ x: 0, y: 0 });
+
+  const [magnification, setMagnification] = useState<number>(1);
+  const [initialMagnification, setInitialMagnification] = useState(1);
+  const [isDragging, setIsDragging] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const imgRef = useRef<HTMLImageElement | null>(null);
+
+  const widthInNumber = useMemo(() => {
+    if (!width) return 0;
+    return Number(width.replace("px", ""));
+  }, [width]);
+
+  const setImageRef = useCallback(
+    (node: HTMLImageElement | null) => {
+      if (!node || !isFullScreenEnabled) return;
+
+      imgRef.current = node;
+
+      const viewportWidth = window.innerWidth * 0.9;
+      const viewportHeight = window.innerHeight * 0.75;
+      const imageWidth = widthInNumber;
+      const imageHeight = imageWidth / aspectRatio;
+
+      const widthRatio = viewportWidth / imageWidth;
+      const heightRatio = viewportHeight / imageHeight;
+
+      setInitialMagnification(Math.min(widthRatio, heightRatio));
+      setMagnification(1);
+
+      // Reset image position
+      node.style.left = "0px";
+      node.style.top = "0px";
+    },
+    [isFullScreenEnabled, widthInNumber, aspectRatio]
+  );
+
+  const handleClose = useCallback(() => {
+    if (isDragging) return;
+    toggleFullScreenMode(false);
+    setMagnification(1);
+    setInitialMagnification(1);
+  }, [isDragging, toggleFullScreenMode]);
+
+  const handleMagnification = useCallback((direction: "increase" | "decrease") => {
+    setMagnification((prev) => {
+      // Find the appropriate target zoom level based on current magnification
+      let targetZoom: number;
+      if (direction === "increase") {
+        targetZoom = ZOOM_STEPS.find((step) => step > prev) ?? MAX_ZOOM;
+      } else {
+        // Reverse the array to find the next lower step
+        targetZoom = [...ZOOM_STEPS].reverse().find((step) => step < prev) ?? MIN_ZOOM;
+      }
+
+      // Reset position when zoom matches initial magnification
+      if (targetZoom === 1 && imgRef.current) {
+        imgRef.current.style.left = "0px";
+        imgRef.current.style.top = "0px";
+      }
+
+      return targetZoom;
+    });
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "+" || e.key === "=" || e.key === "-") {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.key === "Escape") handleClose();
+        if (e.key === "+" || e.key === "=") handleMagnification("increase");
+        if (e.key === "-") handleMagnification("decrease");
+      }
+    },
+    [handleClose, handleMagnification]
+  );
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!imgRef.current) return;
+
+    const imgWidth = imgRef.current.offsetWidth * magnification;
+    const imgHeight = imgRef.current.offsetHeight * magnification;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    if (imgWidth > viewportWidth || imgHeight > viewportHeight) {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(true);
+      dragStart.current = { x: e.clientX, y: e.clientY };
+      dragOffset.current = {
+        x: parseInt(imgRef.current.style.left || "0"),
+        y: parseInt(imgRef.current.style.top || "0"),
+      };
+    }
+  };
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging || !imgRef.current) return;
+
+      const dx = e.clientX - dragStart.current.x;
+      const dy = e.clientY - dragStart.current.y;
+
+      // Apply the scale factor to the drag movement
+      const scaledDx = dx / magnification;
+      const scaledDy = dy / magnification;
+
+      imgRef.current.style.left = `${dragOffset.current.x + scaledDx}px`;
+      imgRef.current.style.top = `${dragOffset.current.y + scaledDy}px`;
+    },
+    [isDragging, magnification]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (!isDragging || !imgRef.current) return;
+    setIsDragging(false);
+  }, [isDragging]);
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      if (!imgRef.current || !isFullScreenEnabled) return;
+
+      e.preventDefault();
+
+      // Handle pinch-to-zoom
+      if (e.ctrlKey || e.metaKey) {
+        const delta = e.deltaY;
+        setMagnification((prev) => {
+          const newZoom = prev * (1 - delta * ZOOM_SPEED);
+          const clampedZoom = Math.min(Math.max(newZoom, MIN_ZOOM), MAX_ZOOM);
+
+          // Reset position when zoom matches initial magnification
+          if (clampedZoom === 1 && imgRef.current) {
+            imgRef.current.style.left = "0px";
+            imgRef.current.style.top = "0px";
+          }
+
+          return clampedZoom;
+        });
+        return;
+      }
+    },
+    [isFullScreenEnabled]
+  );
+
+  // Event listeners
+  useEffect(() => {
+    if (!isFullScreenEnabled) return;
+
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("wheel", handleWheel, { passive: false });
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("wheel", handleWheel);
+    };
+  }, [isFullScreenEnabled, handleKeyDown, handleMouseMove, handleMouseUp, handleWheel]);
+
+  if (!isFullScreenEnabled) return null;
+
+  return (
+    <div
+      className={cn("pointer-events-none fixed inset-0 z-50 size-full bg-black/90 opacity-0 transition-opacity", {
+        "editor-image-full-screen-modal pointer-events-auto opacity-100": isFullScreenEnabled,
+        "cursor-default": !isDragging,
+        "cursor-grabbing": isDragging,
+      })}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Fullscreen image viewer"
+    >
+      <div
+        ref={modalRef}
+        onMouseDown={(e) => e.target === modalRef.current && handleClose()}
+        className="relative grid size-full place-items-center overflow-hidden"
+      >
+        <button
+          type="button"
+          onClick={handleClose}
+          className="absolute top-10 right-10 grid size-8 place-items-center"
+          aria-label="Close image viewer"
+        >
+          <CloseOutline className="size-8 text-white/60 transition-colors hover:text-white" />
+        </button>
+        <img
+          ref={setImageRef}
+          src={src}
+          className="read-only-image rounded-lg"
+          style={{
+            width: `${widthInNumber * initialMagnification}px`,
+            maxWidth: "none",
+            maxHeight: "none",
+            aspectRatio,
+            position: "relative",
+            transform: `scale(${magnification})`,
+            transformOrigin: "center",
+            transition: "width 0.2s ease, transform 0.2s ease",
+          }}
+          onMouseDown={handleMouseDown}
+        />
+        <div className="fixed bottom-10 left-1/2 flex -translate-x-1/2 items-center justify-center gap-1 divide-x divide-subtle-1 rounded-md border border-subtle-1 bg-black py-2">
+          <div className="flex items-center">
+            <button
+              type="button"
+              onClick={(e) => {
+                if (isTouchDevice) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+                handleMagnification("decrease");
+              }}
+              className="grid size-6 place-items-center text-white/60 transition-colors duration-200 hover:text-white disabled:text-white/30"
+              disabled={magnification <= MIN_ZOOM}
+              aria-label="Zoom out"
+            >
+              <MinusOutline className="size-4" />
+            </button>
+            <span className="w-12 text-center text-13 text-white">{Math.round(100 * magnification)}%</span>
+            <button
+              type="button"
+              onClick={(e) => {
+                if (isTouchDevice) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+                handleMagnification("increase");
+              }}
+              className="grid size-6 place-items-center text-white/60 transition-colors duration-200 hover:text-white disabled:text-white/30"
+              disabled={magnification >= MAX_ZOOM}
+              aria-label="Zoom in"
+            >
+              <AddOutline className="size-4" />
+            </button>
+          </div>
+          {!isTouchDevice && (
+            <button
+              type="button"
+              onClick={() => window.open(downloadSrc, "_blank")}
+              className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
+              aria-label="Download image"
+            >
+              <DownloadOutline className="size-4" />
+            </button>
+          )}
+          {!isTouchDevice && (
+            <button
+              type="button"
+              onClick={() => window.open(src, "_blank")}
+              className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
+              aria-label="Open image in new tab"
+            >
+              <NewTabOutline className="size-4" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ImageFullScreenModal(props: Props) {
+  let modal = <ImageFullScreenModalWithoutPortal {...props} />;
+  const portal = document.querySelector("#editor-portal");
+  if (portal) {
+    modal = ReactDOM.createPortal(modal, portal);
+  } else {
+    console.warn("Portal element #editor-portal not found. Rendering in document.body");
+    if (typeof document !== "undefined" && document.body) {
+      modal = ReactDOM.createPortal(modal, document.body);
+    }
+  }
+  return modal;
+}
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx
new file mode 100644
index 0000000..5baa86b
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { FullScreenOutline } from "@makeplane/propel/icons";
+import { useEffect, useState } from "react";
+// plane imports
+import { Tooltip } from "@plane/propel/tooltip";
+// local imports
+import { ImageFullScreenModal } from "./modal";
+
+type Props = {
+  image: {
+    aspectRatio: number;
+    downloadSrc: string;
+    height: string;
+    src: string;
+    width: string;
+  };
+  isTouchDevice: boolean;
+  toggleToolbarViewStatus: (val: boolean) => void;
+};
+
+export function ImageFullScreenActionRoot(props: Props) {
+  const { image, isTouchDevice, toggleToolbarViewStatus } = props;
+  // states
+  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
+  // derived values
+  const { downloadSrc, src, width, aspectRatio } = image;
+
+  useEffect(() => {
+    toggleToolbarViewStatus(isFullScreenEnabled);
+  }, [isFullScreenEnabled, toggleToolbarViewStatus]);
+
+  return (
+    <>
+      <ImageFullScreenModal
+        aspectRatio={aspectRatio}
+        downloadSrc={downloadSrc}
+        isFullScreenEnabled={isFullScreenEnabled}
+        isTouchDevice={isTouchDevice}
+        src={src}
+        width={width}
+        toggleFullScreenMode={setIsFullScreenEnabled}
+      />
+      <Tooltip tooltipContent="View in full screen" disabled={isTouchDevice}>
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsFullScreenEnabled(true);
+          }}
+          className="grid h-full flex-shrink-0 place-items-center text-on-color/60 transition-colors hover:text-on-color"
+          aria-label="View image in full screen"
+        >
+          <FullScreenOutline className="size-3" />
+        </button>
+      </Tooltip>
+    </>
+  );
+}
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/index.ts b/packages/editor/src/extensions/custom-image/components/toolbar/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/root.tsx
new file mode 100644
index 0000000..51c7f84
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/root.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { useState } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+// local imports
+import type { TCustomImageAlignment } from "../../types";
+import { ImageAlignmentAction } from "./alignment";
+import { ImageDownloadAction } from "./download";
+import { ImageFullScreenActionRoot } from "./full-screen";
+
+type Props = {
+  alignment: TCustomImageAlignment;
+  editor: Editor;
+  aspectRatio: number;
+  downloadSrc: string;
+  handleAlignmentChange: (alignment: TCustomImageAlignment) => void;
+  height: string;
+  isTouchDevice: boolean;
+  src: string;
+  width: string;
+};
+
+export function ImageToolbarRoot(props: Props) {
+  const { alignment, editor, downloadSrc, handleAlignmentChange, isTouchDevice } = props;
+  // states
+  const [shouldShowToolbar, setShouldShowToolbar] = useState(false);
+  // derived values
+  const isEditable = editor.isEditable;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "pointer-events-none absolute top-1 right-1 z-20 flex h-7 items-center gap-2 rounded-sm bg-black/80 px-2 opacity-0 transition-opacity group-hover/image-component:pointer-events-auto group-hover/image-component:opacity-100",
+          {
+            "pointer-events-auto opacity-100": shouldShowToolbar,
+          }
+        )}
+      >
+        {!isTouchDevice && <ImageDownloadAction src={downloadSrc} />}
+        {isEditable && (
+          <ImageAlignmentAction
+            activeAlignment={alignment}
+            handleChange={handleAlignmentChange}
+            isTouchDevice={isTouchDevice}
+            toggleToolbarViewStatus={setShouldShowToolbar}
+          />
+        )}
+        <ImageFullScreenActionRoot
+          image={props}
+          isTouchDevice={isTouchDevice}
+          toggleToolbarViewStatus={setShouldShowToolbar}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/packages/editor/src/extensions/custom-image/components/upload-status.tsx b/packages/editor/src/extensions/custom-image/components/upload-status.tsx
new file mode 100644
index 0000000..5319118
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/upload-status.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { useEditorState } from "@tiptap/react";
+import { useEffect, useRef, useState } from "react";
+
+type Props = {
+  editor: Editor;
+  nodeId: string;
+};
+
+export function ImageUploadStatus(props: Props) {
+  const { editor, nodeId } = props;
+  // Displayed status that will animate smoothly
+  const [displayStatus, setDisplayStatus] = useState(0);
+  // Animation frame ID for cleanup
+  const animationFrameRef = useRef<number | null>(null);
+  // subscribe to image upload status
+  const uploadStatus: number | undefined = useEditorState({
+    editor,
+    selector: ({ editor }) => editor.storage.utility?.assetsUploadStatus?.[nodeId],
+  });
+
+  useEffect(() => {
+    const animateToValue = (start: number, end: number, startTime: number) => {
+      const duration = 200;
+
+      const animation = (currentTime: number) => {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+
+        // Easing function for smooth animation
+        const easeOutCubic = 1 - Math.pow(1 - progress, 3);
+
+        // Calculate current display value
+        const currentValue = Math.floor(start + (end - start) * easeOutCubic);
+        setDisplayStatus(currentValue);
+
+        // Continue animation if not complete
+        if (progress < 1) {
+          animationFrameRef.current = requestAnimationFrame((time) => animation(time));
+        }
+      };
+      animationFrameRef.current = requestAnimationFrame((time) => animation(time));
+    };
+    animateToValue(displayStatus, uploadStatus == undefined ? 100 : uploadStatus, performance.now());
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [displayStatus, uploadStatus]);
+
+  if (uploadStatus === undefined) return null;
+
+  return (
+    <div className="absolute top-1 right-1 z-20 w-10 rounded-sm bg-black/60 text-center text-11 font-medium">
+      {displayStatus}%
+    </div>
+  );
+}
diff --git a/packages/editor/src/extensions/custom-image/components/uploader.tsx b/packages/editor/src/extensions/custom-image/components/uploader.tsx
new file mode 100644
index 0000000..4e13930
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/components/uploader.tsx
@@ -0,0 +1,267 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ImageOutline, RefreshOutline } from "@makeplane/propel/icons";
+import type { ChangeEvent } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+// constants
+import { ACCEPTED_IMAGE_MIME_TYPES } from "@/constants/config";
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import type { EFileError } from "@/helpers/file";
+// hooks
+import { useUploader, useDropZone, uploadFirstFileAndInsertRemaining } from "@/hooks/use-file-upload";
+// local imports
+import { ECustomImageStatus } from "../types";
+import { getImageComponentImageFileMap } from "../utils";
+import type { CustomImageNodeViewProps } from "./node-view";
+
+type CustomImageUploaderProps = CustomImageNodeViewProps & {
+  failedToLoadImage: boolean;
+  hasDuplicationFailed: boolean;
+  loadImageFromFileSystem: (file: string) => void;
+  maxFileSize: number;
+  setIsUploaded: (isUploaded: boolean) => void;
+};
+
+export function CustomImageUploader(props: CustomImageUploaderProps) {
+  const {
+    editor,
+    extension,
+    failedToLoadImage,
+    getPos,
+    loadImageFromFileSystem,
+    maxFileSize,
+    node,
+    selected,
+    setIsUploaded,
+    updateAttributes,
+    hasDuplicationFailed,
+  } = props;
+  // refs
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const hasTriggeredFilePickerRef = useRef(false);
+  const hasTriedUploadingOnMountRef = useRef(false);
+  const { id: imageEntityId } = node.attrs;
+  // derived values
+  const imageComponentImageFileMap = useMemo(() => getImageComponentImageFileMap(editor), [editor]);
+  const isTouchDevice = !!editor.storage.utility.isTouchDevice;
+
+  const onUpload = useCallback(
+    (url: string) => {
+      if (url) {
+        if (!imageEntityId) return;
+        setIsUploaded(true);
+        // Update the node view's src attribute post upload
+        updateAttributes({
+          src: url,
+          status: ECustomImageStatus.UPLOADED,
+        });
+        imageComponentImageFileMap?.delete(imageEntityId);
+
+        const pos = getPos();
+        // get current node
+        const getCurrentSelection = editor.state.selection;
+        const currentNode = editor.state.doc.nodeAt(getCurrentSelection.from);
+
+        // only if the cursor is at the current image component, manipulate
+        // the cursor position
+        if (
+          currentNode &&
+          currentNode.type.name === node.type.name &&
+          currentNode.attrs.src === url &&
+          pos !== undefined
+        ) {
+          // control cursor position after upload
+          const nextNode = editor.state.doc.nodeAt(pos + 1);
+
+          if (nextNode && nextNode.type.name === CORE_EXTENSIONS.PARAGRAPH) {
+            // If there is a paragraph node after the image component, move the focus to the next node
+            editor.commands.setTextSelection(pos + 1);
+          } else {
+            // create a new paragraph after the image component post upload
+            editor.commands.createParagraphNear();
+          }
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [imageComponentImageFileMap, imageEntityId, updateAttributes, getPos]
+  );
+
+  const uploadImageEditorCommand = useCallback(
+    async (file: File) => {
+      updateAttributes({ status: ECustomImageStatus.UPLOADING });
+      return await extension.options.uploadImage?.(imageEntityId ?? "", file);
+    },
+    [extension.options, imageEntityId, updateAttributes]
+  );
+
+  const handleProgressStatus = useCallback(
+    (isUploading: boolean) => {
+      editor.storage.utility.uploadInProgress = isUploading;
+    },
+    [editor]
+  );
+
+  const handleInvalidFile = useCallback((_error: EFileError, _file: File, message: string) => {
+    alert(message);
+  }, []);
+
+  // hooks
+  const { isUploading: isImageBeingUploaded, uploadFile } = useUploader({
+    acceptedMimeTypes: ACCEPTED_IMAGE_MIME_TYPES,
+    editorCommand: uploadImageEditorCommand,
+    handleProgressStatus,
+    loadFileFromFileSystem: loadImageFromFileSystem,
+    maxFileSize,
+    onInvalidFile: handleInvalidFile,
+    onUpload,
+  });
+
+  const { draggedInside, onDrop, onDragEnter, onDragLeave } = useDropZone({
+    editor,
+    getPos,
+    type: "image",
+    uploader: uploadFile,
+  });
+
+  // after the image component is mounted we start the upload process based on
+  // it's uploaded
+  useEffect(() => {
+    if (hasTriedUploadingOnMountRef.current) return;
+
+    // the meta data of the image component
+    const meta = imageComponentImageFileMap?.get(imageEntityId ?? "");
+    if (meta) {
+      if (meta.event === "drop" && "file" in meta) {
+        hasTriedUploadingOnMountRef.current = true;
+        uploadFile(meta.file);
+      } else if (meta.event === "insert" && fileInputRef.current && !hasTriggeredFilePickerRef.current) {
+        if (meta.hasOpenedFileInputOnce) return;
+        if (!isTouchDevice) {
+          fileInputRef.current.click();
+        }
+        hasTriggeredFilePickerRef.current = true;
+        imageComponentImageFileMap?.set(imageEntityId ?? "", { ...meta, hasOpenedFileInputOnce: true });
+      }
+    } else {
+      hasTriedUploadingOnMountRef.current = true;
+    }
+  }, [imageEntityId, isTouchDevice, uploadFile, imageComponentImageFileMap]);
+
+  const onFileChange = useCallback(
+    async (e: ChangeEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      const filesList = e.target.files;
+      const pos = getPos();
+      if (!filesList || pos === undefined) {
+        return;
+      }
+      await uploadFirstFileAndInsertRemaining({
+        editor,
+        filesList,
+        pos,
+        type: "image",
+        uploader: uploadFile,
+      });
+    },
+    [uploadFile, editor, getPos]
+  );
+
+  const isErrorState = failedToLoadImage || hasDuplicationFailed;
+
+  const borderColor =
+    selected && editor.isEditable && !isErrorState
+      ? "color-mix(in srgb, var(--border-color-accent-strong) 20%, transparent)"
+      : undefined;
+
+  const getDisplayMessage = useCallback(() => {
+    const isUploading = isImageBeingUploaded;
+    if (isErrorState) {
+      return "Error loading image";
+    }
+
+    if (isUploading) {
+      return "Uploading...";
+    }
+
+    if (draggedInside && editor.isEditable) {
+      return "Drop image here";
+    }
+
+    return "Add an image";
+  }, [draggedInside, editor.isEditable, isErrorState, isImageBeingUploaded]);
+
+  const handleRetryClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (hasDuplicationFailed && editor.isEditable) {
+        updateAttributes({ status: ECustomImageStatus.DUPLICATING });
+      }
+    },
+    [hasDuplicationFailed, editor.isEditable, updateAttributes]
+  );
+
+  return (
+    <div
+      className={cn(
+        "image-upload-component flex cursor-default items-center justify-start gap-2 rounded-lg border border-dashed bg-layer-3 px-2 py-3 text-tertiary transition-all duration-200 ease-in-out",
+        {
+          "border-subtle": !(selected && editor.isEditable && !isErrorState),
+          "cursor-pointer hover:bg-layer-3-hover hover:text-secondary": editor.isEditable && !isErrorState,
+          "bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
+          "bg-accent-primary/10 text-accent-secondary hover:bg-accent-primary/10 hover:text-accent-secondary":
+            selected && editor.isEditable && !isErrorState,
+          "cursor-default bg-danger-subtle text-danger-primary": isErrorState,
+          "hover:bg-danger-subtle-hover hover:text-danger-primary": isErrorState && editor.isEditable,
+          "bg-danger-subtle-selected": isErrorState && selected,
+          "hover:bg-danger-subtle-active": isErrorState && selected && editor.isEditable,
+        }
+      )}
+      style={borderColor ? { borderColor } : undefined}
+      onDrop={onDrop}
+      onDragOver={onDragEnter}
+      onDragLeave={onDragLeave}
+      contentEditable={false}
+      onClick={() => {
+        if (!failedToLoadImage && editor.isEditable && !hasDuplicationFailed) {
+          fileInputRef.current?.click();
+        }
+      }}
+    >
+      <ImageOutline className="size-4" />
+      <div className="flex-1 text-14 font-medium">{getDisplayMessage()}</div>
+      {hasDuplicationFailed && editor.isEditable && (
+        <button
+          type="button"
+          onClick={handleRetryClick}
+          className={cn(
+            "flex items-center gap-1 rounded-md px-2 py-1 font-medium text-danger-primary transition-all duration-200 ease-in-out hover:bg-danger-subtle-hover",
+            {
+              "hover:bg-danger-subtle-hover": selected,
+            }
+          )}
+          title="Retry duplication"
+        >
+          <RefreshOutline className="size-3" />
+          <span className="text-11">Retry</span>
+        </button>
+      )}
+      <input
+        className="size-0 overflow-hidden"
+        ref={fileInputRef}
+        hidden
+        type="file"
+        accept={ACCEPTED_IMAGE_MIME_TYPES.join(",")}
+        onChange={onFileChange}
+        multiple
+      />
+    </div>
+  );
+}
diff --git a/packages/editor/src/extensions/custom-image/extension-config.ts b/packages/editor/src/extensions/custom-image/extension-config.ts
new file mode 100644
index 0000000..b405451
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/extension-config.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { mergeAttributes } from "@tiptap/core";
+import { Image as BaseImageExtension } from "@tiptap/extension-image";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// local imports
+import { ECustomImageAttributeNames } from "./types";
+import type {
+  CustomImageExtensionOptions,
+  TCustomImageAttributes,
+  CustomImageExtensionType,
+  CustomImageExtensionStorage,
+  InsertImageComponentProps,
+} from "./types";
+import { DEFAULT_CUSTOM_IMAGE_ATTRIBUTES } from "./utils";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    [CORE_EXTENSIONS.CUSTOM_IMAGE]: {
+      insertImageComponent: ({ file, pos, event }: InsertImageComponentProps) => ReturnType;
+    };
+  }
+  interface Storage {
+    [CORE_EXTENSIONS.CUSTOM_IMAGE]: CustomImageExtensionStorage;
+  }
+}
+
+export const CustomImageExtensionConfig: CustomImageExtensionType = BaseImageExtension.extend<
+  CustomImageExtensionOptions,
+  CustomImageExtensionStorage
+>({
+  name: CORE_EXTENSIONS.CUSTOM_IMAGE,
+  group: "block",
+  atom: true,
+
+  addAttributes() {
+    const attributes = {
+      ...this.parent?.(),
+      ...Object.values(ECustomImageAttributeNames).reduce(
+        (acc, value) => {
+          acc[value] = {
+            default: DEFAULT_CUSTOM_IMAGE_ATTRIBUTES[value],
+          };
+          return acc;
+        },
+        {} as Record<ECustomImageAttributeNames, { default: TCustomImageAttributes[ECustomImageAttributeNames] }>
+      ),
+    };
+
+    return attributes;
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "image-component",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["image-component", mergeAttributes(HTMLAttributes)];
+  },
+});
diff --git a/packages/editor/src/extensions/custom-image/extension.tsx b/packages/editor/src/extensions/custom-image/extension.tsx
new file mode 100644
index 0000000..2d68d50
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/extension.tsx
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { v4 as uuidv4 } from "uuid";
+// constants
+import { ACCEPTED_IMAGE_MIME_TYPES } from "@/constants/config";
+// helpers
+import { isFileValid } from "@/helpers/file";
+import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
+// types
+import type { TFileHandler } from "@/types";
+// local imports
+import type { CustomImageNodeViewProps } from "./components/node-view";
+import { CustomImageNodeView } from "./components/node-view";
+import { CustomImageExtensionConfig } from "./extension-config";
+import type { CustomImageExtensionOptions, CustomImageExtensionStorage } from "./types";
+import { ECustomImageAttributeNames, ECustomImageStatus } from "./types";
+import { getImageComponentImageFileMap } from "./utils";
+
+type Props = {
+  fileHandler: TFileHandler;
+  isEditable: boolean;
+};
+
+export function CustomImageExtension(props: Props) {
+  const { fileHandler, isEditable } = props;
+  // derived values
+  const { getAssetSrc, getAssetDownloadSrc, restore: restoreImageFn } = fileHandler;
+
+  return CustomImageExtensionConfig.extend<CustomImageExtensionOptions, CustomImageExtensionStorage>({
+    selectable: isEditable,
+    draggable: isEditable,
+
+    addOptions() {
+      const upload = "upload" in fileHandler ? fileHandler.upload : undefined;
+      const duplicate = "duplicate" in fileHandler ? fileHandler.duplicate : undefined;
+      return {
+        ...this.parent?.(),
+        getImageDownloadSource: getAssetDownloadSrc,
+        getImageSource: getAssetSrc,
+        restoreImage: restoreImageFn,
+        uploadImage: upload,
+        duplicateImage: duplicate,
+      };
+    },
+
+    addStorage() {
+      const maxFileSize = "validation" in fileHandler ? fileHandler.validation?.maxFileSize : 0;
+
+      return {
+        fileMap: new Map(),
+        deletedImageSet: new Map<string, boolean>(),
+        maxFileSize,
+        // escape markdown for images
+        markdown: {
+          serialize() {},
+        },
+      };
+    },
+
+    addCommands() {
+      return {
+        insertImageComponent:
+          (props) =>
+          ({ commands }) => {
+            // Early return if there's an invalid file being dropped
+            if (
+              props?.file &&
+              !isFileValid({
+                acceptedMimeTypes: ACCEPTED_IMAGE_MIME_TYPES,
+                file: props.file,
+                maxFileSize: this.storage.maxFileSize,
+                onError: (_error, message) => alert(message),
+              })
+            ) {
+              return false;
+            }
+
+            // generate a unique id for the image to keep track of dropped
+            // files' file data
+            const fileId = uuidv4();
+
+            const imageComponentImageFileMap = getImageComponentImageFileMap(this.editor);
+
+            if (imageComponentImageFileMap) {
+              if (props?.event === "drop" && props.file) {
+                imageComponentImageFileMap.set(fileId, {
+                  file: props.file,
+                  event: props.event,
+                });
+              } else if (props.event === "insert") {
+                imageComponentImageFileMap.set(fileId, {
+                  event: props.event,
+                  hasOpenedFileInputOnce: false,
+                });
+              }
+            }
+
+            const attributes = {
+              [ECustomImageAttributeNames.ID]: fileId,
+              [ECustomImageAttributeNames.STATUS]: ECustomImageStatus.PENDING,
+            };
+
+            if (props.pos) {
+              return commands.insertContentAt(props.pos, {
+                type: this.name,
+                attrs: attributes,
+              });
+            }
+            return commands.insertContent({
+              type: this.name,
+              attrs: attributes,
+            });
+          },
+      };
+    },
+
+    addKeyboardShortcuts() {
+      return {
+        ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
+        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
+      };
+    },
+    addNodeView() {
+      return ReactNodeViewRenderer((props) => (
+        <CustomImageNodeView {...props} node={props.node as CustomImageNodeViewProps["node"]} />
+      ));
+    },
+  });
+}
diff --git a/packages/editor/src/extensions/custom-image/types.ts b/packages/editor/src/extensions/custom-image/types.ts
new file mode 100644
index 0000000..60bbf90
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/types.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Node } from "@tiptap/core";
+// types
+import type { TFileHandler } from "@/types";
+
+export enum ECustomImageAttributeNames {
+  ID = "id",
+  WIDTH = "width",
+  HEIGHT = "height",
+  ASPECT_RATIO = "aspectRatio",
+  SOURCE = "src",
+  ALIGNMENT = "alignment",
+  STATUS = "status",
+}
+
+export type Pixel = `${number}px`;
+
+export type PixelAttribute<TDefault> = Pixel | TDefault;
+
+export type TCustomImageSize = {
+  width: PixelAttribute<"35%">;
+  height: PixelAttribute<"auto">;
+  aspectRatio: number | null;
+};
+
+export type TCustomImageAlignment = "left" | "center" | "right";
+
+export enum ECustomImageStatus {
+  PENDING = "pending",
+  UPLOADING = "uploading",
+  UPLOADED = "uploaded",
+  DUPLICATING = "duplicating",
+  DUPLICATION_FAILED = "duplication-failed",
+}
+
+export type TCustomImageAttributes = {
+  [ECustomImageAttributeNames.ID]: string | null;
+  [ECustomImageAttributeNames.WIDTH]: PixelAttribute<"35%" | number> | null;
+  [ECustomImageAttributeNames.HEIGHT]: PixelAttribute<"auto" | number> | null;
+  [ECustomImageAttributeNames.ASPECT_RATIO]: number | null;
+  [ECustomImageAttributeNames.SOURCE]: string | null;
+  [ECustomImageAttributeNames.ALIGNMENT]: TCustomImageAlignment;
+  [ECustomImageAttributeNames.STATUS]: ECustomImageStatus;
+};
+
+export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File }) & { hasOpenedFileInputOnce?: boolean };
+
+export type InsertImageComponentProps = {
+  file?: File;
+  pos?: number;
+  event: "insert" | "drop";
+};
+
+export type CustomImageExtensionOptions = {
+  getImageDownloadSource: TFileHandler["getAssetDownloadSrc"];
+  getImageSource: TFileHandler["getAssetSrc"];
+  restoreImage: TFileHandler["restore"];
+  uploadImage?: TFileHandler["upload"];
+  duplicateImage?: TFileHandler["duplicate"];
+};
+
+export type CustomImageExtensionStorage = {
+  fileMap: Map<string, UploadEntity>;
+  deletedImageSet: Map<string, boolean>;
+  maxFileSize: number;
+};
+
+export type CustomImageExtensionType = Node<CustomImageExtensionOptions, CustomImageExtensionStorage>;
diff --git a/packages/editor/src/extensions/custom-image/utils.ts b/packages/editor/src/extensions/custom-image/utils.ts
new file mode 100644
index 0000000..fbeeb38
--- /dev/null
+++ b/packages/editor/src/extensions/custom-image/utils.ts
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { AlignCenterOutline, AlignLeftOutline, AlignRightOutline } from "@makeplane/propel/icons";
+import type { ComponentType, SVGProps } from "react";
+// local imports
+import { ECustomImageAttributeNames, ECustomImageStatus } from "./types";
+import type { TCustomImageAlignment, Pixel, TCustomImageAttributes } from "./types";
+
+export const DEFAULT_CUSTOM_IMAGE_ATTRIBUTES: TCustomImageAttributes = {
+  [ECustomImageAttributeNames.SOURCE]: null,
+  [ECustomImageAttributeNames.ID]: null,
+  [ECustomImageAttributeNames.WIDTH]: "35%",
+  [ECustomImageAttributeNames.HEIGHT]: "auto",
+  [ECustomImageAttributeNames.ASPECT_RATIO]: null,
+  [ECustomImageAttributeNames.ALIGNMENT]: "left",
+  [ECustomImageAttributeNames.STATUS]: ECustomImageStatus.PENDING,
+};
+
+export const getImageComponentImageFileMap = (editor: Editor) => editor.storage.imageComponent?.fileMap;
+
+export const ensurePixelString = <TDefault>(
+  value: Pixel | TDefault | number | undefined | null,
+  defaultValue?: TDefault
+) => {
+  if (!value || value === defaultValue) {
+    return defaultValue;
+  }
+
+  if (typeof value === "number") {
+    return `${value}px` satisfies Pixel;
+  }
+
+  return value;
+};
+
+export const IMAGE_ALIGNMENT_OPTIONS: {
+  label: string;
+  value: TCustomImageAlignment;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+}[] = [
+  {
+    label: "Left",
+    value: "left",
+    icon: AlignLeftOutline,
+  },
+  {
+    label: "Center",
+    value: "center",
+    icon: AlignCenterOutline,
+  },
+  {
+    label: "Right",
+    value: "right",
+    icon: AlignRightOutline,
+  },
+];
+export const getImageBlockId = (id: string) => `editor-image-block-${id}`;
+
+export const isImageDuplicating = (status: ECustomImageStatus) => status === ECustomImageStatus.DUPLICATING;
+
+export const isImageDuplicationComplete = (status: ECustomImageStatus) =>
+  status === ECustomImageStatus.UPLOADED || status === ECustomImageStatus.DUPLICATION_FAILED;
+
+export const hasImageDuplicationFailed = (status: ECustomImageStatus) =>
+  status === ECustomImageStatus.DUPLICATION_FAILED;
diff --git a/packages/editor/src/extensions/custom-link/extension.tsx b/packages/editor/src/extensions/custom-link/extension.tsx
new file mode 100644
index 0000000..248f3ac
--- /dev/null
+++ b/packages/editor/src/extensions/custom-link/extension.tsx
@@ -0,0 +1,296 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { PasteRuleMatch } from "@tiptap/core";
+import { Mark, markPasteRule, mergeAttributes } from "@tiptap/core";
+import type { Plugin } from "@tiptap/pm/state";
+import { find, registerCustomProtocol, reset } from "linkifyjs";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { isValidHttpUrl } from "@/helpers/common";
+// local imports
+import { autolink } from "./helpers/autolink";
+import { clickHandler } from "./helpers/clickHandler";
+import { pasteHandler } from "./helpers/pasteHandler";
+
+type LinkProtocolOptions = {
+  scheme: string;
+  optionalSlashes?: boolean;
+};
+
+type LinkOptions = {
+  /**
+   * If enabled, it adds links as you type.
+   */
+  autolink: boolean;
+  /**
+   * An array of custom protocols to be registered with linkifyjs.
+   */
+  protocols: Array<LinkProtocolOptions | string>;
+  /**
+   * If enabled, links will be opened on click.
+   */
+  openOnClick: boolean;
+  /**
+   * If enabled, links will be inclusive i.e. if you move your cursor to the
+   * link text, and start typing, it'll be a part of the link itself.
+   */
+  inclusive: boolean;
+  /**
+   * Adds a link to the current selection if the pasted content only contains an url.
+   */
+  linkOnPaste: boolean;
+  /**
+   * A list of HTML attributes to be rendered.
+   */
+  HTMLAttributes: Record<string, unknown>;
+  /**
+   * A validation function that modifies link verification for the auto linker.
+   * @param url - The url to be validated.
+   * @returns - True if the url is valid, false otherwise.
+   */
+  validate?: (url: string) => boolean;
+};
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    [CORE_EXTENSIONS.CUSTOM_LINK]: {
+      /**
+       * Set a link mark
+       */
+      setLink: (attributes: {
+        href: string;
+        target?: string | null;
+        rel?: string | null;
+        class?: string | null;
+      }) => ReturnType;
+      /**
+       * Toggle a link mark
+       */
+      toggleLink: (attributes: {
+        href: string;
+        target?: string | null;
+        rel?: string | null;
+        class?: string | null;
+      }) => ReturnType;
+      /**
+       * Unset a link mark
+       */
+      unsetLink: () => ReturnType;
+    };
+  }
+  interface Storage {
+    [CORE_EXTENSIONS.CUSTOM_LINK]: CustomLinkStorage;
+  }
+}
+
+export type CustomLinkStorage = {
+  isPreviewOpen: boolean;
+  posToInsert: { from: number; to: number };
+  isBubbleMenuOpen: boolean;
+};
+
+// Blocked link protocols — browsers execute these in the page's security context.
+const BLOCKED_LINK_PROTOCOLS = ["javascript:", "data:", "vbscript:"];
+
+/**
+ * Returns true if the raw href value contains a dangerous protocol.
+ *
+ * Per the WHATWG URL spec, browsers strip ASCII Tab (U+0009), LF (U+000A), and
+ * CR (U+000D) from URL strings during parsing, and strip leading C0 controls /
+ * whitespace before the scheme. A naive `startsWith("javascript:")` check is
+ * therefore bypassable with a whitespace prefix (e.g. `"\tjavascript:alert(1)"`).
+ * We replicate that normalization before our protocol check (GHSA-v2vv-7wq3-8w2j).
+ */
+function isDangerousHref(rawHref: string): boolean {
+  const normalized = rawHref
+    .replace(/[\t\n\r]/g, "") // strip Tab/LF/CR (stripped anywhere by WHATWG parser)
+    // oxlint-disable-next-line no-control-regex -- intentional: mirrors WHATWG C0-control stripping before the URL scheme
+    .replace(/^[\s\u0000-\u0008\u000E-\u001F]+/, "") // strip leading C0 controls + whitespace
+    .toLowerCase();
+  return BLOCKED_LINK_PROTOCOLS.some((protocol) => normalized.startsWith(protocol));
+}
+
+export const CustomLinkExtension = Mark.create<LinkOptions, CustomLinkStorage>({
+  name: CORE_EXTENSIONS.CUSTOM_LINK,
+
+  priority: 1000,
+
+  keepOnSplit: false,
+
+  onCreate() {
+    this.options.protocols.forEach((protocol) => {
+      if (typeof protocol === "string") {
+        registerCustomProtocol(protocol);
+        return;
+      }
+      registerCustomProtocol(protocol.scheme, protocol.optionalSlashes);
+    });
+  },
+
+  onDestroy() {
+    reset();
+  },
+
+  inclusive() {
+    return this.options.inclusive;
+  },
+
+  addOptions() {
+    return {
+      openOnClick: true,
+      linkOnPaste: true,
+      autolink: true,
+      inclusive: false,
+      protocols: ["http", "https"],
+      HTMLAttributes: {
+        target: "_blank",
+        rel: "noopener noreferrer nofollow",
+        class:
+          "text-accent-secondary underline underline-offset-[3px] hover:text-accent-primary transition-colors cursor-pointer",
+      },
+      validate: (url: string) => isValidHttpUrl(url).isValid,
+    };
+  },
+
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+      },
+      target: {
+        default: this.options.HTMLAttributes.target,
+      },
+      rel: {
+        default: this.options.HTMLAttributes.rel,
+      },
+      class: {
+        default: this.options.HTMLAttributes.class,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "a[href]",
+        getAttrs: (node) => {
+          if (typeof node === "string") {
+            return null;
+          }
+          const href = node.getAttribute("href") || "";
+          if (isDangerousHref(href)) {
+            return false;
+          }
+          return {};
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const href = (HTMLAttributes.href as string) || "";
+    if (isDangerousHref(href)) {
+      return ["a", mergeAttributes(this.options.HTMLAttributes, { ...HTMLAttributes, href: "" }), 0];
+    }
+    return ["a", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setLink:
+        (attributes) =>
+        ({ chain }) =>
+          chain().setMark(this.name, attributes).setMeta("preventAutolink", true).run(),
+
+      toggleLink:
+        (attributes) =>
+        ({ chain }) =>
+          chain()
+            .toggleMark(this.name, attributes, { extendEmptyMarkRange: true })
+            .setMeta("preventAutolink", true)
+            .run(),
+
+      unsetLink:
+        () =>
+        ({ chain }) =>
+          chain().unsetMark(this.name, { extendEmptyMarkRange: true }).setMeta("preventAutolink", true).run(),
+    };
+  },
+
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: (text) => {
+          const foundLinks: PasteRuleMatch[] = [];
+
+          if (text) {
+            const links = find(text).filter((item) => item.isLink);
+
+            if (links.length) {
+              links.forEach((link) =>
+                foundLinks.push({
+                  text: link.value,
+                  data: {
+                    href: link.href,
+                  },
+                  index: link.start,
+                })
+              );
+            }
+          }
+
+          return foundLinks;
+        },
+        type: this.type,
+        getAttributes: (match) => ({
+          href: match.data?.href,
+        }),
+      }),
+    ];
+  },
+
+  addProseMirrorPlugins() {
+    const plugins: Plugin[] = [];
+
+    if (this.options.autolink) {
+      plugins.push(
+        autolink({
+          type: this.type,
+          validate: this.options.validate,
+        })
+      );
+    }
+
+    if (this.options.openOnClick) {
+      plugins.push(
+        clickHandler({
+          type: this.type,
+        })
+      );
+    }
+
+    if (this.options.linkOnPaste) {
+      plugins.push(
+        pasteHandler({
+          editor: this.editor,
+          type: this.type,
+        })
+      );
+    }
+
+    return plugins;
+  },
+
+  addStorage() {
+    return {
+      isPreviewOpen: false,
+      isBubbleMenuOpen: false,
+      posToInsert: { from: 0, to: 0 },
+    };
+  },
+});
diff --git a/packages/editor/src/extensions/custom-link/helpers/autolink.ts b/packages/editor/src/extensions/custom-link/helpers/autolink.ts
new file mode 100644
index 0000000..38a452c
--- /dev/null
+++ b/packages/editor/src/extensions/custom-link/helpers/autolink.ts
@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { NodeWithPos } from "@tiptap/core";
+import { combineTransactionSteps, findChildrenInRange, getChangedRanges, getMarksBetween } from "@tiptap/core";
+import type { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { find } from "linkifyjs";
+
+type AutolinkOptions = {
+  type: MarkType;
+  validate?: (url: string) => boolean;
+};
+
+export function autolink(options: AutolinkOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey("autolink"),
+    appendTransaction: (transactions, oldState, newState) => {
+      const docChanges = transactions.some((transaction) => transaction.docChanged) && !oldState.doc.eq(newState.doc);
+      const preventAutolink = transactions.some((transaction) => transaction.getMeta("preventAutolink"));
+
+      if (!docChanges || preventAutolink) {
+        return;
+      }
+
+      const { tr } = newState;
+      const transform = combineTransactionSteps(oldState.doc, [...transactions]);
+      const changes = getChangedRanges(transform);
+
+      changes.forEach(({ newRange }) => {
+        // Now let’s see if we can add new links.
+        const nodesInChangedRanges = findChildrenInRange(newState.doc, newRange, (node) => node.isTextblock);
+
+        let textBlock: NodeWithPos | undefined;
+        let textBeforeWhitespace: string | undefined;
+
+        if (nodesInChangedRanges.length > 1) {
+          // Grab the first node within the changed ranges (ex. the first of two paragraphs when hitting enter).
+          textBlock = nodesInChangedRanges[0];
+          textBeforeWhitespace = newState.doc.textBetween(
+            textBlock.pos,
+            textBlock.pos + textBlock.node.nodeSize,
+            undefined,
+            " "
+          );
+        } else if (
+          nodesInChangedRanges.length &&
+          // We want to make sure to include the block separator argument to treat hard breaks like spaces.
+          newState.doc.textBetween(newRange.from, newRange.to, " ", " ").endsWith(" ")
+        ) {
+          textBlock = nodesInChangedRanges[0];
+          textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, newRange.to, undefined, " ");
+        }
+
+        if (textBlock && textBeforeWhitespace) {
+          const wordsBeforeWhitespace = textBeforeWhitespace.split(" ").filter((s) => s !== "");
+
+          if (wordsBeforeWhitespace.length <= 0) {
+            return false;
+          }
+
+          const lastWordBeforeSpace = wordsBeforeWhitespace[wordsBeforeWhitespace.length - 1];
+          const lastWordAndBlockOffset = textBlock.pos + textBeforeWhitespace.lastIndexOf(lastWordBeforeSpace);
+
+          if (!lastWordBeforeSpace) {
+            return false;
+          }
+
+          find(lastWordBeforeSpace)
+            .filter((link) => link.isLink)
+            // Calculate link position.
+            .map((link) => ({
+              ...link,
+              from: lastWordAndBlockOffset + link.start + 1,
+              to: lastWordAndBlockOffset + link.end + 1,
+            }))
+            // ignore link inside code mark
+            .filter((link) => {
+              if (!newState.schema.marks.code) {
+                return true;
+              }
+
+              return !newState.doc.rangeHasMark(link.from, link.to, newState.schema.marks.code);
+            })
+            // validate link
+            .filter((link) => {
+              if (options.validate) {
+                return options.validate(link.value);
+              }
+              return true;
+            })
+            // Add link mark.
+            .forEach((link) => {
+              if (getMarksBetween(link.from, link.to, newState.doc).some((item) => item.mark.type === options.type)) {
+                return;
+              }
+
+              tr.addMark(
+                link.from,
+                link.to,
+                options.type.create({
+                  href: link.href,
+                })
+              );
+            });
+        }
+      });
+
+      if (!tr.steps.length) {
+        return;
+      }
+
+      return tr;
+    },
+  });
+}
diff --git a/packages/editor/src/extensions/custom-link/helpers/clickHandler.ts b/packages/editor/src/extensions/custom-link/helpers/clickHandler.ts
new file mode 100644
index 0000000..98c795c
--- /dev/null
+++ b/packages/editor/src/extensions/custom-link/helpers/clickHandler.ts
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { getAttributes } from "@tiptap/core";
+import type { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+type ClickHandlerOptions = {
+  type: MarkType;
+};
+
+export function clickHandler(options: ClickHandlerOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey("handleClickLink"),
+    props: {
+      handleClick: (view, pos, event) => {
+        if (event.button !== 0) {
+          return false;
+        }
+
+        let a = event.target as HTMLElement;
+        const els: HTMLElement[] = [];
+
+        while (a?.nodeName !== "DIV") {
+          els.push(a);
+          a = a?.parentNode as HTMLElement;
+        }
+
+        if (!els.find((value) => value.nodeName === "A")) {
+          return false;
+        }
+
+        const attrs = getAttributes(view.state, options.type.name);
+        const link = event.target as HTMLLinkElement;
+
+        const href = link?.href ?? attrs.href;
+        const target = link?.target ?? attrs.target;
+
+        if (link && href) {
+          // Defence-in-depth: link.href is the browser-resolved URL (whitespace
+          // already stripped by the browser's WHATWG URL parser), so a protocol
+          // check here is sufficient to catch any dangerous URI that slipped past
+          // the editor's parse/render-time guards. Matches the blocked-scheme list
+          // in isValidHttpUrl (javascript:, data:, vbscript:, file:, about:)
+          // to keep the policy consistent (GHSA-v2vv-7wq3-8w2j).
+          if (/^(javascript|data|vbscript|file|about):/i.test(href)) {
+            return false;
+          }
+
+          window.open(href, target);
+
+          return true;
+        }
+
+        return false;
+      },
+    },
+  });
+}
diff --git a/packages/editor/src/extensions/custom-link/helpers/pasteHandler.ts b/packages/editor/src/extensions/custom-link/helpers/pasteHandler.ts
new file mode 100644
index 0000000..0e02c7c
--- /dev/null
+++ b/packages/editor/src/extensions/custom-link/helpers/pasteHandler.ts
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import type { MarkType } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { find } from "linkifyjs";
+
+type PasteHandlerOptions = {
+  editor: Editor;
+  type: MarkType;
+};
+
+export function pasteHandler(options: PasteHandlerOptions): Plugin {
+  return new Plugin({
+    key: new PluginKey("handlePasteLink"),
+    props: {
+      handlePaste: (view, event, slice) => {
+        const { state } = view;
+        const { selection } = state;
+        const { empty } = selection;
+
+        if (empty) {
+          return false;
+        }
+
+        let textContent = "";
+
+        slice.content.forEach((node) => {
+          textContent += node.textContent;
+        });
+
+        const link = find(textContent).find((item) => item.isLink && item.value === textContent);
+
+        if (!textContent || !link) {
+          return false;
+        }
+
+        options.editor.commands.setMark(options.type, {
+          href: link.href,
+        });
+
+        return true;
+      },
+    },
+  });
+}
diff --git a/packages/editor/src/extensions/custom-link/index.ts b/packages/editor/src/extensions/custom-link/index.ts
new file mode 100644
index 0000000..2dcbf26
--- /dev/null
+++ b/packages/editor/src/extensions/custom-link/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./extension";
diff --git a/packages/editor/src/extensions/custom-list-keymap/index.ts b/packages/editor/src/extensions/custom-list-keymap/index.ts
new file mode 100644
index 0000000..01d23a0
--- /dev/null
+++ b/packages/editor/src/extensions/custom-list-keymap/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./list-keymap";
diff --git a/packages/editor/src/extensions/custom-list-keymap/list-helpers.ts b/packages/editor/src/extensions/custom-list-keymap/list-helpers.ts
new file mode 100644
index 0000000..6f11fc7
--- /dev/null
+++ b/packages/editor/src/extensions/custom-list-keymap/list-helpers.ts
@@ -0,0 +1,384 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { getNodeType, getNodeAtPosition, isAtEndOfNode, isAtStartOfNode, isNodeActive } from "@tiptap/core";
+import type { Node, NodeType } from "@tiptap/pm/model";
+import type { EditorState } from "@tiptap/pm/state";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+const findListItemPos = (typeOrName: string | NodeType, state: EditorState) => {
+  const { $from } = state.selection;
+  const nodeType = getNodeType(typeOrName, state.schema);
+
+  let currentNode: Node | null = null;
+  let currentDepth = $from.depth;
+  let currentPos = $from.pos;
+  let targetDepth: number | null = null;
+
+  while (currentDepth > 0 && targetDepth === null) {
+    currentNode = $from.node(currentDepth);
+
+    if (currentNode.type === nodeType) {
+      targetDepth = currentDepth;
+    } else {
+      currentDepth -= 1;
+      currentPos -= 1;
+    }
+  }
+
+  if (targetDepth === null) {
+    return null;
+  }
+
+  return { $pos: state.doc.resolve(currentPos), depth: targetDepth };
+};
+
+const nextListIsDeeper = (typeOrName: string, state: EditorState) => {
+  const listDepth = getNextListDepth(typeOrName, state);
+  const listItemPos = findListItemPos(typeOrName, state);
+
+  if (!listItemPos || !listDepth) {
+    return false;
+  }
+
+  if (listDepth > listItemPos.depth) {
+    return true;
+  }
+
+  return false;
+};
+
+const getNextListDepth = (typeOrName: string, state: EditorState) => {
+  const listItemPos = findListItemPos(typeOrName, state);
+
+  if (!listItemPos) {
+    return false;
+  }
+
+  const [, depth] = getNodeAtPosition(state, typeOrName, listItemPos.$pos.pos + 4);
+
+  return depth;
+};
+
+const getPrevListDepth = (typeOrName: string, state: EditorState) => {
+  const listItemPos = findListItemPos(typeOrName, state);
+
+  if (!listItemPos) {
+    return false;
+  }
+
+  let depth = 0;
+  const pos = listItemPos.$pos;
+
+  // Adjust the position to ensure we're within the list item, especially for edge cases
+  const resolvedPos = state.doc.resolve(Math.max(pos.pos - 1, 0));
+
+  // Traverse up the document structure from the adjusted position
+  for (let d = resolvedPos.depth; d > 0; d--) {
+    const node = resolvedPos.node(d);
+    if (
+      [CORE_EXTENSIONS.BULLET_LIST, CORE_EXTENSIONS.ORDERED_LIST, CORE_EXTENSIONS.TASK_LIST].includes(
+        node.type.name as CORE_EXTENSIONS
+      )
+    ) {
+      // Increment depth for each list ancestor found
+      depth++;
+    }
+  }
+
+  // Subtract 1 from the calculated depth to get the parent list's depth
+  // This adjustment is necessary because the depth calculation includes the current list
+  // By subtracting 1, we aim to get the depth of the parent list, which helps in identifying if the current list is a sublist
+  depth = depth > 0 ? depth - 1 : 0;
+
+  // Double the depth value to get results as 2, 4, 6, 8, etc.
+  depth = depth * 2;
+
+  return depth;
+};
+
+export const handleBackspace = (editor: Editor, name: string, parentListTypes: string[]) => {
+  // this is required to still handle the undo handling
+  if (editor.commands.undoInputRule()) {
+    return true;
+  }
+  // Check if a node range is selected, and if so, fall back to default backspace functionality
+  const { from, to } = editor.state.selection;
+  if (from !== to) {
+    // A range is selected, not just a cursor position; fall back to default behavior
+    return false; // Let the editor handle backspace by default
+  }
+
+  // if the current item is NOT inside a list item &
+  // the previous item is a list (orderedList or bulletList)
+  // move the cursor into the list and delete the current item
+  if (!isNodeActive(editor.state, name) && hasListBefore(editor.state, name, parentListTypes)) {
+    const { $anchor } = editor.state.selection;
+
+    const $listPos = editor.state.doc.resolve($anchor.before() - 1);
+
+    const listDescendants: Array<{ node: Node; pos: number }> = [];
+
+    $listPos.node().descendants((node, pos) => {
+      if (node.type.name === name) {
+        listDescendants.push({ node, pos });
+      }
+    });
+
+    const lastItem = listDescendants.at(-1);
+
+    if (!lastItem) {
+      return false;
+    }
+
+    const $lastItemPos = editor.state.doc.resolve($listPos.start() + lastItem.pos + 1);
+
+    // Check if positions are within the valid range
+    const startPos = $anchor.start() - 1;
+    const endPos = $anchor.end() + 1;
+    if (startPos < 0 || endPos > editor.state.doc.content.size) {
+      return false; // Invalid position, abort operation
+    }
+
+    return editor.chain().cut({ from: startPos, to: endPos }, $lastItemPos.end()).joinForward().run();
+  }
+
+  // if the cursor is not inside the current node type
+  // do nothing and proceed
+  if (!isNodeActive(editor.state, name)) {
+    return false;
+  }
+
+  // if the cursor is not at the start of a node
+  // do nothing and proceed
+  if (!isAtStartOfNode(editor.state)) {
+    return false;
+  }
+
+  // is the paragraph node inside of the current list item (maybe with a hard break)
+  const isParaSibling = isCurrentParagraphASibling(editor.state);
+  const isCurrentListItemSublist = prevListIsHigher(name, editor.state);
+  const listItemPos = findListItemPos(name, editor.state);
+  const nextListItemIsSibling = nextListIsSibling(name, editor.state);
+
+  if (!listItemPos) {
+    return false;
+  }
+
+  const currentNode = listItemPos.$pos.node(listItemPos.depth);
+  const currentListItemHasSubList = listItemHasSubList(name, editor.state, currentNode);
+
+  if (currentListItemHasSubList && isCurrentListItemSublist && isParaSibling) {
+    return false;
+  }
+
+  if (currentListItemHasSubList && isCurrentListItemSublist) {
+    editor.chain().liftListItem(name).run();
+    return editor.commands.joinItemBackward();
+  }
+
+  if (isCurrentListItemSublist && nextListItemIsSibling) {
+    return false;
+  }
+
+  if (isCurrentListItemSublist) {
+    return false;
+  }
+
+  if (currentListItemHasSubList) {
+    return false;
+  }
+
+  if (hasListItemBefore(name, editor.state)) {
+    return editor.chain().liftListItem(name).run();
+  }
+
+  if (!currentListItemHasSubList) {
+    return false;
+  }
+
+  // otherwise in the end, a backspace should
+  // always just lift the list item if
+  // joining / merging is not possible
+  return editor.chain().liftListItem(name).run();
+};
+
+export const handleDelete = (editor: Editor, name: string) => {
+  // if the cursor is not inside the current node type
+  // do nothing and proceed
+  if (!isNodeActive(editor.state, name)) {
+    return false;
+  }
+
+  // if the cursor is not at the end of a node
+  // do nothing and proceed
+  if (!isAtEndOfNode(editor.state, name)) {
+    return false;
+  }
+
+  // check if the next node is a list with a deeper depth
+  if (nextListIsDeeper(name, editor.state)) {
+    return editor
+      .chain()
+      .focus(editor.state.selection.from + 4)
+      .lift(name)
+      .joinBackward()
+      .run();
+  }
+
+  if (nextListIsHigher(name, editor.state)) {
+    return editor.chain().joinForward().joinBackward().run();
+  }
+
+  return editor.commands.joinItemForward();
+};
+
+const hasListBefore = (editorState: EditorState, name: string, parentListTypes: string[]) => {
+  const { $anchor } = editorState.selection;
+
+  const previousNodePos = Math.max(0, $anchor.pos - 2);
+
+  const previousNode = editorState.doc.resolve(previousNodePos).node();
+
+  if (!previousNode || !parentListTypes.includes(previousNode.type.name)) {
+    return false;
+  }
+
+  return true;
+};
+
+const prevListIsHigher = (typeOrName: string, state: EditorState) => {
+  const listDepth = getPrevListDepth(typeOrName, state);
+  const listItemPos = findListItemPos(typeOrName, state);
+
+  if (!listItemPos || !listDepth) {
+    return false;
+  }
+
+  if (listDepth < listItemPos.depth) {
+    return true;
+  }
+
+  return false;
+};
+
+const nextListIsSibling = (typeOrName: string, state: EditorState) => {
+  const listDepth = getNextListDepth(typeOrName, state);
+  const listItemPos = findListItemPos(typeOrName, state);
+
+  if (!listItemPos || !listDepth) {
+    return false;
+  }
+
+  if (listDepth === listItemPos.depth) {
+    return true;
+  }
+
+  return false;
+};
+
+export const nextListIsHigher = (typeOrName: string, state: EditorState) => {
+  const listDepth = getNextListDepth(typeOrName, state);
+  const listItemPos = findListItemPos(typeOrName, state);
+
+  if (!listItemPos || !listDepth) {
+    return false;
+  }
+
+  if (listDepth < listItemPos.depth) {
+    return true;
+  }
+
+  return false;
+};
+
+const listItemHasSubList = (typeOrName: string, state: EditorState, node?: Node) => {
+  if (!node) {
+    return false;
+  }
+
+  const nodeType = getNodeType(typeOrName, state.schema);
+
+  let hasSubList = false;
+
+  node.descendants((child) => {
+    if (child.type === nodeType) {
+      hasSubList = true;
+    }
+  });
+
+  return hasSubList;
+};
+
+const isCurrentParagraphASibling = (state: EditorState): boolean => {
+  const { $from } = state.selection;
+  const listItemNode = $from.node(-1); // Get the parent node of the current selection, assuming it's a list item.
+  const currentParagraphNode = $from.parent; // Get the current node where the selection is.
+
+  // Ensure we're in a paragraph and the parent is a list item.
+  if (
+    currentParagraphNode.type.name === CORE_EXTENSIONS.PARAGRAPH &&
+    [CORE_EXTENSIONS.LIST_ITEM, CORE_EXTENSIONS.TASK_ITEM].includes(listItemNode.type.name as CORE_EXTENSIONS)
+  ) {
+    let paragraphNodesCount = 0;
+    listItemNode.forEach((child) => {
+      if (child.type.name === CORE_EXTENSIONS.PARAGRAPH) {
+        paragraphNodesCount++;
+      }
+    });
+
+    // If there are more than one paragraph nodes, the current paragraph is a sibling.
+    return paragraphNodesCount > 1;
+  }
+
+  return false;
+};
+
+export function isCursorInSubList(editor: Editor) {
+  const { selection } = editor.state;
+  const { $from } = selection;
+
+  // Check if the current node is a list item
+  const listItem = editor.schema.nodes.listItem;
+  const taskItem = editor.schema.nodes.taskItem;
+
+  // Traverse up the document tree from the current position
+  for (let depth = $from.depth; depth > 0; depth--) {
+    const node = $from.node(depth);
+    if (node.type === listItem || node.type === taskItem) {
+      // If the parent of the list item is also a list, it's a sub-list
+      const parent = $from.node(depth - 1);
+      if (
+        parent &&
+        (parent.type === editor.schema.nodes.bulletList ||
+          parent.type === editor.schema.nodes.orderedList ||
+          parent.type === editor.schema.nodes.taskList)
+      ) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+const hasListItemBefore = (typeOrName: string, state: EditorState): boolean => {
+  const { $anchor } = state.selection;
+
+  const $targetPos = state.doc.resolve($anchor.pos - 2);
+
+  if ($targetPos.index() === 0) {
+    return false;
+  }
+
+  if ($targetPos.nodeBefore?.type.name !== typeOrName) {
+    return false;
+  }
+
+  return true;
+};
diff --git a/packages/editor/src/extensions/custom-list-keymap/list-keymap.ts b/packages/editor/src/extensions/custom-list-keymap/list-keymap.ts
new file mode 100644
index 0000000..a880b65
--- /dev/null
+++ b/packages/editor/src/extensions/custom-list-keymap/list-keymap.ts
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Extension } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// extensions
+import { handleBackspace, handleDelete } from "@/extensions/custom-list-keymap/list-helpers";
+
+export type ListKeymapOptions = {
+  listTypes: Array<{
+    itemName: string;
+    wrapperNames: string[];
+  }>;
+};
+
+export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) =>
+  Extension.create<ListKeymapOptions>({
+    name: "listKeymap",
+
+    addOptions() {
+      return {
+        listTypes: [
+          {
+            itemName: "listItem",
+            wrapperNames: ["bulletList", "orderedList"],
+          },
+          {
+            itemName: "taskItem",
+            wrapperNames: ["taskList"],
+          },
+        ],
+      };
+    },
+
+    addKeyboardShortcuts() {
+      return {
+        Tab: () => {
+          if (this.editor.isActive(CORE_EXTENSIONS.LIST_ITEM) || this.editor.isActive(CORE_EXTENSIONS.TASK_ITEM)) {
+            if (this.editor.commands.sinkListItem(CORE_EXTENSIONS.LIST_ITEM)) {
+              return true;
+            } else if (this.editor.commands.sinkListItem(CORE_EXTENSIONS.TASK_ITEM)) {
+              return true;
+            }
+            return true;
+          }
+          // if tabIndex is set, we don't want to handle Tab key
+          if (tabIndex !== undefined && tabIndex !== null) {
+            return false;
+          }
+          return true;
+        },
+        "Shift-Tab": () => {
+          if (this.editor.commands.liftListItem(CORE_EXTENSIONS.LIST_ITEM)) {
+            return true;
+          } else if (this.editor.commands.liftListItem(CORE_EXTENSIONS.TASK_ITEM)) {
+            return true;
+          }
+          // if tabIndex is set, we don't want to handle Tab key
+          if (tabIndex !== undefined && tabIndex !== null) {
+            return false;
+          }
+          return true;
+        },
+        Delete: ({ editor }) => {
+          try {
+            let handled = false;
+
+            this.options.listTypes.forEach(({ itemName }) => {
+              if (editor.state.schema.nodes[itemName] === undefined) {
+                return;
+              }
+
+              if (handleDelete(editor, itemName)) {
+                handled = true;
+              }
+            });
+
+            return handled;
+          } catch (e) {
+            console.log("Error in handling Delete:", e);
+            return false;
+          }
+        },
+        "Mod-Delete": ({ editor }) => {
+          let handled = false;
+
+          this.options.listTypes.forEach(({ itemName }) => {
+            if (editor.state.schema.nodes[itemName] === undefined) {
+              return;
+            }
+
+            if (handleDelete(editor, itemName)) {
+              handled = true;
+            }
+          });
+
+          return handled;
+        },
+        Backspace: ({ editor }) => {
+          try {
+            let handled = false;
+
+            this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+              if (editor.state.schema.nodes[itemName] === undefined) {
+                return;
+              }
+
+              if (handleBackspace(editor, itemName, wrapperNames)) {
+                handled = true;
+              }
+            });
+
+            return handled;
+          } catch (e) {
+            console.log("Error in handling Backspace:", e);
+            return false;
+          }
+        },
+        "Mod-Backspace": ({ editor }) => {
+          let handled = false;
+
+          this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+            if (editor.state.schema.nodes[itemName] === undefined) {
+              return;
+            }
+
+            if (handleBackspace(editor, itemName, wrapperNames)) {
+              handled = true;
+            }
+          });
+
+          return handled;
+        },
+      };
+    },
+  });
diff --git a/packages/editor/src/extensions/document-extensions.tsx b/packages/editor/src/extensions/document-extensions.tsx
new file mode 100644
index 0000000..118364c
--- /dev/null
+++ b/packages/editor/src/extensions/document-extensions.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { AnyExtension } from "@tiptap/core";
+import { SlashCommands } from "@/extensions";
+// types
+import type { IEditorProps, TExtensions, TUserDetails } from "@/types";
+
+export type TDocumentEditorAdditionalExtensionsProps = Pick<
+  IEditorProps,
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "extendedEditorProps"
+> & {
+  isEditable: boolean;
+  provider?: HocuspocusProvider;
+  userDetails: TUserDetails;
+};
+
+export type TDocumentEditorAdditionalExtensionsRegistry = {
+  isEnabled: (disabledExtensions: TExtensions[], flaggedExtensions: TExtensions[]) => boolean;
+  getExtension: (props: TDocumentEditorAdditionalExtensionsProps) => AnyExtension;
+};
+
+const extensionRegistry: TDocumentEditorAdditionalExtensionsRegistry[] = [
+  {
+    isEnabled: (disabledExtensions) => !disabledExtensions.includes("slash-commands"),
+    getExtension: ({ disabledExtensions, flaggedExtensions }) =>
+      SlashCommands({ disabledExtensions, flaggedExtensions }),
+  },
+];
+
+export function DocumentEditorAdditionalExtensions(props: TDocumentEditorAdditionalExtensionsProps) {
+  const { disabledExtensions, flaggedExtensions } = props;
+
+  const documentExtensions = extensionRegistry
+    .filter((config) => config.isEnabled(disabledExtensions, flaggedExtensions))
+    .map((config) => config.getExtension(props));
+
+  return documentExtensions;
+}
diff --git a/packages/editor/src/extensions/emoji/components/emojis-list.tsx b/packages/editor/src/extensions/emoji/components/emojis-list.tsx
new file mode 100644
index 0000000..318979b
--- /dev/null
+++ b/packages/editor/src/extensions/emoji/components/emojis-list.tsx
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { FloatingOverlay } from "@floating-ui/react";
+import type { SuggestionKeyDownProps, SuggestionProps } from "@tiptap/suggestion";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+import { cn } from "@plane/utils";
+
+export type EmojiItem = {
+  name: string;
+  emoji: string;
+  shortcodes: string[];
+  tags: string[];
+};
+
+export type EmojiListRef = {
+  onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+};
+
+export type EmojisListDropdownProps = SuggestionProps<EmojiItem, { name: string }> & {
+  onClose: () => void;
+  forceOpen?: boolean;
+};
+
+export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
+  props: EmojisListDropdownProps,
+  ref: React.ForwardedRef<EmojiListRef>
+) {
+  const { items, command, query, onClose, forceOpen = false } = props;
+  // states
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+  const [isVisible, setIsVisible] = useState(false);
+  // refs
+  const dropdownContainerRef = useRef<HTMLDivElement>(null);
+
+  const selectItem = useCallback(
+    (index: number): void => {
+      const item = items[index];
+      if (item) {
+        command({ name: item.name });
+      }
+    },
+    [command, items]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent): boolean => {
+      // Allow keyboard navigation if we have items to show
+      if (items.length === 0) {
+        return false;
+      }
+
+      // Don't handle keyboard if modal shouldn't be visible (query empty without forceOpen)
+      if (query.length === 0 && !forceOpen) {
+        return false;
+      }
+
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((prev) => (prev + items.length - 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((prev) => (prev + 1) % items.length);
+        return true;
+      }
+
+      if (event.key === "Enter") {
+        selectItem(selectedIndex);
+        return true;
+      }
+
+      return false;
+    },
+    [items.length, query.length, forceOpen, selectItem, selectedIndex]
+  );
+
+  // Show animation
+  useEffect(() => {
+    setIsVisible(false);
+    const timeout = setTimeout(() => setIsVisible(true), 50);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  // Reset selection when items change
+  useEffect(() => setSelectedIndex(0), [items]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    const container = dropdownContainerRef.current;
+    if (!container) return;
+
+    const item = container.querySelector(`#emoji-item-${selectedIndex}`) as HTMLElement;
+    if (item) {
+      const containerRect = container.getBoundingClientRect();
+      const itemRect = item.getBoundingClientRect();
+
+      if (itemRect.top < containerRect.top || itemRect.bottom > containerRect.bottom) {
+        item.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [selectedIndex]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      onKeyDown: ({ event }: SuggestionKeyDownProps): boolean => handleKeyDown(event),
+    }),
+    [handleKeyDown]
+  );
+
+  useOutsideClickDetector(dropdownContainerRef, onClose);
+
+  if (query.length === 0 && !forceOpen) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <FloatingOverlay
+        style={{
+          zIndex: 99,
+        }}
+        lockScroll
+      />
+      <div
+        ref={dropdownContainerRef}
+        className={cn(
+          "invisible relative max-h-80 w-[14rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 opacity-0 shadow-raised-200 transition-opacity",
+          {
+            "visible opacity-100": isVisible,
+          }
+        )}
+        style={{
+          zIndex: 100,
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onMouseDown={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {items.length ? (
+          items.map((item, index) => {
+            const isSelected = index === selectedIndex;
+            const emojiKey = item.shortcodes.join(" - ");
+
+            return (
+              <button
+                key={emojiKey}
+                id={`emoji-item-${index}`}
+                type="button"
+                className={cn(
+                  "flex w-full items-center gap-2 truncate rounded-sm px-2 py-1.5 text-left text-13 text-secondary transition-colors duration-150 hover:bg-layer-1-hover",
+                  {
+                    "bg-layer-1-hover": isSelected,
+                  }
+                )}
+                onClick={() => selectItem(index)}
+                onMouseEnter={() => setSelectedIndex(index)}
+              >
+                <span className="grid size-5 flex-shrink-0 place-items-center text-14">{item.emoji}</span>
+                <span className="flex-grow truncate">
+                  <span className="font-medium">:{item.name}:</span>
+                </span>
+              </button>
+            );
+          })
+        ) : (
+          <div className="py-2 text-center text-13 text-placeholder">No emojis found</div>
+        )}
+      </div>
+    </>
+  );
+});
+
+EmojisListDropdown.displayName = "EmojisListDropdown";
diff --git a/packages/editor/src/extensions/emoji/emoji.ts b/packages/editor/src/extensions/emoji/emoji.ts
new file mode 100644
index 0000000..63d0ee9
--- /dev/null
+++ b/packages/editor/src/extensions/emoji/emoji.ts
@@ -0,0 +1,455 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  combineTransactionSteps,
+  escapeForRegEx,
+  findChildrenInRange,
+  getChangedRanges,
+  InputRule,
+  mergeAttributes,
+  Node,
+  nodeInputRule,
+  PasteRule,
+  removeDuplicates,
+} from "@tiptap/core";
+import type { EmojiStorage } from "@tiptap/extension-emoji";
+import { emojis, emojiToShortcode, shortcodeToEmoji } from "@tiptap/extension-emoji";
+import { Fragment } from "@tiptap/pm/model";
+import type { Transaction } from "@tiptap/pm/state";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import type { SuggestionOptions } from "@tiptap/suggestion";
+import Suggestion from "@tiptap/suggestion";
+import emojiRegex from "emoji-regex";
+import { isEmojiSupported } from "is-emoji-supported";
+// helpers
+import { customFindSuggestionMatch } from "@/helpers/find-suggestion-match";
+
+// Extended storage type to include our custom forceOpen flag
+export interface ExtendedEmojiStorage extends EmojiStorage {
+  forceOpen: boolean;
+}
+
+export type EmojiItem = {
+  /**
+   * A unique name of the emoji which will be stored as attribute
+   */
+  name: string;
+  /**
+   * The emoji unicode character
+   */
+  emoji?: string;
+  /**
+   * A list of unique shortcodes that are used by input rules to find the emoji
+   */
+  shortcodes: string[];
+  /**
+   * A list of tags that can help for searching emojis
+   */
+  tags: string[];
+  /**
+   * A name that can help to group emojis
+   */
+  group?: string;
+  /**
+   * A list of unique emoticons
+   */
+  emoticons?: string[];
+  /**
+   * The unicode version the emoji was introduced
+   */
+  version?: number;
+  /**
+   * A fallback image if the current system doesn't support the emoji or for custom emojis
+   */
+  fallbackImage?: string;
+  /**
+   * Store some custom data
+   */
+  [key: string]: unknown;
+};
+
+export type EmojiOptions = {
+  HTMLAttributes: Record<string, unknown>;
+  emojis: EmojiItem[];
+  enableEmoticons: boolean;
+  forceFallbackImages: boolean;
+  suggestion: Omit<SuggestionOptions, "editor">;
+};
+
+export const EmojiSuggestionPluginKey = new PluginKey("emojiSuggestion");
+
+export const inputRegex = /:([a-zA-Z0-9_+-]+):$/;
+
+export const pasteRegex = /:([a-zA-Z0-9_+-]+):/g;
+
+export const Emoji = Node.create<EmojiOptions, EmojiStorage>({
+  name: "emoji",
+
+  inline: true,
+
+  group: "inline",
+
+  selectable: false,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      // emojis: ,
+      emojis: emojis,
+      enableEmoticons: false,
+      forceFallbackImages: false,
+      suggestion: {
+        char: ":",
+        pluginKey: EmojiSuggestionPluginKey,
+        command: ({ editor, range, props }) => {
+          // increase range.to by one when the next node is of type "text"
+          // and starts with a space character
+          const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+          const overrideSpace = nodeAfter?.text?.startsWith(" ");
+
+          if (overrideSpace) {
+            range.to += 1;
+          }
+
+          editor
+            .chain()
+            .focus()
+            .command(({ tr, state, dispatch }) => {
+              if (!dispatch) return true;
+
+              const { schema } = state;
+              const emojiNode = schema.nodes[this.name].create(props);
+              const spaceNode = schema.text(" ");
+
+              const fragment = Fragment.from([emojiNode, spaceNode]);
+
+              tr.replaceWith(range.from, range.to, fragment);
+
+              const newPos = range.from + fragment.size;
+              tr.setSelection(TextSelection.near(tr.doc.resolve(newPos)));
+
+              tr.setStoredMarks(tr.doc.resolve(range.from).marks());
+
+              return true;
+            })
+            .run();
+        },
+        allow: ({ state, range }) => {
+          const $from = state.doc.resolve(range.from);
+          const type = state.schema.nodes[this.name];
+          const allow = !!$from.parent.type.contentMatch.matchType(type);
+
+          return allow;
+        },
+      },
+    };
+  },
+
+  addStorage() {
+    const { emojis } = this.options;
+    const supportMap: Record<number, boolean> = removeDuplicates(emojis.map((item) => item.version))
+      .filter((version) => typeof version === "number")
+      .reduce((versions, version) => {
+        const emoji = emojis.find((item) => item.version === version && item.emoji);
+
+        return {
+          ...versions,
+          [version]: emoji ? isEmojiSupported(emoji.emoji as string) : false,
+        };
+      }, {});
+
+    return {
+      emojis: this.options.emojis,
+      isSupported: (emojiItem) => (emojiItem.version ? supportMap[emojiItem.version] : false),
+      forceOpen: false,
+    };
+  },
+
+  addAttributes() {
+    return {
+      name: {
+        default: null,
+        parseHTML: (element) => element.dataset.name,
+        renderHTML: (attributes) => ({
+          "data-name": attributes.name,
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `span[data-type="${this.name}"]`,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes, node }) {
+    const emojiItem = shortcodeToEmoji(node.attrs.name, this.options.emojis);
+    const attributes = mergeAttributes(HTMLAttributes, this.options.HTMLAttributes, { "data-type": this.name });
+
+    if (!emojiItem) {
+      return ["span", attributes, `:${node.attrs.name}:`];
+    }
+
+    const renderFallbackImage = false;
+
+    return [
+      "span",
+      attributes,
+      renderFallbackImage
+        ? [
+            "img",
+            {
+              src: emojiItem.fallbackImage,
+              draggable: "false",
+              loading: "lazy",
+              align: "absmiddle",
+            },
+          ]
+        : emojiItem.emoji || `:${emojiItem.shortcodes[0]}:`,
+    ];
+  },
+
+  renderText({ node }) {
+    const emojiItem = shortcodeToEmoji(node.attrs.name, this.options.emojis);
+
+    return emojiItem?.emoji || `:${node.attrs.name}:`;
+  },
+
+  addCommands() {
+    return {
+      setEmoji:
+        (shortcode) =>
+        ({ chain }) => {
+          const emojiItem = shortcodeToEmoji(shortcode, this.options.emojis);
+
+          if (!emojiItem) {
+            return false;
+          }
+
+          chain()
+            .insertContent({
+              type: this.name,
+              attrs: {
+                name: emojiItem.name,
+              },
+            })
+            .command(({ tr, state }) => {
+              tr.setStoredMarks(state.doc.resolve(state.selection.to - 1).marks());
+              return true;
+            })
+            .run();
+
+          return true;
+        },
+    };
+  },
+
+  addInputRules() {
+    const inputRules: InputRule[] = [];
+
+    inputRules.push(
+      new InputRule({
+        find: inputRegex,
+        handler: ({ range, match, chain }) => {
+          const name = match[1];
+
+          if (!shortcodeToEmoji(name, this.options.emojis)) {
+            return;
+          }
+
+          chain()
+            .insertContentAt(range, {
+              type: this.name,
+              attrs: {
+                name,
+              },
+            })
+            .command(({ tr, state }) => {
+              tr.setStoredMarks(state.doc.resolve(state.selection.to - 1).marks());
+              return true;
+            })
+            .run();
+        },
+      })
+    );
+
+    if (this.options.enableEmoticons) {
+      // get the list of supported emoticons
+      const emoticons = this.options.emojis
+        .map((item) => item.emoticons)
+        .flat()
+        .filter((item) => item) as string[];
+
+      const emoticonRegex = new RegExp(`(?:^|\\s)(${emoticons.map((item) => escapeForRegEx(item)).join("|")}) $`);
+
+      inputRules.push(
+        nodeInputRule({
+          find: emoticonRegex,
+          type: this.type,
+          getAttributes: (match) => {
+            const emoji = this.options.emojis.find((item) => item.emoticons?.includes(match[1]));
+
+            if (!emoji) {
+              return;
+            }
+
+            return {
+              name: emoji.name,
+            };
+          },
+        })
+      );
+    }
+
+    return inputRules;
+  },
+
+  addPasteRules() {
+    return [
+      new PasteRule({
+        find: pasteRegex,
+        handler: ({ range, match, chain }) => {
+          const name = match[1];
+
+          if (!shortcodeToEmoji(name, this.options.emojis)) {
+            return;
+          }
+
+          chain()
+            .insertContentAt(
+              range,
+              {
+                type: this.name,
+                attrs: {
+                  name,
+                },
+              },
+              {
+                updateSelection: false,
+              }
+            )
+            .command(({ tr, state }) => {
+              tr.setStoredMarks(state.doc.resolve(state.selection.to - 1).marks());
+              return true;
+            })
+            .run();
+        },
+      }),
+    ];
+  },
+
+  addProseMirrorPlugins() {
+    const isTouchDevice = !!this.editor.storage.utility.isTouchDevice;
+    if (isTouchDevice) {
+      return [];
+    }
+    return [
+      Suggestion({
+        editor: this.editor,
+        findSuggestionMatch: customFindSuggestionMatch,
+        ...this.options.suggestion,
+      }),
+
+      new Plugin({
+        key: new PluginKey("emoji"),
+        props: {
+          // double click to select emoji doesn’t work by default
+          // that’s why we simulate this behavior
+          handleDoubleClickOn: (view, pos, node) => {
+            if (node.type !== this.type) {
+              return false;
+            }
+
+            const from = pos;
+            const to = from + node.nodeSize;
+
+            this.editor.commands.setTextSelection({
+              from,
+              to,
+            });
+
+            return true;
+          },
+        },
+
+        // replace text emojis with emoji node on any change
+        appendTransaction: (transactions, oldState, newState) => {
+          const docChanges =
+            transactions.some((transaction) => transaction.docChanged) && !oldState.doc.eq(newState.doc);
+
+          if (!docChanges) {
+            return;
+          }
+
+          const { tr } = newState;
+          const transform = combineTransactionSteps(oldState.doc, transactions as Transaction[]);
+          const changes = getChangedRanges(transform);
+
+          changes.forEach(({ newRange }) => {
+            // We don’t want to add emoji inline nodes within code blocks.
+            // Because this would split the code block.
+
+            // This only works if the range of changes is within a code node.
+            // For all other cases (e.g. the whole document is set/pasted and the parent of the range is `doc`)
+            // it doesn't and we have to double check later.
+            if (newState.doc.resolve(newRange.from).parent.type.spec.code) {
+              return;
+            }
+
+            const textNodes = findChildrenInRange(newState.doc, newRange, (node) => node.type.isText);
+
+            textNodes.forEach(({ node, pos }) => {
+              if (!node.text) {
+                return;
+              }
+
+              const matches = [...node.text.matchAll(emojiRegex())];
+
+              matches.forEach((match) => {
+                if (match.index === undefined) {
+                  return;
+                }
+
+                const emoji = match[0];
+                const name = emojiToShortcode(emoji, this.options.emojis);
+
+                if (!name) {
+                  return;
+                }
+
+                const from = tr.mapping.map(pos + match.index);
+
+                // Double check parent node is not a code block.
+                if (newState.doc.resolve(from).parent.type.spec.code) {
+                  return;
+                }
+
+                const to = from + emoji.length;
+                const emojiNode = this.type.create({
+                  name,
+                });
+
+                tr.replaceRangeWith(from, to, emojiNode);
+
+                tr.setStoredMarks(newState.doc.resolve(from).marks());
+              });
+            });
+          });
+
+          if (!tr.steps.length) {
+            return;
+          }
+
+          return tr;
+        },
+      }),
+    ];
+  },
+});
diff --git a/packages/editor/src/extensions/emoji/extension.ts b/packages/editor/src/extensions/emoji/extension.ts
new file mode 100644
index 0000000..470fb6d
--- /dev/null
+++ b/packages/editor/src/extensions/emoji/extension.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import { gitHubEmojis, shortcodeToEmoji } from "@tiptap/extension-emoji";
+import type { MarkdownSerializerState } from "@tiptap/pm/markdown";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Emoji } from "./emoji";
+import { emojiSuggestion } from "./suggestion";
+
+export const EmojiExtension = Emoji.extend({
+  addStorage() {
+    const extensionOptions = this.options;
+
+    return {
+      ...this.parent?.(),
+      markdown: {
+        serialize(state: MarkdownSerializerState, node: ProseMirrorNode) {
+          const emojiItem = shortcodeToEmoji(node.attrs.name, extensionOptions.emojis);
+          if (emojiItem?.emoji) {
+            state.write(emojiItem?.emoji);
+          } else {
+            state.write(`:${node.attrs.name}:`);
+          }
+        },
+      },
+    };
+  },
+}).configure({
+  // Filter out emojis without emoji value and remove fallbackImage property to prevent CDN calls
+
+  emojis: gitHubEmojis.filter((item) => item.emoji).map(({ fallbackImage, ...emoji }) => emoji),
+  suggestion: emojiSuggestion,
+  enableEmoticons: true,
+});
diff --git a/packages/editor/src/extensions/emoji/suggestion.ts b/packages/editor/src/extensions/emoji/suggestion.ts
new file mode 100644
index 0000000..99968ca
--- /dev/null
+++ b/packages/editor/src/extensions/emoji/suggestion.ts
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EmojiOptions, EmojiStorage } from "@tiptap/extension-emoji";
+import { ReactRenderer } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { updateFloatingUIFloaterPosition } from "@/helpers/floating-ui";
+import type { CommandListInstance } from "@/helpers/tippy";
+import { DROPDOWN_NAVIGATION_KEYS } from "@/helpers/tippy";
+// local imports
+import { EmojisListDropdown } from "./components/emojis-list";
+import type { EmojisListDropdownProps, EmojiItem } from "./components/emojis-list";
+import type { ExtendedEmojiStorage } from "./emoji";
+
+const DEFAULT_EMOJIS = ["+1", "-1", "smile", "orange_heart", "eyes"];
+
+export const emojiSuggestion: EmojiOptions["suggestion"] = {
+  items: ({ editor, query }: { editor: Editor; query: string }): EmojiItem[] => {
+    const { emojis } = editor.storage.emoji as EmojiStorage;
+
+    if (query.trim() === "") {
+      const defaultEmojis = DEFAULT_EMOJIS.map((name) =>
+        emojis.find((emoji) => emoji.shortcodes.includes(name) || emoji.name === name)
+      )
+        .filter(Boolean)
+        .slice(0, 5);
+      return defaultEmojis as EmojiItem[];
+    }
+    return emojis
+      .filter(({ shortcodes, tags }) => {
+        const lowerQuery = query.toLowerCase();
+        return (
+          shortcodes.find((shortcode: string) => shortcode.startsWith(lowerQuery)) ||
+          tags.find((tag: string) => tag.startsWith(lowerQuery))
+        );
+      })
+      .slice(0, 5) as EmojiItem[];
+  },
+
+  allowSpaces: false,
+
+  render: () => {
+    let component: ReactRenderer<CommandListInstance, EmojisListDropdownProps> | null = null;
+    let cleanup: () => void = () => {};
+    let editorRef: Editor | null = null;
+
+    const handleClose = (editor?: Editor) => {
+      component?.destroy();
+      component = null;
+      (editor || editorRef)?.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.EMOJI);
+      const emojiStorage = editor?.storage.emoji as ExtendedEmojiStorage;
+      emojiStorage.forceOpen = false;
+      cleanup();
+    };
+
+    return {
+      onStart: (props) => {
+        editorRef = props.editor;
+        const emojiStorage = props.editor.storage.emoji as ExtendedEmojiStorage;
+        const forceOpen = emojiStorage.forceOpen || false;
+        component = new ReactRenderer<CommandListInstance, EmojisListDropdownProps>(EmojisListDropdown, {
+          props: {
+            ...props,
+            onClose: () => handleClose(props.editor),
+            forceOpen,
+          } satisfies EmojisListDropdownProps,
+          editor: props.editor,
+          className: "fixed z-[100]",
+        });
+        if (!props.clientRect) return;
+        props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.EMOJI);
+        const element = component.element as HTMLElement;
+        cleanup = updateFloatingUIFloaterPosition(props.editor, element).cleanup;
+      },
+
+      onUpdate: (props) => {
+        if (!component || !component.element) return;
+        const emojiStorage = props.editor.storage.emoji as ExtendedEmojiStorage;
+        const forceOpen = emojiStorage.forceOpen || false;
+        component.updateProps({ ...props, forceOpen });
+        if (!props.clientRect) return;
+        cleanup();
+        cleanup = updateFloatingUIFloaterPosition(props.editor, component.element as HTMLElement).cleanup;
+      },
+      onKeyDown: ({ event }) => {
+        if ([...DROPDOWN_NAVIGATION_KEYS, "Escape"].includes(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
+        if (event.key === "Escape") {
+          handleClose();
+          return true;
+        }
+
+        return component?.ref?.onKeyDown({ event }) ?? false;
+      },
+
+      onExit: ({ editor }) => {
+        component?.element.remove();
+        handleClose(editor);
+      },
+    };
+  },
+};
diff --git a/packages/editor/src/extensions/enter-key.ts b/packages/editor/src/extensions/enter-key.ts
new file mode 100644
index 0000000..bfe86b1
--- /dev/null
+++ b/packages/editor/src/extensions/enter-key.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Extension } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
+  Extension.create({
+    name: CORE_EXTENSIONS.ENTER_KEY,
+
+    addKeyboardShortcuts(this) {
+      return {
+        Enter: () => {
+          const { activeDropbarExtensions } = this.editor.storage.utility;
+
+          if (activeDropbarExtensions.length === 0) {
+            onEnterKeyPress?.();
+            return true;
+          }
+
+          return false;
+        },
+        "Shift-Enter": ({ editor }) =>
+          editor.commands.first(({ commands }) => [
+            () => commands.newlineInCode(),
+            () => commands.splitListItem(CORE_EXTENSIONS.LIST_ITEM),
+            () => commands.splitListItem(CORE_EXTENSIONS.TASK_ITEM),
+            () => commands.createParagraphNear(),
+            () => commands.liftEmptyBlock(),
+            () => commands.splitBlock(),
+          ]),
+      };
+    },
+  });
diff --git a/packages/editor/src/extensions/extensions.ts b/packages/editor/src/extensions/extensions.ts
new file mode 100644
index 0000000..90649bc
--- /dev/null
+++ b/packages/editor/src/extensions/extensions.ts
@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { Extensions } from "@tiptap/core";
+import { CharacterCount } from "@tiptap/extension-character-count";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Underline } from "@tiptap/extension-underline";
+import { Markdown } from "tiptap-markdown";
+// extensions
+import {
+  CustomCalloutExtension,
+  CustomCodeBlockExtension,
+  CustomCodeInlineExtension,
+  CustomColorExtension,
+  CustomHorizontalRule,
+  CustomKeymap,
+  CustomLinkExtension,
+  CustomMentionExtension,
+  CustomQuoteExtension,
+  CustomTextAlignExtension,
+  CustomTypographyExtension,
+  ImageExtension,
+  ListKeymap,
+  Table,
+  TableCell,
+  TableHeader,
+  TableRow,
+  UtilityExtension,
+} from "@/extensions";
+// plane editor extensions
+import { CoreEditorAdditionalExtensions } from "@/extensions/core";
+// types
+import type { IEditorProps } from "@/types";
+// local imports
+import { CustomImageExtension } from "./custom-image/extension";
+import { EmojiExtension } from "./emoji/extension";
+import { CustomPlaceholderExtension } from "./placeholder";
+import { CustomStarterKitExtension } from "./starter-kit";
+import { UniqueID } from "./unique-id/extension";
+
+type TArguments = Pick<
+  IEditorProps,
+  | "disabledExtensions"
+  | "flaggedExtensions"
+  | "fileHandler"
+  | "getEditorMetaData"
+  | "isTouchDevice"
+  | "mentionHandler"
+  | "placeholder"
+  | "showPlaceholderOnEmpty"
+  | "tabIndex"
+  | "extendedEditorProps"
+> & {
+  enableHistory: boolean;
+  editable: boolean;
+  provider: HocuspocusProvider | undefined;
+};
+
+export const CoreEditorExtensions = (args: TArguments): Extensions => {
+  const {
+    disabledExtensions,
+    enableHistory,
+    fileHandler,
+    flaggedExtensions,
+    getEditorMetaData,
+    isTouchDevice = false,
+    mentionHandler,
+    placeholder,
+    showPlaceholderOnEmpty,
+    tabIndex,
+    editable,
+    extendedEditorProps,
+    provider,
+  } = args;
+
+  const extensions = [
+    CustomStarterKitExtension({
+      enableHistory,
+    }),
+    EmojiExtension,
+    CustomQuoteExtension,
+    CustomHorizontalRule,
+    CustomKeymap,
+    ListKeymap({ tabIndex }),
+    CustomLinkExtension,
+    CustomTypographyExtension,
+    Underline,
+    TextStyle,
+    TaskList.configure({
+      HTMLAttributes: {
+        class: "not-prose pl-2 space-y-2",
+      },
+    }),
+    TaskItem.configure({
+      HTMLAttributes: {
+        class: "relative",
+      },
+      nested: true,
+    }),
+    CustomCodeBlockExtension,
+    CustomCodeInlineExtension,
+    Markdown.configure({
+      html: true,
+      transformCopiedText: false,
+      transformPastedText: true,
+      breaks: true,
+    }),
+    Table,
+    TableHeader,
+    TableCell,
+    TableRow,
+    CustomMentionExtension(mentionHandler),
+    CustomPlaceholderExtension({ placeholder, showPlaceholderOnEmpty }),
+    CharacterCount,
+    CustomColorExtension,
+    CustomTextAlignExtension,
+    CustomCalloutExtension,
+    UtilityExtension({
+      disabledExtensions,
+      flaggedExtensions,
+      fileHandler,
+      getEditorMetaData,
+      isEditable: editable,
+      isTouchDevice,
+    }),
+    ...CoreEditorAdditionalExtensions({
+      disabledExtensions,
+      flaggedExtensions,
+      fileHandler,
+      extendedEditorProps,
+    }),
+    UniqueID.configure({
+      provider,
+    }),
+  ];
+
+  if (!disabledExtensions.includes("image")) {
+    extensions.push(
+      ImageExtension({
+        fileHandler,
+      }),
+      CustomImageExtension({
+        fileHandler,
+        isEditable: editable,
+      })
+    );
+  }
+
+  return extensions;
+};
diff --git a/packages/editor/src/extensions/headings-list.ts b/packages/editor/src/extensions/headings-list.ts
new file mode 100644
index 0000000..30b3dd4
--- /dev/null
+++ b/packages/editor/src/extensions/headings-list.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// types
+import type { IMarking } from "@/types";
+
+export type HeadingExtensionStorage = {
+  headings: IMarking[];
+};
+
+declare module "@tiptap/core" {
+  interface Storage {
+    [CORE_EXTENSIONS.HEADINGS_LIST]: HeadingExtensionStorage;
+  }
+}
+
+export const HeadingListExtension = Extension.create<unknown, HeadingExtensionStorage>({
+  name: CORE_EXTENSIONS.HEADINGS_LIST,
+
+  addStorage() {
+    return {
+      headings: [] as IMarking[],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const plugin = new Plugin({
+      key: new PluginKey("heading-list"),
+      appendTransaction: (_, __, newState) => {
+        const headings: IMarking[] = [];
+        let h1Sequence = 0;
+        let h2Sequence = 0;
+        let h3Sequence = 0;
+
+        newState.doc.descendants((node) => {
+          if (node.type.name === "heading") {
+            const level = node.attrs.level;
+            const text = node.textContent;
+
+            headings.push({
+              type: "heading",
+              level: level,
+              text: text,
+              sequence: level === 1 ? ++h1Sequence : level === 2 ? ++h2Sequence : ++h3Sequence,
+            });
+          }
+        });
+
+        this.storage.headings = headings;
+
+        this.editor.emit("update", {
+          editor: this.editor,
+          transaction: newState.tr,
+        });
+
+        return null;
+      },
+    });
+
+    return [plugin];
+  },
+
+  getHeadings() {
+    return this.storage.headings;
+  },
+});
diff --git a/packages/editor/src/extensions/horizontal-rule.ts b/packages/editor/src/extensions/horizontal-rule.ts
new file mode 100644
index 0000000..a442bc9
--- /dev/null
+++ b/packages/editor/src/extensions/horizontal-rule.ts
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isNodeSelection, mergeAttributes, Node, nodeInputRule } from "@tiptap/core";
+import { NodeSelection, TextSelection } from "@tiptap/pm/state";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+type HorizontalRuleOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    [CORE_EXTENSIONS.HORIZONTAL_RULE]: {
+      /**
+       * Add a horizontal rule
+       */
+      setHorizontalRule: () => ReturnType;
+    };
+  }
+}
+
+export const CustomHorizontalRule = Node.create<HorizontalRuleOptions>({
+  name: CORE_EXTENSIONS.HORIZONTAL_RULE,
+  group: "block",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: "py-4 border-strong-1",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`,
+      },
+      { tag: "hr" },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": this.name,
+      }),
+      ["div", {}],
+    ];
+  },
+
+  addCommands() {
+    return {
+      setHorizontalRule:
+        () =>
+        ({ chain, state }) => {
+          const { selection } = state;
+          const { $from: $originFrom, $to: $originTo } = selection;
+
+          const currentChain = chain();
+
+          if ($originFrom.parentOffset === 0) {
+            currentChain.insertContentAt(
+              {
+                from: Math.max($originFrom.pos - 1, 0),
+                to: $originTo.pos,
+              },
+              {
+                type: this.name,
+              }
+            );
+          } else if (isNodeSelection(selection)) {
+            currentChain.insertContentAt($originTo.pos, {
+              type: this.name,
+            });
+          } else {
+            currentChain.insertContent({ type: this.name });
+          }
+
+          return (
+            currentChain
+              // set cursor after horizontal rule
+              .command(({ tr, dispatch }) => {
+                if (dispatch) {
+                  const { $to } = tr.selection;
+                  const posAfter = $to.end();
+
+                  if ($to.nodeAfter) {
+                    if ($to.nodeAfter.isTextblock) {
+                      tr.setSelection(TextSelection.create(tr.doc, $to.pos + 1));
+                    } else if ($to.nodeAfter.isBlock) {
+                      tr.setSelection(NodeSelection.create(tr.doc, $to.pos));
+                    } else {
+                      tr.setSelection(TextSelection.create(tr.doc, $to.pos));
+                    }
+                  } else {
+                    // add node after horizontal rule if it’s the end of the document
+                    const node = $to.parent.type.contentMatch.defaultType?.create();
+
+                    if (node) {
+                      tr.insert(posAfter, node);
+                      tr.setSelection(TextSelection.create(tr.doc, posAfter + 1));
+                    }
+                  }
+
+                  tr.scrollIntoView();
+                }
+
+                return true;
+              })
+              .run()
+          );
+        },
+    };
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+        type: this.type,
+      }),
+    ];
+  },
+});
diff --git a/packages/editor/src/extensions/image/extension-config.tsx b/packages/editor/src/extensions/image/extension-config.tsx
new file mode 100644
index 0000000..8ac83c8
--- /dev/null
+++ b/packages/editor/src/extensions/image/extension-config.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Image as BaseImageExtension } from "@tiptap/extension-image";
+// local imports
+import type { CustomImageExtensionOptions } from "../custom-image/types";
+import type { ImageExtensionStorage } from "./extension";
+
+export const ImageExtensionConfig = BaseImageExtension.extend<
+  Pick<CustomImageExtensionOptions, "getImageSource">,
+  ImageExtensionStorage
+>({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      width: {
+        default: "35%",
+      },
+      height: {
+        default: null,
+      },
+      aspectRatio: {
+        default: null,
+      },
+      alignment: {
+        default: "left",
+      },
+    };
+  },
+});
diff --git a/packages/editor/src/extensions/image/extension.tsx b/packages/editor/src/extensions/image/extension.tsx
new file mode 100644
index 0000000..ddec929
--- /dev/null
+++ b/packages/editor/src/extensions/image/extension.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ReactNodeViewRenderer } from "@tiptap/react";
+// constants
+import type { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
+// types
+import type { TFileHandler } from "@/types";
+// local imports
+import type { CustomImageNodeViewProps } from "../custom-image/components/node-view";
+import { CustomImageNodeView } from "../custom-image/components/node-view";
+import { ImageExtensionConfig } from "./extension-config";
+
+declare module "@tiptap/core" {
+  interface Storage {
+    [CORE_EXTENSIONS.IMAGE]: ImageExtensionStorage;
+  }
+}
+
+export type ImageExtensionStorage = {
+  deletedImageSet: Map<string, boolean>;
+};
+
+type Props = {
+  fileHandler: TFileHandler;
+};
+
+export function ImageExtension(props: Props) {
+  const { fileHandler } = props;
+  // derived values
+  const { getAssetSrc } = fileHandler;
+
+  return ImageExtensionConfig.extend({
+    addOptions() {
+      return {
+        ...this.parent?.(),
+        getImageSource: getAssetSrc,
+      };
+    },
+
+    addKeyboardShortcuts() {
+      return {
+        ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
+        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
+      };
+    },
+
+    // storage to keep track of image states Map<src, isDeleted>
+    addStorage() {
+      const maxFileSize = "validation" in fileHandler ? fileHandler.validation?.maxFileSize : 0;
+
+      return {
+        deletedImageSet: new Map<string, boolean>(),
+        maxFileSize,
+      };
+    },
+
+    // render custom image node
+    addNodeView() {
+      return ReactNodeViewRenderer((props) => (
+        <CustomImageNodeView {...props} node={props.node as CustomImageNodeViewProps["node"]} />
+      ));
+    },
+  });
+}
diff --git a/packages/editor/src/extensions/image/index.ts b/packages/editor/src/extensions/image/index.ts
new file mode 100644
index 0000000..1bfe6f3
--- /dev/null
+++ b/packages/editor/src/extensions/image/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./extension";
+export * from "./extension-config";
diff --git a/packages/editor/src/extensions/index.ts b/packages/editor/src/extensions/index.ts
new file mode 100644
index 0000000..96d01a7
--- /dev/null
+++ b/packages/editor/src/extensions/index.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./callout";
+export * from "./code";
+export * from "./code-inline";
+export * from "./custom-link";
+export * from "./custom-list-keymap";
+export * from "./image";
+export * from "./mentions";
+export * from "./slash-commands";
+export * from "./table";
+export * from "./typography";
+export * from "./work-item-embed";
+export * from "./core-without-props";
+export * from "./custom-color";
+export * from "./enter-key";
+export * from "./extensions";
+export * from "./headings-list";
+export * from "./horizontal-rule";
+export * from "./keymap";
+export * from "./quote";
+export * from "./side-menu";
+export * from "./text-align";
+export * from "./utility";
+export * from "./core";
+export * from "./document-extensions";
+export * from "./additional-slash-command-options";
diff --git a/packages/editor/src/extensions/keymap.ts b/packages/editor/src/extensions/keymap.ts
new file mode 100644
index 0000000..85e13a4
--- /dev/null
+++ b/packages/editor/src/extensions/keymap.ts
@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Extension } from "@tiptap/core";
+import type { NodeType } from "@tiptap/pm/model";
+import type { Transaction } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { canJoin } from "@tiptap/pm/transform";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    customKeymap: {
+      /**
+       * Select text between node boundaries
+       */
+      selectTextWithinNodeBoundaries: () => ReturnType;
+    };
+  }
+}
+
+function collectRanges(transactions: readonly Transaction[]): Array<number> {
+  const ranges: Array<number> = [];
+  for (const tr of transactions) {
+    for (let i = 0; i < tr.mapping.maps.length; i++) {
+      const map = tr.mapping.maps[i];
+      map.forEach((_s, _e, from, to) => ranges.push(from, to));
+    }
+  }
+  return ranges;
+}
+
+function autoJoin(ranges: Array<number>, newTr: Transaction, nodeTypes: NodeType[]) {
+  const doc = newTr.doc;
+  // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+  const joinable: number[] = [];
+  for (let i = 0; i < ranges.length; i += 2) {
+    const from = ranges[i],
+      to = ranges[i + 1];
+    if (from >= doc.content.size) continue;
+    const $from = doc.resolve(from),
+      depth = $from.sharedDepth(to),
+      parent = $from.node(depth);
+    for (let index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
+      const after = parent.maybeChild(index);
+      if (!after) break;
+      if (index && joinable.indexOf(pos) == -1) {
+        const before = parent.child(index - 1);
+        if (before.type == after.type && nodeTypes.includes(before.type)) joinable.push(pos);
+      }
+      pos += after.nodeSize;
+    }
+  }
+
+  let joined = false;
+
+  // Join the joinable points (reverse order to keep positions stable)
+  joinable.sort((a, b) => a - b);
+  for (let i = joinable.length - 1; i >= 0; i--) {
+    if (canJoin(doc, joinable[i])) {
+      newTr.join(joinable[i]);
+      joined = true;
+    }
+  }
+
+  return joined;
+}
+
+export const CustomKeymap = Extension.create({
+  name: "customKeymap",
+
+  addCommands() {
+    return {
+      selectTextWithinNodeBoundaries:
+        () =>
+        ({ editor, commands }) => {
+          const { state } = editor;
+          const { tr } = state;
+          const startNodePos = tr.selection.$from.start();
+          const endNodePos = tr.selection.$to.end();
+          return commands.setTextSelection({
+            from: startNodePos,
+            to: endNodePos,
+          });
+        },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("ordered-list-merging"),
+        appendTransaction(transactions, oldState, newState) {
+          const newTr = newState.tr;
+
+          const joinableNodes = [
+            newState.schema.nodes[CORE_EXTENSIONS.ORDERED_LIST],
+            newState.schema.nodes[CORE_EXTENSIONS.TASK_LIST],
+            newState.schema.nodes[CORE_EXTENSIONS.BULLET_LIST],
+          ];
+
+          const ranges = collectRanges(transactions);
+          if (ranges.length && autoJoin(ranges, newTr, joinableNodes)) {
+            return newTr;
+          }
+        },
+      }),
+    ];
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-a": ({ editor }) => {
+        const { state } = editor;
+        const { tr } = state;
+        const startSelectionPos = tr.selection.from;
+        const endSelectionPos = tr.selection.to;
+        const startNodePos = tr.selection.$from.start();
+        const endNodePos = tr.selection.$to.end();
+        const isCurrentTextSelectionNotExtendedToNodeBoundaries =
+          startSelectionPos > startNodePos || endSelectionPos < endNodePos;
+
+        if (isCurrentTextSelectionNotExtendedToNodeBoundaries) {
+          // First press: select text within node boundaries
+          editor.chain().selectTextWithinNodeBoundaries().run();
+          return true;
+        } else {
+          editor.commands.selectAll();
+          return true;
+        }
+      },
+    };
+  },
+});
diff --git a/packages/editor/src/extensions/mentions/extension-config.ts b/packages/editor/src/extensions/mentions/extension-config.ts
new file mode 100644
index 0000000..f3c2451
--- /dev/null
+++ b/packages/editor/src/extensions/mentions/extension-config.ts
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { mergeAttributes } from "@tiptap/core";
+import type { MentionOptions } from "@tiptap/extension-mention";
+import Mention from "@tiptap/extension-mention";
+import type { MarkdownSerializerState } from "@tiptap/pm/markdown";
+import type { Node as NodeType } from "@tiptap/pm/model";
+// types
+import type { TMentionHandler } from "@/types";
+// local types
+import type { TMentionComponentAttributes } from "./types";
+import { EMentionComponentAttributeNames } from "./types";
+
+export type TMentionExtensionOptions = MentionOptions & {
+  renderComponent: TMentionHandler["renderComponent"];
+  getMentionedEntityDetails: TMentionHandler["getMentionedEntityDetails"];
+};
+
+export const CustomMentionExtensionConfig = Mention.extend<TMentionExtensionOptions>({
+  addAttributes() {
+    return {
+      [EMentionComponentAttributeNames.ID]: {
+        default: null,
+      },
+      [EMentionComponentAttributeNames.ENTITY_IDENTIFIER]: {
+        default: null,
+      },
+      [EMentionComponentAttributeNames.ENTITY_NAME]: {
+        default: null,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "mention-component",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["mention-component", mergeAttributes(HTMLAttributes)];
+  },
+
+  renderText({ node }) {
+    return getMentionDisplayText(this.options, node);
+  },
+
+  addStorage() {
+    const options = this.options;
+    return {
+      markdown: {
+        serialize(state: MarkdownSerializerState, node: NodeType) {
+          state.write(getMentionDisplayText(options, node));
+        },
+      },
+    };
+  },
+});
+
+function getMentionDisplayText(options: TMentionExtensionOptions, node: NodeType): string {
+  const attrs = node.attrs as TMentionComponentAttributes;
+  const mentionEntityId = attrs[EMentionComponentAttributeNames.ENTITY_IDENTIFIER];
+  const mentionEntityDetails = options.getMentionedEntityDetails?.(mentionEntityId ?? "");
+  return `@${mentionEntityDetails?.display_name ?? attrs[EMentionComponentAttributeNames.ID] ?? mentionEntityId}`;
+}
diff --git a/packages/editor/src/extensions/mentions/extension.tsx b/packages/editor/src/extensions/mentions/extension.tsx
new file mode 100644
index 0000000..7c82b7e
--- /dev/null
+++ b/packages/editor/src/extensions/mentions/extension.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ReactNodeViewRenderer } from "@tiptap/react";
+// types
+import type { TMentionHandler } from "@/types";
+// extension config
+import { CustomMentionExtensionConfig } from "./extension-config";
+// node view
+import type { MentionNodeViewProps } from "./mention-node-view";
+import { MentionNodeView } from "./mention-node-view";
+// utils
+import { renderMentionsDropdown } from "./utils";
+
+export function CustomMentionExtension(props: TMentionHandler) {
+  const { searchCallback, renderComponent, getMentionedEntityDetails } = props;
+  return CustomMentionExtensionConfig.extend({
+    addOptions(this) {
+      return {
+        ...this.parent?.(),
+        renderComponent,
+        getMentionedEntityDetails,
+      };
+    },
+
+    addNodeView() {
+      return ReactNodeViewRenderer((props) => (
+        <MentionNodeView {...props} node={props.node as MentionNodeViewProps["node"]} />
+      ));
+    },
+  }).configure({
+    suggestion: {
+      render: renderMentionsDropdown({
+        searchCallback,
+      }),
+      allowSpaces: true,
+    },
+  });
+}
diff --git a/packages/editor/src/extensions/mentions/index.ts b/packages/editor/src/extensions/mentions/index.ts
new file mode 100644
index 0000000..1bfe6f3
--- /dev/null
+++ b/packages/editor/src/extensions/mentions/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./extension";
+export * from "./extension-config";
diff --git a/packages/editor/src/extensions/mentions/mention-node-view.tsx b/packages/editor/src/extensions/mentions/mention-node-view.tsx
new file mode 100644
index 0000000..ff51aa9
--- /dev/null
+++ b/packages/editor/src/extensions/mentions/mention-node-view.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { NodeViewProps } from "@tiptap/react";
+import { NodeViewWrapper } from "@tiptap/react";
+// extension config
+import type { TMentionExtensionOptions } from "./extension-config";
+// extension types
+import type { TMentionComponentAttributes } from "./types";
+import { EMentionComponentAttributeNames } from "./types";
+
+export type MentionNodeViewProps = NodeViewProps & {
+  node: NodeViewProps["node"] & {
+    attrs: TMentionComponentAttributes;
+  };
+};
+
+export function MentionNodeView(props: MentionNodeViewProps) {
+  const {
+    extension,
+    node: { attrs },
+  } = props;
+
+  return (
+    <NodeViewWrapper key={attrs[EMentionComponentAttributeNames.ID]} className="mention-component inline w-fit">
+      {(extension.options as TMentionExtensionOptions).renderComponent({
+        entity_identifier: attrs[EMentionComponentAttributeNames.ENTITY_IDENTIFIER] ?? "",
+        entity_name: attrs[EMentionComponentAttributeNames.ENTITY_NAME] ?? "user_mention",
+      })}
+    </NodeViewWrapper>
+  );
+}
diff --git a/packages/editor/src/extensions/mentions/mentions-list-dropdown.tsx b/packages/editor/src/extensions/mentions/mentions-list-dropdown.tsx
new file mode 100644
index 0000000..37f7864
--- /dev/null
+++ b/packages/editor/src/extensions/mentions/mentions-list-dropdown.tsx
@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { FloatingOverlay } from "@floating-ui/react";
+import type { SuggestionProps } from "@tiptap/suggestion";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { debounce } from "lodash-es";
+// plane utils
+import { useOutsideClickDetector } from "@plane/hooks";
+import { cn } from "@plane/utils";
+// helpers
+import { DROPDOWN_NAVIGATION_KEYS, getNextValidIndex } from "@/helpers/tippy";
+// types
+import type { TMentionHandler, TMentionSection, TMentionSuggestion } from "@/types";
+
+export type MentionsListDropdownProps = SuggestionProps<TMentionSection, TMentionSuggestion> &
+  Pick<TMentionHandler, "searchCallback"> & {
+    onClose: () => void;
+  };
+
+export const MentionsListDropdown = forwardRef(function MentionsListDropdown(props: MentionsListDropdownProps, ref) {
+  const { command, query, searchCallback, onClose } = props;
+  // states
+  const [sections, setSections] = useState<TMentionSection[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState({
+    section: 0,
+    item: 0,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  // refs
+  const dropdownContainer = useRef<HTMLDivElement>(null);
+
+  const selectItem = useCallback(
+    (sectionIndex: number, itemIndex: number) => {
+      try {
+        const item = sections?.[sectionIndex]?.items?.[itemIndex];
+        const transactionId = uuidv4();
+        if (item) {
+          command({
+            ...item,
+            id: transactionId,
+          });
+        }
+      } catch (error) {
+        console.error("Error selecting mention item:", error);
+      }
+    },
+    [command, sections]
+  );
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+      if (!DROPDOWN_NAVIGATION_KEYS.includes(event.key)) return false;
+
+      if (event.key === "Enter") {
+        selectItem(selectedIndex.section, selectedIndex.item);
+        return true;
+      }
+
+      const newIndex = getNextValidIndex({
+        event,
+        sections,
+        selectedIndex,
+      });
+      if (newIndex) {
+        setSelectedIndex(newIndex);
+      }
+
+      return true;
+    },
+  }));
+
+  // initialize the select index to 0 by default
+  useEffect(() => {
+    setSelectedIndex({
+      section: 0,
+      item: 0,
+    });
+  }, [sections]);
+
+  // debounced search callback
+  const debouncedSearchCallback = useCallback(
+    debounce(async (searchQuery: string) => {
+      try {
+        const sectionsResponse = await searchCallback?.(searchQuery);
+        if (sectionsResponse) {
+          setSections(sectionsResponse);
+        }
+      } catch (error) {
+        console.error("Failed to fetch suggestions:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    }, 300),
+    [searchCallback]
+  );
+
+  // trigger debounced search when query changes
+  useEffect(() => {
+    if (query !== undefined && query !== null) {
+      setIsLoading(true);
+      void debouncedSearchCallback(query);
+    }
+  }, [query, debouncedSearchCallback]);
+
+  // cancel pending debounced calls on unmount
+  useEffect(
+    () => () => {
+      debouncedSearchCallback.cancel();
+    },
+    [debouncedSearchCallback]
+  );
+
+  // scroll to the dropdown item when navigating via keyboard
+  useLayoutEffect(() => {
+    const container = dropdownContainer?.current;
+    if (!container) return;
+
+    const item = container.querySelector(`#mention-item-${selectedIndex.section}-${selectedIndex.item}`) as HTMLElement;
+    if (item) {
+      const containerRect = container.getBoundingClientRect();
+      const itemRect = item.getBoundingClientRect();
+
+      const isItemInView = itemRect.top >= containerRect.top && itemRect.bottom <= containerRect.bottom;
+
+      if (!isItemInView) {
+        item.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [selectedIndex]);
+
+  useOutsideClickDetector(dropdownContainer, onClose);
+
+  return (
+    <>
+      {/* Backdrop */}
+      <FloatingOverlay
+        style={{
+          zIndex: 99,
+        }}
+        lockScroll
+      />
+      <div
+        ref={dropdownContainer}
+        className="relative max-h-80 w-[14rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
+        style={{
+          zIndex: 100,
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onMouseDown={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {isLoading ? (
+          <div className="text-center text-13 text-placeholder">Loading...</div>
+        ) : sections.length ? (
+          sections.map((section, sectionIndex) => (
+            <div key={section.key} className="space-y-2">
+              {section.title && <h6 className="text-11 font-semibold text-tertiary">{section.title}</h6>}
+              {section.items.map((item, itemIndex) => {
+                const isSelected = sectionIndex === selectedIndex.section && itemIndex === selectedIndex.item;
+
+                return (
+                  <button
+                    key={item.id}
+                    id={`mention-item-${sectionIndex}-${itemIndex}`}
+                    type="button"
+                    className={cn(
+                      "flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1-hover",
+                      {
+                        "bg-layer-1-hover": isSelected,
+                      }
+                    )}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      selectItem(sectionIndex, itemIndex);
+                    }}
+                    onMouseEnter={() =>
+                      setSelectedIndex({
+                        section: sectionIndex,
+                        item: itemIndex,
+                      })
+                    }
+                  >
+                    <span className="grid size-5 flex-shrink-0 place-items-center">{item.icon}</span>
+                    {item.subTitle && (
+                      <h5 className="flex-shrink-0 text-11 whitespace-nowrap text-tertiary">{item.subTitle}</h5>
+                    )}
+                    <p className="flex-grow truncate">{item.title}</p>
+                  </button>
+                );
+              })}
+            </div>
+          ))
+        ) : (
+          <div className="text-center text-13 text-placeholder">No results</div>
+        )}
+      </div>
+    </>
+  );
+});
+
+MentionsListDropdown.displayName = "MentionsListDropdown";
diff --git a/packages/editor/src/extensions/mentions/types.ts b/packages/editor/src/extensions/mentions/types.ts
new file mode 100644
index 0000000..9d175bc
--- /dev/null
+++ b/packages/editor/src/extensions/mentions/types.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane types
+import type { TSearchEntities } from "@plane/types";
+
+export enum EMentionComponentAttributeNames {
+  ID = "id",
+  ENTITY_IDENTIFIER = "entity_identifier",
+  ENTITY_NAME = "entity_name",
+}
+
+export type TMentionComponentAttributes = {
+  [EMentionComponentAttributeNames.ID]: string | null;
+  [EMentionComponentAttributeNames.ENTITY_IDENTIFIER]: string | null;
+  [EMentionComponentAttributeNames.ENTITY_NAME]: TSearchEntities | null;
+};
diff --git a/packages/editor/src/extensions/mentions/utils.ts b/packages/editor/src/extensions/mentions/utils.ts
new file mode 100644
index 0000000..810ccbb
--- /dev/null
+++ b/packages/editor/src/extensions/mentions/utils.ts
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ReactRenderer } from "@tiptap/react";
+import type { Editor } from "@tiptap/react";
+import type { SuggestionOptions } from "@tiptap/suggestion";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { updateFloatingUIFloaterPosition } from "@/helpers/floating-ui";
+import type { CommandListInstance } from "@/helpers/tippy";
+import { DROPDOWN_NAVIGATION_KEYS } from "@/helpers/tippy";
+// types
+import type { TMentionHandler } from "@/types";
+// local components
+import type { MentionsListDropdownProps } from "./mentions-list-dropdown";
+import { MentionsListDropdown } from "./mentions-list-dropdown";
+
+export const renderMentionsDropdown =
+  (args: Pick<TMentionHandler, "searchCallback">): SuggestionOptions["render"] =>
+  () => {
+    const { searchCallback } = args;
+    let component: ReactRenderer<CommandListInstance, MentionsListDropdownProps> | null = null;
+    let cleanup: () => void = () => {};
+    let editorRef: Editor | null = null;
+
+    const handleClose = (editor?: Editor) => {
+      component?.destroy();
+      component = null;
+      (editor || editorRef)?.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.MENTION);
+      cleanup();
+    };
+
+    return {
+      onStart: (props) => {
+        if (!searchCallback) return;
+        editorRef = props.editor;
+        component = new ReactRenderer<CommandListInstance, MentionsListDropdownProps>(MentionsListDropdown, {
+          props: {
+            ...props,
+            searchCallback,
+            onClose: () => handleClose(props.editor),
+          } satisfies MentionsListDropdownProps,
+          editor: props.editor,
+          className: "fixed z-[100]",
+        });
+        if (!props.clientRect) return;
+        props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.MENTION);
+        const element = component.element as HTMLElement;
+        cleanup = updateFloatingUIFloaterPosition(props.editor, element).cleanup;
+      },
+      onUpdate: (props) => {
+        if (!component || !component.element) return;
+        component.updateProps(props);
+        if (!props.clientRect) return;
+        cleanup();
+        cleanup = updateFloatingUIFloaterPosition(props.editor, component.element as HTMLElement).cleanup;
+      },
+      onKeyDown: ({ event }) => {
+        if ([...DROPDOWN_NAVIGATION_KEYS, "Escape"].includes(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
+        if (event.key === "Escape") {
+          handleClose();
+          return true;
+        }
+
+        return component?.ref?.onKeyDown({ event }) ?? false;
+      },
+      onExit: ({ editor }) => {
+        component?.element.remove();
+        handleClose(editor);
+      },
+    };
+  };
diff --git a/packages/editor/src/extensions/placeholder.ts b/packages/editor/src/extensions/placeholder.ts
new file mode 100644
index 0000000..c22227d
--- /dev/null
+++ b/packages/editor/src/extensions/placeholder.ts
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Placeholder } from "@tiptap/extension-placeholder";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// types
+import type { IEditorProps } from "@/types";
+
+type TArgs = {
+  placeholder: IEditorProps["placeholder"];
+  showPlaceholderOnEmpty: IEditorProps["showPlaceholderOnEmpty"];
+};
+
+export const CustomPlaceholderExtension = (args: TArgs) => {
+  const { placeholder, showPlaceholderOnEmpty = false } = args;
+
+  return Placeholder.configure({
+    placeholder: ({ editor, node }) => {
+      if (!editor.isEditable) return "";
+
+      if (node.type.name === CORE_EXTENSIONS.HEADING) return `Heading ${node.attrs.level}`;
+
+      const isUploadInProgress = editor.storage.utility?.uploadInProgress;
+
+      if (isUploadInProgress) return "";
+
+      const shouldHidePlaceholder =
+        editor.isActive(CORE_EXTENSIONS.TABLE) ||
+        editor.isActive(CORE_EXTENSIONS.CODE_BLOCK) ||
+        editor.isActive(CORE_EXTENSIONS.IMAGE) ||
+        editor.isActive(CORE_EXTENSIONS.CUSTOM_IMAGE);
+
+      if (shouldHidePlaceholder) return "";
+
+      if (showPlaceholderOnEmpty) {
+        const isDocumentEmpty = editor.state.doc.textContent.length === 0;
+        if (!isDocumentEmpty) {
+          return "";
+        }
+      }
+
+      if (placeholder) {
+        if (typeof placeholder === "string") return placeholder;
+        else return placeholder(editor.isFocused, editor.getHTML());
+      }
+
+      return "Press '/' for commands...";
+    },
+    includeChildren: true,
+  });
+};
diff --git a/packages/editor/src/extensions/quote.ts b/packages/editor/src/extensions/quote.ts
new file mode 100644
index 0000000..81e19f0
--- /dev/null
+++ b/packages/editor/src/extensions/quote.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import Blockquote from "@tiptap/extension-blockquote";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+export const CustomQuoteExtension = Blockquote.extend({
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        try {
+          const { $from, $to, $head } = this.editor.state.selection;
+          const parent = $head.node(-1);
+
+          if (!parent) return false;
+
+          if (parent.type.name !== CORE_EXTENSIONS.BLOCKQUOTE) {
+            return false;
+          }
+          if ($from.pos !== $to.pos) return false;
+          // if ($head.parentOffset < $head.parent.content.size) return false;
+
+          // this.editor.commands.insertContentAt(parent.ne);
+          this.editor.chain().splitBlock().lift(this.name).run();
+
+          return true;
+        } catch (error) {
+          console.error("Error handling Enter in blockquote:", error);
+          return false;
+        }
+      },
+    };
+  },
+});
diff --git a/packages/editor/src/extensions/rich-text-extensions.tsx b/packages/editor/src/extensions/rich-text-extensions.tsx
new file mode 100644
index 0000000..c59647a
--- /dev/null
+++ b/packages/editor/src/extensions/rich-text-extensions.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { AnyExtension, Extensions } from "@tiptap/core";
+// extensions
+import { SlashCommands } from "@/extensions/slash-commands/root";
+// types
+import type { IEditorProps, TExtensions } from "@/types";
+
+export type TRichTextEditorAdditionalExtensionsProps = Pick<
+  IEditorProps,
+  "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "extendedEditorProps"
+>;
+
+/**
+ * Registry entry configuration for extensions
+ */
+export type TRichTextEditorAdditionalExtensionsRegistry = {
+  /** Determines if the extension should be enabled based on disabled extensions */
+  isEnabled: (disabledExtensions: TExtensions[], flaggedExtensions: TExtensions[]) => boolean;
+  /** Returns the extension instance(s) when enabled */
+  getExtension: (props: TRichTextEditorAdditionalExtensionsProps) => AnyExtension | undefined;
+};
+
+const extensionRegistry: TRichTextEditorAdditionalExtensionsRegistry[] = [
+  {
+    isEnabled: (disabledExtensions) => !disabledExtensions.includes("slash-commands"),
+    getExtension: ({ disabledExtensions, flaggedExtensions }) =>
+      SlashCommands({
+        disabledExtensions,
+        flaggedExtensions,
+      }),
+  },
+];
+
+export function RichTextEditorAdditionalExtensions(props: TRichTextEditorAdditionalExtensionsProps) {
+  const { disabledExtensions, flaggedExtensions } = props;
+
+  const extensions: Extensions = extensionRegistry
+    .filter((config) => config.isEnabled(disabledExtensions, flaggedExtensions))
+    .map((config) => config.getExtension(props))
+    .filter((extension): extension is AnyExtension => extension !== undefined);
+
+  return extensions;
+}
diff --git a/packages/editor/src/extensions/side-menu.ts b/packages/editor/src/extensions/side-menu.ts
new file mode 100644
index 0000000..bdba02c
--- /dev/null
+++ b/packages/editor/src/extensions/side-menu.ts
@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// plugins
+import { AIHandlePlugin } from "@/plugins/ai-handle";
+import { DragHandlePlugin, nodeDOMAtCoords } from "@/plugins/drag-handle";
+
+type Props = {
+  aiEnabled: boolean;
+  dragDropEnabled: boolean;
+};
+
+export type SideMenuPluginProps = {
+  dragHandleWidth: number;
+  handlesConfig: {
+    ai: boolean;
+    dragDrop: boolean;
+  };
+  scrollThreshold: {
+    up: number;
+    down: number;
+  };
+};
+
+export type SideMenuHandleOptions = {
+  view: (view: EditorView, sideMenu: HTMLDivElement | null) => void;
+  domEvents?: {
+    [key: string]: (...args: any) => void;
+  };
+};
+
+export const SideMenuExtension = (props: Props) => {
+  const { aiEnabled, dragDropEnabled } = props;
+
+  return Extension.create({
+    name: CORE_EXTENSIONS.SIDE_MENU,
+    addProseMirrorPlugins() {
+      return [
+        SideMenu({
+          dragHandleWidth: 24,
+          handlesConfig: {
+            ai: aiEnabled,
+            dragDrop: dragDropEnabled,
+          },
+          scrollThreshold: { up: 200, down: 150 },
+        }),
+      ];
+    },
+  });
+};
+
+const absoluteRect = (node: Element) => {
+  const data = node.getBoundingClientRect();
+
+  return {
+    top: data.top,
+    left: data.left,
+    width: data.width,
+  };
+};
+
+const SideMenu = (options: SideMenuPluginProps) => {
+  const { handlesConfig } = options;
+  const editorSideMenu: HTMLDivElement | null = document.createElement("div");
+  editorSideMenu.id = "editor-side-menu";
+  // side menu view actions
+  const hideSideMenu = () => {
+    if (!editorSideMenu?.classList.contains("side-menu-hidden")) editorSideMenu?.classList.add("side-menu-hidden");
+  };
+  const showSideMenu = () => editorSideMenu?.classList.remove("side-menu-hidden");
+  // side menu elements
+  const { view: dragHandleView, domEvents: dragHandleDOMEvents } = DragHandlePlugin(options);
+  const { view: aiHandleView, domEvents: aiHandleDOMEvents } = AIHandlePlugin(options);
+
+  return new Plugin({
+    key: new PluginKey("sideMenu"),
+    view: (view) => {
+      hideSideMenu();
+      view?.dom.parentElement?.appendChild(editorSideMenu);
+      // side menu elements' initialization
+      if (handlesConfig.ai && !editorSideMenu.querySelector("#ai-handle")) {
+        aiHandleView(view, editorSideMenu);
+      }
+
+      if (handlesConfig.dragDrop && !editorSideMenu.querySelector("#drag-handle")) {
+        dragHandleView(view, editorSideMenu);
+      }
+
+      return {
+        destroy: () => hideSideMenu(),
+      };
+    },
+    props: {
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          if (!view.editable) return;
+
+          const node = nodeDOMAtCoords({
+            x: event.clientX + 50 + options.dragHandleWidth,
+            y: event.clientY,
+          });
+
+          if (!(node instanceof Element) || node.matches("ul, ol")) {
+            hideSideMenu();
+            return;
+          }
+
+          const compStyle = window.getComputedStyle(node);
+          const lineHeight = parseInt(compStyle.lineHeight, 10);
+          const paddingTop = parseInt(compStyle.paddingTop, 10);
+
+          const rect = absoluteRect(node);
+
+          rect.top += (lineHeight - 20) / 2;
+          rect.top += paddingTop;
+
+          if (handlesConfig.ai) {
+            rect.left -= 20;
+          }
+
+          if (node.parentElement?.parentElement?.matches("td") || node.parentElement?.parentElement?.matches("th")) {
+            if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
+              rect.left -= 5;
+            }
+          } else {
+            // Li markers
+            if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
+              rect.left -= 18;
+            }
+          }
+
+          if (node.matches("table")) {
+            rect.top += 8;
+            rect.left -= 8;
+          }
+
+          rect.width = options.dragHandleWidth;
+
+          if (!editorSideMenu) return;
+
+          editorSideMenu.style.left = `${rect.left - rect.width}px`;
+          editorSideMenu.style.top = `${rect.top}px`;
+          showSideMenu();
+          if (handlesConfig.dragDrop) {
+            dragHandleDOMEvents?.mousemove();
+          }
+          if (handlesConfig.ai) {
+            aiHandleDOMEvents?.mousemove?.();
+          }
+        },
+        // keydown: () => hideSideMenu(),
+        mousewheel: () => hideSideMenu(),
+        dragenter: (view) => {
+          if (handlesConfig.dragDrop) {
+            dragHandleDOMEvents?.dragenter?.(view);
+          }
+        },
+        drop: (view, event) => {
+          if (handlesConfig.dragDrop) {
+            dragHandleDOMEvents?.drop?.(view, event);
+          }
+        },
+        dragend: (view) => {
+          if (handlesConfig.dragDrop) {
+            dragHandleDOMEvents?.dragend?.(view);
+          }
+        },
+      },
+    },
+  });
+};
diff --git a/packages/editor/src/extensions/slash-commands/command-items-list.tsx b/packages/editor/src/extensions/slash-commands/command-items-list.tsx
new file mode 100644
index 0000000..6998132
--- /dev/null
+++ b/packages/editor/src/extensions/slash-commands/command-items-list.tsx
@@ -0,0 +1,336 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Smile } from "lucide-react";
+import {
+  ChatOutline,
+  CodeOutline,
+  H1Outline,
+  H2Outline,
+  H3Outline,
+  H4Outline,
+  H5Outline,
+  H6Outline,
+  ImageOutline,
+  ListOutline,
+  MinusSquareOutline,
+  NumberedListOutline,
+  QuoteOutline,
+  TableEditorOutline,
+  TextOutline,
+  ToDoOutline,
+} from "@makeplane/propel/icons";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+// helpers
+import {
+  insertTableCommand,
+  toggleBlockquote,
+  toggleBulletList,
+  toggleOrderedList,
+  toggleTaskList,
+  toggleHeading,
+  toggleTextColor,
+  toggleBackgroundColor,
+  insertImage,
+  insertCallout,
+  setText,
+  openEmojiPicker,
+} from "@/helpers/editor-commands";
+// plane editor extensions
+import { coreEditorAdditionalSlashCommandOptions } from "@/extensions/additional-slash-command-options";
+// types
+import type { CommandProps, ISlashCommandItem, TSlashCommandSectionKeys } from "@/types";
+// local types
+import type { TExtensionProps, TSlashCommandAdditionalOption } from "./root";
+
+export type TSlashCommandSection = {
+  key: TSlashCommandSectionKeys;
+  title?: string;
+  items: ISlashCommandItem[];
+};
+
+export const getSlashCommandFilteredSections =
+  (args: TExtensionProps) =>
+  ({ query }: { query: string }): TSlashCommandSection[] => {
+    const { additionalOptions: externalAdditionalOptions, disabledExtensions, flaggedExtensions } = args;
+    const SLASH_COMMAND_SECTIONS: TSlashCommandSection[] = [
+      {
+        key: "general",
+        items: [
+          {
+            commandKey: "text",
+            key: "text",
+            title: "Text",
+            description: "Just start typing with plain text.",
+            searchTerms: ["p", "paragraph"],
+            icon: <TextOutline className="size-3.5" />,
+            command: ({ editor, range }) => setText(editor, range),
+          },
+          {
+            commandKey: "h1",
+            key: "h1",
+            title: "Heading 1",
+            description: "Big section heading.",
+            searchTerms: ["title", "big", "large"],
+            icon: <H1Outline className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeading(editor, 1, range),
+          },
+          {
+            commandKey: "h2",
+            key: "h2",
+            title: "Heading 2",
+            description: "Medium section heading.",
+            searchTerms: ["subtitle", "medium"],
+            icon: <H2Outline className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeading(editor, 2, range),
+          },
+          {
+            commandKey: "h3",
+            key: "h3",
+            title: "Heading 3",
+            description: "Small section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: <H3Outline className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeading(editor, 3, range),
+          },
+          {
+            commandKey: "h4",
+            key: "h4",
+            title: "Heading 4",
+            description: "Small section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: <H4Outline className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeading(editor, 4, range),
+          },
+          {
+            commandKey: "h5",
+            key: "h5",
+            title: "Heading 5",
+            description: "Small section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: <H5Outline className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeading(editor, 5, range),
+          },
+          {
+            commandKey: "h6",
+            key: "h6",
+            title: "Heading 6",
+            description: "Small section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: <H6Outline className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeading(editor, 6, range),
+          },
+
+          {
+            commandKey: "numbered-list",
+            key: "numbered-list",
+            title: "Numbered list",
+            description: "Create a numbered list.",
+            searchTerms: ["ordered"],
+            icon: <NumberedListOutline className="size-3.5" />,
+            command: ({ editor, range }) => toggleOrderedList(editor, range),
+          },
+          {
+            commandKey: "bulleted-list",
+            key: "bulleted-list",
+            title: "Bulleted list",
+            description: "Create a bulleted list.",
+            searchTerms: ["unordered", "point"],
+            icon: <ListOutline className="size-3.5" />,
+            command: ({ editor, range }) => toggleBulletList(editor, range),
+          },
+          {
+            commandKey: "to-do-list",
+            key: "to-do-list",
+            title: "To-do list",
+            description: "Create a to-do list.",
+            searchTerms: ["todo", "task", "list", "check", "checkbox"],
+            icon: <ToDoOutline className="size-3.5" />,
+            command: ({ editor, range }) => toggleTaskList(editor, range),
+          },
+          {
+            commandKey: "table",
+            key: "table",
+            title: "Table",
+            description: "Create a table",
+            searchTerms: ["table", "cell", "db", "data", "tabular"],
+            icon: <TableEditorOutline className="size-3.5" />,
+            command: ({ editor, range }) => insertTableCommand(editor, range),
+          },
+          {
+            commandKey: "quote",
+            key: "quote",
+            title: "Quote",
+            description: "Capture a quote.",
+            searchTerms: ["blockquote"],
+            icon: <QuoteOutline className="size-3.5" />,
+            command: ({ editor, range }) => toggleBlockquote(editor, range),
+          },
+          {
+            commandKey: "code",
+            key: "code",
+            title: "Code",
+            description: "Capture a code snippet.",
+            searchTerms: ["codeblock"],
+            icon: <CodeOutline className="size-3.5" />,
+            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+          },
+          {
+            commandKey: "callout",
+            key: "callout",
+            title: "Callout",
+            icon: <ChatOutline className="size-3.5" />,
+            description: "Insert callout",
+            searchTerms: ["callout", "comment", "message", "info", "alert"],
+            command: ({ editor, range }: CommandProps) => insertCallout(editor, range),
+          },
+          {
+            commandKey: "divider",
+            key: "divider",
+            title: "Divider",
+            description: "Visually divide blocks.",
+            searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
+            icon: <MinusSquareOutline className="size-3.5" />,
+            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
+          },
+          {
+            commandKey: "emoji",
+            key: "emoji",
+            title: "Emoji",
+            description: "Insert an emoji",
+            searchTerms: ["emoji", "icons", "reaction", "emoticon", "emotags"],
+            icon: <Smile className="size-3.5" />,
+            command: ({ editor, range }) => {
+              openEmojiPicker(editor, range);
+            },
+          },
+        ],
+      },
+      {
+        key: "text-colors",
+        title: "Colors",
+        items: [
+          {
+            commandKey: "text-color",
+            key: "text-color-default",
+            title: "Default",
+            description: "Change text color",
+            searchTerms: ["color", "text", "default"],
+            icon: <TextOutline className="size-3.5 text-primary" />,
+            command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
+          },
+          ...COLORS_LIST.map(
+            (color) =>
+              ({
+                commandKey: "text-color",
+                key: `text-color-${color.key}`,
+                title: color.label,
+                description: "Change text color",
+                searchTerms: ["color", "text", color.label],
+
+                icon: (
+                  <TextOutline
+                    className="size-3.5"
+                    style={{
+                      color: color.textColor,
+                    }}
+                  />
+                ),
+
+                command: ({ editor, range }) => toggleTextColor(color.key, editor, range),
+              }) as ISlashCommandItem
+          ),
+        ],
+      },
+      {
+        key: "background-colors",
+        title: "Background colors",
+        items: [
+          {
+            commandKey: "background-color",
+            key: "background-color-default",
+            title: "Default background",
+            description: "Change background color",
+            searchTerms: ["color", "bg", "background", "default"],
+            icon: <TextOutline className="size-3.5" />,
+            iconContainerStyle: {
+              borderRadius: "4px",
+              backgroundColor: "var(--background-color-surface-1)",
+              border: "1px solid var(--border-color-strong)",
+            },
+            command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
+          },
+          ...COLORS_LIST.map(
+            (color) =>
+              ({
+                commandKey: "background-color",
+                key: `background-color-${color.key}`,
+                title: color.label,
+                description: "Change background color",
+                searchTerms: ["color", "bg", "background", color.label],
+                icon: <TextOutline className="size-3.5" />,
+
+                iconContainerStyle: {
+                  borderRadius: "4px",
+                  backgroundColor: color.backgroundColor,
+                },
+
+                command: ({ editor, range }) => toggleBackgroundColor(color.key, editor, range),
+              }) as ISlashCommandItem
+          ),
+        ],
+      },
+    ];
+
+    const internalAdditionalOptions: TSlashCommandAdditionalOption[] = [];
+    if (!disabledExtensions?.includes("image")) {
+      internalAdditionalOptions.push({
+        commandKey: "image",
+        key: "image",
+        title: "Image",
+        icon: <ImageOutline className="size-3.5" />,
+        description: "Insert an image",
+        searchTerms: ["img", "photo", "picture", "media", "upload"],
+        command: ({ editor, range }: CommandProps) => insertImage({ editor, event: "insert", range }),
+        section: "general",
+        pushAfter: "code",
+      });
+    }
+
+    [
+      ...internalAdditionalOptions,
+      ...(externalAdditionalOptions ?? []),
+      ...coreEditorAdditionalSlashCommandOptions({
+        disabledExtensions,
+        flaggedExtensions,
+      }),
+    ]?.forEach((item) => {
+      const sectionToPushTo = SLASH_COMMAND_SECTIONS.find((s) => s.key === item.section) ?? SLASH_COMMAND_SECTIONS[0];
+      const itemIndexToPushAfter = sectionToPushTo.items.findIndex((i) => i.commandKey === item.pushAfter);
+      if (itemIndexToPushAfter !== -1) {
+        sectionToPushTo.items.splice(itemIndexToPushAfter + 1, 0, item);
+      } else {
+        sectionToPushTo.items.push(item);
+      }
+    });
+
+    const filteredSlashSections = SLASH_COMMAND_SECTIONS.map((section) => ({
+      ...section,
+      items: section.items.filter((item) => {
+        if (typeof query !== "string") return;
+
+        const lowercaseQuery = query.toLowerCase();
+        return (
+          item.title.toLowerCase().includes(lowercaseQuery) ||
+          item.description.toLowerCase().includes(lowercaseQuery) ||
+          item.searchTerms.some((t) => t.includes(lowercaseQuery))
+        );
+      }),
+    }));
+
+    return filteredSlashSections.filter((s) => s.items.length !== 0);
+  };
diff --git a/packages/editor/src/extensions/slash-commands/command-menu-item.tsx b/packages/editor/src/extensions/slash-commands/command-menu-item.tsx
new file mode 100644
index 0000000..88a3999
--- /dev/null
+++ b/packages/editor/src/extensions/slash-commands/command-menu-item.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane utils
+import { cn } from "@plane/utils";
+// types
+import type { ISlashCommandItem } from "@/types";
+
+type Props = {
+  isSelected: boolean;
+  item: ISlashCommandItem;
+  itemIndex: number;
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onMouseEnter: () => void;
+  sectionIndex: number;
+  query?: string;
+};
+
+// Utility to highlight matched text in a string
+const highlightMatch = (text: string, query: string): React.ReactNode => {
+  if (!query || query.trim() === "") return text;
+
+  const queryLower = query.toLowerCase().trim();
+  const textLower = text.toLowerCase();
+
+  // Check for direct substring match
+  const index = textLower.indexOf(queryLower);
+  if (index >= 0) {
+    const before = text.substring(0, index);
+    const match = text.substring(index, index + queryLower.length);
+    const after = text.substring(index + queryLower.length);
+
+    return (
+      <>
+        {before}
+        <span className="font-medium text-primary">{match}</span>
+        {after}
+      </>
+    );
+  }
+
+  // Otherwise just return the text
+  return text;
+};
+
+export function CommandMenuItem(props: Props) {
+  const { isSelected, item, itemIndex, onClick, onMouseEnter, sectionIndex, query } = props;
+
+  return (
+    <button
+      type="button"
+      id={`item-${sectionIndex}-${itemIndex}`}
+      className={cn(
+        "flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-13 text-secondary hover:bg-layer-1-hover",
+        {
+          "bg-layer-1-hover": isSelected,
+        }
+      )}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+    >
+      <span className="grid size-5 flex-shrink-0 place-items-center" style={item.iconContainerStyle}>
+        {item.icon}
+      </span>
+      <p className="flex-grow truncate text-12">{query ? highlightMatch(item.title, query) : item.title}</p>
+      {item.badge}
+    </button>
+  );
+}
diff --git a/packages/editor/src/extensions/slash-commands/command-menu.tsx b/packages/editor/src/extensions/slash-commands/command-menu.tsx
new file mode 100644
index 0000000..2655c32
--- /dev/null
+++ b/packages/editor/src/extensions/slash-commands/command-menu.tsx
@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { FloatingOverlay } from "@floating-ui/react";
+import type { SuggestionProps } from "@tiptap/suggestion";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+// helpers
+import { DROPDOWN_NAVIGATION_KEYS, getNextValidIndex } from "@/helpers/tippy";
+// types
+import type { ISlashCommandItem } from "@/types";
+// components
+import type { TSlashCommandSection } from "./command-items-list";
+import { CommandMenuItem } from "./command-menu-item";
+
+export type SlashCommandsMenuProps = SuggestionProps<TSlashCommandSection, ISlashCommandItem> & {
+  onClose: () => void;
+};
+
+export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: SlashCommandsMenuProps, ref) {
+  const { items: sections, command, query, onClose } = props;
+  // states
+  const [selectedIndex, setSelectedIndex] = useState({
+    section: 0,
+    item: 0,
+  });
+  // refs
+  const commandListContainer = useRef<HTMLDivElement>(null);
+
+  const selectItem = useCallback(
+    (sectionIndex: number, itemIndex: number) => {
+      const item = sections[sectionIndex]?.items?.[itemIndex];
+      if (item) command(item);
+    },
+    [command, sections]
+  );
+  // handle arrow key navigation
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (DROPDOWN_NAVIGATION_KEYS.includes(e.key)) {
+        e.preventDefault();
+        const currentSection = selectedIndex.section;
+        const currentItem = selectedIndex.item;
+        let nextSection = currentSection;
+        let nextItem = currentItem;
+
+        if (e.key === "ArrowUp") {
+          nextItem = currentItem - 1;
+          if (nextItem < 0) {
+            nextSection = currentSection - 1;
+            if (nextSection < 0) nextSection = sections.length - 1;
+            nextItem = sections[nextSection]?.items?.length - 1;
+          }
+        }
+        if (e.key === "ArrowDown") {
+          nextItem = currentItem + 1;
+          if (nextItem >= sections[currentSection]?.items?.length) {
+            nextSection = currentSection + 1;
+            if (nextSection >= sections.length) nextSection = 0;
+            nextItem = 0;
+          }
+        }
+        if (e.key === "Enter") {
+          selectItem(currentSection, currentItem);
+        }
+        setSelectedIndex({
+          section: nextSection,
+          item: nextItem,
+        });
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [sections, selectedIndex, setSelectedIndex, selectItem]);
+  // initialize the select index to 0 by default
+  useEffect(() => {
+    setSelectedIndex({
+      section: 0,
+      item: 0,
+    });
+  }, [sections]);
+  // scroll to the dropdown item when navigating via keyboard
+  useLayoutEffect(() => {
+    const container = commandListContainer?.current;
+    if (!container) return;
+
+    const item = container.querySelector(`#item-${selectedIndex.section}-${selectedIndex.item}`) as HTMLElement;
+
+    // use scroll into view to bring the item in view if it is not in view
+    item?.scrollIntoView({ block: "nearest" });
+  }, [sections, selectedIndex]);
+
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+      if (!DROPDOWN_NAVIGATION_KEYS.includes(event.key)) return false;
+
+      if (event.key === "Enter") {
+        selectItem(selectedIndex.section, selectedIndex.item);
+        return true;
+      }
+
+      const newIndex = getNextValidIndex({
+        event,
+        sections,
+        selectedIndex,
+      });
+
+      if (newIndex) {
+        setSelectedIndex(newIndex);
+      }
+
+      return true;
+    },
+  }));
+
+  useOutsideClickDetector(commandListContainer, onClose);
+
+  const areSearchResultsEmpty = sections.map((s) => s.items?.length).reduce((acc, curr) => acc + curr, 0) === 0;
+
+  if (areSearchResultsEmpty) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <FloatingOverlay
+        style={{
+          zIndex: 99,
+        }}
+        lockScroll
+      />
+      <div
+        id="slash-command"
+        ref={commandListContainer}
+        className="relative max-h-80 min-w-[12rem] space-y-2 overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
+        style={{
+          zIndex: 100,
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onMouseDown={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {sections.map((section, sectionIndex) => (
+          <div key={section.key} className="space-y-2">
+            {section.title && <h6 className="text-11 font-semibold text-tertiary">{section.title}</h6>}
+            <div>
+              {section.items?.map((item, itemIndex) => (
+                <CommandMenuItem
+                  key={item.key}
+                  isSelected={sectionIndex === selectedIndex.section && itemIndex === selectedIndex.item}
+                  item={item}
+                  itemIndex={itemIndex}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    selectItem(sectionIndex, itemIndex);
+                  }}
+                  onMouseEnter={() =>
+                    setSelectedIndex({
+                      section: sectionIndex,
+                      item: itemIndex,
+                    })
+                  }
+                  sectionIndex={sectionIndex}
+                  query={query}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+});
+
+SlashCommandsMenu.displayName = "SlashCommandsMenu";
diff --git a/packages/editor/src/extensions/slash-commands/index.ts b/packages/editor/src/extensions/slash-commands/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/editor/src/extensions/slash-commands/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/editor/src/extensions/slash-commands/root.tsx b/packages/editor/src/extensions/slash-commands/root.tsx
new file mode 100644
index 0000000..c8e05ae
--- /dev/null
+++ b/packages/editor/src/extensions/slash-commands/root.tsx
@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Extension } from "@tiptap/core";
+import type { Editor } from "@tiptap/core";
+import { ReactRenderer } from "@tiptap/react";
+import Suggestion from "@tiptap/suggestion";
+import type { SuggestionOptions } from "@tiptap/suggestion";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { updateFloatingUIFloaterPosition } from "@/helpers/floating-ui";
+import type { CommandListInstance } from "@/helpers/tippy";
+import { DROPDOWN_NAVIGATION_KEYS } from "@/helpers/tippy";
+// types
+import type { IEditorProps, ISlashCommandItem, TEditorCommands, TSlashCommandSectionKeys } from "@/types";
+// components
+import { getSlashCommandFilteredSections } from "./command-items-list";
+import type { SlashCommandsMenuProps } from "./command-menu";
+import { SlashCommandsMenu } from "./command-menu";
+
+export type SlashCommandOptions = {
+  suggestion: Omit<SuggestionOptions, "editor">;
+};
+
+export type TSlashCommandAdditionalOption = ISlashCommandItem & {
+  section: TSlashCommandSectionKeys;
+  pushAfter: TEditorCommands;
+};
+
+const Command = Extension.create<SlashCommandOptions>({
+  name: CORE_EXTENSIONS.SLASH_COMMANDS,
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        command: ({ editor, range, props }) => {
+          props.command({ editor, range });
+        },
+        allow({ editor }: { editor: Editor }) {
+          const { selection } = editor.state;
+          const parentNode = selection.$from.node(selection.$from.depth);
+          const blockType = parentNode.type.name;
+
+          if (blockType === CORE_EXTENSIONS.CODE_BLOCK) {
+            return false;
+          }
+
+          return true;
+        },
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        render: () => {
+          let component: ReactRenderer<CommandListInstance, SlashCommandsMenuProps> | null = null;
+          let cleanup: () => void = () => {};
+          let editorRef: Editor | null = null;
+
+          const handleClose = (editor?: Editor) => {
+            component?.destroy();
+            component = null;
+            (editor || editorRef)?.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.SLASH_COMMANDS);
+            cleanup();
+          };
+
+          return {
+            onStart: (props) => {
+              editorRef = props.editor;
+              // React renderer component, which wraps the actual dropdown component
+              component = new ReactRenderer<CommandListInstance, SlashCommandsMenuProps>(SlashCommandsMenu, {
+                props: {
+                  ...props,
+                  onClose: () => handleClose(props.editor),
+                } satisfies SlashCommandsMenuProps,
+                editor: props.editor,
+                className: "fixed z-[100]",
+              });
+              if (!props.clientRect) return;
+              props.editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.SLASH_COMMANDS);
+              const element = component.element as HTMLElement;
+              cleanup = updateFloatingUIFloaterPosition(props.editor, element).cleanup;
+            },
+
+            onUpdate: (props) => {
+              if (!component || !component.element) return;
+              component.updateProps(props);
+              if (!props.clientRect) return;
+              const element = component.element as HTMLElement;
+              cleanup();
+              cleanup = updateFloatingUIFloaterPosition(props.editor, element).cleanup;
+            },
+
+            onKeyDown: ({ event }) => {
+              if ([...DROPDOWN_NAVIGATION_KEYS, "Escape"].includes(event.key)) {
+                event.preventDefault();
+                event.stopPropagation();
+              }
+
+              if (event.key === "Escape") {
+                handleClose(this.editor);
+                return true;
+              }
+
+              return component?.ref?.onKeyDown({ event }) ?? false;
+            },
+
+            onExit: ({ editor }) => {
+              component?.element.remove();
+              handleClose(editor);
+            },
+          };
+        },
+        ...this.options.suggestion,
+      }),
+    ];
+  },
+});
+
+export type TExtensionProps = Pick<IEditorProps, "disabledExtensions" | "flaggedExtensions"> & {
+  additionalOptions?: TSlashCommandAdditionalOption[];
+};
+
+export function SlashCommands(props: TExtensionProps) {
+  return Command.configure({
+    suggestion: {
+      items: getSlashCommandFilteredSections(props),
+    },
+  });
+}
diff --git a/packages/editor/src/extensions/starter-kit.ts b/packages/editor/src/extensions/starter-kit.ts
new file mode 100644
index 0000000..1e4e4f7
--- /dev/null
+++ b/packages/editor/src/extensions/starter-kit.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import StarterKit from "@tiptap/starter-kit";
+
+type TArgs = {
+  enableHistory: boolean;
+};
+
+export const CustomStarterKitExtension = (args: TArgs) => {
+  const { enableHistory } = args;
+
+  return StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc pl-7 space-y-(--list-spacing-y)",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal pl-7 space-y-(--list-spacing-y)",
+      },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "not-prose space-y-2",
+      },
+    },
+    code: false,
+    codeBlock: false,
+    horizontalRule: false,
+    blockquote: false,
+    paragraph: {
+      HTMLAttributes: {
+        class: "editor-paragraph-block",
+      },
+    },
+    heading: {
+      HTMLAttributes: {
+        class: "editor-heading-block",
+      },
+    },
+    dropcursor: {
+      class:
+        "text-tertiary transition-all motion-reduce:transition-none motion-reduce:hover:transform-none duration-200 ease-[cubic-bezier(0.165, 0.84, 0.44, 1)]",
+    },
+    ...(enableHistory ? {} : { history: false }),
+  });
+};
diff --git a/packages/editor/src/extensions/table/index.ts b/packages/editor/src/extensions/table/index.ts
new file mode 100644
index 0000000..fe205e4
--- /dev/null
+++ b/packages/editor/src/extensions/table/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./table";
+export * from "./table-cell";
+export * from "./table-header";
+export * from "./table-row";
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/actions.ts b/packages/editor/src/extensions/table/plugins/drag-handles/actions.ts
new file mode 100644
index 0000000..bd12b05
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/actions.ts
@@ -0,0 +1,219 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { Fragment } from "@tiptap/pm/model";
+import type { Node, Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { Transaction } from "@tiptap/pm/state";
+import { TableMap } from "@tiptap/pm/tables";
+import type { CellSelection } from "@tiptap/pm/tables";
+// extensions
+import type { TableNodeLocation } from "@/extensions/table/table/utilities/helpers";
+
+type TableRow = (ProseMirrorNode | null)[];
+type TableRows = TableRow[];
+
+/**
+ * Move the selected columns to the specified index.
+ * @param {Editor} editor - The editor instance.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {CellSelection} selection - The cell selection.
+ * @param {number} to - The index to move the columns to.
+ * @param {Transaction} tr - The transaction.
+ * @returns {Transaction} The updated transaction.
+ */
+export const moveSelectedColumns = (
+  editor: Editor,
+  table: TableNodeLocation,
+  selection: CellSelection,
+  to: number,
+  tr: Transaction
+): Transaction => {
+  const tableMap = TableMap.get(table.node);
+
+  let columnStart = -1;
+  let columnEnd = -1;
+
+  selection.forEachCell((_node, pos) => {
+    const cell = tableMap.findCell(pos - table.pos - 1);
+    for (let i = cell.left; i < cell.right; i++) {
+      columnStart = columnStart >= 0 ? Math.min(cell.left, columnStart) : cell.left;
+      columnEnd = columnEnd >= 0 ? Math.max(cell.right, columnEnd) : cell.right;
+    }
+  });
+
+  if (columnStart === -1 || columnEnd === -1) {
+    console.warn("Invalid column selection");
+    return tr;
+  }
+
+  if (to < 0 || to > tableMap.width || (to >= columnStart && to < columnEnd)) return tr;
+
+  const rows = tableToCells(table);
+  for (const row of rows) {
+    const range = row.splice(columnStart, columnEnd - columnStart);
+    const offset = to > columnStart ? to - (columnEnd - columnStart - 1) : to;
+    row.splice(offset, 0, ...range);
+  }
+
+  tableFromCells(editor, table, rows, tr);
+  return tr;
+};
+
+/**
+ * Move the selected rows to the specified index.
+ * @param {Editor} editor - The editor instance.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {CellSelection} selection - The cell selection.
+ * @param {number} to - The index to move the rows to.
+ * @param {Transaction} tr - The transaction.
+ * @returns {Transaction} The updated transaction.
+ */
+export const moveSelectedRows = (
+  editor: Editor,
+  table: TableNodeLocation,
+  selection: CellSelection,
+  to: number,
+  tr: Transaction
+): Transaction => {
+  const tableMap = TableMap.get(table.node);
+
+  let rowStart = -1;
+  let rowEnd = -1;
+
+  selection.forEachCell((_node, pos) => {
+    const cell = tableMap.findCell(pos - table.pos - 1);
+    for (let i = cell.top; i < cell.bottom; i++) {
+      rowStart = rowStart >= 0 ? Math.min(cell.top, rowStart) : cell.top;
+      rowEnd = rowEnd >= 0 ? Math.max(cell.bottom, rowEnd) : cell.bottom;
+    }
+  });
+
+  if (rowStart === -1 || rowEnd === -1) {
+    console.warn("Invalid row selection");
+    return tr;
+  }
+
+  if (to < 0 || to > tableMap.height || (to >= rowStart && to < rowEnd)) return tr;
+
+  const rows = tableToCells(table);
+  const range = rows.splice(rowStart, rowEnd - rowStart);
+  const offset = to > rowStart ? to - (rowEnd - rowStart - 1) : to;
+  rows.splice(offset, 0, ...range);
+
+  tableFromCells(editor, table, rows, tr);
+  return tr;
+};
+
+/**
+ * @description Duplicate the selected rows.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {number[]} rowIndices - The indices of the rows to duplicate.
+ * @param {Transaction} tr - The transaction.
+ * @returns {Transaction} The updated transaction.
+ */
+export const duplicateRows = (table: TableNodeLocation, rowIndices: number[], tr: Transaction): Transaction => {
+  const rows = tableToCells(table);
+
+  const { map, width } = TableMap.get(table.node);
+
+  // Validate row indices
+  const maxRow = rows.length - 1;
+  if (rowIndices.some((idx) => idx < 0 || idx > maxRow)) {
+    console.warn("Invalid row indices for duplication");
+    return tr;
+  }
+
+  const mapStart = tr.mapping.maps.length;
+
+  const lastRowPos = map[rowIndices[rowIndices.length - 1] * width + width - 1];
+  const nextRowStart = lastRowPos + (table.node.nodeAt(lastRowPos)?.nodeSize ?? 0) + 1;
+  const insertPos = tr.mapping.slice(mapStart).map(table.start + nextRowStart);
+
+  for (let i = rowIndices.length - 1; i >= 0; i--) {
+    tr.insert(
+      insertPos,
+      rows[rowIndices[i]].filter((r) => r !== null)
+    );
+  }
+
+  return tr;
+};
+
+/**
+ * @description Duplicate the selected columns.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {number[]} columnIndices - The indices of the columns to duplicate.
+ * @param {Transaction} tr - The transaction.
+ * @returns {Transaction} The updated transaction.
+ */
+export const duplicateColumns = (table: TableNodeLocation, columnIndices: number[], tr: Transaction): Transaction => {
+  const rows = tableToCells(table);
+
+  const { map, width, height } = TableMap.get(table.node);
+
+  // Validate column indices
+  if (columnIndices.some((idx) => idx < 0 || idx >= width)) {
+    console.warn("Invalid column indices for duplication");
+    return tr;
+  }
+
+  const mapStart = tr.mapping.maps.length;
+
+  for (let row = 0; row < height; row++) {
+    const lastColumnPos = map[row * width + columnIndices[columnIndices.length - 1]];
+    const nextColumnStart = lastColumnPos + (table.node.nodeAt(lastColumnPos)?.nodeSize ?? 0);
+    const insertPos = tr.mapping.slice(mapStart).map(table.start + nextColumnStart);
+
+    for (let i = columnIndices.length - 1; i >= 0; i--) {
+      const copiedNode = rows[row][columnIndices[i]];
+      if (copiedNode !== null) {
+        tr.insert(insertPos, copiedNode);
+      }
+    }
+  }
+
+  return tr;
+};
+
+/**
+ * @description Convert the table to cells.
+ * @param {TableNodeLocation} table - The table node location.
+ * @returns {TableRows} The table rows.
+ */
+const tableToCells = (table: TableNodeLocation): TableRows => {
+  const { map, width, height } = TableMap.get(table.node);
+
+  const visitedCells = new Set<number>();
+  const rows: TableRows = [];
+  for (let row = 0; row < height; row++) {
+    const cells: (ProseMirrorNode | null)[] = [];
+    for (let col = 0; col < width; col++) {
+      const pos = map[row * width + col];
+      cells.push(!visitedCells.has(pos) ? table.node.nodeAt(pos) : null);
+      visitedCells.add(pos);
+    }
+    rows.push(cells);
+  }
+
+  return rows;
+};
+
+/**
+ * @description Convert the cells to a table.
+ * @param {Editor} editor - The editor instance.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {TableRows} rows - The table rows.
+ * @param {Transaction} tr - The transaction.
+ */
+const tableFromCells = (editor: Editor, table: TableNodeLocation, rows: TableRows, tr: Transaction): void => {
+  const schema = editor.schema.nodes;
+  const newRowNodes = rows.map((row) =>
+    schema.tableRow.create(null, row.filter((cell) => cell !== null) as readonly Node[])
+  );
+  const newTableNode = table.node.copy(Fragment.from(newRowNodes));
+  tr.replaceWith(table.pos, table.pos + table.node.nodeSize, newTableNode);
+};
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/color-selector.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/color-selector.tsx
new file mode 100644
index 0000000..881129b
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/color-selector.tsx
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Disclosure } from "@headlessui/react";
+import type { Editor } from "@tiptap/core";
+import { Ban } from "lucide-react";
+import { ChevronRightOutline, PaletteOutline } from "@makeplane/propel/icons";
+// plane imports
+import { cn } from "@plane/utils";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+// TODO: implement text color selector
+
+type Props = {
+  editor: Editor;
+  onSelect: (color: string | null) => void;
+};
+
+const handleBackgroundColorChange = (editor: Editor, color: string | null) => {
+  editor
+    .chain()
+    .focus()
+    .updateAttributes(CORE_EXTENSIONS.TABLE_CELL, {
+      background: color,
+    })
+    .run();
+};
+
+// const handleTextColorChange = (editor: Editor, color: string | null) => {
+//   editor
+//     .chain()
+//     .focus()
+//     .updateAttributes(CORE_EXTENSIONS.TABLE_CELL, {
+//       textColor: color,
+//     })
+//     .run();
+// };
+
+export function TableDragHandleDropdownColorSelector(props: Props) {
+  const { editor, onSelect } = props;
+
+  return (
+    <Disclosure defaultOpen>
+      <Disclosure.Button
+        as="button"
+        type="button"
+        className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
+      >
+        {({ open }) => (
+          <>
+            <span className="flex items-center gap-2">
+              <PaletteOutline className="size-3 shrink-0" />
+              Color
+            </span>
+            <ChevronRightOutline
+              className={cn("size-3 shrink-0 transition-transform duration-200", {
+                "rotate-90": open,
+              })}
+            />
+          </>
+        )}
+      </Disclosure.Button>
+      <Disclosure.Panel className="mb-1.5 space-y-2 p-1">
+        {/* <div className="space-y-1.5">
+          <p className="text-11 text-tertiary font-semibold">Text colors</p>
+          <div className="flex items-center flex-wrap gap-2">
+            {COLORS_LIST.map((color) => (
+              <button
+                key={color.key}
+                type="button"
+                className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
+                style={{
+                  backgroundColor: color.textColor,
+                }}
+                onClick={() => handleTextColorChange(editor, color.textColor)}
+              />
+            ))}
+            <button
+              type="button"
+              className="flex-shrink-0 size-6 grid place-items-center rounded-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
+              onClick={() => handleTextColorChange(editor, null)}
+            >
+              <Ban className="size-4" />
+            </button>
+          </div>
+        </div> */}
+        <div className="space-y-1">
+          <p className="text-11 font-semibold text-tertiary">Background colors</p>
+          <div className="flex flex-wrap items-center gap-2">
+            {COLORS_LIST.map((color) => (
+              <button
+                key={color.key}
+                type="button"
+                className="size-6 flex-shrink-0 rounded-sm border-[0.5px] border-strong-1 transition-opacity hover:opacity-60"
+                style={{
+                  backgroundColor: color.backgroundColor,
+                }}
+                onClick={() => {
+                  handleBackgroundColorChange(editor, color.backgroundColor);
+                  onSelect(color.backgroundColor);
+                }}
+              />
+            ))}
+            <button
+              type="button"
+              className="grid size-6 flex-shrink-0 place-items-center rounded-sm border-[0.5px] border-strong-1 text-tertiary transition-colors hover:bg-layer-1-hover"
+              onClick={() => {
+                handleBackgroundColorChange(editor, null);
+                onSelect(null);
+              }}
+            >
+              <Ban className="size-4" />
+            </button>
+          </div>
+        </div>
+      </Disclosure.Panel>
+    </Disclosure>
+  );
+}
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/column/drag-handle.tsx
new file mode 100644
index 0000000..9d5edde
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -0,0 +1,265 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  shift,
+  flip,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  autoUpdate,
+  useClick,
+  useRole,
+  FloatingOverlay,
+  FloatingPortal,
+} from "@floating-ui/react";
+import type { Editor } from "@tiptap/core";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// extensions
+import {
+  findTable,
+  getTableHeightPx,
+  getTableWidthPx,
+  isCellSelection,
+  selectColumn,
+} from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { moveSelectedColumns } from "../actions";
+import {
+  DROP_MARKER_THICKNESS,
+  getColDragMarker,
+  getDropMarker,
+  hideDragMarker,
+  hideDropMarker,
+  updateColDragMarker,
+  updateColDropMarker,
+} from "../marker-utils";
+import { showCellContent } from "../utils";
+import { ColumnOptionsDropdown } from "./dropdown";
+import { calculateColumnDropIndex, constructColumnDragPreview, getTableColumnNodesInfo } from "./utils";
+
+export type ColumnDragHandleProps = {
+  col: number;
+  editor: Editor;
+};
+
+export function ColumnDragHandle(props: ColumnDragHandleProps) {
+  const { col, editor } = props;
+  // states
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // Track active event listeners for cleanup
+  const activeListenersRef = useRef<{
+    mouseup?: (e: MouseEvent) => void;
+    mousemove?: (e: MouseEvent) => void;
+  }>({});
+
+  // Cleanup window event listeners on unmount
+  useEffect(() => {
+    const listenersRef = activeListenersRef.current;
+    return () => {
+      // Remove any lingering window event listeners when component unmounts
+      if (listenersRef.mouseup) {
+        window.removeEventListener("mouseup", listenersRef.mouseup);
+      }
+      if (listenersRef.mousemove) {
+        window.removeEventListener("mousemove", listenersRef.mousemove);
+      }
+    };
+  }, []);
+  // floating ui
+  const { refs, floatingStyles, context } = useFloating({
+    placement: "bottom-start",
+    middleware: [
+      flip({
+        fallbackPlacements: ["top-start", "bottom-start", "top-end", "bottom-end"],
+      }),
+      shift({
+        padding: 8,
+      }),
+    ],
+    open: isDropdownOpen,
+    onOpenChange: (open) => {
+      setIsDropdownOpen(open);
+      if (open) {
+        editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
+      } else {
+        setTimeout(() => {
+          editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
+        }, 0);
+      }
+    },
+    whileElementsMounted: autoUpdate,
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click, role]);
+
+  useEffect(() => {
+    if (!isDropdownOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      context.onOpenChange(false);
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isDropdownOpen, context]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      // Prevent multiple simultaneous drag operations
+      // If there are already listeners attached, remove them first
+      if (activeListenersRef.current.mouseup) {
+        window.removeEventListener("mouseup", activeListenersRef.current.mouseup);
+      }
+      if (activeListenersRef.current.mousemove) {
+        window.removeEventListener("mousemove", activeListenersRef.current.mousemove);
+      }
+      activeListenersRef.current.mouseup = undefined;
+      activeListenersRef.current.mousemove = undefined;
+
+      const table = findTable(editor.state.selection);
+      if (!table) return;
+
+      editor.view.dispatch(selectColumn(table, col, editor.state.tr));
+
+      // drag column
+      const tableWidthPx = getTableWidthPx(table, editor);
+      const columns = getTableColumnNodesInfo(table, editor);
+
+      let dropIndex = col;
+      const startLeft = columns[col].left ?? 0;
+      const startX = e.clientX;
+      const tableElement = editor.view.nodeDOM(table.pos);
+
+      const dropMarker = tableElement instanceof HTMLElement ? getDropMarker(tableElement) : null;
+      const dragMarker = tableElement instanceof HTMLElement ? getColDragMarker(tableElement) : null;
+
+      const handleFinish = () => {
+        if (!dropMarker || !dragMarker) return;
+        hideDropMarker(dropMarker);
+        hideDragMarker(dragMarker);
+
+        // Show cell content by clearing decorations
+        if (isCellSelection(editor.state.selection)) {
+          showCellContent(editor);
+        }
+
+        if (col !== dropIndex) {
+          let tr = editor.state.tr;
+          const selection = editor.state.selection;
+          if (isCellSelection(selection)) {
+            const table = findTable(selection);
+            if (table) {
+              tr = moveSelectedColumns(editor, table, selection, dropIndex, tr);
+            }
+          }
+          editor.view.dispatch(tr);
+        }
+        window.removeEventListener("mouseup", handleFinish);
+        window.removeEventListener("mousemove", handleMove);
+        // Clear the ref
+        activeListenersRef.current.mouseup = undefined;
+        activeListenersRef.current.mousemove = undefined;
+      };
+
+      let pseudoColumn: HTMLElement | undefined;
+
+      const handleMove = (moveEvent: MouseEvent) => {
+        if (!dropMarker || !dragMarker) return;
+        const currentLeft = startLeft + moveEvent.clientX - startX;
+        dropIndex = calculateColumnDropIndex(col, columns, currentLeft);
+
+        if (!pseudoColumn) {
+          pseudoColumn = constructColumnDragPreview(editor, editor.state.selection, table);
+          const tableHeightPx = getTableHeightPx(table, editor);
+          if (pseudoColumn) {
+            pseudoColumn.style.height = `${tableHeightPx}px`;
+          }
+        }
+
+        const dragMarkerWidthPx = columns[col].width;
+        const dragMarkerLeftPx = Math.max(0, Math.min(currentLeft, tableWidthPx - dragMarkerWidthPx));
+        const dropMarkerLeftPx =
+          dropIndex <= col ? columns[dropIndex].left : columns[dropIndex].left + columns[dropIndex].width;
+
+        updateColDropMarker({
+          element: dropMarker,
+          left: dropMarkerLeftPx - Math.floor(DROP_MARKER_THICKNESS / 2) - 1,
+          width: DROP_MARKER_THICKNESS,
+        });
+        updateColDragMarker({
+          element: dragMarker,
+          left: dragMarkerLeftPx,
+          width: dragMarkerWidthPx,
+          pseudoColumn,
+        });
+      };
+
+      try {
+        // Store references for cleanup
+        activeListenersRef.current.mouseup = handleFinish;
+        activeListenersRef.current.mousemove = handleMove;
+        window.addEventListener("mouseup", handleFinish);
+        window.addEventListener("mousemove", handleMove);
+      } catch (error) {
+        console.error("Error in ColumnDragHandle:", error);
+        handleFinish();
+      }
+    },
+    [col, editor]
+  );
+
+  return (
+    <>
+      <div className="table-col-handle-container absolute top-0 left-0 z-20 flex w-full -translate-y-1/2 items-center justify-center">
+        <button
+          ref={refs.setReference}
+          {...getReferenceProps()}
+          type="button"
+          onMouseDown={handleMouseDown}
+          className={cn("rounded-sm border border-strong-1 bg-layer-1 px-1 transition-all duration-200 outline-none", {
+            "border-accent-strong bg-accent-primary !opacity-100": isDropdownOpen,
+            "hover:bg-layer-1-hover": !isDropdownOpen,
+          })}
+        >
+          <MoreHorizontalOutline className="size-4 text-primary" />
+        </button>
+      </div>
+      {isDropdownOpen && (
+        <FloatingPortal>
+          {/* Backdrop */}
+          <FloatingOverlay
+            style={{
+              zIndex: 99,
+            }}
+            lockScroll
+          />
+          <div
+            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+            style={{
+              ...floatingStyles,
+              zIndex: 100,
+            }}
+          >
+            <ColumnOptionsDropdown editor={editor} onClose={() => context.onOpenChange(false)} />
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx
new file mode 100644
index 0000000..2dc43bc
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { TableMap } from "@tiptap/pm/tables";
+import {
+  ArrowNarrowLeftOutline,
+  ArrowNarrowRightOutline,
+  CloseOutline,
+  CopyOutline,
+  DeleteOutline,
+  ToggleFilled,
+} from "@makeplane/propel/icons";
+import type { LucideIcon } from "lucide-react";
+// extensions
+import type { ISvgIcons } from "@plane/propel/icons";
+import { findTable, getSelectedColumns } from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { duplicateColumns } from "../actions";
+import { TableDragHandleDropdownColorSelector } from "../color-selector";
+
+const DROPDOWN_ITEMS: {
+  key: string;
+  label: string;
+  icon: LucideIcon | React.FC<ISvgIcons>;
+  action: (editor: Editor) => void;
+}[] = [
+  {
+    key: "insert-left",
+    label: "Insert left",
+    icon: ArrowNarrowLeftOutline,
+    action: (editor) => editor.chain().focus().addColumnBefore().run(),
+  },
+  {
+    key: "insert-right",
+    label: "Insert right",
+    icon: ArrowNarrowRightOutline,
+    action: (editor) => editor.chain().focus().addColumnAfter().run(),
+  },
+  {
+    key: "duplicate",
+    label: "Duplicate",
+    icon: CopyOutline,
+    action: (editor) => {
+      const table = findTable(editor.state.selection);
+      if (!table) return;
+
+      const tableMap = TableMap.get(table.node);
+      let tr = editor.state.tr;
+      const selectedColumns = getSelectedColumns(editor.state.selection, tableMap);
+      tr = duplicateColumns(table, selectedColumns, tr);
+      editor.view.dispatch(tr);
+    },
+  },
+  {
+    key: "clear-contents",
+    label: "Clear contents",
+    icon: CloseOutline,
+    action: (editor) => editor.chain().focus().clearSelectedCells().run(),
+  },
+  {
+    key: "delete",
+    label: "Delete",
+    icon: DeleteOutline,
+    action: (editor) => editor.chain().focus().deleteColumn().run(),
+  },
+];
+
+type Props = {
+  editor: Editor;
+  onClose: () => void;
+};
+
+export function ColumnOptionsDropdown(props: Props) {
+  const { editor, onClose } = props;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          editor.chain().focus().toggleHeaderColumn().run();
+          onClose();
+        }}
+      >
+        <div className="flex-grow truncate">Header column</div>
+        <ToggleFilled className="size-3 shrink-0" />
+      </button>
+      <hr className="my-2 border-subtle" />
+      <TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
+      {DROPDOWN_ITEMS.map((item) => (
+        <button
+          key={item.key}
+          type="button"
+          className="flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            item.action(editor);
+            onClose();
+          }}
+        >
+          <item.icon className="size-3 shrink-0" />
+          <div className="flex-grow truncate">{item.label}</div>
+        </button>
+      ))}
+    </>
+  );
+}
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/column/plugin.ts b/packages/editor/src/extensions/table/plugins/drag-handles/column/plugin.ts
new file mode 100644
index 0000000..e42380b
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/column/plugin.ts
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { TableMap } from "@tiptap/pm/tables";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { ReactRenderer } from "@tiptap/react";
+// extensions
+import {
+  findTable,
+  getTableCellWidgetDecorationPos,
+  haveTableRelatedChanges,
+} from "@/extensions/table/table/utilities/helpers";
+// local imports
+import type { ColumnDragHandleProps } from "./drag-handle";
+import { ColumnDragHandle } from "./drag-handle";
+
+type TableColumnDragHandlePluginState = {
+  decorations?: DecorationSet;
+  // track table structure to detect changes
+  tableWidth?: number;
+  tableNodePos?: number;
+  // track renderers for cleanup
+  renderers?: ReactRenderer[];
+};
+
+const TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY = new PluginKey("tableColumnHandlerDecorationPlugin");
+
+export const TableColumnDragHandlePlugin = (editor: Editor): Plugin<TableColumnDragHandlePluginState> =>
+  new Plugin<TableColumnDragHandlePluginState>({
+    key: TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY,
+    state: {
+      init: () => ({}),
+      apply(tr, prev, oldState, newState) {
+        const table = findTable(newState.selection);
+        if (!haveTableRelatedChanges(editor, table, oldState, newState, tr)) {
+          return table !== undefined ? prev : {};
+        }
+
+        const tableMap = TableMap.get(table.node);
+
+        // Check if table structure changed (width or position)
+        const tableStructureChanged = prev.tableWidth !== tableMap.width || prev.tableNodePos !== table.pos;
+
+        let isStale = tableStructureChanged;
+
+        // Only do position-based stale check if structure hasn't changed
+        if (!isStale) {
+          const mapped = prev.decorations?.map(tr.mapping, tr.doc);
+          for (let col = 0; col < tableMap.width; col++) {
+            const pos = getTableCellWidgetDecorationPos(table, tableMap, col);
+            if (mapped?.find(pos, pos + 1)?.length !== 1) {
+              isStale = true;
+              break;
+            }
+          }
+        }
+
+        if (!isStale) {
+          const mapped = prev.decorations?.map(tr.mapping, tr.doc);
+          return {
+            decorations: mapped,
+            tableWidth: tableMap.width,
+            tableNodePos: table.pos,
+            renderers: prev.renderers,
+          };
+        }
+
+        // Clean up old renderers before creating new ones
+        prev.renderers?.forEach((renderer) => {
+          try {
+            renderer.destroy();
+          } catch (error) {
+            console.error("Error destroying renderer:", error);
+          }
+        });
+
+        // recreate all decorations
+        const decorations: Decoration[] = [];
+        const renderers: ReactRenderer[] = [];
+
+        for (let col = 0; col < tableMap.width; col++) {
+          const pos = getTableCellWidgetDecorationPos(table, tableMap, col);
+
+          const dragHandleComponent = new ReactRenderer(ColumnDragHandle, {
+            props: {
+              col,
+              editor,
+            } satisfies ColumnDragHandleProps,
+            editor,
+          });
+
+          renderers.push(dragHandleComponent);
+          decorations.push(Decoration.widget(pos, () => dragHandleComponent.element));
+        }
+
+        return {
+          decorations: DecorationSet.create(newState.doc, decorations),
+          tableWidth: tableMap.width,
+          tableNodePos: table.pos,
+          renderers,
+        };
+      },
+    },
+    props: {
+      decorations(state) {
+        return (TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY.getState(state) as TableColumnDragHandlePluginState | undefined)
+          ?.decorations;
+      },
+    },
+    destroy() {
+      // Clean up all renderers when plugin is destroyed
+      const state =
+        editor.state &&
+        (TABLE_COLUMN_DRAG_HANDLE_PLUGIN_KEY.getState(editor.state) as TableColumnDragHandlePluginState | undefined);
+      state?.renderers?.forEach((renderer: ReactRenderer) => {
+        try {
+          renderer.destroy();
+        } catch (error) {
+          console.error("Error destroying renderer:", error);
+        }
+      });
+    },
+  });
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/column/utils.ts b/packages/editor/src/extensions/table/plugins/drag-handles/column/utils.ts
new file mode 100644
index 0000000..ec3717d
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/column/utils.ts
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import type { Selection } from "@tiptap/pm/state";
+import { TableMap } from "@tiptap/pm/tables";
+// extensions
+import { getSelectedRect, isCellSelection } from "@/extensions/table/table/utilities/helpers";
+import type { TableNodeLocation } from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { cloneTableCell, constructDragPreviewTable, getSelectedCellPositions, hideCellContent } from "../utils";
+
+type TableColumn = {
+  left: number;
+  width: number;
+};
+
+/**
+ * @description Calculate the index where the dragged column should be dropped.
+ * @param {number} col - The column index.
+ * @param {TableColumn[]} columns - The columns.
+ * @param {number} left - The left position of the dragged column.
+ * @returns {number} The index where the dragged column should be dropped.
+ */
+export const calculateColumnDropIndex = (col: number, columns: TableColumn[], left: number): number => {
+  const currentColumnLeft = columns[col].left;
+  const currentColumnRight = currentColumnLeft + columns[col].width;
+
+  const draggedColumnLeft = left;
+  const draggedColumnRight = draggedColumnLeft + columns[col].width;
+
+  const isDraggingToLeft = draggedColumnLeft < currentColumnLeft;
+  const isDraggingToRight = draggedColumnRight > currentColumnRight;
+
+  const isFirstColumn = col === 0;
+  const isLastColumn = col === columns.length - 1;
+
+  if ((isFirstColumn && isDraggingToLeft) || (isLastColumn && isDraggingToRight)) {
+    return col;
+  }
+
+  const firstColumn = columns[0];
+  if (isDraggingToLeft && draggedColumnLeft <= firstColumn.left) {
+    return 0;
+  }
+
+  const lastColumn = columns[columns.length - 1];
+  if (isDraggingToRight && draggedColumnRight >= lastColumn.left + lastColumn.width) {
+    return columns.length - 1;
+  }
+
+  let dropColumnIndex = col;
+  if (isDraggingToRight) {
+    const findHoveredColumn = columns.find((p, index) => {
+      if (index === col) return false;
+      const currentColumnCenter = p.left + p.width / 2;
+      const currentColumnEdge = p.left + p.width;
+      const nextColumn = columns[index + 1] as TableColumn | undefined;
+      const nextColumnCenter = nextColumn ? nextColumn.width / 2 : 0;
+
+      return draggedColumnRight >= currentColumnCenter && draggedColumnRight < currentColumnEdge + nextColumnCenter;
+    });
+    if (findHoveredColumn) {
+      dropColumnIndex = columns.indexOf(findHoveredColumn);
+    }
+  }
+
+  if (isDraggingToLeft) {
+    const findHoveredColumn = columns.find((p, index) => {
+      if (index === col) return false;
+      const currentColumnCenter = p.left + p.width / 2;
+      const prevColumn = columns[index - 1] as TableColumn | undefined;
+      const prevColumnLeft = prevColumn ? prevColumn.left : 0;
+      const prevColumnCenter = prevColumn ? prevColumn.width / 2 : 0;
+
+      return draggedColumnLeft <= currentColumnCenter && draggedColumnLeft > prevColumnLeft + prevColumnCenter;
+    });
+    if (findHoveredColumn) {
+      dropColumnIndex = columns.indexOf(findHoveredColumn);
+    }
+  }
+
+  return dropColumnIndex;
+};
+
+/**
+ * @description Get the node information of the columns in the table- their offset left and width.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {Editor} editor - The editor instance.
+ * @returns {TableColumn[]} The information of the columns in the table.
+ */
+export const getTableColumnNodesInfo = (table: TableNodeLocation, editor: Editor): TableColumn[] => {
+  const result: TableColumn[] = [];
+  let leftPx = 0;
+
+  const tableMap = TableMap.get(table.node);
+  if (!tableMap || tableMap.height === 0 || tableMap.width === 0) {
+    return result;
+  }
+
+  for (let col = 0; col < tableMap.width; col++) {
+    const cellPos = tableMap.map[col];
+    if (cellPos === undefined) continue;
+
+    const dom = editor.view.domAtPos(table.start + cellPos + 1);
+    if (dom.node instanceof HTMLElement) {
+      if (col === 0) {
+        leftPx = dom.node.offsetLeft;
+      }
+      result.push({
+        left: dom.node.offsetLeft - leftPx,
+        width: dom.node.offsetWidth,
+      });
+    }
+  }
+  return result;
+};
+
+/**
+ * @description Construct a pseudo column from the selected cells for drag preview.
+ * @param {Editor} editor - The editor instance.
+ * @param {Selection} selection - The selection.
+ * @param {TableNodeLocation} table - The table node location.
+ * @returns {HTMLElement | undefined} The pseudo column.
+ */
+export const constructColumnDragPreview = (
+  editor: Editor,
+  selection: Selection,
+  table: TableNodeLocation
+): HTMLElement | undefined => {
+  if (!isCellSelection(selection)) return;
+
+  const tableMap = TableMap.get(table.node);
+  const selectedColRect = getSelectedRect(selection, tableMap);
+  const activeColCells = tableMap.cellsInRect(selectedColRect);
+
+  const { tableElement, tableBodyElement } = constructDragPreviewTable();
+
+  activeColCells.forEach((cellPos) => {
+    const resolvedCellPos = table.start + cellPos + 1;
+    const cellElement = editor.view.domAtPos(resolvedCellPos).node;
+    if (cellElement instanceof HTMLElement) {
+      const { clonedCellElement } = cloneTableCell(cellElement);
+      clonedCellElement.style.height = cellElement.getBoundingClientRect().height + "px";
+      const tableRowElement = document.createElement("tr");
+      tableRowElement.appendChild(clonedCellElement);
+      tableBodyElement.appendChild(tableRowElement);
+    }
+  });
+
+  // Hide the selected cells using decorations (local only, not persisted)
+  const cellPositions = getSelectedCellPositions(selection, table);
+  hideCellContent(editor, cellPositions);
+
+  return tableElement;
+};
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/marker-utils.ts b/packages/editor/src/extensions/table/plugins/drag-handles/marker-utils.ts
new file mode 100644
index 0000000..12a13d4
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/marker-utils.ts
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const DROP_MARKER_CLASS = "table-drop-marker";
+export const COL_DRAG_MARKER_CLASS = "table-col-drag-marker";
+export const ROW_DRAG_MARKER_CLASS = "table-row-drag-marker";
+
+export const DROP_MARKER_THICKNESS = 2;
+
+export const getDropMarker = (tableElement: HTMLElement): HTMLElement | null =>
+  tableElement.querySelector(`.${DROP_MARKER_CLASS}`);
+
+export const hideDropMarker = (element: HTMLElement): void => {
+  if (!element.classList.contains("hidden")) {
+    element.classList.add("hidden");
+  }
+};
+
+export const updateColDropMarker = ({
+  element,
+  left,
+  width,
+}: {
+  element: HTMLElement;
+  left: number;
+  width: number;
+}) => {
+  element.style.height = "100%";
+  element.style.width = `${width}px`;
+  element.style.top = "0";
+  element.style.left = `${left}px`;
+  element.classList.remove("hidden");
+};
+
+export const updateRowDropMarker = ({
+  element,
+  top,
+  height,
+}: {
+  element: HTMLElement;
+  top: number;
+  height: number;
+}) => {
+  element.style.width = "100%";
+  element.style.height = `${height}px`;
+  element.style.left = "0";
+  element.style.top = `${top}px`;
+  element.classList.remove("hidden");
+};
+
+export const getColDragMarker = (tableElement: HTMLElement): HTMLElement | null =>
+  tableElement.querySelector(`.${COL_DRAG_MARKER_CLASS}`);
+
+export const getRowDragMarker = (tableElement: HTMLElement): HTMLElement | null =>
+  tableElement.querySelector(`.${ROW_DRAG_MARKER_CLASS}`);
+
+export const hideDragMarker = (element: HTMLElement): void => {
+  if (!element.classList.contains("hidden")) {
+    element.classList.add("hidden");
+  }
+};
+
+export const updateColDragMarker = ({
+  element,
+  left,
+  width,
+  pseudoColumn,
+}: {
+  element: HTMLElement;
+  left: number;
+  width: number;
+  pseudoColumn: HTMLElement | undefined;
+}) => {
+  element.style.left = `${left}px`;
+  element.style.width = `${width}px`;
+  element.classList.remove("hidden");
+  if (pseudoColumn) {
+    /// clear existing content
+    while (element.firstChild) {
+      element.removeChild(element.firstChild);
+    }
+    // clone and append the pseudo column
+    element.appendChild(pseudoColumn.cloneNode(true));
+  }
+};
+
+export const updateRowDragMarker = ({
+  element,
+  top,
+  height,
+  pseudoRow,
+}: {
+  element: HTMLElement;
+  top: number;
+  height: number;
+  pseudoRow: HTMLElement | undefined;
+}) => {
+  element.style.top = `${top}px`;
+  element.style.height = `${height}px`;
+  element.classList.remove("hidden");
+  if (pseudoRow) {
+    /// clear existing content
+    while (element.firstChild) {
+      element.removeChild(element.firstChild);
+    }
+    // clone and append the pseudo row
+    element.appendChild(pseudoRow.cloneNode(true));
+  }
+};
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/row/drag-handle.tsx
new file mode 100644
index 0000000..d970b01
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -0,0 +1,264 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  autoUpdate,
+  flip,
+  FloatingOverlay,
+  FloatingPortal,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react";
+import type { Editor } from "@tiptap/core";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+// plane imports
+import { cn } from "@plane/utils";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// extensions
+import {
+  findTable,
+  getTableHeightPx,
+  getTableWidthPx,
+  isCellSelection,
+  selectRow,
+} from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { moveSelectedRows } from "../actions";
+import {
+  DROP_MARKER_THICKNESS,
+  getDropMarker,
+  getRowDragMarker,
+  hideDragMarker,
+  hideDropMarker,
+  updateRowDragMarker,
+  updateRowDropMarker,
+} from "../marker-utils";
+import { showCellContent } from "../utils";
+import { RowOptionsDropdown } from "./dropdown";
+import { calculateRowDropIndex, constructRowDragPreview, getTableRowNodesInfo } from "./utils";
+
+export type RowDragHandleProps = {
+  editor: Editor;
+  row: number;
+};
+
+export function RowDragHandle(props: RowDragHandleProps) {
+  const { editor, row } = props;
+  // states
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // Track active event listeners for cleanup
+  const activeListenersRef = useRef<{
+    mouseup?: (e: MouseEvent) => void;
+    mousemove?: (e: MouseEvent) => void;
+  }>({});
+
+  // Cleanup window event listeners on unmount
+  useEffect(() => {
+    const listenersRef = activeListenersRef.current;
+    return () => {
+      // Remove any lingering window event listeners when component unmounts
+      if (listenersRef.mouseup) {
+        window.removeEventListener("mouseup", listenersRef.mouseup);
+      }
+      if (listenersRef.mousemove) {
+        window.removeEventListener("mousemove", listenersRef.mousemove);
+      }
+    };
+  }, []);
+  // floating ui
+  const { refs, floatingStyles, context } = useFloating({
+    placement: "bottom-start",
+    middleware: [
+      flip({
+        fallbackPlacements: ["top-start", "bottom-start", "top-end", "bottom-end"],
+      }),
+      shift({
+        padding: 8,
+      }),
+    ],
+    open: isDropdownOpen,
+    onOpenChange: (open) => {
+      setIsDropdownOpen(open);
+      if (open) {
+        editor.commands.addActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
+      } else {
+        setTimeout(() => {
+          editor.commands.removeActiveDropbarExtension(CORE_EXTENSIONS.TABLE);
+        }, 0);
+      }
+    },
+    whileElementsMounted: autoUpdate,
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, click, role]);
+
+  useEffect(() => {
+    if (!isDropdownOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      context.onOpenChange(false);
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isDropdownOpen, context]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      // Prevent multiple simultaneous drag operations
+      // If there are already listeners attached, remove them first
+      if (activeListenersRef.current.mouseup) {
+        window.removeEventListener("mouseup", activeListenersRef.current.mouseup);
+      }
+      if (activeListenersRef.current.mousemove) {
+        window.removeEventListener("mousemove", activeListenersRef.current.mousemove);
+      }
+      activeListenersRef.current.mouseup = undefined;
+      activeListenersRef.current.mousemove = undefined;
+
+      const table = findTable(editor.state.selection);
+      if (!table) return;
+
+      editor.view.dispatch(selectRow(table, row, editor.state.tr));
+
+      // drag row
+      const tableHeightPx = getTableHeightPx(table, editor);
+      const rows = getTableRowNodesInfo(table, editor);
+
+      let dropIndex = row;
+      const startTop = rows[row].top ?? 0;
+      const startY = e.clientY;
+      const tableElement = editor.view.nodeDOM(table.pos);
+
+      const dropMarker = tableElement instanceof HTMLElement ? getDropMarker(tableElement) : null;
+      const dragMarker = tableElement instanceof HTMLElement ? getRowDragMarker(tableElement) : null;
+
+      const handleFinish = (): void => {
+        if (!dropMarker || !dragMarker) return;
+        hideDropMarker(dropMarker);
+        hideDragMarker(dragMarker);
+
+        // Show cell content by clearing decorations
+        if (isCellSelection(editor.state.selection)) {
+          showCellContent(editor);
+        }
+
+        if (row !== dropIndex) {
+          let tr = editor.state.tr;
+          const selection = editor.state.selection;
+          if (isCellSelection(selection)) {
+            const table = findTable(selection);
+            if (table) {
+              tr = moveSelectedRows(editor, table, selection, dropIndex, tr);
+            }
+          }
+          editor.view.dispatch(tr);
+        }
+        window.removeEventListener("mouseup", handleFinish);
+        window.removeEventListener("mousemove", handleMove);
+        // Clear the ref
+        activeListenersRef.current.mouseup = undefined;
+        activeListenersRef.current.mousemove = undefined;
+      };
+
+      let pseudoRow: HTMLElement | undefined;
+
+      const handleMove = (moveEvent: MouseEvent): void => {
+        if (!dropMarker || !dragMarker) return;
+        const cursorTop = startTop + moveEvent.clientY - startY;
+        dropIndex = calculateRowDropIndex(row, rows, cursorTop);
+
+        if (!pseudoRow) {
+          pseudoRow = constructRowDragPreview(editor, editor.state.selection, table);
+          const tableWidthPx = getTableWidthPx(table, editor);
+          if (pseudoRow) {
+            pseudoRow.style.width = `${tableWidthPx}px`;
+          }
+        }
+
+        const dragMarkerHeightPx = rows[row].height;
+        const dragMarkerTopPx = Math.max(0, Math.min(cursorTop, tableHeightPx - dragMarkerHeightPx));
+        const dropMarkerTopPx = dropIndex <= row ? rows[dropIndex].top : rows[dropIndex].top + rows[dropIndex].height;
+
+        updateRowDropMarker({
+          element: dropMarker,
+          top: dropMarkerTopPx - DROP_MARKER_THICKNESS / 2,
+          height: DROP_MARKER_THICKNESS,
+        });
+        updateRowDragMarker({
+          element: dragMarker,
+          top: dragMarkerTopPx,
+          height: dragMarkerHeightPx,
+          pseudoRow,
+        });
+      };
+
+      try {
+        // Store references for cleanup
+        activeListenersRef.current.mouseup = handleFinish;
+        activeListenersRef.current.mousemove = handleMove;
+        window.addEventListener("mouseup", handleFinish);
+        window.addEventListener("mousemove", handleMove);
+      } catch (error) {
+        console.error("Error in RowDragHandle:", error);
+        handleFinish();
+      }
+    },
+    [editor, row]
+  );
+
+  return (
+    <>
+      <div className="table-row-handle-container absolute top-0 left-0 z-20 flex h-full -translate-x-1/2 items-center justify-center">
+        <button
+          ref={refs.setReference}
+          {...getReferenceProps()}
+          type="button"
+          onMouseDown={handleMouseDown}
+          className={cn("rounded-sm border border-strong-1 bg-layer-1 py-1 transition-all duration-200 outline-none", {
+            "border-accent-strong bg-accent-primary !opacity-100": isDropdownOpen,
+            "hover:bg-layer-1-hover": !isDropdownOpen,
+          })}
+        >
+          <MoreHorizontalOutline className="size-4 rotate-90 text-primary" />
+        </button>
+      </div>
+      {isDropdownOpen && (
+        <FloatingPortal>
+          {/* Backdrop */}
+          <FloatingOverlay
+            style={{
+              zIndex: 99,
+            }}
+            lockScroll
+          />
+          <div
+            className="max-h-[90vh] w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200"
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+            style={{
+              ...floatingStyles,
+              zIndex: 100,
+            }}
+          >
+            <RowOptionsDropdown editor={editor} onClose={() => context.onOpenChange(false)} />
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx
new file mode 100644
index 0000000..1ad0b76
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { TableMap } from "@tiptap/pm/tables";
+import {
+  ArrowDownOutline,
+  CloseOutline,
+  CopyOutline,
+  DeleteOutline,
+  ToggleFilled,
+  TopArrowOutline,
+} from "@makeplane/propel/icons";
+import type { LucideIcon } from "lucide-react";
+// extensions
+import type { ISvgIcons } from "@plane/propel/icons";
+import { findTable, getSelectedRows } from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { duplicateRows } from "../actions";
+import { TableDragHandleDropdownColorSelector } from "../color-selector";
+
+const DROPDOWN_ITEMS: {
+  key: string;
+  label: string;
+  icon: LucideIcon | React.FC<ISvgIcons>;
+  action: (editor: Editor) => void;
+}[] = [
+  {
+    key: "insert-above",
+    label: "Insert above",
+    icon: TopArrowOutline,
+    action: (editor) => editor.chain().focus().addRowBefore().run(),
+  },
+  {
+    key: "insert-below",
+    label: "Insert below",
+    icon: ArrowDownOutline,
+    action: (editor) => editor.chain().focus().addRowAfter().run(),
+  },
+  {
+    key: "duplicate",
+    label: "Duplicate",
+    icon: CopyOutline,
+    action: (editor) => {
+      const table = findTable(editor.state.selection);
+      if (!table) return;
+
+      const tableMap = TableMap.get(table.node);
+      let tr = editor.state.tr;
+      const selectedRows = getSelectedRows(editor.state.selection, tableMap);
+      tr = duplicateRows(table, selectedRows, tr);
+      editor.view.dispatch(tr);
+    },
+  },
+  {
+    key: "clear-contents",
+    label: "Clear contents",
+    icon: CloseOutline,
+    action: (editor) => editor.chain().focus().clearSelectedCells().run(),
+  },
+  {
+    key: "delete",
+    label: "Delete",
+    icon: DeleteOutline,
+    action: (editor) => editor.chain().focus().deleteRow().run(),
+  },
+];
+
+type Props = {
+  editor: Editor;
+  onClose: () => void;
+};
+
+export function RowOptionsDropdown(props: Props) {
+  const { editor, onClose } = props;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="flex w-full items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          editor.chain().focus().toggleHeaderRow().run();
+          onClose();
+        }}
+      >
+        <div className="flex-grow truncate">Header row</div>
+        <ToggleFilled className="size-3 shrink-0" />
+      </button>
+      <hr className="my-2 border-subtle" />
+      <TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
+      {DROPDOWN_ITEMS.map((item) => (
+        <button
+          key={item.key}
+          type="button"
+          className="flex w-full items-center gap-2 truncate rounded-sm px-1 py-1.5 text-left text-11 text-secondary hover:bg-layer-1"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            item.action(editor);
+            onClose();
+          }}
+        >
+          <item.icon className="size-3 shrink-0" />
+          <div className="flex-grow truncate">{item.label}</div>
+        </button>
+      ))}
+    </>
+  );
+}
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/row/plugin.ts b/packages/editor/src/extensions/table/plugins/drag-handles/row/plugin.ts
new file mode 100644
index 0000000..cc33da4
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/row/plugin.ts
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { TableMap } from "@tiptap/pm/tables";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { ReactRenderer } from "@tiptap/react";
+// extensions
+import {
+  findTable,
+  getTableCellWidgetDecorationPos,
+  haveTableRelatedChanges,
+} from "@/extensions/table/table/utilities/helpers";
+// local imports
+import type { RowDragHandleProps } from "./drag-handle";
+import { RowDragHandle } from "./drag-handle";
+
+type TableRowDragHandlePluginState = {
+  decorations?: DecorationSet;
+  // track table structure to detect changes
+  tableHeight?: number;
+  tableNodePos?: number;
+  // track renderers for cleanup
+  renderers?: ReactRenderer[];
+};
+
+const TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY = new PluginKey("tableRowDragHandlePlugin");
+
+export const TableRowDragHandlePlugin = (editor: Editor): Plugin<TableRowDragHandlePluginState> =>
+  new Plugin<TableRowDragHandlePluginState>({
+    key: TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY,
+    state: {
+      init: () => ({}),
+      apply(tr, prev, oldState, newState) {
+        const table = findTable(newState.selection);
+        if (!haveTableRelatedChanges(editor, table, oldState, newState, tr)) {
+          return table !== undefined ? prev : {};
+        }
+
+        const tableMap = TableMap.get(table.node);
+
+        // Check if table structure changed (height or position)
+        const tableStructureChanged = prev.tableHeight !== tableMap.height || prev.tableNodePos !== table.pos;
+
+        let isStale = tableStructureChanged;
+
+        // Only do position-based stale check if structure hasn't changed
+        if (!isStale) {
+          const mapped = prev.decorations?.map(tr.mapping, tr.doc);
+          for (let row = 0; row < tableMap.height; row++) {
+            const pos = getTableCellWidgetDecorationPos(table, tableMap, row * tableMap.width);
+            if (mapped?.find(pos, pos + 1)?.length !== 1) {
+              isStale = true;
+              break;
+            }
+          }
+        }
+
+        if (!isStale) {
+          const mapped = prev.decorations?.map(tr.mapping, tr.doc);
+          return {
+            decorations: mapped,
+            tableHeight: tableMap.height,
+            tableNodePos: table.pos,
+            renderers: prev.renderers,
+          };
+        }
+
+        // Clean up old renderers before creating new ones
+        prev.renderers?.forEach((renderer) => {
+          try {
+            renderer.destroy();
+          } catch (error) {
+            console.error("Error destroying renderer:", error);
+          }
+        });
+
+        // recreate all decorations
+        const decorations: Decoration[] = [];
+        const renderers: ReactRenderer[] = [];
+
+        for (let row = 0; row < tableMap.height; row++) {
+          const pos = getTableCellWidgetDecorationPos(table, tableMap, row * tableMap.width);
+
+          const dragHandleComponent = new ReactRenderer(RowDragHandle, {
+            props: {
+              editor,
+              row,
+            } satisfies RowDragHandleProps,
+            editor,
+          });
+
+          renderers.push(dragHandleComponent);
+          decorations.push(Decoration.widget(pos, () => dragHandleComponent.element));
+        }
+
+        return {
+          decorations: DecorationSet.create(newState.doc, decorations),
+          tableHeight: tableMap.height,
+          tableNodePos: table.pos,
+          renderers,
+        };
+      },
+    },
+    props: {
+      decorations(state) {
+        return (TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY.getState(state) as TableRowDragHandlePluginState | undefined)
+          ?.decorations;
+      },
+    },
+    destroy() {
+      // Clean up all renderers when plugin is destroyed
+      const state =
+        editor.state &&
+        (TABLE_ROW_DRAG_HANDLE_PLUGIN_KEY.getState(editor.state) as TableRowDragHandlePluginState | undefined);
+      state?.renderers?.forEach((renderer: ReactRenderer) => {
+        try {
+          renderer.destroy();
+        } catch (error) {
+          console.error("Error destroying renderer:", error);
+        }
+      });
+    },
+  });
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/row/utils.ts b/packages/editor/src/extensions/table/plugins/drag-handles/row/utils.ts
new file mode 100644
index 0000000..d10ec40
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/row/utils.ts
@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import type { Selection } from "@tiptap/pm/state";
+import { TableMap } from "@tiptap/pm/tables";
+// extensions
+import { getSelectedRect, isCellSelection } from "@/extensions/table/table/utilities/helpers";
+import type { TableNodeLocation } from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { cloneTableCell, constructDragPreviewTable, getSelectedCellPositions, hideCellContent } from "../utils";
+
+type TableRow = {
+  top: number;
+  height: number;
+};
+
+/**
+ * @description Calculate the index where the dragged row should be dropped.
+ * @param {number} row - The row index.
+ * @param {TableRow[]} rows - The rows.
+ * @param {number} top - The top position of the dragged row.
+ * @returns {number} The index where the dragged row should be dropped.
+ */
+export const calculateRowDropIndex = (row: number, rows: TableRow[], top: number): number => {
+  const currentRowTop = rows[row].top;
+  const currentRowBottom = currentRowTop + rows[row].height;
+
+  const draggedRowTop = top;
+  const draggedRowBottom = draggedRowTop + rows[row].height;
+
+  const isDraggingUp = draggedRowTop < currentRowTop;
+  const isDraggingDown = draggedRowBottom > currentRowBottom;
+
+  const isFirstRow = row === 0;
+  const isLastRow = row === rows.length - 1;
+
+  if ((isFirstRow && isDraggingUp) || (isLastRow && isDraggingDown)) {
+    return row;
+  }
+
+  const firstRow = rows[0];
+  if (isDraggingUp && draggedRowTop <= firstRow.top) {
+    return 0;
+  }
+
+  const lastRow = rows[rows.length - 1];
+  if (isDraggingDown && draggedRowBottom >= lastRow.top + lastRow.height) {
+    return rows.length - 1;
+  }
+
+  let dropRowIndex = row;
+  if (isDraggingDown) {
+    const findHoveredRow = rows.find((p, index) => {
+      if (index === row) return false;
+      const currentRowCenter = p.top + p.height / 2;
+      const currentRowEdge = p.top + p.height;
+      const nextRow = rows[index + 1] as TableRow | undefined;
+      const nextRowCenter = nextRow ? nextRow.height / 2 : 0;
+
+      return draggedRowBottom >= currentRowCenter && draggedRowBottom < currentRowEdge + nextRowCenter;
+    });
+    if (findHoveredRow) {
+      dropRowIndex = rows.indexOf(findHoveredRow);
+    }
+  }
+
+  if (isDraggingUp) {
+    const findHoveredRow = rows.find((p, index) => {
+      if (index === row) return false;
+      const currentRowCenter = p.top + p.height / 2;
+      const prevRow = rows[index - 1] as TableRow | undefined;
+      const prevRowTop = prevRow ? prevRow.top : 0;
+      const prevRowCenter = prevRow ? prevRow.height / 2 : 0;
+
+      return draggedRowTop <= currentRowCenter && draggedRowTop > prevRowTop + prevRowCenter;
+    });
+    if (findHoveredRow) {
+      dropRowIndex = rows.indexOf(findHoveredRow);
+    }
+  }
+
+  return dropRowIndex;
+};
+
+/**
+ * @description Get the node information of the rows in the table- their offset top and height.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {Editor} editor - The editor instance.
+ * @returns {TableRow[]} The information of the rows in the table.
+ */
+export const getTableRowNodesInfo = (table: TableNodeLocation, editor: Editor): TableRow[] => {
+  const result: TableRow[] = [];
+  let topPx = 0;
+
+  const tableMap = TableMap.get(table.node);
+  if (!tableMap || tableMap.height === 0 || tableMap.width === 0) {
+    return result;
+  }
+
+  for (let row = 0; row < tableMap.height; row++) {
+    const cellPos = tableMap.map[row * tableMap.width];
+    if (cellPos === undefined) continue;
+    const dom = editor.view.domAtPos(table.start + cellPos);
+    if (dom.node instanceof HTMLElement) {
+      const heightPx = dom.node.offsetHeight;
+      result.push({
+        top: topPx,
+        height: heightPx,
+      });
+      topPx += heightPx;
+    }
+  }
+  return result;
+};
+
+/**
+ * @description Construct a pseudo column from the selected cells for drag preview.
+ * @param {Editor} editor - The editor instance.
+ * @param {Selection} selection - The selection.
+ * @param {TableNodeLocation} table - The table node location.
+ * @returns {HTMLElement | undefined} The pseudo column.
+ */
+export const constructRowDragPreview = (
+  editor: Editor,
+  selection: Selection,
+  table: TableNodeLocation
+): HTMLElement | undefined => {
+  if (!isCellSelection(selection)) return;
+
+  const tableMap = TableMap.get(table.node);
+  const selectedRowRect = getSelectedRect(selection, tableMap);
+  const activeRowCells = tableMap.cellsInRect(selectedRowRect);
+
+  const { tableElement, tableBodyElement } = constructDragPreviewTable();
+
+  const tableRowElement = document.createElement("tr");
+  tableBodyElement.appendChild(tableRowElement);
+
+  activeRowCells.forEach((cellPos) => {
+    const resolvedCellPos = table.start + cellPos + 1;
+    const cellElement = editor.view.domAtPos(resolvedCellPos).node;
+    if (cellElement instanceof HTMLElement) {
+      const { clonedCellElement } = cloneTableCell(cellElement);
+      clonedCellElement.style.width = cellElement.getBoundingClientRect().width + "px";
+      tableRowElement.appendChild(clonedCellElement);
+    }
+  });
+
+  // Hide the selected cells using decorations (local only, not persisted)
+  const cellPositions = getSelectedCellPositions(selection, table);
+  hideCellContent(editor, cellPositions);
+
+  return tableElement;
+};
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/utils.ts b/packages/editor/src/extensions/table/plugins/drag-handles/utils.ts
new file mode 100644
index 0000000..9d7e8df
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/utils.ts
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import type { Selection } from "@tiptap/pm/state";
+import { TableMap } from "@tiptap/pm/tables";
+// constants
+import { CORE_EDITOR_META } from "@/constants/meta";
+// extensions
+import { getSelectedRect, isCellSelection } from "@/extensions/table/table/utilities/helpers";
+import type { TableNodeLocation } from "@/extensions/table/table/utilities/helpers";
+// local imports
+import { updateTransactionMeta } from "../drag-state";
+
+/**
+ * @description Construct a pseudo table element which will act as a parent for column and row drag previews.
+ * @returns {HTMLTableElement} The pseudo table.
+ */
+export const constructDragPreviewTable = (): {
+  tableElement: HTMLTableElement;
+  tableBodyElement: HTMLTableSectionElement;
+} => {
+  const tableElement = document.createElement("table");
+  tableElement.classList.add("table-drag-preview");
+  tableElement.classList.add("bg-surface-1");
+  tableElement.style.opacity = "0.9";
+  const tableBodyElement = document.createElement("tbody");
+  tableElement.appendChild(tableBodyElement);
+
+  return { tableElement, tableBodyElement };
+};
+
+/**
+ * @description Clone a table cell element.
+ * @param {HTMLElement} cellElement - The cell element to clone.
+ * @returns {HTMLElement} The cloned cell element.
+ */
+export const cloneTableCell = (
+  cellElement: HTMLElement
+): {
+  clonedCellElement: HTMLElement;
+} => {
+  const clonedCellElement = cellElement.cloneNode(true) as HTMLElement;
+  clonedCellElement.style.setProperty("visibility", "visible", "important");
+
+  const widgetElement = clonedCellElement.querySelectorAll(".ProseMirror-widget");
+  widgetElement.forEach((widget) => widget.remove());
+
+  return { clonedCellElement };
+};
+
+/**
+ * @description Get positions of all cells in the current selection.
+ * @param {Selection} selection - The selection.
+ * @param {TableNodeLocation} table - The table node location.
+ * @returns {number[]} Array of cell positions.
+ */
+export const getSelectedCellPositions = (selection: Selection, table: TableNodeLocation): number[] => {
+  if (!isCellSelection(selection)) return [];
+
+  const tableMap = TableMap.get(table.node);
+  const selectedRect = getSelectedRect(selection, tableMap);
+  const cellsInSelection = tableMap.cellsInRect(selectedRect);
+
+  // Convert relative positions to absolute document positions
+  return cellsInSelection.map((cellPos) => table.start + cellPos);
+};
+
+/**
+ * @description Hide cell content using decorations (local only, not persisted).
+ * @param {Editor} editor - The editor instance.
+ * @param {number[]} cellPositions - Array of cell positions to hide.
+ */
+export const hideCellContent = (editor: Editor, cellPositions: number[]): void => {
+  const tr = editor.view.state.tr;
+  updateTransactionMeta(tr, cellPositions);
+  tr.setMeta(CORE_EDITOR_META.ADD_TO_HISTORY, false);
+  editor.view.dispatch(tr);
+};
+
+/**
+ * @description Show cell content by clearing decorations.
+ * @param {Editor} editor - The editor instance.
+ */
+export const showCellContent = (editor: Editor): void => {
+  const tr = editor.view.state.tr;
+  updateTransactionMeta(tr, null);
+  tr.setMeta(CORE_EDITOR_META.ADD_TO_HISTORY, false);
+  editor.view.dispatch(tr);
+};
diff --git a/packages/editor/src/extensions/table/plugins/drag-state.ts b/packages/editor/src/extensions/table/plugins/drag-state.ts
new file mode 100644
index 0000000..d7afd26
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/drag-state.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Transaction } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+const TABLE_DRAG_STATE_PLUGIN_KEY = new PluginKey("tableDragState");
+
+export const updateTransactionMeta = (tr: Transaction, hiddenCellPositions: number[] | null) => {
+  tr.setMeta(TABLE_DRAG_STATE_PLUGIN_KEY, hiddenCellPositions);
+};
+
+/**
+ * @description Plugin to manage table drag state using decorations.
+ * This allows hiding cell content during drag operations without modifying the document.
+ * Decorations are local to each user and not persisted or shared.
+ */
+export const TableDragStatePlugin = new Plugin({
+  key: TABLE_DRAG_STATE_PLUGIN_KEY,
+  state: {
+    init() {
+      return DecorationSet.empty;
+    },
+    apply(tr, oldState) {
+      // Get metadata about which cells to hide
+      const hiddenCellPositions = tr.getMeta(TABLE_DRAG_STATE_PLUGIN_KEY) as number[] | null;
+
+      if (hiddenCellPositions === undefined) {
+        // No change, map decorations through the transaction
+        return oldState.map(tr.mapping, tr.doc);
+      }
+
+      if (hiddenCellPositions === null || !Array.isArray(hiddenCellPositions) || hiddenCellPositions.length === 0) {
+        // Clear all decorations
+        return DecorationSet.empty;
+      }
+
+      // Create decorations for hidden cells
+      const decorations: Decoration[] = [];
+      hiddenCellPositions.forEach((pos) => {
+        if (typeof pos !== "number") return;
+        const node = tr.doc.nodeAt(pos);
+        if (node) {
+          decorations.push(
+            Decoration.node(pos, pos + node.nodeSize, {
+              class: "content-hidden",
+            })
+          );
+        }
+      });
+
+      return DecorationSet.create(tr.doc, decorations);
+    },
+  },
+  props: {
+    decorations(state) {
+      return this.getState(state);
+    },
+  },
+});
diff --git a/packages/editor/src/extensions/table/plugins/insert-handlers/plugin.ts b/packages/editor/src/extensions/table/plugins/insert-handlers/plugin.ts
new file mode 100644
index 0000000..0754046
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/insert-handlers/plugin.ts
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+// local imports
+import { COL_DRAG_MARKER_CLASS, DROP_MARKER_CLASS, ROW_DRAG_MARKER_CLASS } from "../drag-handles/marker-utils";
+import type { TableInfo } from "./utils";
+import { createColumnInsertButton, createRowInsertButton, findAllTables } from "./utils";
+
+const TABLE_INSERT_PLUGIN_KEY = new PluginKey("table-insert");
+
+export const TableInsertPlugin = (editor: Editor): Plugin => {
+  const tableMap = new Map<HTMLElement, TableInfo>();
+
+  const setupTable = (tableInfo: TableInfo) => {
+    const { tableElement } = tableInfo;
+
+    // Create and add column button if it doesn't exist
+    if (!tableInfo.columnButtonElement) {
+      const columnButton = createColumnInsertButton(editor, tableInfo);
+      tableElement.appendChild(columnButton);
+      tableInfo.columnButtonElement = columnButton;
+    }
+
+    // Create and add row button if it doesn't exist
+    if (!tableInfo.rowButtonElement) {
+      const rowButton = createRowInsertButton(editor, tableInfo);
+      tableElement.appendChild(rowButton);
+      tableInfo.rowButtonElement = rowButton;
+    }
+
+    // Create and add drag marker if it doesn't exist
+    if (!tableInfo.dragMarkerContainerElement) {
+      const dragMarker = createMarkerContainer();
+      tableElement.appendChild(dragMarker);
+      tableInfo.dragMarkerContainerElement = dragMarker;
+    }
+
+    tableMap.set(tableElement, tableInfo);
+  };
+
+  const cleanupTable = (tableElement: HTMLElement) => {
+    const tableInfo = tableMap.get(tableElement);
+    tableInfo?.columnButtonElement?.remove();
+    tableInfo?.rowButtonElement?.remove();
+    tableInfo?.dragMarkerContainerElement?.remove();
+    tableMap.delete(tableElement);
+  };
+
+  const updateAllTables = () => {
+    if (!editor.isEditable) {
+      // Clean up all tables if editor is not editable
+      tableMap.forEach((_, tableElement) => {
+        cleanupTable(tableElement);
+      });
+      return;
+    }
+
+    const currentTables = findAllTables(editor);
+    const currentTableElements = new Set(currentTables.map((t) => t.tableElement));
+
+    // Remove buttons from tables that no longer exist
+    tableMap.forEach((_, tableElement) => {
+      if (!currentTableElements.has(tableElement)) {
+        cleanupTable(tableElement);
+      }
+    });
+
+    // Add buttons to new tables
+    currentTables.forEach((tableInfo) => {
+      if (!tableMap.has(tableInfo.tableElement)) {
+        setupTable(tableInfo);
+      }
+    });
+  };
+
+  return new Plugin({
+    key: TABLE_INSERT_PLUGIN_KEY,
+
+    view() {
+      setTimeout(updateAllTables, 0);
+
+      return {
+        update(view, prevState) {
+          // Update when document changes
+          if (!prevState.doc.eq(view.state.doc)) {
+            updateAllTables();
+          }
+        },
+        destroy() {
+          // Clean up all tables
+          tableMap.forEach((_, tableElement) => {
+            cleanupTable(tableElement);
+          });
+          tableMap.clear();
+        },
+      };
+    },
+  });
+};
+
+const createMarkerContainer = (): HTMLElement => {
+  const el = document.createElement("div");
+  el.className = "table-drag-marker-container";
+  el.contentEditable = "false";
+  el.appendChild(createDropMarker());
+  el.appendChild(createColDragMarker());
+  el.appendChild(createRowDragMarker());
+  return el;
+};
+
+const createDropMarker = (): HTMLElement => {
+  const el = document.createElement("div");
+  el.className = DROP_MARKER_CLASS;
+  return el;
+};
+
+const createColDragMarker = (): HTMLElement => {
+  const el = document.createElement("div");
+  el.className = `${COL_DRAG_MARKER_CLASS} hidden`;
+
+  return el;
+};
+
+const createRowDragMarker = (): HTMLElement => {
+  const el = document.createElement("div");
+  el.className = `${ROW_DRAG_MARKER_CLASS} hidden`;
+
+  return el;
+};
diff --git a/packages/editor/src/extensions/table/plugins/insert-handlers/utils.ts b/packages/editor/src/extensions/table/plugins/insert-handlers/utils.ts
new file mode 100644
index 0000000..2cf7810
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/insert-handlers/utils.ts
@@ -0,0 +1,419 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { addColumn, removeColumn, addRow, removeRow, TableMap } from "@tiptap/pm/tables";
+import type { TableRect } from "@tiptap/pm/tables";
+// local imports
+import { isCellEmpty } from "../../table/utilities/helpers";
+
+const addSvg = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M8.5 7.49988V3.49988C8.5 3.22374 8.27614 2.99988 8 2.99988C7.72386 2.99988 7.5 3.22374 7.5 3.49988L7.5 7.49988L3.5 7.49988C3.22386 7.49988 3 7.72374 3 7.99988C3 8.27602 3.22386 8.49988 3.5 8.49988H7.5L7.5 12.4999C7.5 12.776 7.72386 12.9999 8 12.9999C8.27614 12.9999 8.5 12.776 8.5 12.4999L8.5 8.49988L12.5 8.49988C12.7761 8.49988 13 8.27602 13 7.99988C13 7.72374 12.7761 7.49988 12.5 7.49988L8.5 7.49988Z"
+  fill="currentColor"
+/>
+</svg>`;
+
+export type TableInfo = {
+  tableElement: HTMLElement;
+  tableNode: ProseMirrorNode;
+  tablePos: number;
+  columnButtonElement?: HTMLElement;
+  rowButtonElement?: HTMLElement;
+  dragMarkerContainerElement?: HTMLElement;
+};
+
+export const createColumnInsertButton = (editor: Editor, tableInfo: TableInfo): HTMLElement => {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "table-column-insert-button";
+  button.title = "Insert columns";
+  button.ariaLabel = "Insert columns";
+
+  const icon = document.createElement("span");
+  icon.innerHTML = addSvg;
+  button.appendChild(icon);
+
+  let mouseDownX = 0;
+  let isDragging = false;
+  let dragStarted = false;
+  let lastActionX = 0;
+  const DRAG_THRESHOLD = 5; // pixels to start drag
+  const ACTION_THRESHOLD = 150; // pixels total distance to trigger action
+
+  const onMouseDown = (e: MouseEvent) => {
+    if (e.button !== 0) return; // Only left mouse button
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    mouseDownX = e.clientX;
+    lastActionX = e.clientX;
+    isDragging = false;
+    dragStarted = false;
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    const deltaX = e.clientX - mouseDownX;
+    const distance = Math.abs(deltaX);
+
+    // Start dragging if moved more than threshold
+    if (!isDragging && distance > DRAG_THRESHOLD) {
+      isDragging = true;
+      dragStarted = true;
+
+      // Visual feedback
+      button.classList.add("dragging");
+      document.body.style.userSelect = "none";
+    }
+
+    if (isDragging) {
+      const totalDistance = Math.abs(e.clientX - lastActionX);
+
+      // Only trigger action when total distance reaches threshold
+      if (totalDistance >= ACTION_THRESHOLD) {
+        // Determine direction based on current movement relative to last action point
+        const directionFromLastAction = e.clientX - lastActionX;
+
+        // Right direction - add columns
+        if (directionFromLastAction > 0) {
+          insertColumnAfterLast(editor, tableInfo);
+          lastActionX = e.clientX; // Reset action point
+        }
+        // Left direction - delete empty columns
+        else if (directionFromLastAction < 0) {
+          const deleted = removeLastColumn(editor, tableInfo);
+          if (deleted) {
+            lastActionX = e.clientX; // Reset action point
+          }
+        }
+      }
+    }
+  };
+
+  const onMouseUp = () => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+
+    if (isDragging) {
+      // Clean up drag state
+      button.classList.remove("dragging");
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    } else if (!dragStarted) {
+      // Handle as click if no dragging occurred
+      insertColumnAfterLast(editor, tableInfo);
+    }
+
+    isDragging = false;
+    dragStarted = false;
+  };
+
+  button.addEventListener("mousedown", onMouseDown);
+
+  // Prevent context menu and text selection
+  button.addEventListener("contextmenu", (e) => e.preventDefault());
+  button.addEventListener("selectstart", (e) => e.preventDefault());
+
+  return button;
+};
+
+export const createRowInsertButton = (editor: Editor, tableInfo: TableInfo): HTMLElement => {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "table-row-insert-button";
+  button.title = "Insert rows";
+  button.ariaLabel = "Insert rows";
+
+  const icon = document.createElement("span");
+  icon.innerHTML = addSvg;
+  button.appendChild(icon);
+
+  let mouseDownY = 0;
+  let isDragging = false;
+  let dragStarted = false;
+  let lastActionY = 0;
+  const DRAG_THRESHOLD = 5; // pixels to start drag
+  const ACTION_THRESHOLD = 40; // pixels total distance to trigger action
+
+  const onMouseDown = (e: MouseEvent) => {
+    if (e.button !== 0) return; // Only left mouse button
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    mouseDownY = e.clientY;
+    lastActionY = e.clientY;
+    isDragging = false;
+    dragStarted = false;
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    const deltaY = e.clientY - mouseDownY;
+    const distance = Math.abs(deltaY);
+
+    // Start dragging if moved more than threshold
+    if (!isDragging && distance > DRAG_THRESHOLD) {
+      isDragging = true;
+      dragStarted = true;
+
+      // Visual feedback
+      button.classList.add("dragging");
+      document.body.style.userSelect = "none";
+    }
+
+    if (isDragging) {
+      const totalDistance = Math.abs(e.clientY - lastActionY);
+
+      // Only trigger action when total distance reaches threshold
+      if (totalDistance >= ACTION_THRESHOLD) {
+        // Determine direction based on current movement relative to last action point
+        const directionFromLastAction = e.clientY - lastActionY;
+
+        // Down direction - add rows
+        if (directionFromLastAction > 0) {
+          insertRowAfterLast(editor, tableInfo);
+          lastActionY = e.clientY; // Reset action point
+        }
+        // Up direction - delete empty rows
+        else if (directionFromLastAction < 0) {
+          const deleted = removeLastRow(editor, tableInfo);
+          if (deleted) {
+            lastActionY = e.clientY; // Reset action point
+          }
+        }
+      }
+    }
+  };
+
+  const onMouseUp = () => {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+
+    if (isDragging) {
+      // Clean up drag state
+      button.classList.remove("dragging");
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    } else if (!dragStarted) {
+      // Handle as click if no dragging occurred
+      insertRowAfterLast(editor, tableInfo);
+    }
+
+    isDragging = false;
+    dragStarted = false;
+  };
+
+  button.addEventListener("mousedown", onMouseDown);
+
+  // Prevent context menu and text selection
+  button.addEventListener("contextmenu", (e) => e.preventDefault());
+  button.addEventListener("selectstart", (e) => e.preventDefault());
+
+  return button;
+};
+
+export const findAllTables = (editor: Editor): TableInfo[] => {
+  const tables: TableInfo[] = [];
+  const tableElements = editor.view.dom.querySelectorAll("table");
+
+  tableElements.forEach((tableElement) => {
+    // Find the table's ProseMirror position
+    let tablePos = -1;
+    let tableNode: ProseMirrorNode | null = null;
+
+    // Walk through the document to find matching table nodes
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.spec.tableRole === "table") {
+        const domAtPos = editor.view.domAtPos(pos + 1);
+        let domTable = domAtPos.node;
+
+        // Navigate to find the table element
+        while (domTable && domTable.parentNode && domTable.nodeType !== Node.ELEMENT_NODE) {
+          domTable = domTable.parentNode;
+        }
+
+        while (domTable && domTable.parentNode && (domTable as HTMLElement).tagName !== "TABLE") {
+          domTable = domTable.parentNode;
+        }
+
+        if (domTable === tableElement) {
+          tablePos = pos;
+          tableNode = node;
+          return false; // Stop iteration
+        }
+      }
+    });
+
+    if (tablePos !== -1 && tableNode) {
+      tables.push({
+        tableElement,
+        tableNode,
+        tablePos,
+      });
+    }
+  });
+
+  return tables;
+};
+
+const getCurrentTableInfo = (editor: Editor, tableInfo: TableInfo): TableInfo => {
+  // Refresh table info to get latest state
+  const tables = findAllTables(editor);
+  const updated = tables.find((t) => t.tableElement === tableInfo.tableElement);
+  return updated || tableInfo;
+};
+
+// Column functions
+const insertColumnAfterLast = (editor: Editor, tableInfo: TableInfo) => {
+  const currentTableInfo = getCurrentTableInfo(editor, tableInfo);
+  const { tableNode, tablePos } = currentTableInfo;
+  const tableMapData = TableMap.get(tableNode);
+  const lastColumnIndex = tableMapData.width;
+
+  const tr = editor.state.tr;
+  const rect: TableRect = {
+    map: tableMapData,
+    tableStart: tablePos,
+    table: tableNode,
+    top: 0,
+    left: 0,
+    bottom: tableMapData.height - 1,
+    right: tableMapData.width - 1,
+  };
+
+  const newTr = addColumn(tr, rect, lastColumnIndex);
+  editor.view.dispatch(newTr);
+};
+
+const removeLastColumn = (editor: Editor, tableInfo: TableInfo): boolean => {
+  const currentTableInfo = getCurrentTableInfo(editor, tableInfo);
+  const { tableNode, tablePos } = currentTableInfo;
+  const tableMapData = TableMap.get(tableNode);
+
+  // Don't delete if only one column left
+  if (tableMapData.width <= 1) {
+    return false;
+  }
+
+  const lastColumnIndex = tableMapData.width - 1;
+
+  // Check if last column is empty
+  if (!isColumnEmpty(currentTableInfo, lastColumnIndex)) {
+    return false;
+  }
+
+  const tr = editor.state.tr;
+  const rect = {
+    map: tableMapData,
+    tableStart: tablePos,
+    table: tableNode,
+    top: 0,
+    left: 0,
+    bottom: tableMapData.height - 1,
+    right: tableMapData.width - 1,
+  };
+
+  removeColumn(tr, rect, lastColumnIndex);
+  editor.view.dispatch(tr);
+  return true;
+};
+
+const isColumnEmpty = (tableInfo: TableInfo, columnIndex: number): boolean => {
+  const { tableNode } = tableInfo;
+  const tableMapData = TableMap.get(tableNode);
+
+  // Check each cell in the column
+  for (let row = 0; row < tableMapData.height; row++) {
+    const cellIndex = row * tableMapData.width + columnIndex;
+    const cellPos = tableMapData.map[cellIndex];
+    const cell = tableNode.nodeAt(cellPos);
+
+    if (!isCellEmpty(cell)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+// Row functions
+const insertRowAfterLast = (editor: Editor, tableInfo: TableInfo) => {
+  const currentTableInfo = getCurrentTableInfo(editor, tableInfo);
+  const { tableNode, tablePos } = currentTableInfo;
+  const tableMapData = TableMap.get(tableNode);
+  const lastRowIndex = tableMapData.height;
+
+  const tr = editor.state.tr;
+  const rect: TableRect = {
+    map: tableMapData,
+    tableStart: tablePos,
+    table: tableNode,
+    top: 0,
+    left: 0,
+    bottom: tableMapData.height - 1,
+    right: tableMapData.width - 1,
+  };
+
+  const newTr = addRow(tr, rect, lastRowIndex);
+  editor.view.dispatch(newTr);
+};
+
+const removeLastRow = (editor: Editor, tableInfo: TableInfo): boolean => {
+  const currentTableInfo = getCurrentTableInfo(editor, tableInfo);
+  const { tableNode, tablePos } = currentTableInfo;
+  const tableMapData = TableMap.get(tableNode);
+
+  // Don't delete if only one row left
+  if (tableMapData.height <= 1) {
+    return false;
+  }
+
+  const lastRowIndex = tableMapData.height - 1;
+
+  // Check if last row is empty
+  if (!isRowEmpty(currentTableInfo, lastRowIndex)) {
+    return false;
+  }
+
+  const tr = editor.state.tr;
+  const rect = {
+    map: tableMapData,
+    tableStart: tablePos,
+    table: tableNode,
+    top: 0,
+    left: 0,
+    bottom: tableMapData.height - 1,
+    right: tableMapData.width - 1,
+  };
+
+  removeRow(tr, rect, lastRowIndex);
+  editor.view.dispatch(tr);
+  return true;
+};
+
+const isRowEmpty = (tableInfo: TableInfo, rowIndex: number): boolean => {
+  const { tableNode } = tableInfo;
+  const tableMapData = TableMap.get(tableNode);
+
+  // Check each cell in the row
+  for (let col = 0; col < tableMapData.width; col++) {
+    const cellIndex = rowIndex * tableMapData.width + col;
+    const cellPos = tableMapData.map[cellIndex];
+    const cell = tableNode.nodeAt(cellPos);
+
+    if (!isCellEmpty(cell)) {
+      return false;
+    }
+  }
+  return true;
+};
diff --git a/packages/editor/src/extensions/table/plugins/selection-outline/plugin.ts b/packages/editor/src/extensions/table/plugins/selection-outline/plugin.ts
new file mode 100644
index 0000000..f1f04af
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/selection-outline/plugin.ts
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { findParentNode } from "@tiptap/core";
+import type { Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { TableMap } from "@tiptap/pm/tables";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+// local imports
+import { isCellSelection } from "../../table/utilities/helpers";
+import { getCellBorderClasses } from "./utils";
+
+type TableCellSelectionOutlinePluginState = {
+  decorations?: DecorationSet;
+};
+
+const TABLE_SELECTION_OUTLINE_PLUGIN_KEY = new PluginKey("table-cell-selection-outline");
+
+export const TableCellSelectionOutlinePlugin = (editor: Editor): Plugin<TableCellSelectionOutlinePluginState> =>
+  new Plugin<TableCellSelectionOutlinePluginState>({
+    key: TABLE_SELECTION_OUTLINE_PLUGIN_KEY,
+    state: {
+      init: () => ({}),
+      apply(tr, prev, oldState, newState) {
+        if (!editor.isEditable) return {};
+        const table = findParentNode((node) => node.type.spec.tableRole === "table")(newState.selection);
+        const hasDocChanged = tr.docChanged || !newState.selection.eq(oldState.selection);
+        if (!table || !hasDocChanged) {
+          return table === undefined ? {} : prev;
+        }
+
+        const { selection } = newState;
+        if (!isCellSelection(selection)) return {};
+
+        const decorations: Decoration[] = [];
+        const tableMap = TableMap.get(table.node);
+        const selectedCells: number[] = [];
+
+        // First, collect all selected cell positions
+        selection.forEachCell((_node, pos) => {
+          const start = pos - table.pos - 1;
+          selectedCells.push(start);
+        });
+
+        // Then, add decorations with appropriate border classes
+        selection.forEachCell((node, pos) => {
+          const start = pos - table.pos - 1;
+          const classes = getCellBorderClasses(start, selectedCells, tableMap);
+
+          decorations.push(Decoration.node(pos, pos + node.nodeSize, { class: classes.join(" ") }));
+        });
+
+        return {
+          decorations: DecorationSet.create(newState.doc, decorations),
+        };
+      },
+    },
+    props: {
+      decorations(state) {
+        return TABLE_SELECTION_OUTLINE_PLUGIN_KEY.getState(state).decorations;
+      },
+    },
+  });
diff --git a/packages/editor/src/extensions/table/plugins/selection-outline/utils.ts b/packages/editor/src/extensions/table/plugins/selection-outline/utils.ts
new file mode 100644
index 0000000..9b149b2
--- /dev/null
+++ b/packages/editor/src/extensions/table/plugins/selection-outline/utils.ts
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TableMap } from "@tiptap/pm/tables";
+
+/**
+ * Calculates the positions of cells adjacent to a given cell in a table
+ * @param cellStart - The start position of the current cell in the document
+ * @param tableMap - ProseMirror's table mapping structure containing cell positions and dimensions
+ * @returns Object with positions of adjacent cells (undefined if cell doesn't exist at table edge)
+ */
+const getAdjacentCellPositions = (
+  cellStart: number,
+  tableMap: TableMap
+): { top?: number; bottom?: number; left?: number; right?: number } => {
+  // Extract table dimensions
+  // width -> number of columns in the table
+  // height -> number of rows in the table
+  const { width, height } = tableMap;
+
+  // Find the index of our cell in the flat tableMap.map array
+  // tableMap.map contains start positions of all cells in row-by-row order
+  const cellIndex = tableMap.map.indexOf(cellStart);
+
+  // Safety check: if cell position not found in table map, return empty object
+  if (cellIndex === -1) return {};
+
+  // Convert flat array index to 2D grid coordinates
+  // row = which row the cell is in (0-based from top)
+  // col = which column the cell is in (0-based from left)
+  const row = Math.floor(cellIndex / width); // Integer division gives row number
+  const col = cellIndex % width; // Remainder gives column number
+
+  return {
+    // Top cell: same column, one row up
+    // Check if we're not in the first row (row > 0) before calculating
+    top: row > 0 ? tableMap.map[(row - 1) * width + col] : undefined,
+
+    // Bottom cell: same column, one row down
+    // Check if we're not in the last row (row < height - 1) before calculating
+    bottom: row < height - 1 ? tableMap.map[(row + 1) * width + col] : undefined,
+
+    // Left cell: same row, one column left
+    // Check if we're not in the first column (col > 0) before calculating
+    left: col > 0 ? tableMap.map[row * width + (col - 1)] : undefined,
+
+    // Right cell: same row, one column right
+    // Check if we're not in the last column (col < width - 1) before calculating
+    right: col < width - 1 ? tableMap.map[row * width + (col + 1)] : undefined,
+  };
+};
+
+export const getCellBorderClasses = (cellStart: number, selectedCells: number[], tableMap: TableMap): string[] => {
+  const adjacent = getAdjacentCellPositions(cellStart, tableMap);
+  const classes: string[] = [];
+
+  // Add border-right if right cell is not selected or doesn't exist
+  if (adjacent.right === undefined || !selectedCells.includes(adjacent.right)) {
+    classes.push("selectedCell-border-right");
+  }
+
+  // Add border-left if left cell is not selected or doesn't exist
+  if (adjacent.left === undefined || !selectedCells.includes(adjacent.left)) {
+    classes.push("selectedCell-border-left");
+  }
+
+  // Add border-top if top cell is not selected or doesn't exist
+  if (adjacent.top === undefined || !selectedCells.includes(adjacent.top)) {
+    classes.push("selectedCell-border-top");
+  }
+
+  // Add border-bottom if bottom cell is not selected or doesn't exist
+  if (adjacent.bottom === undefined || !selectedCells.includes(adjacent.bottom)) {
+    classes.push("selectedCell-border-bottom");
+  }
+
+  return classes;
+};
diff --git a/packages/editor/src/extensions/table/table-cell.ts b/packages/editor/src/extensions/table/table-cell.ts
new file mode 100644
index 0000000..3bc7c22
--- /dev/null
+++ b/packages/editor/src/extensions/table/table-cell.ts
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { mergeAttributes, Node } from "@tiptap/core";
+import { TableMap } from "@tiptap/pm/tables";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { findParentNodeOfType } from "@/helpers/common";
+// local imports
+import { TableCellSelectionOutlinePlugin } from "./plugins/selection-outline/plugin";
+import { DEFAULT_COLUMN_WIDTH } from "./table";
+import { isCellSelection } from "./table/utilities/helpers";
+
+type TableCellOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
+
+export const TableCell = Node.create<TableCellOptions>({
+  name: CORE_EXTENSIONS.TABLE_CELL,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: "block+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: [DEFAULT_COLUMN_WIDTH],
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? [parseInt(colwidth, 10)] : null;
+
+          return value;
+        },
+      },
+      background: {
+        default: null,
+      },
+      textColor: {
+        default: null,
+      },
+    };
+  },
+
+  tableRole: "cell",
+
+  isolating: true,
+
+  addProseMirrorPlugins() {
+    return [TableCellSelectionOutlinePlugin(this.editor)];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Backspace: ({ editor }) => {
+        const { state } = editor.view;
+        const { selection } = state;
+
+        if (isCellSelection(selection)) return false;
+
+        // Check if we're at the start of the cell
+        if (selection.from !== selection.to || selection.$head.parentOffset !== 0) return false;
+
+        // Find table and current cell
+        const tableNode = findParentNodeOfType(selection, [CORE_EXTENSIONS.TABLE])?.node;
+        const currentCellInfo = findParentNodeOfType(selection, [
+          CORE_EXTENSIONS.TABLE_CELL,
+          CORE_EXTENSIONS.TABLE_HEADER,
+        ]);
+        const currentCellNode = currentCellInfo?.node;
+        const cellPos = currentCellInfo?.pos;
+        const cellDepth = currentCellInfo?.depth;
+
+        if (!tableNode || !currentCellNode || cellPos === null || cellDepth === null) return false;
+
+        // Check if this is the only cell in the TableMap (1 row, 1 column)
+        const tableMap = TableMap.get(tableNode);
+        const isOnlyCell = tableMap.width === 1 && tableMap.height === 1;
+        if (!isOnlyCell) return false;
+
+        // Cell has content, select the entire cell
+        // Use the position that points to the cell node itself, not its content
+        const cellNodePos = selection.$head.before(cellDepth);
+
+        editor.commands.setCellSelection({
+          anchorCell: cellNodePos,
+          headCell: cellNodePos,
+        });
+        return true;
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "td" }];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "td",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        style: `background-color: ${node.attrs.background}; color: ${node.attrs.textColor};`,
+      }),
+      0,
+    ];
+  },
+});
diff --git a/packages/editor/src/extensions/table/table-header.ts b/packages/editor/src/extensions/table/table-header.ts
new file mode 100644
index 0000000..9f939c2
--- /dev/null
+++ b/packages/editor/src/extensions/table/table-header.ts
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { mergeAttributes, Node } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// local imports
+import { DEFAULT_COLUMN_WIDTH } from "./table";
+
+type TableHeaderOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
+
+export const TableHeader = Node.create<TableHeaderOptions>({
+  name: CORE_EXTENSIONS.TABLE_HEADER,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  content: "block+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1,
+      },
+      rowspan: {
+        default: 1,
+      },
+      colwidth: {
+        default: [DEFAULT_COLUMN_WIDTH],
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth");
+          const value = colwidth ? [parseInt(colwidth, 10)] : null;
+
+          return value;
+        },
+      },
+      background: {
+        default: "none",
+      },
+    };
+  },
+
+  tableRole: "header_cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "th" }];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "th",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        style: `background-color: ${node.attrs.background};`,
+      }),
+      0,
+    ];
+  },
+});
diff --git a/packages/editor/src/extensions/table/table-row.ts b/packages/editor/src/extensions/table/table-row.ts
new file mode 100644
index 0000000..a5a32f3
--- /dev/null
+++ b/packages/editor/src/extensions/table/table-row.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { mergeAttributes, Node } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+type TableRowOptions = {
+  HTMLAttributes: Record<string, unknown>;
+};
+
+export const TableRow = Node.create<TableRowOptions>({
+  name: CORE_EXTENSIONS.TABLE_ROW,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  addAttributes() {
+    return {
+      background: {
+        default: null,
+      },
+      textColor: {
+        default: null,
+      },
+    };
+  },
+
+  content: "(tableCell | tableHeader)*",
+
+  tableRole: "row",
+
+  parseHTML() {
+    return [{ tag: "tr" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const style = HTMLAttributes.background
+      ? `background-color: ${HTMLAttributes.background}; color: ${HTMLAttributes.textColor}`
+      : "";
+
+    const attributes = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { style });
+
+    return ["tr", attributes, 0];
+  },
+});
diff --git a/packages/editor/src/extensions/table/table/icons.ts b/packages/editor/src/extensions/table/table/icons.ts
new file mode 100644
index 0000000..e31f09e
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/icons.ts
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const icons = {
+  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="var(--text-color-tertiary)" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
+  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash-2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>`,
+  insertLeftTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    length={12}
+    viewBox="0 -960 960 960"
+      >
+    <path
+      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
+      fill="var(--text-color-tertiary)"
+    />
+  </svg>
+`,
+  insertRightTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    length={12}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
+      fill="var(--text-color-tertiary)"
+    />
+  </svg>
+`,
+  insertTopTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    length={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
+      fill="var(--text-color-tertiary)"
+    />
+  </svg>
+`,
+  toggleColumnHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
+  toggleRowHeader: `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-color-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>`,
+  insertBottomTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    length={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
+      fill="var(--text-color-tertiary)"
+    />
+  </svg>
+`,
+};
diff --git a/packages/editor/src/extensions/table/table/index.ts b/packages/editor/src/extensions/table/table/index.ts
new file mode 100644
index 0000000..f66f0ad
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { Table } from "./table";
+
+export const DEFAULT_COLUMN_WIDTH = 150;
diff --git a/packages/editor/src/extensions/table/table/table-view.tsx b/packages/editor/src/extensions/table/table/table-view.tsx
new file mode 100644
index 0000000..2d2598c
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/table-view.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor, NodeViewProps } from "@tiptap/core";
+import type { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model";
+import { TableMap, updateColumnsOnResize } from "@tiptap/pm/tables";
+import type { Decoration, NodeView } from "@tiptap/pm/view";
+import { h } from "jsx-dom-cjs";
+
+export class TableView implements NodeView {
+  node: ProseMirrorNode;
+  cellMinWidth: number;
+  decorations: readonly Decoration[];
+  editor: Editor;
+  getPos: NodeViewProps["getPos"];
+  hoveredCell: ResolvedPos | null = null;
+  map: TableMap;
+  root: HTMLElement;
+  table: HTMLTableElement;
+  colgroup: HTMLTableColElement;
+  tbody: HTMLElement;
+  controls?: HTMLElement;
+
+  get dom() {
+    return this.root;
+  }
+
+  get contentDOM() {
+    return this.tbody;
+  }
+
+  constructor(
+    node: ProseMirrorNode,
+    cellMinWidth: number,
+    decorations: readonly Decoration[],
+    editor: Editor,
+    getPos: NodeViewProps["getPos"]
+  ) {
+    this.node = node;
+    this.cellMinWidth = cellMinWidth;
+    this.decorations = decorations;
+    this.editor = editor;
+    this.getPos = getPos;
+    this.hoveredCell = null;
+    this.map = TableMap.get(node);
+
+    this.colgroup = h(
+      "colgroup",
+      null,
+      Array.from({ length: this.map.width }, () => 1).map(() => h("col"))
+    );
+    this.tbody = h("tbody");
+    this.table = h("table", null, this.colgroup, this.tbody);
+
+    this.root = h(
+      "div",
+      {
+        className: "table-wrapper editor-full-width-block horizontal-scrollbar scrollbar-sm",
+      },
+      this.table
+    );
+
+    this.render();
+  }
+
+  update(node: ProseMirrorNode, decorations: readonly Decoration[]) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+
+    this.node = node;
+    this.decorations = [...decorations];
+    this.map = TableMap.get(this.node);
+
+    this.render();
+
+    return true;
+  }
+
+  render() {
+    if (this.colgroup.children.length !== this.map.width) {
+      const cols = Array.from({ length: this.map.width }, () => 1).map(() => h("col"));
+      this.colgroup.replaceChildren(...cols);
+    }
+
+    updateColumnsOnResize(this.node, this.colgroup, this.table, this.cellMinWidth);
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+}
diff --git a/packages/editor/src/extensions/table/table/table.ts b/packages/editor/src/extensions/table/table/table.ts
new file mode 100644
index 0000000..fe8d3e3
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/table.ts
@@ -0,0 +1,316 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ParentConfig } from "@tiptap/core";
+import { callOrReturn, getExtensionField, mergeAttributes, Node } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  CellSelection,
+  columnResizing,
+  deleteCellSelection,
+  deleteTable,
+  fixTables,
+  goToNextCell,
+  mergeCells,
+  setCellAttr,
+  splitCell,
+  tableEditing,
+  toggleHeader,
+  toggleHeaderCell,
+} from "@tiptap/pm/tables";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// local imports
+import { TableDragStatePlugin } from "../plugins/drag-state";
+import { TableColumnDragHandlePlugin } from "../plugins/drag-handles/column/plugin";
+import { TableRowDragHandlePlugin } from "../plugins/drag-handles/row/plugin";
+import { TableInsertPlugin } from "../plugins/insert-handlers/plugin";
+import { TableView } from "./table-view";
+import { createTable } from "./utilities/create-table";
+import { deleteColumnOrTable } from "./utilities/delete-column";
+import { handleDeleteKeyOnTable } from "./utilities/delete-key-shortcut";
+import { deleteRowOrTable } from "./utilities/delete-row";
+import { insertLineAboveTableAction } from "./utilities/insert-line-above-table-action";
+import { insertLineBelowTableAction } from "./utilities/insert-line-below-table-action";
+import { DEFAULT_COLUMN_WIDTH } from ".";
+
+type TableOptions = {
+  HTMLAttributes: Record<string, unknown>;
+  resizable: boolean;
+  handleWidth: number;
+  cellMinWidth: number;
+  lastColumnResizable: boolean;
+  allowTableNodeSelection: boolean;
+};
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    [CORE_EXTENSIONS.TABLE]: {
+      insertTable: (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => ReturnType;
+      addColumnBefore: () => ReturnType;
+      addColumnAfter: () => ReturnType;
+      deleteColumn: () => ReturnType;
+      addRowBefore: () => ReturnType;
+      addRowAfter: () => ReturnType;
+      deleteRow: () => ReturnType;
+      deleteTable: () => ReturnType;
+      mergeCells: () => ReturnType;
+      splitCell: () => ReturnType;
+      toggleHeaderColumn: () => ReturnType;
+      toggleHeaderRow: () => ReturnType;
+      toggleHeaderCell: () => ReturnType;
+      clearSelectedCells: () => ReturnType;
+      mergeOrSplit: () => ReturnType;
+      setCellAttribute: (name: string, value: any) => ReturnType;
+      goToNextCell: () => ReturnType;
+      goToPreviousCell: () => ReturnType;
+      fixTables: () => ReturnType;
+      setCellSelection: (position: { anchorCell: number; headCell?: number }) => ReturnType;
+    };
+  }
+
+  interface NodeConfig<Options, Storage> {
+    tableRole?:
+      | string
+      | ((this: {
+          name: string;
+          options: Options;
+          storage: Storage;
+          parent: ParentConfig<NodeConfig<Options>>["tableRole"];
+        }) => string);
+  }
+}
+
+export const Table = Node.create<TableOptions>({
+  name: CORE_EXTENSIONS.TABLE,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      resizable: true,
+      handleWidth: 5,
+      cellMinWidth: 100,
+      lastColumnResizable: true,
+      allowTableNodeSelection: true,
+    };
+  },
+
+  content: "tableRow+",
+
+  tableRole: "table",
+
+  isolating: true,
+
+  group: "block",
+
+  allowGapCursor: false,
+
+  parseHTML() {
+    return [{ tag: "table" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["table", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ["tbody", 0]];
+  },
+
+  addCommands() {
+    return {
+      insertTable:
+        ({ rows = 3, cols = 3, withHeaderRow = false } = {}) =>
+        ({ tr, dispatch, editor }) => {
+          const node = createTable({
+            schema: editor.schema,
+            rowsCount: rows,
+            colsCount: cols,
+            withHeaderRow,
+            columnWidth: DEFAULT_COLUMN_WIDTH,
+          });
+          if (dispatch) {
+            const offset = tr.selection.anchor + 1;
+
+            tr.replaceSelectionWith(node)
+              .scrollIntoView()
+              .setSelection(TextSelection.near(tr.doc.resolve(offset)));
+          }
+
+          return true;
+        },
+      addColumnBefore:
+        () =>
+        ({ state, dispatch }) =>
+          addColumnBefore(state, dispatch),
+      addColumnAfter:
+        () =>
+        ({ state, dispatch }) =>
+          addColumnAfter(state, dispatch),
+      deleteColumn: deleteColumnOrTable,
+      addRowBefore:
+        () =>
+        ({ state, dispatch }) =>
+          addRowBefore(state, dispatch),
+      addRowAfter:
+        () =>
+        ({ state, dispatch }) =>
+          addRowAfter(state, dispatch),
+      deleteRow: deleteRowOrTable,
+      deleteTable:
+        () =>
+        ({ state, dispatch }) =>
+          deleteTable(state, dispatch),
+      mergeCells:
+        () =>
+        ({ state, dispatch }) =>
+          mergeCells(state, dispatch),
+      splitCell:
+        () =>
+        ({ state, dispatch }) =>
+          splitCell(state, dispatch),
+      toggleHeaderColumn:
+        () =>
+        ({ state, dispatch }) =>
+          toggleHeader("column")(state, dispatch),
+      toggleHeaderRow:
+        () =>
+        ({ state, dispatch }) =>
+          toggleHeader("row")(state, dispatch),
+      toggleHeaderCell:
+        () =>
+        ({ state, dispatch }) =>
+          toggleHeaderCell(state, dispatch),
+      clearSelectedCells:
+        () =>
+        ({ state, dispatch }) =>
+          deleteCellSelection(state, dispatch),
+      mergeOrSplit:
+        () =>
+        ({ state, dispatch }) => {
+          if (mergeCells(state, dispatch)) {
+            return true;
+          }
+
+          return splitCell(state, dispatch);
+        },
+      setCellAttribute:
+        (name, value) =>
+        ({ state, dispatch }) =>
+          setCellAttr(name, value)(state, dispatch),
+      goToNextCell:
+        () =>
+        ({ state, dispatch }) =>
+          goToNextCell(1)(state, dispatch),
+      goToPreviousCell:
+        () =>
+        ({ state, dispatch }) =>
+          goToNextCell(-1)(state, dispatch),
+      fixTables:
+        () =>
+        ({ state, dispatch }) => {
+          if (dispatch) {
+            fixTables(state);
+          }
+
+          return true;
+        },
+      setCellSelection:
+        (position) =>
+        ({ tr, dispatch }) => {
+          if (dispatch) {
+            const selection = CellSelection.create(tr.doc, position.anchorCell, position.headCell);
+            tr.setSelection(selection);
+          }
+          return true;
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Tab: () => {
+        if (!this.editor.isActive(CORE_EXTENSIONS.TABLE)) return false;
+
+        if (this.editor.isActive(CORE_EXTENSIONS.LIST_ITEM) || this.editor.isActive(CORE_EXTENSIONS.TASK_ITEM)) {
+          return false;
+        }
+
+        if (this.editor.commands.goToNextCell()) {
+          return true;
+        }
+
+        if (!this.editor.can().addRowAfter()) {
+          return false;
+        }
+
+        return this.editor.chain().addRowAfter().goToNextCell().run();
+      },
+      "Shift-Tab": () => {
+        if (!this.editor.isActive(CORE_EXTENSIONS.TABLE)) return false;
+
+        if (this.editor.isActive(CORE_EXTENSIONS.LIST_ITEM) || this.editor.isActive(CORE_EXTENSIONS.TASK_ITEM)) {
+          return false;
+        }
+
+        return this.editor.commands.goToPreviousCell();
+      },
+      Backspace: handleDeleteKeyOnTable,
+      "Mod-Backspace": handleDeleteKeyOnTable,
+      Delete: handleDeleteKeyOnTable,
+      "Mod-Delete": handleDeleteKeyOnTable,
+      ArrowDown: insertLineBelowTableAction,
+      ArrowUp: insertLineAboveTableAction,
+    };
+  },
+
+  addNodeView() {
+    return ({ editor, node, decorations, getPos }) => {
+      const { cellMinWidth } = this.options;
+
+      return new TableView(node, cellMinWidth, decorations, editor, getPos);
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const isResizable = this.options.resizable && this.editor.isEditable;
+
+    const plugins = [
+      tableEditing({
+        allowTableNodeSelection: this.options.allowTableNodeSelection,
+      }),
+      TableDragStatePlugin,
+      TableInsertPlugin(this.editor),
+      TableColumnDragHandlePlugin(this.editor),
+      TableRowDragHandlePlugin(this.editor),
+    ];
+
+    if (isResizable) {
+      plugins.unshift(
+        columnResizing({
+          handleWidth: this.options.handleWidth,
+          cellMinWidth: this.options.cellMinWidth,
+          // View: TableView,
+          lastColumnResizable: this.options.lastColumnResizable,
+        })
+      );
+    }
+
+    return plugins;
+  },
+
+  extendNodeSchema(extension) {
+    const context = {
+      name: extension.name,
+      options: extension.options,
+      storage: extension.storage,
+    };
+
+    return {
+      tableRole: callOrReturn(getExtensionField(extension, "tableRole", context)),
+    };
+  },
+});
diff --git a/packages/editor/src/extensions/table/table/utilities/create-cell.ts b/packages/editor/src/extensions/table/table/utilities/create-cell.ts
new file mode 100644
index 0000000..5a07bb1
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/utilities/create-cell.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Fragment, Node as ProsemirrorNode, NodeType } from "@tiptap/pm/model";
+
+export function createCell(
+  cellType: NodeType,
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
+  attrs?: Record<string, unknown>
+): ProsemirrorNode | null | undefined {
+  if (cellContent) {
+    return cellType.createChecked(attrs, cellContent);
+  }
+
+  return cellType.createAndFill(attrs);
+}
diff --git a/packages/editor/src/extensions/table/table/utilities/create-table.ts b/packages/editor/src/extensions/table/table/utilities/create-table.ts
new file mode 100644
index 0000000..54ba388
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/utilities/create-table.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model";
+// extensions
+import { createCell } from "@/extensions/table/table/utilities/create-cell";
+import { getTableNodeTypes } from "@/extensions/table/table/utilities/get-table-node-types";
+
+type Props = {
+  schema: Schema;
+  rowsCount: number;
+  colsCount: number;
+  withHeaderRow: boolean;
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>;
+  columnWidth: number;
+};
+
+export const createTable = (props: Props): ProsemirrorNode => {
+  const { schema, rowsCount, colsCount, withHeaderRow, cellContent, columnWidth } = props;
+
+  const types = getTableNodeTypes(schema);
+  const headerCells: ProsemirrorNode[] = [];
+  const cells: ProsemirrorNode[] = [];
+
+  for (let index = 0; index < colsCount; index += 1) {
+    const cell = createCell(types.cell, cellContent, { colwidth: [columnWidth] });
+
+    if (cell) {
+      cells.push(cell);
+    }
+
+    if (withHeaderRow) {
+      const headerCell = createCell(types.header_cell, cellContent, { colwidth: [columnWidth] });
+
+      if (headerCell) {
+        headerCells.push(headerCell);
+      }
+    }
+  }
+
+  const rows: ProsemirrorNode[] = [];
+
+  for (let index = 0; index < rowsCount; index += 1) {
+    rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells));
+  }
+
+  return types.table.createChecked(null, rows);
+};
diff --git a/packages/editor/src/extensions/table/table/utilities/delete-column.ts b/packages/editor/src/extensions/table/table/utilities/delete-column.ts
new file mode 100644
index 0000000..f765440
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/utilities/delete-column.ts
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Command } from "@tiptap/core";
+import { deleteColumn, deleteTable } from "@tiptap/pm/tables";
+// local imports
+import { isCellSelection } from "./helpers";
+
+export const deleteColumnOrTable: () => Command =
+  () =>
+  ({ state, dispatch }) => {
+    const { selection } = state;
+
+    // Check if we're in a table and have a cell selection
+    if (!isCellSelection(selection)) {
+      return false;
+    }
+
+    // Get the ProseMirrorTable and calculate total columns
+    const tableStart = selection.$anchorCell.start(-1);
+    const selectedTable = state.doc.nodeAt(tableStart - 1);
+
+    if (!selectedTable) return false;
+
+    // Count total columns by examining the first row
+    const firstRow = selectedTable.firstChild;
+    if (!firstRow) return false;
+
+    let totalColumns = 0;
+    for (let i = 0; i < firstRow.childCount; i++) {
+      const cell = firstRow.child(i);
+      totalColumns += cell.attrs.colspan || 1;
+    }
+
+    // If only one column exists, delete the entire ProseMirrorTable
+    if (totalColumns === 1) {
+      return deleteTable(state, dispatch);
+    }
+
+    // Otherwise, proceed with normal column deletion
+    return deleteColumn(state, dispatch);
+  };
diff --git a/packages/editor/src/extensions/table/table/utilities/delete-key-shortcut.ts b/packages/editor/src/extensions/table/table/utilities/delete-key-shortcut.ts
new file mode 100644
index 0000000..c415bc8
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/utilities/delete-key-shortcut.ts
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { findParentNodeClosestToPos } from "@tiptap/core";
+import type { Editor, KeyboardShortcutCommand } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { CellSelection } from "@tiptap/pm/tables";
+import { TableMap } from "@tiptap/pm/tables";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// extensions
+import { isCellEmpty, isCellSelection } from "@/extensions/table/table/utilities/helpers";
+
+type CellCoord = {
+  row: number;
+  col: number;
+};
+
+type TableInfo = {
+  node: ProseMirrorNode;
+  pos: number;
+  map: TableMap;
+  totalColumns: number;
+  totalRows: number;
+};
+
+export const handleDeleteKeyOnTable: KeyboardShortcutCommand = (props) => {
+  const { editor } = props;
+  const { selection } = editor.state;
+
+  try {
+    if (!isCellSelection(selection)) return false;
+
+    const tableInfo = getTableInfo(editor);
+    if (!tableInfo) return false;
+
+    const selectedCellCoords = getSelectedCellCoords(selection, tableInfo);
+    if (selectedCellCoords.length === 0) return false;
+
+    const hasContent = checkCellsHaveContent(selection);
+    if (hasContent) return false;
+
+    const selectionBounds = calculateSelectionBounds(selectedCellCoords);
+    const { totalColumnsInSelection, totalRowsInSelection, minRow, minCol } = selectionBounds;
+
+    // Check if entire rows are selected
+    if (totalColumnsInSelection === tableInfo.totalColumns) {
+      return deleteMultipleRows(editor, totalRowsInSelection, minRow, tableInfo);
+    }
+
+    // Check if entire columns are selected
+    if (totalRowsInSelection === tableInfo.totalRows) {
+      return deleteMultipleColumns(editor, totalColumnsInSelection, minCol, tableInfo);
+    }
+
+    return false;
+  } catch (error) {
+    console.error("Error in handleDeleteKeyOnTable", error);
+    return false;
+  }
+};
+
+const getTableInfo = (editor: Editor): TableInfo | null => {
+  const table = findParentNodeClosestToPos(
+    editor.state.selection.ranges[0].$from,
+    (node) => node.type.name === CORE_EXTENSIONS.TABLE
+  );
+
+  if (!table) return null;
+
+  const tableMap = TableMap.get(table.node);
+  return {
+    node: table.node,
+    pos: table.pos,
+    map: tableMap,
+    totalColumns: tableMap.width,
+    totalRows: tableMap.height,
+  };
+};
+
+const getSelectedCellCoords = (selection: CellSelection, tableInfo: TableInfo): CellCoord[] => {
+  const selectedCellCoords: CellCoord[] = [];
+
+  selection.forEachCell((_node, pos) => {
+    const cellStart = pos - tableInfo.pos - 1;
+    const coord = findCellCoordinate(cellStart, tableInfo);
+
+    if (coord) {
+      selectedCellCoords.push(coord);
+    }
+  });
+
+  return selectedCellCoords;
+};
+
+const findCellCoordinate = (cellStart: number, tableInfo: TableInfo): CellCoord | null => {
+  // Primary method: use indexOf
+  const cellIndex = tableInfo.map.map.indexOf(cellStart);
+
+  if (cellIndex !== -1) {
+    return {
+      row: Math.floor(cellIndex / tableInfo.totalColumns),
+      col: cellIndex % tableInfo.totalColumns,
+    };
+  }
+
+  // Fallback: manual search
+  for (let i = 0; i < tableInfo.map.map.length; i++) {
+    if (tableInfo.map.map[i] === cellStart) {
+      return {
+        row: Math.floor(i / tableInfo.totalColumns),
+        col: i % tableInfo.totalColumns,
+      };
+    }
+  }
+
+  return null;
+};
+
+const checkCellsHaveContent = (selection: CellSelection): boolean => {
+  let hasContent = false;
+
+  selection.forEachCell((node) => {
+    if (node && !isCellEmpty(node)) {
+      hasContent = true;
+    }
+  });
+
+  return hasContent;
+};
+
+const calculateSelectionBounds = (selectedCellCoords: CellCoord[]) => {
+  const minRow = Math.min(...selectedCellCoords.map((c) => c.row));
+  const maxRow = Math.max(...selectedCellCoords.map((c) => c.row));
+  const minCol = Math.min(...selectedCellCoords.map((c) => c.col));
+  const maxCol = Math.max(...selectedCellCoords.map((c) => c.col));
+
+  return {
+    minRow,
+    maxRow,
+    minCol,
+    maxCol,
+    totalColumnsInSelection: maxCol - minCol + 1,
+    totalRowsInSelection: maxRow - minRow + 1,
+  };
+};
+
+const deleteMultipleRows = (
+  editor: Editor,
+  totalRowsInSelection: number,
+  minRow: number,
+  initialTableInfo: TableInfo
+): boolean => {
+  // Position cursor at the first selected row
+  setCursorAtPosition(editor, initialTableInfo, minRow, 0);
+
+  // Delete rows one by one
+  for (let i = 0; i < totalRowsInSelection; i++) {
+    editor.commands.deleteRow();
+
+    // Reposition cursor if there are more rows to delete
+    if (i < totalRowsInSelection - 1) {
+      const updatedTableInfo = getTableInfo(editor);
+      if (updatedTableInfo) {
+        setCursorAtPosition(editor, updatedTableInfo, minRow, 0);
+      }
+    }
+  }
+
+  return true;
+};
+
+const deleteMultipleColumns = (
+  editor: Editor,
+  totalColumnsInSelection: number,
+  minCol: number,
+  initialTableInfo: TableInfo
+): boolean => {
+  // Position cursor at the first selected column
+  setCursorAtPosition(editor, initialTableInfo, 0, minCol);
+
+  // Delete columns one by one
+  for (let i = 0; i < totalColumnsInSelection; i++) {
+    editor.commands.deleteColumn();
+
+    // Reposition cursor if there are more columns to delete
+    if (i < totalColumnsInSelection - 1) {
+      const updatedTableInfo = getTableInfo(editor);
+      if (updatedTableInfo) {
+        setCursorAtPosition(editor, updatedTableInfo, 0, minCol);
+      }
+    }
+  }
+
+  return true;
+};
+
+const setCursorAtPosition = (editor: Editor, tableInfo: TableInfo, row: number, col: number): void => {
+  const cellIndex = row * tableInfo.totalColumns + col;
+  const cellPos = tableInfo.pos + tableInfo.map.map[cellIndex] + 1;
+
+  editor.commands.setCellSelection({
+    anchorCell: cellPos,
+    headCell: cellPos,
+  });
+};
diff --git a/packages/editor/src/extensions/table/table/utilities/delete-row.ts b/packages/editor/src/extensions/table/table/utilities/delete-row.ts
new file mode 100644
index 0000000..b798182
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/utilities/delete-row.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Command } from "@tiptap/core";
+import { deleteRow, deleteTable } from "@tiptap/pm/tables";
+// local imports
+import { isCellSelection } from "./helpers";
+
+export const deleteRowOrTable: () => Command =
+  () =>
+  ({ state, dispatch }) => {
+    const { selection } = state;
+
+    // Check if we're in a ProseMirrorTable and have a cell selection
+    if (!isCellSelection(selection)) {
+      return false;
+    }
+
+    // Get the ProseMirrorTable and calculate total rows
+    const tableStart = selection.$anchorCell.start(-1);
+    const selectedTable = state.doc.nodeAt(tableStart - 1);
+
+    if (!selectedTable) return false;
+
+    // Count total rows by examining the table's children
+    const totalRows = selectedTable.childCount;
+
+    // If only one row exists, delete the entire ProseMirrorTable
+    if (totalRows === 1) {
+      return deleteTable(state, dispatch);
+    }
+
+    // Otherwise, proceed with normal row deletion
+    return deleteRow(state, dispatch);
+  };
diff --git a/packages/editor/src/extensions/table/table/utilities/get-table-node-types.ts b/packages/editor/src/extensions/table/table/utilities/get-table-node-types.ts
new file mode 100644
index 0000000..2bb9071
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/utilities/get-table-node-types.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { NodeType, Schema } from "@tiptap/pm/model";
+
+export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
+  if (schema.cached.tableNodeTypes) {
+    return schema.cached.tableNodeTypes;
+  }
+
+  const roles: { [key: string]: NodeType } = {};
+
+  Object.keys(schema.nodes).forEach((type) => {
+    const nodeType = schema.nodes[type];
+
+    if (nodeType.spec.tableRole) {
+      roles[nodeType.spec.tableRole] = nodeType;
+    }
+  });
+
+  schema.cached.tableNodeTypes = roles;
+
+  return roles;
+}
diff --git a/packages/editor/src/extensions/table/table/utilities/helpers.ts b/packages/editor/src/extensions/table/table/utilities/helpers.ts
new file mode 100644
index 0000000..965b6cd
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/utilities/helpers.ts
@@ -0,0 +1,227 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { findParentNode } from "@tiptap/core";
+import type { Editor } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { EditorState, Selection, Transaction } from "@tiptap/pm/state";
+import { CellSelection, TableMap } from "@tiptap/pm/tables";
+import type { Rect } from "@tiptap/pm/tables";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+/**
+ * @description Check if the selection is a cell selection
+ * @param {Selection} selection - The selection to check
+ * @returns {boolean} True if the selection is a cell selection, false otherwise
+ */
+export const isCellSelection = (selection: Selection): selection is CellSelection => selection instanceof CellSelection;
+
+/**
+ * @description Check if a cell is empty
+ * @param {ProseMirrorNode | null} cell - The cell to check
+ * @returns {boolean} True if the cell is empty, false otherwise
+ */
+export const isCellEmpty = (cell: ProseMirrorNode | null): boolean => {
+  if (!cell || cell.content.size === 0) {
+    return true;
+  }
+
+  // Check if cell has any non-empty content
+  let hasContent = false;
+  cell.content.forEach((node) => {
+    if (node.type.name === CORE_EXTENSIONS.PARAGRAPH) {
+      if (node.content.size > 0) {
+        hasContent = true;
+      }
+    } else if (node.content.size > 0 || node.isText) {
+      hasContent = true;
+    }
+  });
+
+  return !hasContent;
+};
+
+export type TableNodeLocation = {
+  pos: number;
+  start: number;
+  node: ProseMirrorNode;
+};
+
+/**
+ * @description Find the table node location from the selection.
+ * @param {Selection} selection - The selection.
+ * @returns {TableNodeLocation | undefined} The table node location.
+ */
+export const findTable = (selection: Selection): TableNodeLocation | undefined =>
+  findParentNode((node) => node.type.spec.tableRole === "table")(selection);
+
+/**
+ * @description Check if the selection has table related changes.
+ * @param {Editor} editor - The editor instance.
+ * @param {TableNodeLocation | undefined} table - The table node location.
+ * @param {EditorState} oldState - The old editor state.
+ * @param {EditorState} newState - The new editor state.
+ * @param {Transaction} tr - The transaction.
+ * @returns {boolean} True if the selection has table related changes, false otherwise.
+ */
+export const haveTableRelatedChanges = (
+  editor: Editor,
+  table: TableNodeLocation | undefined,
+  oldState: EditorState,
+  newState: EditorState,
+  tr: Transaction
+): table is TableNodeLocation =>
+  editor.isEditable && table !== undefined && (tr.docChanged || !newState.selection.eq(oldState.selection));
+
+/**
+ * @description Get the selected rect from the cell selection.
+ * @param {CellSelection} selection - The cell selection.
+ * @param {TableMap} map - The table map.
+ * @returns {Rect} The selected rect.
+ */
+export const getSelectedRect = (selection: CellSelection, map: TableMap): Rect => {
+  const start = selection.$anchorCell.start(-1);
+  return map.rectBetween(selection.$anchorCell.pos - start, selection.$headCell.pos - start);
+};
+
+/**
+ * @description Get the selected columns from the cell selection.
+ * @param {Selection} selection - The selection.
+ * @param {TableMap} map - The table map.
+ * @returns {number[]} The selected columns.
+ */
+export const getSelectedColumns = (selection: Selection, map: TableMap): number[] => {
+  if (isCellSelection(selection) && selection.isColSelection()) {
+    const selectedRect = getSelectedRect(selection, map);
+    return [...Array(selectedRect.right - selectedRect.left).keys()].map((idx) => idx + selectedRect.left);
+  }
+
+  return [];
+};
+
+/**
+ * @description Get the selected rows from the cell selection.
+ * @param {Selection} selection - The selection.
+ * @param {TableMap} map - The table map.
+ * @returns {number[]} The selected rows.
+ */
+export const getSelectedRows = (selection: Selection, map: TableMap): number[] => {
+  if (isCellSelection(selection) && selection.isRowSelection()) {
+    const selectedRect = getSelectedRect(selection, map);
+    return [...Array(selectedRect.bottom - selectedRect.top).keys()].map((idx) => idx + selectedRect.top);
+  }
+
+  return [];
+};
+
+/**
+ * @description Check if the rect is selected.
+ * @param {Rect} rect - The rect.
+ * @param {CellSelection} selection - The cell selection.
+ * @returns {boolean} True if the rect is selected, false otherwise.
+ */
+export const isRectSelected = (rect: Rect, selection: CellSelection): boolean => {
+  const map = TableMap.get(selection.$anchorCell.node(-1));
+  const cells = map.cellsInRect(rect);
+  const selectedCells = map.cellsInRect(getSelectedRect(selection, map));
+
+  return cells.every((cell) => selectedCells.includes(cell));
+};
+
+/**
+ * @description Check if the column is selected.
+ * @param {number} columnIndex - The column index.
+ * @param {Selection} selection - The selection.
+ * @returns {boolean} True if the column is selected, false otherwise.
+ */
+export const isColumnSelected = (columnIndex: number, selection: Selection): boolean => {
+  if (!isCellSelection(selection)) return false;
+
+  const { height } = TableMap.get(selection.$anchorCell.node(-1));
+  const rect = { left: columnIndex, right: columnIndex + 1, top: 0, bottom: height };
+  return isRectSelected(rect, selection);
+};
+
+/**
+ * @description Check if the row is selected.
+ * @param {number} rowIndex - The row index.
+ * @param {Selection} selection - The selection.
+ * @returns {boolean} True if the row is selected, false otherwise.
+ */
+export const isRowSelected = (rowIndex: number, selection: Selection): boolean => {
+  if (isCellSelection(selection)) {
+    const { width } = TableMap.get(selection.$anchorCell.node(-1));
+    const rect = { left: 0, right: width, top: rowIndex, bottom: rowIndex + 1 };
+    return isRectSelected(rect, selection);
+  }
+
+  return false;
+};
+
+/**
+ * @description Select the column.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {number} index - The column index.
+ * @param {Transaction} tr - The transaction.
+ * @returns {Transaction} The updated transaction.
+ */
+export const selectColumn = (table: TableNodeLocation, index: number, tr: Transaction): Transaction => {
+  const { map } = TableMap.get(table.node);
+
+  const anchorCell = table.start + map[index];
+  const $anchor = tr.doc.resolve(anchorCell);
+
+  return tr.setSelection(CellSelection.colSelection($anchor));
+};
+
+/**
+ * @description Select the row.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {number} index - The row index.
+ * @param {Transaction} tr - The transaction.
+ * @returns {Transaction} The updated transaction.
+ */
+export const selectRow = (table: TableNodeLocation, index: number, tr: Transaction): Transaction => {
+  const { map, width } = TableMap.get(table.node);
+
+  const anchorCell = table.start + map[index * width];
+  const $anchor = tr.doc.resolve(anchorCell);
+
+  return tr.setSelection(CellSelection.rowSelection($anchor));
+};
+
+/**
+ * @description Get the position of the cell widget decoration.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {TableMap} map - The table map.
+ * @param {number} index - The index.
+ * @returns {number} The position of the cell widget decoration.
+ */
+export const getTableCellWidgetDecorationPos = (table: TableNodeLocation, map: TableMap, index: number): number =>
+  table.start + map.map[index] + 1;
+
+/**
+ * @description Get the height of the table in pixels.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {Editor} editor - The editor instance.
+ * @returns {number} The height of the table in pixels.
+ */
+export const getTableHeightPx = (table: TableNodeLocation, editor: Editor): number => {
+  const dom = editor.view.domAtPos(table.start);
+  return dom.node.parentElement?.offsetHeight ?? 0;
+};
+
+/**
+ * @description Get the width of the table in pixels.
+ * @param {TableNodeLocation} table - The table node location.
+ * @param {Editor} editor - The editor instance.
+ * @returns {number} The width of the table in pixels.
+ */
+export const getTableWidthPx = (table: TableNodeLocation, editor: Editor): number => {
+  const dom = editor.view.domAtPos(table.start);
+  return dom.node.parentElement?.offsetWidth ?? 0;
+};
diff --git a/packages/editor/src/extensions/table/table/utilities/insert-line-above-table-action.ts b/packages/editor/src/extensions/table/table/utilities/insert-line-above-table-action.ts
new file mode 100644
index 0000000..11f8433
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/utilities/insert-line-above-table-action.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { KeyboardShortcutCommand } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { findParentNodeOfType } from "@/helpers/common";
+
+export const insertLineAboveTableAction: KeyboardShortcutCommand = ({ editor }) => {
+  // Check if the current selection or the closest node is a table
+  if (!editor.isActive(CORE_EXTENSIONS.TABLE)) return false;
+
+  try {
+    // Get the current selection
+    const { selection } = editor.state;
+
+    // Find the table node and its position
+    const tableNode = findParentNodeOfType(selection, [CORE_EXTENSIONS.TABLE]);
+    if (!tableNode) return false;
+
+    const tablePos = tableNode.pos;
+
+    // Determine if the selection is in the first row of the table
+    const firstRow = tableNode.node.child(0);
+    const selectionPath = (selection.$anchor as any).path;
+    const selectionInFirstRow = selectionPath.includes(firstRow);
+
+    if (!selectionInFirstRow) return false;
+
+    // Check if the table is at the very start of the document or its parent node
+    if (tablePos === 0) {
+      // The table is at the start, so just insert a paragraph at the current position
+      editor.chain().insertContentAt(tablePos, { type: "paragraph" }).run();
+      editor
+        .chain()
+        .setTextSelection(tablePos + 1)
+        .run();
+    } else {
+      // The table is not at the start, check for the node immediately before the table
+      const prevNodePos = tablePos - 1;
+
+      if (prevNodePos <= 0) return false;
+
+      const prevNode = editor.state.doc.nodeAt(prevNodePos - 1);
+
+      if (prevNode && prevNode.type.name === CORE_EXTENSIONS.PARAGRAPH) {
+        // If there's a paragraph before the table, move the cursor to the end of that paragraph
+        const endOfParagraphPos = tablePos - prevNode.nodeSize;
+        editor.chain().setTextSelection(endOfParagraphPos).run();
+      } else {
+        return false;
+      }
+    }
+
+    return true;
+  } catch (e) {
+    console.error("failed to insert line above table", e);
+    return false;
+  }
+};
diff --git a/packages/editor/src/extensions/table/table/utilities/insert-line-below-table-action.ts b/packages/editor/src/extensions/table/table/utilities/insert-line-below-table-action.ts
new file mode 100644
index 0000000..ef90d25
--- /dev/null
+++ b/packages/editor/src/extensions/table/table/utilities/insert-line-below-table-action.ts
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { KeyboardShortcutCommand } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { findParentNodeOfType } from "@/helpers/common";
+
+export const insertLineBelowTableAction: KeyboardShortcutCommand = ({ editor }) => {
+  // Check if the current selection or the closest node is a table
+  if (!editor.isActive(CORE_EXTENSIONS.TABLE)) return false;
+
+  try {
+    // Get the current selection
+    const { selection } = editor.state;
+
+    // Find the table node and its position
+    const tableNode = findParentNodeOfType(selection, [CORE_EXTENSIONS.TABLE]);
+    if (!tableNode) return false;
+
+    const tablePos = tableNode.pos;
+    const table = tableNode.node;
+
+    // Determine if the selection is in the last row of the table
+    const rowCount = table.childCount;
+    const lastRow = table.child(rowCount - 1);
+    const selectionPath = (selection.$anchor as any).path;
+    const selectionInLastRow = selectionPath.includes(lastRow);
+
+    if (!selectionInLastRow) return false;
+
+    // Calculate the position immediately after the table
+    const nextNodePos = tablePos + table.nodeSize;
+
+    // Check for an existing node immediately after the table
+    const nextNode = editor.state.doc.nodeAt(nextNodePos);
+
+    if (nextNode && nextNode.type.name === CORE_EXTENSIONS.PARAGRAPH) {
+      // If the next node is an paragraph, move the cursor there
+      const endOfParagraphPos = nextNodePos + nextNode.nodeSize - 1;
+      editor.chain().setTextSelection(endOfParagraphPos).run();
+    } else if (!nextNode) {
+      // If the next node doesn't exist i.e. we're at the end of the document, create and insert a new empty node there
+      editor.chain().insertContentAt(nextNodePos, { type: CORE_EXTENSIONS.PARAGRAPH }).run();
+      editor
+        .chain()
+        .setTextSelection(nextNodePos + 1)
+        .run();
+    } else {
+      return false;
+    }
+
+    return true;
+  } catch (e) {
+    console.error("failed to insert line above table", e);
+    return false;
+  }
+};
diff --git a/packages/editor/src/extensions/text-align.ts b/packages/editor/src/extensions/text-align.ts
new file mode 100644
index 0000000..56f8447
--- /dev/null
+++ b/packages/editor/src/extensions/text-align.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import TextAlign from "@tiptap/extension-text-align";
+
+export type TTextAlign = "left" | "center" | "right";
+
+export const CustomTextAlignExtension = TextAlign.configure({
+  alignments: ["left", "center", "right"],
+  types: ["heading", "paragraph"],
+});
diff --git a/packages/editor/src/extensions/title-extension.ts b/packages/editor/src/extensions/title-extension.ts
new file mode 100644
index 0000000..5489c23
--- /dev/null
+++ b/packages/editor/src/extensions/title-extension.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { AnyExtension, Extensions } from "@tiptap/core";
+import Document from "@tiptap/extension-document";
+import Heading from "@tiptap/extension-heading";
+import Text from "@tiptap/extension-text";
+
+export const TitleExtensions: Extensions = [
+  Document.extend({
+    content: "heading",
+  }),
+  Heading.configure({
+    levels: [1],
+  }) as AnyExtension,
+  Text,
+];
diff --git a/packages/editor/src/extensions/trailing-node.ts b/packages/editor/src/extensions/trailing-node.ts
new file mode 100644
index 0000000..b41d888
--- /dev/null
+++ b/packages/editor/src/extensions/trailing-node.ts
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Extension } from "@tiptap/core";
+import type { NodeType, Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+function nodeEqualsType({ types, node }: { types: NodeType[]; node: ProseMirrorNode | null }) {
+  // TODO: check this logic, might be wrong
+  // @ts-expect-error - logic might be wrong
+  return (Array.isArray(types) && types.includes(node?.type)) || node?.type === types;
+}
+
+export interface TrailingNodeOptions {
+  node: string;
+  notAfter: string[];
+}
+
+export const TrailingNode = Extension.create<TrailingNodeOptions>({
+  name: "trailingNode",
+
+  addOptions() {
+    return {
+      node: CORE_EXTENSIONS.PARAGRAPH,
+      notAfter: [CORE_EXTENSIONS.PARAGRAPH],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const plugin = new PluginKey(this.name);
+    const disabledNodes = Object.entries(this.editor.schema.nodes)
+      .map(([, value]) => value)
+      .filter((node) => this.options.notAfter.includes(node.name));
+
+    return [
+      new Plugin({
+        key: plugin,
+        appendTransaction: (_, __, state) => {
+          const { doc, tr, schema } = state;
+          const shouldInsertNodeAtEnd = plugin.getState(state);
+          const endPosition = doc.content.size;
+          const type = schema.nodes[this.options.node];
+
+          if (!shouldInsertNodeAtEnd) {
+            return;
+          }
+
+          return tr.insert(endPosition, type.create());
+        },
+        state: {
+          init: (_, state) => {
+            const lastNode = state.tr.doc.lastChild;
+
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+          },
+          apply: (tr, value) => {
+            if (!tr.docChanged) {
+              return value;
+            }
+
+            const lastNode = tr.doc.lastChild;
+
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+          },
+        },
+      }),
+    ];
+  },
+});
diff --git a/packages/editor/src/extensions/typography/index.ts b/packages/editor/src/extensions/typography/index.ts
new file mode 100644
index 0000000..51d21b6
--- /dev/null
+++ b/packages/editor/src/extensions/typography/index.ts
@@ -0,0 +1,112 @@
+import type { InputRule } from "@tiptap/core";
+import { Extension } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+import type { TypographyOptions } from "./inputRules";
+import {
+  emDash,
+  ellipsis,
+  leftArrow,
+  rightArrow,
+  copyright,
+  trademark,
+  servicemark,
+  registeredTrademark,
+  oneHalf,
+  plusMinus,
+  notEqual,
+  laquo,
+  raquo,
+  multiplication,
+  superscriptTwo,
+  superscriptThree,
+  oneQuarter,
+  threeQuarters,
+  impliesArrowRight,
+} from "./inputRules";
+
+export const CustomTypographyExtension = Extension.create<TypographyOptions>({
+  name: CORE_EXTENSIONS.TYPOGRAPHY,
+
+  addInputRules() {
+    const rules: InputRule[] = [];
+
+    if (this.options.emDash !== false) {
+      rules.push(emDash(this.options.emDash));
+    }
+
+    if (this.options.impliesArrowRight !== false) {
+      rules.push(impliesArrowRight(this.options.impliesArrowRight));
+    }
+
+    if (this.options.ellipsis !== false) {
+      rules.push(ellipsis(this.options.ellipsis));
+    }
+
+    if (this.options.leftArrow !== false) {
+      rules.push(leftArrow(this.options.leftArrow));
+    }
+
+    if (this.options.rightArrow !== false) {
+      rules.push(rightArrow(this.options.rightArrow));
+    }
+
+    if (this.options.copyright !== false) {
+      rules.push(copyright(this.options.copyright));
+    }
+
+    if (this.options.trademark !== false) {
+      rules.push(trademark(this.options.trademark));
+    }
+
+    if (this.options.servicemark !== false) {
+      rules.push(servicemark(this.options.servicemark));
+    }
+
+    if (this.options.registeredTrademark !== false) {
+      rules.push(registeredTrademark(this.options.registeredTrademark));
+    }
+
+    if (this.options.oneHalf !== false) {
+      rules.push(oneHalf(this.options.oneHalf));
+    }
+
+    if (this.options.plusMinus !== false) {
+      rules.push(plusMinus(this.options.plusMinus));
+    }
+
+    if (this.options.notEqual !== false) {
+      rules.push(notEqual(this.options.notEqual));
+    }
+
+    if (this.options.laquo !== false) {
+      rules.push(laquo(this.options.laquo));
+    }
+
+    if (this.options.raquo !== false) {
+      rules.push(raquo(this.options.raquo));
+    }
+
+    if (this.options.multiplication !== false) {
+      rules.push(multiplication(this.options.multiplication));
+    }
+
+    if (this.options.superscriptTwo !== false) {
+      rules.push(superscriptTwo(this.options.superscriptTwo));
+    }
+
+    if (this.options.superscriptThree !== false) {
+      rules.push(superscriptThree(this.options.superscriptThree));
+    }
+
+    if (this.options.oneQuarter !== false) {
+      rules.push(oneQuarter(this.options.oneQuarter));
+    }
+
+    if (this.options.threeQuarters !== false) {
+      rules.push(threeQuarters(this.options.threeQuarters));
+    }
+
+    return rules;
+  },
+});
diff --git a/packages/editor/src/extensions/typography/inputRules.ts b/packages/editor/src/extensions/typography/inputRules.ts
new file mode 100644
index 0000000..cc5fea0
--- /dev/null
+++ b/packages/editor/src/extensions/typography/inputRules.ts
@@ -0,0 +1,137 @@
+import { textInputRule } from "@tiptap/core";
+
+export type TypographyOptions = {
+  emDash: false | string;
+  ellipsis: false | string;
+  leftArrow: false | string;
+  rightArrow: false | string;
+  copyright: false | string;
+  trademark: false | string;
+  servicemark: false | string;
+  registeredTrademark: false | string;
+  oneHalf: false | string;
+  plusMinus: false | string;
+  notEqual: false | string;
+  laquo: false | string;
+  raquo: false | string;
+  multiplication: false | string;
+  superscriptTwo: false | string;
+  superscriptThree: false | string;
+  oneQuarter: false | string;
+  threeQuarters: false | string;
+  impliesArrowRight: false | string;
+};
+
+export const emDash = (override?: string) =>
+  textInputRule({
+    find: /--$/,
+    replace: override ?? "—",
+  });
+
+export const impliesArrowRight = (override?: string) =>
+  textInputRule({
+    find: /=>$/,
+    replace: override ?? "⇒",
+  });
+
+export const leftArrow = (override?: string) =>
+  textInputRule({
+    find: /<-$/,
+    replace: override ?? "←",
+  });
+
+export const rightArrow = (override?: string) =>
+  textInputRule({
+    find: /->$/,
+    replace: override ?? "→",
+  });
+
+export const ellipsis = (override?: string) =>
+  textInputRule({
+    find: /\.\.\.$/,
+    replace: override ?? "…",
+  });
+
+export const copyright = (override?: string) =>
+  textInputRule({
+    find: /$c$$/,
+    replace: override ?? "©",
+  });
+
+export const trademark = (override?: string) =>
+  textInputRule({
+    find: /$tm$$/,
+    replace: override ?? "™",
+  });
+
+export const servicemark = (override?: string) =>
+  textInputRule({
+    find: /$sm$$/,
+    replace: override ?? "℠",
+  });
+
+export const registeredTrademark = (override?: string) =>
+  textInputRule({
+    find: /$r$$/,
+    replace: override ?? "®",
+  });
+
+export const oneHalf = (override?: string) =>
+  textInputRule({
+    find: /(?:^|\s)(1\/2)\s$/,
+    replace: override ?? "½",
+  });
+
+export const plusMinus = (override?: string) =>
+  textInputRule({
+    find: /\+\/-$/,
+    replace: override ?? "±",
+  });
+
+export const notEqual = (override?: string) =>
+  textInputRule({
+    find: /!=$/,
+    replace: override ?? "≠",
+  });
+
+export const laquo = (override?: string) =>
+  textInputRule({
+    find: /<<$/,
+    replace: override ?? "«",
+  });
+
+export const raquo = (override?: string) =>
+  textInputRule({
+    find: />>$/,
+    replace: override ?? "»",
+  });
+
+export const multiplication = (override?: string) =>
+  textInputRule({
+    find: /\d+\s?([*x])\s?\d+$/,
+    replace: override ?? "×",
+  });
+
+export const superscriptTwo = (override?: string) =>
+  textInputRule({
+    find: /\^2$/,
+    replace: override ?? "²",
+  });
+
+export const superscriptThree = (override?: string) =>
+  textInputRule({
+    find: /\^3$/,
+    replace: override ?? "³",
+  });
+
+export const oneQuarter = (override?: string) =>
+  textInputRule({
+    find: /(?:^|\s)(1\/4)\s$/,
+    replace: override ?? "¼",
+  });
+
+export const threeQuarters = (override?: string) =>
+  textInputRule({
+    find: /(?:^|\s)(3\/4)\s$/,
+    replace: override ?? "¾",
+  });
diff --git a/packages/editor/src/extensions/unique-id/extension.ts b/packages/editor/src/extensions/unique-id/extension.ts
new file mode 100644
index 0000000..d313abe
--- /dev/null
+++ b/packages/editor/src/extensions/unique-id/extension.ts
@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import { Extension } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { Transaction } from "@tiptap/pm/state";
+import { v4 as uuidv4 } from "uuid";
+// constants
+import { CORE_EXTENSIONS, BLOCK_NODE_TYPES } from "@/constants/extension";
+import { ADDITIONAL_BLOCK_NODE_TYPES } from "@/constants/extensions";
+import { createUniqueIDPlugin } from "./plugin";
+import { createIdsForView } from "./utils";
+// plane imports
+
+const COMBINED_BLOCK_NODE_TYPES = [...BLOCK_NODE_TYPES, ...ADDITIONAL_BLOCK_NODE_TYPES];
+export type UniqueIDGenerationContext = {
+  node: ProseMirrorNode;
+  pos: number;
+};
+export const UniqueIDAttribute = "id";
+export const generateUniqueID = () => uuidv4();
+
+export interface UniqueIDOptions {
+  /**
+   * The name of the attribute to add the unique ID to.
+   * @default "id"
+   */
+  attributeName: string;
+  /**
+   * The types of nodes to add unique IDs to.
+   * @default []
+   */
+  types: string[];
+  /**
+   * The function that generates the unique ID. By default, a UUID v4 is
+   * generated. However, you can provide your own function to generate the
+   * unique ID based on the node type and the position.
+   */
+  generateUniqueID: (ctx: UniqueIDGenerationContext) => string;
+  /**
+   * Ignore some mutations, for example applied from other users through the collaboration plugin.
+   *
+   * @default null
+   */
+  filterTransaction: ((transaction: Transaction) => boolean) | null;
+  /**
+   * Whether to update the document by adding unique IDs to the nodes. Set this
+   * property to `false` if the document is in `readonly` mode, is immutable, or
+   * you don't want it to be modified.
+   *
+   * @default true
+   */
+  updateDocument: boolean;
+  /**
+   * The provider to use for the unique ID generation.
+   * @default null
+   */
+  provider: HocuspocusProvider | undefined;
+}
+
+export const UniqueID = Extension.create<UniqueIDOptions>({
+  name: CORE_EXTENSIONS.UNIQUE_ID,
+
+  // we'll set a very high priority to make sure this runs first
+  // and is compatible with `appendTransaction` hooks of other extensions
+  priority: 10000,
+
+  addOptions() {
+    return {
+      attributeName: "id",
+      types: COMBINED_BLOCK_NODE_TYPES,
+      generateUniqueID: () => uuidv4(),
+      filterTransaction: null,
+      updateDocument: true,
+      provider: undefined,
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          [this.options.attributeName]: {
+            default: null,
+            parseHTML: (element) => element.getAttribute(`data-${this.options.attributeName}`),
+            renderHTML: (attributes) => {
+              if (!attributes[this.options.attributeName]) {
+                return {};
+              }
+
+              return {
+                [`data-${this.options.attributeName}`]: attributes[this.options.attributeName],
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  // check initial content for missing ids
+  onCreate() {
+    if (!this.editor.isEditable) {
+      this.options.updateDocument = false;
+    }
+
+    if (!this.options.updateDocument) {
+      return;
+    }
+
+    const provider = this.options.provider;
+
+    /**
+     * We need to handle collaboration a bit different here
+     * because we can't automatically add IDs when the provider is not yet synced
+     * otherwise we end up with empty paragraphs
+     */
+    if (provider) {
+      // Check if provider is already synced
+      if (provider.isSynced) {
+        createIdsForView(this.editor.view, this.options);
+      }
+      // If not synced, the listener will be registered in the plugin
+      // and handled there with proper cleanup
+    } else {
+      createIdsForView(this.editor.view, this.options);
+    }
+  },
+
+  addProseMirrorPlugins() {
+    if (!this.options.updateDocument) {
+      return [];
+    }
+
+    return [createUniqueIDPlugin(this.options)];
+  },
+});
diff --git a/packages/editor/src/extensions/unique-id/plugin.ts b/packages/editor/src/extensions/unique-id/plugin.ts
new file mode 100644
index 0000000..e2839bd
--- /dev/null
+++ b/packages/editor/src/extensions/unique-id/plugin.ts
@@ -0,0 +1,218 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { combineTransactionSteps, findChildrenInRange, findDuplicates, getChangedRanges } from "@tiptap/core";
+import { Fragment, Slice } from "@tiptap/pm/model";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import type { Transaction } from "@tiptap/pm/state";
+// types
+import type { UniqueIDOptions } from "./extension";
+// utils
+import { createIdsForView } from "./utils";
+
+export const createUniqueIDPlugin = (options: UniqueIDOptions) => {
+  let dragSourceElement: Element | null = null;
+  let transformPasted = false;
+  let syncHandler: (() => void) | null = null;
+
+  return new Plugin({
+    key: new PluginKey("uniqueID"),
+    appendTransaction: (transactions, oldState, newState) => {
+      const hasDocChanges =
+        transactions.some((transaction) => transaction.docChanged) && !oldState.doc.eq(newState.doc);
+      const filterTransactions =
+        options.filterTransaction && transactions.some((tr) => !options.filterTransaction?.(tr));
+
+      const isCollabTransaction = transactions.find((tr) => tr.getMeta("y-sync$"));
+
+      if (isCollabTransaction) {
+        return;
+      }
+
+      if (!hasDocChanges || filterTransactions) {
+        return;
+      }
+
+      const { tr } = newState;
+
+      const { types, attributeName, generateUniqueID } = options;
+      const transform = combineTransactionSteps(oldState.doc, transactions as Transaction[]);
+
+      const { mapping } = transform;
+
+      // get changed ranges based on the old state
+      const changes = getChangedRanges(transform);
+
+      // Get all IDs from the entire document to check for duplicates globally
+      const allNodesInDoc: Array<{ node: ProseMirrorNode; pos: number }> = [];
+      newState.doc.descendants((node, pos) => {
+        if (types.includes(node.type.name)) {
+          allNodesInDoc.push({ node, pos });
+        }
+      });
+      const allIds = allNodesInDoc.map(({ node }) => node.attrs[attributeName]).filter((id) => id !== null);
+      const duplicatedIds = findDuplicates(allIds);
+
+      changes.forEach(({ newRange }) => {
+        const newNodes = findChildrenInRange(newState.doc, newRange, (node) => types.includes(node.type.name));
+
+        newNodes.forEach(({ node, pos }) => {
+          // instead of checking `node.attrs[attributeName]` directly
+          // we look at the current state of the node within `tr.doc`.
+          // this helps to prevent adding new ids to the same node
+          // if the node changed multiple times within one transaction
+          const id = tr.doc.nodeAt(pos)?.attrs[attributeName];
+
+          if (id === null) {
+            tr.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
+              [attributeName]: generateUniqueID({ node, pos }),
+            });
+
+            return;
+          }
+
+          // check if the node doesn't exist in the old state
+          const { deleted } = mapping.invert().mapResult(pos);
+
+          // If this is a new node (didn't exist in old state) and its ID is duplicated in the entire document
+          const newNode = deleted && duplicatedIds.includes(id);
+
+          if (newNode) {
+            tr.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
+              [attributeName]: generateUniqueID({ node, pos }),
+            });
+          }
+        });
+      });
+
+      if (!tr.steps.length) {
+        return;
+      }
+
+      // `tr.setNodeMarkup` resets the stored marks
+      // so we'll restore them if they exist
+      tr.setStoredMarks(newState.tr.storedMarks);
+
+      // Don't add ID generation to undo history
+      // since its causing issue with undo feature we are commmeting it out for now
+      // tr.setMeta("addToHistory", false);
+
+      return tr;
+    },
+
+    // we register a global drag handler to track the current drag source element
+    view(view) {
+      const handleDragstart = (event: DragEvent) => {
+        dragSourceElement = view.dom.parentElement?.contains(event.target as Element) ? view.dom.parentElement : null;
+      };
+
+      window.addEventListener("dragstart", handleDragstart);
+
+      // Handle provider sync listener for creating IDs when collaboration provider syncs
+      const provider = options.provider;
+      if (provider && !provider.isSynced) {
+        syncHandler = () => {
+          createIdsForView(view, options);
+
+          // Clean up the listener after it runs
+          if (provider && syncHandler) {
+            provider.off("synced", syncHandler);
+            syncHandler = null;
+          }
+        };
+
+        provider.on("synced", syncHandler);
+      }
+
+      return {
+        destroy() {
+          window.removeEventListener("dragstart", handleDragstart);
+
+          // Clean up provider sync listener if it exists
+          if (provider && syncHandler) {
+            provider.off("synced", syncHandler);
+            syncHandler = null;
+          }
+        },
+      };
+    },
+
+    props: {
+      // `handleDOMEvents` is called before `transformPasted`
+      // so we can do some checks before
+      handleDOMEvents: {
+        // only create new ids for dropped content
+        // or dropped content while holding `alt`
+        // or content is dragged from another editor
+        drop: (view, event) => {
+          if (dragSourceElement !== view.dom.parentElement || event.dataTransfer?.effectAllowed === "copy") {
+            dragSourceElement = null;
+            transformPasted = true;
+          }
+
+          return false;
+        },
+        // always create new ids on pasted content
+        paste: () => {
+          transformPasted = true;
+
+          return false;
+        },
+      },
+
+      // we'll remove ids for every pasted node
+      // so we can create a new one within `appendTransaction`
+      transformPasted: (slice) => {
+        if (!transformPasted) {
+          return slice;
+        }
+
+        const { types, attributeName } = options;
+        const removeId = (fragment: Fragment): Fragment => {
+          const list: ProseMirrorNode[] = [];
+
+          fragment.forEach((node) => {
+            // don't touch text nodes
+            if (node.isText) {
+              list.push(node);
+
+              return;
+            }
+
+            // check for any other child nodes
+            if (!types.includes(node.type.name)) {
+              list.push(node.copy(removeId(node.content)));
+
+              return;
+            }
+
+            // remove id
+            const nodeWithoutId = node.type.create(
+              {
+                ...node.attrs,
+                [attributeName]: null,
+              },
+              removeId(node.content),
+              node.marks
+            );
+
+            list.push(nodeWithoutId);
+          });
+
+          return Fragment.from(list);
+        };
+
+        // reset check
+        transformPasted = false;
+
+        return new Slice(removeId(slice.content), slice.openStart, slice.openEnd);
+      },
+    },
+  });
+};
diff --git a/packages/editor/src/extensions/unique-id/utils.ts b/packages/editor/src/extensions/unique-id/utils.ts
new file mode 100644
index 0000000..92016e3
--- /dev/null
+++ b/packages/editor/src/extensions/unique-id/utils.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { findChildren } from "@tiptap/core";
+import type { EditorView } from "@tiptap/pm/view";
+// types
+import type { UniqueIDOptions } from "./extension";
+
+/**
+ * Utility function to create IDs for nodes that don't have them
+ */
+export const createIdsForView = (view: EditorView, options: UniqueIDOptions) => {
+  const { state } = view;
+  const { tr, doc } = state;
+  const { types, attributeName, generateUniqueID } = options;
+
+  // size > 2 means more than just the default empty paragraph
+  const hasContent = doc.content.size > 2;
+  if (!hasContent) {
+    return;
+  }
+
+  const nodesWithoutId = findChildren(
+    doc,
+    (node) => types.includes(node.type.name) && node.attrs[attributeName] === null
+  );
+
+  nodesWithoutId.forEach(({ node, pos }) => {
+    tr.setNodeMarkup(pos, undefined, {
+      ...node.attrs,
+      [attributeName]: generateUniqueID({ node, pos }),
+    });
+  });
+
+  tr.setMeta("addToHistory", false);
+  tr.setMeta("uniqueIdOnlyChange", true);
+
+  view.dispatch(tr);
+};
diff --git a/packages/editor/src/extensions/utility.ts b/packages/editor/src/extensions/utility.ts
new file mode 100644
index 0000000..ae8af23
--- /dev/null
+++ b/packages/editor/src/extensions/utility.ts
@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Extension } from "@tiptap/core";
+import codemark from "prosemirror-codemark";
+// helpers
+import { CORE_EXTENSIONS } from "@/constants/extension";
+import { restorePublicImages } from "@/helpers/image-helpers";
+// plugins
+import type { TAdditionalActiveDropbarExtensions } from "@/types/utils";
+import { DropHandlerPlugin } from "@/plugins/drop";
+import { FilePlugins } from "@/plugins/file/root";
+import { MarkdownClipboardPlugin } from "@/plugins/markdown-clipboard";
+import type { IEditorProps, TEditorAsset, TFileHandler } from "@/types";
+
+type TActiveDropbarExtensions =
+  | CORE_EXTENSIONS.MENTION
+  | CORE_EXTENSIONS.EMOJI
+  | CORE_EXTENSIONS.SLASH_COMMANDS
+  | CORE_EXTENSIONS.TABLE
+  | "bubble-menu"
+  | CORE_EXTENSIONS.SIDE_MENU
+  | TAdditionalActiveDropbarExtensions;
+
+declare module "@tiptap/core" {
+  interface Commands {
+    [CORE_EXTENSIONS.UTILITY]: {
+      updateAssetsUploadStatus: (updatedStatus: TFileHandler["assetsUploadStatus"]) => () => void;
+      updateAssetsList: (
+        args:
+          | {
+              asset: TEditorAsset;
+            }
+          | {
+              idToRemove: string;
+            }
+      ) => () => void;
+      addActiveDropbarExtension: (extension: TActiveDropbarExtensions) => () => void;
+      removeActiveDropbarExtension: (extension: TActiveDropbarExtensions) => () => void;
+    };
+  }
+  interface Storage {
+    [CORE_EXTENSIONS.UTILITY]: UtilityExtensionStorage;
+  }
+}
+
+export type UtilityExtensionStorage = {
+  assetsList: TEditorAsset[];
+  assetsUploadStatus: TFileHandler["assetsUploadStatus"];
+  uploadInProgress: boolean;
+  activeDropbarExtensions: TActiveDropbarExtensions[];
+  isTouchDevice: boolean;
+};
+
+type Props = Pick<IEditorProps, "disabledExtensions" | "flaggedExtensions" | "getEditorMetaData"> & {
+  fileHandler: TFileHandler;
+  isEditable: boolean;
+  isTouchDevice: boolean;
+};
+
+export const UtilityExtension = (props: Props) => {
+  const { disabledExtensions, flaggedExtensions, fileHandler, getEditorMetaData, isEditable, isTouchDevice } = props;
+  const { restore } = fileHandler;
+
+  return Extension.create<Record<string, unknown>, UtilityExtensionStorage>({
+    name: CORE_EXTENSIONS.UTILITY,
+    priority: 1000,
+
+    addProseMirrorPlugins() {
+      return [
+        ...FilePlugins({
+          editor: this.editor,
+          isEditable,
+          fileHandler,
+        }),
+        ...codemark({ markType: this.editor.schema.marks.code }),
+        MarkdownClipboardPlugin({
+          editor: this.editor,
+          getEditorMetaData,
+        }),
+        DropHandlerPlugin({
+          disabledExtensions,
+          flaggedExtensions,
+          editor: this.editor,
+        }),
+      ];
+    },
+
+    onCreate() {
+      restorePublicImages(this.editor, restore);
+    },
+
+    addStorage() {
+      return {
+        assetsList: [],
+        assetsUploadStatus: isEditable && "assetsUploadStatus" in fileHandler ? fileHandler.assetsUploadStatus : {},
+        uploadInProgress: false,
+        activeDropbarExtensions: [],
+        isTouchDevice,
+      };
+    },
+
+    addCommands() {
+      return {
+        updateAssetsUploadStatus: (updatedStatus) => () => {
+          this.storage.assetsUploadStatus = updatedStatus;
+        },
+        updateAssetsList: (args) => () => {
+          const uniqueAssets = new Set(this.storage.assetsList);
+          if ("asset" in args) {
+            const alreadyExists = this.storage.assetsList.find((asset) => asset.id === args.asset.id);
+            if (!alreadyExists) {
+              uniqueAssets.add(args.asset);
+            }
+          } else if ("idToRemove" in args) {
+            const asset = this.storage.assetsList.find((asset) => asset.id === args.idToRemove);
+            if (asset) {
+              uniqueAssets.delete(asset);
+            }
+          }
+          this.storage.assetsList = Array.from(uniqueAssets);
+        },
+        addActiveDropbarExtension: (extension) => () => {
+          const index = this.storage.activeDropbarExtensions.indexOf(extension);
+          if (index === -1) {
+            this.storage.activeDropbarExtensions.push(extension);
+          }
+        },
+        removeActiveDropbarExtension: (extension) => () => {
+          const index = this.storage.activeDropbarExtensions.indexOf(extension);
+          if (index !== -1) {
+            this.storage.activeDropbarExtensions.splice(index, 1);
+          }
+        },
+      };
+    },
+  });
+};
diff --git a/packages/editor/src/extensions/work-item-embed/extension-config.ts b/packages/editor/src/extensions/work-item-embed/extension-config.ts
new file mode 100644
index 0000000..fb0fc1b
--- /dev/null
+++ b/packages/editor/src/extensions/work-item-embed/extension-config.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { mergeAttributes, Node } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+export const WorkItemEmbedExtensionConfig = Node.create({
+  name: CORE_EXTENSIONS.WORK_ITEM_EMBED,
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      entity_identifier: {
+        default: undefined,
+      },
+      project_identifier: {
+        default: undefined,
+      },
+      workspace_identifier: {
+        default: undefined,
+      },
+      id: {
+        default: undefined,
+      },
+      entity_name: {
+        default: undefined,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "issue-embed-component",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["issue-embed-component", mergeAttributes(HTMLAttributes)];
+  },
+});
diff --git a/packages/editor/src/extensions/work-item-embed/extension.tsx b/packages/editor/src/extensions/work-item-embed/extension.tsx
new file mode 100644
index 0000000..be9af11
--- /dev/null
+++ b/packages/editor/src/extensions/work-item-embed/extension.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ReactNodeViewRenderer, NodeViewWrapper } from "@tiptap/react";
+import type { NodeViewProps } from "@tiptap/react";
+// local imports
+import { WorkItemEmbedExtensionConfig } from "./extension-config";
+import type { TWorkItemEmbedAttributes } from "./types";
+import { EWorkItemEmbedAttributeNames } from "./types";
+
+type Props = {
+  widgetCallback: ({
+    issueId,
+    projectId,
+    workspaceSlug,
+  }: {
+    issueId: string;
+    projectId: string | undefined;
+    workspaceSlug: string | undefined;
+  }) => React.ReactNode;
+};
+
+export function WorkItemEmbedExtension(props: Props) {
+  return WorkItemEmbedExtensionConfig.extend({
+    addNodeView() {
+      return ReactNodeViewRenderer((issueProps: NodeViewProps) => {
+        const attrs = issueProps.node.attrs as TWorkItemEmbedAttributes;
+        return (
+          <NodeViewWrapper key={attrs[EWorkItemEmbedAttributeNames.ID]}>
+            {props.widgetCallback({
+              issueId: attrs[EWorkItemEmbedAttributeNames.ENTITY_IDENTIFIER] ?? "",
+              projectId: attrs[EWorkItemEmbedAttributeNames.PROJECT_IDENTIFIER],
+              workspaceSlug: attrs[EWorkItemEmbedAttributeNames.WORKSPACE_IDENTIFIER],
+            })}
+          </NodeViewWrapper>
+        );
+      });
+    },
+  });
+}
diff --git a/packages/editor/src/extensions/work-item-embed/index.ts b/packages/editor/src/extensions/work-item-embed/index.ts
new file mode 100644
index 0000000..2dcbf26
--- /dev/null
+++ b/packages/editor/src/extensions/work-item-embed/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./extension";
diff --git a/packages/editor/src/extensions/work-item-embed/types.ts b/packages/editor/src/extensions/work-item-embed/types.ts
new file mode 100644
index 0000000..aeb6caf
--- /dev/null
+++ b/packages/editor/src/extensions/work-item-embed/types.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EWorkItemEmbedAttributeNames {
+  ID = "id",
+  ENTITY_IDENTIFIER = "entity_identifier",
+  PROJECT_IDENTIFIER = "project_identifier",
+  WORKSPACE_IDENTIFIER = "workspace_identifier",
+  ENTITY_NAME = "entity_name",
+}
+
+export type TWorkItemEmbedAttributes = {
+  [EWorkItemEmbedAttributeNames.ID]: string | undefined;
+  [EWorkItemEmbedAttributeNames.ENTITY_IDENTIFIER]: string | undefined;
+  [EWorkItemEmbedAttributeNames.PROJECT_IDENTIFIER]: string | undefined;
+  [EWorkItemEmbedAttributeNames.WORKSPACE_IDENTIFIER]: string | undefined;
+  [EWorkItemEmbedAttributeNames.ENTITY_NAME]: string | undefined;
+};
diff --git a/packages/editor/src/helpers/asset-duplication.ts b/packages/editor/src/helpers/asset-duplication.ts
new file mode 100644
index 0000000..84da1a2
--- /dev/null
+++ b/packages/editor/src/helpers/asset-duplication.ts
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { v4 as uuidv4 } from "uuid";
+import { ECustomImageAttributeNames, ECustomImageStatus } from "@/extensions/custom-image/types";
+
+export type AssetDuplicationContext = {
+  element: Element;
+  originalHtml: string;
+};
+
+export type AssetDuplicationResult = {
+  modifiedHtml: string;
+  shouldProcess: boolean;
+};
+
+export type AssetDuplicationHandler = (context: AssetDuplicationContext) => AssetDuplicationResult;
+
+const imageComponentHandler: AssetDuplicationHandler = ({ element, originalHtml }) => {
+  const src = element.getAttribute("src");
+
+  if (!src || src.startsWith("http")) {
+    return { modifiedHtml: originalHtml, shouldProcess: false };
+  }
+
+  // Capture the original HTML BEFORE making any modifications
+  const originalTag = element.outerHTML;
+
+  // Use setAttribute to update attributes
+  const newId = uuidv4();
+  element.setAttribute(ECustomImageAttributeNames.STATUS, ECustomImageStatus.DUPLICATING);
+  element.setAttribute(ECustomImageAttributeNames.ID, newId);
+
+  // Get the modified HTML AFTER the changes
+  const modifiedTag = element.outerHTML;
+  const modifiedHtml = originalHtml.replaceAll(originalTag, modifiedTag);
+
+  return { modifiedHtml, shouldProcess: true };
+};
+
+export const assetDuplicationHandlers: Record<string, AssetDuplicationHandler> = {
+  "image-component": imageComponentHandler,
+};
diff --git a/packages/editor/src/helpers/assets.ts b/packages/editor/src/helpers/assets.ts
new file mode 100644
index 0000000..7ca5eda
--- /dev/null
+++ b/packages/editor/src/helpers/assets.ts
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+// plane imports
+import type { ADDITIONAL_EXTENSIONS } from "@plane/utils";
+import { CORE_EXTENSIONS } from "@plane/utils";
+// extensions
+import { getImageBlockId } from "@/extensions/custom-image/utils";
+// plane editor imports
+import { ADDITIONAL_ASSETS_META_DATA_RECORD } from "@/constants/assets";
+// types
+import type { TEditorAsset } from "@/types";
+
+export type TAssetMetaDataRecord = (attrs: ProseMirrorNode["attrs"]) => TEditorAsset | undefined;
+
+export const CORE_ASSETS_META_DATA_RECORD: Partial<
+  Record<CORE_EXTENSIONS | ADDITIONAL_EXTENSIONS, TAssetMetaDataRecord>
+> = {
+  [CORE_EXTENSIONS.IMAGE]: (attrs) => {
+    if (!attrs?.src) return;
+    return {
+      href: `#${getImageBlockId(attrs?.id ?? "")}`,
+      id: attrs?.id,
+      name: `image-${attrs?.id}`,
+      size: 0,
+      src: attrs?.src,
+      type: CORE_EXTENSIONS.IMAGE,
+    };
+  },
+  [CORE_EXTENSIONS.CUSTOM_IMAGE]: (attrs) => {
+    if (!attrs?.src) return;
+    return {
+      href: `#${getImageBlockId(attrs?.id ?? "")}`,
+      id: attrs?.id,
+      name: `image-${attrs?.id}`,
+      size: 0,
+      src: attrs?.src,
+      type: CORE_EXTENSIONS.CUSTOM_IMAGE,
+    };
+  },
+  ...ADDITIONAL_ASSETS_META_DATA_RECORD,
+};
diff --git a/packages/editor/src/helpers/common.ts b/packages/editor/src/helpers/common.ts
new file mode 100644
index 0000000..1139bb7
--- /dev/null
+++ b/packages/editor/src/helpers/common.ts
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import type { EditorState, Selection } from "@tiptap/pm/state";
+// plane imports
+import { cn } from "@plane/utils";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+type EditorClassNameArgs = {
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  containerClassName?: string;
+};
+
+export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassName }: EditorClassNameArgs) =>
+  cn(
+    "w-full max-w-full focus:border-0 focus:outline-none sm:rounded-lg",
+    {
+      "border border-subtle-1": !noBorder,
+      "border-strong focus:border": borderOnFocus,
+    },
+    containerClassName
+  );
+
+// Helper function to find the parent node of a specific type
+export const findParentNodeOfType = (
+  selection: Selection,
+  typeName: string[]
+): {
+  node: ProseMirrorNode;
+  pos: number;
+  depth: number;
+} | null => {
+  let depth = selection.$anchor.depth;
+  while (depth > 0) {
+    const node = selection.$anchor.node(depth);
+    if (typeName.includes(node.type.name)) {
+      return {
+        node,
+        pos: selection.$anchor.start(depth) - 1,
+        depth,
+      };
+    }
+    depth--;
+  }
+  return null;
+};
+
+export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
+  while (node !== null && node.nodeName !== "TABLE") {
+    node = node.parentNode;
+  }
+  return node as HTMLTableElement;
+};
+
+export const getTrimmedHTML = (html: string) =>
+  html
+    .replace(/^(?:<p><\/p>)+/g, "") // Remove from beginning
+    .replace(/(?:<p><\/p>)+$/g, ""); // Remove from end
+
+export const isValidHttpUrl = (string: string): { isValid: boolean; url: string } => {
+  // List of potentially dangerous protocols to block
+  const blockedProtocols = ["javascript:", "data:", "vbscript:", "file:", "about:"];
+
+  // First try with the original string
+  try {
+    const url = new URL(string);
+
+    // Check for potentially dangerous protocols
+    const protocol = url.protocol.toLowerCase();
+    if (blockedProtocols.some((p) => protocol === p)) {
+      return {
+        isValid: false,
+        url: string,
+      };
+    }
+
+    // If URL has any valid protocol, return as is
+    if (url.protocol && url.protocol !== "") {
+      return {
+        isValid: true,
+        url: string,
+      };
+    }
+  } catch {
+    // Original string wasn't a valid URL - that's okay, we'll try with https
+  }
+
+  // Try again with https:// prefix
+  try {
+    const urlWithHttps = `https://${string}`;
+    new URL(urlWithHttps);
+    return {
+      isValid: true,
+      url: urlWithHttps,
+    };
+  } catch {
+    return {
+      isValid: false,
+      url: string,
+    };
+  }
+};
+
+export const getParagraphCount = (editorState: EditorState | undefined) => {
+  if (!editorState) return 0;
+  let paragraphCount = 0;
+  editorState.doc.descendants((node) => {
+    if (node.type.name === CORE_EXTENSIONS.PARAGRAPH && node.content.size > 0) paragraphCount++;
+  });
+  return paragraphCount;
+};
diff --git a/packages/editor/src/helpers/editor-commands.ts b/packages/editor/src/helpers/editor-commands.ts
new file mode 100644
index 0000000..58dcd48
--- /dev/null
+++ b/packages/editor/src/helpers/editor-commands.ts
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor, Range } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// extensions
+import { replaceCodeWithText } from "@/extensions/code/utils/replace-code-block-with-text";
+import type { InsertImageComponentProps } from "@/extensions/custom-image/types";
+// helpers
+import type { ExtendedEmojiStorage } from "@/extensions/emoji/emoji";
+import { findTableAncestor } from "@/helpers/common";
+
+export const setText = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setNode(CORE_EXTENSIONS.PARAGRAPH).run();
+  else editor.chain().focus().setNode(CORE_EXTENSIONS.PARAGRAPH).run();
+};
+
+export const toggleHeading = (editor: Editor, level: 1 | 2 | 3 | 4 | 5 | 6, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setNode(CORE_EXTENSIONS.HEADING, { level }).run();
+  else editor.chain().focus().toggleHeading({ level }).run();
+};
+
+export const toggleBold = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleBold().run();
+  else editor.chain().focus().toggleBold().run();
+};
+
+export const toggleItalic = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleItalic().run();
+  else editor.chain().focus().toggleItalic().run();
+};
+
+export const toggleUnderline = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleUnderline().run();
+  else editor.chain().focus().toggleUnderline().run();
+};
+
+export const toggleCodeBlock = (editor: Editor, range?: Range) => {
+  try {
+    // if it's a code block, replace it with the code with paragraphs
+    if (editor.isActive(CORE_EXTENSIONS.CODE_BLOCK)) {
+      replaceCodeWithText(editor);
+      return;
+    }
+
+    const { from, to } = range || editor.state.selection;
+    const text = editor.state.doc.textBetween(from, to, "\n");
+    const isMultiline = text.includes("\n");
+
+    // if the selection is not a range i.e. empty, then simply convert it into a codeBlock
+    if (editor.state.selection.empty) {
+      editor.chain().focus().toggleCodeBlock().run();
+    } else if (isMultiline) {
+      // if the selection is multiline, then also replace the text content with
+      // a codeBlock
+      editor.chain().focus().deleteRange({ from, to }).insertContentAt(from, `\`\`\`\n${text}\n\`\`\``).run();
+    } else {
+      // if the selection is single line, then simply convert it into inline
+      // code
+      editor.chain().focus().toggleCode().run();
+    }
+  } catch (error) {
+    console.error("An error occurred while toggling code block:", error);
+  }
+};
+
+export const toggleOrderedList = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+  else editor.chain().focus().toggleOrderedList().run();
+};
+
+export const toggleBulletList = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleBulletList().run();
+  else editor.chain().focus().toggleBulletList().run();
+};
+
+export const toggleTaskList = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleTaskList().run();
+  else editor.chain().focus().toggleTaskList().run();
+};
+
+export const toggleStrike = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleStrike().run();
+  else editor.chain().focus().toggleStrike().run();
+};
+
+export const toggleBlockquote = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+  else editor.chain().focus().toggleBlockquote().run();
+};
+
+export const insertTableCommand = (editor: Editor, range?: Range) => {
+  if (typeof window !== "undefined") {
+    const selection = window.getSelection();
+    if (selection) {
+      if (selection.rangeCount !== 0) {
+        const range = selection.getRangeAt(0);
+        if (findTableAncestor(range.startContainer)) {
+          return;
+        }
+      }
+    }
+  }
+  if (range) editor.chain().focus().deleteRange(range).clearNodes().insertTable({ rows: 3, cols: 3 }).run();
+  else editor.chain().focus().clearNodes().insertTable({ rows: 3, cols: 3 }).run();
+};
+
+export const insertImage = ({
+  editor,
+  event,
+  pos,
+  file,
+  range,
+}: {
+  editor: Editor;
+  event: "insert" | "drop";
+  pos?: number | null;
+  file?: File;
+  range?: Range;
+}) => {
+  if (range) editor.chain().focus().deleteRange(range).run();
+
+  const imageOptions: InsertImageComponentProps = { event };
+  if (pos) imageOptions.pos = pos;
+  if (file) imageOptions.file = file;
+  return editor?.chain().focus().insertImageComponent(imageOptions).run();
+};
+
+export const unsetLinkEditor = (editor: Editor) => {
+  editor.chain().focus().unsetLink().run();
+};
+
+export const setLinkEditor = (editor: Editor, url: string, text?: string) => {
+  const { selection } = editor.state;
+  const previousSelection = { from: selection.from, to: selection.to };
+  if (text) {
+    editor
+      .chain()
+      .focus()
+      .deleteRange({ from: selection.from, to: selection.to })
+      .insertContentAt(previousSelection.from, text)
+      .run();
+    // Extracting the new selection start point.
+    const previousFrom = previousSelection.from;
+
+    editor.commands.setTextSelection({ from: previousFrom, to: previousFrom + text.length });
+  }
+  editor.chain().focus().setLink({ href: url }).run();
+};
+
+export const toggleTextColor = (color: string | undefined, editor: Editor, range?: Range) => {
+  if (color) {
+    if (range) editor.chain().focus().deleteRange(range).setTextColor(color).run();
+    else editor.chain().focus().setTextColor(color).run();
+  } else {
+    if (range) editor.chain().focus().deleteRange(range).unsetTextColor().run();
+    else editor.chain().focus().unsetTextColor().run();
+  }
+};
+
+export const toggleBackgroundColor = (color: string | undefined, editor: Editor, range?: Range) => {
+  if (color) {
+    if (range) {
+      editor.chain().focus().deleteRange(range).setBackgroundColor(color).run();
+    } else {
+      editor.chain().focus().setBackgroundColor(color).run();
+    }
+  } else {
+    if (range) {
+      editor.chain().focus().deleteRange(range).unsetBackgroundColor().run();
+    } else {
+      editor.chain().focus().unsetBackgroundColor().run();
+    }
+  }
+};
+
+export const setTextAlign = (alignment: string, editor: Editor) => {
+  editor.chain().focus().setTextAlign(alignment).run();
+};
+
+export const insertHorizontalRule = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+  else editor.chain().focus().setHorizontalRule().run();
+};
+
+export const insertCallout = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).insertCallout().run();
+  else editor.chain().focus().insertCallout().run();
+};
+
+export const openEmojiPicker = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).run();
+  const emojiStorage = editor.storage.emoji as ExtendedEmojiStorage;
+  emojiStorage.forceOpen = true;
+  editor.chain().focus().insertContent(":").run();
+};
diff --git a/packages/editor/src/helpers/editor-ref.ts b/packages/editor/src/helpers/editor-ref.ts
new file mode 100644
index 0000000..81a14cf
--- /dev/null
+++ b/packages/editor/src/helpers/editor-ref.ts
@@ -0,0 +1,288 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { Editor } from "@tiptap/core";
+import { DOMSerializer } from "@tiptap/pm/model";
+import * as Y from "yjs";
+// plane imports
+import { convertHTMLToMarkdown } from "@plane/utils";
+// components
+import { getEditorMenuItems } from "@/components/menus";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+import { CORE_EDITOR_META } from "@/constants/meta";
+// types
+import type { EditorRefApi, IEditorProps, TEditorCommands } from "@/types";
+// local imports
+import { getParagraphCount } from "./common";
+import { insertContentAtSavedSelection } from "./insert-content-at-cursor-position";
+import { scrollSummary, scrollToNodeViaDOMCoordinates } from "./scroll-to-node";
+
+type TArgs = Pick<IEditorProps, "getEditorMetaData"> & {
+  editor: Editor | null;
+  provider: HocuspocusProvider | undefined;
+};
+
+export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
+  const { editor, getEditorMetaData, provider } = args;
+
+  return {
+    blur: () => editor?.commands.blur(),
+    clearEditor: (emitUpdate = false) => {
+      editor?.chain().setMeta(CORE_EDITOR_META.SKIP_FILE_DELETION, true).clearContent(emitUpdate).run();
+    },
+    createSelectionAtCursorPosition: () => {
+      if (!editor) return;
+      const { empty } = editor.state.selection;
+
+      if (empty) {
+        // Get the text content and position info
+        const { $from } = editor.state.selection;
+        const textContent = $from.parent.textContent;
+        const posInNode = $from.parentOffset;
+
+        // Find word boundaries
+        let start = posInNode;
+        let end = posInNode;
+
+        // Move start position backwards until we hit a word boundary
+        while (start > 0 && /\w/.test(textContent[start - 1])) {
+          start--;
+        }
+
+        // Move end position forwards until we hit a word boundary
+        while (end < textContent.length && /\w/.test(textContent[end])) {
+          end++;
+        }
+
+        // If we found a word, select it using editor commands
+        if (start !== end) {
+          const from = $from.start() + start;
+          const to = $from.start() + end;
+          editor.commands.setTextSelection({ from, to });
+        }
+      }
+    },
+    getDocument: () => {
+      const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
+      const documentHTML = editor?.getHTML() ?? "<p></p>";
+      const documentJSON = editor?.getJSON() ?? null;
+
+      return {
+        binary: documentBinary,
+        html: documentHTML,
+        json: documentJSON,
+      };
+    },
+    getDocumentInfo: () => ({
+      characters: editor?.storage.characterCount?.characters?.() ?? 0,
+      paragraphs: getParagraphCount(editor?.state),
+      words: editor?.storage.characterCount?.words?.() ?? 0,
+    }),
+    getHeadings: () => (editor ? editor.storage.headingsList?.headings : []),
+    getMarkDown: () => {
+      if (!editor) return "";
+      const editorHTML = editor.getHTML();
+      const metaData = getEditorMetaData(editorHTML);
+      // convert to markdown
+      const markdown = convertHTMLToMarkdown({
+        description_html: editorHTML,
+        metaData,
+      });
+      return markdown;
+    },
+    copyMarkdownToClipboard: () => {
+      if (!editor) return;
+
+      const html = editor.getHTML();
+      const metaData = getEditorMetaData(html);
+      const markdown = convertHTMLToMarkdown({
+        description_html: html,
+        metaData,
+      });
+
+      const copyHandler = (event: ClipboardEvent) => {
+        event.preventDefault();
+        event.clipboardData?.setData("text/plain", markdown);
+        event.clipboardData?.setData("text/html", html);
+        event.clipboardData?.setData("text/plane-editor-html", html);
+        document.removeEventListener("copy", copyHandler);
+      };
+
+      document.addEventListener("copy", copyHandler);
+      document.execCommand("copy");
+    },
+    isAnyDropbarOpen: () => {
+      if (!editor) return false;
+      const utilityStorage = editor.storage.utility;
+      return utilityStorage.activeDropbarExtensions.length > 0;
+    },
+    scrollSummary: (marking) => {
+      if (!editor) return;
+      scrollSummary(editor, marking);
+    },
+    setEditorValue: (content, emitUpdate = false) => {
+      editor
+        ?.chain()
+        .setMeta(CORE_EDITOR_META.SKIP_FILE_DELETION, true)
+        .setMeta(CORE_EDITOR_META.INTENTIONAL_DELETION, true)
+        .setContent(content, emitUpdate, {
+          preserveWhitespace: true,
+        })
+        .run();
+    },
+    emitRealTimeUpdate: (message) => provider?.sendStateless(message),
+    executeMenuItemCommand: (props) => {
+      const { itemKey } = props;
+      const editorItems = getEditorMenuItems(editor);
+
+      const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
+
+      const item = getEditorMenuItem(itemKey);
+      if (item) {
+        item.command(props);
+      } else {
+        console.warn(`No command found for item: ${itemKey}`);
+      }
+    },
+    focus: (args) => editor?.commands.focus(args),
+    getCoordsFromPos: (pos) => editor?.view.coordsAtPos(pos ?? editor.state.selection.from),
+    getCurrentCursorPosition: () => editor?.state.selection.from,
+    getAttributesWithExtendedMark: (mark, attribute) => {
+      if (!editor) return;
+      editor.commands.extendMarkRange(mark);
+      return editor.getAttributes(attribute);
+    },
+    getSelectedText: () => {
+      if (!editor) return null;
+
+      const { state } = editor;
+      const { from, to, empty } = state.selection;
+
+      if (empty) return null;
+
+      const nodesArray: string[] = [];
+      state.doc.nodesBetween(from, to, (node, _pos, parent) => {
+        if (parent === state.doc && editor) {
+          const serializer = DOMSerializer.fromSchema(editor.schema);
+          const dom = serializer.serializeNode(node);
+          const tempDiv = document.createElement("div");
+          tempDiv.appendChild(dom);
+          nodesArray.push(tempDiv.innerHTML);
+        }
+      });
+      const selection = nodesArray.join("");
+      return selection;
+    },
+    insertText: (contentHTML, insertOnNextLine) => {
+      if (!editor) return;
+      const { from, to, empty } = editor.state.selection;
+      if (empty) return;
+      if (insertOnNextLine) {
+        // move cursor to the end of the selection and insert a new line
+        editor.chain().focus().setTextSelection(to).insertContent("<br />").insertContent(contentHTML).run();
+      } else {
+        // replace selected text with the content provided
+        editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
+      }
+    },
+    isEditorReadyToDiscard: () => editor?.storage?.utility?.uploadInProgress === false,
+    isMenuItemActive: (props) => {
+      const { itemKey } = props;
+      const editorItems = getEditorMenuItems(editor);
+
+      const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
+      const item = getEditorMenuItem(itemKey);
+      if (!item) return false;
+
+      return item.isActive(props);
+    },
+    listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
+    onDocumentInfoChange: (callback) => {
+      const handleDocumentInfoChange = () => {
+        if (!editor?.storage) return;
+        callback({
+          characters: editor.storage.characterCount?.characters?.() ?? 0,
+          paragraphs: getParagraphCount(editor?.state),
+          words: editor.storage.characterCount?.words?.() ?? 0,
+        });
+      };
+
+      // Subscribe to update event emitted from character count extension
+      editor?.on("update", handleDocumentInfoChange);
+      // Return a function to unsubscribe to the continuous transactions of
+      // the editor on unmounting the component that has subscribed to this
+      // method
+      return () => {
+        editor?.off("update", handleDocumentInfoChange);
+      };
+    },
+    onHeadingChange: (callback) => {
+      const handleHeadingChange = () => {
+        if (!editor) return;
+        const headings = editor.storage.headingsList?.headings;
+        if (headings) {
+          callback(headings);
+        }
+      };
+
+      // Subscribe to update event emitted from headers extension
+      editor?.on("update", handleHeadingChange);
+      // Return a function to unsubscribe to the continuous transactions of
+      // the editor on unmounting the component that has subscribed to this
+      // method
+      return () => {
+        editor?.off("update", handleHeadingChange);
+      };
+    },
+    onStateChange: (callback) => {
+      // Subscribe to editor state changes
+      editor?.on("transaction", callback);
+
+      // Return a function to unsubscribe to the continuous transactions of
+      // the editor on unmounting the component that has subscribed to this
+      // method
+      return () => {
+        editor?.off("transaction", callback);
+      };
+    },
+    redo: () => editor?.commands.redo(),
+    scrollToNodeViaDOMCoordinates({ pos, behavior = "smooth" }) {
+      const resolvedPos = pos ?? editor?.state.selection.from;
+      if (!editor || !resolvedPos) return;
+      scrollToNodeViaDOMCoordinates(editor, resolvedPos, behavior);
+    },
+    setEditorValueAtCursorPosition: (content) => {
+      if (editor?.state.selection) {
+        insertContentAtSavedSelection(editor, content);
+      }
+    },
+    setFocusAtPosition: (position) => {
+      if (!editor || editor.isDestroyed) {
+        console.error("Editor reference is not available or has been destroyed.");
+        return;
+      }
+      try {
+        const docSize = editor.state.doc.content.size;
+        const safePosition = Math.max(0, Math.min(position, docSize));
+        editor
+          .chain()
+          .insertContentAt(safePosition, [{ type: CORE_EXTENSIONS.PARAGRAPH }])
+          .focus()
+          .run();
+      } catch (error) {
+        console.error("An error occurred while setting focus at position:", error);
+      }
+    },
+    setProviderDocument: (value) => {
+      const document = provider?.document;
+      if (!document) return;
+      Y.applyUpdate(document, value);
+    },
+    undo: () => editor?.commands.undo(),
+  };
+};
diff --git a/packages/editor/src/helpers/file.ts b/packages/editor/src/helpers/file.ts
new file mode 100644
index 0000000..b8284c2
--- /dev/null
+++ b/packages/editor/src/helpers/file.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EFileError {
+  INVALID_FILE_TYPE = "INVALID_FILE_TYPE",
+  FILE_SIZE_TOO_LARGE = "FILE_SIZE_TOO_LARGE",
+  NO_FILE_SELECTED = "NO_FILE_SELECTED",
+}
+
+type TArgs = {
+  acceptedMimeTypes: string[];
+  file: File;
+  maxFileSize: number;
+  onError: (error: EFileError, message: string) => void;
+};
+
+export const isFileValid = (args: TArgs): boolean => {
+  const { acceptedMimeTypes, file, maxFileSize, onError } = args;
+
+  if (!file) {
+    onError(EFileError.NO_FILE_SELECTED, "No file selected. Please select a file to upload.");
+    return false;
+  }
+
+  if (!acceptedMimeTypes.includes(file.type)) {
+    onError(EFileError.INVALID_FILE_TYPE, "Invalid file type.");
+    return false;
+  }
+
+  if (file.size > maxFileSize) {
+    onError(
+      EFileError.FILE_SIZE_TOO_LARGE,
+      `File size too large. Please select a file smaller than ${maxFileSize / 1024 / 1024}MB.`
+    );
+    return false;
+  }
+
+  return true;
+};
diff --git a/packages/editor/src/helpers/find-suggestion-match.ts b/packages/editor/src/helpers/find-suggestion-match.ts
new file mode 100644
index 0000000..d535563
--- /dev/null
+++ b/packages/editor/src/helpers/find-suggestion-match.ts
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { escapeForRegEx } from "@tiptap/core";
+import type { Trigger, SuggestionMatch } from "@tiptap/suggestion";
+
+export function customFindSuggestionMatch(config: Trigger): SuggestionMatch | null {
+  const { char, allowSpaces: allowSpacesOption, allowToIncludeChar, allowedPrefixes, startOfLine, $position } = config;
+
+  const allowSpaces = allowSpacesOption && !allowToIncludeChar;
+
+  const escapedChar = escapeForRegEx(char);
+  const suffix = new RegExp(`\\s${escapedChar}$`);
+  const prefix = startOfLine ? "^" : "";
+  const finalEscapedChar = allowToIncludeChar ? "" : escapedChar;
+  const regexp = allowSpaces
+    ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${finalEscapedChar}|$)`, "gm")
+    : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${finalEscapedChar}]*`, "gm");
+
+  // Instead of just looking at nodeBefore.text, we need to extract text from the current paragraph
+  // to properly handle text with decorators like bold, italic, etc.
+  const currentParagraph = $position.parent;
+  if (!currentParagraph.isTextblock) {
+    return null;
+  }
+
+  // Get the start position of the current paragraph
+  const paragraphStart = $position.start();
+  // Extract text content using textBetween which handles text across different nodes/marks
+  const text = $position.doc.textBetween(paragraphStart, $position.pos, "\0", "\0");
+
+  if (!text) {
+    return null;
+  }
+
+  const textFrom = paragraphStart;
+  const match = Array.from(text.matchAll(regexp)).pop();
+
+  if (!match || match.input === undefined || match.index === undefined) {
+    return null;
+  }
+
+  // JavaScript doesn't have lookbehinds. This hacks a check that first character
+  // is a space or the start of the line
+  const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index);
+  const matchPrefixIsAllowed = new RegExp(`^[${allowedPrefixes?.join("")}]?$`).test(matchPrefix);
+
+  if (allowedPrefixes && allowedPrefixes.length > 0 && !matchPrefixIsAllowed) {
+    return null;
+  }
+
+  // The absolute position of the match in the document
+  const from = textFrom + match.index;
+  let to = from + match[0].length;
+
+  // Edge case handling; if spaces are allowed and we're directly in between
+  // two triggers
+  if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
+    match[0] += " ";
+    to += 1;
+  }
+
+  // If the $position is located within the matched substring, return that range
+  if (from < $position.pos && to >= $position.pos) {
+    return {
+      range: {
+        from,
+        to,
+      },
+      query: match[0].slice(char.length),
+      text: match[0],
+    };
+  }
+
+  return null;
+}
diff --git a/packages/editor/src/helpers/floating-ui.ts b/packages/editor/src/helpers/floating-ui.ts
new file mode 100644
index 0000000..7c9a317
--- /dev/null
+++ b/packages/editor/src/helpers/floating-ui.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { computePosition, flip, shift, autoUpdate } from "@floating-ui/dom";
+import type { Placement, ReferenceElement, Strategy } from "@floating-ui/dom";
+import { posToDOMRect } from "@tiptap/core";
+import type { Editor } from "@tiptap/core";
+
+export type UpdateFloatingUIFloaterPosition = (
+  editor: Editor,
+  element: HTMLElement,
+  options?: {
+    elementStyle?: Partial<CSSStyleDeclaration>;
+    placement?: Placement;
+    strategy?: Strategy;
+  }
+) => {
+  cleanup: () => void;
+};
+
+export const updateFloatingUIFloaterPosition: UpdateFloatingUIFloaterPosition = (editor, element, options) => {
+  document.body.appendChild(element);
+
+  const virtualElement: ReferenceElement = {
+    getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
+  };
+
+  const cleanup = autoUpdate(virtualElement, element, () => {
+    computePosition(virtualElement, element, {
+      placement: options?.placement ?? "bottom-start",
+      strategy: options?.strategy ?? "fixed",
+      middleware: [shift(), flip()],
+    })
+      .then(({ x, y, strategy }) => {
+        Object.assign(element.style, {
+          width: "max-content",
+          position: strategy,
+          left: `${x}px`,
+          top: `${y}px`,
+          ...options?.elementStyle,
+        });
+      })
+      .catch((error) => console.error("An error occurred while updating floating UI floater position:", error));
+  });
+
+  return {
+    cleanup,
+  };
+};
diff --git a/packages/editor/src/helpers/get-document-server-event.ts b/packages/editor/src/helpers/get-document-server-event.ts
new file mode 100644
index 0000000..fd2c50c
--- /dev/null
+++ b/packages/editor/src/helpers/get-document-server-event.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { DocumentCollaborativeEvents } from "@/constants/document-collaborative-events";
+import type {
+  TDocumentEventKey,
+  TDocumentEventsClient,
+  TDocumentEventsServer,
+} from "@/types/document-collaborative-events";
+
+export const getServerEventName = (clientEvent: TDocumentEventsClient): TDocumentEventsServer | undefined => {
+  for (const key in DocumentCollaborativeEvents) {
+    if (DocumentCollaborativeEvents[key as TDocumentEventKey].client === clientEvent) {
+      return DocumentCollaborativeEvents[key as TDocumentEventKey].server;
+    }
+  }
+  return undefined;
+};
diff --git a/packages/editor/src/helpers/image-helpers.ts b/packages/editor/src/helpers/image-helpers.ts
new file mode 100644
index 0000000..eae46bb
--- /dev/null
+++ b/packages/editor/src/helpers/image-helpers.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// types
+import type { TFileHandler } from "@/types";
+
+/**
+ * Finds all public image nodes in the document and restores them using the provided restore function
+ *
+ * Never remove this onCreate hook, it's a hack to restore old public
+ * images, since they don't give error if they've been deleted as they are
+ * rendered directly from image source instead of going through the
+ * apiserver
+ */
+export const restorePublicImages = (editor: Editor, restoreImageFn: TFileHandler["restore"]) => {
+  const imageSources = new Set<string>();
+  editor.state.doc.descendants((node) => {
+    if ([CORE_EXTENSIONS.IMAGE, CORE_EXTENSIONS.CUSTOM_IMAGE].includes(node.type.name as CORE_EXTENSIONS)) {
+      if (!node.attrs.src?.startsWith("http")) return;
+
+      imageSources.add(node.attrs.src);
+    }
+  });
+
+  imageSources.forEach(async (src) => {
+    try {
+      await restoreImageFn(src);
+    } catch (error) {
+      console.error("Error restoring image: ", error);
+    }
+  });
+};
diff --git a/packages/editor/src/helpers/insert-content-at-cursor-position.ts b/packages/editor/src/helpers/insert-content-at-cursor-position.ts
new file mode 100644
index 0000000..3aafbbd
--- /dev/null
+++ b/packages/editor/src/helpers/insert-content-at-cursor-position.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/react";
+
+export const insertContentAtSavedSelection = (editor: Editor, content: string) => {
+  if (!editor || editor.isDestroyed) {
+    console.error("Editor reference is not available or has been destroyed.");
+    return;
+  }
+
+  if (!editor.state.selection) {
+    console.error("Saved selection is invalid.");
+    return;
+  }
+
+  const docSize = editor.state.doc.content.size;
+  const safePosition = Math.max(0, Math.min(editor.state.selection.anchor, docSize));
+
+  try {
+    editor.chain().focus().insertContentAt(safePosition, content).run();
+  } catch (error) {
+    console.error("An error occurred while inserting content at saved selection:", error);
+  }
+};
diff --git a/packages/editor/src/helpers/insert-empty-paragraph-at-node-boundary.ts b/packages/editor/src/helpers/insert-empty-paragraph-at-node-boundary.ts
new file mode 100644
index 0000000..c81588d
--- /dev/null
+++ b/packages/editor/src/helpers/insert-empty-paragraph-at-node-boundary.ts
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { KeyboardShortcutCommand } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+
+type Direction = "up" | "down";
+
+export const insertEmptyParagraphAtNodeBoundaries: (direction: Direction, nodeType: string) => KeyboardShortcutCommand =
+  (direction, nodeType) =>
+  ({ editor }) => {
+    try {
+      const { selection, doc } = editor.state;
+      const { $from, $to } = selection;
+
+      let targetNode: ProseMirrorNode | null = null;
+      let targetNodePos: number | null = null;
+
+      // Check if the selection itself is the target node
+      doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+        if (node.type.name === nodeType) {
+          targetNode = node;
+          targetNodePos = pos;
+          return false; // Stop iterating once the target node is found
+        }
+        return true;
+      });
+
+      if (targetNode === null || targetNodePos === null) return false;
+
+      const docSize = doc.content.size; // Get the size of the document
+
+      switch (direction) {
+        case "up": {
+          const insertPosUp = targetNodePos;
+
+          // Ensure the insert position is within the document boundaries
+          if (insertPosUp < 0 || insertPosUp > docSize) return false;
+
+          if (insertPosUp === 0) {
+            // If at the very start of the document, insert a new paragraph at the start
+            editor.chain().insertContentAt(insertPosUp, { type: CORE_EXTENSIONS.PARAGRAPH }).run();
+            editor.chain().setTextSelection(insertPosUp).run(); // Set the cursor to the new paragraph
+          } else {
+            // Otherwise, check the node immediately before the target node
+            const prevNode = doc.nodeAt(insertPosUp - 1);
+
+            if (prevNode && prevNode.type.name === CORE_EXTENSIONS.PARAGRAPH) {
+              // If the previous node is a paragraph, move the cursor there
+              editor
+                .chain()
+                .setTextSelection(insertPosUp - 1)
+                .run();
+            } else {
+              return false; // If the previous node is not a paragraph, do not proceed
+            }
+          }
+          break;
+        }
+
+        case "down": {
+          const insertPosDown = targetNodePos + (targetNode as ProseMirrorNode).nodeSize;
+
+          // Ensure the insert position is within the document boundaries
+          if (insertPosDown < 0 || insertPosDown > docSize) return false;
+
+          // Check the node immediately after the target node
+          const nextNode = doc.nodeAt(insertPosDown);
+
+          if (nextNode && nextNode.type.name === CORE_EXTENSIONS.PARAGRAPH) {
+            // If the next node is a paragraph, move the cursor to the end of it
+            const endOfParagraphPos = insertPosDown + nextNode.nodeSize - 1;
+            editor.chain().setTextSelection(endOfParagraphPos).run();
+          } else if (!nextNode) {
+            // If there is no next node (end of document), insert a new paragraph
+            editor.chain().insertContentAt(insertPosDown, { type: CORE_EXTENSIONS.PARAGRAPH }).run();
+            editor
+              .chain()
+              .setTextSelection(insertPosDown + 1)
+              .run(); // Set the cursor to the new paragraph
+          } else {
+            return false; // If the next node is not a paragraph, do not proceed
+          }
+          break;
+        }
+
+        default:
+          return false; // If the direction is not recognized, do not proceed
+      }
+
+      return true; // Return true if the operation was successful
+    } catch (error) {
+      console.error(`An error occurred while inserting a line ${direction} the ${nodeType}:`, error);
+      return false; // Return false if an error occurred
+    }
+  };
diff --git a/packages/editor/src/helpers/parser.ts b/packages/editor/src/helpers/parser.ts
new file mode 100644
index 0000000..3270fbc
--- /dev/null
+++ b/packages/editor/src/helpers/parser.ts
@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TDocumentPayload, TDuplicateAssetData, TDuplicateAssetResponse, TEditorAssetType } from "@plane/types";
+// local imports
+import { convertHTMLDocumentToAllFormats } from "./yjs-utils";
+
+/**
+ * @description function to extract all additional assets from HTML content
+ * @param htmlContent
+ * @returns {string[]} array of additional asset sources
+ */
+export const extractAdditionalAssetsFromHTMLContent = (_htmlContent: string): string[] => [];
+
+/**
+ * @description function to replace additional assets in HTML content with new IDs
+ * @param props
+ * @returns {string} HTML content with replaced additional assets
+ */
+export const replaceAdditionalAssetsInHTMLContent = (props: {
+  htmlContent: string;
+  assetMap: Record<string, string>;
+}): string => {
+  const { htmlContent } = props;
+  return htmlContent;
+};
+
+/**
+ * @description function to extract all assets from HTML content
+ * @param htmlContent
+ * @returns {string[]} array of asset sources
+ */
+const extractAssetsFromHTMLContent = (htmlContent: string): string[] => {
+  // create a DOM parser
+  const parser = new DOMParser();
+  // parse the HTML string into a DOM document
+  const doc = parser.parseFromString(htmlContent, "text/html");
+  // collect all unique asset sources
+  const assetSources = new Set<string>();
+  // extract sources from image components
+  const imageComponents = doc.querySelectorAll("image-component");
+  imageComponents.forEach((component) => {
+    const src = component.getAttribute("src");
+    if (src) assetSources.add(src);
+  });
+  const additionalAssetIds = extractAdditionalAssetsFromHTMLContent(htmlContent);
+  return [...Array.from(assetSources), ...additionalAssetIds];
+};
+
+/**
+ * @description function to replace assets in HTML content with new IDs
+ * @param props
+ * @returns {string} HTML content with replaced assets
+ */
+const replaceAssetsInHTMLContent = (props: { htmlContent: string; assetMap: Record<string, string> }): string => {
+  const { htmlContent, assetMap } = props;
+  // create a DOM parser
+  const parser = new DOMParser();
+  // parse the HTML string into a DOM document
+  const doc = parser.parseFromString(htmlContent, "text/html");
+  // replace sources in image components
+  const imageComponents = doc.querySelectorAll("image-component");
+  imageComponents.forEach((component) => {
+    const oldSrc = component.getAttribute("src");
+    if (oldSrc && assetMap[oldSrc]) {
+      component.setAttribute("src", assetMap[oldSrc]);
+    }
+  });
+  // replace additional sources
+  const replacedHTMLContent = replaceAdditionalAssetsInHTMLContent({
+    htmlContent: doc.body.innerHTML,
+    assetMap,
+  });
+  return replacedHTMLContent;
+};
+
+export const getEditorContentWithReplacedAssets = async (props: {
+  descriptionHTML: string;
+  entityId: string;
+  entityType: TEditorAssetType;
+  projectId: string | undefined;
+  variant: "rich" | "document";
+  duplicateAssetService: (params: TDuplicateAssetData) => Promise<TDuplicateAssetResponse>;
+}): Promise<TDocumentPayload> => {
+  const { descriptionHTML, entityId, entityType, projectId, variant, duplicateAssetService } = props;
+  let replacedDescription = descriptionHTML;
+  // step 1: extract image assets from the description
+  const assetIds = extractAssetsFromHTMLContent(descriptionHTML);
+  if (assetIds.length !== 0) {
+    // step 2: duplicate the image assets
+    const duplicateAssetsResponse = await duplicateAssetService({
+      entity_id: entityId,
+      entity_type: entityType,
+      project_id: projectId,
+      asset_ids: assetIds,
+    });
+    if (Object.keys(duplicateAssetsResponse ?? {}).length > 0) {
+      // step 3: replace the image assets in the description
+      replacedDescription = replaceAssetsInHTMLContent({
+        htmlContent: descriptionHTML,
+        assetMap: duplicateAssetsResponse,
+      });
+    }
+  }
+  // step 4: convert the description to the document payload
+  const documentPayload = convertHTMLDocumentToAllFormats({
+    document_html: replacedDescription,
+    variant,
+  });
+  return documentPayload;
+};
diff --git a/packages/editor/src/helpers/paste-asset.ts b/packages/editor/src/helpers/paste-asset.ts
new file mode 100644
index 0000000..40ec1ea
--- /dev/null
+++ b/packages/editor/src/helpers/paste-asset.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { assetDuplicationHandlers } from "@/helpers/asset-duplication";
+
+// Utility function to process HTML content with all registered handlers
+export const processAssetDuplication = (htmlContent: string): { processedHtml: string } => {
+  const tempDiv = document.createElement("div");
+  tempDiv.innerHTML = htmlContent;
+
+  let processedHtml = htmlContent;
+
+  // Process each registered component type
+  for (const [componentName, handler] of Object.entries(assetDuplicationHandlers)) {
+    const elements = tempDiv.querySelectorAll(componentName);
+
+    if (elements.length > 0) {
+      elements.forEach((element) => {
+        const result = handler({ element, originalHtml: processedHtml });
+        if (result.shouldProcess) {
+          processedHtml = result.modifiedHtml;
+        }
+      });
+
+      // Update tempDiv with processed HTML for next iteration
+      tempDiv.innerHTML = processedHtml;
+    }
+  }
+
+  return { processedHtml };
+};
diff --git a/packages/editor/src/helpers/scroll-to-node.ts b/packages/editor/src/helpers/scroll-to-node.ts
new file mode 100644
index 0000000..43d0957
--- /dev/null
+++ b/packages/editor/src/helpers/scroll-to-node.ts
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/react";
+// types
+import type { IMarking } from "@/types";
+
+function findNthH1(editor: Editor, n: number, level: number): number {
+  let count = 0;
+  let pos = 0;
+  editor.state.doc.descendants((node, position) => {
+    if (node.type.name === "heading" && node.attrs.level === level) {
+      count++;
+      if (count === n) {
+        pos = position;
+        return false;
+      }
+    }
+  });
+  return pos;
+}
+
+function scrollToNode(editor: Editor, pos: number): void {
+  const headingNode = editor.state.doc.nodeAt(pos);
+  if (headingNode) {
+    const headingDOM = editor.view.nodeDOM(pos);
+    if (headingDOM instanceof HTMLElement) {
+      headingDOM.scrollIntoView({ behavior: "smooth" });
+    }
+  }
+}
+
+export function scrollToNodeViaDOMCoordinates(editor: Editor, pos: number, behavior?: ScrollBehavior): void {
+  const view = editor.view;
+
+  // Get the coordinates of the position
+  const coords = view.coordsAtPos(pos);
+
+  if (coords) {
+    // Scroll to the coordinates
+    window.scrollTo({
+      top: coords.top + window.scrollY - window.innerHeight / 2,
+      behavior: behavior,
+    });
+
+    // Optionally, you can also focus the editor
+    view.focus();
+  } else {
+    console.warn("Unable to find coordinates for the given position");
+  }
+}
+
+export function scrollSummary(editor: Editor, marking: IMarking) {
+  if (editor) {
+    const pos = findNthH1(editor, marking.sequence, marking.level);
+    scrollToNode(editor, pos);
+  }
+}
diff --git a/packages/editor/src/helpers/tippy.ts b/packages/editor/src/helpers/tippy.ts
new file mode 100644
index 0000000..fc285c1
--- /dev/null
+++ b/packages/editor/src/helpers/tippy.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type CommandListInstance = {
+  onKeyDown: (props: { event: KeyboardEvent }) => boolean;
+};
+
+type TArgs = {
+  event: KeyboardEvent;
+  sections: {
+    items: any[];
+  }[];
+  selectedIndex: {
+    section: number;
+    item: number;
+  };
+};
+
+export const DROPDOWN_NAVIGATION_KEYS = ["ArrowUp", "ArrowDown", "Enter"];
+
+export const getNextValidIndex = (
+  args: TArgs
+):
+  | {
+      section: number;
+      item: number;
+    }
+  | undefined => {
+  const { event, sections, selectedIndex } = args;
+  const direction = event.key === "ArrowUp" ? "up" : "down";
+  if (!sections.length) return { section: 0, item: 0 };
+  // next available selection
+  let nextSection = selectedIndex.section;
+  let nextItem = selectedIndex.item;
+
+  if (direction === "up") {
+    nextItem--;
+    if (nextItem < 0) {
+      // Move to previous section
+      nextSection--;
+      if (nextSection < 0) {
+        // Wrap to last section
+        nextSection = sections?.length - 1;
+      }
+      nextItem = sections?.[nextSection]?.items?.length - 1;
+    }
+  } else {
+    nextItem++;
+    if (nextItem >= sections?.[nextSection]?.items?.length) {
+      // Move to next section
+      nextSection++;
+      if (nextSection >= sections?.length) {
+        // Wrap to first section
+        nextSection = 0;
+      }
+      nextItem = 0;
+    }
+  }
+
+  return { section: nextSection, item: nextItem };
+};
diff --git a/packages/editor/src/helpers/yjs-utils.ts b/packages/editor/src/helpers/yjs-utils.ts
new file mode 100644
index 0000000..74eb57d
--- /dev/null
+++ b/packages/editor/src/helpers/yjs-utils.ts
@@ -0,0 +1,254 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Buffer } from "buffer";
+import type { Extensions, JSONContent } from "@tiptap/core";
+import { getSchema } from "@tiptap/core";
+import { generateHTML, generateJSON } from "@tiptap/html";
+import { prosemirrorJSONToYDoc, yXmlFragmentToProseMirrorRootNode } from "y-prosemirror";
+import * as Y from "yjs";
+// extensions
+import type { TDocumentPayload } from "@plane/types";
+import {
+  CoreEditorExtensionsWithoutProps,
+  DocumentEditorExtensionsWithoutProps,
+} from "@/extensions/core-without-props";
+import { TitleExtensions } from "@/extensions/title-extension";
+import { sanitizeHTML } from "@plane/utils";
+
+// editor extension configs
+const RICH_TEXT_EDITOR_EXTENSIONS = CoreEditorExtensionsWithoutProps;
+const DOCUMENT_EDITOR_EXTENSIONS = [...CoreEditorExtensionsWithoutProps, ...DocumentEditorExtensionsWithoutProps];
+export const TITLE_EDITOR_EXTENSIONS: Extensions = TitleExtensions;
+// editor schemas
+const richTextEditorSchema = getSchema(RICH_TEXT_EDITOR_EXTENSIONS);
+const documentEditorSchema = getSchema(DOCUMENT_EDITOR_EXTENSIONS);
+
+/**
+ * @description apply updates to a doc and return the updated doc in binary format
+ * @param {Uint8Array} document
+ * @param {Uint8Array} updates
+ * @returns {Uint8Array}
+ */
+export const applyUpdates = (document: Uint8Array, updates?: Uint8Array): Uint8Array => {
+  const yDoc = new Y.Doc();
+  Y.applyUpdate(yDoc, document);
+  if (updates) {
+    Y.applyUpdate(yDoc, updates);
+  }
+
+  const encodedDoc = Y.encodeStateAsUpdate(yDoc);
+  return encodedDoc;
+};
+
+/**
+ * @description this function encodes binary data to base64 string
+ * @param {Uint8Array} document
+ * @returns {string}
+ */
+export const convertBinaryDataToBase64String = (document: Uint8Array): string =>
+  Buffer.from(document).toString("base64");
+
+/**
+ * @description this function decodes base64 string to binary data
+ * @param {string} document
+ * @returns {Buffer<ArrayBuffer>}
+ */
+export const convertBase64StringToBinaryData = (document: string): Buffer<ArrayBuffer> =>
+  Buffer.from(document, "base64");
+
+/**
+ * @description this function generates the binary equivalent of html content for the rich text editor
+ * @param {string} descriptionHTML
+ * @returns {Uint8Array}
+ */
+export const getBinaryDataFromRichTextEditorHTMLString = (descriptionHTML: string): Uint8Array => {
+  // convert HTML to JSON
+  const contentJSON = generateJSON(descriptionHTML ?? "<p></p>", RICH_TEXT_EDITOR_EXTENSIONS);
+  // convert JSON to Y.Doc format
+  const transformedData = prosemirrorJSONToYDoc(richTextEditorSchema, contentJSON, "default");
+  // convert Y.Doc to Uint8Array format
+  const encodedData = Y.encodeStateAsUpdate(transformedData);
+  return encodedData;
+};
+
+export const generateTitleProsemirrorJson = (text: string): JSONContent => {
+  return {
+    type: "doc",
+    content: [
+      {
+        type: "heading",
+        attrs: { level: 1 },
+        ...(text
+          ? {
+              content: [
+                {
+                  type: "text",
+                  text,
+                },
+              ],
+            }
+          : {}),
+      },
+    ],
+  };
+};
+
+/**
+ * @description this function generates the binary equivalent of html content for the document editor
+ * @param {string} descriptionHTML - The HTML content to convert
+ * @param {string} [title] - Optional title to append to the document
+ * @returns {Uint8Array}
+ */
+export const getBinaryDataFromDocumentEditorHTMLString = (descriptionHTML: string, title?: string): Uint8Array => {
+  // convert HTML to JSON
+  const contentJSON = generateJSON(descriptionHTML ?? "<p></p>", DOCUMENT_EDITOR_EXTENSIONS);
+  // convert JSON to Y.Doc format
+  const transformedData = prosemirrorJSONToYDoc(documentEditorSchema, contentJSON, "default");
+
+  // If title is provided, merge it into the document
+  if (title != null) {
+    const titleJSON = generateTitleProsemirrorJson(title);
+    const titleField = prosemirrorJSONToYDoc(documentEditorSchema, titleJSON, "title");
+    // Encode the title YDoc to updates and apply them to the main document
+    const titleUpdates = Y.encodeStateAsUpdate(titleField);
+    Y.applyUpdate(transformedData, titleUpdates);
+  }
+
+  // convert Y.Doc to Uint8Array format
+  const encodedData = Y.encodeStateAsUpdate(transformedData);
+  return encodedData;
+};
+
+/**
+ * @description this function generates all document formats for the provided binary data for the rich text editor
+ * @param {Uint8Array} description
+ * @returns
+ */
+export const getAllDocumentFormatsFromRichTextEditorBinaryData = (
+  description: Uint8Array
+): {
+  contentBinaryEncoded: string;
+  contentJSON: object;
+  contentHTML: string;
+} => {
+  // encode binary description data
+  const base64Data = convertBinaryDataToBase64String(description);
+  const yDoc = new Y.Doc();
+  Y.applyUpdate(yDoc, description);
+  // convert to JSON
+  const type = yDoc.getXmlFragment("default");
+  const contentJSON = yXmlFragmentToProseMirrorRootNode(type, richTextEditorSchema).toJSON();
+  // convert to HTML
+  const contentHTML = generateHTML(contentJSON, RICH_TEXT_EDITOR_EXTENSIONS);
+
+  return {
+    contentBinaryEncoded: base64Data,
+    contentJSON,
+    contentHTML,
+  };
+};
+
+/**
+ * @description this function generates all document formats for the provided binary data for the document editor
+ * @param {Uint8Array} description
+ * @returns
+ */
+export const getAllDocumentFormatsFromDocumentEditorBinaryData = (
+  description: Uint8Array,
+  updateTitle: boolean
+): {
+  contentBinaryEncoded: string;
+  contentJSON: object;
+  contentHTML: string;
+  titleHTML?: string;
+} => {
+  // encode binary description data
+  const base64Data = convertBinaryDataToBase64String(description);
+  const yDoc = new Y.Doc();
+  Y.applyUpdate(yDoc, description);
+  // convert to JSON
+  const type = yDoc.getXmlFragment("default");
+  const contentJSON = yXmlFragmentToProseMirrorRootNode(type, documentEditorSchema).toJSON();
+  // convert to HTML
+  const contentHTML = generateHTML(contentJSON, DOCUMENT_EDITOR_EXTENSIONS);
+
+  if (updateTitle) {
+    const title = yDoc.getXmlFragment("title");
+    const titleJSON = yXmlFragmentToProseMirrorRootNode(title, documentEditorSchema).toJSON();
+    const titleHTML = extractTextFromHTML(generateHTML(titleJSON, DOCUMENT_EDITOR_EXTENSIONS));
+
+    return {
+      contentBinaryEncoded: base64Data,
+      contentJSON,
+      contentHTML,
+      titleHTML,
+    };
+  } else {
+    return {
+      contentBinaryEncoded: base64Data,
+      contentJSON,
+      contentHTML,
+    };
+  }
+};
+
+type TConvertHTMLDocumentToAllFormatsArgs = {
+  document_html: string;
+  variant: "rich" | "document";
+};
+
+/**
+ * @description Converts HTML content to all supported document formats (JSON, HTML, and binary)
+ * @param {TConvertHTMLDocumentToAllFormatsArgs} args - Arguments containing HTML content and variant type
+ * @param {string} args.document_html - The HTML content to convert
+ * @param {"rich" | "document"} args.variant - The type of editor variant to use for conversion
+ * @returns {TDocumentPayload} Object containing the document in all supported formats
+ * @throws {Error} If an invalid variant is provided
+ */
+export const convertHTMLDocumentToAllFormats = (args: TConvertHTMLDocumentToAllFormatsArgs): TDocumentPayload => {
+  const { document_html, variant } = args;
+
+  let allFormats: TDocumentPayload;
+
+  if (variant === "rich") {
+    // Convert HTML to binary format for rich text editor
+    const contentBinary = getBinaryDataFromRichTextEditorHTMLString(document_html);
+    // Generate all document formats from the binary data
+    const { contentBinaryEncoded, contentHTML, contentJSON } =
+      getAllDocumentFormatsFromRichTextEditorBinaryData(contentBinary);
+    allFormats = {
+      description_json: contentJSON,
+      description_html: contentHTML,
+      description_binary: contentBinaryEncoded,
+    };
+  } else if (variant === "document") {
+    // Convert HTML to binary format for document editor
+    const contentBinary = getBinaryDataFromDocumentEditorHTMLString(document_html);
+    // Generate all document formats from the binary data
+    const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromDocumentEditorBinaryData(
+      contentBinary,
+      false
+    );
+    allFormats = {
+      description_json: contentJSON,
+      description_html: contentHTML,
+      description_binary: contentBinaryEncoded,
+    };
+  } else {
+    throw new Error(`Invalid variant provided: ${variant}`);
+  }
+
+  return allFormats;
+};
+
+export const extractTextFromHTML = (html: string): string => {
+  // Use DOMPurify to safely extract text and remove all HTML tags
+  // This is more secure than regex as it handles edge cases and prevents injection
+  // Note: sanitizeHTML trims whitespace, which is acceptable for title extraction
+  const sanitizedText = sanitizeHTML(html); // sanitize the string to remove all HTML tags
+  return sanitizedText.trim() || ""; // trim the string to remove leading and trailing whitespaces
+};
diff --git a/packages/editor/src/hooks/use-collaborative-editor.ts b/packages/editor/src/hooks/use-collaborative-editor.ts
new file mode 100644
index 0000000..552a2ec
--- /dev/null
+++ b/packages/editor/src/hooks/use-collaborative-editor.ts
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { Extensions } from "@tiptap/core";
+import Collaboration from "@tiptap/extension-collaboration";
+// react
+import type React from "react";
+import { useEffect, useMemo } from "react";
+// extensions
+import { HeadingListExtension, SideMenuExtension } from "@/extensions";
+// hooks
+import { useEditor } from "@/hooks/use-editor";
+// plane editor extensions
+import { DocumentEditorAdditionalExtensions } from "@/extensions/document-extensions";
+// types
+import type {
+  TCollaborativeEditorHookProps,
+  ICollaborativeDocumentEditorProps,
+  IEditorPropsExtended,
+  IEditorProps,
+  TEditorHookProps,
+  EditorTitleRefApi,
+} from "@/types";
+// local imports
+import { useEditorNavigation } from "./use-editor-navigation";
+import { useTitleEditor } from "./use-title-editor";
+
+type UseCollaborativeEditorArgs = Omit<TCollaborativeEditorHookProps, "realtimeConfig" | "serverHandler" | "user"> & {
+  provider: HocuspocusProvider;
+  user: TCollaborativeEditorHookProps["user"];
+  actions: {
+    signalForcedClose: (value: boolean) => void;
+  };
+};
+
+export const useCollaborativeEditor = (props: UseCollaborativeEditorArgs) => {
+  const {
+    provider,
+    onAssetChange,
+    onChange,
+    onTransaction,
+    disabledExtensions,
+    editable,
+    editorClassName = "",
+    editorProps = {},
+    extendedEditorProps,
+    extensions = [],
+    fileHandler,
+    flaggedExtensions,
+    forwardedRef,
+    getEditorMetaData,
+    handleEditorReady,
+    id,
+    mentionHandler,
+    dragDropEnabled = true,
+    isTouchDevice,
+    onEditorFocus,
+    placeholder,
+    showPlaceholderOnEmpty,
+    tabIndex,
+    titleRef,
+    updatePageProperties,
+    user,
+  } = props;
+
+  const { mainNavigationExtension, titleNavigationExtension, setMainEditor, setTitleEditor } = useEditorNavigation();
+
+  // Memoize extensions to avoid unnecessary editor recreations
+  const editorExtensions = useMemo(
+    () => [
+      SideMenuExtension({
+        aiEnabled: !disabledExtensions?.includes("ai"),
+        dragDropEnabled,
+      }),
+      HeadingListExtension,
+      Collaboration.configure({
+        document: provider.document,
+        field: "default",
+      }),
+      ...extensions,
+      ...DocumentEditorAdditionalExtensions({
+        disabledExtensions,
+        extendedEditorProps,
+        fileHandler,
+        flaggedExtensions,
+        isEditable: editable,
+        provider,
+        userDetails: user,
+      }),
+      mainNavigationExtension,
+    ],
+    [
+      provider,
+      disabledExtensions,
+      dragDropEnabled,
+      extensions,
+      extendedEditorProps,
+      fileHandler,
+      flaggedExtensions,
+      editable,
+      user,
+      mainNavigationExtension,
+    ]
+  );
+
+  // Editor configuration
+  const editorConfig = useMemo<TEditorHookProps>(
+    () => ({
+      disabledExtensions,
+      extendedEditorProps,
+      id,
+      editable,
+      editorProps,
+      editorClassName,
+      enableHistory: false,
+      extensions: editorExtensions,
+      fileHandler,
+      flaggedExtensions,
+      forwardedRef,
+      getEditorMetaData,
+      handleEditorReady,
+      isTouchDevice,
+      mentionHandler,
+      onAssetChange,
+      onChange,
+      onEditorFocus,
+      onTransaction,
+      placeholder,
+      showPlaceholderOnEmpty,
+      provider,
+      tabIndex,
+    }),
+    [
+      provider,
+      disabledExtensions,
+      extendedEditorProps,
+      id,
+      editable,
+      editorProps,
+      editorClassName,
+      editorExtensions,
+      fileHandler,
+      flaggedExtensions,
+      forwardedRef,
+      getEditorMetaData,
+      handleEditorReady,
+      isTouchDevice,
+      mentionHandler,
+      onAssetChange,
+      onChange,
+      onEditorFocus,
+      onTransaction,
+      placeholder,
+      showPlaceholderOnEmpty,
+      tabIndex,
+    ]
+  );
+
+  const editor = useEditor(editorConfig);
+
+  const titleExtensions = useMemo(
+    () => [
+      Collaboration.configure({
+        document: provider.document,
+        field: "title",
+      }),
+      titleNavigationExtension,
+    ],
+    [provider, titleNavigationExtension]
+  );
+
+  const titleEditorConfig = useMemo<{
+    id: string;
+    editable: boolean;
+    provider: HocuspocusProvider;
+    titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
+    updatePageProperties?: ICollaborativeDocumentEditorProps["updatePageProperties"];
+    extensions: Extensions;
+    extendedEditorProps?: IEditorPropsExtended;
+    getEditorMetaData?: IEditorProps["getEditorMetaData"];
+  }>(
+    () => ({
+      id,
+      editable,
+      provider,
+      titleRef,
+      updatePageProperties,
+      extensions: titleExtensions,
+      extendedEditorProps,
+      getEditorMetaData,
+    }),
+    [provider, id, editable, titleRef, updatePageProperties, titleExtensions, extendedEditorProps, getEditorMetaData]
+  );
+
+  const titleEditor = useTitleEditor(titleEditorConfig as Parameters<typeof useTitleEditor>[0]);
+
+  useEffect(() => {
+    if (editor && titleEditor) {
+      setMainEditor(editor);
+      setTitleEditor(titleEditor);
+    }
+  }, [editor, titleEditor, setMainEditor, setTitleEditor]);
+
+  return {
+    editor,
+    titleEditor,
+  };
+};
diff --git a/packages/editor/src/hooks/use-editor-navigation.ts b/packages/editor/src/hooks/use-editor-navigation.ts
new file mode 100644
index 0000000..1978498
--- /dev/null
+++ b/packages/editor/src/hooks/use-editor-navigation.ts
@@ -0,0 +1,175 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { Extension } from "@tiptap/core";
+import { useCallback, useRef } from "react";
+
+/**
+ * Creates a title editor extension that enables keyboard navigation to the main editor
+ *
+ * @param getMainEditor Function to get the main editor instance
+ * @returns A Tiptap extension with keyboard shortcuts
+ */
+export const createTitleNavigationExtension = (getMainEditor: () => Editor | null) =>
+  Extension.create({
+    name: "titleEditorNavigation",
+    priority: 10,
+
+    addKeyboardShortcuts() {
+      return {
+        // Arrow down at end of title - Move to main editor
+        ArrowDown: () => {
+          const mainEditor = getMainEditor();
+          if (!mainEditor) return false;
+
+          // If cursor is at the end of the title
+          mainEditor.commands.focus("start");
+          return true;
+        },
+
+        // Right arrow at end of title - Move to main editor
+        ArrowRight: ({ editor: titleEditor }) => {
+          const mainEditor = getMainEditor();
+          if (!mainEditor) return false;
+
+          const { from, to } = titleEditor.state.selection;
+          const documentLength = titleEditor.state.doc.content.size;
+
+          // If cursor is at the end of the title
+          if (from === to && to === documentLength - 1) {
+            mainEditor.commands.focus("start");
+            return true;
+          }
+          return false;
+        },
+
+        // Enter - Create new line in main editor and focus
+        Enter: () => {
+          const mainEditor = getMainEditor();
+          if (!mainEditor) return false;
+
+          // Focus at the start of the main editor
+          mainEditor.chain().focus().insertContentAt(0, { type: "paragraph" }).run();
+          return true;
+        },
+      };
+    },
+  });
+
+/**
+ * Creates a main editor extension that enables keyboard navigation to the title editor
+ *
+ * @param getTitleEditor Function to get the title editor instance
+ * @returns A Tiptap extension with keyboard shortcuts
+ */
+export const createMainNavigationExtension = (getTitleEditor: () => Editor | null) =>
+  Extension.create({
+    name: "mainEditorNavigation",
+    priority: 10,
+
+    addKeyboardShortcuts() {
+      return {
+        // Arrow up at start of main editor - Move to title editor
+        ArrowUp: ({ editor: mainEditor }) => {
+          const titleEditor = getTitleEditor();
+          if (!titleEditor) return false;
+
+          const { from, to } = mainEditor.state.selection;
+
+          // If cursor is at the start of the main editor
+          if (from === 1 && to === 1) {
+            titleEditor.commands.focus("end");
+            return true;
+          }
+          return false;
+        },
+
+        // Left arrow at start of main editor - Move to title editor
+        ArrowLeft: ({ editor: mainEditor }) => {
+          const titleEditor = getTitleEditor();
+          if (!titleEditor) return false;
+
+          const { from, to } = mainEditor.state.selection;
+
+          // If cursor is at the absolute start of the main editor
+          if (from === 1 && to === 1) {
+            titleEditor.commands.focus("end");
+            return true;
+          }
+          return false;
+        },
+
+        // Backspace - Special handling for first paragraph
+        Backspace: ({ editor }) => {
+          const titleEditor = getTitleEditor();
+          if (!titleEditor) return false;
+
+          const { from, to, empty } = editor.state.selection;
+
+          // Only handle when cursor is at position 1 with empty selection
+          if (from === 1 && to === 1 && empty) {
+            const firstNode = editor.state.doc.firstChild;
+
+            // If first node is a paragraph
+            if (firstNode && firstNode.type.name === "paragraph") {
+              // If paragraph is already empty, delete it and focus title editor
+              if (firstNode.content.size === 0) {
+                editor.commands.deleteNode("paragraph");
+                // Use setTimeout to ensure the node is deleted before changing focus
+                setTimeout(() => titleEditor.commands.focus("end"), 0);
+                return true;
+              }
+              // If paragraph is not empty, just move focus to title editor
+              else {
+                titleEditor.commands.focus("end");
+                return true;
+              }
+            }
+          }
+          return false;
+        },
+      };
+    },
+  });
+
+/**
+ * Hook to manage navigation between title and main editors
+ *
+ * Creates extension factories for keyboard navigation between editors
+ * and maintains references to both editors
+ *
+ * @returns Object with editor setters and extensions
+ */
+export const useEditorNavigation = () => {
+  // Create refs to store editor instances
+  const titleEditorRef = useRef<Editor | null>(null);
+  const mainEditorRef = useRef<Editor | null>(null);
+
+  // Create stable getter functions
+  const getTitleEditor = useCallback(() => titleEditorRef.current, []);
+  const getMainEditor = useCallback(() => mainEditorRef.current, []);
+
+  // Create stable setter functions
+  const setTitleEditor = useCallback((editor: Editor | null) => {
+    titleEditorRef.current = editor;
+  }, []);
+
+  const setMainEditor = useCallback((editor: Editor | null) => {
+    mainEditorRef.current = editor;
+  }, []);
+
+  // Create extension factories that access editor refs
+  const titleNavigationExtension = createTitleNavigationExtension(getMainEditor);
+  const mainNavigationExtension = createMainNavigationExtension(getTitleEditor);
+
+  return {
+    setTitleEditor,
+    setMainEditor,
+    titleNavigationExtension,
+    mainNavigationExtension,
+  };
+};
diff --git a/packages/editor/src/hooks/use-editor.ts b/packages/editor/src/hooks/use-editor.ts
new file mode 100644
index 0000000..5cbf106
--- /dev/null
+++ b/packages/editor/src/hooks/use-editor.ts
@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEditorState, useEditor as useTiptapEditor } from "@tiptap/react";
+import { useImperativeHandle, useEffect } from "react";
+import type { MarkdownStorage } from "tiptap-markdown";
+// extensions
+import { CoreEditorExtensions } from "@/extensions";
+// helpers
+import { getEditorRefHelpers } from "@/helpers/editor-ref";
+// props
+import { CoreEditorProps } from "@/props";
+// types
+import type { TEditorHookProps } from "@/types";
+
+declare module "@tiptap/core" {
+  interface Storage {
+    markdown: MarkdownStorage;
+  }
+}
+
+export const useEditor = (props: TEditorHookProps) => {
+  const {
+    autofocus = false,
+    disabledExtensions,
+    editable = true,
+    editorClassName = "",
+    editorProps = {},
+    enableHistory,
+    extendedEditorProps,
+    extensions = [],
+    fileHandler,
+    flaggedExtensions,
+    forwardedRef,
+    getEditorMetaData,
+    handleEditorReady,
+    id = "",
+    initialValue,
+    isTouchDevice,
+    mentionHandler,
+    onAssetChange,
+    onChange,
+    onEditorFocus,
+    onTransaction,
+    placeholder,
+    showPlaceholderOnEmpty,
+    tabIndex,
+    provider,
+    value,
+  } = props;
+
+  const editor = useTiptapEditor(
+    {
+      editable,
+      immediatelyRender: false,
+      shouldRerenderOnTransaction: false,
+      autofocus,
+      parseOptions: { preserveWhitespace: true },
+      editorProps: {
+        ...CoreEditorProps({
+          editorClassName,
+        }),
+        ...editorProps,
+      },
+      extensions: [
+        ...CoreEditorExtensions({
+          disabledExtensions,
+          editable,
+          enableHistory,
+          extendedEditorProps,
+          fileHandler,
+          flaggedExtensions,
+          getEditorMetaData,
+          isTouchDevice,
+          mentionHandler,
+          placeholder,
+          showPlaceholderOnEmpty,
+          tabIndex,
+          provider,
+        }),
+        ...extensions,
+      ],
+      content: initialValue,
+      onCreate: () => handleEditorReady?.(true),
+      onTransaction: () => {
+        onTransaction?.();
+      },
+      onUpdate: ({ editor, transaction }) => {
+        // Check if this update is only due to migration update
+        const isMigrationUpdate = transaction?.getMeta("uniqueIdOnlyChange") === true;
+        onChange?.(editor.getJSON(), editor.getHTML(), { isMigrationUpdate });
+      },
+      onDestroy: () => handleEditorReady?.(false),
+      onFocus: onEditorFocus,
+    },
+    [editable]
+  );
+
+  // Effect for syncing SWR data
+  useEffect(() => {
+    // value is null when intentionally passed where syncing is not yet
+    // supported and value is undefined when the data from swr is not populated
+    if (value == null) return;
+    if (editor) {
+      const { uploadInProgress: isUploadInProgress } = editor.storage.utility;
+      if (!editor.isDestroyed && !isUploadInProgress) {
+        try {
+          editor.commands.setContent(value, false, {
+            preserveWhitespace: true,
+          });
+          if (editor.state.selection) {
+            const docLength = editor.state.doc.content.size;
+            const relativePosition = Math.min(editor.state.selection.from, docLength - 1);
+            editor.commands.setTextSelection(relativePosition);
+          }
+        } catch (error) {
+          console.error("Error syncing editor content with external value:", error);
+        }
+      }
+    }
+  }, [editor, value, id]);
+
+  // update assets upload status
+  useEffect(() => {
+    if (!editor) return;
+    const assetsUploadStatus = fileHandler.assetsUploadStatus;
+    editor.commands.updateAssetsUploadStatus?.(assetsUploadStatus);
+  }, [editor, fileHandler.assetsUploadStatus]);
+
+  // subscribe to assets list changes
+  const assetsList = useEditorState({
+    editor,
+    selector: ({ editor }) => ({
+      assets: editor?.storage.utility?.assetsList ?? [],
+    }),
+  });
+  // trigger callback when assets list changes
+  useEffect(() => {
+    const assets = assetsList?.assets;
+    if (!assets || !onAssetChange) return;
+    onAssetChange(assets);
+  }, [assetsList?.assets, onAssetChange]);
+
+  useImperativeHandle(
+    forwardedRef,
+    () =>
+      getEditorRefHelpers({
+        editor,
+        getEditorMetaData,
+        provider,
+      }),
+    [editor, getEditorMetaData, provider]
+  );
+
+  if (!editor) {
+    return null;
+  }
+
+  return editor;
+};
diff --git a/packages/editor/src/hooks/use-file-upload.ts b/packages/editor/src/hooks/use-file-upload.ts
new file mode 100644
index 0000000..e9d3b8d
--- /dev/null
+++ b/packages/editor/src/hooks/use-file-upload.ts
@@ -0,0 +1,195 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor, NodeViewProps } from "@tiptap/core";
+import type { DragEvent } from "react";
+import { useCallback, useEffect, useState } from "react";
+// helpers
+import type { EFileError } from "@/helpers/file";
+import { isFileValid } from "@/helpers/file";
+// plugins
+import { insertFilesSafely } from "@/plugins/drop";
+// types
+import type { TEditorCommands } from "@/types";
+
+type TUploaderArgs = {
+  acceptedMimeTypes: string[];
+  editorCommand: (file: File) => Promise<string | undefined>;
+  handleProgressStatus?: (isUploading: boolean) => void;
+  loadFileFromFileSystem?: (file: string) => void;
+  maxFileSize: number;
+  onInvalidFile: (error: EFileError, file: File, message: string) => void;
+  onUpload: (url: string, file: File) => void;
+};
+
+export const useUploader = (args: TUploaderArgs) => {
+  const {
+    acceptedMimeTypes,
+    editorCommand,
+    handleProgressStatus,
+    loadFileFromFileSystem,
+    maxFileSize,
+    onInvalidFile,
+    onUpload,
+  } = args;
+  // states
+  const [isUploading, setIsUploading] = useState(false);
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      handleProgressStatus?.(true);
+      setIsUploading(true);
+      const isValid = isFileValid({
+        acceptedMimeTypes,
+        file,
+        maxFileSize,
+        onError: (error, message) => onInvalidFile(error, file, message),
+      });
+      if (!isValid) {
+        handleProgressStatus?.(false);
+        setIsUploading(false);
+        return;
+      }
+      try {
+        if (loadFileFromFileSystem) {
+          const reader = new FileReader();
+          reader.onload = () => {
+            if (reader.result) {
+              loadFileFromFileSystem(reader.result as string);
+            } else {
+              console.error("Failed to read the file: reader.result is null");
+            }
+          };
+          reader.onerror = () => {
+            console.error("Error reading file");
+          };
+          reader.readAsDataURL(file);
+        }
+        const url = await editorCommand(file);
+
+        if (!url) {
+          throw new Error("Something went wrong while uploading the file.");
+        }
+        onUpload(url, file);
+      } catch {
+        console.error("useFileUpload: Error in uploading file");
+      } finally {
+        handleProgressStatus?.(false);
+        setIsUploading(false);
+      }
+    },
+    [
+      acceptedMimeTypes,
+      editorCommand,
+      handleProgressStatus,
+      loadFileFromFileSystem,
+      maxFileSize,
+      onInvalidFile,
+      onUpload,
+    ]
+  );
+
+  return { isUploading, uploadFile };
+};
+
+type TDropzoneArgs = {
+  editor: Editor;
+  getPos: NodeViewProps["getPos"];
+  type: Extract<TEditorCommands, "attachment" | "image">;
+  uploader: (file: File) => Promise<void>;
+};
+
+export const useDropZone = (args: TDropzoneArgs) => {
+  const { editor, getPos, type, uploader } = args;
+  // states
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [draggedInside, setDraggedInside] = useState<boolean>(false);
+
+  useEffect(() => {
+    const dragStartHandler = () => {
+      setIsDragging(true);
+    };
+
+    const dragEndHandler = () => {
+      setIsDragging(false);
+    };
+
+    document.body.addEventListener("dragstart", dragStartHandler);
+    document.body.addEventListener("dragend", dragEndHandler);
+
+    return () => {
+      document.body.removeEventListener("dragstart", dragStartHandler);
+      document.body.removeEventListener("dragend", dragEndHandler);
+    };
+  }, []);
+
+  const onDrop = useCallback(
+    async (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      setDraggedInside(false);
+      const filesList = e.dataTransfer.files;
+      const pos = getPos();
+
+      if (filesList.length === 0 || !editor.isEditable || pos === undefined) {
+        return;
+      }
+
+      await uploadFirstFileAndInsertRemaining({
+        editor,
+        filesList,
+        pos,
+        type,
+        uploader,
+      });
+    },
+    [editor, type, uploader, getPos]
+  );
+  const onDragEnter = useCallback(() => setDraggedInside(true), []);
+  const onDragLeave = useCallback(() => setDraggedInside(false), []);
+
+  return {
+    isDragging,
+    draggedInside,
+    onDragEnter,
+    onDragLeave,
+    onDrop,
+  };
+};
+
+type TMultipleFileArgs = {
+  editor: Editor;
+  filesList: FileList;
+  pos: number;
+  type: Extract<TEditorCommands, "attachment" | "image">;
+  uploader: (file: File) => Promise<void>;
+};
+
+// Upload the first file and insert the remaining ones for uploading multiple files
+export const uploadFirstFileAndInsertRemaining = async (args: TMultipleFileArgs) => {
+  const { editor, filesList, pos, type, uploader } = args;
+  const filesArray = Array.from(filesList);
+  if (filesArray.length === 0) {
+    console.error("No files found to upload.");
+    return;
+  }
+
+  // Upload the first file
+  const firstFile = filesArray[0];
+  uploader(firstFile);
+  // Insert the remaining files
+  const remainingFiles = filesArray.slice(1);
+  if (remainingFiles.length > 0) {
+    const docSize = editor.state.doc.content.size;
+    const posOfNextFileToBeInserted = Math.min(pos + 1, docSize);
+    insertFilesSafely({
+      editor,
+      files: remainingFiles,
+      initialPos: posOfNextFileToBeInserted,
+      event: "drop",
+      type,
+    });
+  }
+};
diff --git a/packages/editor/src/hooks/use-title-editor.ts b/packages/editor/src/hooks/use-title-editor.ts
new file mode 100644
index 0000000..048f21b
--- /dev/null
+++ b/packages/editor/src/hooks/use-title-editor.ts
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { Extensions } from "@tiptap/core";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { useEditor } from "@tiptap/react";
+import { useImperativeHandle } from "react";
+// constants
+import { CORE_EDITOR_META } from "@/constants/meta";
+// extensions
+import { TitleExtensions } from "@/extensions/title-extension";
+// helpers
+import { getEditorRefHelpers } from "@/helpers/editor-ref";
+// types
+import type { IEditorPropsExtended, IEditorProps } from "@/types";
+import type { EditorTitleRefApi, ICollaborativeDocumentEditorProps } from "@/types/editor";
+
+type TUseTitleEditorProps = {
+  editable?: boolean;
+  provider: HocuspocusProvider;
+  titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
+  extensions?: Extensions;
+  initialValue?: string;
+  field?: string;
+  placeholder?: string;
+  updatePageProperties?: ICollaborativeDocumentEditorProps["updatePageProperties"];
+  id: string;
+  extendedEditorProps?: IEditorPropsExtended;
+  getEditorMetaData?: IEditorProps["getEditorMetaData"];
+};
+
+/**
+ * A hook that creates a title editor with collaboration features
+ * Uses the same Y.Doc as the main editor but a different field
+ */
+export const useTitleEditor = (props: TUseTitleEditorProps) => {
+  const {
+    editable = true,
+    id,
+    initialValue = "",
+    extensions,
+    provider,
+    updatePageProperties,
+    titleRef,
+    getEditorMetaData,
+  } = props;
+
+  // Force editor recreation when Y.Doc changes (provider.document.guid)
+  const docKey = provider?.document?.guid ?? id;
+
+  const editor = useEditor(
+    {
+      onUpdate: ({ editor }) => {
+        updatePageProperties?.(id, "property_updated", { name: editor?.getText() });
+      },
+      editable,
+      immediatelyRender: false,
+      shouldRerenderOnTransaction: false,
+      extensions: [
+        ...TitleExtensions,
+        ...(extensions ?? []),
+        Placeholder.configure({
+          placeholder: () => "Untitled",
+          includeChildren: true,
+          showOnlyWhenEditable: false,
+        }),
+      ],
+      content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<h1></h1>",
+    },
+    [editable, initialValue, docKey]
+  );
+
+  useImperativeHandle(titleRef, () => ({
+    ...getEditorRefHelpers({
+      editor,
+      provider,
+      getEditorMetaData: getEditorMetaData ?? (() => ({ file_assets: [], user_mentions: [] })),
+    }),
+    clearEditor: (emitUpdate = false) => {
+      editor
+        ?.chain()
+        .setMeta(CORE_EDITOR_META.SKIP_FILE_DELETION, true)
+        .setMeta(CORE_EDITOR_META.INTENTIONAL_DELETION, true)
+        .clearContent(emitUpdate)
+        .run();
+    },
+    setEditorValue: (content: string) => {
+      editor?.commands.setContent(content, false);
+    },
+  }));
+
+  return editor;
+};
diff --git a/packages/editor/src/hooks/use-yjs-setup.ts b/packages/editor/src/hooks/use-yjs-setup.ts
new file mode 100644
index 0000000..655fb1d
--- /dev/null
+++ b/packages/editor/src/hooks/use-yjs-setup.ts
@@ -0,0 +1,375 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { HocuspocusProvider } from "@hocuspocus/provider";
+// react
+import { useCallback, useEffect, useRef, useState } from "react";
+// indexeddb
+import { IndexeddbPersistence } from "y-indexeddb";
+// yjs
+import type * as Y from "yjs";
+// types
+import type { CollaborationState, CollabStage, CollaborationError } from "@/types/collaboration";
+
+// Helper to check if a close code indicates a forced close
+const isForcedCloseCode = (code: number | undefined): boolean => {
+  if (!code) return false;
+  // All custom close codes (4000-4003) are treated as forced closes
+  return code >= 4000 && code <= 4003;
+};
+
+type UseYjsSetupArgs = {
+  docId: string;
+  serverUrl: string;
+  authToken: string;
+  onStateChange?: (state: CollaborationState) => void;
+  options?: {
+    maxConnectionAttempts?: number;
+  };
+};
+
+const DEFAULT_MAX_RETRIES = 3;
+
+export const useYjsSetup = ({ docId, serverUrl, authToken, onStateChange }: UseYjsSetupArgs) => {
+  // Current collaboration stage
+  const [stage, setStage] = useState<CollabStage>({ kind: "initial" });
+
+  // Cache readiness state
+  const [hasCachedContent, setHasCachedContent] = useState(false);
+  const [isCacheReady, setIsCacheReady] = useState(false);
+
+  // Provider and Y.Doc in state (nullable until effect runs)
+  const [yjsSession, setYjsSession] = useState<{ provider: HocuspocusProvider; ydoc: Y.Doc } | null>(null);
+
+  // Use refs for values that need to be mutated from callbacks
+  const retryCountRef = useRef(0);
+  const forcedCloseSignalRef = useRef(false);
+  const isDisposedRef = useRef(false);
+  const stageRef = useRef<CollabStage>({ kind: "initial" });
+  const lastReconnectTimeRef = useRef(0);
+
+  // Create/destroy provider in effect (not during render)
+  useEffect(() => {
+    // Reset refs when creating new provider (e.g., document switch)
+    retryCountRef.current = 0;
+    isDisposedRef.current = false;
+    forcedCloseSignalRef.current = false;
+    stageRef.current = { kind: "initial" };
+
+    const provider = new HocuspocusProvider({
+      name: docId,
+      token: authToken,
+      url: serverUrl,
+      onAuthenticationFailed: () => {
+        if (isDisposedRef.current) return;
+        const error: CollaborationError = { type: "auth-failed", message: "Authentication failed" };
+        const newStage = { kind: "disconnected" as const, error };
+        stageRef.current = newStage;
+        setStage(newStage);
+      },
+      onConnect: () => {
+        if (isDisposedRef.current) {
+          provider?.disconnect();
+          return;
+        }
+        retryCountRef.current = 0;
+        // After successful connection, transition to awaiting-sync (onSynced will move to synced)
+        const newStage = { kind: "awaiting-sync" as const };
+        stageRef.current = newStage;
+        setStage(newStage);
+      },
+      onStatus: ({ status: providerStatus }) => {
+        if (isDisposedRef.current) return;
+        if (providerStatus === "connecting") {
+          // Derive whether this is initial connect or reconnection from retry count
+          const isReconnecting = retryCountRef.current > 0;
+          setStage(isReconnecting ? { kind: "reconnecting", attempt: retryCountRef.current } : { kind: "connecting" });
+        } else if (providerStatus === "disconnected") {
+          // Do not transition here; let handleClose decide the final stage
+        } else if (providerStatus === "connected") {
+          // Connection succeeded, move to awaiting-sync
+          const newStage = { kind: "awaiting-sync" as const };
+          stageRef.current = newStage;
+          setStage(newStage);
+        }
+      },
+      onSynced: () => {
+        if (isDisposedRef.current) return;
+        retryCountRef.current = 0;
+        // Document sync complete
+        const newStage = { kind: "synced" as const };
+        stageRef.current = newStage;
+        setStage(newStage);
+      },
+    });
+
+    const pauseProvider = () => {
+      const wsProvider = provider.configuration.websocketProvider;
+      if (wsProvider) {
+        try {
+          wsProvider.shouldConnect = false;
+          wsProvider.disconnect();
+        } catch (error) {
+          console.error(`Error pausing websocketProvider:`, error);
+        }
+      }
+    };
+
+    const permanentlyStopProvider = () => {
+      isDisposedRef.current = true;
+
+      const wsProvider = provider.configuration.websocketProvider;
+      if (wsProvider) {
+        try {
+          wsProvider.shouldConnect = false;
+          wsProvider.disconnect();
+          wsProvider.destroy();
+        } catch (error) {
+          console.error(`Error tearing down websocketProvider:`, error);
+        }
+      }
+      try {
+        provider.destroy();
+      } catch (error) {
+        console.error(`Error destroying provider:`, error);
+      }
+    };
+
+    const handleClose = (closeEvent: { event?: { code?: number; reason?: string } }) => {
+      if (isDisposedRef.current) return;
+
+      const closeCode = closeEvent.event?.code;
+      const wsProvider = provider.configuration.websocketProvider;
+      const shouldConnect = wsProvider.shouldConnect;
+      const isForcedClose = isForcedCloseCode(closeCode) || forcedCloseSignalRef.current || shouldConnect === false;
+
+      if (isForcedClose) {
+        // Determine if this is a manual disconnect or a permanent error
+        const isManualDisconnect = shouldConnect === false;
+
+        const error: CollaborationError = {
+          type: "forced-close",
+          code: closeCode || 0,
+          message: isManualDisconnect ? "Manually disconnected" : "Server forced connection close",
+        };
+        const newStage = { kind: "disconnected" as const, error };
+        stageRef.current = newStage;
+        setStage(newStage);
+
+        retryCountRef.current = 0;
+        forcedCloseSignalRef.current = false;
+
+        // Only pause if it's a real forced close (not manual disconnect)
+        // Manual disconnect leaves it as is (shouldConnect=false already set if manual)
+        if (!isManualDisconnect) {
+          pauseProvider();
+        }
+      } else {
+        // Transient connection loss: attempt reconnection
+        retryCountRef.current++;
+
+        if (retryCountRef.current >= DEFAULT_MAX_RETRIES) {
+          // Exceeded max retry attempts
+          const error: CollaborationError = {
+            type: "max-retries",
+            message: `Failed to connect after ${DEFAULT_MAX_RETRIES} attempts`,
+          };
+          const newStage = { kind: "disconnected" as const, error };
+          stageRef.current = newStage;
+          setStage(newStage);
+
+          pauseProvider();
+        } else {
+          // Still have retries left, move to reconnecting
+          const newStage = { kind: "reconnecting" as const, attempt: retryCountRef.current };
+          stageRef.current = newStage;
+          setStage(newStage);
+        }
+      }
+    };
+
+    provider.on("close", handleClose);
+
+    setYjsSession({ provider, ydoc: provider.document });
+
+    // Handle page visibility changes (sleep/wake, tab switching)
+    const handleVisibilityChange = (event?: Event) => {
+      if (isDisposedRef.current) return;
+
+      const isVisible = document.visibilityState === "visible";
+      const isFocus = event?.type === "focus";
+
+      if (isVisible || isFocus) {
+        // Throttle reconnection attempts to avoid double-firing (visibility + focus)
+        const now = Date.now();
+        if (now - lastReconnectTimeRef.current < 1000) {
+          return;
+        }
+
+        const wsProvider = provider.configuration.websocketProvider;
+        if (!wsProvider) return;
+
+        const ws = wsProvider.webSocket;
+        const isStale = ws?.readyState === WebSocket.CLOSED || ws?.readyState === WebSocket.CLOSING;
+
+        // If disconnected or stale, re-enable reconnection and force reconnect
+        if (isStale || stageRef.current.kind === "disconnected") {
+          lastReconnectTimeRef.current = now;
+
+          // Re-enable connection on tab focus (even if manually disconnected before sleep)
+          wsProvider.shouldConnect = true;
+
+          // Reset retry count for fresh reconnection attempt
+          retryCountRef.current = 0;
+
+          // Move to connecting state
+          const newStage = { kind: "connecting" as const };
+          stageRef.current = newStage;
+          setStage(newStage);
+
+          wsProvider.disconnect();
+          wsProvider.connect();
+        }
+      }
+    };
+
+    // Handle online/offline events
+    const handleOnline = () => {
+      if (isDisposedRef.current) return;
+
+      const wsProvider = provider.configuration.websocketProvider;
+      if (wsProvider) {
+        wsProvider.shouldConnect = true;
+        wsProvider.disconnect();
+        wsProvider.connect();
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("focus", handleVisibilityChange);
+    window.addEventListener("online", handleOnline);
+
+    return () => {
+      try {
+        provider.off("close", handleClose);
+      } catch (error) {
+        console.error(`Error unregistering close handler:`, error);
+      }
+
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("focus", handleVisibilityChange);
+      window.removeEventListener("online", handleOnline);
+
+      permanentlyStopProvider();
+    };
+  }, [docId, serverUrl, authToken]);
+
+  // IndexedDB persistence lifecycle
+  useEffect(() => {
+    if (!yjsSession) return;
+
+    const idbPersistence = new IndexeddbPersistence(docId, yjsSession.provider.document);
+
+    const onIdbSynced = () => {
+      const yFragment = idbPersistence.doc.getXmlFragment("default");
+      const docLength = yFragment?.length ?? 0;
+      setIsCacheReady(true);
+      setHasCachedContent(docLength > 0);
+    };
+
+    idbPersistence.on("synced", onIdbSynced);
+
+    return () => {
+      idbPersistence.off("synced", onIdbSynced);
+      try {
+        idbPersistence.destroy();
+      } catch (error) {
+        console.error(`Error destroying local provider:`, error);
+      }
+    };
+  }, [docId, yjsSession]);
+
+  // Observe Y.Doc content changes to update hasCachedContent (catches fallback scenario)
+  useEffect(() => {
+    if (!yjsSession || !isCacheReady) return;
+
+    const fragment = yjsSession.ydoc.getXmlFragment("default");
+    let lastHasContent = false;
+
+    const updateCachedContentFlag = () => {
+      const len = fragment?.length ?? 0;
+      const hasContent = len > 0;
+
+      // Only update state if the boolean value actually changed
+      if (hasContent !== lastHasContent) {
+        lastHasContent = hasContent;
+        setHasCachedContent(hasContent);
+      }
+    };
+    // Initial check (handles fallback content loaded before this effect runs)
+    updateCachedContentFlag();
+
+    // Use observeDeep to catch nested changes (keystrokes modify Y.XmlText inside Y.XmlElement)
+    fragment.observeDeep(updateCachedContentFlag);
+
+    return () => {
+      try {
+        fragment.unobserveDeep(updateCachedContentFlag);
+      } catch (error) {
+        console.error("Error unobserving fragment:", error);
+      }
+    };
+  }, [yjsSession, isCacheReady]);
+
+  // Notify state changes callback (use ref to avoid dependency on handler)
+  const stateChangeCallbackRef = useRef(onStateChange);
+  stateChangeCallbackRef.current = onStateChange;
+
+  useEffect(() => {
+    if (!stateChangeCallbackRef.current) return;
+
+    const isServerSynced = stage.kind === "synced";
+    const isServerDisconnected = stage.kind === "disconnected";
+
+    const state: CollaborationState = {
+      stage,
+      isServerSynced,
+      isServerDisconnected,
+    };
+
+    stateChangeCallbackRef.current(state);
+  }, [stage]);
+
+  // Derived values for convenience
+  const isServerSynced = stage.kind === "synced";
+  const isServerDisconnected = stage.kind === "disconnected";
+  const isDocReady = isServerSynced || isServerDisconnected || (isCacheReady && hasCachedContent);
+
+  const signalForcedClose = useCallback((value: boolean) => {
+    forcedCloseSignalRef.current = value;
+  }, []);
+
+  // Don't return anything until provider is ready - guarantees non-null provider
+  if (!yjsSession) {
+    return null;
+  }
+
+  return {
+    provider: yjsSession.provider,
+    ydoc: yjsSession.ydoc,
+    state: {
+      stage,
+      hasCachedContent,
+      isCacheReady,
+      isServerSynced,
+      isServerDisconnected,
+      isDocReady,
+    },
+    actions: {
+      signalForcedClose,
+    },
+  };
+};
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
new file mode 100644
index 0000000..b58ba28
--- /dev/null
+++ b/packages/editor/src/index.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// editors
+export {
+  CollaborativeDocumentEditorWithRef,
+  DocumentEditorWithRef,
+  LiteTextEditorWithRef,
+  RichTextEditorWithRef,
+} from "@/components/editors";
+
+// constants
+export * from "@/constants/common";
+
+// helpers
+export * from "@/helpers/common";
+export * from "@/helpers/yjs-utils";
+
+export { CORE_EXTENSIONS } from "@/constants/extension";
+export { ADDITIONAL_EXTENSIONS } from "@/constants/extensions";
+
+// types
+export * from "@/types";
+
+// additional exports
+export { TrailingNode } from "@/extensions/trailing-node";
diff --git a/packages/editor/src/lib.ts b/packages/editor/src/lib.ts
new file mode 100644
index 0000000..3acece2
--- /dev/null
+++ b/packages/editor/src/lib.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "@/extensions/core-without-props";
+export * from "@/constants/document-collaborative-events";
+export * from "@/helpers/get-document-server-event";
+export * from "@/helpers/yjs-utils";
+export * from "@/types/document-collaborative-events";
diff --git a/packages/editor/src/plugins/ai-handle.ts b/packages/editor/src/plugins/ai-handle.ts
new file mode 100644
index 0000000..29e6a76
--- /dev/null
+++ b/packages/editor/src/plugins/ai-handle.ts
@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { NodeSelection } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+// extensions
+import type { SideMenuHandleOptions, SideMenuPluginProps } from "@/extensions";
+// plugins
+import { nodeDOMAtCoords } from "@/plugins/drag-handle";
+
+const sparklesIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>';
+
+const nodePosAtDOM = (node: Element, view: EditorView, options: SideMenuPluginProps) => {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 50 + options.dragHandleWidth,
+    top: boundingRect.top + 1,
+  })?.inside;
+};
+
+const nodePosAtDOMForBlockQuotes = (node: Element, view: EditorView) => {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 1,
+    top: boundingRect.top + 1,
+  })?.inside;
+};
+
+const calcNodePos = (pos: number, view: EditorView, node: Element) => {
+  const maxPos = view.state.doc.content.size;
+  const safePos = Math.max(0, Math.min(pos, maxPos));
+  const $pos = view.state.doc.resolve(safePos);
+
+  if ($pos.depth > 1) {
+    if (node.matches("ul li, ol li")) {
+      // only for nested lists
+      const newPos = $pos.before($pos.depth);
+      return Math.max(0, Math.min(newPos, maxPos));
+    }
+  }
+
+  return safePos;
+};
+
+export const AIHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOptions => {
+  let aiHandleElement: HTMLButtonElement | null = null;
+
+  const handleClick = (event: MouseEvent, view: EditorView) => {
+    view.focus();
+
+    const node = nodeDOMAtCoords({
+      x: event.clientX + 50 + options.dragHandleWidth,
+      y: event.clientY,
+    });
+
+    if (!(node instanceof Element)) return;
+
+    if (node.matches("blockquote")) {
+      let nodePosForBlockQuotes = nodePosAtDOMForBlockQuotes(node, view);
+      if (nodePosForBlockQuotes === null || nodePosForBlockQuotes === undefined) return;
+
+      const docSize = view.state.doc.content.size;
+      nodePosForBlockQuotes = Math.max(0, Math.min(nodePosForBlockQuotes, docSize));
+
+      if (nodePosForBlockQuotes >= 0 && nodePosForBlockQuotes <= docSize) {
+        // TODO FIX ERROR
+        const nodeSelection = NodeSelection.create(view.state.doc, nodePosForBlockQuotes);
+        view.dispatch(view.state.tr.setSelection(nodeSelection));
+      }
+      return;
+    }
+
+    let nodePos = nodePosAtDOM(node, view, options);
+
+    if (nodePos === null || nodePos === undefined) return;
+
+    // Adjust the nodePos to point to the start of the node, ensuring NodeSelection can be applied
+    nodePos = calcNodePos(nodePos, view, node);
+
+    // TODO FIX ERROR
+    // Use NodeSelection to select the node at the calculated position
+    const nodeSelection = NodeSelection.create(view.state.doc, nodePos);
+
+    // Dispatch the transaction to update the selection
+    view.dispatch(view.state.tr.setSelection(nodeSelection));
+  };
+
+  const view = (view: EditorView, sideMenu: HTMLDivElement | null) => {
+    // create handle element
+    const className =
+      "grid place-items-center font-medium size-5 aspect-square text-11 text-tertiary hover:bg-layer-1 rounded-xs opacity-100 !outline-none z-[5] transition-[background-color,_opacity] duration-200 ease-linear";
+    aiHandleElement = document.createElement("button");
+    aiHandleElement.type = "button";
+    aiHandleElement.id = "ai-handle";
+    aiHandleElement.classList.value = className;
+    const iconElement = document.createElement("span");
+    iconElement.classList.value = "pointer-events-none";
+    iconElement.innerHTML = sparklesIcon;
+    aiHandleElement.appendChild(iconElement);
+    // bind events
+    aiHandleElement.addEventListener("click", (e) => handleClick(e, view));
+
+    sideMenu?.appendChild(aiHandleElement);
+
+    return {
+      // destroy the handle element on un-initialize
+      destroy: () => {
+        aiHandleElement?.remove();
+        aiHandleElement = null;
+      },
+    };
+  };
+
+  const domEvents = {};
+
+  return {
+    view,
+    domEvents,
+  };
+};
diff --git a/packages/editor/src/plugins/drag-handle.ts b/packages/editor/src/plugins/drag-handle.ts
new file mode 100644
index 0000000..9ecbcd2
--- /dev/null
+++ b/packages/editor/src/plugins/drag-handle.ts
@@ -0,0 +1,448 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Node, Schema } from "@tiptap/pm/model";
+import { Fragment, Slice } from "@tiptap/pm/model";
+import { NodeSelection } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// extensions
+import type { SideMenuHandleOptions, SideMenuPluginProps } from "@/extensions";
+
+const verticalEllipsisIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>';
+
+const generalSelectors = [
+  "li",
+  "p.editor-paragraph-block:not(:first-child)",
+  ".code-block",
+  "blockquote",
+  "h1.editor-heading-block, h2.editor-heading-block, h3.editor-heading-block, h4.editor-heading-block, h5.editor-heading-block, h6.editor-heading-block",
+  "[data-type=horizontalRule]",
+  "table:not(.table-drag-preview)",
+  ".issue-embed",
+  ".image-component",
+  ".image-upload-component",
+  ".editor-callout-component",
+  ".editor-embed-component",
+  ".editor-drawio-component",
+].join(", ");
+
+const maxScrollSpeed = 20;
+const acceleration = 0.5;
+
+const scrollParentCache = new WeakMap();
+
+function easeOutQuadAnimation(t: number) {
+  return t * (2 - t);
+}
+
+const createDragHandleElement = (): HTMLElement => {
+  const dragHandleElement = document.createElement("button");
+  dragHandleElement.type = "button";
+  dragHandleElement.id = "drag-handle";
+  dragHandleElement.draggable = true;
+  dragHandleElement.dataset.dragHandle = "";
+  dragHandleElement.classList.value =
+    "hidden sm:flex items-center size-5 aspect-square rounded-xs cursor-grab outline-none hover:bg-layer-1-hover active:bg-layer-1 active:cursor-grabbing transition-[background-color,_opacity] duration-200 ease-linear";
+
+  const iconElement1 = document.createElement("span");
+  iconElement1.classList.value = "pointer-events-none text-tertiary";
+  iconElement1.innerHTML = verticalEllipsisIcon;
+  const iconElement2 = document.createElement("span");
+  iconElement2.classList.value = "pointer-events-none text-tertiary -ml-2.5";
+  iconElement2.innerHTML = verticalEllipsisIcon;
+
+  dragHandleElement.appendChild(iconElement1);
+  dragHandleElement.appendChild(iconElement2);
+
+  return dragHandleElement;
+};
+
+const isScrollable = (node: HTMLElement | SVGElement) => {
+  if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+    return false;
+  }
+  const style = getComputedStyle(node);
+  return ["overflow", "overflow-y"].some((propertyName) => {
+    const value = style.getPropertyValue(propertyName);
+    return value === "auto" || value === "scroll";
+  });
+};
+
+export const getScrollParent = (node: HTMLElement | SVGElement) => {
+  if (scrollParentCache.has(node)) {
+    return scrollParentCache.get(node);
+  }
+
+  let currentParent = node.parentElement;
+
+  while (currentParent) {
+    if (isScrollable(currentParent)) {
+      scrollParentCache.set(node, currentParent);
+      return currentParent;
+    }
+    currentParent = currentParent.parentElement;
+  }
+
+  const result = document.scrollingElement || document.documentElement;
+  scrollParentCache.set(node, result);
+  return result;
+};
+
+export const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
+  const elements = document.elementsFromPoint(coords.x, coords.y);
+
+  for (const elem of elements) {
+    // Check for table wrapper first
+    if (elem.matches("table:not(.table-drag-preview)")) {
+      return elem;
+    }
+
+    if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
+      return elem;
+    }
+
+    // Skip table cells
+    if (elem.closest("table")) {
+      continue;
+    }
+
+    // Skip elements inside .editor-embed-component
+    if (elem.closest(".editor-embed-component") && !elem.matches(".editor-embed-component")) {
+      continue;
+    }
+
+    // apply general selector
+    if (elem.matches(generalSelectors)) {
+      return elem;
+    }
+  }
+  return null;
+};
+
+const nodePosAtDOM = (node: Element, view: EditorView, options: SideMenuPluginProps) => {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 50 + options.dragHandleWidth,
+    top: boundingRect.top + 1,
+  })?.inside;
+};
+
+const nodePosAtDOMForBlockQuotes = (node: Element, view: EditorView) => {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 1,
+    top: boundingRect.top + 1,
+  })?.inside;
+};
+
+export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOptions => {
+  let listType = "";
+  let isDragging = false;
+  let lastClientY = 0;
+  let scrollAnimationFrame: number | null = null;
+  let isDraggedOutsideWindow: "top" | "bottom" | boolean = false;
+  let isMouseInsideWhileDragging = false;
+  let currentScrollSpeed = 0;
+  let dragHandleElement: HTMLElement | null = null;
+
+  function scroll() {
+    if (!isDragging) {
+      currentScrollSpeed = 0;
+      return;
+    }
+
+    const scrollableParent = getScrollParent(dragHandleElement!);
+    if (!scrollableParent) return;
+
+    const scrollRegionUp = options.scrollThreshold.up;
+    const scrollRegionDown = window.innerHeight - options.scrollThreshold.down;
+
+    let targetScrollAmount = 0;
+
+    if (isDraggedOutsideWindow === "top") {
+      targetScrollAmount = -maxScrollSpeed * 5;
+    } else if (isDraggedOutsideWindow === "bottom") {
+      targetScrollAmount = maxScrollSpeed * 5;
+    } else if (lastClientY < scrollRegionUp) {
+      const ratio = easeOutQuadAnimation((scrollRegionUp - lastClientY) / options.scrollThreshold.up);
+      targetScrollAmount = -maxScrollSpeed * ratio;
+    } else if (lastClientY > scrollRegionDown) {
+      const ratio = easeOutQuadAnimation((lastClientY - scrollRegionDown) / options.scrollThreshold.down);
+      targetScrollAmount = maxScrollSpeed * ratio;
+    }
+
+    currentScrollSpeed += (targetScrollAmount - currentScrollSpeed) * acceleration;
+
+    if (Math.abs(currentScrollSpeed) > 0.1) {
+      scrollableParent.scrollBy({ top: currentScrollSpeed });
+    }
+
+    scrollAnimationFrame = requestAnimationFrame(scroll) as unknown as null;
+  }
+
+  const handleClick = (event: MouseEvent, view: EditorView) => {
+    handleNodeSelection(event, view, false, options);
+  };
+
+  const handleDragStart = (event: DragEvent, view: EditorView) => {
+    const { listType: listTypeFromDragStart } = handleNodeSelection(event, view, true, options) ?? {};
+    if (listTypeFromDragStart) {
+      listType = listTypeFromDragStart;
+    }
+    isDragging = true;
+    lastClientY = event.clientY;
+    scroll();
+  };
+
+  const handleDragEnd = <TEvent extends DragEvent | FocusEvent>(event: TEvent, view?: EditorView) => {
+    event.preventDefault();
+    isDragging = false;
+    isMouseInsideWhileDragging = false;
+    if (scrollAnimationFrame) {
+      cancelAnimationFrame(scrollAnimationFrame);
+      scrollAnimationFrame = null;
+    }
+
+    view?.dom.classList.remove("dragging");
+  };
+
+  // drag handle view actions
+  const showDragHandle = () => dragHandleElement?.classList.remove("drag-handle-hidden");
+  const hideDragHandle = () => {
+    if (!dragHandleElement?.classList.contains("drag-handle-hidden"))
+      dragHandleElement?.classList.add("drag-handle-hidden");
+  };
+
+  const view = (view: EditorView, sideMenu: HTMLDivElement | null) => {
+    dragHandleElement = createDragHandleElement();
+    dragHandleElement.addEventListener("dragstart", (e) => handleDragStart(e, view));
+    dragHandleElement.addEventListener("dragend", (e) => handleDragEnd(e, view));
+    dragHandleElement.addEventListener("click", (e) => handleClick(e, view));
+    dragHandleElement.addEventListener("contextmenu", (e) => handleClick(e, view));
+
+    const dragOverHandler = (e: DragEvent) => {
+      e.preventDefault();
+      if (isDragging) {
+        lastClientY = e.clientY;
+      }
+    };
+
+    const mouseMoveHandler = (e: MouseEvent) => {
+      if (isMouseInsideWhileDragging) {
+        handleDragEnd(e, view);
+      }
+    };
+
+    const dragLeaveHandler = (e: DragEvent) => {
+      if (e.clientY <= 0 || e.clientX <= 0 || e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) {
+        isMouseInsideWhileDragging = true;
+
+        const windowMiddleY = window.innerHeight / 2;
+
+        if (lastClientY < windowMiddleY) {
+          isDraggedOutsideWindow = "top";
+        } else {
+          isDraggedOutsideWindow = "bottom";
+        }
+      }
+    };
+
+    const dragEnterHandler = () => {
+      isDraggedOutsideWindow = false;
+    };
+
+    window.addEventListener("dragleave", dragLeaveHandler);
+    window.addEventListener("dragenter", dragEnterHandler);
+
+    document.addEventListener("dragover", dragOverHandler);
+    document.addEventListener("mousemove", mouseMoveHandler);
+
+    hideDragHandle();
+
+    sideMenu?.appendChild(dragHandleElement);
+
+    return {
+      destroy: () => {
+        dragHandleElement?.remove?.();
+        dragHandleElement = null;
+        isDragging = false;
+        if (scrollAnimationFrame) {
+          cancelAnimationFrame(scrollAnimationFrame);
+          scrollAnimationFrame = null;
+        }
+        window.removeEventListener("dragleave", dragLeaveHandler);
+        window.removeEventListener("dragenter", dragEnterHandler);
+        document.removeEventListener("dragover", dragOverHandler);
+        document.removeEventListener("mousemove", mouseMoveHandler);
+      },
+    };
+  };
+  const domEvents = {
+    mousemove: () => showDragHandle(),
+    dragenter: (view: EditorView) => {
+      view.dom.classList.add("dragging");
+      hideDragHandle();
+    },
+    drop: (view: EditorView, event: DragEvent) => {
+      view.dom.classList.remove("dragging");
+      hideDragHandle();
+      let droppedNode: Node | null = null;
+      const dropPos = view.posAtCoords({
+        left: event.clientX,
+        top: event.clientY,
+      });
+
+      if (!dropPos) return;
+
+      if (view.state.selection instanceof NodeSelection) {
+        droppedNode = view.state.selection.node;
+      }
+
+      if (!droppedNode) return;
+
+      const resolvedPos = view.state.doc.resolve(dropPos.pos);
+      let isDroppedInsideList = false;
+      let dropDepth = 0;
+
+      // Traverse up the document tree to find if we're inside a list item
+      for (let i = resolvedPos.depth; i > 0; i--) {
+        if (resolvedPos.node(i).type.name === CORE_EXTENSIONS.LIST_ITEM) {
+          isDroppedInsideList = true;
+          dropDepth = i;
+          break;
+        }
+      }
+
+      // Handle nested list items and task items
+      if (droppedNode.type.name === CORE_EXTENSIONS.LIST_ITEM) {
+        let slice = view.state.selection.content();
+        let newFragment = slice.content;
+
+        // If dropping outside a list or at a different depth, adjust the structure
+        if (!isDroppedInsideList || dropDepth !== resolvedPos.depth) {
+          // Flatten the structure if needed
+          newFragment = flattenListStructure(newFragment, view.state.schema);
+        }
+
+        // Wrap in appropriate list type if dropped outside a list
+        if (!isDroppedInsideList) {
+          const listNodeType =
+            listType === "OL" ? view.state.schema.nodes.orderedList : view.state.schema.nodes.bulletList;
+          newFragment = Fragment.from(listNodeType.create(null, newFragment));
+        }
+
+        slice = new Slice(newFragment, slice.openStart, slice.openEnd);
+        view.dragging = { slice, move: event.ctrlKey };
+      }
+    },
+    dragend: (view: EditorView) => {
+      view.dom.classList.remove("dragging");
+    },
+  };
+
+  return {
+    view,
+    domEvents,
+  };
+};
+
+// Helper function to flatten nested list structure
+function flattenListStructure(fragment: Fragment, schema: Schema): Fragment {
+  const result: Node[] = [];
+  fragment.forEach((node) => {
+    if (node.type === schema.nodes.listItem || node.type === schema.nodes.taskItem) {
+      result.push(node);
+      if (
+        node.content.firstChild &&
+        (node.content.firstChild.type === schema.nodes.bulletList ||
+          node.content.firstChild.type === schema.nodes.orderedList)
+      ) {
+        const subList = node.content.firstChild;
+        const flattened = flattenListStructure(subList.content, schema);
+        flattened.forEach((subNode) => result.push(subNode));
+      }
+    }
+  });
+  return Fragment.from(result);
+}
+
+const handleNodeSelection = (
+  event: MouseEvent | DragEvent,
+  view: EditorView,
+  isDragStart: boolean,
+  options: SideMenuPluginProps
+) => {
+  let listType = "";
+  view.focus();
+
+  const node = nodeDOMAtCoords({
+    x: event.clientX + 50 + options.dragHandleWidth,
+    y: event.clientY,
+  });
+
+  if (!(node instanceof Element)) return;
+
+  let draggedNodePos = nodePosAtDOM(node, view, options);
+  if (draggedNodePos == null || draggedNodePos < 0) return;
+
+  if (node.matches("table")) {
+    draggedNodePos = draggedNodePos - 2;
+  } else if (node.matches("blockquote")) {
+    draggedNodePos = nodePosAtDOMForBlockQuotes(node, view);
+    if (draggedNodePos === null || draggedNodePos === undefined) return;
+  } else {
+    // Resolve the position to get the parent node
+    const $pos = view.state.doc.resolve(draggedNodePos);
+
+    // If it's a nested list item or task item, move up to the item level
+    if (
+      [CORE_EXTENSIONS.LIST_ITEM, CORE_EXTENSIONS.TASK_ITEM].includes($pos.parent.type.name as CORE_EXTENSIONS) &&
+      $pos.depth > 1
+    ) {
+      draggedNodePos = $pos.before($pos.depth);
+    }
+  }
+
+  const docSize = view.state.doc.content.size;
+  draggedNodePos = Math.max(0, Math.min(draggedNodePos, docSize));
+
+  // Use NodeSelection to select the node at the calculated position
+  const nodeSelection = NodeSelection.create(view.state.doc, draggedNodePos);
+
+  // Dispatch the transaction to update the selection
+  view.dispatch(view.state.tr.setSelection(nodeSelection));
+
+  if (isDragStart) {
+    // Additional logic for drag start
+    if (event instanceof DragEvent && !event.dataTransfer) return;
+
+    if (
+      [CORE_EXTENSIONS.LIST_ITEM, CORE_EXTENSIONS.TASK_ITEM].includes(nodeSelection.node.type.name as CORE_EXTENSIONS)
+    ) {
+      listType = node.closest("ol, ul")?.tagName || "";
+    }
+
+    const slice = view.state.selection.content();
+    const { dom, text } = view.serializeForClipboard(slice);
+
+    if (event instanceof DragEvent && event.dataTransfer) {
+      event.dataTransfer.clearData();
+      event.dataTransfer.setData("text/html", dom.innerHTML);
+      event.dataTransfer.setData("text/plain", text);
+      event.dataTransfer.effectAllowed = "copyMove";
+      event.dataTransfer.setDragImage(node, 0, 0);
+    }
+
+    view.dragging = { slice, move: event.ctrlKey };
+  }
+
+  return { listType };
+};
diff --git a/packages/editor/src/plugins/drop.ts b/packages/editor/src/plugins/drop.ts
new file mode 100644
index 0000000..e0e9057
--- /dev/null
+++ b/packages/editor/src/plugins/drop.ts
@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+// constants
+import { ACCEPTED_ATTACHMENT_MIME_TYPES, ACCEPTED_IMAGE_MIME_TYPES } from "@/constants/config";
+// types
+import type { TEditorCommands, TExtensions } from "@/types";
+
+type Props = {
+  disabledExtensions?: TExtensions[];
+  flaggedExtensions?: TExtensions[];
+  editor: Editor;
+};
+
+export const DropHandlerPlugin = (props: Props): Plugin => {
+  const { disabledExtensions, flaggedExtensions, editor } = props;
+
+  return new Plugin({
+    key: new PluginKey("drop-handler-plugin"),
+    props: {
+      handlePaste: (view, event) => {
+        if (
+          editor.isEditable &&
+          event.clipboardData &&
+          event.clipboardData.files &&
+          event.clipboardData.files.length > 0
+        ) {
+          event.preventDefault();
+          const files = Array.from(event.clipboardData.files);
+          const acceptedFiles = files.filter(
+            (f) => ACCEPTED_IMAGE_MIME_TYPES.includes(f.type) || ACCEPTED_ATTACHMENT_MIME_TYPES.includes(f.type)
+          );
+
+          if (acceptedFiles.length) {
+            const pos = view.state.selection.from;
+            insertFilesSafely({
+              disabledExtensions,
+              flaggedExtensions,
+              editor,
+              files: acceptedFiles,
+              initialPos: pos,
+              event: "drop",
+            });
+          }
+          return true;
+        }
+        return false;
+      },
+      handleDrop: (view, event, _slice, moved) => {
+        if (
+          editor.isEditable &&
+          !moved &&
+          event.dataTransfer &&
+          event.dataTransfer.files &&
+          event.dataTransfer.files.length > 0
+        ) {
+          event.preventDefault();
+          const files = Array.from(event.dataTransfer.files);
+          const acceptedFiles = files.filter(
+            (f) => ACCEPTED_IMAGE_MIME_TYPES.includes(f.type) || ACCEPTED_ATTACHMENT_MIME_TYPES.includes(f.type)
+          );
+
+          if (acceptedFiles.length) {
+            const coordinates = view.posAtCoords({
+              left: event.clientX,
+              top: event.clientY,
+            });
+
+            if (coordinates) {
+              const pos = coordinates.pos;
+              insertFilesSafely({
+                disabledExtensions,
+                editor,
+                files: acceptedFiles,
+                initialPos: pos,
+                event: "drop",
+              });
+            }
+            return true;
+          }
+        }
+        return false;
+      },
+    },
+  });
+};
+
+type InsertFilesSafelyArgs = {
+  disabledExtensions?: TExtensions[];
+  flaggedExtensions?: TExtensions[];
+  editor: Editor;
+  event: "insert" | "drop";
+  files: File[];
+  initialPos: number;
+  type?: Extract<TEditorCommands, "attachment" | "image">;
+};
+
+export const insertFilesSafely = async (args: InsertFilesSafelyArgs) => {
+  const { disabledExtensions, editor, event, files, initialPos, type } = args;
+  let pos = initialPos;
+
+  for (const file of files) {
+    // safe insertion
+    const docSize = editor.state.doc.content.size;
+    pos = Math.min(pos, docSize);
+
+    let fileType: "image" | "attachment" | null = null;
+
+    try {
+      if (type) {
+        if (["image", "attachment"].includes(type)) fileType = type;
+        else throw new Error("Wrong file type passed");
+      } else {
+        if (ACCEPTED_IMAGE_MIME_TYPES.includes(file.type)) fileType = "image";
+        else if (ACCEPTED_ATTACHMENT_MIME_TYPES.includes(file.type)) fileType = "attachment";
+      }
+      // insert file depending on the type at the current position
+      if (fileType === "image" && !disabledExtensions?.includes("image")) {
+        editor.commands.insertImageComponent({
+          file,
+          pos,
+          event,
+        });
+      } else if (fileType === "attachment") {
+      }
+    } catch (error) {
+      console.error(`Error while ${event}ing file:`, error);
+    }
+
+    // Move to the next position
+    pos += 1;
+  }
+};
diff --git a/packages/editor/src/plugins/file/delete.ts b/packages/editor/src/plugins/file/delete.ts
new file mode 100644
index 0000000..f15287d
--- /dev/null
+++ b/packages/editor/src/plugins/file/delete.ts
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import type { EditorState, Transaction } from "@tiptap/pm/state";
+// constants
+import { CORE_EDITOR_META } from "@/constants/meta";
+// plane editor imports
+import { NODE_FILE_MAP } from "@/constants/utility";
+// types
+import type { TFileHandler } from "@/types";
+// local imports
+import type { NodeFileMapType } from "../../constants/utility";
+import type { TFileNode } from "./types";
+
+const DELETE_PLUGIN_KEY = new PluginKey("delete-utility");
+
+export const TrackFileDeletionPlugin = (editor: Editor, deleteHandler: TFileHandler["delete"]): Plugin =>
+  new Plugin({
+    key: DELETE_PLUGIN_KEY,
+    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+      const newFileSources: {
+        [nodeType: string]: Set<string> | undefined;
+      } = {};
+      if (!transactions.some((tr) => tr.docChanged)) return null;
+      if (transactions.some((tr) => tr.getMeta(CORE_EDITOR_META.SKIP_FILE_DELETION))) return null;
+
+      newState.doc.descendants((node) => {
+        const nodeType = node.type.name as keyof NodeFileMapType;
+        const nodeFileSetDetails = NODE_FILE_MAP[nodeType];
+        if (nodeFileSetDetails) {
+          if (newFileSources[nodeType]) {
+            newFileSources[nodeType].add(node.attrs.src);
+          } else {
+            newFileSources[nodeType] = new Set([node.attrs.src]);
+          }
+        }
+      });
+
+      const removedFiles: TFileNode[] = [];
+
+      // iterate through all the nodes in the old state
+      oldState.doc.descendants((node) => {
+        const nodeType = node.type.name as keyof NodeFileMapType;
+        const isAValidNode = NODE_FILE_MAP[nodeType];
+        // if the node doesn't match, then return as no point in checking
+        if (!isAValidNode) return;
+        // Check if the node has been deleted or replaced
+        if (!newFileSources[nodeType]?.has(node.attrs.src)) {
+          removedFiles.push(node as TFileNode);
+        }
+      });
+
+      removedFiles.forEach(async (node) => {
+        const nodeType = node.type.name as keyof NodeFileMapType;
+        const src = node.attrs.src;
+        const nodeFileSetDetails = NODE_FILE_MAP[nodeType];
+        if (!nodeFileSetDetails || !src) return;
+        try {
+          editor.storage[nodeType]?.[nodeFileSetDetails.fileSetName]?.set(src, true);
+          // update assets list storage value
+          editor.commands.updateAssetsList?.({
+            idToRemove: node.attrs.id,
+          });
+          await deleteHandler(src);
+        } catch (error) {
+          console.error("Error deleting file via delete utility plugin:", error);
+        }
+      });
+
+      return null;
+    },
+  });
diff --git a/packages/editor/src/plugins/file/restore.ts b/packages/editor/src/plugins/file/restore.ts
new file mode 100644
index 0000000..7fdfa6b
--- /dev/null
+++ b/packages/editor/src/plugins/file/restore.ts
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import type { EditorState, Transaction } from "@tiptap/pm/state";
+// plane imports
+import { CORE_EXTENSIONS } from "@plane/utils";
+// helpers
+import { CORE_ASSETS_META_DATA_RECORD } from "@/helpers/assets";
+// plane editor imports
+import { NODE_FILE_MAP } from "@/constants/utility";
+// types
+import type { TFileHandler } from "@/types";
+// local imports
+import type { NodeFileMapType } from "../../constants/utility";
+import type { TFileNode } from "./types";
+
+const RESTORE_PLUGIN_KEY = new PluginKey("restore-utility");
+
+export const TrackFileRestorationPlugin = (editor: Editor, restoreHandler: TFileHandler["restore"]): Plugin =>
+  new Plugin({
+    key: RESTORE_PLUGIN_KEY,
+    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+      if (!transactions.some((tr) => tr.docChanged)) return null;
+
+      const oldFileSources: {
+        [key: string]: Set<string> | undefined;
+      } = {};
+      oldState.doc.descendants((node) => {
+        const nodeType = node.type.name as keyof NodeFileMapType;
+        const nodeFileSetDetails = NODE_FILE_MAP[nodeType];
+        if (nodeFileSetDetails) {
+          if (oldFileSources[nodeType]) {
+            oldFileSources[nodeType].add(node.attrs.src);
+          } else {
+            oldFileSources[nodeType] = new Set([node.attrs.src]);
+          }
+        }
+      });
+
+      transactions.forEach(() => {
+        const addedFiles: TFileNode[] = [];
+
+        newState.doc.descendants((node, pos) => {
+          const nodeType = node.type.name as keyof NodeFileMapType;
+          const isAValidNode = NODE_FILE_MAP[nodeType];
+          // if the node doesn't match, then return as no point in checking
+          if (!isAValidNode) return;
+          if (pos < 0 || pos > newState.doc.content.size) return;
+          if (oldFileSources[nodeType]?.has(node.attrs.src)) return;
+          // update assets list storage value
+          const assetMetaData = CORE_ASSETS_META_DATA_RECORD[nodeType]?.(node.attrs);
+          if (assetMetaData) {
+            editor.commands.updateAssetsList?.({
+              asset: assetMetaData,
+            });
+          }
+          // if the src is just a id (private bucket), then we don't need to handle restore from here but
+          // only while it fails to load
+          if (nodeType === CORE_EXTENSIONS.CUSTOM_IMAGE && !node.attrs.src?.startsWith("http")) return;
+          addedFiles.push(node as TFileNode);
+        });
+
+        addedFiles.forEach(async (node) => {
+          const nodeType = node.type.name as keyof NodeFileMapType;
+          const src = node.attrs.src;
+          const nodeFileSetDetails = NODE_FILE_MAP[nodeType];
+          if (!nodeFileSetDetails) return;
+          const extensionFileSetStorage = editor.storage[nodeType]?.[nodeFileSetDetails.fileSetName];
+          const wasDeleted = extensionFileSetStorage?.get(src);
+          if (!nodeFileSetDetails || !src) return;
+          if (wasDeleted === undefined) {
+            extensionFileSetStorage?.set(src, false);
+          } else if (wasDeleted === true) {
+            try {
+              await restoreHandler(src);
+              extensionFileSetStorage?.set(src, false);
+            } catch (error) {
+              console.error("Error restoring file via restore utility plugin:", error);
+            }
+          }
+        });
+      });
+      return null;
+    },
+  });
diff --git a/packages/editor/src/plugins/file/root.ts b/packages/editor/src/plugins/file/root.ts
new file mode 100644
index 0000000..9b68513
--- /dev/null
+++ b/packages/editor/src/plugins/file/root.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import type { Plugin } from "@tiptap/pm/state";
+// types
+import type { TFileHandler } from "@/types";
+// local imports
+import { TrackFileDeletionPlugin } from "./delete";
+import { TrackFileRestorationPlugin } from "./restore";
+
+type TArgs = {
+  editor: Editor;
+  fileHandler: TFileHandler;
+  isEditable: boolean;
+};
+
+export const FilePlugins = (args: TArgs): Plugin[] => {
+  const { editor, fileHandler, isEditable } = args;
+
+  return [
+    ...(isEditable && "delete" in fileHandler ? [TrackFileDeletionPlugin(editor, fileHandler.delete)] : []),
+    TrackFileRestorationPlugin(editor, fileHandler.restore),
+  ];
+};
diff --git a/packages/editor/src/plugins/file/types.ts b/packages/editor/src/plugins/file/types.ts
new file mode 100644
index 0000000..9065fe6
--- /dev/null
+++ b/packages/editor/src/plugins/file/types.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+
+export type TFileNode = ProseMirrorNode & {
+  attrs: {
+    src: string;
+    id: string;
+  };
+};
diff --git a/packages/editor/src/plugins/highlight.ts b/packages/editor/src/plugins/highlight.ts
new file mode 100644
index 0000000..06a243c
--- /dev/null
+++ b/packages/editor/src/plugins/highlight.ts
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+type NodeHighlightState = {
+  highlightedNodeId: string | null;
+  decorations: DecorationSet;
+};
+
+type NodeHighlightMeta = {
+  nodeId?: string | null;
+};
+
+export const nodeHighlightPluginKey = new PluginKey<NodeHighlightState>("nodeHighlight");
+
+const buildDecorations = (doc: Parameters<typeof DecorationSet.create>[0], highlightedNodeId: string | null) => {
+  if (!highlightedNodeId) {
+    return DecorationSet.empty;
+  }
+
+  const decorations: Decoration[] = [];
+  const highlightClassNames = ["bg-accent-primary/20", "transition-all", "duration-300", "rounded"];
+
+  doc.descendants((node, pos) => {
+    // Check if this node has the id we're looking for
+    if (node.attrs && node.attrs.id === highlightedNodeId) {
+      const decorationAttrs: Record<string, string> = {
+        "data-node-highlighted": "true",
+        class: highlightClassNames.join(" "),
+      };
+
+      // For text nodes, highlight the inline content
+      if (node.isText) {
+        decorations.push(
+          Decoration.inline(pos, pos + node.nodeSize, decorationAttrs, {
+            inclusiveStart: true,
+            inclusiveEnd: true,
+          })
+        );
+      } else {
+        // For block nodes, add a node decoration
+        decorations.push(Decoration.node(pos, pos + node.nodeSize, decorationAttrs));
+      }
+
+      return false; // Stop searching once we found the node
+    }
+
+    return true;
+  });
+
+  return DecorationSet.create(doc, decorations);
+};
+
+export const NodeHighlightPlugin = () =>
+  new Plugin<NodeHighlightState>({
+    key: nodeHighlightPluginKey,
+    state: {
+      init: () => ({
+        highlightedNodeId: null,
+        decorations: DecorationSet.empty,
+      }),
+      apply: (tr, value, _oldState, newState) => {
+        let highlightedNodeId = value.highlightedNodeId;
+        let decorations = value.decorations;
+
+        const meta = tr.getMeta(nodeHighlightPluginKey) as NodeHighlightMeta | undefined;
+        let shouldRecalculate = tr.docChanged;
+
+        if (meta) {
+          if (meta.nodeId !== undefined) {
+            highlightedNodeId = typeof meta.nodeId === "string" && meta.nodeId.length > 0 ? meta.nodeId : null;
+            shouldRecalculate = true;
+          }
+        }
+
+        if (shouldRecalculate) {
+          decorations = buildDecorations(newState.doc, highlightedNodeId);
+        } else if (tr.docChanged) {
+          decorations = decorations.map(tr.mapping, newState.doc);
+        }
+
+        return {
+          highlightedNodeId,
+          decorations,
+        };
+      },
+    },
+    props: {
+      decorations(state) {
+        return nodeHighlightPluginKey.getState(state)?.decorations ?? DecorationSet.empty;
+      },
+    },
+  });
diff --git a/packages/editor/src/plugins/markdown-clipboard.ts b/packages/editor/src/plugins/markdown-clipboard.ts
new file mode 100644
index 0000000..efa5c76
--- /dev/null
+++ b/packages/editor/src/plugins/markdown-clipboard.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+// plane imports
+import { convertHTMLToMarkdown } from "@plane/utils";
+import type { TCustomComponentsMetaData } from "@plane/utils";
+
+type TArgs = {
+  editor: Editor;
+  getEditorMetaData: (htmlContent: string) => TCustomComponentsMetaData;
+};
+
+export const MarkdownClipboardPlugin = (args: TArgs): Plugin => {
+  const { editor, getEditorMetaData } = args;
+
+  return new Plugin({
+    key: new PluginKey("markdownClipboard"),
+    props: {
+      handleDOMEvents: {
+        copy: (view, event) => {
+          try {
+            event.preventDefault();
+            event.clipboardData?.clearData();
+            // editor meta data
+            const editorHTML = editor.getHTML();
+            const metaData = getEditorMetaData(editorHTML);
+            // meta data from selection
+            const clipboardHTML = view.serializeForClipboard(view.state.selection.content()).dom.innerHTML;
+            // convert to markdown
+            const markdown = convertHTMLToMarkdown({
+              description_html: clipboardHTML,
+              metaData,
+            });
+            event.clipboardData?.setData("text/plain", markdown);
+            event.clipboardData?.setData("text/html", clipboardHTML);
+            event.clipboardData?.setData("text/plane-editor-html", clipboardHTML);
+            return true;
+          } catch (error) {
+            console.error("Failed to copy markdown content to clipboard:", error);
+            return false;
+          }
+        },
+      },
+    },
+  });
+};
diff --git a/packages/editor/src/props.ts b/packages/editor/src/props.ts
new file mode 100644
index 0000000..51f9b93
--- /dev/null
+++ b/packages/editor/src/props.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EditorProps } from "@tiptap/pm/view";
+// plane utils
+import { cn } from "@plane/utils";
+// helpers
+import { processAssetDuplication } from "@/helpers/paste-asset";
+
+type TArgs = {
+  editorClassName: string;
+};
+
+export const CoreEditorProps = (props: TArgs): EditorProps => {
+  const { editorClassName } = props;
+
+  return {
+    attributes: {
+      class: cn(
+        "prose-brand prose-headings:font-display font-default max-w-full prose focus:outline-none",
+        editorClassName
+      ),
+    },
+    handleDOMEvents: {
+      keydown: (_view, event) => {
+        // prevent default event listeners from firing when slash command is active
+        if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
+          const slashCommand = document.querySelector("#slash-command");
+          if (slashCommand) {
+            return true;
+          }
+        }
+      },
+    },
+    handlePaste: (view, event) => {
+      if (!event.clipboardData) return false;
+
+      const htmlContent = event.clipboardData.getData("text/plane-editor-html");
+      if (!htmlContent) return false;
+
+      const { processedHtml } = processAssetDuplication(htmlContent);
+      view.pasteHTML(processedHtml);
+      return true;
+    },
+  };
+};
diff --git a/packages/editor/src/styles/drag-drop.css b/packages/editor/src/styles/drag-drop.css
new file mode 100644
index 0000000..7ccb761
--- /dev/null
+++ b/packages/editor/src/styles/drag-drop.css
@@ -0,0 +1,117 @@
+/* side menu */
+#editor-side-menu {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  transition: opacity 0.2s ease 0.2s;
+
+  &.side-menu-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+/* end side menu */
+
+/* drag handle */
+#drag-handle {
+  opacity: 1;
+
+  &.drag-handle-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+/* end drag handle */
+
+/* ai handle */
+#ai-handle {
+  opacity: 1;
+
+  &.handle-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+/* end ai handle */
+
+.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(.node-imageComponent):not(.node-image):not(.table-wrapper) {
+  position: relative;
+  cursor: grab;
+  outline: none !important;
+  box-shadow: none;
+
+  --horizontal-offset: 5px;
+
+  &:has(.issue-embed),
+  &.table-wrapper {
+    --horizontal-offset: 0px;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: calc(-1 * var(--horizontal-offset));
+    height: 100%;
+    width: calc(100% + (var(--horizontal-offset) * 2));
+    background-color: --alpha(var(--background-color-accent-primary) / 20%);
+    border-radius: 4px;
+    pointer-events: none;
+  }
+
+  &.node-imageComponent,
+  &.node-image,
+  &.table-wrapper {
+    --horizontal-offset: 0px;
+
+    &::after {
+      background-color: --alpha(var(--background-color-surface-1) / 20%);
+    }
+  }
+}
+
+/* for targeting the task list items */
+li.ProseMirror-selectednode:not(.dragging)[data-checked]::after {
+  margin-left: -5px;
+}
+
+/* for targeting the unordered list items */
+ul > li.ProseMirror-selectednode:not(.dragging)::after {
+  margin-left: -10px; /* Adjust as needed */
+}
+
+/* Initialize a counter for the ordered list */
+ol {
+  counter-reset: item;
+}
+
+/* for targeting the ordered list items */
+ol > li.ProseMirror-selectednode:not(.dragging)::after {
+  counter-increment: item;
+  margin-left: -18px;
+}
+
+/* for targeting the ordered list items after the 9th item */
+ol > li:nth-child(n + 10).ProseMirror-selectednode:not(.dragging)::after {
+  margin-left: -25px;
+}
+
+/* for targeting the ordered list items after the 99th item */
+ol > li:nth-child(n + 100).ProseMirror-selectednode:not(.dragging)::after {
+  margin-left: -35px;
+}
+
+.ProseMirror node-image,
+.ProseMirror node-imageComponent {
+  transition: filter 0.1s ease-in-out;
+  cursor: pointer;
+
+  &:hover {
+    filter: brightness(90%);
+  }
+
+  &.ProseMirror-selectednode {
+    filter: brightness(90%);
+  }
+}
diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
new file mode 100644
index 0000000..a842193
--- /dev/null
+++ b/packages/editor/src/styles/editor.css
@@ -0,0 +1,508 @@
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  outline: none !important;
+  cursor: text;
+  font-family: var(--font-style);
+  font-size: var(--font-size-regular);
+  font-weight: 400;
+  color: inherit;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  appearance: textfield;
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+/* Placeholder only for the first line in an empty editor. */
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-placeholder);
+  pointer-events: none;
+  height: 0;
+}
+
+/* Display Placeholders on every new line. */
+.ProseMirror p.is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-placeholder);
+  pointer-events: none;
+  height: 0;
+}
+
+.ProseMirror li blockquote {
+  margin-top: 10px;
+  padding-inline-start: 1em;
+}
+
+/* block quotes */
+.ProseMirror blockquote {
+  font-style: normal;
+  font-weight: 400;
+  @apply border-l-[3px] border-strong;
+}
+
+.ProseMirror blockquote p::before,
+.ProseMirror blockquote p::after {
+  display: none;
+}
+/* end block quotes */
+
+.ProseMirror code::before,
+.ProseMirror code::after {
+  display: none;
+}
+
+/* Custom image styles */
+.ProseMirror img {
+  margin-top: 0 !important;
+  margin-bottom: 0;
+
+  &:not(.read-only-image):not(.loading-image) {
+    transition: filter 0.1s ease-in-out;
+
+    &:hover {
+      cursor: pointer;
+      filter: brightness(90%);
+    }
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid var(--border-color-accent-strong);
+      filter: brightness(90%);
+    }
+  }
+}
+
+/* Custom gap cursor styles  */
+.ProseMirror-gapcursor::after {
+  @apply border-t! border-strong!;
+}
+
+/* to-do list */
+ul[data-type="taskList"] li {
+  font-size: var(--font-size-list);
+  line-height: 1.5;
+}
+
+ul[data-type="taskList"] li > label {
+  position: absolute;
+  left: -5px;
+  margin: 0.1rem 0.15rem 0 0;
+  user-select: none;
+}
+
+ul[data-type="taskList"] li > div {
+  margin-left: 1.15rem;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  @apply border! border-strong!;
+  outline: none;
+  border-radius: 2px;
+  transform: scale(1.05);
+}
+
+.ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
+  background-color: color-mix(in srgb, var(--text-color-primary) 10%, transparent);
+}
+
+.ProseMirror[contenteditable="false"] input[type="checkbox"] {
+  pointer-events: none;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
+  background-color: var(--background-color-accent-primary) !important;
+  border-color: var(--border-color-accent-strong) !important;
+  color: white !important;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked:hover {
+  background-color: var(--background-color-accent-primary-hover) !important;
+  border-color: var(--border-color-accent-strong) !important;
+}
+
+@media screen and (max-width: 768px) {
+  ul[data-type="taskList"] li > label {
+    margin-right: 0.5rem;
+  }
+}
+
+/* the p tag just after the ul tag */
+ul[data-type="taskList"] + p.editor-paragraph-block {
+  margin-top: 0.4rem !important;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+  position: relative;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  margin: 0;
+  cursor: pointer;
+  width: 0.8rem;
+  height: 0.8rem;
+  position: relative;
+  @apply border-md border-subtle-1;
+  margin-right: 0.2rem;
+  margin-top: 0.15rem;
+
+  &:active {
+    background-color: var(--background-color-layer-1);
+  }
+
+  /* check sign */
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.5em;
+    height: 0.5em;
+    transform: scale(0);
+    transform-origin: center;
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 1em 1em;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  }
+
+  &:checked::before {
+    transform: scale(1) translate(-50%, -50%);
+  }
+}
+
+ul[data-type="taskList"] li > div {
+  & > p.editor-paragraph-block {
+    margin-top: 10px;
+    transition: color 0.2s ease;
+  }
+
+  [data-text-color] {
+    transition: opacity 0.2s ease;
+  }
+}
+
+ul[data-type="taskList"] li[data-checked="true"] {
+  & > div > p.editor-paragraph-block {
+    color: var(--color-placeholder);
+  }
+
+  [data-text-color] {
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+  }
+}
+/* end to-do list */
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+  max-width: 800px !important;
+}
+
+.fade-in {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
+}
+
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.ProseMirror table * .is-empty::before {
+  opacity: 0;
+}
+
+/* code block, inline code */
+.ProseMirror pre {
+  font-family: JetBrainsMono, monospace;
+  tab-size: 2;
+}
+
+.ProseMirror pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+}
+
+.ProseMirror code {
+  font-size: var(--font-size-code);
+}
+/* end code block, inline code */
+
+div[data-type="horizontalRule"] {
+  line-height: 0;
+  padding: var(--divider-padding-top) 0 var(--divider-padding-bottom) 0;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  & > div {
+    @apply border-b-lg border-subtle-1;
+  }
+}
+
+/* Cursor styles for the inline code blocks */
+@keyframes blink {
+  49% {
+    border-color: unset;
+  }
+
+  50% {
+    border-color: transparent;
+  }
+
+  99% {
+    border-color: transparent;
+  }
+}
+
+.no-cursor {
+  caret-color: transparent;
+}
+
+div:focus .fake-cursor,
+span:focus .fake-cursor {
+  margin-right: -1px;
+  border-left-width: 1.5px;
+  border-left-style: solid;
+  animation: blink 1s;
+  animation-iteration-count: infinite;
+  position: relative;
+  z-index: 1;
+}
+
+/* numbered, bulleted and to-do lists spacing */
+.prose ol:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+.prose
+  ul:not([data-type="taskList"]):where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+.prose ul[data-type="taskList"]:where(.prose > :first-child) {
+  margin-top: 0.25rem !important;
+  margin-bottom: 1px !important;
+}
+
+.prose ol:not(:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))),
+.prose
+  ul:not([data-type="taskList"]):not(
+    :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))
+  ),
+.prose ul[data-type="taskList"]:not(:where(.prose > :first-child)) {
+  margin-top: calc(0.25rem + 3px) !important;
+  margin-bottom: 1px !important;
+}
+
+ol ol,
+ol ul:not([data-type="taskList"]),
+ul:not([data-type="taskList"]) ul:not([data-type="taskList"]),
+ul:not([data-type="taskList"]) ol {
+  margin-top: 0.45rem !important;
+}
+
+ul[data-type="taskList"] ul[data-type="taskList"] {
+  margin-top: 0.6rem;
+}
+/* end numbered, bulleted and to-do lists spacing */
+
+h1.editor-heading-block,
+h2.editor-heading-block,
+h3.editor-heading-block,
+h4.editor-heading-block,
+h5.editor-heading-block,
+h6.editor-heading-block,
+p.editor-paragraph-block {
+  margin: 0 !important;
+}
+
+/* tailwind typography */
+.prose :where(h1.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-1-padding-top);
+  }
+
+  padding-bottom: var(--heading-1-padding-bottom);
+  font-size: var(--font-size-h1) !important;
+  line-height: var(--line-height-h1) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h2.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-2-padding-top);
+  }
+
+  padding-bottom: var(--heading-2-padding-bottom);
+  font-size: var(--font-size-h2) !important;
+  line-height: var(--line-height-h2) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h3.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-3-padding-top);
+  }
+
+  padding-bottom: var(--heading-3-padding-bottom);
+  font-size: var(--font-size-h3) !important;
+  line-height: var(--line-height-h3) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h4.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-4-padding-top);
+  }
+
+  padding-bottom: var(--heading-4-padding-bottom);
+  font-size: var(--font-size-h4) !important;
+  line-height: var(--line-height-h4) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h5.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-5-padding-top);
+  }
+
+  padding-bottom: var(--heading-5-padding-bottom);
+  font-size: var(--font-size-h5) !important;
+  line-height: var(--line-height-h5) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(h6.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:not(:first-child) {
+    padding-top: var(--heading-6-padding-top);
+  }
+
+  padding-bottom: var(--heading-6-padding-bottom);
+  font-size: var(--font-size-h6) !important;
+  line-height: var(--line-height-h6) !important;
+  font-weight: 600 !important;
+}
+
+.prose :where(p.editor-paragraph-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:not(:first-child) {
+    padding-top: var(--paragraph-padding-top);
+  }
+
+  &:not(td p.editor-paragraph-block, th p.editor-paragraph-block) {
+    &:last-child {
+      padding-bottom: var(--paragraph-padding-bottom);
+    }
+
+    &:not(:last-child) {
+      padding-bottom: var(--paragraph-padding-between);
+    }
+  }
+
+  font-size: var(--font-size-regular) !important;
+  line-height: var(--line-height-regular) !important;
+}
+
+p.editor-paragraph-block + p.editor-paragraph-block {
+  padding-top: var(--paragraph-padding-between) !important;
+}
+
+.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p.editor-paragraph-block,
+.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p.editor-paragraph-block {
+  font-size: var(--font-size-list);
+  line-height: var(--line-height-list);
+}
+
+.prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+}
+/* end tailwind typography */
+
+/* text colors */
+[data-text-color="gray"] {
+  color: var(--editor-colors-gray-text);
+}
+[data-text-color="peach"] {
+  color: var(--editor-colors-peach-text);
+}
+[data-text-color="pink"] {
+  color: var(--editor-colors-pink-text);
+}
+[data-text-color="orange"] {
+  color: var(--editor-colors-orange-text);
+}
+[data-text-color="green"] {
+  color: var(--editor-colors-green-text);
+}
+[data-text-color="light-blue"] {
+  color: var(--editor-colors-light-blue-text);
+}
+[data-text-color="dark-blue"] {
+  color: var(--editor-colors-dark-blue-text);
+}
+[data-text-color="purple"] {
+  color: var(--editor-colors-purple-text);
+}
+/* end text colors */
+
+/* background colors */
+[data-background-color="gray"] {
+  background-color: var(--editor-colors-gray-background);
+}
+[data-background-color="peach"] {
+  background-color: var(--editor-colors-peach-background);
+}
+[data-background-color="pink"] {
+  background-color: var(--editor-colors-pink-background);
+}
+[data-background-color="orange"] {
+  background-color: var(--editor-colors-orange-background);
+}
+[data-background-color="green"] {
+  background-color: var(--editor-colors-green-background);
+}
+[data-background-color="light-blue"] {
+  background-color: var(--editor-colors-light-blue-background);
+}
+[data-background-color="dark-blue"] {
+  background-color: var(--editor-colors-dark-blue-background);
+}
+[data-background-color="purple"] {
+  background-color: var(--editor-colors-purple-background);
+}
+/* end background colors */
+
+/* emoji styles */
+span[data-name][data-type="emoji"] img {
+  display: inline !important;
+  vertical-align: middle;
+  margin: 0;
+  padding: 0;
+  max-width: 1.25em;
+  max-height: 1.25em;
+}
+
+/* touch device styles */
+.touch-select-none {
+  user-select: none;
+  -webkit-user-select: none;
+}
diff --git a/packages/editor/src/styles/github-dark.css b/packages/editor/src/styles/github-dark.css
new file mode 100644
index 0000000..9374de4
--- /dev/null
+++ b/packages/editor/src/styles/github-dark.css
@@ -0,0 +1,85 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: #ff7b72;
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: #d2a8ff;
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: #79c0ff;
+}
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: #a5d6ff;
+}
+.hljs-built_in,
+.hljs-symbol {
+  color: #ffa657;
+}
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: #8b949e;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: #7ee787;
+}
+.hljs-subst {
+  color: #c9d1d9;
+}
+.hljs-section {
+  color: #1f6feb;
+  font-weight: 700;
+}
+.hljs-bullet {
+  color: #f2cc60;
+}
+.hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #c9d1d9;
+  font-weight: 700;
+}
+.hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
diff --git a/packages/editor/src/styles/index.css b/packages/editor/src/styles/index.css
new file mode 100644
index 0000000..3ec7431
--- /dev/null
+++ b/packages/editor/src/styles/index.css
@@ -0,0 +1,6 @@
+@import "./variables.css";
+@import "./editor.css";
+@import "./table.css";
+@import "./github-dark.css";
+@import "./drag-drop.css";
+@import "./title-editor.css";
diff --git a/packages/editor/src/styles/table.css b/packages/editor/src/styles/table.css
new file mode 100644
index 0000000..5066204
--- /dev/null
+++ b/packages/editor/src/styles/table.css
@@ -0,0 +1,211 @@
+.table-wrapper {
+  overflow-x: auto;
+  padding-bottom: 26px;
+
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    margin: 0.5rem 0 0 0;
+    @apply relative border border-subtle;
+    width: 100%;
+
+    td,
+    th {
+      min-width: 1em;
+      @apply border border-strong;
+      padding: 7px 10px;
+      vertical-align: top;
+      box-sizing: border-box;
+      position: relative;
+      transition: background-color 0.3s ease;
+
+      > * {
+        margin-bottom: 0;
+      }
+
+      /* Selected cell outline */
+      &.selectedCell:not(.content-hidden) {
+        user-select: none;
+
+        &::after {
+          position: absolute;
+          content: "";
+          top: -1px;
+          left: -1px;
+          height: calc(100% + 2px);
+          width: calc(100% + 2px);
+        }
+
+        &.selectedCell-border-top::after {
+          border-top: 2px solid var(--border-color-accent-strong);
+        }
+
+        &.selectedCell-border-left::after {
+          border-left: 2px solid var(--border-color-accent-strong);
+        }
+
+        &.selectedCell-border-bottom::after {
+          border-bottom: 2px solid var(--border-color-accent-strong);
+        }
+
+        &.selectedCell-border-right::after {
+          border-right: 2px solid var(--border-color-accent-strong);
+        }
+      }
+      /* End selected cell outline */
+
+      .table-col-handle-container,
+      .table-row-handle-container {
+        & > button {
+          opacity: 0;
+        }
+      }
+
+      &:hover {
+        .table-col-handle-container,
+        .table-row-handle-container {
+          & > button {
+            opacity: 1;
+          }
+        }
+      }
+
+      .ProseMirror-widget + * {
+        padding-top: 0 !important;
+      }
+
+      &.content-hidden > * {
+        visibility: hidden;
+      }
+    }
+
+    th {
+      @apply font-medium text-left;
+    }
+
+    tr[background="none"],
+    tr:not([background]) {
+      th {
+        @apply bg-layer-3;
+      }
+    }
+
+    .table-drop-marker {
+      background-color: var(--border-color-accent-strong);
+      @apply absolute z-10;
+
+      &.hidden {
+        @apply hidden;
+      }
+    }
+
+    .table-col-drag-marker,
+    .table-row-drag-marker {
+      @apply absolute z-10;
+
+      &.hidden {
+        @apply hidden;
+      }
+    }
+
+    .table-col-drag-marker {
+      top: -9px;
+    }
+
+    .table-row-drag-marker {
+      left: 0;
+    }
+  }
+
+  /* Selected status */
+  &.ProseMirror-selectednode {
+    table {
+      background-color: color-mix(in srgb, var(--background-color-accent-primary) 20%, transparent);
+    }
+  }
+  /* End selected status */
+}
+
+/* Column resizer */
+.table-wrapper table .column-resize-handle {
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  width: 2px;
+  height: calc(100% + 2px);
+  z-index: 5;
+  background-color: var(--border-color-accent-strong);
+  pointer-events: none;
+}
+/* End column resizer */
+
+.resize-cursor .table-wrapper .table-controls .rows-control,
+.table-wrapper.controls--disabled .table-controls .rows-control,
+.resize-cursor .table-wrapper .table-controls .columns-control,
+.table-wrapper.controls--disabled .table-controls .columns-control {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Insert buttons */
+.table-wrapper {
+  .table-column-insert-button,
+  .table-row-insert-button {
+    position: absolute;
+    background-color: var(--background-color-layer-1);
+    @apply text-tertiary border border-subtle-1;
+    border-radius: 4px;
+    display: grid;
+    place-items: center;
+    opacity: 0;
+    pointer-events: none;
+    outline: none;
+    z-index: 9;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: var(--background-color-layer-1-hover);
+      @apply text-primary;
+    }
+
+    &.dragging {
+      opacity: 1;
+      pointer-events: auto;
+      background-color: color-mix(in srgb, var(--background-color-accent-primary) 20%, transparent);
+      @apply text-primary;
+    }
+
+    svg {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  .table-column-insert-button {
+    top: 0;
+    right: -16px;
+    width: 16px;
+    height: 100%;
+    transform: translateX(50%);
+    cursor: col-resize;
+  }
+
+  .table-row-insert-button {
+    bottom: -16px;
+    left: 0;
+    width: 100%;
+    height: 16px;
+    transform: translateY(50%);
+    cursor: row-resize;
+  }
+
+  /* Show buttons on table hover */
+  &:hover {
+    .table-column-insert-button,
+    .table-row-insert-button {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+/* End insert buttons */
diff --git a/packages/editor/src/styles/title-editor.css b/packages/editor/src/styles/title-editor.css
new file mode 100644
index 0000000..b51d952
--- /dev/null
+++ b/packages/editor/src/styles/title-editor.css
@@ -0,0 +1,49 @@
+/* Title editor styles */
+.page-title-editor {
+  width: 100%;
+  outline: none;
+  resize: none;
+  border-radius: 0;
+}
+
+.page-title-editor .ProseMirror {
+  background-color: transparent;
+  font-weight: bold;
+  letter-spacing: -2%;
+  padding: 0;
+  margin-bottom: 0;
+}
+
+/* Handle font sizes */
+.page-title-editor.small-font .ProseMirror h1 {
+  font-size: 1.6rem;
+  line-height: 1.9rem;
+}
+
+.page-title-editor.large-font .ProseMirror h1 {
+  font-size: 2rem;
+  line-height: 2.375rem;
+}
+
+/* Focus state */
+.page-title-editor.active-editor .ProseMirror {
+  box-shadow: none;
+  outline: none;
+}
+
+/* Placeholder */
+.page-title-editor .ProseMirror h1.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-placeholder);
+  pointer-events: none;
+  height: 0;
+}
+
+.page-title-editor .ProseMirror h1.is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-placeholder);
+  pointer-events: none;
+  height: 0;
+}
diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css
new file mode 100644
index 0000000..c58361d
--- /dev/null
+++ b/packages/editor/src/styles/variables.css
@@ -0,0 +1,305 @@
+:root {
+  /* text colors */
+  --editor-colors-gray-text: #5c5e63;
+  --editor-colors-peach-text: #ff5b59;
+  --editor-colors-pink-text: #f65385;
+  --editor-colors-orange-text: #fd9038;
+  --editor-colors-green-text: #0fc27b;
+  --editor-colors-light-blue-text: #17bee9;
+  --editor-colors-dark-blue-text: #266df0;
+  --editor-colors-purple-text: #9162f9;
+  /* end text colors */
+
+  /* layout */
+  --normal-content-width: 720px;
+  --wide-content-width: 1152px;
+  --normal-content-margin: 20px;
+  --wide-content-margin: 96px;
+  /* end layout */
+}
+
+/* text background colors */
+[data-theme*="light"] {
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
+}
+[data-theme*="dark"] {
+  --editor-colors-gray-background: #404144;
+  --editor-colors-peach-background: #593032;
+  --editor-colors-pink-background: #562e3d;
+  --editor-colors-orange-background: #583e2a;
+  --editor-colors-green-background: #1d4a3b;
+  --editor-colors-light-blue-background: #1f495c;
+  --editor-colors-dark-blue-background: #223558;
+  --editor-colors-purple-background: #3d325a;
+}
+/* end text background colors */
+
+/* font size and style */
+.editor-container {
+  --color-placeholder: --alpha(var(--text-color-primary) / 50%);
+
+  /* font sizes and line heights */
+  &.large-font {
+    --font-size-h1: 1.75rem;
+    --font-size-h2: 1.5rem;
+    --font-size-h3: 1.375rem;
+    --font-size-h4: 1.25rem;
+    --font-size-h5: 1.125rem;
+    --font-size-h6: 1rem;
+    --font-size-regular: 1rem;
+    --font-size-code: 0.85rem;
+    --font-size-list: var(--font-size-regular);
+
+    --line-height-h1: 2.25rem;
+    --line-height-h2: 2rem;
+    --line-height-h3: 1.75rem;
+    --line-height-h4: 1.5rem;
+    --line-height-h5: 1.5rem;
+    --line-height-h6: 1.5rem;
+    --line-height-regular: 1.5rem;
+    --line-height-code: 1.5rem;
+    --line-height-list: var(--line-height-regular);
+  }
+  &.small-font {
+    --font-size-h1: 1.4rem;
+    --font-size-h2: 1.2rem;
+    --font-size-h3: 1.1rem;
+    --font-size-h4: 1rem;
+    --font-size-h5: 0.9rem;
+    --font-size-h6: 0.8rem;
+    --font-size-regular: 0.8rem;
+    --font-size-code: 0.8rem;
+    --font-size-list: var(--font-size-regular);
+
+    --line-height-h1: 1.8rem;
+    --line-height-h2: 1.6rem;
+    --line-height-h3: 1.4rem;
+    --line-height-h4: 1.2rem;
+    --line-height-h5: 1.2rem;
+    --line-height-h6: 1.2rem;
+    --line-height-regular: 1.2rem;
+    --line-height-code: 1.2rem;
+    --line-height-list: var(--line-height-regular);
+  }
+
+  &.mobile-font {
+    --font-size-h1: 1.75rem;
+    --font-size-h2: 1.5rem;
+    --font-size-h3: 1.375rem;
+    --font-size-h4: 1.25rem;
+    --font-size-h5: 1.125rem;
+    --font-size-h6: 1rem;
+    --font-size-regular: 0.95rem;
+    --font-size-code: 0.85rem;
+    --font-size-list: var(--font-size-regular);
+
+    --line-height-h1: 2.25rem;
+    --line-height-h2: 2rem;
+    --line-height-h3: 1.75rem;
+    --line-height-h4: 1.5rem;
+    --line-height-h5: 1.5rem;
+    --line-height-h6: 1.5rem;
+    --line-height-regular: 1.5rem;
+    --line-height-code: 1.5rem;
+    --line-height-list: var(--line-height-regular);
+  }
+  /* end font sizes and line heights */
+
+  /* font styles */
+  --font-style: "Inter Variable", sans-serif;
+
+  &.sans-serif {
+    --font-style: "Inter Variable", sans-serif;
+  }
+  &.serif {
+    --font-style: serif;
+  }
+  &.monospace {
+    --font-style: monospace;
+  }
+  /* end font styles */
+
+  /* spacing */
+  &.line-spacing-regular {
+    --heading-1-padding-top: 28px;
+    --heading-1-padding-bottom: 4px;
+    --heading-2-padding-top: 28px;
+    --heading-2-padding-bottom: 4px;
+    --heading-3-padding-top: 28px;
+    --heading-3-padding-bottom: 4px;
+    --heading-4-padding-top: 28px;
+    --heading-4-padding-bottom: 4px;
+    --heading-5-padding-top: 20px;
+    --heading-5-padding-bottom: 4px;
+    --heading-6-padding-top: 20px;
+    --heading-6-padding-bottom: 4px;
+    --paragraph-padding-top: 4px;
+    --paragraph-padding-bottom: 4px;
+    --paragraph-padding-between: 8px;
+    --list-spacing-y: 8px;
+    --divider-padding-top: 4px;
+    --divider-padding-bottom: 4px;
+  }
+
+  &.line-spacing-small {
+    --heading-1-padding-top: 16px;
+    --heading-1-padding-bottom: 4px;
+    --heading-2-padding-top: 16px;
+    --heading-2-padding-bottom: 4px;
+    --heading-3-padding-top: 16px;
+    --heading-3-padding-bottom: 4px;
+    --heading-4-padding-top: 16px;
+    --heading-4-padding-bottom: 4px;
+    --heading-5-padding-top: 12px;
+    --heading-5-padding-bottom: 4px;
+    --heading-6-padding-top: 12px;
+    --heading-6-padding-bottom: 4px;
+    --paragraph-padding-top: 2px;
+    --paragraph-padding-bottom: 2px;
+    --paragraph-padding-between: 4px;
+    --list-spacing-y: 0px;
+    --divider-padding-top: 0px;
+    --divider-padding-bottom: 4px;
+  }
+
+  &.line-spacing-mobile-regular {
+    --heading-1-padding-top: 16px;
+    --heading-1-padding-bottom: 4px;
+    --heading-2-padding-top: 16px;
+    --heading-2-padding-bottom: 4px;
+    --heading-3-padding-top: 16px;
+    --heading-3-padding-bottom: 4px;
+    --heading-4-padding-top: 16px;
+    --heading-4-padding-bottom: 4px;
+    --heading-5-padding-top: 12px;
+    --heading-5-padding-bottom: 4px;
+    --heading-6-padding-top: 12px;
+    --heading-6-padding-bottom: 4px;
+    --paragraph-padding-top: 2px;
+    --paragraph-padding-bottom: 2px;
+    --paragraph-padding-between: 4px;
+    --list-spacing-y: 0px;
+    --divider-padding-top: 0px;
+    --divider-padding-bottom: 4px;
+  }
+  /* end spacing */
+}
+/* end font size and style */
+
+/* layout config */
+#page-toolbar-container {
+  container-name: page-toolbar-container;
+  container-type: inline-size;
+
+  .page-toolbar-content {
+    --header-width: var(--normal-content-width);
+
+    &.wide-layout {
+      --header-width: var(--wide-content-width);
+    }
+
+    padding-left: calc(((100% - var(--header-width)) / 2) - 10px);
+  }
+}
+
+#page-content-container {
+  container-name: page-content-container;
+  container-type: inline-size;
+
+  .frame-renderer {
+    --editor-content-width: var(--normal-content-width);
+
+    &.wide-layout {
+      --editor-content-width: var(--wide-content-width);
+    }
+
+    .editor-container.page-title-editor .ProseMirror,
+    .document-editor-loader {
+      max-width: var(--editor-content-width);
+      margin: 0 auto;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .editor-container.document-editor .ProseMirror {
+      & > *:not(.editor-full-width-block) {
+        max-width: var(--editor-content-width);
+        margin-left: auto !important;
+        margin-right: auto !important;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      & > .editor-full-width-block {
+        max-width: 100%;
+        padding-inline-start: calc((100% - var(--editor-content-width)) / 2);
+        padding-inline-end: var(--wide-content-margin);
+      }
+    }
+  }
+}
+
+/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
+@container page-toolbar-container (min-width: 912px) and (max-width: 1344px) {
+  .page-toolbar-content.wide-layout {
+    padding-left: var(--wide-content-margin) !important;
+  }
+}
+
+/* keep a static padding of 96px for wide layouts for container width <912px */
+@container page-toolbar-container (max-width: 912) {
+  .page-toolbar-content.wide-layout {
+    padding-left: var(--wide-content-margin) !important;
+  }
+}
+/* end layout config */
+
+/* keep a static padding of 20px for wide layouts for container width <760px */
+@container page-toolbar-container (max-width: 760px) {
+  .page-toolbar-content {
+    padding-left: var(--normal-content-margin) !important;
+  }
+}
+/* end layout config */
+
+/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
+@container page-content-container (min-width: 912px) and (max-width: 1344px) {
+  #page-content-container .frame-renderer.wide-layout .editor-container,
+  #page-content-container .frame-renderer.wide-layout .document-editor-loader,
+  .page-header-container {
+    padding-left: var(--wide-content-margin);
+    padding-right: var(--wide-content-margin);
+  }
+}
+
+/* keep a static padding of 20px for wide layouts for container width <912px */
+@container page-content-container (max-width: 912px) {
+  #page-content-container .frame-renderer.wide-layout .editor-container,
+  #page-content-container .frame-renderer.wide-layout .document-editor-loader,
+  .page-header-container {
+    padding-left: var(--normal-content-margin);
+    padding-right: var(--normal-content-margin);
+  }
+}
+
+/* keep a static padding of 20px for normal layouts for container width <760px */
+@container page-content-container (max-width: 760px) {
+  #page-content-container .frame-renderer:not(.wide-layout) .editor-container,
+  #page-content-container .frame-renderer:not(.wide-layout) .document-editor-loader,
+  .page-header-container {
+    padding-left: var(--normal-content-margin);
+    padding-right: var(--normal-content-margin);
+  }
+}
+
+@container page-content-container (max-width: 930px) {
+  .page-summary-container {
+    display: none;
+  }
+}
+/* end layout config */
diff --git a/packages/editor/src/types/ai.ts b/packages/editor/src/types/ai.ts
new file mode 100644
index 0000000..de4e6de
--- /dev/null
+++ b/packages/editor/src/types/ai.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TAIMenuProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export type TAIHandler = {
+  menu?: (props: TAIMenuProps) => React.ReactNode;
+};
diff --git a/packages/editor/src/types/asset.ts b/packages/editor/src/types/asset.ts
new file mode 100644
index 0000000..21590a4
--- /dev/null
+++ b/packages/editor/src/types/asset.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// constants
+import type { CORE_EXTENSIONS } from "@/constants/extension";
+
+export type TAdditionalEditorAsset = never;
+
+export type TEditorImageAsset = {
+  href: string;
+  id: string;
+  name: string;
+  src: string;
+  type: CORE_EXTENSIONS.IMAGE | CORE_EXTENSIONS.CUSTOM_IMAGE;
+};
+
+export type TEditorAsset = TEditorImageAsset | TAdditionalEditorAsset;
diff --git a/packages/editor/src/types/collaboration.ts b/packages/editor/src/types/collaboration.ts
new file mode 100644
index 0000000..a054260
--- /dev/null
+++ b/packages/editor/src/types/collaboration.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type CollaborationError =
+  | { type: "auth-failed"; message: string }
+  | { type: "network-error"; message: string }
+  | { type: "forced-close"; code: number; message: string }
+  | { type: "max-retries"; message: string };
+
+/**
+ * Single-stage state machine for collaboration lifecycle.
+ * Stages represent the sequential progression: initial → connecting → awaiting-sync → synced
+ *
+ * Invariants:
+ * - "awaiting-sync" only occurs when connection is successful and sync is pending
+ * - "synced" occurs only after connection success and onSynced callback
+ * - "reconnecting" with attempt > 0 when retrying after a connection drop
+ * - "disconnected" is terminal (connection failed or forced close)
+ */
+export type CollabStage =
+  | { kind: "initial" }
+  | { kind: "connecting" }
+  | { kind: "awaiting-sync" }
+  | { kind: "synced" }
+  | { kind: "reconnecting"; attempt: number }
+  | { kind: "disconnected"; error: CollaborationError };
+
+/**
+ * Public collaboration state exposed to consumers.
+ * Contains the current stage and derived booleans for convenience.
+ */
+export type CollaborationState = {
+  stage: CollabStage;
+  isServerSynced: boolean;
+  isServerDisconnected: boolean;
+};
+
+export type TServerHandler = {
+  onStateChange: (state: CollaborationState) => void;
+};
diff --git a/packages/editor/src/types/config.ts b/packages/editor/src/types/config.ts
new file mode 100644
index 0000000..26f4184
--- /dev/null
+++ b/packages/editor/src/types/config.ts
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TExtendedFileHandler = object;
+
+export type TFileHandler = {
+  assetsUploadStatus: Record<string, number>; // blockId => progress percentage
+  cancel: () => void;
+  checkIfAssetExists: (assetId: string) => Promise<boolean>;
+  delete: (assetSrc: string) => Promise<void>;
+  getAssetDownloadSrc: (path: string) => Promise<string>;
+  getAssetSrc: (path: string) => Promise<string>;
+  restore: (assetSrc: string) => Promise<void>;
+  upload: (blockId: string, file: File) => Promise<string>;
+  duplicate: (assetId: string) => Promise<string>;
+  validation: {
+    /**
+     * @description max file size in bytes
+     * @example enter 5242880(5 * 1024 * 1024) for 5MB
+     */
+    maxFileSize: number;
+  };
+} & TExtendedFileHandler;
+
+export type TEditorFontStyle = "sans-serif" | "serif" | "monospace";
+
+export type TEditorFontSize = "small-font" | "large-font" | "mobile-font";
+
+export type TEditorLineSpacing = "regular" | "small" | "mobile-regular";
+
+export type TDisplayConfig = {
+  fontStyle?: TEditorFontStyle;
+  fontSize?: TEditorFontSize;
+  lineSpacing?: TEditorLineSpacing;
+  wideLayout?: boolean;
+};
+
+export type TUserDetails = {
+  color: string;
+  id: string;
+  name: string;
+  cookie?: string;
+};
+
+export type TRealtimeConfig = {
+  url: string;
+};
+
+export type IMarking = {
+  type: "heading";
+  level: number;
+  text: string;
+  sequence: number;
+};
diff --git a/packages/editor/src/types/document-collaborative-events.ts b/packages/editor/src/types/document-collaborative-events.ts
new file mode 100644
index 0000000..ba583d1
--- /dev/null
+++ b/packages/editor/src/types/document-collaborative-events.ts
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { DocumentCollaborativeEvents } from "@/constants/document-collaborative-events";
+
+// Base type for all action payloads
+export type BaseActionPayload = {
+  user_id?: string;
+};
+
+// Generic type for creating specific payloads
+export type CreatePayload<T = Record<string, never>> = BaseActionPayload & T;
+
+export type TDocumentEventEmitter = {
+  on: (event: string, callback: (message: { payload: TDocumentEventsClient }) => void) => void;
+  off: (event: string, callback: (message: { payload: TDocumentEventsClient }) => void) => void;
+};
+
+export type TDocumentEventKey = keyof typeof DocumentCollaborativeEvents;
+export type TDocumentEventsClient = (typeof DocumentCollaborativeEvents)[TDocumentEventKey]["client"];
+export type TDocumentEventsServer = (typeof DocumentCollaborativeEvents)[TDocumentEventKey]["server"];
+
+// In this version, our union of all events (the client names) is:
+export type TAllEventTypes = TDocumentEventsClient;
+
+// Create a mapping from each client event to its payload type using key remapping.
+export type EventToPayloadMap = {
+  [K in keyof typeof DocumentCollaborativeEvents as (typeof DocumentCollaborativeEvents)[K]["client"]]: (typeof DocumentCollaborativeEvents)[K]["payloadType"];
+};
+
+// Common fields for every realtime event
+export type CommonRealtimeFields = {
+  affectedPages: {
+    currentPage: string;
+    parentPage: string | null;
+    descendantPages: string[];
+  };
+  workspace_slug: string;
+  project_id?: string;
+  teamspace_id?: string;
+  user_id: string;
+  timestamp: string;
+};
+
+// Helper function to create a realtime event in a type‑safe way.
+export function createRealtimeEvent<T extends keyof EventToPayloadMap>(
+  opts: ApiServerPayload<T>
+): CommonRealtimeFields & BroadcastedEvent<T> {
+  return {
+    affectedPages: {
+      currentPage: opts.page_id || "",
+      parentPage: opts.parent_id || null,
+      descendantPages: opts.descendants_ids || [],
+    },
+    workspace_slug: opts.workspace_slug,
+    project_id: opts.project_id || "",
+    teamspace_id: opts.teamspace_id || "",
+    user_id: opts.user_id,
+    timestamp: new Date().toISOString(),
+    action: opts.action,
+    data: opts.data,
+  };
+}
+
+export type ApiServerPayload<T extends keyof EventToPayloadMap> = {
+  action: T;
+  descendants_ids: string[];
+  page_id?: string;
+  parent_id?: string;
+  data: EventToPayloadMap[T];
+  project_id?: string;
+  teamspace_id?: string;
+  workspace_slug: string;
+  user_id: string;
+};
+
+// Create a discriminated union for broadcast payloads.
+// For every key in EventToPayloadMap, we make a union member with the common fields.
+export type BroadcastPayloadUnion = {
+  [K in keyof EventToPayloadMap]: ApiServerPayload<K>;
+}[keyof EventToPayloadMap];
+
+export type BroadcastedEventUnion = {
+  [K in keyof EventToPayloadMap]: BroadcastedEvent<K>;
+}[keyof EventToPayloadMap];
+
+export type BroadcastedEvent<T extends keyof EventToPayloadMap = keyof EventToPayloadMap> = CommonRealtimeFields & {
+  action: T;
+  data: EventToPayloadMap[T];
+};
diff --git a/packages/editor/src/types/editor-extended.ts b/packages/editor/src/types/editor-extended.ts
new file mode 100644
index 0000000..a9b9f2e
--- /dev/null
+++ b/packages/editor/src/types/editor-extended.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type IEditorExtensionOptions = unknown;
+
+export type IEditorPropsExtended = unknown;
+
+export type ICollaborativeDocumentEditorPropsExtended = unknown;
+
+export type TExtendedEditorCommands = never;
+
+export type TExtendedCommandExtraProps = unknown;
+
+export type TExtendedEditorRefApi = unknown;
diff --git a/packages/editor/src/types/editor.ts b/packages/editor/src/types/editor.ts
new file mode 100644
index 0000000..91b7e99
--- /dev/null
+++ b/packages/editor/src/types/editor.ts
@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Content, Extensions, JSONContent, RawCommands } from "@tiptap/core";
+import type { MarkType, NodeType } from "@tiptap/pm/model";
+import type { Selection } from "@tiptap/pm/state";
+import type { EditorProps, EditorView } from "@tiptap/pm/view";
+import type { NodeViewProps as TNodeViewProps } from "@tiptap/react";
+// plane imports
+import type { TCustomComponentsMetaData } from "@plane/utils";
+// extension types
+import type { TTextAlign } from "@/extensions";
+// plane editor imports
+import type {
+  IEditorPropsExtended,
+  TExtendedEditorCommands,
+  ICollaborativeDocumentEditorPropsExtended,
+} from "@/types/editor-extended";
+// types
+import type {
+  IMarking,
+  TAIHandler,
+  TDisplayConfig,
+  TDocumentEventEmitter,
+  TDocumentEventsServer,
+  TEditorAsset,
+  TExtensions,
+  TFileHandler,
+  TMentionHandler,
+  TRealtimeConfig,
+  TServerHandler,
+  TUserDetails,
+  TExtendedEditorRefApi,
+  EventToPayloadMap,
+} from "@/types";
+
+export type TEditorCommands =
+  | "text"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "bold"
+  | "italic"
+  | "underline"
+  | "strikethrough"
+  | "bulleted-list"
+  | "numbered-list"
+  | "to-do-list"
+  | "quote"
+  | "code"
+  | "table"
+  | "image"
+  | "divider"
+  | "link"
+  | "issue-embed"
+  | "text-color"
+  | "background-color"
+  | "text-align"
+  | "callout"
+  | "attachment"
+  | "emoji"
+  | "external-embed"
+  | TExtendedEditorCommands;
+
+export type TCommandExtraProps = {
+  image: {
+    savedSelection: Selection | null;
+  };
+  attachment: {
+    savedSelection: Selection | null;
+  };
+  "text-color": {
+    color: string | undefined;
+  };
+  link: {
+    url: string;
+    text?: string;
+  };
+  "background-color": {
+    color: string | undefined;
+  };
+  "text-align": {
+    alignment: TTextAlign;
+  };
+};
+
+// Create a utility type that maps a command to its extra props or an empty object if none are defined
+export type TCommandWithProps<T extends TEditorCommands> = T extends keyof TCommandExtraProps
+  ? TCommandExtraProps[T] // If the command has extra props, include them
+  : object; // Otherwise, just return the command type with no extra props
+
+type TCommandWithPropsWithItemKey<T extends TEditorCommands> = T extends keyof TCommandExtraProps
+  ? { itemKey: T } & TCommandExtraProps[T]
+  : { itemKey: T };
+
+export type TDocumentInfo = {
+  characters: number;
+  paragraphs: number;
+  words: number;
+};
+
+export type CoreEditorRefApi = {
+  blur: () => void;
+  clearEditor: (emitUpdate?: boolean) => void;
+  createSelectionAtCursorPosition: () => void;
+  emitRealTimeUpdate: (action: TDocumentEventsServer) => void;
+  executeMenuItemCommand: <T extends TEditorCommands>(props: TCommandWithPropsWithItemKey<T>) => void;
+  focus: (args: Parameters<RawCommands["focus"]>[0]) => void;
+  getAttributesWithExtendedMark: (
+    mark: string | MarkType,
+    attribute: string | NodeType | MarkType
+  ) => Record<string, any> | undefined;
+  getCoordsFromPos: (pos?: number) => ReturnType<EditorView["coordsAtPos"]> | undefined;
+  getCurrentCursorPosition: () => number | undefined;
+  getDocument: () => {
+    binary: Uint8Array | null;
+    html: string;
+    json: JSONContent | null;
+  };
+  getDocumentInfo: () => TDocumentInfo;
+  getHeadings: () => IMarking[];
+  getMarkDown: () => string;
+  copyMarkdownToClipboard: () => void;
+  getSelectedText: () => string | null;
+  insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
+  isAnyDropbarOpen: () => boolean;
+  isEditorReadyToDiscard: () => boolean;
+  isMenuItemActive: <T extends TEditorCommands>(props: TCommandWithPropsWithItemKey<T>) => boolean;
+  listenToRealTimeUpdate: () => TDocumentEventEmitter | undefined;
+  onDocumentInfoChange: (callback: (documentInfo: TDocumentInfo) => void) => () => void;
+  onHeadingChange: (callback: (headings: IMarking[]) => void) => () => void;
+  onStateChange: (callback: () => void) => () => void;
+  redo: () => void;
+  scrollSummary: (marking: IMarking) => void;
+
+  scrollToNodeViaDOMCoordinates: ({ pos, behavior }: { pos?: number; behavior?: ScrollBehavior }) => void;
+  setEditorValue: (content: string, emitUpdate?: boolean) => void;
+  setEditorValueAtCursorPosition: (content: string) => void;
+  setFocusAtPosition: (position: number) => void;
+  setProviderDocument: (value: Uint8Array) => void;
+  undo: () => void;
+};
+
+export type EditorRefApi = CoreEditorRefApi & TExtendedEditorRefApi;
+
+export type EditorTitleRefApi = EditorRefApi;
+
+// editor props
+export type IEditorProps = {
+  autofocus?: boolean;
+  bubbleMenuEnabled?: boolean;
+  containerClassName?: string;
+  displayConfig?: TDisplayConfig;
+  disabledExtensions: TExtensions[];
+  editable: boolean;
+  editorClassName?: string;
+  editorProps?: EditorProps;
+  extensions?: Extensions;
+  flaggedExtensions: TExtensions[];
+  fileHandler: TFileHandler;
+  forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
+  getEditorMetaData: (htmlContent: string) => TCustomComponentsMetaData;
+  handleEditorReady?: (value: boolean) => void;
+  id: string;
+  initialValue: string;
+  isTouchDevice?: boolean;
+  mentionHandler: TMentionHandler;
+  onAssetChange?: (assets: TEditorAsset[]) => void;
+  onEditorFocus?: () => void;
+  onChange?: (json: object, html: string, { isMigrationUpdate }?: { isMigrationUpdate?: boolean }) => void;
+  onEnterKeyPress?: (e?: any) => void;
+  onTransaction?: () => void;
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
+  showPlaceholderOnEmpty?: boolean;
+  tabIndex?: number;
+  value?: string | null;
+  extendedEditorProps: IEditorPropsExtended;
+  workItemIdentifier?: string | null;
+};
+
+export type ILiteTextEditorProps = IEditorProps;
+
+export type IRichTextEditorProps = IEditorProps & {
+  dragDropEnabled?: boolean;
+};
+
+export type ICollaborativeDocumentEditorProps = Omit<IEditorProps, "initialValue" | "onEnterKeyPress" | "value"> & {
+  aiHandler?: TAIHandler;
+  documentLoaderClassName?: string;
+  dragDropEnabled?: boolean;
+  editable: boolean;
+  realtimeConfig: TRealtimeConfig;
+  serverHandler?: TServerHandler;
+  user: TUserDetails;
+  extendedDocumentEditorProps?: ICollaborativeDocumentEditorPropsExtended;
+  updatePageProperties?: <T extends keyof EventToPayloadMap>(
+    pageIds: string | string[],
+    actionType: T,
+    data: EventToPayloadMap[T],
+    performAction?: boolean
+  ) => void;
+  pageRestorationInProgress?: boolean;
+  titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
+  isFetchingFallbackBinary?: boolean;
+};
+
+export type IDocumentEditorProps = Omit<IEditorProps, "initialValue" | "onEnterKeyPress" | "value"> & {
+  aiHandler?: TAIHandler;
+  user?: TUserDetails;
+  value: Content;
+};
+
+export type EditorEvents = {
+  beforeCreate: never;
+  create: never;
+  update: never;
+  selectionUpdate: never;
+  transaction: never;
+  focus: never;
+  blur: never;
+  destroy: never;
+  ready: { height: number };
+};
+
+export type NodeViewProps = TNodeViewProps;
diff --git a/packages/editor/src/types/embed.ts b/packages/editor/src/types/embed.ts
new file mode 100644
index 0000000..96ff8cf
--- /dev/null
+++ b/packages/editor/src/types/embed.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TEmbedItem = {
+  id: string;
+  title: string;
+  subTitle: string;
+  icon: React.ReactNode;
+  projectId: string;
+  workspaceSlug: string;
+};
diff --git a/packages/editor/src/types/extensions.ts b/packages/editor/src/types/extensions.ts
new file mode 100644
index 0000000..2670b6c
--- /dev/null
+++ b/packages/editor/src/types/extensions.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TExtensions = "ai" | "collaboration-cursor" | "issue-embed" | "slash-commands" | "enter-key" | "image";
diff --git a/packages/editor/src/types/hook.ts b/packages/editor/src/types/hook.ts
new file mode 100644
index 0000000..b586d0f
--- /dev/null
+++ b/packages/editor/src/types/hook.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { Content } from "@tiptap/core";
+// local imports
+import type { ICollaborativeDocumentEditorProps, IEditorProps } from "./editor";
+
+type TCoreHookProps = Pick<
+  IEditorProps,
+  | "disabledExtensions"
+  | "editorClassName"
+  | "editorProps"
+  | "extendedEditorProps"
+  | "extensions"
+  | "flaggedExtensions"
+  | "getEditorMetaData"
+  | "handleEditorReady"
+  | "isTouchDevice"
+  | "onEditorFocus"
+>;
+
+export type TEditorHookProps = TCoreHookProps &
+  Pick<
+    IEditorProps,
+    | "autofocus"
+    | "fileHandler"
+    | "forwardedRef"
+    | "id"
+    | "mentionHandler"
+    | "onAssetChange"
+    | "onChange"
+    | "onTransaction"
+    | "placeholder"
+    | "showPlaceholderOnEmpty"
+    | "tabIndex"
+    | "value"
+  > & {
+    editable: boolean;
+    enableHistory: boolean;
+    initialValue?: Content;
+    provider?: HocuspocusProvider;
+  };
+
+export type TCollaborativeEditorHookProps = TCoreHookProps &
+  Pick<
+    TEditorHookProps,
+    | "editable"
+    | "fileHandler"
+    | "forwardedRef"
+    | "id"
+    | "mentionHandler"
+    | "onAssetChange"
+    | "onChange"
+    | "onTransaction"
+    | "placeholder"
+    | "showPlaceholderOnEmpty"
+    | "tabIndex"
+  > &
+  Pick<
+    ICollaborativeDocumentEditorProps,
+    "dragDropEnabled" | "extendedDocumentEditorProps" | "realtimeConfig" | "serverHandler" | "user"
+  > & {
+    titleRef?: ICollaborativeDocumentEditorProps["titleRef"];
+    updatePageProperties?: ICollaborativeDocumentEditorProps["updatePageProperties"];
+  };
diff --git a/packages/editor/src/types/index.ts b/packages/editor/src/types/index.ts
new file mode 100644
index 0000000..69a67c3
--- /dev/null
+++ b/packages/editor/src/types/index.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./ai";
+export * from "./asset";
+export * from "./collaboration";
+export * from "./config";
+export * from "./editor";
+export * from "./embed";
+export * from "./extensions";
+export * from "./hook";
+export * from "./mention";
+export * from "./slash-commands-suggestion";
+export * from "./document-collaborative-events";
+export * from "./issue-embed";
+export * from "./editor-extended";
diff --git a/packages/editor/src/types/issue-embed.ts b/packages/editor/src/types/issue-embed.ts
new file mode 100644
index 0000000..02ecfb2
--- /dev/null
+++ b/packages/editor/src/types/issue-embed.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TEmbedConfig = {
+  issue?: TIssueEmbedConfig;
+};
+
+export type TReadOnlyEmbedConfig = TEmbedConfig;
+
+export type TIssueEmbedConfig = {
+  widgetCallback: ({
+    issueId,
+    projectId,
+    workspaceSlug,
+  }: {
+    issueId: string;
+    projectId: string | undefined;
+    workspaceSlug: string | undefined;
+  }) => React.ReactNode;
+};
diff --git a/packages/editor/src/types/mention.ts b/packages/editor/src/types/mention.ts
new file mode 100644
index 0000000..6481b16
--- /dev/null
+++ b/packages/editor/src/types/mention.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane types
+import type { TSearchEntities } from "@plane/types";
+
+export type TMentionSuggestion = {
+  entity_identifier: string;
+  entity_name: TSearchEntities;
+  icon: React.ReactNode;
+  id: string;
+  subTitle?: string;
+  title: string;
+};
+
+export type TMentionSection = {
+  key: string;
+  title?: string;
+  items: TMentionSuggestion[];
+};
+
+export type TCallbackMentionComponentProps = Pick<TMentionSuggestion, "entity_identifier" | "entity_name">;
+
+export type TMentionHandler = {
+  getMentionedEntityDetails?: (entity_identifier: string) => { display_name: string } | undefined;
+  renderComponent: (props: TCallbackMentionComponentProps) => React.ReactNode;
+  searchCallback?: (query: string) => Promise<TMentionSection[]>;
+};
diff --git a/packages/editor/src/types/slash-commands-suggestion.ts b/packages/editor/src/types/slash-commands-suggestion.ts
new file mode 100644
index 0000000..d0b4562
--- /dev/null
+++ b/packages/editor/src/types/slash-commands-suggestion.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Editor, Range } from "@tiptap/core";
+import type { CSSProperties } from "react";
+import type { TEditorCommands } from "@/types";
+
+export type CommandProps = {
+  editor: Editor;
+  range: Range;
+};
+
+export type TSlashCommandSectionKeys = "general" | "text-colors" | "background-colors";
+
+export type ISlashCommandItem = {
+  commandKey: TEditorCommands;
+  key: string;
+  title: string;
+  description: string;
+  searchTerms: string[];
+  icon: React.ReactNode;
+  iconContainerStyle?: CSSProperties;
+  command: ({ editor, range }: CommandProps) => void;
+  badge?: React.ReactNode;
+};
diff --git a/packages/editor/src/types/storage.ts b/packages/editor/src/types/storage.ts
new file mode 100644
index 0000000..821c08e
--- /dev/null
+++ b/packages/editor/src/types/storage.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// extensions
+import type { ImageExtensionStorage } from "@/extensions/image";
+
+export type ExtensionFileSetStorageKey = Extract<keyof ImageExtensionStorage, "deletedImageSet">;
diff --git a/packages/editor/src/types/utils.ts b/packages/editor/src/types/utils.ts
new file mode 100644
index 0000000..5900256
--- /dev/null
+++ b/packages/editor/src/types/utils.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TAdditionalActiveDropbarExtensions = never;
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
new file mode 100644
index 0000000..d979ccb
--- /dev/null
+++ b/packages/editor/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "exactOptionalPropertyTypes": false,
+    "noImplicitReturns": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/editor/tsdown.config.ts b/packages/editor/tsdown.config.ts
new file mode 100644
index 0000000..ea7c2ef
--- /dev/null
+++ b/packages/editor/tsdown.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts", "src/lib.ts"],
+  format: ["esm"],
+  dts: true,
+  copy: ["src/styles"],
+  exports: {
+    customExports: (exports) => ({
+      ...exports,
+      "./styles.css": "./dist/styles/index.css",
+      "./styles": "./dist/styles/index.css",
+    }),
+  },
+  platform: "neutral",
+});
diff --git a/packages/hooks/.prettierignore b/packages/hooks/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/hooks/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
new file mode 100644
index 0000000..8a509c6
--- /dev/null
+++ b/packages/hooks/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@plane/hooks",
+  "version": "1.4.2",
+  "private": true,
+  "description": "React hooks that are shared across multiple apps internally",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=4 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "react": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/typescript-config": "workspace:*",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
new file mode 100644
index 0000000..032a058
--- /dev/null
+++ b/packages/hooks/src/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-hash-scroll";
+export * from "./use-local-storage";
+export * from "./use-outside-click-detector";
+export * from "./use-platform-os";
diff --git a/packages/hooks/src/use-hash-scroll.ts b/packages/hooks/src/use-hash-scroll.ts
new file mode 100644
index 0000000..c919ef9
--- /dev/null
+++ b/packages/hooks/src/use-hash-scroll.ts
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+
+type TArgs = {
+  elementId: string;
+  pathname: string;
+  scrollDelay?: number;
+};
+
+type TReturnType = {
+  isHashMatch: boolean;
+  hashIds: string[];
+  scrollToElement: () => boolean;
+};
+
+/**
+ * Custom hook for handling hash-based scrolling to a specific element
+ * Supports multiple IDs in URL hash (comma-separated, space-separated, or other delimiters)
+ *
+ * @param {TArgs} args - The ID of the element to scroll to
+ * @returns {TReturnType} Object containing hash match status and scroll function
+ */
+export const useHashScroll = (args: TArgs): TReturnType => {
+  const { elementId, pathname, scrollDelay = 200 } = args;
+  // State to track if the current hash contains the provided element ID
+  const [isHashMatch, setIsHashMatch] = useState(false);
+  // State to track all IDs found in the hash
+  const [hashIds, setHashIds] = useState<string[]>([]);
+
+  /**
+   * Scrolls to the element with the provided ID
+   * @returns {boolean} - Whether the scroll was successful
+   */
+  const scrollToElement = useCallback((): boolean => {
+    try {
+      const element = document.getElementById(elementId);
+
+      if (element) {
+        setTimeout(() => {
+          element.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+          });
+        }, scrollDelay);
+
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      console.warn("Hash scroll error:", error);
+      return false;
+    }
+  }, [elementId, scrollDelay]);
+
+  /**
+   * Extracts multiple IDs from hash string
+   * Supports various delimiters: comma, space, pipe, semicolon
+   * @param {string} hashString - The hash part of the URL
+   * @returns {string[]} - Array of clean ID strings
+   */
+  const extractIdsFromHash = (hashString: string | null): string[] => {
+    if (!hashString) return [];
+
+    // Split by common delimiters and clean up
+    return hashString
+      .split(/[,\s|;]+/) // Split by comma, space, pipe, or semicolon
+      .map((id) => id.trim()) // Remove whitespace
+      .filter((id) => id.length > 0); // Remove empty strings
+  };
+
+  /**
+   * Get current hash from window.location
+   * @returns {string | null} - Current hash without the # symbol
+   */
+  const getCurrentHash = (): string | null => {
+    if (typeof window === "undefined") return null;
+    const hash = window.location.hash;
+    return hash ? hash.slice(1) : null; // Remove the # symbol
+  };
+
+  // Effect to handle hash changes and initial load
+  useEffect(() => {
+    if (!elementId) {
+      setIsHashMatch(false);
+      setHashIds([]);
+      return;
+    }
+
+    const handleHashChange = () => {
+      const hash = getCurrentHash();
+
+      // Extract all IDs from the hash
+      const idsInHash = extractIdsFromHash(hash);
+      setHashIds(idsInHash);
+
+      // Check if provided element ID is present in the hash
+      const hashMatches = idsInHash.includes(elementId);
+      setIsHashMatch(hashMatches);
+
+      // If hash matches, attempt to scroll to the element
+      if (hashMatches) {
+        scrollToElement();
+      }
+    };
+
+    // Handle initial load
+    handleHashChange();
+
+    // Listen for hash changes
+    window.addEventListener("hashchange", handleHashChange);
+
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, [elementId, pathname, scrollToElement]); // Include pathname to handle route changes
+
+  // Return object with hash match status and utility functions
+  return {
+    // Whether the current URL hash contains the provided element ID
+    isHashMatch,
+
+    // Array of all IDs found in the current hash
+    hashIds,
+
+    // Manually trigger scroll to the element
+    scrollToElement,
+  };
+};
diff --git a/packages/hooks/src/use-local-storage.tsx b/packages/hooks/src/use-local-storage.tsx
new file mode 100644
index 0000000..057e1cc
--- /dev/null
+++ b/packages/hooks/src/use-local-storage.tsx
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useCallback } from "react";
+
+export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
+  if (typeof window === "undefined" || typeof window === "undefined") return defaultValue;
+  try {
+    const item = window.localStorage.getItem(key);
+    return item ? JSON.parse(item) : defaultValue;
+  } catch (_error) {
+    window.localStorage.removeItem(key);
+    return defaultValue;
+  }
+};
+
+export const setValueIntoLocalStorage = (key: string, value: any) => {
+  if (typeof window === "undefined" || typeof window === "undefined") return false;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  } catch (_error) {
+    return false;
+  }
+};
+
+export const useLocalStorage = <T,>(key: string, initialValue: T) => {
+  const [storedValue, setStoredValue] = useState<T | null>(() => getValueFromLocalStorage(key, initialValue));
+
+  const setValue = useCallback(
+    (value: T) => {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      setStoredValue(value);
+      window.dispatchEvent(new Event(`local-storage:${key}`));
+    },
+    [key]
+  );
+
+  const clearValue = useCallback(() => {
+    window.localStorage.removeItem(key);
+    setStoredValue(null);
+    window.dispatchEvent(new Event(`local-storage:${key}`));
+  }, [key]);
+
+  const reHydrate = useCallback(() => {
+    const data = getValueFromLocalStorage(key, initialValue);
+    setStoredValue(data);
+  }, [key, initialValue]);
+
+  useEffect(() => {
+    window.addEventListener(`local-storage:${key}`, reHydrate);
+    return () => {
+      window.removeEventListener(`local-storage:${key}`, reHydrate);
+    };
+  }, [key, reHydrate]);
+
+  return { storedValue, setValue, clearValue } as const;
+};
diff --git a/packages/hooks/src/use-outside-click-detector.tsx b/packages/hooks/src/use-outside-click-detector.tsx
new file mode 100644
index 0000000..90afa97
--- /dev/null
+++ b/packages/hooks/src/use-outside-click-detector.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type React from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+export const useOutsideClickDetector = (
+  ref: React.RefObject<HTMLElement | null> | any,
+  callback: () => void,
+  useCapture = false,
+  enabled = true
+) => {
+  // Keep the latest callback/useCapture in refs so the document listener binds once per
+  // consumer instead of re-attaching on every render.
+  const callbackRef = useRef(callback);
+  const useCaptureRef = useRef(useCapture);
+
+  useLayoutEffect(() => {
+    callbackRef.current = callback;
+    useCaptureRef.current = useCapture;
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleClick = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as any)) {
+        // check for the closest element with attribute name data-prevent-outside-click
+        const preventOutsideClickElement = (event.target as unknown as HTMLElement | undefined)?.closest(
+          "[data-prevent-outside-click]"
+        );
+        // if the closest element with attribute name data-prevent-outside-click is found, return
+        if (preventOutsideClickElement) {
+          return;
+        }
+        // else call the callback
+        callbackRef.current();
+      }
+    };
+
+    const capture = useCaptureRef.current;
+    document.addEventListener("mousedown", handleClick, capture);
+    return () => {
+      document.removeEventListener("mousedown", handleClick, capture);
+    };
+  }, [ref, enabled, useCapture]);
+};
diff --git a/packages/hooks/src/use-platform-os.tsx b/packages/hooks/src/use-platform-os.tsx
new file mode 100644
index 0000000..dc78c76
--- /dev/null
+++ b/packages/hooks/src/use-platform-os.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+
+export const usePlatformOS = () => {
+  const [platformData, setPlatformData] = useState({
+    isMobile: false,
+    platform: "",
+  });
+
+  useEffect(() => {
+    const detectPlatform = () => {
+      const userAgent = window.navigator.userAgent;
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+      let platform = "";
+
+      if (!isMobile) {
+        if (userAgent.indexOf("Win") !== -1) {
+          platform = "Windows";
+        } else if (userAgent.indexOf("Mac") !== -1) {
+          platform = "MacOS";
+        } else if (userAgent.indexOf("Linux") !== -1) {
+          platform = "Linux";
+        } else {
+          platform = "Unknown";
+        }
+      }
+
+      setPlatformData({ isMobile, platform });
+    };
+
+    detectPlatform();
+  }, []);
+
+  return platformData;
+};
diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json
new file mode 100644
index 0000000..2256a0d
--- /dev/null
+++ b/packages/hooks/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "include": ["./src"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/hooks/tsdown.config.ts b/packages/hooks/tsdown.config.ts
new file mode 100644
index 0000000..92959ea
--- /dev/null
+++ b/packages/hooks/tsdown.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  platform: "neutral",
+  exports: true,
+});
diff --git a/packages/i18n/.prettierignore b/packages/i18n/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/i18n/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/i18n/locales b/packages/i18n/locales
new file mode 120000
index 0000000..a4829b5
--- /dev/null
+++ b/packages/i18n/locales
@@ -0,0 +1 @@
+src/locales
\ No newline at end of file
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
new file mode 100644
index 0000000..6a60e25
--- /dev/null
+++ b/packages/i18n/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@plane/i18n",
+  "version": "1.4.2",
+  "private": true,
+  "description": "I18n shared across multiple apps internally",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "tsdown --watch --no-clean",
+    "build": "pnpm run generate:types && tsdown",
+    "generate:types": "tsx scripts/generate-types.ts",
+    "sync:check": "tsx scripts/sync-check.ts",
+    "check:sync": "tsx scripts/sync-check.ts --ci",
+    "check:lint": "oxlint --max-warnings=9 .",
+    "check:types": "pnpm run generate:types && tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "i18next": "catalog:",
+    "i18next-icu": "catalog:",
+    "i18next-resources-to-backend": "catalog:",
+    "react": "catalog:",
+    "react-i18next": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/typescript-config": "workspace:*",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "tsdown": "catalog:",
+    "tsx": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/packages/i18n/scripts/generate-types.ts b/packages/i18n/scripts/generate-types.ts
new file mode 100644
index 0000000..304d99e
--- /dev/null
+++ b/packages/i18n/scripts/generate-types.ts
@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Usage: npx tsx packages/i18n/scripts/generate-types.ts
+// Reads: src/locales/en/*.json
+// Writes: src/types/keys.generated.ts
+
+import fs from "node:fs";
+import path from "node:path";
+
+const COPYRIGHT_HEADER = `/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */`;
+
+type NestedObject = { [key: string]: string | NestedObject };
+
+/**
+ * Recursively flatten a nested object into dot-notated keys.
+ * Returns an array of flattened key strings.
+ */
+function flattenKeys(obj: NestedObject, prefix = ""): string[] {
+  const keys: string[] = [];
+
+  for (const [key, value] of Object.entries(obj)) {
+    const fullKey = prefix ? `${prefix}.${key}` : key;
+
+    if (typeof value === "string") {
+      keys.push(fullKey);
+    } else if (typeof value === "object" && value !== null) {
+      keys.push(...flattenKeys(value as NestedObject, fullKey));
+    }
+  }
+
+  return keys;
+}
+
+/**
+ * Detect path conflicts where a key is both a leaf (string value) and a prefix
+ * of another key. For example, "workspace" as a leaf and "workspace.settings" as
+ * another key would be a conflict.
+ */
+function detectPathConflicts(keys: string[]): string[] {
+  // Build a set of all prefixes used across keys
+  const prefixes = new Set<string>();
+  for (const key of keys) {
+    const parts = key.split(".");
+    for (let i = 1; i < parts.length; i++) {
+      prefixes.add(parts.slice(0, i).join("."));
+    }
+  }
+
+  // A conflict exists when a leaf key is also a prefix
+  const conflicts: string[] = [];
+  for (const key of keys) {
+    if (prefixes.has(key)) {
+      const extending = keys.find((k) => k.startsWith(key + "."));
+      if (extending) {
+        conflicts.push(`Path conflict: "${key}" is both a leaf key and a prefix of "${extending}"`);
+      }
+    }
+  }
+
+  return conflicts;
+}
+
+function main(): void {
+  const rootDir = import.meta.dirname;
+  const localesDir = path.resolve(rootDir, "..", "src", "locales", "en");
+  const outputDir = path.resolve(rootDir, "..", "src", "types");
+  const outputFile = path.join(outputDir, "keys.generated.ts");
+
+  // Read all JSON files from the English locales directory
+  if (!fs.existsSync(localesDir)) {
+    console.error(`Error: Locales directory not found: ${localesDir}`);
+    process.exit(1);
+  }
+
+  const jsonFiles = fs
+    .readdirSync(localesDir)
+    .filter((file) => file.endsWith(".json"))
+    .sort();
+
+  if (jsonFiles.length === 0) {
+    console.error(`Error: No JSON files found in ${localesDir}`);
+    process.exit(1);
+  }
+
+  // Track keys per namespace file for collision detection
+  const keysByFile = new Map<string, string[]>();
+  const allKeys = new Set<string>();
+  const collisions: string[] = [];
+
+  for (const file of jsonFiles) {
+    const filePath = path.join(localesDir, file);
+    const content = fs.readFileSync(filePath, "utf-8");
+    const parsed = (() => {
+      try {
+        return JSON.parse(content) as NestedObject;
+      } catch {
+        console.error(`Error: Failed to parse JSON in ${file}`);
+        process.exit(1);
+      }
+    })();
+
+    const fileKeys = flattenKeys(parsed);
+    keysByFile.set(file, fileKeys);
+
+    // Detect cross-namespace collisions
+    for (const key of fileKeys) {
+      if (allKeys.has(key)) {
+        // Find which file already had this key
+        for (const [otherFile, otherKeys] of keysByFile.entries()) {
+          if (otherFile !== file && otherKeys.includes(key)) {
+            collisions.push(`Cross-namespace collision: key "${key}" exists in both "${otherFile}" and "${file}"`);
+          }
+        }
+      }
+      allKeys.add(key);
+    }
+  }
+
+  if (collisions.length > 0) {
+    console.error("Error: Cross-namespace key collisions detected:");
+    for (const collision of collisions) {
+      console.error(`  ${collision}`);
+    }
+    process.exit(1);
+  }
+
+  // Detect path conflicts
+  const sortedKeys = [...allKeys].sort();
+  const pathConflicts = detectPathConflicts(sortedKeys);
+
+  if (pathConflicts.length > 0) {
+    console.error("Error: Path conflicts detected:");
+    for (const conflict of pathConflicts) {
+      console.error(`  ${conflict}`);
+    }
+    process.exit(1);
+  }
+
+  // Ensure output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Generate the output file
+  const keyLines = sortedKeys.map((key) => `  | "${key}"`).join("\n");
+  const output = `${COPYRIGHT_HEADER}
+
+// AUTO-GENERATED — DO NOT EDIT
+// Generated from ${jsonFiles.length} English namespace files (${sortedKeys.length} keys)
+// Run: pnpm run generate:types
+
+export type TTranslationKeys =
+${keyLines}
+  ;
+`;
+
+  fs.writeFileSync(outputFile, output, "utf-8");
+
+  console.log(`Generated ${sortedKeys.length} keys from ${jsonFiles.length} namespace files`);
+}
+
+main();
diff --git a/packages/i18n/scripts/lib/locale-io.ts b/packages/i18n/scripts/lib/locale-io.ts
new file mode 100644
index 0000000..8aecbd3
--- /dev/null
+++ b/packages/i18n/scripts/lib/locale-io.ts
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+export const LOCALES_DIR = path.resolve(import.meta.dirname, "../../src/locales");
+
+/** Recursively flatten an object into dot-notation keys. */
+export function flattenKeys(obj: Record<string, unknown>, prefix = ""): string[] {
+  const keys: string[] = [];
+  for (const [k, v] of Object.entries(obj)) {
+    const full = prefix ? `${prefix}.${k}` : k;
+    if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+      keys.push(...flattenKeys(v as Record<string, unknown>, full));
+    } else {
+      keys.push(full);
+    }
+  }
+  return keys;
+}
+
+/** Parse JSON from a file, including the file path in any error message. */
+export function readJsonFile(filePath: string): Record<string, unknown> {
+  const raw = fs.readFileSync(filePath, "utf-8");
+  try {
+    return JSON.parse(raw) as Record<string, unknown>;
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    throw new Error(`Failed to parse JSON at ${filePath}: ${message}`, { cause: err });
+  }
+}
+
+export interface NamespaceData {
+  name: string; // file stem, e.g. "common"
+  keys: Set<string>;
+  data: Record<string, unknown>; // original parsed object
+}
+
+export interface LocaleData {
+  locale: string;
+  namespaces: NamespaceData[];
+  allKeys: Set<string>;
+}
+
+export function listLocales(): string[] {
+  const entries = fs.readdirSync(LOCALES_DIR, { withFileTypes: true });
+  return entries
+    .filter((e) => e.isDirectory())
+    .map((e) => e.name)
+    .toSorted();
+}
+
+export function loadLocale(locale: string): LocaleData {
+  const localeDir = path.join(LOCALES_DIR, locale);
+  const files = fs.readdirSync(localeDir).filter((f) => f.endsWith(".json"));
+
+  const namespaces: NamespaceData[] = [];
+  const allKeys = new Set<string>();
+
+  for (const file of files) {
+    const filePath = path.join(localeDir, file);
+    const data = readJsonFile(filePath);
+    const name = path.basename(file, ".json");
+    const keys = flattenKeys(data);
+    const keySet = new Set(keys);
+    namespaces.push({ name, keys: keySet, data });
+    for (const key of keys) {
+      allKeys.add(key);
+    }
+  }
+
+  return { locale, namespaces, allKeys };
+}
diff --git a/packages/i18n/scripts/sync-check.ts b/packages/i18n/scripts/sync-check.ts
new file mode 100644
index 0000000..fb622ad
--- /dev/null
+++ b/packages/i18n/scripts/sync-check.ts
@@ -0,0 +1,245 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Usage:
+//   tsx packages/i18n/scripts/sync-check.ts          # Report only
+//   tsx packages/i18n/scripts/sync-check.ts --ci     # Exit 1 if issues found
+
+import type { LocaleData } from "./lib/locale-io.js";
+import { LOCALES_DIR, listLocales, loadLocale } from "./lib/locale-io.js";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Format a number with commas (e.g. 7712 -> "7,712"). */
+function fmt(n: number): string {
+  return n.toLocaleString("en-US");
+}
+
+// ---------------------------------------------------------------------------
+// Checks
+// ---------------------------------------------------------------------------
+
+interface CollisionEntry {
+  key: string;
+  files: string[];
+}
+
+/** Cross-namespace collision check: same flattened key in multiple namespace files. */
+function findCollisions(localeData: LocaleData): CollisionEntry[] {
+  const keyToFiles = new Map<string, string[]>();
+  for (const ns of localeData.namespaces) {
+    for (const key of ns.keys) {
+      const existing = keyToFiles.get(key);
+      if (existing) {
+        existing.push(`${ns.name}.json`);
+      } else {
+        keyToFiles.set(key, [`${ns.name}.json`]);
+      }
+    }
+  }
+
+  const collisions: CollisionEntry[] = [];
+  for (const [key, files] of keyToFiles) {
+    if (files.length > 1) {
+      collisions.push({ key, files });
+    }
+  }
+  return collisions.toSorted((a, b) => a.key.localeCompare(b.key));
+}
+
+interface PathConflict {
+  leaf: string;
+  branch: string;
+}
+
+/** Path conflict check: a key is both a leaf AND a prefix of another key. */
+function findPathConflicts(localeData: LocaleData): PathConflict[] {
+  const allKeysArray = [...localeData.allKeys].toSorted();
+  const conflicts: PathConflict[] = [];
+
+  // Build a set of all prefixes used in the keys
+  const prefixes = new Set<string>();
+  for (const key of allKeysArray) {
+    const parts = key.split(".");
+    for (let i = 1; i < parts.length; i++) {
+      prefixes.add(parts.slice(0, i).join("."));
+    }
+  }
+
+  // A conflict exists when a leaf key is also a prefix
+  for (const key of allKeysArray) {
+    if (prefixes.has(key)) {
+      // Find one example of a key that extends this prefix
+      const extending = allKeysArray.find((k) => k.startsWith(key + "."));
+      if (extending) {
+        conflicts.push({ leaf: key, branch: extending });
+      }
+    }
+  }
+
+  return conflicts;
+}
+
+interface LocaleComparison {
+  locale: string;
+  totalKeys: number;
+  missingKeys: string[];
+  staleKeys: string[];
+  coverage: number; // 0-100
+}
+
+function compareToEnglish(enKeys: Set<string>, other: LocaleData): LocaleComparison {
+  const missingKeys: string[] = [];
+  const staleKeys: string[] = [];
+
+  for (const key of enKeys) {
+    if (!other.allKeys.has(key)) {
+      missingKeys.push(key);
+    }
+  }
+
+  for (const key of other.allKeys) {
+    if (!enKeys.has(key)) {
+      staleKeys.push(key);
+    }
+  }
+
+  const coverage = enKeys.size > 0 ? ((enKeys.size - missingKeys.length) / enKeys.size) * 100 : 100;
+
+  return {
+    locale: other.locale,
+    totalKeys: other.allKeys.size,
+    missingKeys: missingKeys.toSorted(),
+    staleKeys: staleKeys.toSorted(),
+    coverage,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+function main() {
+  const ciMode = process.argv.includes("--ci");
+
+  // Discover all locale directories
+  const localeDirs = listLocales();
+
+  if (!localeDirs.includes("en")) {
+    console.error("ERROR: English locale (en) not found in", LOCALES_DIR);
+    process.exit(1);
+  }
+
+  // Load all locales
+  const localeDataMap = new Map<string, LocaleData>();
+  for (const locale of localeDirs) {
+    localeDataMap.set(locale, loadLocale(locale));
+  }
+
+  const enData = localeDataMap.get("en")!;
+
+  // Run checks
+  const collisions = findCollisions(enData);
+  const pathConflicts = findPathConflicts(enData);
+
+  const comparisons: LocaleComparison[] = [];
+  for (const locale of localeDirs) {
+    if (locale === "en") continue;
+    comparisons.push(compareToEnglish(enData.allKeys, localeDataMap.get(locale)!));
+  }
+
+  // -------------------------------------------------------------------------
+  // Print report
+  // -------------------------------------------------------------------------
+
+  let hasFailure = false;
+
+  console.log("\n=== Sync Check Results ===\n");
+  console.log(`  en:    ${fmt(enData.allKeys.size)} keys (source)\n`);
+
+  for (const comp of comparisons) {
+    const status = comp.missingKeys.length === 0 ? "✓" : "✗";
+    const missingStr = comp.missingKeys.length > 0 ? ` — ${fmt(comp.missingKeys.length)} missing` : "";
+    const staleStr = comp.staleKeys.length > 0 ? `, ${fmt(comp.staleKeys.length)} stale` : "";
+    console.log(
+      `  ${status} ${comp.locale.padEnd(10)} ${fmt(comp.totalKeys)} keys (${comp.coverage.toFixed(1)}%)${missingStr}${staleStr}`
+    );
+    if (comp.missingKeys.length > 0) {
+      hasFailure = true;
+    }
+  }
+
+  // Cross-namespace collisions
+  if (collisions.length > 0) {
+    hasFailure = true;
+    console.log("\nCROSS-NAMESPACE COLLISIONS:");
+    for (const c of collisions) {
+      console.log(`  ✗ "${c.key}" exists in: ${c.files.join(", ")}`);
+    }
+  }
+
+  // Path conflicts
+  if (pathConflicts.length > 0) {
+    hasFailure = true;
+    console.log("\nPATH CONFLICTS:");
+    for (const pc of pathConflicts) {
+      console.log(`  ✗ "${pc.leaf}" is a leaf but "${pc.branch}" extends it`);
+    }
+  }
+
+  // Missing keys detail
+  const withMissing = comparisons.filter((c) => c.missingKeys.length > 0);
+  if (withMissing.length > 0) {
+    console.log("\n--- Missing Keys Detail ---\n");
+    for (const comp of withMissing) {
+      console.log(`${comp.locale} (${fmt(comp.missingKeys.length)} missing):`);
+      const show = comp.missingKeys.slice(0, 20);
+      for (const key of show) {
+        console.log(`  - ${key}`);
+      }
+      if (comp.missingKeys.length > 20) {
+        console.log(`  ... and ${fmt(comp.missingKeys.length - 20)} more`);
+      }
+      console.log();
+    }
+  }
+
+  // Stale keys detail
+  const withStale = comparisons.filter((c) => c.staleKeys.length > 0);
+  if (withStale.length > 0) {
+    console.log("--- Stale Keys Detail ---\n");
+    for (const comp of withStale) {
+      console.log(`${comp.locale} (${fmt(comp.staleKeys.length)} stale):`);
+      const show = comp.staleKeys.slice(0, 20);
+      for (const key of show) {
+        console.log(`  - ${key}`);
+      }
+      if (comp.staleKeys.length > 20) {
+        console.log(`  ... and ${fmt(comp.staleKeys.length - 20)} more`);
+      }
+      console.log();
+    }
+  }
+
+  // CI exit code
+  if (ciMode && hasFailure) {
+    console.log("CI mode: exiting with code 1 due to missing keys, collisions, or path conflicts.");
+    process.exit(1);
+  }
+
+  if (!hasFailure) {
+    console.log("\nAll locales are in sync with English. No issues found.");
+  }
+}
+
+try {
+  main();
+} catch (err) {
+  console.error("Sync check failed:", err);
+  process.exit(1);
+}
diff --git a/packages/i18n/scripts/tsconfig.json b/packages/i18n/scripts/tsconfig.json
new file mode 100644
index 0000000..34d295e
--- /dev/null
+++ b/packages/i18n/scripts/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["."]
+}
diff --git a/packages/i18n/src/constants/index.ts b/packages/i18n/src/constants/index.ts
new file mode 100644
index 0000000..2536ae0
--- /dev/null
+++ b/packages/i18n/src/constants/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./language";
+export * from "./namespaces";
diff --git a/packages/i18n/src/constants/language.ts b/packages/i18n/src/constants/language.ts
new file mode 100644
index 0000000..829c1d0
--- /dev/null
+++ b/packages/i18n/src/constants/language.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TLanguage, ILanguageOption } from "../types";
+
+export const FALLBACK_LANGUAGE: TLanguage = "en";
+
+export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
+  { label: "English", value: "en" },
+  { label: "Français", value: "fr" },
+  { label: "Español", value: "es" },
+  { label: "日本語", value: "ja" },
+  { label: "简体中文", value: "zh-CN" },
+  { label: "繁體中文", value: "zh-TW" },
+  { label: "Русский", value: "ru" },
+  { label: "Italian", value: "it" },
+  { label: "Čeština", value: "cs" },
+  { label: "Slovenčina", value: "sk" },
+  { label: "Deutsch", value: "de" },
+  { label: "Українська", value: "ua" },
+  { label: "Polski", value: "pl" },
+  { label: "한국어", value: "ko" },
+  { label: "Português Brasil", value: "pt-BR" },
+  { label: "Indonesian", value: "id" },
+  { label: "Română", value: "ro" },
+  { label: "Tiếng việt", value: "vi-VN" },
+  { label: "Türkçe", value: "tr-TR" },
+  { label: "ქართული", value: "ka-ge" },
+];
+
+export const LANGUAGE_STORAGE_KEY = "userLanguage";
diff --git a/packages/i18n/src/constants/namespaces.ts b/packages/i18n/src/constants/namespaces.ts
new file mode 100644
index 0000000..3a75ed2
--- /dev/null
+++ b/packages/i18n/src/constants/namespaces.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const NAMESPACES = [
+  "accessibility",
+  "auth",
+  "automation",
+  "common",
+  "cycle",
+  "editor",
+  "empty-state",
+  "home",
+  "inbox",
+  "integration",
+  "module",
+  "navigation",
+  "notification",
+  "page",
+  "power-k",
+  "project",
+  "project-settings",
+  "settings",
+  "stickies",
+  "template",
+  "tour",
+  "update",
+  "wiki",
+  "work-item",
+  "work-item-type",
+  "workflow",
+  "workspace",
+  "workspace-settings",
+] as const;
+
+export type TNamespace = (typeof NAMESPACES)[number];
+
+export const DEFAULT_NAMESPACE: TNamespace = "common";
diff --git a/packages/i18n/src/core/index.ts b/packages/i18n/src/core/index.ts
new file mode 100644
index 0000000..cf7ac60
--- /dev/null
+++ b/packages/i18n/src/core/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { i18nInstance, initPromise } from "./instance";
+export { setLanguage } from "./set-language";
diff --git a/packages/i18n/src/core/instance.ts b/packages/i18n/src/core/instance.ts
new file mode 100644
index 0000000..58e425e
--- /dev/null
+++ b/packages/i18n/src/core/instance.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import ICU from "i18next-icu";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { SUPPORTED_LANGUAGES, FALLBACK_LANGUAGE, LANGUAGE_STORAGE_KEY } from "../constants/language";
+import { NAMESPACES, DEFAULT_NAMESPACE } from "../constants/namespaces";
+
+import type { i18n as I18nInstance } from "i18next";
+
+export const i18nInstance: I18nInstance = i18n.createInstance();
+
+i18nInstance
+  .use(ICU)
+  .use(initReactI18next)
+  .use(resourcesToBackend((language: string, namespace: string) => import(`../locales/${language}/${namespace}.json`)));
+
+const initialLng =
+  typeof window !== "undefined" ? localStorage.getItem(LANGUAGE_STORAGE_KEY) || FALLBACK_LANGUAGE : FALLBACK_LANGUAGE;
+
+export const initPromise = i18nInstance
+  .init({
+    lng: initialLng,
+    fallbackLng: FALLBACK_LANGUAGE,
+    supportedLngs: SUPPORTED_LANGUAGES.map((l) => l.value),
+    ns: NAMESPACES,
+    defaultNS: DEFAULT_NAMESPACE,
+    // fallbackNS ensures all namespaces are searched for any key, so components
+    // don't need to pass NAMESPACES to useTranslation (which triggers re-render cascades).
+    fallbackNS: NAMESPACES.filter((ns) => ns !== DEFAULT_NAMESPACE),
+    partialBundledLanguages: true,
+    keySeparator: ".",
+    nsSeparator: false,
+    interpolation: { escapeValue: false },
+    returnNull: false,
+    returnEmptyString: false,
+    // Pinned explicitly even though it's the default — i18next-icu intercepts the
+    // format pipeline and returns raw objects regardless of this flag, so the runtime
+    // guard in useTranslation is what actually prevents React crashes. Documenting
+    // intent here so this isn't accidentally flipped.
+    returnObjects: false,
+    react: { useSuspense: false },
+  })
+  // Eagerly pre-load all namespaces for the initial language so they're cached
+  // before any component renders. This prevents the re-render cascade that occurs
+  // when react-i18next triggers concurrent async loads for unloaded namespaces.
+  .then(() => i18nInstance.loadNamespaces(NAMESPACES));
diff --git a/packages/i18n/src/core/set-language.ts b/packages/i18n/src/core/set-language.ts
new file mode 100644
index 0000000..df77388
--- /dev/null
+++ b/packages/i18n/src/core/set-language.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { initPromise, i18nInstance } from "./instance";
+import { LANGUAGE_STORAGE_KEY } from "../constants/language";
+import type { TLanguage } from "../types";
+
+export async function setLanguage(lng: TLanguage): Promise<void> {
+  await initPromise;
+  await i18nInstance.changeLanguage(lng);
+  if (typeof window !== "undefined") {
+    localStorage.setItem(LANGUAGE_STORAGE_KEY, lng);
+    document.documentElement.lang = lng;
+  }
+}
diff --git a/packages/i18n/src/hooks/index.ts b/packages/i18n/src/hooks/index.ts
new file mode 100644
index 0000000..4728e51
--- /dev/null
+++ b/packages/i18n/src/hooks/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-translation";
diff --git a/packages/i18n/src/hooks/use-translation.ts b/packages/i18n/src/hooks/use-translation.ts
new file mode 100644
index 0000000..fbf2182
--- /dev/null
+++ b/packages/i18n/src/hooks/use-translation.ts
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+import { useTranslation as useI18nextTranslation } from "react-i18next";
+import { SUPPORTED_LANGUAGES, LANGUAGE_STORAGE_KEY } from "../constants/language";
+import type { TLanguage, ILanguageOption } from "../types";
+
+export type TTranslationStore = {
+  t: (key: string, params?: Record<string, unknown>) => string;
+  currentLocale: TLanguage;
+  changeLanguage: (lng: TLanguage) => void;
+  languages: ILanguageOption[];
+};
+
+// Crash guard: i18next-icu unconditionally returns raw objects when t() is called
+// with a branch (namespace-node) key, regardless of returnObjects:false. Without
+// this wrapper, React unmounts the subtree with "Objects are not valid as a React
+// child". Strings pass through; numbers/booleans are stringified; objects/null/
+// undefined fall back to the key itself plus a dev-mode warning. Can be removed
+// once t() gains key-level type safety (Phase 2 of the i18n roadmap).
+function coerceToString(key: string, value: unknown): string {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[i18n] Translation for key "${key}" is not a string (got ${
+        value === null ? "null" : typeof value
+      }). This is likely a missing key or a namespace-node lookup. Returning the key as fallback.`
+    );
+  }
+  return key;
+}
+
+export function useTranslation(): TTranslationStore {
+  // No namespace arg — fallbackNS in the i18next config ensures all namespaces
+  // are searched for any key. Passing NAMESPACES here would trigger concurrent
+  // async loads per component, causing a re-render cascade.
+  const { t, i18n } = useI18nextTranslation();
+
+  const changeLanguage = useCallback(
+    (lng: TLanguage) => {
+      void (async () => {
+        try {
+          await i18n.changeLanguage(lng);
+          if (typeof window === "undefined") return;
+          localStorage.setItem(LANGUAGE_STORAGE_KEY, lng);
+          document.documentElement.lang = lng;
+        } catch (err) {
+          console.error("Failed to change language:", err);
+        }
+      })();
+    },
+    [i18n]
+  );
+
+  return {
+    t: (key: string, params?: Record<string, unknown>) =>
+      coerceToString(key, params === undefined ? t(key) : t(key, params)),
+    currentLocale: i18n.language as TLanguage,
+    changeLanguage,
+    languages: SUPPORTED_LANGUAGES,
+  };
+}
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
new file mode 100644
index 0000000..832d045
--- /dev/null
+++ b/packages/i18n/src/index.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Components
+export { TranslationProvider } from "./provider";
+
+// Hooks
+export { useTranslation } from "./hooks/use-translation";
+export type { TTranslationStore } from "./hooks/use-translation";
+
+// Types
+export type { TLanguage, ILanguageOption } from "./types";
+export type { TTranslationKeys } from "./types";
+export type { TNamespace } from "./constants/namespaces";
+
+// Utilities
+export { setLanguage } from "./core/set-language";
+export { initPromise } from "./core";
+
+// Constants
+export { FALLBACK_LANGUAGE, SUPPORTED_LANGUAGES, LANGUAGE_STORAGE_KEY } from "./constants/language";
diff --git a/packages/i18n/src/locales/cs/accessibility.json b/packages/i18n/src/locales/cs/accessibility.json
new file mode 100644
index 0000000..676c2d4
--- /dev/null
+++ b/packages/i18n/src/locales/cs/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo pracovního prostoru",
+      "open_workspace_switcher": "Otevřít přepínač pracovního prostoru",
+      "open_user_menu": "Otevřít uživatelské menu",
+      "open_command_palette": "Otevřít paletu příkazů",
+      "open_extended_sidebar": "Otevřít rozšířený postranní panel",
+      "close_extended_sidebar": "Zavřít rozšířený postranní panel",
+      "create_favorites_folder": "Vytvořit složku oblíbených",
+      "open_folder": "Otevřít složku",
+      "close_folder": "Zavřít složku",
+      "open_favorites_menu": "Otevřít menu oblíbených",
+      "close_favorites_menu": "Zavřít menu oblíbených",
+      "enter_folder_name": "Zadejte název složky",
+      "create_new_project": "Vytvořit nový projekt",
+      "open_projects_menu": "Otevřít menu projektů",
+      "close_projects_menu": "Zavřít menu projektů",
+      "toggle_quick_actions_menu": "Přepnout menu rychlých akcí",
+      "open_project_menu": "Otevřít menu projektu",
+      "close_project_menu": "Zavřít menu projektu",
+      "collapse_sidebar": "Sbalit postranní panel",
+      "expand_sidebar": "Rozbalit postranní panel",
+      "edition_badge": "Otevřít modal placených plánů"
+    },
+    "auth_forms": {
+      "clear_email": "Vymazat e-mail",
+      "show_password": "Zobrazit heslo",
+      "hide_password": "Skrýt heslo",
+      "close_alert": "Zavřít upozornění",
+      "close_popover": "Zavřít vyskakovací okno"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/auth.json b/packages/i18n/src/locales/cs/auth.json
new file mode 100644
index 0000000..e6e2f46
--- /dev/null
+++ b/packages/i18n/src/locales/cs/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identita",
+    "description": "Nakonfigurujte svou doménu pro přístup k bezpečnostním funkcím včetně jednotného přihlašování.",
+    "domain_management": {
+      "header": "Správa domén",
+      "verified_domains": {
+        "header": "Ověřené domény",
+        "description": "Ověřte vlastnictví e-mailové domény pro povolení jednotného přihlašování.",
+        "button_text": "Přidat doménu",
+        "list": {
+          "domain_name": "Název domény",
+          "status": "Stav",
+          "status_verified": "Ověřeno",
+          "status_failed": "Selhalo",
+          "status_pending": "Čeká na vyřízení"
+        },
+        "add_domain": {
+          "title": "Přidat doménu",
+          "description": "Přidejte svou doménu pro konfiguraci SSO a její ověření.",
+          "form": {
+            "domain_label": "Doména",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Doména je povinná",
+            "domain_invalid": "Zadejte platný název domény (např. plane.so)"
+          },
+          "primary_button_text": "Přidat doménu",
+          "primary_button_loading_text": "Přidávání",
+          "toast": {
+            "success_title": "Úspěch!",
+            "success_message": "Doména byla úspěšně přidána. Ověřte ji přidáním DNS TXT záznamu.",
+            "error_message": "Nepodařilo se přidat doménu. Zkuste to prosím znovu."
+          }
+        },
+        "verify_domain": {
+          "title": "Ověřte svou doménu",
+          "description": "Postupujte podle těchto kroků pro ověření vaší domény.",
+          "instructions": {
+            "label": "Pokyny",
+            "step_1": "Přejděte do nastavení DNS pro váš doménový hostitel.",
+            "step_2": {
+              "part_1": "Vytvořte",
+              "part_2": "TXT záznam",
+              "part_3": "a vložte úplnou hodnotu záznamu uvedenou níže."
+            },
+            "step_3": "Tato aktualizace obvykle trvá několik minut, ale může trvat až 72 hodin.",
+            "step_4": "Klikněte na \"Ověřit doménu\" pro potvrzení po aktualizaci DNS záznamu."
+          },
+          "verification_code_label": "Hodnota TXT záznamu",
+          "verification_code_description": "Přidejte tento záznam do nastavení DNS",
+          "domain_label": "Doména",
+          "primary_button_text": "Ověřit doménu",
+          "primary_button_loading_text": "Ověřování",
+          "secondary_button_text": "Udělám to později",
+          "toast": {
+            "success_title": "Úspěch!",
+            "success_message": "Doména byla úspěšně ověřena.",
+            "error_message": "Nepodařilo se ověřit doménu. Zkuste to prosím znovu."
+          }
+        },
+        "delete_domain": {
+          "title": "Smazat doménu",
+          "description": {
+            "prefix": "Opravdu chcete smazat",
+            "suffix": "? Tuto akci nelze vrátit zpět."
+          },
+          "primary_button_text": "Smazat",
+          "primary_button_loading_text": "Mazání",
+          "secondary_button_text": "Zrušit",
+          "toast": {
+            "success_title": "Úspěch!",
+            "success_message": "Doména byla úspěšně smazána.",
+            "error_message": "Nepodařilo se smazat doménu. Zkuste to prosím znovu."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Jednotné přihlašování",
+      "disabled_message": "Přidejte ověřenou doménu pro konfiguraci SSO",
+      "configure": {
+        "create": "Nakonfigurovat",
+        "update": "Upravit"
+      },
+      "switch_alert_modal": {
+        "title": "Přepnout metodu SSO na {newProviderShortName}?",
+        "content": "Chystáte se povolit {newProviderLongName} ({newProviderShortName}). Tato akce automaticky zakáže {activeProviderLongName} ({activeProviderShortName}). Uživatelé, kteří se pokusí přihlásit přes {activeProviderShortName}, již nebudou moci přistupovat k platformě, dokud nepřepnou na novou metodu. Opravdu chcete pokračovat?",
+        "primary_button_text": "Přepnout",
+        "primary_button_text_loading": "Přepínání",
+        "secondary_button_text": "Zrušit"
+      },
+      "form_section": {
+        "title": "Detaily poskytnuté IdP pro {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Ukládání",
+        "save_changes": "Uložit změny",
+        "configure_only": "Pouze nakonfigurovat",
+        "configure_and_enable": "Nakonfigurovat a povolit",
+        "default": "Uložit"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} poskytnuté detaily pro váš IdP",
+        "button_text": "Získat detaily nastavení"
+      },
+      "saml": {
+        "header": "Povolit SAML",
+        "description": "Nakonfigurujte svého poskytovatele identity SAML pro povolení jednotného přihlašování.",
+        "configure": {
+          "title": "Povolit SAML",
+          "description": "Ověřte vlastnictví e-mailové domény pro přístup k bezpečnostním funkcím včetně jednotného přihlašování.",
+          "toast": {
+            "success_title": "Úspěch!",
+            "create_success_message": "Poskytovatel SAML byl úspěšně vytvořen.",
+            "update_success_message": "Poskytovatel SAML byl úspěšně aktualizován.",
+            "error_title": "Chyba!",
+            "error_message": "Nepodařilo se uložit poskytovatele SAML. Zkuste to prosím znovu."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Webové detaily",
+            "entity_id": {
+              "label": "Entity ID | Audience | Metadata informace",
+              "description": "Vygenerujeme tuto část metadat, která identifikuje tuto aplikaci Plane jako autorizovanou službu na vašem IdP."
+            },
+            "callback_url": {
+              "label": "URL jednotného přihlášení",
+              "description": "Vygenerujeme toto za vás. Přidejte toto do pole URL pro přesměrování při přihlášení vašeho IdP."
+            },
+            "logout_url": {
+              "label": "URL jednotného odhlášení",
+              "description": "Vygenerujeme toto za vás. Přidejte toto do pole URL pro přesměrování při jednotném odhlášení vašeho IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobilní detaily",
+            "entity_id": {
+              "label": "Entity ID | Audience | Metadata informace",
+              "description": "Vygenerujeme tuto část metadat, která identifikuje tuto aplikaci Plane jako autorizovanou službu na vašem IdP."
+            },
+            "callback_url": {
+              "label": "URL jednotného přihlášení",
+              "description": "Vygenerujeme toto za vás. Přidejte toto do pole URL pro přesměrování při přihlášení vašeho IdP."
+            },
+            "logout_url": {
+              "label": "URL jednotného odhlášení",
+              "description": "Vygenerujeme toto za vás. Přidejte toto do pole URL pro přesměrování při odhlášení vašeho IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Detaily mapování",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Povolit OIDC",
+        "description": "Nakonfigurujte svého poskytovatele identity OIDC pro povolení jednotného přihlašování.",
+        "configure": {
+          "title": "Povolit OIDC",
+          "description": "Ověřte vlastnictví e-mailové domény pro přístup k bezpečnostním funkcím včetně jednotného přihlašování.",
+          "toast": {
+            "success_title": "Úspěch!",
+            "create_success_message": "Poskytovatel OIDC byl úspěšně vytvořen.",
+            "update_success_message": "Poskytovatel OIDC byl úspěšně aktualizován.",
+            "error_title": "Chyba!",
+            "error_message": "Nepodařilo se uložit poskytovatele OIDC. Zkuste to prosím znovu."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Webové detaily",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "Vygenerujeme toto pro tuto aplikaci Plane. Přidejte toto jako důvěryhodný zdroj do odpovídajícího pole vašeho IdP."
+            },
+            "callback_url": {
+              "label": "URL pro přesměrování",
+              "description": "Vygenerujeme toto za vás. Přidejte toto do pole URL pro přesměrování při přihlášení vašeho IdP."
+            },
+            "logout_url": {
+              "label": "URL pro odhlášení",
+              "description": "Vygenerujeme toto za vás. Přidejte toto do pole URL pro přesměrování při odhlášení vašeho IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobilní detaily",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "Vygenerujeme toto pro tuto aplikaci Plane. Přidejte toto jako důvěryhodný zdroj do odpovídajícího pole vašeho IdP."
+            },
+            "callback_url": {
+              "label": "URL pro přesměrování",
+              "description": "Vygenerujeme toto za vás. Přidejte toto do pole URL pro přesměrování při přihlášení vašeho IdP."
+            },
+            "logout_url": {
+              "label": "URL pro odhlášení",
+              "description": "Vygenerujeme toto za vás. Přidejte toto do pole URL pro přesměrování při odhlášení vašeho IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "E-mail",
+        "placeholder": "jmeno@spolecnost.cz",
+        "errors": {
+          "required": "E-mail je povinný",
+          "invalid": "E-mail je neplatný"
+        }
+      },
+      "password": {
+        "label": "Heslo",
+        "set_password": "Nastavit heslo",
+        "placeholder": "Zadejte heslo",
+        "confirm_password": {
+          "label": "Potvrďte heslo",
+          "placeholder": "Potvrďte heslo"
+        },
+        "current_password": {
+          "label": "Aktuální heslo"
+        },
+        "new_password": {
+          "label": "Nové heslo",
+          "placeholder": "Zadejte nové heslo"
+        },
+        "change_password": {
+          "label": {
+            "default": "Změnit heslo",
+            "submitting": "Mění se heslo"
+          }
+        },
+        "errors": {
+          "match": "Hesla se neshodují",
+          "empty": "Zadejte prosím své heslo",
+          "length": "Délka hesla by měla být více než 8 znaků",
+          "strength": {
+            "weak": "Heslo je slabé",
+            "strong": "Heslo je silné"
+          }
+        },
+        "submit": "Nastavit heslo",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Úspěch!",
+              "message": "Heslo bylo úspěšně změněno."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Něco se pokazilo. Zkuste to prosím znovu."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Jedinečný kód",
+        "placeholder": "123456",
+        "paste_code": "Vložte kód zaslaný na váš e-mail",
+        "requesting_new_code": "Žádám o nový kód",
+        "sending_code": "Odesílám kód"
+      },
+      "already_have_an_account": "Už máte účet?",
+      "login": "Přihlásit se",
+      "create_account": "Vytvořit účet",
+      "new_to_plane": "Nový v Plane?",
+      "back_to_sign_in": "Zpět k přihlášení",
+      "resend_in": "Znovu odeslat za {seconds} sekund",
+      "sign_in_with_unique_code": "Přihlásit se pomocí jedinečného kódu",
+      "forgot_password": "Zapomněli jste heslo?",
+      "username": {
+        "label": "Uživatelské jméno",
+        "placeholder": "Zadejte své uživatelské jméno"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Vytvořte účet a začněte spravovat práci se svým týmem.",
+        "step": {
+          "email": {
+            "header": "Registrace",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Registrace",
+            "sub_header": "Zaregistrujte se pomocí kombinace e-mailu a hesla."
+          },
+          "unique_code": {
+            "header": "Registrace",
+            "sub_header": "Zaregistrujte se pomocí jedinečného kódu zaslaného na výše uvedenou e-mailovou adresu."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Zkuste nastavit silné heslo, abyste mohli pokračovat"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Přihlaste se a začněte spravovat práci se svým týmem.",
+        "step": {
+          "email": {
+            "header": "Přihlásit se nebo zaregistrovat",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Přihlásit se nebo zaregistrovat",
+            "sub_header": "Použijte svou kombinaci e-mailu a hesla pro přihlášení."
+          },
+          "unique_code": {
+            "header": "Přihlásit se nebo zaregistrovat",
+            "sub_header": "Přihlaste se pomocí jedinečného kódu zaslaného na výše uvedenou e-mailovou adresu."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Obnovte své heslo",
+      "description": "Zadejte ověřenou e-mailovou adresu vašeho uživatelského účtu a my vám zašleme odkaz na obnovení hesla.",
+      "email_sent": "Odeslali jsme odkaz na obnovení na vaši e-mailovou adresu",
+      "send_reset_link": "Odeslat odkaz na obnovení",
+      "errors": {
+        "smtp_not_enabled": "Vidíme, že váš správce neaktivoval SMTP, nebudeme schopni odeslat odkaz na obnovení hesla"
+      },
+      "toast": {
+        "success": {
+          "title": "E-mail odeslán",
+          "message": "Zkontrolujte svou doručenou poštu pro odkaz na obnovení hesla. Pokud se neobjeví během několika minut, zkontrolujte svou složku se spamem."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Něco se pokazilo. Zkuste to prosím znovu."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Nastavit nové heslo",
+      "description": "Zabezpečte svůj účet silným heslem"
+    },
+    "set_password": {
+      "title": "Zabezpečte svůj účet",
+      "description": "Nastavení hesla vám pomůže bezpečně se přihlásit"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Chyba!",
+          "message": "Nepodařilo se odhlásit. Zkuste to prosím znovu."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Pokračovat s {ldapProviderName}",
+        "sub_header": "Zadejte své přihlašovací údaje {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/automation.json b/packages/i18n/src/locales/cs/automation.json
new file mode 100644
index 0000000..5aa7d2f
--- /dev/null
+++ b/packages/i18n/src/locales/cs/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Vlastní automatizace",
+      "create_automation": "Vytvořit automatizaci"
+    },
+    "scope": {
+      "label": "Rozsah",
+      "run_on": "Spustit na"
+    },
+    "trigger": {
+      "label": "Spouštěč",
+      "add_trigger": "Přidat spouštěč",
+      "sidebar_header": "Konfigurace spouštěče",
+      "input_label": "Co je spouštěčem této automatizace?",
+      "input_placeholder": "Vyberte možnost",
+      "section_plane_events": "Události Plane",
+      "section_time_based": "Časově založené",
+      "fixed_schedule": "Pevný rozvrh",
+      "schedule": {
+        "frequency": "Frekvence",
+        "select_day": "Vyberte den",
+        "day_of_month": "Den v měsíci",
+        "monthly_every": "Každý",
+        "monthly_day_aria": "Den {day}",
+        "time": "Čas",
+        "hour": "Hodina",
+        "minute": "Minuta",
+        "hour_suffix": "hod",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Časové pásmo",
+        "timezone_placeholder": "Vyberte časové pásmo",
+        "frequency_daily": "Denně",
+        "frequency_weekly": "Týdně",
+        "frequency_monthly": "Měsíčně",
+        "on": "V",
+        "validation_weekly_day_required": "Vyberte alespoň jeden den v týdnu.",
+        "validation_monthly_date_required": "Vyberte den v měsíci.",
+        "main_content_schedule_summary_daily": "Každý den v {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Každý týden v {days} v {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Každý měsíc v den {day} v {time} ({timezone}).",
+        "schedule_mode": "Režim plánování",
+        "schedule_mode_fixed": "Pevný",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Zadejte výraz Cron",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Neplatný výraz cron.",
+        "cron_preview": "Tento výraz Cron spouští \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Zpět",
+        "next": "Přidat akci"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Po vytvoření nelze typ spouštěče změnit"
+      }
+    },
+    "condition": {
+      "label": "Za předpokladu",
+      "add_condition": "Přidat podmínku",
+      "adding_condition": "Přidávání podmínky"
+    },
+    "action": {
+      "label": "Akce",
+      "add_action": "Přidat akci",
+      "sidebar_header": "Akce",
+      "input_label": "Co automatizace dělá?",
+      "input_placeholder": "Vyberte možnost",
+      "handler_name": {
+        "add_comment": "Přidat komentář",
+        "change_property": "Změnit vlastnost",
+        "run_script": "Spustit skript"
+      },
+      "configuration": {
+        "label": "Konfigurace",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Vyberte vlastnost",
+            "change_type": "Vybrat",
+            "property_value_select": "{count, plural, one{Vybrat hodnotu} other{Vybrat hodnoty}}",
+            "property_value_select_date": "Vybrat datum"
+          },
+          "validation": {
+            "property_name_required": "Název vlastnosti je povinný",
+            "change_type_required": "Typ změny je povinný",
+            "property_value_required": "Hodnota vlastnosti je povinná"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Přidat komentář"
+      },
+      "run_script_block": {
+        "title": "Spustit skript"
+      },
+      "change_property_block": {
+        "title": "Změnit vlastnost"
+      },
+      "validation": {
+        "delete_only_action": "Před smazáním jediné akce automatizaci zakažte."
+      }
+    },
+    "conjunctions": {
+      "and": "A",
+      "or": "Nebo",
+      "if": "Pokud",
+      "then": "Pak"
+    },
+    "enable": {
+      "alert": "Stiskněte 'Povolit', když je vaše automatizace dokončena. Po povolení bude automatizace připravena ke spuštění.",
+      "validation": {
+        "required": "Automatizace musí mít spouštěč a alespoň jednu akci, aby mohla být povolena."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Automatizace musí být před smazáním zakázána."
+      }
+    },
+    "table": {
+      "title": "Název automatizace",
+      "scope": "Rozsah",
+      "projects": "Projekty",
+      "last_run_on": "Naposledy spuštěno",
+      "created_on": "Vytvořeno",
+      "last_updated_on": "Naposledy aktualizováno",
+      "last_run_status": "Stav posledního spuštění",
+      "average_duration": "Průměrná doba trvání",
+      "owner": "Vlastník",
+      "executions": "Spuštění"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Vytvořit automatizaci",
+        "update": "Aktualizovat automatizaci"
+      },
+      "title": {
+        "placeholder": "Pojmenujte svou automatizaci.",
+        "required_error": "Název je povinný"
+      },
+      "description": {
+        "placeholder": "Popište svou automatizaci."
+      },
+      "submit_button": {
+        "create": "Vytvořit automatizaci",
+        "update": "Aktualizovat automatizaci"
+      }
+    },
+    "delete_modal": {
+      "heading": "Smazat automatizaci"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Zobrazit chyby",
+        "all": "Vše",
+        "only_activity": "Pouze aktivita",
+        "only_run_history": "Pouze historie spuštění"
+      },
+      "run_history": {
+        "initiator": "Iniciátor"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Automatizace byla úspěšně vytvořena."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Vytvoření automatizace se nezdařilo."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Automatizace byla úspěšně aktualizována."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Aktualizace automatizace se nezdařila."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Automatizace byla úspěšně povolena."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Povolení automatizace se nezdařilo."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Automatizace byla úspěšně zakázána."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Zakázání automatizace se nezdařilo."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automatizace smazána",
+          "message": "{name}, automatizace, byla nyní odstraněna z vašeho projektu."
+        },
+        "error": {
+          "title": "Tuto automatizaci se tentokrát nepodařilo smazat.",
+          "message": "Zkuste ji smazat znovu nebo se k ní vraťte později. Pokud ji stále nemůžete smazat, kontaktujte nás."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Chyba!",
+            "message": "Vytvoření akce se nezdařilo. Zkuste to znovu!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Chyba!",
+            "message": "Aktualizace akce se nezdařila. Zkuste to znovu!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Zatím nejsou k zobrazení žádné automatizace.",
+        "description": "Automatizace vám pomáhají eliminovat opakující se úkoly nastavením spouštěčů, podmínek a akcí. Vytvořte jednu, abyste ušetřili čas a udrželi práci v plynulém chodu."
+      },
+      "upgrade": {
+        "title": "Automatizace",
+        "description": "Automatizace jsou způsob, jak automatizovat úkoly ve vašem projektu.",
+        "sub_description": "Získejte zpět 80% svého administrativního času, když používáte automatizace."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Vyberte projekty, na kterých se má tato automatizace spouštět",
+        "all_projects": {
+          "label": "Všechny projekty",
+          "description": "Automatizace poběží pro všechny projekty v pracovním prostoru."
+        },
+        "select_projects": {
+          "label": "Vybrat projekty",
+          "description": "Automatizace poběží pro vybrané projekty v pracovním prostoru.",
+          "placeholder": "Vybrat projekty"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automatizace",
+        "title": "Automatizace",
+        "description": "Standardizujte procesy napříč pracovním prostorem pomocí globálních automatizací."
+      },
+      "table": {
+        "scope": {
+          "global": "Globální",
+          "project": {
+            "label": "Projekt",
+            "multiple": "Více",
+            "all": "Vše"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/common.json b/packages/i18n/src/locales/cs/common.json
new file mode 100644
index 0000000..c1e9372
--- /dev/null
+++ b/packages/i18n/src/locales/cs/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Pracujeme na tom. Pokud potřebujete okamžitou pomoc,",
+    "reach_out_to_us": "kontaktujte nás",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Jinak zkuste občas obnovit stránku nebo navštivte naši",
+    "status_page": "stránku stavu"
+  },
+  "submit": "Odeslat",
+  "cancel": "Zrušit",
+  "loading": "Načítání",
+  "error": "Chyba",
+  "success": "Úspěch",
+  "warning": "Varování",
+  "info": "Informace",
+  "close": "Zavřít",
+  "yes": "Ano",
+  "no": "Ne",
+  "ok": "OK",
+  "name": "Název",
+  "unknown_user": "Neznámý uživatel",
+  "description": "Popis",
+  "search": "Hledat",
+  "add_member": "Přidat člena",
+  "adding_members": "Přidávání členů",
+  "remove_member": "Odebrat člena",
+  "add_members": "Přidat členy",
+  "adding_member": "Přidávání členů",
+  "remove_members": "Odebrat členy",
+  "add": "Přidat",
+  "adding": "Přidávání",
+  "remove": "Odebrat",
+  "add_new": "Přidat nový",
+  "remove_selected": "Odebrat vybrané",
+  "first_name": "Křestní jméno",
+  "last_name": "Příjmení",
+  "email": "E-mail",
+  "display_name": "Zobrazované jméno",
+  "role": "Role",
+  "timezone": "Časové pásmo",
+  "avatar": "Profilový obrázek",
+  "cover_image": "Úvodní obrázek",
+  "password": "Heslo",
+  "change_cover": "Změnit úvodní obrázek",
+  "language": "Jazyk",
+  "saving": "Ukládání",
+  "save_changes": "Uložit změny",
+  "deactivate_account": "Deaktivovat účet",
+  "deactivate_account_description": "Při deaktivaci účtu budou všechna data a prostředky v rámci tohoto účtu trvale odstraněny a nelze je obnovit.",
+  "profile_settings": "Nastavení profilu",
+  "your_account": "Váš účet",
+  "security": "Zabezpečení",
+  "activity": "Aktivita",
+  "activity_empty_state": {
+    "no_activity": "Zatím žádná aktivita",
+    "no_transitions": "Zatím žádné přechody",
+    "no_comments": "Zatím žádné komentáře",
+    "no_worklogs": "Zatím žádné záznamy práce",
+    "no_history": "Zatím žádná historie"
+  },
+  "preferences": "Předvolby",
+  "language_and_time": "Jazyk a čas",
+  "notifications": "Oznámení",
+  "workspaces": "Pracovní prostory",
+  "create_workspace": "Vytvořit pracovní prostor",
+  "invitations": "Pozvánky",
+  "summary": "Shrnutí",
+  "assigned": "Přiřazeno",
+  "created": "Vytvořeno",
+  "subscribed": "Odebíráno",
+  "you_do_not_have_the_permission_to_access_this_page": "Nemáte oprávnění pro přístup k této stránce.",
+  "something_went_wrong_please_try_again": "Něco se pokazilo. Zkuste to prosím znovu.",
+  "load_more": "Načíst více",
+  "select_or_customize_your_interface_color_scheme": "Vyberte nebo přizpůsobte barevné schéma rozhraní.",
+  "timezone_setting": "Aktuální nastavení časového pásma.",
+  "language_setting": "Vyberte jazyk používaný v uživatelském rozhraní.",
+  "settings_moved_to_preferences": "Nastavení časového pásma a jazyka bylo přesunuto do předvoleb.",
+  "go_to_preferences": "Přejít do předvoleb",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Vyberte styl pohybu kurzoru, který vám vyhovuje.",
+  "theme": "Téma",
+  "smooth_cursor": "Plynulý kurzor",
+  "system_preference": "Systémové předvolby",
+  "light": "Světlé",
+  "dark": "Tmavé",
+  "light_contrast": "Světlý vysoký kontrast",
+  "dark_contrast": "Tmavý vysoký kontrast",
+  "custom": "Vlastní téma",
+  "select_your_theme": "Vyberte téma",
+  "customize_your_theme": "Přizpůsobte si téma",
+  "background_color": "Barva pozadí",
+  "text_color": "Barva textu",
+  "primary_color": "Hlavní barva (téma)",
+  "sidebar_background_color": "Barva pozadí postranního panelu",
+  "sidebar_text_color": "Barva textu postranního panelu",
+  "set_theme": "Nastavit téma",
+  "enter_a_valid_hex_code_of_6_characters": "Zadejte platný hexadecimální kód o 6 znacích",
+  "background_color_is_required": "Barva pozadí je povinná",
+  "text_color_is_required": "Barva textu je povinná",
+  "primary_color_is_required": "Hlavní barva je povinná",
+  "sidebar_background_color_is_required": "Barva pozadí postranního panelu je povinná",
+  "sidebar_text_color_is_required": "Barva textu postranního panelu je povinná",
+  "updating_theme": "Aktualizace tématu",
+  "theme_updated_successfully": "Téma úspěšně aktualizováno",
+  "failed_to_update_the_theme": "Aktualizace tématu se nezdařila",
+  "email_notifications": "E-mailová oznámení",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Zůstaňte v obraze u pracovních položek, které odebíráte. Aktivujte toto pro zasílání oznámení.",
+  "email_notification_setting_updated_successfully": "Nastavení e-mailových oznámení úspěšně aktualizováno",
+  "failed_to_update_email_notification_setting": "Aktualizace nastavení e-mailových oznámení se nezdařila",
+  "notify_me_when": "Upozornit mě, když",
+  "property_changes": "Změny vlastností",
+  "property_changes_description": "Upozornit mě, když se změní vlastnosti pracovních položek jako přiřazení, priorita, odhady nebo cokoli jiného.",
+  "state_change": "Změna stavu",
+  "state_change_description": "Upozornit mě, když se pracovní položka přesune do jiného stavu",
+  "issue_completed": "Pracovní položka dokončena",
+  "issue_completed_description": "Upozornit mě pouze při dokončení pracovní položky",
+  "comments": "Komentáře",
+  "comments_description": "Upozornit mě, když někdo přidá komentář k pracovní položce",
+  "mentions": "Zmínky",
+  "mentions_description": "Upozornit mě pouze, když mě někdo zmíní v komentářích nebo popisu",
+  "old_password": "Staré heslo",
+  "general_settings": "Obecná nastavení",
+  "sign_out": "Odhlásit se",
+  "signing_out": "Odhlašování",
+  "active_cycles": "Aktivní cykly",
+  "active_cycles_description": "Sledujte cykly napříč projekty, monitorujte vysoce prioritní pracovní položky a zaměřte se na cykly vyžadující pozornost.",
+  "on_demand_snapshots_of_all_your_cycles": "Snapshots všech vašich cyklů na vyžádání",
+  "upgrade": "Upgradovat",
+  "10000_feet_view": "Pohled z 10 000 stop na všechny aktivní cykly.",
+  "10000_feet_view_description": "Přibližte si všechny běžící cykly napříč všemi projekty najednou, místo přepínání mezi cykly v každém projektu.",
+  "get_snapshot_of_each_active_cycle": "Získejte snapshot každého aktivního cyklu.",
+  "get_snapshot_of_each_active_cycle_description": "Sledujte klíčové metriky pro všechny aktivní cykly, zjistěte jejich průběh a porovnejte rozsah s termíny.",
+  "compare_burndowns": "Porovnejte burndowny.",
+  "compare_burndowns_description": "Sledujte výkonnost týmů prostřednictvím přehledu burndown reportů každého cyklu.",
+  "quickly_see_make_or_break_issues": "Rychle zjistěte kritické pracovní položky.",
+  "quickly_see_make_or_break_issues_description": "Prohlédněte si vysoce prioritní pracovní položky pro každý cyklus vzhledem k termínům. Zobrazte všechny na jedno kliknutí.",
+  "zoom_into_cycles_that_need_attention": "Zaměřte se na cykly vyžadující pozornost.",
+  "zoom_into_cycles_that_need_attention_description": "Prozkoumejte stav jakéhokoli cyklu, který nesplňuje očekávání, na jedno kliknutí.",
+  "stay_ahead_of_blockers": "Předvídejte překážky.",
+  "stay_ahead_of_blockers_description": "Identifikujte problémy mezi projekty a zjistěte závislosti mezi cykly, které nejsou z jiných pohledů zřejmé.",
+  "analytics": "Analytika",
+  "workspace_invites": "Pozvánky do pracovního prostoru",
+  "enter_god_mode": "Vstoupit do režimu boha",
+  "workspace_logo": "Logo pracovního prostoru",
+  "new_issue": "Nová pracovní položka",
+  "your_work": "Vaše práce",
+  "drafts": "Koncepty",
+  "projects": "Projekty",
+  "views": "Pohledy",
+  "archives": "Archivy",
+  "settings": "Nastavení",
+  "failed_to_move_favorite": "Přesunutí oblíbeného se nezdařilo",
+  "favorites": "Oblíbené",
+  "no_favorites_yet": "Zatím žádné oblíbené",
+  "create_folder": "Vytvořit složku",
+  "new_folder": "Nová složka",
+  "favorite_updated_successfully": "Oblíbené úspěšně aktualizováno",
+  "favorite_created_successfully": "Oblíbené úspěšně vytvořeno",
+  "folder_already_exists": "Složka již existuje",
+  "folder_name_cannot_be_empty": "Název složky nemůže být prázdný",
+  "something_went_wrong": "Něco se pokazilo",
+  "failed_to_reorder_favorite": "Změna pořadí oblíbeného se nezdařila",
+  "favorite_removed_successfully": "Oblíbené úspěšně odstraněno",
+  "failed_to_create_favorite": "Vytvoření oblíbeného se nezdařilo",
+  "failed_to_rename_favorite": "Přejmenování oblíbeného se nezdařilo",
+  "project_link_copied_to_clipboard": "Odkaz na projekt zkopírován do schránky",
+  "link_copied": "Odkaz zkopírován",
+  "add_project": "Přidat projekt",
+  "create_project": "Vytvořit projekt",
+  "failed_to_remove_project_from_favorites": "Nepodařilo se odstranit projekt z oblíbených. Zkuste to prosím znovu.",
+  "project_created_successfully": "Projekt úspěšně vytvořen",
+  "project_created_successfully_description": "Projekt byl úspěšně vytvořen. Nyní můžete začít přidávat pracovní položky.",
+  "project_name_already_taken": "Název projektu už je zabraný.",
+  "project_name_cannot_contain_special_characters": "Název projektu nesmí obsahovat speciální znaky.",
+  "project_identifier_already_taken": "Identifikátor projektu už je zabraný.",
+  "project_cover_image_alt": "Úvodní obrázek projektu",
+  "name_is_required": "Název je povinný",
+  "title_should_be_less_than_255_characters": "Název by měl být kratší než 255 znaků",
+  "project_name": "Název projektu",
+  "project_id_must_be_at_least_1_character": "ID projektu musí mít alespoň 1 znak",
+  "project_id_must_be_at_most_5_characters": "ID projektu může mít maximálně 5 znaků",
+  "project_id": "ID projektu",
+  "project_id_tooltip_content": "Pomáhá jednoznačně identifikovat pracovní položky v projektu. Max. 50 znaků.",
+  "description_placeholder": "Popis",
+  "only_alphanumeric_non_latin_characters_allowed": "Jsou povoleny pouze alfanumerické a nelatinské znaky.",
+  "project_id_is_required": "ID projektu je povinné",
+  "project_id_allowed_char": "Jsou povoleny pouze alfanumerické a nelatinské znaky.",
+  "project_id_min_char": "ID projektu musí mít alespoň 1 znak",
+  "project_id_max_char": "ID projektu může mít maximálně {max} znaků",
+  "project_description_placeholder": "Zadejte popis projektu",
+  "select_network": "Vybrat síť",
+  "lead": "Vedoucí",
+  "date_range": "Rozsah dat",
+  "private": "Soukromý",
+  "public": "Veřejný",
+  "accessible_only_by_invite": "Přístupné pouze na pozvání",
+  "anyone_in_the_workspace_except_guests_can_join": "Kdokoli v pracovním prostoru kromě hostů se může připojit",
+  "creating": "Vytváření",
+  "creating_project": "Vytváření projektu",
+  "adding_project_to_favorites": "Přidávání projektu do oblíbených",
+  "project_added_to_favorites": "Projekt přidán do oblíbených",
+  "couldnt_add_the_project_to_favorites": "Nepodařilo se přidat projekt do oblíbených. Zkuste to prosím znovu.",
+  "removing_project_from_favorites": "Odebírání projektu z oblíbených",
+  "project_removed_from_favorites": "Projekt odstraněn z oblíbených",
+  "couldnt_remove_the_project_from_favorites": "Nepodařilo se odstranit projekt z oblíbených. Zkuste to prosím znovu.",
+  "add_to_favorites": "Přidat do oblíbených",
+  "remove_from_favorites": "Odebrat z oblíbených",
+  "publish_project": "Publikovat projekt",
+  "publish": "Publikovat",
+  "copy_link": "Kopírovat odkaz",
+  "leave_project": "Opustit projekt",
+  "join_the_project_to_rearrange": "Připojte se k projektu pro změnu uspořádání",
+  "drag_to_rearrange": "Přetáhněte pro uspořádání",
+  "congrats": "Gratulujeme!",
+  "open_project": "Otevřít projekt",
+  "issues": "Pracovní položky",
+  "cycles": "Cykly",
+  "modules": "Moduly",
+  "pages": "Stránky",
+  "intake": "Příjem",
+  "renew": "Obnovit",
+  "preview": "Náhled",
+  "time_tracking": "Sledování času",
+  "work_management": "Správa práce",
+  "projects_and_issues": "Projekty a pracovní položky",
+  "projects_and_issues_description": "Aktivujte nebo deaktivujte tyto funkce v projektu.",
+  "cycles_description": "Časově vymezte práci podle projektu a podle potřeby upravte období. Jeden cyklus může trvat 2 týdny, další jen 1 týden.",
+  "modules_description": "Organizujte práci do podprojektů s vyhrazenými vedoucími a přiřazenými osobami.",
+  "views_description": "Uložte vlastní řazení, filtry a možnosti zobrazení nebo je sdílejte se svým týmem.",
+  "pages_description": "Vytvářejte a upravujte volně strukturovaný obsah – poznámky, dokumenty, cokoli.",
+  "intake_description": "Umožněte nečlenům sdílet chyby, zpětnou vazbu a návrhy, aniž by narušili váš pracovní postup.",
+  "time_tracking_description": "Zaznamenávejte čas strávený na pracovních položkách a projektech.",
+  "work_management_description": "Spravujte svou práci a projekty snadno.",
+  "documentation": "Dokumentace",
+  "message_support": "Kontaktovat podporu",
+  "contact_sales": "Kontaktovat prodej",
+  "hyper_mode": "Hyper režim",
+  "keyboard_shortcuts": "Klávesové zkratky",
+  "whats_new": "Co je nového?",
+  "version": "Verze",
+  "we_are_having_trouble_fetching_the_updates": "Máme potíže s načítáním aktualizací.",
+  "our_changelogs": "naše změnové protokoly",
+  "for_the_latest_updates": "pro nejnovější aktualizace.",
+  "please_visit": "Navštivte",
+  "docs": "Dokumentace",
+  "full_changelog": "Úplný změnový protokol",
+  "support": "Podpora",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Poháněno Plane Pages",
+  "please_select_at_least_one_invitation": "Vyberte alespoň jednu pozvánku.",
+  "please_select_at_least_one_invitation_description": "Vyberte alespoň jednu pozvánku pro připojení k pracovnímu prostoru.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Vidíme, že vás někdo pozval do pracovního prostoru",
+  "join_a_workspace": "Připojit se k pracovnímu prostoru",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Vidíme, že vás někdo pozval do pracovního prostoru",
+  "join_a_workspace_description": "Připojit se k pracovnímu prostoru",
+  "accept_and_join": "Přijmout a připojit se",
+  "go_home": "Domů",
+  "no_pending_invites": "Žádné čekající pozvánky",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Zde uvidíte, pokud vás někdo pozve do pracovního prostoru",
+  "back_to_home": "Zpět na domovskou stránku",
+  "workspace_name": "název-pracovního-prostoru",
+  "deactivate_your_account": "Deaktivovat váš účet",
+  "deactivate_your_account_description": "Po deaktivaci nebudete moci být přiřazeni k pracovním položkám a nebude vám účtován poplatek za pracovní prostor. Pro opětovnou aktivaci účtu budete potřebovat pozvánku do pracovního prostoru na tento e-mail.",
+  "deactivating": "Deaktivace",
+  "confirm": "Potvrdit",
+  "confirming": "Potvrzování",
+  "draft_created": "Koncept vytvořen",
+  "issue_created_successfully": "Pracovní položka úspěšně vytvořena",
+  "draft_creation_failed": "Vytvoření konceptu se nezdařilo",
+  "issue_creation_failed": "Vytvoření pracovní položky se nezdařilo",
+  "draft_issue": "Koncept pracovní položky",
+  "issue_updated_successfully": "Pracovní položka úspěšně aktualizována",
+  "issue_could_not_be_updated": "Aktualizace pracovní položky se nezdařila",
+  "create_a_draft": "Vytvořit koncept",
+  "save_to_drafts": "Uložit do konceptů",
+  "save": "Uložit",
+  "update": "Aktualizovat",
+  "updating": "Aktualizace",
+  "create_new_issue": "Vytvořit novou pracovní položku",
+  "editor_is_not_ready_to_discard_changes": "Editor není připraven zahodit změny",
+  "failed_to_move_issue_to_project": "Přesunutí pracovní položky do projektu se nezdařilo",
+  "create_more": "Vytvořit více",
+  "add_to_project": "Přidat do projektu",
+  "discard": "Zahodit",
+  "duplicate_issue_found": "Nalezena duplicitní pracovní položka",
+  "duplicate_issues_found": "Nalezeny duplicitní pracovní položky",
+  "no_matching_results": "Žádné odpovídající výsledky",
+  "title_is_required": "Název je povinný",
+  "title": "Název",
+  "state": "Stav",
+  "transition": "Přechod",
+  "history": "Historie",
+  "priority": "Priorita",
+  "none": "Žádná",
+  "urgent": "Naléhavá",
+  "high": "Vysoká",
+  "medium": "Střední",
+  "low": "Nízká",
+  "members": "Členové",
+  "assignee": "Přiřazeno",
+  "assignees": "Přiřazení",
+  "subscriber": "{count, plural, one{# Odběratel} few{# Odběratelé} other{# Odběratelů}}",
+  "you": "Vy",
+  "labels": "Štítky",
+  "create_new_label": "Vytvořit nový štítek",
+  "label_name": "Název štítku",
+  "failed_to_create_label": "Vytvoření štítku se nezdařilo. Zkuste to prosím znovu.",
+  "start_date": "Datum začátku",
+  "end_date": "Datum ukončení",
+  "due_date": "Termín",
+  "target_date": "Cílové datum",
+  "estimate": "Odhad",
+  "change_parent_issue": "Změnit nadřazenou pracovní položku",
+  "remove_parent_issue": "Odebrat nadřazenou pracovní položku",
+  "add_parent": "Přidat nadřazenou",
+  "loading_members": "Načítání členů",
+  "view_link_copied_to_clipboard": "Odkaz na pohled zkopírován do schránky.",
+  "required": "Povinné",
+  "optional": "Volitelné",
+  "Cancel": "Zrušit",
+  "edit": "Upravit",
+  "archive": "Archivovat",
+  "restore": "Obnovit",
+  "open_in_new_tab": "Otevřít v nové záložce",
+  "delete": "Smazat",
+  "deleting": "Mazání",
+  "make_a_copy": "Vytvořit kopii",
+  "move_to_project": "Přesunout do projektu",
+  "good": "Dobrý",
+  "morning": "ráno",
+  "afternoon": "odpoledne",
+  "evening": "večer",
+  "show_all": "Zobrazit vše",
+  "show_less": "Zobrazit méně",
+  "no_data_yet": "Zatím žádná data",
+  "syncing": "Synchronizace",
+  "add_work_item": "Přidat pracovní položku",
+  "advanced_description_placeholder": "Stiskněte '/' pro příkazy",
+  "create_work_item": "Vytvořit pracovní položku",
+  "attachments": "Přílohy",
+  "declining": "Odmítání",
+  "declined": "Odmítnuto",
+  "decline": "Odmítnout",
+  "unassigned": "Nepřiřazeno",
+  "work_items": "Pracovní položky",
+  "add_link": "Přidat odkaz",
+  "points": "Body",
+  "no_assignee": "Žádné přiřazení",
+  "no_assignees_yet": "Zatím žádní přiřazení",
+  "no_labels_yet": "Zatím žádné štítky",
+  "ideal": "Ideální",
+  "current": "Aktuální",
+  "no_matching_members": "Žádní odpovídající členové",
+  "leaving": "Opouštění",
+  "removing": "Odebírání",
+  "leave": "Opustit",
+  "refresh": "Obnovit",
+  "refreshing": "Obnovování",
+  "refresh_status": "Obnovit stav",
+  "prev": "Předchozí",
+  "next": "Další",
+  "re_generating": "Znovu generování",
+  "re_generate": "Znovu generovat",
+  "re_generate_key": "Znovu generovat klíč",
+  "export": "Exportovat",
+  "member": "{count, plural, one{# člen} few{# členové} other{# členů}}",
+  "new_password_must_be_different_from_old_password": "Nové heslo musí být odlišné od starého hesla",
+  "edited": "upraveno",
+  "bot": "Bot",
+  "settings_description": "Spravujte nastavení svého účtu, pracovního prostoru a projektů na jednom místě. Přepínáním mezi záložkami je můžete snadno konfigurovat.",
+  "back_to_workspace": "Zpět do pracovního prostoru",
+  "upgrade_request": "Požádejte správce pracovního prostoru o upgrade.",
+  "copied_to_clipboard": "Zkopírováno do schránky",
+  "copied_to_clipboard_description": "URL byla úspěšně zkopírována do schránky",
+  "toast": {
+    "success": "Úspěch!",
+    "error": "Chyba!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Odkaz vytvořen",
+        "message": "Odkaz byl úspěšně vytvořen"
+      },
+      "not_created": {
+        "title": "Odkaz nebyl vytvořen",
+        "message": "Odkaz se nepodařilo vytvořit"
+      },
+      "updated": {
+        "title": "Odkaz aktualizován",
+        "message": "Odkaz byl úspěšně aktualizován"
+      },
+      "not_updated": {
+        "title": "Odkaz nebyl aktualizován",
+        "message": "Odkaz se nepodařilo aktualizovat"
+      },
+      "removed": {
+        "title": "Odkaz odstraněn",
+        "message": "Odkaz byl úspěšně odstraněn"
+      },
+      "not_removed": {
+        "title": "Odkaz nebyl odstraněn",
+        "message": "Odkaz se nepodařilo odstranit"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL je neplatná",
+        "placeholder": "Zadejte nebo vložte URL"
+      },
+      "title": {
+        "text": "Zobrazovaný název",
+        "placeholder": "Jak chcete tento odkaz vidět"
+      }
+    }
+  },
+  "common": {
+    "all": "Vše",
+    "no_items_in_this_group": "V této skupině nejsou žádné položky",
+    "drop_here_to_move": "Přetáhněte sem pro přesunutí",
+    "states": "Stavy",
+    "state": "Stav",
+    "state_groups": "Skupiny stavů",
+    "state_group": "Skupina stavů",
+    "priorities": "Priority",
+    "priority": "Priorita",
+    "team_project": "Týmový projekt",
+    "project": "Projekt",
+    "cycle": "Cyklus",
+    "cycles": "Cykly",
+    "module": "Modul",
+    "modules": "Moduly",
+    "labels": "Štítky",
+    "label": "Štítek",
+    "admins": "Administrátoři",
+    "users": "Uživatelé",
+    "guests": "Hosté",
+    "assignees": "Přiřazení",
+    "assignee": "Přiřazeno",
+    "created_by": "Vytvořil",
+    "none": "Žádné",
+    "link": "Odkaz",
+    "estimates": "Odhady",
+    "estimate": "Odhad",
+    "created_at": "Vytvořeno dne",
+    "updated_at": "Aktualizováno dne",
+    "completed_at": "Dokončeno dne",
+    "layout": "Rozložení",
+    "filters": "Filtry",
+    "display": "Zobrazení",
+    "load_more": "Načíst více",
+    "activity": "Aktivita",
+    "analytics": "Analytika",
+    "dates": "Data",
+    "success": "Úspěch!",
+    "something_went_wrong": "Něco se pokazilo",
+    "error": {
+      "label": "Chyba!",
+      "message": "Došlo k chybě. Zkuste to prosím znovu."
+    },
+    "group_by": "Seskupit podle",
+    "epic": "Epika",
+    "epics": "Epiky",
+    "work_item": "Pracovní položka",
+    "work_items": "Pracovní položky",
+    "sub_work_item": "Podřízená pracovní položka",
+    "views": "Pohledy",
+    "pages": "Stránky",
+    "add": "Přidat",
+    "warning": "Varování",
+    "updating": "Aktualizace",
+    "adding": "Přidávání",
+    "update": "Aktualizovat",
+    "creating": "Vytváření",
+    "create": "Vytvořit",
+    "cancel": "Zrušit",
+    "description": "Popis",
+    "title": "Název",
+    "attachment": "Příloha",
+    "general": "Obecné",
+    "features": "Funkce",
+    "automation": "Automatizace",
+    "project_name": "Název projektu",
+    "project_id": "ID projektu",
+    "project_timezone": "Časové pásmo projektu",
+    "created_on": "Vytvořeno dne",
+    "updated_on": "Aktualizováno",
+    "completed_on": "Completed on",
+    "update_project": "Aktualizovat projekt",
+    "identifier_already_exists": "Identifikátor již existuje",
+    "add_more": "Přidat více",
+    "defaults": "Výchozí",
+    "add_label": "Přidat štítek",
+    "customize_time_range": "Přizpůsobit časový rozsah",
+    "loading": "Načítání",
+    "attachments": "Přílohy",
+    "property": "Vlastnost",
+    "properties": "Vlastnosti",
+    "parent": "Nadřazený",
+    "page": "Stránka",
+    "remove": "Odebrat",
+    "archiving": "Archivace",
+    "archive": "Archivovat",
+    "access": {
+      "public": "Veřejný",
+      "private": "Soukromý"
+    },
+    "done": "Hotovo",
+    "sub_work_items": "Podřízené pracovní položky",
+    "comment": "Komentář",
+    "workspace_level": "Úroveň pracovního prostoru",
+    "order_by": {
+      "label": "Řadit podle",
+      "manual": "Ručně - Pořadí",
+      "last_created": "Naposledy vytvořené",
+      "last_updated": "Naposledy aktualizované",
+      "start_date": "Datum začátku",
+      "due_date": "Termín",
+      "asc": "Vzestupně",
+      "desc": "Sestupně",
+      "updated_on": "Aktualizováno dne"
+    },
+    "sort": {
+      "asc": "Vzestupně",
+      "desc": "Sestupně",
+      "created_on": "Vytvořeno dne",
+      "updated_on": "Aktualizováno dne"
+    },
+    "comments": "Komentáře",
+    "updates": "Aktualizace",
+    "additional_updates": "Další aktualizace",
+    "clear_all": "Vymazat vše",
+    "copied": "Zkopírováno!",
+    "link_copied": "Odkaz zkopírován!",
+    "link_copied_to_clipboard": "Odkaz zkopírován do schránky",
+    "copied_to_clipboard": "Odkaz na pracovní položku zkopírován do schránky",
+    "branch_name_copied_to_clipboard": "Název větve zkopírován do schránky",
+    "is_copied_to_clipboard": "Pracovní položka zkopírována do schránky",
+    "no_links_added_yet": "Zatím nejsou přidány žádné odkazy",
+    "add_link": "Přidat odkaz",
+    "links": "Odkazy",
+    "go_to_workspace": "Přejít do pracovního prostoru",
+    "progress": "Pokrok",
+    "optional": "Volitelné",
+    "join": "Připojit se",
+    "go_back": "Zpět",
+    "continue": "Pokračovat",
+    "resend": "Znovu odeslat",
+    "relations": "Vztahy",
+    "dependencies": "Závislosti",
+    "errors": {
+      "default": {
+        "title": "Chyba!",
+        "message": "Něco se pokazilo. Zkuste to prosím znovu."
+      },
+      "required": "Toto pole je povinné",
+      "entity_required": "{entity} je povinná",
+      "restricted_entity": "{entity} je omezen"
+    },
+    "update_link": "Aktualizovat odkaz",
+    "attach": "Připojit",
+    "create_new": "Vytvořit nový",
+    "add_existing": "Přidat existující",
+    "type_or_paste_a_url": "Zadejte nebo vložte URL",
+    "url_is_invalid": "URL je neplatná",
+    "display_title": "Zobrazovaný název",
+    "link_title_placeholder": "Jak chcete tento odkaz vidět",
+    "url": "URL",
+    "side_peek": "Postranní náhled",
+    "modal": "Modální okno",
+    "full_screen": "Celá obrazovka",
+    "close_peek_view": "Zavřít náhled",
+    "toggle_peek_view_layout": "Přepnout rozložení náhledu",
+    "options": "Možnosti",
+    "duration": "Trvání",
+    "today": "Dnes",
+    "week": "Týden",
+    "month": "Měsíc",
+    "quarter": "Čtvrtletí",
+    "press_for_commands": "Stiskněte '/' pro příkazy",
+    "click_to_add_description": "Klikněte pro přidání popisu",
+    "on_track": "Na správné cestě",
+    "off_track": "Mimo plán",
+    "at_risk": "V ohrožení",
+    "timeline": "Časová osa",
+    "completion": "Dokončení",
+    "upcoming": "Nadcházející",
+    "completed": "Dokončeno",
+    "in_progress": "Probíhá",
+    "planned": "Plánováno",
+    "paused": "Pozastaveno",
+    "search": {
+      "label": "Hledat",
+      "placeholder": "Zadejte hledaný výraz",
+      "no_matches_found": "Nenalezeny žádné shody",
+      "no_matching_results": "Žádné odpovídající výsledky",
+      "min_chars": "Pro hledání zadejte alespoň {count} znaků",
+      "error": "Chyba při načítání výsledků hledání",
+      "no_results": {
+        "title": "Žádné odpovídající výsledky",
+        "description": "Odstraňte kritéria hledání pro zobrazení všech výsledků"
+      }
+    },
+    "actions": {
+      "edit": "Upravit",
+      "make_a_copy": "Vytvořit kopii",
+      "open_in_new_tab": "Otevřít v nové záložce",
+      "copy_link": "Kopírovat odkaz",
+      "copy_branch_name": "Kopírovat název větve",
+      "archive": "Archivovat",
+      "restore": "Obnovit",
+      "delete": "Smazat",
+      "remove_relation": "Odebrat vztah",
+      "subscribe": "Odebírat",
+      "unsubscribe": "Zrušit odběr",
+      "clear_sorting": "Vymazat řazení",
+      "show_weekends": "Zobrazit víkendy",
+      "enable": "Povolit",
+      "disable": "Zakázat",
+      "copy_markdown": "Kopírovat markdown",
+      "reply": "Odpovědět"
+    },
+    "name": "Název",
+    "discard": "Zahodit",
+    "confirm": "Potvrdit",
+    "confirming": "Potvrzování",
+    "read_the_docs": "Přečtěte si dokumentaci",
+    "default": "Výchozí",
+    "active": "Aktivní",
+    "enabled": "Povoleno",
+    "disabled": "Zakázáno",
+    "mandate": "Mandát",
+    "mandatory": "Povinné",
+    "global": "Globální",
+    "yes": "Ano",
+    "no": "Ne",
+    "please_wait": "Prosím čekejte",
+    "enabling": "Povolování",
+    "disabling": "Zakazování",
+    "beta": "Beta",
+    "or": "nebo",
+    "next": "Další",
+    "back": "Zpět",
+    "retry": "Zkusit znovu",
+    "cancelling": "Rušení",
+    "configuring": "Konfigurace",
+    "clear": "Vymazat",
+    "import": "Importovat",
+    "connect": "Připojit",
+    "authorizing": "Autorizace",
+    "processing": "Zpracování",
+    "no_data_available": "Nejsou k dispozici žádná data",
+    "from": "od {name}",
+    "authenticated": "Ověřeno",
+    "select": "Vybrat",
+    "upgrade": "Upgradovat",
+    "add_seats": "Přidat místa",
+    "projects": "Projekty",
+    "workspace": "Pracovní prostor",
+    "workspaces": "Pracovní prostory",
+    "team": "Tým",
+    "teams": "Týmy",
+    "entity": "Entita",
+    "entities": "Entity",
+    "task": "Úkol",
+    "tasks": "Úkoly",
+    "section": "Sekce",
+    "sections": "Sekce",
+    "edit": "Upravit",
+    "connecting": "Připojování",
+    "connected": "Připojeno",
+    "disconnect": "Odpojit",
+    "disconnecting": "Odpojování",
+    "installing": "Instalace",
+    "install": "Nainstalovat",
+    "reset": "Resetovat",
+    "live": "Živě",
+    "change_history": "Historie změn",
+    "coming_soon": "Již brzy",
+    "member": "Člen",
+    "members": "Členové",
+    "you": "Vy",
+    "upgrade_cta": {
+      "higher_subscription": "Upgradovat na vyšší předplatné",
+      "talk_to_sales": "Promluvte si s prodejem"
+    },
+    "category": "Kategorie",
+    "categories": "Kategorie",
+    "saving": "Ukládání",
+    "save_changes": "Uložit změny",
+    "delete": "Smazat",
+    "deleting": "Mazání",
+    "pending": "Čekající",
+    "invite": "Pozvat",
+    "view": "Pohled",
+    "deactivated_user": "Deaktivovaný uživatel",
+    "apply": "Použít",
+    "applying": "Používání",
+    "overview": "Přehled",
+    "no_of": "Počet {entity}",
+    "resolved": "Vyřešeno",
+    "get_started": "Začít",
+    "worklogs": "Pracovní záznamy",
+    "project_updates": "Aktualizace projektu",
+    "workflows": "Workflow",
+    "templates": "Šablony",
+    "business": "Business",
+    "members_and_teamspaces": "Členové a týmové prostory",
+    "recurring_work_items": "Opakující se pracovní položky",
+    "milestones": "Milníky",
+    "open_in_full_screen": "Otevřít {page} na celou obrazovku",
+    "details": "Podrobnosti",
+    "project_structure": "Struktura projektu",
+    "custom_properties": "Vlastní vlastnosti",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Osa X",
+    "y_axis": "Osa Y",
+    "metric": "Metrika"
+  },
+  "form": {
+    "title": {
+      "required": "Název je povinný",
+      "max_length": "Název by měl být kratší než {length} znaků"
+    }
+  },
+  "entity": {
+    "grouping_title": "Seskupení {entity}",
+    "priority": "Priorita {entity}",
+    "all": "Všechny {entity}",
+    "drop_here_to_move": "Přetáhněte sem pro přesunutí {entity}",
+    "delete": {
+      "label": "Smazat {entity}",
+      "success": "{entity} úspěšně smazána",
+      "failed": "Mazání {entity} se nezdařilo"
+    },
+    "update": {
+      "failed": "Aktualizace {entity} se nezdařila",
+      "success": "{entity} úspěšně aktualizována"
+    },
+    "link_copied_to_clipboard": "Odkaz na {entity} zkopírován do schránky",
+    "fetch": {
+      "failed": "Chyba při načítání {entity}"
+    },
+    "add": {
+      "success": "{entity} úspěšně přidána",
+      "failed": "Chyba při přidávání {entity}"
+    },
+    "remove": {
+      "success": "{entity} úspěšně odebrána",
+      "failed": "Chyba při odebírání {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Soubor nelze připojit. Zkuste to prosím znovu.",
+    "only_one_file_allowed": "Je možné nahrát pouze jeden soubor najednou.",
+    "file_size_limit": "Soubor musí být menší než {size}MB.",
+    "drag_and_drop": "Přetáhněte soubor kamkoli pro nahrání",
+    "delete": "Smazat přílohu"
+  },
+  "label": {
+    "select": "Vybrat štítek",
+    "create": {
+      "success": "Štítek úspěšně vytvořen",
+      "failed": "Vytvoření štítku se nezdařilo",
+      "already_exists": "Štítek již existuje",
+      "type": "Zadejte pro vytvoření nového štítku"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Pohled} few {Pohledy} other {Pohledů}}",
+    "create": {
+      "label": "Vytvořit pohled"
+    },
+    "update": {
+      "label": "Aktualizovat pohled"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Host",
+      "description": "Externí členové mohou být pozváni jako hosté."
+    },
+    "member": {
+      "title": "Člen",
+      "description": "Může číst, psát, upravovat a mazat entity."
+    },
+    "admin": {
+      "title": "Správce",
+      "description": "Má všechna oprávnění v prostoru."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Produktový/Projektový manažer",
+    "development_or_engineering": "Vývoj/Inženýrství",
+    "founder_or_executive": "Zakladatel/Vedoucí pracovník",
+    "freelancer_or_consultant": "Freelancer/Konzultant",
+    "marketing_or_growth": "Marketing/Růst",
+    "sales_or_business_development": "Prodej/Business Development",
+    "support_or_operations": "Podpora/Operace",
+    "student_or_professor": "Student/Profesor",
+    "human_resources": "Lidské zdroje",
+    "other": "Jiné"
+  },
+  "default_global_view": {
+    "all_issues": "Všechny položky",
+    "assigned": "Přiřazeno",
+    "created": "Vytvořeno",
+    "subscribed": "Odebíráno"
+  },
+  "description_versions": {
+    "last_edited_by": "Naposledy upraveno uživatelem",
+    "previously_edited_by": "Dříve upraveno uživatelem",
+    "edited_by": "Upraveno uživatelem"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane se nespustil. To může být způsobeno tím, že se jeden nebo více služeb Plane nepodařilo spustit.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Vyberte View Logs z setup.sh a Docker logů, abyste si byli jisti."
+  },
+  "customize_navigation": "Přizpůsobit navigaci",
+  "personal": "Osobní",
+  "accordion_navigation_control": "Harmonikové postranní navigační menu",
+  "horizontal_navigation_bar": "Navigace se záložkami",
+  "show_limited_projects_on_sidebar": "Zobrazit omezený počet projektů v postranním panelu",
+  "enter_number_of_projects": "Zadejte počet projektů",
+  "pin": "Připnout",
+  "unpin": "Odepnout",
+  "workspace_dashboards": "Dashboards",
+  "pi_chat": "Plane AI",
+  "in_app": "V aplikaci",
+  "forms": "Formuláře",
+  "milestones": "Milníky",
+  "milestones_description": "Milníky poskytují vrstvu pro sladění pracovních položek směrem ke společným termínům dokončení.",
+  "file_upload": {
+    "upload_text": "Klikněte zde pro nahrání souboru",
+    "drag_drop_text": "Přetáhnout a upustit",
+    "processing": "Zpracovává se",
+    "invalid_file_type": "Neplatný typ souboru",
+    "missing_fields": "Chybějící pole",
+    "success": "{fileName} nahráno!"
+  },
+  "date": "Datum",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Exportujte položky do CSV.",
+      "short_description": "Exportovat jako CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Exportujte položky do Excelu.",
+      "short_description": "Exportovat jako Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Exportujte položky do Excelu.",
+      "short_description": "Exportovat jako Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Exportujte položky do JSON.",
+      "short_description": "Exportovat jako JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/cycle.json b/packages/i18n/src/locales/cs/cycle.json
new file mode 100644
index 0000000..fecbcad
--- /dev/null
+++ b/packages/i18n/src/locales/cs/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Přidejte položky pro sledování pokroku"
+      },
+      "chart": {
+        "title": "Přidejte položky pro zobrazení burndown grafu."
+      },
+      "priority_issue": {
+        "title": "Zobrazí se vysoce prioritní položky."
+      },
+      "assignee": {
+        "title": "Přiřaďte položky pro přehled přiřazení."
+      },
+      "label": {
+        "title": "Přidejte štítky pro analýzu podle štítků."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Cyklus} few {Cykly} other {Cyklů}}",
+    "no_cycle": "Žádný cyklus"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Přidejte pracovní položky do cyklu, abyste viděli jeho\n pokrok"
+      },
+      "priority": {
+        "title": "Pozorujte vysoce prioritní pracovní položky řešené v\n cyklu na první pohled."
+      },
+      "assignee": {
+        "title": "Přidejte přiřazení k pracovním položkám, abyste viděli\n rozdělení práce podle přiřazení."
+      },
+      "label": {
+        "title": "Přidejte štítky k pracovním položkám, abyste viděli\n rozdělení práce podle štítků."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/editor.json b/packages/i18n/src/locales/cs/editor.json
new file mode 100644
index 0000000..17b29db
--- /dev/null
+++ b/packages/i18n/src/locales/cs/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Přetáhněte soubory pro nahrání externích souborů"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Soubor je příliš velký.",
+        "description": "Maximální velikost na soubor je {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Nepodporovaný typ souboru.",
+        "description": "Zobrazit podporované formáty"
+      },
+      "default": {
+        "title": "Nahrávání selhalo.",
+        "description": "Něco se pokazilo. Zkuste to znovu."
+      }
+    },
+    "upgrade": {
+      "description": "Upgradujte svůj plán pro zobrazení této přílohy."
+    },
+    "aria": {
+      "click_to_upload": "Klikněte pro nahrání přílohy"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Převést na vložený obsah",
+      "convert_to_link": "Převést na odkaz",
+      "convert_to_richcard": "Převést na bohatou kartu"
+    },
+    "placeholder": {
+      "insert_embed": "Vložte svůj preferovaný odkaz pro vložení, například video YouTube, design Figma atd.",
+      "link": "Zadejte nebo vložte odkaz"
+    },
+    "input_modal": {
+      "embed": "Vložit",
+      "works_with_links": "Funguje s YouTube, Figma, Google Docs a dalšími"
+    },
+    "error": {
+      "not_valid_link": "Zadejte prosím platnou URL adresu."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Popište obsah tohoto bloku",
+      "generated_here": "Zde bude vygenerován obsah AI"
+    },
+    "block_types": {
+      "placeholder": "Vyberte typ bloku",
+      "summarize_page": "Shrnout stránku",
+      "custom_prompt": "Vlastní prompt"
+    },
+    "actions": {
+      "discard": "Zahodit",
+      "generate": "Vygenerovat",
+      "generating": "Generování",
+      "rewriting": "Přepisování",
+      "rewrite": "Přepsat",
+      "use_this": "Použít toto",
+      "refine": "Upřesnit"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/empty-state.json b/packages/i18n/src/locales/cs/empty-state.json
new file mode 100644
index 0000000..a812af9
--- /dev/null
+++ b/packages/i18n/src/locales/cs/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Zatím nejsou k dispozici žádné metriky pokroku.",
+      "description": "Začněte nastavovat hodnoty vlastností v pracovních položkách, abyste zde viděli metriky pokroku."
+    },
+    "updates": {
+      "title": "Zatím žádné aktualizace.",
+      "description": "Jakmile členové projektu přidají aktualizace, zobrazí se zde"
+    },
+    "search": {
+      "title": "Žádné odpovídající výsledky.",
+      "description": "Nebyly nalezeny žádné výsledky. Zkuste upravit vyhledávací výrazy."
+    },
+    "not_found": {
+      "title": "Jejda! Něco se zdá být v nepořádku",
+      "description": "Momentálně se nám nedaří načíst váš účet plane. Může se jednat o chybu sítě.",
+      "cta_primary": "Zkuste znovu načíst"
+    },
+    "server_error": {
+      "title": "Chyba serveru",
+      "description": "Nemůžeme se připojit a načíst data z našeho serveru. Nebojte se, pracujeme na tom.",
+      "cta_primary": "Zkuste znovu načíst"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Vypadá to, že nemáte přístup k tomuto projektu",
+      "restricted_description": "Kontaktujte administrátora a požádejte o přístup, abyste zde mohli pokračovat.",
+      "join_description": "Klikněte na tlačítko níže pro připojení k projektu.",
+      "cta_primary": "Připojit se k projektu",
+      "cta_loading": "Připojování k projektu"
+    },
+    "invalid_project": {
+      "title": "Projekt nebyl nalezen",
+      "description": "Projekt, který hledáte, neexistuje."
+    },
+    "work_items": {
+      "title": "Začněte s vaší první pracovní položkou.",
+      "description": "Pracovní položky jsou stavebními kameny vašeho projektu — přiřazujte vlastníky, nastavujte priority a snadno sledujte pokrok.",
+      "cta_primary": "Vytvořte svou první pracovní položku"
+    },
+    "cycles": {
+      "title": "Seskupujte a časově omezte svou práci v cyklech.",
+      "description": "Rozdělte práci do časově omezených bloků, pracujte zpětně od termínu projektu pro nastavení dat a dosahujte hmatatelného pokroku jako tým.",
+      "cta_primary": "Nastavte svůj první cyklus"
+    },
+    "cycle_work_items": {
+      "title": "V tomto cyklu nejsou žádné pracovní položky k zobrazení",
+      "description": "Vytvořte pracovní položky pro zahájení sledování pokroku vašeho týmu v tomto cyklu a dosažení vašich cílů včas.",
+      "cta_primary": "Vytvořit pracovní položku",
+      "cta_secondary": "Přidat existující pracovní položku"
+    },
+    "modules": {
+      "title": "Namapujte cíle vašeho projektu na moduly a snadno sledujte.",
+      "description": "Moduly se skládají z propojených pracovních položek. Pomáhají sledovat pokrok prostřednictvím fází projektu, z nichž každá má specifické termíny a analytiku, která ukazuje, jak blízko jste dosažení těchto fází.",
+      "cta_primary": "Nastavte svůj první modul"
+    },
+    "module_work_items": {
+      "title": "V tomto modulu nejsou žádné pracovní položky k zobrazení",
+      "description": "Vytvořte pracovní položky pro zahájení sledování tohoto modulu.",
+      "cta_primary": "Vytvořit pracovní položku",
+      "cta_secondary": "Přidat existující pracovní položku"
+    },
+    "views": {
+      "title": "Uložte vlastní pohledy pro váš projekt",
+      "description": "Pohledy jsou uložené filtry, které vám pomáhají rychle přistupovat k informacím, které používáte nejčastěji. Spolupracujte bez námahy, zatímco spolupracovníci sdílejí a přizpůsobují pohledy svým specifickým potřebám.",
+      "cta_primary": "Vytvořit pohled"
+    },
+    "no_work_items_in_project": {
+      "title": "V projektu zatím nejsou žádné pracovní položky",
+      "description": "Přidejte pracovní položky do svého projektu a rozdělte svou práci na sledovatelné části pomocí pohledů.",
+      "cta_primary": "Přidat pracovní položku"
+    },
+    "work_item_filter": {
+      "title": "Nebyly nalezeny žádné pracovní položky",
+      "description": "Váš aktuální filtr nevrátil žádné výsledky. Zkuste změnit filtry.",
+      "cta_primary": "Přidat pracovní položku"
+    },
+    "pages": {
+      "title": "Dokumentujte vše — od poznámek po PRD",
+      "description": "Stránky vám umožňují zachytit a organizovat informace na jednom místě. Pište poznámky ze schůzek, projektovou dokumentaci a PRD, vkládejte pracovní položky a strukturujte je pomocí připravených komponent.",
+      "cta_primary": "Vytvořte svou první stránku"
+    },
+    "archive_pages": {
+      "title": "Zatím žádné archivované stránky",
+      "description": "Archivujte stránky, které nejsou na vašem radaru. Přistupte k nim zde, když budete potřebovat."
+    },
+    "intake_sidebar": {
+      "title": "Zaznamenejte příchozí požadavky",
+      "description": "Odesílejte nové požadavky k přezkoumání, stanovení priorit a sledování v rámci pracovního postupu vašeho projektu.",
+      "cta_primary": "Vytvořit příchozí požadavek"
+    },
+    "intake_main": {
+      "title": "Vyberte příchozí pracovní položku pro zobrazení jejích podrobností"
+    },
+    "epics": {
+      "title": "Přeměňte složité projekty na strukturované epiky.",
+      "description": "Epik vám pomůže organizovat velké cíle do menších, sledovatelných úkolů.",
+      "cta_primary": "Vytvořit epik",
+      "cta_secondary": "Dokumentace"
+    },
+    "epic_work_items": {
+      "title": "K tomuto epiku jste ještě nepřidali pracovní položky.",
+      "description": "Začněte přidáním některých pracovních položek k tomuto epiku a sledujte je zde.",
+      "cta_secondary": "Přidat pracovní položky"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Zatím žádné archivované epiky",
+      "description": "Můžete archivovat dokončené nebo zrušené epiky. Najdete je zde po archivaci."
+    },
+    "archive_work_items": {
+      "title": "Zatím žádné archivované pracovní položky",
+      "description": "Ručně nebo pomocí automatizace můžete archivovat dokončené nebo zrušené pracovní položky. Najdete je zde, jakmile budou archivovány.",
+      "cta_primary": "Nastavit automatizaci"
+    },
+    "archive_cycles": {
+      "title": "Zatím žádné archivované cykly",
+      "description": "Pro úklid vašeho projektu archivujte dokončené cykly. Najdete je zde, jakmile budou archivovány."
+    },
+    "archive_modules": {
+      "title": "Zatím žádné archivované moduly",
+      "description": "Pro úklid vašeho projektu archivujte dokončené nebo zrušené moduly. Najdete je zde, jakmile budou archivovány."
+    },
+    "home_widget_quick_links": {
+      "title": "Mějte po ruce důležité odkazy, zdroje nebo dokumenty pro vaši práci"
+    },
+    "inbox_sidebar_all": {
+      "title": "Aktualizace pro vaše odebírané pracovní položky se zobrazí zde"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Zmínky o vašich pracovních položkách se zobrazí zde"
+    },
+    "your_work_by_priority": {
+      "title": "Zatím není přiřazena žádná pracovní položka"
+    },
+    "your_work_by_state": {
+      "title": "Zatím není přiřazena žádná pracovní položka"
+    },
+    "views": {
+      "title": "Zatím žádné pohledy",
+      "description": "Přidejte pracovní položky do svého projektu a používejte pohledy pro snadné filtrování, třídění a sledování pokroku.",
+      "cta_primary": "Přidat pracovní položku"
+    },
+    "drafts": {
+      "title": "Napůl napsané pracovní položky",
+      "description": "Chcete-li to vyzkoušet, začněte přidávat pracovní položku a nechte ji nedokončenou nebo vytvořte svůj první koncept níže. 😉",
+      "cta_primary": "Vytvořit koncept pracovní položky"
+    },
+    "projects_archived": {
+      "title": "Žádné archivované projekty",
+      "description": "Vypadá to, že všechny vaše projekty jsou stále aktivní—skvělá práce!"
+    },
+    "analytics_projects": {
+      "title": "Vytvořte projekty pro vizualizaci metrik projektu zde."
+    },
+    "analytics_work_items": {
+      "title": "Vytvořte projekty s pracovními položkami a přiřazenými osobami pro zahájení sledování výkonu, pokroku a dopadu týmu zde."
+    },
+    "analytics_no_cycle": {
+      "title": "Vytvořte cykly pro organizaci práce do časově omezených fází a sledování pokroku napříč sprinty."
+    },
+    "analytics_no_module": {
+      "title": "Vytvořte moduly pro organizaci své práce a sledování pokroku napříč různými fázemi."
+    },
+    "analytics_no_intake": {
+      "title": "Nastavte příjem pro správu příchozích požadavků a sledování, jak jsou přijímány a odmítány"
+    },
+    "home_widget_stickies": {
+      "title": "Poznamenejte si nápad, zachyťte aha moment nebo zaznamenejte náhlý nápad. Přidejte poznámku a začněte."
+    },
+    "stickies": {
+      "title": "Zachyťte nápady okamžitě",
+      "description": "Vytvářejte poznámky pro rychlé poznámky a úkoly a mějte je u sebe, kamkoli jdete.",
+      "cta_primary": "Vytvořit první poznámku",
+      "cta_secondary": "Dokumentace"
+    },
+    "active_cycles": {
+      "title": "Žádné aktivní cykly",
+      "description": "Momentálně nemáte žádné probíhající cykly. Aktivní cykly se zde zobrazí, když budou zahrnovat dnešní datum."
+    },
+    "dashboard": {
+      "title": "Vizualizujte svůj pokrok pomocí přehledů",
+      "description": "Vytvářejte přizpůsobitelné přehledy pro sledování metrik, měření výsledků a efektivní prezentaci poznatků.",
+      "cta_primary": "Vytvořit nový přehled"
+    },
+    "wiki": {
+      "title": "Napište poznámku, dokument nebo celou znalostní bázi.",
+      "description": "Stránky jsou prostorem pro zachycení myšlenek v Plane. Pořizujte poznámky ze schůzek, snadno je formátujte, vkládejte pracovní položky, uspořádejte je pomocí knihovny komponent a udržujte vše v kontextu vašeho projektu.",
+      "cta_primary": "Vytvořte svou stránku"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Povolit stavy projektu",
+      "description": "Povolte stavy projektu pro zobrazení a správu vlastností jako stav, priorita, termíny a další."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Zatím žádné odhady",
+      "description": "Definujte, jak váš tým měří úsilí, a sledujte to konzistentně napříč všemi pracovními položkami.",
+      "cta_primary": "Přidat systém odhadů"
+    },
+    "labels": {
+      "title": "Zatím žádné štítky",
+      "description": "Vytvořte personalizované štítky pro efektivní kategorizaci a správu vašich pracovních položek.",
+      "cta_primary": "Vytvořte svůj první štítek"
+    },
+    "exports": {
+      "title": "Zatím žádné exporty",
+      "description": "Momentálně nemáte žádné záznamy exportu. Jakmile exportujete data, všechny záznamy se zobrazí zde."
+    },
+    "tokens": {
+      "title": "Zatím žádný osobní token",
+      "description": "Generujte bezpečné API tokeny pro připojení vašeho pracovního prostoru s externími systémy a aplikacemi.",
+      "cta_primary": "Přidat přístupový token"
+    },
+    "workspace_tokens": {
+      "title": "Zatím žádný přístupový token",
+      "description": "Generujte bezpečné API tokeny pro připojení vašeho pracovního prostoru s externími systémy a aplikacemi.",
+      "cta_primary": "Přidat přístupový token"
+    },
+    "webhooks": {
+      "title": "Zatím nebyl přidán žádný Webhook",
+      "description": "Automatizujte oznámení externím službám při výskytu událostí projektu.",
+      "cta_primary": "Přidat webhook"
+    },
+    "work_item_types": {
+      "title": "Vytvářejte a přizpůsobujte typy pracovních položek",
+      "description": "Definujte jedinečné typy pracovních položek pro váš projekt. Každý typ může mít své vlastní vlastnosti, pracovní postupy a pole - přizpůsobené potřebám vašeho projektu a týmu.",
+      "cta_primary": "Povolit"
+    },
+    "work_item_type_properties": {
+      "title": "Definujte vlastnost a podrobnosti, které chcete zachytit pro tento typ pracovní položky. Přizpůsobte jej pracovnímu postupu vašeho projektu.",
+      "cta_secondary": "Přidat vlastnost"
+    },
+    "templates": {
+      "title": "Zatím žádné šablony",
+      "description": "Zkraťte dobu nastavení vytvářením šablon pro pracovní položky a stránky — a začněte novou práci během několika sekund.",
+      "cta_primary": "Vytvořte svou první šablonu"
+    },
+    "recurring_work_items": {
+      "title": "Zatím žádná opakující se pracovní položka",
+      "description": "Nastavte opakující se pracovní položky pro automatizaci opakujících se úkolů a snadné dodržování harmonogramu.",
+      "cta_primary": "Vytvořit opakující se pracovní položku"
+    },
+    "worklogs": {
+      "title": "Sledujte časové výkazy pro všechny členy",
+      "description": "Zaznamenávejte čas na pracovních položkách pro zobrazení podrobných časových výkazů pro jakéhokoli člena týmu napříč projekty."
+    },
+    "group_syncing": {
+      "title": "Zatím žádná mapování skupin"
+    },
+    "template_setting": {
+      "title": "Zatím žádné šablony",
+      "description": "Zkraťte dobu nastavení vytvářením šablon pro projekty, pracovní položky a stránky — a začněte novou práci během několika sekund.",
+      "cta_primary": "Vytvořit šablonu"
+    },
+    "workflows": {
+      "title": "Zatím žádné workflow",
+      "description": "Vytvářejte workflow pro správu průběhu vašich pracovních položek.",
+      "cta_primary": "Přidat nové workflow",
+      "states": {
+        "title": "Přidat stavy",
+        "description": "Vyberte stavy, kterými pracovní položka prochází."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/home.json b/packages/i18n/src/locales/cs/home.json
new file mode 100644
index 0000000..5fad319
--- /dev/null
+++ b/packages/i18n/src/locales/cs/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Váš průvodce rychlým startem",
+      "not_right_now": "Teď ne",
+      "create_project": {
+        "title": "Vytvořit projekt",
+        "description": "Většina věcí začíná projektem v Plane.",
+        "cta": "Začít"
+      },
+      "invite_team": {
+        "title": "Pozvat tým",
+        "description": "Spolupracujte s kolegy na tvorbě, dodávkách a správě.",
+        "cta": "Pozvat je"
+      },
+      "configure_workspace": {
+        "title": "Nastavte svůj pracovní prostor.",
+        "description": "Aktivujte nebo deaktivujte funkce nebo jděte dále.",
+        "cta": "Konfigurovat tento prostor"
+      },
+      "personalize_account": {
+        "title": "Přizpůsobte si Plane.",
+        "description": "Vyberte si obrázek, barvy a další.",
+        "cta": "Personalizovat nyní"
+      },
+      "widgets": {
+        "title": "Je ticho bez widgetů, zapněte je",
+        "description": "Vypadá to, že všechny vaše widgety jsou vypnuté. Zapněte je\npro lepší zážitek!",
+        "primary_button": {
+          "text": "Spravovat widgety"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Uložte si odkazy na důležité věci, které chcete mít po ruce.",
+      "add": "Přidat rychlý odkaz",
+      "title": "Rychlý odkaz",
+      "title_plural": "Rychlé odkazy"
+    },
+    "recents": {
+      "title": "Nedávné",
+      "empty": {
+        "project": "Vaše nedávné projekty se zde zobrazí po návštěvě.",
+        "page": "Vaše nedávné stránky se zde zobrazí po návštěvě.",
+        "issue": "Vaše nedávné pracovní položky se zde zobrazí po návštěvě.",
+        "default": "Zatím nemáte žádné nedávné položky."
+      },
+      "filters": {
+        "all": "Vše",
+        "projects": "Projekty",
+        "pages": "Stránky",
+        "issues": "Úkoly"
+      }
+    },
+    "new_at_plane": {
+      "title": "Novinky v Plane"
+    },
+    "quick_tutorial": {
+      "title": "Rychlý tutoriál"
+    },
+    "widget": {
+      "reordered_successfully": "Widget úspěšně přesunut.",
+      "reordering_failed": "Při přesouvání widgetu došlo k chybě."
+    },
+    "manage_widgets": "Spravovat widgety",
+    "title": "Domů",
+    "star_us_on_github": "Ohodnoťte nás na GitHubu",
+    "business_trial_banner": {
+      "title": "Vaše 14denní zkušební verze plánu Business je aktivní!",
+      "description": "Prozkoumejte všechny funkce Business. Až budete připraveni, zvolte předplatné. Nebudete automaticky účtováni.",
+      "trial_ends_today": "Zkušební verze končí dnes",
+      "trial_ends_in_days": "Zkušební verze končí za {days, plural, one {# den} few {# dny} other {# dní}}",
+      "start_subscription": "Zahájit předplatné",
+      "explore_business_features": "Prozkoumat funkce Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/inbox.json b/packages/i18n/src/locales/cs/inbox.json
new file mode 100644
index 0000000..db808d9
--- /dev/null
+++ b/packages/i18n/src/locales/cs/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Čekající",
+        "description": "Čekající"
+      },
+      "declined": {
+        "title": "Odmítnuto",
+        "description": "Odmítnuto"
+      },
+      "snoozed": {
+        "title": "Odloženo",
+        "description": "Zbývá {days, plural, one{# den} few{# dny} other{# dnů}}"
+      },
+      "accepted": {
+        "title": "Přijato",
+        "description": "Přijato"
+      },
+      "duplicate": {
+        "title": "Duplikát",
+        "description": "Duplikát"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Odmítnout pracovní položku",
+        "content": "Opravdu chcete odmítnout pracovní položku {value}?"
+      },
+      "delete": {
+        "title": "Smazat pracovní položku",
+        "content": "Opravdu chcete smazat pracovní položku {value}?",
+        "success": "Pracovní položka úspěšně smazána"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Pouze správci projektu mohou odkládat/zrušit odložení pracovních položek",
+      "accept_permission": "Pouze správci projektu mohou přijímat pracovní položky",
+      "decline_permission": "Pouze správci projektu mohou odmítnout pracovní položky"
+    },
+    "actions": {
+      "accept": "Přijmout",
+      "decline": "Odmítnout",
+      "snooze": "Odložit",
+      "unsnooze": "Zrušit odložení",
+      "copy": "Kopírovat odkaz na pracovní položku",
+      "delete": "Smazat",
+      "open": "Otevřít pracovní položku",
+      "mark_as_duplicate": "Označit jako duplikát",
+      "move": "Přesunout {value} do pracovních položek projektu"
+    },
+    "source": {
+      "in-app": "v aplikaci"
+    },
+    "order_by": {
+      "created_at": "Vytvořeno dne",
+      "updated_at": "Aktualizováno dne",
+      "id": "ID"
+    },
+    "label": "Příjem",
+    "page_label": "{workspace} - Příjem",
+    "modal": {
+      "title": "Vytvořit přijatou pracovní položku"
+    },
+    "tabs": {
+      "open": "Otevřené",
+      "closed": "Uzavřené"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Žádné otevřené pracovní položky",
+        "description": "Zde najdete otevřené pracovní položky. Vytvořte novou."
+      },
+      "sidebar_closed_tab": {
+        "title": "Žádné uzavřené pracovní položky",
+        "description": "Všechny přijaté nebo odmítnuté pracovní položky najdete zde."
+      },
+      "sidebar_filter": {
+        "title": "Žádné odpovídající pracovní položky",
+        "description": "Žádná položka neodpovídá filtru v příjmu. Vytvořte novou."
+      },
+      "detail": {
+        "title": "Vyberte pracovní položku pro zobrazení podrobností."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/integration.json b/packages/i18n/src/locales/cs/integration.json
new file mode 100644
index 0000000..fedd09f
--- /dev/null
+++ b/packages/i18n/src/locales/cs/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integrace",
+    "loading": "Načítání",
+    "unauthorized": "Nemáte oprávnění k zobrazení této stránky.",
+    "configure": "Nastavit",
+    "not_enabled": "{name} není pro tento workspace povoleno.",
+    "not_configured": "Není nakonfigurováno",
+    "disconnect_personal_account": "Odpojit osobní účet {providerName}",
+    "not_configured_message_admin": "Integrace {name} není nakonfigurována. Prosím, kontaktujte správce instance, aby ji nakonfiguroval.",
+    "not_configured_message_support": "Integrace {name} není nakonfigurována. Prosím, kontaktujte podporu, aby ji nakonfigurovala.",
+    "external_api_unreachable": "Nelze přistupovat k externímu API. Zkuste to prosím znovu později.",
+    "error_fetching_supported_integrations": "Nelze načíst podporované integrace. Zkuste to prosím znovu později.",
+    "back_to_integrations": "Zpět k integracím",
+    "select_state": "Vyberte stav",
+    "set_state": "Nastavit stav",
+    "choose_project": "Vyberte projekt...",
+    "skip_backward_state_movement": "Zabránit přesunu problémů do dřívějšího stavu kvůli aktualizacím PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Připojte a synchronizujte svou pracovní položku GitHub s Plane",
+    "connect_org": "Připojit organizaci",
+    "connect_org_description": "Připojte svou GitHub organizaci s Plane",
+    "processing": "Spracovává se",
+    "org_added_desc": "GitHub org přidána kým a kdy",
+    "connection_fetch_error": "Chyba při načítání detailů připojení ze serveru",
+    "personal_account_connected": "Osobní účet připojen",
+    "personal_account_connected_description": "Váš GitHub účet je nyní připojen k Plane",
+    "connect_personal_account": "Připojit osobní účet",
+    "connect_personal_account_description": "Připojte svůj osobní GitHub účet s Plane.",
+    "repo_mapping": "Mapování repozitářů",
+    "repo_mapping_description": "Mapujte své GitHub repozitáře s projekty Plane.",
+    "project_issue_sync": "Synchronizace problémů projektu",
+    "project_issue_sync_description": "Synchronizujte problémy z GitHub do vašeho projektu Plane",
+    "project_issue_sync_empty_state": "Namapované synchronizace problémů projektu se zobrazí zde",
+    "configure_project_issue_sync_state": "Nastavte stav synchronizace problémů",
+    "select_issue_sync_direction": "Vyberte směr synchronizace problémů",
+    "allow_bidirectional_sync": "Bidirectional - Synchronizujte problémy a komentáře oběma směry mezi GitHub a Plane",
+    "allow_unidirectional_sync": "Unidirectional - Synchronizujte problémy a komentáře z GitHub do Plane pouze",
+    "allow_unidirectional_sync_warning": "Data z GitHub Issue nahradí data v propojené Plane pracovní položce (GitHub → Plane pouze)",
+    "remove_project_issue_sync": "Odstranit tuto synchronizaci problémů projektu",
+    "remove_project_issue_sync_confirmation": "Jste si jisti, že chcete odstranit tuto synchronizaci problémů projektu?",
+    "add_pr_state_mapping": "Přidat mapování stavu žádosti o sloučení pro projekt Plane",
+    "edit_pr_state_mapping": "Upravit mapování stavu žádosti o sloučení pro projekt Plane",
+    "pr_state_mapping": "Mapování stavu žádosti o sloučení",
+    "pr_state_mapping_description": "Mapujte stavy žádosti o sloučení z GitHub do vašeho projektu Plane",
+    "pr_state_mapping_empty_state": "Namapované stavy PR se zobrazí zde",
+    "remove_pr_state_mapping": "Odstranit toto mapování stavu žádosti o sloučení",
+    "remove_pr_state_mapping_confirmation": "Jste si jisti, že chcete odstranit tuto mapování stavu žádosti o sloučení?",
+    "issue_sync_message": "Pracovní položky jsou synchronizovány do {project}",
+    "link": "Propojit GitHub repozitář s projektem Plane",
+    "pull_request_automation": "Automatizace žádosti o sloučení",
+    "pull_request_automation_description": "Nastavte mapování stavu žádosti o sloučení z GitHub do vašeho projektu Plane",
+    "DRAFT_MR_OPENED": "Při otevření návrhu MR nastavte stav na",
+    "MR_OPENED": "Při otevření MR nastavte stav na",
+    "MR_READY_FOR_MERGE": "Při připravenosti MR ke sloučení nastavte stav na",
+    "MR_REVIEW_REQUESTED": "Při žádosti o revizi MR nastavte stav na",
+    "MR_MERGED": "Při sloučení MR nastavte stav na",
+    "MR_CLOSED": "Při uzavření MR nastavte stav na",
+    "ISSUE_OPEN": "Při otevření problému nastavte stav na",
+    "ISSUE_CLOSED": "Při uzavření problému nastavte stav na",
+    "save": "Uložit",
+    "start_sync": "Spustit synchronizaci",
+    "choose_repository": "Vyberte repozitář..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Připojte a synchronizujte své žádosti o sloučení Gitlab s Plane.",
+    "connection_fetch_error": "Chyba při načítání podrobností o připojení ze serveru",
+    "connect_org": "Připojit organizaci",
+    "connect_org_description": "Připojte svou organizaci Gitlab k Plane.",
+    "project_connections": "Připojení projektů Gitlab",
+    "project_connections_description": "Synchronizujte žádosti o sloučení z Gitlabu do projektů Plane.",
+    "plane_project_connection": "Připojení projektu Plane",
+    "plane_project_connection_description": "Nastavte mapování stavu žádosti o sloučení z Gitlabu do projektů Plane",
+    "remove_connection": "Odstranit připojení",
+    "remove_connection_confirmation": "Opravdu chcete odstranit toto připojení?",
+    "link": "Propojit repozitář Gitlab s projektem Plane",
+    "pull_request_automation": "Automatizace žádosti o sloučení",
+    "pull_request_automation_description": "Nastavte mapování stavu žádosti o sloučení z Gitlabu do Plane",
+    "DRAFT_MR_OPENED": "Při otevření návrhu MR nastavte stav na",
+    "MR_OPENED": "Při otevření MR nastavte stav na",
+    "MR_REVIEW_REQUESTED": "Při žádosti o revizi MR nastavte stav na",
+    "MR_READY_FOR_MERGE": "Při připravenosti MR ke sloučení nastavte stav na",
+    "MR_MERGED": "Při sloučení MR nastavte stav na",
+    "MR_CLOSED": "Při uzavření MR nastavte stav na",
+    "integration_enabled_text": "S povolenou integrací Gitlab můžete automatizovat pracovní postupy pracovních položek",
+    "choose_entity": "Vyberte entitu",
+    "choose_project": "Vyberte projekt",
+    "link_plane_project": "Propojit projekt Plane",
+    "project_issue_sync": "Synchronizace problémů projektu",
+    "project_issue_sync_description": "Synchronizujte problémy z Gitlab do vašeho projektu Plane",
+    "project_issue_sync_empty_state": "Mapovaná synchronizace problémů projektu se zobrazí zde",
+    "configure_project_issue_sync_state": "Konfigurovat stav synchronizace problémů",
+    "select_issue_sync_direction": "Vyberte směr synchronizace problémů",
+    "allow_bidirectional_sync": "Obousměrná - Synchronizovat problémy a komentáře oběma směry mezi Gitlab a Plane",
+    "allow_unidirectional_sync": "Jednosměrná - Synchronizovat problémy a komentáře pouze z Gitlab do Plane",
+    "allow_unidirectional_sync_warning": "Data z Gitlab Issue nahradí data v propojeném pracovním prvku Plane (pouze Gitlab → Plane)",
+    "remove_project_issue_sync": "Odstranit tuto synchronizaci problémů projektu",
+    "remove_project_issue_sync_confirmation": "Opravdu chcete odstranit tuto synchronizaci problémů projektu?",
+    "ISSUE_OPEN": "Problém otevřen",
+    "ISSUE_CLOSED": "Problém uzavřen",
+    "save": "Uložit",
+    "start_sync": "Spustit synchronizaci",
+    "choose_repository": "Vyberte repozitář..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Připojte a synchronizujte svou instanci Gitlab Enterprise s Plane.",
+    "app_form_title": "Konfigurace Gitlab Enterprise",
+    "app_form_description": "Nakonfigurujte Gitlab Enterprise pro připojení k Plane.",
+    "base_url_title": "Základní URL",
+    "base_url_description": "Základní URL vaší instance Gitlab Enterprise.",
+    "base_url_placeholder": "např. \"https://glab.plane.town\"",
+    "base_url_error": "Základní URL je povinné",
+    "invalid_base_url_error": "Neplatné základní URL",
+    "client_id_title": "ID aplikace",
+    "client_id_description": "ID aplikace, kterou jste vytvořili ve své instanci Gitlab Enterprise.",
+    "client_id_placeholder": "např. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "ID aplikace je povinné",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Client secret aplikace, kterou jste vytvořili ve své instanci Gitlab Enterprise.",
+    "client_secret_placeholder": "např. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret je povinný",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Náhodný webhook secret, který bude použit k ověření webhooku z instance Gitlab Enterprise.",
+    "webhook_secret_placeholder": "např. \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret je povinný",
+    "connect_app": "Připojit aplikaci"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Propojte svůj Slack workspace s Plane.",
+    "connect_personal_account": "Propojte svůj osobní Slack účet s Plane.",
+    "personal_account_connected": "Váš osobní účet {providerName} je nyní propojen s Plane.",
+    "link_personal_account": "Propojte svůj osobní účet {providerName} s Plane.",
+    "connected_slack_workspaces": "Propojené Slack workspaces",
+    "connected_on": "Propojeno dne {date}",
+    "disconnect_workspace": "Odpojit {name} workspace",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Získejte upozornění v soukromých zprávách Slack pro důležité aktualizace, připomenutí a výstrahy jen pro vás."
+      }
+    },
+    "project_updates": {
+      "title": "Aktualizace Projektu",
+      "description": "Nakonfigurujte oznámení o aktualizacích projektů pro vaše projekty",
+      "add_new_project_update": "Přidat nové oznámení o aktualizacích projektu",
+      "project_updates_empty_state": "Projekty propojené s kanály Slack se zobrazí zde.",
+      "project_updates_form": {
+        "title": "Konfigurovat Aktualizace Projektu",
+        "description": "Přijímejte oznámení o aktualizacích projektu ve Slack, když jsou vytvořeny pracovní položky",
+        "failed_to_load_channels": "Nepodařilo se načíst kanály ze Slack",
+        "project_dropdown": {
+          "placeholder": "Vyberte projekt",
+          "label": "Plane Projekt",
+          "no_projects": "Žádné dostupné projekty"
+        },
+        "channel_dropdown": {
+          "label": "Slack Kanál",
+          "placeholder": "Vyberte kanál",
+          "no_channels": "Žádné dostupné kanály"
+        },
+        "all_projects_connected": "Všechny projekty jsou již propojeny s kanály Slack.",
+        "all_channels_connected": "Všechny kanály Slack jsou již propojeny s projekty.",
+        "project_connection_success": "Propojení projektu úspěšně vytvořeno",
+        "project_connection_updated": "Propojení projektu úspěšně aktualizováno",
+        "project_connection_deleted": "Propojení projektu úspěšně odstraněno",
+        "failed_delete_project_connection": "Nepodařilo se odstranit propojení projektu",
+        "failed_create_project_connection": "Nepodařilo se vytvořit propojení projektu",
+        "failed_upserting_project_connection": "Nepodařilo se aktualizovat propojení projektu",
+        "failed_loading_project_connections": "Nemohli jsme načíst vaše propojení projektu. Může to být způsobeno problémem se sítí nebo problémem s integrací."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Připojte svůj Sentry pracovní prostor k Plane.",
+    "connected_sentry_workspaces": "Připojené Sentry pracovní prostory",
+    "connected_on": "Připojeno {date}",
+    "disconnect_workspace": "Odpojit pracovní prostor {name}",
+    "state_mapping": {
+      "title": "Mapování stavů",
+      "description": "Mapujte stavy incidentů Sentry na stavy vašeho projektu. Nakonfigurujte, které stavy použít, když je incident Sentry vyřešen nebo nevyřešen.",
+      "add_new_state_mapping": "Přidat nové mapování stavu",
+      "empty_state": "Nejsou nakonfigurována žádná mapování stavů. Vytvořte své první mapování pro synchronizaci stavů incidentů Sentry se stavy vašeho projektu.",
+      "failed_loading_state_mappings": "Nepodařilo se nám načíst vaše mapování stavů. Může to být způsobeno problémem se sítí nebo problémem s integrací.",
+      "loading_project_states": "Načítání stavů projektu...",
+      "error_loading_states": "Chyba při načítání stavů",
+      "no_states_available": "Nejsou dostupné žádné stavy",
+      "no_permission_states": "Nemáte oprávnění k přístupu ke stavům pro tento projekt",
+      "states_not_found": "Stavy projektu nebyly nalezeny",
+      "server_error_states": "Chyba serveru při načítání stavů"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Připojte a synchronizujte své repozitáře Bitbucket Data Center s Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Ověření tokenů externích IdP pro přístup k API.",
+    "header_description": "Ověřujte externě vydané OIDC/JWT tokeny z vašeho IdP (Azure AD, Okta atd.) pro přístup k API Plane.",
+    "connected": "Připojeno",
+    "connect": "Připojit",
+    "uninstall": "Odinstalovat",
+    "uninstalling": "Odinstalace...",
+    "install_success": "OAuth Bridge úspěšně nainstalován.",
+    "install_error": "Nepodařilo se nainstalovat OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge odinstalován.",
+    "uninstall_error": "Nepodařilo se odinstalovat OAuth Bridge.",
+    "token_providers": "Poskytovatelé tokenů",
+    "token_providers_description": "Nakonfigurujte externí IdP, jejichž JWT jsou přijímány jako API přihlašovací údaje.",
+    "add_provider": "Přidat poskytovatele",
+    "edit_provider": "Upravit poskytovatele",
+    "enabled": "Povoleno",
+    "disabled": "Zakázáno",
+    "test": "Test",
+    "no_providers_title": "Žádní poskytovatelé nejsou nakonfigurováni.",
+    "no_providers_description": "Přidejte IdP pro povolení ověřování externími tokeny.",
+    "provider_updated": "Poskytovatel aktualizován.",
+    "provider_added": "Poskytovatel přidán.",
+    "provider_save_error": "Nepodařilo se uložit poskytovatele.",
+    "provider_deleted": "Poskytovatel smazán.",
+    "provider_delete_error": "Nepodařilo se smazat poskytovatele.",
+    "provider_update_error": "Nepodařilo se aktualizovat poskytovatele.",
+    "jwks_reachable": "JWKS dostupný",
+    "jwks_unreachable": "JWKS nedostupný",
+    "jwks_test_error": "Nepodařilo se získat JWKS z nakonfigurované URL.",
+    "provider_form": {
+      "name_label": "Název",
+      "name_placeholder": "např. Azure AD Production",
+      "name_description": "Čitelný popisek pro tohoto poskytovatele identity",
+      "name_required": "Název je povinný.",
+      "issuer_label": "Vydavatel",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Očekávaná hodnota claim iss v JWT",
+      "issuer_required": "Vydavatel je povinný.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "HTTPS endpoint poskytující JSON Web Key Set poskytovatele",
+      "jwks_url_required": "URL JWKS je povinná.",
+      "jwks_url_https": "URL JWKS musí používat HTTPS.",
+      "audience_label": "Publikum",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Očekávané claim(y) aud v JWT, oddělené čárkami.",
+      "user_claims_label": "Claim uživatele",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "JWT claim obsahující e-mailovou adresu uživatele",
+      "user_claims_required": "Claim uživatele je povinný.",
+      "allowed_algorithms_label": "Povolené podpisové algoritmy",
+      "allowed_algorithms_description": "Asymetrické algoritmy pro ověření podpisu JWT",
+      "allowed_algorithms_required": "Je vyžadován alespoň jeden algoritmus.",
+      "select_algorithms": "Vyberte algoritmy",
+      "jwks_cache_ttl_label": "TTL mezipaměti JWKS (sekundy)",
+      "jwks_cache_ttl_description": "Doba ukládání klíčů JWKS poskytovatele do mezipaměti (minimum 60s, výchozí 24 hodin)",
+      "jwks_cache_ttl_min": "TTL mezipaměti musí být alespoň 60 sekund.",
+      "rate_limit_label": "Limit požadavků",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Omezení požadavků jako počet/období (např. 120/minute). Ponechte prázdné pro výchozí limit.",
+      "enable_provider": "Povolit tohoto poskytovatele",
+      "saving": "Ukládání...",
+      "update": "Aktualizovat"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Připojte a synchronizujte svou organizaci GitHub Enterprise s Plane.",
+    "app_form_title": "Konfigurace GitHub Enterprise",
+    "app_form_description": "Konfigurujte GitHub Enterprise pro připojení s Plane.",
+    "app_id_title": "App ID",
+    "app_id_description": "ID aplikace, kterou jste vytvořili v organizaci GitHub Enterprise.",
+    "app_id_placeholder": "např., \"1234567890\"",
+    "app_id_error": "App ID je povinné pole",
+    "app_name_title": "App Slug",
+    "app_name_description": "Slug aplikace, kterou jste vytvořili v organizaci GitHub Enterprise.",
+    "app_name_error": "App slug je povinné pole",
+    "app_name_placeholder": "např., \"plane-github-enterprise\"",
+    "base_url_title": "Základní URL",
+    "base_url_description": "Základní URL vaší organizace GitHub Enterprise.",
+    "base_url_placeholder": "např., \"https://plane.github.com\"",
+    "base_url_error": "Základní URL je povinné pole",
+    "invalid_base_url_error": "Neplatná základní URL",
+    "client_id_title": "ID klienta",
+    "client_id_description": "ID klienta aplikace, kterou jste vytvořili v organizaci GitHub Enterprise.",
+    "client_id_placeholder": "např., \"1234567890\"",
+    "client_id_error": "ID klienta je povinné pole",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Secret klienta aplikace, kterou jste vytvořili v organizaci GitHub Enterprise.",
+    "client_secret_placeholder": "např., \"1234567890\"",
+    "client_secret_error": "Secret klienta je povinné pole",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Secret webhooku aplikace, kterou jste vytvořili v organizaci GitHub Enterprise.",
+    "webhook_secret_placeholder": "např., \"1234567890\"",
+    "webhook_secret_error": "Secret webhooku je povinné pole",
+    "private_key_title": "Soukromý klíč (Base64 encoded)",
+    "private_key_description": "Base64 encoded private key of the app you created in your GitHub Enterprise organization.",
+    "private_key_placeholder": "např., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Soukromý klíč je povinné pole",
+    "connect_app": "Připojit aplikaci"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Poskytnuté dotazové parametry jsou neplatné nebo chybí povinná pole",
+    "invalid_installation_account": "Poskytnutý instalační účet není platný",
+    "generic_error": "Při zpracování vaší žádosti došlo k neočekávané chybě",
+    "connection_not_found": "Požadované připojení nebylo nalezeno",
+    "multiple_connections_found": "Bylo nalezeno více připojení, když bylo očekáváno pouze jedno",
+    "cannot_create_multiple_connections": "Už jste připojili svou organizaci s pracovním prostorem. Prosím, odpojte existující připojení před připojením nového.",
+    "installation_not_found": "Požadovaná instalace nebyla nalezena",
+    "user_not_found": "Požadovaný uživatel nebyl nalezen",
+    "error_fetching_token": "Nepodařilo se získat autentizační token",
+    "invalid_app_credentials": "Poskytnuté přihlašovací údaje aplikace jsou neplatné",
+    "invalid_app_installation_id": "Nepodařilo se nainstalovat aplikaci"
+  },
+  "import_status": {
+    "queued": "V pořádku",
+    "created": "Vytvořeno",
+    "initiated": "Zahájeno",
+    "pulling": "Stahování",
+    "timed_out": "Časový limit vypršel",
+    "pulled": "Staženo",
+    "progressing": "Probíhá",
+    "transforming": "Transformace",
+    "transformed": "Transformováno",
+    "pushing": "Odesílání",
+    "finished": "Dokončeno",
+    "error": "Chyba",
+    "cancelled": "Zrušeno"
+  }
+}
diff --git a/packages/i18n/src/locales/cs/module.json b/packages/i18n/src/locales/cs/module.json
new file mode 100644
index 0000000..03dba08
--- /dev/null
+++ b/packages/i18n/src/locales/cs/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Modul} few {Moduly} other {Modulů}}",
+    "no_module": "Žádný modul",
+    "select": "Přidat moduly"
+  }
+}
diff --git a/packages/i18n/src/locales/cs/navigation.json b/packages/i18n/src/locales/cs/navigation.json
new file mode 100644
index 0000000..d340abf
--- /dev/null
+++ b/packages/i18n/src/locales/cs/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Nenalezeny výsledky"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Poznámky",
+    "your_work": "Vaše práce",
+    "projects": "Projekty",
+    "pages": "Stránky",
+    "new_work_item": "Nová pracovní položka",
+    "home": "Domov",
+    "inbox": "Doručená pošta",
+    "workspace": "Pracovní prostor",
+    "views": "Pohledy",
+    "analytics": "Analytika",
+    "work_items": "Pracovní položky",
+    "cycles": "Cykly",
+    "modules": "Moduly",
+    "intake": "Příjem",
+    "drafts": "Koncepty",
+    "favorites": "Oblíbené",
+    "pro": "Pro",
+    "upgrade": "Upgrade",
+    "pi_chat": "Plane AI",
+    "epics": "Epiky",
+    "upgrade_plan": "Plán upgradu",
+    "plane_pro": "Plane Pro",
+    "business": "Byznys"
+  }
+}
diff --git a/packages/i18n/src/locales/cs/notification.json b/packages/i18n/src/locales/cs/notification.json
new file mode 100644
index 0000000..f447c9e
--- /dev/null
+++ b/packages/i18n/src/locales/cs/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Schránka",
+    "page_label": "{workspace} - Schránka",
+    "options": {
+      "mark_all_as_read": "Označit vše jako přečtené",
+      "mark_read": "Označit jako přečtené",
+      "mark_unread": "Označit jako nepřečtené",
+      "refresh": "Obnovit",
+      "filters": "Filtry schránky",
+      "show_unread": "Zobrazit nepřečtené",
+      "show_snoozed": "Zobrazit odložené",
+      "show_archived": "Zobrazit archivované",
+      "mark_archive": "Archivovat",
+      "mark_unarchive": "Zrušit archivaci",
+      "mark_snooze": "Odložit",
+      "mark_unsnooze": "Zrušit odložení"
+    },
+    "toasts": {
+      "read": "Oznámení přečteno",
+      "unread": "Označeno jako nepřečtené",
+      "archived": "Archivováno",
+      "unarchived": "Zrušena archivace",
+      "snoozed": "Odloženo",
+      "unsnoozed": "Zrušeno odložení"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Vyberte pro podrobnosti."
+      },
+      "all": {
+        "title": "Žádné přiřazené položky",
+        "description": "Zobrazí se zde aktualizace přiřazených položek."
+      },
+      "mentions": {
+        "title": "Žádné zmínky",
+        "description": "Zobrazí se zde zmínky o vás."
+      }
+    },
+    "tabs": {
+      "all": "Vše",
+      "mentions": "Zmínky"
+    },
+    "filter": {
+      "assigned": "Přiřazeno mě",
+      "created": "Vytvořil jsem",
+      "subscribed": "Odebírám"
+    },
+    "snooze": {
+      "1_day": "1 den",
+      "3_days": "3 dny",
+      "5_days": "5 dní",
+      "1_week": "1 týden",
+      "2_weeks": "2 týdny",
+      "custom": "Vlastní"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/page.json b/packages/i18n/src/locales/cs/page.json
new file mode 100644
index 0000000..8e20586
--- /dev/null
+++ b/packages/i18n/src/locales/cs/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Osnova",
+        "empty_state": {
+          "title": "Chybí nadpisy",
+          "description": "Přidejte na tuto stránku nějaké nadpisy, aby se zde zobrazily."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Slova",
+          "characters": "Znaky",
+          "paragraphs": "Odstavce",
+          "read_time": "Doba čtení"
+        },
+        "actors_info": {
+          "edited_by": "Upravil",
+          "created_by": "Vytvořil"
+        },
+        "version_history": {
+          "label": "Historie verzí",
+          "current_version": "Aktuální verze",
+          "highlight_changes": "Zvýraznit změny"
+        }
+      },
+      "assets": {
+        "label": "Přílohy",
+        "download_button": "Stáhnout",
+        "empty_state": {
+          "title": "Chybí obrázky",
+          "description": "Přidejte obrázky, aby se zde zobrazily."
+        }
+      },
+      "comments": {
+        "label": "Komentáře",
+        "empty_state": {
+          "title": "Žádné komentáře",
+          "description": "Přidejte komentáře, aby se zde zobrazily."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Název poznámky nesmí být delší než 100 znaků.",
+        "already_exists": "Již existuje poznámka bez popisu"
+      },
+      "created": {
+        "title": "Poznámka vytvořena",
+        "message": "Poznámka byla úspěšně vytvořena"
+      },
+      "not_created": {
+        "title": "Poznámka nebyla vytvořena",
+        "message": "Poznámku se nepodařilo vytvořit"
+      },
+      "updated": {
+        "title": "Poznámka aktualizována",
+        "message": "Poznámka byla úspěšně aktualizována"
+      },
+      "not_updated": {
+        "title": "Poznámka nebyla aktualizována",
+        "message": "Poznámku se nepodařilo aktualizovat"
+      },
+      "removed": {
+        "title": "Poznámka odstraněna",
+        "message": "Poznámka byla úspěšně odstraněna"
+      },
+      "not_removed": {
+        "title": "Poznámka nebyla odstraněna",
+        "message": "Poznámku se nepodařilo odstranit"
+      }
+    },
+    "open_button": "Otevřít navigační panel",
+    "close_button": "Zavřít navigační panel",
+    "outline_floating_button": "Otevřít osnovu"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Přesunout",
+        "loading": "Přesouvání"
+      },
+      "cannot_move_to_teamspace": "Soukromé a sdílené stránky nelze přesunout do týmového prostoru.",
+      "placeholders": {
+        "workspace_to_all": "Hledat projekty a týmové prostory",
+        "workspace_to_project": "Hledat projekty",
+        "project_to_all": "Hledat projekty a týmové prostory",
+        "project_to_project": "Hledat projekty",
+        "project_to_all_with_wiki": "Hledat wiki kolekce, projekty a týmové prostory",
+        "project_to_project_with_wiki": "Hledat wiki kolekce a projekty"
+      },
+      "toasts": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Stránka byla úspěšně přesunuta."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Stránku se nepodařilo přesunout. Zkuste to prosím později."
+        },
+        "collection_error": {
+          "title": "Přesunuto do wiki",
+          "message": "Stránka byla přesunuta do wiki, ale nepodařilo se ji přidat do vybrané kolekce. Zůstává v General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Odebrat z kolekce",
+      "success_message": "Stránka byla odebrána z kolekce.",
+      "error_message": "Stránku se nepodařilo odebrat z kolekce. Zkuste to prosím znovu."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Byl dosažen limit obsahu a živá synchronizace je vypnutá. Vytvořte novou stránku nebo použijte vnořené stránky a pokračujte v synchronizaci."
+  }
+}
diff --git a/packages/i18n/src/locales/cs/power-k.json b/packages/i18n/src/locales/cs/power-k.json
new file mode 100644
index 0000000..edcdc15
--- /dev/null
+++ b/packages/i18n/src/locales/cs/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Hromadně smazat pracovní položky"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Akce pracovní položky",
+        "indicator": "Pracovní položka",
+        "change_state": "Změnit stav",
+        "change_priority": "Změnit prioritu",
+        "change_assignees": "Přiřadit",
+        "assign_to_me": "Přiřadit mně",
+        "unassign_from_me": "Zrušit přiřazení ode mě",
+        "change_estimate": "Změnit odhad",
+        "add_to_cycle": "Přidat do cyklu",
+        "add_to_modules": "Přidat do modulů",
+        "add_labels": "Přidat štítky",
+        "subscribe": "Odebírat oznámení",
+        "unsubscribe": "Zrušit odběr oznámení",
+        "delete": "Smazat",
+        "copy_id": "Kopírovat ID",
+        "copy_id_toast_success": "ID pracovní položky zkopírováno do schránky.",
+        "copy_id_toast_error": "Při kopírování ID pracovní položky do schránky došlo k chybě.",
+        "copy_title": "Kopírovat název",
+        "copy_title_toast_success": "Název pracovní položky zkopírován do schránky.",
+        "copy_title_toast_error": "Při kopírování názvu pracovní položky do schránky došlo k chybě.",
+        "copy_url": "Kopírovat URL",
+        "copy_url_toast_success": "URL pracovní položky zkopírována do schránky.",
+        "copy_url_toast_error": "Při kopírování URL pracovní položky do schránky došlo k chybě."
+      },
+      "cycle": {
+        "title": "Akce cyklu",
+        "indicator": "Cyklus",
+        "add_to_favorites": "Přidat do oblíbených",
+        "remove_from_favorites": "Odebrat z oblíbených",
+        "copy_url": "Kopírovat URL",
+        "copy_url_toast_success": "URL cyklu zkopírována do schránky.",
+        "copy_url_toast_error": "Při kopírování URL cyklu do schránky došlo k chybě."
+      },
+      "module": {
+        "title": "Akce modulu",
+        "indicator": "Modul",
+        "add_remove_members": "Přidat/odebrat členy",
+        "change_status": "Změnit stav",
+        "add_to_favorites": "Přidat do oblíbených",
+        "remove_from_favorites": "Odebrat z oblíbených",
+        "copy_url": "Kopírovat URL",
+        "copy_url_toast_success": "URL modulu zkopírována do schránky.",
+        "copy_url_toast_error": "Při kopírování URL modulu do schránky došlo k chybě."
+      },
+      "page": {
+        "title": "Akce stránky",
+        "indicator": "Stránka",
+        "lock": "Uzamknout",
+        "unlock": "Odemknout",
+        "make_private": "Nastavit jako soukromé",
+        "make_public": "Nastavit jako veřejné",
+        "archive": "Archivovat",
+        "restore": "Obnovit",
+        "add_to_favorites": "Přidat do oblíbených",
+        "remove_from_favorites": "Odebrat z oblíbených",
+        "copy_url": "Kopírovat URL",
+        "copy_url_toast_success": "URL stránky zkopírována do schránky.",
+        "copy_url_toast_error": "Při kopírování URL stránky do schránky došlo k chybě."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Nová pracovní položka",
+      "create_page": "Nová stránka",
+      "create_view": "Nový pohled",
+      "create_cycle": "Nový cyklus",
+      "create_module": "Nový modul",
+      "create_project": "Nový projekt",
+      "create_workspace": "Nový pracovní prostor",
+      "create_project_automation": "Nová automatizace"
+    },
+    "navigation_actions": {
+      "open_workspace": "Otevřít pracovní prostor",
+      "nav_home": "Přejít na domovskou stránku",
+      "nav_inbox": "Přejít do doručené pošty",
+      "nav_your_work": "Přejít na vaši práci",
+      "nav_account_settings": "Přejít do nastavení účtu",
+      "open_project": "Otevřít projekt",
+      "nav_projects_list": "Přejít na seznam projektů",
+      "nav_all_workspace_work_items": "Přejít na všechny pracovní položky",
+      "nav_assigned_workspace_work_items": "Přejít na přiřazené pracovní položky",
+      "nav_created_workspace_work_items": "Přejít na vytvořené pracovní položky",
+      "nav_subscribed_workspace_work_items": "Přejít na odebírané pracovní položky",
+      "nav_workspace_analytics": "Přejít na analytiku pracovního prostoru",
+      "nav_workspace_drafts": "Přejít na koncepty pracovního prostoru",
+      "nav_workspace_archives": "Přejít na archivy pracovního prostoru",
+      "open_workspace_setting": "Otevřít nastavení pracovního prostoru",
+      "nav_workspace_settings": "Přejít do nastavení pracovního prostoru",
+      "nav_project_work_items": "Přejít na pracovní položky",
+      "open_project_cycle": "Otevřít cyklus",
+      "nav_project_cycles": "Přejít na cykly",
+      "open_project_module": "Otevřít modul",
+      "nav_project_modules": "Přejít na moduly",
+      "open_project_view": "Otevřít pohled projektu",
+      "nav_project_views": "Přejít na pohledy projektu",
+      "nav_project_pages": "Přejít na stránky",
+      "nav_project_intake": "Přejít do příjmu",
+      "nav_project_archives": "Přejít na archivy projektu",
+      "open_project_setting": "Otevřít nastavení projektu",
+      "nav_project_settings": "Přejít do nastavení projektu",
+      "nav_workspace_active_cycle": "Přejít na všechny aktivní cykly",
+      "nav_project_overview": "Přejít na přehled projektu"
+    },
+    "account_actions": {
+      "sign_out": "Odhlásit se",
+      "workspace_invites": "Pozvánky do pracovního prostoru"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Přepnout postranní panel aplikace",
+      "copy_current_page_url": "Kopírovat URL aktuální stránky",
+      "copy_current_page_url_toast_success": "URL aktuální stránky zkopírována do schránky.",
+      "copy_current_page_url_toast_error": "Při kopírování URL aktuální stránky do schránky došlo k chybě.",
+      "focus_top_nav_search": "Zaměřit se na vyhledávání"
+    },
+    "preferences_actions": {
+      "update_theme": "Změnit téma rozhraní",
+      "update_timezone": "Změnit časové pásmo",
+      "update_start_of_week": "Změnit první den v týdnu",
+      "update_language": "Změnit jazyk rozhraní",
+      "toast": {
+        "theme": {
+          "success": "Téma úspěšně aktualizováno.",
+          "error": "Aktualizace tématu se nezdařila. Zkuste to prosím znovu."
+        },
+        "timezone": {
+          "success": "Časové pásmo úspěšně aktualizováno.",
+          "error": "Aktualizace časového pásma se nezdařila. Zkuste to prosím znovu."
+        },
+        "generic": {
+          "success": "Předvolby úspěšně aktualizovány.",
+          "error": "Aktualizace předvoleb se nezdařila. Zkuste to prosím znovu."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Otevřít klávesové zkratky",
+      "open_plane_documentation": "Otevřít dokumentaci Plane",
+      "join_forum": "Připojte se k našemu fóru",
+      "report_bug": "Nahlásit chybu",
+      "chat_with_us": "Chatovat s námi"
+    },
+    "page_placeholders": {
+      "default": "Zadejte příkaz nebo hledejte",
+      "open_workspace": "Otevřít pracovní prostor",
+      "open_project": "Otevřít projekt",
+      "open_workspace_setting": "Otevřít nastavení pracovního prostoru",
+      "open_project_cycle": "Otevřít cyklus",
+      "open_project_module": "Otevřít modul",
+      "open_project_view": "Otevřít pohled projektu",
+      "open_project_setting": "Otevřít nastavení projektu",
+      "update_work_item_state": "Změnit stav",
+      "update_work_item_priority": "Změnit prioritu",
+      "update_work_item_assignee": "Přiřadit",
+      "update_work_item_estimate": "Změnit odhad",
+      "update_work_item_cycle": "Přidat do cyklu",
+      "update_work_item_module": "Přidat do modulů",
+      "update_work_item_labels": "Přidat štítky",
+      "update_module_member": "Změnit členy",
+      "update_module_status": "Změnit stav",
+      "update_theme": "Změnit téma",
+      "update_timezone": "Změnit časové pásmo",
+      "update_start_of_week": "Změnit první den v týdnu",
+      "update_language": "Změnit jazyk"
+    },
+    "search_menu": {
+      "no_results": "Nenalezeny žádné výsledky",
+      "clear_search": "Vymazat hledání",
+      "go_to_advanced_search": "Přejít na pokročilé hledání"
+    },
+    "footer": {
+      "workspace_level": "Úroveň pracovního prostoru"
+    },
+    "group_titles": {
+      "actions": "Akce",
+      "contextual": "Kontextové",
+      "navigation": "Navigovat",
+      "create": "Vytvořit",
+      "general": "Obecné",
+      "settings": "Nastavení",
+      "account": "Účet",
+      "miscellaneous": "Různé",
+      "preferences": "Předvolby",
+      "help": "Nápověda"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/project-settings.json b/packages/i18n/src/locales/cs/project-settings.json
new file mode 100644
index 0000000..967e998
--- /dev/null
+++ b/packages/i18n/src/locales/cs/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Zadejte ID projektu",
+      "please_select_a_timezone": "Vyberte časové pásmo",
+      "archive_project": {
+        "title": "Archivovat projekt",
+        "description": "Archivace skryje projekt z menu. Přístup zůstane přes stránku projektů.",
+        "button": "Archivovat projekt"
+      },
+      "delete_project": {
+        "title": "Smazat projekt",
+        "description": "Smazáním projektu odstraníte všechna data. Akce je nevratná.",
+        "button": "Smazat projekt"
+      },
+      "toast": {
+        "success": "Projekt aktualizován",
+        "error": "Aktualizace se nezdařila. Zkuste to znovu."
+      }
+    },
+    "members": {
+      "label": "Členové",
+      "project_lead": "Vedoucí projektu",
+      "project_lead_description": "Vyberte vedoucího projektu.",
+      "default_assignee": "Výchozí přiřazení",
+      "default_assignee_description": "Vyberte výchozího přiřazeného pro projekt.",
+      "project_subscribers": "Odběratelé projektu",
+      "project_subscribers_description": "Vyberte členy, kteří budou dostávat oznámení pro tento projekt.",
+      "guest_super_permissions": {
+        "title": "Udělit hostům přístup ke všem položkám:",
+        "sub_heading": "Hosté uvidí všechny položky v projektu."
+      },
+      "invite_members": {
+        "title": "Pozvat členy",
+        "sub_heading": "Pozvěte členy do projektu.",
+        "select_co_worker": "Vybrat spolupracovníka"
+      }
+    },
+    "states": {
+      "heading": "Stavy",
+      "description": "Definujte a přizpůsobte stavy workflow pro sledování průběhu vašich pracovních položek.",
+      "describe_this_state_for_your_members": "Popište tento stav členům.",
+      "empty_state": {
+        "title": "Žádné stavy pro skupinu {groupKey}",
+        "description": "Vytvořte nový stav"
+      }
+    },
+    "labels": {
+      "heading": "Štítky",
+      "description": "Vytvářejte vlastní štítky pro kategorizaci a organizaci vašich pracovních položek",
+      "label_title": "Název štítku",
+      "label_title_is_required": "Název štítku je povinný",
+      "label_max_char": "Název štítku nesmí přesáhnout 255 znaků",
+      "toast": {
+        "error": "Chyba při aktualizaci štítku"
+      }
+    },
+    "estimates": {
+      "heading": "Odhady",
+      "description": "Nastavte systémy odhadů pro sledování a komunikaci úsilí potřebného pro každou pracovní položku.",
+      "label": "Odhady",
+      "title": "Povolit odhady pro můj projekt",
+      "enable_description": "Pomáhají vám komunikovat složitost a pracovní zátěž týmu.",
+      "no_estimate": "Bez odhadu",
+      "new": "Nový systém odhadů",
+      "create": {
+        "custom": "Vlastní",
+        "start_from_scratch": "Začít od nuly",
+        "choose_template": "Vybrat šablonu",
+        "choose_estimate_system": "Vybrat systém odhadů",
+        "enter_estimate_point": "Zadat odhad",
+        "step": "Krok {step} z {total}",
+        "label": "Vytvořit odhad"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Odhad vytvořen",
+            "message": "Odhad byl úspěšně vytvořen"
+          },
+          "error": {
+            "title": "Vytvoření odhadu selhalo",
+            "message": "Nepodařilo se vytvořit nový odhad, zkuste to prosím znovu."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Odhad upraven",
+            "message": "Odhad byl aktualizován ve vašem projektu."
+          },
+          "error": {
+            "title": "Úprava odhadu selhala",
+            "message": "Nepodařilo se upravit odhad, zkuste to prosím znovu"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Úspěch!",
+            "message": "Odhady byly povoleny."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Úspěch!",
+            "message": "Odhady byly zakázány."
+          },
+          "error": {
+            "title": "Chyba!",
+            "message": "Odhad nemohl být zakázán. Zkuste to prosím znovu"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Odhady přeuspořádány",
+            "message": "Odhady byly přeuspořádány ve vašem projektu."
+          },
+          "error": {
+            "title": "Přeuspořádání odhadů selhalo",
+            "message": "Nepodařilo se přeuspořádat odhady, zkuste to prosím znovu"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Systém odhadů vytvořen",
+            "message": "Úspěšně vytvořeno a povoleno"
+          },
+          "error": {
+            "title": "Chyba",
+            "message": "Něco se pokazilo"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Odhad musí být větší než 0.",
+        "unable_to_process": "Nemůžeme zpracovat váš požadavek, zkuste to prosím znovu.",
+        "numeric": "Odhad musí být číselná hodnota.",
+        "character": "Odhad musí být znakový.",
+        "empty": "Hodnota odhadu nemůže být prázdná.",
+        "already_exists": "Hodnota odhadu již existuje.",
+        "unsaved_changes": "Máte neuložené změny. Před kliknutím na hotovo je prosím uložte",
+        "remove_empty": "Odhad nemůže být prázdný. Zadejte hodnotu do každého pole nebo odstraňte ta, pro která nemáte hodnoty.",
+        "fill": "Vyplňte prosím toto pole odhadu",
+        "repeat": "Hodnota odhadu se nemůže opakovat"
+      },
+      "systems": {
+        "points": {
+          "label": "Body",
+          "fibonacci": "Fibonacci",
+          "linear": "Lineární",
+          "squares": "Čtverce",
+          "custom": "Vlastní"
+        },
+        "categories": {
+          "label": "Kategorie",
+          "t_shirt_sizes": "Velikosti triček",
+          "easy_to_hard": "Od snadného po těžké",
+          "custom": "Vlastní"
+        },
+        "time": {
+          "label": "Čas",
+          "hours": "Hodiny"
+        }
+      },
+      "edit": {
+        "title": "Upravit systém odhadů",
+        "add_or_update": {
+          "title": "Přidat, upravit nebo odebrat odhady",
+          "description": "Spravujte aktuální systém přidáním, úpravou nebo odebráním bodů či kategorií."
+        },
+        "switch": {
+          "title": "Změnit typ odhadu",
+          "description": "Převeďte váš bodový systém na systém kategorií a naopak."
+        }
+      },
+      "switch": "Přepnout systém odhadů",
+      "current": "Aktuální systém odhadů",
+      "select": "Vyberte systém odhadů"
+    },
+    "automations": {
+      "label": "Automatizace",
+      "heading": "Automatizace",
+      "description": "Konfigurujte automatické akce pro zefektivnění procesu řízení projektu a snížení manuálních úkolů.",
+      "auto-archive": {
+        "title": "Automaticky archivovat uzavřené pracovní položky",
+        "description": "Plane bude automaticky archivovat pracovní položky, které byly dokončeny nebo zrušeny.",
+        "duration": "Automaticky archivovat pracovní položky, které jsou uzavřené po dobu"
+      },
+      "auto-close": {
+        "title": "Automaticky uzavírat pracovní položky",
+        "description": "Plane automaticky uzavře pracovní položky, které nebyly dokončeny nebo zrušeny.",
+        "duration": "Automaticky uzavřít pracovní položky, které jsou neaktivní po dobu",
+        "auto_close_status": "Stav automatického uzavření"
+      },
+      "auto-remind": {
+        "title": "Automatické upozornění",
+        "description": "Plane automaticky pošle upozornění přes e-mail a v aplikaci, aby vaše tým zůstal na cestě s termíny.",
+        "duration": "Odeslat upozornění před"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Zatím žádné štítky",
+        "description": "Vytvořte štítky pro organizaci a filtrování pracovních položek ve vašem projektu."
+      },
+      "estimates": {
+        "title": "Zatím žádné systémy odhadů",
+        "description": "Vytvořte sadu odhadů pro komunikaci množství práce na pracovní položku.",
+        "primary_button": "Přidat systém odhadů"
+      },
+      "integrations": {
+        "title": "Žádné integrace nejsou nakonfigurovány",
+        "description": "Nakonfigurujte GitHub a další integrace pro synchronizaci vašich pracovních položek projektu."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Povolit workflow",
+        "description": "Nastavte workflow pro řízení pohybu pracovních položek",
+        "no_states_tooltip": "Do workflow nejsou přidány žádné stavy.",
+        "no_work_item_types_tooltip": "Do workflow nejsou přidány žádné typy pracovních položek.",
+        "no_states_or_work_item_types_tooltip": "Do workflow nejsou přidány žádné stavy nebo typy pracovních položek.",
+        "toast": {
+          "loading": {
+            "enabling": "Povolování workflow",
+            "disabling": "Zakazování workflow"
+          },
+          "success": {
+            "title": "Úspěch!",
+            "message": "Workflow úspěšně povolena."
+          },
+          "error": {
+            "title": "Chyba!",
+            "message": "Povolení workflow se nezdařilo. Zkuste to prosím znovu."
+          }
+        }
+      },
+      "heading": "Workflow",
+      "description": "Automatizujte přechody pracovních položek a nastavte pravidla pro řízení toho, jak se úkoly pohybují vaším projektem.",
+      "add_button": "Přidat nové workflow",
+      "search": "Hledat workflow",
+      "detail": {
+        "define": "Definovat workflow",
+        "add_states": "Přidat stavy",
+        "unmapped_states": {
+          "title": "Detekovány nenamapované stavy",
+          "description": "Některé pracovní položky vybraných typů jsou aktuálně ve stavech, které v tomto workflow neexistují.",
+          "note": "Pokud toto workflow povolíte, budou tyto položky automaticky přesunuty do počátečního stavu tohoto workflow.",
+          "label": "Chybějící stavy",
+          "tooltip": "Některé pracovní položky jsou ve stavech, které nejsou namapovány do tohoto workflow. Otevřete workflow pro kontrolu."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Všechny stavy se používají",
+          "description": "Všechny definované stavy pro tento projekt jsou již přítomny ve vašem aktuálním workflow."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Toto workflow se vztahuje na jakýkoli typ pracovní položky, který není přiřazen k workflow."
+      },
+      "create": {
+        "heading": "Vytvořit nové workflow",
+        "name": {
+          "placeholder": "Přidejte jedinečný název",
+          "validation": {
+            "max_length": "Název musí mít méně než 255 znaků",
+            "required": "Název je povinný",
+            "invalid": "Název může obsahovat pouze písmena, číslice, mezery, pomlčky a apostrofy"
+          }
+        },
+        "description": {
+          "placeholder": "Přidejte krátký popis",
+          "validation": {
+            "invalid": "Popis může obsahovat pouze písmena, číslice, mezery, pomlčky a apostrofy"
+          }
+        },
+        "work_item_type": {
+          "label": "Typ pracovní položky"
+        },
+        "success": {
+          "title": "Úspěch!",
+          "message": "Workflow úspěšně vytvořeno."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Vytvoření workflow se nezdařilo. Zkuste to prosím znovu."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Workflow úspěšně aktualizováno."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Aktualizace workflow se nezdařila. Zkuste to prosím znovu."
+        }
+      },
+      "delete": {
+        "loading": "Mazání workflow",
+        "success": {
+          "title": "Úspěch!",
+          "message": "Workflow úspěšně smazáno."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Smazání workflow se nezdařilo. Zkuste to prosím znovu."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Stavy úspěšně přidány."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Přidání stavů se nezdařilo. Zkuste to prosím znovu."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Typy pracovních položek",
+      "description": "Vytvářejte a přizpůsobujte různé typy pracovních položek s jedinečnými vlastnostmi"
+    },
+    "features": {
+      "cycles": {
+        "title": "Cykly",
+        "short_title": "Cykly",
+        "description": "Naplánujte práci v flexibilních obdobích, která se přizpůsobí jedinečnému rytmu a tempu tohoto projektu.",
+        "toggle_title": "Povolit cykly",
+        "toggle_description": "Naplánujte práci v soustředěných časových rámcích."
+      },
+      "modules": {
+        "title": "Moduly",
+        "short_title": "Moduly",
+        "description": "Organizujte práci do dílčích projektů s vyhrazenými vedoucími a přiřazenými osobami.",
+        "toggle_title": "Povolit moduly",
+        "toggle_description": "Členové projektu budou moci vytvářet a upravovat moduly."
+      },
+      "views": {
+        "title": "Zobrazení",
+        "short_title": "Zobrazení",
+        "description": "Uložte vlastní řazení, filtry a možnosti zobrazení nebo je sdílejte se svým týmem.",
+        "toggle_title": "Povolit zobrazení",
+        "toggle_description": "Členové projektu budou moci vytvářet a upravovat zobrazení."
+      },
+      "pages": {
+        "title": "Stránky",
+        "short_title": "Stránky",
+        "description": "Vytvářejte a upravujte volný obsah: poznámky, dokumenty, cokoliv.",
+        "toggle_title": "Povolit stránky",
+        "toggle_description": "Členové projektu budou moci vytvářet a upravovat stránky."
+      },
+      "intake": {
+        "intake_responsibility": "Odpovědnost za příjem",
+        "intake_sources": "Zdroje příjmu",
+        "title": "Příjem",
+        "short_title": "Příjem",
+        "description": "Umožněte nečlenům sdílet chyby, zpětnou vazbu a návrhy; bez narušení vašeho pracovního postupu.",
+        "toggle_title": "Povolit příjem",
+        "toggle_description": "Povolit členům projektu vytvářet žádosti o příjem v aplikaci.",
+        "toggle_tooltip_on": "Požádejte správce projektu, aby to zapnul.",
+        "toggle_tooltip_off": "Požádejte správce projektu, aby to vypnul.",
+        "notify_assignee": {
+          "title": "Upozornit přiřazené",
+          "description": "Pro novou žádost o příjem budou výchozí přiřazení upozorněni prostřednictvím oznámení"
+        },
+        "in_app": {
+          "title": "V aplikaci",
+          "description": "Získejte nové pracovní položky od členů a hostů ve vašem pracovním prostoru bez narušení stávajících."
+        },
+        "email": {
+          "title": "E-mail",
+          "description": "Sbírejte nové pracovní položky od kohokoli, kdo pošle e-mail na adresu Plane.",
+          "fieldName": "ID e-mailu"
+        },
+        "form": {
+          "title": "Formuláře",
+          "description": "Umožněte lidem mimo váš pracovní prostor vytvářet potenciální nové pracovní položky prostřednictvím vyhrazeného a zabezpečeného formuláře.",
+          "fieldName": "Výchozí URL formuláře",
+          "create_forms": "Vytvářejte formuláře pomocí typů pracovních položek",
+          "manage_forms": "Spravovat formuláře",
+          "manage_forms_tooltip": "Požádejte správce pracovního prostoru o správu.",
+          "create_form": "Vytvořit formulář",
+          "edit_form": "Upravit podrobnosti formuláře",
+          "form_title": "Název formuláře",
+          "form_title_required": "Název formuláře je povinný",
+          "work_item_type": "Typ pracovní položky",
+          "remove_property": "Odebrat vlastnost",
+          "select_properties": "Vybrat vlastnosti",
+          "search_placeholder": "Hledat vlastnosti",
+          "toasts": {
+            "success_create": "Formulář příjmu byl úspěšně vytvořen",
+            "success_update": "Formulář příjmu byl úspěšně aktualizován",
+            "error_create": "Nepodařilo se vytvořit formulář příjmu",
+            "error_update": "Nepodařilo se aktualizovat formulář příjmu"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Nastavování přiřazených...",
+            "success": {
+              "title": "Úspěch!",
+              "message": "Přiřazení úspěšně nastaveno."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Při nastavování přiřazených se něco pokazilo. Zkuste to prosím znovu."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Sledování času",
+        "short_title": "Sledování času",
+        "description": "Zaznamenávejte čas strávený na pracovních položkách a projektech.",
+        "toggle_title": "Povolit sledování času",
+        "toggle_description": "Členové projektu budou moci zaznamenávat odpracovaný čas."
+      },
+      "milestones": {
+        "title": "Milníky",
+        "short_title": "Milníky",
+        "description": "Milníky poskytují vrstvu pro sladění pracovních položek směrem ke sdíleným termínům dokončení.",
+        "toggle_title": "Povolit milníky",
+        "toggle_description": "Organizujte pracovní položky podle termínů milníků."
+      },
+      "toasts": {
+        "loading": "Aktualizace funkce projektu...",
+        "success": "Funkce projektu byla úspěšně aktualizována.",
+        "error": "Při aktualizaci funkce projektu se něco pokazilo. Zkuste to prosím znovu."
+      }
+    },
+    "project_updates": {
+      "heading": "Aktualizace projektu",
+      "description": "Konsolidované sledování a monitorování pokroku tohoto projektu"
+    },
+    "templates": {
+      "heading": "Šablony",
+      "description": "Ušetřete 80 % času stráveného vytvářením projektů, pracovních položek a stránek, když použijete šablony."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Automatické plánování cyklů",
+        "description": "Udržujte cykly v pohybu bez manuálního nastavení.",
+        "tooltip": "Automaticky vytvářejte nové cykly na základě zvoleného rozvrhu.",
+        "edit_button": "Upravit",
+        "form": {
+          "cycle_title": {
+            "label": "Název cyklu",
+            "placeholder": "Název",
+            "tooltip": "K názvu budou přidána čísla pro následné cykly. Například: Design - 1/2/3",
+            "validation": {
+              "required": "Název cyklu je povinný",
+              "max_length": "Název nesmí přesáhnout 255 znaků"
+            }
+          },
+          "cycle_duration": {
+            "label": "Trvání cyklu",
+            "unit": "Týdny",
+            "validation": {
+              "required": "Trvání cyklu je povinné",
+              "min": "Trvání cyklu musí být alespoň 1 týden",
+              "max": "Trvání cyklu nemůže přesáhnout 30 týdnů",
+              "positive": "Trvání cyklu musí být kladné"
+            }
+          },
+          "cooldown_period": {
+            "label": "Období chlazení",
+            "unit": "dny",
+            "tooltip": "Pauza mezi cykly před začátkem dalšího.",
+            "validation": {
+              "required": "Období chlazení je povinné",
+              "negative": "Období chlazení nemůže být záporné"
+            }
+          },
+          "start_date": {
+            "label": "Den zahájení cyklu",
+            "validation": {
+              "required": "Datum zahájení je povinné",
+              "past": "Datum zahájení nemůže být v minulosti"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Počet budoucích cyklů",
+            "validation": {
+              "required": "Počet cyklů je povinný",
+              "min": "Je vyžadován alespoň 1 cyklus",
+              "max": "Nelze naplánovat více než 3 cykly"
+            }
+          },
+          "auto_rollover": {
+            "label": "Automatický převod pracovních položek",
+            "tooltip": "V den dokončení cyklu přesunout všechny nedokončené pracovní položky do dalšího cyklu."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Povolování automatického plánování cyklů",
+            "loading_disable": "Zakazování automatického plánování cyklů",
+            "success": {
+              "title": "Úspěch!",
+              "message": "Automatické plánování cyklů bylo úspěšně přepnuto."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodařilo se přepnout automatické plánování cyklů."
+            }
+          },
+          "save": {
+            "loading": "Ukládání konfigurace automatického plánování cyklů",
+            "success": {
+              "title": "Úspěch!",
+              "message_create": "Konfigurace automatického plánování cyklů byla úspěšně uložena.",
+              "message_update": "Konfigurace automatického plánování cyklů byla úspěšně aktualizována."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message_create": "Nepodařilo se uložit konfiguraci automatického plánování cyklů.",
+              "message_update": "Nepodařilo se aktualizovat konfiguraci automatického plánování cyklů."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/project.json b/packages/i18n/src/locales/cs/project.json
new file mode 100644
index 0000000..8e2d3b4
--- /dev/null
+++ b/packages/i18n/src/locales/cs/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Vytvořeno dne",
+      "updated_at": "Aktualizováno dne",
+      "name": "Název"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Přidat cyklus",
+    "more_details": "Více detailů",
+    "cycle": "Cyklus",
+    "update_cycle": "Aktualizovat cyklus",
+    "create_cycle": "Vytvořit cyklus",
+    "no_matching_cycles": "Žádné odpovídající cykly",
+    "remove_filters_to_see_all_cycles": "Odeberte filtry pro zobrazení všech cyklů",
+    "remove_search_criteria_to_see_all_cycles": "Odeberte kritéria pro zobrazení všech cyklů",
+    "only_completed_cycles_can_be_archived": "Lze archivovat pouze dokončené cykly",
+    "start_date": "Začátek data",
+    "end_date": "Konec data",
+    "in_your_timezone": "V časovém pásmu",
+    "transfer_work_items": "Převést {count} pracovních položek",
+    "transfer": {
+      "no_cycles_available": "Žádné jiné cykly nejsou k dispozici pro přenos pracovních položek."
+    },
+    "date_range": "Období data",
+    "add_date": "Přidat datum",
+    "active_cycle": {
+      "label": "Aktivní cyklus",
+      "progress": "Pokrok",
+      "chart": "Burndown graf",
+      "priority_issue": "Vysoce prioritní položky",
+      "assignees": "Přiřazení",
+      "issue_burndown": "Burndown pracovních položek",
+      "ideal": "Ideální",
+      "current": "Aktuální",
+      "labels": "Štítky",
+      "trailing": "Zpoždění",
+      "leading": "Předstih"
+    },
+    "upcoming_cycle": {
+      "label": "Nadcházející cyklus"
+    },
+    "completed_cycle": {
+      "label": "Dokončený cyklus"
+    },
+    "status": {
+      "days_left": "Zbývá dnů",
+      "completed": "Dokončeno",
+      "yet_to_start": "Ještě nezačato",
+      "in_progress": "V průběhu",
+      "draft": "Koncept"
+    },
+    "action": {
+      "restore": {
+        "title": "Obnovit cyklus",
+        "success": {
+          "title": "Cyklus obnoven",
+          "description": "Cyklus byl obnoven."
+        },
+        "failed": {
+          "title": "Obnovení selhalo",
+          "description": "Obnovení cyklu se nezdařilo."
+        }
+      },
+      "favorite": {
+        "loading": "Přidávání do oblíbených",
+        "success": {
+          "description": "Cyklus přidán do oblíbených.",
+          "title": "Úspěch!"
+        },
+        "failed": {
+          "description": "Přidání do oblíbených selhalo.",
+          "title": "Chyba!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Odebírání z oblíbených",
+        "success": {
+          "description": "Cyklus odebrán z oblíbených.",
+          "title": "Úspěch!"
+        },
+        "failed": {
+          "description": "Odebrání selhalo.",
+          "title": "Chyba!"
+        }
+      },
+      "update": {
+        "loading": "Aktualizace cyklu",
+        "success": {
+          "description": "Cyklus aktualizován.",
+          "title": "Úspěch!"
+        },
+        "failed": {
+          "description": "Aktualizace selhala.",
+          "title": "Chyba!"
+        },
+        "error": {
+          "already_exists": "Cyklus s těmito daty již existuje. Pro koncept odstraňte data."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Seskupujte práci do cyklů.",
+        "description": "Časově ohraničte práci, sledujte termíny a dělejte pokroky.",
+        "primary_button": {
+          "text": "Vytvořte první cyklus",
+          "comic": {
+            "title": "Cykly jsou opakovaná časová období.",
+            "description": "Sprint, iterace nebo jakékoli jiné časové období pro sledování práce."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Žádné položky v cyklu",
+        "description": "Přidejte položky, které chcete sledovat.",
+        "primary_button": {
+          "text": "Vytvořit položku"
+        },
+        "secondary_button": {
+          "text": "Přidat existující položku"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Žádné položky v cyklu",
+        "description": "Položky byly přesunuty nebo skryty. Pro zobrazení upravte vlastnosti."
+      },
+      "active": {
+        "title": "Žádný aktivní cyklus",
+        "description": "Aktivní cyklus zahrnuje dnešní datum. Sledujte jeho průběh zde."
+      },
+      "archived": {
+        "title": "Žádné archivované cykly",
+        "description": "Archivujte dokončené cykly pro úklid."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Ukládejte filtry jako pohledy.",
+        "description": "Pohledy jsou uložené filtry pro snadný přístup. Sdílejte je v týmu.",
+        "primary_button": {
+          "text": "Vytvořit první pohled",
+          "comic": {
+            "title": "Pohledy pracují s vlastnostmi položek.",
+            "description": "Vytvořte pohled s požadovanými filtry."
+          }
+        },
+        "filter": {
+          "title": "Žádné odpovídající pohledy",
+          "description": "Žádné pohledy neodpovídají kritériím hledání.\n Místo toho vytvořte nový pohled."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Zatím žádné archivované pracovní položky",
+        "description": "Ručně nebo pomocí automatizace můžete archivovat pracovní položky, které jsou dokončené nebo zrušené. Jakmile budou archivovány, najdete je zde.",
+        "primary_button": {
+          "text": "Nastavit automatizaci"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Nebyly nalezeny žádné pracovní položky odpovídající použitým filtrům",
+        "secondary_button": {
+          "text": "Vymazat všechny filtry"
+        }
+      },
+      "public": {
+        "title": "Zatím žádné veřejné stránky",
+        "description": "Zde uvidíte stránky sdílené se všemi ve vašem projektu.",
+        "primary_button": {
+          "text": "Vytvořte svou první stránku"
+        }
+      },
+      "archived": {
+        "title": "Zatím žádné archivované stránky",
+        "description": "Archivujte stránky, které nejsou na vašem radaru. Přistupujte k nim odtud, když je budete potřebovat."
+      },
+      "shared": {
+        "title": "Zatím žádné sdílené stránky",
+        "description": "Stránky, které s vámi ostatní sdíleli, se objeví zde."
+      }
+    },
+    "delete_view": {
+      "title": "Opravdu chcete smazat tento pohled?",
+      "content": "Pokud potvrdíte, všechny možnosti řazení, filtrování a zobrazení + rozvržení, které jste vybrali pro tento pohled, budou trvale odstraněny a nelze je obnovit."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Vytvořte a přiřaďte pracovní položku",
+        "description": "Položky jsou úkoly, které přiřazujete sobě nebo týmu. Sledujte jejich postup.",
+        "primary_button": {
+          "text": "Vytvořit první položku",
+          "comic": {
+            "title": "Položky jsou stavebními kameny",
+            "description": "Příklady: Redesign UI, Rebranding, Nový systém."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Žádné archivované položky",
+        "description": "Archivujte dokončené nebo zrušené položky. Nastavte automatizaci.",
+        "primary_button": {
+          "text": "Nastavit automatizaci"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Žádné odpovídající položky",
+        "secondary_button": {
+          "text": "Vymazat filtry"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Přidat modul",
+    "update_module": "Aktualizovat modul",
+    "create_module": "Vytvořit modul",
+    "archive_module": "Archivovat modul",
+    "restore_module": "Obnovit modul",
+    "delete_module": "Smazat modul",
+    "empty_state": {
+      "general": {
+        "title": "Seskupujte milníky do modulů.",
+        "description": "Moduly seskupují položky pod logického nadřazeného. Sledujte termíny a pokrok.",
+        "primary_button": {
+          "text": "Vytvořte první modul",
+          "comic": {
+            "title": "Moduly skupinují hierarchicky.",
+            "description": "Příklady: Modul košíku, podvozku, skladu."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Žádné položky v modulu",
+        "description": "Přidejte položky do modulu.",
+        "primary_button": {
+          "text": "Vytvořit položky"
+        },
+        "secondary_button": {
+          "text": "Přidat existující položku"
+        }
+      },
+      "archived": {
+        "title": "Žádné archivované moduly",
+        "description": "Archivujte dokončené nebo zrušené moduly."
+      },
+      "sidebar": {
+        "in_active": "Modul není aktivní.",
+        "invalid_date": "Neplatné datum. Zadejte platné."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Archivovat modul",
+      "archive_module_description": "Lze archivovat pouze dokončené/zrušené moduly.",
+      "delete_module": "Smazat modul"
+    },
+    "toast": {
+      "copy": {
+        "success": "Odkaz na modul zkopírován"
+      },
+      "delete": {
+        "success": "Modul smazán",
+        "error": "Mazání selhalo"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Pište poznámky, dokumenty nebo znalostní báze. Využijte AI Galileo.",
+        "description": "Stránky jsou prostorem pro myšlenky. Pište, formátujte, vkládejte položky a využívejte komponenty.",
+        "primary_button": {
+          "text": "Vytvořit první stránku"
+        }
+      },
+      "private": {
+        "title": "Žádné soukromé stránky",
+        "description": "Uchovávejte soukromé myšlenky. Sdílejte, až budete připraveni.",
+        "primary_button": {
+          "text": "Vytvořit stránku"
+        }
+      },
+      "public": {
+        "title": "Žádné veřejné stránky",
+        "description": "Zde uvidíte stránky sdílené v projektu.",
+        "primary_button": {
+          "text": "Vytvořit stránku"
+        }
+      },
+      "archived": {
+        "title": "Žádné archivované stránky",
+        "description": "Archivujte stránky pro pozdější přístup."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Příjem není povolen",
+        "description": "Aktivujte příjem v nastavení projektu pro správu požadavků.",
+        "primary_button": {
+          "text": "Spravovat funkce"
+        }
+      },
+      "cycle": {
+        "title": "Cykly nejsou povoleny",
+        "description": "Aktivujte cykly pro časové ohraničení práce.",
+        "primary_button": {
+          "text": "Spravovat funkce"
+        }
+      },
+      "module": {
+        "title": "Moduly nejsou povoleny",
+        "description": "Aktivujte moduly v nastavení projektu.",
+        "primary_button": {
+          "text": "Spravovat funkce"
+        }
+      },
+      "page": {
+        "title": "Stránky nejsou povoleny",
+        "description": "Aktivujte stránky v nastavení projektu.",
+        "primary_button": {
+          "text": "Spravovat funkce"
+        }
+      },
+      "view": {
+        "title": "Pohledy nejsou povoleny",
+        "description": "Aktivujte pohledy v nastavení projektu.",
+        "primary_button": {
+          "text": "Spravovat funkce"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Plánováno",
+      "in_progress": "V průběhu",
+      "paused": "Pozastaveno",
+      "completed": "Dokončeno",
+      "cancelled": "Zrušeno"
+    },
+    "layout": {
+      "list": "Seznam",
+      "board": "Nástěnka",
+      "timeline": "Časová osa"
+    },
+    "order_by": {
+      "name": "Název",
+      "progress": "Pokrok",
+      "issues": "Počet položek",
+      "due_date": "Termín",
+      "created_at": "Datum vytvoření",
+      "manual": "Ručně"
+    }
+  },
+  "project_members": {
+    "full_name": "Celé jméno",
+    "display_name": "Zobrazované jméno",
+    "email": "E-mail",
+    "joining_date": "Datum připojení",
+    "role": "Role"
+  },
+  "project": {
+    "members_import": {
+      "title": "Importovat členy z CSV",
+      "description": "Nahrajte CSV se sloupci: E-mail a Role (5=Host, 15=Člen, 20=Správce). Uživatelé musí být již členy pracovního prostoru.",
+      "download_sample": "Stáhnout ukázkové CSV",
+      "dropzone": {
+        "active": "Přetáhněte CSV soubor sem",
+        "inactive": "Přetáhněte nebo klikněte pro nahrání",
+        "file_type": "Podporovány jsou pouze soubory .csv"
+      },
+      "buttons": {
+        "cancel": "Zrušit",
+        "import": "Importovat",
+        "try_again": "Zkusit znovu",
+        "close": "Zavřít",
+        "done": "Hotovo"
+      },
+      "progress": {
+        "uploading": "Nahrávání...",
+        "importing": "Importování..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Import dokončen"
+        },
+        "message": {
+          "success": "Úspěšně importováno {count} člen{plural} do projektu.",
+          "no_imports": "Ze souboru CSV nebyli importováni žádní noví členové."
+        },
+        "stats": {
+          "added": "Přidáno",
+          "reactivated": "Znovu aktivováno",
+          "already_members": "Již členové",
+          "skipped": "Přeskočeno"
+        },
+        "download_errors": "Stáhnout podrobnosti přeskočených"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Neplatný soubor",
+          "message": "Podporovány jsou pouze CSV soubory."
+        },
+        "import_failed": {
+          "title": "Import selhal",
+          "message": "Něco se pokazilo."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/settings.json b/packages/i18n/src/locales/cs/settings.json
new file mode 100644
index 0000000..50b375c
--- /dev/null
+++ b/packages/i18n/src/locales/cs/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Změnit e-mail",
+        "description": "Zadejte novou e-mailovou adresu a obdržíte ověřovací odkaz.",
+        "toasts": {
+          "success_title": "Úspěch!",
+          "success_message": "E-mail byl úspěšně aktualizován. Přihlaste se znovu."
+        },
+        "form": {
+          "email": {
+            "label": "Nový e-mail",
+            "placeholder": "Zadejte svůj e-mail",
+            "errors": {
+              "required": "E-mail je povinný",
+              "invalid": "E-mail je neplatný",
+              "exists": "E-mail již existuje. Použijte jiný.",
+              "validation_failed": "Ověření e-mailu se nezdařilo. Zkuste to znovu."
+            }
+          },
+          "code": {
+            "label": "Jedinečný kód",
+            "placeholder": "123456",
+            "helper_text": "Ověřovací kód byl odeslán na váš nový e-mail.",
+            "errors": {
+              "required": "Jedinečný kód je povinný",
+              "invalid": "Neplatný ověřovací kód. Zkuste to znovu."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Pokračovat",
+          "confirm": "Potvrdit",
+          "cancel": "Zrušit"
+        },
+        "states": {
+          "sending": "Odesílání…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Předvolby",
+      "description": "Přizpůsobte si prostředí aplikace podle toho, jak pracujete"
+    },
+    "notifications": {
+      "heading": "E-mailová oznámení",
+      "description": "Zůstaňte v obraze u pracovních položek, které odebíráte. Aktivujte toto pro zasílání oznámení.",
+      "select_default_view": "Vybrat výchozí zobrazení",
+      "compact": "Kompaktní",
+      "full": "Celá obrazovka"
+    },
+    "security": {
+      "heading": "Zabezpečení"
+    },
+    "api_tokens": {
+      "title": "Osobní přístupové tokeny",
+      "description": "Generujte bezpečné API tokeny pro integraci vašich dat s externími systémy a aplikacemi."
+    },
+    "activity": {
+      "heading": "Aktivita",
+      "description": "Sledujte vaše nedávné akce a změny napříč všemi projekty a pracovními položkami."
+    },
+    "connections": {
+      "title": "Spojení",
+      "heading": "Spojení",
+      "description": "Spravujte nastavení spojení vašeho pracovního prostoru."
+    }
+  },
+  "profile": {
+    "label": "Profil",
+    "page_label": "Vaše práce",
+    "work": "Práce",
+    "details": {
+      "joined_on": "Připojeno dne",
+      "time_zone": "Časové pásmo"
+    },
+    "stats": {
+      "workload": "Vytížení",
+      "overview": "Přehled",
+      "created": "Vytvořené položky",
+      "assigned": "Přiřazené položky",
+      "subscribed": "Odebírané položky",
+      "state_distribution": {
+        "title": "Položky podle stavu",
+        "empty": "Vytvářejte položky pro analýzu stavů."
+      },
+      "priority_distribution": {
+        "title": "Položky podle priority",
+        "empty": "Vytvářejte položky pro analýzu priorit."
+      },
+      "recent_activity": {
+        "title": "Nedávná aktivita",
+        "empty": "Nenalezena žádná aktivita.",
+        "button": "Stáhnout dnešní aktivitu",
+        "button_loading": "Stahování"
+      }
+    },
+    "actions": {
+      "profile": "Profil",
+      "security": "Zabezpečení",
+      "activity": "Aktivita",
+      "preferences": "Předvolby",
+      "notifications": "Oznámení",
+      "api-tokens": "Osobní přístupové tokeny",
+      "connections": "Spojení"
+    },
+    "tabs": {
+      "summary": "Shrnutí",
+      "assigned": "Přiřazeno",
+      "created": "Vytvořeno",
+      "subscribed": "Odebíráno",
+      "activity": "Aktivita"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Žádná aktivita",
+        "description": "Vytvořte pracovní položku pro začátek."
+      },
+      "assigned": {
+        "title": "Žádné přiřazené pracovní položky",
+        "description": "Zde uvidíte přiřazené pracovní položky."
+      },
+      "created": {
+        "title": "Žádné vytvořené pracovní položky",
+        "description": "Zde jsou pracovní položky, které jste vytvořili."
+      },
+      "subscribed": {
+        "title": "Žádné odebírané pracovní položky",
+        "description": "Odebírejte pracovní položky, které vás zajímají, a sledujte je zde."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Systémové předvolby"
+      },
+      "light": {
+        "label": "Světlé"
+      },
+      "dark": {
+        "label": "Tmavé"
+      },
+      "light_contrast": {
+        "label": "Světlý vysoký kontrast"
+      },
+      "dark_contrast": {
+        "label": "Tmavý vysoký kontrast"
+      },
+      "custom": {
+        "label": "Vlastní téma"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/stickies.json b/packages/i18n/src/locales/cs/stickies.json
new file mode 100644
index 0000000..ff12f3f
--- /dev/null
+++ b/packages/i18n/src/locales/cs/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Vaše poznámky",
+    "placeholder": "kliknutím začněte psát",
+    "all": "Všechny poznámky",
+    "no-data": "Zapisujte nápady a myšlenky. Přidejte první poznámku.",
+    "add": "Přidat poznámku",
+    "search_placeholder": "Hledat podle názvu",
+    "delete": "Smazat poznámku",
+    "delete_confirmation": "Opravdu chcete smazat tuto poznámku?",
+    "empty_state": {
+      "simple": "Zapisujte nápady a myšlenky. Přidejte první poznámku.",
+      "general": {
+        "title": "Poznámky jsou rychlé záznamy.",
+        "description": "Zapisujte myšlenky a přistupujte k nim odkudkoli.",
+        "primary_button": {
+          "text": "Přidat poznámku"
+        }
+      },
+      "search": {
+        "title": "Nenalezeny žádné poznámky.",
+        "description": "Zkuste jiný termín nebo vytvořte novou.",
+        "primary_button": {
+          "text": "Přidat poznámku"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Název poznámky může mít max. 100 znaků.",
+        "already_exists": "Poznámka bez popisu již existuje"
+      },
+      "created": {
+        "title": "Poznámka vytvořena",
+        "message": "Poznámka úspěšně vytvořena"
+      },
+      "not_created": {
+        "title": "Vytvoření selhalo",
+        "message": "Poznámku nelze vytvořit"
+      },
+      "updated": {
+        "title": "Poznámka aktualizována",
+        "message": "Poznámka úspěšně aktualizována"
+      },
+      "not_updated": {
+        "title": "Aktualizace selhala",
+        "message": "Poznámku nelze aktualizovat"
+      },
+      "removed": {
+        "title": "Poznámka smazána",
+        "message": "Poznámka úspěšně smazána"
+      },
+      "not_removed": {
+        "title": "Mazání selhalo",
+        "message": "Poznámku nelze smazat"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/template.json b/packages/i18n/src/locales/cs/template.json
new file mode 100644
index 0000000..139cebc
--- /dev/null
+++ b/packages/i18n/src/locales/cs/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Šablony",
+      "description": "Ušetřete 80 % času stráveného vytvářením projektů, pracovních položek a stránek, když používáte šablony.",
+      "new_project_template": "Nová šablona projektu",
+      "new_work_item_template": "Nová šablona pracovní položky",
+      "new_page_template": "Nová šablona stránky",
+      "options": {
+        "project": {
+          "label": "Šablony projektů"
+        },
+        "work_item": {
+          "label": "Šablony pracovních položek"
+        },
+        "page": {
+          "label": "Šablony stránek"
+        }
+      },
+      "create_template": {
+        "label": "Vytvořit šablonu",
+        "no_permission": {
+          "project": "Kontaktujte správce projektu, abyste vytvořili šablony",
+          "workspace": "Kontaktujte správce workspace, abyste vytvořili šablony"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Použít šablonu",
+          "loading": "Používání"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Odvozeno z workspace"
+        },
+        "project": {
+          "info": "Odvozeno z projektu"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Pojmenujte svou šablonu projektu.",
+              "validation": {
+                "required": "Název šablony je povinný",
+                "maxLength": "Název šablony by měl být kratší než 255 znaků"
+              }
+            },
+            "description": {
+              "placeholder": "Popište, kdy a jak tuto šablonu použít."
+            }
+          },
+          "name": {
+            "placeholder": "Pojmenujte svůj projekt.",
+            "validation": {
+              "required": "Název projektu je povinný",
+              "maxLength": "Název projektu by měl být kratší než 255 znaků"
+            }
+          },
+          "description": {
+            "placeholder": "Popište účel a cíle tohoto projektu."
+          },
+          "button": {
+            "create": "Vytvořit šablonu projektu",
+            "update": "Aktualizovat šablonu projektu"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Pojmenujte svou šablonu pracovních položek.",
+              "validation": {
+                "required": "Název šablony je povinný",
+                "maxLength": "Název šablony by měl být kratší než 255 znaků"
+              }
+            },
+            "description": {
+              "placeholder": "Popište, kdy a jak tuto šablonu použít."
+            }
+          },
+          "name": {
+            "placeholder": "Dejte této pracovní položce název.",
+            "validation": {
+              "required": "Název pracovní položky je povinný",
+              "maxLength": "Název pracovní položky by měl být kratší než 255 znaků"
+            }
+          },
+          "description": {
+            "placeholder": "Popište tuto pracovní položku, aby bylo jasné, co dosáhnete, když ji dokončíte."
+          },
+          "button": {
+            "create": "Vytvořit šablonu pracovní položky",
+            "update": "Aktualizovat šablonu pracovní položky"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Pojmenujte svou šablonu stránky.",
+              "validation": {
+                "required": "Název šablony je povinný",
+                "maxLength": "Název šablony by měl být kratší než 255 znaků"
+              }
+            },
+            "description": {
+              "placeholder": "Popište, kdy a jak tuto šablonu použít."
+            }
+          },
+          "name": {
+            "placeholder": "Neznámá stránka",
+            "validation": {
+              "maxLength": "Název stránky by měl být kratší než 255 znaků"
+            }
+          },
+          "button": {
+            "create": "Vytvořit šablonu stránky",
+            "update": "Aktualizovat šablonu stránky"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Nastavení publikování} other {Publikovat na Marketplace}}",
+          "unpublish_action": "Odebrat z Marketplace",
+          "title": "Uložte svou šablonu, aby byla pro vaše uživatele dostupná.",
+          "name": {
+            "label": "Název šablony",
+            "placeholder": "Pojmenujte svou šablonu",
+            "validation": {
+              "required": "Název šablony je povinný",
+              "maxLength": "Název šablony by měl být kratší než 255 znaků"
+            }
+          },
+          "short_description": {
+            "label": "Kráký popis",
+            "placeholder": "Tato šablona je skvělá pro manažery projektů, kteří spravují několik projektů najednou.",
+            "validation": {
+              "required": "Kráký popis je povinný"
+            }
+          },
+          "description": {
+            "label": "Popis",
+            "placeholder": "Vylepšete produktivitu a zjednodušte komunikaci s naší integrací rozpoznávání řeči.\n• Instantní přepis: Převádí hlas na přesný text okamžitě.\n• Vytvoření úkolu a komentáře: Vytvořte úkoly, popisy a komentáře pomocí hlasových příkazů.",
+            "validation": {
+              "required": "Popis je povinný"
+            }
+          },
+          "category": {
+            "label": "Category",
+            "placeholder": "Choose where you think this fits best. You can choose more than one.",
+            "validation": {
+              "required": "Musíte vybrat alespoň jednu kategorii"
+            }
+          },
+          "keywords": {
+            "label": "Klíčová slova",
+            "placeholder": "Použijte termíny, které si myslíte, že vaši uživatele při hledání této šablony použijí.",
+            "helperText": "Zadejte klíčová slova oddělená čárkami, která pomůžou lidem najít tuto šablonu z hledání.",
+            "validation": {
+              "required": "Alespoň jedno klíčové slovo je povinné"
+            }
+          },
+          "website": {
+            "label": "URL webové stránky",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "Neplatná URL",
+              "maxLength": "URL by měla být kratší než 800 znaků"
+            }
+          },
+          "company_name": {
+            "label": "Název společnosti",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Název společnosti je povinný",
+              "maxLength": "Název společnosti by měl být kratší než 255 znaků"
+            }
+          },
+          "contact_email": {
+            "label": "Email podpory",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Neplatná emailová adresa",
+              "maxLength": "Email podpory by měl být kratší než 255 znaků"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Odkaz na vaši ochranu osobních údajů",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Neplatná URL",
+              "maxLength": "URL by měla být kratší než 800 znaků"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Odkaz na vaše podmínky použití",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "Neplatná URL",
+              "maxLength": "URL by měla být kratší než 800 znaků"
+            }
+          },
+          "cover_image": {
+            "label": "Přidejte obrázek, který bude zobrazen na Marketplace",
+            "upload_title": "Nahrát obrázek",
+            "upload_placeholder": "Klikněte pro nahrání nebo přetáhněte a upustěte obrázek",
+            "drop_here": "Sem",
+            "click_to_upload": "Klikněte pro nahrání",
+            "invalid_file_or_exceeds_size_limit": "Neplatný soubor nebo překročen limit velikosti. Zkuste to znovu.",
+            "upload_and_save": "Nahrát a uložit",
+            "uploading": "Nahrávání",
+            "remove": "Odstranit",
+            "removing": "Odstraňování",
+            "validation": {
+              "required": "Obrázek je povinný"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Připojte dokumenty a obrázky, které si myslíte, že vypadnou při zobrazení této šablony.",
+            "validation": {
+              "required": "Musíte přidat alespoň jeden screenshot"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Šablony",
+        "description": "S šablonami projektů, pracovních položek a stránek v Plane nemusíte vytvářet projekt od nuly nebo nastavovat vlastnosti pracovních položek ručně.",
+        "sub_description": "Získejte 80 % svého administrativního času zpět, když používáte šablony."
+      },
+      "no_templates": {
+        "button": "Vytvořte svou první šablonu"
+      },
+      "no_labels": {
+        "description": "Zatím žádné štítky. Vytvořte štítky, abyste pomohli organizovat a filtrovat pracovní položky v projektu."
+      },
+      "no_modules": {
+        "description": "Zatím žádné moduly. Organizujte práci do dílčích projektů s vyhrazenými vedoucími a přiřazenými osobami."
+      },
+      "no_work_items": {
+        "description": "Zatím žádné pracovní položky. Přidejte jednu, abyste strukturovali svou práci lépe."
+      },
+      "no_sub_work_items": {
+        "description": "Zatím žádné podpracovní položky. Přidejte jednu, abyste strukturovali svou práci lépe."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Neexistují žádné šablony, ke kterým máte přístup.",
+          "description": "Prosím vytvořte šablonu"
+        },
+        "no_results": {
+          "title": "To neodpovídá žádné šabloně.",
+          "description": "Zkuste hledat s jinými termíny."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Šablona byla úspěšně vytvořena",
+          "message": "{templateName} byla úspěšně vytvořena a je nyní k dispozici pro váš workspace. Můžete ji nyní použít k vytvoření nových pracovních položek."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Nepodařilo se vytvořit šablonu. Zkuste to znovu!"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Šablona byla úspěšně aktualizována",
+          "message": "{templateName} byla úspěšně aktualizována. Můžete ji nyní použít k vytvoření nových pracovních položek."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Nepodařilo se aktualizovat šablonu. Zkuste to znovu!"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Šablona byla úspěšně smazána!"
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Nepodařilo se smazat šablonu. Zkuste to znovu!"
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Šablona stažena",
+          "message": "{templateName}, šablona typu {templateType}, byla stažena z marketplace."
+        },
+        "error": {
+          "title": "Nepodařilo se stáhnout šablonu.",
+          "message": "Zkuste ji stáhnout znovu nebo se k ní vraťte později. Pokud ji stále nemůžete stáhnout, kontaktujte nás."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Smazat šablonu",
+      "description": {
+        "prefix": "Opravdu chcete smazat šablonu-",
+        "suffix": "? Všechna data související se šablonou budou trvale odstraněna. Tuto akci nelze vrátit zpět."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Stáhnout šablonu",
+      "description": {
+        "prefix": "Opravdu chcete stáhnout šablonu-",
+        "suffix": "? Šablona bude stažena z marketplace a nebude více dostupná pro ostatní."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Přidat novou šablonu",
+        "project": "Přidat novou šablonu"
+      },
+      "label": {
+        "project": "Vybrat šablonu projektu",
+        "page": "Vybrat šablonu"
+      },
+      "tooltip": {
+        "work_item": "Vybrat šablonu pracovní položky"
+      },
+      "no_results": {
+        "work_item": "Nebyly nalezeny žádné šablony.",
+        "project": "Nebyly nalezeny žádné šablony."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/tour.json b/packages/i18n/src/locales/cs/tour.json
new file mode 100644
index 0000000..2e5f7dc
--- /dev/null
+++ b/packages/i18n/src/locales/cs/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Vítejte ve vašem pracovním prostoru",
+        "description": "Abychom vám pomohli začít, vytvořili jsme pro vás Demo projekt. Přidejme vaši první pracovní položku."
+      },
+      "step_one": {
+        "title": "Klikněte na \"+ Přidat pracovní položku\"",
+        "description": "Začněte kliknutím na tlačítko \"+ Nová pracovní položka\". Můžete vytvářet úkoly, chyby nebo vlastní typ podle vašich potřeb."
+      },
+      "step_two": {
+        "title": "Filtrujte své pracovní položky",
+        "description": "Použijte filtry k rychlému zúžení seznamu. Můžete filtrovat podle stavu, priority nebo členů týmu. "
+      },
+      "step_three": {
+        "title": "Prohlížejte, seskupujte a řaďte pracovní položky podle potřeby.",
+        "description": "Zobrazte požadované vlastnosti a seskupte nebo seřaďte pracovní položky podle svých potřeb."
+      },
+      "step_four": {
+        "title": "Vizualizujte podle libosti",
+        "description": "Vyberte, které vlastnosti chcete v seznamu vidět. Můžete také seskupit a seřadit pracovní položky podle svého."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Dosahujte pokroku s Cykly",
+        "description": "Stiskněte Q pro vytvoření Cyklu. Pojmenujte ho a nastavte data—pouze jeden cyklus na projekt."
+      },
+      "step_one": {
+        "title": "Vytvořte nový cyklus",
+        "description": "Stiskněte Q pro vytvoření Cyklu. Pojmenujte ho a nastavte data—pouze jeden cyklus na projekt."
+      },
+      "step_two": {
+        "title": "Klikněte na \"+\"",
+        "description": "Začněte kliknutím na tlačítko \"+\". Přidejte nové nebo existující pracovní položky přímo ze stránky Cyklu."
+      },
+      "step_three": {
+        "title": "Souhrn cyklu",
+        "description": "Sledujte průběh cyklu, produktivitu týmu a priority—a zjistěte, jestli něco zaostává."
+      },
+      "step_four": {
+        "title": "Přenos pracovních položek",
+        "description": "Po termínu dokončení se cyklus automaticky dokončí. Přesuňte nedokončenou práci do jiného cyklu."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Rozdělte svůj projekt do Modulů",
+        "description": "Moduly jsou menší, zaměřené projekty, které pomáhají uživatelům seskupovat a organizovat pracovní položky v určitých časových rámcích."
+      },
+      "step_one": {
+        "title": "Vytvořit Modul",
+        "description": "Moduly jsou menší, zaměřené projekty, které pomáhají uživatelům seskupovat a organizovat pracovní položky v určitých časových rámcích."
+      },
+      "step_two": {
+        "title": "Klikněte na \"+\"",
+        "description": "Začněte kliknutím na tlačítko \"+\". Přidejte nové nebo existující pracovní položky přímo ze stránky Modulu."
+      },
+      "step_three": {
+        "title": "Stavy modulu",
+        "description": "Moduly používají tyto stavy, aby pomohly uživatelům plánovat a jasně sledovat průběh a fázi."
+      },
+      "step_four": {
+        "title": "Průběh modulu",
+        "description": "Průběh modulu se sleduje prostřednictvím dokončených položek s analytickými nástroji pro monitorování výkonu."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Dokumentujte s AI stránkami",
+        "description": "Stránky v Plane vám umožňují zachytit, organizovat a spolupracovat na projektových informacích—bez externích nástrojů."
+      },
+      "step_one": {
+        "title": "Nastavte stránku jako Veřejnou nebo Soukromou",
+        "description": "Stránky lze nastavit jako veřejné, viditelné pro všechny ve vašem pracovním prostoru, nebo soukromé, přístupné pouze vám."
+      },
+      "step_two": {
+        "title": "Použijte příkaz /",
+        "description": "Použijte / na stránce pro přidání obsahu z 16 typů bloků, včetně seznamů, obrázků, tabulek a vložení."
+      },
+      "step_three": {
+        "title": "Akce stránky",
+        "description": "Jakmile je vaše stránka vytvořena, můžete kliknout na menu ••• v pravém horním rohu a provést následující akce."
+      },
+      "step_four": {
+        "title": "Obsah",
+        "description": "Získejte pohled z výšky na svou stránku kliknutím na ikonu panelu a zobrazením všech nadpisů."
+      },
+      "step_five": {
+        "title": "Historie verzí",
+        "description": "Stránky sledují všechny úpravy s historií verzí, což vám umožňuje obnovit předchozí verze v případě potřeby."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Zefektivněte požadavky s příjmem",
+        "description": "Funkce pouze v Plane, která umožňuje hostům vytvářet pracovní položky pro chyby, požadavky nebo tikety."
+      },
+      "step_one": {
+        "title": "Otevřené/uzavřené požadavky příjmu",
+        "description": "Čekající požadavky zůstávají na kartě Otevřené a jakmile je vyřeší správce nebo člen, přesunou se do Zavřené."
+      },
+      "step_two": {
+        "title": "Přijměte/odmítněte čekající požadavek",
+        "description": "Přijměte pro úpravu a přesunutí pracovní položky do vašeho projektu nebo ji odmítněte a označte ji jako Zrušenou."
+      },
+      "step_three": {
+        "title": "Odložit prozatím",
+        "description": "Pracovní položku lze odložit, abyste ji zkontrolovali později. Přesune se na konec seznamu otevřených požadavků."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Přestaňte přepínat záložky. Propojte svůj svět.",
+        "description": "Propojte GitHub, Slack pro sledování PR a shrnutí chatů přímo v Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigace, nově promyšlená",
+        "sub_title": "Váš pracovní prostor je nyní snazší prozkoumat s chytřejší, zjednodušenou navigací.",
+        "highlight_1": "Zjednodušená struktura levého panelu pro rychlejší objevování",
+        "highlight_2": "Vylepšené globální vyhledávání pro okamžitý přesun kamkoli",
+        "highlight_3": "Chytřejší seskupování kategorií pro jasnost a zaměření",
+        "footer": "Chcete rychlý průvodce?"
+      },
+      "step_zero": {
+        "title": "Najděte cokoli okamžitě",
+        "description": "Použijte univerzální vyhledávání pro přeskok k úkolům, projektům, stránkám a lidem—bez přerušení vaší práce."
+      },
+      "step_one": {
+        "title": "Mějte kontrolu nad aktualizacemi",
+        "description": "Vaše doručená pošta uchovává všechny zmínky, schválení a aktivitu na jednom místě, takže nikdy nezmešk áte důležitou práci."
+      },
+      "step_two": {
+        "title": "Přizpůsobte si navigaci",
+        "description": "Přizpůsobte si, co vidíte a jak se pohybujete v Předvolbách."
+      }
+    },
+    "actions": {
+      "close": "Zavřít",
+      "next": "Další",
+      "back": "Zpět",
+      "done": "Hotovo",
+      "take_a_tour": "Prohlídka",
+      "get_started": "Začít",
+      "got_it": "Rozumím"
+    },
+    "seed_data": {
+      "title": "Zde je váš demo projekt",
+      "description": "Projekty vám umožňují spravovat vaše týmy, úkoly a vše, co potřebujete k dokončení práce ve vašem pracovním prostoru."
+    }
+  },
+  "get_started": {
+    "title": "Ahoj {name}, vítej na palubě!",
+    "description": "Zde je vše, co potřebujete k nastartování vaší cesty s Plane.",
+    "checklist_section": {
+      "title": "Začít",
+      "description": "Začněte s nastavením a uvidíte své nápady ožít rychleji.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Vytvořit projekt"
+        },
+        "item_2": {
+          "title": "Vytvořit pracovní položku"
+        },
+        "item_3": {
+          "title": "Pozvat členy týmu"
+        },
+        "item_4": {
+          "title": "Vytvořit stránku"
+        },
+        "item_5": {
+          "title": "Vyzkoušet Plane AI chat"
+        },
+        "item_6": {
+          "title": "Propojit integrace"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Pozvěte svůj tým",
+      "description": "Pozvěte spolupracovníky a začněte společně budovat."
+    },
+    "integrations_section": {
+      "title": "Vylepšete svůj pracovní prostor",
+      "more_integrations": "Procházet další integrace"
+    },
+    "switch_to_plane_section": {
+      "title": "Objevte, proč týmy přecházejí na Plane",
+      "description": "Porovnejte Plane s nástroji, které dnes používáte, a uvidíte rozdíl."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/update.json b/packages/i18n/src/locales/cs/update.json
new file mode 100644
index 0000000..dce6273
--- /dev/null
+++ b/packages/i18n/src/locales/cs/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Průběh",
+      "since_last_update": "Od poslední aktualizace",
+      "comments": "{count, plural, one{# komentář} other{# komentářů}}"
+    },
+    "add_update": "Přidat aktualizaci",
+    "add_update_placeholder": "Napište svou aktualizaci zde",
+    "empty": {
+      "title": "Zatím žádné aktualizace",
+      "description": "Můžete zde vidět aktualizace."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reakce vytvořena",
+          "message": "Reakce byla úspěšně vytvořena"
+        },
+        "error": {
+          "title": "Reakce nebyla vytvořena",
+          "message": "Reakce se nepodařilo vytvořit"
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reakce odstraněna",
+          "message": "Reakce byla úspěšně odstraněna"
+        },
+        "error": {
+          "title": "Reakce nebyla odstraněna",
+          "message": "Reakce se nepodařilo odstranit"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Aktualizace vytvořena",
+        "message": "Aktualizace byla úspěšně vytvořena"
+      },
+      "error": {
+        "title": "Aktualizace nebyla vytvořena",
+        "message": "Aktualizace se nepodařilo vytvořit"
+      }
+    },
+    "delete": {
+      "title": "Smazat aktualizaci",
+      "confirmation": "Opravdu chcete smazat tuto aktualizaci? Tato akce je nevratná.",
+      "success": {
+        "title": "Aktualizace smazána",
+        "message": "Aktualizace byla úspěšně smazána"
+      },
+      "error": {
+        "title": "Aktualizace nebyla smazána",
+        "message": "Aktualizace se nepodařilo smazat"
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Aktualizace aktualizována",
+        "message": "Aktualizace byla úspěšně aktualizována"
+      },
+      "error": {
+        "title": "Aktualizace nebyla aktualizována",
+        "message": "Aktualizace se nepodařilo aktualizovat"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/wiki.json b/packages/i18n/src/locales/cs/wiki.json
new file mode 100644
index 0000000..eda8d97
--- /dev/null
+++ b/packages/i18n/src/locales/cs/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Obecné",
+      "private": "Soukromé",
+      "shared": "Sdílené",
+      "archived": "Archivované"
+    },
+    "fallback_name": "Kolekce",
+    "form": {
+      "name_required": "Název kolekce je povinný",
+      "name_max_length": "Název kolekce musí mít méně než 255 znaků",
+      "name_placeholder_create": "Zadejte název kolekce",
+      "name_placeholder_edit": "Název kolekce"
+    },
+    "create_modal": {
+      "title": "Vytvořit kolekci",
+      "submit": "Vytvořit kolekci"
+    },
+    "edit_modal": {
+      "title": "Upravit kolekci"
+    },
+    "delete_modal": {
+      "title": "Smazat kolekci",
+      "page_count": "Tato kolekce obsahuje {pageCount} stránek. Zvolte, co se s nimi stane.",
+      "transfer_title": "Přesunout stránky a smazat kolekci",
+      "transfer_description": "Před smazáním přesuňte všechny stránky do jiné kolekce. Stránky i jejich oprávnění zůstanou zachovány.",
+      "transfer_warning": "Přesunuté stránky převezmou oprávnění vybrané kolekce.",
+      "transfer_target_label": "Přesunout stránky do",
+      "transfer_target_placeholder": "Vyberte kolekci",
+      "delete_with_pages_title": "Smazat kolekci i se stránkami",
+      "delete_with_pages_description": "Trvale smaže kolekci i všechny její stránky. Tuto akci nelze vrátit zpět.",
+      "submit": "Smazat kolekci"
+    },
+    "header": {
+      "add_page": "Přidat stránku"
+    },
+    "menu": {
+      "create_new_page": "Vytvořit novou stránku",
+      "add_existing_page": "Přidat existující stránku",
+      "edit_collection": "Upravit kolekci",
+      "collection_options": "Možnosti kolekce"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Hledat stránky",
+      "success_message": "Do kolekce bylo přidáno {count} stránek.",
+      "error_message": "Stránky se nepodařilo přesunout. Zkuste to prosím znovu.",
+      "no_pages_found": "Nebyly nalezeny žádné stránky odpovídající vašemu hledání",
+      "no_pages_available": "Žádné stránky k přesunu",
+      "submit": "Přesunout"
+    },
+    "list": {
+      "invite_only": "Pouze na pozvání",
+      "remove_error": "Nepodařilo se odebrat stránku z kolekce.",
+      "no_matching_pages": "Žádné odpovídající stránky",
+      "remove_search_criteria": "Odstraňte kritéria vyhledávání a zobrazí se všechny stránky",
+      "remove_filters": "Odstraňte filtry a zobrazí se všechny stránky",
+      "no_pages_title": "Zatím žádné stránky",
+      "no_pages_description": "Tato kolekce zatím neobsahuje žádné stránky.",
+      "untitled": "Bez názvu",
+      "restricted_access": "Omezený přístup",
+      "collapse_page": "Sbalit stránku",
+      "expand_page": "Rozbalit stránku",
+      "page_actions": "Akce stránky",
+      "page_link_copied": "Odkaz na stránku byl zkopírován do schránky.",
+      "columns": {
+        "page_name": "Název stránky",
+        "owner": "Vlastník",
+        "nested_pages": "Vnořené stránky",
+        "last_activity": "Poslední aktivita",
+        "actions": "Akce"
+      }
+    },
+    "toasts": {
+      "created": "Kolekce byla úspěšně vytvořena.",
+      "create_error": "Kolekci se nepodařilo vytvořit. Zkuste to prosím znovu.",
+      "renamed": "Kolekce byla úspěšně přejmenována.",
+      "rename_error": "Kolekci se nepodařilo aktualizovat. Zkuste to prosím znovu.",
+      "transferred_deleted": "Stránky byly přesunuty a kolekce smazána.",
+      "deleted_with_pages": "Kolekce i její stránky byly smazány.",
+      "delete_error": "Kolekci se nepodařilo smazat. Zkuste to prosím znovu.",
+      "target_required": "Vyberte prosím kolekci, do které chcete stránky přesunout.",
+      "create_page_error": "Stránku se nepodařilo vytvořit. Zkuste to prosím znovu.",
+      "create_page_in_collection_error": "Stránku se nepodařilo vytvořit nebo přidat do kolekce. Zkuste to prosím znovu.",
+      "collection_link_copied": "Odkaz na kolekci byl zkopírován do schránky."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Upgradujte pro odemčení Wiki",
+      "description": "Odemkněte veřejné stránky, historii verzí, sdílené stránky, spolupráci v reálném čase a stránky pracovního prostoru pro wiki, firemní dokumentaci a znalostní báze s Plane Pro.",
+      "upgrade_button": {
+        "text": "Upgradovat"
+      },
+      "learn_more_button": {
+        "text": "Zjistit více"
+      },
+      "download_button": {
+        "text": "Stáhnout data",
+        "loading": "Stahování"
+      },
+      "tabs": {
+        "nested_pages": "Vnořené stránky",
+        "add_embeds": "Přidat vložený obsah",
+        "publish_pages": "Publikovat stránky",
+        "comments": "Komentáře"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Vnořené stránky vyžadují placený plán. Upgradujte pro jejich odemčení."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/work-item-type.json b/packages/i18n/src/locales/cs/work-item-type.json
new file mode 100644
index 0000000..3380b7b
--- /dev/null
+++ b/packages/i18n/src/locales/cs/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Typy pracovních položek",
+    "label_lowercase": "typy pracovních položek",
+    "settings": {
+      "description": "Přizpůsobte si a přidejte vlastní vlastnosti, abyste to upravili podle potřeb vašeho týmu.",
+      "cant_delete_default_message": "Tento typ pracovního položky nelze odstranit, protože je nastaven jako výchozí pro tento projekt.",
+      "set_as_default": "Nastavit jako výchozí",
+      "cant_set_default_inactive_message": "Před nastavením jako výchozí tento typ aktivujte",
+      "set_default_confirmation": {
+        "title": "Nastavit jako výchozí typ pracovní položky",
+        "description": "Nastavením {name} jako výchozího se tento typ importuje do všech projektů v tomto pracovním prostoru. Všechny nové pracovní položky budou tento typ používat ve výchozím nastavení.",
+        "confirm_button": "Nastavit jako výchozí"
+      },
+      "properties": {
+        "title": "Vlastní vlastnosti",
+        "description": "Vytvářejte a přizpůsobujte vlastnosti.",
+        "tooltip": "Každý typ pracovních položek má výchozí sadu vlastností jako Název, Popis, Přiřazený, Stav, Priorita, Datum zahájení, Datum splatnosti, Modul, Cyklus atd. Můžete také přizpůsobit a přidat své vlastní vlastnosti, aby vyhovovaly potřebám vašeho týmu.",
+        "add_button": "Přidat novou vlastnost",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Importovat z pracovního prostoru"
+          }
+        },
+        "dropdown": {
+          "label": "Typ vlastnosti",
+          "placeholder": "Vyberte typ"
+        },
+        "property_type": {
+          "text": {
+            "label": "Text"
+          },
+          "number": {
+            "label": "Číslo"
+          },
+          "dropdown": {
+            "label": "Rozbalovací seznam"
+          },
+          "boolean": {
+            "label": "Boolean"
+          },
+          "date": {
+            "label": "Datum"
+          },
+          "member_picker": {
+            "label": "Výběr člena"
+          },
+          "formula": {
+            "label": "Vzorec"
+          }
+        },
+        "attributes": {
+          "label": "Atributy",
+          "text": {
+            "single_line": {
+              "label": "Jednoduchý řádek"
+            },
+            "multi_line": {
+              "label": "Odstavec"
+            },
+            "readonly": {
+              "label": "Pouze pro čtení",
+              "header": "Data pouze pro čtení"
+            },
+            "invalid_text_format": {
+              "label": "Neplatný formát textu"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Přidat číslo"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Jednoduchý výběr"
+            },
+            "multi_select": {
+              "label": "Vícenásobný výběr"
+            },
+            "no_default_value": {
+              "label": "Žádná výchozí hodnota"
+            }
+          },
+          "boolean": {
+            "label": "Pravda | Nepravda",
+            "no_default": "Žádná výchozí hodnota"
+          },
+          "option": {
+            "create_update": {
+              "label": "Možnosti",
+              "form": {
+                "placeholder": "Přidat možnost",
+                "errors": {
+                  "name": {
+                    "required": "Název možnosti je povinný.",
+                    "integrity": "Možnost se stejným názvem již existuje."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Vyberte možnost",
+                "multi": {
+                  "default": "Vyberte možnosti",
+                  "variable": "{count} vybraných možností"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Úspěch!",
+              "message": "Vlastnost {name} byla úspěšně vytvořena."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodařilo se vytvořit vlastnost. Zkuste to prosím znovu!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Úspěch!",
+              "message": "Vlastnost {name} byla úspěšně aktualizována."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodařilo se aktualizovat vlastnost. Zkuste to prosím znovu!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Úspěch!",
+              "message": "Vlastnost {name} byla úspěšně smazána."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodařilo se smazat vlastnost. Zkuste to prosím znovu!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} {name} vlastnost",
+            "success": {
+              "title": "Úspěch!",
+              "message": "Vlastnost {name} byla {action} úspěšně."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodařilo se {action} vlastnost. Zkuste to prosím znovu!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Vytvořit novou vlastní vlastnost",
+            "update": "Aktualizovat vlastní vlastnost"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Název"
+            },
+            "description": {
+              "placeholder": "Popis"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Musíte pojmenovat svou vlastnost.",
+              "max_length": "Název vlastnosti by neměl překročit 255 znaků."
+            },
+            "property_type": {
+              "required": "Musíte vybrat typ vlastnosti."
+            },
+            "options": {
+              "required": "Musíte přidat alespoň jednu možnost."
+            },
+            "formula": {
+              "required": "Výraz vzorce je vyžadován.",
+              "invalid": "Neplatný vzorec: {error}",
+              "circular_reference": "Zjištěna cyklická reference. Vzorec nemůže odkazovat sám na sebe přímo ani nepřímo.",
+              "invalid_reference": "Vzorec odkazuje na neexistující vlastnost."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Pole vzorce",
+          "tooltip": "Zadejte vzorec pomocí syntaxe '{'Název pole'}'. Podporuje operátory +, -, *, / a &.",
+          "placeholder": "Napište vzorec",
+          "test_button": "Test",
+          "validating": "Ověřování",
+          "validation_success": "Vzorec je platný! Vrací {resultType}",
+          "validation_success_with_refs": "Vzorec je platný! Vrací {resultType} ({count} odkazovaných polí)",
+          "error": {
+            "empty": "Zadejte prosím vzorec",
+            "missing_context": "Chybí kontext pracovního prostoru, projektu nebo typu pracovní položky",
+            "validation_failed": "Ověření se nezdařilo"
+          },
+          "picker": {
+            "no_match": "Žádné odpovídající vlastnosti",
+            "no_available": "Žádné dostupné vlastnosti"
+          }
+        },
+        "enable_disable": {
+          "label": "Aktivní",
+          "tooltip": {
+            "disabled": "Klikněte pro zakázání",
+            "enabled": "Klikněte pro povolení"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Smazat tuto vlastnost",
+          "description": "Smazání vlastností může vést ke ztrátě existujících dat.",
+          "secondary_description": "Chcete místo toho vlastnost zakázat?",
+          "primary_button": "{action}, smazat ji",
+          "secondary_button": "Ano, zakázat ji"
+        },
+        "mandate_confirmation": {
+          "label": "Povinná vlastnost",
+          "content": "Zdá se, že pro tuto vlastnost existuje výchozí možnost. Učinění vlastnosti povinnou odstraní výchozí hodnotu a uživatelé budou muset přidat hodnotu podle svého výběru.",
+          "tooltip": {
+            "disabled": "Tento typ vlastnosti nelze učinit povinným",
+            "enabled": "Zrušte zaškrtnutí pro označení pole jako volitelného",
+            "checked": "Zaškrtněte pro označení pole jako povinného"
+          }
+        },
+        "empty_state": {
+          "title": "Přidat vlastní vlastnosti",
+          "description": "Nové vlastnosti, které přidáte pro tento typ pracovních položek, se zde zobrazí."
+        }
+      },
+      "types": {
+        "title": "Typy",
+        "description": "Vytvářejte a přizpůsobujte typy pracovních položek s vlastnostmi.",
+        "sort_options": {
+          "project_count": "Počet projektů, do kterých patří"
+        },
+        "filter_options": {
+          "show_active": "Zobrazit aktivní",
+          "show_inactive": "Zobrazit neaktivní"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Vytvořit nový",
+            "import_from_workspace": "Importovat z pracovního prostoru"
+          },
+          "banner": {
+            "with_access": "Povolte typy pracovních položek pro import typů z úrovně pracovního prostoru",
+            "without_access": "Typy pracovních položek jsou zakázány. Kontaktujte správce pracovního prostoru, aby je povolil v nastavení pracovního prostoru."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Vlastní vlastnosti",
+        "add_button": "Přidat vlastnosti",
+        "modal": {
+          "title": "Přidat vlastnosti",
+          "empty": {
+            "title": "Žádné vlastnosti nejsou k dispozici",
+            "description": "Všechny vlastnosti jsou již propojeny s tímto typem."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Zrušit propojení vlastnosti",
+          "description": "Zrušení propojení této vlastnosti trvale odstraní všechny její hodnoty napříč každou pracovní položkou používající tento typ. Tuto akci nelze vrátit zpět.",
+          "input_label": "Napište",
+          "input_label_suffix": "pro pokračování:",
+          "confirm": "Zrušit propojení vlastnosti",
+          "loading": "Rušení propojení"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Smazat tento typ",
+        "description": "Odstranění typů může vést ke ztrátě stávajících dat.",
+        "can_disable_warning": "Chcete místo toho zakázat tento typ?",
+        "primary_button": "Ano, smazat",
+        "toast": {
+          "success": {
+            "title": "Úspěch!",
+            "message": "Typ pracovního položky byl úspěšně odstraněn."
+          },
+          "error": {
+            "title": "Chyba!",
+            "message": "Nepodařilo se odstranit typ pracovního položky. Zkuste to prosím znovu!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Výchozí typ pracovní položky nelze odstranit",
+          "cannot_delete_work_item_type_with_associated_work_items": "Typ pracovní položky s přidruženými pracovními položkami nelze odstranit"
+        }
+      }
+    },
+    "create": {
+      "title": "Vytvořit typ pracovních položek",
+      "button": "Přidat typ pracovních položek",
+      "toast": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Typ pracovních položek byl úspěšně vytvořen."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": {
+            "default": "Nepodařilo se vytvořit typ pracovní položky. Zkuste to prosím znovu!",
+            "conflict": "Typ {name} již existuje. Zvolte jiné jméno."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Aktualizovat typ pracovních položek",
+      "button": "Aktualizovat typ pracovních položek",
+      "toast": {
+        "success": {
+          "title": "Úspěch!",
+          "message": "Typ pracovních položek {name} byl úspěšně aktualizován."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": {
+            "default": "Nepodařilo se aktualizovat typ pracovní položky. Zkuste to prosím znovu!",
+            "conflict": "Typ {name} již existuje. Zvolte jiné jméno."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Dejte tomuto typu pracovních položek jedinečný název"
+        },
+        "description": {
+          "placeholder": "Popište, k čemu je tento typ pracovních položek určen a kdy se má používat."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} {name} typ pracovních položek",
+        "success": {
+          "title": "Úspěch!",
+          "message": "Typ pracovních položek {name} byl {action} úspěšně."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Nepodařilo se {action} typ pracovních položek. Zkuste to prosím znovu!"
+        }
+      },
+      "tooltip": "Klikněte pro {action}"
+    },
+    "change_confirmation": {
+      "title": "Změnit typ pracovních položek?",
+      "description": "Změna typu pracovních položek může vést ke ztrátě hodnot vlastních vlastností, které jsou specifické pro aktuální typ. Tuto akci nelze vrátit zpět.",
+      "button": {
+        "loading": "Mění se",
+        "default": "Změnit typ"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Povolit typy pracovních položek",
+        "description": "Upravte pracovní položky podle svých potřeb s typy pracovních položek. Přizpůsobte je ikonami, pozadím a vlastnostmi a nakonfigurujte je pro tento projekt.",
+        "primary_button": {
+          "text": "Povolit"
+        },
+        "confirmation": {
+          "title": "Jakmile budou povoleny, typy pracovních položek nelze zakázat.",
+          "description": "Typ pracovních položek Plane se stane výchozím typem pracovních položek pro tento projekt a zobrazí se s ikonou a pozadím v tomto projektu.",
+          "button": {
+            "default": "Povolit",
+            "loading": "Nastavuji"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Získejte Pro pro povolení typů pracovních položek.",
+        "description": "Upravte pracovní položky podle svých potřeb s typy pracovních položek. Přizpůsobte je ikonami, pozadím a vlastnostmi a nakonfigurujte je pro tento projekt.",
+        "primary_button": {
+          "text": "Získejte Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Upgradujte pro povolení typů pracovních položek.",
+        "description": "Upravte pracovní položky podle svých potřeb s typy pracovních položek. Přizpůsobte je ikonami, pozadím a vlastnostmi a nakonfigurujte je pro tento projekt.",
+        "primary_button": {
+          "text": "Upgradovat"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hierarchie",
+      "tab_label": "Hierarchie",
+      "description": "Nastavte úrovně hierarchie pro organizaci vaší práce. Každá úroveň definuje nadřazený vztah s položkou přímo nad ní a podřazený vztah s položkou přímo pod ní. ",
+      "sidebar_label": "Hierarchie",
+      "enable_control": {
+        "title": "Povolit hierarchii",
+        "description": "Vytvářejte vztahy nadřazený-podřazený mezi různými typy pracovních položek.",
+        "tooltip": "Hierarchii nelze deaktivovat po jejím aktivování."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Nejprve definujte typy pracovních položek pro vytvoření nové hierarchie.",
+        "cta": "Nastavení typů pracovních položek"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Přetáhněte typ pro přidání nové úrovně hierarchie",
+      "empty_level_placeholder": "Přetáhněte typ pracovní položky na úroveň {level}",
+      "drag_tooltip": "Přetáhněte pro změnu úrovně",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Nastavit jako výchozí",
+          "toast": {
+            "loading": "Nastavení jako výchozí...",
+            "success": {
+              "title": "Úspěch!",
+              "message": "Úroveň hierarchie {level} byla úspěšně nastavena jako výchozí."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodařilo se nastavit úroveň hierarchie {level} jako výchozí. Zkuste to prosím znovu."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Přesouvání {workItemTypeName} do úrovně {level}...",
+        "success": {
+          "title": "Úspěch!",
+          "message": "{workItemTypeName} byl úspěšně přesunut do úrovně {level}."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Uložením se přeruší stávající vazby",
+      "content": {
+        "intro": "Typ pracovní položky {workItemTypeName} obsahuje:",
+        "parent_items": "{count, plural, one {Bude odstraněna # nadřazená vazba} few {Budou odstraněny # nadřazené vazby} other {Bude odstraněno # nadřazených vazeb}}.",
+        "child_items": "{count, plural, one {podřazenou pracovní položku} few {podřazené pracovní položky} other {podřazených pracovních položek}}",
+        "parent_line_suffix_when_also_children": ", a ",
+        "footer": "Tato změna odstraní nadřazené a podřazené vztahy u stávajících pracovních položek typu {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Pro pokračování napište „potvrdit“.",
+        "placeholder": "potvrdit"
+      },
+      "error_toast": {
+        "title": "Chyba!",
+        "message": "Nepodařilo se zrušit propojení a uložit. Zkuste to prosím znovu."
+      },
+      "confirm_button": {
+        "loading": "Ukládání",
+        "default": "Uložit přesto"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Chyba!",
+        "message": "Vybraný typ pracovní položky nelze použít k vytvoření nové pracovní položky, protože porušuje pravidla hierarchie."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Chyba!",
+        "message": "Typ pracovní položky nelze aktualizovat, protože porušuje pravidla hierarchie."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Úroveň hierarchie",
+      "invalid_level_toast": {
+        "title": "Chyba!",
+        "message": "Typ pracovní položky nelze aktualizovat, protože to porušuje pravidla hierarchie."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/work-item.json b/packages/i18n/src/locales/cs/work-item.json
new file mode 100644
index 0000000..78196a6
--- /dev/null
+++ b/packages/i18n/src/locales/cs/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Pracovní položka} few {Pracovní položky} other {Pracovních položek}}",
+    "all": "Všechny pracovní položky",
+    "edit": "Upravit pracovní položku",
+    "title": {
+      "label": "Název pracovní položky",
+      "required": "Název pracovní položky je povinný."
+    },
+    "add": {
+      "press_enter": "Stiskněte 'Enter' pro přidání další pracovní položky",
+      "label": "Přidat pracovní položku",
+      "cycle": {
+        "failed": "Přidání pracovní položky do cyklu se nezdařilo. Zkuste to prosím znovu.",
+        "success": "{count, plural, one {Pracovní položka} few {Pracovní položky} other {Pracovních položek}} přidána do cyklu.",
+        "loading": "Přidávání {count, plural, one {pracovní položky} few {pracovních položek} other {pracovních položek}} do cyklu"
+      },
+      "assignee": "Přidat přiřazené",
+      "start_date": "Přidat datum začátku",
+      "due_date": "Přidat termín",
+      "parent": "Přidat nadřazenou pracovní položku",
+      "sub_issue": "Přidat podřízenou pracovní položku",
+      "dependency": "Přidat závislost",
+      "relation": "Přidat vztah",
+      "link": "Přidat odkaz",
+      "existing": "Přidat existující pracovní položku"
+    },
+    "remove": {
+      "label": "Odebrat pracovní položku",
+      "cycle": {
+        "loading": "Odebírání pracovní položky z cyklu",
+        "success": "Pracovní položka odebrána z cyklu.",
+        "failed": "Odebrání pracovní položky z cyklu se nezdařilo. Zkuste to prosím znovu."
+      },
+      "module": {
+        "loading": "Odebírání pracovní položky z modulu",
+        "success": "Pracovní položka odebrána z modulu.",
+        "failed": "Odebrání pracovní položky z modulu se nezdařilo. Zkuste to prosím znovu."
+      },
+      "parent": {
+        "label": "Odebrat nadřazenou pracovní položku"
+      }
+    },
+    "new": "Nová pracovní položka",
+    "adding": "Přidávání pracovní položky",
+    "create": {
+      "success": "Pracovní položka úspěšně vytvořena"
+    },
+    "priority": {
+      "urgent": "Naléhavá",
+      "high": "Vysoká",
+      "medium": "Střední",
+      "low": "Nízká"
+    },
+    "display": {
+      "properties": {
+        "label": "Zobrazované vlastnosti",
+        "id": "ID",
+        "issue_type": "Typ pracovní položky",
+        "sub_issue_count": "Počet podřízených položek",
+        "attachment_count": "Počet příloh",
+        "created_on": "Vytvořeno dne",
+        "sub_issue": "Podřízená položka",
+        "work_item_count": "Počet pracovních položek"
+      },
+      "extra": {
+        "show_sub_issues": "Zobrazit podřízené položky",
+        "show_empty_groups": "Zobrazit prázdné skupiny"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Toto rozložení je řazeno podle",
+      "list": "Seznam",
+      "kanban": "Nástěnka",
+      "calendar": "Kalendář",
+      "spreadsheet": "Tabulka",
+      "gantt": "Časová osa",
+      "title": {
+        "list": "Seznamové rozložení",
+        "kanban": "Nástěnkové rozložení",
+        "calendar": "Kalendářové rozložení",
+        "spreadsheet": "Tabulkové rozložení",
+        "gantt": "Rozložení časové osy"
+      }
+    },
+    "states": {
+      "active": "Aktivní",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Přidat komentář",
+      "switch": {
+        "private": "Přepnout na soukromý komentář",
+        "public": "Přepnout na veřejný komentář"
+      },
+      "create": {
+        "success": "Komentář úspěšně vytvořen",
+        "error": "Vytvoření komentáře se nezdařilo. Zkuste to prosím později."
+      },
+      "update": {
+        "success": "Komentář úspěšně aktualizován",
+        "error": "Aktualizace komentáře se nezdařila. Zkuste to prosím později."
+      },
+      "remove": {
+        "success": "Komentář úspěšně odstraněn",
+        "error": "Odstranění komentáře se nezdařilo. Zkuste to prosím později."
+      },
+      "upload": {
+        "error": "Nahrání přílohy se nezdařilo. Zkuste to prosím později."
+      },
+      "copy_link": {
+        "success": "Odkaz na komentář byl zkopírován do schránky",
+        "error": "Chyba při kopírování odkazu na komentář. Zkuste to prosím později."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Přidat odpověď",
+          "placeholder": "Přidat odpověď"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Načtení odpovědí se nezdařilo"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Odpověď úspěšně vytvořena"
+            },
+            "error": {
+              "message": "Vytvoření odpovědi se nezdařilo"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Odpověď úspěšně aktualizována"
+            },
+            "error": {
+              "message": "Aktualizace odpovědi se nezdařila"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Odpověď úspěšně smazána"
+            },
+            "error": {
+              "message": "Smazání odpovědi se nezdařilo"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Pracovní položka neexistuje",
+        "description": "Pracovní položka, kterou hledáte, neexistuje, byla archivována nebo smazána.",
+        "primary_button": {
+          "text": "Zobrazit další pracovní položky"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Související pracovní položky"
+    },
+    "archive": {
+      "description": "Lze archivovat pouze dokončené nebo zrušené\npracovní položky",
+      "label": "Archivovat pracovní položku",
+      "confirm_message": "Opravdu chcete archivovat tuto pracovní položku? Všechny archivované položky lze později obnovit.",
+      "success": {
+        "label": "Archivace úspěšná",
+        "message": "Vaše archivy najdete v archivech projektu."
+      },
+      "failed": {
+        "message": "Archivace pracovní položky se nezdařila. Zkuste to prosím znovu."
+      },
+      "banner_message": "Tato pracovní položka byla archivována. Přejděte do sekce Archivy a obnovte ji.",
+      "go_to_archives": "Přejít do archivů"
+    },
+    "restore": {
+      "success": {
+        "title": "Obnovení úspěšné",
+        "message": "Vaše pracovní položka je k nalezení v pracovních položkách projektu."
+      },
+      "failed": {
+        "message": "Obnovení pracovní položky se nezdařilo. Zkuste to prosím znovu."
+      }
+    },
+    "relation": {
+      "relates_to": "Související s",
+      "duplicate": "Duplikát",
+      "blocked_by": "Blokováno",
+      "blocking": "Blokující",
+      "start_before": "Začíná před",
+      "start_after": "Začíná po",
+      "finish_before": "Končí před",
+      "finish_after": "Končí po",
+      "implements": "Implementuje",
+      "implemented_by": "Implementováno"
+    },
+    "copy_link": "Kopírovat odkaz na pracovní položku",
+    "delete": {
+      "label": "Smazat pracovní položku",
+      "error": "Chyba při mazání pracovní položky"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Pracovní položka úspěšně přihlášena k odběru",
+        "unsubscribed": "Odběr pracovní položky zrušen"
+      }
+    },
+    "select": {
+      "error": "Vyberte alespoň jednu pracovní položku",
+      "empty": "Nevybrány žádné pracovní položky",
+      "add_selected": "Přidat vybrané pracovní položky",
+      "select_all": "Vybrat vše",
+      "deselect_all": "Zrušit výběr všeho"
+    },
+    "open_in_full_screen": "Otevřít pracovní položku na celou obrazovku",
+    "duplicate": {
+      "modal": {
+        "title": "Vytvořit kopii do jiného projektu",
+        "description1": "Toto vytvoří kopii pracovní položky.",
+        "description2": "Při duplikování budou odstraněna všechna data vlastností.",
+        "placeholder": "Vyberte projekt"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Pracovní položka úspěšně duplikována"
+        },
+        "error": {
+          "message": "Duplikování pracovní položky se nezdařilo"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Propojit stránky",
+      "show_wiki_pages": "Zobrazit wiki stránky",
+      "link_pages_to": "Propojit stránky s",
+      "linked_pages": "Propojené stránky",
+      "no_description": "Toto je prázdná stránka. Napište něco dovnitř a uvidíte to zde jako tento zástupný text",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Stránky aktualizovány",
+            "message": "Stránky úspěšně aktualizovány"
+          },
+          "error": {
+            "title": "Aktualizace stránek se nezdařila",
+            "message": "Aktualizace stránek se nezdařila"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Stránka odstraněna",
+            "message": "Stránka úspěšně odstraněna"
+          },
+          "error": {
+            "title": "Odstranění stránky se nezdařilo",
+            "message": "Odstranění stránky se nezdařilo"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Klikněte pro hlasování nahoru",
+      "click_to_downvote": "Klikněte pro hlasování dolů",
+      "click_to_view_upvotes": "Klikněte pro zobrazení hlasů nahoru",
+      "click_to_view_downvotes": "Klikněte pro zobrazení hlasů dolů"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Podřízená pracovní položka úspěšně aktualizována",
+      "error": "Chyba při aktualizaci podřízené položky"
+    },
+    "remove": {
+      "success": "Podřízená pracovní položka úspěšně odebrána",
+      "error": "Chyba při odebírání podřízené položky"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Nemáte podřízené pracovní položky, které odpovídají použitým filtrům.",
+        "description": "Chcete-li zobrazit všechny podřízené pracovní položky, odstraňte všechny použité filtry.",
+        "action": "Odstranit filtry"
+      },
+      "list_filters": {
+        "title": "Nemáte pracovní položky, které odpovídají použitým filtrům.",
+        "description": "Chcete-li zobrazit všechny pracovní položky, odstraňte všechny použité filtry.",
+        "action": "Odstranit filtry"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Žádné odpovídající položky"
+      },
+      "no_issues": {
+        "title": "Žádné položky"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Žádné komentáře",
+        "description": "Komentáře slouží k diskusi a sledování položek."
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Nelze archivovat pracovní položky",
+        "message": "Archivovat lze pouze pracovní položky patřící do skupin stavů Dokončeno nebo Zrušeno."
+      },
+      "invalid_issue_start_date": {
+        "title": "Nelze aktualizovat pracovní položky",
+        "message": "Vybrané datum zahájení přesahuje datum splatnosti pro některé pracovní položky. Ujistěte se, že datum zahájení je před datem splatnosti."
+      },
+      "invalid_issue_target_date": {
+        "title": "Nelze aktualizovat pracovní položky",
+        "message": "Vybrané datum splatnosti předchází datu zahájení pro některé pracovní položky. Ujistěte se, že datum splatnosti je po datu zahájení."
+      },
+      "invalid_state_transition": {
+        "title": "Nelze aktualizovat pracovní položky",
+        "message": "Změna stavu není povolena pro některé pracovní položky. Ujistěte se, že je změna stavu povolena."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Měňte stav, prioritu a další vlastnosti u více pracovních položek najednou. V průměru ušetříte tři minuty na operaci.",
+      "cta": "Upgradovat na One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Opakující se pracovní položky",
+      "description": "Nastavte to jednou. Připomeneme vám to, až bude čas. Upgradujte na Business a opakující se práce bude bez námahy.",
+      "new_recurring_work_item": "Nová opakující se pracovní položka",
+      "update_recurring_work_item": "Upravit opakující se pracovní položku",
+      "form": {
+        "interval": {
+          "title": "Plán",
+          "start_date": {
+            "validation": {
+              "required": "Počáteční datum je povinné"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Typ intervalu je povinný"
+            }
+          }
+        },
+        "button": {
+          "create": "Vytvořit opakující se pracovní položku",
+          "update": "Upravit opakující se pracovní položku"
+        }
+      },
+      "create_button": {
+        "label": "Vytvořit opakující se pracovní položku",
+        "no_permission": "Kontaktujte správce projektu pro vytvoření opakujících se pracovních položek"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Vaše práce na autopilotu",
+        "description": "Nastavte to jednou. Připomeneme vám to, až bude čas. Upgradujte na Business a opakující se práce bude bez námahy."
+      },
+      "no_templates": {
+        "button": "Vytvořte svou první opakující se pracovní položku"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Opakující se pracovní položka vytvořena",
+          "message": "{name}, opakující se pracovní položka, je nyní dostupná pro váš pracovní prostor."
+        },
+        "error": {
+          "title": "Tuto opakující se pracovní položku se tentokrát nepodařilo vytvořit.",
+          "message": "Zkuste znovu uložit své údaje nebo je zkopírujte do nové opakující se pracovní položky, ideálně v jiném panelu."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Opakující se pracovní položka změněna",
+          "message": "{name}, opakující se pracovní položka, byla změněna."
+        },
+        "error": {
+          "title": "Změny této opakující se pracovní položky se nepodařilo uložit.",
+          "message": "Zkuste znovu uložit své údaje nebo se k této opakující se pracovní položce vraťte později. Pokud potíže přetrvávají, kontaktujte nás."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Opakující se pracovní položka smazána",
+          "message": "{name}, opakující se pracovní položka, byla nyní odstraněna z vašeho pracovního prostoru."
+        },
+        "error": {
+          "title": "Tuto opakující se pracovní položku se nepodařilo smazat.",
+          "message": "Zkuste ji smazat znovu nebo se k ní vraťte později. Pokud ji stále nemůžete smazat, kontaktujte nás."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Smazat opakující se pracovní položku",
+      "description": {
+        "prefix": "Opravdu chcete smazat opakující se pracovní položku-",
+        "suffix": "? Všechna data související s touto opakující se pracovní položkou budou trvale odstraněna. Tuto akci nelze vrátit zpět."
+      }
+    }
+  },
+  "epic": {
+    "new": "Nový epik",
+    "label": "{count, plural, one {Epik} other {Epiky}}",
+    "adding": "Přidávám epik",
+    "create": {
+      "success": "Epik úspěšně vytvořen"
+    },
+    "add": {
+      "label": "Přidat epik",
+      "press_enter": "Pro přidání dalšího epiku stiskněte 'Enter'"
+    },
+    "title": {
+      "label": "Název epiku",
+      "required": "Název epiku je povinný."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/workflow.json b/packages/i18n/src/locales/cs/workflow.json
new file mode 100644
index 0000000..c1d1e42
--- /dev/null
+++ b/packages/i18n/src/locales/cs/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Povolit nové pracovní položky",
+      "work_item_creation_disable_tooltip": "Vytváření pracovních položek je pro tento stav zakázáno",
+      "default_state": "Výchozí stav umožňuje všem členům vytvářet nové pracovní položky. To nelze změnit",
+      "state_change_count": "{count, plural, one {1 povolená změna stavu} other {{count} povolené změny stavu}}",
+      "movers_count": "{count, plural, one {1 uvedený recenzent} other {{count} uvedení recenzenti}}",
+      "state_changes": {
+        "label": {
+          "default": "Přidat povolenou změnu stavu",
+          "loading": "Přidávání povolené změny stavu"
+        },
+        "move_to": "Změnit stav na",
+        "movers": {
+          "label": "Když je recenzováno",
+          "tooltip": "Recenzenti jsou lidé, kteří mají povolení přesunout pracovní položky z jednoho stavu do druhého.",
+          "add": "Přidat recenzenty"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Nemůžete přesunout tuto pracovní položku sem."
+    },
+    "workflow_enabled": {
+      "label": "Změna stavu"
+    },
+    "workflow_tree": {
+      "label": "Pro pracovní položky v",
+      "state_change_label": "může ji přesunout na"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Ovládejte chaos změn a recenzí pomocí pracovních toků.",
+        "description": "Nastavte pravidla pro to, kam se vaše práce přesouvá, kým a kdy pomocí pracovních toků v Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Zobrazit historii změn",
+      "reset_workflow": "Resetovat pracovní tok"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Opravdu chcete resetovat tento pracovní tok?",
+        "description": "Pokud resetujete tento pracovní tok, všechna vaše pravidla pro změnu stavu budou smazána a budete je muset znovu vytvořit, abyste je mohli v tomto projektu používat."
+      },
+      "delete_state_change": {
+        "title": "Opravdu chcete smazat toto pravidlo změny stavu?",
+        "description": "Jakmile bude smazáno, tuto změnu nelze vrátit zpět a budete muset pravidlo znovu nastavit, pokud ho chcete mít v tomto projektu."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} pracovní tok",
+        "success": {
+          "title": "Úspěch",
+          "message": "Pracovní tok {action} úspěšně"
+        },
+        "error": {
+          "title": "Chyba",
+          "message": "Pracovní tok nemohl být {action}. Zkuste to prosím znovu."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Úspěch",
+          "message": "Pracovní tok byl úspěšně resetován"
+        },
+        "error": {
+          "title": "Chyba při resetování pracovního toku",
+          "message": "Pracovní tok nemohl být resetován. Zkuste to prosím znovu."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Chyba při přidávání pravidla změny stavu",
+          "message": "Pravidlo změny stavu nemohlo být přidáno. Zkuste to prosím znovu."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Chyba při úpravě pravidla změny stavu",
+          "message": "Pravidlo změny stavu nemohlo být upraveno. Zkuste to prosím znovu."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Chyba při odstraňování pravidla změny stavu",
+          "message": "Pravidlo změny stavu nemohlo být odstraněno. Zkuste to prosím znovu."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Chyba při úpravě recenzentů pravidla změny stavu",
+          "message": "Recenzenti pravidla změny stavu nemohli být upraveni. Zkuste to prosím znovu."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/workspace-settings.json b/packages/i18n/src/locales/cs/workspace-settings.json
new file mode 100644
index 0000000..3b34a61
--- /dev/null
+++ b/packages/i18n/src/locales/cs/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Nastavení pracovního prostoru",
+    "page_label": "{workspace} - Obecná nastavení",
+    "key_created": "Klíč vytvořen",
+    "copy_key": "Zkopírujte a uložte tento klíč do Plane Pages. Po zavření jej neuvidíte. CSV soubor s klíčem byl stažen.",
+    "token_copied": "Token zkopírován do schránky.",
+    "settings": {
+      "general": {
+        "title": "Obecné",
+        "upload_logo": "Nahrát logo",
+        "edit_logo": "Upravit logo",
+        "name": "Název pracovního prostoru",
+        "company_size": "Velikost společnosti",
+        "url": "URL pracovního prostoru",
+        "workspace_timezone": "Časové pásmo pracovního prostoru",
+        "update_workspace": "Aktualizovat prostor",
+        "delete_workspace": "Smazat tento prostor",
+        "delete_workspace_description": "Smazáním prostoru odstraníte všechna data a zdroje. Akce je nevratná.",
+        "delete_btn": "Smazat prostor",
+        "delete_modal": {
+          "title": "Opravdu chcete smazat tento prostor?",
+          "description": "Máte aktivní zkušební verzi. Nejprve ji zrušte.",
+          "dismiss": "Zavřít",
+          "cancel": "Zrušit zkušební verzi",
+          "success_title": "Prostor smazán.",
+          "success_message": "Budete přesměrováni na profil.",
+          "error_title": "Nepodařilo se.",
+          "error_message": "Zkuste to prosím znovu."
+        },
+        "errors": {
+          "name": {
+            "required": "Název je povinný",
+            "max_length": "Název prostoru nesmí přesáhnout 80 znaků"
+          },
+          "company_size": {
+            "required": "Velikost společnosti je povinná",
+            "select_a_range": "Vyberte velikost organizace"
+          }
+        }
+      },
+      "members": {
+        "title": "Členové",
+        "add_member": "Přidat člena",
+        "pending_invites": "Čekající pozvánky",
+        "invitations_sent_successfully": "Pozvánky úspěšně odeslány",
+        "leave_confirmation": "Opravdu chcete opustit prostor? Ztratíte přístup. Akce je nevratná.",
+        "details": {
+          "full_name": "Celé jméno",
+          "display_name": "Zobrazované jméno",
+          "email_address": "E-mailová adresa",
+          "account_type": "Typ účtu",
+          "authentication": "Ověřování",
+          "joining_date": "Datum připojení"
+        },
+        "modal": {
+          "title": "Pozvat spolupracovníky",
+          "description": "Pozvěte lidi ke spolupráci.",
+          "button": "Odeslat pozvánky",
+          "button_loading": "Odesílání pozvánek",
+          "placeholder": "jmeno@spolecnost.cz",
+          "errors": {
+            "required": "Vyžaduje se e-mailová adresa.",
+            "invalid": "E-mail je neplatný"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Fakturace a plány",
+        "description": "Vyberte si plán, spravujte předplatná a snadno je upgradujte, jak rostou vaše potřeby.",
+        "title": "Fakturace a plány",
+        "current_plan": "Aktuální plán",
+        "free_plan": "Používáte bezplatný plán",
+        "view_plans": "Zobrazit plány"
+      },
+      "exports": {
+        "heading": "Exporty",
+        "description": "Exportujte data projektu v různých formátech a přistupujte k historii exportů s odkazy ke stažení.",
+        "title": "Exporty",
+        "exporting": "Exportování",
+        "previous_exports": "Předchozí exporty",
+        "export_separate_files": "Exportovat data do samostatných souborů",
+        "exporting_projects": "Export projektu",
+        "format": "Formát",
+        "filters_info": "Použijte filtry k exportu konkrétních pracovních položek podle vašich kritérií.",
+        "modal": {
+          "title": "Exportovat do",
+          "toasts": {
+            "success": {
+              "title": "Export úspěšný",
+              "message": "Exportované {entity} si můžete stáhnout z předchozího exportu."
+            },
+            "error": {
+              "title": "Export selhal",
+              "message": "Zkuste to prosím znovu."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooky",
+        "description": "Automatizujte oznámení externím službám při výskytu událostí projektu.",
+        "title": "Webhooky",
+        "add_webhook": "Přidat webhook",
+        "modal": {
+          "title": "Vytvořit webhook",
+          "details": "Podrobnosti webhooku",
+          "payload": "URL pro payload",
+          "question": "Které události mají spustit tento webhook?",
+          "error": "URL je povinná"
+        },
+        "secret_key": {
+          "title": "Tajný klíč",
+          "message": "Vygenerujte token pro přihlášení k webhooku"
+        },
+        "options": {
+          "all": "Posílat vše",
+          "individual": "Vybrat jednotlivé události"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook vytvořen",
+            "message": "Webhook úspěšně vytvořen"
+          },
+          "not_created": {
+            "title": "Webhook nebyl vytvořen",
+            "message": "Vytvoření webhooku se nezdařilo"
+          },
+          "updated": {
+            "title": "Webhook aktualizován",
+            "message": "Webhook úspěšně aktualizován"
+          },
+          "not_updated": {
+            "title": "Aktualizace webhooku selhala",
+            "message": "Webhook se nepodařilo aktualizovat"
+          },
+          "removed": {
+            "title": "Webhook odstraněn",
+            "message": "Webhook úspěšně odstraněn"
+          },
+          "not_removed": {
+            "title": "Odstranění webhooku selhalo",
+            "message": "Webhook se nepodařilo odstranit"
+          },
+          "secret_key_copied": {
+            "message": "Tajný klíč zkopírován do schránky."
+          },
+          "secret_key_not_copied": {
+            "message": "Chyba při kopírování klíče."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "API Tokeny",
+        "description": "Generujte bezpečné API tokeny pro integraci vašich dat s externími systémy a aplikacemi.",
+        "title": "API Tokeny",
+        "add_token": "Přidat token přístupu",
+        "create_token": "Vytvořit token",
+        "never_expires": "Nikdy neexpiruje",
+        "generate_token": "Generovat token",
+        "generating": "Generování",
+        "delete": {
+          "title": "Smazat API token",
+          "description": "Aplikace používající tento token ztratí přístup. Akce je nevratná.",
+          "success": {
+            "title": "Úspěch!",
+            "message": "Token úspěšně smazán"
+          },
+          "error": {
+            "title": "Chyba!",
+            "message": "Mazání tokenu selhalo"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integrace",
+        "heading": "Integrace",
+        "description": "Propojte se s oblíbenými nástroji a službami pro synchronizaci vaší práce napříč celým ekosystémem.",
+        "page_title": "Pracujte se svými daty Plane v dostupných aplikacích nebo ve svých vlastních.",
+        "page_description": "Zobrazte všechny integrace používané tímto pracovním prostorem nebo vámi."
+      },
+      "imports": {
+        "title": "Importy",
+        "heading": "Importy",
+        "description": "Propojte a importujte data z vašich stávajících nástrojů pro řízení projektů pro zefektivnění integrace pracovního postupu."
+      },
+      "worklogs": {
+        "title": "Pracovní záznamy",
+        "heading": "Pracovní záznamy",
+        "description": "Stáhněte si pracovní záznamy neboli časové výkazy pro kohokoli v jakémkoli projektu."
+      },
+      "group_syncing": {
+        "title": "Synchronizace skupin",
+        "heading": "Synchronizace skupin",
+        "description": "Propojte skupiny poskytovatele identity s projekty a rolemi. Přístup uživatelů se automaticky aktualizuje při změnách členství ve skupině ve vašem IdP, což zjednodušuje onboarding a offboarding.",
+        "enable": {
+          "title": "Povolit synchronizaci skupin",
+          "description": "Automaticky přidávejte uživatele do projektů na základě skupin poskytovatele identity."
+        },
+        "config": {
+          "title": "Konfigurovat synchronizaci skupin",
+          "description": "Nastavte, jak jsou skupiny poskytovatele identity mapovány na projekty a role.",
+          "sync_on_login": {
+            "title": "Synchronizace při přihlášení",
+            "description": "Aktualizujte členství ve skupině a přístup k projektu při přihlášení uživatele."
+          },
+          "sync_offline": {
+            "title": "Offline synchronizace",
+            "description": "Spouští synchronizaci každých šest hodin automaticky, bez čekání na přihlášení uživatelů."
+          },
+          "auto_remove": {
+            "title": "Automatické odebrání",
+            "description": "Automaticky odeberte uživatele z projektů, když již neodpovídají skupině."
+          },
+          "group_attribute_key": {
+            "title": "Klíč atributu skupiny",
+            "description": "Atribut poskytovatele identity používaný k identifikaci a synchronizaci uživatelských skupin.",
+            "placeholder": "Skupiny"
+          }
+        },
+        "group_mapping": {
+          "title": "Mapování skupin",
+          "description": "Propojte skupiny poskytovatele identity s projekty a rolemi.",
+          "button_text": "Přidat novou synchronizaci skupin"
+        },
+        "toast": {
+          "updating": "Aktualizace funkce synchronizace skupin",
+          "success": "Funkce synchronizace skupin byla úspěšně aktualizována.",
+          "error": "Nepodařilo se aktualizovat funkci synchronizace skupin!"
+        },
+        "delete_modal": {
+          "title": "Smazat synchronizaci skupin",
+          "content": "Noví uživatelé z této skupiny identity již nebudou přidáváni do projektu. Již přidaní uživatelé si zachovají svou současnou roli."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Uživatelská skupina",
+            "required": "Uživatelská skupina je povinná",
+            "placeholder": "Zadejte názvy skupin IdP"
+          },
+          "project": {
+            "text": "Projekt",
+            "required": "Projekt je povinný",
+            "placeholder": "Vyberte projekt"
+          },
+          "default_role": {
+            "text": "Role projektu",
+            "required": "Role projektu je povinná",
+            "placeholder": "Vyberte roli projektu"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identita",
+        "heading": "Identita",
+        "description": "Nakonfigurujte svou doménu a povolte jednotné přihlašování"
+      },
+      "project_states": {
+        "title": "Stavy projektů",
+        "heading": "Zobrazit přehled pokroku pro všechny projekty.",
+        "description": "Stavy projektů jsou funkce výhradně Plane pro sledování pokroku všech vašich projektů podle libovolné vlastnosti projektu.",
+        "go_to_settings": "Přejít do nastavení"
+      },
+      "projects": {
+        "title": "Projekty",
+        "description": "Správa stavů projektů, povolení štítků projektů a další konfigurace.",
+        "tabs": {
+          "states": "Stavy projektů",
+          "labels": "Štítky projektů"
+        }
+      },
+      "templates": {
+        "title": "Šablony",
+        "heading": "Šablony",
+        "description": "Ušetřete 80 % času stráveného vytvářením projektů, pracovních položek a stránek, když použijete šablony."
+      },
+      "relations": {
+        "title": "Vztahy",
+        "heading": "Vztahy",
+        "description": "Vytvářejte a spravujte typy vztahů, které propojují pracovní položky napříč vaším pracovním prostorem."
+      },
+      "cancel_trial": {
+        "title": "Nejprve zrušte svou zkušební verzi.",
+        "description": "Máte aktivní zkušební verzi jednoho z našich placených plánů. Nejprve ji prosím zrušte, abyste mohli pokračovat.",
+        "dismiss": "Zavřít",
+        "cancel": "Zrušit zkušební verzi",
+        "cancel_success_title": "Zkušební verze zrušena.",
+        "cancel_success_message": "Nyní můžete workspace smazat.",
+        "cancel_error_title": "To nefungovalo.",
+        "cancel_error_message": "Zkuste to prosím znovu."
+      },
+      "applications": {
+        "internal": "Interní",
+        "title": "Aplikace",
+        "applicationId_copied": "ID aplikace zkopírováno do schránky",
+        "clientId_copied": "ID klienta zkopírováno do schránky",
+        "clientSecret_copied": "Tajemství klienta zkopírováno do schránky",
+        "third_party_apps": "Aplikace třetích stran",
+        "your_apps": "Vaše aplikace",
+        "connect": "Připojit",
+        "connected": "Připojeno",
+        "disconnect": "Odpojit",
+        "install": "Instalovat",
+        "installed": "Instalováno",
+        "configure": "Konfigurovat",
+        "app_available": "Tuto aplikaci jste zpřístupnili pro použití s pracovním prostorem Plane",
+        "app_credentials_regenrated": {
+          "title": "Přihlašovací údaje aplikace byly úspěšně znovu vygenerovány",
+          "description": "Nahraďte klientský klíč všude, kde je používán. Předchozí klíč již není platný."
+        },
+        "app_created": {
+          "title": "Aplikace byla úspěšně vytvořena",
+          "description": "Použijte přihlašovací údaje k instalaci aplikace do pracovního prostoru Plane"
+        },
+        "installed_apps": "Nainstalované aplikace",
+        "all_apps": "Všechny aplikace",
+        "internal_apps": "Interní aplikace",
+        "app_name_title": "Jak pojmenujete tuto aplikaci",
+        "app_description_title": {
+          "label": "Dlouhý popis",
+          "placeholder": "Napište dlouhý popis pro tržiště. Stiskněte '/' pro příkazy."
+        },
+        "authorization_grant_type": {
+          "title": "Typ připojení",
+          "description": "Vyberte, zda má být vaše aplikace nainstalována jednou pro pracovní prostor nebo zda má každý uživatel připojit svůj vlastní účet"
+        },
+        "website": {
+          "title": "Webová stránka",
+          "description": "Odkaz na webové stránky vaší aplikace.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Tvůrce aplikací",
+          "description": "Osoba nebo organizace, která vytváří aplikaci."
+        },
+        "app_maker_error": "Tvůrce aplikace je povinný",
+        "setup_url": {
+          "label": "URL nastavení",
+          "description": "Uživatelé budou po instalaci aplikace přesměrováni na tuto URL.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "Webhook URL",
+          "description": "Sem budeme odesílat události webhook a aktualizace z pracovních prostorů, kde je vaše aplikace nainstalována.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Tajný klíč webhooku",
+          "description": "Tajný klíč používaný k ověření příchozích požadavků webhooku.",
+          "placeholder": "Zadejte náhodný tajný klíč"
+        },
+        "redirect_uris": {
+          "label": "Přesměrovací URI (oddělené mezerou)",
+          "description": "Uživatelé budou po ověření pomocí Plane přesměrováni na tuto cestu.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Připojte pracovní prostor Plane pro začátek používání",
+        "client_id_and_secret": "ID a Tajemství Klienta",
+        "client_id_and_secret_description": "Zkopírujte a uložte tento tajný klíč. Po kliknutí na Zavřít tento klíč již neuvidíte.",
+        "client_id_and_secret_download": "Můžete si stáhnout CSV s klíčem odsud.",
+        "application_id": "ID Aplikace",
+        "client_id": "ID Klienta",
+        "client_secret": "Tajemství Klienta",
+        "export_as_csv": "Exportovat jako CSV",
+        "slug_already_exists": "Slug již existuje",
+        "failed_to_create_application": "Nepodařilo se vytvořit aplikaci",
+        "upload_logo": "Nahrát Logo",
+        "app_name_error": "Název aplikace je povinný",
+        "app_short_description_title": "Dejte této aplikaci krátký popis",
+        "app_short_description_error": "Krátký popis aplikace je povinný",
+        "app_description_error": "Popis aplikace je povinný",
+        "app_slug_title": "Slug aplikace",
+        "app_slug_error": "Slug aplikace je povinný",
+        "invalid_website_error": "Neplatná webová stránka",
+        "webhook_url_title": "URL Webhooku",
+        "webhook_url_error": "URL webhooku je povinné",
+        "invalid_webhook_url_error": "Neplatné URL webhooku",
+        "redirect_uris_title": "URI přesměrování",
+        "redirect_uris_error": "URI přesměrování jsou povinné",
+        "invalid_redirect_uris_error": "Neplatné URI přesměrování",
+        "redirect_uris_description": "Zadejte URI oddělené mezerami, kam aplikace přesměruje po uživateli, např. https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Autorizované JavaScript původy",
+        "authorized_javascript_origins_error": "Autorizované JavaScript původy jsou povinné",
+        "invalid_authorized_javascript_origins_error": "Neplatné autorizované JavaScript původy",
+        "authorized_javascript_origins_description": "Zadejte původy oddělené mezerami, odkud bude moci aplikace dělat požadavky, např. app.com example.com",
+        "create_app": "Vytvořit aplikaci",
+        "update_app": "Aktualizovat aplikaci",
+        "build_your_own_app": "Vytvořte si vlastní aplikaci",
+        "edit_app_details": "Upravit detaily aplikace",
+        "regenerate_client_secret_description": "Znovu vygenerovat tajemství klienta. Po regeneraci můžete klíč zkopírovat nebo stáhnout do CSV souboru.",
+        "regenerate_client_secret": "Znovu vygenerovat tajemství klienta",
+        "regenerate_client_secret_confirm_title": "Jste si jisti, že chcete znovu vygenerovat tajemství klienta?",
+        "regenerate_client_secret_confirm_description": "Aplikace používající toto tajemství přestane fungovat. Budete muset aktualizovat tajemství v aplikaci.",
+        "regenerate_client_secret_confirm_cancel": "Zrušit",
+        "regenerate_client_secret_confirm_regenerate": "Znovu vygenerovat",
+        "read_only_access_to_workspace": "Přístup pouze pro čtení k vašemu pracovnímu prostoru",
+        "write_access_to_workspace": "Přístup pro zápis k vašemu pracovnímu prostoru",
+        "read_only_access_to_user_profile": "Přístup pouze pro čtení k vašemu uživatelskému profilu",
+        "write_access_to_user_profile": "Přístup pro zápis k vašemu uživatelskému profilu",
+        "connect_app_to_workspace": "Připojit {app} k vašemu pracovnímu prostoru {workspace}",
+        "user_permissions": "Uživatelská oprávnění",
+        "user_permissions_description": "Uživatelská oprávnění se používají k udělení přístupu k profilu uživatele.",
+        "workspace_permissions": "Oprávnění pracovního prostoru",
+        "workspace_permissions_description": "Oprávnění pracovního prostoru se používají k udělení přístupu k pracovnímu prostoru.",
+        "with_the_permissions": "s oprávněními",
+        "app_consent_title": "{app} žádá o přístup k vašemu pracovnímu prostoru a profilu Plane.",
+        "choose_workspace_to_connect_app_with": "Vyberte pracovní prostor pro připojení aplikace",
+        "app_consent_workspace_permissions_title": "{app} by chtěl",
+        "app_consent_user_permissions_title": "{app} může také požádat o povolení uživatele pro následující zdroje. Tato oprávnění budou vyžádána a autorizována pouze uživatelem.",
+        "app_consent_accept_title": "Přijetím",
+        "app_consent_accept_1": "Udělujete aplikaci přístup k vašim datům Plane kdekoli, kde můžete používat aplikaci uvnitř nebo mimo Plane",
+        "app_consent_accept_2": "Souhlasíte s Zásadami ochrany osobních údajů a Podmínkami použití {app}",
+        "accepting": "Přijímání...",
+        "accept": "Přijmout",
+        "categories": "Kategorie",
+        "select_app_categories": "Vyberte kategorie aplikace",
+        "categories_title": "Kategorie",
+        "categories_error": "Kategorie jsou povinné",
+        "invalid_categories_error": "Neplatné kategorie",
+        "categories_description": "Vyberte kategorie, které nejlépe popisují aplikaci",
+        "supported_plans": "Podporované Plány",
+        "supported_plans_description": "Vyberte plány pracovního prostoru, které mohou nainstalovat tuto aplikaci. Ponechte prázdné, chcete-li povolit všechny plány.",
+        "select_plans": "Vybrat Plány",
+        "privacy_policy_url_title": "URL Zásad ochrany osobních údajů",
+        "privacy_policy_url_error": "URL Zásad ochrany osobních údajů je povinné",
+        "invalid_privacy_policy_url_error": "Neplatné URL Zásad ochrany osobních údajů",
+        "terms_of_service_url_title": "URL Podmínek služby",
+        "terms_of_service_url_error": "URL Podmínek služby je povinné",
+        "invalid_terms_of_service_url_error": "Neplatné URL Podmínek služby",
+        "support_url_title": "URL Podpory",
+        "support_url_error": "URL Podpory je povinné",
+        "invalid_support_url_error": "Neplatné URL Podpory",
+        "video_url_title": "URL Video",
+        "video_url_error": "URL Video je povinné",
+        "invalid_video_url_error": "Neplatné URL Video",
+        "setup_url_error": "URL Nastavení je povinné",
+        "invalid_setup_url_error": "Neplatné URL Nastavení",
+        "configuration_url_title": "URL Konfigurace",
+        "configuration_url_error": "URL Konfigurace je povinné",
+        "invalid_configuration_url_error": "Neplatné URL Konfigurace",
+        "contact_email_title": "Kontaktní email",
+        "contact_email_error": "Kontaktní email je povinný",
+        "invalid_contact_email_error": "Neplatný kontaktní email",
+        "upload_attachments": "Nahrát přílohy",
+        "uploading_images": "Nahrávání {count} Obrázku{count, plural, one {s} other {s}}",
+        "drop_images_here": "Přetáhněte obrázky sem",
+        "click_to_upload_images": "Klikněte pro nahrávání obrázků",
+        "invalid_file_or_exceeds_size_limit": "Neplatný soubor nebo překračuje limit velikosti ({size} MB)",
+        "uploading": "Nahrávání...",
+        "upload_and_save": "Nahrát a uložit",
+        "app_consent_no_access_title": "Žádost o instalaci",
+        "app_consent_no_access_description": "Tato aplikace může být nainstalována pouze po jejím nainstalování správcem pracovního prostoru. Kontaktujte svého správce pracovního prostoru, abyste mohli pokračovat.",
+        "app_consent_unapproved_title": "Tato aplikace zatím nebyla zkontrolována ani schválena společností Plane.",
+        "app_consent_unapproved_description": "Před připojením této aplikace k vašemu pracovnímu prostoru se ujistěte, že jí důvěřujete.",
+        "go_to_app": "Přejít na aplikaci",
+        "enable_app_mentions": "Povolit zmínky o aplikaci",
+        "enable_app_mentions_tooltip": "Když je tato možnost povolena, uživatelé mohou zmínit nebo přiřadit pracovní položky této aplikaci.",
+        "scopes": "Rozsahy",
+        "select_scopes": "Vybrat rozsahy",
+        "read_access_to": "Přístup pouze pro čtení k",
+        "write_access_to": "Přístup pro zápis k",
+        "global_permission_expiration": "Globální rozsahy brzy vyprší. Místo toho použijte granulární rozsahy. Například použijte project:read místo globálního čtení.",
+        "selected_scopes": "{count} vybráno",
+        "scopes_and_permissions": "Rozsahy a oprávnění",
+        "read": "Čtení",
+        "write": "Zápis",
+        "scope_description": {
+          "projects": "Přístup k projektům a všem souvisejícím entitám",
+          "wiki": "Přístup k wiki a všem souvisejícím entitám",
+          "workspaces": "Přístup k pracovním prostorům a všem souvisejícím entitám",
+          "stickies": "Přístup k poznámkám a všem souvisejícím entitám",
+          "profile": "Přístup k informacím o profilu uživatele",
+          "agents": "Přístup k agentům a všem souvisejícím entitám",
+          "assets": "Přístup k aktivům a všem souvisejícím entitám"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Sledujte, jak se vaše práce stává chytřejší a rychlejší s AI, která je nativně propojena s vaší prací a znalostní základnou."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Skripty",
+        "new_script": "Nový skript",
+        "description": "Automatizujte své pracovní postupy pomocí vlastních skriptů a pravidel automatizace."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Žádné API tokeny",
+        "description": "Používejte API pro integraci Plane s externími systémy."
+      },
+      "webhooks": {
+        "title": "Žádné webhooky",
+        "description": "Vytvořte webhooky pro automatizaci akcí."
+      },
+      "exports": {
+        "title": "Žádné exporty",
+        "description": "Zde najdete historii exportů."
+      },
+      "imports": {
+        "title": "Žádné importy",
+        "description": "Zde najdete historii importů."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/cs/workspace.json b/packages/i18n/src/locales/cs/workspace.json
new file mode 100644
index 0000000..94b5a31
--- /dev/null
+++ b/packages/i18n/src/locales/cs/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Vytvořte si pracovní prostor",
+    "subheading": "Pro používání Plane musíte vytvořit nebo se připojit k pracovnímu prostoru.",
+    "form": {
+      "name": {
+        "label": "Pojmenujte svůj pracovní prostor",
+        "placeholder": "Vhodné je použít něco známého a rozpoznatelného."
+      },
+      "url": {
+        "label": "Nastavte URL vašeho prostoru",
+        "placeholder": "Zadejte nebo vložte URL",
+        "edit_slug": "Můžete upravit pouze část URL (slug)"
+      },
+      "organization_size": {
+        "label": "Kolik lidí bude tento prostor používat?",
+        "placeholder": "Vyberte rozsah"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Pouze správce instance může vytvářet pracovní prostory",
+        "description": "Pokud znáte e-mail správce instance, klikněte na tlačítko níže pro kontakt.",
+        "request_button": "Požádat správce instance"
+      },
+      "validation": {
+        "name_alphanumeric": "Názvy pracovních prostorů mohou obsahovat pouze (' '), ('-'), ('_') a alfanumerické znaky.",
+        "name_length": "Název omezen na 80 znaků.",
+        "url_alphanumeric": "URL mohou obsahovat pouze ('-') a alfanumerické znaky.",
+        "url_length": "URL omezena na 48 znaků.",
+        "url_already_taken": "URL pracovního prostoru je již obsazena!"
+      }
+    },
+    "request_email": {
+      "subject": "Žádost o nový pracovní prostor",
+      "body": "Ahoj správci,\n\nProsím vytvořte nový pracovní prostor s URL [/workspace-name] pro [účel vytvoření].\n\nDíky,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Vytvořit pracovní prostor",
+      "loading": "Vytváření pracovního prostoru"
+    },
+    "toast": {
+      "success": {
+        "title": "Úspěch",
+        "message": "Pracovní prostor úspěšně vytvořen"
+      },
+      "error": {
+        "title": "Chyba",
+        "message": "Vytvoření pracovního prostoru se nezdařilo. Zkuste to prosím znovu."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Přehled projektů, aktivit a metrik",
+        "description": "Vítejte v Plane, jsme rádi, že jste zde. Vytvořte první projekt, sledujte pracovní položky a tato stránka se promění v prostor pro váš pokrok. Správci zde uvidí i položky pomáhající týmu.",
+        "primary_button": {
+          "text": "Vytvořte první projekt",
+          "comic": {
+            "title": "Vše začíná projektem v Plane",
+            "description": "Projektem může být roadmapa produktu, marketingová kampaň nebo uvedení nového auta."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Analytika",
+    "page_label": "{workspace} - Analytika",
+    "open_tasks": "Celkem otevřených úkolů",
+    "error": "Při načítání dat došlo k chybě.",
+    "work_items_closed_in": "Pracovní položky uzavřené v",
+    "selected_projects": "Vybrané projekty",
+    "total_members": "Celkem členů",
+    "total_cycles": "Celkem cyklů",
+    "total_modules": "Celkem modulů",
+    "pending_work_items": {
+      "title": "Čekající pracovní položky",
+      "empty_state": "Zde se zobrazí analýza čekajících položek podle spolupracovníků."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Pracovní položky uzavřené v roce",
+      "empty_state": "Uzavírejte položky pro zobrazení analýzy v grafu."
+    },
+    "most_work_items_created": {
+      "title": "Nejvíce vytvořených položek",
+      "empty_state": "Zobrazí se spolupracovníci a počet jimi vytvořených položek."
+    },
+    "most_work_items_closed": {
+      "title": "Nejvíce uzavřených položek",
+      "empty_state": "Zobrazí se spolupracovníci a počet jimi uzavřených položek."
+    },
+    "tabs": {
+      "scope_and_demand": "Rozsah a poptávka",
+      "custom": "Vlastní analytika"
+    },
+    "total": "Celkový počet {entity}",
+    "started_work_items": "Zahájené {entity}",
+    "backlog_work_items": "Backlog {entity}",
+    "un_started_work_items": "Nezahájené {entity}",
+    "completed_work_items": "Dokončené {entity}",
+    "project_insights": "Přehled projektu",
+    "summary_of_projects": "Souhrn projektů",
+    "all_projects": "Všechny projekty",
+    "trend_on_charts": "Trend na grafech",
+    "active_projects": "Aktivní projekty",
+    "customized_insights": "Přizpůsobené přehledy",
+    "created_vs_resolved": "Vytvořeno vs Vyřešeno",
+    "empty_state": {
+      "project_insights": {
+        "title": "Zatím žádná data",
+        "description": "Pracovní položky přiřazené vám, rozdělené podle stavu, se zde zobrazí."
+      },
+      "created_vs_resolved": {
+        "title": "Zatím žádná data",
+        "description": "Pracovní položky vytvořené a vyřešené v průběhu času se zde zobrazí."
+      },
+      "customized_insights": {
+        "title": "Zatím žádná data",
+        "description": "Pracovní položky přiřazené vám, rozdělené podle stavu, se zde zobrazí."
+      },
+      "general": {
+        "title": "Sledujte pokrok, pracovní zátěž a alokace. Odhalte trendy, odstraňte překážky a zrychlete práci",
+        "description": "Porovnávejte rozsah s poptávkou, odhady a rozšiřování rozsahu. Získejte výkonnost podle členů týmu a týmů a zajistěte, aby váš projekt běžel včas.",
+        "primary_button": {
+          "text": "Začněte svůj první projekt",
+          "comic": {
+            "title": "Analytika funguje nejlépe s Cykly + Moduly",
+            "description": "Nejprve časově ohraničte své problémy do Cyklů a pokud můžete, seskupte problémy, které trvají déle než jeden cyklus, do Modulů. Podívejte se na obojí v levé navigaci."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Zatím žádná data",
+        "description": "Analýza postupu cyklu se zobrazí zde. Přidejte pracovní položky do cyklů, abyste mohli sledovat postup."
+      },
+      "module_progress": {
+        "title": "Zatím žádná data",
+        "description": "Analýza postupu modulu se zobrazí zde. Přidejte pracovní položky do modulů, abyste mohli sledovat postup."
+      },
+      "intake_trends": {
+        "title": "Zatím žádná data",
+        "description": "Analýza trendů příjmu se zobrazí zde. Přidejte pracovní položky do příjmu, abyste mohli sledovat trendy."
+      }
+    },
+    "upgrade_to_plan": "Přejděte na plán {plan}, abyste odemkli kartu {tab}",
+    "workitem_resolved_vs_pending": "Vyřešené vs. čekající pracovní položky",
+    "projects_by_status": "Projekty podle stavu",
+    "active_users": "Aktivní uživatelé",
+    "intake_trends": "Trendy příjmů"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Projekt} few {Projekty} other {Projektů}}",
+    "create": {
+      "label": "Přidat projekt"
+    },
+    "network": {
+      "label": "Síť",
+      "private": {
+        "title": "Soukromý",
+        "description": "Přístupné pouze na pozvání"
+      },
+      "public": {
+        "title": "Veřejný",
+        "description": "Kdokoli v prostoru kromě hostů se může připojit"
+      }
+    },
+    "error": {
+      "permission": "Nemáte oprávnění k této akci.",
+      "cycle_delete": "Odstranění cyklu se nezdařilo",
+      "module_delete": "Odstranění modulu se nezdařilo",
+      "issue_delete": "Odstranění pracovní položky se nezdařilo"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Nezačato",
+      "started": "Zahájeno",
+      "completed": "Dokončeno",
+      "cancelled": "Zrušeno"
+    },
+    "sort": {
+      "manual": "Ručně",
+      "name": "Název",
+      "created_at": "Datum vytvoření",
+      "members_length": "Počet členů"
+    },
+    "scope": {
+      "my_projects": "Moje projekty",
+      "archived_projects": "Archivované"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# měsíc} few{# měsíce} other{# měsíců}}",
+      "days_count": "{days, plural, one{# den} few{# dny} other{# dní}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Žádné aktivní projekty",
+        "description": "Projekt je nadřazený cílům. Projekty obsahují Úkoly, Cykly a Moduly. Vytvořte nový nebo filtrujte archivované.",
+        "primary_button": {
+          "text": "Začněte první projekt",
+          "comic": {
+            "title": "Vše začíná projektem v Plane",
+            "description": "Projektem může být roadmapa produktu, marketingová kampaň nebo uvedení nového auta."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Žádné projekty",
+        "description": "Pro vytváření pracovních položek potřebujete vytvořit nebo být součástí projektu.",
+        "primary_button": {
+          "text": "Začněte první projekt",
+          "comic": {
+            "title": "Vše začíná projektem v Plane",
+            "description": "Projektem může být roadmapa produktu, marketingová kampaň nebo uvedení nového auta."
+          }
+        }
+      },
+      "filter": {
+        "title": "Žádné odpovídající projekty",
+        "description": "Nenalezeny projekty odpovídající kritériím.\n Vytvořte nový."
+      },
+      "search": {
+        "description": "Nenalezeny projekty odpovídající kritériím.\nVytvořte nový."
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Přidat pohled",
+    "empty_state": {
+      "all-issues": {
+        "title": "Žádné pracovní položky v projektu",
+        "description": "Vytvořte první položku a sledujte svůj pokrok!",
+        "primary_button": {
+          "text": "Vytvořit pracovní položku"
+        }
+      },
+      "assigned": {
+        "title": "Žádné přiřazené položky",
+        "description": "Zde uvidíte položky přiřazené vám.",
+        "primary_button": {
+          "text": "Vytvořit pracovní položku"
+        }
+      },
+      "created": {
+        "title": "Žádné vytvořené položky",
+        "description": "Zde jsou položky, které jste vytvořili.",
+        "primary_button": {
+          "text": "Vytvořit pracovní položku"
+        }
+      },
+      "subscribed": {
+        "title": "Žádné odebírané položky",
+        "description": "Přihlaste se k odběru položek, které vás zajímají."
+      },
+      "custom-view": {
+        "title": "Žádné odpovídající položky",
+        "description": "Zobrazí se položky odpovídající filtru."
+      }
+    },
+    "delete_view": {
+      "title": "Opravdu chcete smazat tento pohled?",
+      "content": "Pokud potvrdíte, všechny možnosti řazení, filtrování a zobrazení + rozvržení, které jste vybrali pro tento pohled, budou trvale odstraněny a nelze je obnovit."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Vytvořit koncept položky",
+    "empty_state": {
+      "title": "Rozpracované položky a komentáře se zde zobrazí.",
+      "description": "Začněte vytvářet položku a nechte ji rozpracovanou.",
+      "primary_button": {
+        "text": "Vytvořit první koncept"
+      }
+    },
+    "delete_modal": {
+      "title": "Smazat koncept",
+      "description": "Opravdu chcete smazat tento koncept? Akce je nevratná."
+    },
+    "toasts": {
+      "created": {
+        "success": "Koncept vytvořen",
+        "error": "Vytvoření se nezdařilo"
+      },
+      "deleted": {
+        "success": "Koncept smazán"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Napište poznámku, dokument nebo celou znalostní bázi. Získejte pomoc od Galilea, AI asistenta Plane, abyste začali",
+        "description": "Stránky jsou prostor pro myšlenky v Plane. Zaznamenejte si poznámky z jednání, snadno je naformátujte, vložte pracovní položky, uspořádejte je pomocí knihovny komponent a udržujte je všechny v kontextu vašeho projektu. Abychom usnadnili práci s jakýmkoli dokumentem, vyvolejte Galilea, AI Plane, pomocí zkratky nebo kliknutím na tlačítko.",
+        "primary_button": {
+          "text": "Vytvořit svou první stránku"
+        }
+      },
+      "private": {
+        "title": "Zatím žádné soukromé stránky",
+        "description": "Udržujte své soukromé myšlenky zde. Až budete připraveni sdílet, tým je jen na kliknutí daleko.",
+        "primary_button": {
+          "text": "Vytvořit svou první stránku"
+        }
+      },
+      "public": {
+        "title": "Zatím žádné stránky pracovního prostoru",
+        "description": "Zde uvidíte stránky sdílené se všemi ve vašem pracovním prostoru.",
+        "primary_button": {
+          "text": "Vytvořit svou první stránku"
+        }
+      },
+      "archived": {
+        "title": "Zatím žádné archivované stránky",
+        "description": "Archivujte stránky, které nejsou na vašem radaru. Zde k nim získáte přístup, když je potřebujete."
+      },
+      "shared": {
+        "title": "Zatím žádné sdílené stránky",
+        "description": "Stránky, které s vámi ostatní sdíleli, se objeví zde."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Žádné aktivní cykly",
+        "description": "Cyklus vašich projektů, který zahrnuje jakékoli období, které zahrnuje dnešní datum ve svém rozsahu. Najděte pokrok a detaily všech vašich aktivních cyklů zde."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Importovat členy z CSV",
+      "description": "Nahrajte CSV se sloupci: Email, Display Name, First Name, Last Name, Role (5, 15 nebo 20)",
+      "dropzone": {
+        "active": "Přetáhněte CSV soubor sem",
+        "inactive": "Přetáhněte nebo klikněte pro nahrání",
+        "file_type": "Podporovány jsou pouze soubory .csv"
+      },
+      "buttons": {
+        "cancel": "Zrušit",
+        "import": "Importovat",
+        "try_again": "Zkusit znovu",
+        "close": "Zavřít",
+        "done": "Hotovo"
+      },
+      "progress": {
+        "uploading": "Nahrávání...",
+        "importing": "Importování..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Import selhal",
+          "complete": "Import dokončen"
+        },
+        "message": {
+          "seat_limit": "Nelze importovat členy kvůli omezení počtu míst.",
+          "success": "Úspěšně přidáno {count} člen{plural} do pracovního prostoru.",
+          "no_imports": "Ze souboru CSV nebyli importováni žádní členové."
+        },
+        "stats": {
+          "successful": "Úspěšné",
+          "failed": "Neúspěšné"
+        },
+        "download_errors": "Stáhnout chyby"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Neplatný soubor",
+          "message": "Podporovány jsou pouze CSV soubory."
+        },
+        "import_failed": {
+          "title": "Import selhal",
+          "message": "Něco se pokazilo."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/accessibility.json b/packages/i18n/src/locales/de/accessibility.json
new file mode 100644
index 0000000..9e4eeeb
--- /dev/null
+++ b/packages/i18n/src/locales/de/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Arbeitsbereich-Logo",
+      "open_workspace_switcher": "Arbeitsbereich-Umschalter öffnen",
+      "open_user_menu": "Benutzermenü öffnen",
+      "open_command_palette": "Befehlspalette öffnen",
+      "open_extended_sidebar": "Erweiterte Seitenleiste öffnen",
+      "close_extended_sidebar": "Erweiterte Seitenleiste schließen",
+      "create_favorites_folder": "Favoriten-Ordner erstellen",
+      "open_folder": "Ordner öffnen",
+      "close_folder": "Ordner schließen",
+      "open_favorites_menu": "Favoriten-Menü öffnen",
+      "close_favorites_menu": "Favoriten-Menü schließen",
+      "enter_folder_name": "Ordnername eingeben",
+      "create_new_project": "Neues Projekt erstellen",
+      "open_projects_menu": "Projekte-Menü öffnen",
+      "close_projects_menu": "Projekte-Menü schließen",
+      "toggle_quick_actions_menu": "Schnellaktionen-Menü umschalten",
+      "open_project_menu": "Projekt-Menü öffnen",
+      "close_project_menu": "Projekt-Menü schließen",
+      "collapse_sidebar": "Seitenleiste einklappen",
+      "expand_sidebar": "Seitenleiste ausklappen",
+      "edition_badge": "Modal für kostenpflichtige Pläne öffnen"
+    },
+    "auth_forms": {
+      "clear_email": "E-Mail löschen",
+      "show_password": "Passwort anzeigen",
+      "hide_password": "Passwort verbergen",
+      "close_alert": "Warnung schließen",
+      "close_popover": "Popover schließen"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/auth.json b/packages/i18n/src/locales/de/auth.json
new file mode 100644
index 0000000..cce6c71
--- /dev/null
+++ b/packages/i18n/src/locales/de/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identität",
+    "description": "Konfigurieren Sie Ihre Domain, um auf Sicherheitsfunktionen einschließlich Single Sign-On zuzugreifen.",
+    "domain_management": {
+      "header": "Domain-Verwaltung",
+      "verified_domains": {
+        "header": "Verifizierte Domains",
+        "description": "Überprüfen Sie den Besitz einer E-Mail-Domain, um Single Sign-On zu aktivieren.",
+        "button_text": "Domain hinzufügen",
+        "list": {
+          "domain_name": "Domainname",
+          "status": "Status",
+          "status_verified": "Verifiziert",
+          "status_failed": "Fehlgeschlagen",
+          "status_pending": "Ausstehend"
+        },
+        "add_domain": {
+          "title": "Domain hinzufügen",
+          "description": "Fügen Sie Ihre Domain hinzu, um SSO zu konfigurieren und zu verifizieren.",
+          "form": {
+            "domain_label": "Domain",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Domain ist erforderlich",
+            "domain_invalid": "Geben Sie einen gültigen Domainnamen ein (z. B. plane.so)"
+          },
+          "primary_button_text": "Domain hinzufügen",
+          "primary_button_loading_text": "Hinzufügen",
+          "toast": {
+            "success_title": "Erfolg!",
+            "success_message": "Domain wurde erfolgreich hinzugefügt. Bitte verifizieren Sie sie, indem Sie den DNS TXT-Eintrag hinzufügen.",
+            "error_message": "Domain konnte nicht hinzugefügt werden. Bitte versuchen Sie es erneut."
+          }
+        },
+        "verify_domain": {
+          "title": "Verifizieren Sie Ihre Domain",
+          "description": "Befolgen Sie diese Schritte, um Ihre Domain zu verifizieren.",
+          "instructions": {
+            "label": "Anweisungen",
+            "step_1": "Gehen Sie zu den DNS-Einstellungen für Ihren Domain-Host.",
+            "step_2": {
+              "part_1": "Erstellen Sie einen",
+              "part_2": "TXT-Eintrag",
+              "part_3": "und fügen Sie den vollständigen Eintragswert ein, der unten bereitgestellt wird."
+            },
+            "step_3": "Diese Aktualisierung dauert normalerweise einige Minuten, kann aber bis zu 72 Stunden dauern.",
+            "step_4": "Klicken Sie auf \"Domain verifizieren\", um zu bestätigen, sobald Ihr DNS-Eintrag aktualisiert wurde."
+          },
+          "verification_code_label": "Wert des TXT-Eintrags",
+          "verification_code_description": "Fügen Sie diesen Eintrag zu Ihren DNS-Einstellungen hinzu",
+          "domain_label": "Domain",
+          "primary_button_text": "Domain verifizieren",
+          "primary_button_loading_text": "Verifizieren",
+          "secondary_button_text": "Ich mache es später",
+          "toast": {
+            "success_title": "Erfolg!",
+            "success_message": "Domain wurde erfolgreich verifiziert.",
+            "error_message": "Domain konnte nicht verifiziert werden. Bitte versuchen Sie es erneut."
+          }
+        },
+        "delete_domain": {
+          "title": "Domain löschen",
+          "description": {
+            "prefix": "Möchten Sie wirklich",
+            "suffix": " löschen? Diese Aktion kann nicht rückgängig gemacht werden."
+          },
+          "primary_button_text": "Löschen",
+          "primary_button_loading_text": "Löschen",
+          "secondary_button_text": "Abbrechen",
+          "toast": {
+            "success_title": "Erfolg!",
+            "success_message": "Domain wurde erfolgreich gelöscht.",
+            "error_message": "Domain konnte nicht gelöscht werden. Bitte versuchen Sie es erneut."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Single Sign-On",
+      "disabled_message": "Fügen Sie eine verifizierte Domain hinzu, um SSO zu konfigurieren",
+      "configure": {
+        "create": "Konfigurieren",
+        "update": "Bearbeiten"
+      },
+      "switch_alert_modal": {
+        "title": "SSO-Methode auf {newProviderShortName} umstellen?",
+        "content": "Sie sind dabei, {newProviderLongName} ({newProviderShortName}) zu aktivieren. Diese Aktion deaktiviert automatisch {activeProviderLongName} ({activeProviderShortName}). Benutzer, die sich über {activeProviderShortName} anmelden möchten, können nicht mehr auf die Plattform zugreifen, bis sie zur neuen Methode wechseln. Möchten Sie wirklich fortfahren?",
+        "primary_button_text": "Umstellen",
+        "primary_button_text_loading": "Umstellen",
+        "secondary_button_text": "Abbrechen"
+      },
+      "form_section": {
+        "title": "Von IdP bereitgestellte Details für {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Speichern",
+        "save_changes": "Änderungen speichern",
+        "configure_only": "Nur konfigurieren",
+        "configure_and_enable": "Konfigurieren und aktivieren",
+        "default": "Speichern"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} bereitgestellte Details für Ihren IdP",
+        "button_text": "Einrichtungsdetails abrufen"
+      },
+      "saml": {
+        "header": "SAML aktivieren",
+        "description": "Konfigurieren Sie Ihren SAML-Identitätsanbieter, um Single Sign-On zu aktivieren.",
+        "configure": {
+          "title": "SAML aktivieren",
+          "description": "Überprüfen Sie den Besitz einer E-Mail-Domain, um auf Sicherheitsfunktionen einschließlich Single Sign-On zuzugreifen.",
+          "toast": {
+            "success_title": "Erfolg!",
+            "create_success_message": "SAML-Anbieter wurde erfolgreich erstellt.",
+            "update_success_message": "SAML-Anbieter wurde erfolgreich aktualisiert.",
+            "error_title": "Fehler!",
+            "error_message": "SAML-Anbieter konnte nicht gespeichert werden. Bitte versuchen Sie es erneut."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web-Details",
+            "entity_id": {
+              "label": "Entity ID | Audience | Metadaten-Informationen",
+              "description": "Wir generieren diesen Teil der Metadaten, der diese Plane-App als autorisierten Dienst auf Ihrem IdP identifiziert."
+            },
+            "callback_url": {
+              "label": "URL für Single Sign-On",
+              "description": "Wir generieren dies für Sie. Fügen Sie dies in das Feld für die Anmelde-Weiterleitungs-URL Ihres IdP ein."
+            },
+            "logout_url": {
+              "label": "URL für Single Logout",
+              "description": "Wir generieren dies für Sie. Fügen Sie dies in das Feld für die Single-Logout-Weiterleitungs-URL Ihres IdP ein."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobile Details",
+            "entity_id": {
+              "label": "Entity ID | Audience | Metadaten-Informationen",
+              "description": "Wir generieren diesen Teil der Metadaten, der diese Plane-App als autorisierten Dienst auf Ihrem IdP identifiziert."
+            },
+            "callback_url": {
+              "label": "URL für Single Sign-On",
+              "description": "Wir generieren dies für Sie. Fügen Sie dies in das Feld für die Anmelde-Weiterleitungs-URL Ihres IdP ein."
+            },
+            "logout_url": {
+              "label": "URL für Single Logout",
+              "description": "Wir generieren dies für Sie. Fügen Sie dies in das Feld für die Abmelde-Weiterleitungs-URL Ihres IdP ein."
+            }
+          },
+          "mapping_table": {
+            "header": "Zuordnungsdetails",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "OIDC aktivieren",
+        "description": "Konfigurieren Sie Ihren OIDC-Identitätsanbieter, um Single Sign-On zu aktivieren.",
+        "configure": {
+          "title": "OIDC aktivieren",
+          "description": "Überprüfen Sie den Besitz einer E-Mail-Domain, um auf Sicherheitsfunktionen einschließlich Single Sign-On zuzugreifen.",
+          "toast": {
+            "success_title": "Erfolg!",
+            "create_success_message": "OIDC-Anbieter wurde erfolgreich erstellt.",
+            "update_success_message": "OIDC-Anbieter wurde erfolgreich aktualisiert.",
+            "error_title": "Fehler!",
+            "error_message": "OIDC-Anbieter konnte nicht gespeichert werden. Bitte versuchen Sie es erneut."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web-Details",
+            "origin_url": {
+              "label": "Origin-URL",
+              "description": "Wir generieren dies für diese Plane-App. Fügen Sie dies als vertrauenswürdigen Ursprung in das entsprechende Feld Ihres IdP ein."
+            },
+            "callback_url": {
+              "label": "Weiterleitungs-URL",
+              "description": "Wir generieren dies für Sie. Fügen Sie dies in das Feld für die Anmelde-Weiterleitungs-URL Ihres IdP ein."
+            },
+            "logout_url": {
+              "label": "Abmelde-URL",
+              "description": "Wir generieren dies für Sie. Fügen Sie dies in das Feld für die Abmelde-Weiterleitungs-URL Ihres IdP ein."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobile Details",
+            "origin_url": {
+              "label": "Origin-URL",
+              "description": "Wir generieren dies für diese Plane-App. Fügen Sie dies als vertrauenswürdigen Ursprung in das entsprechende Feld Ihres IdP ein."
+            },
+            "callback_url": {
+              "label": "Weiterleitungs-URL",
+              "description": "Wir generieren dies für Sie. Fügen Sie dies in das Feld für die Anmelde-Weiterleitungs-URL Ihres IdP ein."
+            },
+            "logout_url": {
+              "label": "Abmelde-URL",
+              "description": "Wir generieren dies für Sie. Fügen Sie dies in das Feld für die Abmelde-Weiterleitungs-URL Ihres IdP ein."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "E-Mail",
+        "placeholder": "name@unternehmen.de",
+        "errors": {
+          "required": "E-Mail ist erforderlich",
+          "invalid": "E-Mail ist ungültig"
+        }
+      },
+      "password": {
+        "label": "Passwort",
+        "set_password": "Passwort festlegen",
+        "placeholder": "Passwort eingeben",
+        "confirm_password": {
+          "label": "Passwort bestätigen",
+          "placeholder": "Passwort bestätigen"
+        },
+        "current_password": {
+          "label": "Aktuelles Passwort"
+        },
+        "new_password": {
+          "label": "Neues Passwort",
+          "placeholder": "Neues Passwort eingeben"
+        },
+        "change_password": {
+          "label": {
+            "default": "Passwort ändern",
+            "submitting": "Passwort wird geändert"
+          }
+        },
+        "errors": {
+          "match": "Passwörter stimmen nicht überein",
+          "empty": "Bitte geben Sie Ihr Passwort ein",
+          "length": "Das Passwort sollte länger als 8 Zeichen sein",
+          "strength": {
+            "weak": "Das Passwort ist schwach",
+            "strong": "Das Passwort ist stark"
+          }
+        },
+        "submit": "Passwort festlegen",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Erfolg!",
+              "message": "Das Passwort wurde erfolgreich geändert."
+            },
+            "error": {
+              "title": "Fehler!",
+              "message": "Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Einmaliger Code",
+        "placeholder": "123456",
+        "paste_code": "Fügen Sie den an Ihre E-Mail gesendeten Code ein",
+        "requesting_new_code": "Neuen Code anfordern",
+        "sending_code": "Code wird gesendet"
+      },
+      "already_have_an_account": "Haben Sie bereits ein Konto?",
+      "login": "Anmelden",
+      "create_account": "Konto erstellen",
+      "new_to_plane": "Neu bei Plane?",
+      "back_to_sign_in": "Zurück zur Anmeldung",
+      "resend_in": "Erneut senden in {seconds} Sekunden",
+      "sign_in_with_unique_code": "Mit einmaligem Code anmelden",
+      "forgot_password": "Passwort vergessen?",
+      "username": {
+        "label": "Benutzername",
+        "placeholder": "Geben Sie Ihren Benutzernamen ein"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Erstellen Sie ein Konto und beginnen Sie, Ihre Arbeit mit Ihrem Team zu verwalten.",
+        "step": {
+          "email": {
+            "header": "Registrierung",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Registrierung",
+            "sub_header": "Registrieren Sie sich mit einer Kombination aus E-Mail und Passwort."
+          },
+          "unique_code": {
+            "header": "Registrierung",
+            "sub_header": "Registrieren Sie sich mit einem einmaligen Code, der an die oben angegebene E-Mail-Adresse gesendet wurde."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Versuchen Sie, ein starkes Passwort zu wählen, um fortzufahren"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Melden Sie sich an und beginnen Sie, Ihre Arbeit mit Ihrem Team zu verwalten.",
+        "step": {
+          "email": {
+            "header": "Anmelden oder registrieren",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Anmelden oder registrieren",
+            "sub_header": "Verwenden Sie Ihre E-Mail-Passwort-Kombination, um sich anzumelden."
+          },
+          "unique_code": {
+            "header": "Anmelden oder registrieren",
+            "sub_header": "Melden Sie sich mit einem einmaligen Code an, der an die oben angegebene E-Mail-Adresse gesendet wurde."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Passwort zurücksetzen",
+      "description": "Geben Sie die verifizierte E-Mail-Adresse Ihres Benutzerkontos ein, und wir senden Ihnen einen Link zum Zurücksetzen des Passworts.",
+      "email_sent": "Wir haben Ihnen einen Link zum Zurücksetzen an Ihre E-Mail-Adresse gesendet.",
+      "send_reset_link": "Link zum Zurücksetzen senden",
+      "errors": {
+        "smtp_not_enabled": "Wir sehen, dass Ihr Administrator SMTP nicht aktiviert hat; wir können keinen Link zum Zurücksetzen des Passworts senden."
+      },
+      "toast": {
+        "success": {
+          "title": "E-Mail gesendet",
+          "message": "Überprüfen Sie Ihren Posteingang auf den Link zum Zurücksetzen des Passworts. Sollte er innerhalb einiger Minuten nicht ankommen, sehen Sie bitte in Ihrem Spam-Ordner nach."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Neues Passwort festlegen",
+      "description": "Sichern Sie Ihr Konto mit einem starken Passwort"
+    },
+    "set_password": {
+      "title": "Sichern Sie Ihr Konto",
+      "description": "Das Festlegen eines Passworts hilft Ihnen, sich sicher anzumelden"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Fehler!",
+          "message": "Abmelden fehlgeschlagen. Bitte versuchen Sie es erneut."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Mit {ldapProviderName} fortfahren",
+        "sub_header": "Geben Sie Ihre {ldapProviderName}-Anmeldedaten ein"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/automation.json b/packages/i18n/src/locales/de/automation.json
new file mode 100644
index 0000000..66379d4
--- /dev/null
+++ b/packages/i18n/src/locales/de/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Benutzerdefinierte Automatisierungen",
+      "create_automation": "Automatisierung erstellen"
+    },
+    "scope": {
+      "label": "Bereich",
+      "run_on": "Ausführen auf"
+    },
+    "trigger": {
+      "label": "Auslöser",
+      "add_trigger": "Auslöser hinzufügen",
+      "sidebar_header": "Auslöser-Konfiguration",
+      "input_label": "Was ist der Auslöser für diese Automatisierung?",
+      "input_placeholder": "Option auswählen",
+      "section_plane_events": "Plane-Ereignisse",
+      "section_time_based": "Zeitbasiert",
+      "fixed_schedule": "Fester Zeitplan",
+      "schedule": {
+        "frequency": "Häufigkeit",
+        "select_day": "Tag auswählen",
+        "day_of_month": "Tag des Monats",
+        "monthly_every": "Jeden",
+        "monthly_day_aria": "Tag {day}",
+        "time": "Uhrzeit",
+        "hour": "Stunde",
+        "minute": "Minute",
+        "hour_suffix": "Std.",
+        "minute_suffix": "Min.",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Zeitzone",
+        "timezone_placeholder": "Zeitzone auswählen",
+        "frequency_daily": "Täglich",
+        "frequency_weekly": "Wöchentlich",
+        "frequency_monthly": "Monatlich",
+        "on": "Am",
+        "validation_weekly_day_required": "Wähle mindestens einen Wochentag aus.",
+        "validation_monthly_date_required": "Wähle einen Tag des Monats aus.",
+        "main_content_schedule_summary_daily": "Jeden Tag um {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Jede Woche am {days} um {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Jeden Monat am {day}. um {time} ({timezone}).",
+        "schedule_mode": "Zeitplanmodus",
+        "schedule_mode_fixed": "Fest",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Cron-Ausdruck eingeben",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Ungültiger Cron-Ausdruck.",
+        "cron_preview": "Dieser Cron-Ausdruck führt aus: „{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Zurück",
+        "next": "Aktion hinzufügen"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Sie können den Auslösertyp nach der Erstellung nicht mehr ändern"
+      }
+    },
+    "condition": {
+      "label": "Vorausgesetzt",
+      "add_condition": "Bedingung hinzufügen",
+      "adding_condition": "Bedingung hinzufügen"
+    },
+    "action": {
+      "label": "Aktion",
+      "add_action": "Aktion hinzufügen",
+      "sidebar_header": "Aktionen",
+      "input_label": "Was macht die Automatisierung?",
+      "input_placeholder": "Option auswählen",
+      "handler_name": {
+        "add_comment": "Kommentar hinzufügen",
+        "change_property": "Eigenschaft ändern",
+        "run_script": "Skript ausführen"
+      },
+      "configuration": {
+        "label": "Konfiguration",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Eigenschaft auswählen",
+            "change_type": "Auswählen",
+            "property_value_select": "{count, plural, one{Wert auswählen} other{Werte auswählen}}",
+            "property_value_select_date": "Datum auswählen"
+          },
+          "validation": {
+            "property_name_required": "Eigenschaftsname ist erforderlich",
+            "change_type_required": "Änderungstyp ist erforderlich",
+            "property_value_required": "Eigenschaftswert ist erforderlich"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Kommentar hinzufügen"
+      },
+      "run_script_block": {
+        "title": "Skript ausführen"
+      },
+      "change_property_block": {
+        "title": "Eigenschaft ändern"
+      },
+      "validation": {
+        "delete_only_action": "Deaktivieren Sie die Automatisierung, bevor Sie ihre einzige Aktion löschen."
+      }
+    },
+    "conjunctions": {
+      "and": "Und",
+      "or": "Oder",
+      "if": "Wenn",
+      "then": "Dann"
+    },
+    "enable": {
+      "alert": "Klicken Sie auf 'Aktivieren', wenn Ihre Automatisierung vollständig ist. Nach der Aktivierung ist die Automatisierung bereit zur Ausführung.",
+      "validation": {
+        "required": "Automatisierung muss einen Auslöser und mindestens eine Aktion haben, um aktiviert zu werden."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Automatisierung muss vor dem Löschen deaktiviert werden."
+      }
+    },
+    "table": {
+      "title": "Automatisierungstitel",
+      "scope": "Bereich",
+      "projects": "Projekte",
+      "last_run_on": "Zuletzt ausgeführt am",
+      "created_on": "Erstellt am",
+      "last_updated_on": "Zuletzt aktualisiert am",
+      "last_run_status": "Status der letzten Ausführung",
+      "average_duration": "Durchschnittliche Dauer",
+      "owner": "Besitzer",
+      "executions": "Ausführungen"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Automatisierung erstellen",
+        "update": "Automatisierung aktualisieren"
+      },
+      "title": {
+        "placeholder": "Benennen Sie Ihre Automatisierung.",
+        "required_error": "Titel ist erforderlich"
+      },
+      "description": {
+        "placeholder": "Beschreiben Sie Ihre Automatisierung."
+      },
+      "submit_button": {
+        "create": "Automatisierung erstellen",
+        "update": "Automatisierung aktualisieren"
+      }
+    },
+    "delete_modal": {
+      "heading": "Automatisierung löschen"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Fehler anzeigen",
+        "all": "Alle",
+        "only_activity": "Nur Aktivität",
+        "only_run_history": "Nur Ausführungsverlauf"
+      },
+      "run_history": {
+        "initiator": "Initiator"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Erfolg!",
+          "message": "Automatisierung erfolgreich erstellt."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Erstellung der Automatisierung fehlgeschlagen."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Erfolg!",
+          "message": "Automatisierung erfolgreich aktualisiert."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Aktualisierung der Automatisierung fehlgeschlagen."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Erfolg!",
+          "message": "Automatisierung erfolgreich aktiviert."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Aktivierung der Automatisierung fehlgeschlagen."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Erfolg!",
+          "message": "Automatisierung erfolgreich deaktiviert."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Deaktivierung der Automatisierung fehlgeschlagen."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automatisierung gelöscht",
+          "message": "{name}, die Automatisierung, wurde aus Ihrem Projekt gelöscht."
+        },
+        "error": {
+          "title": "Wir konnten diese Automatisierung diesmal nicht löschen.",
+          "message": "Versuchen Sie es erneut oder kommen Sie später darauf zurück. Wenn Sie sie dann immer noch nicht löschen können, kontaktieren Sie uns."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Fehler!",
+            "message": "Erstellung der Aktion fehlgeschlagen. Bitte versuchen Sie es erneut!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Fehler!",
+            "message": "Aktualisierung der Aktion fehlgeschlagen. Bitte versuchen Sie es erneut!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Es gibt noch keine Automatisierungen anzuzeigen.",
+        "description": "Automatisierungen helfen Ihnen, sich wiederholende Aufgaben zu eliminieren, indem Sie Auslöser, Bedingungen und Aktionen festlegen. Erstellen Sie eine, um Zeit zu sparen und die Arbeit mühelos am Laufen zu halten."
+      },
+      "upgrade": {
+        "title": "Automatisierungen",
+        "description": "Automatisierungen sind eine Möglichkeit, Aufgaben in Ihrem Projekt zu automatisieren.",
+        "sub_description": "Gewinnen Sie 80% Ihrer Verwaltungszeit zurück, wenn Sie Automatisierungen verwenden."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Projekte auswählen, für die diese Automatisierung ausgeführt werden soll",
+        "all_projects": {
+          "label": "Alle Projekte",
+          "description": "Automatisierung wird für alle Projekte im Arbeitsbereich ausgeführt."
+        },
+        "select_projects": {
+          "label": "Projekte auswählen",
+          "description": "Automatisierung wird für ausgewählte Projekte im Arbeitsbereich ausgeführt.",
+          "placeholder": "Projekte auswählen"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automatisierungen",
+        "title": "Automatisierungen",
+        "description": "Standardisieren Sie Prozesse in Ihrem Arbeitsbereich mit globalen Automatisierungen."
+      },
+      "table": {
+        "scope": {
+          "global": "Global",
+          "project": {
+            "label": "Projekt",
+            "multiple": "Mehrere",
+            "all": "Alle"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/common.json b/packages/i18n/src/locales/de/common.json
new file mode 100644
index 0000000..adbb588
--- /dev/null
+++ b/packages/i18n/src/locales/de/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Wir arbeiten daran. Wenn Sie sofortige Hilfe benötigen,",
+    "reach_out_to_us": "kontaktieren Sie uns",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Andernfalls versuchen Sie gelegentlich die Seite zu aktualisieren oder besuchen Sie unsere",
+    "status_page": "Statusseite"
+  },
+  "submit": "Senden",
+  "cancel": "Abbrechen",
+  "loading": "Wird geladen",
+  "error": "Fehler",
+  "success": "Erfolg",
+  "warning": "Warnung",
+  "info": "Information",
+  "close": "Schließen",
+  "yes": "Ja",
+  "no": "Nein",
+  "ok": "OK",
+  "name": "Name",
+  "unknown_user": "Unbekannter Benutzer",
+  "description": "Beschreibung",
+  "search": "Suchen",
+  "add_member": "Mitglied hinzufügen",
+  "adding_members": "Mitglieder werden hinzugefügt",
+  "remove_member": "Mitglied entfernen",
+  "add_members": "Mitglieder hinzufügen",
+  "adding_member": "Mitglieder werden hinzugefügt",
+  "remove_members": "Mitglieder entfernen",
+  "add": "Hinzufügen",
+  "adding": "Wird hinzugefügt",
+  "remove": "Entfernen",
+  "add_new": "Neu hinzufügen",
+  "remove_selected": "Ausgewählte entfernen",
+  "first_name": "Vorname",
+  "last_name": "Nachname",
+  "email": "E-Mail",
+  "display_name": "Anzeigename",
+  "role": "Rolle",
+  "timezone": "Zeitzone",
+  "avatar": "Profilbild",
+  "cover_image": "Titelbild",
+  "password": "Passwort",
+  "change_cover": "Titelbild ändern",
+  "language": "Sprache",
+  "saving": "Wird gespeichert",
+  "save_changes": "Änderungen speichern",
+  "deactivate_account": "Konto deaktivieren",
+  "deactivate_account_description": "Wenn Sie Ihr Konto deaktivieren, werden alle damit verbundenen Daten und Ressourcen dauerhaft gelöscht und können nicht wiederhergestellt werden.",
+  "profile_settings": "Profileinstellungen",
+  "your_account": "Ihr Konto",
+  "security": "Sicherheit",
+  "activity": "Aktivität",
+  "activity_empty_state": {
+    "no_activity": "Noch keine Aktivität",
+    "no_transitions": "Noch keine Übergänge",
+    "no_comments": "Noch keine Kommentare",
+    "no_worklogs": "Noch keine Arbeitszeiten",
+    "no_history": "Noch kein Verlauf"
+  },
+  "preferences": "Einstellungen",
+  "language_and_time": "Sprache und Zeit",
+  "notifications": "Benachrichtigungen",
+  "workspaces": "Arbeitsbereiche",
+  "create_workspace": "Arbeitsbereich erstellen",
+  "invitations": "Einladungen",
+  "summary": "Zusammenfassung",
+  "assigned": "Zugewiesen",
+  "created": "Erstellt",
+  "subscribed": "Abonniert",
+  "you_do_not_have_the_permission_to_access_this_page": "Sie haben keine Berechtigung zum Zugriff auf diese Seite.",
+  "something_went_wrong_please_try_again": "Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut.",
+  "load_more": "Mehr laden",
+  "select_or_customize_your_interface_color_scheme": "Wählen Sie Ihr Interface-Farbschema aus oder passen Sie es an.",
+  "timezone_setting": "Aktuelle Zeitzoneneinstellung.",
+  "language_setting": "Wählen Sie die in der Benutzeroberfläche verwendete Sprache.",
+  "settings_moved_to_preferences": "Zeitzonen- und Spracheinstellungen wurden in die Einstellungen verschoben.",
+  "go_to_preferences": "Zu den Einstellungen",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Wählen Sie den Cursorbewegungsstil, der sich für Sie richtig anfühlt.",
+  "theme": "Thema",
+  "smooth_cursor": "Sanfter Cursor",
+  "system_preference": "Systemeinstellung",
+  "light": "Hell",
+  "dark": "Dunkel",
+  "light_contrast": "Heller hoher Kontrast",
+  "dark_contrast": "Dunkler hoher Kontrast",
+  "custom": "Benutzerdefiniertes Theme",
+  "select_your_theme": "Wählen Sie ein Theme",
+  "customize_your_theme": "Passen Sie Ihr Theme an",
+  "background_color": "Hintergrundfarbe",
+  "text_color": "Textfarbe",
+  "primary_color": "Primärfarbe (Theme)",
+  "sidebar_background_color": "Seitenleisten-Hintergrundfarbe",
+  "sidebar_text_color": "Seitenleisten-Textfarbe",
+  "set_theme": "Theme festlegen",
+  "enter_a_valid_hex_code_of_6_characters": "Geben Sie einen gültigen 6-stelligen Hex-Code ein",
+  "background_color_is_required": "Die Hintergrundfarbe ist erforderlich",
+  "text_color_is_required": "Die Textfarbe ist erforderlich",
+  "primary_color_is_required": "Die Primärfarbe ist erforderlich",
+  "sidebar_background_color_is_required": "Die Hintergrundfarbe der Seitenleiste ist erforderlich",
+  "sidebar_text_color_is_required": "Die Textfarbe der Seitenleiste ist erforderlich",
+  "updating_theme": "Theme wird aktualisiert",
+  "theme_updated_successfully": "Theme erfolgreich aktualisiert",
+  "failed_to_update_the_theme": "Aktualisierung des Themes fehlgeschlagen",
+  "email_notifications": "E-Mail-Benachrichtigungen",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Bleiben Sie informiert über Arbeitselemente, die Sie abonniert haben. Aktivieren Sie diese Option, um Benachrichtigungen zu erhalten.",
+  "email_notification_setting_updated_successfully": "E-Mail-Benachrichtigungseinstellung erfolgreich aktualisiert",
+  "failed_to_update_email_notification_setting": "Aktualisierung der E-Mail-Benachrichtigungseinstellung fehlgeschlagen",
+  "notify_me_when": "Benachrichtige mich, wenn",
+  "property_changes": "Eigenschaften ändern",
+  "property_changes_description": "Benachrichtigen Sie mich, wenn sich Eigenschaften von Arbeitselementen wie Zuweisung, Priorität, Schätzungen oder Ähnliches ändern.",
+  "state_change": "Statusänderung",
+  "state_change_description": "Benachrichtigen Sie mich, wenn ein Arbeitselement in einen anderen Status wechselt.",
+  "issue_completed": "Arbeitselement abgeschlossen",
+  "issue_completed_description": "Benachrichtigen Sie mich nur, wenn ein Arbeitselement abgeschlossen ist.",
+  "comments": "Kommentare",
+  "comments_description": "Benachrichtigen Sie mich, wenn jemand einen Kommentar zu einem Arbeitselement hinzufügt.",
+  "mentions": "Erwähnungen",
+  "mentions_description": "Benachrichtigen Sie mich nur, wenn mich jemand in einem Kommentar oder in einer Beschreibung erwähnt.",
+  "old_password": "Altes Passwort",
+  "general_settings": "Allgemeine Einstellungen",
+  "sign_out": "Abmelden",
+  "signing_out": "Wird abgemeldet",
+  "active_cycles": "Aktive Zyklen",
+  "active_cycles_description": "Verfolgen Sie Zyklen in allen Projekten, überwachen Sie hochpriorisierte Arbeitselemente und konzentrieren Sie sich auf Zyklen, die Aufmerksamkeit erfordern.",
+  "on_demand_snapshots_of_all_your_cycles": "Snapshots aller Ihrer Zyklen auf Abruf",
+  "upgrade": "Upgrade",
+  "10000_feet_view": "Überblick aus 10.000 Fuß über alle aktiven Zyklen.",
+  "10000_feet_view_description": "Verschaffen Sie sich einen Überblick über alle laufenden Zyklen in allen Projekten auf einmal, anstatt zwischen den Zyklen in jedem Projekt zu wechseln.",
+  "get_snapshot_of_each_active_cycle": "Erhalten Sie einen Snapshot jedes aktiven Zyklus.",
+  "get_snapshot_of_each_active_cycle_description": "Behalten Sie wichtige Kennzahlen für alle aktiven Zyklen im Blick, verfolgen Sie deren Fortschritt und vergleichen Sie den Umfang mit den Fristen.",
+  "compare_burndowns": "Vergleichen Sie Burndown-Charts.",
+  "compare_burndowns_description": "Überwachen Sie die Teamleistung, indem Sie sich die Burndown-Berichte jedes Zyklus ansehen.",
+  "quickly_see_make_or_break_issues": "Erkennen Sie schnell kritische Arbeitselemente.",
+  "quickly_see_make_or_break_issues_description": "Sehen Sie sich hochpriorisierte Arbeitselemente für jeden Zyklus in Bezug auf Fristen an. Alle auf einen Klick anzeigen.",
+  "zoom_into_cycles_that_need_attention": "Fokussieren Sie sich auf Zyklen, die besondere Aufmerksamkeit erfordern.",
+  "zoom_into_cycles_that_need_attention_description": "Untersuchen Sie den Status jedes Zyklus, der nicht den Erwartungen entspricht, mit nur einem Klick.",
+  "stay_ahead_of_blockers": "Erkennen Sie frühzeitig Blocker.",
+  "stay_ahead_of_blockers_description": "Identifizieren Sie projektübergreifende Probleme und erkennen Sie Abhängigkeiten zwischen Zyklen, die sonst nicht offensichtlich wären.",
+  "analytics": "Analysen",
+  "workspace_invites": "Einladungen zum Arbeitsbereich",
+  "enter_god_mode": "God-Mode betreten",
+  "workspace_logo": "Arbeitsbereichslogo",
+  "new_issue": "Neues Arbeitselement",
+  "your_work": "Ihre Arbeit",
+  "drafts": "Entwürfe",
+  "projects": "Projekte",
+  "views": "Ansichten",
+  "archives": "Archive",
+  "settings": "Einstellungen",
+  "failed_to_move_favorite": "Verschieben des Favoriten fehlgeschlagen",
+  "favorites": "Favoriten",
+  "no_favorites_yet": "Noch keine Favoriten",
+  "create_folder": "Ordner erstellen",
+  "new_folder": "Neuer Ordner",
+  "favorite_updated_successfully": "Favorit erfolgreich aktualisiert",
+  "favorite_created_successfully": "Favorit erfolgreich erstellt",
+  "folder_already_exists": "Ordner existiert bereits",
+  "folder_name_cannot_be_empty": "Der Ordnername darf nicht leer sein",
+  "something_went_wrong": "Etwas ist schiefgelaufen",
+  "failed_to_reorder_favorite": "Umsortieren des Favoriten fehlgeschlagen",
+  "favorite_removed_successfully": "Favorit erfolgreich entfernt",
+  "failed_to_create_favorite": "Erstellen des Favoriten fehlgeschlagen",
+  "failed_to_rename_favorite": "Umbenennen des Favoriten fehlgeschlagen",
+  "project_link_copied_to_clipboard": "Projektlink in die Zwischenablage kopiert",
+  "link_copied": "Link kopiert",
+  "add_project": "Projekt hinzufügen",
+  "create_project": "Projekt erstellen",
+  "failed_to_remove_project_from_favorites": "Projekt konnte nicht aus den Favoriten entfernt werden. Bitte versuchen Sie es erneut.",
+  "project_created_successfully": "Projekt erfolgreich erstellt",
+  "project_created_successfully_description": "Das Projekt wurde erfolgreich erstellt. Sie können nun Arbeitselemente hinzufügen.",
+  "project_name_already_taken": "Der Projektname ist bereits vergeben.",
+  "project_name_cannot_contain_special_characters": "Der Projektname darf keine Sonderzeichen enthalten.",
+  "project_identifier_already_taken": "Der Projekt-Identifier ist bereits vergeben.",
+  "project_cover_image_alt": "Titelbild des Projekts",
+  "name_is_required": "Name ist erforderlich",
+  "title_should_be_less_than_255_characters": "Der Titel sollte weniger als 255 Zeichen enthalten",
+  "project_name": "Projektname",
+  "project_id_must_be_at_least_1_character": "Projekt-ID muss mindestens 1 Zeichen lang sein",
+  "project_id_must_be_at_most_5_characters": "Projekt-ID darf maximal 5 Zeichen lang sein",
+  "project_id": "Projekt-ID",
+  "project_id_tooltip_content": "Hilft, Arbeitselemente im Projekt eindeutig zu identifizieren. Max. 50 Zeichen.",
+  "description_placeholder": "Beschreibung",
+  "only_alphanumeric_non_latin_characters_allowed": "Es sind nur alphanumerische und nicht-lateinische Zeichen erlaubt.",
+  "project_id_is_required": "Projekt-ID ist erforderlich",
+  "project_id_allowed_char": "Es sind nur alphanumerische und nicht-lateinische Zeichen erlaubt.",
+  "project_id_min_char": "Projekt-ID muss mindestens 1 Zeichen lang sein",
+  "project_id_max_char": "Projekt-ID darf maximal {max} Zeichen lang sein",
+  "project_description_placeholder": "Geben Sie eine Projektbeschreibung ein",
+  "select_network": "Netzwerk auswählen",
+  "lead": "Leitung",
+  "date_range": "Datumsbereich",
+  "private": "Privat",
+  "public": "Öffentlich",
+  "accessible_only_by_invite": "Nur auf Einladung zugänglich",
+  "anyone_in_the_workspace_except_guests_can_join": "Jeder im Arbeitsbereich außer Gästen kann beitreten",
+  "creating": "Wird erstellt",
+  "creating_project": "Projekt wird erstellt",
+  "adding_project_to_favorites": "Projekt wird zu Favoriten hinzugefügt",
+  "project_added_to_favorites": "Projekt zu Favoriten hinzugefügt",
+  "couldnt_add_the_project_to_favorites": "Projekt konnte nicht zu den Favoriten hinzugefügt werden. Bitte versuchen Sie es erneut.",
+  "removing_project_from_favorites": "Projekt wird aus Favoriten entfernt",
+  "project_removed_from_favorites": "Projekt aus Favoriten entfernt",
+  "couldnt_remove_the_project_from_favorites": "Projekt konnte nicht aus den Favoriten entfernt werden. Bitte versuchen Sie es erneut.",
+  "add_to_favorites": "Zu Favoriten hinzufügen",
+  "remove_from_favorites": "Aus Favoriten entfernen",
+  "publish_project": "Projekt veröffentlichen",
+  "publish": "Veröffentlichen",
+  "copy_link": "Link kopieren",
+  "leave_project": "Projekt verlassen",
+  "join_the_project_to_rearrange": "Treten Sie dem Projekt bei, um die Anordnung zu ändern",
+  "drag_to_rearrange": "Ziehen, um neu anzuordnen",
+  "congrats": "Herzlichen Glückwunsch!",
+  "open_project": "Projekt öffnen",
+  "issues": "Arbeitselemente",
+  "cycles": "Zyklen",
+  "modules": "Module",
+  "pages": "Seiten",
+  "intake": "Eingang",
+  "renew": "Erneuern",
+  "preview": "Vorschau",
+  "time_tracking": "Zeiterfassung",
+  "work_management": "Arbeitsverwaltung",
+  "projects_and_issues": "Projekte und Arbeitselemente",
+  "projects_and_issues_description": "Aktivieren oder deaktivieren Sie diese Funktionen im Projekt.",
+  "cycles_description": "Zeitlich begrenzen Sie die Arbeit pro Projekt und passen Sie den Zeitraum bei Bedarf an. Ein Zyklus kann 2 Wochen dauern, der nächste nur 1 Woche.",
+  "modules_description": "Organisieren Sie die Arbeit in Unterprojekte mit eigenen Leitern und Zuständigen.",
+  "views_description": "Speichern Sie benutzerdefinierte Sortierungen, Filter und Anzeigeoptionen oder teilen Sie sie mit Ihrem Team.",
+  "pages_description": "Erstellen und bearbeiten Sie frei formulierte Inhalte – Notizen, Dokumente, alles Mögliche.",
+  "intake_description": "Erlauben Sie Nicht-Mitgliedern, Bugs, Feedback und Vorschläge zu teilen – ohne Ihren Arbeitsablauf zu stören.",
+  "time_tracking_description": "Erfassen Sie die auf Arbeitselemente und Projekte verwendete Zeit.",
+  "work_management_description": "Verwalten Sie Ihre Arbeit und Projekte mühelos.",
+  "documentation": "Dokumentation",
+  "message_support": "Support kontaktieren",
+  "contact_sales": "Vertrieb kontaktieren",
+  "hyper_mode": "Hyper-Modus",
+  "keyboard_shortcuts": "Tastaturkürzel",
+  "whats_new": "Was ist neu?",
+  "version": "Version",
+  "we_are_having_trouble_fetching_the_updates": "Wir haben Probleme beim Abrufen der Updates.",
+  "our_changelogs": "unsere Changelogs",
+  "for_the_latest_updates": "für die neuesten Updates.",
+  "please_visit": "Bitte besuchen Sie",
+  "docs": "Dokumentation",
+  "full_changelog": "Vollständiges Änderungsprotokoll",
+  "support": "Support",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Bereitgestellt von Plane Pages",
+  "please_select_at_least_one_invitation": "Bitte wählen Sie mindestens eine Einladung aus.",
+  "please_select_at_least_one_invitation_description": "Wählen Sie mindestens eine Einladung aus, um dem Arbeitsbereich beizutreten.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Wir sehen, dass Sie jemand in einen Arbeitsbereich eingeladen hat",
+  "join_a_workspace": "Einem Arbeitsbereich beitreten",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Wir sehen, dass Sie jemand in einen Arbeitsbereich eingeladen hat",
+  "join_a_workspace_description": "Einem Arbeitsbereich beitreten",
+  "accept_and_join": "Akzeptieren und beitreten",
+  "go_home": "Zur Startseite",
+  "no_pending_invites": "Keine ausstehenden Einladungen",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Hier sehen Sie, falls Sie jemand in einen Arbeitsbereich einlädt",
+  "back_to_home": "Zurück zur Startseite",
+  "workspace_name": "arbeitsbereich-name",
+  "deactivate_your_account": "Ihr Konto deaktivieren",
+  "deactivate_your_account_description": "Nach der Deaktivierung können Ihnen keine Arbeitselemente mehr zugewiesen werden, und es fallen keine Gebühren für den Arbeitsbereich an. Um Ihr Konto wieder zu aktivieren, benötigen Sie eine Einladung zu einem Arbeitsbereich an diese E-Mail-Adresse.",
+  "deactivating": "Wird deaktiviert",
+  "confirm": "Bestätigen",
+  "confirming": "Wird bestätigt",
+  "draft_created": "Entwurf erstellt",
+  "issue_created_successfully": "Arbeitselement erfolgreich erstellt",
+  "draft_creation_failed": "Erstellung des Entwurfs fehlgeschlagen",
+  "issue_creation_failed": "Erstellung des Arbeitselements fehlgeschlagen",
+  "draft_issue": "Entwurf eines Arbeitselements",
+  "issue_updated_successfully": "Arbeitselement erfolgreich aktualisiert",
+  "issue_could_not_be_updated": "Arbeitselement konnte nicht aktualisiert werden",
+  "create_a_draft": "Einen Entwurf erstellen",
+  "save_to_drafts": "Als Entwurf speichern",
+  "save": "Speichern",
+  "update": "Aktualisieren",
+  "updating": "Wird aktualisiert",
+  "create_new_issue": "Neues Arbeitselement erstellen",
+  "editor_is_not_ready_to_discard_changes": "Der Editor ist nicht bereit, Änderungen zu verwerfen",
+  "failed_to_move_issue_to_project": "Verschieben des Arbeitselements in das Projekt fehlgeschlagen",
+  "create_more": "Mehr erstellen",
+  "add_to_project": "Zum Projekt hinzufügen",
+  "discard": "Verwerfen",
+  "duplicate_issue_found": "Doppeltes Arbeitselement gefunden",
+  "duplicate_issues_found": "Doppelte Arbeitselemente gefunden",
+  "no_matching_results": "Keine übereinstimmenden Ergebnisse",
+  "title_is_required": "Ein Titel ist erforderlich",
+  "title": "Titel",
+  "state": "Status",
+  "transition": "Übergang",
+  "history": "Verlauf",
+  "priority": "Priorität",
+  "none": "Keine",
+  "urgent": "Dringend",
+  "high": "Hoch",
+  "medium": "Mittel",
+  "low": "Niedrig",
+  "members": "Mitglieder",
+  "assignee": "Zugewiesen",
+  "assignees": "Zugewiesene",
+  "subscriber": "{count, plural, one{# Abonnent} other{# Abonnenten}}",
+  "you": "Sie",
+  "labels": "Labels",
+  "create_new_label": "Neues Label erstellen",
+  "label_name": "Label-Name",
+  "failed_to_create_label": "Label konnte nicht erstellt werden. Bitte versuchen Sie es erneut.",
+  "start_date": "Startdatum",
+  "end_date": "Enddatum",
+  "due_date": "Fälligkeitsdatum",
+  "target_date": "Zieldatum",
+  "estimate": "Schätzung",
+  "change_parent_issue": "Übergeordnetes Arbeitselement ändern",
+  "remove_parent_issue": "Übergeordnetes Arbeitselement entfernen",
+  "add_parent": "Übergeordnetes Element hinzufügen",
+  "loading_members": "Mitglieder werden geladen",
+  "view_link_copied_to_clipboard": "Ansichtslink in die Zwischenablage kopiert.",
+  "required": "Erforderlich",
+  "optional": "Optional",
+  "Cancel": "Abbrechen",
+  "edit": "Bearbeiten",
+  "archive": "Archivieren",
+  "restore": "Wiederherstellen",
+  "open_in_new_tab": "In neuem Tab öffnen",
+  "delete": "Löschen",
+  "deleting": "Wird gelöscht",
+  "make_a_copy": "Kopie erstellen",
+  "move_to_project": "In Projekt verschieben",
+  "good": "Guten",
+  "morning": "Morgen",
+  "afternoon": "Nachmittag",
+  "evening": "Abend",
+  "show_all": "Alle anzeigen",
+  "show_less": "Weniger anzeigen",
+  "no_data_yet": "Noch keine Daten",
+  "syncing": "Wird synchronisiert",
+  "add_work_item": "Arbeitselement hinzufügen",
+  "advanced_description_placeholder": "Drücken Sie '/' für Befehle",
+  "create_work_item": "Arbeitselement erstellen",
+  "attachments": "Anhänge",
+  "declining": "Wird abgelehnt",
+  "declined": "Abgelehnt",
+  "decline": "Ablehnen",
+  "unassigned": "Nicht zugewiesen",
+  "work_items": "Arbeitselemente",
+  "add_link": "Link hinzufügen",
+  "points": "Punkte",
+  "no_assignee": "Keine Zuweisung",
+  "no_assignees_yet": "Noch keine Zuweisungen",
+  "no_labels_yet": "Noch keine Labels",
+  "ideal": "Ideal",
+  "current": "Aktuell",
+  "no_matching_members": "Keine passenden Mitglieder",
+  "leaving": "Wird verlassen",
+  "removing": "Wird entfernt",
+  "leave": "Verlassen",
+  "refresh": "Aktualisieren",
+  "refreshing": "Wird aktualisiert",
+  "refresh_status": "Status aktualisieren",
+  "prev": "Zurück",
+  "next": "Weiter",
+  "re_generating": "Wird neu generiert",
+  "re_generate": "Neu generieren",
+  "re_generate_key": "Schlüssel neu generieren",
+  "export": "Exportieren",
+  "member": "{count, plural, one{# Mitglied} few{# Mitglieder} other{# Mitglieder}}",
+  "new_password_must_be_different_from_old_password": "Das neue Passwort muss von dem alten Passwort abweichen",
+  "edited": "Bearbeitet",
+  "bot": "Bot",
+  "settings_description": "Verwalten Sie Ihre Konto-, Arbeitsbereichs- und Projekteinstellungen an einem Ort. Wechseln Sie zwischen den Tabs, um sie einfach zu konfigurieren.",
+  "back_to_workspace": "Zurück zum Arbeitsbereich",
+  "upgrade_request": "Bitten Sie Ihren Arbeitsbereichs-Admin um ein Upgrade.",
+  "copied_to_clipboard": "In die Zwischenablage kopiert",
+  "copied_to_clipboard_description": "Die URL wurde erfolgreich in Ihre Zwischenablage kopiert",
+  "toast": {
+    "success": "Erfolg!",
+    "error": "Fehler!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Link erstellt",
+        "message": "Link wurde erfolgreich erstellt"
+      },
+      "not_created": {
+        "title": "Link nicht erstellt",
+        "message": "Link konnte nicht erstellt werden"
+      },
+      "updated": {
+        "title": "Link aktualisiert",
+        "message": "Link wurde erfolgreich aktualisiert"
+      },
+      "not_updated": {
+        "title": "Link nicht aktualisiert",
+        "message": "Link konnte nicht aktualisiert werden"
+      },
+      "removed": {
+        "title": "Link entfernt",
+        "message": "Link wurde erfolgreich entfernt"
+      },
+      "not_removed": {
+        "title": "Link nicht entfernt",
+        "message": "Link konnte nicht entfernt werden"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL ist ungültig",
+        "placeholder": "Geben Sie eine URL ein oder fügen Sie sie ein"
+      },
+      "title": {
+        "text": "Anzeigename",
+        "placeholder": "Wie soll dieser Link angezeigt werden"
+      }
+    }
+  },
+  "common": {
+    "all": "Alle",
+    "no_items_in_this_group": "Keine Elemente in dieser Gruppe",
+    "drop_here_to_move": "Hier ablegen zum Verschieben",
+    "states": "Status",
+    "state": "Status",
+    "state_groups": "Statusgruppen",
+    "state_group": "Statusgruppe",
+    "priorities": "Prioritäten",
+    "priority": "Priorität",
+    "team_project": "Teamprojekt",
+    "project": "Projekt",
+    "cycle": "Zyklus",
+    "cycles": "Zyklen",
+    "module": "Modul",
+    "modules": "Module",
+    "labels": "Labels",
+    "label": "Label",
+    "admins": "Administratoren",
+    "users": "Benutzer",
+    "guests": "Gäste",
+    "assignees": "Zugewiesene",
+    "assignee": "Zugewiesen",
+    "created_by": "Erstellt von",
+    "none": "Keine",
+    "link": "Link",
+    "estimates": "Schätzungen",
+    "estimate": "Schätzung",
+    "created_at": "Erstellt am",
+    "updated_at": "Aktualisiert am",
+    "completed_at": "Abgeschlossen am",
+    "layout": "Layout",
+    "filters": "Filter",
+    "display": "Anzeigen",
+    "load_more": "Mehr laden",
+    "activity": "Aktivität",
+    "analytics": "Analysen",
+    "dates": "Daten",
+    "success": "Erfolg!",
+    "something_went_wrong": "Etwas ist schiefgelaufen",
+    "error": {
+      "label": "Fehler!",
+      "message": "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut."
+    },
+    "group_by": "Gruppieren nach",
+    "epic": "Epic",
+    "epics": "Epics",
+    "work_item": "Arbeitselement",
+    "work_items": "Arbeitselemente",
+    "sub_work_item": "Untergeordnetes Arbeitselement",
+    "views": "Ansichten",
+    "pages": "Seiten",
+    "add": "Hinzufügen",
+    "warning": "Warnung",
+    "updating": "Wird aktualisiert",
+    "adding": "Wird hinzugefügt",
+    "update": "Aktualisieren",
+    "creating": "Wird erstellt",
+    "create": "Erstellen",
+    "cancel": "Abbrechen",
+    "description": "Beschreibung",
+    "title": "Titel",
+    "attachment": "Anhang",
+    "general": "Allgemein",
+    "features": "Funktionen",
+    "automation": "Automatisierung",
+    "project_name": "Projektname",
+    "project_id": "Projekt-ID",
+    "project_timezone": "Projektzeitzone",
+    "created_on": "Erstellt am",
+    "updated_on": "Aktualisiert am",
+    "completed_on": "Abgeschlossen am",
+    "update_project": "Projekt aktualisieren",
+    "identifier_already_exists": "Der Bezeichner existiert bereits",
+    "add_more": "Mehr hinzufügen",
+    "defaults": "Standardwerte",
+    "add_label": "Label hinzufügen",
+    "customize_time_range": "Zeitraum anpassen",
+    "loading": "Wird geladen",
+    "attachments": "Anhänge",
+    "property": "Eigenschaft",
+    "properties": "Eigenschaften",
+    "parent": "Übergeordnet",
+    "page": "Seite",
+    "remove": "Entfernen",
+    "archiving": "Wird archiviert",
+    "archive": "Archivieren",
+    "access": {
+      "public": "Öffentlich",
+      "private": "Privat"
+    },
+    "done": "Fertig",
+    "sub_work_items": "Untergeordnete Arbeitselemente",
+    "comment": "Kommentar",
+    "workspace_level": "Arbeitsbereichsebene",
+    "order_by": {
+      "label": "Sortieren nach",
+      "manual": "Manuell - Rang",
+      "last_created": "Zuletzt erstellt",
+      "last_updated": "Zuletzt aktualisiert",
+      "start_date": "Startdatum",
+      "due_date": "Fälligkeitsdatum",
+      "asc": "Aufsteigend",
+      "desc": "Absteigend",
+      "updated_on": "Aktualisiert am"
+    },
+    "sort": {
+      "asc": "Aufsteigend",
+      "desc": "Absteigend",
+      "created_on": "Erstellt am",
+      "updated_on": "Aktualisiert am"
+    },
+    "comments": "Kommentare",
+    "updates": "Aktualisierungen",
+    "additional_updates": "Zusätzliche Aktualisierungen",
+    "clear_all": "Alles löschen",
+    "copied": "Kopiert!",
+    "link_copied": "Link kopiert!",
+    "link_copied_to_clipboard": "Link in die Zwischenablage kopiert",
+    "copied_to_clipboard": "Link zum Arbeitselement in die Zwischenablage kopiert",
+    "branch_name_copied_to_clipboard": "Branch-Name in die Zwischenablage kopiert",
+    "is_copied_to_clipboard": "Arbeitselement in die Zwischenablage kopiert",
+    "no_links_added_yet": "Noch keine Links hinzugefügt",
+    "add_link": "Link hinzufügen",
+    "links": "Links",
+    "go_to_workspace": "Zum Arbeitsbereich",
+    "progress": "Fortschritt",
+    "optional": "Optional",
+    "join": "Beitreten",
+    "go_back": "Zurück",
+    "continue": "Fortfahren",
+    "resend": "Erneut senden",
+    "relations": "Beziehungen",
+    "dependencies": "Abhängigkeiten",
+    "errors": {
+      "default": {
+        "title": "Fehler!",
+        "message": "Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut."
+      },
+      "required": "Dieses Feld ist erforderlich",
+      "entity_required": "{entity} ist erforderlich",
+      "restricted_entity": "{entity} ist eingeschränkt"
+    },
+    "update_link": "Link aktualisieren",
+    "attach": "Anhängen",
+    "create_new": "Neu erstellen",
+    "add_existing": "Vorhandenes hinzufügen",
+    "type_or_paste_a_url": "Geben Sie eine URL ein oder fügen Sie sie ein",
+    "url_is_invalid": "URL ist ungültig",
+    "display_title": "Anzeigename",
+    "link_title_placeholder": "Wie soll dieser Link angezeigt werden",
+    "url": "URL",
+    "side_peek": "Seitenvorschau",
+    "modal": "Modal",
+    "full_screen": "Vollbild",
+    "close_peek_view": "Vorschau schließen",
+    "toggle_peek_view_layout": "Vorschau-Layout umschalten",
+    "options": "Optionen",
+    "duration": "Dauer",
+    "today": "Heute",
+    "week": "Woche",
+    "month": "Monat",
+    "quarter": "Quartal",
+    "press_for_commands": "Drücken Sie '/' für Befehle",
+    "click_to_add_description": "Klicken Sie, um eine Beschreibung hinzuzufügen",
+    "on_track": "Im Plan",
+    "off_track": "Außer Plan",
+    "at_risk": "Gefährdet",
+    "timeline": "Zeitleiste",
+    "completion": "Fertigstellung",
+    "upcoming": "Bevorstehend",
+    "completed": "Abgeschlossen",
+    "in_progress": "In Bearbeitung",
+    "planned": "Geplant",
+    "paused": "Pausiert",
+    "search": {
+      "label": "Suchen",
+      "placeholder": "Zum Suchen tippen",
+      "no_matches_found": "Keine Treffer gefunden",
+      "no_matching_results": "Keine passenden Ergebnisse",
+      "min_chars": "Geben Sie mindestens {count} Zeichen ein, um zu suchen",
+      "error": "Fehler beim Abrufen der Suchergebnisse",
+      "no_results": {
+        "title": "Keine passenden Ergebnisse",
+        "description": "Entfernen Sie die Suchkriterien, um alle Ergebnisse zu sehen"
+      }
+    },
+    "actions": {
+      "edit": "Bearbeiten",
+      "make_a_copy": "Kopie erstellen",
+      "open_in_new_tab": "In neuem Tab öffnen",
+      "copy_link": "Link kopieren",
+      "copy_branch_name": "Branch-Name kopieren",
+      "archive": "Archivieren",
+      "restore": "Wiederherstellen",
+      "delete": "Löschen",
+      "remove_relation": "Beziehung entfernen",
+      "subscribe": "Abonnieren",
+      "unsubscribe": "Abo beenden",
+      "clear_sorting": "Sortierung löschen",
+      "show_weekends": "Wochenenden anzeigen",
+      "enable": "Aktivieren",
+      "disable": "Deaktivieren",
+      "copy_markdown": "Markdown kopieren",
+      "reply": "Antworten"
+    },
+    "name": "Name",
+    "discard": "Verwerfen",
+    "confirm": "Bestätigen",
+    "confirming": "Wird bestätigt",
+    "read_the_docs": "Lesen Sie die Dokumentation",
+    "default": "Standard",
+    "active": "Aktiv",
+    "enabled": "Aktiviert",
+    "disabled": "Deaktiviert",
+    "mandate": "Mandat",
+    "mandatory": "Verpflichtend",
+    "global": "Global",
+    "yes": "Ja",
+    "no": "Nein",
+    "please_wait": "Bitte warten",
+    "enabling": "Wird aktiviert",
+    "disabling": "Wird deaktiviert",
+    "beta": "Beta",
+    "or": "oder",
+    "next": "Weiter",
+    "back": "Zurück",
+    "retry": "Erneut versuchen",
+    "cancelling": "Wird abgebrochen",
+    "configuring": "Wird konfiguriert",
+    "clear": "Löschen",
+    "import": "Importieren",
+    "connect": "Verbinden",
+    "authorizing": "Wird autorisiert",
+    "processing": "Wird verarbeitet",
+    "no_data_available": "Keine Daten verfügbar",
+    "from": "von {name}",
+    "authenticated": "Authentifiziert",
+    "select": "Auswählen",
+    "upgrade": "Upgrade",
+    "add_seats": "Sitze hinzufügen",
+    "projects": "Projekte",
+    "workspace": "Arbeitsbereich",
+    "workspaces": "Arbeitsbereiche",
+    "team": "Team",
+    "teams": "Teams",
+    "entity": "Entität",
+    "entities": "Entitäten",
+    "task": "Aufgabe",
+    "tasks": "Aufgaben",
+    "section": "Abschnitt",
+    "sections": "Abschnitte",
+    "edit": "Bearbeiten",
+    "connecting": "Wird verbunden",
+    "connected": "Verbunden",
+    "disconnect": "Trennen",
+    "disconnecting": "Wird getrennt",
+    "installing": "Wird installiert",
+    "install": "Installieren",
+    "reset": "Zurücksetzen",
+    "live": "Live",
+    "change_history": "Änderungsverlauf",
+    "coming_soon": "Demnächst verfügbar",
+    "member": "Mitglied",
+    "members": "Mitglieder",
+    "you": "Sie",
+    "upgrade_cta": {
+      "higher_subscription": "Auf ein höheres Abonnement upgraden",
+      "talk_to_sales": "Mit Vertrieb sprechen"
+    },
+    "category": "Kategorie",
+    "categories": "Kategorien",
+    "saving": "Wird gespeichert",
+    "save_changes": "Änderungen speichern",
+    "delete": "Löschen",
+    "deleting": "Wird gelöscht",
+    "pending": "Ausstehend",
+    "invite": "Einladen",
+    "view": "Ansicht",
+    "deactivated_user": "Deaktivierter Benutzer",
+    "apply": "Anwenden",
+    "applying": "Wird angewendet",
+    "overview": "Übersicht",
+    "no_of": "Anzahl {entity}",
+    "resolved": "Gelöst",
+    "get_started": "Loslegen",
+    "worklogs": "Arbeitsberichte",
+    "project_updates": "Projektaktualisierungen",
+    "workflows": "Arbeitsabläufe",
+    "templates": "Vorlagen",
+    "business": "Business",
+    "members_and_teamspaces": "Mitglieder & Teamspaces",
+    "recurring_work_items": "Wiederkehrende Arbeitselemente",
+    "milestones": "Meilensteine",
+    "open_in_full_screen": "{page} im Vollbild öffnen",
+    "details": "Details",
+    "project_structure": "Projektstruktur",
+    "custom_properties": "Benutzerdefinierte Eigenschaften",
+    "your_profile": "Ihr Profil",
+    "developer": "Entwickler",
+    "work_structure": "Arbeitsstruktur",
+    "execution": "Ausführung",
+    "administration": "Verwaltung"
+  },
+  "chart": {
+    "x_axis": "X-Achse",
+    "y_axis": "Y-Achse",
+    "metric": "Metrik"
+  },
+  "form": {
+    "title": {
+      "required": "Ein Titel ist erforderlich",
+      "max_length": "Der Titel sollte weniger als {length} Zeichen enthalten"
+    }
+  },
+  "entity": {
+    "grouping_title": "Gruppierung von {entity}",
+    "priority": "Priorität {entity}",
+    "all": "Alle {entity}",
+    "drop_here_to_move": "Hier ablegen, um {entity} zu verschieben",
+    "delete": {
+      "label": "{entity} löschen",
+      "success": "{entity} erfolgreich gelöscht",
+      "failed": "{entity} konnte nicht gelöscht werden"
+    },
+    "update": {
+      "failed": "{entity} konnte nicht aktualisiert werden",
+      "success": "{entity} erfolgreich aktualisiert"
+    },
+    "link_copied_to_clipboard": "Link zu {entity} in die Zwischenablage kopiert",
+    "fetch": {
+      "failed": "Fehler beim Laden von {entity}"
+    },
+    "add": {
+      "success": "{entity} erfolgreich hinzugefügt",
+      "failed": "Fehler beim Hinzufügen von {entity}"
+    },
+    "remove": {
+      "success": "{entity} erfolgreich entfernt",
+      "failed": "Fehler beim Entfernen von {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Datei konnte nicht angehängt werden. Bitte versuchen Sie es erneut.",
+    "only_one_file_allowed": "Es kann jeweils nur eine Datei hochgeladen werden.",
+    "file_size_limit": "Die Datei muss kleiner als {size} MB sein.",
+    "drag_and_drop": "Datei hierher ziehen, um sie hochzuladen",
+    "delete": "Anhang löschen"
+  },
+  "label": {
+    "select": "Label auswählen",
+    "create": {
+      "success": "Label erfolgreich erstellt",
+      "failed": "Label konnte nicht erstellt werden",
+      "already_exists": "Label existiert bereits",
+      "type": "Eingeben, um ein neues Label zu erstellen"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Ansicht} few {Ansichten} other {Ansichten}}",
+    "create": {
+      "label": "Ansicht erstellen"
+    },
+    "update": {
+      "label": "Ansicht aktualisieren"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Gast",
+      "description": "Externe Mitglieder können als Gäste eingeladen werden."
+    },
+    "member": {
+      "title": "Mitglied",
+      "description": "Kann Entitäten lesen, schreiben, bearbeiten und löschen."
+    },
+    "admin": {
+      "title": "Administrator",
+      "description": "Besitzt alle Berechtigungen im Arbeitsbereich."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Produkt-/Projektmanager",
+    "development_or_engineering": "Entwicklung/Ingenieurwesen",
+    "founder_or_executive": "Gründer/Führungskraft",
+    "freelancer_or_consultant": "Freiberufler/Berater",
+    "marketing_or_growth": "Marketing/Wachstum",
+    "sales_or_business_development": "Vertrieb/Business Development",
+    "support_or_operations": "Support/Betrieb",
+    "student_or_professor": "Student/Professor",
+    "human_resources": "Personalwesen",
+    "other": "Andere"
+  },
+  "default_global_view": {
+    "all_issues": "Alle Elemente",
+    "assigned": "Zugewiesen",
+    "created": "Erstellt",
+    "subscribed": "Abonniert"
+  },
+  "description_versions": {
+    "last_edited_by": "Zuletzt bearbeitet von",
+    "previously_edited_by": "Zuvor bearbeitet von",
+    "edited_by": "Bearbeitet von"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane ist nicht gestartet. Dies könnte daran liegen, dass einer oder mehrere Plane-Services nicht starten konnten.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Wählen Sie View Logs aus setup.sh und Docker-Logs, um sicherzugehen."
+  },
+  "customize_navigation": "Navigation anpassen",
+  "personal": "Persönlich",
+  "accordion_navigation_control": "Akkordeon-Seitenleistennavigation",
+  "horizontal_navigation_bar": "Tab-Navigation",
+  "show_limited_projects_on_sidebar": "Begrenzte Anzahl von Projekten in der Seitenleiste anzeigen",
+  "enter_number_of_projects": "Anzahl der Projekte eingeben",
+  "pin": "Anheften",
+  "unpin": "Lösen",
+  "workspace_dashboards": "Dashboards",
+  "pi_chat": "Plane AI",
+  "in_app": "In-App",
+  "forms": "Forms",
+  "milestones": "Meilensteine",
+  "milestones_description": "Meilensteine bieten eine Ebene, um Arbeitselemente auf gemeinsame Fertigstellungstermine auszurichten.",
+  "file_upload": {
+    "upload_text": "Klicken Sie hier, um Datei hochzuladen",
+    "drag_drop_text": "Drag and Drop",
+    "processing": "Verarbeite",
+    "invalid_file_type": "Ungültiger Dateityp",
+    "missing_fields": "Fehlende Felder",
+    "success": "{fileName} hochgeladen!"
+  },
+  "date": "Datum",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Arbeitselemente in CSV exportieren.",
+      "short_description": "Als CSV exportieren"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Arbeitselemente in Excel exportieren.",
+      "short_description": "Als Excel exportieren"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Arbeitselemente in Excel exportieren.",
+      "short_description": "Als Excel exportieren"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Arbeitselemente in JSON exportieren.",
+      "short_description": "Als JSON exportieren"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/cycle.json b/packages/i18n/src/locales/de/cycle.json
new file mode 100644
index 0000000..b0b9dcd
--- /dev/null
+++ b/packages/i18n/src/locales/de/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Fügen Sie Elemente hinzu, um den Fortschritt zu verfolgen"
+      },
+      "chart": {
+        "title": "Fügen Sie Elemente hinzu, um ein Burndown-Diagramm anzuzeigen."
+      },
+      "priority_issue": {
+        "title": "Hochpriorisierte Arbeitselemente werden hier angezeigt."
+      },
+      "assignee": {
+        "title": "Weisen Sie Elemente zu, um eine Übersicht der Zuweisungen zu sehen."
+      },
+      "label": {
+        "title": "Fügen Sie Labels hinzu, um eine Analyse nach Labels zu erhalten."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Zyklus} few {Zyklen} other {Zyklen}}",
+    "no_cycle": "Kein Zyklus"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Fügen Sie Arbeitsaufgaben zum Zyklus hinzu, um\n seinen Fortschritt zu sehen"
+      },
+      "priority": {
+        "title": "Beobachten Sie hochprioritäre Arbeitsaufgaben, die\n im Zyklus auf einen Blick bearbeitet werden."
+      },
+      "assignee": {
+        "title": "Fügen Sie Arbeitsaufgaben Bearbeitern hinzu, um eine\n Aufschlüsselung der Arbeit nach Bearbeitern zu sehen."
+      },
+      "label": {
+        "title": "Fügen Sie Arbeitsaufgaben Labels hinzu, um die\n Aufschlüsselung der Arbeit nach Labels zu sehen."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/editor.json b/packages/i18n/src/locales/de/editor.json
new file mode 100644
index 0000000..93b0321
--- /dev/null
+++ b/packages/i18n/src/locales/de/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Dateien hierher ziehen oder klicken, um hochzuladen"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Datei zu groß.",
+        "description": "Maximale Größe pro Datei ist {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Nicht unterstützter Dateityp.",
+        "description": "Unterstützte Formate anzeigen"
+      },
+      "default": {
+        "title": "Upload fehlgeschlagen.",
+        "description": "Etwas ist schief gelaufen. Bitte versuchen Sie es erneut."
+      }
+    },
+    "upgrade": {
+      "description": "Aktualisieren Sie Ihren Plan, um diesen Anhang anzuzeigen."
+    },
+    "aria": {
+      "click_to_upload": "Klicken Sie, um Anhang hochzuladen"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "In Einbettung umwandeln",
+      "convert_to_link": "In Link umwandeln",
+      "convert_to_richcard": "In Rich Card umwandeln"
+    },
+    "placeholder": {
+      "insert_embed": "Fügen Sie hier Ihren bevorzugten Einbettungslink ein, z.B. YouTube-Video, Figma-Design usw.",
+      "link": "Link eingeben oder einfügen"
+    },
+    "input_modal": {
+      "embed": "Einbetten",
+      "works_with_links": "Funktioniert mit YouTube, Figma, Google Docs und mehr"
+    },
+    "error": {
+      "not_valid_link": "Bitte geben Sie eine gültige URL ein."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Beschreiben Sie den Inhalt dieses Blocks",
+      "generated_here": "Ihr KI-Inhalt wird hier generiert"
+    },
+    "block_types": {
+      "placeholder": "Blocktyp auswählen",
+      "summarize_page": "Seite zusammenfassen",
+      "custom_prompt": "Benutzerdefinierter Prompt"
+    },
+    "actions": {
+      "discard": "Verwerfen",
+      "generate": "Generieren",
+      "generating": "Wird generiert",
+      "rewriting": "Wird umgeschrieben",
+      "rewrite": "Umschreiben",
+      "use_this": "Übernehmen",
+      "refine": "Verfeinern"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/empty-state.json b/packages/i18n/src/locales/de/empty-state.json
new file mode 100644
index 0000000..74bc261
--- /dev/null
+++ b/packages/i18n/src/locales/de/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Es gibt noch keine Fortschrittsmetriken anzuzeigen.",
+      "description": "Beginnen Sie mit dem Festlegen von Eigenschaftswerten in Arbeitselementen, um hier Fortschrittsmetriken zu sehen."
+    },
+    "updates": {
+      "title": "Noch keine Updates.",
+      "description": "Sobald Projektmitglieder Updates hinzufügen, werden sie hier angezeigt"
+    },
+    "search": {
+      "title": "Keine passenden Ergebnisse.",
+      "description": "Keine Ergebnisse gefunden. Versuchen Sie, Ihre Suchbegriffe anzupassen."
+    },
+    "not_found": {
+      "title": "Hoppla! Etwas scheint nicht zu stimmen",
+      "description": "Wir können Ihr Plane-Konto derzeit nicht abrufen. Dies könnte ein Netzwerkfehler sein.",
+      "cta_primary": "Versuchen Sie neu zu laden"
+    },
+    "server_error": {
+      "title": "Serverfehler",
+      "description": "Wir können keine Verbindung herstellen und Daten von unserem Server abrufen. Keine Sorge, wir arbeiten daran.",
+      "cta_primary": "Versuchen Sie neu zu laden"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Es scheint, als hätten Sie keinen Zugriff auf dieses Projekt",
+      "restricted_description": "Kontaktieren Sie den Administrator, um Zugriff anzufordern, damit Sie hier fortfahren können.",
+      "join_description": "Klicken Sie unten auf die Schaltfläche, um beizutreten.",
+      "cta_primary": "Projekt beitreten",
+      "cta_loading": "Beitritt zum Projekt wird durchgeführt"
+    },
+    "invalid_project": {
+      "title": "Projekt nicht gefunden",
+      "description": "Das gesuchte Projekt existiert nicht."
+    },
+    "work_items": {
+      "title": "Beginnen Sie mit Ihrem ersten Arbeitselement.",
+      "description": "Arbeitselemente sind die Bausteine Ihres Projekts — weisen Sie Eigentümer zu, setzen Sie Prioritäten und verfolgen Sie den Fortschritt einfach.",
+      "cta_primary": "Erstellen Sie Ihr erstes Arbeitselement"
+    },
+    "cycles": {
+      "title": "Gruppieren und zeitlich begrenzen Sie Ihre Arbeit in Zyklen.",
+      "description": "Teilen Sie die Arbeit in zeitlich begrenzte Blöcke auf, arbeiten Sie rückwärts von Ihrer Projektfrist, um Termine festzulegen, und machen Sie greifbare Fortschritte als Team.",
+      "cta_primary": "Legen Sie Ihren ersten Zyklus fest"
+    },
+    "cycle_work_items": {
+      "title": "Keine Arbeitselemente in diesem Zyklus anzuzeigen",
+      "description": "Erstellen Sie Arbeitselemente, um den Fortschritt Ihres Teams in diesem Zyklus zu überwachen und Ihre Ziele rechtzeitig zu erreichen.",
+      "cta_primary": "Arbeitselement erstellen",
+      "cta_secondary": "Bestehendes Arbeitselement hinzufügen"
+    },
+    "modules": {
+      "title": "Ordnen Sie Ihre Projektziele Modulen zu und verfolgen Sie sie einfach.",
+      "description": "Module bestehen aus miteinander verbundenen Arbeitselementen. Sie helfen bei der Überwachung des Fortschritts durch Projektphasen, jede mit spezifischen Fristen und Analysen, um anzuzeigen, wie nahe Sie dem Erreichen dieser Phasen sind.",
+      "cta_primary": "Legen Sie Ihr erstes Modul fest"
+    },
+    "module_work_items": {
+      "title": "Keine Arbeitselemente in diesem Modul anzuzeigen",
+      "description": "Erstellen Sie Arbeitselemente, um dieses Modul zu überwachen.",
+      "cta_primary": "Arbeitselement erstellen",
+      "cta_secondary": "Bestehendes Arbeitselement hinzufügen"
+    },
+    "views": {
+      "title": "Speichern Sie benutzerdefinierte Ansichten für Ihr Projekt",
+      "description": "Ansichten sind gespeicherte Filter, die Ihnen helfen, schnell auf die Informationen zuzugreifen, die Sie am häufigsten verwenden. Arbeiten Sie mühelos zusammen, während Teammitglieder Ansichten teilen und an ihre spezifischen Bedürfnisse anpassen.",
+      "cta_primary": "Ansicht erstellen"
+    },
+    "no_work_items_in_project": {
+      "title": "Noch keine Arbeitselemente im Projekt",
+      "description": "Fügen Sie Arbeitselemente zu Ihrem Projekt hinzu und unterteilen Sie Ihre Arbeit in nachverfolgbare Teile mit Ansichten.",
+      "cta_primary": "Arbeitselement hinzufügen"
+    },
+    "work_item_filter": {
+      "title": "Keine Arbeitselemente gefunden",
+      "description": "Ihr aktueller Filter hat keine Ergebnisse zurückgegeben. Versuchen Sie, die Filter zu ändern.",
+      "cta_primary": "Arbeitselement hinzufügen"
+    },
+    "pages": {
+      "title": "Dokumentieren Sie alles — von Notizen bis PRDs",
+      "description": "Seiten ermöglichen es Ihnen, Informationen an einem Ort zu erfassen und zu organisieren. Schreiben Sie Besprechungsnotizen, Projektdokumentationen und PRDs, betten Sie Arbeitselemente ein und strukturieren Sie sie mit gebrauchsfertigen Komponenten.",
+      "cta_primary": "Erstellen Sie Ihre erste Seite"
+    },
+    "archive_pages": {
+      "title": "Noch keine archivierten Seiten",
+      "description": "Archivieren Sie Seiten, die nicht auf Ihrem Radar sind. Greifen Sie bei Bedarf hier darauf zu."
+    },
+    "intake_sidebar": {
+      "title": "Intake-Anfragen protokollieren",
+      "description": "Senden Sie neue Anfragen zur Überprüfung, Priorisierung und Verfolgung innerhalb Ihres Projekt-Workflows.",
+      "cta_primary": "Intake-Anfrage erstellen"
+    },
+    "intake_main": {
+      "title": "Wählen Sie ein Intake-Arbeitselement aus, um seine Details anzuzeigen"
+    },
+    "epics": {
+      "title": "Verwandeln Sie komplexe Projekte in strukturierte Epics.",
+      "description": "Ein Epic hilft Ihnen, große Ziele in kleinere, nachverfolgbare Aufgaben zu organisieren.",
+      "cta_primary": "Epic erstellen",
+      "cta_secondary": "Dokumentation"
+    },
+    "epic_work_items": {
+      "title": "Sie haben diesem Epic noch keine Arbeitselemente hinzugefügt.",
+      "description": "Beginnen Sie, indem Sie einige Arbeitselemente zu diesem Epic hinzufügen und hier verfolgen.",
+      "cta_secondary": "Arbeitselemente hinzufügen"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Noch keine archivierten Epics",
+      "description": "Sie können abgeschlossene oder stornierte Epics archivieren. Finden Sie sie hier, sobald sie archiviert sind."
+    },
+    "archive_work_items": {
+      "title": "Noch keine archivierten Arbeitselemente",
+      "description": "Manuell oder durch Automatisierung können Sie abgeschlossene oder stornierte Arbeitselemente archivieren. Finden Sie sie hier, sobald sie archiviert sind.",
+      "cta_primary": "Automatisierung einrichten"
+    },
+    "archive_cycles": {
+      "title": "Noch keine archivierten Zyklen",
+      "description": "Um Ihr Projekt aufzuräumen, archivieren Sie abgeschlossene Zyklen. Finden Sie sie hier, sobald sie archiviert sind."
+    },
+    "archive_modules": {
+      "title": "Noch keine archivierten Module",
+      "description": "Um Ihr Projekt aufzuräumen, archivieren Sie abgeschlossene oder stornierte Module. Finden Sie sie hier, sobald sie archiviert sind."
+    },
+    "home_widget_quick_links": {
+      "title": "Halten Sie wichtige Referenzen, Ressourcen oder Dokumente für Ihre Arbeit griffbereit"
+    },
+    "inbox_sidebar_all": {
+      "title": "Updates für Ihre abonnierten Arbeitselemente werden hier angezeigt"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Erwähnungen für Ihre Arbeitselemente werden hier angezeigt"
+    },
+    "your_work_by_priority": {
+      "title": "Noch kein Arbeitselement zugewiesen"
+    },
+    "your_work_by_state": {
+      "title": "Noch kein Arbeitselement zugewiesen"
+    },
+    "views": {
+      "title": "Noch keine Ansichten",
+      "description": "Fügen Sie Arbeitselemente zu Ihrem Projekt hinzu und verwenden Sie Ansichten, um mühelos zu filtern, zu sortieren und den Fortschritt zu überwachen.",
+      "cta_primary": "Arbeitselement hinzufügen"
+    },
+    "drafts": {
+      "title": "Halb geschriebene Arbeitselemente",
+      "description": "Um dies auszuprobieren, beginnen Sie, ein Arbeitselement hinzuzufügen, und lassen Sie es auf halbem Weg liegen oder erstellen Sie unten Ihren ersten Entwurf. 😉",
+      "cta_primary": "Entwurf-Arbeitselement erstellen"
+    },
+    "projects_archived": {
+      "title": "Keine Projekte archiviert",
+      "description": "Es sieht so aus, als wären alle Ihre Projekte noch aktiv—gute Arbeit!"
+    },
+    "analytics_projects": {
+      "title": "Erstellen Sie Projekte, um hier Projektmetriken zu visualisieren."
+    },
+    "analytics_work_items": {
+      "title": "Erstellen Sie Projekte mit Arbeitselementen und Zugewiesenen, um hier Leistung, Fortschritt und Teameinfluss zu verfolgen."
+    },
+    "analytics_no_cycle": {
+      "title": "Erstellen Sie Zyklen, um Arbeit in zeitlich begrenzte Phasen zu organisieren und Fortschritte über Sprints hinweg zu verfolgen."
+    },
+    "analytics_no_module": {
+      "title": "Erstellen Sie Module, um Ihre Arbeit zu organisieren und Fortschritte über verschiedene Phasen hinweg zu verfolgen."
+    },
+    "analytics_no_intake": {
+      "title": "Richten Sie Intake ein, um eingehende Anfragen zu verwalten und zu verfolgen, wie sie akzeptiert und abgelehnt werden"
+    },
+    "home_widget_stickies": {
+      "title": "Notieren Sie eine Idee, erfassen Sie einen Aha-Moment oder halten Sie einen Geistesblitz fest. Fügen Sie eine Haftnotiz hinzu, um zu beginnen."
+    },
+    "stickies": {
+      "title": "Ideen sofort festhalten",
+      "description": "Erstellen Sie Haftnotizen für schnelle Notizen und Aufgaben und behalten Sie sie überall bei sich.",
+      "cta_primary": "Erste Haftnotiz erstellen",
+      "cta_secondary": "Dokumentation"
+    },
+    "active_cycles": {
+      "title": "Keine aktiven Zyklen",
+      "description": "Sie haben derzeit keine laufenden Zyklen. Aktive Zyklen erscheinen hier, wenn sie das heutige Datum enthalten."
+    },
+    "dashboard": {
+      "title": "Visualisieren Sie Ihren Fortschritt mit Dashboards",
+      "description": "Erstellen Sie anpassbare Dashboards, um Metriken zu verfolgen, Ergebnisse zu messen und Erkenntnisse effektiv zu präsentieren.",
+      "cta_primary": "Neues Dashboard erstellen"
+    },
+    "wiki": {
+      "title": "Schreiben Sie eine Notiz, ein Dokument oder eine vollständige Wissensdatenbank.",
+      "description": "Seiten sind Gedankenraum in Plane. Notieren Sie Besprechungsnotizen, formatieren Sie sie einfach, betten Sie Arbeitselemente ein, ordnen Sie sie mit einer Bibliothek von Komponenten an und behalten Sie alles im Kontext Ihres Projekts.",
+      "cta_primary": "Erstellen Sie Ihre Seite"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Projektzustände aktivieren",
+      "description": "Aktivieren Sie Projektzustände, um Eigenschaften wie Status, Priorität, Fälligkeitsdaten und mehr anzuzeigen und zu verwalten."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Noch keine Schätzungen",
+      "description": "Definieren Sie, wie Ihr Team den Aufwand misst, und verfolgen Sie ihn konsistent über alle Arbeitselemente hinweg.",
+      "cta_primary": "Schätzsystem hinzufügen"
+    },
+    "labels": {
+      "title": "Noch keine Labels",
+      "description": "Erstellen Sie personalisierte Labels, um Ihre Arbeitselemente effektiv zu kategorisieren und zu verwalten.",
+      "cta_primary": "Erstellen Sie Ihr erstes Label"
+    },
+    "exports": {
+      "title": "Noch keine Exporte",
+      "description": "Sie haben derzeit keine Exportaufzeichnungen. Sobald Sie Daten exportieren, werden alle Aufzeichnungen hier angezeigt."
+    },
+    "tokens": {
+      "title": "Noch kein persönliches Token",
+      "description": "Generieren Sie sichere API-Tokens, um Ihren Workspace mit externen Systemen und Anwendungen zu verbinden.",
+      "cta_primary": "API-Token hinzufügen"
+    },
+    "workspace_tokens": {
+      "title": "Noch keine API-Tokens",
+      "description": "Generieren Sie sichere API-Tokens, um Ihren Workspace mit externen Systemen und Anwendungen zu verbinden.",
+      "cta_primary": "API-Token hinzufügen"
+    },
+    "webhooks": {
+      "title": "Noch kein Webhook hinzugefügt",
+      "description": "Automatisieren Sie Benachrichtigungen an externe Dienste, wenn Projektereignisse auftreten.",
+      "cta_primary": "Webhook hinzufügen"
+    },
+    "work_item_types": {
+      "title": "Arbeitselementtypen erstellen und anpassen",
+      "description": "Definieren Sie einzigartige Arbeitselementtypen für Ihr Projekt. Jeder Typ kann seine eigenen Eigenschaften, Workflows und Felder haben - zugeschnitten auf die Bedürfnisse Ihres Projekts und Teams.",
+      "cta_primary": "Aktivieren"
+    },
+    "work_item_type_properties": {
+      "title": "Definieren Sie die Eigenschaft und Details, die Sie für diesen Arbeitselementtyp erfassen möchten. Passen Sie ihn an den Workflow Ihres Projekts an.",
+      "cta_secondary": "Eigenschaft hinzufügen"
+    },
+    "templates": {
+      "title": "Noch keine Vorlagen",
+      "description": "Reduzieren Sie die Einrichtungszeit, indem Sie Vorlagen für Arbeitselemente und Seiten erstellen — und starten Sie neue Arbeit in Sekunden.",
+      "cta_primary": "Erstellen Sie Ihre erste Vorlage"
+    },
+    "recurring_work_items": {
+      "title": "Noch kein wiederkehrendes Arbeitselement",
+      "description": "Richten Sie wiederkehrende Arbeitselemente ein, um wiederholte Aufgaben zu automatisieren und mühelos im Zeitplan zu bleiben.",
+      "cta_primary": "Wiederkehrendes Arbeitselement erstellen"
+    },
+    "worklogs": {
+      "title": "Zeiterfassungen für alle Mitglieder verfolgen",
+      "description": "Erfassen Sie Zeit für Arbeitselemente, um detaillierte Zeiterfassungen für jedes Teammitglied über Projekte hinweg anzuzeigen."
+    },
+    "group_syncing": {
+      "title": "Noch keine Gruppenzuordnungen"
+    },
+    "template_setting": {
+      "title": "Noch keine Vorlagen",
+      "description": "Reduzieren Sie die Einrichtungszeit, indem Sie Vorlagen für Projekte, Arbeitselemente und Seiten erstellen — und starten Sie neue Arbeit in Sekunden.",
+      "cta_primary": "Vorlage erstellen"
+    },
+    "workflows": {
+      "title": "Noch keine Workflows",
+      "description": "Erstellen Sie Workflows, um den Fortschritt Ihrer Arbeitselemente zu verwalten.",
+      "cta_primary": "Neuen Workflow hinzufügen",
+      "states": {
+        "title": "Zustände hinzufügen",
+        "description": "Wählen Sie die Zustände aus, die das Arbeitselement durchläuft."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/home.json b/packages/i18n/src/locales/de/home.json
new file mode 100644
index 0000000..d3742da
--- /dev/null
+++ b/packages/i18n/src/locales/de/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Ihr Schnellstartleitfaden",
+      "not_right_now": "Jetzt nicht",
+      "create_project": {
+        "title": "Projekt erstellen",
+        "description": "Die meisten Dinge beginnen mit einem Projekt in Plane.",
+        "cta": "Los geht's"
+      },
+      "invite_team": {
+        "title": "Team einladen",
+        "description": "Arbeiten Sie mit Kollegen zusammen, um zu gestalten, bereitzustellen und zu verwalten.",
+        "cta": "Einladen"
+      },
+      "configure_workspace": {
+        "title": "Konfigurieren Sie Ihren Arbeitsbereich.",
+        "description": "Aktivieren oder deaktivieren Sie Funktionen oder gehen Sie weiter ins Detail.",
+        "cta": "Diesen Bereich konfigurieren"
+      },
+      "personalize_account": {
+        "title": "Personalisieren Sie Plane.",
+        "description": "Wählen Sie ein Profilbild, Farben und mehr.",
+        "cta": "Jetzt personalisieren"
+      },
+      "widgets": {
+        "title": "Ohne Widgets ist es ruhig, schalten Sie sie ein",
+        "description": "Es scheint, als seien alle Ihre Widgets deaktiviert. Aktivieren Sie sie für ein besseres Erlebnis!",
+        "primary_button": {
+          "text": "Widgets verwalten"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Speichern Sie hier Links zu wichtigen Dingen, auf die Sie schnell zugreifen möchten.",
+      "add": "Schnelllink hinzufügen",
+      "title": "Schnelllink",
+      "title_plural": "Schnelllinks"
+    },
+    "recents": {
+      "title": "Zuletzt verwendet",
+      "empty": {
+        "project": "Ihre kürzlich aufgerufenen Projekte erscheinen hier, nachdem Sie sie geöffnet haben.",
+        "page": "Ihre kürzlich aufgerufenen Seiten erscheinen hier, nachdem Sie sie geöffnet haben.",
+        "issue": "Ihre kürzlich aufgerufenen Arbeitselemente erscheinen hier, nachdem Sie sie geöffnet haben.",
+        "default": "Sie haben noch keine kürzlichen Elemente."
+      },
+      "filters": {
+        "all": "Alle",
+        "projects": "Projekte",
+        "pages": "Seiten",
+        "issues": "Arbeitselemente"
+      }
+    },
+    "new_at_plane": {
+      "title": "Neu in Plane"
+    },
+    "quick_tutorial": {
+      "title": "Schnelles Tutorial"
+    },
+    "widget": {
+      "reordered_successfully": "Widget erfolgreich verschoben.",
+      "reordering_failed": "Beim Verschieben des Widgets ist ein Fehler aufgetreten."
+    },
+    "manage_widgets": "Widgets verwalten",
+    "title": "Startseite",
+    "star_us_on_github": "Geben Sie uns einen Stern auf GitHub",
+    "business_trial_banner": {
+      "title": "Ihre 14-tägige Business-Testversion ist aktiv!",
+      "description": "Entdecken Sie alle Business-Funktionen. Wenn Sie bereit sind, können Sie ein Abonnement abschließen. Es erfolgt keine automatische Abrechnung.",
+      "trial_ends_today": "Testversion endet heute",
+      "trial_ends_in_days": "Testversion endet in {days, plural, one {# Tag} other {# Tagen}}",
+      "start_subscription": "Abonnement starten",
+      "explore_business_features": "Business-Funktionen entdecken"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/inbox.json b/packages/i18n/src/locales/de/inbox.json
new file mode 100644
index 0000000..79591e3
--- /dev/null
+++ b/packages/i18n/src/locales/de/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Ausstehend",
+        "description": "Ausstehend"
+      },
+      "declined": {
+        "title": "Abgelehnt",
+        "description": "Abgelehnt"
+      },
+      "snoozed": {
+        "title": "Verschoben",
+        "description": "Noch {days, plural, one{# Tag} few{# Tage} other{# Tage}}"
+      },
+      "accepted": {
+        "title": "Angenommen",
+        "description": "Angenommen"
+      },
+      "duplicate": {
+        "title": "Duplikat",
+        "description": "Duplikat"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Arbeitselement ablehnen",
+        "content": "Möchten Sie das Arbeitselement {value} wirklich ablehnen?"
+      },
+      "delete": {
+        "title": "Arbeitselement löschen",
+        "content": "Möchten Sie das Arbeitselement {value} wirklich löschen?",
+        "success": "Arbeitselement erfolgreich gelöscht"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Nur Projektadministratoren können Arbeitselemente verschieben/wiederherstellen",
+      "accept_permission": "Nur Projektadministratoren können Arbeitselemente annehmen",
+      "decline_permission": "Nur Projektadministratoren können Arbeitselemente ablehnen"
+    },
+    "actions": {
+      "accept": "Annehmen",
+      "decline": "Ablehnen",
+      "snooze": "Verschieben",
+      "unsnooze": "Wiederherstellen",
+      "copy": "Link zum Arbeitselement kopieren",
+      "delete": "Löschen",
+      "open": "Arbeitselement öffnen",
+      "mark_as_duplicate": "Als Duplikat markieren",
+      "move": "{value} in die Arbeitselemente des Projekts verschieben"
+    },
+    "source": {
+      "in-app": "in der App"
+    },
+    "order_by": {
+      "created_at": "Erstellt am",
+      "updated_at": "Aktualisiert am",
+      "id": "ID"
+    },
+    "label": "Eingang",
+    "page_label": "{workspace} - Eingang",
+    "modal": {
+      "title": "Angenommenes Arbeitselement erstellen"
+    },
+    "tabs": {
+      "open": "Offen",
+      "closed": "Geschlossen"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Keine offenen Arbeitselemente",
+        "description": "Offene Arbeitselemente werden hier angezeigt. Erstellen Sie ein neues."
+      },
+      "sidebar_closed_tab": {
+        "title": "Keine geschlossenen Arbeitselemente",
+        "description": "Alle angenommenen oder abgelehnten Arbeitselemente erscheinen hier."
+      },
+      "sidebar_filter": {
+        "title": "Keine passenden Arbeitselemente",
+        "description": "Kein Element passt zum Eingang-Filter. Erstellen Sie ein neues."
+      },
+      "detail": {
+        "title": "Wählen Sie ein Arbeitselement, um Details anzuzeigen."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/integration.json b/packages/i18n/src/locales/de/integration.json
new file mode 100644
index 0000000..a9b4d58
--- /dev/null
+++ b/packages/i18n/src/locales/de/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integrationen",
+    "loading": "Lade",
+    "unauthorized": "Sie sind nicht berechtigt, diese Seite anzuzeigen.",
+    "configure": "Konfigurieren",
+    "not_enabled": "{name} ist für diesen Workspace nicht aktiviert.",
+    "not_configured": "Nicht konfiguriert",
+    "disconnect_personal_account": "Persönliches {providerName}-Konto trennen",
+    "not_configured_message_admin": "{name}-Integration ist nicht konfiguriert. Bitte kontaktieren Sie Ihren Instanz-Administrator, um sie zu konfigurieren.",
+    "not_configured_message_support": "{name}-Integration ist nicht konfiguriert. Bitte kontaktieren Sie den Support, um sie zu konfigurieren.",
+    "external_api_unreachable": "Zugriff auf die externe API nicht möglich. Bitte versuchen Sie es später erneut.",
+    "error_fetching_supported_integrations": "Unterstützte Integrationen können nicht abgerufen werden. Bitte versuchen Sie es später erneut.",
+    "back_to_integrations": "Zurück zu Integrationen",
+    "select_state": "Status auswählen",
+    "set_state": "Status setzen",
+    "choose_project": "Projekt auswählen...",
+    "skip_backward_state_movement": "Verhindern, dass Issues durch PR-Updates in einen früheren Status verschoben werden"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Verbinden und synchronisieren Sie Ihre GitHub-Arbeitsaufgaben mit Plane",
+    "connect_org": "Organisation verbinden",
+    "connect_org_description": "Verbinden Sie Ihre GitHub-Organisation mit Plane",
+    "processing": "Wird verarbeitet",
+    "org_added_desc": "GitHub-Organisation hinzugefügt von und Zeit",
+    "connection_fetch_error": "Fehler beim Abrufen der Verbindungsdetails vom Server",
+    "personal_account_connected": "Persönliches Konto verbunden",
+    "personal_account_connected_description": "Ihr persönliches GitHub-Konto ist jetzt mit Plane verbunden",
+    "connect_personal_account": "Persönliches Konto verbinden",
+    "connect_personal_account_description": "Verbinden Sie Ihr persönliches GitHub-Konto mit Plane.",
+    "repo_mapping": "Repository-Zuordnung",
+    "repo_mapping_description": "Ordnen Sie Ihre GitHub-Repositories Plane-Projekten zu.",
+    "project_issue_sync": "Projekt-Issue-Synchronisierung",
+    "project_issue_sync_description": "Synchronisieren Sie Issues von GitHub mit Ihrem Plane-Projekt",
+    "project_issue_sync_empty_state": "Zugeordnete Projekt-Issue-Synchronisierungen werden hier angezeigt",
+    "configure_project_issue_sync_state": "Issue-Synchronisierungsstatus konfigurieren",
+    "select_issue_sync_direction": "Richtung der Issue-Synchronisierung auswählen",
+    "allow_bidirectional_sync": "Bidirektional – Synchronisieren Sie Issues und Kommentare in beide Richtungen zwischen GitHub und Plane",
+    "allow_unidirectional_sync": "Unidirektional – Synchronisieren Sie Issues und Kommentare nur von GitHub zu Plane",
+    "allow_unidirectional_sync_warning": "Daten aus GitHub Issue ersetzen Daten im verknüpften Plane-Arbeitselement (GitHub → Plane nur)",
+    "remove_project_issue_sync": "Diese Projekt-Issue-Synchronisierung entfernen",
+    "remove_project_issue_sync_confirmation": "Sind Sie sicher, dass Sie diese Projekt-Issue-Synchronisierung entfernen möchten?",
+    "add_pr_state_mapping": "Pull-Request-Status-Mapping für Plane-Projekt hinzufügen",
+    "edit_pr_state_mapping": "Pull-Request-Status-Mapping für Plane-Projekt bearbeiten",
+    "pr_state_mapping": "Pull-Request-Status-Mapping",
+    "pr_state_mapping_description": "Ordnen Sie GitHub-Pull-Request-Status Ihrem Plane-Projekt zu",
+    "pr_state_mapping_empty_state": "Zugeordnete PR-Status werden hier angezeigt",
+    "remove_pr_state_mapping": "Dieses Pull-Request-Status-Mapping entfernen",
+    "remove_pr_state_mapping_confirmation": "Sind Sie sicher, dass Sie dieses Pull-Request-Status-Mapping entfernen möchten?",
+    "issue_sync_message": "Arbeitsaufgaben werden mit {project} synchronisiert",
+    "link": "GitHub-Repository mit einem Plane-Projekt verknüpfen",
+    "pull_request_automation": "Pull-Request-Automatisierung",
+    "pull_request_automation_description": "Konfigurieren Sie das Pull-Request-Status-Mapping von GitHub zu Ihrem Plane-Projekt",
+    "DRAFT_MR_OPENED": "Entwurf geöffnet",
+    "MR_OPENED": "Geöffnet",
+    "MR_READY_FOR_MERGE": "Bereit zum Zusammenführen",
+    "MR_REVIEW_REQUESTED": "Review angefordert",
+    "MR_MERGED": "Zusammengeführt",
+    "MR_CLOSED": "Geschlossen",
+    "ISSUE_OPEN": "Issue geöffnet",
+    "ISSUE_CLOSED": "Issue geschlossen",
+    "save": "Speichern",
+    "start_sync": "Synchronisierung starten",
+    "choose_repository": "Repository auswählen..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Verbinden und synchronisieren Sie Ihre Gitlab-Merge-Requests mit Plane.",
+    "connection_fetch_error": "Fehler beim Abrufen der Verbindungsdetails vom Server",
+    "connect_org": "Organisation verbinden",
+    "connect_org_description": "Verbinden Sie Ihre Gitlab-Organisation mit Plane.",
+    "project_connections": "Gitlab-Projektverbindungen",
+    "project_connections_description": "Synchronisieren Sie Merge-Requests von Gitlab zu Plane-Projekten.",
+    "plane_project_connection": "Plane-Projektverbindung",
+    "plane_project_connection_description": "Konfigurieren Sie die Pull-Request-Status-Zuordnung von Gitlab zu Plane-Projekten",
+    "remove_connection": "Verbindung entfernen",
+    "remove_connection_confirmation": "Sind Sie sicher, dass Sie diese Verbindung entfernen möchten?",
+    "link": "Gitlab-Repository mit Plane-Projekt verknüpfen",
+    "pull_request_automation": "Pull-Request-Automatisierung",
+    "pull_request_automation_description": "Konfigurieren Sie die Pull-Request-Status-Zuordnung von Gitlab zu Plane",
+    "DRAFT_MR_OPENED": "Bei Erstellung eines Entwurf-MRs, setze den Status auf",
+    "MR_OPENED": "Bei MR-Erstellung, setze den Status auf",
+    "MR_REVIEW_REQUESTED": "Bei MR-Review-Anfrage, setze den Status auf",
+    "MR_READY_FOR_MERGE": "Wenn MR bereit zum Zusammenführen ist, setze den Status auf",
+    "MR_MERGED": "Bei MR-Zusammenführung, setze den Status auf",
+    "MR_CLOSED": "Bei MR-Schließung, setze den Status auf",
+    "integration_enabled_text": "Mit aktivierter Gitlab-Integration können Sie Arbeitsaufgaben-Workflows automatisieren",
+    "choose_entity": "Element auswählen",
+    "choose_project": "Projekt auswählen",
+    "link_plane_project": "Plane-Projekt verknüpfen",
+    "project_issue_sync": "Projekt-Issue-Synchronisierung",
+    "project_issue_sync_description": "Synchronisieren Sie Issues von Gitlab zu Ihrem Plane-Projekt",
+    "project_issue_sync_empty_state": "Zugeordnete Projekt-Issue-Synchronisierung wird hier angezeigt",
+    "configure_project_issue_sync_state": "Issue-Synchronisierungsstatus konfigurieren",
+    "select_issue_sync_direction": "Issue-Synchronisierungsrichtung auswählen",
+    "allow_bidirectional_sync": "Bidirektional - Issues und Kommentare in beide Richtungen zwischen Gitlab und Plane synchronisieren",
+    "allow_unidirectional_sync": "Unidirektional - Issues und Kommentare nur von Gitlab zu Plane synchronisieren",
+    "allow_unidirectional_sync_warning": "Daten vom Gitlab Issue ersetzen Daten im verknüpften Plane-Arbeitselement (nur Gitlab → Plane)",
+    "remove_project_issue_sync": "Diese Projekt-Issue-Synchronisierung entfernen",
+    "remove_project_issue_sync_confirmation": "Sind Sie sicher, dass Sie diese Projekt-Issue-Synchronisierung entfernen möchten?",
+    "ISSUE_OPEN": "Issue Offen",
+    "ISSUE_CLOSED": "Issue Geschlossen",
+    "save": "Speichern",
+    "start_sync": "Synchronisierung starten",
+    "choose_repository": "Repository auswählen..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Verbinden und synchronisieren Sie Ihre Gitlab Enterprise-Instanz mit Plane.",
+    "app_form_title": "Gitlab Enterprise-Konfiguration",
+    "app_form_description": "Konfigurieren Sie Gitlab Enterprise für die Verbindung mit Plane.",
+    "base_url_title": "Basis-URL",
+    "base_url_description": "Die Basis-URL Ihrer Gitlab Enterprise-Instanz.",
+    "base_url_placeholder": "z.B. \"https://glab.plane.town\"",
+    "base_url_error": "Basis-URL ist erforderlich",
+    "invalid_base_url_error": "Ungültige Basis-URL",
+    "client_id_title": "App-ID",
+    "client_id_description": "Die App-ID der App, die Sie in Ihrer Gitlab Enterprise-Instanz erstellt haben.",
+    "client_id_placeholder": "z.B. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "App-ID ist erforderlich",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Das Client Secret der App, die Sie in Ihrer Gitlab Enterprise-Instanz erstellt haben.",
+    "client_secret_placeholder": "z.B. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client Secret ist erforderlich",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Ein zufälliges Webhook Secret, das zur Überprüfung des Webhooks von der Gitlab Enterprise-Instanz verwendet wird.",
+    "webhook_secret_placeholder": "z.B. \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook Secret ist erforderlich",
+    "connect_app": "App verbinden"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Verbinden Sie Ihren Slack-Workspace mit Plane.",
+    "connect_personal_account": "Verbinden Sie Ihr persönliches Slack-Konto mit Plane.",
+    "personal_account_connected": "Ihr persönliches {providerName}-Konto ist jetzt mit Plane verbunden.",
+    "link_personal_account": "Verknüpfen Sie Ihr persönliches {providerName}-Konto mit Plane.",
+    "connected_slack_workspaces": "Verbundene Slack-Workspaces",
+    "connected_on": "Verbunden am {date}",
+    "disconnect_workspace": "{name}-Workspace trennen",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Erhalten Sie Benachrichtigungen in Slack-Direktnachrichten für wichtige Updates, Erinnerungen und Benachrichtigungen nur für Sie."
+      }
+    },
+    "project_updates": {
+      "title": "Projekt-Updates",
+      "description": "Konfigurieren Sie Projekt-Update-Benachrichtigungen für Ihre Projekte",
+      "add_new_project_update": "Neue Projekt-Update-Benachrichtigung hinzufügen",
+      "project_updates_empty_state": "Mit Slack-Kanälen verbundene Projekte werden hier angezeigt.",
+      "project_updates_form": {
+        "title": "Projekt-Updates konfigurieren",
+        "description": "Erhalten Sie Projekt-Update-Benachrichtigungen in Slack, wenn Arbeitselemente erstellt werden",
+        "failed_to_load_channels": "Fehler beim Laden von Kanälen aus Slack",
+        "project_dropdown": {
+          "placeholder": "Wählen Sie ein Projekt",
+          "label": "Plane-Projekt",
+          "no_projects": "Keine Projekte verfügbar"
+        },
+        "channel_dropdown": {
+          "label": "Slack-Kanal",
+          "placeholder": "Wählen Sie einen Kanal",
+          "no_channels": "Keine Kanäle verfügbar"
+        },
+        "all_projects_connected": "Alle Projekte sind bereits mit Slack-Kanälen verbunden.",
+        "all_channels_connected": "Alle Slack-Kanäle sind bereits mit Projekten verbunden.",
+        "project_connection_success": "Projektverbindung erfolgreich erstellt",
+        "project_connection_updated": "Projektverbindung erfolgreich aktualisiert",
+        "project_connection_deleted": "Projektverbindung erfolgreich gelöscht",
+        "failed_delete_project_connection": "Fehler beim Löschen der Projektverbindung",
+        "failed_create_project_connection": "Fehler beim Erstellen der Projektverbindung",
+        "failed_upserting_project_connection": "Fehler beim Aktualisieren der Projektverbindung",
+        "failed_loading_project_connections": "Wir konnten Ihre Projektverbindungen nicht laden. Dies könnte auf ein Netzwerkproblem oder ein Problem mit der Integration zurückzuführen sein."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Verbinden Sie Ihren Sentry-Arbeitsbereich mit Plane.",
+    "connected_sentry_workspaces": "Verbundene Sentry-Arbeitsbereiche",
+    "connected_on": "Verbunden am {date}",
+    "disconnect_workspace": "Arbeitsbereich {name} trennen",
+    "state_mapping": {
+      "title": "Status-Zuordnung",
+      "description": "Ordnen Sie Sentry-Incident-Status Ihren Projekt-Status zu. Konfigurieren Sie, welche Status verwendet werden sollen, wenn ein Sentry-Incident gelöst oder ungelöst ist.",
+      "add_new_state_mapping": "Neue Status-Zuordnung hinzufügen",
+      "empty_state": "Keine Status-Zuordnungen konfiguriert. Erstellen Sie Ihre erste Zuordnung, um Sentry-Incident-Status mit Ihren Projekt-Status zu synchronisieren.",
+      "failed_loading_state_mappings": "Wir konnten Ihre Status-Zuordnungen nicht laden. Dies könnte an einem Netzwerkproblem oder einem Problem mit der Integration liegen.",
+      "loading_project_states": "Projekt-Status werden geladen...",
+      "error_loading_states": "Fehler beim Laden der Status",
+      "no_states_available": "Keine Status verfügbar",
+      "no_permission_states": "Sie haben keine Berechtigung, auf Status für dieses Projekt zuzugreifen",
+      "states_not_found": "Projekt-Status nicht gefunden",
+      "server_error_states": "Serverfehler beim Laden der Status"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Verbinden und synchronisieren Sie Ihre Bitbucket Data Center-Repositories mit Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Externe IdP-Token für API-Zugriff validieren.",
+    "header_description": "Validieren Sie extern ausgestellte OIDC/JWT-Token von Ihrem IdP (Azure AD, Okta usw.) für den Plane-API-Zugriff.",
+    "connected": "Verbunden",
+    "connect": "Verbinden",
+    "uninstall": "Deinstallieren",
+    "uninstalling": "Wird deinstalliert...",
+    "install_success": "OAuth Bridge erfolgreich installiert.",
+    "install_error": "OAuth Bridge konnte nicht installiert werden.",
+    "uninstall_success": "OAuth Bridge deinstalliert.",
+    "uninstall_error": "OAuth Bridge konnte nicht deinstalliert werden.",
+    "token_providers": "Token-Anbieter",
+    "token_providers_description": "Konfigurieren Sie externe IdPs, deren JWTs als API-Anmeldedaten akzeptiert werden.",
+    "add_provider": "Anbieter hinzufügen",
+    "edit_provider": "Anbieter bearbeiten",
+    "enabled": "Aktiviert",
+    "disabled": "Deaktiviert",
+    "test": "Testen",
+    "no_providers_title": "Keine Anbieter konfiguriert.",
+    "no_providers_description": "Fügen Sie einen IdP hinzu, um die externe Token-Authentifizierung zu aktivieren.",
+    "provider_updated": "Anbieter aktualisiert.",
+    "provider_added": "Anbieter hinzugefügt.",
+    "provider_save_error": "Anbieter konnte nicht gespeichert werden.",
+    "provider_deleted": "Anbieter gelöscht.",
+    "provider_delete_error": "Anbieter konnte nicht gelöscht werden.",
+    "provider_update_error": "Anbieter konnte nicht aktualisiert werden.",
+    "jwks_reachable": "JWKS erreichbar",
+    "jwks_unreachable": "JWKS nicht erreichbar",
+    "jwks_test_error": "JWKS konnte nicht von der konfigurierten URL abgerufen werden.",
+    "provider_form": {
+      "name_label": "Name",
+      "name_placeholder": "z.B. Azure AD Produktion",
+      "name_description": "Lesbarer Name für diesen Identitätsanbieter",
+      "name_required": "Name ist erforderlich.",
+      "issuer_label": "Aussteller",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Erwarteter iss-Claim-Wert im JWT",
+      "issuer_required": "Aussteller ist erforderlich.",
+      "jwks_url_label": "JWKS-URL",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "HTTPS-Endpunkt, der das JSON Web Key Set des Anbieters bereitstellt",
+      "jwks_url_required": "JWKS-URL ist erforderlich.",
+      "jwks_url_https": "JWKS-URL muss HTTPS verwenden.",
+      "audience_label": "Zielgruppe",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Erwartete(r) aud-Claim(s) im JWT, kommagetrennt.",
+      "user_claims_label": "Benutzer-Claim",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "JWT-Claim mit der E-Mail-Adresse des Benutzers",
+      "user_claims_required": "Benutzer-Claim ist erforderlich.",
+      "allowed_algorithms_label": "Erlaubte Signaturalgorithmen",
+      "allowed_algorithms_description": "Asymmetrische Algorithmen für die JWT-Signaturprüfung",
+      "allowed_algorithms_required": "Mindestens ein Algorithmus ist erforderlich.",
+      "select_algorithms": "Algorithmen auswählen",
+      "jwks_cache_ttl_label": "JWKS-Cache-TTL (Sekunden)",
+      "jwks_cache_ttl_description": "Wie lange die JWKS-Schlüssel des Anbieters gecacht werden (mindestens 60s, Standard 24 Stunden)",
+      "jwks_cache_ttl_min": "Cache-TTL muss mindestens 60 Sekunden betragen.",
+      "rate_limit_label": "Ratenlimit",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Anfragedrosselung als Anzahl/Zeitraum (z.B. 120/minute). Leer lassen für das Standard-Ratenlimit.",
+      "enable_provider": "Diesen Anbieter aktivieren",
+      "saving": "Wird gespeichert...",
+      "update": "Aktualisieren"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Verbinden und synchronisieren Sie Ihre GitHub Enterprise-Organisation mit Plane.",
+    "app_form_title": "GitHub Enterprise-Konfiguration",
+    "app_form_description": "Konfigurieren Sie GitHub Enterprise, um mit Plane zu verbinden.",
+    "app_id_title": "App-ID",
+    "app_id_description": "Die ID der App, die Sie in Ihrer GitHub Enterprise-Organisation erstellt haben.",
+    "app_id_placeholder": "z.B., \"1234567890\"",
+    "app_id_error": "App ID ist erforderlich",
+    "app_name_title": "App-Slug",
+    "app_name_description": "Der Slug der App, die Sie in Ihrer GitHub Enterprise-Organisation erstellt haben.",
+    "app_name_error": "App-Slug ist erforderlich",
+    "app_name_placeholder": "z.B., \"plane-github-enterprise\"",
+    "base_url_title": "Basis-URL",
+    "base_url_description": "Die Basis-URL Ihrer GitHub Enterprise-Organisation.",
+    "base_url_placeholder": "z.B., \"https://gh.plane.town\"",
+    "base_url_error": "Base URL ist erforderlich",
+    "invalid_base_url_error": "Ungültige Basis-URL",
+    "client_id_title": "Client-ID",
+    "client_id_description": "Die Client-ID der App, die Sie in Ihrer GitHub Enterprise-Organisation erstellt haben.",
+    "client_id_placeholder": "z.B., \"1234567890\"",
+    "client_id_error": "Client-ID ist erforderlich",
+    "client_secret_title": "Client-Secret",
+    "client_secret_description": "Das Client-Secret der App, die Sie in Ihrer GitHub Enterprise-Organisation erstellt haben.",
+    "client_secret_placeholder": "z.B., \"1234567890\"",
+    "client_secret_error": "Client-Secret ist erforderlich",
+    "webhook_secret_title": "Webhook-Secret",
+    "webhook_secret_description": "Das Webhook-Secret der App, die Sie in Ihrer GitHub Enterprise-Organisation erstellt haben.",
+    "webhook_secret_placeholder": "z.B., \"1234567890\"",
+    "webhook_secret_error": "Webhook-Secret ist erforderlich",
+    "private_key_title": "Privater Schlüssel (Base64-kodiert)",
+    "private_key_description": "Base64-kodierter privater Schlüssel der App, die Sie in Ihrer GitHub Enterprise-Organisation erstellt haben.",
+    "private_key_placeholder": "z.B., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Privater Schlüssel ist erforderlich",
+    "connect_app": "App verbinden"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Die angegebenen Abfrageparameter sind ungültig oder enthalten nicht die erforderlichen Felder",
+    "invalid_installation_account": "Das angegebene Installationskonto ist nicht gültig",
+    "generic_error": "Bei der Verarbeitung Ihrer Anfrage ist ein unerwarteter Fehler aufgetreten",
+    "connection_not_found": "Die angeforderte Verbindung konnte nicht gefunden werden",
+    "multiple_connections_found": "Es wurden mehrere Verbindungen gefunden, obwohl nur eine erwartet wurde",
+    "cannot_create_multiple_connections": "Sie haben Ihre Organisation bereits mit einem Arbeitsbereich verbunden. Bitte trennen Sie die bestehende Verbindung, bevor Sie eine neue herstellen.",
+    "installation_not_found": "Die angeforderte Installation konnte nicht gefunden werden",
+    "user_not_found": "Der angeforderte Benutzer konnte nicht gefunden werden",
+    "error_fetching_token": "Fehler beim Abrufen des Authentifizierungstokens",
+    "invalid_app_credentials": "Die bereitgestellten App-Anmeldeinformationen sind ungültig",
+    "invalid_app_installation_id": "Fehler beim Installieren der App"
+  },
+  "import_status": {
+    "queued": "In Warteschlange",
+    "created": "Erstellt",
+    "initiated": "Eingeleitet",
+    "pulling": "Abrufen",
+    "timed_out": "Zeitüberschreitung",
+    "pulled": "Abgerufen",
+    "progressing": "In Bearbeitung",
+    "transforming": "Umwandeln",
+    "transformed": "Umgewandelt",
+    "pushing": "Hochladen",
+    "finished": "Abgeschlossen",
+    "error": "Fehler",
+    "cancelled": "Abgebrochen"
+  }
+}
diff --git a/packages/i18n/src/locales/de/module.json b/packages/i18n/src/locales/de/module.json
new file mode 100644
index 0000000..9bb19b2
--- /dev/null
+++ b/packages/i18n/src/locales/de/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Modul} few {Module} other {Module}}",
+    "no_module": "Kein Modul",
+    "select": "Module hinzufügen"
+  }
+}
diff --git a/packages/i18n/src/locales/de/navigation.json b/packages/i18n/src/locales/de/navigation.json
new file mode 100644
index 0000000..bf22b25
--- /dev/null
+++ b/packages/i18n/src/locales/de/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Keine Ergebnisse gefunden"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Notizen",
+    "your_work": "Ihre Arbeit",
+    "projects": "Projekte",
+    "pages": "Seiten",
+    "new_work_item": "Neues Arbeitselement",
+    "home": "Startseite",
+    "inbox": "Posteingang",
+    "workspace": "Arbeitsbereich",
+    "views": "Ansichten",
+    "analytics": "Analysen",
+    "work_items": "Arbeitselemente",
+    "cycles": "Zyklen",
+    "modules": "Module",
+    "intake": "Eingang",
+    "drafts": "Entwürfe",
+    "favorites": "Favoriten",
+    "pro": "Pro",
+    "upgrade": "Upgrade",
+    "pi_chat": "Plane AI",
+    "epics": "Epics",
+    "upgrade_plan": "Plan upgraden",
+    "plane_pro": "Plane Pro",
+    "business": "Business"
+  }
+}
diff --git a/packages/i18n/src/locales/de/notification.json b/packages/i18n/src/locales/de/notification.json
new file mode 100644
index 0000000..8b9f7e9
--- /dev/null
+++ b/packages/i18n/src/locales/de/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Posteingang",
+    "page_label": "{workspace} - Posteingang",
+    "options": {
+      "mark_all_as_read": "Alle als gelesen markieren",
+      "mark_read": "Als gelesen markieren",
+      "mark_unread": "Als ungelesen markieren",
+      "refresh": "Aktualisieren",
+      "filters": "Posteingangsfilter",
+      "show_unread": "Ungelesene anzeigen",
+      "show_snoozed": "Verschobene anzeigen",
+      "show_archived": "Archivierte anzeigen",
+      "mark_archive": "Archivieren",
+      "mark_unarchive": "Archivierung aufheben",
+      "mark_snooze": "Verschieben",
+      "mark_unsnooze": "Wiederherstellen"
+    },
+    "toasts": {
+      "read": "Benachrichtigung gelesen",
+      "unread": "Als ungelesen markiert",
+      "archived": "Archiviert",
+      "unarchived": "Archivierung aufgehoben",
+      "snoozed": "Verschoben",
+      "unsnoozed": "Wiederhergestellt"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Wählen Sie ein Element, um Details anzuzeigen."
+      },
+      "all": {
+        "title": "Keine zugewiesenen Elemente",
+        "description": "Hier sehen Sie Aktualisierungen zu Ihnen zugewiesenen Elementen."
+      },
+      "mentions": {
+        "title": "Keine Erwähnungen",
+        "description": "Hier sehen Sie Erwähnungen über Sie."
+      }
+    },
+    "tabs": {
+      "all": "Alle",
+      "mentions": "Erwähnungen"
+    },
+    "filter": {
+      "assigned": "Mir zugewiesen",
+      "created": "Von mir erstellt",
+      "subscribed": "Abonniert"
+    },
+    "snooze": {
+      "1_day": "1 Tag",
+      "3_days": "3 Tage",
+      "5_days": "5 Tage",
+      "1_week": "1 Woche",
+      "2_weeks": "2 Wochen",
+      "custom": "Benutzerdefiniert"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/page.json b/packages/i18n/src/locales/de/page.json
new file mode 100644
index 0000000..4d97bef
--- /dev/null
+++ b/packages/i18n/src/locales/de/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Gliederung",
+        "empty_state": {
+          "title": "Fehlende Überschriften",
+          "description": "Fügen Sie einige Überschriften zu dieser Seite hinzu, um sie hier zu sehen."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Wörter",
+          "characters": "Zeichen",
+          "paragraphs": "Absätze",
+          "read_time": "Lesezeit"
+        },
+        "actors_info": {
+          "edited_by": "Bearbeitet von",
+          "created_by": "Erstellt von"
+        },
+        "version_history": {
+          "label": "Versionsverlauf",
+          "current_version": "Aktuelle Version",
+          "highlight_changes": "Änderungen hervorheben"
+        }
+      },
+      "assets": {
+        "label": "Assets",
+        "download_button": "Herunterladen",
+        "empty_state": {
+          "title": "Fehlende Bilder",
+          "description": "Fügen Sie Bilder hinzu, um sie hier zu sehen."
+        }
+      },
+      "comments": {
+        "label": "Kommentare",
+        "empty_state": {
+          "title": "Keine Kommentare",
+          "description": "Fügen Sie Kommentare hinzu, um sie hier zu sehen."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Der Notizname darf nicht länger als 100 Zeichen sein.",
+        "already_exists": "Es existiert bereits eine Notiz ohne Beschreibung"
+      },
+      "created": {
+        "title": "Notiz erstellt",
+        "message": "Die Notiz wurde erfolgreich erstellt"
+      },
+      "not_created": {
+        "title": "Notiz nicht erstellt",
+        "message": "Die Notiz konnte nicht erstellt werden"
+      },
+      "updated": {
+        "title": "Notiz aktualisiert",
+        "message": "Die Notiz wurde erfolgreich aktualisiert"
+      },
+      "not_updated": {
+        "title": "Notiz nicht aktualisiert",
+        "message": "Die Notiz konnte nicht aktualisiert werden"
+      },
+      "removed": {
+        "title": "Notiz entfernt",
+        "message": "Die Notiz wurde erfolgreich entfernt"
+      },
+      "not_removed": {
+        "title": "Notiz nicht entfernt",
+        "message": "Die Notiz konnte nicht entfernt werden"
+      }
+    },
+    "open_button": "Navigationsbereich öffnen",
+    "close_button": "Navigationsbereich schließen",
+    "outline_floating_button": "Gliederung öffnen"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Verschieben",
+        "loading": "Wird verschoben"
+      },
+      "cannot_move_to_teamspace": "Private und geteilte Seiten können nicht in einen Teamspace verschoben werden.",
+      "placeholders": {
+        "workspace_to_all": "Nach Projekten und Teamspaces suchen",
+        "workspace_to_project": "Nach Projekten suchen",
+        "project_to_all": "Nach Projekten und Teamspaces suchen",
+        "project_to_project": "Nach Projekten suchen",
+        "project_to_all_with_wiki": "Nach Wiki-Sammlungen, Projekten und Teamspaces suchen",
+        "project_to_project_with_wiki": "Nach Wiki-Sammlungen und Projekten suchen"
+      },
+      "toasts": {
+        "success": {
+          "title": "Erfolg!",
+          "message": "Seite erfolgreich verschoben."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Seite konnte nicht verschoben werden. Bitte versuchen Sie es später erneut."
+        },
+        "collection_error": {
+          "title": "In Wiki verschoben",
+          "message": "Die Seite wurde ins Wiki verschoben, konnte aber nicht zur ausgewählten Sammlung hinzugefügt werden. Sie bleibt in General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Aus Sammlung entfernen",
+      "success_message": "Seite aus Sammlung entfernt.",
+      "error_message": "Die Seite konnte nicht aus der Sammlung entfernt werden. Bitte versuchen Sie es erneut."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Inhaltslimit erreicht, Live-Synchronisierung ist deaktiviert. Neue Seite erstellen oder verschachtelte Seiten verwenden, um die Synchronisierung fortzusetzen."
+  }
+}
diff --git a/packages/i18n/src/locales/de/power-k.json b/packages/i18n/src/locales/de/power-k.json
new file mode 100644
index 0000000..278be21
--- /dev/null
+++ b/packages/i18n/src/locales/de/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Arbeitselemente massenweise löschen"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Arbeitselement-Aktionen",
+        "indicator": "Arbeitselement",
+        "change_state": "Status ändern",
+        "change_priority": "Priorität ändern",
+        "change_assignees": "Zuweisen an",
+        "assign_to_me": "Mir zuweisen",
+        "unassign_from_me": "Zuweisung aufheben",
+        "change_estimate": "Schätzung ändern",
+        "add_to_cycle": "Zum Zyklus hinzufügen",
+        "add_to_modules": "Zu Modulen hinzufügen",
+        "add_labels": "Labels hinzufügen",
+        "subscribe": "Benachrichtigungen abonnieren",
+        "unsubscribe": "Benachrichtigungen abbestellen",
+        "delete": "Löschen",
+        "copy_id": "ID kopieren",
+        "copy_id_toast_success": "Arbeitselement-ID in die Zwischenablage kopiert.",
+        "copy_id_toast_error": "Fehler beim Kopieren der Arbeitselement-ID in die Zwischenablage.",
+        "copy_title": "Titel kopieren",
+        "copy_title_toast_success": "Arbeitselement-Titel in die Zwischenablage kopiert.",
+        "copy_title_toast_error": "Fehler beim Kopieren des Arbeitselement-Titels in die Zwischenablage.",
+        "copy_url": "URL kopieren",
+        "copy_url_toast_success": "Arbeitselement-URL in die Zwischenablage kopiert.",
+        "copy_url_toast_error": "Fehler beim Kopieren der Arbeitselement-URL in die Zwischenablage."
+      },
+      "cycle": {
+        "title": "Zyklus-Aktionen",
+        "indicator": "Zyklus",
+        "add_to_favorites": "Zu Favoriten hinzufügen",
+        "remove_from_favorites": "Aus Favoriten entfernen",
+        "copy_url": "URL kopieren",
+        "copy_url_toast_success": "Zyklus-URL in die Zwischenablage kopiert.",
+        "copy_url_toast_error": "Fehler beim Kopieren der Zyklus-URL in die Zwischenablage."
+      },
+      "module": {
+        "title": "Modul-Aktionen",
+        "indicator": "Modul",
+        "add_remove_members": "Mitglieder hinzufügen/entfernen",
+        "change_status": "Status ändern",
+        "add_to_favorites": "Zu Favoriten hinzufügen",
+        "remove_from_favorites": "Aus Favoriten entfernen",
+        "copy_url": "URL kopieren",
+        "copy_url_toast_success": "Modul-URL in die Zwischenablage kopiert.",
+        "copy_url_toast_error": "Fehler beim Kopieren der Modul-URL in die Zwischenablage."
+      },
+      "page": {
+        "title": "Seiten-Aktionen",
+        "indicator": "Seite",
+        "lock": "Sperren",
+        "unlock": "Entsperren",
+        "make_private": "Privat machen",
+        "make_public": "Öffentlich machen",
+        "archive": "Archivieren",
+        "restore": "Wiederherstellen",
+        "add_to_favorites": "Zu Favoriten hinzufügen",
+        "remove_from_favorites": "Aus Favoriten entfernen",
+        "copy_url": "URL kopieren",
+        "copy_url_toast_success": "Seiten-URL in die Zwischenablage kopiert.",
+        "copy_url_toast_error": "Fehler beim Kopieren der Seiten-URL in die Zwischenablage."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Neues Arbeitselement",
+      "create_page": "Neue Seite",
+      "create_view": "Neue Ansicht",
+      "create_cycle": "Neuer Zyklus",
+      "create_module": "Neues Modul",
+      "create_project": "Neues Projekt",
+      "create_workspace": "Neuer Arbeitsbereich",
+      "create_project_automation": "Neue Automatisierung"
+    },
+    "navigation_actions": {
+      "open_workspace": "Arbeitsbereich öffnen",
+      "nav_home": "Zur Startseite",
+      "nav_inbox": "Zum Posteingang",
+      "nav_your_work": "Zu Ihrer Arbeit",
+      "nav_account_settings": "Zu Kontoeinstellungen",
+      "open_project": "Projekt öffnen",
+      "nav_projects_list": "Zur Projektliste",
+      "nav_all_workspace_work_items": "Zu allen Arbeitselementen",
+      "nav_assigned_workspace_work_items": "Zu zugewiesenen Arbeitselementen",
+      "nav_created_workspace_work_items": "Zu erstellten Arbeitselementen",
+      "nav_subscribed_workspace_work_items": "Zu abonnierten Arbeitselementen",
+      "nav_workspace_analytics": "Zu Arbeitsbereich-Analysen",
+      "nav_workspace_drafts": "Zu Arbeitsbereich-Entwürfen",
+      "nav_workspace_archives": "Zu Arbeitsbereich-Archiven",
+      "open_workspace_setting": "Arbeitsbereichseinstellung öffnen",
+      "nav_workspace_settings": "Zu Arbeitsbereichseinstellungen",
+      "nav_project_work_items": "Zu Arbeitselementen",
+      "open_project_cycle": "Zyklus öffnen",
+      "nav_project_cycles": "Zu Zyklen",
+      "open_project_module": "Modul öffnen",
+      "nav_project_modules": "Zu Modulen",
+      "open_project_view": "Projektansicht öffnen",
+      "nav_project_views": "Zu Projektansichten",
+      "nav_project_pages": "Zu Seiten",
+      "nav_project_intake": "Zum Intake",
+      "nav_project_archives": "Zu Projektarchiven",
+      "open_project_setting": "Projekteinstellung öffnen",
+      "nav_project_settings": "Zu Projekteinstellungen",
+      "nav_workspace_active_cycle": "Zu allen aktiven Zyklen",
+      "nav_project_overview": "Zur Projektübersicht"
+    },
+    "account_actions": {
+      "sign_out": "Abmelden",
+      "workspace_invites": "Arbeitsbereich-Einladungen"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "App-Seitenleiste umschalten",
+      "copy_current_page_url": "Aktuelle Seiten-URL kopieren",
+      "copy_current_page_url_toast_success": "Aktuelle Seiten-URL in die Zwischenablage kopiert.",
+      "copy_current_page_url_toast_error": "Fehler beim Kopieren der aktuellen Seiten-URL in die Zwischenablage.",
+      "focus_top_nav_search": "Suchfeld fokussieren"
+    },
+    "preferences_actions": {
+      "update_theme": "Erscheinungsbild ändern",
+      "update_timezone": "Zeitzone ändern",
+      "update_start_of_week": "Ersten Wochentag ändern",
+      "update_language": "Sprache der Benutzeroberfläche ändern",
+      "toast": {
+        "theme": {
+          "success": "Erscheinungsbild erfolgreich aktualisiert.",
+          "error": "Erscheinungsbild konnte nicht aktualisiert werden. Bitte versuchen Sie es erneut."
+        },
+        "timezone": {
+          "success": "Zeitzone erfolgreich aktualisiert.",
+          "error": "Zeitzone konnte nicht aktualisiert werden. Bitte versuchen Sie es erneut."
+        },
+        "generic": {
+          "success": "Einstellungen erfolgreich aktualisiert.",
+          "error": "Einstellungen konnten nicht aktualisiert werden. Bitte versuchen Sie es erneut."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Tastenkombinationen öffnen",
+      "open_plane_documentation": "Plane-Dokumentation öffnen",
+      "join_forum": "Forum beitreten",
+      "report_bug": "Fehler melden",
+      "chat_with_us": "Chat mit uns"
+    },
+    "page_placeholders": {
+      "default": "Befehl eingeben oder suchen",
+      "open_workspace": "Arbeitsbereich öffnen",
+      "open_project": "Projekt öffnen",
+      "open_workspace_setting": "Arbeitsbereichseinstellung öffnen",
+      "open_project_cycle": "Zyklus öffnen",
+      "open_project_module": "Modul öffnen",
+      "open_project_view": "Projektansicht öffnen",
+      "open_project_setting": "Projekteinstellung öffnen",
+      "update_work_item_state": "Status ändern",
+      "update_work_item_priority": "Priorität ändern",
+      "update_work_item_assignee": "Zuweisen an",
+      "update_work_item_estimate": "Schätzung ändern",
+      "update_work_item_cycle": "Zum Zyklus hinzufügen",
+      "update_work_item_module": "Zu Modulen hinzufügen",
+      "update_work_item_labels": "Labels hinzufügen",
+      "update_module_member": "Mitglieder ändern",
+      "update_module_status": "Status ändern",
+      "update_theme": "Erscheinungsbild ändern",
+      "update_timezone": "Zeitzone ändern",
+      "update_start_of_week": "Ersten Wochentag ändern",
+      "update_language": "Sprache ändern"
+    },
+    "search_menu": {
+      "no_results": "Keine Ergebnisse gefunden",
+      "clear_search": "Suche löschen",
+      "go_to_advanced_search": "Zur erweiterten Suche"
+    },
+    "footer": {
+      "workspace_level": "Arbeitsbereich-Ebene"
+    },
+    "group_titles": {
+      "actions": "Aktionen",
+      "contextual": "Kontextbezogen",
+      "navigation": "Navigieren",
+      "create": "Erstellen",
+      "general": "Allgemein",
+      "settings": "Einstellungen",
+      "account": "Konto",
+      "miscellaneous": "Sonstiges",
+      "preferences": "Präferenzen",
+      "help": "Hilfe"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/project-settings.json b/packages/i18n/src/locales/de/project-settings.json
new file mode 100644
index 0000000..74afb0c
--- /dev/null
+++ b/packages/i18n/src/locales/de/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Geben Sie eine Projekt-ID ein",
+      "please_select_a_timezone": "Bitte wählen Sie eine Zeitzone aus",
+      "archive_project": {
+        "title": "Projekt archivieren",
+        "description": "Durch das Archivieren wird das Projekt im Menü ausgeblendet. Der Zugriff bleibt über die Projektseite bestehen.",
+        "button": "Projekt archivieren"
+      },
+      "delete_project": {
+        "title": "Projekt löschen",
+        "description": "Durch das Löschen des Projekts werden alle zugehörigen Daten entfernt. Diese Aktion ist nicht umkehrbar.",
+        "button": "Projekt löschen"
+      },
+      "toast": {
+        "success": "Projekt aktualisiert",
+        "error": "Aktualisierung fehlgeschlagen. Bitte versuchen Sie es erneut."
+      }
+    },
+    "members": {
+      "label": "Mitglieder",
+      "project_lead": "Projektleitung",
+      "project_lead_description": "Wählen Sie den Projektleiter für das Projekt aus.",
+      "default_assignee": "Standardzuweisung",
+      "default_assignee_description": "Wählen Sie den Standard-Zuständigen für das Projekt aus.",
+      "project_subscribers": "Projektabonnenten",
+      "project_subscribers_description": "Wählen Sie Mitglieder aus, die Benachrichtigungen für dieses Projekt erhalten.",
+      "guest_super_permissions": {
+        "title": "Gastbenutzern Zugriff auf alle Elemente gewähren:",
+        "sub_heading": "Gäste sehen alle Elemente im Projekt."
+      },
+      "invite_members": {
+        "title": "Mitglieder einladen",
+        "sub_heading": "Laden Sie Mitglieder in das Projekt ein.",
+        "select_co_worker": "Wählen Sie einen Mitarbeiter"
+      }
+    },
+    "states": {
+      "heading": "Status",
+      "description": "Definieren und passen Sie Workflow-Status an, um den Fortschritt Ihrer Arbeitselemente zu verfolgen.",
+      "describe_this_state_for_your_members": "Beschreiben Sie diesen Status für Ihre Mitglieder.",
+      "empty_state": {
+        "title": "Keine Status für die Gruppe {groupKey}",
+        "description": "Erstellen Sie einen neuen Status"
+      }
+    },
+    "labels": {
+      "heading": "Labels",
+      "description": "Erstellen Sie benutzerdefinierte Labels, um Ihre Arbeitselemente zu kategorisieren und zu organisieren",
+      "label_title": "Labelname",
+      "label_title_is_required": "Ein Labelname ist erforderlich",
+      "label_max_char": "Der Labelname darf nicht mehr als 255 Zeichen enthalten",
+      "toast": {
+        "error": "Fehler beim Aktualisieren des Labels"
+      }
+    },
+    "estimates": {
+      "heading": "Schätzungen",
+      "description": "Sie helfen Ihnen, die Komplexität und Arbeitsbelastung des Teams zu kommunizieren.",
+      "label": "Schätzungen",
+      "title": "Schätzungen für mein Projekt aktivieren",
+      "enable_description": "Sie helfen Ihnen, die Komplexität und Arbeitsbelastung des Teams zu kommunizieren.",
+      "no_estimate": "Keine Schätzung",
+      "new": "Neues Schätzungssystem",
+      "create": {
+        "custom": "Benutzerdefiniert",
+        "start_from_scratch": "Von Grund auf neu",
+        "choose_template": "Vorlage wählen",
+        "choose_estimate_system": "Schätzungssystem wählen",
+        "enter_estimate_point": "Schätzung eingeben",
+        "step": "Schritt {step} von {total}",
+        "label": "Schätzung erstellen"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Schätzung erstellt",
+            "message": "Die Schätzung wurde erfolgreich erstellt"
+          },
+          "error": {
+            "title": "Schätzungserstellung fehlgeschlagen",
+            "message": "Wir konnten die neue Schätzung nicht erstellen, bitte versuche es erneut."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Schätzung geändert",
+            "message": "Die Schätzung wurde in deinem Projekt aktualisiert."
+          },
+          "error": {
+            "title": "Schätzungsänderung fehlgeschlagen",
+            "message": "Wir konnten die Schätzung nicht ändern, bitte versuche es erneut"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Erfolg!",
+            "message": "Schätzungen wurden aktiviert."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Erfolg!",
+            "message": "Schätzungen wurden deaktiviert."
+          },
+          "error": {
+            "title": "Fehler!",
+            "message": "Schätzung konnte nicht deaktiviert werden. Bitte versuche es erneut"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Schätzungen neu geordnet",
+            "message": "Die Schätzungen wurden in Ihrem Projekt neu geordnet."
+          },
+          "error": {
+            "title": "Neuordnung der Schätzungen fehlgeschlagen",
+            "message": "Die Schätzungen konnten nicht neu geordnet werden, bitte versuchen Sie es erneut"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Schätzungssystem erstellt",
+            "message": "Erfolgreich erstellt und aktiviert"
+          },
+          "error": {
+            "title": "Fehler",
+            "message": "Etwas ist schiefgelaufen"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Die Schätzung muss größer als 0 sein.",
+        "unable_to_process": "Wir können deine Anfrage nicht verarbeiten, bitte versuche es erneut.",
+        "numeric": "Die Schätzung muss ein numerischer Wert sein.",
+        "character": "Die Schätzung muss ein Zeichenwert sein.",
+        "empty": "Der Schätzungswert darf nicht leer sein.",
+        "already_exists": "Der Schätzungswert existiert bereits.",
+        "unsaved_changes": "Sie haben ungespeicherte Änderungen. Bitte speichern Sie diese, bevor Sie auf Fertig klicken",
+        "remove_empty": "Die Schätzung darf nicht leer sein. Geben Sie einen Wert in jedes Feld ein oder entfernen Sie die Felder, für die Sie keine Werte haben.",
+        "fill": "Bitte füllen Sie dieses Schätzungsfeld aus",
+        "repeat": "Schätzungswert darf nicht wiederholt werden"
+      },
+      "systems": {
+        "points": {
+          "label": "Punkte",
+          "fibonacci": "Fibonacci",
+          "linear": "Linear",
+          "squares": "Quadrate",
+          "custom": "Benutzerdefiniert"
+        },
+        "categories": {
+          "label": "Kategorien",
+          "t_shirt_sizes": "T-Shirt-Größen",
+          "easy_to_hard": "Einfach bis schwer",
+          "custom": "Benutzerdefiniert"
+        },
+        "time": {
+          "label": "Zeit",
+          "hours": "Stunden"
+        }
+      },
+      "edit": {
+        "title": "Schätzsystem bearbeiten",
+        "add_or_update": {
+          "title": "Schätzungen hinzufügen, aktualisieren oder entfernen",
+          "description": "Verwalten Sie das aktuelle System durch Hinzufügen, Aktualisieren oder Entfernen von Punkten oder Kategorien."
+        },
+        "switch": {
+          "title": "Schätzungstyp ändern",
+          "description": "Konvertieren Sie Ihr Punktesystem in ein Kategoriesystem und umgekehrt."
+        }
+      },
+      "switch": "Schätzsystem wechseln",
+      "current": "Aktuelles Schätzsystem",
+      "select": "Wählen Sie ein Schätzsystem"
+    },
+    "automations": {
+      "label": "Automatisierungen",
+      "heading": "Automatisierungen",
+      "description": "Konfigurieren Sie automatisierte Aktionen, um Ihren Projektmanagement-Workflow zu optimieren und manuelle Aufgaben zu reduzieren.",
+      "auto-archive": {
+        "title": "Geschlossene Arbeitselemente automatisch archivieren",
+        "description": "Plane archiviert automatisch Arbeitselemente, die abgeschlossen oder abgebrochen wurden.",
+        "duration": "Arbeitselemente automatisch archivieren, die geschlossen sind seit"
+      },
+      "auto-close": {
+        "title": "Arbeitselemente automatisch schließen",
+        "description": "Plane schließt automatisch Arbeitselemente, die nicht abgeschlossen oder abgebrochen wurden.",
+        "duration": "Arbeitselemente automatisch schließen, die inaktiv sind seit",
+        "auto_close_status": "Auto-Schließ-Status"
+      },
+      "auto-remind": {
+        "title": "Automatische Erinnerungen",
+        "description": "Plane wird automatische Erinnerungen via E-Mail und in-App-Benachrichtigungen senden, um Ihr Team auf den Lauf der Dinge zu halten.",
+        "duration": "Erinnerung vor"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Keine Labels",
+        "description": "Erstellen Sie Labels, um Elemente zu organisieren."
+      },
+      "estimates": {
+        "title": "Keine Schätzungssysteme",
+        "description": "Erstellen Sie ein Schätzungssystem, um den Aufwand zu kommunizieren.",
+        "primary_button": "Schätzungssystem hinzufügen"
+      },
+      "integrations": {
+        "title": "Keine Integrationen konfiguriert",
+        "description": "Konfigurieren Sie GitHub und andere Integrationen, um Ihre Projektarbeitsaufgaben zu synchronisieren."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Workflows aktivieren",
+        "description": "Legen Sie Workflows fest, um die Bewegung von Arbeitselementen zu steuern",
+        "no_states_tooltip": "Keine Status wurden dem Workflow hinzugefügt.",
+        "no_work_item_types_tooltip": "Keine Arbeitsaufgabentypen wurden dem Workflow hinzugefügt.",
+        "no_states_or_work_item_types_tooltip": "Keine Status oder Arbeitsaufgabentypen wurden dem Workflow hinzugefügt.",
+        "toast": {
+          "loading": {
+            "enabling": "Workflows werden aktiviert",
+            "disabling": "Workflows werden deaktiviert"
+          },
+          "success": {
+            "title": "Erfolg!",
+            "message": "Workflows erfolgreich aktiviert."
+          },
+          "error": {
+            "title": "Fehler!",
+            "message": "Workflows konnten nicht aktiviert werden. Bitte versuchen Sie es erneut."
+          }
+        }
+      },
+      "heading": "Workflows",
+      "description": "Automatisieren Sie Übergänge von Arbeitselementen und legen Sie Regeln fest, um zu steuern, wie Aufgaben durch Ihre Projektpipeline fließen.",
+      "add_button": "Neuen Workflow hinzufügen",
+      "search": "Workflows suchen",
+      "detail": {
+        "define": "Workflow definieren",
+        "add_states": "Status hinzufügen",
+        "unmapped_states": {
+          "title": "Nicht zugeordnete Status erkannt",
+          "description": "Einige Arbeitselemente der ausgewählten Typen befinden sich derzeit in Status, die in diesem Workflow nicht vorhanden sind.",
+          "note": "Wenn Sie diesen Workflow aktivieren, werden diese Elemente automatisch in den Anfangsstatus dieses Workflows verschoben.",
+          "label": "Fehlende Status",
+          "tooltip": "Einige Arbeitselemente befinden sich in Status, die diesem Workflow nicht zugeordnet sind. Öffnen Sie den Workflow zur Überprüfung."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Alle Status werden verwendet",
+          "description": "Alle für dieses Projekt definierten Status sind bereits in Ihrem aktuellen Workflow vorhanden."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Dieser Workflow gilt für jeden Arbeitselementtyp, der keinem Workflow zugeordnet ist."
+      },
+      "create": {
+        "heading": "Neuen Workflow erstellen",
+        "name": {
+          "placeholder": "Einen eindeutigen Namen hinzufügen",
+          "validation": {
+            "max_length": "Der Name darf nicht mehr als 255 Zeichen haben",
+            "required": "Name ist erforderlich",
+            "invalid": "Der Name darf nur Buchstaben, Zahlen, Leerzeichen, Bindestriche und Apostrophe enthalten"
+          }
+        },
+        "description": {
+          "placeholder": "Eine kurze Beschreibung hinzufügen",
+          "validation": {
+            "invalid": "Die Beschreibung darf nur Buchstaben, Zahlen, Leerzeichen, Bindestriche und Apostrophe enthalten"
+          }
+        },
+        "work_item_type": {
+          "label": "Arbeitselementtyp"
+        },
+        "success": {
+          "title": "Erfolg!",
+          "message": "Workflow erfolgreich erstellt."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Workflow konnte nicht erstellt werden. Bitte versuchen Sie es erneut."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Erfolg!",
+          "message": "Workflow erfolgreich aktualisiert."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Workflow konnte nicht aktualisiert werden. Bitte versuchen Sie es erneut."
+        }
+      },
+      "delete": {
+        "loading": "Workflow wird gelöscht",
+        "success": {
+          "title": "Erfolg!",
+          "message": "Workflow erfolgreich gelöscht."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Workflow konnte nicht gelöscht werden. Bitte versuchen Sie es erneut."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Erfolg!",
+          "message": "Status erfolgreich hinzugefügt."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Status konnten nicht hinzugefügt werden. Bitte versuchen Sie es erneut."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Arbeitselementtypen",
+      "description": "Erstellen und passen Sie verschiedene Typen von Arbeitselementen mit einzigartigen Eigenschaften an"
+    },
+    "features": {
+      "cycles": {
+        "title": "Zyklen",
+        "short_title": "Zyklen",
+        "description": "Planen Sie die Arbeit in flexiblen Zeiträumen, die sich dem einzigartigen Rhythmus und Tempo dieses Projekts anpassen.",
+        "toggle_title": "Zyklen aktivieren",
+        "toggle_description": "Planen Sie die Arbeit in fokussierten Zeiträumen."
+      },
+      "modules": {
+        "title": "Module",
+        "short_title": "Module",
+        "description": "Organisieren Sie die Arbeit in Teilprojekte mit engagierten Leitern und Verantwortlichen.",
+        "toggle_title": "Module aktivieren",
+        "toggle_description": "Projektmitglieder können Module erstellen und bearbeiten."
+      },
+      "views": {
+        "title": "Ansichten",
+        "short_title": "Ansichten",
+        "description": "Speichern Sie benutzerdefinierte Sortierungen, Filter und Anzeigeoptionen oder teilen Sie sie mit Ihrem Team.",
+        "toggle_title": "Ansichten aktivieren",
+        "toggle_description": "Projektmitglieder können Ansichten erstellen und bearbeiten."
+      },
+      "pages": {
+        "title": "Seiten",
+        "short_title": "Seiten",
+        "description": "Erstellen und bearbeiten Sie freie Inhalte: Notizen, Dokumente, alles.",
+        "toggle_title": "Seiten aktivieren",
+        "toggle_description": "Projektmitglieder können Seiten erstellen und bearbeiten."
+      },
+      "intake": {
+        "intake_responsibility": "Intake-Verantwortung",
+        "intake_sources": "Intake-Quellen",
+        "title": "Aufnahme",
+        "short_title": "Aufnahme",
+        "description": "Ermöglichen Sie Nicht-Mitgliedern, Fehler, Feedback und Vorschläge zu teilen, ohne Ihren Workflow zu unterbrechen.",
+        "toggle_title": "Aufnahme aktivieren",
+        "toggle_description": "Projektmitgliedern erlauben, In-App-Aufnahmeanfragen zu erstellen.",
+        "toggle_tooltip_on": "Bitten Sie Ihren Projekt-Admin, dies zu aktivieren.",
+        "toggle_tooltip_off": "Bitten Sie Ihren Projekt-Admin, dies zu deaktivieren.",
+        "notify_assignee": {
+          "title": "Zuständige benachrichtigen",
+          "description": "Für eine neue Intake-Anfrage werden die Standard-Zuständigen über Benachrichtigungen informiert"
+        },
+        "in_app": {
+          "title": "In der App",
+          "description": "Erhalten Sie neue Arbeitselemente von Mitgliedern und Gästen in Ihrem Arbeitsbereich, ohne Ihre bestehenden Arbeitselemente zu stören."
+        },
+        "email": {
+          "title": "E-Mail",
+          "description": "Sammeln Sie neue Arbeitselemente von allen, die eine E-Mail an eine Plane-E-Mail-Adresse senden.",
+          "fieldName": "E-Mail-ID"
+        },
+        "form": {
+          "title": "Formulare",
+          "description": "Ermöglichen Sie Personen außerhalb Ihres Arbeitsbereichs, über ein dediziertes und sicheres Formular potenzielle neue Arbeitselemente zu erstellen.",
+          "fieldName": "Standard-Formular-URL",
+          "create_forms": "Formulare mit Arbeitselementtypen erstellen",
+          "manage_forms": "Formulare verwalten",
+          "manage_forms_tooltip": "Bitten Sie Ihren Arbeitsbereichs-Admin, dies zu verwalten.",
+          "create_form": "Formular erstellen",
+          "edit_form": "Formulardetails bearbeiten",
+          "form_title": "Formulartitel",
+          "form_title_required": "Formulartitel ist erforderlich",
+          "work_item_type": "Arbeitselementtyp",
+          "remove_property": "Eigenschaft entfernen",
+          "select_properties": "Eigenschaften auswählen",
+          "search_placeholder": "Nach Eigenschaften suchen",
+          "toasts": {
+            "success_create": "Intake-Formular erfolgreich erstellt",
+            "success_update": "Intake-Formular erfolgreich aktualisiert",
+            "error_create": "Intake-Formular konnte nicht erstellt werden",
+            "error_update": "Intake-Formular konnte nicht aktualisiert werden"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Zuständige werden festgelegt...",
+            "success": {
+              "title": "Erfolg!",
+              "message": "Zuständige erfolgreich festgelegt."
+            },
+            "error": {
+              "title": "Fehler!",
+              "message": "Beim Festlegen der Zuständigen ist etwas schiefgelaufen. Bitte versuchen Sie es erneut."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Zeiterfassung",
+        "short_title": "Zeiterfassung",
+        "description": "Erfassen Sie die für Arbeitselemente und Projekte aufgewendete Zeit.",
+        "toggle_title": "Zeiterfassung aktivieren",
+        "toggle_description": "Projektmitglieder können die geleistete Arbeit protokollieren."
+      },
+      "milestones": {
+        "title": "Meilensteine",
+        "short_title": "Meilensteine",
+        "description": "Meilensteine bieten eine Ebene, um Arbeitselemente auf gemeinsame Fertigstellungstermine auszurichten.",
+        "toggle_title": "Meilensteine aktivieren",
+        "toggle_description": "Organisieren Sie Arbeitselemente nach Meilenstein-Fristen."
+      },
+      "toasts": {
+        "loading": "Projektfunktion wird aktualisiert...",
+        "success": "Projektfunktion erfolgreich aktualisiert.",
+        "error": "Beim Aktualisieren der Projektfunktion ist etwas schiefgelaufen. Bitte versuchen Sie es erneut."
+      }
+    },
+    "project_updates": {
+      "heading": "Projektaktualisierungen",
+      "description": "Konsolidierte Nachverfolgung und Fortschrittsüberwachung für dieses Projekt"
+    },
+    "templates": {
+      "heading": "Vorlagen",
+      "description": "Sparen Sie 80% der Zeit beim Erstellen von Projekten, Arbeitselementen und Seiten, wenn Sie Vorlagen verwenden."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Automatische Zyklusplanung",
+        "description": "Halten Sie Zyklen ohne manuelle Einrichtung in Bewegung.",
+        "tooltip": "Erstellen Sie automatisch neue Zyklen basierend auf Ihrem gewählten Zeitplan.",
+        "edit_button": "Bearbeiten",
+        "form": {
+          "cycle_title": {
+            "label": "Zyklustitel",
+            "placeholder": "Titel",
+            "tooltip": "Der Titel wird für nachfolgende Zyklen mit Nummern ergänzt. Zum Beispiel: Design - 1/2/3",
+            "validation": {
+              "required": "Zyklustitel ist erforderlich",
+              "max_length": "Der Titel darf 255 Zeichen nicht überschreiten"
+            }
+          },
+          "cycle_duration": {
+            "label": "Zyklusdauer",
+            "unit": "Wochen",
+            "validation": {
+              "required": "Zyklusdauer ist erforderlich",
+              "min": "Die Zyklusdauer muss mindestens 1 Woche betragen",
+              "max": "Die Zyklusdauer darf 30 Wochen nicht überschreiten",
+              "positive": "Die Zyklusdauer muss positiv sein"
+            }
+          },
+          "cooldown_period": {
+            "label": "Abkühlungsphase",
+            "unit": "Tage",
+            "tooltip": "Pause zwischen Zyklen, bevor der nächste beginnt.",
+            "validation": {
+              "required": "Abkühlungsphase ist erforderlich",
+              "negative": "Die Abkühlungsphase darf nicht negativ sein"
+            }
+          },
+          "start_date": {
+            "label": "Zyklus-Starttag",
+            "validation": {
+              "required": "Startdatum ist erforderlich",
+              "past": "Das Startdatum darf nicht in der Vergangenheit liegen"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Anzahl zukünftiger Zyklen",
+            "validation": {
+              "required": "Anzahl der Zyklen ist erforderlich",
+              "min": "Mindestens 1 Zyklus ist erforderlich",
+              "max": "Es können nicht mehr als 3 Zyklen geplant werden"
+            }
+          },
+          "auto_rollover": {
+            "label": "Automatische Übertragung von Arbeitselementen",
+            "tooltip": "Am Tag der Zyklusbeendigung werden alle unvollendeten Arbeitselemente in den nächsten Zyklus verschoben."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Automatische Zyklusplanung wird aktiviert",
+            "loading_disable": "Automatische Zyklusplanung wird deaktiviert",
+            "success": {
+              "title": "Erfolg!",
+              "message": "Automatische Zyklusplanung erfolgreich aktiviert."
+            },
+            "error": {
+              "title": "Fehler!",
+              "message": "Aktivierung der automatischen Zyklusplanung fehlgeschlagen."
+            }
+          },
+          "save": {
+            "loading": "Konfiguration der automatischen Zyklusplanung wird gespeichert",
+            "success": {
+              "title": "Erfolg!",
+              "message_create": "Konfiguration der automatischen Zyklusplanung erfolgreich gespeichert.",
+              "message_update": "Konfiguration der automatischen Zyklusplanung erfolgreich aktualisiert."
+            },
+            "error": {
+              "title": "Fehler!",
+              "message_create": "Speichern der Konfiguration der automatischen Zyklusplanung fehlgeschlagen.",
+              "message_update": "Aktualisierung der Konfiguration der automatischen Zyklusplanung fehlgeschlagen."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/project.json b/packages/i18n/src/locales/de/project.json
new file mode 100644
index 0000000..9662307
--- /dev/null
+++ b/packages/i18n/src/locales/de/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Erstellt am",
+      "updated_at": "Aktualisiert am",
+      "name": "Name"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Zyklus hinzufügen",
+    "more_details": "Weitere Details",
+    "cycle": "Zyklus",
+    "update_cycle": "Zyklus aktualisieren",
+    "create_cycle": "Zyklus erstellen",
+    "no_matching_cycles": "Keine passenden Zyklen",
+    "remove_filters_to_see_all_cycles": "Entfernen Sie Filter, um alle Zyklen anzuzeigen",
+    "remove_search_criteria_to_see_all_cycles": "Entfernen Sie Suchkriterien, um alle Zyklen anzuzeigen",
+    "only_completed_cycles_can_be_archived": "Nur abgeschlossene Zyklen können archiviert werden",
+    "start_date": "Startdatum",
+    "end_date": "Enddatum",
+    "in_your_timezone": "In Ihrer Zeitzone",
+    "transfer_work_items": "Übertragen von {count} Arbeitselementen",
+    "transfer": {
+      "no_cycles_available": "Keine anderen Zyklen verfügbar, um Arbeitselemente zu übertragen."
+    },
+    "date_range": "Datumsbereich",
+    "add_date": "Datum hinzufügen",
+    "active_cycle": {
+      "label": "Aktiver Zyklus",
+      "progress": "Fortschritt",
+      "chart": "Burndown-Diagramm",
+      "priority_issue": "Hochpriorisierte Elemente",
+      "assignees": "Zuweisungen",
+      "issue_burndown": "Burndown für Arbeitselemente",
+      "ideal": "Ideal",
+      "current": "Aktuell",
+      "labels": "Labels",
+      "trailing": "Rückstand",
+      "leading": "Vorsprung"
+    },
+    "upcoming_cycle": {
+      "label": "Bevorstehender Zyklus"
+    },
+    "completed_cycle": {
+      "label": "Abgeschlossener Zyklus"
+    },
+    "status": {
+      "days_left": "Tage übrig",
+      "completed": "Abgeschlossen",
+      "yet_to_start": "Noch nicht begonnen",
+      "in_progress": "In Bearbeitung",
+      "draft": "Entwurf"
+    },
+    "action": {
+      "restore": {
+        "title": "Zyklus wiederherstellen",
+        "success": {
+          "title": "Zyklus wiederhergestellt",
+          "description": "Zyklus wurde wiederhergestellt."
+        },
+        "failed": {
+          "title": "Wiederherstellung fehlgeschlagen",
+          "description": "Zyklus konnte nicht wiederhergestellt werden."
+        }
+      },
+      "favorite": {
+        "loading": "Wird zu Favoriten hinzugefügt",
+        "success": {
+          "description": "Zyklus zu Favoriten hinzugefügt.",
+          "title": "Erfolg!"
+        },
+        "failed": {
+          "description": "Zu Favoriten hinzufügen fehlgeschlagen.",
+          "title": "Fehler!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Wird aus Favoriten entfernt",
+        "success": {
+          "description": "Zyklus aus Favoriten entfernt.",
+          "title": "Erfolg!"
+        },
+        "failed": {
+          "description": "Entfernen fehlgeschlagen.",
+          "title": "Fehler!"
+        }
+      },
+      "update": {
+        "loading": "Zyklus wird aktualisiert",
+        "success": {
+          "description": "Zyklus aktualisiert.",
+          "title": "Erfolg!"
+        },
+        "failed": {
+          "description": "Aktualisierung fehlgeschlagen.",
+          "title": "Fehler!"
+        },
+        "error": {
+          "already_exists": "Ein Zyklus mit diesen Daten existiert bereits. Entfernen Sie das Datum für einen Entwurf."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Gruppieren Sie Arbeit in Zyklen.",
+        "description": "Begrenzen Sie Arbeit zeitlich, verfolgen Sie Fristen und bleiben Sie auf Kurs.",
+        "primary_button": {
+          "text": "Ersten Zyklus erstellen",
+          "comic": {
+            "title": "Zyklen sind wiederkehrende Zeitspannen.",
+            "description": "Sprint, Iteration oder jedes andere Zeitfenster, um Arbeit zu verfolgen."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Keine Elemente im Zyklus",
+        "description": "Fügen Sie die Elemente hinzu, die Sie verfolgen möchten.",
+        "primary_button": {
+          "text": "Element erstellen"
+        },
+        "secondary_button": {
+          "text": "Vorhandenes Element hinzufügen"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Keine Elemente im Zyklus",
+        "description": "Die Elemente wurden verschoben oder ausgeblendet. Bearbeiten Sie die Eigenschaften, um sie anzuzeigen."
+      },
+      "active": {
+        "title": "Kein aktiver Zyklus",
+        "description": "Ein aktiver Zyklus umfasst das heutige Datum. Verfolgen Sie seinen Fortschritt hier."
+      },
+      "archived": {
+        "title": "Keine archivierten Zyklen",
+        "description": "Archivieren Sie abgeschlossene Zyklen, um Ordnung zu halten."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Speichern Sie Filter als Ansichten.",
+        "description": "Ansichten sind gespeicherte Filter, auf die Sie schnell zugreifen und die Sie im Team teilen können.",
+        "primary_button": {
+          "text": "Erste Ansicht erstellen",
+          "comic": {
+            "title": "Ansichten funktionieren mit den Eigenschaften der Arbeitselemente.",
+            "description": "Erstellen Sie eine Ansicht mit den gewünschten Filtern."
+          }
+        },
+        "filter": {
+          "title": "Keine passenden Ansichten",
+          "description": "Keine Ansichten entsprechen den Suchkriterien.\n Erstellen Sie stattdessen eine neue Ansicht."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Noch keine archivierten Arbeitselemente",
+        "description": "Manuell oder durch Automatisierung können Sie abgeschlossene oder abgebrochene Arbeitselemente archivieren. Finden Sie sie hier, sobald sie archiviert sind.",
+        "primary_button": {
+          "text": "Automatisierung einrichten"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Keine Arbeitselemente gefunden, die den angewendeten Filtern entsprechen",
+        "secondary_button": {
+          "text": "Alle Filter löschen"
+        }
+      },
+      "public": {
+        "title": "Noch keine öffentlichen Seiten",
+        "description": "Sehen Sie hier Seiten, die mit allen in Ihrem Projekt geteilt wurden.",
+        "primary_button": {
+          "text": "Ihre erste Seite erstellen"
+        }
+      },
+      "archived": {
+        "title": "Noch keine archivierten Seiten",
+        "description": "Archivieren Sie Seiten, die nicht auf Ihrem Radar sind. Greifen Sie hier bei Bedarf darauf zu."
+      },
+      "shared": {
+        "title": "Noch keine geteilten Seiten",
+        "description": "Seiten, die andere mit Ihnen geteilt haben, werden hier angezeigt."
+      }
+    },
+    "delete_view": {
+      "title": "Sind Sie sicher, dass Sie diese Ansicht löschen möchten?",
+      "content": "Wenn Sie bestätigen, werden alle Sortier-, Filter- und Anzeigeoptionen + das Layout, das Sie für diese Ansicht gewählt haben, dauerhaft gelöscht und können nicht wiederhergestellt werden."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Erstellen und zuweisen eines Arbeitselements",
+        "description": "Arbeitselemente sind Aufgaben, die Sie sich selbst oder dem Team zuweisen. Verfolgen Sie deren Fortschritt.",
+        "primary_button": {
+          "text": "Erstes Element erstellen",
+          "comic": {
+            "title": "Arbeitselemente sind die Bausteine",
+            "description": "Beispiele: UI-Redesign, Rebranding, neues System."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Keine archivierten Elemente",
+        "description": "Archivieren Sie abgeschlossene oder abgebrochene Elemente. Richten Sie Automatisierungen ein.",
+        "primary_button": {
+          "text": "Automatisierung einrichten"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Keine passenden Elemente",
+        "secondary_button": {
+          "text": "Filter löschen"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Modul hinzufügen",
+    "update_module": "Modul aktualisieren",
+    "create_module": "Modul erstellen",
+    "archive_module": "Modul archivieren",
+    "restore_module": "Modul wiederherstellen",
+    "delete_module": "Modul löschen",
+    "empty_state": {
+      "general": {
+        "title": "Gruppieren Sie Meilensteine in Modulen.",
+        "description": "Module fassen Elemente unter einer logischen Einheit zusammen. Verfolgen Sie Fristen und Fortschritt.",
+        "primary_button": {
+          "text": "Erstes Modul erstellen",
+          "comic": {
+            "title": "Module gruppieren hierarchisch.",
+            "description": "Beispiele: Warenkorbmodul, Chassis, Lager."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Keine Elemente im Modul",
+        "description": "Fügen Sie dem Modul Elemente hinzu.",
+        "primary_button": {
+          "text": "Elemente erstellen"
+        },
+        "secondary_button": {
+          "text": "Vorhandenes Element hinzufügen"
+        }
+      },
+      "archived": {
+        "title": "Keine archivierten Module",
+        "description": "Archivieren Sie abgeschlossene oder abgebrochene Module."
+      },
+      "sidebar": {
+        "in_active": "Modul ist nicht aktiv.",
+        "invalid_date": "Ungültiges Datum. Bitte geben Sie ein gültiges Datum ein."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Modul archivieren",
+      "archive_module_description": "Nur abgeschlossene/abgebrochene Module können archiviert werden.",
+      "delete_module": "Modul löschen"
+    },
+    "toast": {
+      "copy": {
+        "success": "Link zum Modul kopiert"
+      },
+      "delete": {
+        "success": "Modul gelöscht",
+        "error": "Löschen fehlgeschlagen"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Notieren Sie Ideen, Dokumente oder Wissensdatenbanken. Nutzen Sie AI Galileo.",
+        "description": "Seiten sind Orte für Ihre Gedanken. Schreiben, formatieren, fügen Sie Arbeitselemente ein und verwenden Sie Komponenten.",
+        "primary_button": {
+          "text": "Erste Seite erstellen"
+        }
+      },
+      "private": {
+        "title": "Keine privaten Seiten",
+        "description": "Bewahren Sie private Gedanken auf. Teilen Sie sie, wenn Sie bereit sind.",
+        "primary_button": {
+          "text": "Seite erstellen"
+        }
+      },
+      "public": {
+        "title": "Keine öffentlichen Seiten",
+        "description": "Hier sehen Sie die im Projekt geteilten Seiten.",
+        "primary_button": {
+          "text": "Seite erstellen"
+        }
+      },
+      "archived": {
+        "title": "Keine archivierten Seiten",
+        "description": "Archivieren Sie Seiten für den späteren Zugriff."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Eingang ist nicht aktiviert",
+        "description": "Aktivieren Sie den Eingang in den Projekteinstellungen, um Anfragen zu verwalten.",
+        "primary_button": {
+          "text": "Funktionen verwalten"
+        }
+      },
+      "cycle": {
+        "title": "Zyklen sind nicht aktiviert",
+        "description": "Aktivieren Sie Zyklen, um Arbeit zeitlich zu begrenzen.",
+        "primary_button": {
+          "text": "Funktionen verwalten"
+        }
+      },
+      "module": {
+        "title": "Module sind nicht aktiviert",
+        "description": "Aktivieren Sie Module in den Projekteinstellungen.",
+        "primary_button": {
+          "text": "Funktionen verwalten"
+        }
+      },
+      "page": {
+        "title": "Seiten sind nicht aktiviert",
+        "description": "Aktivieren Sie Seiten in den Projekteinstellungen.",
+        "primary_button": {
+          "text": "Funktionen verwalten"
+        }
+      },
+      "view": {
+        "title": "Ansichten sind nicht aktiviert",
+        "description": "Aktivieren Sie Ansichten in den Projekteinstellungen.",
+        "primary_button": {
+          "text": "Funktionen verwalten"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Geplant",
+      "in_progress": "In Bearbeitung",
+      "paused": "Pausiert",
+      "completed": "Abgeschlossen",
+      "cancelled": "Abgebrochen"
+    },
+    "layout": {
+      "list": "Liste",
+      "board": "Board",
+      "timeline": "Zeitachse"
+    },
+    "order_by": {
+      "name": "Name",
+      "progress": "Fortschritt",
+      "issues": "Anzahl Elemente",
+      "due_date": "Fälligkeitsdatum",
+      "created_at": "Erstellungsdatum",
+      "manual": "Manuell"
+    }
+  },
+  "project_members": {
+    "full_name": "Vollständiger Name",
+    "display_name": "Anzeigename",
+    "email": "E-Mail",
+    "joining_date": "Beitrittsdatum",
+    "role": "Rolle"
+  },
+  "project": {
+    "members_import": {
+      "title": "Mitglieder aus CSV importieren",
+      "description": "Laden Sie eine CSV mit den Spalten E-Mail und Rolle hoch (5=Gast, 15=Mitglied, 20=Admin). Benutzer müssen bereits Mitglieder des Arbeitsbereichs sein.",
+      "download_sample": "Beispiel-CSV herunterladen",
+      "dropzone": {
+        "active": "CSV-Datei hier ablegen",
+        "inactive": "Ziehen Sie eine Datei hierher oder klicken Sie zum Hochladen",
+        "file_type": "Nur .csv-Dateien werden unterstützt"
+      },
+      "buttons": {
+        "cancel": "Abbrechen",
+        "import": "Importieren",
+        "try_again": "Erneut versuchen",
+        "close": "Schließen",
+        "done": "Fertig"
+      },
+      "progress": {
+        "uploading": "Hochladen...",
+        "importing": "Importieren..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Import abgeschlossen"
+        },
+        "message": {
+          "success": "{count} Mitglied{plural} erfolgreich ins Projekt importiert.",
+          "no_imports": "Aus der CSV-Datei wurden keine neuen Mitglieder importiert."
+        },
+        "stats": {
+          "added": "Hinzugefügt",
+          "reactivated": "Reaktiviert",
+          "already_members": "Bereits Mitglieder",
+          "skipped": "Übersprungen"
+        },
+        "download_errors": "Übersprungene Details herunterladen"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Ungültige Datei",
+          "message": "Nur CSV-Dateien werden unterstützt."
+        },
+        "import_failed": {
+          "title": "Import fehlgeschlagen",
+          "message": "Etwas ist schief gelaufen."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/settings.json b/packages/i18n/src/locales/de/settings.json
new file mode 100644
index 0000000..511c632
--- /dev/null
+++ b/packages/i18n/src/locales/de/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "E-Mail ändern",
+        "description": "Gib eine neue E-Mail-Adresse ein, um einen Verifizierungslink zu erhalten.",
+        "toasts": {
+          "success_title": "Erfolg!",
+          "success_message": "E-Mail erfolgreich aktualisiert. Bitte melde dich erneut an."
+        },
+        "form": {
+          "email": {
+            "label": "Neue E-Mail",
+            "placeholder": "Gib deine E-Mail ein",
+            "errors": {
+              "required": "E-Mail ist erforderlich",
+              "invalid": "E-Mail ist ungültig",
+              "exists": "E-Mail existiert bereits. Bitte nutze eine andere.",
+              "validation_failed": "E-Mail-Verifizierung fehlgeschlagen. Bitte versuche es erneut."
+            }
+          },
+          "code": {
+            "label": "Einmaliger Code",
+            "placeholder": "123456",
+            "helper_text": "Verifizierungscode wurde an deine neue E-Mail gesendet.",
+            "errors": {
+              "required": "Einmaliger Code ist erforderlich",
+              "invalid": "Ungültiger Verifizierungscode. Bitte versuche es erneut."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Weiter",
+          "confirm": "Bestätigen",
+          "cancel": "Abbrechen"
+        },
+        "states": {
+          "sending": "Wird gesendet…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Einstellungen",
+      "description": "Passen Sie Ihre App-Erfahrung an Ihre Arbeitsweise an"
+    },
+    "notifications": {
+      "heading": "E-Mail-Benachrichtigungen",
+      "description": "Bleiben Sie bei Arbeitselementen auf dem Laufenden, die Sie abonniert haben. Aktivieren Sie dies, um benachrichtigt zu werden.",
+      "select_default_view": "Standardansicht auswählen",
+      "compact": "Kompakt",
+      "full": "Vollbild"
+    },
+    "security": {
+      "heading": "Sicherheit"
+    },
+    "api_tokens": {
+      "title": "Persönliche Zugriffstoken",
+      "description": "Generieren Sie sichere API-Token, um Ihre Daten mit externen Systemen und Anwendungen zu integrieren."
+    },
+    "activity": {
+      "heading": "Aktivität",
+      "description": "Verfolgen Sie Ihre letzten Aktionen und Änderungen über alle Projekte und Arbeitselemente hinweg."
+    },
+    "connections": {
+      "title": "Verbindungen",
+      "heading": "Verbindungen",
+      "description": "Verwalten Sie Ihre Arbeitsbereich-Verbindungseinstellungen."
+    }
+  },
+  "profile": {
+    "label": "Profil",
+    "page_label": "Ihre Arbeit",
+    "work": "Arbeit",
+    "details": {
+      "joined_on": "Beigetreten am",
+      "time_zone": "Zeitzone"
+    },
+    "stats": {
+      "workload": "Auslastung",
+      "overview": "Übersicht",
+      "created": "Erstellte Elemente",
+      "assigned": "Zugewiesene Elemente",
+      "subscribed": "Abonnierte Elemente",
+      "state_distribution": {
+        "title": "Elemente nach Status",
+        "empty": "Erstellen Sie Arbeitselemente, um eine Statusanalyse zu sehen."
+      },
+      "priority_distribution": {
+        "title": "Elemente nach Priorität",
+        "empty": "Erstellen Sie Arbeitselemente, um eine Prioritätsanalyse zu sehen."
+      },
+      "recent_activity": {
+        "title": "Letzte Aktivität",
+        "empty": "Keine Aktivität gefunden.",
+        "button": "Heutige Aktivität herunterladen",
+        "button_loading": "Wird heruntergeladen"
+      }
+    },
+    "actions": {
+      "profile": "Profil",
+      "security": "Sicherheit",
+      "activity": "Aktivität",
+      "preferences": "Einstellungen",
+      "notifications": "Benachrichtigungen",
+      "api-tokens": "Persönliche Zugriffstoken",
+      "connections": "Verbindungen"
+    },
+    "tabs": {
+      "summary": "Zusammenfassung",
+      "assigned": "Zugewiesen",
+      "created": "Erstellt",
+      "subscribed": "Abonniert",
+      "activity": "Aktivität"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Keine Aktivität",
+        "description": "Erstellen Sie ein Arbeitselement, um zu beginnen."
+      },
+      "assigned": {
+        "title": "Keine zugewiesenen Arbeitselemente",
+        "description": "Hier werden Ihnen zugewiesene Arbeitselemente angezeigt."
+      },
+      "created": {
+        "title": "Keine erstellten Arbeitselemente",
+        "description": "Hier werden von Ihnen erstellte Arbeitselemente angezeigt."
+      },
+      "subscribed": {
+        "title": "Keine abonnierten Arbeitselemente",
+        "description": "Abonnieren Sie die Arbeitselemente, die Sie interessieren, und verfolgen Sie sie hier."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Systemeinstellungen"
+      },
+      "light": {
+        "label": "Hell"
+      },
+      "dark": {
+        "label": "Dunkel"
+      },
+      "light_contrast": {
+        "label": "Heller hoher Kontrast"
+      },
+      "dark_contrast": {
+        "label": "Dunkler hoher Kontrast"
+      },
+      "custom": {
+        "label": "Benutzerdefiniertes Theme"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/stickies.json b/packages/i18n/src/locales/de/stickies.json
new file mode 100644
index 0000000..de20aed
--- /dev/null
+++ b/packages/i18n/src/locales/de/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Ihre Notizen",
+    "placeholder": "Klicken, um zu schreiben",
+    "all": "Alle Notizen",
+    "no-data": "Halten Sie Ideen und Gedanken fest. Fügen Sie die erste Notiz hinzu.",
+    "add": "Notiz hinzufügen",
+    "search_placeholder": "Nach Name suchen",
+    "delete": "Notiz löschen",
+    "delete_confirmation": "Möchten Sie diese Notiz wirklich löschen?",
+    "empty_state": {
+      "simple": "Halten Sie Ideen und Gedanken fest. Fügen Sie die erste Notiz hinzu.",
+      "general": {
+        "title": "Notizen sind schnelle Aufzeichnungen.",
+        "description": "Schreiben Sie Ihre Ideen auf und greifen Sie von überall darauf zu.",
+        "primary_button": {
+          "text": "Notiz hinzufügen"
+        }
+      },
+      "search": {
+        "title": "Keine Notizen gefunden.",
+        "description": "Versuchen Sie einen anderen Begriff oder erstellen Sie eine neue.",
+        "primary_button": {
+          "text": "Notiz hinzufügen"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Der Name der Notiz darf max. 100 Zeichen haben.",
+        "already_exists": "Eine Notiz ohne Beschreibung existiert bereits"
+      },
+      "created": {
+        "title": "Notiz erstellt",
+        "message": "Notiz erfolgreich erstellt"
+      },
+      "not_created": {
+        "title": "Erstellung fehlgeschlagen",
+        "message": "Notiz konnte nicht erstellt werden"
+      },
+      "updated": {
+        "title": "Notiz aktualisiert",
+        "message": "Notiz erfolgreich aktualisiert"
+      },
+      "not_updated": {
+        "title": "Aktualisierung fehlgeschlagen",
+        "message": "Notiz konnte nicht aktualisiert werden"
+      },
+      "removed": {
+        "title": "Notiz gelöscht",
+        "message": "Notiz erfolgreich gelöscht"
+      },
+      "not_removed": {
+        "title": "Löschen fehlgeschlagen",
+        "message": "Notiz konnte nicht gelöscht werden"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/template.json b/packages/i18n/src/locales/de/template.json
new file mode 100644
index 0000000..d97f852
--- /dev/null
+++ b/packages/i18n/src/locales/de/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Vorlagen",
+      "description": "Sparen Sie 80% der Zeit, die für die Erstellung von Projekten, Arbeitsaufgaben und Seiten aufgewendet wird, wenn Sie Vorlagen verwenden.",
+      "new_project_template": "Neue Projektvorlage",
+      "new_work_item_template": "Neue Arbeitselementvorlage",
+      "new_page_template": "Neue Seitenvorlage",
+      "options": {
+        "project": {
+          "label": "Projektvorlagen"
+        },
+        "work_item": {
+          "label": "Arbeitsaufgabenvorlagen"
+        },
+        "page": {
+          "label": "Seitenvorlagen"
+        }
+      },
+      "create_template": {
+        "label": "Vorlage erstellen",
+        "no_permission": {
+          "project": "Kontaktieren Sie Ihren Projektadministrator, um Vorlagen zu erstellen",
+          "workspace": "Kontaktieren Sie Ihren Workspace-Administrator, um Vorlagen zu erstellen"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Vorlage verwenden",
+          "loading": "Verwenden"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Vom Workspace abgeleitet"
+        },
+        "project": {
+          "info": "Vom Projekt abgeleitet"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Benennen Sie Ihre Projektvorlage.",
+              "validation": {
+                "required": "Vorlagenname ist erforderlich",
+                "maxLength": "Vorlagenname sollte weniger als 255 Zeichen enthalten"
+              }
+            },
+            "description": {
+              "placeholder": "Beschreiben Sie, wann und wie diese Vorlage verwendet werden soll."
+            }
+          },
+          "name": {
+            "placeholder": "Benennen Sie Ihr Projekt.",
+            "validation": {
+              "required": "Projekttitel ist erforderlich",
+              "maxLength": "Projekttitel sollte weniger als 255 Zeichen enthalten"
+            }
+          },
+          "description": {
+            "placeholder": "Beschreiben Sie den Zweck und die Ziele dieses Projekts."
+          },
+          "button": {
+            "create": "Projektvorlage erstellen",
+            "update": "Projektvorlage aktualisieren"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Benennen Sie Ihre Arbeitsaufgabenvorlage.",
+              "validation": {
+                "required": "Vorlagenname ist erforderlich",
+                "maxLength": "Vorlagenname sollte weniger als 255 Zeichen enthalten"
+              }
+            },
+            "description": {
+              "placeholder": "Beschreiben Sie, wann und wie diese Vorlage verwendet werden soll."
+            }
+          },
+          "name": {
+            "placeholder": "Geben Sie dieser Arbeitsaufgabe einen Titel.",
+            "validation": {
+              "required": "Arbeitsaufgabentitel ist erforderlich",
+              "maxLength": "Arbeitsaufgabentitel sollte weniger als 255 Zeichen enthalten"
+            }
+          },
+          "description": {
+            "placeholder": "Beschreiben Sie diese Arbeitsaufgabe so, dass klar ist, was Sie erreichen werden, wenn Sie diese abschließen."
+          },
+          "button": {
+            "create": "Arbeitsaufgabenvorlage erstellen",
+            "update": "Arbeitsaufgabenvorlage aktualisieren"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Benennen Sie Ihre Seitenvorlage.",
+              "validation": {
+                "required": "Vorlagenname ist erforderlich",
+                "maxLength": "Vorlagenname sollte weniger als 255 Zeichen enthalten"
+              }
+            },
+            "description": {
+              "placeholder": "Beschreiben Sie, wann und wie diese Vorlage verwendet werden soll."
+            }
+          },
+          "name": {
+            "placeholder": "Unbenannte Seite",
+            "validation": {
+              "maxLength": "Seitentitel sollte weniger als 255 Zeichen enthalten"
+            }
+          },
+          "button": {
+            "create": "Seitenvorlage erstellen",
+            "update": "Seitenvorlage aktualisieren"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Veröffentlichungseinstellungen} other {Im Marketplace veröffentlichen}}",
+          "unpublish_action": "Vom Marketplace zurückziehen",
+          "title": "Machen Sie Ihre Vorlage entdeckbar und erkennbar.",
+          "name": {
+            "label": "Vorlagenname",
+            "placeholder": "Benennen Sie Ihre Vorlage",
+            "validation": {
+              "required": "Vorlagenname ist erforderlich",
+              "maxLength": "Vorlagenname sollte weniger als 255 Zeichen enthalten"
+            }
+          },
+          "short_description": {
+            "label": "Kurze Beschreibung",
+            "placeholder": "Diese Vorlage ist ideal für Projektmanager, die mehrere Projekte gleichzeitig verwalten.",
+            "validation": {
+              "required": "Kurze Beschreibung ist erforderlich"
+            }
+          },
+          "description": {
+            "label": "Beschreibung",
+            "placeholder": "Steigern Sie die Produktivität und optimieren Sie die Kommunikation mit unserer Sprach-zu-Text-Integration.\n• Echtzeit-Transkription: Konvertieren Sie gesprochene Wörter sofort in präzisen Text.\n• Aufgaben- und Kommentarerstellung: Fügen Sie Aufgaben, Beschreibungen und Kommentare über Sprachbefehle hinzu.",
+            "validation": {
+              "required": "Beschreibung ist erforderlich"
+            }
+          },
+          "category": {
+            "label": "Kategorie",
+            "placeholder": "Wählen Sie, wo Sie denken, dass dies am besten passt. Sie können mehrere auswählen.",
+            "validation": {
+              "required": "Mindestens eine Kategorie ist erforderlich"
+            }
+          },
+          "keywords": {
+            "label": "Schlüsselwörter",
+            "placeholder": "Verwenden Sie Begriffe, die Sie denken, dass Ihre Benutzer beim Suchen nach dieser Vorlage verwenden werden.",
+            "helperText": "Geben Sie Schlüsselwörter ein, die wahrscheinlich helfen, diese von der Suche zu finden.",
+            "validation": {
+              "required": "Mindestens ein Schlüsselwort ist erforderlich"
+            }
+          },
+          "website": {
+            "label": "Website-URL",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "Ungültige URL",
+              "maxLength": "URL sollte weniger als 800 Zeichen enthalten"
+            }
+          },
+          "company_name": {
+            "label": "Unternehmensname",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Unternehmensname ist erforderlich",
+              "maxLength": "Unternehmensname sollte weniger als 255 Zeichen enthalten"
+            }
+          },
+          "contact_email": {
+            "label": "Support-E-Mail",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Ungültige E-Mail-Adresse",
+              "maxLength": "Support-E-Mail sollte weniger als 255 Zeichen enthalten"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Link zu Ihrer Datenschutzerklärung",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Ungültige URL",
+              "maxLength": "URL sollte weniger als 800 Zeichen enthalten"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Link zu Ihren Nutzungsbedingungen",
+            "placeholder": "https://planes.so/terms-of-service",
+            "validation": {
+              "invalid": "Ungültige URL",
+              "maxLength": "URL sollte weniger als 800 Zeichen enthalten"
+            }
+          },
+          "cover_image": {
+            "label": "Fügen Sie ein Cover-Bild hinzu, das im Marketplace angezeigt wird",
+            "upload_title": "Cover-Bild hochladen",
+            "upload_placeholder": "Klicken Sie, um ein Cover-Bild hochzuladen, oder ziehen Sie es hierher",
+            "drop_here": "Hier ablegen",
+            "click_to_upload": "Klicken Sie, um ein Cover-Bild hochzuladen",
+            "invalid_file_or_exceeds_size_limit": "Ungültige Datei oder Überschreitung der Größe. Bitte versuchen Sie es erneut.",
+            "upload_and_save": "Hochladen und speichern",
+            "uploading": "Hochladen",
+            "remove": "Entfernen",
+            "removing": "Entfernen",
+            "validation": {
+              "required": "Cover-Bild ist erforderlich"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Dokumente und Bilder einfügen, die Sie denken, dass die Anzeigende dieser Vorlage hilfreich sein können.",
+            "validation": {
+              "required": "Mindestens ein Screenshot ist erforderlich"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Vorlagen",
+        "description": "Mit Projekt-, Arbeitsaufgaben- und Seitenvorlagen in Plane müssen Sie kein Projekt von Grund auf neu erstellen oder Arbeitsaufgabeneigenschaften manuell festlegen.",
+        "sub_description": "Sparen Sie 80% Ihrer Administrationszeit, wenn Sie Vorlagen verwenden."
+      },
+      "no_templates": {
+        "button": "Erstellen Sie Ihre erste Vorlage"
+      },
+      "no_labels": {
+        "description": "Noch keine Labels vorhanden. Erstellen Sie Labels, um Arbeitsaufgaben in Ihrem Projekt zu organisieren und zu filtern."
+      },
+      "no_modules": {
+        "description": "Noch keine Module. Organisieren Sie Arbeit in Unterprojekte mit dedizierten Verantwortlichen und Bearbeitern."
+      },
+      "no_work_items": {
+        "description": "Noch keine Arbeitsaufgaben. Fügen Sie eine hinzu, um Ihre Arbeit besser zu strukturieren."
+      },
+      "no_sub_work_items": {
+        "description": "Noch keine Unterarbeitsaufgaben. Fügen Sie eine hinzu, um Ihre Arbeit besser zu strukturieren."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Es gibt keine Vorlagen, auf die Sie Zugriff haben.",
+          "description": "Bitte erstellen Sie eine Vorlage"
+        },
+        "no_results": {
+          "title": "Das entspricht keiner Vorlage.",
+          "description": "Versuchen Sie es mit anderen Suchbegriffen."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Vorlage erstellt",
+          "message": "{templateName}, die {templateType}-Vorlage, ist jetzt für Ihren Workspace verfügbar."
+        },
+        "error": {
+          "title": "Wir konnten diese Vorlage diesmal nicht erstellen.",
+          "message": "Versuchen Sie, Ihre Details erneut zu speichern oder kopieren Sie sie in eine neue Vorlage, vorzugsweise in einem anderen Tab."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Vorlage geändert",
+          "message": "{templateName}, die {templateType}-Vorlage, wurde geändert."
+        },
+        "error": {
+          "title": "Wir konnten Änderungen an dieser Vorlage nicht speichern.",
+          "message": "Versuchen Sie, Ihre Details erneut zu speichern oder kommen Sie später zu dieser Vorlage zurück. Wenn es immer noch Probleme gibt, kontaktieren Sie uns."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Vorlage gelöscht",
+          "message": "{templateName}, die {templateType}-Vorlage, wurde jetzt aus Ihrem Workspace gelöscht."
+        },
+        "error": {
+          "title": "Wir konnten diese Vorlage nicht löschen.",
+          "message": "Versuchen Sie, sie erneut zu löschen oder kommen Sie später darauf zurück. Wenn Sie sie dann nicht löschen können, kontaktieren Sie uns."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Vorlage zurückgezogen",
+          "message": "{templateName}, die {templateType}-Vorlage, wurde jetzt zurückgezogen."
+        },
+        "error": {
+          "title": "Wir konnten diese Vorlage nicht zurückziehen.",
+          "message": "Versuchen Sie, sie erneut zurückzuziehen oder kommen Sie später darauf zurück. Wenn Sie sie dann nicht zurückziehen können, kontaktieren Sie uns."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Vorlage löschen",
+      "description": {
+        "prefix": "Sind Sie sicher, dass Sie die Vorlage löschen möchten-",
+        "suffix": "? Alle mit der Vorlage verbundenen Daten werden dauerhaft entfernt. Diese Aktion kann nicht rückgängig gemacht werden."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Vorlage zurückziehen",
+      "description": {
+        "prefix": "Sind Sie sicher, dass Sie die Vorlage zurückziehen möchten-",
+        "suffix": "? Diese Vorlage wird den Benutzern im Marketplace nicht mehr zur Verfügung stehen."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Neue Vorlage hinzufügen",
+        "project": "Neue Vorlage hinzufügen"
+      },
+      "label": {
+        "project": "Projektvorlage auswählen",
+        "page": "Aus Vorlage wählen"
+      },
+      "tooltip": {
+        "work_item": "Arbeitselement-Vorlage auswählen"
+      },
+      "no_results": {
+        "work_item": "Keine Vorlagen gefunden.",
+        "project": "Keine Vorlagen gefunden."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/tour.json b/packages/i18n/src/locales/de/tour.json
new file mode 100644
index 0000000..4c3586a
--- /dev/null
+++ b/packages/i18n/src/locales/de/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Willkommen in Ihrem Arbeitsbereich",
+        "description": "Um Ihnen den Einstieg zu erleichtern, haben wir ein Demo-Projekt für Sie erstellt. Fügen wir Ihr erstes Arbeitselement hinzu."
+      },
+      "step_one": {
+        "title": "Klicken Sie auf \"+ Arbeitselement hinzufügen\"",
+        "description": "Beginnen Sie, indem Sie auf die Schaltfläche \"+ Neues Arbeitselement\" klicken. Sie können Aufgaben, Fehler oder einen benutzerdefinierten Typ erstellen, der Ihren Anforderungen entspricht."
+      },
+      "step_two": {
+        "title": "Filtern Sie Ihre Arbeitselemente",
+        "description": "Verwenden Sie Filter, um Ihre Liste schnell einzugrenzen. Sie können nach Status, Priorität oder Teammitgliedern filtern. "
+      },
+      "step_three": {
+        "title": "Anzeigen, gruppieren und sortieren Sie Arbeitselemente nach Bedarf.",
+        "description": "Sehen Sie erforderliche Eigenschaften und gruppieren oder sortieren Sie Arbeitselemente nach Ihren Bedürfnissen."
+      },
+      "step_four": {
+        "title": "Visualisieren Sie, wie Sie möchten",
+        "description": "Wählen Sie aus, welche Eigenschaften Sie in der Liste sehen möchten. Sie können Arbeitselemente auch auf Ihre Weise gruppieren und sortieren."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Fortschritt mit Zyklen machen",
+        "description": "Drücken Sie Q, um einen Zyklus zu erstellen. Benennen Sie ihn und legen Sie Daten fest—nur ein Zyklus pro Projekt."
+      },
+      "step_one": {
+        "title": "Neuen Zyklus erstellen",
+        "description": "Drücken Sie Q, um einen Zyklus zu erstellen. Benennen Sie ihn und legen Sie Daten fest—nur ein Zyklus pro Projekt."
+      },
+      "step_two": {
+        "title": "Klicken Sie auf \"+\"",
+        "description": "Beginnen Sie, indem Sie auf die Schaltfläche \"+\" klicken. Fügen Sie neue oder vorhandene Arbeitselemente direkt von der Zyklus-Seite hinzu."
+      },
+      "step_three": {
+        "title": "Zyklus-Zusammenfassung",
+        "description": "Verfolgen Sie den Zyklusfortschritt, die Teamproduktivität und Prioritäten—und untersuchen Sie, ob etwas zurückfällt."
+      },
+      "step_four": {
+        "title": "Arbeitselemente übertragen",
+        "description": "Nach dem Fälligkeitsdatum wird ein Zyklus automatisch abgeschlossen. Verschieben Sie unfertige Arbeit in einen anderen Zyklus."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Teilen Sie Ihr Projekt in Module auf",
+        "description": "Module sind kleinere, fokussierte Projekte, die Benutzern helfen, Arbeitselemente innerhalb bestimmter Zeitrahmen zu gruppieren und zu organisieren."
+      },
+      "step_one": {
+        "title": "Modul erstellen",
+        "description": "Module sind kleinere, fokussierte Projekte, die Benutzern helfen, Arbeitselemente innerhalb bestimmter Zeitrahmen zu gruppieren und zu organisieren."
+      },
+      "step_two": {
+        "title": "Klicken Sie auf \"+\"",
+        "description": "Beginnen Sie, indem Sie auf die Schaltfläche \"+\" klicken. Fügen Sie neue oder vorhandene Arbeitselemente direkt von der Modul-Seite hinzu."
+      },
+      "step_three": {
+        "title": "Modulzustände",
+        "description": "Module verwenden diese Status, um Benutzern bei der Planung zu helfen und Fortschritt und Phase klar zu verfolgen."
+      },
+      "step_four": {
+        "title": "Modulfortschritt",
+        "description": "Der Modulfortschritt wird über abgeschlossene Elemente mit Analysen zur Leistungsüberwachung verfolgt."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Dokumentieren mit KI-gestützten Seiten",
+        "description": "Seiten in Plane ermöglichen es Ihnen, Projektinformationen zu erfassen, zu organisieren und daran zusammenzuarbeiten—ohne externe Tools."
+      },
+      "step_one": {
+        "title": "Seite als Öffentlich oder Privat festlegen",
+        "description": "Seiten können als öffentlich festgelegt werden, sichtbar für alle in Ihrem Arbeitsbereich, oder privat, nur für Sie zugänglich."
+      },
+      "step_two": {
+        "title": "/ Befehl verwenden",
+        "description": "Verwenden Sie / auf einer Seite, um Inhalte aus 16 Blocktypen hinzuzufügen, einschließlich Listen, Bildern, Tabellen und Einbettungen."
+      },
+      "step_three": {
+        "title": "Seitenaktionen",
+        "description": "Sobald Ihre Seite erstellt ist, können Sie auf das Menü ••• in der oberen rechten Ecke klicken, um die folgenden Aktionen auszuführen."
+      },
+      "step_four": {
+        "title": "Inhaltsverzeichnis",
+        "description": "Verschaffen Sie sich einen Überblick über Ihre Seite, indem Sie auf das Panel-Symbol klicken, um alle Überschriften anzuzeigen."
+      },
+      "step_five": {
+        "title": "Versionsverlauf",
+        "description": "Seiten verfolgen alle Bearbeitungen mit Versionsverlauf, sodass Sie bei Bedarf frühere Versionen wiederherstellen können."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Anfragen mit Intake optimieren",
+        "description": "Eine Plane-exklusive Funktion, mit der Gäste Arbeitselemente für Fehler, Anfragen oder Tickets erstellen können."
+      },
+      "step_one": {
+        "title": "Offene/geschlossene Intake-Anfragen",
+        "description": "Ausstehende Anfragen bleiben auf der Registerkarte Offen, und sobald sie von einem Administrator oder Mitglied bearbeitet werden, werden sie zu Geschlossen verschoben."
+      },
+      "step_two": {
+        "title": "Ausstehende Anfrage annehmen/ablehnen",
+        "description": "Annehmen, um das Arbeitselement zu bearbeiten und in Ihr Projekt zu verschieben, oder ablehnen, um es als Abgebrochen zu markieren."
+      },
+      "step_three": {
+        "title": "Vorerst zurückstellen",
+        "description": "Ein Arbeitselement kann zurückgestellt werden, um es zu einem späteren Zeitpunkt zu überprüfen. Es wird an das Ende Ihrer offenen Anfragenliste verschoben."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Schluss mit dem Wechseln zwischen Tabs. Verbinden Sie Ihre Welt.",
+        "description": "Verknüpfen Sie GitHub und Slack, um PRs zu verfolgen und Chats direkt in Plane AI zusammenzufassen."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigation, neu gedacht",
+        "sub_title": "Ihr Arbeitsbereich ist jetzt einfacher zu erkunden mit einer intelligenteren, vereinfachten Navigation.",
+        "highlight_1": "Optimierte Struktur des linken Panels für schnelleres Entdecken",
+        "highlight_2": "Verbesserte globale Suche, um sofort überall hin zu springen",
+        "highlight_3": "Intelligentere Kategoriegruppierung für Klarheit und Fokus",
+        "footer": "Möchten Sie eine kurze Einführung?"
+      },
+      "step_zero": {
+        "title": "Finden Sie sofort alles",
+        "description": "Verwenden Sie die universelle Suche, um zu Aufgaben, Projekten, Seiten und Personen zu springen—ohne Ihren Arbeitsfluss zu verlassen."
+      },
+      "step_one": {
+        "title": "Behalten Sie die Kontrolle über Updates",
+        "description": "Ihr Posteingang bewahrt alle Erwähnungen, Genehmigungen und Aktivitäten an einem Ort auf, sodass Sie nie wichtige Arbeit verpassen."
+      },
+      "step_two": {
+        "title": "Personalisieren Sie Ihre Navigation",
+        "description": "Passen Sie an, was Sie sehen und wie Sie in den Einstellungen navigieren."
+      }
+    },
+    "actions": {
+      "close": "Schließen",
+      "next": "Weiter",
+      "back": "Zurück",
+      "done": "Fertig",
+      "take_a_tour": "Tour machen",
+      "get_started": "Loslegen",
+      "got_it": "Verstanden"
+    },
+    "seed_data": {
+      "title": "Hier ist Ihr Demo-Projekt",
+      "description": "Projekte ermöglichen es Ihnen, Ihre Teams, Aufgaben und alles zu verwalten, was Sie brauchen, um Dinge in Ihrem Arbeitsbereich zu erledigen."
+    }
+  },
+  "get_started": {
+    "title": "Hallo {name}, willkommen an Bord!",
+    "description": "Hier ist alles, was Sie brauchen, um Ihre Reise mit Plane zu starten.",
+    "checklist_section": {
+      "title": "Loslegen",
+      "description": "Beginnen Sie mit der Einrichtung und sehen Sie, wie Ihre Ideen schneller zum Leben erwachen.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Projekt erstellen"
+        },
+        "item_2": {
+          "title": "Arbeitselement erstellen"
+        },
+        "item_3": {
+          "title": "Teammitglieder einladen"
+        },
+        "item_4": {
+          "title": "Seite erstellen"
+        },
+        "item_5": {
+          "title": "Plane AI-Chat ausprobieren"
+        },
+        "item_6": {
+          "title": "Integrationen verknüpfen"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Laden Sie Ihr Team ein",
+      "description": "Laden Sie Teammitglieder ein und beginnen Sie gemeinsam zu bauen."
+    },
+    "integrations_section": {
+      "title": "Erweitern Sie Ihren Arbeitsbereich",
+      "more_integrations": "Weitere Integrationen durchsuchen"
+    },
+    "switch_to_plane_section": {
+      "title": "Entdecken Sie, warum Teams zu Plane wechseln",
+      "description": "Vergleichen Sie Plane mit den Tools, die Sie heute verwenden, und sehen Sie den Unterschied."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/update.json b/packages/i18n/src/locales/de/update.json
new file mode 100644
index 0000000..30b5e9e
--- /dev/null
+++ b/packages/i18n/src/locales/de/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Fortschritt",
+      "since_last_update": "Seit der letzten Aktualisierung",
+      "comments": "{count, plural, one{# Kommentar} few{# Kommentare} other{# Kommentare}}"
+    },
+    "add_update": "Aktualisieren",
+    "add_update_placeholder": "Schreiben Sie Ihre Aktualisierung hier",
+    "empty": {
+      "title": "Noch keine Aktualisierungen",
+      "description": "Sie können hier Aktualisierungen sehen."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reaktion erstellt",
+          "message": "Reaktion wurde erfolgreich erstellt"
+        },
+        "error": {
+          "title": "Reaktion nicht erstellt",
+          "message": "Reaktion konnte nicht erstellt werden"
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reaktion entfernt",
+          "message": "Reaktion wurde erfolgreich entfernt"
+        },
+        "error": {
+          "title": "Reaktion nicht entfernt",
+          "message": "Reaktion konnte nicht entfernt werden"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Aktualisierung erstellt",
+        "message": "Aktualisierung wurde erfolgreich erstellt"
+      },
+      "error": {
+        "title": "Aktualisierung nicht erstellt",
+        "message": "Aktualisierung konnte nicht erstellt werden"
+      }
+    },
+    "delete": {
+      "title": "Aktualisierung löschen",
+      "confirmation": "Sie sind dabei, diese Aktualisierung zu löschen. Diese Aktion ist unumkehrbar.",
+      "success": {
+        "title": "Aktualisierung gelöscht",
+        "message": "Die Aktualisierung wurde erfolgreich gelöscht"
+      },
+      "error": {
+        "title": "Aktualisierung nicht gelöscht",
+        "message": "Die Aktualisierung konnte nicht gelöscht werden"
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Aktualisierung aktualisiert",
+        "message": "Aktualisierung wurde erfolgreich aktualisiert"
+      },
+      "error": {
+        "title": "Aktualisierung nicht aktualisiert",
+        "message": "Aktualisierung konnte nicht aktualisiert werden"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/wiki.json b/packages/i18n/src/locales/de/wiki.json
new file mode 100644
index 0000000..e7aa558
--- /dev/null
+++ b/packages/i18n/src/locales/de/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Allgemein",
+      "private": "Privat",
+      "shared": "Geteilt",
+      "archived": "Archiviert"
+    },
+    "fallback_name": "Sammlung",
+    "form": {
+      "name_required": "Ein Sammlungstitel ist erforderlich",
+      "name_max_length": "Der Sammlungsname muss kürzer als 255 Zeichen sein",
+      "name_placeholder_create": "Geben Sie der Sammlung einen Titel",
+      "name_placeholder_edit": "Sammlungsname"
+    },
+    "create_modal": {
+      "title": "Sammlung erstellen",
+      "submit": "Sammlung erstellen"
+    },
+    "edit_modal": {
+      "title": "Sammlung bearbeiten"
+    },
+    "delete_modal": {
+      "title": "Sammlung löschen",
+      "page_count": "Diese Sammlung enthält {pageCount} Seiten. Wählen Sie aus, was mit ihnen passieren soll.",
+      "transfer_title": "Seiten verschieben und Sammlung löschen",
+      "transfer_description": "Verschieben Sie vor dem Löschen alle Seiten in eine andere Sammlung. Seiten und ihre Berechtigungen bleiben erhalten.",
+      "transfer_warning": "Verschobene Seiten übernehmen die Berechtigungen der ausgewählten Sammlung.",
+      "transfer_target_label": "Seiten verschieben nach",
+      "transfer_target_placeholder": "Sammlung auswählen",
+      "delete_with_pages_title": "Sammlung mit Seiten löschen",
+      "delete_with_pages_description": "Löscht die Sammlung und alle ihre Seiten dauerhaft. Diese Aktion kann nicht rückgängig gemacht werden.",
+      "submit": "Sammlung löschen"
+    },
+    "header": {
+      "add_page": "Seite hinzufügen"
+    },
+    "menu": {
+      "create_new_page": "Neue Seite erstellen",
+      "add_existing_page": "Vorhandene Seite hinzufügen",
+      "edit_collection": "Sammlung bearbeiten",
+      "collection_options": "Sammlungsoptionen"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Nach Seiten suchen",
+      "success_message": "{count} Seiten zur Sammlung hinzugefügt.",
+      "error_message": "Seiten konnten nicht verschoben werden. Bitte versuchen Sie es erneut.",
+      "no_pages_found": "Keine Seiten gefunden, die Ihrer Suche entsprechen",
+      "no_pages_available": "Keine Seiten zum Verschieben verfügbar",
+      "submit": "Verschieben"
+    },
+    "list": {
+      "invite_only": "Nur auf Einladung",
+      "remove_error": "Die Seite konnte nicht aus der Sammlung entfernt werden.",
+      "no_matching_pages": "Keine passenden Seiten",
+      "remove_search_criteria": "Entfernen Sie die Suchkriterien, um alle Seiten zu sehen",
+      "remove_filters": "Entfernen Sie die Filter, um alle Seiten zu sehen",
+      "no_pages_title": "Noch keine Seiten",
+      "no_pages_description": "Diese Sammlung enthält derzeit keine Seiten.",
+      "untitled": "Ohne Titel",
+      "restricted_access": "Eingeschränkter Zugriff",
+      "collapse_page": "Seite einklappen",
+      "expand_page": "Seite ausklappen",
+      "page_actions": "Seitenaktionen",
+      "page_link_copied": "Seitenlink in die Zwischenablage kopiert.",
+      "columns": {
+        "page_name": "Seitenname",
+        "owner": "Eigentümer",
+        "nested_pages": "Unterseiten",
+        "last_activity": "Letzte Aktivität",
+        "actions": "Aktionen"
+      }
+    },
+    "toasts": {
+      "created": "Sammlung erfolgreich erstellt.",
+      "create_error": "Sammlung konnte nicht erstellt werden. Bitte versuchen Sie es erneut.",
+      "renamed": "Sammlung erfolgreich umbenannt.",
+      "rename_error": "Sammlung konnte nicht aktualisiert werden. Bitte versuchen Sie es erneut.",
+      "transferred_deleted": "Seiten wurden verschoben und die Sammlung gelöscht.",
+      "deleted_with_pages": "Sammlung und ihre Seiten wurden gelöscht.",
+      "delete_error": "Sammlung konnte nicht gelöscht werden. Bitte versuchen Sie es erneut.",
+      "target_required": "Bitte wählen Sie eine Sammlung aus, in die die Seiten verschoben werden sollen.",
+      "create_page_error": "Seite konnte nicht erstellt werden. Bitte versuchen Sie es erneut.",
+      "create_page_in_collection_error": "Seite konnte nicht erstellt oder zur Sammlung hinzugefügt werden. Bitte versuchen Sie es erneut.",
+      "collection_link_copied": "Sammlungslink in die Zwischenablage kopiert."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Upgrade zum Freischalten von Wiki",
+      "description": "Schalten Sie öffentliche Seiten, Versionsverlauf, geteilte Seiten, Echtzeit-Zusammenarbeit und Arbeitsbereichsseiten für Wikis, unternehmensweite Dokumente und Wissensdatenbanken mit Plane Pro frei.",
+      "upgrade_button": {
+        "text": "Upgrade"
+      },
+      "learn_more_button": {
+        "text": "Mehr erfahren"
+      },
+      "download_button": {
+        "text": "Daten herunterladen",
+        "loading": "Wird heruntergeladen"
+      },
+      "tabs": {
+        "nested_pages": "Verschachtelte Seiten",
+        "add_embeds": "Einbettungen hinzufügen",
+        "publish_pages": "Seiten veröffentlichen",
+        "comments": "Kommentare"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Verschachtelte Seiten erfordern einen kostenpflichtigen Plan. Führen Sie ein Upgrade durch, um sie freizuschalten."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/work-item-type.json b/packages/i18n/src/locales/de/work-item-type.json
new file mode 100644
index 0000000..859e597
--- /dev/null
+++ b/packages/i18n/src/locales/de/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Arbeitsaufgabentypen",
+    "label_lowercase": "arbeitsaufgabentypen",
+    "settings": {
+      "description": "Passen Sie eigene Eigenschaften an und fügen Sie sie hinzu, um sie an die Bedürfnisse Ihres Teams anzupassen.",
+      "cant_delete_default_message": "Dieser Arbeitselementtyp kann nicht gelöscht werden, da er als Standard für dieses Projekt festgelegt ist.",
+      "set_as_default": "Als Standard festlegen",
+      "cant_set_default_inactive_message": "Aktivieren Sie diesen Typ, bevor Sie ihn als Standard festlegen",
+      "set_default_confirmation": {
+        "title": "Als Standard-Arbeitselementtyp festlegen",
+        "description": "Wenn Sie {name} als Standard festlegen, wird er in alle Projekte in diesem Arbeitsbereich importiert. Alle neuen Arbeitselemente verwenden dann standardmäßig diesen Typ.",
+        "confirm_button": "Als Standard festlegen"
+      },
+      "properties": {
+        "title": "Benutzerdefinierte Eigenschaften",
+        "description": "Erstellen und passen Sie Eigenschaften an.",
+        "tooltip": "Jeder Arbeitsaufgabentyp wird mit einem Standardsatz von Eigenschaften wie Titel, Beschreibung, Bearbeiter, Status, Priorität, Startdatum, Fälligkeitsdatum, Modul, Zyklus usw. geliefert. Sie können auch Ihre eigenen Eigenschaften anpassen und hinzufügen, um sie an die Bedürfnisse Ihres Teams anzupassen.",
+        "add_button": "Neue Eigenschaft hinzufügen",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Aus Arbeitsbereich importieren"
+          }
+        },
+        "dropdown": {
+          "label": "Eigenschaftstyp",
+          "placeholder": "Typ auswählen"
+        },
+        "property_type": {
+          "text": {
+            "label": "Text"
+          },
+          "number": {
+            "label": "Zahl"
+          },
+          "dropdown": {
+            "label": "Dropdown"
+          },
+          "boolean": {
+            "label": "Boolean"
+          },
+          "date": {
+            "label": "Datum"
+          },
+          "member_picker": {
+            "label": "Mitgliederauswahl"
+          },
+          "formula": {
+            "label": "Formel"
+          }
+        },
+        "attributes": {
+          "label": "Attribute",
+          "text": {
+            "single_line": {
+              "label": "Einzeilig"
+            },
+            "multi_line": {
+              "label": "Absatz"
+            },
+            "readonly": {
+              "label": "Schreibgeschützt",
+              "header": "Schreibgeschützte Daten"
+            },
+            "invalid_text_format": {
+              "label": "Ungültiges Textformat"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Zahl hinzufügen"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Einzelauswahl"
+            },
+            "multi_select": {
+              "label": "Mehrfachauswahl"
+            },
+            "no_default_value": {
+              "label": "Kein Standardwert"
+            }
+          },
+          "boolean": {
+            "label": "Wahr | Falsch",
+            "no_default": "Kein Standardwert"
+          },
+          "option": {
+            "create_update": {
+              "label": "Optionen",
+              "form": {
+                "placeholder": "Option hinzufügen",
+                "errors": {
+                  "name": {
+                    "required": "Optionsname ist erforderlich.",
+                    "integrity": "Option mit gleichem Namen existiert bereits."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Option auswählen",
+                "multi": {
+                  "default": "Optionen auswählen",
+                  "variable": "{count} Optionen ausgewählt"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Erfolg!",
+              "message": "Eigenschaft {name} erfolgreich erstellt."
+            },
+            "error": {
+              "title": "Fehler!",
+              "message": "Fehler beim Erstellen der Eigenschaft. Bitte versuchen Sie es erneut!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Erfolg!",
+              "message": "Eigenschaft {name} erfolgreich aktualisiert."
+            },
+            "error": {
+              "title": "Fehler!",
+              "message": "Fehler beim Aktualisieren der Eigenschaft. Bitte versuchen Sie es erneut!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Erfolg!",
+              "message": "Eigenschaft {name} erfolgreich gelöscht."
+            },
+            "error": {
+              "title": "Fehler!",
+              "message": "Fehler beim Löschen der Eigenschaft. Bitte versuchen Sie es erneut!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} der Eigenschaft {name}",
+            "success": {
+              "title": "Erfolg!",
+              "message": "Eigenschaft {name} erfolgreich {action}."
+            },
+            "error": {
+              "title": "Fehler!",
+              "message": "Fehler beim {action} der Eigenschaft. Bitte versuchen Sie es erneut!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Neue benutzerdefinierte Eigenschaft erstellen",
+            "update": "Benutzerdefinierte Eigenschaft aktualisieren"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Titel"
+            },
+            "description": {
+              "placeholder": "Beschreibung"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Sie müssen Ihre Eigenschaft benennen.",
+              "max_length": "Eigenschaftsname sollte 255 Zeichen nicht überschreiten."
+            },
+            "property_type": {
+              "required": "Sie müssen einen Eigenschaftstyp auswählen."
+            },
+            "options": {
+              "required": "Sie müssen mindestens eine Option hinzufügen."
+            },
+            "formula": {
+              "required": "Formelausdruck ist erforderlich.",
+              "invalid": "Ungültige Formel: {error}",
+              "circular_reference": "Zirkuläre Referenz erkannt. Eine Formel kann nicht direkt oder indirekt auf sich selbst verweisen.",
+              "invalid_reference": "Formel verweist auf eine nicht existierende Eigenschaft."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Formelfeld",
+          "tooltip": "Geben Sie eine Formel mit der Syntax '{'Feldname'}' ein. Unterstützt +, -, *, / und & Operatoren.",
+          "placeholder": "Formel eingeben",
+          "test_button": "Test",
+          "validating": "Wird überprüft",
+          "validation_success": "Formel ist gültig! Gibt {resultType} zurück",
+          "validation_success_with_refs": "Formel ist gültig! Gibt {resultType} zurück ({count} Feld(er) referenziert)",
+          "error": {
+            "empty": "Bitte geben Sie eine Formel ein",
+            "missing_context": "Fehlender Workspace-, Projekt- oder Arbeitsaufgabentyp-Kontext",
+            "validation_failed": "Validierung fehlgeschlagen"
+          },
+          "picker": {
+            "no_match": "Keine passenden Eigenschaften",
+            "no_available": "Keine verfügbaren Eigenschaften"
+          }
+        },
+        "enable_disable": {
+          "label": "Aktiv",
+          "tooltip": {
+            "disabled": "Klicken zum Deaktivieren",
+            "enabled": "Klicken zum Aktivieren"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Diese Eigenschaft löschen",
+          "description": "Das Löschen von Eigenschaften kann zum Verlust vorhandener Daten führen.",
+          "secondary_description": "Möchten Sie die Eigenschaft stattdessen deaktivieren?",
+          "primary_button": "{action}, löschen",
+          "secondary_button": "Ja, deaktivieren"
+        },
+        "mandate_confirmation": {
+          "label": "Pflichtfeld",
+          "content": "Es scheint eine Standardoption für diese Eigenschaft zu geben. Wenn Sie die Eigenschaft als Pflichtfeld festlegen, wird der Standardwert entfernt und die Benutzer müssen einen Wert ihrer Wahl hinzufügen.",
+          "tooltip": {
+            "disabled": "Dieser Eigenschaftstyp kann nicht als Pflichtfeld festgelegt werden",
+            "enabled": "Deaktivieren, um das Feld als optional zu markieren",
+            "checked": "Aktivieren, um das Feld als Pflichtfeld zu markieren"
+          }
+        },
+        "empty_state": {
+          "title": "Benutzerdefinierte Eigenschaften hinzufügen",
+          "description": "Neue Eigenschaften, die Sie für diesen Arbeitsaufgabentyp hinzufügen, werden hier angezeigt."
+        }
+      },
+      "types": {
+        "title": "Typen",
+        "description": "Erstellen und passen Sie Arbeitselementtypen mit Eigenschaften an.",
+        "sort_options": {
+          "project_count": "Anzahl der zugehörigen Projekte"
+        },
+        "filter_options": {
+          "show_active": "Aktive anzeigen",
+          "show_inactive": "Inaktive anzeigen"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Neu erstellen",
+            "import_from_workspace": "Aus Arbeitsbereich importieren"
+          },
+          "banner": {
+            "with_access": "Aktivieren Sie Arbeitsaufgabentypen, um Typen von der Arbeitsbereichsebene zu importieren",
+            "without_access": "Arbeitsaufgabentypen sind deaktiviert. Wenden Sie sich an den Arbeitsbereichs-Administrator, um sie in den Arbeitsbereichseinstellungen zu aktivieren."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Benutzerdefinierte Eigenschaften",
+        "add_button": "Eigenschaften hinzufügen",
+        "modal": {
+          "title": "Eigenschaften hinzufügen",
+          "empty": {
+            "title": "Keine Eigenschaften verfügbar",
+            "description": "Alle Eigenschaften wurden bereits mit diesem Typ verknüpft."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Eigenschaft trennen",
+          "description": "Das Trennen dieser Eigenschaft löscht dauerhaft alle ihre Werte in jedem Arbeitselement dieses Typs. Diese Aktion kann nicht rückgängig gemacht werden.",
+          "input_label": "Geben Sie",
+          "input_label_suffix": "zum Fortfahren ein:",
+          "confirm": "Eigenschaft trennen",
+          "loading": "Wird getrennt"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Diesen Typ löschen",
+        "description": "Das Löschen von Typen kann zum Verlust vorhandener Daten führen.",
+        "can_disable_warning": "Möchten Sie stattdessen den Typ deaktivieren?",
+        "primary_button": "Ja, löschen",
+        "toast": {
+          "success": {
+            "title": "Erfolg!",
+            "message": "Arbeitselementtyp wurde erfolgreich gelöscht."
+          },
+          "error": {
+            "title": "Fehler!",
+            "message": "Löschen des Arbeitselementtyps fehlgeschlagen. Bitte versuchen Sie es erneut!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Der Standard-Arbeitselementtyp kann nicht gelöscht werden",
+          "cannot_delete_work_item_type_with_associated_work_items": "Arbeitselementtyp mit zugeordneten Arbeitselementen kann nicht gelöscht werden"
+        }
+      }
+    },
+    "create": {
+      "title": "Arbeitsaufgabentyp erstellen",
+      "button": "Arbeitsaufgabentyp hinzufügen",
+      "toast": {
+        "success": {
+          "title": "Erfolg!",
+          "message": "Arbeitsaufgabentyp erfolgreich erstellt."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": {
+            "default": "Arbeitselementtyp konnte nicht erstellt werden. Bitte versuchen Sie es erneut!",
+            "conflict": "Der Typ {name} existiert bereits. Bitte wählen Sie einen anderen Namen."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Arbeitsaufgabentyp aktualisieren",
+      "button": "Arbeitsaufgabentyp aktualisieren",
+      "toast": {
+        "success": {
+          "title": "Erfolg!",
+          "message": "Arbeitsaufgabentyp {name} erfolgreich aktualisiert."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": {
+            "default": "Arbeitselementtyp konnte nicht aktualisiert werden. Bitte versuchen Sie es erneut!",
+            "conflict": "Der Typ {name} existiert bereits. Bitte wählen Sie einen anderen Namen."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Geben Sie diesem Arbeitsaufgabentyp einen eindeutigen Namen"
+        },
+        "description": {
+          "placeholder": "Beschreiben Sie, wofür dieser Arbeitsaufgabentyp gedacht ist und wann er verwendet werden soll."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} des Arbeitsaufgabentyps {name}",
+        "success": {
+          "title": "Erfolg!",
+          "message": "Arbeitsaufgabentyp {name} erfolgreich {action}."
+        },
+        "error": {
+          "title": "Fehler!",
+          "message": "Fehler beim {action} des Arbeitsaufgabentyps. Bitte versuchen Sie es erneut!"
+        }
+      },
+      "tooltip": "Klicken zum {action}"
+    },
+    "change_confirmation": {
+      "title": "Arbeitsaufgabentyp ändern?",
+      "description": "Das Ändern des Arbeitsaufgabentyps kann zum Verlust von benutzerdefinierten Eigenschaftswerten führen, die spezifisch für den aktuellen Typ sind. Diese Aktion kann nicht rückgängig gemacht werden.",
+      "button": {
+        "loading": "Wird geändert",
+        "default": "Typ ändern"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Arbeitsaufgabentypen aktivieren",
+        "description": "Gestalten Sie Arbeitsaufgaben an Ihre Arbeit mit Arbeitsaufgabentypen an. Passen Sie sie mit Icons, Hintergründen und Eigenschaften an und konfigurieren Sie sie für dieses Projekt.",
+        "primary_button": {
+          "text": "Aktivieren"
+        },
+        "confirmation": {
+          "title": "Einmal aktiviert, können Arbeitsaufgabentypen nicht deaktiviert werden.",
+          "description": "Planes Arbeitsaufgabe wird zum Standard-Arbeitsaufgabentyp für dieses Projekt und wird mit seinem Icon und Hintergrund in diesem Projekt angezeigt.",
+          "button": {
+            "default": "Aktivieren",
+            "loading": "Einrichten"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Holen Sie sich Pro, um Arbeitsaufgabentypen zu aktivieren.",
+        "description": "Gestalten Sie Arbeitsaufgaben an Ihre Arbeit mit Arbeitsaufgabentypen an. Passen Sie sie mit Icons, Hintergründen und Eigenschaften an und konfigurieren Sie sie für dieses Projekt.",
+        "primary_button": {
+          "text": "Pro holen"
+        }
+      },
+      "upgrade": {
+        "title": "Upgrade durchführen, um Arbeitsaufgabentypen zu aktivieren.",
+        "description": "Gestalten Sie Arbeitsaufgaben an Ihre Arbeit mit Arbeitsaufgabentypen an. Passen Sie sie mit Icons, Hintergründen und Eigenschaften an und konfigurieren Sie sie für dieses Projekt.",
+        "primary_button": {
+          "text": "Upgrade"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hierarchie",
+      "tab_label": "Hierarchie",
+      "description": "Richten Sie Hierarchieebenen ein, um Ihre Arbeit zu organisieren. Jede Ebene definiert eine Eltern-Beziehung mit dem Element direkt darüber und eine Kind-Beziehung mit dem Element direkt darunter. ",
+      "sidebar_label": "Hierarchie",
+      "enable_control": {
+        "title": "Hierarchie aktivieren",
+        "description": "Erstellen Sie Eltern-Kind-Beziehungen zwischen verschiedenen Arbeitselement-Typen.",
+        "tooltip": "Sie können die Hierarchie nach der Aktivierung nicht mehr deaktivieren."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Definieren Sie zuerst Arbeitselement-Typen, um eine neue Hierarchie zu erstellen.",
+        "cta": "Einstellungen für Arbeitselement-Typen"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Ziehen Sie einen Typ hierher, um eine neue Hierarchieebene hinzuzufügen",
+      "empty_level_placeholder": "Ziehen Sie einen Arbeitselement-Typ auf Ebene {level}",
+      "drag_tooltip": "Ziehen zum Ändern der Ebene",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Als Standard festlegen",
+          "toast": {
+            "loading": "Als Standard festlegen...",
+            "success": {
+              "title": "Erfolg!",
+              "message": "Hierarchieebene {level} erfolgreich als Standard festgelegt."
+            },
+            "error": {
+              "title": "Fehler!",
+              "message": "Hierarchieebene {level} konnte nicht als Standard festgelegt werden. Bitte versuchen Sie es erneut."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Verschiebe {workItemTypeName} in Ebene {level}...",
+        "success": {
+          "title": "Erfolg!",
+          "message": "{workItemTypeName} wurde erfolgreich in Ebene {level} verschoben."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Speichern trennt bestehende Verknüpfungen",
+      "content": {
+        "intro": "Der Arbeitselement-Typ „{workItemTypeName}“ umfasst:",
+        "parent_items": "{count, plural, one {# übergeordnete Verknüpfung wird} other {# übergeordnete Verknüpfungen werden}} entfernt.",
+        "child_items": "{count, plural, one {Unterarbeitselement} other {Unterarbeitselemente}}",
+        "parent_line_suffix_when_also_children": ", und ",
+        "footer": "Diese Änderung entfernt übergeordnete und untergeordnete Beziehungen bei vorhandenen Arbeitselementen des Typs {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Geben Sie „bestätigen“ ein, um fortzufahren.",
+        "placeholder": "bestätigen"
+      },
+      "error_toast": {
+        "title": "Fehler!",
+        "message": "Verknüpfungen konnten nicht aufgehoben und gespeichert werden. Bitte versuchen Sie es erneut."
+      },
+      "confirm_button": {
+        "loading": "Speichern",
+        "default": "Trotzdem speichern"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Fehler!",
+        "message": "Der ausgewählte Arbeitselement-Typ kann nicht zum Erstellen eines neuen Arbeitselements verwendet werden, da dies die Hierarchieregeln verletzt."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Fehler!",
+        "message": "Der Arbeitselement-Typ kann nicht aktualisiert werden, da dies die Hierarchieregeln verletzt."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Hierarchieebene",
+      "invalid_level_toast": {
+        "title": "Fehler!",
+        "message": "Der Arbeitselement-Typ kann nicht aktualisiert werden, da dies die Hierarchieregeln verletzt."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/work-item.json b/packages/i18n/src/locales/de/work-item.json
new file mode 100644
index 0000000..ddc105e
--- /dev/null
+++ b/packages/i18n/src/locales/de/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Arbeitselement} few {Arbeitselemente} other {Arbeitselemente}}",
+    "all": "Alle Arbeitselemente",
+    "edit": "Arbeitselement bearbeiten",
+    "title": {
+      "label": "Titel des Arbeitselements",
+      "required": "Ein Titel für das Arbeitselement ist erforderlich."
+    },
+    "add": {
+      "press_enter": "Drücken Sie 'Enter', um ein weiteres Arbeitselement hinzuzufügen",
+      "label": "Arbeitselement hinzufügen",
+      "cycle": {
+        "failed": "Hinzufügen des Arbeitselements zum Zyklus fehlgeschlagen. Bitte versuchen Sie es erneut.",
+        "success": "{count, plural, one {Arbeitselement} few {Arbeitselemente} other {Arbeitselemente}} zum Zyklus hinzugefügt.",
+        "loading": "{count, plural, one {Arbeitselement} other {Arbeitselemente}} werden zum Zyklus hinzugefügt"
+      },
+      "assignee": "Zugewiesene hinzufügen",
+      "start_date": "Startdatum hinzufügen",
+      "due_date": "Fälligkeitsdatum hinzufügen",
+      "parent": "Übergeordnetes Arbeitselement hinzufügen",
+      "sub_issue": "Untergeordnetes Arbeitselement hinzufügen",
+      "dependency": "Abhängigkeit hinzufügen",
+      "relation": "Beziehung hinzufügen",
+      "link": "Link hinzufügen",
+      "existing": "Vorhandenes Arbeitselement hinzufügen"
+    },
+    "remove": {
+      "label": "Arbeitselement entfernen",
+      "cycle": {
+        "loading": "Arbeitselement wird aus dem Zyklus entfernt",
+        "success": "Arbeitselement aus dem Zyklus entfernt.",
+        "failed": "Das Entfernen des Arbeitselements aus dem Zyklus ist fehlgeschlagen. Bitte versuchen Sie es erneut."
+      },
+      "module": {
+        "loading": "Arbeitselement wird aus dem Modul entfernt",
+        "success": "Arbeitselement aus dem Modul entfernt.",
+        "failed": "Das Entfernen des Arbeitselements aus dem Modul ist fehlgeschlagen. Bitte versuchen Sie es erneut."
+      },
+      "parent": {
+        "label": "Übergeordnetes Arbeitselement entfernen"
+      }
+    },
+    "new": "Neues Arbeitselement",
+    "adding": "Arbeitselement wird hinzugefügt",
+    "create": {
+      "success": "Arbeitselement erfolgreich erstellt"
+    },
+    "priority": {
+      "urgent": "Dringend",
+      "high": "Hoch",
+      "medium": "Mittel",
+      "low": "Niedrig"
+    },
+    "display": {
+      "properties": {
+        "label": "Anzuzeigende Eigenschaften",
+        "id": "ID",
+        "issue_type": "Typ des Arbeitselements",
+        "sub_issue_count": "Anzahl untergeordneter Elemente",
+        "attachment_count": "Anzahl Anhänge",
+        "created_on": "Erstellt am",
+        "sub_issue": "Untergeordnetes Element",
+        "work_item_count": "Anzahl Arbeitselemente"
+      },
+      "extra": {
+        "show_sub_issues": "Untergeordnete Elemente anzeigen",
+        "show_empty_groups": "Leere Gruppen anzeigen"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Dieses Layout wird sortiert nach",
+      "list": "Liste",
+      "kanban": "Kanban",
+      "calendar": "Kalender",
+      "spreadsheet": "Tabellenansicht",
+      "gantt": "Zeitachsenansicht",
+      "title": {
+        "list": "Listenlayout",
+        "kanban": "Kanban-Layout",
+        "calendar": "Kalenderlayout",
+        "spreadsheet": "Tabellenlayout",
+        "gantt": "Zeitachsenlayout"
+      }
+    },
+    "states": {
+      "active": "Aktiv",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Kommentar hinzufügen",
+      "switch": {
+        "private": "Zu privatem Kommentar wechseln",
+        "public": "Zu öffentlichem Kommentar wechseln"
+      },
+      "create": {
+        "success": "Kommentar erfolgreich erstellt",
+        "error": "Kommentar konnte nicht erstellt werden. Bitte versuchen Sie es später erneut."
+      },
+      "update": {
+        "success": "Kommentar erfolgreich aktualisiert",
+        "error": "Kommentar konnte nicht aktualisiert werden. Bitte versuchen Sie es später erneut."
+      },
+      "remove": {
+        "success": "Kommentar erfolgreich entfernt",
+        "error": "Kommentar konnte nicht entfernt werden. Bitte versuchen Sie es später erneut."
+      },
+      "upload": {
+        "error": "Anhang konnte nicht hochgeladen werden. Bitte versuchen Sie es später erneut."
+      },
+      "copy_link": {
+        "success": "Kommentar-Link in die Zwischenablage kopiert",
+        "error": "Fehler beim Kopieren des Kommentar-Links. Bitte versuchen Sie es später erneut."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Antwort hinzufügen",
+          "placeholder": "Antwort hinzufügen"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Antworten konnten nicht geladen werden"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Antwort erfolgreich erstellt"
+            },
+            "error": {
+              "message": "Antwort konnte nicht erstellt werden"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Antwort erfolgreich aktualisiert"
+            },
+            "error": {
+              "message": "Antwort konnte nicht aktualisiert werden"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Antwort erfolgreich gelöscht"
+            },
+            "error": {
+              "message": "Antwort konnte nicht gelöscht werden"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Arbeitselement existiert nicht",
+        "description": "Das gesuchte Arbeitselement existiert nicht, wurde archiviert oder gelöscht.",
+        "primary_button": {
+          "text": "Weitere Arbeitselemente anzeigen"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Verwandte Arbeitselemente"
+    },
+    "archive": {
+      "description": "Nur abgeschlossene oder abgebrochene Arbeitselemente können archiviert werden",
+      "label": "Arbeitselement archivieren",
+      "confirm_message": "Möchten Sie dieses Arbeitselement wirklich archivieren? Alle archivierten Elemente können später wiederhergestellt werden.",
+      "success": {
+        "label": "Erfolgreich archiviert",
+        "message": "Ihre archivierten Elemente finden Sie in den Projektarchiven."
+      },
+      "failed": {
+        "message": "Archivierung des Arbeitselements fehlgeschlagen. Bitte versuchen Sie es erneut."
+      },
+      "banner_message": "Dieses Arbeitselement wurde archiviert. Rufen Sie den Bereich „Archive“ auf, um es wiederherzustellen.",
+      "go_to_archives": "Zu den Archiven"
+    },
+    "restore": {
+      "success": {
+        "title": "Wiederherstellung erfolgreich",
+        "message": "Ihr Arbeitselement ist jetzt wieder in den Arbeitselementen des Projekts zu finden."
+      },
+      "failed": {
+        "message": "Wiederherstellung des Arbeitselements fehlgeschlagen. Bitte versuchen Sie es erneut."
+      }
+    },
+    "relation": {
+      "relates_to": "Steht in Beziehung zu",
+      "duplicate": "Duplikat",
+      "blocked_by": "Blockiert durch",
+      "blocking": "Blockiert",
+      "start_before": "Beginnt Vor",
+      "start_after": "Beginnt Nach",
+      "finish_before": "Endet Vor",
+      "finish_after": "Endet Nach",
+      "implements": "Implementiert",
+      "implemented_by": "Implementiert von"
+    },
+    "copy_link": "Link zum Arbeitselement kopieren",
+    "delete": {
+      "label": "Arbeitselement löschen",
+      "error": "Fehler beim Löschen des Arbeitselements"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Arbeitselement erfolgreich abonniert",
+        "unsubscribed": "Abo für Arbeitselement beendet"
+      }
+    },
+    "select": {
+      "error": "Wählen Sie mindestens ein Arbeitselement aus",
+      "empty": "Keine Arbeitselemente ausgewählt",
+      "add_selected": "Ausgewählte Arbeitselemente hinzufügen",
+      "select_all": "Alle auswählen",
+      "deselect_all": "Alle abwählen"
+    },
+    "open_in_full_screen": "Arbeitselement im Vollbild öffnen",
+    "duplicate": {
+      "modal": {
+        "title": "Eine Kopie in ein anderes Projekt erstellen",
+        "description1": "Dies erstellt eine Kopie des Arbeitselements.",
+        "description2": "Alle Eigenschaftsdaten werden beim Duplizieren entfernt.",
+        "placeholder": "Projekt auswählen"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Arbeitselement erfolgreich dupliziert"
+        },
+        "error": {
+          "message": "Arbeitselement konnte nicht dupliziert werden"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Seiten verknüpfen",
+      "show_wiki_pages": "Wiki-Seiten anzeigen",
+      "link_pages_to": "Seiten verknüpfen mit",
+      "linked_pages": "Verknüpfte Seiten",
+      "no_description": "Diese Seite ist leer. Schreiben Sie etwas hinein und sehen Sie es hier anstelle dieses Platzhalters",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Seiten aktualisiert",
+            "message": "Seiten wurden erfolgreich aktualisiert"
+          },
+          "error": {
+            "title": "Seiten nicht aktualisiert",
+            "message": "Seiten konnten nicht aktualisiert werden"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Seite entfernt",
+            "message": "Seite wurde erfolgreich entfernt"
+          },
+          "error": {
+            "title": "Seite nicht entfernt",
+            "message": "Seite konnte nicht entfernt werden"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Klicken zum Hochstimmen",
+      "click_to_downvote": "Klicken zum Runterstimmen",
+      "click_to_view_upvotes": "Klicken um Hochstimmen anzuzeigen",
+      "click_to_view_downvotes": "Klicken um Runterstimmen anzuzeigen"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Untergeordnetes Arbeitselement erfolgreich aktualisiert",
+      "error": "Fehler beim Aktualisieren des untergeordneten Elements"
+    },
+    "remove": {
+      "success": "Untergeordnetes Arbeitselement erfolgreich entfernt",
+      "error": "Fehler beim Entfernen des untergeordneten Elements"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Sie haben keine untergeordneten Arbeitselemente, die den von Ihnen angewendeten Filtern entsprechen.",
+        "description": "Um alle untergeordneten Arbeitselemente anzuzeigen, entfernen Sie alle angewendeten Filter.",
+        "action": "Filter entfernen"
+      },
+      "list_filters": {
+        "title": "Sie haben keine Arbeitselemente, die den von Ihnen angewendeten Filtern entsprechen.",
+        "description": "Um alle Arbeitselemente anzuzeigen, entfernen Sie alle angewendeten Filter.",
+        "action": "Filter entfernen"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Keine passenden Elemente"
+      },
+      "no_issues": {
+        "title": "Keine Elemente"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Keine Kommentare",
+        "description": "Kommentare dienen der Diskussion und der Nachverfolgung von Elementen."
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Arbeitsaufgaben können nicht archiviert werden",
+        "message": "Nur Arbeitsaufgaben, die zu den Statusgruppen Abgeschlossen oder Abgebrochen gehören, können archiviert werden."
+      },
+      "invalid_issue_start_date": {
+        "title": "Arbeitsaufgaben können nicht aktualisiert werden",
+        "message": "Das ausgewählte Startdatum liegt nach dem Fälligkeitsdatum für einige Arbeitsaufgaben. Stellen Sie sicher, dass das Startdatum vor dem Fälligkeitsdatum liegt."
+      },
+      "invalid_issue_target_date": {
+        "title": "Arbeitsaufgaben können nicht aktualisiert werden",
+        "message": "Das ausgewählte Fälligkeitsdatum liegt vor dem Startdatum für einige Arbeitsaufgaben. Stellen Sie sicher, dass das Fälligkeitsdatum nach dem Startdatum liegt."
+      },
+      "invalid_state_transition": {
+        "title": "Arbeitsaufgaben können nicht aktualisiert werden",
+        "message": "Statusänderung ist für einige Arbeitsaufgaben nicht erlaubt. Stellen Sie sicher, dass die Statusänderung zulässig ist."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Status, Priorität und mehr für mehrere Arbeitselemente gleichzeitig ändern. Im Schnitt drei Minuten pro Vorgang sparen.",
+      "cta": "Upgrade auf One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Wiederkehrende Arbeitsaufgaben",
+      "description": "Setzen Sie Ihre wiederkehrende Arbeit einmalig und wir kümmern uns um die Wiederholungen. Sie sehen alles hier, wenn es Zeit ist.",
+      "new_recurring_work_item": "Neue wiederkehrende Arbeitsaufgabe",
+      "update_recurring_work_item": "Wiederkehrende Arbeitsaufgabe aktualisieren",
+      "form": {
+        "interval": {
+          "title": "Zeitplan",
+          "start_date": {
+            "validation": {
+              "required": "Startdatum ist erforderlich"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Intervalltyp ist erforderlich"
+            }
+          }
+        },
+        "button": {
+          "create": "Wiederkehrende Arbeitsaufgabe erstellen",
+          "update": "Wiederkehrende Arbeitsaufgabe aktualisieren"
+        }
+      },
+      "create_button": {
+        "label": "Wiederkehrende Arbeitsaufgabe erstellen",
+        "no_permission": "Wenden Sie sich an Ihren Projektadministrator, um wiederkehrende Arbeitsaufgaben zu erstellen"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Ihre Arbeit, auf Autopilot",
+        "description": "Einmal einstellen. Wir erinnern Sie daran, wenn es fällig ist. Upgrade auf Business, um wiederkehrende Arbeit mühelos zu machen."
+      },
+      "no_templates": {
+        "button": "Erstellen Sie Ihre erste wiederkehrende Arbeitsaufgabe"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Wiederkehrende Arbeitsaufgabe erstellt",
+          "message": "{name}, die wiederkehrende Arbeitsaufgabe, ist jetzt für Ihren Arbeitsbereich verfügbar."
+        },
+        "error": {
+          "title": "Wir konnten diese wiederkehrende Arbeitsaufgabe diesmal nicht erstellen.",
+          "message": "Versuchen Sie, Ihre Angaben erneut zu speichern oder kopieren Sie sie in eine neue wiederkehrende Arbeitsaufgabe, vorzugsweise in einem anderen Tab."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Wiederkehrende Arbeitsaufgabe geändert",
+          "message": "{name}, die wiederkehrende Arbeitsaufgabe, wurde geändert."
+        },
+        "error": {
+          "title": "Wir konnten die Änderungen an dieser wiederkehrenden Arbeitsaufgabe nicht speichern.",
+          "message": "Versuchen Sie, Ihre Angaben erneut zu speichern oder kommen Sie später zu dieser wiederkehrenden Arbeitsaufgabe zurück. Wenn weiterhin Probleme auftreten, kontaktieren Sie uns."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Wiederkehrende Arbeitsaufgabe gelöscht",
+          "message": "{name}, die wiederkehrende Arbeitsaufgabe, wurde aus Ihrem Arbeitsbereich gelöscht."
+        },
+        "error": {
+          "title": "Wir konnten diese wiederkehrende Arbeitsaufgabe nicht löschen.",
+          "message": "Versuchen Sie es erneut oder kommen Sie später darauf zurück. Wenn Sie sie dann immer noch nicht löschen können, kontaktieren Sie uns."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Wiederkehrende Arbeitsaufgabe löschen",
+      "description": {
+        "prefix": "Sind Sie sicher, dass Sie die wiederkehrende Arbeitsaufgabe löschen möchten-",
+        "suffix": "? Alle mit der wiederkehrenden Arbeitsaufgabe verbundenen Daten werden dauerhaft entfernt. Diese Aktion kann nicht rückgängig gemacht werden."
+      }
+    }
+  },
+  "epic": {
+    "new": "Neues Epic",
+    "label": "{count, plural, one {Epic} other {Epics}}",
+    "adding": "Epic wird hinzugefügt",
+    "create": {
+      "success": "Epic erfolgreich erstellt"
+    },
+    "add": {
+      "label": "Epic hinzufügen",
+      "press_enter": "Drücken Sie 'Enter', um ein weiteres Epic hinzuzufügen"
+    },
+    "title": {
+      "label": "Epic-Titel",
+      "required": "Ein Titel für das Epic ist erforderlich."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/workflow.json b/packages/i18n/src/locales/de/workflow.json
new file mode 100644
index 0000000..de1dd7a
--- /dev/null
+++ b/packages/i18n/src/locales/de/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Neue Arbeitsaufgaben erlauben",
+      "work_item_creation_disable_tooltip": "Erstellung von Arbeitsaufgaben ist für diesen Status deaktiviert",
+      "default_state": "Der Standardstatus erlaubt allen Mitgliedern, neue Arbeitsaufgaben zu erstellen. Dies kann nicht geändert werden",
+      "state_change_count": "{count, plural, one {1 erlaubte Statusänderung} other {{count} erlaubte Statusänderungen}}",
+      "movers_count": "{count, plural, one {1 aufgelisteter Prüfer} other {{count} aufgelistete Prüfer}}",
+      "state_changes": {
+        "label": {
+          "default": "Erlaubte Statusänderung hinzufügen",
+          "loading": "Erlaubte Statusänderung wird hinzugefügt"
+        },
+        "move_to": "Status ändern zu",
+        "movers": {
+          "label": "Bei Prüfung durch",
+          "tooltip": "Prüfer sind Personen, die berechtigt sind, Arbeitsaufgaben von einem Status in einen anderen zu verschieben.",
+          "add": "Prüfer hinzufügen"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Sie können diese Arbeitsaufgabe nicht hierher verschieben."
+    },
+    "workflow_enabled": {
+      "label": "Statusänderung"
+    },
+    "workflow_tree": {
+      "label": "Für Arbeitsaufgaben in",
+      "state_change_label": "kann es verschieben nach"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Kontrollieren Sie das Chaos von Änderungen und Überprüfungen mit Workflows.",
+        "description": "Legen Sie Regeln fest, wohin sich Ihre Arbeit bewegt, durch wen und wann mit Workflows in Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Änderungsverlauf anzeigen",
+      "reset_workflow": "Workflow zurücksetzen"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Sind Sie sicher, dass Sie diesen Workflow zurücksetzen möchten?",
+        "description": "Wenn Sie diesen Workflow zurücksetzen, werden alle Ihre Statusänderungsregeln gelöscht und Sie müssen sie erneut erstellen, um sie in diesem Projekt auszuführen."
+      },
+      "delete_state_change": {
+        "title": "Sind Sie sicher, dass Sie diese Statusänderungsregel löschen möchten?",
+        "description": "Einmal gelöscht, können Sie diese Änderung nicht rückgängig machen und müssen die Regel erneut festlegen, wenn Sie möchten, dass sie für dieses Projekt gilt."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "Workflow wird {action}",
+        "success": {
+          "title": "Erfolg",
+          "message": "Workflow erfolgreich {action}"
+        },
+        "error": {
+          "title": "Fehler",
+          "message": "Workflow konnte nicht {action} werden. Bitte versuchen Sie es erneut."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Erfolg",
+          "message": "Workflow erfolgreich zurückgesetzt"
+        },
+        "error": {
+          "title": "Fehler beim Zurücksetzen des Workflows",
+          "message": "Workflow konnte nicht zurückgesetzt werden. Bitte versuchen Sie es erneut."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Fehler beim Hinzufügen der Statusänderungsregel",
+          "message": "Statusänderungsregel konnte nicht hinzugefügt werden. Bitte versuchen Sie es erneut."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Fehler beim Ändern der Statusänderungsregel",
+          "message": "Statusänderungsregel konnte nicht geändert werden. Bitte versuchen Sie es erneut."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Fehler beim Entfernen der Statusänderungsregel",
+          "message": "Statusänderungsregel konnte nicht entfernt werden. Bitte versuchen Sie es erneut."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Fehler beim Ändern der Prüfer der Statusänderungsregel",
+          "message": "Prüfer der Statusänderungsregel konnten nicht geändert werden. Bitte versuchen Sie es erneut."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/workspace-settings.json b/packages/i18n/src/locales/de/workspace-settings.json
new file mode 100644
index 0000000..2126902
--- /dev/null
+++ b/packages/i18n/src/locales/de/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Arbeitsbereich-Einstellungen",
+    "page_label": "{workspace} - Allgemeine Einstellungen",
+    "key_created": "Schlüssel erstellt",
+    "copy_key": "Kopieren Sie diesen Schlüssel und fügen Sie ihn in Plane Pages ein. Nach dem Schließen können Sie ihn nicht mehr sehen. Eine CSV-Datei mit dem Schlüssel wurde heruntergeladen.",
+    "token_copied": "Token in die Zwischenablage kopiert.",
+    "settings": {
+      "general": {
+        "title": "Allgemein",
+        "upload_logo": "Logo hochladen",
+        "edit_logo": "Logo bearbeiten",
+        "name": "Name des Arbeitsbereichs",
+        "company_size": "Unternehmensgröße",
+        "url": "URL des Arbeitsbereichs",
+        "workspace_timezone": "Zeitzone des Arbeitsbereichs",
+        "update_workspace": "Arbeitsbereich aktualisieren",
+        "delete_workspace": "Diesen Arbeitsbereich löschen",
+        "delete_workspace_description": "Das Löschen des Arbeitsbereichs entfernt alle Daten und Ressourcen. Diese Aktion ist nicht umkehrbar.",
+        "delete_btn": "Arbeitsbereich löschen",
+        "delete_modal": {
+          "title": "Möchten Sie diesen Arbeitsbereich wirklich löschen?",
+          "description": "Sie haben eine aktive Testversion. Bitte kündigen Sie diese zuerst.",
+          "dismiss": "Schließen",
+          "cancel": "Testversion kündigen",
+          "success_title": "Arbeitsbereich gelöscht.",
+          "success_message": "Sie werden auf Ihr Profil umgeleitet.",
+          "error_title": "Fehlgeschlagen.",
+          "error_message": "Bitte versuchen Sie es erneut."
+        },
+        "errors": {
+          "name": {
+            "required": "Name ist erforderlich",
+            "max_length": "Der Name des Arbeitsbereichs darf 80 Zeichen nicht überschreiten"
+          },
+          "company_size": {
+            "required": "Die Unternehmensgröße ist erforderlich",
+            "select_a_range": "Organisationsgröße auswählen"
+          }
+        }
+      },
+      "members": {
+        "title": "Mitglieder",
+        "add_member": "Mitglied hinzufügen",
+        "pending_invites": "Ausstehende Einladungen",
+        "invitations_sent_successfully": "Einladungen erfolgreich versendet",
+        "leave_confirmation": "Möchten Sie diesen Arbeitsbereich wirklich verlassen? Sie verlieren den Zugriff. Diese Aktion ist nicht umkehrbar.",
+        "details": {
+          "full_name": "Vollständiger Name",
+          "display_name": "Anzeigename",
+          "email_address": "E-Mail-Adresse",
+          "account_type": "Kontotyp",
+          "authentication": "Authentifizierung",
+          "joining_date": "Beitrittsdatum"
+        },
+        "modal": {
+          "title": "Mitarbeiter einladen",
+          "description": "Laden Sie Personen zur Zusammenarbeit ein.",
+          "button": "Einladungen senden",
+          "button_loading": "Einladungen werden gesendet",
+          "placeholder": "name@unternehmen.de",
+          "errors": {
+            "required": "Eine E-Mail-Adresse ist erforderlich.",
+            "invalid": "E-Mail ist ungültig"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Abrechnung und Pläne",
+        "description": "Wählen Sie Ihren Plan, verwalten Sie Abonnements und führen Sie bei Bedarf ein Upgrade durch.",
+        "title": "Abrechnung und Pläne",
+        "current_plan": "Aktueller Plan",
+        "free_plan": "Sie nutzen den kostenlosen Plan",
+        "view_plans": "Pläne anzeigen"
+      },
+      "exports": {
+        "heading": "Exporte",
+        "description": "Exportieren Sie Ihre Projektdaten in verschiedenen Formaten und greifen Sie auf Ihre Exporthistorie mit Download-Links zu.",
+        "title": "Exporte",
+        "exporting": "Wird exportiert",
+        "previous_exports": "Bisherige Exporte",
+        "export_separate_files": "Daten in separaten Dateien exportieren",
+        "exporting_projects": "Projekt wird exportiert",
+        "format": "Format",
+        "filters_info": "Wenden Sie Filter an, um bestimmte Arbeitselemente basierend auf Ihren Kriterien zu exportieren.",
+        "modal": {
+          "title": "Exportieren nach",
+          "toasts": {
+            "success": {
+              "title": "Export erfolgreich",
+              "message": "Die exportierten {entity} können aus dem vorherigen Export heruntergeladen werden."
+            },
+            "error": {
+              "title": "Export fehlgeschlagen",
+              "message": "Bitte versuchen Sie es erneut."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooks",
+        "description": "Automatisieren Sie Benachrichtigungen an externe Dienste, wenn Projektereignisse auftreten.",
+        "title": "Webhooks",
+        "add_webhook": "Webhook hinzufügen",
+        "modal": {
+          "title": "Webhook erstellen",
+          "details": "Webhook-Details",
+          "payload": "Payload-URL",
+          "question": "Bei welchen Ereignissen soll dieser Webhook ausgelöst werden?",
+          "error": "URL ist erforderlich"
+        },
+        "secret_key": {
+          "title": "Geheimer Schlüssel",
+          "message": "Generieren Sie ein Token, um sich bei Webhooks anzumelden"
+        },
+        "options": {
+          "all": "Alles senden",
+          "individual": "Einzelne Ereignisse auswählen"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook erstellt",
+            "message": "Webhook wurde erfolgreich erstellt"
+          },
+          "not_created": {
+            "title": "Webhook nicht erstellt",
+            "message": "Webhook konnte nicht erstellt werden"
+          },
+          "updated": {
+            "title": "Webhook aktualisiert",
+            "message": "Webhook wurde erfolgreich aktualisiert"
+          },
+          "not_updated": {
+            "title": "Webhook-Aktualisierung fehlgeschlagen",
+            "message": "Webhook konnte nicht aktualisiert werden"
+          },
+          "removed": {
+            "title": "Webhook entfernt",
+            "message": "Webhook wurde erfolgreich entfernt"
+          },
+          "not_removed": {
+            "title": "Webhook konnte nicht entfernt werden",
+            "message": "Webhook konnte nicht entfernt werden"
+          },
+          "secret_key_copied": {
+            "message": "Geheimer Schlüssel in die Zwischenablage kopiert."
+          },
+          "secret_key_not_copied": {
+            "message": "Fehler beim Kopieren des Schlüssels."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "API-Tokens",
+        "description": "Generieren Sie sichere API-Tokens, um Ihre Daten mit externen Systemen und Anwendungen zu integrieren.",
+        "title": "API-Tokens",
+        "add_token": "Zugriffstoken hinzufügen",
+        "create_token": "Token erstellen",
+        "never_expires": "Läuft nie ab",
+        "generate_token": "Token generieren",
+        "generating": "Wird generiert",
+        "delete": {
+          "title": "API-Token löschen",
+          "description": "Alle Anwendungen, die diesen Token verwenden, verlieren den Zugriff. Diese Aktion ist nicht umkehrbar.",
+          "success": {
+            "title": "Erfolg!",
+            "message": "Token erfolgreich gelöscht"
+          },
+          "error": {
+            "title": "Fehler!",
+            "message": "Löschen des Tokens fehlgeschlagen"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integrationen",
+        "heading": "Integrationen",
+        "description": "Verbinden Sie sich mit beliebten Tools und Diensten, um Ihre Arbeit über Ihr gesamtes Workflow-Ökosystem zu synchronisieren.",
+        "page_title": "Arbeiten Sie mit Ihren Plane-Daten in verfügbaren Apps oder in Ihren eigenen.",
+        "page_description": "Sehen Sie sich alle Integrationen an, die von diesem Workspace oder von Ihnen verwendet werden."
+      },
+      "imports": {
+        "title": "Importe",
+        "heading": "Importe",
+        "description": "Verbinden und importieren Sie Daten aus Ihren bestehenden Projektmanagement-Tools, um Ihre Workflow-Integration zu optimieren."
+      },
+      "worklogs": {
+        "title": "Arbeitsberichte",
+        "heading": "Arbeitsberichte",
+        "description": "Laden Sie Arbeitsberichte (Zeiterfassungen) für jeden in jedem Projekt herunter."
+      },
+      "group_syncing": {
+        "title": "Gruppensynchronisation",
+        "heading": "Gruppensynchronisation",
+        "description": "Verknüpfen Sie Identity-Provider-Gruppen mit Projekten und Rollen. Der Benutzerzugriff wird automatisch aktualisiert, wenn sich die Gruppenzugehörigkeit in Ihrem IdP ändert – für einfacheres Onboarding und Offboarding.",
+        "enable": {
+          "title": "Gruppensynchronisation aktivieren",
+          "description": "Benutzer werden automatisch basierend auf Identity-Provider-Gruppen zu Projekten hinzugefügt."
+        },
+        "config": {
+          "title": "Gruppensync konfigurieren",
+          "description": "Richten Sie ein, wie Identity-Provider-Gruppen Projekten und Rollen zugeordnet werden.",
+          "sync_on_login": {
+            "title": "Sync bei Anmeldung",
+            "description": "Gruppenzugehörigkeit und Projektzugriff bei Benutzeranmeldung aktualisieren."
+          },
+          "sync_offline": {
+            "title": "Offline-Sync",
+            "description": "Führt alle sechs Stunden automatisch einen Sync durch, ohne auf Benutzeranmeldungen zu warten."
+          },
+          "auto_remove": {
+            "title": "Automatische Entfernung",
+            "description": "Benutzer werden automatisch aus Projekten entfernt, wenn sie nicht mehr zur Gruppe passen."
+          },
+          "group_attribute_key": {
+            "title": "Gruppenattributschlüssel",
+            "description": "Das IdP-Attribut zur Identifikation und Synchronisation von Benutzergruppen.",
+            "placeholder": "Gruppen"
+          }
+        },
+        "group_mapping": {
+          "title": "Gruppenzuordnung",
+          "description": "Identity-Provider-Gruppen mit Projekten und Rollen verknüpfen.",
+          "button_text": "Neuen Gruppensync hinzufügen"
+        },
+        "toast": {
+          "updating": "Gruppensynchronisation wird aktualisiert",
+          "success": "Gruppensynchronisation wurde erfolgreich aktualisiert.",
+          "error": "Aktualisierung der Gruppensynchronisation fehlgeschlagen!"
+        },
+        "delete_modal": {
+          "title": "Gruppensync löschen",
+          "content": "Neue Benutzer aus dieser Identity-Gruppe werden nicht mehr zum Projekt hinzugefügt. Bereits hinzugefügte Benutzer behalten ihre aktuelle Rolle."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Benutzergruppe",
+            "required": "Benutzergruppe ist erforderlich",
+            "placeholder": "IdP-Gruppennamen eingeben"
+          },
+          "project": {
+            "text": "Projekt",
+            "required": "Projekt ist erforderlich",
+            "placeholder": "Projekt auswählen"
+          },
+          "default_role": {
+            "text": "Projektrolle",
+            "required": "Projektrolle ist erforderlich",
+            "placeholder": "Projektrolle auswählen"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identität",
+        "heading": "Identität",
+        "description": "Konfigurieren Sie Ihre Domain und aktivieren Sie Single Sign-On"
+      },
+      "project_states": {
+        "title": "Projektstatus",
+        "heading": "Fortschrittsübersicht für alle Projekte anzeigen.",
+        "description": "Projektstatus ist eine Plane-exklusive Funktion zur Verfolgung des Fortschritts aller Ihrer Projekte nach beliebiger Projekteigenschaft.",
+        "go_to_settings": "Zu den Einstellungen"
+      },
+      "projects": {
+        "title": "Projekte",
+        "description": "Projektstatus verwalten, Projektlabels aktivieren und weitere Konfiguration.",
+        "tabs": {
+          "states": "Projektstatus",
+          "labels": "Projektlabels"
+        }
+      },
+      "templates": {
+        "title": "Vorlagen",
+        "heading": "Vorlagen",
+        "description": "Sparen Sie 80% der Zeit beim Erstellen von Projekten, Arbeitselementen und Seiten, wenn Sie Vorlagen verwenden."
+      },
+      "relations": {
+        "title": "Beziehungen",
+        "heading": "Beziehungen",
+        "description": "Erstellen und verwalten Sie Beziehungstypen, die Arbeitselemente in Ihrem Arbeitsbereich verbinden."
+      },
+      "cancel_trial": {
+        "title": "Kündigen Sie zuerst Ihre Testphase.",
+        "description": "Sie haben eine aktive Testphase für einen unserer kostenpflichtigen Pläne. Bitte kündigen Sie diese zuerst, um fortzufahren.",
+        "dismiss": "Schließen",
+        "cancel": "Testphase kündigen",
+        "cancel_success_title": "Testphase gekündigt.",
+        "cancel_success_message": "Sie können jetzt den Workspace löschen.",
+        "cancel_error_title": "Das hat nicht funktioniert.",
+        "cancel_error_message": "Bitte versuchen Sie es erneut."
+      },
+      "applications": {
+        "internal": "Intern",
+        "title": "Anwendungen",
+        "applicationId_copied": "Anwendungs-ID in die Zwischenablage kopiert",
+        "clientId_copied": "Client-ID in die Zwischenablage kopiert",
+        "clientSecret_copied": "Client-Secret in die Zwischenablage kopiert",
+        "third_party_apps": "Drittanbieter-Apps",
+        "your_apps": "Ihre Apps",
+        "connect": "Verbinden",
+        "connected": "Verbunden",
+        "disconnect": "Trennen",
+        "install": "Installieren",
+        "installed": "Installiert",
+        "configure": "Konfigurieren",
+        "app_available": "Sie haben diese App für die Verwendung mit einem Plane-Workspace verfügbar gemacht",
+        "app_credentials_regenrated": {
+          "title": "App-Anmeldedaten wurden erfolgreich neu generiert",
+          "description": "Ersetzen Sie das Client-Secret überall, wo es verwendet wird. Das vorherige Secret ist nicht mehr gültig."
+        },
+        "app_created": {
+          "title": "App wurde erfolgreich erstellt",
+          "description": "Verwenden Sie die Anmeldedaten, um die App in einem Plane-Arbeitsbereich zu installieren"
+        },
+        "installed_apps": "Installierte Apps",
+        "all_apps": "Alle Apps",
+        "internal_apps": "Interne Apps",
+        "app_name_title": "Wie möchten Sie diese App nennen",
+        "app_description_title": {
+          "label": "Lange Beschreibung",
+          "placeholder": "Schreiben Sie eine lange Beschreibung für den Marktplatz. Drücken Sie '/' für Befehle."
+        },
+        "authorization_grant_type": {
+          "title": "Verbindungstyp",
+          "description": "Wählen Sie, ob Ihre App einmal für den Arbeitsbereich installiert werden soll oder ob jeder Benutzer sein eigenes Konto verbinden soll"
+        },
+        "website": {
+          "title": "Webseite",
+          "description": "Link zur Website Ihrer App.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "App-Entwickler",
+          "description": "Die Person oder Organisation, die die App erstellt."
+        },
+        "app_maker_error": "App-Entwickler ist erforderlich",
+        "setup_url": {
+          "label": "Setup-URL",
+          "description": "Benutzer werden zu dieser URL weitergeleitet, wenn sie die App installieren.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "Webhook-URL",
+          "description": "Hier werden wir Webhook-Ereignisse und Updates von den Arbeitsbereichen senden, in denen Ihre App installiert ist.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Webhook-Secret",
+          "description": "Secret zur Überprüfung eingehender Webhook-Anfragen.",
+          "placeholder": "Geben Sie einen zufälligen geheimen Schlüssel ein"
+        },
+        "redirect_uris": {
+          "label": "Redirect-URIs (durch Leerzeichen getrennt)",
+          "description": "Benutzer werden nach der Authentifizierung mit Plane auf diesen Pfad weitergeleitet.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Verbinden Sie einen Plane-Workspace, um die Nutzung zu beginnen",
+        "client_id_and_secret": "Client-ID und Secret",
+        "client_id_and_secret_description": "Kopieren und speichern Sie diesen geheimen Schlüssel. Sie können diesen Schlüssel nach dem Schließen nicht mehr sehen.",
+        "client_id_and_secret_download": "Sie können eine CSV-Datei mit dem Schlüssel von hier herunterladen.",
+        "application_id": "Anwendungs-ID",
+        "client_id": "Client-ID",
+        "client_secret": "Client-Secret",
+        "export_as_csv": "Als CSV exportieren",
+        "slug_already_exists": "Slug existiert bereits",
+        "failed_to_create_application": "Erstellen der Anwendung fehlgeschlagen",
+        "upload_logo": "Logo hochladen",
+        "app_name_error": "App-Name ist erforderlich",
+        "app_short_description_title": "Geben Sie dieser App eine kurze Beschreibung",
+        "app_short_description_error": "Kurze App-Beschreibung ist erforderlich",
+        "app_description_error": "App-Beschreibung ist erforderlich",
+        "app_slug_title": "App-Slug",
+        "app_slug_error": "App-Slug ist erforderlich",
+        "invalid_website_error": "Ungültige Website",
+        "webhook_url_title": "Webhook-URL",
+        "webhook_url_error": "Webhook-URL ist erforderlich",
+        "invalid_webhook_url_error": "Ungültige Webhook-URL",
+        "redirect_uris_title": "Weiterleitungs-URIs",
+        "redirect_uris_error": "Weiterleitungs-URIs sind erforderlich",
+        "invalid_redirect_uris_error": "Ungültige Weiterleitungs-URIs",
+        "redirect_uris_description": "Geben Sie durch Leerzeichen getrennte URIs ein, zu denen die App nach dem Benutzer weiterleitet, z.B. https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Autorisierte Javascript-Ursprünge",
+        "authorized_javascript_origins_error": "Autorisierte Javascript-Ursprünge sind erforderlich",
+        "invalid_authorized_javascript_origins_error": "Ungültige autorisierte Javascript-Ursprünge",
+        "authorized_javascript_origins_description": "Geben Sie durch Leerzeichen getrennte Ursprünge ein, von denen aus die App Anfragen stellen darf, z.B. app.com example.com",
+        "create_app": "App erstellen",
+        "update_app": "App aktualisieren",
+        "build_your_own_app": "Erstelle deine eigene App",
+        "edit_app_details": "App-Details bearbeiten",
+        "regenerate_client_secret_description": "Client-Secret neu generieren. Wenn Sie das Secret neu generieren, können Sie den Schlüssel kopieren oder direkt danach als CSV-Datei herunterladen.",
+        "regenerate_client_secret": "Client-Secret neu generieren",
+        "regenerate_client_secret_confirm_title": "Sind Sie sicher, dass Sie das Client-Secret neu generieren möchten?",
+        "regenerate_client_secret_confirm_description": "Apps, die dieses Secret verwenden, werden nicht mehr funktionieren. Sie müssen das Secret in der App aktualisieren.",
+        "regenerate_client_secret_confirm_cancel": "Abbrechen",
+        "regenerate_client_secret_confirm_regenerate": "Neu generieren",
+        "read_only_access_to_workspace": "Nur-Lese-Zugriff auf Ihren Workspace",
+        "write_access_to_workspace": "Schreibzugriff auf Ihren Workspace",
+        "read_only_access_to_user_profile": "Nur-Lese-Zugriff auf Ihr Benutzerprofil",
+        "write_access_to_user_profile": "Schreibzugriff auf Ihr Benutzerprofil",
+        "connect_app_to_workspace": "Verbinden Sie {app} mit Ihrem Workspace {workspace}",
+        "user_permissions": "Benutzerberechtigungen",
+        "user_permissions_description": "Benutzerberechtigungen werden verwendet, um Zugriff auf das Benutzerprofil zu gewähren.",
+        "workspace_permissions": "Workspace-Berechtigungen",
+        "workspace_permissions_description": "Workspace-Berechtigungen werden verwendet, um Zugriff auf den Workspace zu gewähren.",
+        "with_the_permissions": "mit den Berechtigungen",
+        "app_consent_title": "{app} fordert Zugriff auf Ihren Plane-Workspace und Ihr Profil an.",
+        "choose_workspace_to_connect_app_with": "Wählen Sie einen Workspace aus, mit dem die App verbunden werden soll",
+        "app_consent_workspace_permissions_title": "{app} möchte",
+        "app_consent_user_permissions_title": "{app} kann auch die Berechtigung eines Benutzers für die folgenden Ressourcen anfordern. Diese Berechtigungen werden nur von einem Benutzer angefordert und autorisiert.",
+        "app_consent_accept_title": "Durch die Annahme",
+        "app_consent_accept_1": "Gewähren Sie der App Zugriff auf Ihre Plane-Daten, wo immer Sie die App innerhalb oder außerhalb von Plane verwenden können",
+        "app_consent_accept_2": "Stimmen Sie der Datenschutzerklärung und den Nutzungsbedingungen von {app} zu",
+        "accepting": "Wird akzeptiert...",
+        "accept": "Akzeptieren",
+        "categories": "Kategorien",
+        "select_app_categories": "App-Kategorien auswählen",
+        "categories_title": "Kategorien",
+        "categories_error": "Kategorien sind erforderlich",
+        "invalid_categories_error": "Ungültige Kategorien",
+        "categories_description": "Wählen Sie die Kategorien, die am besten zu der App passen",
+        "supported_plans": "Unterstützte Pläne",
+        "supported_plans_description": "Wählen Sie die Workspace-Pläne aus, die diese Anwendung installieren können. Leer lassen, um alle Pläne zu erlauben.",
+        "select_plans": "Pläne Auswählen",
+        "privacy_policy_url_title": "Datenschutzerklärung URL",
+        "privacy_policy_url_error": "Datenschutzerklärung URL ist erforderlich",
+        "invalid_privacy_policy_url_error": "Ungültige Datenschutzerklärung URL",
+        "terms_of_service_url_title": "Nutzungsbedingungen URL",
+        "terms_of_service_url_error": "Nutzungsbedingungen URL ist erforderlich",
+        "invalid_terms_of_service_url_error": "Ungültige Nutzungsbedingungen URL",
+        "support_url_title": "Support-URL",
+        "support_url_error": "Support-URL ist erforderlich",
+        "invalid_support_url_error": "Ungültige Support-URL",
+        "video_url_title": "Video-URL",
+        "video_url_error": "Video-URL ist erforderlich",
+        "invalid_video_url_error": "Ungültige Video-URL",
+        "setup_url_error": "Setup-URL ist erforderlich",
+        "invalid_setup_url_error": "Ungültige Setup-URL",
+        "configuration_url_title": "Konfigurations-URL",
+        "configuration_url_error": "Konfigurations-URL ist erforderlich",
+        "invalid_configuration_url_error": "Ungültige Konfigurations-URL",
+        "contact_email_title": "Kontakt-Email",
+        "contact_email_error": "Kontakt-Email ist erforderlich",
+        "invalid_contact_email_error": "Ungültige Kontakt-Email",
+        "upload_attachments": "Dateien hochladen",
+        "uploading_images": "{count, plural, one {Ein Bild wird} other {{count} Bilder werden}} hochgeladen",
+        "drop_images_here": "Dateien hier ablegen",
+        "click_to_upload_images": "Dateien hochladen",
+        "invalid_file_or_exceeds_size_limit": "Ungültige Datei oder überschreitet die Größe ({size} MB)",
+        "uploading": "Hochladen...",
+        "upload_and_save": "Hochladen und speichern",
+        "app_consent_no_access_title": "Installationsanfrage",
+        "app_consent_no_access_description": "Diese App kann nur installiert werden, nachdem ein Workspace-Administrator sie installiert hat. Wenden Sie sich an Ihren Workspace-Administrator, um fortzufahren.",
+        "app_consent_unapproved_title": "Diese App wurde noch nicht von Plane überprüft oder genehmigt.",
+        "app_consent_unapproved_description": "Stellen Sie sicher, dass Sie dieser App vertrauen, bevor Sie sie mit Ihrem Arbeitsbereich verbinden.",
+        "go_to_app": "Zur App",
+        "enable_app_mentions": "App-Erwähnungen aktivieren",
+        "enable_app_mentions_tooltip": "Wenn dies aktiviert ist, können Benutzer Arbeitsaufgaben an diese Anwendung erwähnen oder zuweisen.",
+        "scopes": "Bereiche",
+        "select_scopes": "Bereiche auswählen",
+        "read_access_to": "Schreibgeschützter Zugriff auf",
+        "write_access_to": "Schreibzugriff auf",
+        "global_permission_expiration": "Globale Bereiche laufen bald ab. Verwenden Sie stattdessen granulare Bereiche. Verwenden Sie z. B. project:read anstelle eines globalen Lesezugriffs.",
+        "selected_scopes": "{count} ausgewählt",
+        "scopes_and_permissions": "Bereiche & Berechtigungen",
+        "read": "Lesen",
+        "write": "Schreiben",
+        "scope_description": {
+          "projects": "Zugriff auf Projekte und alle projektbezogenen Entitäten",
+          "wiki": "Zugriff auf Wiki und alle wiki-bezogenen Entitäten",
+          "workspaces": "Zugriff auf Workspaces und alle workspace-bezogenen Entitäten",
+          "stickies": "Zugriff auf Stickies und alle sticky-bezogenen Entitäten",
+          "profile": "Zugriff auf Benutzerprofilinformationen",
+          "agents": "Zugriff auf Agenten und alle agentenbezogenen Entitäten",
+          "assets": "Zugriff auf Assets und alle asset-bezogenen Entitäten"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Lassen Sie Ihre Arbeit intelligenter und schneller werden mit KI, die nativ mit Ihrer Arbeit und Wissensbasis verbunden ist."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Skripte",
+        "new_script": "Neues Skript",
+        "description": "Automatisieren Sie Ihre Workflows mit benutzerdefinierten Skripten und Automatisierungsregeln."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Keine API-Tokens",
+        "description": "Verwenden Sie die API, um Plane mit externen Systemen zu integrieren."
+      },
+      "webhooks": {
+        "title": "Keine Webhooks",
+        "description": "Erstellen Sie Webhooks, um Aktionen zu automatisieren."
+      },
+      "exports": {
+        "title": "Keine Exporte",
+        "description": "Hier finden Sie Ihre Exporthistorie."
+      },
+      "imports": {
+        "title": "Keine Importe",
+        "description": "Hier finden Sie Ihre Importhistorie."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/de/workspace.json b/packages/i18n/src/locales/de/workspace.json
new file mode 100644
index 0000000..46408ba
--- /dev/null
+++ b/packages/i18n/src/locales/de/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Erstellen Sie einen Arbeitsbereich",
+    "subheading": "Um Plane verwenden zu können, müssen Sie einen Arbeitsbereich erstellen oder beitreten.",
+    "form": {
+      "name": {
+        "label": "Geben Sie Ihrem Arbeitsbereich einen Namen",
+        "placeholder": "Etwas Bekanntes und Wiedererkennbares wäre sinnvoll."
+      },
+      "url": {
+        "label": "Legen Sie die URL Ihres Arbeitsbereichs fest",
+        "placeholder": "Geben Sie eine URL ein oder fügen Sie sie ein",
+        "edit_slug": "Sie können nur den Slug-Teil der URL bearbeiten"
+      },
+      "organization_size": {
+        "label": "Wie viele Personen werden diesen Bereich nutzen?",
+        "placeholder": "Wählen Sie einen Bereich"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Nur der Instanzadministrator kann Arbeitsbereiche erstellen",
+        "description": "Wenn Sie die E-Mail Ihres Instanzadministrators kennen, klicken Sie unten, um ihn zu kontaktieren.",
+        "request_button": "Instanzadministrator bitten"
+      },
+      "validation": {
+        "name_alphanumeric": "Arbeitsbereichsnamen dürfen nur (' '), ('-'), ('_') und alphanumerische Zeichen enthalten.",
+        "name_length": "Name ist auf 80 Zeichen begrenzt.",
+        "url_alphanumeric": "URLs dürfen nur ('-') und alphanumerische Zeichen enthalten.",
+        "url_length": "URL ist auf 48 Zeichen begrenzt.",
+        "url_already_taken": "Die Arbeitsbereichs-URL ist bereits vergeben!"
+      }
+    },
+    "request_email": {
+      "subject": "Anfrage für einen neuen Arbeitsbereich",
+      "body": "Hallo Admin,\n\nBitte erstellen Sie einen neuen Arbeitsbereich mit der URL [/workspace-name] für [Zweck].\n\nDanke,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Arbeitsbereich erstellen",
+      "loading": "Arbeitsbereich wird erstellt"
+    },
+    "toast": {
+      "success": {
+        "title": "Erfolg",
+        "message": "Arbeitsbereich erfolgreich erstellt"
+      },
+      "error": {
+        "title": "Fehler",
+        "message": "Arbeitsbereich konnte nicht erstellt werden. Bitte versuchen Sie es erneut."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Übersicht über Projekte, Aktivitäten und Kennzahlen",
+        "description": "Willkommen bei Plane, wir freuen uns, dass Sie hier sind. Erstellen Sie Ihr erstes Projekt, verfolgen Sie Arbeitselemente und diese Seite verwandelt sich in einen Ort für Ihren Fortschritt. Administratoren sehen hier zusätzlich teamrelevante Elemente.",
+        "primary_button": {
+          "text": "Erstes Projekt erstellen",
+          "comic": {
+            "title": "Alles beginnt mit einem Projekt in Plane",
+            "description": "Ein Projekt kann eine Produkt-Roadmap, eine Marketingkampagne oder die Markteinführung eines neuen Autos sein."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Analysen",
+    "page_label": "{workspace} - Analysen",
+    "open_tasks": "Insgesamt offene Aufgaben",
+    "error": "Fehler beim Laden der Daten.",
+    "work_items_closed_in": "Arbeitselemente, die abgeschlossen wurden in",
+    "selected_projects": "Ausgewählte Projekte",
+    "total_members": "Gesamtmitglieder",
+    "total_cycles": "Zyklen insgesamt",
+    "total_modules": "Module insgesamt",
+    "pending_work_items": {
+      "title": "Ausstehende Arbeitselemente",
+      "empty_state": "Hier wird eine Analyse der ausstehenden Elemente nach Mitarbeitern angezeigt."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Arbeitselemente, die in einem Jahr abgeschlossen wurden",
+      "empty_state": "Schließen Sie Elemente ab, um eine Analyse im Diagramm zu sehen."
+    },
+    "most_work_items_created": {
+      "title": "Die meisten erstellten Elemente",
+      "empty_state": "Zeigt die Mitarbeiter und die Anzahl der von ihnen erstellten Elemente."
+    },
+    "most_work_items_closed": {
+      "title": "Die meisten abgeschlossenen Elemente",
+      "empty_state": "Zeigt die Mitarbeiter und die Anzahl der von ihnen abgeschlossenen Elemente."
+    },
+    "tabs": {
+      "scope_and_demand": "Umfang und Nachfrage",
+      "custom": "Benutzerdefinierte Analysen"
+    },
+    "total": "Gesamte {entity}",
+    "started_work_items": "Begonnene {entity}",
+    "backlog_work_items": "Backlog-{entity}",
+    "un_started_work_items": "Nicht begonnene {entity}",
+    "completed_work_items": "Abgeschlossene {entity}",
+    "project_insights": "Projekteinblicke",
+    "summary_of_projects": "Projektübersicht",
+    "all_projects": "Alle Projekte",
+    "trend_on_charts": "Trend in Diagrammen",
+    "active_projects": "Aktive Projekte",
+    "customized_insights": "Individuelle Einblicke",
+    "created_vs_resolved": "Erstellt vs Gelöst",
+    "empty_state": {
+      "project_insights": {
+        "title": "Noch keine Daten",
+        "description": "Ihnen zugewiesene Arbeitselemente, aufgeschlüsselt nach Status, werden hier angezeigt."
+      },
+      "created_vs_resolved": {
+        "title": "Noch keine Daten",
+        "description": "Im Laufe der Zeit erstellte und gelöste Arbeitselemente werden hier angezeigt."
+      },
+      "customized_insights": {
+        "title": "Noch keine Daten",
+        "description": "Ihnen zugewiesene Arbeitselemente, aufgeschlüsselt nach Status, werden hier angezeigt."
+      },
+      "general": {
+        "title": "Verfolgen Sie Fortschritt, Arbeitsbelastung und Zuweisungen. Erkennen Sie Trends, beseitigen Sie Hindernisse und arbeiten Sie schneller",
+        "description": "Sehen Sie Umfang vs. Nachfrage, Schätzungen und Scope Creep. Messen Sie die Leistung von Teammitgliedern und Teams und stellen Sie sicher, dass Ihr Projekt rechtzeitig abgeschlossen wird.",
+        "primary_button": {
+          "text": "Erstes Projekt starten",
+          "comic": {
+            "title": "Analytics funktioniert am besten mit Zyklen + Modulen",
+            "description": "Begrenzen Sie zunächst Ihre Arbeitselemente zeitlich in Zyklen und gruppieren Sie, wenn möglich, Arbeitselemente, die mehr als einen Zyklus umfassen, in Module. Schauen Sie sich beide in der linken Navigation an."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Noch keine Daten",
+        "description": "Analyse des Zyklusfortschritts wird hier angezeigt. Fügen Sie Arbeitsaufgaben zu Zyklen hinzu, um den Fortschritt zu verfolgen."
+      },
+      "module_progress": {
+        "title": "Noch keine Daten",
+        "description": "Analyse des Modulfortschritts wird hier angezeigt. Fügen Sie Arbeitsaufgaben zu Modulen hinzu, um den Fortschritt zu verfolgen."
+      },
+      "intake_trends": {
+        "title": "Noch keine Daten",
+        "description": "Analyse der Intake-Trends wird hier angezeigt. Fügen Sie Arbeitsaufgaben zum Intake hinzu, um Trends zu verfolgen."
+      }
+    },
+    "upgrade_to_plan": "Upgrade auf {plan}, um {tab} freizuschalten",
+    "workitem_resolved_vs_pending": "Gelöste vs. ausstehende Arbeitsaufgaben",
+    "projects_by_status": "Projekte nach Status",
+    "active_users": "Aktive Nutzer",
+    "intake_trends": "Aufnahmetrends"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Projekt} few {Projekte} other {Projekte}}",
+    "create": {
+      "label": "Projekt hinzufügen"
+    },
+    "network": {
+      "label": "Netzwerk",
+      "private": {
+        "title": "Privat",
+        "description": "Nur auf Einladung zugänglich"
+      },
+      "public": {
+        "title": "Öffentlich",
+        "description": "Jeder im Arbeitsbereich außer Gästen kann beitreten"
+      }
+    },
+    "error": {
+      "permission": "Sie haben keine Berechtigung für diese Aktion.",
+      "cycle_delete": "Löschen des Zyklus fehlgeschlagen",
+      "module_delete": "Löschen des Moduls fehlgeschlagen",
+      "issue_delete": "Löschen des Arbeitselements fehlgeschlagen"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Nicht begonnen",
+      "started": "Gestartet",
+      "completed": "Abgeschlossen",
+      "cancelled": "Abgebrochen"
+    },
+    "sort": {
+      "manual": "Manuell",
+      "name": "Name",
+      "created_at": "Erstellungsdatum",
+      "members_length": "Mitgliederanzahl"
+    },
+    "scope": {
+      "my_projects": "Meine Projekte",
+      "archived_projects": "Archiviert"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# Monat} few{# Monate} other{# Monate}}",
+      "days_count": "{days, plural, one{# Tag} few{# Tage} other{# Tagen}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Keine aktiven Projekte",
+        "description": "Ein Projekt ist einem übergeordneten Ziel zugeordnet. Projekte enthalten Aufgaben, Zyklen und Module. Erstellen Sie ein neues oder filtern Sie archivierte.",
+        "primary_button": {
+          "text": "Erstes Projekt erstellen",
+          "comic": {
+            "title": "Alles beginnt mit einem Projekt in Plane",
+            "description": "Ein Projekt kann eine Produkt-Roadmap, eine Marketingkampagne oder die Markteinführung eines neuen Autos sein."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Keine Projekte",
+        "description": "Um Arbeitselemente zu erstellen, müssen Sie ein Projekt erstellen oder Teil eines Projekts sein.",
+        "primary_button": {
+          "text": "Erstes Projekt erstellen",
+          "comic": {
+            "title": "Alles beginnt mit einem Projekt in Plane",
+            "description": "Ein Projekt kann eine Produkt-Roadmap, eine Marketingkampagne oder die Markteinführung eines neuen Autos sein."
+          }
+        }
+      },
+      "filter": {
+        "title": "Keine passenden Projekte",
+        "description": "Keine Projekte entsprechen Ihren Kriterien.\nErstellen Sie ein neues."
+      },
+      "search": {
+        "description": "Keine Projekte entsprechen Ihren Suchkriterien.\nErstellen Sie ein neues."
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Ansicht hinzufügen",
+    "empty_state": {
+      "all-issues": {
+        "title": "Keine Arbeitselemente im Projekt",
+        "description": "Erstellen Sie Ihr erstes Element und verfolgen Sie Ihren Fortschritt!",
+        "primary_button": {
+          "text": "Arbeitselement erstellen"
+        }
+      },
+      "assigned": {
+        "title": "Keine zugewiesenen Elemente",
+        "description": "Hier werden Ihnen zugewiesene Elemente angezeigt.",
+        "primary_button": {
+          "text": "Arbeitselement erstellen"
+        }
+      },
+      "created": {
+        "title": "Keine erstellten Elemente",
+        "description": "Hier werden von Ihnen erstellte Elemente angezeigt.",
+        "primary_button": {
+          "text": "Arbeitselement erstellen"
+        }
+      },
+      "subscribed": {
+        "title": "Keine abonnierten Elemente",
+        "description": "Abonnieren Sie Elemente, die Sie interessieren."
+      },
+      "custom-view": {
+        "title": "Keine passenden Elemente",
+        "description": "Hier werden Elemente angezeigt, die den Filterkriterien entsprechen."
+      }
+    },
+    "delete_view": {
+      "title": "Sind Sie sicher, dass Sie diese Ansicht löschen möchten?",
+      "content": "Wenn Sie bestätigen, werden alle Sortier-, Filter- und Anzeigeoptionen + das Layout, das Sie für diese Ansicht gewählt haben, dauerhaft gelöscht und können nicht wiederhergestellt werden."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Einen Entwurf für ein Element erstellen",
+    "empty_state": {
+      "title": "Entwürfe für Elemente und Kommentare werden hier angezeigt.",
+      "description": "Beginnen Sie mit dem Erstellen eines Arbeitselements und lassen Sie es als Entwurf.",
+      "primary_button": {
+        "text": "Ersten Entwurf erstellen"
+      }
+    },
+    "delete_modal": {
+      "title": "Entwurf löschen",
+      "description": "Möchten Sie diesen Entwurf wirklich löschen? Diese Aktion ist nicht umkehrbar."
+    },
+    "toasts": {
+      "created": {
+        "success": "Entwurf erstellt",
+        "error": "Erstellung fehlgeschlagen"
+      },
+      "deleted": {
+        "success": "Entwurf gelöscht"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Schreiben Sie eine Notiz, ein Dokument oder eine vollständige Wissensdatenbank. Holen Sie sich Galileo, Planes KI-Assistent, um Ihnen den Einstieg zu erleichtern",
+        "description": "Seiten sind Gedankenspeicher in Plane. Notieren Sie Meeting-Notizen, formatieren Sie sie einfach, betten Sie Arbeitsaufgaben ein, gestalten Sie sie mit einer Bibliothek von Komponenten und behalten Sie sie alle im Kontext Ihres Projekts. Um die Arbeit an einem Dokument zu verkürzen, rufen Sie Galileo, Planes KI, mit einer Tastenkombination oder einem Knopfdruck auf.",
+        "primary_button": {
+          "text": "Erstellen Sie Ihre erste Seite"
+        }
+      },
+      "private": {
+        "title": "Noch keine privaten Seiten",
+        "description": "Bewahren Sie hier Ihre privaten Gedanken auf. Wenn Sie bereit sind zu teilen, ist das Team nur einen Klick entfernt.",
+        "primary_button": {
+          "text": "Erstellen Sie Ihre erste Seite"
+        }
+      },
+      "public": {
+        "title": "Noch keine Arbeitsbereich-Seiten",
+        "description": "Sehen Sie hier Seiten, die mit allen in Ihrem Arbeitsbereich geteilt werden.",
+        "primary_button": {
+          "text": "Erstellen Sie Ihre erste Seite"
+        }
+      },
+      "archived": {
+        "title": "Noch keine archivierten Seiten",
+        "description": "Archivieren Sie Seiten, die nicht auf Ihrem Radar sind. Greifen Sie bei Bedarf hier darauf zu."
+      },
+      "shared": {
+        "title": "Noch keine geteilten Seiten",
+        "description": "Seiten, die andere mit Ihnen geteilt haben, werden hier angezeigt."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Keine aktiven Zyklen",
+        "description": "Zyklen Ihrer Projekte, die einen Zeitraum einschließen, der das heutige Datum umfasst. Finden Sie hier den Fortschritt und Details zu all Ihren aktiven Zyklen."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Mitglieder aus CSV importieren",
+      "description": "Laden Sie eine CSV mit Spalten hoch: Email, Display Name, First Name, Last Name, Role (5, 15 oder 20)",
+      "dropzone": {
+        "active": "CSV-Datei hier ablegen",
+        "inactive": "Ziehen Sie eine Datei hierher oder klicken Sie zum Hochladen",
+        "file_type": "Nur .csv-Dateien werden unterstützt"
+      },
+      "buttons": {
+        "cancel": "Abbrechen",
+        "import": "Importieren",
+        "try_again": "Erneut versuchen",
+        "close": "Schließen",
+        "done": "Fertig"
+      },
+      "progress": {
+        "uploading": "Hochladen...",
+        "importing": "Importieren..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Import fehlgeschlagen",
+          "complete": "Import abgeschlossen"
+        },
+        "message": {
+          "seat_limit": "Mitglieder können aufgrund von Platzbeschränkungen nicht importiert werden.",
+          "success": "{count} Mitglied{plural} erfolgreich zum Arbeitsbereich hinzugefügt.",
+          "no_imports": "Es wurden keine Mitglieder aus der CSV-Datei importiert."
+        },
+        "stats": {
+          "successful": "Erfolgreich",
+          "failed": "Fehlgeschlagen"
+        },
+        "download_errors": "Fehler herunterladen"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Ungültige Datei",
+          "message": "Nur CSV-Dateien werden unterstützt."
+        },
+        "import_failed": {
+          "title": "Import fehlgeschlagen",
+          "message": "Etwas ist schief gelaufen."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/accessibility.json b/packages/i18n/src/locales/en/accessibility.json
new file mode 100644
index 0000000..86660d6
--- /dev/null
+++ b/packages/i18n/src/locales/en/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Workspace logo",
+      "open_workspace_switcher": "Open workspace switcher",
+      "open_user_menu": "Open user menu",
+      "open_command_palette": "Open command palette",
+      "open_extended_sidebar": "Open extended sidebar",
+      "close_extended_sidebar": "Close extended sidebar",
+      "create_favorites_folder": "Create favorites folder",
+      "open_folder": "Open folder",
+      "close_folder": "Close folder",
+      "open_favorites_menu": "Open favorites menu",
+      "close_favorites_menu": "Close favorites menu",
+      "enter_folder_name": "Enter folder name",
+      "create_new_project": "Create new project",
+      "open_projects_menu": "Open projects menu",
+      "close_projects_menu": "Close projects menu",
+      "toggle_quick_actions_menu": "Toggle quick actions menu",
+      "open_project_menu": "Open project menu",
+      "close_project_menu": "Close project menu",
+      "collapse_sidebar": "Collapse sidebar",
+      "expand_sidebar": "Expand sidebar",
+      "edition_badge": "Open paid plans' modal"
+    },
+    "auth_forms": {
+      "clear_email": "Clear email",
+      "show_password": "Show password",
+      "hide_password": "Hide password",
+      "close_alert": "Close alert",
+      "close_popover": "Close popover"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/auth.json b/packages/i18n/src/locales/en/auth.json
new file mode 100644
index 0000000..fdc4cf7
--- /dev/null
+++ b/packages/i18n/src/locales/en/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identity",
+    "description": "Configure your domain to access security features including single sign-on.",
+    "domain_management": {
+      "header": "Domain management",
+      "verified_domains": {
+        "header": "Verified domains",
+        "description": "Verify the ownership of an email domain to enable single-sign on.",
+        "button_text": "Add domain",
+        "list": {
+          "domain_name": "Domain name",
+          "status": "Status",
+          "status_verified": "Verified",
+          "status_failed": "Failed",
+          "status_pending": "Pending"
+        },
+        "add_domain": {
+          "title": "Add domain",
+          "description": "Add your domain to configure SSO and verify it.",
+          "form": {
+            "domain_label": "Domain",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Domain is required",
+            "domain_invalid": "Enter a valid domain name (e.g., plane.so)"
+          },
+          "primary_button_text": "Add domain",
+          "primary_button_loading_text": "Adding",
+          "toast": {
+            "success_title": "Success!",
+            "success_message": "Domain added successfully. Please verify it by adding the DNS TXT record.",
+            "error_message": "Failed to add domain. Please try again."
+          }
+        },
+        "verify_domain": {
+          "title": "Verify your domain",
+          "description": "Follow these steps to verify your domain.",
+          "instructions": {
+            "label": "Instructions",
+            "step_1": "Go to the DNS settings for your domain host.",
+            "step_2": {
+              "part_1": "Create a",
+              "part_2": "TXT record",
+              "part_3": "and paste the complete record value provided below."
+            },
+            "step_3": "This update usually takes a few minutes but may take up to 72 hours to complete.",
+            "step_4": "Click \"Verify domain\" to confirm once your DNS record is updated."
+          },
+          "verification_code_label": "TXT record value",
+          "verification_code_description": "Add this record to your DNS settings",
+          "domain_label": "Domain",
+          "primary_button_text": "Verify domain",
+          "primary_button_loading_text": "Verifying",
+          "secondary_button_text": "I'll do it later",
+          "toast": {
+            "success_title": "Success!",
+            "success_message": "Domain verified successfully.",
+            "error_message": "Failed to verify domain. Please try again."
+          }
+        },
+        "delete_domain": {
+          "title": "Delete domain",
+          "description": {
+            "prefix": "Are you sure you want to delete",
+            "suffix": "? This action cannot be undone."
+          },
+          "primary_button_text": "Delete",
+          "primary_button_loading_text": "Deleting",
+          "secondary_button_text": "Cancel",
+          "toast": {
+            "success_title": "Success!",
+            "success_message": "Domain deleted successfully.",
+            "error_message": "Failed to delete domain. Please try again."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Single sign-on",
+      "disabled_message": "Add a verified domain to configure SSO",
+      "configure": {
+        "create": "Configure",
+        "update": "Edit"
+      },
+      "switch_alert_modal": {
+        "title": "Switch SSO Method to {newProviderShortName}?",
+        "content": "You are about to enable {newProviderLongName} ({newProviderShortName}). This action will automatically disable {activeProviderLongName} ({activeProviderShortName}). Users attempting to sign in via {activeProviderShortName} will no longer be able to access the platform until they switch to the new method. Are you sure you want to proceed?",
+        "primary_button_text": "Switch",
+        "primary_button_text_loading": "Switching",
+        "secondary_button_text": "Cancel"
+      },
+      "form_section": {
+        "title": "IdP-provided details for {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Saving",
+        "save_changes": "Save changes",
+        "configure_only": "Configure only",
+        "configure_and_enable": "Configure and enable",
+        "default": "Save"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} provided details for you IdP",
+        "button_text": "Get setup details"
+      },
+      "saml": {
+        "header": "Enable SAML",
+        "description": "Configure your SAML identity provider to enable single sign-on.",
+        "configure": {
+          "title": "Enable SAML",
+          "description": "Verify the ownership of an email domain to access security features including single-sign on.",
+          "toast": {
+            "success_title": "Success!",
+            "create_success_message": "SAML provider created successfully.",
+            "update_success_message": "SAML provider updated successfully.",
+            "error_title": "Error!",
+            "error_message": "Failed to save SAML provider. Please try again."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web details",
+            "entity_id": {
+              "label": "Entity ID | Audience | Metadata information",
+              "description": "We will generate this bit of the metadata that identifies this Plane app as an authorized service on your IdP."
+            },
+            "callback_url": {
+              "label": "SSO URL",
+              "description": "We will generate this for you. Add this in the Sign-in redirect URL field of your IdP."
+            },
+            "logout_url": {
+              "label": "SLO URL",
+              "description": "We will generate this for you. Add this in the Single Logout redirect URL field of your IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobile details",
+            "entity_id": {
+              "label": "Entity ID | Audience | Metadata information",
+              "description": "We will generate this bit of the metadata that identifies this Plane app as an authorized service on your IdP."
+            },
+            "callback_url": {
+              "label": "SSO URL",
+              "description": "We will generate this for you. Add this in the Sign-in redirect URL field of your IdP."
+            },
+            "logout_url": {
+              "label": "SLO URL",
+              "description": "We will generate this for you. Add this in the Logout redirect URL field of your IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Mapping details",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Enable OIDC",
+        "description": "Configure your OIDC identity provider to enable single sign-on.",
+        "configure": {
+          "title": "Enable OIDC",
+          "description": "Verify the ownership of an email domain to access security features including single-sign on.",
+          "toast": {
+            "success_title": "Success!",
+            "create_success_message": "OIDC provider created successfully.",
+            "update_success_message": "OIDC provider updated successfully.",
+            "error_title": "Error!",
+            "error_message": "Failed to save OIDC provider. Please try again."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web details",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "We will generate this for this Plane app. Add this as a trusted origin on your IdP's corresponding field."
+            },
+            "callback_url": {
+              "label": "Redirect URL",
+              "description": "We will generate this for you. Add this in the Sign-in redirect URL field of your IdP."
+            },
+            "logout_url": {
+              "label": "Logout URL",
+              "description": "We will generate this for you. Add this in the Logout redirect URL field of your IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobile details",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "We will generate this for this Plane app. Add this as a trusted origin on your IdP's corresponding field."
+            },
+            "callback_url": {
+              "label": "Redirect URL",
+              "description": "We will generate this for you. Add this in the Sign-in redirect URL field of your IdP."
+            },
+            "logout_url": {
+              "label": "Logout URL",
+              "description": "We will generate this for you. Add this in the Logout redirect URL field of your IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "Email",
+        "placeholder": "name@company.com",
+        "errors": {
+          "required": "Email is required",
+          "invalid": "Email is invalid"
+        }
+      },
+      "password": {
+        "label": "Password",
+        "set_password": "Set a password",
+        "placeholder": "Enter password",
+        "confirm_password": {
+          "label": "Confirm password",
+          "placeholder": "Confirm password"
+        },
+        "current_password": {
+          "label": "Current password"
+        },
+        "new_password": {
+          "label": "New password",
+          "placeholder": "Enter new password"
+        },
+        "change_password": {
+          "label": {
+            "default": "Change password",
+            "submitting": "Changing password"
+          }
+        },
+        "errors": {
+          "match": "Passwords don't match",
+          "empty": "Please enter your password",
+          "length": "Password length should me more than 8 characters",
+          "strength": {
+            "weak": "Password is weak",
+            "strong": "Password is strong"
+          }
+        },
+        "submit": "Set password",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Success!",
+              "message": "Password changed successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Something went wrong. Please try again."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Unique code",
+        "placeholder": "123456",
+        "paste_code": "Paste the code sent to your email",
+        "requesting_new_code": "Requesting new code",
+        "sending_code": "Sending code"
+      },
+      "already_have_an_account": "Already have an account?",
+      "login": "Log in",
+      "create_account": "Create an account",
+      "new_to_plane": "New to Plane?",
+      "back_to_sign_in": "Back to sign in",
+      "resend_in": "Resend in {seconds} seconds",
+      "sign_in_with_unique_code": "Sign in with unique code",
+      "forgot_password": "Forgot your password?",
+      "username": {
+        "label": "Username",
+        "placeholder": "Enter your username"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Create an account to start managing work with your team.",
+        "step": {
+          "email": {
+            "header": "Sign up",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Sign up",
+            "sub_header": "Sign up using an email-password combination."
+          },
+          "unique_code": {
+            "header": "Sign up",
+            "sub_header": "Sign up using a unique code sent to the email address above."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Try setting-up a strong password to proceed"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Log in to start managing work with your team.",
+        "step": {
+          "email": {
+            "header": "Log in or sign up",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Log in or sign up",
+            "sub_header": "Use your email-password combination to log in."
+          },
+          "unique_code": {
+            "header": "Log in or sign up",
+            "sub_header": "Log in using a unique code sent to the email address above."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Reset your password",
+      "description": "Enter your user account's verified email address and we will send you a password reset link.",
+      "email_sent": "We sent the reset link to your email address",
+      "send_reset_link": "Send reset link",
+      "errors": {
+        "smtp_not_enabled": "We see that your god hasn't enabled SMTP, we will not be able to send a password reset link"
+      },
+      "toast": {
+        "success": {
+          "title": "Email sent",
+          "message": "Check your inbox for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Something went wrong. Please try again."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Set new password",
+      "description": "Secure your account with a strong password"
+    },
+    "set_password": {
+      "title": "Secure your account",
+      "description": "Setting password helps you login securely"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Error!",
+          "message": "Failed to sign out. Please try again."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Continue with {ldapProviderName}",
+        "sub_header": "Enter your {ldapProviderName} credentials"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/automation.json b/packages/i18n/src/locales/en/automation.json
new file mode 100644
index 0000000..64779c7
--- /dev/null
+++ b/packages/i18n/src/locales/en/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Custom automations",
+      "create_automation": "Create automation"
+    },
+    "scope": {
+      "label": "Scope",
+      "run_on": "Run on"
+    },
+    "trigger": {
+      "label": "Trigger",
+      "add_trigger": "Add trigger",
+      "sidebar_header": "Trigger configuration",
+      "input_label": "What’s the trigger for this automation?",
+      "input_placeholder": "Select an option",
+      "section_plane_events": "Plane events",
+      "section_time_based": "Time based",
+      "fixed_schedule": "Fixed schedule",
+      "schedule": {
+        "frequency": "Frequency",
+        "select_day": "Select day",
+        "day_of_month": "Day of month",
+        "monthly_every": "Every",
+        "monthly_day_aria": "Day {day}",
+        "time": "Time",
+        "hour": "Hour",
+        "minute": "Minute",
+        "hour_suffix": "hr",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Timezone",
+        "timezone_placeholder": "Select a timezone",
+        "frequency_daily": "Daily",
+        "frequency_weekly": "Weekly",
+        "frequency_monthly": "Monthly",
+        "on": "On",
+        "validation_weekly_day_required": "Select at least one day of the week.",
+        "validation_monthly_date_required": "Select a day of the month.",
+        "main_content_schedule_summary_daily": "Every day at {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Every week on {days} at {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Every month on day {day} at {time} ({timezone}).",
+        "schedule_mode": "Schedule mode",
+        "schedule_mode_fixed": "Fixed",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Enter Cron expression",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Invalid cron expression.",
+        "cron_preview": "This Cron expression runs \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Back",
+        "next": "Add action"
+      },
+      "warning": {
+        "disabled_trigger_switching": "You can't change the trigger type once created"
+      }
+    },
+    "condition": {
+      "label": "Provided",
+      "add_condition": "Add condition",
+      "adding_condition": "Adding condition"
+    },
+    "action": {
+      "label": "Action",
+      "add_action": "Add action",
+      "sidebar_header": "Actions",
+      "input_label": "What does the automation do?",
+      "input_placeholder": "Select an option",
+      "handler_name": {
+        "add_comment": "Add comment",
+        "change_property": "Change property",
+        "run_script": "Run Script"
+      },
+      "configuration": {
+        "label": "Configuration",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Select a property",
+            "change_type": "Select",
+            "property_value_select": "{count, plural, one{Select value} other{Select values}}",
+            "property_value_select_date": "Select date"
+          },
+          "validation": {
+            "property_name_required": "Property name is required",
+            "change_type_required": "Change type is required",
+            "property_value_required": "Property value is required"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Add comment"
+      },
+      "run_script_block": {
+        "title": "Run script"
+      },
+      "change_property_block": {
+        "title": "Change property"
+      },
+      "validation": {
+        "delete_only_action": "Disable the automation before deleting its only action."
+      }
+    },
+    "conjunctions": {
+      "and": "And",
+      "or": "Or",
+      "if": "If",
+      "then": "Then"
+    },
+    "enable": {
+      "alert": "Hit 'Enable' whenever your automation is complete. Once enabled, the automation will be ready to run.",
+      "validation": {
+        "required": "Automation must have a trigger and at least one action to be enabled."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Automation must be disabled before deleting it."
+      }
+    },
+    "table": {
+      "title": "Automation title",
+      "scope": "Scope",
+      "projects": "Projects",
+      "last_run_on": "Last run on",
+      "created_on": "Created on",
+      "last_updated_on": "Last updated on",
+      "last_run_status": "Last run status",
+      "average_duration": "Average duration",
+      "owner": "Owner",
+      "executions": "Executions"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Create automation",
+        "update": "Update automation"
+      },
+      "title": {
+        "placeholder": "Name your automation.",
+        "required_error": "Title is required"
+      },
+      "description": {
+        "placeholder": "Describe your automation."
+      },
+      "submit_button": {
+        "create": "Create automation",
+        "update": "Update automation"
+      }
+    },
+    "delete_modal": {
+      "heading": "Delete automation"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Show fails",
+        "all": "All",
+        "only_activity": "Only activity",
+        "only_run_history": "Only run history"
+      },
+      "run_history": {
+        "initiator": "Initiator"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Success!",
+          "message": "Automation created successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Automation creation failed."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Success!",
+          "message": "Automation updated successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Automation update failed."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Success!",
+          "message": "Automation enabled successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Automation enable failed."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Success!",
+          "message": "Automation disabled successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Automation disable failed."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automation deleted",
+          "message": "{name}, the automation, has now been deleted from your project."
+        },
+        "error": {
+          "title": "We couldn't delete that automation this time.",
+          "message": "Try deleting it again or come back to it later. If you can't delete it then, reach out to us."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Error!",
+            "message": "Failed to create action. Please try again!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Error!",
+            "message": "Failed to update action. Please try again!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "There’re no automations to show yet.",
+        "description": "Automations help you eliminate repetitive tasks by setting triggers, conditions, and actions. Create one to save time and keep work moving effortlessly."
+      },
+      "upgrade": {
+        "title": "Automations",
+        "description": "Automations are a way to automate tasks in your project.",
+        "sub_description": "Get 80% of your admin time back when you use Automations."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Select projects to run this automation on",
+        "all_projects": {
+          "label": "All projects",
+          "description": "Automation will run for all projects in the workspace."
+        },
+        "select_projects": {
+          "label": "Select projects",
+          "description": "Automation will run for selected projects in the workspace.",
+          "placeholder": "Select projects"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automations",
+        "title": "Automations",
+        "description": "Standardize processes across your workspace with global automations."
+      },
+      "table": {
+        "scope": {
+          "global": "Global",
+          "project": {
+            "label": "Project",
+            "multiple": "Multiple",
+            "all": "All"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/common.json b/packages/i18n/src/locales/en/common.json
new file mode 100644
index 0000000..a138304
--- /dev/null
+++ b/packages/i18n/src/locales/en/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "We're working on this. If you need immediate assistance,",
+    "reach_out_to_us": "reach out to us",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Otherwise, try refreshing the page occasionally or visit our",
+    "status_page": "Status page"
+  },
+  "submit": "Submit",
+  "cancel": "Cancel",
+  "loading": "Loading",
+  "error": "Error",
+  "success": "Success",
+  "warning": "Warning",
+  "info": "Info",
+  "close": "Close",
+  "yes": "Yes",
+  "no": "No",
+  "ok": "OK",
+  "name": "Name",
+  "unknown_user": "Unknown user",
+  "description": "Description",
+  "search": "Search",
+  "add_member": "Add member",
+  "adding_members": "Adding members",
+  "remove_member": "Remove member",
+  "add_members": "Add members",
+  "adding_member": "Adding members",
+  "remove_members": "Remove members",
+  "add": "Add",
+  "adding": "Adding",
+  "remove": "Remove",
+  "add_new": "Add new",
+  "remove_selected": "Remove selected",
+  "first_name": "First name",
+  "last_name": "Last name",
+  "email": "Email",
+  "display_name": "Display name",
+  "role": "Role",
+  "timezone": "Timezone",
+  "avatar": "Avatar",
+  "cover_image": "Cover image",
+  "password": "Password",
+  "change_cover": "Change cover",
+  "language": "Language",
+  "saving": "Saving",
+  "save_changes": "Save changes",
+  "deactivate_account": "Deactivate account",
+  "deactivate_account_description": "When deactivating an account, all of the data and resources within that account will be permanently removed and cannot be recovered.",
+  "profile_settings": "Profile settings",
+  "your_account": "Your account",
+  "security": "Security",
+  "activity": "Activity",
+  "activity_empty_state": {
+    "no_activity": "No activity yet",
+    "no_transitions": "No transitions yet",
+    "no_comments": "No comments yet",
+    "no_worklogs": "No worklogs yet",
+    "no_history": "No history yet"
+  },
+  "preferences": "Preferences",
+  "language_and_time": "Language & Time",
+  "notifications": "Notifications",
+  "workspaces": "Workspaces",
+  "create_workspace": "Create workspace",
+  "invitations": "Invitations",
+  "summary": "Summary",
+  "assigned": "Assigned",
+  "created": "Created",
+  "subscribed": "Subscribed",
+  "you_do_not_have_the_permission_to_access_this_page": "You do not have the permission to access this page.",
+  "something_went_wrong_please_try_again": "Something went wrong. Please try again.",
+  "load_more": "Load more",
+  "select_or_customize_your_interface_color_scheme": "Select or customize your interface color scheme.",
+  "timezone_setting": "Current timezone setting.",
+  "language_setting": "Choose the language used in the user interface.",
+  "settings_moved_to_preferences": "Timezone & Language settings have been moved to preferences.",
+  "go_to_preferences": "Go to preferences",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Select the cursor motion style that feels right for you.",
+  "theme": "Theme",
+  "smooth_cursor": "Smooth Cursor",
+  "system_preference": "System Preference",
+  "light": "Light",
+  "dark": "Dark",
+  "light_contrast": "Light high contrast",
+  "dark_contrast": "Dark high contrast",
+  "custom": "Custom theme",
+  "select_your_theme": "Select your theme",
+  "customize_your_theme": "Customize your theme",
+  "background_color": "Background color",
+  "text_color": "Text color",
+  "primary_color": "Primary(Theme) color",
+  "sidebar_background_color": "Sidebar background color",
+  "sidebar_text_color": "Sidebar text color",
+  "set_theme": "Set theme",
+  "enter_a_valid_hex_code_of_6_characters": "Enter a valid hex code of 6 characters",
+  "background_color_is_required": "Background color is required",
+  "text_color_is_required": "Text color is required",
+  "primary_color_is_required": "Primary color is required",
+  "sidebar_background_color_is_required": "Sidebar background color is required",
+  "sidebar_text_color_is_required": "Sidebar text color is required",
+  "updating_theme": "Updating theme",
+  "theme_updated_successfully": "Theme updated successfully",
+  "failed_to_update_the_theme": "Failed to update the theme",
+  "email_notifications": "Email notifications",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Stay in the loop on Work items you are subscribed to. Enable this to get notified.",
+  "email_notification_setting_updated_successfully": "Email notification setting updated successfully",
+  "failed_to_update_email_notification_setting": "Failed to update email notification setting",
+  "notify_me_when": "Notify me when",
+  "property_changes": "Property changes",
+  "property_changes_description": "Notify me when work items' properties like assignees, priority, estimates or anything else changes.",
+  "state_change": "State change",
+  "state_change_description": "Notify me when the work items moves to a different state",
+  "issue_completed": "Work item completed",
+  "issue_completed_description": "Notify me only when a work item is completed",
+  "comments": "Comments",
+  "comments_description": "Notify me when someone leaves a comment on the work item",
+  "mentions": "Mentions",
+  "mentions_description": "Notify me only when someone mentions me in the comments or description",
+  "old_password": "Old password",
+  "general_settings": "General settings",
+  "sign_out": "Sign out",
+  "signing_out": "Signing out",
+  "active_cycles": "Active cycles",
+  "active_cycles_description": "Monitor cycles across projects, track high-priority work items, and zoom in cycles that need attention.",
+  "on_demand_snapshots_of_all_your_cycles": "On-demand snapshots of all your cycles",
+  "upgrade": "Upgrade",
+  "10000_feet_view": "10,000-feet view of all active cycles.",
+  "10000_feet_view_description": "Zoom out to see running cycles across all your projects at once instead of going from Cycle to Cycle in each project.",
+  "get_snapshot_of_each_active_cycle": "Get a snapshot of each active cycle.",
+  "get_snapshot_of_each_active_cycle_description": "Track high-level metrics for all active cycles, see their state of progress, and get a sense of scope against deadlines.",
+  "compare_burndowns": "Compare burndowns.",
+  "compare_burndowns_description": "Monitor how each of your teams are performing with a peek into each cycle's burndown report.",
+  "quickly_see_make_or_break_issues": "Quickly see make-or-break work items.",
+  "quickly_see_make_or_break_issues_description": "Preview high-priority work items for each cycle against due dates. See all of them per cycle in one click.",
+  "zoom_into_cycles_that_need_attention": "Zoom into cycles that need attention.",
+  "zoom_into_cycles_that_need_attention_description": "Investigate the state of any cycle that doesn't conform to expectations in one click.",
+  "stay_ahead_of_blockers": "Stay ahead of blockers.",
+  "stay_ahead_of_blockers_description": "Spot challenges from one project to another and see inter-cycle dependencies that aren't obvious from any other view.",
+  "analytics": "Analytics",
+  "workspace_invites": "Workspace invites",
+  "enter_god_mode": "Enter god mode",
+  "workspace_logo": "Workspace logo",
+  "new_issue": "New work item",
+  "your_work": "Your work",
+  "drafts": "Drafts",
+  "projects": "Projects",
+  "views": "Views",
+  "archives": "Archives",
+  "settings": "Settings",
+  "failed_to_move_favorite": "Failed to move favorite",
+  "favorites": "Favorites",
+  "no_favorites_yet": "No favorites yet",
+  "create_folder": "Create folder",
+  "new_folder": "New folder",
+  "favorite_updated_successfully": "Favorite updated successfully",
+  "favorite_created_successfully": "Favorite created successfully",
+  "folder_already_exists": "Folder already exists",
+  "folder_name_cannot_be_empty": "Folder name cannot be empty",
+  "something_went_wrong": "Something went wrong",
+  "failed_to_reorder_favorite": "Failed to reorder favorite",
+  "favorite_removed_successfully": "Favorite removed successfully",
+  "failed_to_create_favorite": "Failed to create favorite",
+  "failed_to_rename_favorite": "Failed to rename favorite",
+  "project_link_copied_to_clipboard": "Project link copied to clipboard",
+  "link_copied": "Link copied",
+  "add_project": "Add project",
+  "create_project": "Create project",
+  "failed_to_remove_project_from_favorites": "Couldn't remove the project from favorites. Please try again.",
+  "project_created_successfully": "Project created successfully",
+  "project_created_successfully_description": "Project created successfully. You can now start adding work items to it.",
+  "project_name_already_taken": "The project name is already taken.",
+  "project_name_cannot_contain_special_characters": "The project name cannot contain special characters.",
+  "project_identifier_already_taken": "The project identifier is already taken.",
+  "project_cover_image_alt": "Project cover image",
+  "name_is_required": "Name is required",
+  "title_should_be_less_than_255_characters": "Title should be less than 255 characters",
+  "project_name": "Project name",
+  "project_id_must_be_at_least_1_character": "Project ID must at least be of 1 character",
+  "project_id_must_be_at_most_5_characters": "Project ID must at most be of 5 characters",
+  "project_id": "Project ID",
+  "project_id_tooltip_content": "Helps you identify work items in the project uniquely. Max 50 characters.",
+  "description_placeholder": "Description",
+  "only_alphanumeric_non_latin_characters_allowed": "Only Alphanumeric & Non-latin characters are allowed.",
+  "project_id_is_required": "Project ID is required",
+  "project_id_allowed_char": "Only Alphanumeric & Non-latin characters are allowed.",
+  "project_id_min_char": "Project ID must at least be of 1 character",
+  "project_id_max_char": "Project ID must at most be of {max} characters",
+  "project_description_placeholder": "Enter project description",
+  "select_network": "Select network",
+  "lead": "Lead",
+  "date_range": "Date range",
+  "private": "Private",
+  "public": "Public",
+  "accessible_only_by_invite": "Accessible only by invite",
+  "anyone_in_the_workspace_except_guests_can_join": "Anyone in the workspace except Guests can join",
+  "creating": "Creating",
+  "creating_project": "Creating project",
+  "adding_project_to_favorites": "Adding project to favorites",
+  "project_added_to_favorites": "Project added to favorites",
+  "couldnt_add_the_project_to_favorites": "Couldn't add the project to favorites. Please try again.",
+  "removing_project_from_favorites": "Removing project from favorites",
+  "project_removed_from_favorites": "Project removed from favorites",
+  "couldnt_remove_the_project_from_favorites": "Couldn't remove the project from favorites. Please try again.",
+  "add_to_favorites": "Add to favorites",
+  "remove_from_favorites": "Remove from favorites",
+  "publish_project": "Publish project",
+  "publish": "Publish",
+  "copy_link": "Copy link",
+  "leave_project": "Leave project",
+  "join_the_project_to_rearrange": "Join the project to rearrange",
+  "drag_to_rearrange": "Drag to rearrange",
+  "congrats": "Congrats!",
+  "open_project": "Open project",
+  "issues": "Work items",
+  "cycles": "Cycles",
+  "modules": "Modules",
+  "pages": "Pages",
+  "intake": "Intake",
+  "renew": "Renew",
+  "preview": "Preview",
+  "time_tracking": "Time Tracking",
+  "work_management": "Work management",
+  "projects_and_issues": "Projects and work items",
+  "projects_and_issues_description": "Toggle these on or off this project.",
+  "cycles_description": "Timebox work per project and adjust the time period as needed. One cycle can be 2 weeks, the next 1 week.",
+  "modules_description": "Organize work into sub-projects with dedicated leads and assignees.",
+  "views_description": "Save custom sorts, filters, and display options or share them with your team.",
+  "pages_description": "Create and edit free-form content; notes, docs, anything.",
+  "intake_description": "Let non-members share bugs, feedback, and suggestions; without disrupting your workflow.",
+  "time_tracking_description": "Log time spent on work items and projects.",
+  "work_management_description": "Manage your work and projects with ease.",
+  "documentation": "Documentation",
+  "message_support": "Message support",
+  "contact_sales": "Contact sales",
+  "hyper_mode": "Hyper Mode",
+  "keyboard_shortcuts": "Keyboard shortcuts",
+  "whats_new": "What's new?",
+  "version": "Version",
+  "we_are_having_trouble_fetching_the_updates": "We are having trouble fetching the updates.",
+  "our_changelogs": "our changelogs",
+  "for_the_latest_updates": "for the latest updates.",
+  "please_visit": "Please visit",
+  "docs": "Docs",
+  "full_changelog": "Full changelog",
+  "support": "Support",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Powered by Plane Pages",
+  "please_select_at_least_one_invitation": "Please select at least one invitation.",
+  "please_select_at_least_one_invitation_description": "Please select at least one invitation to join the workspace.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "We see that someone has invited you to join a workspace",
+  "join_a_workspace": "Join a workspace",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "We see that someone has invited you to join a workspace",
+  "join_a_workspace_description": "Join a workspace",
+  "accept_and_join": "Accept & Join",
+  "go_home": "Go Home",
+  "no_pending_invites": "No pending invites",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "You can see here if someone invites you to a workspace",
+  "back_to_home": "Back to home",
+  "workspace_name": "workspace-name",
+  "deactivate_your_account": "Deactivate your account",
+  "deactivate_your_account_description": "Once deactivated, you can't be assigned work items and be billed for your workspace. To reactivate your account, you will need an invite to a workspace at this email address.",
+  "deactivating": "Deactivating",
+  "confirm": "Confirm",
+  "confirming": "Confirming",
+  "draft_created": "Draft created",
+  "issue_created_successfully": "Work item created successfully",
+  "draft_creation_failed": "Draft creation failed",
+  "issue_creation_failed": "Work item creation failed",
+  "draft_issue": "Draft work item",
+  "issue_updated_successfully": "Work item updated successfully",
+  "issue_could_not_be_updated": "Work item could not be updated",
+  "create_a_draft": "Create a draft",
+  "save_to_drafts": "Save to Drafts",
+  "save": "Save",
+  "update": "Update",
+  "updating": "Updating",
+  "create_new_issue": "Create new work item",
+  "editor_is_not_ready_to_discard_changes": "Editor is not ready to discard changes",
+  "failed_to_move_issue_to_project": "Failed to move work item to project",
+  "create_more": "Create more",
+  "add_to_project": "Add to project",
+  "discard": "Discard",
+  "duplicate_issue_found": "Duplicate work item found",
+  "duplicate_issues_found": "Duplicate work items found",
+  "no_matching_results": "No matching results",
+  "title_is_required": "Title is required",
+  "title": "Title",
+  "state": "State",
+  "transition": "Transition",
+  "history": "History",
+  "priority": "Priority",
+  "none": "None",
+  "urgent": "Urgent",
+  "high": "High",
+  "medium": "Medium",
+  "low": "Low",
+  "members": "Members",
+  "assignee": "Assignee",
+  "assignees": "Assignees",
+  "subscriber": "{count, plural, one{# Subscriber} other{# Subscribers}}",
+  "you": "You",
+  "labels": "Labels",
+  "create_new_label": "Create new label",
+  "label_name": "Label name",
+  "failed_to_create_label": "Failed to create label. Please try again.",
+  "start_date": "Start date",
+  "end_date": "End date",
+  "due_date": "Due date",
+  "target_date": "Target date",
+  "estimate": "Estimate",
+  "change_parent_issue": "Change parent work item",
+  "remove_parent_issue": "Remove parent work item",
+  "add_parent": "Add parent",
+  "loading_members": "Loading members",
+  "view_link_copied_to_clipboard": "View link copied to clipboard.",
+  "required": "Required",
+  "optional": "Optional",
+  "Cancel": "Cancel",
+  "edit": "Edit",
+  "archive": "Archive",
+  "restore": "Restore",
+  "open_in_new_tab": "Open in new tab",
+  "delete": "Delete",
+  "deleting": "Deleting",
+  "make_a_copy": "Make a copy",
+  "move_to_project": "Move to project",
+  "good": "Good",
+  "morning": "morning",
+  "afternoon": "afternoon",
+  "evening": "evening",
+  "show_all": "Show all",
+  "show_less": "Show less",
+  "no_data_yet": "No Data yet",
+  "syncing": "Syncing",
+  "add_work_item": "Add work item",
+  "advanced_description_placeholder": "Press '/' for commands",
+  "create_work_item": "Create work item",
+  "attachments": "Attachments",
+  "declining": "Declining",
+  "declined": "Declined",
+  "decline": "Decline",
+  "unassigned": "Unassigned",
+  "work_items": "Work items",
+  "add_link": "Add link",
+  "points": "Points",
+  "no_assignee": "No assignee",
+  "no_assignees_yet": "No assignees yet",
+  "no_labels_yet": "No labels yet",
+  "ideal": "Ideal",
+  "current": "Current",
+  "no_matching_members": "No matching members",
+  "leaving": "Leaving",
+  "removing": "Removing",
+  "leave": "Leave",
+  "refresh": "Refresh",
+  "refreshing": "Refreshing",
+  "refresh_status": "Refresh status",
+  "prev": "Prev",
+  "next": "Next",
+  "re_generating": "Re-generating",
+  "re_generate": "Re-generate",
+  "re_generate_key": "Re-generate key",
+  "export": "Export",
+  "member": "{count, plural, one{# member} other{# members}}",
+  "new_password_must_be_different_from_old_password": "New password must be different from old password",
+  "edited": "edited",
+  "bot": "Bot",
+  "settings_description": "Manage your account, workspace, and project preferences all in one place. Switch between tabs to easily configure.",
+  "back_to_workspace": "Back to workspace",
+  "upgrade_request": "Ask your Workspace Admin to upgrade.",
+  "copied_to_clipboard": "Copied to clipboard",
+  "copied_to_clipboard_description": "The URL has been successfully copied to your clipboard",
+  "toast": {
+    "success": "Success!",
+    "error": "Error!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Link created",
+        "message": "The link has been successfully created"
+      },
+      "not_created": {
+        "title": "Link not created",
+        "message": "The link could not be created"
+      },
+      "updated": {
+        "title": "Link updated",
+        "message": "The link has been successfully updated"
+      },
+      "not_updated": {
+        "title": "Link not updated",
+        "message": "The link could not be updated"
+      },
+      "removed": {
+        "title": "Link removed",
+        "message": "The link has been successfully removed"
+      },
+      "not_removed": {
+        "title": "Link not removed",
+        "message": "The link could not be removed"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL is invalid",
+        "placeholder": "Type or paste a URL"
+      },
+      "title": {
+        "text": "Display title",
+        "placeholder": "What you'd like to see this link as"
+      }
+    }
+  },
+  "common": {
+    "all": "All",
+    "no_items_in_this_group": "No items in this group",
+    "drop_here_to_move": "Drop here to move",
+    "states": "States",
+    "state": "State",
+    "state_groups": "State groups",
+    "state_group": "State group",
+    "priorities": "Priorities",
+    "priority": "Priority",
+    "team_project": "Team project",
+    "project": "Project",
+    "cycle": "Cycle",
+    "cycles": "Cycles",
+    "module": "Module",
+    "modules": "Modules",
+    "labels": "Labels",
+    "label": "Label",
+    "admins": "Admins",
+    "users": "Users",
+    "guests": "Guests",
+    "assignees": "Assignees",
+    "assignee": "Assignee",
+    "created_by": "Created by",
+    "none": "None",
+    "link": "Link",
+    "estimates": "Estimates",
+    "estimate": "Estimate",
+    "created_at": "Created at",
+    "updated_at": "Updated at",
+    "completed_at": "Completed at",
+    "layout": "Layout",
+    "filters": "Filters",
+    "display": "Display",
+    "load_more": "Load more",
+    "activity": "Activity",
+    "analytics": "Analytics",
+    "dates": "Dates",
+    "success": "Success!",
+    "something_went_wrong": "Something went wrong",
+    "error": {
+      "label": "Error!",
+      "message": "Some error occurred. Please try again."
+    },
+    "group_by": "Group by",
+    "epic": "Epic",
+    "epics": "Epics",
+    "work_item": "Work item",
+    "work_items": "Work items",
+    "sub_work_item": "Sub-work item",
+    "views": "Views",
+    "pages": "Pages",
+    "add": "Add",
+    "warning": "Warning",
+    "updating": "Updating",
+    "adding": "Adding",
+    "update": "Update",
+    "creating": "Creating",
+    "create": "Create",
+    "cancel": "Cancel",
+    "description": "Description",
+    "title": "Title",
+    "attachment": "Attachment",
+    "general": "General",
+    "features": "Features",
+    "automation": "Automation",
+    "project_name": "Project name",
+    "project_id": "Project ID",
+    "project_timezone": "Project Timezone",
+    "created_on": "Created on",
+    "updated_on": "Updated on",
+    "completed_on": "Completed on",
+    "update_project": "Update project",
+    "identifier_already_exists": "Identifier already exists",
+    "add_more": "Add more",
+    "defaults": "Defaults",
+    "add_label": "Add label",
+    "customize_time_range": "Customize time range",
+    "loading": "Loading",
+    "attachments": "Attachments",
+    "property": "Property",
+    "properties": "Properties",
+    "parent": "Parent",
+    "page": "Page",
+    "remove": "Remove",
+    "archiving": "Archiving",
+    "archive": "Archive",
+    "access": {
+      "public": "Public",
+      "private": "Private"
+    },
+    "done": "Done",
+    "sub_work_items": "Sub-work items",
+    "comment": "Comment",
+    "workspace_level": "Workspace level",
+    "order_by": {
+      "label": "Order by",
+      "manual": "Manual",
+      "last_created": "Last created",
+      "last_updated": "Last updated",
+      "start_date": "Start date",
+      "due_date": "Due date",
+      "asc": "Ascending",
+      "desc": "Descending",
+      "updated_on": "Updated on"
+    },
+    "sort": {
+      "asc": "Ascending",
+      "desc": "Descending",
+      "created_on": "Created on",
+      "updated_on": "Updated on"
+    },
+    "comments": "Comments",
+    "updates": "Updates",
+    "additional_updates": "Additional updates",
+    "clear_all": "Clear all",
+    "copied": "Copied!",
+    "link_copied": "Link copied!",
+    "link_copied_to_clipboard": "Link copied to clipboard",
+    "copied_to_clipboard": "Work item link copied to clipboard",
+    "branch_name_copied_to_clipboard": "Branch name copied to clipboard",
+    "is_copied_to_clipboard": "Work item is copied to clipboard",
+    "no_links_added_yet": "No links added yet",
+    "add_link": "Add link",
+    "links": "Links",
+    "go_to_workspace": "Go to workspace",
+    "progress": "Progress",
+    "optional": "Optional",
+    "join": "Join",
+    "go_back": "Go back",
+    "continue": "Continue",
+    "resend": "Resend",
+    "relations": "Relations",
+    "dependencies": "Dependencies",
+    "errors": {
+      "default": {
+        "title": "Error!",
+        "message": "Something went wrong. Please try again."
+      },
+      "required": "This field is required",
+      "entity_required": "{entity} is required",
+      "restricted_entity": "{entity} is restricted"
+    },
+    "update_link": "Update link",
+    "attach": "Attach",
+    "create_new": "Create new",
+    "add_existing": "Add existing",
+    "type_or_paste_a_url": "Type or paste a URL",
+    "url_is_invalid": "URL is invalid",
+    "display_title": "Display title",
+    "link_title_placeholder": "What you'd like to see this link as",
+    "url": "URL",
+    "side_peek": "Side Peek",
+    "modal": "Modal",
+    "full_screen": "Full Screen",
+    "close_peek_view": "Close the peek view",
+    "toggle_peek_view_layout": "Toggle peek view layout",
+    "options": "Options",
+    "duration": "Duration",
+    "today": "Today",
+    "week": "Week",
+    "month": "Month",
+    "quarter": "Quarter",
+    "press_for_commands": "Press '/' for commands",
+    "click_to_add_description": "Click to add description",
+    "on_track": "On-Track",
+    "off_track": "Off-Track",
+    "at_risk": "At risk",
+    "timeline": "Timeline",
+    "completion": "Completion",
+    "upcoming": "Upcoming",
+    "completed": "Completed",
+    "in_progress": "In progress",
+    "planned": "Planned",
+    "paused": "Paused",
+    "search": {
+      "label": "Search",
+      "placeholder": "Type to search",
+      "no_matches_found": "No matches found",
+      "no_matching_results": "No matching results",
+      "min_chars": "Type at least {count} characters to search",
+      "error": "Error fetching search results",
+      "no_results": {
+        "title": "No matching results",
+        "description": "Remove the search criteria to see all results"
+      }
+    },
+    "actions": {
+      "edit": "Edit",
+      "make_a_copy": "Make a copy",
+      "open_in_new_tab": "Open in new tab",
+      "copy_link": "Copy link",
+      "copy_branch_name": "Copy branch name",
+      "archive": "Archive",
+      "restore": "Restore",
+      "delete": "Delete",
+      "remove_relation": "Remove relation",
+      "subscribe": "Subscribe",
+      "unsubscribe": "Unsubscribe",
+      "clear_sorting": "Clear sorting",
+      "show_weekends": "Show weekends",
+      "enable": "Enable",
+      "disable": "Disable",
+      "copy_markdown": "Copy markdown",
+      "reply": "Reply"
+    },
+    "name": "Name",
+    "discard": "Discard",
+    "confirm": "Confirm",
+    "confirming": "Confirming",
+    "read_the_docs": "Read the docs",
+    "default": "Default",
+    "active": "Active",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "mandate": "Mandate",
+    "mandatory": "Mandatory",
+    "global": "Global",
+    "yes": "Yes",
+    "no": "No",
+    "please_wait": "Please wait",
+    "enabling": "Enabling",
+    "disabling": "Disabling",
+    "beta": "Beta",
+    "or": "or",
+    "next": "Next",
+    "back": "Back",
+    "retry": "Retry",
+    "cancelling": "Cancelling",
+    "configuring": "Configuring",
+    "clear": "Clear",
+    "import": "Import",
+    "connect": "Connect",
+    "authorizing": "Authorizing",
+    "processing": "Processing",
+    "no_data_available": "No data available",
+    "from": "from {name}",
+    "authenticated": "Authenticated",
+    "select": "Select",
+    "upgrade": "Upgrade",
+    "add_seats": "Add Seats",
+    "projects": "Projects",
+    "workspace": "Workspace",
+    "workspaces": "Workspaces",
+    "team": "Team",
+    "teams": "Teams",
+    "entity": "Entity",
+    "entities": "Entities",
+    "task": "Task",
+    "tasks": "Tasks",
+    "section": "Section",
+    "sections": "Sections",
+    "edit": "Edit",
+    "connecting": "Connecting",
+    "connected": "Connected",
+    "disconnect": "Disconnect",
+    "disconnecting": "Disconnecting",
+    "installing": "Installing",
+    "install": "Install",
+    "reset": "Reset",
+    "live": "Live",
+    "change_history": "Change History",
+    "coming_soon": "Coming soon",
+    "member": "Member",
+    "members": "Members",
+    "you": "You",
+    "upgrade_cta": {
+      "higher_subscription": "Upgrade to higher subscription",
+      "talk_to_sales": "Talk to Sales"
+    },
+    "category": "Category",
+    "categories": "Categories",
+    "saving": "Saving",
+    "save_changes": "Save changes",
+    "delete": "Delete",
+    "deleting": "Deleting",
+    "pending": "Pending",
+    "invite": "Invite",
+    "view": "View",
+    "deactivated_user": "Deactivated user",
+    "apply": "Apply",
+    "applying": "Applying",
+    "overview": "Overview",
+    "no_of": "No. of {entity}",
+    "resolved": "Resolved",
+    "get_started": "Get started",
+    "worklogs": "Worklogs",
+    "project_updates": "Project Updates",
+    "workflows": "Workflows",
+    "templates": "Templates",
+    "business": "Business",
+    "members_and_teamspaces": "Members & Teamspaces",
+    "recurring_work_items": "Recurring work items",
+    "milestones": "Milestones",
+    "open_in_full_screen": "Open {page} in full screen",
+    "details": "Details",
+    "project_structure": "Project structure",
+    "custom_properties": "Custom properties",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "X-axis",
+    "y_axis": "Y-axis",
+    "metric": "Metric"
+  },
+  "form": {
+    "title": {
+      "required": "Title is required",
+      "max_length": "Title should be less than {length} characters"
+    }
+  },
+  "entity": {
+    "grouping_title": "{entity} Grouping",
+    "priority": "{entity} Priority",
+    "all": "All {entity}",
+    "drop_here_to_move": "Drop here to move the {entity}",
+    "delete": {
+      "label": "Delete {entity}",
+      "success": "{entity} deleted successfully",
+      "failed": "{entity} delete failed"
+    },
+    "update": {
+      "failed": "{entity} update failed",
+      "success": "{entity} updated successfully"
+    },
+    "link_copied_to_clipboard": "{entity} link copied to clipboard",
+    "fetch": {
+      "failed": "Error fetching {entity}"
+    },
+    "add": {
+      "success": "{entity} added successfully",
+      "failed": "Error adding {entity}"
+    },
+    "remove": {
+      "success": "{entity} removed successfully",
+      "failed": "Error removing {entity}"
+    }
+  },
+  "attachment": {
+    "error": "File could not be attached. Try uploading again.",
+    "only_one_file_allowed": "Only one file can be uploaded at a time.",
+    "file_size_limit": "File must be of {size}MB or less in size.",
+    "drag_and_drop": "Drag and drop anywhere to upload",
+    "delete": "Delete attachment"
+  },
+  "label": {
+    "select": "Add labels",
+    "create": {
+      "success": "Label created successfully",
+      "failed": "Label creation failed",
+      "already_exists": "Label already exists",
+      "type": "Type to add a new label"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {View} other {Views}}",
+    "create": {
+      "label": "Create View"
+    },
+    "update": {
+      "label": "Update View"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Guest",
+      "description": "External members of organizations can be invited as guests."
+    },
+    "member": {
+      "title": "Member",
+      "description": "Ability to read, write, edit, and delete entities inside projects, cycles, and modules"
+    },
+    "admin": {
+      "title": "Admin",
+      "description": "All permissions set to true within the workspace."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Product / Project Manager",
+    "development_or_engineering": "Development / Engineering",
+    "founder_or_executive": "Founder / Executive",
+    "freelancer_or_consultant": "Freelancer / Consultant",
+    "marketing_or_growth": "Marketing / Growth",
+    "sales_or_business_development": "Sales / Business Development",
+    "support_or_operations": "Support / Operations",
+    "student_or_professor": "Student / Professor",
+    "human_resources": "Human / Resources",
+    "other": "Other"
+  },
+  "default_global_view": {
+    "all_issues": "All work items",
+    "assigned": "Assigned",
+    "created": "Created",
+    "subscribed": "Subscribed"
+  },
+  "description_versions": {
+    "last_edited_by": "Last edited by",
+    "previously_edited_by": "Previously edited by",
+    "edited_by": "Edited by"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane didn't start up. This could be because one or more Plane services failed to start.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Choose View Logs from setup.sh and Docker logs to be sure."
+  },
+  "customize_navigation": "Customize navigation",
+  "personal": "Personal",
+  "accordion_navigation_control": "Accordion sidebar navigation",
+  "horizontal_navigation_bar": "Tabbed Navigation",
+  "show_limited_projects_on_sidebar": "Show limited projects on sidebar",
+  "enter_number_of_projects": "Enter number of projects",
+  "pin": "Pin",
+  "unpin": "Unpin",
+  "workspace_dashboards": "Dashboards",
+  "pi_chat": "Plane AI",
+  "in_app": "In-app",
+  "forms": "Forms",
+  "milestones": "Milestones",
+  "milestones_description": "Milestones provide a layer to align work items toward shared completion dates.",
+  "file_upload": {
+    "upload_text": "Click here to upload file",
+    "drag_drop_text": "Drag and Drop",
+    "processing": "Processing",
+    "invalid_file_type": "Invalid file type",
+    "missing_fields": "Missing fields",
+    "success": "{fileName} Uploaded!"
+  },
+  "date": "Date",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Export work items to a CSV file.",
+      "short_description": "Export as csv"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Export work items to a Excel file.",
+      "short_description": "Export as excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Export work items to a Excel file.",
+      "short_description": "Export as excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Export work items to a JSON file.",
+      "short_description": "Export as json"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/cycle.json b/packages/i18n/src/locales/en/cycle.json
new file mode 100644
index 0000000..7bebffa
--- /dev/null
+++ b/packages/i18n/src/locales/en/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Add work items to the cycle to view it's progress"
+      },
+      "chart": {
+        "title": "Add work items to the cycle to view the burndown chart."
+      },
+      "priority_issue": {
+        "title": "Observe high priority work items tackled in the cycle at a glance."
+      },
+      "assignee": {
+        "title": "Add assignees to work items to see a breakdown of work by assignees."
+      },
+      "label": {
+        "title": "Add labels to work items to see the breakdown of work by labels."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Cycle} other {Cycles}}",
+    "no_cycle": "No cycle"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Add work items to the cycle to view it's\n progress"
+      },
+      "priority": {
+        "title": "Observe high priority work items tackled in\n the cycle at a glance."
+      },
+      "assignee": {
+        "title": "Add assignees to work items to see a\n breakdown of work by assignees."
+      },
+      "label": {
+        "title": "Add labels to work items to see the\n breakdown of work by labels."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/editor.json b/packages/i18n/src/locales/en/editor.json
new file mode 100644
index 0000000..293dc51
--- /dev/null
+++ b/packages/i18n/src/locales/en/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Drop files here or click to upload"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "File too large.",
+        "description": "Maximum size per file is {maxFileSize}MB"
+      },
+      "unsupported_file_type": {
+        "title": "Unsupported file type.",
+        "description": "See supported formats"
+      },
+      "default": {
+        "title": "Upload failed.",
+        "description": "Something went wrong. Please try again."
+      }
+    },
+    "upgrade": {
+      "description": "Upgrade your plan to view this attachment."
+    },
+    "aria": {
+      "click_to_upload": "Click to upload attachment"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Convert to Embed",
+      "convert_to_link": "Convert to Link",
+      "convert_to_richcard": "Convert to Rich Card"
+    },
+    "placeholder": {
+      "insert_embed": "Insert your preferred embed link here, such as YouTube video, Figma design, etc.",
+      "link": "Enter or paste a link"
+    },
+    "input_modal": {
+      "embed": "Embed",
+      "works_with_links": "Works with YouTube, Figma, Google Docs and more"
+    },
+    "error": {
+      "not_valid_link": "Please enter a valid URL."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Describe the content of this block",
+      "generated_here": "Your AI content will be generated here"
+    },
+    "block_types": {
+      "placeholder": "Select block type",
+      "summarize_page": "Summarize Page",
+      "custom_prompt": "Custom Prompt"
+    },
+    "actions": {
+      "discard": "Discard",
+      "generate": "Generate",
+      "generating": "Generating",
+      "rewriting": "Rewriting",
+      "rewrite": "Rewrite",
+      "use_this": "Use this",
+      "refine": "Refine"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/empty-state.json b/packages/i18n/src/locales/en/empty-state.json
new file mode 100644
index 0000000..33b556e
--- /dev/null
+++ b/packages/i18n/src/locales/en/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "There're no progress metrics to show yet.",
+      "description": "Start setting property values in work items to see progress metrics here."
+    },
+    "updates": {
+      "title": "No updates yet.",
+      "description": "Once project members add updates it will appear here"
+    },
+    "search": {
+      "title": "No matching results.",
+      "description": "No results found. Try adjusting your search terms."
+    },
+    "not_found": {
+      "title": "Oops! Something seems wrong",
+      "description": "We are unable to fetch your plane account currently. This might be a network error.",
+      "cta_primary": "Try reloading"
+    },
+    "server_error": {
+      "title": "Server error",
+      "description": "We are unable to connect and fetch data from our server. Don't worry, we are working on it.",
+      "cta_primary": "Try reloading"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Seems like you don’t have access to this Project",
+      "restricted_description": "Contact admin to request for access and you can continue here.",
+      "join_description": "Click the button below to join it.",
+      "cta_primary": "Join project",
+      "cta_loading": "Joining project"
+    },
+    "invalid_project": {
+      "title": "Project not found",
+      "description": "The project you are looking for does not exist."
+    },
+    "work_items": {
+      "title": "Start with your first work item.",
+      "description": "Work items are the building blocks of your project — assign owners, set priorities, and track progress easily.",
+      "cta_primary": "Create your first work item"
+    },
+    "cycles": {
+      "title": "Group and timebox your work in Cycles.",
+      "description": "Break work down by timeboxed chunks, work backwards from your project deadline to set dates, and make tangible progress as a team.",
+      "cta_primary": "Set your first cycle"
+    },
+    "cycle_work_items": {
+      "title": "No work items to show in this cycle",
+      "description": "Create work items to begin monitoring your team's progress this cycle and achieve your goals on time.",
+      "cta_primary": "Create work item",
+      "cta_secondary": "Add existing work item"
+    },
+    "modules": {
+      "title": "Map your project goals to Modules and track easily.",
+      "description": "Modules are made up of interconnected work items. They assist in monitoring progress through project phases, each with specific deadlines and analytics to indicate how close you are to achieving those phases.",
+      "cta_primary": "Set your first module"
+    },
+    "module_work_items": {
+      "title": "No work items to show in this Module",
+      "description": "Create work items to begin monitoring this module.",
+      "cta_primary": "Create work item",
+      "cta_secondary": "Add existing work item"
+    },
+    "views": {
+      "title": "Save custom views for your project",
+      "description": "Views are saved filters that help you quickly access the information you use most. Collaborate effortlessly as teammates share and tailor views to their specific needs.",
+      "cta_primary": "Create view"
+    },
+    "no_work_items_in_project": {
+      "title": "No work items in the project yet",
+      "description": "Add work items to your project and slice your work into trackable pieces with views.",
+      "cta_primary": "Add work item"
+    },
+    "work_item_filter": {
+      "title": "No work items found",
+      "description": "Your current filter didn't return any results. Try changing the filters.",
+      "cta_primary": "Add work item"
+    },
+    "pages": {
+      "title": "Document everything — from notes to PRDs",
+      "description": "Pages let you capture and organize information in one place. Write meeting notes, project documentation, and PRDs, embed work items, and structure them with ready-to-use components.",
+      "cta_primary": "Create your first Page"
+    },
+    "archive_pages": {
+      "title": "No archived pages yet",
+      "description": "Archive pages not on your radar. Access them here when needed."
+    },
+    "intake_sidebar": {
+      "title": "Log Intake requests",
+      "description": "Submit new requests to be reviewed, prioritized, and tracked within your project's workflow.",
+      "cta_primary": "Create Intake request"
+    },
+    "intake_main": {
+      "title": "Select an Intake work item to view its details"
+    },
+    "epics": {
+      "title": "Turn complex projects into structured epics.",
+      "description": "An epic helps you organize big goals into smaller, trackable tasks.",
+      "cta_primary": "Create an Epic",
+      "cta_secondary": "Documentation"
+    },
+    "epic_work_items": {
+      "title": "You haven't added work items to this epic yet.",
+      "description": "Start by adding some work items to this epic and track them here.",
+      "cta_secondary": "Add work items"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "No archived epics yet",
+      "description": "You can archive epics that are completed or cancelled. Find them here once archived."
+    },
+    "archive_work_items": {
+      "title": "No archived work items yet",
+      "description": "Manually or through automation, you can archive work items that are completed or cancelled. Find them here once archived.",
+      "cta_primary": "Set automation"
+    },
+    "archive_cycles": {
+      "title": "No archived cycles yet",
+      "description": "To tidy up your project, archive completed cycles. Find them here once archived."
+    },
+    "archive_modules": {
+      "title": "No archived Modules yet",
+      "description": "To tidy up your project, archive completed or cancelled modules. Find them here once archived."
+    },
+    "home_widget_quick_links": {
+      "title": "Keep important references, resources, or docs handy for your work"
+    },
+    "inbox_sidebar_all": {
+      "title": "Updates for your subscribed work items will appear here"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Mentions for your work items will appear here"
+    },
+    "your_work_by_priority": {
+      "title": "No work item assigned yet"
+    },
+    "your_work_by_state": {
+      "title": "No work item assigned yet"
+    },
+    "views": {
+      "title": "No Views yet",
+      "description": "Add work items to your project and use views to filter, sort, and monitor progress effortlessly.",
+      "cta_primary": "Add work item"
+    },
+    "drafts": {
+      "title": "Half-written work items",
+      "description": "To try this out, start adding a work item and leave it mid-way or create your first draft below. 😉",
+      "cta_primary": "Create draft work item"
+    },
+    "projects_archived": {
+      "title": "No projects archived",
+      "description": "Looks like all your projects are still active—great job!"
+    },
+    "analytics_projects": {
+      "title": "Create projects to visualize project metrics here."
+    },
+    "analytics_work_items": {
+      "title": "Create projects with work items and assignees to start tracking performance, progress, and team impact here."
+    },
+    "analytics_no_cycle": {
+      "title": "Create cycles to organise work into time-bound phases and track progress across sprints."
+    },
+    "analytics_no_module": {
+      "title": "Create modules to organize your work and track progress across different stages."
+    },
+    "analytics_no_intake": {
+      "title": "Set up intake to manage incoming requests and track how they're accepted and rejected"
+    },
+    "home_widget_stickies": {
+      "title": "Jot down an idea, capture an aha, or record a brainwave. Add a sticky to get started."
+    },
+    "stickies": {
+      "title": "Capture ideas instantly",
+      "description": "Create stickies for quick notes and to-dos, and keep them with you wherever you go.",
+      "cta_primary": "Create first sticky",
+      "cta_secondary": "Documentation"
+    },
+    "active_cycles": {
+      "title": "No active cycles",
+      "description": "You don't have any ongoing cycles right now. Active cycles appear here when they include today's date."
+    },
+    "dashboard": {
+      "title": "Visualize your progress with dashboards",
+      "description": "Build customizable dashboards to track metrics, measure outcomes, and present insights effectively.",
+      "cta_primary": "Create new dashboard"
+    },
+    "wiki": {
+      "title": "Write a note, a doc, or a full knowledge base.",
+      "description": "Pages are thought spotting space in Plane. Take down meeting notes, format them easily, embed work items, lay them out using a library of components, and keep them all in your project's context.",
+      "cta_primary": "Create your page"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Enable project states",
+      "description": "Enable Project States to view and manage properties like state, priority, due dates and more."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "No estimates yet",
+      "description": "Define how your team measures effort and track it consistently across all work items.",
+      "cta_primary": "Add estimate system"
+    },
+    "labels": {
+      "title": "No labels yet",
+      "description": "Create personalized labels to effectively categorize and manage your work items.",
+      "cta_primary": "Create your first label"
+    },
+    "exports": {
+      "title": "No exports yet",
+      "description": "You don't have any export records right now. Once you export data, all records will appear here."
+    },
+    "tokens": {
+      "title": "No Personal token yet",
+      "description": "Generate secure API tokens to connect your workspace with external systems and applications.",
+      "cta_primary": "Add access token"
+    },
+    "workspace_tokens": {
+      "title": "No Access tokens yet",
+      "description": "Generate secure API tokens to connect your workspace with external systems and applications.",
+      "cta_primary": "Add access token"
+    },
+    "webhooks": {
+      "title": "No Webhook added yet",
+      "description": "Automate notifications to external services when project events occur.",
+      "cta_primary": "Add webhook"
+    },
+    "work_item_types": {
+      "title": "Create and customize work item types",
+      "description": "Define unique work item types for your project. Each type can have its own properties, workflows, and fields - tailored to your project and team's needs.",
+      "cta_primary": "Enable"
+    },
+    "work_item_type_properties": {
+      "title": "Define the property and details you want to capture for this work item type. Customize it to match your project's workflow.",
+      "cta_secondary": "Add property"
+    },
+    "templates": {
+      "title": "No templates yet",
+      "description": "Reduce setup time by creating templates for work items, and pages — and start new work in seconds.",
+      "cta_primary": "Create your first template"
+    },
+    "recurring_work_items": {
+      "title": "No recurring work item yet",
+      "description": "Set up recurring work items to automate repeat tasks and stay on schedule effortlessly.",
+      "cta_primary": "Create recurring work item"
+    },
+    "worklogs": {
+      "title": "Track timesheets for all members",
+      "description": "Log time on work items to view detailed timesheets for any team member across projects."
+    },
+    "group_syncing": {
+      "title": "No group mappings yet"
+    },
+    "template_setting": {
+      "title": "No templates yet",
+      "description": "Reduce setup time by creating templates for projects, work items, and pages — and start new work in seconds.",
+      "cta_primary": "Create template"
+    },
+    "workflows": {
+      "title": "No workflows yet",
+      "description": "Create workflows to manage the progress of your work items.",
+      "cta_primary": "Add new workflow",
+      "states": {
+        "title": "Add states",
+        "description": "Select the states through which the work item progresses."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/home.json b/packages/i18n/src/locales/en/home.json
new file mode 100644
index 0000000..b001e3d
--- /dev/null
+++ b/packages/i18n/src/locales/en/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Your quickstart guide",
+      "not_right_now": "Not right now",
+      "create_project": {
+        "title": "Create a project",
+        "description": "Most things start with a project in Plane.",
+        "cta": "Get started"
+      },
+      "invite_team": {
+        "title": "Invite your team",
+        "description": "Build, ship, and manage with coworkers.",
+        "cta": "Get them in"
+      },
+      "configure_workspace": {
+        "title": "Set up your workspace.",
+        "description": "Turn features on or off or go beyond that.",
+        "cta": "Configure this workspace"
+      },
+      "personalize_account": {
+        "title": "Make Plane yours.",
+        "description": "Choose your picture, colors, and more.",
+        "cta": "Personalize now"
+      },
+      "widgets": {
+        "title": "It's Quiet Without Widgets, Turn Them On",
+        "description": "It looks like all your widgets are turned off. Enable them\nnow to enhance your experience!",
+        "primary_button": {
+          "text": "Manage widgets"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Save links to work things that you'd like handy.",
+      "add": "Add quick Link",
+      "title": "Quicklink",
+      "title_plural": "Quicklinks"
+    },
+    "recents": {
+      "title": "Recents",
+      "empty": {
+        "project": "Your recent projects will appear here once you visit one.",
+        "page": "Your recent pages will appear here once you visit one.",
+        "issue": "Your recent work items will appear here once you visit one.",
+        "default": "You don't have any recents yet."
+      },
+      "filters": {
+        "all": "All",
+        "projects": "Projects",
+        "pages": "Pages",
+        "issues": "Work items"
+      }
+    },
+    "new_at_plane": {
+      "title": "New at Plane"
+    },
+    "quick_tutorial": {
+      "title": "Quick tutorial"
+    },
+    "widget": {
+      "reordered_successfully": "Widget reordered successfully.",
+      "reordering_failed": "Error occurred while reordering widget."
+    },
+    "manage_widgets": "Manage widgets",
+    "title": "Home",
+    "star_us_on_github": "Star us on GitHub",
+    "business_trial_banner": {
+      "title": "Your 14-day Business plan trial is live!",
+      "description": "Explore all Business features. When you're ready, choose to subscribe. You'll not be billed automatically.",
+      "trial_ends_today": "Trial ends today",
+      "trial_ends_in_days": "Trial ends in {days, plural, one {# day} other {# days}}",
+      "start_subscription": "Start subscription",
+      "explore_business_features": "Explore Business features"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/inbox.json b/packages/i18n/src/locales/en/inbox.json
new file mode 100644
index 0000000..4d868db
--- /dev/null
+++ b/packages/i18n/src/locales/en/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Pending",
+        "description": "Pending"
+      },
+      "declined": {
+        "title": "Declined",
+        "description": "Declined"
+      },
+      "snoozed": {
+        "title": "Snoozed",
+        "description": "{days, plural, one{# day} other{# days}} to go"
+      },
+      "accepted": {
+        "title": "Accepted",
+        "description": "Accepted"
+      },
+      "duplicate": {
+        "title": "Duplicate",
+        "description": "Duplicate"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Decline work item",
+        "content": "Are you sure you want to decline work item {value}?"
+      },
+      "delete": {
+        "title": "Delete work item",
+        "content": "Are you sure you want to delete work item {value}?",
+        "success": "Work item deleted successfully"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Only project admins can snooze/Un-snooze work items",
+      "accept_permission": "Only project admins can accept work items",
+      "decline_permission": "Only project admins can deny work items"
+    },
+    "actions": {
+      "accept": "Accept",
+      "decline": "Decline",
+      "snooze": "Snooze",
+      "unsnooze": "Un snooze",
+      "copy": "Copy work item link",
+      "delete": "Delete",
+      "open": "Open work item",
+      "mark_as_duplicate": "Mark as duplicate",
+      "move": "Move {value} to project work items"
+    },
+    "source": {
+      "in-app": "in-app"
+    },
+    "order_by": {
+      "created_at": "Created at",
+      "updated_at": "Updated at",
+      "id": "ID"
+    },
+    "label": "Intake",
+    "page_label": "{workspace} - Intake",
+    "modal": {
+      "title": "Create intake work item"
+    },
+    "tabs": {
+      "open": "Open",
+      "closed": "Closed"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "No open work items",
+        "description": "Find open work items here. Create new work item."
+      },
+      "sidebar_closed_tab": {
+        "title": "No closed work items",
+        "description": "All the work items whether accepted or declined can be found here."
+      },
+      "sidebar_filter": {
+        "title": "No matching work items",
+        "description": "No work item matches filter applied in intake. Create a new work item."
+      },
+      "detail": {
+        "title": "Select a work item to view its details."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/integration.json b/packages/i18n/src/locales/en/integration.json
new file mode 100644
index 0000000..7a36176
--- /dev/null
+++ b/packages/i18n/src/locales/en/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integrations",
+    "loading": "Loading",
+    "unauthorized": "You are not authorized to view this page.",
+    "configure": "Configure",
+    "not_enabled": "{name} is not enabled for this workspace.",
+    "not_configured": "Not configured",
+    "disconnect_personal_account": "Disconnect personal {providerName} account",
+    "not_configured_message_admin": "{name} integration is not configured. Please contact your instance admin to configure it.",
+    "not_configured_message_support": "{name} integration is not configured. Please contact support to configure it.",
+    "external_api_unreachable": "Not able to access the external API. Please try again later.",
+    "error_fetching_supported_integrations": "Not able to fetch supported integrations. Please try again later.",
+    "back_to_integrations": "Back to integrations",
+    "select_state": "Select State",
+    "set_state": "Set State",
+    "choose_project": "Choose Project...",
+    "skip_backward_state_movement": "Prevent issues from moving to an earlier state due to PR updates"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Connect and sync your GitHub work items with Plane",
+    "connect_org": "Connect Organization",
+    "connect_org_description": "Connect your GitHub organization with Plane",
+    "processing": "Processing",
+    "org_added_desc": "GitHub org added by and time",
+    "connection_fetch_error": "Error fetching connection details from server",
+    "personal_account_connected": "Personal account connected",
+    "personal_account_connected_description": "Your GitHub account is now connected to Plane",
+    "connect_personal_account": "Connect Personal Account",
+    "connect_personal_account_description": "Connect your personal GitHub account with Plane.",
+    "repo_mapping": "Repository Mapping",
+    "repo_mapping_description": "Map your GitHub repositories with Plane projects.",
+    "project_issue_sync": "Project Issue Sync",
+    "project_issue_sync_description": "Sync issues from GitHub to your Plane project",
+    "project_issue_sync_empty_state": "Mapped project issue sync will appear here",
+    "configure_project_issue_sync_state": "Configure Issue Sync State",
+    "select_issue_sync_direction": "Select issue sync direction",
+    "allow_bidirectional_sync": "Bidirectional - Sync issues and comments both ways between GitHub and Plane",
+    "allow_unidirectional_sync": "Unidirectional - Sync issues and comments from GitHub to Plane only",
+    "allow_unidirectional_sync_warning": "Data from GitHub Issue will replace data in Linked Plane Work Item (GitHub → Plane only)",
+    "remove_project_issue_sync": "Remove this Project Issue Sync",
+    "remove_project_issue_sync_confirmation": "Are you sure you want to remove this project issue sync?",
+    "add_pr_state_mapping": "Add Pull Request State Mapping for Plane project",
+    "edit_pr_state_mapping": "Edit Pull Request State Mapping for Plane project",
+    "pr_state_mapping": "Pull Request State Mapping",
+    "pr_state_mapping_description": "Map GitHub pull request states to your Plane project",
+    "pr_state_mapping_empty_state": "Mapped PR states will appear here",
+    "remove_pr_state_mapping": "Remove this Pull Request State Mapping",
+    "remove_pr_state_mapping_confirmation": "Are you sure you want to remove this pull request state mapping?",
+    "issue_sync_message": "Work items are synced to {project}",
+    "link": "Link GitHub Repository to a Plane Project",
+    "pull_request_automation": "Pull Request Automation",
+    "pull_request_automation_description": "Configure pull request state mapping from GitHub to your Plane project",
+    "DRAFT_MR_OPENED": "Draft Open",
+    "MR_OPENED": "Open",
+    "MR_READY_FOR_MERGE": "Ready for Merge",
+    "MR_REVIEW_REQUESTED": "Review Requested",
+    "MR_MERGED": "Merged",
+    "MR_CLOSED": "Closed",
+    "ISSUE_OPEN": "Issue Open",
+    "ISSUE_CLOSED": "Issue Closed",
+    "save": "Save",
+    "start_sync": "Start Sync",
+    "choose_repository": "Choose Repository..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Connect and sync your Gitlab Merge Requests with Plane.",
+    "connection_fetch_error": "Error fetching connection details from server",
+    "connect_org": "Connect Organization",
+    "connect_org_description": "Connect your Gitlab organization with Plane.",
+    "project_connections": "Gitlab Project Connections",
+    "project_connections_description": "Sync merge requests from Gitlab to Plane projects.",
+    "plane_project_connection": "Plane Project Connection",
+    "plane_project_connection_description": "Configure pull requests state mapping from Gitlab to Plane projects",
+    "remove_connection": "Remove Connection",
+    "remove_connection_confirmation": "Are you sure you want to remove this connection?",
+    "link": "Link Gitlab repository to Plane project",
+    "pull_request_automation": "Pull Request Automation",
+    "pull_request_automation_description": "Configure pull request state mapping from Gitlab to Plane",
+    "DRAFT_MR_OPENED": "On draft MR open, set the state to",
+    "MR_OPENED": "On MR open, set the state to",
+    "MR_REVIEW_REQUESTED": "On MR review requested, set the state to",
+    "MR_READY_FOR_MERGE": "On MR ready for merge, set the state to",
+    "MR_MERGED": "On MR merged, set the state to",
+    "MR_CLOSED": "On MR closed, set the state to",
+    "integration_enabled_text": "With Gitlab integration Enabled, you can automate work item workflows",
+    "choose_entity": "Choose Entity",
+    "choose_project": "Choose Project",
+    "link_plane_project": "Link Plane project",
+    "project_issue_sync": "Project Issue Sync",
+    "project_issue_sync_description": "Sync issues from Gitlab to your Plane project",
+    "project_issue_sync_empty_state": "Mapped project issue sync will appear here",
+    "configure_project_issue_sync_state": "Configure Issue Sync State",
+    "select_issue_sync_direction": "Select issue sync direction",
+    "allow_bidirectional_sync": "Bidirectional - Sync issues and comments both ways between Gitlab and Plane",
+    "allow_unidirectional_sync": "Unidirectional - Sync issues and comments from Gitlab to Plane only",
+    "allow_unidirectional_sync_warning": "Data from Gitlab Issue will replace data in Linked Plane Work Item (Gitlab → Plane only)",
+    "remove_project_issue_sync": "Remove this Project Issue Sync",
+    "remove_project_issue_sync_confirmation": "Are you sure you want to remove this project issue sync?",
+    "ISSUE_OPEN": "Issue Open",
+    "ISSUE_CLOSED": "Issue Closed",
+    "save": "Save",
+    "start_sync": "Start Sync",
+    "choose_repository": "Choose Repository..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Connect and sync your Gitlab Enterprise instance with Plane.",
+    "app_form_title": "Gitlab Enterprise Configuration",
+    "app_form_description": "Configure Gitlab Enterprise to connect with Plane.",
+    "base_url_title": "Base URL",
+    "base_url_description": "The base URL of your Gitlab Enterprise instance.",
+    "base_url_placeholder": "e.g., \"https://glab.plane.town\"",
+    "base_url_error": "Base URL is required",
+    "invalid_base_url_error": "Invalid base URL",
+    "client_id_title": "App ID",
+    "client_id_description": "The app ID of the app you created in your Gitlab Enterprise instance.",
+    "client_id_placeholder": "e.g., \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "App ID is required",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "The client secret of the app you created in your Gitlab Enterprise instance.",
+    "client_secret_placeholder": "e.g., \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret is required",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "A random webhook secret that will be used to verify the webhook from Gitlab Enterprise instance.",
+    "webhook_secret_placeholder": "e.g., \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret is required",
+    "connect_app": "Connect App"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Connect your Slack workspace with Plane.",
+    "connect_personal_account": "Connect your personal Slack account with Plane.",
+    "personal_account_connected": "Your personal {providerName} account is now connected to Plane.",
+    "link_personal_account": "Link your personal {providerName} account to Plane.",
+    "connected_slack_workspaces": "Connected Slack workspaces",
+    "connected_on": "Connected on {date}",
+    "disconnect_workspace": "Disconnect {name} workspace",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Get notified in Slack DMs for important updates, reminders, and alerts just for you."
+      }
+    },
+    "project_updates": {
+      "title": "Project Notifications",
+      "description": "Configure Slack channels for project notifications",
+      "add_new_project_update": "Add new project notifications",
+      "project_updates_empty_state": "Projects connected with Slack Channels will appear here.",
+      "project_updates_form": {
+        "title": "Configure Slack Channel",
+        "description": "Receive project notifications in selected Slack channel when work item is created",
+        "failed_to_load_channels": "Failed to load channels from Slack",
+        "project_dropdown": {
+          "placeholder": "Select a project",
+          "label": "Plane Project",
+          "no_projects": "No projects available"
+        },
+        "channel_dropdown": {
+          "label": "Slack Channel",
+          "placeholder": "Select a channel",
+          "no_channels": "No channels available"
+        },
+        "all_projects_connected": "All projects are already connected to Slack channels.",
+        "all_channels_connected": "All Slack channels are already connected to projects.",
+        "project_connection_success": "Project connection created successfully",
+        "project_connection_updated": "Project connection updated successfully",
+        "project_connection_deleted": "Project connection deleted successfully",
+        "failed_delete_project_connection": "Failed to delete project connection",
+        "failed_create_project_connection": "Failed to create project connection",
+        "failed_upserting_project_connection": "Failed to upsert project connection",
+        "failed_loading_project_connections": "We couldn't load your project connections. This could be due to a network issue or a problem with the integration."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Connect your Sentry workspace with Plane.",
+    "connected_sentry_workspaces": "Connected Sentry workspaces",
+    "connected_on": "Connected on {date}",
+    "disconnect_workspace": "Disconnect {name} workspace",
+    "state_mapping": {
+      "title": "State Mapping",
+      "description": "Map Sentry issue states to your project states. Configure which states to use when a Sentry issue is resolved or unresolved.",
+      "add_new_state_mapping": "Add new state mapping",
+      "empty_state": "No state mappings configured. Create your first mapping to sync Sentry issue states with your project states.",
+      "failed_loading_state_mappings": "We couldn't load your state mappings. This could be due to a network issue or a problem with the integration.",
+      "loading_project_states": "Loading project states...",
+      "error_loading_states": "Error loading states",
+      "no_states_available": "No states available",
+      "no_permission_states": "You don't have permission to access states for this project",
+      "states_not_found": "Project states not found",
+      "server_error_states": "Server error while loading states"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Connect and sync your Bitbucket Data Center repositories with Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Validate external IdP tokens for API access.",
+    "header_description": "Validate externally-issued OIDC/JWT tokens from your IdP (Azure AD, Okta, etc.) for Plane API access.",
+    "connected": "Connected",
+    "connect": "Connect",
+    "uninstall": "Uninstall",
+    "uninstalling": "Uninstalling...",
+    "install_success": "OAuth Bridge installed successfully.",
+    "install_error": "Failed to install OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge uninstalled.",
+    "uninstall_error": "Failed to uninstall OAuth Bridge.",
+    "token_providers": "Token Providers",
+    "token_providers_description": "Configure external IdPs whose JWTs are accepted as API credentials.",
+    "add_provider": "Add provider",
+    "edit_provider": "Edit Provider",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "test": "Test",
+    "no_providers_title": "No providers configured.",
+    "no_providers_description": "Add an IdP to enable external token authentication.",
+    "provider_updated": "Provider updated.",
+    "provider_added": "Provider added.",
+    "provider_save_error": "Failed to save provider.",
+    "provider_deleted": "Provider deleted.",
+    "provider_delete_error": "Failed to delete provider.",
+    "provider_update_error": "Failed to update provider.",
+    "jwks_reachable": "JWKS Reachable",
+    "jwks_unreachable": "JWKS Unreachable",
+    "jwks_test_error": "Could not fetch JWKS from the configured URL.",
+    "provider_form": {
+      "name_label": "Name",
+      "name_placeholder": "e.g. Azure AD Production",
+      "name_description": "Human-readable label for this identity provider",
+      "name_required": "Name is required.",
+      "issuer_label": "Issuer",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Expected iss claim value in the JWT",
+      "issuer_required": "Issuer is required.",
+      "jwks_url_label": "JWKS URL",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "HTTPS endpoint serving the provider's JSON Web Key Set",
+      "jwks_url_required": "JWKS URL is required.",
+      "jwks_url_https": "JWKS URL must use HTTPS.",
+      "audience_label": "Audience",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Expected aud claim(s) in the JWT, comma-separated.",
+      "user_claims_label": "User claims",
+      "user_claims_placeholder": "email, preferred_username, upn",
+      "user_claims_description": "Comma-separated JWT claims to match against the Plane email (first match wins)",
+      "user_claims_required": "At least one user claim is required.",
+      "allowed_algorithms_label": "Allowed signing algorithms",
+      "allowed_algorithms_description": "Asymmetric algorithms accepted for JWT signature verification",
+      "allowed_algorithms_required": "At least one algorithm is required.",
+      "select_algorithms": "Select algorithms",
+      "jwks_cache_ttl_label": "JWKS cache TTL (seconds)",
+      "jwks_cache_ttl_description": "How long to cache the provider's JWKS keys (minimum 60s, default 24 hours)",
+      "jwks_cache_ttl_min": "Cache TTL must be at least 60 seconds.",
+      "rate_limit_label": "Rate limit",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Request throttle as count/period (e.g. 120/minute). Leave blank for the default rate limit.",
+      "enable_provider": "Enable this provider",
+      "saving": "Saving...",
+      "update": "Update"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Connect and sync your GitHub Enterprise organization with Plane.",
+    "app_form_title": "GitHub Enterprise Configuration",
+    "app_form_description": "Configure GitHub Enterprise to connect with Plane.",
+    "app_id_title": "App ID",
+    "app_id_description": "The ID of the app you created in your GitHub Enterprise organization.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID is required",
+    "app_name_title": "App Slug",
+    "app_name_description": "The slug of the app you created in your GitHub Enterprise organization.",
+    "app_name_error": "App slug is required",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "Base URL",
+    "base_url_description": "The base URL of your GitHub Enterprise organization.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "Base URL is required",
+    "invalid_base_url_error": "Invalid base URL",
+    "client_id_title": "Client ID",
+    "client_id_description": "The client ID of the app you created in your GitHub Enterprise organization.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "Client ID is required",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "The client secret of the app you created in your GitHub Enterprise organization.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Client secret is required",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "The webhook secret of the app you created in your GitHub Enterprise organization.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Webhook secret is required",
+    "private_key_title": "Private Key (Base64 encoded)",
+    "private_key_description": "Base64 encoded private key of the app you created in your GitHub Enterprise organization.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Private key is required",
+    "connect_app": "Connect App"
+  },
+  "silo_errors": {
+    "invalid_query_params": "The provided query parameters are invalid or missing required fields",
+    "invalid_installation_account": "The installation account provided is not valid",
+    "generic_error": "An unexpected error occurred while processing your request",
+    "connection_not_found": "The requested connection could not be found",
+    "multiple_connections_found": "Multiple connections were found when only one was expected",
+    "cannot_create_multiple_connections": "You have already connected your organization with a workspace. Please disconnect the existing connection before connecting a new one.",
+    "installation_not_found": "The requested installation could not be found",
+    "user_not_found": "The requested user could not be found",
+    "error_fetching_token": "Failed to fetch authentication token",
+    "invalid_app_credentials": "The provided app credentials are invalid",
+    "invalid_app_installation_id": "Failed to install the app"
+  },
+  "import_status": {
+    "queued": "Queued",
+    "created": "Created",
+    "initiated": "Initiated",
+    "pulling": "Pulling",
+    "timed_out": "Timed Out",
+    "pulled": "Pulled",
+    "progressing": "Progressing",
+    "transforming": "Transforming",
+    "transformed": "Transformed",
+    "pushing": "Pushing",
+    "finished": "Finished",
+    "error": "Error",
+    "cancelled": "Cancelled"
+  }
+}
diff --git a/packages/i18n/src/locales/en/module.json b/packages/i18n/src/locales/en/module.json
new file mode 100644
index 0000000..bde96b5
--- /dev/null
+++ b/packages/i18n/src/locales/en/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Module} other {Modules}}",
+    "no_module": "No module",
+    "select": "Add modules"
+  }
+}
diff --git a/packages/i18n/src/locales/en/navigation.json b/packages/i18n/src/locales/en/navigation.json
new file mode 100644
index 0000000..883e981
--- /dev/null
+++ b/packages/i18n/src/locales/en/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "No results found"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Stickies",
+    "your_work": "Your work",
+    "projects": "Projects",
+    "pages": "Pages",
+    "new_work_item": "New work item",
+    "home": "Home",
+    "inbox": "Inbox",
+    "workspace": "Workspace",
+    "views": "Views",
+    "analytics": "Analytics",
+    "work_items": "Work items",
+    "cycles": "Cycles",
+    "modules": "Modules",
+    "intake": "Intake",
+    "drafts": "Drafts",
+    "favorites": "Favorites",
+    "pro": "Pro",
+    "upgrade": "Upgrade",
+    "pi_chat": "Plane AI",
+    "epics": "Epics",
+    "upgrade_plan": "Upgrade plan",
+    "plane_pro": "Plane Pro",
+    "business": "Business"
+  }
+}
diff --git a/packages/i18n/src/locales/en/notification.json b/packages/i18n/src/locales/en/notification.json
new file mode 100644
index 0000000..a32c1d3
--- /dev/null
+++ b/packages/i18n/src/locales/en/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Inbox",
+    "page_label": "{workspace} - Inbox",
+    "options": {
+      "mark_all_as_read": "Mark all as read",
+      "mark_read": "Mark as read",
+      "mark_unread": "Mark as unread",
+      "refresh": "Refresh",
+      "filters": "Inbox Filters",
+      "show_unread": "Show unread",
+      "show_snoozed": "Show snoozed",
+      "show_archived": "Show archived",
+      "mark_archive": "Archive",
+      "mark_unarchive": "Un archive",
+      "mark_snooze": "Snooze",
+      "mark_unsnooze": "Un snooze"
+    },
+    "toasts": {
+      "read": "Notification marked as read",
+      "unread": "Notification marked as unread",
+      "archived": "Notification marked as archived",
+      "unarchived": "Notification marked as un archived",
+      "snoozed": "Notification snoozed",
+      "unsnoozed": "Notification un snoozed"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Select to view details."
+      },
+      "all": {
+        "title": "No work items assigned",
+        "description": "Updates for work items assigned to you can be\n seen here"
+      },
+      "mentions": {
+        "title": "No work items assigned",
+        "description": "Updates for work items assigned to you can be\n seen here"
+      }
+    },
+    "tabs": {
+      "all": "All",
+      "mentions": "Mentions"
+    },
+    "filter": {
+      "assigned": "Assigned to me",
+      "created": "Created by me",
+      "subscribed": "Subscribed by me"
+    },
+    "snooze": {
+      "1_day": "1 day",
+      "3_days": "3 days",
+      "5_days": "5 days",
+      "1_week": "1 week",
+      "2_weeks": "2 weeks",
+      "custom": "Custom"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/page.json b/packages/i18n/src/locales/en/page.json
new file mode 100644
index 0000000..ca2a384
--- /dev/null
+++ b/packages/i18n/src/locales/en/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Outline",
+        "empty_state": {
+          "title": "Missing headings",
+          "description": "Let's put some headings in this page to see them here."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Words",
+          "characters": "Characters",
+          "paragraphs": "Paragraphs",
+          "read_time": "Read time"
+        },
+        "actors_info": {
+          "edited_by": "Edited by",
+          "created_by": "Created by"
+        },
+        "version_history": {
+          "label": "Version history",
+          "current_version": "Current version",
+          "highlight_changes": "Highlight changes"
+        }
+      },
+      "assets": {
+        "label": "Assets",
+        "download_button": "Download",
+        "empty_state": {
+          "title": "Missing images",
+          "description": "Add images to see them here."
+        }
+      },
+      "comments": {
+        "label": "Comments",
+        "empty_state": {
+          "title": "No comments",
+          "description": "Add comments to see them here."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "The sticky name cannot be longer than 100 characters.",
+        "already_exists": "There already exists a sticky with no description"
+      },
+      "created": {
+        "title": "Sticky created",
+        "message": "The sticky has been successfully created"
+      },
+      "not_created": {
+        "title": "Sticky not created",
+        "message": "The sticky could not be created"
+      },
+      "updated": {
+        "title": "Sticky updated",
+        "message": "The sticky has been successfully updated"
+      },
+      "not_updated": {
+        "title": "Sticky not updated",
+        "message": "The sticky could not be updated"
+      },
+      "removed": {
+        "title": "Sticky removed",
+        "message": "The sticky has been successfully removed"
+      },
+      "not_removed": {
+        "title": "Sticky not removed",
+        "message": "The sticky could not be removed"
+      }
+    },
+    "open_button": "Open navigation pane",
+    "close_button": "Close navigation pane",
+    "outline_floating_button": "Open outline"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Move",
+        "loading": "Moving"
+      },
+      "cannot_move_to_teamspace": "Private and shared pages cannot be moved to a teamspace.",
+      "placeholders": {
+        "workspace_to_all": "Search for projects and teamspaces",
+        "workspace_to_project": "Search for projects",
+        "project_to_all": "Search for projects and teamspaces",
+        "project_to_project": "Search for projects",
+        "project_to_all_with_wiki": "Search for wiki collections, projects, and teamspaces",
+        "project_to_project_with_wiki": "Search for wiki collections and projects"
+      },
+      "toasts": {
+        "success": {
+          "title": "Success!",
+          "message": "Page moved successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Page could not be moved. Please try again later."
+        },
+        "collection_error": {
+          "title": "Moved to wiki",
+          "message": "Page was moved to wiki, but could not be added to the selected collection. It remains in General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Remove from collection",
+      "success_message": "Page removed from collection.",
+      "error_message": "Page could not be removed from the collection. Please try again."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Content limit reached and live sync is off. Create a new page or use nested pages to continue syncing."
+  }
+}
diff --git a/packages/i18n/src/locales/en/power-k.json b/packages/i18n/src/locales/en/power-k.json
new file mode 100644
index 0000000..c00d2e5
--- /dev/null
+++ b/packages/i18n/src/locales/en/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Bulk delete work items"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Work item actions",
+        "indicator": "Work item",
+        "change_state": "Change state",
+        "change_priority": "Change priority",
+        "change_assignees": "Assign to",
+        "assign_to_me": "Assign to me",
+        "unassign_from_me": "Un-assign from me",
+        "change_estimate": "Change estimate",
+        "add_to_cycle": "Add to cycle",
+        "add_to_modules": "Add to modules",
+        "add_labels": "Add labels",
+        "subscribe": "Subscribe to notifications",
+        "unsubscribe": "Unsubscribe from notifications",
+        "delete": "Delete",
+        "copy_id": "Copy ID",
+        "copy_id_toast_success": "Work item ID copied to clipboard.",
+        "copy_id_toast_error": "Some error occurred while copying the work item ID to clipboard.",
+        "copy_title": "Copy title",
+        "copy_title_toast_success": "Work item title copied to clipboard.",
+        "copy_title_toast_error": "Some error occurred while copying the work item title to clipboard.",
+        "copy_url": "Copy URL",
+        "copy_url_toast_success": "Work item URL copied to clipboard.",
+        "copy_url_toast_error": "Some error occurred while copying the work item URL to clipboard."
+      },
+      "cycle": {
+        "title": "Cycle actions",
+        "indicator": "Cycle",
+        "add_to_favorites": "Add to favorites",
+        "remove_from_favorites": "Remove from favorites",
+        "copy_url": "Copy URL",
+        "copy_url_toast_success": "Cycle URL copied to clipboard.",
+        "copy_url_toast_error": "Some error occurred while copying the cycle URL to clipboard."
+      },
+      "module": {
+        "title": "Module actions",
+        "indicator": "Module",
+        "add_remove_members": "Add/remove members",
+        "change_status": "Change status",
+        "add_to_favorites": "Add to favorites",
+        "remove_from_favorites": "Remove from favorites",
+        "copy_url": "Copy URL",
+        "copy_url_toast_success": "Module URL copied to clipboard.",
+        "copy_url_toast_error": "Some error occurred while copying the module URL to clipboard."
+      },
+      "page": {
+        "title": "Page actions",
+        "indicator": "Page",
+        "lock": "Lock",
+        "unlock": "Unlock",
+        "make_private": "Make private",
+        "make_public": "Make public",
+        "archive": "Archive",
+        "restore": "Restore",
+        "add_to_favorites": "Add to favorites",
+        "remove_from_favorites": "Remove from favorites",
+        "copy_url": "Copy URL",
+        "copy_url_toast_success": "Page URL copied to clipboard.",
+        "copy_url_toast_error": "Some error occurred while copying the page URL to clipboard."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "New work item",
+      "create_page": "New page",
+      "create_view": "New view",
+      "create_cycle": "New cycle",
+      "create_module": "New module",
+      "create_project": "New project",
+      "create_workspace": "New workspace",
+      "create_project_automation": "New automation"
+    },
+    "navigation_actions": {
+      "open_workspace": "Open a workspace",
+      "nav_home": "Go to home",
+      "nav_inbox": "Go to inbox",
+      "nav_your_work": "Go to your work",
+      "nav_account_settings": "Go to account settings",
+      "open_project": "Open a project",
+      "nav_projects_list": "Go to projects list",
+      "nav_all_workspace_work_items": "Go to all work items",
+      "nav_assigned_workspace_work_items": "Go to assigned work items",
+      "nav_created_workspace_work_items": "Go to created work items",
+      "nav_subscribed_workspace_work_items": "Go to subscribed work items",
+      "nav_workspace_analytics": "Go to workspace analytics",
+      "nav_workspace_drafts": "Go to workspace drafts",
+      "nav_workspace_archives": "Go to workspace archives",
+      "open_workspace_setting": "Open a workspace setting",
+      "nav_workspace_settings": "Go to workspace settings",
+      "nav_project_work_items": "Go to work items",
+      "open_project_cycle": "Open a cycle",
+      "nav_project_cycles": "Go to cycles",
+      "open_project_module": "Open a module",
+      "nav_project_modules": "Go to modules",
+      "open_project_view": "Open a project view",
+      "nav_project_views": "Go to project views",
+      "nav_project_pages": "Go to pages",
+      "nav_project_intake": "Go to intake",
+      "nav_project_archives": "Go to project archives",
+      "open_project_setting": "Open a project setting",
+      "nav_project_settings": "Go to project settings",
+      "nav_workspace_active_cycle": "Go to all active cycles",
+      "nav_project_overview": "Go to project overview"
+    },
+    "account_actions": {
+      "sign_out": "Sign out",
+      "workspace_invites": "Workspace invites"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Toggle app sidebar",
+      "copy_current_page_url": "Copy current page URL",
+      "copy_current_page_url_toast_success": "Current page URL copied to clipboard.",
+      "copy_current_page_url_toast_error": "Some error occurred while copying the current page URL to clipboard.",
+      "focus_top_nav_search": "Focus search input"
+    },
+    "preferences_actions": {
+      "update_theme": "Change interface theme",
+      "update_timezone": "Change timezone",
+      "update_start_of_week": "Change first day of week",
+      "update_language": "Change interface language",
+      "toast": {
+        "theme": {
+          "success": "Theme updated successfully.",
+          "error": "Failed to update theme. Please try again."
+        },
+        "timezone": {
+          "success": "Timezone updated successfully.",
+          "error": "Failed to update timezone. Please try again."
+        },
+        "generic": {
+          "success": "Preferences updated successfully.",
+          "error": "Failed to update preferences. Please try again."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Open keyboard shortcuts",
+      "open_plane_documentation": "Open Plane documentation",
+      "join_forum": "Join our Forum",
+      "report_bug": "Report a bug",
+      "chat_with_us": "Chat with us"
+    },
+    "page_placeholders": {
+      "default": "Type a command or search",
+      "open_workspace": "Open a workspace",
+      "open_project": "Open a project",
+      "open_workspace_setting": "Open a workspace setting",
+      "open_project_cycle": "Open a cycle",
+      "open_project_module": "Open a module",
+      "open_project_view": "Open a project view",
+      "open_project_setting": "Open a project setting",
+      "update_work_item_state": "Change state",
+      "update_work_item_priority": "Change priority",
+      "update_work_item_assignee": "Assign to",
+      "update_work_item_estimate": "Change estimate",
+      "update_work_item_cycle": "Add to cycle",
+      "update_work_item_module": "Add to modules",
+      "update_work_item_labels": "Add labels",
+      "update_module_member": "Change members",
+      "update_module_status": "Change status",
+      "update_theme": "Change theme",
+      "update_timezone": "Change timezone",
+      "update_start_of_week": "Change first day of week",
+      "update_language": "Change language"
+    },
+    "search_menu": {
+      "no_results": "No results found",
+      "clear_search": "Clear search",
+      "go_to_advanced_search": "Go to advanced search"
+    },
+    "footer": {
+      "workspace_level": "Workspace level"
+    },
+    "group_titles": {
+      "actions": "Actions",
+      "contextual": "Contextual",
+      "navigation": "Navigate",
+      "create": "Create",
+      "general": "General",
+      "settings": "Settings",
+      "account": "Account",
+      "miscellaneous": "Miscellaneous",
+      "preferences": "Preferences",
+      "help": "Help"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/project-settings.json b/packages/i18n/src/locales/en/project-settings.json
new file mode 100644
index 0000000..b6ccb9c
--- /dev/null
+++ b/packages/i18n/src/locales/en/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Enter project ID",
+      "please_select_a_timezone": "Please select a timezone",
+      "archive_project": {
+        "title": "Archive project",
+        "description": "Archiving a project will unlist your project from your side navigation although you will still be able to access it from your projects page. You can restore the project or delete it whenever you want.",
+        "button": "Archive project"
+      },
+      "delete_project": {
+        "title": "Delete project",
+        "description": "When deleting a project, all of the data and resources within that project will be permanently removed and cannot be recovered.",
+        "button": "Delete my project"
+      },
+      "toast": {
+        "success": "Project updated successfully",
+        "error": "Project could not be updated. Please try again."
+      }
+    },
+    "members": {
+      "label": "Members",
+      "project_lead": "Project lead",
+      "project_lead_description": "Select the project lead for the project.",
+      "default_assignee": "Default assignee",
+      "default_assignee_description": "Select the default assignee for the project.",
+      "project_subscribers": "Project subscribers",
+      "project_subscribers_description": "Select members who will receive notifications for this project.",
+      "guest_super_permissions": {
+        "title": "Grant view access to all work items for guest users:",
+        "sub_heading": "This will allow guests to have view access to all the project work items."
+      },
+      "invite_members": {
+        "title": "Invite members",
+        "sub_heading": "Invite members to work on your project.",
+        "select_co_worker": "Select co-worker"
+      }
+    },
+    "states": {
+      "heading": "States",
+      "description": "Define and customize workflow states to track the progress of your work items.",
+      "describe_this_state_for_your_members": "Describe this state for your members.",
+      "empty_state": {
+        "title": "No states available for the {groupKey} group",
+        "description": "Please create a new state"
+      }
+    },
+    "labels": {
+      "heading": "Labels",
+      "description": "Create custom labels to categorize and organize your work items",
+      "label_title": "Label title",
+      "label_title_is_required": "Label title is required",
+      "label_max_char": "Label name should not exceed 255 characters",
+      "toast": {
+        "error": "Error while updating the label"
+      }
+    },
+    "estimates": {
+      "heading": "Estimates",
+      "description": "Set up estimation systems to track and communicate the effort required for each work item.",
+      "label": "Estimates",
+      "title": "Enable estimates for my project",
+      "enable_description": "They help you in communicating complexity and workload of the team.",
+      "no_estimate": "No estimate",
+      "new": "New estimate system",
+      "create": {
+        "custom": "Custom",
+        "start_from_scratch": "Start from scratch",
+        "choose_template": "Choose a template",
+        "choose_estimate_system": "Choose an estimate system",
+        "enter_estimate_point": "Enter estimate",
+        "step": "Step {step} of {total}",
+        "label": "Create estimate"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Estimate created",
+            "message": "The estimate has been created successfully"
+          },
+          "error": {
+            "title": "Estimate creation failed",
+            "message": "We were unable to create the new estimate, please try again."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Estimate modified",
+            "message": "The estimate has been updated in your project."
+          },
+          "error": {
+            "title": "Estimate modification failed",
+            "message": "We were unable to modify the estimate, please try again"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Success!",
+            "message": "Estimates have been enabled."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Success!",
+            "message": "Estimates have been disabled."
+          },
+          "error": {
+            "title": "Error!",
+            "message": "Estimate could not be disabled. Please try again"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Estimates re-ordered",
+            "message": "Estimates have been re-ordered in your project."
+          },
+          "error": {
+            "title": "Estimate re-order failed",
+            "message": "We were unable to re-order the estimates, please try again"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Estimate system created",
+            "message": "Created and Enabled successfully"
+          },
+          "error": {
+            "title": "Error",
+            "message": "Something went wrong"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Estimate needs to be greater than 0.",
+        "unable_to_process": "We are unable to process your request, please try again.",
+        "numeric": "Estimate needs to be a numeric value.",
+        "character": "Estimate needs to be a character value.",
+        "empty": "Estimate value cannot be empty.",
+        "already_exists": "Estimate value already exists.",
+        "unsaved_changes": "You have some unsaved changes, Please save them before clicking on done",
+        "remove_empty": "Estimate can't be empty. Enter a value in each field or remove those you don't have values for.",
+        "fill": "Please fill this estimate field",
+        "repeat": "Estimate value cannot be repeated"
+      },
+      "systems": {
+        "points": {
+          "label": "Points",
+          "fibonacci": "Fibonacci",
+          "linear": "Linear",
+          "squares": "Squares",
+          "custom": "Custom"
+        },
+        "categories": {
+          "label": "Categories",
+          "t_shirt_sizes": "T-Shirt Sizes",
+          "easy_to_hard": "Easy to hard",
+          "custom": "Custom"
+        },
+        "time": {
+          "label": "Time",
+          "hours": "Hours"
+        }
+      },
+      "edit": {
+        "title": "Edit estimate system",
+        "add_or_update": {
+          "title": "Add, update or remove estimates",
+          "description": "Manage current system either adding, updating or removing the points or categories."
+        },
+        "switch": {
+          "title": "Change estimate type",
+          "description": "Convert your points system to categories system and vice versa."
+        }
+      },
+      "switch": "Switch estimate system",
+      "current": "Current estimate system",
+      "select": "Select an estimate system"
+    },
+    "automations": {
+      "label": "Automations",
+      "heading": "Automations",
+      "description": "Configure automated actions to streamline your project management workflow and reduce manual tasks.",
+      "auto-archive": {
+        "title": "Auto-archive closed work items",
+        "description": "Plane will auto archive work items that have been completed or canceled.",
+        "duration": "Auto-archive work items that are closed for"
+      },
+      "auto-close": {
+        "title": "Auto-close work items",
+        "description": "Plane will automatically close work items that haven't been completed or canceled.",
+        "duration": "Auto-close work items that are inactive for",
+        "auto_close_status": "Auto-close status"
+      },
+      "auto-remind": {
+        "title": "Auto-reminders",
+        "description": "Plane will automatically send reminders via email and in-app notifications to keep your team on track with deadlines.",
+        "duration": "Send reminder before"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "No labels yet",
+        "description": "Create labels to help organize and filter work items in you project."
+      },
+      "estimates": {
+        "title": "No estimate systems yet",
+        "description": "Create a set of estimates to communicate the amount of work per work item.",
+        "primary_button": "Add estimate system"
+      },
+      "integrations": {
+        "title": "No integrations configured",
+        "description": "Configure GitHub and other integrations to sync your project work items."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Enable workflows",
+        "description": "Set workflows to control work item movement",
+        "no_states_tooltip": "No states are added to the workflow.",
+        "no_work_item_types_tooltip": "No work item types are added to the workflow.",
+        "no_states_or_work_item_types_tooltip": "No states or work item types are added to the workflow.",
+        "toast": {
+          "loading": {
+            "enabling": "Enabling workflows",
+            "disabling": "Disabling workflows"
+          },
+          "success": {
+            "title": "Success!",
+            "message": "Workflows enabled successfully."
+          },
+          "error": {
+            "title": "Error!",
+            "message": "Failed to enable workflows. Please try again."
+          }
+        }
+      },
+      "heading": "Workflows",
+      "description": "Automate work item transitions and set rules to control how tasks move through your project pipeline.",
+      "add_button": "Add new workflow",
+      "search": "Search workflows",
+      "detail": {
+        "define": "Define workflow",
+        "add_states": "Add states",
+        "unmapped_states": {
+          "title": "Unmapped states detected",
+          "description": "Some work items for the selected types are currently in states that do not exist in this workflow.",
+          "note": "If you enable this workflow, these items will automatically move to the initial state for this workflow.",
+          "label": "Missing states",
+          "tooltip": "Some work items are in states that are not mapped to this workflow. Open the workflow to review."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "All states are in use",
+          "description": "All defined states for this project are already present in your current workflow."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "This workflow applies to any work item type that is not assigned to a workflow."
+      },
+      "create": {
+        "heading": "Create new workflow",
+        "name": {
+          "placeholder": "Add a unique name",
+          "validation": {
+            "max_length": "Name must be less than 255 characters",
+            "required": "Name is required",
+            "invalid": "Name can only contain letters, numbers, spaces, hyphens, and apostrophes"
+          }
+        },
+        "description": {
+          "placeholder": "Add a short description",
+          "validation": {
+            "invalid": "Description can only contain letters, numbers, spaces, hyphens, and apostrophes"
+          }
+        },
+        "work_item_type": {
+          "label": "Work item type"
+        },
+        "success": {
+          "title": "Success!",
+          "message": "Workflow created successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to create workflow. Please try again."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Success!",
+          "message": "Workflow updated successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to update workflow. Please try again."
+        }
+      },
+      "delete": {
+        "loading": "Deleting workflow",
+        "success": {
+          "title": "Success!",
+          "message": "Workflow deleted successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to delete workflow. Please try again."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Success!",
+          "message": "States added successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to add states. Please try again."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Work item Types",
+      "description": "Create and customize different types of work items with unique properties"
+    },
+    "features": {
+      "cycles": {
+        "title": "Cycles",
+        "short_title": "Cycles",
+        "description": "Schedule work in flexible periods that adapt to this project's unique rhythm and pace.",
+        "toggle_title": "Enable cycles",
+        "toggle_description": "Plan work in focused timeframes."
+      },
+      "modules": {
+        "title": "Modules",
+        "short_title": "Modules",
+        "description": "Organize work into sub-projects with dedicated leads and assignees.",
+        "toggle_title": "Enable modules",
+        "toggle_description": "Project members will be able to create and edit modules."
+      },
+      "views": {
+        "title": "Views",
+        "short_title": "Views",
+        "description": "Save custom sorts, filters, and display options or share them with your team.",
+        "toggle_title": "Enable views",
+        "toggle_description": "Project members will be able to create and edit views."
+      },
+      "pages": {
+        "title": "Pages",
+        "short_title": "Pages",
+        "description": "Create and edit free-form content; notes, docs, anything.",
+        "toggle_title": "Enable pages",
+        "toggle_description": "Project members will be able to create and edit pages."
+      },
+      "intake": {
+        "intake_responsibility": "Intake responsibility",
+        "intake_sources": "Intake sources",
+        "title": "Intake",
+        "short_title": "Intake",
+        "description": "Let non-members share bugs, feedback, and suggestions; without disrupting your workflow.",
+        "toggle_title": "Enable intake",
+        "toggle_description": "Let project members create in app intake requests.",
+        "toggle_tooltip_on": "Ask your Project Admin to turn this on.",
+        "toggle_tooltip_off": "Ask your Project Admin to turn this off.",
+        "notify_assignee": {
+          "title": "Notify assignees",
+          "description": "For a new request to intake, default assignees will be alerted via notifications"
+        },
+        "in_app": {
+          "title": "In-app",
+          "description": "Get new work items from Members and Guests in your workspace without disruption to your existing work items."
+        },
+        "email": {
+          "title": "Email",
+          "description": "Collect new work items from anyone who sends an email to a Plane email address.",
+          "fieldName": "Email ID"
+        },
+        "form": {
+          "title": "Forms",
+          "description": "Let folks outside your workspace create potential new work items for you via a dedicated and secure form.",
+          "fieldName": "Default form URL",
+          "create_forms": "Create Forms using work item types",
+          "manage_forms": "Manage forms",
+          "manage_forms_tooltip": "Ask your Workspace Admin to manage this.",
+          "create_form": "Create form",
+          "edit_form": "Edit form details",
+          "form_title": "Form title",
+          "form_title_required": "Form title is required",
+          "work_item_type": "Work item type",
+          "remove_property": "Remove property",
+          "select_properties": "Select properties",
+          "search_placeholder": "Search for properties",
+          "toasts": {
+            "success_create": "Intake form created successfully",
+            "success_update": "Intake form updated successfully",
+            "error_create": "Failed to create intake form",
+            "error_update": "Failed to update intake form"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Setting assignees...",
+            "success": {
+              "title": "Success!",
+              "message": "Assignees set successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Something went wrong while setting assignees. Please try again."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Time tracking",
+        "short_title": "Time tracking",
+        "description": "Log time spent on work items and projects.",
+        "toggle_title": "Enable time tracking",
+        "toggle_description": "Project members will be able to log time worked."
+      },
+      "milestones": {
+        "title": "Milestones",
+        "short_title": "Milestones",
+        "description": "Milestones provide a layer to align work items toward shared completion dates.",
+        "toggle_title": "Enable milestones",
+        "toggle_description": "Organize work items by milestone deadlines."
+      },
+      "toasts": {
+        "loading": "Updating project feature...",
+        "success": "Project feature updated successfully.",
+        "error": "Something went wrong while updating project feature. Please try again."
+      }
+    },
+    "project_updates": {
+      "heading": "Project Updates",
+      "description": "Consolidated tracking and progress monitoring for this project"
+    },
+    "templates": {
+      "heading": "Templates",
+      "description": "Save 80% time spent on creating projects, work items, and pages when you use templates."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Auto-schedule cycles",
+        "description": "Keep cycles moving without manual setup.",
+        "tooltip": "Automatically create new cycles based on your chosen schedule.",
+        "edit_button": "Edit",
+        "form": {
+          "cycle_title": {
+            "label": "Cycle Title",
+            "placeholder": "Title",
+            "tooltip": "The title will be appended with numbers for subsequent cycles. For eg: Design - 1/2/3",
+            "validation": {
+              "required": "Cycle title is required",
+              "max_length": "Title must not exceed 255 characters"
+            }
+          },
+          "cycle_duration": {
+            "label": "Cycle Duration",
+            "unit": "Weeks",
+            "validation": {
+              "required": "Cycle duration is required",
+              "min": "Cycle duration must be at least 1 week",
+              "max": "Cycle duration cannot exceed 30 weeks",
+              "positive": "Cycle duration must be positive"
+            }
+          },
+          "cooldown_period": {
+            "label": "Cooldown Period",
+            "unit": "days",
+            "tooltip": "Pause between cycles before the next begins.",
+            "validation": {
+              "required": "Cooldown period is required",
+              "negative": "Cooldown period cannot be negative"
+            }
+          },
+          "start_date": {
+            "label": "Cycle starts day",
+            "validation": {
+              "required": "Start date is required",
+              "past": "Start date cannot be in the past"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Number of future cycles",
+            "validation": {
+              "required": "Number of cycles is required",
+              "min": "At least 1 cycle is required",
+              "max": "Cannot schedule more than 3 cycles"
+            }
+          },
+          "auto_rollover": {
+            "label": "Auto-rollover work items",
+            "tooltip": "On the day a cycle completes, move all unfinished work items into the next cycle."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Enabling auto-schedule cycles",
+            "loading_disable": "Disabling auto-schedule cycles",
+            "success": {
+              "title": "Success!",
+              "message": "Auto-schedule cycles toggled successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to toggle auto-schedule cycles."
+            }
+          },
+          "save": {
+            "loading": "Saving auto-schedule cycles configuration",
+            "success": {
+              "title": "Success!",
+              "message_create": "Auto-schedule cycles configuration saved successfully.",
+              "message_update": "Auto-schedule cycles configuration updated successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message_create": "Failed to save auto-schedule cycles configuration.",
+              "message_update": "Failed to update auto-schedule cycles configuration."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/project.json b/packages/i18n/src/locales/en/project.json
new file mode 100644
index 0000000..fa6be60
--- /dev/null
+++ b/packages/i18n/src/locales/en/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Created at",
+      "updated_at": "Updated at",
+      "name": "Name"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Add cycle",
+    "more_details": "More details",
+    "cycle": "Cycle",
+    "update_cycle": "Update cycle",
+    "create_cycle": "Create cycle",
+    "no_matching_cycles": "No matching cycles",
+    "remove_filters_to_see_all_cycles": "Remove the filters to see all cycles",
+    "remove_search_criteria_to_see_all_cycles": "Remove the search criteria to see all cycles",
+    "only_completed_cycles_can_be_archived": "Only completed cycles can be archived",
+    "start_date": "Start date",
+    "end_date": "End date",
+    "in_your_timezone": "In your timezone",
+    "transfer_work_items": "Transfer {count} work items",
+    "transfer": {
+      "no_cycles_available": "No other cycles available to transfer work items to."
+    },
+    "date_range": "Date range",
+    "add_date": "Add date",
+    "active_cycle": {
+      "label": "Active cycle",
+      "progress": "Progress",
+      "chart": "Burndown chart",
+      "priority_issue": "Priority work items",
+      "assignees": "Assignees",
+      "issue_burndown": "Work item burndown",
+      "ideal": "Ideal",
+      "current": "Current",
+      "labels": "Labels",
+      "trailing": "Trailing",
+      "leading": "Leading"
+    },
+    "upcoming_cycle": {
+      "label": "Upcoming cycle"
+    },
+    "completed_cycle": {
+      "label": "Completed cycle"
+    },
+    "status": {
+      "days_left": "Days left",
+      "completed": "Completed",
+      "yet_to_start": "Yet to start",
+      "in_progress": "In progress",
+      "draft": "Draft"
+    },
+    "action": {
+      "restore": {
+        "title": "Restore cycle",
+        "success": {
+          "title": "Cycle restored",
+          "description": "The cycle has been restored."
+        },
+        "failed": {
+          "title": "Cycle restore failed",
+          "description": "The cycle could not be restored. Please try again."
+        }
+      },
+      "favorite": {
+        "loading": "Adding cycle to favorites",
+        "success": {
+          "description": "Cycle added to favorites.",
+          "title": "Success!"
+        },
+        "failed": {
+          "description": "Couldn't add the cycle to favorites. Please try again.",
+          "title": "Error!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Removing cycle from favorites",
+        "success": {
+          "description": "Cycle removed from favorites.",
+          "title": "Success!"
+        },
+        "failed": {
+          "description": "Couldn't remove the cycle from favorites. Please try again.",
+          "title": "Error!"
+        }
+      },
+      "update": {
+        "loading": "Updating cycle",
+        "success": {
+          "description": "Cycle updated successfully.",
+          "title": "Success!"
+        },
+        "failed": {
+          "description": "Error updating the cycle. Please try again.",
+          "title": "Error!"
+        },
+        "error": {
+          "already_exists": "You already have a cycle on the given dates, if you want to create a draft cycle, you can do that by removing both the dates."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Group and timebox your work in Cycles.",
+        "description": "Break work down by timeboxed chunks, work backwards from your project deadline to set dates, and make tangible progress as a team.",
+        "primary_button": {
+          "text": "Set your first cycle",
+          "comic": {
+            "title": "Cycles are repetitive time-boxes.",
+            "description": "A sprint, an iteration, and or any other term you use for weekly or fortnightly tracking of work is a cycle."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "No work items added to the cycle",
+        "description": "Add or create work items you wish to timebox and deliver within this cycle",
+        "primary_button": {
+          "text": "Create new work item"
+        },
+        "secondary_button": {
+          "text": "Add existing work item"
+        }
+      },
+      "completed_no_issues": {
+        "title": "No work items in the cycle",
+        "description": "No work items in the cycle. Work items are either transferred or hidden. To see hidden work items if any, update your display properties accordingly."
+      },
+      "active": {
+        "title": "No active cycle",
+        "description": "An active cycle includes any period that encompasses today's date within its range. Find the progress and details of the active cycle here."
+      },
+      "archived": {
+        "title": "No archived cycles yet",
+        "description": "To tidy up your project, archive completed cycles. Find them here once archived."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Save filtered views for your project. Create as many as you need",
+        "description": "Views are a set of saved filters that you use frequently or want easy access to. All your colleagues in a project can see everyone's views and choose whichever suits their needs best.",
+        "primary_button": {
+          "text": "Create your first view",
+          "comic": {
+            "title": "Views work atop Work item properties.",
+            "description": "You can create a view from here with as many properties as filters as you see fit."
+          }
+        },
+        "filter": {
+          "title": "No matching views",
+          "description": "No views match the search criteria.\n Create a new view instead."
+        }
+      },
+      "no_archived_issues": {
+        "title": "No archived work items yet",
+        "description": "Manually or through automation, you can archive work items that are completed or cancelled. Find them here once archived.",
+        "primary_button": {
+          "text": "Set automation"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "No work items found matching the filters applied",
+        "secondary_button": {
+          "text": "Clear all filters"
+        }
+      },
+      "public": {
+        "title": "No public pages yet",
+        "description": "See pages shared with everyone in your project right here.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "archived": {
+        "title": "No archived pages yet",
+        "description": "Archive pages not on your radar. Access them here when needed."
+      },
+      "shared": {
+        "title": "No shared pages yet",
+        "description": "Pages that others have shared with you will appear here."
+      }
+    },
+    "delete_view": {
+      "title": "Are you sure you want to delete this view?",
+      "content": "If you confirm, all the sort, filter, and display options + the layout you have chosen for this view will be permanently deleted without any way to restore them."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Create a work item and assign it to someone, even yourself",
+        "description": "Think of work items as jobs, tasks, work, or JTBD. Which we like. A work item and its sub-work items are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes work items to move your project towards its goal.",
+        "primary_button": {
+          "text": "Create your first work item",
+          "comic": {
+            "title": "Work items are building blocks in Plane.",
+            "description": "Redesign the Plane UI, Rebrand the company, or Launch the new fuel injection system are examples of work items that likely have sub-work items."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "No archived work items yet",
+        "description": "Manually or through automation, you can archive work items that are completed or cancelled. Find them here once archived.",
+        "primary_button": {
+          "text": "Set automation"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "No work items found matching the filters applied",
+        "secondary_button": {
+          "text": "Clear all filters"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Add Module",
+    "update_module": "Update Module",
+    "create_module": "Create Module",
+    "archive_module": "Archive Module",
+    "restore_module": "Restore Module",
+    "delete_module": "Delete module",
+    "empty_state": {
+      "general": {
+        "title": "Map your project milestones to Modules and track aggregated work easily.",
+        "description": "A group of work items that belong to a logical, hierarchical parent form a module. Think of them as a way to track work by project milestones. They have their own periods and deadlines as well as analytics to help you see how close or far you are from a milestone.",
+        "primary_button": {
+          "text": "Build your first module",
+          "comic": {
+            "title": "Modules help group work by hierarchy.",
+            "description": "A cart module, a chassis module, and a warehouse module are all good example of this grouping."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "No work items in the module",
+        "description": "Create or add work items which you want to accomplish as part of this module",
+        "primary_button": {
+          "text": "Create new work items"
+        },
+        "secondary_button": {
+          "text": "Add an existing work item"
+        }
+      },
+      "archived": {
+        "title": "No archived Modules yet",
+        "description": "To tidy up your project, archive completed or cancelled modules. Find them here once archived."
+      },
+      "sidebar": {
+        "in_active": "This module isn't active yet.",
+        "invalid_date": "Invalid date. Please enter valid date."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Archive module",
+      "archive_module_description": "Only completed or canceled\nmodule can be archived.",
+      "delete_module": "Delete module"
+    },
+    "toast": {
+      "copy": {
+        "success": "Module link copied to clipboard"
+      },
+      "delete": {
+        "success": "Module deleted successfully",
+        "error": "Failed to delete module"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Write a note, a doc, or a full knowledge base. Get Galileo, Plane's AI assistant, to help you get started",
+        "description": "Pages are thoughts potting space in Plane. Take down meeting notes, format them easily, embed work items, lay them out using a library of components, and keep them all in your project's context. To make short work of any doc, invoke Galileo, Plane's AI, with a shortcut or the click of a button.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "private": {
+        "title": "No private pages yet",
+        "description": "Keep your private thoughts here. When you're ready to share, the team's just a click away.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "public": {
+        "title": "No public pages yet",
+        "description": "See pages shared with everyone in your project right here.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "archived": {
+        "title": "No archived pages yet",
+        "description": "Archive pages not on your radar. Access them here when needed."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Intake is not enabled for the project.",
+        "description": "Intake helps you manage incoming requests to your project and add them as work items in your workflow. Enable intake from project settings to manage requests.",
+        "primary_button": {
+          "text": "Manage features"
+        }
+      },
+      "cycle": {
+        "title": "Cycles is not enabled for this project.",
+        "description": "Break work down by timeboxed chunks, work backwards from your project deadline to set dates, and make tangible progress as a team. Enable the cycles feature for your project to start using them.",
+        "primary_button": {
+          "text": "Manage features"
+        }
+      },
+      "module": {
+        "title": "Modules are not enabled for the project.",
+        "description": "Modules are the building blocks of your project. Enable modules from project settings to start using them.",
+        "primary_button": {
+          "text": "Manage features"
+        }
+      },
+      "page": {
+        "title": "Pages are not enabled for the project.",
+        "description": "Pages are the building blocks of your project. Enable pages from project settings to start using them.",
+        "primary_button": {
+          "text": "Manage features"
+        }
+      },
+      "view": {
+        "title": "Views are not enabled for the project.",
+        "description": "Views are the building blocks of your project. Enable views from project settings to start using them.",
+        "primary_button": {
+          "text": "Manage features"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Planned",
+      "in_progress": "In Progress",
+      "paused": "Paused",
+      "completed": "Completed",
+      "cancelled": "Cancelled"
+    },
+    "layout": {
+      "list": "List layout",
+      "board": "Gallery layout",
+      "timeline": "Timeline layout"
+    },
+    "order_by": {
+      "name": "Name",
+      "progress": "Progress",
+      "issues": "Number of work items",
+      "due_date": "Due date",
+      "created_at": "Created date",
+      "manual": "Manual"
+    }
+  },
+  "project_members": {
+    "full_name": "Full name",
+    "display_name": "Display name",
+    "email": "Email",
+    "joining_date": "Joining date",
+    "role": "Role"
+  },
+  "project": {
+    "members_import": {
+      "title": "Import Members from CSV",
+      "description": "Upload a CSV with columns: Email and Role (5=Guest, 15=Member, 20=Admin). Users must already be workspace members.",
+      "download_sample": "Download sample CSV",
+      "dropzone": {
+        "active": "Drop CSV file here",
+        "inactive": "Drag & drop or click to upload",
+        "file_type": "Only .csv files supported"
+      },
+      "buttons": {
+        "cancel": "Cancel",
+        "import": "Import",
+        "try_again": "Try Again",
+        "close": "Close",
+        "done": "Done"
+      },
+      "progress": {
+        "uploading": "Uploading...",
+        "importing": "Importing..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Import Complete"
+        },
+        "message": {
+          "success": "Successfully imported {count} member{plural} to the project.",
+          "no_imports": "No new members were imported from the CSV file."
+        },
+        "stats": {
+          "added": "Added",
+          "reactivated": "Reactivated",
+          "already_members": "Already Members",
+          "skipped": "Skipped"
+        },
+        "download_errors": "Download skipped details"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Invalid file",
+          "message": "Only CSV files are supported."
+        },
+        "import_failed": {
+          "title": "Import failed",
+          "message": "Something went wrong."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/settings.json b/packages/i18n/src/locales/en/settings.json
new file mode 100644
index 0000000..b525bc0
--- /dev/null
+++ b/packages/i18n/src/locales/en/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Change email",
+        "description": "Enter a new email address to receive a verification link.",
+        "toasts": {
+          "success_title": "Success!",
+          "success_message": "Email updated successfully. Please sign in again."
+        },
+        "form": {
+          "email": {
+            "label": "New email",
+            "placeholder": "Enter your email",
+            "errors": {
+              "required": "Email is required",
+              "invalid": "Email is invalid",
+              "exists": "Email already exists. Please use a different one.",
+              "validation_failed": "Email validation failed. Please try again."
+            }
+          },
+          "code": {
+            "label": "Unique code",
+            "placeholder": "123456",
+            "helper_text": "Verification code sent to your new email.",
+            "errors": {
+              "required": "Unique code is required",
+              "invalid": "Invalid verification code. Please try again."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Continue",
+          "confirm": "Confirm",
+          "cancel": "Cancel"
+        },
+        "states": {
+          "sending": "Sending"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Preferences",
+      "description": "Customize your app experience the way you work"
+    },
+    "notifications": {
+      "heading": "Email notifications",
+      "description": "Stay in the loop on Work items you are subscribed to. Enable this to get notified.",
+      "select_default_view": "Select default view",
+      "compact": "Compact",
+      "full": "Full Screen"
+    },
+    "security": {
+      "heading": "Security"
+    },
+    "api_tokens": {
+      "title": "Personal Access Tokens",
+      "description": "Generate secure API tokens to integrate your data with external systems and applications."
+    },
+    "activity": {
+      "heading": "Activity",
+      "description": "Track your recent actions and changes across all projects and work items."
+    },
+    "connections": {
+      "title": "Connections",
+      "heading": "Connections",
+      "description": "Manage your workspace connections settings."
+    }
+  },
+  "profile": {
+    "label": "Profile",
+    "page_label": "Your work",
+    "work": "Work",
+    "details": {
+      "joined_on": "Joined on",
+      "time_zone": "Timezone"
+    },
+    "stats": {
+      "workload": "Workload",
+      "overview": "Overview",
+      "created": "Work items created",
+      "assigned": "Work items assigned",
+      "subscribed": "Work items subscribed",
+      "state_distribution": {
+        "title": "Work items by state",
+        "empty": "Create work items to view the them by states in the graph for better analysis."
+      },
+      "priority_distribution": {
+        "title": "Work items by Priority",
+        "empty": "Create work items to view the them by priority in the graph for better analysis."
+      },
+      "recent_activity": {
+        "title": "Recent activity",
+        "empty": "We couldn't find data. Kindly view your inputs",
+        "button": "Download today's activity",
+        "button_loading": "Downloading"
+      }
+    },
+    "actions": {
+      "profile": "Profile",
+      "security": "Security",
+      "activity": "Activity",
+      "preferences": "Preferences",
+      "notifications": "Notifications",
+      "api-tokens": "Personal Access Tokens",
+      "connections": "Connections"
+    },
+    "tabs": {
+      "summary": "Summary",
+      "assigned": "Assigned",
+      "created": "Created",
+      "subscribed": "Subscribed",
+      "activity": "Activity"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "No activities yet",
+        "description": "Get started by creating a new work item! Add details and properties to it. Explore more in Plane to see your activity."
+      },
+      "assigned": {
+        "title": "No work items are assigned to you",
+        "description": "Work items assigned to you can be tracked from here."
+      },
+      "created": {
+        "title": "No work items yet",
+        "description": "All work items created by you come here, track them here directly."
+      },
+      "subscribed": {
+        "title": "No work items yet",
+        "description": "Subscribe to work items you are interested in, track all of them here."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "System preference"
+      },
+      "light": {
+        "label": "Light"
+      },
+      "dark": {
+        "label": "Dark"
+      },
+      "light_contrast": {
+        "label": "Light high contrast"
+      },
+      "dark_contrast": {
+        "label": "Dark high contrast"
+      },
+      "custom": {
+        "label": "Custom theme"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/stickies.json b/packages/i18n/src/locales/en/stickies.json
new file mode 100644
index 0000000..4c0325e
--- /dev/null
+++ b/packages/i18n/src/locales/en/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Your stickies",
+    "placeholder": "click to type here",
+    "all": "All stickies",
+    "no-data": "Jot down an idea, capture an aha, or record a brainwave. Add a sticky to get started.",
+    "add": "Add sticky",
+    "search_placeholder": "Search by title",
+    "delete": "Delete sticky",
+    "delete_confirmation": "Are you sure you want to delete this sticky?",
+    "empty_state": {
+      "simple": "Jot down an idea, capture an aha, or record a brainwave. Add a sticky to get started.",
+      "general": {
+        "title": "Stickies are quick notes and to-dos you take down on the fly.",
+        "description": "Capture your thoughts and ideas effortlessly by creating stickies that you can access anytime and from anywhere.",
+        "primary_button": {
+          "text": "Add sticky"
+        }
+      },
+      "search": {
+        "title": "That doesn't match any of your stickies.",
+        "description": "Try a different term or let us know\nif you are sure your search is right. ",
+        "primary_button": {
+          "text": "Add sticky"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "The sticky name cannot be longer than 100 characters.",
+        "already_exists": "There already exists a sticky with no description"
+      },
+      "created": {
+        "title": "Sticky created",
+        "message": "The sticky has been successfully created"
+      },
+      "not_created": {
+        "title": "Sticky not created",
+        "message": "The sticky could not be created"
+      },
+      "updated": {
+        "title": "Sticky updated",
+        "message": "The sticky has been successfully updated"
+      },
+      "not_updated": {
+        "title": "Sticky not updated",
+        "message": "The sticky could not be updated"
+      },
+      "removed": {
+        "title": "Sticky removed",
+        "message": "The sticky has been successfully removed"
+      },
+      "not_removed": {
+        "title": "Sticky not removed",
+        "message": "The sticky could not be removed"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/template.json b/packages/i18n/src/locales/en/template.json
new file mode 100644
index 0000000..5c0882a
--- /dev/null
+++ b/packages/i18n/src/locales/en/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Templates",
+      "description": "Save 80% time spent on creating projects, work items, and pages when you use templates.",
+      "new_project_template": "New project template",
+      "new_work_item_template": "New work item template",
+      "new_page_template": "New page template",
+      "options": {
+        "project": {
+          "label": "Project templates"
+        },
+        "work_item": {
+          "label": "Work item templates"
+        },
+        "page": {
+          "label": "Page templates"
+        }
+      },
+      "create_template": {
+        "label": "Create template",
+        "no_permission": {
+          "project": "Contact your project admin to create templates",
+          "workspace": "Contact your workspace admin to create templates"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Use template",
+          "loading": "Applying"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Derived from workspace"
+        },
+        "project": {
+          "info": "Derived from project"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Name your project template.",
+              "validation": {
+                "required": "Template name is required",
+                "maxLength": "Template name should be less than 255 characters"
+              }
+            },
+            "description": {
+              "placeholder": "Describe when and how to use this template."
+            }
+          },
+          "name": {
+            "placeholder": "Name your project.",
+            "validation": {
+              "required": "Project title is required",
+              "maxLength": "Project title should be less than 255 characters"
+            }
+          },
+          "description": {
+            "placeholder": "Describe the purpose and goals of this project."
+          },
+          "button": {
+            "create": "Create project template",
+            "update": "Update project template"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Name your work-item template.",
+              "validation": {
+                "required": "Template name is required",
+                "maxLength": "Template name should be less than 255 characters"
+              }
+            },
+            "description": {
+              "placeholder": "Describe when and how to use this template."
+            }
+          },
+          "name": {
+            "placeholder": "Give this work item a title.",
+            "validation": {
+              "required": "Work item title is required",
+              "maxLength": "Work item title should be less than 255 characters"
+            }
+          },
+          "description": {
+            "placeholder": "Describe this work item so its clear what you will accomplish when you complete this."
+          },
+          "button": {
+            "create": "Create work-item template",
+            "update": "Update work-item template"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Name your page template.",
+              "validation": {
+                "required": "Template name is required",
+                "maxLength": "Template name should be less than 255 characters"
+              }
+            },
+            "description": {
+              "placeholder": "Describe when and how to use this template."
+            }
+          },
+          "name": {
+            "placeholder": "Untitled page",
+            "validation": {
+              "maxLength": "Page name should be less than 255 characters"
+            }
+          },
+          "button": {
+            "create": "Create page template",
+            "update": "Update page template"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Publish settings} other {Publish to Marketplace}}",
+          "unpublish_action": "Unpublish from Marketplace",
+          "title": "Make your template discoverable and recognizable.",
+          "name": {
+            "label": "Name of template",
+            "placeholder": "Name your template",
+            "validation": {
+              "required": "Template name is required",
+              "maxLength": "Template name should be less than 255 characters"
+            }
+          },
+          "short_description": {
+            "label": "Short description",
+            "placeholder": "This template is great for Project Managers who manage several projects at the same time.",
+            "validation": {
+              "required": "Short description is required"
+            }
+          },
+          "description": {
+            "label": "Description",
+            "placeholder": "Enhance productivity and streamline communication with our Speech-To-Text integration.\n• Real-time transcription: Convert spoken words into accurate text instantly.\n• Task and comment creation: Add tasks, descriptions, and comments through voice commands.",
+            "validation": {
+              "required": "Description is required"
+            }
+          },
+          "category": {
+            "label": "Category",
+            "placeholder": "Choose where you think this fits best. You can choose more than one.",
+            "validation": {
+              "required": "At least one category is required"
+            }
+          },
+          "keywords": {
+            "label": "Keywords",
+            "placeholder": "Use terms that you think your users will search for when looking for this template.",
+            "helperText": "Enter comma-separated keywords that are likely to help people find this from search.",
+            "validation": {
+              "required": "At least one keyword is required"
+            }
+          },
+          "website": {
+            "label": "Website URL",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "Invalid URL",
+              "maxLength": "URL should be less than 800 characters"
+            }
+          },
+          "company_name": {
+            "label": "Company name",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Company name is required",
+              "maxLength": "Company name should be less than 255 characters"
+            }
+          },
+          "contact_email": {
+            "label": "Contact email",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Invalid email address",
+              "maxLength": "Contact email should be less than 255 characters"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Link to your privacy policy",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Invalid URL",
+              "maxLength": "URL should be less than 800 characters"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Link to your terms of use",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "Invalid URL",
+              "maxLength": "URL should be less than 800 characters"
+            }
+          },
+          "cover_image": {
+            "label": "Add a cover image that will be displayed in the marketplace",
+            "upload_title": "Upload cover image",
+            "upload_placeholder": "Click to upload or drag and drop to upload a cover image",
+            "drop_here": "Drop here",
+            "click_to_upload": "Click to upload",
+            "invalid_file_or_exceeds_size_limit": "Invalid file or exceeds size limit. Please try again.",
+            "upload_and_save": "Upload and save",
+            "uploading": "Uploading",
+            "remove": "Remove",
+            "removing": "Removing",
+            "validation": {
+              "required": "Cover image is required"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Include pictures you think will make viewers of this template.",
+            "validation": {
+              "required": "At least one screenshot is required"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Templates",
+        "description": "With project, work-item, and page templates in Plane, you don't have to create a project from scratch or set work item props manually.",
+        "sub_description": "Get 80% of your admin time back when you use Templates."
+      },
+      "no_templates": {
+        "button": "Create your first template"
+      },
+      "no_labels": {
+        "description": "No labels yet. Create labels to help organize and filter work items in you project."
+      },
+      "no_modules": {
+        "description": "No modules yet. Organize work into sub-projects with dedicated leads and assignees."
+      },
+      "no_work_items": {
+        "description": "No work items yet. Add one to structure your work better."
+      },
+      "no_sub_work_items": {
+        "description": "No sub-work items yet. Add one to structure your work better."
+      },
+      "page": {
+        "no_templates": {
+          "title": "There are no templates you have access to.",
+          "description": "Please create a template"
+        },
+        "no_results": {
+          "title": "That didn't match a template.",
+          "description": "Try searching by other terms."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Template created",
+          "message": "{templateName}, the {templateType} template, is now available for your workspace."
+        },
+        "error": {
+          "title": "We couldn't create that template this time.",
+          "message": "Try saving your details again or copy them over to a new template, preferably in another tab."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Template changed",
+          "message": "{templateName}, the {templateType} template, was changed."
+        },
+        "error": {
+          "title": "We couldn't save changes to this template.",
+          "message": "Try saving your details again or come back to this template later. If there's trouble still, reach out to us."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Template deleted",
+          "message": "{templateName}, the {templateType} template, has now been deleted from your workspace."
+        },
+        "error": {
+          "title": "We couldn't delete that template this.",
+          "message": "Try deleting it again or come back to it later. If you can't delete it then, reach out to us."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Template unpublished",
+          "message": "{templateName}, the {templateType} template, has now been unpublished."
+        },
+        "error": {
+          "title": "We couldn't unpublish that template this.",
+          "message": "Try unpublishing it again or come back to it later. If you can't unpublish it then, reach out to us."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Delete template",
+      "description": {
+        "prefix": "Are you sure you want to delete template-",
+        "suffix": "? All of the data related to the template will be permanently removed. This action cannot be undone."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Unpublish template",
+      "description": {
+        "prefix": "Are you sure you want to unpublish template-",
+        "suffix": "? This template will no longer be available to users on the marketplace."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Add new template",
+        "project": "Add new template"
+      },
+      "label": {
+        "project": "Pick a project template",
+        "page": "Choose from template"
+      },
+      "tooltip": {
+        "work_item": "Pick a work item template"
+      },
+      "no_results": {
+        "work_item": "No templates found.",
+        "project": "No templates found."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/tour.json b/packages/i18n/src/locales/en/tour.json
new file mode 100644
index 0000000..b239e38
--- /dev/null
+++ b/packages/i18n/src/locales/en/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Welcome to your workspace",
+        "description": "To help you get started, we’ve created a Demo Project for you. Let’s add your first work item."
+      },
+      "step_one": {
+        "title": "Click “+ Add work item”",
+        "description": "Start by clicking the “+ New Work Item” button. You can create tasks, bugs, or custom type that fits your needs."
+      },
+      "step_two": {
+        "title": "Filter your work items",
+        "description": "Use filters to quickly narrow down your list. You can filter by status, priority, or team members. "
+      },
+      "step_three": {
+        "title": "View, group, and order work items as needed.",
+        "description": "See required properties, and group or order work items as per your needs."
+      },
+      "step_four": {
+        "title": "Visualize however you want",
+        "description": "Select which properties you want to see in the list. You can also group and sort work items your way."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Make progress with Cycles",
+        "description": "Press Q to create a Cycle. Name it and set dates—only one cycle per project."
+      },
+      "step_one": {
+        "title": "Create a new cycle",
+        "description": "Press Q to create a Cycle. Name it and set dates—only one cycle per project."
+      },
+      "step_two": {
+        "title": "Click “+ ”",
+        "description": "Start by clicking the “+” button. Add new or existing work items directly from the Cycle page."
+      },
+      "step_three": {
+        "title": "Cycle summary",
+        "description": "Track cycle progress, team productivity, and priorities—and investigate if things fall behind."
+      },
+      "step_four": {
+        "title": "Transfer work items",
+        "description": "After the due date, a cycle auto-completes. Move unfinished work to another cycle."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Break your project down into Modules",
+        "description": "Modules are smaller, focused projects that help users group and organize work items within specific time frames."
+      },
+      "step_one": {
+        "title": "Create Module",
+        "description": "Modules are smaller, focused projects that help users group and organize work items within specific time frames."
+      },
+      "step_two": {
+        "title": "Click “+ ”",
+        "description": "Start by clicking the “+” button. Add new or existing work items directly from the Module page."
+      },
+      "step_three": {
+        "title": "Module states",
+        "description": "Modules use these statuses to help users plan and clearly track progress and stage."
+      },
+      "step_four": {
+        "title": "Module progress",
+        "description": "Module progress is tracked via completed items, with analytics to monitor performance."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Document with AI-powered Pages",
+        "description": "Pages in Plane let you capture, organize, and collaborate on project info—no external tools needed."
+      },
+      "step_one": {
+        "title": "Make page Public or Private",
+        "description": "Pages can be set as public, visible to everyone in your workspace, or private, accessible only to you."
+      },
+      "step_two": {
+        "title": "Use / command",
+        "description": "Use / on a page to add content from 16 block types, including lists, images, tables, and embeds."
+      },
+      "step_three": {
+        "title": "Page actions",
+        "description": "Once your page is created, you can click the ••• menu in the top-right corner to perform the following actions."
+      },
+      "step_four": {
+        "title": "Table of contents",
+        "description": "Get a bird’s-eye view of your page by clicking the panel icon to see all headings."
+      },
+      "step_five": {
+        "title": "Version history",
+        "description": "Pages track all edits with version history, letting you restore previous versions if needed."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Streamline requests with intake",
+        "description": "A Plane-only feature that lets Guests create work items for bugs, requests, or tickets."
+      },
+      "step_one": {
+        "title": "Open/closed intake requests",
+        "description": "Pending requests stay in the Open tab, and once addressed by an admin or member, they move to Closed."
+      },
+      "step_two": {
+        "title": "Accept/decline a pending request",
+        "description": "Accept to edit and move the work item to your project, or decline it to mark it as Cancelled."
+      },
+      "step_three": {
+        "title": "Snooze for now",
+        "description": "A work item can be snoozed to review it at a later time. It will be moved to the bottom of your open request list."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Stop tab-switching. Connect your world.",
+        "description": "Link GitHub, Slack to track PRs and summarize chats directly in Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigation, re-imagined",
+        "sub_title": "Your workspace is now easier to explore with a smarter, simplified navigation.",
+        "highlight_1": "Streamlined left-panel structure for quicker discovery",
+        "highlight_2": "Improved global search to jump to anything instantly",
+        "highlight_3": "Smarter category grouping for clarity and focus",
+        "footer": "Want a quick walkthrough?"
+      },
+      "step_zero": {
+        "title": "Find anything instantly",
+        "description": "Use universal search to jump to tasks, projects, pages, and people—without leaving your flow."
+      },
+      "step_one": {
+        "title": "Stay in control of updates",
+        "description": "Your inbox keeps all mentions, approvals, and activity in one place, so you never miss important work."
+      },
+      "step_two": {
+        "title": "Personalize Your Navigation",
+        "description": "Customize what you see and how you navigate in Preferences."
+      }
+    },
+    "actions": {
+      "close": "Close",
+      "next": "Next",
+      "back": "Back",
+      "done": "Done",
+      "take_a_tour": "Take a tour",
+      "get_started": "Get started",
+      "got_it": "Got it"
+    },
+    "seed_data": {
+      "title": "Here is your demo project",
+      "description": "Projects let you manage your teams, tasks, and everything you need to get things done within your workspace."
+    }
+  },
+  "get_started": {
+    "title": "Hey {name}, welcome aboard!",
+    "description": "Here’s everything you need to kickstart your journey with Plane.",
+    "checklist_section": {
+      "title": "Get started",
+      "description": "Begin your setup and see your ideas come to life faster.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Create a project"
+        },
+        "item_2": {
+          "title": "Create a work item"
+        },
+        "item_3": {
+          "title": "Invite team members"
+        },
+        "item_4": {
+          "title": "Create a page"
+        },
+        "item_5": {
+          "title": "Try Plane AI chat"
+        },
+        "item_6": {
+          "title": "Link Integrations"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Invite your team",
+      "description": "Invite teammates and start building together."
+    },
+    "integrations_section": {
+      "title": "Power up your workspace",
+      "more_integrations": "Browse more integrations"
+    },
+    "switch_to_plane_section": {
+      "title": "Discover why teams switch to Plane",
+      "description": "Compare Plane with the tools you use today and see the difference."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/update.json b/packages/i18n/src/locales/en/update.json
new file mode 100644
index 0000000..f821ffc
--- /dev/null
+++ b/packages/i18n/src/locales/en/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Progress",
+      "since_last_update": "Since last update",
+      "comments": "{count, plural, one{# Comment} other{# Comments}}"
+    },
+    "add_update": "Add Update",
+    "add_update_placeholder": "Add your update here",
+    "empty": {
+      "title": "No updates yet",
+      "description": "You can see the updates here."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reaction created",
+          "message": "The reaction has been successfully created"
+        },
+        "error": {
+          "title": "Reaction not created",
+          "message": "The reaction could not be created"
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reaction removed",
+          "message": "The reaction has been successfully removed"
+        },
+        "error": {
+          "title": "Reaction not removed",
+          "message": "The reaction could not be removed"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Update created",
+        "message": "The update has been successfully created"
+      },
+      "error": {
+        "title": "Update not created",
+        "message": "The update could not be created"
+      }
+    },
+    "delete": {
+      "title": "Delete update",
+      "confirmation": "Are you sure you want to delete this update? This is an irreversible action.",
+      "success": {
+        "title": "Update deleted",
+        "message": "The update has been successfully deleted"
+      },
+      "error": {
+        "title": "Update not deleted",
+        "message": "The update could not be deleted"
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Updated",
+        "message": "The update has been successfully updated"
+      },
+      "error": {
+        "title": "Update not updated",
+        "message": "The update could not be updated"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/wiki.json b/packages/i18n/src/locales/en/wiki.json
new file mode 100644
index 0000000..9b2860c
--- /dev/null
+++ b/packages/i18n/src/locales/en/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "General",
+      "private": "Private",
+      "shared": "Shared",
+      "archived": "Archived"
+    },
+    "fallback_name": "Collection",
+    "form": {
+      "name_required": "Collection title is required",
+      "name_max_length": "Collection name must be less than 255 characters",
+      "name_placeholder_create": "Give a title to the collection",
+      "name_placeholder_edit": "Collection name"
+    },
+    "create_modal": {
+      "title": "Create a collection",
+      "submit": "Create collection"
+    },
+    "edit_modal": {
+      "title": "Edit collection"
+    },
+    "delete_modal": {
+      "title": "Delete collection",
+      "page_count": "This collection has {pageCount} {pageCount, plural, one {page} other {pages}}. Choose what happens to them.",
+      "transfer_title": "Transfer pages and delete collection",
+      "transfer_description": "Move all pages to another collection before deleting. Pages and their permissions are preserved.",
+      "transfer_warning": "Moved pages will inherit the permissions of the selected collection.",
+      "transfer_target_label": "Move pages to",
+      "transfer_target_placeholder": "Select a collection",
+      "delete_with_pages_title": "Delete collection with pages",
+      "delete_with_pages_description": "Permanently delete the collection and all its pages. This action can't be undone.",
+      "submit": "Delete collection"
+    },
+    "header": {
+      "add_page": "Add page"
+    },
+    "menu": {
+      "create_new_page": "Create new page",
+      "add_existing_page": "Add existing page",
+      "edit_collection": "Edit collection",
+      "collection_options": "Collection options"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Search for pages",
+      "success_message": "{count} {count, plural, one {page} other {pages}} added to collection.",
+      "error_message": "Pages could not be moved. Please try again.",
+      "no_pages_found": "No pages found matching your search",
+      "no_pages_available": "No pages available to move",
+      "submit": "Move"
+    },
+    "list": {
+      "invite_only": "Invite only",
+      "remove_error": "Failed to remove page from collection.",
+      "no_matching_pages": "No matching pages",
+      "remove_search_criteria": "Remove the search criteria to see all pages",
+      "remove_filters": "Remove the filters to see all pages",
+      "no_pages_title": "No pages yet",
+      "no_pages_description": "This collection doesn't have any pages right now.",
+      "untitled": "Untitled",
+      "restricted_access": "Restricted Access",
+      "collapse_page": "Collapse page",
+      "expand_page": "Expand page",
+      "page_actions": "Page actions",
+      "page_link_copied": "Page link copied to clipboard.",
+      "columns": {
+        "page_name": "Page name",
+        "owner": "Owner",
+        "nested_pages": "Nested pages",
+        "last_activity": "Last activity",
+        "actions": "Actions"
+      }
+    },
+    "toasts": {
+      "created": "Collection created successfully.",
+      "create_error": "Collection could not be created. Please try again.",
+      "renamed": "Collection renamed successfully.",
+      "rename_error": "Collection could not be updated. Please try again.",
+      "transferred_deleted": "Pages transferred and collection deleted.",
+      "deleted_with_pages": "Collection and its pages deleted.",
+      "delete_error": "Collection could not be deleted. Please try again.",
+      "target_required": "Please select a collection to move pages to.",
+      "create_page_error": "Page could not be created. Please try again.",
+      "create_page_in_collection_error": "Page could not be created or added to the collection. Please try again.",
+      "collection_link_copied": "Collection link copied to clipboard."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Upgrade to unlock Wiki",
+      "description": "Unlock public pages, version history, shared pages, real-time collaboration, and workspace pages for wikis, company-wide docs, and knowledge bases with Plane Pro.",
+      "upgrade_button": {
+        "text": "Upgrade"
+      },
+      "learn_more_button": {
+        "text": "Learn more"
+      },
+      "download_button": {
+        "text": "Download data",
+        "loading": "Downloading"
+      },
+      "tabs": {
+        "nested_pages": "Nested Pages",
+        "add_embeds": "Add embeds",
+        "publish_pages": "Publish pages",
+        "comments": "Comments"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Nested pages require a paid plan. Upgrade to unlock."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/work-item-type.json b/packages/i18n/src/locales/en/work-item-type.json
new file mode 100644
index 0000000..9690c8f
--- /dev/null
+++ b/packages/i18n/src/locales/en/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Work item Types",
+    "label_lowercase": "work item types",
+    "settings": {
+      "description": "Customize and add your own properties to tailor it to your team's needs.",
+      "cant_delete_default_message": "This work item type cannot be deleted because it's set as the default for this project",
+      "set_as_default": "Set as default",
+      "cant_set_default_inactive_message": "Activate this type before setting it as default",
+      "set_default_confirmation": {
+        "title": "Set as default work item type",
+        "description": "Setting {name} as the default will import it to all projects in this workspace. All new work items will use this type by default.",
+        "confirm_button": "Set as default"
+      },
+      "properties": {
+        "title": "Properties",
+        "description": "Create and customize properties.",
+        "tooltip": "Each work item type comes with a default set of properties like Title, Description, Assignee, State, Priority, Start date, Due date, Module, Cycle etc. You can also customize and add your own properties to tailor it to your team's needs.",
+        "add_button": "Add new property",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Import from workspace"
+          }
+        },
+        "dropdown": {
+          "label": "Property type",
+          "placeholder": "Select type"
+        },
+        "property_type": {
+          "text": {
+            "label": "Text"
+          },
+          "number": {
+            "label": "Number"
+          },
+          "dropdown": {
+            "label": "Dropdown"
+          },
+          "boolean": {
+            "label": "Boolean"
+          },
+          "date": {
+            "label": "Date"
+          },
+          "member_picker": {
+            "label": "Member picker"
+          },
+          "formula": {
+            "label": "Formula"
+          }
+        },
+        "attributes": {
+          "label": "Attributes",
+          "text": {
+            "single_line": {
+              "label": "Single line"
+            },
+            "multi_line": {
+              "label": "Paragraph"
+            },
+            "readonly": {
+              "label": "Read only",
+              "header": "Read only data"
+            },
+            "invalid_text_format": {
+              "label": "Invalid text format"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Add number"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Single select"
+            },
+            "multi_select": {
+              "label": "Multi select"
+            },
+            "no_default_value": {
+              "label": "No default value"
+            }
+          },
+          "boolean": {
+            "label": "True | False",
+            "no_default": "No default value"
+          },
+          "option": {
+            "create_update": {
+              "label": "Options",
+              "form": {
+                "placeholder": "Add option",
+                "errors": {
+                  "name": {
+                    "required": "Option name is required.",
+                    "integrity": "Option with same name already exists."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Select option",
+                "multi": {
+                  "default": "Select options",
+                  "variable": "{count} options selected"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Success!",
+              "message": "Property {name} created successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to create property. Please try again!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Success!",
+              "message": "Property {name} updated successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to update property. Please try again!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Success!",
+              "message": "Property {name} deleted successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to delete property. Please try again!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} {name} property",
+            "success": {
+              "title": "Success!",
+              "message": "Property {name} {action} successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to {action} property. Please try again!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Create new custom property",
+            "update": "Update custom property"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Title"
+            },
+            "description": {
+              "placeholder": "Description"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "You must name your property.",
+              "max_length": "Property name should not exceed 255 characters."
+            },
+            "property_type": {
+              "required": "You must select a property type."
+            },
+            "options": {
+              "required": "You must add at least one option."
+            },
+            "formula": {
+              "required": "Formula expression is required.",
+              "invalid": "Invalid formula: {error}",
+              "circular_reference": "Circular reference detected. A formula cannot reference itself directly or indirectly.",
+              "invalid_reference": "Formula references non-existent property."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Formula field",
+          "tooltip": "Enter a formula using '{'Field Name'}' syntax. Supports +, -, *, /, & operators.",
+          "placeholder": "Write the formula",
+          "test_button": "Test",
+          "validating": "Validating",
+          "validation_success": "Formula is valid! Returns {resultType}",
+          "validation_success_with_refs": "Formula is valid! Returns {resultType} ({count} field(s) referenced)",
+          "error": {
+            "empty": "Please enter a formula",
+            "missing_context": "Missing workspace, project, or work item type context",
+            "validation_failed": "Validation failed"
+          },
+          "picker": {
+            "no_match": "No matching properties",
+            "no_available": "No available properties"
+          }
+        },
+        "enable_disable": {
+          "label": "Active",
+          "tooltip": {
+            "disabled": "Click to disable",
+            "enabled": "Click to enable"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Delete this property",
+          "description": "Deletion of properties may lead to loss of existing data.",
+          "secondary_description": "Do you want to disable the property instead?",
+          "primary_button": "{action}, delete it",
+          "secondary_button": "Yes, disable it"
+        },
+        "mandate_confirmation": {
+          "label": "Mandatory property",
+          "content": "There seems to be a default option for this property. Making the property mandatory will remove the default value and the users will have to add a value of their choice.",
+          "tooltip": {
+            "disabled": "This property type cannot be made mandatory",
+            "enabled": "Uncheck to mark the field as optional",
+            "checked": "Check to mark the field as mandatory"
+          }
+        },
+        "empty_state": {
+          "title": "Add custom properties",
+          "description": "New properties you add for this work item type will show here."
+        }
+      },
+      "types": {
+        "title": "Types",
+        "description": "Create and customize work item types with properties.",
+        "sort_options": {
+          "project_count": "Number of projects part of"
+        },
+        "filter_options": {
+          "show_active": "Show active",
+          "show_inactive": "Show inactive"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Create new",
+            "import_from_workspace": "Import from workspace"
+          },
+          "banner": {
+            "with_access": "Enable work item types to import types from workspace level",
+            "without_access": "Work item types are disabled. Contact workspace admin to enable them in workspace settings."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Custom properties",
+        "add_button": "Add properties",
+        "modal": {
+          "title": "Add properties",
+          "empty": {
+            "title": "No properties available",
+            "description": "All properties have already been linked to this type."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Unlink property",
+          "description": "Unlinking this property will permanently delete all its values across every work item using this type. This action cannot be undone.",
+          "input_label": "Type",
+          "input_label_suffix": "to continue:",
+          "confirm": "Unlink property",
+          "loading": "Unlinking"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Delete this type",
+        "description": "Deletion of types may lead to loss of existing data.",
+        "can_disable_warning": "Do you want to disable the type instead?",
+        "primary_button": "Yes, delete it",
+        "toast": {
+          "success": {
+            "title": "Success!",
+            "message": "Work item type deleted successfully."
+          },
+          "error": {
+            "title": "Error!",
+            "message": "Failed to delete work item type. Please try again!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Cannot delete default work item type",
+          "cannot_delete_work_item_type_with_associated_work_items": "Cannot delete work item type with associated work items"
+        }
+      }
+    },
+    "create": {
+      "title": "Create work item type",
+      "button": "Add work item type",
+      "toast": {
+        "success": {
+          "title": "Success!",
+          "message": "Work item type created successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": {
+            "default": "Failed to create work item type. Please try again!",
+            "conflict": "{name} type already exists. Choose a different name."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Update work item type",
+      "button": "Update work item type",
+      "toast": {
+        "success": {
+          "title": "Success!",
+          "message": "Work item type {name} updated successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": {
+            "default": "Failed to update work item type. Please try again!",
+            "conflict": "{name} type already exists. Choose a different name."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Give this work item type a unique name"
+        },
+        "description": {
+          "placeholder": "Describe what this work item type is meant for and when it's to be used."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} {name} work item type",
+        "success": {
+          "title": "Success!",
+          "message": "Work item type {name} {action} successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to {action} work item type. Please try again!"
+        }
+      },
+      "tooltip": "Click to {action}"
+    },
+    "change_confirmation": {
+      "title": "Change work item type?",
+      "description": "Changing the work item type may result in loss of custom property values that are specific to the current type. This action cannot be undone.",
+      "button": {
+        "loading": "Changing",
+        "default": "Change type"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Enable Work item Types",
+        "description": "Shape work items to your work with Work item types. Customize with icons, backgrounds, and properties and configure them for this project.",
+        "primary_button": {
+          "text": "Enable"
+        },
+        "confirmation": {
+          "title": "Once enabled, Work item Types can't be disabled.",
+          "description": "Plane's Work Item will become the default work item type for this project and will show up with its icon and background in this project.",
+          "button": {
+            "default": "Enable",
+            "loading": "Setting up"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Get Pro to enable Work item types.",
+        "description": "Shape work items to your work with Work item types. Customize with icons, backgrounds, and properties and configure them for this project.",
+        "primary_button": {
+          "text": "Get Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Upgrade to enable Work item types.",
+        "description": "Shape work items to your work with Work item types. Customize with icons, backgrounds, and properties and configure them for this project.",
+        "primary_button": {
+          "text": "Upgrade"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hierarchy",
+      "tab_label": "Hierarchy",
+      "description": "Set up hierarchy levels to organize your work. Each level defines a parent relationship with the item directly above it and child relationship with the item directly below it. ",
+      "sidebar_label": "Hierarchy",
+      "enable_control": {
+        "title": "Enable hierarchy",
+        "description": "Create parent-child relationships between different work item types.",
+        "tooltip": "You cannot disable hierarchy once it is enabled."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Define Work Item Types first to create a new hierarchy.",
+        "cta": "Work item types settings"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Drag and drop type to add a new hierarchy level",
+      "empty_level_placeholder": "Drag and drop a work item type to level {level}",
+      "drag_tooltip": "Drag to change level",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Set as default",
+          "toast": {
+            "loading": "Setting as default...",
+            "success": {
+              "title": "Success!",
+              "message": "Hierarchy level {level} set as default successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to set hierarchy level {level} as default. Please try again."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Moving {workItemTypeName} to level {level}...",
+        "success": {
+          "title": "Success!",
+          "message": "{workItemTypeName} moved to level {level} successfully."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Validation error!",
+      "content": {
+        "intro": "Work item type {workItemTypeName} has:",
+        "parent_items": "{count, plural, one {parent work item} other {parent work items}}",
+        "child_items": "{count, plural, one {sub-work item} other {sub-work items}}",
+        "parent_line_suffix_when_also_children": ", and ",
+        "footer": "This change will remove parent and child relationships from existing work items of {workItemTypeName} work item type."
+      },
+      "confirm_input": {
+        "label": "Type in \"Confirm\" to continue.",
+        "placeholder": "Confirm"
+      },
+      "error_toast": {
+        "title": "Error!",
+        "message": "Failed to break hierarchy. Please try again."
+      },
+      "confirm_button": {
+        "loading": "Applying",
+        "default": "Apply & Unlink"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Error!",
+        "message": "The selected work item type cannot be used to create a new work item since it breaks the hierarchy rules."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Error!",
+        "message": "Work item type cannot be updated since it breaks the hierarchy rules."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Hierarchy level",
+      "invalid_level_toast": {
+        "title": "Error!",
+        "message": "Work item type cannot be updated since it breaks the hierarchy rules."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/work-item.json b/packages/i18n/src/locales/en/work-item.json
new file mode 100644
index 0000000..6acb243
--- /dev/null
+++ b/packages/i18n/src/locales/en/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Work item} other {Work items}}",
+    "all": "All Work items",
+    "edit": "Edit work item",
+    "title": {
+      "label": "Work item title",
+      "required": "Work item title is required."
+    },
+    "add": {
+      "press_enter": "Press 'Enter' to add another work item",
+      "label": "Add work item",
+      "cycle": {
+        "failed": "Work item could not be added to the cycle. Please try again.",
+        "success": "{count, plural, one {Work item} other {Work items}} added to the cycle successfully.",
+        "loading": "Adding {count, plural, one {work item} other {work items}} to the cycle"
+      },
+      "assignee": "Add assignees",
+      "start_date": "Add start date",
+      "due_date": "Add due date",
+      "parent": "Add parent work item",
+      "sub_issue": "Add sub-work item",
+      "dependency": "Add dependency",
+      "relation": "Add relation",
+      "link": "Add link",
+      "existing": "Add existing work item"
+    },
+    "remove": {
+      "label": "Remove work item",
+      "cycle": {
+        "loading": "Removing work item from the cycle",
+        "success": "Work item removed from the cycle successfully.",
+        "failed": "Work item could not be removed from the cycle. Please try again."
+      },
+      "module": {
+        "loading": "Removing work item from the module",
+        "success": "Work item removed from the module successfully.",
+        "failed": "Work item could not be removed from the module. Please try again."
+      },
+      "parent": {
+        "label": "Remove parent work item"
+      }
+    },
+    "new": "New work item",
+    "adding": "Adding work item",
+    "create": {
+      "success": "Work item created successfully"
+    },
+    "priority": {
+      "urgent": "Urgent",
+      "high": "High",
+      "medium": "Medium",
+      "low": "Low"
+    },
+    "display": {
+      "properties": {
+        "label": "Display Properties",
+        "id": "ID",
+        "issue_type": "Work item Type",
+        "sub_issue_count": "Sub-work item count",
+        "attachment_count": "Attachment count",
+        "created_on": "Created on",
+        "sub_issue": "Sub-work item",
+        "work_item_count": "Work item count"
+      },
+      "extra": {
+        "show_sub_issues": "Show sub-work items",
+        "show_empty_groups": "Show empty groups"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "This layout is ordered by",
+      "list": "List",
+      "kanban": "Board",
+      "calendar": "Calendar",
+      "spreadsheet": "Table",
+      "gantt": "Timeline",
+      "title": {
+        "list": "List Layout",
+        "kanban": "Board Layout",
+        "calendar": "Calendar Layout",
+        "spreadsheet": "Table Layout",
+        "gantt": "Timeline Layout"
+      }
+    },
+    "states": {
+      "active": "Active",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Add comment",
+      "switch": {
+        "private": "Switch to private comment",
+        "public": "Switch to public comment"
+      },
+      "create": {
+        "success": "Comment created successfully",
+        "error": "Comment creation failed. Please try again later."
+      },
+      "update": {
+        "success": "Comment updated successfully",
+        "error": "Comment update failed. Please try again later."
+      },
+      "remove": {
+        "success": "Comment removed successfully",
+        "error": "Comment remove failed. Please try again later."
+      },
+      "upload": {
+        "error": "Asset upload failed. Please try again later."
+      },
+      "copy_link": {
+        "success": "Comment link copied to clipboard",
+        "error": "Error copying comment link. Please try again later."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Add reply",
+          "placeholder": "Add reply"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Failed to fetch replies"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Reply created successfully"
+            },
+            "error": {
+              "message": "Failed to create reply"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Reply updated successfully"
+            },
+            "error": {
+              "message": "Failed to update reply"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Reply deleted successfully"
+            },
+            "error": {
+              "message": "Failed to delete reply"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Work item does not exist",
+        "description": "The work item you are looking for does not exist, has been archived, or has been deleted.",
+        "primary_button": {
+          "text": "View other work items"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Sibling work items"
+    },
+    "archive": {
+      "description": "Only completed or canceled work items can be archived",
+      "label": "Archive Work item",
+      "confirm_message": "Are you sure you want to archive the work item? All your archived work items can be restored later.",
+      "success": {
+        "label": "Archive success",
+        "message": "Your archives can be found in project archives."
+      },
+      "failed": {
+        "message": "Work item could not be archived. Please try again."
+      },
+      "banner_message": "This work item has been archived. Visit the Archives section to restore it.",
+      "go_to_archives": "Go to archives"
+    },
+    "restore": {
+      "success": {
+        "title": "Restore success",
+        "message": "Your work item can be found in project work items."
+      },
+      "failed": {
+        "message": "Work item could not be restored. Please try again."
+      }
+    },
+    "relation": {
+      "relates_to": "Relates to",
+      "duplicate": "Duplicate of",
+      "blocked_by": "Blocked by",
+      "blocking": "Blocking",
+      "start_before": "Starts Before",
+      "start_after": "Starts After",
+      "finish_before": "Finishes Before",
+      "finish_after": "Finishes After",
+      "implements": "Implements",
+      "implemented_by": "Implemented By"
+    },
+    "copy_link": "Copy work item link",
+    "delete": {
+      "label": "Delete work item",
+      "error": "Error deleting work item"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Work item subscribed successfully",
+        "unsubscribed": "Work item unsubscribed successfully"
+      }
+    },
+    "select": {
+      "error": "Please select at least one work item",
+      "empty": "No work items selected",
+      "add_selected": "Add selected work items",
+      "select_all": "Select all",
+      "deselect_all": "Deselect all"
+    },
+    "open_in_full_screen": "Open work item in full screen",
+    "duplicate": {
+      "modal": {
+        "title": "Make a copy to another project",
+        "description1": "This creates a copy of the work item.",
+        "description2": "All property data will be removed while duplicating.",
+        "placeholder": "Select a project"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Work item duplicated successfully"
+        },
+        "error": {
+          "message": "Failed to duplicate work item"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Link pages",
+      "show_wiki_pages": "Show Wiki pages",
+      "link_pages_to": "Link pages to",
+      "linked_pages": "Linked pages",
+      "no_description": "This is an empty page. Why don't you write something inside and see it show up here like this placeholder",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Pages updated",
+            "message": "Pages updated successfully"
+          },
+          "error": {
+            "title": "Pages update failed",
+            "message": "Pages update failed"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Page removed",
+            "message": "Page removed successfully"
+          },
+          "error": {
+            "title": "Page removal failed",
+            "message": "Page removal failed"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Click to upvote",
+      "click_to_downvote": "Click to downvote",
+      "click_to_view_upvotes": "Click to view upvotes",
+      "click_to_view_downvotes": "Click to view downvotes"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Sub-work item updated successfully",
+      "error": "Error updating sub-work item"
+    },
+    "remove": {
+      "success": "Sub-work item removed successfully",
+      "error": "Error removing sub-work item"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "You don't have sub-work items that match the filters you've applied.",
+        "description": "To see all sub-work items, clear all applied filters.",
+        "action": "Clear filters"
+      },
+      "list_filters": {
+        "title": "You don't have work items that match the filters you've applied.",
+        "description": "To see all work items, clear all applied filters.",
+        "action": "Clear filters"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "No matching work items found"
+      },
+      "no_issues": {
+        "title": "No work items found"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "No comments yet",
+        "description": "Comments can be used as a discussion and follow-up space for the work items"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Unable to archive work items",
+        "message": "Only work items belonging to Completed or Canceled state groups can be archived."
+      },
+      "invalid_issue_start_date": {
+        "title": "Unable to update work items",
+        "message": "Start date selected succeeds the due date for some work items. Ensure start date to be before the due date."
+      },
+      "invalid_issue_target_date": {
+        "title": "Unable to update work items",
+        "message": "Due date selected precedes the start date for some work items. Ensure due date to be after the start date."
+      },
+      "invalid_state_transition": {
+        "title": "Unable to update work items",
+        "message": "State change is not allowed for some work items. Ensure the state change is allowed."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Change state, priority, and more for several work items at once. Save three minutes on an average per operation.",
+      "cta": "Upgrade to One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Recurring work items",
+      "description": "Set your repeatable work once, and we’ll take care of the repeats. You’ll see everything right here when it’s time.",
+      "new_recurring_work_item": "New recurring work item",
+      "update_recurring_work_item": "Update recurring work item",
+      "form": {
+        "interval": {
+          "title": "Schedule",
+          "start_date": {
+            "validation": {
+              "required": "Start date is required"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Interval type is required"
+            }
+          }
+        },
+        "button": {
+          "create": "Create recurring work item",
+          "update": "Update recurring work item"
+        }
+      },
+      "create_button": {
+        "label": "Create recurring work item",
+        "no_permission": "Contact your project admin to create recurring work items"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Your work, on autopilot",
+        "description": "Set it once. We’ll bring it back when it’s due. Upgrade to Business to make recurring work feel effortless."
+      },
+      "no_templates": {
+        "button": "Create your first recurring work item"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Recurring work item created",
+          "message": "{name}, the recurring work item, is now available for your workspace."
+        },
+        "error": {
+          "title": "We couldn't create that recurring work item this time.",
+          "message": "Try saving your details again or copy them over to a new recurring work item, preferably in another tab."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Recurring work item changed",
+          "message": "{name}, the recurring work item, was changed."
+        },
+        "error": {
+          "title": "We couldn't save changes to this recurring work item.",
+          "message": "Try saving your details again or come back to this recurring work item later. If there's trouble still, reach out to us."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Recurring work item deleted",
+          "message": "{name}, the recurring work item, has now been deleted from your workspace."
+        },
+        "error": {
+          "title": "We couldn't delete that recurring work item this.",
+          "message": "Try deleting it again or come back to it later. If you can't delete it then, reach out to us."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Delete recurring work item",
+      "description": {
+        "prefix": "Are you sure you want to delete recurring work item-",
+        "suffix": "? All of the data related to the recurring work item will be permanently removed. This action cannot be undone."
+      }
+    }
+  },
+  "epic": {
+    "new": "New Epic",
+    "label": "{count, plural, one {Epic} other {Epics}}",
+    "adding": "Adding epic",
+    "create": {
+      "success": "Epic created successfully"
+    },
+    "add": {
+      "label": "Add Epic",
+      "press_enter": "Press 'Enter' to add another epic"
+    },
+    "title": {
+      "label": "Epic Title",
+      "required": "Epic title is required."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/workflow.json b/packages/i18n/src/locales/en/workflow.json
new file mode 100644
index 0000000..06a4ba5
--- /dev/null
+++ b/packages/i18n/src/locales/en/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Allow new work items",
+      "work_item_creation_disable_tooltip": "Work item creation is disabled for this state",
+      "default_state": "Default state lets all members create new work items. This can't be changed",
+      "state_change_count": "{count, plural, one {1 permitted state change} other {{count} permitted state changes}}",
+      "movers_count": "{count, plural, one {1 listed reviewer} other {{count} listed reviewers}}",
+      "state_changes": {
+        "label": {
+          "default": "Add permitted state change",
+          "loading": "Adding permitted state change"
+        },
+        "move_to": "Change state to",
+        "movers": {
+          "label": "When reviewed by",
+          "tooltip": "Reviewers are people who are permitted to move work items from one state to another.",
+          "add": "Add reviewers"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "You can't move this work item here."
+    },
+    "workflow_enabled": {
+      "label": "State change"
+    },
+    "workflow_tree": {
+      "label": "For work items in",
+      "state_change_label": "can move it to"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Control the chaos of changes and reviews with Workflows.",
+        "description": "Set rules for where your work moves, by who, and when with Workflows in Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "View change history",
+      "reset_workflow": "Reset workflow"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Are you sure you want to reset this workflow?",
+        "description": "If you reset this workflow, all your state-change rules will be deleted and you will have to create them again to run them for this project."
+      },
+      "delete_state_change": {
+        "title": "Are you sure you want to delete this state-change rule?",
+        "description": "Once deleted, you can't undo this change and you will have to set the rule again if you want it running for this project."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} workflow",
+        "success": {
+          "title": "Success",
+          "message": "Workflow {action} successfully"
+        },
+        "error": {
+          "title": "Error",
+          "message": "Workflow could not be {action}. Please try again."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Success",
+          "message": "Workflow reset successfully"
+        },
+        "error": {
+          "title": "Error resetting workflow",
+          "message": "Workflow could not be reset. Please try again."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Error adding state change rule",
+          "message": "State change rule could not be added. Please try again."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Error modifying state change rule",
+          "message": "State change rule could not be modified. Please try again."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Error removing state change rule",
+          "message": "State change rule could not be removed. Please try again."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Error modifying state change rule reviewers",
+          "message": "State change rule reviewers could not be modified. Please try again."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/workspace-settings.json b/packages/i18n/src/locales/en/workspace-settings.json
new file mode 100644
index 0000000..562339b
--- /dev/null
+++ b/packages/i18n/src/locales/en/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Workspace settings",
+    "page_label": "{workspace} - General settings",
+    "key_created": "Key created",
+    "copy_key": "Copy and save this secret key in Plane Pages. You can't see this key after you hit Close. A CSV file containing the key has been downloaded.",
+    "token_copied": "Token copied to clipboard.",
+    "settings": {
+      "general": {
+        "title": "General",
+        "upload_logo": "Upload logo",
+        "edit_logo": "Edit logo",
+        "name": "Workspace name",
+        "company_size": "Company size",
+        "url": "Workspace URL",
+        "workspace_timezone": "Workspace Timezone",
+        "update_workspace": "Update workspace",
+        "delete_workspace": "Delete this workspace",
+        "delete_workspace_description": "When deleting a workspace, all of the data and resources within that workspace will be permanently removed and cannot be recovered.",
+        "delete_btn": "Delete this workspace",
+        "delete_modal": {
+          "title": "Are you sure you want to delete this workspace?",
+          "description": "You have an active trial to one of our paid plans. Please cancel it first to proceed.",
+          "dismiss": "Dismiss",
+          "cancel": "Cancel trial",
+          "success_title": "Workspace deleted.",
+          "success_message": "You will soon go to your profile page.",
+          "error_title": "That didn't work.",
+          "error_message": "Try again, please."
+        },
+        "errors": {
+          "name": {
+            "required": "Name is required",
+            "max_length": "Workspace name should not exceed 80 characters"
+          },
+          "company_size": {
+            "required": "Company size is required",
+            "select_a_range": "Select organization size"
+          }
+        }
+      },
+      "members": {
+        "title": "Members",
+        "add_member": "Add member",
+        "pending_invites": "Pending invites",
+        "invitations_sent_successfully": "Invitations sent successfully",
+        "leave_confirmation": "Are you sure you want to leave the workspace? You will no longer have access to this workspace. This action cannot be undone.",
+        "details": {
+          "full_name": "Full name",
+          "display_name": "Display name",
+          "email_address": "Email address",
+          "account_type": "Account type",
+          "authentication": "Authentication",
+          "joining_date": "Joining date"
+        },
+        "modal": {
+          "title": "Invite people to collaborate",
+          "description": "Invite people to collaborate on your workspace.",
+          "button": "Send invitations",
+          "button_loading": "Sending invitations",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "We need an email address to invite them.",
+            "invalid": "Email is invalid"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Billing & Plans",
+        "description": "Choose your plan, manage subscriptions, and easily upgrade as your needs grow.",
+        "title": "Billing & Plans",
+        "current_plan": "Current plan",
+        "free_plan": "You are currently using the free plan",
+        "view_plans": "View plans"
+      },
+      "exports": {
+        "heading": "Exports",
+        "description": "Export your project data in various formats and access your export history with download links.",
+        "title": "Exports",
+        "exporting": "Exporting",
+        "previous_exports": "Previous exports",
+        "export_separate_files": "Export the data into separate files",
+        "exporting_projects": "Exporting project",
+        "format": "Format",
+        "filters_info": "Apply filters to export specific work items based on your criteria.",
+        "modal": {
+          "title": "Export to",
+          "toasts": {
+            "success": {
+              "title": "Export successful",
+              "message": "You will be able to download the exported {entity} from the previous export."
+            },
+            "error": {
+              "title": "Export failed",
+              "message": "Export was unsuccessful. Please try again."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooks",
+        "description": "Automate notifications to external services when project events occur.",
+        "title": "Webhooks",
+        "add_webhook": "Add webhook",
+        "modal": {
+          "title": "Create webhook",
+          "details": "Webhook details",
+          "payload": "Payload URL",
+          "question": "Which events would you like to trigger this webhook?",
+          "error": "URL is required"
+        },
+        "secret_key": {
+          "title": "Secret key",
+          "message": "Generate a token to sign-in to the webhook payload"
+        },
+        "options": {
+          "all": "Send me everything",
+          "individual": "Select individual events"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook created",
+            "message": "The webhook has been successfully created"
+          },
+          "not_created": {
+            "title": "Webhook not created",
+            "message": "The webhook could not be created"
+          },
+          "updated": {
+            "title": "Webhook updated",
+            "message": "The webhook has been successfully updated"
+          },
+          "not_updated": {
+            "title": "Webhook not updated",
+            "message": "The webhook could not be updated"
+          },
+          "removed": {
+            "title": "Webhook removed",
+            "message": "The webhook has been successfully removed"
+          },
+          "not_removed": {
+            "title": "Webhook not removed",
+            "message": "The webhook could not be removed"
+          },
+          "secret_key_copied": {
+            "message": "Secret key copied to clipboard."
+          },
+          "secret_key_not_copied": {
+            "message": "Error occurred while copying secret key."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Access Tokens",
+        "description": "Generate secure API tokens to integrate your data with external systems and applications.",
+        "title": "Access Tokens",
+        "add_token": "Add access token",
+        "create_token": "Create token",
+        "never_expires": "Never expires",
+        "generate_token": "Generate token",
+        "generating": "Generating",
+        "delete": {
+          "title": "Delete access token",
+          "description": "Any application using this token will no longer have the access to Plane data. This action cannot be undone.",
+          "success": {
+            "title": "Success!",
+            "message": "The token has been successfully deleted"
+          },
+          "error": {
+            "title": "Error!",
+            "message": "The token could not be deleted"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integrations",
+        "heading": "Integrations",
+        "description": "Connect with popular tools and services to sync your work across your entire workflow ecosystem.",
+        "page_title": "Work with your Plane data in available apps or your own.",
+        "page_description": "View all the integrations in use by this workspace or you."
+      },
+      "imports": {
+        "title": "Imports",
+        "heading": "Imports",
+        "description": "Connect and import data from your existing project management tools to streamline your workflow integration."
+      },
+      "worklogs": {
+        "title": "Worklogs",
+        "heading": "Worklogs",
+        "description": "Download worklogs AKA timesheets for anyone in any project."
+      },
+      "group_syncing": {
+        "title": "Group syncing",
+        "heading": "Group syncing",
+        "description": "Link identity provider groups to projects and roles. User access updates automatically when group membership changes in your IdP, simplifying onboarding and offboarding.",
+        "enable": {
+          "title": "Enable group syncing",
+          "description": "Automatically add users to projects based on identity provider groups."
+        },
+        "config": {
+          "title": "Configure group sync",
+          "description": "Set up how identity provider groups are mapped to projects and roles.",
+          "sync_on_login": {
+            "title": "Sync on login",
+            "description": "Update group membership and project access when a user signs in."
+          },
+          "sync_offline": {
+            "title": "Offline sync",
+            "description": "Runs sync every six hours automatically, without waiting for users to log in."
+          },
+          "auto_remove": {
+            "title": "Auto remove",
+            "description": "Automatically remove users from projects when they no longer match the group."
+          },
+          "group_attribute_key": {
+            "title": "Group attribute key",
+            "description": "The identity provider attribute used to identify and sync user groups.",
+            "placeholder": "Groups"
+          }
+        },
+        "group_mapping": {
+          "title": "Group mapping",
+          "description": "Link identity provider groups to projects and roles.",
+          "button_text": "Add new group sync"
+        },
+        "toast": {
+          "updating": "Updating group syncing feature",
+          "success": "Group syncing feature updated successfully.",
+          "error": "Failed to update group syncing feature!"
+        },
+        "delete_modal": {
+          "title": "Delete group sync",
+          "content": "New users from this identity group will no longer be added to the project. Users already added will keep their current role."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "User group",
+            "required": "User group is required",
+            "placeholder": "Enter the IdP group names"
+          },
+          "project": {
+            "text": "Project",
+            "required": "Project is required",
+            "placeholder": "Select a project"
+          },
+          "default_role": {
+            "text": "Project role",
+            "required": "Project role is required",
+            "placeholder": "Select a project role"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identity",
+        "heading": "Identity",
+        "description": "Configure your domain and enable Single sign-on"
+      },
+      "project_states": {
+        "title": "Project states",
+        "heading": "See progress overview for all projects.",
+        "description": "Project States is a Plane-only feature for tracking progress of all your projects by any project property.",
+        "go_to_settings": "Go to settings"
+      },
+      "projects": {
+        "title": "Projects",
+        "description": "Manage project states, and enable project labels, and other configuration.",
+        "tabs": {
+          "states": "Project states",
+          "labels": "Project labels"
+        }
+      },
+      "templates": {
+        "title": "Templates",
+        "heading": "Templates",
+        "description": "Save 80% time spent on creating projects, work items, and pages when you use templates."
+      },
+      "relations": {
+        "title": "Relations",
+        "heading": "Relations",
+        "description": "Create and manage relation types that connect work items across your workspace."
+      },
+      "cancel_trial": {
+        "title": "Cancel your trial first.",
+        "description": "You have an active trial to one of our paid plans. Please cancel it first to proceed.",
+        "dismiss": "Dismiss",
+        "cancel": "Cancel trial",
+        "cancel_success_title": "Trial cancelled.",
+        "cancel_success_message": "You can now delete the workspace.",
+        "cancel_error_title": "That didn't work.",
+        "cancel_error_message": "Try again, please."
+      },
+      "applications": {
+        "internal": "Internal",
+        "title": "Applications",
+        "applicationId_copied": "Application ID copied to clipboard",
+        "clientId_copied": "Client ID copied to clipboard",
+        "clientSecret_copied": "Client Secret copied to clipboard",
+        "third_party_apps": "Third-party apps",
+        "your_apps": "Your apps",
+        "connect": "Connect",
+        "connected": "Connected",
+        "disconnect": "Disconnect",
+        "install": "Install",
+        "installed": "Installed",
+        "configure": "Configure",
+        "app_available": "You have made this app available to use with a Plane workspace",
+        "app_credentials_regenrated": {
+          "title": "App credentials successfully re-generated",
+          "description": "Replace the client secret everywhere it's used. The previous secret is no longer valid."
+        },
+        "app_created": {
+          "title": "App created successfully",
+          "description": "Use the credentials to install the app in a Plane workspace"
+        },
+        "installed_apps": "Installed apps",
+        "all_apps": "All apps",
+        "internal_apps": "Internal apps",
+        "app_name_title": "App Name",
+        "app_description_title": {
+          "label": "Long Description",
+          "placeholder": "Write a long description for marketplace. Press ‘/’ for commands."
+        },
+        "authorization_grant_type": {
+          "title": "Connection Type",
+          "description": "Choose if your app should be installed once for the workspace or let every user connect their own account"
+        },
+        "website": {
+          "title": "Website",
+          "description": "Link to your app's website.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "App Maker",
+          "description": "The person or organization creating the app."
+        },
+        "app_maker_error": "Maker name is required",
+        "setup_url": {
+          "label": "Setup URL",
+          "description": "Users will be redirected to this URL when they install the app.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "Webhook URL",
+          "description": "This is where we will send webhook events and updates from the workspaces where your app is installed.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Webhook Secret",
+          "description": "Secret used to verify incoming webhook requests.",
+          "placeholder": "Enter a random secret key"
+        },
+        "redirect_uris": {
+          "label": "Redirect URIs (space separated)",
+          "description": "Users will be redirected to this path after they have authenticated with Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Connect a Plane workspace to start using it",
+        "client_id_and_secret": "Client ID and Secret",
+        "client_id_and_secret_description": "Copy and save this secret key in Pages. You can't see this key again after you hit Close.",
+        "client_id_and_secret_download": "You can download a CSV with the key from here.",
+        "application_id": "Application ID",
+        "client_id": "Client ID",
+        "client_secret": "Client Secret",
+        "export_as_csv": "Export as CSV",
+        "slug_already_exists": "Slug already exists",
+        "failed_to_create_application": "Failed to create application",
+        "upload_logo": "Upload Logo",
+        "app_name_error": "App name is required",
+        "app_short_description_title": "Short Description",
+        "app_short_description_error": "App short description is required",
+        "app_description_error": "App description is required",
+        "app_slug_title": "App slug",
+        "app_slug_error": "App slug is required",
+        "invalid_website_error": "Invalid website",
+        "webhook_url_title": "Webhook URL",
+        "webhook_url_error": "Webhook URL is required",
+        "invalid_webhook_url_error": "Invalid webhook URL",
+        "redirect_uris_title": "Redirect URIs",
+        "redirect_uris_error": "Redirect URIs are required",
+        "invalid_redirect_uris_error": "Invalid redirect URIs",
+        "redirect_uris_description": "Enter space seperated URIs where the app will redirect to after the user e.g https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Authorized Javascript Origins",
+        "authorized_javascript_origins_error": "Authorized Javascript Origins are required",
+        "invalid_authorized_javascript_origins_error": "Invalid authorized Javascript Origins",
+        "authorized_javascript_origins_description": "Enter space seperated origins where the app will be allowed to make requests e.g app.com example.com",
+        "create_app": "Create app",
+        "update_app": "Update app",
+        "build_your_own_app": "Build your own app",
+        "edit_app_details": "Edit app details",
+        "regenerate_client_secret_description": "Regenerate the client secret. If you regenerate the secret, you can copy the key or download it to a CSV file right after.",
+        "regenerate_client_secret": "Regenerate client secret",
+        "regenerate_client_secret_confirm_title": "Sure you want to regenerate the client secret?",
+        "regenerate_client_secret_confirm_description": "App using this secret will stop working. You will need to update the secret in the app.",
+        "regenerate_client_secret_confirm_cancel": "Cancel",
+        "regenerate_client_secret_confirm_regenerate": "Regenerate",
+        "read_only_access_to_workspace": "Read-only access to your workspace",
+        "write_access_to_workspace": "Write access to your workspace",
+        "read_only_access_to_user_profile": "Read-only access to your user profile",
+        "write_access_to_user_profile": "Write access to your user profile",
+        "connect_app_to_workspace": "Connect {app} to your workspace {workspace}",
+        "user_permissions": "User permissions",
+        "user_permissions_description": "User permissions are used to grant access to the user's profile.",
+        "workspace_permissions": "Workspace permissions",
+        "workspace_permissions_description": "Workspace permissions are used to grant access to the workspace.",
+        "with_the_permissions": "with the permissions",
+        "app_consent_title": "{app} is requesting access to your Plane workspace and profile.",
+        "choose_workspace_to_connect_app_with": "Choose a workspace to connect the app with",
+        "app_consent_workspace_permissions_title": "{app} would like",
+        "app_consent_user_permissions_title": "{app} can also request a user's permission to the following resources. These permissions will be requested and authorized of and by a user only.",
+        "app_consent_accept_title": "By accepting, you",
+        "app_consent_accept_1": "Grant the app access to your Plane data wherever you can use the app in or outside Plane",
+        "app_consent_accept_2": "Agree to {app}'s Privacy Policy and Terms Of Use",
+        "accepting": "Accepting...",
+        "accept": "Accept",
+        "categories": "Categories",
+        "select_app_categories": "Select app categories",
+        "categories_title": "Categories",
+        "categories_error": "Categories are required",
+        "invalid_categories_error": "Invalid categories",
+        "categories_description": "Select the categories that best describe the app",
+        "supported_plans": "Supported Plans",
+        "supported_plans_description": "Select the workspace plans that can install this application. Leave empty to allow all plans.",
+        "select_plans": "Select Plans",
+        "privacy_policy_url_title": "Privacy Policy URL",
+        "privacy_policy_url_error": "Privacy Policy URL is required",
+        "invalid_privacy_policy_url_error": "Invalid privacy policy URL",
+        "terms_of_service_url_title": "Terms of Service URL",
+        "terms_of_service_url_error": "Terms of Service URL is required",
+        "invalid_terms_of_service_url_error": "Invalid terms of service URL",
+        "support_url_title": "Support URL",
+        "support_url_error": "Support URL is required",
+        "invalid_support_url_error": "Invalid support URL",
+        "video_url_title": "Video URL",
+        "video_url_error": "Video URL is required",
+        "invalid_video_url_error": "Invalid video URL",
+        "setup_url_error": "Setup URL is required",
+        "invalid_setup_url_error": "Invalid setup URL",
+        "configuration_url_title": "Configuration URL",
+        "configuration_url_error": "Configuration URL is required",
+        "invalid_configuration_url_error": "Invalid configuration URL",
+        "contact_email_title": "Contact Email",
+        "contact_email_error": "Contact Email is required",
+        "invalid_contact_email_error": "Invalid contact email",
+        "upload_attachments": "Upload Attachments",
+        "uploading_images": "Uploading {count} Image{count, plural, one {s} other {s}}",
+        "drop_images_here": "Drop images here",
+        "click_to_upload_images": "Click to upload images",
+        "invalid_file_or_exceeds_size_limit": "Invalid file or exceeds size limit ({size} MB)",
+        "uploading": "Uploading...",
+        "upload_and_save": "Upload & Save",
+        "app_consent_no_access_title": "Request to install",
+        "app_consent_no_access_description": "This app can only be installed after a workspace admin installs it. Contact your workspace admin to proceed.",
+        "app_consent_unapproved_title": "This app hasn't been reviewed or approved by Plane yet.",
+        "app_consent_unapproved_description": "Make sure you trust this app before connecting it to your workspace.",
+        "go_to_app": "Go to app",
+        "enable_app_mentions": "Enable App Mentions",
+        "enable_app_mentions_tooltip": "When this is enabled, Users can mention or assign Work Items to this application.",
+        "scopes": "Scopes",
+        "select_scopes": "Select Scopes",
+        "read_access_to": "Read-only access to",
+        "write_access_to": "Write access to",
+        "global_permission_expiration": "Global scopes are expiring soon. Use granular scopes instead. For example, use project:read instead of a global read.",
+        "selected_scopes": "{count} selected",
+        "scopes_and_permissions": "Scopes & Permissions",
+        "read": "Read",
+        "write": "Write",
+        "scope_description": {
+          "projects": "Access to projects, and all project related entities",
+          "wiki": "Access to wiki, and all wiki related entities",
+          "workspaces": "Access to workspaces, and all workspace related entities",
+          "stickies": "Access to stickies, and all sticky related entities",
+          "profile": "Access to user profile information",
+          "agents": "Access to agents, and all agent related entities",
+          "assets": "Access to assets, and all asset related entities"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "See your work get smarter and faster with AI that is natively connected to your work and knowledge base. "
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Scripts",
+        "new_script": "New Script",
+        "description": "Automate your workflows with custom scripts and automation rules."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "No access tokens created",
+        "description": "Plane APIs can be used to integrate your data in Plane with any external system. Create a token to get started."
+      },
+      "webhooks": {
+        "title": "No webhooks added",
+        "description": "Create webhooks to receive real-time updates and automate actions."
+      },
+      "exports": {
+        "title": "No exports yet",
+        "description": "Anytime you export, you will also have a copy here for reference."
+      },
+      "imports": {
+        "title": "No imports yet",
+        "description": "Find all your previous imports here and download them."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/workspace.json b/packages/i18n/src/locales/en/workspace.json
new file mode 100644
index 0000000..7e75895
--- /dev/null
+++ b/packages/i18n/src/locales/en/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Create your workspace",
+    "subheading": "To start using Plane, you need to create or join a workspace.",
+    "form": {
+      "name": {
+        "label": "Name your workspace",
+        "placeholder": "Something familiar and recognizable is always best."
+      },
+      "url": {
+        "label": "Set your workspace's URL",
+        "placeholder": "Type or paste a URL",
+        "edit_slug": "You can only edit the slug of the URL"
+      },
+      "organization_size": {
+        "label": "How many people will use this workspace?",
+        "placeholder": "Select a range"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Only your instance admin can create workspaces",
+        "description": "If you know your instance admin's email address, click the button below to get in touch with them.",
+        "request_button": "Request instance admin"
+      },
+      "validation": {
+        "name_alphanumeric": "Workspaces names can contain only (' '), ('-'), ('_') and alphanumeric characters.",
+        "name_length": "Limit your name to 80 characters.",
+        "url_alphanumeric": "URLs can contain only ('-') and alphanumeric characters.",
+        "url_length": "Limit your URL to 48 characters.",
+        "url_already_taken": "Workspace URL is already taken!"
+      }
+    },
+    "request_email": {
+      "subject": "Requesting a new workspace",
+      "body": "Hi instance admin(s),\n\nPlease create a new workspace with the URL [/workspace-name] for [purpose of creating the workspace].\n\nThanks,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Create workspace",
+      "loading": "Creating workspace"
+    },
+    "toast": {
+      "success": {
+        "title": "Success",
+        "message": "Workspace created successfully"
+      },
+      "error": {
+        "title": "Error",
+        "message": "Workspace could not be created. Please try again."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Overview of your projects, activity, and metrics",
+        "description": "Welcome to Plane, we are excited to have you here. Create your first project and track your work items, and this page will transform into a space that helps you progress. Admins will also see items which help their team progress.",
+        "primary_button": {
+          "text": "Build your first project",
+          "comic": {
+            "title": "Everything starts with a project in Plane",
+            "description": "A project could be a product's roadmap, a marketing campaign, or launching a new car."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Analytics",
+    "page_label": "{workspace} - Analytics",
+    "open_tasks": "Total open tasks",
+    "error": "There was some error in fetching the data.",
+    "work_items_closed_in": "Work items closed in",
+    "selected_projects": "Selected projects",
+    "total_members": "Total members",
+    "total_cycles": "Total cycles",
+    "total_modules": "Total modules",
+    "pending_work_items": {
+      "title": "Pending work items",
+      "empty_state": "Analysis of pending work items by co-workers appears here."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Work items closed in a year",
+      "empty_state": "Close work items to view analysis of the same in the form of a graph."
+    },
+    "most_work_items_created": {
+      "title": "Most work items created",
+      "empty_state": "Co-workers and the number of work items created by them appears here."
+    },
+    "most_work_items_closed": {
+      "title": "Most work items closed",
+      "empty_state": "Co-workers and the number of work items closed by them appears here."
+    },
+    "tabs": {
+      "scope_and_demand": "Scope and Demand",
+      "custom": "Custom Analytics"
+    },
+    "total": "Total {entity}",
+    "started_work_items": "Started {entity}",
+    "backlog_work_items": "Backlog {entity}",
+    "un_started_work_items": "Unstarted {entity}",
+    "completed_work_items": "Completed {entity}",
+    "project_insights": "Project Insights",
+    "summary_of_projects": "Summary of Projects",
+    "all_projects": "All Projects",
+    "trend_on_charts": "Trend on charts",
+    "active_projects": "Active Projects",
+    "customized_insights": "Customized Insights",
+    "created_vs_resolved": "Created vs Resolved",
+    "empty_state": {
+      "project_insights": {
+        "title": "No data yet",
+        "description": "Work items assigned to you, broken down by state, will show up here."
+      },
+      "created_vs_resolved": {
+        "title": "No data yet",
+        "description": "Work items created and resolved over time will show up here."
+      },
+      "customized_insights": {
+        "title": "No data yet",
+        "description": "Work items assigned to you, broken down by state, will show up here."
+      },
+      "general": {
+        "title": "Track progress, workloads, and allocations. Spot trends, remove blockers, and move work faster",
+        "description": "See scope versus demand, estimates, and scope creep. Get performance by team members and teams, and make sure your project runs on time.",
+        "primary_button": {
+          "text": "Start your first project",
+          "comic": {
+            "title": "Analytics works best with Cycles + Modules",
+            "description": "First, timebox your issues into Cycles and, if you can, group issues that span more than a cycle into Modules. Check out both on the left nav."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "No data yet",
+        "description": "Cycle progress analytics will appear here. Add work items to cycles to start tracking progress."
+      },
+      "module_progress": {
+        "title": "No data yet",
+        "description": "Module progress analytics will appear here. Add work items to modules to start tracking progress."
+      },
+      "intake_trends": {
+        "title": "No data yet",
+        "description": "Intake trends analytics will appear here. Add work items to intake to start tracking trends."
+      }
+    },
+    "upgrade_to_plan": "Upgrade to {plan} to unlock {tab}",
+    "workitem_resolved_vs_pending": "Work items resolved vs pending",
+    "projects_by_status": "Projects by status",
+    "active_users": "Active users",
+    "intake_trends": "Intake Trends"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Project} other {Projects}}",
+    "create": {
+      "label": "Add Project"
+    },
+    "network": {
+      "label": "Network",
+      "private": {
+        "title": "Private",
+        "description": "Accessible only by invite"
+      },
+      "public": {
+        "title": "Public",
+        "description": "Anyone in the workspace except Guests can join"
+      }
+    },
+    "error": {
+      "permission": "You don't have permission to perform this action.",
+      "cycle_delete": "Failed to delete cycle",
+      "module_delete": "Failed to delete module",
+      "issue_delete": "Failed to delete work item"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Unstarted",
+      "started": "Started",
+      "completed": "Completed",
+      "cancelled": "Cancelled"
+    },
+    "sort": {
+      "manual": "Manual",
+      "name": "Name",
+      "created_at": "Created date",
+      "members_length": "Number of members"
+    },
+    "scope": {
+      "my_projects": "My projects",
+      "archived_projects": "Archived"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# month} other{# months}}",
+      "days_count": "{days, plural, one{# day} other{# days}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "No active projects",
+        "description": "Think of each project as the parent for goal-oriented work. Projects are where Jobs, Cycles, and Modules live and, along with your colleagues, help you achieve that goal. Create a new project or filter for archived projects.",
+        "primary_button": {
+          "text": "Start your first project",
+          "comic": {
+            "title": "Everything starts with a project in Plane",
+            "description": "A project could be a product's roadmap, a marketing campaign, or launching a new car."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "No project",
+        "description": "To create work items or manage your work, you need to create a project or be a part of one.",
+        "primary_button": {
+          "text": "Start your first project",
+          "comic": {
+            "title": "Everything starts with a project in Plane",
+            "description": "A project could be a product's roadmap, a marketing campaign, or launching a new car."
+          }
+        }
+      },
+      "filter": {
+        "title": "No matching projects",
+        "description": "No projects detected with the matching criteria.\n Create a new project instead."
+      },
+      "search": {
+        "description": "No projects detected with the matching criteria.\nCreate a new project instead"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Add view",
+    "empty_state": {
+      "all-issues": {
+        "title": "No work items in the project",
+        "description": "First project done! Now, slice your work into trackable pieces with work items. Let's go!",
+        "primary_button": {
+          "text": "Create new work item"
+        }
+      },
+      "assigned": {
+        "title": "No work items yet",
+        "description": "Work items assigned to you can be tracked from here.",
+        "primary_button": {
+          "text": "Create new work item"
+        }
+      },
+      "created": {
+        "title": "No work items yet",
+        "description": "All work items created by you come here, track them here directly.",
+        "primary_button": {
+          "text": "Create new work item"
+        }
+      },
+      "subscribed": {
+        "title": "No work items yet",
+        "description": "Subscribe to work items you are interested in, track all of them here."
+      },
+      "custom-view": {
+        "title": "No work items yet",
+        "description": "Work items that applies to the filters, track all of them here."
+      }
+    },
+    "delete_view": {
+      "title": "Are you sure you want to delete this view?",
+      "content": "If you confirm, all the sort, filter, and display options + the layout you have chosen for this view will be permanently deleted without any way to restore them."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Draft a work item",
+    "empty_state": {
+      "title": "Half-written work items, and soon, comments will show up here.",
+      "description": "To try this out, start adding a work item and leave it mid-way or create your first draft below. 😉",
+      "primary_button": {
+        "text": "Create your first draft"
+      }
+    },
+    "delete_modal": {
+      "title": "Delete draft",
+      "description": "Are you sure you want to delete this draft? This can't be undone."
+    },
+    "toasts": {
+      "created": {
+        "success": "Draft created",
+        "error": "Work item could not be created. Please try again."
+      },
+      "deleted": {
+        "success": "Draft deleted"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Write a note, a doc, or a full knowledge base. Get Galileo, Plane's AI assistant, to help you get started",
+        "description": "Pages are thoughts potting space in Plane. Take down meeting notes, format them easily, embed work items, lay them out using a library of components, and keep them all in your project's context. To make short work of any doc, invoke Galileo, Plane's AI, with a shortcut or the click of a button.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "private": {
+        "title": "No private pages yet",
+        "description": "Keep your private thoughts here. When you're ready to share, the team's just a click away.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "public": {
+        "title": "No workspace pages yet",
+        "description": "See pages shared with everyone in your workspace right here.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "archived": {
+        "title": "No archived pages yet",
+        "description": "Archive pages not on your radar. Access them here when needed."
+      },
+      "shared": {
+        "title": "No shared pages yet",
+        "description": "Pages that others have shared with you will appear here."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "No active cycles",
+        "description": "Cycles of your projects that includes any period that encompasses today's date within its range. Find the progress and details of all your active cycle here."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Import Members from CSV",
+      "description": "Upload a CSV with columns: Email, Display Name, First Name, Last Name, Role (5, 15, or 20)",
+      "dropzone": {
+        "active": "Drop CSV file here",
+        "inactive": "Drag & drop or click to upload",
+        "file_type": "Only .csv files supported"
+      },
+      "buttons": {
+        "cancel": "Cancel",
+        "import": "Import",
+        "try_again": "Try Again",
+        "close": "Close",
+        "done": "Done"
+      },
+      "progress": {
+        "uploading": "Uploading...",
+        "importing": "Importing..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Import Failed",
+          "complete": "Import Complete"
+        },
+        "message": {
+          "seat_limit": "Unable to import members due to seat limit restrictions.",
+          "success": "Successfully added {count} member{plural} to the workspace.",
+          "no_imports": "No members were imported from the CSV file."
+        },
+        "stats": {
+          "successful": "Successful",
+          "failed": "Failed"
+        },
+        "download_errors": "Download errors"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Invalid file",
+          "message": "Only CSV files are supported."
+        },
+        "import_failed": {
+          "title": "Import failed",
+          "message": "Something went wrong."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/accessibility.json b/packages/i18n/src/locales/es/accessibility.json
new file mode 100644
index 0000000..4d957f5
--- /dev/null
+++ b/packages/i18n/src/locales/es/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo del espacio de trabajo",
+      "open_workspace_switcher": "Abrir cambiador de espacio de trabajo",
+      "open_user_menu": "Abrir menú de usuario",
+      "open_command_palette": "Abrir paleta de comandos",
+      "open_extended_sidebar": "Abrir barra lateral extendida",
+      "close_extended_sidebar": "Cerrar barra lateral extendida",
+      "create_favorites_folder": "Crear carpeta de favoritos",
+      "open_folder": "Abrir carpeta",
+      "close_folder": "Cerrar carpeta",
+      "open_favorites_menu": "Abrir menú de favoritos",
+      "close_favorites_menu": "Cerrar menú de favoritos",
+      "enter_folder_name": "Ingresar nombre de carpeta",
+      "create_new_project": "Crear nuevo proyecto",
+      "open_projects_menu": "Abrir menú de proyectos",
+      "close_projects_menu": "Cerrar menú de proyectos",
+      "toggle_quick_actions_menu": "Alternar menú de acciones rápidas",
+      "open_project_menu": "Abrir menú de proyecto",
+      "close_project_menu": "Cerrar menú de proyecto",
+      "collapse_sidebar": "Colapsar barra lateral",
+      "expand_sidebar": "Expandir barra lateral",
+      "edition_badge": "Abrir modal de planes de pago"
+    },
+    "auth_forms": {
+      "clear_email": "Limpiar correo electrónico",
+      "show_password": "Mostrar contraseña",
+      "hide_password": "Ocultar contraseña",
+      "close_alert": "Cerrar alerta",
+      "close_popover": "Cerrar ventana emergente"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/auth.json b/packages/i18n/src/locales/es/auth.json
new file mode 100644
index 0000000..b8e0353
--- /dev/null
+++ b/packages/i18n/src/locales/es/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identidad",
+    "description": "Configura tu dominio para acceder a funciones de seguridad, incluido el inicio de sesión único.",
+    "domain_management": {
+      "header": "Gestión de dominios",
+      "verified_domains": {
+        "header": "Dominios verificados",
+        "description": "Verifica la propiedad de un dominio de correo electrónico para habilitar el inicio de sesión único.",
+        "button_text": "Agregar dominio",
+        "list": {
+          "domain_name": "Nombre del dominio",
+          "status": "Estado",
+          "status_verified": "Verificado",
+          "status_failed": "Fallido",
+          "status_pending": "Pendiente"
+        },
+        "add_domain": {
+          "title": "Agregar dominio",
+          "description": "Agrega tu dominio para configurar SSO y verificarlo.",
+          "form": {
+            "domain_label": "Dominio",
+            "domain_placeholder": "plane.so",
+            "domain_required": "El dominio es obligatorio",
+            "domain_invalid": "Ingresa un nombre de dominio válido (ej. plane.so)"
+          },
+          "primary_button_text": "Agregar dominio",
+          "primary_button_loading_text": "Agregando",
+          "toast": {
+            "success_title": "¡Éxito!",
+            "success_message": "Dominio agregado exitosamente. Por favor, verifícalo agregando el registro DNS TXT.",
+            "error_message": "Error al agregar el dominio. Por favor, inténtalo de nuevo."
+          }
+        },
+        "verify_domain": {
+          "title": "Verifica tu dominio",
+          "description": "Sigue estos pasos para verificar tu dominio.",
+          "instructions": {
+            "label": "Instrucciones",
+            "step_1": "Ve a la configuración DNS de tu proveedor de dominio.",
+            "step_2": {
+              "part_1": "Crea un",
+              "part_2": "registro TXT",
+              "part_3": "y pega el valor completo del registro proporcionado a continuación."
+            },
+            "step_3": "Esta actualización generalmente toma unos minutos, pero puede tardar hasta 72 horas en completarse.",
+            "step_4": "Haz clic en \"Verificar dominio\" para confirmar una vez que tu registro DNS esté actualizado."
+          },
+          "verification_code_label": "Valor del registro TXT",
+          "verification_code_description": "Agrega este registro a tu configuración DNS",
+          "domain_label": "Dominio",
+          "primary_button_text": "Verificar dominio",
+          "primary_button_loading_text": "Verificando",
+          "secondary_button_text": "Lo haré más tarde",
+          "toast": {
+            "success_title": "¡Éxito!",
+            "success_message": "Dominio verificado exitosamente.",
+            "error_message": "Error al verificar el dominio. Por favor, inténtalo de nuevo."
+          }
+        },
+        "delete_domain": {
+          "title": "Eliminar dominio",
+          "description": {
+            "prefix": "¿Estás seguro de que quieres eliminar",
+            "suffix": "? Esta acción no se puede deshacer."
+          },
+          "primary_button_text": "Eliminar",
+          "primary_button_loading_text": "Eliminando",
+          "secondary_button_text": "Cancelar",
+          "toast": {
+            "success_title": "¡Éxito!",
+            "success_message": "Dominio eliminado exitosamente.",
+            "error_message": "Error al eliminar el dominio. Por favor, inténtalo de nuevo."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Inicio de sesión único",
+      "disabled_message": "Agrega un dominio verificado para configurar SSO",
+      "configure": {
+        "create": "Configurar",
+        "update": "Editar"
+      },
+      "switch_alert_modal": {
+        "title": "¿Cambiar método SSO a {newProviderShortName}?",
+        "content": "Estás a punto de habilitar {newProviderLongName} ({newProviderShortName}). Esta acción deshabilitará automáticamente {activeProviderLongName} ({activeProviderShortName}). Los usuarios que intenten iniciar sesión a través de {activeProviderShortName} ya no podrán acceder a la plataforma hasta que cambien al nuevo método. ¿Estás seguro de que quieres continuar?",
+        "primary_button_text": "Cambiar",
+        "primary_button_text_loading": "Cambiando",
+        "secondary_button_text": "Cancelar"
+      },
+      "form_section": {
+        "title": "Detalles proporcionados por IdP para {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Guardando",
+        "save_changes": "Guardar cambios",
+        "configure_only": "Solo configurar",
+        "configure_and_enable": "Configurar y habilitar",
+        "default": "Guardar"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} detalles proporcionados para tu IdP",
+        "button_text": "Obtener detalles de configuración"
+      },
+      "saml": {
+        "header": "Habilitar SAML",
+        "description": "Configura tu proveedor de identidad SAML para habilitar el inicio de sesión único.",
+        "configure": {
+          "title": "Habilitar SAML",
+          "description": "Verifica la propiedad de un dominio de correo electrónico para acceder a funciones de seguridad, incluido el inicio de sesión único.",
+          "toast": {
+            "success_title": "¡Éxito!",
+            "create_success_message": "Proveedor SAML creado exitosamente.",
+            "update_success_message": "Proveedor SAML actualizado exitosamente.",
+            "error_title": "¡Error!",
+            "error_message": "Error al guardar el proveedor SAML. Por favor, inténtalo de nuevo."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Detalles web",
+            "entity_id": {
+              "label": "ID de entidad | Audiencia | Información de metadatos",
+              "description": "Generaremos esta parte de los metadatos que identifica esta aplicación Plane como un servicio autorizado en tu IdP."
+            },
+            "callback_url": {
+              "label": "URL de inicio de sesión único",
+              "description": "Generaremos esto por ti. Agrega esto en el campo URL de redirección de inicio de sesión de tu IdP."
+            },
+            "logout_url": {
+              "label": "URL de cierre de sesión único",
+              "description": "Generaremos esto por ti. Agrega esto en el campo URL de redirección de cierre de sesión único de tu IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Detalles móviles",
+            "entity_id": {
+              "label": "ID de entidad | Audiencia | Información de metadatos",
+              "description": "Generaremos esta parte de los metadatos que identifica esta aplicación Plane como un servicio autorizado en tu IdP."
+            },
+            "callback_url": {
+              "label": "URL de inicio de sesión único",
+              "description": "Generaremos esto por ti. Agrega esto en el campo URL de redirección de inicio de sesión de tu IdP."
+            },
+            "logout_url": {
+              "label": "URL de cierre de sesión único",
+              "description": "Generaremos esto por ti. Agrega esto en el campo URL de redirección de cierre de sesión de tu IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Detalles de mapeo",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Habilitar OIDC",
+        "description": "Configura tu proveedor de identidad OIDC para habilitar el inicio de sesión único.",
+        "configure": {
+          "title": "Habilitar OIDC",
+          "description": "Verifica la propiedad de un dominio de correo electrónico para acceder a funciones de seguridad, incluido el inicio de sesión único.",
+          "toast": {
+            "success_title": "¡Éxito!",
+            "create_success_message": "Proveedor OIDC creado exitosamente.",
+            "update_success_message": "Proveedor OIDC actualizado exitosamente.",
+            "error_title": "¡Error!",
+            "error_message": "Error al guardar el proveedor OIDC. Por favor, inténtalo de nuevo."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Detalles web",
+            "origin_url": {
+              "label": "URL de origen",
+              "description": "Generaremos esto para esta aplicación Plane. Agrega esto como un origen confiable en el campo correspondiente de tu IdP."
+            },
+            "callback_url": {
+              "label": "URL de redirección",
+              "description": "Generaremos esto por ti. Agrega esto en el campo URL de redirección de inicio de sesión de tu IdP."
+            },
+            "logout_url": {
+              "label": "URL de cierre de sesión",
+              "description": "Generaremos esto por ti. Agrega esto en el campo URL de redirección de cierre de sesión de tu IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Detalles móviles",
+            "origin_url": {
+              "label": "URL de origen",
+              "description": "Generaremos esto para esta aplicación Plane. Agrega esto como un origen confiable en el campo correspondiente de tu IdP."
+            },
+            "callback_url": {
+              "label": "URL de redirección",
+              "description": "Generaremos esto por ti. Agrega esto en el campo URL de redirección de inicio de sesión de tu IdP."
+            },
+            "logout_url": {
+              "label": "URL de cierre de sesión",
+              "description": "Generaremos esto por ti. Agrega esto en el campo URL de redirección de cierre de sesión de tu IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "Correo electrónico",
+        "placeholder": "nombre@empresa.com",
+        "errors": {
+          "required": "El correo electrónico es obligatorio",
+          "invalid": "El correo electrónico no es válido"
+        }
+      },
+      "password": {
+        "label": "Contraseña",
+        "set_password": "Establecer una contraseña",
+        "placeholder": "Ingresa la contraseña",
+        "confirm_password": {
+          "label": "Confirmar contraseña",
+          "placeholder": "Confirmar contraseña"
+        },
+        "current_password": {
+          "label": "Contraseña actual"
+        },
+        "new_password": {
+          "label": "Nueva contraseña",
+          "placeholder": "Ingresa nueva contraseña"
+        },
+        "change_password": {
+          "label": {
+            "default": "Cambiar contraseña",
+            "submitting": "Cambiando contraseña"
+          }
+        },
+        "errors": {
+          "match": "Las contraseñas no coinciden",
+          "empty": "Por favor ingresa tu contraseña",
+          "length": "La contraseña debe tener más de 8 caracteres",
+          "strength": {
+            "weak": "La contraseña es débil",
+            "strong": "La contraseña es fuerte"
+          }
+        },
+        "submit": "Establecer contraseña",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "¡Éxito!",
+              "message": "Contraseña cambiada exitosamente."
+            },
+            "error": {
+              "title": "¡Error!",
+              "message": "Algo salió mal. Por favor intenta de nuevo."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Código único",
+        "placeholder": "obtiene-establece-vuela",
+        "paste_code": "Pega el código enviado a tu correo electrónico",
+        "requesting_new_code": "Solicitando nuevo código",
+        "sending_code": "Enviando código"
+      },
+      "already_have_an_account": "¿Ya tienes una cuenta?",
+      "login": "Iniciar sesión",
+      "create_account": "Crear una cuenta",
+      "new_to_plane": "¿Nuevo en Plane?",
+      "back_to_sign_in": "Volver a iniciar sesión",
+      "resend_in": "Reenviar en {seconds} segundos",
+      "sign_in_with_unique_code": "Iniciar sesión con código único",
+      "forgot_password": "¿Olvidaste tu contraseña?",
+      "username": {
+        "label": "Nombre de usuario",
+        "placeholder": "Ingrese su nombre de usuario"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Crea una cuenta para comenzar a gestionar el trabajo con tu equipo.",
+        "step": {
+          "email": {
+            "header": "Registrarse",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Registrarse",
+            "sub_header": "Regístrate usando una combinación de correo electrónico y contraseña."
+          },
+          "unique_code": {
+            "header": "Registrarse",
+            "sub_header": "Regístrate usando un código único enviado a la dirección de correo electrónico anterior."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Intenta establecer una contraseña fuerte para continuar"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Inicia sesión para comenzar a gestionar el trabajo con tu equipo.",
+        "step": {
+          "email": {
+            "header": "Iniciar sesión o registrarse",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Iniciar sesión o registrarse",
+            "sub_header": "Usa tu combinación de correo electrónico y contraseña para iniciar sesión."
+          },
+          "unique_code": {
+            "header": "Iniciar sesión o registrarse",
+            "sub_header": "Inicia sesión usando un código único enviado a la dirección de correo electrónico anterior."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Restablecer tu contraseña",
+      "description": "Ingresa la dirección de correo electrónico verificada de tu cuenta de usuario y te enviaremos un enlace para restablecer la contraseña.",
+      "email_sent": "Enviamos el enlace de restablecimiento a tu dirección de correo electrónico",
+      "send_reset_link": "Enviar enlace de restablecimiento",
+      "errors": {
+        "smtp_not_enabled": "Vemos que tu administrador no ha habilitado SMTP, no podremos enviar un enlace para restablecer la contraseña"
+      },
+      "toast": {
+        "success": {
+          "title": "Correo enviado",
+          "message": "Revisa tu bandeja de entrada para encontrar un enlace para restablecer tu contraseña. Si no aparece en unos minutos, revisa tu carpeta de spam."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Algo salió mal. Por favor intenta de nuevo."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Establecer nueva contraseña",
+      "description": "Asegura tu cuenta con una contraseña fuerte"
+    },
+    "set_password": {
+      "title": "Asegura tu cuenta",
+      "description": "Establecer una contraseña te ayuda a iniciar sesión de forma segura"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "¡Error!",
+          "message": "Error al cerrar sesión. Por favor intenta de nuevo."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Continuar con {ldapProviderName}",
+        "sub_header": "Ingrese sus credenciales de {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/automation.json b/packages/i18n/src/locales/es/automation.json
new file mode 100644
index 0000000..f49d529
--- /dev/null
+++ b/packages/i18n/src/locales/es/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Automatizaciones personalizadas",
+      "create_automation": "Crear automatización"
+    },
+    "scope": {
+      "label": "Alcance",
+      "run_on": "Ejecutar en"
+    },
+    "trigger": {
+      "label": "Disparador",
+      "add_trigger": "Agregar disparador",
+      "sidebar_header": "Configuración del disparador",
+      "input_label": "¿Cuál es el disparador para esta automatización?",
+      "input_placeholder": "Selecciona una opción",
+      "section_plane_events": "Eventos de Plane",
+      "section_time_based": "Basado en tiempo",
+      "fixed_schedule": "Horario fijo",
+      "schedule": {
+        "frequency": "Frecuencia",
+        "select_day": "Seleccionar día",
+        "day_of_month": "Día del mes",
+        "monthly_every": "Cada",
+        "monthly_day_aria": "Día {day}",
+        "time": "Hora",
+        "hour": "Hora",
+        "minute": "Minuto",
+        "hour_suffix": "h",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Zona horaria",
+        "timezone_placeholder": "Seleccionar una zona horaria",
+        "frequency_daily": "Diario",
+        "frequency_weekly": "Semanal",
+        "frequency_monthly": "Mensual",
+        "on": "El",
+        "validation_weekly_day_required": "Selecciona al menos un día de la semana.",
+        "validation_monthly_date_required": "Selecciona un día del mes.",
+        "main_content_schedule_summary_daily": "Todos los días a las {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Cada semana el {days} a las {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Cada mes el día {day} a las {time} ({timezone}).",
+        "schedule_mode": "Modo de programación",
+        "schedule_mode_fixed": "Fijo",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Ingresar expresión Cron",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Expresión Cron no válida.",
+        "cron_preview": "Esta expresión Cron ejecuta \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Atrás",
+        "next": "Agregar acción"
+      },
+      "warning": {
+        "disabled_trigger_switching": "No puedes cambiar el tipo de disparador una vez creado"
+      }
+    },
+    "condition": {
+      "label": "Siempre que",
+      "add_condition": "Agregar condición",
+      "adding_condition": "Agregando condición"
+    },
+    "action": {
+      "label": "Acción",
+      "add_action": "Agregar acción",
+      "sidebar_header": "Acciones",
+      "input_label": "¿Qué hace la automatización?",
+      "input_placeholder": "Selecciona una opción",
+      "handler_name": {
+        "add_comment": "Agregar comentario",
+        "change_property": "Cambiar propiedad",
+        "run_script": "Ejecutar script"
+      },
+      "configuration": {
+        "label": "Configuración",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Selecciona una propiedad",
+            "change_type": "Seleccionar",
+            "property_value_select": "{count, plural, one{Seleccionar valor} other{Seleccionar valores}}",
+            "property_value_select_date": "Seleccionar fecha"
+          },
+          "validation": {
+            "property_name_required": "El nombre de la propiedad es requerido",
+            "change_type_required": "El tipo de cambio es requerido",
+            "property_value_required": "El valor de la propiedad es requerido"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Agregar comentario"
+      },
+      "run_script_block": {
+        "title": "Ejecutar script"
+      },
+      "change_property_block": {
+        "title": "Cambiar propiedad"
+      },
+      "validation": {
+        "delete_only_action": "Desactiva la automatización antes de eliminar su única acción."
+      }
+    },
+    "conjunctions": {
+      "and": "Y",
+      "or": "O",
+      "if": "Si",
+      "then": "Entonces"
+    },
+    "enable": {
+      "alert": "Presiona 'Activar' cuando tu automatización esté completa. Una vez activada, la automatización estará lista para ejecutarse.",
+      "validation": {
+        "required": "La automatización debe tener un disparador y al menos una acción para ser activada."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "La automatización debe estar desactivada antes de eliminarla."
+      }
+    },
+    "table": {
+      "title": "Título de la automatización",
+      "scope": "Alcance",
+      "projects": "Proyectos",
+      "last_run_on": "Última ejecución",
+      "created_on": "Creado el",
+      "last_updated_on": "Última actualización",
+      "last_run_status": "Estado de la última ejecución",
+      "average_duration": "Duración promedio",
+      "owner": "Propietario",
+      "executions": "Ejecuciones"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Crear automatización",
+        "update": "Actualizar automatización"
+      },
+      "title": {
+        "placeholder": "Nombra tu automatización.",
+        "required_error": "El título es requerido"
+      },
+      "description": {
+        "placeholder": "Describe tu automatización."
+      },
+      "submit_button": {
+        "create": "Crear automatización",
+        "update": "Actualizar automatización"
+      }
+    },
+    "delete_modal": {
+      "heading": "Eliminar automatización"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Mostrar fallos",
+        "all": "Todos",
+        "only_activity": "Solo actividad",
+        "only_run_history": "Solo historial de ejecución"
+      },
+      "run_history": {
+        "initiator": "Iniciador"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Automatización creada exitosamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Falló la creación de la automatización."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Automatización actualizada exitosamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Falló la actualización de la automatización."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Automatización activada exitosamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Falló la activación de la automatización."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Automatización desactivada exitosamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Falló la desactivación de la automatización."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automatización eliminada",
+          "message": "{name}, la automatización, ha sido eliminada de tu proyecto."
+        },
+        "error": {
+          "title": "No pudimos eliminar esa automatización esta vez.",
+          "message": "Intenta eliminarla de nuevo o vuelve más tarde. Si no puedes eliminarla entonces, contáctanos."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "¡Error!",
+            "message": "Falló la creación de la acción. ¡Por favor intenta de nuevo!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "¡Error!",
+            "message": "Falló la actualización de la acción. ¡Por favor intenta de nuevo!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Aún no hay automatizaciones para mostrar.",
+        "description": "Las automatizaciones te ayudan a eliminar tareas repetitivas configurando disparadores, condiciones y acciones. Crea una para ahorrar tiempo y mantener el trabajo fluyendo sin esfuerzo."
+      },
+      "upgrade": {
+        "title": "Automatizaciones",
+        "description": "Las automatizaciones son una forma de automatizar tareas en tu proyecto.",
+        "sub_description": "Recupera el 80% de tu tiempo administrativo cuando uses Automatizaciones."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Selecciona los proyectos en los que ejecutar esta automatización",
+        "all_projects": {
+          "label": "Todos los proyectos",
+          "description": "La automatización se ejecutará para todos los proyectos del espacio de trabajo."
+        },
+        "select_projects": {
+          "label": "Seleccionar proyectos",
+          "description": "La automatización se ejecutará para los proyectos seleccionados del espacio de trabajo.",
+          "placeholder": "Seleccionar proyectos"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automatizaciones",
+        "title": "Automatizaciones",
+        "description": "Estandariza los procesos en tu espacio de trabajo con automatizaciones globales."
+      },
+      "table": {
+        "scope": {
+          "global": "Global",
+          "project": {
+            "label": "Proyecto",
+            "multiple": "Múltiples",
+            "all": "Todos"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/common.json b/packages/i18n/src/locales/es/common.json
new file mode 100644
index 0000000..64440c9
--- /dev/null
+++ b/packages/i18n/src/locales/es/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Estamos trabajando en esto. Si necesitas asistencia inmediata,",
+    "reach_out_to_us": "contáctanos",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "De lo contrario, intenta actualizar la página ocasionalmente o visita nuestra",
+    "status_page": "página de estado"
+  },
+  "submit": "Enviar",
+  "cancel": "Cancelar",
+  "loading": "Cargando",
+  "error": "Error",
+  "success": "Éxito",
+  "warning": "Advertencia",
+  "info": "Información",
+  "close": "Cerrar",
+  "yes": "Sí",
+  "no": "No",
+  "ok": "Aceptar",
+  "name": "Nombre",
+  "unknown_user": "Usuario desconocido",
+  "description": "Descripción",
+  "search": "Buscar",
+  "add_member": "Agregar miembro",
+  "adding_members": "Agregando miembros",
+  "remove_member": "Eliminar miembro",
+  "add_members": "Agregar miembros",
+  "adding_member": "Agregando miembros",
+  "remove_members": "Eliminar miembros",
+  "add": "Agregar",
+  "adding": "Agregando",
+  "remove": "Eliminar",
+  "add_new": "Agregar nuevo",
+  "remove_selected": "Eliminar seleccionados",
+  "first_name": "Nombre",
+  "last_name": "Apellido",
+  "email": "Correo electrónico",
+  "display_name": "Nombre para mostrar",
+  "role": "Rol",
+  "timezone": "Zona horaria",
+  "avatar": "Avatar",
+  "cover_image": "Imagen de portada",
+  "password": "Contraseña",
+  "change_cover": "Cambiar portada",
+  "language": "Idioma",
+  "saving": "Guardando",
+  "save_changes": "Guardar cambios",
+  "deactivate_account": "Desactivar cuenta",
+  "deactivate_account_description": "Al desactivar una cuenta, todos los datos y recursos dentro de esa cuenta se eliminarán permanentemente y no se podrán recuperar.",
+  "profile_settings": "Configuración del perfil",
+  "your_account": "Tu cuenta",
+  "security": "Seguridad",
+  "activity": "Actividad",
+  "activity_empty_state": {
+    "no_activity": "Sin actividad aún",
+    "no_transitions": "Sin transiciones aún",
+    "no_comments": "Sin comentarios aún",
+    "no_worklogs": "Sin registros de trabajo aún",
+    "no_history": "Sin historial aún"
+  },
+  "preferences": "Preferencias",
+  "language_and_time": "Idioma y hora",
+  "notifications": "Notificaciones",
+  "workspaces": "Espacios de trabajo",
+  "create_workspace": "Crear espacio de trabajo",
+  "invitations": "Invitaciones",
+  "summary": "Resumen",
+  "assigned": "Asignado",
+  "created": "Creado",
+  "subscribed": "Suscrito",
+  "you_do_not_have_the_permission_to_access_this_page": "No tienes permiso para acceder a esta página.",
+  "something_went_wrong_please_try_again": "Algo salió mal. Por favor, inténtalo de nuevo.",
+  "load_more": "Cargar más",
+  "select_or_customize_your_interface_color_scheme": "Selecciona o personaliza el esquema de color de tu interfaz.",
+  "timezone_setting": "Configuración de zona horaria actual.",
+  "language_setting": "Elige el idioma utilizado en la interfaz de usuario.",
+  "settings_moved_to_preferences": "La configuración de zona horaria e idioma se ha movido a preferencias.",
+  "go_to_preferences": "Ir a preferencias",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Selecciona el estilo de movimiento del cursor que te parezca adecuado.",
+  "theme": "Tema",
+  "smooth_cursor": "Cursor suave",
+  "system_preference": "Preferencia del sistema",
+  "light": "Claro",
+  "dark": "Oscuro",
+  "light_contrast": "Alto contraste claro",
+  "dark_contrast": "Alto contraste oscuro",
+  "custom": "Tema personalizado",
+  "select_your_theme": "Selecciona tu tema",
+  "customize_your_theme": "Personaliza tu tema",
+  "background_color": "Color de fondo",
+  "text_color": "Color del texto",
+  "primary_color": "Color primario (Tema)",
+  "sidebar_background_color": "Color de fondo de la barra lateral",
+  "sidebar_text_color": "Color del texto de la barra lateral",
+  "set_theme": "Establecer tema",
+  "enter_a_valid_hex_code_of_6_characters": "Ingresa un código hexadecimal válido de 6 caracteres",
+  "background_color_is_required": "El color de fondo es requerido",
+  "text_color_is_required": "El color del texto es requerido",
+  "primary_color_is_required": "El color primario es requerido",
+  "sidebar_background_color_is_required": "El color de fondo de la barra lateral es requerido",
+  "sidebar_text_color_is_required": "El color del texto de la barra lateral es requerido",
+  "updating_theme": "Actualizando tema",
+  "theme_updated_successfully": "Tema actualizado exitosamente",
+  "failed_to_update_the_theme": "Error al actualizar el tema",
+  "email_notifications": "Notificaciones por correo electrónico",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Mantente al tanto de los elementos de trabajo a los que estás suscrito. Activa esto para recibir notificaciones.",
+  "email_notification_setting_updated_successfully": "Configuración de notificaciones por correo electrónico actualizada exitosamente",
+  "failed_to_update_email_notification_setting": "Error al actualizar la configuración de notificaciones por correo electrónico",
+  "notify_me_when": "Notificarme cuando",
+  "property_changes": "Cambios de propiedades",
+  "property_changes_description": "Notificarme cuando cambien las propiedades de los elementos de trabajo como asignados, prioridad, estimaciones o cualquier otra cosa.",
+  "state_change": "Cambio de estado",
+  "state_change_description": "Notificarme cuando los elementos de trabajo se muevan a un estado diferente",
+  "issue_completed": "Elemento de trabajo completado",
+  "issue_completed_description": "Notificarme solo cuando se complete un elemento de trabajo",
+  "comments": "Comentarios",
+  "comments_description": "Notificarme cuando alguien deje un comentario en el elemento de trabajo",
+  "mentions": "Menciones",
+  "mentions_description": "Notificarme solo cuando alguien me mencione en los comentarios o descripción",
+  "old_password": "Contraseña anterior",
+  "general_settings": "Configuración general",
+  "sign_out": "Cerrar sesión",
+  "signing_out": "Cerrando sesión",
+  "active_cycles": "Ciclos activos",
+  "active_cycles_description": "Monitorea ciclos en todos los proyectos, rastrea elementos de trabajo de alta prioridad y enfócate en los ciclos que necesitan atención.",
+  "on_demand_snapshots_of_all_your_cycles": "Instantáneas bajo demanda de todos tus ciclos",
+  "upgrade": "Actualizar",
+  "10000_feet_view": "Vista panorámica de todos los ciclos activos.",
+  "10000_feet_view_description": "Aléjate para ver los ciclos en ejecución en todos tus proyectos a la vez en lugar de ir de Ciclo en Ciclo en cada proyecto.",
+  "get_snapshot_of_each_active_cycle": "Obtén una instantánea de cada ciclo activo.",
+  "get_snapshot_of_each_active_cycle_description": "Rastrea métricas de alto nivel para todos los ciclos activos, ve su estado de progreso y obtén una idea del alcance contra los plazos.",
+  "compare_burndowns": "Compara los burndowns.",
+  "compare_burndowns_description": "Monitorea cómo se está desempeñando cada uno de tus equipos con un vistazo al informe de burndown de cada ciclo.",
+  "quickly_see_make_or_break_issues": "Ve rápidamente los elementos de trabajo críticos.",
+  "quickly_see_make_or_break_issues_description": "Previsualiza elementos de trabajo de alta prioridad para cada ciclo contra fechas de vencimiento. Vélos todos por ciclo con un clic.",
+  "zoom_into_cycles_that_need_attention": "Enfócate en los ciclos que necesitan atención.",
+  "zoom_into_cycles_that_need_attention_description": "Investiga el estado de cualquier ciclo que no se ajuste a las expectativas con un clic.",
+  "stay_ahead_of_blockers": "Mantente adelante de los bloqueadores.",
+  "stay_ahead_of_blockers_description": "Detecta desafíos de un proyecto a otro y ve dependencias entre ciclos que no son obvias desde ninguna otra vista.",
+  "analytics": "Análisis",
+  "workspace_invites": "Invitaciones al espacio de trabajo",
+  "enter_god_mode": "Entrar en modo dios",
+  "workspace_logo": "Logo del espacio de trabajo",
+  "new_issue": "Nuevo elemento de trabajo",
+  "your_work": "Tu trabajo",
+  "drafts": "Borradores",
+  "projects": "Proyectos",
+  "views": "Vistas",
+  "archives": "Archivos",
+  "settings": "Configuración",
+  "failed_to_move_favorite": "Error al mover favorito",
+  "favorites": "Favoritos",
+  "no_favorites_yet": "Aún no hay favoritos",
+  "create_folder": "Crear carpeta",
+  "new_folder": "Nueva carpeta",
+  "favorite_updated_successfully": "Favorito actualizado exitosamente",
+  "favorite_created_successfully": "Favorito creado exitosamente",
+  "folder_already_exists": "La carpeta ya existe",
+  "folder_name_cannot_be_empty": "El nombre de la carpeta no puede estar vacío",
+  "something_went_wrong": "Algo salió mal",
+  "failed_to_reorder_favorite": "Error al reordenar favorito",
+  "favorite_removed_successfully": "Favorito eliminado exitosamente",
+  "failed_to_create_favorite": "Error al crear favorito",
+  "failed_to_rename_favorite": "Error al renombrar favorito",
+  "project_link_copied_to_clipboard": "Enlace del proyecto copiado al portapapeles",
+  "link_copied": "Enlace copiado",
+  "add_project": "Agregar proyecto",
+  "create_project": "Crear proyecto",
+  "failed_to_remove_project_from_favorites": "No se pudo eliminar el proyecto de favoritos. Por favor, inténtalo de nuevo.",
+  "project_created_successfully": "Proyecto creado exitosamente",
+  "project_created_successfully_description": "Proyecto creado exitosamente. Ahora puedes comenzar a agregar elementos de trabajo.",
+  "project_name_already_taken": "El nombre del proyecto ya está en uso.",
+  "project_name_cannot_contain_special_characters": "El nombre del proyecto no puede contener caracteres especiales.",
+  "project_identifier_already_taken": "El identificador del proyecto ya está en uso.",
+  "project_cover_image_alt": "Imagen de portada del proyecto",
+  "name_is_required": "El nombre es requerido",
+  "title_should_be_less_than_255_characters": "El título debe tener menos de 255 caracteres",
+  "project_name": "Nombre del proyecto",
+  "project_id_must_be_at_least_1_character": "El ID del proyecto debe tener al menos 1 carácter",
+  "project_id_must_be_at_most_5_characters": "El ID del proyecto debe tener como máximo 5 caracteres",
+  "project_id": "ID del proyecto",
+  "project_id_tooltip_content": "Te ayuda a identificar elementos de trabajo en el proyecto de manera única. Máximo 50 caracteres.",
+  "description_placeholder": "Descripción",
+  "only_alphanumeric_non_latin_characters_allowed": "Solo se permiten caracteres alfanuméricos y no latinos.",
+  "project_id_is_required": "El ID del proyecto es requerido",
+  "project_id_allowed_char": "Solo se permiten caracteres alfanuméricos y no latinos.",
+  "project_id_min_char": "El ID del proyecto debe tener al menos 1 carácter",
+  "project_id_max_char": "El ID del proyecto debe tener como máximo {max} caracteres",
+  "project_description_placeholder": "Ingresa la descripción del proyecto",
+  "select_network": "Seleccionar red",
+  "lead": "Líder",
+  "date_range": "Rango de fechas",
+  "private": "Privado",
+  "public": "Público",
+  "accessible_only_by_invite": "Accesible solo por invitación",
+  "anyone_in_the_workspace_except_guests_can_join": "Cualquiera en el espacio de trabajo excepto invitados puede unirse",
+  "creating": "Creando",
+  "creating_project": "Creando proyecto",
+  "adding_project_to_favorites": "Agregando proyecto a favoritos",
+  "project_added_to_favorites": "Proyecto agregado a favoritos",
+  "couldnt_add_the_project_to_favorites": "No se pudo agregar el proyecto a favoritos. Por favor, inténtalo de nuevo.",
+  "removing_project_from_favorites": "Eliminando proyecto de favoritos",
+  "project_removed_from_favorites": "Proyecto eliminado de favoritos",
+  "couldnt_remove_the_project_from_favorites": "No se pudo eliminar el proyecto de favoritos. Por favor, inténtalo de nuevo.",
+  "add_to_favorites": "Agregar a favoritos",
+  "remove_from_favorites": "Eliminar de favoritos",
+  "publish_project": "Publicar proyecto",
+  "publish": "Publicar",
+  "copy_link": "Copiar enlace",
+  "leave_project": "Abandonar proyecto",
+  "join_the_project_to_rearrange": "Únete al proyecto para reorganizar",
+  "drag_to_rearrange": "Arrastra para reorganizar",
+  "congrats": "¡Felicitaciones!",
+  "open_project": "Abrir proyecto",
+  "issues": "Elementos de trabajo",
+  "cycles": "Ciclos",
+  "modules": "Módulos",
+  "pages": "Páginas",
+  "intake": "Entrada",
+  "renew": "Renovar",
+  "preview": "Vista previa",
+  "time_tracking": "Seguimiento de tiempo",
+  "work_management": "Gestión del trabajo",
+  "projects_and_issues": "Proyectos y elementos de trabajo",
+  "projects_and_issues_description": "Activa o desactiva estos en este proyecto.",
+  "cycles_description": "Organiza el trabajo por proyecto en períodos de tiempo y ajusta la duración según sea necesario. Un ciclo puede ser de 2 semanas y el siguiente de 1 semana.",
+  "modules_description": "Organiza el trabajo en subproyectos con líderes y responsables dedicados.",
+  "views_description": "Guarda ordenamientos, filtros y opciones de visualización personalizadas o compártelos con tu equipo.",
+  "pages_description": "Crea y edita contenido libre; notas, documentos, lo que sea.",
+  "intake_description": "Permite que personas ajenas al equipo compartan errores, comentarios y sugerencias sin interrumpir tu flujo de trabajo.",
+  "time_tracking_description": "Registra el tiempo dedicado a elementos de trabajo y proyectos.",
+  "work_management_description": "Gestiona tu trabajo y proyectos con facilidad.",
+  "documentation": "Documentación",
+  "message_support": "Mensaje al soporte",
+  "contact_sales": "Contactar ventas",
+  "hyper_mode": "Modo Hyper",
+  "keyboard_shortcuts": "Atajos de teclado",
+  "whats_new": "¿Qué hay de nuevo?",
+  "version": "Versión",
+  "we_are_having_trouble_fetching_the_updates": "Estamos teniendo problemas para obtener las actualizaciones.",
+  "our_changelogs": "nuestros registros de cambios",
+  "for_the_latest_updates": "para las últimas actualizaciones.",
+  "please_visit": "Por favor visita",
+  "docs": "Documentación",
+  "full_changelog": "Registro de cambios completo",
+  "support": "Soporte",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Desarrollado por Plane Pages",
+  "please_select_at_least_one_invitation": "Por favor selecciona al menos una invitación.",
+  "please_select_at_least_one_invitation_description": "Por favor selecciona al menos una invitación para unirte al espacio de trabajo.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Vemos que alguien te ha invitado a unirte a un espacio de trabajo",
+  "join_a_workspace": "Únete a un espacio de trabajo",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Vemos que alguien te ha invitado a unirte a un espacio de trabajo",
+  "join_a_workspace_description": "Únete a un espacio de trabajo",
+  "accept_and_join": "Aceptar y unirse",
+  "go_home": "Ir a inicio",
+  "no_pending_invites": "No hay invitaciones pendientes",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Puedes ver aquí si alguien te invita a un espacio de trabajo",
+  "back_to_home": "Volver a inicio",
+  "workspace_name": "nombre-del-espacio-de-trabajo",
+  "deactivate_your_account": "Desactivar tu cuenta",
+  "deactivate_your_account_description": "Una vez desactivada, no se te podrán asignar elementos de trabajo ni se te facturará por tu espacio de trabajo. Para reactivar tu cuenta, necesitarás una invitación a un espacio de trabajo con esta dirección de correo electrónico.",
+  "deactivating": "Desactivando",
+  "confirm": "Confirmar",
+  "confirming": "Confirmando",
+  "draft_created": "Borrador creado",
+  "issue_created_successfully": "Elemento de trabajo creado exitosamente",
+  "draft_creation_failed": "Error al crear borrador",
+  "issue_creation_failed": "Error al crear elemento de trabajo",
+  "draft_issue": "Borrador de elemento de trabajo",
+  "issue_updated_successfully": "Elemento de trabajo actualizado exitosamente",
+  "issue_could_not_be_updated": "El elemento de trabajo no pudo ser actualizado",
+  "create_a_draft": "Crear un borrador",
+  "save_to_drafts": "Guardar en borradores",
+  "save": "Guardar",
+  "update": "Actualizar",
+  "updating": "Actualizando",
+  "create_new_issue": "Crear nuevo elemento de trabajo",
+  "editor_is_not_ready_to_discard_changes": "El editor no está listo para descartar cambios",
+  "failed_to_move_issue_to_project": "Error al mover elemento de trabajo al proyecto",
+  "create_more": "Crear más",
+  "add_to_project": "Agregar al proyecto",
+  "discard": "Descartar",
+  "duplicate_issue_found": "Se encontró un elemento de trabajo duplicado",
+  "duplicate_issues_found": "Se encontraron elementos de trabajo duplicados",
+  "no_matching_results": "No hay resultados coincidentes",
+  "title_is_required": "El título es requerido",
+  "title": "Título",
+  "state": "Estado",
+  "transition": "Transición",
+  "history": "Historial",
+  "priority": "Prioridad",
+  "none": "Ninguno",
+  "urgent": "Urgente",
+  "high": "Alta",
+  "medium": "Media",
+  "low": "Baja",
+  "members": "Miembros",
+  "assignee": "Asignado",
+  "assignees": "Asignados",
+  "subscriber": "{count, plural, one{# Suscriptor} other{# Suscriptores}}",
+  "you": "Tú",
+  "labels": "Etiquetas",
+  "create_new_label": "Crear nueva etiqueta",
+  "label_name": "Nombre de etiqueta",
+  "failed_to_create_label": "No se pudo crear la etiqueta. Por favor, inténtelo de nuevo.",
+  "start_date": "Fecha de inicio",
+  "end_date": "Fecha de fin",
+  "due_date": "Fecha de vencimiento",
+  "target_date": "Fecha objetivo",
+  "estimate": "Estimación",
+  "change_parent_issue": "Cambiar elemento de trabajo padre",
+  "remove_parent_issue": "Eliminar elemento de trabajo padre",
+  "add_parent": "Agregar padre",
+  "loading_members": "Cargando miembros",
+  "view_link_copied_to_clipboard": "Enlace de vista copiado al portapapeles.",
+  "required": "Requerido",
+  "optional": "Opcional",
+  "Cancel": "Cancelar",
+  "edit": "Editar",
+  "archive": "Archivar",
+  "restore": "Restaurar",
+  "open_in_new_tab": "Abrir en nueva pestaña",
+  "delete": "Eliminar",
+  "deleting": "Eliminando",
+  "make_a_copy": "Hacer una copia",
+  "move_to_project": "Mover al proyecto",
+  "good": "Buenos",
+  "morning": "días",
+  "afternoon": "tardes",
+  "evening": "noches",
+  "show_all": "Mostrar todo",
+  "show_less": "Mostrar menos",
+  "no_data_yet": "Aún no hay datos",
+  "syncing": "Sincronizando",
+  "add_work_item": "Agregar elemento de trabajo",
+  "advanced_description_placeholder": "Presiona '/' para comandos",
+  "create_work_item": "Crear elemento de trabajo",
+  "attachments": "Archivos adjuntos",
+  "declining": "Rechazando",
+  "declined": "Rechazado",
+  "decline": "Rechazar",
+  "unassigned": "Sin asignar",
+  "work_items": "Elementos de trabajo",
+  "add_link": "Agregar enlace",
+  "points": "Puntos",
+  "no_assignee": "Sin asignado",
+  "no_assignees_yet": "Aún no hay asignados",
+  "no_labels_yet": "Aún no hay etiquetas",
+  "ideal": "Ideal",
+  "current": "Actual",
+  "no_matching_members": "No hay miembros coincidentes",
+  "leaving": "Abandonando",
+  "removing": "Eliminando",
+  "leave": "Abandonar",
+  "refresh": "Actualizar",
+  "refreshing": "Actualizando",
+  "refresh_status": "Actualizar estado",
+  "prev": "Anterior",
+  "next": "Siguiente",
+  "re_generating": "Regenerando",
+  "re_generate": "Regenerar",
+  "re_generate_key": "Regenerar clave",
+  "export": "Exportar",
+  "member": "{count, plural, one{# miembro} other{# miembros}}",
+  "new_password_must_be_different_from_old_password": "La nueva contraseña debe ser diferente a la contraseña anterior",
+  "edited": "Modificado",
+  "bot": "Bot",
+  "settings_description": "Administra las preferencias de tu cuenta, espacio de trabajo y proyecto en un solo lugar. Cambia entre pestañas para configurar fácilmente.",
+  "back_to_workspace": "Volver al espacio de trabajo",
+  "upgrade_request": "Pide a tu administrador del espacio de trabajo que actualice.",
+  "copied_to_clipboard": "Copiado al portapapeles",
+  "copied_to_clipboard_description": "La URL se ha copiado correctamente al portapapeles",
+  "toast": {
+    "success": "¡Éxito!",
+    "error": "¡Error!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Enlace creado",
+        "message": "El enlace se ha creado correctamente"
+      },
+      "not_created": {
+        "title": "Enlace no creado",
+        "message": "No se pudo crear el enlace"
+      },
+      "updated": {
+        "title": "Enlace actualizado",
+        "message": "El enlace se ha actualizado correctamente"
+      },
+      "not_updated": {
+        "title": "Enlace no actualizado",
+        "message": "No se pudo actualizar el enlace"
+      },
+      "removed": {
+        "title": "Enlace eliminado",
+        "message": "El enlace se ha eliminado correctamente"
+      },
+      "not_removed": {
+        "title": "Enlace no eliminado",
+        "message": "No se pudo eliminar el enlace"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "La URL no es válida",
+        "placeholder": "Escribe o pega una URL"
+      },
+      "title": {
+        "text": "Título a mostrar",
+        "placeholder": "Cómo te gustaría ver este enlace"
+      }
+    }
+  },
+  "common": {
+    "all": "Todo",
+    "no_items_in_this_group": "No hay elementos en este grupo",
+    "drop_here_to_move": "Suelta aquí para mover",
+    "states": "Estados",
+    "state": "Estado",
+    "state_groups": "Grupos de estados",
+    "state_group": "Grupos de estado",
+    "priorities": "Prioridades",
+    "priority": "Prioridad",
+    "team_project": "Proyecto de equipo",
+    "project": "Proyecto",
+    "cycle": "Ciclo",
+    "cycles": "Ciclos",
+    "module": "Módulo",
+    "modules": "Módulos",
+    "labels": "Etiquetas",
+    "label": "Etiqueta",
+    "admins": "Administradores",
+    "users": "Usuarios",
+    "guests": "Invitados",
+    "assignees": "Asignados",
+    "assignee": "Asignado",
+    "created_by": "Creado por",
+    "none": "Ninguno",
+    "link": "Enlace",
+    "estimates": "Estimaciones",
+    "estimate": "Estimación",
+    "created_at": "Creado en",
+    "updated_at": "Actualizado el",
+    "completed_at": "Completado en",
+    "layout": "Diseño",
+    "filters": "Filtros",
+    "display": "Mostrar",
+    "load_more": "Cargar más",
+    "activity": "Actividad",
+    "analytics": "Análisis",
+    "dates": "Fechas",
+    "success": "¡Éxito!",
+    "something_went_wrong": "Algo salió mal",
+    "error": {
+      "label": "¡Error!",
+      "message": "Ocurrió un error. Por favor, inténtalo de nuevo."
+    },
+    "group_by": "Agrupar por",
+    "epic": "Epic",
+    "epics": "Epics",
+    "work_item": "Elemento de trabajo",
+    "work_items": "Elementos de trabajo",
+    "sub_work_item": "Sub-elemento de trabajo",
+    "views": "Vistas",
+    "pages": "Páginas",
+    "add": "Agregar",
+    "warning": "Advertencia",
+    "updating": "Actualizando",
+    "adding": "Agregando",
+    "update": "Actualizar",
+    "creating": "Creando",
+    "create": "Crear",
+    "cancel": "Cancelar",
+    "description": "Descripción",
+    "title": "Título",
+    "attachment": "Archivo adjunto",
+    "general": "General",
+    "features": "Características",
+    "automation": "Automatización",
+    "project_name": "Nombre del proyecto",
+    "project_id": "ID del proyecto",
+    "project_timezone": "Zona horaria del proyecto",
+    "created_on": "Creado el",
+    "updated_on": "Actualizado el",
+    "completed_on": "Completed on",
+    "update_project": "Actualizar proyecto",
+    "identifier_already_exists": "El identificador ya existe",
+    "add_more": "Agregar más",
+    "defaults": "Valores predeterminados",
+    "add_label": "Agregar etiqueta",
+    "customize_time_range": "Personalizar rango de tiempo",
+    "loading": "Cargando",
+    "attachments": "Archivos adjuntos",
+    "property": "Propiedad",
+    "properties": "Propiedades",
+    "parent": "Padre",
+    "page": "página",
+    "remove": "Eliminar",
+    "archiving": "Archivando",
+    "archive": "Archivar",
+    "access": {
+      "public": "Público",
+      "private": "Privado"
+    },
+    "done": "Hecho",
+    "sub_work_items": "Sub-elementos de trabajo",
+    "comment": "Comentario",
+    "workspace_level": "Nivel de espacio de trabajo",
+    "order_by": {
+      "label": "Ordenar por",
+      "manual": "Manual - Clasificación",
+      "last_created": "Último creado",
+      "last_updated": "Última actualización",
+      "start_date": "Fecha de inicio",
+      "due_date": "Fecha de vencimiento",
+      "asc": "Ascendente",
+      "desc": "Descendente",
+      "updated_on": "Actualizado el"
+    },
+    "sort": {
+      "asc": "Ascendente",
+      "desc": "Descendente",
+      "created_on": "Creado el",
+      "updated_on": "Actualizado el"
+    },
+    "comments": "Comentarios",
+    "updates": "Actualizaciones",
+    "additional_updates": "Actualizaciones adicionales",
+    "clear_all": "Limpiar todo",
+    "copied": "¡Copiado!",
+    "link_copied": "¡Enlace copiado!",
+    "link_copied_to_clipboard": "Enlace copiado al portapapeles",
+    "copied_to_clipboard": "Enlace del elemento de trabajo copiado al portapapeles",
+    "branch_name_copied_to_clipboard": "Nombre de rama copiado al portapapeles",
+    "is_copied_to_clipboard": "El elemento de trabajo está copiado al portapapeles",
+    "no_links_added_yet": "Aún no se han agregado enlaces",
+    "add_link": "Agregar enlace",
+    "links": "Enlaces",
+    "go_to_workspace": "Ir al espacio de trabajo",
+    "progress": "Progreso",
+    "optional": "Opcional",
+    "join": "Unirse",
+    "go_back": "Volver",
+    "continue": "Continuar",
+    "resend": "Reenviar",
+    "relations": "Relaciones",
+    "dependencies": "Dependencias",
+    "errors": {
+      "default": {
+        "title": "¡Error!",
+        "message": "Algo salió mal. Por favor, inténtalo de nuevo."
+      },
+      "required": "Este campo es obligatorio",
+      "entity_required": "{entity} es obligatorio",
+      "restricted_entity": "{entity} está restringido"
+    },
+    "update_link": "Actualizar enlace",
+    "attach": "Adjuntar",
+    "create_new": "Crear nuevo",
+    "add_existing": "Agregar existente",
+    "type_or_paste_a_url": "Escribe o pega una URL",
+    "url_is_invalid": "La URL no es válida",
+    "display_title": "Título a mostrar",
+    "link_title_placeholder": "Cómo te gustaría ver este enlace",
+    "url": "URL",
+    "side_peek": "Vista lateral",
+    "modal": "Modal",
+    "full_screen": "Pantalla completa",
+    "close_peek_view": "Cerrar la vista previa",
+    "toggle_peek_view_layout": "Alternar diseño de vista previa",
+    "options": "Opciones",
+    "duration": "Duración",
+    "today": "Hoy",
+    "week": "Semana",
+    "month": "Mes",
+    "quarter": "Trimestre",
+    "press_for_commands": "Presiona '/' para comandos",
+    "click_to_add_description": "Haz clic para agregar descripción",
+    "on_track": "En camino",
+    "off_track": "Fuera de camino",
+    "at_risk": "En riesgo",
+    "timeline": "Cronograma",
+    "completion": "Finalización",
+    "upcoming": "Próximo",
+    "completed": "Completado",
+    "in_progress": "En progreso",
+    "planned": "Planificado",
+    "paused": "Pausado",
+    "search": {
+      "label": "Buscar",
+      "placeholder": "Escribe para buscar",
+      "no_matches_found": "No se encontraron coincidencias",
+      "no_matching_results": "No hay resultados coincidentes",
+      "min_chars": "Escribe al menos {count} caracteres para buscar",
+      "error": "Error al obtener los resultados de búsqueda",
+      "no_results": {
+        "title": "No hay resultados coincidentes",
+        "description": "Elimina los criterios de búsqueda para ver todos los resultados"
+      }
+    },
+    "actions": {
+      "edit": "Editar",
+      "make_a_copy": "Hacer una copia",
+      "open_in_new_tab": "Abrir en nueva pestaña",
+      "copy_link": "Copiar enlace",
+      "copy_branch_name": "Copiar nombre de rama",
+      "archive": "Archivar",
+      "restore": "Restaurar",
+      "delete": "Eliminar",
+      "remove_relation": "Eliminar relación",
+      "subscribe": "Suscribirse",
+      "unsubscribe": "Cancelar suscripción",
+      "clear_sorting": "Limpiar ordenamiento",
+      "show_weekends": "Mostrar fines de semana",
+      "enable": "Habilitar",
+      "disable": "Deshabilitar",
+      "copy_markdown": "Copiar markdown",
+      "reply": "Responder"
+    },
+    "name": "Nombre",
+    "discard": "Descartar",
+    "confirm": "Confirmar",
+    "confirming": "Confirmando",
+    "read_the_docs": "Leer la documentación",
+    "default": "Predeterminado",
+    "active": "Activo",
+    "enabled": "Habilitado",
+    "disabled": "Deshabilitado",
+    "mandate": "Mandato",
+    "mandatory": "Obligatorio",
+    "global": "Global",
+    "yes": "Sí",
+    "no": "No",
+    "please_wait": "Por favor espera",
+    "enabling": "Habilitando",
+    "disabling": "Deshabilitando",
+    "beta": "Beta",
+    "or": "o",
+    "next": "Siguiente",
+    "back": "Atrás",
+    "retry": "Reintentar",
+    "cancelling": "Cancelando",
+    "configuring": "Configurando",
+    "clear": "Limpiar",
+    "import": "Importar",
+    "connect": "Conectar",
+    "authorizing": "Autorizando",
+    "processing": "Procesando",
+    "no_data_available": "No hay datos disponibles",
+    "from": "de {name}",
+    "authenticated": "Autenticado",
+    "select": "Seleccionar",
+    "upgrade": "Mejorar",
+    "add_seats": "Agregar asientos",
+    "projects": "Proyectos",
+    "workspace": "Espacio de trabajo",
+    "workspaces": "Espacios de trabajo",
+    "team": "Equipo",
+    "teams": "Equipos",
+    "entity": "Entidad",
+    "entities": "Entidades",
+    "task": "Tarea",
+    "tasks": "Tareas",
+    "section": "Sección",
+    "sections": "Secciones",
+    "edit": "Editar",
+    "connecting": "Conectando",
+    "connected": "Conectado",
+    "disconnect": "Desconectar",
+    "disconnecting": "Desconectando",
+    "installing": "Instalando",
+    "install": "Instalar",
+    "reset": "Reiniciar",
+    "live": "En vivo",
+    "change_history": "Historial de cambios",
+    "coming_soon": "Próximamente",
+    "member": "Miembro",
+    "members": "Miembros",
+    "you": "Tú",
+    "upgrade_cta": {
+      "higher_subscription": "Mejorar a una suscripción más alta",
+      "talk_to_sales": "Hablar con ventas"
+    },
+    "category": "Categoría",
+    "categories": "Categorías",
+    "saving": "Guardando",
+    "save_changes": "Guardar cambios",
+    "delete": "Eliminar",
+    "deleting": "Eliminando",
+    "pending": "Pendiente",
+    "invite": "Invitar",
+    "view": "Ver",
+    "deactivated_user": "Usuario desactivado",
+    "apply": "Aplicar",
+    "applying": "Aplicando",
+    "overview": "Resumen",
+    "no_of": "N.º de {entity}",
+    "resolved": "Resuelto",
+    "get_started": "Comenzar",
+    "worklogs": "Registros de trabajo",
+    "project_updates": "Actualizaciones del proyecto",
+    "workflows": "Flujos de trabajo",
+    "templates": "Plantillas",
+    "business": "Negocio",
+    "members_and_teamspaces": "Miembros y espacios de equipo",
+    "recurring_work_items": "Elementos de trabajo recurrentes",
+    "milestones": "Hitos",
+    "open_in_full_screen": "Abrir {page} en pantalla completa",
+    "details": "Detalles",
+    "project_structure": "Estructura del proyecto",
+    "custom_properties": "Propiedades personalizadas",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Eje X",
+    "y_axis": "Eje Y",
+    "metric": "Métrica"
+  },
+  "form": {
+    "title": {
+      "required": "El título es obligatorio",
+      "max_length": "El título debe tener menos de {length} caracteres"
+    }
+  },
+  "entity": {
+    "grouping_title": "Agrupación de {entity}",
+    "priority": "Prioridad de {entity}",
+    "all": "Todos los {entity}",
+    "drop_here_to_move": "Suelta aquí para mover el {entity}",
+    "delete": {
+      "label": "Eliminar {entity}",
+      "success": "{entity} eliminado correctamente",
+      "failed": "Error al eliminar {entity}"
+    },
+    "update": {
+      "failed": "Error al actualizar {entity}",
+      "success": "{entity} actualizado correctamente"
+    },
+    "link_copied_to_clipboard": "Enlace de {entity} copiado al portapapeles",
+    "fetch": {
+      "failed": "Error al obtener {entity}"
+    },
+    "add": {
+      "success": "{entity} agregado correctamente",
+      "failed": "Error al agregar {entity}"
+    },
+    "remove": {
+      "success": "{entity} eliminado correctamente",
+      "failed": "Error al eliminar {entity}"
+    }
+  },
+  "attachment": {
+    "error": "No se pudo adjuntar el archivo. Intenta subirlo de nuevo.",
+    "only_one_file_allowed": "Solo se puede subir un archivo a la vez.",
+    "file_size_limit": "El archivo debe tener {size}MB o menos de tamaño.",
+    "drag_and_drop": "Arrastra y suelta en cualquier lugar para subir",
+    "delete": "Eliminar archivo adjunto"
+  },
+  "label": {
+    "select": "Seleccionar etiqueta",
+    "create": {
+      "success": "Etiqueta creada correctamente",
+      "failed": "Error al crear la etiqueta",
+      "already_exists": "La etiqueta ya existe",
+      "type": "Escribe para agregar una nueva etiqueta"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Vista} other {Vistas}}",
+    "create": {
+      "label": "Crear vista"
+    },
+    "update": {
+      "label": "Actualizar vista"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Invitado",
+      "description": "Los miembros externos de las organizaciones pueden ser invitados como invitados."
+    },
+    "member": {
+      "title": "Miembro",
+      "description": "Capacidad para leer, escribir, editar y eliminar entidades dentro de proyectos, ciclos y módulos"
+    },
+    "admin": {
+      "title": "Administrador",
+      "description": "Todos los permisos establecidos como verdaderos dentro del espacio de trabajo."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Gerente de Producto / Proyecto",
+    "development_or_engineering": "Desarrollo / Ingeniería",
+    "founder_or_executive": "Fundador / Ejecutivo",
+    "freelancer_or_consultant": "Freelancer / Consultor",
+    "marketing_or_growth": "Marketing / Crecimiento",
+    "sales_or_business_development": "Ventas / Desarrollo de Negocios",
+    "support_or_operations": "Soporte / Operaciones",
+    "student_or_professor": "Estudiante / Profesor",
+    "human_resources": "Recursos Humanos",
+    "other": "Otro"
+  },
+  "default_global_view": {
+    "all_issues": "Todos los elementos de trabajo",
+    "assigned": "Asignados",
+    "created": "Creados",
+    "subscribed": "Suscritos"
+  },
+  "description_versions": {
+    "last_edited_by": "Última edición por",
+    "previously_edited_by": "Editado anteriormente por",
+    "edited_by": "Editado por"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane no se inició. Esto podría deberse a que uno o más servicios de Plane fallaron al iniciar.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Selecciona View Logs desde setup.sh y los logs de Docker para estar seguro."
+  },
+  "customize_navigation": "Personalizar navegación",
+  "personal": "Personal",
+  "accordion_navigation_control": "Navegación lateral tipo acordeón",
+  "horizontal_navigation_bar": "Navegación por pestañas",
+  "show_limited_projects_on_sidebar": "Mostrar proyectos limitados en la barra lateral",
+  "enter_number_of_projects": "Ingresa el número de proyectos",
+  "pin": "Fijar",
+  "unpin": "Desfijar",
+  "workspace_dashboards": "Tableros",
+  "pi_chat": "Plane AI",
+  "in_app": "En la aplicación",
+  "forms": "Formularios",
+  "milestones": "Hitos",
+  "milestones_description": "Los hitos proporcionan una capa para alinear los elementos de trabajo hacia fechas de finalización compartidas.",
+  "file_upload": {
+    "upload_text": "Haz clic aquí para subir archivo",
+    "drag_drop_text": "Arrastrar y soltar",
+    "processing": "Procesando",
+    "invalid_file_type": "Tipo de archivo inválido",
+    "missing_fields": "Campos faltantes",
+    "success": "¡{fileName} subido!"
+  },
+  "date": "Fecha",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Exporta elementos de trabajo a un archivo CSV.",
+      "short_description": "Exportar como csv"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Exporta elementos de trabajo a un archivo Excel.",
+      "short_description": "Exportar como excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Exporta elementos de trabajo a un archivo Excel.",
+      "short_description": "Exportar como excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Exporta elementos de trabajo a un archivo JSON.",
+      "short_description": "Exportar como json"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/cycle.json b/packages/i18n/src/locales/es/cycle.json
new file mode 100644
index 0000000..2da7590
--- /dev/null
+++ b/packages/i18n/src/locales/es/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Agrega elementos de trabajo al ciclo para ver su progreso"
+      },
+      "chart": {
+        "title": "Agrega elementos de trabajo al ciclo para ver el gráfico de avance."
+      },
+      "priority_issue": {
+        "title": "Observa los elementos de trabajo de alta prioridad abordados en el ciclo de un vistazo."
+      },
+      "assignee": {
+        "title": "Agrega asignados a los elementos de trabajo para ver un desglose del trabajo por asignados."
+      },
+      "label": {
+        "title": "Agrega etiquetas a los elementos de trabajo para ver el desglose del trabajo por etiquetas."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Ciclo} other {Ciclos}}",
+    "no_cycle": "Sin ciclo"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Agrega elementos de trabajo al Cycle para ver su\n progreso"
+      },
+      "priority": {
+        "title": "Observa los elementos de trabajo de alta prioridad abordados en\n el Cycle de un vistazo."
+      },
+      "assignee": {
+        "title": "Agrega asignados a los elementos de trabajo para ver un\n desglose del trabajo por asignados."
+      },
+      "label": {
+        "title": "Agrega etiquetas a los elementos de trabajo para ver el\n desglose del trabajo por etiquetas."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/editor.json b/packages/i18n/src/locales/es/editor.json
new file mode 100644
index 0000000..ec7dedb
--- /dev/null
+++ b/packages/i18n/src/locales/es/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Arrastra y suelta para subir archivos externos"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Archivo demasiado grande.",
+        "description": "El tamaño máximo por archivo es {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Tipo de archivo no compatible.",
+        "description": "Ver formatos compatibles"
+      },
+      "default": {
+        "title": "Error al subir.",
+        "description": "Algo salió mal. Por favor, inténtelo de nuevo."
+      }
+    },
+    "upgrade": {
+      "description": "Actualice su plan para ver este archivo adjunto."
+    },
+    "aria": {
+      "click_to_upload": "Haga clic para subir archivo adjunto"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Convertir a incrustación",
+      "convert_to_link": "Convertir a enlace",
+      "convert_to_richcard": "Convertir a tarjeta enriquecida"
+    },
+    "placeholder": {
+      "insert_embed": "Inserte aquí su enlace de incrustación preferido, como video de YouTube, diseño de Figma, etc.",
+      "link": "Ingrese o pegue un enlace"
+    },
+    "input_modal": {
+      "embed": "Incrustar",
+      "works_with_links": "Funciona con YouTube, Figma, Google Docs y más"
+    },
+    "error": {
+      "not_valid_link": "Por favor, ingrese una URL válida."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Describe el contenido de este bloque",
+      "generated_here": "Tu contenido de IA se generará aquí"
+    },
+    "block_types": {
+      "placeholder": "Seleccionar tipo de bloque",
+      "summarize_page": "Resumir página",
+      "custom_prompt": "Indicación personalizada"
+    },
+    "actions": {
+      "discard": "Descartar",
+      "generate": "Generar",
+      "generating": "Generando",
+      "rewriting": "Reescribiendo",
+      "rewrite": "Reescribir",
+      "use_this": "Usar esto",
+      "refine": "Refinar"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/empty-state.json b/packages/i18n/src/locales/es/empty-state.json
new file mode 100644
index 0000000..08feb2c
--- /dev/null
+++ b/packages/i18n/src/locales/es/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Todavía no hay métricas de progreso para mostrar.",
+      "description": "Comienza a establecer valores de propiedades en los elementos de trabajo para ver las métricas de progreso aquí."
+    },
+    "updates": {
+      "title": "Aún no hay actualizaciones.",
+      "description": "Una vez que los miembros del proyecto agreguen actualizaciones, aparecerán aquí"
+    },
+    "search": {
+      "title": "No se encontraron resultados coincidentes.",
+      "description": "No se encontraron resultados. Intenta ajustar tus términos de búsqueda."
+    },
+    "not_found": {
+      "title": "¡Ups! Algo parece estar mal",
+      "description": "No podemos obtener tu cuenta de Plane actualmente. Esto podría ser un error de red.",
+      "cta_primary": "Intentar recargar"
+    },
+    "server_error": {
+      "title": "Error del servidor",
+      "description": "No podemos conectarnos y obtener datos de nuestro servidor. No te preocupes, estamos trabajando en ello.",
+      "cta_primary": "Intentar recargar"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Parece que no tienes acceso a este proyecto",
+      "restricted_description": "Contacta con el administrador para solicitar acceso y podrás continuar aquí.",
+      "join_description": "Haz clic en el botón de abajo para unirte.",
+      "cta_primary": "Unirse al proyecto",
+      "cta_loading": "Uniéndose al proyecto"
+    },
+    "invalid_project": {
+      "title": "Proyecto no encontrado",
+      "description": "El proyecto que buscas no existe."
+    },
+    "work_items": {
+      "title": "Comienza con tu primer elemento de trabajo.",
+      "description": "Los elementos de trabajo son los bloques de construcción de tu proyecto — asigna responsables, establece prioridades y realiza un seguimiento del progreso fácilmente.",
+      "cta_primary": "Crea tu primer elemento de trabajo"
+    },
+    "cycles": {
+      "title": "Agrupa y delimita tu trabajo en Ciclos.",
+      "description": "Divide el trabajo en bloques con tiempo definido, trabaja hacia atrás desde la fecha límite de tu proyecto para establecer fechas y haz un progreso tangible como equipo.",
+      "cta_primary": "Establece tu primer ciclo"
+    },
+    "cycle_work_items": {
+      "title": "No hay elementos de trabajo para mostrar en este ciclo",
+      "description": "Crea elementos de trabajo para comenzar a monitorear el progreso de tu equipo en este ciclo y alcanzar tus objetivos a tiempo.",
+      "cta_primary": "Crear elemento de trabajo",
+      "cta_secondary": "Agregar elemento de trabajo existente"
+    },
+    "modules": {
+      "title": "Asigna los objetivos de tu proyecto a Módulos y rastrea fácilmente.",
+      "description": "Los módulos están compuestos de elementos de trabajo interconectados. Ayudan a monitorear el progreso a través de las fases del proyecto, cada una con fechas límite específicas y análisis para indicar qué tan cerca estás de alcanzar esas fases.",
+      "cta_primary": "Establece tu primer módulo"
+    },
+    "module_work_items": {
+      "title": "No hay elementos de trabajo para mostrar en este Módulo",
+      "description": "Crea elementos de trabajo para comenzar a monitorear este módulo.",
+      "cta_primary": "Crear elemento de trabajo",
+      "cta_secondary": "Agregar elemento de trabajo existente"
+    },
+    "views": {
+      "title": "Guarda vistas personalizadas para tu proyecto",
+      "description": "Las vistas son filtros guardados que te ayudan a acceder rápidamente a la información que más usas. Colabora sin esfuerzo mientras los compañeros de equipo comparten y adaptan las vistas a sus necesidades específicas.",
+      "cta_primary": "Crear vista"
+    },
+    "no_work_items_in_project": {
+      "title": "Aún no hay elementos de trabajo en el proyecto",
+      "description": "Agrega elementos de trabajo a tu proyecto y divide tu trabajo en piezas rastreables con vistas.",
+      "cta_primary": "Agregar elemento de trabajo"
+    },
+    "work_item_filter": {
+      "title": "No se encontraron elementos de trabajo",
+      "description": "Tu filtro actual no devolvió ningún resultado. Intenta cambiar los filtros.",
+      "cta_primary": "Agregar elemento de trabajo"
+    },
+    "pages": {
+      "title": "Documenta todo — desde notas hasta PRDs",
+      "description": "Las páginas te permiten capturar y organizar información en un solo lugar. Escribe notas de reuniones, documentación de proyectos y PRDs, incrusta elementos de trabajo y estructúralos con componentes listos para usar.",
+      "cta_primary": "Crea tu primera Página"
+    },
+    "archive_pages": {
+      "title": "Aún no hay páginas archivadas",
+      "description": "Archiva las páginas que no están en tu radar. Accede a ellas aquí cuando las necesites."
+    },
+    "intake_sidebar": {
+      "title": "Registra solicitudes de Entrada",
+      "description": "Envía nuevas solicitudes para ser revisadas, priorizadas y rastreadas dentro del flujo de trabajo de tu proyecto.",
+      "cta_primary": "Crear solicitud de Entrada"
+    },
+    "intake_main": {
+      "title": "Selecciona un elemento de trabajo de Entrada para ver sus detalles"
+    },
+    "epics": {
+      "title": "Convierte proyectos complejos en épicas estructuradas.",
+      "description": "Una épica te ayuda a organizar grandes objetivos en tareas más pequeñas y rastreables.",
+      "cta_primary": "Crear una Épica",
+      "cta_secondary": "Documentación"
+    },
+    "epic_work_items": {
+      "title": "Aún no has agregado elementos de trabajo a esta épica.",
+      "description": "Comienza agregando algunos elementos de trabajo a esta épica y rastréalos aquí.",
+      "cta_secondary": "Agregar elementos de trabajo"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Aún no hay épicas archivadas",
+      "description": "Puedes archivar épicas completadas o canceladas. Encuéntralas aquí una vez archivadas."
+    },
+    "archive_work_items": {
+      "title": "Aún no hay elementos de trabajo archivados",
+      "description": "Manualmente o mediante automatización, puedes archivar elementos de trabajo que estén completados o cancelados. Encuéntralos aquí una vez archivados.",
+      "cta_primary": "Configurar automatización"
+    },
+    "archive_cycles": {
+      "title": "Aún no hay ciclos archivados",
+      "description": "Para ordenar tu proyecto, archiva los ciclos completados. Encuéntralos aquí una vez archivados."
+    },
+    "archive_modules": {
+      "title": "Aún no hay Módulos archivados",
+      "description": "Para ordenar tu proyecto, archiva los módulos completados o cancelados. Encuéntralos aquí una vez archivados."
+    },
+    "home_widget_quick_links": {
+      "title": "Mantén a mano referencias importantes, recursos o documentos para tu trabajo"
+    },
+    "inbox_sidebar_all": {
+      "title": "Las actualizaciones de tus elementos de trabajo suscritos aparecerán aquí"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Las menciones a tus elementos de trabajo aparecerán aquí"
+    },
+    "your_work_by_priority": {
+      "title": "Aún no hay elementos de trabajo asignados"
+    },
+    "your_work_by_state": {
+      "title": "Aún no hay elementos de trabajo asignados"
+    },
+    "views": {
+      "title": "Aún no hay Vistas",
+      "description": "Agrega elementos de trabajo a tu proyecto y usa vistas para filtrar, ordenar y monitorear el progreso sin esfuerzo.",
+      "cta_primary": "Agregar elemento de trabajo"
+    },
+    "drafts": {
+      "title": "Elementos de trabajo a medio escribir",
+      "description": "Para probarlo, comienza a agregar un elemento de trabajo y déjalo a medias o crea tu primer borrador a continuación. 😉",
+      "cta_primary": "Crear borrador de elemento de trabajo"
+    },
+    "projects_archived": {
+      "title": "No hay proyectos archivados",
+      "description": "Parece que todos tus proyectos siguen activos — ¡buen trabajo!"
+    },
+    "analytics_projects": {
+      "title": "Crea proyectos para visualizar las métricas del proyecto aquí."
+    },
+    "analytics_work_items": {
+      "title": "Crea proyectos con elementos de trabajo y responsables para comenzar a rastrear el rendimiento, progreso e impacto del equipo aquí."
+    },
+    "analytics_no_cycle": {
+      "title": "Crea ciclos para organizar el trabajo en fases con límite de tiempo y rastrear el progreso en los sprints."
+    },
+    "analytics_no_module": {
+      "title": "Crea módulos para organizar tu trabajo y rastrear el progreso en diferentes etapas."
+    },
+    "analytics_no_intake": {
+      "title": "Configura la entrada para gestionar las solicitudes entrantes y rastrear cómo se aceptan y rechazan"
+    },
+    "home_widget_stickies": {
+      "title": "Anota una idea, captura un descubrimiento o registra una lluvia de ideas. Agrega una nota adhesiva para comenzar."
+    },
+    "stickies": {
+      "title": "Captura ideas al instante",
+      "description": "Crea notas adhesivas para notas rápidas y tareas pendientes, y mantenlas contigo dondequiera que vayas.",
+      "cta_primary": "Crear primera nota adhesiva",
+      "cta_secondary": "Documentación"
+    },
+    "active_cycles": {
+      "title": "No hay ciclos activos",
+      "description": "No tienes ningún ciclo en curso en este momento. Los ciclos activos aparecen aquí cuando incluyen la fecha de hoy."
+    },
+    "dashboard": {
+      "title": "Visualiza tu progreso con paneles de control",
+      "description": "Crea paneles personalizables para rastrear métricas, medir resultados y presentar insights de manera efectiva.",
+      "cta_primary": "Crear nuevo panel"
+    },
+    "wiki": {
+      "title": "Escribe una nota, un documento o una base de conocimientos completa.",
+      "description": "Las páginas son un espacio para capturar ideas en Plane. Toma notas de reuniones, dales formato fácilmente, incrusta elementos de trabajo, organízalas usando una biblioteca de componentes y mantenlas todas en el contexto de tu proyecto.",
+      "cta_primary": "Crea tu página"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Habilitar estados del proyecto",
+      "description": "Habilita los estados del proyecto para ver y gestionar propiedades como estado, prioridad, fechas de vencimiento y más."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Aún no hay estimaciones",
+      "description": "Define cómo tu equipo mide el esfuerzo y rastréalo de manera consistente en todos los elementos de trabajo.",
+      "cta_primary": "Agregar sistema de estimación"
+    },
+    "labels": {
+      "title": "Aún no hay etiquetas",
+      "description": "Crea etiquetas personalizadas para categorizar y gestionar efectivamente tus elementos de trabajo.",
+      "cta_primary": "Crea tu primera etiqueta"
+    },
+    "exports": {
+      "title": "Aún no hay exportaciones",
+      "description": "No tienes ningún registro de exportación en este momento. Una vez que exportes datos, todos los registros aparecerán aquí."
+    },
+    "tokens": {
+      "title": "Aún no hay tokens Personales",
+      "description": "Genera tokens API seguros para conectar tu espacio de trabajo con sistemas y aplicaciones externos.",
+      "cta_primary": "Agregar token API"
+    },
+    "workspace_tokens": {
+      "title": "Aún no hay tokens API",
+      "description": "Genera tokens API seguros para conectar tu espacio de trabajo con sistemas y aplicaciones externos.",
+      "cta_primary": "Agregar token API"
+    },
+    "webhooks": {
+      "title": "Aún no se ha agregado ningún Webhook",
+      "description": "Automatiza las notificaciones a servicios externos cuando ocurran eventos del proyecto.",
+      "cta_primary": "Agregar webhook"
+    },
+    "work_item_types": {
+      "title": "Crea y personaliza tipos de elementos de trabajo",
+      "description": "Define tipos únicos de elementos de trabajo para tu proyecto. Cada tipo puede tener sus propias propiedades, flujos de trabajo y campos — adaptados a las necesidades de tu proyecto y equipo.",
+      "cta_primary": "Habilitar"
+    },
+    "work_item_type_properties": {
+      "title": "Define la propiedad y los detalles que deseas capturar para este tipo de elemento de trabajo. Personalízalo para que coincida con el flujo de trabajo de tu proyecto.",
+      "cta_secondary": "Agregar propiedad"
+    },
+    "templates": {
+      "title": "Aún no hay plantillas",
+      "description": "Reduce el tiempo de configuración creando plantillas para elementos de trabajo y páginas — y comienza un nuevo trabajo en segundos.",
+      "cta_primary": "Crea tu primera plantilla"
+    },
+    "recurring_work_items": {
+      "title": "Aún no hay elementos de trabajo recurrentes",
+      "description": "Configura elementos de trabajo recurrentes para automatizar tareas repetidas y mantenerte en el horario sin esfuerzo.",
+      "cta_primary": "Crear elemento de trabajo recurrente"
+    },
+    "worklogs": {
+      "title": "Rastrea hojas de tiempo para todos los miembros",
+      "description": "Registra el tiempo en los elementos de trabajo para ver hojas de tiempo detalladas de cualquier miembro del equipo en todos los proyectos."
+    },
+    "group_syncing": {
+      "title": "Aún no hay asignaciones de grupos"
+    },
+    "template_setting": {
+      "title": "Aún no hay plantillas",
+      "description": "Reduce el tiempo de configuración creando plantillas para proyectos, elementos de trabajo y páginas — y comienza un nuevo trabajo en segundos.",
+      "cta_primary": "Crear plantilla"
+    },
+    "workflows": {
+      "title": "Aún no hay flujos de trabajo",
+      "description": "Crea flujos de trabajo para gestionar el progreso de tus elementos de trabajo.",
+      "cta_primary": "Agregar nuevo flujo de trabajo",
+      "states": {
+        "title": "Agregar estados",
+        "description": "Selecciona los estados por los que avanza el elemento de trabajo."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/home.json b/packages/i18n/src/locales/es/home.json
new file mode 100644
index 0000000..56f902a
--- /dev/null
+++ b/packages/i18n/src/locales/es/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Guía de inicio rápido",
+      "not_right_now": "Ahora no",
+      "create_project": {
+        "title": "Crear un proyecto",
+        "description": "La mayoría de las cosas comienzan con un proyecto en Plane.",
+        "cta": "Comenzar"
+      },
+      "invite_team": {
+        "title": "Invita a tu equipo",
+        "description": "Construye, implementa y gestiona con compañeros de trabajo.",
+        "cta": "Hazlos entrar"
+      },
+      "configure_workspace": {
+        "title": "Configura tu espacio de trabajo.",
+        "description": "Activa o desactiva funciones o ve más allá.",
+        "cta": "Configurar este espacio de trabajo"
+      },
+      "personalize_account": {
+        "title": "Haz Plane tuyo.",
+        "description": "Elige tu foto, colores y más.",
+        "cta": "Personalizar ahora"
+      },
+      "widgets": {
+        "title": "Está Silencioso Sin Widgets, Actívalos",
+        "description": "Parece que todos tus widgets están desactivados. ¡Actívalos\nahora para mejorar tu experiencia!",
+        "primary_button": {
+          "text": "Gestionar widgets"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Guarda enlaces a cosas de trabajo que te gustaría tener a mano.",
+      "add": "Agregar enlace rápido",
+      "title": "Enlace rápido",
+      "title_plural": "Enlaces rápidos"
+    },
+    "recents": {
+      "title": "Recientes",
+      "empty": {
+        "project": "Tus proyectos recientes aparecerán aquí una vez que visites uno.",
+        "page": "Tus páginas recientes aparecerán aquí una vez que visites una.",
+        "issue": "Tus elementos de trabajo recientes aparecerán aquí una vez que visites uno.",
+        "default": "Aún no tienes elementos recientes."
+      },
+      "filters": {
+        "all": "Todos",
+        "projects": "Proyectos",
+        "pages": "Páginas",
+        "issues": "Elementos de trabajo"
+      }
+    },
+    "new_at_plane": {
+      "title": "Nuevo en Plane"
+    },
+    "quick_tutorial": {
+      "title": "Tutorial rápido"
+    },
+    "widget": {
+      "reordered_successfully": "Widget reordenado correctamente.",
+      "reordering_failed": "Ocurrió un error al reordenar el widget."
+    },
+    "manage_widgets": "Gestionar widgets",
+    "title": "Inicio",
+    "star_us_on_github": "Danos una estrella en GitHub",
+    "business_trial_banner": {
+      "title": "¡Tu prueba de 14 días del plan Business está activa!",
+      "description": "Explora todas las funciones Business. Cuando estés listo, elige suscribirte. No se te cobrará automáticamente.",
+      "trial_ends_today": "La prueba termina hoy",
+      "trial_ends_in_days": "La prueba termina en {days, plural, one {# día} other {# días}}",
+      "start_subscription": "Iniciar suscripción",
+      "explore_business_features": "Explorar funciones Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/inbox.json b/packages/i18n/src/locales/es/inbox.json
new file mode 100644
index 0000000..28a0159
--- /dev/null
+++ b/packages/i18n/src/locales/es/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Pendiente",
+        "description": "Pendiente"
+      },
+      "declined": {
+        "title": "Rechazado",
+        "description": "Rechazado"
+      },
+      "snoozed": {
+        "title": "Pospuesto",
+        "description": "Faltan {days, plural, one{# día} other{# días}}"
+      },
+      "accepted": {
+        "title": "Aceptado",
+        "description": "Aceptado"
+      },
+      "duplicate": {
+        "title": "Duplicado",
+        "description": "Duplicado"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Rechazar elemento de trabajo",
+        "content": "¿Estás seguro de que quieres rechazar el elemento de trabajo {value}?"
+      },
+      "delete": {
+        "title": "Eliminar elemento de trabajo",
+        "content": "¿Estás seguro de que quieres eliminar el elemento de trabajo {value}?",
+        "success": "Elemento de trabajo eliminado correctamente"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Solo los administradores del proyecto pueden posponer/desposponer elementos de trabajo",
+      "accept_permission": "Solo los administradores del proyecto pueden aceptar elementos de trabajo",
+      "decline_permission": "Solo los administradores del proyecto pueden rechazar elementos de trabajo"
+    },
+    "actions": {
+      "accept": "Aceptar",
+      "decline": "Rechazar",
+      "snooze": "Posponer",
+      "unsnooze": "Desposponer",
+      "copy": "Copiar enlace del elemento de trabajo",
+      "delete": "Eliminar",
+      "open": "Abrir elemento de trabajo",
+      "mark_as_duplicate": "Marcar como duplicado",
+      "move": "Mover {value} a elementos de trabajo del proyecto"
+    },
+    "source": {
+      "in-app": "en-app"
+    },
+    "order_by": {
+      "created_at": "Creado el",
+      "updated_at": "Actualizado el",
+      "id": "ID"
+    },
+    "label": "Intake",
+    "page_label": "{workspace} - Intake",
+    "modal": {
+      "title": "Crear elemento de trabajo de intake"
+    },
+    "tabs": {
+      "open": "Abiertos",
+      "closed": "Cerrados"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "No hay elementos de trabajo abiertos",
+        "description": "Encuentra elementos de trabajo abiertos aquí. Crea un nuevo elemento de trabajo."
+      },
+      "sidebar_closed_tab": {
+        "title": "No hay elementos de trabajo cerrados",
+        "description": "Todos los elementos de trabajo, ya sean aceptados o rechazados, se pueden encontrar aquí."
+      },
+      "sidebar_filter": {
+        "title": "No hay elementos de trabajo coincidentes",
+        "description": "Ningún elemento de trabajo coincide con el filtro aplicado en intake. Crea un nuevo elemento de trabajo."
+      },
+      "detail": {
+        "title": "Selecciona un elemento de trabajo para ver sus detalles."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/integration.json b/packages/i18n/src/locales/es/integration.json
new file mode 100644
index 0000000..8c7b31b
--- /dev/null
+++ b/packages/i18n/src/locales/es/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integraciones",
+    "loading": "Cargando",
+    "unauthorized": "No estás autorizado para ver esta página.",
+    "configure": "Configurar",
+    "not_enabled": "{name} no está habilitado para este espacio de trabajo.",
+    "not_configured": "No configurado",
+    "disconnect_personal_account": "Desconectar cuenta personal de {providerName}",
+    "not_configured_message_admin": "La integración de {name} no está configurada. Por favor, contacta con el administrador de tu instancia para configurarla.",
+    "not_configured_message_support": "La integración de {name} no está configurada. Por favor, contacta con soporte para configurarla.",
+    "external_api_unreachable": "No se puede acceder a la API externa. Por favor, inténtalo más tarde.",
+    "error_fetching_supported_integrations": "No se pueden obtener las integraciones soportadas. Por favor, inténtalo más tarde.",
+    "back_to_integrations": "Volver a integraciones",
+    "select_state": "Seleccionar estado",
+    "set_state": "Establecer estado",
+    "choose_project": "Elegir proyecto...",
+    "skip_backward_state_movement": "Evitar que los issues vuelvan a un estado anterior debido a actualizaciones de PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Conecta y sincroniza tus elementos de trabajo de GitHub con Plane",
+    "connect_org": "Conectar organización",
+    "connect_org_description": "Conecta tu organización de GitHub con Plane",
+    "processing": "Procesando",
+    "org_added_desc": "GitHub org añadida por y tiempo",
+    "connection_fetch_error": "Error al obtener detalles de conexión del servidor",
+    "personal_account_connected": "Cuenta personal conectada",
+    "personal_account_connected_description": "Tu cuenta de GitHub ahora está conectada a Plane",
+    "connect_personal_account": "Conectar cuenta personal",
+    "connect_personal_account_description": "Conecta tu cuenta personal de GitHub con Plane.",
+    "repo_mapping": "Mapa de repositorios",
+    "repo_mapping_description": "Mapear tus repositorios de GitHub con proyectos de Plane.",
+    "project_issue_sync": "Sincronización de problemas de proyecto",
+    "project_issue_sync_description": "Sincronizar problemas de GitHub a tu proyecto de Plane",
+    "project_issue_sync_empty_state": "Las sincronizaciones de problemas de proyecto mapeadas aparecerán aquí",
+    "configure_project_issue_sync_state": "Configurar estado de sincronización de problemas",
+    "select_issue_sync_direction": "Seleccionar dirección de sincronización de problemas",
+    "allow_bidirectional_sync": "Bidirectional - Sincronizar problemas y comentarios en ambas direcciones entre GitHub y Plane",
+    "allow_unidirectional_sync": "Unidirectional - Sincronizar problemas y comentarios de GitHub a Plane solo",
+    "allow_unidirectional_sync_warning": "Los datos del problema de GitHub reemplazarán los datos en el elemento de trabajo vinculado de Plane (GitHub → Plane solamente)",
+    "remove_project_issue_sync": "Eliminar esta sincronización de problemas de proyecto",
+    "remove_project_issue_sync_confirmation": "¿Estás seguro de que deseas eliminar esta sincronización de problemas de proyecto?",
+    "add_pr_state_mapping": "Agregar mapeo de estado de solicitud de fusión para proyecto de Plane",
+    "edit_pr_state_mapping": "Editar mapeo de estado de solicitud de fusión para proyecto de Plane",
+    "pr_state_mapping": "Mapeo de estado de solicitud de fusión",
+    "pr_state_mapping_description": "Mapear estados de solicitud de fusión de GitHub a tu proyecto de Plane",
+    "pr_state_mapping_empty_state": "Los estados de PR mapeados aparecerán aquí",
+    "remove_pr_state_mapping": "Eliminar este mapeo de estado de solicitud de fusión",
+    "remove_pr_state_mapping_confirmation": "¿Estás seguro de que deseas eliminar este mapeo de estado de solicitud de fusión?",
+    "issue_sync_message": "Los elementos de trabajo se sincronizan con {project}",
+    "link": "Vincular repositorio de GitHub al proyecto de Plane",
+    "pull_request_automation": "Automatización de solicitud de fusión",
+    "pull_request_automation_description": "Configurar el mapeo de estado de solicitud de fusión de GitHub a tu proyecto de Plane",
+    "DRAFT_MR_OPENED": "Borrador abierto",
+    "MR_OPENED": "Abierto",
+    "MR_READY_FOR_MERGE": "Listo para fusionar",
+    "MR_REVIEW_REQUESTED": "Revisión solicitada",
+    "MR_MERGED": "Fusionado",
+    "MR_CLOSED": "Cerrado",
+    "ISSUE_OPEN": "Issue Abierto",
+    "ISSUE_CLOSED": "Issue Cerrado",
+    "save": "Guardar",
+    "start_sync": "Iniciar sincronización",
+    "choose_repository": "Elegir repositorio..."
+  },
+  "gitlab_integration": {
+    "name": "GitLab",
+    "description": "Conecta y sincroniza tus solicitudes de fusión de GitLab con Plane",
+    "connection_fetch_error": "Error al obtener detalles de conexión del servidor",
+    "connect_org": "Conectar organización",
+    "connect_org_description": "Conecta tu organización de GitLab con Plane",
+    "project_connections": "Conexiones de proyecto de GitLab",
+    "project_connections_description": "Sincroniza solicitudes de fusión de GitLab a proyectos de Plane",
+    "plane_project_connection": "Conexión de proyecto de Plane",
+    "plane_project_connection_description": "Configura el mapeo de estados de solicitudes de fusión de GitLab a proyectos de Plane",
+    "remove_connection": "Eliminar conexión",
+    "remove_connection_confirmation": "¿Estás seguro de que deseas eliminar esta conexión?",
+    "link": "Vincular repositorio de GitLab al proyecto de Plane",
+    "pull_request_automation": "Automatización de solicitud de fusión",
+    "pull_request_automation_description": "Configura el mapeo de estados de solicitud de fusión de GitLab a Plane",
+    "DRAFT_MR_OPENED": "Al abrir MR borrador, establecer el estado a",
+    "MR_OPENED": "Al abrir MR, establecer el estado a",
+    "MR_REVIEW_REQUESTED": "Al solicitar revisión de MR, establecer el estado a",
+    "MR_READY_FOR_MERGE": "Cuando MR esté listo para fusionar, establecer el estado a",
+    "MR_MERGED": "Al fusionar MR, establecer el estado a",
+    "MR_CLOSED": "Al cerrar MR, establecer el estado a",
+    "integration_enabled_text": "Con la integración de GitLab habilitada, puedes automatizar flujos de trabajo de elementos de trabajo",
+    "choose_entity": "Elegir entidad",
+    "choose_project": "Elegir proyecto",
+    "link_plane_project": "Vincular proyecto de Plane",
+    "project_issue_sync": "Sincronización de Incidencias del Proyecto",
+    "project_issue_sync_description": "Sincroniza incidencias de Gitlab a tu proyecto de Plane",
+    "project_issue_sync_empty_state": "La sincronización de incidencias del proyecto mapeada aparecerá aquí",
+    "configure_project_issue_sync_state": "Configurar Estado de Sincronización de Incidencias",
+    "select_issue_sync_direction": "Selecciona la dirección de sincronización de incidencias",
+    "allow_bidirectional_sync": "Bidireccional - Sincronizar incidencias y comentarios en ambas direcciones entre Gitlab y Plane",
+    "allow_unidirectional_sync": "Unidireccional - Sincronizar incidencias y comentarios solo de Gitlab a Plane",
+    "allow_unidirectional_sync_warning": "Los datos de Gitlab Issue reemplazarán los datos en el Elemento de Trabajo de Plane vinculado (solo Gitlab → Plane)",
+    "remove_project_issue_sync": "Eliminar esta Sincronización de Incidencias del Proyecto",
+    "remove_project_issue_sync_confirmation": "¿Estás seguro de que deseas eliminar esta sincronización de incidencias del proyecto?",
+    "ISSUE_OPEN": "Incidencia Abierta",
+    "ISSUE_CLOSED": "Incidencia Cerrada",
+    "save": "Guardar",
+    "start_sync": "Iniciar Sincronización",
+    "choose_repository": "Elegir Repositorio..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Conecta y sincroniza tu instancia de Gitlab Enterprise con Plane.",
+    "app_form_title": "Configuración de Gitlab Enterprise",
+    "app_form_description": "Configura Gitlab Enterprise para conectar con Plane.",
+    "base_url_title": "URL Base",
+    "base_url_description": "La URL base de tu instancia de Gitlab Enterprise.",
+    "base_url_placeholder": "ej. \"https://glab.plane.town\"",
+    "base_url_error": "La URL base es obligatoria",
+    "invalid_base_url_error": "URL base inválida",
+    "client_id_title": "ID de App",
+    "client_id_description": "El ID de la app que creaste en tu instancia de Gitlab Enterprise.",
+    "client_id_placeholder": "ej. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "El ID de App es obligatorio",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "El client secret de la app que creaste en tu instancia de Gitlab Enterprise.",
+    "client_secret_placeholder": "ej. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "El client secret es obligatorio",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Un webhook secret aleatorio que se usará para verificar el webhook de la instancia de Gitlab Enterprise.",
+    "webhook_secret_placeholder": "ej. \"webhook1234567890\"",
+    "webhook_secret_error": "El webhook secret es obligatorio",
+    "connect_app": "Conectar App"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Conecta tu espacio de trabajo de Slack con Plane",
+    "connect_personal_account": "Conecta tu cuenta personal de Slack con Plane",
+    "personal_account_connected": "Tu cuenta personal de {providerName} ahora está conectada a Plane",
+    "link_personal_account": "Vincula tu cuenta personal de {providerName} a Plane",
+    "connected_slack_workspaces": "Espacios de trabajo de Slack conectados",
+    "connected_on": "Conectado el {date}",
+    "disconnect_workspace": "Desconectar espacio de trabajo {name}",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Recibe notificaciones en mensajes directos de Slack para actualizaciones importantes, recordatorios y alertas solo para ti."
+      }
+    },
+    "project_updates": {
+      "title": "Actualizaciones de Proyecto",
+      "description": "Configura notificaciones de actualizaciones de proyectos para tus proyectos",
+      "add_new_project_update": "Añadir nueva notificación de actualizaciones de proyecto",
+      "project_updates_empty_state": "Los proyectos conectados con Canales de Slack aparecerán aquí.",
+      "project_updates_form": {
+        "title": "Configurar Actualizaciones de Proyecto",
+        "description": "Recibir notificaciones de actualizaciones de proyecto en Slack cuando se crean elementos de trabajo",
+        "failed_to_load_channels": "Error al cargar canales de Slack",
+        "project_dropdown": {
+          "placeholder": "Seleccionar un proyecto",
+          "label": "Proyecto de Plane",
+          "no_projects": "No hay proyectos disponibles"
+        },
+        "channel_dropdown": {
+          "label": "Canal de Slack",
+          "placeholder": "Seleccionar un canal",
+          "no_channels": "No hay canales disponibles"
+        },
+        "all_projects_connected": "Todos los proyectos ya están conectados a canales de Slack.",
+        "all_channels_connected": "Todos los canales de Slack ya están conectados a proyectos.",
+        "project_connection_success": "Conexión de proyecto creada exitosamente",
+        "project_connection_updated": "Conexión de proyecto actualizada exitosamente",
+        "project_connection_deleted": "Conexión de proyecto eliminada exitosamente",
+        "failed_delete_project_connection": "Error al eliminar conexión de proyecto",
+        "failed_create_project_connection": "Error al crear conexión de proyecto",
+        "failed_upserting_project_connection": "Error al actualizar conexión de proyecto",
+        "failed_loading_project_connections": "No pudimos cargar tus conexiones de proyecto. Esto podría deberse a un problema de red o un problema con la integración."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Conecta tu espacio de trabajo de Sentry con Plane.",
+    "connected_sentry_workspaces": "Espacios de trabajo de Sentry conectados",
+    "connected_on": "Conectado el {date}",
+    "disconnect_workspace": "Desconectar espacio de trabajo {name}",
+    "state_mapping": {
+      "title": "Mapeo de estados",
+      "description": "Mapea los estados de incidencias de Sentry a los estados de tu proyecto. Configura qué estados usar cuando una incidencia de Sentry se resuelve o no se resuelve.",
+      "add_new_state_mapping": "Agregar nuevo mapeo de estado",
+      "empty_state": "No hay mapeos de estado configurados. Crea tu primer mapeo para sincronizar los estados de incidencias de Sentry con los estados de tu proyecto.",
+      "failed_loading_state_mappings": "No pudimos cargar tus mapeos de estado. Esto podría deberse a un problema de red o un problema con la integración.",
+      "loading_project_states": "Cargando estados del proyecto...",
+      "error_loading_states": "Error al cargar estados",
+      "no_states_available": "No hay estados disponibles",
+      "no_permission_states": "No tienes permiso para acceder a los estados de este proyecto",
+      "states_not_found": "Estados del proyecto no encontrados",
+      "server_error_states": "Error del servidor al cargar estados"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Conecta y sincroniza tus repositorios de Bitbucket Data Center con Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Validar tokens de IdP externos para acceso a la API.",
+    "header_description": "Valide tokens OIDC/JWT emitidos externamente por su IdP (Azure AD, Okta, etc.) para acceso a la API de Plane.",
+    "connected": "Conectado",
+    "connect": "Conectar",
+    "uninstall": "Desinstalar",
+    "uninstalling": "Desinstalando...",
+    "install_success": "OAuth Bridge instalado correctamente.",
+    "install_error": "Error al instalar OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge desinstalado.",
+    "uninstall_error": "Error al desinstalar OAuth Bridge.",
+    "token_providers": "Proveedores de tokens",
+    "token_providers_description": "Configure los IdP externos cuyos JWT se aceptan como credenciales de API.",
+    "add_provider": "Agregar proveedor",
+    "edit_provider": "Editar proveedor",
+    "enabled": "Habilitado",
+    "disabled": "Deshabilitado",
+    "test": "Probar",
+    "no_providers_title": "No hay proveedores configurados.",
+    "no_providers_description": "Agregue un IdP para habilitar la autenticación con tokens externos.",
+    "provider_updated": "Proveedor actualizado.",
+    "provider_added": "Proveedor agregado.",
+    "provider_save_error": "Error al guardar el proveedor.",
+    "provider_deleted": "Proveedor eliminado.",
+    "provider_delete_error": "Error al eliminar el proveedor.",
+    "provider_update_error": "Error al actualizar el proveedor.",
+    "jwks_reachable": "JWKS accesible",
+    "jwks_unreachable": "JWKS inaccesible",
+    "jwks_test_error": "No se pudo obtener el JWKS desde la URL configurada.",
+    "provider_form": {
+      "name_label": "Nombre",
+      "name_placeholder": "ej. Azure AD Producción",
+      "name_description": "Etiqueta legible para este proveedor de identidad",
+      "name_required": "El nombre es obligatorio.",
+      "issuer_label": "Emisor",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Valor esperado del claim iss en el JWT",
+      "issuer_required": "El emisor es obligatorio.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "Endpoint HTTPS que sirve el JSON Web Key Set del proveedor",
+      "jwks_url_required": "La URL JWKS es obligatoria.",
+      "jwks_url_https": "La URL JWKS debe usar HTTPS.",
+      "audience_label": "Audiencia",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Claim(s) aud esperado(s) en el JWT, separados por comas.",
+      "user_claims_label": "Claim de usuario",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "Claim JWT que contiene la dirección de correo del usuario",
+      "user_claims_required": "El claim de usuario es obligatorio.",
+      "allowed_algorithms_label": "Algoritmos de firma permitidos",
+      "allowed_algorithms_description": "Algoritmos asimétricos aceptados para la verificación de firma JWT",
+      "allowed_algorithms_required": "Se requiere al menos un algoritmo.",
+      "select_algorithms": "Seleccionar algoritmos",
+      "jwks_cache_ttl_label": "TTL de caché JWKS (segundos)",
+      "jwks_cache_ttl_description": "Tiempo de caché de las claves JWKS del proveedor (mínimo 60s, por defecto 24 horas)",
+      "jwks_cache_ttl_min": "El TTL de caché debe ser de al menos 60 segundos.",
+      "rate_limit_label": "Límite de velocidad",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Limitación de solicitudes como cantidad/período (ej. 120/minute). Dejar vacío para el límite por defecto.",
+      "enable_provider": "Habilitar este proveedor",
+      "saving": "Guardando...",
+      "update": "Actualizar"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Conecta y sincroniza tu organización de GitHub Enterprise con Plane.",
+    "app_form_title": "Configuración de GitHub Enterprise",
+    "app_form_description": "Configura GitHub Enterprise para conectarse con Plane.",
+    "app_id_title": "ID de la app",
+    "app_id_description": "El ID de la app que creaste en tu organización de GitHub Enterprise.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID es requerido",
+    "app_name_title": "Slug de la app",
+    "app_name_description": "El slug de la app que creaste en tu organización de GitHub Enterprise.",
+    "app_name_error": "App slug es requerido",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "URL base",
+    "base_url_description": "La URL base de tu organización de GitHub Enterprise.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "URL base es requerida",
+    "invalid_base_url_error": "URL base inválida",
+    "client_id_title": "ID del cliente",
+    "client_id_description": "El ID del cliente de la app que creaste en tu organización de GitHub Enterprise.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID del cliente es requerido",
+    "client_secret_title": "Secret del cliente",
+    "client_secret_description": "El secret del cliente de la app que creaste en tu organización de GitHub Enterprise.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Secret del cliente es requerido",
+    "webhook_secret_title": "Secret del webhook",
+    "webhook_secret_description": "El secret del webhook de la app que creaste en tu organización de GitHub Enterprise.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Secret del webhook es requerido",
+    "private_key_title": "Clave privada (Base64 codificado)",
+    "private_key_description": "Clave privada de la app que creaste en tu organización de GitHub Enterprise.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Clave privada es requerida",
+    "connect_app": "Conectar app"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Los parámetros de consulta proporcionados son inválidos o faltan campos requeridos",
+    "invalid_installation_account": "La cuenta de instalación proporcionada no es válida",
+    "generic_error": "Ocurrió un error inesperado al procesar tu solicitud",
+    "connection_not_found": "No se pudo encontrar la conexión solicitada",
+    "multiple_connections_found": "Se encontraron múltiples conexiones cuando solo se esperaba una",
+    "cannot_create_multiple_connections": "Ya tienes una conexión con una organización. Por favor, desconecta la conexión existente antes de conectar una nueva.",
+    "installation_not_found": "No se pudo encontrar la instalación solicitada",
+    "user_not_found": "No se pudo encontrar el usuario solicitado",
+    "error_fetching_token": "Error al obtener el token de autenticación",
+    "invalid_app_credentials": "Las credenciales de la aplicación proporcionadas son inválidas",
+    "invalid_app_installation_id": "Error al instalar la aplicación"
+  },
+  "import_status": {
+    "queued": "En cola",
+    "created": "Creado",
+    "initiated": "Iniciado",
+    "pulling": "Extrayendo",
+    "timed_out": "Tiempo agotado",
+    "pulled": "Extraído",
+    "progressing": "En progreso",
+    "transforming": "Transformando",
+    "transformed": "Transformado",
+    "pushing": "Enviando",
+    "finished": "Finalizado",
+    "error": "Error",
+    "cancelled": "Cancelado"
+  }
+}
diff --git a/packages/i18n/src/locales/es/module.json b/packages/i18n/src/locales/es/module.json
new file mode 100644
index 0000000..4e6b5d6
--- /dev/null
+++ b/packages/i18n/src/locales/es/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Módulo} other {Módulos}}",
+    "no_module": "Sin módulo",
+    "select": "Agregar módulos"
+  }
+}
diff --git a/packages/i18n/src/locales/es/navigation.json b/packages/i18n/src/locales/es/navigation.json
new file mode 100644
index 0000000..3c04912
--- /dev/null
+++ b/packages/i18n/src/locales/es/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "No se encontraron resultados"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Notas adhesivas",
+    "your_work": "Tu trabajo",
+    "projects": "Proyectos",
+    "pages": "Páginas",
+    "new_work_item": "Nuevo elemento de trabajo",
+    "home": "Inicio",
+    "inbox": "Bandeja de entrada",
+    "workspace": "Espacio de trabajo",
+    "views": "Vistas",
+    "analytics": "Análisis",
+    "work_items": "Elementos de trabajo",
+    "cycles": "Ciclos",
+    "modules": "Módulos",
+    "intake": "Entrada",
+    "drafts": "Borradores",
+    "favorites": "Favoritos",
+    "pro": "Pro",
+    "upgrade": "Mejorar",
+    "pi_chat": "Plane AI",
+    "epics": "Epics",
+    "upgrade_plan": "Actualizar plan",
+    "plane_pro": "Plane Pro",
+    "business": "Business"
+  }
+}
diff --git a/packages/i18n/src/locales/es/notification.json b/packages/i18n/src/locales/es/notification.json
new file mode 100644
index 0000000..4e5b813
--- /dev/null
+++ b/packages/i18n/src/locales/es/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Bandeja de entrada",
+    "page_label": "{workspace} - Bandeja de entrada",
+    "options": {
+      "mark_all_as_read": "Marcar todo como leído",
+      "mark_read": "Marcar como leído",
+      "mark_unread": "Marcar como no leído",
+      "refresh": "Actualizar",
+      "filters": "Filtros de bandeja de entrada",
+      "show_unread": "Mostrar no leídos",
+      "show_snoozed": "Mostrar pospuestos",
+      "show_archived": "Mostrar archivados",
+      "mark_archive": "Archivar",
+      "mark_unarchive": "Desarchivar",
+      "mark_snooze": "Posponer",
+      "mark_unsnooze": "Quitar posposición"
+    },
+    "toasts": {
+      "read": "Notificación marcada como leída",
+      "unread": "Notificación marcada como no leída",
+      "archived": "Notificación marcada como archivada",
+      "unarchived": "Notificación marcada como no archivada",
+      "snoozed": "Notificación pospuesta",
+      "unsnoozed": "Notificación posposición cancelada"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Selecciona para ver detalles."
+      },
+      "all": {
+        "title": "No hay elementos de trabajo asignados",
+        "description": "Las actualizaciones de elementos de trabajo asignados a ti se pueden\n ver aquí"
+      },
+      "mentions": {
+        "title": "No hay elementos de trabajo asignados",
+        "description": "Las actualizaciones de elementos de trabajo asignados a ti se pueden\n ver aquí"
+      }
+    },
+    "tabs": {
+      "all": "Todo",
+      "mentions": "Menciones"
+    },
+    "filter": {
+      "assigned": "Asignado a mí",
+      "created": "Creado por mí",
+      "subscribed": "Suscrito por mí"
+    },
+    "snooze": {
+      "1_day": "1 día",
+      "3_days": "3 días",
+      "5_days": "5 días",
+      "1_week": "1 semana",
+      "2_weeks": "2 semanas",
+      "custom": "Personalizado"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/page.json b/packages/i18n/src/locales/es/page.json
new file mode 100644
index 0000000..89be775
--- /dev/null
+++ b/packages/i18n/src/locales/es/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Esquema",
+        "empty_state": {
+          "title": "Faltan encabezados",
+          "description": "Añade algunos encabezados a esta página para verlos aquí."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Palabras",
+          "characters": "Caracteres",
+          "paragraphs": "Párrafos",
+          "read_time": "Tiempo de lectura"
+        },
+        "actors_info": {
+          "edited_by": "Editado por",
+          "created_by": "Creado por"
+        },
+        "version_history": {
+          "label": "Historial de versiones",
+          "current_version": "Versión actual",
+          "highlight_changes": "Resaltar cambios"
+        }
+      },
+      "assets": {
+        "label": "Recursos",
+        "download_button": "Descargar",
+        "empty_state": {
+          "title": "Faltan imágenes",
+          "description": "Añade imágenes para verlas aquí."
+        }
+      },
+      "comments": {
+        "label": "Comentarios",
+        "empty_state": {
+          "title": "Sin comentarios",
+          "description": "Agrega comentarios para verlos aquí."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "El nombre de la nota adhesiva no puede tener más de 100 caracteres.",
+        "already_exists": "Ya existe una nota adhesiva sin descripción"
+      },
+      "created": {
+        "title": "Nota adhesiva creada",
+        "message": "La nota adhesiva se ha creado correctamente"
+      },
+      "not_created": {
+        "title": "Nota adhesiva no creada",
+        "message": "No se pudo crear la nota adhesiva"
+      },
+      "updated": {
+        "title": "Nota adhesiva actualizada",
+        "message": "La nota adhesiva se ha actualizado correctamente"
+      },
+      "not_updated": {
+        "title": "Nota adhesiva no actualizada",
+        "message": "No se pudo actualizar la nota adhesiva"
+      },
+      "removed": {
+        "title": "Nota adhesiva eliminada",
+        "message": "La nota adhesiva se ha eliminado correctamente"
+      },
+      "not_removed": {
+        "title": "Nota adhesiva no eliminada",
+        "message": "No se pudo eliminar la nota adhesiva"
+      }
+    },
+    "open_button": "Abrir panel de navegación",
+    "close_button": "Cerrar panel de navegación",
+    "outline_floating_button": "Abrir esquema"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Mover",
+        "loading": "Moviendo"
+      },
+      "cannot_move_to_teamspace": "Las páginas privadas y compartidas no se pueden mover a un espacio de equipo.",
+      "placeholders": {
+        "workspace_to_all": "Buscar proyectos y espacios de equipo",
+        "workspace_to_project": "Buscar proyectos",
+        "project_to_all": "Buscar proyectos y espacios de equipo",
+        "project_to_project": "Buscar proyectos",
+        "project_to_all_with_wiki": "Buscar colecciones de wiki, proyectos y espacios de equipo",
+        "project_to_project_with_wiki": "Buscar colecciones de wiki y proyectos"
+      },
+      "toasts": {
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Página movida correctamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "No se pudo mover la página. Por favor, inténtalo de nuevo más tarde."
+        },
+        "collection_error": {
+          "title": "Movida al wiki",
+          "message": "La página se movió al wiki, pero no pudo añadirse a la colección seleccionada. Permanece en General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Quitar de la colección",
+      "success_message": "Página quitada de la colección.",
+      "error_message": "No se pudo quitar la página de la colección. Inténtalo de nuevo."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Se alcanzó el límite de contenido y la sincronización en vivo está desactivada. Cree una página nueva o utilice páginas anidadas para continuar sincronizando."
+  }
+}
diff --git a/packages/i18n/src/locales/es/power-k.json b/packages/i18n/src/locales/es/power-k.json
new file mode 100644
index 0000000..6144f32
--- /dev/null
+++ b/packages/i18n/src/locales/es/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Eliminar elementos de trabajo en lote"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Acciones del elemento de trabajo",
+        "indicator": "Elemento de trabajo",
+        "change_state": "Cambiar estado",
+        "change_priority": "Cambiar prioridad",
+        "change_assignees": "Asignar a",
+        "assign_to_me": "Asignarme a mí",
+        "unassign_from_me": "Desasignarme",
+        "change_estimate": "Cambiar estimación",
+        "add_to_cycle": "Agregar al ciclo",
+        "add_to_modules": "Agregar a módulos",
+        "add_labels": "Agregar etiquetas",
+        "subscribe": "Suscribirse a notificaciones",
+        "unsubscribe": "Cancelar suscripción a notificaciones",
+        "delete": "Eliminar",
+        "copy_id": "Copiar ID",
+        "copy_id_toast_success": "ID del elemento de trabajo copiado al portapapeles.",
+        "copy_id_toast_error": "Ocurrió un error al copiar el ID del elemento de trabajo al portapapeles.",
+        "copy_title": "Copiar título",
+        "copy_title_toast_success": "Título del elemento de trabajo copiado al portapapeles.",
+        "copy_title_toast_error": "Ocurrió un error al copiar el título del elemento de trabajo al portapapeles.",
+        "copy_url": "Copiar URL",
+        "copy_url_toast_success": "URL del elemento de trabajo copiada al portapapeles.",
+        "copy_url_toast_error": "Ocurrió un error al copiar la URL del elemento de trabajo al portapapeles."
+      },
+      "cycle": {
+        "title": "Acciones del ciclo",
+        "indicator": "Ciclo",
+        "add_to_favorites": "Agregar a favoritos",
+        "remove_from_favorites": "Eliminar de favoritos",
+        "copy_url": "Copiar URL",
+        "copy_url_toast_success": "URL del ciclo copiada al portapapeles.",
+        "copy_url_toast_error": "Ocurrió un error al copiar la URL del ciclo al portapapeles."
+      },
+      "module": {
+        "title": "Acciones del módulo",
+        "indicator": "Módulo",
+        "add_remove_members": "Agregar/eliminar miembros",
+        "change_status": "Cambiar estado",
+        "add_to_favorites": "Agregar a favoritos",
+        "remove_from_favorites": "Eliminar de favoritos",
+        "copy_url": "Copiar URL",
+        "copy_url_toast_success": "URL del módulo copiada al portapapeles.",
+        "copy_url_toast_error": "Ocurrió un error al copiar la URL del módulo al portapapeles."
+      },
+      "page": {
+        "title": "Acciones de la página",
+        "indicator": "Página",
+        "lock": "Bloquear",
+        "unlock": "Desbloquear",
+        "make_private": "Hacer privada",
+        "make_public": "Hacer pública",
+        "archive": "Archivar",
+        "restore": "Restaurar",
+        "add_to_favorites": "Agregar a favoritos",
+        "remove_from_favorites": "Eliminar de favoritos",
+        "copy_url": "Copiar URL",
+        "copy_url_toast_success": "URL de la página copiada al portapapeles.",
+        "copy_url_toast_error": "Ocurrió un error al copiar la URL de la página al portapapeles."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Nuevo elemento de trabajo",
+      "create_page": "Nueva página",
+      "create_view": "Nueva vista",
+      "create_cycle": "Nuevo ciclo",
+      "create_module": "Nuevo módulo",
+      "create_project": "Nuevo proyecto",
+      "create_workspace": "Nuevo espacio de trabajo",
+      "create_project_automation": "Nueva automatización"
+    },
+    "navigation_actions": {
+      "open_workspace": "Abrir un espacio de trabajo",
+      "nav_home": "Ir a inicio",
+      "nav_inbox": "Ir a la bandeja de entrada",
+      "nav_your_work": "Ir a tu trabajo",
+      "nav_account_settings": "Ir a la configuración de la cuenta",
+      "open_project": "Abrir un proyecto",
+      "nav_projects_list": "Ir a la lista de proyectos",
+      "nav_all_workspace_work_items": "Ir a todos los elementos de trabajo",
+      "nav_assigned_workspace_work_items": "Ir a los elementos de trabajo asignados",
+      "nav_created_workspace_work_items": "Ir a los elementos de trabajo creados",
+      "nav_subscribed_workspace_work_items": "Ir a los elementos de trabajo suscritos",
+      "nav_workspace_analytics": "Ir a análisis del espacio de trabajo",
+      "nav_workspace_drafts": "Ir a borradores del espacio de trabajo",
+      "nav_workspace_archives": "Ir a archivos del espacio de trabajo",
+      "open_workspace_setting": "Abrir una configuración del espacio de trabajo",
+      "nav_workspace_settings": "Ir a la configuración del espacio de trabajo",
+      "nav_project_work_items": "Ir a elementos de trabajo",
+      "open_project_cycle": "Abrir un ciclo",
+      "nav_project_cycles": "Ir a ciclos",
+      "open_project_module": "Abrir un módulo",
+      "nav_project_modules": "Ir a módulos",
+      "open_project_view": "Abrir una vista de proyecto",
+      "nav_project_views": "Ir a vistas de proyecto",
+      "nav_project_pages": "Ir a páginas",
+      "nav_project_intake": "Ir a bandeja de entrada",
+      "nav_project_archives": "Ir a archivos del proyecto",
+      "open_project_setting": "Abrir una configuración del proyecto",
+      "nav_project_settings": "Ir a la configuración del proyecto",
+      "nav_workspace_active_cycle": "Ir a todos los ciclos activos",
+      "nav_project_overview": "Ir al resumen del proyecto"
+    },
+    "account_actions": {
+      "sign_out": "Cerrar sesión",
+      "workspace_invites": "Invitaciones del espacio de trabajo"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Alternar barra lateral de la aplicación",
+      "copy_current_page_url": "Copiar URL de la página actual",
+      "copy_current_page_url_toast_success": "URL de la página actual copiada al portapapeles.",
+      "copy_current_page_url_toast_error": "Ocurrió un error al copiar la URL de la página actual al portapapeles.",
+      "focus_top_nav_search": "Enfocar el campo de búsqueda"
+    },
+    "preferences_actions": {
+      "update_theme": "Cambiar tema de la interfaz",
+      "update_timezone": "Cambiar zona horaria",
+      "update_start_of_week": "Cambiar primer día de la semana",
+      "update_language": "Cambiar idioma de la interfaz",
+      "toast": {
+        "theme": {
+          "success": "Tema actualizado correctamente.",
+          "error": "Error al actualizar el tema. Por favor, inténtalo de nuevo."
+        },
+        "timezone": {
+          "success": "Zona horaria actualizada correctamente.",
+          "error": "Error al actualizar la zona horaria. Por favor, inténtalo de nuevo."
+        },
+        "generic": {
+          "success": "Preferencias actualizadas correctamente.",
+          "error": "Error al actualizar las preferencias. Por favor, inténtalo de nuevo."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Abrir atajos de teclado",
+      "open_plane_documentation": "Abrir documentación de Plane",
+      "join_forum": "Únete a nuestro Foro",
+      "report_bug": "Reportar un error",
+      "chat_with_us": "Chatea con nosotros"
+    },
+    "page_placeholders": {
+      "default": "Escribe un comando o busca",
+      "open_workspace": "Abrir un espacio de trabajo",
+      "open_project": "Abrir un proyecto",
+      "open_workspace_setting": "Abrir una configuración del espacio de trabajo",
+      "open_project_cycle": "Abrir un ciclo",
+      "open_project_module": "Abrir un módulo",
+      "open_project_view": "Abrir una vista de proyecto",
+      "open_project_setting": "Abrir una configuración del proyecto",
+      "update_work_item_state": "Cambiar estado",
+      "update_work_item_priority": "Cambiar prioridad",
+      "update_work_item_assignee": "Asignar a",
+      "update_work_item_estimate": "Cambiar estimación",
+      "update_work_item_cycle": "Agregar al ciclo",
+      "update_work_item_module": "Agregar a módulos",
+      "update_work_item_labels": "Agregar etiquetas",
+      "update_module_member": "Cambiar miembros",
+      "update_module_status": "Cambiar estado",
+      "update_theme": "Cambiar tema",
+      "update_timezone": "Cambiar zona horaria",
+      "update_start_of_week": "Cambiar primer día de la semana",
+      "update_language": "Cambiar idioma"
+    },
+    "search_menu": {
+      "no_results": "No se encontraron resultados",
+      "clear_search": "Limpiar búsqueda",
+      "go_to_advanced_search": "Ir a búsqueda avanzada"
+    },
+    "footer": {
+      "workspace_level": "Nivel de espacio de trabajo"
+    },
+    "group_titles": {
+      "actions": "Acciones",
+      "contextual": "Contextual",
+      "navigation": "Navegar",
+      "create": "Crear",
+      "general": "General",
+      "settings": "Configuración",
+      "account": "Cuenta",
+      "miscellaneous": "Varios",
+      "preferences": "Preferencias",
+      "help": "Ayuda"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/project-settings.json b/packages/i18n/src/locales/es/project-settings.json
new file mode 100644
index 0000000..6ec66f5
--- /dev/null
+++ b/packages/i18n/src/locales/es/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Ingresa el ID del proyecto",
+      "please_select_a_timezone": "Por favor selecciona una zona horaria",
+      "archive_project": {
+        "title": "Archivar proyecto",
+        "description": "Archivar un proyecto lo eliminará de tu navegación lateral aunque aún podrás acceder a él desde tu página de proyectos. Puedes restaurar el proyecto o eliminarlo cuando quieras.",
+        "button": "Archivar proyecto"
+      },
+      "delete_project": {
+        "title": "Eliminar proyecto",
+        "description": "Al eliminar un proyecto, todos los datos y recursos dentro de ese proyecto se eliminarán permanentemente y no podrán recuperarse.",
+        "button": "Eliminar mi proyecto"
+      },
+      "toast": {
+        "success": "Proyecto actualizado exitosamente",
+        "error": "No se pudo actualizar el proyecto. Por favor intenta de nuevo."
+      }
+    },
+    "members": {
+      "label": "Miembros",
+      "project_lead": "Líder del proyecto",
+      "project_lead_description": "Seleccione el responsable del proyecto.",
+      "default_assignee": "Asignado por defecto",
+      "default_assignee_description": "Seleccione el asignado predeterminado para el proyecto.",
+      "project_subscribers": "Suscriptores del proyecto",
+      "project_subscribers_description": "Seleccione los miembros que recibirán notificaciones para este proyecto.",
+      "guest_super_permissions": {
+        "title": "Otorgar acceso de visualización a todos los elementos de trabajo para usuarios invitados:",
+        "sub_heading": "Esto permitirá a los invitados tener acceso de visualización a todos los elementos de trabajo del proyecto."
+      },
+      "invite_members": {
+        "title": "Invitar miembros",
+        "sub_heading": "Invita miembros para trabajar en tu proyecto.",
+        "select_co_worker": "Seleccionar compañero de trabajo"
+      }
+    },
+    "states": {
+      "heading": "Estados",
+      "description": "Define y personaliza los estados del flujo de trabajo para rastrear el progreso de tus elementos de trabajo.",
+      "describe_this_state_for_your_members": "Describe este estado para tus miembros.",
+      "empty_state": {
+        "title": "No estados disponibles para el grupo {groupKey}",
+        "description": "Por favor, crea un nuevo estado"
+      }
+    },
+    "labels": {
+      "heading": "Etiquetas",
+      "description": "Crea etiquetas personalizadas para categorizar y organizar tus elementos de trabajo",
+      "label_title": "Título de la etiqueta",
+      "label_title_is_required": "El título de la etiqueta es requerido",
+      "label_max_char": "El nombre de la etiqueta no debe exceder 255 caracteres",
+      "toast": {
+        "error": "Error al actualizar la etiqueta"
+      }
+    },
+    "estimates": {
+      "heading": "Estimaciones",
+      "description": "Te ayudan a comunicar la complejidad y la carga de trabajo del equipo.",
+      "label": "Estimaciones",
+      "title": "Activar estimaciones para mi proyecto",
+      "enable_description": "Te ayudan a comunicar la complejidad y la carga de trabajo del equipo.",
+      "no_estimate": "Sin estimación",
+      "new": "Nuevo sistema de estimación",
+      "create": {
+        "custom": "Personalizado",
+        "start_from_scratch": "Comenzar desde cero",
+        "choose_template": "Elegir una plantilla",
+        "choose_estimate_system": "Elegir un sistema de estimación",
+        "enter_estimate_point": "Ingresar estimación",
+        "step": "Paso {step} de {total}",
+        "label": "Crear estimación"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Estimación creada",
+            "message": "La estimación se ha creado correctamente"
+          },
+          "error": {
+            "title": "Error al crear la estimación",
+            "message": "No pudimos crear la nueva estimación, por favor inténtalo de nuevo."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Estimación modificada",
+            "message": "La estimación se ha actualizado en tu proyecto."
+          },
+          "error": {
+            "title": "Error al modificar la estimación",
+            "message": "No pudimos modificar la estimación, por favor inténtalo de nuevo"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "¡Éxito!",
+            "message": "Las estimaciones han sido activadas."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "¡Éxito!",
+            "message": "Las estimaciones han sido desactivadas."
+          },
+          "error": {
+            "title": "¡Error!",
+            "message": "No se pudo desactivar la estimación. Por favor inténtalo de nuevo"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Estimaciones reordenadas",
+            "message": "Las estimaciones han sido reordenadas en tu proyecto."
+          },
+          "error": {
+            "title": "Error al reordenar estimaciones",
+            "message": "No pudimos reordenar las estimaciones, por favor intenta de nuevo"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Sistema de estimaciones creado",
+            "message": "Creado y habilitado correctamente"
+          },
+          "error": {
+            "title": "Error",
+            "message": "Algo salió mal"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "La estimación debe ser mayor que 0.",
+        "unable_to_process": "No podemos procesar tu solicitud, por favor inténtalo de nuevo.",
+        "numeric": "La estimación debe ser un valor numérico.",
+        "character": "La estimación debe ser un valor de carácter.",
+        "empty": "El valor de la estimación no puede estar vacío.",
+        "already_exists": "El valor de la estimación ya existe.",
+        "unsaved_changes": "Tienes cambios sin guardar. Por favor guárdalos antes de hacer clic en Hecho",
+        "remove_empty": "La estimación no puede estar vacía. Ingresa un valor en cada campo o elimina aquellos para los que no tienes valores.",
+        "fill": "Por favor completa este campo de estimación",
+        "repeat": "El valor de estimación no puede repetirse"
+      },
+      "systems": {
+        "points": {
+          "label": "Puntos",
+          "fibonacci": "Fibonacci",
+          "linear": "Lineal",
+          "squares": "Cuadrados",
+          "custom": "Personalizado"
+        },
+        "categories": {
+          "label": "Categorías",
+          "t_shirt_sizes": "Tallas de camiseta",
+          "easy_to_hard": "Fácil a difícil",
+          "custom": "Personalizado"
+        },
+        "time": {
+          "label": "Tiempo",
+          "hours": "Horas"
+        }
+      },
+      "edit": {
+        "title": "Editar sistema de estimaciones",
+        "add_or_update": {
+          "title": "Agregar, actualizar o eliminar estimaciones",
+          "description": "Gestiona el sistema actual agregando, actualizando o eliminando los puntos o categorías."
+        },
+        "switch": {
+          "title": "Cambiar tipo de estimación",
+          "description": "Convierte tu sistema de puntos a sistema de categorías y viceversa."
+        }
+      },
+      "switch": "Cambiar sistema de estimaciones",
+      "current": "Sistema de estimaciones actual",
+      "select": "Seleccionar un sistema de estimaciones"
+    },
+    "automations": {
+      "label": "Automatizaciones",
+      "heading": "Automatizaciones",
+      "description": "Configura acciones automatizadas para optimizar tu flujo de trabajo de gestión de proyectos y reducir tareas manuales.",
+      "auto-archive": {
+        "title": "Archivar automáticamente elementos de trabajo cerrados",
+        "description": "Plane archivará automáticamente los elementos de trabajo que hayan sido completados o cancelados.",
+        "duration": "Archivar automáticamente elementos de trabajo cerrados durante"
+      },
+      "auto-close": {
+        "title": "Cerrar automáticamente elementos de trabajo",
+        "description": "Plane cerrará automáticamente los elementos de trabajo que no hayan sido completados o cancelados.",
+        "duration": "Cerrar automáticamente elementos de trabajo inactivos durante",
+        "auto_close_status": "Estado de cierre automático"
+      },
+      "auto-remind": {
+        "title": "Recordatorios automáticos",
+        "description": "Plane enviará recordatorios automáticos via correo electrónico y notificaciones en la aplicación para mantener a tu equipo en el camino de los plazos.",
+        "duration": "Enviar recordatorio antes"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Aún no hay etiquetas",
+        "description": "Crea etiquetas para organizar y filtrar elementos de trabajo en tu proyecto."
+      },
+      "estimates": {
+        "title": "Aún no hay sistemas de estimación",
+        "description": "Crea un conjunto de estimaciones para comunicar el volumen de trabajo por elemento de trabajo.",
+        "primary_button": "Agregar sistema de estimación"
+      },
+      "integrations": {
+        "title": "No hay integraciones configuradas",
+        "description": "Configura GitHub y otras integraciones para sincronizar los elementos de trabajo de tu proyecto."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Habilitar flujos de trabajo",
+        "description": "Configura flujos de trabajo para controlar el movimiento de los elementos de trabajo",
+        "no_states_tooltip": "No se han agregado estados al flujo de trabajo.",
+        "no_work_item_types_tooltip": "No se han agregado tipos de elementos de trabajo al flujo de trabajo.",
+        "no_states_or_work_item_types_tooltip": "No se han agregado estados ni tipos de elementos de trabajo al flujo de trabajo.",
+        "toast": {
+          "loading": {
+            "enabling": "Habilitando flujos de trabajo",
+            "disabling": "Deshabilitando flujos de trabajo"
+          },
+          "success": {
+            "title": "¡Éxito!",
+            "message": "Flujos de trabajo habilitados correctamente."
+          },
+          "error": {
+            "title": "¡Error!",
+            "message": "Error al habilitar los flujos de trabajo. Por favor, inténtalo de nuevo."
+          }
+        }
+      },
+      "heading": "Flujos de trabajo",
+      "description": "Automatiza las transiciones de elementos de trabajo y establece reglas para controlar cómo se mueven las tareas a través del flujo de tu proyecto.",
+      "add_button": "Agregar nuevo flujo de trabajo",
+      "search": "Buscar flujos de trabajo",
+      "detail": {
+        "define": "Definir flujo de trabajo",
+        "add_states": "Agregar estados",
+        "unmapped_states": {
+          "title": "Estados no asignados detectados",
+          "description": "Algunos elementos de trabajo para los tipos seleccionados están actualmente en estados que no existen en este flujo de trabajo.",
+          "note": "Si habilitas este flujo de trabajo, estos elementos se moverán automáticamente al estado inicial de este flujo de trabajo.",
+          "label": "Estados faltantes",
+          "tooltip": "Algunos elementos de trabajo están en estados que no están asignados a este flujo de trabajo. Abre el flujo de trabajo para revisarlo."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Todos los estados están en uso",
+          "description": "Todos los estados definidos para este proyecto ya están presentes en tu flujo de trabajo actual."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Este flujo de trabajo se aplica a cualquier tipo de elemento de trabajo que no esté asignado a un flujo de trabajo."
+      },
+      "create": {
+        "heading": "Crear nuevo flujo de trabajo",
+        "name": {
+          "placeholder": "Agrega un nombre único",
+          "validation": {
+            "max_length": "El nombre debe tener menos de 255 caracteres",
+            "required": "El nombre es obligatorio",
+            "invalid": "El nombre solo puede contener letras, números, espacios, guiones y apóstrofes"
+          }
+        },
+        "description": {
+          "placeholder": "Agrega una descripción breve",
+          "validation": {
+            "invalid": "La descripción solo puede contener letras, números, espacios, guiones y apóstrofes"
+          }
+        },
+        "work_item_type": {
+          "label": "Tipo de elemento de trabajo"
+        },
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Flujo de trabajo creado correctamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Error al crear el flujo de trabajo. Por favor, inténtalo de nuevo."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Flujo de trabajo actualizado correctamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Error al actualizar el flujo de trabajo. Por favor, inténtalo de nuevo."
+        }
+      },
+      "delete": {
+        "loading": "Eliminando flujo de trabajo",
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Flujo de trabajo eliminado correctamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Error al eliminar el flujo de trabajo. Por favor, inténtalo de nuevo."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Estados agregados correctamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Error al agregar los estados. Por favor, inténtalo de nuevo."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Tipos de elemento de trabajo",
+      "description": "Crea y personaliza diferentes tipos de elementos de trabajo con propiedades únicas"
+    },
+    "features": {
+      "cycles": {
+        "title": "Ciclos",
+        "short_title": "Ciclos",
+        "description": "Programa el trabajo en períodos flexibles que se adaptan al ritmo y al tempo únicos de este proyecto.",
+        "toggle_title": "Habilitar ciclos",
+        "toggle_description": "Planifica el trabajo en períodos de tiempo enfocados."
+      },
+      "modules": {
+        "title": "Módulos",
+        "short_title": "Módulos",
+        "description": "Organiza el trabajo en subproyectos con líderes y responsables dedicados.",
+        "toggle_title": "Habilitar módulos",
+        "toggle_description": "Los miembros del proyecto podrán crear y editar módulos."
+      },
+      "views": {
+        "title": "Vistas",
+        "short_title": "Vistas",
+        "description": "Guarda ordenaciones, filtros y opciones de visualización personalizadas o compártelos con tu equipo.",
+        "toggle_title": "Habilitar vistas",
+        "toggle_description": "Los miembros del proyecto podrán crear y editar vistas."
+      },
+      "pages": {
+        "title": "Páginas",
+        "short_title": "Páginas",
+        "description": "Crea y edita contenido libre: notas, documentos, cualquier cosa.",
+        "toggle_title": "Habilitar páginas",
+        "toggle_description": "Los miembros del proyecto podrán crear y editar páginas."
+      },
+      "intake": {
+        "intake_responsibility": "Responsabilidad de ingreso",
+        "intake_sources": "Fuentes de ingreso",
+        "title": "Recepción",
+        "short_title": "Recepción",
+        "description": "Permite que los no miembros compartan errores, comentarios y sugerencias; sin interrumpir tu flujo de trabajo.",
+        "toggle_title": "Habilitar recepción",
+        "toggle_description": "Permitir a los miembros del proyecto crear solicitudes de recepción en la aplicación.",
+        "toggle_tooltip_on": "Pide a tu administrador del proyecto que active esto.",
+        "toggle_tooltip_off": "Pide a tu administrador del proyecto que desactive esto.",
+        "notify_assignee": {
+          "title": "Notificar asignados",
+          "description": "Para una nueva solicitud de ingreso, los asignados predeterminados serán alertados mediante notificaciones"
+        },
+        "in_app": {
+          "title": "En la aplicación",
+          "description": "Recibe nuevos elementos de trabajo de miembros e invitados en tu espacio de trabajo sin interrumpir los existentes."
+        },
+        "email": {
+          "title": "Correo electrónico",
+          "description": "Recopila nuevos elementos de trabajo de cualquiera que envíe un correo a una dirección de Plane.",
+          "fieldName": "ID de correo electrónico"
+        },
+        "form": {
+          "title": "Formularios",
+          "description": "Permite que personas fuera de tu espacio de trabajo creen posibles nuevos elementos de trabajo mediante un formulario dedicado y seguro.",
+          "fieldName": "URL del formulario predeterminado",
+          "create_forms": "Crear formularios usando tipos de elementos de trabajo",
+          "manage_forms": "Gestionar formularios",
+          "manage_forms_tooltip": "Pide a tu administrador del espacio de trabajo que gestione esto.",
+          "create_form": "Crear formulario",
+          "edit_form": "Editar detalles del formulario",
+          "form_title": "Título del formulario",
+          "form_title_required": "El título del formulario es obligatorio",
+          "work_item_type": "Tipo de elemento de trabajo",
+          "remove_property": "Eliminar propiedad",
+          "select_properties": "Seleccionar propiedades",
+          "search_placeholder": "Buscar propiedades",
+          "toasts": {
+            "success_create": "Formulario de ingreso creado correctamente",
+            "success_update": "Formulario de ingreso actualizado correctamente",
+            "error_create": "Error al crear el formulario de ingreso",
+            "error_update": "Error al actualizar el formulario de ingreso"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Estableciendo asignados...",
+            "success": {
+              "title": "¡Éxito!",
+              "message": "Asignados establecidos correctamente."
+            },
+            "error": {
+              "title": "¡Error!",
+              "message": "Algo salió mal al establecer los asignados. Por favor, inténtalo de nuevo."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Seguimiento de tiempo",
+        "short_title": "Seguimiento de tiempo",
+        "description": "Registra el tiempo dedicado a elementos de trabajo y proyectos.",
+        "toggle_title": "Habilitar seguimiento de tiempo",
+        "toggle_description": "Los miembros del proyecto podrán registrar el tiempo trabajado."
+      },
+      "milestones": {
+        "title": "Hitos",
+        "short_title": "Hitos",
+        "description": "Los hitos proporcionan una capa para alinear los elementos de trabajo hacia fechas de finalización compartidas.",
+        "toggle_title": "Habilitar hitos",
+        "toggle_description": "Organiza elementos de trabajo por plazos de hitos."
+      },
+      "toasts": {
+        "loading": "Actualizando función del proyecto...",
+        "success": "Función del proyecto actualizada correctamente.",
+        "error": "Algo salió mal al actualizar la función del proyecto. Por favor, inténtalo de nuevo."
+      }
+    },
+    "project_updates": {
+      "heading": "Actualizaciones del proyecto",
+      "description": "Seguimiento consolidado y monitoreo del progreso de este proyecto"
+    },
+    "templates": {
+      "heading": "Plantillas",
+      "description": "Ahorra el 80 % del tiempo dedicado a crear proyectos, elementos de trabajo y páginas cuando usas plantillas."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Programación automática de ciclos",
+        "description": "Mantén los ciclos en movimiento sin configuración manual.",
+        "tooltip": "Crea automáticamente nuevos ciclos basados en tu programación elegida.",
+        "edit_button": "Editar",
+        "form": {
+          "cycle_title": {
+            "label": "Título del ciclo",
+            "placeholder": "Título",
+            "tooltip": "El título se agregará con números para los ciclos subsiguientes. Por ejemplo: Diseño - 1/2/3",
+            "validation": {
+              "required": "El título del ciclo es requerido",
+              "max_length": "El título no debe exceder los 255 caracteres"
+            }
+          },
+          "cycle_duration": {
+            "label": "Duración del ciclo",
+            "unit": "Semanas",
+            "validation": {
+              "required": "La duración del ciclo es requerida",
+              "min": "La duración del ciclo debe ser al menos 1 semana",
+              "max": "La duración del ciclo no puede exceder 30 semanas",
+              "positive": "La duración del ciclo debe ser positiva"
+            }
+          },
+          "cooldown_period": {
+            "label": "Período de enfriamiento",
+            "unit": "días",
+            "tooltip": "Pausa entre ciclos antes de que comience el siguiente.",
+            "validation": {
+              "required": "El período de enfriamiento es requerido",
+              "negative": "El período de enfriamiento no puede ser negativo"
+            }
+          },
+          "start_date": {
+            "label": "Día de inicio del ciclo",
+            "validation": {
+              "required": "La fecha de inicio es requerida",
+              "past": "La fecha de inicio no puede estar en el pasado"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Número de ciclos futuros",
+            "validation": {
+              "required": "El número de ciclos es requerido",
+              "min": "Se requiere al menos 1 ciclo",
+              "max": "No se pueden programar más de 3 ciclos"
+            }
+          },
+          "auto_rollover": {
+            "label": "Transferencia automática de elementos de trabajo",
+            "tooltip": "El día que se complete un ciclo, mover todos los elementos de trabajo sin terminar al siguiente ciclo."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Habilitando programación automática de ciclos",
+            "loading_disable": "Deshabilitando programación automática de ciclos",
+            "success": {
+              "title": "¡Éxito!",
+              "message": "Programación automática de ciclos activada exitosamente."
+            },
+            "error": {
+              "title": "¡Error!",
+              "message": "Error al activar la programación automática de ciclos."
+            }
+          },
+          "save": {
+            "loading": "Guardando configuración de programación automática de ciclos",
+            "success": {
+              "title": "¡Éxito!",
+              "message_create": "Configuración de programación automática de ciclos guardada exitosamente.",
+              "message_update": "Configuración de programación automática de ciclos actualizada exitosamente."
+            },
+            "error": {
+              "title": "¡Error!",
+              "message_create": "Error al guardar la configuración de programación automática de ciclos.",
+              "message_update": "Error al actualizar la configuración de programación automática de ciclos."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/project.json b/packages/i18n/src/locales/es/project.json
new file mode 100644
index 0000000..fc2df35
--- /dev/null
+++ b/packages/i18n/src/locales/es/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Creado el",
+      "updated_at": "Actualizado el",
+      "name": "Nombre"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Agregar ciclo",
+    "more_details": "Más detalles",
+    "cycle": "Ciclo",
+    "update_cycle": "Actualizar ciclo",
+    "create_cycle": "Crear ciclo",
+    "no_matching_cycles": "No hay ciclos coincidentes",
+    "remove_filters_to_see_all_cycles": "Elimina los filtros para ver todos los ciclos",
+    "remove_search_criteria_to_see_all_cycles": "Elimina los criterios de búsqueda para ver todos los ciclos",
+    "only_completed_cycles_can_be_archived": "Solo los ciclos completados pueden ser archivados",
+    "start_date": "Fecha de inicio",
+    "end_date": "Fecha de finalización",
+    "in_your_timezone": "En tu zona horaria",
+    "transfer_work_items": "Transferir {count} elementos de trabajo",
+    "transfer": {
+      "no_cycles_available": "No hay otros ciclos disponibles para transferir elementos de trabajo."
+    },
+    "date_range": "Rango de fechas",
+    "add_date": "Agregar fecha",
+    "active_cycle": {
+      "label": "Ciclo activo",
+      "progress": "Progreso",
+      "chart": "Gráfico de avance",
+      "priority_issue": "Elementos de trabajo prioritarios",
+      "assignees": "Asignados",
+      "issue_burndown": "Avance de elementos de trabajo",
+      "ideal": "Ideal",
+      "current": "Actual",
+      "labels": "Etiquetas",
+      "trailing": "Retrasado",
+      "leading": "Adelantado"
+    },
+    "upcoming_cycle": {
+      "label": "Ciclo próximo"
+    },
+    "completed_cycle": {
+      "label": "Ciclo completado"
+    },
+    "status": {
+      "days_left": "Días restantes",
+      "completed": "Completado",
+      "yet_to_start": "Por comenzar",
+      "in_progress": "En progreso",
+      "draft": "Borrador"
+    },
+    "action": {
+      "restore": {
+        "title": "Restaurar ciclo",
+        "success": {
+          "title": "Ciclo restaurado",
+          "description": "El ciclo ha sido restaurado."
+        },
+        "failed": {
+          "title": "Falló la restauración del ciclo",
+          "description": "No se pudo restaurar el ciclo. Por favor intenta de nuevo."
+        }
+      },
+      "favorite": {
+        "loading": "Agregando ciclo a favoritos",
+        "success": {
+          "description": "Ciclo agregado a favoritos.",
+          "title": "¡Éxito!"
+        },
+        "failed": {
+          "description": "No se pudo agregar el ciclo a favoritos. Por favor intenta de nuevo.",
+          "title": "¡Error!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Eliminando ciclo de favoritos",
+        "success": {
+          "description": "Ciclo eliminado de favoritos.",
+          "title": "¡Éxito!"
+        },
+        "failed": {
+          "description": "No se pudo eliminar el ciclo de favoritos. Por favor intenta de nuevo.",
+          "title": "¡Error!"
+        }
+      },
+      "update": {
+        "loading": "Actualizando ciclo",
+        "success": {
+          "description": "Ciclo actualizado exitosamente.",
+          "title": "¡Éxito!"
+        },
+        "failed": {
+          "description": "Error al actualizar el ciclo. Por favor intenta de nuevo.",
+          "title": "¡Error!"
+        },
+        "error": {
+          "already_exists": "Ya tienes un ciclo en las fechas dadas, si quieres crear un ciclo en borrador, puedes hacerlo eliminando ambas fechas."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Agrupa y delimita tu trabajo en Ciclos.",
+        "description": "Divide el trabajo en bloques de tiempo, trabaja hacia atrás desde la fecha límite de tu proyecto para establecer fechas, y haz un progreso tangible como equipo.",
+        "primary_button": {
+          "text": "Establece tu primer ciclo",
+          "comic": {
+            "title": "Los ciclos son bloques de tiempo repetitivos.",
+            "description": "Un sprint, una iteración, o cualquier otro término que uses para el seguimiento semanal o quincenal del trabajo es un ciclo."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "No hay elementos de trabajo agregados al ciclo",
+        "description": "Agrega o crea elementos de trabajo que desees delimitar y entregar dentro de este ciclo",
+        "primary_button": {
+          "text": "Crear nuevo elemento de trabajo"
+        },
+        "secondary_button": {
+          "text": "Agregar elemento de trabajo existente"
+        }
+      },
+      "completed_no_issues": {
+        "title": "No hay elementos de trabajo en el ciclo",
+        "description": "No hay elementos de trabajo en el ciclo. Los elementos de trabajo están transferidos u ocultos. Para ver elementos de trabajo ocultos si los hay, actualiza tus propiedades de visualización según corresponda."
+      },
+      "active": {
+        "title": "No hay ciclo activo",
+        "description": "Un ciclo activo incluye cualquier período que abarque la fecha de hoy dentro de su rango. Encuentra el progreso y los detalles del ciclo activo aquí."
+      },
+      "archived": {
+        "title": "Aún no hay ciclos archivados",
+        "description": "Para mantener ordenado tu proyecto, archiva los ciclos completados. Encuéntralos aquí una vez archivados."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Guarda vistas filtradas para tu proyecto. Crea tantas como necesites",
+        "description": "Las vistas son un conjunto de filtros guardados que usas frecuentemente o a los que quieres tener fácil acceso. Todos tus colegas en un proyecto pueden ver las vistas de todos y elegir la que mejor se adapte a sus necesidades.",
+        "primary_button": {
+          "text": "Crea tu primera vista",
+          "comic": {
+            "title": "Las vistas funcionan sobre las propiedades de los Elementos de trabajo.",
+            "description": "Puedes crear una vista desde aquí con tantas propiedades como filtros como consideres apropiado."
+          }
+        },
+        "filter": {
+          "title": "No hay vistas coincidentes",
+          "description": "Ninguna vista coincide con los criterios de búsqueda.\n Crea una nueva vista en su lugar."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Aún no hay elementos de trabajo archivados",
+        "description": "Manualmente o mediante automatización, puedes archivar elementos de trabajo que estén completados o cancelados. Encuéntralos aquí una vez archivados.",
+        "primary_button": {
+          "text": "Configurar automatización"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "No se encontraron elementos de trabajo que coincidan con los filtros aplicados",
+        "secondary_button": {
+          "text": "Limpiar todos los filtros"
+        }
+      },
+      "public": {
+        "title": "Aún no hay páginas públicas",
+        "description": "Ve las páginas compartidas con todos en tu proyecto aquí mismo.",
+        "primary_button": {
+          "text": "Crea tu primera página"
+        }
+      },
+      "archived": {
+        "title": "Aún no hay páginas archivadas",
+        "description": "Archiva las páginas que no estén en tu radar. Accede a ellas aquí cuando las necesites."
+      },
+      "shared": {
+        "title": "Aún no hay páginas compartidas",
+        "description": "Las páginas que otros han compartido contigo aparecerán aquí."
+      }
+    },
+    "delete_view": {
+      "title": "¿Estás seguro de que quieres eliminar esta vista?",
+      "content": "Si confirmas, todas las opciones de ordenación, filtro y visualización + el diseño que has elegido para esta vista se eliminarán permanentemente sin posibilidad de restaurarlas."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Crea un elemento de trabajo y asígnalo a alguien, incluso a ti mismo",
+        "description": "Piensa en los elementos de trabajo como trabajos, tareas, trabajo o JTBD. Los cuales nos gustan. Un elemento de trabajo y sus sub-elementos de trabajo son generalmente acciones basadas en tiempo asignadas a miembros de tu equipo. Tu equipo crea, asigna y completa elementos de trabajo para mover tu proyecto hacia su objetivo.",
+        "primary_button": {
+          "text": "Crea tu primer elemento de trabajo",
+          "comic": {
+            "title": "Los elementos de trabajo son bloques de construcción en Plane.",
+            "description": "Rediseñar la interfaz de Plane, Cambiar la marca de la empresa o Lanzar el nuevo sistema de inyección de combustible son ejemplos de elementos de trabajo que probablemente tienen sub-elementos de trabajo."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Aún no hay elementos de trabajo archivados",
+        "description": "Manualmente o a través de automatización, puedes archivar elementos de trabajo que estén completados o cancelados. Encuéntralos aquí una vez archivados.",
+        "primary_button": {
+          "text": "Establecer automatización"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "No se encontraron elementos de trabajo que coincidan con los filtros aplicados",
+        "secondary_button": {
+          "text": "Limpiar todos los filtros"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Agregar Módulo",
+    "update_module": "Actualizar Módulo",
+    "create_module": "Crear Módulo",
+    "archive_module": "Archivar Módulo",
+    "restore_module": "Restaurar Módulo",
+    "delete_module": "Eliminar módulo",
+    "empty_state": {
+      "general": {
+        "title": "Mapea los hitos de tu proyecto a Módulos y rastrea el trabajo agregado fácilmente.",
+        "description": "Un grupo de elementos de trabajo que pertenecen a un padre lógico y jerárquico forman un módulo. Piensa en ellos como una forma de rastrear el trabajo por hitos del proyecto. Tienen sus propios períodos y fechas límite, así como análisis para ayudarte a ver qué tan cerca o lejos estás de un hito.",
+        "primary_button": {
+          "text": "Construye tu primer módulo",
+          "comic": {
+            "title": "Los módulos ayudan a agrupar el trabajo por jerarquía.",
+            "description": "Un módulo de carrito, un módulo de chasis y un módulo de almacén son buenos ejemplos de esta agrupación."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "No hay elementos de trabajo en el módulo",
+        "description": "Crea o agrega elementos de trabajo que quieras lograr como parte de este módulo",
+        "primary_button": {
+          "text": "Crear nuevos elementos de trabajo"
+        },
+        "secondary_button": {
+          "text": "Agregar un elemento de trabajo existente"
+        }
+      },
+      "archived": {
+        "title": "Aún no hay Módulos archivados",
+        "description": "Para mantener ordenado tu proyecto, archiva los módulos completados o cancelados. Encuéntralos aquí una vez archivados."
+      },
+      "sidebar": {
+        "in_active": "Este módulo aún no está activo.",
+        "invalid_date": "Fecha inválida. Por favor ingresa una fecha válida."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Archivar módulo",
+      "archive_module_description": "Solo los módulos completados o\ncancelados pueden ser archivados.",
+      "delete_module": "Eliminar módulo"
+    },
+    "toast": {
+      "copy": {
+        "success": "Enlace del módulo copiado al portapapeles"
+      },
+      "delete": {
+        "success": "Módulo eliminado exitosamente",
+        "error": "Error al eliminar el módulo"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Escribe una nota, un documento o una base de conocimiento completa. Obtén ayuda de Galileo, el asistente de IA de Plane, para comenzar",
+        "description": "Las páginas son espacios para pensamientos en Plane. Toma notas de reuniones, fórmalas fácilmente, integra elementos de trabajo, organízalas usando una biblioteca de componentes y mantenlas todas en el contexto de tu proyecto. Para hacer cualquier documento rápidamente, invoca a Galileo, la IA de Plane, con un atajo o haciendo clic en un botón.",
+        "primary_button": {
+          "text": "Crea tu primera página"
+        }
+      },
+      "private": {
+        "title": "Aún no hay páginas privadas",
+        "description": "Mantén tus pensamientos privados aquí. Cuando estés listo para compartir, el equipo está a solo un clic de distancia.",
+        "primary_button": {
+          "text": "Crea tu primera página"
+        }
+      },
+      "public": {
+        "title": "Aún no hay páginas públicas",
+        "description": "Ve las páginas compartidas con todos en tu proyecto aquí mismo.",
+        "primary_button": {
+          "text": "Crea tu primera página"
+        }
+      },
+      "archived": {
+        "title": "Aún no hay páginas archivadas",
+        "description": "Archiva las páginas que no estén en tu radar. Accede a ellas aquí cuando las necesites."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Intake no está habilitado para el proyecto.",
+        "description": "Intake te ayuda a gestionar las solicitudes entrantes a tu proyecto y agregarlas como elementos de trabajo en tu flujo de trabajo. Habilita Intake desde la configuración del proyecto para gestionar las solicitudes.",
+        "primary_button": {
+          "text": "Gestionar funciones"
+        }
+      },
+      "cycle": {
+        "title": "Los Ciclos no están habilitados para este proyecto.",
+        "description": "Divide el trabajo en fragmentos limitados por tiempo, trabaja hacia atrás desde la fecha límite de tu proyecto para establecer fechas y haz un progreso tangible como equipo. Habilita la función de ciclos para tu proyecto para comenzar a usarlos.",
+        "primary_button": {
+          "text": "Gestionar funciones"
+        }
+      },
+      "module": {
+        "title": "Los Módulos no están habilitados para el proyecto.",
+        "description": "Los Módulos son los componentes básicos de tu proyecto. Habilita los módulos desde la configuración del proyecto para comenzar a usarlos.",
+        "primary_button": {
+          "text": "Gestionar funciones"
+        }
+      },
+      "page": {
+        "title": "Las Páginas no están habilitadas para el proyecto.",
+        "description": "Las Páginas son los componentes básicos de tu proyecto. Habilita las páginas desde la configuración del proyecto para comenzar a usarlas.",
+        "primary_button": {
+          "text": "Gestionar funciones"
+        }
+      },
+      "view": {
+        "title": "Las Vistas no están habilitadas para el proyecto.",
+        "description": "Las Vistas son los componentes básicos de tu proyecto. Habilita las vistas desde la configuración del proyecto para comenzar a usarlas.",
+        "primary_button": {
+          "text": "Gestionar funciones"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Pendientes",
+      "planned": "Planificado",
+      "in_progress": "En progreso",
+      "paused": "Pausado",
+      "completed": "Completado",
+      "cancelled": "Cancelado"
+    },
+    "layout": {
+      "list": "Vista de lista",
+      "board": "Vista de galería",
+      "timeline": "Vista de línea de tiempo"
+    },
+    "order_by": {
+      "name": "Nombre",
+      "progress": "Progreso",
+      "issues": "Número de elementos de trabajo",
+      "due_date": "Fecha de vencimiento",
+      "created_at": "Fecha de creación",
+      "manual": "Manual"
+    }
+  },
+  "project_members": {
+    "full_name": "Nombre completo",
+    "display_name": "Nombre para mostrar",
+    "email": "Correo electrónico",
+    "joining_date": "Fecha de ingreso",
+    "role": "Rol"
+  },
+  "project": {
+    "members_import": {
+      "title": "Importar miembros desde CSV",
+      "description": "Sube un CSV con columnas: Correo electrónico y Rol (5=Invitado, 15=Miembro, 20=Administrador). Los usuarios ya deben ser miembros del espacio de trabajo.",
+      "download_sample": "Descargar CSV de ejemplo",
+      "dropzone": {
+        "active": "Suelta el archivo CSV aquí",
+        "inactive": "Arrastra y suelta o haz clic para subir",
+        "file_type": "Solo se admiten archivos .csv"
+      },
+      "buttons": {
+        "cancel": "Cancelar",
+        "import": "Importar",
+        "try_again": "Intentar de nuevo",
+        "close": "Cerrar",
+        "done": "Hecho"
+      },
+      "progress": {
+        "uploading": "Subiendo...",
+        "importing": "Importando..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Importación completada"
+        },
+        "message": {
+          "success": "{count} miembro{plural} importado{plural} correctamente al proyecto.",
+          "no_imports": "No se importaron nuevos miembros desde el archivo CSV."
+        },
+        "stats": {
+          "added": "Añadidos",
+          "reactivated": "Reactivados",
+          "already_members": "Ya miembros",
+          "skipped": "Omitidos"
+        },
+        "download_errors": "Descargar detalles omitidos"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Archivo inválido",
+          "message": "Solo se admiten archivos CSV."
+        },
+        "import_failed": {
+          "title": "Importación fallida",
+          "message": "Algo salió mal."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/settings.json b/packages/i18n/src/locales/es/settings.json
new file mode 100644
index 0000000..68a09d1
--- /dev/null
+++ b/packages/i18n/src/locales/es/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Cambiar correo electrónico",
+        "description": "Introduce una nueva dirección de correo electrónico para recibir un enlace de verificación.",
+        "toasts": {
+          "success_title": "¡Éxito!",
+          "success_message": "Correo electrónico actualizado correctamente. Inicia sesión de nuevo."
+        },
+        "form": {
+          "email": {
+            "label": "Nuevo correo electrónico",
+            "placeholder": "Introduce tu correo electrónico",
+            "errors": {
+              "required": "El correo electrónico es obligatorio",
+              "invalid": "El correo electrónico no es válido",
+              "exists": "El correo electrónico ya existe. Usa uno diferente.",
+              "validation_failed": "La validación del correo electrónico falló. Inténtalo de nuevo."
+            }
+          },
+          "code": {
+            "label": "Código único",
+            "placeholder": "123456",
+            "helper_text": "Código de verificación enviado a tu nuevo correo electrónico.",
+            "errors": {
+              "required": "El código único es obligatorio",
+              "invalid": "Código de verificación inválido. Inténtalo de nuevo."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Continuar",
+          "confirm": "Confirmar",
+          "cancel": "Cancelar"
+        },
+        "states": {
+          "sending": "Enviando…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Preferencias",
+      "description": "Personaliza tu experiencia de la aplicación según tu forma de trabajar"
+    },
+    "notifications": {
+      "heading": "Notificaciones por correo electrónico",
+      "description": "Mantente al tanto de los elementos de trabajo a los que estás suscrito. Activa esto para recibir notificaciones.",
+      "select_default_view": "Seleccionar vista predeterminada",
+      "compact": "Compacto",
+      "full": "Pantalla completa"
+    },
+    "security": {
+      "heading": "Seguridad"
+    },
+    "api_tokens": {
+      "title": "Tokens de acceso personal",
+      "description": "Genera tokens de API seguros para integrar tus datos con sistemas y aplicaciones externas."
+    },
+    "activity": {
+      "heading": "Actividad",
+      "description": "Realiza un seguimiento de tus acciones y cambios recientes en todos los proyectos y elementos de trabajo."
+    },
+    "connections": {
+      "title": "Conexiones",
+      "heading": "Conexiones",
+      "description": "Administra la configuración de conexiones de tu espacio de trabajo."
+    }
+  },
+  "profile": {
+    "label": "Perfil",
+    "page_label": "Tu trabajo",
+    "work": "Trabajo",
+    "details": {
+      "joined_on": "Se unió el",
+      "time_zone": "Zona horaria"
+    },
+    "stats": {
+      "workload": "Carga de trabajo",
+      "overview": "Resumen",
+      "created": "Elementos de trabajo creados",
+      "assigned": "Elementos de trabajo asignados",
+      "subscribed": "Elementos de trabajo suscritos",
+      "state_distribution": {
+        "title": "Elementos de trabajo por estado",
+        "empty": "Crea elementos de trabajo para verlos por estados en el gráfico para un mejor análisis."
+      },
+      "priority_distribution": {
+        "title": "Elementos de trabajo por Prioridad",
+        "empty": "Crea elementos de trabajo para verlos por prioridad en el gráfico para un mejor análisis."
+      },
+      "recent_activity": {
+        "title": "Actividad reciente",
+        "empty": "No pudimos encontrar datos. Por favor revisa tus entradas",
+        "button": "Descargar actividad de hoy",
+        "button_loading": "Descargando"
+      }
+    },
+    "actions": {
+      "profile": "Perfil",
+      "security": "Seguridad",
+      "activity": "Actividad",
+      "preferences": "Preferencias",
+      "notifications": "Notificaciones",
+      "api-tokens": "Tokens de acceso personal",
+      "connections": "Conexiones"
+    },
+    "tabs": {
+      "summary": "Resumen",
+      "assigned": "Asignado",
+      "created": "Creado",
+      "subscribed": "Suscrito",
+      "activity": "Actividad"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Aún no hay actividades",
+        "description": "¡Comienza creando un nuevo elemento de trabajo! Agrégale detalles y propiedades. Explora más en Plane para ver tu actividad."
+      },
+      "assigned": {
+        "title": "No hay elementos de trabajo asignados a ti",
+        "description": "Los elementos de trabajo asignados a ti se pueden rastrear desde aquí."
+      },
+      "created": {
+        "title": "Aún no hay elementos de trabajo",
+        "description": "Todos los elementos de trabajo creados por ti aparecen aquí, rastréalos directamente aquí."
+      },
+      "subscribed": {
+        "title": "Aún no hay elementos de trabajo",
+        "description": "Suscríbete a los elementos de trabajo que te interesen, rastréalos todos aquí."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Preferencia del sistema"
+      },
+      "light": {
+        "label": "Claro"
+      },
+      "dark": {
+        "label": "Oscuro"
+      },
+      "light_contrast": {
+        "label": "Claro de alto contraste"
+      },
+      "dark_contrast": {
+        "label": "Oscuro de alto contraste"
+      },
+      "custom": {
+        "label": "Tema personalizado"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/stickies.json b/packages/i18n/src/locales/es/stickies.json
new file mode 100644
index 0000000..8997201
--- /dev/null
+++ b/packages/i18n/src/locales/es/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Tus notas adhesivas",
+    "placeholder": "haz clic para escribir aquí",
+    "all": "Todas las notas adhesivas",
+    "no-data": "Anota una idea, captura un momento eureka o registra una inspiración. Agrega una nota adhesiva para comenzar.",
+    "add": "Agregar nota adhesiva",
+    "search_placeholder": "Buscar por título",
+    "delete": "Eliminar nota adhesiva",
+    "delete_confirmation": "¿Estás seguro de que quieres eliminar esta nota adhesiva?",
+    "empty_state": {
+      "simple": "Anota una idea, captura un momento eureka o registra una inspiración. Agrega una nota adhesiva para comenzar.",
+      "general": {
+        "title": "Las notas adhesivas son notas rápidas y tareas pendientes que anotas al vuelo.",
+        "description": "Captura tus pensamientos e ideas sin esfuerzo creando notas adhesivas a las que puedes acceder en cualquier momento y desde cualquier lugar.",
+        "primary_button": {
+          "text": "Agregar nota adhesiva"
+        }
+      },
+      "search": {
+        "title": "Eso no coincide con ninguna de tus notas adhesivas.",
+        "description": "Prueba un término diferente o háznoslo saber\nsi estás seguro de que tu búsqueda es correcta.",
+        "primary_button": {
+          "text": "Agregar nota adhesiva"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "El nombre de la nota adhesiva no puede tener más de 100 caracteres.",
+        "already_exists": "Ya existe una nota adhesiva sin descripción"
+      },
+      "created": {
+        "title": "Nota adhesiva creada",
+        "message": "La nota adhesiva se ha creado exitosamente"
+      },
+      "not_created": {
+        "title": "Nota adhesiva no creada",
+        "message": "No se pudo crear la nota adhesiva"
+      },
+      "updated": {
+        "title": "Nota adhesiva actualizada",
+        "message": "La nota adhesiva se ha actualizado exitosamente"
+      },
+      "not_updated": {
+        "title": "Nota adhesiva no actualizada",
+        "message": "No se pudo actualizar la nota adhesiva"
+      },
+      "removed": {
+        "title": "Nota adhesiva eliminada",
+        "message": "La nota adhesiva se ha eliminado exitosamente"
+      },
+      "not_removed": {
+        "title": "Nota adhesiva no eliminada",
+        "message": "No se pudo eliminar la nota adhesiva"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/template.json b/packages/i18n/src/locales/es/template.json
new file mode 100644
index 0000000..7f52a8a
--- /dev/null
+++ b/packages/i18n/src/locales/es/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Plantillas",
+      "description": "Ahorra un 80% del tiempo dedicado a crear proyectos, elementos de trabajo y páginas cuando utilizas plantillas.",
+      "new_project_template": "Nueva plantilla de proyecto",
+      "new_work_item_template": "Nueva plantilla de elemento de trabajo",
+      "new_page_template": "Nueva plantilla de página",
+      "options": {
+        "project": {
+          "label": "Plantillas de proyecto"
+        },
+        "work_item": {
+          "label": "Plantillas de elementos de trabajo"
+        },
+        "page": {
+          "label": "Plantillas de página"
+        }
+      },
+      "create_template": {
+        "label": "Crear plantilla",
+        "no_permission": {
+          "project": "Contacta con el administrador de tu proyecto para crear plantillas",
+          "workspace": "Contacta con el administrador de tu espacio de trabajo para crear plantillas"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Usar plantilla",
+          "loading": "Usando"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Derivado del espacio de trabajo"
+        },
+        "project": {
+          "info": "Derivado del proyecto"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Nombra tu plantilla de proyecto.",
+              "validation": {
+                "required": "El nombre de la plantilla es obligatorio",
+                "maxLength": "El nombre de la plantilla debe tener menos de 255 caracteres"
+              }
+            },
+            "description": {
+              "placeholder": "Describe cuándo y cómo utilizar esta plantilla."
+            }
+          },
+          "name": {
+            "placeholder": "Nombra tu proyecto.",
+            "validation": {
+              "required": "El título del proyecto es obligatorio",
+              "maxLength": "El título del proyecto debe tener menos de 255 caracteres"
+            }
+          },
+          "description": {
+            "placeholder": "Describe el propósito y los objetivos de este proyecto."
+          },
+          "button": {
+            "create": "Crear plantilla de proyecto",
+            "update": "Actualizar plantilla de proyecto"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Nombra tu plantilla de elemento de trabajo.",
+              "validation": {
+                "required": "El nombre de la plantilla es obligatorio",
+                "maxLength": "El nombre de la plantilla debe tener menos de 255 caracteres"
+              }
+            },
+            "description": {
+              "placeholder": "Describe cuándo y cómo utilizar esta plantilla."
+            }
+          },
+          "name": {
+            "placeholder": "Dale un título a este elemento de trabajo.",
+            "validation": {
+              "required": "El título del elemento de trabajo es obligatorio",
+              "maxLength": "El título del elemento de trabajo debe tener menos de 255 caracteres"
+            }
+          },
+          "description": {
+            "placeholder": "Describe este elemento de trabajo para que quede claro lo que conseguirás cuando lo completes."
+          },
+          "button": {
+            "create": "Crear plantilla de elemento de trabajo",
+            "update": "Actualizar plantilla de elemento de trabajo"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Nombra tu plantilla de página.",
+              "validation": {
+                "required": "El nombre de la plantilla es obligatorio",
+                "maxLength": "El nombre de la plantilla debe tener menos de 255 caracteres"
+              }
+            },
+            "description": {
+              "placeholder": "Describe cuándo y cómo utilizar esta plantilla."
+            }
+          },
+          "name": {
+            "placeholder": "Página sin título",
+            "validation": {
+              "maxLength": "El nombre de la página debe tener menos de 255 caracteres"
+            }
+          },
+          "button": {
+            "create": "Crear plantilla de página",
+            "update": "Actualizar plantilla de página"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Configuración de publicación} other {Publicar en el Marketplace}}",
+          "unpublish_action": "Retirar del Marketplace",
+          "title": "Haga que su plantilla sea descubrible y reconocible.",
+          "name": {
+            "label": "Nombre de la plantilla",
+            "placeholder": "Nombra tu plantilla",
+            "validation": {
+              "required": "El nombre de la plantilla es obligatorio",
+              "maxLength": "El nombre de la plantilla debe tener menos de 255 caracteres"
+            }
+          },
+          "short_description": {
+            "label": "Descripción corta",
+            "placeholder": "Esta plantilla es ideal para los Project Managers que gestionan varios proyectos al mismo tiempo.",
+            "validation": {
+              "required": "La descripción corta es obligatoria"
+            }
+          },
+          "description": {
+            "label": "Descripción",
+            "placeholder": "Mejora la productividad y simplifica la comunicación con nuestra integración de reconocimiento de voz.\n• Transcripción en tiempo real: Convierte palabras habladas en texto preciso instantáneamente.\n• Creación de tareas y comentarios: Añade tareas, descripciones y comentarios a través de comandos de voz.",
+            "validation": {
+              "required": "La descripción es obligatoria"
+            }
+          },
+          "category": {
+            "label": "Categoría",
+            "placeholder": "Elige dónde crees que esta plantilla se adapte mejor. Puedes elegir más de una.",
+            "validation": {
+              "required": "Al menos una categoría es obligatoria"
+            }
+          },
+          "keywords": {
+            "label": "Palabras clave",
+            "placeholder": "Usa términos que creas que tus usuarios buscarán cuando estén buscando esta plantilla.",
+            "helperText": "Introduce palabras clave separadas por comas que sean útiles para que los usuarios encuentren esta plantilla en la búsqueda.",
+            "validation": {
+              "required": "Al menos una palabra clave es obligatoria"
+            }
+          },
+          "website": {
+            "label": "URL del sitio web",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "URL no válida",
+              "maxLength": "La URL debe tener menos de 800 caracteres"
+            }
+          },
+          "company_name": {
+            "label": "Nombre de la empresa",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "El nombre de la empresa es obligatorio",
+              "maxLength": "El nombre de la empresa debe tener menos de 255 caracteres"
+            }
+          },
+          "contact_email": {
+            "label": "Correo electrónico de soporte",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Dirección de correo electrónico no válida",
+              "maxLength": "El correo electrónico de soporte debe tener menos de 255 caracteres"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Enlace a tu política de privacidad",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "URL no válida",
+              "maxLength": "La URL debe tener menos de 800 caracteres"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Enlace a tus términos de uso",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "URL no válida",
+              "maxLength": "La URL debe tener menos de 800 caracteres"
+            }
+          },
+          "cover_image": {
+            "label": "Añade una imagen de portada que se mostrará en el Marketplace",
+            "upload_title": "Subir imagen de portada",
+            "upload_placeholder": "Haz clic para subir o arrastra y suelta para subir una imagen de portada",
+            "drop_here": "Soltar aquí",
+            "click_to_upload": "Haz clic para subir",
+            "invalid_file_or_exceeds_size_limit": "Archivo no válido o excede el límite de tamaño. Por favor, inténtalo de nuevo.",
+            "upload_and_save": "Subir y guardar",
+            "uploading": "Subiendo",
+            "remove": "Eliminar",
+            "removing": "Eliminando",
+            "validation": {
+              "required": "La imagen de portada es obligatoria"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Incluye documentos y capturas de pantalla que creas que harán que los usuarios de esta plantilla vean lo que puedes hacer con ella.",
+            "validation": {
+              "required": "Al menos una captura de pantalla es obligatoria"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Plantillas",
+        "description": "Con las plantillas de proyectos, elementos de trabajo y páginas en Plane, no tienes que crear un proyecto desde cero ni configurar manualmente las propiedades de los elementos de trabajo.",
+        "sub_description": "Recupera el 80% de tu tiempo de administración cuando utilizas Plantillas."
+      },
+      "no_templates": {
+        "button": "Crea tu primera plantilla"
+      },
+      "no_labels": {
+        "description": " Aún no hay etiquetas. Crea etiquetas para ayudar a organizar y filtrar elementos de trabajo en tu proyecto."
+      },
+      "no_modules": {
+        "description": "Aún no hay módulos. Organiza el trabajo en subproyectos con líderes y responsables dedicados."
+      },
+      "no_work_items": {
+        "description": "Aún no hay elementos de trabajo. Añade uno para estructurar tu trabajo mejor."
+      },
+      "no_sub_work_items": {
+        "description": "No hay sub-elementos de trabajo aún. Añade uno para estructurar tu trabajo mejor."
+      },
+      "page": {
+        "no_templates": {
+          "title": "No hay plantillas a las que tengas acceso.",
+          "description": "Por favor, crea una plantilla"
+        },
+        "no_results": {
+          "title": "Eso no coincide con ninguna plantilla.",
+          "description": "Intenta buscar con otros términos."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Plantilla creada",
+          "message": "{templateName}, la plantilla de {templateType}, ya está disponible para tu espacio de trabajo."
+        },
+        "error": {
+          "title": "No pudimos crear esa plantilla esta vez.",
+          "message": "Intenta guardar tus detalles de nuevo o cópialos a una nueva plantilla, preferiblemente en otra pestaña."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Plantilla modificada",
+          "message": "{templateName}, la plantilla de {templateType}, ha sido modificada."
+        },
+        "error": {
+          "title": "No pudimos guardar los cambios en esta plantilla.",
+          "message": "Intenta guardar tus detalles de nuevo o vuelve a esta plantilla más tarde. Si sigues teniendo problemas, contacta con nosotros."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Plantilla eliminada",
+          "message": "{templateName}, la plantilla de {templateType}, ha sido eliminada de tu espacio de trabajo."
+        },
+        "error": {
+          "title": "No pudimos eliminar esa plantilla esta vez.",
+          "message": "Intenta eliminarla de nuevo o vuelve a intentarlo más tarde. Si no puedes eliminarla entonces, contacta con nosotros."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Plantilla retirada",
+          "message": "{templateName}, la plantilla de {templateType}, ha sido retirada."
+        },
+        "error": {
+          "title": "No pudimos retirar esa plantilla esta vez.",
+          "message": "Intenta retirarla de nuevo o vuelve a intentarlo más tarde. Si no puedes retirarla entonces, contacta con nosotros."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Eliminar plantilla",
+      "description": {
+        "prefix": "¿Estás seguro de que quieres eliminar la plantilla-",
+        "suffix": "? Todos los datos relacionados con la plantilla se eliminarán permanentemente. Esta acción no se puede deshacer."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Retirar plantilla",
+      "description": {
+        "prefix": "¿Estás seguro de que quieres retirar la plantilla-",
+        "suffix": "? Esta plantilla ya no estará disponible para los usuarios en el marketplace."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Agregar nueva plantilla",
+        "project": "Agregar nueva plantilla"
+      },
+      "label": {
+        "project": "Seleccionar una plantilla de proyecto",
+        "page": "Elegir desde plantilla"
+      },
+      "tooltip": {
+        "work_item": "Seleccionar una plantilla de elemento de trabajo"
+      },
+      "no_results": {
+        "work_item": "No se encontraron plantillas.",
+        "project": "No se encontraron plantillas."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/tour.json b/packages/i18n/src/locales/es/tour.json
new file mode 100644
index 0000000..14852c9
--- /dev/null
+++ b/packages/i18n/src/locales/es/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Bienvenido a tu espacio de trabajo",
+        "description": "Para ayudarte a comenzar, hemos creado un Proyecto Demo para ti. Agreguemos tu primer elemento de trabajo."
+      },
+      "step_one": {
+        "title": "Haz clic en \"+ Agregar elemento de trabajo\"",
+        "description": "Comienza haciendo clic en el botón \"+ Nuevo elemento de trabajo\". Puedes crear tareas, errores o un tipo personalizado que se ajuste a tus necesidades."
+      },
+      "step_two": {
+        "title": "Filtra tus elementos de trabajo",
+        "description": "Usa filtros para reducir rápidamente tu lista. Puedes filtrar por estado, prioridad o miembros del equipo. "
+      },
+      "step_three": {
+        "title": "Visualiza, agrupa y ordena los elementos de trabajo según sea necesario.",
+        "description": "Ve las propiedades requeridas y agrupa u ordena los elementos de trabajo según tus necesidades."
+      },
+      "step_four": {
+        "title": "Visualiza como quieras",
+        "description": "Selecciona qué propiedades quieres ver en la lista. También puedes agrupar y ordenar los elementos de trabajo a tu manera."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Progresa con Ciclos",
+        "description": "Presiona Q para crear un Ciclo. Nómbralo y establece fechas—solo un ciclo por proyecto."
+      },
+      "step_one": {
+        "title": "Crear un nuevo ciclo",
+        "description": "Presiona Q para crear un Ciclo. Nómbralo y establece fechas—solo un ciclo por proyecto."
+      },
+      "step_two": {
+        "title": "Haz clic en \"+\"",
+        "description": "Comienza haciendo clic en el botón \"+\". Agrega elementos de trabajo nuevos o existentes directamente desde la página de Ciclo."
+      },
+      "step_three": {
+        "title": "Resumen del ciclo",
+        "description": "Rastrea el progreso del ciclo, la productividad del equipo y las prioridades—e investiga si algo se retrasa."
+      },
+      "step_four": {
+        "title": "Transferir elementos de trabajo",
+        "description": "Después de la fecha de vencimiento, un ciclo se completa automáticamente. Mueve el trabajo no terminado a otro ciclo."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Divide tu proyecto en Módulos",
+        "description": "Los módulos son proyectos más pequeños y enfocados que ayudan a los usuarios a agrupar y organizar elementos de trabajo dentro de marcos de tiempo específicos."
+      },
+      "step_one": {
+        "title": "Crear Módulo",
+        "description": "Los módulos son proyectos más pequeños y enfocados que ayudan a los usuarios a agrupar y organizar elementos de trabajo dentro de marcos de tiempo específicos."
+      },
+      "step_two": {
+        "title": "Haz clic en \"+\"",
+        "description": "Comienza haciendo clic en el botón \"+\". Agrega elementos de trabajo nuevos o existentes directamente desde la página de Módulo."
+      },
+      "step_three": {
+        "title": "Estados del módulo",
+        "description": "Los módulos usan estos estados para ayudar a los usuarios a planificar y rastrear claramente el progreso y la etapa."
+      },
+      "step_four": {
+        "title": "Progreso del módulo",
+        "description": "El progreso del módulo se rastrea a través de elementos completados, con análisis para monitorear el rendimiento."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Documenta con Páginas potenciadas por IA",
+        "description": "Las Páginas en Plane te permiten capturar, organizar y colaborar en información del proyecto—sin herramientas externas."
+      },
+      "step_one": {
+        "title": "Hacer página Pública o Privada",
+        "description": "Las páginas se pueden configurar como públicas, visibles para todos en tu espacio de trabajo, o privadas, accesibles solo para ti."
+      },
+      "step_two": {
+        "title": "Usa el comando /",
+        "description": "Usa / en una página para agregar contenido de 16 tipos de bloques, incluidas listas, imágenes, tablas e incrustaciones."
+      },
+      "step_three": {
+        "title": "Acciones de página",
+        "description": "Una vez creada tu página, puedes hacer clic en el menú ••• en la esquina superior derecha para realizar las siguientes acciones."
+      },
+      "step_four": {
+        "title": "Tabla de contenidos",
+        "description": "Obtén una vista panorámica de tu página haciendo clic en el ícono del panel para ver todos los encabezados."
+      },
+      "step_five": {
+        "title": "Historial de versiones",
+        "description": "Las páginas rastrean todas las ediciones con historial de versiones, permitiéndote restaurar versiones anteriores si es necesario."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Optimiza solicitudes con recepción",
+        "description": "Una característica exclusiva de Plane que permite a los Invitados crear elementos de trabajo para errores, solicitudes o tickets."
+      },
+      "step_one": {
+        "title": "Solicitudes de recepción abiertas/cerradas",
+        "description": "Las solicitudes pendientes permanecen en la pestaña Abiertas, y una vez atendidas por un administrador o miembro, se mueven a Cerradas."
+      },
+      "step_two": {
+        "title": "Aceptar/rechazar una solicitud pendiente",
+        "description": "Acepta para editar y mover el elemento de trabajo a tu proyecto, o recházalo para marcarlo como Cancelado."
+      },
+      "step_three": {
+        "title": "Posponer por ahora",
+        "description": "Un elemento de trabajo puede posponerse para revisarlo más tarde. Se moverá al final de tu lista de solicitudes abiertas."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Deja de cambiar de pestañas. Conecta tu mundo.",
+        "description": "Vincula GitHub y Slack para rastrear PRs y resumir chats directamente en Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navegación, reimaginada",
+        "sub_title": "Tu espacio de trabajo ahora es más fácil de explorar con una navegación más inteligente y simplificada.",
+        "highlight_1": "Estructura simplificada del panel izquierdo para un descubrimiento más rápido",
+        "highlight_2": "Búsqueda global mejorada para saltar a cualquier cosa al instante",
+        "highlight_3": "Agrupación de categorías más inteligente para claridad y enfoque",
+        "footer": "¿Quieres un recorrido rápido?"
+      },
+      "step_zero": {
+        "title": "Encuentra cualquier cosa al instante",
+        "description": "Usa la búsqueda universal para saltar a tareas, proyectos, páginas y personas—sin salir de tu flujo."
+      },
+      "step_one": {
+        "title": "Mantén el control de las actualizaciones",
+        "description": "Tu bandeja de entrada mantiene todas las menciones, aprobaciones y actividad en un solo lugar, para que nunca te pierdas trabajo importante."
+      },
+      "step_two": {
+        "title": "Personaliza tu Navegación",
+        "description": "Personaliza lo que ves y cómo navegas en Preferencias."
+      }
+    },
+    "actions": {
+      "close": "Cerrar",
+      "next": "Siguiente",
+      "back": "Atrás",
+      "done": "Hecho",
+      "take_a_tour": "Hacer un recorrido",
+      "get_started": "Comenzar",
+      "got_it": "Entendido"
+    },
+    "seed_data": {
+      "title": "Aquí está tu proyecto demo",
+      "description": "Los proyectos te permiten administrar tus equipos, tareas y todo lo que necesitas para hacer las cosas dentro de tu espacio de trabajo."
+    }
+  },
+  "get_started": {
+    "title": "¡Hola {name}, bienvenido a bordo!",
+    "description": "Aquí está todo lo que necesitas para comenzar tu viaje con Plane.",
+    "checklist_section": {
+      "title": "Comenzar",
+      "description": "Comienza tu configuración y ve tus ideas cobrar vida más rápido.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Crear un proyecto"
+        },
+        "item_2": {
+          "title": "Crear un elemento de trabajo"
+        },
+        "item_3": {
+          "title": "Invitar miembros del equipo"
+        },
+        "item_4": {
+          "title": "Crear una página"
+        },
+        "item_5": {
+          "title": "Probar el chat de Plane AI"
+        },
+        "item_6": {
+          "title": "Vincular Integraciones"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Invita a tu equipo",
+      "description": "Invita compañeros de equipo y comienza a construir juntos."
+    },
+    "integrations_section": {
+      "title": "Potencia tu espacio de trabajo",
+      "more_integrations": "Explorar más integraciones"
+    },
+    "switch_to_plane_section": {
+      "title": "Descubre por qué los equipos cambian a Plane",
+      "description": "Compara Plane con las herramientas que usas hoy y ve la diferencia."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/update.json b/packages/i18n/src/locales/es/update.json
new file mode 100644
index 0000000..986ac85
--- /dev/null
+++ b/packages/i18n/src/locales/es/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Progreso",
+      "since_last_update": "Desde la última actualización",
+      "comments": "{count, plural, one{# comentario} other{# comentarios}}"
+    },
+    "add_update": "Agregar actualización",
+    "add_update_placeholder": "Escribe tu actualización aquí",
+    "empty": {
+      "title": "Aún no hay actualizaciones",
+      "description": "Puedes ver las actualizaciones aquí."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reacción creada",
+          "message": "Reacción creada con éxito"
+        },
+        "error": {
+          "title": "Reacción no creada",
+          "message": "No se pudo crear la reacción"
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reacción eliminada",
+          "message": "Reacción eliminada con éxito"
+        },
+        "error": {
+          "title": "Reacción no eliminada",
+          "message": "No se pudo eliminar la reacción"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Actualización creada",
+        "message": "Actualización creada con éxito"
+      },
+      "error": {
+        "title": "Actualización no creada",
+        "message": "No se pudo crear la actualización"
+      }
+    },
+    "delete": {
+      "title": "Eliminar actualización",
+      "confirmation": "¿Estás seguro de querer eliminar esta actualización? Esta acción es irreversible.",
+      "success": {
+        "title": "Actualización eliminada",
+        "message": "La actualización se ha eliminado correctamente"
+      },
+      "error": {
+        "title": "Actualización no eliminada",
+        "message": "La actualización no se pudo eliminar"
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Actualización actualizada",
+        "message": "Actualización actualizada con éxito"
+      },
+      "error": {
+        "title": "Actualización no actualizada",
+        "message": "No se pudo actualizar la actualización"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/wiki.json b/packages/i18n/src/locales/es/wiki.json
new file mode 100644
index 0000000..a7f8803
--- /dev/null
+++ b/packages/i18n/src/locales/es/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "General",
+      "private": "Privado",
+      "shared": "Compartido",
+      "archived": "Archivado"
+    },
+    "fallback_name": "Colección",
+    "form": {
+      "name_required": "El título de la colección es obligatorio",
+      "name_max_length": "El nombre de la colección debe tener menos de 255 caracteres",
+      "name_placeholder_create": "Ponle un título a la colección",
+      "name_placeholder_edit": "Nombre de la colección"
+    },
+    "create_modal": {
+      "title": "Crear una colección",
+      "submit": "Crear colección"
+    },
+    "edit_modal": {
+      "title": "Editar colección"
+    },
+    "delete_modal": {
+      "title": "Eliminar colección",
+      "page_count": "Esta colección tiene {pageCount} páginas. Elige qué debe pasar con ellas.",
+      "transfer_title": "Transferir páginas y eliminar colección",
+      "transfer_description": "Mueve todas las páginas a otra colección antes de eliminarla. Se conservarán las páginas y sus permisos.",
+      "transfer_warning": "Las páginas movidas heredarán los permisos de la colección seleccionada.",
+      "transfer_target_label": "Mover páginas a",
+      "transfer_target_placeholder": "Selecciona una colección",
+      "delete_with_pages_title": "Eliminar colección con páginas",
+      "delete_with_pages_description": "Elimina permanentemente la colección y todas sus páginas. Esta acción no se puede deshacer.",
+      "submit": "Eliminar colección"
+    },
+    "header": {
+      "add_page": "Añadir página"
+    },
+    "menu": {
+      "create_new_page": "Crear nueva página",
+      "add_existing_page": "Añadir página existente",
+      "edit_collection": "Editar colección",
+      "collection_options": "Opciones de la colección"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Buscar páginas",
+      "success_message": "Se añadieron {count} páginas a la colección.",
+      "error_message": "No se pudieron mover las páginas. Inténtalo de nuevo.",
+      "no_pages_found": "No se encontraron páginas que coincidan con tu búsqueda",
+      "no_pages_available": "No hay páginas disponibles para mover",
+      "submit": "Mover"
+    },
+    "list": {
+      "invite_only": "Solo por invitación",
+      "remove_error": "No se pudo quitar la página de la colección.",
+      "no_matching_pages": "No hay páginas coincidentes",
+      "remove_search_criteria": "Quita los criterios de búsqueda para ver todas las páginas",
+      "remove_filters": "Quita los filtros para ver todas las páginas",
+      "no_pages_title": "Aún no hay páginas",
+      "no_pages_description": "Esta colección no tiene páginas por ahora.",
+      "untitled": "Sin título",
+      "restricted_access": "Acceso restringido",
+      "collapse_page": "Contraer página",
+      "expand_page": "Expandir página",
+      "page_actions": "Acciones de la página",
+      "page_link_copied": "Enlace de la página copiado al portapapeles.",
+      "columns": {
+        "page_name": "Nombre de la página",
+        "owner": "Propietario",
+        "nested_pages": "Páginas anidadas",
+        "last_activity": "Última actividad",
+        "actions": "Acciones"
+      }
+    },
+    "toasts": {
+      "created": "Colección creada correctamente.",
+      "create_error": "No se pudo crear la colección. Inténtalo de nuevo.",
+      "renamed": "Colección renombrada correctamente.",
+      "rename_error": "No se pudo actualizar la colección. Inténtalo de nuevo.",
+      "transferred_deleted": "Las páginas se transfirieron y la colección se eliminó.",
+      "deleted_with_pages": "La colección y sus páginas se eliminaron.",
+      "delete_error": "No se pudo eliminar la colección. Inténtalo de nuevo.",
+      "target_required": "Selecciona una colección a la que mover las páginas.",
+      "create_page_error": "No se pudo crear la página. Inténtalo de nuevo.",
+      "create_page_in_collection_error": "No se pudo crear la página o añadirla a la colección. Inténtalo de nuevo.",
+      "collection_link_copied": "Enlace de la colección copiado al portapapeles."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Mejora para desbloquear Wiki",
+      "description": "Desbloquea páginas públicas, historial de versiones, páginas compartidas, colaboración en tiempo real y páginas del espacio de trabajo para wikis, documentación de la empresa y bases de conocimiento con Plane Pro.",
+      "upgrade_button": {
+        "text": "Mejorar"
+      },
+      "learn_more_button": {
+        "text": "Más información"
+      },
+      "download_button": {
+        "text": "Descargar datos",
+        "loading": "Descargando"
+      },
+      "tabs": {
+        "nested_pages": "Páginas anidadas",
+        "add_embeds": "Agregar incrustaciones",
+        "publish_pages": "Publicar páginas",
+        "comments": "Comentarios"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Las páginas anidadas requieren un plan de pago. Mejora para desbloquearlas."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/work-item-type.json b/packages/i18n/src/locales/es/work-item-type.json
new file mode 100644
index 0000000..45182dc
--- /dev/null
+++ b/packages/i18n/src/locales/es/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Tipos de elementos de trabajo",
+    "label_lowercase": "tipos de elementos de trabajo",
+    "settings": {
+      "description": "Personaliza y agrega tus propias propiedades para adaptarlo a las necesidades de tu equipo.",
+      "cant_delete_default_message": "No se puede eliminar este tipo de elemento de trabajo porque está establecido como el tipo predeterminado para este proyecto.",
+      "set_as_default": "Establecer como predeterminado",
+      "cant_set_default_inactive_message": "Activa este tipo antes de establecerlo como predeterminado",
+      "set_default_confirmation": {
+        "title": "Establecer como tipo de elemento de trabajo predeterminado",
+        "description": "Al establecer {name} como predeterminado, se importará a todos los proyectos de este espacio de trabajo. Todos los nuevos elementos de trabajo usarán este tipo de forma predeterminada.",
+        "confirm_button": "Establecer como predeterminado"
+      },
+      "properties": {
+        "title": "Propiedades personalizadas del elemento de trabajo",
+        "description": "Crea y personaliza propiedades.",
+        "tooltip": "Cada tipo de elemento de trabajo viene con un conjunto predeterminado de propiedades como Título, Descripción, Asignado, Estado, Prioridad, Fecha de inicio, Fecha de vencimiento, Module, Cycle, etc. También puedes personalizar y agregar tus propias propiedades para adaptarlo a las necesidades de tu equipo.",
+        "add_button": "Agregar nueva propiedad",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Importar desde el espacio de trabajo"
+          }
+        },
+        "dropdown": {
+          "label": "Tipo de propiedad",
+          "placeholder": "Seleccionar tipo"
+        },
+        "property_type": {
+          "text": {
+            "label": "Texto"
+          },
+          "number": {
+            "label": "Número"
+          },
+          "dropdown": {
+            "label": "Desplegable"
+          },
+          "boolean": {
+            "label": "Booleano"
+          },
+          "date": {
+            "label": "Fecha"
+          },
+          "member_picker": {
+            "label": "Selector de miembros"
+          },
+          "formula": {
+            "label": "Fórmula"
+          }
+        },
+        "attributes": {
+          "label": "Atributos",
+          "text": {
+            "single_line": {
+              "label": "Línea única"
+            },
+            "multi_line": {
+              "label": "Párrafo"
+            },
+            "readonly": {
+              "label": "Solo lectura",
+              "header": "Datos de solo lectura"
+            },
+            "invalid_text_format": {
+              "label": "Formato de texto inválido"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Agregar número"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Selección única"
+            },
+            "multi_select": {
+              "label": "Selección múltiple"
+            },
+            "no_default_value": {
+              "label": "Sin valor predeterminado"
+            }
+          },
+          "boolean": {
+            "label": "Verdadero | Falso",
+            "no_default": "Sin valor predeterminado"
+          },
+          "option": {
+            "create_update": {
+              "label": "Opciones",
+              "form": {
+                "placeholder": "Agregar opción",
+                "errors": {
+                  "name": {
+                    "required": "El nombre de la opción es obligatorio.",
+                    "integrity": "Ya existe una opción con el mismo nombre."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Seleccionar opción",
+                "multi": {
+                  "default": "Seleccionar opciones",
+                  "variable": "{count} opciones seleccionadas"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "¡Éxito!",
+              "message": "Propiedad {name} creada exitosamente."
+            },
+            "error": {
+              "title": "¡Error!",
+              "message": "Error al crear la propiedad. ¡Por favor intente nuevamente!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "¡Éxito!",
+              "message": "Propiedad {name} actualizada exitosamente."
+            },
+            "error": {
+              "title": "¡Error!",
+              "message": "Error al actualizar la propiedad. ¡Por favor intente nuevamente!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "¡Éxito!",
+              "message": "Propiedad {name} eliminada exitosamente."
+            },
+            "error": {
+              "title": "¡Error!",
+              "message": "Error al eliminar la propiedad. ¡Por favor intente nuevamente!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} propiedad {name}",
+            "success": {
+              "title": "¡Éxito!",
+              "message": "Propiedad {name} {action} exitosamente."
+            },
+            "error": {
+              "title": "¡Error!",
+              "message": "Error al {action} la propiedad. ¡Por favor intente nuevamente!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Crear nueva propiedad personalizada",
+            "update": "Actualizar propiedad personalizada"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Título"
+            },
+            "description": {
+              "placeholder": "Descripción"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Debes nombrar tu propiedad.",
+              "max_length": "El nombre de la propiedad no debe exceder los 255 caracteres."
+            },
+            "property_type": {
+              "required": "Debes seleccionar un tipo de propiedad."
+            },
+            "options": {
+              "required": "Debes agregar al menos una opción."
+            },
+            "formula": {
+              "required": "La expresión de fórmula es obligatoria.",
+              "invalid": "Fórmula no válida: {error}",
+              "circular_reference": "Referencia circular detectada. Una fórmula no puede hacer referencia a sí misma directa o indirectamente.",
+              "invalid_reference": "La fórmula hace referencia a una propiedad inexistente."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Campo de fórmula",
+          "tooltip": "Ingrese una fórmula usando la sintaxis '{'Nombre del campo'}'. Admite operadores +, -, *, / y &.",
+          "placeholder": "Escribir la fórmula",
+          "test_button": "Probar",
+          "validating": "Validando",
+          "validation_success": "¡La fórmula es válida! Devuelve {resultType}",
+          "validation_success_with_refs": "¡La fórmula es válida! Devuelve {resultType} ({count} campo(s) referenciado(s))",
+          "error": {
+            "empty": "Por favor ingrese una fórmula",
+            "missing_context": "Falta el contexto de espacio de trabajo, proyecto o tipo de elemento de trabajo",
+            "validation_failed": "La validación falló"
+          },
+          "picker": {
+            "no_match": "No hay propiedades coincidentes",
+            "no_available": "No hay propiedades disponibles"
+          }
+        },
+        "enable_disable": {
+          "label": "Activo",
+          "tooltip": {
+            "disabled": "Clic para deshabilitar",
+            "enabled": "Clic para habilitar"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Eliminar esta propiedad",
+          "description": "La eliminación de propiedades puede llevar a la pérdida de datos existentes.",
+          "secondary_description": "¿Deseas deshabilitar la propiedad en su lugar?",
+          "primary_button": "{action}, eliminarla",
+          "secondary_button": "Sí, deshabilitarla"
+        },
+        "mandate_confirmation": {
+          "label": "Propiedad obligatoria",
+          "content": "Parece que hay una opción predeterminada para esta propiedad. Hacer la propiedad obligatoria eliminará el valor predeterminado y los usuarios deberán agregar un valor de su elección.",
+          "tooltip": {
+            "disabled": "Este tipo de propiedad no puede ser obligatorio",
+            "enabled": "Desmarca para hacer el campo opcional",
+            "checked": "Marca para hacer el campo obligatorio"
+          }
+        },
+        "empty_state": {
+          "title": "Agregar propiedades personalizadas",
+          "description": "Las nuevas propiedades que agregues para este tipo de elemento de trabajo aparecerán aquí."
+        }
+      },
+      "types": {
+        "title": "Tipos",
+        "description": "Crea y personaliza tipos de elementos de trabajo con propiedades.",
+        "sort_options": {
+          "project_count": "Número de proyectos que forma parte"
+        },
+        "filter_options": {
+          "show_active": "Mostrar activos",
+          "show_inactive": "Mostrar inactivos"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Crear nuevo",
+            "import_from_workspace": "Importar desde el espacio de trabajo"
+          },
+          "banner": {
+            "with_access": "Habilita los tipos de elementos de trabajo para importar tipos desde el nivel del espacio de trabajo",
+            "without_access": "Los tipos de elementos de trabajo están deshabilitados. Contacta al administrador del espacio de trabajo para habilitarlos en la configuración del espacio de trabajo."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Propiedades personalizadas",
+        "add_button": "Agregar propiedades",
+        "modal": {
+          "title": "Agregar propiedades",
+          "empty": {
+            "title": "No hay propiedades disponibles",
+            "description": "Todas las propiedades ya han sido vinculadas a este tipo."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Desvincular propiedad",
+          "description": "Al desvincular esta propiedad se eliminarán permanentemente todos sus valores en cada elemento de trabajo que use este tipo. Esta acción no se puede deshacer.",
+          "input_label": "Escribe",
+          "input_label_suffix": "para continuar:",
+          "confirm": "Desvincular propiedad",
+          "loading": "Desvinculando"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Eliminar este tipo",
+        "description": "La eliminación de tipos puede provocar la pérdida de datos existentes.",
+        "can_disable_warning": "¿Desea desactivar el tipo en su lugar?",
+        "primary_button": "Sí, eliminarlo",
+        "toast": {
+          "success": {
+            "title": "¡Éxito!",
+            "message": "Tipo de elemento de trabajo eliminado con éxito."
+          },
+          "error": {
+            "title": "¡Error!",
+            "message": "No se pudo eliminar el tipo de elemento de trabajo. ¡Inténtalo de nuevo!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "No se puede eliminar el tipo de elemento de trabajo predeterminado",
+          "cannot_delete_work_item_type_with_associated_work_items": "No se puede eliminar el tipo de elemento de trabajo con elementos de trabajo asociados"
+        }
+      }
+    },
+    "create": {
+      "title": "Crear tipo de elemento de trabajo",
+      "button": "Agregar tipo de elemento de trabajo",
+      "toast": {
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Tipo de elemento de trabajo creado exitosamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": {
+            "default": "Error al crear el tipo de elemento de trabajo. ¡Por favor intente nuevamente!",
+            "conflict": "El tipo {name} ya existe. Elige un nombre diferente."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Actualizar tipo de elemento de trabajo",
+      "button": "Actualizar tipo de elemento de trabajo",
+      "toast": {
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Tipo de elemento de trabajo {name} actualizado exitosamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": {
+            "default": "Error al actualizar el tipo de elemento de trabajo. ¡Por favor intente nuevamente!",
+            "conflict": "El tipo {name} ya existe. Elige un nombre diferente."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Dale a este tipo de elemento de trabajo un nombre único"
+        },
+        "description": {
+          "placeholder": "Describe para qué está destinado este tipo de elemento de trabajo y cuándo debe usarse."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} tipo de elemento de trabajo {name}",
+        "success": {
+          "title": "¡Éxito!",
+          "message": "Tipo de elemento de trabajo {name} {action} exitosamente."
+        },
+        "error": {
+          "title": "¡Error!",
+          "message": "Error al {action} el tipo de elemento de trabajo. ¡Por favor intente nuevamente!"
+        }
+      },
+      "tooltip": "Clic para {action}"
+    },
+    "change_confirmation": {
+      "title": "¿Cambiar tipo de elemento de trabajo?",
+      "description": "Cambiar el tipo de elemento de trabajo puede resultar en la pérdida de valores de propiedades personalizadas que son específicas del tipo actual. Esta acción no se puede deshacer.",
+      "button": {
+        "loading": "Cambiando",
+        "default": "Cambiar tipo"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Habilitar tipos de elementos de trabajo",
+        "description": "Da forma a los elementos de trabajo con tipos de elementos de trabajo. Personaliza con iconos, fondos y propiedades y configúralos para este proyecto.",
+        "primary_button": {
+          "text": "Habilitar"
+        },
+        "confirmation": {
+          "title": "Una vez habilitados, los tipos de elementos de trabajo no se pueden deshabilitar.",
+          "description": "El elemento de trabajo de Plane se convertirá en el tipo de elemento de trabajo predeterminado para este proyecto y aparecerá con su icono y fondo en este proyecto.",
+          "button": {
+            "default": "Habilitar",
+            "loading": "Configurando"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Obtén Pro para habilitar tipos de elementos de trabajo.",
+        "description": "Da forma a los elementos de trabajo con tipos de elementos de trabajo. Personaliza con iconos, fondos y propiedades y configúralos para este proyecto.",
+        "primary_button": {
+          "text": "Obtener Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Actualiza para habilitar tipos de elementos de trabajo.",
+        "description": "Da forma a los elementos de trabajo con tipos de elementos de trabajo. Personaliza con iconos, fondos y propiedades y configúralos para este proyecto.",
+        "primary_button": {
+          "text": "Actualizar"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Jerarquía",
+      "tab_label": "Jerarquía",
+      "description": "Configura niveles de jerarquía para organizar tu trabajo. Cada nivel define una relación de padre con el elemento directamente encima y una relación de hijo con el elemento directamente debajo. ",
+      "sidebar_label": "Jerarquía",
+      "enable_control": {
+        "title": "Habilitar jerarquía",
+        "description": "Crea relaciones padre-hijo entre diferentes tipos de elementos de trabajo.",
+        "tooltip": "No puedes deshabilitar la jerarquía una vez que está habilitada."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Define primero los tipos de elementos de trabajo para crear una nueva jerarquía.",
+        "cta": "Configuración de tipos de elementos de trabajo"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Arrastra y suelta un tipo para añadir un nuevo nivel de jerarquía",
+      "empty_level_placeholder": "Arrastra y suelta un tipo de elemento de trabajo al nivel {level}",
+      "drag_tooltip": "Arrastrar para cambiar de nivel",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Establecer como predeterminado",
+          "toast": {
+            "loading": "Estableciendo como predeterminado...",
+            "success": {
+              "title": "¡Éxito!",
+              "message": "El nivel de jerarquía {level} se ha establecido como predeterminado correctamente."
+            },
+            "error": {
+              "title": "¡Error!",
+              "message": "No se pudo establecer el nivel de jerarquía {level} como predeterminado. Por favor, inténtelo de nuevo."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Moviendo {workItemTypeName} al nivel {level}...",
+        "success": {
+          "title": "¡Éxito!",
+          "message": "{workItemTypeName} se movió al nivel {level} correctamente."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Guardar romperá los enlaces existentes",
+      "content": {
+        "intro": "El tipo de elemento de trabajo {workItemTypeName} tiene:",
+        "parent_items": "{count, plural, one {Se eliminará # enlace principal} other {Se eliminarán # enlaces principales}}.",
+        "child_items": "{count, plural, one {subelemento de trabajo} other {subelementos de trabajo}}",
+        "parent_line_suffix_when_also_children": ", y ",
+        "footer": "Este cambio eliminará las relaciones padre-hijo de los elementos de trabajo existentes del tipo {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Escribe «confirmar» para continuar.",
+        "placeholder": "confirmar"
+      },
+      "error_toast": {
+        "title": "¡Error!",
+        "message": "No se pudieron desvincular los enlaces ni guardar. Inténtelo de nuevo."
+      },
+      "confirm_button": {
+        "loading": "Guardando",
+        "default": "Guardar de todos modos"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "¡Error!",
+        "message": "El tipo de elemento de trabajo seleccionado no se puede usar para crear un nuevo elemento de trabajo ya que rompe las reglas de jerarquía."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "¡Error!",
+        "message": "El tipo de elemento de trabajo no se puede actualizar ya que rompe las reglas de jerarquía."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Nivel de jerarquía",
+      "invalid_level_toast": {
+        "title": "¡Error!",
+        "message": "El tipo de elemento de trabajo no se puede actualizar ya que rompe las reglas de jerarquía."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/work-item.json b/packages/i18n/src/locales/es/work-item.json
new file mode 100644
index 0000000..b721959
--- /dev/null
+++ b/packages/i18n/src/locales/es/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Elemento de trabajo} other {Elementos de trabajo}}",
+    "all": "Todos los elementos de trabajo",
+    "edit": "Editar elemento de trabajo",
+    "title": {
+      "label": "Título del elemento de trabajo",
+      "required": "El título del elemento de trabajo es obligatorio."
+    },
+    "add": {
+      "press_enter": "Presiona 'Enter' para agregar otro elemento de trabajo",
+      "label": "Agregar elemento de trabajo",
+      "cycle": {
+        "failed": "No se pudo agregar el elemento de trabajo al ciclo. Por favor, inténtalo de nuevo.",
+        "success": "{count, plural, one {Elemento de trabajo agregado} other {Elementos de trabajo agregados}} al ciclo correctamente.",
+        "loading": "Agregando {count, plural, one {elemento de trabajo} other {elementos de trabajo}} al ciclo"
+      },
+      "assignee": "Agregar asignados",
+      "start_date": "Agregar fecha de inicio",
+      "due_date": "Agregar fecha de vencimiento",
+      "parent": "Agregar elemento de trabajo padre",
+      "sub_issue": "Agregar sub-elemento de trabajo",
+      "dependency": "Agregar dependencia",
+      "relation": "Agregar relación",
+      "link": "Agregar enlace",
+      "existing": "Agregar elemento de trabajo existente"
+    },
+    "remove": {
+      "label": "Eliminar elemento de trabajo",
+      "cycle": {
+        "loading": "Eliminando elemento de trabajo del ciclo",
+        "success": "Elemento de trabajo eliminado del ciclo correctamente.",
+        "failed": "No se pudo eliminar el elemento de trabajo del ciclo. Por favor, inténtalo de nuevo."
+      },
+      "module": {
+        "loading": "Eliminando elemento de trabajo del módulo",
+        "success": "Elemento de trabajo eliminado del módulo correctamente.",
+        "failed": "No se pudo eliminar el elemento de trabajo del módulo. Por favor, inténtalo de nuevo."
+      },
+      "parent": {
+        "label": "Eliminar elemento de trabajo padre"
+      }
+    },
+    "new": "Nuevo elemento de trabajo",
+    "adding": "Agregando elemento de trabajo",
+    "create": {
+      "success": "Elemento de trabajo creado correctamente"
+    },
+    "priority": {
+      "urgent": "Urgente",
+      "high": "Alta",
+      "medium": "Media",
+      "low": "Baja"
+    },
+    "display": {
+      "properties": {
+        "label": "Mostrar propiedades",
+        "id": "ID",
+        "issue_type": "Tipo de elemento de trabajo",
+        "sub_issue_count": "Cantidad de sub-elementos",
+        "attachment_count": "Cantidad de archivos adjuntos",
+        "created_on": "Creado el",
+        "sub_issue": "Sub-elemento de trabajo",
+        "work_item_count": "Recuento de elementos de trabajo"
+      },
+      "extra": {
+        "show_sub_issues": "Mostrar sub-elementos",
+        "show_empty_groups": "Mostrar grupos vacíos"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Este diseño está ordenado por",
+      "list": "Lista",
+      "kanban": "Tablero",
+      "calendar": "Calendario",
+      "spreadsheet": "Tabla",
+      "gantt": "Línea de tiempo",
+      "title": {
+        "list": "Diseño de lista",
+        "kanban": "Diseño de tablero",
+        "calendar": "Diseño de calendario",
+        "spreadsheet": "Diseño de tabla",
+        "gantt": "Diseño de línea de tiempo"
+      }
+    },
+    "states": {
+      "active": "Activo",
+      "backlog": "Pendientes"
+    },
+    "comments": {
+      "placeholder": "Agregar comentario",
+      "switch": {
+        "private": "Cambiar a comentario privado",
+        "public": "Cambiar a comentario público"
+      },
+      "create": {
+        "success": "Comentario creado correctamente",
+        "error": "Error al crear el comentario. Por favor, inténtalo más tarde."
+      },
+      "update": {
+        "success": "Comentario actualizado correctamente",
+        "error": "Error al actualizar el comentario. Por favor, inténtalo más tarde."
+      },
+      "remove": {
+        "success": "Comentario eliminado correctamente",
+        "error": "Error al eliminar el comentario. Por favor, inténtalo más tarde."
+      },
+      "upload": {
+        "error": "Error al subir el archivo. Por favor, inténtalo más tarde."
+      },
+      "copy_link": {
+        "success": "Enlace del comentario copiado al portapapeles",
+        "error": "Error al copiar el enlace del comentario. Inténtelo de nuevo más tarde."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Agregar respuesta",
+          "placeholder": "Agregar respuesta"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Error al obtener las respuestas"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Respuesta creada correctamente"
+            },
+            "error": {
+              "message": "Error al crear la respuesta"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Respuesta actualizada correctamente"
+            },
+            "error": {
+              "message": "Error al actualizar la respuesta"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Respuesta eliminada correctamente"
+            },
+            "error": {
+              "message": "Error al eliminar la respuesta"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "El elemento de trabajo no existe",
+        "description": "El elemento de trabajo que buscas no existe, ha sido archivado o ha sido eliminado.",
+        "primary_button": {
+          "text": "Ver otros elementos de trabajo"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Elementos de trabajo hermanos"
+    },
+    "archive": {
+      "description": "Solo los elementos de trabajo completados\no cancelados pueden ser archivados",
+      "label": "Archivar elemento de trabajo",
+      "confirm_message": "¿Estás seguro de que quieres archivar el elemento de trabajo? Todos tus elementos archivados pueden ser restaurados más tarde.",
+      "success": {
+        "label": "Archivo exitoso",
+        "message": "Tus archivos se pueden encontrar en los archivos del proyecto."
+      },
+      "failed": {
+        "message": "No se pudo archivar el elemento de trabajo. Por favor, inténtalo de nuevo."
+      },
+      "banner_message": "Este elemento de trabajo ha sido archivado. Visite la sección Archivos para restaurarlo.",
+      "go_to_archives": "Ir a archivos"
+    },
+    "restore": {
+      "success": {
+        "title": "Restauración exitosa",
+        "message": "Tu elemento de trabajo se puede encontrar en los elementos de trabajo del proyecto."
+      },
+      "failed": {
+        "message": "No se pudo restaurar el elemento de trabajo. Por favor, inténtalo de nuevo."
+      }
+    },
+    "relation": {
+      "relates_to": "Se relaciona con",
+      "duplicate": "Duplicado de",
+      "blocked_by": "Bloqueado por",
+      "blocking": "Bloqueando",
+      "start_before": "Comienza antes",
+      "start_after": "Comienza después",
+      "finish_before": "Termina antes",
+      "finish_after": "Termina después",
+      "implements": "Implementa",
+      "implemented_by": "Implementado por"
+    },
+    "copy_link": "Copiar enlace del elemento de trabajo",
+    "delete": {
+      "label": "Eliminar elemento de trabajo",
+      "error": "Error al eliminar el elemento de trabajo"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Suscrito al elemento de trabajo correctamente",
+        "unsubscribed": "Desuscrito del elemento de trabajo correctamente"
+      }
+    },
+    "select": {
+      "error": "Por favor selecciona al menos un elemento de trabajo",
+      "empty": "No hay elementos de trabajo seleccionados",
+      "add_selected": "Agregar elementos seleccionados",
+      "select_all": "Seleccionar todo",
+      "deselect_all": "Deseleccionar todo"
+    },
+    "open_in_full_screen": "Abrir elemento de trabajo en pantalla completa",
+    "duplicate": {
+      "modal": {
+        "title": "Hacer una copia a otro proyecto",
+        "description1": "Esto crea una copia del elemento de trabajo.",
+        "description2": "Todos los datos de propiedades se eliminarán al duplicar.",
+        "placeholder": "Selecciona un proyecto"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Elemento de trabajo duplicado correctamente"
+        },
+        "error": {
+          "message": "Error al duplicar el elemento de trabajo"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Enlazar páginas",
+      "show_wiki_pages": "Mostrar páginas de wiki",
+      "link_pages_to": "Enlazar páginas a",
+      "linked_pages": "Páginas enlazadas",
+      "no_description": "Esta página está vacía. Escribe algo aquí y véalo como este marcador de posición",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Páginas actualizadas",
+            "message": "Páginas actualizadas correctamente"
+          },
+          "error": {
+            "title": "Error al actualizar páginas",
+            "message": "Error al actualizar páginas"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Página eliminada",
+            "message": "Página eliminada correctamente"
+          },
+          "error": {
+            "title": "Error al eliminar página",
+            "message": "Error al eliminar página"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Haz clic para votar a favor",
+      "click_to_downvote": "Haz clic para votar en contra",
+      "click_to_view_upvotes": "Haz clic para ver los votos a favor",
+      "click_to_view_downvotes": "Haz clic para ver los votos en contra"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Sub-elemento actualizado correctamente",
+      "error": "Error al actualizar el sub-elemento"
+    },
+    "remove": {
+      "success": "Sub-elemento eliminado correctamente",
+      "error": "Error al eliminar el sub-elemento"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "No tienes sub-elementos de trabajo que coincidan con los filtros que has aplicado.",
+        "description": "Para ver todos los sub-elementos de trabajo, elimina todos los filtros aplicados.",
+        "action": "Eliminar filtros"
+      },
+      "list_filters": {
+        "title": "No tienes elementos de trabajo que coincidan con los filtros que has aplicado.",
+        "description": "Para ver todos los elementos de trabajo, elimina todos los filtros aplicados.",
+        "action": "Eliminar filtros"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "No se encontraron elementos de trabajo coincidentes"
+      },
+      "no_issues": {
+        "title": "No se encontraron elementos de trabajo"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Aún no hay comentarios",
+        "description": "Los comentarios pueden usarse como un espacio de discusión y seguimiento para los elementos de trabajo"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "No se pueden archivar elementos de trabajo",
+        "message": "Solo los elementos de trabajo pertenecientes a grupos de estado Completado o Cancelado pueden ser archivados."
+      },
+      "invalid_issue_start_date": {
+        "title": "No se pueden actualizar elementos de trabajo",
+        "message": "La fecha de inicio seleccionada es posterior a la fecha de vencimiento de algunos elementos de trabajo. Asegúrese de que la fecha de inicio sea anterior a la fecha de vencimiento."
+      },
+      "invalid_issue_target_date": {
+        "title": "No se pueden actualizar elementos de trabajo",
+        "message": "La fecha de vencimiento seleccionada es anterior a la fecha de inicio de algunos elementos de trabajo. Asegúrese de que la fecha de vencimiento sea posterior a la fecha de inicio."
+      },
+      "invalid_state_transition": {
+        "title": "No se pueden actualizar elementos de trabajo",
+        "message": "El cambio de estado no está permitido para algunos elementos de trabajo. Asegúrese de que el cambio de estado esté permitido."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Cambie el estado, la prioridad y más para varios elementos de trabajo a la vez. Ahorre en promedio tres minutos por operación.",
+      "cta": "Actualizar a One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Tareas recurrentes",
+      "description": "Configura tu trabajo repetible una vez y nosotros nos encargaremos de las repeticiones. Verás todo aquí cuando sea necesario.",
+      "new_recurring_work_item": "Nueva tarea recurrente",
+      "update_recurring_work_item": "Actualizar tarea recurrente",
+      "form": {
+        "interval": {
+          "title": "Programación",
+          "start_date": {
+            "validation": {
+              "required": "La fecha de inicio es obligatoria"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "El tipo de intervalo es obligatorio"
+            }
+          }
+        },
+        "button": {
+          "create": "Crear tarea recurrente",
+          "update": "Actualizar tarea recurrente"
+        }
+      },
+      "create_button": {
+        "label": "Crear tarea recurrente",
+        "no_permission": "Contacta a tu administrador de proyecto para crear tareas recurrentes"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Tu trabajo, en piloto automático",
+        "description": "Configúralo una vez. Te lo recordaremos cuando sea necesario. Mejora a Business para que el trabajo recurrente sea sencillo."
+      },
+      "no_templates": {
+        "button": "Crea tu primera tarea recurrente"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Tarea recurrente creada",
+          "message": "{name}, la tarea recurrente, ya está disponible en tu espacio de trabajo."
+        },
+        "error": {
+          "title": "No pudimos crear la tarea recurrente esta vez.",
+          "message": "Intenta guardar tus datos nuevamente o cópialos en una nueva tarea recurrente, preferiblemente en otra pestaña."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Tarea recurrente modificada",
+          "message": "{name}, la tarea recurrente, ha sido modificada."
+        },
+        "error": {
+          "title": "No pudimos guardar los cambios en esta tarea recurrente.",
+          "message": "Intenta guardar tus datos nuevamente o vuelve a esta tarea recurrente más tarde. Si el problema persiste, contáctanos."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Tarea recurrente eliminada",
+          "message": "{name}, la tarea recurrente, ha sido eliminada de tu espacio de trabajo."
+        },
+        "error": {
+          "title": "No pudimos eliminar esa tarea recurrente.",
+          "message": "Intenta eliminarla de nuevo o vuelve más tarde. Si no puedes eliminarla entonces, contáctanos."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Eliminar tarea recurrente",
+      "description": {
+        "prefix": "¿Estás seguro de que quieres eliminar la tarea recurrente-",
+        "suffix": "? Todos los datos relacionados con la tarea recurrente se eliminarán permanentemente. Esta acción no se puede deshacer."
+      }
+    }
+  },
+  "epic": {
+    "new": "Nuevo Epic",
+    "label": "{count, plural, one {Epic} other {Epics}}",
+    "adding": "Agregando epic",
+    "create": {
+      "success": "Epic creado correctamente"
+    },
+    "add": {
+      "label": "Agregar Epic",
+      "press_enter": "Presiona 'Enter' para agregar otro epic"
+    },
+    "title": {
+      "label": "Título del Epic",
+      "required": "El título del epic es obligatorio."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/workflow.json b/packages/i18n/src/locales/es/workflow.json
new file mode 100644
index 0000000..f15edf5
--- /dev/null
+++ b/packages/i18n/src/locales/es/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Permitir nuevos elementos de trabajo",
+      "work_item_creation_disable_tooltip": "La creación de elementos de trabajo está deshabilitada para este estado",
+      "default_state": "El estado predeterminado permite que todos los miembros creen nuevos elementos de trabajo. Esto no se puede cambiar",
+      "state_change_count": "{count, plural, one {1 cambio de estado permitido} other {{count} cambios de estado permitidos}}",
+      "movers_count": "{count, plural, one {1 revisor listado} other {{count} revisores listados}}",
+      "state_changes": {
+        "label": {
+          "default": "Agregar cambio de estado permitido",
+          "loading": "Agregando cambio de estado permitido"
+        },
+        "move_to": "Cambiar estado a",
+        "movers": {
+          "label": "Cuando se revisa por",
+          "tooltip": "Los revisores son personas que están permitidas para mover elementos de trabajo de un estado a otro.",
+          "add": "Agregar revisores"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "No puedes mover este elemento de trabajo aquí."
+    },
+    "workflow_enabled": {
+      "label": "Cambio de estado"
+    },
+    "workflow_tree": {
+      "label": "Para elementos de trabajo en",
+      "state_change_label": "pueden moverlo a"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Controla el caos de los cambios y revisiones con Workflows.",
+        "description": "Establece reglas para dónde se mueve tu trabajo, quién y cuándo con Workflows en Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Ver historial de cambios",
+      "reset_workflow": "Restablecer flujo de trabajo"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "¿Estás seguro de que deseas restablecer este flujo de trabajo?",
+        "description": "Si restableces este flujo de trabajo, todas tus reglas de cambio de estado serán eliminadas y tendrás que crearlas de nuevo para que funcionen en este proyecto."
+      },
+      "delete_state_change": {
+        "title": "¿Estás seguro de que deseas eliminar esta regla de cambio de estado?",
+        "description": "Una vez eliminada, no podrás deshacer este cambio y tendrás que establecer la regla de nuevo si la deseas para este proyecto."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} flujo de trabajo",
+        "success": {
+          "title": "Éxito",
+          "message": "Flujo de trabajo {action} con éxito"
+        },
+        "error": {
+          "title": "Error",
+          "message": "El flujo de trabajo no pudo ser {action}. Por favor, inténtalo de nuevo."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Éxito",
+          "message": "El flujo de trabajo se restableció con éxito"
+        },
+        "error": {
+          "title": "Error al restablecer flujo de trabajo",
+          "message": "El flujo de trabajo no pudo ser restablecido. Por favor, inténtalo de nuevo."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Error al agregar regla de cambio de estado",
+          "message": "La regla de cambio de estado no pudo ser agregada. Por favor, inténtalo de nuevo."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Error al modificar regla de cambio de estado",
+          "message": "La regla de cambio de estado no pudo ser modificada. Por favor, inténtalo de nuevo."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Error al eliminar regla de cambio de estado",
+          "message": "La regla de cambio de estado no pudo ser eliminada. Por favor, inténtalo de nuevo."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Error al modificar revisores de regla de cambio de estado",
+          "message": "Los revisores de la regla de cambio de estado no pudieron ser modificados. Por favor, inténtalo de nuevo."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/workspace-settings.json b/packages/i18n/src/locales/es/workspace-settings.json
new file mode 100644
index 0000000..f498c6f
--- /dev/null
+++ b/packages/i18n/src/locales/es/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Configuración del espacio de trabajo",
+    "page_label": "{workspace} - Configuración general",
+    "key_created": "Clave creada",
+    "copy_key": "Copia y guarda esta clave secreta en Plane Pages. No podrás ver esta clave después de hacer clic en Cerrar. Se ha descargado un archivo CSV que contiene la clave.",
+    "token_copied": "Token copiado al portapapeles.",
+    "settings": {
+      "general": {
+        "title": "General",
+        "upload_logo": "Subir logo",
+        "edit_logo": "Editar logo",
+        "name": "Nombre del espacio de trabajo",
+        "company_size": "Tamaño de la empresa",
+        "url": "URL del espacio de trabajo",
+        "workspace_timezone": "Zona horaria del espacio de trabajo",
+        "update_workspace": "Actualizar espacio de trabajo",
+        "delete_workspace": "Eliminar este espacio de trabajo",
+        "delete_workspace_description": "Al eliminar un espacio de trabajo, todos los datos y recursos dentro de ese espacio se eliminarán permanentemente y no podrán recuperarse.",
+        "delete_btn": "Eliminar este espacio de trabajo",
+        "delete_modal": {
+          "title": "¿Está seguro de que desea eliminar este espacio de trabajo?",
+          "description": "Tiene una prueba activa de uno de nuestros planes de pago. Por favor, cancelela primero para continuar.",
+          "dismiss": "Descartar",
+          "cancel": "Cancelar prueba",
+          "success_title": "Espacio de trabajo eliminado.",
+          "success_message": "Pronto irá a su página de perfil.",
+          "error_title": "Eso no funcionó.",
+          "error_message": "Por favor, inténtelo de nuevo."
+        },
+        "errors": {
+          "name": {
+            "required": "El nombre es obligatorio",
+            "max_length": "El nombre del espacio de trabajo no debe exceder los 80 caracteres"
+          },
+          "company_size": {
+            "required": "El tamaño de la empresa es obligatorio",
+            "select_a_range": "Seleccionar tamaño de la organización"
+          }
+        }
+      },
+      "members": {
+        "title": "Miembros",
+        "add_member": "Agregar miembro",
+        "pending_invites": "Invitaciones pendientes",
+        "invitations_sent_successfully": "Invitaciones enviadas exitosamente",
+        "leave_confirmation": "¿Estás seguro de que quieres abandonar el espacio de trabajo? Ya no tendrás acceso a este espacio de trabajo. Esta acción no se puede deshacer.",
+        "details": {
+          "full_name": "Nombre completo",
+          "display_name": "Nombre para mostrar",
+          "email_address": "Dirección de correo electrónico",
+          "account_type": "Tipo de cuenta",
+          "authentication": "Autenticación",
+          "joining_date": "Fecha de incorporación"
+        },
+        "modal": {
+          "title": "Invitar personas a colaborar",
+          "description": "Invita personas a colaborar en tu espacio de trabajo.",
+          "button": "Enviar invitaciones",
+          "button_loading": "Enviando invitaciones",
+          "placeholder": "nombre@empresa.com",
+          "errors": {
+            "required": "Necesitamos una dirección de correo electrónico para invitarlos.",
+            "invalid": "El correo electrónico no es válido"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Facturación y Planes",
+        "description": "Elige tu plan, gestiona las suscripciones y actualiza fácilmente a medida que crecen tus necesidades.",
+        "title": "Facturación y Planes",
+        "current_plan": "Plan actual",
+        "free_plan": "Actualmente estás usando el plan gratuito",
+        "view_plans": "Ver planes"
+      },
+      "exports": {
+        "heading": "Exportaciones",
+        "description": "Exporta los datos de tu proyecto en varios formatos y accede a tu historial de exportaciones con enlaces de descarga.",
+        "title": "Exportaciones",
+        "exporting": "Exportando",
+        "previous_exports": "Exportaciones anteriores",
+        "export_separate_files": "Exportar los datos en archivos separados",
+        "exporting_projects": "Exportando proyecto",
+        "format": "Formato",
+        "filters_info": "Aplica filtros para exportar elementos de trabajo específicos según tus criterios.",
+        "modal": {
+          "title": "Exportar a",
+          "toasts": {
+            "success": {
+              "title": "Exportación exitosa",
+              "message": "Podrás descargar el {entity} exportado desde la exportación anterior."
+            },
+            "error": {
+              "title": "Exportación fallida",
+              "message": "La exportación no tuvo éxito. Por favor, inténtalo de nuevo."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooks",
+        "description": "Automatiza las notificaciones a servicios externos cuando ocurren eventos del proyecto.",
+        "title": "Webhooks",
+        "add_webhook": "Agregar webhook",
+        "modal": {
+          "title": "Crear webhook",
+          "details": "Detalles del webhook",
+          "payload": "URL del payload",
+          "question": "¿Qué eventos te gustaría que activaran este webhook?",
+          "error": "La URL es obligatoria"
+        },
+        "secret_key": {
+          "title": "Clave secreta",
+          "message": "Genera un token para iniciar sesión en el payload del webhook"
+        },
+        "options": {
+          "all": "Envíame todo",
+          "individual": "Seleccionar eventos individuales"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook creado",
+            "message": "El webhook se ha creado exitosamente"
+          },
+          "not_created": {
+            "title": "Webhook no creado",
+            "message": "No se pudo crear el webhook"
+          },
+          "updated": {
+            "title": "Webhook actualizado",
+            "message": "El webhook se ha actualizado exitosamente"
+          },
+          "not_updated": {
+            "title": "Webhook no actualizado",
+            "message": "No se pudo actualizar el webhook"
+          },
+          "removed": {
+            "title": "Webhook eliminado",
+            "message": "El webhook se ha eliminado exitosamente"
+          },
+          "not_removed": {
+            "title": "Webhook no eliminado",
+            "message": "No se pudo eliminar el webhook"
+          },
+          "secret_key_copied": {
+            "message": "Clave secreta copiada al portapapeles."
+          },
+          "secret_key_not_copied": {
+            "message": "Ocurrió un error al copiar la clave secreta."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Tokens de API",
+        "description": "Genere tokens de API seguros para integrar sus datos con sistemas y aplicaciones externos.",
+        "title": "Tokens de API",
+        "add_token": "Agregar token de acceso",
+        "create_token": "Crear token",
+        "never_expires": "Nunca expira",
+        "generate_token": "Generar token",
+        "generating": "Generando",
+        "delete": {
+          "title": "Eliminar token de API",
+          "description": "Cualquier aplicación que use este token ya no tendrá acceso a los datos de Plane. Esta acción no se puede deshacer.",
+          "success": {
+            "title": "¡Éxito!",
+            "message": "El token de API se ha eliminado exitosamente"
+          },
+          "error": {
+            "title": "¡Error!",
+            "message": "No se pudo eliminar el token de API"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integraciones",
+        "heading": "Integraciones",
+        "description": "Conéctate con herramientas y servicios populares para sincronizar tu trabajo en todo tu ecosistema de flujo de trabajo.",
+        "page_title": "Trabaja con tus datos de Plane en aplicaciones disponibles o en las tuyas propias.",
+        "page_description": "Ver todas las integraciones en uso por este espacio de trabajo o por ti."
+      },
+      "imports": {
+        "title": "Importaciones",
+        "heading": "Importaciones",
+        "description": "Conecta e importa datos desde tus herramientas de gestión de proyectos existentes para optimizar la integración de tu flujo de trabajo."
+      },
+      "worklogs": {
+        "title": "Registros de trabajo",
+        "heading": "Registros de trabajo",
+        "description": "Descarga los registros de trabajo, también conocidos como hojas de tiempo, de cualquier persona en cualquier proyecto."
+      },
+      "group_syncing": {
+        "title": "Sincronización de grupos",
+        "heading": "Sincronización de grupos",
+        "description": "Vincule los grupos del proveedor de identidad con proyectos y roles. El acceso de los usuarios se actualiza automáticamente cuando cambia la pertenencia al grupo en su IdP, simplificando la incorporación y baja.",
+        "enable": {
+          "title": "Activar sincronización de grupos",
+          "description": "Añadir automáticamente usuarios a proyectos según los grupos del proveedor de identidad."
+        },
+        "config": {
+          "title": "Configurar sincronización de grupos",
+          "description": "Configure cómo se asignan los grupos del proveedor de identidad a proyectos y roles.",
+          "sync_on_login": {
+            "title": "Sincronizar al iniciar sesión",
+            "description": "Actualizar pertenencia al grupo y acceso al proyecto cuando un usuario inicia sesión."
+          },
+          "sync_offline": {
+            "title": "Sincronización sin conexión",
+            "description": "Ejecuta la sincronización cada seis horas automáticamente, sin esperar a que los usuarios inicien sesión."
+          },
+          "auto_remove": {
+            "title": "Eliminación automática",
+            "description": "Eliminar automáticamente usuarios de proyectos cuando ya no coincidan con el grupo."
+          },
+          "group_attribute_key": {
+            "title": "Clave del atributo de grupo",
+            "description": "El atributo del proveedor de identidad usado para identificar y sincronizar grupos de usuarios.",
+            "placeholder": "Grupos"
+          }
+        },
+        "group_mapping": {
+          "title": "Asignación de grupos",
+          "description": "Vincule los grupos del proveedor de identidad con proyectos y roles.",
+          "button_text": "Añadir nueva sincronización de grupos"
+        },
+        "toast": {
+          "updating": "Actualizando función de sincronización de grupos",
+          "success": "Función de sincronización de grupos actualizada correctamente.",
+          "error": "¡Error al actualizar la función de sincronización de grupos!"
+        },
+        "delete_modal": {
+          "title": "Eliminar sincronización de grupos",
+          "content": "Los nuevos usuarios de este grupo de identidad ya no se añadirán al proyecto. Los usuarios ya añadidos conservarán su rol actual."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Grupo de usuario",
+            "required": "El grupo de usuario es obligatorio",
+            "placeholder": "Introduzca los nombres de grupos IdP"
+          },
+          "project": {
+            "text": "Proyecto",
+            "required": "El proyecto es obligatorio",
+            "placeholder": "Seleccione un proyecto"
+          },
+          "default_role": {
+            "text": "Rol del proyecto",
+            "required": "El rol del proyecto es obligatorio",
+            "placeholder": "Seleccione un rol del proyecto"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identidad",
+        "heading": "Identidad",
+        "description": "Configure su dominio y habilite el inicio de sesión único"
+      },
+      "project_states": {
+        "title": "Estados del proyecto",
+        "heading": "Ver resumen de progreso de todos los proyectos.",
+        "description": "Los Estados de proyecto son una función exclusiva de Plane para rastrear el progreso de todos tus proyectos por cualquier propiedad del proyecto.",
+        "go_to_settings": "Ir a configuración"
+      },
+      "projects": {
+        "title": "Proyectos",
+        "description": "Administrar estados de proyectos, habilitar etiquetas de proyectos y otras configuraciones.",
+        "tabs": {
+          "states": "Estados del proyecto",
+          "labels": "Etiquetas del proyecto"
+        }
+      },
+      "templates": {
+        "title": "Plantillas",
+        "heading": "Plantillas",
+        "description": "Ahorra el 80 % del tiempo dedicado a crear proyectos, elementos de trabajo y páginas cuando usas plantillas."
+      },
+      "relations": {
+        "title": "Relaciones",
+        "heading": "Relaciones",
+        "description": "Crea y gestiona tipos de relaciones que conectan elementos de trabajo en tu espacio de trabajo."
+      },
+      "cancel_trial": {
+        "title": "Cancela primero tu periodo de prueba.",
+        "description": "Tienes un periodo de prueba activo en uno de nuestros planes de pago. Por favor, cancélalo primero para continuar.",
+        "dismiss": "Cerrar",
+        "cancel": "Cancelar prueba",
+        "cancel_success_title": "Periodo de prueba cancelado.",
+        "cancel_success_message": "Ahora puedes eliminar el espacio de trabajo.",
+        "cancel_error_title": "Eso no funcionó.",
+        "cancel_error_message": "Por favor, inténtalo de nuevo."
+      },
+      "applications": {
+        "internal": "Interno",
+        "title": "Aplicaciones",
+        "applicationId_copied": "ID de aplicación copiado al portapapeles",
+        "clientId_copied": "ID de cliente copiado al portapapeles",
+        "clientSecret_copied": "Secreto de cliente copiado al portapapeles",
+        "third_party_apps": "Aplicaciones de terceros",
+        "your_apps": "Tus aplicaciones",
+        "connect": "Conectar",
+        "connected": "Conectado",
+        "disconnect": "Desconectar",
+        "install": "Instalar",
+        "installed": "Instalado",
+        "configure": "Configurar",
+        "app_available": "Has hecho que esta aplicación esté disponible para usar con un espacio de trabajo de Plane",
+        "app_credentials_regenrated": {
+          "title": "Las credenciales de la aplicación se han regenerado correctamente",
+          "description": "Reemplace el secreto del cliente en todos los lugares donde se utilice. El secreto anterior ya no es válido."
+        },
+        "app_created": {
+          "title": "La aplicación se creó correctamente",
+          "description": "Utilice las credenciales para instalar la aplicación en un espacio de trabajo de Plane"
+        },
+        "installed_apps": "Aplicaciones instaladas",
+        "all_apps": "Todas las aplicaciones",
+        "internal_apps": "Aplicaciones internas",
+        "app_name_title": "¿Cómo llamarás a esta aplicación?",
+        "app_description_title": {
+          "label": "Descripción larga",
+          "placeholder": "Escriba una descripción larga para el mercado. Presione '/' para ver los comandos."
+        },
+        "authorization_grant_type": {
+          "title": "Tipo de conexión",
+          "description": "Elija si su aplicación debe instalarse una vez para el espacio de trabajo o permitir que cada usuario conecte su propia cuenta"
+        },
+        "website": {
+          "title": "Sitio web",
+          "description": "Enlace al sitio web de su aplicación.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Creador de aplicaciones",
+          "description": "La persona u organización que crea la aplicación."
+        },
+        "app_maker_error": "El creador de la aplicación es obligatorio",
+        "setup_url": {
+          "label": "URL de configuración",
+          "description": "Los usuarios serán redirigidos a esta URL cuando instalen la aplicación.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL del webhook",
+          "description": "Aquí es donde enviaremos eventos y actualizaciones de webhook desde los espacios de trabajo donde está instalada su aplicación.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Secreto del webhook",
+          "description": "Secreto utilizado para verificar las solicitudes entrantes del webhook.",
+          "placeholder": "Ingresa una clave secreta aleatoria"
+        },
+        "redirect_uris": {
+          "label": "URIs de redirección (separadas por espacios)",
+          "description": "Los usuarios serán redirigidos a esta ruta después de haberse autenticado con Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Conecta un espacio de trabajo de Plane para comenzar a usarla",
+        "client_id_and_secret": "ID y Secreto de Cliente",
+        "client_id_and_secret_description": "Copia y guarda esta clave secreta. No podrás ver esta clave después de hacer clic en Cerrar.",
+        "client_id_and_secret_download": "Puedes descargar un CSV con la clave desde aquí.",
+        "application_id": "ID de Aplicación",
+        "client_id": "ID de Cliente",
+        "client_secret": "Secreto de Cliente",
+        "export_as_csv": "Exportar como CSV",
+        "slug_already_exists": "El slug ya existe",
+        "failed_to_create_application": "Error al crear la aplicación",
+        "upload_logo": "Subir Logo",
+        "app_name_error": "El nombre de la aplicación es obligatorio",
+        "app_short_description_title": "Dale una breve descripción a esta aplicación",
+        "app_short_description_error": "La descripción corta de la aplicación es obligatoria",
+        "app_description_error": "La descripción de la aplicación es obligatoria",
+        "app_slug_title": "Slug de la aplicación",
+        "app_slug_error": "El slug de la aplicación es obligatorio",
+        "invalid_website_error": "Sitio web inválido",
+        "webhook_url_title": "URL del Webhook",
+        "webhook_url_error": "La URL del webhook es obligatoria",
+        "invalid_webhook_url_error": "URL del webhook inválida",
+        "redirect_uris_title": "URIs de redirección",
+        "redirect_uris_error": "Las URIs de redirección son obligatorias",
+        "invalid_redirect_uris_error": "URIs de redirección inválidas",
+        "redirect_uris_description": "Ingresa las URIs separadas por espacios donde la aplicación redirigirá después del usuario, por ejemplo https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Orígenes Javascript autorizados",
+        "authorized_javascript_origins_error": "Los orígenes Javascript autorizados son obligatorios",
+        "invalid_authorized_javascript_origins_error": "Orígenes Javascript autorizados inválidos",
+        "authorized_javascript_origins_description": "Ingresa los orígenes separados por espacios donde la aplicación podrá hacer solicitudes, por ejemplo app.com example.com",
+        "create_app": "Crear aplicación",
+        "update_app": "Actualizar aplicación",
+        "build_your_own_app": "Construye tu propia aplicación",
+        "edit_app_details": "Editar detalles de la aplicación",
+        "regenerate_client_secret_description": "Regenerar el secreto de cliente. Si regeneras el secreto, podrás copiar la clave o descargarla en un archivo CSV justo después.",
+        "regenerate_client_secret": "Regenerar secreto de cliente",
+        "regenerate_client_secret_confirm_title": "¿Seguro que quieres regenerar el secreto de cliente?",
+        "regenerate_client_secret_confirm_description": "La aplicación que use este secreto dejará de funcionar. Necesitarás actualizar el secreto en la aplicación.",
+        "regenerate_client_secret_confirm_cancel": "Cancelar",
+        "regenerate_client_secret_confirm_regenerate": "Regenerar",
+        "read_only_access_to_workspace": "Acceso de solo lectura a tu espacio de trabajo",
+        "write_access_to_workspace": "Acceso de escritura a tu espacio de trabajo",
+        "read_only_access_to_user_profile": "Acceso de solo lectura a tu perfil de usuario",
+        "write_access_to_user_profile": "Acceso de escritura a tu perfil de usuario",
+        "connect_app_to_workspace": "Conectar {app} a tu espacio de trabajo {workspace}",
+        "user_permissions": "Permisos de usuario",
+        "user_permissions_description": "Los permisos de usuario se utilizan para otorgar acceso al perfil del usuario.",
+        "workspace_permissions": "Permisos del espacio de trabajo",
+        "workspace_permissions_description": "Los permisos del espacio de trabajo se utilizan para otorgar acceso al espacio de trabajo.",
+        "with_the_permissions": "con los permisos",
+        "app_consent_title": "{app} está solicitando acceso a tu espacio de trabajo y perfil de Plane.",
+        "choose_workspace_to_connect_app_with": "Elige un espacio de trabajo para conectar la aplicación",
+        "app_consent_workspace_permissions_title": "{app} desea",
+        "app_consent_user_permissions_title": "{app} también puede solicitar el permiso de un usuario para los siguientes recursos. Estos permisos serán solicitados y autorizados únicamente por un usuario.",
+        "app_consent_accept_title": "Al aceptar, tú",
+        "app_consent_accept_1": "Concedes a la aplicación acceso a tus datos de Plane donde sea que puedas usar la aplicación dentro o fuera de Plane",
+        "app_consent_accept_2": "Aceptas la Política de Privacidad y Términos de Uso de {app}",
+        "accepting": "Aceptando...",
+        "accept": "Aceptar",
+        "categories": "Categorías",
+        "select_app_categories": "Seleccionar categorías de la aplicación",
+        "categories_title": "Categorías",
+        "categories_error": "Las categorías son requeridas",
+        "invalid_categories_error": "Categorías inválidas",
+        "categories_description": "Selecciona las categorías que mejor describen la aplicación",
+        "supported_plans": "Planes Soportados",
+        "supported_plans_description": "Selecciona los planes de espacio de trabajo que pueden instalar esta aplicación. Deja vacío para permitir todos los planes.",
+        "select_plans": "Seleccionar Planes",
+        "privacy_policy_url_title": "URL de la Política de Privacidad",
+        "privacy_policy_url_error": "La URL de la Política de Privacidad es requerida",
+        "invalid_privacy_policy_url_error": "URL de la Política de Privacidad inválida",
+        "terms_of_service_url_title": "URL de los Términos de Servicio",
+        "terms_of_service_url_error": "Los Términos de Servicio son requeridos",
+        "invalid_terms_of_service_url_error": "URL de los Términos de Servicio inválida",
+        "support_url_title": "URL de Soporte",
+        "support_url_error": "La URL de Soporte es requerida",
+        "invalid_support_url_error": "URL de Soporte inválida",
+        "video_url_title": "URL del Video",
+        "video_url_error": "El URL del Video es requerido",
+        "invalid_video_url_error": "URL del Video inválida",
+        "setup_url_error": "La URL de Configuración es requerida",
+        "invalid_setup_url_error": "URL de Configuración inválida",
+        "configuration_url_title": "URL de Configuración",
+        "configuration_url_error": "La URL de Configuración es requerida",
+        "invalid_configuration_url_error": "URL de Configuración inválida",
+        "contact_email_title": "Correo de Contacto",
+        "contact_email_error": "El correo de contacto es requerido",
+        "invalid_contact_email_error": "Correo de contacto inválido",
+        "upload_attachments": "Subir adjuntos",
+        "uploading_images": "Subiendo {count} Imagen{count, plural, one {s} other {s}}",
+        "drop_images_here": "Arrastra imágenes aquí",
+        "click_to_upload_images": "Haz clic para subir imágenes",
+        "invalid_file_or_exceeds_size_limit": "Archivo inválido o excede el límite de tamaño ({size} MB)",
+        "uploading": "Subiendo...",
+        "upload_and_save": "Subir y guardar",
+        "app_consent_no_access_title": "Solicitud de instalación",
+        "app_consent_no_access_description": "Esta aplicación solo se puede instalar después de que un administrador del espacio de trabajo la instale. Contacta con el administrador de tu espacio de trabajo para continuar.",
+        "app_consent_unapproved_title": "Esta aplicación aún no ha sido revisada ni aprobada por Plane.",
+        "app_consent_unapproved_description": "Asegúrate de confiar en esta aplicación antes de conectarla a tu espacio de trabajo.",
+        "go_to_app": "Ir a la aplicación",
+        "enable_app_mentions": "Habilitar menciones de la aplicación",
+        "enable_app_mentions_tooltip": "Cuando esto está habilitado, los usuarios pueden mencionar o asignar elementos de trabajo a esta aplicación.",
+        "scopes": "Ámbitos",
+        "select_scopes": "Seleccionar ámbitos",
+        "read_access_to": "Acceso de solo lectura a",
+        "write_access_to": "Acceso de escritura a",
+        "global_permission_expiration": "Los ámbitos globales caducarán pronto. Utilice ámbitos granulares en su lugar. Por ejemplo, use project:read en lugar de una lectura global.",
+        "selected_scopes": "{count} seleccionados",
+        "scopes_and_permissions": "Ámbitos y permisos",
+        "read": "Lectura",
+        "write": "Escritura",
+        "scope_description": {
+          "projects": "Acceso a proyectos y todas las entidades relacionadas con proyectos",
+          "wiki": "Acceso al wiki y todas las entidades relacionadas con el wiki",
+          "workspaces": "Acceso a espacios de trabajo y todas las entidades relacionadas",
+          "stickies": "Acceso a notas adhesivas y todas las entidades relacionadas",
+          "profile": "Acceso a la información del perfil de usuario",
+          "agents": "Acceso a agentes y todas las entidades relacionadas con agentes",
+          "assets": "Acceso a activos y todas las entidades relacionadas con activos"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Ve tu trabajo obtener más inteligente y más rápido con IA que está conectada de forma nativa a tu trabajo y base de conocimientos."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Scripts",
+        "new_script": "Nuevo script",
+        "description": "Automatiza tus flujos de trabajo con scripts personalizados y reglas de automatización."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "No se han creado tokens de API",
+        "description": "Las APIs de Plane se pueden usar para integrar tus datos en Plane con cualquier sistema externo. Crea un token para comenzar."
+      },
+      "webhooks": {
+        "title": "No se han agregado webhooks",
+        "description": "Crea webhooks para recibir actualizaciones en tiempo real y automatizar acciones."
+      },
+      "exports": {
+        "title": "No hay exportaciones aún",
+        "description": "Cada vez que exportes, también tendrás una copia aquí para referencia."
+      },
+      "imports": {
+        "title": "No hay importaciones aún",
+        "description": "Encuentra todas tus importaciones anteriores aquí y descárgalas."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/es/workspace.json b/packages/i18n/src/locales/es/workspace.json
new file mode 100644
index 0000000..f671d0b
--- /dev/null
+++ b/packages/i18n/src/locales/es/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Crea tu espacio de trabajo",
+    "subheading": "Para comenzar a usar Plane, necesitas crear o unirte a un espacio de trabajo.",
+    "form": {
+      "name": {
+        "label": "Nombra tu espacio de trabajo",
+        "placeholder": "Algo familiar y reconocible es siempre lo mejor."
+      },
+      "url": {
+        "label": "Establece la URL de tu espacio de trabajo",
+        "placeholder": "Escribe o pega una URL",
+        "edit_slug": "Solo puedes editar el slug de la URL"
+      },
+      "organization_size": {
+        "label": "¿Cuántas personas usarán este espacio de trabajo?",
+        "placeholder": "Selecciona un rango"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Solo el administrador de tu instancia puede crear espacios de trabajo",
+        "description": "Si conoces la dirección de correo electrónico del administrador de tu instancia, haz clic en el botón de abajo para ponerte en contacto con él.",
+        "request_button": "Solicitar administrador de instancia"
+      },
+      "validation": {
+        "name_alphanumeric": "Los nombres de espacios de trabajo solo pueden contener (' '), ('-'), ('_') y caracteres alfanuméricos.",
+        "name_length": "Limita tu nombre a 80 caracteres.",
+        "url_alphanumeric": "Las URLs solo pueden contener ('-') y caracteres alfanuméricos.",
+        "url_length": "Limita tu URL a 48 caracteres.",
+        "url_already_taken": "¡La URL del espacio de trabajo ya está en uso!"
+      }
+    },
+    "request_email": {
+      "subject": "Solicitando un nuevo espacio de trabajo",
+      "body": "Hola administrador(es) de instancia,\n\nPor favor, crea un nuevo espacio de trabajo con la URL [/nombre-espacio-trabajo] para [propósito de crear el espacio de trabajo].\n\nGracias,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Crear espacio de trabajo",
+      "loading": "Creando espacio de trabajo"
+    },
+    "toast": {
+      "success": {
+        "title": "Éxito",
+        "message": "Espacio de trabajo creado correctamente"
+      },
+      "error": {
+        "title": "Error",
+        "message": "No se pudo crear el espacio de trabajo. Por favor, inténtalo de nuevo."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Resumen de tus proyectos, actividad y métricas",
+        "description": "Bienvenido a Plane, estamos emocionados de tenerte aquí. Crea tu primer proyecto y rastrea tus elementos de trabajo, y esta página se transformará en un espacio que te ayuda a progresar. Los administradores también verán elementos que ayudan a su equipo a progresar.",
+        "primary_button": {
+          "text": "Construye tu primer proyecto",
+          "comic": {
+            "title": "Todo comienza con un proyecto en Plane",
+            "description": "Un proyecto podría ser la hoja de ruta de un producto, una campaña de marketing o el lanzamiento de un nuevo automóvil."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Análisis",
+    "page_label": "{workspace} - Análisis",
+    "open_tasks": "Total de tareas abiertas",
+    "error": "Hubo un error al obtener los datos.",
+    "work_items_closed_in": "Elementos de trabajo cerrados en",
+    "selected_projects": "Proyectos seleccionados",
+    "total_members": "Total de miembros",
+    "total_cycles": "Total de Ciclos",
+    "total_modules": "Total de Módulos",
+    "pending_work_items": {
+      "title": "Elementos de trabajo pendientes",
+      "empty_state": "El análisis de elementos de trabajo pendientes por compañeros aparece aquí."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Elementos de trabajo cerrados en un año",
+      "empty_state": "Cierra elementos de trabajo para ver su análisis en forma de gráfico."
+    },
+    "most_work_items_created": {
+      "title": "Más elementos de trabajo creados",
+      "empty_state": "Los compañeros y el número de elementos de trabajo creados por ellos aparecen aquí."
+    },
+    "most_work_items_closed": {
+      "title": "Más elementos de trabajo cerrados",
+      "empty_state": "Los compañeros y el número de elementos de trabajo cerrados por ellos aparecen aquí."
+    },
+    "tabs": {
+      "scope_and_demand": "Alcance y Demanda",
+      "custom": "Análisis Personalizado"
+    },
+    "total": "Total de {entity}",
+    "started_work_items": "{entity} iniciados",
+    "backlog_work_items": "{entity} en backlog",
+    "un_started_work_items": "{entity} no iniciados",
+    "completed_work_items": "{entity} completados",
+    "project_insights": "Información del proyecto",
+    "summary_of_projects": "Resumen de proyectos",
+    "all_projects": "Todos los proyectos",
+    "trend_on_charts": "Tendencia en gráficos",
+    "active_projects": "Proyectos activos",
+    "customized_insights": "Información personalizada",
+    "created_vs_resolved": "Creado vs Resuelto",
+    "empty_state": {
+      "project_insights": {
+        "title": "Aún no hay datos",
+        "description": "Los elementos de trabajo asignados a ti, desglosados por estado, aparecerán aquí."
+      },
+      "created_vs_resolved": {
+        "title": "Aún no hay datos",
+        "description": "Los elementos de trabajo creados y resueltos con el tiempo aparecerán aquí."
+      },
+      "customized_insights": {
+        "title": "Aún no hay datos",
+        "description": "Los elementos de trabajo asignados a ti, desglosados por estado, aparecerán aquí."
+      },
+      "general": {
+        "title": "Rastrea el progreso, las cargas de trabajo y las asignaciones. Identifica tendencias, elimina bloqueos y trabaja más rápido",
+        "description": "Ve alcance versus demanda, estimaciones y crecimiento del alcance. Obtén rendimiento por miembros del equipo y equipos, y asegúrate de que tu proyecto se ejecute a tiempo.",
+        "primary_button": {
+          "text": "Inicia tu primer proyecto",
+          "comic": {
+            "title": "Analytics funciona mejor con Ciclos + Módulos",
+            "description": "Primero, encuadra tus elementos de trabajo en Ciclos y, si puedes, agrupa elementos que abarcan más de un ciclo en Módulos. Revisa ambos en la navegación izquierda."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Aún no hay datos",
+        "description": "Los análisis de progreso del ciclo aparecerán aquí. Agrega elementos de trabajo a los ciclos para comenzar a rastrear el progreso."
+      },
+      "module_progress": {
+        "title": "Aún no hay datos",
+        "description": "Los análisis de progreso del módulo aparecerán aquí. Agrega elementos de trabajo a los módulos para comenzar a rastrear el progreso."
+      },
+      "intake_trends": {
+        "title": "Aún no hay datos",
+        "description": "Los análisis de tendencias de entrada aparecerán aquí. Agrega elementos de trabajo a la entrada para comenzar a rastrear tendencias."
+      }
+    },
+    "upgrade_to_plan": "Mejora a {plan} para desbloquear {tab}",
+    "workitem_resolved_vs_pending": "Elementos de trabajo resueltos vs pendientes",
+    "projects_by_status": "Proyectos por estado",
+    "active_users": "Usuarios activos",
+    "intake_trends": "Tendencias de admisión"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Proyecto} other {Proyectos}}",
+    "create": {
+      "label": "Agregar Proyecto"
+    },
+    "network": {
+      "label": "Red",
+      "private": {
+        "title": "Privado",
+        "description": "Accesible solo por invitación"
+      },
+      "public": {
+        "title": "Público",
+        "description": "Cualquiera en el espacio de trabajo excepto Invitados puede unirse"
+      }
+    },
+    "error": {
+      "permission": "No tienes permiso para realizar esta acción.",
+      "cycle_delete": "Error al eliminar el ciclo",
+      "module_delete": "Error al eliminar el módulo",
+      "issue_delete": "Error al eliminar el elemento de trabajo"
+    },
+    "state": {
+      "backlog": "Pendiente",
+      "unstarted": "Sin iniciar",
+      "started": "Iniciado",
+      "completed": "Completado",
+      "cancelled": "Cancelado"
+    },
+    "sort": {
+      "manual": "Manual",
+      "name": "Nombre",
+      "created_at": "Fecha de creación",
+      "members_length": "Número de miembros"
+    },
+    "scope": {
+      "my_projects": "Mis proyectos",
+      "archived_projects": "Archivados"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# mes} other{# meses}}",
+      "days_count": "{days, plural, one{# día} other{# días}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "No hay proyectos activos",
+        "description": "Piensa en cada proyecto como el padre para el trabajo orientado a objetivos. Los proyectos son donde viven las Tareas, Ciclos y Módulos y, junto con tus colegas, te ayudan a alcanzar ese objetivo. Crea un nuevo proyecto o filtra por proyectos archivados.",
+        "primary_button": {
+          "text": "Inicia tu primer proyecto",
+          "comic": {
+            "title": "Todo comienza con un proyecto en Plane",
+            "description": "Un proyecto podría ser la hoja de ruta de un producto, una campaña de marketing o el lanzamiento de un nuevo automóvil."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Sin proyecto",
+        "description": "Para crear elementos de trabajo o gestionar tu trabajo, necesitas crear un proyecto o ser parte de uno.",
+        "primary_button": {
+          "text": "Inicia tu primer proyecto",
+          "comic": {
+            "title": "Todo comienza con un proyecto en Plane",
+            "description": "Un proyecto podría ser la hoja de ruta de un producto, una campaña de marketing o el lanzamiento de un nuevo automóvil."
+          }
+        }
+      },
+      "filter": {
+        "title": "No hay proyectos coincidentes",
+        "description": "No se detectaron proyectos con los criterios coincidentes.\n Crea un nuevo proyecto en su lugar."
+      },
+      "search": {
+        "description": "No se detectaron proyectos con los criterios coincidentes.\nCrea un nuevo proyecto en su lugar"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Agregar vista",
+    "empty_state": {
+      "all-issues": {
+        "title": "No hay elementos de trabajo en el proyecto",
+        "description": "¡Primer proyecto completado! Ahora, divide tu trabajo en piezas rastreables con elementos de trabajo. ¡Vamos!",
+        "primary_button": {
+          "text": "Crear nuevo elemento de trabajo"
+        }
+      },
+      "assigned": {
+        "title": "No hay elementos de trabajo aún",
+        "description": "Los elementos de trabajo asignados a ti se pueden rastrear desde aquí.",
+        "primary_button": {
+          "text": "Crear nuevo elemento de trabajo"
+        }
+      },
+      "created": {
+        "title": "No hay elementos de trabajo aún",
+        "description": "Todos los elementos de trabajo creados por ti vienen aquí, rastréalos aquí directamente.",
+        "primary_button": {
+          "text": "Crear nuevo elemento de trabajo"
+        }
+      },
+      "subscribed": {
+        "title": "No hay elementos de trabajo aún",
+        "description": "Suscríbete a los elementos de trabajo que te interesan, rastréalos todos aquí."
+      },
+      "custom-view": {
+        "title": "No hay elementos de trabajo aún",
+        "description": "Elementos de trabajo que aplican a los filtros, rastréalos todos aquí."
+      }
+    },
+    "delete_view": {
+      "title": "¿Estás seguro de que quieres eliminar esta vista?",
+      "content": "Si confirmas, todas las opciones de ordenación, filtro y visualización + el diseño que has elegido para esta vista se eliminarán permanentemente sin posibilidad de restaurarlas."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Borrador de elemento de trabajo",
+    "empty_state": {
+      "title": "Los elementos de trabajo a medio escribir y pronto los comentarios aparecerán aquí.",
+      "description": "Para probar esto, comienza a agregar un elemento de trabajo y déjalo a medias o crea tu primer borrador a continuación. 😉",
+      "primary_button": {
+        "text": "Crea tu primer borrador"
+      }
+    },
+    "delete_modal": {
+      "title": "Eliminar borrador",
+      "description": "¿Estás seguro de que quieres eliminar este borrador? Esto no se puede deshacer."
+    },
+    "toasts": {
+      "created": {
+        "success": "Borrador creado",
+        "error": "No se pudo crear el elemento de trabajo. Por favor, inténtalo de nuevo."
+      },
+      "deleted": {
+        "success": "Borrador eliminado"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Escribe una nota, un documento o una base de conocimiento completa. Obtén ayuda de Galileo, el asistente de IA de Plane, para comenzar",
+        "description": "Las Pages son espacios de pensamiento en Plane. Toma notas de reuniones, fórmalas fácilmente, integra elementos de trabajo, organízalas usando una biblioteca de componentes y mantenlas todas en el contexto de tu proyecto. Para hacer cualquier documento rápidamente, invoca a Galileo, la IA de Plane, con un atajo o el clic de un botón.",
+        "primary_button": {
+          "text": "Crea tu primera Page"
+        }
+      },
+      "private": {
+        "title": "Aún no hay Pages privadas",
+        "description": "Mantén tus pensamientos privados aquí. Cuando estés listo para compartir, el equipo está a un clic de distancia.",
+        "primary_button": {
+          "text": "Crea tu primera Page"
+        }
+      },
+      "public": {
+        "title": "Aún no hay Pages de espacio de trabajo",
+        "description": "Ve las Pages compartidas con todos en tu espacio de trabajo aquí mismo.",
+        "primary_button": {
+          "text": "Crea tu primera Page"
+        }
+      },
+      "archived": {
+        "title": "Aún no hay Pages archivadas",
+        "description": "Archiva las Pages que no estén en tu radar. Accede a ellas aquí cuando las necesites."
+      },
+      "shared": {
+        "title": "Aún no hay páginas compartidas",
+        "description": "Las páginas que otros han compartido contigo aparecerán aquí."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "No hay Cycles activos",
+        "description": "Cycles de tus proyectos que incluyen cualquier período que abarque la fecha de hoy dentro de su rango. Encuentra el progreso y los detalles de todos tus Cycles activos aquí."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Importar miembros desde CSV",
+      "description": "Sube un CSV con columnas: Email, Display Name, First Name, Last Name, Role (5, 15 o 20)",
+      "dropzone": {
+        "active": "Suelta el archivo CSV aquí",
+        "inactive": "Arrastra y suelta o haz clic para subir",
+        "file_type": "Solo se admiten archivos .csv"
+      },
+      "buttons": {
+        "cancel": "Cancelar",
+        "import": "Importar",
+        "try_again": "Intentar de nuevo",
+        "close": "Cerrar",
+        "done": "Hecho"
+      },
+      "progress": {
+        "uploading": "Subiendo...",
+        "importing": "Importando..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Importación fallida",
+          "complete": "Importación completada"
+        },
+        "message": {
+          "seat_limit": "No se pueden importar miembros debido a restricciones de límite de asientos.",
+          "success": "{count} miembro{plural} agregado{plural} exitosamente al espacio de trabajo.",
+          "no_imports": "No se importaron miembros desde el archivo CSV."
+        },
+        "stats": {
+          "successful": "Exitoso",
+          "failed": "Fallido"
+        },
+        "download_errors": "Descargar errores"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Archivo inválido",
+          "message": "Solo se admiten archivos CSV."
+        },
+        "import_failed": {
+          "title": "Importación fallida",
+          "message": "Algo salió mal."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/accessibility.json b/packages/i18n/src/locales/fr/accessibility.json
new file mode 100644
index 0000000..9e02785
--- /dev/null
+++ b/packages/i18n/src/locales/fr/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo de l’espace de travail",
+      "open_workspace_switcher": "Ouvrir le sélecteur d’espace de travail",
+      "open_user_menu": "Ouvrir le menu utilisateur",
+      "open_command_palette": "Ouvrir la palette de commandes",
+      "open_extended_sidebar": "Ouvrir la barre latérale étendue",
+      "close_extended_sidebar": "Fermer la barre latérale étendue",
+      "create_favorites_folder": "Créer un dossier de favoris",
+      "open_folder": "Ouvrir le dossier",
+      "close_folder": "Fermer le dossier",
+      "open_favorites_menu": "Ouvrir le menu des favoris",
+      "close_favorites_menu": "Fermer le menu des favoris",
+      "enter_folder_name": "Saisir le nom du dossier",
+      "create_new_project": "Créer un nouveau projet",
+      "open_projects_menu": "Ouvrir le menu des projets",
+      "close_projects_menu": "Fermer le menu des projets",
+      "toggle_quick_actions_menu": "Basculer le menu d’actions rapides",
+      "open_project_menu": "Ouvrir le menu du projet",
+      "close_project_menu": "Fermer le menu du projet",
+      "collapse_sidebar": "Réduire la barre latérale",
+      "expand_sidebar": "Étendre la barre latérale",
+      "edition_badge": "Ouvrir le modal des plans payants"
+    },
+    "auth_forms": {
+      "clear_email": "Effacer l’e-mail",
+      "show_password": "Afficher le mot de passe",
+      "hide_password": "Masquer le mot de passe",
+      "close_alert": "Fermer l’alerte",
+      "close_popover": "Fermer la fenêtre contextuelle"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/auth.json b/packages/i18n/src/locales/fr/auth.json
new file mode 100644
index 0000000..031cffe
--- /dev/null
+++ b/packages/i18n/src/locales/fr/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identité",
+    "description": "Configurez votre domaine pour accéder aux fonctionnalités de sécurité, y compris l'authentification unique.",
+    "domain_management": {
+      "header": "Gestion des domaines",
+      "verified_domains": {
+        "header": "Domaines vérifiés",
+        "description": "Vérifiez la propriété d'un domaine e-mail pour activer l'authentification unique.",
+        "button_text": "Ajouter un domaine",
+        "list": {
+          "domain_name": "Nom du domaine",
+          "status": "Statut",
+          "status_verified": "Vérifié",
+          "status_failed": "Échoué",
+          "status_pending": "En attente"
+        },
+        "add_domain": {
+          "title": "Ajouter un domaine",
+          "description": "Ajoutez votre domaine pour configurer SSO et le vérifier.",
+          "form": {
+            "domain_label": "Domaine",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Le domaine est requis",
+            "domain_invalid": "Entrez un nom de domaine valide (ex. plane.so)"
+          },
+          "primary_button_text": "Ajouter le domaine",
+          "primary_button_loading_text": "Ajout en cours",
+          "toast": {
+            "success_title": "Succès !",
+            "success_message": "Domaine ajouté avec succès. Veuillez le vérifier en ajoutant l'enregistrement DNS TXT.",
+            "error_message": "Échec de l'ajout du domaine. Veuillez réessayer."
+          }
+        },
+        "verify_domain": {
+          "title": "Vérifiez votre domaine",
+          "description": "Suivez ces étapes pour vérifier votre domaine.",
+          "instructions": {
+            "label": "Instructions",
+            "step_1": "Accédez aux paramètres DNS de votre hébergeur de domaine.",
+            "step_2": {
+              "part_1": "Créez un",
+              "part_2": "enregistrement TXT",
+              "part_3": "et collez la valeur complète de l'enregistrement fournie ci-dessous."
+            },
+            "step_3": "Cette mise à jour prend généralement quelques minutes mais peut prendre jusqu'à 72 heures.",
+            "step_4": "Cliquez sur \"Vérifier le domaine\" pour confirmer une fois votre enregistrement DNS mis à jour."
+          },
+          "verification_code_label": "Valeur de l'enregistrement TXT",
+          "verification_code_description": "Ajoutez cet enregistrement à vos paramètres DNS",
+          "domain_label": "Domaine",
+          "primary_button_text": "Vérifier le domaine",
+          "primary_button_loading_text": "Vérification en cours",
+          "secondary_button_text": "Je le ferai plus tard",
+          "toast": {
+            "success_title": "Succès !",
+            "success_message": "Domaine vérifié avec succès.",
+            "error_message": "Échec de la vérification du domaine. Veuillez réessayer."
+          }
+        },
+        "delete_domain": {
+          "title": "Supprimer le domaine",
+          "description": {
+            "prefix": "Êtes-vous sûr de vouloir supprimer",
+            "suffix": " ? Cette action ne peut pas être annulée."
+          },
+          "primary_button_text": "Supprimer",
+          "primary_button_loading_text": "Suppression en cours",
+          "secondary_button_text": "Annuler",
+          "toast": {
+            "success_title": "Succès !",
+            "success_message": "Domaine supprimé avec succès.",
+            "error_message": "Échec de la suppression du domaine. Veuillez réessayer."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Authentification unique",
+      "disabled_message": "Ajoutez un domaine vérifié pour configurer SSO",
+      "configure": {
+        "create": "Configurer",
+        "update": "Modifier"
+      },
+      "switch_alert_modal": {
+        "title": "Passer à la méthode SSO {newProviderShortName} ?",
+        "content": "Vous êtes sur le point d'activer {newProviderLongName} ({newProviderShortName}). Cette action désactivera automatiquement {activeProviderLongName} ({activeProviderShortName}). Les utilisateurs tentant de se connecter via {activeProviderShortName} ne pourront plus accéder à la plateforme jusqu'à ce qu'ils passent à la nouvelle méthode. Êtes-vous sûr de vouloir continuer ?",
+        "primary_button_text": "Changer",
+        "primary_button_text_loading": "Changement en cours",
+        "secondary_button_text": "Annuler"
+      },
+      "form_section": {
+        "title": "Détails fournis par IdP pour {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Enregistrement en cours",
+        "save_changes": "Enregistrer les modifications",
+        "configure_only": "Configurer uniquement",
+        "configure_and_enable": "Configurer et activer",
+        "default": "Enregistrer"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} détails fournis pour votre IdP",
+        "button_text": "Obtenir les détails de configuration"
+      },
+      "saml": {
+        "header": "Activer SAML",
+        "description": "Configurez votre fournisseur d'identité SAML pour activer l'authentification unique.",
+        "configure": {
+          "title": "Activer SAML",
+          "description": "Vérifiez la propriété d'un domaine e-mail pour accéder aux fonctionnalités de sécurité, y compris l'authentification unique.",
+          "toast": {
+            "success_title": "Succès !",
+            "create_success_message": "Fournisseur SAML créé avec succès.",
+            "update_success_message": "Fournisseur SAML mis à jour avec succès.",
+            "error_title": "Erreur !",
+            "error_message": "Échec de l'enregistrement du fournisseur SAML. Veuillez réessayer."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Détails web",
+            "entity_id": {
+              "label": "ID d'entité | Audience | Informations de métadonnées",
+              "description": "Nous générerons cette partie des métadonnées qui identifie cette application Plane comme un service autorisé sur votre IdP."
+            },
+            "callback_url": {
+              "label": "URL d'authentification unique",
+              "description": "Nous générerons cela pour vous. Ajoutez cela dans le champ URL de redirection de connexion de votre IdP."
+            },
+            "logout_url": {
+              "label": "URL de déconnexion unique",
+              "description": "Nous générerons cela pour vous. Ajoutez cela dans le champ URL de redirection de déconnexion unique de votre IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Détails mobiles",
+            "entity_id": {
+              "label": "ID d'entité | Audience | Informations de métadonnées",
+              "description": "Nous générerons cette partie des métadonnées qui identifie cette application Plane comme un service autorisé sur votre IdP."
+            },
+            "callback_url": {
+              "label": "URL d'authentification unique",
+              "description": "Nous générerons cela pour vous. Ajoutez cela dans le champ URL de redirection de connexion de votre IdP."
+            },
+            "logout_url": {
+              "label": "URL de déconnexion unique",
+              "description": "Nous générerons cela pour vous. Ajoutez cela dans le champ URL de redirection de déconnexion de votre IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Détails de mappage",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Activer OIDC",
+        "description": "Configurez votre fournisseur d'identité OIDC pour activer l'authentification unique.",
+        "configure": {
+          "title": "Activer OIDC",
+          "description": "Vérifiez la propriété d'un domaine e-mail pour accéder aux fonctionnalités de sécurité, y compris l'authentification unique.",
+          "toast": {
+            "success_title": "Succès !",
+            "create_success_message": "Fournisseur OIDC créé avec succès.",
+            "update_success_message": "Fournisseur OIDC mis à jour avec succès.",
+            "error_title": "Erreur !",
+            "error_message": "Échec de l'enregistrement du fournisseur OIDC. Veuillez réessayer."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Détails web",
+            "origin_url": {
+              "label": "URL d'origine",
+              "description": "Nous générerons cela pour cette application Plane. Ajoutez cela comme origine de confiance dans le champ correspondant de votre IdP."
+            },
+            "callback_url": {
+              "label": "URL de redirection",
+              "description": "Nous générerons cela pour vous. Ajoutez cela dans le champ URL de redirection de connexion de votre IdP."
+            },
+            "logout_url": {
+              "label": "URL de déconnexion",
+              "description": "Nous générerons cela pour vous. Ajoutez cela dans le champ URL de redirection de déconnexion de votre IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Détails mobiles",
+            "origin_url": {
+              "label": "URL d'origine",
+              "description": "Nous générerons cela pour cette application Plane. Ajoutez cela comme origine de confiance dans le champ correspondant de votre IdP."
+            },
+            "callback_url": {
+              "label": "URL de redirection",
+              "description": "Nous générerons cela pour vous. Ajoutez cela dans le champ URL de redirection de connexion de votre IdP."
+            },
+            "logout_url": {
+              "label": "URL de déconnexion",
+              "description": "Nous générerons cela pour vous. Ajoutez cela dans le champ URL de redirection de déconnexion de votre IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "E-mail",
+        "placeholder": "nom@entreprise.com",
+        "errors": {
+          "required": "L’e-mail est requis",
+          "invalid": "L’e-mail est invalide"
+        }
+      },
+      "password": {
+        "label": "Mot de passe",
+        "set_password": "Définir un mot de passe",
+        "placeholder": "Entrer le mot de passe",
+        "confirm_password": {
+          "label": "Confirmer le mot de passe",
+          "placeholder": "Confirmer le mot de passe"
+        },
+        "current_password": {
+          "label": "Mot de passe actuel"
+        },
+        "new_password": {
+          "label": "Nouveau mot de passe",
+          "placeholder": "Entrer le nouveau mot de passe"
+        },
+        "change_password": {
+          "label": {
+            "default": "Changer le mot de passe",
+            "submitting": "Changement du mot de passe"
+          }
+        },
+        "errors": {
+          "match": "Les mots de passe ne correspondent pas",
+          "empty": "Veuillez entrer votre mot de passe",
+          "length": "Le mot de passe doit contenir plus de 8 caractères",
+          "strength": {
+            "weak": "Le mot de passe est faible",
+            "strong": "Le mot de passe est fort"
+          }
+        },
+        "submit": "Définir le mot de passe",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Succès !",
+              "message": "Mot de passe changé avec succès."
+            },
+            "error": {
+              "title": "Erreur !",
+              "message": "Une erreur s'est produite. Veuillez réessayer."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Code unique",
+        "placeholder": "123456",
+        "paste_code": "Collez le code envoyé à votre e-mail",
+        "requesting_new_code": "Demande d’un nouveau code",
+        "sending_code": "Envoi du code"
+      },
+      "already_have_an_account": "Vous avez déjà un compte ?",
+      "login": "Se connecter",
+      "create_account": "Créer un compte",
+      "new_to_plane": "Nouveau sur Plane ?",
+      "back_to_sign_in": "Retour à la connexion",
+      "resend_in": "Renvoyer dans {seconds} secondes",
+      "sign_in_with_unique_code": "Se connecter avec un code unique",
+      "forgot_password": "Mot de passe oublié ?",
+      "username": {
+        "label": "Nom d'utilisateur",
+        "placeholder": "Entrez votre nom d'utilisateur"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Créez un compte pour commencer à gérer le travail avec votre équipe.",
+        "step": {
+          "email": {
+            "header": "S’inscrire",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "S’inscrire",
+            "sub_header": "Inscrivez-vous en utilisant une combinaison e-mail-mot de passe."
+          },
+          "unique_code": {
+            "header": "S’inscrire",
+            "sub_header": "Inscrivez-vous en utilisant un code unique envoyé à l’adresse e-mail ci-dessus."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Essayez de définir un mot de passe fort pour continuer"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Connectez-vous pour commencer à gérer le travail avec votre équipe.",
+        "step": {
+          "email": {
+            "header": "Se connecter ou s’inscrire",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Se connecter ou s’inscrire",
+            "sub_header": "Utilisez votre combinaison e-mail - mot de passe pour vous connecter."
+          },
+          "unique_code": {
+            "header": "Se connecter ou s’inscrire",
+            "sub_header": "Connectez-vous en utilisant un code unique envoyé à l’adresse e-mail ci-dessus."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Réinitialiser votre mot de passe",
+      "description": "Entrez l’adresse e-mail vérifiée de votre compte utilisateur et nous vous enverrons un lien de réinitialisation du mot de passe.",
+      "email_sent": "Nous avons envoyé le lien de réinitialisation à votre adresse e-mail",
+      "send_reset_link": "Envoyer le lien de réinitialisation",
+      "errors": {
+        "smtp_not_enabled": "Nous constatons que votre administrateur n’a pas activé le SMTP, nous ne pourrons pas envoyer de lien de réinitialisation du mot de passe"
+      },
+      "toast": {
+        "success": {
+          "title": "E-mail envoyé",
+          "message": "Consultez votre boîte de réception pour obtenir un lien de réinitialisation de votre mot de passe. S’il n’apparaît pas dans quelques minutes, vérifiez votre dossier spam."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Une erreur s’est produite. Veuillez réessayer."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Définir un nouveau mot de passe",
+      "description": "Sécurisez votre compte avec un mot de passe fort"
+    },
+    "set_password": {
+      "title": "Sécurisez votre compte",
+      "description": "La définition d’un mot de passe vous permet de vous connecter en toute sécurité"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de la déconnexion. Veuillez réessayer."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Continuer avec {ldapProviderName}",
+        "sub_header": "Entrez vos identifiants {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/automation.json b/packages/i18n/src/locales/fr/automation.json
new file mode 100644
index 0000000..5343f12
--- /dev/null
+++ b/packages/i18n/src/locales/fr/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Automatisations personnalisées",
+      "create_automation": "Créer une automatisation"
+    },
+    "scope": {
+      "label": "Portée",
+      "run_on": "Exécuter sur"
+    },
+    "trigger": {
+      "label": "Déclencheur",
+      "add_trigger": "Ajouter un déclencheur",
+      "sidebar_header": "Configuration du déclencheur",
+      "input_label": "Quel est le déclencheur pour cette automatisation ?",
+      "input_placeholder": "Sélectionnez une option",
+      "section_plane_events": "Événements Plane",
+      "section_time_based": "Basé sur le temps",
+      "fixed_schedule": "Horaire fixe",
+      "schedule": {
+        "frequency": "Fréquence",
+        "select_day": "Sélectionner un jour",
+        "day_of_month": "Jour du mois",
+        "monthly_every": "Chaque",
+        "monthly_day_aria": "Jour {day}",
+        "time": "Heure",
+        "hour": "Heure",
+        "minute": "Minute",
+        "hour_suffix": "h",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Fuseau horaire",
+        "timezone_placeholder": "Sélectionner un fuseau horaire",
+        "frequency_daily": "Quotidien",
+        "frequency_weekly": "Hebdomadaire",
+        "frequency_monthly": "Mensuel",
+        "on": "Le",
+        "validation_weekly_day_required": "Sélectionnez au moins un jour de la semaine.",
+        "validation_monthly_date_required": "Sélectionnez un jour du mois.",
+        "main_content_schedule_summary_daily": "Chaque jour à {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Chaque semaine le {days} à {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Chaque mois le {day} à {time} ({timezone}).",
+        "schedule_mode": "Mode de planification",
+        "schedule_mode_fixed": "Fixe",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Saisir une expression Cron",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Expression Cron invalide.",
+        "cron_preview": "Cette expression Cron exécute « {description} ».",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Retour",
+        "next": "Ajouter une action"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Vous ne pouvez pas modifier le type de déclencheur une fois qu’il a été créé"
+      }
+    },
+    "condition": {
+      "label": "À condition que",
+      "add_condition": "Ajouter une condition",
+      "adding_condition": "Ajout d'une condition"
+    },
+    "action": {
+      "label": "Action",
+      "add_action": "Ajouter une action",
+      "sidebar_header": "Actions",
+      "input_label": "Que fait l'automatisation ?",
+      "input_placeholder": "Sélectionnez une option",
+      "handler_name": {
+        "add_comment": "Ajouter un commentaire",
+        "change_property": "Modifier la propriété",
+        "run_script": "Exécuter un script"
+      },
+      "configuration": {
+        "label": "Configuration",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Sélectionnez une propriété",
+            "change_type": "Sélectionner",
+            "property_value_select": "{count, plural, one{Sélectionner une valeur} other{Sélectionner des valeurs}}",
+            "property_value_select_date": "Sélectionner une date"
+          },
+          "validation": {
+            "property_name_required": "Le nom de la propriété est requis",
+            "change_type_required": "Le type de changement est requis",
+            "property_value_required": "La valeur de la propriété est requise"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Ajouter un commentaire"
+      },
+      "run_script_block": {
+        "title": "Exécuter un script"
+      },
+      "change_property_block": {
+        "title": "Modifier la propriété"
+      },
+      "validation": {
+        "delete_only_action": "Désactivez l'automatisation avant de supprimer sa seule action."
+      }
+    },
+    "conjunctions": {
+      "and": "Et",
+      "or": "Ou",
+      "if": "Si",
+      "then": "Alors"
+    },
+    "enable": {
+      "alert": "Cliquez sur 'Activer' lorsque votre automatisation est terminée. Une fois activée, l'automatisation sera prête à s'exécuter.",
+      "validation": {
+        "required": "L'automatisation doit avoir un déclencheur et au moins une action pour être activée."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "L'automatisation doit être désactivée avant de la supprimer."
+      }
+    },
+    "table": {
+      "title": "Titre de l'automatisation",
+      "scope": "Portée",
+      "projects": "Projets",
+      "last_run_on": "Dernière exécution le",
+      "created_on": "Créé le",
+      "last_updated_on": "Dernière mise à jour le",
+      "last_run_status": "Statut de la dernière exécution",
+      "average_duration": "Durée moyenne",
+      "owner": "Propriétaire",
+      "executions": "Exécutions"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Créer une automatisation",
+        "update": "Mettre à jour l'automatisation"
+      },
+      "title": {
+        "placeholder": "Nommez votre automatisation.",
+        "required_error": "Le titre est requis"
+      },
+      "description": {
+        "placeholder": "Décrivez votre automatisation."
+      },
+      "submit_button": {
+        "create": "Créer l'automatisation",
+        "update": "Mettre à jour l'automatisation"
+      }
+    },
+    "delete_modal": {
+      "heading": "Supprimer l'automatisation"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Afficher les échecs",
+        "all": "Tout",
+        "only_activity": "Activité uniquement",
+        "only_run_history": "Historique d'exécution uniquement"
+      },
+      "run_history": {
+        "initiator": "Initiateur"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Succès !",
+          "message": "Automatisation créée avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de la création de l'automatisation."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Succès !",
+          "message": "Automatisation mise à jour avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de la mise à jour de l'automatisation."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Succès !",
+          "message": "Automatisation activée avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de l'activation de l'automatisation."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Succès !",
+          "message": "Automatisation désactivée avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de la désactivation de l'automatisation."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automatisation supprimée",
+          "message": "{name}, l'automatisation, a été supprimée de votre projet."
+        },
+        "error": {
+          "title": "Nous n'avons pas pu supprimer cette automatisation cette fois.",
+          "message": "Essayez de la supprimer à nouveau ou revenez plus tard. Si vous ne pouvez toujours pas la supprimer, contactez-nous."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Erreur !",
+            "message": "Échec de la création de l'action. Veuillez réessayer !"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Erreur !",
+            "message": "Échec de la mise à jour de l'action. Veuillez réessayer !"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Il n'y a pas encore d'automatisations à afficher.",
+        "description": "Les automatisations vous aident à éliminer les tâches répétitives en définissant des déclencheurs, des conditions et des actions. Créez-en une pour gagner du temps et maintenir le travail en mouvement sans effort."
+      },
+      "upgrade": {
+        "title": "Automatisations",
+        "description": "Les automatisations sont un moyen d'automatiser les tâches dans votre projet.",
+        "sub_description": "Récupérez 80% de votre temps administratif lorsque vous utilisez les Automatisations."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Sélectionnez les projets sur lesquels exécuter cette automatisation",
+        "all_projects": {
+          "label": "Tous les projets",
+          "description": "L’automatisation s’exécutera pour tous les projets de l’espace de travail."
+        },
+        "select_projects": {
+          "label": "Sélectionner des projets",
+          "description": "L’automatisation s’exécutera pour les projets sélectionnés dans l’espace de travail.",
+          "placeholder": "Sélectionner des projets"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automatisations",
+        "title": "Automatisations",
+        "description": "Standardisez les processus dans votre espace de travail grâce aux automatisations globales."
+      },
+      "table": {
+        "scope": {
+          "global": "Global",
+          "project": {
+            "label": "Projet",
+            "multiple": "Plusieurs",
+            "all": "Tous"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/common.json b/packages/i18n/src/locales/fr/common.json
new file mode 100644
index 0000000..a94ab8a
--- /dev/null
+++ b/packages/i18n/src/locales/fr/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Nous travaillons là-dessus. Si vous avez besoin d'aide immédiate,",
+    "reach_out_to_us": "contactez-nous",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Sinon, essayez de rafraîchir la page de temps en temps ou visitez notre",
+    "status_page": "page de statut"
+  },
+  "submit": "Valider",
+  "cancel": "Annuler",
+  "loading": "Chargement",
+  "error": "Erreur",
+  "success": "Succès",
+  "warning": "Avertissement",
+  "info": "Info",
+  "close": "Fermer",
+  "yes": "Oui",
+  "no": "Non",
+  "ok": "OK",
+  "name": "Nom",
+  "unknown_user": "Utilisateur inconnu",
+  "description": "Description",
+  "search": "Rechercher",
+  "add_member": "Ajouter un membre",
+  "adding_members": "Ajout de membres",
+  "remove_member": "Supprimer le membre",
+  "add_members": "Ajouter des membres",
+  "adding_member": "Ajout de membres",
+  "remove_members": "Supprimer des membres",
+  "add": "Ajouter",
+  "adding": "Ajout",
+  "remove": "Supprimer",
+  "add_new": "Ajouter nouveau",
+  "remove_selected": "Supprimer la sélection",
+  "first_name": "Prénom",
+  "last_name": "Nom",
+  "email": "E-mail",
+  "display_name": "Nom d'affichage",
+  "role": "Rôle",
+  "timezone": "Fuseau horaire",
+  "avatar": "Avatar",
+  "cover_image": "Image de couverture",
+  "password": "Mot de passe",
+  "change_cover": "Changer la couverture",
+  "language": "Langue",
+  "saving": "Enregistrement",
+  "save_changes": "Enregistrer les modifications",
+  "deactivate_account": "Désactiver le compte",
+  "deactivate_account_description": "Lors de la désactivation d'un compte, toutes les données et ressources de ce compte seront définitivement supprimées et ne pourront pas être récupérées.",
+  "profile_settings": "Paramètres du profil",
+  "your_account": "Votre compte",
+  "security": "Sécurité",
+  "activity": "Activité",
+  "activity_empty_state": {
+    "no_activity": "Aucune activité",
+    "no_transitions": "Aucune transition",
+    "no_comments": "Aucun commentaire pour l'instant",
+    "no_worklogs": "Aucun journal de travail pour l'instant",
+    "no_history": "Aucun historique pour l'instant"
+  },
+  "preferences": "Préférences",
+  "language_and_time": "Langue et heure",
+  "notifications": "Notifications",
+  "workspaces": "Espaces de travail",
+  "create_workspace": "Créer un espace de travail",
+  "invitations": "Invitations",
+  "summary": "Résumé",
+  "assigned": "Assigné",
+  "created": "Créé",
+  "subscribed": "Abonné",
+  "you_do_not_have_the_permission_to_access_this_page": "Vous n’avez pas la permission d’accéder à cette page.",
+  "something_went_wrong_please_try_again": "Une erreur s’est produite. Veuillez réessayer.",
+  "load_more": "Charger davantage",
+  "select_or_customize_your_interface_color_scheme": "Sélectionnez ou personnalisez votre palette de couleurs de l’interface.",
+  "timezone_setting": "Paramètre de fuseau horaire actuel.",
+  "language_setting": "Choisissez la langue utilisée dans l’interface utilisateur.",
+  "settings_moved_to_preferences": "Les paramètres de fuseau horaire et de langue ont été déplacés dans les préférences.",
+  "go_to_preferences": "Aller aux préférences",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Sélectionnez le style de mouvement du curseur qui vous convient le mieux.",
+  "theme": "Thème",
+  "smooth_cursor": "Curseur fluide",
+  "system_preference": "Préférence système",
+  "light": "Clair",
+  "dark": "Sombre",
+  "light_contrast": "Contraste élevé clair",
+  "dark_contrast": "Contraste élevé sombre",
+  "custom": "Thème personnalisé",
+  "select_your_theme": "Sélectionnez votre thème",
+  "customize_your_theme": "Personnalisez votre thème",
+  "background_color": "Couleur de fond",
+  "text_color": "Couleur du texte",
+  "primary_color": "Couleur principale (Thème)",
+  "sidebar_background_color": "Couleur de fond de la barre latérale",
+  "sidebar_text_color": "Couleur du texte de la barre latérale",
+  "set_theme": "Définir le thème",
+  "enter_a_valid_hex_code_of_6_characters": "Entrez un code hexadécimal valide de 6 caractères",
+  "background_color_is_required": "La couleur de fond est requise",
+  "text_color_is_required": "La couleur du texte est requise",
+  "primary_color_is_required": "La couleur principale est requise",
+  "sidebar_background_color_is_required": "La couleur de fond de la barre latérale est requise",
+  "sidebar_text_color_is_required": "La couleur du texte de la barre latérale est requise",
+  "updating_theme": "Mise à jour du thème",
+  "theme_updated_successfully": "Thème mis à jour avec succès",
+  "failed_to_update_the_theme": "Échec de la mise à jour du thème",
+  "email_notifications": "Notifications par e-mail",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Restez informé des éléments de travail auxquels vous êtes abonné. Activez ceci pour être notifié.",
+  "email_notification_setting_updated_successfully": "Paramètre de notification par e-mail mis à jour avec succès",
+  "failed_to_update_email_notification_setting": "Échec de la mise à jour du paramètre de notification par e-mail",
+  "notify_me_when": "Me notifier quand",
+  "property_changes": "Modifications des propriétés",
+  "property_changes_description": "Me notifier lorsque les propriétés des éléments de travail comme les acteurs, la priorité, les estimations ou autre changent.",
+  "state_change": "Changement d’état",
+  "state_change_description": "Me notifier lorsque les éléments de travail passent à un état différent",
+  "issue_completed": "Élément de travail terminé",
+  "issue_completed_description": "Me notifier uniquement lorsqu’un élément de travail est terminé",
+  "comments": "Commentaires",
+  "comments_description": "Me notifier lorsque quelqu’un laisse un commentaire sur l’élément de travail",
+  "mentions": "Mentions",
+  "mentions_description": "Me notifier uniquement lorsque quelqu’un me mentionne dans les commentaires ou la description",
+  "old_password": "Ancien mot de passe",
+  "general_settings": "Paramètres généraux",
+  "sign_out": "Se déconnecter",
+  "signing_out": "Déconnexion",
+  "active_cycles": "Cycles actifs",
+  "active_cycles_description": "Surveillez les cycles à travers les projets, suivez les éléments de travail prioritaires et zoomez sur les cycles qui nécessitent votre attention.",
+  "on_demand_snapshots_of_all_your_cycles": "Instantanés à la demande de tous vos cycles",
+  "upgrade": "Mettre à niveau",
+  "10000_feet_view": "Vue à 10 000 pieds de tous les cycles actifs.",
+  "10000_feet_view_description": "Dézoomez pour voir les cycles en cours dans tous vos projets en même temps au lieu de passer d’un cycle à l’autre dans chaque projet.",
+  "get_snapshot_of_each_active_cycle": "Obtenez un aperçu de chaque cycle actif.",
+  "get_snapshot_of_each_active_cycle_description": "Suivez les métriques de haut niveau pour tous les cycles actifs, suivez leur état d’avancement et évaluez leur impact par rapport aux échéances.",
+  "compare_burndowns": "Comparez les burndowns.",
+  "compare_burndowns_description": "Surveillez les performances de chacune de vos équipes en jetant un coup d’œil au rapport burndown de chaque cycle.",
+  "quickly_see_make_or_break_issues": "Repérez rapidement les éléments de travail critiques.",
+  "quickly_see_make_or_break_issues_description": "Prévisualisez les éléments de travail hautement prioritaires pour chaque cycle par rapport aux dates d’échéance. Visualisez-les pour chaque cycle en un clic.",
+  "zoom_into_cycles_that_need_attention": "Zoomez sur les cycles qui nécessitent votre attention.",
+  "zoom_into_cycles_that_need_attention_description": "Examinez l’état de tout cycle qui ne corresponde pas aux attentes en un clic.",
+  "stay_ahead_of_blockers": "Anticipez les blocages.",
+  "stay_ahead_of_blockers_description": "Repérez les défis d’un projet à l’autre et repérez les dépendances inter-cycles qui ne sont pas évidentes depuis une autre vue.",
+  "analytics": "Analyses",
+  "workspace_invites": "Invitations à l’espace de travail",
+  "enter_god_mode": "Entrer en mode dieu",
+  "workspace_logo": "Logo de l’espace de travail",
+  "new_issue": "Nouvel élément de travail",
+  "your_work": "Votre travail",
+  "drafts": "Brouillons",
+  "projects": "Projets",
+  "views": "Vues",
+  "archives": "Archives",
+  "settings": "Paramètres",
+  "failed_to_move_favorite": "Échec du déplacement du favori",
+  "favorites": "Favoris",
+  "no_favorites_yet": "Pas encore de favoris",
+  "create_folder": "Créer un dossier",
+  "new_folder": "Nouveau dossier",
+  "favorite_updated_successfully": "Favori mis à jour avec succès",
+  "favorite_created_successfully": "Favori créé avec succès",
+  "folder_already_exists": "Le dossier existe déjà",
+  "folder_name_cannot_be_empty": "Le nom du dossier ne peut pas être vide",
+  "something_went_wrong": "Une erreur s’est produite",
+  "failed_to_reorder_favorite": "Échec de la réorganisation du favori",
+  "favorite_removed_successfully": "Favori supprimé avec succès",
+  "failed_to_create_favorite": "Échec de la création du favori",
+  "failed_to_rename_favorite": "Échec du renommage du favori",
+  "project_link_copied_to_clipboard": "Lien du projet copié dans le presse-papiers",
+  "link_copied": "Lien copié",
+  "add_project": "Ajouter un projet",
+  "create_project": "Créer un projet",
+  "failed_to_remove_project_from_favorites": "Impossible de supprimer le projet des favoris. Veuillez réessayer.",
+  "project_created_successfully": "Projet créé avec succès",
+  "project_created_successfully_description": "Projet créé avec succès. Vous pouvez maintenant commencer à ajouter des éléments de travail.",
+  "project_name_already_taken": "Le nom du projet est déjà pris.",
+  "project_name_cannot_contain_special_characters": "Le nom du projet ne peut pas contenir de caractères spéciaux.",
+  "project_identifier_already_taken": "L’identifiant du projet est déjà pris.",
+  "project_cover_image_alt": "Image de couverture du projet",
+  "name_is_required": "Le nom est requis",
+  "title_should_be_less_than_255_characters": "Le titre doit faire moins de 255 caractères",
+  "project_name": "Nom du projet",
+  "project_id_must_be_at_least_1_character": "L’ID du projet doit comporter au moins 1 caractère",
+  "project_id_must_be_at_most_5_characters": "L’ID du projet doit comporter au plus 5 caractères",
+  "project_id": "ID du projet",
+  "project_id_tooltip_content": "Vous aide à identifier de manière unique les éléments de travail dans le projet. Maximum 50 caractères.",
+  "description_placeholder": "Description",
+  "only_alphanumeric_non_latin_characters_allowed": "Seuls les caractères alphanumériques et non latins sont autorisés.",
+  "project_id_is_required": "L’ID du projet est requis",
+  "project_id_allowed_char": "Seuls les caractères alphanumériques et non latins sont autorisés.",
+  "project_id_min_char": "L’ID du projet doit comporter au moins 1 caractère",
+  "project_id_max_char": "L'ID du projet doit comporter au plus {max} caractères",
+  "project_description_placeholder": "Entrez la description du projet",
+  "select_network": "Sélectionner le réseau",
+  "lead": "Responsable",
+  "date_range": "Plage de dates",
+  "private": "Privé",
+  "public": "Public",
+  "accessible_only_by_invite": "Accessible uniquement sur invitation",
+  "anyone_in_the_workspace_except_guests_can_join": "Tout le monde dans l’espace de travail peut rejoindre, sauf les invités",
+  "creating": "Création",
+  "creating_project": "Création du projet",
+  "adding_project_to_favorites": "Ajout du projet aux favoris",
+  "project_added_to_favorites": "Projet ajouté aux favoris",
+  "couldnt_add_the_project_to_favorites": "Impossible d’ajouter le projet aux favoris. Veuillez réessayer.",
+  "removing_project_from_favorites": "Suppression du projet des favoris",
+  "project_removed_from_favorites": "Projet supprimé des favoris",
+  "couldnt_remove_the_project_from_favorites": "Impossible de supprimer le projet des favoris. Veuillez réessayer.",
+  "add_to_favorites": "Ajouter aux favoris",
+  "remove_from_favorites": "Supprimer des favoris",
+  "publish_project": "Publier le projet",
+  "publish": "Publier",
+  "copy_link": "Copier le lien",
+  "leave_project": "Quitter le projet",
+  "join_the_project_to_rearrange": "Rejoignez le projet pour réorganiser",
+  "drag_to_rearrange": "Glisser pour réorganiser",
+  "congrats": "Félicitations !",
+  "open_project": "Ouvrir le projet",
+  "issues": "Éléments de travail",
+  "cycles": "Cycles",
+  "modules": "Modules",
+  "pages": "Pages",
+  "intake": "Intake",
+  "renew": "Renouveler",
+  "preview": "Aperçu",
+  "time_tracking": "Suivi du temps",
+  "work_management": "Organisation du travail",
+  "projects_and_issues": "Projets et éléments de travail",
+  "projects_and_issues_description": "Activez ou désactivez ces éléments pour ce projet.",
+  "cycles_description": "Définissez un cadre temporel pour chaque projet et ajustez la durée selon les besoins. Un cycle peut durer deux semaines, le suivant une semaine.",
+  "modules_description": "Organisez le travail en sous-projets avec des responsables et des acteurs spécifiques.",
+  "views_description": "Enregistrez des tris, filtres et options d’affichage personnalisés ou partagez-les avec votre équipe.",
+  "pages_description": "Créez et modifiez du contenu libre : notes, documents, tout ce que vous voulez.",
+  "intake_description": "Permettez aux non-membres de partager des bugs, des retours et des suggestions, sans perturber votre flux de travail.",
+  "time_tracking_description": "Enregistrez le temps passé sur les éléments de travail et les projets.",
+  "work_management_description": "Gérez votre travail et vos projets facilement.",
+  "documentation": "Documentation",
+  "message_support": "Contacter le support",
+  "contact_sales": "Contacter les ventes",
+  "hyper_mode": "Mode Hyper",
+  "keyboard_shortcuts": "Raccourcis clavier",
+  "whats_new": "Quoi de neuf ?",
+  "version": "Version",
+  "we_are_having_trouble_fetching_the_updates": "Nous avons des difficultés à récupérer les mises à jour.",
+  "our_changelogs": "nos journaux des modifications",
+  "for_the_latest_updates": "pour les dernières mises à jour.",
+  "please_visit": "Veuillez visiter",
+  "docs": "Documentation",
+  "full_changelog": "Journal des modifications complet",
+  "support": "Support",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Propulsé par Plane Pages",
+  "please_select_at_least_one_invitation": "Veuillez sélectionner au moins une invitation.",
+  "please_select_at_least_one_invitation_description": "Veuillez sélectionner au moins une invitation pour rejoindre l’espace de travail.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Nous voyons que quelqu’un vous a invité à rejoindre un espace de travail",
+  "join_a_workspace": "Rejoindre un espace de travail",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Nous voyons que quelqu’un vous a invité à rejoindre un espace de travail",
+  "join_a_workspace_description": "Rejoindre un espace de travail",
+  "accept_and_join": "Accepter et rejoindre",
+  "go_home": "Aller à l’accueil",
+  "no_pending_invites": "Aucune invitation en attente",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Vous pouvez voir ici si quelqu’un vous invite à un espace de travail",
+  "back_to_home": "Retour à l’accueil",
+  "workspace_name": "nom-espace-de-travail",
+  "deactivate_your_account": "Désactiver votre compte",
+  "deactivate_your_account_description": "Une fois votre compte désactivé, vous ne pourrez plus être associé à des éléments de travail ni être facturé pour votre espace de travail. Pour réactiver votre compte, vous aurez besoin d'une invitation à un espace de travail avec cette adresse e-mail.",
+  "deactivating": "Désactivation",
+  "confirm": "Confirmer",
+  "confirming": "Confirmation",
+  "draft_created": "Brouillon créé",
+  "issue_created_successfully": "Élément de travail créé avec succès",
+  "draft_creation_failed": "Échec de la création du brouillon",
+  "issue_creation_failed": "Échec de la création de l’élément de travail",
+  "draft_issue": "Élément de travail en brouillon",
+  "issue_updated_successfully": "Élément de travail mis à jour avec succès",
+  "issue_could_not_be_updated": "L’élément de travail n’a pas pu être mis à jour",
+  "create_a_draft": "Créer un brouillon",
+  "save_to_drafts": "Enregistrer dans les brouillons",
+  "save": "Enregistrer",
+  "update": "Mettre à jour",
+  "updating": "Mise à jour",
+  "create_new_issue": "Créer un nouvel élément de travail",
+  "editor_is_not_ready_to_discard_changes": "L’éditeur n’est pas prêt à annuler les modifications",
+  "failed_to_move_issue_to_project": "Échec du déplacement de l’élément de travail vers le projet",
+  "create_more": "Créer plus",
+  "add_to_project": "Ajouter au projet",
+  "discard": "Annuler",
+  "duplicate_issue_found": "Élément de travail en double trouvé",
+  "duplicate_issues_found": "Éléments de travail en double trouvés",
+  "no_matching_results": "Aucun résultat correspondant",
+  "title_is_required": "Le titre est requis",
+  "title": "Titre",
+  "state": "État",
+  "transition": "Transition",
+  "history": "Historique",
+  "priority": "Priorité",
+  "none": "Aucun",
+  "urgent": "Urgent",
+  "high": "Élevé",
+  "medium": "Moyen",
+  "low": "Faible",
+  "members": "Membres",
+  "assignee": "Acteur",
+  "assignees": "Acteurs",
+  "subscriber": "{count, plural, one{# Abonné} other{# Abonnés}}",
+  "you": "Vous",
+  "labels": "Étiquettes",
+  "create_new_label": "Créer une nouvelle étiquette",
+  "label_name": "Nom de l'étiquette",
+  "failed_to_create_label": "Échec de la création de l'étiquette. Veuillez réessayer.",
+  "start_date": "Date de début",
+  "end_date": "Date de fin",
+  "due_date": "Date d’échéance",
+  "target_date": "Date cible",
+  "estimate": "Estimation",
+  "change_parent_issue": "Changer l’élément de travail parent",
+  "remove_parent_issue": "Supprimer l’élément de travail parent",
+  "add_parent": "Ajouter un parent",
+  "loading_members": "Chargement des membres",
+  "view_link_copied_to_clipboard": "Lien de la vue copié dans le presse-papiers.",
+  "required": "Requis",
+  "optional": "Optionnel",
+  "Cancel": "Annuler",
+  "edit": "Modifier",
+  "archive": "Archiver",
+  "restore": "Restaurer",
+  "open_in_new_tab": "Ouvrir dans un nouvel onglet",
+  "delete": "Supprimer",
+  "deleting": "Suppression",
+  "make_a_copy": "Faire une copie",
+  "move_to_project": "Déplacer vers le projet",
+  "good": "Bonjour",
+  "morning": "matin",
+  "afternoon": "après-midi",
+  "evening": "soir",
+  "show_all": "Tout afficher",
+  "show_less": "Afficher moins",
+  "no_data_yet": "Pas encore de données",
+  "syncing": "Synchronisation",
+  "add_work_item": "Ajouter un élément de travail",
+  "advanced_description_placeholder": "Appuyez sur '/' pour voir les commandes",
+  "create_work_item": "Créer un élément de travail",
+  "attachments": "Pièces jointes",
+  "declining": "Refus",
+  "declined": "Refusé",
+  "decline": "Refuser",
+  "unassigned": "Non attribué",
+  "work_items": "Éléments de travail",
+  "add_link": "Ajouter un lien",
+  "points": "Points",
+  "no_assignee": "Pas d’acteurs associés",
+  "no_assignees_yet": "Pas encore d’acteurs associés",
+  "no_labels_yet": "Pas encore d’étiquettes",
+  "ideal": "Idéal",
+  "current": "Actuel",
+  "no_matching_members": "Aucun membre correspondant",
+  "leaving": "Départ",
+  "removing": "Suppression",
+  "leave": "Quitter",
+  "refresh": "Actualiser",
+  "refreshing": "Actualisation",
+  "refresh_status": "Actualiser l’état",
+  "prev": "Précédent",
+  "next": "Suivant",
+  "re_generating": "Régénération",
+  "re_generate": "Régénérer",
+  "re_generate_key": "Régénérer la clé",
+  "export": "Exporter",
+  "member": "{count, plural, one{# membre} other{# membres}}",
+  "new_password_must_be_different_from_old_password": "Le nouveau mot de passe doit être différent du mot de passe précédent",
+  "edited": "Modifié",
+  "bot": "Bot",
+  "settings_description": "Gérez les préférences de votre compte, de votre espace de travail et de vos projets au même endroit. Changez d’onglet pour configurer facilement.",
+  "back_to_workspace": "Retour à l’espace de travail",
+  "upgrade_request": "Demandez à l'administrateur de l'espace de travail de mettre à niveau.",
+  "copied_to_clipboard": "Copié dans le presse-papiers",
+  "copied_to_clipboard_description": "L'URL a été copiée avec succès dans votre presse-papiers",
+  "toast": {
+    "success": "Succès !",
+    "error": "Erreur !"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Lien créé",
+        "message": "Le lien a été créé avec succès"
+      },
+      "not_created": {
+        "title": "Lien non créé",
+        "message": "Le lien n’a pas pu être créé"
+      },
+      "updated": {
+        "title": "Lien mis à jour",
+        "message": "Le lien a été mis à jour avec succès"
+      },
+      "not_updated": {
+        "title": "Lien non mis à jour",
+        "message": "Le lien n’a pas pu être mis à jour"
+      },
+      "removed": {
+        "title": "Lien supprimé",
+        "message": "Le lien a été supprimé avec succès"
+      },
+      "not_removed": {
+        "title": "Lien non supprimé",
+        "message": "Le lien n’a pas pu être supprimé"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "L’URL n’est pas valide",
+        "placeholder": "Tapez ou collez une URL"
+      },
+      "title": {
+        "text": "Titre d’affichage",
+        "placeholder": "Comment ce lien sera présenté"
+      }
+    }
+  },
+  "common": {
+    "all": "Tout",
+    "no_items_in_this_group": "Aucun élément dans ce groupe",
+    "drop_here_to_move": "Déposer ici pour déplacer",
+    "states": "États",
+    "state": "État",
+    "state_groups": "Groupes d’états",
+    "state_group": "Groupe d’état",
+    "priorities": "Priorités",
+    "priority": "Priorité",
+    "team_project": "Projet d’équipe",
+    "project": "Projet",
+    "cycle": "Cycle",
+    "cycles": "Cycles",
+    "module": "Module",
+    "modules": "Modules",
+    "labels": "Étiquettes",
+    "label": "Étiquette",
+    "admins": "Administrateurs",
+    "users": "Utilisateurs",
+    "guests": "Invités",
+    "assignees": "Acteurs",
+    "assignee": "Acteur",
+    "created_by": "Créé par",
+    "none": "Aucun",
+    "link": "Lien",
+    "estimates": "Estimations",
+    "estimate": "Estimation",
+    "created_at": "Créé le",
+    "updated_at": "Mis à jour le",
+    "completed_at": "Terminé le",
+    "layout": "Disposition",
+    "filters": "Filtres",
+    "display": "Affichage",
+    "load_more": "Charger plus",
+    "activity": "Activité",
+    "analytics": "Analyses",
+    "dates": "Dates",
+    "success": "Succès !",
+    "something_went_wrong": "Quelque chose s’est mal passé",
+    "error": {
+      "label": "Erreur !",
+      "message": "Une erreur s’est produite. Veuillez réessayer."
+    },
+    "group_by": "Grouper par",
+    "epic": "Epic",
+    "epics": "Epics",
+    "work_item": "Élément de travail",
+    "work_items": "Éléments de travail",
+    "sub_work_item": "Sous-élément de travail",
+    "views": "Vues",
+    "pages": "Pages",
+    "add": "Ajouter",
+    "warning": "Avertissement",
+    "updating": "Mise à jour",
+    "adding": "Ajout",
+    "update": "Mettre à jour",
+    "creating": "Création",
+    "create": "Créer",
+    "cancel": "Annuler",
+    "description": "Description",
+    "title": "Titre",
+    "attachment": "Pièce jointe",
+    "general": "Général",
+    "features": "Fonctionnalités",
+    "automation": "Automatisation",
+    "project_name": "Nom du projet",
+    "project_id": "ID du projet",
+    "project_timezone": "Fuseau horaire du projet",
+    "created_on": "Créé le",
+    "updated_on": "Mis à jour le",
+    "completed_on": "Completed on",
+    "update_project": "Mettre à jour le projet",
+    "identifier_already_exists": "L’identifiant existe déjà",
+    "add_more": "Ajouter plus",
+    "defaults": "Par défaut",
+    "add_label": "Ajouter une étiquette",
+    "customize_time_range": "Personnaliser la plage de temps",
+    "loading": "Chargement",
+    "attachments": "Pièces jointes",
+    "property": "Propriété",
+    "properties": "Propriétés",
+    "parent": "Parent",
+    "page": "Pâge",
+    "remove": "Supprimer",
+    "archiving": "Archivage",
+    "archive": "Archiver",
+    "access": {
+      "public": "Public",
+      "private": "Privé"
+    },
+    "done": "Terminé",
+    "sub_work_items": "Sous-éléments de travail",
+    "comment": "Commentaire",
+    "workspace_level": "Niveau espace de travail",
+    "order_by": {
+      "label": "Trier par",
+      "manual": "Manuel - Classement",
+      "last_created": "Dernier créé",
+      "last_updated": "Dernière mise à jour",
+      "start_date": "Date de début",
+      "due_date": "Date d’échéance",
+      "asc": "Croissant",
+      "desc": "Décroissant",
+      "updated_on": "Mis à jour le"
+    },
+    "sort": {
+      "asc": "Croissant",
+      "desc": "Décroissant",
+      "created_on": "Créé le",
+      "updated_on": "Mis à jour le"
+    },
+    "comments": "Commentaires",
+    "updates": "Mises à jour",
+    "additional_updates": "Mises à jour supplémentaires",
+    "clear_all": "Tout effacer",
+    "copied": "Copié !",
+    "link_copied": "Lien copié !",
+    "link_copied_to_clipboard": "Lien copié dans le presse-papiers",
+    "copied_to_clipboard": "Lien de l’élément de travail copié dans le presse-papiers",
+    "branch_name_copied_to_clipboard": "Nom de la branche copié dans le presse-papiers",
+    "is_copied_to_clipboard": "L’élément de travail est copié dans le presse-papiers",
+    "no_links_added_yet": "Aucun lien ajouté pour l’instant",
+    "add_link": "Ajouter un lien",
+    "links": "Liens",
+    "go_to_workspace": "Aller à l’espace de travail",
+    "progress": "Progression",
+    "optional": "Optionnel",
+    "join": "Rejoindre",
+    "go_back": "Retour",
+    "continue": "Continuer",
+    "resend": "Renvoyer",
+    "relations": "Relations",
+    "dependencies": "Dépendances",
+    "errors": {
+      "default": {
+        "title": "Erreur !",
+        "message": "Quelque chose s’est mal passé. Veuillez réessayer."
+      },
+      "required": "Ce champ est obligatoire",
+      "entity_required": "{entity} est requis",
+      "restricted_entity": "{entity} est restreint"
+    },
+    "update_link": "Mettre à jour le lien",
+    "attach": "Joindre",
+    "create_new": "Créer nouveau",
+    "add_existing": "Ajouter existant",
+    "type_or_paste_a_url": "Tapez ou collez une URL",
+    "url_is_invalid": "L’URL n’est pas valide",
+    "display_title": "Titre d’affichage",
+    "link_title_placeholder": "Comment ce lien sera présenté",
+    "url": "URL",
+    "side_peek": "Aperçu latéral",
+    "modal": "Modal",
+    "full_screen": "Plein écran",
+    "close_peek_view": "Fermer l’aperçu",
+    "toggle_peek_view_layout": "Basculer la disposition de l’aperçu",
+    "options": "Options",
+    "duration": "Durée",
+    "today": "Aujourd’hui",
+    "week": "Semaine",
+    "month": "Mois",
+    "quarter": "Trimestre",
+    "press_for_commands": "Appuyez sur '/' pour les commandes",
+    "click_to_add_description": "Cliquez pour ajouter une description",
+    "on_track": "Sur la bonne voie",
+    "off_track": "Hors de la bonne voie",
+    "at_risk": "À risque",
+    "timeline": "Chronologie",
+    "completion": "Achèvement",
+    "upcoming": "À venir",
+    "completed": "Terminé",
+    "in_progress": "En cours",
+    "planned": "Planifié",
+    "paused": "En pause",
+    "search": {
+      "label": "Rechercher",
+      "placeholder": "Tapez pour rechercher",
+      "no_matches_found": "Aucune correspondance trouvée",
+      "no_matching_results": "Aucun résultat correspondant",
+      "min_chars": "Saisissez au moins {count} caractères pour rechercher",
+      "error": "Erreur lors de la récupération des résultats de recherche",
+      "no_results": {
+        "title": "Aucun résultat correspondant",
+        "description": "Supprimez les critères de recherche pour voir tous les résultats"
+      }
+    },
+    "actions": {
+      "edit": "Modifier",
+      "make_a_copy": "Faire une copie",
+      "open_in_new_tab": "Ouvrir dans un nouvel onglet",
+      "copy_link": "Copier le lien",
+      "copy_branch_name": "Copier le nom de la branche",
+      "archive": "Archiver",
+      "restore": "Restaurer",
+      "delete": "Supprimer",
+      "remove_relation": "Supprimer la relation",
+      "subscribe": "S’abonner",
+      "unsubscribe": "Se désabonner",
+      "clear_sorting": "Effacer le tri",
+      "show_weekends": "Afficher les week-ends",
+      "enable": "Activer",
+      "disable": "Désactiver",
+      "copy_markdown": "Copier le markdown",
+      "reply": "Répondre"
+    },
+    "name": "Nom",
+    "discard": "Abandonner",
+    "confirm": "Confirmer",
+    "confirming": "Confirmation",
+    "read_the_docs": "Lire la documentation",
+    "default": "Par défaut",
+    "active": "Actif",
+    "enabled": "Activé",
+    "disabled": "Désactivé",
+    "mandate": "Mandat",
+    "mandatory": "Obligatoire",
+    "global": "Global",
+    "yes": "Oui",
+    "no": "Non",
+    "please_wait": "Veuillez patienter",
+    "enabling": "Activation",
+    "disabling": "Désactivation",
+    "beta": "Bêta",
+    "or": "ou",
+    "next": "Suivant",
+    "back": "Retour",
+    "retry": "Réessayer",
+    "cancelling": "Annulation",
+    "configuring": "Configuration",
+    "clear": "Effacer",
+    "import": "Importer",
+    "connect": "Connecter",
+    "authorizing": "Autorisation",
+    "processing": "Traitement",
+    "no_data_available": "Aucune donnée disponible",
+    "from": "de {name}",
+    "authenticated": "Authentifié",
+    "select": "Sélectionner",
+    "upgrade": "Mettre à niveau",
+    "add_seats": "Ajouter des sièges",
+    "projects": "Projets",
+    "workspace": "Espace de travail",
+    "workspaces": "Espaces de travail",
+    "team": "Équipe",
+    "teams": "Équipes",
+    "entity": "Entité",
+    "entities": "Entités",
+    "task": "Tâche",
+    "tasks": "Tâches",
+    "section": "Section",
+    "sections": "Sections",
+    "edit": "Modifier",
+    "connecting": "Connexion",
+    "connected": "Connecté",
+    "disconnect": "Déconnecter",
+    "disconnecting": "Déconnexion",
+    "installing": "Installation",
+    "install": "Installer",
+    "reset": "Réinitialiser",
+    "live": "En direct",
+    "change_history": "Historique des modifications",
+    "coming_soon": "À venir",
+    "member": "Membre",
+    "members": "Membres",
+    "you": "Vous",
+    "upgrade_cta": {
+      "higher_subscription": "Passer à un abonnement plus élevé",
+      "talk_to_sales": "Contacter le service commercial"
+    },
+    "category": "Catégorie",
+    "categories": "Catégories",
+    "saving": "Enregistrement",
+    "save_changes": "Enregistrer les modifications",
+    "delete": "Supprimer",
+    "deleting": "Suppression",
+    "pending": "En attente",
+    "invite": "Inviter",
+    "view": "Afficher",
+    "deactivated_user": "Utilisateur désactivé",
+    "apply": "Appliquer",
+    "applying": "Application",
+    "overview": "Vue d'ensemble",
+    "no_of": "Nº de {entity}",
+    "resolved": "Résolu",
+    "get_started": "Commencer",
+    "worklogs": "Journaux de travail",
+    "project_updates": "Mises à jour du projet",
+    "workflows": "Flux de travail",
+    "templates": "Modèles",
+    "business": "Business",
+    "members_and_teamspaces": "Membres et espaces de travail",
+    "recurring_work_items": "Éléments de travail récurrents",
+    "milestones": "Jalons",
+    "open_in_full_screen": "Ouvrir {page} en plein écran",
+    "details": "Détails",
+    "project_structure": "Structure du projet",
+    "custom_properties": "Propriétés personnalisées",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Axe X",
+    "y_axis": "Axe Y",
+    "metric": "Métrique"
+  },
+  "form": {
+    "title": {
+      "required": "Le titre est requis",
+      "max_length": "Le titre doit contenir moins de {length} caractères"
+    }
+  },
+  "entity": {
+    "grouping_title": "Regroupement {entity}",
+    "priority": "Priorité {entity}",
+    "all": "Tous les {entity}",
+    "drop_here_to_move": "Déposez ici pour déplacer le {entity}",
+    "delete": {
+      "label": "Supprimer {entity}",
+      "success": "{entity} supprimé avec succès",
+      "failed": "Échec de la suppression de {entity}"
+    },
+    "update": {
+      "failed": "Échec de la mise à jour de {entity}",
+      "success": "{entity} mis à jour avec succès"
+    },
+    "link_copied_to_clipboard": "Lien {entity} copié dans le presse-papiers",
+    "fetch": {
+      "failed": "Erreur lors de la récupération de {entity}"
+    },
+    "add": {
+      "success": "{entity} ajouté avec succès",
+      "failed": "Erreur lors de l’ajout de {entity}"
+    },
+    "remove": {
+      "success": "{entity} supprimé avec succès",
+      "failed": "Erreur lors de la suppression de {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Le fichier n’a pas pu être joint. Essayez de le télécharger à nouveau.",
+    "only_one_file_allowed": "Un seul fichier peut être téléchargé à la fois.",
+    "file_size_limit": "Le fichier doit faire {size}MB ou moins.",
+    "drag_and_drop": "Glissez-déposez n’importe où pour uploader",
+    "delete": "Supprimer la pièce jointe"
+  },
+  "label": {
+    "select": "Sélectionner une étiquette",
+    "create": {
+      "success": "Étiquette créée avec succès",
+      "failed": "Échec de la création de l’étiquette",
+      "already_exists": "L’étiquette existe déjà",
+      "type": "Tapez pour ajouter une nouvelle étiquette"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Vue} other {Vues}}",
+    "create": {
+      "label": "Créer une vue"
+    },
+    "update": {
+      "label": "Mettre à jour la vue"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Invité",
+      "description": "Les membres externes des organisations peuvent être invités en tant qu’invités."
+    },
+    "member": {
+      "title": "Membre",
+      "description": "Capacité à lire, écrire, modifier et supprimer des entités dans les projets, cycles et modules"
+    },
+    "admin": {
+      "title": "Administrateur",
+      "description": "Toutes les permissions sont activées dans l’espace de travail."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Chef de produit / Chef de projet",
+    "development_or_engineering": "Développement / Ingénierie",
+    "founder_or_executive": "Fondateur / Dirigeant",
+    "freelancer_or_consultant": "Freelance / Consultant",
+    "marketing_or_growth": "Marketing / Croissance",
+    "sales_or_business_development": "Ventes / Développement commercial",
+    "support_or_operations": "Support / Opérations",
+    "student_or_professor": "Étudiant / Professeur",
+    "human_resources": "Ressources Humaines",
+    "other": "Autre"
+  },
+  "default_global_view": {
+    "all_issues": "Tous les éléments de travail",
+    "assigned": "Assignés",
+    "created": "Créés",
+    "subscribed": "Suivis"
+  },
+  "description_versions": {
+    "last_edited_by": "Dernière modification par",
+    "previously_edited_by": "Précédemment modifié par",
+    "edited_by": "Modifié par"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane n’a pas démarré. Cela pourrait être dû au fait qu’un ou plusieurs services Plane ont échoué à démarrer.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Choisissez View Logs depuis setup.sh et les logs Docker pour en être sûr."
+  },
+  "customize_navigation": "Personnaliser la navigation",
+  "personal": "Personnel",
+  "accordion_navigation_control": "Navigation latérale en accordéon",
+  "horizontal_navigation_bar": "Navigation par onglets",
+  "show_limited_projects_on_sidebar": "Afficher un nombre limité de projets dans la barre latérale",
+  "enter_number_of_projects": "Entrez le nombre de projets",
+  "pin": "Épingler",
+  "unpin": "Désépingler",
+  "workspace_dashboards": "Tableaux de bord",
+  "pi_chat": "Plane AI",
+  "in_app": "Dans l'application",
+  "forms": "Formulaires",
+  "milestones": "Jalons",
+  "milestones_description": "Les jalons offrent une couche permettant d’aligner les éléments de travail sur des dates d’achèvement partagées.",
+  "file_upload": {
+    "upload_text": "Cliquez ici pour télécharger le fichier",
+    "drag_drop_text": "Glisser-déposer",
+    "processing": "Traitement",
+    "invalid_file_type": "Type de fichier invalide",
+    "missing_fields": "Champs manquants",
+    "success": "{fileName} téléchargé !"
+  },
+  "date": "Date",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Exportez les éléments de travail vers un fichier CSV.",
+      "short_description": "Exporter en csv"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Exportez les éléments de travail vers un fichier Excel.",
+      "short_description": "Exporter en excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Exportez les éléments de travail vers un fichier Excel.",
+      "short_description": "Exporter en excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Exportez les éléments de travail vers un fichier JSON.",
+      "short_description": "Exporter en json"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/cycle.json b/packages/i18n/src/locales/fr/cycle.json
new file mode 100644
index 0000000..3745c78
--- /dev/null
+++ b/packages/i18n/src/locales/fr/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Ajoutez des éléments de travail au cycle pour voir sa progression"
+      },
+      "chart": {
+        "title": "Ajoutez des éléments de travail au cycle pour voir le graphique d’avancement."
+      },
+      "priority_issue": {
+        "title": "Visualisez en un coup d’œil les éléments de travail prioritaires traités dans le cycle."
+      },
+      "assignee": {
+        "title": "Ajoutez des acteurs aux éléments de travail pour voir une répartition du travail par acteur."
+      },
+      "label": {
+        "title": "Ajoutez des étiquettes aux éléments de travail pour voir la répartition du travail par étiquette."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Cycle} other {Cycles}}",
+    "no_cycle": "Pas de cycle"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Ajoutez des éléments de travail au Cycle pour voir sa\n progression"
+      },
+      "priority": {
+        "title": "Observez les éléments de travail hautement prioritaires traités dans\n le Cycle en un coup d'œil."
+      },
+      "assignee": {
+        "title": "Ajoutez des assignés aux éléments de travail pour voir une\n répartition du travail par assigné."
+      },
+      "label": {
+        "title": "Ajoutez des étiquettes aux éléments de travail pour voir la\n répartition du travail par étiquettes."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/editor.json b/packages/i18n/src/locales/fr/editor.json
new file mode 100644
index 0000000..633f0eb
--- /dev/null
+++ b/packages/i18n/src/locales/fr/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Glissez-déposez pour télécharger des fichiers externes"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Fichier trop volumineux.",
+        "description": "La taille maximale par fichier est de {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Type de fichier non pris en charge.",
+        "description": "Voir les formats pris en charge"
+      },
+      "default": {
+        "title": "Échec du téléchargement.",
+        "description": "Quelque chose s'est mal passé. Veuillez réessayer."
+      }
+    },
+    "upgrade": {
+      "description": "Mettez à niveau votre plan pour voir cette pièce jointe."
+    },
+    "aria": {
+      "click_to_upload": "Cliquez pour télécharger la pièce jointe"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Convertir en intégration",
+      "convert_to_link": "Convertir en lien",
+      "convert_to_richcard": "Convertir en carte enrichie"
+    },
+    "placeholder": {
+      "insert_embed": "Insérez votre lien d'intégration préféré ici, comme une vidéo YouTube, un design Figma, etc.",
+      "link": "Entrez ou collez un lien"
+    },
+    "input_modal": {
+      "embed": "Intégrer",
+      "works_with_links": "Fonctionne avec YouTube, Figma, Google Docs et plus encore"
+    },
+    "error": {
+      "not_valid_link": "Veuillez entrer une URL valide."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Décrivez le contenu de ce bloc",
+      "generated_here": "Votre contenu IA sera généré ici"
+    },
+    "block_types": {
+      "placeholder": "Sélectionner le type de bloc",
+      "summarize_page": "Résumer la page",
+      "custom_prompt": "Invite personnalisée"
+    },
+    "actions": {
+      "discard": "Abandonner",
+      "generate": "Générer",
+      "generating": "Génération",
+      "rewriting": "Réécriture",
+      "rewrite": "Réécrire",
+      "use_this": "Utiliser ceci",
+      "refine": "Affiner"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/empty-state.json b/packages/i18n/src/locales/fr/empty-state.json
new file mode 100644
index 0000000..18e996a
--- /dev/null
+++ b/packages/i18n/src/locales/fr/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Il n’y a pas encore de métriques de progression à afficher.",
+      "description": "Commencez à définir des valeurs de propriété dans les éléments de travail pour voir les métriques de progression ici."
+    },
+    "updates": {
+      "title": "Pas encore de mises à jour.",
+      "description": "Lorsque les membres du projet ajoutent des mises à jour, elles apparaissent ici"
+    },
+    "search": {
+      "title": "Aucun résultat correspondant.",
+      "description": "Aucun résultat n’a été trouvé. Essayez d’ajuster votre recherche."
+    },
+    "not_found": {
+      "title": "Oups ! Quelque chose semble incorrect",
+      "description": "Nous ne sommes actuellement pas en mesure de récupérer votre compte plane. Il pourrait s’agir d'une erreur réseau.",
+      "cta_primary": "Essayer de recharger"
+    },
+    "server_error": {
+      "title": "Erreur du serveur",
+      "description": "Nous ne sommes pas en mesure de nous connecter et de récupérer les données de notre serveur. Ne vous inquiétez pas, nous y travaillons.",
+      "cta_primary": "Essayer de recharger"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Il semble que vous n’ayez pas accès à ce projet",
+      "restricted_description": "Contactez l’administrateur pour demander l’accès afin de pouvoir continuer ici.",
+      "join_description": "Cliquez sur le bouton ci-dessous pour rejoindre le projet.",
+      "cta_primary": "Rejoindre le projet",
+      "cta_loading": "Rejoindre le projet…"
+    },
+    "invalid_project": {
+      "title": "Projet non trouvé",
+      "description": "Le projet que vous recherchez n’existe pas."
+    },
+    "work_items": {
+      "title": "Commencez avec votre premier élément de travail.",
+      "description": "Les éléments de travail sont les éléments constitutifs de votre projet — attribuez des propriétaires, définissez des priorités et suivez facilement les progrès.",
+      "cta_primary": "Créer votre premier élément de travail"
+    },
+    "cycles": {
+      "title": "Regroupez et définissez des délais pour votre travail dans les Cycles.",
+      "description": "Décomposez le travail en morceaux délimités dans le temps, travaillez à rebours à partir de la date limite de votre projet pour définir des dates, et faites des progrès tangibles en équipe.",
+      "cta_primary": "Définir votre premier cycle"
+    },
+    "cycle_work_items": {
+      "title": "Aucun élément de travail à afficher dans ce cycle",
+      "description": "Créez des éléments de travail pour commencer à suivre la progression de votre équipe dans ce cycle et atteindre vos objectifs à temps.",
+      "cta_primary": "Créer un élément de travail",
+      "cta_secondary": "Ajouter un élément de travail existant"
+    },
+    "modules": {
+      "title": "Associez vos objectifs de projet aux Modules et suivez-les facilement.",
+      "description": "Les modules sont composés d’éléments de travail interconnectés. Ils aident à suivre les progrès à travers les phases du projet, chacune avec des délais spécifiques et des analyses pour indiquer à quel point vous êtes proche de la réalisation de ces phases.",
+      "cta_primary": "Définir votre premier module"
+    },
+    "module_work_items": {
+      "title": "Aucun élément de travail à afficher dans ce Module",
+      "description": "Créez des éléments de travail pour commencer à suivre ce module.",
+      "cta_primary": "Créer un élément de travail",
+      "cta_secondary": "Ajouter un élément de travail existant"
+    },
+    "views": {
+      "title": "Enregistrez des vues personnalisées pour votre projet",
+      "description": "Les vues sont des filtres enregistrés qui vous aident à accéder rapidement aux informations que vous utilisez le plus. Collaborez sans effort pendant que les coéquipiers partagent et adaptent les vues à leurs besoins spécifiques.",
+      "cta_primary": "Créer une vue"
+    },
+    "no_work_items_in_project": {
+      "title": "Aucun élément de travail dans le projet pour le moment",
+      "description": "Ajoutez des éléments de travail à votre projet et découpez votre travail en éléments traçables avec des vues.",
+      "cta_primary": "Ajouter un élément de travail"
+    },
+    "work_item_filter": {
+      "title": "Aucun élément de travail trouvé",
+      "description": "Votre filtre actuel n’a renvoyé aucun résultat. Essayez de modifier les filtres.",
+      "cta_primary": "Ajouter un élément de travail"
+    },
+    "pages": {
+      "title": "Documentez tout — des notes aux PRD",
+      "description": "Les pages vous permettent de capturer et d’organiser des informations en un seul endroit. Rédigez des notes de réunion, de la documentation de projet et des PRD, intégrez des éléments de travail et structurez-les avec des composants prêts à l'emploi.",
+      "cta_primary": "Créer votre première Page"
+    },
+    "archive_pages": {
+      "title": "Aucune page archivée pour le moment",
+      "description": "Archivez les pages qui ne sont pas sur votre radar. Accédez-y ici si nécessaire."
+    },
+    "intake_sidebar": {
+      "title": "Enregistrer les demandes d’Intake",
+      "description": "Soumettez de nouvelles demandes à examiner, prioriser et suivre dans le flux de travail de votre projet.",
+      "cta_primary": "Créer une demande d’Intake"
+    },
+    "intake_main": {
+      "title": "Sélectionnez un élément de travail Intake pour voir ses détails"
+    },
+    "epics": {
+      "title": "Transformez des projets complexes en épiques structurées.",
+      "description": "Une épique vous aide à organiser de grands objectifs en tâches plus petites et traçables.",
+      "cta_primary": "Créer une Épique",
+      "cta_secondary": "Documentation"
+    },
+    "epic_work_items": {
+      "title": "Vous n'avez pas encore ajouté d'éléments de travail à cette épique.",
+      "description": "Commencez par ajouter quelques éléments de travail à cette épique et suivez-les ici.",
+      "cta_secondary": "Ajouter des éléments de travail"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Aucune épique archivée pour le moment",
+      "description": "Vous pouvez archiver les épiques terminées ou annulées. Retrouvez-les ici une fois archivées."
+    },
+    "archive_work_items": {
+      "title": "Aucun élément de travail archivé pour le moment",
+      "description": "Manuellement ou par automatisation, vous pouvez archiver des éléments de travail qui sont terminés ou annulés. Retrouvez-les ici une fois archivés.",
+      "cta_primary": "Définir l’automatisation"
+    },
+    "archive_cycles": {
+      "title": "Aucun cycle archivé pour le moment",
+      "description": "Pour organiser votre projet, archivez les cycles terminés. Retrouvez-les ici une fois archivés."
+    },
+    "archive_modules": {
+      "title": "Aucun Module archivé pour le moment",
+      "description": "Pour organiser votre projet, archivez les modules terminés ou annulés. Retrouvez-les ici une fois archivés."
+    },
+    "home_widget_quick_links": {
+      "title": "Gardez les références, ressources ou documents importants à portée de main pour votre travail"
+    },
+    "inbox_sidebar_all": {
+      "title": "Les mises à jour pour vos éléments de travail auxquels vous êtes abonné apparaîtront ici"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Les mentions pour vos éléments de travail apparaîtront ici"
+    },
+    "your_work_by_priority": {
+      "title": "Aucun élément de travail attribué pour le moment"
+    },
+    "your_work_by_state": {
+      "title": "Aucun élément de travail attribué pour le moment"
+    },
+    "views": {
+      "title": "Aucune vue pour le moment",
+      "description": "Ajoutez des éléments de travail à votre projet et utilisez les vues pour filtrer, trier et suivre les progrès sans effort.",
+      "cta_primary": "Ajouter un élément de travail"
+    },
+    "drafts": {
+      "title": "Éléments de travail à moitié écrits",
+      "description": "Pour l’essayer, commencez à ajouter un élément de travail et laissez-le à mi-chemin ou créez votre premier brouillon ci-dessous. 😉",
+      "cta_primary": "Créer un brouillon d’élément de travail"
+    },
+    "projects_archived": {
+      "title": "Aucun projet archivé",
+      "description": "On dirait que tous vos projets sont toujours actifs — excellent travail !"
+    },
+    "analytics_projects": {
+      "title": "Créez des projets pour visualiser les métriques de projet ici."
+    },
+    "analytics_work_items": {
+      "title": "Créez des projets avec des éléments de travail et des personnes assignées pour commencer à suivre les performances, les progrès et l’impact de l’équipe ici."
+    },
+    "analytics_no_cycle": {
+      "title": "Créez des cycles pour organiser le travail en phases délimitées dans le temps et suivre les progrès à travers les sprints."
+    },
+    "analytics_no_module": {
+      "title": "Créez des modules pour organiser votre travail et suivre les progrès à travers différentes étapes."
+    },
+    "analytics_no_intake": {
+      "title": "Configurez l’intake pour gérer les demandes entrantes et suivre comment elles sont acceptées et rejetées"
+    },
+    "home_widget_stickies": {
+      "title": "Notez une idée, capturez un aha, ou enregistrez une idée géniale. Ajoutez un pense-bête pour commencer."
+    },
+    "stickies": {
+      "title": "Capturez les idées instantanément",
+      "description": "Créez des pense-bêtes pour des notes rapides et des tâches à faire, et gardez-les avec vous où que vous alliez.",
+      "cta_primary": "Créer le premier pense-bête",
+      "cta_secondary": "Documentation"
+    },
+    "active_cycles": {
+      "title": "Aucun cycle actif",
+      "description": "Vous n'avez aucun cycle en cours pour le moment. Les cycles actifs apparaissent ici lorsqu'ils incluent la date d'aujourd'hui."
+    },
+    "dashboard": {
+      "title": "Visualisez votre progression avec des tableaux de bord",
+      "description": "Créez des tableaux de bord personnalisables pour suivre les métriques, mesurer les résultats et présenter efficacement les insights.",
+      "cta_primary": "Créer un nouveau tableau de bord"
+    },
+    "wiki": {
+      "title": "Écrivez une note, un document ou une base de connaissances complète.",
+      "description": "Les pages sont un espace de repérage de pensées dans Plane. Prenez des notes de réunion, formatez-les facilement, intégrez des éléments de travail, organisez-les à l'aide d'une bibliothèque de composants, et gardez-les tous dans le contexte de votre projet.",
+      "cta_primary": "Créer votre page"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Activer les états du projet",
+      "description": "Activez les états du projet pour afficher et gérer les propriétés comme l'état, la priorité, les dates d'échéance et plus encore."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Aucune estimation pour le moment",
+      "description": "Définissez comment votre équipe mesure l’effort et suivez-le de manière cohérente sur tous les éléments de travail.",
+      "cta_primary": "Ajouter un système d’estimation"
+    },
+    "labels": {
+      "title": "Aucune étiquette pour le moment",
+      "description": "Créez des étiquettes personnalisées pour catégoriser et gérer efficacement vos éléments de travail.",
+      "cta_primary": "Créer votre première étiquette"
+    },
+    "exports": {
+      "title": "Aucune exportation pour le moment",
+      "description": "Vous n’avez aucun enregistrement d’exportation pour le moment. Une fois que vous exportez des données, tous les enregistrements apparaîtront ici."
+    },
+    "tokens": {
+      "title": "Aucun jeton personnel pour le moment",
+      "description": "Générez des jetons API sécurisés pour connecter votre espace de travail avec des systèmes et applications externes.",
+      "cta_primary": "Ajouter un jeton API"
+    },
+    "workspace_tokens": {
+      "title": "Aucun jeton API pour le moment",
+      "description": "Générez des jetons API sécurisés pour connecter votre espace de travail avec des systèmes et applications externes.",
+      "cta_primary": "Ajouter un jeton API"
+    },
+    "webhooks": {
+      "title": "Aucun Webhook ajouté pour le moment",
+      "description": "Automatisez les notifications vers des services externes lorsque des événements de projet se produisent.",
+      "cta_primary": "Ajouter un webhook"
+    },
+    "work_item_types": {
+      "title": "Créer et personnaliser les types d'éléments de travail",
+      "description": "Définissez des types d'éléments de travail uniques pour votre projet. Chaque type peut avoir ses propres propriétés, flux de travail et champs - adaptés aux besoins de votre projet et de votre équipe.",
+      "cta_primary": "Activer"
+    },
+    "work_item_type_properties": {
+      "title": "Définissez la propriété et les détails que vous souhaitez capturer pour ce type d'élément de travail. Personnalisez-le pour correspondre au flux de travail de votre projet.",
+      "cta_secondary": "Ajouter une propriété"
+    },
+    "templates": {
+      "title": "Aucun modèle pour le moment",
+      "description": "Réduisez le temps de configuration en créant des modèles pour les éléments de travail et les pages — et démarrez un nouveau travail en quelques secondes.",
+      "cta_primary": "Créer votre premier modèle"
+    },
+    "recurring_work_items": {
+      "title": "Aucun élément de travail récurrent pour le moment",
+      "description": "Configurez des éléments de travail récurrents pour automatiser les tâches répétitives et rester à l'heure sans effort.",
+      "cta_primary": "Créer un élément de travail récurrent"
+    },
+    "worklogs": {
+      "title": "Suivez les feuilles de temps pour tous les membres",
+      "description": "Enregistrez le temps sur les éléments de travail pour afficher des feuilles de temps détaillées pour tout membre de l'équipe à travers les projets."
+    },
+    "group_syncing": {
+      "title": "Aucun mappage de groupe pour le moment"
+    },
+    "template_setting": {
+      "title": "Aucun modèle pour le moment",
+      "description": "Réduisez le temps de configuration en créant des modèles pour les projets, les éléments de travail et les pages — et démarrez un nouveau travail en quelques secondes.",
+      "cta_primary": "Créer un modèle"
+    },
+    "workflows": {
+      "title": "Aucun flux de travail pour le moment",
+      "description": "Créez des flux de travail pour gérer la progression de vos éléments de travail.",
+      "cta_primary": "Ajouter un nouveau flux de travail",
+      "states": {
+        "title": "Ajouter des états",
+        "description": "Sélectionnez les états par lesquels passe l’élément de travail."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/home.json b/packages/i18n/src/locales/fr/home.json
new file mode 100644
index 0000000..8efc40b
--- /dev/null
+++ b/packages/i18n/src/locales/fr/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Guide de démarrage rapide",
+      "not_right_now": "Pas maintenant",
+      "create_project": {
+        "title": "Créer un projet",
+        "description": "La plupart des choses commencent par un projet dans Plane.",
+        "cta": "Commencer"
+      },
+      "invite_team": {
+        "title": "Inviter votre équipe",
+        "description": "Construisez, déployez et travaillez avec vos collègues.",
+        "cta": "Les faire entrer"
+      },
+      "configure_workspace": {
+        "title": "Configurez votre espace de travail.",
+        "description": "Activez ou désactivez des fonctionnalités ou allez plus loin.",
+        "cta": "Configurer cet espace de travail"
+      },
+      "personalize_account": {
+        "title": "Faites de Plane le vôtre.",
+        "description": "Choisissez votre photo, vos couleurs et plus encore.",
+        "cta": "Personnaliser maintenant"
+      },
+      "widgets": {
+        "title": "C'est calme sans widgets, activez-les",
+        "description": "Il semble que tous vos widgets soient désactivés. Activez-les\nmaintenant pour améliorer votre expérience !",
+        "primary_button": {
+          "text": "Gérer les widgets"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Enregistrez des liens vers des éléments de travail que vous souhaitez avoir à portée de main.",
+      "add": "Ajouter un lien rapide",
+      "title": "Lien rapide",
+      "title_plural": "Liens rapides"
+    },
+    "recents": {
+      "title": "Récents",
+      "empty": {
+        "project": "Vos projets récents apparaîtront ici une fois que vous en aurez visité un.",
+        "page": "Vos pages récentes apparaîtront ici une fois que vous en aurez visité une.",
+        "issue": "Vos éléments de travail récents apparaîtront ici une fois que vous en aurez visité un.",
+        "default": "Vous n’avez pas encore d’éléments récents."
+      },
+      "filters": {
+        "all": "Tous",
+        "projects": "Projets",
+        "pages": "Pages",
+        "issues": "Éléments de travail"
+      }
+    },
+    "new_at_plane": {
+      "title": "Nouveau sur Plane"
+    },
+    "quick_tutorial": {
+      "title": "Tutoriel rapide"
+    },
+    "widget": {
+      "reordered_successfully": "Widget réorganisé avec succès.",
+      "reordering_failed": "Une erreur s’est produite lors de la réorganisation du widget."
+    },
+    "manage_widgets": "Gérer les widgets",
+    "title": "Accueil",
+    "star_us_on_github": "Donnez-nous une étoile sur GitHub",
+    "business_trial_banner": {
+      "title": "Votre essai de 14 jours du plan Business est actif !",
+      "description": "Explorez toutes les fonctionnalités Business. Quand vous êtes prêt, choisissez de vous abonner. Vous ne serez pas facturé automatiquement.",
+      "trial_ends_today": "L'essai se termine aujourd'hui",
+      "trial_ends_in_days": "L'essai se termine dans {days, plural, one {# jour} other {# jours}}",
+      "start_subscription": "Démarrer l'abonnement",
+      "explore_business_features": "Explorer les fonctionnalités Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/inbox.json b/packages/i18n/src/locales/fr/inbox.json
new file mode 100644
index 0000000..186ce5a
--- /dev/null
+++ b/packages/i18n/src/locales/fr/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "En attente",
+        "description": "En attente"
+      },
+      "declined": {
+        "title": "Refusé",
+        "description": "Refusé"
+      },
+      "snoozed": {
+        "title": "Reporté",
+        "description": "{days, plural, one{# jour} other{# jours}} restant(s)"
+      },
+      "accepted": {
+        "title": "Accepté",
+        "description": "Accepté"
+      },
+      "duplicate": {
+        "title": "Doublon",
+        "description": "Doublon"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Refuser l’élément de travail",
+        "content": "Êtes-vous sûr de vouloir refuser l’élément de travail {value} ?"
+      },
+      "delete": {
+        "title": "Supprimer l’élément de travail",
+        "content": "Êtes-vous sûr de vouloir supprimer l’élément de travail {value} ?",
+        "success": "Élément de travail supprimé avec succès"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Seuls les administrateurs du projet peuvent reporter/annuler le report des éléments de travail",
+      "accept_permission": "Seuls les administrateurs du projet peuvent accepter les éléments de travail",
+      "decline_permission": "Seuls les administrateurs du projet peuvent refuser les éléments de travail"
+    },
+    "actions": {
+      "accept": "Accepter",
+      "decline": "Refuser",
+      "snooze": "Reporter",
+      "unsnooze": "Annuler le report",
+      "copy": "Copier le lien de l’élément de travail",
+      "delete": "Supprimer",
+      "open": "Ouvrir l’élément de travail",
+      "mark_as_duplicate": "Marquer comme doublon",
+      "move": "Déplacer {value} vers les éléments de travail du projet"
+    },
+    "source": {
+      "in-app": "in-app"
+    },
+    "order_by": {
+      "created_at": "Créé le",
+      "updated_at": "Mis à jour le",
+      "id": "ID"
+    },
+    "label": "Intake",
+    "page_label": "{workspace} - Intake",
+    "modal": {
+      "title": "Créer un élément de travail Intake"
+    },
+    "tabs": {
+      "open": "Ouvert",
+      "closed": "Fermé"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Aucun élément de travail ouvert",
+        "description": "Trouvez les éléments de travail ouverts ici. Créez un nouvel élément de travail."
+      },
+      "sidebar_closed_tab": {
+        "title": "Aucun élément de travail fermé",
+        "description": "Tous les éléments de travail, qu’ils soient acceptés ou refusés, peuvent être trouvés ici."
+      },
+      "sidebar_filter": {
+        "title": "Aucun élément de travail correspondant",
+        "description": "Aucun élément de travail ne correspond au filtre appliqué dans Intake. Créez un nouvel élément de travail."
+      },
+      "detail": {
+        "title": "Sélectionnez un élément de travail pour voir ses détails."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/integration.json b/packages/i18n/src/locales/fr/integration.json
new file mode 100644
index 0000000..e7f9702
--- /dev/null
+++ b/packages/i18n/src/locales/fr/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Intégrations",
+    "loading": "Chargement",
+    "unauthorized": "Vous n'êtes pas autorisé à voir cette page.",
+    "configure": "Configurer",
+    "not_enabled": "{name} n'est pas activé pour cet espace de travail.",
+    "not_configured": "Non configuré",
+    "disconnect_personal_account": "Déconnecter le compte personnel {providerName}",
+    "not_configured_message_admin": "L'intégration {name} n'est pas configurée. Veuillez contacter votre administrateur d'instance pour la configurer.",
+    "not_configured_message_support": "L'intégration {name} n'est pas configurée. Veuillez contacter le support pour la configurer.",
+    "external_api_unreachable": "Impossible d'accéder à l'API externe. Veuillez réessayer plus tard.",
+    "error_fetching_supported_integrations": "Impossible de récupérer les intégrations prises en charge. Veuillez réessayer plus tard.",
+    "back_to_integrations": "Retour aux intégrations",
+    "select_state": "Sélectionner l'état",
+    "set_state": "Définir l'état",
+    "choose_project": "Choisir le projet...",
+    "skip_backward_state_movement": "Empêcher le déplacement des issues vers un état antérieur en raison des mises à jour de PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Connectez et synchronisez vos éléments de travail GitHub avec Plane",
+    "connect_org": "Connecter l'organisation",
+    "connect_org_description": "Connectez votre organisation GitHub avec Plane",
+    "processing": "Traitement",
+    "org_added_desc": "GitHub org ajoutée par et temps",
+    "connection_fetch_error": "Erreur lors de la récupération des détails de connexion du serveur",
+    "personal_account_connected": "Compte personnel connecté",
+    "personal_account_connected_description": "Votre compte GitHub est maintenant connecté à Plane",
+    "connect_personal_account": "Connecter le compte personnel",
+    "connect_personal_account_description": "Connectez votre compte personnel GitHub avec Plane.",
+    "repo_mapping": "Mappage de dépôts",
+    "repo_mapping_description": "Mappez vos dépôts GitHub avec les projets Plane.",
+    "project_issue_sync": "Synchronisation de problèmes de projet",
+    "project_issue_sync_description": "Synchroniser les problèmes de GitHub vers votre projet Plane",
+    "project_issue_sync_empty_state": "Les synchronisations de problèmes de projet mappées apparaîtront ici",
+    "configure_project_issue_sync_state": "Configurer l'état de synchronisation des problèmes",
+    "select_issue_sync_direction": "Sélectionner la direction de synchronisation des problèmes",
+    "allow_bidirectional_sync": "Bidirectionnel - Synchroniser les problèmes et les commentaires dans les deux directions entre GitHub et Plane",
+    "allow_unidirectional_sync": "Unidirectionnel - Synchroniser les problèmes et les commentaires de GitHub vers Plane uniquement",
+    "allow_unidirectional_sync_warning": "Les données du problème GitHub remplaceront les données dans l'élément de travail Plane lié (GitHub → Plane uniquement)",
+    "remove_project_issue_sync": "Supprimer cette synchronisation de problèmes de projet",
+    "remove_project_issue_sync_confirmation": "Êtes-vous sûr de vouloir supprimer cette synchronisation de problèmes de projet ?",
+    "add_pr_state_mapping": "Ajouter le mappage d'état des pull requests pour le projet Plane",
+    "edit_pr_state_mapping": "Modifier le mappage d'état des pull requests pour le projet Plane",
+    "pr_state_mapping": "Mappage d'état des pull requests",
+    "pr_state_mapping_description": "Mappez les états des pull requests de GitHub à votre projet Plane",
+    "pr_state_mapping_empty_state": "Les états de PR mappés apparaîtront ici",
+    "remove_pr_state_mapping": "Supprimer ce mappage d'état des pull requests",
+    "remove_pr_state_mapping_confirmation": "Êtes-vous sûr de vouloir supprimer ce mappage d'état des pull requests ?",
+    "issue_sync_message": "Les éléments de travail sont synchronisés avec {project}",
+    "link": "Lier le dépôt GitHub au projet Plane",
+    "pull_request_automation": "Automatisation des pull requests",
+    "pull_request_automation_description": "Configurer le mappage d'état des pull requests de GitHub vers votre projet Plane",
+    "DRAFT_MR_OPENED": "Ouverture d'un MR brouillon",
+    "MR_OPENED": "Ouverture d'un MR",
+    "MR_READY_FOR_MERGE": "Prêt pour la fusion",
+    "MR_REVIEW_REQUESTED": "Revue demandée",
+    "MR_MERGED": "Fusionné",
+    "MR_CLOSED": "Fermé",
+    "ISSUE_OPEN": "Problème Ouvert",
+    "ISSUE_CLOSED": "Problème Fermé",
+    "save": "Enregistrer",
+    "start_sync": "Démarrer la synchronisation",
+    "choose_repository": "Choisir le dépôt..."
+  },
+  "gitlab_integration": {
+    "name": "GitLab",
+    "description": "Connectez et synchronisez vos demandes de fusion GitLab avec Plane.",
+    "connection_fetch_error": "Erreur lors de la récupération des détails de connexion du serveur",
+    "connect_org": "Connecter l'organisation",
+    "connect_org_description": "Connectez votre organisation GitLab avec Plane.",
+    "project_connections": "Connexions aux projets GitLab",
+    "project_connections_description": "Synchronisez les demandes de fusion de GitLab vers les projets Plane.",
+    "plane_project_connection": "Connexion au projet Plane",
+    "plane_project_connection_description": "Configurer le mappage d'état des pull requests de GitLab vers les projets Plane",
+    "remove_connection": "Supprimer la connexion",
+    "remove_connection_confirmation": "Êtes-vous sûr de vouloir supprimer cette connexion ?",
+    "link": "Lier le dépôt GitLab au projet Plane",
+    "pull_request_automation": "Automatisation des pull requests",
+    "pull_request_automation_description": "Configurer le mappage d'état des pull requests de GitLab vers Plane",
+    "DRAFT_MR_OPENED": "À l'ouverture d'une MR brouillon, définir l'état sur",
+    "MR_OPENED": "À l'ouverture d'une MR, définir l'état sur",
+    "MR_REVIEW_REQUESTED": "Quand une revue de MR est demandée, définir l'état sur",
+    "MR_READY_FOR_MERGE": "Quand la MR est prête pour la fusion, définir l'état sur",
+    "MR_MERGED": "Quand la MR est fusionnée, définir l'état sur",
+    "MR_CLOSED": "Quand la MR est fermée, définir l'état sur",
+    "integration_enabled_text": "Avec l'intégration GitLab activée, vous pouvez automatiser les flux de travail des éléments de travail",
+    "choose_entity": "Choisir l'entité",
+    "choose_project": "Choisir le projet",
+    "link_plane_project": "Lier le projet Plane",
+    "project_issue_sync": "Synchronisation des Issues du Projet",
+    "project_issue_sync_description": "Synchronisez les issues de Gitlab vers votre projet Plane",
+    "project_issue_sync_empty_state": "La synchronisation des issues du projet mappée apparaîtra ici",
+    "configure_project_issue_sync_state": "Configurer l'état de synchronisation des issues",
+    "select_issue_sync_direction": "Sélectionnez la direction de synchronisation des issues",
+    "allow_bidirectional_sync": "Bidirectionnel - Synchroniser les issues et commentaires dans les deux sens entre Gitlab et Plane",
+    "allow_unidirectional_sync": "Unidirectionnel - Synchroniser les issues et commentaires uniquement de Gitlab vers Plane",
+    "allow_unidirectional_sync_warning": "Les données de Gitlab Issue remplaceront les données dans l'élément de travail Plane lié (Gitlab → Plane uniquement)",
+    "remove_project_issue_sync": "Supprimer cette synchronisation des issues du projet",
+    "remove_project_issue_sync_confirmation": "Êtes-vous sûr de vouloir supprimer cette synchronisation des issues du projet ?",
+    "ISSUE_OPEN": "Issue Ouverte",
+    "ISSUE_CLOSED": "Issue Fermée",
+    "save": "Enregistrer",
+    "start_sync": "Démarrer la synchronisation",
+    "choose_repository": "Choisir le dépôt..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Connectez et synchronisez votre instance Gitlab Enterprise avec Plane.",
+    "app_form_title": "Configuration Gitlab Enterprise",
+    "app_form_description": "Configurez Gitlab Enterprise pour vous connecter à Plane.",
+    "base_url_title": "URL de base",
+    "base_url_description": "L'URL de base de votre instance Gitlab Enterprise.",
+    "base_url_placeholder": "ex. \"https://glab.plane.town\"",
+    "base_url_error": "L'URL de base est requise",
+    "invalid_base_url_error": "URL de base invalide",
+    "client_id_title": "ID d'App",
+    "client_id_description": "L'ID de l'app que vous avez créée dans votre instance Gitlab Enterprise.",
+    "client_id_placeholder": "ex. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "L'ID d'App est requis",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Le client secret de l'app que vous avez créée dans votre instance Gitlab Enterprise.",
+    "client_secret_placeholder": "ex. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Le client secret est requis",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Un webhook secret aléatoire qui sera utilisé pour vérifier le webhook depuis l'instance Gitlab Enterprise.",
+    "webhook_secret_placeholder": "ex. \"webhook1234567890\"",
+    "webhook_secret_error": "Le webhook secret est requis",
+    "connect_app": "Connecter l'App"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Connectez votre espace de travail Slack avec Plane.",
+    "connect_personal_account": "Connectez votre compte Slack personnel avec Plane.",
+    "personal_account_connected": "Votre compte personnel {providerName} est maintenant connecté à Plane.",
+    "link_personal_account": "Liez votre compte personnel {providerName} à Plane.",
+    "connected_slack_workspaces": "Espaces de travail Slack connectés",
+    "connected_on": "Connecté le {date}",
+    "disconnect_workspace": "Déconnecter l'espace de travail {name}",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Recevez des notifications dans les messages privés Slack pour les mises à jour importantes, rappels et alertes qui vous concernent."
+      }
+    },
+    "project_updates": {
+      "title": "Mises à jour de Projet",
+      "description": "Configurez les notifications de mises à jour de projets pour vos projets",
+      "add_new_project_update": "Ajouter une nouvelle notification de mises à jour de projet",
+      "project_updates_empty_state": "Les projets connectés avec des Canaux Slack apparaîtront ici.",
+      "project_updates_form": {
+        "title": "Configurer les Mises à jour de Projet",
+        "description": "Recevez des notifications de mises à jour de projet dans Slack lorsque des éléments de travail sont créés",
+        "failed_to_load_channels": "Impossible de charger les canaux depuis Slack",
+        "project_dropdown": {
+          "placeholder": "Sélectionnez un projet",
+          "label": "Projet Plane",
+          "no_projects": "Aucun projet disponible"
+        },
+        "channel_dropdown": {
+          "label": "Canal Slack",
+          "placeholder": "Sélectionnez un canal",
+          "no_channels": "Aucun canal disponible"
+        },
+        "all_projects_connected": "Tous les projets sont déjà connectés à des canaux Slack.",
+        "all_channels_connected": "Tous les canaux Slack sont déjà connectés à des projets.",
+        "project_connection_success": "Connexion de projet créée avec succès",
+        "project_connection_updated": "Connexion de projet mise à jour avec succès",
+        "project_connection_deleted": "Connexion de projet supprimée avec succès",
+        "failed_delete_project_connection": "Échec de la suppression de la connexion de projet",
+        "failed_create_project_connection": "Échec de la création de la connexion de projet",
+        "failed_upserting_project_connection": "Échec de la mise à jour de la connexion de projet",
+        "failed_loading_project_connections": "Nous n'avons pas pu charger vos connexions de projet. Cela pourrait être dû à un problème de réseau ou un problème avec l'intégration."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Connectez votre espace de travail Sentry avec Plane.",
+    "connected_sentry_workspaces": "Espaces de travail Sentry connectés",
+    "connected_on": "Connecté le {date}",
+    "disconnect_workspace": "Déconnecter l'espace de travail {name}",
+    "state_mapping": {
+      "title": "Mapping d'état",
+      "description": "Mappez les états d'incident Sentry à vos états de projet. Configurez quels états utiliser lorsqu'un incident Sentry est résolu ou non résolu.",
+      "add_new_state_mapping": "Ajouter un nouveau mapping d'état",
+      "empty_state": "Aucun mapping d'état configuré. Créez votre premier mapping pour synchroniser les états d'incident Sentry avec vos états de projet.",
+      "failed_loading_state_mappings": "Nous n'avons pas pu charger vos mappings d'état. Cela pourrait être dû à un problème de réseau ou un problème avec l'intégration.",
+      "loading_project_states": "Chargement des états de projet...",
+      "error_loading_states": "Erreur lors du chargement des états",
+      "no_states_available": "Aucun état disponible",
+      "no_permission_states": "Vous n'avez pas la permission d'accéder aux états pour ce projet",
+      "states_not_found": "États de projet non trouvés",
+      "server_error_states": "Erreur serveur lors du chargement des états"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Connectez et synchronisez vos dépôts Bitbucket Data Center avec Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Valider les jetons IdP externes pour l'accès API.",
+    "header_description": "Validez les jetons OIDC/JWT émis par votre IdP (Azure AD, Okta, etc.) pour l'accès à l'API Plane.",
+    "connected": "Connecté",
+    "connect": "Connecter",
+    "uninstall": "Désinstaller",
+    "uninstalling": "Désinstallation...",
+    "install_success": "OAuth Bridge installé avec succès.",
+    "install_error": "Échec de l'installation d'OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge désinstallé.",
+    "uninstall_error": "Échec de la désinstallation d'OAuth Bridge.",
+    "token_providers": "Fournisseurs de jetons",
+    "token_providers_description": "Configurez les IdP externes dont les JWT sont acceptés comme identifiants API.",
+    "add_provider": "Ajouter un fournisseur",
+    "edit_provider": "Modifier le fournisseur",
+    "enabled": "Activé",
+    "disabled": "Désactivé",
+    "test": "Tester",
+    "no_providers_title": "Aucun fournisseur configuré.",
+    "no_providers_description": "Ajoutez un IdP pour activer l'authentification par jeton externe.",
+    "provider_updated": "Fournisseur mis à jour.",
+    "provider_added": "Fournisseur ajouté.",
+    "provider_save_error": "Échec de l'enregistrement du fournisseur.",
+    "provider_deleted": "Fournisseur supprimé.",
+    "provider_delete_error": "Échec de la suppression du fournisseur.",
+    "provider_update_error": "Échec de la mise à jour du fournisseur.",
+    "jwks_reachable": "JWKS accessible",
+    "jwks_unreachable": "JWKS inaccessible",
+    "jwks_test_error": "Impossible de récupérer le JWKS depuis l'URL configurée.",
+    "provider_form": {
+      "name_label": "Nom",
+      "name_placeholder": "ex. Azure AD Production",
+      "name_description": "Libellé lisible pour ce fournisseur d'identité",
+      "name_required": "Le nom est requis.",
+      "issuer_label": "Émetteur",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Valeur attendue du claim iss dans le JWT",
+      "issuer_required": "L'émetteur est requis.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "Point de terminaison HTTPS servant le JSON Web Key Set du fournisseur",
+      "jwks_url_required": "L'URL JWKS est requise.",
+      "jwks_url_https": "L'URL JWKS doit utiliser HTTPS.",
+      "audience_label": "Audience",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Claim(s) aud attendu(s) dans le JWT, séparés par des virgules.",
+      "user_claims_label": "Claim utilisateur",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "Claim JWT contenant l'adresse e-mail de l'utilisateur",
+      "user_claims_required": "Le claim utilisateur est requis.",
+      "allowed_algorithms_label": "Algorithmes de signature autorisés",
+      "allowed_algorithms_description": "Algorithmes asymétriques acceptés pour la vérification de signature JWT",
+      "allowed_algorithms_required": "Au moins un algorithme est requis.",
+      "select_algorithms": "Sélectionner les algorithmes",
+      "jwks_cache_ttl_label": "TTL du cache JWKS (secondes)",
+      "jwks_cache_ttl_description": "Durée de mise en cache des clés JWKS du fournisseur (minimum 60s, par défaut 24 heures)",
+      "jwks_cache_ttl_min": "Le TTL du cache doit être d'au moins 60 secondes.",
+      "rate_limit_label": "Limite de débit",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Limitation des requêtes au format nombre/période (ex. 120/minute). Laisser vide pour la limite par défaut.",
+      "enable_provider": "Activer ce fournisseur",
+      "saving": "Enregistrement...",
+      "update": "Mettre à jour"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Connectez et synchronisez votre organisation GitHub Enterprise avec Plane.",
+    "app_form_title": "Configuration GitHub Enterprise",
+    "app_form_description": "Configurez GitHub Enterprise pour se connecter avec Plane.",
+    "app_id_title": "ID de l'app",
+    "app_id_description": "L'ID de l'app que vous avez créée dans votre organisation GitHub Enterprise.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID est requis",
+    "app_name_title": "Slug de l'app",
+    "app_name_description": "Le slug de l'app que vous avez créée dans votre organisation GitHub Enterprise.",
+    "app_name_error": "App slug est requis",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "URL de base",
+    "base_url_description": "L'URL de base de votre organisation GitHub Enterprise.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "URL de base est requise",
+    "invalid_base_url_error": "URL de base invalide",
+    "client_id_title": "ID client",
+    "client_id_description": "L'ID client de l'app que vous avez créée dans votre organisation GitHub Enterprise.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID client est requis",
+    "client_secret_title": "Secret client",
+    "client_secret_description": "Le secret client de l'app que vous avez créée dans votre organisation GitHub Enterprise.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Secret client est requis",
+    "webhook_secret_title": "Secret webhook",
+    "webhook_secret_description": "Le secret webhook de l'app que vous avez créée dans votre organisation GitHub Enterprise.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Secret webhook est requis",
+    "private_key_title": "Clé privée (Base64 codée)",
+    "private_key_description": "Clé privée de l'app que vous avez créée dans votre organisation GitHub Enterprise.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Clé privée est requise",
+    "connect_app": "Connecter l'app"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Les paramètres de requête fournis sont invalides ou des champs requis sont manquants",
+    "invalid_installation_account": "Le compte d'installation fourni n'est pas valide",
+    "generic_error": "Une erreur inattendue s'est produite lors du traitement de votre demande",
+    "connection_not_found": "La connexion demandée n'a pas pu être trouvée",
+    "multiple_connections_found": "Plusieurs connexions ont été trouvées alors qu'une seule était attendue",
+    "cannot_create_multiple_connections": "Vous avez déjà connecté votre organisation avec un espace de travail. Veuillez déconnecter la connexion existante avant de connecter une nouvelle.",
+    "installation_not_found": "L'installation demandée n'a pas pu être trouvée",
+    "user_not_found": "L'utilisateur demandé n'a pas pu être trouvé",
+    "error_fetching_token": "Échec de la récupération du jeton d'authentification",
+    "invalid_app_credentials": "Les informations d'identification de l'application fournies sont invalides",
+    "invalid_app_installation_id": "Échec de l'installation de l'application"
+  },
+  "import_status": {
+    "queued": "En attente",
+    "created": "Créé",
+    "initiated": "Initié",
+    "pulling": "Extraction",
+    "timed_out": "Temps écoulé",
+    "pulled": "Extrait",
+    "progressing": "En progression",
+    "transforming": "Transformation",
+    "transformed": "Transformé",
+    "pushing": "Envoi",
+    "finished": "Terminé",
+    "error": "Erreur",
+    "cancelled": "Annulé"
+  }
+}
diff --git a/packages/i18n/src/locales/fr/module.json b/packages/i18n/src/locales/fr/module.json
new file mode 100644
index 0000000..5a698e9
--- /dev/null
+++ b/packages/i18n/src/locales/fr/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Module} other {Modules}}",
+    "no_module": "Pas de module",
+    "select": "Ajouter des modules"
+  }
+}
diff --git a/packages/i18n/src/locales/fr/navigation.json b/packages/i18n/src/locales/fr/navigation.json
new file mode 100644
index 0000000..2c77344
--- /dev/null
+++ b/packages/i18n/src/locales/fr/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Aucun résultat trouvé"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Stickies",
+    "your_work": "Votre travail",
+    "projects": "Projets",
+    "pages": "Pages",
+    "new_work_item": "Nouvel élément de travail",
+    "home": "Accueil",
+    "inbox": "Boîte de réception",
+    "workspace": "Espace de travail",
+    "views": "Vues",
+    "analytics": "Analyses",
+    "work_items": "Éléments de travail",
+    "cycles": "Cycles",
+    "modules": "Modules",
+    "intake": "Intake",
+    "drafts": "Brouillons",
+    "favorites": "Favoris",
+    "pro": "Pro",
+    "upgrade": "Mettre à niveau",
+    "pi_chat": "Plane AI",
+    "epics": "Epics",
+    "upgrade_plan": "Mettre à niveau",
+    "plane_pro": "Plane Pro",
+    "business": "Business"
+  }
+}
diff --git a/packages/i18n/src/locales/fr/notification.json b/packages/i18n/src/locales/fr/notification.json
new file mode 100644
index 0000000..fd7415b
--- /dev/null
+++ b/packages/i18n/src/locales/fr/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Boîte de réception",
+    "page_label": "{workspace} - Boîte de réception",
+    "options": {
+      "mark_all_as_read": "Tout marquer comme lu",
+      "mark_read": "Marquer comme lu",
+      "mark_unread": "Marquer comme non lu",
+      "refresh": "Actualiser",
+      "filters": "Filtres de la boîte de réception",
+      "show_unread": "Afficher les non lus",
+      "show_snoozed": "Afficher les reportés",
+      "show_archived": "Afficher les archivés",
+      "mark_archive": "Archiver",
+      "mark_unarchive": "Désarchiver",
+      "mark_snooze": "Reporter",
+      "mark_unsnooze": "Annuler le report"
+    },
+    "toasts": {
+      "read": "Notification marquée comme lue",
+      "unread": "Notification marquée comme non lue",
+      "archived": "Notification marquée comme archivée",
+      "unarchived": "Notification marquée comme non archivée",
+      "snoozed": "Notification reportée",
+      "unsnoozed": "Report de la notification annulé"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Sélectionnez pour voir les détails."
+      },
+      "all": {
+        "title": "Aucun élément de travail assigné",
+        "description": "Les mises à jour des éléments de travail qui vous sont assignés peuvent être\n vues ici"
+      },
+      "mentions": {
+        "title": "Aucun élément de travail assigné",
+        "description": "Les mises à jour des éléments de travail qui vous sont assignés peuvent être\n vues ici"
+      }
+    },
+    "tabs": {
+      "all": "Tout",
+      "mentions": "Mentions"
+    },
+    "filter": {
+      "assigned": "Assigné à moi",
+      "created": "Créé par moi",
+      "subscribed": "Suivi par moi"
+    },
+    "snooze": {
+      "1_day": "1 jour",
+      "3_days": "3 jours",
+      "5_days": "5 jours",
+      "1_week": "1 semaine",
+      "2_weeks": "2 semaines",
+      "custom": "Personnalisé"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/page.json b/packages/i18n/src/locales/fr/page.json
new file mode 100644
index 0000000..a3bb957
--- /dev/null
+++ b/packages/i18n/src/locales/fr/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Plan",
+        "empty_state": {
+          "title": "Titres manquants",
+          "description": "Ajoutons quelques titres à cette page pour les voir ici."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Mots",
+          "characters": "Caractères",
+          "paragraphs": "Paragraphes",
+          "read_time": "Temps de lecture"
+        },
+        "actors_info": {
+          "edited_by": "Modifié par",
+          "created_by": "Créé par"
+        },
+        "version_history": {
+          "label": "Historique des versions",
+          "current_version": "Version actuelle",
+          "highlight_changes": "Mettre en évidence les modifications"
+        }
+      },
+      "assets": {
+        "label": "Ressources",
+        "download_button": "Télécharger",
+        "empty_state": {
+          "title": "Images manquantes",
+          "description": "Ajoutez des images pour les voir ici."
+        }
+      },
+      "comments": {
+        "label": "Commentaires",
+        "empty_state": {
+          "title": "Aucun commentaire",
+          "description": "Ajoutez des commentaires pour les voir ici."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Le nom du sticky ne peut pas dépasser 100 caractères.",
+        "already_exists": "Il existe déjà un sticky sans description"
+      },
+      "created": {
+        "title": "Sticky créé",
+        "message": "Le sticky a été créé avec succès"
+      },
+      "not_created": {
+        "title": "Sticky non créé",
+        "message": "Le sticky n’a pas pu être créé"
+      },
+      "updated": {
+        "title": "Sticky mis à jour",
+        "message": "Le sticky a été mis à jour avec succès"
+      },
+      "not_updated": {
+        "title": "Sticky non mis à jour",
+        "message": "Le sticky n’a pas pu être mis à jour"
+      },
+      "removed": {
+        "title": "Sticky supprimé",
+        "message": "Le sticky a été supprimé avec succès"
+      },
+      "not_removed": {
+        "title": "Sticky non supprimé",
+        "message": "Le sticky n’a pas pu être supprimé"
+      }
+    },
+    "open_button": "Ouvrir le panneau de navigation",
+    "close_button": "Fermer le panneau de navigation",
+    "outline_floating_button": "Ouvrir le plan"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Déplacer",
+        "loading": "Déplacement"
+      },
+      "cannot_move_to_teamspace": "Les pages privées et partagées ne peuvent pas être déplacées vers un teamspace.",
+      "placeholders": {
+        "workspace_to_all": "Rechercher des projets et des teamspaces",
+        "workspace_to_project": "Rechercher des projets",
+        "project_to_all": "Rechercher des projets et des teamspaces",
+        "project_to_project": "Rechercher des projets",
+        "project_to_all_with_wiki": "Rechercher des collections wiki, des projets et des espaces d'équipe",
+        "project_to_project_with_wiki": "Rechercher des collections wiki et des projets"
+      },
+      "toasts": {
+        "success": {
+          "title": "Succès !",
+          "message": "Page déplacée avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "La page n’a pas pu être déplacée. Veuillez réessayer plus tard."
+        },
+        "collection_error": {
+          "title": "Déplacée vers le wiki",
+          "message": "La page a été déplacée vers le wiki, mais n'a pas pu être ajoutée à la collection sélectionnée. Elle reste dans General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Retirer de la collection",
+      "success_message": "Page retirée de la collection.",
+      "error_message": "La page n'a pas pu être retirée de la collection. Veuillez réessayer."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Limite de contenu atteinte et la synchronisation en direct est désactivée. Créez une nouvelle page ou utilisez des pages imbriquées pour continuer la synchronisation."
+  }
+}
diff --git a/packages/i18n/src/locales/fr/power-k.json b/packages/i18n/src/locales/fr/power-k.json
new file mode 100644
index 0000000..9461dcd
--- /dev/null
+++ b/packages/i18n/src/locales/fr/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Supprimer en masse les éléments de travail"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Actions sur l’élément de travail",
+        "indicator": "Élément de travail",
+        "change_state": "Changer d’état",
+        "change_priority": "Changer la priorité",
+        "change_assignees": "Assigner à",
+        "assign_to_me": "M’assigner",
+        "unassign_from_me": "Me désassigner",
+        "change_estimate": "Changer l’estimation",
+        "add_to_cycle": "Ajouter au cycle",
+        "add_to_modules": "Ajouter aux modules",
+        "add_labels": "Ajouter des étiquettes",
+        "subscribe": "S’abonner aux notifications",
+        "unsubscribe": "Se désabonner des notifications",
+        "delete": "Supprimer",
+        "copy_id": "Copier l’ID",
+        "copy_id_toast_success": "ID de l’élément de travail copié dans le presse-papiers.",
+        "copy_id_toast_error": "Une erreur s’est produite lors de la copie de l’ID de l’élément de travail dans le presse-papiers.",
+        "copy_title": "Copier le titre",
+        "copy_title_toast_success": "Titre de l’élément de travail copié dans le presse-papiers.",
+        "copy_title_toast_error": "Une erreur s’est produite lors de la copie du titre de l’élément de travail dans le presse-papiers.",
+        "copy_url": "Copier l’URL",
+        "copy_url_toast_success": "URL de l’élément de travail copiée dans le presse-papiers.",
+        "copy_url_toast_error": "Une erreur s’est produite lors de la copie de l’URL de l’élément de travail dans le presse-papiers."
+      },
+      "cycle": {
+        "title": "Actions sur le cycle",
+        "indicator": "Cycle",
+        "add_to_favorites": "Ajouter aux favoris",
+        "remove_from_favorites": "Supprimer des favoris",
+        "copy_url": "Copier l’URL",
+        "copy_url_toast_success": "URL du cycle copiée dans le presse-papiers.",
+        "copy_url_toast_error": "Une erreur s’est produite lors de la copie de l’URL du cycle dans le presse-papiers."
+      },
+      "module": {
+        "title": "Actions sur le module",
+        "indicator": "Module",
+        "add_remove_members": "Ajouter/retirer des membres",
+        "change_status": "Changer le statut",
+        "add_to_favorites": "Ajouter aux favoris",
+        "remove_from_favorites": "Supprimer des favoris",
+        "copy_url": "Copier l’URL",
+        "copy_url_toast_success": "URL du module copiée dans le presse-papiers.",
+        "copy_url_toast_error": "Une erreur s’est produite lors de la copie de l’URL du module dans le presse-papiers."
+      },
+      "page": {
+        "title": "Actions sur la page",
+        "indicator": "Page",
+        "lock": "Verrouiller",
+        "unlock": "Déverrouiller",
+        "make_private": "Rendre privée",
+        "make_public": "Rendre publique",
+        "archive": "Archiver",
+        "restore": "Restaurer",
+        "add_to_favorites": "Ajouter aux favoris",
+        "remove_from_favorites": "Supprimer des favoris",
+        "copy_url": "Copier l’URL",
+        "copy_url_toast_success": "URL de la page copiée dans le presse-papiers.",
+        "copy_url_toast_error": "Une erreur s’est produite lors de la copie de l’URL de la page dans le presse-papiers."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Nouvel élément de travail",
+      "create_page": "Nouvelle page",
+      "create_view": "Nouvelle vue",
+      "create_cycle": "Nouveau cycle",
+      "create_module": "Nouveau module",
+      "create_project": "Nouveau projet",
+      "create_workspace": "Nouvel espace de travail",
+      "create_project_automation": "Nouvelle automatisation"
+    },
+    "navigation_actions": {
+      "open_workspace": "Ouvrir un espace de travail",
+      "nav_home": "Aller à l’accueil",
+      "nav_inbox": "Aller à la boîte de réception",
+      "nav_your_work": "Aller à votre travail",
+      "nav_account_settings": "Aller aux paramètres du compte",
+      "open_project": "Ouvrir un projet",
+      "nav_projects_list": "Aller à la liste des projets",
+      "nav_all_workspace_work_items": "Aller à tous les éléments de travail",
+      "nav_assigned_workspace_work_items": "Aller aux éléments de travail assignés",
+      "nav_created_workspace_work_items": "Aller aux éléments de travail créés",
+      "nav_subscribed_workspace_work_items": "Aller aux éléments de travail suivis",
+      "nav_workspace_analytics": "Aller aux analyses de l’espace de travail",
+      "nav_workspace_drafts": "Aller aux brouillons de l’espace de travail",
+      "nav_workspace_archives": "Aller aux archives de l’espace de travail",
+      "open_workspace_setting": "Ouvrir un paramètre de l’espace de travail",
+      "nav_workspace_settings": "Aller aux paramètres de l’espace de travail",
+      "nav_project_work_items": "Aller aux éléments de travail",
+      "open_project_cycle": "Ouvrir un cycle",
+      "nav_project_cycles": "Aller aux cycles",
+      "open_project_module": "Ouvrir un module",
+      "nav_project_modules": "Aller aux modules",
+      "open_project_view": "Ouvrir une vue de projet",
+      "nav_project_views": "Aller aux vues du projet",
+      "nav_project_pages": "Aller aux pages",
+      "nav_project_intake": "Aller à l’intake",
+      "nav_project_archives": "Aller aux archives du projet",
+      "open_project_setting": "Ouvrir un paramètre du projet",
+      "nav_project_settings": "Aller aux paramètres du projet",
+      "nav_workspace_active_cycle": "Aller à tous les cycles actifs",
+      "nav_project_overview": "Aller à la vue d’ensemble du projet"
+    },
+    "account_actions": {
+      "sign_out": "Se déconnecter",
+      "workspace_invites": "Invitations à l’espace de travail"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Basculer la barre latérale de l’application",
+      "copy_current_page_url": "Copier l’URL de la page actuelle",
+      "copy_current_page_url_toast_success": "URL de la page actuelle copiée dans le presse-papiers.",
+      "copy_current_page_url_toast_error": "Une erreur s’est produite lors de la copie de l’URL de la page actuelle dans le presse-papiers.",
+      "focus_top_nav_search": "Mettre le focus sur le champ de recherche"
+    },
+    "preferences_actions": {
+      "update_theme": "Changer le thème de l’interface",
+      "update_timezone": "Changer le fuseau horaire",
+      "update_start_of_week": "Changer le premier jour de la semaine",
+      "update_language": "Changer la langue de l’interface",
+      "toast": {
+        "theme": {
+          "success": "Thème mis à jour avec succès.",
+          "error": "Échec de la mise à jour du thème. Veuillez réessayer."
+        },
+        "timezone": {
+          "success": "Fuseau horaire mis à jour avec succès.",
+          "error": "Échec de la mise à jour du fuseau horaire. Veuillez réessayer."
+        },
+        "generic": {
+          "success": "Préférences mises à jour avec succès.",
+          "error": "Échec de la mise à jour des préférences. Veuillez réessayer."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Ouvrir les raccourcis clavier",
+      "open_plane_documentation": "Ouvrir la documentation Plane",
+      "join_forum": "Rejoindre notre forum",
+      "report_bug": "Signaler un bug",
+      "chat_with_us": "Discuter avec nous"
+    },
+    "page_placeholders": {
+      "default": "Tapez une commande ou effectuez une recherche",
+      "open_workspace": "Ouvrir un espace de travail",
+      "open_project": "Ouvrir un projet",
+      "open_workspace_setting": "Ouvrir un paramètre de l’espace de travail",
+      "open_project_cycle": "Ouvrir un cycle",
+      "open_project_module": "Ouvrir un module",
+      "open_project_view": "Ouvrir une vue de projet",
+      "open_project_setting": "Ouvrir un paramètre du projet",
+      "update_work_item_state": "Changer d’état",
+      "update_work_item_priority": "Changer la priorité",
+      "update_work_item_assignee": "Assigner à",
+      "update_work_item_estimate": "Changer l’estimation",
+      "update_work_item_cycle": "Ajouter au cycle",
+      "update_work_item_module": "Ajouter aux modules",
+      "update_work_item_labels": "Ajouter des étiquettes",
+      "update_module_member": "Changer les membres",
+      "update_module_status": "Changer le statut",
+      "update_theme": "Changer le thème",
+      "update_timezone": "Changer le fuseau horaire",
+      "update_start_of_week": "Changer le premier jour de la semaine",
+      "update_language": "Changer la langue"
+    },
+    "search_menu": {
+      "no_results": "Aucun résultat trouvé",
+      "clear_search": "Effacer la recherche",
+      "go_to_advanced_search": "Aller à la recherche avancée"
+    },
+    "footer": {
+      "workspace_level": "Niveau espace de travail"
+    },
+    "group_titles": {
+      "actions": "Actions",
+      "contextual": "Contextuel",
+      "navigation": "Naviguer",
+      "create": "Créer",
+      "general": "Général",
+      "settings": "Paramètres",
+      "account": "Compte",
+      "miscellaneous": "Divers",
+      "preferences": "Préférences",
+      "help": "Aide"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/project-settings.json b/packages/i18n/src/locales/fr/project-settings.json
new file mode 100644
index 0000000..533a0ad
--- /dev/null
+++ b/packages/i18n/src/locales/fr/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Saisissez l’ID du projet",
+      "please_select_a_timezone": "Veuillez sélectionner un fuseau horaire",
+      "archive_project": {
+        "title": "Archiver le projet",
+        "description": "L'archivage d’un projet le retirera de votre navigation latérale, bien que vous pourrez toujours y accéder depuis votre page de projets. Vous pouvez restaurer le projet ou le supprimer quand vous le souhaitez.",
+        "button": "Archiver le projet"
+      },
+      "delete_project": {
+        "title": "Supprimer le projet",
+        "description": "Lors de la suppression d’un projet, toutes les données et ressources de ce projet seront définitivement supprimées et ne pourront pas être récupérées.",
+        "button": "Supprimer mon projet"
+      },
+      "toast": {
+        "success": "Projet mis à jour avec succès",
+        "error": "Le projet n’a pas pu être mis à jour. Veuillez réessayer."
+      }
+    },
+    "members": {
+      "label": "Membres",
+      "project_lead": "Chef de projet",
+      "project_lead_description": "Sélectionnez le responsable du projet.",
+      "default_assignee": "Acteur par défaut",
+      "default_assignee_description": "Sélectionnez l’attributaire par défaut du projet.",
+      "project_subscribers": "Abonnés du projet",
+      "project_subscribers_description": "Sélectionnez les membres qui recevront des notifications pour ce projet.",
+      "guest_super_permissions": {
+        "title": "Accorder l’accès en lecture à tous les éléments de travail pour les utilisateurs invités :",
+        "sub_heading": "Cela permettra aux invités d’avoir un accès en lecture à tous les éléments de travail du projet."
+      },
+      "invite_members": {
+        "title": "Inviter des membres",
+        "sub_heading": "Invitez des membres à travailler sur votre projet.",
+        "select_co_worker": "Sélectionner un acteur"
+      }
+    },
+    "states": {
+      "heading": "États",
+      "description": "Définissez et personnalisez les états du flux de travail pour suivre la progression de vos éléments de travail.",
+      "describe_this_state_for_your_members": "Décrivez cet état pour vos membres.",
+      "empty_state": {
+        "title": "Aucun état disponible pour le groupe {groupKey}",
+        "description": "Veuillez créer un nouvel état"
+      }
+    },
+    "labels": {
+      "heading": "Étiquettes",
+      "description": "Créez des étiquettes personnalisées pour catégoriser et organiser vos éléments de travail",
+      "label_title": "Titre de l’étiquette",
+      "label_title_is_required": "Le titre de l’étiquette est requis",
+      "label_max_char": "Le nom de l’étiquette ne doit pas dépasser 255 caractères",
+      "toast": {
+        "error": "Erreur lors de la mise à jour de l’étiquette"
+      }
+    },
+    "estimates": {
+      "heading": "Estimations",
+      "description": "Elles vous aident à communiquer la complexité et la charge de travail de l’équipe.",
+      "label": "Estimations",
+      "title": "Activer les estimations pour mon projet",
+      "enable_description": "Elles vous aident à communiquer la complexité et la charge de travail de l’équipe.",
+      "no_estimate": "Sans estimation",
+      "new": "Nouveau système d’estimation",
+      "create": {
+        "custom": "Personnalisé",
+        "start_from_scratch": "Commencer depuis zéro",
+        "choose_template": "Choisir un modèle",
+        "choose_estimate_system": "Choisir un système d’estimation",
+        "enter_estimate_point": "Saisir une estimation",
+        "step": "Étape {step} de {total}",
+        "label": "Créer une estimation"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Estimation créée",
+            "message": "L’estimation a été créée avec succès"
+          },
+          "error": {
+            "title": "Échec de la création de l’estimation",
+            "message": "Nous n’avons pas pu créer la nouvelle estimation, veuillez réessayer."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Estimation modifiée",
+            "message": "L’estimation a été mise à jour dans votre projet."
+          },
+          "error": {
+            "title": "Échec de la modification de l’estimation",
+            "message": "Nous n’avons pas pu modifier l’estimation, veuillez réessayer"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Succès !",
+            "message": "Les estimations ont été activées."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Succès !",
+            "message": "Les estimations ont été désactivées."
+          },
+          "error": {
+            "title": "Erreur !",
+            "message": "L’estimation n’a pas pu être désactivée. Veuillez réessayer"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Estimations réorganisées",
+            "message": "Les estimations ont été réorganisées dans votre projet."
+          },
+          "error": {
+            "title": "Échec de la réorganisation des estimations",
+            "message": "Nous n'avons pas pu réorganiser les estimations, veuillez réessayer"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Système d’estimation créé",
+            "message": "Créé et activé avec succès"
+          },
+          "error": {
+            "title": "Erreur",
+            "message": "Une erreur s’est produite"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "L’estimation doit être supérieure à 0.",
+        "unable_to_process": "Nous ne pouvons pas traiter votre demande, veuillez réessayer.",
+        "numeric": "L’estimation doit être une valeur numérique.",
+        "character": "L’estimation doit être une valeur de caractère.",
+        "empty": "La valeur de l’estimation ne peut pas être vide.",
+        "already_exists": "La valeur de l’estimation existe déjà.",
+        "unsaved_changes": "Vous avez des modifications non enregistrées. Veuillez les enregistrer avant de cliquer sur Terminé",
+        "remove_empty": "L’estimation ne peut pas être vide. Saisissez une valeur dans chaque champ ou supprimez ceux pour lesquels vous n’avez pas de valeurs.",
+        "fill": "Veuillez remplir ce champ d'estimation",
+        "repeat": "La valeur d'estimation ne peut pas être répétée"
+      },
+      "systems": {
+        "points": {
+          "label": "Points",
+          "fibonacci": "Fibonacci",
+          "linear": "Linéaire",
+          "squares": "Carrés",
+          "custom": "Personnalisé"
+        },
+        "categories": {
+          "label": "Catégories",
+          "t_shirt_sizes": "Tailles de T-Shirt",
+          "easy_to_hard": "Facile à difficile",
+          "custom": "Personnalisé"
+        },
+        "time": {
+          "label": "Temps",
+          "hours": "Heures"
+        }
+      },
+      "edit": {
+        "title": "Modifier le système d'estimation",
+        "add_or_update": {
+          "title": "Ajouter, mettre à jour ou supprimer des estimations",
+          "description": "Gérer le système actuel en ajoutant, mettant à jour ou supprimant les points ou catégories."
+        },
+        "switch": {
+          "title": "Changer le type d'estimation",
+          "description": "Convertir votre système de points en système de catégories et vice versa."
+        }
+      },
+      "switch": "Changer de système d'estimation",
+      "current": "Système d'estimation actuel",
+      "select": "Sélectionner un système d'estimation"
+    },
+    "automations": {
+      "label": "Automatisations",
+      "heading": "Automatisations",
+      "description": "Configurez des actions automatisées pour fluidifier votre flux de gestion de projet et réduire les tâches manuelles.",
+      "auto-archive": {
+        "title": "Archiver automatiquement les éléments de travail fermés",
+        "description": "Plane archivera automatiquement les éléments de travail qui ont été complétés ou annulés.",
+        "duration": "Archiver automatiquement les éléments de travail fermés depuis"
+      },
+      "auto-close": {
+        "title": "Fermer automatiquement les éléments de travail",
+        "description": "Plane fermera automatiquement les éléments de travail qui n’ont pas été complétés ou annulés.",
+        "duration": "Fermer automatiquement les éléments de travail inactifs depuis",
+        "auto_close_status": "Statut de fermeture automatique"
+      },
+      "auto-remind": {
+        "title": "Rappels automatiques",
+        "description": "Plane enverra automatiquement des rappels via e-mail et notifications dans l'application pour garder votre équipe sur le bon chemin des délais.",
+        "duration": "Envoyer un rappel avant"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Pas encore d’étiquettes",
+        "description": "Créez des étiquettes pour organiser et filtrer les éléments de travail dans votre projet."
+      },
+      "estimates": {
+        "title": "Pas encore de systèmes d’estimation",
+        "description": "Créez un ensemble d’estimations pour communiquer le volume de travail par élément de travail.",
+        "primary_button": "Ajouter un système d’estimation"
+      },
+      "integrations": {
+        "title": "Aucune intégration configurée",
+        "description": "Configurez GitHub et d'autres intégrations pour synchroniser vos éléments de travail du projet."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Activer les flux de travail",
+        "description": "Définissez des flux de travail pour contrôler le déplacement des éléments de travail",
+        "no_states_tooltip": "Aucun état n’est ajouté au flux de travail.",
+        "no_work_item_types_tooltip": "Aucun type d’élément de travail n’est ajouté au flux de travail.",
+        "no_states_or_work_item_types_tooltip": "Aucun état ni type d’élément de travail n’est ajouté au flux de travail.",
+        "toast": {
+          "loading": {
+            "enabling": "Activation des flux de travail",
+            "disabling": "Désactivation des flux de travail"
+          },
+          "success": {
+            "title": "Succès !",
+            "message": "Flux de travail activés avec succès."
+          },
+          "error": {
+            "title": "Erreur !",
+            "message": "Échec de l’activation des flux de travail. Veuillez réessayer."
+          }
+        }
+      },
+      "heading": "Flux de travail",
+      "description": "Automatisez les transitions d’éléments de travail et définissez des règles pour contrôler la progression des tâches dans le pipeline de votre projet.",
+      "add_button": "Ajouter un nouveau flux de travail",
+      "search": "Rechercher des flux de travail",
+      "detail": {
+        "define": "Définir le flux de travail",
+        "add_states": "Ajouter des états",
+        "unmapped_states": {
+          "title": "États non mappés détectés",
+          "description": "Certains éléments de travail des types sélectionnés sont actuellement dans des états qui n’existent pas dans ce flux de travail.",
+          "note": "Si vous activez ce flux de travail, ces éléments passeront automatiquement à l’état initial de ce flux de travail.",
+          "label": "États manquants",
+          "tooltip": "Certains éléments de travail sont dans des états qui ne sont pas mappés à ce flux de travail. Ouvrez le flux de travail pour le vérifier."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Tous les états sont utilisés",
+          "description": "Tous les états définis pour ce projet sont déjà présents dans votre flux de travail actuel."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Ce flux de travail s’applique à tout type d’élément de travail non assigné à un flux de travail."
+      },
+      "create": {
+        "heading": "Créer un nouveau flux de travail",
+        "name": {
+          "placeholder": "Ajoutez un nom unique",
+          "validation": {
+            "max_length": "Le nom doit faire moins de 255 caractères",
+            "required": "Le nom est requis",
+            "invalid": "Le nom ne peut contenir que des lettres, des chiffres, des espaces, des tirets et des apostrophes"
+          }
+        },
+        "description": {
+          "placeholder": "Ajoutez une courte description",
+          "validation": {
+            "invalid": "La description ne peut contenir que des lettres, des chiffres, des espaces, des tirets et des apostrophes"
+          }
+        },
+        "work_item_type": {
+          "label": "Type d’élément de travail"
+        },
+        "success": {
+          "title": "Succès !",
+          "message": "Flux de travail créé avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de la création du flux de travail. Veuillez réessayer."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Succès !",
+          "message": "Flux de travail mis à jour avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de la mise à jour du flux de travail. Veuillez réessayer."
+        }
+      },
+      "delete": {
+        "loading": "Suppression du flux de travail",
+        "success": {
+          "title": "Succès !",
+          "message": "Flux de travail supprimé avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de la suppression du flux de travail. Veuillez réessayer."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Succès !",
+          "message": "États ajoutés avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de l’ajout des états. Veuillez réessayer."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Types d’éléments de travail",
+      "description": "Créez et personnalisez différents types d’éléments de travail avec des propriétés uniques"
+    },
+    "features": {
+      "cycles": {
+        "title": "Cycles",
+        "short_title": "Cycles",
+        "description": "Planifiez le travail dans des périodes flexibles qui s'adaptent au rythme et au tempo uniques de ce projet.",
+        "toggle_title": "Activer les cycles",
+        "toggle_description": "Planifiez le travail dans des périodes ciblées."
+      },
+      "modules": {
+        "title": "Modules",
+        "short_title": "Modules",
+        "description": "Organisez le travail en sous-projets avec des chefs de projet et des responsables dédiés.",
+        "toggle_title": "Activer les modules",
+        "toggle_description": "Les membres du projet pourront créer et modifier des modules."
+      },
+      "views": {
+        "title": "Vues",
+        "short_title": "Vues",
+        "description": "Enregistrez des tris, des filtres et des options d'affichage personnalisés ou partagez-les avec votre équipe.",
+        "toggle_title": "Activer les vues",
+        "toggle_description": "Les membres du projet pourront créer et modifier des vues."
+      },
+      "pages": {
+        "title": "Pages",
+        "short_title": "Pages",
+        "description": "Créez et modifiez du contenu libre : notes, documents, n'importe quoi.",
+        "toggle_title": "Activer les pages",
+        "toggle_description": "Les membres du projet pourront créer et modifier des pages."
+      },
+      "intake": {
+        "intake_responsibility": "Responsabilité d'ingestion",
+        "intake_sources": "Sources d'ingestion",
+        "title": "Réception",
+        "short_title": "Réception",
+        "description": "Permettez aux non-membres de partager des bugs, des commentaires et des suggestions ; sans perturber votre flux de travail.",
+        "toggle_title": "Activer la réception",
+        "toggle_description": "Permettre aux membres du projet de créer des demandes de réception dans l'application.",
+        "toggle_tooltip_on": "Demandez à l'administrateur du projet de l'activer.",
+        "toggle_tooltip_off": "Demandez à l'administrateur du projet de le désactiver.",
+        "notify_assignee": {
+          "title": "Notifier les responsables",
+          "description": "Pour une nouvelle demande d'ingestion, les responsables par défaut seront alertés via des notifications"
+        },
+        "in_app": {
+          "title": "Dans l'application",
+          "description": "Recevez de nouveaux éléments de travail des membres et invités de votre espace de travail sans perturber les existants."
+        },
+        "email": {
+          "title": "E-mail",
+          "description": "Collectez de nouveaux éléments de travail de toute personne envoyant un e-mail à une adresse Plane.",
+          "fieldName": "ID e-mail"
+        },
+        "form": {
+          "title": "Formulaires",
+          "description": "Permettez aux personnes hors de votre espace de travail de créer des éléments de travail potentiels via un formulaire dédié et sécurisé.",
+          "fieldName": "URL du formulaire par défaut",
+          "create_forms": "Créer des formulaires à l'aide des types d'éléments de travail",
+          "manage_forms": "Gérer les formulaires",
+          "manage_forms_tooltip": "Demandez à l'administrateur de l'espace de travail de gérer cela.",
+          "create_form": "Créer un formulaire",
+          "edit_form": "Modifier les détails du formulaire",
+          "form_title": "Titre du formulaire",
+          "form_title_required": "Le titre du formulaire est requis",
+          "work_item_type": "Type d'élément de travail",
+          "remove_property": "Supprimer la propriété",
+          "select_properties": "Sélectionner les propriétés",
+          "search_placeholder": "Rechercher des propriétés",
+          "toasts": {
+            "success_create": "Formulaire d'ingestion créé avec succès",
+            "success_update": "Formulaire d'ingestion mis à jour avec succès",
+            "error_create": "Échec de la création du formulaire d'ingestion",
+            "error_update": "Échec de la mise à jour du formulaire d'ingestion"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Définition des responsables...",
+            "success": {
+              "title": "Succès !",
+              "message": "Responsables définis avec succès."
+            },
+            "error": {
+              "title": "Erreur !",
+              "message": "Une erreur s'est produite lors de la définition des responsables. Veuillez réessayer."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Suivi du temps",
+        "short_title": "Suivi du temps",
+        "description": "Enregistrez le temps passé sur les éléments de travail et les projets.",
+        "toggle_title": "Activer le suivi du temps",
+        "toggle_description": "Les membres du projet pourront enregistrer le temps travaillé."
+      },
+      "milestones": {
+        "title": "Jalons",
+        "short_title": "Jalons",
+        "description": "Les jalons fournissent une couche pour aligner les éléments de travail vers des dates d'achèvement partagées.",
+        "toggle_title": "Activer les jalons",
+        "toggle_description": "Organisez les éléments de travail par échéances de jalons."
+      },
+      "toasts": {
+        "loading": "Mise à jour de la fonctionnalité du projet...",
+        "success": "Fonctionnalité du projet mise à jour avec succès.",
+        "error": "Une erreur s'est produite lors de la mise à jour de la fonctionnalité du projet. Veuillez réessayer."
+      }
+    },
+    "project_updates": {
+      "heading": "Mises à jour du projet",
+      "description": "Suivi consolidé et surveillance de la progression pour ce projet"
+    },
+    "templates": {
+      "heading": "Modèles",
+      "description": "Économisez 80% du temps consacré à la création de projets, d’éléments de travail et de pages en utilisant des modèles."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Planification automatique des cycles",
+        "description": "Maintenez les cycles en mouvement sans configuration manuelle.",
+        "tooltip": "Créez automatiquement de nouveaux cycles selon votre planning choisi.",
+        "edit_button": "Modifier",
+        "form": {
+          "cycle_title": {
+            "label": "Titre du cycle",
+            "placeholder": "Titre",
+            "tooltip": "Le titre sera complété par des numéros pour les cycles suivants. Par exemple : Conception - 1/2/3",
+            "validation": {
+              "required": "Le titre du cycle est requis",
+              "max_length": "Le titre ne doit pas dépasser 255 caractères"
+            }
+          },
+          "cycle_duration": {
+            "label": "Durée du cycle",
+            "unit": "Semaines",
+            "validation": {
+              "required": "La durée du cycle est requise",
+              "min": "La durée du cycle doit être d'au moins 1 semaine",
+              "max": "La durée du cycle ne peut pas dépasser 30 semaines",
+              "positive": "La durée du cycle doit être positive"
+            }
+          },
+          "cooldown_period": {
+            "label": "Période de refroidissement",
+            "unit": "jours",
+            "tooltip": "Pause entre les cycles avant le début du suivant.",
+            "validation": {
+              "required": "La période de refroidissement est requise",
+              "negative": "La période de refroidissement ne peut pas être négative"
+            }
+          },
+          "start_date": {
+            "label": "Jour de début du cycle",
+            "validation": {
+              "required": "La date de début est requise",
+              "past": "La date de début ne peut pas être dans le passé"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Nombre de cycles futurs",
+            "validation": {
+              "required": "Le nombre de cycles est requis",
+              "min": "Au moins 1 cycle est requis",
+              "max": "Impossible de planifier plus de 3 cycles"
+            }
+          },
+          "auto_rollover": {
+            "label": "Report automatique des éléments de travail",
+            "tooltip": "Le jour où un cycle se termine, déplacer tous les éléments de travail non terminés vers le cycle suivant."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Activation de la planification automatique des cycles",
+            "loading_disable": "Désactivation de la planification automatique des cycles",
+            "success": {
+              "title": "Succès !",
+              "message": "Planification automatique des cycles activée avec succès."
+            },
+            "error": {
+              "title": "Erreur !",
+              "message": "Échec de l'activation de la planification automatique des cycles."
+            }
+          },
+          "save": {
+            "loading": "Enregistrement de la configuration de planification automatique des cycles",
+            "success": {
+              "title": "Succès !",
+              "message_create": "Configuration de planification automatique des cycles enregistrée avec succès.",
+              "message_update": "Configuration de planification automatique des cycles mise à jour avec succès."
+            },
+            "error": {
+              "title": "Erreur !",
+              "message_create": "Échec de l'enregistrement de la configuration de planification automatique des cycles.",
+              "message_update": "Échec de la mise à jour de la configuration de planification automatique des cycles."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/project.json b/packages/i18n/src/locales/fr/project.json
new file mode 100644
index 0000000..8681827
--- /dev/null
+++ b/packages/i18n/src/locales/fr/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Créé le",
+      "updated_at": "Mis à jour le",
+      "name": "Nom"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Ajouter un cycle",
+    "more_details": "Plus de détails",
+    "cycle": "Cycle",
+    "update_cycle": "Mettre à jour le cycle",
+    "create_cycle": "Créer un cycle",
+    "no_matching_cycles": "Aucun cycle correspondant",
+    "remove_filters_to_see_all_cycles": "Supprimez les filtres pour voir tous les cycles",
+    "remove_search_criteria_to_see_all_cycles": "Supprimez les critères de recherche pour voir tous les cycles",
+    "only_completed_cycles_can_be_archived": "Seuls les cycles terminés peuvent être archivés",
+    "start_date": "Date de début",
+    "end_date": "Date de fin",
+    "in_your_timezone": "Dans votre fuseau horaire",
+    "transfer_work_items": "Transférer {count} éléments de travail",
+    "transfer": {
+      "no_cycles_available": "Aucun autre cycle disponible pour transférer les éléments de travail."
+    },
+    "date_range": "Plage de dates",
+    "add_date": "Ajouter une date",
+    "active_cycle": {
+      "label": "Cycle actif",
+      "progress": "Progression",
+      "chart": "Graphique d’avancement",
+      "priority_issue": "Éléments de travail prioritaires",
+      "assignees": "Assignés",
+      "issue_burndown": "Graphique d’avancement des éléments",
+      "ideal": "Idéal",
+      "current": "Actuel",
+      "labels": "Étiquettes",
+      "trailing": "En retard",
+      "leading": "En avance"
+    },
+    "upcoming_cycle": {
+      "label": "Cycle à venir"
+    },
+    "completed_cycle": {
+      "label": "Cycle terminé"
+    },
+    "status": {
+      "days_left": "Jours restants",
+      "completed": "Terminé",
+      "yet_to_start": "Pas encore commencé",
+      "in_progress": "En cours",
+      "draft": "Brouillon"
+    },
+    "action": {
+      "restore": {
+        "title": "Restaurer le cycle",
+        "success": {
+          "title": "Cycle restauré",
+          "description": "Le cycle a été restauré."
+        },
+        "failed": {
+          "title": "Échec de la restauration du cycle",
+          "description": "Le cycle n’a pas pu être restauré. Veuillez réessayer."
+        }
+      },
+      "favorite": {
+        "loading": "Ajout du cycle aux favoris",
+        "success": {
+          "description": "Cycle ajouté aux favoris.",
+          "title": "Succès !"
+        },
+        "failed": {
+          "description": "Impossible d’ajouter le cycle aux favoris. Veuillez réessayer.",
+          "title": "Erreur !"
+        }
+      },
+      "unfavorite": {
+        "loading": "Suppression du cycle des favoris",
+        "success": {
+          "description": "Cycle retiré des favoris.",
+          "title": "Succès !"
+        },
+        "failed": {
+          "description": "Impossible de retirer le cycle des favoris. Veuillez réessayer.",
+          "title": "Erreur !"
+        }
+      },
+      "update": {
+        "loading": "Mise à jour du cycle",
+        "success": {
+          "description": "Cycle mis à jour avec succès.",
+          "title": "Succès !"
+        },
+        "failed": {
+          "description": "Erreur lors de la mise à jour du cycle. Veuillez réessayer.",
+          "title": "Erreur !"
+        },
+        "error": {
+          "already_exists": "Vous avez déjà un cycle aux dates indiquées. Si vous souhaitez créer un cycle en brouillon, vous pouvez le faire en supprimant les deux dates."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Regroupez et planifiez votre travail en Cycles.",
+        "description": "Découpez le travail en périodes définies, planifiez à rebours depuis la date limite de votre projet pour fixer les dates, et progressez concrètement en équipe.",
+        "primary_button": {
+          "text": "Définissez votre premier cycle",
+          "comic": {
+            "title": "Les cycles sont des périodes répétitives.",
+            "description": "Un sprint, une itération, ou tout autre terme que vous utilisez pour le suivi hebdomadaire ou bimensuel du travail est un cycle."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Aucun élément de travail ajouté au cycle",
+        "description": "Ajoutez ou créez des éléments de travail que vous souhaitez planifier et livrer dans ce cycle",
+        "primary_button": {
+          "text": "Créer un nouvel élément de travail"
+        },
+        "secondary_button": {
+          "text": "Ajouter un élément existant"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Aucun élément de travail dans le cycle",
+        "description": "Aucun élément de travail dans le cycle. Les éléments sont soit transférés soit masqués. Pour voir les éléments masqués s’il y en a, mettez à jour vos propriétés d’affichage en conséquence."
+      },
+      "active": {
+        "title": "Aucun cycle actif",
+        "description": "Un cycle actif inclut toute période qui englobe la date d’aujourd’hui dans sa plage. Trouvez ici la progression et les détails du cycle actif."
+      },
+      "archived": {
+        "title": "Aucun cycle archivé pour le moment",
+        "description": "Pour organiser votre projet, archivez les cycles terminés. Retrouvez-les ici une fois archivés."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Enregistrez des vues filtrées pour votre projet. Créez-en autant que nécessaire",
+        "description": "Les vues sont un ensemble de filtres enregistrés que vous utilisez fréquemment ou auxquels vous souhaitez avoir un accès facile. Tous les acteurs d’un projet peuvent voir les vues de chacun et choisir celle qui convient le mieux à leurs besoins.",
+        "primary_button": {
+          "text": "Créez votre première vue",
+          "comic": {
+            "title": "Les vues fonctionnent sur les propriétés des éléments de travail.",
+            "description": "Vous pouvez créer une vue ici avec autant de propriétés comme filtres que souhaité."
+          }
+        },
+        "filter": {
+          "title": "Aucune vue correspondante",
+          "description": "Aucune vue ne correspond aux critères de recherche.\n Créez plutôt une nouvelle vue."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Aucun élément de travail archivé pour le moment",
+        "description": "Manuellement ou par automatisation, vous pouvez archiver les éléments de travail terminés ou annulés. Retrouvez-les ici une fois archivés.",
+        "primary_button": {
+          "text": "Configurer l’automatisation"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Aucun élément de travail trouvé correspondant aux filtres appliqués",
+        "secondary_button": {
+          "text": "Effacer tous les filtres"
+        }
+      },
+      "public": {
+        "title": "Pas encore de pages publiques",
+        "description": "Consultez ici les pages partagées avec tout le monde dans votre projet.",
+        "primary_button": {
+          "text": "Créez votre première page"
+        }
+      },
+      "archived": {
+        "title": "Pas encore de pages archivées",
+        "description": "Archivez les pages qui ne sont pas dans votre radar. Accédez-y ici quand nécessaire."
+      },
+      "shared": {
+        "title": "Pas encore de pages partagées",
+        "description": "Les pages que d’autres ont partagées avec vous apparaîtront ici."
+      }
+    },
+    "delete_view": {
+      "title": "Êtes-vous sûr de vouloir supprimer cette vue ?",
+      "content": "Si vous confirmez, toutes les options de tri, de filtrage et d’affichage et la mise en page que vous avez choisie pour cette vue seront définitivement supprimées sans possibilité de les restaurer."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Créez un élément de travail et assignez-le à quelqu’un, même à vous-même",
+        "description": "Pensez aux éléments de travail comme des tâches, du travail, ou des JTBD (Jobs To Be Done). Un élément de travail et ses sous-éléments sont généralement des actions temporelles assignées aux membres de votre équipe. Votre équipe crée, assigne et complète des éléments de travail pour faire progresser votre projet vers son objectif.",
+        "primary_button": {
+          "text": "Créez votre premier élément de travail",
+          "comic": {
+            "title": "Les éléments de travail sont les blocs de construction dans Plane.",
+            "description": "Refondre l’interface de Plane, Renouveler l’image de marque de l’entreprise, ou Lancer le nouveau système d’injection de carburant sont des exemples d’éléments de travail qui ont probablement des sous-éléments."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Aucun élément de travail archivé pour le moment",
+        "description": "Manuellement ou par automatisation, vous pouvez archiver les éléments de travail terminés ou annulés. Retrouvez-les ici une fois archivés.",
+        "primary_button": {
+          "text": "Configurer l’automatisation"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Aucun élément de travail trouvé correspondant aux filtres appliqués",
+        "secondary_button": {
+          "text": "Effacer tous les filtres"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Ajouter un module",
+    "update_module": "Mettre à jour le module",
+    "create_module": "Créer un module",
+    "archive_module": "Archiver le module",
+    "restore_module": "Restaurer le module",
+    "delete_module": "Supprimer le module",
+    "empty_state": {
+      "general": {
+        "title": "Associez vos jalons de projet aux Modules et suivez facilement le travail agrégé.",
+        "description": "Un groupe d’éléments de travail qui appartiennent à un parent logique et hiérarchique forme un module. Considérez-les comme un moyen de suivre le travail par étapes clés du projet. Ils ont leurs propres périodes et délais ainsi que des analyses pour vous aider à voir à quel point vous êtes proche ou pas d’atteindre une étape clé.",
+        "primary_button": {
+          "text": "Construisez votre premier module",
+          "comic": {
+            "title": "Les modules aident à regrouper le travail par étapes clés.",
+            "description": "Un module « panier », un module « châssis » et un module « entrepôt » sont tous de bons exemples de ce regroupement."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Aucun élément de travail dans le module",
+        "description": "Créez ou ajoutez des éléments de travail que vous souhaitez accomplir dans le cadre de ce module",
+        "primary_button": {
+          "text": "Créer de nouveaux éléments de travail"
+        },
+        "secondary_button": {
+          "text": "Ajouter un élément existant"
+        }
+      },
+      "archived": {
+        "title": "Aucun module archivé pour le moment",
+        "description": "Pour organiser votre projet, archivez les modules terminés ou annulés. Retrouvez-les ici une fois archivés."
+      },
+      "sidebar": {
+        "in_active": "Ce module n’est pas encore actif.",
+        "invalid_date": "Date invalide. Veuillez entrer une date valide."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Archiver le module",
+      "archive_module_description": "Seuls les modules terminés ou\nannulés peuvent être archivés.",
+      "delete_module": "Supprimer le module"
+    },
+    "toast": {
+      "copy": {
+        "success": "Lien du module copié dans le presse-papiers"
+      },
+      "delete": {
+        "success": "Module supprimé avec succès",
+        "error": "Échec de la suppression du module"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Rédigez une note, un document ou une base de connaissances complète. Obtenez l’aide de Galileo, l’assistant IA de Plane, pour commencer",
+        "description": "Les Pages sont un espace de réflexion dans Plane. Prenez des notes de réunion, formatez-les facilement, intégrez des éléments de travail, disposez-les à l’aide d’une bibliothèque de composants, et gardez-les tous dans le contexte de votre projet. Pour faciliter la rédaction de tout document, faites appel à Galileo, l’IA de Plane, avec un raccourci ou un clic sur un bouton.",
+        "primary_button": {
+          "text": "Créez votre première page"
+        }
+      },
+      "private": {
+        "title": "Pas encore de pages privées",
+        "description": "Ici vos écrits sont personnels et privés. Quand vous serez prêt à les partager, l'équipe n’est qu’à un clic.",
+        "primary_button": {
+          "text": "Créez votre première page"
+        }
+      },
+      "public": {
+        "title": "Pas encore de pages publiques",
+        "description": "Consultez ici les pages partagées avec tout le monde dans votre projet.",
+        "primary_button": {
+          "text": "Créez votre première page"
+        }
+      },
+      "archived": {
+        "title": "Pas encore de pages archivées",
+        "description": "Archivez les pages qui ne sont pas dans votre radar. Accédez-y ici quand nécessaire."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "L’Intake n’est pas activé pour le projet.",
+        "description": "L’Intake vous aide à gérer les demandes entrantes dans votre projet et à les ajouter comme éléments de travail dans votre flux. Activez l’Intake depuis les paramètres du projet pour gérer les demandes.",
+        "primary_button": {
+          "text": "Gérer les fonctionnalités"
+        }
+      },
+      "cycle": {
+        "title": "Les Cycles ne sont pas activés pour ce projet.",
+        "description": "Découpez le travail en segments temporels, planifiez à rebours depuis la date d’échéance de votre projet pour définir les étapes, et progressez concrètement en équipe. Activez la fonctionnalité Cycles pour votre projet pour commencer à les utiliser.",
+        "primary_button": {
+          "text": "Gérer les fonctionnalités"
+        }
+      },
+      "module": {
+        "title": "Les Modules ne sont pas activés pour le projet.",
+        "description": "Les Modules sont les éléments constitutifs de votre projet. Activez les modules depuis les paramètres du projet pour commencer à les utiliser.",
+        "primary_button": {
+          "text": "Gérer les fonctionnalités"
+        }
+      },
+      "page": {
+        "title": "Les Pages ne sont pas activées pour le projet.",
+        "description": "Les Pages sont les éléments constitutifs de votre projet. Activez les pages depuis les paramètres du projet pour commencer à les utiliser.",
+        "primary_button": {
+          "text": "Gérer les fonctionnalités"
+        }
+      },
+      "view": {
+        "title": "Les Vues ne sont pas activées pour le projet.",
+        "description": "Les Vues sont les éléments constitutifs de votre projet. Activez les vues depuis les paramètres du projet pour commencer à les utiliser.",
+        "primary_button": {
+          "text": "Gérer les fonctionnalités"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Planifié",
+      "in_progress": "En cours",
+      "paused": "En pause",
+      "completed": "Terminé",
+      "cancelled": "Annulé"
+    },
+    "layout": {
+      "list": "Vue liste",
+      "board": "Vue galerie",
+      "timeline": "Vue chronologique"
+    },
+    "order_by": {
+      "name": "Nom",
+      "progress": "Progression",
+      "issues": "Nombre d’éléments de travail",
+      "due_date": "Date d’échéance",
+      "created_at": "Date de création",
+      "manual": "Manuel"
+    }
+  },
+  "project_members": {
+    "full_name": "Nom complet",
+    "display_name": "Nom d’affichage",
+    "email": "E-mail",
+    "joining_date": "Date d’adhésion",
+    "role": "Rôle"
+  },
+  "project": {
+    "members_import": {
+      "title": "Importer des membres depuis un CSV",
+      "description": "Téléchargez un CSV avec les colonnes : E-mail et Rôle (5=Invité, 15=Membre, 20=Administrateur). Les utilisateurs doivent déjà être membres de l'espace de travail.",
+      "download_sample": "Télécharger un CSV d'exemple",
+      "dropzone": {
+        "active": "Déposez le fichier CSV ici",
+        "inactive": "Glissez-déposez ou cliquez pour télécharger",
+        "file_type": "Seuls les fichiers .csv sont pris en charge"
+      },
+      "buttons": {
+        "cancel": "Annuler",
+        "import": "Importer",
+        "try_again": "Réessayer",
+        "close": "Fermer",
+        "done": "Terminé"
+      },
+      "progress": {
+        "uploading": "Téléchargement...",
+        "importing": "Importation..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Importation terminée"
+        },
+        "message": {
+          "success": "{count} membre{plural} importé{plural} avec succès dans le projet.",
+          "no_imports": "Aucun nouveau membre n'a été importé depuis le fichier CSV."
+        },
+        "stats": {
+          "added": "Ajoutés",
+          "reactivated": "Réactivés",
+          "already_members": "Déjà membres",
+          "skipped": "Ignorés"
+        },
+        "download_errors": "Télécharger les détails ignorés"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Fichier invalide",
+          "message": "Seuls les fichiers CSV sont pris en charge."
+        },
+        "import_failed": {
+          "title": "Échec de l'importation",
+          "message": "Une erreur s'est produite."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/settings.json b/packages/i18n/src/locales/fr/settings.json
new file mode 100644
index 0000000..0ac8e1e
--- /dev/null
+++ b/packages/i18n/src/locales/fr/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Changer d’adresse e-mail",
+        "description": "Saisissez une nouvelle adresse e-mail pour recevoir un lien de vérification.",
+        "toasts": {
+          "success_title": "Succès !",
+          "success_message": "Adresse e-mail mise à jour. Veuillez vous reconnecter."
+        },
+        "form": {
+          "email": {
+            "label": "Nouvelle adresse e-mail",
+            "placeholder": "Saisissez votre e-mail",
+            "errors": {
+              "required": "L’e-mail est requis",
+              "invalid": "L’e-mail est invalide",
+              "exists": "Cette adresse e-mail existe déjà. Utilisez-en une autre.",
+              "validation_failed": "Échec de la validation de l’e-mail. Veuillez réessayer."
+            }
+          },
+          "code": {
+            "label": "Code unique",
+            "placeholder": "123456",
+            "helper_text": "Code de vérification envoyé à votre nouvel e-mail.",
+            "errors": {
+              "required": "Le code unique est requis",
+              "invalid": "Code de vérification invalide. Veuillez réessayer."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Continuer",
+          "confirm": "Confirmer",
+          "cancel": "Annuler"
+        },
+        "states": {
+          "sending": "Envoi…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Préférences",
+      "description": "Personnalisez votre expérience de l’application selon votre façon de travailler"
+    },
+    "notifications": {
+      "heading": "Notifications par e-mail",
+      "description": "Restez informé des éléments de travail auxquels vous êtes abonné. Activez cette option pour être notifié.",
+      "select_default_view": "Sélectionner la vue par défaut",
+      "compact": "Compact",
+      "full": "Plein écran"
+    },
+    "security": {
+      "heading": "Sécurité"
+    },
+    "api_tokens": {
+      "title": "Jetons d’accès personnel",
+      "description": "Générez des jetons API sécurisés pour intégrer vos données avec des systèmes et applications externes."
+    },
+    "activity": {
+      "heading": "Activité",
+      "description": "Suivez vos actions et modifications récentes dans tous les projets et éléments de travail."
+    },
+    "connections": {
+      "title": "Connexions",
+      "heading": "Connexions",
+      "description": "Gérez les paramètres de connexion de votre espace de travail."
+    }
+  },
+  "profile": {
+    "label": "Profil",
+    "page_label": "Votre travail",
+    "work": "Travail",
+    "details": {
+      "joined_on": "Inscrit le",
+      "time_zone": "Fuseau horaire"
+    },
+    "stats": {
+      "workload": "Charge de travail",
+      "overview": "Vue d’ensemble",
+      "created": "Éléments de travail créés",
+      "assigned": "Éléments de travail assignés",
+      "subscribed": "Éléments de travail suivis",
+      "state_distribution": {
+        "title": "Éléments de travail par état",
+        "empty": "Créez des éléments de travail pour les visualiser par état dans le graphique pour une meilleure analyse."
+      },
+      "priority_distribution": {
+        "title": "Éléments de travail par priorité",
+        "empty": "Créez des éléments de travail pour les visualiser par priorité dans le graphique pour une meilleure analyse."
+      },
+      "recent_activity": {
+        "title": "Activité récente",
+        "empty": "Nous n’avons pas trouvé de données. Veuillez consulter vos contributions",
+        "button": "Télécharger l'activité du jour",
+        "button_loading": "Téléchargement"
+      }
+    },
+    "actions": {
+      "profile": "Profil",
+      "security": "Sécurité",
+      "activity": "Activité",
+      "preferences": "Préférences",
+      "notifications": "Notifications",
+      "api-tokens": "Jetons d’accès personnel",
+      "connections": "Connexions"
+    },
+    "tabs": {
+      "summary": "Résumé",
+      "assigned": "Assigné",
+      "created": "Créé",
+      "subscribed": "Suivi",
+      "activity": "Activité"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Aucune activité pour le moment",
+        "description": "Commencez par créer un nouvel élément de travail ! Ajoutez-y des détails et des propriétés. Explorez davantage Plane pour voir votre activité."
+      },
+      "assigned": {
+        "title": "Aucun élément de travail ne vous est assigné",
+        "description": "Les éléments de travail qui vous sont assignés peuvent être suivis ici."
+      },
+      "created": {
+        "title": "Aucun élément de travail pour le moment",
+        "description": "Tous les éléments de travail que vous créez apparaissent ici, suivez-les directement ici."
+      },
+      "subscribed": {
+        "title": "Aucun élément de travail pour le moment",
+        "description": "Abonnez-vous aux éléments de travail qui vous intéressent, suivez-les tous ici."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Préférence système"
+      },
+      "light": {
+        "label": "Clair"
+      },
+      "dark": {
+        "label": "Sombre"
+      },
+      "light_contrast": {
+        "label": "Contraste clair élevé"
+      },
+      "dark_contrast": {
+        "label": "Contraste sombre élevé"
+      },
+      "custom": {
+        "label": "Thème personnalisé"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/stickies.json b/packages/i18n/src/locales/fr/stickies.json
new file mode 100644
index 0000000..92a13cc
--- /dev/null
+++ b/packages/i18n/src/locales/fr/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Vos post-it",
+    "placeholder": "cliquez pour écrire ici",
+    "all": "Toutes les post-it",
+    "no-data": "Notez une idée, saisissez une intuition ou captez une inspiration. Ajoutez un post-it pour commencer.",
+    "add": "Ajouter un post-it",
+    "search_placeholder": "Rechercher par titre",
+    "delete": "Supprimer le post-it",
+    "delete_confirmation": "Êtes-vous sûr de vouloir supprimer ce post-it ?",
+    "empty_state": {
+      "simple": "Notez une idée, saisissez une intuition ou captez une inspiration. Ajoutez un post-it pour commencer.",
+      "general": {
+        "title": "Les post-it sont des notes rapides et des tâches que vous prenez à la volée.",
+        "description": "Capturez vos pensées et idées facilement en créant des post-it que vous pouvez consulter à tout moment et de n’importe où.",
+        "primary_button": {
+          "text": "Ajouter un post-it"
+        }
+      },
+      "search": {
+        "title": "Cela ne correspond à aucun de vos post-it.",
+        "description": "Essayez un terme différent ou faites-nous savoir\nsi vous êtes sûr que votre recherche est correcte.",
+        "primary_button": {
+          "text": "Ajouter un post-it"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Le nom du post-it ne peut pas dépasser 100 caractères.",
+        "already_exists": "Il existe déjà un post-it sans description"
+      },
+      "created": {
+        "title": "Post-it créé",
+        "message": "Le post-it a été créé avec succès"
+      },
+      "not_created": {
+        "title": "Post-it non créé",
+        "message": "Le post-it n’a pas pu être créé"
+      },
+      "updated": {
+        "title": "Post-it mis à jour",
+        "message": "Le post-it a été mis à jour avec succès"
+      },
+      "not_updated": {
+        "title": "Post-it non mis à jour",
+        "message": "Le post-it n’a pas pu être mis à jour"
+      },
+      "removed": {
+        "title": "Post-it supprimé",
+        "message": "Le post-it a été supprimé avec succès"
+      },
+      "not_removed": {
+        "title": "Post-it non supprimé",
+        "message": "Le post-it n’a pas pu être supprimé"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/template.json b/packages/i18n/src/locales/fr/template.json
new file mode 100644
index 0000000..e95e818
--- /dev/null
+++ b/packages/i18n/src/locales/fr/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Modèles",
+      "description": "Économisez 80% du temps consacré à la création de projets, d'éléments de travail et de pages lorsque vous utilisez des modèles.",
+      "new_project_template": "Nouveau modèle de projet",
+      "new_work_item_template": "Nouveau modèle d’élément de travail",
+      "new_page_template": "Nouveau modèle de page",
+      "options": {
+        "project": {
+          "label": "Modèles de projet"
+        },
+        "work_item": {
+          "label": "Modèles d'éléments de travail"
+        },
+        "page": {
+          "label": "Modèles de page"
+        }
+      },
+      "create_template": {
+        "label": "Créer un modèle",
+        "no_permission": {
+          "project": "Contactez l'administrateur de votre projet pour créer des modèles",
+          "workspace": "Contactez l'administrateur de votre espace de travail pour créer des modèles"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Utiliser le modèle",
+          "loading": "Utilisation"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Dérivé de l'espace de travail"
+        },
+        "project": {
+          "info": "Dérivé du projet"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Nommez votre modèle de projet.",
+              "validation": {
+                "required": "Le nom du modèle est requis",
+                "maxLength": "Le nom du modèle doit comporter moins de 255 caractères"
+              }
+            },
+            "description": {
+              "placeholder": "Décrivez quand et comment utiliser ce modèle."
+            }
+          },
+          "name": {
+            "placeholder": "Nommez votre projet.",
+            "validation": {
+              "required": "Le titre du projet est requis",
+              "maxLength": "Le titre du projet doit comporter moins de 255 caractères"
+            }
+          },
+          "description": {
+            "placeholder": "Décrivez l'objectif et les buts de ce projet."
+          },
+          "button": {
+            "create": "Créer un modèle de projet",
+            "update": "Mettre à jour le modèle de projet"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Nommez votre modèle d'élément de travail.",
+              "validation": {
+                "required": "Le nom du modèle est requis",
+                "maxLength": "Le nom du modèle doit comporter moins de 255 caractères"
+              }
+            },
+            "description": {
+              "placeholder": "Décrivez quand et comment utiliser ce modèle."
+            }
+          },
+          "name": {
+            "placeholder": "Donnez un titre à cet élément de travail.",
+            "validation": {
+              "required": "Le titre de l'élément de travail est requis",
+              "maxLength": "Le titre de l'élément de travail doit comporter moins de 255 caractères"
+            }
+          },
+          "description": {
+            "placeholder": "Décrivez cet élément de travail afin qu'il soit clair ce que vous accomplirez lorsque vous le terminerez."
+          },
+          "button": {
+            "create": "Créer un modèle d'élément de travail",
+            "update": "Mettre à jour le modèle d'élément de travail"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Nommez votre modèle de page.",
+              "validation": {
+                "required": "Le nom du modèle est requis",
+                "maxLength": "Le nom du modèle doit comporter moins de 255 caractères"
+              }
+            },
+            "description": {
+              "placeholder": "Décrivez quand et comment utiliser ce modèle."
+            }
+          },
+          "name": {
+            "placeholder": "Page sans titre",
+            "validation": {
+              "maxLength": "Le nom de la page doit comporter moins de 255 caractères"
+            }
+          },
+          "button": {
+            "create": "Créer un modèle de page",
+            "update": "Mettre à jour le modèle de page"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Paramètres de publication} other {Publier sur le Marketplace}}",
+          "unpublish_action": "Retirer du Marketplace",
+          "title": "Rendez votre modèle découvrable et reconnaissable.",
+          "name": {
+            "label": "Nom du modèle",
+            "placeholder": "Nommez votre modèle",
+            "validation": {
+              "required": "Le nom du modèle est requis",
+              "maxLength": "Le nom du modèle doit comporter moins de 255 caractères"
+            }
+          },
+          "short_description": {
+            "label": "Description courte",
+            "placeholder": "Ce modèle est idéal pour les gestionnaires de projets qui gèrent plusieurs projets en même temps.",
+            "validation": {
+              "required": "La description courte est requise"
+            }
+          },
+          "description": {
+            "label": "Description",
+            "placeholder": "Améliorez la productivité et simplifiez la communication avec notre intégration de reconnaissance vocale.\n• Transcription en temps réel : Convertissez les mots prononcés en texte précis instantanément.\n• Création de tâches et de commentaires : Ajoutez des tâches, des descriptions et des commentaires via des commandes vocales.",
+            "validation": {
+              "required": "La description est requise"
+            }
+          },
+          "category": {
+            "label": "Catégorie",
+            "placeholder": "Choisissez où vous pensez que cela correspond le mieux. Vous pouvez en choisir plusieurs.",
+            "validation": {
+              "required": "Au moins une catégorie est requise"
+            }
+          },
+          "keywords": {
+            "label": "Mots-clés",
+            "placeholder": "Utilisez des termes que vous pensez que vos utilisateurs rechercheront lorsqu'ils cherchent ce modèle.",
+            "helperText": "Entrez des mots-clés séparés par des virgules qui aideront les gens à trouver ce modèle dans la recherche.",
+            "validation": {
+              "required": "Au moins un mot-clé est requis"
+            }
+          },
+          "website": {
+            "label": "URL du site web",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "URL invalide",
+              "maxLength": "L’URL doit comporter moins de 800 caractères"
+            }
+          },
+          "company_name": {
+            "label": "Nom de l'entreprise",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Le nom de l'entreprise est requis",
+              "maxLength": "Le nom de l'entreprise doit comporter moins de 255 caractères"
+            }
+          },
+          "contact_email": {
+            "label": "Adresse email du support",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Adresse email invalide",
+              "maxLength": "L'adresse email du support doit comporter moins de 255 caractères"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Lien vers votre politique de confidentialité",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "URL invalide",
+              "maxLength": "L'URL doit comporter moins de 800 caractères"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Lien vers vos conditions d'utilisation",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "URL invalide",
+              "maxLength": "L'URL doit comporter moins de 800 caractères"
+            }
+          },
+          "cover_image": {
+            "label": "Ajoutez une image de couverture qui sera affichée dans le Marketplace",
+            "upload_title": "Télécharger l'image de couverture",
+            "upload_placeholder": "Cliquez pour télécharger ou faites glisser et déposez pour télécharger une image de couverture",
+            "drop_here": "Déposer ici",
+            "click_to_upload": "Cliquer pour télécharger",
+            "invalid_file_or_exceeds_size_limit": "Fichier invalide ou dépasse la taille limite. Veuillez réessayer.",
+            "upload_and_save": "Télécharger et enregistrer",
+            "uploading": "Téléchargement",
+            "remove": "Supprimer",
+            "removing": "Suppression",
+            "validation": {
+              "required": "L'image de couverture est requise"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Incluez des documents et des images que vous pensez rendront les utilisateurs de ce modèle plus intéressés.",
+            "validation": {
+              "required": "Au moins une capture d'écran est requise"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Modèles",
+        "description": "Avec les modèles de projet, d'élément de travail et de page dans Plane, vous n'avez pas à créer un projet à partir de zéro ou à définir manuellement les propriétés des éléments de travail.",
+        "sub_description": "Récupérez 80% de votre temps d'administration lorsque vous utilisez des modèles."
+      },
+      "no_templates": {
+        "button": "Créez votre premier modèle"
+      },
+      "no_labels": {
+        "description": " Aucune étiquette pour le moment. Créez des étiquettes pour aider à organiser et filtrer les éléments de travail dans votre projet."
+      },
+      "no_modules": {
+        "description": "Aucun module pour le moment. Organisez le travail en sous-projets avec des responsables et des acteurs dédiés."
+      },
+      "no_work_items": {
+        "description": "Aucun élément de travail pour le moment. Ajoutez-en un pour structurer votre travail mieux."
+      },
+      "no_sub_work_items": {
+        "description": "Aucun sous-élément de travail pour le moment. Ajoutez-en un pour structurer votre travail mieux."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Il n'y a aucun modèle auquel vous avez accès.",
+          "description": "Veuillez créer un modèle"
+        },
+        "no_results": {
+          "title": "Cela ne correspond à aucun modèle.",
+          "description": "Essayez de rechercher avec d'autres termes."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Modèle créé",
+          "message": "{templateName}, le modèle de {templateType}, est maintenant disponible pour votre espace de travail."
+        },
+        "error": {
+          "title": "Nous n'avons pas pu créer ce modèle cette fois-ci.",
+          "message": "Essayez d'enregistrer à nouveau vos détails ou copiez-les dans un nouveau modèle, de préférence dans un autre onglet."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Modèle modifié",
+          "message": "{templateName}, le modèle de {templateType}, a été modifié."
+        },
+        "error": {
+          "title": "Nous n'avons pas pu enregistrer les modifications de ce modèle.",
+          "message": "Essayez d'enregistrer à nouveau vos détails ou revenez à ce modèle plus tard. Si vous rencontrez toujours des problèmes, contactez-nous."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Modèle supprimé",
+          "message": "{templateName}, le modèle de {templateType}, a été supprimé de votre espace de travail."
+        },
+        "error": {
+          "title": "Nous n'avons pas pu supprimer ce modèle cette fois-ci.",
+          "message": "Essayez de le supprimer à nouveau ou revenez-y plus tard. Si vous ne pouvez toujours pas le supprimer, contactez-nous."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Modèle retiré",
+          "message": "{templateName}, le modèle de {templateType}, a maintenant été retiré."
+        },
+        "error": {
+          "title": "Nous n'avons pas pu retirer ce modèle cette fois-ci.",
+          "message": "Essayez de le retirer à nouveau ou revenez-y plus tard. Si vous ne pouvez toujours pas le retirer, contactez-nous."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Supprimer le modèle",
+      "description": {
+        "prefix": "Êtes-vous sûr de vouloir supprimer le modèle-",
+        "suffix": "? Toutes les données relatives au modèle seront définitivement supprimées. Cette action ne peut pas être annulée."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Retirer le modèle",
+      "description": {
+        "prefix": "Êtes-vous sûr de vouloir retirer le modèle-",
+        "suffix": "? Ce modèle ne sera plus disponible pour les utilisateurs sur le marketplace."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Ajouter un nouveau modèle",
+        "project": "Ajouter un nouveau modèle"
+      },
+      "label": {
+        "project": "Choisir un modèle de projet",
+        "page": "Choisir à partir du modèle"
+      },
+      "tooltip": {
+        "work_item": "Choisir un modèle d'élément de travail"
+      },
+      "no_results": {
+        "work_item": "Aucun modèle trouvé.",
+        "project": "Aucun modèle trouvé."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/tour.json b/packages/i18n/src/locales/fr/tour.json
new file mode 100644
index 0000000..553228f
--- /dev/null
+++ b/packages/i18n/src/locales/fr/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Bienvenue dans votre espace de travail",
+        "description": "Pour vous aider à démarrer, nous avons créé un Projet Démo pour vous. Ajoutons votre premier élément de travail."
+      },
+      "step_one": {
+        "title": "Cliquez sur \"+ Ajouter un élément de travail\"",
+        "description": "Commencez en cliquant sur le bouton \"+ Nouvel élément de travail\". Vous pouvez créer des tâches, des bugs ou un type personnalisé qui correspond à vos besoins."
+      },
+      "step_two": {
+        "title": "Filtrez vos éléments de travail",
+        "description": "Utilisez des filtres pour réduire rapidement votre liste. Vous pouvez filtrer par statut, priorité ou membres de l équipe. "
+      },
+      "step_three": {
+        "title": "Affichez, regroupez et ordonnez les éléments de travail selon vos besoins.",
+        "description": "Voir les propriétés requises et regrouper ou ordonner les éléments de travail selon vos besoins."
+      },
+      "step_four": {
+        "title": "Visualisez comme vous le souhaitez",
+        "description": "Sélectionnez les propriétés que vous souhaitez voir dans la liste. Vous pouvez également regrouper et trier les éléments de travail à votre manière."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Progressez avec les Cycles",
+        "description": "Appuyez sur Q pour créer un Cycle. Nommez-le et définissez les dates—un seul cycle par projet."
+      },
+      "step_one": {
+        "title": "Créer un nouveau cycle",
+        "description": "Appuyez sur Q pour créer un Cycle. Nommez-le et définissez les dates—un seul cycle par projet."
+      },
+      "step_two": {
+        "title": "Cliquez sur \"+\"",
+        "description": "Commencez en cliquant sur le bouton \"+\". Ajoutez des éléments de travail nouveaux ou existants directement depuis la page Cycle."
+      },
+      "step_three": {
+        "title": "Résumé du cycle",
+        "description": "Suivez la progression du cycle, la productivité de l équipe et les priorités—et enquêtez si quelque chose prend du retard."
+      },
+      "step_four": {
+        "title": "Transférer les éléments de travail",
+        "description": "Après la date d échéance, un cycle se termine automatiquement. Déplacez le travail non terminé vers un autre cycle."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Divisez votre projet en Modules",
+        "description": "Les modules sont des projets plus petits et ciblés qui aident les utilisateurs à regrouper et organiser les éléments de travail dans des délais spécifiques."
+      },
+      "step_one": {
+        "title": "Créer un Module",
+        "description": "Les modules sont des projets plus petits et ciblés qui aident les utilisateurs à regrouper et organiser les éléments de travail dans des délais spécifiques."
+      },
+      "step_two": {
+        "title": "Cliquez sur \"+\"",
+        "description": "Commencez en cliquant sur le bouton \"+\". Ajoutez des éléments de travail nouveaux ou existants directement depuis la page Module."
+      },
+      "step_three": {
+        "title": "États du module",
+        "description": "Les modules utilisent ces statuts pour aider les utilisateurs à planifier et suivre clairement la progression et l étape."
+      },
+      "step_four": {
+        "title": "Progression du module",
+        "description": "La progression du module est suivie via les éléments terminés, avec des analyses pour surveiller les performances."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Documentez avec des Pages alimentées par l IA",
+        "description": "Les Pages dans Plane vous permettent de capturer, organiser et collaborer sur les informations du projet—sans outils externes."
+      },
+      "step_one": {
+        "title": "Rendre la page Publique ou Privée",
+        "description": "Les pages peuvent être définies comme publiques, visibles par tous dans votre espace de travail, ou privées, accessibles uniquement par vous."
+      },
+      "step_two": {
+        "title": "Utilisez la commande /",
+        "description": "Utilisez / sur une page pour ajouter du contenu parmi 16 types de blocs, y compris des listes, images, tableaux et intégrations."
+      },
+      "step_three": {
+        "title": "Actions de page",
+        "description": "Une fois votre page créée, vous pouvez cliquer sur le menu ••• dans le coin supérieur droit pour effectuer les actions suivantes."
+      },
+      "step_four": {
+        "title": "Table des matières",
+        "description": "Obtenez une vue d ensemble de votre page en cliquant sur l icône du panneau pour voir tous les titres."
+      },
+      "step_five": {
+        "title": "Historique des versions",
+        "description": "Les pages suivent toutes les modifications avec l historique des versions, vous permettant de restaurer les versions précédentes si nécessaire."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Rationalisez les demandes avec la réception",
+        "description": "Une fonctionnalité exclusive de Plane qui permet aux Invités de créer des éléments de travail pour les bugs, demandes ou tickets."
+      },
+      "step_one": {
+        "title": "Demandes de réception ouvertes/fermées",
+        "description": "Les demandes en attente restent dans l onglet Ouvertes, et une fois traitées par un administrateur ou un membre, elles passent à Fermées."
+      },
+      "step_two": {
+        "title": "Accepter/refuser une demande en attente",
+        "description": "Acceptez pour modifier et déplacer l élément de travail vers votre projet, ou refusez-le pour le marquer comme Annulé."
+      },
+      "step_three": {
+        "title": "Reporter pour l instant",
+        "description": "Un élément de travail peut être reporté pour le réviser plus tard. Il sera déplacé au bas de votre liste de demandes ouvertes."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Arrêtez de changer d’onglet. Connectez votre monde.",
+        "description": "Liez GitHub et Slack pour suivre les PR et résumer les discussions directement dans Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigation, réinventée",
+        "sub_title": "Votre espace de travail est maintenant plus facile à explorer avec une navigation plus intelligente et simplifiée.",
+        "highlight_1": "Structure rationalisée du panneau gauche pour une découverte plus rapide",
+        "highlight_2": "Recherche globale améliorée pour accéder instantanément à n importe quoi",
+        "highlight_3": "Regroupement de catégories plus intelligent pour plus de clarté et de concentration",
+        "footer": "Vous voulez un aperçu rapide?"
+      },
+      "step_zero": {
+        "title": "Trouvez n importe quoi instantanément",
+        "description": "Utilisez la recherche universelle pour accéder aux tâches, projets, pages et personnes—sans quitter votre flux de travail."
+      },
+      "step_one": {
+        "title": "Gardez le contrôle des mises à jour",
+        "description": "Votre boîte de réception conserve toutes les mentions, approbations et activités en un seul endroit, afin que vous ne manquiez jamais de travail important."
+      },
+      "step_two": {
+        "title": "Personnalisez votre Navigation",
+        "description": "Personnalisez ce que vous voyez et comment vous naviguez dans les Préférences."
+      }
+    },
+    "actions": {
+      "close": "Fermer",
+      "next": "Suivant",
+      "back": "Retour",
+      "done": "Terminé",
+      "take_a_tour": "Faire un tour",
+      "get_started": "Commencer",
+      "got_it": "Compris"
+    },
+    "seed_data": {
+      "title": "Voici votre projet démo",
+      "description": "Les projets vous permettent de gérer vos équipes, tâches et tout ce dont vous avez besoin pour accomplir les choses dans votre espace de travail."
+    }
+  },
+  "get_started": {
+    "title": "Bonjour {name}, bienvenue à bord!",
+    "description": "Voici tout ce dont vous avez besoin pour lancer votre aventure avec Plane.",
+    "checklist_section": {
+      "title": "Commencer",
+      "description": "Commencez votre configuration et voyez vos idées prendre vie plus rapidement.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Créer un projet"
+        },
+        "item_2": {
+          "title": "Créer un élément de travail"
+        },
+        "item_3": {
+          "title": "Inviter des membres de l équipe"
+        },
+        "item_4": {
+          "title": "Créer une page"
+        },
+        "item_5": {
+          "title": "Essayer le chat Plane AI"
+        },
+        "item_6": {
+          "title": "Lier les intégrations"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Invitez votre équipe",
+      "description": "Invitez des coéquipiers et commencez à construire ensemble."
+    },
+    "integrations_section": {
+      "title": "Boostez votre espace de travail",
+      "more_integrations": "Parcourir plus d intégrations"
+    },
+    "switch_to_plane_section": {
+      "title": "Découvrez pourquoi les équipes passent à Plane",
+      "description": "Comparez Plane avec les outils que vous utilisez aujourd hui et voyez la différence."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/update.json b/packages/i18n/src/locales/fr/update.json
new file mode 100644
index 0000000..ea08294
--- /dev/null
+++ b/packages/i18n/src/locales/fr/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Progrès",
+      "since_last_update": "Depuis la dernière mise à jour",
+      "comments": "{count, plural, one{# commentaire} other{# commentaires}}"
+    },
+    "add_update": "Ajouter une mise à jour",
+    "add_update_placeholder": "Ajoutez votre mise à jour ici",
+    "empty": {
+      "title": "Aucune mise à jour",
+      "description": "Vous pouvez voir les mises à jour ici."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Réaction créée",
+          "message": "Réaction créée avec succès."
+        },
+        "error": {
+          "title": "Réaction non créée",
+          "message": "La réaction n'a pas pu être créée."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Réaction supprimée",
+          "message": "Réaction supprimée avec succès."
+        },
+        "error": {
+          "title": "Réaction non supprimée",
+          "message": "La réaction n'a pas pu être supprimée."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Mise à jour créée",
+        "message": "Mise à jour créée avec succès."
+      },
+      "error": {
+        "title": "Mise à jour non créée",
+        "message": "La mise à jour n'a pas pu être créée."
+      }
+    },
+    "delete": {
+      "title": "Supprimer la mise à jour",
+      "confirmation": "Êtes-vous sûr de vouloir supprimer cette mise à jour ? Cette action est irréversible.",
+      "success": {
+        "title": "Mise à jour supprimée",
+        "message": "La mise à jour a été supprimée avec succès."
+      },
+      "error": {
+        "title": "Mise à jour non supprimée",
+        "message": "La mise à jour n'a pas pu être supprimée."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Mise à jour mise à jour",
+        "message": "Mise à jour mise à jour avec succès."
+      },
+      "error": {
+        "title": "Mise à jour non mise à jour",
+        "message": "La mise à jour n'a pas pu être mise à jour."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/wiki.json b/packages/i18n/src/locales/fr/wiki.json
new file mode 100644
index 0000000..75c45e2
--- /dev/null
+++ b/packages/i18n/src/locales/fr/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Général",
+      "private": "Privé",
+      "shared": "Partagé",
+      "archived": "Archivé"
+    },
+    "fallback_name": "Collection",
+    "form": {
+      "name_required": "Le titre de la collection est requis",
+      "name_max_length": "Le nom de la collection doit comporter moins de 255 caractères",
+      "name_placeholder_create": "Donnez un titre à la collection",
+      "name_placeholder_edit": "Nom de la collection"
+    },
+    "create_modal": {
+      "title": "Créer une collection",
+      "submit": "Créer la collection"
+    },
+    "edit_modal": {
+      "title": "Modifier la collection"
+    },
+    "delete_modal": {
+      "title": "Supprimer la collection",
+      "page_count": "Cette collection contient {pageCount} pages. Choisissez ce qui doit leur arriver.",
+      "transfer_title": "Transférer les pages et supprimer la collection",
+      "transfer_description": "Déplacez toutes les pages vers une autre collection avant la suppression. Les pages et leurs autorisations sont conservées.",
+      "transfer_warning": "Les pages déplacées hériteront des autorisations de la collection sélectionnée.",
+      "transfer_target_label": "Déplacer les pages vers",
+      "transfer_target_placeholder": "Sélectionnez une collection",
+      "delete_with_pages_title": "Supprimer la collection avec ses pages",
+      "delete_with_pages_description": "Supprime définitivement la collection et toutes ses pages. Cette action est irréversible.",
+      "submit": "Supprimer la collection"
+    },
+    "header": {
+      "add_page": "Ajouter une page"
+    },
+    "menu": {
+      "create_new_page": "Créer une nouvelle page",
+      "add_existing_page": "Ajouter une page existante",
+      "edit_collection": "Modifier la collection",
+      "collection_options": "Options de la collection"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Rechercher des pages",
+      "success_message": "{count} pages ont été ajoutées à la collection.",
+      "error_message": "Les pages n'ont pas pu être déplacées. Veuillez réessayer.",
+      "no_pages_found": "Aucune page ne correspond à votre recherche",
+      "no_pages_available": "Aucune page disponible à déplacer",
+      "submit": "Déplacer"
+    },
+    "list": {
+      "invite_only": "Sur invitation uniquement",
+      "remove_error": "La page n'a pas pu être retirée de la collection.",
+      "no_matching_pages": "Aucune page correspondante",
+      "remove_search_criteria": "Supprimez les critères de recherche pour voir toutes les pages",
+      "remove_filters": "Supprimez les filtres pour voir toutes les pages",
+      "no_pages_title": "Aucune page pour le moment",
+      "no_pages_description": "Cette collection ne contient aucune page pour le moment.",
+      "untitled": "Sans titre",
+      "restricted_access": "Accès restreint",
+      "collapse_page": "Réduire la page",
+      "expand_page": "Développer la page",
+      "page_actions": "Actions de la page",
+      "page_link_copied": "Lien de la page copié dans le presse-papiers.",
+      "columns": {
+        "page_name": "Nom de la page",
+        "owner": "Propriétaire",
+        "nested_pages": "Pages imbriquées",
+        "last_activity": "Dernière activité",
+        "actions": "Actions"
+      }
+    },
+    "toasts": {
+      "created": "Collection créée avec succès.",
+      "create_error": "La collection n'a pas pu être créée. Veuillez réessayer.",
+      "renamed": "Collection renommée avec succès.",
+      "rename_error": "La collection n'a pas pu être mise à jour. Veuillez réessayer.",
+      "transferred_deleted": "Les pages ont été transférées et la collection supprimée.",
+      "deleted_with_pages": "La collection et ses pages ont été supprimées.",
+      "delete_error": "La collection n'a pas pu être supprimée. Veuillez réessayer.",
+      "target_required": "Veuillez sélectionner une collection vers laquelle déplacer les pages.",
+      "create_page_error": "La page n'a pas pu être créée. Veuillez réessayer.",
+      "create_page_in_collection_error": "La page n'a pas pu être créée ou ajoutée à la collection. Veuillez réessayer.",
+      "collection_link_copied": "Lien de la collection copié dans le presse-papiers."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Mettez à niveau pour débloquer le Wiki",
+      "description": "Débloquez les pages publiques, l’historique des versions, les pages partagées, la collaboration en temps réel et les pages d’espace de travail pour les wikis, la documentation d’entreprise et les bases de connaissances avec Plane Pro.",
+      "upgrade_button": {
+        "text": "Mettre à niveau"
+      },
+      "learn_more_button": {
+        "text": "En savoir plus"
+      },
+      "download_button": {
+        "text": "Télécharger les données",
+        "loading": "Téléchargement"
+      },
+      "tabs": {
+        "nested_pages": "Pages imbriquées",
+        "add_embeds": "Ajouter des intégrations",
+        "publish_pages": "Publier des pages",
+        "comments": "Commentaires"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Les pages imbriquées nécessitent un forfait payant. Mettez à niveau pour débloquer."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/work-item-type.json b/packages/i18n/src/locales/fr/work-item-type.json
new file mode 100644
index 0000000..96b5d0a
--- /dev/null
+++ b/packages/i18n/src/locales/fr/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Types d'éléments de travail",
+    "label_lowercase": "types d'éléments de travail",
+    "settings": {
+      "description": "Personnalisez et ajoutez vos propres propriétés pour l’adapter aux besoins de votre équipe.",
+      "cant_delete_default_message": "Ce type d'élément de travail ne peut pas être supprimé car il est défini comme le type par défaut pour ce projet.",
+      "set_as_default": "Définir par défaut",
+      "cant_set_default_inactive_message": "Activez ce type avant de le définir par défaut",
+      "set_default_confirmation": {
+        "title": "Définir comme type d'élément de travail par défaut",
+        "description": "Définir {name} par défaut l'importera dans tous les projets de cet espace de travail. Tous les nouveaux éléments de travail utiliseront ce type par défaut.",
+        "confirm_button": "Définir par défaut"
+      },
+      "properties": {
+        "title": "Propriétés",
+        "description": "Créez et personnalisez des propriétés.",
+        "tooltip": "Chaque type d'élément de travail est livré avec un ensemble de propriétés par défaut comme Titre, Description, Assigné, État, Priorité, Date de début, Date d'échéance, Module, Cycle, etc. Vous pouvez également personnaliser et ajouter vos propres propriétés pour l'adapter aux besoins de votre équipe.",
+        "add_button": "Ajouter une nouvelle propriété",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Importer depuis l’espace de travail"
+          }
+        },
+        "dropdown": {
+          "label": "Type de propriété",
+          "placeholder": "Sélectionner le type"
+        },
+        "property_type": {
+          "text": {
+            "label": "Texte"
+          },
+          "number": {
+            "label": "Nombre"
+          },
+          "dropdown": {
+            "label": "Liste déroulante"
+          },
+          "boolean": {
+            "label": "Booléen"
+          },
+          "date": {
+            "label": "Date"
+          },
+          "member_picker": {
+            "label": "Sélecteur de membre"
+          },
+          "formula": {
+            "label": "Formule"
+          }
+        },
+        "attributes": {
+          "label": "Attributs",
+          "text": {
+            "single_line": {
+              "label": "Ligne unique"
+            },
+            "multi_line": {
+              "label": "Paragraphe"
+            },
+            "readonly": {
+              "label": "Lecture seule",
+              "header": "Données en lecture seule"
+            },
+            "invalid_text_format": {
+              "label": "Format de texte invalide"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Ajouter un nombre"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Sélection unique"
+            },
+            "multi_select": {
+              "label": "Sélection multiple"
+            },
+            "no_default_value": {
+              "label": "Pas de valeur par défaut"
+            }
+          },
+          "boolean": {
+            "label": "Vrai | Faux",
+            "no_default": "Pas de valeur par défaut"
+          },
+          "option": {
+            "create_update": {
+              "label": "Options",
+              "form": {
+                "placeholder": "Ajouter une option",
+                "errors": {
+                  "name": {
+                    "required": "Le nom de l'option est requis.",
+                    "integrity": "Une option avec le même nom existe déjà."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Sélectionner une option",
+                "multi": {
+                  "default": "Sélectionner des options",
+                  "variable": "{count} options sélectionnées"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Succès !",
+              "message": "Propriété {name} créée avec succès."
+            },
+            "error": {
+              "title": "Erreur !",
+              "message": "Échec de la création de la propriété. Veuillez réessayer !"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Succès !",
+              "message": "Propriété {name} mise à jour avec succès."
+            },
+            "error": {
+              "title": "Erreur !",
+              "message": "Échec de la mise à jour de la propriété. Veuillez réessayer !"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Succès !",
+              "message": "Propriété {name} supprimée avec succès."
+            },
+            "error": {
+              "title": "Erreur !",
+              "message": "Échec de la suppression de la propriété. Veuillez réessayer !"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} la propriété {name}",
+            "success": {
+              "title": "Succès !",
+              "message": "Propriété {name} {action} avec succès."
+            },
+            "error": {
+              "title": "Erreur !",
+              "message": "Échec de l'{action} de la propriété. Veuillez réessayer !"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Créer une nouvelle propriété personnalisée",
+            "update": "Mettre à jour la propriété personnalisée"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Titre"
+            },
+            "description": {
+              "placeholder": "Description"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Vous devez nommer votre propriété.",
+              "max_length": "Le nom de la propriété ne doit pas dépasser 255 caractères."
+            },
+            "property_type": {
+              "required": "Vous devez sélectionner un type de propriété."
+            },
+            "options": {
+              "required": "Vous devez ajouter au moins une option."
+            },
+            "formula": {
+              "required": "L'expression de formule est requise.",
+              "invalid": "Formule invalide : {error}",
+              "circular_reference": "Référence circulaire détectée. Une formule ne peut pas se référencer elle-même directement ou indirectement.",
+              "invalid_reference": "La formule fait référence à une propriété inexistante."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Champ de formule",
+          "tooltip": "Entrez une formule en utilisant la syntaxe '{'Nom du champ'}'. Prend en charge les opérateurs +, -, *, / et &.",
+          "placeholder": "Écrire la formule",
+          "test_button": "Tester",
+          "validating": "Validation en cours",
+          "validation_success": "La formule est valide ! Retourne {resultType}",
+          "validation_success_with_refs": "La formule est valide ! Retourne {resultType} ({count} champ(s) référencé(s))",
+          "error": {
+            "empty": "Veuillez entrer une formule",
+            "missing_context": "Contexte d'espace de travail, de projet ou de type d'élément de travail manquant",
+            "validation_failed": "La validation a échoué"
+          },
+          "picker": {
+            "no_match": "Aucune propriété correspondante",
+            "no_available": "Aucune propriété disponible"
+          }
+        },
+        "enable_disable": {
+          "label": "Actif",
+          "tooltip": {
+            "disabled": "Cliquer pour désactiver",
+            "enabled": "Cliquer pour activer"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Supprimer cette propriété",
+          "description": "La suppression des propriétés peut entraîner la perte des données existantes.",
+          "secondary_description": "Voulez-vous plutôt désactiver la propriété ?",
+          "primary_button": "{action}, supprimer",
+          "secondary_button": "Oui, désactiver"
+        },
+        "mandate_confirmation": {
+          "label": "Propriété obligatoire",
+          "content": "Il semble y avoir une option par défaut pour cette propriété. Rendre la propriété obligatoire supprimera la valeur par défaut et les utilisateurs devront ajouter une valeur de leur choix.",
+          "tooltip": {
+            "disabled": "Ce type de propriété ne peut pas être rendu obligatoire",
+            "enabled": "Décocher pour marquer le champ comme optionnel",
+            "checked": "Cocher pour marquer le champ comme obligatoire"
+          }
+        },
+        "empty_state": {
+          "title": "Ajouter des propriétés personnalisées",
+          "description": "Les nouvelles propriétés que vous ajoutez pour ce type d'élément de travail apparaîtront ici."
+        }
+      },
+      "types": {
+        "title": "Types",
+        "description": "Créez et personnalisez les types d’éléments de travail avec des propriétés.",
+        "sort_options": {
+          "project_count": "Nombre de projets concernés"
+        },
+        "filter_options": {
+          "show_active": "Afficher les actifs",
+          "show_inactive": "Afficher les inactifs"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Créer nouveau",
+            "import_from_workspace": "Importer depuis l’espace de travail"
+          },
+          "banner": {
+            "with_access": "Activez les types d’éléments de travail pour importer des types depuis le niveau espace de travail",
+            "without_access": "Les types d’éléments de travail sont désactivés. Contactez l’administrateur de l’espace de travail pour les activer dans les paramètres de l’espace de travail."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Propriétés personnalisées",
+        "add_button": "Ajouter des propriétés",
+        "modal": {
+          "title": "Ajouter des propriétés",
+          "empty": {
+            "title": "Aucune propriété disponible",
+            "description": "Toutes les propriétés ont déjà été liées à ce type."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Dissocier la propriété",
+          "description": "Dissocier cette propriété supprimera définitivement toutes ses valeurs dans tous les éléments de travail utilisant ce type. Cette action est irréversible.",
+          "input_label": "Tapez",
+          "input_label_suffix": "pour continuer :",
+          "confirm": "Dissocier la propriété",
+          "loading": "Dissociation"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Supprimer ce type",
+        "description": "La suppression de types peut entraîner la perte de données existantes.",
+        "can_disable_warning": "Voulez-vous désactiver le type à la place ?",
+        "primary_button": "Oui, supprime-le",
+        "toast": {
+          "success": {
+            "title": "Succès !",
+            "message": "Type d'élément de travail supprimé avec succès."
+          },
+          "error": {
+            "title": "Erreur !",
+            "message": "Échec de la suppression du type d'élément de travail. Veuillez réessayer !"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Impossible de supprimer le type d'élément de travail par défaut",
+          "cannot_delete_work_item_type_with_associated_work_items": "Impossible de supprimer le type d'élément de travail avec des éléments de travail associés"
+        }
+      }
+    },
+    "create": {
+      "title": "Créer un type d'élément de travail",
+      "button": "Ajouter un type d'élément de travail",
+      "toast": {
+        "success": {
+          "title": "Succès !",
+          "message": "Type d'élément de travail créé avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": {
+            "default": "Échec de la création du type d’élément de travail. Veuillez réessayer !",
+            "conflict": "Le type {name} existe déjà. Choisissez un autre nom."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Mettre à jour le type d'élément de travail",
+      "button": "Mettre à jour le type d'élément de travail",
+      "toast": {
+        "success": {
+          "title": "Succès !",
+          "message": "Type d'élément de travail {name} mis à jour avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": {
+            "default": "Échec de la mise à jour du type d’élément de travail. Veuillez réessayer !",
+            "conflict": "Le type {name} existe déjà. Choisissez un autre nom."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Donnez à ce type d'élément de travail un nom unique"
+        },
+        "description": {
+          "placeholder": "Décrivez à quoi sert ce type d'élément de travail et quand il doit être utilisé."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} le type d'élément de travail {name}",
+        "success": {
+          "title": "Succès !",
+          "message": "Type d'élément de travail {name} {action} avec succès."
+        },
+        "error": {
+          "title": "Erreur !",
+          "message": "Échec de l'{action} du type d'élément de travail. Veuillez réessayer !"
+        }
+      },
+      "tooltip": "Cliquer pour {action}"
+    },
+    "change_confirmation": {
+      "title": "Changer le type d'élément de travail ?",
+      "description": "Le changement du type d'élément de travail peut entraîner la perte de valeurs de propriétés personnalisées spécifiques au type actuel. Cette action ne peut pas être annulée.",
+      "button": {
+        "loading": "Changement en cours",
+        "default": "Changer le type"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Activer les types d'éléments de travail",
+        "description": "Adaptez les éléments de travail à votre travail avec les types d'éléments de travail. Personnalisez avec des icônes, des arrière-plans et des propriétés et configurez-les pour ce projet.",
+        "primary_button": {
+          "text": "Activer"
+        },
+        "confirmation": {
+          "title": "Une fois activés, les types d'éléments de travail ne peuvent pas être désactivés.",
+          "description": "L'élément de travail de Plane deviendra le type d'élément de travail par défaut pour ce projet et apparaîtra avec son icône et son arrière-plan dans ce projet.",
+          "button": {
+            "default": "Activer",
+            "loading": "Configuration en cours"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Passez à Pro pour activer les types d'éléments de travail.",
+        "description": "Adaptez les éléments de travail à votre travail avec les types d'éléments de travail. Personnalisez avec des icônes, des arrière-plans et des propriétés et configurez-les pour ce projet.",
+        "primary_button": {
+          "text": "Obtenir Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Mettez à niveau pour activer les types d'éléments de travail.",
+        "description": "Adaptez les éléments de travail à votre travail avec les types d'éléments de travail. Personnalisez avec des icônes, des arrière-plans et des propriétés et configurez-les pour ce projet.",
+        "primary_button": {
+          "text": "Mettre à niveau"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hiérarchie",
+      "tab_label": "Hiérarchie",
+      "description": "Configurez les niveaux de hiérarchie pour organiser votre travail. Chaque niveau définit une relation parent avec l'élément directement au-dessus et une relation enfant avec l'élément directement en dessous. ",
+      "sidebar_label": "Hiérarchie",
+      "enable_control": {
+        "title": "Activer la hiérarchie",
+        "description": "Créez des relations parent-enfant entre différents types d'éléments de travail.",
+        "tooltip": "Vous ne pouvez pas désactiver la hiérarchie une fois qu'elle est activée."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Définissez d'abord les types d'éléments de travail pour créer une nouvelle hiérarchie.",
+        "cta": "Paramètres des types d'éléments de travail"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Glissez-déposez un type pour ajouter un nouveau niveau de hiérarchie",
+      "empty_level_placeholder": "Glissez-déposez un type d'élément de travail vers le niveau {level}",
+      "drag_tooltip": "Faire glisser pour changer le niveau",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Définir par défaut",
+          "toast": {
+            "loading": "Définition par défaut en cours...",
+            "success": {
+              "title": "Succès !",
+              "message": "Niveau de hiérarchie {level} défini par défaut avec succès."
+            },
+            "error": {
+              "title": "Erreur !",
+              "message": "Impossible de définir le niveau de hiérarchie {level} par défaut. Veuillez réessayer."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Déplacement de {workItemTypeName} vers le niveau {level}...",
+        "success": {
+          "title": "Succès !",
+          "message": "{workItemTypeName} a été déplacé vers le niveau {level} avec succès."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "L'enregistrement rompra les liens existants",
+      "content": {
+        "intro": "Le type d'élément de travail {workItemTypeName} comporte :",
+        "parent_items": "{count, plural, one {# lien parent sera supprimé} other {# liens parents seront supprimés}}.",
+        "child_items": "{count, plural, one {sous-élément de travail} other {sous-éléments de travail}}",
+        "parent_line_suffix_when_also_children": ", et ",
+        "footer": "Cette modification supprimera les relations parent-enfant des éléments de travail existants du type {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Saisissez « confirmer » pour continuer.",
+        "placeholder": "confirmer"
+      },
+      "error_toast": {
+        "title": "Erreur !",
+        "message": "Échec du déliage et de l'enregistrement. Veuillez réessayer."
+      },
+      "confirm_button": {
+        "loading": "Enregistrement",
+        "default": "Enregistrer quand même"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Erreur !",
+        "message": "Le type d'élément de travail sélectionné ne peut pas être utilisé pour créer un nouvel élément de travail car cela enfreint les règles de hiérarchie."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Erreur !",
+        "message": "Le type d'élément de travail ne peut pas être mis à jour car cela enfreint les règles de hiérarchie."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Niveau de hiérarchie",
+      "invalid_level_toast": {
+        "title": "Erreur !",
+        "message": "Le type d'élément de travail ne peut pas être mis à jour car cela enfreint les règles de hiérarchie."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/work-item.json b/packages/i18n/src/locales/fr/work-item.json
new file mode 100644
index 0000000..49d15f3
--- /dev/null
+++ b/packages/i18n/src/locales/fr/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Élément de travail} other {Éléments de travail}}",
+    "all": "Tous les éléments de travail",
+    "edit": "Modifier l’élément de travail",
+    "title": {
+      "label": "Titre de l’élément de travail",
+      "required": "Le titre de l’élément de travail est requis."
+    },
+    "add": {
+      "press_enter": "Appuyez sur 'Entrée' pour ajouter un autre élément de travail",
+      "label": "Ajouter un élément de travail",
+      "cycle": {
+        "failed": "L’élément de travail n’a pas pu être ajouté au cycle. Veuillez réessayer.",
+        "success": "{count, plural, one {Élément de travail} other {Éléments de travail}} ajouté(s) au cycle avec succès.",
+        "loading": "Ajout de {count, plural, one {l’élément de travail} other {éléments de travail}} au cycle"
+      },
+      "assignee": "Ajouter des assignés",
+      "start_date": "Ajouter une date de début",
+      "due_date": "Ajouter une date d’échéance",
+      "parent": "Ajouter un élément de travail parent",
+      "sub_issue": "Ajouter un sous-élément de travail",
+      "dependency": "Ajouter une dépendance",
+      "relation": "Ajouter une relation",
+      "link": "Ajouter un lien",
+      "existing": "Ajouter un élément de travail existant"
+    },
+    "remove": {
+      "label": "Supprimer l’élément de travail",
+      "cycle": {
+        "loading": "Suppression de l’élément de travail du cycle",
+        "success": "Élément de travail supprimé du cycle avec succès.",
+        "failed": "L’élément de travail n’a pas pu être supprimé du cycle. Veuillez réessayer."
+      },
+      "module": {
+        "loading": "Suppression de l’élément de travail du module",
+        "success": "Élément de travail supprimé du module avec succès.",
+        "failed": "L’élément de travail n’a pas pu être supprimé du module. Veuillez réessayer."
+      },
+      "parent": {
+        "label": "Supprimer l’élément de travail parent"
+      }
+    },
+    "new": "Nouvel élément de travail",
+    "adding": "Ajout d’un élément de travail",
+    "create": {
+      "success": "Élément de travail créé avec succès"
+    },
+    "priority": {
+      "urgent": "Urgent",
+      "high": "Haute",
+      "medium": "Moyenne",
+      "low": "Basse"
+    },
+    "display": {
+      "properties": {
+        "label": "Propriétés d’affichage",
+        "id": "ID",
+        "issue_type": "Type d’élément de travail",
+        "sub_issue_count": "Nombre de sous-éléments",
+        "attachment_count": "Nombre de pièces jointes",
+        "created_on": "Créé le",
+        "sub_issue": "Sous-élément de travail",
+        "work_item_count": "Nombre d’éléments de travail"
+      },
+      "extra": {
+        "show_sub_issues": "Afficher les sous-éléments",
+        "show_empty_groups": "Afficher les groupes vides"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Cette disposition est triée par",
+      "list": "Liste",
+      "kanban": "Tableau",
+      "calendar": "Calendrier",
+      "spreadsheet": "Tableau",
+      "gantt": "Chronologie",
+      "title": {
+        "list": "Disposition en liste",
+        "kanban": "Disposition en tableau",
+        "calendar": "Disposition en calendrier",
+        "spreadsheet": "Disposition en tableau",
+        "gantt": "Disposition en chronologie"
+      }
+    },
+    "states": {
+      "active": "Actif",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Ajouter un commentaire",
+      "switch": {
+        "private": "Passer en commentaire privé",
+        "public": "Passer en commentaire public"
+      },
+      "create": {
+        "success": "Commentaire créé avec succès",
+        "error": "Échec de la création du commentaire. Veuillez réessayer plus tard."
+      },
+      "update": {
+        "success": "Commentaire mis à jour avec succès",
+        "error": "Échec de la mise à jour du commentaire. Veuillez réessayer plus tard."
+      },
+      "remove": {
+        "success": "Commentaire supprimé avec succès",
+        "error": "Échec de la suppression du commentaire. Veuillez réessayer plus tard."
+      },
+      "upload": {
+        "error": "Échec du téléchargement du fichier. Veuillez réessayer plus tard."
+      },
+      "copy_link": {
+        "success": "Lien du commentaire copié dans le presse-papiers",
+        "error": "Erreur lors de la copie du lien du commentaire. Veuillez réessayer plus tard."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Ajouter une réponse",
+          "placeholder": "Ajouter une réponse"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Échec de la récupération des réponses"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Réponse créée avec succès"
+            },
+            "error": {
+              "message": "Échec de la création de la réponse"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Réponse mise à jour avec succès"
+            },
+            "error": {
+              "message": "Échec de la mise à jour de la réponse"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Réponse supprimée avec succès"
+            },
+            "error": {
+              "message": "Échec de la suppression de la réponse"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "L’élément de travail n’existe pas",
+        "description": "L’élément de travail que vous recherchez n’existe pas, a été archivé ou a été supprimé.",
+        "primary_button": {
+          "text": "Voir les autres éléments de travail"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Éléments de travail frères"
+    },
+    "archive": {
+      "description": "Seuls les éléments de travail\nterminés ou annulés peuvent être archivés",
+      "label": "Archiver l’élément de travail",
+      "confirm_message": "Êtes-vous sûr de vouloir archiver l’élément de travail ? Tous vos éléments archivés peuvent être restaurés ultérieurement.",
+      "success": {
+        "label": "Archivage réussi",
+        "message": "Vos archives se trouvent dans les archives du projet."
+      },
+      "failed": {
+        "message": "L’élément de travail n’a pas pu être archivé. Veuillez réessayer."
+      },
+      "banner_message": "Cet élément de travail a été archivé. Accédez à la section Archives pour le restaurer.",
+      "go_to_archives": "Accéder aux archives"
+    },
+    "restore": {
+      "success": {
+        "title": "Restauration réussie",
+        "message": "Votre élément de travail se trouve dans les éléments de travail du projet."
+      },
+      "failed": {
+        "message": "L’élément de travail n’a pas pu être restauré. Veuillez réessayer."
+      }
+    },
+    "relation": {
+      "relates_to": "En relation avec",
+      "duplicate": "Doublon de",
+      "blocked_by": "Bloqué par",
+      "blocking": "Bloque",
+      "start_before": "Commence avant",
+      "start_after": "Commence après",
+      "finish_before": "Se termine avant",
+      "finish_after": "Se termine après",
+      "implements": "Implémente",
+      "implemented_by": "Implémenté par"
+    },
+    "copy_link": "Copier le lien de l’élément de travail",
+    "delete": {
+      "label": "Supprimer l’élément de travail",
+      "error": "Erreur lors de la suppression de l’élément de travail"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Abonnement à l’élément de travail réussi",
+        "unsubscribed": "Désabonnement de l’élément de travail réussi"
+      }
+    },
+    "select": {
+      "error": "Veuillez sélectionner au moins un élément de travail",
+      "empty": "Aucun élément de travail sélectionné",
+      "add_selected": "Ajouter les éléments de travail sélectionnés",
+      "select_all": "Sélectionner tout",
+      "deselect_all": "Tout désélectionner"
+    },
+    "open_in_full_screen": "Ouvrir l’élément de travail en plein écran",
+    "duplicate": {
+      "modal": {
+        "title": "Faire une copie vers un autre projet",
+        "description1": "Cela crée une copie de l’élément de travail.",
+        "description2": "Toutes les données de propriétés seront supprimées lors de la duplication.",
+        "placeholder": "Sélectionner un projet"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Élément de travail dupliqué avec succès"
+        },
+        "error": {
+          "message": "Échec de la duplication de l’élément de travail"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Lier les pages",
+      "show_wiki_pages": "Afficher les pages Wiki",
+      "link_pages_to": "Lier les pages à",
+      "linked_pages": "Pages liées",
+      "no_description": "Cette page est vide. Pourquoi ne pas écrire quelque chose à l’intérieur et le voir apparaître ici comme ce placeholder",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Pages mises à jour",
+            "message": "Pages mises à jour avec succès"
+          },
+          "error": {
+            "title": "Échec de la mise à jour des pages",
+            "message": "Échec de la mise à jour des pages"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Page supprimée",
+            "message": "Page supprimée avec succès"
+          },
+          "error": {
+            "title": "Échec de la suppression de la page",
+            "message": "Échec de la suppression de la page"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Cliquez pour voter pour",
+      "click_to_downvote": "Cliquez pour voter contre",
+      "click_to_view_upvotes": "Cliquez pour voir les votes pour",
+      "click_to_view_downvotes": "Cliquez pour voir les votes contre"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Sous-élément de travail mis à jour avec succès",
+      "error": "Erreur lors de la mise à jour du sous-élément de travail"
+    },
+    "remove": {
+      "success": "Sous-élément de travail supprimé avec succès",
+      "error": "Erreur lors de la suppression du sous-élément de travail"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Vous n’avez pas de sous-éléments de travail qui correspondent aux filtres que vous avez appliqués.",
+        "description": "Pour voir tous les sous-éléments de travail, effacer tous les filtres appliqués.",
+        "action": "Effacer les filtres"
+      },
+      "list_filters": {
+        "title": "Vous n’avez pas d’éléments de travail qui correspondent aux filtres que vous avez appliqués.",
+        "description": "Pour voir tous les éléments de travail, effacer tous les filtres appliqués.",
+        "action": "Effacer les filtres"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Aucun élément de travail correspondant trouvé"
+      },
+      "no_issues": {
+        "title": "Aucun élément de travail trouvé"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Pas encore de commentaires",
+        "description": "Les commentaires peuvent être utilisés comme espace de discussion et de suivi pour les éléments de travail"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Impossible d'archiver les éléments de travail",
+        "message": "Seuls les éléments de travail appartenant aux groupes d'états Terminé ou Annulé peuvent être archivés."
+      },
+      "invalid_issue_start_date": {
+        "title": "Impossible de mettre à jour les éléments de travail",
+        "message": "La date de début sélectionnée est postérieure à la date d'échéance pour certains éléments de travail. Assurez-vous que la date de début soit antérieure à la date d'échéance."
+      },
+      "invalid_issue_target_date": {
+        "title": "Impossible de mettre à jour les éléments de travail",
+        "message": "La date d'échéance sélectionnée est antérieure à la date de début pour certains éléments de travail. Assurez-vous que la date d'échéance soit postérieure à la date de début."
+      },
+      "invalid_state_transition": {
+        "title": "Impossible de mettre à jour les éléments de travail",
+        "message": "Le changement d'état n'est pas autorisé pour certains éléments de travail. Assurez-vous que le changement d'état est autorisé."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Modifiez l’état, la priorité et bien plus pour plusieurs éléments de travail à la fois. Économisez en moyenne trois minutes par opération.",
+      "cta": "Mettre à niveau vers One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Éléments de travail récurrents",
+      "description": "Configurez votre travail récurrent une fois, et nous nous occuperons des répétitions. Vous verrez tout ici lorsque c'est le moment.",
+      "new_recurring_work_item": "Nouvel élément de travail récurrent",
+      "update_recurring_work_item": "Mettre à jour l'élément de travail récurrent",
+      "form": {
+        "interval": {
+          "title": "Planification",
+          "start_date": {
+            "validation": {
+              "required": "La date de début est requise"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Le type d'intervalle est requis"
+            }
+          }
+        },
+        "button": {
+          "create": "Créer un élément de travail récurrent",
+          "update": "Mettre à jour l'élément de travail récurrent"
+        }
+      },
+      "create_button": {
+        "label": "Créer un élément de travail récurrent",
+        "no_permission": "Contactez votre administrateur de projet pour créer des éléments de travail récurrents"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Votre travail, en pilote automatique",
+        "description": "Configurez-le une fois. Nous vous le rappellerons quand il sera dû. Passez à Business pour rendre le travail récurrent sans effort."
+      },
+      "no_templates": {
+        "button": "Créez votre premier élément de travail récurrent"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Élément de travail récurrent créé",
+          "message": "{name}, l'élément de travail récurrent, est maintenant disponible dans votre espace de travail."
+        },
+        "error": {
+          "title": "Nous n'avons pas pu créer cet élément de travail récurrent cette fois.",
+          "message": "Essayez d'enregistrer vos informations à nouveau ou copiez-les dans un nouvel élément de travail récurrent, de préférence dans un autre onglet."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Élément de travail récurrent modifié",
+          "message": "{name}, l'élément de travail récurrent, a été modifié."
+        },
+        "error": {
+          "title": "Nous n'avons pas pu enregistrer les modifications de cet élément de travail récurrent.",
+          "message": "Essayez d'enregistrer vos informations à nouveau ou revenez à cet élément de travail récurrent plus tard. Si le problème persiste, contactez-nous."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Élément de travail récurrent supprimé",
+          "message": "{name}, l'élément de travail récurrent, a été supprimé de votre espace de travail."
+        },
+        "error": {
+          "title": "Nous n'avons pas pu supprimer cet élément de travail récurrent.",
+          "message": "Essayez de le supprimer à nouveau ou revenez plus tard. Si vous ne pouvez toujours pas le supprimer, contactez-nous."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Supprimer l'élément de travail récurrent",
+      "description": {
+        "prefix": "Êtes-vous sûr de vouloir supprimer l'élément de travail récurrent-",
+        "suffix": "? Toutes les données liées à l'élément de travail récurrent seront définitivement supprimées. Cette action ne peut pas être annulée."
+      }
+    }
+  },
+  "epic": {
+    "new": "Nouvel Epic",
+    "label": "{count, plural, one {Epic} other {Epics}}",
+    "adding": "Ajout d’un epic",
+    "create": {
+      "success": "Epic créé avec succès"
+    },
+    "add": {
+      "label": "Ajouter un Epic",
+      "press_enter": "Appuyez sur 'Entrée' pour ajouter un autre epic"
+    },
+    "title": {
+      "label": "Titre de l’Epic",
+      "required": "Le titre de l’Epic est requis."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/workflow.json b/packages/i18n/src/locales/fr/workflow.json
new file mode 100644
index 0000000..067ac66
--- /dev/null
+++ b/packages/i18n/src/locales/fr/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Autoriser les nouveaux éléments de travail",
+      "work_item_creation_disable_tooltip": "La création d'éléments de travail est désactivée pour cet état",
+      "default_state": "L'état par défaut permet à tous les membres de créer de nouveaux éléments de travail. Cela ne peut pas être changé",
+      "state_change_count": "{count, plural, one {1 changement d'état autorisé} other {{count} changements d'état autorisés}}",
+      "movers_count": "{count, plural, one {1 réviseur listé} other {{count} réviseurs listés}}",
+      "state_changes": {
+        "label": {
+          "default": "Ajouter un changement d'état autorisé",
+          "loading": "En train d'ajouter un changement d'état autorisé"
+        },
+        "move_to": "Changer l'état vers",
+        "movers": {
+          "label": "Lorsqu'il est révisé par",
+          "tooltip": "Les réviseurs sont des personnes qui sont autorisées à changer l'état des éléments de travail d'un état à un autre.",
+          "add": "Ajouter des réviseurs"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Vous ne pouvez pas déplacer cet élément de travail ici."
+    },
+    "workflow_enabled": {
+      "label": "Changement d'état"
+    },
+    "workflow_tree": {
+      "label": "Pour les éléments de travail dans",
+      "state_change_label": "peuvent le déplacer vers"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Contrôlez le chaos des changements et des révisions avec les Workflows.",
+        "description": "Définissez des règles pour où votre travail se déplace, par qui, et quand avec les Workflows dans Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Voir l'historique des changements",
+      "reset_workflow": "Réinitialiser le workflow"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Êtes-vous sûr de vouloir réinitialiser ce workflow ?",
+        "description": "Si vous réinitialisez ce workflow, toutes vos règles de changement d'état seront supprimées et vous devrez les créer à nouveau pour qu'elles fonctionnent dans ce projet."
+      },
+      "delete_state_change": {
+        "title": "Êtes-vous sûr de vouloir supprimer cette règle de changement d'état ?",
+        "description": "Une fois supprimée, vous ne pourrez pas annuler ce changement et vous devrez établir la règle à nouveau si vous la souhaitez pour ce projet."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} les workflows",
+        "success": {
+          "title": "Succès",
+          "message": "Workflow {action} avec succès"
+        },
+        "error": {
+          "title": "Erreur",
+          "message": "Le workflow ne pouvait pas être {action}. Veuillez réessayer."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Succès",
+          "message": "Workflow réinitialisé avec succès"
+        },
+        "error": {
+          "title": "Erreur lors de la réinitialisation du workflow",
+          "message": "Le workflow ne pouvait pas être réinitialisé. Veuillez réessayer."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Erreur lors de l'ajout d'une règle de changement d'état",
+          "message": "La règle de changement d'état ne pouvait pas être ajoutée. Veuillez réessayer."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Erreur lors de la modification d'une règle de changement d'état",
+          "message": "La règle de changement d'état ne pouvait pas être modifiée. Veuillez réessayer."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Erreur lors de la suppression d'une règle de changement d'état",
+          "message": "La règle de changement d'état ne pouvait pas être supprimée. Veuillez réessayer."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Erreur lors de la modification des réviseurs de règle de changement d'état",
+          "message": "Les réviseurs de la règle de changement d'état ne pouvaient pas être modifiés. Veuillez réessayer."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/workspace-settings.json b/packages/i18n/src/locales/fr/workspace-settings.json
new file mode 100644
index 0000000..8b94c88
--- /dev/null
+++ b/packages/i18n/src/locales/fr/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Paramètres de l’espace de travail",
+    "page_label": "{workspace} - Paramètres généraux",
+    "key_created": "Clé créée",
+    "copy_key": "Copiez et sauvegardez cette clé secrète dans Plane Pages. Vous ne pourrez plus voir cette clé après avoir cliqué sur Fermer. Un fichier CSV contenant la clé a été téléchargé.",
+    "token_copied": "Jeton copié dans le presse-papiers.",
+    "settings": {
+      "general": {
+        "title": "Général",
+        "upload_logo": "Télécharger le logo",
+        "edit_logo": "Modifier le logo",
+        "name": "Nom de l’espace de travail",
+        "company_size": "Taille de l’entreprise",
+        "url": "URL de l’espace de travail",
+        "workspace_timezone": "Fuseau horaire de l’espace de travail",
+        "update_workspace": "Mettre à jour l’espace de travail",
+        "delete_workspace": "Supprimer cet espace de travail",
+        "delete_workspace_description": "Lors de la suppression d’un espace de travail, toutes les données et ressources au sein de cet espace seront définitivement supprimées et ne pourront pas être récupérées.",
+        "delete_btn": "Supprimer cet espace de travail",
+        "delete_modal": {
+          "title": "Êtes-vous sûr de vouloir supprimer cet espace de travail ?",
+          "description": "Vous avez un essai actif sur l’un de nos forfaits payants. Veuillez d’abord l’annuler pour continuer.",
+          "dismiss": "Fermer",
+          "cancel": "Annuler l’essai",
+          "success_title": "Espace de travail supprimé.",
+          "success_message": "Vous serez bientôt redirigé vers votre page de profil.",
+          "error_title": "Cela n’a pas fonctionné.",
+          "error_message": "Veuillez réessayer."
+        },
+        "errors": {
+          "name": {
+            "required": "Le nom est requis",
+            "max_length": "Le nom de l’espace de travail ne doit pas dépasser 80 caractères"
+          },
+          "company_size": {
+            "required": "La taille de l’entreprise est requise",
+            "select_a_range": "Sélectionner la taille de l’organisation"
+          }
+        }
+      },
+      "members": {
+        "title": "Membres",
+        "add_member": "Ajouter un membre",
+        "pending_invites": "Invitations en attente",
+        "invitations_sent_successfully": "Invitations envoyées avec succès",
+        "leave_confirmation": "Êtes-vous sûr de vouloir quitter l’espace de travail ? Vous n’aurez plus accès à cet espace de travail. Cette action ne peut pas être annulée.",
+        "details": {
+          "full_name": "Nom complet",
+          "display_name": "Nom d’affichage",
+          "email_address": "Adresse e-mail",
+          "account_type": "Type de compte",
+          "authentication": "Authentification",
+          "joining_date": "Date d’adhésion"
+        },
+        "modal": {
+          "title": "Inviter des personnes à collaborer",
+          "description": "Invitez des personnes à collaborer sur votre espace de travail.",
+          "button": "Envoyer les invitations",
+          "button_loading": "Envoi des invitations",
+          "placeholder": "nom@entreprise.com",
+          "errors": {
+            "required": "Nous avons besoin d’une adresse e-mail pour les inviter.",
+            "invalid": "L’e-mail est invalide"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Facturation & Plans",
+        "description": "Choisissez votre forfait, gérez vos abonnements et passez facilement à une version supérieure au fur et à mesure que vos besoins évoluent.",
+        "title": "Facturation & Plans",
+        "current_plan": "Plan actuel",
+        "free_plan": "Vous utilisez actuellement le plan gratuit",
+        "view_plans": "Voir les plans"
+      },
+      "exports": {
+        "heading": "Exportations",
+        "description": "Exportez les données de votre projet dans différents formats et accédez à votre historique d’exportations avec les liens de téléchargement.",
+        "title": "Exportations",
+        "exporting": "Exportation",
+        "previous_exports": "Exportations précédentes",
+        "export_separate_files": "Exporter les données dans des fichiers séparés",
+        "exporting_projects": "Exportation du projet",
+        "format": "Format",
+        "filters_info": "Appliquez des filtres pour exporter des éléments de travail spécifiques selon vos critères.",
+        "modal": {
+          "title": "Exporter vers",
+          "toasts": {
+            "success": {
+              "title": "Exportation réussie",
+              "message": "Vous pourrez télécharger les {entity} exportés depuis l’exportation précédente."
+            },
+            "error": {
+              "title": "Échec de l’exportation",
+              "message": "L’exportation a échoué. Veuillez réessayer."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooks",
+        "description": "Automatisez les notifications vers des services externes lors d’événements du projet.",
+        "title": "Webhooks",
+        "add_webhook": "Ajouter un webhook",
+        "modal": {
+          "title": "Créer un webhook",
+          "details": "Détails du webhook",
+          "payload": "URL de la charge utile",
+          "question": "Quels événements souhaitez-vous déclencher avec ce webhook ?",
+          "error": "L’URL est requise"
+        },
+        "secret_key": {
+          "title": "Clé secrète",
+          "message": "Générer un jeton pour signer la charge utile du webhook"
+        },
+        "options": {
+          "all": "Envoyez-moi tout",
+          "individual": "Sélectionner des événements individuels"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook créé",
+            "message": "Le webhook a été créé avec succès"
+          },
+          "not_created": {
+            "title": "Webhook non créé",
+            "message": "Le webhook n’a pas pu être créé"
+          },
+          "updated": {
+            "title": "Webhook mis à jour",
+            "message": "Le webhook a été mis à jour avec succès"
+          },
+          "not_updated": {
+            "title": "Webhook non mis à jour",
+            "message": "Le webhook n’a pas pu être mis à jour"
+          },
+          "removed": {
+            "title": "Webhook supprimé",
+            "message": "Le webhook a été supprimé avec succès"
+          },
+          "not_removed": {
+            "title": "Webhook non supprimé",
+            "message": "Le webhook n’a pas pu être supprimé"
+          },
+          "secret_key_copied": {
+            "message": "Clé secrète copiée dans le presse-papiers."
+          },
+          "secret_key_not_copied": {
+            "message": "Une erreur s’est produite lors de la copie de la clé secrète."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Jetons API",
+        "description": "Générez des jetons API sécurisés pour intégrer vos données avec des systèmes et applications externes.",
+        "title": "Jetons API",
+        "add_token": "Ajouter un jeton d'accès",
+        "create_token": "Créer un jeton",
+        "never_expires": "N’expire jamais",
+        "generate_token": "Générer un jeton",
+        "generating": "Génération",
+        "delete": {
+          "title": "Supprimer le jeton API",
+          "description": "Toute application utilisant ce jeton n’aura plus accès aux données de Plane. Cette action ne peut pas être annulée.",
+          "success": {
+            "title": "Succès !",
+            "message": "Le jeton API a été supprimé avec succès"
+          },
+          "error": {
+            "title": "Erreur !",
+            "message": "Le jeton API n’a pas pu être supprimé"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Intégrations",
+        "heading": "Intégrations",
+        "description": "Connectez-vous avec des outils et services populaires pour synchroniser votre travail dans tout votre écosystème.",
+        "page_title": "Travaillez avec vos données Plane dans les applications disponibles ou dans les vôtres.",
+        "page_description": "Affichez toutes les intégrations utilisées par cet espace de travail ou par vous."
+      },
+      "imports": {
+        "title": "Importations",
+        "heading": "Importations",
+        "description": "Connectez et importez des données depuis vos outils de gestion de projet existants pour simplifier l’intégration de votre flux de travail."
+      },
+      "worklogs": {
+        "title": "Journaux de travail",
+        "heading": "Journaux de travail",
+        "description": "Téléchargez les journaux de travail (feuilles de temps) pour n’importe qui dans n’importe quel projet."
+      },
+      "group_syncing": {
+        "title": "Synchronisation des groupes",
+        "heading": "Synchronisation des groupes",
+        "description": "Associez les groupes du fournisseur d'identité aux projets et rôles. L'accès des utilisateurs est mis à jour automatiquement lorsque l'appartenance au groupe change dans votre IdP, simplifiant l'intégration et le départ.",
+        "enable": {
+          "title": "Activer la synchronisation des groupes",
+          "description": "Ajoutez automatiquement les utilisateurs aux projets en fonction des groupes du fournisseur d'identité."
+        },
+        "config": {
+          "title": "Configurer la synchronisation des groupes",
+          "description": "Configurez la façon dont les groupes du fournisseur d'identité sont mappés aux projets et rôles.",
+          "sync_on_login": {
+            "title": "Synchronisation à la connexion",
+            "description": "Mettez à jour l'appartenance au groupe et l'accès au projet lorsqu'un utilisateur se connecte."
+          },
+          "sync_offline": {
+            "title": "Synchronisation hors ligne",
+            "description": "Exécute la synchronisation toutes les six heures automatiquement, sans attendre que les utilisateurs se connectent."
+          },
+          "auto_remove": {
+            "title": "Suppression automatique",
+            "description": "Supprimez automatiquement les utilisateurs des projets lorsqu'ils ne correspondent plus au groupe."
+          },
+          "group_attribute_key": {
+            "title": "Clé d'attribut de groupe",
+            "description": "L'attribut du fournisseur d'identité utilisé pour identifier et synchroniser les groupes d'utilisateurs.",
+            "placeholder": "Groupes"
+          }
+        },
+        "group_mapping": {
+          "title": "Correspondance des groupes",
+          "description": "Associez les groupes du fournisseur d'identité aux projets et rôles.",
+          "button_text": "Ajouter une nouvelle synchronisation de groupe"
+        },
+        "toast": {
+          "updating": "Mise à jour de la fonction de synchronisation des groupes",
+          "success": "Fonction de synchronisation des groupes mise à jour avec succès.",
+          "error": "Échec de la mise à jour de la fonction de synchronisation des groupes !"
+        },
+        "delete_modal": {
+          "title": "Supprimer la synchronisation de groupe",
+          "content": "Les nouveaux utilisateurs de ce groupe d'identité ne seront plus ajoutés au projet. Les utilisateurs déjà ajoutés conserveront leur rôle actuel."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Groupe d'utilisateurs",
+            "required": "Le groupe d'utilisateurs est requis",
+            "placeholder": "Saisissez les noms des groupes IdP"
+          },
+          "project": {
+            "text": "Projet",
+            "required": "Le projet est requis",
+            "placeholder": "Sélectionnez un projet"
+          },
+          "default_role": {
+            "text": "Rôle du projet",
+            "required": "Le rôle du projet est requis",
+            "placeholder": "Sélectionnez un rôle du projet"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identité",
+        "heading": "Identité",
+        "description": "Configurez votre domaine et activez l'authentification unique"
+      },
+      "project_states": {
+        "title": "États du projet",
+        "heading": "Consultez la vue d’ensemble de la progression pour tous les projets.",
+        "description": "Les États de projet sont une fonctionnalité exclusive à Plane pour suivre la progression de tous vos projets par n’importe quelle propriété de projet.",
+        "go_to_settings": "Aller aux paramètres"
+      },
+      "projects": {
+        "title": "Projets",
+        "description": "Gérer les états des projets, activer les étiquettes de projets et autres configurations.",
+        "tabs": {
+          "states": "États du projet",
+          "labels": "Étiquettes du projet"
+        }
+      },
+      "templates": {
+        "title": "Modèles",
+        "heading": "Modèles",
+        "description": "Économisez 80% du temps consacré à la création de projets, d’éléments de travail et de pages en utilisant des modèles."
+      },
+      "relations": {
+        "title": "Relations",
+        "heading": "Relations",
+        "description": "Créez et gérez des types de relations qui connectent les éléments de travail dans votre espace de travail."
+      },
+      "cancel_trial": {
+        "title": "Annulez d'abord votre période d'essai.",
+        "description": "Vous avez une période d'essai active sur l'un de nos forfaits payants. Veuillez d'abord l'annuler pour continuer.",
+        "dismiss": "Fermer",
+        "cancel": "Annuler l'essai",
+        "cancel_success_title": "Période d'essai annulée.",
+        "cancel_success_message": "Vous pouvez maintenant supprimer l'espace de travail.",
+        "cancel_error_title": "Ça n'a pas fonctionné.",
+        "cancel_error_message": "Veuillez réessayer."
+      },
+      "applications": {
+        "internal": "Interne",
+        "title": "Applications",
+        "applicationId_copied": "ID application copié dans le presse-papiers",
+        "clientId_copied": "ID client copié dans le presse-papiers",
+        "clientSecret_copied": "Secret client copié dans le presse-papiers",
+        "third_party_apps": "Applications tierces",
+        "your_apps": "Vos applications",
+        "connect": "Connecter",
+        "connected": "Connecté",
+        "disconnect": "Déconnecter",
+        "install": "Installer",
+        "installed": "Installé",
+        "configure": "Configurer",
+        "app_available": "Vous avez rendu cette application disponible pour une utilisation avec un espace de travail Plane",
+        "app_credentials_regenrated": {
+          "title": "Les identifiants de l'application ont été régénérés avec succès",
+          "description": "Remplacez le secret client partout où il est utilisé. L'ancien secret n'est plus valide."
+        },
+        "app_created": {
+          "title": "Application créée avec succès",
+          "description": "Utilisez les identifiants pour installer l'application dans un espace de travail Plane"
+        },
+        "installed_apps": "Applications installées",
+        "all_apps": "Toutes les applications",
+        "internal_apps": "Applications internes",
+        "app_name_title": "Comment allez-vous appeler cette application",
+        "app_description_title": {
+          "label": "Description longue",
+          "placeholder": "Rédigez une longue description pour la place de marché. Appuyez sur '/' pour afficher les commandes."
+        },
+        "authorization_grant_type": {
+          "title": "Type de connexion",
+          "description": "Choisissez si votre application doit être installée une fois pour l'espace de travail ou permettre à chaque utilisateur de connecter son propre compte"
+        },
+        "website": {
+          "title": "Site web",
+          "description": "Lien vers le site web de votre application.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Créateur d'applications",
+          "description": "La personne ou l'organisation qui crée l'application."
+        },
+        "app_maker_error": "Le créateur de l'application est requis",
+        "setup_url": {
+          "label": "URL de configuration",
+          "description": "Les utilisateurs seront redirigés vers cette URL lorsqu'ils installeront l'application.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL du webhook",
+          "description": "C'est ici que nous enverrons les événements et mises à jour webhook depuis les espaces de travail où votre application est installée.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Secret Webhook",
+          "description": "Secret utilisé pour vérifier les requêtes webhook entrantes.",
+          "placeholder": "Saisissez une clé secrète aléatoire"
+        },
+        "redirect_uris": {
+          "label": "URI de redirection (séparés par des espaces)",
+          "description": "Les utilisateurs seront redirigés vers ce chemin après s'être authentifiés avec Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Connectez un espace de travail Plane pour commencer à l'utiliser",
+        "client_id_and_secret": "ID Client et Secret",
+        "client_id_and_secret_description": "Copiez et sauvegardez cette clé secrète. Vous ne pourrez plus voir cette clé après avoir cliqué sur Fermer.",
+        "client_id_and_secret_download": "Vous pouvez télécharger un CSV avec la clé ici.",
+        "application_id": "ID Application",
+        "client_id": "ID Client",
+        "client_secret": "Secret Client",
+        "export_as_csv": "Exporter en CSV",
+        "slug_already_exists": "Le slug existe déjà",
+        "failed_to_create_application": "Échec de la création de l'application",
+        "upload_logo": "Télécharger le logo",
+        "app_name_error": "Le nom de l'application est requis",
+        "app_short_description_title": "Donnez une courte description à cette application",
+        "app_short_description_error": "La description courte de l'application est requise",
+        "app_description_error": "La description de l'application est requise",
+        "app_slug_title": "Slug de l'application",
+        "app_slug_error": "Le slug de l'application est requis",
+        "invalid_website_error": "Site web invalide",
+        "webhook_url_title": "URL du Webhook",
+        "webhook_url_error": "L'URL du webhook est requise",
+        "invalid_webhook_url_error": "URL du webhook invalide",
+        "redirect_uris_title": "URIs de redirection",
+        "redirect_uris_error": "Les URIs de redirection sont requises",
+        "invalid_redirect_uris_error": "URIs de redirection invalides",
+        "redirect_uris_description": "Entrez les URIs séparées par des espaces où l'application redirigera après l'utilisateur, par exemple https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Origines Javascript autorisées",
+        "authorized_javascript_origins_error": "Les origines Javascript autorisées sont requises",
+        "invalid_authorized_javascript_origins_error": "Origines Javascript autorisées invalides",
+        "authorized_javascript_origins_description": "Entrez les origines séparées par des espaces où l'application sera autorisée à faire des requêtes, par exemple app.com example.com",
+        "create_app": "Créer l'application",
+        "update_app": "Mettre à jour l'application",
+        "build_your_own_app": "Construisez votre propre application",
+        "edit_app_details": "Modifier les détails de l'application",
+        "regenerate_client_secret_description": "Régénérer le secret client. Si vous régénérez le secret, vous pourrez copier la clé ou la télécharger dans un fichier CSV juste après.",
+        "regenerate_client_secret": "Régénérer le secret client",
+        "regenerate_client_secret_confirm_title": "Êtes-vous sûr de vouloir régénérer le secret client ?",
+        "regenerate_client_secret_confirm_description": "L'application utilisant ce secret cessera de fonctionner. Vous devrez mettre à jour le secret dans l'application.",
+        "regenerate_client_secret_confirm_cancel": "Annuler",
+        "regenerate_client_secret_confirm_regenerate": "Régénérer",
+        "read_only_access_to_workspace": "Accès en lecture seule à votre espace de travail",
+        "write_access_to_workspace": "Accès en écriture à votre espace de travail",
+        "read_only_access_to_user_profile": "Accès en lecture seule à votre profil utilisateur",
+        "write_access_to_user_profile": "Accès en écriture à votre profil utilisateur",
+        "connect_app_to_workspace": "Connecter {app} à votre espace de travail {workspace}",
+        "user_permissions": "Permissions utilisateur",
+        "user_permissions_description": "Les permissions utilisateur sont utilisées pour accorder l'accès au profil de l'utilisateur.",
+        "workspace_permissions": "Permissions de l'espace de travail",
+        "workspace_permissions_description": "Les permissions de l'espace de travail sont utilisées pour accorder l'accès à l'espace de travail.",
+        "with_the_permissions": "avec les permissions",
+        "app_consent_title": "{app} demande l'accès à votre espace de travail et profil Plane.",
+        "choose_workspace_to_connect_app_with": "Choisissez un espace de travail auquel connecter l'application",
+        "app_consent_workspace_permissions_title": "{app} souhaite",
+        "app_consent_user_permissions_title": "{app} peut également demander la permission d'un utilisateur pour les ressources suivantes. Ces permissions seront demandées et autorisées uniquement par un utilisateur.",
+        "app_consent_accept_title": "En acceptant, vous",
+        "app_consent_accept_1": "Accordez à l'application l'accès à vos données Plane partout où vous pouvez utiliser l'application dans ou en dehors de Plane",
+        "app_consent_accept_2": "Acceptez la politique de confidentialité et les conditions d'utilisation de {app}",
+        "accepting": "Acceptation en cours...",
+        "accept": "Accepter",
+        "categories": "Catégories",
+        "select_app_categories": "Sélectionner les catégories de l'application",
+        "categories_title": "Catégories",
+        "categories_error": "Les catégories sont requises",
+        "invalid_categories_error": "Catégories invalides",
+        "categories_description": "Sélectionnez les catégories qui décrivent le mieux l'application",
+        "supported_plans": "Plans Pris en Charge",
+        "supported_plans_description": "Sélectionnez les plans d'espace de travail qui peuvent installer cette application. Laissez vide pour autoriser tous les plans.",
+        "select_plans": "Sélectionner les Plans",
+        "privacy_policy_url_title": "URL de la politique de confidentialité",
+        "privacy_policy_url_error": "La URL de la politique de confidentialité est requise",
+        "invalid_privacy_policy_url_error": "URL de la politique de confidentialité invalide",
+        "terms_of_service_url_title": "URL des conditions d'utilisation",
+        "terms_of_service_url_error": "Les conditions d'utilisation sont requises",
+        "invalid_terms_of_service_url_error": "URL des conditions d'utilisation invalide",
+        "support_url_title": "URL de support",
+        "support_url_error": "Le support est requis",
+        "invalid_support_url_error": "URL de support invalide",
+        "video_url_title": "URL de la vidéo",
+        "video_url_error": "La URL de la vidéo est requise",
+        "invalid_video_url_error": "URL de la vidéo invalide",
+        "setup_url_error": "La URL de configuration est requise",
+        "invalid_setup_url_error": "URL de configuration invalide",
+        "configuration_url_title": "URL de configuration",
+        "configuration_url_error": "La URL de configuration est requise",
+        "invalid_configuration_url_error": "URL de configuration invalide",
+        "contact_email_title": "Email de contact",
+        "contact_email_error": "L'email de contact est requis",
+        "invalid_contact_email_error": "Email de contact invalide",
+        "upload_attachments": "Télécharger des pièces jointes",
+        "uploading_images": "Téléchargement de {count} Image{count, plural, one {s} other {s}}",
+        "drop_images_here": "Glisser-déposer les images ici",
+        "click_to_upload_images": "Cliquer pour télécharger les images",
+        "invalid_file_or_exceeds_size_limit": "Fichier invalide ou dépasse la limite de taille ({size} MB)",
+        "uploading": "Téléchargement...",
+        "upload_and_save": "Télécharger et enregistrer",
+        "app_consent_no_access_title": "Demande d’installation",
+        "app_consent_no_access_description": "Cette application ne peut être installée qu'après qu'un administrateur de l'espace de travail l'ait installée. Contactez l'administrateur de votre espace de travail pour continuer.",
+        "app_consent_unapproved_title": "Cette application n’a pas encore été examinée ni approuvée par Plane.",
+        "app_consent_unapproved_description": "Assurez-vous de faire confiance à cette application avant de la connecter à votre espace de travail.",
+        "go_to_app": "Aller à l’application",
+        "enable_app_mentions": "Activer les mentions de l'application",
+        "enable_app_mentions_tooltip": "Lorsque cela est activé, les utilisateurs peuvent mentionner ou attribuer des éléments de travail à cette application.",
+        "scopes": "Périmètres",
+        "select_scopes": "Sélectionner les périmètres",
+        "read_access_to": "Accès en lecture seule à",
+        "write_access_to": "Accès en écriture à",
+        "global_permission_expiration": "Les périmètres globaux expirent bientôt. Utilisez des périmètres granulaires à la place. Par exemple, utilisez project:read au lieu d'une lecture globale.",
+        "selected_scopes": "{count} sélectionné(s)",
+        "scopes_and_permissions": "Périmètres et autorisations",
+        "read": "Lecture",
+        "write": "Écriture",
+        "scope_description": {
+          "projects": "Accès aux projets et à toutes les entités liées aux projets",
+          "wiki": "Accès au wiki et à toutes les entités liées au wiki",
+          "workspaces": "Accès aux espaces de travail et à toutes les entités liées",
+          "stickies": "Accès aux stickies et à toutes les entités liées",
+          "profile": "Accès aux informations du profil utilisateur",
+          "agents": "Accès aux agents et à toutes les entités liées aux agents",
+          "assets": "Accès aux actifs et à toutes les entités liées aux actifs"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Voir votre travail devenir plus intelligent et plus rapide avec l'IA qui est connectée de manière native à votre travail et à votre base de connaissances."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Scripts",
+        "new_script": "Nouveau script",
+        "description": "Automatisez vos flux de travail avec des scripts personnalisés et des règles d’automatisation."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Aucun jeton API créé",
+        "description": "Les API Plane peuvent être utilisées pour intégrer vos données dans Plane avec n’importe quel système externe. Créez un jeton pour commencer."
+      },
+      "webhooks": {
+        "title": "Aucun webhook ajouté",
+        "description": "Créez des webhooks pour recevoir des mises à jour en temps réel et automatiser des actions."
+      },
+      "exports": {
+        "title": "Aucune exportation pour le moment",
+        "description": "Chaque fois que vous exportez, vous aurez également une copie ici pour référence."
+      },
+      "imports": {
+        "title": "Aucune importation pour le moment",
+        "description": "Trouvez toutes vos importations précédentes ici et téléchargez-les."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/fr/workspace.json b/packages/i18n/src/locales/fr/workspace.json
new file mode 100644
index 0000000..088f7b5
--- /dev/null
+++ b/packages/i18n/src/locales/fr/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Créez votre espace de travail",
+    "subheading": "Pour commencer à utiliser Plane, vous devez créer ou rejoindre un espace de travail.",
+    "form": {
+      "name": {
+        "label": "Nommez votre espace de travail",
+        "placeholder": "Quelque chose de familier et reconnaissable est toujours préférable."
+      },
+      "url": {
+        "label": "Définissez l’URL de votre espace de travail",
+        "placeholder": "Tapez ou collez une URL",
+        "edit_slug": "Vous ne pouvez modifier que le slug de l’URL"
+      },
+      "organization_size": {
+        "label": "Combien de personnes utiliseront cet espace de travail ?",
+        "placeholder": "Sélectionnez une plage"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Seul l’administrateur de votre instance peut créer des espaces de travail",
+        "description": "Si vous connaissez l’adresse e-mail de votre administrateur d’instance, cliquez sur le bouton ci-dessous pour le contacter.",
+        "request_button": "Contacter l’administrateur d’instance"
+      },
+      "validation": {
+        "name_alphanumeric": "Les noms d’espaces de travail ne peuvent contenir que (' '), ('-'), ('_') et des caractères alphanumériques.",
+        "name_length": "Limitez votre nom à 80 caractères.",
+        "url_alphanumeric": "Les URL ne peuvent contenir que ('-') et des caractères alphanumériques.",
+        "url_length": "Limitez votre URL à 48 caractères.",
+        "url_already_taken": "L’URL de l’espace de travail est déjà prise !"
+      }
+    },
+    "request_email": {
+      "subject": "Demande d’un nouvel espace de travail",
+      "body": "Bonjour administrateur(s) d’instance,\n\nVeuillez créer un nouvel espace de travail avec l’URL [/workspace-name] pour [objectif de création de l'espace de travail].\n\nMerci,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Créer l’espace de travail",
+      "loading": "Création de l’espace de travail"
+    },
+    "toast": {
+      "success": {
+        "title": "Succès",
+        "message": "Espace de travail créé avec succès"
+      },
+      "error": {
+        "title": "Erreur",
+        "message": "L’espace de travail n’a pas pu être créé. Veuillez réessayer."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Aperçu de vos projets, activités et métriques",
+        "description": "Bienvenue sur Plane, nous sommes ravis de vous avoir parmi nous. Créez votre premier projet et suivez vos éléments de travail, et cette page se transformera en un espace qui vous aide à progresser. Les administrateurs verront également les éléments qui aident leur équipe à progresser.",
+        "primary_button": {
+          "text": "Construisez votre premier projet",
+          "comic": {
+            "title": "Tout commence par un projet dans Plane",
+            "description": "Un projet peut être la feuille de route d’un produit, une campagne marketing ou le lancement d’une nouvelle voiture."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Analytique",
+    "page_label": "{workspace} - Analytique",
+    "open_tasks": "Total des tâches ouvertes",
+    "error": "Une erreur s’est produite lors de la récupération des données.",
+    "work_items_closed_in": "Éléments de travail fermés dans",
+    "selected_projects": "Projets sélectionnés",
+    "total_members": "Total des membres",
+    "total_cycles": "Total des Cycles",
+    "total_modules": "Total des Modules",
+    "pending_work_items": {
+      "title": "Éléments de travail en attente",
+      "empty_state": "L’analyse des éléments de travail en attente par acteur apparaît ici."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Éléments de travail fermés dans l’année",
+      "empty_state": "Fermez des éléments de travail pour voir leur analyse sous forme de graphique."
+    },
+    "most_work_items_created": {
+      "title": "Plus d’éléments de travail créés",
+      "empty_state": "Les acteurs et le nombre d’éléments de travail créés par eux apparaissent ici."
+    },
+    "most_work_items_closed": {
+      "title": "Plus d’éléments de travail fermés",
+      "empty_state": "Les acteurs et le nombre d’éléments de travail fermés par eux apparaissent ici."
+    },
+    "tabs": {
+      "scope_and_demand": "Scope et Demande",
+      "custom": "Analytique Personnalisée"
+    },
+    "total": "Total des {entity}",
+    "started_work_items": "{entity} commencés",
+    "backlog_work_items": "{entity} en backlog",
+    "un_started_work_items": "{entity} non commencés",
+    "completed_work_items": "{entity} terminés",
+    "project_insights": "Aperçus du projet",
+    "summary_of_projects": "Résumé des projets",
+    "all_projects": "Tous les projets",
+    "trend_on_charts": "Tendance sur les graphiques",
+    "active_projects": "Projets actifs",
+    "customized_insights": "Informations personnalisées",
+    "created_vs_resolved": "Créé vs Résolu",
+    "empty_state": {
+      "project_insights": {
+        "title": "Pas encore de données",
+        "description": "Les éléments de travail qui vous sont assignés, répartis par état, s’afficheront ici."
+      },
+      "created_vs_resolved": {
+        "title": "Pas encore de données",
+        "description": "Les éléments de travail créés et résolus au fil du temps s’afficheront ici."
+      },
+      "customized_insights": {
+        "title": "Pas encore de données",
+        "description": "Les éléments de travail qui vous sont assignés, répartis par état, s’afficheront ici."
+      },
+      "general": {
+        "title": "Suivez les progrès, les charges de travail et les affectations. Identifiez les tendances, levez les blocages et travaillez plus rapidement",
+        "description": "Surveillez le scope par rapport à la demande, suivez les estimations et les éventuels glissements de périmètre. Assurez-vous que les membres de votre équipe et vos équipes sont performants, et veillez à ce que votre projet avance dans les délais impartis.",
+        "primary_button": {
+          "text": "Commencez votre premier projet",
+          "comic": {
+            "title": "L’analytics fonctionne mieux avec les Cycles + Modules",
+            "description": "D’abord, encadrez vos éléments de travail dans des Cycles et, si possible, regroupez les éléments qui s’étendent sur plus d’un cycle dans des Modules. Consultez les deux dans la navigation de gauche."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Pas encore de données",
+        "description": "Les analyses de progression du cycle apparaîtront ici. Ajoutez des éléments de travail aux cycles pour commencer à suivre la progression."
+      },
+      "module_progress": {
+        "title": "Pas encore de données",
+        "description": "Les analyses de progression du module apparaîtront ici. Ajoutez des éléments de travail aux modules pour commencer à suivre la progression."
+      },
+      "intake_trends": {
+        "title": "Pas encore de données",
+        "description": "Les analyses des tendances d'entrée apparaîtront ici. Ajoutez des éléments de travail à l'entrée pour commencer à suivre les tendances."
+      }
+    },
+    "upgrade_to_plan": "Passez à {plan} pour débloquer {tab}",
+    "workitem_resolved_vs_pending": "Éléments de travail résolus vs en attente",
+    "projects_by_status": "Projets par statut",
+    "active_users": "Utilisateurs actifs",
+    "intake_trends": "Tendances des admissions"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Projet} other {Projets}}",
+    "create": {
+      "label": "Ajouter un Projet"
+    },
+    "network": {
+      "label": "Réseau",
+      "private": {
+        "title": "Privé",
+        "description": "Accessible uniquement sur invitation"
+      },
+      "public": {
+        "title": "Public",
+        "description": "Accessible à tous dans l’espace de travail, sauf les invités"
+      }
+    },
+    "error": {
+      "permission": "Vous n’avez pas la permission d’effectuer cette action.",
+      "cycle_delete": "Échec de la suppression du cycle",
+      "module_delete": "Échec de la suppression du module",
+      "issue_delete": "Échec de la suppression de l’élément de travail"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Non commencé",
+      "started": "Commencé",
+      "completed": "Terminé",
+      "cancelled": "Annulé"
+    },
+    "sort": {
+      "manual": "Manuel",
+      "name": "Nom",
+      "created_at": "Date de création",
+      "members_length": "Nombre de membres"
+    },
+    "scope": {
+      "my_projects": "Mes projets",
+      "archived_projects": "Archivés"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# mois} other{# mois}}",
+      "days_count": "{days, plural, one{# jour} other{# jours}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Aucun projet actif",
+        "description": "Considérez chaque projet comme le parent d’activités axées sur les objectifs. Les projets regroupent les tâches, les cycles et les modules et, avec l'aide de vos collègues, vous aident à atteindre ces objectifs. Créez un nouveau projet ou filtrez les projets archivés.",
+        "primary_button": {
+          "text": "Commencez votre premier projet",
+          "comic": {
+            "title": "Tout commence par un projet dans Plane",
+            "description": "Un projet peut être la feuille de route d’un produit, une campagne marketing ou le lancement d’une nouvelle voiture."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Aucun projet",
+        "description": "Pour créer des éléments de travail ou gérer votre travail, vous devez créer un projet ou faire partie d’un projet.",
+        "primary_button": {
+          "text": "Commencez votre premier projet",
+          "comic": {
+            "title": "Tout commence par un projet dans Plane",
+            "description": "Un projet peut être la feuille de route d’un produit, une campagne marketing ou le lancement d’une nouvelle voiture."
+          }
+        }
+      },
+      "filter": {
+        "title": "Aucun projet correspondant",
+        "description": "Aucun projet détecté avec les critères correspondants.\n Créez plutôt un nouveau projet."
+      },
+      "search": {
+        "description": "Aucun projet détecté avec les critères correspondants.\nCréez plutôt un nouveau projet"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Ajouter une vue",
+    "empty_state": {
+      "all-issues": {
+        "title": "Aucun élément de travail dans le projet",
+        "description": "Premier projet terminé ! Maintenant, découpez votre travail en tâches gérables à l’aide d’éléments de travail. C’est parti !",
+        "primary_button": {
+          "text": "Créer un nouvel élément de travail"
+        }
+      },
+      "assigned": {
+        "title": "Aucun élément de travail pour le moment",
+        "description": "Les éléments de travail qui vous sont assignés peuvent être suivis ici.",
+        "primary_button": {
+          "text": "Créer un nouvel élément de travail"
+        }
+      },
+      "created": {
+        "title": "Aucun élément de travail pour le moment",
+        "description": "Tous les éléments de travail que vous créez arrivent ici, suivez-les directement ici.",
+        "primary_button": {
+          "text": "Créer un nouvel élément de travail"
+        }
+      },
+      "subscribed": {
+        "title": "Aucun élément de travail pour le moment",
+        "description": "Abonnez-vous aux éléments de travail qui vous intéressent, suivez-les tous ici."
+      },
+      "custom-view": {
+        "title": "Aucun élément de travail pour le moment",
+        "description": "Les éléments de travail qui correspondent aux filtres, suivez-les tous ici."
+      }
+    },
+    "delete_view": {
+      "title": "Êtes-vous sûr de vouloir supprimer cette vue ?",
+      "content": "Si vous confirmez, toutes les options de tri, de filtrage et d’affichage et la mise en page que vous avez choisie pour cette vue seront définitivement supprimées sans possibilité de les restaurer."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Créer un brouillon d’élément de travail",
+    "empty_state": {
+      "title": "Les éléments de travail partiellement rédigés, et bientôt les commentaires, apparaîtront ici.",
+      "description": "Pour essayer, commencez à ajouter un élément de travail et laissez-le à mi-chemin ou créez votre premier brouillon ci-dessous. 😉",
+      "primary_button": {
+        "text": "Créez votre premier brouillon"
+      }
+    },
+    "delete_modal": {
+      "title": "Supprimer le brouillon",
+      "description": "Êtes-vous sûr de vouloir supprimer ce brouillon ? Cette action ne peut pas être annulée."
+    },
+    "toasts": {
+      "created": {
+        "success": "Brouillon créé",
+        "error": "L’élément de travail n’a pas pu être créé. Veuillez réessayer."
+      },
+      "deleted": {
+        "success": "Brouillon supprimé"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Écrivez une note, un document ou une base de connaissances complète. Obtenez l'aide de Galileo, l'assistant IA de Plane, pour commencer",
+        "description": "Les Pages sont des espaces de réflexion dans Plane. Prenez des notes de réunion, formatez-les facilement, intégrez des éléments de travail, disposez-les à l'aide d'une bibliothèque de composants et gardez-les tous dans le contexte de votre projet. Pour faciliter la rédaction de tout document, invoquez Galileo, l'IA de Plane, avec un raccourci ou un clic sur un bouton.",
+        "primary_button": {
+          "text": "Créez votre première Page"
+        }
+      },
+      "private": {
+        "title": "Pas encore de Pages privées",
+        "description": "Gardez vos pensées privées ici. Quand vous serez prêt à partager, l'équipe n'est qu'à un clic.",
+        "primary_button": {
+          "text": "Créez votre première Page"
+        }
+      },
+      "public": {
+        "title": "Pas encore de Pages d'espace de travail",
+        "description": "Voyez les Pages partagées avec tout le monde dans votre espace de travail ici même.",
+        "primary_button": {
+          "text": "Créez votre première Page"
+        }
+      },
+      "archived": {
+        "title": "Pas encore de Pages archivées",
+        "description": "Archivez les Pages qui ne sont pas dans votre radar. Accédez-y ici quand nécessaire."
+      },
+      "shared": {
+        "title": "Pas encore de pages partagées",
+        "description": "Les pages que d’autres ont partagées avec vous apparaîtront ici."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Aucun Cycle actif",
+        "description": "Les Cycles de vos projets qui incluent une période englobant la date d'aujourd'hui dans leur intervalle. Trouvez ici la progression et les détails de tous vos Cycles actifs."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Importer des membres depuis un CSV",
+      "description": "Téléchargez un CSV avec les colonnes : Email, Display Name, First Name, Last Name, Role (5, 15 ou 20)",
+      "dropzone": {
+        "active": "Déposez le fichier CSV ici",
+        "inactive": "Glissez-déposez ou cliquez pour télécharger",
+        "file_type": "Seuls les fichiers .csv sont pris en charge"
+      },
+      "buttons": {
+        "cancel": "Annuler",
+        "import": "Importer",
+        "try_again": "Réessayer",
+        "close": "Fermer",
+        "done": "Terminé"
+      },
+      "progress": {
+        "uploading": "Téléchargement...",
+        "importing": "Importation..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Échec de l'importation",
+          "complete": "Importation terminée"
+        },
+        "message": {
+          "seat_limit": "Impossible d'importer les membres en raison de restrictions de places.",
+          "success": "{count} membre{plural} ajouté{plural} avec succès à l'espace de travail.",
+          "no_imports": "Aucun membre n'a été importé depuis le fichier CSV."
+        },
+        "stats": {
+          "successful": "Réussi",
+          "failed": "Échoué"
+        },
+        "download_errors": "Télécharger les erreurs"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Fichier invalide",
+          "message": "Seuls les fichiers CSV sont pris en charge."
+        },
+        "import_failed": {
+          "title": "Échec de l'importation",
+          "message": "Une erreur s'est produite."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/accessibility.json b/packages/i18n/src/locales/id/accessibility.json
new file mode 100644
index 0000000..7320734
--- /dev/null
+++ b/packages/i18n/src/locales/id/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo ruang kerja",
+      "open_workspace_switcher": "Buka penukar ruang kerja",
+      "open_user_menu": "Buka menu pengguna",
+      "open_command_palette": "Buka palet perintah",
+      "open_extended_sidebar": "Buka sidebar diperluas",
+      "close_extended_sidebar": "Tutup sidebar diperluas",
+      "create_favorites_folder": "Buat folder favorit",
+      "open_folder": "Buka folder",
+      "close_folder": "Tutup folder",
+      "open_favorites_menu": "Buka menu favorit",
+      "close_favorites_menu": "Tutup menu favorit",
+      "enter_folder_name": "Masukkan nama folder",
+      "create_new_project": "Buat proyek baru",
+      "open_projects_menu": "Buka menu proyek",
+      "close_projects_menu": "Tutup menu proyek",
+      "toggle_quick_actions_menu": "Alihkan menu tindakan cepat",
+      "open_project_menu": "Buka menu proyek",
+      "close_project_menu": "Tutup menu proyek",
+      "collapse_sidebar": "Tutup sidebar",
+      "expand_sidebar": "Perluas sidebar",
+      "edition_badge": "Buka modal paket berbayar"
+    },
+    "auth_forms": {
+      "clear_email": "Hapus email",
+      "show_password": "Tampilkan kata sandi",
+      "hide_password": "Sembunyikan kata sandi",
+      "close_alert": "Tutup peringatan",
+      "close_popover": "Tutup popover"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/auth.json b/packages/i18n/src/locales/id/auth.json
new file mode 100644
index 0000000..4fa5a31
--- /dev/null
+++ b/packages/i18n/src/locales/id/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identitas",
+    "description": "Konfigurasi domain Anda untuk mengakses fitur keamanan termasuk single sign-on.",
+    "domain_management": {
+      "header": "Manajemen domain",
+      "verified_domains": {
+        "header": "Domain terverifikasi",
+        "description": "Verifikasi kepemilikan domain email untuk mengaktifkan single sign-on.",
+        "button_text": "Tambah domain",
+        "list": {
+          "domain_name": "Nama domain",
+          "status": "Status",
+          "status_verified": "Terverifikasi",
+          "status_failed": "Gagal",
+          "status_pending": "Menunggu"
+        },
+        "add_domain": {
+          "title": "Tambah domain",
+          "description": "Tambahkan domain Anda untuk mengonfigurasi SSO dan memverifikasinya.",
+          "form": {
+            "domain_label": "Domain",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Domain wajib diisi",
+            "domain_invalid": "Masukkan nama domain yang valid (mis. plane.so)"
+          },
+          "primary_button_text": "Tambah domain",
+          "primary_button_loading_text": "Menambahkan",
+          "toast": {
+            "success_title": "Berhasil!",
+            "success_message": "Domain berhasil ditambahkan. Silakan verifikasi dengan menambahkan catatan DNS TXT.",
+            "error_message": "Gagal menambahkan domain. Silakan coba lagi."
+          }
+        },
+        "verify_domain": {
+          "title": "Verifikasi domain Anda",
+          "description": "Ikuti langkah-langkah ini untuk memverifikasi domain Anda.",
+          "instructions": {
+            "label": "Instruksi",
+            "step_1": "Buka pengaturan DNS untuk host domain Anda.",
+            "step_2": {
+              "part_1": "Buat sebuah",
+              "part_2": "catatan TXT",
+              "part_3": "dan tempelkan nilai catatan lengkap yang disediakan di bawah ini."
+            },
+            "step_3": "Pembaruan ini biasanya memakan waktu beberapa menit tetapi dapat memakan waktu hingga 72 jam untuk diselesaikan.",
+            "step_4": "Klik \"Verifikasi domain\" untuk mengonfirmasi setelah catatan DNS Anda diperbarui."
+          },
+          "verification_code_label": "Nilai catatan TXT",
+          "verification_code_description": "Tambahkan catatan ini ke pengaturan DNS Anda",
+          "domain_label": "Domain",
+          "primary_button_text": "Verifikasi domain",
+          "primary_button_loading_text": "Memverifikasi",
+          "secondary_button_text": "Saya akan melakukannya nanti",
+          "toast": {
+            "success_title": "Berhasil!",
+            "success_message": "Domain berhasil diverifikasi.",
+            "error_message": "Gagal memverifikasi domain. Silakan coba lagi."
+          }
+        },
+        "delete_domain": {
+          "title": "Hapus domain",
+          "description": {
+            "prefix": "Apakah Anda yakin ingin menghapus",
+            "suffix": "? Tindakan ini tidak dapat dibatalkan."
+          },
+          "primary_button_text": "Hapus",
+          "primary_button_loading_text": "Menghapus",
+          "secondary_button_text": "Batal",
+          "toast": {
+            "success_title": "Berhasil!",
+            "success_message": "Domain berhasil dihapus.",
+            "error_message": "Gagal menghapus domain. Silakan coba lagi."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Single sign-on",
+      "disabled_message": "Tambahkan domain terverifikasi untuk mengonfigurasi SSO",
+      "configure": {
+        "create": "Konfigurasi",
+        "update": "Edit"
+      },
+      "switch_alert_modal": {
+        "title": "Beralih metode SSO ke {newProviderShortName}?",
+        "content": "Anda akan mengaktifkan {newProviderLongName} ({newProviderShortName}). Tindakan ini akan secara otomatis menonaktifkan {activeProviderLongName} ({activeProviderShortName}). Pengguna yang mencoba masuk melalui {activeProviderShortName} tidak akan dapat mengakses platform sampai mereka beralih ke metode baru. Apakah Anda yakin ingin melanjutkan?",
+        "primary_button_text": "Beralih",
+        "primary_button_text_loading": "Beralih",
+        "secondary_button_text": "Batal"
+      },
+      "form_section": {
+        "title": "Detail yang disediakan IdP untuk {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Menyimpan",
+        "save_changes": "Simpan perubahan",
+        "configure_only": "Hanya konfigurasi",
+        "configure_and_enable": "Konfigurasi dan aktifkan",
+        "default": "Simpan"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} detail yang disediakan untuk IdP Anda",
+        "button_text": "Dapatkan detail pengaturan"
+      },
+      "saml": {
+        "header": "Aktifkan SAML",
+        "description": "Konfigurasi penyedia identitas SAML Anda untuk mengaktifkan single sign-on.",
+        "configure": {
+          "title": "Aktifkan SAML",
+          "description": "Verifikasi kepemilikan domain email untuk mengakses fitur keamanan termasuk single sign-on.",
+          "toast": {
+            "success_title": "Berhasil!",
+            "create_success_message": "Penyedia SAML berhasil dibuat.",
+            "update_success_message": "Penyedia SAML berhasil diperbarui.",
+            "error_title": "Error!",
+            "error_message": "Gagal menyimpan penyedia SAML. Silakan coba lagi."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Detail web",
+            "entity_id": {
+              "label": "Entity ID | Audience | Informasi metadata",
+              "description": "Kami akan menghasilkan bagian metadata ini yang mengidentifikasi aplikasi Plane ini sebagai layanan yang diotorisasi di IdP Anda."
+            },
+            "callback_url": {
+              "label": "URL masuk tunggal",
+              "description": "Kami akan menghasilkan ini untuk Anda. Tambahkan ini di bidang URL pengalihan masuk IdP Anda."
+            },
+            "logout_url": {
+              "label": "URL logout tunggal",
+              "description": "Kami akan menghasilkan ini untuk Anda. Tambahkan ini di bidang URL pengalihan logout tunggal IdP Anda."
+            }
+          },
+          "mobile_details": {
+            "header": "Detail mobile",
+            "entity_id": {
+              "label": "Entity ID | Audience | Informasi metadata",
+              "description": "Kami akan menghasilkan bagian metadata ini yang mengidentifikasi aplikasi Plane ini sebagai layanan yang diotorisasi di IdP Anda."
+            },
+            "callback_url": {
+              "label": "URL masuk tunggal",
+              "description": "Kami akan menghasilkan ini untuk Anda. Tambahkan ini di bidang URL pengalihan masuk IdP Anda."
+            },
+            "logout_url": {
+              "label": "URL logout tunggal",
+              "description": "Kami akan menghasilkan ini untuk Anda. Tambahkan ini di bidang URL pengalihan logout IdP Anda."
+            }
+          },
+          "mapping_table": {
+            "header": "Detail pemetaan",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Aktifkan OIDC",
+        "description": "Konfigurasi penyedia identitas OIDC Anda untuk mengaktifkan single sign-on.",
+        "configure": {
+          "title": "Aktifkan OIDC",
+          "description": "Verifikasi kepemilikan domain email untuk mengakses fitur keamanan termasuk single sign-on.",
+          "toast": {
+            "success_title": "Berhasil!",
+            "create_success_message": "Penyedia OIDC berhasil dibuat.",
+            "update_success_message": "Penyedia OIDC berhasil diperbarui.",
+            "error_title": "Error!",
+            "error_message": "Gagal menyimpan penyedia OIDC. Silakan coba lagi."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Detail web",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "Kami akan menghasilkan ini untuk aplikasi Plane ini. Tambahkan ini sebagai origin tepercaya di bidang yang sesuai di IdP Anda."
+            },
+            "callback_url": {
+              "label": "URL pengalihan",
+              "description": "Kami akan menghasilkan ini untuk Anda. Tambahkan ini di bidang URL pengalihan masuk IdP Anda."
+            },
+            "logout_url": {
+              "label": "URL logout",
+              "description": "Kami akan menghasilkan ini untuk Anda. Tambahkan ini di bidang URL pengalihan logout IdP Anda."
+            }
+          },
+          "mobile_details": {
+            "header": "Detail mobile",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "Kami akan menghasilkan ini untuk aplikasi Plane ini. Tambahkan ini sebagai origin tepercaya di bidang yang sesuai di IdP Anda."
+            },
+            "callback_url": {
+              "label": "URL pengalihan",
+              "description": "Kami akan menghasilkan ini untuk Anda. Tambahkan ini di bidang URL pengalihan masuk IdP Anda."
+            },
+            "logout_url": {
+              "label": "URL logout",
+              "description": "Kami akan menghasilkan ini untuk Anda. Tambahkan ini di bidang URL pengalihan logout IdP Anda."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "Email",
+        "placeholder": "nama@perusahaan.com",
+        "errors": {
+          "required": "Email wajib diisi",
+          "invalid": "Email tidak valid"
+        }
+      },
+      "password": {
+        "label": "Password",
+        "set_password": "Atur password",
+        "placeholder": "Masukkan password",
+        "confirm_password": {
+          "label": "Konfirmasi password",
+          "placeholder": "Konfirmasi password"
+        },
+        "current_password": {
+          "label": "Password saat ini"
+        },
+        "new_password": {
+          "label": "Password baru",
+          "placeholder": "Masukkan password baru"
+        },
+        "change_password": {
+          "label": {
+            "default": "Ubah password",
+            "submitting": "Mengubah password"
+          }
+        },
+        "errors": {
+          "match": "Password tidak cocok",
+          "empty": "Silakan masukkan password anda",
+          "length": "Panjang password harus lebih dari 8 karakter",
+          "strength": {
+            "weak": "Password lemah",
+            "strong": "Password kuat"
+          }
+        },
+        "submit": "Atur password",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Berhasil!",
+              "message": "Password berhasil diubah."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Terjadi kesalahan. Silakan coba lagi."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Kode unik",
+        "placeholder": "123456",
+        "paste_code": "Tempelkan kode yang dikirim ke email anda",
+        "requesting_new_code": "Meminta kode baru",
+        "sending_code": "Mengirim kode"
+      },
+      "already_have_an_account": "Sudah punya akun?",
+      "login": "Masuk",
+      "create_account": "Buat akun",
+      "new_to_plane": "Baru di Plane?",
+      "back_to_sign_in": "Kembali ke halaman masuk",
+      "resend_in": "Kirim ulang dalam {seconds} detik",
+      "sign_in_with_unique_code": "Masuk dengan kode unik",
+      "forgot_password": "Lupa password?",
+      "username": {
+        "label": "Nama pengguna",
+        "placeholder": "Masukkan nama pengguna Anda"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Buat akun untuk mulai mengelola pekerjaan dengan tim anda.",
+        "step": {
+          "email": {
+            "header": "Daftar",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Daftar",
+            "sub_header": "Daftar menggunakan kombinasi email-password."
+          },
+          "unique_code": {
+            "header": "Daftar",
+            "sub_header": "Daftar menggunakan kode unik yang dikirim ke alamat email di atas."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Coba atur password yang lebih kuat untuk melanjutkan"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Masuk untuk mulai mengelola pekerjaan dengan tim anda.",
+        "step": {
+          "email": {
+            "header": "Masuk atau daftar",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Masuk atau daftar",
+            "sub_header": "Gunakan kombinasi email-password anda untuk masuk."
+          },
+          "unique_code": {
+            "header": "Masuk atau daftar",
+            "sub_header": "Masuk menggunakan kode unik yang dikirim ke alamat email di atas."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Reset password anda",
+      "description": "Masukkan alamat email akun anda yang telah diverifikasi dan kami akan mengirimkan link reset password.",
+      "email_sent": "Kami telah mengirim link reset ke alamat email anda",
+      "send_reset_link": "Kirim link reset",
+      "errors": {
+        "smtp_not_enabled": "Kami melihat bahwa admin anda belum mengaktifkan SMTP, kami tidak dapat mengirimkan link reset password"
+      },
+      "toast": {
+        "success": {
+          "title": "Email terkirim",
+          "message": "Periksa inbox anda untuk link reset password. Jika tidak muncul dalam beberapa menit, periksa folder spam."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Terjadi kesalahan. Silakan coba lagi."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Atur password baru",
+      "description": "Amankan akun anda dengan password yang kuat"
+    },
+    "set_password": {
+      "title": "Amankan akun anda",
+      "description": "Mengatur password membantu anda masuk dengan aman"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Error!",
+          "message": "Gagal keluar. Silakan coba lagi."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Lanjutkan dengan {ldapProviderName}",
+        "sub_header": "Masukkan kredensial {ldapProviderName} Anda"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/automation.json b/packages/i18n/src/locales/id/automation.json
new file mode 100644
index 0000000..2fd8636
--- /dev/null
+++ b/packages/i18n/src/locales/id/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Otomatisasi kustom",
+      "create_automation": "Buat otomatisasi"
+    },
+    "scope": {
+      "label": "Cakupan",
+      "run_on": "Jalankan pada"
+    },
+    "trigger": {
+      "label": "Pemicu",
+      "add_trigger": "Tambah pemicu",
+      "sidebar_header": "Konfigurasi pemicu",
+      "input_label": "Apa pemicu untuk otomatisasi ini?",
+      "input_placeholder": "Pilih opsi",
+      "section_plane_events": "Peristiwa Plane",
+      "section_time_based": "Berbasis waktu",
+      "fixed_schedule": "Jadwal tetap",
+      "schedule": {
+        "frequency": "Frekuensi",
+        "select_day": "Pilih hari",
+        "day_of_month": "Hari dalam sebulan",
+        "monthly_every": "Setiap",
+        "monthly_day_aria": "Hari {day}",
+        "time": "Waktu",
+        "hour": "Jam",
+        "minute": "Menit",
+        "hour_suffix": "jam",
+        "minute_suffix": "mnt",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Zona waktu",
+        "timezone_placeholder": "Pilih zona waktu",
+        "frequency_daily": "Harian",
+        "frequency_weekly": "Mingguan",
+        "frequency_monthly": "Bulanan",
+        "on": "Pada",
+        "validation_weekly_day_required": "Pilih setidaknya satu hari dalam seminggu.",
+        "validation_monthly_date_required": "Pilih satu hari dalam sebulan.",
+        "main_content_schedule_summary_daily": "Setiap hari pukul {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Setiap minggu pada {days} pukul {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Setiap bulan pada hari {day} pukul {time} ({timezone}).",
+        "schedule_mode": "Mode jadwal",
+        "schedule_mode_fixed": "Tetap",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Masukkan ekspresi Cron",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Ekspresi Cron tidak valid.",
+        "cron_preview": "Ekspresi Cron ini menjalankan \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Kembali",
+        "next": "Tambah aksi"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Anda tidak dapat mengubah jenis pemicu setelah dibuat"
+      }
+    },
+    "condition": {
+      "label": "Dengan syarat",
+      "add_condition": "Tambah kondisi",
+      "adding_condition": "Menambah kondisi"
+    },
+    "action": {
+      "label": "Aksi",
+      "add_action": "Tambah aksi",
+      "sidebar_header": "Aksi",
+      "input_label": "Apa yang dilakukan otomatisasi ini?",
+      "input_placeholder": "Pilih opsi",
+      "handler_name": {
+        "add_comment": "Tambah komentar",
+        "change_property": "Ubah properti",
+        "run_script": "Jalankan Skrip"
+      },
+      "configuration": {
+        "label": "Konfigurasi",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Pilih properti",
+            "change_type": "Pilih",
+            "property_value_select": "{count, plural, one{Pilih nilai} other{Pilih nilai}}",
+            "property_value_select_date": "Pilih tanggal"
+          },
+          "validation": {
+            "property_name_required": "Nama properti diperlukan",
+            "change_type_required": "Jenis perubahan diperlukan",
+            "property_value_required": "Nilai properti diperlukan"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Tambah komentar"
+      },
+      "run_script_block": {
+        "title": "Jalankan skrip"
+      },
+      "change_property_block": {
+        "title": "Ubah properti"
+      },
+      "validation": {
+        "delete_only_action": "Nonaktifkan otomatisasi sebelum menghapus satu-satunya aksi."
+      }
+    },
+    "conjunctions": {
+      "and": "Dan",
+      "or": "Atau",
+      "if": "Jika",
+      "then": "Maka"
+    },
+    "enable": {
+      "alert": "Tekan 'Aktifkan' ketika otomatisasi Anda selesai. Setelah diaktifkan, otomatisasi akan siap dijalankan.",
+      "validation": {
+        "required": "Otomatisasi harus memiliki pemicu dan setidaknya satu aksi untuk dapat diaktifkan."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Otomatisasi harus dinonaktifkan sebelum menghapusnya."
+      }
+    },
+    "table": {
+      "title": "Judul otomatisasi",
+      "scope": "Cakupan",
+      "projects": "Proyek",
+      "last_run_on": "Terakhir dijalankan pada",
+      "created_on": "Dibuat pada",
+      "last_updated_on": "Terakhir diperbarui pada",
+      "last_run_status": "Status terakhir dijalankan",
+      "average_duration": "Durasi rata-rata",
+      "owner": "Pemilik",
+      "executions": "Eksekusi"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Buat otomatisasi",
+        "update": "Perbarui otomatisasi"
+      },
+      "title": {
+        "placeholder": "Beri nama otomatisasi Anda.",
+        "required_error": "Judul diperlukan"
+      },
+      "description": {
+        "placeholder": "Deskripsikan otomatisasi Anda."
+      },
+      "submit_button": {
+        "create": "Buat otomatisasi",
+        "update": "Perbarui otomatisasi"
+      }
+    },
+    "delete_modal": {
+      "heading": "Hapus otomatisasi"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Tampilkan kegagalan",
+        "all": "Semua",
+        "only_activity": "Hanya aktivitas",
+        "only_run_history": "Hanya riwayat eksekusi"
+      },
+      "run_history": {
+        "initiator": "Pemrakarsa"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Berhasil!",
+          "message": "Otomatisasi berhasil dibuat."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Pembuatan otomatisasi gagal."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Berhasil!",
+          "message": "Otomatisasi berhasil diperbarui."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Pembaruan otomatisasi gagal."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Berhasil!",
+          "message": "Otomatisasi berhasil diaktifkan."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Pengaktifan otomatisasi gagal."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Berhasil!",
+          "message": "Otomatisasi berhasil dinonaktifkan."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Penonaktifan otomatisasi gagal."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Otomatisasi dihapus",
+          "message": "{name}, otomatisasi, telah dihapus dari proyek Anda."
+        },
+        "error": {
+          "title": "Kami tidak dapat menghapus otomatisasi tersebut kali ini.",
+          "message": "Coba hapus lagi atau kembali nanti. Jika Anda masih tidak bisa menghapusnya, hubungi kami."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Error!",
+            "message": "Gagal membuat aksi. Silakan coba lagi!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Error!",
+            "message": "Gagal memperbarui aksi. Silakan coba lagi!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Belum ada otomatisasi untuk ditampilkan.",
+        "description": "Otomatisasi membantu Anda menghilangkan tugas berulang dengan mengatur pemicu, kondisi, dan aksi. Buat satu untuk menghemat waktu dan menjaga pekerjaan berjalan dengan mudah."
+      },
+      "upgrade": {
+        "title": "Otomatisasi",
+        "description": "Otomatisasi adalah cara untuk mengotomatisasi tugas dalam proyek Anda.",
+        "sub_description": "Dapatkan kembali 80% waktu admin Anda ketika menggunakan Otomatisasi."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Pilih proyek untuk menjalankan otomatisasi ini",
+        "all_projects": {
+          "label": "Semua proyek",
+          "description": "Otomatisasi akan berjalan untuk semua proyek di ruang kerja."
+        },
+        "select_projects": {
+          "label": "Pilih proyek",
+          "description": "Otomatisasi akan berjalan untuk proyek yang dipilih di ruang kerja.",
+          "placeholder": "Pilih proyek"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Otomatisasi",
+        "title": "Otomatisasi",
+        "description": "Standarisasi proses di seluruh ruang kerja Anda dengan otomatisasi global."
+      },
+      "table": {
+        "scope": {
+          "global": "Global",
+          "project": {
+            "label": "Proyek",
+            "multiple": "Beberapa",
+            "all": "Semua"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/common.json b/packages/i18n/src/locales/id/common.json
new file mode 100644
index 0000000..7d26685
--- /dev/null
+++ b/packages/i18n/src/locales/id/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Kami sedang mengerjakan ini. Jika Anda memerlukan bantuan segera,",
+    "reach_out_to_us": "hubungi kami",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Jika tidak, coba segarkan halaman sesekali atau kunjungi",
+    "status_page": "halaman status kami"
+  },
+  "submit": "Kirim",
+  "cancel": "Batal",
+  "loading": "Memuat",
+  "error": "Kesalahan",
+  "success": "Sukses",
+  "warning": "Peringatan",
+  "info": "Info",
+  "close": "Tutup",
+  "yes": "Ya",
+  "no": "Tidak",
+  "ok": "OK",
+  "name": "Nama",
+  "unknown_user": "Pengguna tidak dikenal",
+  "description": "Deskripsi",
+  "search": "Cari",
+  "add_member": "Tambah anggota",
+  "adding_members": "Menambah anggota",
+  "remove_member": "Hapus anggota",
+  "add_members": "Tambah anggota",
+  "adding_member": "Menambah anggota",
+  "remove_members": "Hapus anggota",
+  "add": "Tambah",
+  "adding": "Menambah",
+  "remove": "Hapus",
+  "add_new": "Tambah baru",
+  "remove_selected": "Hapus yang dipilih",
+  "first_name": "Nama depan",
+  "last_name": "Nama belakang",
+  "email": "Email",
+  "display_name": "Nama tampilan",
+  "role": "Peran",
+  "timezone": "Zona waktu",
+  "avatar": "Avatar",
+  "cover_image": "Gambar sampul",
+  "password": "Kata sandi",
+  "change_cover": "Ganti sampul",
+  "language": "Bahasa",
+  "saving": "Menyimpan",
+  "save_changes": "Simpan perubahan",
+  "deactivate_account": "Nonaktifkan akun",
+  "deactivate_account_description": "Saat menonaktifkan akun, semua data dan sumber daya dalam akun tersebut akan dihapus secara permanen dan tidak dapat dipulihkan.",
+  "profile_settings": "Pengaturan profil",
+  "your_account": "Akun Anda",
+  "security": "Keamanan",
+  "activity": "Aktivitas",
+  "activity_empty_state": {
+    "no_activity": "Belum ada aktivitas",
+    "no_transitions": "Belum ada transisi",
+    "no_comments": "Belum ada komentar",
+    "no_worklogs": "Belum ada catatan kerja",
+    "no_history": "Belum ada riwayat"
+  },
+  "preferences": "Preferensi",
+  "language_and_time": "Bahasa & Waktu",
+  "notifications": "Notifikasi",
+  "workspaces": "Ruang kerja",
+  "create_workspace": "Buat ruang kerja",
+  "invitations": "Undangan",
+  "summary": "Ringkasan",
+  "assigned": "Ditetapkan",
+  "created": "Dibuat",
+  "subscribed": "Berlangganan",
+  "you_do_not_have_the_permission_to_access_this_page": "Anda tidak memiliki izin untuk mengakses halaman ini.",
+  "something_went_wrong_please_try_again": "Terjadi kesalahan. Silakan coba lagi.",
+  "load_more": "Muat lebih banyak",
+  "select_or_customize_your_interface_color_scheme": "Pilih atau sesuaikan skema warna antarmuka Anda.",
+  "timezone_setting": "Pengaturan zona waktu saat ini.",
+  "language_setting": "Pilih bahasa yang digunakan di antarmuka pengguna.",
+  "settings_moved_to_preferences": "Pengaturan Zona waktu & Bahasa telah dipindahkan ke preferensi.",
+  "go_to_preferences": "Buka preferensi",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Pilih gaya gerakan kursor yang terasa tepat untuk Anda.",
+  "theme": "Tema",
+  "smooth_cursor": "Kursor Halus",
+  "system_preference": "Preferensi Sistem",
+  "light": "Terang",
+  "dark": "Gelap",
+  "light_contrast": "Kontras tinggi terang",
+  "dark_contrast": "Kontras tinggi gelap",
+  "custom": "Tema kustom",
+  "select_your_theme": "Pilih tema Anda",
+  "customize_your_theme": "Sesuaikan tema Anda",
+  "background_color": "Warna latar belakang",
+  "text_color": "Warna teks",
+  "primary_color": "Warna utama (Tema)",
+  "sidebar_background_color": "Warna latar belakang sidebar",
+  "sidebar_text_color": "Warna teks sidebar",
+  "set_theme": "Atur tema",
+  "enter_a_valid_hex_code_of_6_characters": "Masukkan kode hex yang valid dari 6 karakter",
+  "background_color_is_required": "Warna latar belakang diperlukan",
+  "text_color_is_required": "Warna teks diperlukan",
+  "primary_color_is_required": "Warna utama diperlukan",
+  "sidebar_background_color_is_required": "Warna latar belakang sidebar diperlukan",
+  "sidebar_text_color_is_required": "Warna teks sidebar diperlukan",
+  "updating_theme": "Memperbarui tema",
+  "theme_updated_successfully": "Tema berhasil diperbarui",
+  "failed_to_update_the_theme": "Gagal memperbarui tema",
+  "email_notifications": "Notifikasi email",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Tetap terupdate tentang item kerja yang Anda langgani. Aktifkan ini untuk mendapatkan notifikasi.",
+  "email_notification_setting_updated_successfully": "Pengaturan notifikasi email berhasil diperbarui",
+  "failed_to_update_email_notification_setting": "Gagal memperbarui pengaturan notifikasi email",
+  "notify_me_when": "Beri tahu saya ketika",
+  "property_changes": "Perubahan properti",
+  "property_changes_description": "Beri tahu saya ketika properti item kerja seperti penugasannya, prioritas, estimasi, atau hal lainnya berubah.",
+  "state_change": "Perubahan status",
+  "state_change_description": "Beri tahu saya ketika item kerja berpindah ke status yang berbeda",
+  "issue_completed": "Item kerja selesai",
+  "issue_completed_description": "Beri tahu saya hanya ketika item kerja selesai",
+  "comments": "Komentar",
+  "comments_description": "Beri tahu saya ketika seseorang meninggalkan komentar pada item kerja",
+  "mentions": "Sebutkan",
+  "mentions_description": "Beri tahu saya hanya ketika seseorang menyebut saya dalam komentar atau deskripsi",
+  "old_password": "Kata sandi lama",
+  "general_settings": "Pengaturan umum",
+  "sign_out": "Keluar",
+  "signing_out": "Keluar",
+  "active_cycles": "Siklus aktif",
+  "active_cycles_description": "Pantau siklus di seluruh proyek, lacak item kerja prioritas tinggi, dan fokus pada siklus yang membutuhkan perhatian.",
+  "on_demand_snapshots_of_all_your_cycles": "Snapshot sesuai permintaan dari semua siklus Anda",
+  "upgrade": "Tingkatkan",
+  "10000_feet_view": "Tampilan 10.000 kaki dari semua siklus aktif.",
+  "10000_feet_view_description": "Perbesar untuk melihat siklus yang berjalan di seluruh proyek Anda sekaligus, bukan berpindah dari Siklus ke Siklus di setiap proyek.",
+  "get_snapshot_of_each_active_cycle": "Dapatkan snapshot dari setiap siklus aktif.",
+  "get_snapshot_of_each_active_cycle_description": "Lacak metrik tingkat tinggi untuk semua siklus aktif, lihat kemajuan mereka, dan dapatkan gambaran tentang ruang lingkup terhadap tenggat waktu.",
+  "compare_burndowns": "Bandingkan burndown.",
+  "compare_burndowns_description": "Pantau bagaimana kinerja setiap tim Anda dengan melihat laporan burndown masing-masing siklus.",
+  "quickly_see_make_or_break_issues": "Lihat dengan cepat item kerja yang krusial.",
+  "quickly_see_make_or_break_issues_description": "Prabaca item kerja prioritas tinggi untuk setiap siklus terhadap tanggal jatuh tempo. Lihat semuanya per siklus hanya dengan satu klik.",
+  "zoom_into_cycles_that_need_attention": "Perbesar siklus yang membutuhkan perhatian.",
+  "zoom_into_cycles_that_need_attention_description": "Selidiki status siklus mana pun yang tidak sesuai dengan harapan dengan satu klik.",
+  "stay_ahead_of_blockers": "Tetap di depan penghambat.",
+  "stay_ahead_of_blockers_description": "Identifikasi tantangan dari satu proyek ke proyek lainnya dan lihat ketergantungan antar siklus yang tidak terlihat dari tampilan lain mana pun.",
+  "analytics": "Analitik",
+  "workspace_invites": "Undangan ruang kerja",
+  "enter_god_mode": "Masuk ke mode dewa",
+  "workspace_logo": "Logo ruang kerja",
+  "new_issue": "Item kerja baru",
+  "your_work": "Pekerjaan Anda",
+  "drafts": "Draf",
+  "projects": "Proyek",
+  "views": "Tampilan",
+  "archives": "Arsip",
+  "settings": "Pengaturan",
+  "failed_to_move_favorite": "Gagal memindahkan favorit",
+  "favorites": "Favorit",
+  "no_favorites_yet": "Belum ada favorit",
+  "create_folder": "Buat folder",
+  "new_folder": "Folder baru",
+  "favorite_updated_successfully": "Favorit berhasil diperbarui",
+  "favorite_created_successfully": "Favorit berhasil dibuat",
+  "folder_already_exists": "Folder sudah ada",
+  "folder_name_cannot_be_empty": "Nama folder tidak boleh kosong",
+  "something_went_wrong": "Terjadi kesalahan",
+  "failed_to_reorder_favorite": "Gagal mengatur ulang favorit",
+  "favorite_removed_successfully": "Favorit berhasil dihapus",
+  "failed_to_create_favorite": "Gagal membuat favorit",
+  "failed_to_rename_favorite": "Gagal mengganti nama favorit",
+  "project_link_copied_to_clipboard": "Tautan proyek disalin ke clipboard",
+  "link_copied": "Tautan disalin",
+  "add_project": "Tambah proyek",
+  "create_project": "Buat proyek",
+  "failed_to_remove_project_from_favorites": "Tidak dapat menghapus proyek dari favorit. Silakan coba lagi.",
+  "project_created_successfully": "Proyek berhasil dibuat",
+  "project_created_successfully_description": "Proyek berhasil dibuat. Anda sekarang dapat mulai menambahkan item kerja ke dalamnya.",
+  "project_name_already_taken": "Nama proyek sudah digunakan",
+  "project_name_cannot_contain_special_characters": "Nama proyek tidak boleh mengandung karakter khusus.",
+  "project_identifier_already_taken": "ID proyek sudah digunakan",
+  "project_cover_image_alt": "Gambar sampul proyek",
+  "name_is_required": "Nama diperlukan",
+  "title_should_be_less_than_255_characters": "Judul harus kurang dari 255 karakter",
+  "project_name": "Nama proyek",
+  "project_id_must_be_at_least_1_character": "ID proyek harus minimal 1 karakter",
+  "project_id_must_be_at_most_5_characters": "ID proyek maksimal 5 karakter",
+  "project_id": "ID proyek",
+  "project_id_tooltip_content": "Membantu Anda mengidentifikasi item kerja dalam proyek secara unik. Maksimal 50 karakter.",
+  "description_placeholder": "Deskripsi",
+  "only_alphanumeric_non_latin_characters_allowed": "Hanya karakter alfanumerik & Non-latin yang diizinkan.",
+  "project_id_is_required": "ID proyek diperlukan",
+  "project_id_allowed_char": "Hanya karakter alfanumerik & Non-latin yang diizinkan.",
+  "project_id_min_char": "ID proyek harus minimal 1 karakter",
+  "project_id_max_char": "ID proyek maksimal {max} karakter",
+  "project_description_placeholder": "Masukkan deskripsi proyek",
+  "select_network": "Pilih jaringan",
+  "lead": "Pemimpin",
+  "date_range": "Rentang tanggal",
+  "private": "Pribadi",
+  "public": "Umum",
+  "accessible_only_by_invite": "Diakses hanya dengan undangan",
+  "anyone_in_the_workspace_except_guests_can_join": "Siapa saja di ruang kerja kecuali Tamu dapat bergabung",
+  "creating": "Membuat",
+  "creating_project": "Membuat proyek",
+  "adding_project_to_favorites": "Menambahkan proyek ke favorit",
+  "project_added_to_favorites": "Proyek ditambahkan ke favorit",
+  "couldnt_add_the_project_to_favorites": "Tidak dapat menambahkan proyek ke favorit. Silakan coba lagi.",
+  "removing_project_from_favorites": "Menghapus proyek dari favorit",
+  "project_removed_from_favorites": "Proyek dihapus dari favorit",
+  "couldnt_remove_the_project_from_favorites": "Tidak dapat menghapus proyek dari favorit. Silakan coba lagi.",
+  "add_to_favorites": "Tambah ke favorit",
+  "remove_from_favorites": "Hapus dari favorit",
+  "publish_project": "Publikasikan proyek",
+  "publish": "Publikasikan",
+  "copy_link": "Salin tautan",
+  "leave_project": "Tinggalkan proyek",
+  "join_the_project_to_rearrange": "Bergabunglah dengan proyek untuk menyusun ulang",
+  "drag_to_rearrange": "Seret untuk menyusun ulang",
+  "congrats": "Selamat!",
+  "open_project": "Buka proyek",
+  "issues": "Item kerja",
+  "cycles": "Siklus",
+  "modules": "Modul",
+  "pages": "Halaman",
+  "intake": "Penerimaan",
+  "renew": "Perpanjang",
+  "preview": "Pratinjau",
+  "time_tracking": "Pelacakan waktu",
+  "work_management": "Manajemen kerja",
+  "projects_and_issues": "Proyek dan item kerja",
+  "projects_and_issues_description": "Aktifkan atau nonaktifkan ini untuk proyek ini.",
+  "cycles_description": "Tetapkan batas waktu kerja per proyek dan sesuaikan periode waktunya sesuai kebutuhan. Satu siklus bisa 2 minggu, berikutnya 1 minggu.",
+  "modules_description": "Atur pekerjaan ke dalam sub-proyek dengan pemimpin dan penanggung jawab khusus.",
+  "views_description": "Simpan pengurutan, filter, dan opsi tampilan khusus atau bagikan dengan tim Anda.",
+  "pages_description": "Buat dan edit konten bebas bentuk: catatan, dokumen, apa saja.",
+  "intake_description": "Izinkan non-anggota membagikan bug, masukan, dan saran tanpa mengganggu alur kerja Anda.",
+  "time_tracking_description": "Catat waktu yang dihabiskan untuk item kerja dan proyek.",
+  "work_management_description": "Kelola pekerjaan dan proyek Anda dengan mudah.",
+  "documentation": "Dokumentasi",
+  "message_support": "Pesan dukungan",
+  "contact_sales": "Hubungi penjualan",
+  "hyper_mode": "Mode Hyper",
+  "keyboard_shortcuts": "Pintasan keyboard",
+  "whats_new": "Apa yang baru?",
+  "version": "Versi",
+  "we_are_having_trouble_fetching_the_updates": "Kami mengalami kesulitan mengambil pembaruan.",
+  "our_changelogs": "changelog kami",
+  "for_the_latest_updates": "untuk pembaruan terbaru.",
+  "please_visit": "Silakan kunjungi",
+  "docs": "Dokumen",
+  "full_changelog": "Changelog lengkap",
+  "support": "Dukungan",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Ditenagai oleh Plane Pages",
+  "please_select_at_least_one_invitation": "Silakan pilih setidaknya satu undangan.",
+  "please_select_at_least_one_invitation_description": "Silakan pilih setidaknya satu undangan untuk bergabung dengan ruang kerja.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Kami melihat bahwa seseorang telah mengundang Anda untuk bergabung dengan ruang kerja",
+  "join_a_workspace": "Bergabunglah dengan ruang kerja",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Kami melihat bahwa seseorang telah mengundang Anda untuk bergabung dengan ruang kerja",
+  "join_a_workspace_description": "Bergabunglah dengan ruang kerja",
+  "accept_and_join": "Terima & Bergabung",
+  "go_home": "Kembali ke Beranda",
+  "no_pending_invites": "Tidak ada undangan yang tertunda",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Anda dapat melihat di sini jika seseorang mengundang Anda untuk bergabung dengan ruang kerja",
+  "back_to_home": "Kembali ke beranda",
+  "workspace_name": "nama-ruang-kerja",
+  "deactivate_your_account": "Nonaktifkan akun Anda",
+  "deactivate_your_account_description": "Setelah dinonaktifkan, Anda tidak akan dapat ditugaskan item kerja dan ditagih untuk ruang kerja Anda. Untuk mengaktifkan kembali akun Anda, Anda akan memerlukan undangan ke ruang kerja di alamat email ini.",
+  "deactivating": "Menonaktifkan",
+  "confirm": "Konfirmasi",
+  "confirming": "Mengonfirmasi",
+  "draft_created": "Draf dibuat",
+  "issue_created_successfully": "Item kerja berhasil dibuat",
+  "draft_creation_failed": "Pembuatan draf gagal",
+  "issue_creation_failed": "Pembuatan item kerja gagal",
+  "draft_issue": "Draf item kerja",
+  "issue_updated_successfully": "Item kerja berhasil diperbarui",
+  "issue_could_not_be_updated": "Item kerja tidak dapat diperbarui",
+  "create_a_draft": "Buat draf",
+  "save_to_drafts": "Simpan ke Draf",
+  "save": "Simpan",
+  "update": "Perbarui",
+  "updating": "Memperbarui",
+  "create_new_issue": "Buat item kerja baru",
+  "editor_is_not_ready_to_discard_changes": "Editor belum siap untuk membuang perubahan",
+  "failed_to_move_issue_to_project": "Gagal memindahkan item kerja ke proyek",
+  "create_more": "Buat lebih banyak",
+  "add_to_project": "Tambahkan ke proyek",
+  "discard": "Buang",
+  "duplicate_issue_found": "Item kerja duplikat ditemukan",
+  "duplicate_issues_found": "Item kerja duplikat ditemukan",
+  "no_matching_results": "Tidak ada hasil yang cocok",
+  "title_is_required": "Judul diperlukan",
+  "title": "Judul",
+  "state": "Negara",
+  "transition": "Transisi",
+  "history": "Riwayat",
+  "priority": "Prioritas",
+  "none": "Tidak ada",
+  "urgent": "Penting",
+  "high": "Tinggi",
+  "medium": "Sedang",
+  "low": "Rendah",
+  "members": "Anggota",
+  "assignee": "Penugas",
+  "assignees": "Penugas",
+  "subscriber": "{count, plural, one{# Pelanggan} other{# Pelanggan}}",
+  "you": "Anda",
+  "labels": "Label",
+  "create_new_label": "Buat label baru",
+  "label_name": "Nama label",
+  "failed_to_create_label": "Gagal membuat label. Silakan coba lagi.",
+  "start_date": "Tanggal mulai",
+  "end_date": "Tanggal akhir",
+  "due_date": "Tanggal jatuh tempo",
+  "target_date": "Tanggal target",
+  "estimate": "Perkiraan",
+  "change_parent_issue": "Ubah item kerja induk",
+  "remove_parent_issue": "Hapus item kerja induk",
+  "add_parent": "Tambahkan induk",
+  "loading_members": "Memuat anggota",
+  "view_link_copied_to_clipboard": "Tautan tampilan disalin ke clipboard.",
+  "required": "Diperlukan",
+  "optional": "Opsional",
+  "Cancel": "Batal",
+  "edit": "Sunting",
+  "archive": "Arsip",
+  "restore": "Pulihkan",
+  "open_in_new_tab": "Buka di tab baru",
+  "delete": "Hapus",
+  "deleting": "Menghapus",
+  "make_a_copy": "Buat salinan",
+  "move_to_project": "Pindahkan ke proyek",
+  "good": "Bagus",
+  "morning": "pagi",
+  "afternoon": "siang",
+  "evening": "malam",
+  "show_all": "Tampilkan semua",
+  "show_less": "Tampilkan lebih sedikit",
+  "no_data_yet": "Belum ada data",
+  "syncing": "Menyinkronkan",
+  "add_work_item": "Tambahkan item kerja",
+  "advanced_description_placeholder": "Tekan '/' untuk perintah",
+  "create_work_item": "Buat item kerja",
+  "attachments": "Lampiran",
+  "declining": "Menolak",
+  "declined": "Ditolak",
+  "decline": "Tolak",
+  "unassigned": "Belum ditugaskan",
+  "work_items": "Item kerja",
+  "add_link": "Tambahkan tautan",
+  "points": "Poin",
+  "no_assignee": "Tidak ada penugas",
+  "no_assignees_yet": "Belum ada penugas",
+  "no_labels_yet": "Belum ada label",
+  "ideal": "Ideal",
+  "current": "Saat ini",
+  "no_matching_members": "Tidak ada anggota yang cocok",
+  "leaving": "Meninggalkan",
+  "removing": "Menghapus",
+  "leave": "Tinggalkan",
+  "refresh": "Segarkan",
+  "refreshing": "Menyegarkan",
+  "refresh_status": "Status segar",
+  "prev": "Sebelumnya",
+  "next": "Selanjutnya",
+  "re_generating": "Menghasilkan kembali",
+  "re_generate": "Hasilkan kembali",
+  "re_generate_key": "Hasilkan kembali kunci",
+  "export": "Ekspor",
+  "member": "{count, plural, one{# anggota} other{# anggota}}",
+  "new_password_must_be_different_from_old_password": "Kata sandi baru harus berbeda dari kata sandi lama",
+  "edited": "disunting",
+  "bot": "Bot",
+  "settings_description": "Kelola akun, ruang kerja, dan preferensi proyek Anda di satu tempat. Beralih antar tab untuk mengonfigurasi dengan mudah.",
+  "back_to_workspace": "Kembali ke ruang kerja",
+  "upgrade_request": "Minta Admin Ruang Kerja untuk meningkatkan.",
+  "copied_to_clipboard": "Disalin ke clipboard",
+  "copied_to_clipboard_description": "URL berhasil disalin ke clipboard Anda",
+  "toast": {
+    "success": "Sukses!",
+    "error": "Kesalahan!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Tautan dibuat",
+        "message": "Tautan telah berhasil dibuat"
+      },
+      "not_created": {
+        "title": "Tautan tidak dibuat",
+        "message": "Tautan tidak dapat dibuat"
+      },
+      "updated": {
+        "title": "Tautan diperbarui",
+        "message": "Tautan telah berhasil diperbarui"
+      },
+      "not_updated": {
+        "title": "Tautan tidak diperbarui",
+        "message": "Tautan tidak dapat diperbarui"
+      },
+      "removed": {
+        "title": "Tautan dihapus",
+        "message": "Tautan telah berhasil dihapus"
+      },
+      "not_removed": {
+        "title": "Tautan tidak dihapus",
+        "message": "Tautan tidak dapat dihapus"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL tidak valid",
+        "placeholder": "Ketik atau tempel URL"
+      },
+      "title": {
+        "text": "Judul tampilan",
+        "placeholder": "Apa yang ingin Anda lihat sebagai tautan ini"
+      }
+    }
+  },
+  "common": {
+    "all": "Semua",
+    "no_items_in_this_group": "Tidak ada item dalam grup ini",
+    "drop_here_to_move": "Letakkan di sini untuk memindahkan",
+    "states": "Negara-negara",
+    "state": "Negara",
+    "state_groups": "Kelompok negara",
+    "state_group": "Kelompok negara",
+    "priorities": "Prioritas",
+    "priority": "Prioritas",
+    "team_project": "Proyek tim",
+    "project": "Proyek",
+    "cycle": "Siklus",
+    "cycles": "Siklus",
+    "module": "Modul",
+    "modules": "Modul",
+    "labels": "Label",
+    "label": "Label",
+    "admins": "Admin",
+    "users": "Pengguna",
+    "guests": "Tamu",
+    "assignees": "Penugas",
+    "assignee": "Penugas",
+    "created_by": "Dibuat oleh",
+    "none": "Tidak ada",
+    "link": "Tautan",
+    "estimates": "Perkiraan",
+    "estimate": "Perkiraan",
+    "created_at": "Dibuat pada",
+    "updated_at": "Diperbarui pada",
+    "completed_at": "Selesai pada",
+    "layout": "Tata letak",
+    "filters": "Filter",
+    "display": "Tampilan",
+    "load_more": "Muat lebih banyak",
+    "activity": "Aktivitas",
+    "analytics": "Analitik",
+    "dates": "Tanggal",
+    "success": "Sukses!",
+    "something_went_wrong": "Ada yang salah",
+    "error": {
+      "label": "Kesalahan!",
+      "message": "Terjadi kesalahan. Silakan coba lagi."
+    },
+    "group_by": "Kelompok berdasarkan",
+    "epic": "Epik",
+    "epics": "Epik",
+    "work_item": "Item kerja",
+    "work_items": "Item kerja",
+    "sub_work_item": "Sub-item kerja",
+    "views": "Tampilan",
+    "pages": "Halaman",
+    "add": "Tambah",
+    "warning": "Peringatan",
+    "updating": "Memperbarui",
+    "adding": "Menambahkan",
+    "update": "Perbarui",
+    "creating": "Membuat",
+    "create": "Buat",
+    "cancel": "Batalkan",
+    "description": "Deskripsi",
+    "title": "Judul",
+    "attachment": "Lampiran",
+    "general": "Umum",
+    "features": "Fitur",
+    "automation": "Otomatisasi",
+    "project_name": "Nama proyek",
+    "project_id": "ID proyek",
+    "project_timezone": "Zona waktu proyek",
+    "created_on": "Dibuat pada",
+    "updated_on": "Diperbarui pada",
+    "completed_on": "Completed on",
+    "update_project": "Perbarui proyek",
+    "identifier_already_exists": "Pengidentifikasi sudah ada",
+    "add_more": "Tambah lebih banyak",
+    "defaults": "Pola dasar",
+    "add_label": "Tambah label",
+    "customize_time_range": "Sesuaikan rentang waktu",
+    "loading": "Memuat",
+    "attachments": "Lampiran",
+    "property": "Properti",
+    "properties": "Properti",
+    "parent": "Induk",
+    "page": "Halaman",
+    "remove": "Hapus",
+    "archiving": "Mengarsipkan",
+    "archive": "Arsip",
+    "access": {
+      "public": "Publik",
+      "private": "Pribadi"
+    },
+    "done": "Selesai",
+    "sub_work_items": "Sub-item kerja",
+    "comment": "Komentar",
+    "workspace_level": "Tingkat ruang kerja",
+    "order_by": {
+      "label": "Urutkan berdasarkan",
+      "manual": "Manual - Peringkat",
+      "last_created": "Terakhir dibuat",
+      "last_updated": "Terakhir diperbarui",
+      "start_date": "Tanggal mulai",
+      "due_date": "Tanggal jatuh tempo",
+      "asc": "Menaik",
+      "desc": "Menurun",
+      "updated_on": "Diperbarui pada"
+    },
+    "sort": {
+      "asc": "Menaik",
+      "desc": "Menurun",
+      "created_on": "Dibuat pada",
+      "updated_on": "Diperbarui pada"
+    },
+    "comments": "Komentar",
+    "updates": "Pembaruan",
+    "additional_updates": "Pembaruan tambahan",
+    "clear_all": "Hapus semua",
+    "copied": "Disalin!",
+    "link_copied": "Tautan disalin!",
+    "link_copied_to_clipboard": "Tautan disalin ke clipboard",
+    "copied_to_clipboard": "Tautan item kerja disalin ke clipboard",
+    "branch_name_copied_to_clipboard": "Nama cabang disalin ke clipboard",
+    "is_copied_to_clipboard": "Item kerja disalin ke clipboard",
+    "no_links_added_yet": "Belum ada tautan yang ditambahkan",
+    "add_link": "Tambah tautan",
+    "links": "Tautan",
+    "go_to_workspace": "Pergi ke ruang kerja",
+    "progress": "Kemajuan",
+    "optional": "Opsional",
+    "join": "Bergabung",
+    "go_back": "Kembali",
+    "continue": "Lanjutkan",
+    "resend": "Kirim ulang",
+    "relations": "Hubungan",
+    "dependencies": "Ketergantungan",
+    "errors": {
+      "default": {
+        "title": "Kesalahan!",
+        "message": "Sesuatu telah salah. Silakan coba lagi."
+      },
+      "required": "Bidang ini diperlukan",
+      "entity_required": "{entity} diperlukan",
+      "restricted_entity": "{entity} dibatasi"
+    },
+    "update_link": "Perbarui tautan",
+    "attach": "Lampirkan",
+    "create_new": "Buat baru",
+    "add_existing": "Tambah yang ada",
+    "type_or_paste_a_url": "Ketik atau tempel URL",
+    "url_is_invalid": "URL tidak valid",
+    "display_title": "Judul tampilan",
+    "link_title_placeholder": "Apa yang ingin Anda lihat pada tautan ini",
+    "url": "URL",
+    "side_peek": "Tampilan samping",
+    "modal": "Modal",
+    "full_screen": "Layar penuh",
+    "close_peek_view": "Tutup tampilan peek",
+    "toggle_peek_view_layout": "Alihkan tata letak tampilan peek",
+    "options": "Opsi",
+    "duration": "Durasi",
+    "today": "Hari ini",
+    "week": "Minggu",
+    "month": "Bulan",
+    "quarter": "Kuartal",
+    "press_for_commands": "Tekan '/' untuk perintah",
+    "click_to_add_description": "Klik untuk menambahkan deskripsi",
+    "on_track": "Sesuai Jalur",
+    "off_track": "Menyimpang",
+    "at_risk": "Dalam risiko",
+    "timeline": "Linimasa",
+    "completion": "Penyelesaian",
+    "upcoming": "Mendatang",
+    "completed": "Selesai",
+    "in_progress": "Sedang berlangsung",
+    "planned": "Direncanakan",
+    "paused": "Dijedaikan",
+    "search": {
+      "label": "Pencarian",
+      "placeholder": "Ketik untuk mencari",
+      "no_matches_found": "Tidak ada kecocokan ditemukan",
+      "no_matching_results": "Tidak ada hasil yang cocok",
+      "min_chars": "Ketik setidaknya {count} karakter untuk mencari",
+      "error": "Terjadi kesalahan saat mengambil hasil pencarian",
+      "no_results": {
+        "title": "Tidak ada hasil yang cocok",
+        "description": "Hapus kriteria pencarian untuk melihat semua hasil"
+      }
+    },
+    "actions": {
+      "edit": "Edit",
+      "make_a_copy": "Buat salinan",
+      "open_in_new_tab": "Buka di tab baru",
+      "copy_link": "Salin tautan",
+      "copy_branch_name": "Salin nama branch",
+      "archive": "Arsip",
+      "restore": "Pulihkan",
+      "delete": "Hapus",
+      "remove_relation": "Hapus hubungan",
+      "subscribe": "Berlangganan",
+      "unsubscribe": "Berhenti berlangganan",
+      "clear_sorting": "Hapus pengurutan",
+      "show_weekends": "Tampilkan akhir pekan",
+      "enable": "Aktifkan",
+      "disable": "Nonaktifkan",
+      "copy_markdown": "Salin markdown",
+      "reply": "Balas"
+    },
+    "name": "Nama",
+    "discard": "Buang",
+    "confirm": "Konfirmasi",
+    "confirming": "Mengonfirmasi",
+    "read_the_docs": "Baca dokumen",
+    "default": "Bawaan",
+    "active": "Aktif",
+    "enabled": "Diaktifkan",
+    "disabled": "Dinonaktifkan",
+    "mandate": "Mandat",
+    "mandatory": "Wajib",
+    "global": "Global",
+    "yes": "Ya",
+    "no": "Tidak",
+    "please_wait": "Silakan tunggu",
+    "enabling": "Mengaktifkan",
+    "disabling": "Menonaktifkan",
+    "beta": "Beta",
+    "or": "atau",
+    "next": "Selanjutnya",
+    "back": "Kembali",
+    "retry": "Coba lagi",
+    "cancelling": "Membatalkan",
+    "configuring": "Mengkonfigurasi",
+    "clear": "Bersihkan",
+    "import": "Impor",
+    "connect": "Sambungkan",
+    "authorizing": "Mengautentikasi",
+    "processing": "Memproses",
+    "no_data_available": "Tidak ada data tersedia",
+    "from": "dari {name}",
+    "authenticated": "Terautentikasi",
+    "select": "Pilih",
+    "upgrade": "Tingkatkan",
+    "add_seats": "Tambahkan Kursi",
+    "projects": "Proyek",
+    "workspace": "Ruang kerja",
+    "workspaces": "Ruang kerja",
+    "team": "Tim",
+    "teams": "Tim",
+    "entity": "Entitas",
+    "entities": "Entitas",
+    "task": "Tugas",
+    "tasks": "Tugas",
+    "section": "Bagian",
+    "sections": "Bagian",
+    "edit": "Edit",
+    "connecting": "Menghubungkan",
+    "connected": "Terhubung",
+    "disconnect": "Putuskan",
+    "disconnecting": "Memutuskan",
+    "installing": "Menginstal",
+    "install": "Instal",
+    "reset": "Atur ulang",
+    "live": "Langsung",
+    "change_history": "Riwayat Perubahan",
+    "coming_soon": "Segera hadir",
+    "member": "Anggota",
+    "members": "Anggota",
+    "you": "Anda",
+    "upgrade_cta": {
+      "higher_subscription": "Tingkatkan ke langganan yang lebih tinggi",
+      "talk_to_sales": "Bicaralah dengan Penjualan"
+    },
+    "category": "Kategori",
+    "categories": "Kategori",
+    "saving": "Menyimpan",
+    "save_changes": "Simpan perubahan",
+    "delete": "Hapus",
+    "deleting": "Menghapus",
+    "pending": "Tertunda",
+    "invite": "Undang",
+    "view": "Lihat",
+    "deactivated_user": "Pengguna dinonaktifkan",
+    "apply": "Terapkan",
+    "applying": "Terapkan",
+    "overview": "Ikhtisar",
+    "no_of": "Jumlah {entity}",
+    "resolved": "Terselesaikan",
+    "get_started": "Mulai",
+    "worklogs": "Log Kerja",
+    "project_updates": "Pembaruan Proyek",
+    "workflows": "Alur Kerja",
+    "templates": "Templat",
+    "business": "Bisnis",
+    "members_and_teamspaces": "Anggota & Teamspaces",
+    "recurring_work_items": "Item kerja berulang",
+    "milestones": "Tonggak",
+    "open_in_full_screen": "Buka {page} dalam layar penuh",
+    "details": "Detail",
+    "project_structure": "Struktur proyek",
+    "custom_properties": "Properti kustom",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Sumbu-X",
+    "y_axis": "Sumbu-Y",
+    "metric": "Metrik"
+  },
+  "form": {
+    "title": {
+      "required": "Judul wajib diisi",
+      "max_length": "Judul harus kurang dari {length} karakter"
+    }
+  },
+  "entity": {
+    "grouping_title": "Pengelompokan {entity}",
+    "priority": "Prioritas {entity}",
+    "all": "Semua {entity}",
+    "drop_here_to_move": "Letakkan di sini untuk memindahkan {entity}",
+    "delete": {
+      "label": "Hapus {entity}",
+      "success": "{entity} berhasil dihapus",
+      "failed": "Gagal menghapus {entity}"
+    },
+    "update": {
+      "failed": "Gagal memperbarui {entity}",
+      "success": "{entity} berhasil diperbarui"
+    },
+    "link_copied_to_clipboard": "Tautan {entity} disalin ke papan klip",
+    "fetch": {
+      "failed": "Terjadi kesalahan saat mengambil {entity}"
+    },
+    "add": {
+      "success": "{entity} berhasil ditambahkan",
+      "failed": "Terjadi kesalahan saat menambahkan {entity}"
+    },
+    "remove": {
+      "success": "{entity} berhasil dihapus",
+      "failed": "Terjadi kesalahan saat menghapus {entity}"
+    }
+  },
+  "attachment": {
+    "error": "File tidak dapat dilampirkan. Coba unggah lagi.",
+    "only_one_file_allowed": "Hanya satu file yang dapat diunggah pada satu waktu.",
+    "file_size_limit": "File harus berukuran {size}MB atau lebih kecil.",
+    "drag_and_drop": "Seret dan jatuhkan di mana saja untuk mengunggah",
+    "delete": "Hapus lampiran"
+  },
+  "label": {
+    "select": "Pilih label",
+    "create": {
+      "success": "Label berhasil dibuat",
+      "failed": "Gagal membuat label",
+      "already_exists": "Label sudah ada",
+      "type": "Ketik untuk menambah label baru"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Tampilan} other {Tampilan}}",
+    "create": {
+      "label": "Buat Tampilan"
+    },
+    "update": {
+      "label": "Perbarui Tampilan"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Tamu",
+      "description": "Anggota eksternal organisasi dapat diundang sebagai tamu."
+    },
+    "member": {
+      "title": "Anggota",
+      "description": "Kemampuan untuk membaca, menulis, mengedit, dan menghapus entitas di dalam proyek, siklus, dan modul"
+    },
+    "admin": {
+      "title": "Admin",
+      "description": "Semua izin diatur ke true dalam ruang kerja."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Manajer Produk / Proyek",
+    "development_or_engineering": "Pengembangan / Rekayasa",
+    "founder_or_executive": "Pendiri / Eksekutif",
+    "freelancer_or_consultant": "Freelancer / Konsultan",
+    "marketing_or_growth": "Pemasaran / Pertumbuhan",
+    "sales_or_business_development": "Penjualan / Pengembangan Bisnis",
+    "support_or_operations": "Dukungan / Operasi",
+    "student_or_professor": "Mahasiswa / Profesor",
+    "human_resources": "Sumber Daya Manusia",
+    "other": "Lainnya"
+  },
+  "default_global_view": {
+    "all_issues": "Semua item kerja",
+    "assigned": "Ditugaskan",
+    "created": "Dibuat",
+    "subscribed": "Disubscribe"
+  },
+  "description_versions": {
+    "last_edited_by": "Terakhir disunting oleh",
+    "previously_edited_by": "Sebelumnya disunting oleh",
+    "edited_by": "Disunting oleh"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane tidak berhasil dimulai. Ini bisa karena satu atau lebih layanan Plane gagal untuk dimulai.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Pilih View Logs dari setup.sh dan log Docker untuk memastikan."
+  },
+  "customize_navigation": "Sesuaikan navigasi",
+  "personal": "Pribadi",
+  "accordion_navigation_control": "Navigasi sidebar akordeon",
+  "horizontal_navigation_bar": "Navigasi Tab",
+  "show_limited_projects_on_sidebar": "Tampilkan proyek terbatas di sidebar",
+  "enter_number_of_projects": "Masukkan jumlah proyek",
+  "pin": "Sematkan",
+  "unpin": "Lepas sematan",
+  "workspace_dashboards": "Dasbor",
+  "pi_chat": "Obrolan AI",
+  "in_app": "Dalam Aplikasi",
+  "forms": "Formulir",
+  "milestones": "Tonggak",
+  "milestones_description": "Tonggak menyediakan lapisan untuk menyelaraskan item kerja menuju tanggal penyelesaian bersama.",
+  "file_upload": {
+    "upload_text": "Klik di sini untuk mengunggah file",
+    "drag_drop_text": "Tarik dan Lepas",
+    "processing": "Memproses",
+    "invalid_file_type": "Tipe file tidak valid",
+    "missing_fields": "Bidang yang hilang",
+    "success": "{fileName} Diunggah!"
+  },
+  "date": "Tanggal",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Ekspor item kerja ke file CSV.",
+      "short_description": "Ekspor sebagai csv"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Ekspor item kerja ke file Excel.",
+      "short_description": "Ekspor sebagai excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Ekspor item kerja ke file Excel.",
+      "short_description": "Ekspor sebagai excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Ekspor item kerja ke file JSON.",
+      "short_description": "Ekspor sebagai json"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/cycle.json b/packages/i18n/src/locales/id/cycle.json
new file mode 100644
index 0000000..b17f320
--- /dev/null
+++ b/packages/i18n/src/locales/id/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Tambahkan item kerja ke siklus untuk melihat kemajuannya"
+      },
+      "chart": {
+        "title": "Tambahkan item kerja ke siklus untuk melihat grafik burndown."
+      },
+      "priority_issue": {
+        "title": "Amati item kerja prioritas yang ditangani dalam siklus pada pandangan pertama."
+      },
+      "assignee": {
+        "title": "Tambahkan penugasan ke item kerja untuk melihat pembagian kerja berdasarkan penugasan."
+      },
+      "label": {
+        "title": "Tambahkan label ke item kerja untuk melihat pembagian kerja berdasarkan label."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Siklus} other {Siklus}}",
+    "no_cycle": "Tidak ada siklus"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Tambahkan item kerja ke siklus untuk melihat\n kemajuannya"
+      },
+      "priority": {
+        "title": "Amati item kerja prioritas tinggi yang ditangani dalam\n siklus secara sekilas."
+      },
+      "assignee": {
+        "title": "Tambahkan penanggung jawab ke item kerja untuk melihat\n pembagian pekerjaan berdasarkan penanggung jawab."
+      },
+      "label": {
+        "title": "Tambahkan label ke item kerja untuk melihat\n pembagian pekerjaan berdasarkan label."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/editor.json b/packages/i18n/src/locales/id/editor.json
new file mode 100644
index 0000000..ffdf9b0
--- /dev/null
+++ b/packages/i18n/src/locales/id/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Seret dan lepas untuk mengunggah file eksternal"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "File terlalu besar.",
+        "description": "Ukuran maksimum per file adalah {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Jenis file tidak didukung.",
+        "description": "Lihat format yang didukung"
+      },
+      "default": {
+        "title": "Upload gagal.",
+        "description": "Terjadi kesalahan. Silakan coba lagi."
+      }
+    },
+    "upgrade": {
+      "description": "Tingkatkan paket Anda untuk melihat lampiran ini."
+    },
+    "aria": {
+      "click_to_upload": "Klik untuk mengunggah lampiran"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Ubah menjadi konten tertanam",
+      "convert_to_link": "Ubah menjadi tautan",
+      "convert_to_richcard": "Ubah menjadi kartu kaya"
+    },
+    "placeholder": {
+      "insert_embed": "Masukkan tautan tertanam pilihan Anda di sini, seperti video YouTube, desain Figma, dll.",
+      "link": "Masukkan atau tempel tautan"
+    },
+    "input_modal": {
+      "embed": "Tanam",
+      "works_with_links": "Bekerja dengan YouTube, Figma, Google Docs dan lainnya"
+    },
+    "error": {
+      "not_valid_link": "Silakan masukkan URL yang valid."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Deskripsikan konten blok ini",
+      "generated_here": "Konten AI Anda akan dihasilkan di sini"
+    },
+    "block_types": {
+      "placeholder": "Pilih jenis blok",
+      "summarize_page": "Ringkas Halaman",
+      "custom_prompt": "Prompt Kustom"
+    },
+    "actions": {
+      "discard": "Buang",
+      "generate": "Hasilkan",
+      "generating": "Menghasilkan",
+      "rewriting": "Menulis ulang",
+      "rewrite": "Tulis ulang",
+      "use_this": "Gunakan ini",
+      "refine": "Perbaiki"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/empty-state.json b/packages/i18n/src/locales/id/empty-state.json
new file mode 100644
index 0000000..5c339ce
--- /dev/null
+++ b/packages/i18n/src/locales/id/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Belum ada metrik progres untuk ditampilkan.",
+      "description": "Mulai mengatur nilai properti dalam item kerja untuk melihat metrik progres di sini."
+    },
+    "updates": {
+      "title": "Belum ada pembaruan.",
+      "description": "Setelah anggota proyek menambahkan pembaruan, itu akan muncul di sini"
+    },
+    "search": {
+      "title": "Tidak ada hasil yang cocok.",
+      "description": "Tidak ada hasil yang ditemukan. Coba sesuaikan istilah pencarian Anda."
+    },
+    "not_found": {
+      "title": "Ups! Ada yang salah",
+      "description": "Kami tidak dapat mengambil akun Plane Anda saat ini. Ini mungkin kesalahan jaringan.",
+      "cta_primary": "Coba muat ulang"
+    },
+    "server_error": {
+      "title": "Kesalahan server",
+      "description": "Kami tidak dapat terhubung dan mengambil data dari server kami. Jangan khawatir, kami sedang menanganinya.",
+      "cta_primary": "Coba muat ulang"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Sepertinya Anda tidak memiliki akses ke Proyek ini",
+      "restricted_description": "Hubungi admin untuk meminta akses agar Anda dapat melanjutkan di sini.",
+      "join_description": "Klik tombol di bawah ini untuk bergabung.",
+      "cta_primary": "Bergabung dengan proyek",
+      "cta_loading": "Sedang bergabung dengan proyek"
+    },
+    "invalid_project": {
+      "title": "Proyek tidak ditemukan",
+      "description": "Proyek yang Anda cari tidak ada."
+    },
+    "work_items": {
+      "title": "Mulai dengan item kerja pertama Anda.",
+      "description": "Item kerja adalah blok bangunan proyek Anda — tetapkan pemilik, atur prioritas, dan lacak kemajuan dengan mudah.",
+      "cta_primary": "Buat item kerja pertama Anda"
+    },
+    "cycles": {
+      "title": "Kelompokkan dan batasi waktu pekerjaan Anda dalam Siklus.",
+      "description": "Pecah pekerjaan menjadi potongan dengan batas waktu, bekerja mundur dari tenggat proyek Anda untuk menetapkan tanggal, dan buat kemajuan nyata sebagai tim.",
+      "cta_primary": "Atur siklus pertama Anda"
+    },
+    "cycle_work_items": {
+      "title": "Tidak ada item kerja untuk ditampilkan dalam siklus ini",
+      "description": "Buat item kerja untuk mulai memantau kemajuan tim Anda dalam siklus ini dan capai tujuan Anda tepat waktu.",
+      "cta_primary": "Buat item kerja",
+      "cta_secondary": "Tambahkan item kerja yang ada"
+    },
+    "modules": {
+      "title": "Petakan tujuan proyek Anda ke Modul dan lacak dengan mudah.",
+      "description": "Modul terdiri dari item kerja yang saling berhubungan. Mereka membantu dalam memantau kemajuan melalui fase proyek, masing-masing dengan tenggat waktu dan analitik khusus untuk menunjukkan seberapa dekat Anda dengan mencapai fase tersebut.",
+      "cta_primary": "Atur modul pertama Anda"
+    },
+    "module_work_items": {
+      "title": "Tidak ada item kerja untuk ditampilkan dalam Modul ini",
+      "description": "Buat item kerja untuk mulai memantau modul ini.",
+      "cta_primary": "Buat item kerja",
+      "cta_secondary": "Tambahkan item kerja yang ada"
+    },
+    "views": {
+      "title": "Simpan tampilan kustom untuk proyek Anda",
+      "description": "Tampilan adalah filter yang disimpan yang membantu Anda mengakses informasi yang paling sering Anda gunakan dengan cepat. Berkolaborasi dengan mudah saat rekan tim berbagi dan menyesuaikan tampilan dengan kebutuhan spesifik mereka.",
+      "cta_primary": "Buat tampilan"
+    },
+    "no_work_items_in_project": {
+      "title": "Belum ada item kerja dalam proyek",
+      "description": "Tambahkan item kerja ke proyek Anda dan potong pekerjaan Anda menjadi bagian yang dapat dilacak dengan tampilan.",
+      "cta_primary": "Tambahkan item kerja"
+    },
+    "work_item_filter": {
+      "title": "Tidak ada item kerja yang ditemukan",
+      "description": "Filter Anda saat ini tidak mengembalikan hasil apapun. Coba ubah filter.",
+      "cta_primary": "Tambahkan item kerja"
+    },
+    "pages": {
+      "title": "Dokumentasikan segalanya — dari catatan hingga PRD",
+      "description": "Halaman memungkinkan Anda menangkap dan mengorganisir informasi di satu tempat. Tulis catatan rapat, dokumentasi proyek, dan PRD, sematkan item kerja, dan strukturkan dengan komponen siap pakai.",
+      "cta_primary": "Buat Halaman pertama Anda"
+    },
+    "archive_pages": {
+      "title": "Belum ada halaman yang diarsipkan",
+      "description": "Arsipkan halaman yang tidak ada dalam radar Anda. Akses di sini saat dibutuhkan."
+    },
+    "intake_sidebar": {
+      "title": "Catat permintaan Masuk",
+      "description": "Kirim permintaan baru untuk ditinjau, diprioritaskan, dan dilacak dalam alur kerja proyek Anda.",
+      "cta_primary": "Buat permintaan Masuk"
+    },
+    "intake_main": {
+      "title": "Pilih item kerja Masuk untuk melihat detailnya"
+    },
+    "epics": {
+      "title": "Ubah proyek kompleks menjadi epik terstruktur.",
+      "description": "Epik membantu Anda mengorganisir tujuan besar menjadi tugas yang lebih kecil dan dapat dilacak.",
+      "cta_primary": "Buat Epik",
+      "cta_secondary": "Dokumentasi"
+    },
+    "epic_work_items": {
+      "title": "Anda belum menambahkan item kerja ke epik ini.",
+      "description": "Mulai dengan menambahkan beberapa item kerja ke epik ini dan lacak di sini.",
+      "cta_secondary": "Tambahkan item kerja"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Belum ada epik yang diarsipkan",
+      "description": "Anda dapat mengarsipkan epik yang selesai atau dibatalkan. Temukan di sini setelah diarsipkan."
+    },
+    "archive_work_items": {
+      "title": "Belum ada item kerja yang diarsipkan",
+      "description": "Secara manual atau melalui otomasi, Anda dapat mengarsipkan item kerja yang selesai atau dibatalkan. Temukan di sini setelah diarsipkan.",
+      "cta_primary": "Atur otomasi"
+    },
+    "archive_cycles": {
+      "title": "Belum ada siklus yang diarsipkan",
+      "description": "Untuk merapikan proyek Anda, arsipkan siklus yang telah selesai. Temukan di sini setelah diarsipkan."
+    },
+    "archive_modules": {
+      "title": "Belum ada Modul yang diarsipkan",
+      "description": "Untuk merapikan proyek Anda, arsipkan modul yang selesai atau dibatalkan. Temukan di sini setelah diarsipkan."
+    },
+    "home_widget_quick_links": {
+      "title": "Simpan referensi penting, sumber daya, atau dokumen untuk pekerjaan Anda"
+    },
+    "inbox_sidebar_all": {
+      "title": "Pembaruan untuk item kerja yang Anda langgani akan muncul di sini"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Penyebutan untuk item kerja Anda akan muncul di sini"
+    },
+    "your_work_by_priority": {
+      "title": "Belum ada item kerja yang ditugaskan"
+    },
+    "your_work_by_state": {
+      "title": "Belum ada item kerja yang ditugaskan"
+    },
+    "views": {
+      "title": "Belum ada Tampilan",
+      "description": "Tambahkan item kerja ke proyek Anda dan gunakan tampilan untuk memfilter, mengurutkan, dan memantau kemajuan dengan mudah.",
+      "cta_primary": "Tambahkan item kerja"
+    },
+    "drafts": {
+      "title": "Item kerja setengah jadi",
+      "description": "Untuk mencoba ini, mulai menambahkan item kerja dan tinggalkan di tengah jalan atau buat draf pertama Anda di bawah ini. 😉",
+      "cta_primary": "Buat item kerja draf"
+    },
+    "projects_archived": {
+      "title": "Tidak ada proyek yang diarsipkan",
+      "description": "Sepertinya semua proyek Anda masih aktif—kerja bagus!"
+    },
+    "analytics_projects": {
+      "title": "Buat proyek untuk memvisualisasikan metrik proyek di sini."
+    },
+    "analytics_work_items": {
+      "title": "Buat proyek dengan item kerja dan penerima tugas untuk mulai melacak kinerja, kemajuan, dan dampak tim di sini."
+    },
+    "analytics_no_cycle": {
+      "title": "Buat siklus untuk mengorganisir pekerjaan ke dalam fase berbatas waktu dan melacak kemajuan di seluruh sprint."
+    },
+    "analytics_no_module": {
+      "title": "Buat modul untuk mengorganisir pekerjaan Anda dan melacak kemajuan di berbagai tahap."
+    },
+    "analytics_no_intake": {
+      "title": "Siapkan masukan untuk mengelola permintaan masuk dan melacak bagaimana mereka diterima dan ditolak"
+    },
+    "home_widget_stickies": {
+      "title": "Catat ide, tangkap inspirasi, atau rekam pemikiran. Tambahkan catatan untuk memulai."
+    },
+    "stickies": {
+      "title": "Tangkap ide secara instan",
+      "description": "Buat catatan untuk catatan cepat dan daftar tugas, dan bawa bersama Anda ke mana pun Anda pergi.",
+      "cta_primary": "Buat catatan pertama",
+      "cta_secondary": "Dokumentasi"
+    },
+    "active_cycles": {
+      "title": "Tidak ada siklus aktif",
+      "description": "Anda tidak memiliki siklus yang sedang berjalan saat ini. Siklus aktif muncul di sini ketika mereka mencakup tanggal hari ini."
+    },
+    "dashboard": {
+      "title": "Visualisasikan kemajuan Anda dengan dasbor",
+      "description": "Bangun dasbor yang dapat disesuaikan untuk melacak metrik, mengukur hasil, dan menyajikan wawasan secara efektif.",
+      "cta_primary": "Buat dasbor baru"
+    },
+    "wiki": {
+      "title": "Tulis catatan, dokumen, atau basis pengetahuan lengkap.",
+      "description": "Halaman adalah ruang penangkapan pemikiran di Plane. Catat catatan rapat, format dengan mudah, sematkan item kerja, tata menggunakan perpustakaan komponen, dan simpan semuanya dalam konteks proyek Anda.",
+      "cta_primary": "Buat halaman Anda"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Aktifkan status proyek",
+      "description": "Aktifkan Status Proyek untuk melihat dan mengelola properti seperti status, prioritas, tanggal jatuh tempo, dan lainnya."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Belum ada estimasi",
+      "description": "Tentukan bagaimana tim Anda mengukur upaya dan lacak secara konsisten di semua item kerja.",
+      "cta_primary": "Tambahkan sistem estimasi"
+    },
+    "labels": {
+      "title": "Belum ada label",
+      "description": "Buat label yang dipersonalisasi untuk mengkategorikan dan mengelola item kerja Anda secara efektif.",
+      "cta_primary": "Buat label pertama Anda"
+    },
+    "exports": {
+      "title": "Belum ada ekspor",
+      "description": "Anda tidak memiliki catatan ekspor saat ini. Setelah Anda mengekspor data, semua catatan akan muncul di sini."
+    },
+    "tokens": {
+      "title": "Belum ada token Pribadi",
+      "description": "Hasilkan token API yang aman untuk menghubungkan ruang kerja Anda dengan sistem dan aplikasi eksternal.",
+      "cta_primary": "Tambahkan token API"
+    },
+    "workspace_tokens": {
+      "title": "Belum ada token API",
+      "description": "Hasilkan token API yang aman untuk menghubungkan ruang kerja Anda dengan sistem dan aplikasi eksternal.",
+      "cta_primary": "Tambahkan token API"
+    },
+    "webhooks": {
+      "title": "Belum ada Webhook yang ditambahkan",
+      "description": "Otomatisasi notifikasi ke layanan eksternal ketika peristiwa proyek terjadi.",
+      "cta_primary": "Tambahkan webhook"
+    },
+    "work_item_types": {
+      "title": "Buat dan sesuaikan jenis item kerja",
+      "description": "Tentukan jenis item kerja unik untuk proyek Anda. Setiap jenis dapat memiliki properti, alur kerja, dan bidangnya sendiri - disesuaikan dengan kebutuhan proyek dan tim Anda.",
+      "cta_primary": "Aktifkan"
+    },
+    "work_item_type_properties": {
+      "title": "Tentukan properti dan detail yang ingin Anda tangkap untuk jenis item kerja ini. Sesuaikan agar sesuai dengan alur kerja proyek Anda.",
+      "cta_secondary": "Tambahkan properti"
+    },
+    "templates": {
+      "title": "Belum ada templat",
+      "description": "Kurangi waktu pengaturan dengan membuat templat untuk item kerja, dan halaman — dan mulai pekerjaan baru dalam hitungan detik.",
+      "cta_primary": "Buat templat pertama Anda"
+    },
+    "recurring_work_items": {
+      "title": "Belum ada item kerja berulang",
+      "description": "Siapkan item kerja berulang untuk mengotomatisasi tugas yang berulang dan tetap sesuai jadwal dengan mudah.",
+      "cta_primary": "Buat item kerja berulang"
+    },
+    "worklogs": {
+      "title": "Lacak lembar waktu untuk semua anggota",
+      "description": "Catat waktu pada item kerja untuk melihat lembar waktu terperinci untuk anggota tim mana pun di seluruh proyek."
+    },
+    "group_syncing": {
+      "title": "Belum ada pemetaan grup"
+    },
+    "template_setting": {
+      "title": "Belum ada templat",
+      "description": "Kurangi waktu pengaturan dengan membuat templat untuk proyek, item kerja, dan halaman — dan mulai pekerjaan baru dalam hitungan detik.",
+      "cta_primary": "Buat templat"
+    },
+    "workflows": {
+      "title": "Belum ada alur kerja",
+      "description": "Buat alur kerja untuk mengelola kemajuan item kerja Anda.",
+      "cta_primary": "Tambah alur kerja baru",
+      "states": {
+        "title": "Tambah status",
+        "description": "Pilih status yang dilalui item kerja."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/home.json b/packages/i18n/src/locales/id/home.json
new file mode 100644
index 0000000..13d466f
--- /dev/null
+++ b/packages/i18n/src/locales/id/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Panduan pemula Anda",
+      "not_right_now": "Tidak sekarang",
+      "create_project": {
+        "title": "Buat proyek",
+        "description": "Sebagian besar hal dimulai dengan proyek di Plane.",
+        "cta": "Mulai sekarang"
+      },
+      "invite_team": {
+        "title": "Undang tim Anda",
+        "description": "Bangun, kirim, dan kelola dengan rekan kerja.",
+        "cta": "Ajak mereka"
+      },
+      "configure_workspace": {
+        "title": "Atur ruang kerja Anda.",
+        "description": "Hidupkan atau matikan fitur atau lebih dari itu.",
+        "cta": "Konfigurasi ruang kerja ini"
+      },
+      "personalize_account": {
+        "title": "Jadikan Plane milik Anda.",
+        "description": "Pilih gambar Anda, warna, dan lainnya.",
+        "cta": "Personalisasi sekarang"
+      },
+      "widgets": {
+        "title": "Sepi Tanpa Widget, Nyalakan Mereka",
+        "description": "Sepertinya semua widget Anda dimatikan. Aktifkan sekarang untuk meningkatkan pengalaman Anda!",
+        "primary_button": {
+          "text": "Kelola widget"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Simpan tautan ke hal-hal kerja yang ingin Anda miliki.",
+      "add": "Tambahkan Tautan Cepat",
+      "title": "Tautan Cepat",
+      "title_plural": "Tautan Cepat"
+    },
+    "recents": {
+      "title": "Terbaru",
+      "empty": {
+        "project": "Proyek terbaru Anda akan muncul di sini setelah Anda mengunjunginya.",
+        "page": "Halaman terbaru Anda akan muncul di sini setelah Anda mengunjunginya.",
+        "issue": "Item kerja terbaru Anda akan muncul di sini setelah Anda mengunjunginya.",
+        "default": "Anda belum memiliki yang terbaru."
+      },
+      "filters": {
+        "all": "Semua",
+        "projects": "Proyek",
+        "pages": "Halaman",
+        "issues": "Item kerja"
+      }
+    },
+    "new_at_plane": {
+      "title": "Baru di Plane"
+    },
+    "quick_tutorial": {
+      "title": "Tutorial cepat"
+    },
+    "widget": {
+      "reordered_successfully": "Widget berhasil diurutkan ulang.",
+      "reordering_failed": "Kesalahan terjadi saat mengurutkan ulang widget."
+    },
+    "manage_widgets": "Kelola widget",
+    "title": "Beranda",
+    "star_us_on_github": "Bintang kami di GitHub",
+    "business_trial_banner": {
+      "title": "Uji coba 14 hari paket Business Anda telah aktif!",
+      "description": "Jelajahi semua fitur Business. Saat Anda siap, pilih untuk berlangganan. Anda tidak akan ditagih secara otomatis.",
+      "trial_ends_today": "Uji coba berakhir hari ini",
+      "trial_ends_in_days": "Uji coba berakhir dalam {days} hari",
+      "start_subscription": "Mulai berlangganan",
+      "explore_business_features": "Jelajahi fitur Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/inbox.json b/packages/i18n/src/locales/id/inbox.json
new file mode 100644
index 0000000..0a99fc7
--- /dev/null
+++ b/packages/i18n/src/locales/id/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Menunggu",
+        "description": "Menunggu"
+      },
+      "declined": {
+        "title": "Ditolak",
+        "description": "Ditolak"
+      },
+      "snoozed": {
+        "title": "Ditunda",
+        "description": "{days, plural, one{# hari} other{# hari}} tersisa"
+      },
+      "accepted": {
+        "title": "Diterima",
+        "description": "Diterima"
+      },
+      "duplicate": {
+        "title": "Duplikat",
+        "description": "Duplikat"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Tolak item kerja",
+        "content": "Apakah Anda yakin ingin menolak item kerja {value}?"
+      },
+      "delete": {
+        "title": "Hapus item kerja",
+        "content": "Apakah Anda yakin ingin menghapus item kerja {value}?",
+        "success": "Item kerja berhasil dihapus"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Hanya admin proyek yang bisa menunda/menghapus penundaan item kerja",
+      "accept_permission": "Hanya admin proyek yang bisa menerima item kerja",
+      "decline_permission": "Hanya admin proyek yang bisa menolak item kerja"
+    },
+    "actions": {
+      "accept": "Terima",
+      "decline": "Tolak",
+      "snooze": "Tunda",
+      "unsnooze": "Hapus penundaan",
+      "copy": "Salin tautan item kerja",
+      "delete": "Hapus",
+      "open": "Buka item kerja",
+      "mark_as_duplicate": "Tandai sebagai duplikat",
+      "move": "Pindahkan {value} ke item kerja proyek"
+    },
+    "source": {
+      "in-app": "dalam aplikasi"
+    },
+    "order_by": {
+      "created_at": "Dibuat pada",
+      "updated_at": "Diperbarui pada",
+      "id": "ID"
+    },
+    "label": "Pendapat",
+    "page_label": "{workspace} - Pendapat",
+    "modal": {
+      "title": "Buat item kerja pendapat"
+    },
+    "tabs": {
+      "open": "Terbuka",
+      "closed": "Tutup"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Tidak ada item kerja terbuka",
+        "description": "Temukan item kerja terbuka di sini. Buat item kerja baru."
+      },
+      "sidebar_closed_tab": {
+        "title": "Tidak ada item kerja tertutup",
+        "description": "Semua item kerja yang diterima atau ditolak dapat ditemukan di sini."
+      },
+      "sidebar_filter": {
+        "title": "Tidak ada item kerja yang cocok",
+        "description": "Tidak ada item kerja yang cocok dengan filter yang diterapkan dalam pendapat. Buat item kerja baru."
+      },
+      "detail": {
+        "title": "Pilih item kerja untuk melihat detailnya."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/integration.json b/packages/i18n/src/locales/id/integration.json
new file mode 100644
index 0000000..62cd968
--- /dev/null
+++ b/packages/i18n/src/locales/id/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integrasi",
+    "loading": "Memuat",
+    "unauthorized": "Anda tidak berwenang untuk melihat halaman ini.",
+    "configure": "Konfigurasi",
+    "not_enabled": "{name} tidak diaktifkan untuk workspace ini.",
+    "not_configured": "Tidak dikonfigurasi",
+    "disconnect_personal_account": "Putuskan akun personal {providerName}",
+    "not_configured_message_admin": "Integrasi {name} tidak dikonfigurasi. Silakan hubungi admin instansi Anda untuk mengonfigurasinya.",
+    "not_configured_message_support": "Integrasi {name} tidak dikonfigurasi. Silakan hubungi dukungan untuk mengonfigurasinya.",
+    "external_api_unreachable": "Tidak dapat mengakses API eksternal. Silakan coba lagi nanti.",
+    "error_fetching_supported_integrations": "Tidak dapat mengambil integrasi yang didukung. Silakan coba lagi nanti.",
+    "back_to_integrations": "Kembali ke integrasi",
+    "select_state": "Pilih Status",
+    "set_state": "Set Status",
+    "choose_project": "Pilih Projek...",
+    "skip_backward_state_movement": "Cegah item berpindah ke status sebelumnya karena pembaruan PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Hubungkan dan sinkronkan item kerja GitHub Anda dengan Plane",
+    "connect_org": "Hubungkan Organisasi",
+    "connect_org_description": "Hubungkan organisasi GitHub Anda dengan Plane",
+    "processing": "Memproses",
+    "org_added_desc": "GitHub org ditambahkan oleh dan waktu",
+    "connection_fetch_error": "Kesalahan mengambil detail koneksi dari server",
+    "personal_account_connected": "Akun personal terhubung",
+    "personal_account_connected_description": "Akun GitHub Anda sekarang terhubung ke Plane",
+    "connect_personal_account": "Hubungkan Akun Personal",
+    "connect_personal_account_description": "Hubungkan akun GitHub personal Anda dengan Plane.",
+    "repo_mapping": "Pemetaan Repositori",
+    "repo_mapping_description": "Pemetaan repositori GitHub Anda dengan proyek Plane",
+    "project_issue_sync": "Sinkronisasi Masalah Proyek",
+    "project_issue_sync_description": "Sinkronisasi masalah dari GitHub ke proyek Plane",
+    "project_issue_sync_empty_state": "Sinkronisasi masalah proyek yang dipetakan akan muncul di sini",
+    "configure_project_issue_sync_state": "Konfigurasikan State Sinkronisasi Masalah",
+    "select_issue_sync_direction": "Pilih arah sinkronisasi masalah",
+    "allow_bidirectional_sync": "Bidirectional - Sinkronisasi masalah dan komentar dalam dua arah antara GitHub dan Plane",
+    "allow_unidirectional_sync": "Unidirectional - Sinkronisasi masalah dan komentar dari GitHub ke Plane saja",
+    "allow_unidirectional_sync_warning": "Data dari GitHub Issue akan menggantikan data di Item Kerja Plane yang Tertaut (GitHub → Plane saja)",
+    "remove_project_issue_sync": "Hapus Sinkronisasi Masalah Proyek",
+    "remove_project_issue_sync_confirmation": "Apakah Anda yakin ingin menghapus sinkronisasi masalah proyek ini?",
+    "add_pr_state_mapping": "Tambahkan Pemetaan Status Permintaan Tarik untuk Proyek Plane",
+    "edit_pr_state_mapping": "Edit Pemetaan Status Permintaan Tarik untuk Proyek Plane",
+    "pr_state_mapping": "Pull Request State Mapping",
+    "pr_state_mapping_description": "Pemetaan status permintaan tarik dari GitHub ke proyek Plane",
+    "pr_state_mapping_empty_state": "Status PR yang dipetakan akan muncul di sini",
+    "remove_pr_state_mapping": "Hapus pemetaan status permintaan tarik ini",
+    "remove_pr_state_mapping_confirmation": "Apakah Anda yakin ingin menghapus pemetaan status permintaan tarik ini?",
+    "issue_sync_message": "Item kerja disinkronkan ke {project}proyek Plane",
+    "link": "Link repositori GitHub ke proyek Plane",
+    "pull_request_automation": "Otomatisasi Permintaan Tarik",
+    "pull_request_automation_description": "Konfigurasi pemetaan status permintaan tarik dari GitHub ke proyek Plane",
+    "DRAFT_MR_OPENED": "Draft Dibuka",
+    "MR_OPENED": "Dibuka",
+    "MR_READY_FOR_MERGE": "Siap untuk Digabung",
+    "MR_REVIEW_REQUESTED": "Review Diminta",
+    "MR_MERGED": "Digabung",
+    "MR_CLOSED": "Ditutup",
+    "ISSUE_OPEN": "Issue Dibuka",
+    "ISSUE_CLOSED": "Issue Ditutup",
+    "save": "Simpan",
+    "start_sync": "Mulai Sinkronisasi",
+    "choose_repository": "Pilih Repositori..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Hubungkan dan sinkronkan Permintaan Gabungan Gitlab Anda dengan Plane.",
+    "connection_fetch_error": "Kesalahan mengambil detail koneksi dari server",
+    "connect_org": "Hubungkan Organisasi",
+    "connect_org_description": "Hubungkan organisasi Gitlab Anda dengan Plane.",
+    "project_connections": "Koneksi Projek Gitlab",
+    "project_connections_description": "Sinkronkan permintaan gabungan dari Gitlab ke projek Plane.",
+    "plane_project_connection": "Koneksi Projek Plane",
+    "plane_project_connection_description": "Konfigurasi pemetaan status permintaan tarik dari Gitlab ke projek Plane",
+    "remove_connection": "Hapus Koneksi",
+    "remove_connection_confirmation": "Apakah Anda yakin ingin menghapus koneksi ini?",
+    "link": "Hubungkan repositori Gitlab ke projek Plane",
+    "pull_request_automation": "Otomatisasi Pull Request",
+    "pull_request_automation_description": "Konfigurasi pemetaan status permintaan tarik dari Gitlab ke Plane",
+    "DRAFT_MR_OPENED": "Saat draft MR dibuka, atur status ke",
+    "MR_OPENED": "Saat MR dibuka, atur status ke",
+    "MR_REVIEW_REQUESTED": "Saat permintaan ulasan MR, atur status ke",
+    "MR_READY_FOR_MERGE": "Saat MR siap untuk digabung, atur status ke",
+    "MR_MERGED": "Saat MR digabung, atur status ke",
+    "MR_CLOSED": "Saat MR ditutup, atur status ke",
+    "integration_enabled_text": "Dengan integrasi Gitlab Diaktifkan, Anda dapat mengotomatisasi alur kerja item kerja",
+    "choose_entity": "Pilih Entitas",
+    "choose_project": "Pilih Projek",
+    "link_plane_project": "Hubungkan projek Plane",
+    "project_issue_sync": "Sinkronisasi Masalah Projek",
+    "project_issue_sync_description": "Sinkronkan masalah dari Gitlab ke projek Plane Anda",
+    "project_issue_sync_empty_state": "Sinkronisasi masalah projek yang dipetakan akan muncul di sini",
+    "configure_project_issue_sync_state": "Konfigurasi Status Sinkronisasi Masalah",
+    "select_issue_sync_direction": "Pilih arah sinkronisasi masalah",
+    "allow_bidirectional_sync": "Dua Arah - Sinkronkan masalah dan komentar dua arah antara Gitlab dan Plane",
+    "allow_unidirectional_sync": "Satu Arah - Sinkronkan masalah dan komentar hanya dari Gitlab ke Plane",
+    "allow_unidirectional_sync_warning": "Data dari Gitlab Issue akan menggantikan data di Item Kerja Plane yang Terhubung (hanya Gitlab → Plane)",
+    "remove_project_issue_sync": "Hapus Sinkronisasi Masalah Projek ini",
+    "remove_project_issue_sync_confirmation": "Apakah Anda yakin ingin menghapus sinkronisasi masalah projek ini?",
+    "ISSUE_OPEN": "Masalah Terbuka",
+    "ISSUE_CLOSED": "Masalah Tertutup",
+    "save": "Simpan",
+    "start_sync": "Mulai Sinkronisasi",
+    "choose_repository": "Pilih Repositori..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Hubungkan dan sinkronkan instance Gitlab Enterprise Anda dengan Plane.",
+    "app_form_title": "Konfigurasi Gitlab Enterprise",
+    "app_form_description": "Konfigurasi Gitlab Enterprise untuk terhubung dengan Plane.",
+    "base_url_title": "URL Dasar",
+    "base_url_description": "URL dasar instance Gitlab Enterprise Anda.",
+    "base_url_placeholder": "contoh: \"https://glab.plane.town\"",
+    "base_url_error": "URL dasar diperlukan",
+    "invalid_base_url_error": "URL dasar tidak valid",
+    "client_id_title": "ID App",
+    "client_id_description": "ID app yang Anda buat di instance Gitlab Enterprise Anda.",
+    "client_id_placeholder": "contoh: \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "ID App diperlukan",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Client secret dari app yang Anda buat di instance Gitlab Enterprise Anda.",
+    "client_secret_placeholder": "contoh: \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret diperlukan",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Webhook secret acak yang akan digunakan untuk memverifikasi webhook dari instance Gitlab Enterprise.",
+    "webhook_secret_placeholder": "contoh: \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret diperlukan",
+    "connect_app": "Hubungkan App"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Hubungkan workspace Slack Anda dengan Plane.",
+    "connect_personal_account": "Hubungkan akun Slack personal Anda dengan Plane.",
+    "personal_account_connected": "Akun {providerName} personal Anda sekarang terhubung ke Plane.",
+    "link_personal_account": "Hubungkan akun {providerName} personal Anda ke Plane.",
+    "connected_slack_workspaces": "Workspace Slack terhubung",
+    "connected_on": "Terhubung pada {date}",
+    "disconnect_workspace": "Putuskan workspace {name}",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Dapatkan notifikasi di pesan langsung Slack untuk pembaruan penting, pengingat, dan peringatan khusus untuk Anda."
+      }
+    },
+    "project_updates": {
+      "title": "Pembaruan Proyek",
+      "description": "Konfigurasikan notifikasi pembaruan proyek untuk proyek Anda",
+      "add_new_project_update": "Tambahkan notifikasi pembaruan proyek baru",
+      "project_updates_empty_state": "Proyek yang terhubung dengan Saluran Slack akan muncul di sini.",
+      "project_updates_form": {
+        "title": "Konfigurasikan Pembaruan Proyek",
+        "description": "Terima notifikasi pembaruan proyek di Slack saat item kerja dibuat",
+        "failed_to_load_channels": "Gagal memuat saluran dari Slack",
+        "project_dropdown": {
+          "placeholder": "Pilih proyek",
+          "label": "Proyek Plane",
+          "no_projects": "Tidak ada proyek tersedia"
+        },
+        "channel_dropdown": {
+          "label": "Saluran Slack",
+          "placeholder": "Pilih saluran",
+          "no_channels": "Tidak ada saluran tersedia"
+        },
+        "all_projects_connected": "Semua proyek sudah terhubung ke saluran Slack.",
+        "all_channels_connected": "Semua saluran Slack sudah terhubung ke proyek.",
+        "project_connection_success": "Koneksi proyek berhasil dibuat",
+        "project_connection_updated": "Koneksi proyek berhasil diperbarui",
+        "project_connection_deleted": "Koneksi proyek berhasil dihapus",
+        "failed_delete_project_connection": "Gagal menghapus koneksi proyek",
+        "failed_create_project_connection": "Gagal membuat koneksi proyek",
+        "failed_upserting_project_connection": "Gagal memperbarui koneksi proyek",
+        "failed_loading_project_connections": "Kami tidak dapat memuat koneksi proyek Anda. Ini mungkin karena masalah jaringan atau masalah dengan integrasi."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Hubungkan ruang kerja Sentry Anda dengan Plane.",
+    "connected_sentry_workspaces": "Ruang kerja Sentry yang terhubung",
+    "connected_on": "Terhubung pada {date}",
+    "disconnect_workspace": "Putuskan ruang kerja {name}",
+    "state_mapping": {
+      "title": "Pemetaan status",
+      "description": "Petakan status insiden Sentry ke status proyek Anda. Konfigurasikan status mana yang digunakan ketika insiden Sentry diselesaikan atau tidak diselesaikan.",
+      "add_new_state_mapping": "Tambahkan pemetaan status baru",
+      "empty_state": "Tidak ada pemetaan status yang dikonfigurasi. Buat pemetaan pertama Anda untuk menyinkronkan status insiden Sentry dengan status proyek Anda.",
+      "failed_loading_state_mappings": "Kami tidak dapat memuat pemetaan status Anda. Ini mungkin disebabkan oleh masalah jaringan atau masalah dengan integrasi.",
+      "loading_project_states": "Memuat status proyek...",
+      "error_loading_states": "Kesalahan memuat status",
+      "no_states_available": "Tidak ada status yang tersedia",
+      "no_permission_states": "Anda tidak memiliki izin untuk mengakses status untuk proyek ini",
+      "states_not_found": "Status proyek tidak ditemukan",
+      "server_error_states": "Kesalahan server saat memuat status"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Hubungkan dan sinkronkan repositori Bitbucket Data Center Anda dengan Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Validasi token IdP eksternal untuk akses API.",
+    "header_description": "Validasi token OIDC/JWT yang diterbitkan secara eksternal dari IdP Anda (Azure AD, Okta, dll.) untuk akses API Plane.",
+    "connected": "Terhubung",
+    "connect": "Hubungkan",
+    "uninstall": "Copot pemasangan",
+    "uninstalling": "Mencopot...",
+    "install_success": "OAuth Bridge berhasil dipasang.",
+    "install_error": "Gagal memasang OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge dicopot.",
+    "uninstall_error": "Gagal mencopot OAuth Bridge.",
+    "token_providers": "Penyedia Token",
+    "token_providers_description": "Konfigurasi IdP eksternal yang JWT-nya diterima sebagai kredensial API.",
+    "add_provider": "Tambah penyedia",
+    "edit_provider": "Edit penyedia",
+    "enabled": "Diaktifkan",
+    "disabled": "Dinonaktifkan",
+    "test": "Tes",
+    "no_providers_title": "Tidak ada penyedia yang dikonfigurasi.",
+    "no_providers_description": "Tambahkan IdP untuk mengaktifkan autentikasi token eksternal.",
+    "provider_updated": "Penyedia diperbarui.",
+    "provider_added": "Penyedia ditambahkan.",
+    "provider_save_error": "Gagal menyimpan penyedia.",
+    "provider_deleted": "Penyedia dihapus.",
+    "provider_delete_error": "Gagal menghapus penyedia.",
+    "provider_update_error": "Gagal memperbarui penyedia.",
+    "jwks_reachable": "JWKS dapat dijangkau",
+    "jwks_unreachable": "JWKS tidak dapat dijangkau",
+    "jwks_test_error": "Tidak dapat mengambil JWKS dari URL yang dikonfigurasi.",
+    "provider_form": {
+      "name_label": "Nama",
+      "name_placeholder": "mis. Azure AD Production",
+      "name_description": "Label yang mudah dibaca untuk penyedia identitas ini",
+      "name_required": "Nama wajib diisi.",
+      "issuer_label": "Penerbit",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Nilai claim iss yang diharapkan dalam JWT",
+      "issuer_required": "Penerbit wajib diisi.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "Endpoint HTTPS yang menyediakan JSON Web Key Set penyedia",
+      "jwks_url_required": "URL JWKS wajib diisi.",
+      "jwks_url_https": "URL JWKS harus menggunakan HTTPS.",
+      "audience_label": "Audiens",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Claim aud yang diharapkan dalam JWT, dipisahkan koma.",
+      "user_claims_label": "Claim pengguna",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "Claim JWT yang berisi alamat email pengguna",
+      "user_claims_required": "Claim pengguna wajib diisi.",
+      "allowed_algorithms_label": "Algoritma penandatanganan yang diizinkan",
+      "allowed_algorithms_description": "Algoritma asimetris yang diterima untuk verifikasi tanda tangan JWT",
+      "allowed_algorithms_required": "Diperlukan setidaknya satu algoritma.",
+      "select_algorithms": "Pilih algoritma",
+      "jwks_cache_ttl_label": "TTL cache JWKS (detik)",
+      "jwks_cache_ttl_description": "Berapa lama menyimpan kunci JWKS penyedia dalam cache (minimum 60 detik, default 24 jam)",
+      "jwks_cache_ttl_min": "TTL cache minimal 60 detik.",
+      "rate_limit_label": "Batas laju",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Pembatasan permintaan sebagai jumlah/periode (mis. 120/minute). Kosongkan untuk batas laju default.",
+      "enable_provider": "Aktifkan penyedia ini",
+      "saving": "Menyimpan...",
+      "update": "Perbarui"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Hubungkan dan sinkronkan organisasi GitHub Enterprise Anda dengan Plane.",
+    "app_form_title": "Konfigurasi GitHub Enterprise",
+    "app_form_description": "Konfigurasikan GitHub Enterprise untuk terhubung dengan Plane.",
+    "app_id_title": "ID Aplikasi",
+    "app_id_description": "ID aplikasi yang Anda buat di organisasi GitHub Enterprise Anda.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID diperlukan",
+    "app_name_title": "Slug Aplikasi",
+    "app_name_description": "Slug aplikasi yang Anda buat di organisasi GitHub Enterprise Anda.",
+    "app_name_error": "App slug diperlukan",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "URL Dasar",
+    "base_url_description": "URL dasar organisasi GitHub Enterprise Anda.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "URL dasar diperlukan",
+    "invalid_base_url_error": "URL dasar tidak valid",
+    "client_id_title": "ID Klien",
+    "client_id_description": "ID klien aplikasi yang Anda buat di organisasi GitHub Enterprise Anda.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID klien diperlukan",
+    "client_secret_title": "Klien Rahasia",
+    "client_secret_description": "Rahasia klien aplikasi yang Anda buat di organisasi GitHub Enterprise Anda.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Klien rahasia diperlukan",
+    "webhook_secret_title": "Rahasia Webhook",
+    "webhook_secret_description": "Rahasia webhook aplikasi yang Anda buat di organisasi GitHub Enterprise Anda.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Rahasia webhook diperlukan",
+    "private_key_title": "Kunci Pribadi (Base64 encoded)",
+    "private_key_description": "Kunci pribadi aplikasi yang Anda buat di organisasi GitHub Enterprise Anda.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Kunci pribadi diperlukan",
+    "connect_app": "Hubungkan Aplikasi"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Parameter kueri yang diberikan tidak valid atau bidang yang diperlukan tidak ada",
+    "invalid_installation_account": "Akun instalasi yang diberikan tidak valid",
+    "generic_error": "Terjadi kesalahan tak terduga saat memproses permintaan Anda",
+    "connection_not_found": "Koneksi yang diminta tidak dapat ditemukan",
+    "multiple_connections_found": "Beberapa koneksi ditemukan saat hanya satu yang diharapkan",
+    "cannot_create_multiple_connections": "Anda telah menghubungkan organisasi Anda dengan ruang kerja. Silakan putuskan koneksi yang ada sebelum menghubungkan yang baru.",
+    "installation_not_found": "Instalasi yang diminta tidak dapat ditemukan",
+    "user_not_found": "Pengguna yang diminta tidak dapat ditemukan",
+    "error_fetching_token": "Gagal mengambil token autentikasi",
+    "invalid_app_credentials": "Informasi autentikasi aplikasi yang diberikan tidak valid",
+    "invalid_app_installation_id": "Gagal menginstal aplikasi"
+  },
+  "import_status": {
+    "queued": "Dalam Antrian",
+    "created": "Dibuat",
+    "initiated": "Dimulai",
+    "pulling": "Menarik",
+    "timed_out": "Waktu habis",
+    "pulled": "Ditarik",
+    "progressing": "Berjalan",
+    "transforming": "Mentransformasi",
+    "transformed": "Ditransformasi",
+    "pushing": "Mendorong",
+    "finished": "Selesai",
+    "error": "Kesalahan",
+    "cancelled": "Dibatalkan"
+  }
+}
diff --git a/packages/i18n/src/locales/id/module.json b/packages/i18n/src/locales/id/module.json
new file mode 100644
index 0000000..80849ec
--- /dev/null
+++ b/packages/i18n/src/locales/id/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Modul} other {Modul}}",
+    "no_module": "Tidak ada modul",
+    "select": "Tambah modul"
+  }
+}
diff --git a/packages/i18n/src/locales/id/navigation.json b/packages/i18n/src/locales/id/navigation.json
new file mode 100644
index 0000000..4a77755
--- /dev/null
+++ b/packages/i18n/src/locales/id/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Tidak ada hasil ditemukan"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Stickies",
+    "your_work": "Pekerjaan anda",
+    "projects": "Projek",
+    "pages": "Halaman",
+    "new_work_item": "Item kerja baru",
+    "home": "Beranda",
+    "inbox": "Inbox",
+    "workspace": "Workspace",
+    "views": "Views",
+    "analytics": "Analitik",
+    "work_items": "Item kerja",
+    "cycles": "Siklus",
+    "modules": "Modul",
+    "intake": "Intake",
+    "drafts": "Draft",
+    "favorites": "Favorit",
+    "pro": "Pro",
+    "upgrade": "Upgrade",
+    "pi_chat": "Plane AI",
+    "epics": "Epics",
+    "upgrade_plan": "Tingkatkan paket",
+    "plane_pro": "Plane Pro",
+    "business": "Bisnis"
+  }
+}
diff --git a/packages/i18n/src/locales/id/notification.json b/packages/i18n/src/locales/id/notification.json
new file mode 100644
index 0000000..5ff8b9d
--- /dev/null
+++ b/packages/i18n/src/locales/id/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Kotak Masuk",
+    "page_label": "{workspace} - Kotak Masuk",
+    "options": {
+      "mark_all_as_read": "Tandai semua sebagai dibaca",
+      "mark_read": "Tandai sebagai dibaca",
+      "mark_unread": "Tandai sebagai tidak dibaca",
+      "refresh": "Segarkan",
+      "filters": "Filter Kotak Masuk",
+      "show_unread": "Tampilkan yang belum dibaca",
+      "show_snoozed": "Tampilkan yang ditunda",
+      "show_archived": "Tampilkan yang diarsipkan",
+      "mark_archive": "Arsipkan",
+      "mark_unarchive": "Hapus arsip",
+      "mark_snooze": "Tunda",
+      "mark_unsnooze": "Hapus tunda"
+    },
+    "toasts": {
+      "read": "Notifikasi ditandai sebagai dibaca",
+      "unread": "Notifikasi ditandai sebagai tidak dibaca",
+      "archived": "Notifikasi ditandai sebagai diarsipkan",
+      "unarchived": "Notifikasi ditandai sebagai dihapus arsip",
+      "snoozed": "Notifikasi ditunda",
+      "unsnoozed": "Notifikasi dihapus tunda"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Pilih untuk melihat detail."
+      },
+      "all": {
+        "title": "Tidak ada item kerja yang ditugaskan",
+        "description": "Pembaruan untuk item kerja yang ditugaskan kepada Anda dapat dilihat di sini"
+      },
+      "mentions": {
+        "title": "Tidak ada item kerja yang ditugaskan",
+        "description": "Pembaruan untuk item kerja yang ditugaskan kepada Anda dapat dilihat di sini"
+      }
+    },
+    "tabs": {
+      "all": "Semua",
+      "mentions": "Sebut"
+    },
+    "filter": {
+      "assigned": "Ditugaskan untuk saya",
+      "created": "Dibuat oleh saya",
+      "subscribed": "Disubscribe oleh saya"
+    },
+    "snooze": {
+      "1_day": "1 hari",
+      "3_days": "3 hari",
+      "5_days": "5 hari",
+      "1_week": "1 minggu",
+      "2_weeks": "2 minggu",
+      "custom": "Kustom"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/page.json b/packages/i18n/src/locales/id/page.json
new file mode 100644
index 0000000..9217599
--- /dev/null
+++ b/packages/i18n/src/locales/id/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Garis Besar",
+        "empty_state": {
+          "title": "Judul hilang",
+          "description": "Mari tambahkan beberapa judul di halaman ini untuk melihatnya di sini."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Kata",
+          "characters": "Karakter",
+          "paragraphs": "Paragraf",
+          "read_time": "Waktu baca"
+        },
+        "actors_info": {
+          "edited_by": "Disunting oleh",
+          "created_by": "Dibuat oleh"
+        },
+        "version_history": {
+          "label": "Riwayat versi",
+          "current_version": "Versi saat ini",
+          "highlight_changes": "Sorot perubahan"
+        }
+      },
+      "assets": {
+        "label": "Aset",
+        "download_button": "Unduh",
+        "empty_state": {
+          "title": "Gambar hilang",
+          "description": "Tambahkan gambar untuk melihatnya di sini."
+        }
+      },
+      "comments": {
+        "label": "Komentar",
+        "empty_state": {
+          "title": "Tidak ada komentar",
+          "description": "Tambahkan komentar untuk melihatnya di sini."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Nama sticky tidak boleh lebih dari 100 karakter.",
+        "already_exists": "Sudah ada sticky tanpa deskripsi"
+      },
+      "created": {
+        "title": "Sticky dibuat",
+        "message": "Sticky berhasil dibuat"
+      },
+      "not_created": {
+        "title": "Sticky tidak dibuat",
+        "message": "Sticky tidak dapat dibuat"
+      },
+      "updated": {
+        "title": "Sticky diperbarui",
+        "message": "Sticky berhasil diperbarui"
+      },
+      "not_updated": {
+        "title": "Sticky tidak diperbarui",
+        "message": "Sticky tidak dapat diperbarui"
+      },
+      "removed": {
+        "title": "Sticky dihapus",
+        "message": "Sticky berhasil dihapus"
+      },
+      "not_removed": {
+        "title": "Sticky tidak dihapus",
+        "message": "Sticky tidak dapat dihapus"
+      }
+    },
+    "open_button": "Buka panel navigasi",
+    "close_button": "Tutup panel navigasi",
+    "outline_floating_button": "Buka garis besar"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Pindahkan",
+        "loading": "Memindahkan"
+      },
+      "cannot_move_to_teamspace": "Halaman pribadi dan yang dibagikan tidak dapat dipindahkan ke teamspace.",
+      "placeholders": {
+        "workspace_to_all": "Cari proyek dan teamspace",
+        "workspace_to_project": "Cari proyek",
+        "project_to_all": "Cari proyek dan teamspace",
+        "project_to_project": "Cari proyek",
+        "project_to_all_with_wiki": "Cari koleksi wiki, proyek, dan teamspace",
+        "project_to_project_with_wiki": "Cari koleksi wiki dan proyek"
+      },
+      "toasts": {
+        "success": {
+          "title": "Berhasil!",
+          "message": "Halaman berhasil dipindahkan."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Halaman tidak dapat dipindahkan. Silakan coba lagi nanti."
+        },
+        "collection_error": {
+          "title": "Dipindahkan ke wiki",
+          "message": "Halaman dipindahkan ke wiki, tetapi tidak dapat ditambahkan ke koleksi yang dipilih. Halaman tetap berada di General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Hapus dari koleksi",
+      "success_message": "Halaman dihapus dari koleksi.",
+      "error_message": "Halaman tidak dapat dihapus dari koleksi. Silakan coba lagi."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Batas konten tercapai dan sinkronisasi langsung nonaktif. Buat halaman baru atau gunakan halaman bertingkat untuk melanjutkan sinkronisasi."
+  }
+}
diff --git a/packages/i18n/src/locales/id/power-k.json b/packages/i18n/src/locales/id/power-k.json
new file mode 100644
index 0000000..accb57b
--- /dev/null
+++ b/packages/i18n/src/locales/id/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Hapus item kerja secara massal"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Aksi item kerja",
+        "indicator": "Item kerja",
+        "change_state": "Ubah status",
+        "change_priority": "Ubah prioritas",
+        "change_assignees": "Tugaskan ke",
+        "assign_to_me": "Tugaskan ke saya",
+        "unassign_from_me": "Batalkan penugasan dari saya",
+        "change_estimate": "Ubah estimasi",
+        "add_to_cycle": "Tambahkan ke siklus",
+        "add_to_modules": "Tambahkan ke modul",
+        "add_labels": "Tambah label",
+        "subscribe": "Berlangganan notifikasi",
+        "unsubscribe": "Berhenti berlangganan notifikasi",
+        "delete": "Hapus",
+        "copy_id": "Salin ID",
+        "copy_id_toast_success": "ID item kerja disalin ke clipboard.",
+        "copy_id_toast_error": "Terjadi kesalahan saat menyalin ID item kerja ke clipboard.",
+        "copy_title": "Salin judul",
+        "copy_title_toast_success": "Judul item kerja disalin ke clipboard.",
+        "copy_title_toast_error": "Terjadi kesalahan saat menyalin judul item kerja ke clipboard.",
+        "copy_url": "Salin URL",
+        "copy_url_toast_success": "URL item kerja disalin ke clipboard.",
+        "copy_url_toast_error": "Terjadi kesalahan saat menyalin URL item kerja ke clipboard."
+      },
+      "cycle": {
+        "title": "Aksi siklus",
+        "indicator": "Siklus",
+        "add_to_favorites": "Tambah ke favorit",
+        "remove_from_favorites": "Hapus dari favorit",
+        "copy_url": "Salin URL",
+        "copy_url_toast_success": "URL siklus disalin ke clipboard.",
+        "copy_url_toast_error": "Terjadi kesalahan saat menyalin URL siklus ke clipboard."
+      },
+      "module": {
+        "title": "Aksi modul",
+        "indicator": "Modul",
+        "add_remove_members": "Tambah/hapus anggota",
+        "change_status": "Ubah status",
+        "add_to_favorites": "Tambah ke favorit",
+        "remove_from_favorites": "Hapus dari favorit",
+        "copy_url": "Salin URL",
+        "copy_url_toast_success": "URL modul disalin ke clipboard.",
+        "copy_url_toast_error": "Terjadi kesalahan saat menyalin URL modul ke clipboard."
+      },
+      "page": {
+        "title": "Aksi halaman",
+        "indicator": "Halaman",
+        "lock": "Kunci",
+        "unlock": "Buka kunci",
+        "make_private": "Jadikan pribadi",
+        "make_public": "Jadikan publik",
+        "archive": "Arsipkan",
+        "restore": "Pulihkan",
+        "add_to_favorites": "Tambah ke favorit",
+        "remove_from_favorites": "Hapus dari favorit",
+        "copy_url": "Salin URL",
+        "copy_url_toast_success": "URL halaman disalin ke clipboard.",
+        "copy_url_toast_error": "Terjadi kesalahan saat menyalin URL halaman ke clipboard."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Item kerja baru",
+      "create_page": "Halaman baru",
+      "create_view": "Tampilan baru",
+      "create_cycle": "Siklus baru",
+      "create_module": "Modul baru",
+      "create_project": "Proyek baru",
+      "create_workspace": "Ruang kerja baru",
+      "create_project_automation": "Otomatisasi baru"
+    },
+    "navigation_actions": {
+      "open_workspace": "Buka ruang kerja",
+      "nav_home": "Ke beranda",
+      "nav_inbox": "Ke kotak masuk",
+      "nav_your_work": "Ke pekerjaan Anda",
+      "nav_account_settings": "Ke pengaturan akun",
+      "open_project": "Buka proyek",
+      "nav_projects_list": "Ke daftar proyek",
+      "nav_all_workspace_work_items": "Ke semua item kerja",
+      "nav_assigned_workspace_work_items": "Ke item kerja yang ditugaskan",
+      "nav_created_workspace_work_items": "Ke item kerja yang dibuat",
+      "nav_subscribed_workspace_work_items": "Ke item kerja yang dilanggan",
+      "nav_workspace_analytics": "Ke analitik ruang kerja",
+      "nav_workspace_drafts": "Ke draf ruang kerja",
+      "nav_workspace_archives": "Ke arsip ruang kerja",
+      "open_workspace_setting": "Buka pengaturan ruang kerja",
+      "nav_workspace_settings": "Ke pengaturan ruang kerja",
+      "nav_project_work_items": "Ke item kerja",
+      "open_project_cycle": "Buka siklus",
+      "nav_project_cycles": "Ke siklus",
+      "open_project_module": "Buka modul",
+      "nav_project_modules": "Ke modul",
+      "open_project_view": "Buka tampilan proyek",
+      "nav_project_views": "Ke tampilan proyek",
+      "nav_project_pages": "Ke halaman",
+      "nav_project_intake": "Ke intake",
+      "nav_project_archives": "Ke arsip proyek",
+      "open_project_setting": "Buka pengaturan proyek",
+      "nav_project_settings": "Ke pengaturan proyek",
+      "nav_workspace_active_cycle": "Ke semua siklus aktif",
+      "nav_project_overview": "Ke ikhtisar proyek"
+    },
+    "account_actions": {
+      "sign_out": "Keluar",
+      "workspace_invites": "Undangan ruang kerja"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Alihkan sidebar aplikasi",
+      "copy_current_page_url": "Salin URL halaman saat ini",
+      "copy_current_page_url_toast_success": "URL halaman saat ini disalin ke clipboard.",
+      "copy_current_page_url_toast_error": "Terjadi kesalahan saat menyalin URL halaman saat ini ke clipboard.",
+      "focus_top_nav_search": "Fokus input pencarian"
+    },
+    "preferences_actions": {
+      "update_theme": "Ubah tema antarmuka",
+      "update_timezone": "Ubah zona waktu",
+      "update_start_of_week": "Ubah hari pertama minggu",
+      "update_language": "Ubah bahasa antarmuka",
+      "toast": {
+        "theme": {
+          "success": "Tema berhasil diperbarui.",
+          "error": "Gagal memperbarui tema. Silakan coba lagi."
+        },
+        "timezone": {
+          "success": "Zona waktu berhasil diperbarui.",
+          "error": "Gagal memperbarui zona waktu. Silakan coba lagi."
+        },
+        "generic": {
+          "success": "Preferensi berhasil diperbarui.",
+          "error": "Gagal memperbarui preferensi. Silakan coba lagi."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Buka pintasan keyboard",
+      "open_plane_documentation": "Buka dokumentasi Plane",
+      "join_forum": "Gabung dengan Forum kami",
+      "report_bug": "Laporkan bug",
+      "chat_with_us": "Ngobrol dengan kami"
+    },
+    "page_placeholders": {
+      "default": "Ketik perintah atau cari",
+      "open_workspace": "Buka ruang kerja",
+      "open_project": "Buka proyek",
+      "open_workspace_setting": "Buka pengaturan ruang kerja",
+      "open_project_cycle": "Buka siklus",
+      "open_project_module": "Buka modul",
+      "open_project_view": "Buka tampilan proyek",
+      "open_project_setting": "Buka pengaturan proyek",
+      "update_work_item_state": "Ubah status",
+      "update_work_item_priority": "Ubah prioritas",
+      "update_work_item_assignee": "Tugaskan ke",
+      "update_work_item_estimate": "Ubah estimasi",
+      "update_work_item_cycle": "Tambahkan ke siklus",
+      "update_work_item_module": "Tambahkan ke modul",
+      "update_work_item_labels": "Tambah label",
+      "update_module_member": "Ubah anggota",
+      "update_module_status": "Ubah status",
+      "update_theme": "Ubah tema",
+      "update_timezone": "Ubah zona waktu",
+      "update_start_of_week": "Ubah hari pertama minggu",
+      "update_language": "Ubah bahasa"
+    },
+    "search_menu": {
+      "no_results": "Tidak ada hasil yang ditemukan",
+      "clear_search": "Hapus pencarian",
+      "go_to_advanced_search": "Ke pencarian lanjutan"
+    },
+    "footer": {
+      "workspace_level": "Tingkat ruang kerja"
+    },
+    "group_titles": {
+      "actions": "Aksi",
+      "contextual": "Kontekstual",
+      "navigation": "Navigasi",
+      "create": "Buat",
+      "general": "Umum",
+      "settings": "Pengaturan",
+      "account": "Akun",
+      "miscellaneous": "Lain-lain",
+      "preferences": "Preferensi",
+      "help": "Bantuan"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/project-settings.json b/packages/i18n/src/locales/id/project-settings.json
new file mode 100644
index 0000000..b5ac935
--- /dev/null
+++ b/packages/i18n/src/locales/id/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Masukkan ID proyek",
+      "please_select_a_timezone": "Silakan pilih zona waktu",
+      "archive_project": {
+        "title": "Arsipkan proyek",
+        "description": "Mengarsipkan proyek akan menghapus proyek Anda dari navigasi samping meskipun Anda masih dapat mengaksesnya dari halaman proyek Anda. Anda dapat memulihkan proyek tersebut atau menghapusnya kapan saja.",
+        "button": "Arsipkan proyek"
+      },
+      "delete_project": {
+        "title": "Hapus proyek",
+        "description": "Ketika menghapus proyek, semua data dan sumber daya di dalam proyek tersebut akan dihapus secara permanen dan tidak dapat dipulihkan.",
+        "button": "Hapus proyek saya"
+      },
+      "toast": {
+        "success": "Proyek berhasil diperbarui",
+        "error": "Proyek tidak dapat diperbarui. Silakan coba lagi."
+      }
+    },
+    "members": {
+      "label": "Anggota",
+      "project_lead": "Pemimpin proyek",
+      "project_lead_description": "Pilih pimpinan proyek untuk proyek ini.",
+      "default_assignee": "Penugas default",
+      "default_assignee_description": "Pilih penerima tugas default untuk proyek ini.",
+      "project_subscribers": "Pelanggan proyek",
+      "project_subscribers_description": "Pilih anggota yang akan menerima notifikasi untuk proyek ini.",
+      "guest_super_permissions": {
+        "title": "Beri akses tampilan untuk semua item kerja untuk pengguna tamu:",
+        "sub_heading": "Ini akan memungkinkan tamu untuk memiliki akses tampilan ke semua item kerja proyek."
+      },
+      "invite_members": {
+        "title": "Undang anggota",
+        "sub_heading": "Undang anggota untuk bekerja di proyek Anda.",
+        "select_co_worker": "Pilih rekan kerja"
+      }
+    },
+    "states": {
+      "heading": "Status",
+      "description": "Tentukan dan sesuaikan status alur kerja untuk melacak kemajuan item kerja Anda.",
+      "describe_this_state_for_your_members": "Jelaskan status ini untuk anggota Anda.",
+      "empty_state": {
+        "title": "Tidak ada status yang tersedia untuk grup {groupKey}",
+        "description": "Silakan buat status baru"
+      }
+    },
+    "labels": {
+      "heading": "Label",
+      "description": "Buat label kustom untuk mengkategorikan dan mengatur item kerja Anda",
+      "label_title": "Judul label",
+      "label_title_is_required": "Judul label diperlukan",
+      "label_max_char": "Nama label tidak boleh lebih dari 255 karakter",
+      "toast": {
+        "error": "Kesalahan saat memperbarui label"
+      }
+    },
+    "estimates": {
+      "heading": "Perkiraan",
+      "description": "Ini membantu Anda dalam mengkomunikasikan kompleksitas dan beban kerja tim.",
+      "label": "Perkiraan",
+      "title": "Aktifkan perkiraan untuk proyek saya",
+      "enable_description": "Ini membantu Anda dalam mengkomunikasikan kompleksitas dan beban kerja tim.",
+      "no_estimate": "Tidak ada perkiraan",
+      "new": "Sistem perkiraan baru",
+      "create": {
+        "custom": "Kustom",
+        "start_from_scratch": "Mulai dari awal",
+        "choose_template": "Pilih template",
+        "choose_estimate_system": "Pilih sistem perkiraan",
+        "enter_estimate_point": "Masukkan perkiraan",
+        "step": "Langkah {step} dari {total}",
+        "label": "Buat perkiraan"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Perkiraan dibuat",
+            "message": "Perkiraan telah berhasil dibuat"
+          },
+          "error": {
+            "title": "Pembuatan perkiraan gagal",
+            "message": "Kami tidak dapat membuat perkiraan baru, silakan coba lagi."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Perkiraan dimodifikasi",
+            "message": "Perkiraan telah diperbarui dalam proyek Anda."
+          },
+          "error": {
+            "title": "Modifikasi perkiraan gagal",
+            "message": "Kami tidak dapat memodifikasi perkiraan, silakan coba lagi"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Berhasil!",
+            "message": "Perkiraan telah diaktifkan."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Berhasil!",
+            "message": "Perkiraan telah dinonaktifkan."
+          },
+          "error": {
+            "title": "Kesalahan!",
+            "message": "Perkiraan tidak dapat dinonaktifkan. Silakan coba lagi"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Estimasi diurutkan ulang",
+            "message": "Estimasi telah diurutkan ulang dalam proyek Anda."
+          },
+          "error": {
+            "title": "Pengurutan ulang estimasi gagal",
+            "message": "Kami tidak dapat mengurutkan ulang estimasi, silakan coba lagi"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Sistem estimasi dibuat",
+            "message": "Berhasil dibuat dan diaktifkan"
+          },
+          "error": {
+            "title": "Kesalahan",
+            "message": "Terjadi kesalahan"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Perkiraan harus lebih besar dari 0.",
+        "unable_to_process": "Kami tidak dapat memproses permintaan Anda, silakan coba lagi.",
+        "numeric": "Perkiraan harus berupa nilai numerik.",
+        "character": "Perkiraan harus berupa nilai karakter.",
+        "empty": "Nilai perkiraan tidak boleh kosong.",
+        "already_exists": "Nilai perkiraan sudah ada.",
+        "unsaved_changes": "Anda memiliki beberapa perubahan yang belum disimpan, Harap simpan sebelum mengklik selesai",
+        "remove_empty": "Perkiraan tidak boleh kosong. Masukkan nilai di setiap bidang atau hapus yang tidak memiliki nilai.",
+        "fill": "Harap isi bidang estimasi ini",
+        "repeat": "Nilai estimasi tidak boleh diulang"
+      },
+      "systems": {
+        "points": {
+          "label": "Poin",
+          "fibonacci": "Fibonacci",
+          "linear": "Linear",
+          "squares": "Kuadrat",
+          "custom": "Kustom"
+        },
+        "categories": {
+          "label": "Kategori",
+          "t_shirt_sizes": "Ukuran Baju",
+          "easy_to_hard": "Mudah ke sulit",
+          "custom": "Kustom"
+        },
+        "time": {
+          "label": "Waktu",
+          "hours": "Jam"
+        }
+      },
+      "edit": {
+        "title": "Edit sistem estimasi",
+        "add_or_update": {
+          "title": "Tambah, perbarui atau hapus estimasi",
+          "description": "Kelola sistem saat ini dengan menambah, memperbarui atau menghapus poin atau kategori."
+        },
+        "switch": {
+          "title": "Ubah tipe estimasi",
+          "description": "Konversi sistem poin Anda ke sistem kategori dan sebaliknya."
+        }
+      },
+      "switch": "Alihkan sistem estimasi",
+      "current": "Sistem estimasi saat ini",
+      "select": "Pilih sistem estimasi"
+    },
+    "automations": {
+      "label": "Otomatisasi",
+      "heading": "Otomatisasi",
+      "description": "Konfigurasikan aksi otomatis untuk menyederhanakan alur kerja manajemen proyek Anda dan mengurangi tugas manual.",
+      "auto-archive": {
+        "title": "Arsip otomatis item kerja yang ditutup",
+        "description": "Plane akan mengarsipkan secara otomatis item kerja yang telah selesai atau dibatalkan.",
+        "duration": "Arsip otomatis item kerja yang ditutup selama"
+      },
+      "auto-close": {
+        "title": "Tutup otomatis item kerja",
+        "description": "Plane akan menutup secara otomatis item kerja yang belum selesai atau dibatalkan.",
+        "duration": "Tutup otomatis item kerja yang tidak aktif selama",
+        "auto_close_status": "Status penutupan otomatis"
+      },
+      "auto-remind": {
+        "title": "Pengingat otomatis",
+        "description": "Plane akan mengirim pengingat otomatis via email dan notifikasi dalam aplikasi untuk memantau kemajuan proyek Anda.",
+        "duration": "Kirim pengingat sebelum"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Belum ada label",
+        "description": "Buat label untuk membantu mengatur dan memfilter item kerja dalam proyek Anda."
+      },
+      "estimates": {
+        "title": "Belum ada sistem perkiraan",
+        "description": "Buat serangkaian perkiraan untuk mengkomunikasikan jumlah pekerjaan per item kerja.",
+        "primary_button": "Tambah sistem perkiraan"
+      },
+      "integrations": {
+        "title": "Tidak ada integrasi yang dikonfigurasi",
+        "description": "Konfigurasikan GitHub dan integrasi lainnya untuk menyinkronkan item kerja proyek Anda."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Aktifkan alur kerja",
+        "description": "Atur alur kerja untuk mengontrol pergerakan item kerja",
+        "no_states_tooltip": "Tidak ada status yang ditambahkan ke alur kerja.",
+        "no_work_item_types_tooltip": "Tidak ada tipe item kerja yang ditambahkan ke alur kerja.",
+        "no_states_or_work_item_types_tooltip": "Tidak ada status atau tipe item kerja yang ditambahkan ke alur kerja.",
+        "toast": {
+          "loading": {
+            "enabling": "Mengaktifkan alur kerja",
+            "disabling": "Menonaktifkan alur kerja"
+          },
+          "success": {
+            "title": "Berhasil!",
+            "message": "Alur kerja berhasil diaktifkan."
+          },
+          "error": {
+            "title": "Error!",
+            "message": "Gagal mengaktifkan alur kerja. Silakan coba lagi."
+          }
+        }
+      },
+      "heading": "Alur Kerja",
+      "description": "Otomatisasi transisi item kerja dan tetapkan aturan untuk mengontrol bagaimana tugas berpindah melalui pipeline proyek Anda.",
+      "add_button": "Tambah alur kerja baru",
+      "search": "Cari alur kerja",
+      "detail": {
+        "define": "Tentukan alur kerja",
+        "add_states": "Tambah status",
+        "unmapped_states": {
+          "title": "Status tak terpetakan terdeteksi",
+          "description": "Beberapa item kerja untuk tipe yang dipilih saat ini berada dalam status yang tidak ada dalam alur kerja ini.",
+          "note": "Jika Anda mengaktifkan alur kerja ini, item ini akan otomatis dipindahkan ke status awal untuk alur kerja ini.",
+          "label": "Status hilang",
+          "tooltip": "Beberapa item kerja berada dalam status yang tidak dipetakan ke alur kerja ini. Buka alur kerja untuk meninjau."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Semua status sedang digunakan",
+          "description": "Semua status yang ditentukan untuk proyek ini sudah ada dalam alur kerja Anda saat ini."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Alur kerja ini berlaku untuk tipe item kerja apa pun yang tidak ditetapkan ke alur kerja."
+      },
+      "create": {
+        "heading": "Buat alur kerja baru",
+        "name": {
+          "placeholder": "Tambah nama unik",
+          "validation": {
+            "max_length": "Nama harus kurang dari 255 karakter",
+            "required": "Nama diperlukan",
+            "invalid": "Nama hanya boleh berisi huruf, angka, spasi, tanda hubung, dan apostrof"
+          }
+        },
+        "description": {
+          "placeholder": "Tambah deskripsi singkat",
+          "validation": {
+            "invalid": "Deskripsi hanya boleh berisi huruf, angka, spasi, tanda hubung, dan apostrof"
+          }
+        },
+        "work_item_type": {
+          "label": "Tipe item kerja"
+        },
+        "success": {
+          "title": "Berhasil!",
+          "message": "Alur kerja berhasil dibuat."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Gagal membuat alur kerja. Silakan coba lagi."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Berhasil!",
+          "message": "Alur kerja berhasil diperbarui."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Gagal memperbarui alur kerja. Silakan coba lagi."
+        }
+      },
+      "delete": {
+        "loading": "Menghapus alur kerja",
+        "success": {
+          "title": "Berhasil!",
+          "message": "Alur kerja berhasil dihapus."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Gagal menghapus alur kerja. Silakan coba lagi."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Berhasil!",
+          "message": "Status berhasil ditambahkan."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Gagal menambahkan status. Silakan coba lagi."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Tipe item kerja",
+      "description": "Buat dan sesuaikan berbagai tipe item kerja dengan properti unik"
+    },
+    "features": {
+      "cycles": {
+        "title": "Siklus",
+        "short_title": "Siklus",
+        "description": "Jadwalkan pekerjaan dalam periode fleksibel yang menyesuaikan dengan ritme dan tempo unik proyek ini.",
+        "toggle_title": "Aktifkan siklus",
+        "toggle_description": "Rencanakan pekerjaan dalam jangka waktu yang terfokus."
+      },
+      "modules": {
+        "title": "Modul",
+        "short_title": "Modul",
+        "description": "Atur pekerjaan menjadi sub-proyek dengan pemimpin dan penerima tugas khusus.",
+        "toggle_title": "Aktifkan modul",
+        "toggle_description": "Anggota proyek akan dapat membuat dan mengedit modul."
+      },
+      "views": {
+        "title": "Tampilan",
+        "short_title": "Tampilan",
+        "description": "Simpan pengurutan, filter, dan opsi tampilan kustom atau bagikan dengan tim Anda.",
+        "toggle_title": "Aktifkan tampilan",
+        "toggle_description": "Anggota proyek akan dapat membuat dan mengedit tampilan."
+      },
+      "pages": {
+        "title": "Halaman",
+        "short_title": "Halaman",
+        "description": "Buat dan edit konten bebas: catatan, dokumen, apa saja.",
+        "toggle_title": "Aktifkan halaman",
+        "toggle_description": "Anggota proyek akan dapat membuat dan mengedit halaman."
+      },
+      "intake": {
+        "intake_responsibility": "Tanggung jawab penerimaan",
+        "intake_sources": "Sumber penerimaan",
+        "title": "Penerimaan",
+        "short_title": "Penerimaan",
+        "description": "Biarkan non-anggota berbagi bug, umpan balik, dan saran; tanpa mengganggu alur kerja Anda.",
+        "toggle_title": "Aktifkan penerimaan",
+        "toggle_description": "Izinkan anggota proyek membuat permintaan penerimaan dalam aplikasi.",
+        "toggle_tooltip_on": "Minta Admin Proyek untuk mengaktifkan ini.",
+        "toggle_tooltip_off": "Minta Admin Proyek untuk menonaktifkan ini.",
+        "notify_assignee": {
+          "title": "Beritahu yang ditugaskan",
+          "description": "Untuk permintaan penerimaan baru, yang ditugaskan secara default akan diberi peringatan melalui notifikasi"
+        },
+        "in_app": {
+          "title": "Dalam aplikasi",
+          "description": "Dapatkan item kerja baru dari Anggota dan Tamu di ruang kerja Anda tanpa mengganggu item kerja yang ada."
+        },
+        "email": {
+          "title": "Email",
+          "description": "Kumpulkan item kerja baru dari siapa saja yang mengirim email ke alamat email Plane.",
+          "fieldName": "ID Email"
+        },
+        "form": {
+          "title": "Formulir",
+          "description": "Izinkan orang di luar ruang kerja Anda membuat item kerja baru potensial melalui formulir khusus dan aman.",
+          "fieldName": "URL formulir default",
+          "create_forms": "Buat Formulir menggunakan jenis item kerja",
+          "manage_forms": "Kelola formulir",
+          "manage_forms_tooltip": "Minta Admin Ruang Kerja untuk mengelola ini.",
+          "create_form": "Buat formulir",
+          "edit_form": "Edit detail formulir",
+          "form_title": "Judul formulir",
+          "form_title_required": "Judul formulir wajib diisi",
+          "work_item_type": "Jenis item kerja",
+          "remove_property": "Hapus properti",
+          "select_properties": "Pilih properti",
+          "search_placeholder": "Cari properti",
+          "toasts": {
+            "success_create": "Formulir penerimaan berhasil dibuat",
+            "success_update": "Formulir penerimaan berhasil diperbarui",
+            "error_create": "Gagal membuat formulir penerimaan",
+            "error_update": "Gagal memperbarui formulir penerimaan"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Mengatur yang ditugaskan...",
+            "success": {
+              "title": "Berhasil!",
+              "message": "Yang ditugaskan berhasil diatur."
+            },
+            "error": {
+              "title": "Kesalahan!",
+              "message": "Terjadi kesalahan saat mengatur yang ditugaskan. Silakan coba lagi."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Pelacakan waktu",
+        "short_title": "Pelacakan waktu",
+        "description": "Catat waktu yang dihabiskan untuk item kerja dan proyek.",
+        "toggle_title": "Aktifkan pelacakan waktu",
+        "toggle_description": "Anggota proyek akan dapat mencatat waktu yang dikerjakan."
+      },
+      "milestones": {
+        "title": "Tonggak",
+        "short_title": "Tonggak",
+        "description": "Tonggak menyediakan lapisan untuk menyelaraskan item kerja menuju tanggal penyelesaian bersama.",
+        "toggle_title": "Aktifkan tonggak",
+        "toggle_description": "Organisir item kerja berdasarkan tenggat tonggak."
+      },
+      "toasts": {
+        "loading": "Memperbarui fitur proyek...",
+        "success": "Fitur proyek berhasil diperbarui.",
+        "error": "Terjadi kesalahan saat memperbarui fitur proyek. Silakan coba lagi."
+      }
+    },
+    "project_updates": {
+      "heading": "Pembaruan Proyek",
+      "description": "Pelacakan terpadu dan pemantauan kemajuan untuk proyek ini"
+    },
+    "templates": {
+      "heading": "Templat",
+      "description": "Hemat 80% waktu yang dihabiskan untuk membuat proyek, item kerja, dan halaman saat Anda menggunakan templat."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Penjadwalan otomatis siklus",
+        "description": "Jaga agar siklus tetap berjalan tanpa pengaturan manual.",
+        "tooltip": "Buat siklus baru secara otomatis berdasarkan jadwal yang Anda pilih.",
+        "edit_button": "Edit",
+        "form": {
+          "cycle_title": {
+            "label": "Judul siklus",
+            "placeholder": "Judul",
+            "tooltip": "Judul akan ditambahkan dengan nomor untuk siklus berikutnya. Misalnya: Desain - 1/2/3",
+            "validation": {
+              "required": "Judul siklus wajib diisi",
+              "max_length": "Judul tidak boleh melebihi 255 karakter"
+            }
+          },
+          "cycle_duration": {
+            "label": "Durasi siklus",
+            "unit": "Minggu",
+            "validation": {
+              "required": "Durasi siklus wajib diisi",
+              "min": "Durasi siklus harus minimal 1 minggu",
+              "max": "Durasi siklus tidak boleh melebihi 30 minggu",
+              "positive": "Durasi siklus harus positif"
+            }
+          },
+          "cooldown_period": {
+            "label": "Periode pendinginan",
+            "unit": "hari",
+            "tooltip": "Jeda antara siklus sebelum siklus berikutnya dimulai.",
+            "validation": {
+              "required": "Periode pendinginan wajib diisi",
+              "negative": "Periode pendinginan tidak boleh negatif"
+            }
+          },
+          "start_date": {
+            "label": "Hari mulai siklus",
+            "validation": {
+              "required": "Tanggal mulai wajib diisi",
+              "past": "Tanggal mulai tidak boleh di masa lalu"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Jumlah siklus mendatang",
+            "validation": {
+              "required": "Jumlah siklus wajib diisi",
+              "min": "Setidaknya 1 siklus diperlukan",
+              "max": "Tidak dapat menjadwalkan lebih dari 3 siklus"
+            }
+          },
+          "auto_rollover": {
+            "label": "Pemindahan otomatis item pekerjaan",
+            "tooltip": "Pada hari siklus selesai, pindahkan semua item pekerjaan yang belum selesai ke siklus berikutnya."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Mengaktifkan penjadwalan otomatis siklus",
+            "loading_disable": "Menonaktifkan penjadwalan otomatis siklus",
+            "success": {
+              "title": "Berhasil!",
+              "message": "Penjadwalan otomatis siklus berhasil diaktifkan."
+            },
+            "error": {
+              "title": "Kesalahan!",
+              "message": "Gagal mengaktifkan penjadwalan otomatis siklus."
+            }
+          },
+          "save": {
+            "loading": "Menyimpan konfigurasi penjadwalan otomatis siklus",
+            "success": {
+              "title": "Berhasil!",
+              "message_create": "Konfigurasi penjadwalan otomatis siklus berhasil disimpan.",
+              "message_update": "Konfigurasi penjadwalan otomatis siklus berhasil diperbarui."
+            },
+            "error": {
+              "title": "Kesalahan!",
+              "message_create": "Gagal menyimpan konfigurasi penjadwalan otomatis siklus.",
+              "message_update": "Gagal memperbarui konfigurasi penjadwalan otomatis siklus."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/project.json b/packages/i18n/src/locales/id/project.json
new file mode 100644
index 0000000..5c60f89
--- /dev/null
+++ b/packages/i18n/src/locales/id/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Dibuat pada",
+      "updated_at": "Diperbarui pada",
+      "name": "Nama"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Tambah siklus",
+    "more_details": "Detail lebih lanjut",
+    "cycle": "Siklus",
+    "update_cycle": "Perbarui siklus",
+    "create_cycle": "Buat siklus",
+    "no_matching_cycles": "Tidak ada siklus yang cocok",
+    "remove_filters_to_see_all_cycles": "Hapus filter untuk melihat semua siklus",
+    "remove_search_criteria_to_see_all_cycles": "Hapus kriteria pencarian untuk melihat semua siklus",
+    "only_completed_cycles_can_be_archived": "Hanya siklus yang diselesaikan yang dapat diarsipkan",
+    "start_date": "Tanggal mulai",
+    "end_date": "Tanggal akhir",
+    "in_your_timezone": "Di zona waktu Anda",
+    "transfer_work_items": "Transfer {count} item kerja",
+    "transfer": {
+      "no_cycles_available": "Tidak ada siklus lain yang tersedia untuk mentransfer item pekerjaan."
+    },
+    "date_range": "Rentang tanggal",
+    "add_date": "Tambah tanggal",
+    "active_cycle": {
+      "label": "Siklus aktif",
+      "progress": "Kemajuan",
+      "chart": "Grafik burndown",
+      "priority_issue": "Item kerja prioritas",
+      "assignees": "Penugasan",
+      "issue_burndown": "Burndown item kerja",
+      "ideal": "Ideal",
+      "current": "Sekarang",
+      "labels": "Label",
+      "trailing": "Tertinggal",
+      "leading": "Memimpin"
+    },
+    "upcoming_cycle": {
+      "label": "Siklus mendatang"
+    },
+    "completed_cycle": {
+      "label": "Siklus selesai"
+    },
+    "status": {
+      "days_left": "Hari tersisa",
+      "completed": "Selesai",
+      "yet_to_start": "Belum dimulai",
+      "in_progress": "Sedang berlangsung",
+      "draft": "Draf"
+    },
+    "action": {
+      "restore": {
+        "title": "Pulihkan siklus",
+        "success": {
+          "title": "Siklus dipulihkan",
+          "description": "Siklus telah dipulihkan."
+        },
+        "failed": {
+          "title": "Pemulihan siklus gagal",
+          "description": "Siklus tidak dapat dipulihkan. Silakan coba lagi."
+        }
+      },
+      "favorite": {
+        "loading": "Menambahkan siklus ke favorit",
+        "success": {
+          "description": "Siklus ditambahkan ke favorit.",
+          "title": "Sukses!"
+        },
+        "failed": {
+          "description": "Gagal menambahkan siklus ke favorit. Silakan coba lagi.",
+          "title": "Kesalahan!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Menghapus siklus dari favorit",
+        "success": {
+          "description": "Siklus dihapus dari favorit.",
+          "title": "Sukses!"
+        },
+        "failed": {
+          "description": "Gagal menghapus siklus dari favorit. Silakan coba lagi.",
+          "title": "Kesalahan!"
+        }
+      },
+      "update": {
+        "loading": "Memperbarui siklus",
+        "success": {
+          "description": "Siklus berhasil diperbarui.",
+          "title": "Sukses!"
+        },
+        "failed": {
+          "description": "Kesalahan saat memperbarui siklus. Silakan coba lagi.",
+          "title": "Kesalahan!"
+        },
+        "error": {
+          "already_exists": "Anda sudah memiliki siklus pada tanggal yang diberikan, jika Anda ingin membuat siklus draf, Anda dapat melakukannya dengan menghapus kedua tanggal tersebut."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Kelompokkan dan bagi pekerjaan Anda dalam Siklus.",
+        "description": "Pecah pekerjaan menjadi bagian yang dibatasi waktu, kerjakan mundur dari tenggat waktu proyek Anda untuk menetapkan tanggal, dan buat kemajuan nyata sebagai tim.",
+        "primary_button": {
+          "text": "Tetapkan siklus pertama Anda",
+          "comic": {
+            "title": "Siklus adalah batas waktu berulang.",
+            "description": "Sprint, iterasi, dan istilah lain apa pun yang Anda gunakan untuk pelacakan pekerjaan mingguan atau dua mingguan adalah siklus."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Tidak ada item kerja yang ditambahkan ke siklus",
+        "description": "Tambahkan atau buat item kerja yang ingin Anda batasi waktu dan kirim dalam siklus ini",
+        "primary_button": {
+          "text": "Buat item kerja baru"
+        },
+        "secondary_button": {
+          "text": "Tambah item kerja yang ada"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Tidak ada item kerja dalam siklus",
+        "description": "Tidak ada item kerja dalam siklus. Item kerja baik ditransfer atau disembunyikan. Untuk melihat item kerja yang disembunyikan jika ada, perbarui properti tampilan Anda sesuai."
+      },
+      "active": {
+        "title": "Tidak ada siklus aktif",
+        "description": "Siklus aktif mencakup periode apa pun yang mencakup tanggal hari ini dalam rentangnya. Temukan kemajuan dan detail siklus aktif di sini."
+      },
+      "archived": {
+        "title": "Belum ada siklus yang diarsipkan",
+        "description": "Untuk membersihkan proyek Anda, arsipkan siklus yang telah diselesaikan. Temukan di sini setelah diarsipkan."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Simpan tampilan yang difilter untuk proyek Anda. Buat sebanyak yang Anda perlukan",
+        "description": "Tampilan adalah sekumpulan filter yang disimpan yang Anda gunakan secara sering atau ingin akses mudah. Semua rekan Anda dalam proyek dapat melihat tampilan semua orang dan memilih yang paling sesuai dengan kebutuhan mereka.",
+        "primary_button": {
+          "text": "Buat tampilan pertama Anda",
+          "comic": {
+            "title": "Tampilan bekerja berdasarkan properti item kerja.",
+            "description": "Anda dapat membuat tampilan dari sini dengan sebanyak mungkin properti sebagai filter yang Anda anggap sesuai."
+          }
+        },
+        "filter": {
+          "title": "Tidak ada tampilan yang cocok",
+          "description": "Tidak ada tampilan yang cocok dengan kriteria pencarian.\n Buat tampilan baru sebagai gantinya."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Belum ada item kerja yang diarsipkan",
+        "description": "Secara manual atau melalui otomatisasi, Anda dapat mengarsipkan item kerja yang selesai atau dibatalkan. Temukan di sini setelah diarsipkan.",
+        "primary_button": {
+          "text": "Atur otomatisasi"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Tidak ada item kerja yang ditemukan cocok dengan filter yang diterapkan",
+        "secondary_button": {
+          "text": "Hapus semua filter"
+        }
+      },
+      "public": {
+        "title": "Belum ada halaman publik",
+        "description": "Lihat halaman yang dibagikan dengan semua orang di proyek Anda tepat di sini.",
+        "primary_button": {
+          "text": "Buat halaman pertama Anda"
+        }
+      },
+      "archived": {
+        "title": "Belum ada halaman yang diarsipkan",
+        "description": "Arsipkan halaman yang tidak ada dalam radar Anda. Akses di sini saat diperlukan."
+      },
+      "shared": {
+        "title": "Belum ada halaman yang dibagikan",
+        "description": "Halaman yang dibagikan orang lain kepada Anda akan muncul di sini."
+      }
+    },
+    "delete_view": {
+      "title": "Apakah Anda yakin ingin menghapus tampilan ini?",
+      "content": "Jika Anda mengonfirmasi, semua opsi pengurutan, filter, dan tampilan + tata letak yang telah Anda pilih untuk tampilan ini akan dihapus secara permanen tanpa cara untuk memulihkannya."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Buat item kerja dan tugaskan kepada seseorang, bahkan kepada diri Anda sendiri",
+        "description": "Anggap item kerja sebagai pekerjaan, tugas, atau JTBD. Yang kami suka. Item kerja dan sub-item kerjanya biasanya merupakan tindakan berbasis waktu yang ditugaskan kepada anggota tim Anda. Tim Anda membuat, menetapkan, dan menyelesaikan item kerja untuk memindahkan proyek Anda menuju tujuannya.",
+        "primary_button": {
+          "text": "Buat item kerja pertama Anda",
+          "comic": {
+            "title": "Item kerja adalah blok bangunan di Plane.",
+            "description": "Mendesain ulang UI Plane, Mengganti merek perusahaan, atau Meluncurkan sistem injeksi bahan bakar baru adalah contoh item kerja yang kemungkinan besar memiliki sub-item kerja."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Belum ada item kerja yang diarsipkan",
+        "description": "Secara manual atau melalui otomatisasi, Anda dapat mengarsipkan item kerja yang telah selesai atau dibatalkan. Temukan di sini setelah diarsipkan.",
+        "primary_button": {
+          "text": "Tetapkan otomatisasi"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Tidak ada item kerja ditemukan yang cocok dengan filter yang diterapkan",
+        "secondary_button": {
+          "text": "Bersihkan semua filter"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Tambah Modul",
+    "update_module": "Perbarui Modul",
+    "create_module": "Buat Modul",
+    "archive_module": "Arsipkan Modul",
+    "restore_module": "Pulihkan Modul",
+    "delete_module": "Hapus modul",
+    "empty_state": {
+      "general": {
+        "title": "Peta tonggak proyek Anda ke Modul dan lacak pekerjaan terakumulasi dengan mudah.",
+        "description": "Sekelompok item kerja yang tergolong dalam induk yang logis dan hierarkis membentuk satu modul. Anggap saja mereka sebagai cara untuk melacak pekerjaan berdasarkan tonggak proyek. Mereka memiliki periode dan tenggat waktu sendiri serta analitik untuk membantu Anda melihat seberapa dekat atau jauh Anda dari tonggak tersebut.",
+        "primary_button": {
+          "text": "Buat modul pertama Anda",
+          "comic": {
+            "title": "Modul membantu mengelompokkan pekerjaan menurut hierarki.",
+            "description": "Modul kereta, modul sasis, dan modul gudang adalah contoh bagus dari pengelompokan ini."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Tidak ada item kerja dalam modul",
+        "description": "Buat atau tambahkan item kerja yang ingin Anda capai sebagai bagian dari modul ini",
+        "primary_button": {
+          "text": "Buat item kerja baru"
+        },
+        "secondary_button": {
+          "text": "Tambahkan item kerja yang ada"
+        }
+      },
+      "archived": {
+        "title": "Belum ada Modul yang diarsipkan",
+        "description": "Untuk membersihkan proyek Anda, arsipkan modul yang telah selesai atau dibatalkan. Temukan di sini setelah diarsipkan."
+      },
+      "sidebar": {
+        "in_active": "Modul ini belum aktif.",
+        "invalid_date": "Tanggal tidak valid. Silakan masukkan tanggal yang valid."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Arsipkan modul",
+      "archive_module_description": "Hanya modul yang telah diselesaikan atau dibatalkan\n yang dapat diarsipkan.",
+      "delete_module": "Hapus modul"
+    },
+    "toast": {
+      "copy": {
+        "success": "Tautan modul disalin ke clipboard"
+      },
+      "delete": {
+        "success": "Modul berhasil dihapus",
+        "error": "Gagal menghapus modul"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Tulis catatan, dokumen, atau seluruh basis pengetahuan. Dapatkan Galileo, asisten AI Plane, untuk membantu Anda memulai",
+        "description": "Halaman adalah ruang pemikiran di Plane. Catat notul rapat, format dengan mudah, sertakan item kerja, tata letak menggunakan perpustakaan komponen, dan simpan semua di dalam konteks proyek Anda. Untuk menyelesaikan dokumen dengan cepat, panggil Galileo, AI Plane, dengan pintasan atau dengan mengklik tombol.",
+        "primary_button": {
+          "text": "Buat halaman pertama Anda"
+        }
+      },
+      "private": {
+        "title": "Belum ada halaman pribadi",
+        "description": "Simpan pemikiran pribadi Anda di sini. Ketika Anda sudah siap untuk berbagi, tim hanya seklik jarak.",
+        "primary_button": {
+          "text": "Buat halaman pertama Anda"
+        }
+      },
+      "public": {
+        "title": "Belum ada halaman publik",
+        "description": "Lihat halaman yang dibagikan dengan semua orang di proyek Anda tepat di sini.",
+        "primary_button": {
+          "text": "Buat halaman pertama Anda"
+        }
+      },
+      "archived": {
+        "title": "Belum ada halaman yang diarsipkan",
+        "description": "Arsipkan halaman yang tidak ada dalam radar Anda. Akses di sini saat diperlukan."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Intake tidak diaktifkan untuk proyek ini.",
+        "description": "Intake membantu Anda mengelola permintaan yang masuk ke proyek Anda dan menambahkannya sebagai item kerja dalam alur kerja Anda. Aktifkan intake dari pengaturan proyek untuk mengelola permintaan.",
+        "primary_button": {
+          "text": "Kelola fitur"
+        }
+      },
+      "cycle": {
+        "title": "Siklus tidak diaktifkan untuk proyek ini.",
+        "description": "Pecah pekerjaan menjadi bagian yang dibatasi waktu, kerjakan mundur dari tenggat waktu proyek Anda untuk menetapkan tanggal, dan buat kemajuan nyata sebagai tim. Aktifkan fitur siklus untuk proyek Anda agar dapat mulai menggunakannya.",
+        "primary_button": {
+          "text": "Kelola fitur"
+        }
+      },
+      "module": {
+        "title": "Modul tidak diaktifkan untuk proyek ini.",
+        "description": "Modul adalah blok bangunan dari proyek Anda. Aktifkan modul dari pengaturan proyek untuk mulai menggunakannya.",
+        "primary_button": {
+          "text": "Kelola fitur"
+        }
+      },
+      "page": {
+        "title": "Halaman tidak diaktifkan untuk proyek ini.",
+        "description": "Halaman adalah blok bangunan dari proyek Anda. Aktifkan halaman dari pengaturan proyek untuk mulai menggunakannya.",
+        "primary_button": {
+          "text": "Kelola fitur"
+        }
+      },
+      "view": {
+        "title": "Tampilan tidak diaktifkan untuk proyek ini.",
+        "description": "Tampilan adalah blok bangunan dari proyek Anda. Aktifkan tampilan dari pengaturan proyek untuk mulai menggunakannya.",
+        "primary_button": {
+          "text": "Kelola fitur"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Direncanakan",
+      "in_progress": "Dalam Proses",
+      "paused": "Dijeda",
+      "completed": "Selesai",
+      "cancelled": "Dibatalkan"
+    },
+    "layout": {
+      "list": "Tata letak daftar",
+      "board": "Tata letak galeri",
+      "timeline": "Tata letak garis waktu"
+    },
+    "order_by": {
+      "name": "Nama",
+      "progress": "Kemajuan",
+      "issues": "Jumlah item kerja",
+      "due_date": "Tanggal jatuh tempo",
+      "created_at": "Tanggal dibuat",
+      "manual": "Manual"
+    }
+  },
+  "project_members": {
+    "full_name": "Nama lengkap",
+    "display_name": "Nama tampilan",
+    "email": "Email",
+    "joining_date": "Tanggal bergabung",
+    "role": "Peran"
+  },
+  "project": {
+    "members_import": {
+      "title": "Impor anggota dari CSV",
+      "description": "Unggah CSV dengan kolom: Email dan Peran (5=Tamu, 15=Anggota, 20=Admin). Pengguna harus sudah menjadi anggota workspace.",
+      "download_sample": "Unduh contoh CSV",
+      "dropzone": {
+        "active": "Letakkan file CSV di sini",
+        "inactive": "Seret & lepas atau klik untuk mengunggah",
+        "file_type": "Hanya file .csv yang didukung"
+      },
+      "buttons": {
+        "cancel": "Batal",
+        "import": "Impor",
+        "try_again": "Coba Lagi",
+        "close": "Tutup",
+        "done": "Selesai"
+      },
+      "progress": {
+        "uploading": "Mengunggah...",
+        "importing": "Mengimpor..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Impor Selesai"
+        },
+        "message": {
+          "success": "Berhasil mengimpor {count} anggota ke proyek.",
+          "no_imports": "Tidak ada anggota baru yang diimpor dari file CSV."
+        },
+        "stats": {
+          "added": "Ditambahkan",
+          "reactivated": "Diaktifkan kembali",
+          "already_members": "Sudah menjadi anggota",
+          "skipped": "Dilewati"
+        },
+        "download_errors": "Unduh detail yang dilewati"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "File tidak valid",
+          "message": "Hanya file CSV yang didukung."
+        },
+        "import_failed": {
+          "title": "Impor gagal",
+          "message": "Terjadi kesalahan."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/settings.json b/packages/i18n/src/locales/id/settings.json
new file mode 100644
index 0000000..5e05f84
--- /dev/null
+++ b/packages/i18n/src/locales/id/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Ubah email",
+        "description": "Masukkan alamat email baru untuk menerima tautan verifikasi.",
+        "toasts": {
+          "success_title": "Berhasil!",
+          "success_message": "Email berhasil diperbarui. Silakan masuk kembali."
+        },
+        "form": {
+          "email": {
+            "label": "Email baru",
+            "placeholder": "Masukkan email Anda",
+            "errors": {
+              "required": "Email wajib diisi",
+              "invalid": "Email tidak valid",
+              "exists": "Email sudah ada. Gunakan yang lain.",
+              "validation_failed": "Validasi email gagal. Coba lagi."
+            }
+          },
+          "code": {
+            "label": "Kode unik",
+            "placeholder": "123456",
+            "helper_text": "Kode verifikasi dikirim ke email baru Anda.",
+            "errors": {
+              "required": "Kode unik wajib diisi",
+              "invalid": "Kode verifikasi tidak valid. Coba lagi."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Lanjutkan",
+          "confirm": "Konfirmasi",
+          "cancel": "Batal"
+        },
+        "states": {
+          "sending": "Mengirim…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Preferensi",
+      "description": "Sesuaikan pengalaman aplikasi Anda dengan cara kerja Anda"
+    },
+    "notifications": {
+      "heading": "Notifikasi email",
+      "description": "Tetap terupdate tentang item kerja yang Anda langgani. Aktifkan ini untuk mendapatkan notifikasi.",
+      "select_default_view": "Pilih tampilan default",
+      "compact": "Ringkas",
+      "full": "Layar penuh"
+    },
+    "security": {
+      "heading": "Keamanan"
+    },
+    "api_tokens": {
+      "title": "Token Akses Personal",
+      "description": "Hasilkan token API yang aman untuk mengintegrasikan data Anda dengan sistem dan aplikasi eksternal."
+    },
+    "activity": {
+      "heading": "Aktivitas",
+      "description": "Lacak tindakan dan perubahan terkini Anda di semua proyek dan item kerja."
+    },
+    "connections": {
+      "title": "Koneksi",
+      "heading": "Koneksi",
+      "description": "Kelola pengaturan koneksi ruang kerja Anda."
+    }
+  },
+  "profile": {
+    "label": "Profil",
+    "page_label": "Pekerjaan Anda",
+    "work": "Pekerjaan",
+    "details": {
+      "joined_on": "Bergabung pada",
+      "time_zone": "Zona waktu"
+    },
+    "stats": {
+      "workload": "Beban kerja",
+      "overview": "Ikhtisar",
+      "created": "Item kerja yang dibuat",
+      "assigned": "Item kerja yang ditugaskan",
+      "subscribed": "Item kerja yang disubscribe",
+      "state_distribution": {
+        "title": "Item kerja berdasarkan status",
+        "empty": "Buat item kerja untuk melihatnya berdasarkan status dalam grafik untuk analisis yang lebih baik."
+      },
+      "priority_distribution": {
+        "title": "Item kerja berdasarkan Prioritas",
+        "empty": "Buat item kerja untuk melihatnya berdasarkan prioritas dalam grafik untuk analisis yang lebih baik."
+      },
+      "recent_activity": {
+        "title": "Aktivitas terkini",
+        "empty": "Kami tidak dapat menemukan data. Silakan lihat input Anda",
+        "button": "Unduh aktivitas hari ini",
+        "button_loading": "Mengunduh"
+      }
+    },
+    "actions": {
+      "profile": "Profil",
+      "security": "Keamanan",
+      "activity": "Aktivitas",
+      "preferences": "Preferensi",
+      "notifications": "Notifikasi",
+      "api-tokens": "Token Akses Personal",
+      "connections": "Koneksi"
+    },
+    "tabs": {
+      "summary": "Ringkasan",
+      "assigned": "Ditugaskan",
+      "created": "Dibuat",
+      "subscribed": "Disubscribe",
+      "activity": "Aktivitas"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Belum ada aktivitas",
+        "description": "Mulai dengan membuat item kerja baru! Tambahkan detail dan properti. Jelajahi lebih lanjut di Plane untuk melihat aktivitas Anda."
+      },
+      "assigned": {
+        "title": "Tidak ada item kerja yang ditugaskan kepada Anda",
+        "description": "Item kerja yang ditugaskan kepada Anda dapat dilacak dari sini."
+      },
+      "created": {
+        "title": "Belum ada item kerja",
+        "description": "Semua item kerja yang dibuat oleh Anda hadir di sini, dan lacak langsung di sini."
+      },
+      "subscribed": {
+        "title": "Belum ada item kerja",
+        "description": "Langganan item kerja yang Anda minati, lacak semuanya di sini."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Preferensi sistem"
+      },
+      "light": {
+        "label": "Cerah"
+      },
+      "dark": {
+        "label": "Gelap"
+      },
+      "light_contrast": {
+        "label": "Cerah kontras tinggi"
+      },
+      "dark_contrast": {
+        "label": "Gelap kontras tinggi"
+      },
+      "custom": {
+        "label": "Tema kustom"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/stickies.json b/packages/i18n/src/locales/id/stickies.json
new file mode 100644
index 0000000..57d1b6c
--- /dev/null
+++ b/packages/i18n/src/locales/id/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Catatan tempel Anda",
+    "placeholder": "klik untuk mengetik di sini",
+    "all": "Semua catatan tempel",
+    "no-data": "Tuliskan sebuah ide, tangkap momen aha, atau catat pemikiran brilian. Tambahkan catatan tempel untuk memulai.",
+    "add": "Tambah catatan tempel",
+    "search_placeholder": "Cari berdasarkan judul",
+    "delete": "Hapus catatan tempel",
+    "delete_confirmation": "Apakah Anda yakin ingin menghapus catatan tempel ini?",
+    "empty_state": {
+      "simple": "Tuliskan sebuah ide, tangkap momen aha, atau catat pemikiran brilian. Tambahkan catatan tempel untuk memulai.",
+      "general": {
+        "title": "Catatan tempel adalah catatan cepat dan tugas yang Anda buat secara langsung.",
+        "description": "Tangkap pemikiran dan ide Anda dengan mudah dengan membuat catatan tempel yang dapat Anda akses kapan saja dan dari mana saja.",
+        "primary_button": {
+          "text": "Tambah catatan tempel"
+        }
+      },
+      "search": {
+        "title": "Itu tidak cocok dengan salah satu catatan tempel Anda.",
+        "description": "Coba istilah yang berbeda atau beri tahu kami\njika Anda yakin pencarian Anda benar. ",
+        "primary_button": {
+          "text": "Tambah catatan tempel"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Nama catatan tempel tidak boleh lebih dari 100 karakter.",
+        "already_exists": "Sudah ada catatan tempel dengan tidak ada deskripsi"
+      },
+      "created": {
+        "title": "Catatan tempel berhasil dibuat",
+        "message": "Catatan tempel telah berhasil dibuat"
+      },
+      "not_created": {
+        "title": "Catatan tempel tidak dibuat",
+        "message": "Catatan tempel tidak dapat dibuat"
+      },
+      "updated": {
+        "title": "Catatan tempel diperbarui",
+        "message": "Catatan tempel telah berhasil diperbarui"
+      },
+      "not_updated": {
+        "title": "Catatan tempel tidak diperbarui",
+        "message": "Catatan tempel tidak dapat diperbarui"
+      },
+      "removed": {
+        "title": "Catatan tempel dihapus",
+        "message": "Catatan tempel telah berhasil dihapus"
+      },
+      "not_removed": {
+        "title": "Catatan tempel tidak dihapus",
+        "message": "Catatan tempel tidak dapat dihapus"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/template.json b/packages/i18n/src/locales/id/template.json
new file mode 100644
index 0000000..04abc9c
--- /dev/null
+++ b/packages/i18n/src/locales/id/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Template",
+      "description": "Hemat 80% waktu yang dihabiskan untuk membuat proyek, item kerja, dan halaman ketika Anda menggunakan template.",
+      "new_project_template": "Template proyek baru",
+      "new_work_item_template": "Template item kerja baru",
+      "new_page_template": "Template halaman baru",
+      "options": {
+        "project": {
+          "label": "Template proyek"
+        },
+        "work_item": {
+          "label": "Template item kerja"
+        },
+        "page": {
+          "label": "Template halaman"
+        }
+      },
+      "create_template": {
+        "label": "Buat template",
+        "no_permission": {
+          "project": "Hubungi admin proyek Anda untuk membuat template",
+          "workspace": "Hubungi admin workspace Anda untuk membuat template"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Gunakan template",
+          "loading": "Menggunakan"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Berasal dari workspace"
+        },
+        "project": {
+          "info": "Berasal dari proyek"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Beri nama template proyek Anda.",
+              "validation": {
+                "required": "Nama template diperlukan",
+                "maxLength": "Nama template harus kurang dari 255 karakter"
+              }
+            },
+            "description": {
+              "placeholder": "Jelaskan kapan dan bagaimana menggunakan template ini."
+            }
+          },
+          "name": {
+            "placeholder": "Beri nama proyek Anda.",
+            "validation": {
+              "required": "Judul proyek diperlukan",
+              "maxLength": "Judul proyek harus kurang dari 255 karakter"
+            }
+          },
+          "description": {
+            "placeholder": "Jelaskan tujuan dan sasaran proyek ini."
+          },
+          "button": {
+            "create": "Buat template proyek",
+            "update": "Perbarui template proyek"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Beri nama template item kerja Anda.",
+              "validation": {
+                "required": "Nama template diperlukan",
+                "maxLength": "Nama template harus kurang dari 255 karakter"
+              }
+            },
+            "description": {
+              "placeholder": "Jelaskan kapan dan bagaimana menggunakan template ini."
+            }
+          },
+          "name": {
+            "placeholder": "Beri judul untuk item kerja ini.",
+            "validation": {
+              "required": "Judul item kerja diperlukan",
+              "maxLength": "Judul item kerja harus kurang dari 255 karakter"
+            }
+          },
+          "description": {
+            "placeholder": "Jelaskan item kerja ini sehingga jelas apa yang akan Anda capai ketika Anda menyelesaikannya."
+          },
+          "button": {
+            "create": "Buat template item kerja",
+            "update": "Perbarui template item kerja"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Beri nama template halaman Anda.",
+              "validation": {
+                "required": "Nama template diperlukan",
+                "maxLength": "Nama template harus kurang dari 255 karakter"
+              }
+            },
+            "description": {
+              "placeholder": "Jelaskan kapan dan bagaimana menggunakan template ini."
+            }
+          },
+          "name": {
+            "placeholder": "Halaman tidak berjudul",
+            "validation": {
+              "maxLength": "Nama halaman harus kurang dari 255 karakter"
+            }
+          },
+          "button": {
+            "create": "Buat template halaman",
+            "update": "Perbarui template halaman"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Pengaturan publikasi} other {Publikasikan ke Marketplace}}",
+          "unpublish_action": "Hapus dari Marketplace",
+          "title": "Buat template Anda dapat dikenali dan ditemukan.",
+          "name": {
+            "label": "Nama template",
+            "placeholder": "Beri nama template Anda",
+            "validation": {
+              "required": "Nama template diperlukan",
+              "maxLength": "Nama template harus kurang dari 255 karakter"
+            }
+          },
+          "short_description": {
+            "label": "Deskripsi singkat",
+            "placeholder": "Template ini cocok untuk Manajer Proyek yang mengelola beberapa proyek sekaligus.",
+            "validation": {
+              "required": "Deskripsi singkat diperlukan"
+            }
+          },
+          "description": {
+            "label": "Deskripsi",
+            "placeholder": "Perbaiki produktivitas dan sederhanakan komunikasi dengan integrasi Speech-To-Text kami.\n• Transkripsi real-time: Konversi kata yang diucapkan menjadi teks yang akurat secara instan.\n• Membuat tugas dan komentar: Tambahkan tugas, deskripsi, dan komentar melalui perintah suara.",
+            "validation": {
+              "required": "Deskripsi diperlukan"
+            }
+          },
+          "category": {
+            "label": "Kategori",
+            "placeholder": "Pilih di mana Anda pikir ini cocok paling baik. Anda dapat memilih lebih dari satu.",
+            "validation": {
+              "required": "Setidaknya satu kategori diperlukan"
+            }
+          },
+          "keywords": {
+            "label": "Kata kunci",
+            "placeholder": "Gunakan istilah yang Anda pikir pengguna akan cari ketika mencari template ini.",
+            "helperText": "Masukkan kata kunci yang dipisahkan dengan koma yang akan membantu orang menemukan ini dari pencarian.",
+            "validation": {
+              "required": "Setidaknya satu kata kunci diperlukan"
+            }
+          },
+          "website": {
+            "label": "URL Website",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "URL tidak valid",
+              "maxLength": "URL harus kurang dari 800 karakter"
+            }
+          },
+          "company_name": {
+            "label": "Nama perusahaan",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Nama perusahaan diperlukan",
+              "maxLength": "Nama perusahaan harus kurang dari 255 karakter"
+            }
+          },
+          "contact_email": {
+            "label": "Email dukungan",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Alamat email tidak valid",
+              "maxLength": "Email dukungan harus kurang dari 255 karakter"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Tautan ke kebijakan privasi Anda",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "URL tidak valid",
+              "maxLength": "URL harus kurang dari 800 karakter"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Tautan ke kebijakan penggunaan Anda",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "URL tidak valid",
+              "maxLength": "URL harus kurang dari 800 karakter"
+            }
+          },
+          "cover_image": {
+            "label": "Tambahkan gambar cover yang akan ditampilkan di marketplace",
+            "upload_title": "Unggah gambar cover",
+            "upload_placeholder": "Klik untuk mengunggah atau seret dan lepas untuk mengunggah gambar cover",
+            "drop_here": "Letakkan di sini",
+            "click_to_upload": "Klik untuk mengunggah",
+            "invalid_file_or_exceeds_size_limit": "File tidak valid atau melebihi batas ukuran. Silakan coba lagi.",
+            "upload_and_save": "Unggah dan simpan",
+            "uploading": "Mengunggah",
+            "remove": "Hapus",
+            "removing": "Menghapus",
+            "validation": {
+              "required": "Gambar cover diperlukan"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Sertakan dokumen dan gambar yang Anda pikir akan membuat pengguna template.",
+            "validation": {
+              "required": "Setidaknya satu screenshot diperlukan"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Template",
+        "description": "Dengan template proyek, item kerja, dan halaman di Plane, Anda tidak perlu membuat proyek dari awal atau mengatur properti item kerja secara manual.",
+        "sub_description": "Dapatkan kembali 80% waktu administrasi Anda saat menggunakan Template."
+      },
+      "no_templates": {
+        "button": "Buat template pertama Anda"
+      },
+      "no_labels": {
+        "description": " Belum ada label. Buat label untuk membantu mengatur dan memfilter item kerja dalam proyek Anda."
+      },
+      "no_modules": {
+        "description": "Belum ada modul. Atur pekerjaan ke dalam sub-proyek dengan pemimpin dan penanggung jawab khusus."
+      },
+      "no_work_items": {
+        "description": "Belum ada item kerja. Tambahkan satu untuk membantu mengatur pekerjaan Anda lebih baik."
+      },
+      "no_sub_work_items": {
+        "description": "Belum ada sub-item kerja. Tambahkan satu untuk membantu mengatur pekerjaan Anda lebih baik."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Tidak ada template yang dapat Anda akses.",
+          "description": "Silakan buat template"
+        },
+        "no_results": {
+          "title": "Itu tidak cocok dengan template.",
+          "description": "Coba cari dengan istilah lain."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Template dibuat",
+          "message": "{templateName}, template {templateType}, sekarang tersedia untuk workspace Anda."
+        },
+        "error": {
+          "title": "Kami tidak dapat membuat template itu kali ini.",
+          "message": "Coba simpan detail Anda lagi atau salin ke template baru, sebaiknya di tab lain."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Template diubah",
+          "message": "{templateName}, template {templateType}, telah diubah."
+        },
+        "error": {
+          "title": "Kami tidak dapat menyimpan perubahan ke template ini.",
+          "message": "Coba simpan detail Anda lagi atau kembali ke template ini nanti. Jika masih ada masalah, hubungi kami."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Template dihapus",
+          "message": "{templateName}, template {templateType}, sekarang telah dihapus dari workspace Anda."
+        },
+        "error": {
+          "title": "Kami tidak dapat menghapus template itu.",
+          "message": "Coba hapus lagi atau kembali nanti. Jika Anda tidak dapat menghapusnya, hubungi kami."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Template dihapus dari publikasi",
+          "message": "{templateName}, template {templateType}, telah dihapus dari publikasi."
+        },
+        "error": {
+          "title": "Kami tidak dapat menghapus template itu dari publikasi.",
+          "message": "Coba hapus dari publikasi lagi atau kembali nanti. Jika Anda tidak dapat menghapusnya dari publikasi, hubungi kami."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Hapus template",
+      "description": {
+        "prefix": "Apakah Anda yakin ingin menghapus template-",
+        "suffix": "? Semua data terkait template akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Hapus template dari publikasi",
+      "description": {
+        "prefix": "Apakah Anda yakin ingin menghapus template-",
+        "suffix": " dari publikasi? Template ini tidak akan lagi tersedia untuk pengguna di marketplace."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Tambah template baru",
+        "project": "Tambah template baru"
+      },
+      "label": {
+        "project": "Pilih template proyek",
+        "page": "Pilih template"
+      },
+      "tooltip": {
+        "work_item": "Pilih template item kerja"
+      },
+      "no_results": {
+        "work_item": "Tidak ada template ditemukan.",
+        "project": "Tidak ada template ditemukan."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/tour.json b/packages/i18n/src/locales/id/tour.json
new file mode 100644
index 0000000..5d83e73
--- /dev/null
+++ b/packages/i18n/src/locales/id/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Selamat datang di ruang kerja Anda",
+        "description": "Untuk membantu Anda memulai, kami telah membuat Proyek Demo untuk Anda. Mari tambahkan item pekerjaan pertama Anda."
+      },
+      "step_one": {
+        "title": "Klik \"+ Tambah item pekerjaan\"",
+        "description": "Mulailah dengan mengklik tombol \"+ Item Pekerjaan Baru\". Anda dapat membuat tugas, bug, atau jenis khusus yang sesuai dengan kebutuhan Anda."
+      },
+      "step_two": {
+        "title": "Filter item pekerjaan Anda",
+        "description": "Gunakan filter untuk mempersempit daftar Anda dengan cepat. Anda dapat memfilter berdasarkan status, prioritas, atau anggota tim. "
+      },
+      "step_three": {
+        "title": "Lihat, kelompokkan, dan urutkan item pekerjaan sesuai kebutuhan.",
+        "description": "Lihat properti yang diperlukan, dan kelompokkan atau urutkan item pekerjaan sesuai kebutuhan Anda."
+      },
+      "step_four": {
+        "title": "Visualisasikan sesuka Anda",
+        "description": "Pilih properti mana yang ingin Anda lihat dalam daftar. Anda juga dapat mengelompokkan dan mengurutkan item pekerjaan dengan cara Anda sendiri."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Buat kemajuan dengan Siklus",
+        "description": "Tekan Q untuk membuat Siklus. Beri nama dan tetapkan tanggal—hanya satu siklus per proyek."
+      },
+      "step_one": {
+        "title": "Buat siklus baru",
+        "description": "Tekan Q untuk membuat Siklus. Beri nama dan tetapkan tanggal—hanya satu siklus per proyek."
+      },
+      "step_two": {
+        "title": "Klik \"+\"",
+        "description": "Mulailah dengan mengklik tombol \"+\". Tambahkan item pekerjaan baru atau yang sudah ada langsung dari halaman Siklus."
+      },
+      "step_three": {
+        "title": "Ringkasan siklus",
+        "description": "Lacak kemajuan siklus, produktivitas tim, dan prioritas—dan selidiki jika ada yang tertinggal."
+      },
+      "step_four": {
+        "title": "Transfer item pekerjaan",
+        "description": "Setelah tanggal jatuh tempo, siklus selesai secara otomatis. Pindahkan pekerjaan yang belum selesai ke siklus lain."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Bagi proyek Anda menjadi Modul",
+        "description": "Modul adalah proyek yang lebih kecil dan terfokus yang membantu pengguna mengelompokkan dan mengorganisir item pekerjaan dalam jangka waktu tertentu."
+      },
+      "step_one": {
+        "title": "Buat Modul",
+        "description": "Modul adalah proyek yang lebih kecil dan terfokus yang membantu pengguna mengelompokkan dan mengorganisir item pekerjaan dalam jangka waktu tertentu."
+      },
+      "step_two": {
+        "title": "Klik \"+\"",
+        "description": "Mulailah dengan mengklik tombol \"+\". Tambahkan item pekerjaan baru atau yang sudah ada langsung dari halaman Modul."
+      },
+      "step_three": {
+        "title": "Status modul",
+        "description": "Modul menggunakan status ini untuk membantu pengguna merencanakan dan melacak kemajuan serta tahapan dengan jelas."
+      },
+      "step_four": {
+        "title": "Kemajuan modul",
+        "description": "Kemajuan modul dilacak melalui item yang diselesaikan, dengan analitik untuk memantau kinerja."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Dokumentasikan dengan Halaman bertenaga AI",
+        "description": "Halaman di Plane memungkinkan Anda menangkap, mengorganisir, dan berkolaborasi pada info proyek—tanpa alat eksternal."
+      },
+      "step_one": {
+        "title": "Jadikan halaman Publik atau Privat",
+        "description": "Halaman dapat diatur sebagai publik, terlihat oleh semua orang di ruang kerja Anda, atau privat, hanya dapat diakses oleh Anda."
+      },
+      "step_two": {
+        "title": "Gunakan perintah /",
+        "description": "Gunakan / pada halaman untuk menambahkan konten dari 16 jenis blok, termasuk daftar, gambar, tabel, dan embed."
+      },
+      "step_three": {
+        "title": "Tindakan halaman",
+        "description": "Setelah halaman Anda dibuat, Anda dapat mengklik menu ••• di sudut kanan atas untuk melakukan tindakan berikut."
+      },
+      "step_four": {
+        "title": "Daftar isi",
+        "description": "Dapatkan tampilan menyeluruh halaman Anda dengan mengklik ikon panel untuk melihat semua judul."
+      },
+      "step_five": {
+        "title": "Riwayat versi",
+        "description": "Halaman melacak semua edit dengan riwayat versi, memungkinkan Anda memulihkan versi sebelumnya jika diperlukan."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Sederhanakan permintaan dengan intake",
+        "description": "Fitur eksklusif Plane yang memungkinkan Tamu membuat item pekerjaan untuk bug, permintaan, atau tiket."
+      },
+      "step_one": {
+        "title": "Permintaan intake terbuka/tertutup",
+        "description": "Permintaan yang tertunda tetap di tab Terbuka, dan setelah ditangani oleh admin atau anggota, mereka pindah ke Tertutup."
+      },
+      "step_two": {
+        "title": "Terima/tolak permintaan yang tertunda",
+        "description": "Terima untuk mengedit dan memindahkan item pekerjaan ke proyek Anda, atau tolak untuk menandainya sebagai Dibatalkan."
+      },
+      "step_three": {
+        "title": "Tunda untuk sekarang",
+        "description": "Item pekerjaan dapat ditunda untuk ditinjau di lain waktu. Ini akan dipindahkan ke bagian bawah daftar permintaan terbuka Anda."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Berhenti berpindah tab. Hubungkan dunia Anda.",
+        "description": "Tautkan GitHub, Slack untuk melacak PR dan meringkas obrolan langsung di Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigasi, dibayangkan ulang",
+        "sub_title": "Ruang kerja Anda sekarang lebih mudah dijelajahi dengan navigasi yang lebih cerdas dan disederhanakan.",
+        "highlight_1": "Struktur panel kiri yang disederhanakan untuk penemuan lebih cepat",
+        "highlight_2": "Pencarian global yang ditingkatkan untuk melompat ke apa pun secara instan",
+        "highlight_3": "Pengelompokan kategori yang lebih cerdas untuk kejelasan dan fokus",
+        "footer": "Ingin panduan singkat?"
+      },
+      "step_zero": {
+        "title": "Temukan apa pun secara instan",
+        "description": "Gunakan pencarian universal untuk melompat ke tugas, proyek, halaman, dan orang—tanpa meninggalkan alur Anda."
+      },
+      "step_one": {
+        "title": "Tetap kendalikan pembaruan",
+        "description": "Kotak masuk Anda menyimpan semua sebutan, persetujuan, dan aktivitas di satu tempat, sehingga Anda tidak pernah melewatkan pekerjaan penting."
+      },
+      "step_two": {
+        "title": "Personalisasi Navigasi Anda",
+        "description": "Sesuaikan apa yang Anda lihat dan cara Anda bernavigasi di Preferensi."
+      }
+    },
+    "actions": {
+      "close": "Tutup",
+      "next": "Berikutnya",
+      "back": "Kembali",
+      "done": "Selesai",
+      "take_a_tour": "Ikuti tur",
+      "get_started": "Mulai",
+      "got_it": "Mengerti"
+    },
+    "seed_data": {
+      "title": "Ini adalah proyek demo Anda",
+      "description": "Proyek memungkinkan Anda mengelola tim, tugas, dan segala yang Anda butuhkan untuk menyelesaikan pekerjaan di ruang kerja Anda."
+    }
+  },
+  "get_started": {
+    "title": "Hai {name}, selamat datang!",
+    "description": "Inilah semua yang Anda butuhkan untuk memulai perjalanan Anda dengan Plane.",
+    "checklist_section": {
+      "title": "Mulai",
+      "description": "Mulai pengaturan Anda dan lihat ide Anda terwujud lebih cepat.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Buat proyek"
+        },
+        "item_2": {
+          "title": "Buat item pekerjaan"
+        },
+        "item_3": {
+          "title": "Undang anggota tim"
+        },
+        "item_4": {
+          "title": "Buat halaman"
+        },
+        "item_5": {
+          "title": "Coba obrolan Plane AI"
+        },
+        "item_6": {
+          "title": "Tautkan Integrasi"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Undang tim Anda",
+      "description": "Undang rekan tim dan mulai membangun bersama."
+    },
+    "integrations_section": {
+      "title": "Tingkatkan ruang kerja Anda",
+      "more_integrations": "Jelajahi lebih banyak integrasi"
+    },
+    "switch_to_plane_section": {
+      "title": "Temukan mengapa tim beralih ke Plane",
+      "description": "Bandingkan Plane dengan alat yang Anda gunakan hari ini dan lihat perbedaannya."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/update.json b/packages/i18n/src/locales/id/update.json
new file mode 100644
index 0000000..f8883ae
--- /dev/null
+++ b/packages/i18n/src/locales/id/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Progres",
+      "since_last_update": "Sejak update terakhir",
+      "comments": "{count, plural, one{# komentar} other{# komentar}}"
+    },
+    "add_update": "Tambahkan update",
+    "add_update_placeholder": "Tambahkan update Anda di sini",
+    "empty": {
+      "title": "Belum ada update",
+      "description": "Anda dapat melihat update di sini."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reaksi berhasil dibuat",
+          "message": "Reaksi berhasil dibuat."
+        },
+        "error": {
+          "title": "Reaksi tidak berhasil dibuat",
+          "message": "Reaksi tidak berhasil dibuat."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reaksi berhasil dihapus",
+          "message": "Reaksi berhasil dihapus."
+        },
+        "error": {
+          "title": "Reaksi tidak berhasil dihapus",
+          "message": "Reaksi tidak berhasil dihapus."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Update berhasil dibuat",
+        "message": "Update berhasil dibuat."
+      },
+      "error": {
+        "title": "Update tidak berhasil dibuat",
+        "message": "Update tidak berhasil dibuat."
+      }
+    },
+    "delete": {
+      "title": "Hapus update",
+      "confirmation": "Apakah Anda yakin ingin menghapus update ini? Aksi ini tidak dapat dibatalkan.",
+      "success": {
+        "title": "Update berhasil dihapus",
+        "message": "Update berhasil dihapus."
+      },
+      "error": {
+        "title": "Update tidak berhasil dihapus",
+        "message": "Update tidak berhasil dihapus."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Update berhasil diperbarui",
+        "message": "Update berhasil diperbarui."
+      },
+      "error": {
+        "title": "Update tidak berhasil diperbarui",
+        "message": "Update tidak berhasil diperbarui."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/wiki.json b/packages/i18n/src/locales/id/wiki.json
new file mode 100644
index 0000000..5cf448f
--- /dev/null
+++ b/packages/i18n/src/locales/id/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Umum",
+      "private": "Pribadi",
+      "shared": "Dibagikan",
+      "archived": "Diarsipkan"
+    },
+    "fallback_name": "Koleksi",
+    "form": {
+      "name_required": "Judul koleksi wajib diisi",
+      "name_max_length": "Nama koleksi harus kurang dari 255 karakter",
+      "name_placeholder_create": "Beri judul untuk koleksi",
+      "name_placeholder_edit": "Nama koleksi"
+    },
+    "create_modal": {
+      "title": "Buat koleksi",
+      "submit": "Buat koleksi"
+    },
+    "edit_modal": {
+      "title": "Edit koleksi"
+    },
+    "delete_modal": {
+      "title": "Hapus koleksi",
+      "page_count": "Koleksi ini memiliki {pageCount} halaman. Pilih apa yang akan terjadi pada halaman tersebut.",
+      "transfer_title": "Pindahkan halaman dan hapus koleksi",
+      "transfer_description": "Pindahkan semua halaman ke koleksi lain sebelum menghapus. Halaman dan izinnya akan tetap dipertahankan.",
+      "transfer_warning": "Halaman yang dipindahkan akan mewarisi izin dari koleksi yang dipilih.",
+      "transfer_target_label": "Pindahkan halaman ke",
+      "transfer_target_placeholder": "Pilih koleksi",
+      "delete_with_pages_title": "Hapus koleksi beserta halamannya",
+      "delete_with_pages_description": "Hapus koleksi dan semua halamannya secara permanen. Tindakan ini tidak dapat dibatalkan.",
+      "submit": "Hapus koleksi"
+    },
+    "header": {
+      "add_page": "Tambah halaman"
+    },
+    "menu": {
+      "create_new_page": "Buat halaman baru",
+      "add_existing_page": "Tambah halaman yang sudah ada",
+      "edit_collection": "Edit koleksi",
+      "collection_options": "Opsi koleksi"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Cari halaman",
+      "success_message": "{count} halaman ditambahkan ke koleksi.",
+      "error_message": "Halaman tidak dapat dipindahkan. Silakan coba lagi.",
+      "no_pages_found": "Tidak ada halaman yang cocok dengan pencarian Anda",
+      "no_pages_available": "Tidak ada halaman yang tersedia untuk dipindahkan",
+      "submit": "Pindahkan"
+    },
+    "list": {
+      "invite_only": "Hanya undangan",
+      "remove_error": "Halaman tidak dapat dihapus dari koleksi.",
+      "no_matching_pages": "Tidak ada halaman yang cocok",
+      "remove_search_criteria": "Hapus kriteria pencarian untuk melihat semua halaman",
+      "remove_filters": "Hapus filter untuk melihat semua halaman",
+      "no_pages_title": "Belum ada halaman",
+      "no_pages_description": "Koleksi ini belum memiliki halaman.",
+      "untitled": "Tanpa judul",
+      "restricted_access": "Akses terbatas",
+      "collapse_page": "Ciutkan halaman",
+      "expand_page": "Bentangkan halaman",
+      "page_actions": "Aksi halaman",
+      "page_link_copied": "Tautan halaman disalin ke clipboard.",
+      "columns": {
+        "page_name": "Nama halaman",
+        "owner": "Pemilik",
+        "nested_pages": "Halaman bertingkat",
+        "last_activity": "Aktivitas terakhir",
+        "actions": "Aksi"
+      }
+    },
+    "toasts": {
+      "created": "Koleksi berhasil dibuat.",
+      "create_error": "Koleksi tidak dapat dibuat. Silakan coba lagi.",
+      "renamed": "Nama koleksi berhasil diubah.",
+      "rename_error": "Koleksi tidak dapat diperbarui. Silakan coba lagi.",
+      "transferred_deleted": "Halaman dipindahkan dan koleksi dihapus.",
+      "deleted_with_pages": "Koleksi dan halamannya dihapus.",
+      "delete_error": "Koleksi tidak dapat dihapus. Silakan coba lagi.",
+      "target_required": "Silakan pilih koleksi tujuan untuk memindahkan halaman.",
+      "create_page_error": "Halaman tidak dapat dibuat. Silakan coba lagi.",
+      "create_page_in_collection_error": "Halaman tidak dapat dibuat atau ditambahkan ke koleksi. Silakan coba lagi.",
+      "collection_link_copied": "Tautan koleksi disalin ke clipboard."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Tingkatkan untuk membuka Wiki",
+      "description": "Buka halaman publik, riwayat versi, halaman yang dibagikan, kolaborasi real-time, dan halaman ruang kerja untuk wiki, dokumen seluruh perusahaan, dan basis pengetahuan dengan Plane Pro.",
+      "upgrade_button": {
+        "text": "Tingkatkan"
+      },
+      "learn_more_button": {
+        "text": "Pelajari lebih lanjut"
+      },
+      "download_button": {
+        "text": "Unduh data",
+        "loading": "Mengunduh"
+      },
+      "tabs": {
+        "nested_pages": "Halaman Bertingkat",
+        "add_embeds": "Tambah embed",
+        "publish_pages": "Publikasikan halaman",
+        "comments": "Komentar"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Halaman bertingkat memerlukan paket berbayar. Tingkatkan untuk membukanya."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/work-item-type.json b/packages/i18n/src/locales/id/work-item-type.json
new file mode 100644
index 0000000..22411b6
--- /dev/null
+++ b/packages/i18n/src/locales/id/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Tipe Item Kerja",
+    "label_lowercase": "tipe item kerja",
+    "settings": {
+      "description": "Sesuaikan dan tambahkan properti Anda sendiri untuk menyesuaikannya dengan kebutuhan tim Anda.",
+      "cant_delete_default_message": "Jenis item kerja ini tidak dapat dihapus karena diatur sebagai default untuk proyek ini.",
+      "set_as_default": "Atur sebagai default",
+      "cant_set_default_inactive_message": "Aktifkan tipe ini sebelum mengaturnya sebagai default",
+      "set_default_confirmation": {
+        "title": "Atur sebagai tipe item kerja default",
+        "description": "Mengatur {name} sebagai default akan mengimpornya ke semua proyek di ruang kerja ini. Semua item kerja baru akan menggunakan tipe ini secara default.",
+        "confirm_button": "Atur sebagai default"
+      },
+      "properties": {
+        "title": "Properti kustom",
+        "description": "Buat dan sesuaikan properti.",
+        "tooltip": "Setiap tipe item kerja dilengkapi dengan serangkaian properti default seperti Judul, Deskripsi, Penerima tugas, Status, Prioritas, Tanggal mulai, Tanggal jatuh tempo, Modul, Siklus, dll. Anda juga dapat menyesuaikan dan menambahkan properti Anda sendiri untuk menyesuaikannya dengan kebutuhan tim Anda.",
+        "add_button": "Tambah properti baru",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Impor dari ruang kerja"
+          }
+        },
+        "dropdown": {
+          "label": "Tipe properti",
+          "placeholder": "Pilih tipe"
+        },
+        "property_type": {
+          "text": {
+            "label": "Teks"
+          },
+          "number": {
+            "label": "Angka"
+          },
+          "dropdown": {
+            "label": "Dropdown"
+          },
+          "boolean": {
+            "label": "Boolean"
+          },
+          "date": {
+            "label": "Tanggal"
+          },
+          "member_picker": {
+            "label": "Pemilih anggota"
+          },
+          "formula": {
+            "label": "Rumus"
+          }
+        },
+        "attributes": {
+          "label": "Atribut",
+          "text": {
+            "single_line": {
+              "label": "Baris tunggal"
+            },
+            "multi_line": {
+              "label": "Paragraf"
+            },
+            "readonly": {
+              "label": "Hanya baca",
+              "header": "Data hanya baca"
+            },
+            "invalid_text_format": {
+              "label": "Format teks tidak valid"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Tambah angka"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Pilihan tunggal"
+            },
+            "multi_select": {
+              "label": "Pilihan ganda"
+            },
+            "no_default_value": {
+              "label": "Tidak ada nilai default"
+            }
+          },
+          "boolean": {
+            "label": "Benar | Salah",
+            "no_default": "Tidak ada nilai default"
+          },
+          "option": {
+            "create_update": {
+              "label": "Opsi",
+              "form": {
+                "placeholder": "Tambah opsi",
+                "errors": {
+                  "name": {
+                    "required": "Nama opsi diperlukan.",
+                    "integrity": "Opsi dengan nama yang sama sudah ada."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Pilih opsi",
+                "multi": {
+                  "default": "Pilih opsi",
+                  "variable": "{count} opsi dipilih"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Berhasil!",
+              "message": "Properti {name} berhasil dibuat."
+            },
+            "error": {
+              "title": "Kesalahan!",
+              "message": "Gagal membuat properti. Silakan coba lagi!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Berhasil!",
+              "message": "Properti {name} berhasil diperbarui."
+            },
+            "error": {
+              "title": "Kesalahan!",
+              "message": "Gagal memperbarui properti. Silakan coba lagi!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Berhasil!",
+              "message": "Properti {name} berhasil dihapus."
+            },
+            "error": {
+              "title": "Kesalahan!",
+              "message": "Gagal menghapus properti. Silakan coba lagi!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} properti {name}",
+            "success": {
+              "title": "Berhasil!",
+              "message": "Properti {name} berhasil {action}."
+            },
+            "error": {
+              "title": "Kesalahan!",
+              "message": "Gagal {action} properti. Silakan coba lagi!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Buat properti kustom baru",
+            "update": "Perbarui properti kustom"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Judul"
+            },
+            "description": {
+              "placeholder": "Deskripsi"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Anda harus memberi nama properti Anda.",
+              "max_length": "Nama properti tidak boleh melebihi 255 karakter."
+            },
+            "property_type": {
+              "required": "Anda harus memilih tipe properti."
+            },
+            "options": {
+              "required": "Anda harus menambahkan setidaknya satu opsi."
+            },
+            "formula": {
+              "required": "Ekspresi rumus diperlukan.",
+              "invalid": "Rumus tidak valid: {error}",
+              "circular_reference": "Referensi melingkar terdeteksi. Rumus tidak dapat mereferensikan dirinya sendiri secara langsung maupun tidak langsung.",
+              "invalid_reference": "Rumus mereferensikan properti yang tidak ada."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Kolom rumus",
+          "tooltip": "Masukkan rumus menggunakan sintaks '{'Nama Kolom'}'. Mendukung operator +, -, *, / dan &.",
+          "placeholder": "Tulis rumus",
+          "test_button": "Tes",
+          "validating": "Memvalidasi",
+          "validation_success": "Rumus valid! Mengembalikan {resultType}",
+          "validation_success_with_refs": "Rumus valid! Mengembalikan {resultType} ({count} kolom direferensikan)",
+          "error": {
+            "empty": "Silakan masukkan rumus",
+            "missing_context": "Konteks ruang kerja, proyek, atau tipe item kerja tidak ditemukan",
+            "validation_failed": "Validasi gagal"
+          },
+          "picker": {
+            "no_match": "Tidak ada properti yang cocok",
+            "no_available": "Tidak ada properti yang tersedia"
+          }
+        },
+        "enable_disable": {
+          "label": "Aktif",
+          "tooltip": {
+            "disabled": "Klik untuk menonaktifkan",
+            "enabled": "Klik untuk mengaktifkan"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Hapus properti ini",
+          "description": "Penghapusan properti dapat menyebabkan hilangnya data yang ada.",
+          "secondary_description": "Apakah Anda ingin menonaktifkan properti sebagai gantinya?",
+          "primary_button": "{action}, hapus itu",
+          "secondary_button": "Ya, nonaktifkan itu"
+        },
+        "mandate_confirmation": {
+          "label": "Properti wajib",
+          "content": "Sepertinya ada opsi default untuk properti ini. Membuat properti menjadi wajib akan menghapus nilai default dan pengguna harus menambahkan nilai pilihan mereka.",
+          "tooltip": {
+            "disabled": "Tipe properti ini tidak dapat dijadikan wajib",
+            "enabled": "Hapus centang untuk menandai kolom sebagai opsional",
+            "checked": "Centang untuk menandai kolom sebagai wajib"
+          }
+        },
+        "empty_state": {
+          "title": "Tambahkan properti kustom",
+          "description": "Properti baru yang Anda tambahkan untuk tipe item kerja ini akan ditampilkan di sini."
+        }
+      },
+      "types": {
+        "title": "Tipe",
+        "description": "Buat dan sesuaikan tipe item kerja dengan properti.",
+        "sort_options": {
+          "project_count": "Jumlah proyek yang menjadi bagian"
+        },
+        "filter_options": {
+          "show_active": "Tampilkan aktif",
+          "show_inactive": "Tampilkan tidak aktif"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Buat baru",
+            "import_from_workspace": "Impor dari ruang kerja"
+          },
+          "banner": {
+            "with_access": "Aktifkan tipe item kerja untuk mengimpor tipe dari level ruang kerja",
+            "without_access": "Tipe item kerja dinonaktifkan. Hubungi admin ruang kerja untuk mengaktifkannya di pengaturan ruang kerja."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Properti kustom",
+        "add_button": "Tambah properti",
+        "modal": {
+          "title": "Tambah properti",
+          "empty": {
+            "title": "Tidak ada properti tersedia",
+            "description": "Semua properti telah ditautkan ke tipe ini."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Lepas tautan properti",
+          "description": "Melepas tautan properti ini akan menghapus secara permanen semua nilainya di setiap item kerja yang menggunakan tipe ini. Tindakan ini tidak dapat dibatalkan.",
+          "input_label": "Ketik",
+          "input_label_suffix": "untuk melanjutkan:",
+          "confirm": "Lepas tautan properti",
+          "loading": "Melepas tautan"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Hapus jenis ini",
+        "description": "Penghapusan tipe dapat menyebabkan hilangnya data yang ada.",
+        "can_disable_warning": "Apakah Anda ingin menonaktifkan jenisnya saja?",
+        "primary_button": "Ya, hapus",
+        "toast": {
+          "success": {
+            "title": "Berhasil!",
+            "message": "Jenis item kerja berhasil dihapus."
+          },
+          "error": {
+            "title": "Kesalahan!",
+            "message": "Gagal menghapus jenis item kerja. Silakan coba lagi!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Tidak dapat menghapus jenis item kerja default",
+          "cannot_delete_work_item_type_with_associated_work_items": "Tidak dapat menghapus jenis item kerja yang memiliki item kerja terkait"
+        }
+      }
+    },
+    "create": {
+      "title": "Buat tipe item kerja",
+      "button": "Tambah tipe item kerja",
+      "toast": {
+        "success": {
+          "title": "Berhasil!",
+          "message": "Tipe item kerja berhasil dibuat."
+        },
+        "error": {
+          "title": "Kesalahan!",
+          "message": {
+            "default": "Gagal membuat tipe item kerja. Silakan coba lagi!",
+            "conflict": "Tipe {name} sudah ada. Pilih nama lain."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Perbarui tipe item kerja",
+      "button": "Perbarui tipe item kerja",
+      "toast": {
+        "success": {
+          "title": "Berhasil!",
+          "message": "Tipe item kerja {name} berhasil diperbarui."
+        },
+        "error": {
+          "title": "Kesalahan!",
+          "message": {
+            "default": "Gagal memperbarui tipe item kerja. Silakan coba lagi!",
+            "conflict": "Tipe {name} sudah ada. Pilih nama lain."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Berikan nama unik untuk tipe item kerja ini"
+        },
+        "description": {
+          "placeholder": "Jelaskan untuk apa tipe item kerja ini dimaksudkan dan kapan akan digunakan."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} tipe item kerja {name}",
+        "success": {
+          "title": "Berhasil!",
+          "message": "Tipe item kerja {name} berhasil {action}."
+        },
+        "error": {
+          "title": "Kesalahan!",
+          "message": "Gagal {action} tipe item kerja. Silakan coba lagi!"
+        }
+      },
+      "tooltip": "Klik untuk {action}"
+    },
+    "change_confirmation": {
+      "title": "Ubah tipe item kerja?",
+      "description": "Mengubah tipe item kerja dapat mengakibatkan hilangnya nilai properti kustom yang spesifik untuk tipe saat ini. Tindakan ini tidak dapat dibatalkan.",
+      "button": {
+        "loading": "Mengubah",
+        "default": "Ubah tipe"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Aktifkan Tipe Item Kerja",
+        "description": "Bentuk item kerja sesuai dengan pekerjaan Anda dengan Tipe item kerja. Sesuaikan dengan ikon, latar belakang, dan properti dan konfigurasikan untuk proyek ini.",
+        "primary_button": {
+          "text": "Aktifkan"
+        },
+        "confirmation": {
+          "title": "Setelah diaktifkan, Tipe Item Kerja tidak dapat dinonaktifkan.",
+          "description": "Item Kerja Plane akan menjadi tipe item kerja default untuk proyek ini dan akan muncul dengan ikon dan latar belakangnya di proyek ini.",
+          "button": {
+            "default": "Aktifkan",
+            "loading": "Menyiapkan"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Dapatkan Pro untuk mengaktifkan Tipe item kerja.",
+        "description": "Bentuk item kerja sesuai dengan pekerjaan Anda dengan Tipe item kerja. Sesuaikan dengan ikon, latar belakang, dan properti dan konfigurasikan untuk proyek ini.",
+        "primary_button": {
+          "text": "Dapatkan Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Tingkatkan untuk mengaktifkan Tipe item kerja.",
+        "description": "Bentuk item kerja sesuai dengan pekerjaan Anda dengan Tipe item kerja. Sesuaikan dengan ikon, latar belakang, dan properti dan konfigurasikan untuk proyek ini.",
+        "primary_button": {
+          "text": "Tingkatkan"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hierarki",
+      "tab_label": "Hierarki",
+      "description": "Atur tingkat hierarki untuk mengorganisir pekerjaan Anda. Setiap tingkat mendefinisikan hubungan induk dengan item langsung di atasnya dan hubungan anak dengan item langsung di bawahnya. ",
+      "sidebar_label": "Hierarki",
+      "enable_control": {
+        "title": "Aktifkan hierarki",
+        "description": "Buat hubungan induk-anak antara berbagai jenis item pekerjaan.",
+        "tooltip": "Anda tidak dapat menonaktifkan hierarki setelah diaktifkan."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Tentukan Jenis Item Pekerjaan terlebih dahulu untuk membuat hierarki baru.",
+        "cta": "Pengaturan jenis item pekerjaan"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Seret dan lepas jenis untuk menambahkan tingkat hierarki baru",
+      "empty_level_placeholder": "Seret dan lepas jenis item pekerjaan ke tingkat {level}",
+      "drag_tooltip": "Seret untuk mengubah tingkat",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Tetapkan sebagai default",
+          "toast": {
+            "loading": "Menetapkan sebagai default...",
+            "success": {
+              "title": "Berhasil!",
+              "message": "Tingkat hierarki {level} berhasil ditetapkan sebagai default."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Gagal menetapkan tingkat hierarki {level} sebagai default. Silakan coba lagi."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Memindahkan {workItemTypeName} ke tingkat {level}...",
+        "success": {
+          "title": "Berhasil!",
+          "message": "{workItemTypeName} berhasil dipindahkan ke tingkat {level}."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Menyimpan akan memutus tautan yang ada",
+      "content": {
+        "intro": "Jenis item pekerjaan {workItemTypeName} memiliki:",
+        "parent_items": "{count, plural, other {# tautan induk akan dihapus}}.",
+        "child_items": "{count, plural, other {sub-item pekerjaan}}",
+        "parent_line_suffix_when_also_children": ", dan ",
+        "footer": "Perubahan ini akan menghapus hubungan induk-anak dari item pekerjaan yang ada dengan jenis {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Ketik \"konfirmasi\" untuk melanjutkan.",
+        "placeholder": "konfirmasi"
+      },
+      "error_toast": {
+        "title": "Kesalahan!",
+        "message": "Gagal melepaskan tautan dan menyimpan. Silakan coba lagi."
+      },
+      "confirm_button": {
+        "loading": "Menyimpan",
+        "default": "Simpan tetap"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Kesalahan!",
+        "message": "Jenis item pekerjaan yang dipilih tidak dapat digunakan untuk membuat item pekerjaan baru karena melanggar aturan hierarki."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Kesalahan!",
+        "message": "Jenis item pekerjaan tidak dapat diperbarui karena melanggar aturan hierarki."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Tingkat hierarki",
+      "invalid_level_toast": {
+        "title": "Kesalahan!",
+        "message": "Jenis item kerja tidak dapat diperbarui karena melanggar aturan hierarki."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/work-item.json b/packages/i18n/src/locales/id/work-item.json
new file mode 100644
index 0000000..0e2abac
--- /dev/null
+++ b/packages/i18n/src/locales/id/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Item Kerja} other {Item Kerja}}",
+    "all": "Semua Item Kerja",
+    "edit": "Edit item kerja",
+    "title": {
+      "label": "Judul item kerja",
+      "required": "Judul item kerja diperlukan."
+    },
+    "add": {
+      "press_enter": "Tekan 'Enter' untuk menambahkan item kerja lainnya",
+      "label": "Tambah item kerja",
+      "cycle": {
+        "failed": "Item kerja tidak dapat ditambahkan ke siklus. Silakan coba lagi.",
+        "success": "{count, plural, one {Item Kerja} other {Item Kerja}} berhasil ditambahkan ke siklus.",
+        "loading": "Menambahkan {count, plural, one {item kerja} other {item kerja}} ke siklus"
+      },
+      "assignee": "Tambah penugasan",
+      "start_date": "Tambah tanggal mulai",
+      "due_date": "Tambah tanggal jatuh tempo",
+      "parent": "Tambah item kerja induk",
+      "sub_issue": "Tambah sub-item kerja",
+      "dependency": "Tambah ketergantungan",
+      "relation": "Tambah hubungan",
+      "link": "Tambah tautan",
+      "existing": "Tambah item kerja yang ada"
+    },
+    "remove": {
+      "label": "Hapus item kerja",
+      "cycle": {
+        "loading": "Menghapus item kerja dari siklus",
+        "success": "Item kerja berhasil dihapus dari siklus.",
+        "failed": "Item kerja tidak dapat dihapus dari siklus. Silakan coba lagi."
+      },
+      "module": {
+        "loading": "Menghapus item kerja dari modul",
+        "success": "Item kerja berhasil dihapus dari modul.",
+        "failed": "Item kerja tidak dapat dihapus dari modul. Silakan coba lagi."
+      },
+      "parent": {
+        "label": "Hapus item kerja induk"
+      }
+    },
+    "new": "Item Kerja Baru",
+    "adding": "Menambahkan item kerja",
+    "create": {
+      "success": "Item kerja berhasil dibuat"
+    },
+    "priority": {
+      "urgent": "Mendesak",
+      "high": "Tinggi",
+      "medium": "Sedang",
+      "low": "Rendah"
+    },
+    "display": {
+      "properties": {
+        "label": "Tampilkan Properti",
+        "id": "ID",
+        "issue_type": "Tipe item kerja",
+        "sub_issue_count": "Jumlah sub-item kerja",
+        "attachment_count": "Jumlah lampiran",
+        "created_on": "Dibuat pada",
+        "sub_issue": "Sub-item kerja",
+        "work_item_count": "Jumlah item kerja"
+      },
+      "extra": {
+        "show_sub_issues": "Tampilkan sub-item kerja",
+        "show_empty_groups": "Tampilkan grup kosong"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Tata letak ini diurutkan berdasarkan",
+      "list": "Daftar",
+      "kanban": "Papan",
+      "calendar": "Kalender",
+      "spreadsheet": "Tabel",
+      "gantt": "Garis Waktu",
+      "title": {
+        "list": "Tata Letak Daftar",
+        "kanban": "Tata Letak Papan",
+        "calendar": "Tata Letak Kalender",
+        "spreadsheet": "Tata Letak Tabel",
+        "gantt": "Tata Letak Garis Waktu"
+      }
+    },
+    "states": {
+      "active": "Aktif",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Tambah komentar",
+      "switch": {
+        "private": "Beralih ke komentar pribadi",
+        "public": "Beralih ke komentar publik"
+      },
+      "create": {
+        "success": "Komentar berhasil dibuat",
+        "error": "Gagal membuat komentar. Silakan coba lagi nanti."
+      },
+      "update": {
+        "success": "Komentar berhasil diperbarui",
+        "error": "Gagal memperbarui komentar. Silakan coba lagi nanti."
+      },
+      "remove": {
+        "success": "Komentar berhasil dihapus",
+        "error": "Gagal menghapus komentar. Silakan coba lagi nanti."
+      },
+      "upload": {
+        "error": "Gagal mengunggah aset. Silakan coba lagi nanti."
+      },
+      "copy_link": {
+        "success": "Tautan komentar berhasil disalin ke clipboard",
+        "error": "Gagal menyalin tautan komentar. Silakan coba lagi nanti."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Tambah balasan",
+          "placeholder": "Tambah balasan"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Gagal mengambil balasan"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Balasan berhasil dibuat"
+            },
+            "error": {
+              "message": "Gagal membuat balasan"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Balasan berhasil diperbarui"
+            },
+            "error": {
+              "message": "Gagal memperbarui balasan"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Balasan berhasil dihapus"
+            },
+            "error": {
+              "message": "Gagal menghapus balasan"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Item kerja tidak ada",
+        "description": "Item kerja yang Anda cari tidak ada, telah diarsipkan, atau telah dihapus.",
+        "primary_button": {
+          "text": "Lihat item kerja lainnya"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Item kerja sejawat"
+    },
+    "archive": {
+      "description": "Hanya item kerja yang selesai atau dibatalkan\n yang dapat diarsipkan",
+      "label": "Arsip Item kerja",
+      "confirm_message": "Apakah Anda yakin ingin mengarsipkan item kerja ini? Semua item kerja yang diarsipkan dapat dipulihkan nanti.",
+      "success": {
+        "label": "Sukses mengarsipkan",
+        "message": "Arsip Anda dapat ditemukan di arsip proyek."
+      },
+      "failed": {
+        "message": "Item kerja tidak dapat diarsipkan. Silakan coba lagi."
+      },
+      "banner_message": "Item kerja ini telah diarsipkan. Kunjungi bagian Arsip untuk memulihkannya.",
+      "go_to_archives": "Buka arsip"
+    },
+    "restore": {
+      "success": {
+        "title": "Sukses memulihkan",
+        "message": "Item kerja Anda dapat ditemukan di item kerja proyek."
+      },
+      "failed": {
+        "message": "Item kerja tidak dapat dipulihkan. Silakan coba lagi."
+      }
+    },
+    "relation": {
+      "relates_to": "Berhubungan dengan",
+      "duplicate": "Duplikat dari",
+      "blocked_by": "Diblokir oleh",
+      "blocking": "Memblokir",
+      "start_before": "Mulai Sebelum",
+      "start_after": "Mulai Setelah",
+      "finish_before": "Selesai Sebelum",
+      "finish_after": "Selesai Setelah",
+      "implements": "Menerapkan",
+      "implemented_by": "Diterapkan oleh"
+    },
+    "copy_link": "Salin tautan item kerja",
+    "delete": {
+      "label": "Hapus item kerja",
+      "error": "Kesalahan saat menghapus item kerja"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Item kerja telah berhasil disubscribe",
+        "unsubscribed": "Item kerja telah berhasil dibatalkan subscribe"
+      }
+    },
+    "select": {
+      "error": "Silakan pilih setidaknya satu item kerja",
+      "empty": "Tidak ada item kerja yang dipilih",
+      "add_selected": "Tambah item kerja yang dipilih",
+      "select_all": "Pilih semua item kerja",
+      "deselect_all": "Batalkan pilihan semua item kerja"
+    },
+    "open_in_full_screen": "Buka item kerja dalam layar penuh",
+    "duplicate": {
+      "modal": {
+        "title": "Buat salinan ke proyek lain",
+        "description1": "Ini membuat salinan item kerja.",
+        "description2": "Semua data properti akan dihapus saat menduplikasi.",
+        "placeholder": "Pilih proyek"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Item kerja berhasil diduplikasi"
+        },
+        "error": {
+          "message": "Gagal menduplikasi item kerja"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Hubungkan halaman",
+      "show_wiki_pages": "Tampilkan halaman Wiki",
+      "link_pages_to": "Hubungkan halaman ke",
+      "linked_pages": "Halaman yang terhubung",
+      "no_description": "Ini adalah halaman kosong. Mengapa tidak menulis sesuatu di dalamnya dan melihatnya muncul di sini seperti placeholder ini",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Halaman diperbarui",
+            "message": "Halaman berhasil diperbarui"
+          },
+          "error": {
+            "title": "Pembaruan halaman gagal",
+            "message": "Pembaruan halaman gagal"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Halaman dihapus",
+            "message": "Halaman berhasil dihapus"
+          },
+          "error": {
+            "title": "Penghapusan halaman gagal",
+            "message": "Penghapusan halaman gagal"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Klik untuk memberi suara naik",
+      "click_to_downvote": "Klik untuk memberi suara turun",
+      "click_to_view_upvotes": "Klik untuk melihat suara naik",
+      "click_to_view_downvotes": "Klik untuk melihat suara turun"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Sub-item kerja berhasil diperbarui",
+      "error": "Kesalahan saat memperbarui sub-item kerja"
+    },
+    "remove": {
+      "success": "Sub-item kerja berhasil dihapus",
+      "error": "Kesalahan saat menghapus sub-item kerja"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Anda tidak memiliki sub-item kerja yang cocok dengan filter yang Anda terapkan.",
+        "description": "Untuk melihat semua sub-item kerja, hapus semua filter yang diterapkan.",
+        "action": "Hapus filter"
+      },
+      "list_filters": {
+        "title": "Anda tidak memiliki item kerja yang cocok dengan filter yang Anda terapkan.",
+        "description": "Untuk melihat semua item kerja, hapus semua filter yang diterapkan.",
+        "action": "Hapus filter"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Tidak ada item kerja yang cocok ditemukan"
+      },
+      "no_issues": {
+        "title": "Tidak ada item kerja ditemukan"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Belum ada komentar",
+        "description": "Komentar dapat digunakan sebagai ruang diskusi dan tindak lanjut untuk item kerja"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Tidak dapat mengarsipkan item kerja",
+        "message": "Hanya item kerja yang termasuk dalam kelompok status Selesai atau Dibatalkan yang dapat diarsipkan."
+      },
+      "invalid_issue_start_date": {
+        "title": "Tidak dapat memperbarui item kerja",
+        "message": "Tanggal mulai yang dipilih melebihi tanggal jatuh tempo untuk beberapa item kerja. Pastikan tanggal mulai sebelum tanggal jatuh tempo."
+      },
+      "invalid_issue_target_date": {
+        "title": "Tidak dapat memperbarui item kerja",
+        "message": "Tanggal jatuh tempo yang dipilih mendahului tanggal mulai untuk beberapa item kerja. Pastikan tanggal jatuh tempo setelah tanggal mulai."
+      },
+      "invalid_state_transition": {
+        "title": "Tidak dapat memperbarui item kerja",
+        "message": "Perubahan status tidak diizinkan untuk beberapa item kerja. Pastikan perubahan status diizinkan."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Ubah status, prioritas, dan lainnya untuk beberapa item kerja sekaligus. Hemat rata-rata tiga menit per operasi.",
+      "cta": "Tingkatkan ke One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Item kerja berulang",
+      "description": "Atur pekerjaan berulang sekali, dan kami akan mengurus ulangannya. Anda akan melihat semuanya di sini ketika waktunya tiba.",
+      "new_recurring_work_item": "Item kerja berulang baru",
+      "update_recurring_work_item": "Perbarui item kerja berulang",
+      "form": {
+        "interval": {
+          "title": "Jadwal",
+          "start_date": {
+            "validation": {
+              "required": "Tanggal mulai wajib diisi"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Jenis interval wajib diisi"
+            }
+          }
+        },
+        "button": {
+          "create": "Buat item kerja berulang",
+          "update": "Perbarui item kerja berulang"
+        }
+      },
+      "create_button": {
+        "label": "Buat item kerja berulang",
+        "no_permission": "Hubungi admin proyek Anda untuk membuat item kerja berulang"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Pekerjaan Anda, otomatis",
+        "description": "Atur sekali saja. Kami akan mengingatkannya saat waktunya tiba. Tingkatkan ke Bisnis untuk membuat pekerjaan berulang terasa mudah."
+      },
+      "no_templates": {
+        "button": "Buat item kerja berulang pertama Anda"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Item kerja berulang berhasil dibuat",
+          "message": "{name}, item kerja berulang, sekarang tersedia di ruang kerja Anda."
+        },
+        "error": {
+          "title": "Kami tidak dapat membuat item kerja berulang kali ini.",
+          "message": "Coba simpan detail Anda lagi atau salin ke item kerja berulang baru, sebaiknya di tab lain."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Item kerja berulang berhasil diubah",
+          "message": "{name}, item kerja berulang, telah diubah."
+        },
+        "error": {
+          "title": "Kami tidak dapat menyimpan perubahan pada item kerja berulang ini.",
+          "message": "Coba simpan detail Anda lagi atau kembali ke item kerja berulang ini nanti. Jika masih ada masalah, hubungi kami."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Item kerja berulang berhasil dihapus",
+          "message": "{name}, item kerja berulang, telah dihapus dari ruang kerja Anda."
+        },
+        "error": {
+          "title": "Kami tidak dapat menghapus item kerja berulang ini.",
+          "message": "Coba hapus lagi atau kembali nanti. Jika Anda masih tidak bisa menghapusnya, hubungi kami."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Hapus item kerja berulang",
+      "description": {
+        "prefix": "Apakah Anda yakin ingin menghapus item kerja berulang-",
+        "suffix": "? Semua data terkait item kerja berulang akan dihapus secara permanen. Tindakan ini tidak dapat dibatalkan."
+      }
+    }
+  },
+  "epic": {
+    "new": "Epik Baru",
+    "label": "{count, plural, one {Epik} other {Epik}}",
+    "adding": "Menambahkan epik",
+    "create": {
+      "success": "Epik berhasil dibuat"
+    },
+    "add": {
+      "label": "Tambahkan Epik",
+      "press_enter": "Tekan 'Enter' untuk menambahkan epik lain"
+    },
+    "title": {
+      "label": "Judul Epik",
+      "required": "Judul epik wajib diisi."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/workflow.json b/packages/i18n/src/locales/id/workflow.json
new file mode 100644
index 0000000..ea8b144
--- /dev/null
+++ b/packages/i18n/src/locales/id/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Izinkan item kerja baru",
+      "work_item_creation_disable_tooltip": "Pembuatan item kerja dinonaktifkan untuk status ini",
+      "default_state": "Status default memungkinkan semua anggota membuat item kerja baru. Ini tidak dapat diubah",
+      "state_change_count": "{count, plural, one {1 perubahan status diizinkan} other {{count} perubahan status diizinkan}}",
+      "movers_count": "{count, plural, one {1 reviewer terdaftar} other {{count} reviewer terdaftar}}",
+      "state_changes": {
+        "label": {
+          "default": "Tambah perubahan status yang diizinkan",
+          "loading": "Menambahkan perubahan status yang diizinkan"
+        },
+        "move_to": "Ubah status ke",
+        "movers": {
+          "label": "Ketika ditinjau oleh",
+          "tooltip": "Reviewer adalah orang yang diizinkan untuk memindahkan item kerja dari satu status ke status lain.",
+          "add": "Tambah reviewer"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Anda tidak dapat memindahkan item kerja ini ke sini."
+    },
+    "workflow_enabled": {
+      "label": "Perubahan status"
+    },
+    "workflow_tree": {
+      "label": "Untuk item kerja di",
+      "state_change_label": "dapat memindahkannya ke"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Kendalikan kekacauan perubahan dan tinjauan dengan Workflows.",
+        "description": "Tetapkan aturan untuk ke mana pekerjaan Anda bergerak, oleh siapa, dan kapan dengan Workflows di Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Lihat riwayat perubahan",
+      "reset_workflow": "Atur ulang workflow"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Apakah Anda yakin ingin mengatur ulang workflow ini?",
+        "description": "Jika Anda mengatur ulang workflow ini, semua aturan perubahan status Anda akan dihapus dan Anda harus membuatnya lagi untuk menjalankannya di proyek ini."
+      },
+      "delete_state_change": {
+        "title": "Apakah Anda yakin ingin menghapus aturan perubahan status ini?",
+        "description": "Setelah dihapus, Anda tidak dapat membatalkan perubahan ini dan Anda harus mengatur aturan lagi jika Anda ingin menjalankannya untuk proyek ini."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} workflow",
+        "success": {
+          "title": "Berhasil",
+          "message": "Workflow {action} berhasil"
+        },
+        "error": {
+          "title": "Error",
+          "message": "Workflow tidak dapat {action}. Silakan coba lagi."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Berhasil",
+          "message": "Workflow berhasil diatur ulang"
+        },
+        "error": {
+          "title": "Error mengatur ulang workflow",
+          "message": "Workflow tidak dapat diatur ulang. Silakan coba lagi."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Error menambahkan aturan perubahan status",
+          "message": "Aturan perubahan status tidak dapat ditambahkan. Silakan coba lagi."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Error memodifikasi aturan perubahan status",
+          "message": "Aturan perubahan status tidak dapat dimodifikasi. Silakan coba lagi."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Error menghapus aturan perubahan status",
+          "message": "Aturan perubahan status tidak dapat dihapus. Silakan coba lagi."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Error memodifikasi reviewer aturan perubahan status",
+          "message": "Reviewer aturan perubahan status tidak dapat dimodifikasi. Silakan coba lagi."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/workspace-settings.json b/packages/i18n/src/locales/id/workspace-settings.json
new file mode 100644
index 0000000..3522088
--- /dev/null
+++ b/packages/i18n/src/locales/id/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Pengaturan ruang kerja",
+    "page_label": "{workspace} - Pengaturan Umum",
+    "key_created": "Kunci dibuat",
+    "copy_key": "Salin dan simpan kunci rahasia ini di Halaman Plane. Anda tidak dapat melihat kunci ini setelah Anda menekan Tutup. File CSV yang berisi kunci telah diunduh.",
+    "token_copied": "Token disalin ke clipboard.",
+    "settings": {
+      "general": {
+        "title": "Umum",
+        "upload_logo": "Unggah logo",
+        "edit_logo": "Edit logo",
+        "name": "Nama ruang kerja",
+        "company_size": "Ukuran perusahaan",
+        "url": "URL ruang kerja",
+        "workspace_timezone": "Zona waktu ruang kerja",
+        "update_workspace": "Perbarui ruang kerja",
+        "delete_workspace": "Hapus ruang kerja ini",
+        "delete_workspace_description": "Ketika menghapus ruang kerja, semua data dan sumber daya di dalam ruang kerja tersebut akan dihapus secara permanen dan tidak dapat dipulihkan.",
+        "delete_btn": "Hapus ruang kerja ini",
+        "delete_modal": {
+          "title": "Apakah Anda yakin ingin menghapus ruang kerja ini?",
+          "description": "Anda memiliki percobaan aktif untuk salah satu rencana berbayar kami. Silakan batalkan terlebih dahulu untuk melanjutkan.",
+          "dismiss": "Tutup",
+          "cancel": "Batalkan percobaan",
+          "success_title": "Ruang kerja dihapus.",
+          "success_message": "Anda akan segera diarahkan ke halaman profil Anda.",
+          "error_title": "Itu tidak berhasil.",
+          "error_message": "Silakan coba lagi."
+        },
+        "errors": {
+          "name": {
+            "required": "Nama diperlukan",
+            "max_length": "Nama ruang kerja tidak boleh lebih dari 80 karakter"
+          },
+          "company_size": {
+            "required": "Ukuran perusahaan diperlukan",
+            "select_a_range": "Pilih ukuran organisasi"
+          }
+        }
+      },
+      "members": {
+        "title": "Anggota",
+        "add_member": "Tambah anggota",
+        "pending_invites": "Undangan yang tertunda",
+        "invitations_sent_successfully": "Undangan berhasil dikirim",
+        "leave_confirmation": "Apakah Anda yakin ingin meninggalkan ruang kerja? Anda tidak akan lagi memiliki akses ke ruang kerja ini. Tindakan ini tidak dapat dibatalkan.",
+        "details": {
+          "full_name": "Nama lengkap",
+          "display_name": "Nama tampilan",
+          "email_address": "Alamat email",
+          "account_type": "Tipe akun",
+          "authentication": "Autentikasi",
+          "joining_date": "Tanggal bergabung"
+        },
+        "modal": {
+          "title": "Undang orang untuk berkolaborasi",
+          "description": "Undang orang untuk berkolaborasi di ruang kerja Anda.",
+          "button": "Kirim undangan",
+          "button_loading": "Mengirim undangan",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "Kami perlu alamat email untuk mengundang mereka.",
+            "invalid": "Email tidak valid"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Penagihan & Rencana",
+        "description": "Pilih rencana Anda, kelola langganan, dan tingkatkan dengan mudah seiring pertumbuhan kebutuhan Anda.",
+        "title": "Penagihan & Rencana",
+        "current_plan": "Rencana saat ini",
+        "free_plan": "Anda saat ini menggunakan rencana gratis",
+        "view_plans": "Lihat rencana"
+      },
+      "exports": {
+        "heading": "Ekspor",
+        "description": "Ekspor data proyek Anda dalam berbagai format dan akses riwayat ekspor Anda dengan tautan unduhan.",
+        "title": "Ekspor",
+        "exporting": "Mengeskpor",
+        "previous_exports": "Ekspor sebelumnya",
+        "export_separate_files": "Ekspor data ke file terpisah",
+        "exporting_projects": "Mengekspor proyek",
+        "format": "Format",
+        "filters_info": "Terapkan filter untuk mengekspor item kerja tertentu berdasarkan kriteria Anda.",
+        "modal": {
+          "title": "Ekspor ke",
+          "toasts": {
+            "success": {
+              "title": "Ekspor berhasil",
+              "message": "Anda akan dapat mengunduh {entity} yang diekspor dari ekspor sebelumnya."
+            },
+            "error": {
+              "title": "Ekspor gagal",
+              "message": "Ekspor tidak berhasil. Silakan coba lagi."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhook",
+        "description": "Otomatiskan notifikasi ke layanan eksternal saat peristiwa proyek terjadi.",
+        "title": "Webhook",
+        "add_webhook": "Tambah webhook",
+        "modal": {
+          "title": "Buat webhook",
+          "details": "Detail webhook",
+          "payload": "Payload URL",
+          "question": "Peristiwa apa yang ingin Anda picu untuk webhook ini?",
+          "error": "URL diperlukan"
+        },
+        "secret_key": {
+          "title": "Kunci rahasia",
+          "message": "Hasilkan token untuk masuk ke payload webhook"
+        },
+        "options": {
+          "all": "Kirim saya semuanya",
+          "individual": "Pilih peristiwa individu"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook dibuat",
+            "message": "Webhook telah berhasil dibuat"
+          },
+          "not_created": {
+            "title": "Webhook tidak dibuat",
+            "message": "Webhook tidak dapat dibuat"
+          },
+          "updated": {
+            "title": "Webhook diperbarui",
+            "message": "Webhook telah berhasil diperbarui"
+          },
+          "not_updated": {
+            "title": "Webhook tidak diperbarui",
+            "message": "Webhook tidak dapat diperbarui"
+          },
+          "removed": {
+            "title": "Webhook dihapus",
+            "message": "Webhook telah berhasil dihapus"
+          },
+          "not_removed": {
+            "title": "Webhook tidak dihapus",
+            "message": "Webhook tidak dapat dihapus"
+          },
+          "secret_key_copied": {
+            "message": "Kunci rahasia disalin ke clipboard."
+          },
+          "secret_key_not_copied": {
+            "message": "Terjadi kesalahan saat menyalin kunci rahasia."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Token API",
+        "description": "Buat token API yang aman untuk mengintegrasikan data Anda dengan sistem dan aplikasi eksternal.",
+        "title": "Token API",
+        "add_token": "Tambah token akses",
+        "create_token": "Buat token",
+        "never_expires": "Tidak pernah kedaluwarsa",
+        "generate_token": "Hasilkan token",
+        "generating": "Menghasilkan",
+        "delete": {
+          "title": "Hapus token API",
+          "description": "Setiap aplikasi yang menggunakan token ini tidak akan memiliki akses ke data Plane. Tindakan ini tidak dapat dibatalkan.",
+          "success": {
+            "title": "Sukses!",
+            "message": "Token API telah berhasil dihapus"
+          },
+          "error": {
+            "title": "Kesalahan!",
+            "message": "Token API tidak dapat dihapus"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integrasi",
+        "heading": "Integrasi",
+        "description": "Hubungkan dengan alat dan layanan populer untuk menyinkronkan pekerjaan Anda di seluruh ekosistem alur kerja Anda.",
+        "page_title": "Gunakan data Plane Anda di aplikasi yang tersedia atau aplikasi Anda sendiri.",
+        "page_description": "Lihat semua integrasi yang digunakan oleh workspace ini atau oleh Anda."
+      },
+      "imports": {
+        "title": "Impor",
+        "heading": "Impor",
+        "description": "Hubungkan dan impor data dari alat manajemen proyek Anda yang sudah ada untuk menyederhanakan integrasi alur kerja."
+      },
+      "worklogs": {
+        "title": "Log kerja",
+        "heading": "Log kerja",
+        "description": "Unduh log kerja alias lembar waktu untuk siapa pun dalam proyek apa pun."
+      },
+      "group_syncing": {
+        "title": "Sinkronisasi grup",
+        "heading": "Sinkronisasi grup",
+        "description": "Tautkan grup penyedia identitas ke proyek dan peran. Akses pengguna diperbarui secara otomatis saat keanggotaan grup berubah di IdP Anda, menyederhanakan onboarding dan offboarding.",
+        "enable": {
+          "title": "Aktifkan sinkronisasi grup",
+          "description": "Secara otomatis menambahkan pengguna ke proyek berdasarkan grup penyedia identitas."
+        },
+        "config": {
+          "title": "Konfigurasi sinkronisasi grup",
+          "description": "Atur cara grup penyedia identitas dipetakan ke proyek dan peran.",
+          "sync_on_login": {
+            "title": "Sinkronisasi saat login",
+            "description": "Perbarui keanggotaan grup dan akses proyek saat pengguna masuk."
+          },
+          "sync_offline": {
+            "title": "Sinkronisasi offline",
+            "description": "Menjalankan sinkronisasi setiap enam jam secara otomatis, tanpa menunggu pengguna login."
+          },
+          "auto_remove": {
+            "title": "Hapus otomatis",
+            "description": "Secara otomatis menghapus pengguna dari proyek ketika mereka tidak lagi cocok dengan grup."
+          },
+          "group_attribute_key": {
+            "title": "Kunci atribut grup",
+            "description": "Atribut penyedia identitas yang digunakan untuk mengidentifikasi dan menyinkronkan grup pengguna.",
+            "placeholder": "Grup"
+          }
+        },
+        "group_mapping": {
+          "title": "Pemetaan grup",
+          "description": "Tautkan grup penyedia identitas ke proyek dan peran.",
+          "button_text": "Tambah sinkronisasi grup baru"
+        },
+        "toast": {
+          "updating": "Memperbarui fitur sinkronisasi grup",
+          "success": "Fitur sinkronisasi grup berhasil diperbarui.",
+          "error": "Gagal memperbarui fitur sinkronisasi grup!"
+        },
+        "delete_modal": {
+          "title": "Hapus sinkronisasi grup",
+          "content": "Pengguna baru dari grup identitas ini tidak akan lagi ditambahkan ke proyek. Pengguna yang sudah ditambahkan akan mempertahankan peran mereka saat ini."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Grup pengguna",
+            "required": "Grup pengguna wajib diisi",
+            "placeholder": "Masukkan nama grup IdP"
+          },
+          "project": {
+            "text": "Proyek",
+            "required": "Proyek wajib diisi",
+            "placeholder": "Pilih proyek"
+          },
+          "default_role": {
+            "text": "Peran proyek",
+            "required": "Peran proyek wajib diisi",
+            "placeholder": "Pilih peran proyek"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identitas",
+        "heading": "Identitas",
+        "description": "Konfigurasi domain Anda dan aktifkan Single sign-on"
+      },
+      "project_states": {
+        "title": "Status proyek",
+        "heading": "Lihat ikhtisar kemajuan untuk semua proyek.",
+        "description": "Status Proyek adalah fitur khusus Plane untuk melacak kemajuan semua proyek Anda berdasarkan properti proyek apa pun.",
+        "go_to_settings": "Pergi ke pengaturan"
+      },
+      "projects": {
+        "title": "Proyek",
+        "description": "Kelola status proyek, aktifkan label proyek, dan konfigurasi lainnya.",
+        "tabs": {
+          "states": "Status proyek",
+          "labels": "Label proyek"
+        }
+      },
+      "templates": {
+        "title": "Templat",
+        "heading": "Templat",
+        "description": "Hemat 80% waktu yang dihabiskan untuk membuat proyek, item kerja, dan halaman saat Anda menggunakan templat."
+      },
+      "relations": {
+        "title": "Relasi",
+        "heading": "Relasi",
+        "description": "Buat dan kelola tipe relasi yang menghubungkan item kerja di seluruh ruang kerja Anda."
+      },
+      "cancel_trial": {
+        "title": "Batalkan uji coba Anda terlebih dahulu.",
+        "description": "Anda memiliki uji coba aktif untuk salah satu paket berbayar kami. Silakan batalkan terlebih dahulu untuk melanjutkan.",
+        "dismiss": "Tutup",
+        "cancel": "Batalkan uji coba",
+        "cancel_success_title": "Uji coba dibatalkan.",
+        "cancel_success_message": "Anda sekarang dapat menghapus workspace.",
+        "cancel_error_title": "Itu tidak berhasil.",
+        "cancel_error_message": "Silakan coba lagi."
+      },
+      "applications": {
+        "internal": "Internal",
+        "title": "Aplikasi",
+        "applicationId_copied": "ID aplikasi disalin ke clipboard",
+        "clientId_copied": "ID klien disalin ke clipboard",
+        "clientSecret_copied": "Kunci rahasia klien disalin ke clipboard",
+        "third_party_apps": "Aplikasi pihak ketiga",
+        "your_apps": "Aplikasi Anda",
+        "connect": "Koneksi",
+        "connected": "Terhubung",
+        "disconnect": "Putuskan",
+        "install": "Pasang",
+        "installed": "Terpasang",
+        "configure": "Konfigurasi",
+        "app_available": "Anda telah membuat aplikasi ini tersedia untuk digunakan dengan workspace Plane",
+        "app_credentials_regenrated": {
+          "title": "Kredensial aplikasi berhasil digenerasi ulang",
+          "description": "Ganti client secret di semua tempat yang digunakan. Secret sebelumnya sudah tidak berlaku."
+        },
+        "app_created": {
+          "title": "Aplikasi berhasil dibuat",
+          "description": "Gunakan kredensial untuk menginstal aplikasi di ruang kerja Plane"
+        },
+        "installed_apps": "Aplikasi terpasang",
+        "all_apps": "Semua aplikasi",
+        "internal_apps": "Aplikasi internal",
+        "app_name_title": "Apa nama Anda untuk aplikasi ini",
+        "app_description_title": {
+          "label": "Deskripsi panjang",
+          "placeholder": "Tulis deskripsi panjang untuk marketplace. Tekan '/' untuk perintah."
+        },
+        "authorization_grant_type": {
+          "title": "Jenis Koneksi",
+          "description": "Pilih apakah aplikasi Anda harus diinstal sekali untuk workspace atau biarkan setiap pengguna menghubungkan akun mereka sendiri"
+        },
+        "website": {
+          "title": "Situs web",
+          "description": "Tautan ke situs web aplikasi Anda.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Pembuat Aplikasi",
+          "description": "Orang atau organisasi yang membuat aplikasi."
+        },
+        "app_maker_error": "Pembuat aplikasi diperlukan",
+        "setup_url": {
+          "label": "URL pengaturan",
+          "description": "Pengguna akan diarahkan ke URL ini saat mereka menginstal aplikasi.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL webhook",
+          "description": "Di sinilah kami akan mengirimkan event dan pembaruan webhook dari workspace tempat aplikasi Anda terpasang.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Rahasia Webhook",
+          "description": "Rahasia yang digunakan untuk memverifikasi permintaan webhook yang masuk.",
+          "placeholder": "Masukkan kunci rahasia acak"
+        },
+        "redirect_uris": {
+          "label": "URI pengalihan (dipisahkan spasi)",
+          "description": "Pengguna akan diarahkan ke jalur ini setelah mereka masuk dengan Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Hubungkan workspace Plane untuk mulai menggunakannya",
+        "client_id_and_secret": "ID klien dan Rahasia",
+        "client_id_and_secret_description": "Salin dan simpan kunci rahasia ini di Pages. Anda tidak dapat melihat kunci ini lagi setelah Anda menutupnya.",
+        "client_id_and_secret_download": "Anda dapat mengunduh CSV dengan kunci dari sini.",
+        "application_id": "ID Aplikasi",
+        "client_id": "ID Klien",
+        "client_secret": "Rahasia Klien",
+        "export_as_csv": "Ekspor sebagai CSV",
+        "slug_already_exists": "Slug sudah ada",
+        "failed_to_create_application": "Gagal membuat aplikasi",
+        "upload_logo": "Unggah Logo",
+        "app_name_error": "Nama aplikasi diperlukan",
+        "app_short_description_title": "Berikan aplikasi ini deskripsi singkat",
+        "app_short_description_error": "Deskripsi aplikasi singkat diperlukan",
+        "app_description_error": "Deskripsi aplikasi diperlukan",
+        "app_slug_title": "Slug aplikasi",
+        "app_slug_error": "Slug aplikasi diperlukan",
+        "invalid_website_error": "Website tidak valid",
+        "webhook_url_title": "URL Webhook",
+        "webhook_url_error": "URL Webhook diperlukan",
+        "invalid_webhook_url_error": "URL Webhook tidak valid",
+        "redirect_uris_title": "Redirect URIs",
+        "redirect_uris_error": "Redirect URIs diperlukan",
+        "invalid_redirect_uris_error": "Redirect URIs tidak valid",
+        "redirect_uris_description": "Masukkan URI yang dipisahkan oleh spasi di mana aplikasi akan diarahkan setelah pengguna e.g https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Authorized Javascript Origins",
+        "authorized_javascript_origins_error": "Authorized Javascript Origins diperlukan",
+        "invalid_authorized_javascript_origins_error": "Authorized Javascript Origins tidak valid",
+        "authorized_javascript_origins_description": "Masukkan URI yang dipisahkan oleh spasi di mana aplikasi akan diizinkan untuk membuat permintaan e.g app.com example.com",
+        "create_app": "Buat aplikasi",
+        "update_app": "Perbarui aplikasi",
+        "build_your_own_app": "Bangun aplikasi Anda sendiri",
+        "edit_app_details": "Edit detail aplikasi",
+        "regenerate_client_secret_description": "Regenerate kunci rahasia klien. Jika Anda menghasilkan kunci rahasia, Anda dapat menyalin kunci atau mengunduhnya ke file CSV setelah itu.",
+        "regenerate_client_secret": "Regenerate kunci rahasia klien",
+        "regenerate_client_secret_confirm_title": "Apakah Anda yakin ingin menghasilkan kembali kunci rahasia klien?",
+        "regenerate_client_secret_confirm_description": "Aplikasi yang menggunakan kunci rahasia ini akan berhenti bekerja. Anda perlu memperbarui kunci rahasia di aplikasi.",
+        "regenerate_client_secret_confirm_cancel": "Batalkan",
+        "regenerate_client_secret_confirm_regenerate": "Regenerate",
+        "read_only_access_to_workspace": "Akses baca-saja ke workspace Anda",
+        "write_access_to_workspace": "Akses tulis ke workspace Anda",
+        "read_only_access_to_user_profile": "Akses baca-saja ke profil pengguna Anda",
+        "write_access_to_user_profile": "Akses tulis ke profil pengguna Anda",
+        "connect_app_to_workspace": "Koneksikan {app} ke workspace Anda {workspace}",
+        "user_permissions": "Izin pengguna",
+        "user_permissions_description": "Izin pengguna digunakan untuk memberikan akses ke profil pengguna.",
+        "workspace_permissions": "Izin workspace",
+        "workspace_permissions_description": "Izin workspace digunakan untuk memberikan akses ke workspace.",
+        "with_the_permissions": "dengan izin",
+        "app_consent_title": "{app} meminta akses ke workspace Anda dan profil Plane.",
+        "choose_workspace_to_connect_app_with": "Pilih workspace untuk menghubungkan aplikasi",
+        "app_consent_workspace_permissions_title": "{app} ingin",
+        "app_consent_user_permissions_title": "{app} juga dapat meminta izin pengguna untuk sumber daya berikut. Izin ini akan diminta dan diotorisasi hanya oleh pengguna.",
+        "app_consent_accept_title": "Dengan menerima, Anda",
+        "app_consent_accept_1": "Berikan akses ke data Plane Anda di mana pun Anda dapat menggunakan aplikasi di dalam atau di luar Plane",
+        "app_consent_accept_2": "Setuju dengan {app}'s Privacy Policy dan Terms Of Use",
+        "accepting": "Menerima...",
+        "accept": "Menerima",
+        "categories": "Kategori",
+        "select_app_categories": "Pilih kategori aplikasi",
+        "categories_title": "Kategori",
+        "categories_error": "Kategori diperlukan",
+        "invalid_categories_error": "Kategori tidak valid",
+        "categories_description": "Pilih kategori yang paling sesuai dengan aplikasi",
+        "supported_plans": "Paket yang Didukung",
+        "supported_plans_description": "Pilih paket workspace yang dapat menginstal aplikasi ini. Kosongkan untuk mengizinkan semua paket.",
+        "select_plans": "Pilih Paket",
+        "privacy_policy_url_title": "URL Privacy Policy",
+        "privacy_policy_url_error": "URL Privacy Policy diperlukan",
+        "invalid_privacy_policy_url_error": "URL Privacy Policy tidak valid",
+        "terms_of_service_url_title": "URL Terms of Service",
+        "terms_of_service_url_error": "URL Terms of Service diperlukan",
+        "invalid_terms_of_service_url_error": "URL Terms of Service tidak valid",
+        "support_url_title": "URL Support",
+        "support_url_error": "URL Support diperlukan",
+        "invalid_support_url_error": "URL Support tidak valid",
+        "video_url_title": "URL Video",
+        "video_url_error": "URL Video diperlukan",
+        "invalid_video_url_error": "URL Video tidak valid",
+        "setup_url_error": "URL Setup diperlukan",
+        "invalid_setup_url_error": "URL Setup tidak valid",
+        "configuration_url_title": "URL Konfigurasi",
+        "configuration_url_error": "URL Konfigurasi diperlukan",
+        "invalid_configuration_url_error": "URL Konfigurasi tidak valid",
+        "contact_email_title": "Email Kontak",
+        "contact_email_error": "Email Kontak diperlukan",
+        "invalid_contact_email_error": "Email Kontak tidak valid",
+        "upload_attachments": "Unggah Lampiran",
+        "uploading_images": "Mengunggah {count} Gambar{count, plural, one {s} other {s}}",
+        "drop_images_here": "Letakkan gambar di sini",
+        "click_to_upload_images": "Klik untuk mengunggah gambar",
+        "invalid_file_or_exceeds_size_limit": "File tidak valid atau melebihi batas ukuran ({size} MB)",
+        "uploading": "Mengunggah...",
+        "upload_and_save": "Unggah dan Simpan",
+        "app_consent_no_access_title": "Permintaan untuk menginstal",
+        "app_consent_no_access_description": "Aplikasi ini hanya dapat diinstal setelah admin workspace menginstalnya. Hubungi admin workspace Anda untuk melanjutkan.",
+        "app_consent_unapproved_title": "Aplikasi ini belum ditinjau atau disetujui oleh Plane.",
+        "app_consent_unapproved_description": "Pastikan Anda memercayai aplikasi ini sebelum menghubungkannya ke ruang kerja Anda.",
+        "go_to_app": "Buka aplikasi",
+        "enable_app_mentions": "Aktifkan penyebutan aplikasi",
+        "enable_app_mentions_tooltip": "Saat ini diaktifkan, pengguna dapat menyebut atau menetapkan Work Items ke aplikasi ini.",
+        "scopes": "Lingkup",
+        "select_scopes": "Pilih Lingkup",
+        "read_access_to": "Akses baca-saja ke",
+        "write_access_to": "Akses tulis ke",
+        "global_permission_expiration": "Lingkup global akan segera berakhir. Gunakan lingkup granular sebagai gantinya. Misalnya, gunakan project:read alih-alih baca global.",
+        "selected_scopes": "{count} dipilih",
+        "scopes_and_permissions": "Lingkup & Izin",
+        "read": "Baca",
+        "write": "Tulis",
+        "scope_description": {
+          "projects": "Akses ke proyek dan semua entitas terkait proyek",
+          "wiki": "Akses ke wiki dan semua entitas terkait wiki",
+          "workspaces": "Akses ke workspace dan semua entitas terkait workspace",
+          "stickies": "Akses ke stickies dan semua entitas terkait sticky",
+          "profile": "Akses ke informasi profil pengguna",
+          "agents": "Akses ke agen dan semua entitas terkait agen",
+          "assets": "Akses ke aset dan semua entitas terkait aset"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Lihat pekerjaan Anda menjadi lebih cerdas dan lebih cepat dengan AI yang terhubung secara native ke pekerjaan dan basis pengetahuan Anda."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Skrip",
+        "new_script": "Skrip Baru",
+        "description": "Otomatisasi alur kerja Anda dengan skrip kustom dan aturan otomatisasi."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Belum ada token API yang dibuat",
+        "description": "API Plane dapat digunakan untuk mengintegrasikan data Anda di Plane dengan sistem eksternal mana pun. Buat token untuk memulai."
+      },
+      "webhooks": {
+        "title": "Belum ada webhook yang ditambahkan",
+        "description": "Buat webhook untuk menerima pembaruan waktu nyata dan mengotomatiskan tindakan."
+      },
+      "exports": {
+        "title": "Belum ada ekspor",
+        "description": "Setiap kali Anda mengekspor, Anda juga akan memiliki salinan di sini untuk referensi."
+      },
+      "imports": {
+        "title": "Belum ada impor",
+        "description": "Temukan semua impor Anda sebelumnya di sini dan unduh."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/id/workspace.json b/packages/i18n/src/locales/id/workspace.json
new file mode 100644
index 0000000..911b67e
--- /dev/null
+++ b/packages/i18n/src/locales/id/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Buat ruang kerja Anda",
+    "subheading": "Untuk mulai menggunakan Plane, Anda perlu membuat atau bergabung dengan ruang kerja.",
+    "form": {
+      "name": {
+        "label": "Nama ruang kerja Anda",
+        "placeholder": "Sesuatu yang familiar dan dapat dikenali selalu lebih baik."
+      },
+      "url": {
+        "label": "Atur URL ruang kerja Anda",
+        "placeholder": "Ketik atau tempel URL",
+        "edit_slug": "Anda hanya dapat mengedit slug URL"
+      },
+      "organization_size": {
+        "label": "Berapa banyak orang yang akan menggunakan ruang kerja ini?",
+        "placeholder": "Pilih rentang"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Hanya admin instansi Anda yang dapat membuat ruang kerja",
+        "description": "Jika Anda tahu alamat email admin instansi Anda, klik tombol di bawah ini untuk menghubungi mereka.",
+        "request_button": "Minta admin instansi"
+      },
+      "validation": {
+        "name_alphanumeric": "Nama ruang kerja hanya boleh berisi (' '), ('-'), ('_') dan karakter alfanumerik.",
+        "name_length": "Batasi nama Anda hingga 80 karakter.",
+        "url_alphanumeric": "URL hanya boleh berisi ('-') dan karakter alfanumerik.",
+        "url_length": "Batasi URL Anda hingga 48 karakter.",
+        "url_already_taken": "URL ruang kerja sudah diambil!"
+      }
+    },
+    "request_email": {
+      "subject": "Meminta ruang kerja baru",
+      "body": "Hai admin instansi,\n\nTolong buat ruang kerja baru dengan URL [/workspace-name] untuk [tujuan pembuatan ruang kerja].\n\nTerima kasih,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Buat ruang kerja",
+      "loading": "Membuat ruang kerja"
+    },
+    "toast": {
+      "success": {
+        "title": "Sukses",
+        "message": "Ruang kerja berhasil dibuat"
+      },
+      "error": {
+        "title": "Kesalahan",
+        "message": "Ruang kerja tidak dapat dibuat. Silakan coba lagi."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Ikhtisar proyek, aktivitas, dan metrik Anda",
+        "description": "Selamat datang di Plane, kami sangat senang memiliki Anda di sini. Buat proyek pertama Anda dan lacak item kerja Anda, dan halaman ini akan berubah menjadi ruang yang membantu Anda berkembang. Admin juga akan melihat item yang membantu tim mereka berkembang.",
+        "primary_button": {
+          "text": "Bangun proyek pertama Anda",
+          "comic": {
+            "title": "Segalanya dimulai dengan proyek di Plane",
+            "description": "Sebuah proyek bisa menjadi roadmap produk, kampanye pemasaran, atau meluncurkan mobil baru."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Analitik",
+    "page_label": "{workspace} - Analitik",
+    "open_tasks": "Jumlah tugas terbuka",
+    "error": "Terjadi kesalahan dalam mengambil data.",
+    "work_items_closed_in": "Item kerja yang ditutup dalam",
+    "selected_projects": "Proyek yang dipilih",
+    "total_members": "Jumlah anggota total",
+    "total_cycles": "Jumlah siklus total",
+    "total_modules": "Jumlah modul total",
+    "pending_work_items": {
+      "title": "Item kerja yang menunggu",
+      "empty_state": "Analisis item kerja yang menunggu oleh rekan kerja muncul di sini."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Item kerja yang ditutup dalam setahun",
+      "empty_state": "Tutup item kerja untuk melihat analisis dari item kerja tersebut dalam bentuk grafik."
+    },
+    "most_work_items_created": {
+      "title": "Paling banyak item kerja yang dibuat",
+      "empty_state": "Rekan kerja dan jumlah item kerja yang mereka buat muncul di sini."
+    },
+    "most_work_items_closed": {
+      "title": "Paling banyak item kerja yang ditutup",
+      "empty_state": "Rekan kerja dan jumlah item kerja yang mereka tutup muncul di sini."
+    },
+    "tabs": {
+      "scope_and_demand": "Lingkup dan Permintaan",
+      "custom": "Analitik Kustom"
+    },
+    "total": "Total {entity}",
+    "started_work_items": "{entity} yang telah dimulai",
+    "backlog_work_items": "{entity} backlog",
+    "un_started_work_items": "{entity} yang belum dimulai",
+    "completed_work_items": "{entity} yang telah selesai",
+    "project_insights": "Wawasan Proyek",
+    "summary_of_projects": "Ringkasan Proyek",
+    "all_projects": "Semua Proyek",
+    "trend_on_charts": "Tren pada grafik",
+    "active_projects": "Proyek Aktif",
+    "customized_insights": "Wawasan yang Disesuaikan",
+    "created_vs_resolved": "Dibuat vs Diselesaikan",
+    "empty_state": {
+      "project_insights": {
+        "title": "Belum ada data",
+        "description": "Item pekerjaan yang ditugaskan kepada Anda, dipecah berdasarkan status, akan muncul di sini."
+      },
+      "created_vs_resolved": {
+        "title": "Belum ada data",
+        "description": "Item pekerjaan yang dibuat dan diselesaikan dari waktu ke waktu akan muncul di sini."
+      },
+      "customized_insights": {
+        "title": "Belum ada data",
+        "description": "Item pekerjaan yang ditugaskan kepada Anda, dipecah berdasarkan status, akan muncul di sini."
+      },
+      "general": {
+        "title": "Lacak kemajuan, beban kerja, dan alokasi. Temukan tren, hapus hambatan, dan percepat pekerjaan",
+        "description": "Lihat lingkup versus permintaan, perkiraan, dan perluasan lingkup. Dapatkan kinerja berdasarkan anggota tim dan tim, dan pastikan proyek Anda berjalan tepat waktu.",
+        "primary_button": {
+          "text": "Mulai proyek pertama Anda",
+          "comic": {
+            "title": "Analitik bekerja paling baik dengan Siklus + Modul",
+            "description": "Pertama, batasi waktu masalah Anda ke dalam Siklus dan, jika Anda bisa, kelompokkan masalah yang lebih dari satu siklus ke dalam Modul. Lihat keduanya di navigasi kiri."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Belum ada data",
+        "description": "Analitik kemajuan siklus akan muncul di sini. Tambahkan item kerja ke siklus untuk mulai melacak kemajuan."
+      },
+      "module_progress": {
+        "title": "Belum ada data",
+        "description": "Analitik kemajuan modul akan muncul di sini. Tambahkan item kerja ke modul untuk mulai melacak kemajuan."
+      },
+      "intake_trends": {
+        "title": "Belum ada data",
+        "description": "Analitik tren intake akan muncul di sini. Tambahkan item kerja ke intake untuk mulai melacak tren."
+      }
+    },
+    "upgrade_to_plan": "Tingkatkan ke {plan} untuk membuka {tab}",
+    "workitem_resolved_vs_pending": "Item kerja yang diselesaikan vs tertunda",
+    "projects_by_status": "Proyek berdasarkan status",
+    "active_users": "Pengguna aktif",
+    "intake_trends": "Tren Penerimaan"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Proyek} other {Proyek}}",
+    "create": {
+      "label": "Tambah Proyek"
+    },
+    "network": {
+      "label": "Jaringan",
+      "private": {
+        "title": "Pribadi",
+        "description": "Dapat diakses hanya dengan undangan"
+      },
+      "public": {
+        "title": "Umum",
+        "description": "Siapa pun di ruang kerja kecuali Tamu dapat bergabung"
+      }
+    },
+    "error": {
+      "permission": "Anda tidak memiliki izin untuk melakukan tindakan ini.",
+      "cycle_delete": "Gagal menghapus siklus",
+      "module_delete": "Gagal menghapus modul",
+      "issue_delete": "Gagal menghapus item kerja"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Belum dimulai",
+      "started": "Dimulai",
+      "completed": "Selesai",
+      "cancelled": "Dibatalkan"
+    },
+    "sort": {
+      "manual": "Manual",
+      "name": "Nama",
+      "created_at": "Tanggal dibuat",
+      "members_length": "Jumlah anggota"
+    },
+    "scope": {
+      "my_projects": "Proyek saya",
+      "archived_projects": "Diarsipkan"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# bulan} other{# bulan}}",
+      "days_count": "{days, plural, one{# hari} other{# hari}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Tidak ada proyek aktif",
+        "description": "Anggap setiap proyek sebagai induk untuk pekerjaan yang terarah pada tujuan. Proyek adalah tempat di mana Pekerjaan, Siklus, dan Modul tinggal dan, bersama rekan-rekan Anda, membantu Anda mencapai tujuan tersebut. Buat proyek baru atau filter untuk proyek yang diarsipkan.",
+        "primary_button": {
+          "text": "Mulai proyek pertama Anda",
+          "comic": {
+            "title": "Segalanya dimulai dengan proyek di Plane",
+            "description": "Sebuah proyek bisa menjadi roadmap produk, kampanye pemasaran, atau meluncurkan mobil baru."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Tidak ada proyek",
+        "description": "Untuk membuat item kerja atau mengelola pekerjaan Anda, Anda perlu membuat proyek atau menjadi bagian dari salah satunya.",
+        "primary_button": {
+          "text": "Mulai proyek pertama Anda",
+          "comic": {
+            "title": "Segalanya dimulai dengan proyek di Plane",
+            "description": "Sebuah proyek bisa menjadi roadmap produk, kampanye pemasaran, atau meluncurkan mobil baru."
+          }
+        }
+      },
+      "filter": {
+        "title": "Tidak ada proyek yang cocok",
+        "description": "Tidak ada proyek yang terdeteksi dengan kriteria yang cocok.\n Buat proyek baru sebagai gantinya."
+      },
+      "search": {
+        "description": "Tidak ada proyek yang terdeteksi dengan kriteria yang cocok.\nBuat proyek baru sebagai gantinya"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Tambah tampilan",
+    "empty_state": {
+      "all-issues": {
+        "title": "Tidak ada item kerja dalam proyek",
+        "description": "Proyek pertama sudah selesai! Sekarang, bagi pekerjaan Anda menjadi bagian yang dapat dilacak dengan item kerja. Mari kita mulai!",
+        "primary_button": {
+          "text": "Buat item kerja baru"
+        }
+      },
+      "assigned": {
+        "title": "Belum ada item kerja",
+        "description": "Item kerja yang ditugaskan kepada Anda dapat dilacak dari sini.",
+        "primary_button": {
+          "text": "Buat item kerja baru"
+        }
+      },
+      "created": {
+        "title": "Belum ada item kerja",
+        "description": "Semua item kerja yang dibuat oleh Anda akan muncul di sini, lacak mereka langsung di sini.",
+        "primary_button": {
+          "text": "Buat item kerja baru"
+        }
+      },
+      "subscribed": {
+        "title": "Belum ada item kerja",
+        "description": "Langgan item kerja yang Anda minati, lacak semuanya di sini."
+      },
+      "custom-view": {
+        "title": "Belum ada item kerja",
+        "description": "Item kerja yang menerapkan filter ini, lacak semuanya di sini."
+      }
+    },
+    "delete_view": {
+      "title": "Apakah Anda yakin ingin menghapus tampilan ini?",
+      "content": "Jika Anda mengonfirmasi, semua opsi pengurutan, filter, dan tampilan + tata letak yang telah Anda pilih untuk tampilan ini akan dihapus secara permanen tanpa cara untuk memulihkannya."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Draf item kerja",
+    "empty_state": {
+      "title": "Item kerja setengah jadi, dan segera, komentar akan muncul di sini.",
+      "description": "Untuk mencoba ini, mulai dengan menambahkan item kerja dan tinggalkan di tengah jalan atau buat draf pertama Anda di bawah ini. 😉",
+      "primary_button": {
+        "text": "Buat draf pertama Anda"
+      }
+    },
+    "delete_modal": {
+      "title": "Hapus draf",
+      "description": "Apakah Anda yakin ingin menghapus draf ini? Tindakan ini tidak dapat dibatalkan."
+    },
+    "toasts": {
+      "created": {
+        "success": "Draf berhasil dibuat",
+        "error": "Item kerja tidak dapat dibuat. Silakan coba lagi."
+      },
+      "deleted": {
+        "success": "Draf berhasil dihapus"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Tulis catatan, dokumen, atau basis pengetahuan lengkap. Dapatkan Galileo, asisten AI Plane, untuk membantu Anda memulai",
+        "description": "Halaman adalah ruang pemikiran di Plane. Catat catatan rapat, format dengan mudah, sematkan item kerja, tata menggunakan perpustakaan komponen, dan simpan semuanya dalam konteks proyek Anda. Untuk mempersingkat pekerjaan dokumen apa pun, panggil Galileo, AI Plane, dengan pintasan atau klik tombol.",
+        "primary_button": {
+          "text": "Buat halaman pertama Anda"
+        }
+      },
+      "private": {
+        "title": "Belum ada halaman pribadi",
+        "description": "Simpan pikiran pribadi Anda di sini. Ketika Anda siap berbagi, tim hanya berjarak satu klik.",
+        "primary_button": {
+          "text": "Buat halaman pertama Anda"
+        }
+      },
+      "public": {
+        "title": "Belum ada halaman ruang kerja",
+        "description": "Lihat halaman yang dibagikan dengan semua orang di ruang kerja Anda di sini.",
+        "primary_button": {
+          "text": "Buat halaman pertama Anda"
+        }
+      },
+      "archived": {
+        "title": "Belum ada halaman yang diarsipkan",
+        "description": "Arsipkan halaman yang tidak di radar Anda. Akses di sini saat diperlukan."
+      },
+      "shared": {
+        "title": "Belum ada halaman yang dibagikan",
+        "description": "Halaman yang dibagikan orang lain kepada Anda akan muncul di sini."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Tidak ada siklus aktif",
+        "description": "Siklus proyek Anda yang mencakup periode apa pun yang mencakup tanggal hari ini dalam rentangnya. Temukan kemajuan dan detail semua siklus aktif Anda di sini."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Impor anggota dari CSV",
+      "description": "Unggah CSV dengan kolom: Email, Display Name, First Name, Last Name, Role (5, 15, atau 20)",
+      "dropzone": {
+        "active": "Letakkan file CSV di sini",
+        "inactive": "Seret & lepas atau klik untuk mengunggah",
+        "file_type": "Hanya file .csv yang didukung"
+      },
+      "buttons": {
+        "cancel": "Batal",
+        "import": "Impor",
+        "try_again": "Coba Lagi",
+        "close": "Tutup",
+        "done": "Selesai"
+      },
+      "progress": {
+        "uploading": "Mengunggah...",
+        "importing": "Mengimpor..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Impor Gagal",
+          "complete": "Impor Selesai"
+        },
+        "message": {
+          "seat_limit": "Tidak dapat mengimpor anggota karena pembatasan tempat duduk.",
+          "success": "Berhasil menambahkan {count} anggota ke workspace.",
+          "no_imports": "Tidak ada anggota yang diimpor dari file CSV."
+        },
+        "stats": {
+          "successful": "Berhasil",
+          "failed": "Gagal"
+        },
+        "download_errors": "Unduh kesalahan"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "File tidak valid",
+          "message": "Hanya file CSV yang didukung."
+        },
+        "import_failed": {
+          "title": "Impor gagal",
+          "message": "Terjadi kesalahan."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/accessibility.json b/packages/i18n/src/locales/it/accessibility.json
new file mode 100644
index 0000000..16d22bc
--- /dev/null
+++ b/packages/i18n/src/locales/it/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo dell'area di lavoro",
+      "open_workspace_switcher": "Apri selettore area di lavoro",
+      "open_user_menu": "Apri menu utente",
+      "open_command_palette": "Apri tavolozza comandi",
+      "open_extended_sidebar": "Apri barra laterale estesa",
+      "close_extended_sidebar": "Chiudi barra laterale estesa",
+      "create_favorites_folder": "Crea cartella preferiti",
+      "open_folder": "Apri cartella",
+      "close_folder": "Chiudi cartella",
+      "open_favorites_menu": "Apri menu preferiti",
+      "close_favorites_menu": "Chiudi menu preferiti",
+      "enter_folder_name": "Inserisci nome cartella",
+      "create_new_project": "Crea nuovo progetto",
+      "open_projects_menu": "Apri menu progetti",
+      "close_projects_menu": "Chiudi menu progetti",
+      "toggle_quick_actions_menu": "Attiva/disattiva menu azioni rapide",
+      "open_project_menu": "Apri menu progetto",
+      "close_project_menu": "Chiudi menu progetto",
+      "collapse_sidebar": "Comprimi barra laterale",
+      "expand_sidebar": "Espandi barra laterale",
+      "edition_badge": "Apri modal piani a pagamento"
+    },
+    "auth_forms": {
+      "clear_email": "Cancella email",
+      "show_password": "Mostra password",
+      "hide_password": "Nascondi password",
+      "close_alert": "Chiudi avviso",
+      "close_popover": "Chiudi popover"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/auth.json b/packages/i18n/src/locales/it/auth.json
new file mode 100644
index 0000000..7b051cb
--- /dev/null
+++ b/packages/i18n/src/locales/it/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identità",
+    "description": "Configura il tuo dominio per accedere alle funzionalità di sicurezza inclusa l'autenticazione singola.",
+    "domain_management": {
+      "header": "Gestione domini",
+      "verified_domains": {
+        "header": "Domini verificati",
+        "description": "Verifica la proprietà di un dominio email per abilitare l'autenticazione singola.",
+        "button_text": "Aggiungi dominio",
+        "list": {
+          "domain_name": "Nome dominio",
+          "status": "Stato",
+          "status_verified": "Verificato",
+          "status_failed": "Fallito",
+          "status_pending": "In attesa"
+        },
+        "add_domain": {
+          "title": "Aggiungi dominio",
+          "description": "Aggiungi il tuo dominio per configurare SSO e verificarlo.",
+          "form": {
+            "domain_label": "Dominio",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Il dominio è obbligatorio",
+            "domain_invalid": "Inserisci un nome di dominio valido (es. plane.so)"
+          },
+          "primary_button_text": "Aggiungi dominio",
+          "primary_button_loading_text": "Aggiunta in corso",
+          "toast": {
+            "success_title": "Successo!",
+            "success_message": "Dominio aggiunto con successo. Si prega di verificarlo aggiungendo il record DNS TXT.",
+            "error_message": "Impossibile aggiungere il dominio. Riprova."
+          }
+        },
+        "verify_domain": {
+          "title": "Verifica il tuo dominio",
+          "description": "Segui questi passaggi per verificare il tuo dominio.",
+          "instructions": {
+            "label": "Istruzioni",
+            "step_1": "Vai alle impostazioni DNS per il tuo host di dominio.",
+            "step_2": {
+              "part_1": "Crea un",
+              "part_2": "record TXT",
+              "part_3": "e incolla il valore completo del record fornito di seguito."
+            },
+            "step_3": "Questo aggiornamento di solito richiede alcuni minuti ma può richiedere fino a 72 ore per essere completato.",
+            "step_4": "Clicca su \"Verifica dominio\" per confermare una volta che il tuo record DNS è stato aggiornato."
+          },
+          "verification_code_label": "Valore del record TXT",
+          "verification_code_description": "Aggiungi questo record alle tue impostazioni DNS",
+          "domain_label": "Dominio",
+          "primary_button_text": "Verifica dominio",
+          "primary_button_loading_text": "Verifica in corso",
+          "secondary_button_text": "Lo farò più tardi",
+          "toast": {
+            "success_title": "Successo!",
+            "success_message": "Dominio verificato con successo.",
+            "error_message": "Impossibile verificare il dominio. Riprova."
+          }
+        },
+        "delete_domain": {
+          "title": "Elimina dominio",
+          "description": {
+            "prefix": "Sei sicuro di voler eliminare",
+            "suffix": "? Questa azione non può essere annullata."
+          },
+          "primary_button_text": "Elimina",
+          "primary_button_loading_text": "Eliminazione in corso",
+          "secondary_button_text": "Annulla",
+          "toast": {
+            "success_title": "Successo!",
+            "success_message": "Dominio eliminato con successo.",
+            "error_message": "Impossibile eliminare il dominio. Riprova."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Accesso singolo",
+      "disabled_message": "Aggiungi un dominio verificato per configurare SSO",
+      "configure": {
+        "create": "Configura",
+        "update": "Modifica"
+      },
+      "switch_alert_modal": {
+        "title": "Passare al metodo SSO {newProviderShortName}?",
+        "content": "Stai per abilitare {newProviderLongName} ({newProviderShortName}). Questa azione disabiliterà automaticamente {activeProviderLongName} ({activeProviderShortName}). Gli utenti che tentano di accedere tramite {activeProviderShortName} non saranno più in grado di accedere alla piattaforma fino a quando non passeranno al nuovo metodo. Sei sicuro di voler procedere?",
+        "primary_button_text": "Passa",
+        "primary_button_text_loading": "Passaggio in corso",
+        "secondary_button_text": "Annulla"
+      },
+      "form_section": {
+        "title": "Dettagli forniti da IdP per {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Salvataggio in corso",
+        "save_changes": "Salva modifiche",
+        "configure_only": "Solo configurazione",
+        "configure_and_enable": "Configura e abilita",
+        "default": "Salva"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} dettagli forniti per il tuo IdP",
+        "button_text": "Ottieni dettagli di configurazione"
+      },
+      "saml": {
+        "header": "Abilita SAML",
+        "description": "Configura il tuo provider di identità SAML per abilitare l'autenticazione singola.",
+        "configure": {
+          "title": "Abilita SAML",
+          "description": "Verifica la proprietà di un dominio email per accedere alle funzionalità di sicurezza inclusa l'autenticazione singola.",
+          "toast": {
+            "success_title": "Successo!",
+            "create_success_message": "Provider SAML creato con successo.",
+            "update_success_message": "Provider SAML aggiornato con successo.",
+            "error_title": "Errore!",
+            "error_message": "Impossibile salvare il provider SAML. Riprova."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Dettagli web",
+            "entity_id": {
+              "label": "Entity ID | Audience | Informazioni metadati",
+              "description": "Genereremo questa parte dei metadati che identifica questa app Plane come un servizio autorizzato sul tuo IdP."
+            },
+            "callback_url": {
+              "label": "URL di accesso singolo",
+              "description": "Genereremo questo per te. Aggiungilo nel campo URL di reindirizzamento di accesso del tuo IdP."
+            },
+            "logout_url": {
+              "label": "URL di logout singolo",
+              "description": "Genereremo questo per te. Aggiungilo nel campo URL di reindirizzamento di logout singolo del tuo IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Dettagli mobile",
+            "entity_id": {
+              "label": "Entity ID | Audience | Informazioni metadati",
+              "description": "Genereremo questa parte dei metadati che identifica questa app Plane come un servizio autorizzato sul tuo IdP."
+            },
+            "callback_url": {
+              "label": "URL di accesso singolo",
+              "description": "Genereremo questo per te. Aggiungilo nel campo URL di reindirizzamento di accesso del tuo IdP."
+            },
+            "logout_url": {
+              "label": "URL di logout singolo",
+              "description": "Genereremo questo per te. Aggiungilo nel campo URL di reindirizzamento di logout del tuo IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Dettagli di mappatura",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Abilita OIDC",
+        "description": "Configura il tuo provider di identità OIDC per abilitare l'autenticazione singola.",
+        "configure": {
+          "title": "Abilita OIDC",
+          "description": "Verifica la proprietà di un dominio email per accedere alle funzionalità di sicurezza inclusa l'autenticazione singola.",
+          "toast": {
+            "success_title": "Successo!",
+            "create_success_message": "Provider OIDC creato con successo.",
+            "update_success_message": "Provider OIDC aggiornato con successo.",
+            "error_title": "Errore!",
+            "error_message": "Impossibile salvare il provider OIDC. Riprova."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Dettagli web",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "Genereremo questo per questa app Plane. Aggiungilo come origine attendibile nel campo corrispondente del tuo IdP."
+            },
+            "callback_url": {
+              "label": "URL di reindirizzamento",
+              "description": "Genereremo questo per te. Aggiungilo nel campo URL di reindirizzamento di accesso del tuo IdP."
+            },
+            "logout_url": {
+              "label": "URL di logout",
+              "description": "Genereremo questo per te. Aggiungilo nel campo URL di reindirizzamento di logout del tuo IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Dettagli mobile",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "Genereremo questo per questa app Plane. Aggiungilo come origine attendibile nel campo corrispondente del tuo IdP."
+            },
+            "callback_url": {
+              "label": "URL di reindirizzamento",
+              "description": "Genereremo questo per te. Aggiungilo nel campo URL di reindirizzamento di accesso del tuo IdP."
+            },
+            "logout_url": {
+              "label": "URL di logout",
+              "description": "Genereremo questo per te. Aggiungilo nel campo URL di reindirizzamento di logout del tuo IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "Email",
+        "placeholder": "nome@azienda.com",
+        "errors": {
+          "required": "Email è obbligatoria",
+          "invalid": "Email non valida"
+        }
+      },
+      "password": {
+        "label": "Password",
+        "set_password": "Imposta una password",
+        "placeholder": "Inserisci la password",
+        "confirm_password": {
+          "label": "Conferma password",
+          "placeholder": "Conferma password"
+        },
+        "current_password": {
+          "label": "Password attuale"
+        },
+        "new_password": {
+          "label": "Nuova password",
+          "placeholder": "Inserisci nuova password"
+        },
+        "change_password": {
+          "label": {
+            "default": "Cambia password",
+            "submitting": "Cambiando password"
+          }
+        },
+        "errors": {
+          "match": "Le password non corrispondono",
+          "empty": "Per favore inserisci la tua password",
+          "length": "La lunghezza della password deve essere superiore a 8 caratteri",
+          "strength": {
+            "weak": "La password è debole",
+            "strong": "La password è forte"
+          }
+        },
+        "submit": "Imposta password",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Successo!",
+              "message": "Password cambiata con successo."
+            },
+            "error": {
+              "title": "Errore!",
+              "message": "Qualcosa è andato storto. Per favore riprova."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Codice unico",
+        "placeholder": "123456",
+        "paste_code": "Incolla il codice inviato alla tua email",
+        "requesting_new_code": "Richiesta di nuovo codice",
+        "sending_code": "Invio codice"
+      },
+      "already_have_an_account": "Hai già un account?",
+      "login": "Accedi",
+      "create_account": "Crea un account",
+      "new_to_plane": "Nuovo su Plane?",
+      "back_to_sign_in": "Torna al login",
+      "resend_in": "Reinvia in {seconds} secondi",
+      "sign_in_with_unique_code": "Accedi con codice unico",
+      "forgot_password": "Hai dimenticato la password?",
+      "username": {
+        "label": "Nome utente",
+        "placeholder": "Inserisci il tuo nome utente"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Crea un account per iniziare a gestire il lavoro con il tuo team.",
+        "step": {
+          "email": {
+            "header": "Registrati",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Registrati",
+            "sub_header": "Registrati utilizzando una combinazione email-password."
+          },
+          "unique_code": {
+            "header": "Registrati",
+            "sub_header": "Registrati utilizzando un codice unico inviato all'indirizzo email sopra."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Prova a impostare una password forte per procedere"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Accedi per iniziare a gestire il lavoro con il tuo team.",
+        "step": {
+          "email": {
+            "header": "Accedi o registrati",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Accedi o registrati",
+            "sub_header": "Usa la tua combinazione email-password per accedere."
+          },
+          "unique_code": {
+            "header": "Accedi o registrati",
+            "sub_header": "Accedi utilizzando un codice unico inviato all'indirizzo email sopra."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Reimposta la tua password",
+      "description": "Inserisci l'indirizzo email verificato del tuo account utente e ti invieremo un link per reimpostare la password.",
+      "email_sent": "Abbiamo inviato il link di reimpostazione al tuo indirizzo email",
+      "send_reset_link": "Invia link di reimpostazione",
+      "errors": {
+        "smtp_not_enabled": "Vediamo che il tuo amministratore non ha abilitato SMTP, non saremo in grado di inviare un link di reimpostazione della password"
+      },
+      "toast": {
+        "success": {
+          "title": "Email inviata",
+          "message": "Controlla la tua inbox per un link per reimpostare la tua password. Se non appare entro pochi minuti, controlla la tua cartella spam."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Qualcosa è andato storto. Per favore riprova."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Imposta nuova password",
+      "description": "Proteggi il tuo account con una password forte"
+    },
+    "set_password": {
+      "title": "Proteggi il tuo account",
+      "description": "Impostare una password ti aiuta a accedere in modo sicuro"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Errore!",
+          "message": "Impossibile disconnettersi. Per favore riprova."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Continua con {ldapProviderName}",
+        "sub_header": "Inserisci le tue credenziali {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/automation.json b/packages/i18n/src/locales/it/automation.json
new file mode 100644
index 0000000..f279366
--- /dev/null
+++ b/packages/i18n/src/locales/it/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Automazioni personalizzate",
+      "create_automation": "Crea automazione"
+    },
+    "scope": {
+      "label": "Ambito",
+      "run_on": "Esegui su"
+    },
+    "trigger": {
+      "label": "Trigger",
+      "add_trigger": "Aggiungi trigger",
+      "sidebar_header": "Configurazione trigger",
+      "input_label": "Qual è il trigger per questa automazione?",
+      "input_placeholder": "Seleziona un'opzione",
+      "section_plane_events": "Eventi Plane",
+      "section_time_based": "Basato sul tempo",
+      "fixed_schedule": "Pianificazione fissa",
+      "schedule": {
+        "frequency": "Frequenza",
+        "select_day": "Seleziona giorno",
+        "day_of_month": "Giorno del mese",
+        "monthly_every": "Ogni",
+        "monthly_day_aria": "Giorno {day}",
+        "time": "Ora",
+        "hour": "Ora",
+        "minute": "Minuto",
+        "hour_suffix": "h",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Fuso orario",
+        "timezone_placeholder": "Seleziona un fuso orario",
+        "frequency_daily": "Giornaliero",
+        "frequency_weekly": "Settimanale",
+        "frequency_monthly": "Mensile",
+        "on": "Il",
+        "validation_weekly_day_required": "Seleziona almeno un giorno della settimana.",
+        "validation_monthly_date_required": "Seleziona un giorno del mese.",
+        "main_content_schedule_summary_daily": "Ogni giorno alle {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Ogni settimana il {days} alle {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Ogni mese il giorno {day} alle {time} ({timezone}).",
+        "schedule_mode": "Modalità pianificazione",
+        "schedule_mode_fixed": "Fisso",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Inserisci espressione Cron",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Espressione cron non valida.",
+        "cron_preview": "Questa espressione Cron esegue \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Indietro",
+        "next": "Aggiungi azione"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Non puoi modificare il tipo di trigger una volta creato"
+      }
+    },
+    "condition": {
+      "label": "A condizione che",
+      "add_condition": "Aggiungi condizione",
+      "adding_condition": "Aggiungendo condizione"
+    },
+    "action": {
+      "label": "Azione",
+      "add_action": "Aggiungi azione",
+      "sidebar_header": "Azioni",
+      "input_label": "Cosa fa l'automazione?",
+      "input_placeholder": "Seleziona un'opzione",
+      "handler_name": {
+        "add_comment": "Aggiungi commento",
+        "change_property": "Cambia proprietà",
+        "run_script": "Esegui script"
+      },
+      "configuration": {
+        "label": "Configurazione",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Seleziona una proprietà",
+            "change_type": "Seleziona",
+            "property_value_select": "{count, plural, one{Seleziona valore} other{Seleziona valori}}",
+            "property_value_select_date": "Seleziona data"
+          },
+          "validation": {
+            "property_name_required": "Il nome della proprietà è obbligatorio",
+            "change_type_required": "Il tipo di modifica è obbligatorio",
+            "property_value_required": "Il valore della proprietà è obbligatorio"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Aggiungi commento"
+      },
+      "run_script_block": {
+        "title": "Esegui script"
+      },
+      "change_property_block": {
+        "title": "Cambia proprietà"
+      },
+      "validation": {
+        "delete_only_action": "Disabilita l'automazione prima di eliminare la sua unica azione."
+      }
+    },
+    "conjunctions": {
+      "and": "E",
+      "or": "O",
+      "if": "Se",
+      "then": "Allora"
+    },
+    "enable": {
+      "alert": "Premi 'Abilita' quando la tua automazione è completa. Una volta abilitata, l'automazione sarà pronta per essere eseguita.",
+      "validation": {
+        "required": "L'automazione deve avere un trigger e almeno un'azione per essere abilitata."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "L'automazione deve essere disabilitata prima di eliminarla."
+      }
+    },
+    "table": {
+      "title": "Titolo automazione",
+      "scope": "Ambito",
+      "projects": "Progetti",
+      "last_run_on": "Ultima esecuzione il",
+      "created_on": "Creata il",
+      "last_updated_on": "Ultimo aggiornamento il",
+      "last_run_status": "Stato ultima esecuzione",
+      "average_duration": "Durata media",
+      "owner": "Proprietario",
+      "executions": "Esecuzioni"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Crea automazione",
+        "update": "Aggiorna automazione"
+      },
+      "title": {
+        "placeholder": "Dai un nome alla tua automazione.",
+        "required_error": "Il titolo è obbligatorio"
+      },
+      "description": {
+        "placeholder": "Descrivi la tua automazione."
+      },
+      "submit_button": {
+        "create": "Crea automazione",
+        "update": "Aggiorna automazione"
+      }
+    },
+    "delete_modal": {
+      "heading": "Elimina automazione"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Mostra errori",
+        "all": "Tutto",
+        "only_activity": "Solo attività",
+        "only_run_history": "Solo cronologia esecuzioni"
+      },
+      "run_history": {
+        "initiator": "Iniziatore"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Successo!",
+          "message": "Automazione creata con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Creazione automazione fallita."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Successo!",
+          "message": "Automazione aggiornata con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Aggiornamento automazione fallito."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Successo!",
+          "message": "Automazione abilitata con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Abilitazione automazione fallita."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Successo!",
+          "message": "Automazione disabilitata con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Disabilitazione automazione fallita."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automazione eliminata",
+          "message": "{name}, l'automazione, è stata eliminata dal tuo progetto."
+        },
+        "error": {
+          "title": "Non siamo riusciti a eliminare quell'automazione questa volta.",
+          "message": "Prova a eliminarla di nuovo o torna più tardi. Se non riesci a eliminarla, contattaci."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Errore!",
+            "message": "Impossibile creare l'azione. Riprova!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Errore!",
+            "message": "Impossibile aggiornare l'azione. Riprova!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Non ci sono ancora automazioni da mostrare.",
+        "description": "Le automazioni ti aiutano a eliminare le attività ripetitive impostando trigger, condizioni e azioni. Creane una per risparmiare tempo e mantenere il lavoro in movimento senza sforzo."
+      },
+      "upgrade": {
+        "title": "Automazioni",
+        "description": "Le automazioni sono un modo per automatizzare le attività nel tuo progetto.",
+        "sub_description": "Recupera l'80% del tuo tempo amministrativo quando usi le Automazioni."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Seleziona i progetti su cui eseguire questa automazione",
+        "all_projects": {
+          "label": "Tutti i progetti",
+          "description": "L'automazione verrà eseguita per tutti i progetti nello spazio di lavoro."
+        },
+        "select_projects": {
+          "label": "Seleziona progetti",
+          "description": "L'automazione verrà eseguita per i progetti selezionati nello spazio di lavoro.",
+          "placeholder": "Seleziona progetti"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automazioni",
+        "title": "Automazioni",
+        "description": "Standardizza i processi nel tuo spazio di lavoro con le automazioni globali."
+      },
+      "table": {
+        "scope": {
+          "global": "Globale",
+          "project": {
+            "label": "Progetto",
+            "multiple": "Multipli",
+            "all": "Tutti"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/common.json b/packages/i18n/src/locales/it/common.json
new file mode 100644
index 0000000..6fda1b0
--- /dev/null
+++ b/packages/i18n/src/locales/it/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Stiamo lavorando su questo. Se hai bisogno di assistenza immediata,",
+    "reach_out_to_us": "contattaci",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Altrimenti, prova ad aggiornare la pagina di tanto in tanto o visita la nostra",
+    "status_page": "pagina di stato"
+  },
+  "submit": "Conferma",
+  "cancel": "Annulla",
+  "loading": "Caricamento",
+  "error": "Errore",
+  "success": "Successo",
+  "warning": "Avviso",
+  "info": "Informazioni",
+  "close": "Chiudi",
+  "yes": "Sì",
+  "no": "No",
+  "ok": "OK",
+  "name": "Nome",
+  "unknown_user": "Utente sconosciuto",
+  "description": "Descrizione",
+  "search": "Cerca",
+  "add_member": "Aggiungi membro",
+  "adding_members": "Aggiungendo membri",
+  "remove_member": "Rimuovi membro",
+  "add_members": "Aggiungi membri",
+  "adding_member": "Aggiungendo membro",
+  "remove_members": "Rimuovi membri",
+  "add": "Aggiungi",
+  "adding": "Aggiungendo",
+  "remove": "Rimuovi",
+  "add_new": "Aggiungi nuovo",
+  "remove_selected": "Rimuovi selezionati",
+  "first_name": "Nome",
+  "last_name": "Cognome",
+  "email": "Email",
+  "display_name": "Nome visualizzato",
+  "role": "Ruolo",
+  "timezone": "Fuso orario",
+  "avatar": "Avatar",
+  "cover_image": "Immagine di copertina",
+  "password": "Password",
+  "change_cover": "Cambia copertina",
+  "language": "Lingua",
+  "saving": "Salvataggio in corso",
+  "save_changes": "Salva modifiche",
+  "deactivate_account": "Disattiva account",
+  "deactivate_account_description": "Disattivando un account, tutti i dati e le risorse al suo interno verranno rimossi definitivamente e non potranno essere recuperati.",
+  "profile_settings": "Impostazioni del profilo",
+  "your_account": "Il tuo account",
+  "security": "Sicurezza",
+  "activity": "Attività",
+  "activity_empty_state": {
+    "no_activity": "Nessuna attività",
+    "no_transitions": "Nessuna transizione",
+    "no_comments": "Nessun commento ancora",
+    "no_worklogs": "Nessun registro di lavoro ancora",
+    "no_history": "Nessuna cronologia ancora"
+  },
+  "preferences": "Preferenze",
+  "language_and_time": "Lingua e ora",
+  "notifications": "Notifiche",
+  "workspaces": "Spazi di lavoro",
+  "create_workspace": "Crea spazio di lavoro",
+  "invitations": "Inviti",
+  "summary": "Riepilogo",
+  "assigned": "Assegnato",
+  "created": "Creato",
+  "subscribed": "Iscritto",
+  "you_do_not_have_the_permission_to_access_this_page": "Non hai il permesso di accedere a questa pagina.",
+  "something_went_wrong_please_try_again": "Qualcosa è andato storto. Per favore, riprova.",
+  "load_more": "Carica di più",
+  "select_or_customize_your_interface_color_scheme": "Seleziona o personalizza il tuo schema di colori dell'interfaccia.",
+  "timezone_setting": "Impostazione del fuso orario corrente.",
+  "language_setting": "Scegli la lingua utilizzata nell'interfaccia utente.",
+  "settings_moved_to_preferences": "Le impostazioni di fuso orario e lingua sono state spostate nelle preferenze.",
+  "go_to_preferences": "Vai alle preferenze",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Seleziona lo stile di movimento del cursore più adatto a te.",
+  "theme": "Tema",
+  "smooth_cursor": "Cursore fluido",
+  "system_preference": "Preferenza di sistema",
+  "light": "Chiaro",
+  "dark": "Scuro",
+  "light_contrast": "Contrasto elevato chiaro",
+  "dark_contrast": "Contrasto elevato scuro",
+  "custom": "Tema personalizzato",
+  "select_your_theme": "Seleziona il tuo tema",
+  "customize_your_theme": "Personalizza il tuo tema",
+  "background_color": "Colore di sfondo",
+  "text_color": "Colore del testo",
+  "primary_color": "Colore primario (Tema)",
+  "sidebar_background_color": "Colore di sfondo della barra laterale",
+  "sidebar_text_color": "Colore del testo della barra laterale",
+  "set_theme": "Imposta tema",
+  "enter_a_valid_hex_code_of_6_characters": "Inserisci un codice esadecimale valido di 6 caratteri",
+  "background_color_is_required": "Il colore di sfondo è obbligatorio",
+  "text_color_is_required": "Il colore del testo è obbligatorio",
+  "primary_color_is_required": "Il colore primario è obbligatorio",
+  "sidebar_background_color_is_required": "Il colore di sfondo della barra laterale è obbligatorio",
+  "sidebar_text_color_is_required": "Il colore del testo della barra laterale è obbligatorio",
+  "updating_theme": "Aggiornamento del tema in corso",
+  "theme_updated_successfully": "Tema aggiornato con successo",
+  "failed_to_update_the_theme": "Impossibile aggiornare il tema",
+  "email_notifications": "Notifiche via email",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Rimani aggiornato sugli elementi di lavoro a cui sei iscritto. Abilita questa opzione per ricevere notifiche.",
+  "email_notification_setting_updated_successfully": "Impostazioni delle notifiche email aggiornate con successo",
+  "failed_to_update_email_notification_setting": "Impossibile aggiornare le impostazioni delle notifiche email",
+  "notify_me_when": "Avvisami quando",
+  "property_changes": "Modifiche alle proprietà",
+  "property_changes_description": "Avvisami quando le proprietà degli elementi di lavoro, come assegnatari, priorità, stime o altro, cambiano.",
+  "state_change": "Cambio di stato",
+  "state_change_description": "Avvisami quando l'elemento di lavoro passa a uno stato diverso",
+  "issue_completed": "Elemento di lavoro completato",
+  "issue_completed_description": "Avvisami solo quando un elemento di lavoro è completato",
+  "comments": "Commenti",
+  "comments_description": "Avvisami quando qualcuno lascia un commento sull'elemento di lavoro",
+  "mentions": "Menzioni",
+  "mentions_description": "Avvisami solo quando qualcuno mi menziona nei commenti o nella descrizione",
+  "old_password": "Vecchia password",
+  "general_settings": "Impostazioni generali",
+  "sign_out": "Esci",
+  "signing_out": "Uscita in corso",
+  "active_cycles": "Cicli attivi",
+  "active_cycles_description": "Monitora i cicli attraverso i progetti, segui gli elementi di lavoro ad alta priorità e analizza i cicli che necessitano attenzione.",
+  "on_demand_snapshots_of_all_your_cycles": "Snapshot on-demand di tutti i tuoi cicli",
+  "upgrade": "Aggiorna",
+  "10000_feet_view": "Vista panoramica (10.000 piedi) di tutti i cicli attivi.",
+  "10000_feet_view_description": "Effettua uno zoom indietro per vedere i cicli in esecuzione in tutti i tuoi progetti contemporaneamente, invece di passare da un ciclo all'altro in ogni progetto.",
+  "get_snapshot_of_each_active_cycle": "Ottieni uno snapshot di ogni ciclo attivo.",
+  "get_snapshot_of_each_active_cycle_description": "Monitora metriche di alto livello per tutti i cicli attivi, osserva il loro stato di avanzamento e valuta la portata rispetto alle scadenze.",
+  "compare_burndowns": "Confronta i burndown.",
+  "compare_burndowns_description": "Monitora le prestazioni di ciascun team con una rapida occhiata al report del burndown di ogni ciclo.",
+  "quickly_see_make_or_break_issues": "Visualizza rapidamente gli elementi di lavoro critici.",
+  "quickly_see_make_or_break_issues_description": "Visualizza in anteprima gli elementi di lavoro ad alta priorità per ogni ciclo in base alle scadenze. Vedi tutti con un solo clic.",
+  "zoom_into_cycles_that_need_attention": "Zoom sui cicli che richiedono attenzione.",
+  "zoom_into_cycles_that_need_attention_description": "Esamina lo stato di ogni ciclo che non rispetta le aspettative con un clic.",
+  "stay_ahead_of_blockers": "Anticipa gli ostacoli.",
+  "stay_ahead_of_blockers_description": "Individua le sfide tra i progetti e visualizza le dipendenze inter-cicliche non evidenti in altre viste.",
+  "analytics": "Analisi",
+  "workspace_invites": "Inviti allo spazio di lavoro",
+  "enter_god_mode": "Entra in modalità dio",
+  "workspace_logo": "Logo dello spazio di lavoro",
+  "new_issue": "Nuovo elemento di lavoro",
+  "your_work": "Il tuo lavoro",
+  "drafts": "Bozze",
+  "projects": "Progetti",
+  "views": "Visualizzazioni",
+  "archives": "Archivi",
+  "settings": "Impostazioni",
+  "failed_to_move_favorite": "Impossibile spostare il preferito",
+  "favorites": "Preferiti",
+  "no_favorites_yet": "Nessun preferito ancora",
+  "create_folder": "Crea cartella",
+  "new_folder": "Nuova cartella",
+  "favorite_updated_successfully": "Preferito aggiornato con successo",
+  "favorite_created_successfully": "Preferito creato con successo",
+  "folder_already_exists": "La cartella esiste già",
+  "folder_name_cannot_be_empty": "Il nome della cartella non può essere vuoto",
+  "something_went_wrong": "Qualcosa è andato storto",
+  "failed_to_reorder_favorite": "Impossibile riordinare il preferito",
+  "favorite_removed_successfully": "Preferito rimosso con successo",
+  "failed_to_create_favorite": "Impossibile creare il preferito",
+  "failed_to_rename_favorite": "Impossibile rinominare il preferito",
+  "project_link_copied_to_clipboard": "Link del progetto copiato negli appunti",
+  "link_copied": "Link copiato",
+  "add_project": "Aggiungi progetto",
+  "create_project": "Crea progetto",
+  "failed_to_remove_project_from_favorites": "Impossibile rimuovere il progetto dai preferiti. Per favore, riprova.",
+  "project_created_successfully": "Progetto creato con successo",
+  "project_created_successfully_description": "Progetto creato con successo. Ora puoi iniziare ad aggiungere elementi di lavoro.",
+  "project_name_already_taken": "Il nome del progetto è già stato utilizzato.",
+  "project_name_cannot_contain_special_characters": "Il nome del progetto non può contenere caratteri speciali.",
+  "project_identifier_already_taken": "L'identificatore del progetto è già stato utilizzato.",
+  "project_cover_image_alt": "Immagine di copertina del progetto",
+  "name_is_required": "Il nome è obbligatorio",
+  "title_should_be_less_than_255_characters": "Il titolo deve contenere meno di 255 caratteri",
+  "project_name": "Nome del progetto",
+  "project_id_must_be_at_least_1_character": "L'ID del progetto deve contenere almeno 1 carattere",
+  "project_id_must_be_at_most_5_characters": "L'ID del progetto deve contenere al massimo 5 caratteri",
+  "project_id": "ID del progetto",
+  "project_id_tooltip_content": "Ti aiuta a identificare in modo univoco gli elementi di lavoro nel progetto. Massimo 50 caratteri.",
+  "description_placeholder": "Descrizione",
+  "only_alphanumeric_non_latin_characters_allowed": "Sono ammessi solo caratteri alfanumerici e non latini.",
+  "project_id_is_required": "L'ID del progetto è obbligatorio",
+  "project_id_allowed_char": "Sono ammessi solo caratteri alfanumerici e non latini.",
+  "project_id_min_char": "L'ID del progetto deve contenere almeno 1 carattere",
+  "project_id_max_char": "L'ID del progetto deve contenere al massimo {max} caratteri",
+  "project_description_placeholder": "Inserisci la descrizione del progetto",
+  "select_network": "Seleziona rete",
+  "lead": "Responsabile",
+  "date_range": "Intervallo di date",
+  "private": "Privato",
+  "public": "Pubblico",
+  "accessible_only_by_invite": "Accessibile solo su invito",
+  "anyone_in_the_workspace_except_guests_can_join": "Chiunque nello spazio di lavoro, tranne gli ospiti, può unirsi",
+  "creating": "Creazione in corso",
+  "creating_project": "Creazione del progetto in corso",
+  "adding_project_to_favorites": "Aggiunta del progetto ai preferiti in corso",
+  "project_added_to_favorites": "Progetto aggiunto ai preferiti",
+  "couldnt_add_the_project_to_favorites": "Impossibile aggiungere il progetto ai preferiti. Per favore, riprova.",
+  "removing_project_from_favorites": "Rimozione del progetto dai preferiti in corso",
+  "project_removed_from_favorites": "Progetto rimosso dai preferiti",
+  "couldnt_remove_the_project_from_favorites": "Impossibile rimuovere il progetto dai preferiti. Per favore, riprova.",
+  "add_to_favorites": "Aggiungi ai preferiti",
+  "remove_from_favorites": "Rimuovi dai preferiti",
+  "publish_project": "Pubblica progetto",
+  "publish": "Pubblica",
+  "copy_link": "Copia link",
+  "leave_project": "Lascia progetto",
+  "join_the_project_to_rearrange": "Unisciti al progetto per riorganizzare",
+  "drag_to_rearrange": "Trascina per riorganizzare",
+  "congrats": "Congratulazioni!",
+  "open_project": "Apri progetto",
+  "issues": "Elementi di lavoro",
+  "cycles": "Cicli",
+  "modules": "Moduli",
+  "pages": "Pagine",
+  "intake": "Accoglienza",
+  "renew": "Rinnova",
+  "preview": "Anteprima",
+  "time_tracking": "Tracciamento del tempo",
+  "work_management": "Gestione del lavoro",
+  "projects_and_issues": "Progetti ed elementi di lavoro",
+  "projects_and_issues_description": "Attiva o disattiva queste opzioni per questo progetto.",
+  "cycles_description": "Definisci il tempo di lavoro per progetto e adatta il periodo secondo necessità. Un ciclo può durare 2 settimane, il successivo 1 settimana.",
+  "modules_description": "Organizza il lavoro in sotto-progetti con responsabili e assegnatari dedicati.",
+  "views_description": "Salva ordinamenti, filtri e opzioni di visualizzazione personalizzati o condividili con il tuo team.",
+  "pages_description": "Crea e modifica contenuti liberi: appunti, documenti, qualsiasi cosa.",
+  "intake_description": "Consenti ai non membri di segnalare bug, feedback e suggerimenti senza interrompere il tuo flusso di lavoro.",
+  "time_tracking_description": "Registra il tempo trascorso su elementi di lavoro e progetti.",
+  "work_management_description": "Gestisci il tuo lavoro e i tuoi progetti con facilità.",
+  "documentation": "Documentazione",
+  "message_support": "Contatta il supporto",
+  "contact_sales": "Contatta le vendite",
+  "hyper_mode": "Modalità Hyper",
+  "keyboard_shortcuts": "Scorciatoie da tastiera",
+  "whats_new": "Novità?",
+  "version": "Versione",
+  "we_are_having_trouble_fetching_the_updates": "Stiamo riscontrando problemi nel recuperare gli aggiornamenti.",
+  "our_changelogs": "i nostri changelog",
+  "for_the_latest_updates": "per gli ultimi aggiornamenti.",
+  "please_visit": "Per favore visita",
+  "docs": "Documentazione",
+  "full_changelog": "Changelog completo",
+  "support": "Supporto",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Supportato da Plane Pages",
+  "please_select_at_least_one_invitation": "Seleziona almeno un invito.",
+  "please_select_at_least_one_invitation_description": "Seleziona almeno un invito per unirti allo spazio di lavoro.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Abbiamo notato che qualcuno ti ha invitato a unirti a uno spazio di lavoro",
+  "join_a_workspace": "Unisciti a uno spazio di lavoro",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Abbiamo notato che qualcuno ti ha invitato a unirti a uno spazio di lavoro",
+  "join_a_workspace_description": "Unisciti a uno spazio di lavoro",
+  "accept_and_join": "Accetta e unisciti",
+  "go_home": "Vai alla home",
+  "no_pending_invites": "Nessun invito in sospeso",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Qui puoi vedere se qualcuno ti invita a uno spazio di lavoro",
+  "back_to_home": "Torna alla home",
+  "workspace_name": "nome-spazio-di-lavoro",
+  "deactivate_your_account": "Disattiva il tuo account",
+  "deactivate_your_account_description": "Una volta disattivato, non potrai più essere assegnato a elementi di lavoro né addebitato per il tuo spazio di lavoro. Per riattivare il tuo account, avrai bisogno di un invito a uno spazio di lavoro associato a questo indirizzo email.",
+  "deactivating": "Disattivazione in corso",
+  "confirm": "Conferma",
+  "confirming": "Conferma in corso",
+  "draft_created": "Bozza creata",
+  "issue_created_successfully": "Elemento di lavoro creato con successo",
+  "draft_creation_failed": "Creazione della bozza fallita",
+  "issue_creation_failed": "Creazione dell'elemento di lavoro fallita",
+  "draft_issue": "Bozza di elemento di lavoro",
+  "issue_updated_successfully": "Elemento di lavoro aggiornato con successo",
+  "issue_could_not_be_updated": "Impossibile aggiornare l'elemento di lavoro",
+  "create_a_draft": "Crea una bozza",
+  "save_to_drafts": "Salva nelle bozze",
+  "save": "Salva",
+  "update": "Aggiorna",
+  "updating": "Aggiornamento in corso",
+  "create_new_issue": "Crea un nuovo elemento di lavoro",
+  "editor_is_not_ready_to_discard_changes": "L'editor non è pronto per scartare le modifiche",
+  "failed_to_move_issue_to_project": "Impossibile spostare l'elemento di lavoro nel progetto",
+  "create_more": "Crea altri",
+  "add_to_project": "Aggiungi al progetto",
+  "discard": "Scarta",
+  "duplicate_issue_found": "Elemento di lavoro duplicato trovato",
+  "duplicate_issues_found": "Elementi di lavoro duplicati trovati",
+  "no_matching_results": "Nessun risultato corrispondente",
+  "title_is_required": "Il titolo è obbligatorio",
+  "title": "Titolo",
+  "state": "Stato",
+  "transition": "Transizione",
+  "history": "Cronologia",
+  "priority": "Priorità",
+  "none": "Nessuna",
+  "urgent": "Urgente",
+  "high": "Alta",
+  "medium": "Media",
+  "low": "Bassa",
+  "members": "Membri",
+  "assignee": "Assegnatario",
+  "assignees": "Assegnatari",
+  "subscriber": "{count, plural, one{# Iscritto} other{# Iscritti}}",
+  "you": "Tu",
+  "labels": "Etichette",
+  "create_new_label": "Crea nuova etichetta",
+  "label_name": "Nome etichetta",
+  "failed_to_create_label": "Impossibile creare l'etichetta. Riprova.",
+  "start_date": "Data di inizio",
+  "end_date": "Data di fine",
+  "due_date": "Scadenza",
+  "target_date": "Data prevista",
+  "estimate": "Stima",
+  "change_parent_issue": "Cambia elemento di lavoro principale",
+  "remove_parent_issue": "Rimuovi elemento di lavoro principale",
+  "add_parent": "Aggiungi elemento principale",
+  "loading_members": "Caricamento membri",
+  "view_link_copied_to_clipboard": "Link di visualizzazione copiato negli appunti.",
+  "required": "Obbligatorio",
+  "optional": "Opzionale",
+  "Cancel": "Annulla",
+  "edit": "Modifica",
+  "archive": "Archivia",
+  "restore": "Ripristina",
+  "open_in_new_tab": "Apri in una nuova scheda",
+  "delete": "Elimina",
+  "deleting": "Eliminazione in corso",
+  "make_a_copy": "Crea una copia",
+  "move_to_project": "Sposta nel progetto",
+  "good": "Buono",
+  "morning": "Mattina",
+  "afternoon": "Pomeriggio",
+  "evening": "Sera",
+  "show_all": "Mostra tutto",
+  "show_less": "Mostra meno",
+  "no_data_yet": "Nessun dato disponibile",
+  "syncing": "Sincronizzazione in corso",
+  "add_work_item": "Aggiungi elemento di lavoro",
+  "advanced_description_placeholder": "Premi '/' per i comandi",
+  "create_work_item": "Crea elemento di lavoro",
+  "attachments": "Allegati",
+  "declining": "Rifiuto in corso",
+  "declined": "Rifiutato",
+  "decline": "Rifiuta",
+  "unassigned": "Non assegnato",
+  "work_items": "Elementi di lavoro",
+  "add_link": "Aggiungi link",
+  "points": "Punti",
+  "no_assignee": "Nessun assegnatario",
+  "no_assignees_yet": "Nessun assegnatario ancora",
+  "no_labels_yet": "Nessuna etichetta ancora",
+  "ideal": "Ideale",
+  "current": "Corrente",
+  "no_matching_members": "Nessun membro corrispondente",
+  "leaving": "Uscita in corso",
+  "removing": "Rimozione in corso",
+  "leave": "Esci",
+  "refresh": "Aggiorna",
+  "refreshing": "Aggiornamento in corso",
+  "refresh_status": "Stato dell'aggiornamento",
+  "prev": "Precedente",
+  "next": "Successivo",
+  "re_generating": "Rigenerazione in corso",
+  "re_generate": "Rigenera",
+  "re_generate_key": "Rigenera chiave",
+  "export": "Esporta",
+  "member": "{count, plural, one {# membro} other {# membri}}",
+  "new_password_must_be_different_from_old_password": "La nuova password deve essere diversa dalla password precedente",
+  "edited": "Modificato",
+  "bot": "Bot",
+  "settings_description": "Gestisci le tue preferenze di account, spazio di lavoro e progetto in un unico posto. Passa da una scheda all'altra per configurare facilmente.",
+  "back_to_workspace": "Torna allo spazio di lavoro",
+  "upgrade_request": "Chiedi all'admin dello spazio di lavoro di effettuare l'upgrade.",
+  "copied_to_clipboard": "Copiato negli appunti",
+  "copied_to_clipboard_description": "L'URL è stato copiato con successo negli appunti",
+  "toast": {
+    "success": "Successo!",
+    "error": "Errore!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Link creato",
+        "message": "Il link è stato creato con successo"
+      },
+      "not_created": {
+        "title": "Link non creato",
+        "message": "Il link non può essere creato"
+      },
+      "updated": {
+        "title": "Link aggiornato",
+        "message": "Il link è stato aggiornato con successo"
+      },
+      "not_updated": {
+        "title": "Link non aggiornato",
+        "message": "Il link non può essere aggiornato"
+      },
+      "removed": {
+        "title": "Link rimosso",
+        "message": "Il link è stato rimosso con successo"
+      },
+      "not_removed": {
+        "title": "Link non rimosso",
+        "message": "Il link non può essere rimosso"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "L'URL non è valido",
+        "placeholder": "Digita o incolla un URL"
+      },
+      "title": {
+        "text": "Titolo di visualizzazione",
+        "placeholder": "Come vorresti che apparisse questo link"
+      }
+    }
+  },
+  "common": {
+    "all": "Tutti",
+    "no_items_in_this_group": "Nessun elemento in questo gruppo",
+    "drop_here_to_move": "Rilascia qui per spostare",
+    "states": "Stati",
+    "state": "Stato",
+    "state_groups": "Gruppi di stati",
+    "state_group": "Gruppo di stati",
+    "priorities": "Priorità",
+    "priority": "Priorità",
+    "team_project": "Progetto di squadra",
+    "project": "Progetto",
+    "cycle": "Ciclo",
+    "cycles": "Cicli",
+    "module": "Modulo",
+    "modules": "Moduli",
+    "labels": "Etichette",
+    "label": "Etichetta",
+    "admins": "Amministratori",
+    "users": "Utenti",
+    "guests": "Ospiti",
+    "assignees": "Assegnatari",
+    "assignee": "Assegnatario",
+    "created_by": "Creato da",
+    "none": "Nessuno",
+    "link": "Link",
+    "estimates": "Stime",
+    "estimate": "Stima",
+    "created_at": "Creato il",
+    "updated_at": "Aggiornato il",
+    "completed_at": "Completato il",
+    "layout": "Layout",
+    "filters": "Filtri",
+    "display": "Visualizza",
+    "load_more": "Carica di più",
+    "activity": "Attività",
+    "analytics": "Analisi",
+    "dates": "Date",
+    "success": "Successo!",
+    "something_went_wrong": "Qualcosa è andato storto",
+    "error": {
+      "label": "Errore!",
+      "message": "Si è verificato un errore. Per favore, riprova."
+    },
+    "group_by": "Raggruppa per",
+    "epic": "Epic",
+    "epics": "Epiche",
+    "work_item": "Elemento di lavoro",
+    "work_items": "Elementi di lavoro",
+    "sub_work_item": "Sotto-elemento di lavoro",
+    "views": "Visualizzazioni",
+    "pages": "Pagine",
+    "add": "Aggiungi",
+    "warning": "Avviso",
+    "updating": "Aggiornamento in corso",
+    "adding": "Aggiunta in corso",
+    "update": "Aggiorna",
+    "creating": "Creazione in corso",
+    "create": "Crea",
+    "cancel": "Annulla",
+    "description": "Descrizione",
+    "title": "Titolo",
+    "attachment": "Allegato",
+    "general": "Generale",
+    "features": "Funzionalità",
+    "automation": "Automazione",
+    "project_name": "Nome del progetto",
+    "project_id": "ID del progetto",
+    "project_timezone": "Fuso orario del progetto",
+    "created_on": "Creato il",
+    "updated_on": "Aggiornato il",
+    "completed_on": "Completed on",
+    "update_project": "Aggiorna progetto",
+    "identifier_already_exists": "L'identificatore esiste già",
+    "add_more": "Aggiungi altro",
+    "defaults": "Predefiniti",
+    "add_label": "Aggiungi etichetta",
+    "customize_time_range": "Personalizza intervallo di tempo",
+    "loading": "Caricamento",
+    "attachments": "Allegati",
+    "property": "Proprietà",
+    "properties": "Proprietà",
+    "parent": "Principale",
+    "page": "Pagina",
+    "remove": "Rimuovi",
+    "archiving": "Archiviazione in corso",
+    "archive": "Archivia",
+    "access": {
+      "public": "Pubblico",
+      "private": "Privato"
+    },
+    "done": "Fatto",
+    "sub_work_items": "Sotto-elementi di lavoro",
+    "comment": "Commento",
+    "workspace_level": "Livello dello spazio di lavoro",
+    "order_by": {
+      "label": "Ordina per",
+      "manual": "Manuale - Classifica",
+      "last_created": "Ultimo creato",
+      "last_updated": "Ultimo aggiornato",
+      "start_date": "Data di inizio",
+      "due_date": "Scadenza",
+      "asc": "Ascendente",
+      "desc": "Discendente",
+      "updated_on": "Aggiornato il"
+    },
+    "sort": {
+      "asc": "Ascendente",
+      "desc": "Discendente",
+      "created_on": "Creato il",
+      "updated_on": "Aggiornato il"
+    },
+    "comments": "Commenti",
+    "updates": "Aggiornamenti",
+    "additional_updates": "Aggiornamenti aggiuntivi",
+    "clear_all": "Pulisci tutto",
+    "copied": "Copiato!",
+    "link_copied": "Link copiato!",
+    "link_copied_to_clipboard": "Link copiato negli appunti",
+    "copied_to_clipboard": "Link dell'elemento di lavoro copiato negli appunti",
+    "branch_name_copied_to_clipboard": "Nome del branch copiato negli appunti",
+    "is_copied_to_clipboard": "Elemento di lavoro copiato negli appunti",
+    "no_links_added_yet": "Nessun link aggiunto ancora",
+    "add_link": "Aggiungi link",
+    "links": "Link",
+    "go_to_workspace": "Vai allo spazio di lavoro",
+    "progress": "Progresso",
+    "optional": "Opzionale",
+    "join": "Unisciti",
+    "go_back": "Torna indietro",
+    "continue": "Continua",
+    "resend": "Reinvia",
+    "relations": "Relazioni",
+    "dependencies": "Dipendenze",
+    "errors": {
+      "default": {
+        "title": "Errore!",
+        "message": "Qualcosa è andato storto. Per favore, riprova."
+      },
+      "required": "Questo campo è obbligatorio",
+      "entity_required": "{entity} è obbligatorio",
+      "restricted_entity": "{entity} è limitato"
+    },
+    "update_link": "Aggiorna link",
+    "attach": "Allega",
+    "create_new": "Crea nuovo",
+    "add_existing": "Aggiungi esistente",
+    "type_or_paste_a_url": "Digita o incolla un URL",
+    "url_is_invalid": "L'URL non è valido",
+    "display_title": "Titolo di visualizzazione",
+    "link_title_placeholder": "Come vorresti vedere questo link",
+    "url": "URL",
+    "side_peek": "Visualizzazione laterale",
+    "modal": "Modal",
+    "full_screen": "Schermo intero",
+    "close_peek_view": "Chiudi la visualizzazione rapida",
+    "toggle_peek_view_layout": "Alterna layout della visualizzazione rapida",
+    "options": "Opzioni",
+    "duration": "Durata",
+    "today": "Oggi",
+    "week": "Settimana",
+    "month": "Mese",
+    "quarter": "Trimestre",
+    "press_for_commands": "Premi '/' per i comandi",
+    "click_to_add_description": "Clicca per aggiungere una descrizione",
+    "on_track": "In linea",
+    "off_track": "Fuori rotta",
+    "at_risk": "A rischio",
+    "timeline": "Cronologia",
+    "completion": "Completamento",
+    "upcoming": "In arrivo",
+    "completed": "Completato",
+    "in_progress": "In corso",
+    "planned": "Pianificato",
+    "paused": "In pausa",
+    "search": {
+      "label": "Cerca",
+      "placeholder": "Digita per cercare",
+      "no_matches_found": "Nessuna corrispondenza trovata",
+      "no_matching_results": "Nessun risultato corrispondente",
+      "min_chars": "Digita almeno {count} caratteri per cercare",
+      "error": "Errore durante il recupero dei risultati di ricerca",
+      "no_results": {
+        "title": "Nessun risultato corrispondente",
+        "description": "Rimuovi i criteri di ricerca per vedere tutti i risultati"
+      }
+    },
+    "actions": {
+      "edit": "Modifica",
+      "make_a_copy": "Crea una copia",
+      "open_in_new_tab": "Apri in una nuova scheda",
+      "copy_link": "Copia link",
+      "copy_branch_name": "Copia nome del branch",
+      "archive": "Archivia",
+      "restore": "Ripristina",
+      "delete": "Elimina",
+      "remove_relation": "Rimuovi relazione",
+      "subscribe": "Iscriviti",
+      "unsubscribe": "Annulla iscrizione",
+      "clear_sorting": "Cancella ordinamento",
+      "show_weekends": "Mostra weekend",
+      "enable": "Abilita",
+      "disable": "Disabilita",
+      "copy_markdown": "Copia markdown",
+      "reply": "Rispondi"
+    },
+    "name": "Nome",
+    "discard": "Scarta",
+    "confirm": "Conferma",
+    "confirming": "Conferma in corso",
+    "read_the_docs": "Leggi la documentazione",
+    "default": "Predefinito",
+    "active": "Attivo",
+    "enabled": "Abilitato",
+    "disabled": "Disabilitato",
+    "mandate": "Obbligo",
+    "mandatory": "Obbligatorio",
+    "global": "Globale",
+    "yes": "Sì",
+    "no": "No",
+    "please_wait": "Attendere prego",
+    "enabling": "Abilitazione in corso",
+    "disabling": "Disabilitazione in corso",
+    "beta": "Beta",
+    "or": "o",
+    "next": "Successivo",
+    "back": "Indietro",
+    "retry": "Riprova",
+    "cancelling": "Annullamento in corso",
+    "configuring": "Configurazione in corso",
+    "clear": "Pulisci",
+    "import": "Importa",
+    "connect": "Connetti",
+    "authorizing": "Autorizzazione in corso",
+    "processing": "Elaborazione in corso",
+    "no_data_available": "Nessun dato disponibile",
+    "from": "da {name}",
+    "authenticated": "Autenticato",
+    "select": "Seleziona",
+    "upgrade": "Aggiorna",
+    "add_seats": "Aggiungi postazioni",
+    "projects": "Progetti",
+    "workspace": "Spazio di lavoro",
+    "workspaces": "Spazi di lavoro",
+    "team": "Team",
+    "teams": "Team",
+    "entity": "Entità",
+    "entities": "Entità",
+    "task": "Attività",
+    "tasks": "Attività",
+    "section": "Sezione",
+    "sections": "Sezioni",
+    "edit": "Modifica",
+    "connecting": "Connessione in corso",
+    "connected": "Connesso",
+    "disconnect": "Disconnetti",
+    "disconnecting": "Disconnessione in corso",
+    "installing": "Installazione in corso",
+    "install": "Installa",
+    "reset": "Reimposta",
+    "live": "Live",
+    "change_history": "Cronologia modifiche",
+    "coming_soon": "Prossimamente",
+    "member": "Membro",
+    "members": "Membri",
+    "you": "Tu",
+    "upgrade_cta": {
+      "higher_subscription": "Passa a un abbonamento superiore",
+      "talk_to_sales": "Parla con le vendite"
+    },
+    "category": "Categoria",
+    "categories": "Categorie",
+    "saving": "Salvataggio in corso",
+    "save_changes": "Salva modifiche",
+    "delete": "Elimina",
+    "deleting": "Eliminazione in corso",
+    "pending": "In sospeso",
+    "invite": "Invita",
+    "view": "Visualizza",
+    "deactivated_user": "Utente disattivato",
+    "apply": "Applica",
+    "applying": "Applicazione",
+    "overview": "Panoramica",
+    "no_of": "N. di {entity}",
+    "resolved": "Risolto",
+    "get_started": "Inizia",
+    "worklogs": "Registrazioni di lavoro",
+    "project_updates": "Aggiornamenti del progetto",
+    "workflows": "Flussi di lavoro",
+    "templates": "Modelli",
+    "business": "Business",
+    "members_and_teamspaces": "Membri e teamspaces",
+    "recurring_work_items": "Elementi di lavoro ricorrenti",
+    "milestones": "Milestone",
+    "open_in_full_screen": "Apri {page} a schermo intero",
+    "details": "Dettagli",
+    "project_structure": "Struttura del progetto",
+    "custom_properties": "Proprietà personalizzate",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Asse X",
+    "y_axis": "Asse Y",
+    "metric": "Metrica"
+  },
+  "form": {
+    "title": {
+      "required": "Il titolo è obbligatorio",
+      "max_length": "Il titolo deve contenere meno di {length} caratteri"
+    }
+  },
+  "entity": {
+    "grouping_title": "Raggruppamento di {entity}",
+    "priority": "Priorità di {entity}",
+    "all": "Tutti {entity}",
+    "drop_here_to_move": "Trascina qui per spostare il {entity}",
+    "delete": {
+      "label": "Elimina {entity}",
+      "success": "{entity} eliminato con successo",
+      "failed": "Eliminazione di {entity} fallita"
+    },
+    "update": {
+      "failed": "Aggiornamento di {entity} fallito",
+      "success": "{entity} aggiornato con successo"
+    },
+    "link_copied_to_clipboard": "Link di {entity} copiato negli appunti",
+    "fetch": {
+      "failed": "Errore durante il recupero di {entity}"
+    },
+    "add": {
+      "success": "{entity} aggiunto con successo",
+      "failed": "Errore nell'aggiunta di {entity}"
+    },
+    "remove": {
+      "success": "{entity} rimosso con successo",
+      "failed": "Errore nella rimozione di {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Impossibile allegare il file. Riprova a caricarlo.",
+    "only_one_file_allowed": "È possibile caricare un solo file alla volta.",
+    "file_size_limit": "Il file deve essere di {size}MB o meno.",
+    "drag_and_drop": "Trascina e rilascia ovunque per caricare",
+    "delete": "Elimina allegato"
+  },
+  "label": {
+    "select": "Seleziona etichetta",
+    "create": {
+      "success": "Etichetta creata con successo",
+      "failed": "Creazione dell'etichetta fallita",
+      "already_exists": "L'etichetta esiste già",
+      "type": "Digita per aggiungere una nuova etichetta"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Visualizzazione} other {Visualizzazioni}}",
+    "create": {
+      "label": "Crea visualizzazione"
+    },
+    "update": {
+      "label": "Aggiorna visualizzazione"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Ospite",
+      "description": "I membri esterni alle organizzazioni possono essere invitati come ospiti."
+    },
+    "member": {
+      "title": "Membro",
+      "description": "Permette di leggere, scrivere, modificare ed eliminare entità all'interno di progetti, cicli e moduli."
+    },
+    "admin": {
+      "title": "Amministratore",
+      "description": "Tutti i permessi impostati su true all'interno dello spazio di lavoro."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Product / Project Manager",
+    "development_or_engineering": "Sviluppo / Ingegneria",
+    "founder_or_executive": "Fondatore / Dirigente",
+    "freelancer_or_consultant": "Freelance / Consulente",
+    "marketing_or_growth": "Marketing / Crescita",
+    "sales_or_business_development": "Vendite / Sviluppo commerciale",
+    "support_or_operations": "Supporto / Operazioni",
+    "student_or_professor": "Studente / Professore",
+    "human_resources": "Risorse umane",
+    "other": "Altro"
+  },
+  "default_global_view": {
+    "all_issues": "Tutti gli elementi di lavoro",
+    "assigned": "Assegnati",
+    "created": "Creati",
+    "subscribed": "Iscritti"
+  },
+  "description_versions": {
+    "last_edited_by": "Ultima modifica di",
+    "previously_edited_by": "Precedentemente modificato da",
+    "edited_by": "Modificato da"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane non si è avviato. Questo potrebbe essere dovuto al fatto che uno o più servizi Plane non sono riusciti ad avviarsi.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Scegli View Logs da setup.sh e dai log Docker per essere sicuro."
+  },
+  "customize_navigation": "Personalizza la navigazione",
+  "personal": "Personale",
+  "accordion_navigation_control": "Navigazione laterale a fisarmonica",
+  "horizontal_navigation_bar": "Navigazione a schede",
+  "show_limited_projects_on_sidebar": "Mostra progetti limitati nella barra laterale",
+  "enter_number_of_projects": "Inserisci il numero di progetti",
+  "pin": "Fissa",
+  "unpin": "Sblocca",
+  "workspace_dashboards": "Dashboard",
+  "pi_chat": "Plane AI",
+  "in_app": "In-app",
+  "forms": "Moduli",
+  "milestones": "Milestone",
+  "milestones_description": "Le milestone forniscono un livello per allineare gli elementi di lavoro verso date di completamento condivise.",
+  "file_upload": {
+    "upload_text": "Clicca qui per caricare il file",
+    "drag_drop_text": "Trascina e rilascia",
+    "processing": "Elaborazione",
+    "invalid_file_type": "Tipo di file non valido",
+    "missing_fields": "Campi mancanti",
+    "success": "{fileName} Caricato!"
+  },
+  "date": "Data",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Esporta elementi di lavoro in un file CSV.",
+      "short_description": "Esporta come CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Esporta elementi di lavoro in un file Excel.",
+      "short_description": "Esporta come Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Esporta elementi di lavoro in un file Excel.",
+      "short_description": "Esporta come Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Esporta elementi di lavoro in un file JSON.",
+      "short_description": "Esporta come JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/cycle.json b/packages/i18n/src/locales/it/cycle.json
new file mode 100644
index 0000000..8c24f6d
--- /dev/null
+++ b/packages/i18n/src/locales/it/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Aggiungi elementi di lavoro al ciclo per visualizzarne l'avanzamento"
+      },
+      "chart": {
+        "title": "Aggiungi elementi di lavoro al ciclo per visualizzare il grafico di burndown."
+      },
+      "priority_issue": {
+        "title": "Visualizza in anteprima gli elementi di lavoro ad alta priorità del ciclo."
+      },
+      "assignee": {
+        "title": "Aggiungi assegnatari agli elementi di lavoro per vedere la ripartizione per assegnatario."
+      },
+      "label": {
+        "title": "Aggiungi etichette agli elementi di lavoro per vedere la ripartizione per etichette."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Ciclo} other {Cicli}}",
+    "no_cycle": "Nessun ciclo"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Aggiungi elementi di lavoro al ciclo per vedere il suo\n progresso"
+      },
+      "priority": {
+        "title": "Osserva elementi di lavoro ad alta priorità affrontati in\n il ciclo a colpo d'occhio."
+      },
+      "assignee": {
+        "title": "Aggiungi assegnatari agli elementi di lavoro per vedere una\n distribuzione del lavoro per assegnatari."
+      },
+      "label": {
+        "title": "Aggiungi etichette agli elementi di lavoro per vedere la\n distribuzione del lavoro per etichette."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/editor.json b/packages/i18n/src/locales/it/editor.json
new file mode 100644
index 0000000..9a8a638
--- /dev/null
+++ b/packages/i18n/src/locales/it/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Trascina e rilascia per caricare file esterni"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "File troppo grande.",
+        "description": "La dimensione massima per file è {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Tipo di file non supportato.",
+        "description": "Vedi formati supportati"
+      },
+      "default": {
+        "title": "Caricamento fallito.",
+        "description": "Qualcosa è andato storto. Riprova."
+      }
+    },
+    "upgrade": {
+      "description": "Aggiorna il tuo piano per visualizzare questo allegato."
+    },
+    "aria": {
+      "click_to_upload": "Clicca per caricare allegato"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Converti in incorporamento",
+      "convert_to_link": "Converti in link",
+      "convert_to_richcard": "Converti in scheda ricca"
+    },
+    "placeholder": {
+      "insert_embed": "Inserisci qui il tuo link di incorporamento preferito, come video YouTube, design Figma, ecc.",
+      "link": "Inserisci o incolla un link"
+    },
+    "input_modal": {
+      "embed": "Incorpora",
+      "works_with_links": "Funziona con YouTube, Figma, Google Docs e altro"
+    },
+    "error": {
+      "not_valid_link": "Inserisci un URL valido."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Descrivi il contenuto di questo blocco",
+      "generated_here": "Il contenuto AI verrà generato qui"
+    },
+    "block_types": {
+      "placeholder": "Seleziona tipo di blocco",
+      "summarize_page": "Riassumi pagina",
+      "custom_prompt": "Prompt personalizzato"
+    },
+    "actions": {
+      "discard": "Scarta",
+      "generate": "Genera",
+      "generating": "Generazione in corso",
+      "rewriting": "Riscrittura in corso",
+      "rewrite": "Riscrivi",
+      "use_this": "Usa questo",
+      "refine": "Affina"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/empty-state.json b/packages/i18n/src/locales/it/empty-state.json
new file mode 100644
index 0000000..1af7d40
--- /dev/null
+++ b/packages/i18n/src/locales/it/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Non ci sono ancora metriche di progresso da mostrare.",
+      "description": "Inizia a impostare i valori delle proprietà negli elementi di lavoro per vedere qui le metriche di progresso."
+    },
+    "updates": {
+      "title": "Nessun aggiornamento ancora.",
+      "description": "Una volta che i membri del progetto aggiungono aggiornamenti, appariranno qui"
+    },
+    "search": {
+      "title": "Nessun risultato corrispondente.",
+      "description": "Nessun risultato trovato. Prova a modificare i termini di ricerca."
+    },
+    "not_found": {
+      "title": "Oops! Qualcosa sembra andare storto",
+      "description": "Al momento non riusciamo a recuperare il tuo account plane. Potrebbe trattarsi di un errore di rete.",
+      "cta_primary": "Prova a ricaricare"
+    },
+    "server_error": {
+      "title": "Errore del server",
+      "description": "Non riusciamo a connetterci e recuperare dati dal nostro server. Non preoccuparti, ci stiamo lavorando.",
+      "cta_primary": "Prova a ricaricare"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Sembra che tu non abbia accesso a questo progetto",
+      "restricted_description": "Contatta l'amministratore per richiedere l'accesso e potrai continuare qui.",
+      "join_description": "Clicca sul pulsante qui sotto per unirti.",
+      "cta_primary": "Unisciti al progetto",
+      "cta_loading": "Unione al progetto in corso"
+    },
+    "invalid_project": {
+      "title": "Progetto non trovato",
+      "description": "Il progetto che stai cercando non esiste."
+    },
+    "work_items": {
+      "title": "Inizia con il tuo primo elemento di lavoro.",
+      "description": "Gli elementi di lavoro sono i mattoni del tuo progetto — assegna proprietari, imposta priorità e traccia facilmente i progressi.",
+      "cta_primary": "Crea il tuo primo elemento di lavoro"
+    },
+    "cycles": {
+      "title": "Raggruppa e delimita temporalmente il tuo lavoro in Cicli.",
+      "description": "Suddividi il lavoro in blocchi temporali, lavora a ritroso dalla scadenza del progetto per impostare le date e fai progressi tangibili come team.",
+      "cta_primary": "Imposta il tuo primo ciclo"
+    },
+    "cycle_work_items": {
+      "title": "Nessun elemento di lavoro da mostrare in questo ciclo",
+      "description": "Crea elementi di lavoro per iniziare a monitorare il progresso del tuo team in questo ciclo e raggiungere i tuoi obiettivi in tempo.",
+      "cta_primary": "Crea elemento di lavoro",
+      "cta_secondary": "Aggiungi elemento di lavoro esistente"
+    },
+    "modules": {
+      "title": "Mappa gli obiettivi del tuo progetto ai Moduli e traccia facilmente.",
+      "description": "I moduli sono costituiti da elementi di lavoro interconnessi. Aiutano a monitorare i progressi attraverso le fasi del progetto, ciascuna con scadenze specifiche e analitiche per indicare quanto sei vicino al raggiungimento di quelle fasi.",
+      "cta_primary": "Imposta il tuo primo modulo"
+    },
+    "module_work_items": {
+      "title": "Nessun elemento di lavoro da mostrare in questo Modulo",
+      "description": "Crea elementi di lavoro per iniziare a monitorare questo modulo.",
+      "cta_primary": "Crea elemento di lavoro",
+      "cta_secondary": "Aggiungi elemento di lavoro esistente"
+    },
+    "views": {
+      "title": "Salva viste personalizzate per il tuo progetto",
+      "description": "Le viste sono filtri salvati che ti aiutano ad accedere rapidamente alle informazioni che usi di più. Collabora senza sforzo mentre i colleghi condividono e personalizzano le viste secondo le loro esigenze specifiche.",
+      "cta_primary": "Crea vista"
+    },
+    "no_work_items_in_project": {
+      "title": "Nessun elemento di lavoro nel progetto ancora",
+      "description": "Aggiungi elementi di lavoro al tuo progetto e suddividi il lavoro in pezzi tracciabili con le viste.",
+      "cta_primary": "Aggiungi elemento di lavoro"
+    },
+    "work_item_filter": {
+      "title": "Nessun elemento di lavoro trovato",
+      "description": "Il filtro attuale non ha restituito risultati. Prova a modificare i filtri.",
+      "cta_primary": "Aggiungi elemento di lavoro"
+    },
+    "pages": {
+      "title": "Documenta tutto — dalle note ai PRD",
+      "description": "Le pagine ti permettono di catturare e organizzare informazioni in un unico posto. Scrivi note di riunioni, documentazione di progetto e PRD, incorpora elementi di lavoro e strutturali con componenti pronti all'uso.",
+      "cta_primary": "Crea la tua prima Pagina"
+    },
+    "archive_pages": {
+      "title": "Nessuna pagina archiviata ancora",
+      "description": "Archivia le pagine non nel tuo radar. Accedi a esse qui quando necessario."
+    },
+    "intake_sidebar": {
+      "title": "Registra richieste di Intake",
+      "description": "Invia nuove richieste da rivedere, dare priorità e tracciare all'interno del flusso di lavoro del tuo progetto.",
+      "cta_primary": "Crea richiesta di Intake"
+    },
+    "intake_main": {
+      "title": "Seleziona un elemento di lavoro di Intake per visualizzarne i dettagli"
+    },
+    "epics": {
+      "title": "Trasforma progetti complessi in epiche strutturate.",
+      "description": "Un'epica ti aiuta a organizzare grandi obiettivi in attività più piccole e tracciabili.",
+      "cta_primary": "Crea un'Epica",
+      "cta_secondary": "Documentazione"
+    },
+    "epic_work_items": {
+      "title": "Non hai ancora aggiunto elementi di lavoro a questa epica.",
+      "description": "Inizia aggiungendo alcuni elementi di lavoro a questa epica e tracciandoli qui.",
+      "cta_secondary": "Aggiungi elementi di lavoro"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Nessuna epica archiviata ancora",
+      "description": "Puoi archiviare le epiche completate o annullate. Trovalle qui una volta archiviate."
+    },
+    "archive_work_items": {
+      "title": "Nessun elemento di lavoro archiviato ancora",
+      "description": "Manualmente o tramite automazione, puoi archiviare elementi di lavoro completati o annullati. Trovali qui una volta archiviati.",
+      "cta_primary": "Imposta automazione"
+    },
+    "archive_cycles": {
+      "title": "Nessun ciclo archiviato ancora",
+      "description": "Per riordinare il tuo progetto, archivia i cicli completati. Trovali qui una volta archiviati."
+    },
+    "archive_modules": {
+      "title": "Nessun Modulo archiviato ancora",
+      "description": "Per riordinare il tuo progetto, archivia i moduli completati o annullati. Trovali qui una volta archiviati."
+    },
+    "home_widget_quick_links": {
+      "title": "Mantieni a portata di mano riferimenti importanti, risorse o documenti per il tuo lavoro"
+    },
+    "inbox_sidebar_all": {
+      "title": "Gli aggiornamenti per i tuoi elementi di lavoro sottoscritti appariranno qui"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Le menzioni per i tuoi elementi di lavoro appariranno qui"
+    },
+    "your_work_by_priority": {
+      "title": "Nessun elemento di lavoro assegnato ancora"
+    },
+    "your_work_by_state": {
+      "title": "Nessun elemento di lavoro assegnato ancora"
+    },
+    "views": {
+      "title": "Nessuna Vista ancora",
+      "description": "Aggiungi elementi di lavoro al tuo progetto e usa le viste per filtrare, ordinare e monitorare i progressi senza sforzo.",
+      "cta_primary": "Aggiungi elemento di lavoro"
+    },
+    "drafts": {
+      "title": "Elementi di lavoro semi-scritti",
+      "description": "Per provare questo, inizia ad aggiungere un elemento di lavoro e lascialo a metà o crea la tua prima bozza qui sotto. 😉",
+      "cta_primary": "Crea elemento di lavoro bozza"
+    },
+    "projects_archived": {
+      "title": "Nessun progetto archiviato",
+      "description": "Sembra che tutti i tuoi progetti siano ancora attivi—ottimo lavoro!"
+    },
+    "analytics_projects": {
+      "title": "Crea progetti per visualizzare qui le metriche del progetto."
+    },
+    "analytics_work_items": {
+      "title": "Crea progetti con elementi di lavoro e assegnatari per iniziare a tracciare prestazioni, progressi e impatto del team qui."
+    },
+    "analytics_no_cycle": {
+      "title": "Crea cicli per organizzare il lavoro in fasi temporali e tracciare i progressi attraverso gli sprint."
+    },
+    "analytics_no_module": {
+      "title": "Crea moduli per organizzare il tuo lavoro e tracciare i progressi attraverso diverse fasi."
+    },
+    "analytics_no_intake": {
+      "title": "Imposta intake per gestire le richieste in arrivo e tracciare come vengono accettate e rifiutate"
+    },
+    "home_widget_stickies": {
+      "title": "Annota un'idea, cattura un'illuminazione o registra un'intuizione. Aggiungi un adesivo per iniziare."
+    },
+    "stickies": {
+      "title": "Cattura idee istantaneamente",
+      "description": "Crea adesivi per note rapide e promemoria, e portali con te ovunque tu vada.",
+      "cta_primary": "Crea primo adesivo",
+      "cta_secondary": "Documentazione"
+    },
+    "active_cycles": {
+      "title": "Nessun ciclo attivo",
+      "description": "Al momento non hai cicli in corso. I cicli attivi appaiono qui quando includono la data odierna."
+    },
+    "dashboard": {
+      "title": "Visualizza i tuoi progressi con le dashboard",
+      "description": "Crea dashboard personalizzabili per tracciare metriche, misurare risultati e presentare intuizioni in modo efficace.",
+      "cta_primary": "Crea nuova dashboard"
+    },
+    "wiki": {
+      "title": "Scrivi una nota, un documento o un'intera base di conoscenza.",
+      "description": "Le pagine sono spazi per catturare pensieri in Plane. Prendi note di riunioni, formattale facilmente, incorpora elementi di lavoro, organizzali usando una libreria di componenti e mantienili tutti nel contesto del tuo progetto.",
+      "cta_primary": "Crea la tua pagina"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Abilita stati del progetto",
+      "description": "Abilita gli stati del progetto per visualizzare e gestire proprietà come stato, priorità, date di scadenza e altro."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Nessuna stima ancora",
+      "description": "Definisci come il tuo team misura lo sforzo e traccialo in modo coerente su tutti gli elementi di lavoro.",
+      "cta_primary": "Aggiungi sistema di stima"
+    },
+    "labels": {
+      "title": "Nessuna etichetta ancora",
+      "description": "Crea etichette personalizzate per categorizzare e gestire efficacemente i tuoi elementi di lavoro.",
+      "cta_primary": "Crea la tua prima etichetta"
+    },
+    "exports": {
+      "title": "Nessuna esportazione ancora",
+      "description": "Al momento non hai record di esportazione. Una volta esportati i dati, tutti i record appariranno qui."
+    },
+    "tokens": {
+      "title": "Nessun token personale ancora",
+      "description": "Genera token API sicuri per connettere il tuo workspace con sistemi e applicazioni esterne.",
+      "cta_primary": "Aggiungi token API"
+    },
+    "workspace_tokens": {
+      "title": "Nessun token API ancora",
+      "description": "Genera token API sicuri per connettere il tuo workspace con sistemi e applicazioni esterne.",
+      "cta_primary": "Aggiungi token API"
+    },
+    "webhooks": {
+      "title": "Nessun Webhook aggiunto ancora",
+      "description": "Automatizza le notifiche a servizi esterni quando si verificano eventi del progetto.",
+      "cta_primary": "Aggiungi webhook"
+    },
+    "work_item_types": {
+      "title": "Crea e personalizza tipi di elementi di lavoro",
+      "description": "Definisci tipi di elementi di lavoro unici per il tuo progetto. Ogni tipo può avere le proprie proprietà, flussi di lavoro e campi - personalizzati per le esigenze del tuo progetto e team.",
+      "cta_primary": "Abilita"
+    },
+    "work_item_type_properties": {
+      "title": "Definisci la proprietà e i dettagli che vuoi catturare per questo tipo di elemento di lavoro. Personalizzalo per adattarlo al flusso di lavoro del tuo progetto.",
+      "cta_secondary": "Aggiungi proprietà"
+    },
+    "templates": {
+      "title": "Nessun modello ancora",
+      "description": "Riduci i tempi di configurazione creando modelli per elementi di lavoro e pagine — e inizia nuovi lavori in pochi secondi.",
+      "cta_primary": "Crea il tuo primo modello"
+    },
+    "recurring_work_items": {
+      "title": "Nessun elemento di lavoro ricorrente ancora",
+      "description": "Configura elementi di lavoro ricorrenti per automatizzare attività ripetute e rispettare facilmente la pianificazione.",
+      "cta_primary": "Crea elemento di lavoro ricorrente"
+    },
+    "worklogs": {
+      "title": "Traccia i fogli ore per tutti i membri",
+      "description": "Registra il tempo sugli elementi di lavoro per visualizzare fogli ore dettagliati per qualsiasi membro del team attraverso i progetti."
+    },
+    "group_syncing": {
+      "title": "Nessuna mappatura di gruppi ancora"
+    },
+    "template_setting": {
+      "title": "Nessun modello ancora",
+      "description": "Riduci i tempi di configurazione creando modelli per progetti, elementi di lavoro e pagine — e inizia nuovi lavori in pochi secondi.",
+      "cta_primary": "Crea modello"
+    },
+    "workflows": {
+      "title": "Nessun flusso di lavoro ancora",
+      "description": "Crea flussi di lavoro per gestire lo stato di avanzamento dei tuoi elementi di lavoro.",
+      "cta_primary": "Aggiungi nuovo flusso di lavoro",
+      "states": {
+        "title": "Aggiungi stati",
+        "description": "Seleziona gli stati attraverso i quali avanza l'elemento di lavoro."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/home.json b/packages/i18n/src/locales/it/home.json
new file mode 100644
index 0000000..34374f9
--- /dev/null
+++ b/packages/i18n/src/locales/it/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "La tua guida rapida",
+      "not_right_now": "Non ora",
+      "create_project": {
+        "title": "Crea un progetto",
+        "description": "La maggior parte delle cose inizia con un progetto in Plane.",
+        "cta": "Inizia"
+      },
+      "invite_team": {
+        "title": "Invita il tuo team",
+        "description": "Collabora, lancia e gestisci insieme ai colleghi.",
+        "cta": "Invitali"
+      },
+      "configure_workspace": {
+        "title": "Configura il tuo spazio di lavoro.",
+        "description": "Attiva o disattiva le funzionalità o personalizza ulteriormente.",
+        "cta": "Configura questo spazio"
+      },
+      "personalize_account": {
+        "title": "Rendi Plane tuo.",
+        "description": "Scegli la tua immagine, i colori e altro.",
+        "cta": "Personalizza ora"
+      },
+      "widgets": {
+        "title": "È silenzioso senza widget, attivali",
+        "description": "Sembra che tutti i tuoi widget siano disattivati. Attivali ora per migliorare la tua esperienza!",
+        "primary_button": {
+          "text": "Gestisci widget"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Salva link a elementi di lavoro che ti servono.",
+      "add": "Aggiungi link rapido",
+      "title": "Link rapido",
+      "title_plural": "Link rapidi"
+    },
+    "recents": {
+      "title": "Recenti",
+      "empty": {
+        "project": "I tuoi progetti recenti appariranno qui una volta visitati.",
+        "page": "Le tue pagine recenti appariranno qui una volta visitate.",
+        "issue": "I tuoi elementi di lavoro recenti appariranno qui una volta visitati.",
+        "default": "Non hai ancora elementi recenti."
+      },
+      "filters": {
+        "all": "Tutti",
+        "projects": "Progetti",
+        "pages": "Pagine",
+        "issues": "Elementi di lavoro"
+      }
+    },
+    "new_at_plane": {
+      "title": "Novità su Plane"
+    },
+    "quick_tutorial": {
+      "title": "Tutorial rapido"
+    },
+    "widget": {
+      "reordered_successfully": "Widget riordinato con successo.",
+      "reordering_failed": "Si è verificato un errore durante il riordino del widget."
+    },
+    "manage_widgets": "Gestisci widget",
+    "title": "Home",
+    "star_us_on_github": "Metti una stella su GitHub",
+    "business_trial_banner": {
+      "title": "Il tuo periodo di prova di 14 giorni del piano Business è attivo!",
+      "description": "Esplora tutte le funzionalità Business. Quando sei pronto, scegli di abbonarti. Non ti verrà addebitato automaticamente.",
+      "trial_ends_today": "La prova scade oggi",
+      "trial_ends_in_days": "La prova scade tra {days, plural, one {# giorno} other {# giorni}}",
+      "start_subscription": "Avvia abbonamento",
+      "explore_business_features": "Esplora funzionalità Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/inbox.json b/packages/i18n/src/locales/it/inbox.json
new file mode 100644
index 0000000..b734b28
--- /dev/null
+++ b/packages/i18n/src/locales/it/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "In sospeso",
+        "description": "In sospeso"
+      },
+      "declined": {
+        "title": "Rifiutato",
+        "description": "Rifiutato"
+      },
+      "snoozed": {
+        "title": "Snoozed",
+        "description": "{days, plural, one {# giorno} other {# giorni}} rimanenti"
+      },
+      "accepted": {
+        "title": "Accettato",
+        "description": "Accettato"
+      },
+      "duplicate": {
+        "title": "Duplicato",
+        "description": "Duplicato"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Rifiuta elemento di lavoro",
+        "content": "Sei sicuro di voler rifiutare l'elemento di lavoro {value}?"
+      },
+      "delete": {
+        "title": "Elimina elemento di lavoro",
+        "content": "Sei sicuro di voler eliminare l'elemento di lavoro {value}?",
+        "success": "Elemento di lavoro eliminato con successo"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Solo gli amministratori del progetto possono snoozare/non snoozare gli elementi di lavoro",
+      "accept_permission": "Solo gli amministratori del progetto possono accettare gli elementi di lavoro",
+      "decline_permission": "Solo gli amministratori del progetto possono rifiutare gli elementi di lavoro"
+    },
+    "actions": {
+      "accept": "Accetta",
+      "decline": "Rifiuta",
+      "snooze": "Snoozed",
+      "unsnooze": "Annulla snooze",
+      "copy": "Copia link dell'elemento di lavoro",
+      "delete": "Elimina",
+      "open": "Apri elemento di lavoro",
+      "mark_as_duplicate": "Segna come duplicato",
+      "move": "Sposta {value} negli elementi di lavoro del progetto"
+    },
+    "source": {
+      "in-app": "nell'app"
+    },
+    "order_by": {
+      "created_at": "Creato il",
+      "updated_at": "Aggiornato il",
+      "id": "ID"
+    },
+    "label": "Accoglienza",
+    "page_label": "{workspace} - Accoglienza",
+    "modal": {
+      "title": "Crea elemento di lavoro per l'accoglienza"
+    },
+    "tabs": {
+      "open": "Aperto",
+      "closed": "Chiuso"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Nessun elemento di lavoro aperto",
+        "description": "Trova qui gli elementi di lavoro aperti. Crea un nuovo elemento di lavoro."
+      },
+      "sidebar_closed_tab": {
+        "title": "Nessun elemento di lavoro chiuso",
+        "description": "Tutti gli elementi di lavoro, siano essi accettati o rifiutati, possono essere trovati qui."
+      },
+      "sidebar_filter": {
+        "title": "Nessun elemento di lavoro corrispondente",
+        "description": "Nessun elemento di lavoro corrisponde al filtro applicato in accoglienza. Crea un nuovo elemento di lavoro."
+      },
+      "detail": {
+        "title": "Seleziona un elemento di lavoro per visualizzarne i dettagli."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/integration.json b/packages/i18n/src/locales/it/integration.json
new file mode 100644
index 0000000..36520b8
--- /dev/null
+++ b/packages/i18n/src/locales/it/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integrazioni",
+    "loading": "Caricamento",
+    "unauthorized": "Non sei autorizzato a visualizzare questa pagina.",
+    "configure": "Configura",
+    "not_enabled": "{name} non è abilitato per questo workspace.",
+    "not_configured": "Non configurato",
+    "disconnect_personal_account": "Disconnetti account {providerName} personale",
+    "not_configured_message_admin": "{name} integrazione non è configurata. Per favore contatta il tuo amministratore di istanza per configurarla.",
+    "not_configured_message_support": "{name} integrazione non è configurata. Per favore contatta il supporto per configurarla.",
+    "external_api_unreachable": "Non è possibile accedere all'API esterna. Per favore riprova più tardi.",
+    "error_fetching_supported_integrations": "Non è possibile ottenere integrazioni supportate. Per favore riprova più tardi.",
+    "back_to_integrations": "Torna alle integrazioni",
+    "select_state": "Seleziona stato",
+    "set_state": "Imposta stato",
+    "choose_project": "Scegli progetto...",
+    "skip_backward_state_movement": "Impedisci che le issue tornino a uno stato precedente a causa degli aggiornamenti PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Connetti e sincronizza i tuoi elementi di lavoro GitHub con Plane",
+    "connect_org": "Connetti Organizzazione",
+    "connect_org_description": "Connetti la tua organizzazione GitHub con Plane",
+    "processing": "Elaborazione",
+    "org_added_desc": "GitHub org aggiunta da e tempo",
+    "connection_fetch_error": "Errore durante la ricezione dei dettagli della connessione dal server",
+    "personal_account_connected": "Account personale connesso",
+    "personal_account_connected_description": "Il tuo account GitHub è ora connesso a Plane",
+    "connect_personal_account": "Connetti Account Personale",
+    "connect_personal_account_description": "Connetti il tuo account GitHub personale con Plane.",
+    "repo_mapping": "Mappatura Repository",
+    "repo_mapping_description": "Mappa i tuoi repository GitHub con i progetti Plane.",
+    "project_issue_sync": "Sincronizzazione Problema Progetto",
+    "project_issue_sync_description": "Sincronizza i problemi da GitHub al tuo progetto Plane",
+    "project_issue_sync_empty_state": "Le sincronizzazioni dei problemi del progetto mappate appariranno qui",
+    "configure_project_issue_sync_state": "Configura lo stato di sincronizzazione dei problemi",
+    "select_issue_sync_direction": "Seleziona la direzione di sincronizzazione dei problemi",
+    "allow_bidirectional_sync": "Bidirectional - Sincronizza problemi e commenti in entrambe le direzioni tra GitHub e Plane",
+    "allow_unidirectional_sync": "Unidirectional - Sincronizza problemi e commenti da GitHub a Plane solo",
+    "allow_unidirectional_sync_warning": "I dati del GitHub Issue sostituiranno i dati nell'elemento di lavoro Plane collegato (GitHub → Plane solo)",
+    "remove_project_issue_sync": "Rimuovi questa Sincronizzazione Problema Progetto",
+    "remove_project_issue_sync_confirmation": "Sei sicuro di voler rimuovere questa sincronizzazione problema progetto?",
+    "add_pr_state_mapping": "Aggiungi Mappatura Stato Richiesta di Pull per Progetto Plane",
+    "edit_pr_state_mapping": "Modifica Mappatura Stato Richiesta di Pull per Progetto Plane",
+    "pr_state_mapping": "Mappatura Stato Richiesta di Pull",
+    "pr_state_mapping_description": "Mappa gli stati delle richieste di pull da GitHub al tuo progetto Plane",
+    "pr_state_mapping_empty_state": "Gli stati PR mappati appariranno qui",
+    "remove_pr_state_mapping": "Rimuovi questa Mappatura Stato Richiesta di Pull",
+    "remove_pr_state_mapping_confirmation": "Sei sicuro di voler rimuovere questa mappatura stato richiesta di pull?",
+    "issue_sync_message": "Elementi di lavoro sono sincronizzati con {project}",
+    "link": "Collega Repository GitHub al Progetto Plane",
+    "pull_request_automation": "Automazione Richiesta di Pull",
+    "pull_request_automation_description": "Configura la mappatura dello stato della richiesta di pull da GitHub al tuo progetto Plane",
+    "DRAFT_MR_OPENED": "Draft Aperto",
+    "MR_OPENED": "Aperto",
+    "MR_READY_FOR_MERGE": "Pronto per Merge",
+    "MR_REVIEW_REQUESTED": "Review Richiesto",
+    "MR_MERGED": "Unito",
+    "MR_CLOSED": "Chiuso",
+    "ISSUE_OPEN": "Issue Aperto",
+    "ISSUE_CLOSED": "Issue Chiuso",
+    "save": "Salva",
+    "start_sync": "Start Sincronizzazione",
+    "choose_repository": "Scegli Repository..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Connetti e sincronizza le richieste di merge Gitlab con Plane.",
+    "connection_fetch_error": "Errore durante la ricezione dei dettagli della connessione dal server",
+    "connect_org": "Connetti Organizzazione",
+    "connect_org_description": "Connetti la tua organizzazione Gitlab con Plane.",
+    "project_connections": "Connessioni Progetto Gitlab",
+    "project_connections_description": "Sincronizza richieste di merge da Gitlab a progetti Plane.",
+    "plane_project_connection": "Connessione Progetto Plane",
+    "plane_project_connection_description": "Configura la mappatura dello stato della richiesta di merge da Gitlab a progetti Plane",
+    "remove_connection": "Rimuovi Connessione",
+    "remove_connection_confirmation": "Sei sicuro di voler rimuovere questa connessione?",
+    "link": "Collega repository Gitlab al progetto Plane",
+    "pull_request_automation": "Automazione Richiesta di Pull",
+    "pull_request_automation_description": "Configura la mappatura dello stato della richiesta di merge da Gitlab a Plane",
+    "DRAFT_MR_OPENED": "Su MR aperto in bozza, imposta lo stato su",
+    "MR_OPENED": "Su MR aperto, imposta lo stato su",
+    "MR_REVIEW_REQUESTED": "Su MR review richiesto, imposta lo stato su",
+    "MR_READY_FOR_MERGE": "Su MR pronto per merge, imposta lo stato su",
+    "MR_MERGED": "Su MR unito, imposta lo stato su",
+    "MR_CLOSED": "Su MR chiuso, imposta lo stato su",
+    "integration_enabled_text": "Con Gitlab integration Enabled, puoi automatizzare i flussi di lavoro degli elementi di lavoro",
+    "choose_entity": "Scegli entità",
+    "choose_project": "Scegli progetto",
+    "link_plane_project": "Collega progetto Plane",
+    "project_issue_sync": "Sincronizzazione Issue Progetto",
+    "project_issue_sync_description": "Sincronizza le issue da Gitlab al tuo progetto Plane",
+    "project_issue_sync_empty_state": "La sincronizzazione issue del progetto mappata apparirà qui",
+    "configure_project_issue_sync_state": "Configura Stato Sincronizzazione Issue",
+    "select_issue_sync_direction": "Seleziona la direzione di sincronizzazione issue",
+    "allow_bidirectional_sync": "Bidirezionale - Sincronizza issue e commenti in entrambe le direzioni tra Gitlab e Plane",
+    "allow_unidirectional_sync": "Unidirezionale - Sincronizza issue e commenti solo da Gitlab a Plane",
+    "allow_unidirectional_sync_warning": "I dati dalla Issue Gitlab sostituiranno i dati nell'Elemento di Lavoro Plane collegato (solo Gitlab → Plane)",
+    "remove_project_issue_sync": "Rimuovi questa Sincronizzazione Issue Progetto",
+    "remove_project_issue_sync_confirmation": "Sei sicuro di voler rimuovere questa sincronizzazione issue del progetto?",
+    "ISSUE_OPEN": "Issue Aperta",
+    "ISSUE_CLOSED": "Issue Chiusa",
+    "save": "Salva",
+    "start_sync": "Avvia Sincronizzazione",
+    "choose_repository": "Scegli Repository..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Connetti e sincronizza la tua istanza Gitlab Enterprise con Plane.",
+    "app_form_title": "Configurazione Gitlab Enterprise",
+    "app_form_description": "Configura Gitlab Enterprise per connetterti a Plane.",
+    "base_url_title": "URL Base",
+    "base_url_description": "L'URL base della tua istanza Gitlab Enterprise.",
+    "base_url_placeholder": "es. \"https://glab.plane.town\"",
+    "base_url_error": "L'URL base è richiesto",
+    "invalid_base_url_error": "URL base non valido",
+    "client_id_title": "ID App",
+    "client_id_description": "L'ID dell'app che hai creato nella tua istanza Gitlab Enterprise.",
+    "client_id_placeholder": "es. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "L'ID App è richiesto",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Il client secret dell'app che hai creato nella tua istanza Gitlab Enterprise.",
+    "client_secret_placeholder": "es. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Il client secret è richiesto",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Un webhook secret casuale che verrà utilizzato per verificare il webhook dall'istanza Gitlab Enterprise.",
+    "webhook_secret_placeholder": "es. \"webhook1234567890\"",
+    "webhook_secret_error": "Il webhook secret è richiesto",
+    "connect_app": "Connetti App"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Connetti il tuo workspace Slack con Plane.",
+    "connect_personal_account": "Connetti il tuo account Slack personale con Plane.",
+    "personal_account_connected": "Il tuo account {providerName} personale è ora connesso a Plane.",
+    "link_personal_account": "Collega il tuo account {providerName} personale a Plane.",
+    "connected_slack_workspaces": "Spazi di lavoro Slack connessi",
+    "connected_on": "Connesso su {date}",
+    "disconnect_workspace": "Disconnetti {name} workspace",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Ricevi notifiche nei messaggi diretti di Slack per aggiornamenti importanti, promemoria e avvisi solo per te."
+      }
+    },
+    "project_updates": {
+      "title": "Aggiornamenti Progetto",
+      "description": "Configura notifiche di aggiornamenti di progetto per i tuoi progetti",
+      "add_new_project_update": "Aggiungi nuova notifica di aggiornamenti di progetto",
+      "project_updates_empty_state": "I progetti connessi ai canali Slack appariranno qui.",
+      "project_updates_form": {
+        "title": "Configura Aggiornamenti Progetto",
+        "description": "Ricevi notifiche di aggiornamenti di progetto in Slack quando vengono creati elementi di lavoro",
+        "failed_to_load_channels": "Impossibile caricare i canali da Slack",
+        "project_dropdown": {
+          "placeholder": "Seleziona un progetto",
+          "label": "Progetto Plane",
+          "no_projects": "Nessun progetto disponibile"
+        },
+        "channel_dropdown": {
+          "label": "Canale Slack",
+          "placeholder": "Seleziona un canale",
+          "no_channels": "Nessun canale disponibile"
+        },
+        "all_projects_connected": "Tutti i progetti sono già connessi a canali Slack.",
+        "all_channels_connected": "Tutti i canali Slack sono già connessi a progetti.",
+        "project_connection_success": "Connessione progetto creata con successo",
+        "project_connection_updated": "Connessione progetto aggiornata con successo",
+        "project_connection_deleted": "Connessione progetto eliminata con successo",
+        "failed_delete_project_connection": "Impossibile eliminare la connessione progetto",
+        "failed_create_project_connection": "Impossibile creare la connessione progetto",
+        "failed_upserting_project_connection": "Impossibile aggiornare la connessione progetto",
+        "failed_loading_project_connections": "Non è stato possibile caricare le tue connessioni progetto. Questo potrebbe essere dovuto a un problema di rete o un problema con l'integrazione."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Connetti il tuo spazio di lavoro Sentry con Plane.",
+    "connected_sentry_workspaces": "Spazi di lavoro Sentry connessi",
+    "connected_on": "Connesso il {date}",
+    "disconnect_workspace": "Disconnetti spazio di lavoro {name}",
+    "state_mapping": {
+      "title": "Mappatura degli stati",
+      "description": "Mappa gli stati degli incidenti Sentry ai tuoi stati di progetto. Configura quali stati usare quando un incidente Sentry è risolto o non risolto.",
+      "add_new_state_mapping": "Aggiungi nuova mappatura di stato",
+      "empty_state": "Nessuna mappatura di stato configurata. Crea la tua prima mappatura per sincronizzare gli stati degli incidenti Sentry con i tuoi stati di progetto.",
+      "failed_loading_state_mappings": "Non siamo riusciti a caricare le tue mappature di stato. Questo potrebbe essere dovuto a un problema di rete o un problema con l'integrazione.",
+      "loading_project_states": "Caricamento stati del progetto...",
+      "error_loading_states": "Errore nel caricamento degli stati",
+      "no_states_available": "Nessuno stato disponibile",
+      "no_permission_states": "Non hai il permesso di accedere agli stati per questo progetto",
+      "states_not_found": "Stati del progetto non trovati",
+      "server_error_states": "Errore del server nel caricamento degli stati"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Connetti e sincronizza i tuoi repository Bitbucket Data Center con Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Convalida i token IdP esterni per l'accesso API.",
+    "header_description": "Convalida i token OIDC/JWT emessi esternamente dal tuo IdP (Azure AD, Okta, ecc.) per l'accesso all'API di Plane.",
+    "connected": "Connesso",
+    "connect": "Connetti",
+    "uninstall": "Disinstalla",
+    "uninstalling": "Disinstallazione...",
+    "install_success": "OAuth Bridge installato con successo.",
+    "install_error": "Installazione di OAuth Bridge non riuscita.",
+    "uninstall_success": "OAuth Bridge disinstallato.",
+    "uninstall_error": "Disinstallazione di OAuth Bridge non riuscita.",
+    "token_providers": "Provider di token",
+    "token_providers_description": "Configura gli IdP esterni i cui JWT sono accettati come credenziali API.",
+    "add_provider": "Aggiungi provider",
+    "edit_provider": "Modifica provider",
+    "enabled": "Abilitato",
+    "disabled": "Disabilitato",
+    "test": "Test",
+    "no_providers_title": "Nessun provider configurato.",
+    "no_providers_description": "Aggiungi un IdP per abilitare l'autenticazione con token esterni.",
+    "provider_updated": "Provider aggiornato.",
+    "provider_added": "Provider aggiunto.",
+    "provider_save_error": "Salvataggio del provider non riuscito.",
+    "provider_deleted": "Provider eliminato.",
+    "provider_delete_error": "Eliminazione del provider non riuscita.",
+    "provider_update_error": "Aggiornamento del provider non riuscito.",
+    "jwks_reachable": "JWKS raggiungibile",
+    "jwks_unreachable": "JWKS non raggiungibile",
+    "jwks_test_error": "Impossibile recuperare il JWKS dall'URL configurato.",
+    "provider_form": {
+      "name_label": "Nome",
+      "name_placeholder": "es. Azure AD Production",
+      "name_description": "Etichetta leggibile per questo provider di identità",
+      "name_required": "Il nome è obbligatorio.",
+      "issuer_label": "Emittente",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Valore atteso del claim iss nel JWT",
+      "issuer_required": "L'emittente è obbligatorio.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "Endpoint HTTPS che fornisce il JSON Web Key Set del provider",
+      "jwks_url_required": "L'URL JWKS è obbligatorio.",
+      "jwks_url_https": "L'URL JWKS deve utilizzare HTTPS.",
+      "audience_label": "Pubblico",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Claim aud attesi nel JWT, separati da virgole.",
+      "user_claims_label": "Claim utente",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "Claim JWT contenente l'indirizzo email dell'utente",
+      "user_claims_required": "Il claim utente è obbligatorio.",
+      "allowed_algorithms_label": "Algoritmi di firma consentiti",
+      "allowed_algorithms_description": "Algoritmi asimmetrici accettati per la verifica della firma JWT",
+      "allowed_algorithms_required": "È richiesto almeno un algoritmo.",
+      "select_algorithms": "Seleziona algoritmi",
+      "jwks_cache_ttl_label": "TTL cache JWKS (secondi)",
+      "jwks_cache_ttl_description": "Durata della cache delle chiavi JWKS del provider (minimo 60s, predefinito 24 ore)",
+      "jwks_cache_ttl_min": "Il TTL della cache deve essere di almeno 60 secondi.",
+      "rate_limit_label": "Limite di frequenza",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Limitazione delle richieste come quantità/periodo (es. 120/minute). Lasciare vuoto per il limite predefinito.",
+      "enable_provider": "Abilita questo provider",
+      "saving": "Salvataggio...",
+      "update": "Aggiorna"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Connetti e sincronizza la tua organizzazione GitHub Enterprise con Plane.",
+    "app_form_title": "Configurazione GitHub Enterprise",
+    "app_form_description": "Configura GitHub Enterprise per connettersi con Plane.",
+    "app_id_title": "ID App",
+    "app_id_description": "L'ID dell'app che hai creato nella tua organizzazione GitHub Enterprise.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID è richiesto",
+    "app_name_title": "Slug App",
+    "app_name_description": "Il slug dell'app che hai creato nella tua organizzazione GitHub Enterprise.",
+    "app_name_error": "App slug è richiesto",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "Base URL",
+    "base_url_description": "L'URL base della tua organizzazione GitHub Enterprise.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "Base URL è richiesto",
+    "invalid_base_url_error": "URL base non valido",
+    "client_id_title": "ID Client",
+    "client_id_description": "L'ID client dell'app che hai creato nella tua organizzazione GitHub Enterprise.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID client è richiesto",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Il client secret dell'app che hai creato nella tua organizzazione GitHub Enterprise.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Client secret è richiesto",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Il webhook secret dell'app che hai creato nella tua organizzazione GitHub Enterprise.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Webhook secret è richiesto",
+    "private_key_title": "Private Key (Base64 encoded)",
+    "private_key_description": "Base64 encoded private key dell'app che hai creato nella tua organizzazione GitHub Enterprise.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Private key è richiesto",
+    "connect_app": "Connetti App"
+  },
+  "silo_errors": {
+    "invalid_query_params": "I parametri di query forniti sono invalidi o mancano campi obbligatori",
+    "invalid_installation_account": "Il account di installazione fornito non è valido",
+    "generic_error": "Si è verificato un errore imprevisto durante la elaborazione della tua richiesta",
+    "connection_not_found": "La connessione richiesta non è stata trovata",
+    "multiple_connections_found": "Sono state trovate più connessioni di quanto previsto",
+    "cannot_create_multiple_connections": "Hai già connesso la tua organizzazione con uno spazio di lavoro. Per favore disconnetti la connessione esistente prima di connettere una nuova.",
+    "installation_not_found": "L'installazione richiesta non è stata trovata",
+    "user_not_found": "L'utente richiesto non è stato trovato",
+    "error_fetching_token": "Impossibile ottenere il token di autenticazione",
+    "invalid_app_credentials": "Le credenziali dell'app fornite non sono valide",
+    "invalid_app_installation_id": "Impossibile installare l'app"
+  },
+  "import_status": {
+    "queued": "In coda",
+    "created": "Creato",
+    "initiated": "Inizializzato",
+    "pulling": "Trascinamento",
+    "timed_out": "Tempo scaduto",
+    "pulled": "Trascinato",
+    "progressing": "In corso",
+    "transforming": "Trasformazione",
+    "transformed": "Trasformato",
+    "pushing": "Inserimento",
+    "finished": "Completato",
+    "error": "Errore",
+    "cancelled": "Annullato"
+  }
+}
diff --git a/packages/i18n/src/locales/it/module.json b/packages/i18n/src/locales/it/module.json
new file mode 100644
index 0000000..36f86a0
--- /dev/null
+++ b/packages/i18n/src/locales/it/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Modulo} other {Moduli}}",
+    "no_module": "Nessun modulo",
+    "select": "Aggiungi moduli"
+  }
+}
diff --git a/packages/i18n/src/locales/it/navigation.json b/packages/i18n/src/locales/it/navigation.json
new file mode 100644
index 0000000..db31c30
--- /dev/null
+++ b/packages/i18n/src/locales/it/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Nessun risultato trovato"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Stickies",
+    "your_work": "Il tuo lavoro",
+    "projects": "Progetti",
+    "pages": "Pagine",
+    "new_work_item": "Nuovo elemento di lavoro",
+    "home": "Home",
+    "inbox": "Posta in arrivo",
+    "workspace": "workspace",
+    "views": "Visualizzazioni",
+    "analytics": "Analisi",
+    "work_items": "Elementi di lavoro",
+    "cycles": "Cicli",
+    "modules": "Moduli",
+    "intake": "Intake",
+    "drafts": "Bozze",
+    "favorites": "Preferiti",
+    "pro": "Pro",
+    "upgrade": "Aggiorna",
+    "pi_chat": "Plane AI",
+    "epics": "Epiche",
+    "upgrade_plan": "Piano di aggiornamento",
+    "plane_pro": "Plane Pro",
+    "business": "Business"
+  }
+}
diff --git a/packages/i18n/src/locales/it/notification.json b/packages/i18n/src/locales/it/notification.json
new file mode 100644
index 0000000..c9bf91e
--- /dev/null
+++ b/packages/i18n/src/locales/it/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Notifiche",
+    "page_label": "{workspace} - Notifiche",
+    "options": {
+      "mark_all_as_read": "Segna tutto come letto",
+      "mark_read": "Segna come letto",
+      "mark_unread": "Segna come non letto",
+      "refresh": "Aggiorna",
+      "filters": "Filtri Notifiche",
+      "show_unread": "Mostra non lette",
+      "show_snoozed": "Mostra snoozate",
+      "show_archived": "Mostra archiviate",
+      "mark_archive": "Archivia",
+      "mark_unarchive": "Rimuovi da archivio",
+      "mark_snooze": "Snoozed",
+      "mark_unsnooze": "Annulla snooze"
+    },
+    "toasts": {
+      "read": "Notifica segnata come letta",
+      "unread": "Notifica segnata come non letta",
+      "archived": "Notifica archiviata",
+      "unarchived": "Notifica rimossa dall'archivio",
+      "snoozed": "Notifica snoozata",
+      "unsnoozed": "Notifica desnoozata"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Seleziona per visualizzare i dettagli."
+      },
+      "all": {
+        "title": "Nessun elemento di lavoro assegnato",
+        "description": "Qui puoi vedere gli aggiornamenti degli elementi di lavoro assegnati a te"
+      },
+      "mentions": {
+        "title": "Nessun elemento di lavoro assegnato",
+        "description": "Qui puoi vedere gli aggiornamenti degli elementi di lavoro assegnati a te"
+      }
+    },
+    "tabs": {
+      "all": "Tutti",
+      "mentions": "Menzioni"
+    },
+    "filter": {
+      "assigned": "Assegnati a me",
+      "created": "Creati da me",
+      "subscribed": "Iscritti da me"
+    },
+    "snooze": {
+      "1_day": "1 giorno",
+      "3_days": "3 giorni",
+      "5_days": "5 giorni",
+      "1_week": "1 settimana",
+      "2_weeks": "2 settimane",
+      "custom": "Personalizzato"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/page.json b/packages/i18n/src/locales/it/page.json
new file mode 100644
index 0000000..1dbc06e
--- /dev/null
+++ b/packages/i18n/src/locales/it/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Schema",
+        "empty_state": {
+          "title": "Intestazioni mancanti",
+          "description": "Aggiungiamo alcune intestazioni a questa pagina per vederle qui."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Parole",
+          "characters": "Caratteri",
+          "paragraphs": "Paragrafi",
+          "read_time": "Tempo di lettura"
+        },
+        "actors_info": {
+          "edited_by": "Modificato da",
+          "created_by": "Creato da"
+        },
+        "version_history": {
+          "label": "Cronologia versioni",
+          "current_version": "Versione corrente",
+          "highlight_changes": "Evidenzia modifiche"
+        }
+      },
+      "assets": {
+        "label": "Risorse",
+        "download_button": "Scarica",
+        "empty_state": {
+          "title": "Immagini mancanti",
+          "description": "Aggiungi immagini per vederle qui."
+        }
+      },
+      "comments": {
+        "label": "Commenti",
+        "empty_state": {
+          "title": "Nessun commento",
+          "description": "Aggiungi commenti per vederli qui."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Il nome dello sticky non può superare i 100 caratteri.",
+        "already_exists": "Esiste già uno sticky senza descrizione"
+      },
+      "created": {
+        "title": "Sticky creato",
+        "message": "Lo sticky è stato creato con successo"
+      },
+      "not_created": {
+        "title": "Sticky non creato",
+        "message": "Lo sticky non può essere creato"
+      },
+      "updated": {
+        "title": "Sticky aggiornato",
+        "message": "Lo sticky è stato aggiornato con successo"
+      },
+      "not_updated": {
+        "title": "Sticky non aggiornato",
+        "message": "Lo sticky non può essere aggiornato"
+      },
+      "removed": {
+        "title": "Sticky rimosso",
+        "message": "Lo sticky è stato rimosso con successo"
+      },
+      "not_removed": {
+        "title": "Sticky non rimosso",
+        "message": "Lo sticky non può essere rimosso"
+      }
+    },
+    "open_button": "Apri pannello di navigazione",
+    "close_button": "Chiudi pannello di navigazione",
+    "outline_floating_button": "Apri schema"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Sposta",
+        "loading": "Spostamento"
+      },
+      "cannot_move_to_teamspace": "Le pagine private e condivise non possono essere spostate in un teamspace.",
+      "placeholders": {
+        "workspace_to_all": "Cerca progetti e teamspace",
+        "workspace_to_project": "Cerca progetti",
+        "project_to_all": "Cerca progetti e teamspace",
+        "project_to_project": "Cerca progetti",
+        "project_to_all_with_wiki": "Cerca raccolte wiki, progetti e teamspace",
+        "project_to_project_with_wiki": "Cerca raccolte wiki e progetti"
+      },
+      "toasts": {
+        "success": {
+          "title": "Successo!",
+          "message": "Pagina spostata con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Impossibile spostare la pagina. Riprova più tardi."
+        },
+        "collection_error": {
+          "title": "Spostata nel wiki",
+          "message": "La pagina è stata spostata nel wiki, ma non è stato possibile aggiungerla alla raccolta selezionata. Rimane in General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Rimuovi dalla raccolta",
+      "success_message": "Pagina rimossa dalla raccolta.",
+      "error_message": "Non è stato possibile rimuovere la pagina dalla raccolta. Riprova."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Limite di contenuto raggiunto e la sincronizzazione in tempo reale è disattivata. Crea una nuova pagina o usa pagine annidate per continuare la sincronizzazione."
+  }
+}
diff --git a/packages/i18n/src/locales/it/power-k.json b/packages/i18n/src/locales/it/power-k.json
new file mode 100644
index 0000000..2f7baab
--- /dev/null
+++ b/packages/i18n/src/locales/it/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Elimina elementi di lavoro in blocco"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Azioni elemento di lavoro",
+        "indicator": "Elemento di lavoro",
+        "change_state": "Cambia stato",
+        "change_priority": "Cambia priorità",
+        "change_assignees": "Assegna a",
+        "assign_to_me": "Assegna a me",
+        "unassign_from_me": "Rimuovi assegnazione a me",
+        "change_estimate": "Cambia stima",
+        "add_to_cycle": "Aggiungi al ciclo",
+        "add_to_modules": "Aggiungi ai moduli",
+        "add_labels": "Aggiungi etichette",
+        "subscribe": "Iscriviti alle notifiche",
+        "unsubscribe": "Annulla iscrizione alle notifiche",
+        "delete": "Elimina",
+        "copy_id": "Copia ID",
+        "copy_id_toast_success": "ID dell'elemento di lavoro copiato negli appunti.",
+        "copy_id_toast_error": "Si è verificato un errore durante la copia dell'ID dell'elemento di lavoro negli appunti.",
+        "copy_title": "Copia titolo",
+        "copy_title_toast_success": "Titolo dell'elemento di lavoro copiato negli appunti.",
+        "copy_title_toast_error": "Si è verificato un errore durante la copia del titolo dell'elemento di lavoro negli appunti.",
+        "copy_url": "Copia URL",
+        "copy_url_toast_success": "URL dell'elemento di lavoro copiato negli appunti.",
+        "copy_url_toast_error": "Si è verificato un errore durante la copia dell'URL dell'elemento di lavoro negli appunti."
+      },
+      "cycle": {
+        "title": "Azioni ciclo",
+        "indicator": "Ciclo",
+        "add_to_favorites": "Aggiungi ai preferiti",
+        "remove_from_favorites": "Rimuovi dai preferiti",
+        "copy_url": "Copia URL",
+        "copy_url_toast_success": "URL del ciclo copiato negli appunti.",
+        "copy_url_toast_error": "Si è verificato un errore durante la copia dell'URL del ciclo negli appunti."
+      },
+      "module": {
+        "title": "Azioni modulo",
+        "indicator": "Modulo",
+        "add_remove_members": "Aggiungi/rimuovi membri",
+        "change_status": "Cambia stato",
+        "add_to_favorites": "Aggiungi ai preferiti",
+        "remove_from_favorites": "Rimuovi dai preferiti",
+        "copy_url": "Copia URL",
+        "copy_url_toast_success": "URL del modulo copiato negli appunti.",
+        "copy_url_toast_error": "Si è verificato un errore durante la copia dell'URL del modulo negli appunti."
+      },
+      "page": {
+        "title": "Azioni pagina",
+        "indicator": "Pagina",
+        "lock": "Blocca",
+        "unlock": "Sblocca",
+        "make_private": "Rendi privato",
+        "make_public": "Rendi pubblico",
+        "archive": "Archivia",
+        "restore": "Ripristina",
+        "add_to_favorites": "Aggiungi ai preferiti",
+        "remove_from_favorites": "Rimuovi dai preferiti",
+        "copy_url": "Copia URL",
+        "copy_url_toast_success": "URL della pagina copiato negli appunti.",
+        "copy_url_toast_error": "Si è verificato un errore durante la copia dell'URL della pagina negli appunti."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Nuovo elemento di lavoro",
+      "create_page": "Nuova pagina",
+      "create_view": "Nuova visualizzazione",
+      "create_cycle": "Nuovo ciclo",
+      "create_module": "Nuovo modulo",
+      "create_project": "Nuovo progetto",
+      "create_workspace": "Nuovo spazio di lavoro",
+      "create_project_automation": "Nuova automazione"
+    },
+    "navigation_actions": {
+      "open_workspace": "Apri uno spazio di lavoro",
+      "nav_home": "Vai alla home",
+      "nav_inbox": "Vai alla posta in arrivo",
+      "nav_your_work": "Vai al tuo lavoro",
+      "nav_account_settings": "Vai alle impostazioni dell'account",
+      "open_project": "Apri un progetto",
+      "nav_projects_list": "Vai all'elenco dei progetti",
+      "nav_all_workspace_work_items": "Vai a tutti gli elementi di lavoro",
+      "nav_assigned_workspace_work_items": "Vai agli elementi di lavoro assegnati",
+      "nav_created_workspace_work_items": "Vai agli elementi di lavoro creati",
+      "nav_subscribed_workspace_work_items": "Vai agli elementi di lavoro iscritti",
+      "nav_workspace_analytics": "Vai alle analisi dello spazio di lavoro",
+      "nav_workspace_drafts": "Vai alle bozze dello spazio di lavoro",
+      "nav_workspace_archives": "Vai agli archivi dello spazio di lavoro",
+      "open_workspace_setting": "Apri un'impostazione dello spazio di lavoro",
+      "nav_workspace_settings": "Vai alle impostazioni dello spazio di lavoro",
+      "nav_project_work_items": "Vai agli elementi di lavoro",
+      "open_project_cycle": "Apri un ciclo",
+      "nav_project_cycles": "Vai ai cicli",
+      "open_project_module": "Apri un modulo",
+      "nav_project_modules": "Vai ai moduli",
+      "open_project_view": "Apri una visualizzazione del progetto",
+      "nav_project_views": "Vai alle visualizzazioni del progetto",
+      "nav_project_pages": "Vai alle pagine",
+      "nav_project_intake": "Vai all'intake",
+      "nav_project_archives": "Vai agli archivi del progetto",
+      "open_project_setting": "Apri un'impostazione del progetto",
+      "nav_project_settings": "Vai alle impostazioni del progetto",
+      "nav_workspace_active_cycle": "Vai a tutti i cicli attivi",
+      "nav_project_overview": "Vai alla panoramica del progetto"
+    },
+    "account_actions": {
+      "sign_out": "Esci",
+      "workspace_invites": "Inviti allo spazio di lavoro"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Alterna la barra laterale dell'app",
+      "copy_current_page_url": "Copia l'URL della pagina corrente",
+      "copy_current_page_url_toast_success": "URL della pagina corrente copiato negli appunti.",
+      "copy_current_page_url_toast_error": "Si è verificato un errore durante la copia dell'URL della pagina corrente negli appunti.",
+      "focus_top_nav_search": "Attiva il campo di ricerca"
+    },
+    "preferences_actions": {
+      "update_theme": "Cambia tema dell'interfaccia",
+      "update_timezone": "Cambia fuso orario",
+      "update_start_of_week": "Cambia primo giorno della settimana",
+      "update_language": "Cambia lingua dell'interfaccia",
+      "toast": {
+        "theme": {
+          "success": "Tema aggiornato con successo.",
+          "error": "Impossibile aggiornare il tema. Riprova."
+        },
+        "timezone": {
+          "success": "Fuso orario aggiornato con successo.",
+          "error": "Impossibile aggiornare il fuso orario. Riprova."
+        },
+        "generic": {
+          "success": "Preferenze aggiornate con successo.",
+          "error": "Impossibile aggiornare le preferenze. Riprova."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Apri scorciatoie da tastiera",
+      "open_plane_documentation": "Apri la documentazione di Plane",
+      "join_forum": "Unisciti al nostro forum",
+      "report_bug": "Segnala un bug",
+      "chat_with_us": "Chatta con noi"
+    },
+    "page_placeholders": {
+      "default": "Digita un comando o cerca",
+      "open_workspace": "Apri uno spazio di lavoro",
+      "open_project": "Apri un progetto",
+      "open_workspace_setting": "Apri un'impostazione dello spazio di lavoro",
+      "open_project_cycle": "Apri un ciclo",
+      "open_project_module": "Apri un modulo",
+      "open_project_view": "Apri una visualizzazione del progetto",
+      "open_project_setting": "Apri un'impostazione del progetto",
+      "update_work_item_state": "Cambia stato",
+      "update_work_item_priority": "Cambia priorità",
+      "update_work_item_assignee": "Assegna a",
+      "update_work_item_estimate": "Cambia stima",
+      "update_work_item_cycle": "Aggiungi al ciclo",
+      "update_work_item_module": "Aggiungi ai moduli",
+      "update_work_item_labels": "Aggiungi etichette",
+      "update_module_member": "Cambia membri",
+      "update_module_status": "Cambia stato",
+      "update_theme": "Cambia tema",
+      "update_timezone": "Cambia fuso orario",
+      "update_start_of_week": "Cambia primo giorno della settimana",
+      "update_language": "Cambia lingua"
+    },
+    "search_menu": {
+      "no_results": "Nessun risultato trovato",
+      "clear_search": "Cancella ricerca",
+      "go_to_advanced_search": "Vai alla ricerca avanzata"
+    },
+    "footer": {
+      "workspace_level": "Livello dello spazio di lavoro"
+    },
+    "group_titles": {
+      "actions": "Azioni",
+      "contextual": "Contestuale",
+      "navigation": "Naviga",
+      "create": "Crea",
+      "general": "Generale",
+      "settings": "Impostazioni",
+      "account": "Account",
+      "miscellaneous": "Varie",
+      "preferences": "Preferenze",
+      "help": "Aiuto"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/project-settings.json b/packages/i18n/src/locales/it/project-settings.json
new file mode 100644
index 0000000..5fc17c5
--- /dev/null
+++ b/packages/i18n/src/locales/it/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Inserisci l'ID del progetto",
+      "please_select_a_timezone": "Seleziona un fuso orario",
+      "archive_project": {
+        "title": "Archivia progetto",
+        "description": "Archiviare un progetto lo rimuoverà dal menu di navigazione laterale, anche se potrai sempre accedervi dalla pagina dei progetti. Potrai ripristinare il progetto o eliminarlo quando vuoi.",
+        "button": "Archivia progetto"
+      },
+      "delete_project": {
+        "title": "Elimina progetto",
+        "description": "Eliminando un progetto, tutti i dati e le risorse all'interno di esso verranno rimossi definitivamente e non potranno essere recuperati.",
+        "button": "Elimina il mio progetto"
+      },
+      "toast": {
+        "success": "Progetto aggiornato con successo",
+        "error": "Impossibile aggiornare il progetto. Per favore, riprova."
+      }
+    },
+    "members": {
+      "label": "Membri",
+      "project_lead": "Responsabile del progetto",
+      "project_lead_description": "Seleziona il responsabile del progetto.",
+      "default_assignee": "Assegnatario predefinito",
+      "default_assignee_description": "Seleziona l’assegnatario predefinito del progetto.",
+      "project_subscribers": "Iscritti al progetto",
+      "project_subscribers_description": "Seleziona i membri che riceveranno le notifiche per questo progetto.",
+      "guest_super_permissions": {
+        "title": "Concedi accesso in sola lettura a tutti gli elementi di lavoro per gli utenti ospiti:",
+        "sub_heading": "Questo permetterà agli ospiti di visualizzare tutti gli elementi di lavoro del progetto."
+      },
+      "invite_members": {
+        "title": "Invita membri",
+        "sub_heading": "Invita membri a lavorare sul tuo progetto.",
+        "select_co_worker": "Seleziona un collega"
+      }
+    },
+    "states": {
+      "heading": "Stati",
+      "description": "Definisci e personalizza gli stati del flusso di lavoro per tracciare l'avanzamento dei tuoi elementi di lavoro.",
+      "describe_this_state_for_your_members": "Descrivi questo stato per i tuoi membri.",
+      "empty_state": {
+        "title": "Nessuno stato disponibile per il gruppo {groupKey}",
+        "description": "Crea un nuovo stato"
+      }
+    },
+    "labels": {
+      "heading": "Etichette",
+      "description": "Crea etichette personalizzate per categorizzare e organizzare i tuoi elementi di lavoro",
+      "label_title": "Titolo etichetta",
+      "label_title_is_required": "Il titolo dell'etichetta è obbligatorio",
+      "label_max_char": "Il nome dell'etichetta non deve superare i 255 caratteri",
+      "toast": {
+        "error": "Errore durante l'aggiornamento dell'etichetta"
+      }
+    },
+    "estimates": {
+      "heading": "Stime",
+      "description": "Imposta sistemi di stima per tracciare e comunicare lo sforzo richiesto per ogni elemento di lavoro.",
+      "label": "Stime",
+      "title": "Abilita le stime per il mio progetto",
+      "enable_description": "Ti aiutano a comunicare la complessità e il carico di lavoro del team.",
+      "no_estimate": "Nessuna stima",
+      "new": "Nuovo sistema di stima",
+      "create": {
+        "custom": "Personalizzato",
+        "start_from_scratch": "Inizia da zero",
+        "choose_template": "Scegli un modello",
+        "choose_estimate_system": "Scegli un sistema di stima",
+        "enter_estimate_point": "Inserisci stima",
+        "step": "Passo {step} di {total}",
+        "label": "Crea stima"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Stima creata",
+            "message": "La stima è stata creata con successo"
+          },
+          "error": {
+            "title": "Creazione stima fallita",
+            "message": "Non siamo riusciti a creare la nuova stima, riprova."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Stima modificata",
+            "message": "La stima è stata aggiornata nel tuo progetto."
+          },
+          "error": {
+            "title": "Modifica stima fallita",
+            "message": "Non siamo riusciti a modificare la stima, riprova"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Successo!",
+            "message": "Le stime sono state abilitate."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Successo!",
+            "message": "Le stime sono state disabilitate."
+          },
+          "error": {
+            "title": "Errore!",
+            "message": "Impossibile disabilitare la stima. Riprova"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Stime riordinate",
+            "message": "Le stime sono state riordinate nel tuo progetto."
+          },
+          "error": {
+            "title": "Riordinamento stime fallito",
+            "message": "Non siamo riusciti a riordinare le stime, riprova"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Sistema di stima creato",
+            "message": "Creato e abilitato con successo"
+          },
+          "error": {
+            "title": "Errore",
+            "message": "Qualcosa è andato storto"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "La stima deve essere maggiore di 0.",
+        "unable_to_process": "Non possiamo elaborare la tua richiesta, riprova.",
+        "numeric": "La stima deve essere un valore numerico.",
+        "character": "La stima deve essere un valore di carattere.",
+        "empty": "Il valore della stima non può essere vuoto.",
+        "already_exists": "Il valore della stima esiste già.",
+        "unsaved_changes": "Hai delle modifiche non salvate. Salva prima di cliccare su Fatto",
+        "remove_empty": "La stima non può essere vuota. Inserisci un valore in ogni campo o rimuovi quelli per cui non hai valori.",
+        "fill": "Compila questo campo di stima",
+        "repeat": "Il valore della stima non può essere ripetuto"
+      },
+      "systems": {
+        "points": {
+          "label": "Punti",
+          "fibonacci": "Fibonacci",
+          "linear": "Lineare",
+          "squares": "Quadrati",
+          "custom": "Personalizzato"
+        },
+        "categories": {
+          "label": "Categorie",
+          "t_shirt_sizes": "Taglie T-Shirt",
+          "easy_to_hard": "Da facile a difficile",
+          "custom": "Personalizzato"
+        },
+        "time": {
+          "label": "Tempo",
+          "hours": "Ore"
+        }
+      },
+      "edit": {
+        "title": "Modifica sistema di stime",
+        "add_or_update": {
+          "title": "Aggiungi, aggiorna o rimuovi stime",
+          "description": "Gestisci il sistema attuale aggiungendo, aggiornando o rimuovendo punti o categorie."
+        },
+        "switch": {
+          "title": "Cambia tipo di stima",
+          "description": "Converti il tuo sistema a punti in sistema a categorie e viceversa."
+        }
+      },
+      "switch": "Cambia sistema di stime",
+      "current": "Sistema di stime attuale",
+      "select": "Seleziona un sistema di stime"
+    },
+    "automations": {
+      "label": "Automatizzazioni",
+      "heading": "Automazioni",
+      "description": "Configura azioni automatizzate per ottimizzare il flusso di gestione del progetto e ridurre le attività manuali.",
+      "auto-archive": {
+        "title": "Archivia automaticamente gli elementi di lavoro chiusi",
+        "description": "Plane archiverà automaticamente gli elementi di lavoro che sono stati completati o annullati.",
+        "duration": "Archivia automaticamente gli elementi di lavoro chiusi per"
+      },
+      "auto-close": {
+        "title": "Chiudi automaticamente gli elementi di lavoro",
+        "description": "Plane chiuderà automaticamente gli elementi di lavoro che non sono stati completati o annullati.",
+        "duration": "Chiudi automaticamente gli elementi di lavoro inattivi per",
+        "auto_close_status": "Stato di chiusura automatica"
+      },
+      "auto-remind": {
+        "title": "Promemoria automatici",
+        "description": "Plane invierà automaticamente promemoria via email e notifiche in-app per mantenere il tuo team in linea con le scadenze.",
+        "duration": "Invia promemoria prima di"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Nessuna etichetta ancora",
+        "description": "Crea etichette per aiutare a organizzare e filtrare gli elementi di lavoro nel tuo progetto."
+      },
+      "estimates": {
+        "title": "Nessun sistema di stime ancora",
+        "description": "Crea un set di stime per comunicare la quantità di lavoro per elemento di lavoro.",
+        "primary_button": "Aggiungi sistema di stime"
+      },
+      "integrations": {
+        "title": "Nessuna integrazione configurata",
+        "description": "Configura GitHub e altre integrazioni per sincronizzare i tuoi elementi di lavoro del progetto."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Abilita flussi di lavoro",
+        "description": "Imposta flussi di lavoro per controllare il movimento degli elementi di lavoro",
+        "no_states_tooltip": "Nessuno stato è stato aggiunto al flusso di lavoro.",
+        "no_work_item_types_tooltip": "Nessun tipo di elemento di lavoro è stato aggiunto al flusso di lavoro.",
+        "no_states_or_work_item_types_tooltip": "Nessuno stato o tipo di elemento di lavoro è stato aggiunto al flusso di lavoro.",
+        "toast": {
+          "loading": {
+            "enabling": "Abilitazione dei flussi di lavoro",
+            "disabling": "Disabilitazione dei flussi di lavoro"
+          },
+          "success": {
+            "title": "Successo!",
+            "message": "Flussi di lavoro abilitati con successo."
+          },
+          "error": {
+            "title": "Errore!",
+            "message": "Impossibile abilitare i flussi di lavoro. Riprova."
+          }
+        }
+      },
+      "heading": "Flussi di lavoro",
+      "description": "Automatizza le transizioni degli elementi di lavoro e imposta regole per controllare come le attività si spostano nella pipeline del tuo progetto.",
+      "add_button": "Aggiungi nuovo flusso di lavoro",
+      "search": "Cerca flussi di lavoro",
+      "detail": {
+        "define": "Definisci flusso di lavoro",
+        "add_states": "Aggiungi stati",
+        "unmapped_states": {
+          "title": "Stati non mappati rilevati",
+          "description": "Alcuni elementi di lavoro per i tipi selezionati si trovano attualmente in stati che non esistono in questo flusso di lavoro.",
+          "note": "Se abiliti questo flusso di lavoro, questi elementi verranno spostati automaticamente allo stato iniziale di questo flusso di lavoro.",
+          "label": "Stati mancanti",
+          "tooltip": "Alcuni elementi di lavoro si trovano in stati non mappati a questo flusso di lavoro. Apri il flusso di lavoro per rivedere."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Tutti gli stati sono in uso",
+          "description": "Tutti gli stati definiti per questo progetto sono già presenti nel tuo flusso di lavoro corrente."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Questo flusso di lavoro si applica a qualsiasi tipo di elemento di lavoro che non è assegnato a un flusso di lavoro."
+      },
+      "create": {
+        "heading": "Crea nuovo flusso di lavoro",
+        "name": {
+          "placeholder": "Aggiungi un nome univoco",
+          "validation": {
+            "max_length": "Il nome deve essere di meno di 255 caratteri",
+            "required": "Il nome è obbligatorio",
+            "invalid": "Il nome può contenere solo lettere, numeri, spazi, trattini e apostrofi"
+          }
+        },
+        "description": {
+          "placeholder": "Aggiungi una breve descrizione",
+          "validation": {
+            "invalid": "La descrizione può contenere solo lettere, numeri, spazi, trattini e apostrofi"
+          }
+        },
+        "work_item_type": {
+          "label": "Tipo di elemento di lavoro"
+        },
+        "success": {
+          "title": "Successo!",
+          "message": "Flusso di lavoro creato con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Impossibile creare il flusso di lavoro. Riprova."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Successo!",
+          "message": "Flusso di lavoro aggiornato con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Impossibile aggiornare il flusso di lavoro. Riprova."
+        }
+      },
+      "delete": {
+        "loading": "Eliminazione del flusso di lavoro",
+        "success": {
+          "title": "Successo!",
+          "message": "Flusso di lavoro eliminato con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Impossibile eliminare il flusso di lavoro. Riprova."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Successo!",
+          "message": "Stati aggiunti con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Impossibile aggiungere gli stati. Riprova."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Tipi di elementi di lavoro",
+      "description": "Crea e personalizza diversi tipi di elementi di lavoro con proprietà uniche"
+    },
+    "features": {
+      "cycles": {
+        "title": "Cicli",
+        "short_title": "Cicli",
+        "description": "Pianifica il lavoro in periodi flessibili che si adattano al ritmo e al tempo unici di questo progetto.",
+        "toggle_title": "Abilita cicli",
+        "toggle_description": "Pianifica il lavoro in periodi di tempo mirati."
+      },
+      "modules": {
+        "title": "Moduli",
+        "short_title": "Moduli",
+        "description": "Organizza il lavoro in sotto-progetti con responsabili e assegnatari dedicati.",
+        "toggle_title": "Abilita moduli",
+        "toggle_description": "I membri del progetto potranno creare e modificare moduli."
+      },
+      "views": {
+        "title": "Viste",
+        "short_title": "Viste",
+        "description": "Salva ordinamenti, filtri e opzioni di visualizzazione personalizzati o condividili con il tuo team.",
+        "toggle_title": "Abilita viste",
+        "toggle_description": "I membri del progetto potranno creare e modificare viste."
+      },
+      "pages": {
+        "title": "Pagine",
+        "short_title": "Pagine",
+        "description": "Crea e modifica contenuti liberi: note, documenti, qualsiasi cosa.",
+        "toggle_title": "Abilita pagine",
+        "toggle_description": "I membri del progetto potranno creare e modificare pagine."
+      },
+      "intake": {
+        "intake_responsibility": "Responsabilità di accettazione",
+        "intake_sources": "Fonti di accettazione",
+        "title": "Ricezione",
+        "short_title": "Ricezione",
+        "description": "Consenti ai non membri di condividere bug, feedback e suggerimenti; senza interrompere il tuo flusso di lavoro.",
+        "toggle_title": "Abilita ricezione",
+        "toggle_description": "Consenti ai membri del progetto di creare richieste di ricezione nell'app.",
+        "toggle_tooltip_on": "Chiedi all'admin del progetto di attivarlo.",
+        "toggle_tooltip_off": "Chiedi all'admin del progetto di disattivarlo.",
+        "notify_assignee": {
+          "title": "Notifica assegnatari",
+          "description": "Per una nuova richiesta di accettazione, gli assegnatari predefiniti saranno avvisati tramite notifiche"
+        },
+        "in_app": {
+          "title": "In-app",
+          "description": "Ricevi nuovi elementi di lavoro da membri e ospiti nel tuo spazio di lavoro senza disturbare quelli esistenti."
+        },
+        "email": {
+          "title": "Email",
+          "description": "Raccogli nuovi elementi di lavoro da chiunque invii un'email a un indirizzo email Plane.",
+          "fieldName": "ID email"
+        },
+        "form": {
+          "title": "Moduli",
+          "description": "Consenti a persone esterne al tuo spazio di lavoro di creare potenziali nuovi elementi di lavoro tramite un modulo dedicato e sicuro.",
+          "fieldName": "URL modulo predefinito",
+          "create_forms": "Crea moduli utilizzando i tipi di elementi di lavoro",
+          "manage_forms": "Gestisci moduli",
+          "manage_forms_tooltip": "Chiedi all'admin dello spazio di lavoro di gestirlo.",
+          "create_form": "Crea modulo",
+          "edit_form": "Modifica dettagli modulo",
+          "form_title": "Titolo modulo",
+          "form_title_required": "Il titolo del modulo è obbligatorio",
+          "work_item_type": "Tipo di elemento di lavoro",
+          "remove_property": "Rimuovi proprietà",
+          "select_properties": "Seleziona proprietà",
+          "search_placeholder": "Cerca proprietà",
+          "toasts": {
+            "success_create": "Modulo di accettazione creato con successo",
+            "success_update": "Modulo di accettazione aggiornato con successo",
+            "error_create": "Impossibile creare il modulo di accettazione",
+            "error_update": "Impossibile aggiornare il modulo di accettazione"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Impostazione degli assegnatari...",
+            "success": {
+              "title": "Successo!",
+              "message": "Assegnatari impostati con successo."
+            },
+            "error": {
+              "title": "Errore!",
+              "message": "Qualcosa è andato storto durante l'impostazione degli assegnatari. Riprova."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Monitoraggio del tempo",
+        "short_title": "Monitoraggio del tempo",
+        "description": "Registra il tempo trascorso su elementi di lavoro e progetti.",
+        "toggle_title": "Abilita monitoraggio del tempo",
+        "toggle_description": "I membri del progetto potranno registrare il tempo lavorato."
+      },
+      "milestones": {
+        "title": "Traguardi",
+        "short_title": "Traguardi",
+        "description": "I traguardi forniscono un livello per allineare gli elementi di lavoro verso date di completamento condivise.",
+        "toggle_title": "Abilita traguardi",
+        "toggle_description": "Organizza gli elementi di lavoro per scadenze dei traguardi."
+      },
+      "toasts": {
+        "loading": "Aggiornamento funzionalità progetto...",
+        "success": "Funzionalità progetto aggiornata con successo.",
+        "error": "Qualcosa è andato storto durante l'aggiornamento della funzionalità progetto. Riprova."
+      }
+    },
+    "project_updates": {
+      "heading": "Aggiornamenti del progetto",
+      "description": "Monitoraggio consolidato e tracciamento dell'avanzamento di questo progetto"
+    },
+    "templates": {
+      "heading": "Modelli",
+      "description": "Risparmia l'80% del tempo speso nella creazione di progetti, elementi di lavoro e pagine quando usi i modelli."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Pianificazione automatica dei cicli",
+        "description": "Mantieni i cicli in movimento senza configurazione manuale.",
+        "tooltip": "Crea automaticamente nuovi cicli in base alla pianificazione scelta.",
+        "edit_button": "Modifica",
+        "form": {
+          "cycle_title": {
+            "label": "Titolo del ciclo",
+            "placeholder": "Titolo",
+            "tooltip": "Il titolo sarà seguito da numeri per i cicli successivi. Ad esempio: Design - 1/2/3",
+            "validation": {
+              "required": "Il titolo del ciclo è obbligatorio",
+              "max_length": "Il titolo non deve superare 255 caratteri"
+            }
+          },
+          "cycle_duration": {
+            "label": "Durata del ciclo",
+            "unit": "Settimane",
+            "validation": {
+              "required": "La durata del ciclo è obbligatoria",
+              "min": "La durata del ciclo deve essere di almeno 1 settimana",
+              "max": "La durata del ciclo non può superare 30 settimane",
+              "positive": "La durata del ciclo deve essere positiva"
+            }
+          },
+          "cooldown_period": {
+            "label": "Periodo di raffreddamento",
+            "unit": "giorni",
+            "tooltip": "Pausa tra i cicli prima dell'inizio del successivo.",
+            "validation": {
+              "required": "Il periodo di raffreddamento è obbligatorio",
+              "negative": "Il periodo di raffreddamento non può essere negativo"
+            }
+          },
+          "start_date": {
+            "label": "Giorno di inizio del ciclo",
+            "validation": {
+              "required": "La data di inizio è obbligatoria",
+              "past": "La data di inizio non può essere nel passato"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Numero di cicli futuri",
+            "validation": {
+              "required": "Il numero di cicli è obbligatorio",
+              "min": "È richiesto almeno 1 ciclo",
+              "max": "Non è possibile pianificare più di 3 cicli"
+            }
+          },
+          "auto_rollover": {
+            "label": "Trasferimento automatico degli elementi di lavoro",
+            "tooltip": "Il giorno del completamento di un ciclo, spostare tutti gli elementi di lavoro non completati nel ciclo successivo."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Attivazione pianificazione automatica dei cicli",
+            "loading_disable": "Disattivazione pianificazione automatica dei cicli",
+            "success": {
+              "title": "Successo!",
+              "message": "Pianificazione automatica dei cicli attivata con successo."
+            },
+            "error": {
+              "title": "Errore!",
+              "message": "Attivazione della pianificazione automatica dei cicli non riuscita."
+            }
+          },
+          "save": {
+            "loading": "Salvataggio configurazione pianificazione automatica dei cicli",
+            "success": {
+              "title": "Successo!",
+              "message_create": "Configurazione pianificazione automatica dei cicli salvata con successo.",
+              "message_update": "Configurazione pianificazione automatica dei cicli aggiornata con successo."
+            },
+            "error": {
+              "title": "Errore!",
+              "message_create": "Salvataggio configurazione pianificazione automatica dei cicli non riuscito.",
+              "message_update": "Aggiornamento configurazione pianificazione automatica dei cicli non riuscito."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/project.json b/packages/i18n/src/locales/it/project.json
new file mode 100644
index 0000000..f6e9ff6
--- /dev/null
+++ b/packages/i18n/src/locales/it/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Creato il",
+      "updated_at": "Aggiornato il",
+      "name": "Nome"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Aggiungi ciclo",
+    "more_details": "Altri dettagli",
+    "cycle": "Ciclo",
+    "update_cycle": "Aggiorna ciclo",
+    "create_cycle": "Crea ciclo",
+    "no_matching_cycles": "Nessun ciclo corrispondente",
+    "remove_filters_to_see_all_cycles": "Rimuovi i filtri per vedere tutti i cicli",
+    "remove_search_criteria_to_see_all_cycles": "Rimuovi i criteri di ricerca per vedere tutti i cicli",
+    "only_completed_cycles_can_be_archived": "Solo i cicli completati possono essere archiviati",
+    "start_date": "Data di inizio",
+    "end_date": "Data di fine",
+    "in_your_timezone": "Nel tuo fuso orario",
+    "transfer_work_items": "Trasferisci {count} elementi di lavoro",
+    "transfer": {
+      "no_cycles_available": "Nessun altro ciclo disponibile per trasferire gli elementi di lavoro."
+    },
+    "date_range": "Intervallo di date",
+    "add_date": "Aggiungi data",
+    "active_cycle": {
+      "label": "Ciclo attivo",
+      "progress": "Avanzamento",
+      "chart": "Grafico di burndown",
+      "priority_issue": "Elementi di lavoro ad alta priorità",
+      "assignees": "Assegnatari",
+      "issue_burndown": "Burndown degli elementi di lavoro",
+      "ideal": "Ideale",
+      "current": "Corrente",
+      "labels": "Etichette",
+      "trailing": "In ritardo",
+      "leading": "In anticipo"
+    },
+    "upcoming_cycle": {
+      "label": "Ciclo in arrivo"
+    },
+    "completed_cycle": {
+      "label": "Ciclo completato"
+    },
+    "status": {
+      "days_left": "Giorni rimanenti",
+      "completed": "Completato",
+      "yet_to_start": "Non ancora iniziato",
+      "in_progress": "In corso",
+      "draft": "Bozza"
+    },
+    "action": {
+      "restore": {
+        "title": "Ripristina ciclo",
+        "success": {
+          "title": "Ciclo ripristinato",
+          "description": "Il ciclo è stato ripristinato."
+        },
+        "failed": {
+          "title": "Ripristino del ciclo fallito",
+          "description": "Il ciclo non può essere ripristinato. Per favore, riprova."
+        }
+      },
+      "favorite": {
+        "loading": "Aggiunta del ciclo ai preferiti in corso",
+        "success": {
+          "description": "Ciclo aggiunto ai preferiti.",
+          "title": "Successo!"
+        },
+        "failed": {
+          "description": "Impossibile aggiungere il ciclo ai preferiti. Per favore, riprova.",
+          "title": "Errore!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Rimozione del ciclo dai preferiti in corso",
+        "success": {
+          "description": "Ciclo rimosso dai preferiti.",
+          "title": "Successo!"
+        },
+        "failed": {
+          "description": "Impossibile rimuovere il ciclo dai preferiti. Per favore, riprova.",
+          "title": "Errore!"
+        }
+      },
+      "update": {
+        "loading": "Aggiornamento del ciclo in corso",
+        "success": {
+          "description": "Ciclo aggiornato con successo.",
+          "title": "Successo!"
+        },
+        "failed": {
+          "description": "Errore durante l'aggiornamento del ciclo. Per favore, riprova.",
+          "title": "Errore!"
+        },
+        "error": {
+          "already_exists": "Hai già un ciclo nelle date indicate, se vuoi creare una bozza di ciclo, puoi farlo rimuovendo entrambe le date."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Raggruppa e definisci il tempo per il tuo lavoro in cicli.",
+        "description": "Suddividi il lavoro in blocchi temporali, lavora a ritroso dalla scadenza del tuo progetto per impostare le date e fai progressi tangibili come team.",
+        "primary_button": {
+          "text": "Imposta il tuo primo ciclo",
+          "comic": {
+            "title": "I cicli sono intervalli temporali ripetitivi.",
+            "description": "Uno sprint, un'iterazione o qualsiasi altro termine usato per il tracciamento settimanale o bisettimanale del lavoro è un ciclo."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Nessun elemento di lavoro aggiunto al ciclo",
+        "description": "Aggiungi o crea gli elementi di lavoro che desideri includere in questo ciclo",
+        "primary_button": {
+          "text": "Crea un nuovo elemento di lavoro"
+        },
+        "secondary_button": {
+          "text": "Aggiungi un elemento di lavoro esistente"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Nessun elemento di lavoro nel ciclo",
+        "description": "Nessun elemento di lavoro presente nel ciclo. Gli elementi di lavoro sono stati trasferiti o nascosti. Per visualizzare gli elementi nascosti, se presenti, aggiorna le proprietà di visualizzazione di conseguenza."
+      },
+      "active": {
+        "title": "Nessun ciclo attivo",
+        "description": "Un ciclo attivo è quello che include la data odierna nel suo intervallo. Visualizza qui i dettagli e l'avanzamento del ciclo attivo."
+      },
+      "archived": {
+        "title": "Nessun ciclo archiviato ancora",
+        "description": "Per organizzare il tuo progetto, archivia i cicli completati. Li troverai qui una volta archiviati."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Salva visualizzazioni filtrate per il tuo progetto. Crea quante ne vuoi",
+        "description": "Le visualizzazioni sono un insieme di filtri salvati che usi frequentemente o a cui vuoi avere accesso rapido. Tutti i tuoi colleghi in un progetto possono vedere tutte le visualizzazioni e scegliere quella che fa per loro.",
+        "primary_button": {
+          "text": "Crea la tua prima visualizzazione",
+          "comic": {
+            "title": "Le visualizzazioni si basano sulle proprietà degli elementi di lavoro.",
+            "description": "Puoi creare una visualizzazione da qui con quante proprietà e filtri desideri."
+          }
+        },
+        "filter": {
+          "title": "Nessuna visualizzazione corrispondente",
+          "description": "Nessuna visualizzazione corrisponde ai criteri di ricerca.\n Crea una nuova visualizzazione invece."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Nessun elemento di lavoro archiviato ancora",
+        "description": "Manualmente o tramite automazione, puoi archiviare gli elementi di lavoro completati o annullati. Trovali qui una volta archiviati.",
+        "primary_button": {
+          "text": "Imposta automazione"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Nessun elemento di lavoro trovato corrispondente ai filtri applicati",
+        "secondary_button": {
+          "text": "Cancella tutti i filtri"
+        }
+      },
+      "public": {
+        "title": "Nessuna pagina pubblica ancora",
+        "description": "Visualizza qui le pagine condivise con tutti nel tuo progetto.",
+        "primary_button": {
+          "text": "Crea la tua prima pagina"
+        }
+      },
+      "archived": {
+        "title": "Nessuna pagina archiviata ancora",
+        "description": "Archivia le pagine che non sono più di tuo interesse. Potrai accedervi quando necessario."
+      },
+      "shared": {
+        "title": "Nessuna pagina condivisa ancora",
+        "description": "Le pagine che altri hanno condiviso con te appariranno qui."
+      }
+    },
+    "delete_view": {
+      "title": "Sei sicuro di voler eliminare questa visualizzazione?",
+      "content": "Se confermi, tutte le opzioni di ordinamento, filtro e visualizzazione + il layout che hai scelto per questa visualizzazione saranno eliminate permanentemente senza possibilità di ripristinarle."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Crea un elemento di lavoro e assegnalo a qualcuno, anche a te stesso",
+        "description": "Considera gli elementi di lavoro come compiti, attività, lavori o JTBD. Un elemento di lavoro e i suoi sotto-elementi di lavoro sono solitamente attività basate sul tempo assegnate ai membri del team. Il tuo team crea, assegna e completa gli elementi di lavoro per portare il progetto verso il suo obiettivo.",
+        "primary_button": {
+          "text": "Crea il tuo primo elemento di lavoro",
+          "comic": {
+            "title": "Gli elementi di lavoro sono i mattoni fondamentali in Plane.",
+            "description": "Ridisegna l'interfaccia di Plane, rebranding dell'azienda o lancia il nuovo sistema di iniezione del carburante sono esempi di elementi di lavoro che probabilmente hanno sotto-elementi."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Nessun elemento di lavoro archiviato ancora",
+        "description": "Manualmente o tramite automazione, puoi archiviare gli elementi di lavoro che sono stati completati o annullati. Li troverai qui una volta archiviati.",
+        "primary_button": {
+          "text": "Imposta l'automazione"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Nessun elemento di lavoro trovato corrispondente ai filtri applicati",
+        "secondary_button": {
+          "text": "Cancella tutti i filtri"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Aggiungi Modulo",
+    "update_module": "Aggiorna Modulo",
+    "create_module": "Crea Modulo",
+    "archive_module": "Archivia Modulo",
+    "restore_module": "Ripristina Modulo",
+    "delete_module": "Elimina modulo",
+    "empty_state": {
+      "general": {
+        "title": "Associa i traguardi del tuo progetto ai Moduli e traccia facilmente il lavoro aggregato.",
+        "description": "Un gruppo di elementi di lavoro che appartengono a un genitore logico e gerarchico forma un modulo. Considerali come un modo per tracciare il lavoro in base ai traguardi del progetto. Hanno i propri intervalli temporali e scadenze, oltre ad analisi che ti aiutano a vedere quanto sei vicino o lontano da un traguardo.",
+        "primary_button": {
+          "text": "Crea il tuo primo modulo",
+          "comic": {
+            "title": "I moduli aiutano a raggruppare il lavoro per gerarchia.",
+            "description": "Un modulo per il carrello, un modulo per il telaio e un modulo per il magazzino sono tutti buoni esempi di questo raggruppamento."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Nessun elemento di lavoro nel modulo",
+        "description": "Crea o aggiungi elementi di lavoro che desideri completare come parte di questo modulo",
+        "primary_button": {
+          "text": "Crea nuovi elementi di lavoro"
+        },
+        "secondary_button": {
+          "text": "Aggiungi un elemento di lavoro esistente"
+        }
+      },
+      "archived": {
+        "title": "Nessun modulo archiviato ancora",
+        "description": "Per organizzare il tuo progetto, archivia i moduli completati o annullati. Li troverai qui una volta archiviati."
+      },
+      "sidebar": {
+        "in_active": "Questo modulo non è ancora attivo.",
+        "invalid_date": "Data non valida. Inserisci una data valida."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Archivia modulo",
+      "archive_module_description": "Solo i moduli completati o annullati possono essere archiviati.",
+      "delete_module": "Elimina modulo"
+    },
+    "toast": {
+      "copy": {
+        "success": "Link del modulo copiato negli appunti"
+      },
+      "delete": {
+        "success": "Modulo eliminato con successo",
+        "error": "Impossibile eliminare il modulo"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Scrivi una nota, un documento o una vera e propria base di conoscenza. Fai partire Galileo, l'assistente AI di Plane, per aiutarti a iniziare",
+        "description": "Le pagine sono spazi per appunti in Plane. Prendi note durante le riunioni, formattale facilmente, inserisci elementi di lavoro, disponili usando una libreria di componenti e tienili tutti nel contesto del tuo progetto. Per velocizzare qualsiasi documento, invoca Galileo, l'IA di Plane, con una scorciatoia o con il clic di un pulsante.",
+        "primary_button": {
+          "text": "Crea la tua prima pagina"
+        }
+      },
+      "private": {
+        "title": "Nessuna pagina privata ancora",
+        "description": "Tieni qui i tuoi appunti privati. Quando sarai pronto a condividerli, il team sarà a portata di clic.",
+        "primary_button": {
+          "text": "Crea la tua prima pagina"
+        }
+      },
+      "public": {
+        "title": "Nessuna pagina pubblica ancora",
+        "description": "Visualizza qui le pagine condivise con tutti nel tuo progetto.",
+        "primary_button": {
+          "text": "Crea la tua prima pagina"
+        }
+      },
+      "archived": {
+        "title": "Nessuna pagina archiviata ancora",
+        "description": "Archivia le pagine che non sono più di tuo interesse. Potrai accedervi quando necessario."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "L'accoglienza non è abilitata per il progetto.",
+        "description": "L'accoglienza ti aiuta a gestire le richieste in entrata per il tuo progetto e ad aggiungerle come elementi di lavoro nel tuo flusso. Abilita l'accoglienza dalle impostazioni del progetto per gestire le richieste.",
+        "primary_button": {
+          "text": "Gestisci funzionalità"
+        }
+      },
+      "cycle": {
+        "title": "I cicli non sono abilitati per questo progetto.",
+        "description": "Suddividi il lavoro in blocchi temporali, lavora a ritroso dalla scadenza del tuo progetto per impostare le date e fai progressi tangibili come team. Abilita la funzionalità dei cicli per il tuo progetto per iniziare a usarli.",
+        "primary_button": {
+          "text": "Gestisci funzionalità"
+        }
+      },
+      "module": {
+        "title": "I moduli non sono abilitati per il progetto.",
+        "description": "I moduli sono i blocchi costitutivi del tuo progetto. Abilita i moduli dalle impostazioni del progetto per iniziare a usarli.",
+        "primary_button": {
+          "text": "Gestisci funzionalità"
+        }
+      },
+      "page": {
+        "title": "Le pagine non sono abilitate per il progetto.",
+        "description": "Le pagine sono i blocchi costitutivi del tuo progetto. Abilita le pagine dalle impostazioni del progetto per iniziare a usarle.",
+        "primary_button": {
+          "text": "Gestisci funzionalità"
+        }
+      },
+      "view": {
+        "title": "Le visualizzazioni non sono abilitate per il progetto.",
+        "description": "Le visualizzazioni sono i blocchi costitutivi del tuo progetto. Abilita le visualizzazioni dalle impostazioni del progetto per iniziare a usarle.",
+        "primary_button": {
+          "text": "Gestisci funzionalità"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Pianificato",
+      "in_progress": "In corso",
+      "paused": "In pausa",
+      "completed": "Completato",
+      "cancelled": "Annullato"
+    },
+    "layout": {
+      "list": "Layout a lista",
+      "board": "Layout a galleria",
+      "timeline": "Layout a timeline"
+    },
+    "order_by": {
+      "name": "Nome",
+      "progress": "Avanzamento",
+      "issues": "Numero di elementi di lavoro",
+      "due_date": "Scadenza",
+      "created_at": "Data di creazione",
+      "manual": "Manuale"
+    }
+  },
+  "project_members": {
+    "full_name": "Nome completo",
+    "display_name": "Nome visualizzato",
+    "email": "Email",
+    "joining_date": "Data di adesione",
+    "role": "Ruolo"
+  },
+  "project": {
+    "members_import": {
+      "title": "Importa membri da CSV",
+      "description": "Carica un CSV con colonne: Email e Ruolo (5=Ospite, 15=Membro, 20=Amministratore). Gli utenti devono già essere membri dello spazio di lavoro.",
+      "download_sample": "Scarica CSV di esempio",
+      "dropzone": {
+        "active": "Rilascia il file CSV qui",
+        "inactive": "Trascina e rilascia o fai clic per caricare",
+        "file_type": "Sono supportati solo file .csv"
+      },
+      "buttons": {
+        "cancel": "Annulla",
+        "import": "Importa",
+        "try_again": "Riprova",
+        "close": "Chiudi",
+        "done": "Fatto"
+      },
+      "progress": {
+        "uploading": "Caricamento...",
+        "importing": "Importazione..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Importazione completata"
+        },
+        "message": {
+          "success": "{count} membr{plural} importat{plural} con successo nel progetto.",
+          "no_imports": "Nessun nuovo membro è stato importato dal file CSV."
+        },
+        "stats": {
+          "added": "Aggiunti",
+          "reactivated": "Riattivati",
+          "already_members": "Già membri",
+          "skipped": "Ignorati"
+        },
+        "download_errors": "Scarica dettagli ignorati"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "File non valido",
+          "message": "Sono supportati solo file CSV."
+        },
+        "import_failed": {
+          "title": "Importazione fallita",
+          "message": "Qualcosa è andato storto."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/settings.json b/packages/i18n/src/locales/it/settings.json
new file mode 100644
index 0000000..a5eb253
--- /dev/null
+++ b/packages/i18n/src/locales/it/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Cambia email",
+        "description": "Inserisci un nuovo indirizzo email per ricevere un link di verifica.",
+        "toasts": {
+          "success_title": "Successo!",
+          "success_message": "Email aggiornata con successo. Accedi di nuovo."
+        },
+        "form": {
+          "email": {
+            "label": "Nuova email",
+            "placeholder": "Inserisci la tua email",
+            "errors": {
+              "required": "L’email è obbligatoria",
+              "invalid": "L’email non è valida",
+              "exists": "L’email esiste già. Usane un’altra.",
+              "validation_failed": "La verifica dell’email non è riuscita. Riprova."
+            }
+          },
+          "code": {
+            "label": "Codice univoco",
+            "placeholder": "123456",
+            "helper_text": "Codice di verifica inviato alla tua nuova email.",
+            "errors": {
+              "required": "Il codice univoco è obbligatorio",
+              "invalid": "Codice di verifica non valido. Riprova."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Continua",
+          "confirm": "Conferma",
+          "cancel": "Annulla"
+        },
+        "states": {
+          "sending": "Invio…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Preferenze",
+      "description": "Personalizza la tua esperienza dell'app al modo in cui lavori"
+    },
+    "notifications": {
+      "heading": "Notifiche via email",
+      "description": "Rimani aggiornato sugli elementi di lavoro a cui sei iscritto. Abilita questa opzione per ricevere notifiche.",
+      "select_default_view": "Seleziona vista predefinita",
+      "compact": "Compatto",
+      "full": "Schermo intero"
+    },
+    "security": {
+      "heading": "Sicurezza"
+    },
+    "api_tokens": {
+      "title": "Token di accesso personali",
+      "description": "Genera token API sicuri per integrare i tuoi dati con sistemi e applicazioni esterni."
+    },
+    "activity": {
+      "heading": "Attività",
+      "description": "Traccia le tue azioni e modifiche recenti su tutti i progetti ed elementi di lavoro."
+    },
+    "connections": {
+      "title": "Connessioni",
+      "heading": "Connessioni",
+      "description": "Gestisci le impostazioni delle connessioni del tuo spazio di lavoro."
+    }
+  },
+  "profile": {
+    "label": "Profilo",
+    "page_label": "Il tuo lavoro",
+    "work": "Lavoro",
+    "details": {
+      "joined_on": "Iscritto il",
+      "time_zone": "Fuso orario"
+    },
+    "stats": {
+      "workload": "Carico di lavoro",
+      "overview": "Panoramica",
+      "created": "Elementi di lavoro creati",
+      "assigned": "Elementi di lavoro assegnati",
+      "subscribed": "Elementi di lavoro iscritti",
+      "state_distribution": {
+        "title": "Elementi di lavoro per stato",
+        "empty": "Crea elementi di lavoro per visualizzarli per stato nel grafico per un'analisi migliore."
+      },
+      "priority_distribution": {
+        "title": "Elementi di lavoro per priorità",
+        "empty": "Crea elementi di lavoro per visualizzarli per priorità nel grafico per un'analisi migliore."
+      },
+      "recent_activity": {
+        "title": "Attività recente",
+        "empty": "Non abbiamo trovato dati. Per favore, controlla i tuoi input",
+        "button": "Scarica l'attività di oggi",
+        "button_loading": "Download in corso"
+      }
+    },
+    "actions": {
+      "profile": "Profilo",
+      "security": "Sicurezza",
+      "activity": "Attività",
+      "preferences": "Preferenze",
+      "notifications": "Notifiche",
+      "api-tokens": "Token di accesso personali",
+      "connections": "Connessioni"
+    },
+    "tabs": {
+      "summary": "Riepilogo",
+      "assigned": "Assegnati",
+      "created": "Creati",
+      "subscribed": "Iscritti",
+      "activity": "Attività"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Nessuna attività ancora",
+        "description": "Inizia creando un nuovo elemento di lavoro! Aggiungi dettagli e proprietà ad esso. Esplora Plane per vedere la tua attività."
+      },
+      "assigned": {
+        "title": "Nessun elemento di lavoro assegnato a te",
+        "description": "Gli elementi di lavoro assegnati a te possono essere tracciati da qui."
+      },
+      "created": {
+        "title": "Nessun elemento di lavoro ancora",
+        "description": "Tutti gli elementi di lavoro creati da te appariranno qui. Tracciali direttamente da qui."
+      },
+      "subscribed": {
+        "title": "Nessun elemento di lavoro ancora",
+        "description": "Iscriviti agli elementi di lavoro che ti interessano, tracciali tutti qui."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Preferenza di sistema"
+      },
+      "light": {
+        "label": "Chiaro"
+      },
+      "dark": {
+        "label": "Scuro"
+      },
+      "light_contrast": {
+        "label": "Contrasto elevato chiaro"
+      },
+      "dark_contrast": {
+        "label": "Contrasto elevato scuro"
+      },
+      "custom": {
+        "label": "Tema personalizzato"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/stickies.json b/packages/i18n/src/locales/it/stickies.json
new file mode 100644
index 0000000..132747c
--- /dev/null
+++ b/packages/i18n/src/locales/it/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "I tuoi stickies",
+    "placeholder": "clicca per scrivere qui",
+    "all": "Tutti gli stickies",
+    "no-data": "Annota un'idea, cattura un aha o registra un lampo di genio. Aggiungi uno sticky per iniziare.",
+    "add": "Aggiungi sticky",
+    "search_placeholder": "Cerca per titolo",
+    "delete": "Elimina sticky",
+    "delete_confirmation": "Sei sicuro di voler eliminare questo sticky?",
+    "empty_state": {
+      "simple": "Annota un'idea, cattura un aha o registra un lampo di genio. Aggiungi uno sticky per iniziare.",
+      "general": {
+        "title": "Gli stickies sono note rapide e cose da fare che annoti al volo.",
+        "description": "Cattura i tuoi pensieri e idee senza sforzo creando stickies a cui puoi accedere in qualsiasi momento e ovunque.",
+        "primary_button": {
+          "text": "Aggiungi sticky"
+        }
+      },
+      "search": {
+        "title": "Non corrisponde a nessuno dei tuoi stickies.",
+        "description": "Prova con un termine diverso o facci sapere se sei sicuro che la tua ricerca sia corretta.",
+        "primary_button": {
+          "text": "Aggiungi sticky"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Il nome dello sticky non può superare i 100 caratteri.",
+        "already_exists": "Esiste già uno sticky senza descrizione"
+      },
+      "created": {
+        "title": "Sticky creato",
+        "message": "Lo sticky è stato creato con successo"
+      },
+      "not_created": {
+        "title": "Sticky non creato",
+        "message": "Lo sticky non può essere creato"
+      },
+      "updated": {
+        "title": "Sticky aggiornato",
+        "message": "Lo sticky è stato aggiornato con successo"
+      },
+      "not_updated": {
+        "title": "Sticky non aggiornato",
+        "message": "Lo sticky non può essere aggiornato"
+      },
+      "removed": {
+        "title": "Sticky rimosso",
+        "message": "Lo sticky è stato rimosso con successo"
+      },
+      "not_removed": {
+        "title": "Sticky non rimosso",
+        "message": "Lo sticky non può essere rimosso"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/template.json b/packages/i18n/src/locales/it/template.json
new file mode 100644
index 0000000..40de474
--- /dev/null
+++ b/packages/i18n/src/locales/it/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Modelli",
+      "description": "Risparmia l'80% del tempo dedicato alla creazione di progetti, elementi di lavoro e pagine quando utilizzi i modelli.",
+      "new_project_template": "Nuovo modello di progetto",
+      "new_work_item_template": "Nuovo modello di elemento di lavoro",
+      "new_page_template": "Nuovo modello di pagina",
+      "options": {
+        "project": {
+          "label": "Modelli di progetto"
+        },
+        "work_item": {
+          "label": "Modelli di elementi di lavoro"
+        },
+        "page": {
+          "label": "Modelli di pagina"
+        }
+      },
+      "create_template": {
+        "label": "Crea modello",
+        "no_permission": {
+          "project": "Contatta l'amministratore del tuo progetto per creare modelli",
+          "workspace": "Contatta l'amministratore del tuo spazio di lavoro per creare modelli"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Usa modello",
+          "loading": "Usa modello"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Derivato dallo spazio di lavoro"
+        },
+        "project": {
+          "info": "Derivato dal progetto"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Dai un nome al tuo modello di progetto.",
+              "validation": {
+                "required": "Il nome del modello è obbligatorio",
+                "maxLength": "Il nome del modello deve contenere meno di 255 caratteri"
+              }
+            },
+            "description": {
+              "placeholder": "Descrivi quando e come utilizzare questo modello."
+            }
+          },
+          "name": {
+            "placeholder": "Dai un nome al tuo progetto.",
+            "validation": {
+              "required": "Il titolo del progetto è obbligatorio",
+              "maxLength": "Il titolo del progetto deve contenere meno di 255 caratteri"
+            }
+          },
+          "description": {
+            "placeholder": "Descrivi lo scopo e gli obiettivi di questo progetto."
+          },
+          "button": {
+            "create": "Crea modello di progetto",
+            "update": "Aggiorna modello di progetto"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Dai un nome al tuo modello di elemento di lavoro.",
+              "validation": {
+                "required": "Il nome del modello è obbligatorio",
+                "maxLength": "Il nome del modello deve contenere meno di 255 caratteri"
+              }
+            },
+            "description": {
+              "placeholder": "Descrivi quando e come utilizzare questo modello."
+            }
+          },
+          "name": {
+            "placeholder": "Dai un titolo a questo elemento di lavoro.",
+            "validation": {
+              "required": "Il titolo dell'elemento di lavoro è obbligatorio",
+              "maxLength": "Il titolo dell'elemento di lavoro deve contenere meno di 255 caratteri"
+            }
+          },
+          "description": {
+            "placeholder": "Descrivi questo elemento di lavoro in modo che sia chiaro cosa otterrai quando lo completerai."
+          },
+          "button": {
+            "create": "Crea modello di elemento di lavoro",
+            "update": "Aggiorna modello di elemento di lavoro"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Nome il tuo modello di pagina.",
+              "validation": {
+                "required": "Il nome del modello è obbligatorio",
+                "maxLength": "Il nome del modello deve contenere meno di 255 caratteri"
+              }
+            },
+            "description": {
+              "placeholder": "Descrivi quando e come utilizzare questo modello."
+            }
+          },
+          "name": {
+            "placeholder": "Pagina senza titolo",
+            "validation": {
+              "maxLength": "Il nome della pagina deve contenere meno di 255 caratteri"
+            }
+          },
+          "button": {
+            "create": "Crea modello di pagina",
+            "update": "Aggiorna modello di pagina"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Impostazioni di pubblicazione} other {Pubblica nel Marketplace}}",
+          "unpublish_action": "Rimuovi dal Marketplace",
+          "title": "Rendi il tuo modello scopribile e riconoscibile.",
+          "name": {
+            "label": "Nome del modello",
+            "placeholder": "Dai un nome al tuo modello",
+            "validation": {
+              "required": "Il nome del modello è obbligatorio",
+              "maxLength": "Il nome del modello deve contenere meno di 255 caratteri"
+            }
+          },
+          "short_description": {
+            "label": "Descrizione breve",
+            "placeholder": "Questo modello è ottimo per i Project Managers che gestiscono più progetti contemporaneamente.",
+            "validation": {
+              "required": "La descrizione breve è obbligatoria"
+            }
+          },
+          "description": {
+            "label": "Descrizione",
+            "placeholder": "Migliora la produttività e semplifica la comunicazione con la nostra integrazione di riconoscimento vocale.\n• Trascrizione in tempo reale: Converti parole pronunciate in testo preciso istantaneamente.\n• Creazione di attività e commenti: Aggiungi attività, descrizioni e commenti tramite comandi vocali.",
+            "validation": {
+              "required": "La descrizione è obbligatoria"
+            }
+          },
+          "category": {
+            "label": "Categoria",
+            "placeholder": "Scegli dove pensi che questo si adatti meglio. Puoi scegliere più di una.",
+            "validation": {
+              "required": "Almeno una categoria è obbligatoria"
+            }
+          },
+          "keywords": {
+            "label": "Parole chiave",
+            "placeholder": "Usa termini che pensi che i tuoi utenti cercheranno quando cercano questo modello.",
+            "helperText": "Inserisci parole chiave separate da virgole che aiuteranno le persone a trovare questo dalla ricerca.",
+            "validation": {
+              "required": "Almeno una parola chiave è obbligatoria"
+            }
+          },
+          "website": {
+            "label": "URL del sito web",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "URL non valido",
+              "maxLength": "L'URL deve contenere meno di 800 caratteri"
+            }
+          },
+          "company_name": {
+            "label": "Nome dell'azienda",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Il nome dell'azienda è obbligatorio",
+              "maxLength": "Il nome dell'azienda deve contenere meno di 255 caratteri"
+            }
+          },
+          "contact_email": {
+            "label": "Email di supporto",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Indirizzo email non valido",
+              "maxLength": "L'email di supporto deve contenere meno di 255 caratteri"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Link alla tua politica privacy",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "URL non valido",
+              "maxLength": "URL deve contenere meno di 800 caratteri"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Link alla tua politica di utilizzo",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "URL non valido",
+              "maxLength": "URL deve contenere meno di 800 caratteri"
+            }
+          },
+          "cover_image": {
+            "label": "Aggiungi un'immagine di copertina che verrà visualizzata nel marketplace",
+            "upload_title": "Carica immagine di copertina",
+            "upload_placeholder": "Clicca per caricare o trascina e rilascia per caricare un'immagine di copertina",
+            "drop_here": "Rilascia qui",
+            "click_to_upload": "Clicca per caricare",
+            "invalid_file_or_exceeds_size_limit": "File non valido o supera il limite di dimensione. Per favore riprova.",
+            "upload_and_save": "Carica e salva",
+            "uploading": "Caricamento",
+            "remove": "Rimuovi",
+            "removing": "Rimozione",
+            "validation": {
+              "required": "L'immagine di copertina è obbligatoria"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Includi documenti e immagini che pensi aiuti a comprendere meglio questo modello.",
+            "validation": {
+              "required": "Almeno una schermata è obbligatoria"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Modelli",
+        "description": "Con i modelli di progetto, elemento di lavoro e pagina in Plane, non devi creare un progetto da zero o impostare manualmente le proprietà degli elementi di lavoro.",
+        "sub_description": "Recupera l'80% del tuo tempo di amministrazione quando utilizzi i Modelli."
+      },
+      "no_templates": {
+        "button": "Crea il tuo primo modello"
+      },
+      "no_labels": {
+        "description": " Nessuna etichetta ancora. Crea etichette per aiutare a organizzare e filtrare gli elementi di lavoro nel tuo progetto."
+      },
+      "no_modules": {
+        "description": "Nessun modulo ancora. Organizza il lavoro in sotto-progetti con responsabili e assegnatari dedicati."
+      },
+      "no_work_items": {
+        "description": "Nessun elemento di lavoro ancora. Aggiungi uno per strutturare il tuo lavoro meglio."
+      },
+      "no_sub_work_items": {
+        "description": "Nessun sotto-elemento di lavoro ancora. Aggiungi uno per strutturare il tuo lavoro meglio."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Non ci sono modelli a cui hai accesso.",
+          "description": "Per favore crea un modello"
+        },
+        "no_results": {
+          "title": "Questo non corrisponde a nessun modello.",
+          "description": "Prova a cercare con altri termini."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Modello creato",
+          "message": "{templateName}, il modello di {templateType}, è ora disponibile per il tuo spazio di lavoro."
+        },
+        "error": {
+          "title": "Non è stato possibile creare quel modello questa volta.",
+          "message": "Prova a salvare di nuovo i tuoi dettagli o copiali in un nuovo modello, preferibilmente in un'altra scheda."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Modello modificato",
+          "message": "{templateName}, il modello di {templateType}, è stato modificato."
+        },
+        "error": {
+          "title": "Non è stato possibile salvare le modifiche a questo modello.",
+          "message": "Prova a salvare di nuovo i tuoi dettagli o torna a questo modello più tardi. Se ci sono ancora problemi, contattaci."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Modello eliminato",
+          "message": "{templateName}, il modello di {templateType}, è stato eliminato dal tuo spazio di lavoro."
+        },
+        "error": {
+          "title": "Non è stato possibile eliminare quel modello questa volta.",
+          "message": "Prova a eliminarlo di nuovo o torna più tardi. Se non riesci a eliminarlo, contattaci."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Modello rimosso",
+          "message": "{templateName}, il modello di {templateType}, è stato rimosso."
+        },
+        "error": {
+          "title": "Non è stato possibile rimuovere quel modello questa volta.",
+          "message": "Prova a rimuoverlo di nuovo o torna più tardi. Se non riesci a rimuoverlo, contattaci."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Elimina modello",
+      "description": {
+        "prefix": "Sei sicuro di voler eliminare il modello-",
+        "suffix": "? Tutti i dati relativi al modello saranno rimossi definitivamente. Questa azione non può essere annullata."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Rimuovi modello",
+      "description": {
+        "prefix": "Sei sicuro di voler rimuovere il modello-",
+        "suffix": "? Questo modello non sarà più disponibile per gli utenti nel marketplace."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Aggiungi nuovo modello",
+        "project": "Aggiungi nuovo modello"
+      },
+      "label": {
+        "project": "Scegli un modello di progetto",
+        "page": "Scegli dal modello"
+      },
+      "tooltip": {
+        "work_item": "Scegli un modello di elemento di lavoro"
+      },
+      "no_results": {
+        "work_item": "Nessun modello trovato.",
+        "project": "Nessun modello trovato."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/tour.json b/packages/i18n/src/locales/it/tour.json
new file mode 100644
index 0000000..6b3a028
--- /dev/null
+++ b/packages/i18n/src/locales/it/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Benvenuto nel tuo spazio di lavoro",
+        "description": "Per aiutarti a iniziare, abbiamo creato un Progetto Demo per te. Aggiungiamo il tuo primo elemento di lavoro."
+      },
+      "step_one": {
+        "title": "Fai clic su \"+ Aggiungi elemento di lavoro\"",
+        "description": "Inizia facendo clic sul pulsante \"+ Nuovo elemento di lavoro\". Puoi creare attività, bug o un tipo personalizzato che si adatta alle tue esigenze."
+      },
+      "step_two": {
+        "title": "Filtra i tuoi elementi di lavoro",
+        "description": "Usa i filtri per restringere rapidamente il tuo elenco. Puoi filtrare per stato, priorità o membri del team. "
+      },
+      "step_three": {
+        "title": "Visualizza, raggruppa e ordina gli elementi di lavoro secondo necessità.",
+        "description": "Vedi le proprietà richieste e raggruppa o ordina gli elementi di lavoro in base alle tue esigenze."
+      },
+      "step_four": {
+        "title": "Visualizza come vuoi",
+        "description": "Seleziona quali proprietà vuoi vedere nell elenco. Puoi anche raggruppare e ordinare gli elementi di lavoro a modo tuo."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Fai progressi con i Cicli",
+        "description": "Premi Q per creare un Ciclo. Nominalo e imposta le date—solo un ciclo per progetto."
+      },
+      "step_one": {
+        "title": "Crea un nuovo ciclo",
+        "description": "Premi Q per creare un Ciclo. Nominalo e imposta le date—solo un ciclo per progetto."
+      },
+      "step_two": {
+        "title": "Fai clic su \"+\"",
+        "description": "Inizia facendo clic sul pulsante \"+\". Aggiungi elementi di lavoro nuovi o esistenti direttamente dalla pagina Ciclo."
+      },
+      "step_three": {
+        "title": "Riepilogo del ciclo",
+        "description": "Traccia i progressi del ciclo, la produttività del team e le priorità—e indaga se qualcosa è in ritardo."
+      },
+      "step_four": {
+        "title": "Trasferisci elementi di lavoro",
+        "description": "Dopo la data di scadenza, un ciclo si completa automaticamente. Sposta il lavoro non finito in un altro ciclo."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Dividi il tuo progetto in Moduli",
+        "description": "I moduli sono progetti più piccoli e focalizzati che aiutano gli utenti a raggruppare e organizzare gli elementi di lavoro entro tempi specifici."
+      },
+      "step_one": {
+        "title": "Crea Modulo",
+        "description": "I moduli sono progetti più piccoli e focalizzati che aiutano gli utenti a raggruppare e organizzare gli elementi di lavoro entro tempi specifici."
+      },
+      "step_two": {
+        "title": "Fai clic su \"+\"",
+        "description": "Inizia facendo clic sul pulsante \"+\". Aggiungi elementi di lavoro nuovi o esistenti direttamente dalla pagina Modulo."
+      },
+      "step_three": {
+        "title": "Stati del modulo",
+        "description": "I moduli utilizzano questi stati per aiutare gli utenti a pianificare e tracciare chiaramente i progressi e la fase."
+      },
+      "step_four": {
+        "title": "Progresso del modulo",
+        "description": "Il progresso del modulo viene tracciato tramite elementi completati, con analisi per monitorare le prestazioni."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Documenta con Pagine potenziate dall IA",
+        "description": "Le Pagine in Plane ti consentono di acquisire, organizzare e collaborare su informazioni di progetto—senza strumenti esterni."
+      },
+      "step_one": {
+        "title": "Rendi la pagina Pubblica o Privata",
+        "description": "Le pagine possono essere impostate come pubbliche, visibili a tutti nel tuo spazio di lavoro, o private, accessibili solo a te."
+      },
+      "step_two": {
+        "title": "Usa il comando /",
+        "description": "Usa / su una pagina per aggiungere contenuti da 16 tipi di blocchi, inclusi elenchi, immagini, tabelle e incorporamenti."
+      },
+      "step_three": {
+        "title": "Azioni della pagina",
+        "description": "Una volta creata la tua pagina, puoi fare clic sul menu ••• nell angolo in alto a destra per eseguire le seguenti azioni."
+      },
+      "step_four": {
+        "title": "Indice",
+        "description": "Ottieni una vista d insieme della tua pagina facendo clic sull icona del pannello per vedere tutti i titoli."
+      },
+      "step_five": {
+        "title": "Cronologia delle versioni",
+        "description": "Le pagine tracciano tutte le modifiche con la cronologia delle versioni, permettendoti di ripristinare versioni precedenti se necessario."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Semplifica le richieste con l intake",
+        "description": "Una funzionalità esclusiva di Plane che consente agli Ospiti di creare elementi di lavoro per bug, richieste o ticket."
+      },
+      "step_one": {
+        "title": "Richieste di intake aperte/chiuse",
+        "description": "Le richieste in sospeso rimangono nella scheda Aperte e, una volta affrontate da un amministratore o membro, passano a Chiuse."
+      },
+      "step_two": {
+        "title": "Accetta/rifiuta una richiesta in sospeso",
+        "description": "Accetta per modificare e spostare l elemento di lavoro nel tuo progetto, o rifiutalo per contrassegnarlo come Annullato."
+      },
+      "step_three": {
+        "title": "Posponi per ora",
+        "description": "Un elemento di lavoro può essere posticipato per rivederlo in un secondo momento. Verrà spostato in fondo all elenco delle richieste aperte."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Smetti di cambiare scheda. Connetti il tuo mondo.",
+        "description": "Collega GitHub, Slack per tracciare le PR e riassumere le chat direttamente in Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigazione, reinventata",
+        "sub_title": "Il tuo spazio di lavoro è ora più facile da esplorare con una navigazione più intelligente e semplificata.",
+        "highlight_1": "Struttura semplificata del pannello sinistro per una scoperta più veloce",
+        "highlight_2": "Ricerca globale migliorata per saltare a qualsiasi cosa istantaneamente",
+        "highlight_3": "Raggruppamento di categorie più intelligente per chiarezza e concentrazione",
+        "footer": "Vuoi una panoramica veloce?"
+      },
+      "step_zero": {
+        "title": "Trova qualsiasi cosa istantaneamente",
+        "description": "Usa la ricerca universale per passare a attività, progetti, pagine e persone—senza lasciare il tuo flusso."
+      },
+      "step_one": {
+        "title": "Mantieni il controllo sugli aggiornamenti",
+        "description": "La tua casella di posta mantiene tutte le menzioni, approvazioni e attività in un unico posto, così non perdi mai il lavoro importante."
+      },
+      "step_two": {
+        "title": "Personalizza la tua Navigazione",
+        "description": "Personalizza ciò che vedi e come navighi nelle Preferenze."
+      }
+    },
+    "actions": {
+      "close": "Chiudi",
+      "next": "Avanti",
+      "back": "Indietro",
+      "done": "Fatto",
+      "take_a_tour": "Fai un tour",
+      "get_started": "Inizia",
+      "got_it": "Capito"
+    },
+    "seed_data": {
+      "title": "Ecco il tuo progetto demo",
+      "description": "I progetti ti consentono di gestire i tuoi team, le attività e tutto ciò di cui hai bisogno per portare a termine le cose nel tuo spazio di lavoro."
+    }
+  },
+  "get_started": {
+    "title": "Ciao {name}, benvenuto a bordo!",
+    "description": "Ecco tutto ciò di cui hai bisogno per iniziare il tuo viaggio con Plane.",
+    "checklist_section": {
+      "title": "Inizia",
+      "description": "Inizia la tua configurazione e vedi le tue idee prendere vita più velocemente.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Crea un progetto"
+        },
+        "item_2": {
+          "title": "Crea un elemento di lavoro"
+        },
+        "item_3": {
+          "title": "Invita membri del team"
+        },
+        "item_4": {
+          "title": "Crea una pagina"
+        },
+        "item_5": {
+          "title": "Prova la chat Plane AI"
+        },
+        "item_6": {
+          "title": "Collega Integrazioni"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Invita il tuo team",
+      "description": "Invita i compagni di squadra e inizia a costruire insieme."
+    },
+    "integrations_section": {
+      "title": "Potenzia il tuo spazio di lavoro",
+      "more_integrations": "Sfoglia più integrazioni"
+    },
+    "switch_to_plane_section": {
+      "title": "Scopri perché i team passano a Plane",
+      "description": "Confronta Plane con gli strumenti che usi oggi e vedi la differenza."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/update.json b/packages/i18n/src/locales/it/update.json
new file mode 100644
index 0000000..e7a6194
--- /dev/null
+++ b/packages/i18n/src/locales/it/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Progresso",
+      "since_last_update": "Dal ultimo aggiornamento",
+      "comments": "{count, plural, one {# commento} other {# commenti}}"
+    },
+    "add_update": "Aggiungi aggiornamento",
+    "add_update_placeholder": "Scrivi il tuo aggiornamento qui",
+    "empty": {
+      "title": "Nessun aggiornamento",
+      "description": "Puoi vedere gli aggiornamenti qui."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reazione creata",
+          "message": "Reazione creata con successo."
+        },
+        "error": {
+          "title": "Reazione non creata",
+          "message": "La reazione non può essere creata."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reazione eliminata",
+          "message": "Reazione eliminata con successo."
+        },
+        "error": {
+          "title": "Reazione non eliminata",
+          "message": "La reazione non può essere eliminata."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Aggiornamento creato",
+        "message": "Aggiornamento creato con successo."
+      },
+      "error": {
+        "title": "Aggiornamento non creato",
+        "message": "L'aggiornamento non può essere creato."
+      }
+    },
+    "delete": {
+      "title": "Elimina aggiornamento",
+      "confirmation": "Sei sicuro di voler eliminare questo aggiornamento? Questa azione è irreversibile.",
+      "success": {
+        "title": "Aggiornamento eliminato",
+        "message": "L'aggiornamento è stato eliminato con successo."
+      },
+      "error": {
+        "title": "Aggiornamento non eliminato",
+        "message": "L'aggiornamento non può essere eliminato."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Aggiornamento aggiornato",
+        "message": "Aggiornamento aggiornato con successo."
+      },
+      "error": {
+        "title": "Aggiornamento non aggiornato",
+        "message": "L'aggiornamento non può essere aggiornato."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/wiki.json b/packages/i18n/src/locales/it/wiki.json
new file mode 100644
index 0000000..ebb71e6
--- /dev/null
+++ b/packages/i18n/src/locales/it/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Generale",
+      "private": "Privato",
+      "shared": "Condiviso",
+      "archived": "Archiviato"
+    },
+    "fallback_name": "Raccolta",
+    "form": {
+      "name_required": "Il titolo della raccolta è obbligatorio",
+      "name_max_length": "Il nome della raccolta deve essere inferiore a 255 caratteri",
+      "name_placeholder_create": "Dai un titolo alla raccolta",
+      "name_placeholder_edit": "Nome della raccolta"
+    },
+    "create_modal": {
+      "title": "Crea una raccolta",
+      "submit": "Crea raccolta"
+    },
+    "edit_modal": {
+      "title": "Modifica raccolta"
+    },
+    "delete_modal": {
+      "title": "Elimina raccolta",
+      "page_count": "Questa raccolta contiene {pageCount} pagine. Scegli cosa deve accadere.",
+      "transfer_title": "Trasferisci le pagine ed elimina la raccolta",
+      "transfer_description": "Sposta tutte le pagine in un'altra raccolta prima di eliminarla. Le pagine e i relativi permessi verranno conservati.",
+      "transfer_warning": "Le pagine spostate erediteranno i permessi della raccolta selezionata.",
+      "transfer_target_label": "Sposta le pagine in",
+      "transfer_target_placeholder": "Seleziona una raccolta",
+      "delete_with_pages_title": "Elimina la raccolta con le pagine",
+      "delete_with_pages_description": "Elimina definitivamente la raccolta e tutte le sue pagine. Questa azione non può essere annullata.",
+      "submit": "Elimina raccolta"
+    },
+    "header": {
+      "add_page": "Aggiungi pagina"
+    },
+    "menu": {
+      "create_new_page": "Crea nuova pagina",
+      "add_existing_page": "Aggiungi pagina esistente",
+      "edit_collection": "Modifica raccolta",
+      "collection_options": "Opzioni della raccolta"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Cerca pagine",
+      "success_message": "{count} pagine aggiunte alla raccolta.",
+      "error_message": "Non è stato possibile spostare le pagine. Riprova.",
+      "no_pages_found": "Nessuna pagina trovata per la tua ricerca",
+      "no_pages_available": "Nessuna pagina disponibile da spostare",
+      "submit": "Sposta"
+    },
+    "list": {
+      "invite_only": "Solo su invito",
+      "remove_error": "Impossibile rimuovere la pagina dalla raccolta.",
+      "no_matching_pages": "Nessuna pagina corrispondente",
+      "remove_search_criteria": "Rimuovi i criteri di ricerca per vedere tutte le pagine",
+      "remove_filters": "Rimuovi i filtri per vedere tutte le pagine",
+      "no_pages_title": "Nessuna pagina ancora",
+      "no_pages_description": "Questa raccolta non contiene ancora alcuna pagina.",
+      "untitled": "Senza titolo",
+      "restricted_access": "Accesso limitato",
+      "collapse_page": "Comprimi pagina",
+      "expand_page": "Espandi pagina",
+      "page_actions": "Azioni pagina",
+      "page_link_copied": "Link della pagina copiato negli appunti.",
+      "columns": {
+        "page_name": "Nome pagina",
+        "owner": "Proprietario",
+        "nested_pages": "Pagine annidate",
+        "last_activity": "Ultima attività",
+        "actions": "Azioni"
+      }
+    },
+    "toasts": {
+      "created": "Raccolta creata con successo.",
+      "create_error": "Impossibile creare la raccolta. Riprova.",
+      "renamed": "Raccolta rinominata con successo.",
+      "rename_error": "Impossibile aggiornare la raccolta. Riprova.",
+      "transferred_deleted": "Le pagine sono state trasferite e la raccolta eliminata.",
+      "deleted_with_pages": "La raccolta e le sue pagine sono state eliminate.",
+      "delete_error": "Impossibile eliminare la raccolta. Riprova.",
+      "target_required": "Seleziona una raccolta in cui spostare le pagine.",
+      "create_page_error": "Impossibile creare la pagina. Riprova.",
+      "create_page_in_collection_error": "Impossibile creare la pagina o aggiungerla alla raccolta. Riprova.",
+      "collection_link_copied": "Link della raccolta copiato negli appunti."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Aggiorna per sbloccare il Wiki",
+      "description": "Sblocca pagine pubbliche, cronologia delle versioni, pagine condivise, collaborazione in tempo reale e pagine dello spazio di lavoro per wiki, documenti aziendali e basi di conoscenza con Plane Pro.",
+      "upgrade_button": {
+        "text": "Aggiorna"
+      },
+      "learn_more_button": {
+        "text": "Scopri di più"
+      },
+      "download_button": {
+        "text": "Scarica dati",
+        "loading": "Download in corso"
+      },
+      "tabs": {
+        "nested_pages": "Pagine annidate",
+        "add_embeds": "Aggiungi incorporamenti",
+        "publish_pages": "Pubblica pagine",
+        "comments": "Commenti"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Le pagine annidate richiedono un piano a pagamento. Aggiorna per sbloccare."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/work-item-type.json b/packages/i18n/src/locales/it/work-item-type.json
new file mode 100644
index 0000000..ca4e085
--- /dev/null
+++ b/packages/i18n/src/locales/it/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Tipi di elemento di lavoro",
+    "label_lowercase": "tipi di elementi di lavoro",
+    "settings": {
+      "description": "Personalizza e aggiungi le tue proprietà per adattarle alle esigenze del tuo team.",
+      "cant_delete_default_message": "Il tipo di elemento di lavoro non può essere eliminato perché è impostato come tipo predefinito per questo progetto.",
+      "set_as_default": "Imposta come predefinito",
+      "cant_set_default_inactive_message": "Attiva questo tipo prima di impostarlo come predefinito",
+      "set_default_confirmation": {
+        "title": "Imposta come tipo di elemento di lavoro predefinito",
+        "description": "Impostando {name} come predefinito, verrà importato in tutti i progetti di questo spazio di lavoro. Tutti i nuovi elementi di lavoro utilizzeranno questo tipo per impostazione predefinita.",
+        "confirm_button": "Imposta come predefinito"
+      },
+      "properties": {
+        "title": "Proprietà personalizzate",
+        "description": "Crea e personalizza le proprietà.",
+        "tooltip": "Ogni tipo di elemento di lavoro viene fornito con un set predefinito di proprietà come Titolo, Descrizione, Assegnatario, Stato, Priorità, Data di inizio, Data di scadenza, Modulo, Ciclo etc. Puoi anche personalizzare e aggiungere le tue proprietà per adattarle alle esigenze del tuo team.",
+        "add_button": "Aggiungi nuova proprietà",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Importa dallo spazio di lavoro"
+          }
+        },
+        "dropdown": {
+          "label": "Tipo di proprietà",
+          "placeholder": "Seleziona tipo"
+        },
+        "property_type": {
+          "text": {
+            "label": "Testo"
+          },
+          "number": {
+            "label": "Numero"
+          },
+          "dropdown": {
+            "label": "Dropdown"
+          },
+          "boolean": {
+            "label": "Booleano"
+          },
+          "date": {
+            "label": "Data"
+          },
+          "member_picker": {
+            "label": "Seleziona membro"
+          },
+          "formula": {
+            "label": "Formula"
+          }
+        },
+        "attributes": {
+          "label": "Attributi",
+          "text": {
+            "single_line": {
+              "label": "Singola riga"
+            },
+            "multi_line": {
+              "label": "Paragrafo"
+            },
+            "readonly": {
+              "label": "Solo lettura",
+              "header": "Dati solo lettura"
+            },
+            "invalid_text_format": {
+              "label": "Formato testo non valido"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Aggiungi numero"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Selezione singola"
+            },
+            "multi_select": {
+              "label": "Selezione multipla"
+            },
+            "no_default_value": {
+              "label": "Nessun valore predefinito"
+            }
+          },
+          "boolean": {
+            "label": "Vero | Falso",
+            "no_default": "Nessun valore predefinito"
+          },
+          "option": {
+            "create_update": {
+              "label": "Opzioni",
+              "form": {
+                "placeholder": "Aggiungi opzione",
+                "errors": {
+                  "name": {
+                    "required": "Il nome dell'opzione è obbligatorio.",
+                    "integrity": "Esiste già un'opzione con lo stesso nome."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Seleziona opzione",
+                "multi": {
+                  "default": "Seleziona opzioni",
+                  "variable": "{count} opzioni selezionate"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Successo!",
+              "message": "Proprietà {name} creata con successo."
+            },
+            "error": {
+              "title": "Errore!",
+              "message": "Impossibile creare la proprietà. Si prega di riprovare!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Successo!",
+              "message": "Proprietà {name} aggiornata con successo."
+            },
+            "error": {
+              "title": "Errore!",
+              "message": "Impossibile aggiornare la proprietà. Si prega di riprovare!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Successo!",
+              "message": "Proprietà {name} eliminata con successo."
+            },
+            "error": {
+              "title": "Errore!",
+              "message": "Impossibile eliminare la proprietà. Si prega di riprovare!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} {name} proprietà",
+            "success": {
+              "title": "Successo!",
+              "message": "Proprietà {name} {action} con successo."
+            },
+            "error": {
+              "title": "Errore!",
+              "message": "Impossibile {action} la proprietà. Si prega di riprovare!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Crea nuova proprietà personalizzata",
+            "update": "Aggiorna proprietà personalizzata"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Titolo"
+            },
+            "description": {
+              "placeholder": "Descrizione"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Devi nominare la tua proprietà.",
+              "max_length": "Il nome della proprietà non deve superare i 255 caratteri."
+            },
+            "property_type": {
+              "required": "Devi selezionare un tipo di proprietà."
+            },
+            "options": {
+              "required": "Devi aggiungere almeno una opzione."
+            },
+            "formula": {
+              "required": "L'espressione della formula è obbligatoria.",
+              "invalid": "Formula non valida: {error}",
+              "circular_reference": "Riferimento circolare rilevato. Una formula non può fare riferimento a se stessa direttamente o indirettamente.",
+              "invalid_reference": "La formula fa riferimento a una proprietà inesistente."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Campo formula",
+          "tooltip": "Inserisci una formula usando la sintassi '{'Nome campo'}'. Supporta gli operatori +, -, *, / e &.",
+          "placeholder": "Scrivi la formula",
+          "test_button": "Test",
+          "validating": "Validazione in corso",
+          "validation_success": "La formula è valida! Restituisce {resultType}",
+          "validation_success_with_refs": "La formula è valida! Restituisce {resultType} ({count} campo/i referenziato/i)",
+          "error": {
+            "empty": "Inserisci una formula",
+            "missing_context": "Contesto dello spazio di lavoro, del progetto o del tipo di elemento di lavoro mancante",
+            "validation_failed": "Validazione fallita"
+          },
+          "picker": {
+            "no_match": "Nessuna proprietà corrispondente",
+            "no_available": "Nessuna proprietà disponibile"
+          }
+        },
+        "enable_disable": {
+          "label": "Attivo",
+          "tooltip": {
+            "disabled": "Clicca per disattivare",
+            "enabled": "Clicca per attivare"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Elimina questa proprietà",
+          "description": "La cancellazione delle proprietà può portare alla perdita di dati esistenti.",
+          "secondary_description": "Vuoi disattivare la proprietà invece?",
+          "primary_button": "{action}, elimina",
+          "secondary_button": "Sì, disattiva"
+        },
+        "mandate_confirmation": {
+          "label": "Proprietà obbligatoria",
+          "content": "Sembra esserci un valore predefinito per questa proprietà. Rendere la proprietà obbligatoria rimuoverà il valore predefinito e gli utenti dovranno aggiungere un valore di loro scelta.",
+          "tooltip": {
+            "disabled": "Questo tipo di proprietà non può essere reso obbligatorio",
+            "enabled": "Deseleziona per marcare il campo come facoltativo",
+            "checked": "Seleziona per marcare il campo come obbligatorio"
+          }
+        },
+        "empty_state": {
+          "title": "Aggiungi proprietà personalizzate",
+          "description": "Nuove proprietà che aggiungi per questo tipo di elemento di lavoro appariranno qui."
+        }
+      },
+      "types": {
+        "title": "Tipi",
+        "description": "Crea e personalizza tipi di elementi di lavoro con proprietà.",
+        "sort_options": {
+          "project_count": "Numero di progetti di cui fa parte"
+        },
+        "filter_options": {
+          "show_active": "Mostra attivi",
+          "show_inactive": "Mostra inattivi"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Crea nuovo",
+            "import_from_workspace": "Importa dallo spazio di lavoro"
+          },
+          "banner": {
+            "with_access": "Abilita i tipi di elementi di lavoro per importare i tipi dal livello dello spazio di lavoro",
+            "without_access": "I tipi di elementi di lavoro sono disabilitati. Contatta l'admin dello spazio di lavoro per abilitarli nelle impostazioni dello spazio di lavoro."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Proprietà personalizzate",
+        "add_button": "Aggiungi proprietà",
+        "modal": {
+          "title": "Aggiungi proprietà",
+          "empty": {
+            "title": "Nessuna proprietà disponibile",
+            "description": "Tutte le proprietà sono già state collegate a questo tipo."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Scollega proprietà",
+          "description": "Scollegando questa proprietà verranno eliminati permanentemente tutti i suoi valori su ogni elemento di lavoro che utilizza questo tipo. Questa azione non può essere annullata.",
+          "input_label": "Digita",
+          "input_label_suffix": "per continuare:",
+          "confirm": "Scollega proprietà",
+          "loading": "Scollegamento"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Elimina questo tipo",
+        "description": "L'eliminazione dei tipi può comportare la perdita di dati esistenti.",
+        "can_disable_warning": "Vuoi disabilitare il tipo invece?",
+        "primary_button": "Sì, eliminalo",
+        "toast": {
+          "success": {
+            "title": "Successo!",
+            "message": "Tipo di elemento di lavoro eliminato con successo."
+          },
+          "error": {
+            "title": "Errore!",
+            "message": "Impossibile eliminare il tipo di elemento di lavoro. Per favore riprova!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Impossibile eliminare il tipo di elemento di lavoro predefinito",
+          "cannot_delete_work_item_type_with_associated_work_items": "Impossibile eliminare il tipo di elemento di lavoro con elementi di lavoro associati"
+        }
+      }
+    },
+    "create": {
+      "title": "Crea tipo di elemento di lavoro",
+      "button": "Aggiungi tipo di elemento di lavoro",
+      "toast": {
+        "success": {
+          "title": "Successo!",
+          "message": "Tipo di elemento di lavoro creato con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": {
+            "default": "Impossibile creare il tipo di elemento di lavoro. Riprova!",
+            "conflict": "Il tipo {name} esiste già. Scegli un nome diverso."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Aggiorna tipo di elemento di lavoro",
+      "button": "Aggiorna tipo di elemento di lavoro",
+      "toast": {
+        "success": {
+          "title": "Successo!",
+          "message": "Tipo di elemento di lavoro {name} aggiornato con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": {
+            "default": "Impossibile aggiornare il tipo di elemento di lavoro. Riprova!",
+            "conflict": "Il tipo {name} esiste già. Scegli un nome diverso."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Dà un nome unico a questo tipo di elemento di lavoro"
+        },
+        "description": {
+          "placeholder": "Descrivi cosa è destinato questo tipo di elemento di lavoro e quando deve essere utilizzato."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} {name} tipo di elemento di lavoro",
+        "success": {
+          "title": "Successo!",
+          "message": "Tipo di elemento di lavoro {name} {action} con successo."
+        },
+        "error": {
+          "title": "Errore!",
+          "message": "Impossibile {action} il tipo di elemento di lavoro. Si prega di riprovare!"
+        }
+      },
+      "tooltip": "Clicca per {action}"
+    },
+    "change_confirmation": {
+      "title": "Cambiare il tipo di elemento di lavoro?",
+      "description": "La modifica del tipo di elemento di lavoro può comportare la perdita di valori di proprietà personalizzate specifiche del tipo corrente. Questa azione non può essere annullata.",
+      "button": {
+        "loading": "Modifica in corso",
+        "default": "Cambia tipo"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Abilita Tipi di Elementi di Lavoro",
+        "description": "Forma gli elementi di lavoro per il tuo lavoro con i Tipi di Elementi di Lavoro. Personalizza con icone, sfondi e proprietà e configurali per questo progetto.",
+        "primary_button": {
+          "text": "Abilita"
+        },
+        "confirmation": {
+          "title": "Una volta abilitato, i Tipi di Elementi di Lavoro non possono essere disattivati.",
+          "description": "Plane's Elemento di Lavoro diventerà il tipo di elemento di lavoro predefinito per questo progetto e apparirà con la sua icona e sfondo in questo progetto.",
+          "button": {
+            "default": "Abilita",
+            "loading": "Configurazione"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Ottieni Pro per abilitare i Tipi di Elementi di Lavoro.",
+        "description": "Forma gli elementi di lavoro per il tuo lavoro con i Tipi di Elementi di Lavoro. Personalizza con icone, sfondi e proprietà e configurali per questo progetto.",
+        "primary_button": {
+          "text": "Ottieni Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Aggiorna per abilitare i Tipi di Elementi di Lavoro.",
+        "description": "Forma gli elementi di lavoro per il tuo lavoro con i Tipi di Elementi di Lavoro. Personalizza con icone, sfondi e proprietà e configurali per questo progetto.",
+        "primary_button": {
+          "text": "Aggiorna"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Gerarchia",
+      "tab_label": "Gerarchia",
+      "description": "Configura i livelli di gerarchia per organizzare il tuo lavoro. Ogni livello definisce una relazione genitore con l'elemento direttamente sopra e una relazione figlio con l'elemento direttamente sotto. ",
+      "sidebar_label": "Gerarchia",
+      "enable_control": {
+        "title": "Abilita gerarchia",
+        "description": "Crea relazioni genitore-figlio tra diversi tipi di elementi di lavoro.",
+        "tooltip": "Non è possibile disabilitare la gerarchia una volta abilitata."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Definisci prima i tipi di elementi di lavoro per creare una nuova gerarchia.",
+        "cta": "Impostazioni tipi elementi di lavoro"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Trascina e rilascia un tipo per aggiungere un nuovo livello di gerarchia",
+      "empty_level_placeholder": "Trascina e rilascia un tipo di elemento di lavoro al livello {level}",
+      "drag_tooltip": "Trascina per cambiare livello",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Imposta come predefinito",
+          "toast": {
+            "loading": "Impostazione come predefinito...",
+            "success": {
+              "title": "Successo!",
+              "message": "Livello di gerarchia {level} impostato come predefinito con successo."
+            },
+            "error": {
+              "title": "Errore!",
+              "message": "Impossibile impostare il livello di gerarchia {level} come predefinito. Riprovare."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Spostamento di {workItemTypeName} al livello {level}...",
+        "success": {
+          "title": "Successo!",
+          "message": "{workItemTypeName} è stato spostato al livello {level} correttamente."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Salvare interromperà i collegamenti esistenti",
+      "content": {
+        "intro": "Il tipo di elemento di lavoro {workItemTypeName} include:",
+        "parent_items": "{count, plural, one {Verrà rimosso # collegamento padre} other {Verranno rimossi # collegamenti padre}}.",
+        "child_items": "{count, plural, one {sotto-elemento di lavoro} other {sotto-elementi di lavoro}}",
+        "parent_line_suffix_when_also_children": ", e ",
+        "footer": "Questa modifica rimuoverà le relazioni padre-figlio dagli elementi di lavoro esistenti del tipo {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Digita «conferma» per continuare.",
+        "placeholder": "conferma"
+      },
+      "error_toast": {
+        "title": "Errore!",
+        "message": "Impossibile scollegare e salvare. Riprovare."
+      },
+      "confirm_button": {
+        "loading": "Salvataggio",
+        "default": "Salva comunque"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Errore!",
+        "message": "Il tipo di elemento di lavoro selezionato non può essere utilizzato per creare un nuovo elemento di lavoro poiché viola le regole della gerarchia."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Errore!",
+        "message": "Il tipo di elemento di lavoro non può essere aggiornato poiché viola le regole della gerarchia."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Livello di gerarchia",
+      "invalid_level_toast": {
+        "title": "Errore!",
+        "message": "Il tipo di elemento di lavoro non può essere aggiornato poiché viola le regole della gerarchia."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/work-item.json b/packages/i18n/src/locales/it/work-item.json
new file mode 100644
index 0000000..aeb3ea5
--- /dev/null
+++ b/packages/i18n/src/locales/it/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Elemento di lavoro} other {Elementi di lavoro}}",
+    "all": "Tutti gli elementi di lavoro",
+    "edit": "Modifica elemento di lavoro",
+    "title": {
+      "label": "Titolo dell'elemento di lavoro",
+      "required": "Il titolo dell'elemento di lavoro è obbligatorio."
+    },
+    "add": {
+      "press_enter": "Premi 'Invio' per aggiungere un altro elemento di lavoro",
+      "label": "Aggiungi elemento di lavoro",
+      "cycle": {
+        "failed": "Impossibile aggiungere l'elemento di lavoro al ciclo. Per favore, riprova.",
+        "success": "{count, plural, one {Elemento di lavoro} other {Elementi di lavoro}} aggiunto al ciclo con successo.",
+        "loading": "Aggiungendo {count, plural, one {elemento di lavoro} other {elementi di lavoro}} al ciclo"
+      },
+      "assignee": "Aggiungi assegnatari",
+      "start_date": "Aggiungi data di inizio",
+      "due_date": "Aggiungi scadenza",
+      "parent": "Aggiungi elemento di lavoro principale",
+      "sub_issue": "Aggiungi sotto-elemento di lavoro",
+      "dependency": "Aggiungi dipendenza",
+      "relation": "Aggiungi relazione",
+      "link": "Aggiungi link",
+      "existing": "Aggiungi elemento di lavoro esistente"
+    },
+    "remove": {
+      "label": "Rimuovi elemento di lavoro",
+      "cycle": {
+        "loading": "Rimuovendo l'elemento di lavoro dal ciclo",
+        "success": "Elemento di lavoro rimosso dal ciclo con successo.",
+        "failed": "Impossibile rimuovere l'elemento di lavoro dal ciclo. Per favore, riprova."
+      },
+      "module": {
+        "loading": "Rimuovendo l'elemento di lavoro dal modulo",
+        "success": "Elemento di lavoro rimosso dal modulo con successo.",
+        "failed": "Impossibile rimuovere l'elemento di lavoro dal modulo. Per favore, riprova."
+      },
+      "parent": {
+        "label": "Rimuovi elemento di lavoro principale"
+      }
+    },
+    "new": "Nuovo elemento di lavoro",
+    "adding": "Aggiunta dell'elemento di lavoro in corso",
+    "create": {
+      "success": "Elemento di lavoro creato con successo"
+    },
+    "priority": {
+      "urgent": "Urgente",
+      "high": "Alta",
+      "medium": "Media",
+      "low": "Bassa"
+    },
+    "display": {
+      "properties": {
+        "label": "Visualizza proprietà",
+        "id": "ID",
+        "issue_type": "Tipo di elemento di lavoro",
+        "sub_issue_count": "Numero di sotto-elementi di lavoro",
+        "attachment_count": "Numero di allegati",
+        "created_on": "Creato il",
+        "sub_issue": "Sotto-elemento di lavoro",
+        "work_item_count": "Conteggio degli elementi di lavoro"
+      },
+      "extra": {
+        "show_sub_issues": "Mostra sotto-elementi di lavoro",
+        "show_empty_groups": "Mostra gruppi vuoti"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Questo layout è ordinato per",
+      "list": "Lista",
+      "kanban": "Schede",
+      "calendar": "Calendario",
+      "spreadsheet": "Tabella",
+      "gantt": "Timeline",
+      "title": {
+        "list": "Layout a lista",
+        "kanban": "Layout a schede",
+        "calendar": "Layout a calendario",
+        "spreadsheet": "Layout a tabella",
+        "gantt": "Layout a timeline"
+      }
+    },
+    "states": {
+      "active": "Attivo",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Aggiungi commento",
+      "switch": {
+        "private": "Passa a commento privato",
+        "public": "Passa a commento pubblico"
+      },
+      "create": {
+        "success": "Commento creato con successo",
+        "error": "Creazione del commento fallita. Per favore, riprova più tardi."
+      },
+      "update": {
+        "success": "Commento aggiornato con successo",
+        "error": "Aggiornamento del commento fallito. Per favore, riprova più tardi."
+      },
+      "remove": {
+        "success": "Commento rimosso con successo",
+        "error": "Rimozione del commento fallita. Per favore, riprova più tardi."
+      },
+      "upload": {
+        "error": "Caricamento dell'asset fallito. Per favore, riprova più tardi."
+      },
+      "copy_link": {
+        "success": "Link del commento copiato negli appunti",
+        "error": "Errore durante la copia del link del commento. Riprova più tardi."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Aggiungi risposta",
+          "placeholder": "Aggiungi risposta"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Impossibile recuperare le risposte"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Risposta creata con successo"
+            },
+            "error": {
+              "message": "Impossibile creare la risposta"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Risposta aggiornata con successo"
+            },
+            "error": {
+              "message": "Impossibile aggiornare la risposta"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Risposta eliminata con successo"
+            },
+            "error": {
+              "message": "Impossibile eliminare la risposta"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "L'elemento di lavoro non esiste",
+        "description": "L'elemento di lavoro che stai cercando non esiste, è stato archiviato o eliminato.",
+        "primary_button": {
+          "text": "Visualizza altri elementi di lavoro"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Elementi di lavoro correlati"
+    },
+    "archive": {
+      "description": "Solo gli elementi di lavoro completati o annullati possono essere archiviati",
+      "label": "Archivia elemento di lavoro",
+      "confirm_message": "Sei sicuro di voler archiviare l'elemento di lavoro? Tutti gli elementi di lavoro archiviati possono essere ripristinati in seguito.",
+      "success": {
+        "label": "Archiviazione riuscita",
+        "message": "I tuoi archivi sono disponibili negli archivi del progetto."
+      },
+      "failed": {
+        "message": "Impossibile archiviare l'elemento di lavoro. Per favore, riprova."
+      },
+      "banner_message": "Questo elemento di lavoro è stato archiviato. Vai alla sezione Archivi per ripristinarlo.",
+      "go_to_archives": "Vai agli archivi"
+    },
+    "restore": {
+      "success": {
+        "title": "Ripristino riuscito",
+        "message": "Il tuo elemento di lavoro è disponibile negli elementi del progetto."
+      },
+      "failed": {
+        "message": "Impossibile ripristinare l'elemento di lavoro. Per favore, riprova."
+      }
+    },
+    "relation": {
+      "relates_to": "Collegato a",
+      "duplicate": "Duplicato di",
+      "blocked_by": "Bloccato da",
+      "blocking": "Blocca",
+      "start_before": "Inizia prima",
+      "start_after": "Inizia dopo",
+      "finish_before": "Finisce prima",
+      "finish_after": "Finisce dopo",
+      "implements": "Implementa",
+      "implemented_by": "Implementato da"
+    },
+    "copy_link": "Copia link dell'elemento di lavoro",
+    "delete": {
+      "label": "Elimina elemento di lavoro",
+      "error": "Errore nell'eliminazione dell'elemento di lavoro"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Iscrizione all'elemento di lavoro avvenuta con successo",
+        "unsubscribed": "Disiscrizione dall'elemento di lavoro avvenuta con successo"
+      }
+    },
+    "select": {
+      "error": "Seleziona almeno un elemento di lavoro",
+      "empty": "Nessun elemento di lavoro selezionato",
+      "add_selected": "Aggiungi gli elementi di lavoro selezionati",
+      "select_all": "Seleziona tutto",
+      "deselect_all": "Deseleziona tutto"
+    },
+    "open_in_full_screen": "Apri l'elemento di lavoro a schermo intero",
+    "duplicate": {
+      "modal": {
+        "title": "Crea una copia in un altro progetto",
+        "description1": "Questo crea una copia dell'elemento di lavoro.",
+        "description2": "Tutti i dati delle proprietà verranno rimossi durante la duplicazione.",
+        "placeholder": "Seleziona un progetto"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Elemento di lavoro duplicato con successo"
+        },
+        "error": {
+          "message": "Impossibile duplicare l'elemento di lavoro"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Collega pagine",
+      "show_wiki_pages": "Mostra pagine Wiki",
+      "link_pages_to": "Collega pagine a",
+      "linked_pages": "Pagine collegate",
+      "no_description": "Questa è una pagina vuota. Perché non scrivi qualcosa all'interno e vedilo apparire qui come questo segnaposto",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Pagine aggiornate",
+            "message": "Pagine aggiornate con successo"
+          },
+          "error": {
+            "title": "Aggiornamento pagine fallito",
+            "message": "Aggiornamento pagine fallito"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Pagina rimossa",
+            "message": "Pagina rimossa con successo"
+          },
+          "error": {
+            "title": "Rimozione pagina fallita",
+            "message": "Rimozione pagina fallita"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Clicca per votare a favore",
+      "click_to_downvote": "Clicca per votare contro",
+      "click_to_view_upvotes": "Clicca per vedere i voti a favore",
+      "click_to_view_downvotes": "Clicca per vedere i voti contro"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Sotto-elemento di lavoro aggiornato con successo",
+      "error": "Errore nell'aggiornamento del sotto-elemento di lavoro"
+    },
+    "remove": {
+      "success": "Sotto-elemento di lavoro rimosso con successo",
+      "error": "Errore nella rimozione del sotto-elemento di lavoro"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Non hai sotto-elementi di lavoro che corrispondono ai filtri che hai applicato.",
+        "description": "Per vedere tutti i sotto-elementi di lavoro, cancella tutti i filtri applicati.",
+        "action": "Cancella filtri"
+      },
+      "list_filters": {
+        "title": "Non hai elementi di lavoro che corrispondono ai filtri che hai applicato.",
+        "description": "Per vedere tutti gli elementi di lavoro, cancella tutti i filtri applicati.",
+        "action": "Cancella filtri"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Nessun elemento di lavoro corrispondente trovato"
+      },
+      "no_issues": {
+        "title": "Nessun elemento di lavoro trovato"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Nessun commento ancora",
+        "description": "I commenti possono essere usati come spazio per discussioni e follow-up sugli elementi di lavoro"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Impossibile archiviare gli elementi di lavoro",
+        "message": "Solo gli elementi di lavoro appartenenti a gruppi di stato completati o annullati possono essere archiviati."
+      },
+      "invalid_issue_start_date": {
+        "title": "Impossibile aggiornare gli elementi di lavoro",
+        "message": "La data di inizio selezionata supera la data di scadenza per alcuni elementi di lavoro. Assicurati che la data di inizio sia precedente alla data di scadenza."
+      },
+      "invalid_issue_target_date": {
+        "title": "Impossibile aggiornare gli elementi di lavoro",
+        "message": "La data di scadenza selezionata precede la data di inizio per alcuni elementi di lavoro. Assicurati che la data di scadenza sia successiva alla data di inizio."
+      },
+      "invalid_state_transition": {
+        "title": "Impossibile aggiornare gli elementi di lavoro",
+        "message": "Il cambiamento di stato non è consentito per alcuni elementi di lavoro. Assicurati che il cambiamento di stato sia consentito."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Cambia stato, priorità e altro per più elementi di lavoro contemporaneamente. Risparmia in media tre minuti per operazione.",
+      "cta": "Aggiorna a One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Elementi di lavoro ricorrenti",
+      "description": "Imposta il tuo lavoro ricorrente una volta e noi ci occupiamo delle ripetizioni. Vedrai tutto qui quando sarà il momento.",
+      "new_recurring_work_item": "Nuovo elemento di lavoro ricorrente",
+      "update_recurring_work_item": "Aggiorna elemento di lavoro ricorrente",
+      "form": {
+        "interval": {
+          "title": "Pianificazione",
+          "start_date": {
+            "validation": {
+              "required": "La data di inizio è obbligatoria"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Il tipo di intervallo è obbligatorio"
+            }
+          }
+        },
+        "button": {
+          "create": "Crea elemento di lavoro ricorrente",
+          "update": "Aggiorna elemento di lavoro ricorrente"
+        }
+      },
+      "create_button": {
+        "label": "Crea elemento di lavoro ricorrente",
+        "no_permission": "Contatta l'amministratore del progetto per creare elementi di lavoro ricorrenti"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Il tuo lavoro, in automatico",
+        "description": "Impostalo una volta sola. Lo riproporremo quando sarà il momento. Passa a Business per rendere il lavoro ricorrente senza sforzo."
+      },
+      "no_templates": {
+        "button": "Crea il tuo primo elemento di lavoro ricorrente"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Elemento di lavoro ricorrente creato",
+          "message": "{name}, l'elemento di lavoro ricorrente, è ora disponibile nel tuo workspace."
+        },
+        "error": {
+          "title": "Non siamo riusciti a creare questo elemento di lavoro ricorrente.",
+          "message": "Prova a salvare di nuovo i tuoi dati o copiali in un nuovo elemento di lavoro ricorrente, preferibilmente in un'altra scheda."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Elemento di lavoro ricorrente aggiornato",
+          "message": "{name}, l'elemento di lavoro ricorrente, è stato aggiornato."
+        },
+        "error": {
+          "title": "Non siamo riusciti a salvare le modifiche a questo elemento di lavoro ricorrente.",
+          "message": "Prova a salvare di nuovo i tuoi dati o torna più tardi su questo elemento di lavoro ricorrente. Se il problema persiste, contattaci."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Elemento di lavoro ricorrente eliminato",
+          "message": "{name}, l'elemento di lavoro ricorrente, è stato eliminato dal tuo workspace."
+        },
+        "error": {
+          "title": "Non siamo riusciti a eliminare questo elemento di lavoro ricorrente.",
+          "message": "Prova a eliminarlo di nuovo o torna più tardi. Se non riesci ancora a eliminarlo, contattaci."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Elimina elemento di lavoro ricorrente",
+      "description": {
+        "prefix": "Sei sicuro di voler eliminare l'elemento di lavoro ricorrente-",
+        "suffix": "? Tutti i dati relativi all'elemento di lavoro ricorrente saranno rimossi definitivamente. Questa azione non può essere annullata."
+      }
+    }
+  },
+  "epic": {
+    "new": "Nuovo Epic",
+    "label": "{count, plural, one {Epic} other {Epic}}",
+    "adding": "Aggiungendo Epic",
+    "create": {
+      "success": "Epic creato con successo"
+    },
+    "add": {
+      "label": "Aggiungi Epic",
+      "press_enter": "Premi 'Invio' per aggiungere un altro Epic"
+    },
+    "title": {
+      "label": "Titolo Epic",
+      "required": "Il titolo dell'Epic è obbligatorio."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/workflow.json b/packages/i18n/src/locales/it/workflow.json
new file mode 100644
index 0000000..82fad9a
--- /dev/null
+++ b/packages/i18n/src/locales/it/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Consenti nuovi elementi di lavoro",
+      "work_item_creation_disable_tooltip": "La creazione di elementi di lavoro è disabilitata per questo stato",
+      "default_state": "Stato predefinito consente a tutti i membri di creare nuovi elementi di lavoro. Questo non può essere cambiato",
+      "state_change_count": "{count, plural, one {1 cambiamento stato consentito} other {{count} cambiamenti stato consentiti}}",
+      "movers_count": "{count, plural, one {1 revisore elencato} other {{count} revisori elencati}}",
+      "state_changes": {
+        "label": {
+          "default": "Aggiungi cambiamento stato consentito",
+          "loading": "Aggiungi cambiamento stato consentito"
+        },
+        "move_to": "Cambia stato su",
+        "movers": {
+          "label": "Quando rivisto da",
+          "tooltip": "Revisori sono persone che sono consentite per spostare elementi di lavoro da uno stato all'altro.",
+          "add": "Aggiungi revisori"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Non puoi spostare questo elemento di lavoro qui."
+    },
+    "workflow_enabled": {
+      "label": "Cambia stato"
+    },
+    "workflow_tree": {
+      "label": "Per elementi di lavoro in",
+      "state_change_label": "può spostarlo su"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Controlla il caos dei cambiamenti e delle revisioni con i Flussi di Lavoro.",
+        "description": "Imposta regole su dove il tuo lavoro si sposta, da chi e quando con i Flussi di Lavoro in Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Visualizza cronologia cambiamenti",
+      "reset_workflow": "Resetta flusso di lavoro"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Sei sicuro di voler resettare questo flusso di lavoro?",
+        "description": "Se resetti questo flusso di lavoro, tutte le tue regole di cambiamento stato verranno eliminate e dovrai crearle di nuovo per eseguirle in questo progetto."
+      },
+      "delete_state_change": {
+        "title": "Sei sicuro di voler eliminare questa regola di cambiamento stato?",
+        "description": "Una volta eliminata, non puoi annullare questo cambiamento e dovrai impostare nuovamente la regola se la vuoi eseguire per questo progetto."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} flusso di lavoro",
+        "success": {
+          "title": "Successo",
+          "message": "Flusso di lavoro {action} con successo"
+        },
+        "error": {
+          "title": "Errore",
+          "message": "Flusso di lavoro non può essere {action}. Per favore riprova."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Successo",
+          "message": "Flusso di lavoro resettato con successo"
+        },
+        "error": {
+          "title": "Errore resettando flusso di lavoro",
+          "message": "Flusso di lavoro non può essere resettato. Per favore riprova."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Errore aggiungendo regola cambiamento stato",
+          "message": "Regola cambiamento stato non può essere aggiunta. Per favore riprova."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Errore modificando regola cambiamento stato",
+          "message": "Regola cambiamento stato non può essere modificata. Per favore riprova."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Errore rimuovendo regola cambiamento stato",
+          "message": "Regola cambiamento stato non può essere rimossa. Per favore riprova."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Errore modificando revisori cambiamento stato",
+          "message": "Revisori cambiamento stato non può essere modificato. Per favore riprova."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/workspace-settings.json b/packages/i18n/src/locales/it/workspace-settings.json
new file mode 100644
index 0000000..9f87130
--- /dev/null
+++ b/packages/i18n/src/locales/it/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Impostazioni dello spazio di lavoro",
+    "page_label": "{workspace} - Impostazioni generali",
+    "key_created": "Chiave creata",
+    "copy_key": "Copia e salva questa chiave segreta in Plane Pages. Non potrai vederla dopo aver cliccato Chiudi. È stato scaricato un file CSV contenente la chiave.",
+    "token_copied": "Token copiato negli appunti.",
+    "settings": {
+      "general": {
+        "title": "Generale",
+        "upload_logo": "Carica logo",
+        "edit_logo": "Modifica logo",
+        "name": "Nome dello spazio di lavoro",
+        "company_size": "Dimensione aziendale",
+        "url": "URL dello spazio di lavoro",
+        "workspace_timezone": "Fuso orario dello spazio di lavoro",
+        "update_workspace": "Aggiorna spazio di lavoro",
+        "delete_workspace": "Elimina questo spazio di lavoro",
+        "delete_workspace_description": "Eliminando uno spazio di lavoro, tutti i dati e le risorse all'interno di esso verranno rimossi definitivamente e non potranno essere recuperati.",
+        "delete_btn": "Elimina questo spazio di lavoro",
+        "delete_modal": {
+          "title": "Sei sicuro di voler eliminare questo spazio di lavoro?",
+          "description": "Hai un periodo di prova attivo per uno dei nostri piani a pagamento. Per procedere, annulla prima il periodo di prova.",
+          "dismiss": "Annulla",
+          "cancel": "Annulla periodo di prova",
+          "success_title": "Spazio di lavoro eliminato.",
+          "success_message": "Presto verrai reindirizzato alla tua pagina del profilo.",
+          "error_title": "Qualcosa non ha funzionato.",
+          "error_message": "Riprova, per favore."
+        },
+        "errors": {
+          "name": {
+            "required": "Il nome è obbligatorio",
+            "max_length": "Il nome dello spazio di lavoro non deve superare gli 80 caratteri"
+          },
+          "company_size": {
+            "required": "La dimensione aziendale è obbligatoria",
+            "select_a_range": "Seleziona la dimensione dell'organizzazione"
+          }
+        }
+      },
+      "members": {
+        "title": "Membri",
+        "add_member": "Aggiungi membro",
+        "pending_invites": "Inviti in sospeso",
+        "invitations_sent_successfully": "Inviti inviati con successo",
+        "leave_confirmation": "Sei sicuro di voler lasciare lo spazio di lavoro? Non avrai più accesso a questo spazio. Questa azione non può essere annullata.",
+        "details": {
+          "full_name": "Nome completo",
+          "display_name": "Nome visualizzato",
+          "email_address": "Indirizzo email",
+          "account_type": "Tipo di account",
+          "authentication": "Autenticazione",
+          "joining_date": "Data di ingresso"
+        },
+        "modal": {
+          "title": "Invita persone a collaborare",
+          "description": "Invita persone a collaborare nel tuo spazio di lavoro.",
+          "button": "Invia inviti",
+          "button_loading": "Invio inviti in corso",
+          "placeholder": "nome@azienda.com",
+          "errors": {
+            "required": "Abbiamo bisogno di un indirizzo email per invitarli.",
+            "invalid": "L'email non è valida"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Fatturazione e piani",
+        "description": "Scegli il tuo piano, gestisci gli abbonamenti e aggiorna facilmente man mano che le tue esigenze crescono.",
+        "title": "Fatturazione e Piani",
+        "current_plan": "Piano attuale",
+        "free_plan": "Stai attualmente utilizzando il piano gratuito",
+        "view_plans": "Visualizza piani"
+      },
+      "exports": {
+        "heading": "Esportazioni",
+        "description": "Esporta i dati del tuo progetto in vari formati e accedi alla cronologia delle esportazioni con i link per il download.",
+        "title": "Esportazioni",
+        "exporting": "Esportazione in corso",
+        "previous_exports": "Esportazioni precedenti",
+        "export_separate_files": "Esporta i dati in file separati",
+        "exporting_projects": "Esportazione del progetto",
+        "format": "Formato",
+        "filters_info": "Applica filtri per esportare elementi di lavoro specifici in base ai tuoi criteri.",
+        "modal": {
+          "title": "Esporta in",
+          "toasts": {
+            "success": {
+              "title": "Esportazione riuscita",
+              "message": "Potrai scaricare gli {entity} esportati dall'esportazione precedente."
+            },
+            "error": {
+              "title": "Esportazione fallita",
+              "message": "L'esportazione non è riuscita. Per favore, riprova."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhook",
+        "description": "Automatizza le notifiche verso servizi esterni quando si verificano eventi del progetto.",
+        "title": "Webhooks",
+        "add_webhook": "Aggiungi webhook",
+        "modal": {
+          "title": "Crea webhook",
+          "details": "Dettagli del webhook",
+          "payload": "URL del payload",
+          "question": "Quali eventi vuoi attivino questo webhook?",
+          "error": "L'URL è obbligatorio"
+        },
+        "secret_key": {
+          "title": "Chiave segreta",
+          "message": "Genera un token per accedere al payload del webhook"
+        },
+        "options": {
+          "all": "Inviami tutto",
+          "individual": "Seleziona eventi individuali"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook creato",
+            "message": "Il webhook è stato creato con successo"
+          },
+          "not_created": {
+            "title": "Webhook non creato",
+            "message": "Il webhook non può essere creato"
+          },
+          "updated": {
+            "title": "Webhook aggiornato",
+            "message": "Il webhook è stato aggiornato con successo"
+          },
+          "not_updated": {
+            "title": "Webhook non aggiornato",
+            "message": "Il webhook non può essere aggiornato"
+          },
+          "removed": {
+            "title": "Webhook rimosso",
+            "message": "Il webhook è stato rimosso con successo"
+          },
+          "not_removed": {
+            "title": "Webhook non rimosso",
+            "message": "Il webhook non può essere rimosso"
+          },
+          "secret_key_copied": {
+            "message": "Chiave segreta copiata negli appunti."
+          },
+          "secret_key_not_copied": {
+            "message": "Errore durante la copia della chiave segreta."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Token API",
+        "description": "Genera token API sicuri per integrare i tuoi dati con sistemi e applicazioni esterne.",
+        "title": "Token API",
+        "add_token": "Aggiungi token di accesso",
+        "create_token": "Crea token",
+        "never_expires": "Non scade mai",
+        "generate_token": "Genera token",
+        "generating": "Generazione in corso",
+        "delete": {
+          "title": "Elimina token API",
+          "description": "Qualsiasi applicazione che utilizza questo token non avrà più accesso ai dati di Plane. Questa azione non può essere annullata.",
+          "success": {
+            "title": "Successo!",
+            "message": "Il token API è stato eliminato con successo"
+          },
+          "error": {
+            "title": "Errore!",
+            "message": "Il token API non può essere eliminato"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integrazioni",
+        "heading": "Integrazioni",
+        "description": "Connettiti a strumenti e servizi popolari per sincronizzare il tuo lavoro nell'intero ecosistema del tuo flusso di lavoro.",
+        "page_title": "Lavora con i tuoi dati Plane nelle app disponibili o nelle tue.",
+        "page_description": "Visualizza tutte le integrazioni utilizzate da questo workspace o da te."
+      },
+      "imports": {
+        "title": "Importazioni",
+        "heading": "Importazioni",
+        "description": "Connetti e importa dati dai tuoi strumenti di gestione progetti esistenti per ottimizzare l'integrazione del flusso di lavoro."
+      },
+      "worklogs": {
+        "title": "Registrazioni di lavoro",
+        "heading": "Registrazioni di lavoro",
+        "description": "Scarica le registrazioni di lavoro, alias timesheet, per chiunque in qualsiasi progetto."
+      },
+      "group_syncing": {
+        "title": "Sincronizzazione gruppi",
+        "heading": "Sincronizzazione gruppi",
+        "description": "Collega i gruppi del provider di identità a progetti e ruoli. L'accesso degli utenti si aggiorna automaticamente quando cambia l'appartenenza al gruppo nel tuo IdP, semplificando onboarding e offboarding.",
+        "enable": {
+          "title": "Abilita sincronizzazione gruppi",
+          "description": "Aggiungi automaticamente gli utenti ai progetti in base ai gruppi del provider di identità."
+        },
+        "config": {
+          "title": "Configura sincronizzazione gruppi",
+          "description": "Imposta come i gruppi del provider di identità sono mappati a progetti e ruoli.",
+          "sync_on_login": {
+            "title": "Sincronizza al login",
+            "description": "Aggiorna appartenenza al gruppo e accesso al progetto quando un utente accede."
+          },
+          "sync_offline": {
+            "title": "Sincronizzazione offline",
+            "description": "Esegue la sincronizzazione ogni sei ore automaticamente, senza attendere il login degli utenti."
+          },
+          "auto_remove": {
+            "title": "Rimozione automatica",
+            "description": "Rimuovi automaticamente gli utenti dai progetti quando non corrispondono più al gruppo."
+          },
+          "group_attribute_key": {
+            "title": "Chiave attributo gruppo",
+            "description": "L'attributo del provider di identità usato per identificare e sincronizzare i gruppi utente.",
+            "placeholder": "Gruppi"
+          }
+        },
+        "group_mapping": {
+          "title": "Mappatura gruppi",
+          "description": "Collega i gruppi del provider di identità a progetti e ruoli.",
+          "button_text": "Aggiungi nuova sincronizzazione gruppo"
+        },
+        "toast": {
+          "updating": "Aggiornamento funzione sincronizzazione gruppi",
+          "success": "Funzione sincronizzazione gruppi aggiornata con successo.",
+          "error": "Impossibile aggiornare la funzione sincronizzazione gruppi!"
+        },
+        "delete_modal": {
+          "title": "Elimina sincronizzazione gruppo",
+          "content": "I nuovi utenti di questo gruppo di identità non verranno più aggiunti al progetto. Gli utenti già aggiunti conserveranno il loro ruolo attuale."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Gruppo utenti",
+            "required": "Il gruppo utenti è obbligatorio",
+            "placeholder": "Inserisci i nomi dei gruppi IdP"
+          },
+          "project": {
+            "text": "Progetto",
+            "required": "Il progetto è obbligatorio",
+            "placeholder": "Seleziona un progetto"
+          },
+          "default_role": {
+            "text": "Ruolo progetto",
+            "required": "Il ruolo progetto è obbligatorio",
+            "placeholder": "Seleziona un ruolo progetto"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identità",
+        "heading": "Identità",
+        "description": "Configura il tuo dominio e abilita Single sign-on"
+      },
+      "project_states": {
+        "title": "Stati del progetto",
+        "heading": "Visualizza una panoramica dei progressi per tutti i progetti.",
+        "description": "Gli stati dei progetti sono una funzionalità esclusiva di Plane per tracciare i progressi di tutti i tuoi progetti in base a qualsiasi proprietà del progetto.",
+        "go_to_settings": "Vai alle impostazioni"
+      },
+      "projects": {
+        "title": "Progetti",
+        "description": "Gestisci gli stati dei progetti, abilita le etichette dei progetti e altre configurazioni.",
+        "tabs": {
+          "states": "Stati del progetto",
+          "labels": "Etichette del progetto"
+        }
+      },
+      "templates": {
+        "title": "Modelli",
+        "heading": "Modelli",
+        "description": "Risparmia l'80% del tempo dedicato alla creazione di progetti, elementi di lavoro e pagine quando usi i modelli."
+      },
+      "relations": {
+        "title": "Relazioni",
+        "heading": "Relazioni",
+        "description": "Crea e gestisci tipi di relazione che collegano elementi di lavoro nel tuo spazio di lavoro."
+      },
+      "cancel_trial": {
+        "title": "Cancella la tua prova prima.",
+        "description": "Hai una prova attiva per uno dei nostri piani pagati. Per procedere, per favore cancella prima.",
+        "dismiss": "Ignora",
+        "cancel": "Cancella prova",
+        "cancel_success_title": "Prova cancellata.",
+        "cancel_success_message": "Ora puoi eliminare lo spazio di lavoro.",
+        "cancel_error_title": "Non è andato",
+        "cancel_error_message": "Prova di nuovo, per favore."
+      },
+      "applications": {
+        "internal": "Interno",
+        "title": "Applicazioni",
+        "applicationId_copied": "ID applicazione copiato negli appunti",
+        "clientId_copied": "ID cliente copiato negli appunti",
+        "clientSecret_copied": "Secret cliente copiato negli appunti",
+        "third_party_apps": "App di terze parti",
+        "your_apps": "Le tue app",
+        "connect": "Connetti",
+        "connected": "Connesso",
+        "disconnect": "Disconnetti",
+        "install": "Installa",
+        "installed": "Installato",
+        "configure": "Configura",
+        "app_available": "Hai reso questa app disponibile per l'uso con un workspace Plane",
+        "app_credentials_regenrated": {
+          "title": "Le credenziali dell'app sono state rigenerate con successo",
+          "description": "Sostituisci il client secret ovunque venga utilizzato. Il secret precedente non è più valido."
+        },
+        "app_created": {
+          "title": "App creata con successo",
+          "description": "Usa le credenziali per installare l'app in uno spazio di lavoro Plane"
+        },
+        "installed_apps": "App installate",
+        "all_apps": "Tutte le app",
+        "internal_apps": "App interne",
+        "app_name_title": "Come chiamerai questa app",
+        "app_description_title": {
+          "label": "Descrizione lunga",
+          "placeholder": "Scrivi una descrizione lunga per il marketplace. Premi '/' per i comandi."
+        },
+        "authorization_grant_type": {
+          "title": "Tipo di connessione",
+          "description": "Scegli se la tua app deve essere installata una volta per il workspace o permettere a ogni utente di collegare il proprio account"
+        },
+        "website": {
+          "title": "Sito web",
+          "description": "Link al sito web della tua app.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Creatore di app",
+          "description": "La persona o l'organizzazione che crea l'app."
+        },
+        "app_maker_error": "Il creatore dell'app è obbligatorio",
+        "setup_url": {
+          "label": "URL di configurazione",
+          "description": "Gli utenti verranno reindirizzati a questo URL quando installeranno l'app.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL del webhook",
+          "description": "Qui invieremo eventi e aggiornamenti webhook dagli workspace in cui la tua app è installata.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Secret del webhook",
+          "description": "Secret utilizzato per verificare le richieste webhook in arrivo.",
+          "placeholder": "Inserisci una chiave segreta casuale"
+        },
+        "redirect_uris": {
+          "label": "URI di reindirizzamento (separate da spazi)",
+          "description": "Gli utenti verranno reindirizzati a questo percorso dopo essersi autenticati con Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Connetti un workspace Plane per iniziare a usarla",
+        "client_id_and_secret": "ID e Secret Cliente",
+        "client_id_and_secret_description": "Copia e salva questa chiave segreta. Non potrai più vedere questa chiave dopo aver cliccato su Chiudi.",
+        "client_id_and_secret_download": "Puoi scaricare un CSV con la chiave da qui.",
+        "application_id": "ID Applicazione",
+        "client_id": "ID Cliente",
+        "client_secret": "Secret Cliente",
+        "export_as_csv": "Esporta come CSV",
+        "slug_already_exists": "Lo slug esiste già",
+        "failed_to_create_application": "Impossibile creare l'applicazione",
+        "upload_logo": "Carica Logo",
+        "app_name_error": "Il nome dell'app è obbligatorio",
+        "app_short_description_title": "Dai una breve descrizione a questa app",
+        "app_short_description_error": "La breve descrizione dell'app è obbligatoria",
+        "app_description_error": "La descrizione dell'app è obbligatoria",
+        "app_slug_title": "Slug dell'app",
+        "app_slug_error": "Lo slug dell'app è obbligatorio",
+        "invalid_website_error": "Sito web non valido",
+        "webhook_url_title": "URL del Webhook",
+        "webhook_url_error": "L'URL del webhook è obbligatorio",
+        "invalid_webhook_url_error": "URL del webhook non valido",
+        "redirect_uris_title": "URI di reindirizzamento",
+        "redirect_uris_error": "Gli URI di reindirizzamento sono obbligatori",
+        "invalid_redirect_uris_error": "URI di reindirizzamento non validi",
+        "redirect_uris_description": "Inserisci gli URI separati da spazi dove l'app reindirizzerà dopo l'utente, ad esempio https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Origini Javascript autorizzate",
+        "authorized_javascript_origins_error": "Le origini Javascript autorizzate sono obbligatorie",
+        "invalid_authorized_javascript_origins_error": "Origini Javascript autorizzate non valide",
+        "authorized_javascript_origins_description": "Inserisci le origini separate da spazi da cui l'app potrà effettuare richieste, ad esempio app.com example.com",
+        "create_app": "Crea app",
+        "update_app": "Aggiorna app",
+        "build_your_own_app": "Crea la tua app",
+        "edit_app_details": "Modifica i dettagli dell'app",
+        "regenerate_client_secret_description": "Rigenera il secret cliente. Se rigeneri il secret, potrai copiare la chiave o scaricarla in un file CSV subito dopo.",
+        "regenerate_client_secret": "Rigenera secret cliente",
+        "regenerate_client_secret_confirm_title": "Sei sicuro di voler rigenerare il secret cliente?",
+        "regenerate_client_secret_confirm_description": "L'app che usa questo secret smetterà di funzionare. Dovrai aggiornare il secret nell'app.",
+        "regenerate_client_secret_confirm_cancel": "Annulla",
+        "regenerate_client_secret_confirm_regenerate": "Rigenera",
+        "read_only_access_to_workspace": "Accesso in sola lettura al tuo workspace",
+        "write_access_to_workspace": "Accesso in scrittura al tuo workspace",
+        "read_only_access_to_user_profile": "Accesso in sola lettura al tuo profilo utente",
+        "write_access_to_user_profile": "Accesso in scrittura al tuo profilo utente",
+        "connect_app_to_workspace": "Connetti {app} al tuo workspace {workspace}",
+        "user_permissions": "Permessi utente",
+        "user_permissions_description": "I permessi utente sono utilizzati per concedere l'accesso al profilo dell'utente.",
+        "workspace_permissions": "Permessi del workspace",
+        "workspace_permissions_description": "I permessi del workspace sono utilizzati per concedere l'accesso al workspace.",
+        "with_the_permissions": "con i permessi",
+        "app_consent_title": "{app} richiede l'accesso al tuo workspace e profilo Plane.",
+        "choose_workspace_to_connect_app_with": "Scegli un workspace a cui connettere l'app",
+        "app_consent_workspace_permissions_title": "{app} vorrebbe",
+        "app_consent_user_permissions_title": "{app} può anche richiedere il permesso di un utente per le seguenti risorse. Questi permessi saranno richiesti e autorizzati solo da un utente.",
+        "app_consent_accept_title": "Accettando",
+        "app_consent_accept_1": "Concedi all'app l'accesso ai tuoi dati Plane ovunque tu possa utilizzare l'app dentro o fuori Plane",
+        "app_consent_accept_2": "Accetti la Privacy Policy e i Termini d'Uso di {app}",
+        "accepting": "Accettazione in corso...",
+        "accept": "Accetta",
+        "categories": "Categorie",
+        "select_app_categories": "Seleziona categorie di app",
+        "categories_title": "Categorie",
+        "categories_error": "Le categorie sono obbligatorie",
+        "invalid_categories_error": "Categorie non valide",
+        "categories_description": "Seleziona le categorie che meglio descrivono l'app",
+        "supported_plans": "Piani Supportati",
+        "supported_plans_description": "Seleziona i piani dell'area di lavoro che possono installare questa applicazione. Lascia vuoto per consentire tutti i piani.",
+        "select_plans": "Seleziona Piani",
+        "privacy_policy_url_title": "URL della Privacy Policy",
+        "privacy_policy_url_error": "La URL della Privacy Policy è obbligatoria",
+        "invalid_privacy_policy_url_error": "URL della Privacy Policy non valido",
+        "terms_of_service_url_title": "URL dei Termini di Servizio",
+        "terms_of_service_url_error": "I Termini di Servizio sono obbligatori",
+        "invalid_terms_of_service_url_error": "URL dei Termini di Servizio non valido",
+        "support_url_title": "URL di Supporto",
+        "support_url_error": "L'URL di supporto è obbligatorio",
+        "invalid_support_url_error": "URL di supporto non valido",
+        "video_url_title": "URL del Video",
+        "video_url_error": "Il URL del video è obbligatorio",
+        "invalid_video_url_error": "URL del video non valido",
+        "setup_url_error": "Il URL di setup è obbligatorio",
+        "invalid_setup_url_error": "URL di setup non valido",
+        "configuration_url_title": "URL di configurazione",
+        "configuration_url_error": "L'URL di configurazione è obbligatorio",
+        "invalid_configuration_url_error": "URL di configurazione non valido",
+        "contact_email_title": "Email di contatto",
+        "contact_email_error": "L'email di contatto è obbligatoria",
+        "invalid_contact_email_error": "Email di contatto non valida",
+        "upload_attachments": "Carica allegati",
+        "uploading_images": "Caricamento di {count} Immagine{count, plural, one {s} other {s}}",
+        "drop_images_here": "Rilascia le immagini qui",
+        "click_to_upload_images": "Clicca per caricare le immagini",
+        "invalid_file_or_exceeds_size_limit": "File non valido o supera il limite di dimensione ({size} MB)",
+        "uploading": "Caricamento...",
+        "upload_and_save": "Carica e salva",
+        "app_consent_no_access_title": "Richiesta di installazione",
+        "app_consent_no_access_description": "Questa app può essere installata solo dopo che un amministratore del workspace l'ha installata. Contatta l'amministratore del tuo workspace per procedere.",
+        "app_consent_unapproved_title": "Questa app non è stata ancora esaminata o approvata da Plane.",
+        "app_consent_unapproved_description": "Assicurati di fidarti di questa app prima di connetterla al tuo spazio di lavoro.",
+        "go_to_app": "Vai all'app",
+        "enable_app_mentions": "Abilita menzioni dell'app",
+        "enable_app_mentions_tooltip": "Quando è abilitato, gli utenti possono menzionare o assegnare Work Item a questa applicazione.",
+        "scopes": "Ambiti",
+        "select_scopes": "Seleziona ambiti",
+        "read_access_to": "Accesso in sola lettura a",
+        "write_access_to": "Accesso in scrittura a",
+        "global_permission_expiration": "Gli ambiti globali stanno per scadere. Utilizza ambiti granulari invece. Ad esempio, usa project:read invece di una lettura globale.",
+        "selected_scopes": "{count} selezionati",
+        "scopes_and_permissions": "Ambiti e autorizzazioni",
+        "read": "Lettura",
+        "write": "Scrittura",
+        "scope_description": {
+          "projects": "Accesso ai progetti e a tutte le entità correlate ai progetti",
+          "wiki": "Accesso al wiki e a tutte le entità correlate al wiki",
+          "workspaces": "Accesso agli spazi di lavoro e a tutte le entità correlate",
+          "stickies": "Accesso alle note adesive e a tutte le entità correlate",
+          "profile": "Accesso alle informazioni del profilo utente",
+          "agents": "Accesso agli agenti e a tutte le entità correlate",
+          "assets": "Accesso agli asset e a tutte le entità correlate"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Vedi il tuo lavoro diventare più intelligente e più veloce con l'IA che è connessa in modo nativo al tuo lavoro e alla tua base di conoscenza."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Script",
+        "new_script": "Nuovo script",
+        "description": "Automatizza i tuoi flussi di lavoro con script personalizzati e regole di automazione."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Nessun token API creato",
+        "description": "Le API di Plane possono essere utilizzate per integrare i tuoi dati in Plane con qualsiasi sistema esterno. Crea un token per iniziare."
+      },
+      "webhooks": {
+        "title": "Nessun webhook aggiunto",
+        "description": "Crea webhook per ricevere aggiornamenti in tempo reale e automatizzare azioni."
+      },
+      "exports": {
+        "title": "Nessuna esportazione ancora",
+        "description": "Ogni volta che esporti, avrai anche una copia qui per riferimento."
+      },
+      "imports": {
+        "title": "Nessuna importazione ancora",
+        "description": "Trova qui tutte le tue importazioni precedenti e scaricale."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/it/workspace.json b/packages/i18n/src/locales/it/workspace.json
new file mode 100644
index 0000000..64b7e12
--- /dev/null
+++ b/packages/i18n/src/locales/it/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Crea il tuo spazio di lavoro",
+    "subheading": "Per iniziare a usare Plane, devi creare o unirti a uno spazio di lavoro.",
+    "form": {
+      "name": {
+        "label": "Dai un nome al tuo spazio di lavoro",
+        "placeholder": "Qualcosa di familiare e riconoscibile è sempre meglio."
+      },
+      "url": {
+        "label": "Imposta l'URL del tuo spazio di lavoro",
+        "placeholder": "Digita o incolla un URL",
+        "edit_slug": "Puoi modificare solo lo slug dell'URL"
+      },
+      "organization_size": {
+        "label": "Quante persone utilizzeranno questo spazio di lavoro?",
+        "placeholder": "Seleziona una fascia"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Solo l'amministratore dell'istanza può creare spazi di lavoro",
+        "description": "Se conosci l'indirizzo email dell'amministratore dell'istanza, clicca il pulsante qui sotto per contattarlo.",
+        "request_button": "Richiedi all'amministratore dell'istanza"
+      },
+      "validation": {
+        "name_alphanumeric": "I nomi degli spazi di lavoro possono contenere solo (' '), ('-'), ('_') e caratteri alfanumerici.",
+        "name_length": "Limita il tuo nome a 80 caratteri.",
+        "url_alphanumeric": "Gli URL possono contenere solo ('-') e caratteri alfanumerici.",
+        "url_length": "Limita il tuo URL a 48 caratteri.",
+        "url_already_taken": "L'URL dello spazio di lavoro è già in uso!"
+      }
+    },
+    "request_email": {
+      "subject": "Richiesta per un nuovo spazio di lavoro",
+      "body": "Ciao amministratore dell'istanza,\n\nPer favore, crea un nuovo spazio di lavoro con l'URL [/nome-spazio] per [scopo del nuovo spazio].\n\nGrazie,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Crea spazio di lavoro",
+      "loading": "Creazione dello spazio di lavoro in corso"
+    },
+    "toast": {
+      "success": {
+        "title": "Successo",
+        "message": "Spazio di lavoro creato con successo"
+      },
+      "error": {
+        "title": "Errore",
+        "message": "Impossibile creare lo spazio di lavoro. Per favore, riprova."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Panoramica dei tuoi progetti, attività e metriche",
+        "description": "Benvenuto in Plane, siamo entusiasti di averti qui. Crea il tuo primo progetto e traccia i tuoi elementi di lavoro, e questa pagina si trasformerà in uno spazio che ti aiuta a progredire. Gli amministratori vedranno anche elementi che aiutano il team a progredire.",
+        "primary_button": {
+          "text": "Crea il tuo primo progetto",
+          "comic": {
+            "title": "Tutto inizia con un progetto in Plane",
+            "description": "Un progetto può essere la roadmap di un prodotto, una campagna di marketing o il lancio di una nuova auto."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Analisi",
+    "page_label": "{workspace} - Analisi",
+    "open_tasks": "Totale attività aperte",
+    "error": "Si è verificato un errore nel recupero dei dati.",
+    "work_items_closed_in": "Elementi di lavoro chiusi in",
+    "selected_projects": "Progetti selezionati",
+    "total_members": "Totale membri",
+    "total_cycles": "Totale cicli",
+    "total_modules": "Totale moduli",
+    "pending_work_items": {
+      "title": "Elementi di lavoro in sospeso",
+      "empty_state": "L'analisi degli elementi di lavoro in sospeso dei colleghi apparirà qui."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Elementi di lavoro chiusi in un anno",
+      "empty_state": "Chiudi gli elementi di lavoro per visualizzare l'analisi sotto forma di grafico."
+    },
+    "most_work_items_created": {
+      "title": "Maggiori elementi di lavoro creati",
+      "empty_state": "I colleghi e il numero di elementi di lavoro creati da loro appariranno qui."
+    },
+    "most_work_items_closed": {
+      "title": "Maggiori elementi di lavoro chiusi",
+      "empty_state": "I colleghi e il numero di elementi di lavoro chiusi da loro appariranno qui."
+    },
+    "tabs": {
+      "scope_and_demand": "Ambito e Domanda",
+      "custom": "Analisi personalizzata"
+    },
+    "total": "Totale {entity}",
+    "started_work_items": "{entity} iniziati",
+    "backlog_work_items": "{entity} nel backlog",
+    "un_started_work_items": "{entity} non avviati",
+    "completed_work_items": "{entity} completati",
+    "project_insights": "Approfondimenti sul progetto",
+    "summary_of_projects": "Riepilogo dei progetti",
+    "all_projects": "Tutti i progetti",
+    "trend_on_charts": "Tendenza nei grafici",
+    "active_projects": "Progetti attivi",
+    "customized_insights": "Approfondimenti personalizzati",
+    "created_vs_resolved": "Creato vs Risolto",
+    "empty_state": {
+      "project_insights": {
+        "title": "Nessun dato disponibile",
+        "description": "Gli elementi di lavoro assegnati a te, suddivisi per stato, verranno visualizzati qui."
+      },
+      "created_vs_resolved": {
+        "title": "Nessun dato disponibile",
+        "description": "Gli elementi di lavoro creati e risolti nel tempo verranno visualizzati qui."
+      },
+      "customized_insights": {
+        "title": "Nessun dato disponibile",
+        "description": "Gli elementi di lavoro assegnati a te, suddivisi per stato, verranno visualizzati qui."
+      },
+      "general": {
+        "title": "Traccia progressi, carichi di lavoro e allocazioni. Individua tendenze, rimuovi blocchi e lavora più velocemente",
+        "description": "Visualizza ambito vs domanda, stime e scope creep. Ottieni prestazioni per membri del team e squadre, assicurandoti che il tuo progetto si svolga nei tempi previsti.",
+        "primary_button": {
+          "text": "Inizia il tuo primo progetto",
+          "comic": {
+            "title": "Analytics funziona meglio con Cicli + Moduli",
+            "description": "Prima, incornicia i tuoi elementi di lavoro in Cicli e, se possibile, raggruppa gli elementi che si estendono oltre un ciclo in Moduli. Controlla entrambi nella navigazione sinistra."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Nessun dato disponibile",
+        "description": "Le analisi dei progressi del ciclo verranno visualizzate qui. Aggiungi elementi di lavoro ai cicli per iniziare a monitorare i progressi."
+      },
+      "module_progress": {
+        "title": "Nessun dato disponibile",
+        "description": "Le analisi dei progressi del modulo verranno visualizzate qui. Aggiungi elementi di lavoro ai moduli per iniziare a monitorare i progressi."
+      },
+      "intake_trends": {
+        "title": "Nessun dato disponibile",
+        "description": "Le analisi delle tendenze di intake verranno visualizzate qui. Aggiungi elementi di lavoro all’intake per iniziare a monitorare le tendenze."
+      }
+    },
+    "upgrade_to_plan": "Passa a {plan} per sbloccare {tab}",
+    "workitem_resolved_vs_pending": "Elementi di lavoro risolti vs in sospeso",
+    "projects_by_status": "Progetti per stato",
+    "active_users": "Utenti attivi",
+    "intake_trends": "Tendenze di ammissione"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Progetto} other {Progetti}}",
+    "create": {
+      "label": "Aggiungi progetto"
+    },
+    "network": {
+      "label": "Rete",
+      "private": {
+        "title": "Privato",
+        "description": "Accessibile solo su invito"
+      },
+      "public": {
+        "title": "Pubblico",
+        "description": "Chiunque nello spazio di lavoro, tranne gli ospiti, può unirsi"
+      }
+    },
+    "error": {
+      "permission": "Non hai il permesso di eseguire questa azione.",
+      "cycle_delete": "Impossibile eliminare il ciclo",
+      "module_delete": "Impossibile eliminare il modulo",
+      "issue_delete": "Impossibile eliminare l'elemento di lavoro"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Non iniziato",
+      "started": "Iniziato",
+      "completed": "Completato",
+      "cancelled": "Annullato"
+    },
+    "sort": {
+      "manual": "Manuale",
+      "name": "Nome",
+      "created_at": "Data di creazione",
+      "members_length": "Numero di membri"
+    },
+    "scope": {
+      "my_projects": "I miei progetti",
+      "archived_projects": "Archiviati"
+    },
+    "common": {
+      "months_count": "{months, plural, one {# mese} other {# mesi}}",
+      "days_count": "{days, plural, one {# giorno} other {# giorni}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Nessun progetto attivo",
+        "description": "Considera ogni progetto come la base per un lavoro orientato a obiettivi. I progetti sono dove risiedono Jobs, Cicli e Moduli e, insieme ai tuoi colleghi, ti aiutano a raggiungere quell'obiettivo. Crea un nuovo progetto o filtra per progetti archiviati.",
+        "primary_button": {
+          "text": "Inizia il tuo primo progetto",
+          "comic": {
+            "title": "Tutto inizia con un progetto in Plane",
+            "description": "Un progetto può essere la roadmap di un prodotto, una campagna di marketing o il lancio di una nuova auto."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Nessun progetto",
+        "description": "Per creare elementi di lavoro o gestire il tuo lavoro, devi creare o far parte di un progetto.",
+        "primary_button": {
+          "text": "Inizia il tuo primo progetto",
+          "comic": {
+            "title": "Tutto inizia con un progetto in Plane",
+            "description": "Un progetto può essere la roadmap di un prodotto, una campagna di marketing o il lancio di una nuova auto."
+          }
+        }
+      },
+      "filter": {
+        "title": "Nessun progetto corrispondente",
+        "description": "Nessun progetto rilevato con i criteri di ricerca corrispondenti.\n Crea un nuovo progetto invece."
+      },
+      "search": {
+        "description": "Nessun progetto rilevato con i criteri di ricerca corrispondenti.\nCrea un nuovo progetto invece"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Aggiungi visualizzazione",
+    "empty_state": {
+      "all-issues": {
+        "title": "Nessun elemento di lavoro nel progetto",
+        "description": "Primo progetto fatto! Ora, suddividi il tuo lavoro in parti tracciabili con gli elementi di lavoro. Andiamo!",
+        "primary_button": {
+          "text": "Crea un nuovo elemento di lavoro"
+        }
+      },
+      "assigned": {
+        "title": "Nessun elemento di lavoro ancora",
+        "description": "Gli elementi di lavoro assegnati a te possono essere tracciati da qui.",
+        "primary_button": {
+          "text": "Crea un nuovo elemento di lavoro"
+        }
+      },
+      "created": {
+        "title": "Nessun elemento di lavoro ancora",
+        "description": "Tutti gli elementi di lavoro creati da te appariranno qui. Tracciali direttamente da qui.",
+        "primary_button": {
+          "text": "Crea un nuovo elemento di lavoro"
+        }
+      },
+      "subscribed": {
+        "title": "Nessun elemento di lavoro ancora",
+        "description": "Iscriviti agli elementi di lavoro che ti interessano, tracciali tutti qui."
+      },
+      "custom-view": {
+        "title": "Nessun elemento di lavoro ancora",
+        "description": "Gli elementi di lavoro che corrispondono ai filtri, tracciali tutti qui."
+      }
+    },
+    "delete_view": {
+      "title": "Sei sicuro di voler eliminare questa visualizzazione?",
+      "content": "Se confermi, tutte le opzioni di ordinamento, filtro e visualizzazione + il layout che hai scelto per questa visualizzazione saranno eliminate permanentemente senza possibilità di ripristinarle."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Bozza di un elemento di lavoro",
+    "empty_state": {
+      "title": "Le bozze degli elementi di lavoro e, presto, anche i commenti appariranno qui.",
+      "description": "Per provarlo, inizia ad aggiungere un elemento di lavoro e lascialo a metà o crea la tua prima bozza qui sotto. 😉",
+      "primary_button": {
+        "text": "Crea la tua prima bozza"
+      }
+    },
+    "delete_modal": {
+      "title": "Elimina bozza",
+      "description": "Sei sicuro di voler eliminare questa bozza? Questa azione non può essere annullata."
+    },
+    "toasts": {
+      "created": {
+        "success": "Bozza creata",
+        "error": "Impossibile creare l'elemento di lavoro. Per favore, riprova."
+      },
+      "deleted": {
+        "success": "Bozza eliminata"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Scrivi una nota, un documento o una base di conoscenza completa. Fai partire Galileo, l'assistente AI di Plane, per aiutarti a iniziare",
+        "description": "Le pagine sono spazi di pensiero in Plane. Prendi appunti durante le riunioni, formattali facilmente, incorpora elementi di lavoro, disponili utilizzando una libreria di componenti e mantienili tutti nel contesto del tuo progetto. Per semplificare qualsiasi documento, invoca Galileo, l'AI di Plane, con una scorciatoia o con un clic di un pulsante.",
+        "primary_button": {
+          "text": "Crea la tua prima pagina"
+        }
+      },
+      "private": {
+        "title": "Nessuna pagina privata ancora",
+        "description": "Tieni qui i tuoi pensieri privati. Quando sei pronto a condividere, il team è a un clic di distanza.",
+        "primary_button": {
+          "text": "Crea la tua prima pagina"
+        }
+      },
+      "public": {
+        "title": "Nessuna pagina dello spazio di lavoro ancora",
+        "description": "Vedi le pagine condivise con tutti nel tuo spazio di lavoro proprio qui.",
+        "primary_button": {
+          "text": "Crea la tua prima pagina"
+        }
+      },
+      "archived": {
+        "title": "Nessuna pagina archiviata ancora",
+        "description": "Archivia le pagine che non sono nella tua lista di priorità. Accedile qui quando necessario."
+      },
+      "shared": {
+        "title": "Nessuna pagina condivisa ancora",
+        "description": "Le pagine che altri hanno condiviso con te appariranno qui."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Nessun ciclo attivo",
+        "description": "I cicli dei tuoi progetti che includono qualsiasi periodo che comprende la data di oggi entro il suo intervallo. Trova il progresso e i dettagli di tutti i tuoi cicli attivi qui."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Importa membri da CSV",
+      "description": "Carica un CSV con colonne: Email, Display Name, First Name, Last Name, Role (5, 15 o 20)",
+      "dropzone": {
+        "active": "Rilascia il file CSV qui",
+        "inactive": "Trascina e rilascia o fai clic per caricare",
+        "file_type": "Sono supportati solo file .csv"
+      },
+      "buttons": {
+        "cancel": "Annulla",
+        "import": "Importa",
+        "try_again": "Riprova",
+        "close": "Chiudi",
+        "done": "Fatto"
+      },
+      "progress": {
+        "uploading": "Caricamento...",
+        "importing": "Importazione..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Importazione fallita",
+          "complete": "Importazione completata"
+        },
+        "message": {
+          "seat_limit": "Impossibile importare membri a causa di restrizioni sui posti disponibili.",
+          "success": "{count} membr{plural} aggiunt{plural} con successo allo spazio di lavoro.",
+          "no_imports": "Nessun membro è stato importato dal file CSV."
+        },
+        "stats": {
+          "successful": "Riusciti",
+          "failed": "Falliti"
+        },
+        "download_errors": "Scarica errori"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "File non valido",
+          "message": "Sono supportati solo file CSV."
+        },
+        "import_failed": {
+          "title": "Importazione fallita",
+          "message": "Qualcosa è andato storto."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/accessibility.json b/packages/i18n/src/locales/ja/accessibility.json
new file mode 100644
index 0000000..b983500
--- /dev/null
+++ b/packages/i18n/src/locales/ja/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "ワークスペースロゴ",
+      "open_workspace_switcher": "ワークスペーススイッチャーを開く",
+      "open_user_menu": "ユーザーメニューを開く",
+      "open_command_palette": "コマンドパレットを開く",
+      "open_extended_sidebar": "拡張サイドバーを開く",
+      "close_extended_sidebar": "拡張サイドバーを閉じる",
+      "create_favorites_folder": "お気に入りフォルダを作成",
+      "open_folder": "フォルダを開く",
+      "close_folder": "フォルダを閉じる",
+      "open_favorites_menu": "お気に入りメニューを開く",
+      "close_favorites_menu": "お気に入りメニューを閉じる",
+      "enter_folder_name": "フォルダ名を入力",
+      "create_new_project": "新しいプロジェクトを作成",
+      "open_projects_menu": "プロジェクトメニューを開く",
+      "close_projects_menu": "プロジェクトメニューを閉じる",
+      "toggle_quick_actions_menu": "クイックアクションメニューの切り替え",
+      "open_project_menu": "プロジェクトメニューを開く",
+      "close_project_menu": "プロジェクトメニューを閉じる",
+      "collapse_sidebar": "サイドバーを折りたたむ",
+      "expand_sidebar": "サイドバーを展開",
+      "edition_badge": "有料プランのモーダルを開く"
+    },
+    "auth_forms": {
+      "clear_email": "メールをクリア",
+      "show_password": "パスワードを表示",
+      "hide_password": "パスワードを非表示",
+      "close_alert": "アラートを閉じる",
+      "close_popover": "ポップオーバーを閉じる"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/auth.json b/packages/i18n/src/locales/ja/auth.json
new file mode 100644
index 0000000..d3dd8d3
--- /dev/null
+++ b/packages/i18n/src/locales/ja/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "アイデンティティ",
+    "description": "シングルサインオンを含むセキュリティ機能にアクセスするためにドメインを設定します。",
+    "domain_management": {
+      "header": "ドメイン管理",
+      "verified_domains": {
+        "header": "検証済みドメイン",
+        "description": "メールドメインの所有権を確認してシングルサインオンを有効にします。",
+        "button_text": "ドメインを追加",
+        "list": {
+          "domain_name": "ドメイン名",
+          "status": "ステータス",
+          "status_verified": "検証済み",
+          "status_failed": "失敗",
+          "status_pending": "保留中"
+        },
+        "add_domain": {
+          "title": "ドメインを追加",
+          "description": "SSOを設定して検証するためにドメインを追加します。",
+          "form": {
+            "domain_label": "ドメイン",
+            "domain_placeholder": "plane.so",
+            "domain_required": "ドメインは必須です",
+            "domain_invalid": "有効なドメイン名を入力してください（例：plane.so）"
+          },
+          "primary_button_text": "ドメインを追加",
+          "primary_button_loading_text": "追加中",
+          "toast": {
+            "success_title": "成功！",
+            "success_message": "ドメインが正常に追加されました。DNS TXTレコードを追加して検証してください。",
+            "error_message": "ドメインの追加に失敗しました。もう一度お試しください。"
+          }
+        },
+        "verify_domain": {
+          "title": "ドメインを検証",
+          "description": "これらの手順に従ってドメインを検証します。",
+          "instructions": {
+            "label": "手順",
+            "step_1": "ドメインホストのDNS設定に移動します。",
+            "step_2": {
+              "part_1": "",
+              "part_2": "TXTレコード",
+              "part_3": "を作成し、以下に提供された完全なレコード値を貼り付けます。"
+            },
+            "step_3": "この更新は通常数分かかりますが、完了まで最大72時間かかる場合があります。",
+            "step_4": "DNSレコードが更新されたら、「ドメインを検証」をクリックして確認します。"
+          },
+          "verification_code_label": "TXTレコードの値",
+          "verification_code_description": "このレコードをDNS設定に追加してください",
+          "domain_label": "ドメイン",
+          "primary_button_text": "ドメインを検証",
+          "primary_button_loading_text": "検証中",
+          "secondary_button_text": "後で行います",
+          "toast": {
+            "success_title": "成功！",
+            "success_message": "ドメインが正常に検証されました。",
+            "error_message": "ドメインの検証に失敗しました。もう一度お試しください。"
+          }
+        },
+        "delete_domain": {
+          "title": "ドメインを削除",
+          "description": {
+            "prefix": "本当に削除しますか",
+            "suffix": "？この操作は元に戻せません。"
+          },
+          "primary_button_text": "削除",
+          "primary_button_loading_text": "削除中",
+          "secondary_button_text": "キャンセル",
+          "toast": {
+            "success_title": "成功！",
+            "success_message": "ドメインが正常に削除されました。",
+            "error_message": "ドメインの削除に失敗しました。もう一度お試しください。"
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "シングルサインオン",
+      "disabled_message": "SSOを設定するには検証済みドメインを追加してください",
+      "configure": {
+        "create": "設定",
+        "update": "編集"
+      },
+      "switch_alert_modal": {
+        "title": "SSOメソッドを{newProviderShortName}に切り替えますか？",
+        "content": "{newProviderLongName}（{newProviderShortName}）を有効にしようとしています。この操作により、{activeProviderLongName}（{activeProviderShortName}）が自動的に無効になります。{activeProviderShortName}経由でサインインしようとするユーザーは、新しいメソッドに切り替えるまでプラットフォームにアクセスできなくなります。続行してもよろしいですか？",
+        "primary_button_text": "切り替え",
+        "primary_button_text_loading": "切り替え中",
+        "secondary_button_text": "キャンセル"
+      },
+      "form_section": {
+        "title": "{workspaceName}のIdP提供の詳細"
+      },
+      "form_action_buttons": {
+        "saving": "保存中",
+        "save_changes": "変更を保存",
+        "configure_only": "設定のみ",
+        "configure_and_enable": "設定して有効化",
+        "default": "保存"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName}がIdPに提供する詳細",
+        "button_text": "設定詳細を取得"
+      },
+      "saml": {
+        "header": "SAMLを有効化",
+        "description": "SAMLアイデンティティプロバイダーを設定してシングルサインオンを有効にします。",
+        "configure": {
+          "title": "SAMLを有効化",
+          "description": "メールドメインの所有権を確認してシングルサインオンを含むセキュリティ機能にアクセスします。",
+          "toast": {
+            "success_title": "成功！",
+            "create_success_message": "SAMLプロバイダーが正常に作成されました。",
+            "update_success_message": "SAMLプロバイダーが正常に更新されました。",
+            "error_title": "エラー！",
+            "error_message": "SAMLプロバイダーの保存に失敗しました。もう一度お試しください。"
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web詳細",
+            "entity_id": {
+              "label": "エンティティID | オーディエンス | メタデータ情報",
+              "description": "このPlaneアプリをIdP上の認証済みサービスとして識別するメタデータのこの部分を生成します。"
+            },
+            "callback_url": {
+              "label": "シングルサインオンURL",
+              "description": "これを生成します。IdPのサインインリダイレクトURLフィールドに追加してください。"
+            },
+            "logout_url": {
+              "label": "シングルログアウトURL",
+              "description": "これを生成します。IdPのシングルログアウトリダイレクトURLフィールドに追加してください。"
+            }
+          },
+          "mobile_details": {
+            "header": "モバイル詳細",
+            "entity_id": {
+              "label": "エンティティID | オーディエンス | メタデータ情報",
+              "description": "このPlaneアプリをIdP上の認証済みサービスとして識別するメタデータのこの部分を生成します。"
+            },
+            "callback_url": {
+              "label": "シングルサインオンURL",
+              "description": "これを生成します。IdPのサインインリダイレクトURLフィールドに追加してください。"
+            },
+            "logout_url": {
+              "label": "シングルログアウトURL",
+              "description": "これを生成します。IdPのログアウトリダイレクトURLフィールドに追加してください。"
+            }
+          },
+          "mapping_table": {
+            "header": "マッピング詳細",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "OIDCを有効化",
+        "description": "OIDCアイデンティティプロバイダーを設定してシングルサインオンを有効にします。",
+        "configure": {
+          "title": "OIDCを有効化",
+          "description": "メールドメインの所有権を確認してシングルサインオンを含むセキュリティ機能にアクセスします。",
+          "toast": {
+            "success_title": "成功！",
+            "create_success_message": "OIDCプロバイダーが正常に作成されました。",
+            "update_success_message": "OIDCプロバイダーが正常に更新されました。",
+            "error_title": "エラー！",
+            "error_message": "OIDCプロバイダーの保存に失敗しました。もう一度お試しください。"
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web詳細",
+            "origin_url": {
+              "label": "オリジンURL",
+              "description": "このPlaneアプリ用にこれを生成します。IdPの対応するフィールドに信頼できるオリジンとして追加してください。"
+            },
+            "callback_url": {
+              "label": "リダイレクトURL",
+              "description": "これを生成します。IdPのサインインリダイレクトURLフィールドに追加してください。"
+            },
+            "logout_url": {
+              "label": "ログアウトURL",
+              "description": "これを生成します。IdPのログアウトリダイレクトURLフィールドに追加してください。"
+            }
+          },
+          "mobile_details": {
+            "header": "モバイル詳細",
+            "origin_url": {
+              "label": "オリジンURL",
+              "description": "このPlaneアプリ用にこれを生成します。IdPの対応するフィールドに信頼できるオリジンとして追加してください。"
+            },
+            "callback_url": {
+              "label": "リダイレクトURL",
+              "description": "これを生成します。IdPのサインインリダイレクトURLフィールドに追加してください。"
+            },
+            "logout_url": {
+              "label": "ログアウトURL",
+              "description": "これを生成します。IdPのログアウトリダイレクトURLフィールドに追加してください。"
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "メールアドレス",
+        "placeholder": "name@company.com",
+        "errors": {
+          "required": "メールアドレスは必須です",
+          "invalid": "メールアドレスが無効です"
+        }
+      },
+      "password": {
+        "label": "パスワード",
+        "set_password": "パスワードを設定",
+        "placeholder": "パスワードを入力",
+        "confirm_password": {
+          "label": "パスワードの確認",
+          "placeholder": "パスワードを確認"
+        },
+        "current_password": {
+          "label": "現在のパスワード"
+        },
+        "new_password": {
+          "label": "新しいパスワード",
+          "placeholder": "新しいパスワードを入力"
+        },
+        "change_password": {
+          "label": {
+            "default": "パスワードを変更",
+            "submitting": "パスワードを変更中"
+          }
+        },
+        "errors": {
+          "match": "パスワードが一致しません",
+          "empty": "パスワードを入力してください",
+          "length": "パスワードは8文字以上である必要があります",
+          "strength": {
+            "weak": "パスワードが弱すぎます",
+            "strong": "パスワードは十分な強度です"
+          }
+        },
+        "submit": "パスワードを設定",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "成功！",
+              "message": "パスワードが正常に変更されました。"
+            },
+            "error": {
+              "title": "エラー！",
+              "message": "問題が発生しました。もう一度お試しください。"
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "ユニークコード",
+        "placeholder": "123456",
+        "paste_code": "メールで送信されたコードを貼り付けてください",
+        "requesting_new_code": "新しいコードをリクエスト中",
+        "sending_code": "コードを送信中"
+      },
+      "already_have_an_account": "すでにアカウントをお持ちですか？",
+      "login": "ログイン",
+      "create_account": "アカウントを作成",
+      "new_to_plane": "Planeは初めてですか？",
+      "back_to_sign_in": "サインインに戻る",
+      "resend_in": "{seconds}秒後に再送信",
+      "sign_in_with_unique_code": "ユニークコードでサインイン",
+      "forgot_password": "パスワードをお忘れですか？",
+      "username": {
+        "label": "ユーザー名",
+        "placeholder": "ユーザー名を入力してください"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "チームと作業を管理するためのアカウントを作成してください。",
+        "step": {
+          "email": {
+            "header": "サインアップ",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "サインアップ",
+            "sub_header": "メールアドレスとパスワードの組み合わせでサインアップ。"
+          },
+          "unique_code": {
+            "header": "サインアップ",
+            "sub_header": "上記のメールアドレスに送信されたユニークコードでサインアップ。"
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "強力なパスワードを設定して続行してください"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "チームと作業を管理するためにログインしてください。",
+        "step": {
+          "email": {
+            "header": "ログインまたはサインアップ",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "ログインまたはサインアップ",
+            "sub_header": "メールアドレスとパスワードの組み合わせでログイン。"
+          },
+          "unique_code": {
+            "header": "ログインまたはサインアップ",
+            "sub_header": "上記のメールアドレスに送信されたユニークコードでログイン。"
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "パスワードをリセット",
+      "description": "確認済みのユーザーアカウントのメールアドレスを入力してください。パスワードリセットリンクを送信します。",
+      "email_sent": "リセットリンクをメールアドレスに送信しました",
+      "send_reset_link": "リセットリンクを送信",
+      "errors": {
+        "smtp_not_enabled": "管理者がSMTPを有効にしていないため、パスワードリセットリンクを送信できません"
+      },
+      "toast": {
+        "success": {
+          "title": "メール送信完了",
+          "message": "パスワードをリセットするためのリンクを受信トレイで確認してください。数分以内に表示されない場合は、迷惑メールフォルダを確認してください。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "問題が発生しました。もう一度お試しください。"
+        }
+      }
+    },
+    "reset_password": {
+      "title": "新しいパスワードを設定",
+      "description": "強力なパスワードでアカウントを保護"
+    },
+    "set_password": {
+      "title": "アカウントを保護",
+      "description": "パスワードを設定して安全にログイン"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "エラー！",
+          "message": "サインアウトに失敗しました。もう一度お試しください。"
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "{ldapProviderName}で続行",
+        "sub_header": "{ldapProviderName}の認証情報を入力してください"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/automation.json b/packages/i18n/src/locales/ja/automation.json
new file mode 100644
index 0000000..052a584
--- /dev/null
+++ b/packages/i18n/src/locales/ja/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "カスタム自動化",
+      "create_automation": "自動化を作成"
+    },
+    "scope": {
+      "label": "スコープ",
+      "run_on": "実行対象"
+    },
+    "trigger": {
+      "label": "トリガー",
+      "add_trigger": "トリガーを追加",
+      "sidebar_header": "トリガー設定",
+      "input_label": "この自動化のトリガーは何ですか？",
+      "input_placeholder": "オプションを選択",
+      "section_plane_events": "Planeイベント",
+      "section_time_based": "時間ベース",
+      "fixed_schedule": "固定スケジュール",
+      "schedule": {
+        "frequency": "頻度",
+        "select_day": "曜日を選択",
+        "day_of_month": "月の日付",
+        "monthly_every": "毎",
+        "monthly_day_aria": "{day}日",
+        "time": "時刻",
+        "hour": "時",
+        "minute": "分",
+        "hour_suffix": "時",
+        "minute_suffix": "分",
+        "am": "午前",
+        "pm": "午後",
+        "timezone": "タイムゾーン",
+        "timezone_placeholder": "タイムゾーンを選択",
+        "frequency_daily": "毎日",
+        "frequency_weekly": "毎週",
+        "frequency_monthly": "毎月",
+        "on": "に",
+        "validation_weekly_day_required": "週の中から少なくとも1日を選択してください。",
+        "validation_monthly_date_required": "月の中から日付を選択してください。",
+        "main_content_schedule_summary_daily": "毎日 {time} ({timezone})。",
+        "main_content_schedule_summary_weekly": "毎週 {days} の {time} ({timezone})。",
+        "main_content_schedule_summary_monthly": "毎月 {day} 日の {time} ({timezone})。",
+        "schedule_mode": "スケジュールモード",
+        "schedule_mode_fixed": "固定",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Cron式を入力",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "無効なCron式です。",
+        "cron_preview": "このCron式は「{description}」を実行します。",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "戻る",
+        "next": "アクションを追加"
+      },
+      "warning": {
+        "disabled_trigger_switching": "作成後はトリガータイプを変更できません"
+      }
+    },
+    "condition": {
+      "label": "条件",
+      "add_condition": "条件を追加",
+      "adding_condition": "条件を追加中"
+    },
+    "action": {
+      "label": "アクション",
+      "add_action": "アクションを追加",
+      "sidebar_header": "アクション",
+      "input_label": "自動化は何を行いますか？",
+      "input_placeholder": "オプションを選択",
+      "handler_name": {
+        "add_comment": "コメントを追加",
+        "change_property": "プロパティを変更",
+        "run_script": "スクリプトを実行"
+      },
+      "configuration": {
+        "label": "設定",
+        "change_property": {
+          "placeholders": {
+            "property_name": "プロパティを選択",
+            "change_type": "選択",
+            "property_value_select": "{count, plural, one{値を選択} other{値を選択}}",
+            "property_value_select_date": "日付を選択"
+          },
+          "validation": {
+            "property_name_required": "プロパティ名は必須です",
+            "change_type_required": "変更タイプは必須です",
+            "property_value_required": "プロパティ値は必須です"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "コメントを追加"
+      },
+      "run_script_block": {
+        "title": "スクリプトを実行"
+      },
+      "change_property_block": {
+        "title": "プロパティを変更"
+      },
+      "validation": {
+        "delete_only_action": "唯一のアクションを削除する前に自動化を無効にしてください。"
+      }
+    },
+    "conjunctions": {
+      "and": "かつ",
+      "or": "または",
+      "if": "もし",
+      "then": "ならば"
+    },
+    "enable": {
+      "alert": "自動化が完了したら「有効化」を押してください。有効化されると、自動化が実行可能になります。",
+      "validation": {
+        "required": "自動化を有効にするには、トリガーと少なくとも1つのアクションが必要です。"
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "自動化を削除する前に無効にする必要があります。"
+      }
+    },
+    "table": {
+      "title": "自動化タイトル",
+      "scope": "スコープ",
+      "projects": "プロジェクト",
+      "last_run_on": "最終実行日",
+      "created_on": "作成日",
+      "last_updated_on": "最終更新日",
+      "last_run_status": "最終実行ステータス",
+      "average_duration": "平均実行時間",
+      "owner": "所有者",
+      "executions": "実行回数"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "自動化を作成",
+        "update": "自動化を更新"
+      },
+      "title": {
+        "placeholder": "自動化に名前を付けてください。",
+        "required_error": "タイトルは必須です"
+      },
+      "description": {
+        "placeholder": "自動化について説明してください。"
+      },
+      "submit_button": {
+        "create": "自動化を作成",
+        "update": "自動化を更新"
+      }
+    },
+    "delete_modal": {
+      "heading": "自動化を削除"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "失敗を表示",
+        "all": "すべて",
+        "only_activity": "アクティビティのみ",
+        "only_run_history": "実行履歴のみ"
+      },
+      "run_history": {
+        "initiator": "実行者"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "成功！",
+          "message": "自動化が正常に作成されました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "自動化の作成に失敗しました。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "成功！",
+          "message": "自動化が正常に更新されました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "自動化の更新に失敗しました。"
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "成功！",
+          "message": "自動化が正常に有効化されました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "自動化の有効化に失敗しました。"
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "成功！",
+          "message": "自動化が正常に無効化されました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "自動化の無効化に失敗しました。"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "自動化が削除されました",
+          "message": "{name}（自動化）がプロジェクトから削除されました。"
+        },
+        "error": {
+          "title": "自動化を削除できませんでした。",
+          "message": "もう一度削除するか、後で再度お試しください。それでも削除できない場合はご連絡ください。"
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "エラー！",
+            "message": "アクションの作成に失敗しました。もう一度お試しください！"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "エラー！",
+            "message": "アクションの更新に失敗しました。もう一度お試しください！"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "まだ表示する自動化がありません。",
+        "description": "自動化は、トリガー、条件、アクションを設定することで繰り返し作業を排除するのに役立ちます。時間を節約し、作業を効率的に進めるために作成してください。"
+      },
+      "upgrade": {
+        "title": "自動化",
+        "description": "自動化は、プロジェクト内のタスクを自動化する方法です。",
+        "sub_description": "自動化を使用すると、管理時間の80%を節約できます。"
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "この自動化を実行するプロジェクトを選択",
+        "all_projects": {
+          "label": "すべてのプロジェクト",
+          "description": "自動化はワークスペース内のすべてのプロジェクトで実行されます。"
+        },
+        "select_projects": {
+          "label": "プロジェクトを選択",
+          "description": "自動化はワークスペース内の選択したプロジェクトで実行されます。",
+          "placeholder": "プロジェクトを選択"
+        }
+      },
+      "settings": {
+        "sidebar_label": "自動化",
+        "title": "自動化",
+        "description": "グローバル自動化でワークスペース全体のプロセスを標準化します。"
+      },
+      "table": {
+        "scope": {
+          "global": "グローバル",
+          "project": {
+            "label": "プロジェクト",
+            "multiple": "複数",
+            "all": "すべて"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/common.json b/packages/i18n/src/locales/ja/common.json
new file mode 100644
index 0000000..4899411
--- /dev/null
+++ b/packages/i18n/src/locales/ja/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "現在この問題に取り組んでいます。緊急のサポートが必要な場合は、",
+    "reach_out_to_us": "お問い合わせください",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "それ以外の場合は、時々ページを更新するか、こちらの",
+    "status_page": "ステータスページ"
+  },
+  "submit": "送信",
+  "cancel": "キャンセル",
+  "loading": "読み込み中",
+  "error": "エラー",
+  "success": "成功",
+  "warning": "警告",
+  "info": "情報",
+  "close": "閉じる",
+  "yes": "はい",
+  "no": "いいえ",
+  "ok": "OK",
+  "name": "名前",
+  "unknown_user": "不明なユーザー",
+  "description": "説明",
+  "search": "検索",
+  "add_member": "メンバーを追加",
+  "adding_members": "メンバーを追加中",
+  "remove_member": "メンバーを削除",
+  "add_members": "メンバーを追加",
+  "adding_member": "メンバーを追加中",
+  "remove_members": "メンバーを削除",
+  "add": "追加",
+  "adding": "追加中",
+  "remove": "削除",
+  "add_new": "新規追加",
+  "remove_selected": "選択項目を削除",
+  "first_name": "名",
+  "last_name": "姓",
+  "email": "メールアドレス",
+  "display_name": "表示名",
+  "role": "役割",
+  "timezone": "タイムゾーン",
+  "avatar": "アバター",
+  "cover_image": "カバー画像",
+  "password": "パスワード",
+  "change_cover": "カバーを変更",
+  "language": "言語",
+  "saving": "保存中",
+  "save_changes": "変更を保存",
+  "deactivate_account": "アカウントを無効化",
+  "deactivate_account_description": "アカウントを無効化すると、そのアカウント内のすべてのデータとリソースが完全に削除され、復元できなくなります。",
+  "profile_settings": "プロフィール設定",
+  "your_account": "あなたのアカウント",
+  "security": "セキュリティ",
+  "activity": "アクティビティ",
+  "activity_empty_state": {
+    "no_activity": "アクティビティはまだありません",
+    "no_transitions": "トランジションはまだありません",
+    "no_comments": "コメントはまだありません",
+    "no_worklogs": "作業ログはまだありません",
+    "no_history": "履歴はまだありません"
+  },
+  "preferences": "環境設定",
+  "language_and_time": "言語と時刻",
+  "notifications": "通知",
+  "workspaces": "ワークスペース",
+  "create_workspace": "ワークスペースを作成",
+  "invitations": "招待",
+  "summary": "概要",
+  "assigned": "割り当て済み",
+  "created": "作成済み",
+  "subscribed": "購読中",
+  "you_do_not_have_the_permission_to_access_this_page": "このページにアクセスする権限がありません。",
+  "something_went_wrong_please_try_again": "問題が発生しました。もう一度お試しください。",
+  "load_more": "もっと読み込む",
+  "select_or_customize_your_interface_color_scheme": "インターフェースのカラースキームを選択またはカスタマイズします。",
+  "timezone_setting": "現在のタイムゾーン設定。",
+  "language_setting": "ユーザーインターフェースで使用する言語を選択します。",
+  "settings_moved_to_preferences": "タイムゾーンと言語の設定は環境設定に移動しました。",
+  "go_to_preferences": "環境設定へ移動",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "自分に合ったカーソル移動スタイルを選択してください。",
+  "theme": "テーマ",
+  "smooth_cursor": "スムーズカーソル",
+  "system_preference": "システム設定",
+  "light": "ライト",
+  "dark": "ダーク",
+  "light_contrast": "ライトハイコントラスト",
+  "dark_contrast": "ダークハイコントラスト",
+  "custom": "カスタムテーマ",
+  "select_your_theme": "テーマを選択",
+  "customize_your_theme": "テーマをカスタマイズ",
+  "background_color": "背景色",
+  "text_color": "文字色",
+  "primary_color": "プライマリ（テーマ）カラー",
+  "sidebar_background_color": "サイドバーの背景色",
+  "sidebar_text_color": "サイドバーの文字色",
+  "set_theme": "テーマを設定",
+  "enter_a_valid_hex_code_of_6_characters": "6文字の有効な16進コードを入力してください",
+  "background_color_is_required": "背景色は必須です",
+  "text_color_is_required": "文字色は必須です",
+  "primary_color_is_required": "プライマリカラーは必須です",
+  "sidebar_background_color_is_required": "サイドバーの背景色は必須です",
+  "sidebar_text_color_is_required": "サイドバーの文字色は必須です",
+  "updating_theme": "テーマを更新中",
+  "theme_updated_successfully": "テーマが正常に更新されました",
+  "failed_to_update_the_theme": "テーマの更新に失敗しました",
+  "email_notifications": "メール通知",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "購読している作業項目の最新情報を受け取ります。通知を受け取るには有効にしてください。",
+  "email_notification_setting_updated_successfully": "メール通知設定が正常に更新されました",
+  "failed_to_update_email_notification_setting": "メール通知設定の更新に失敗しました",
+  "notify_me_when": "通知を受け取るタイミング",
+  "property_changes": "プロパティの変更",
+  "property_changes_description": "作業項目の担当者、優先度、見積もりなどのプロパティが変更されたときに通知します。",
+  "state_change": "状態の変更",
+  "state_change_description": "作業項目が異なる状態に移動したときに通知します",
+  "issue_completed": "作業項目の完了",
+  "issue_completed_description": "作業項目が完了したときのみ通知します",
+  "comments": "コメント",
+  "comments_description": "誰かが作業項目にコメントを残したときに通知します",
+  "mentions": "メンション",
+  "mentions_description": "誰かがコメントや説明で自分をメンションしたときのみ通知します",
+  "old_password": "現在のパスワード",
+  "general_settings": "一般設定",
+  "sign_out": "サインアウト",
+  "signing_out": "サインアウト中",
+  "active_cycles": "アクティブサイクル",
+  "active_cycles_description": "プロジェクト全体のサイクルを監視し、優先度の高い作業項目を追跡し、注意が必要なサイクルにズームインします。",
+  "on_demand_snapshots_of_all_your_cycles": "すべてのサイクルのオンデマンドスナップショット",
+  "upgrade": "アップグレード",
+  "10000_feet_view": "すべてのアクティブサイクルの俯瞰図",
+  "10000_feet_view_description": "各プロジェクトのサイクル間を移動する代わりに、すべてのプロジェクトの実行中のサイクルを一度に確認できます。",
+  "get_snapshot_of_each_active_cycle": "各アクティブサイクルのスナップショットを取得",
+  "get_snapshot_of_each_active_cycle_description": "すべてのアクティブサイクルの主要な指標を追跡し、進捗状況を確認し、期限に対する範囲を把握します。",
+  "compare_burndowns": "バーンダウンを比較",
+  "compare_burndowns_description": "各サイクルのバーンダウンレポートを確認して、各チームのパフォーマンスを監視します。",
+  "quickly_see_make_or_break_issues": "重要な作業項目をすぐに確認",
+  "quickly_see_make_or_break_issues_description": "期限に対する各サイクルの優先度の高い作業項目をプレビューします。ワンクリックでサイクルごとにすべての項目を確認できます。",
+  "zoom_into_cycles_that_need_attention": "注意が必要なサイクルにズームイン",
+  "zoom_into_cycles_that_need_attention_description": "期待に沿わないサイクルの状態をワンクリックで調査します。",
+  "stay_ahead_of_blockers": "ブロッカーに先手を打つ",
+  "stay_ahead_of_blockers_description": "プロジェクト間の課題を特定し、他のビューでは明らかでないサイクル間の依存関係を確認します。",
+  "analytics": "アナリティクス",
+  "workspace_invites": "ワークスペースの招待",
+  "enter_god_mode": "ゴッドモードに入る",
+  "workspace_logo": "ワークスペースのロゴ",
+  "new_issue": "新規作業項目",
+  "your_work": "あなたの作業",
+  "drafts": "下書き",
+  "projects": "プロジェクト",
+  "views": "ビュー",
+  "archives": "アーカイブ",
+  "settings": "設定",
+  "failed_to_move_favorite": "お気に入りの移動に失敗しました",
+  "favorites": "お気に入り",
+  "no_favorites_yet": "まだお気に入りがありません",
+  "create_folder": "フォルダを作成",
+  "new_folder": "新規フォルダ",
+  "favorite_updated_successfully": "お気に入りが正常に更新されました",
+  "favorite_created_successfully": "お気に入りが正常に作成されました",
+  "folder_already_exists": "フォルダは既に存在します",
+  "folder_name_cannot_be_empty": "フォルダ名を空にすることはできません",
+  "something_went_wrong": "問題が発生しました",
+  "failed_to_reorder_favorite": "お気に入りの並び替えに失敗しました",
+  "favorite_removed_successfully": "お気に入りが正常に削除されました",
+  "failed_to_create_favorite": "お気に入りの作成に失敗しました",
+  "failed_to_rename_favorite": "お気に入りの名前変更に失敗しました",
+  "project_link_copied_to_clipboard": "プロジェクトリンクがクリップボードにコピーされました",
+  "link_copied": "リンクがコピーされました",
+  "add_project": "プロジェクトを追加",
+  "create_project": "プロジェクトを作成",
+  "failed_to_remove_project_from_favorites": "プロジェクトをお気に入りから削除できませんでした。もう一度お試しください。",
+  "project_created_successfully": "プロジェクトが正常に作成されました",
+  "project_created_successfully_description": "プロジェクトが正常に作成されました。作業項目を追加できるようになりました。",
+  "project_name_already_taken": "プロジェクト名は既に使用されています。",
+  "project_name_cannot_contain_special_characters": "プロジェクト名に特殊文字を含めることはできません。",
+  "project_identifier_already_taken": "プロジェクト識別子は既に使用されています。",
+  "project_cover_image_alt": "プロジェクトのカバー画像",
+  "name_is_required": "名前は必須です",
+  "title_should_be_less_than_255_characters": "タイトルは255文字未満である必要があります",
+  "project_name": "プロジェクト名",
+  "project_id_must_be_at_least_1_character": "プロジェクトIDは最低1文字必要です",
+  "project_id_must_be_at_most_5_characters": "プロジェクトIDは最大5文字までです",
+  "project_id": "プロジェクトID",
+  "project_id_tooltip_content": "プロジェクト内の作業項目を一意に識別するのに役立ちます。最大50文字。",
+  "description_placeholder": "説明",
+  "only_alphanumeric_non_latin_characters_allowed": "英数字と非ラテン文字のみ使用できます。",
+  "project_id_is_required": "プロジェクトIDは必須です",
+  "project_id_allowed_char": "英数字と非ラテン文字のみ使用できます。",
+  "project_id_min_char": "プロジェクトIDは最低1文字必要です",
+  "project_id_max_char": "プロジェクトIDは最大{max}文字までです",
+  "project_description_placeholder": "プロジェクトの説明を入力",
+  "select_network": "ネットワークを選択",
+  "lead": "リード",
+  "date_range": "日付範囲",
+  "private": "プライベート",
+  "public": "パブリック",
+  "accessible_only_by_invite": "招待のみアクセス可能",
+  "anyone_in_the_workspace_except_guests_can_join": "ゲスト以外のワークスペースのメンバーが参加可能",
+  "creating": "作成中",
+  "creating_project": "プロジェクトを作成中",
+  "adding_project_to_favorites": "プロジェクトをお気に入りに追加中",
+  "project_added_to_favorites": "プロジェクトがお気に入りに追加されました",
+  "couldnt_add_the_project_to_favorites": "プロジェクトをお気に入りに追加できませんでした。もう一度お試しください。",
+  "removing_project_from_favorites": "プロジェクトをお気に入りから削除中",
+  "project_removed_from_favorites": "プロジェクトがお気に入りから削除されました",
+  "couldnt_remove_the_project_from_favorites": "プロジェクトをお気に入りから削除できませんでした。もう一度お試しください。",
+  "add_to_favorites": "お気に入りに追加",
+  "remove_from_favorites": "お気に入りから削除",
+  "publish_project": "プロジェクトを公開",
+  "publish": "公開",
+  "copy_link": "リンクをコピー",
+  "leave_project": "プロジェクトを退出",
+  "join_the_project_to_rearrange": "並び替えるにはプロジェクトに参加してください",
+  "drag_to_rearrange": "ドラッグして並び替え",
+  "congrats": "おめでとうございます！",
+  "open_project": "プロジェクトを開く",
+  "issues": "作業項目",
+  "cycles": "Cycles",
+  "modules": "Modules",
+  "pages": "ページ",
+  "intake": "Intake",
+  "renew": "更新",
+  "preview": "プレビュー",
+  "time_tracking": "時間トラッキング",
+  "work_management": "作業管理",
+  "projects_and_issues": "プロジェクトと作業項目",
+  "projects_and_issues_description": "このプロジェクトでオン/オフを切り替えます。",
+  "cycles_description": "プロジェクトごとに作業の時間枠を設定し、必要に応じて期間を調整します。1サイクルは2週間、次は1週間でもかまいません。",
+  "modules_description": "専任のリーダーと担当者を持つサブプロジェクトに作業を整理します。",
+  "views_description": "カスタムの並び替え、フィルター、表示オプションを保存するか、チームと共有します。",
+  "pages_description": "自由形式のコンテンツを作成・編集できます。メモ、ドキュメント、何でもOKです。",
+  "intake_description": "非メンバーがバグ、フィードバック、提案を共有できるようにし、ワークフローを妨げないようにします。",
+  "time_tracking_description": "作業項目やプロジェクトに費やした時間を記録します。",
+  "work_management_description": "作業とプロジェクトを簡単に管理します。",
+  "documentation": "ドキュメント",
+  "message_support": "サポートにメッセージ",
+  "contact_sales": "営業に問い合わせ",
+  "hyper_mode": "Hyper Mode",
+  "keyboard_shortcuts": "キーボードショートカット",
+  "whats_new": "新機能",
+  "version": "バージョン",
+  "we_are_having_trouble_fetching_the_updates": "更新情報の取得に問題が発生しています。",
+  "our_changelogs": "変更履歴",
+  "for_the_latest_updates": "最新の更新情報については",
+  "please_visit": "をご覧ください",
+  "docs": "ドキュメント",
+  "full_changelog": "完全な変更履歴",
+  "support": "サポート",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Powered by Plane Pages",
+  "please_select_at_least_one_invitation": "少なくとも1つの招待を選択してください。",
+  "please_select_at_least_one_invitation_description": "ワークスペースに参加するには少なくとも1つの招待を選択してください。",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "誰かがあなたをワークスペースに招待しています",
+  "join_a_workspace": "ワークスペースに参加",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "誰かがあなたをワークスペースに招待しています",
+  "join_a_workspace_description": "ワークスペースに参加",
+  "accept_and_join": "承諾して参加",
+  "go_home": "ホームへ",
+  "no_pending_invites": "保留中の招待はありません",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "誰かがワークスペースに招待した場合、ここで確認できます",
+  "back_to_home": "ホームに戻る",
+  "workspace_name": "ワークスペース名",
+  "deactivate_your_account": "アカウントを無効化",
+  "deactivate_your_account_description": "無効化すると、作業項目を割り当てられなくなり、ワークスペースの請求対象外となります。アカウントを再有効化するには、このメールアドレスでワークスペースへの招待が必要です。",
+  "deactivating": "無効化中",
+  "confirm": "確認",
+  "confirming": "確認中",
+  "draft_created": "下書きが作成されました",
+  "issue_created_successfully": "作業項目が正常に作成されました",
+  "draft_creation_failed": "下書きの作成に失敗しました",
+  "issue_creation_failed": "作業項目の作成に失敗しました",
+  "draft_issue": "作業項目の下書き",
+  "issue_updated_successfully": "作業項目が正常に更新されました",
+  "issue_could_not_be_updated": "作業項目を更新できませんでした",
+  "create_a_draft": "下書きを作成",
+  "save_to_drafts": "下書きに保存",
+  "save": "保存",
+  "update": "更新",
+  "updating": "更新中",
+  "create_new_issue": "新規作業項目を作成",
+  "editor_is_not_ready_to_discard_changes": "エディターは変更を破棄する準備ができていません",
+  "failed_to_move_issue_to_project": "作業項目をプロジェクトに移動できませんでした",
+  "create_more": "さらに作成",
+  "add_to_project": "プロジェクトに追加",
+  "discard": "破棄",
+  "duplicate_issue_found": "重複する作業項目が見つかりました",
+  "duplicate_issues_found": "重複する作業項目が見つかりました",
+  "no_matching_results": "一致する結果がありません",
+  "title_is_required": "タイトルは必須です",
+  "title": "タイトル",
+  "state": "状態",
+  "transition": "トランジション",
+  "history": "履歴",
+  "priority": "優先度",
+  "none": "なし",
+  "urgent": "緊急",
+  "high": "高",
+  "medium": "中",
+  "low": "低",
+  "members": "メンバー",
+  "assignee": "担当者",
+  "assignees": "担当者",
+  "subscriber": "{count, plural, one{# 人の購読者} other{# 人の購読者}}",
+  "you": "あなた",
+  "labels": "ラベル",
+  "create_new_label": "新規ラベルを作成",
+  "label_name": "ラベル名",
+  "failed_to_create_label": "ラベルの作成に失敗しました。もう一度お試しください。",
+  "start_date": "開始日",
+  "end_date": "終了日",
+  "due_date": "期限",
+  "target_date": "目標日",
+  "estimate": "見積もり",
+  "change_parent_issue": "親作業項目を変更",
+  "remove_parent_issue": "親作業項目を削除",
+  "add_parent": "親を追加",
+  "loading_members": "メンバーを読み込み中",
+  "view_link_copied_to_clipboard": "ビューリンクがクリップボードにコピーされました。",
+  "required": "必須",
+  "optional": "任意",
+  "Cancel": "キャンセル",
+  "edit": "編集",
+  "archive": "アーカイブ",
+  "restore": "復元",
+  "open_in_new_tab": "新しいタブで開く",
+  "delete": "削除",
+  "deleting": "削除中",
+  "make_a_copy": "コピーを作成",
+  "move_to_project": "プロジェクトに移動",
+  "good": "おはよう",
+  "morning": "ございます",
+  "afternoon": "こんにちは",
+  "evening": "こんばんは",
+  "show_all": "すべて表示",
+  "show_less": "表示を減らす",
+  "no_data_yet": "まだデータがありません",
+  "syncing": "同期中",
+  "add_work_item": "作業項目を追加",
+  "advanced_description_placeholder": "コマンドには '/' を押してください",
+  "create_work_item": "作業項目を作成",
+  "attachments": "添付ファイル",
+  "declining": "辞退中",
+  "declined": "辞退済み",
+  "decline": "辞退",
+  "unassigned": "未割り当て",
+  "work_items": "作業項目",
+  "add_link": "リンクを追加",
+  "points": "ポイント",
+  "no_assignee": "担当者なし",
+  "no_assignees_yet": "まだ担当者がいません",
+  "no_labels_yet": "まだラベルがありません",
+  "ideal": "理想",
+  "current": "現在",
+  "no_matching_members": "一致するメンバーがいません",
+  "leaving": "退出中",
+  "removing": "削除中",
+  "leave": "退出",
+  "refresh": "更新",
+  "refreshing": "更新中",
+  "refresh_status": "状態を更新",
+  "prev": "前へ",
+  "next": "次へ",
+  "re_generating": "再生成中",
+  "re_generate": "再生成",
+  "re_generate_key": "キーを再生成",
+  "export": "エクスポート",
+  "member": "{count, plural, other{# メンバー}}",
+  "new_password_must_be_different_from_old_password": "新しいパスワードは古いパスワードと異なる必要があります",
+  "edited": "編集済み",
+  "bot": "ボット",
+  "settings_description": "アカウント、ワークスペース、プロジェクトの環境設定を一か所で管理できます。タブを切り替えて簡単に設定してください。",
+  "back_to_workspace": "ワークスペースに戻る",
+  "upgrade_request": "ワークスペース管理者にアップグレードを依頼してください。",
+  "copied_to_clipboard": "クリップボードにコピーしました",
+  "copied_to_clipboard_description": "URLがクリップボードに正常にコピーされました",
+  "toast": {
+    "success": "成功！",
+    "error": "エラー！"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "リンクが作成されました",
+        "message": "リンクが正常に作成されました"
+      },
+      "not_created": {
+        "title": "リンクが作成されませんでした",
+        "message": "リンクを作成できませんでした"
+      },
+      "updated": {
+        "title": "リンクが更新されました",
+        "message": "リンクが正常に更新されました"
+      },
+      "not_updated": {
+        "title": "リンクが更新されませんでした",
+        "message": "リンクを更新できませんでした"
+      },
+      "removed": {
+        "title": "リンクが削除されました",
+        "message": "リンクが正常に削除されました"
+      },
+      "not_removed": {
+        "title": "リンクが削除されませんでした",
+        "message": "リンクを削除できませんでした"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URLが無効です",
+        "placeholder": "URLを入力または貼り付け"
+      },
+      "title": {
+        "text": "表示タイトル",
+        "placeholder": "このリンクをどのように表示したいか"
+      }
+    }
+  },
+  "common": {
+    "all": "すべて",
+    "no_items_in_this_group": "このグループにアイテムはありません",
+    "drop_here_to_move": "移動するにはここにドロップ",
+    "states": "ステータス",
+    "state": "ステータス",
+    "state_groups": "ステータスグループ",
+    "state_group": "ステート グループ",
+    "priorities": "優先度",
+    "priority": "優先度",
+    "team_project": "チームプロジェクト",
+    "project": "プロジェクト",
+    "cycle": "サイクル",
+    "cycles": "サイクル",
+    "module": "モジュール",
+    "modules": "モジュール",
+    "labels": "ラベル",
+    "label": "ラベル",
+    "admins": "管理者",
+    "users": "ユーザー",
+    "guests": "ゲスト",
+    "assignees": "担当者",
+    "assignee": "担当者",
+    "created_by": "作成者",
+    "none": "なし",
+    "link": "リンク",
+    "estimates": "見積もり",
+    "estimate": "見積もり",
+    "created_at": "クリエイテッド アット",
+    "updated_at": "更新日時",
+    "completed_at": "コンプリーテッド アット",
+    "layout": "レイアウト",
+    "filters": "フィルター",
+    "display": "表示",
+    "load_more": "もっと読み込む",
+    "activity": "アクティビティ",
+    "analytics": "アナリティクス",
+    "dates": "日付",
+    "success": "成功！",
+    "something_went_wrong": "問題が発生しました",
+    "error": {
+      "label": "エラー！",
+      "message": "エラーが発生しました。もう一度お試しください。"
+    },
+    "group_by": "グループ化",
+    "epic": "エピック",
+    "epics": "エピック",
+    "work_item": "作業項目",
+    "work_items": "作業項目",
+    "sub_work_item": "サブ作業項目",
+    "views": "ビュー",
+    "pages": "ページ",
+    "add": "追加",
+    "warning": "警告",
+    "updating": "更新中",
+    "adding": "追加中",
+    "update": "更新",
+    "creating": "作成中",
+    "create": "作成",
+    "cancel": "キャンセル",
+    "description": "説明",
+    "title": "タイトル",
+    "attachment": "添付ファイル",
+    "general": "一般",
+    "features": "機能",
+    "automation": "自動化",
+    "project_name": "プロジェクト名",
+    "project_id": "プロジェクトID",
+    "project_timezone": "プロジェクトのタイムゾーン",
+    "created_on": "作成日",
+    "updated_on": "更新日",
+    "completed_on": "Completed on",
+    "update_project": "プロジェクトを更新",
+    "identifier_already_exists": "識別子は既に存在します",
+    "add_more": "さらに追加",
+    "defaults": "デフォルト",
+    "add_label": "ラベルを追加",
+    "customize_time_range": "期間をカスタマイズ",
+    "loading": "読み込み中",
+    "attachments": "添付ファイル",
+    "property": "プロパティ",
+    "properties": "プロパティ",
+    "parent": "親",
+    "page": "ページ",
+    "remove": "削除",
+    "archiving": "アーカイブ中",
+    "archive": "アーカイブ",
+    "access": {
+      "public": "公開",
+      "private": "非公開"
+    },
+    "done": "完了",
+    "sub_work_items": "サブ作業項目",
+    "comment": "コメント",
+    "workspace_level": "ワークスペースレベル",
+    "order_by": {
+      "label": "並び順",
+      "manual": "手動 - ランク",
+      "last_created": "最終作成日",
+      "last_updated": "最終更新日",
+      "start_date": "開始日",
+      "due_date": "期限日",
+      "asc": "昇順",
+      "desc": "降順",
+      "updated_on": "更新日"
+    },
+    "sort": {
+      "asc": "昇順",
+      "desc": "降順",
+      "created_on": "作成日",
+      "updated_on": "更新日"
+    },
+    "comments": "コメント",
+    "updates": "更新",
+    "additional_updates": "追加の更新",
+    "clear_all": "すべてクリア",
+    "copied": "コピーしました！",
+    "link_copied": "リンクをコピーしました！",
+    "link_copied_to_clipboard": "リンクをクリップボードにコピーしました",
+    "copied_to_clipboard": "作業項目のリンクをクリップボードにコピーしました",
+    "branch_name_copied_to_clipboard": "ブランチ名をクリップボードにコピーしました",
+    "is_copied_to_clipboard": "作業項目をクリップボードにコピーしました",
+    "no_links_added_yet": "リンクはまだ追加されていません",
+    "add_link": "リンクを追加",
+    "links": "リンク",
+    "go_to_workspace": "ワークスペースへ移動",
+    "progress": "進捗",
+    "optional": "任意",
+    "join": "参加",
+    "go_back": "戻る",
+    "continue": "続ける",
+    "resend": "再送信",
+    "relations": "関連",
+    "dependencies": "依存関係",
+    "errors": {
+      "default": {
+        "title": "エラー！",
+        "message": "問題が発生しました。もう一度お試しください。"
+      },
+      "required": "この項目は必須です",
+      "entity_required": "{entity}は必須です",
+      "restricted_entity": "{entity} は制限されています"
+    },
+    "update_link": "リンクを更新",
+    "attach": "添付",
+    "create_new": "新規作成",
+    "add_existing": "既存を追加",
+    "type_or_paste_a_url": "URLを入力または貼り付け",
+    "url_is_invalid": "URLが無効です",
+    "display_title": "表示タイトル",
+    "link_title_placeholder": "このリンクをどのように表示したいか",
+    "url": "URL",
+    "side_peek": "サイドピーク",
+    "modal": "モーダル",
+    "full_screen": "全画面",
+    "close_peek_view": "ピークビューを閉じる",
+    "toggle_peek_view_layout": "ピークビューのレイアウトを切り替え",
+    "options": "オプション",
+    "duration": "期間",
+    "today": "今日",
+    "week": "週",
+    "month": "月",
+    "quarter": "四半期",
+    "press_for_commands": "コマンドは「/」を押してください",
+    "click_to_add_description": "クリックして説明を追加",
+    "on_track": "順調",
+    "off_track": "遅れ",
+    "at_risk": "リスクあり",
+    "timeline": "タイムライン",
+    "completion": "完了",
+    "upcoming": "今後の予定",
+    "completed": "完了",
+    "in_progress": "進行中",
+    "planned": "計画済み",
+    "paused": "一時停止",
+    "search": {
+      "label": "検索",
+      "placeholder": "検索するキーワードを入力",
+      "no_matches_found": "一致する結果が見つかりません",
+      "no_matching_results": "一致する結果がありません",
+      "min_chars": "検索するには{count}文字以上入力してください",
+      "error": "検索結果の取得中にエラーが発生しました",
+      "no_results": {
+        "title": "一致する結果がありません",
+        "description": "検索条件を削除してすべての結果を表示"
+      }
+    },
+    "actions": {
+      "edit": "編集",
+      "make_a_copy": "コピーを作成",
+      "open_in_new_tab": "新しいタブで開く",
+      "copy_link": "リンクをコピー",
+      "copy_branch_name": "ブランチ名をコピー",
+      "archive": "アーカイブ",
+      "restore": "復元",
+      "delete": "削除",
+      "remove_relation": "関連を削除",
+      "subscribe": "購読",
+      "unsubscribe": "購読解除",
+      "clear_sorting": "並び替えをクリア",
+      "show_weekends": "週末を表示",
+      "enable": "有効化",
+      "disable": "無効化",
+      "copy_markdown": "マークダウンをコピー",
+      "reply": "返信"
+    },
+    "name": "名前",
+    "discard": "破棄",
+    "confirm": "確認",
+    "confirming": "確認中",
+    "read_the_docs": "ドキュメントを読む",
+    "default": "デフォルト",
+    "active": "アクティブ",
+    "enabled": "有効",
+    "disabled": "無効",
+    "mandate": "必須",
+    "mandatory": "必須",
+    "global": "グローバル",
+    "yes": "はい",
+    "no": "いいえ",
+    "please_wait": "お待ちください",
+    "enabling": "有効化中",
+    "disabling": "無効化中",
+    "beta": "ベータ",
+    "or": "または",
+    "next": "次へ",
+    "back": "戻る",
+    "retry": "再試行",
+    "cancelling": "キャンセル中",
+    "configuring": "設定中",
+    "clear": "クリア",
+    "import": "インポート",
+    "connect": "接続",
+    "authorizing": "認証中",
+    "processing": "処理中",
+    "no_data_available": "データがありません",
+    "from": "{name}から",
+    "authenticated": "認証済み",
+    "select": "選択",
+    "upgrade": "アップグレード",
+    "add_seats": "シートを追加",
+    "projects": "プロジェクト",
+    "workspace": "ワークスペース",
+    "workspaces": "ワークスペース",
+    "team": "チーム",
+    "teams": "チーム",
+    "entity": "エンティティ",
+    "entities": "エンティティ",
+    "task": "タスク",
+    "tasks": "タスク",
+    "section": "セクション",
+    "sections": "セクション",
+    "edit": "編集",
+    "connecting": "接続中",
+    "connected": "接続済み",
+    "disconnect": "切断",
+    "disconnecting": "切断中",
+    "installing": "インストール中",
+    "install": "インストール",
+    "reset": "リセット",
+    "live": "ライブ",
+    "change_history": "変更履歴",
+    "coming_soon": "近日公開",
+    "member": "メンバー",
+    "members": "メンバー",
+    "you": "あなた",
+    "upgrade_cta": {
+      "higher_subscription": "高いサブスクリプションにアップグレード",
+      "talk_to_sales": "トーク トゥ セールス"
+    },
+    "category": "カテゴリー",
+    "categories": "カテゴリーズ",
+    "saving": "セービング",
+    "save_changes": "セーブ チェンジズ",
+    "delete": "デリート",
+    "deleting": "デリーティング",
+    "pending": "保留中",
+    "invite": "招待",
+    "view": "ビュー",
+    "deactivated_user": "無効化されたユーザー",
+    "apply": "適用",
+    "applying": "適用中",
+    "overview": "概要",
+    "no_of": "{entity} の数",
+    "resolved": "解決済み",
+    "get_started": "はじめに",
+    "worklogs": "作業ログ",
+    "project_updates": "プロジェクトの更新",
+    "workflows": "ワークフロー",
+    "templates": "テンプレート",
+    "business": "ビジネス",
+    "members_and_teamspaces": "メンバーとチームスペース",
+    "recurring_work_items": "繰り返し作業項目",
+    "milestones": "マイルストーン",
+    "open_in_full_screen": "{page}をフルスクリーンで開く",
+    "details": "詳細",
+    "project_structure": "プロジェクト構造",
+    "custom_properties": "カスタムプロパティ",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "エックス アクシス",
+    "y_axis": "ワイ アクシス",
+    "metric": "メトリック"
+  },
+  "form": {
+    "title": {
+      "required": "タイトルは必須です",
+      "max_length": "タイトルは{length}文字未満である必要があります"
+    }
+  },
+  "entity": {
+    "grouping_title": "{entity}のグループ化",
+    "priority": "{entity}の優先度",
+    "all": "すべての{entity}",
+    "drop_here_to_move": "ここにドロップして{entity}を移動",
+    "delete": {
+      "label": "{entity}を削除",
+      "success": "{entity}を削除しました",
+      "failed": "{entity}の削除に失敗しました"
+    },
+    "update": {
+      "failed": "{entity}の更新に失敗しました",
+      "success": "{entity}を更新しました"
+    },
+    "link_copied_to_clipboard": "{entity}のリンクをクリップボードにコピーしました",
+    "fetch": {
+      "failed": "{entity}の取得中にエラーが発生しました"
+    },
+    "add": {
+      "success": "{entity}を追加しました",
+      "failed": "{entity}の追加中にエラーが発生しました"
+    },
+    "remove": {
+      "success": "{entity}を削除しました",
+      "failed": "{entity}の削除中にエラーが発生しました"
+    }
+  },
+  "attachment": {
+    "error": "ファイルを添付できませんでした。もう一度アップロードしてください。",
+    "only_one_file_allowed": "一度にアップロードできるファイルは1つだけです。",
+    "file_size_limit": "ファイルサイズは{size}MB以下である必要があります。",
+    "drag_and_drop": "どこにでもドラッグ＆ドロップでアップロード",
+    "delete": "添付ファイルを削除"
+  },
+  "label": {
+    "select": "ラベルを選択",
+    "create": {
+      "success": "ラベルを作成しました",
+      "failed": "ラベルの作成に失敗しました",
+      "already_exists": "ラベルは既に存在します",
+      "type": "新しいラベルを追加するには入力してください"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {ビュー} other {ビュー}}",
+    "create": {
+      "label": "ビューを作成"
+    },
+    "update": {
+      "label": "ビューを更新"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "ゲスト",
+      "description": "組織の外部メンバーをゲストとして招待できます。"
+    },
+    "member": {
+      "title": "メンバー",
+      "description": "プロジェクト、サイクル、モジュール内のエンティティの読み取り、書き込み、編集、削除が可能"
+    },
+    "admin": {
+      "title": "管理者",
+      "description": "ワークスペース内のすべての権限が有効。"
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "プロダクト/プロジェクトマネージャー",
+    "development_or_engineering": "開発/エンジニアリング",
+    "founder_or_executive": "創業者/エグゼクティブ",
+    "freelancer_or_consultant": "フリーランス/コンサルタント",
+    "marketing_or_growth": "マーケティング/グロース",
+    "sales_or_business_development": "営業/ビジネス開発",
+    "support_or_operations": "サポート/オペレーション",
+    "student_or_professor": "学生/教授",
+    "human_resources": "人事",
+    "other": "その他"
+  },
+  "default_global_view": {
+    "all_issues": "すべての作業項目",
+    "assigned": "割り当て済み",
+    "created": "作成済み",
+    "subscribed": "購読中"
+  },
+  "description_versions": {
+    "last_edited_by": "最終編集者",
+    "previously_edited_by": "以前の編集者",
+    "edited_by": "編集者"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Planeが起動しませんでした。これは1つまたは複数のPlaneサービスの起動に失敗したことが原因である可能性があります。",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "setup.shとDockerログからView Logsを選択して確認してください。"
+  },
+  "customize_navigation": "ナビゲーションをカスタマイズ",
+  "personal": "個人",
+  "accordion_navigation_control": "アコーディオン形式のサイドバーナビゲーション",
+  "horizontal_navigation_bar": "タブ形式のナビゲーション",
+  "show_limited_projects_on_sidebar": "サイドバーに表示するプロジェクトを制限",
+  "enter_number_of_projects": "プロジェクト数を入力",
+  "pin": "ピン留め",
+  "unpin": "ピン留めを解除",
+  "workspace_dashboards": "ダッシュボード",
+  "pi_chat": "AIチャット",
+  "in_app": "アプリ内",
+  "forms": "フォーム",
+  "milestones": "マイルストーン",
+  "milestones_description": "マイルストーンは、共通の完了日に向けて作業項目を揃えるためのレイヤーを提供します。",
+  "file_upload": {
+    "upload_text": "クリックしてファイルをアップロード",
+    "drag_drop_text": "ドラッグ＆ドロップ",
+    "processing": "処理中",
+    "invalid_file_type": "無効なファイル形式",
+    "missing_fields": "必須フィールドが不足しています",
+    "success": "{fileName}がアップロードされました！"
+  },
+  "date": "日付",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "作業項目をCSVファイルにエクスポートします。",
+      "short_description": "CSVとしてエクスポート"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "作業項目をExcelファイルにエクスポートします。",
+      "short_description": "Excelとしてエクスポート"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "作業項目をExcelファイルにエクスポートします。",
+      "short_description": "Excelとしてエクスポート"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "作業項目をJSONファイルにエクスポートします。",
+      "short_description": "JSONとしてエクスポート"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/cycle.json b/packages/i18n/src/locales/ja/cycle.json
new file mode 100644
index 0000000..34b99d7
--- /dev/null
+++ b/packages/i18n/src/locales/ja/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "サイクルの進捗を表示するには作業項目を追加してください"
+      },
+      "chart": {
+        "title": "バーンダウンチャートを表示するには作業項目を追加してください。"
+      },
+      "priority_issue": {
+        "title": "サイクルで取り組まれている優先度の高い作業項目を一目で確認できます。"
+      },
+      "assignee": {
+        "title": "担当者別の作業の内訳を確認するには、作業項目に担当者を追加してください。"
+      },
+      "label": {
+        "title": "ラベル別の作業の内訳を確認するには、作業項目にラベルを追加してください。"
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {サイクル} other {サイクル}}",
+    "no_cycle": "サイクルなし"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "サイクルの進捗を表示するには作業項目を追加してください"
+      },
+      "priority": {
+        "title": "サイクル内で取り組まれた高優先度の作業項目を\n一目で確認できます。"
+      },
+      "assignee": {
+        "title": "作業項目に担当者を追加して、\n担当者別の作業内訳を確認できます。"
+      },
+      "label": {
+        "title": "作業項目にラベルを追加して、\nラベル別の作業内訳を確認できます。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/editor.json b/packages/i18n/src/locales/ja/editor.json
new file mode 100644
index 0000000..2229165
--- /dev/null
+++ b/packages/i18n/src/locales/ja/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "外部ファイルをアップロードするにはドラッグ&ドロップしてください"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "ファイルが大きすぎます。",
+        "description": "ファイルあたりの最大サイズは {maxFileSize} MB です"
+      },
+      "unsupported_file_type": {
+        "title": "サポートされていないファイル形式です。",
+        "description": "サポートされている形式を確認"
+      },
+      "default": {
+        "title": "アップロードに失敗しました。",
+        "description": "問題が発生しました。もう一度お試しください。"
+      }
+    },
+    "upgrade": {
+      "description": "この添付ファイルを表示するにはプランをアップグレードしてください。"
+    },
+    "aria": {
+      "click_to_upload": "クリックして添付ファイルをアップロード"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "埋め込みに変換",
+      "convert_to_link": "リンクに変換",
+      "convert_to_richcard": "リッチカードに変換"
+    },
+    "placeholder": {
+      "insert_embed": "YouTubeビデオ、Figmaデザインなど、お好みの埋め込みリンクをここに挿入してください",
+      "link": "リンクを入力または貼り付け"
+    },
+    "input_modal": {
+      "embed": "埋め込み",
+      "works_with_links": "YouTube、Figma、Google Docsなどで動作します"
+    },
+    "error": {
+      "not_valid_link": "有効なURLを入力してください。"
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "このブロックの内容を説明してください",
+      "generated_here": "ここにAIコンテンツが生成されます"
+    },
+    "block_types": {
+      "placeholder": "ブロックタイプを選択",
+      "summarize_page": "ページを要約",
+      "custom_prompt": "カスタムプロンプト"
+    },
+    "actions": {
+      "discard": "破棄",
+      "generate": "生成",
+      "generating": "生成中",
+      "rewriting": "書き換え中",
+      "rewrite": "書き換え",
+      "use_this": "これを使用",
+      "refine": "改良"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/empty-state.json b/packages/i18n/src/locales/ja/empty-state.json
new file mode 100644
index 0000000..eb3b067
--- /dev/null
+++ b/packages/i18n/src/locales/ja/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "表示する進捗メトリクスがまだありません。",
+      "description": "作業項目にプロパティ値を設定して、ここに進捗メトリクスを表示します。"
+    },
+    "updates": {
+      "title": "更新はまだありません。",
+      "description": "プロジェクトメンバーが更新を追加すると、ここに表示されます"
+    },
+    "search": {
+      "title": "一致する結果が見つかりません。",
+      "description": "結果が見つかりませんでした。検索条件を調整してください。"
+    },
+    "not_found": {
+      "title": "おっと!何か問題があるようです",
+      "description": "現在、Planeアカウントを取得できません。ネットワークエラーの可能性があります。",
+      "cta_primary": "再読み込みを試す"
+    },
+    "server_error": {
+      "title": "サーバーエラー",
+      "description": "サーバーに接続してデータを取得できません。ご心配なく、対応中です。",
+      "cta_primary": "再読み込みを試す"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "このプロジェクトへのアクセス権がないようです",
+      "restricted_description": "管理者に連絡してアクセス権をリクエストすると、ここで作業を続けられます。",
+      "join_description": "下のボタンをクリックして参加してください。",
+      "cta_primary": "プロジェクトに参加",
+      "cta_loading": "プロジェクトに参加中"
+    },
+    "invalid_project": {
+      "title": "プロジェクトが見つかりません",
+      "description": "お探しのプロジェクトは存在しません。"
+    },
+    "work_items": {
+      "title": "最初の作業項目から始めましょう。",
+      "description": "作業項目はプロジェクトの構成要素です — 担当者の割り当て、優先度の設定、進捗の追跡が簡単に行えます。",
+      "cta_primary": "最初の作業項目を作成"
+    },
+    "cycles": {
+      "title": "サイクルで作業をグループ化してタイムボックス化します。",
+      "description": "作業をタイムボックスで区切り、プロジェクトの締め切りから逆算して日付を設定し、チームとして具体的な進捗を達成します。",
+      "cta_primary": "最初のサイクルを設定"
+    },
+    "cycle_work_items": {
+      "title": "このサイクルに表示する作業項目はありません",
+      "description": "作業項目を作成して、このサイクルでチームの進捗を監視し、目標を時間内に達成しましょう。",
+      "cta_primary": "作業項目を作成",
+      "cta_secondary": "既存の作業項目を追加"
+    },
+    "modules": {
+      "title": "プロジェクトの目標をモジュールにマッピングして簡単に追跡します。",
+      "description": "モジュールは相互接続された作業項目で構成されています。プロジェクトフェーズを通じた進捗の監視を支援し、それぞれに特定の締め切りと分析があり、それらのフェーズをどれだけ達成に近づいているかを示します。",
+      "cta_primary": "最初のモジュールを設定"
+    },
+    "module_work_items": {
+      "title": "このモジュールに表示する作業項目はありません",
+      "description": "作業項目を作成して、このモジュールの監視を開始します。",
+      "cta_primary": "作業項目を作成",
+      "cta_secondary": "既存の作業項目を追加"
+    },
+    "views": {
+      "title": "プロジェクトのカスタムビューを保存",
+      "description": "ビューは保存されたフィルターで、最も頻繁に使用する情報に素早くアクセスできます。チームメイトがビューを共有し、それぞれのニーズに合わせて調整することで、簡単に協力できます。",
+      "cta_primary": "ビューを作成"
+    },
+    "no_work_items_in_project": {
+      "title": "プロジェクトにはまだ作業項目がありません",
+      "description": "プロジェクトに作業項目を追加し、ビューを使用して作業を追跡可能な部分に分割します。",
+      "cta_primary": "作業項目を追加"
+    },
+    "work_item_filter": {
+      "title": "作業項目が見つかりません",
+      "description": "現在のフィルターでは結果が返されませんでした。フィルターを変更してみてください。",
+      "cta_primary": "作業項目を追加"
+    },
+    "pages": {
+      "title": "メモからPRDまで、すべてを文書化",
+      "description": "ページを使用すると、情報を1か所でキャプチャして整理できます。会議のメモ、プロジェクトドキュメント、PRDを作成し、作業項目を埋め込み、すぐに使えるコンポーネントで構造化します。",
+      "cta_primary": "最初のページを作成"
+    },
+    "archive_pages": {
+      "title": "アーカイブされたページはまだありません",
+      "description": "注目していないページをアーカイブします。必要に応じてここでアクセスできます。"
+    },
+    "intake_sidebar": {
+      "title": "インテークリクエストを記録",
+      "description": "新しいリクエストを送信して、プロジェクトのワークフロー内でレビュー、優先順位付け、追跡を行います。",
+      "cta_primary": "インテークリクエストを作成"
+    },
+    "intake_main": {
+      "title": "インテーク作業項目を選択して詳細を表示"
+    },
+    "epics": {
+      "title": "複雑なプロジェクトを構造化されたエピックに変換します。",
+      "description": "エピックは、大きな目標を小さく追跡可能なタスクに整理するのに役立ちます。",
+      "cta_primary": "エピックを作成",
+      "cta_secondary": "ドキュメント"
+    },
+    "epic_work_items": {
+      "title": "このエピックにはまだ作業項目が追加されていません。",
+      "description": "このエピックにいくつかの作業項目を追加して、ここで追跡を開始します。",
+      "cta_secondary": "作業項目を追加"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "アーカイブされたエピックはまだありません",
+      "description": "完了またはキャンセルされたエピックをアーカイブできます。アーカイブされると、ここで見つけられます。"
+    },
+    "archive_work_items": {
+      "title": "アーカイブされた作業項目はまだありません",
+      "description": "手動または自動化により、完了またはキャンセルされた作業項目をアーカイブできます。アーカイブされると、ここで見つけられます。",
+      "cta_primary": "自動化を設定"
+    },
+    "archive_cycles": {
+      "title": "アーカイブされたサイクルはまだありません",
+      "description": "プロジェクトを整理するために、完了したサイクルをアーカイブします。アーカイブされると、ここで見つけられます。"
+    },
+    "archive_modules": {
+      "title": "アーカイブされたモジュールはまだありません",
+      "description": "プロジェクトを整理するために、完了またはキャンセルされたモジュールをアーカイブします。アーカイブされると、ここで見つけられます。"
+    },
+    "home_widget_quick_links": {
+      "title": "作業に重要な参照、リソース、またはドキュメントを手元に保管"
+    },
+    "inbox_sidebar_all": {
+      "title": "購読している作業項目の更新がここに表示されます"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "作業項目でのメンションがここに表示されます"
+    },
+    "your_work_by_priority": {
+      "title": "割り当てられた作業項目はまだありません"
+    },
+    "your_work_by_state": {
+      "title": "割り当てられた作業項目はまだありません"
+    },
+    "views": {
+      "title": "ビューはまだありません",
+      "description": "プロジェクトに作業項目を追加し、ビューを使用してフィルター、ソート、進捗の監視を簡単に行います。",
+      "cta_primary": "作業項目を追加"
+    },
+    "drafts": {
+      "title": "途中の作業項目",
+      "description": "これを試すには、作業項目の追加を開始して途中で離れるか、以下で最初の下書きを作成してください。😉",
+      "cta_primary": "下書き作業項目を作成"
+    },
+    "projects_archived": {
+      "title": "アーカイブされたプロジェクトはありません",
+      "description": "すべてのプロジェクトがまだアクティブです — 素晴らしい!"
+    },
+    "analytics_projects": {
+      "title": "プロジェクトを作成して、ここでプロジェクトメトリクスを視覚化します。"
+    },
+    "analytics_work_items": {
+      "title": "作業項目と担当者を含むプロジェクトを作成して、パフォーマンス、進捗、チームの影響をここで追跡開始します。"
+    },
+    "analytics_no_cycle": {
+      "title": "サイクルを作成して、作業を期限付きフェーズに整理し、スプリント全体の進捗を追跡します。"
+    },
+    "analytics_no_module": {
+      "title": "モジュールを作成して、作業を整理し、さまざまな段階での進捗を追跡します。"
+    },
+    "analytics_no_intake": {
+      "title": "インテークを設定して、受信リクエストを管理し、承認と拒否を追跡します"
+    },
+    "home_widget_stickies": {
+      "title": "アイデアをメモしたり、ひらめきを記録したり、思考を記録します。付箋を追加して始めましょう。"
+    },
+    "stickies": {
+      "title": "アイデアを即座にキャプチャ",
+      "description": "クイックノートやToDoのために付箋を作成し、どこへでも持ち歩きましょう。",
+      "cta_primary": "最初の付箋を作成",
+      "cta_secondary": "ドキュメント"
+    },
+    "active_cycles": {
+      "title": "アクティブなサイクルはありません",
+      "description": "現在進行中のサイクルはありません。今日の日付を含むサイクルがここに表示されます。"
+    },
+    "dashboard": {
+      "title": "ダッシュボードで進捗を視覚化",
+      "description": "カスタマイズ可能なダッシュボードを構築して、メトリクスを追跡し、成果を測定し、インサイトを効果的に提示します。",
+      "cta_primary": "新しいダッシュボードを作成"
+    },
+    "wiki": {
+      "title": "メモ、ドキュメント、または完全なナレッジベースを作成します。",
+      "description": "ページはPlaneでの思考スポッティングスペースです。会議のメモを取り、簡単にフォーマットし、作業項目を埋め込み、コンポーネントのライブラリを使用してレイアウトし、すべてをプロジェクトのコンテキストで保管します。",
+      "cta_primary": "ページを作成"
+    },
+    "project_overview_state_sidebar": {
+      "title": "プロジェクトの状態を有効化",
+      "description": "プロジェクトの状態を有効にして、状態、優先度、期日などのプロパティを表示および管理します。"
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "まだ見積もりはありません",
+      "description": "チームが労力をどのように測定するかを定義し、すべての作業項目で一貫して追跡します。",
+      "cta_primary": "見積もりシステムを追加"
+    },
+    "labels": {
+      "title": "まだラベルはありません",
+      "description": "作業項目を効果的に分類および管理するためのパーソナライズされたラベルを作成します。",
+      "cta_primary": "最初のラベルを作成"
+    },
+    "exports": {
+      "title": "まだエクスポートはありません",
+      "description": "現在、エクスポート記録はありません。データをエクスポートすると、すべての記録がここに表示されます。"
+    },
+    "tokens": {
+      "title": "まだ個人トークンはありません",
+      "description": "ワークスペースを外部システムおよびアプリケーションと接続するための安全なAPIトークンを生成します。",
+      "cta_primary": "APIトークンを追加"
+    },
+    "workspace_tokens": {
+      "title": "まだAPIトークンはありません",
+      "description": "ワークスペースを外部システムおよびアプリケーションと接続するための安全なAPIトークンを生成します。",
+      "cta_primary": "APIトークンを追加"
+    },
+    "webhooks": {
+      "title": "まだWebhookが追加されていません",
+      "description": "プロジェクトイベントが発生したときに外部サービスへの通知を自動化します。",
+      "cta_primary": "Webhookを追加"
+    },
+    "work_item_types": {
+      "title": "作業項目タイプを作成してカスタマイズ",
+      "description": "プロジェクト用の固有の作業項目タイプを定義します。各タイプには、プロジェクトとチームのニーズに合わせた独自のプロパティ、ワークフロー、フィールドを設定できます。",
+      "cta_primary": "有効化"
+    },
+    "work_item_type_properties": {
+      "title": "この作業項目タイプに対してキャプチャするプロパティと詳細を定義します。プロジェクトのワークフローに合わせてカスタマイズします。",
+      "cta_secondary": "プロパティを追加"
+    },
+    "templates": {
+      "title": "まだテンプレートはありません",
+      "description": "作業項目とページのテンプレートを作成してセットアップ時間を短縮し、数秒で新しい作業を開始します。",
+      "cta_primary": "最初のテンプレートを作成"
+    },
+    "recurring_work_items": {
+      "title": "まだ定期的な作業項目はありません",
+      "description": "定期的な作業項目を設定して、繰り返しタスクを自動化し、簡単にスケジュール通りに進めます。",
+      "cta_primary": "定期的な作業項目を作成"
+    },
+    "worklogs": {
+      "title": "すべてのメンバーのタイムシートを追跡",
+      "description": "作業項目に時間を記録して、プロジェクト全体の任意のチームメンバーの詳細なタイムシートを表示します。"
+    },
+    "group_syncing": {
+      "title": "グループマッピングはまだありません"
+    },
+    "template_setting": {
+      "title": "まだテンプレートはありません",
+      "description": "プロジェクト、作業項目、ページのテンプレートを作成してセットアップ時間を短縮し、数秒で新しい作業を開始します。",
+      "cta_primary": "テンプレートを作成"
+    },
+    "workflows": {
+      "title": "ワークフローはまだありません",
+      "description": "作業項目の進捗を管理するためのワークフローを作成します。",
+      "cta_primary": "新しいワークフローを追加",
+      "states": {
+        "title": "ステータスを追加",
+        "description": "作業項目が進行するステータスを選択します。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/home.json b/packages/i18n/src/locales/ja/home.json
new file mode 100644
index 0000000..a4551b3
--- /dev/null
+++ b/packages/i18n/src/locales/ja/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "クイックスタートガイド",
+      "not_right_now": "今はしない",
+      "create_project": {
+        "title": "プロジェクトを作成",
+        "description": "Planeのほとんどはプロジェクトから始まります。",
+        "cta": "始める"
+      },
+      "invite_team": {
+        "title": "チームを招待",
+        "description": "同僚と一緒に構築、デプロイ、管理しましょう。",
+        "cta": "招待する"
+      },
+      "configure_workspace": {
+        "title": "ワークスペースを設定する。",
+        "description": "機能のオン/オフを切り替えたり、さらに詳細な設定を行ったりできます。",
+        "cta": "このワークスペースを設定"
+      },
+      "personalize_account": {
+        "title": "Planeをあなた好みにカスタマイズ。",
+        "description": "プロフィール画像、カラー、その他の設定を選択してください。",
+        "cta": "今すぐパーソナライズ"
+      },
+      "widgets": {
+        "title": "ウィジェットがないと静かですね、オンにしましょう",
+        "description": "すべてのウィジェットがオフになっているようです。体験を向上させるために\n今すぐ有効にしましょう！",
+        "primary_button": {
+          "text": "ウィジェットを管理"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "手元に置いておきたい作業関連のリンクを保存してください。",
+      "add": "クイックリンクを追加",
+      "title": "クイックリンク",
+      "title_plural": "クイックリンク"
+    },
+    "recents": {
+      "title": "最近",
+      "empty": {
+        "project": "プロジェクトを訪問すると、最近のプロジェクトがここに表示されます。",
+        "page": "ページを訪問すると、最近のページがここに表示されます。",
+        "issue": "作業項目を訪問すると、最近の作業項目がここに表示されます。",
+        "default": "まだ最近の項目がありません。"
+      },
+      "filters": {
+        "all": "すべて",
+        "projects": "プロジェクト",
+        "pages": "ページ",
+        "issues": "作業項目"
+      }
+    },
+    "new_at_plane": {
+      "title": "Planeの新機能"
+    },
+    "quick_tutorial": {
+      "title": "クイックチュートリアル"
+    },
+    "widget": {
+      "reordered_successfully": "ウィジェットの並び替えが完了しました。",
+      "reordering_failed": "ウィジェットの並び替え中にエラーが発生しました。"
+    },
+    "manage_widgets": "ウィジェットを管理",
+    "title": "ホーム",
+    "star_us_on_github": "GitHubでスターをつける",
+    "business_trial_banner": {
+      "title": "14日間のBusinessプラントライアルが開始されました！",
+      "description": "すべてのBusiness機能をお試しください。準備ができたら、サブスクリプションをお選びください。自動的に請求されることはありません。",
+      "trial_ends_today": "トライアルは本日終了",
+      "trial_ends_in_days": "トライアル終了まであと{days}日",
+      "start_subscription": "サブスクリプションを開始",
+      "explore_business_features": "Business機能を探索"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/inbox.json b/packages/i18n/src/locales/ja/inbox.json
new file mode 100644
index 0000000..e210571
--- /dev/null
+++ b/packages/i18n/src/locales/ja/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "保留中",
+        "description": "保留中"
+      },
+      "declined": {
+        "title": "却下",
+        "description": "却下"
+      },
+      "snoozed": {
+        "title": "スヌーズ",
+        "description": "残り{days, plural, one{# 日} other{# 日}}"
+      },
+      "accepted": {
+        "title": "承認済み",
+        "description": "承認済み"
+      },
+      "duplicate": {
+        "title": "重複",
+        "description": "重複"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "作業項目を却下",
+        "content": "作業項目{value}を却下してもよろしいですか？"
+      },
+      "delete": {
+        "title": "作業項目を削除",
+        "content": "作業項目{value}を削除してもよろしいですか？",
+        "success": "作業項目を削除しました"
+      }
+    },
+    "errors": {
+      "snooze_permission": "プロジェクト管理者のみが作業項目をスヌーズ/スヌーズ解除できます",
+      "accept_permission": "プロジェクト管理者のみが作業項目を承認できます",
+      "decline_permission": "プロジェクト管理者のみが作業項目を却下できます"
+    },
+    "actions": {
+      "accept": "承認",
+      "decline": "却下",
+      "snooze": "スヌーズ",
+      "unsnooze": "スヌーズ解除",
+      "copy": "作業項目のリンクをコピー",
+      "delete": "削除",
+      "open": "作業項目を開く",
+      "mark_as_duplicate": "重複としてマーク",
+      "move": "{value}をプロジェクトの作業項目に移動"
+    },
+    "source": {
+      "in-app": "アプリ内"
+    },
+    "order_by": {
+      "created_at": "作成日",
+      "updated_at": "更新日",
+      "id": "ID"
+    },
+    "label": "インテーク",
+    "page_label": "{workspace} - インテーク",
+    "modal": {
+      "title": "インテーク作業項目を作成"
+    },
+    "tabs": {
+      "open": "オープン",
+      "closed": "クローズ"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "オープンな作業項目がありません",
+        "description": "オープンな作業項目はここで見つかります。新しい作業項目を作成してください。"
+      },
+      "sidebar_closed_tab": {
+        "title": "クローズされた作業項目がありません",
+        "description": "承認または却下されたすべての作業項目はここで見つかります。"
+      },
+      "sidebar_filter": {
+        "title": "一致する作業項目がありません",
+        "description": "インテークに適用されたフィルターに一致する作業項目がありません。新しい作業項目を作成してください。"
+      },
+      "detail": {
+        "title": "詳細を表示する作業項目を選択してください。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/integration.json b/packages/i18n/src/locales/ja/integration.json
new file mode 100644
index 0000000..e238e33
--- /dev/null
+++ b/packages/i18n/src/locales/ja/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "インテグレーション",
+    "loading": "読み込み中",
+    "unauthorized": "このページを表示する権限がありません。",
+    "configure": "設定",
+    "not_enabled": "{name}はこのワークスペースで有効になっていません。",
+    "not_configured": "未設定",
+    "disconnect_personal_account": "個人{providerName}アカウントを切断",
+    "not_configured_message_admin": "{name}インテグレーションが設定されていません。インスタンス管理者に設定を依頼してください。",
+    "not_configured_message_support": "{name}インテグレーションが設定されていません。サポートに設定を依頼してください。",
+    "external_api_unreachable": "外部APIにアクセスできません。後でもう一度お試しください。",
+    "error_fetching_supported_integrations": "サポートされているインテグレーションを取得できません。後でもう一度お試しください。",
+    "back_to_integrations": "インテグレーションに戻る",
+    "select_state": "状態を選択",
+    "set_state": "状態を設定",
+    "choose_project": "プロジェクトを選択...",
+    "skip_backward_state_movement": "PRの更新により課題が以前の状態に戻ることを防ぐ"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "GitHubの作業項目をPlaneと連携・同期します。",
+    "connect_org": "Connect Organization",
+    "connect_org_description": "GitHub組織をPlaneと連携します。",
+    "processing": "処理中",
+    "org_added_desc": "GitHub orgが追加された時間",
+    "connection_fetch_error": "サーバーから接続詳細の取得に失敗しました",
+    "personal_account_connected": "個人アカウントが接続されました",
+    "personal_account_connected_description": "あなたのGitHubアカウントがPlaneに接続されました",
+    "connect_personal_account": "個人アカウントを接続",
+    "connect_personal_account_description": "個人GitHubアカウントをPlaneと連携します。",
+    "repo_mapping": "リポジトリマッピング",
+    "repo_mapping_description": "GitHubリポジトリをPlaneプロジェクトにマッピングします。",
+    "project_issue_sync": "プロジェクトIssue同期",
+    "project_issue_sync_description": "GitHubからPlaneプロジェクトへIssueを同期します。",
+    "project_issue_sync_empty_state": "マッピングされたプロジェクトIssue同期がここに表示されます",
+    "configure_project_issue_sync_state": "Issue同期状態を設定",
+    "select_issue_sync_direction": "Issue同期方向を選択",
+    "allow_bidirectional_sync": "双方向 - GitHubとPlaneの両方からIssueとコメントを同期",
+    "allow_unidirectional_sync": "単方向 - GitHubからPlaneへのIssueとコメントの同期のみ",
+    "allow_unidirectional_sync_warning": "GitHub Issueのデータが、リンクされたPlaneワークアイテムのデータを置き換えます（GitHub → Planeのみ）",
+    "remove_project_issue_sync": "プロジェクトIssue同期を削除",
+    "remove_project_issue_sync_confirmation": "このプロジェクトIssue同期を削除してもよろしいですか？",
+    "add_pr_state_mapping": "Planeプロジェクトのプルリクエスト状態マッピングを追加",
+    "edit_pr_state_mapping": "Planeプロジェクトのプルリクエスト状態マッピングを編集",
+    "pr_state_mapping": "プルリクエスト状態マッピング",
+    "pr_state_mapping_description": "GitHubからPlaneプロジェクトへのプルリクエスト状態マッピングを設定",
+    "pr_state_mapping_empty_state": "マッピングされたPR状態がここに表示されます",
+    "remove_pr_state_mapping": "プルリクエスト状態マッピングを削除",
+    "remove_pr_state_mapping_confirmation": "このプルリクエスト状態マッピングを削除してもよろしいですか？",
+    "issue_sync_message": "作業項目が{project}に同期されました",
+    "link": "GitHubリポジトリをPlaneプロジェクトにリンク",
+    "pull_request_automation": "プルリクエスト自動化",
+    "pull_request_automation_description": "GitHubからPlaneプロジェクトへのプルリクエスト状態マッピングを設定",
+    "DRAFT_MR_OPENED": "下書きMRがオープンされたとき、状態を次に設定",
+    "MR_OPENED": "MRがオープンされたとき、状態を次に設定",
+    "MR_READY_FOR_MERGE": "マージ準備完了",
+    "MR_REVIEW_REQUESTED": "レビュー要求",
+    "MR_MERGED": "マージされた",
+    "MR_CLOSED": "クローズ",
+    "ISSUE_OPEN": "Issueオープン",
+    "ISSUE_CLOSED": "Issueクローズ",
+    "save": "保存",
+    "start_sync": "同期を開始",
+    "choose_repository": "リポジトリを選択..."
+  },
+  "gitlab_integration": {
+    "name": "GitLab",
+    "description": "GitLabのマージリクエストをPlaneと連携・同期します。",
+    "connection_fetch_error": "サーバーから接続詳細の取得に失敗しました",
+    "connect_org": "組織を接続",
+    "connect_org_description": "GitLab組織をPlaneと接続します。",
+    "project_connections": "GitLabプロジェクト接続",
+    "project_connections_description": "GitLabからPlaneプロジェクトへマージリクエストを同期します。",
+    "plane_project_connection": "Planeプロジェクト接続",
+    "plane_project_connection_description": "GitLabからPlaneプロジェクトへのプルリクエスト状態マッピングを設定",
+    "remove_connection": "接続を削除",
+    "remove_connection_confirmation": "この接続を削除してもよろしいですか？",
+    "link": "GitLabリポジトリをPlaneプロジェクトにリンク",
+    "pull_request_automation": "プルリクエスト自動化",
+    "pull_request_automation_description": "GitLabからPlaneへのプルリクエスト状態マッピングを設定",
+    "DRAFT_MR_OPENED": "下書きMRがオープンされたとき、状態を次に設定",
+    "MR_OPENED": "MRがオープンされたとき、状態を次に設定",
+    "MR_REVIEW_REQUESTED": "MRのレビューが要求されたとき、状態を次に設定",
+    "MR_READY_FOR_MERGE": "MRがマージ準備完了のとき、状態を次に設定",
+    "MR_MERGED": "MRがマージされたとき、状態を次に設定",
+    "MR_CLOSED": "MRがクローズされたとき、状態を次に設定",
+    "integration_enabled_text": "GitLabインテグレーションを有効にすると、作業項目のワークフローを自動化できます",
+    "choose_entity": "エンティティを選択",
+    "choose_project": "プロジェクトを選択",
+    "link_plane_project": "Planeプロジェクトをリンク",
+    "project_issue_sync": "プロジェクト課題同期",
+    "project_issue_sync_description": "GitlabからPlaneプロジェクトに課題を同期します",
+    "project_issue_sync_empty_state": "マッピングされたプロジェクト課題同期がここに表示されます",
+    "configure_project_issue_sync_state": "課題同期状態を設定",
+    "select_issue_sync_direction": "課題同期の方向を選択",
+    "allow_bidirectional_sync": "双方向 - GitlabとPlane間で課題とコメントを双方向に同期",
+    "allow_unidirectional_sync": "一方向 - GitlabからPlaneへのみ課題とコメントを同期",
+    "allow_unidirectional_sync_warning": "Gitlab Issueのデータがリンクされた Plane ワークアイテムのデータを置き換えます（Gitlab → Planeのみ）",
+    "remove_project_issue_sync": "このプロジェクト課題同期を削除",
+    "remove_project_issue_sync_confirmation": "このプロジェクト課題同期を削除してもよろしいですか？",
+    "ISSUE_OPEN": "課題オープン",
+    "ISSUE_CLOSED": "課題クローズ",
+    "save": "保存",
+    "start_sync": "同期開始",
+    "choose_repository": "リポジトリを選択..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Gitlab EnterpriseインスタンスをPlaneと接続・同期します。",
+    "app_form_title": "Gitlab Enterprise設定",
+    "app_form_description": "Gitlab EnterpriseをPlaneに接続するよう設定します。",
+    "base_url_title": "ベースURL",
+    "base_url_description": "Gitlab EnterpriseインスタンスのベースURL。",
+    "base_url_placeholder": "例：\"https://glab.plane.town\"",
+    "base_url_error": "ベースURLは必須です",
+    "invalid_base_url_error": "無効なベースURL",
+    "client_id_title": "アプリID",
+    "client_id_description": "Gitlab Enterpriseインスタンスで作成したアプリのID。",
+    "client_id_placeholder": "例：\"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "アプリIDは必須です",
+    "client_secret_title": "クライアントシークレット",
+    "client_secret_description": "Gitlab Enterpriseインスタンスで作成したアプリのクライアントシークレット。",
+    "client_secret_placeholder": "例：\"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "クライアントシークレットは必須です",
+    "webhook_secret_title": "Webhookシークレット",
+    "webhook_secret_description": "Gitlab EnterpriseインスタンスからのWebhookを検証するために使用されるランダムなWebhookシークレット。",
+    "webhook_secret_placeholder": "例：\"webhook1234567890\"",
+    "webhook_secret_error": "Webhookシークレットは必須です",
+    "connect_app": "アプリを接続"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "SlackワークスペースをPlaneと接続します。",
+    "connect_personal_account": "個人Slackアカウントを接続します。",
+    "personal_account_connected": "あなたの個人{providerName}アカウントがPlaneに接続されました。",
+    "link_personal_account": "あなたの個人{providerName}アカウントをPlaneにリンクします。",
+    "connected_slack_workspaces": "接続済みSlackワークスペース",
+    "connected_on": "{date}に接続",
+    "disconnect_workspace": "{name}ワークスペースを切断",
+    "alerts": {
+      "dm_alerts": {
+        "title": "重要な更新、リマインダー、あなた専用のアラートについて、SlackのDMで通知を受け取ります。"
+      }
+    },
+    "project_updates": {
+      "title": "プロジェクトアップデート",
+      "description": "プロジェクトのアップデート通知を設定します",
+      "add_new_project_update": "新しいプロジェクトアップデート通知を追加",
+      "project_updates_empty_state": "Slackチャンネルに接続されたプロジェクトがここに表示されます。",
+      "project_updates_form": {
+        "title": "プロジェクトアップデートを設定",
+        "description": "作業項目が作成されたときにSlackでプロジェクトアップデート通知を受け取る",
+        "failed_to_load_channels": "Slackからチャンネルを読み込めませんでした",
+        "project_dropdown": {
+          "placeholder": "プロジェクトを選択",
+          "label": "Planeプロジェクト",
+          "no_projects": "利用可能なプロジェクトがありません"
+        },
+        "channel_dropdown": {
+          "label": "Slackチャンネル",
+          "placeholder": "チャンネルを選択",
+          "no_channels": "利用可能なチャンネルがありません"
+        },
+        "all_projects_connected": "すべてのプロジェクトはすでにSlackチャンネルに接続されています。",
+        "all_channels_connected": "すべてのSlackチャンネルはすでにプロジェクトに接続されています。",
+        "project_connection_success": "プロジェクト接続が正常に作成されました",
+        "project_connection_updated": "プロジェクト接続が正常に更新されました",
+        "project_connection_deleted": "プロジェクト接続が正常に削除されました",
+        "failed_delete_project_connection": "プロジェクト接続の削除に失敗しました",
+        "failed_create_project_connection": "プロジェクト接続の作成に失敗しました",
+        "failed_upserting_project_connection": "プロジェクト接続の更新に失敗しました",
+        "failed_loading_project_connections": "プロジェクト接続を読み込めませんでした。ネットワークの問題または統合の問題が原因かもしれません。"
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "SentryワークスペースをPlaneに接続します。",
+    "connected_sentry_workspaces": "接続されたSentryワークスペース",
+    "connected_on": "{date}に接続",
+    "disconnect_workspace": "{name}ワークスペースを切断",
+    "state_mapping": {
+      "title": "状態マッピング",
+      "description": "Sentryインシデントの状態をプロジェクトの状態にマッピングします。Sentryインシデントが解決されたり未解決の場合に使用する状態を設定します。",
+      "add_new_state_mapping": "新しい状態マッピングを追加",
+      "empty_state": "状態マッピングが設定されていません。Sentryインシデントの状態をプロジェクトの状態と同期するための最初のマッピングを作成してください。",
+      "failed_loading_state_mappings": "状態マッピングを読み込めませんでした。ネットワークの問題または統合の問題が原因である可能性があります。",
+      "loading_project_states": "プロジェクトの状態を読み込み中...",
+      "error_loading_states": "状態の読み込みエラー",
+      "no_states_available": "利用可能な状態がありません",
+      "no_permission_states": "このプロジェクトの状態にアクセスする権限がありません",
+      "states_not_found": "プロジェクトの状態が見つかりません",
+      "server_error_states": "状態の読み込み中にサーバーエラーが発生しました"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Bitbucket Data CenterのリポジトリをPlaneと連携・同期します。"
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "外部IdPトークンをAPI アクセス用に検証します。",
+    "header_description": "IdP（Azure AD、Oktaなど）から発行されたOIDC/JWTトークンをPlane APIアクセス用に検証します。",
+    "connected": "接続済み",
+    "connect": "接続",
+    "uninstall": "アンインストール",
+    "uninstalling": "アンインストール中...",
+    "install_success": "OAuth Bridgeが正常にインストールされました。",
+    "install_error": "OAuth Bridgeのインストールに失敗しました。",
+    "uninstall_success": "OAuth Bridgeがアンインストールされました。",
+    "uninstall_error": "OAuth Bridgeのアンインストールに失敗しました。",
+    "token_providers": "トークンプロバイダー",
+    "token_providers_description": "JWTがAPI資格情報として受け入れられる外部IdPを設定します。",
+    "add_provider": "プロバイダーを追加",
+    "edit_provider": "プロバイダーを編集",
+    "enabled": "有効",
+    "disabled": "無効",
+    "test": "テスト",
+    "no_providers_title": "プロバイダーが設定されていません。",
+    "no_providers_description": "外部トークン認証を有効にするにはIdPを追加してください。",
+    "provider_updated": "プロバイダーが更新されました。",
+    "provider_added": "プロバイダーが追加されました。",
+    "provider_save_error": "プロバイダーの保存に失敗しました。",
+    "provider_deleted": "プロバイダーが削除されました。",
+    "provider_delete_error": "プロバイダーの削除に失敗しました。",
+    "provider_update_error": "プロバイダーの更新に失敗しました。",
+    "jwks_reachable": "JWKS到達可能",
+    "jwks_unreachable": "JWKS到達不可",
+    "jwks_test_error": "設定されたURLからJWKSを取得できませんでした。",
+    "provider_form": {
+      "name_label": "名前",
+      "name_placeholder": "例: Azure AD Production",
+      "name_description": "このIDプロバイダーの表示名",
+      "name_required": "名前は必須です。",
+      "issuer_label": "発行者",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "JWTで期待されるissクレームの値",
+      "issuer_required": "発行者は必須です。",
+      "jwks_url_label": "JWKS URL",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "プロバイダーのJSON Web Key Setを提供するHTTPSエンドポイント",
+      "jwks_url_required": "JWKS URLは必須です。",
+      "jwks_url_https": "JWKS URLはHTTPSを使用する必要があります。",
+      "audience_label": "オーディエンス",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "JWTで期待されるaudクレーム（カンマ区切り）。",
+      "user_claims_label": "ユーザークレーム",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "ユーザーのメールアドレスを含むJWTクレーム",
+      "user_claims_required": "ユーザークレームは必須です。",
+      "allowed_algorithms_label": "許可された署名アルゴリズム",
+      "allowed_algorithms_description": "JWT署名検証に使用される非対称アルゴリズム",
+      "allowed_algorithms_required": "少なくとも1つのアルゴリズムが必要です。",
+      "select_algorithms": "アルゴリズムを選択",
+      "jwks_cache_ttl_label": "JWKSキャッシュTTL（秒）",
+      "jwks_cache_ttl_description": "プロバイダーのJWKSキーをキャッシュする期間（最小60秒、デフォルト24時間）",
+      "jwks_cache_ttl_min": "キャッシュTTLは60秒以上である必要があります。",
+      "rate_limit_label": "レート制限",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "リクエスト制限（例: 120/minute）。デフォルトのレート制限を使用する場合は空欄にしてください。",
+      "enable_provider": "このプロバイダーを有効にする",
+      "saving": "保存中...",
+      "update": "更新"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "GitHub Enterpriseの組織をPlaneと連携・同期します。",
+    "app_form_title": "GitHub Enterpriseの設定",
+    "app_form_description": "GitHub EnterpriseをPlaneと連携するための設定を行います。",
+    "app_id_title": "App ID",
+    "app_id_description": "GitHub Enterpriseの組織に作成したAppのIDです。",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App IDは必須です",
+    "app_name_title": "App Slug",
+    "app_name_description": "GitHub Enterpriseの組織に作成したAppのSlugです。",
+    "app_name_error": "App slugは必須です",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "Base URL",
+    "base_url_description": "GitHub Enterpriseの組織のBase URLです。",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "Base URLは必須です",
+    "invalid_base_url_error": "Base URLが無効です",
+    "client_id_title": "Client ID",
+    "client_id_description": "GitHub Enterpriseの組織に作成したAppのClient IDです。",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "Client IDは必須です",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "GitHub Enterpriseの組織に作成したAppのClient Secretです。",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Client Secretは必須です",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "GitHub Enterpriseの組織に作成したAppのWebhook Secretです。",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Webhook Secretは必須です",
+    "private_key_title": "Private Key (Base64 encoded)",
+    "private_key_description": "GitHub Enterpriseの組織に作成したAppのPrivate Keyです。",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Private Keyは必須です",
+    "connect_app": "Appを接続"
+  },
+  "silo_errors": {
+    "invalid_query_params": "提供されたクエリパラメータが無効か、必須フィールドが不足しています",
+    "invalid_installation_account": "提供されたインストールアカウントが無効です",
+    "generic_error": "リクエストの処理中に予期せぬエラーが発生しました",
+    "connection_not_found": "要求された接続が見つかりませんでした",
+    "multiple_connections_found": "1つの接続が期待される場合に複数の接続が見つかりました",
+    "cannot_create_multiple_connections": "あなたはすでに組織をワークスペースと接続しています。新しい接続を作成する前に、既存の接続を切断してください。",
+    "installation_not_found": "要求されたインストールが見つかりませんでした",
+    "user_not_found": "要求されたユーザーが見つかりませんでした",
+    "error_fetching_token": "認証トークンの取得に失敗しました",
+    "invalid_app_credentials": "提供されたアプリの資格情報が無効です",
+    "invalid_app_installation_id": "アプリのインストールに失敗しました"
+  },
+  "import_status": {
+    "queued": "キューに登録済み",
+    "created": "作成済み",
+    "initiated": "開始済み",
+    "pulling": "取得中",
+    "timed_out": "タイムアウト",
+    "pulled": "取得済み",
+    "progressing": "進行中",
+    "transforming": "変換中",
+    "transformed": "変換済み",
+    "pushing": "送信中",
+    "finished": "完了",
+    "error": "エラー",
+    "cancelled": "キャンセル済み"
+  }
+}
diff --git a/packages/i18n/src/locales/ja/module.json b/packages/i18n/src/locales/ja/module.json
new file mode 100644
index 0000000..0bac60b
--- /dev/null
+++ b/packages/i18n/src/locales/ja/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {モジュール} other {モジュール}}",
+    "no_module": "モジュールなし",
+    "select": "モジュールを追加"
+  }
+}
diff --git a/packages/i18n/src/locales/ja/navigation.json b/packages/i18n/src/locales/ja/navigation.json
new file mode 100644
index 0000000..207ec74
--- /dev/null
+++ b/packages/i18n/src/locales/ja/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "結果が見つかりません"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "付箋",
+    "your_work": "あなたの作業",
+    "projects": "プロジェクト",
+    "pages": "ページ",
+    "new_work_item": "新規作業項目",
+    "home": "ホーム",
+    "inbox": "受信トレイ",
+    "workspace": "ワークスペース",
+    "views": "ビュー",
+    "analytics": "アナリティクス",
+    "work_items": "作業項目",
+    "cycles": "サイクル",
+    "modules": "モジュール",
+    "intake": "インテーク",
+    "drafts": "下書き",
+    "favorites": "お気に入り",
+    "pro": "プロ",
+    "upgrade": "アップグレード",
+    "pi_chat": "AIチャット",
+    "epics": "エピック",
+    "upgrade_plan": "プランをアップグレード",
+    "plane_pro": "Plane Pro",
+    "business": "ビジネス"
+  }
+}
diff --git a/packages/i18n/src/locales/ja/notification.json b/packages/i18n/src/locales/ja/notification.json
new file mode 100644
index 0000000..55eec7a
--- /dev/null
+++ b/packages/i18n/src/locales/ja/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "受信トレイ",
+    "page_label": "{workspace} - 受信トレイ",
+    "options": {
+      "mark_all_as_read": "すべて既読にする",
+      "mark_read": "既読にする",
+      "mark_unread": "未読にする",
+      "refresh": "更新",
+      "filters": "受信トレイフィルター",
+      "show_unread": "未読を表示",
+      "show_snoozed": "スヌーズを表示",
+      "show_archived": "アーカイブを表示",
+      "mark_archive": "アーカイブ",
+      "mark_unarchive": "アーカイブ解除",
+      "mark_snooze": "スヌーズ",
+      "mark_unsnooze": "スヌーズ解除"
+    },
+    "toasts": {
+      "read": "通知を既読にしました",
+      "unread": "通知を未読にしました",
+      "archived": "通知をアーカイブしました",
+      "unarchived": "通知をアーカイブ解除しました",
+      "snoozed": "通知をスヌーズしました",
+      "unsnoozed": "通知のスヌーズを解除しました"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "詳細を表示するには選択してください。"
+      },
+      "all": {
+        "title": "割り当てられた作業項目がありません",
+        "description": "あなたに割り当てられた作業項目の更新が\nここに表示されます"
+      },
+      "mentions": {
+        "title": "割り当てられた作業項目がありません",
+        "description": "あなたに割り当てられた作業項目の更新が\nここに表示されます"
+      }
+    },
+    "tabs": {
+      "all": "すべて",
+      "mentions": "メンション"
+    },
+    "filter": {
+      "assigned": "自分に割り当て",
+      "created": "自分が作成",
+      "subscribed": "自分が購読"
+    },
+    "snooze": {
+      "1_day": "1日",
+      "3_days": "3日",
+      "5_days": "5日",
+      "1_week": "1週間",
+      "2_weeks": "2週間",
+      "custom": "カスタム"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/page.json b/packages/i18n/src/locales/ja/page.json
new file mode 100644
index 0000000..d6cee44
--- /dev/null
+++ b/packages/i18n/src/locales/ja/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "アウトライン",
+        "empty_state": {
+          "title": "見出しがありません",
+          "description": "このページに見出しを追加してここで確認しましょう。"
+        }
+      },
+      "info": {
+        "label": "情報",
+        "document_info": {
+          "words": "単語数",
+          "characters": "文字数",
+          "paragraphs": "段落数",
+          "read_time": "読了時間"
+        },
+        "actors_info": {
+          "edited_by": "編集者",
+          "created_by": "作成者"
+        },
+        "version_history": {
+          "label": "バージョン履歴",
+          "current_version": "現在のバージョン",
+          "highlight_changes": "変更を強調表示"
+        }
+      },
+      "assets": {
+        "label": "アセット",
+        "download_button": "ダウンロード",
+        "empty_state": {
+          "title": "画像がありません",
+          "description": "画像を追加してここで確認してください。"
+        }
+      },
+      "comments": {
+        "label": "コメント",
+        "empty_state": {
+          "title": "コメントがありません",
+          "description": "コメントを追加してここで確認してください。"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "付箋の名前は100文字を超えることはできません。",
+        "already_exists": "説明のない付箋がすでに存在します"
+      },
+      "created": {
+        "title": "付箋を作成しました",
+        "message": "付箋が正常に作成されました"
+      },
+      "not_created": {
+        "title": "付箋が作成されませんでした",
+        "message": "付箋を作成できませんでした"
+      },
+      "updated": {
+        "title": "付箋を更新しました",
+        "message": "付箋が正常に更新されました"
+      },
+      "not_updated": {
+        "title": "付箋が更新されませんでした",
+        "message": "付箋を更新できませんでした"
+      },
+      "removed": {
+        "title": "付箋を削除しました",
+        "message": "付箋が正常に削除されました"
+      },
+      "not_removed": {
+        "title": "付箋が削除されませんでした",
+        "message": "付箋を削除できませんでした"
+      }
+    },
+    "open_button": "ナビゲーションパネルを開く",
+    "close_button": "ナビゲーションパネルを閉じる",
+    "outline_floating_button": "アウトラインを開く"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "移動",
+        "loading": "移動中"
+      },
+      "cannot_move_to_teamspace": "プライベートページおよび共有ページはチームスペースに移動できません。",
+      "placeholders": {
+        "workspace_to_all": "プロジェクトとチームスペースを検索",
+        "workspace_to_project": "プロジェクトを検索",
+        "project_to_all": "プロジェクトとチームスペースを検索",
+        "project_to_project": "プロジェクトを検索",
+        "project_to_all_with_wiki": "Wiki コレクション、プロジェクト、チームスペースを検索",
+        "project_to_project_with_wiki": "Wiki コレクションとプロジェクトを検索"
+      },
+      "toasts": {
+        "success": {
+          "title": "成功！",
+          "message": "ページを移動しました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "ページを移動できませんでした。後でもう一度お試しください。"
+        },
+        "collection_error": {
+          "title": "Wiki に移動しました",
+          "message": "ページは Wiki に移動されましたが、選択したコレクションに追加できませんでした。ページは General に残ります。"
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "コレクションから削除",
+      "success_message": "ページをコレクションから削除しました。",
+      "error_message": "ページをコレクションから削除できませんでした。もう一度お試しください。"
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "コンテンツの上限に達したため、リアルタイム同期がオフになっています。新しいページを作成するか、ネストされたページを使用して同期を続けてください。"
+  }
+}
diff --git a/packages/i18n/src/locales/ja/power-k.json b/packages/i18n/src/locales/ja/power-k.json
new file mode 100644
index 0000000..12682e1
--- /dev/null
+++ b/packages/i18n/src/locales/ja/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "作業項目を一括削除"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "作業項目のアクション",
+        "indicator": "作業項目",
+        "change_state": "ステータスを変更",
+        "change_priority": "優先度を変更",
+        "change_assignees": "担当者を割り当て",
+        "assign_to_me": "自分に割り当て",
+        "unassign_from_me": "自分の割り当てを解除",
+        "change_estimate": "見積もりを変更",
+        "add_to_cycle": "サイクルに追加",
+        "add_to_modules": "モジュールに追加",
+        "add_labels": "ラベルを追加",
+        "subscribe": "通知を購読",
+        "unsubscribe": "通知の購読を解除",
+        "delete": "削除",
+        "copy_id": "IDをコピー",
+        "copy_id_toast_success": "作業項目のIDをクリップボードにコピーしました。",
+        "copy_id_toast_error": "作業項目のIDのコピー中にエラーが発生しました。",
+        "copy_title": "タイトルをコピー",
+        "copy_title_toast_success": "作業項目のタイトルをクリップボードにコピーしました。",
+        "copy_title_toast_error": "作業項目のタイトルのコピー中にエラーが発生しました。",
+        "copy_url": "URLをコピー",
+        "copy_url_toast_success": "作業項目のURLをクリップボードにコピーしました。",
+        "copy_url_toast_error": "作業項目のURLのコピー中にエラーが発生しました。"
+      },
+      "cycle": {
+        "title": "サイクルのアクション",
+        "indicator": "サイクル",
+        "add_to_favorites": "お気に入りに追加",
+        "remove_from_favorites": "お気に入りから削除",
+        "copy_url": "URLをコピー",
+        "copy_url_toast_success": "サイクルのURLをクリップボードにコピーしました。",
+        "copy_url_toast_error": "サイクルのURLのコピー中にエラーが発生しました。"
+      },
+      "module": {
+        "title": "モジュールのアクション",
+        "indicator": "モジュール",
+        "add_remove_members": "メンバーの追加/削除",
+        "change_status": "ステータスを変更",
+        "add_to_favorites": "お気に入りに追加",
+        "remove_from_favorites": "お気に入りから削除",
+        "copy_url": "URLをコピー",
+        "copy_url_toast_success": "モジュールのURLをクリップボードにコピーしました。",
+        "copy_url_toast_error": "モジュールのURLのコピー中にエラーが発生しました。"
+      },
+      "page": {
+        "title": "ページのアクション",
+        "indicator": "ページ",
+        "lock": "ロック",
+        "unlock": "ロック解除",
+        "make_private": "プライベートにする",
+        "make_public": "公開する",
+        "archive": "アーカイブ",
+        "restore": "復元",
+        "add_to_favorites": "お気に入りに追加",
+        "remove_from_favorites": "お気に入りから削除",
+        "copy_url": "URLをコピー",
+        "copy_url_toast_success": "ページのURLをクリップボードにコピーしました。",
+        "copy_url_toast_error": "ページのURLのコピー中にエラーが発生しました。"
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "新規作業項目",
+      "create_page": "新規ページ",
+      "create_view": "新規ビュー",
+      "create_cycle": "新規サイクル",
+      "create_module": "新規モジュール",
+      "create_project": "新規プロジェクト",
+      "create_workspace": "新規ワークスペース",
+      "create_project_automation": "新規自動化"
+    },
+    "navigation_actions": {
+      "open_workspace": "ワークスペースを開く",
+      "nav_home": "ホームに移動",
+      "nav_inbox": "受信トレイに移動",
+      "nav_your_work": "あなたの作業に移動",
+      "nav_account_settings": "アカウント設定に移動",
+      "open_project": "プロジェクトを開く",
+      "nav_projects_list": "プロジェクト一覧に移動",
+      "nav_all_workspace_work_items": "すべての作業項目に移動",
+      "nav_assigned_workspace_work_items": "割り当てられた作業項目に移動",
+      "nav_created_workspace_work_items": "作成した作業項目に移動",
+      "nav_subscribed_workspace_work_items": "購読中の作業項目に移動",
+      "nav_workspace_analytics": "ワークスペースのアナリティクスに移動",
+      "nav_workspace_drafts": "ワークスペースの下書きに移動",
+      "nav_workspace_archives": "ワークスペースのアーカイブに移動",
+      "open_workspace_setting": "ワークスペースの設定を開く",
+      "nav_workspace_settings": "ワークスペースの設定に移動",
+      "nav_project_work_items": "作業項目に移動",
+      "open_project_cycle": "サイクルを開く",
+      "nav_project_cycles": "サイクルに移動",
+      "open_project_module": "モジュールを開く",
+      "nav_project_modules": "モジュールに移動",
+      "open_project_view": "プロジェクトのビューを開く",
+      "nav_project_views": "プロジェクトのビューに移動",
+      "nav_project_pages": "ページに移動",
+      "nav_project_intake": "インテークに移動",
+      "nav_project_archives": "プロジェクトのアーカイブに移動",
+      "open_project_setting": "プロジェクトの設定を開く",
+      "nav_project_settings": "プロジェクトの設定に移動",
+      "nav_workspace_active_cycle": "すべてのアクティブサイクルに移動",
+      "nav_project_overview": "プロジェクトの概要に移動"
+    },
+    "account_actions": {
+      "sign_out": "サインアウト",
+      "workspace_invites": "ワークスペースの招待"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "アプリのサイドバーを切り替え",
+      "copy_current_page_url": "現在のページのURLをコピー",
+      "copy_current_page_url_toast_success": "現在のページのURLをクリップボードにコピーしました。",
+      "copy_current_page_url_toast_error": "現在のページのURLのコピー中にエラーが発生しました。",
+      "focus_top_nav_search": "検索入力にフォーカス"
+    },
+    "preferences_actions": {
+      "update_theme": "インターフェースのテーマを変更",
+      "update_timezone": "タイムゾーンを変更",
+      "update_start_of_week": "週の開始日を変更",
+      "update_language": "インターフェースの言語を変更",
+      "toast": {
+        "theme": {
+          "success": "テーマを正常に更新しました。",
+          "error": "テーマの更新に失敗しました。もう一度お試しください。"
+        },
+        "timezone": {
+          "success": "タイムゾーンを正常に更新しました。",
+          "error": "タイムゾーンの更新に失敗しました。もう一度お試しください。"
+        },
+        "generic": {
+          "success": "環境設定を正常に更新しました。",
+          "error": "環境設定の更新に失敗しました。もう一度お試しください。"
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "キーボードショートカットを開く",
+      "open_plane_documentation": "Planeのドキュメントを開く",
+      "join_forum": "フォーラムに参加",
+      "report_bug": "バグを報告",
+      "chat_with_us": "チャットでお問い合わせ"
+    },
+    "page_placeholders": {
+      "default": "コマンドを入力または検索",
+      "open_workspace": "ワークスペースを開く",
+      "open_project": "プロジェクトを開く",
+      "open_workspace_setting": "ワークスペースの設定を開く",
+      "open_project_cycle": "サイクルを開く",
+      "open_project_module": "モジュールを開く",
+      "open_project_view": "プロジェクトのビューを開く",
+      "open_project_setting": "プロジェクトの設定を開く",
+      "update_work_item_state": "ステータスを変更",
+      "update_work_item_priority": "優先度を変更",
+      "update_work_item_assignee": "担当者を割り当て",
+      "update_work_item_estimate": "見積もりを変更",
+      "update_work_item_cycle": "サイクルに追加",
+      "update_work_item_module": "モジュールに追加",
+      "update_work_item_labels": "ラベルを追加",
+      "update_module_member": "メンバーを変更",
+      "update_module_status": "ステータスを変更",
+      "update_theme": "テーマを変更",
+      "update_timezone": "タイムゾーンを変更",
+      "update_start_of_week": "週の開始日を変更",
+      "update_language": "言語を変更"
+    },
+    "search_menu": {
+      "no_results": "結果が見つかりません",
+      "clear_search": "検索をクリア",
+      "go_to_advanced_search": "詳細検索に移動"
+    },
+    "footer": {
+      "workspace_level": "ワークスペースレベル"
+    },
+    "group_titles": {
+      "actions": "アクション",
+      "contextual": "コンテキスト",
+      "navigation": "ナビゲート",
+      "create": "作成",
+      "general": "一般",
+      "settings": "設定",
+      "account": "アカウント",
+      "miscellaneous": "その他",
+      "preferences": "環境設定",
+      "help": "ヘルプ"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/project-settings.json b/packages/i18n/src/locales/ja/project-settings.json
new file mode 100644
index 0000000..c6e8521
--- /dev/null
+++ b/packages/i18n/src/locales/ja/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "プロジェクトIDを入力",
+      "please_select_a_timezone": "タイムゾーンを選択してください",
+      "archive_project": {
+        "title": "プロジェクトをアーカイブ",
+        "description": "プロジェクトをアーカイブすると、サイドナビゲーションから非表示になりますが、プロジェクトページからアクセスすることはできます。プロジェクトを復元または削除することもできます。",
+        "button": "プロジェクトをアーカイブ"
+      },
+      "delete_project": {
+        "title": "プロジェクトを削除",
+        "description": "プロジェクトを削除すると、そのプロジェクト内のすべてのデータとリソースが永久に削除され、復元できなくなります。",
+        "button": "プロジェクトを削除"
+      },
+      "toast": {
+        "success": "プロジェクトが正常に更新されました",
+        "error": "プロジェクトを更新できませんでした。もう一度お試しください。"
+      }
+    },
+    "members": {
+      "label": "メンバー",
+      "project_lead": "プロジェクトリーダー",
+      "project_lead_description": "プロジェクトのプロジェクトリーダーを選択してください。",
+      "default_assignee": "デフォルトの担当者",
+      "default_assignee_description": "プロジェクトのデフォルトの担当者を選択してください。",
+      "project_subscribers": "プロジェクトの購読者",
+      "project_subscribers_description": "このプロジェクトの通知を受け取るメンバーを選択してください。",
+      "guest_super_permissions": {
+        "title": "ゲストユーザーにすべての作業項目の閲覧権限を付与:",
+        "sub_heading": "これにより、ゲストはプロジェクトのすべての作業項目を閲覧できるようになります。"
+      },
+      "invite_members": {
+        "title": "メンバーを招待",
+        "sub_heading": "プロジェクトに参加するメンバーを招待します。",
+        "select_co_worker": "共同作業者を選択"
+      }
+    },
+    "states": {
+      "heading": "ステータス",
+      "description": "作業項目の進捗を追跡するためのワークフローのステータスを定義してカスタマイズします。",
+      "describe_this_state_for_your_members": "このステータスについてメンバーに説明してください。",
+      "empty_state": {
+        "title": "{groupKey}グループのステータスがありません",
+        "description": "新しいステータスを作成してください"
+      }
+    },
+    "labels": {
+      "heading": "ラベル",
+      "description": "作業項目を分類・整理するためのカスタムラベルを作成します",
+      "label_title": "ラベルタイトル",
+      "label_title_is_required": "ラベルタイトルは必須です",
+      "label_max_char": "ラベル名は255文字を超えることはできません",
+      "toast": {
+        "error": "ラベルの更新中にエラーが発生しました"
+      }
+    },
+    "estimates": {
+      "heading": "見積もり",
+      "description": "チームの複雑さと作業負荷を伝えるのに役立ちます。",
+      "label": "見積もり",
+      "title": "プロジェクトの見積もりを有効にする",
+      "enable_description": "チームの複雑さと作業負荷を伝えるのに役立ちます。",
+      "no_estimate": "見積もりなし",
+      "new": "新しい見積もりシステム",
+      "create": {
+        "custom": "カスタム",
+        "start_from_scratch": "最初から開始",
+        "choose_template": "テンプレートを選択",
+        "choose_estimate_system": "見積もりシステムを選択",
+        "enter_estimate_point": "見積もりを入力",
+        "step": "ステップ {step} の {total}",
+        "label": "見積もりを作成"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "見積もりを作成",
+            "message": "見積もりが正常に作成されました"
+          },
+          "error": {
+            "title": "見積もり作成に失敗",
+            "message": "新しい見積もりを作成できませんでした。もう一度お試しください。"
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "見積もりを更新",
+            "message": "プロジェクトの見積もりが更新されました。"
+          },
+          "error": {
+            "title": "見積もり更新に失敗",
+            "message": "見積もりを更新できませんでした。もう一度お試しください"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "成功！",
+            "message": "見積もりが有効になりました。"
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "成功！",
+            "message": "見積もりが無効になりました。"
+          },
+          "error": {
+            "title": "エラー！",
+            "message": "見積もりを無効にできませんでした。もう一度お試しください"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "見積もりを並べ替えました",
+            "message": "プロジェクトの見積もりが並べ替えられました。"
+          },
+          "error": {
+            "title": "見積もりの並べ替えに失敗",
+            "message": "見積もりを並べ替えできませんでした。もう一度お試しください。"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "見積もりシステムが作成されました",
+            "message": "正常に作成され有効化されました"
+          },
+          "error": {
+            "title": "エラー",
+            "message": "問題が発生しました"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "見積もりは0より大きい必要があります。",
+        "unable_to_process": "リクエストを処理できません。もう一度お試しください。",
+        "numeric": "見積もりは数値である必要があります。",
+        "character": "見積もりは文字値である必要があります。",
+        "empty": "見積もり値は空にできません。",
+        "already_exists": "見積もり値は既に存在します。",
+        "unsaved_changes": "未保存の変更があります。完了をクリックする前に保存してください",
+        "remove_empty": "見積もりは空にできません。各フィールドに値を入力するか、値がないフィールドを削除してください。",
+        "fill": "この見積もりフィールドを入力してください",
+        "repeat": "見積もり値を重複させることはできません"
+      },
+      "systems": {
+        "points": {
+          "label": "ポイント",
+          "fibonacci": "フィボナッチ",
+          "linear": "リニア",
+          "squares": "二乗",
+          "custom": "カスタム"
+        },
+        "categories": {
+          "label": "カテゴリー",
+          "t_shirt_sizes": "Tシャツサイズ",
+          "easy_to_hard": "簡単から難しい",
+          "custom": "カスタム"
+        },
+        "time": {
+          "label": "時間",
+          "hours": "時間"
+        }
+      },
+      "edit": {
+        "title": "見積もりシステムを編集",
+        "add_or_update": {
+          "title": "見積もりの追加、更新、削除",
+          "description": "ポイントまたはカテゴリーを追加、更新、削除して現在のシステムを管理します。"
+        },
+        "switch": {
+          "title": "見積もりタイプの変更",
+          "description": "ポイントシステムをカテゴリーシステムに変換、またはその逆を行います。"
+        }
+      },
+      "switch": "見積もりシステムの切り替え",
+      "current": "現在の見積もりシステム",
+      "select": "見積もりシステムを選択"
+    },
+    "automations": {
+      "label": "自動化",
+      "heading": "自動化",
+      "description": "プロジェクト管理ワークフローを効率化し、手動タスクを削減するために自動化アクションを設定します。",
+      "auto-archive": {
+        "title": "完了した作業項目を自動的にアーカイブ",
+        "description": "Planeは完了またはキャンセルされた作業項目を自動的にアーカイブします。",
+        "duration": "閉じられた作業項目を自動的にアーカイブ"
+      },
+      "auto-close": {
+        "title": "作業項目を自動的に閉じる",
+        "description": "Planeは完了またはキャンセルされていない作業項目を自動的に閉じます。",
+        "duration": "非アクティブな作業項目を自動的に閉じる",
+        "auto_close_status": "自動クローズステータス"
+      },
+      "auto-remind": {
+        "title": "自動リマインダー",
+        "description": "Planeはメールとアプリ内通知を通じて、チームが期限に沿って進めるように自動的にリマインダーを送信します。",
+        "duration": "リマインダーを送信する前"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "ラベルがまだありません",
+        "description": "プロジェクトの作業項目を整理してフィルタリングするためのラベルを作成します。"
+      },
+      "estimates": {
+        "title": "見積もりシステムがまだありません",
+        "description": "作業項目ごとの作業量を伝えるための見積もりセットを作成します。",
+        "primary_button": "見積もりシステムを追加"
+      },
+      "integrations": {
+        "title": "設定された統合がありません",
+        "description": "GitHubやその他の統合を設定して、プロジェクトの作業項目を同期します。"
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "ワークフローを有効にする",
+        "description": "作業項目の移動を制御するワークフローを設定します",
+        "no_states_tooltip": "ワークフローにステータスが追加されていません。",
+        "no_work_item_types_tooltip": "ワークフローに作業項目タイプが追加されていません。",
+        "no_states_or_work_item_types_tooltip": "ワークフローにステータスまたは作業項目タイプが追加されていません。",
+        "toast": {
+          "loading": {
+            "enabling": "ワークフローを有効化中",
+            "disabling": "ワークフローを無効化中"
+          },
+          "success": {
+            "title": "成功！",
+            "message": "ワークフローが正常に有効化されました。"
+          },
+          "error": {
+            "title": "エラー！",
+            "message": "ワークフローの有効化に失敗しました。もう一度お試しください。"
+          }
+        }
+      },
+      "heading": "ワークフロー",
+      "description": "作業項目のトランジションを自動化し、タスクがプロジェクトのパイプラインを移動する方法を制御するルールを設定します。",
+      "add_button": "新しいワークフローを追加",
+      "search": "ワークフローを検索",
+      "detail": {
+        "define": "ワークフローを定義",
+        "add_states": "ステータスを追加",
+        "unmapped_states": {
+          "title": "マップされていないステータスを検出しました",
+          "description": "選択したタイプの一部の作業項目は、このワークフローに存在しないステータスにあります。",
+          "note": "このワークフローを有効化すると、これらの項目はこのワークフローの初期ステータスに自動的に移動します。",
+          "label": "不足しているステータス",
+          "tooltip": "一部の作業項目がこのワークフローにマップされていないステータスにあります。ワークフローを開いて確認してください。"
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "すべてのステータスが使用中です",
+          "description": "このプロジェクトに定義されたすべてのステータスは、現在のワークフローにすでに含まれています。"
+        }
+      },
+      "default_footer": {
+        "fallback_message": "このワークフローは、ワークフローに割り当てられていない作業項目タイプに適用されます。"
+      },
+      "create": {
+        "heading": "新しいワークフローを作成",
+        "name": {
+          "placeholder": "一意の名前を追加",
+          "validation": {
+            "max_length": "名前は255文字未満である必要があります",
+            "required": "名前は必須です",
+            "invalid": "名前には文字、数字、スペース、ハイフン、アポストロフィのみ使用できます"
+          }
+        },
+        "description": {
+          "placeholder": "短い説明を追加",
+          "validation": {
+            "invalid": "説明には文字、数字、スペース、ハイフン、アポストロフィのみ使用できます"
+          }
+        },
+        "work_item_type": {
+          "label": "作業項目タイプ"
+        },
+        "success": {
+          "title": "成功！",
+          "message": "ワークフローを正常に作成しました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "ワークフローの作成に失敗しました。もう一度お試しください。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "成功！",
+          "message": "ワークフローを正常に更新しました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "ワークフローの更新に失敗しました。もう一度お試しください。"
+        }
+      },
+      "delete": {
+        "loading": "ワークフローを削除中",
+        "success": {
+          "title": "成功！",
+          "message": "ワークフローを正常に削除しました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "ワークフローの削除に失敗しました。もう一度お試しください。"
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "成功！",
+          "message": "ステータスを正常に追加しました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "ステータスの追加に失敗しました。もう一度お試しください。"
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "作業項目タイプ",
+      "description": "独自のプロパティを持つさまざまな種類の作業項目を作成・カスタマイズします"
+    },
+    "features": {
+      "cycles": {
+        "title": "サイクル",
+        "short_title": "サイクル",
+        "description": "このプロジェクト独自のリズムとペースに適応する柔軟な期間で作業をスケジュールします。",
+        "toggle_title": "サイクルを有効にする",
+        "toggle_description": "集中的な期間で作業を計画します。"
+      },
+      "modules": {
+        "title": "モジュール",
+        "short_title": "モジュール",
+        "description": "専任のリーダーと担当者を持つサブプロジェクトに作業を整理します。",
+        "toggle_title": "モジュールを有効にする",
+        "toggle_description": "プロジェクトメンバーはモジュールを作成および編集できるようになります。"
+      },
+      "views": {
+        "title": "ビュー",
+        "short_title": "ビュー",
+        "description": "カスタムソート、フィルター、表示オプションを保存したり、チームと共有したりします。",
+        "toggle_title": "ビューを有効にする",
+        "toggle_description": "プロジェクトメンバーはビューを作成および編集できるようになります。"
+      },
+      "pages": {
+        "title": "ページ",
+        "short_title": "ページ",
+        "description": "自由形式のコンテンツを作成および編集します：メモ、ドキュメント、何でも。",
+        "toggle_title": "ページを有効にする",
+        "toggle_description": "プロジェクトメンバーはページを作成および編集できるようになります。"
+      },
+      "intake": {
+        "intake_responsibility": "受付責任",
+        "intake_sources": "受付ソース",
+        "title": "受付",
+        "short_title": "受付",
+        "description": "ワークフローを中断することなく、非メンバーがバグ、フィードバック、提案を共有できるようにします。",
+        "toggle_title": "受付を有効にする",
+        "toggle_description": "プロジェクトメンバーがアプリ内で受付リクエストを作成できるようにします。",
+        "toggle_tooltip_on": "プロジェクト管理者に有効化を依頼してください。",
+        "toggle_tooltip_off": "プロジェクト管理者に無効化を依頼してください。",
+        "notify_assignee": {
+          "title": "担当者に通知",
+          "description": "新しい受付リクエストの場合、デフォルトの担当者が通知を通じてアラートを受け取ります"
+        },
+        "in_app": {
+          "title": "アプリ内",
+          "description": "既存の作業項目を妨げることなく、ワークスペースのメンバーとゲストから新しい作業項目を受け取ります。"
+        },
+        "email": {
+          "title": "メール",
+          "description": "Planeのメールアドレスにメールを送信した誰からでも新しい作業項目を収集します。",
+          "fieldName": "メールID"
+        },
+        "form": {
+          "title": "フォーム",
+          "description": "専用の安全なフォームを通じて、ワークスペース外の方が潜在的な新しい作業項目を作成できるようにします。",
+          "fieldName": "デフォルトフォームURL",
+          "create_forms": "作業項目タイプを使用してフォームを作成",
+          "manage_forms": "フォームを管理",
+          "manage_forms_tooltip": "ワークスペース管理者に管理を依頼してください。",
+          "create_form": "フォームを作成",
+          "edit_form": "フォームの詳細を編集",
+          "form_title": "フォームタイトル",
+          "form_title_required": "フォームタイトルは必須です",
+          "work_item_type": "作業項目タイプ",
+          "remove_property": "プロパティを削除",
+          "select_properties": "プロパティを選択",
+          "search_placeholder": "プロパティを検索",
+          "toasts": {
+            "success_create": "受付フォームが正常に作成されました",
+            "success_update": "受付フォームが正常に更新されました",
+            "error_create": "受付フォームの作成に失敗しました",
+            "error_update": "受付フォームの更新に失敗しました"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "担当者を設定中...",
+            "success": {
+              "title": "成功！",
+              "message": "担当者が正常に設定されました。"
+            },
+            "error": {
+              "title": "エラー！",
+              "message": "担当者の設定中に問題が発生しました。もう一度お試しください。"
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "時間追跡",
+        "short_title": "時間追跡",
+        "description": "作業項目やプロジェクトに費やした時間を記録します。",
+        "toggle_title": "時間追跡を有効にする",
+        "toggle_description": "プロジェクトメンバーは作業時間を記録できるようになります。"
+      },
+      "milestones": {
+        "title": "マイルストーン",
+        "short_title": "マイルストーン",
+        "description": "マイルストーンは、作業項目を共有の完了日に向けて調整するレイヤーを提供します。",
+        "toggle_title": "マイルストーンを有効にする",
+        "toggle_description": "マイルストーンの期限ごとに作業項目を整理します。"
+      },
+      "toasts": {
+        "loading": "プロジェクト機能を更新中...",
+        "success": "プロジェクト機能が正常に更新されました。",
+        "error": "プロジェクト機能の更新中に問題が発生しました。もう一度お試しください。"
+      }
+    },
+    "project_updates": {
+      "heading": "プロジェクトの更新",
+      "description": "このプロジェクトの統合された追跡と進捗監視"
+    },
+    "templates": {
+      "heading": "テンプレート",
+      "description": "テンプレートを使用すると、プロジェクト、作業項目、ページの作成にかかる時間を80%短縮できます。"
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "サイクルの自動スケジュール",
+        "description": "手動設定なしでサイクルを維持します。",
+        "tooltip": "選択したスケジュールに基づいて新しいサイクルを自動的に作成します。",
+        "edit_button": "編集",
+        "form": {
+          "cycle_title": {
+            "label": "サイクルタイトル",
+            "placeholder": "タイトル",
+            "tooltip": "タイトルは後続のサイクルに番号が追加されます。例：デザイン - 1/2/3",
+            "validation": {
+              "required": "サイクルタイトルは必須です",
+              "max_length": "タイトルは255文字を超えてはいけません"
+            }
+          },
+          "cycle_duration": {
+            "label": "サイクル期間",
+            "unit": "週",
+            "validation": {
+              "required": "サイクル期間は必須です",
+              "min": "サイクル期間は少なくとも1週間である必要があります",
+              "max": "サイクル期間は30週を超えてはいけません",
+              "positive": "サイクル期間は正の値である必要があります"
+            }
+          },
+          "cooldown_period": {
+            "label": "クールダウン期間",
+            "unit": "日",
+            "tooltip": "次のサイクルが始まる前のサイクル間の休止期間。",
+            "validation": {
+              "required": "クールダウン期間は必須です",
+              "negative": "クールダウン期間は負の値にはできません"
+            }
+          },
+          "start_date": {
+            "label": "サイクル開始日",
+            "validation": {
+              "required": "開始日は必須です",
+              "past": "開始日を過去の日付にすることはできません"
+            }
+          },
+          "number_of_cycles": {
+            "label": "将来のサイクル数",
+            "validation": {
+              "required": "サイクル数は必須です",
+              "min": "少なくとも1つのサイクルが必要です",
+              "max": "3つを超えるサイクルをスケジュールすることはできません"
+            }
+          },
+          "auto_rollover": {
+            "label": "作業項目の自動繰り越し",
+            "tooltip": "サイクルが完了した日に、未完了のすべての作業項目を次のサイクルに移動します。"
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "サイクルの自動スケジュールを有効化中",
+            "loading_disable": "サイクルの自動スケジュールを無効化中",
+            "success": {
+              "title": "成功！",
+              "message": "サイクルの自動スケジュールが正常に切り替えられました。"
+            },
+            "error": {
+              "title": "エラー！",
+              "message": "サイクルの自動スケジュールの切り替えに失敗しました。"
+            }
+          },
+          "save": {
+            "loading": "サイクルの自動スケジュール設定を保存中",
+            "success": {
+              "title": "成功！",
+              "message_create": "サイクルの自動スケジュール設定が正常に保存されました。",
+              "message_update": "サイクルの自動スケジュール設定が正常に更新されました。"
+            },
+            "error": {
+              "title": "エラー！",
+              "message_create": "サイクルの自動スケジュール設定の保存に失敗しました。",
+              "message_update": "サイクルの自動スケジュール設定の更新に失敗しました。"
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/project.json b/packages/i18n/src/locales/ja/project.json
new file mode 100644
index 0000000..16b3b4a
--- /dev/null
+++ b/packages/i18n/src/locales/ja/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "作成日時",
+      "updated_at": "更新日時",
+      "name": "名前"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "サイクルを追加",
+    "more_details": "詳細情報",
+    "cycle": "サイクル",
+    "update_cycle": "サイクルを更新",
+    "create_cycle": "サイクルを作成",
+    "no_matching_cycles": "一致するサイクルがありません",
+    "remove_filters_to_see_all_cycles": "すべてのサイクルを表示するにはフィルターを解除してください",
+    "remove_search_criteria_to_see_all_cycles": "すべてのサイクルを表示するには検索条件を解除してください",
+    "only_completed_cycles_can_be_archived": "完了したサイクルのみアーカイブできます",
+    "start_date": "開始日",
+    "end_date": "終了日",
+    "in_your_timezone": "あなたのタイムゾーン",
+    "transfer_work_items": "作業項目を転送 {count}",
+    "transfer": {
+      "no_cycles_available": "作業アイテムを転送できる他のサイクルがありません。"
+    },
+    "date_range": "日付範囲",
+    "add_date": "日付を追加",
+    "active_cycle": {
+      "label": "アクティブなサイクル",
+      "progress": "進捗",
+      "chart": "バーンダウンチャート",
+      "priority_issue": "優先作業項目",
+      "assignees": "担当者",
+      "issue_burndown": "作業項目バーンダウン",
+      "ideal": "理想",
+      "current": "現在",
+      "labels": "ラベル",
+      "trailing": "遅れ",
+      "leading": "リード"
+    },
+    "upcoming_cycle": {
+      "label": "今後のサイクル"
+    },
+    "completed_cycle": {
+      "label": "完了したサイクル"
+    },
+    "status": {
+      "days_left": "残り日数",
+      "completed": "完了",
+      "yet_to_start": "開始前",
+      "in_progress": "進行中",
+      "draft": "下書き"
+    },
+    "action": {
+      "restore": {
+        "title": "サイクルを復元",
+        "success": {
+          "title": "サイクルが復元されました",
+          "description": "サイクルが復元されました。"
+        },
+        "failed": {
+          "title": "サイクルの復元に失敗",
+          "description": "サイクルを復元できませんでした。もう一度お試しください。"
+        }
+      },
+      "favorite": {
+        "loading": "お気に入りにサイクルを追加中",
+        "success": {
+          "description": "サイクルがお気に入りに追加されました。",
+          "title": "成功！"
+        },
+        "failed": {
+          "description": "サイクルをお気に入りに追加できませんでした。もう一度お試しください。",
+          "title": "エラー！"
+        }
+      },
+      "unfavorite": {
+        "loading": "お気に入りからサイクルを削除中",
+        "success": {
+          "description": "サイクルがお気に入りから削除されました。",
+          "title": "成功！"
+        },
+        "failed": {
+          "description": "サイクルをお気に入りから削除できませんでした。もう一度お試しください。",
+          "title": "エラー！"
+        }
+      },
+      "update": {
+        "loading": "サイクルを更新中",
+        "success": {
+          "description": "サイクルが正常に更新されました。",
+          "title": "成功！"
+        },
+        "failed": {
+          "description": "サイクルの更新中にエラーが発生しました。もう一度お試しください。",
+          "title": "エラー！"
+        },
+        "error": {
+          "already_exists": "指定した日付のサイクルは既に存在します。下書きサイクルを作成する場合は、両方の日付を削除してください。"
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "サイクルで作業をグループ化してタイムボックス化します。",
+        "description": "作業をタイムボックス化された単位に分割し、プロジェクトの期限から逆算して日付を設定し、チームとして具体的な進捗を作ります。",
+        "primary_button": {
+          "text": "最初のサイクルを設定",
+          "comic": {
+            "title": "サイクルは繰り返されるタイムボックスです。",
+            "description": "スプリント、イテレーション、または週次や隔週の作業追跡に使用するその他の用語がサイクルです。"
+          }
+        }
+      },
+      "no_issues": {
+        "title": "サイクルに作業項目が追加されていません",
+        "description": "このサイクル内でタイムボックス化して提供したい作業項目を追加または作成します",
+        "primary_button": {
+          "text": "新しい作業項目を作成"
+        },
+        "secondary_button": {
+          "text": "既存の作業項目を追加"
+        }
+      },
+      "completed_no_issues": {
+        "title": "サイクルに作業項目がありません",
+        "description": "サイクルに作業項目がありません。作業項目は転送されたか非表示になっています。非表示の作業項目がある場合は、表示プロパティを更新して確認してください。"
+      },
+      "active": {
+        "title": "アクティブなサイクルがありません",
+        "description": "アクティブなサイクルには、その期間内に今日の日付が含まれるものが該当します。アクティブなサイクルの進捗と詳細をここで確認できます。"
+      },
+      "archived": {
+        "title": "アーカイブされたサイクルがまだありません",
+        "description": "プロジェクトを整理するために、完了したサイクルをアーカイブします。アーカイブ後はここで確認できます。"
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "プロジェクトのフィルター付きビューを保存します。必要な数だけ作成できます",
+        "description": "ビューは、頻繁に使用するフィルターや簡単にアクセスしたいフィルターの集合です。プロジェクト内のすべての同僚が全員のビューを確認でき、自分のニーズに最も合うものを選択できます。",
+        "primary_button": {
+          "text": "最初のビューを作成",
+          "comic": {
+            "title": "ビューは作業項目のプロパティの上で機能します。",
+            "description": "ここから、必要に応じて多くのプロパティやフィルターを使用してビューを作成できます。"
+          }
+        },
+        "filter": {
+          "title": "一致するビューがありません",
+          "description": "検索条件に一致するビューがありません。\n 代わりに新しいビューを作成してください。"
+        }
+      },
+      "no_archived_issues": {
+        "title": "アーカイブされた作業項目はまだありません",
+        "description": "手動または自動化により、完了またはキャンセルされた作業項目をアーカイブできます。アーカイブされたものはここで確認できます。",
+        "primary_button": {
+          "text": "自動化を設定"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "適用したフィルターに一致する作業項目が見つかりません",
+        "secondary_button": {
+          "text": "すべてのフィルターをクリア"
+        }
+      },
+      "public": {
+        "title": "公開ページがまだありません",
+        "description": "プロジェクト内の全員と共有されているページをここで確認できます。",
+        "primary_button": {
+          "text": "最初のページを作成"
+        }
+      },
+      "archived": {
+        "title": "アーカイブされたページがまだありません",
+        "description": "注目していないページをアーカイブします。必要な時にここでアクセスできます。"
+      },
+      "shared": {
+        "title": "共有されたページはまだありません",
+        "description": "他のメンバーがあなたと共有したページがここに表示されます。"
+      }
+    },
+    "delete_view": {
+      "title": "このビューを削除してもよろしいですか？",
+      "content": "確認すると、このビューに選択したすべてのソート、フィルター、表示オプション + レイアウトが復元不可能な形で完全に削除されます。"
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "作業項目を作成して誰かに割り当てましょう。自分自身でも構いません",
+        "description": "作業項目は、仕事、タスク、作業、またはJTBD（私たちが好む用語）と考えてください。作業項目とそのサブ作業項目は通常、チームメンバーに割り当てられる時間ベースのアクションアイテムです。チームは作業項目を作成、割り当て、完了することでプロジェクトの目標に向かって進みます。",
+        "primary_button": {
+          "text": "最初の作業項目を作成",
+          "comic": {
+            "title": "作業項目はPlaneの構成要素です。",
+            "description": "PlaneのUIの再設計、会社のリブランド、新しい燃料噴射システムの立ち上げなどは、サブ作業項目を持つ可能性が高い作業項目の例です。"
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "アーカイブされた作業項目がまだありません",
+        "description": "手動または自動化を通じて、完了またはキャンセルされた作業項目をアーカイブできます。アーカイブ後はここで確認できます。",
+        "primary_button": {
+          "text": "自動化を設定"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "適用されたフィルターに一致する作業項目が見つかりません",
+        "secondary_button": {
+          "text": "すべてのフィルターをクリア"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "モジュールを追加",
+    "update_module": "モジュールを更新",
+    "create_module": "モジュールを作成",
+    "archive_module": "モジュールをアーカイブ",
+    "restore_module": "モジュールを復元",
+    "delete_module": "モジュールを削除",
+    "empty_state": {
+      "general": {
+        "title": "プロジェクトのマイルストーンをモジュールにマッピングし、集計された作業を簡単に追跡できます。",
+        "description": "論理的で階層的な親に属する作業項目のグループがモジュールを形成します。プロジェクトのマイルストーンで作業を追跡する方法として考えてください。期間や期限があり、マイルストーンまでの進捗状況を確認できる分析機能も備えています。",
+        "primary_button": {
+          "text": "最初のモジュールを作成",
+          "comic": {
+            "title": "モジュールは階層的に作業をグループ化するのに役立ちます。",
+            "description": "カートモジュール、シャーシモジュール、倉庫モジュールは、このグループ化の良い例です。"
+          }
+        }
+      },
+      "no_issues": {
+        "title": "モジュールに作業項目がありません",
+        "description": "このモジュールの一部として達成したい作業項目を作成または追加してください",
+        "primary_button": {
+          "text": "新しい作業項目を作成"
+        },
+        "secondary_button": {
+          "text": "既存の作業項目を追加"
+        }
+      },
+      "archived": {
+        "title": "アーカイブされたモジュールがまだありません",
+        "description": "プロジェクトを整理するために、完了またはキャンセルされたモジュールをアーカイブします。アーカイブ後はここで確認できます。"
+      },
+      "sidebar": {
+        "in_active": "このモジュールはまだアクティブではありません。",
+        "invalid_date": "無効な日付です。有効な日付を入力してください。"
+      }
+    },
+    "quick_actions": {
+      "archive_module": "モジュールをアーカイブ",
+      "archive_module_description": "完了またはキャンセルされた\nモジュールのみアーカイブできます。",
+      "delete_module": "モジュールを削除"
+    },
+    "toast": {
+      "copy": {
+        "success": "モジュールのリンクがクリップボードにコピーされました"
+      },
+      "delete": {
+        "success": "モジュールが正常に削除されました",
+        "error": "モジュールを削除できませんでした"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "メモ、ドキュメント、または完全なナレッジベースを作成しましょう。PlaneのAIアシスタントGalileoが開始をサポートします",
+        "description": "ページはPlaneの思考整理スペースです。会議のメモを取り、簡単に整形し、作業項目を埋め込み、コンポーネントライブラリを使用してレイアウトし、すべてをプロジェクトのコンテキストに保存できます。ドキュメントを素早く作成するには、ショートカットまたはボタンのクリックでPlaneのAI、Galileoを呼び出してください。",
+        "primary_button": {
+          "text": "最初のページを作成"
+        }
+      },
+      "private": {
+        "title": "プライベートページがまだありません",
+        "description": "プライベートな考えをここに保存しましょう。共有する準備ができたら、チームはクリック一つで共有できます。",
+        "primary_button": {
+          "text": "最初のページを作成"
+        }
+      },
+      "public": {
+        "title": "公開ページがまだありません",
+        "description": "プロジェクト内の全員と共有されているページをここで確認できます。",
+        "primary_button": {
+          "text": "最初のページを作成"
+        }
+      },
+      "archived": {
+        "title": "アーカイブされたページがまだありません",
+        "description": "注目していないページをアーカイブします。必要な時にここでアクセスできます。"
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "インテークがプロジェクトで有効になっていません。",
+        "description": "インテークは、プロジェクトへの受信リクエストを管理し、ワークフローに作業項目として追加するのに役立ちます。リクエストを管理するには、プロジェクト設定でインテークを有効にしてください。",
+        "primary_button": {
+          "text": "機能を管理"
+        }
+      },
+      "cycle": {
+        "title": "サイクルがこのプロジェクトで有効になっていません。",
+        "description": "時間枠で作業を分割し、プロジェクトの期限から逆算して日付を設定し、チームとして具体的な進捗を作ります。サイクルを使用するには、プロジェクトでサイクル機能を有効にしてください。",
+        "primary_button": {
+          "text": "機能を管理"
+        }
+      },
+      "module": {
+        "title": "モジュールがプロジェクトで有効になっていません。",
+        "description": "モジュールはプロジェクトの構成要素です。モジュールを使用するには、プロジェクト設定でモジュールを有効にしてください。",
+        "primary_button": {
+          "text": "機能を管理"
+        }
+      },
+      "page": {
+        "title": "ページがプロジェクトで有効になっていません。",
+        "description": "ページはプロジェクトの構成要素です。ページを使用するには、プロジェクト設定でページを有効にしてください。",
+        "primary_button": {
+          "text": "機能を管理"
+        }
+      },
+      "view": {
+        "title": "ビューがプロジェクトで有効になっていません。",
+        "description": "ビューはプロジェクトの構成要素です。ビューを使用するには、プロジェクト設定でビューを有効にしてください。",
+        "primary_button": {
+          "text": "機能を管理"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "バックログ",
+      "planned": "計画済み",
+      "in_progress": "進行中",
+      "paused": "一時停止",
+      "completed": "完了",
+      "cancelled": "キャンセル"
+    },
+    "layout": {
+      "list": "リスト表示",
+      "board": "ギャラリー表示",
+      "timeline": "タイムライン表示"
+    },
+    "order_by": {
+      "name": "名前",
+      "progress": "進捗",
+      "issues": "作業項目数",
+      "due_date": "期限",
+      "created_at": "作成日",
+      "manual": "手動"
+    }
+  },
+  "project_members": {
+    "full_name": "氏名",
+    "display_name": "表示名",
+    "email": "メールアドレス",
+    "joining_date": "参加日",
+    "role": "役割"
+  },
+  "project": {
+    "members_import": {
+      "title": "CSVからメンバーをインポート",
+      "description": "次の列を含むCSVをアップロード：メールアドレスとロール（5=ゲスト、15=メンバー、20=管理者）。ユーザーはすでにワークスペースのメンバーである必要があります。",
+      "download_sample": "サンプルCSVをダウンロード",
+      "dropzone": {
+        "active": "CSVファイルをここにドロップ",
+        "inactive": "ドラッグ＆ドロップまたはクリックしてアップロード",
+        "file_type": ".csvファイルのみサポートされています"
+      },
+      "buttons": {
+        "cancel": "キャンセル",
+        "import": "インポート",
+        "try_again": "再試行",
+        "close": "閉じる",
+        "done": "完了"
+      },
+      "progress": {
+        "uploading": "アップロード中...",
+        "importing": "インポート中..."
+      },
+      "summary": {
+        "title": {
+          "complete": "インポート完了"
+        },
+        "message": {
+          "success": "{count}人のメンバーをプロジェクトにインポートしました。",
+          "no_imports": "CSVファイルから新しいメンバーはインポートされませんでした。"
+        },
+        "stats": {
+          "added": "追加",
+          "reactivated": "再有効化",
+          "already_members": "既にメンバー",
+          "skipped": "スキップ"
+        },
+        "download_errors": "スキップ詳細をダウンロード"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "無効なファイル",
+          "message": "CSVファイルのみサポートされています。"
+        },
+        "import_failed": {
+          "title": "インポート失敗",
+          "message": "問題が発生しました。"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/settings.json b/packages/i18n/src/locales/ja/settings.json
new file mode 100644
index 0000000..23a12ec
--- /dev/null
+++ b/packages/i18n/src/locales/ja/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "メールアドレスを変更",
+        "description": "確認リンクを受け取るには、新しいメールアドレスを入力してください。",
+        "toasts": {
+          "success_title": "成功",
+          "success_message": "メールアドレスを更新しました。再度サインインしてください。"
+        },
+        "form": {
+          "email": {
+            "label": "新しいメールアドレス",
+            "placeholder": "メールアドレスを入力",
+            "errors": {
+              "required": "メールアドレスは必須です",
+              "invalid": "メールアドレスが無効です",
+              "exists": "メールアドレスは既に存在します。別のものを使用してください。",
+              "validation_failed": "メールアドレスの確認に失敗しました。もう一度お試しください。"
+            }
+          },
+          "code": {
+            "label": "認証コード",
+            "placeholder": "123456",
+            "helper_text": "認証コードを新しいメールに送信しました。",
+            "errors": {
+              "required": "認証コードは必須です",
+              "invalid": "認証コードが無効です。もう一度お試しください。"
+            }
+          }
+        },
+        "actions": {
+          "continue": "続行",
+          "confirm": "確認",
+          "cancel": "キャンセル"
+        },
+        "states": {
+          "sending": "送信中…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "環境設定",
+      "description": "あなたの働き方に合わせてアプリの体験をカスタマイズします"
+    },
+    "notifications": {
+      "heading": "メール通知",
+      "description": "購読している作業項目の最新情報を受け取ります。通知を受け取るには有効にしてください。",
+      "select_default_view": "デフォルト表示を選択",
+      "compact": "コンパクト",
+      "full": "全画面"
+    },
+    "security": {
+      "heading": "セキュリティ"
+    },
+    "api_tokens": {
+      "title": "個人アクセストークン",
+      "description": "外部システムやアプリケーションとデータを統合するための安全なAPIトークンを生成します。"
+    },
+    "activity": {
+      "heading": "アクティビティ",
+      "description": "すべてのプロジェクトと作業項目にわたる最近のアクションと変更を追跡します。"
+    },
+    "connections": {
+      "title": "接続",
+      "heading": "接続",
+      "description": "ワークスペースの接続設定を管理します。"
+    }
+  },
+  "profile": {
+    "label": "プロフィール",
+    "page_label": "あなたの作業",
+    "work": "作業",
+    "details": {
+      "joined_on": "参加日",
+      "time_zone": "タイムゾーン"
+    },
+    "stats": {
+      "workload": "作業負荷",
+      "overview": "概要",
+      "created": "作成した作業項目",
+      "assigned": "割り当てられた作業項目",
+      "subscribed": "購読中の作業項目",
+      "state_distribution": {
+        "title": "状態別作業項目",
+        "empty": "より良い分析のために、作業項目を作成してグラフで状態別に表示します。"
+      },
+      "priority_distribution": {
+        "title": "優先度別作業項目",
+        "empty": "より良い分析のために、作業項目を作成してグラフで優先度別に表示します。"
+      },
+      "recent_activity": {
+        "title": "最近のアクティビティ",
+        "empty": "データが見つかりませんでした。入力内容を確認してください",
+        "button": "今日のアクティビティをダウンロード",
+        "button_loading": "ダウンロード中"
+      }
+    },
+    "actions": {
+      "profile": "プロフィール",
+      "security": "セキュリティ",
+      "activity": "アクティビティ",
+      "preferences": "環境設定",
+      "notifications": "通知",
+      "api-tokens": "個人アクセストークン",
+      "connections": "接続"
+    },
+    "tabs": {
+      "summary": "サマリー",
+      "assigned": "割り当て済み",
+      "created": "作成済み",
+      "subscribed": "購読中",
+      "activity": "アクティビティ"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "アクティビティがまだありません",
+        "description": "新しい作業項目を作成して始めましょう！詳細とプロパティを追加してください。Planeをさらに探索してアクティビティを確認しましょう。"
+      },
+      "assigned": {
+        "title": "割り当てられた作業項目がありません",
+        "description": "あなたに割り当てられた作業項目をここで追跡できます。"
+      },
+      "created": {
+        "title": "作業項目がまだありません",
+        "description": "あなたが作成したすべての作業項目がここに表示され、直接追跡できます。"
+      },
+      "subscribed": {
+        "title": "作業項目がまだありません",
+        "description": "興味のある作業項目を購読して、ここですべてを追跡できます。"
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "システム設定"
+      },
+      "light": {
+        "label": "ライト"
+      },
+      "dark": {
+        "label": "ダーク"
+      },
+      "light_contrast": {
+        "label": "ライトハイコントラスト"
+      },
+      "dark_contrast": {
+        "label": "ダークハイコントラスト"
+      },
+      "custom": {
+        "label": "カスタムテーマ"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/stickies.json b/packages/i18n/src/locales/ja/stickies.json
new file mode 100644
index 0000000..f442719
--- /dev/null
+++ b/packages/i18n/src/locales/ja/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "あなたの付箋",
+    "placeholder": "ここをクリックして入力",
+    "all": "すべての付箋",
+    "no-data": "アイデアをメモしたり、ひらめきをキャプチャしたり、閃きを記録したりしましょう。付箋を追加して始めましょう。",
+    "add": "付箋を追加",
+    "search_placeholder": "タイトルで検索",
+    "delete": "付箋を削除",
+    "delete_confirmation": "この付箋を削除してもよろしいですか？",
+    "empty_state": {
+      "simple": "アイデアをメモしたり、ひらめきをキャプチャしたり、閃きを記録したりしましょう。付箋を追加して始めましょう。",
+      "general": {
+        "title": "付箋は、その場で素早く取るメモやToDoです。",
+        "description": "いつでもどこからでもアクセスできる付箋を作成して、思考やアイデアを簡単にキャプチャできます。",
+        "primary_button": {
+          "text": "付箋を追加"
+        }
+      },
+      "search": {
+        "title": "付箋に一致するものがありません。",
+        "description": "別の用語を試すか、検索が正しいと\n確信がある場合はお知らせください。",
+        "primary_button": {
+          "text": "付箋を追加"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "付箋の名前は100文字を超えることはできません。",
+        "already_exists": "説明のない付箋がすでに存在します"
+      },
+      "created": {
+        "title": "付箋を作成しました",
+        "message": "付箋が正常に作成されました"
+      },
+      "not_created": {
+        "title": "付箋を作成できませんでした",
+        "message": "付箋を作成できませんでした"
+      },
+      "updated": {
+        "title": "付箋を更新しました",
+        "message": "付箋が正常に更新されました"
+      },
+      "not_updated": {
+        "title": "付箋を更新できませんでした",
+        "message": "付箋を更新できませんでした"
+      },
+      "removed": {
+        "title": "付箋を削除しました",
+        "message": "付箋が正常に削除されました"
+      },
+      "not_removed": {
+        "title": "付箋を削除できませんでした",
+        "message": "付箋を削除できませんでした"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/template.json b/packages/i18n/src/locales/ja/template.json
new file mode 100644
index 0000000..5f8b66d
--- /dev/null
+++ b/packages/i18n/src/locales/ja/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "テンプレート",
+      "description": "テンプレートを使用すると、プロジェクト、作業項目、ページの作成に費やす時間を80％節約できます。",
+      "new_project_template": "新しいプロジェクトテンプレート",
+      "new_work_item_template": "新しい作業項目テンプレート",
+      "new_page_template": "新しいページテンプレート",
+      "options": {
+        "project": {
+          "label": "プロジェクトテンプレート"
+        },
+        "work_item": {
+          "label": "作業項目テンプレート"
+        },
+        "page": {
+          "label": "ページテンプレート"
+        }
+      },
+      "create_template": {
+        "label": "テンプレートを作成",
+        "no_permission": {
+          "project": "テンプレートを作成するには、プロジェクト管理者に連絡してください",
+          "workspace": "テンプレートを作成するには、ワークスペース管理者に連絡してください"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "テンプレートを使用",
+          "loading": "使用中"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "ワークスペースから派生"
+        },
+        "project": {
+          "info": "プロジェクトから派生"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "プロジェクトテンプレートに名前を付けてください。",
+              "validation": {
+                "required": "テンプレート名は必須です",
+                "maxLength": "テンプレート名は255文字未満にしてください"
+              }
+            },
+            "description": {
+              "placeholder": "このテンプレートをいつ、どのように使用するかを説明してください。"
+            }
+          },
+          "name": {
+            "placeholder": "プロジェクトに名前を付けてください。",
+            "validation": {
+              "required": "プロジェクトのタイトルは必須です",
+              "maxLength": "プロジェクトのタイトルは255文字未満にしてください"
+            }
+          },
+          "description": {
+            "placeholder": "このプロジェクトの目的と目標を説明してください。"
+          },
+          "button": {
+            "create": "プロジェクトテンプレートを作成",
+            "update": "プロジェクトテンプレートを更新"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "作業項目テンプレートに名前を付けてください。",
+              "validation": {
+                "required": "テンプレート名は必須です",
+                "maxLength": "テンプレート名は255文字未満にしてください"
+              }
+            },
+            "description": {
+              "placeholder": "このテンプレートをいつ、どのように使用するかを説明してください。"
+            }
+          },
+          "name": {
+            "placeholder": "この作業項目にタイトルを付けてください。",
+            "validation": {
+              "required": "作業項目のタイトルは必須です",
+              "maxLength": "作業項目のタイトルは255文字未満にしてください"
+            }
+          },
+          "description": {
+            "placeholder": "この作業項目を完了したときに何を達成するのかが明確になるように説明してください。"
+          },
+          "button": {
+            "create": "作業項目テンプレートを作成",
+            "update": "作業項目テンプレートを更新"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "ページテンプレートに名前を付けてください。",
+              "validation": {
+                "required": "テンプレート名は必須です",
+                "maxLength": "テンプレート名は255文字未満にしてください"
+              }
+            },
+            "description": {
+              "placeholder": "このテンプレートをいつ、どのように使用するかを説明してください。"
+            }
+          },
+          "name": {
+            "placeholder": "未命名のページ",
+            "validation": {
+              "maxLength": "ページ名は255文字未満にしてください"
+            }
+          },
+          "button": {
+            "create": "ページテンプレートを作成",
+            "update": "ページテンプレートを更新"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {公開設定} other {マーケットプレイスに公開}}",
+          "unpublish_action": "マーケットプレイスから削除",
+          "title": "テンプレートを発見可能かつ認識可能にする",
+          "name": {
+            "label": "テンプレート名",
+            "placeholder": "テンプレートに名前を付けてください",
+            "validation": {
+              "required": "テンプレート名は必須です",
+              "maxLength": "テンプレート名は255文字未満にしてください"
+            }
+          },
+          "short_description": {
+            "label": "短い説明",
+            "placeholder": "このテンプレートは、同時に複数のプロジェクトを管理するプロジェクトマネージャーに最適です。",
+            "validation": {
+              "required": "短い説明は必須です"
+            }
+          },
+          "description": {
+            "label": "説明",
+            "placeholder": "音声認識機能を活用して生産性を向上させ、コミュニケーションを効率化しましょう。\n• リアルタイム文字起こし：話した言葉を瞬時に正確なテキストに変換します。\n• タスクとコメントの作成：音声コマンドでタスク、説明、コメントを追加できます。",
+            "validation": {
+              "required": "説明は必須です"
+            }
+          },
+          "category": {
+            "label": "カテゴリ",
+            "placeholder": "最も適切な場所を選択してください。複数のカテゴリを選択できます。",
+            "validation": {
+              "required": "少なくとも1つのカテゴリが必要です"
+            }
+          },
+          "keywords": {
+            "label": "キーワード",
+            "placeholder": "ユーザーがこのテンプレートを検索するときに使用する用語を使用してください。",
+            "helperText": "カンマで区切られたキーワードを入力して、人々がこれを検索から見つけるのに役立つようにしてください。",
+            "validation": {
+              "required": "少なくとも1つのキーワードが必要です"
+            }
+          },
+          "website": {
+            "label": "WebサイトのURL",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "無効なURL",
+              "maxLength": "URLは800文字未満にしてください"
+            }
+          },
+          "company_name": {
+            "label": "会社名",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "会社名は必須です",
+              "maxLength": "会社名は255文字未満にしてください"
+            }
+          },
+          "contact_email": {
+            "label": "サポートメールアドレス",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "無効なメールアドレス",
+              "maxLength": "サポートメールアドレスは255文字未満にしてください"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "プライバシーポリシーのURL",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "無効なURL",
+              "maxLength": "URLは800文字未満にしてください"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "利用規約のURL",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "無効なURL",
+              "maxLength": "URLは800文字未満にしてください"
+            }
+          },
+          "cover_image": {
+            "label": "マーケットプレイスに表示されるカバー画像を追加",
+            "upload_title": "カバー画像をアップロード",
+            "upload_placeholder": "クリックしてアップロードするか、ドラッグ＆ドロップでカバー画像をアップロード",
+            "drop_here": "ここにドロップ",
+            "click_to_upload": "クリックしてアップロード",
+            "invalid_file_or_exceeds_size_limit": "無効なファイルまたはサイズ制限を超えています。もう一度お試しください。",
+            "upload_and_save": "アップロードして保存",
+            "uploading": "アップロード中",
+            "remove": "削除",
+            "removing": "削除中",
+            "validation": {
+              "required": "カバー画像は必須です"
+            }
+          },
+          "attach_screenshots": {
+            "label": "ビューアーにこのテンプレートを理解させるためのドキュメントと画像を含めます。",
+            "validation": {
+              "required": "少なくとも1つのスクリーンショットが必要です"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "テンプレート",
+        "description": "Planeのプロジェクト、作業項目、ページテンプレートを使用すれば、ゼロからプロジェクトを作成したり、作業項目のプロパティを手動で設定したりする必要はありません。",
+        "sub_description": "テンプレートを使用すると、管理時間の80％を取り戻せます。"
+      },
+      "no_templates": {
+        "button": "最初のテンプレートを作成"
+      },
+      "no_labels": {
+        "description": " まだラベルがありません。プロジェクト内の作業項目を整理してフィルタリングするためのラベルを作成してください。"
+      },
+      "no_modules": {
+        "description": "まだモジュールがありません。専任のリーダーと担当者を持つサブプロジェクトに作業を整理します。"
+      },
+      "no_work_items": {
+        "description": "まだ作業項目がありません。1つ追加して、より良い構造にしてください。"
+      },
+      "no_sub_work_items": {
+        "description": "まだサブ作業項目がありません。1つ追加して、より良い構造にしてください。"
+      },
+      "page": {
+        "no_templates": {
+          "title": "アクセス可能なテンプレートがありません。",
+          "description": "テンプレートを作成してください"
+        },
+        "no_results": {
+          "title": "テンプレートと一致しませんでした。",
+          "description": "他の用語で検索してみてください。"
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "テンプレートが作成されました",
+          "message": "{templateType}テンプレート「{templateName}」がワークスペースで利用できるようになりました。"
+        },
+        "error": {
+          "title": "今回はそのテンプレートを作成できませんでした。",
+          "message": "詳細を再度保存するか、できれば別のタブで新しいテンプレートにコピーしてください。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "テンプレートが変更されました",
+          "message": "{templateType}テンプレート「{templateName}」が変更されました。"
+        },
+        "error": {
+          "title": "このテンプレートの変更を保存できませんでした。",
+          "message": "詳細を再度保存するか、後でこのテンプレートに戻ってください。それでも問題が続く場合は、お問い合わせください。"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "テンプレートが削除されました",
+          "message": "{templateType}テンプレート「{templateName}」がワークスペースから削除されました。"
+        },
+        "error": {
+          "title": "今回はそのテンプレートを削除できませんでした。",
+          "message": "再度削除を試みるか、後で戻ってきてください。それでも削除できない場合は、お問い合わせください。"
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "テンプレートが削除されました",
+          "message": "{templateType}テンプレート「{templateName}」が削除されました。"
+        },
+        "error": {
+          "title": "今回はそのテンプレートを削除できませんでした。",
+          "message": "再度削除を試みるか、後で戻ってきてください。それでも削除できない場合は、お問い合わせください。"
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "テンプレートを削除",
+      "description": {
+        "prefix": "テンプレート「",
+        "suffix": "」を削除してもよろしいですか？テンプレートに関連するすべてのデータは完全に削除されます。このアクションは元に戻せません。"
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "テンプレートを削除",
+      "description": {
+        "prefix": "テンプレート「",
+        "suffix": "」を削除してもよろしいですか？このテンプレートはマーケットプレイスでユーザーが利用できなくなります。"
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "新しいテンプレートを追加",
+        "project": "新しいテンプレートを追加"
+      },
+      "label": {
+        "project": "プロジェクトテンプレートを選択",
+        "page": "テンプレートから選択"
+      },
+      "tooltip": {
+        "work_item": "作業項目テンプレートを選択"
+      },
+      "no_results": {
+        "work_item": "テンプレートが見つかりません。",
+        "project": "テンプレートが見つかりません。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/tour.json b/packages/i18n/src/locales/ja/tour.json
new file mode 100644
index 0000000..e15707e
--- /dev/null
+++ b/packages/i18n/src/locales/ja/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "ワークスペースへようこそ",
+        "description": "開始をお手伝いするため、デモプロジェクトを作成しました。最初の作業項目を追加しましょう。"
+      },
+      "step_one": {
+        "title": "「+ 作業項目を追加」をクリック",
+        "description": "「+ 新しい作業項目」ボタンをクリックして開始します。タスク、バグ、またはニーズに合わせたカスタムタイプを作成できます。"
+      },
+      "step_two": {
+        "title": "作業項目をフィルタリング",
+        "description": "フィルタを使用してリストをすばやく絞り込みます。ステータス、優先度、またはチームメンバーでフィルタリングできます。 "
+      },
+      "step_three": {
+        "title": "必要に応じて作業項目を表示、グループ化、並べ替え。",
+        "description": "必要なプロパティを表示し、ニーズに応じて作業項目をグループ化または並べ替えます。"
+      },
+      "step_four": {
+        "title": "好きなように視覚化",
+        "description": "リストに表示するプロパティを選択します。作業項目を独自の方法でグループ化および並べ替えることもできます。"
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "サイクルで進捗を管理",
+        "description": "Qキーを押してサイクルを作成します。名前を付けて日付を設定—プロジェクトごとに1つのサイクルのみ。"
+      },
+      "step_one": {
+        "title": "新しいサイクルを作成",
+        "description": "Qキーを押してサイクルを作成します。名前を付けて日付を設定—プロジェクトごとに1つのサイクルのみ。"
+      },
+      "step_two": {
+        "title": "「+」をクリック",
+        "description": "「+」ボタンをクリックして開始します。サイクルページから直接、新規または既存の作業項目を追加します。"
+      },
+      "step_three": {
+        "title": "サイクルの概要",
+        "description": "サイクルの進捗、チームの生産性、優先順位を追跡し、遅れがあれば調査します。"
+      },
+      "step_four": {
+        "title": "作業項目を転送",
+        "description": "期限後、サイクルは自動的に完了します。未完了の作業を別のサイクルに移動します。"
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "プロジェクトをモジュールに分割",
+        "description": "モジュールは、ユーザーが特定の時間枠内で作業項目をグループ化および整理するのに役立つ、より小さく焦点を絞ったプロジェクトです。"
+      },
+      "step_one": {
+        "title": "モジュールを作成",
+        "description": "モジュールは、ユーザーが特定の時間枠内で作業項目をグループ化および整理するのに役立つ、より小さく焦点を絞ったプロジェクトです。"
+      },
+      "step_two": {
+        "title": "「+」をクリック",
+        "description": "「+」ボタンをクリックして開始します。モジュールページから直接、新規または既存の作業項目を追加します。"
+      },
+      "step_three": {
+        "title": "モジュールの状態",
+        "description": "モジュールはこれらのステータスを使用して、ユーザーが計画し、進捗と段階を明確に追跡するのに役立ちます。"
+      },
+      "step_four": {
+        "title": "モジュールの進捗",
+        "description": "モジュールの進捗は完了した項目を通じて追跡され、パフォーマンスを監視するための分析が含まれます。"
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "AI搭載ページでドキュメント化",
+        "description": "PlaneのページはプロジェクトRaw情報をキャプチャ、整理、共同作業できます—外部ツールは不要です。"
+      },
+      "step_one": {
+        "title": "ページを公開または非公開にする",
+        "description": "ページは、ワークスペースの全員に表示される公開、またはあなたのみがアクセスできる非公開として設定できます。"
+      },
+      "step_two": {
+        "title": "/コマンドを使用",
+        "description": "ページで/を使用して、リスト、画像、テーブル、埋め込みを含む16種類のブロックからコンテンツを追加します。"
+      },
+      "step_three": {
+        "title": "ページアクション",
+        "description": "ページが作成されたら、右上隅の•••メニューをクリックして次のアクションを実行できます。"
+      },
+      "step_four": {
+        "title": "目次",
+        "description": "パネルアイコンをクリックしてすべての見出しを表示し、ページの全体像を把握します。"
+      },
+      "step_five": {
+        "title": "バージョン履歴",
+        "description": "ページはバージョン履歴ですべての編集を追跡し、必要に応じて以前のバージョンを復元できます。"
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "インテークでリクエストを効率化",
+        "description": "ゲストがバグ、リクエスト、またはチケットの作業項目を作成できるPlane専用の機能です。"
+      },
+      "step_one": {
+        "title": "開いている/閉じているインテークリクエスト",
+        "description": "保留中のリクエストは「開く」タブに残り、管理者またはメンバーによって対処されると「閉じる」に移動します。"
+      },
+      "step_two": {
+        "title": "保留中のリクエストを承認/拒否",
+        "description": "承認して作業項目を編集し、プロジェクトに移動するか、拒否してキャンセル済みとしてマークします。"
+      },
+      "step_three": {
+        "title": "今はスヌーズ",
+        "description": "作業項目をスヌーズして後で確認できます。開いているリクエストリストの一番下に移動します。"
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "タブ切り替えをやめて、あなたの世界をつなげましょう。",
+        "description": "GitHubやSlackをリンクして、Plane AIで直接PRを追跡したりチャットを要約したりできます。"
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "ナビゲーション、再構築",
+        "sub_title": "ワークスペースは、よりスマートでシンプルなナビゲーションで探索しやすくなりました。",
+        "highlight_1": "より迅速な発見のための合理化された左パネル構造",
+        "highlight_2": "即座に何でもジャンプできる改善されたグローバル検索",
+        "highlight_3": "明確さと集中のためのよりスマートなカテゴリのグループ化",
+        "footer": "クイックウォークスルーをご希望ですか？"
+      },
+      "step_zero": {
+        "title": "何でも即座に見つける",
+        "description": "ユニバーサル検索を使用して、タスク、プロジェクト、ページ、人物にジャンプ—フローを離れることなく。"
+      },
+      "step_one": {
+        "title": "更新を管理し続ける",
+        "description": "受信トレイは、すべてのメンション、承認、アクティビティを1か所に保持するため、重要な作業を見逃すことはありません。"
+      },
+      "step_two": {
+        "title": "ナビゲーションをパーソナライズ",
+        "description": "設定で表示内容とナビゲーション方法をカスタマイズします。"
+      }
+    },
+    "actions": {
+      "close": "閉じる",
+      "next": "次へ",
+      "back": "戻る",
+      "done": "完了",
+      "take_a_tour": "ツアーを開始",
+      "get_started": "始める",
+      "got_it": "了解"
+    },
+    "seed_data": {
+      "title": "これがあなたのデモプロジェクトです",
+      "description": "プロジェクトを使用すると、ワークスペース内でチーム、タスク、物事を完了するために必要なすべてを管理できます。"
+    }
+  },
+  "get_started": {
+    "title": "こんにちは{name}さん、ようこそ！",
+    "description": "Planeでの旅を始めるために必要なすべてがここにあります。",
+    "checklist_section": {
+      "title": "始める",
+      "description": "セットアップを開始し、アイデアがより早く実現するのを見てください。",
+      "checklist_items": {
+        "item_1": {
+          "title": "プロジェクトを作成"
+        },
+        "item_2": {
+          "title": "作業項目を作成"
+        },
+        "item_3": {
+          "title": "チームメンバーを招待"
+        },
+        "item_4": {
+          "title": "ページを作成"
+        },
+        "item_5": {
+          "title": "Plane AIチャットを試す"
+        },
+        "item_6": {
+          "title": "統合をリンク"
+        }
+      }
+    },
+    "team_section": {
+      "title": "チームを招待",
+      "description": "チームメイトを招待して一緒に構築を開始します。"
+    },
+    "integrations_section": {
+      "title": "ワークスペースをパワーアップ",
+      "more_integrations": "その他の統合を参照"
+    },
+    "switch_to_plane_section": {
+      "title": "チームがPlaneに切り替える理由を発見",
+      "description": "今日使用しているツールとPlaneを比較して、違いを確認してください。"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/update.json b/packages/i18n/src/locales/ja/update.json
new file mode 100644
index 0000000..d595c1d
--- /dev/null
+++ b/packages/i18n/src/locales/ja/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "進捗",
+      "since_last_update": "最後の更新以来",
+      "comments": "{count, plural, one{# コメント} other{# コメント}}"
+    },
+    "add_update": "更新を追加",
+    "add_update_placeholder": "ここに更新を入力してください",
+    "empty": {
+      "title": "まだ更新がありません",
+      "description": "ここで更新を確認できます。"
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "反応が作成されました",
+          "message": "反応が正常に作成されました。"
+        },
+        "error": {
+          "title": "反応が作成されませんでした",
+          "message": "反応を作成できませんでした。"
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "反応が削除されました",
+          "message": "反応が正常に削除されました。"
+        },
+        "error": {
+          "title": "反応が削除されませんでした",
+          "message": "反応を削除できませんでした。"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "更新が作成されました",
+        "message": "更新が正常に作成されました。"
+      },
+      "error": {
+        "title": "更新が作成されませんでした",
+        "message": "更新を作成できませんでした。"
+      }
+    },
+    "delete": {
+      "title": "更新を削除",
+      "confirmation": "この更新を削除してもよろしいですか？この操作は元に戻すことができません。",
+      "success": {
+        "title": "更新が削除されました",
+        "message": "更新が正常に削除されました。"
+      },
+      "error": {
+        "title": "更新が削除されませんでした",
+        "message": "更新を削除できませんでした。"
+      }
+    },
+    "update": {
+      "success": {
+        "title": "更新が更新されました",
+        "message": "更新が正常に更新されました。"
+      },
+      "error": {
+        "title": "更新が更新されませんでした",
+        "message": "更新を更新できませんでした。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/wiki.json b/packages/i18n/src/locales/ja/wiki.json
new file mode 100644
index 0000000..7b656da
--- /dev/null
+++ b/packages/i18n/src/locales/ja/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "一般",
+      "private": "非公開",
+      "shared": "共有",
+      "archived": "アーカイブ済み"
+    },
+    "fallback_name": "コレクション",
+    "form": {
+      "name_required": "コレクション名は必須です",
+      "name_max_length": "コレクション名は255文字未満である必要があります",
+      "name_placeholder_create": "コレクションにタイトルを付けてください",
+      "name_placeholder_edit": "コレクション名"
+    },
+    "create_modal": {
+      "title": "コレクションを作成",
+      "submit": "コレクションを作成"
+    },
+    "edit_modal": {
+      "title": "コレクションを編集"
+    },
+    "delete_modal": {
+      "title": "コレクションを削除",
+      "page_count": "このコレクションには {pageCount} 件のページがあります。どうするか選択してください。",
+      "transfer_title": "ページを移動してコレクションを削除",
+      "transfer_description": "削除する前に、すべてのページを別のコレクションへ移動します。ページと権限は保持されます。",
+      "transfer_warning": "移動したページは、選択したコレクションの権限を引き継ぎます。",
+      "transfer_target_label": "ページの移動先",
+      "transfer_target_placeholder": "コレクションを選択",
+      "delete_with_pages_title": "ページごとコレクションを削除",
+      "delete_with_pages_description": "コレクションとすべてのページを完全に削除します。この操作は元に戻せません。",
+      "submit": "コレクションを削除"
+    },
+    "header": {
+      "add_page": "ページを追加"
+    },
+    "menu": {
+      "create_new_page": "新しいページを作成",
+      "add_existing_page": "既存のページを追加",
+      "edit_collection": "コレクションを編集",
+      "collection_options": "コレクションのオプション"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "ページを検索",
+      "success_message": "{count} 件のページをコレクションに追加しました。",
+      "error_message": "ページを移動できませんでした。もう一度お試しください。",
+      "no_pages_found": "検索条件に一致するページが見つかりません",
+      "no_pages_available": "移動できるページがありません",
+      "submit": "移動"
+    },
+    "list": {
+      "invite_only": "招待制",
+      "remove_error": "ページをコレクションから削除できませんでした。",
+      "no_matching_pages": "一致するページがありません",
+      "remove_search_criteria": "検索条件を削除するとすべてのページが表示されます",
+      "remove_filters": "フィルターを削除するとすべてのページが表示されます",
+      "no_pages_title": "まだページがありません",
+      "no_pages_description": "このコレクションにはまだページがありません。",
+      "untitled": "無題",
+      "restricted_access": "アクセス制限あり",
+      "collapse_page": "ページを折りたたむ",
+      "expand_page": "ページを展開",
+      "page_actions": "ページ操作",
+      "page_link_copied": "ページリンクをクリップボードにコピーしました。",
+      "columns": {
+        "page_name": "ページ名",
+        "owner": "所有者",
+        "nested_pages": "ネストされたページ",
+        "last_activity": "最終アクティビティ",
+        "actions": "操作"
+      }
+    },
+    "toasts": {
+      "created": "コレクションを作成しました。",
+      "create_error": "コレクションを作成できませんでした。もう一度お試しください。",
+      "renamed": "コレクション名を変更しました。",
+      "rename_error": "コレクションを更新できませんでした。もう一度お試しください。",
+      "transferred_deleted": "ページを移動し、コレクションを削除しました。",
+      "deleted_with_pages": "コレクションとそのページを削除しました。",
+      "delete_error": "コレクションを削除できませんでした。もう一度お試しください。",
+      "target_required": "ページの移動先となるコレクションを選択してください。",
+      "create_page_error": "ページを作成できませんでした。もう一度お試しください。",
+      "create_page_in_collection_error": "ページを作成するか、コレクションに追加できませんでした。もう一度お試しください。",
+      "collection_link_copied": "コレクションリンクをクリップボードにコピーしました。"
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "アップグレードしてWikiを利用",
+      "description": "Plane Proで、公開ページ、バージョン履歴、共有ページ、リアルタイム共同編集、Wiki・社内ドキュメント・ナレッジベース向けのワークスペースページを利用できます。",
+      "upgrade_button": {
+        "text": "アップグレード"
+      },
+      "learn_more_button": {
+        "text": "詳細を見る"
+      },
+      "download_button": {
+        "text": "データをダウンロード",
+        "loading": "ダウンロード中"
+      },
+      "tabs": {
+        "nested_pages": "ネストされたページ",
+        "add_embeds": "埋め込みを追加",
+        "publish_pages": "ページを公開",
+        "comments": "コメント"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "ネストされたページには有料プランが必要です。アップグレードしてご利用ください。"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/work-item-type.json b/packages/i18n/src/locales/ja/work-item-type.json
new file mode 100644
index 0000000..c068888
--- /dev/null
+++ b/packages/i18n/src/locales/ja/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "作業項目タイプ",
+    "label_lowercase": "作業項目タイプ",
+    "settings": {
+      "description": "チームのニーズに合わせて独自のプロパティをカスタマイズして追加できます。",
+      "cant_delete_default_message": "この作業項目タイプは削除できません。このプロジェクトのデフォルトの作業項目タイプとして設定されているためです。",
+      "set_as_default": "デフォルトに設定",
+      "cant_set_default_inactive_message": "デフォルトに設定する前にこのタイプを有効にしてください",
+      "set_default_confirmation": {
+        "title": "デフォルトの作業項目タイプに設定",
+        "description": "{name}をデフォルトに設定すると、このワークスペース内のすべてのプロジェクトにインポートされます。すべての新しい作業項目はデフォルトでこのタイプを使用します。",
+        "confirm_button": "デフォルトに設定"
+      },
+      "properties": {
+        "title": "カスタム作業項目プロパティ",
+        "description": "プロパティを作成・カスタマイズします。",
+        "tooltip": "各作業項目タイプには、タイトル、説明、担当者、状態、優先度、開始日、期限日、モジュール、サイクルなどのデフォルトのプロパティセットが付属しています。チームのニーズに合わせて独自のプロパティをカスタマイズして追加することもできます。",
+        "add_button": "新しいプロパティを追加",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "ワークスペースからインポート"
+          }
+        },
+        "dropdown": {
+          "label": "プロパティタイプ",
+          "placeholder": "タイプを選択"
+        },
+        "property_type": {
+          "text": {
+            "label": "テキスト"
+          },
+          "number": {
+            "label": "数値"
+          },
+          "dropdown": {
+            "label": "ドロップダウン"
+          },
+          "boolean": {
+            "label": "ブール値"
+          },
+          "date": {
+            "label": "日付"
+          },
+          "member_picker": {
+            "label": "メンバー選択"
+          },
+          "formula": {
+            "label": "数式"
+          }
+        },
+        "attributes": {
+          "label": "属性",
+          "text": {
+            "single_line": {
+              "label": "一行"
+            },
+            "multi_line": {
+              "label": "段落"
+            },
+            "readonly": {
+              "label": "読み取り専用",
+              "header": "読み取り専用データ"
+            },
+            "invalid_text_format": {
+              "label": "無効なテキスト形式"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "数値を追加"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "単一選択"
+            },
+            "multi_select": {
+              "label": "複数選択"
+            },
+            "no_default_value": {
+              "label": "デフォルト値なし"
+            }
+          },
+          "boolean": {
+            "label": "真 | 偽",
+            "no_default": "デフォルト値なし"
+          },
+          "option": {
+            "create_update": {
+              "label": "オプション",
+              "form": {
+                "placeholder": "オプションを追加",
+                "errors": {
+                  "name": {
+                    "required": "オプション名は必須です。",
+                    "integrity": "同じ名前のオプションが既に存在します。"
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "オプションを選択",
+                "multi": {
+                  "default": "オプションを選択",
+                  "variable": "{count}個のオプションが選択されました"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "成功！",
+              "message": "プロパティ{name}が正常に作成されました。"
+            },
+            "error": {
+              "title": "エラー！",
+              "message": "プロパティの作成に失敗しました。もう一度お試しください！"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "成功！",
+              "message": "プロパティ{name}が正常に更新されました。"
+            },
+            "error": {
+              "title": "エラー！",
+              "message": "プロパティの更新に失敗しました。もう一度お試しください！"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "成功！",
+              "message": "プロパティ{name}が正常に削除されました。"
+            },
+            "error": {
+              "title": "エラー！",
+              "message": "プロパティの削除に失敗しました。もう一度お試しください！"
+            }
+          },
+          "enable_disable": {
+            "loading": "プロパティ{name}を{action}中",
+            "success": {
+              "title": "成功！",
+              "message": "プロパティ{name}が正常に{action}されました。"
+            },
+            "error": {
+              "title": "エラー！",
+              "message": "プロパティの{action}に失敗しました。もう一度お試しください！"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "新しいカスタムプロパティを作成",
+            "update": "カスタムプロパティを更新"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "タイトル"
+            },
+            "description": {
+              "placeholder": "説明"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "プロパティに名前を付ける必要があります。",
+              "max_length": "プロパティ名は255文字を超えることはできません。"
+            },
+            "property_type": {
+              "required": "プロパティタイプを選択する必要があります。"
+            },
+            "options": {
+              "required": "少なくとも1つのオプションを追加する必要があります。"
+            },
+            "formula": {
+              "required": "数式の式が必要です。",
+              "invalid": "無効な数式: {error}",
+              "circular_reference": "循環参照が検出されました。数式は直接的にも間接的にも自身を参照することはできません。",
+              "invalid_reference": "数式が存在しないプロパティを参照しています。"
+            }
+          }
+        },
+        "formula": {
+          "field_label": "数式フィールド",
+          "tooltip": "'{'フィールド名'}'の構文を使用して数式を入力してください。+、-、*、/、&の演算子をサポートしています。",
+          "placeholder": "数式を入力",
+          "test_button": "テスト",
+          "validating": "検証中",
+          "validation_success": "数式は有効です！{resultType}を返します",
+          "validation_success_with_refs": "数式は有効です！{resultType}を返します（{count}フィールド参照）",
+          "error": {
+            "empty": "数式を入力してください",
+            "missing_context": "ワークスペース、プロジェクト、またはワークアイテムタイプのコンテキストがありません",
+            "validation_failed": "検証に失敗しました"
+          },
+          "picker": {
+            "no_match": "一致するプロパティがありません",
+            "no_available": "利用可能なプロパティがありません"
+          }
+        },
+        "enable_disable": {
+          "label": "アクティブ",
+          "tooltip": {
+            "disabled": "クリックして無効化",
+            "enabled": "クリックして有効化"
+          }
+        },
+        "delete_confirmation": {
+          "title": "このプロパティを削除",
+          "description": "プロパティの削除は既存のデータの損失につながる可能性があります。",
+          "secondary_description": "代わりにプロパティを無効化しますか？",
+          "primary_button": "{action}、削除します",
+          "secondary_button": "はい、無効化します"
+        },
+        "mandate_confirmation": {
+          "label": "必須プロパティ",
+          "content": "このプロパティにはデフォルトオプションが設定されているようです。プロパティを必須にすると、デフォルト値が削除され、ユーザーは自分で値を選択する必要があります。",
+          "tooltip": {
+            "disabled": "このプロパティタイプは必須にできません",
+            "enabled": "チェックを外して任意フィールドにする",
+            "checked": "チェックして必須フィールドにする"
+          }
+        },
+        "empty_state": {
+          "title": "カスタムプロパティを追加",
+          "description": "この作業項目タイプに追加する新しいプロパティがここに表示されます。"
+        }
+      },
+      "types": {
+        "title": "タイプ",
+        "description": "プロパティを持つ作業項目タイプを作成・カスタマイズします。",
+        "sort_options": {
+          "project_count": "所属プロジェクト数"
+        },
+        "filter_options": {
+          "show_active": "アクティブを表示",
+          "show_inactive": "非アクティブを表示"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "新規作成",
+            "import_from_workspace": "ワークスペースからインポート"
+          },
+          "banner": {
+            "with_access": "ワークスペースレベルからタイプをインポートするには、作業項目タイプを有効にしてください",
+            "without_access": "作業項目タイプは無効になっています。ワークスペース管理者に連絡して、ワークスペース設定で有効にしてもらってください。"
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "カスタムプロパティ",
+        "add_button": "プロパティを追加",
+        "modal": {
+          "title": "プロパティを追加",
+          "empty": {
+            "title": "利用可能なプロパティがありません",
+            "description": "すべてのプロパティはすでにこのタイプにリンクされています。"
+          }
+        },
+        "unlink_confirmation": {
+          "title": "プロパティのリンクを解除",
+          "description": "このプロパティのリンクを解除すると、このタイプを使用するすべての作業項目のすべての値が完全に削除されます。この操作は元に戻せません。",
+          "input_label": "入力",
+          "input_label_suffix": "して続行：",
+          "confirm": "プロパティのリンクを解除",
+          "loading": "リンク解除中"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "このタイプを削除",
+        "description": "タイプの削除は既存データの損失につながる可能性があります。",
+        "can_disable_warning": "代わりにタイプを無効にしますか？",
+        "primary_button": "はい、削除します",
+        "toast": {
+          "success": {
+            "title": "成功！",
+            "message": "作業項目のタイプが正常に削除されました。"
+          },
+          "error": {
+            "title": "エラー！",
+            "message": "作業項目のタイプを削除できませんでした。もう一度お試しください！"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "デフォルトの作業項目タイプは削除できません",
+          "cannot_delete_work_item_type_with_associated_work_items": "関連する作業項目がある作業項目タイプは削除できません"
+        }
+      }
+    },
+    "create": {
+      "title": "作業項目タイプを作成",
+      "button": "作業項目タイプを追加",
+      "toast": {
+        "success": {
+          "title": "成功！",
+          "message": "作業項目タイプが正常に作成されました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": {
+            "default": "作業項目タイプの作成に失敗しました。もう一度お試しください！",
+            "conflict": "{name} タイプはすでに存在します。別の名前を選んでください。"
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "作業項目タイプを更新",
+      "button": "作業項目タイプを更新",
+      "toast": {
+        "success": {
+          "title": "成功！",
+          "message": "作業項目タイプ{name}が正常に更新されました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": {
+            "default": "作業項目タイプの更新に失敗しました。もう一度お試しください！",
+            "conflict": "{name} タイプはすでに存在します。別の名前を選んでください。"
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "この作業項目タイプに一意の名前を付けてください"
+        },
+        "description": {
+          "placeholder": "この作業項目タイプの目的と使用時期について説明してください。"
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "作業項目タイプ{name}を{action}中",
+        "success": {
+          "title": "成功！",
+          "message": "作業項目タイプ{name}が正常に{action}されました。"
+        },
+        "error": {
+          "title": "エラー！",
+          "message": "作業項目タイプの{action}に失敗しました。もう一度お試しください！"
+        }
+      },
+      "tooltip": "クリックして{action}"
+    },
+    "change_confirmation": {
+      "title": "作業項目タイプを変更しますか？",
+      "description": "作業項目タイプを変更すると、現在のタイプに固有のカスタムプロパティ値が失われる可能性があります。この操作は元に戻せません。",
+      "button": {
+        "loading": "変更中",
+        "default": "タイプを変更"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "作業項目タイプを有効化",
+        "description": "作業項目タイプで作業項目を形作ります。アイコン、背景、プロパティでカスタマイズし、このプロジェクト用に設定します。",
+        "primary_button": {
+          "text": "有効化"
+        },
+        "confirmation": {
+          "title": "一度有効化すると、作業項目タイプは無効化できません。",
+          "description": "PlaneのWork itemがこのプロジェクトのデフォルトの作業項目タイプとなり、そのアイコンと背景がこのプロジェクトに表示されます。",
+          "button": {
+            "default": "有効化",
+            "loading": "設定中"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "作業項目タイプを有効化するにはProにアップグレードしてください。",
+        "description": "作業項目タイプで作業項目を形作ります。アイコン、背景、プロパティでカスタマイズし、このプロジェクト用に設定します。",
+        "primary_button": {
+          "text": "Proを取得"
+        }
+      },
+      "upgrade": {
+        "title": "作業項目タイプを有効化するにはアップグレードしてください。",
+        "description": "作業項目タイプで作業項目を形作ります。アイコン、背景、プロパティでカスタマイズし、このプロジェクト用に設定します。",
+        "primary_button": {
+          "text": "アップグレード"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "階層",
+      "tab_label": "階層",
+      "description": "作業を整理するための階層レベルを設定します。各レベルは、直接上のアイテムとの親関係と、直接下のアイテムとの子関係を定義します。 ",
+      "sidebar_label": "階層",
+      "enable_control": {
+        "title": "階層を有効にする",
+        "description": "異なる作業アイテムタイプ間に親子関係を作成します。",
+        "tooltip": "一度有効にすると、階層を無効にすることはできません。"
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "新しい階層を作成するには、まず作業アイテムタイプを定義してください。",
+        "cta": "作業アイテムタイプの設定"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "新しい階層レベルを追加するには、タイプをドラッグ＆ドロップしてください",
+      "empty_level_placeholder": "作業アイテムタイプをレベル {level} にドラッグ＆ドロップ",
+      "drag_tooltip": "ドラッグしてレベルを変更",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "デフォルトに設定",
+          "toast": {
+            "loading": "デフォルトに設定中...",
+            "success": {
+              "title": "成功！",
+              "message": "階層レベル {level} がデフォルトとして設定されました。"
+            },
+            "error": {
+              "title": "エラー！",
+              "message": "階層レベル {level} をデフォルトに設定できませんでした。もう一度お試しください。"
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "{workItemTypeName}をレベル{level}に移動しています...",
+        "success": {
+          "title": "成功！",
+          "message": "{workItemTypeName}をレベル{level}に正常に移動しました。"
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "保存すると既存のリンクが解除されます",
+      "content": {
+        "intro": "作業アイテムタイプ「{workItemTypeName}」には次が含まれます。",
+        "parent_items": "{count, plural, other {親リンク # 件が解除されます。}}",
+        "child_items": "{count, plural, other {子の作業アイテム}}",
+        "parent_line_suffix_when_also_children": "、および ",
+        "footer": "この変更により、{workItemTypeName} 作業アイテムタイプの既存の作業アイテムから親子関係が削除されます。"
+      },
+      "confirm_input": {
+        "label": "続けるには「確認」と入力してください。",
+        "placeholder": "確認"
+      },
+      "error_toast": {
+        "title": "エラー！",
+        "message": "リンク解除と保存に失敗しました。もう一度お試しください。"
+      },
+      "confirm_button": {
+        "loading": "保存中",
+        "default": "それでも保存する"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "エラー！",
+        "message": "選択した作業アイテムタイプは階層ルールに違反するため、新しい作業アイテムの作成に使用できません。"
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "エラー！",
+        "message": "作業アイテムタイプは階層ルールに違反するため更新できません。"
+      }
+    },
+    "work_item_type_modal": {
+      "level": "階層レベル",
+      "invalid_level_toast": {
+        "title": "エラー！",
+        "message": "階層ルールに違反するため、作業アイテムタイプを更新できませんでした。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/work-item.json b/packages/i18n/src/locales/ja/work-item.json
new file mode 100644
index 0000000..41bcdad
--- /dev/null
+++ b/packages/i18n/src/locales/ja/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {作業項目} other {作業項目}}",
+    "all": "すべての作業項目",
+    "edit": "作業項目を編集",
+    "title": {
+      "label": "作業項目のタイトル",
+      "required": "作業項目のタイトルは必須です。"
+    },
+    "add": {
+      "press_enter": "Enterを押して別の作業項目を追加",
+      "label": "作業項目を追加",
+      "cycle": {
+        "failed": "作業項目をサイクルに追加できませんでした。もう一度お試しください。",
+        "success": "{count, plural, one {作業項目} other {作業項目}}をサイクルに追加しました。",
+        "loading": "{count, plural, one {作業項目} other {作業項目}}をサイクルに追加中"
+      },
+      "assignee": "担当者を追加",
+      "start_date": "開始日を追加",
+      "due_date": "期限日を追加",
+      "parent": "親作業項目を追加",
+      "sub_issue": "サブ作業項目を追加",
+      "dependency": "依存関係を追加",
+      "relation": "関連を追加",
+      "link": "リンクを追加",
+      "existing": "既存の作業項目を追加"
+    },
+    "remove": {
+      "label": "作業項目を削除",
+      "cycle": {
+        "loading": "サイクルから作業項目を削除中",
+        "success": "作業項目をサイクルから削除しました。",
+        "failed": "作業項目をサイクルから削除できませんでした。もう一度お試しください。"
+      },
+      "module": {
+        "loading": "モジュールから作業項目を削除中",
+        "success": "作業項目をモジュールから削除しました。",
+        "failed": "作業項目をモジュールから削除できませんでした。もう一度お試しください。"
+      },
+      "parent": {
+        "label": "親作業項目を削除"
+      }
+    },
+    "new": "新規作業項目",
+    "adding": "作業項目を追加中",
+    "create": {
+      "success": "作業項目を作成しました"
+    },
+    "priority": {
+      "urgent": "緊急",
+      "high": "高",
+      "medium": "中",
+      "low": "低"
+    },
+    "display": {
+      "properties": {
+        "label": "表示プロパティ",
+        "id": "ID",
+        "issue_type": "作業項目タイプ",
+        "sub_issue_count": "サブ作業項目数",
+        "attachment_count": "添付ファイル数",
+        "created_on": "作成日",
+        "sub_issue": "サブ作業項目",
+        "work_item_count": "作業項目数"
+      },
+      "extra": {
+        "show_sub_issues": "サブ作業項目を表示",
+        "show_empty_groups": "空のグループを表示"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "このレイアウトは次の順序で並べ替えられています：",
+      "list": "リスト",
+      "kanban": "ボード",
+      "calendar": "カレンダー",
+      "spreadsheet": "テーブル",
+      "gantt": "タイムライン",
+      "title": {
+        "list": "リストレイアウト",
+        "kanban": "ボードレイアウト",
+        "calendar": "カレンダーレイアウト",
+        "spreadsheet": "テーブルレイアウト",
+        "gantt": "タイムラインレイアウト"
+      }
+    },
+    "states": {
+      "active": "アクティブ",
+      "backlog": "バックログ"
+    },
+    "comments": {
+      "placeholder": "コメントを追加",
+      "switch": {
+        "private": "プライベートコメントに切り替え",
+        "public": "公開コメントに切り替え"
+      },
+      "create": {
+        "success": "コメントを作成しました",
+        "error": "コメントの作成に失敗しました。後でもう一度お試しください。"
+      },
+      "update": {
+        "success": "コメントを更新しました",
+        "error": "コメントの更新に失敗しました。後でもう一度お試しください。"
+      },
+      "remove": {
+        "success": "コメントを削除しました",
+        "error": "コメントの削除に失敗しました。後でもう一度お試しください。"
+      },
+      "upload": {
+        "error": "アセットのアップロードに失敗しました。後でもう一度お試しください。"
+      },
+      "copy_link": {
+        "success": "コメントリンクがクリップボードにコピーされました",
+        "error": "コメントリンクのコピーに失敗しました。後でもう一度お試しください。"
+      },
+      "replies": {
+        "create": {
+          "submit_button": "返信を追加",
+          "placeholder": "返信を追加"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "返信の取得に失敗しました"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "返信を作成しました"
+            },
+            "error": {
+              "message": "返信の作成に失敗しました"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "返信を更新しました"
+            },
+            "error": {
+              "message": "返信の更新に失敗しました"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "返信を削除しました"
+            },
+            "error": {
+              "message": "返信の削除に失敗しました"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "作業項目が存在しません",
+        "description": "お探しの作業項目は存在しないか、アーカイブされているか、削除されています。",
+        "primary_button": {
+          "text": "他の作業項目を表示"
+        }
+      }
+    },
+    "sibling": {
+      "label": "兄弟作業項目"
+    },
+    "archive": {
+      "description": "完了またはキャンセルされた\n作業項目のみアーカイブできます",
+      "label": "作業項目をアーカイブ",
+      "confirm_message": "作業項目をアーカイブしてもよろしいですか？アーカイブされた作業項目は後で復元できます。",
+      "success": {
+        "label": "アーカイブ成功",
+        "message": "アーカイブはプロジェクトのアーカイブで確認できます。"
+      },
+      "failed": {
+        "message": "作業項目をアーカイブできませんでした。もう一度お試しください。"
+      },
+      "banner_message": "この作業項目はアーカイブされました。復元するには、アーカイブセクションをご確認ください。",
+      "go_to_archives": "アーカイブに移動"
+    },
+    "restore": {
+      "success": {
+        "title": "復元成功",
+        "message": "作業項目はプロジェクトの作業項目で確認できます。"
+      },
+      "failed": {
+        "message": "作業項目を復元できませんでした。もう一度お試しください。"
+      }
+    },
+    "relation": {
+      "relates_to": "関連する",
+      "duplicate": "重複する",
+      "blocked_by": "ブロックされている",
+      "blocking": "ブロックしている",
+      "start_before": "開始前",
+      "start_after": "開始後",
+      "finish_before": "終了前",
+      "finish_after": "終了後",
+      "implements": "実装",
+      "implemented_by": "実装元"
+    },
+    "copy_link": "作業項目のリンクをコピー",
+    "delete": {
+      "label": "作業項目を削除",
+      "error": "作業項目の削除中にエラーが発生しました"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "作業項目を購読しました",
+        "unsubscribed": "作業項目の購読を解除しました"
+      }
+    },
+    "select": {
+      "error": "少なくとも1つの作業項目を選択してください",
+      "empty": "作業項目が選択されていません",
+      "add_selected": "選択した作業項目を追加",
+      "select_all": "すべて選択",
+      "deselect_all": "すべての選択を解除"
+    },
+    "open_in_full_screen": "作業項目をフルスクリーンで開く",
+    "duplicate": {
+      "modal": {
+        "title": "別のプロジェクトにコピーを作成",
+        "description1": "作業項目のコピーを作成します。",
+        "description2": "複製の際にすべてのプロパティデータが削除されます。",
+        "placeholder": "プロジェクトを選択"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "作業項目を複製しました"
+        },
+        "error": {
+          "message": "作業項目の複製に失敗しました"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "ページを接続",
+      "show_wiki_pages": "Wikiページを表示",
+      "link_pages_to": "ページを接続",
+      "linked_pages": "リンクされたページ",
+      "no_description": "このページは空です。何かを書いて、ここにこのプレースホルダーとして表示してください。",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "ページが更新されました",
+            "message": "ページが正常に更新されました"
+          },
+          "error": {
+            "title": "ページが更新されませんでした",
+            "message": "ページを更新できませんでした"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "ページが削除されました",
+            "message": "ページが正常に削除されました"
+          },
+          "error": {
+            "title": "ページが削除されませんでした",
+            "message": "ページを削除できませんでした"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "クリックして賛成票を投じる",
+      "click_to_downvote": "クリックして反対票を投じる",
+      "click_to_view_upvotes": "クリックして賛成票を表示",
+      "click_to_view_downvotes": "クリックして反対票を表示"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "サブ作業項目を更新しました",
+      "error": "サブ作業項目の更新中にエラーが発生しました"
+    },
+    "remove": {
+      "success": "サブ作業項目を削除しました",
+      "error": "サブ作業項目の削除中にエラーが発生しました"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "適用されたフィルターに一致するサブ作業項目がありません。",
+        "description": "すべてのサブ作業項目を表示するには、すべての適用されたフィルターをクリアしてください。",
+        "action": "フィルターをクリア"
+      },
+      "list_filters": {
+        "title": "適用されたフィルターに一致する作業項目がありません。",
+        "description": "すべての作業項目を表示するには、すべての適用されたフィルターをクリアしてください。",
+        "action": "フィルターをクリア"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "一致する作業項目が見つかりません"
+      },
+      "no_issues": {
+        "title": "作業項目が見つかりません"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "コメントがまだありません",
+        "description": "コメントは作業項目のディスカッションとフォローアップのスペースとして使用できます"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "作業項目をアーカイブできません",
+        "message": "完了または取り消し状態グループに属する作業項目のみアーカイブできます。"
+      },
+      "invalid_issue_start_date": {
+        "title": "作業項目を更新できません",
+        "message": "選択された開始日が一部の作業項目の期限日を超えています。開始日が期限日より前になるようにしてください。"
+      },
+      "invalid_issue_target_date": {
+        "title": "作業項目を更新できません",
+        "message": "選択された期限日が一部の作業項目の開始日より前になっています。期限日が開始日より後になるようにしてください。"
+      },
+      "invalid_state_transition": {
+        "title": "作業項目を更新できません",
+        "message": "一部の作業項目では状態の変更が許可されていません。状態の変更が許可されていることを確認してください。"
+      }
+    },
+    "upgrade_banner": {
+      "message": "複数の作業項目の状態や優先度などを一括で変更できます。1回の操作につき平均3分を節約できます。",
+      "cta": "One にアップグレード"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "定期作業項目",
+      "description": "繰り返しの作業を1回設定するだけで、繰り返しを管理します。時間が来たらここにすべて表示されます。",
+      "new_recurring_work_item": "新しい定期作業項目",
+      "update_recurring_work_item": "定期作業項目を更新",
+      "form": {
+        "interval": {
+          "title": "スケジュール",
+          "start_date": {
+            "validation": {
+              "required": "開始日は必須です"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "間隔タイプは必須です"
+            }
+          }
+        },
+        "button": {
+          "create": "定期作業項目を作成",
+          "update": "定期作業項目を更新"
+        }
+      },
+      "create_button": {
+        "label": "定期作業項目を作成",
+        "no_permission": "定期作業項目を作成するにはプロジェクト管理者に連絡してください"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "あなたの作業を自動化",
+        "description": "一度設定すれば、期限が来たときに自動で再作成します。定期作業をより簡単にするにはBusinessへアップグレードしてください。"
+      },
+      "no_templates": {
+        "button": "最初の定期作業項目を作成"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "定期作業項目が作成されました",
+          "message": "{name}（定期作業項目）がワークスペースで利用可能になりました。"
+        },
+        "error": {
+          "title": "定期作業項目を作成できませんでした。",
+          "message": "もう一度詳細を保存するか、別のタブで新しい定期作業項目にコピーしてください。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "定期作業項目が変更されました",
+          "message": "{name}（定期作業項目）が変更されました。"
+        },
+        "error": {
+          "title": "この定期作業項目の変更を保存できませんでした。",
+          "message": "もう一度詳細を保存するか、後でこの定期作業項目に戻ってください。問題が解決しない場合はご連絡ください。"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "定期作業項目が削除されました",
+          "message": "{name}（定期作業項目）がワークスペースから削除されました。"
+        },
+        "error": {
+          "title": "定期作業項目を削除できませんでした。",
+          "message": "もう一度削除するか、後で再度お試しください。それでも削除できない場合はご連絡ください。"
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "定期作業項目を削除",
+      "description": {
+        "prefix": "定期作業項目「",
+        "suffix": "」を削除してもよろしいですか？この定期作業項目に関連するすべてのデータは完全に削除されます。この操作は元に戻せません。"
+      }
+    }
+  },
+  "epic": {
+    "new": "新規エピック",
+    "label": "{count, plural, one {エピック} other {エピック}}",
+    "adding": "エピックを追加中",
+    "create": {
+      "success": "エピックを作成しました"
+    },
+    "add": {
+      "label": "エピックを追加",
+      "press_enter": "Enterを押して別のエピックを追加"
+    },
+    "title": {
+      "label": "エピックのタイトル",
+      "required": "エピックのタイトルは必須です。"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/workflow.json b/packages/i18n/src/locales/ja/workflow.json
new file mode 100644
index 0000000..b300b4a
--- /dev/null
+++ b/packages/i18n/src/locales/ja/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "新しい作業項目を許可",
+      "work_item_creation_disable_tooltip": "作業項目の作成はこの状態では無効になっています",
+      "default_state": "デフォルトの状態は、すべてのメンバーが新しい作業項目を作成できるように設定されています。これは変更できません",
+      "state_change_count": "{count, plural, one {1つの許可された状態変更} other {{count}つの許可された状態変更}}",
+      "movers_count": "{count, plural, one {1人のリストされたレビューア} other {{count}人のリストされたレビューア}}",
+      "state_changes": {
+        "label": {
+          "default": "許可された状態変更を追加",
+          "loading": "許可された状態変更を追加中"
+        },
+        "move_to": "状態を変更",
+        "movers": {
+          "label": "誰によって移動された場合",
+          "tooltip": "レビューアは、作業項目を一つの状態から別の状態に移動することを許可されている人々です。",
+          "add": "レビューアを追加"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "この作業項目をここに移動できません。"
+    },
+    "workflow_enabled": {
+      "label": "状態変更"
+    },
+    "workflow_tree": {
+      "label": "作業項目が",
+      "state_change_label": "をここに移動できます"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "変更とレビューの混沌をワークフローで制御。",
+        "description": "Plane内のワークフローで、作業がどこに移動するか、誰によって、そしていつによって移動するかを規則を設定します。"
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "変更履歴を表示",
+      "reset_workflow": "ワークフローをリセット"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "このワークフローをリセットしてよろしいですか？",
+        "description": "このワークフローをリセットすると、すべての状態変更ルールが削除され、このプロジェクトで再度実行するために再作成が必要になります。"
+      },
+      "delete_state_change": {
+        "title": "この状態変更ルールを削除してよろしいですか？",
+        "description": "削除すると、変更ができなくなり、このプロジェクトで再度実行するために再設定が必要になります。"
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action}ワークフロー",
+        "success": {
+          "title": "成功",
+          "message": "ワークフローが{action}されました"
+        },
+        "error": {
+          "title": "エラー",
+          "message": "ワークフローが{action}できませんでした。もう一度お試しください。"
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "成功",
+          "message": "ワークフローがリセットされました"
+        },
+        "error": {
+          "title": "ワークフローのリセットエラー",
+          "message": "ワークフローがリセットできませんでした。もう一度お試しください。"
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "状態変更ルールの追加エラー",
+          "message": "状態変更ルールが追加できませんでした。もう一度お試しください。"
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "状態変更ルールの変更エラー",
+          "message": "状態変更ルールが変更できませんでした。もう一度お試しください。"
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "状態変更ルールの削除エラー",
+          "message": "状態変更ルールが削除できませんでした。もう一度お試しください。"
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "状態変更ルールのレビューアの変更エラー",
+          "message": "状態変更ルールのレビューアが変更できませんでした。もう一度お試しください。"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/workspace-settings.json b/packages/i18n/src/locales/ja/workspace-settings.json
new file mode 100644
index 0000000..5b397b2
--- /dev/null
+++ b/packages/i18n/src/locales/ja/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "ワークスペース設定",
+    "page_label": "{workspace} - 一般設定",
+    "key_created": "キーが作成されました",
+    "copy_key": "このシークレットキーをコピーしてPlaneページに保存してください。閉じた後はこのキーを見ることができません。キーを含むCSVファイルがダウンロードされました。",
+    "token_copied": "トークンがクリップボードにコピーされました。",
+    "settings": {
+      "general": {
+        "title": "一般",
+        "upload_logo": "ロゴをアップロード",
+        "edit_logo": "ロゴを編集",
+        "name": "ワークスペース名",
+        "company_size": "会社の規模",
+        "url": "ワークスペースURL",
+        "workspace_timezone": "ワークスペースのタイムゾーン",
+        "update_workspace": "ワークスペースを更新",
+        "delete_workspace": "このワークスペースを削除",
+        "delete_workspace_description": "ワークスペースを削除すると、そのワークスペース内のすべてのデータとリソースが完全に削除され、復元することはできません。",
+        "delete_btn": "このワークスペースを削除",
+        "delete_modal": {
+          "title": "このワークスペースを削除してもよろしいですか？",
+          "description": "有料プランの無料トライアルが有効です。続行するには、まずトライアルをキャンセルしてください。",
+          "dismiss": "閉じる",
+          "cancel": "トライアルをキャンセル",
+          "success_title": "ワークスペースが削除されました。",
+          "success_message": "まもなくプロフィールページに移動します。",
+          "error_title": "操作に失敗しました。",
+          "error_message": "もう一度お試しください。"
+        },
+        "errors": {
+          "name": {
+            "required": "名前は必須です",
+            "max_length": "ワークスペース名は80文字を超えることはできません"
+          },
+          "company_size": {
+            "required": "会社の規模は必須です",
+            "select_a_range": "組織の規模を選択"
+          }
+        }
+      },
+      "members": {
+        "title": "メンバー",
+        "add_member": "メンバーを追加",
+        "pending_invites": "保留中の招待",
+        "invitations_sent_successfully": "招待が正常に送信されました",
+        "leave_confirmation": "ワークスペースから退出してもよろしいですか？このワークスペースにアクセスできなくなります。この操作は取り消せません。",
+        "details": {
+          "full_name": "フルネーム",
+          "display_name": "表示名",
+          "email_address": "メールアドレス",
+          "account_type": "アカウントタイプ",
+          "authentication": "認証",
+          "joining_date": "参加日"
+        },
+        "modal": {
+          "title": "共同作業者を招待",
+          "description": "ワークスペースに共同作業者を招待します。",
+          "button": "招待を送信",
+          "button_loading": "招待を送信中",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "招待するにはメールアドレスが必要です。",
+            "invalid": "メールアドレスが無効です"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "請求とプラン",
+        "description": "プランを選択してサブスクリプションを管理し、ニーズの拡大に応じて簡単にアップグレードできます。",
+        "title": "請求とプラン",
+        "current_plan": "現在のプラン",
+        "free_plan": "現在フリープランを使用中です",
+        "view_plans": "プランを表示"
+      },
+      "exports": {
+        "heading": "エクスポート",
+        "description": "プロジェクトデータをさまざまな形式でエクスポートし、ダウンロードリンク付きのエクスポート履歴にアクセスできます。",
+        "title": "エクスポート",
+        "exporting": "エクスポート中",
+        "previous_exports": "過去のエクスポート",
+        "export_separate_files": "データを個別のファイルにエクスポート",
+        "exporting_projects": "プロジェクトをエクスポート中",
+        "format": "形式",
+        "filters_info": "フィルターを適用して、条件に基づいて特定の作業項目をエクスポートします。",
+        "modal": {
+          "title": "エクスポート先",
+          "toasts": {
+            "success": {
+              "title": "エクスポート成功",
+              "message": "エクスポートした{entity}は過去のエクスポートからダウンロードできます。"
+            },
+            "error": {
+              "title": "エクスポート失敗",
+              "message": "エクスポートに失敗しました。もう一度お試しください。"
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhook",
+        "description": "プロジェクトイベントが発生したときに、外部サービスへの通知を自動化します。",
+        "title": "Webhook",
+        "add_webhook": "Webhookを追加",
+        "modal": {
+          "title": "Webhookを作成",
+          "details": "Webhook詳細",
+          "payload": "ペイロードURL",
+          "question": "このWebhookをトリガーするイベントを選択してください",
+          "error": "URLは必須です"
+        },
+        "secret_key": {
+          "title": "シークレットキー",
+          "message": "Webhookペイロードにサインインするためのトークンを生成"
+        },
+        "options": {
+          "all": "すべてを送信",
+          "individual": "個別のイベントを選択"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook作成完了",
+            "message": "Webhookが正常に作成されました"
+          },
+          "not_created": {
+            "title": "Webhook作成失敗",
+            "message": "Webhookを作成できませんでした"
+          },
+          "updated": {
+            "title": "Webhook更新完了",
+            "message": "Webhookが正常に更新されました"
+          },
+          "not_updated": {
+            "title": "Webhook更新失敗",
+            "message": "Webhookを更新できませんでした"
+          },
+          "removed": {
+            "title": "Webhook削除完了",
+            "message": "Webhookが正常に削除されました"
+          },
+          "not_removed": {
+            "title": "Webhook削除失敗",
+            "message": "Webhookを削除できませんでした"
+          },
+          "secret_key_copied": {
+            "message": "シークレットキーがクリップボードにコピーされました。"
+          },
+          "secret_key_not_copied": {
+            "message": "シークレットキーのコピー中にエラーが発生しました。"
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "APIトークン",
+        "description": "セキュアなAPIトークンを生成して、データを外部システムやアプリケーションと統合します。",
+        "title": "APIトークン",
+        "add_token": "アクセストークンを追加",
+        "create_token": "トークンを作成",
+        "never_expires": "無期限",
+        "generate_token": "トークンを生成",
+        "generating": "生成中",
+        "delete": {
+          "title": "APIトークンを削除",
+          "description": "このトークンを使用しているアプリケーションはPlaneのデータにアクセスできなくなります。この操作は取り消せません。",
+          "success": {
+            "title": "成功！",
+            "message": "APIトークンが正常に削除されました"
+          },
+          "error": {
+            "title": "エラー！",
+            "message": "APIトークンを削除できませんでした"
+          }
+        }
+      },
+      "integrations": {
+        "title": "インテグレーション",
+        "heading": "インテグレーション",
+        "description": "人気のツールやサービスと接続して、ワークフローエコシステム全体で作業を同期します。",
+        "page_title": "Plane のデータを利用可能なアプリや自分のアプリで利用できます。",
+        "page_description": "このワークスペースまたはあなたが使用しているすべての連携を表示します。"
+      },
+      "imports": {
+        "title": "インポート",
+        "heading": "インポート",
+        "description": "既存のプロジェクト管理ツールからデータを接続・インポートして、ワークフロー統合を効率化します。"
+      },
+      "worklogs": {
+        "title": "作業ログ",
+        "heading": "作業ログ",
+        "description": "あらゆるプロジェクトの誰の作業ログ（タイムシート）でもダウンロードできます。"
+      },
+      "group_syncing": {
+        "title": "グループ同期",
+        "heading": "グループ同期",
+        "description": "IDプロバイダーのグループをプロジェクトとロールにリンクします。IdPのグループメンバーシップが変更されるとユーザーアクセスが自動的に更新され、オンボーディングとオフボーディングが簡素化されます。",
+        "enable": {
+          "title": "グループ同期を有効にする",
+          "description": "IDプロバイダーのグループに基づいて、ユーザーをプロジェクトに自動的に追加します。"
+        },
+        "config": {
+          "title": "グループ同期の設定",
+          "description": "IDプロバイダーのグループがプロジェクトとロールにどのようにマッピングされるかを設定します。",
+          "sync_on_login": {
+            "title": "ログイン時同期",
+            "description": "ユーザーがログインしたときにグループメンバーシップとプロジェクトアクセスを更新します。"
+          },
+          "sync_offline": {
+            "title": "オフライン同期",
+            "description": "ユーザーのログインを待たずに、6時間ごとに自動的に同期を実行します。"
+          },
+          "auto_remove": {
+            "title": "自動削除",
+            "description": "グループに一致しなくなったユーザーをプロジェクトから自動的に削除します。"
+          },
+          "group_attribute_key": {
+            "title": "グループ属性キー",
+            "description": "ユーザーグループの識別と同期に使用するIDプロバイダーの属性。",
+            "placeholder": "グループ"
+          }
+        },
+        "group_mapping": {
+          "title": "グループマッピング",
+          "description": "IDプロバイダーのグループをプロジェクトとロールにリンクします。",
+          "button_text": "新しいグループ同期を追加"
+        },
+        "toast": {
+          "updating": "グループ同期機能を更新中",
+          "success": "グループ同期機能が正常に更新されました。",
+          "error": "グループ同期機能の更新に失敗しました！"
+        },
+        "delete_modal": {
+          "title": "グループ同期を削除",
+          "content": "このIDグループの新規ユーザーはプロジェクトに追加されなくなります。既に追加されたユーザーは現在のロールを維持します。"
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "ユーザーグループ",
+            "required": "ユーザーグループは必須です",
+            "placeholder": "IdPグループ名を入力"
+          },
+          "project": {
+            "text": "プロジェクト",
+            "required": "プロジェクトは必須です",
+            "placeholder": "プロジェクトを選択"
+          },
+          "default_role": {
+            "text": "プロジェクトロール",
+            "required": "プロジェクトロールは必須です",
+            "placeholder": "プロジェクトロールを選択"
+          }
+        }
+      },
+      "identity": {
+        "title": "アイデンティティ",
+        "heading": "アイデンティティ",
+        "description": "ドメインを設定し、シングルサインオンを有効にします"
+      },
+      "project_states": {
+        "title": "プロジェクトの状態",
+        "heading": "すべてのプロジェクトの進捗概要を確認します。",
+        "description": "プロジェクトステータスは、任意のプロジェクトプロパティでプロジェクトの進捗を追跡するためのPlane専用の機能です。",
+        "go_to_settings": "設定へ移動"
+      },
+      "projects": {
+        "title": "プロジェクト",
+        "description": "プロジェクトの状態管理、プロジェクトラベルの有効化、その他の設定を行います。",
+        "tabs": {
+          "states": "プロジェクトの状態",
+          "labels": "プロジェクトラベル"
+        }
+      },
+      "templates": {
+        "title": "テンプレート",
+        "heading": "テンプレート",
+        "description": "テンプレートを使用すると、プロジェクト、作業項目、ページの作成にかかる時間を80%短縮できます。"
+      },
+      "relations": {
+        "title": "関連",
+        "heading": "関連",
+        "description": "ワークスペース全体で作業項目を接続する関連タイプを作成・管理します。"
+      },
+      "cancel_trial": {
+        "title": "まずトライアルをキャンセルしてください。",
+        "description": "有料プランのトライアルが有効です。続行するには、まずキャンセルしてください。",
+        "dismiss": "閉じる",
+        "cancel": "トライアルをキャンセル",
+        "cancel_success_title": "トライアルがキャンセルされました。",
+        "cancel_success_message": "ワークスペースを削除できるようになりました。",
+        "cancel_error_title": "エラーが発生しました。",
+        "cancel_error_message": "もう一度お試しください。"
+      },
+      "applications": {
+        "internal": "内部",
+        "title": "アプリケーション",
+        "applicationId_copied": "アプリケーションIDをクリップボードにコピーしました",
+        "clientId_copied": "クライアントIDをクリップボードにコピーしました",
+        "clientSecret_copied": "クライアントシークレットをクリップボードにコピーしました",
+        "third_party_apps": "サードパーティアプリ",
+        "your_apps": "あなたのアプリ",
+        "connect": "接続",
+        "connected": "接続済み",
+        "disconnect": "切断",
+        "install": "インストール",
+        "installed": "インストール済み",
+        "configure": "設定",
+        "app_available": "このアプリをPlaneワークスペースで使用できるようにしました",
+        "app_credentials_regenrated": {
+          "title": "アプリの認証情報が正常に再生成されました",
+          "description": "クライアントシークレットを使用しているすべての場所で置き換えてください。以前のシークレットは無効になっています。"
+        },
+        "app_created": {
+          "title": "アプリが正常に作成されました",
+          "description": "認証情報を使用して、Plane ワークスペースにアプリをインストールしてください"
+        },
+        "installed_apps": "インストール済みアプリ",
+        "all_apps": "すべてのアプリ",
+        "internal_apps": "内部アプリ",
+        "app_name_title": "このアプリの名前を入力してください",
+        "app_description_title": {
+          "label": "詳細な説明",
+          "placeholder": "マーケットプレイス用の詳細な説明を書いてください。コマンドを表示するには '/' を押してください。"
+        },
+        "authorization_grant_type": {
+          "title": "接続タイプ",
+          "description": "アプリをワークスペースに一度インストールするか、各ユーザーが自分のアカウントを接続できるようにするかを選択してください"
+        },
+        "website": {
+          "title": "ウェブサイト",
+          "description": "アプリのウェブサイトへのリンク。",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "アプリ作成者",
+          "description": "アプリを作成している人物または組織。"
+        },
+        "app_maker_error": "アプリ作成者は必須です",
+        "setup_url": {
+          "label": "セットアップURL",
+          "description": "ユーザーはアプリをインストールすると、このURLにリダイレクトされます。",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "Webhook URL",
+          "description": "これは、アプリがインストールされているワークスペースからのWebhookイベントや更新を送信する場所です。",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Webhookシークレット",
+          "description": "受信するWebhookリクエストを検証するために使用するシークレット。",
+          "placeholder": "ランダムなシークレットキーを入力"
+        },
+        "redirect_uris": {
+          "label": "リダイレクトURI（スペース区切り）",
+          "description": "ユーザーは Plane で認証した後、このパスにリダイレクトされます。",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "使用を開始するにはPlaneワークスペースに接続してください",
+        "client_id_and_secret": "クライアントIDとシークレット",
+        "client_id_and_secret_description": "このシークレットキーをコピーして保存してください。閉じた後はこのキーを見ることができません。",
+        "client_id_and_secret_download": "ここからキーをCSVでダウンロードできます。",
+        "application_id": "アプリケーションID",
+        "client_id": "クライアントID",
+        "client_secret": "クライアントシークレット",
+        "export_as_csv": "CSVとしてエクスポート",
+        "slug_already_exists": "スラッグは既に存在します",
+        "failed_to_create_application": "アプリケーションの作成に失敗しました",
+        "upload_logo": "ロゴをアップロード",
+        "app_name_error": "アプリ名は必須です",
+        "app_short_description_title": "このアプリの短い説明を入力してください",
+        "app_short_description_error": "アプリの短い説明は必須です",
+        "app_description_error": "アプリの説明は必須です",
+        "app_slug_title": "アプリのスラッグ",
+        "app_slug_error": "アプリのスラッグは必須です",
+        "invalid_website_error": "無効なWebサイト",
+        "webhook_url_title": "WebhookのURL",
+        "webhook_url_error": "WebhookのURLは必須です",
+        "invalid_webhook_url_error": "無効なWebhookのURL",
+        "redirect_uris_title": "リダイレクトURI",
+        "redirect_uris_error": "リダイレクトURIは必須です",
+        "invalid_redirect_uris_error": "無効なリダイレクトURI",
+        "redirect_uris_description": "アプリがユーザーをリダイレクトする先のURIをスペース区切りで入力してください（例：https://example.com https://example.com/）",
+        "authorized_javascript_origins_title": "許可されたJavaScriptオリジン",
+        "authorized_javascript_origins_error": "許可されたJavaScriptオリジンは必須です",
+        "invalid_authorized_javascript_origins_error": "無効な許可されたJavaScriptオリジン",
+        "authorized_javascript_origins_description": "アプリがリクエストを行うことができるオリジンをスペース区切りで入力してください（例：app.com example.com）",
+        "create_app": "アプリを作成",
+        "update_app": "アプリを更新",
+        "build_your_own_app": "独自のアプリを構築",
+        "edit_app_details": "アプリの詳細を編集",
+        "regenerate_client_secret_description": "クライアントシークレットを再生成します。再生成後、キーをコピーするかCSVファイルとしてダウンロードできます。",
+        "regenerate_client_secret": "クライアントシークレットを再生成",
+        "regenerate_client_secret_confirm_title": "クライアントシークレットを再生成してもよろしいですか？",
+        "regenerate_client_secret_confirm_description": "このシークレットを使用しているアプリは動作しなくなります。アプリでシークレットを更新する必要があります。",
+        "regenerate_client_secret_confirm_cancel": "キャンセル",
+        "regenerate_client_secret_confirm_regenerate": "再生成",
+        "read_only_access_to_workspace": "ワークスペースへの読み取り専用アクセス",
+        "write_access_to_workspace": "ワークスペースへの書き込みアクセス",
+        "read_only_access_to_user_profile": "ユーザープロフィールへの読み取り専用アクセス",
+        "write_access_to_user_profile": "ユーザープロフィールへの書き込みアクセス",
+        "connect_app_to_workspace": "{app}を{workspace}ワークスペースに接続",
+        "user_permissions": "ユーザー権限",
+        "user_permissions_description": "ユーザー権限は、ユーザープロフィールへのアクセスを許可するために使用されます。",
+        "workspace_permissions": "ワークスペース権限",
+        "workspace_permissions_description": "ワークスペース権限は、ワークスペースへのアクセスを許可するために使用されます。",
+        "with_the_permissions": "権限付きで",
+        "app_consent_title": "{app}があなたのPlaneワークスペースとプロフィールへのアクセスを要求しています。",
+        "choose_workspace_to_connect_app_with": "アプリを接続するワークスペースを選択してください",
+        "app_consent_workspace_permissions_title": "{app}は以下を要求しています",
+        "app_consent_user_permissions_title": "{app}は以下のリソースに対するユーザーの許可も要求できます。これらの権限はユーザーによってのみ要求され、承認されます。",
+        "app_consent_accept_title": "承認することで",
+        "app_consent_accept_1": "アプリにPlane内外でアプリを使用できる場所であなたのPlaneデータへのアクセスを許可します",
+        "app_consent_accept_2": "{app}のプライバシーポリシーと利用規約に同意します",
+        "accepting": "承認中...",
+        "accept": "承認",
+        "categories": "カテゴリー",
+        "select_app_categories": "アプリのカテゴリーを選択",
+        "categories_title": "カテゴリー",
+        "categories_error": "カテゴリーは必須です",
+        "invalid_categories_error": "無効なカテゴリー",
+        "categories_description": "アプリを最もよく説明するカテゴリーを選択してください",
+        "supported_plans": "サポートされているプラン",
+        "supported_plans_description": "このアプリケーションをインストールできるワークスペースプランを選択してください。空のままにすると、すべてのプランが許可されます。",
+        "select_plans": "プランを選択",
+        "privacy_policy_url_title": "プライバシーポリシーURL",
+        "privacy_policy_url_error": "プライバシーポリシーURLは必須です",
+        "invalid_privacy_policy_url_error": "無効なプライバシーポリシーURL",
+        "terms_of_service_url_title": "利用規約URL",
+        "terms_of_service_url_error": "利用規約URLは必須です",
+        "invalid_terms_of_service_url_error": "無効な利用規約URL",
+        "support_url_title": "サポートURL",
+        "support_url_error": "サポートURLは必須です",
+        "invalid_support_url_error": "無効なサポートURL",
+        "video_url_title": "ビデオURL",
+        "video_url_error": "ビデオURLは必須です",
+        "invalid_video_url_error": "無効なビデオURL",
+        "setup_url_error": "セットアップURLは必須です",
+        "invalid_setup_url_error": "無効なセットアップURL",
+        "configuration_url_title": "設定URL",
+        "configuration_url_error": "設定URLは必須です",
+        "invalid_configuration_url_error": "無効な設定URL",
+        "contact_email_title": "連絡先メール",
+        "contact_email_error": "連絡先メールは必須です",
+        "invalid_contact_email_error": "無効な連絡先メール",
+        "upload_attachments": "添付ファイルをアップロード",
+        "uploading_images": "アップロード中 {count} 画像{count, plural, one {s} other {s}}",
+        "drop_images_here": "画像をここにドラッグ&ドロップ",
+        "click_to_upload_images": "画像をクリックしてアップロード",
+        "invalid_file_or_exceeds_size_limit": "無効なファイルまたはサイズの制限を超えています ({size} MB)",
+        "uploading": "アップロード中...",
+        "upload_and_save": "アップロードして保存",
+        "app_consent_no_access_title": "インストールリクエスト",
+        "app_consent_no_access_description": "このアプリは、ワークスペースの管理者がインストールした後にのみインストールできます。続行するには、ワークスペースの管理者に連絡してください。",
+        "app_consent_unapproved_title": "このアプリはまだPlaneによってレビューまたは承認されていません。",
+        "app_consent_unapproved_description": "ワークスペースに接続する前に、このアプリを信頼できることを確認してください。",
+        "go_to_app": "アプリへ移動",
+        "enable_app_mentions": "アプリのメンションを有効にする",
+        "enable_app_mentions_tooltip": "これを有効にすると、ユーザーは作業項目をこのアプリにメンションしたり割り当てたりできます。",
+        "scopes": "スコープ",
+        "select_scopes": "スコープを選択",
+        "read_access_to": "読み取り専用アクセス先",
+        "write_access_to": "書き込みアクセス先",
+        "global_permission_expiration": "グローバルスコープはまもなく期限切れになります。代わりに細かいスコープを使用してください。例：グローバル読み取りの代わりに project:read を使用します。",
+        "selected_scopes": "{count} 件選択中",
+        "scopes_and_permissions": "スコープと権限",
+        "read": "読み取り",
+        "write": "書き込み",
+        "scope_description": {
+          "projects": "プロジェクトおよびプロジェクト関連エンティティへのアクセス",
+          "wiki": "WikiおよびWiki関連エンティティへのアクセス",
+          "workspaces": "ワークスペースおよびワークスペース関連エンティティへのアクセス",
+          "stickies": "付箋および付箋関連エンティティへのアクセス",
+          "profile": "ユーザープロフィール情報へのアクセス",
+          "agents": "エージェントおよびすべてのエージェント関連エンティティへのアクセス",
+          "assets": "アセットおよびすべてのアセット関連エンティティへのアクセス"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "あなたの作業がより知能的で速くなるように、ネイティブに接続されたAIを使用してください。"
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "スクリプト",
+        "new_script": "新しいスクリプト",
+        "description": "カスタムスクリプトと自動化ルールでワークフローを自動化します。"
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "APIトークンがまだ作成されていません",
+        "description": "PlaneのAPIを使用して、Planeのデータを外部システムと統合できます。トークンを作成して始めましょう。"
+      },
+      "webhooks": {
+        "title": "Webhookが追加されていません",
+        "description": "Webhookを作成してリアルタイムの更新を受け取り、アクションを自動化します。"
+      },
+      "exports": {
+        "title": "エクスポートがまだありません",
+        "description": "エクスポートすると、参照用のコピーがここに保存されます。"
+      },
+      "imports": {
+        "title": "インポートがまだありません",
+        "description": "過去のインポートをここで確認し、ダウンロードできます。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ja/workspace.json b/packages/i18n/src/locales/ja/workspace.json
new file mode 100644
index 0000000..40b2c75
--- /dev/null
+++ b/packages/i18n/src/locales/ja/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "ワークスペースを作成",
+    "subheading": "Planeを使用するには、ワークスペースを作成するか参加する必要があります。",
+    "form": {
+      "name": {
+        "label": "ワークスペース名を設定",
+        "placeholder": "馴染みがあり認識しやすい名前が最適です。"
+      },
+      "url": {
+        "label": "ワークスペースのURLを設定",
+        "placeholder": "URLを入力または貼り付け",
+        "edit_slug": "URLのスラッグのみ編集可能です"
+      },
+      "organization_size": {
+        "label": "このワークスペースを何人で使用しますか？",
+        "placeholder": "範囲を選択"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "インスタンス管理者のみがワークスペースを作成できます",
+        "description": "インスタンス管理者のメールアドレスをご存知の場合は、下のボタンをクリックして連絡を取ってください。",
+        "request_button": "インスタンス管理者にリクエスト"
+      },
+      "validation": {
+        "name_alphanumeric": "ワークスペース名には (' '), ('-'), ('_') と英数字のみ使用できます。",
+        "name_length": "名前は80文字以内にしてください。",
+        "url_alphanumeric": "URLには ('-') と英数字のみ使用できます。",
+        "url_length": "URLは48文字以内にしてください。",
+        "url_already_taken": "ワークスペースのURLは既に使用されています！"
+      }
+    },
+    "request_email": {
+      "subject": "新規ワークスペースのリクエスト",
+      "body": "インスタンス管理者様\n\n[ワークスペース作成の目的]のために、URL [/workspace-name] の新規ワークスペースを作成していただけますでしょうか。\n\nよろしくお願いいたします。\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "ワークスペースを作成",
+      "loading": "ワークスペースを作成中"
+    },
+    "toast": {
+      "success": {
+        "title": "成功",
+        "message": "ワークスペースが正常に作成されました"
+      },
+      "error": {
+        "title": "エラー",
+        "message": "ワークスペースを作成できませんでした。もう一度お試しください。"
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "プロジェクト、アクティビティ、メトリクスの概要",
+        "description": "Planeへようこそ。ご利用いただき嬉しく思います。最初のプロジェクトを作成して作業項目を追跡すると、このページは進捗を把握するのに役立つスペースに変わります。管理者はチームの進捗に役立つ項目も表示されます。",
+        "primary_button": {
+          "text": "最初のプロジェクトを作成",
+          "comic": {
+            "title": "Planeではすべてがプロジェクトから始まります",
+            "description": "プロジェクトは製品のロードマップ、マーケティングキャンペーン、新車の発売などになります。"
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "アナリティクス",
+    "page_label": "{workspace} - アナリティクス",
+    "open_tasks": "オープンタスクの合計",
+    "error": "データの取得中にエラーが発生しました。",
+    "work_items_closed_in": "クローズされた作業項目",
+    "selected_projects": "選択されたプロジェクト",
+    "total_members": "メンバー総数",
+    "total_cycles": "サイクル総数",
+    "total_modules": "モジュール総数",
+    "pending_work_items": {
+      "title": "保留中の作業項目",
+      "empty_state": "同僚による保留中の作業項目の分析がここに表示されます。"
+    },
+    "work_items_closed_in_a_year": {
+      "title": "1年間でクローズされた作業項目",
+      "empty_state": "作業項目をクローズすると、グラフ形式で分析が表示されます。"
+    },
+    "most_work_items_created": {
+      "title": "作成された作業項目が最も多い",
+      "empty_state": "同僚と作成した作業項目の数がここに表示されます。"
+    },
+    "most_work_items_closed": {
+      "title": "クローズされた作業項目が最も多い",
+      "empty_state": "同僚とクローズした作業項目の数がここに表示されます。"
+    },
+    "tabs": {
+      "scope_and_demand": "スコープと需要",
+      "custom": "カスタムアナリティクス"
+    },
+    "total": "{entity}の合計",
+    "started_work_items": "開始された{entity}",
+    "backlog_work_items": "バックログの{entity}",
+    "un_started_work_items": "未開始の{entity}",
+    "completed_work_items": "完了した{entity}",
+    "project_insights": "プロジェクトのインサイト",
+    "summary_of_projects": "プロジェクトの概要",
+    "all_projects": "すべてのプロジェクト",
+    "trend_on_charts": "グラフの傾向",
+    "active_projects": "アクティブなプロジェクト",
+    "customized_insights": "カスタマイズされたインサイト",
+    "created_vs_resolved": "作成 vs 解決",
+    "empty_state": {
+      "project_insights": {
+        "title": "まだデータがありません",
+        "description": "あなたに割り当てられた作業項目は、ステータスごとに分類されてここに表示されます。"
+      },
+      "created_vs_resolved": {
+        "title": "まだデータがありません",
+        "description": "時間の経過とともに作成および解決された作業項目がここに表示されます。"
+      },
+      "customized_insights": {
+        "title": "まだデータがありません",
+        "description": "あなたに割り当てられた作業項目は、ステータスごとに分類されてここに表示されます。"
+      },
+      "general": {
+        "title": "進捗、ワークロード、割り当てを追跡する。傾向を発見し、障害を除去し、作業をより迅速に進める",
+        "description": "範囲と需要、見積もり、スコープクリープを確認する。チームメンバーとチームのパフォーマンスを把握し、プロジェクトが時間通りに実行されることを確実にする。",
+        "primary_button": {
+          "text": "最初のプロジェクトを開始",
+          "comic": {
+            "title": "アナリティクスはサイクル + モジュールで最もよく機能します",
+            "description": "まず、作業項目をサイクルに時間枠を設定し、可能であれば、複数のサイクルにまたがる作業項目をモジュールにグループ化してください。左側のナビゲーションで両方をチェックしてください。"
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "データがまだありません",
+        "description": "サイクルの進捗分析がここに表示されます。作業項目をサイクルに追加して進捗の追跡を開始してください。"
+      },
+      "module_progress": {
+        "title": "データがまだありません",
+        "description": "モジュールの進捗分析がここに表示されます。作業項目をモジュールに追加して進捗の追跡を開始してください。"
+      },
+      "intake_trends": {
+        "title": "データがまだありません",
+        "description": "インテークの傾向分析がここに表示されます。作業項目をインテークに追加して傾向の追跡を開始してください。"
+      }
+    },
+    "upgrade_to_plan": "{tab} をアンロックするには {plan} にアップグレードしてください",
+    "workitem_resolved_vs_pending": "解決済み vs 保留中の作業項目",
+    "projects_by_status": "ステータス別のプロジェクト",
+    "active_users": "アクティブユーザー",
+    "intake_trends": "受け入れの傾向"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {プロジェクト} other {プロジェクト}}",
+    "create": {
+      "label": "プロジェクトを追加"
+    },
+    "network": {
+      "label": "ネットワーク",
+      "private": {
+        "title": "非公開",
+        "description": "招待された人のみアクセス可能"
+      },
+      "public": {
+        "title": "公開",
+        "description": "ゲスト以外のワークスペースの全員が参加可能"
+      }
+    },
+    "error": {
+      "permission": "この操作を実行する権限がありません。",
+      "cycle_delete": "サイクルの削除に失敗しました",
+      "module_delete": "モジュールの削除に失敗しました",
+      "issue_delete": "作業項目の削除に失敗しました"
+    },
+    "state": {
+      "backlog": "バックログ",
+      "unstarted": "未開始",
+      "started": "開始済み",
+      "completed": "完了",
+      "cancelled": "キャンセル"
+    },
+    "sort": {
+      "manual": "手動",
+      "name": "名前",
+      "created_at": "作成日",
+      "members_length": "メンバー数"
+    },
+    "scope": {
+      "my_projects": "自分のプロジェクト",
+      "archived_projects": "アーカイブ済み"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# ヶ月} other{# ヶ月}}",
+      "days_count": "{days, plural, one{# 日} other{# 日}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "アクティブなプロジェクトがありません",
+        "description": "各プロジェクトは目標指向の作業の親として考えてください。プロジェクトには作業、サイクル、モジュールが含まれ、同僚と共にその目標の達成を支援します。新しいプロジェクトを作成するか、アーカイブされたプロジェクトをフィルタリングしてください。",
+        "primary_button": {
+          "text": "最初のプロジェクトを開始",
+          "comic": {
+            "title": "Planeではすべてがプロジェクトから始まります",
+            "description": "プロジェクトは製品のロードマップ、マーケティングキャンペーン、新車の発売などになります。"
+          }
+        }
+      },
+      "no_projects": {
+        "title": "プロジェクトがありません",
+        "description": "作業項目を作成したり作業を管理したりするには、プロジェクトを作成するか、プロジェクトのメンバーになる必要があります。",
+        "primary_button": {
+          "text": "最初のプロジェクトを開始",
+          "comic": {
+            "title": "Planeではすべてがプロジェクトから始まります",
+            "description": "プロジェクトは製品のロードマップ、マーケティングキャンペーン、新車の発売などになります。"
+          }
+        }
+      },
+      "filter": {
+        "title": "一致するプロジェクトがありません",
+        "description": "条件に一致するプロジェクトが見つかりません。\n代わりに新しいプロジェクトを作成してください。"
+      },
+      "search": {
+        "description": "条件に一致するプロジェクトが見つかりません。\n代わりに新しいプロジェクトを作成してください。"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "ビューを追加",
+    "empty_state": {
+      "all-issues": {
+        "title": "プロジェクトに作業項目がありません",
+        "description": "最初のプロジェクトが完了しました！次は、作業を追跡可能な作業項目に分割しましょう。始めましょう！",
+        "primary_button": {
+          "text": "新しい作業項目を作成"
+        }
+      },
+      "assigned": {
+        "title": "作業項目がまだありません",
+        "description": "あなたに割り当てられた作業項目をここで追跡できます。",
+        "primary_button": {
+          "text": "新しい作業項目を作成"
+        }
+      },
+      "created": {
+        "title": "作業項目がまだありません",
+        "description": "あなたが作成したすべての作業項目がここに表示され、直接追跡できます。",
+        "primary_button": {
+          "text": "新しい作業項目を作成"
+        }
+      },
+      "subscribed": {
+        "title": "作業項目がまだありません",
+        "description": "興味のある作業項目を購読して、ここですべてを追跡できます。"
+      },
+      "custom-view": {
+        "title": "作業項目がまだありません",
+        "description": "フィルターに該当する作業項目をここで追跡できます。"
+      }
+    },
+    "delete_view": {
+      "title": "このビューを削除してもよろしいですか？",
+      "content": "確認すると、このビューに選択したすべてのソート、フィルター、表示オプション + レイアウトが復元不可能な形で完全に削除されます。"
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "作業項目の下書き",
+    "empty_state": {
+      "title": "書きかけの作業項目、そしてまもなくコメントがここに表示されます。",
+      "description": "試してみるには、作業項目の追加を開始して途中で中断するか、以下で最初の下書きを作成してください。😉",
+      "primary_button": {
+        "text": "最初の下書きを作成"
+      }
+    },
+    "delete_modal": {
+      "title": "下書きを削除",
+      "description": "この下書きを削除してもよろしいですか？この操作は取り消せません。"
+    },
+    "toasts": {
+      "created": {
+        "success": "下書きを作成しました",
+        "error": "作業項目を作成できませんでした。もう一度お試しください。"
+      },
+      "deleted": {
+        "success": "下書きを削除しました"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "メモ、ドキュメント、または完全なナレッジベースを作成します。Planeのアシスタント、ガリレオが開始をサポートします",
+        "description": "ページはPlaneの思考整理スペースです。会議のメモを取り、簡単に整形し、作業項目を埋め込み、コンポーネントライブラリを使用してレイアウトし、すべてをプロジェクトのコンテキストに保存します。どんなドキュメントも短時間で作成するために、PlaneのAI、ガリレオをショートカットやボタンのクリックで呼び出すことができます。",
+        "primary_button": {
+          "text": "最初のページを作成"
+        }
+      },
+      "private": {
+        "title": "まだプライベートページがありません",
+        "description": "プライベートな考えをここに保存します。共有する準備ができたら、チームは1クリックで共有できます。",
+        "primary_button": {
+          "text": "最初のページを作成"
+        }
+      },
+      "public": {
+        "title": "まだワークスペースページがありません",
+        "description": "ワークスペースの全員と共有されているページをここで確認します。",
+        "primary_button": {
+          "text": "最初のページを作成"
+        }
+      },
+      "archived": {
+        "title": "まだアーカイブされたページがありません",
+        "description": "注目していないページをアーカイブします。必要な時にここでアクセスできます。"
+      },
+      "shared": {
+        "title": "共有されたページはまだありません",
+        "description": "他のメンバーがあなたと共有したページがここに表示されます。"
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "アクティブなサイクルがありません",
+        "description": "プロジェクトのサイクルには、その範囲内に今日の日付を含む期間が含まれます。ここですべてのアクティブなサイクルの進捗状況と詳細を確認できます。"
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "CSVからメンバーをインポート",
+      "description": "次の列を含むCSVをアップロード：Email, Display Name, First Name, Last Name, Role（5、15、または20）",
+      "dropzone": {
+        "active": "CSVファイルをここにドロップ",
+        "inactive": "ドラッグ＆ドロップまたはクリックしてアップロード",
+        "file_type": ".csvファイルのみサポートされています"
+      },
+      "buttons": {
+        "cancel": "キャンセル",
+        "import": "インポート",
+        "try_again": "再試行",
+        "close": "閉じる",
+        "done": "完了"
+      },
+      "progress": {
+        "uploading": "アップロード中...",
+        "importing": "インポート中..."
+      },
+      "summary": {
+        "title": {
+          "failed": "インポート失敗",
+          "complete": "インポート完了"
+        },
+        "message": {
+          "seat_limit": "シート制限によりメンバーをインポートできません。",
+          "success": "{count}人のメンバーをワークスペースに追加しました。",
+          "no_imports": "CSVファイルからメンバーがインポートされませんでした。"
+        },
+        "stats": {
+          "successful": "成功",
+          "failed": "失敗"
+        },
+        "download_errors": "エラーをダウンロード"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "無効なファイル",
+          "message": "CSVファイルのみサポートされています。"
+        },
+        "import_failed": {
+          "title": "インポート失敗",
+          "message": "問題が発生しました。"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/accessibility.json b/packages/i18n/src/locales/ka-ge/accessibility.json
new file mode 100644
index 0000000..188aa46
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "სამუშაო სივრცის ლოგო",
+      "open_workspace_switcher": "სამუშაო სივრცის გადამრთველის გახსნა",
+      "open_user_menu": "მომხმარებლის მენიუს გახსნა",
+      "open_command_palette": "ბრძანებების პანელის გახსნა",
+      "open_extended_sidebar": "გაფართოებული გვერდითი მენიუს გახსნა",
+      "close_extended_sidebar": "გაფართოებული გვერდითი მენიუს დახურვა",
+      "create_favorites_folder": "ფავორიტების საქაღალდის შექმნა",
+      "open_folder": "საქაღალდის გახსნა",
+      "close_folder": "საქაღალდის დახურვა",
+      "open_favorites_menu": "ფავორიტების მენიუს გახსნა",
+      "close_favorites_menu": "ფავორიტების მენიუს დახურვა",
+      "enter_folder_name": "შეიყვანეთ საქაღალდის სახელი",
+      "create_new_project": "ახალი პროექტის შექმნა",
+      "open_projects_menu": "პროექტების მენიუს გახსნა",
+      "close_projects_menu": "პროექტების მენიუს დახურვა",
+      "toggle_quick_actions_menu": "სწრაფი ქმედებების მენიუს ჩართვა/გამორთვა",
+      "open_project_menu": "პროექტის მენიუს გახსნა",
+      "close_project_menu": "პროექტის მენიუს დახურვა",
+      "collapse_sidebar": "გვერდითი მენიუს ჩაკეცვა",
+      "expand_sidebar": "გვერდითი მენიუს გაშლა",
+      "edition_badge": "გადახდილი გეგმის ფანჯრის გახსნა"
+    },
+    "auth_forms": {
+      "clear_email": "ელფოსტის გასუფთავება",
+      "show_password": "პაროლის ჩვენება",
+      "hide_password": "პაროლის დამალვა",
+      "close_alert": "გაფრთხილების დახურვა",
+      "close_popover": "პოპაპის დახურვა"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/auth.json b/packages/i18n/src/locales/ka-ge/auth.json
new file mode 100644
index 0000000..1761bb7
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identity",
+    "description": "Configure your domain to access security features including single sign-on.",
+    "domain_management": {
+      "header": "Domain management",
+      "verified_domains": {
+        "header": "Verified domains",
+        "description": "Verify the ownership of an email domain to enable single-sign on.",
+        "button_text": "Add domain",
+        "list": {
+          "domain_name": "Domain name",
+          "status": "Status",
+          "status_verified": "Verified",
+          "status_failed": "Failed",
+          "status_pending": "Pending"
+        },
+        "add_domain": {
+          "title": "Add domain",
+          "description": "Add your domain to configure SSO and verify it.",
+          "form": {
+            "domain_label": "Domain",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Domain is required",
+            "domain_invalid": "Enter a valid domain name (e.g., plane.so)"
+          },
+          "primary_button_text": "Add domain",
+          "primary_button_loading_text": "Adding",
+          "toast": {
+            "success_title": "Success!",
+            "success_message": "Domain added successfully. Please verify it by adding the DNS TXT record.",
+            "error_message": "Failed to add domain. Please try again."
+          }
+        },
+        "verify_domain": {
+          "title": "Verify your domain",
+          "description": "Follow these steps to verify your domain.",
+          "instructions": {
+            "label": "Instructions",
+            "step_1": "Go to the DNS settings for your domain host.",
+            "step_2": {
+              "part_1": "Create a",
+              "part_2": "TXT record",
+              "part_3": "and paste the complete record value provided below."
+            },
+            "step_3": "This update usually takes a few minutes but may take up to 72 hours to complete.",
+            "step_4": "Click \"Verify domain\" to confirm once your DNS record is updated."
+          },
+          "verification_code_label": "TXT record value",
+          "verification_code_description": "Add this record to your DNS settings",
+          "domain_label": "Domain",
+          "primary_button_text": "Verify domain",
+          "primary_button_loading_text": "Verifying",
+          "secondary_button_text": "I'll do it later",
+          "toast": {
+            "success_title": "Success!",
+            "success_message": "Domain verified successfully.",
+            "error_message": "Failed to verify domain. Please try again."
+          }
+        },
+        "delete_domain": {
+          "title": "Delete domain",
+          "description": {
+            "prefix": "Are you sure you want to delete",
+            "suffix": "? This action cannot be undone."
+          },
+          "primary_button_text": "Delete",
+          "primary_button_loading_text": "Deleting",
+          "secondary_button_text": "Cancel",
+          "toast": {
+            "success_title": "Success!",
+            "success_message": "Domain deleted successfully.",
+            "error_message": "Failed to delete domain. Please try again."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Single sign-on",
+      "disabled_message": "Add a verified domain to configure SSO",
+      "configure": {
+        "create": "Configure",
+        "update": "Edit"
+      },
+      "switch_alert_modal": {
+        "title": "Switch SSO Method to {newProviderShortName}?",
+        "content": "You are about to enable {newProviderLongName} ({newProviderShortName}). This action will automatically disable {activeProviderLongName} ({activeProviderShortName}). Users attempting to sign in via {activeProviderShortName} will no longer be able to access the platform until they switch to the new method. Are you sure you want to proceed?",
+        "primary_button_text": "Switch",
+        "primary_button_text_loading": "Switching",
+        "secondary_button_text": "Cancel"
+      },
+      "form_section": {
+        "title": "IdP-provided details for {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Saving",
+        "save_changes": "Save changes",
+        "configure_only": "Configure only",
+        "configure_and_enable": "Configure and enable",
+        "default": "Save"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} provided details for you IdP",
+        "button_text": "Get setup details"
+      },
+      "saml": {
+        "header": "Enable SAML",
+        "description": "Configure your SAML identity provider to enable single sign-on.",
+        "configure": {
+          "title": "Enable SAML",
+          "description": "Verify the ownership of an email domain to access security features including single-sign on.",
+          "toast": {
+            "success_title": "Success!",
+            "create_success_message": "SAML provider created successfully.",
+            "update_success_message": "SAML provider updated successfully.",
+            "error_title": "Error!",
+            "error_message": "Failed to save SAML provider. Please try again."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web details",
+            "entity_id": {
+              "label": "Entity ID | Audience | Metadata information",
+              "description": "We will generate this bit of the metadata that identifies this Plane app as an authorized service on your IdP."
+            },
+            "callback_url": {
+              "label": "SSO URL",
+              "description": "We will generate this for you. Add this in the Sign-in redirect URL field of your IdP."
+            },
+            "logout_url": {
+              "label": "SLO URL",
+              "description": "We will generate this for you. Add this in the Single Logout redirect URL field of your IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobile details",
+            "entity_id": {
+              "label": "Entity ID | Audience | Metadata information",
+              "description": "We will generate this bit of the metadata that identifies this Plane app as an authorized service on your IdP."
+            },
+            "callback_url": {
+              "label": "SSO URL",
+              "description": "We will generate this for you. Add this in the Sign-in redirect URL field of your IdP."
+            },
+            "logout_url": {
+              "label": "SLO URL",
+              "description": "We will generate this for you. Add this in the Logout redirect URL field of your IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Mapping details",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Enable OIDC",
+        "description": "Configure your OIDC identity provider to enable single sign-on.",
+        "configure": {
+          "title": "Enable OIDC",
+          "description": "Verify the ownership of an email domain to access security features including single-sign on.",
+          "toast": {
+            "success_title": "Success!",
+            "create_success_message": "OIDC provider created successfully.",
+            "update_success_message": "OIDC provider updated successfully.",
+            "error_title": "Error!",
+            "error_message": "Failed to save OIDC provider. Please try again."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web details",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "We will generate this for this Plane app. Add this as a trusted origin on your IdP's corresponding field."
+            },
+            "callback_url": {
+              "label": "Redirect URL",
+              "description": "We will generate this for you. Add this in the Sign-in redirect URL field of your IdP."
+            },
+            "logout_url": {
+              "label": "Logout URL",
+              "description": "We will generate this for you. Add this in the Logout redirect URL field of your IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobile details",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "We will generate this for this Plane app. Add this as a trusted origin on your IdP's corresponding field."
+            },
+            "callback_url": {
+              "label": "Redirect URL",
+              "description": "We will generate this for you. Add this in the Sign-in redirect URL field of your IdP."
+            },
+            "logout_url": {
+              "label": "Logout URL",
+              "description": "We will generate this for you. Add this in the Logout redirect URL field of your IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "ელფოსტა",
+        "placeholder": "name@company.com",
+        "errors": {
+          "required": "ელფოსტა სავალდებულოა",
+          "invalid": "ელფოსტა არასწორია"
+        }
+      },
+      "password": {
+        "label": "პაროლი",
+        "set_password": "პაროლის დაყენება",
+        "placeholder": "შეიყვანეთ პაროლი",
+        "confirm_password": {
+          "label": "პაროლის დადასტურება",
+          "placeholder": "დაადასტურეთ პაროლი"
+        },
+        "current_password": {
+          "label": "მიმდინარე პაროლი"
+        },
+        "new_password": {
+          "label": "ახალი პაროლი",
+          "placeholder": "შეიყვანეთ ახალი პაროლი"
+        },
+        "change_password": {
+          "label": {
+            "default": "პაროლის შეცვლა",
+            "submitting": "პაროლის შეცვლა მიმდინარეობს"
+          }
+        },
+        "errors": {
+          "match": "პაროლები არ ემთხვევა",
+          "empty": "გთხოვთ შეიყვანოთ პაროლი",
+          "length": "პაროლის სიგრძე უნდა იყოს 8 სიმბოლოზე მეტი",
+          "strength": {
+            "weak": "პაროლი სუსტია",
+            "strong": "პაროლი ძლიერია"
+          }
+        },
+        "submit": "პაროლის დაყენება",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "წარმატება!",
+              "message": "პაროლი წარმატებით შეიცვალა."
+            },
+            "error": {
+              "title": "შეცდომა!",
+              "message": "რაღაც არასწორად წავიდა. გთხოვთ სცადოთ თავიდან."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "უნიკალური კოდი",
+        "placeholder": "gets-sets-flys",
+        "paste_code": "ჩასვით კოდი, რომელიც ელფოსტაზე მოგივიდათ",
+        "requesting_new_code": "ახალი კოდის მოთხოვნა",
+        "sending_code": "კოდის გაგზავნა"
+      },
+      "already_have_an_account": "უკვე გაქვთ ანგარიში?",
+      "login": "შესვლა",
+      "create_account": "ანგარიშის შექმნა",
+      "new_to_plane": "ახალი ხართ Plane-ში?",
+      "back_to_sign_in": "დაბრუნდით შესვლაზე",
+      "resend_in": "ხელახალი გაგზავნა {seconds} წამში",
+      "sign_in_with_unique_code": "შესვლა უნიკალური კოდით",
+      "forgot_password": "დაგავიწყდათ პაროლი?",
+      "username": {
+        "label": "Username",
+        "placeholder": "Enter your username"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "შექმენით ანგარიში და დაიწყეთ გუნდის სამუშაოს მართვა.",
+        "step": {
+          "email": {
+            "header": "რეგისტრაცია",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "რეგისტრაცია",
+            "sub_header": "დარეგისტრირდით ელფოსტისა და პაროლის კომბინაციით."
+          },
+          "unique_code": {
+            "header": "რეგისტრაცია",
+            "sub_header": "დარეგისტრირდით ელფოსტაზე გამოგზავნილი უნიკალური კოდით."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "გაგრძელებისთვის სცადეთ ძლიერი პაროლის დაყენება"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "შედით ანგარიშში და დაიწყეთ გუნდის სამუშაოს მართვა.",
+        "step": {
+          "email": {
+            "header": "შესვლა ან რეგისტრაცია",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "შესვლა ან რეგისტრაცია",
+            "sub_header": "შედით ელფოსტისა და პაროლის კომბინაციით."
+          },
+          "unique_code": {
+            "header": "შესვლა ან რეგისტრაცია",
+            "sub_header": "შედით ელფოსტაზე გამოგზავნილი უნიკალური კოდით."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "პაროლის აღდგენა",
+      "description": "შეიყვანეთ თქვენი ანგარიშის დამოწმებული ელფოსტის მისამართი და გამოგიგზავნით პაროლის აღდგენის ბმულს.",
+      "email_sent": "აღდგენის ბმული ელფოსტაზე გამოგიგზავნეთ",
+      "send_reset_link": "აღდგენის ბმულის გაგზავნა",
+      "errors": {
+        "smtp_not_enabled": "როგორც ვხედავთ, თქვენს სერვერზე SMTP არ არის ჩართული, ამიტომ პაროლის აღდგენის ბმულს ვერ გამოგიგზავნით"
+      },
+      "toast": {
+        "success": {
+          "title": "ელფოსტა გაიგზავნა",
+          "message": "შეამოწმეთ ელფოსტა პაროლის აღდგენის ბმულისთვის. თუ რამდენიმე წუთში ვერ მიიღებთ, შეამოწმეთ სპამის საქაღალდე."
+        },
+        "error": {
+          "title": "შეცდომა!",
+          "message": "რაღაც არასწორად წავიდა. გთხოვთ სცადოთ თავიდან."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "ახალი პაროლის დაყენება",
+      "description": "დააზღვიეთ თქვენი ანგარიში ძლიერი პაროლით"
+    },
+    "set_password": {
+      "title": "თქვენი ანგარიშის დაცვა",
+      "description": "პაროლის დაყენება დაგეხმარებათ უსაფრთხოდ შეხვიდეთ"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "შეცდომა!",
+          "message": "გასვლა ვერ მოხერხდა. გთხოვთ სცადოთ თავიდან."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Continue with {ldapProviderName}",
+        "sub_header": "Enter your {ldapProviderName} credentials"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/automation.json b/packages/i18n/src/locales/ka-ge/automation.json
new file mode 100644
index 0000000..64779c7
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Custom automations",
+      "create_automation": "Create automation"
+    },
+    "scope": {
+      "label": "Scope",
+      "run_on": "Run on"
+    },
+    "trigger": {
+      "label": "Trigger",
+      "add_trigger": "Add trigger",
+      "sidebar_header": "Trigger configuration",
+      "input_label": "What’s the trigger for this automation?",
+      "input_placeholder": "Select an option",
+      "section_plane_events": "Plane events",
+      "section_time_based": "Time based",
+      "fixed_schedule": "Fixed schedule",
+      "schedule": {
+        "frequency": "Frequency",
+        "select_day": "Select day",
+        "day_of_month": "Day of month",
+        "monthly_every": "Every",
+        "monthly_day_aria": "Day {day}",
+        "time": "Time",
+        "hour": "Hour",
+        "minute": "Minute",
+        "hour_suffix": "hr",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Timezone",
+        "timezone_placeholder": "Select a timezone",
+        "frequency_daily": "Daily",
+        "frequency_weekly": "Weekly",
+        "frequency_monthly": "Monthly",
+        "on": "On",
+        "validation_weekly_day_required": "Select at least one day of the week.",
+        "validation_monthly_date_required": "Select a day of the month.",
+        "main_content_schedule_summary_daily": "Every day at {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Every week on {days} at {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Every month on day {day} at {time} ({timezone}).",
+        "schedule_mode": "Schedule mode",
+        "schedule_mode_fixed": "Fixed",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Enter Cron expression",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Invalid cron expression.",
+        "cron_preview": "This Cron expression runs \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Back",
+        "next": "Add action"
+      },
+      "warning": {
+        "disabled_trigger_switching": "You can't change the trigger type once created"
+      }
+    },
+    "condition": {
+      "label": "Provided",
+      "add_condition": "Add condition",
+      "adding_condition": "Adding condition"
+    },
+    "action": {
+      "label": "Action",
+      "add_action": "Add action",
+      "sidebar_header": "Actions",
+      "input_label": "What does the automation do?",
+      "input_placeholder": "Select an option",
+      "handler_name": {
+        "add_comment": "Add comment",
+        "change_property": "Change property",
+        "run_script": "Run Script"
+      },
+      "configuration": {
+        "label": "Configuration",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Select a property",
+            "change_type": "Select",
+            "property_value_select": "{count, plural, one{Select value} other{Select values}}",
+            "property_value_select_date": "Select date"
+          },
+          "validation": {
+            "property_name_required": "Property name is required",
+            "change_type_required": "Change type is required",
+            "property_value_required": "Property value is required"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Add comment"
+      },
+      "run_script_block": {
+        "title": "Run script"
+      },
+      "change_property_block": {
+        "title": "Change property"
+      },
+      "validation": {
+        "delete_only_action": "Disable the automation before deleting its only action."
+      }
+    },
+    "conjunctions": {
+      "and": "And",
+      "or": "Or",
+      "if": "If",
+      "then": "Then"
+    },
+    "enable": {
+      "alert": "Hit 'Enable' whenever your automation is complete. Once enabled, the automation will be ready to run.",
+      "validation": {
+        "required": "Automation must have a trigger and at least one action to be enabled."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Automation must be disabled before deleting it."
+      }
+    },
+    "table": {
+      "title": "Automation title",
+      "scope": "Scope",
+      "projects": "Projects",
+      "last_run_on": "Last run on",
+      "created_on": "Created on",
+      "last_updated_on": "Last updated on",
+      "last_run_status": "Last run status",
+      "average_duration": "Average duration",
+      "owner": "Owner",
+      "executions": "Executions"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Create automation",
+        "update": "Update automation"
+      },
+      "title": {
+        "placeholder": "Name your automation.",
+        "required_error": "Title is required"
+      },
+      "description": {
+        "placeholder": "Describe your automation."
+      },
+      "submit_button": {
+        "create": "Create automation",
+        "update": "Update automation"
+      }
+    },
+    "delete_modal": {
+      "heading": "Delete automation"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Show fails",
+        "all": "All",
+        "only_activity": "Only activity",
+        "only_run_history": "Only run history"
+      },
+      "run_history": {
+        "initiator": "Initiator"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Success!",
+          "message": "Automation created successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Automation creation failed."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Success!",
+          "message": "Automation updated successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Automation update failed."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Success!",
+          "message": "Automation enabled successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Automation enable failed."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Success!",
+          "message": "Automation disabled successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Automation disable failed."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automation deleted",
+          "message": "{name}, the automation, has now been deleted from your project."
+        },
+        "error": {
+          "title": "We couldn't delete that automation this time.",
+          "message": "Try deleting it again or come back to it later. If you can't delete it then, reach out to us."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Error!",
+            "message": "Failed to create action. Please try again!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Error!",
+            "message": "Failed to update action. Please try again!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "There’re no automations to show yet.",
+        "description": "Automations help you eliminate repetitive tasks by setting triggers, conditions, and actions. Create one to save time and keep work moving effortlessly."
+      },
+      "upgrade": {
+        "title": "Automations",
+        "description": "Automations are a way to automate tasks in your project.",
+        "sub_description": "Get 80% of your admin time back when you use Automations."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Select projects to run this automation on",
+        "all_projects": {
+          "label": "All projects",
+          "description": "Automation will run for all projects in the workspace."
+        },
+        "select_projects": {
+          "label": "Select projects",
+          "description": "Automation will run for selected projects in the workspace.",
+          "placeholder": "Select projects"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automations",
+        "title": "Automations",
+        "description": "Standardize processes across your workspace with global automations."
+      },
+      "table": {
+        "scope": {
+          "global": "Global",
+          "project": {
+            "label": "Project",
+            "multiple": "Multiple",
+            "all": "All"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/common.json b/packages/i18n/src/locales/ka-ge/common.json
new file mode 100644
index 0000000..f4f7d7f
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "We're working on this. If you need immediate assistance,",
+    "reach_out_to_us": "reach out to us",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Otherwise, try refreshing the page occasionally or visit our",
+    "status_page": "Status page"
+  },
+  "submit": "გაგზავნა",
+  "cancel": "გაუქმება",
+  "loading": "ჩატვირთვა",
+  "error": "შეცდომა",
+  "success": "წარმატება",
+  "warning": "გაფრთხილება",
+  "info": "ინფორმაცია",
+  "close": "დახურვა",
+  "yes": "დიახ",
+  "no": "არა",
+  "ok": "კარგი",
+  "name": "სახელი",
+  "unknown_user": "Unknown user",
+  "description": "აღწერა",
+  "search": "ძიება",
+  "add_member": "წევრის დამატება",
+  "adding_members": "წევრების დამატება",
+  "remove_member": "წევრის ამოღება",
+  "add_members": "წევრების დამატება",
+  "adding_member": "წევრის დამატება",
+  "remove_members": "წევრების ამოღება",
+  "add": "დამატება",
+  "adding": "დამატება",
+  "remove": "ამოღება",
+  "add_new": "ახლის დამატება",
+  "remove_selected": "არჩეულის ამოღება",
+  "first_name": "სახელი",
+  "last_name": "გვარი",
+  "email": "ელფოსტა",
+  "display_name": "საჩვენებელი სახელი",
+  "role": "როლი",
+  "timezone": "დროის სარტყელი",
+  "avatar": "ავატარი",
+  "cover_image": "გარეკანის სურათი",
+  "password": "პაროლი",
+  "change_cover": "გარეკანის შეცვლა",
+  "language": "ენა",
+  "saving": "შენახვა",
+  "save_changes": "ცვლილებების შენახვა",
+  "deactivate_account": "ანგარიშის გაუქმება",
+  "deactivate_account_description": "ანგარიშის გაუქმებისას, ანგარიშში არსებული ყველა მონაცემი და რესურსი სამუდამოდ წაიშლება და მათი აღდგენა შეუძლებელი იქნება.",
+  "profile_settings": "პროფილის პარამეტრები",
+  "your_account": "თქვენი ანგარიში",
+  "security": "უსაფრთხოება",
+  "activity": "აქტივობა",
+  "activity_empty_state": {
+    "no_activity": "No activity yet",
+    "no_transitions": "No transitions yet",
+    "no_comments": "No comments yet",
+    "no_worklogs": "No worklogs yet",
+    "no_history": "No history yet"
+  },
+  "preferences": "პრეფერენციები",
+  "language_and_time": "ენა და დრო",
+  "notifications": "შეტყობინებები",
+  "workspaces": "სამუშაო სივრცეები",
+  "create_workspace": "სამუშაო სივრცის შექმნა",
+  "invitations": "მოწვევები",
+  "summary": "შეჯამება",
+  "assigned": "მინიჭებული",
+  "created": "შექმნილი",
+  "subscribed": "გამოწერილი",
+  "you_do_not_have_the_permission_to_access_this_page": "თქვენ არ გაქვთ ამ გვერდზე წვდომის უფლება.",
+  "something_went_wrong_please_try_again": "რაღაც შეცდომა მოხდა. გთხოვთ, სცადოთ ხელახლა.",
+  "load_more": "მეტის ჩატვირთვა",
+  "select_or_customize_your_interface_color_scheme": "აირჩიეთ ან მოარგეთ თქვენი ინტერფეისის ფერთა სქემა.",
+  "timezone_setting": "მიმდინარე დროის სარტყელის პარამეტრი.",
+  "language_setting": "აირჩიეთ ინტერფეისში გამოყენებული ენა.",
+  "settings_moved_to_preferences": "დროის სარტყელისა და ენის პარამეტრები გადატანილია პრეფერენციებში.",
+  "go_to_preferences": "გადადით პრეფერენციებზე",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Select the cursor motion style that feels right for you.",
+  "theme": "თემა",
+  "smooth_cursor": "Smooth Cursor",
+  "system_preference": "სისტემის პრეფერენცია",
+  "light": "ღია",
+  "dark": "მუქი",
+  "light_contrast": "ღია მაღალი კონტრასტით",
+  "dark_contrast": "მუქი მაღალი კონტრასტით",
+  "custom": "მორგებული თემა",
+  "select_your_theme": "აირჩიეთ თქვენი თემა",
+  "customize_your_theme": "მორგეთ თქვენი თემა",
+  "background_color": "ფონის ფერი",
+  "text_color": "ტექსტის ფერი",
+  "primary_color": "ძირითადი (თემის) ფერი",
+  "sidebar_background_color": "გვერდითი ზოლის ფონის ფერი",
+  "sidebar_text_color": "გვერდითი ზოლის ტექსტის ფერი",
+  "set_theme": "თემის დაყენება",
+  "enter_a_valid_hex_code_of_6_characters": "შეიყვანეთ მოქმედი 6-სიმბოლოიანი HEX კოდი",
+  "background_color_is_required": "ფონის ფერი სავალდებულოა",
+  "text_color_is_required": "ტექსტის ფერი სავალდებულოა",
+  "primary_color_is_required": "ძირითადი ფერი სავალდებულოა",
+  "sidebar_background_color_is_required": "გვერდითი ზოლის ფონის ფერი სავალდებულოა",
+  "sidebar_text_color_is_required": "გვერდითი ზოლის ტექსტის ფერი სავალდებულოა",
+  "updating_theme": "თემის განახლება",
+  "theme_updated_successfully": "თემა წარმატებით განახლდა",
+  "failed_to_update_the_theme": "თემის განახლება ვერ მოხერხდა",
+  "email_notifications": "ელფოსტის შეტყობინებები",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "იყავით ინფორმირებული თქვენს გამოწერილ სამუშაო ელემენტებზე. ჩართეთ ეს, რომ მიიღოთ შეტყობინებები.",
+  "email_notification_setting_updated_successfully": "ელფოსტის შეტყობინებების პარამეტრი წარმატებით განახლდა",
+  "failed_to_update_email_notification_setting": "ელფოსტის შეტყობინებების პარამეტრის განახლება ვერ მოხერხდა",
+  "notify_me_when": "შემატყობინეთ, როდესაც",
+  "property_changes": "თვისებების ცვლილება",
+  "property_changes_description": "შემატყობინეთ, როდესაც სამუშაო ელემენტების თვისებები, როგორიცაა მინიჭებული პირები, პრიორიტეტი, შეფასებები ან სხვა, იცვლება.",
+  "state_change": "მდგომარეობის ცვლილება",
+  "state_change_description": "შემატყობინეთ, როდესაც სამუშაო ელემენტი გადადის სხვა მდგომარეობაში",
+  "issue_completed": "სამუშაო ელემენტი დასრულებულია",
+  "issue_completed_description": "შემატყობინეთ მხოლოდ მაშინ, როდესაც სამუშაო ელემენტი დასრულებულია",
+  "comments": "კომენტარები",
+  "comments_description": "შემატყობინეთ, როდესაც ვინმე ტოვებს კომენტარს სამუშაო ელემენტზე",
+  "mentions": "ჩემი ხსენება",
+  "mentions_description": "შემატყობინეთ მხოლოდ მაშინ, როდესაც ვინმე მხსენიებს კომენტარებში ან აღწერაში",
+  "old_password": "ძველი პაროლი",
+  "general_settings": "ზოგადი პარამეტრები",
+  "sign_out": "გასვლა",
+  "signing_out": "გამოსვლა",
+  "active_cycles": "აქტიური ციკლები",
+  "active_cycles_description": "აკონტროლეთ ციკლები სხვადასხვა პროექტებში, თვალყური ადევნეთ მაღალი პრიორიტეტის სამუშაო ელემენტებს და გაამახვილეთ ყურადღება ციკლებზე, რომლებიც საჭიროებენ ყურადღებას.",
+  "on_demand_snapshots_of_all_your_cycles": "თქვენი ყველა ციკლის მოთხოვნისამებრ სურათები",
+  "upgrade": "განახლება",
+  "10000_feet_view": "10,000 ფუტის ხედი ყველა აქტიურ ციკლზე.",
+  "10000_feet_view_description": "შეამცირეთ ხედი, რათა ერთდროულად ნახოთ ყველა პროექტის მიმდინარე ციკლები, ნაცვლად თითოეულ პროექტში ციკლიდან ციკლზე გადასვლისა.",
+  "get_snapshot_of_each_active_cycle": "მიიღეთ თითოეული აქტიური ციკლის სურათი.",
+  "get_snapshot_of_each_active_cycle_description": "აკონტროლეთ მაღალი დონის მეტრიკა ყველა აქტიური ციკლისთვის, ნახეთ მათი პროგრესის მდგომარეობა და გაიგეთ მოცულობა ვადების წინააღმდეგ.",
+  "compare_burndowns": "შეადარეთ burn-down-ები.",
+  "compare_burndowns_description": "აკონტროლეთ, თუ როგორ მუშაობს თქვენი თითოეული გუნდი თითოეული ციკლის burn-down ანგარიშის ნახვით.",
+  "quickly_see_make_or_break_issues": "სწრაფად ნახეთ გადამწყვეტი სამუშაო ელემენტები.",
+  "quickly_see_make_or_break_issues_description": "ნახეთ მაღალი პრიორიტეტის სამუშაო ელემენტები თითოეული ციკლისთვის ვადების წინააღმდეგ. ნახეთ ყველა მათგანი ერთი დაწკაპუნებით.",
+  "zoom_into_cycles_that_need_attention": "გაამახვილეთ ყურადღება ციკლებზე, რომლებიც საჭიროებენ ყურადღებას.",
+  "zoom_into_cycles_that_need_attention_description": "გამოიძიეთ ნებისმიერი ციკლის მდგომარეობა, რომელიც არ შეესაბამება მოლოდინებს, ერთი დაწკაპუნებით.",
+  "stay_ahead_of_blockers": "იყავით წინ ბლოკერებზე.",
+  "stay_ahead_of_blockers_description": "აღმოაჩინეთ გამოწვევები ერთი პროექტიდან მეორეზე და ნახეთ ციკლებს შორის დამოკიდებულებები, რომლებიც არ არის აშკარა სხვა ხედებიდან.",
+  "analytics": "ანალიტიკა",
+  "workspace_invites": "სამუშაო სივრცის მოწვევები",
+  "enter_god_mode": "ღმერთის რეჟიმის ჩართვა",
+  "workspace_logo": "სამუშაო სივრცის ლოგო",
+  "new_issue": "ახალი სამუშაო ელემენტი",
+  "your_work": "თქვენი სამუშაო",
+  "drafts": "მონახაზები",
+  "projects": "პროექტები",
+  "views": "ხედები",
+  "archives": "არქივები",
+  "settings": "პარამეტრები",
+  "failed_to_move_favorite": "ფავორიტის გადატანა ვერ მოხერხდა",
+  "favorites": "ფავორიტები",
+  "no_favorites_yet": "ჯერ ფავორიტები არ არის",
+  "create_folder": "ფოლდერის შექმნა",
+  "new_folder": "ახალი ფოლდერი",
+  "favorite_updated_successfully": "ფავორიტი წარმატებით განახლდა",
+  "favorite_created_successfully": "ფავორიტი წარმატებით შეიქმნა",
+  "folder_already_exists": "ფოლდერი უკვე არსებობს",
+  "folder_name_cannot_be_empty": "ფოლდერის სახელი არ შეიძლება იყოს ცარიელი",
+  "something_went_wrong": "რაღაც შეცდომა მოხდა",
+  "failed_to_reorder_favorite": "ფავორიტის ხელახალი დალაგება ვერ მოხერხდა",
+  "favorite_removed_successfully": "ფავორიტი წარმატებით ამოიღეს",
+  "failed_to_create_favorite": "ფავორიტის შექმნა ვერ მოხერხდა",
+  "failed_to_rename_favorite": "ფავორიტის გადარქმევა ვერ მოხერხდა",
+  "project_link_copied_to_clipboard": "პროექტის ბმული კოპირებულია ბუფერში",
+  "link_copied": "ბმული კოპირებულია",
+  "add_project": "პროექტის დამატება",
+  "create_project": "პროექტის შექმნა",
+  "failed_to_remove_project_from_favorites": "პროექტის ფავორიტებიდან ამოღება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა.",
+  "project_created_successfully": "პროექტი წარმატებით შეიქმნა",
+  "project_created_successfully_description": "პროექტი წარმატებით შეიქმნა. ახლა შეგიძლიათ დაიწყოთ სამუშაო ელემენტების დამატება.",
+  "project_name_already_taken": "პროექტის სახელი უკვე დაკავებულია.",
+  "project_name_cannot_contain_special_characters": "The project name cannot contain special characters.",
+  "project_identifier_already_taken": "პროექტის იდენტიფიკატორი უკვე დაკავებულია.",
+  "project_cover_image_alt": "პროექტის გარეკანის სურათი",
+  "name_is_required": "სახელი სავალდებულოა",
+  "title_should_be_less_than_255_characters": "სათაური უნდა იყოს 255 სიმბოლოზე ნაკლები",
+  "project_name": "პროექტის სახელი",
+  "project_id_must_be_at_least_1_character": "პროექტის ID უნდა იყოს მინიმუმ 1 სიმბოლო",
+  "project_id_must_be_at_most_5_characters": "პროექტის ID უნდა იყოს მაქსიმუმ 5 სიმბოლო",
+  "project_id": "პროექტის ID",
+  "project_id_tooltip_content": "ეხმარება თქვენ პროექტში სამუშაო ელემენტების უნიკალურად იდენტიფიცირებაში. მაქსიმუმ 5 სიმბოლო.",
+  "description_placeholder": "აღწერა",
+  "only_alphanumeric_non_latin_characters_allowed": "დაშვებულია მხოლოდ ალფანუმერული და არა-ლათინური სიმბოლოები.",
+  "project_id_is_required": "პროექტის ID სავალდებულოა",
+  "project_id_allowed_char": "დაშვებულია მხოლოდ ალფანუმერული და არა-ლათინური სიმბოლოები.",
+  "project_id_min_char": "პროექტის ID უნდა იყოს მინიმუმ 1 სიმბოლო",
+  "project_id_max_char": "პროექტის ID უნდა იყოს მაქსიმუმ {max} სიმბოლო",
+  "project_description_placeholder": "შეიყვანეთ პროექტის აღწერა",
+  "select_network": "აირჩიეთ ქსელი",
+  "lead": "ხელმძღვანელი",
+  "date_range": "თარიღის დიაპაზონი",
+  "private": "პირადი",
+  "public": "საჯარო",
+  "accessible_only_by_invite": "ხელმისაწვდომია მხოლოდ მოწვევით",
+  "anyone_in_the_workspace_except_guests_can_join": "სამუშაო სივრცეში ნებისმიერს, გარდა სტუმრებისა, შეუძლია შეერთება",
+  "creating": "შექმნა",
+  "creating_project": "პროექტის შექმნა",
+  "adding_project_to_favorites": "პროექტის ფავორიტებში დამატება",
+  "project_added_to_favorites": "პროექტი ფავორიტებში დაემატა",
+  "couldnt_add_the_project_to_favorites": "პროექტის ფავორიტებში დამატება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა.",
+  "removing_project_from_favorites": "პროექტის ფავორიტებიდან ამოღება",
+  "project_removed_from_favorites": "პროექტი ფავორიტებიდან ამოიღეს",
+  "couldnt_remove_the_project_from_favorites": "პროექტის ფავორიტებიდან ამოღება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა.",
+  "add_to_favorites": "ფავორიტებში დამატება",
+  "remove_from_favorites": "ფავორიტებიდან ამოღება",
+  "publish_project": "პროექტის გამოქვეყნება",
+  "publish": "გამოქვეყნება",
+  "copy_link": "ბმულის კოპირება",
+  "leave_project": "პროექტის დატოვება",
+  "join_the_project_to_rearrange": "შეუერთდით პროექტს, რათა გადააადგილოთ",
+  "drag_to_rearrange": "გადააადგილეთ გადასაადგილებლად",
+  "congrats": "გილოცავთ!",
+  "open_project": "პროექტის გახსნა",
+  "issues": "სამუშაო ელემენტები",
+  "cycles": "ციკლები",
+  "modules": "მოდულები",
+  "pages": "გვერდები",
+  "intake": "Intake",
+  "renew": "Renew",
+  "preview": "Preview",
+  "time_tracking": "დროის თვალყურის დევნება",
+  "work_management": "სამუშაოს მართვა",
+  "projects_and_issues": "პროექტები და სამუშაო ელემენტები",
+  "projects_and_issues_description": "ჩართეთ ან გამორთეთ ეს პროექტისთვის.",
+  "cycles_description": "დაგეგმეთ სამუშაო პროექტის მიხედვით და საჭიროებისამებრ შეცვალეთ დროის პერიოდი. ერთი ციკლი შეიძლება იყოს 2 კვირა, მომდევნო 1 კვირა.",
+  "modules_description": "მოაწყეთ სამუშაო ქვე-პროექტებად გამოყოფილი ხელმძღვანელებითა და მინიჭებული პირებით.",
+  "views_description": "შეინახეთ მორგებული დახარისხება, ფილტრები და ჩვენების პარამეტრები ან გაუზიარეთ ისინი თქვენს გუნდს.",
+  "pages_description": "შექმენით და დაარედაქტირეთ თავისუფალი ფორმის შინაარსი; ჩანაწერები, დოკუმენტები, ნებისმიერი რამ.",
+  "intake_description": "ნება მიეცით არაწევრებს გაუზიარონ შეცდომები, გამოხმაურება და წინადადებები თქვენი სამუშაო ნაკადის შეფერხების გარეშე.",
+  "time_tracking_description": "ჩაიწერეთ სამუშაო ელემენტებზე და პროექტებზე დახარჯული დრო.",
+  "work_management_description": "მართეთ თქვენი სამუშაო და პროექტები მარტივად.",
+  "documentation": "დოკუმენტაცია",
+  "message_support": "მხარდაჭერისთვის მესიჯის გაგზავნა",
+  "contact_sales": "გაყიდვებთან დაკავშირება",
+  "hyper_mode": "ჰიპერ რეჟიმი",
+  "keyboard_shortcuts": "კლავიატურის მალსახმობები",
+  "whats_new": "რა არის ახალი?",
+  "version": "ვერსია",
+  "we_are_having_trouble_fetching_the_updates": "ჩვენ გვაქვს პრობლემა განახლებების მიღებასთან.",
+  "our_changelogs": "ჩვენი ცვლილებების ჟურნალი",
+  "for_the_latest_updates": "უახლესი განახლებებისთვის.",
+  "please_visit": "გთხოვთ, ეწვიოთ",
+  "docs": "დოკუმენტები",
+  "full_changelog": "სრული ცვლილებების ჟურნალი",
+  "support": "მხარდაჭერა",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Plane Pages-ის მხარდაჭერით",
+  "please_select_at_least_one_invitation": "გთხოვთ, აირჩიოთ მინიმუმ ერთი მოწვევა.",
+  "please_select_at_least_one_invitation_description": "გთხოვთ, აირჩიოთ მინიმუმ ერთი მოწვევა სამუშაო სივრცეში შესაერთებლად.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "ჩვენ ვხედავთ, რომ ვიღაცამ მოგიწვიათ სამუშაო სივრცეში შესაერთებლად",
+  "join_a_workspace": "სამუშაო სივრცეში შეერთება",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "ჩვენ ვხედავთ, რომ ვიღაცამ მოგიწვიათ სამუშაო სივრცეში შესაერთებლად",
+  "join_a_workspace_description": "სამუშაო სივრცეში შეერთება",
+  "accept_and_join": "მიღება და შეერთება",
+  "go_home": "მთავარ გვერდზე გადასვლა",
+  "no_pending_invites": "მომლოდინე მოწვევები არ არის",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "აქ შეგიძლიათ ნახოთ, თუ ვინმე მოგიწვევთ სამუშაო სივრცეში",
+  "back_to_home": "მთავარ გვერდზე დაბრუნება",
+  "workspace_name": "სამუშაო სივრცის სახელი",
+  "deactivate_your_account": "თქვენი ანგარიშის გაუქმება",
+  "deactivate_your_account_description": "გაუქმების შემდეგ, თქვენ ვერ მიიღებთ სამუშაო ელემენტებს და ვერ გადაიხდით თქვენი სამუშაო სივრცისთვის. ანგარიშის ხელახლა გასააქტიურებლად, თქვენ დაგჭირდებათ მოწვევა ამ ელფოსტის მისამართზე.",
+  "deactivating": "გაუქმება",
+  "confirm": "დადასტურება",
+  "confirming": "დადასტურება",
+  "draft_created": "მონახაზი შეიქმნა",
+  "issue_created_successfully": "სამუშაო ელემენტი წარმატებით შეიქმნა",
+  "draft_creation_failed": "მონახაზის შექმნა ვერ მოხერხდა",
+  "issue_creation_failed": "სამუშაო ელემენტის შექმნა ვერ მოხერხდა",
+  "draft_issue": "სამუშაო ელემენტის მონახაზი",
+  "issue_updated_successfully": "სამუშაო ელემენტი წარმატებით განახლდა",
+  "issue_could_not_be_updated": "სამუშაო ელემენტის განახლება ვერ მოხერხდა",
+  "create_a_draft": "მონახაზის შექმნა",
+  "save_to_drafts": "მონახაზებში შენახვა",
+  "save": "შენახვა",
+  "update": "განახლება",
+  "updating": "განახლება",
+  "create_new_issue": "ახალი სამუშაო ელემენტის შექმნა",
+  "editor_is_not_ready_to_discard_changes": "რედაქტორი არ არის მზად ცვლილებების გაუქმებისთვის",
+  "failed_to_move_issue_to_project": "სამუშაო ელემენტის პროექტში გადატანა ვერ მოხერხდა",
+  "create_more": "მეტის შექმნა",
+  "add_to_project": "პროექტში დამატება",
+  "discard": "გაუქმება",
+  "duplicate_issue_found": "დუბლიკატი სამუშაო ელემენტი მოიძებნა",
+  "duplicate_issues_found": "დუბლიკატი სამუშაო ელემენტები მოიძებნა",
+  "no_matching_results": "შესაბამისი შედეგები არ მოიძებნა",
+  "title_is_required": "სათაური სავალდებულოა",
+  "title": "სათაური",
+  "state": "მდგომარეობა",
+  "transition": "Transition",
+  "history": "History",
+  "priority": "პრიორიტეტი",
+  "none": "არცერთი",
+  "urgent": "გადაუდებელი",
+  "high": "მაღალი",
+  "medium": "საშუალო",
+  "low": "დაბალი",
+  "members": "წევრები",
+  "assignee": "მინიჭებული",
+  "assignees": "მინიჭებულები",
+  "subscriber": "{count, plural, one{# Subscriber} other{# Subscribers}}",
+  "you": "თქვენ",
+  "labels": "იარლიყები",
+  "create_new_label": "ახალი იარლიყის შექმნა",
+  "label_name": "Label name",
+  "failed_to_create_label": "Failed to create label. Please try again.",
+  "start_date": "დაწყების თარიღი",
+  "end_date": "დასრულების თარიღი",
+  "due_date": "ვადის თარიღი",
+  "target_date": "Target date",
+  "estimate": "შეფასება",
+  "change_parent_issue": "მშობელი სამუშაო ელემენტის შეცვლა",
+  "remove_parent_issue": "მშობელი სამუშაო ელემენტის ამოღება",
+  "add_parent": "მშობლის დამატება",
+  "loading_members": "წევრების ჩატვირთვა",
+  "view_link_copied_to_clipboard": "ხედის ბმული კოპირებულია ბუფერში.",
+  "required": "სავალდებულო",
+  "optional": "არჩევითი",
+  "Cancel": "გაუქმება",
+  "edit": "რედაქტირება",
+  "archive": "არქივირება",
+  "restore": "აღდგენა",
+  "open_in_new_tab": "ახალ ჩანართში გახსნა",
+  "delete": "წაშლა",
+  "deleting": "წაშლა",
+  "make_a_copy": "ასლის გაკეთება",
+  "move_to_project": "პროექტში გადატანა",
+  "good": "კარგი",
+  "morning": "დილა",
+  "afternoon": "შუადღე",
+  "evening": "საღამო",
+  "show_all": "ყველას ჩვენება",
+  "show_less": "ნაკლების ჩვენება",
+  "no_data_yet": "ჯერ მონაცემები არ არის",
+  "syncing": "სინქრონიზაცია",
+  "add_work_item": "სამუშაო ელემენტის დამატება",
+  "advanced_description_placeholder": "დააჭირეთ '/' ბრძანებებისთვის",
+  "create_work_item": "სამუშაო ელემენტის შექმნა",
+  "attachments": "დანართები",
+  "declining": "უარყოფა",
+  "declined": "უარყოფილი",
+  "decline": "უარყოფა",
+  "unassigned": "მიუნიჭებელი",
+  "work_items": "სამუშაო ელემენტები",
+  "add_link": "ბმულის დამატება",
+  "points": "ქულები",
+  "no_assignee": "მინიჭებული არ არის",
+  "no_assignees_yet": "ჯერ მინიჭებულები არ არიან",
+  "no_labels_yet": "ჯერ იარლიყები არ არის",
+  "ideal": "იდეალური",
+  "current": "მიმდინარე",
+  "no_matching_members": "შესაბამისი წევრები არ მოიძებნა",
+  "leaving": "დატოვება",
+  "removing": "ამოღება",
+  "leave": "დატოვება",
+  "refresh": "განახლება",
+  "refreshing": "განახლება",
+  "refresh_status": "სტატუსის განახლება",
+  "prev": "წინა",
+  "next": "შემდეგი",
+  "re_generating": "ხელახალი გენერირირება",
+  "re_generate": "ხელახლა გენერირება",
+  "re_generate_key": "გასაღების ხელახალი გენერირება",
+  "export": "ექსპორტი",
+  "member": "{count, plural, one{# წევრი} other{# წევრი}}",
+  "new_password_must_be_different_from_old_password": "ახალი პაროლი უნდა განსხვავდებოდეს ძველი პაროლისგან",
+  "edited": "დარედაქტირებული",
+  "bot": "ბოტი",
+  "settings_description": "მართეთ თქვენი ანგარიში, სამუშაო სივრცე და პროექტის პრეფერენციები ერთ ადგილას. გადართეთ ჩანართებს შორის მარტივი კონფიგურაციისთვის.",
+  "back_to_workspace": "სამუშაო სივრცეში დაბრუნება",
+  "upgrade_request": "Ask your Workspace Admin to upgrade.",
+  "copied_to_clipboard": "Copied to clipboard",
+  "copied_to_clipboard_description": "The URL has been successfully copied to your clipboard",
+  "toast": {
+    "success": "წარმატება!",
+    "error": "შეცდომა!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "ბმული შეიქმნა",
+        "message": "ბმული წარმატებით შეიქმნა"
+      },
+      "not_created": {
+        "title": "ბმული არ შეიქმნა",
+        "message": "ბმულის შექმნა ვერ მოხერხდა"
+      },
+      "updated": {
+        "title": "ბმული განახლდა",
+        "message": "ბმული წარმატებით განახლდა"
+      },
+      "not_updated": {
+        "title": "ბმული არ განახლდა",
+        "message": "ბმულის განახლება ვერ მოხერხდა"
+      },
+      "removed": {
+        "title": "ბმული ამოიღეს",
+        "message": "ბმული წარმატებით ამოიღეს"
+      },
+      "not_removed": {
+        "title": "ბმული არ ამოიღეს",
+        "message": "ბმულის ამოღება ვერ მოხერხდა"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL არასწორია",
+        "placeholder": "ჩაწერეთ ან ჩასვით URL"
+      },
+      "title": {
+        "text": "ჩვენების სათაური",
+        "placeholder": "როგორც გსურთ ამ ბმულის ნახვა"
+      }
+    }
+  },
+  "common": {
+    "all": "ყველა",
+    "no_items_in_this_group": "No items in this group",
+    "drop_here_to_move": "Drop here to move",
+    "states": "მდგომარეობები",
+    "state": "მდგომარეობა",
+    "state_groups": "მდგომარეობის ჯგუფები",
+    "state_group": "მდგომარეობის ჯგუფი",
+    "priorities": "პრიორიტეტები",
+    "priority": "პრიორიტეტი",
+    "team_project": "გუნდის პროექტი",
+    "project": "პროექტი",
+    "cycle": "ციკლი",
+    "cycles": "ციკლები",
+    "module": "მოდული",
+    "modules": "მოდულები",
+    "labels": "იარლიყები",
+    "label": "იარლიყი",
+    "admins": "ადმინები",
+    "users": "მომხმარებლები",
+    "guests": "სტუმრები",
+    "assignees": "მინიჭებულები",
+    "assignee": "მინიჭებული",
+    "created_by": "შექმნილია",
+    "none": "არცერთი",
+    "link": "ბმული",
+    "estimates": "შეფასებები",
+    "estimate": "შეფასება",
+    "created_at": "შექმნის თარიღი",
+    "updated_at": "Updated at",
+    "completed_at": "დასრულების თარიღი",
+    "layout": "განლაგება",
+    "filters": "ფილტრები",
+    "display": "ჩვენება",
+    "load_more": "მეტის ჩატვირთვა",
+    "activity": "აქტივობა",
+    "analytics": "ანალიტიკა",
+    "dates": "თარიღები",
+    "success": "წარმატება!",
+    "something_went_wrong": "რაღაც შეცდომა მოხდა",
+    "error": {
+      "label": "შეცდომა!",
+      "message": "მოხდა გარკვეული შეცდომა. გთხოვთ, სცადოთ ხელახლა."
+    },
+    "group_by": "ჯგუფის მიხედვით",
+    "epic": "ეპიკი",
+    "epics": "ეპიკები",
+    "work_item": "სამუშაო ელემენტი",
+    "work_items": "სამუშაო ელემენტები",
+    "sub_work_item": "ქვე-სამუშაო ელემენტი",
+    "views": "Views",
+    "pages": "Pages",
+    "add": "დამატება",
+    "warning": "გაფრთხილება",
+    "updating": "განახლება",
+    "adding": "დამატება",
+    "update": "განახლება",
+    "creating": "შექმნა",
+    "create": "შექმნა",
+    "cancel": "გაუქმება",
+    "description": "აღწერა",
+    "title": "სათაური",
+    "attachment": "დანართი",
+    "general": "ზოგადი",
+    "features": "ფუნქციები",
+    "automation": "ავტომატიზაცია",
+    "project_name": "პროექტის სახელი",
+    "project_id": "პროექტის ID",
+    "project_timezone": "პროექტის დროის სარტყელი",
+    "created_on": "შექმნილია",
+    "updated_on": "Updated on",
+    "completed_on": "Completed on",
+    "update_project": "პროექტის განახლება",
+    "identifier_already_exists": "იდენტიფიკატორი უკვე არსებობს",
+    "add_more": "მეტის დამატება",
+    "defaults": "ნაგულისხმევი",
+    "add_label": "იარლიყის დამატება",
+    "customize_time_range": "დროის დიაპაზონის მორგება",
+    "loading": "ჩატვირთვა",
+    "attachments": "დანართები",
+    "property": "თვისება",
+    "properties": "თვისებები",
+    "parent": "მშობელი",
+    "page": "გვერდი",
+    "remove": "ამოღება",
+    "archiving": "არქივირება",
+    "archive": "არქივირება",
+    "access": {
+      "public": "საჯარო",
+      "private": "პირადი"
+    },
+    "done": "დასრულებული",
+    "sub_work_items": "ქვე-სამუშაო ელემენტები",
+    "comment": "კომენტარი",
+    "workspace_level": "სამუშაო სივრცის დონე",
+    "order_by": {
+      "label": "დალაგება",
+      "manual": "ხელით",
+      "last_created": "ბოლო შექმნილი",
+      "last_updated": "ბოლო განახლებული",
+      "start_date": "დაწყების თარიღი",
+      "due_date": "ვადის თარიღი",
+      "asc": "აღმავალი",
+      "desc": "დაღმავალი",
+      "updated_on": "განახლებულია"
+    },
+    "sort": {
+      "asc": "აღმავალი",
+      "desc": "დაღმავალი",
+      "created_on": "შექმნილია",
+      "updated_on": "განახლებულია"
+    },
+    "comments": "კომენტარები",
+    "updates": "განახლებები",
+    "additional_updates": "Additional updates",
+    "clear_all": "ყველას გასუფთავება",
+    "copied": "კოპირებულია!",
+    "link_copied": "ბმული კოპირებულია!",
+    "link_copied_to_clipboard": "ბმული კოპირებულია ბუფერში",
+    "copied_to_clipboard": "სამუშაო ელემენტის ბმული კოპირებულია ბუფერში",
+    "branch_name_copied_to_clipboard": "Branch name copied to clipboard",
+    "is_copied_to_clipboard": "სამუშაო ელემენტი კოპირებულია ბუფერში",
+    "no_links_added_yet": "ჯერ ბმულები არ არის დამატებული",
+    "add_link": "ბმულის დამატება",
+    "links": "ბმულები",
+    "go_to_workspace": "სამუშაო სივრცეში გადასვლა",
+    "progress": "პროგრესი",
+    "optional": "არჩევითი",
+    "join": "შეერთება",
+    "go_back": "უკან დაბრუნება",
+    "continue": "გაგრძელება",
+    "resend": "ხელახალი გაგზავნა",
+    "relations": "ურთიერთობები",
+    "dependencies": "Dependencies",
+    "errors": {
+      "default": {
+        "title": "შეცდომა!",
+        "message": "რაღაც შეცდომა მოხდა. გთხოვთ, სცადოთ ხელახლა."
+      },
+      "required": "ეს ველი სავალდებულოა",
+      "entity_required": "{entity} სავალდებულოა",
+      "restricted_entity": "{entity} შეზღუდულია"
+    },
+    "update_link": "ბმულის განახლება",
+    "attach": "მიმაგრება",
+    "create_new": "ახლის შექმნა",
+    "add_existing": "არსებულის დამატება",
+    "type_or_paste_a_url": "ჩაწერეთ ან ჩასვით URL",
+    "url_is_invalid": "URL არასწორია",
+    "display_title": "ჩვენების სათაური",
+    "link_title_placeholder": "როგორც გსურთ ამ ბმულის ნახვა",
+    "url": "URL",
+    "side_peek": "გვერდითი ხედი",
+    "modal": "მოდალი",
+    "full_screen": "სრულ ეკრანზე",
+    "close_peek_view": "გვერდითი ხედის დახურვა",
+    "toggle_peek_view_layout": "გვერდითი ხედის განლაგების გადართვა",
+    "options": "ვარიანტები",
+    "duration": "ხანგრძლივობა",
+    "today": "დღეს",
+    "week": "კვირა",
+    "month": "თვე",
+    "quarter": "კვარტალი",
+    "press_for_commands": "დააჭირეთ '/' ბრძანებებისთვის",
+    "click_to_add_description": "დააწკაპუნეთ აღწერის დასამატებლად",
+    "on_track": "გეგმის მიხედვით",
+    "off_track": "გეგმის მიღმა",
+    "at_risk": "რისკის ქვეშ",
+    "timeline": "დროის ხაზი",
+    "completion": "დასრულება",
+    "upcoming": "მომავალი",
+    "completed": "დასრულებული",
+    "in_progress": "მიმდინარე",
+    "planned": "დაგეგმილი",
+    "paused": "შეჩერებული",
+    "search": {
+      "label": "ძიება",
+      "placeholder": "ჩაწერეთ ძიებისთვის",
+      "no_matches_found": "შესაბამისი არ მოიძებნა",
+      "no_matching_results": "შესაბამისი შედეგები არ მოიძებნა",
+      "min_chars": "Type at least {count} characters to search",
+      "error": "Error fetching search results",
+      "no_results": {
+        "title": "No matching results",
+        "description": "Remove the search criteria to see all results"
+      }
+    },
+    "actions": {
+      "edit": "რედაქტირება",
+      "make_a_copy": "ასლის გაკეთება",
+      "open_in_new_tab": "ახალ ჩანართში გახსნა",
+      "copy_link": "ბმულის კოპირება",
+      "copy_branch_name": "Copy branch name",
+      "archive": "არქივირება",
+      "restore": "აღდგენა",
+      "delete": "წაშლა",
+      "remove_relation": "ურთიერთობის ამოღება",
+      "subscribe": "გამოწერა",
+      "unsubscribe": "გამოწერის გაუქმება",
+      "clear_sorting": "დახარისხების გასუფთავება",
+      "show_weekends": "შაბათ-კვირის ჩვენება",
+      "enable": "ჩართვა",
+      "disable": "გამორთვა",
+      "copy_markdown": "Markdown-ის კოპირება",
+      "reply": "Reply"
+    },
+    "name": "სახელი",
+    "discard": "გაუქმება",
+    "confirm": "დადასტურება",
+    "confirming": "დადასტურება",
+    "read_the_docs": "წაიკითხეთ დოკუმენტები",
+    "default": "ნაგულისხმევი",
+    "active": "აქტიური",
+    "enabled": "ჩართული",
+    "disabled": "გამორთული",
+    "mandate": "მანდატი",
+    "mandatory": "სავალდებულო",
+    "global": "Global",
+    "yes": "დიახ",
+    "no": "არა",
+    "please_wait": "გთხოვთ, მოიცადოთ",
+    "enabling": "ჩართვა",
+    "disabling": "გამორთვა",
+    "beta": "ბეტა",
+    "or": "ან",
+    "next": "შემდეგი",
+    "back": "უკან",
+    "retry": "Retry",
+    "cancelling": "გაუქმება",
+    "configuring": "კონფიგურაცია",
+    "clear": "გასუფთავება",
+    "import": "იმპორტი",
+    "connect": "დაკავშირება",
+    "authorizing": "ავტორიზაცია",
+    "processing": "დამუშავება",
+    "no_data_available": "მონაცემები არ არის ხელმისაწვდომი",
+    "from": "{name}-დან",
+    "authenticated": "ავთენტიფიცირებული",
+    "select": "არჩევა",
+    "upgrade": "განახლება",
+    "add_seats": "ადგილების დამატება",
+    "projects": "პროექტები",
+    "workspace": "სამუშაო სივრცე",
+    "workspaces": "სამუშაო სივრცეები",
+    "team": "გუნდი",
+    "teams": "გუნდები",
+    "entity": "ერთეული",
+    "entities": "ერთეულები",
+    "task": "დავალება",
+    "tasks": "დავალებები",
+    "section": "სექცია",
+    "sections": "სექციები",
+    "edit": "რედაქტირება",
+    "connecting": "დაკავშირება",
+    "connected": "დაკავშირებული",
+    "disconnect": "გათიშვა",
+    "disconnecting": "გათიშვა",
+    "installing": "ინსტალაცია",
+    "install": "დაყენება",
+    "reset": "გადატვირთვა",
+    "live": "ცოცხალი",
+    "change_history": "ცვლილებების ისტორია",
+    "coming_soon": "მალე იქნება",
+    "member": "წევრი",
+    "members": "წევრები",
+    "you": "თქვენ",
+    "upgrade_cta": {
+      "higher_subscription": "განაახლეთ უფრო მაღალ გამოწერაზე",
+      "talk_to_sales": "დაელაპარაკეთ გაყიდვების გუნდს"
+    },
+    "category": "კატეგორია",
+    "categories": "კატეგორიები",
+    "saving": "შენახვა",
+    "save_changes": "ცვლილებების შენახვა",
+    "delete": "წაშლა",
+    "deleting": "წაშლა",
+    "pending": "მომლოდინე",
+    "invite": "მოწვევა",
+    "view": "ხედი",
+    "deactivated_user": "გაუქმებული მომხმარებელი",
+    "apply": "გამოყენება",
+    "applying": "გამოყენება",
+    "overview": "მიმოხილვა",
+    "no_of": "{entity}-ის რაოდენობა",
+    "resolved": "გადაჭრილი",
+    "get_started": "Get started",
+    "worklogs": "Worklogs",
+    "project_updates": "Project Updates",
+    "workflows": "Workflows",
+    "templates": "Templates",
+    "business": "Business",
+    "members_and_teamspaces": "Members & Teamspaces",
+    "recurring_work_items": "Recurring work items",
+    "milestones": "Milestones",
+    "open_in_full_screen": "Open {page} in full screen",
+    "details": "Details",
+    "project_structure": "Project structure",
+    "custom_properties": "Custom properties",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "X-ღერძი",
+    "y_axis": "Y-ღერძი",
+    "metric": "მეტრიკა"
+  },
+  "form": {
+    "title": {
+      "required": "სათაური სავალდებულოა",
+      "max_length": "სათაური უნდა იყოს {length} სიმბოლოზე ნაკლები"
+    }
+  },
+  "entity": {
+    "grouping_title": "{entity} ჯგუფირება",
+    "priority": "{entity} პრიორიტეტი",
+    "all": "ყველა {entity}",
+    "drop_here_to_move": "ჩააგდეთ აქ {entity}-ის გადასაადგილებლად",
+    "delete": {
+      "label": "{entity}-ის წაშლა",
+      "success": "{entity} წარმატებით წაიშალა",
+      "failed": "{entity}-ის წაშლა ვერ მოხერხდა"
+    },
+    "update": {
+      "failed": "{entity}-ის განახლება ვერ მოხერხდა",
+      "success": "{entity} წარმატებით განახლდა"
+    },
+    "link_copied_to_clipboard": "{entity}-ის ბმული კოპირებულია ბუფერში",
+    "fetch": {
+      "failed": "{entity}-ის მოპოვების შეცდომა"
+    },
+    "add": {
+      "success": "{entity} წარმატებით დაემატა",
+      "failed": "{entity}-ის დამატების შეცდომა"
+    },
+    "remove": {
+      "success": "{entity} წარმატებით ამოიღეს",
+      "failed": "{entity}-ის ამოღების შეცდომა"
+    }
+  },
+  "attachment": {
+    "error": "ფაილის მიმაგრება ვერ მოხერხდა. სცადეთ ხელახლა ატვირთვა.",
+    "only_one_file_allowed": "ერთდროულად მხოლოდ ერთი ფაილის ატვირთვა შეიძლება.",
+    "file_size_limit": "ფაილი უნდა იყოს {size}MB-ზე ნაკლები ზომის.",
+    "drag_and_drop": "გადააადგილეთ და ჩააგდეთ ნებისმიერ ადგილას ატვირთვისთვის",
+    "delete": "დანართის წაშლა"
+  },
+  "label": {
+    "select": "იარლიყის არჩევა",
+    "create": {
+      "success": "იარლიყი წარმატებით შეიქმნა",
+      "failed": "იარლიყის შექმნა ვერ მოხერხდა",
+      "already_exists": "იარლიყი უკვე არსებობს",
+      "type": "ჩაწერეთ ახალი იარლიყის დასამატებლად"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {ხედი} other {ხედები}}",
+    "create": {
+      "label": "ხედის შექმნა"
+    },
+    "update": {
+      "label": "ხედის განახლება"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "სტუმარი",
+      "description": "ორგანიზაციის გარე წევრები შეიძლება მოწვეულ იქნენ სტუმრებად."
+    },
+    "member": {
+      "title": "წევრი",
+      "description": "შესაძლებლობა წაიკითხოთ, ჩაწეროთ, დაარედაქტიროთ და წაშალოთ ერთეულები პროექტებში, ციკლებში და მოდულებში"
+    },
+    "admin": {
+      "title": "ადმინი",
+      "description": "ყველა უფლება დაყენებულია true-ზე სამუშაო სივრცეში."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "პროდუქტის / პროექტის მენეჯერი",
+    "development_or_engineering": "განვითარება / ინჟინერია",
+    "founder_or_executive": "დამფუძნებელი / აღმასრულებელი",
+    "freelancer_or_consultant": "ფრილანსერი / კონსულტანტი",
+    "marketing_or_growth": "მარკეტინგი / ზრდა",
+    "sales_or_business_development": "გაყიდვები / ბიზნესის განვითარება",
+    "support_or_operations": "მხარდაჭერა / ოპერაციები",
+    "student_or_professor": "სტუდენტი / პროფესორი",
+    "human_resources": "ადამიანური რესურსები",
+    "other": "სხვა"
+  },
+  "default_global_view": {
+    "all_issues": "ყველა სამუშაო ელემენტი",
+    "assigned": "მინიჭებული",
+    "created": "შექმნილი",
+    "subscribed": "გამოწერილი"
+  },
+  "description_versions": {
+    "last_edited_by": "ბოლოს დაარედაქტირა",
+    "previously_edited_by": "წინა რედაქტორი",
+    "edited_by": "დარედაქტირებულია"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane არ გაუშვია. ეს შეიძლება იყოს იმის გამო, რომ ერთი ან მეტი Plane სერვისი ვერ გაუშვეს.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "აირჩიეთ ლოგების ნახვა setup.sh-დან და Docker ლოგებიდან დასარწმუნებლად."
+  },
+  "customize_navigation": "Customize navigation",
+  "personal": "Personal",
+  "accordion_navigation_control": "Accordion sidebar navigation",
+  "horizontal_navigation_bar": "Tabbed Navigation",
+  "show_limited_projects_on_sidebar": "Show limited projects on sidebar",
+  "enter_number_of_projects": "Enter number of projects",
+  "pin": "Pin",
+  "unpin": "Unpin",
+  "workspace_dashboards": "Dashboards",
+  "pi_chat": "Plane AI",
+  "in_app": "In-app",
+  "forms": "Forms",
+  "milestones": "Milestones",
+  "milestones_description": "Milestones provide a layer to align work items toward shared completion dates.",
+  "file_upload": {
+    "upload_text": "Click here to upload file",
+    "drag_drop_text": "Drag and Drop",
+    "processing": "Processing",
+    "invalid_file_type": "Invalid file type",
+    "missing_fields": "Missing fields",
+    "success": "{fileName} Uploaded!"
+  },
+  "date": "Date",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "ექსპორტირეთ სამუშაო ელემენტები CSV ფაილში.",
+      "short_description": "ექსპორტი csv-ად"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "ექსპორტირეთ სამუშაო ელემენტები Excel ფაილში.",
+      "short_description": "ექსპორტი excel-ად"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "ექსპორტირეთ სამუშაო ელემენტები Excel ფაილში.",
+      "short_description": "ექსპორტი excel-ად"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "ექსპორტირეთ სამუშაო ელემენტები JSON ფაილში.",
+      "short_description": "ექსპორტი json-ად"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/cycle.json b/packages/i18n/src/locales/ka-ge/cycle.json
new file mode 100644
index 0000000..18fcd8a
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "დაამატეთ სამუშაო ელემენტები ციკლში მისი პროგრესის სანახავად"
+      },
+      "chart": {
+        "title": "დაამატეთ სამუშაო ელემენტები ციკლში burn-down გრაფიკის სანახავად."
+      },
+      "priority_issue": {
+        "title": "ნახეთ მაღალი პრიორიტეტის სამუშაო ელემენტები, რომლებიც ციკლში მოგვარებულია ერთი შეხედვით."
+      },
+      "assignee": {
+        "title": "დაამატეთ მინიჭებულები სამუშაო ელემენტებზე სამუშაოს განაწილების სანახავად მინიჭებულების მიხედვით."
+      },
+      "label": {
+        "title": "დაამატეთ იარლიყები სამუშაო ელემენტებზე სამუშაოს განაწილების სანახავად იარლიყების მიხედვით."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {ციკლი} other {ციკლები}}",
+    "no_cycle": "ციკლი არ არის"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Add work items to the cycle to view it's\n progress"
+      },
+      "priority": {
+        "title": "Observe high priority work items tackled in\n the cycle at a glance."
+      },
+      "assignee": {
+        "title": "Add assignees to work items to see a\n breakdown of work by assignees."
+      },
+      "label": {
+        "title": "Add labels to work items to see the\n breakdown of work by labels."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/editor.json b/packages/i18n/src/locales/ka-ge/editor.json
new file mode 100644
index 0000000..293dc51
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Drop files here or click to upload"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "File too large.",
+        "description": "Maximum size per file is {maxFileSize}MB"
+      },
+      "unsupported_file_type": {
+        "title": "Unsupported file type.",
+        "description": "See supported formats"
+      },
+      "default": {
+        "title": "Upload failed.",
+        "description": "Something went wrong. Please try again."
+      }
+    },
+    "upgrade": {
+      "description": "Upgrade your plan to view this attachment."
+    },
+    "aria": {
+      "click_to_upload": "Click to upload attachment"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Convert to Embed",
+      "convert_to_link": "Convert to Link",
+      "convert_to_richcard": "Convert to Rich Card"
+    },
+    "placeholder": {
+      "insert_embed": "Insert your preferred embed link here, such as YouTube video, Figma design, etc.",
+      "link": "Enter or paste a link"
+    },
+    "input_modal": {
+      "embed": "Embed",
+      "works_with_links": "Works with YouTube, Figma, Google Docs and more"
+    },
+    "error": {
+      "not_valid_link": "Please enter a valid URL."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Describe the content of this block",
+      "generated_here": "Your AI content will be generated here"
+    },
+    "block_types": {
+      "placeholder": "Select block type",
+      "summarize_page": "Summarize Page",
+      "custom_prompt": "Custom Prompt"
+    },
+    "actions": {
+      "discard": "Discard",
+      "generate": "Generate",
+      "generating": "Generating",
+      "rewriting": "Rewriting",
+      "rewrite": "Rewrite",
+      "use_this": "Use this",
+      "refine": "Refine"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/empty-state.json b/packages/i18n/src/locales/ka-ge/empty-state.json
new file mode 100644
index 0000000..5d50ea6
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "პროგრესის მეტრიკები ჯერ არ არის საჩვენებლად.",
+      "description": "დაიწყეთ თვისებების მნიშვნელობების დაყენება სამუშაო ელემენტებში, რომ პროგრესის მეტრიკები აქ ნახოთ."
+    },
+    "updates": {
+      "title": "ჯერ განახლებები არ არის.",
+      "description": "როგორც კი პროექტის წევრები განახლებებს დაამატებენ, ისინი აქ გამოჩნდება"
+    },
+    "search": {
+      "title": "შესაბამისი შედეგები არ მოიძებნა.",
+      "description": "შედეგები ვერ მოიძებნა. სცადეთ ძიების პირობების შეცვლა."
+    },
+    "not_found": {
+      "title": "ოჰ! რაღაც არასწორია",
+      "description": "ამჟამად თქვენი Plane ანგარიშის მიღება ვერ ხერხდება. ეს შეიძლება ქსელის შეცდომა იყოს.",
+      "cta_primary": "სცადეთ განახლება"
+    },
+    "server_error": {
+      "title": "სერვერის შეცდომა",
+      "description": "სერვერთან დაკავშირება და მონაცემების მიღება ვერ ხერხდება. არ ინერვიულოთ, ჩვენ ვმუშაობთ ამაზე.",
+      "cta_primary": "სცადეთ განახლება"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "როგორც ჩანს, თქვენ არ გაქვთ ამ პროექტზე წვდომა",
+      "restricted_description": "დაუკავშირდით ადმინისტრატორს წვდომის მოსათხოვნად და შეძლებთ აქ გაგრძელებას.",
+      "join_description": "დააწკაპუნეთ ქვემოთ მოცემულ ღილაკზე მის შესაერთებლად.",
+      "cta_primary": "პროექტში გაწევრიანება",
+      "cta_loading": "პროექტში გაწევრიანება მიმდინარეობს"
+    },
+    "invalid_project": {
+      "title": "პროექტი ვერ მოიძებნა",
+      "description": "პროექტი, რომელსაც ეძებთ, არ არსებობს."
+    },
+    "work_items": {
+      "title": "დაიწყეთ თქვენი პირველი სამუშაო ელემენტით.",
+      "description": "სამუშაო ელემენტები თქვენი პროექტის სამშენებლო ბლოკებია — მიანიჭეთ პასუხისმგებლები, დააყენეთ პრიორიტეტები და მარტივად თვალყური ადევნეთ პროგრესს.",
+      "cta_primary": "შექმენით თქვენი პირველი სამუშაო ელემენტი"
+    },
+    "cycles": {
+      "title": "დააჯგუფეთ და დროში ჩარჩეთ თქვენი სამუშაო ციკლებში.",
+      "description": "დაშალეთ სამუშაო დროით შეზღუდულ ნაწილებად, დააყენეთ თარიღები პროექტის ბოლო ვადიდან გამომავლობით და მიაღწიეთ ხელშესახებ პროგრესს გუნდთან ერთად.",
+      "cta_primary": "დააყენეთ თქვენი პირველი ციკლი"
+    },
+    "cycle_work_items": {
+      "title": "ამ ციკლში საჩვენებელი სამუშაო ელემენტები არ არის",
+      "description": "შექმენით სამუშაო ელემენტები, რომ დაიწყოთ თქვენი გუნდის პროგრესის მონიტორინგი ამ ციკლში და მიაღწიოთ მიზნებს დროულად.",
+      "cta_primary": "სამუშაო ელემენტის შექმნა",
+      "cta_secondary": "არსებული სამუშაო ელემენტის დამატება"
+    },
+    "modules": {
+      "title": "გაანაწილეთ თქვენი პროექტის მიზნები მოდულებზე და მარტივად თვალყური ადევნეთ.",
+      "description": "მოდულები ერთმანეთთან დაკავშირებული სამუშაო ელემენტებისგან შედგება. ისინი ეხმარებიან პროგრესის მონიტორინგში პროექტის ფაზების მიხედვით, თითოეული კონკრეტული ვადებით და ანალიტიკით, რომელიც გვიჩვენებს, რამდენად ახლოს ხართ ამ ფაზების მიღწევასთან.",
+      "cta_primary": "დააყენეთ თქვენი პირველი მოდული"
+    },
+    "module_work_items": {
+      "title": "ამ მოდულში საჩვენებელი სამუშაო ელემენტები არ არის",
+      "description": "შექმენით სამუშაო ელემენტები ამ მოდულის მონიტორინგის დასაწყებად.",
+      "cta_primary": "სამუშაო ელემენტის შექმნა",
+      "cta_secondary": "არსებული სამუშაო ელემენტის დამატება"
+    },
+    "views": {
+      "title": "შეინახეთ მორგებული ხედები თქვენი პროექტისთვის",
+      "description": "ხედები შენახული ფილტრებია, რომლებიც გეხმარებათ სწრაფად მიიღოთ წვდომა ყველაზე ხშირად გამოყენებულ ინფორმაციაზე. ითანამშრომლეთ მარტივად — გუნდის წევრები უზიარებენ და არგებენ ხედებს საკუთარი საჭიროებების მიხედვით.",
+      "cta_primary": "ხედის შექმნა"
+    },
+    "no_work_items_in_project": {
+      "title": "პროექტში ჯერ სამუშაო ელემენტები არ არის",
+      "description": "დაამატეთ სამუშაო ელემენტები თქვენს პროექტს და დაყავით სამუშაო ხედებით თვალთვლის ნაწილებად.",
+      "cta_primary": "სამუშაო ელემენტის დამატება"
+    },
+    "work_item_filter": {
+      "title": "სამუშაო ელემენტები ვერ მოიძებნა",
+      "description": "თქვენმა მიმდინარე ფილტრმა შედეგები ვერ დააბრუნა. სცადეთ ფილტრების შეცვლა.",
+      "cta_primary": "სამუშაო ელემენტის დამატება"
+    },
+    "pages": {
+      "title": "დოკუმენტირეთ ყველაფერი — ჩანაწერებიდან PRD-ებამდე",
+      "description": "გვერდები საშუალებას გაძლევთ შეაგროვოთ და მოაწყოთ ინფორმაცია ერთ სივრცეში. დაწერეთ შეხვედრების ჩანაწერები, პროექტის დოკუმენტაცია და PRD-ები, ჩაამატეთ სამუშაო ელემენტები და დაალაგეთ ისინი მზა კომპონენტებით.",
+      "cta_primary": "შექმენით თქვენი პირველი გვერდი"
+    },
+    "archive_pages": {
+      "title": "ჯერ არქივირებული გვერდები არ არის",
+      "description": "დააარქივეთ გვერდები, რომლებიც ამჟამად არ გჭირდებათ. საჭიროების შემთხვევაში იპოვეთ ისინი აქ."
+    },
+    "intake_sidebar": {
+      "title": "დაარეგისტრირეთ Intake-ის მოთხოვნები",
+      "description": "გაგზავნეთ ახალი მოთხოვნები განსახილველად, პრიორიტეტის მისანიჭებლად და თქვენი პროექტის სამუშაო პროცესში თვალთვლისთვის.",
+      "cta_primary": "Intake-ის მოთხოვნის შექმნა"
+    },
+    "intake_main": {
+      "title": "აირჩიეთ Intake-ის სამუშაო ელემენტი მისი დეტალების სანახავად"
+    },
+    "epics": {
+      "title": "აქციეთ კომპლექსური პროექტები სტრუქტურირებულ ეპიკებად.",
+      "description": "ეპიკი გეხმარებათ დიდი მიზნების პატარა, თვალთვლად ამოცანებად ორგანიზებაში.",
+      "cta_primary": "ეპიკის შექმნა",
+      "cta_secondary": "დოკუმენტაცია"
+    },
+    "epic_work_items": {
+      "title": "ჯერ არ დაგიმატებიათ სამუშაო ელემენტები ამ ეპიკში.",
+      "description": "დაიწყეთ სამუშაო ელემენტების ამ ეპიკში დამატებით და თვალყური ადევნეთ მათ აქ.",
+      "cta_secondary": "სამუშაო ელემენტების დამატება"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "ჯერ არქივირებული ეპიკები არ არის",
+      "description": "შეგიძლიათ დააარქივოთ დასრულებული ან გაუქმებული ეპიკები. არქივირების შემდეგ იპოვეთ ისინი აქ."
+    },
+    "archive_work_items": {
+      "title": "ჯერ არქივირებული სამუშაო ელემენტები არ არის",
+      "description": "ხელით ან ავტომატიზაციით შეგიძლიათ დააარქივოთ დასრულებული ან გაუქმებული სამუშაო ელემენტები. არქივირების შემდეგ იპოვეთ ისინი აქ.",
+      "cta_primary": "ავტომატიზაციის დაყენება"
+    },
+    "archive_cycles": {
+      "title": "ჯერ არქივირებული ციკლები არ არის",
+      "description": "პროექტის მოსაწესრიგებლად დააარქივეთ დასრულებული ციკლები. არქივირების შემდეგ იპოვეთ ისინი აქ."
+    },
+    "archive_modules": {
+      "title": "ჯერ არქივირებული მოდულები არ არის",
+      "description": "პროექტის მოსაწესრიგებლად დააარქივეთ დასრულებული ან გაუქმებული მოდულები. არქივირების შემდეგ იპოვეთ ისინი აქ."
+    },
+    "home_widget_quick_links": {
+      "title": "მნიშვნელოვანი ბმულები, რესურსები ან დოკუმენტები ყოველთვის ხელთ გქონდეთ თქვენი სამუშაოსთვის"
+    },
+    "inbox_sidebar_all": {
+      "title": "თქვენს გამოწერილ სამუშაო ელემენტებზე განახლებები აქ გამოჩნდება"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "თქვენს სამუშაო ელემენტებში ხსენებები აქ გამოჩნდება"
+    },
+    "your_work_by_priority": {
+      "title": "ჯერ მინიჭებული სამუშაო ელემენტი არ არის"
+    },
+    "your_work_by_state": {
+      "title": "ჯერ მინიჭებული სამუშაო ელემენტი არ არის"
+    },
+    "views": {
+      "title": "ჯერ ხედები არ არის",
+      "description": "დაამატეთ სამუშაო ელემენტები თქვენს პროექტს და გამოიყენეთ ხედები ფილტრაციისთვის, დალაგებისთვის და პროგრესის მარტივად მონიტორინგისთვის.",
+      "cta_primary": "სამუშაო ელემენტის დამატება"
+    },
+    "drafts": {
+      "title": "ნახევრად დაწერილი სამუშაო ელემენტები",
+      "description": "ამის საცდელად დაიწყეთ სამუშაო ელემენტის დამატება და დატოვეთ იგი შუაში, ან შექმენით თქვენი პირველი მონახაზი ქვემოთ. 😉",
+      "cta_primary": "სამუშაო ელემენტის მონახაზის შექმნა"
+    },
+    "projects_archived": {
+      "title": "არქივირებული პროექტები არ არის",
+      "description": "როგორც ჩანს, ყველა თქვენი პროექტი ჯერ კიდევ აქტიურია — კარგი საქმეა!"
+    },
+    "analytics_projects": {
+      "title": "შექმენით პროექტები, რომ პროექტის მეტრიკები აქ ვიზუალიზირდეს."
+    },
+    "analytics_work_items": {
+      "title": "შექმენით პროექტები სამუშაო ელემენტებით და პასუხისმგებლებით, რომ დაიწყოთ შესრულების, პროგრესისა და გუნდის გავლენის თვალთვალი აქ."
+    },
+    "analytics_no_cycle": {
+      "title": "შექმენით ციკლები, რომ სამუშაო დროით შეზღუდულ ფაზებად მოაწყოთ და თვალყური ადევნოთ პროგრესს სპრინტებში."
+    },
+    "analytics_no_module": {
+      "title": "შექმენით მოდულები თქვენი სამუშაოს ორგანიზებისთვის და პროგრესის სხვადასხვა ეტაპზე თვალთვლისთვის."
+    },
+    "analytics_no_intake": {
+      "title": "დააყენეთ Intake შემომავალი მოთხოვნების სამართავად და თვალყური ადევნეთ, როგორ ღებულობენ ან უარყოფენ მათ"
+    },
+    "home_widget_stickies": {
+      "title": "ჩაწერეთ იდეა, დაიჭირეთ ა-ჰა, ან ჩაიწერეთ ტვინის ტალღა. დაამატეთ Sticky დასაწყებისთვის."
+    },
+    "stickies": {
+      "title": "დაიჭირეთ იდეები მყისიერად",
+      "description": "შექმენით Stickies სწრაფი ჩანაწერებისა და დავალებებისთვის და გქონდეთ ისინი თან, სადაც არ უნდა წახვიდეთ.",
+      "cta_primary": "პირველი Sticky-ის შექმნა",
+      "cta_secondary": "დოკუმენტაცია"
+    },
+    "active_cycles": {
+      "title": "აქტიური ციკლები არ არის",
+      "description": "ამჟამად მიმდინარე ციკლები არ გაქვთ. აქტიური ციკლები აქ გამოჩნდება, როდესაც ისინი დღევანდელ თარიღს მოიცავენ."
+    },
+    "dashboard": {
+      "title": "ვიზუალიზირეთ თქვენი პროგრესი დაფებით",
+      "description": "შექმენით მორგებადი დაფები მეტრიკების თვალთვლისთვის, შედეგების გასაზომად და ანალიტიკის ეფექტურად წარმოსადგენად.",
+      "cta_primary": "ახალი დაფის შექმნა"
+    },
+    "wiki": {
+      "title": "დაწერეთ ჩანაწერი, დოკუმენტი ან სრული ცოდნის ბაზა.",
+      "description": "გვერდები Plane-ში აზრების სივრცეა. ჩაიწერეთ შეხვედრების ჩანაწერები, მარტივად დააფორმატეთ ისინი, ჩაამატეთ სამუშაო ელემენტები, დაალაგეთ კომპონენტების ბიბლიოთეკით და შეინახეთ ყველაფერი თქვენი პროექტის კონტექსტში.",
+      "cta_primary": "შექმენით თქვენი გვერდი"
+    },
+    "project_overview_state_sidebar": {
+      "title": "ჩართეთ პროექტის სტატუსები",
+      "description": "ჩართეთ პროექტის სტატუსები ისეთი თვისებების სანახავად და სამართავად, როგორიცაა სტატუსი, პრიორიტეტი, ვადები და სხვა."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "ჯერ შეფასებები არ არის",
+      "description": "განსაზღვრეთ, როგორ ზომავს თქვენი გუნდი ძალისხმევას და თვალყური ადევნეთ მას თანმიმდევრულად ყველა სამუშაო ელემენტში.",
+      "cta_primary": "შეფასების სისტემის დამატება"
+    },
+    "labels": {
+      "title": "ჯერ იარლიყები არ არის",
+      "description": "შექმენით პერსონალიზებული იარლიყები თქვენი სამუშაო ელემენტების ეფექტურად კატეგორიზაციისა და მართვისთვის.",
+      "cta_primary": "შექმენით თქვენი პირველი იარლიყი"
+    },
+    "exports": {
+      "title": "ჯერ ექსპორტები არ არის",
+      "description": "ამჟამად ექსპორტის ჩანაწერები არ გაქვთ. როგორც კი მონაცემებს ექსპორტირებთ, ყველა ჩანაწერი აქ გამოჩნდება."
+    },
+    "tokens": {
+      "title": "ჯერ პერსონალური ტოკენი არ არის",
+      "description": "დააგენერირეთ უსაფრთხო API ტოკენები თქვენი სამუშაო სივრცის გარე სისტემებთან და აპლიკაციებთან დასაკავშირებლად.",
+      "cta_primary": "წვდომის ტოკენის დამატება"
+    },
+    "workspace_tokens": {
+      "title": "ჯერ წვდომის ტოკენები არ არის",
+      "description": "დააგენერირეთ უსაფრთხო API ტოკენები თქვენი სამუშაო სივრცის გარე სისტემებთან და აპლიკაციებთან დასაკავშირებლად.",
+      "cta_primary": "წვდომის ტოკენის დამატება"
+    },
+    "webhooks": {
+      "title": "ჯერ ვებჰუკი არ არის დამატებული",
+      "description": "ავტომატიზირეთ შეტყობინებები გარე სერვისებზე, როდესაც პროექტის მოვლენები ხდება.",
+      "cta_primary": "ვებჰუკის დამატება"
+    },
+    "work_item_types": {
+      "title": "შექმენით და მოარგეთ სამუშაო ელემენტის ტიპები",
+      "description": "განსაზღვრეთ უნიკალური სამუშაო ელემენტის ტიპები თქვენი პროექტისთვის. თითოეულ ტიპს შეიძლება ჰქონდეს საკუთარი თვისებები, სამუშაო პროცესები და ველები — მორგებული თქვენი პროექტისა და გუნდის საჭიროებებზე.",
+      "cta_primary": "ჩართვა"
+    },
+    "work_item_type_properties": {
+      "title": "განსაზღვრეთ თვისება და დეტალები, რომელთა ჩაწერაც გსურთ ამ სამუშაო ელემენტის ტიპისთვის. მოარგეთ იგი თქვენი პროექტის სამუშაო პროცესს.",
+      "cta_secondary": "თვისების დამატება"
+    },
+    "templates": {
+      "title": "ჯერ შაბლონები არ არის",
+      "description": "შეამცირეთ მომზადების დრო სამუშაო ელემენტებისა და გვერდების შაბლონების შექმნით — და დაიწყეთ ახალი სამუშაო წამებში.",
+      "cta_primary": "შექმენით თქვენი პირველი შაბლონი"
+    },
+    "recurring_work_items": {
+      "title": "ჯერ განმეორებადი სამუშაო ელემენტი არ არის",
+      "description": "დააყენეთ განმეორებადი სამუშაო ელემენტები განმეორებადი ამოცანების ავტომატიზაციისთვის და მარტივად დარჩით გრაფიკში.",
+      "cta_primary": "განმეორებადი სამუშაო ელემენტის შექმნა"
+    },
+    "worklogs": {
+      "title": "თვალყური ადევნეთ დროის ცხრილებს ყველა წევრისთვის",
+      "description": "ჩაიწერეთ დრო სამუშაო ელემენტებზე, რომ ნახოთ დეტალური დროის ცხრილები ნებისმიერი გუნდის წევრისთვის პროექტებში."
+    },
+    "group_syncing": {
+      "title": "ჯერ ჯგუფების შესაბამისობები არ არის"
+    },
+    "template_setting": {
+      "title": "ჯერ შაბლონები არ არის",
+      "description": "შეამცირეთ მომზადების დრო პროექტების, სამუშაო ელემენტებისა და გვერდების შაბლონების შექმნით — და დაიწყეთ ახალი სამუშაო წამებში.",
+      "cta_primary": "შაბლონის შექმნა"
+    },
+    "workflows": {
+      "title": "ჯერ სამუშაო პროცესები არ არის",
+      "description": "შექმენით სამუშაო პროცესები თქვენი სამუშაო ელემენტების პროგრესის სამართავად.",
+      "cta_primary": "ახალი სამუშაო პროცესის დამატება",
+      "states": {
+        "title": "სტატუსების დამატება",
+        "description": "აირჩიეთ სტატუსები, რომლებითაც სამუშაო ელემენტი გადადის."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/home.json b/packages/i18n/src/locales/ka-ge/home.json
new file mode 100644
index 0000000..a1c9067
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "თქვენი სწრაფი დაწყების სახელმძღვანელო",
+      "not_right_now": "ახლა არა",
+      "create_project": {
+        "title": "პროექტის შექმნა",
+        "description": "ყველაფერი იწყება პროექტით Plane-ში.",
+        "cta": "დაწყება"
+      },
+      "invite_team": {
+        "title": "მოწვიეთ თქვენი გუნდი",
+        "description": "ააშენეთ, გაგზავნეთ და მართეთ თანამშრომლებთან ერთად.",
+        "cta": "ჩართეთ ისინი"
+      },
+      "configure_workspace": {
+        "title": "დააყენეთ თქვენი სამუშაო სივრცე.",
+        "description": "ჩართეთ ან გამორთეთ ფუნქციები და მეტიც.",
+        "cta": "ამ სამუშაო სივრცის კონფიგურაცია"
+      },
+      "personalize_account": {
+        "title": "გახადეთ Plane თქვენი.",
+        "description": "აირჩიეთ თქვენი სურათი, ფერები და სხვა.",
+        "cta": "ახლავე მოარგეთ"
+      },
+      "widgets": {
+        "title": "ჩუმადაა ვიჯეტების გარეშე, ჩართეთ ისინი",
+        "description": "როგორც ჩანს, ყველა თქვენი ვიჯეტი გამორთულია. ჩართეთ ისინი\nახლა თქვენი გამოცდილების გასაუმჯობესებლად!",
+        "primary_button": {
+          "text": "ვიჯეტების მართვა"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "შეინახეთ ბმულები სამუშაო საკითხებზე, რომლებიც გსურთ ხელთ გქონდეთ.",
+      "add": "სწრაფი ბმულის დამატება",
+      "title": "სწრაფი ბმული",
+      "title_plural": "სწრაფი ბმულები"
+    },
+    "recents": {
+      "title": "ბოლო",
+      "empty": {
+        "project": "თქვენი ბოლო პროექტები აქ გამოჩნდება, როგორც კი ერთს მოინახულებთ.",
+        "page": "თქვენი ბოლო გვერდები აქ გამოჩნდება, როგორც კი ერთს მოინახულებთ.",
+        "issue": "თქვენი ბოლო სამუშაო ელემენტები აქ გამოჩნდება, როგორც კი ერთს მოინახულებთ.",
+        "default": "ჯერ არ გაქვთ ბოლო აქტივობები."
+      },
+      "filters": {
+        "all": "ყველა",
+        "projects": "პროექტები",
+        "pages": "გვერდები",
+        "issues": "სამუშაო ელემენტები"
+      }
+    },
+    "new_at_plane": {
+      "title": "ახალი Plane-ში"
+    },
+    "quick_tutorial": {
+      "title": "სწრაფი გაკვეთილი"
+    },
+    "widget": {
+      "reordered_successfully": "ვიჯეტი წარმატებით გადაილაგა.",
+      "reordering_failed": "ვიჯეტის გადალაგებისას მოხდა შეცდომა."
+    },
+    "manage_widgets": "ვიჯეტების მართვა",
+    "title": "მთავარი",
+    "star_us_on_github": "დაგვიფასეთ GitHub-ზე",
+    "business_trial_banner": {
+      "title": "Your 14-day Business plan trial is live!",
+      "description": "Explore all Business features. When you're ready, choose to subscribe. You'll not be billed automatically.",
+      "trial_ends_today": "Trial ends today",
+      "trial_ends_in_days": "Trial ends in {days, plural, one {# day} other {# days}}",
+      "start_subscription": "Start subscription",
+      "explore_business_features": "Explore Business features"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/inbox.json b/packages/i18n/src/locales/ka-ge/inbox.json
new file mode 100644
index 0000000..6035026
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "მომლოდინე",
+        "description": "მომლოდინე"
+      },
+      "declined": {
+        "title": "უარყოფილი",
+        "description": "უარყოფილი"
+      },
+      "snoozed": {
+        "title": "გადადებული",
+        "description": "{days, plural, one{# დღე} other{# დღე}} დარჩენილი"
+      },
+      "accepted": {
+        "title": "მიღებული",
+        "description": "მიღებული"
+      },
+      "duplicate": {
+        "title": "დუბლიკატი",
+        "description": "დუბლიკატი"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "სამუშაო ელემენტის უარყოფა",
+        "content": "დარწმუნებული ხართ, რომ გსურთ სამუშაო ელემენტის {value} უარყოფა?"
+      },
+      "delete": {
+        "title": "სამუშაო ელემენტის წაშლა",
+        "content": "დარწმუნებული ხართ, რომ გსურთ სამუშაო ელემენტის {value} წაშლა?",
+        "success": "სამუშაო ელემენტი წარმატებით წაიშალა"
+      }
+    },
+    "errors": {
+      "snooze_permission": "მხოლოდ პროექტის ადმინებს შეუძლიათ სამუშაო ელემენტების გადადება/გაუქმება",
+      "accept_permission": "მხოლოდ პროექტის ადმინებს შეუძლიათ სამუშაო ელემენტების მიღება",
+      "decline_permission": "მხოლოდ პროექტის ადმინებს შეუძლიათ სამუშაო ელემენტების უარყოფა"
+    },
+    "actions": {
+      "accept": "მიღება",
+      "decline": "უარყოფა",
+      "snooze": "გადადება",
+      "unsnooze": "გაუქმება გადადება",
+      "copy": "სამუშაო ელემენტის ბმულის კოპირება",
+      "delete": "წაშლა",
+      "open": "სამუშაო ელემენტის გახსნა",
+      "mark_as_duplicate": "დუბლიკატად მონიშვნა",
+      "move": "{value}-ის გადატანა პროექტის სამუშაო ელემენტებში"
+    },
+    "source": {
+      "in-app": "აპში"
+    },
+    "order_by": {
+      "created_at": "შექმნის თარიღი",
+      "updated_at": "განახლების თარიღი",
+      "id": "ID"
+    },
+    "label": "Intake",
+    "page_label": "{workspace} - Intake",
+    "modal": {
+      "title": "Intake-ის სამუშაო ელემენტის შექმნა"
+    },
+    "tabs": {
+      "open": "ღია",
+      "closed": "დახურული"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "ღია სამუშაო ელემენტები არ არის",
+        "description": "აქ იპოვით ღია სამუშაო ელემენტებს. შექმენით ახალი სამუშაო ელემენტი."
+      },
+      "sidebar_closed_tab": {
+        "title": "დახურული სამუშაო ელემენტები არ არის",
+        "description": "ყველა სამუშაო ელემენტი, მიღებული თუ უარყოფილი, აქ იპოვით."
+      },
+      "sidebar_filter": {
+        "title": "შესაბამისი სამუშაო ელემენტები არ მოიძებნა",
+        "description": "Intake-ში გამოყენებული ფილტრის შესაბამისი სამუშაო ელემენტი არ მოიძებნა. შექმენით ახალი სამუშაო ელემენტი."
+      },
+      "detail": {
+        "title": "აირჩიეთ სამუშაო ელემენტი დეტალების სანახავად."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/integration.json b/packages/i18n/src/locales/ka-ge/integration.json
new file mode 100644
index 0000000..7a36176
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integrations",
+    "loading": "Loading",
+    "unauthorized": "You are not authorized to view this page.",
+    "configure": "Configure",
+    "not_enabled": "{name} is not enabled for this workspace.",
+    "not_configured": "Not configured",
+    "disconnect_personal_account": "Disconnect personal {providerName} account",
+    "not_configured_message_admin": "{name} integration is not configured. Please contact your instance admin to configure it.",
+    "not_configured_message_support": "{name} integration is not configured. Please contact support to configure it.",
+    "external_api_unreachable": "Not able to access the external API. Please try again later.",
+    "error_fetching_supported_integrations": "Not able to fetch supported integrations. Please try again later.",
+    "back_to_integrations": "Back to integrations",
+    "select_state": "Select State",
+    "set_state": "Set State",
+    "choose_project": "Choose Project...",
+    "skip_backward_state_movement": "Prevent issues from moving to an earlier state due to PR updates"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Connect and sync your GitHub work items with Plane",
+    "connect_org": "Connect Organization",
+    "connect_org_description": "Connect your GitHub organization with Plane",
+    "processing": "Processing",
+    "org_added_desc": "GitHub org added by and time",
+    "connection_fetch_error": "Error fetching connection details from server",
+    "personal_account_connected": "Personal account connected",
+    "personal_account_connected_description": "Your GitHub account is now connected to Plane",
+    "connect_personal_account": "Connect Personal Account",
+    "connect_personal_account_description": "Connect your personal GitHub account with Plane.",
+    "repo_mapping": "Repository Mapping",
+    "repo_mapping_description": "Map your GitHub repositories with Plane projects.",
+    "project_issue_sync": "Project Issue Sync",
+    "project_issue_sync_description": "Sync issues from GitHub to your Plane project",
+    "project_issue_sync_empty_state": "Mapped project issue sync will appear here",
+    "configure_project_issue_sync_state": "Configure Issue Sync State",
+    "select_issue_sync_direction": "Select issue sync direction",
+    "allow_bidirectional_sync": "Bidirectional - Sync issues and comments both ways between GitHub and Plane",
+    "allow_unidirectional_sync": "Unidirectional - Sync issues and comments from GitHub to Plane only",
+    "allow_unidirectional_sync_warning": "Data from GitHub Issue will replace data in Linked Plane Work Item (GitHub → Plane only)",
+    "remove_project_issue_sync": "Remove this Project Issue Sync",
+    "remove_project_issue_sync_confirmation": "Are you sure you want to remove this project issue sync?",
+    "add_pr_state_mapping": "Add Pull Request State Mapping for Plane project",
+    "edit_pr_state_mapping": "Edit Pull Request State Mapping for Plane project",
+    "pr_state_mapping": "Pull Request State Mapping",
+    "pr_state_mapping_description": "Map GitHub pull request states to your Plane project",
+    "pr_state_mapping_empty_state": "Mapped PR states will appear here",
+    "remove_pr_state_mapping": "Remove this Pull Request State Mapping",
+    "remove_pr_state_mapping_confirmation": "Are you sure you want to remove this pull request state mapping?",
+    "issue_sync_message": "Work items are synced to {project}",
+    "link": "Link GitHub Repository to a Plane Project",
+    "pull_request_automation": "Pull Request Automation",
+    "pull_request_automation_description": "Configure pull request state mapping from GitHub to your Plane project",
+    "DRAFT_MR_OPENED": "Draft Open",
+    "MR_OPENED": "Open",
+    "MR_READY_FOR_MERGE": "Ready for Merge",
+    "MR_REVIEW_REQUESTED": "Review Requested",
+    "MR_MERGED": "Merged",
+    "MR_CLOSED": "Closed",
+    "ISSUE_OPEN": "Issue Open",
+    "ISSUE_CLOSED": "Issue Closed",
+    "save": "Save",
+    "start_sync": "Start Sync",
+    "choose_repository": "Choose Repository..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Connect and sync your Gitlab Merge Requests with Plane.",
+    "connection_fetch_error": "Error fetching connection details from server",
+    "connect_org": "Connect Organization",
+    "connect_org_description": "Connect your Gitlab organization with Plane.",
+    "project_connections": "Gitlab Project Connections",
+    "project_connections_description": "Sync merge requests from Gitlab to Plane projects.",
+    "plane_project_connection": "Plane Project Connection",
+    "plane_project_connection_description": "Configure pull requests state mapping from Gitlab to Plane projects",
+    "remove_connection": "Remove Connection",
+    "remove_connection_confirmation": "Are you sure you want to remove this connection?",
+    "link": "Link Gitlab repository to Plane project",
+    "pull_request_automation": "Pull Request Automation",
+    "pull_request_automation_description": "Configure pull request state mapping from Gitlab to Plane",
+    "DRAFT_MR_OPENED": "On draft MR open, set the state to",
+    "MR_OPENED": "On MR open, set the state to",
+    "MR_REVIEW_REQUESTED": "On MR review requested, set the state to",
+    "MR_READY_FOR_MERGE": "On MR ready for merge, set the state to",
+    "MR_MERGED": "On MR merged, set the state to",
+    "MR_CLOSED": "On MR closed, set the state to",
+    "integration_enabled_text": "With Gitlab integration Enabled, you can automate work item workflows",
+    "choose_entity": "Choose Entity",
+    "choose_project": "Choose Project",
+    "link_plane_project": "Link Plane project",
+    "project_issue_sync": "Project Issue Sync",
+    "project_issue_sync_description": "Sync issues from Gitlab to your Plane project",
+    "project_issue_sync_empty_state": "Mapped project issue sync will appear here",
+    "configure_project_issue_sync_state": "Configure Issue Sync State",
+    "select_issue_sync_direction": "Select issue sync direction",
+    "allow_bidirectional_sync": "Bidirectional - Sync issues and comments both ways between Gitlab and Plane",
+    "allow_unidirectional_sync": "Unidirectional - Sync issues and comments from Gitlab to Plane only",
+    "allow_unidirectional_sync_warning": "Data from Gitlab Issue will replace data in Linked Plane Work Item (Gitlab → Plane only)",
+    "remove_project_issue_sync": "Remove this Project Issue Sync",
+    "remove_project_issue_sync_confirmation": "Are you sure you want to remove this project issue sync?",
+    "ISSUE_OPEN": "Issue Open",
+    "ISSUE_CLOSED": "Issue Closed",
+    "save": "Save",
+    "start_sync": "Start Sync",
+    "choose_repository": "Choose Repository..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Connect and sync your Gitlab Enterprise instance with Plane.",
+    "app_form_title": "Gitlab Enterprise Configuration",
+    "app_form_description": "Configure Gitlab Enterprise to connect with Plane.",
+    "base_url_title": "Base URL",
+    "base_url_description": "The base URL of your Gitlab Enterprise instance.",
+    "base_url_placeholder": "e.g., \"https://glab.plane.town\"",
+    "base_url_error": "Base URL is required",
+    "invalid_base_url_error": "Invalid base URL",
+    "client_id_title": "App ID",
+    "client_id_description": "The app ID of the app you created in your Gitlab Enterprise instance.",
+    "client_id_placeholder": "e.g., \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "App ID is required",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "The client secret of the app you created in your Gitlab Enterprise instance.",
+    "client_secret_placeholder": "e.g., \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret is required",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "A random webhook secret that will be used to verify the webhook from Gitlab Enterprise instance.",
+    "webhook_secret_placeholder": "e.g., \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret is required",
+    "connect_app": "Connect App"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Connect your Slack workspace with Plane.",
+    "connect_personal_account": "Connect your personal Slack account with Plane.",
+    "personal_account_connected": "Your personal {providerName} account is now connected to Plane.",
+    "link_personal_account": "Link your personal {providerName} account to Plane.",
+    "connected_slack_workspaces": "Connected Slack workspaces",
+    "connected_on": "Connected on {date}",
+    "disconnect_workspace": "Disconnect {name} workspace",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Get notified in Slack DMs for important updates, reminders, and alerts just for you."
+      }
+    },
+    "project_updates": {
+      "title": "Project Notifications",
+      "description": "Configure Slack channels for project notifications",
+      "add_new_project_update": "Add new project notifications",
+      "project_updates_empty_state": "Projects connected with Slack Channels will appear here.",
+      "project_updates_form": {
+        "title": "Configure Slack Channel",
+        "description": "Receive project notifications in selected Slack channel when work item is created",
+        "failed_to_load_channels": "Failed to load channels from Slack",
+        "project_dropdown": {
+          "placeholder": "Select a project",
+          "label": "Plane Project",
+          "no_projects": "No projects available"
+        },
+        "channel_dropdown": {
+          "label": "Slack Channel",
+          "placeholder": "Select a channel",
+          "no_channels": "No channels available"
+        },
+        "all_projects_connected": "All projects are already connected to Slack channels.",
+        "all_channels_connected": "All Slack channels are already connected to projects.",
+        "project_connection_success": "Project connection created successfully",
+        "project_connection_updated": "Project connection updated successfully",
+        "project_connection_deleted": "Project connection deleted successfully",
+        "failed_delete_project_connection": "Failed to delete project connection",
+        "failed_create_project_connection": "Failed to create project connection",
+        "failed_upserting_project_connection": "Failed to upsert project connection",
+        "failed_loading_project_connections": "We couldn't load your project connections. This could be due to a network issue or a problem with the integration."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Connect your Sentry workspace with Plane.",
+    "connected_sentry_workspaces": "Connected Sentry workspaces",
+    "connected_on": "Connected on {date}",
+    "disconnect_workspace": "Disconnect {name} workspace",
+    "state_mapping": {
+      "title": "State Mapping",
+      "description": "Map Sentry issue states to your project states. Configure which states to use when a Sentry issue is resolved or unresolved.",
+      "add_new_state_mapping": "Add new state mapping",
+      "empty_state": "No state mappings configured. Create your first mapping to sync Sentry issue states with your project states.",
+      "failed_loading_state_mappings": "We couldn't load your state mappings. This could be due to a network issue or a problem with the integration.",
+      "loading_project_states": "Loading project states...",
+      "error_loading_states": "Error loading states",
+      "no_states_available": "No states available",
+      "no_permission_states": "You don't have permission to access states for this project",
+      "states_not_found": "Project states not found",
+      "server_error_states": "Server error while loading states"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Connect and sync your Bitbucket Data Center repositories with Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Validate external IdP tokens for API access.",
+    "header_description": "Validate externally-issued OIDC/JWT tokens from your IdP (Azure AD, Okta, etc.) for Plane API access.",
+    "connected": "Connected",
+    "connect": "Connect",
+    "uninstall": "Uninstall",
+    "uninstalling": "Uninstalling...",
+    "install_success": "OAuth Bridge installed successfully.",
+    "install_error": "Failed to install OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge uninstalled.",
+    "uninstall_error": "Failed to uninstall OAuth Bridge.",
+    "token_providers": "Token Providers",
+    "token_providers_description": "Configure external IdPs whose JWTs are accepted as API credentials.",
+    "add_provider": "Add provider",
+    "edit_provider": "Edit Provider",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "test": "Test",
+    "no_providers_title": "No providers configured.",
+    "no_providers_description": "Add an IdP to enable external token authentication.",
+    "provider_updated": "Provider updated.",
+    "provider_added": "Provider added.",
+    "provider_save_error": "Failed to save provider.",
+    "provider_deleted": "Provider deleted.",
+    "provider_delete_error": "Failed to delete provider.",
+    "provider_update_error": "Failed to update provider.",
+    "jwks_reachable": "JWKS Reachable",
+    "jwks_unreachable": "JWKS Unreachable",
+    "jwks_test_error": "Could not fetch JWKS from the configured URL.",
+    "provider_form": {
+      "name_label": "Name",
+      "name_placeholder": "e.g. Azure AD Production",
+      "name_description": "Human-readable label for this identity provider",
+      "name_required": "Name is required.",
+      "issuer_label": "Issuer",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Expected iss claim value in the JWT",
+      "issuer_required": "Issuer is required.",
+      "jwks_url_label": "JWKS URL",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "HTTPS endpoint serving the provider's JSON Web Key Set",
+      "jwks_url_required": "JWKS URL is required.",
+      "jwks_url_https": "JWKS URL must use HTTPS.",
+      "audience_label": "Audience",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Expected aud claim(s) in the JWT, comma-separated.",
+      "user_claims_label": "User claims",
+      "user_claims_placeholder": "email, preferred_username, upn",
+      "user_claims_description": "Comma-separated JWT claims to match against the Plane email (first match wins)",
+      "user_claims_required": "At least one user claim is required.",
+      "allowed_algorithms_label": "Allowed signing algorithms",
+      "allowed_algorithms_description": "Asymmetric algorithms accepted for JWT signature verification",
+      "allowed_algorithms_required": "At least one algorithm is required.",
+      "select_algorithms": "Select algorithms",
+      "jwks_cache_ttl_label": "JWKS cache TTL (seconds)",
+      "jwks_cache_ttl_description": "How long to cache the provider's JWKS keys (minimum 60s, default 24 hours)",
+      "jwks_cache_ttl_min": "Cache TTL must be at least 60 seconds.",
+      "rate_limit_label": "Rate limit",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Request throttle as count/period (e.g. 120/minute). Leave blank for the default rate limit.",
+      "enable_provider": "Enable this provider",
+      "saving": "Saving...",
+      "update": "Update"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Connect and sync your GitHub Enterprise organization with Plane.",
+    "app_form_title": "GitHub Enterprise Configuration",
+    "app_form_description": "Configure GitHub Enterprise to connect with Plane.",
+    "app_id_title": "App ID",
+    "app_id_description": "The ID of the app you created in your GitHub Enterprise organization.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID is required",
+    "app_name_title": "App Slug",
+    "app_name_description": "The slug of the app you created in your GitHub Enterprise organization.",
+    "app_name_error": "App slug is required",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "Base URL",
+    "base_url_description": "The base URL of your GitHub Enterprise organization.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "Base URL is required",
+    "invalid_base_url_error": "Invalid base URL",
+    "client_id_title": "Client ID",
+    "client_id_description": "The client ID of the app you created in your GitHub Enterprise organization.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "Client ID is required",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "The client secret of the app you created in your GitHub Enterprise organization.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Client secret is required",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "The webhook secret of the app you created in your GitHub Enterprise organization.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Webhook secret is required",
+    "private_key_title": "Private Key (Base64 encoded)",
+    "private_key_description": "Base64 encoded private key of the app you created in your GitHub Enterprise organization.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Private key is required",
+    "connect_app": "Connect App"
+  },
+  "silo_errors": {
+    "invalid_query_params": "The provided query parameters are invalid or missing required fields",
+    "invalid_installation_account": "The installation account provided is not valid",
+    "generic_error": "An unexpected error occurred while processing your request",
+    "connection_not_found": "The requested connection could not be found",
+    "multiple_connections_found": "Multiple connections were found when only one was expected",
+    "cannot_create_multiple_connections": "You have already connected your organization with a workspace. Please disconnect the existing connection before connecting a new one.",
+    "installation_not_found": "The requested installation could not be found",
+    "user_not_found": "The requested user could not be found",
+    "error_fetching_token": "Failed to fetch authentication token",
+    "invalid_app_credentials": "The provided app credentials are invalid",
+    "invalid_app_installation_id": "Failed to install the app"
+  },
+  "import_status": {
+    "queued": "Queued",
+    "created": "Created",
+    "initiated": "Initiated",
+    "pulling": "Pulling",
+    "timed_out": "Timed Out",
+    "pulled": "Pulled",
+    "progressing": "Progressing",
+    "transforming": "Transforming",
+    "transformed": "Transformed",
+    "pushing": "Pushing",
+    "finished": "Finished",
+    "error": "Error",
+    "cancelled": "Cancelled"
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/module.json b/packages/i18n/src/locales/ka-ge/module.json
new file mode 100644
index 0000000..5ddaef0
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {მოდული} other {მოდულები}}",
+    "no_module": "მოდული არ არის",
+    "select": "Add modules"
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/navigation.json b/packages/i18n/src/locales/ka-ge/navigation.json
new file mode 100644
index 0000000..a91ccbf
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "შედეგები არ მოიძებნა"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Stickies",
+    "your_work": "შენი სამუშაო",
+    "projects": "პროექტები",
+    "pages": "გვერდები",
+    "new_work_item": "ახალი სამუშაო ელემენტი",
+    "home": "მთავარი",
+    "inbox": "შეტყობინებები",
+    "workspace": "სამუშაო სივრცე",
+    "views": "ხილვები",
+    "analytics": "ანალიტიკა",
+    "work_items": "სამუშაო ელემენტები",
+    "cycles": "ციკლები",
+    "modules": "მოდულები",
+    "intake": "Intake",
+    "drafts": "მონახაზები",
+    "favorites": "ფავორიტები",
+    "pro": "Pro",
+    "upgrade": "გააუმჯობესე",
+    "pi_chat": "Plane AI",
+    "epics": "Epics",
+    "upgrade_plan": "Upgrade plan",
+    "plane_pro": "Plane Pro",
+    "business": "Business"
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/notification.json b/packages/i18n/src/locales/ka-ge/notification.json
new file mode 100644
index 0000000..5021204
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "შემოსული",
+    "page_label": "{workspace} - შემოსული",
+    "options": {
+      "mark_all_as_read": "ყველას წაკითხულად მონიშვნა",
+      "mark_read": "წაკითხულად მონიშვნა",
+      "mark_unread": "წაუკითხავად მონიშვნა",
+      "refresh": "განახლება",
+      "filters": "შემოსულის ფილტრები",
+      "show_unread": "წაუკითხავების ჩვენება",
+      "show_snoozed": "გადადებულების ჩვენება",
+      "show_archived": "დაარქივებულების ჩვენება",
+      "mark_archive": "არქივირება",
+      "mark_unarchive": "გაუქმება არქივირება",
+      "mark_snooze": "გადადება",
+      "mark_unsnooze": "გაუქმება გადადება"
+    },
+    "toasts": {
+      "read": "შეტყობინება წაკითხულად მონიშნულია",
+      "unread": "შეტყობინება წაუკითხავად მონიშნულია",
+      "archived": "შეტყობინება დაარქივებულია",
+      "unarchived": "შეტყობინება გაუქმებულია არქივირებიდან",
+      "snoozed": "შეტყობინება გადადებულია",
+      "unsnoozed": "შეტყობინება გაუქმებულია გადადებიდან"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "აირჩიეთ დეტალების სანახავად."
+      },
+      "all": {
+        "title": "მინიჭებული სამუშაო ელემენტები არ არის",
+        "description": "თქვენთვის მინიჭებული სამუშაო ელემენტების განახლებები \n აქ გამოჩნდება"
+      },
+      "mentions": {
+        "title": "მინიჭებული სამუშაო ელემენტები არ არის",
+        "description": "თქვენთვის მინიჭებული სამუშაო ელემენტების განახლებები \n აქ გამოჩნდება"
+      }
+    },
+    "tabs": {
+      "all": "ყველა",
+      "mentions": "ხსენებები"
+    },
+    "filter": {
+      "assigned": "მინიჭებული ჩემთვის",
+      "created": "შექმნილი ჩემ მიერ",
+      "subscribed": "გამოწერილი ჩემ მიერ"
+    },
+    "snooze": {
+      "1_day": "1 დღე",
+      "3_days": "3 დღე",
+      "5_days": "5 დღე",
+      "1_week": "1 კვირა",
+      "2_weeks": "2 კვირა",
+      "custom": "მორგებული"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/page.json b/packages/i18n/src/locales/ka-ge/page.json
new file mode 100644
index 0000000..6e5930a
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "კონტური",
+        "empty_state": {
+          "title": "სათაურები აკლია",
+          "description": "დავამატოთ რამდენიმე სათაური ამ გვერდზე მათ აქ სანახავად."
+        }
+      },
+      "info": {
+        "label": "ინფო",
+        "document_info": {
+          "words": "სიტყვები",
+          "characters": "სიმბოლოები",
+          "paragraphs": "პარაგრაფები",
+          "read_time": "წაკითხვის დრო"
+        },
+        "actors_info": {
+          "edited_by": "დარედაქტირებულია",
+          "created_by": "შექმნილია"
+        },
+        "version_history": {
+          "label": "ვერსიის ისტორია",
+          "current_version": "მიმდინარე ვერსია",
+          "highlight_changes": "Highlight changes"
+        }
+      },
+      "assets": {
+        "label": "აქტივები",
+        "download_button": "ჩამოტვირთვა",
+        "empty_state": {
+          "title": "სურათები აკლია",
+          "description": "დაამატეთ სურათები მათ აქ სანახავად."
+        }
+      },
+      "comments": {
+        "label": "Comments",
+        "empty_state": {
+          "title": "No comments",
+          "description": "Add comments to see them here."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "The sticky name cannot be longer than 100 characters.",
+        "already_exists": "There already exists a sticky with no description"
+      },
+      "created": {
+        "title": "Sticky created",
+        "message": "The sticky has been successfully created"
+      },
+      "not_created": {
+        "title": "Sticky not created",
+        "message": "The sticky could not be created"
+      },
+      "updated": {
+        "title": "Sticky updated",
+        "message": "The sticky has been successfully updated"
+      },
+      "not_updated": {
+        "title": "Sticky not updated",
+        "message": "The sticky could not be updated"
+      },
+      "removed": {
+        "title": "Sticky removed",
+        "message": "The sticky has been successfully removed"
+      },
+      "not_removed": {
+        "title": "Sticky not removed",
+        "message": "The sticky could not be removed"
+      }
+    },
+    "open_button": "ნავიგაციის პანელის გახსნა",
+    "close_button": "ნავიგაციის პანელის დახურვა",
+    "outline_floating_button": "კონტურის გახსნა"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Move",
+        "loading": "Moving"
+      },
+      "cannot_move_to_teamspace": "Private and shared pages cannot be moved to a teamspace.",
+      "placeholders": {
+        "workspace_to_all": "Search for projects and teamspaces",
+        "workspace_to_project": "Search for projects",
+        "project_to_all": "Search for projects and teamspaces",
+        "project_to_project": "Search for projects",
+        "project_to_all_with_wiki": "Search for wiki collections, projects, and teamspaces",
+        "project_to_project_with_wiki": "Search for wiki collections and projects"
+      },
+      "toasts": {
+        "success": {
+          "title": "Success!",
+          "message": "Page moved successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Page could not be moved. Please try again later."
+        },
+        "collection_error": {
+          "title": "Moved to wiki",
+          "message": "Page was moved to wiki, but could not be added to the selected collection. It remains in General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Remove from collection",
+      "success_message": "Page removed from collection.",
+      "error_message": "Page could not be removed from the collection. Please try again."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "კონტენტის ლიმიტი ამოწურულია და რეალურ დროში სინქრონიზაცია გამორთულია. შექმენით ახალი გვერდი ან გამოიყენეთ ჩალაგებული გვერდები სინქრონიზაციის გასაგრძელებლად."
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/power-k.json b/packages/i18n/src/locales/ka-ge/power-k.json
new file mode 100644
index 0000000..c00d2e5
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Bulk delete work items"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Work item actions",
+        "indicator": "Work item",
+        "change_state": "Change state",
+        "change_priority": "Change priority",
+        "change_assignees": "Assign to",
+        "assign_to_me": "Assign to me",
+        "unassign_from_me": "Un-assign from me",
+        "change_estimate": "Change estimate",
+        "add_to_cycle": "Add to cycle",
+        "add_to_modules": "Add to modules",
+        "add_labels": "Add labels",
+        "subscribe": "Subscribe to notifications",
+        "unsubscribe": "Unsubscribe from notifications",
+        "delete": "Delete",
+        "copy_id": "Copy ID",
+        "copy_id_toast_success": "Work item ID copied to clipboard.",
+        "copy_id_toast_error": "Some error occurred while copying the work item ID to clipboard.",
+        "copy_title": "Copy title",
+        "copy_title_toast_success": "Work item title copied to clipboard.",
+        "copy_title_toast_error": "Some error occurred while copying the work item title to clipboard.",
+        "copy_url": "Copy URL",
+        "copy_url_toast_success": "Work item URL copied to clipboard.",
+        "copy_url_toast_error": "Some error occurred while copying the work item URL to clipboard."
+      },
+      "cycle": {
+        "title": "Cycle actions",
+        "indicator": "Cycle",
+        "add_to_favorites": "Add to favorites",
+        "remove_from_favorites": "Remove from favorites",
+        "copy_url": "Copy URL",
+        "copy_url_toast_success": "Cycle URL copied to clipboard.",
+        "copy_url_toast_error": "Some error occurred while copying the cycle URL to clipboard."
+      },
+      "module": {
+        "title": "Module actions",
+        "indicator": "Module",
+        "add_remove_members": "Add/remove members",
+        "change_status": "Change status",
+        "add_to_favorites": "Add to favorites",
+        "remove_from_favorites": "Remove from favorites",
+        "copy_url": "Copy URL",
+        "copy_url_toast_success": "Module URL copied to clipboard.",
+        "copy_url_toast_error": "Some error occurred while copying the module URL to clipboard."
+      },
+      "page": {
+        "title": "Page actions",
+        "indicator": "Page",
+        "lock": "Lock",
+        "unlock": "Unlock",
+        "make_private": "Make private",
+        "make_public": "Make public",
+        "archive": "Archive",
+        "restore": "Restore",
+        "add_to_favorites": "Add to favorites",
+        "remove_from_favorites": "Remove from favorites",
+        "copy_url": "Copy URL",
+        "copy_url_toast_success": "Page URL copied to clipboard.",
+        "copy_url_toast_error": "Some error occurred while copying the page URL to clipboard."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "New work item",
+      "create_page": "New page",
+      "create_view": "New view",
+      "create_cycle": "New cycle",
+      "create_module": "New module",
+      "create_project": "New project",
+      "create_workspace": "New workspace",
+      "create_project_automation": "New automation"
+    },
+    "navigation_actions": {
+      "open_workspace": "Open a workspace",
+      "nav_home": "Go to home",
+      "nav_inbox": "Go to inbox",
+      "nav_your_work": "Go to your work",
+      "nav_account_settings": "Go to account settings",
+      "open_project": "Open a project",
+      "nav_projects_list": "Go to projects list",
+      "nav_all_workspace_work_items": "Go to all work items",
+      "nav_assigned_workspace_work_items": "Go to assigned work items",
+      "nav_created_workspace_work_items": "Go to created work items",
+      "nav_subscribed_workspace_work_items": "Go to subscribed work items",
+      "nav_workspace_analytics": "Go to workspace analytics",
+      "nav_workspace_drafts": "Go to workspace drafts",
+      "nav_workspace_archives": "Go to workspace archives",
+      "open_workspace_setting": "Open a workspace setting",
+      "nav_workspace_settings": "Go to workspace settings",
+      "nav_project_work_items": "Go to work items",
+      "open_project_cycle": "Open a cycle",
+      "nav_project_cycles": "Go to cycles",
+      "open_project_module": "Open a module",
+      "nav_project_modules": "Go to modules",
+      "open_project_view": "Open a project view",
+      "nav_project_views": "Go to project views",
+      "nav_project_pages": "Go to pages",
+      "nav_project_intake": "Go to intake",
+      "nav_project_archives": "Go to project archives",
+      "open_project_setting": "Open a project setting",
+      "nav_project_settings": "Go to project settings",
+      "nav_workspace_active_cycle": "Go to all active cycles",
+      "nav_project_overview": "Go to project overview"
+    },
+    "account_actions": {
+      "sign_out": "Sign out",
+      "workspace_invites": "Workspace invites"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Toggle app sidebar",
+      "copy_current_page_url": "Copy current page URL",
+      "copy_current_page_url_toast_success": "Current page URL copied to clipboard.",
+      "copy_current_page_url_toast_error": "Some error occurred while copying the current page URL to clipboard.",
+      "focus_top_nav_search": "Focus search input"
+    },
+    "preferences_actions": {
+      "update_theme": "Change interface theme",
+      "update_timezone": "Change timezone",
+      "update_start_of_week": "Change first day of week",
+      "update_language": "Change interface language",
+      "toast": {
+        "theme": {
+          "success": "Theme updated successfully.",
+          "error": "Failed to update theme. Please try again."
+        },
+        "timezone": {
+          "success": "Timezone updated successfully.",
+          "error": "Failed to update timezone. Please try again."
+        },
+        "generic": {
+          "success": "Preferences updated successfully.",
+          "error": "Failed to update preferences. Please try again."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Open keyboard shortcuts",
+      "open_plane_documentation": "Open Plane documentation",
+      "join_forum": "Join our Forum",
+      "report_bug": "Report a bug",
+      "chat_with_us": "Chat with us"
+    },
+    "page_placeholders": {
+      "default": "Type a command or search",
+      "open_workspace": "Open a workspace",
+      "open_project": "Open a project",
+      "open_workspace_setting": "Open a workspace setting",
+      "open_project_cycle": "Open a cycle",
+      "open_project_module": "Open a module",
+      "open_project_view": "Open a project view",
+      "open_project_setting": "Open a project setting",
+      "update_work_item_state": "Change state",
+      "update_work_item_priority": "Change priority",
+      "update_work_item_assignee": "Assign to",
+      "update_work_item_estimate": "Change estimate",
+      "update_work_item_cycle": "Add to cycle",
+      "update_work_item_module": "Add to modules",
+      "update_work_item_labels": "Add labels",
+      "update_module_member": "Change members",
+      "update_module_status": "Change status",
+      "update_theme": "Change theme",
+      "update_timezone": "Change timezone",
+      "update_start_of_week": "Change first day of week",
+      "update_language": "Change language"
+    },
+    "search_menu": {
+      "no_results": "No results found",
+      "clear_search": "Clear search",
+      "go_to_advanced_search": "Go to advanced search"
+    },
+    "footer": {
+      "workspace_level": "Workspace level"
+    },
+    "group_titles": {
+      "actions": "Actions",
+      "contextual": "Contextual",
+      "navigation": "Navigate",
+      "create": "Create",
+      "general": "General",
+      "settings": "Settings",
+      "account": "Account",
+      "miscellaneous": "Miscellaneous",
+      "preferences": "Preferences",
+      "help": "Help"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/project-settings.json b/packages/i18n/src/locales/ka-ge/project-settings.json
new file mode 100644
index 0000000..5c52738
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "შეიყვანეთ პროექტის ID",
+      "please_select_a_timezone": "გთხოვთ, აირჩიოთ დროის სარტყელი",
+      "archive_project": {
+        "title": "პროექტის არქივირება",
+        "description": "პროექტის არქივირება გააუქმებს თქვენს პროექტს გვერდითი ნავიგაციიდან, თუმცა თქვენ მაინც შეძლებთ მასზე წვდომას პროექტების გვერდიდან. თქვენ შეგიძლიათ აღადგინოთ პროექტი ან წაშალოთ იგი ნებისმიერ დროს.",
+        "button": "პროექტის არქივირება"
+      },
+      "delete_project": {
+        "title": "პროექტის წაშლა",
+        "description": "პროექტის წაშლისას, პროექტში არსებული ყველა მონაცემი და რესურსი სამუდამოდ წაიშლება და მათი აღდგენა შეუძლებელი იქნება.",
+        "button": "წაშალეთ ჩემი პროექტი"
+      },
+      "toast": {
+        "success": "პროექტი წარმატებით განახლდა",
+        "error": "პროექტის განახლება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა."
+      }
+    },
+    "members": {
+      "label": "წევრები",
+      "project_lead": "პროექტის ხელმძღვანელი",
+      "project_lead_description": "Select the project lead for the project.",
+      "default_assignee": "ნაგულისხმევი მინიჭებული",
+      "default_assignee_description": "Select the default assignee for the project.",
+      "project_subscribers": "Project subscribers",
+      "project_subscribers_description": "Select members who will receive notifications for this project.",
+      "guest_super_permissions": {
+        "title": "სტუმარ მომხმარებლებს მიეცით წვდომა ყველა სამუშაო ელემენტის ნახვაზე:",
+        "sub_heading": "ეს სტუმრებს მისცემს წვდომას პროექტის ყველა სამუშაო ელემენტის ნახვაზე."
+      },
+      "invite_members": {
+        "title": "წევრების მოწვევა",
+        "sub_heading": "მოწვიეთ წევრები თქვენს პროექტზე სამუშაოდ.",
+        "select_co_worker": "აირჩიეთ თანამშრომელი"
+      }
+    },
+    "states": {
+      "heading": "მდგომარეობები",
+      "description": "განსაზღვრეთ და მოარგეთ სამუშაო ნაკადის მდგომარეობები თქვენი სამუშაო ელემენტების პროგრესის თვალყურის დევნებისთვის.",
+      "describe_this_state_for_your_members": "აღწერეთ ეს მდგომარეობა თქვენი წევრებისთვის.",
+      "empty_state": {
+        "title": "{groupKey} ჯგუფისთვის მდგომარეობები არ არის ხელმისაწვდომი",
+        "description": "გთხოვთ, შექმნათ ახალი მდგომარეობა"
+      }
+    },
+    "labels": {
+      "heading": "იარლიყები",
+      "description": "შექმენით მორგებული იარლიყები თქვენი სამუშაო ელემენტების კატეგორიზაციისა და ორგანიზებისთვის",
+      "label_title": "იარლიყის სათაური",
+      "label_title_is_required": "იარლიყის სათაური სავალდებულოა",
+      "label_max_char": "იარლიყის სახელი არ უნდა აღემატებოდეს 255 სიმბოლოს",
+      "toast": {
+        "error": "შეცდომა იარლიყის განახლებისას"
+      }
+    },
+    "estimates": {
+      "heading": "შეფასებები",
+      "description": "დააყენეთ შეფასების სისტემები თითოეული სამუშაო ელემენტის საჭირო ძალისხმევის თვალყურის დევნებისა და კომუნიკაციისთვის.",
+      "label": "შეფასებები",
+      "title": "ჩართეთ შეფასებები ჩემი პროექტისთვის",
+      "enable_description": "ისინი დაგეხმარებათ კომპლექსურობის და გუნდის დატვირთვის კომუნიკაციაში.",
+      "no_estimate": "შეფასება არ არის",
+      "new": "ახალი შეფასების სისტემა",
+      "create": {
+        "custom": "მორგებული",
+        "start_from_scratch": "დაიწყეთ ნულიდან",
+        "choose_template": "აირჩიეთ შაბლონი",
+        "choose_estimate_system": "აირჩიეთ შეფასების სისტემა",
+        "enter_estimate_point": "შეიყვანეთ შეფასების ქულა",
+        "step": "ნაბიჯი {step} {total}-დან",
+        "label": "შეფასების შექმნა"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "შეფასება შეიქმნა",
+            "message": "შეფასება წარმატებით შეიქმნა"
+          },
+          "error": {
+            "title": "შეფასების შექმნა წარუმატებელი იყო",
+            "message": "ახალი შეფასების შექმნა ვერ მოხერხდა, გთხოვთ, სცადოთ ხელახლა."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "შეფასება შეცვლილია",
+            "message": "შეფასება განახლებულია თქვენს პროექტში."
+          },
+          "error": {
+            "title": "შეფასების შეცვლა წარუმატებელი იყო",
+            "message": "შეფასების შეცვლა ვერ მოხერხდა, გთხოვთ, სცადოთ ხელახლა"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "წარმატება!",
+            "message": "შეფასებები ჩართულია."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "წარმატება!",
+            "message": "შეფასებები გამორთულია."
+          },
+          "error": {
+            "title": "შეცდომა!",
+            "message": "შეფასების გამორთვა ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Estimates re-ordered",
+            "message": "Estimates have been re-ordered in your project."
+          },
+          "error": {
+            "title": "Estimate re-order failed",
+            "message": "We were unable to re-order the estimates, please try again"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Estimate system created",
+            "message": "Created and Enabled successfully"
+          },
+          "error": {
+            "title": "Error",
+            "message": "Something went wrong"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "შეფასება უნდა იყოს 0-ზე მეტი.",
+        "unable_to_process": "ჩვენ ვერ ვამუშავებთ თქვენს მოთხოვნას, გთხოვთ, სცადოთ ხელახლა.",
+        "numeric": "შეფასება უნდა იყოს რიცხვითი მნიშვნელობა.",
+        "character": "შეფასება უნდა იყოს სიმბოლური მნიშვნელობა.",
+        "empty": "შეფასების მნიშვნელობა არ შეიძლება იყოს ცარიელი.",
+        "already_exists": "შეფასების მნიშვნელობა უკვე არსებობს.",
+        "unsaved_changes": "თქვენ გაქვთ შეუნახავი ცვლილებები, გთხოვთ, შეინახოთ ისინი 'დასრულებაზე' დაწკაპუნებამდე",
+        "remove_empty": "შეფასება არ შეიძლება იყოს ცარიელი. შეიყვანეთ მნიშვნელობა თითოეულ ველში ან ამოიღეთ ისინი, რომლებსაც მნიშვნელობები არ გაქვთ.",
+        "fill": "Please fill this estimate field",
+        "repeat": "Estimate value cannot be repeated"
+      },
+      "systems": {
+        "points": {
+          "label": "ქულები",
+          "fibonacci": "ფიბონაჩი",
+          "linear": "წრფივი",
+          "squares": "კვადრატები",
+          "custom": "მორგებული"
+        },
+        "categories": {
+          "label": "კატეგორიები",
+          "t_shirt_sizes": "T-Shirt ზომები",
+          "easy_to_hard": "მარტივიდან რთულამდე",
+          "custom": "მორგებული"
+        },
+        "time": {
+          "label": "დრო",
+          "hours": "საათები"
+        }
+      },
+      "edit": {
+        "title": "Edit estimate system",
+        "add_or_update": {
+          "title": "Add, update or remove estimates",
+          "description": "Manage current system either adding, updating or removing the points or categories."
+        },
+        "switch": {
+          "title": "Change estimate type",
+          "description": "Convert your points system to categories system and vice versa."
+        }
+      },
+      "switch": "Switch estimate system",
+      "current": "Current estimate system",
+      "select": "Select an estimate system"
+    },
+    "automations": {
+      "label": "ავტომატიზაციები",
+      "heading": "ავტომატიზაციები",
+      "description": "დააკონფიგურირეთ ავტომატიზებული მოქმედებები თქვენი პროექტის მართვის ნაკადის გასამარტივებლად და ხელით დავალებების შესამცირებლად.",
+      "auto-archive": {
+        "title": "დახურული სამუშაო ელემენტების ავტო-არქივირება",
+        "description": "Plane ავტომატურად დაარქივებს სამუშაო ელემენტებს, რომლებიც დასრულებული ან გაუქმებულია.",
+        "duration": "დახურული სამუშაო ელემენტების ავტო-არქივირება"
+      },
+      "auto-close": {
+        "title": "სამუშაო ელემენტების ავტო-დახურვა",
+        "description": "Plane ავტომატურად დახურავს სამუშაო ელემენტებს, რომლებიც არ არის დასრულებული ან გაუქმებული.",
+        "duration": "არააქტიური სამუშაო ელემენტების ავტო-დახურვა",
+        "auto_close_status": "ავტო-დახურვის სტატუსი"
+      },
+      "auto-remind": {
+        "title": "Auto-reminders",
+        "description": "Plane will automatically send reminders via email and in-app notifications to keep your team on track with deadlines.",
+        "duration": "Send reminder before"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "ჯერ იარლიყები არ არის",
+        "description": "შექმენით იარლიყები თქვენს პროექტში სამუშაო ელემენტების ორგანიზებისა და ფილტრაციის დასახმარებლად."
+      },
+      "estimates": {
+        "title": "ჯერ შეფასების სისტემები არ არის",
+        "description": "შექმენით შეფასებების ნაკრები თითოეული სამუშაო ელემენტის საჭირო სამუშაოს რაოდენობის კომუნიკაციისთვის.",
+        "primary_button": "შეფასების სისტემის დამატება"
+      },
+      "integrations": {
+        "title": "No integrations configured",
+        "description": "Configure GitHub and other integrations to sync your project work items."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Enable workflows",
+        "description": "Set workflows to control work item movement",
+        "no_states_tooltip": "No states are added to the workflow.",
+        "no_work_item_types_tooltip": "No work item types are added to the workflow.",
+        "no_states_or_work_item_types_tooltip": "No states or work item types are added to the workflow.",
+        "toast": {
+          "loading": {
+            "enabling": "Enabling workflows",
+            "disabling": "Disabling workflows"
+          },
+          "success": {
+            "title": "Success!",
+            "message": "Workflows enabled successfully."
+          },
+          "error": {
+            "title": "Error!",
+            "message": "Failed to enable workflows. Please try again."
+          }
+        }
+      },
+      "heading": "Workflows",
+      "description": "Automate work item transitions and set rules to control how tasks move through your project pipeline.",
+      "add_button": "Add new workflow",
+      "search": "Search workflows",
+      "detail": {
+        "define": "Define workflow",
+        "add_states": "Add states",
+        "unmapped_states": {
+          "title": "Unmapped states detected",
+          "description": "Some work items for the selected types are currently in states that do not exist in this workflow.",
+          "note": "If you enable this workflow, these items will automatically move to the initial state for this workflow.",
+          "label": "Missing states",
+          "tooltip": "Some work items are in states that are not mapped to this workflow. Open the workflow to review."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "All states are in use",
+          "description": "All defined states for this project are already present in your current workflow."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "This workflow applies to any work item type that is not assigned to a workflow."
+      },
+      "create": {
+        "heading": "Create new workflow",
+        "name": {
+          "placeholder": "Add a unique name",
+          "validation": {
+            "max_length": "Name must be less than 255 characters",
+            "required": "Name is required",
+            "invalid": "Name can only contain letters, numbers, spaces, hyphens, and apostrophes"
+          }
+        },
+        "description": {
+          "placeholder": "Add a short description",
+          "validation": {
+            "invalid": "Description can only contain letters, numbers, spaces, hyphens, and apostrophes"
+          }
+        },
+        "work_item_type": {
+          "label": "Work item type"
+        },
+        "success": {
+          "title": "Success!",
+          "message": "Workflow created successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to create workflow. Please try again."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Success!",
+          "message": "Workflow updated successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to update workflow. Please try again."
+        }
+      },
+      "delete": {
+        "loading": "Deleting workflow",
+        "success": {
+          "title": "Success!",
+          "message": "Workflow deleted successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to delete workflow. Please try again."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Success!",
+          "message": "States added successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to add states. Please try again."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Work item Types",
+      "description": "Create and customize different types of work items with unique properties"
+    },
+    "features": {
+      "cycles": {
+        "title": "Cycles",
+        "short_title": "Cycles",
+        "description": "Schedule work in flexible periods that adapt to this project's unique rhythm and pace.",
+        "toggle_title": "Enable cycles",
+        "toggle_description": "Plan work in focused timeframes."
+      },
+      "modules": {
+        "title": "Modules",
+        "short_title": "Modules",
+        "description": "Organize work into sub-projects with dedicated leads and assignees.",
+        "toggle_title": "Enable modules",
+        "toggle_description": "Project members will be able to create and edit modules."
+      },
+      "views": {
+        "title": "Views",
+        "short_title": "Views",
+        "description": "Save custom sorts, filters, and display options or share them with your team.",
+        "toggle_title": "Enable views",
+        "toggle_description": "Project members will be able to create and edit views."
+      },
+      "pages": {
+        "title": "Pages",
+        "short_title": "Pages",
+        "description": "Create and edit free-form content; notes, docs, anything.",
+        "toggle_title": "Enable pages",
+        "toggle_description": "Project members will be able to create and edit pages."
+      },
+      "intake": {
+        "intake_responsibility": "Intake responsibility",
+        "intake_sources": "Intake sources",
+        "title": "Intake",
+        "short_title": "Intake",
+        "description": "Let non-members share bugs, feedback, and suggestions; without disrupting your workflow.",
+        "toggle_title": "Enable intake",
+        "toggle_description": "Let project members create in app intake requests.",
+        "toggle_tooltip_on": "Ask your Project Admin to turn this on.",
+        "toggle_tooltip_off": "Ask your Project Admin to turn this off.",
+        "notify_assignee": {
+          "title": "Notify assignees",
+          "description": "For a new request to intake, default assignees will be alerted via notifications"
+        },
+        "in_app": {
+          "title": "In-app",
+          "description": "Get new work items from Members and Guests in your workspace without disruption to your existing work items."
+        },
+        "email": {
+          "title": "Email",
+          "description": "Collect new work items from anyone who sends an email to a Plane email address.",
+          "fieldName": "Email ID"
+        },
+        "form": {
+          "title": "Forms",
+          "description": "Let folks outside your workspace create potential new work items for you via a dedicated and secure form.",
+          "fieldName": "Default form URL",
+          "create_forms": "Create Forms using work item types",
+          "manage_forms": "Manage forms",
+          "manage_forms_tooltip": "Ask your Workspace Admin to manage this.",
+          "create_form": "Create form",
+          "edit_form": "Edit form details",
+          "form_title": "Form title",
+          "form_title_required": "Form title is required",
+          "work_item_type": "Work item type",
+          "remove_property": "Remove property",
+          "select_properties": "Select properties",
+          "search_placeholder": "Search for properties",
+          "toasts": {
+            "success_create": "Intake form created successfully",
+            "success_update": "Intake form updated successfully",
+            "error_create": "Failed to create intake form",
+            "error_update": "Failed to update intake form"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Setting assignees...",
+            "success": {
+              "title": "Success!",
+              "message": "Assignees set successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Something went wrong while setting assignees. Please try again."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Time tracking",
+        "short_title": "Time tracking",
+        "description": "Log time spent on work items and projects.",
+        "toggle_title": "Enable time tracking",
+        "toggle_description": "Project members will be able to log time worked."
+      },
+      "milestones": {
+        "title": "Milestones",
+        "short_title": "Milestones",
+        "description": "Milestones provide a layer to align work items toward shared completion dates.",
+        "toggle_title": "Enable milestones",
+        "toggle_description": "Organize work items by milestone deadlines."
+      },
+      "toasts": {
+        "loading": "Updating project feature...",
+        "success": "Project feature updated successfully.",
+        "error": "Something went wrong while updating project feature. Please try again."
+      }
+    },
+    "project_updates": {
+      "heading": "Project Updates",
+      "description": "Consolidated tracking and progress monitoring for this project"
+    },
+    "templates": {
+      "heading": "Templates",
+      "description": "Save 80% time spent on creating projects, work items, and pages when you use templates."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Auto-schedule cycles",
+        "description": "Keep cycles moving without manual setup.",
+        "tooltip": "Automatically create new cycles based on your chosen schedule.",
+        "edit_button": "Edit",
+        "form": {
+          "cycle_title": {
+            "label": "Cycle Title",
+            "placeholder": "Title",
+            "tooltip": "The title will be appended with numbers for subsequent cycles. For eg: Design - 1/2/3",
+            "validation": {
+              "required": "Cycle title is required",
+              "max_length": "Title must not exceed 255 characters"
+            }
+          },
+          "cycle_duration": {
+            "label": "Cycle Duration",
+            "unit": "Weeks",
+            "validation": {
+              "required": "Cycle duration is required",
+              "min": "Cycle duration must be at least 1 week",
+              "max": "Cycle duration cannot exceed 30 weeks",
+              "positive": "Cycle duration must be positive"
+            }
+          },
+          "cooldown_period": {
+            "label": "Cooldown Period",
+            "unit": "days",
+            "tooltip": "Pause between cycles before the next begins.",
+            "validation": {
+              "required": "Cooldown period is required",
+              "negative": "Cooldown period cannot be negative"
+            }
+          },
+          "start_date": {
+            "label": "Cycle starts day",
+            "validation": {
+              "required": "Start date is required",
+              "past": "Start date cannot be in the past"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Number of future cycles",
+            "validation": {
+              "required": "Number of cycles is required",
+              "min": "At least 1 cycle is required",
+              "max": "Cannot schedule more than 3 cycles"
+            }
+          },
+          "auto_rollover": {
+            "label": "Auto-rollover work items",
+            "tooltip": "On the day a cycle completes, move all unfinished work items into the next cycle."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Enabling auto-schedule cycles",
+            "loading_disable": "Disabling auto-schedule cycles",
+            "success": {
+              "title": "Success!",
+              "message": "Auto-schedule cycles toggled successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to toggle auto-schedule cycles."
+            }
+          },
+          "save": {
+            "loading": "Saving auto-schedule cycles configuration",
+            "success": {
+              "title": "Success!",
+              "message_create": "Auto-schedule cycles configuration saved successfully.",
+              "message_update": "Auto-schedule cycles configuration updated successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message_create": "Failed to save auto-schedule cycles configuration.",
+              "message_update": "Failed to update auto-schedule cycles configuration."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/project.json b/packages/i18n/src/locales/ka-ge/project.json
new file mode 100644
index 0000000..5b3af8f
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "შექმნის თარიღი",
+      "updated_at": "განახლების თარიღი",
+      "name": "სახელი"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "ციკლის დამატება",
+    "more_details": "მეტი დეტალები",
+    "cycle": "ციკლი",
+    "update_cycle": "ციკლის განახლება",
+    "create_cycle": "ციკლის შექმნა",
+    "no_matching_cycles": "შესაბამისი ციკლები არ მოიძებნა",
+    "remove_filters_to_see_all_cycles": "ამოიღეთ ფილტრები ყველა ციკლის სანახავად",
+    "remove_search_criteria_to_see_all_cycles": "ამოიღეთ ძიების კრიტერიუმი ყველა ციკლის სანახავად",
+    "only_completed_cycles_can_be_archived": "მხოლოდ დასრულებული ციკლები შეიძლება დაარქივდეს",
+    "start_date": "დაწყების თარიღი",
+    "end_date": "დასრულების თარიღი",
+    "in_your_timezone": "თქვენს დროის სარტყელში",
+    "transfer_work_items": "{count} სამუშაო ელემენტის გადატანა",
+    "transfer": {
+      "no_cycles_available": "No other cycles available to transfer work items to."
+    },
+    "date_range": "თარიღის დიაპაზონი",
+    "add_date": "თარიღის დამატება",
+    "active_cycle": {
+      "label": "აქტიური ციკლი",
+      "progress": "პროგრესი",
+      "chart": "Burn-down გრაფიკი",
+      "priority_issue": "პრიორიტეტული სამუშაო ელემენტები",
+      "assignees": "მინიჭებულები",
+      "issue_burndown": "სამუშაო ელემენტის burn-down",
+      "ideal": "იდეალური",
+      "current": "მიმდინარე",
+      "labels": "იარლიყები",
+      "trailing": "Trailing",
+      "leading": "Leading"
+    },
+    "upcoming_cycle": {
+      "label": "მომავალი ციკლი"
+    },
+    "completed_cycle": {
+      "label": "დასრულებული ციკლი"
+    },
+    "status": {
+      "days_left": "დღეები დარჩენილი",
+      "completed": "დასრულებული",
+      "yet_to_start": "ჯერ არ დაწყებული",
+      "in_progress": "მიმდინარე",
+      "draft": "მონახაზი"
+    },
+    "action": {
+      "restore": {
+        "title": "ციკლის აღდგენა",
+        "success": {
+          "title": "ციკლი აღდგენილია",
+          "description": "ციკლი აღდგენილია."
+        },
+        "failed": {
+          "title": "ციკლის აღდგენა წარუმატებელი იყო",
+          "description": "ციკლის აღდგენა ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა."
+        }
+      },
+      "favorite": {
+        "loading": "ციკლის ფავორიტებში დამატება",
+        "success": {
+          "description": "ციკლი ფავორიტებში დაემატა.",
+          "title": "წარმატება!"
+        },
+        "failed": {
+          "description": "ციკლის ფავორიტებში დამატება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა.",
+          "title": "შეცდომა!"
+        }
+      },
+      "unfavorite": {
+        "loading": "ციკლის ფავორიტებიდან ამოღება",
+        "success": {
+          "description": "ციკლი ფავორიტებიდან ამოიღეს.",
+          "title": "წარმატება!"
+        },
+        "failed": {
+          "description": "ციკლის ფავორიტებიდან ამოღება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა.",
+          "title": "შეცდომა!"
+        }
+      },
+      "update": {
+        "loading": "ციკლის განახლება",
+        "success": {
+          "description": "ციკლი წარმატებით განახლდა.",
+          "title": "წარმატება!"
+        },
+        "failed": {
+          "description": "ციკლის განახლების შეცდომა. გთხოვთ, სცადოთ ხელახლა.",
+          "title": "შეცდომა!"
+        },
+        "error": {
+          "already_exists": "თქვენ უკვე გაქვთ ციკლი მოცემულ თარიღებზე, თუ გსურთ ციკლის მონახაზის შექმნა, შეგიძლიათ ამოიღოთ ორივე თარიღი."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "დააჯგუფეთ და დაგეგმეთ თქვენი სამუშაო ციკლებში.",
+        "description": "გაყავით სამუშაო დროით შეზღუდულ ნაწილებად, იმუშავეთ უკუღმა თქვენი პროექტის ვადებიდან თარიღების დასაყენებლად და გააკეთეთ ხელშესახები პროგრესი გუნდურად.",
+        "primary_button": {
+          "text": "დააყენეთ თქვენი პირველი ციკლი",
+          "comic": {
+            "title": "ციკლები არის განმეორებადი დროის ყუთები.",
+            "description": "სპრინტი, იტერაცია ან ნებისმიერი სხვა ტერმინი, რომელსაც იყენებთ კვირეული ან ორკვირეული სამუშაოს თვალყურის დევნებისთვის, არის ციკლი."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "ციკლში სამუშაო ელემენტები დამატებული არ არის",
+        "description": "დაამატეთ ან შექმენით სამუშაო ელემენტები, რომლებიც გსურთ დაგეგმოთ და მიაწოდოთ ამ ციკლში",
+        "primary_button": {
+          "text": "ახალი სამუშაო ელემენტის შექმნა"
+        },
+        "secondary_button": {
+          "text": "არსებული სამუშაო ელემენტის დამატება"
+        }
+      },
+      "completed_no_issues": {
+        "title": "ციკლში სამუშაო ელემენტები არ არის",
+        "description": "ციკლში სამუშაო ელემენტები არ არის. სამუშაო ელემენტები ან გადატანილია ან დამალულია. თუ არსებობს დამალული სამუშაო ელემენტები, განაახლეთ თქვენი ჩვენების თვისებები შესაბამისად."
+      },
+      "active": {
+        "title": "აქტიური ციკლი არ არის",
+        "description": "აქტიური ციკლი მოიცავს ნებისმიერ პერიოდს, რომელიც მოიცავს დღევანდელ თარიღს თავის დიაპაზონში. იპოვეთ აქტიური ციკლის პროგრესი და დეტალები აქ."
+      },
+      "archived": {
+        "title": "ჯერ დაარქივებული ციკლები არ არის",
+        "description": "თქვენი პროექტის მოწესრიგებისთვის, დაარქივეთ დასრულებული ციკლები. იპოვეთ ისინი აქ ერთხელ დაარქივების შემდეგ."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "შეინახეთ გაფილტრული ხედები თქვენი პროექტისთვის. შექმენით იმდენი, რამდენიც გჭირდებათ",
+        "description": "ხედები არის შენახული ფილტრების ნაკრები, რომელსაც ხშირად იყენებთ ან გსურთ მარტივი წვდომა. თქვენი ყველა კოლეგა პროექტში შეუძლია ნახოს ყველას ხედები და აირჩიოს რომელი უფრო უხდება მათ საჭიროებებს.",
+        "primary_button": {
+          "text": "შექმენით თქვენი პირველი ხედი",
+          "comic": {
+            "title": "ხედები მუშაობს სამუშაო ელემენტის თვისებებზე.",
+            "description": "თქვენ შეგიძლიათ შექმნათ ხედი აქ იმდენი თვისებით და ფილტრით, რამდენიც გჭირდებათ."
+          }
+        },
+        "filter": {
+          "title": "No matching views",
+          "description": "No views match the search criteria.\n Create a new view instead."
+        }
+      },
+      "no_archived_issues": {
+        "title": "No archived work items yet",
+        "description": "Manually or through automation, you can archive work items that are completed or cancelled. Find them here once archived.",
+        "primary_button": {
+          "text": "Set automation"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "No work items found matching the filters applied",
+        "secondary_button": {
+          "text": "Clear all filters"
+        }
+      },
+      "public": {
+        "title": "No public pages yet",
+        "description": "See pages shared with everyone in your project right here.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "archived": {
+        "title": "No archived pages yet",
+        "description": "Archive pages not on your radar. Access them here when needed."
+      },
+      "shared": {
+        "title": "No shared pages yet",
+        "description": "Pages that others have shared with you will appear here."
+      }
+    },
+    "delete_view": {
+      "title": "Are you sure you want to delete this view?",
+      "content": "If you confirm, all the sort, filter, and display options + the layout you have chosen for this view will be permanently deleted without any way to restore them."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "შექმენით სამუშაო ელემენტი და მიანიჭეთ იგი ვინმეს, თუნდაც საკუთარ თავს",
+        "description": "იფიქრეთ სამუშაო ელემენტებზე, როგორც სამუშაოებზე, დავალებებზე, სამუშაოზე ან JTBD-ზე. რაც გვიყვარს. სამუშაო ელემენტი და მისი ქვე-სამუშაო ელემენტები ჩვეულებრივ დროით შეზღუდული მოქმედებებია, რომლებიც მინიჭებულია თქვენი გუნდის წევრებზე. თქვენი გუნდი ქმნის, მინიჭავს და ასრულებს სამუშაო ელემენტებს თქვენი პროექტის მიზნისკენ წინსვლისთვის.",
+        "primary_button": {
+          "text": "შექმენით თქვენი პირველი სამუშაო ელემენტი",
+          "comic": {
+            "title": "სამუშაო ელემენტები არის Plane-ის სამშენებლო ბლოკები.",
+            "description": "Plane UI-ის რედიზაინი, კომპანიის რებრენდინგი ან ახალი საწვავის ინჟექტორის სისტემის გაშვება არის სამუშაო ელემენტების მაგალითები, რომლებსაც სავარაუდოდ აქვთ ქვე-სამუშაო ელემენტები."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "ჯერ დაარქივებული სამუშაო ელემენტები არ არის",
+        "description": "ხელით ან ავტომატიზაციის მეშვეობით, შეგიძლიათ დაარქივოთ დასრულებული ან გაუქმებული სამუშაო ელემენტები. იპოვეთ ისინი აქ ერთხელ დაარქივების შემდეგ.",
+        "primary_button": {
+          "text": "ავტომატიზაციის დაყენება"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "გამოყენებული ფილტრების შესაბამისი სამუშაო ელემენტები არ მოიძებნა",
+        "secondary_button": {
+          "text": "ყველა ფილტრის გასუფთავება"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "მოდულის დამატება",
+    "update_module": "მოდულის განახლება",
+    "create_module": "მოდულის შექმნა",
+    "archive_module": "მოდულის არქივირება",
+    "restore_module": "მოდულის აღდგენა",
+    "delete_module": "მოდულის წაშლა",
+    "empty_state": {
+      "general": {
+        "title": "თქვენი პროექტის ეტაპების მირჩევა მოდულებში და თვალყური ადევნეთ აგრეგირებულ სამუშაოს მარტივად.",
+        "description": "სამუშაო ელემენტების ჯგუფი, რომელიც ეკუთვნის ლოგიკურ, იერარქიულ მშობელს, ქმნის მოდულს. იფიქრეთ მათზე, როგორც პროექტის ეტაპებით სამუშაოს თვალყურის დევნების გზაზე. მათ აქვთ საკუთარი პერიოდები და ვადები, ასევე ანალიტიკა, რომელიც დაგეხმარებათ ნახოთ რამდენად ახლოს ან შორს ხართ ეტაპიდან.",
+        "primary_button": {
+          "text": "შექმენით თქვენი პირველი მოდული",
+          "comic": {
+            "title": "მოდულები ეხმარება სამუშაოს იერარქიით ჯგუფირებას.",
+            "description": "კალათის მოდული, შასის მოდული და საწყობის მოდული ყველა კარგი მაგალითია ამ ჯგუფირების."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "მოდულში სამუშაო ელემენტები არ არის",
+        "description": "შექმენით ან დაამატეთ სამუშაო ელემენტები, რომლებიც გსურთ შეასრულოთ ამ მოდულის ფარგლებში",
+        "primary_button": {
+          "text": "ახალი სამუშაო ელემენტების შექმნა"
+        },
+        "secondary_button": {
+          "text": "არსებული სამუშაო ელემენტის დამატება"
+        }
+      },
+      "archived": {
+        "title": "ჯერ დაარქივებული მოდულები არ არის",
+        "description": "თქვენი პროექტის მოწესრიგებისთვის, დაარქივეთ დასრულებული ან გაუქმებული მოდულები. იპოვეთ ისინი აქ ერთხელ დაარქივების შემდეგ."
+      },
+      "sidebar": {
+        "in_active": "ეს მოდული ჯერ აქტიური არ არის.",
+        "invalid_date": "არასწორი თარიღი. გთხოვთ, შეიყვანეთ სწორი თარიღი."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "მოდულის არქივირება",
+      "archive_module_description": "მხოლოდ დასრულებული ან გაუქმებული\nმოდული შეიძლება დაარქივდეს.",
+      "delete_module": "მოდულის წაშლა"
+    },
+    "toast": {
+      "copy": {
+        "success": "მოდულის ბმული კოპირებულია ბუფერში"
+      },
+      "delete": {
+        "success": "მოდული წარმატებით წაიშალა",
+        "error": "მოდულის წაშლა ვერ მოხერხდა"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "ჩაწერეთ ჩანაწერი, დოკუმენტი ან სრული ცოდნის ბაზა. მიიღეთ Galileo, Plane-ის AI ასისტენტი, რომ დაგეხმაროთ დაწყებაში",
+        "description": "გვერდები არის აზრების შესანახი სივრცე Plane-ში. ჩაწერეთ შეხვედრის ჩანაწერები, მარტივად დააფორმატეთ ისინი, ჩაურთეთ სამუშაო ელემენტები, განათავსეთ ისინი კომპონენტების ბიბლიოთეკის გამოყენებით და შეინახეთ ყველა თქვენი პროექტის კონტექსტში. ნებისმიერი დოკუმენტის სწრაფად შესაქმნელად, გამოიძახეთ Galileo, Plane-ის AI, მალსახმობით ან დაწკაპუნებით.",
+        "primary_button": {
+          "text": "შექმენით თქვენი პირველი გვერდი"
+        }
+      },
+      "private": {
+        "title": "ჯერ პირადი გვერდები არ არის",
+        "description": "შეინახეთ თქვენი პირადი აზრები აქ. როდესაც მზად იქნებით გაზიარებისთვის, გუნდი მხოლოდ ერთი დაწკაპუნებით არის.",
+        "primary_button": {
+          "text": "შექმენით თქვენი პირველი გვერდი"
+        }
+      },
+      "public": {
+        "title": "ჯერ საჯარო გვერდები არ არის",
+        "description": "ნახეთ გვერდები, რომლებიც გაზიარებულია ყველასთან თქვენს პროექტში აქვე.",
+        "primary_button": {
+          "text": "შექმენით თქვენი პირველი გვერდი"
+        }
+      },
+      "archived": {
+        "title": "ჯერ დაარქივებული გვერდები არ არის",
+        "description": "დაარქივეთ გვერდები, რომლებიც არ არის თქვენს რადარში. წვდომა მათზე აქვე, როდესაც საჭირო იქნება."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Intake არ არის ჩართული პროექტისთვის.",
+        "description": "Intake დაგეხმარებათ თქვენი პროექტის შემომავალი მოთხოვნების მართვაში და მათ დამატებაში სამუშაო ელემენტებად თქვენს ნაკადში. ჩართეთ Intake პროექტის პარამეტრებიდან მოთხოვნების მართვისთვის.",
+        "primary_button": {
+          "text": "ფუნქციების მართვა"
+        }
+      },
+      "cycle": {
+        "title": "ციკლები არ არის ჩართული ამ პროექტისთვის.",
+        "description": "გაყავით სამუშაო დროით შეზღუდულ ნაწილებად, იმუშავეთ უკუღმა თქვენი პროექტის ვადებიდან თარიღების დასაყენებლად და გააკეთეთ ხელშესახები პროგრესი გუნდურად. ჩართეთ ციკლების ფუნქცია თქვენი პროექტისთვის მათი გამოყენების დასაწყებად.",
+        "primary_button": {
+          "text": "ფუნქციების მართვა"
+        }
+      },
+      "module": {
+        "title": "მოდულები არ არის ჩართული პროექტისთვის.",
+        "description": "მოდულები არის თქვენი პროექტის სამშენებლო ბლოკები. ჩართეთ მოდულები პროექტის პარამეტრებიდან მათი გამოყენების დასაწყებად.",
+        "primary_button": {
+          "text": "ფუნქციების მართვა"
+        }
+      },
+      "page": {
+        "title": "გვერდები არ არის ჩართული პროექტისთვის.",
+        "description": "გვერდები არის თქვენი პროექტის სამშენებლო ბლოკები. ჩართეთ გვერდები პროექტის პარამეტრებიდან მათი გამოყენების დასაწყებად.",
+        "primary_button": {
+          "text": "ფუნქციების მართვა"
+        }
+      },
+      "view": {
+        "title": "ხედები არ არის ჩართული პროექტისთვის.",
+        "description": "ხედები არის თქვენი პროექტის სამშენებლო ბლოკები. ჩართეთ ხედები პროექტის პარამეტრებიდან მათი გამოყენების დასაწყებად.",
+        "primary_button": {
+          "text": "ფუნქციების მართვა"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "ჩამორჩენა",
+      "planned": "დაგეგმილი",
+      "in_progress": "მიმდინარე",
+      "paused": "შეჩერებული",
+      "completed": "დასრულებული",
+      "cancelled": "გაუქმებული"
+    },
+    "layout": {
+      "list": "სიის განლაგება",
+      "board": "გალერეის განლაგება",
+      "timeline": "დროის ხაზის განლაგება"
+    },
+    "order_by": {
+      "name": "სახელი",
+      "progress": "პროგრესი",
+      "issues": "სამუშაო ელემენტების რაოდენობა",
+      "due_date": "ვადის თარიღი",
+      "created_at": "შექმნის თარიღი",
+      "manual": "ხელით"
+    }
+  },
+  "project_members": {
+    "full_name": "Full name",
+    "display_name": "Display name",
+    "email": "Email",
+    "joining_date": "Joining date",
+    "role": "Role"
+  },
+  "project": {
+    "members_import": {
+      "title": "Import Members from CSV",
+      "description": "Upload a CSV with columns: Email and Role (5=Guest, 15=Member, 20=Admin). Users must already be workspace members.",
+      "download_sample": "Download sample CSV",
+      "dropzone": {
+        "active": "Drop CSV file here",
+        "inactive": "Drag & drop or click to upload",
+        "file_type": "Only .csv files supported"
+      },
+      "buttons": {
+        "cancel": "Cancel",
+        "import": "Import",
+        "try_again": "Try Again",
+        "close": "Close",
+        "done": "Done"
+      },
+      "progress": {
+        "uploading": "Uploading...",
+        "importing": "Importing..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Import Complete"
+        },
+        "message": {
+          "success": "Successfully imported {count} member{plural} to the project.",
+          "no_imports": "No new members were imported from the CSV file."
+        },
+        "stats": {
+          "added": "Added",
+          "reactivated": "Reactivated",
+          "already_members": "Already Members",
+          "skipped": "Skipped"
+        },
+        "download_errors": "Download skipped details"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Invalid file",
+          "message": "Only CSV files are supported."
+        },
+        "import_failed": {
+          "title": "Import failed",
+          "message": "Something went wrong."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/settings.json b/packages/i18n/src/locales/ka-ge/settings.json
new file mode 100644
index 0000000..f8d35f8
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Change email",
+        "description": "Enter a new email address to receive a verification link.",
+        "toasts": {
+          "success_title": "Success!",
+          "success_message": "Email updated successfully. Please sign in again."
+        },
+        "form": {
+          "email": {
+            "label": "New email",
+            "placeholder": "Enter your email",
+            "errors": {
+              "required": "Email is required",
+              "invalid": "Email is invalid",
+              "exists": "Email already exists. Please use a different one.",
+              "validation_failed": "Email validation failed. Please try again."
+            }
+          },
+          "code": {
+            "label": "Unique code",
+            "placeholder": "123456",
+            "helper_text": "Verification code sent to your new email.",
+            "errors": {
+              "required": "Unique code is required",
+              "invalid": "Invalid verification code. Please try again."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Continue",
+          "confirm": "Confirm",
+          "cancel": "Cancel"
+        },
+        "states": {
+          "sending": "Sending"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "პრეფერენციები",
+      "description": "მორგეთ თქვენი აპლიკაციის გამოცდილება თქვენი სამუშაოს მიხედვით"
+    },
+    "notifications": {
+      "heading": "ელფოსტის შეტყობინებები",
+      "description": "იყავით ინფორმირებული თქვენს გამოწერილ სამუშაო ელემენტებზე. ჩართეთ ეს, რომ მიიღოთ შეტყობინებები.",
+      "select_default_view": "Select default view",
+      "compact": "Compact",
+      "full": "Full Screen"
+    },
+    "security": {
+      "heading": "უსაფრთხოება"
+    },
+    "api_tokens": {
+      "title": "Personal Access Tokens",
+      "description": "შექმენით უსაფრთხო API ტოკენები თქვენი მონაცემების ინტეგრაციისთვის გარე სისტემებთან და აპლიკაციებთან."
+    },
+    "activity": {
+      "heading": "აქტივობა",
+      "description": "თვალყური ადევნეთ თქვენს ბოლო მოქმედებებს და ცვლილებებს ყველა პროექტსა და სამუშაო ელემენტში."
+    },
+    "connections": {
+      "title": "Connections",
+      "heading": "Connections",
+      "description": "Manage your workspace connections settings."
+    }
+  },
+  "profile": {
+    "label": "პროფილი",
+    "page_label": "თქვენი სამუშაო",
+    "work": "სამუშაო",
+    "details": {
+      "joined_on": "შეერთებულია",
+      "time_zone": "დროის სარტყელი"
+    },
+    "stats": {
+      "workload": "დატვირთვა",
+      "overview": "მიმოხილვა",
+      "created": "შექმნილი სამუშაო ელემენტები",
+      "assigned": "მინიჭებული სამუშაო ელემენტები",
+      "subscribed": "გამოწერილი სამუშაო ელემენტები",
+      "state_distribution": {
+        "title": "სამუშაო ელემენტები მდგომარეობის მიხედვით",
+        "empty": "შექმენით სამუშაო ელემენტები, რათა ნახოთ ისინი მდგომარეობის მიხედვით გრაფზე უკეთესი ანალიზისთვის."
+      },
+      "priority_distribution": {
+        "title": "სამუშაო ელემენტები პრიორიტეტის მიხედვით",
+        "empty": "შექმენით სამუშაო ელემენტები, რათა ნახოთ ისინი პრიორიტეტის მიხედვით გრაფზე უკეთესი ანალიზისთვის."
+      },
+      "recent_activity": {
+        "title": "ბოლო აქტივობა",
+        "empty": "ჩვენ ვერ ვიპოვეთ მონაცემები. გთხოვთ, ნახოთ თქვენი შეყვანები",
+        "button": "დღევანდელი აქტივობის ჩამოტვირთვა",
+        "button_loading": "ჩამოტვირთვა"
+      }
+    },
+    "actions": {
+      "profile": "პროფილი",
+      "security": "უსაფრთხოება",
+      "activity": "აქტივობა",
+      "preferences": "პრეფერენციები",
+      "notifications": "შეტყობინებები",
+      "api-tokens": "პერსონალური წვდომის ტოკენები",
+      "connections": "Connections"
+    },
+    "tabs": {
+      "summary": "შეჯამება",
+      "assigned": "მინიჭებული",
+      "created": "შექმნილი",
+      "subscribed": "გამოწერილი",
+      "activity": "აქტივობა"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "ჯერ აქტივობები არ არის",
+        "description": "დაიწყეთ ახალი სამუშაო ელემენტის შექმნით! დაამატეთ დეტალები და თვისებები. მეტი ინფორმაცია Plane-ში თქვენი აქტივობის ნახვისთვის."
+      },
+      "assigned": {
+        "title": "თქვენთვის მინიჭებული სამუშაო ელემენტები არ არის",
+        "description": "თქვენთვის მინიჭებული სამუშაო ელემენტები შეგიძლიათ თვალყური ადევნოთ აქედან."
+      },
+      "created": {
+        "title": "ჯერ სამუშაო ელემენტები არ არის",
+        "description": "თქვენ მიერ შექმნილი ყველა სამუშაო ელემენტი აქ მოდის, თვალყური ადევნეთ მათ პირდაპირ აქ."
+      },
+      "subscribed": {
+        "title": "ჯერ სამუშაო ელემენტები არ არის",
+        "description": "გამოიწერეთ თქვენთვის საინტერესო სამუშაო ელემენტები, თვალყური ადევნეთ ყველას აქ."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "სისტემის პრეფერენცია"
+      },
+      "light": {
+        "label": "ღია"
+      },
+      "dark": {
+        "label": "მუქი"
+      },
+      "light_contrast": {
+        "label": "ღია მაღალი კონტრასტით"
+      },
+      "dark_contrast": {
+        "label": "მუქი მაღალი კონტრასტით"
+      },
+      "custom": {
+        "label": "მორგებული თემა"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/stickies.json b/packages/i18n/src/locales/ka-ge/stickies.json
new file mode 100644
index 0000000..ff5397d
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "თქვენი Stickies",
+    "placeholder": "დააწკაპუნეთ აქ ჩასაწერად",
+    "all": "ყველა Sticky",
+    "no-data": "ჩაწერეთ იდეა, დაიჭირეთ ა-ჰა, ან ჩაიწერეთ ტვინის ტალღა. დაამატეთ Sticky დასაწყებად.",
+    "add": "Sticky-ის დამატება",
+    "search_placeholder": "ძიება სათაურით",
+    "delete": "Sticky-ის წაშლა",
+    "delete_confirmation": "დარწმუნებული ხართ, რომ გსურთ ამ Sticky-ის წაშლა?",
+    "empty_state": {
+      "simple": "ჩაწერეთ იდეა, დაიჭირეთ ა-ჰა, ან ჩაიწერეთ ტვინის ტალღა. დაამატეთ Sticky დასაწყებად.",
+      "general": {
+        "title": "Stickies არის სწრაფი ჩანაწერები და დავალებები, რომლებსაც სწრაფად იწერთ.",
+        "description": "დაიჭირეთ თქვენი აზრები და იდეები მარტივად Stickies-ის შექმნით, რომლებსაც შეგიძლიათ წვდომა ნებისმიერ დროს და ნებისმიერი ადგილიდან.",
+        "primary_button": {
+          "text": "Sticky-ის დამატება"
+        }
+      },
+      "search": {
+        "title": "ეს არ შეესაბამება თქვენს არცერთ Sticky-ს.",
+        "description": "სცადეთ სხვა ტერმინი ან შეგვატყობინეთ\nთუ დარწმუნებული ხართ, რომ თქვენი ძიება სწორია. ",
+        "primary_button": {
+          "text": "Sticky-ის დამატება"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Sticky-ის სახელი არ შეიძლება იყოს 100 სიმბოლოზე გრძელი.",
+        "already_exists": "უკვე არსებობს Sticky აღწერის გარეშე"
+      },
+      "created": {
+        "title": "Sticky შეიქმნა",
+        "message": "Sticky წარმატებით შეიქმნა"
+      },
+      "not_created": {
+        "title": "Sticky არ შეიქმნა",
+        "message": "Sticky-ის შექმნა ვერ მოხერხდა"
+      },
+      "updated": {
+        "title": "Sticky განახლდა",
+        "message": "Sticky წარმატებით განახლდა"
+      },
+      "not_updated": {
+        "title": "Sticky არ განახლდა",
+        "message": "Sticky-ის განახლება ვერ მოხერხდა"
+      },
+      "removed": {
+        "title": "Sticky ამოიღეს",
+        "message": "Sticky წარმატებით ამოიღეს"
+      },
+      "not_removed": {
+        "title": "Sticky არ ამოიღეს",
+        "message": "Sticky-ის ამოღება ვერ მოხერხდა"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/template.json b/packages/i18n/src/locales/ka-ge/template.json
new file mode 100644
index 0000000..5c0882a
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Templates",
+      "description": "Save 80% time spent on creating projects, work items, and pages when you use templates.",
+      "new_project_template": "New project template",
+      "new_work_item_template": "New work item template",
+      "new_page_template": "New page template",
+      "options": {
+        "project": {
+          "label": "Project templates"
+        },
+        "work_item": {
+          "label": "Work item templates"
+        },
+        "page": {
+          "label": "Page templates"
+        }
+      },
+      "create_template": {
+        "label": "Create template",
+        "no_permission": {
+          "project": "Contact your project admin to create templates",
+          "workspace": "Contact your workspace admin to create templates"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Use template",
+          "loading": "Applying"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Derived from workspace"
+        },
+        "project": {
+          "info": "Derived from project"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Name your project template.",
+              "validation": {
+                "required": "Template name is required",
+                "maxLength": "Template name should be less than 255 characters"
+              }
+            },
+            "description": {
+              "placeholder": "Describe when and how to use this template."
+            }
+          },
+          "name": {
+            "placeholder": "Name your project.",
+            "validation": {
+              "required": "Project title is required",
+              "maxLength": "Project title should be less than 255 characters"
+            }
+          },
+          "description": {
+            "placeholder": "Describe the purpose and goals of this project."
+          },
+          "button": {
+            "create": "Create project template",
+            "update": "Update project template"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Name your work-item template.",
+              "validation": {
+                "required": "Template name is required",
+                "maxLength": "Template name should be less than 255 characters"
+              }
+            },
+            "description": {
+              "placeholder": "Describe when and how to use this template."
+            }
+          },
+          "name": {
+            "placeholder": "Give this work item a title.",
+            "validation": {
+              "required": "Work item title is required",
+              "maxLength": "Work item title should be less than 255 characters"
+            }
+          },
+          "description": {
+            "placeholder": "Describe this work item so its clear what you will accomplish when you complete this."
+          },
+          "button": {
+            "create": "Create work-item template",
+            "update": "Update work-item template"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Name your page template.",
+              "validation": {
+                "required": "Template name is required",
+                "maxLength": "Template name should be less than 255 characters"
+              }
+            },
+            "description": {
+              "placeholder": "Describe when and how to use this template."
+            }
+          },
+          "name": {
+            "placeholder": "Untitled page",
+            "validation": {
+              "maxLength": "Page name should be less than 255 characters"
+            }
+          },
+          "button": {
+            "create": "Create page template",
+            "update": "Update page template"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Publish settings} other {Publish to Marketplace}}",
+          "unpublish_action": "Unpublish from Marketplace",
+          "title": "Make your template discoverable and recognizable.",
+          "name": {
+            "label": "Name of template",
+            "placeholder": "Name your template",
+            "validation": {
+              "required": "Template name is required",
+              "maxLength": "Template name should be less than 255 characters"
+            }
+          },
+          "short_description": {
+            "label": "Short description",
+            "placeholder": "This template is great for Project Managers who manage several projects at the same time.",
+            "validation": {
+              "required": "Short description is required"
+            }
+          },
+          "description": {
+            "label": "Description",
+            "placeholder": "Enhance productivity and streamline communication with our Speech-To-Text integration.\n• Real-time transcription: Convert spoken words into accurate text instantly.\n• Task and comment creation: Add tasks, descriptions, and comments through voice commands.",
+            "validation": {
+              "required": "Description is required"
+            }
+          },
+          "category": {
+            "label": "Category",
+            "placeholder": "Choose where you think this fits best. You can choose more than one.",
+            "validation": {
+              "required": "At least one category is required"
+            }
+          },
+          "keywords": {
+            "label": "Keywords",
+            "placeholder": "Use terms that you think your users will search for when looking for this template.",
+            "helperText": "Enter comma-separated keywords that are likely to help people find this from search.",
+            "validation": {
+              "required": "At least one keyword is required"
+            }
+          },
+          "website": {
+            "label": "Website URL",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "Invalid URL",
+              "maxLength": "URL should be less than 800 characters"
+            }
+          },
+          "company_name": {
+            "label": "Company name",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Company name is required",
+              "maxLength": "Company name should be less than 255 characters"
+            }
+          },
+          "contact_email": {
+            "label": "Contact email",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Invalid email address",
+              "maxLength": "Contact email should be less than 255 characters"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Link to your privacy policy",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Invalid URL",
+              "maxLength": "URL should be less than 800 characters"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Link to your terms of use",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "Invalid URL",
+              "maxLength": "URL should be less than 800 characters"
+            }
+          },
+          "cover_image": {
+            "label": "Add a cover image that will be displayed in the marketplace",
+            "upload_title": "Upload cover image",
+            "upload_placeholder": "Click to upload or drag and drop to upload a cover image",
+            "drop_here": "Drop here",
+            "click_to_upload": "Click to upload",
+            "invalid_file_or_exceeds_size_limit": "Invalid file or exceeds size limit. Please try again.",
+            "upload_and_save": "Upload and save",
+            "uploading": "Uploading",
+            "remove": "Remove",
+            "removing": "Removing",
+            "validation": {
+              "required": "Cover image is required"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Include pictures you think will make viewers of this template.",
+            "validation": {
+              "required": "At least one screenshot is required"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Templates",
+        "description": "With project, work-item, and page templates in Plane, you don't have to create a project from scratch or set work item props manually.",
+        "sub_description": "Get 80% of your admin time back when you use Templates."
+      },
+      "no_templates": {
+        "button": "Create your first template"
+      },
+      "no_labels": {
+        "description": "No labels yet. Create labels to help organize and filter work items in you project."
+      },
+      "no_modules": {
+        "description": "No modules yet. Organize work into sub-projects with dedicated leads and assignees."
+      },
+      "no_work_items": {
+        "description": "No work items yet. Add one to structure your work better."
+      },
+      "no_sub_work_items": {
+        "description": "No sub-work items yet. Add one to structure your work better."
+      },
+      "page": {
+        "no_templates": {
+          "title": "There are no templates you have access to.",
+          "description": "Please create a template"
+        },
+        "no_results": {
+          "title": "That didn't match a template.",
+          "description": "Try searching by other terms."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Template created",
+          "message": "{templateName}, the {templateType} template, is now available for your workspace."
+        },
+        "error": {
+          "title": "We couldn't create that template this time.",
+          "message": "Try saving your details again or copy them over to a new template, preferably in another tab."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Template changed",
+          "message": "{templateName}, the {templateType} template, was changed."
+        },
+        "error": {
+          "title": "We couldn't save changes to this template.",
+          "message": "Try saving your details again or come back to this template later. If there's trouble still, reach out to us."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Template deleted",
+          "message": "{templateName}, the {templateType} template, has now been deleted from your workspace."
+        },
+        "error": {
+          "title": "We couldn't delete that template this.",
+          "message": "Try deleting it again or come back to it later. If you can't delete it then, reach out to us."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Template unpublished",
+          "message": "{templateName}, the {templateType} template, has now been unpublished."
+        },
+        "error": {
+          "title": "We couldn't unpublish that template this.",
+          "message": "Try unpublishing it again or come back to it later. If you can't unpublish it then, reach out to us."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Delete template",
+      "description": {
+        "prefix": "Are you sure you want to delete template-",
+        "suffix": "? All of the data related to the template will be permanently removed. This action cannot be undone."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Unpublish template",
+      "description": {
+        "prefix": "Are you sure you want to unpublish template-",
+        "suffix": "? This template will no longer be available to users on the marketplace."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Add new template",
+        "project": "Add new template"
+      },
+      "label": {
+        "project": "Pick a project template",
+        "page": "Choose from template"
+      },
+      "tooltip": {
+        "work_item": "Pick a work item template"
+      },
+      "no_results": {
+        "work_item": "No templates found.",
+        "project": "No templates found."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/tour.json b/packages/i18n/src/locales/ka-ge/tour.json
new file mode 100644
index 0000000..b239e38
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Welcome to your workspace",
+        "description": "To help you get started, we’ve created a Demo Project for you. Let’s add your first work item."
+      },
+      "step_one": {
+        "title": "Click “+ Add work item”",
+        "description": "Start by clicking the “+ New Work Item” button. You can create tasks, bugs, or custom type that fits your needs."
+      },
+      "step_two": {
+        "title": "Filter your work items",
+        "description": "Use filters to quickly narrow down your list. You can filter by status, priority, or team members. "
+      },
+      "step_three": {
+        "title": "View, group, and order work items as needed.",
+        "description": "See required properties, and group or order work items as per your needs."
+      },
+      "step_four": {
+        "title": "Visualize however you want",
+        "description": "Select which properties you want to see in the list. You can also group and sort work items your way."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Make progress with Cycles",
+        "description": "Press Q to create a Cycle. Name it and set dates—only one cycle per project."
+      },
+      "step_one": {
+        "title": "Create a new cycle",
+        "description": "Press Q to create a Cycle. Name it and set dates—only one cycle per project."
+      },
+      "step_two": {
+        "title": "Click “+ ”",
+        "description": "Start by clicking the “+” button. Add new or existing work items directly from the Cycle page."
+      },
+      "step_three": {
+        "title": "Cycle summary",
+        "description": "Track cycle progress, team productivity, and priorities—and investigate if things fall behind."
+      },
+      "step_four": {
+        "title": "Transfer work items",
+        "description": "After the due date, a cycle auto-completes. Move unfinished work to another cycle."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Break your project down into Modules",
+        "description": "Modules are smaller, focused projects that help users group and organize work items within specific time frames."
+      },
+      "step_one": {
+        "title": "Create Module",
+        "description": "Modules are smaller, focused projects that help users group and organize work items within specific time frames."
+      },
+      "step_two": {
+        "title": "Click “+ ”",
+        "description": "Start by clicking the “+” button. Add new or existing work items directly from the Module page."
+      },
+      "step_three": {
+        "title": "Module states",
+        "description": "Modules use these statuses to help users plan and clearly track progress and stage."
+      },
+      "step_four": {
+        "title": "Module progress",
+        "description": "Module progress is tracked via completed items, with analytics to monitor performance."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Document with AI-powered Pages",
+        "description": "Pages in Plane let you capture, organize, and collaborate on project info—no external tools needed."
+      },
+      "step_one": {
+        "title": "Make page Public or Private",
+        "description": "Pages can be set as public, visible to everyone in your workspace, or private, accessible only to you."
+      },
+      "step_two": {
+        "title": "Use / command",
+        "description": "Use / on a page to add content from 16 block types, including lists, images, tables, and embeds."
+      },
+      "step_three": {
+        "title": "Page actions",
+        "description": "Once your page is created, you can click the ••• menu in the top-right corner to perform the following actions."
+      },
+      "step_four": {
+        "title": "Table of contents",
+        "description": "Get a bird’s-eye view of your page by clicking the panel icon to see all headings."
+      },
+      "step_five": {
+        "title": "Version history",
+        "description": "Pages track all edits with version history, letting you restore previous versions if needed."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Streamline requests with intake",
+        "description": "A Plane-only feature that lets Guests create work items for bugs, requests, or tickets."
+      },
+      "step_one": {
+        "title": "Open/closed intake requests",
+        "description": "Pending requests stay in the Open tab, and once addressed by an admin or member, they move to Closed."
+      },
+      "step_two": {
+        "title": "Accept/decline a pending request",
+        "description": "Accept to edit and move the work item to your project, or decline it to mark it as Cancelled."
+      },
+      "step_three": {
+        "title": "Snooze for now",
+        "description": "A work item can be snoozed to review it at a later time. It will be moved to the bottom of your open request list."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Stop tab-switching. Connect your world.",
+        "description": "Link GitHub, Slack to track PRs and summarize chats directly in Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigation, re-imagined",
+        "sub_title": "Your workspace is now easier to explore with a smarter, simplified navigation.",
+        "highlight_1": "Streamlined left-panel structure for quicker discovery",
+        "highlight_2": "Improved global search to jump to anything instantly",
+        "highlight_3": "Smarter category grouping for clarity and focus",
+        "footer": "Want a quick walkthrough?"
+      },
+      "step_zero": {
+        "title": "Find anything instantly",
+        "description": "Use universal search to jump to tasks, projects, pages, and people—without leaving your flow."
+      },
+      "step_one": {
+        "title": "Stay in control of updates",
+        "description": "Your inbox keeps all mentions, approvals, and activity in one place, so you never miss important work."
+      },
+      "step_two": {
+        "title": "Personalize Your Navigation",
+        "description": "Customize what you see and how you navigate in Preferences."
+      }
+    },
+    "actions": {
+      "close": "Close",
+      "next": "Next",
+      "back": "Back",
+      "done": "Done",
+      "take_a_tour": "Take a tour",
+      "get_started": "Get started",
+      "got_it": "Got it"
+    },
+    "seed_data": {
+      "title": "Here is your demo project",
+      "description": "Projects let you manage your teams, tasks, and everything you need to get things done within your workspace."
+    }
+  },
+  "get_started": {
+    "title": "Hey {name}, welcome aboard!",
+    "description": "Here’s everything you need to kickstart your journey with Plane.",
+    "checklist_section": {
+      "title": "Get started",
+      "description": "Begin your setup and see your ideas come to life faster.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Create a project"
+        },
+        "item_2": {
+          "title": "Create a work item"
+        },
+        "item_3": {
+          "title": "Invite team members"
+        },
+        "item_4": {
+          "title": "Create a page"
+        },
+        "item_5": {
+          "title": "Try Plane AI chat"
+        },
+        "item_6": {
+          "title": "Link Integrations"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Invite your team",
+      "description": "Invite teammates and start building together."
+    },
+    "integrations_section": {
+      "title": "Power up your workspace",
+      "more_integrations": "Browse more integrations"
+    },
+    "switch_to_plane_section": {
+      "title": "Discover why teams switch to Plane",
+      "description": "Compare Plane with the tools you use today and see the difference."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/update.json b/packages/i18n/src/locales/ka-ge/update.json
new file mode 100644
index 0000000..f821ffc
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Progress",
+      "since_last_update": "Since last update",
+      "comments": "{count, plural, one{# Comment} other{# Comments}}"
+    },
+    "add_update": "Add Update",
+    "add_update_placeholder": "Add your update here",
+    "empty": {
+      "title": "No updates yet",
+      "description": "You can see the updates here."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reaction created",
+          "message": "The reaction has been successfully created"
+        },
+        "error": {
+          "title": "Reaction not created",
+          "message": "The reaction could not be created"
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reaction removed",
+          "message": "The reaction has been successfully removed"
+        },
+        "error": {
+          "title": "Reaction not removed",
+          "message": "The reaction could not be removed"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Update created",
+        "message": "The update has been successfully created"
+      },
+      "error": {
+        "title": "Update not created",
+        "message": "The update could not be created"
+      }
+    },
+    "delete": {
+      "title": "Delete update",
+      "confirmation": "Are you sure you want to delete this update? This is an irreversible action.",
+      "success": {
+        "title": "Update deleted",
+        "message": "The update has been successfully deleted"
+      },
+      "error": {
+        "title": "Update not deleted",
+        "message": "The update could not be deleted"
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Updated",
+        "message": "The update has been successfully updated"
+      },
+      "error": {
+        "title": "Update not updated",
+        "message": "The update could not be updated"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/wiki.json b/packages/i18n/src/locales/ka-ge/wiki.json
new file mode 100644
index 0000000..9b2860c
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "General",
+      "private": "Private",
+      "shared": "Shared",
+      "archived": "Archived"
+    },
+    "fallback_name": "Collection",
+    "form": {
+      "name_required": "Collection title is required",
+      "name_max_length": "Collection name must be less than 255 characters",
+      "name_placeholder_create": "Give a title to the collection",
+      "name_placeholder_edit": "Collection name"
+    },
+    "create_modal": {
+      "title": "Create a collection",
+      "submit": "Create collection"
+    },
+    "edit_modal": {
+      "title": "Edit collection"
+    },
+    "delete_modal": {
+      "title": "Delete collection",
+      "page_count": "This collection has {pageCount} {pageCount, plural, one {page} other {pages}}. Choose what happens to them.",
+      "transfer_title": "Transfer pages and delete collection",
+      "transfer_description": "Move all pages to another collection before deleting. Pages and their permissions are preserved.",
+      "transfer_warning": "Moved pages will inherit the permissions of the selected collection.",
+      "transfer_target_label": "Move pages to",
+      "transfer_target_placeholder": "Select a collection",
+      "delete_with_pages_title": "Delete collection with pages",
+      "delete_with_pages_description": "Permanently delete the collection and all its pages. This action can't be undone.",
+      "submit": "Delete collection"
+    },
+    "header": {
+      "add_page": "Add page"
+    },
+    "menu": {
+      "create_new_page": "Create new page",
+      "add_existing_page": "Add existing page",
+      "edit_collection": "Edit collection",
+      "collection_options": "Collection options"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Search for pages",
+      "success_message": "{count} {count, plural, one {page} other {pages}} added to collection.",
+      "error_message": "Pages could not be moved. Please try again.",
+      "no_pages_found": "No pages found matching your search",
+      "no_pages_available": "No pages available to move",
+      "submit": "Move"
+    },
+    "list": {
+      "invite_only": "Invite only",
+      "remove_error": "Failed to remove page from collection.",
+      "no_matching_pages": "No matching pages",
+      "remove_search_criteria": "Remove the search criteria to see all pages",
+      "remove_filters": "Remove the filters to see all pages",
+      "no_pages_title": "No pages yet",
+      "no_pages_description": "This collection doesn't have any pages right now.",
+      "untitled": "Untitled",
+      "restricted_access": "Restricted Access",
+      "collapse_page": "Collapse page",
+      "expand_page": "Expand page",
+      "page_actions": "Page actions",
+      "page_link_copied": "Page link copied to clipboard.",
+      "columns": {
+        "page_name": "Page name",
+        "owner": "Owner",
+        "nested_pages": "Nested pages",
+        "last_activity": "Last activity",
+        "actions": "Actions"
+      }
+    },
+    "toasts": {
+      "created": "Collection created successfully.",
+      "create_error": "Collection could not be created. Please try again.",
+      "renamed": "Collection renamed successfully.",
+      "rename_error": "Collection could not be updated. Please try again.",
+      "transferred_deleted": "Pages transferred and collection deleted.",
+      "deleted_with_pages": "Collection and its pages deleted.",
+      "delete_error": "Collection could not be deleted. Please try again.",
+      "target_required": "Please select a collection to move pages to.",
+      "create_page_error": "Page could not be created. Please try again.",
+      "create_page_in_collection_error": "Page could not be created or added to the collection. Please try again.",
+      "collection_link_copied": "Collection link copied to clipboard."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Upgrade to unlock Wiki",
+      "description": "Unlock public pages, version history, shared pages, real-time collaboration, and workspace pages for wikis, company-wide docs, and knowledge bases with Plane Pro.",
+      "upgrade_button": {
+        "text": "Upgrade"
+      },
+      "learn_more_button": {
+        "text": "Learn more"
+      },
+      "download_button": {
+        "text": "Download data",
+        "loading": "Downloading"
+      },
+      "tabs": {
+        "nested_pages": "Nested Pages",
+        "add_embeds": "Add embeds",
+        "publish_pages": "Publish pages",
+        "comments": "Comments"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Nested pages require a paid plan. Upgrade to unlock."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/work-item-type.json b/packages/i18n/src/locales/ka-ge/work-item-type.json
new file mode 100644
index 0000000..9690c8f
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Work item Types",
+    "label_lowercase": "work item types",
+    "settings": {
+      "description": "Customize and add your own properties to tailor it to your team's needs.",
+      "cant_delete_default_message": "This work item type cannot be deleted because it's set as the default for this project",
+      "set_as_default": "Set as default",
+      "cant_set_default_inactive_message": "Activate this type before setting it as default",
+      "set_default_confirmation": {
+        "title": "Set as default work item type",
+        "description": "Setting {name} as the default will import it to all projects in this workspace. All new work items will use this type by default.",
+        "confirm_button": "Set as default"
+      },
+      "properties": {
+        "title": "Properties",
+        "description": "Create and customize properties.",
+        "tooltip": "Each work item type comes with a default set of properties like Title, Description, Assignee, State, Priority, Start date, Due date, Module, Cycle etc. You can also customize and add your own properties to tailor it to your team's needs.",
+        "add_button": "Add new property",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Import from workspace"
+          }
+        },
+        "dropdown": {
+          "label": "Property type",
+          "placeholder": "Select type"
+        },
+        "property_type": {
+          "text": {
+            "label": "Text"
+          },
+          "number": {
+            "label": "Number"
+          },
+          "dropdown": {
+            "label": "Dropdown"
+          },
+          "boolean": {
+            "label": "Boolean"
+          },
+          "date": {
+            "label": "Date"
+          },
+          "member_picker": {
+            "label": "Member picker"
+          },
+          "formula": {
+            "label": "Formula"
+          }
+        },
+        "attributes": {
+          "label": "Attributes",
+          "text": {
+            "single_line": {
+              "label": "Single line"
+            },
+            "multi_line": {
+              "label": "Paragraph"
+            },
+            "readonly": {
+              "label": "Read only",
+              "header": "Read only data"
+            },
+            "invalid_text_format": {
+              "label": "Invalid text format"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Add number"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Single select"
+            },
+            "multi_select": {
+              "label": "Multi select"
+            },
+            "no_default_value": {
+              "label": "No default value"
+            }
+          },
+          "boolean": {
+            "label": "True | False",
+            "no_default": "No default value"
+          },
+          "option": {
+            "create_update": {
+              "label": "Options",
+              "form": {
+                "placeholder": "Add option",
+                "errors": {
+                  "name": {
+                    "required": "Option name is required.",
+                    "integrity": "Option with same name already exists."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Select option",
+                "multi": {
+                  "default": "Select options",
+                  "variable": "{count} options selected"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Success!",
+              "message": "Property {name} created successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to create property. Please try again!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Success!",
+              "message": "Property {name} updated successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to update property. Please try again!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Success!",
+              "message": "Property {name} deleted successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to delete property. Please try again!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} {name} property",
+            "success": {
+              "title": "Success!",
+              "message": "Property {name} {action} successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to {action} property. Please try again!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Create new custom property",
+            "update": "Update custom property"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Title"
+            },
+            "description": {
+              "placeholder": "Description"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "You must name your property.",
+              "max_length": "Property name should not exceed 255 characters."
+            },
+            "property_type": {
+              "required": "You must select a property type."
+            },
+            "options": {
+              "required": "You must add at least one option."
+            },
+            "formula": {
+              "required": "Formula expression is required.",
+              "invalid": "Invalid formula: {error}",
+              "circular_reference": "Circular reference detected. A formula cannot reference itself directly or indirectly.",
+              "invalid_reference": "Formula references non-existent property."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Formula field",
+          "tooltip": "Enter a formula using '{'Field Name'}' syntax. Supports +, -, *, /, & operators.",
+          "placeholder": "Write the formula",
+          "test_button": "Test",
+          "validating": "Validating",
+          "validation_success": "Formula is valid! Returns {resultType}",
+          "validation_success_with_refs": "Formula is valid! Returns {resultType} ({count} field(s) referenced)",
+          "error": {
+            "empty": "Please enter a formula",
+            "missing_context": "Missing workspace, project, or work item type context",
+            "validation_failed": "Validation failed"
+          },
+          "picker": {
+            "no_match": "No matching properties",
+            "no_available": "No available properties"
+          }
+        },
+        "enable_disable": {
+          "label": "Active",
+          "tooltip": {
+            "disabled": "Click to disable",
+            "enabled": "Click to enable"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Delete this property",
+          "description": "Deletion of properties may lead to loss of existing data.",
+          "secondary_description": "Do you want to disable the property instead?",
+          "primary_button": "{action}, delete it",
+          "secondary_button": "Yes, disable it"
+        },
+        "mandate_confirmation": {
+          "label": "Mandatory property",
+          "content": "There seems to be a default option for this property. Making the property mandatory will remove the default value and the users will have to add a value of their choice.",
+          "tooltip": {
+            "disabled": "This property type cannot be made mandatory",
+            "enabled": "Uncheck to mark the field as optional",
+            "checked": "Check to mark the field as mandatory"
+          }
+        },
+        "empty_state": {
+          "title": "Add custom properties",
+          "description": "New properties you add for this work item type will show here."
+        }
+      },
+      "types": {
+        "title": "Types",
+        "description": "Create and customize work item types with properties.",
+        "sort_options": {
+          "project_count": "Number of projects part of"
+        },
+        "filter_options": {
+          "show_active": "Show active",
+          "show_inactive": "Show inactive"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Create new",
+            "import_from_workspace": "Import from workspace"
+          },
+          "banner": {
+            "with_access": "Enable work item types to import types from workspace level",
+            "without_access": "Work item types are disabled. Contact workspace admin to enable them in workspace settings."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Custom properties",
+        "add_button": "Add properties",
+        "modal": {
+          "title": "Add properties",
+          "empty": {
+            "title": "No properties available",
+            "description": "All properties have already been linked to this type."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Unlink property",
+          "description": "Unlinking this property will permanently delete all its values across every work item using this type. This action cannot be undone.",
+          "input_label": "Type",
+          "input_label_suffix": "to continue:",
+          "confirm": "Unlink property",
+          "loading": "Unlinking"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Delete this type",
+        "description": "Deletion of types may lead to loss of existing data.",
+        "can_disable_warning": "Do you want to disable the type instead?",
+        "primary_button": "Yes, delete it",
+        "toast": {
+          "success": {
+            "title": "Success!",
+            "message": "Work item type deleted successfully."
+          },
+          "error": {
+            "title": "Error!",
+            "message": "Failed to delete work item type. Please try again!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Cannot delete default work item type",
+          "cannot_delete_work_item_type_with_associated_work_items": "Cannot delete work item type with associated work items"
+        }
+      }
+    },
+    "create": {
+      "title": "Create work item type",
+      "button": "Add work item type",
+      "toast": {
+        "success": {
+          "title": "Success!",
+          "message": "Work item type created successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": {
+            "default": "Failed to create work item type. Please try again!",
+            "conflict": "{name} type already exists. Choose a different name."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Update work item type",
+      "button": "Update work item type",
+      "toast": {
+        "success": {
+          "title": "Success!",
+          "message": "Work item type {name} updated successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": {
+            "default": "Failed to update work item type. Please try again!",
+            "conflict": "{name} type already exists. Choose a different name."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Give this work item type a unique name"
+        },
+        "description": {
+          "placeholder": "Describe what this work item type is meant for and when it's to be used."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} {name} work item type",
+        "success": {
+          "title": "Success!",
+          "message": "Work item type {name} {action} successfully."
+        },
+        "error": {
+          "title": "Error!",
+          "message": "Failed to {action} work item type. Please try again!"
+        }
+      },
+      "tooltip": "Click to {action}"
+    },
+    "change_confirmation": {
+      "title": "Change work item type?",
+      "description": "Changing the work item type may result in loss of custom property values that are specific to the current type. This action cannot be undone.",
+      "button": {
+        "loading": "Changing",
+        "default": "Change type"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Enable Work item Types",
+        "description": "Shape work items to your work with Work item types. Customize with icons, backgrounds, and properties and configure them for this project.",
+        "primary_button": {
+          "text": "Enable"
+        },
+        "confirmation": {
+          "title": "Once enabled, Work item Types can't be disabled.",
+          "description": "Plane's Work Item will become the default work item type for this project and will show up with its icon and background in this project.",
+          "button": {
+            "default": "Enable",
+            "loading": "Setting up"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Get Pro to enable Work item types.",
+        "description": "Shape work items to your work with Work item types. Customize with icons, backgrounds, and properties and configure them for this project.",
+        "primary_button": {
+          "text": "Get Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Upgrade to enable Work item types.",
+        "description": "Shape work items to your work with Work item types. Customize with icons, backgrounds, and properties and configure them for this project.",
+        "primary_button": {
+          "text": "Upgrade"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hierarchy",
+      "tab_label": "Hierarchy",
+      "description": "Set up hierarchy levels to organize your work. Each level defines a parent relationship with the item directly above it and child relationship with the item directly below it. ",
+      "sidebar_label": "Hierarchy",
+      "enable_control": {
+        "title": "Enable hierarchy",
+        "description": "Create parent-child relationships between different work item types.",
+        "tooltip": "You cannot disable hierarchy once it is enabled."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Define Work Item Types first to create a new hierarchy.",
+        "cta": "Work item types settings"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Drag and drop type to add a new hierarchy level",
+      "empty_level_placeholder": "Drag and drop a work item type to level {level}",
+      "drag_tooltip": "Drag to change level",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Set as default",
+          "toast": {
+            "loading": "Setting as default...",
+            "success": {
+              "title": "Success!",
+              "message": "Hierarchy level {level} set as default successfully."
+            },
+            "error": {
+              "title": "Error!",
+              "message": "Failed to set hierarchy level {level} as default. Please try again."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Moving {workItemTypeName} to level {level}...",
+        "success": {
+          "title": "Success!",
+          "message": "{workItemTypeName} moved to level {level} successfully."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Validation error!",
+      "content": {
+        "intro": "Work item type {workItemTypeName} has:",
+        "parent_items": "{count, plural, one {parent work item} other {parent work items}}",
+        "child_items": "{count, plural, one {sub-work item} other {sub-work items}}",
+        "parent_line_suffix_when_also_children": ", and ",
+        "footer": "This change will remove parent and child relationships from existing work items of {workItemTypeName} work item type."
+      },
+      "confirm_input": {
+        "label": "Type in \"Confirm\" to continue.",
+        "placeholder": "Confirm"
+      },
+      "error_toast": {
+        "title": "Error!",
+        "message": "Failed to break hierarchy. Please try again."
+      },
+      "confirm_button": {
+        "loading": "Applying",
+        "default": "Apply & Unlink"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Error!",
+        "message": "The selected work item type cannot be used to create a new work item since it breaks the hierarchy rules."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Error!",
+        "message": "Work item type cannot be updated since it breaks the hierarchy rules."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Hierarchy level",
+      "invalid_level_toast": {
+        "title": "Error!",
+        "message": "Work item type cannot be updated since it breaks the hierarchy rules."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/work-item.json b/packages/i18n/src/locales/ka-ge/work-item.json
new file mode 100644
index 0000000..d28ab08
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {სამუშაო ელემენტი} other {სამუშაო ელემენტები}}",
+    "all": "ყველა სამუშაო ელემენტი",
+    "edit": "სამუშაო ელემენტის რედაქტირება",
+    "title": {
+      "label": "სამუშაო ელემენტის სათაური",
+      "required": "სამუშაო ელემენტის სათაური სავალდებულოა."
+    },
+    "add": {
+      "press_enter": "დააჭირეთ 'Enter'-ს სხვა სამუშაო ელემენტის დასამატებლად",
+      "label": "სამუშაო ელემენტის დამატება",
+      "cycle": {
+        "failed": "სამუშაო ელემენტის ციკლში დამატება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა.",
+        "success": "{count, plural, one {სამუშაო ელემენტი} other {სამუშაო ელემენტები}} წარმატებით დაემატა ციკლში.",
+        "loading": "{count, plural, one {სამუშაო ელემენტი} other {სამუშაო ელემენტები}} ციკლში დამატება"
+      },
+      "assignee": "მინიჭებულის დამატება",
+      "start_date": "დაწყების თარიღის დამატება",
+      "due_date": "ვადის თარიღის დამატება",
+      "parent": "მშობელი სამუშაო ელემენტის დამატება",
+      "sub_issue": "ქვე-სამუშაო ელემენტის დამატება",
+      "dependency": "Add dependency",
+      "relation": "ურთიერთობის დამატება",
+      "link": "ბმულის დამატება",
+      "existing": "არსებული სამუშაო ელემენტის დამატება"
+    },
+    "remove": {
+      "label": "სამუშაო ელემენტის ამოღება",
+      "cycle": {
+        "loading": "სამუშაო ელემენტის ციკლიდან ამოღება",
+        "success": "სამუშაო ელემენტი წარმატებით ამოიღეს ციკლიდან.",
+        "failed": "სამუშაო ელემენტის ციკლიდან ამოღება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა."
+      },
+      "module": {
+        "loading": "სამუშაო ელემენტის მოდულიდან ამოღება",
+        "success": "სამუშაო ელემენტი წარმატებით ამოიღეს მოდულიდან.",
+        "failed": "სამუშაო ელემენტის მოდულიდან ამოღება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა."
+      },
+      "parent": {
+        "label": "მშობელი სამუშაო ელემენტის ამოღება"
+      }
+    },
+    "new": "ახალი სამუშაო ელემენტი",
+    "adding": "სამუშაო ელემენტის დამატება",
+    "create": {
+      "success": "სამუშაო ელემენტი წარმატებით შეიქმნა"
+    },
+    "priority": {
+      "urgent": "გადაუდებელი",
+      "high": "მაღალი",
+      "medium": "საშუალო",
+      "low": "დაბალი"
+    },
+    "display": {
+      "properties": {
+        "label": "ჩვენების თვისებები",
+        "id": "ID",
+        "issue_type": "სამუშაო ელემენტის ტიპი",
+        "sub_issue_count": "ქვე-სამუშაო ელემენტების რაოდენობა",
+        "attachment_count": "დანართების რაოდენობა",
+        "created_on": "შექმნილია",
+        "sub_issue": "ქვე-სამუშაო ელემენტი",
+        "work_item_count": "სამუშაო ელემენტების რაოდენობა"
+      },
+      "extra": {
+        "show_sub_issues": "ქვე-სამუშაო ელემენტების ჩვენება",
+        "show_empty_groups": "ცარიელი ჯგუფების ჩვენება"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "ეს განლაგება დალაგებულია",
+      "list": "სია",
+      "kanban": "დაფა",
+      "calendar": "კალენდარი",
+      "spreadsheet": "ცხრილი",
+      "gantt": "დროის ხაზი",
+      "title": {
+        "list": "სიის განლაგება",
+        "kanban": "დაფის განლაგება",
+        "calendar": "კალენდრის განლაგება",
+        "spreadsheet": "ცხრილის განლაგება",
+        "gantt": "დროის ხაზის განლაგება"
+      }
+    },
+    "states": {
+      "active": "აქტიური",
+      "backlog": "ჩამორჩენა"
+    },
+    "comments": {
+      "placeholder": "კომენტარის დამატება",
+      "switch": {
+        "private": "გადართვა პირად კომენტარზე",
+        "public": "გადართვა საჯარო კომენტარზე"
+      },
+      "create": {
+        "success": "კომენტარი წარმატებით შეიქმნა",
+        "error": "კომენტარის შექმნა ვერ მოხერხდა. გთხოვთ, სცადოთ მოგვიანებით."
+      },
+      "update": {
+        "success": "კომენტარი წარმატებით განახლდა",
+        "error": "კომენტარის განახლება ვერ მოხერხდა. გთხოვთ, სცადოთ მოგვიანებით."
+      },
+      "remove": {
+        "success": "კომენტარი წარმატებით წაიშალა",
+        "error": "კომენტარის წაშლა ვერ მოხერხდა. გთხოვთ, სცადოთ მოგვიანებით."
+      },
+      "upload": {
+        "error": "აქტივის ატვირთვა ვერ მოხერხდა. გთხოვთ, სცადოთ მოგვიანებით."
+      },
+      "copy_link": {
+        "success": "კომენტარის ბმული კოპირებულია ბუფერში",
+        "error": "კომენტარის ბმულის კოპირების შეცდომა. გთხოვთ, სცადოთ მოგვიანებით."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Add reply",
+          "placeholder": "Add reply"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Failed to fetch replies"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Reply created successfully"
+            },
+            "error": {
+              "message": "Failed to create reply"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Reply updated successfully"
+            },
+            "error": {
+              "message": "Failed to update reply"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Reply deleted successfully"
+            },
+            "error": {
+              "message": "Failed to delete reply"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "სამუშაო ელემენტი არ არსებობს",
+        "description": "თქვენ მიერ მოთხოვნილი სამუშაო ელემენტი არ არსებობს, დაარქივებულია ან წაშლილია.",
+        "primary_button": {
+          "text": "ნახეთ სხვა სამუშაო ელემენტები"
+        }
+      }
+    },
+    "sibling": {
+      "label": "და-ძმა სამუშაო ელემენტები"
+    },
+    "archive": {
+      "description": "მხოლოდ დასრულებული ან გაუქმებული\nსამუშაო ელემენტები შეიძლება დაარქივდეს",
+      "label": "სამუშაო ელემენტის არქივირება",
+      "confirm_message": "დარწმუნებული ხართ, რომ გსურთ სამუშაო ელემენტის არქივირება? ყველა დაარქივებული სამუშაო ელემენტი შეიძლება აღდგეს მოგვიანებით.",
+      "success": {
+        "label": "არქივირების წარმატება",
+        "message": "თქვენი არქივები შეგიძლიათ იპოვოთ პროექტის არქივებში."
+      },
+      "failed": {
+        "message": "სამუშაო ელემენტის არქივირება ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა."
+      },
+      "banner_message": "ეს სამუშაო ელემენტი დაარქივებულია. მის აღსადგენად ეწვიეთ არქივების სექციას.",
+      "go_to_archives": "არქივებზე გადასვლა"
+    },
+    "restore": {
+      "success": {
+        "title": "აღდგენის წარმატება",
+        "message": "თქვენი სამუშაო ელემენტი შეგიძლიათ იპოვოთ პროექტის სამუშაო ელემენტებში."
+      },
+      "failed": {
+        "message": "სამუშაო ელემენტის აღდგენა ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა."
+      }
+    },
+    "relation": {
+      "relates_to": "დაკავშირებულია",
+      "duplicate": "დუბლიკატია",
+      "blocked_by": "დაბლოკილია",
+      "blocking": "ბლოკავს",
+      "start_before": "Starts Before",
+      "start_after": "Starts After",
+      "finish_before": "Finishes Before",
+      "finish_after": "Finishes After",
+      "implements": "Implements",
+      "implemented_by": "Implemented By"
+    },
+    "copy_link": "სამუშაო ელემენტის ბმულის კოპირება",
+    "delete": {
+      "label": "სამუშაო ელემენტის წაშლა",
+      "error": "სამუშაო ელემენტის წაშლის შეცდომა"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "სამუშაო ელემენტი წარმატებით გამოწერილია",
+        "unsubscribed": "სამუშაო ელემენტის გამოწერა წარმატებით გაუქმებულია"
+      }
+    },
+    "select": {
+      "error": "გთხოვთ, აირჩიოთ მინიმუმ ერთი სამუშაო ელემენტი",
+      "empty": "სამუშაო ელემენტები არ არის არჩეული",
+      "add_selected": "არჩეული სამუშაო ელემენტების დამატება",
+      "select_all": "ყველას არჩევა",
+      "deselect_all": "ყველას გაუქმება"
+    },
+    "open_in_full_screen": "სამუშაო ელემენტის სრულ ეკრანზე გახსნა",
+    "duplicate": {
+      "modal": {
+        "title": "Make a copy to another project",
+        "description1": "This creates a copy of the work item.",
+        "description2": "All property data will be removed while duplicating.",
+        "placeholder": "Select a project"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Work item duplicated successfully"
+        },
+        "error": {
+          "message": "Failed to duplicate work item"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Link pages",
+      "show_wiki_pages": "Show Wiki pages",
+      "link_pages_to": "Link pages to",
+      "linked_pages": "Linked pages",
+      "no_description": "This is an empty page. Why don't you write something inside and see it show up here like this placeholder",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Pages updated",
+            "message": "Pages updated successfully"
+          },
+          "error": {
+            "title": "Pages update failed",
+            "message": "Pages update failed"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Page removed",
+            "message": "Page removed successfully"
+          },
+          "error": {
+            "title": "Page removal failed",
+            "message": "Page removal failed"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Click to upvote",
+      "click_to_downvote": "Click to downvote",
+      "click_to_view_upvotes": "Click to view upvotes",
+      "click_to_view_downvotes": "Click to view downvotes"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "ქვე-სამუშაო ელემენტი წარმატებით განახლდა",
+      "error": "ქვე-სამუშაო ელემენტის განახლების შეცდომა"
+    },
+    "remove": {
+      "success": "ქვე-სამუშაო ელემენტი წარმატებით ამოიღეს",
+      "error": "ქვე-სამუშაო ელემენტის ამოღების შეცდომა"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "თქვენ არ გაქვთ ქვე-სამუშაო ელემენტები, რომლებიც შეესაბამება გამოყენებულ ფილტრებს.",
+        "description": "ყველა ქვე-სამუშაო ელემენტის სანახავად, გაასუფთავეთ ყველა გამოყენებული ფილტრი.",
+        "action": "ფილტრების გასუფთავება"
+      },
+      "list_filters": {
+        "title": "თქვენ არ გაქვთ სამუშაო ელემენტები, რომლებიც შეესაბამება გამოყენებულ ფილტრებს.",
+        "description": "ყველა სამუშაო ელემენტის სანახავად, გაასუფთავეთ ყველა გამოყენებული ფილტრი.",
+        "action": "ფილტრების გასუფთავება"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "შესაბამისი სამუშაო ელემენტები არ მოიძებნა"
+      },
+      "no_issues": {
+        "title": "სამუშაო ელემენტები არ მოიძებნა"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "ჯერ კომენტარები არ არის",
+        "description": "კომენტარები შეიძლება გამოყენებულ იქნეს სამუშაო ელემენტების განხილვისა და შემდგომი თვალყურის დევნების სივრცედ"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Unable to archive work items",
+        "message": "Only work items belonging to Completed or Canceled state groups can be archived."
+      },
+      "invalid_issue_start_date": {
+        "title": "Unable to update work items",
+        "message": "Start date selected succeeds the due date for some work items. Ensure start date to be before the due date."
+      },
+      "invalid_issue_target_date": {
+        "title": "Unable to update work items",
+        "message": "Due date selected precedes the start date for some work items. Ensure due date to be after the start date."
+      },
+      "invalid_state_transition": {
+        "title": "Unable to update work items",
+        "message": "State change is not allowed for some work items. Ensure the state change is allowed."
+      }
+    },
+    "upgrade_banner": {
+      "message": "შეცვალეთ მდგომარეობა, პრიორიტეტი და სხვა რამდენიმე სამუშაო ელემენტისთვის ერთდროულად. საშუალოდ დაზოგეთ სამი წუთი თითოეულ ოპერაციაზე.",
+      "cta": "განახლება One-ზე"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Recurring work items",
+      "description": "Set your repeatable work once, and we’ll take care of the repeats. You’ll see everything right here when it’s time.",
+      "new_recurring_work_item": "New recurring work item",
+      "update_recurring_work_item": "Update recurring work item",
+      "form": {
+        "interval": {
+          "title": "Schedule",
+          "start_date": {
+            "validation": {
+              "required": "Start date is required"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Interval type is required"
+            }
+          }
+        },
+        "button": {
+          "create": "Create recurring work item",
+          "update": "Update recurring work item"
+        }
+      },
+      "create_button": {
+        "label": "Create recurring work item",
+        "no_permission": "Contact your project admin to create recurring work items"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Your work, on autopilot",
+        "description": "Set it once. We’ll bring it back when it’s due. Upgrade to Business to make recurring work feel effortless."
+      },
+      "no_templates": {
+        "button": "Create your first recurring work item"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Recurring work item created",
+          "message": "{name}, the recurring work item, is now available for your workspace."
+        },
+        "error": {
+          "title": "We couldn't create that recurring work item this time.",
+          "message": "Try saving your details again or copy them over to a new recurring work item, preferably in another tab."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Recurring work item changed",
+          "message": "{name}, the recurring work item, was changed."
+        },
+        "error": {
+          "title": "We couldn't save changes to this recurring work item.",
+          "message": "Try saving your details again or come back to this recurring work item later. If there's trouble still, reach out to us."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Recurring work item deleted",
+          "message": "{name}, the recurring work item, has now been deleted from your workspace."
+        },
+        "error": {
+          "title": "We couldn't delete that recurring work item this.",
+          "message": "Try deleting it again or come back to it later. If you can't delete it then, reach out to us."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Delete recurring work item",
+      "description": {
+        "prefix": "Are you sure you want to delete recurring work item-",
+        "suffix": "? All of the data related to the recurring work item will be permanently removed. This action cannot be undone."
+      }
+    }
+  },
+  "epic": {
+    "new": "ახალი ეპიკი",
+    "label": "{count, plural, one {ეპიკი} other {ეპიკები}}",
+    "adding": "ეპიკის დამატება",
+    "create": {
+      "success": "ეპიკი წარმატებით შეიქმნა"
+    },
+    "add": {
+      "label": "ეპიკის დამატება",
+      "press_enter": "დააჭირეთ 'Enter'-ს სხვა ეპიკის დასამატებლად"
+    },
+    "title": {
+      "label": "ეპიკის სათაური",
+      "required": "ეპიკის სათაური სავალდებულოა."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/workflow.json b/packages/i18n/src/locales/ka-ge/workflow.json
new file mode 100644
index 0000000..06a4ba5
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Allow new work items",
+      "work_item_creation_disable_tooltip": "Work item creation is disabled for this state",
+      "default_state": "Default state lets all members create new work items. This can't be changed",
+      "state_change_count": "{count, plural, one {1 permitted state change} other {{count} permitted state changes}}",
+      "movers_count": "{count, plural, one {1 listed reviewer} other {{count} listed reviewers}}",
+      "state_changes": {
+        "label": {
+          "default": "Add permitted state change",
+          "loading": "Adding permitted state change"
+        },
+        "move_to": "Change state to",
+        "movers": {
+          "label": "When reviewed by",
+          "tooltip": "Reviewers are people who are permitted to move work items from one state to another.",
+          "add": "Add reviewers"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "You can't move this work item here."
+    },
+    "workflow_enabled": {
+      "label": "State change"
+    },
+    "workflow_tree": {
+      "label": "For work items in",
+      "state_change_label": "can move it to"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Control the chaos of changes and reviews with Workflows.",
+        "description": "Set rules for where your work moves, by who, and when with Workflows in Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "View change history",
+      "reset_workflow": "Reset workflow"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Are you sure you want to reset this workflow?",
+        "description": "If you reset this workflow, all your state-change rules will be deleted and you will have to create them again to run them for this project."
+      },
+      "delete_state_change": {
+        "title": "Are you sure you want to delete this state-change rule?",
+        "description": "Once deleted, you can't undo this change and you will have to set the rule again if you want it running for this project."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} workflow",
+        "success": {
+          "title": "Success",
+          "message": "Workflow {action} successfully"
+        },
+        "error": {
+          "title": "Error",
+          "message": "Workflow could not be {action}. Please try again."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Success",
+          "message": "Workflow reset successfully"
+        },
+        "error": {
+          "title": "Error resetting workflow",
+          "message": "Workflow could not be reset. Please try again."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Error adding state change rule",
+          "message": "State change rule could not be added. Please try again."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Error modifying state change rule",
+          "message": "State change rule could not be modified. Please try again."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Error removing state change rule",
+          "message": "State change rule could not be removed. Please try again."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Error modifying state change rule reviewers",
+          "message": "State change rule reviewers could not be modified. Please try again."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/workspace-settings.json b/packages/i18n/src/locales/ka-ge/workspace-settings.json
new file mode 100644
index 0000000..31c23be
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "სამუშაო სივრცის პარამეტრები",
+    "page_label": "{workspace} - ზოგადი პარამეტრები",
+    "key_created": "გასაღები შეიქმნა",
+    "copy_key": "კოპირება და შენახვა ამ საიდუმლო გასაღების Plane Pages-ში. თქვენ ვერ ნახავთ ამ გასაღებს 'დახურვის' შემდეგ. გასაღების შემცველი CSV ფაილი ჩამოტვირთულია.",
+    "token_copied": "ტოკენი კოპირებულია ბუფერში.",
+    "settings": {
+      "general": {
+        "title": "ზოგადი",
+        "upload_logo": "ლოგოს ატვირთვა",
+        "edit_logo": "ლოგოს რედაქტირება",
+        "name": "სამუშაო სივრცის სახელი",
+        "company_size": "კომპანიის ზომა",
+        "url": "სამუშაო სივრცის URL",
+        "workspace_timezone": "Workspace Timezone",
+        "update_workspace": "სამუშაო სივრცის განახლება",
+        "delete_workspace": "ამ სამუშაო სივრცის წაშლა",
+        "delete_workspace_description": "სამუშაო სივრცის წაშლისას, სამუშაო სივრცეში არსებული ყველა მონაცემი და რესურსი სამუდამოდ წაიშლება და მათი აღდგენა შეუძლებელი იქნება.",
+        "delete_btn": "ამ სამუშაო სივრცის წაშლა",
+        "delete_modal": {
+          "title": "დარწმუნებული ხართ, რომ გსურთ ამ სამუშაო სივრცის წაშლა?",
+          "description": "თქვენ გაქვთ აქტიური საცდელი ერთ-ერთ ჩვენს ფასიან გეგმაზე. გთხოვთ, გააუქმეთ იგი ჯერ, რომ გააგრძელოთ.",
+          "dismiss": "გაუქმება",
+          "cancel": "საცდელის გაუქმება",
+          "success_title": "სამუშაო სივრცე წაიშალა.",
+          "success_message": "მალე გადახვალთ თქვენს პროფილის გვერდზე.",
+          "error_title": "ეს არ იმუშავა.",
+          "error_message": "გთხოვთ, სცადოთ ხელახლა."
+        },
+        "errors": {
+          "name": {
+            "required": "სახელი სავალდებულოა",
+            "max_length": "სამუშაო სივრცის სახელი არ უნდა აღემატებოდეს 80 სიმბოლოს"
+          },
+          "company_size": {
+            "required": "კომპანიის ზომა სავალდებულოა",
+            "select_a_range": "აირჩიეთ ორგანიზაციის ზომა"
+          }
+        }
+      },
+      "members": {
+        "title": "წევრები",
+        "add_member": "წევრის დამატება",
+        "pending_invites": "მომლოდინე მოწვევები",
+        "invitations_sent_successfully": "მოწვევები წარმატებით გაიგზავნა",
+        "leave_confirmation": "დარწმუნებული ხართ, რომ გსურთ სამუშაო სივრცის დატოვება? თქვენ აღარ გექნებათ წვდომა ამ სამუშაო სივრცეზე. ეს მოქმედება ვერ გაუქმდება.",
+        "details": {
+          "full_name": "სრული სახელი",
+          "display_name": "საჩვენებელი სახელი",
+          "email_address": "ელფოსტის მისამართი",
+          "account_type": "ანგარიშის ტიპი",
+          "authentication": "ავთენტიფიკაცია",
+          "joining_date": "შეერთების თარიღი"
+        },
+        "modal": {
+          "title": "მოწვიეთ ადამიანები თანამშრომლობისთვის",
+          "description": "მოწვიეთ ადამიანები თქვენს სამუშაო სივრცეში თანამშრომლობისთვის.",
+          "button": "მოწვევების გაგზავნა",
+          "button_loading": "მოწვევების გაგზავნა",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "მოწვევისთვის საჭიროა ელფოსტის მისამართი.",
+            "invalid": "ელფოსტა არასწორია"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "გადახდა და გეგმები",
+        "description": "აირჩიეთ თქვენი გეგმა, მართეთ გამოწერები და მარტივად განაახლეთ როგორც თქვენი საჭიროებები იზრდება.",
+        "title": "გადახდა და გეგმები",
+        "current_plan": "მიმდინარე გეგმა",
+        "free_plan": "თქვენ ამჟამად იყენებთ უფასო გეგმას",
+        "view_plans": "გეგმების ნახვა"
+      },
+      "exports": {
+        "heading": "ექსპორტები",
+        "description": "ექსპორტირეთ თქვენი პროექტის მონაცემები სხვადასხვა ფორმატში და წვდომა თქვენი ექსპორტის ისტორიას ჩამოტვირთვის ბმულებით.",
+        "title": "ექსპორტები",
+        "exporting": "ექსპორტირება",
+        "previous_exports": "წინა ექსპორტები",
+        "export_separate_files": "მონაცემების ექსპორტი ცალკეულ ფაილებში",
+        "exporting_projects": "პროექტის ექსპორტირება",
+        "format": "ფორმატი",
+        "filters_info": "Apply filters to export specific work items based on your criteria.",
+        "modal": {
+          "title": "ექსპორტი",
+          "toasts": {
+            "success": {
+              "title": "ექსპორტის წარმატება",
+              "message": "თქვენ შეგიძლიათ ჩამოტვირთოთ ექსპორტირებული {entity} წინა ექსპორტიდან."
+            },
+            "error": {
+              "title": "ექსპორტის წარუმატებლობა",
+              "message": "ექსპორტი წარუმატებელი იყო. გთხოვთ, სცადოთ ხელახლა."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "ვებჰუკები",
+        "description": "ავტომატიზირეთ შეტყობინებები გარე სერვისებზე, როდესაც პროექტის მოვლენები ხდება.",
+        "title": "ვებჰუკები",
+        "add_webhook": "ვებჰუკის დამატება",
+        "modal": {
+          "title": "ვებჰუკის შექმნა",
+          "details": "ვებჰუკის დეტალები",
+          "payload": "Payload URL",
+          "question": "რომელი მოვლენები გსურთ გააქტიუროთ ამ ვებჰუკისთვის?",
+          "error": "URL სავალდებულოა"
+        },
+        "secret_key": {
+          "title": "საიდუმლო გასაღები",
+          "message": "შექმენით ტოკენი ვებჰუკის payload-ში შესვლისთვის"
+        },
+        "options": {
+          "all": "გამომიგზავნეთ ყველაფერი",
+          "individual": "აირჩიეთ ინდივიდუალური მოვლენები"
+        },
+        "toasts": {
+          "created": {
+            "title": "ვებჰუკი შეიქმნა",
+            "message": "ვებჰუკი წარმატებით შეიქმნა"
+          },
+          "not_created": {
+            "title": "ვებჰუკი არ შეიქმნა",
+            "message": "ვებჰუკის შექმნა ვერ მოხერხდა"
+          },
+          "updated": {
+            "title": "ვებჰუკი განახლდა",
+            "message": "ვებჰუკი წარმატებით განახლდა"
+          },
+          "not_updated": {
+            "title": "ვებჰუკი არ განახლდა",
+            "message": "ვებჰუკის განახლება ვერ მოხერხდა"
+          },
+          "removed": {
+            "title": "ვებჰუკი ამოიღეს",
+            "message": "ვებჰუკი წარმატებით ამოიღეს"
+          },
+          "not_removed": {
+            "title": "ვებჰუკი არ ამოიღეს",
+            "message": "ვებჰუკის ამოღება ვერ მოხერხდა"
+          },
+          "secret_key_copied": {
+            "message": "საიდუმლო გასაღები კოპირებულია ბუფერში."
+          },
+          "secret_key_not_copied": {
+            "message": "საიდუმლო გასაღების კოპირების შეცდომა."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Access Tokens",
+        "description": "Generate secure API tokens to integrate your data with external systems and applications.",
+        "title": "პერსონალური წვდომის ტოკენები",
+        "add_token": "პერსონალური წვდომის ტოკენის დამატება",
+        "create_token": "ტოკენის შექმნა",
+        "never_expires": "არასდროს იწურება",
+        "generate_token": "ტოკენის გენერირება",
+        "generating": "გენერირება",
+        "delete": {
+          "title": "პერსონალური წვდომის ტოკენის წაშლა",
+          "description": "ნებისმიერი აპლიკაცია, რომელიც იყენებს ამ ტოკენს, აღარ ექნება წვდომა Plane-ის მონაცემებზე. ეს მოქმედება ვერ გაუქმდება.",
+          "success": {
+            "title": "წარმატება!",
+            "message": "ტოკენი წარმატებით წაიშალა"
+          },
+          "error": {
+            "title": "შეცდომა!",
+            "message": "ტოკენის წაშლა ვერ მოხერხდა"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integrations",
+        "heading": "Integrations",
+        "description": "Connect with popular tools and services to sync your work across your entire workflow ecosystem.",
+        "page_title": "Work with your Plane data in available apps or your own.",
+        "page_description": "View all the integrations in use by this workspace or you."
+      },
+      "imports": {
+        "title": "Imports",
+        "heading": "Imports",
+        "description": "Connect and import data from your existing project management tools to streamline your workflow integration."
+      },
+      "worklogs": {
+        "title": "Worklogs",
+        "heading": "Worklogs",
+        "description": "Download worklogs AKA timesheets for anyone in any project."
+      },
+      "group_syncing": {
+        "title": "Group syncing",
+        "heading": "Group syncing",
+        "description": "Link identity provider groups to projects and roles. User access updates automatically when group membership changes in your IdP, simplifying onboarding and offboarding.",
+        "enable": {
+          "title": "Enable group syncing",
+          "description": "Automatically add users to projects based on identity provider groups."
+        },
+        "config": {
+          "title": "Configure group sync",
+          "description": "Set up how identity provider groups are mapped to projects and roles.",
+          "sync_on_login": {
+            "title": "Sync on login",
+            "description": "Update group membership and project access when a user signs in."
+          },
+          "sync_offline": {
+            "title": "Offline sync",
+            "description": "Runs sync every six hours automatically, without waiting for users to log in."
+          },
+          "auto_remove": {
+            "title": "Auto remove",
+            "description": "Automatically remove users from projects when they no longer match the group."
+          },
+          "group_attribute_key": {
+            "title": "Group attribute key",
+            "description": "The identity provider attribute used to identify and sync user groups.",
+            "placeholder": "Groups"
+          }
+        },
+        "group_mapping": {
+          "title": "Group mapping",
+          "description": "Link identity provider groups to projects and roles.",
+          "button_text": "Add new group sync"
+        },
+        "toast": {
+          "updating": "Updating group syncing feature",
+          "success": "Group syncing feature updated successfully.",
+          "error": "Failed to update group syncing feature!"
+        },
+        "delete_modal": {
+          "title": "Delete group sync",
+          "content": "New users from this identity group will no longer be added to the project. Users already added will keep their current role."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "User group",
+            "required": "User group is required",
+            "placeholder": "Enter the IdP group names"
+          },
+          "project": {
+            "text": "Project",
+            "required": "Project is required",
+            "placeholder": "Select a project"
+          },
+          "default_role": {
+            "text": "Project role",
+            "required": "Project role is required",
+            "placeholder": "Select a project role"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identity",
+        "heading": "Identity",
+        "description": "Configure your domain and enable Single sign-on"
+      },
+      "project_states": {
+        "title": "Project states",
+        "heading": "See progress overview for all projects.",
+        "description": "Project States is a Plane-only feature for tracking progress of all your projects by any project property.",
+        "go_to_settings": "Go to settings"
+      },
+      "projects": {
+        "title": "Projects",
+        "description": "Manage project states, and enable project labels, and other configuration.",
+        "tabs": {
+          "states": "Project states",
+          "labels": "Project labels"
+        }
+      },
+      "templates": {
+        "title": "Templates",
+        "heading": "Templates",
+        "description": "Save 80% time spent on creating projects, work items, and pages when you use templates."
+      },
+      "relations": {
+        "title": "Relations",
+        "heading": "Relations",
+        "description": "Create and manage relation types that connect work items across your workspace."
+      },
+      "cancel_trial": {
+        "title": "Cancel your trial first.",
+        "description": "You have an active trial to one of our paid plans. Please cancel it first to proceed.",
+        "dismiss": "Dismiss",
+        "cancel": "Cancel trial",
+        "cancel_success_title": "Trial cancelled.",
+        "cancel_success_message": "You can now delete the workspace.",
+        "cancel_error_title": "That didn't work.",
+        "cancel_error_message": "Try again, please."
+      },
+      "applications": {
+        "internal": "Internal",
+        "title": "Applications",
+        "applicationId_copied": "Application ID copied to clipboard",
+        "clientId_copied": "Client ID copied to clipboard",
+        "clientSecret_copied": "Client Secret copied to clipboard",
+        "third_party_apps": "Third-party apps",
+        "your_apps": "Your apps",
+        "connect": "Connect",
+        "connected": "Connected",
+        "disconnect": "Disconnect",
+        "install": "Install",
+        "installed": "Installed",
+        "configure": "Configure",
+        "app_available": "You have made this app available to use with a Plane workspace",
+        "app_credentials_regenrated": {
+          "title": "App credentials successfully re-generated",
+          "description": "Replace the client secret everywhere it's used. The previous secret is no longer valid."
+        },
+        "app_created": {
+          "title": "App created successfully",
+          "description": "Use the credentials to install the app in a Plane workspace"
+        },
+        "installed_apps": "Installed apps",
+        "all_apps": "All apps",
+        "internal_apps": "Internal apps",
+        "app_name_title": "App Name",
+        "app_description_title": {
+          "label": "Long Description",
+          "placeholder": "Write a long description for marketplace. Press ‘/’ for commands."
+        },
+        "authorization_grant_type": {
+          "title": "Connection Type",
+          "description": "Choose if your app should be installed once for the workspace or let every user connect their own account"
+        },
+        "website": {
+          "title": "Website",
+          "description": "Link to your app's website.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "App Maker",
+          "description": "The person or organization creating the app."
+        },
+        "app_maker_error": "Maker name is required",
+        "setup_url": {
+          "label": "Setup URL",
+          "description": "Users will be redirected to this URL when they install the app.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "Webhook URL",
+          "description": "This is where we will send webhook events and updates from the workspaces where your app is installed.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Webhook Secret",
+          "description": "Secret used to verify incoming webhook requests.",
+          "placeholder": "Enter a random secret key"
+        },
+        "redirect_uris": {
+          "label": "Redirect URIs (space separated)",
+          "description": "Users will be redirected to this path after they have authenticated with Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Connect a Plane workspace to start using it",
+        "client_id_and_secret": "Client ID and Secret",
+        "client_id_and_secret_description": "Copy and save this secret key in Pages. You can't see this key again after you hit Close.",
+        "client_id_and_secret_download": "You can download a CSV with the key from here.",
+        "application_id": "Application ID",
+        "client_id": "Client ID",
+        "client_secret": "Client Secret",
+        "export_as_csv": "Export as CSV",
+        "slug_already_exists": "Slug already exists",
+        "failed_to_create_application": "Failed to create application",
+        "upload_logo": "Upload Logo",
+        "app_name_error": "App name is required",
+        "app_short_description_title": "Short Description",
+        "app_short_description_error": "App short description is required",
+        "app_description_error": "App description is required",
+        "app_slug_title": "App slug",
+        "app_slug_error": "App slug is required",
+        "invalid_website_error": "Invalid website",
+        "webhook_url_title": "Webhook URL",
+        "webhook_url_error": "Webhook URL is required",
+        "invalid_webhook_url_error": "Invalid webhook URL",
+        "redirect_uris_title": "Redirect URIs",
+        "redirect_uris_error": "Redirect URIs are required",
+        "invalid_redirect_uris_error": "Invalid redirect URIs",
+        "redirect_uris_description": "Enter space seperated URIs where the app will redirect to after the user e.g https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Authorized Javascript Origins",
+        "authorized_javascript_origins_error": "Authorized Javascript Origins are required",
+        "invalid_authorized_javascript_origins_error": "Invalid authorized Javascript Origins",
+        "authorized_javascript_origins_description": "Enter space seperated origins where the app will be allowed to make requests e.g app.com example.com",
+        "create_app": "Create app",
+        "update_app": "Update app",
+        "build_your_own_app": "Build your own app",
+        "edit_app_details": "Edit app details",
+        "regenerate_client_secret_description": "Regenerate the client secret. If you regenerate the secret, you can copy the key or download it to a CSV file right after.",
+        "regenerate_client_secret": "Regenerate client secret",
+        "regenerate_client_secret_confirm_title": "Sure you want to regenerate the client secret?",
+        "regenerate_client_secret_confirm_description": "App using this secret will stop working. You will need to update the secret in the app.",
+        "regenerate_client_secret_confirm_cancel": "Cancel",
+        "regenerate_client_secret_confirm_regenerate": "Regenerate",
+        "read_only_access_to_workspace": "Read-only access to your workspace",
+        "write_access_to_workspace": "Write access to your workspace",
+        "read_only_access_to_user_profile": "Read-only access to your user profile",
+        "write_access_to_user_profile": "Write access to your user profile",
+        "connect_app_to_workspace": "Connect {app} to your workspace {workspace}",
+        "user_permissions": "User permissions",
+        "user_permissions_description": "User permissions are used to grant access to the user's profile.",
+        "workspace_permissions": "Workspace permissions",
+        "workspace_permissions_description": "Workspace permissions are used to grant access to the workspace.",
+        "with_the_permissions": "with the permissions",
+        "app_consent_title": "{app} is requesting access to your Plane workspace and profile.",
+        "choose_workspace_to_connect_app_with": "Choose a workspace to connect the app with",
+        "app_consent_workspace_permissions_title": "{app} would like",
+        "app_consent_user_permissions_title": "{app} can also request a user's permission to the following resources. These permissions will be requested and authorized of and by a user only.",
+        "app_consent_accept_title": "By accepting, you",
+        "app_consent_accept_1": "Grant the app access to your Plane data wherever you can use the app in or outside Plane",
+        "app_consent_accept_2": "Agree to {app}'s Privacy Policy and Terms Of Use",
+        "accepting": "Accepting...",
+        "accept": "Accept",
+        "categories": "Categories",
+        "select_app_categories": "Select app categories",
+        "categories_title": "Categories",
+        "categories_error": "Categories are required",
+        "invalid_categories_error": "Invalid categories",
+        "categories_description": "Select the categories that best describe the app",
+        "supported_plans": "Supported Plans",
+        "supported_plans_description": "Select the workspace plans that can install this application. Leave empty to allow all plans.",
+        "select_plans": "Select Plans",
+        "privacy_policy_url_title": "Privacy Policy URL",
+        "privacy_policy_url_error": "Privacy Policy URL is required",
+        "invalid_privacy_policy_url_error": "Invalid privacy policy URL",
+        "terms_of_service_url_title": "Terms of Service URL",
+        "terms_of_service_url_error": "Terms of Service URL is required",
+        "invalid_terms_of_service_url_error": "Invalid terms of service URL",
+        "support_url_title": "Support URL",
+        "support_url_error": "Support URL is required",
+        "invalid_support_url_error": "Invalid support URL",
+        "video_url_title": "Video URL",
+        "video_url_error": "Video URL is required",
+        "invalid_video_url_error": "Invalid video URL",
+        "setup_url_error": "Setup URL is required",
+        "invalid_setup_url_error": "Invalid setup URL",
+        "configuration_url_title": "Configuration URL",
+        "configuration_url_error": "Configuration URL is required",
+        "invalid_configuration_url_error": "Invalid configuration URL",
+        "contact_email_title": "Contact Email",
+        "contact_email_error": "Contact Email is required",
+        "invalid_contact_email_error": "Invalid contact email",
+        "upload_attachments": "Upload Attachments",
+        "uploading_images": "Uploading {count} Image{count, plural, one {s} other {s}}",
+        "drop_images_here": "Drop images here",
+        "click_to_upload_images": "Click to upload images",
+        "invalid_file_or_exceeds_size_limit": "Invalid file or exceeds size limit ({size} MB)",
+        "uploading": "Uploading...",
+        "upload_and_save": "Upload & Save",
+        "app_consent_no_access_title": "Request to install",
+        "app_consent_no_access_description": "This app can only be installed after a workspace admin installs it. Contact your workspace admin to proceed.",
+        "app_consent_unapproved_title": "This app hasn't been reviewed or approved by Plane yet.",
+        "app_consent_unapproved_description": "Make sure you trust this app before connecting it to your workspace.",
+        "go_to_app": "Go to app",
+        "enable_app_mentions": "Enable App Mentions",
+        "enable_app_mentions_tooltip": "When this is enabled, Users can mention or assign Work Items to this application.",
+        "scopes": "Scopes",
+        "select_scopes": "Select Scopes",
+        "read_access_to": "Read-only access to",
+        "write_access_to": "Write access to",
+        "global_permission_expiration": "Global scopes are expiring soon. Use granular scopes instead. For example, use project:read instead of a global read.",
+        "selected_scopes": "{count} selected",
+        "scopes_and_permissions": "Scopes & Permissions",
+        "read": "Read",
+        "write": "Write",
+        "scope_description": {
+          "projects": "Access to projects, and all project related entities",
+          "wiki": "Access to wiki, and all wiki related entities",
+          "workspaces": "Access to workspaces, and all workspace related entities",
+          "stickies": "Access to stickies, and all sticky related entities",
+          "profile": "Access to user profile information",
+          "agents": "Access to agents, and all agent related entities",
+          "assets": "Access to assets, and all asset related entities"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "See your work get smarter and faster with AI that is natively connected to your work and knowledge base. "
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Scripts",
+        "new_script": "New Script",
+        "description": "Automate your workflows with custom scripts and automation rules."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "პერსონალური წვდომის ტოკენები არ არის შექმნილი",
+        "description": "Plane API-ები შეიძლება გამოყენებულ იქნას თქვენი მონაცემების ინტეგრაციისთვის გარე სისტემებთან. შექმენით ტოკენი დასაწყებად."
+      },
+      "webhooks": {
+        "title": "ვებჰუკები არ არის დამატებული",
+        "description": "შექმენით ვებჰუკები რეალურ დროში განახლებების მისაღებად და მოქმედებების ავტომატიზაციისთვის."
+      },
+      "exports": {
+        "title": "ჯერ ექსპორტები არ არის",
+        "description": "ნებისმიერ დროს როდესაც ექსპორტირებთ, თქვენ ასევე ექნებათ აქ კოპია საცნობაროდ."
+      },
+      "imports": {
+        "title": "ჯერ იმპორტები არ არის",
+        "description": "იპოვეთ ყველა თქვენი წინა იმპორტი აქ და ჩამოტვირთეთ ისინი."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ka-ge/workspace.json b/packages/i18n/src/locales/ka-ge/workspace.json
new file mode 100644
index 0000000..173dae5
--- /dev/null
+++ b/packages/i18n/src/locales/ka-ge/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "შექმენით თქვენი სამუშაო სივრცე",
+    "subheading": "Plane-ის გამოყენების დასაწყებად, თქვენ უნდა შექმნათ ან შეუერთდეთ სამუშაო სივრცეს.",
+    "form": {
+      "name": {
+        "label": "დაარქვით სახელი თქვენს სამუშაო სივრცეს",
+        "placeholder": "რაღაც ნაცნობი და ადვილად ამოსაცნობი ყოველთვის საუკეთესოა."
+      },
+      "url": {
+        "label": "დააყენეთ თქვენი სამუშაო სივრცის URL",
+        "placeholder": "ჩაწერეთ ან ჩასვით URL",
+        "edit_slug": "თქვენ შეგიძლიათ შეცვალოთ მხოლოდ URL-ის slug"
+      },
+      "organization_size": {
+        "label": "რამდენი ადამიანი გამოიყენებს ამ სამუშაო სივრცეს?",
+        "placeholder": "აირჩიეთ დიაპაზონი"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "მხოლოდ თქვენი ინსტანსის ადმინს შეუძლია სამუშაო სივრცეების შექმნა",
+        "description": "თუ იცით თქვენი ინსტანსის ადმინის ელფოსტა, დააწკაპუნეთ ქვემოთ ღილაკზე მათთან დასაკავშირებლად.",
+        "request_button": "მოთხოვნა ინსტანსის ადმინისგან"
+      },
+      "validation": {
+        "name_alphanumeric": "სამუშაო სივრცეების სახელები შეიძლება შეიცავდეს მხოლოდ (' '), ('-'), ('_') და ალფანუმერულ სიმბოლოებს.",
+        "name_length": "შეზღუდეთ სახელი 80 სიმბოლოთი.",
+        "url_alphanumeric": "URL-ები შეიძლება შეიცავდეს მხოლოდ ('-') და ალფანუმერულ სიმბოლოებს.",
+        "url_length": "შეზღუდეთ თქვენი URL 48 სიმბოლოთი.",
+        "url_already_taken": "სამუშაო სივრცის URL უკვე დაკავებულია!"
+      }
+    },
+    "request_email": {
+      "subject": "ახალი სამუშაო სივრცის მოთხოვნა",
+      "body": "გამარჯობა ინსტანსის ადმინ(ებ)ო,\n\nგთხოვთ, შექმნათ ახალი სამუშაო სივრცე URL-ით [/workspace-name] [სამუშაო სივრცის შექმნის მიზნისთვის].\n\nმადლობა,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "სამუშაო სივრცის შექმნა",
+      "loading": "სამუშაო სივრცის შექმნა"
+    },
+    "toast": {
+      "success": {
+        "title": "წარმატება",
+        "message": "სამუშაო სივრცე წარმატებით შეიქმნა"
+      },
+      "error": {
+        "title": "შეცდომა",
+        "message": "სამუშაო სივრცის შექმნა ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "თქვენი პროექტების, აქტივობის და მეტრიკების მიმოხილვა",
+        "description": "კეთილი იყოს თქვენი მობრძანება Plane-ში, ჩვენ გვიხარია რომ აქ ხართ. შექმენით თქვენი პირველი პროექტი და თვალყური ადევნეთ თქვენს სამუშაო ელემენტებს, და ეს გვერდი გადაიქცევა სივრცედ, რომელიც დაგეხმარებათ წინსვლაში. ადმინებიც იხილავენ ელემენტებს, რომლებიც ეხმარება მათ გუნდს წინსვლაში.",
+        "primary_button": {
+          "text": "შექმენით თქვენი პირველი პროექტი",
+          "comic": {
+            "title": "ყველაფერი იწყება პროექტით Plane-ში",
+            "description": "პროექტი შეიძლება იყოს პროდუქტის საგზაო რუკა, მარკეტინგული კამპანია ან ახალი მანქანის გაშვება."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "ანალიტიკა",
+    "page_label": "{workspace} - ანალიტიკა",
+    "open_tasks": "სულ ღია დავალებები",
+    "error": "მონაცემების მოპოვებისას მოხდა შეცდომა.",
+    "work_items_closed_in": "სამუშაო ელემენტები დახურულია",
+    "selected_projects": "არჩეული პროექტები",
+    "total_members": "სულ წევრები",
+    "total_cycles": "სულ ციკლები",
+    "total_modules": "სულ მოდულები",
+    "pending_work_items": {
+      "title": "მომლოდინე სამუშაო ელემენტები",
+      "empty_state": "მომლოდინე სამუშაო ელემენტების ანალიზი თანამშრომლების მიხედვით აქ გამოჩნდება."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "სამუშაო ელემენტები დახურული წელიწადში",
+      "empty_state": "დახურეთ სამუშაო ელემენტები, რათა ნახოთ ანალიზი გრაფის ფორმით."
+    },
+    "most_work_items_created": {
+      "title": "ყველაზე მეტი სამუშაო ელემენტი შექმნილი",
+      "empty_state": "თანამშრომლები და მათ მიერ შექმნილი სამუშაო ელემენტების რაოდენობა აქ გამოჩნდება."
+    },
+    "most_work_items_closed": {
+      "title": "ყველაზე მეტი სამუშაო ელემენტი დახურული",
+      "empty_state": "თანამშრომლები და მათ მიერ დახურული სამუშაო ელემენტების რაოდენობა აქ გამოჩნდება."
+    },
+    "tabs": {
+      "scope_and_demand": "მოცულობა და მოთხოვნა",
+      "custom": "მორგებული ანალიტიკა"
+    },
+    "total": "სულ {entity}",
+    "started_work_items": "დაწყებული {entity}",
+    "backlog_work_items": "ჩამორჩენილი {entity}",
+    "un_started_work_items": "დაუწყებელი {entity}",
+    "completed_work_items": "დასრულებული {entity}",
+    "project_insights": "პროექტის ინსაითები",
+    "summary_of_projects": "პროექტების შეჯამება",
+    "all_projects": "ყველა პროექტი",
+    "trend_on_charts": "ტრენდი გრაფებზე",
+    "active_projects": "აქტიური პროექტები",
+    "customized_insights": "მორგებული ინსაითები",
+    "created_vs_resolved": "შექმნილი vs გადაჭრილი",
+    "empty_state": {
+      "project_insights": {
+        "title": "ჯერ მონაცემები არ არის",
+        "description": "თქვენთვის მინიჭებული სამუშაო ელემენტები, მდგომარეობის მიხედვით, აქ გამოჩნდება."
+      },
+      "created_vs_resolved": {
+        "title": "ჯერ მონაცემები არ არის",
+        "description": "დროთა განმავლობაში შექმნილი და გადაჭრილი სამუშაო ელემენტები აქ გამოჩნდება."
+      },
+      "customized_insights": {
+        "title": "ჯერ მონაცემები არ არის",
+        "description": "თქვენთვის მინიჭებული სამუშაო ელემენტები, მდგომარეობის მიხედვით, აქ გამოჩნდება."
+      },
+      "general": {
+        "title": "თვალყური ადევნეთ პროგრესს, დატვირთვას და განაწილებას. აღმოაჩინეთ ტრენდები, ამოიღეთ ბლოკერები და გააჩქარეთ სამუშაო",
+        "description": "ნახეთ მოცულობა მოთხოვნის წინააღმდეგ, შეფასებები და მოცულობის ზრდა. მიიღეთ შესრულება გუნდის წევრების და გუნდების მიხედვით, და დარწმუნდით, რომ თქვენი პროექტი დროულად მიმდინარეობს.",
+        "primary_button": {
+          "text": "დაიწყეთ თქვენი პირველი პროექტი",
+          "comic": {
+            "title": "ანალიტიკა საუკეთესოდ მუშაობს ციკლებით + მოდულებით",
+            "description": "ჯერ, დაგეგმეთ თქვენი სამუშაო ელემენტები ციკლებში და, თუ შეძლებთ, დააჯგუფეთ სამუშაო ელემენტები, რომლებიც ერთ ციკლზე მეტია, მოდულებში. ნახეთ ორივე მარცხენა ნავიგაციაში."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "No data yet",
+        "description": "Cycle progress analytics will appear here. Add work items to cycles to start tracking progress."
+      },
+      "module_progress": {
+        "title": "No data yet",
+        "description": "Module progress analytics will appear here. Add work items to modules to start tracking progress."
+      },
+      "intake_trends": {
+        "title": "No data yet",
+        "description": "Intake trends analytics will appear here. Add work items to intake to start tracking trends."
+      }
+    },
+    "upgrade_to_plan": "Upgrade to {plan} to unlock {tab}",
+    "workitem_resolved_vs_pending": "Work items resolved vs pending",
+    "projects_by_status": "Projects by status",
+    "active_users": "Active users",
+    "intake_trends": "Intake Trends"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {პროექტი} other {პროექტები}}",
+    "create": {
+      "label": "პროექტის დამატება"
+    },
+    "network": {
+      "label": "ქსელი",
+      "private": {
+        "title": "პირადი",
+        "description": "ხელმისაწვდომია მხოლოდ მოწვევით"
+      },
+      "public": {
+        "title": "საჯარო",
+        "description": "სამუშაო სივრცეში ნებისმიერს, გარდა სტუმრებისა, შეუძლია შეერთება"
+      }
+    },
+    "error": {
+      "permission": "თქვენ არ გაქვთ ამ მოქმედების შესრულების უფლება.",
+      "cycle_delete": "ციკლის წაშლა ვერ მოხერხდა",
+      "module_delete": "მოდულის წაშლა ვერ მოხერხდა",
+      "issue_delete": "სამუშაო ელემენტის წაშლა ვერ მოხერხდა"
+    },
+    "state": {
+      "backlog": "ჩამორჩენა",
+      "unstarted": "დაუწყებელი",
+      "started": "დაწყებული",
+      "completed": "დასრულებული",
+      "cancelled": "გაუქმებული"
+    },
+    "sort": {
+      "manual": "ხელით",
+      "name": "სახელი",
+      "created_at": "შექმნის თარიღი",
+      "members_length": "წევრების რაოდენობა"
+    },
+    "scope": {
+      "my_projects": "ჩემი პროექტები",
+      "archived_projects": "დაარქივებული პროექტები"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# თვე} other{# თვე}}",
+      "days_count": "{days, plural, one{# day} other{# days}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "აქტიური პროექტები არ არის",
+        "description": "იფიქრეთ თითოეულ პროექტზე, როგორც მშობელზე მიზანზე ორიენტირებული სამუშაოსთვის. პროექტები არის ადგილი, სადაც სამუშაოები, ციკლები და მოდულები ცხოვრობენ და, თქვენს კოლეგებთან ერთად, დაგეხმარებათ მიზნის მიღწევაში. შექმენით ახალი პროექტი ან გაფილტრეთ დაარქივებული პროექტები.",
+        "primary_button": {
+          "text": "დაიწყეთ თქვენი პირველი პროექტი",
+          "comic": {
+            "title": "ყველაფერი იწყება პროექტით Plane-ში",
+            "description": "პროექტი შეიძლება იყოს პროდუქტის საგზაო რუკა, მარკეტინგული კამპანია ან ახალი მანქანის გაშვება."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "პროექტი არ არის",
+        "description": "სამუშაო ელემენტების შესაქმნელად ან თქვენი სამუშაოს მართვისთვის, თქვენ უნდა შექმნათ პროექტი ან იყოთ ერთ-ერთის წევრი.",
+        "primary_button": {
+          "text": "დაიწყეთ თქვენი პირველი პროექტი",
+          "comic": {
+            "title": "ყველაფერი იწყება პროექტით Plane-ში",
+            "description": "პროექტი შეიძლება იყოს პროდუქტის საგზაო რუკა, მარკეტინგული კამპანია ან ახალი მანქანის გაშვება."
+          }
+        }
+      },
+      "filter": {
+        "title": "შესაბამისი პროექტები არ მოიძებნა",
+        "description": "შესაბამისი კრიტერიუმებით პროექტები არ მოიძებნა. \n შექმენით ახალი პროექტი ნაცვლად."
+      },
+      "search": {
+        "description": "შესაბამისი კრიტერიუმებით პროექტები არ მოიძებნა.\nშექმენით ახალი პროექტი ნაცვლად"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "ხედის დამატება",
+    "empty_state": {
+      "all-issues": {
+        "title": "პროექტში სამუშაო ელემენტები არ არის",
+        "description": "პირველი პროექტი დასრულებულია! ახლა, გაყავით თქვენი სამუშაო თვალყურის დევნებად ნაწილებად სამუშაო ელემენტებით. მეტი ინფორმაცია Plane-ში. დავიწყოთ!",
+        "primary_button": {
+          "text": "ახალი სამუშაო ელემენტის შექმნა"
+        }
+      },
+      "assigned": {
+        "title": "ჯერ სამუშაო ელემენტები არ არის",
+        "description": "თქვენთვის მინიჭებული სამუშაო ელემენტები შეგიძლიათ თვალყური ადევნოთ აქედან.",
+        "primary_button": {
+          "text": "ახალი სამუშაო ელემენტის შექმნა"
+        }
+      },
+      "created": {
+        "title": "ჯერ სამუშაო ელემენტები არ არის",
+        "description": "თქვენ მიერ შექმნილი ყველა სამუშაო ელემენტი აქ მოდის, თვალყური ადევნეთ მათ პირდაპირ აქ.",
+        "primary_button": {
+          "text": "ახალი სამუშაო ელემენტის შექმნა"
+        }
+      },
+      "subscribed": {
+        "title": "ჯერ სამუშაო ელემენტები არ არის",
+        "description": "გამოიწერეთ თქვენთვის საინტერესო სამუშაო ელემენტები, თვალყური ადევნეთ ყველას აქ."
+      },
+      "custom-view": {
+        "title": "ჯერ სამუშაო ელემენტები არ არის",
+        "description": "ფილტრებზე შესაბამისი სამუშაო ელემენტები, თვალყური ადევნეთ ყველას აქ."
+      }
+    },
+    "delete_view": {
+      "title": "Are you sure you want to delete this view?",
+      "content": "If you confirm, all the sort, filter, and display options + the layout you have chosen for this view will be permanently deleted without any way to restore them."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "სამუშაო ელემენტის მონახაზი",
+    "empty_state": {
+      "title": "ნახევრად დაწერილი სამუშაო ელემენტები, და მალე, კომენტარები აქ გამოჩნდება.",
+      "description": "ამის საცდელად, დაიწყეთ სამუშაო ელემენტის დამატება და დატოვეთ იგი შუაში ან შექმენით თქვენი პირველი მონახაზი ქვემოთ. 😉",
+      "primary_button": {
+        "text": "შექმენით თქვენი პირველი მონახაზი"
+      }
+    },
+    "delete_modal": {
+      "title": "მონახაზის წაშლა",
+      "description": "დარწმუნებული ხართ, რომ გსურთ ამ მონახაზის წაშლა? ეს ვერ გაუქმდება."
+    },
+    "toasts": {
+      "created": {
+        "success": "მონახაზი შეიქმნა",
+        "error": "სამუშაო ელემენტის შექმნა ვერ მოხერხდა. გთხოვთ, სცადოთ ხელახლა."
+      },
+      "deleted": {
+        "success": "მონახაზი წაშლილია"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Write a note, a doc, or a full knowledge base. Get Galileo, Plane's AI assistant, to help you get started",
+        "description": "Pages are thoughts potting space in Plane. Take down meeting notes, format them easily, embed work items, lay them out using a library of components, and keep them all in your project's context. To make short work of any doc, invoke Galileo, Plane's AI, with a shortcut or the click of a button.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "private": {
+        "title": "No private pages yet",
+        "description": "Keep your private thoughts here. When you're ready to share, the team's just a click away.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "public": {
+        "title": "No workspace pages yet",
+        "description": "See pages shared with everyone in your workspace right here.",
+        "primary_button": {
+          "text": "Create your first page"
+        }
+      },
+      "archived": {
+        "title": "No archived pages yet",
+        "description": "Archive pages not on your radar. Access them here when needed."
+      },
+      "shared": {
+        "title": "No shared pages yet",
+        "description": "Pages that others have shared with you will appear here."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "No active cycles",
+        "description": "Cycles of your projects that includes any period that encompasses today's date within its range. Find the progress and details of all your active cycle here."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Import Members from CSV",
+      "description": "Upload a CSV with columns: Email, Display Name, First Name, Last Name, Role (5, 15, or 20)",
+      "dropzone": {
+        "active": "Drop CSV file here",
+        "inactive": "Drag & drop or click to upload",
+        "file_type": "Only .csv files supported"
+      },
+      "buttons": {
+        "cancel": "Cancel",
+        "import": "Import",
+        "try_again": "Try Again",
+        "close": "Close",
+        "done": "Done"
+      },
+      "progress": {
+        "uploading": "Uploading...",
+        "importing": "Importing..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Import Failed",
+          "complete": "Import Complete"
+        },
+        "message": {
+          "seat_limit": "Unable to import members due to seat limit restrictions.",
+          "success": "Successfully added {count} member{plural} to the workspace.",
+          "no_imports": "No members were imported from the CSV file."
+        },
+        "stats": {
+          "successful": "Successful",
+          "failed": "Failed"
+        },
+        "download_errors": "Download errors"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Invalid file",
+          "message": "Only CSV files are supported."
+        },
+        "import_failed": {
+          "title": "Import failed",
+          "message": "Something went wrong."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/accessibility.json b/packages/i18n/src/locales/ko/accessibility.json
new file mode 100644
index 0000000..298a7e1
--- /dev/null
+++ b/packages/i18n/src/locales/ko/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "워크스페이스 로고",
+      "open_workspace_switcher": "워크스페이스 전환기 열기",
+      "open_user_menu": "사용자 메뉴 열기",
+      "open_command_palette": "명령 팔레트 열기",
+      "open_extended_sidebar": "확장된 사이드바 열기",
+      "close_extended_sidebar": "확장된 사이드바 닫기",
+      "create_favorites_folder": "즐겨찾기 폴더 생성",
+      "open_folder": "폴더 열기",
+      "close_folder": "폴더 닫기",
+      "open_favorites_menu": "즐겨찾기 메뉴 열기",
+      "close_favorites_menu": "즐겨찾기 메뉴 닫기",
+      "enter_folder_name": "폴더 이름 입력",
+      "create_new_project": "새 프로젝트 생성",
+      "open_projects_menu": "프로젝트 메뉴 열기",
+      "close_projects_menu": "프로젝트 메뉴 닫기",
+      "toggle_quick_actions_menu": "빠른 작업 메뉴 토글",
+      "open_project_menu": "프로젝트 메뉴 열기",
+      "close_project_menu": "프로젝트 메뉴 닫기",
+      "collapse_sidebar": "사이드바 축소",
+      "expand_sidebar": "사이드바 확장",
+      "edition_badge": "유료 플랜 모달 열기"
+    },
+    "auth_forms": {
+      "clear_email": "이메일 지우기",
+      "show_password": "비밀번호 표시",
+      "hide_password": "비밀번호 숨기기",
+      "close_alert": "알림 닫기",
+      "close_popover": "팝오버 닫기"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/auth.json b/packages/i18n/src/locales/ko/auth.json
new file mode 100644
index 0000000..812d617
--- /dev/null
+++ b/packages/i18n/src/locales/ko/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "신원",
+    "description": "단일 로그인을 포함한 보안 기능에 액세스하려면 도메인을 구성하세요.",
+    "domain_management": {
+      "header": "도메인 관리",
+      "verified_domains": {
+        "header": "확인된 도메인",
+        "description": "단일 로그인을 활성화하려면 이메일 도메인의 소유권을 확인하세요.",
+        "button_text": "도메인 추가",
+        "list": {
+          "domain_name": "도메인 이름",
+          "status": "상태",
+          "status_verified": "확인됨",
+          "status_failed": "실패",
+          "status_pending": "대기 중"
+        },
+        "add_domain": {
+          "title": "도메인 추가",
+          "description": "SSO를 구성하고 확인하기 위해 도메인을 추가하세요.",
+          "form": {
+            "domain_label": "도메인",
+            "domain_placeholder": "plane.so",
+            "domain_required": "도메인이 필요합니다",
+            "domain_invalid": "유효한 도메인 이름을 입력하세요 (예: plane.so)"
+          },
+          "primary_button_text": "도메인 추가",
+          "primary_button_loading_text": "추가 중",
+          "toast": {
+            "success_title": "성공!",
+            "success_message": "도메인이 성공적으로 추가되었습니다. DNS TXT 레코드를 추가하여 확인하세요.",
+            "error_message": "도메인 추가에 실패했습니다. 다시 시도해 주세요."
+          }
+        },
+        "verify_domain": {
+          "title": "도메인 확인",
+          "description": "다음 단계에 따라 도메인을 확인하세요.",
+          "instructions": {
+            "label": "지침",
+            "step_1": "도메인 호스트의 DNS 설정으로 이동하세요.",
+            "step_2": {
+              "part_1": "",
+              "part_2": "TXT 레코드",
+              "part_3": "를 만들고 아래에 제공된 전체 레코드 값을 붙여넣으세요."
+            },
+            "step_3": "이 업데이트는 일반적으로 몇 분이 걸리지만 완료하는 데 최대 72시간이 걸릴 수 있습니다.",
+            "step_4": "DNS 레코드가 업데이트되면 \"도메인 확인\"을 클릭하여 확인하세요."
+          },
+          "verification_code_label": "TXT 레코드 값",
+          "verification_code_description": "이 레코드를 DNS 설정에 추가하세요",
+          "domain_label": "도메인",
+          "primary_button_text": "도메인 확인",
+          "primary_button_loading_text": "확인 중",
+          "secondary_button_text": "나중에 하기",
+          "toast": {
+            "success_title": "성공!",
+            "success_message": "도메인이 성공적으로 확인되었습니다.",
+            "error_message": "도메인 확인에 실패했습니다. 다시 시도해 주세요."
+          }
+        },
+        "delete_domain": {
+          "title": "도메인 삭제",
+          "description": {
+            "prefix": "정말로 삭제하시겠습니까",
+            "suffix": "? 이 작업은 취소할 수 없습니다."
+          },
+          "primary_button_text": "삭제",
+          "primary_button_loading_text": "삭제 중",
+          "secondary_button_text": "취소",
+          "toast": {
+            "success_title": "성공!",
+            "success_message": "도메인이 성공적으로 삭제되었습니다.",
+            "error_message": "도메인 삭제에 실패했습니다. 다시 시도해 주세요."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "단일 로그인",
+      "disabled_message": "SSO를 구성하려면 확인된 도메인을 추가하세요",
+      "configure": {
+        "create": "구성",
+        "update": "편집"
+      },
+      "switch_alert_modal": {
+        "title": "SSO 방법을 {newProviderShortName}로 전환하시겠습니까?",
+        "content": "{newProviderLongName}({newProviderShortName})을(를) 활성화하려고 합니다. 이 작업은 {activeProviderLongName}({activeProviderShortName})을(를) 자동으로 비활성화합니다. {activeProviderShortName}을(를) 통해 로그인하려는 사용자는 새 방법으로 전환할 때까지 플랫폼에 액세스할 수 없습니다. 계속하시겠습니까?",
+        "primary_button_text": "전환",
+        "primary_button_text_loading": "전환 중",
+        "secondary_button_text": "취소"
+      },
+      "form_section": {
+        "title": "{workspaceName}에 대한 IdP 제공 세부 정보"
+      },
+      "form_action_buttons": {
+        "saving": "저장 중",
+        "save_changes": "변경 사항 저장",
+        "configure_only": "구성만",
+        "configure_and_enable": "구성 및 활성화",
+        "default": "저장"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName}이(가) IdP에 제공하는 세부 정보",
+        "button_text": "설정 세부 정보 가져오기"
+      },
+      "saml": {
+        "header": "SAML 활성화",
+        "description": "SAML 신원 공급자를 구성하여 단일 로그인을 활성화하세요.",
+        "configure": {
+          "title": "SAML 활성화",
+          "description": "단일 로그인을 포함한 보안 기능에 액세스하려면 이메일 도메인의 소유권을 확인하세요.",
+          "toast": {
+            "success_title": "성공!",
+            "create_success_message": "SAML 공급자가 성공적으로 생성되었습니다.",
+            "update_success_message": "SAML 공급자가 성공적으로 업데이트되었습니다.",
+            "error_title": "오류!",
+            "error_message": "SAML 공급자 저장에 실패했습니다. 다시 시도해 주세요."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "웹 세부 정보",
+            "entity_id": {
+              "label": "엔티티 ID | 대상 | 메타데이터 정보",
+              "description": "이 Plane 앱을 IdP의 승인된 서비스로 식별하는 메타데이터의 이 부분을 생성합니다."
+            },
+            "callback_url": {
+              "label": "단일 로그인 URL",
+              "description": "이를 생성합니다. IdP의 로그인 리디렉션 URL 필드에 추가하세요."
+            },
+            "logout_url": {
+              "label": "단일 로그아웃 URL",
+              "description": "이를 생성합니다. IdP의 단일 로그아웃 리디렉션 URL 필드에 추가하세요."
+            }
+          },
+          "mobile_details": {
+            "header": "모바일 세부 정보",
+            "entity_id": {
+              "label": "엔티티 ID | 대상 | 메타데이터 정보",
+              "description": "이 Plane 앱을 IdP의 승인된 서비스로 식별하는 메타데이터의 이 부분을 생성합니다."
+            },
+            "callback_url": {
+              "label": "단일 로그인 URL",
+              "description": "이를 생성합니다. IdP의 로그인 리디렉션 URL 필드에 추가하세요."
+            },
+            "logout_url": {
+              "label": "단일 로그아웃 URL",
+              "description": "이를 생성합니다. IdP의 로그아웃 리디렉션 URL 필드에 추가하세요."
+            }
+          },
+          "mapping_table": {
+            "header": "매핑 세부 정보",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "OIDC 활성화",
+        "description": "OIDC 신원 공급자를 구성하여 단일 로그인을 활성화하세요.",
+        "configure": {
+          "title": "OIDC 활성화",
+          "description": "단일 로그인을 포함한 보안 기능에 액세스하려면 이메일 도메인의 소유권을 확인하세요.",
+          "toast": {
+            "success_title": "성공!",
+            "create_success_message": "OIDC 공급자가 성공적으로 생성되었습니다.",
+            "update_success_message": "OIDC 공급자가 성공적으로 업데이트되었습니다.",
+            "error_title": "오류!",
+            "error_message": "OIDC 공급자 저장에 실패했습니다. 다시 시도해 주세요."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "웹 세부 정보",
+            "origin_url": {
+              "label": "원본 URL",
+              "description": "이 Plane 앱에 대해 이를 생성합니다. IdP의 해당 필드에 신뢰할 수 있는 원본으로 추가하세요."
+            },
+            "callback_url": {
+              "label": "리디렉션 URL",
+              "description": "이를 생성합니다. IdP의 로그인 리디렉션 URL 필드에 추가하세요."
+            },
+            "logout_url": {
+              "label": "로그아웃 URL",
+              "description": "이를 생성합니다. IdP의 로그아웃 리디렉션 URL 필드에 추가하세요."
+            }
+          },
+          "mobile_details": {
+            "header": "모바일 세부 정보",
+            "origin_url": {
+              "label": "원본 URL",
+              "description": "이 Plane 앱에 대해 이를 생성합니다. IdP의 해당 필드에 신뢰할 수 있는 원본으로 추가하세요."
+            },
+            "callback_url": {
+              "label": "리디렉션 URL",
+              "description": "이를 생성합니다. IdP의 로그인 리디렉션 URL 필드에 추가하세요."
+            },
+            "logout_url": {
+              "label": "로그아웃 URL",
+              "description": "이를 생성합니다. IdP의 로그아웃 리디렉션 URL 필드에 추가하세요."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "이메일",
+        "placeholder": "name@company.com",
+        "errors": {
+          "required": "이메일이 필요합니다",
+          "invalid": "유효하지 않은 이메일입니다"
+        }
+      },
+      "password": {
+        "label": "비밀번호",
+        "set_password": "비밀번호 설정",
+        "placeholder": "비밀번호 입력",
+        "confirm_password": {
+          "label": "비밀번호 확인",
+          "placeholder": "비밀번호 확인"
+        },
+        "current_password": {
+          "label": "현재 비밀번호"
+        },
+        "new_password": {
+          "label": "새 비밀번호",
+          "placeholder": "새 비밀번호 입력"
+        },
+        "change_password": {
+          "label": {
+            "default": "비밀번호 변경",
+            "submitting": "비밀번호 변경 중"
+          }
+        },
+        "errors": {
+          "match": "비밀번호가 일치하지 않습니다",
+          "empty": "비밀번호를 입력해주세요",
+          "length": "비밀번호는 8자 이상이어야 합니다",
+          "strength": {
+            "weak": "비밀번호가 약합니다",
+            "strong": "비밀번호가 강합니다"
+          }
+        },
+        "submit": "비밀번호 설정",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "성공!",
+              "message": "비밀번호가 성공적으로 변경되었습니다."
+            },
+            "error": {
+              "title": "오류!",
+              "message": "문제가 발생했습니다. 다시 시도해주세요."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "고유 코드",
+        "placeholder": "123456",
+        "paste_code": "이메일로 전송된 코드를 붙여넣기",
+        "requesting_new_code": "새 코드 요청 중",
+        "sending_code": "코드 전송 중"
+      },
+      "already_have_an_account": "이미 계정이 있으신가요?",
+      "login": "로그인",
+      "create_account": "계정 만들기",
+      "new_to_plane": "Plane을 처음 사용하시나요?",
+      "back_to_sign_in": "로그인으로 돌아가기",
+      "resend_in": "{seconds}초 후 다시 전송",
+      "sign_in_with_unique_code": "고유 코드로 로그인",
+      "forgot_password": "비밀번호를 잊으셨나요?",
+      "username": {
+        "label": "사용자 이름",
+        "placeholder": "사용자 이름을 입력하세요"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "팀과 함께 작업을 관리하려면 계정을 만드세요.",
+        "step": {
+          "email": {
+            "header": "가입",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "가입",
+            "sub_header": "이메일-비밀번호 조합으로 가입하세요."
+          },
+          "unique_code": {
+            "header": "가입",
+            "sub_header": "위 이메일 주소로 전송된 고유 코드로 가입하세요."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "강력한 비밀번호를 설정하여 진행하세요"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "팀과 함께 작업을 관리하려면 로그인하세요.",
+        "step": {
+          "email": {
+            "header": "로그인 또는 가입",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "로그인 또는 가입",
+            "sub_header": "이메일-비밀번호 조합을 사용하여 로그인하세요."
+          },
+          "unique_code": {
+            "header": "로그인 또는 가입",
+            "sub_header": "위 이메일 주소로 전송된 고유 코드로 로그인하세요."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "비밀번호 재설정",
+      "description": "사용자 계정의 인증된 이메일 주소를 입력하면 비밀번호 재설정 링크를 보내드립니다.",
+      "email_sent": "이메일 주소로 재설정 링크를 보냈습니다",
+      "send_reset_link": "재설정 링크 보내기",
+      "errors": {
+        "smtp_not_enabled": "SMTP가 활성화되지 않았습니다. 비밀번호 재설정 링크를 보낼 수 없습니다."
+      },
+      "toast": {
+        "success": {
+          "title": "이메일 전송됨",
+          "message": "비밀번호 재설정 링크를 확인하세요. 몇 분 내에 나타나지 않으면 스팸 폴더를 확인하세요."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "문제가 발생했습니다. 다시 시도해주세요."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "새 비밀번호 설정",
+      "description": "강력한 비밀번호로 계정을 보호하세요"
+    },
+    "set_password": {
+      "title": "계정 보호",
+      "description": "비밀번호 설정은 안전한 로그인을 도와줍니다"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "오류!",
+          "message": "로그아웃에 실패했습니다. 다시 시도해주세요."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "{ldapProviderName}로 계속",
+        "sub_header": "{ldapProviderName} 자격 증명을 입력하세요"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/automation.json b/packages/i18n/src/locales/ko/automation.json
new file mode 100644
index 0000000..8d77f70
--- /dev/null
+++ b/packages/i18n/src/locales/ko/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "커스텀 자동화",
+      "create_automation": "자동화 생성"
+    },
+    "scope": {
+      "label": "범위",
+      "run_on": "실행 대상"
+    },
+    "trigger": {
+      "label": "트리거",
+      "add_trigger": "트리거 추가",
+      "sidebar_header": "트리거 설정",
+      "input_label": "이 자동화의 트리거는 무엇입니까?",
+      "input_placeholder": "옵션 선택",
+      "section_plane_events": "Plane 이벤트",
+      "section_time_based": "시간 기반",
+      "fixed_schedule": "고정 일정",
+      "schedule": {
+        "frequency": "빈도",
+        "select_day": "요일 선택",
+        "day_of_month": "월의 날짜",
+        "monthly_every": "매",
+        "monthly_day_aria": "{day}일",
+        "time": "시간",
+        "hour": "시",
+        "minute": "분",
+        "hour_suffix": "시",
+        "minute_suffix": "분",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "시간대",
+        "timezone_placeholder": "시간대 선택",
+        "frequency_daily": "매일",
+        "frequency_weekly": "매주",
+        "frequency_monthly": "매월",
+        "on": "에",
+        "validation_weekly_day_required": "요일을 최소 하나 선택하세요.",
+        "validation_monthly_date_required": "월의 날짜를 선택하세요.",
+        "main_content_schedule_summary_daily": "매일 {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "매주 {days} {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "매월 {day}일 {time} ({timezone}).",
+        "schedule_mode": "일정 모드",
+        "schedule_mode_fixed": "고정",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Cron 식 입력",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "유효하지 않은 Cron 식입니다.",
+        "cron_preview": "이 Cron 식은 \"{description}\"을(를) 실행합니다.",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "뒤로",
+        "next": "액션 추가"
+      },
+      "warning": {
+        "disabled_trigger_switching": "생성 후에는 트리거 유형을 변경할 수 없습니다"
+      }
+    },
+    "condition": {
+      "label": "조건",
+      "add_condition": "조건 추가",
+      "adding_condition": "조건 추가 중"
+    },
+    "action": {
+      "label": "액션",
+      "add_action": "액션 추가",
+      "sidebar_header": "액션",
+      "input_label": "자동화가 수행할 작업은 무엇입니까?",
+      "input_placeholder": "옵션 선택",
+      "handler_name": {
+        "add_comment": "댓글 추가",
+        "change_property": "속성 변경",
+        "run_script": "스크립트 실행"
+      },
+      "configuration": {
+        "label": "설정",
+        "change_property": {
+          "placeholders": {
+            "property_name": "속성 선택",
+            "change_type": "선택",
+            "property_value_select": "{count, plural, one{값 선택} other{값 선택}}",
+            "property_value_select_date": "날짜 선택"
+          },
+          "validation": {
+            "property_name_required": "속성 이름이 필요합니다",
+            "change_type_required": "변경 유형이 필요합니다",
+            "property_value_required": "속성 값이 필요합니다"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "댓글 추가"
+      },
+      "run_script_block": {
+        "title": "스크립트 실행"
+      },
+      "change_property_block": {
+        "title": "속성 변경"
+      },
+      "validation": {
+        "delete_only_action": "유일한 액션을 삭제하기 전에 자동화를 비활성화하세요."
+      }
+    },
+    "conjunctions": {
+      "and": "그리고",
+      "or": "또는",
+      "if": "만약",
+      "then": "그러면"
+    },
+    "enable": {
+      "alert": "자동화가 완료되면 '활성화'를 누르세요. 활성화되면 자동화가 실행될 준비가 됩니다.",
+      "validation": {
+        "required": "자동화를 활성화하려면 트리거와 최소 하나의 액션이 있어야 합니다."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "자동화를 삭제하기 전에 비활성화해야 합니다."
+      }
+    },
+    "table": {
+      "title": "자동화 제목",
+      "scope": "범위",
+      "projects": "프로젝트",
+      "last_run_on": "마지막 실행일",
+      "created_on": "생성일",
+      "last_updated_on": "마지막 업데이트일",
+      "last_run_status": "마지막 실행 상태",
+      "average_duration": "평균 소요 시간",
+      "owner": "소유자",
+      "executions": "실행 횟수"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "자동화 생성",
+        "update": "자동화 업데이트"
+      },
+      "title": {
+        "placeholder": "자동화 이름을 입력하세요.",
+        "required_error": "제목이 필요합니다"
+      },
+      "description": {
+        "placeholder": "자동화를 설명하세요."
+      },
+      "submit_button": {
+        "create": "자동화 생성",
+        "update": "자동화 업데이트"
+      }
+    },
+    "delete_modal": {
+      "heading": "자동화 삭제"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "실패 표시",
+        "all": "전체",
+        "only_activity": "활동만",
+        "only_run_history": "실행 기록만"
+      },
+      "run_history": {
+        "initiator": "시작자"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "성공!",
+          "message": "자동화가 성공적으로 생성되었습니다."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "자동화 생성에 실패했습니다."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "성공!",
+          "message": "자동화가 성공적으로 업데이트되었습니다."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "자동화 업데이트에 실패했습니다."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "성공!",
+          "message": "자동화가 성공적으로 활성화되었습니다."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "자동화 활성화에 실패했습니다."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "성공!",
+          "message": "자동화가 성공적으로 비활성화되었습니다."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "자동화 비활성화에 실패했습니다."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "자동화가 삭제되었습니다",
+          "message": "{name} 자동화가 프로젝트에서 삭제되었습니다."
+        },
+        "error": {
+          "title": "자동화를 삭제할 수 없습니다.",
+          "message": "다시 삭제를 시도하거나 나중에 다시 시도해 보세요. 계속 삭제할 수 없다면 문의해 주세요."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "오류!",
+            "message": "액션 생성에 실패했습니다. 다시 시도해 주세요!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "오류!",
+            "message": "액션 업데이트에 실패했습니다. 다시 시도해 주세요!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "아직 표시할 자동화가 없습니다.",
+        "description": "자동화는 트리거, 조건, 액션을 설정하여 반복적인 작업을 제거하는 데 도움이 됩니다. 시간을 절약하고 작업을 원활하게 진행하기 위해 자동화를 생성하세요."
+      },
+      "upgrade": {
+        "title": "자동화",
+        "description": "자동화는 프로젝트의 작업을 자동화하는 방법입니다.",
+        "sub_description": "자동화를 사용하면 관리 시간의 80%를 절약할 수 있습니다."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "이 자동화를 실행할 프로젝트를 선택하세요",
+        "all_projects": {
+          "label": "모든 프로젝트",
+          "description": "작업 공간의 모든 프로젝트에서 자동화가 실행됩니다."
+        },
+        "select_projects": {
+          "label": "프로젝트 선택",
+          "description": "작업 공간에서 선택한 프로젝트에 대해 자동화가 실행됩니다.",
+          "placeholder": "프로젝트 선택"
+        }
+      },
+      "settings": {
+        "sidebar_label": "자동화",
+        "title": "자동화",
+        "description": "글로벌 자동화로 작업 공간 전체의 프로세스를 표준화하세요."
+      },
+      "table": {
+        "scope": {
+          "global": "글로벌",
+          "project": {
+            "label": "프로젝트",
+            "multiple": "여러 개",
+            "all": "전체"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/common.json b/packages/i18n/src/locales/ko/common.json
new file mode 100644
index 0000000..73eea6b
--- /dev/null
+++ b/packages/i18n/src/locales/ko/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "현재 이 문제를 해결하고 있습니다. 즉시 도움이 필요하시면,",
+    "reach_out_to_us": "저희에게 연락해 주세요",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "그렇지 않으면 가끔 페이지를 새로고침하거나 저희",
+    "status_page": "상태 페이지를 방문해 주세요"
+  },
+  "submit": "제출",
+  "cancel": "취소",
+  "loading": "로딩 중",
+  "error": "오류",
+  "success": "성공",
+  "warning": "경고",
+  "info": "정보",
+  "close": "닫기",
+  "yes": "예",
+  "no": "아니오",
+  "ok": "확인",
+  "name": "이름",
+  "unknown_user": "알 수 없는 사용자",
+  "description": "설명",
+  "search": "검색",
+  "add_member": "멤버 추가",
+  "adding_members": "멤버 추가 중",
+  "remove_member": "멤버 제거",
+  "add_members": "멤버 추가",
+  "adding_member": "멤버 추가 중",
+  "remove_members": "멤버 제거",
+  "add": "추가",
+  "adding": "추가 중",
+  "remove": "제거",
+  "add_new": "새로 추가",
+  "remove_selected": "선택 제거",
+  "first_name": "이름",
+  "last_name": "성",
+  "email": "이메일",
+  "display_name": "표시 이름",
+  "role": "역할",
+  "timezone": "시간대",
+  "avatar": "아바타",
+  "cover_image": "커버 이미지",
+  "password": "비밀번호",
+  "change_cover": "커버 변경",
+  "language": "언어",
+  "saving": "저장 중",
+  "save_changes": "변경 사항 저장",
+  "deactivate_account": "계정 비활성화",
+  "deactivate_account_description": "계정을 비활성화하면 해당 계정 내의 모든 데이터와 리소스가 영구적으로 삭제되며 복구할 수 없습니다.",
+  "profile_settings": "프로필 설정",
+  "your_account": "나의 계정",
+  "security": "보안",
+  "activity": "활동",
+  "activity_empty_state": {
+    "no_activity": "아직 활동이 없습니다",
+    "no_transitions": "아직 전환이 없습니다",
+    "no_comments": "아직 댓글이 없습니다",
+    "no_worklogs": "아직 작업 기록이 없습니다",
+    "no_history": "아직 기록이 없습니다"
+  },
+  "preferences": "환경 설정",
+  "language_and_time": "언어 및 시간",
+  "notifications": "알림",
+  "workspaces": "작업 공간",
+  "create_workspace": "작업 공간 생성",
+  "invitations": "초대",
+  "summary": "요약",
+  "assigned": "할당됨",
+  "created": "생성됨",
+  "subscribed": "구독됨",
+  "you_do_not_have_the_permission_to_access_this_page": "이 페이지에 접근할 권한이 없습니다.",
+  "something_went_wrong_please_try_again": "문제가 발생했습니다. 다시 시도해주세요.",
+  "load_more": "더 보기",
+  "select_or_customize_your_interface_color_scheme": "인터페이스 색상 구성표를 선택하거나 사용자 지정하세요.",
+  "timezone_setting": "현재 시간대 설정입니다.",
+  "language_setting": "사용자 인터페이스에서 사용할 언어를 선택하세요.",
+  "settings_moved_to_preferences": "시간대 및 언어 설정이 환경 설정으로 이동되었습니다.",
+  "go_to_preferences": "환경 설정으로 이동",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "자신에게 맞는 커서 모션 스타일을 선택하세요.",
+  "theme": "테마",
+  "smooth_cursor": "부드러운 커서",
+  "system_preference": "시스템 기본 설정",
+  "light": "라이트",
+  "dark": "다크",
+  "light_contrast": "라이트 고대비",
+  "dark_contrast": "다크 고대비",
+  "custom": "사용자 정의 테마",
+  "select_your_theme": "테마 선택",
+  "customize_your_theme": "테마 사용자 정의",
+  "background_color": "배경 색상",
+  "text_color": "텍스트 색상",
+  "primary_color": "기본(테마) 색상",
+  "sidebar_background_color": "사이드바 배경 색상",
+  "sidebar_text_color": "사이드바 텍스트 색상",
+  "set_theme": "테마 설정",
+  "enter_a_valid_hex_code_of_6_characters": "유효한 6자리 헥스 코드를 입력하세요",
+  "background_color_is_required": "배경 색상이 필요합니다",
+  "text_color_is_required": "텍스트 색상이 필요합니다",
+  "primary_color_is_required": "기본 색상이 필요합니다",
+  "sidebar_background_color_is_required": "사이드바 배경 색상이 필요합니다",
+  "sidebar_text_color_is_required": "사이드바 텍스트 색상이 필요합니다",
+  "updating_theme": "테마 업데이트 중",
+  "theme_updated_successfully": "테마가 성공적으로 업데이트되었습니다",
+  "failed_to_update_the_theme": "테마 업데이트에 실패했습니다",
+  "email_notifications": "이메일 알림",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "구독한 작업 항목에 대한 최신 정보를 유지하세요. 알림을 받으려면 이 기능을 활성화하세요.",
+  "email_notification_setting_updated_successfully": "이메일 알림 설정이 성공적으로 업데이트되었습니다",
+  "failed_to_update_email_notification_setting": "이메일 알림 설정 업데이트에 실패했습니다",
+  "notify_me_when": "다음 경우 알림",
+  "property_changes": "속성 변경",
+  "property_changes_description": "작업 항목의 속성(담당자, 우선순위, 추정치 등)이 변경될 때 알림을 받습니다.",
+  "state_change": "상태 변경",
+  "state_change_description": "작업 항목이 다른 상태로 이동할 때 알림을 받습니다",
+  "issue_completed": "작업 항목 완료",
+  "issue_completed_description": "작업 항목이 완료될 때만 알림을 받습니다",
+  "comments": "댓글",
+  "comments_description": "작업 항목에 누군가 댓글을 남길 때 알림을 받습니다",
+  "mentions": "멘션",
+  "mentions_description": "댓글이나 설명에서 누군가 나를 멘션할 때만 알림을 받습니다",
+  "old_password": "기존 비밀번호",
+  "general_settings": "일반 설정",
+  "sign_out": "로그아웃",
+  "signing_out": "로그아웃 중",
+  "active_cycles": "활성 주기",
+  "active_cycles_description": "프로젝트 전반의 주기를 모니터링하고, 고우선 작업 항목을 추적하며, 주의가 필요한 주기를 확대합니다.",
+  "on_demand_snapshots_of_all_your_cycles": "모든 주기의 주문형 스냅샷",
+  "upgrade": "업그레이드",
+  "10000_feet_view": "10,000피트 뷰",
+  "10000_feet_view_description": "모든 프로젝트의 주기를 한 번에 확인할 수 있습니다.",
+  "get_snapshot_of_each_active_cycle": "각 활성 주기의 스냅샷을 얻으세요.",
+  "get_snapshot_of_each_active_cycle_description": "모든 활성 주기의 고수준 메트릭을 추적하고, 진행 상태를 확인하며, 마감일에 대한 범위를 파악합니다.",
+  "compare_burndowns": "버다운 비교",
+  "compare_burndowns_description": "각 팀의 성과를 모니터링하고 각 주기의 버다운 보고서를 확인합니다.",
+  "quickly_see_make_or_break_issues": "빠르게 중요한 작업 항목을 확인하세요.",
+  "quickly_see_make_or_break_issues_description": "각 주기의 고우선 작업 항목을 미리 보고 마감일에 대한 모든 작업 항목을 한 번에 확인합니다.",
+  "zoom_into_cycles_that_need_attention": "주의가 필요한 주기를 확대하세요.",
+  "zoom_into_cycles_that_need_attention_description": "기대에 부합하지 않는 주기의 상태를 한 번에 조사합니다.",
+  "stay_ahead_of_blockers": "차단 요소를 미리 파악하세요.",
+  "stay_ahead_of_blockers_description": "프로젝트 간의 문제를 파악하고 다른 뷰에서 명확하지 않은 주기 간의 종속성을 확인합니다.",
+  "analytics": "분석",
+  "workspace_invites": "작업 공간 초대",
+  "enter_god_mode": "갓 모드로 전환",
+  "workspace_logo": "작업 공간 로고",
+  "new_issue": "새 작업 항목",
+  "your_work": "나의 작업",
+  "drafts": "초안",
+  "projects": "프로젝트",
+  "views": "보기",
+  "archives": "아카이브",
+  "settings": "설정",
+  "failed_to_move_favorite": "즐겨찾기 이동 실패",
+  "favorites": "즐겨찾기",
+  "no_favorites_yet": "아직 즐겨찾기가 없습니다",
+  "create_folder": "폴더 생성",
+  "new_folder": "새 폴더",
+  "favorite_updated_successfully": "즐겨찾기가 성공적으로 업데이트되었습니다",
+  "favorite_created_successfully": "즐겨찾기가 성공적으로 생성되었습니다",
+  "folder_already_exists": "폴더가 이미 존재합니다",
+  "folder_name_cannot_be_empty": "폴더 이름은 비워둘 수 없습니다",
+  "something_went_wrong": "문제가 발생했습니다",
+  "failed_to_reorder_favorite": "즐겨찾기 재정렬 실패",
+  "favorite_removed_successfully": "즐겨찾기가 성공적으로 제거되었습니다",
+  "failed_to_create_favorite": "즐겨찾기 생성 실패",
+  "failed_to_rename_favorite": "즐겨찾기 이름 변경 실패",
+  "project_link_copied_to_clipboard": "프로젝트 링크가 클립보드에 복사되었습니다",
+  "link_copied": "링크 복사됨",
+  "add_project": "프로젝트 추가",
+  "create_project": "프로젝트 생성",
+  "failed_to_remove_project_from_favorites": "프로젝트를 즐겨찾기에서 제거하지 못했습니다. 다시 시도해주세요.",
+  "project_created_successfully": "프로젝트가 성공적으로 생성되었습니다",
+  "project_created_successfully_description": "프로젝트가 성공적으로 생성되었습니다. 이제 작업 항목을 추가할 수 있습니다.",
+  "project_name_already_taken": "프로젝트 이름이 이미 사용 중입니다.",
+  "project_name_cannot_contain_special_characters": "프로젝트 이름에는 특수 문자를 사용할 수 없습니다.",
+  "project_identifier_already_taken": "프로젝트 식별자가 이미 사용 중입니다.",
+  "project_cover_image_alt": "프로젝트 커버 이미지",
+  "name_is_required": "이름이 필요합니다",
+  "title_should_be_less_than_255_characters": "제목은 255자 미만이어야 합니다",
+  "project_name": "프로젝트 이름",
+  "project_id_must_be_at_least_1_character": "프로젝트 ID는 최소 1자 이상이어야 합니다",
+  "project_id_must_be_at_most_5_characters": "프로젝트 ID는 최대 5자 이하여야 합니다",
+  "project_id": "프로젝트 ID",
+  "project_id_tooltip_content": "작업 항목을 고유하게 식별하는 데 도움이 됩니다. 최대 50자.",
+  "description_placeholder": "설명",
+  "only_alphanumeric_non_latin_characters_allowed": "영숫자 및 비라틴 문자만 허용됩니다.",
+  "project_id_is_required": "프로젝트 ID가 필요합니다",
+  "project_id_allowed_char": "영숫자 및 비라틴 문자만 허용됩니다.",
+  "project_id_min_char": "프로젝트 ID는 최소 1자 이상이어야 합니다",
+  "project_id_max_char": "프로젝트 ID는 최대 {max}자 이하여야 합니다",
+  "project_description_placeholder": "프로젝트 설명 입력",
+  "select_network": "네트워크 선택",
+  "lead": "리드",
+  "date_range": "날짜 범위",
+  "private": "비공개",
+  "public": "공개",
+  "accessible_only_by_invite": "초대에 의해서만 접근 가능",
+  "anyone_in_the_workspace_except_guests_can_join": "게스트를 제외한 작업 공간의 모든 사람이 참여할 수 있습니다",
+  "creating": "생성 중",
+  "creating_project": "프로젝트 생성 중",
+  "adding_project_to_favorites": "프로젝트를 즐겨찾기에 추가 중",
+  "project_added_to_favorites": "프로젝트가 즐겨찾기에 추가되었습니다",
+  "couldnt_add_the_project_to_favorites": "프로젝트를 즐겨찾기에 추가하지 못했습니다. 다시 시도해주세요.",
+  "removing_project_from_favorites": "프로젝트를 즐겨찾기에서 제거 중",
+  "project_removed_from_favorites": "프로젝트가 즐겨찾기에서 제거되었습니다",
+  "couldnt_remove_the_project_from_favorites": "프로젝트를 즐겨찾기에서 제거하지 못했습니다. 다시 시도해주세요.",
+  "add_to_favorites": "즐겨찾기에 추가",
+  "remove_from_favorites": "즐겨찾기에서 제거",
+  "publish_project": "프로젝트 게시",
+  "publish": "게시",
+  "copy_link": "링크 복사",
+  "leave_project": "프로젝트 떠나기",
+  "join_the_project_to_rearrange": "프로젝트에 참여하여 재정렬",
+  "drag_to_rearrange": "드래그하여 재정렬",
+  "congrats": "축하합니다!",
+  "open_project": "프로젝트 열기",
+  "issues": "작업 항목",
+  "cycles": "주기",
+  "modules": "모듈",
+  "pages": "페이지",
+  "intake": "접수",
+  "renew": "갱신",
+  "preview": "미리보기",
+  "time_tracking": "시간 추적",
+  "work_management": "작업 관리",
+  "projects_and_issues": "프로젝트 및 작업 항목",
+  "projects_and_issues_description": "이 프로젝트에서 이들을 켜거나 끕니다.",
+  "cycles_description": "프로젝트별로 작업 시간을 설정하고 필요에 따라 기간을 조정하세요. 한 주기는 2주일일 수 있고, 다음은 1주일일 수 있습니다.",
+  "modules_description": "작업을 전담 리더와 담당자가 있는 하위 프로젝트로 구성하세요.",
+  "views_description": "사용자 정의 정렬, 필터 및 표시 옵션을 저장하거나 팀과 공유하세요.",
+  "pages_description": "자유 형식의 콘텐츠를 작성하고 편집하세요. 메모, 문서, 무엇이든 가능합니다.",
+  "intake_description": "비회원이 버그, 피드백, 제안을 공유할 수 있도록 하되, 워크플로우를 방해하지 않도록 합니다.",
+  "time_tracking_description": "작업 항목 및 프로젝트에 소요된 시간을 기록하세요.",
+  "work_management_description": "작업 및 프로젝트를 쉽게 관리합니다.",
+  "documentation": "문서",
+  "message_support": "지원 메시지",
+  "contact_sales": "영업 문의",
+  "hyper_mode": "하이퍼 모드",
+  "keyboard_shortcuts": "키보드 단축키",
+  "whats_new": "새로운 기능",
+  "version": "버전",
+  "we_are_having_trouble_fetching_the_updates": "업데이트를 가져오는 데 문제가 발생했습니다.",
+  "our_changelogs": "우리의 변경 로그",
+  "for_the_latest_updates": "최신 업데이트를 위해",
+  "please_visit": "방문해주세요",
+  "docs": "문서",
+  "full_changelog": "전체 변경 로그",
+  "support": "지원",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Plane Pages 제공",
+  "please_select_at_least_one_invitation": "최소 하나의 초대를 선택하세요.",
+  "please_select_at_least_one_invitation_description": "작업 공간에 참여하려면 최소 하나의 초대를 선택하세요.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "누군가가 작업 공간에 참여하도록 초대했습니다",
+  "join_a_workspace": "작업 공간 참여",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "누군가가 작업 공간에 참여하도록 초대했습니다",
+  "join_a_workspace_description": "작업 공간 참여",
+  "accept_and_join": "수락하고 참여",
+  "go_home": "홈으로 이동",
+  "no_pending_invites": "보류 중인 초대 없음",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "누군가가 작업 공간에 초대하면 여기에 표시됩니다",
+  "back_to_home": "홈으로 돌아가기",
+  "workspace_name": "작업 공간 이름",
+  "deactivate_your_account": "계정 비활성화",
+  "deactivate_your_account_description": "계정을 비활성화하면 작업 항목에 할당될 수 없으며 작업 공간에 대한 청구가 발생하지 않습니다. 계정을 다시 활성화하려면 이 이메일 주소로 작업 공간 초대가 필요합니다.",
+  "deactivating": "비활성화 중",
+  "confirm": "확인",
+  "confirming": "확인 중",
+  "draft_created": "초안 생성됨",
+  "issue_created_successfully": "작업 항목이 성공적으로 생성되었습니다",
+  "draft_creation_failed": "초안 생성 실패",
+  "issue_creation_failed": "작업 항목 생성 실패",
+  "draft_issue": "초안 작업 항목",
+  "issue_updated_successfully": "작업 항목이 성공적으로 업데이트되었습니다",
+  "issue_could_not_be_updated": "작업 항목을 업데이트할 수 없습니다",
+  "create_a_draft": "초안 생성",
+  "save_to_drafts": "초안에 저장",
+  "save": "저장",
+  "update": "업데이트",
+  "updating": "업데이트 중",
+  "create_new_issue": "새 작업 항목 생성",
+  "editor_is_not_ready_to_discard_changes": "편집기가 변경 사항을 폐기할 준비가 되지 않았습니다",
+  "failed_to_move_issue_to_project": "작업 항목을 프로젝트로 이동하지 못했습니다",
+  "create_more": "더 많이 생성",
+  "add_to_project": "프로젝트에 추가",
+  "discard": "폐기",
+  "duplicate_issue_found": "중복된 작업 항목 발견",
+  "duplicate_issues_found": "중복된 작업 항목 발견",
+  "no_matching_results": "일치하는 결과 없음",
+  "title_is_required": "제목이 필요합니다",
+  "title": "제목",
+  "state": "상태",
+  "transition": "전환",
+  "history": "히스토리",
+  "priority": "우선순위",
+  "none": "없음",
+  "urgent": "긴급",
+  "high": "높음",
+  "medium": "중간",
+  "low": "낮음",
+  "members": "멤버",
+  "assignee": "담당자",
+  "assignees": "담당자",
+  "subscriber": "{count, plural, one{구독자 #명} other{구독자 #명}}",
+  "you": "나",
+  "labels": "레이블",
+  "create_new_label": "새 레이블 생성",
+  "label_name": "레이블 이름",
+  "failed_to_create_label": "레이블 생성에 실패했습니다. 다시 시도해 주세요.",
+  "start_date": "시작 날짜",
+  "end_date": "종료 날짜",
+  "due_date": "마감일",
+  "target_date": "목표일",
+  "estimate": "추정",
+  "change_parent_issue": "상위 작업 항목 변경",
+  "remove_parent_issue": "상위 작업 항목 제거",
+  "add_parent": "상위 항목 추가",
+  "loading_members": "멤버 로딩 중",
+  "view_link_copied_to_clipboard": "뷰 링크가 클립보드에 복사되었습니다.",
+  "required": "필수",
+  "optional": "선택",
+  "Cancel": "취소",
+  "edit": "편집",
+  "archive": "아카이브",
+  "restore": "복원",
+  "open_in_new_tab": "새 탭에서 열기",
+  "delete": "삭제",
+  "deleting": "삭제 중",
+  "make_a_copy": "복사본 만들기",
+  "move_to_project": "프로젝트로 이동",
+  "good": "좋은",
+  "morning": "아침",
+  "afternoon": "오후",
+  "evening": "저녁",
+  "show_all": "모두 보기",
+  "show_less": "간략히 보기",
+  "no_data_yet": "아직 데이터 없음",
+  "syncing": "동기화 중",
+  "add_work_item": "작업 항목 추가",
+  "advanced_description_placeholder": "명령어를 위해 '/'를 누르세요",
+  "create_work_item": "작업 항목 생성",
+  "attachments": "첨부 파일",
+  "declining": "거절 중",
+  "declined": "거절됨",
+  "decline": "거절",
+  "unassigned": "미할당",
+  "work_items": "작업 항목",
+  "add_link": "링크 추가",
+  "points": "포인트",
+  "no_assignee": "담당자 없음",
+  "no_assignees_yet": "아직 담당자 없음",
+  "no_labels_yet": "아직 레이블 없음",
+  "ideal": "이상적인",
+  "current": "현재",
+  "no_matching_members": "일치하는 멤버 없음",
+  "leaving": "떠나는 중",
+  "removing": "제거 중",
+  "leave": "떠나기",
+  "refresh": "새로 고침",
+  "refreshing": "새로 고침 중",
+  "refresh_status": "상태 새로 고침",
+  "prev": "이전",
+  "next": "다음",
+  "re_generating": "다시 생성 중",
+  "re_generate": "다시 생성",
+  "re_generate_key": "키 다시 생성",
+  "export": "내보내기",
+  "member": "{count, plural, one{# 멤버} other{# 멤버}}",
+  "new_password_must_be_different_from_old_password": "새 비밀번호는 이전 비밀번호와 다르게 설정해야 합니다",
+  "edited": "수정됨",
+  "bot": "봇",
+  "settings_description": "계정, 작업 공간 및 프로젝트 환경 설정을 한 곳에서 관리하세요. 탭 사이를 전환하여 손쉽게 구성할 수 있습니다.",
+  "back_to_workspace": "작업 공간으로 돌아가기",
+  "upgrade_request": "워크스페이스 관리자에게 업그레이드를 요청하세요.",
+  "copied_to_clipboard": "클립보드에 복사됨",
+  "copied_to_clipboard_description": "URL이 클립보드에 성공적으로 복사되었습니다",
+  "toast": {
+    "success": "성공!",
+    "error": "오류!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "링크 생성됨",
+        "message": "링크가 성공적으로 생성되었습니다"
+      },
+      "not_created": {
+        "title": "링크 생성되지 않음",
+        "message": "링크를 생성할 수 없습니다"
+      },
+      "updated": {
+        "title": "링크 업데이트됨",
+        "message": "링크가 성공적으로 업데이트되었습니다"
+      },
+      "not_updated": {
+        "title": "링크 업데이트되지 않음",
+        "message": "링크를 업데이트할 수 없습니다"
+      },
+      "removed": {
+        "title": "링크 제거됨",
+        "message": "링크가 성공적으로 제거되었습니다"
+      },
+      "not_removed": {
+        "title": "링크 제거되지 않음",
+        "message": "링크를 제거할 수 없습니다"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL이 유효하지 않습니다",
+        "placeholder": "URL 입력 또는 붙여넣기"
+      },
+      "title": {
+        "text": "표시 제목",
+        "placeholder": "이 링크를 어떻게 표시할지 입력하세요"
+      }
+    }
+  },
+  "common": {
+    "all": "모두",
+    "no_items_in_this_group": "이 그룹에 항목이 없습니다",
+    "drop_here_to_move": "이동하려면 여기에 드롭하세요",
+    "states": "상태",
+    "state": "상태",
+    "state_groups": "상태 그룹",
+    "state_group": "상태 그룹",
+    "priorities": "우선순위",
+    "priority": "우선순위",
+    "team_project": "팀 프로젝트",
+    "project": "프로젝트",
+    "cycle": "주기",
+    "cycles": "주기",
+    "module": "모듈",
+    "modules": "모듈",
+    "labels": "레이블",
+    "label": "레이블",
+    "admins": "관리자",
+    "users": "사용자",
+    "guests": "게스트",
+    "assignees": "담당자",
+    "assignee": "담당자",
+    "created_by": "생성자",
+    "none": "없음",
+    "link": "링크",
+    "estimates": "추정",
+    "estimate": "추정",
+    "created_at": "생성일",
+    "updated_at": "업데이트일",
+    "completed_at": "완료일",
+    "layout": "레이아웃",
+    "filters": "필터",
+    "display": "디스플레이",
+    "load_more": "더 보기",
+    "activity": "활동",
+    "analytics": "분석",
+    "dates": "날짜",
+    "success": "성공!",
+    "something_went_wrong": "문제가 발생했습니다",
+    "error": {
+      "label": "오류!",
+      "message": "오류가 발생했습니다. 다시 시도해주세요."
+    },
+    "group_by": "그룹화 기준",
+    "epic": "에픽",
+    "epics": "에픽스",
+    "work_item": "작업 항목",
+    "work_items": "작업 항목",
+    "sub_work_item": "하위 작업 항목",
+    "views": "보기",
+    "pages": "페이지",
+    "add": "추가",
+    "warning": "경고",
+    "updating": "업데이트 중",
+    "adding": "추가 중",
+    "update": "업데이트",
+    "creating": "생성 중",
+    "create": "생성",
+    "cancel": "취소",
+    "description": "설명",
+    "title": "제목",
+    "attachment": "첨부 파일",
+    "general": "일반",
+    "features": "기능",
+    "automation": "자동화",
+    "project_name": "프로젝트 이름",
+    "project_id": "프로젝트 ID",
+    "project_timezone": "프로젝트 시간대",
+    "created_on": "생성일",
+    "updated_on": "업데이트됨",
+    "completed_on": "Completed on",
+    "update_project": "프로젝트 업데이트",
+    "identifier_already_exists": "식별자가 이미 존재합니다",
+    "add_more": "더 추가",
+    "defaults": "기본값",
+    "add_label": "레이블 추가",
+    "customize_time_range": "시간 범위 사용자 정의",
+    "loading": "로딩 중",
+    "attachments": "첨부 파일",
+    "property": "속성",
+    "properties": "속성",
+    "parent": "상위 항목",
+    "page": "페이지",
+    "remove": "제거",
+    "archiving": "아카이브 중",
+    "archive": "아카이브",
+    "access": {
+      "public": "공개",
+      "private": "비공개"
+    },
+    "done": "완료",
+    "sub_work_items": "하위 작업 항목",
+    "comment": "댓글",
+    "workspace_level": "작업 공간 수준",
+    "order_by": {
+      "label": "정렬 기준",
+      "manual": "수동 - 순위",
+      "last_created": "마지막 생성",
+      "last_updated": "마지막 업데이트",
+      "start_date": "시작 날짜",
+      "due_date": "마감일",
+      "asc": "오름차순",
+      "desc": "내림차순",
+      "updated_on": "업데이트일"
+    },
+    "sort": {
+      "asc": "오름차순",
+      "desc": "내림차순",
+      "created_on": "생성일",
+      "updated_on": "업데이트일"
+    },
+    "comments": "댓글",
+    "updates": "업데이트",
+    "additional_updates": "추가 업데이트",
+    "clear_all": "모두 지우기",
+    "copied": "복사됨!",
+    "link_copied": "링크 복사됨!",
+    "link_copied_to_clipboard": "링크가 클립보드에 복사되었습니다",
+    "copied_to_clipboard": "작업 항목 링크가 클립보드에 복사되었습니다",
+    "branch_name_copied_to_clipboard": "브랜치 이름이 클립보드에 복사되었습니다",
+    "is_copied_to_clipboard": "작업 항목이 클립보드에 복사되었습니다",
+    "no_links_added_yet": "아직 추가된 링크 없음",
+    "add_link": "링크 추가",
+    "links": "링크",
+    "go_to_workspace": "작업 공간으로 이동",
+    "progress": "진행",
+    "optional": "선택",
+    "join": "참여",
+    "go_back": "뒤로 가기",
+    "continue": "계속",
+    "resend": "다시 보내기",
+    "relations": "관계",
+    "dependencies": "종속성",
+    "errors": {
+      "default": {
+        "title": "오류!",
+        "message": "문제가 발생했습니다. 다시 시도해주세요."
+      },
+      "required": "이 필드는 필수입니다",
+      "entity_required": "{entity}가 필요합니다",
+      "restricted_entity": "{entity}은(는) 제한되어 있습니다"
+    },
+    "update_link": "링크 업데이트",
+    "attach": "첨부",
+    "create_new": "새로 생성",
+    "add_existing": "기존 항목 추가",
+    "type_or_paste_a_url": "URL 입력 또는 붙여넣기",
+    "url_is_invalid": "URL이 유효하지 않습니다",
+    "display_title": "표시 제목",
+    "link_title_placeholder": "이 링크를 어떻게 표시할지 입력하세요",
+    "url": "URL",
+    "side_peek": "사이드 피크",
+    "modal": "모달",
+    "full_screen": "전체 화면",
+    "close_peek_view": "피크 뷰 닫기",
+    "toggle_peek_view_layout": "피크 뷰 레이아웃 전환",
+    "options": "옵션",
+    "duration": "기간",
+    "today": "오늘",
+    "week": "주",
+    "month": "월",
+    "quarter": "분기",
+    "press_for_commands": "명령어를 위해 '/'를 누르세요",
+    "click_to_add_description": "설명 추가를 위해 클릭하세요",
+    "on_track": "계획대로 진행 중",
+    "off_track": "계획 이탈",
+    "at_risk": "위험",
+    "timeline": "타임라인",
+    "completion": "완료",
+    "upcoming": "예정된",
+    "completed": "완료됨",
+    "in_progress": "진행 중",
+    "planned": "계획된",
+    "paused": "일시 중지됨",
+    "search": {
+      "label": "검색",
+      "placeholder": "검색어 입력",
+      "no_matches_found": "일치하는 항목 없음",
+      "no_matching_results": "일치하는 결과 없음",
+      "min_chars": "검색하려면 최소 {count}자를 입력하세요",
+      "error": "검색 결과를 가져오는 중 오류 발생",
+      "no_results": {
+        "title": "일치하는 결과 없음",
+        "description": "모든 결과를 보려면 검색 조건을 제거하세요"
+      }
+    },
+    "actions": {
+      "edit": "편집",
+      "make_a_copy": "복사본 만들기",
+      "open_in_new_tab": "새 탭에서 열기",
+      "copy_link": "링크 복사",
+      "copy_branch_name": "브랜치 이름 복사",
+      "archive": "아카이브",
+      "restore": "복원",
+      "delete": "삭제",
+      "remove_relation": "관계 제거",
+      "subscribe": "구독",
+      "unsubscribe": "구독 취소",
+      "clear_sorting": "정렬 지우기",
+      "show_weekends": "주말 표시",
+      "enable": "활성화",
+      "disable": "비활성화",
+      "copy_markdown": "마크다운 복사",
+      "reply": "답글"
+    },
+    "name": "이름",
+    "discard": "폐기",
+    "confirm": "확인",
+    "confirming": "확인 중",
+    "read_the_docs": "문서 읽기",
+    "default": "기본값",
+    "active": "활성",
+    "enabled": "활성화됨",
+    "disabled": "비활성화됨",
+    "mandate": "의무",
+    "mandatory": "필수",
+    "global": "글로벌",
+    "yes": "예",
+    "no": "아니오",
+    "please_wait": "기다려주세요",
+    "enabling": "활성화 중",
+    "disabling": "비활성화 중",
+    "beta": "베타",
+    "or": "또는",
+    "next": "다음",
+    "back": "뒤로",
+    "retry": "다시 시도",
+    "cancelling": "취소 중",
+    "configuring": "구성 중",
+    "clear": "지우기",
+    "import": "가져오기",
+    "connect": "연결",
+    "authorizing": "인증 중",
+    "processing": "처리 중",
+    "no_data_available": "사용 가능한 데이터 없음",
+    "from": "{name}에서",
+    "authenticated": "인증됨",
+    "select": "선택",
+    "upgrade": "업그레이드",
+    "add_seats": "좌석 추가",
+    "projects": "프로젝트",
+    "workspace": "작업 공간",
+    "workspaces": "작업 공간",
+    "team": "팀",
+    "teams": "팀",
+    "entity": "엔티티",
+    "entities": "엔티티",
+    "task": "작업",
+    "tasks": "작업",
+    "section": "섹션",
+    "sections": "섹션",
+    "edit": "편집",
+    "connecting": "연결 중",
+    "connected": "연결됨",
+    "disconnect": "연결 해제",
+    "disconnecting": "연결 해제 중",
+    "installing": "설치 중",
+    "install": "설치",
+    "reset": "재설정",
+    "live": "라이브",
+    "change_history": "변경 기록",
+    "coming_soon": "곧 출시",
+    "member": "멤버",
+    "members": "멤버",
+    "you": "나",
+    "upgrade_cta": {
+      "higher_subscription": "더 높은 구독으로 업그레이드",
+      "talk_to_sales": "영업팀과 상담"
+    },
+    "category": "카테고리",
+    "categories": "카테고리",
+    "saving": "저장 중",
+    "save_changes": "변경 사항 저장",
+    "delete": "삭제",
+    "deleting": "삭제 중",
+    "pending": "보류 중",
+    "invite": "초대",
+    "view": "보기",
+    "deactivated_user": "비활성화된 사용자",
+    "apply": "적용",
+    "applying": "적용 중",
+    "overview": "오버뷰",
+    "no_of": "{entity} 수",
+    "resolved": "해결됨",
+    "get_started": "시작하기",
+    "worklogs": "워크로그",
+    "project_updates": "프로젝트 업데이트",
+    "workflows": "워크플로우",
+    "templates": "템플릿",
+    "business": "비즈니스",
+    "members_and_teamspaces": "멤버와 팀스페이스",
+    "recurring_work_items": "반복 작업 항목",
+    "milestones": "마일스톤",
+    "open_in_full_screen": "전체 화면으로 {page} 열기",
+    "details": "세부 정보",
+    "project_structure": "프로젝트 구조",
+    "custom_properties": "사용자 정의 속성",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "X축",
+    "y_axis": "Y축",
+    "metric": "메트릭"
+  },
+  "form": {
+    "title": {
+      "required": "제목이 필요합니다",
+      "max_length": "제목은 {length}자 미만이어야 합니다"
+    }
+  },
+  "entity": {
+    "grouping_title": "{entity} 그룹화",
+    "priority": "{entity} 우선순위",
+    "all": "모든 {entity}",
+    "drop_here_to_move": "{entity}를 이동하려면 여기에 드롭하세요",
+    "delete": {
+      "label": "{entity} 삭제",
+      "success": "{entity}가 성공적으로 삭제되었습니다",
+      "failed": "{entity} 삭제 실패"
+    },
+    "update": {
+      "failed": "{entity} 업데이트 실패",
+      "success": "{entity}가 성공적으로 업데이트되었습니다"
+    },
+    "link_copied_to_clipboard": "{entity} 링크가 클립보드에 복사되었습니다",
+    "fetch": {
+      "failed": "{entity}를 가져오는 중 오류 발생"
+    },
+    "add": {
+      "success": "{entity}가 성공적으로 추가되었습니다",
+      "failed": "{entity} 추가 중 오류 발생"
+    },
+    "remove": {
+      "success": "{entity}가 성공적으로 제거되었습니다",
+      "failed": "{entity} 제거 중 오류 발생"
+    }
+  },
+  "attachment": {
+    "error": "파일을 첨부할 수 없습니다. 다시 업로드하세요.",
+    "only_one_file_allowed": "한 번에 하나의 파일만 업로드할 수 있습니다.",
+    "file_size_limit": "파일 크기는 {size}MB 이하이어야 합니다.",
+    "drag_and_drop": "업로드하려면 아무 곳에나 드래그 앤 드롭하세요",
+    "delete": "첨부 파일 삭제"
+  },
+  "label": {
+    "select": "레이블 선택",
+    "create": {
+      "success": "레이블이 성공적으로 생성되었습니다",
+      "failed": "레이블 생성 실패",
+      "already_exists": "레이블이 이미 존재합니다",
+      "type": "새 레이블을 추가하려면 입력하세요"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {뷰} other {뷰}}",
+    "create": {
+      "label": "뷰 생성"
+    },
+    "update": {
+      "label": "뷰 업데이트"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "게스트",
+      "description": "조직의 외부 멤버는 게스트로 초대될 수 있습니다."
+    },
+    "member": {
+      "title": "멤버",
+      "description": "프로젝트, 주기 및 모듈 내에서 엔티티를 읽고, 쓰고, 편집하고, 삭제할 수 있는 권한"
+    },
+    "admin": {
+      "title": "관리자",
+      "description": "작업 공간 내에서 모든 권한이 true로 설정됨."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "제품 / 프로젝트 관리자",
+    "development_or_engineering": "개발 / 엔지니어링",
+    "founder_or_executive": "창립자 / 임원",
+    "freelancer_or_consultant": "프리랜서 / 컨설턴트",
+    "marketing_or_growth": "마케팅 / 성장",
+    "sales_or_business_development": "영업 / 비즈니스 개발",
+    "support_or_operations": "지원 / 운영",
+    "student_or_professor": "학생 / 교수",
+    "human_resources": "인사 / 자원",
+    "other": "기타"
+  },
+  "default_global_view": {
+    "all_issues": "모든 작업 항목",
+    "assigned": "할당됨",
+    "created": "생성됨",
+    "subscribed": "구독됨"
+  },
+  "description_versions": {
+    "last_edited_by": "마지막 편집자",
+    "previously_edited_by": "이전 편집자",
+    "edited_by": "편집자"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane이 시작되지 않았습니다. 이는 하나 이상의 Plane 서비스가 시작에 실패했기 때문일 수 있습니다.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "확실히 하려면 setup.sh와 Docker 로그에서 View Logs를 선택하세요."
+  },
+  "customize_navigation": "내비게이션 사용자 지정",
+  "personal": "개인",
+  "accordion_navigation_control": "아코디언 사이드바 내비게이션",
+  "horizontal_navigation_bar": "탭 내비게이션",
+  "show_limited_projects_on_sidebar": "사이드바에 제한된 프로젝트 표시",
+  "enter_number_of_projects": "프로젝트 수 입력",
+  "pin": "고정",
+  "unpin": "고정 해제",
+  "workspace_dashboards": "대시보드",
+  "pi_chat": "인공지능 챗",
+  "in_app": "인앱",
+  "forms": "폼스",
+  "milestones": "마일스톤",
+  "milestones_description": "마일스톤은 공유된 완료 일자에 맞춰 작업 항목을 정렬할 수 있는 레이어를 제공합니다.",
+  "file_upload": {
+    "upload_text": "파일을 업로드하려면 여기를 클릭하세요",
+    "drag_drop_text": "드래그 앤 드롭",
+    "processing": "처리 중",
+    "invalid_file_type": "유효하지 않은 파일 타입",
+    "missing_fields": "필드 누락",
+    "success": "{fileName} 업로드 완료!"
+  },
+  "date": "데이트",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "작업 항목을 CSV 파일로 내보냅니다.",
+      "short_description": "CSV로 내보내기"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "작업 항목을 Excel 파일로 내보냅니다.",
+      "short_description": "Excel로 내보내기"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "작업 항목을 Excel 파일로 내보냅니다.",
+      "short_description": "Excel로 내보내기"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "작업 항목을 JSON 파일로 내보냅니다.",
+      "short_description": "JSON으로 내보내기"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/cycle.json b/packages/i18n/src/locales/ko/cycle.json
new file mode 100644
index 0000000..3830227
--- /dev/null
+++ b/packages/i18n/src/locales/ko/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "주기에 작업 항목을 추가하여 진행 상황을 확인하세요"
+      },
+      "chart": {
+        "title": "주기에 작업 항목을 추가하여 버다운 차트를 확인하세요."
+      },
+      "priority_issue": {
+        "title": "주기에서 처리된 고우선 작업 항목을 한눈에 확인하세요."
+      },
+      "assignee": {
+        "title": "작업 항목에 담당자를 추가하여 담당자별 작업 분포를 확인하세요."
+      },
+      "label": {
+        "title": "작업 항목에 레이블을 추가하여 레이블별 작업 분포를 확인하세요."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {주기} other {주기}}",
+    "no_cycle": "주기 없음"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "사이클의 진행 상황을 보려면 작업 항목을\n 추가하세요"
+      },
+      "priority": {
+        "title": "사이클에서 처리된 높은 우선순위 작업\n 항목을 한눈에 확인하세요."
+      },
+      "assignee": {
+        "title": "작업 항목에 담당자를 추가하여 담당자별\n 작업 분석을 확인하세요."
+      },
+      "label": {
+        "title": "작업 항목에 레이블을 추가하여 레이블별\n 작업 분석을 확인하세요."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/editor.json b/packages/i18n/src/locales/ko/editor.json
new file mode 100644
index 0000000..6778327
--- /dev/null
+++ b/packages/i18n/src/locales/ko/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "외부 파일을 업로드하려면 드래그 앤 드롭하세요"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "파일이 너무 큽니다.",
+        "description": "파일당 최대 크기는 {maxFileSize} MB입니다"
+      },
+      "unsupported_file_type": {
+        "title": "지원되지 않는 파일 형식입니다.",
+        "description": "지원되는 형식 보기"
+      },
+      "default": {
+        "title": "업로드 실패.",
+        "description": "문제가 발생했습니다. 다시 시도해 주세요."
+      }
+    },
+    "upgrade": {
+      "description": "이 첨부 파일을 보려면 플랜을 업그레이드하세요."
+    },
+    "aria": {
+      "click_to_upload": "첨부 파일을 업로드하려면 클릭하세요"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "임베드로 변환",
+      "convert_to_link": "링크로 변환",
+      "convert_to_richcard": "리치 카드로 변환"
+    },
+    "placeholder": {
+      "insert_embed": "YouTube 동영상, Figma 디자인 등 원하는 임베드 링크를 여기에 삽입하세요",
+      "link": "링크 입력 또는 붙여넣기"
+    },
+    "input_modal": {
+      "embed": "임베드",
+      "works_with_links": "YouTube, Figma, Google Docs 등과 함께 작동"
+    },
+    "error": {
+      "not_valid_link": "유효한 URL을 입력해 주세요."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "이 블록의 내용을 설명하세요",
+      "generated_here": "AI 콘텐츠가 여기에 생성됩니다"
+    },
+    "block_types": {
+      "placeholder": "블록 타입 선택",
+      "summarize_page": "페이지 요약",
+      "custom_prompt": "커스텀 프롬프트"
+    },
+    "actions": {
+      "discard": "폐기",
+      "generate": "생성",
+      "generating": "생성 중",
+      "rewriting": "다시 작성 중",
+      "rewrite": "다시 작성",
+      "use_this": "이것 사용",
+      "refine": "정제"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/empty-state.json b/packages/i18n/src/locales/ko/empty-state.json
new file mode 100644
index 0000000..d37876b
--- /dev/null
+++ b/packages/i18n/src/locales/ko/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "아직 표시할 진행 지표가 없습니다.",
+      "description": "작업 항목에서 속성 값을 설정하여 여기에서 진행 지표를 확인하세요."
+    },
+    "updates": {
+      "title": "아직 업데이트가 없습니다.",
+      "description": "프로젝트 멤버가 업데이트를 추가하면 여기에 표시됩니다"
+    },
+    "search": {
+      "title": "일치하는 결과가 없습니다.",
+      "description": "결과를 찾을 수 없습니다. 검색어를 조정해 보세요."
+    },
+    "not_found": {
+      "title": "앗! 문제가 발생한 것 같습니다",
+      "description": "현재 Plane 계정을 가져올 수 없습니다. 네트워크 오류일 수 있습니다.",
+      "cta_primary": "다시 로드 시도"
+    },
+    "server_error": {
+      "title": "서버 오류",
+      "description": "서버에 연결하여 데이터를 가져올 수 없습니다. 걱정하지 마세요, 작업 중입니다.",
+      "cta_primary": "다시 로드 시도"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "이 프로젝트에 접근할 수 없는 것 같습니다",
+      "restricted_description": "관리자에게 접근 권한을 요청하시면 여기서 계속 진행하실 수 있습니다.",
+      "join_description": "아래 버튼을 클릭하여 프로젝트에 참여하세요.",
+      "cta_primary": "프로젝트 참여",
+      "cta_loading": "프로젝트 참여 중"
+    },
+    "invalid_project": {
+      "title": "프로젝트를 찾을 수 없습니다",
+      "description": "찾으시는 프로젝트가 존재하지 않습니다."
+    },
+    "work_items": {
+      "title": "첫 번째 작업 항목으로 시작하세요.",
+      "description": "작업 항목은 프로젝트의 구성 요소입니다. 소유자를 할당하고 우선순위를 설정하며 진행 상황을 쉽게 추적할 수 있습니다.",
+      "cta_primary": "첫 번째 작업 항목 생성"
+    },
+    "cycles": {
+      "title": "사이클로 작업을 그룹화하고 시간을 정하세요.",
+      "description": "시간 제한이 있는 단위로 작업을 나누고, 프로젝트 마감일로부터 역으로 날짜를 설정하며, 팀으로서 구체적인 진전을 이루세요.",
+      "cta_primary": "첫 번째 사이클 설정"
+    },
+    "cycle_work_items": {
+      "title": "이 사이클에 표시할 작업 항목이 없습니다",
+      "description": "작업 항목을 생성하여 이 사이클 동안 팀의 진행 상황을 모니터링하고 제시간에 목표를 달성하세요.",
+      "cta_primary": "작업 항목 생성",
+      "cta_secondary": "기존 작업 항목 추가"
+    },
+    "modules": {
+      "title": "프로젝트 목표를 모듈에 매핑하고 쉽게 추적하세요.",
+      "description": "모듈은 상호 연결된 작업 항목으로 구성됩니다. 특정 기한과 분석을 통해 프로젝트 단계를 통한 진행 상황을 모니터링하여 해당 단계 달성에 얼마나 가까운지 나타냅니다.",
+      "cta_primary": "첫 번째 모듈 설정"
+    },
+    "module_work_items": {
+      "title": "이 모듈에 표시할 작업 항목이 없습니다",
+      "description": "작업 항목을 생성하여 이 모듈을 모니터링하기 시작하세요.",
+      "cta_primary": "작업 항목 생성",
+      "cta_secondary": "기존 작업 항목 추가"
+    },
+    "views": {
+      "title": "프로젝트를 위한 사용자 정의 보기 저장",
+      "description": "보기는 가장 자주 사용하는 정보에 빠르게 액세스하는 데 도움이 되는 저장된 필터입니다. 팀원들이 특정 요구 사항에 맞게 보기를 공유하고 조정하면서 손쉽게 협업하세요.",
+      "cta_primary": "보기 생성"
+    },
+    "no_work_items_in_project": {
+      "title": "프로젝트에 아직 작업 항목이 없습니다",
+      "description": "프로젝트에 작업 항목을 추가하고 보기를 사용하여 작업을 추적 가능한 조각으로 나누세요.",
+      "cta_primary": "작업 항목 추가"
+    },
+    "work_item_filter": {
+      "title": "작업 항목을 찾을 수 없습니다",
+      "description": "현재 필터가 결과를 반환하지 않았습니다. 필터를 변경해 보세요.",
+      "cta_primary": "작업 항목 추가"
+    },
+    "pages": {
+      "title": "메모부터 PRD까지 모든 것을 문서화하세요",
+      "description": "페이지를 사용하면 정보를 한 곳에서 캡처하고 구성할 수 있습니다. 회의록, 프로젝트 문서 및 PRD를 작성하고, 작업 항목을 삽입하며, 바로 사용할 수 있는 구성 요소로 구조화하세요.",
+      "cta_primary": "첫 번째 페이지 생성"
+    },
+    "archive_pages": {
+      "title": "아직 보관된 페이지가 없습니다",
+      "description": "주목하지 않는 페이지를 보관하세요. 필요할 때 여기에서 액세스하세요."
+    },
+    "intake_sidebar": {
+      "title": "접수 요청 기록",
+      "description": "프로젝트 워크플로우 내에서 검토, 우선순위 지정 및 추적할 새로운 요청을 제출하세요.",
+      "cta_primary": "접수 요청 생성"
+    },
+    "intake_main": {
+      "title": "접수 작업 항목을 선택하여 세부 정보 보기"
+    },
+    "epics": {
+      "title": "복잡한 프로젝트를 구조화된 에픽으로 전환하세요.",
+      "description": "에픽은 큰 목표를 더 작고 추적 가능한 작업으로 구성하는 데 도움이 됩니다.",
+      "cta_primary": "에픽 생성",
+      "cta_secondary": "문서"
+    },
+    "epic_work_items": {
+      "title": "이 에픽에 아직 작업 항목을 추가하지 않았습니다.",
+      "description": "이 에픽에 작업 항목을 추가하고 여기에서 추적하세요.",
+      "cta_secondary": "작업 항목 추가"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "아직 보관된 에픽이 없습니다",
+      "description": "완료되었거나 취소된 에픽을 보관할 수 있습니다. 보관 후 여기에서 찾을 수 있습니다."
+    },
+    "archive_work_items": {
+      "title": "아직 보관된 작업 항목이 없습니다",
+      "description": "수동으로 또는 자동화를 통해 완료되거나 취소된 작업 항목을 보관할 수 있습니다. 보관되면 여기에서 찾을 수 있습니다.",
+      "cta_primary": "자동화 설정"
+    },
+    "archive_cycles": {
+      "title": "아직 보관된 사이클이 없습니다",
+      "description": "프로젝트를 정리하려면 완료된 사이클을 보관하세요. 보관되면 여기에서 찾을 수 있습니다."
+    },
+    "archive_modules": {
+      "title": "아직 보관된 모듈이 없습니다",
+      "description": "프로젝트를 정리하려면 완료되거나 취소된 모듈을 보관하세요. 보관되면 여기에서 찾을 수 있습니다."
+    },
+    "home_widget_quick_links": {
+      "title": "작업에 편리한 중요한 참조 자료, 리소스 또는 문서 보관"
+    },
+    "inbox_sidebar_all": {
+      "title": "구독한 작업 항목에 대한 업데이트가 여기에 표시됩니다"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "작업 항목에 대한 언급이 여기에 표시됩니다"
+    },
+    "your_work_by_priority": {
+      "title": "아직 할당된 작업 항목이 없습니다"
+    },
+    "your_work_by_state": {
+      "title": "아직 할당된 작업 항목이 없습니다"
+    },
+    "views": {
+      "title": "아직 보기가 없습니다",
+      "description": "프로젝트에 작업 항목을 추가하고 보기를 사용하여 쉽게 필터링, 정렬 및 진행 상황을 모니터링하세요.",
+      "cta_primary": "작업 항목 추가"
+    },
+    "drafts": {
+      "title": "작성 중인 작업 항목",
+      "description": "이를 시도하려면 작업 항목 추가를 시작하고 중간에 남겨두거나 아래에 첫 번째 초안을 만드세요. 😉",
+      "cta_primary": "초안 작업 항목 생성"
+    },
+    "projects_archived": {
+      "title": "보관된 프로젝트가 없습니다",
+      "description": "모든 프로젝트가 여전히 활성 상태인 것 같습니다. 잘하셨습니다!"
+    },
+    "analytics_projects": {
+      "title": "여기에서 프로젝트 지표를 시각화하려면 프로젝트를 생성하세요."
+    },
+    "analytics_work_items": {
+      "title": "작업 항목 및 담당자가 있는 프로젝트를 생성하여 여기에서 성과, 진행 상황 및 팀 영향을 추적하기 시작하세요."
+    },
+    "analytics_no_cycle": {
+      "title": "사이클을 생성하여 작업을 시간 제한 단계로 구성하고 스프린트 전반에 걸쳐 진행 상황을 추적하세요."
+    },
+    "analytics_no_module": {
+      "title": "모듈을 생성하여 작업을 구성하고 다양한 단계에서 진행 상황을 추적하세요."
+    },
+    "analytics_no_intake": {
+      "title": "접수를 설정하여 들어오는 요청을 관리하고 승인 및 거부 방법을 추적하세요"
+    },
+    "home_widget_stickies": {
+      "title": "아이디어를 적고, 영감을 포착하거나, 번뜩이는 생각을 기록하세요. 스티커를 추가하여 시작하세요."
+    },
+    "stickies": {
+      "title": "아이디어를 즉시 캡처",
+      "description": "빠른 메모와 할 일을 위한 스티커를 만들고 어디를 가든 함께 가지고 다니세요.",
+      "cta_primary": "첫 번째 스티커 만들기",
+      "cta_secondary": "문서"
+    },
+    "active_cycles": {
+      "title": "활성 사이클 없음",
+      "description": "현재 진행 중인 사이클이 없습니다. 오늘 날짜가 포함된 경우 활성 사이클이 여기에 표시됩니다."
+    },
+    "dashboard": {
+      "title": "대시보드로 진행 상황 시각화",
+      "description": "맞춤형 대시보드를 구축하여 지표를 추적하고 결과를 측정하며 통찰력을 효과적으로 제시하세요.",
+      "cta_primary": "새 대시보드 생성"
+    },
+    "wiki": {
+      "title": "메모, 문서 또는 전체 지식 베이스를 작성하세요.",
+      "description": "페이지는 Plane의 생각 포착 공간입니다. 회의록을 기록하고, 쉽게 서식을 지정하고, 작업 항목을 삽입하고, 구성 요소 라이브러리를 사용하여 배치하고, 프로젝트 컨텍스트에 모두 보관하세요.",
+      "cta_primary": "페이지 생성"
+    },
+    "project_overview_state_sidebar": {
+      "title": "프로젝트 상태 활성화",
+      "description": "프로젝트 상태를 활성화하여 상태, 우선순위, 마감일 등의 속성을 보고 관리하세요."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "아직 추정치가 없습니다",
+      "description": "팀이 노력을 측정하는 방법을 정의하고 모든 작업 항목에서 일관되게 추적하세요.",
+      "cta_primary": "추정 시스템 추가"
+    },
+    "labels": {
+      "title": "아직 레이블이 없습니다",
+      "description": "작업 항목을 효과적으로 분류하고 관리하기 위한 개인화된 레이블을 만드세요.",
+      "cta_primary": "첫 번째 레이블 생성"
+    },
+    "exports": {
+      "title": "아직 내보내기가 없습니다",
+      "description": "현재 내보내기 기록이 없습니다. 데이터를 내보내면 모든 기록이 여기에 표시됩니다."
+    },
+    "tokens": {
+      "title": "아직 개인 토큰이 없습니다",
+      "description": "작업 공간을 외부 시스템 및 애플리케이션과 연결하기 위한 보안 API 토큰을 생성하세요.",
+      "cta_primary": "API 토큰 추가"
+    },
+    "workspace_tokens": {
+      "title": "아직 API 토큰이 없습니다",
+      "description": "작업 공간을 외부 시스템 및 애플리케이션과 연결하기 위한 보안 API 토큰을 생성하세요.",
+      "cta_primary": "API 토큰 추가"
+    },
+    "webhooks": {
+      "title": "아직 웹훅이 추가되지 않았습니다",
+      "description": "프로젝트 이벤트가 발생할 때 외부 서비스에 대한 알림을 자동화하세요.",
+      "cta_primary": "웹훅 추가"
+    },
+    "work_item_types": {
+      "title": "작업 항목 유형 생성 및 사용자 정의",
+      "description": "프로젝트에 대한 고유한 작업 항목 유형을 정의하세요. 각 유형은 프로젝트 및 팀의 요구 사항에 맞춰 자체 속성, 워크플로우 및 필드를 가질 수 있습니다.",
+      "cta_primary": "활성화"
+    },
+    "work_item_type_properties": {
+      "title": "이 작업 항목 유형에 대해 캡처하려는 속성과 세부 정보를 정의하세요. 프로젝트 워크플로우에 맞게 사용자 정의하세요.",
+      "cta_secondary": "속성 추가"
+    },
+    "templates": {
+      "title": "아직 템플릿이 없습니다",
+      "description": "작업 항목 및 페이지에 대한 템플릿을 생성하여 설정 시간을 줄이고 몇 초 만에 새 작업을 시작하세요.",
+      "cta_primary": "첫 번째 템플릿 생성"
+    },
+    "recurring_work_items": {
+      "title": "아직 반복 작업 항목이 없습니다",
+      "description": "반복 작업 항목을 설정하여 반복 작업을 자동화하고 일정을 손쉽게 유지하세요.",
+      "cta_primary": "반복 작업 항목 생성"
+    },
+    "worklogs": {
+      "title": "모든 멤버의 작업 시간표 추적",
+      "description": "작업 항목에 시간을 기록하여 프로젝트 전반의 모든 팀 멤버에 대한 자세한 작업 시간표를 확인하세요."
+    },
+    "group_syncing": {
+      "title": "아직 그룹 매핑이 없습니다"
+    },
+    "template_setting": {
+      "title": "아직 템플릿이 없습니다",
+      "description": "프로젝트, 작업 항목 및 페이지에 대한 템플릿을 생성하여 설정 시간을 줄이고 몇 초 만에 새 작업을 시작하세요.",
+      "cta_primary": "템플릿 생성"
+    },
+    "workflows": {
+      "title": "아직 워크플로우가 없습니다",
+      "description": "워크플로우를 생성하여 작업 항목의 진행 상황을 관리하세요.",
+      "cta_primary": "새 워크플로우 추가",
+      "states": {
+        "title": "상태 추가",
+        "description": "작업 항목이 진행되는 상태를 선택하세요."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/home.json b/packages/i18n/src/locales/ko/home.json
new file mode 100644
index 0000000..307ea9c
--- /dev/null
+++ b/packages/i18n/src/locales/ko/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "빠른 시작 가이드",
+      "not_right_now": "지금은 안 함",
+      "create_project": {
+        "title": "프로젝트 생성",
+        "description": "Plane에서 대부분의 작업은 프로젝트로 시작됩니다.",
+        "cta": "시작하기"
+      },
+      "invite_team": {
+        "title": "팀 초대",
+        "description": "동료와 함께 빌드, 배포 및 관리하세요.",
+        "cta": "초대하기"
+      },
+      "configure_workspace": {
+        "title": "작업 공간 설정",
+        "description": "기능을 켜거나 끄거나 그 이상을 수행하세요.",
+        "cta": "이 작업 공간 설정"
+      },
+      "personalize_account": {
+        "title": "Plane을 개인화하세요.",
+        "description": "사진, 색상 등을 선택하세요.",
+        "cta": "지금 개인화"
+      },
+      "widgets": {
+        "title": "위젯이 없으면 조용합니다. 켜세요",
+        "description": "모든 위젯이 꺼져 있는 것 같습니다. 지금 활성화하여 경험을 향상시키세요!",
+        "primary_button": {
+          "text": "위젯 관리"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "작업과 관련된 링크를 저장하세요.",
+      "add": "빠른 링크 추가",
+      "title": "빠른 링크",
+      "title_plural": "빠른 링크"
+    },
+    "recents": {
+      "title": "최근 항목",
+      "empty": {
+        "project": "최근 방문한 프로젝트가 여기에 표시됩니다.",
+        "page": "최근 방문한 페이지가 여기에 표시됩니다.",
+        "issue": "최근 방문한 작업 항목이 여기에 표시됩니다.",
+        "default": "아직 최근 항목이 없습니다."
+      },
+      "filters": {
+        "all": "모든",
+        "projects": "프로젝트",
+        "pages": "페이지",
+        "issues": "작업 항목"
+      }
+    },
+    "new_at_plane": {
+      "title": "Plane의 새로운 기능"
+    },
+    "quick_tutorial": {
+      "title": "빠른 튜토리얼"
+    },
+    "widget": {
+      "reordered_successfully": "위젯이 성공적으로 재정렬되었습니다.",
+      "reordering_failed": "위젯 재정렬 중 오류가 발생했습니다."
+    },
+    "manage_widgets": "위젯 관리",
+    "title": "홈",
+    "star_us_on_github": "GitHub에서 별표",
+    "business_trial_banner": {
+      "title": "14일 Business 플랜 체험판이 활성화되었습니다!",
+      "description": "모든 Business 기능을 살펴보세요. 준비가 되면 구독을 선택하세요. 자동으로 청구되지 않습니다.",
+      "trial_ends_today": "체험판이 오늘 종료됩니다",
+      "trial_ends_in_days": "체험판 종료까지 {days}일 남음",
+      "start_subscription": "구독 시작",
+      "explore_business_features": "Business 기능 살펴보기"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/inbox.json b/packages/i18n/src/locales/ko/inbox.json
new file mode 100644
index 0000000..a191d95
--- /dev/null
+++ b/packages/i18n/src/locales/ko/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "보류 중",
+        "description": "보류 중"
+      },
+      "declined": {
+        "title": "거절됨",
+        "description": "거절됨"
+      },
+      "snoozed": {
+        "title": "미루기",
+        "description": "{days, plural, one{# 일} other{# 일}} 남음"
+      },
+      "accepted": {
+        "title": "수락됨",
+        "description": "수락됨"
+      },
+      "duplicate": {
+        "title": "중복",
+        "description": "중복"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "작업 항목 거절",
+        "content": "작업 항목 {value}을(를) 거절하시겠습니까?"
+      },
+      "delete": {
+        "title": "작업 항목 삭제",
+        "content": "작업 항목 {value}을(를) 삭제하시겠습니까?",
+        "success": "작업 항목이 성공적으로 삭제되었습니다"
+      }
+    },
+    "errors": {
+      "snooze_permission": "프로젝트 관리자만 작업 항목을 미루거나 미루기 해제할 수 있습니다",
+      "accept_permission": "프로젝트 관리자만 작업 항목을 수락할 수 있습니다",
+      "decline_permission": "프로젝트 관리자만 작업 항목을 거절할 수 있습니다"
+    },
+    "actions": {
+      "accept": "수락",
+      "decline": "거절",
+      "snooze": "미루기",
+      "unsnooze": "미루기 해제",
+      "copy": "작업 항목 링크 복사",
+      "delete": "삭제",
+      "open": "작업 항목 열기",
+      "mark_as_duplicate": "중복으로 표시",
+      "move": "{value}을(를) 프로젝트 작업 항목으로 이동"
+    },
+    "source": {
+      "in-app": "앱 내"
+    },
+    "order_by": {
+      "created_at": "생성일",
+      "updated_at": "업데이트일",
+      "id": "ID"
+    },
+    "label": "접수",
+    "page_label": "{workspace} - 접수",
+    "modal": {
+      "title": "접수 작업 항목 생성"
+    },
+    "tabs": {
+      "open": "열기",
+      "closed": "닫기"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "열린 작업 항목 없음",
+        "description": "여기에서 열린 작업 항목을 찾을 수 있습니다. 새 작업 항목을 생성하세요."
+      },
+      "sidebar_closed_tab": {
+        "title": "닫힌 작업 항목 없음",
+        "description": "수락되거나 거절된 모든 작업 항목을 여기에서 찾을 수 있습니다."
+      },
+      "sidebar_filter": {
+        "title": "일치하는 작업 항목 없음",
+        "description": "적용된 필터와 일치하는 작업 항목이 없습니다. 새 작업 항목을 생성하세요."
+      },
+      "detail": {
+        "title": "작업 항목의 세부 정보를 보려면 선택하세요."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/integration.json b/packages/i18n/src/locales/ko/integration.json
new file mode 100644
index 0000000..cb7e6ad
--- /dev/null
+++ b/packages/i18n/src/locales/ko/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "인테그레이션",
+    "loading": "로딩 중",
+    "unauthorized": "이 페이지를 볼 권한이 없습니다.",
+    "configure": "구성",
+    "not_enabled": "{name}은(는) 이 워크스페이스에 대해 활성화되지 않았습니다.",
+    "not_configured": "구성되지 않음",
+    "disconnect_personal_account": "개인 {providerName} 계정 연결 해제",
+    "not_configured_message_admin": "{name} 인테그레이션이 구성되지 않았습니다. 인스턴스 관리자에게 문의하여 구성하세요.",
+    "not_configured_message_support": "{name} 인테그레이션이 구성되지 않았습니다. 지원팀에 문의하여 구성하세요.",
+    "external_api_unreachable": "외부 API에 접근할 수 없습니다. 나중에 다시 시도하세요.",
+    "error_fetching_supported_integrations": "지원되는 인테그레이션을 가져올 수 없습니다. 나중에 다시 시도하세요.",
+    "back_to_integrations": "인테그레이션으로 돌아가기",
+    "select_state": "스테이트 선택",
+    "set_state": "스테이트 설정",
+    "choose_project": "프로젝트 선택...",
+    "skip_backward_state_movement": "PR 업데이트로 인해 이슈가 이전 상태로 이동하는 것을 방지"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "GitHub 작업 항목을 플레인과 연결하고 동기화하세요.",
+    "connect_org": "조직 연결",
+    "connect_org_description": "깃허브 조직을 플레인과 연결하세요.",
+    "processing": "처리 중",
+    "org_added_desc": "GitHub org 추가됨",
+    "connection_fetch_error": "서버에서 연결 세부 정보를 가져오는 중 오류 발생",
+    "personal_account_connected": "개인 계정 연결됨",
+    "personal_account_connected_description": "깃허브 계정이 이제 플레인에 연결되었습니다.",
+    "connect_personal_account": "개인 계정 연결",
+    "connect_personal_account_description": "깃허브 개인 계정을 플레인과 연결하세요.",
+    "repo_mapping": "레포지토리 매핑",
+    "repo_mapping_description": "깃허브 레포지토리를 플레인 프로젝트에 매핑하세요.",
+    "project_issue_sync": "프로젝트 이슈 동기화",
+    "project_issue_sync_description": "깃허브에서 플레인 프로젝트로 이슈 동기화하세요.",
+    "project_issue_sync_empty_state": "매핑된 프로젝트 이슈 동기화가 여기에 나타납니다",
+    "configure_project_issue_sync_state": "이슈 동기화 상태 구성",
+    "select_issue_sync_direction": "이슈 동기화 방향 선택",
+    "allow_bidirectional_sync": "양방향 - GitHub와 플레인 양방향으로 이슈와 코멘트 동기화",
+    "allow_unidirectional_sync": "단방향 - GitHub에서 플레인으로 이슈와 코멘트 동기화",
+    "allow_unidirectional_sync_warning": "GitHub Issue의 데이터가 연결된 Plane 작업 항목의 데이터를 대체합니다 (GitHub → Plane만)",
+    "remove_project_issue_sync": "프로젝트 이슈 동기화 제거",
+    "remove_project_issue_sync_confirmation": "프로젝트 이슈 동기화를 제거하시겠습니까?",
+    "add_pr_state_mapping": "플레인 프로젝트에 대한 풀 리퀘스트 상태 매핑 추가",
+    "edit_pr_state_mapping": "플레인 프로젝트에 대한 풀 리퀘스트 상태 매핑 편집",
+    "pr_state_mapping": "풀 리퀘스트 상태 매핑",
+    "pr_state_mapping_description": "깃허브 풀 리퀘스트 상태를 플레인 프로젝트에 매핑하세요.",
+    "pr_state_mapping_empty_state": "매핑된 PR 상태가 여기에 나타납니다",
+    "remove_pr_state_mapping": "풀 리퀘스트 상태 매핑 제거",
+    "remove_pr_state_mapping_confirmation": "풀 리퀘스트 상태 매핑을 제거하시겠습니까?",
+    "issue_sync_message": "작업 항목이 {project}에 동기화되었습니다.",
+    "link": "깃허브 레포지토리를 플레인 프로젝트에 연결",
+    "pull_request_automation": "풀 리퀘스트 자동화",
+    "pull_request_automation_description": "깃허브에서 플레인 프로젝트로 풀 리퀘스트 상태 매핑 구성",
+    "DRAFT_MR_OPENED": "드래프트 MR 열림 시, 스테이트를 다음으로 설정",
+    "MR_OPENED": "MR 열림 시, 스테이트를 다음으로 설정",
+    "MR_READY_FOR_MERGE": "MR 병합 준비 완료 시, 스테이트를 다음으로 설정",
+    "MR_REVIEW_REQUESTED": "MR 리뷰 요청 시, 스테이트를 다음으로 설정",
+    "MR_MERGED": "MR 병합 시, 스테이트를 다음으로 설정",
+    "MR_CLOSED": "MR 닫힘 시, 스테이트를 다음으로 설정",
+    "ISSUE_OPEN": "이슈 열림",
+    "ISSUE_CLOSED": "이슈 닫힘",
+    "save": "저장",
+    "start_sync": "동기화 시작",
+    "choose_repository": "레포지토리 선택..."
+  },
+  "gitlab_integration": {
+    "name": "깃랩",
+    "description": "깃랩 머지 리퀘스트를 플레인과 연결하고 동기화하세요.",
+    "connection_fetch_error": "서버에서 연결 세부 정보를 가져오는 중 오류 발생",
+    "connect_org": "조직 연결",
+    "connect_org_description": "깃랩 조직을 플레인과 연결하세요.",
+    "project_connections": "깃랩 프로젝트 연결",
+    "project_connections_description": "깃랩에서 플레인 프로젝트로 머지 리퀘스트 동기화.",
+    "plane_project_connection": "플레인 프로젝트 연결",
+    "plane_project_connection_description": "깃랩에서 플레인 프로젝트로 풀 리퀘스트 스테이트 매핑 구성",
+    "remove_connection": "연결 제거",
+    "remove_connection_confirmation": "이 연결을 제거하시겠습니까?",
+    "link": "깃랩 레포지토리를 플레인 프로젝트에 연결",
+    "pull_request_automation": "풀 리퀘스트 자동화",
+    "pull_request_automation_description": "깃랩에서 플레인으로 풀 리퀘스트 스테이트 매핑 구성",
+    "DRAFT_MR_OPENED": "드래프트 MR 열림 시, 스테이트를 다음으로 설정",
+    "MR_OPENED": "MR 열림 시, 스테이트를 다음으로 설정",
+    "MR_REVIEW_REQUESTED": "MR 리뷰 요청 시, 스테이트를 다음으로 설정",
+    "MR_READY_FOR_MERGE": "MR 병합 준비 완료 시, 스테이트를 다음으로 설정",
+    "MR_MERGED": "MR 병합 시, 스테이트를 다음으로 설정",
+    "MR_CLOSED": "MR 닫힘 시, 스테이트를 다음으로 설정",
+    "integration_enabled_text": "깃랩 인테그레이션이 활성화되면 작업 항목 워크플로우를 자동화할 수 있습니다",
+    "choose_entity": "엔티티 선택",
+    "choose_project": "프로젝트 선택",
+    "link_plane_project": "플레인 프로젝트 연결",
+    "project_issue_sync": "프로젝트 이슈 동기화",
+    "project_issue_sync_description": "Gitlab에서 Plane 프로젝트로 이슈를 동기화하세요",
+    "project_issue_sync_empty_state": "매핑된 프로젝트 이슈 동기화가 여기에 표시됩니다",
+    "configure_project_issue_sync_state": "이슈 동기화 상태 구성",
+    "select_issue_sync_direction": "이슈 동기화 방향 선택",
+    "allow_bidirectional_sync": "양방향 - Gitlab과 Plane 간에 이슈와 댓글을 양방향으로 동기화",
+    "allow_unidirectional_sync": "단방향 - Gitlab에서 Plane으로만 이슈와 댓글을 동기화",
+    "allow_unidirectional_sync_warning": "Gitlab Issue의 데이터가 연결된 Plane 작업 항목의 데이터를 대체합니다 (Gitlab → Plane만)",
+    "remove_project_issue_sync": "이 프로젝트 이슈 동기화 제거",
+    "remove_project_issue_sync_confirmation": "이 프로젝트 이슈 동기화를 제거하시겠습니까?",
+    "ISSUE_OPEN": "이슈 열림",
+    "ISSUE_CLOSED": "이슈 닫힘",
+    "save": "저장",
+    "start_sync": "동기화 시작",
+    "choose_repository": "레포지토리 선택..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Gitlab Enterprise 인스턴스를 Plane과 연결하고 동기화합니다.",
+    "app_form_title": "Gitlab Enterprise 구성",
+    "app_form_description": "Gitlab Enterprise를 Plane에 연결하도록 구성합니다.",
+    "base_url_title": "Base URL",
+    "base_url_description": "Gitlab Enterprise 인스턴스의 base URL입니다.",
+    "base_url_placeholder": "예: \"https://glab.plane.town\"",
+    "base_url_error": "Base URL은 필수입니다",
+    "invalid_base_url_error": "유효하지 않은 base URL",
+    "client_id_title": "앱 ID",
+    "client_id_description": "Gitlab Enterprise 인스턴스에서 생성한 앱의 ID입니다.",
+    "client_id_placeholder": "예: \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "앱 ID는 필수입니다",
+    "client_secret_title": "클라이언트 시크릿",
+    "client_secret_description": "Gitlab Enterprise 인스턴스에서 생성한 앱의 클라이언트 시크릿입니다.",
+    "client_secret_placeholder": "예: \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "클라이언트 시크릿은 필수입니다",
+    "webhook_secret_title": "Webhook 시크릿",
+    "webhook_secret_description": "Gitlab Enterprise 인스턴스에서 webhook을 검증하는 데 사용될 랜덤 webhook 시크릿입니다.",
+    "webhook_secret_placeholder": "예: \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook 시크릿은 필수입니다",
+    "connect_app": "앱 연결"
+  },
+  "slack_integration": {
+    "name": "슬랙",
+    "description": "슬랙 워크스페이스를 플레인과 연결하세요.",
+    "connect_personal_account": "개인 슬랙 계정을 플레인과 연결하세요.",
+    "personal_account_connected": "귀하의 개인 {providerName} 계정이 이제 플레인에 연결되었습니다.",
+    "link_personal_account": "개인 {providerName} 계정을 플레인에 연결하세요.",
+    "connected_slack_workspaces": "연결된 슬랙 워크스페이스",
+    "connected_on": "{date}에 연결됨",
+    "disconnect_workspace": "{name} 워크스페이스 연결 해제",
+    "alerts": {
+      "dm_alerts": {
+        "title": "중요한 업데이트, 리마인더, 알림을 슬랙 다이렉트 메시지로 받아보세요."
+      }
+    },
+    "project_updates": {
+      "title": "프로젝트 업데이트",
+      "description": "프로젝트의 업데이트 알림을 구성하세요",
+      "add_new_project_update": "새 프로젝트 업데이트 알림 추가",
+      "project_updates_empty_state": "슬랙 채널과 연결된 프로젝트가 여기에 표시됩니다.",
+      "project_updates_form": {
+        "title": "프로젝트 업데이트 구성",
+        "description": "작업 항목이 생성될 때 슬랙에서 프로젝트 업데이트 알림 받기",
+        "failed_to_load_channels": "슬랙에서 채널을 로드하지 못했습니다",
+        "project_dropdown": {
+          "placeholder": "프로젝트 선택",
+          "label": "플레인 프로젝트",
+          "no_projects": "사용 가능한 프로젝트가 없습니다"
+        },
+        "channel_dropdown": {
+          "label": "슬랙 채널",
+          "placeholder": "채널 선택",
+          "no_channels": "사용 가능한 채널이 없습니다"
+        },
+        "all_projects_connected": "모든 프로젝트가 이미 슬랙 채널에 연결되어 있습니다.",
+        "all_channels_connected": "모든 슬랙 채널이 이미 프로젝트에 연결되어 있습니다.",
+        "project_connection_success": "프로젝트 연결이 성공적으로 생성되었습니다",
+        "project_connection_updated": "프로젝트 연결이 성공적으로 업데이트되었습니다",
+        "project_connection_deleted": "프로젝트 연결이 성공적으로 삭제되었습니다",
+        "failed_delete_project_connection": "프로젝트 연결 삭제에 실패했습니다",
+        "failed_create_project_connection": "프로젝트 연결 생성에 실패했습니다",
+        "failed_upserting_project_connection": "프로젝트 연결 업데이트에 실패했습니다",
+        "failed_loading_project_connections": "프로젝트 연결을 로드할 수 없습니다. 네트워크 문제나 통합 문제 때문일 수 있습니다."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Sentry 작업 공간을 Plane에 연결하세요.",
+    "connected_sentry_workspaces": "연결된 Sentry 작업 공간",
+    "connected_on": "{date}에 연결됨",
+    "disconnect_workspace": "{name} 작업 공간 연결 해제",
+    "state_mapping": {
+      "title": "상태 매핑",
+      "description": "Sentry 인시던트 상태를 프로젝트 상태에 매핑하세요. Sentry 인시던트가 해결되거나 미해결일 때 사용할 상태를 구성하세요.",
+      "add_new_state_mapping": "새 상태 매핑 추가",
+      "empty_state": "상태 매핑이 구성되지 않았습니다. Sentry 인시던트 상태를 프로젝트 상태와 동기화하기 위한 첫 번째 매핑을 만드세요.",
+      "failed_loading_state_mappings": "상태 매핑을 로드할 수 없었습니다. 네트워크 문제 또는 통합 문제로 인한 것일 수 있습니다.",
+      "loading_project_states": "프로젝트 상태 로딩 중...",
+      "error_loading_states": "상태 로딩 오류",
+      "no_states_available": "사용 가능한 상태가 없습니다",
+      "no_permission_states": "이 프로젝트의 상태에 액세스할 권한이 없습니다",
+      "states_not_found": "프로젝트 상태를 찾을 수 없습니다",
+      "server_error_states": "상태 로딩 중 서버 오류"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Bitbucket Data Center 리포지토리를 Plane과 연결하고 동기화하세요."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "API 접근을 위해 외부 IdP 토큰을 검증합니다.",
+    "header_description": "IdP(Azure AD, Okta 등)에서 발급된 OIDC/JWT 토큰을 Plane API 접근용으로 검증합니다.",
+    "connected": "연결됨",
+    "connect": "연결",
+    "uninstall": "제거",
+    "uninstalling": "제거 중...",
+    "install_success": "OAuth Bridge가 성공적으로 설치되었습니다.",
+    "install_error": "OAuth Bridge 설치에 실패했습니다.",
+    "uninstall_success": "OAuth Bridge가 제거되었습니다.",
+    "uninstall_error": "OAuth Bridge 제거에 실패했습니다.",
+    "token_providers": "토큰 공급자",
+    "token_providers_description": "JWT가 API 자격 증명으로 허용되는 외부 IdP를 구성합니다.",
+    "add_provider": "공급자 추가",
+    "edit_provider": "공급자 편집",
+    "enabled": "활성화됨",
+    "disabled": "비활성화됨",
+    "test": "테스트",
+    "no_providers_title": "구성된 공급자가 없습니다.",
+    "no_providers_description": "외부 토큰 인증을 활성화하려면 IdP를 추가하세요.",
+    "provider_updated": "공급자가 업데이트되었습니다.",
+    "provider_added": "공급자가 추가되었습니다.",
+    "provider_save_error": "공급자 저장에 실패했습니다.",
+    "provider_deleted": "공급자가 삭제되었습니다.",
+    "provider_delete_error": "공급자 삭제에 실패했습니다.",
+    "provider_update_error": "공급자 업데이트에 실패했습니다.",
+    "jwks_reachable": "JWKS 접근 가능",
+    "jwks_unreachable": "JWKS 접근 불가",
+    "jwks_test_error": "구성된 URL에서 JWKS를 가져올 수 없습니다.",
+    "provider_form": {
+      "name_label": "이름",
+      "name_placeholder": "예: Azure AD Production",
+      "name_description": "이 ID 공급자의 표시 이름",
+      "name_required": "이름은 필수입니다.",
+      "issuer_label": "발급자",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "JWT에서 예상되는 iss 클레임 값",
+      "issuer_required": "발급자는 필수입니다.",
+      "jwks_url_label": "JWKS URL",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "공급자의 JSON Web Key Set을 제공하는 HTTPS 엔드포인트",
+      "jwks_url_required": "JWKS URL은 필수입니다.",
+      "jwks_url_https": "JWKS URL은 HTTPS를 사용해야 합니다.",
+      "audience_label": "대상",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "JWT에서 예상되는 aud 클레임(쉼표로 구분).",
+      "user_claims_label": "사용자 클레임",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "사용자의 이메일 주소가 포함된 JWT 클레임",
+      "user_claims_required": "사용자 클레임은 필수입니다.",
+      "allowed_algorithms_label": "허용된 서명 알고리즘",
+      "allowed_algorithms_description": "JWT 서명 검증에 사용되는 비대칭 알고리즘",
+      "allowed_algorithms_required": "최소 하나의 알고리즘이 필요합니다.",
+      "select_algorithms": "알고리즘 선택",
+      "jwks_cache_ttl_label": "JWKS 캐시 TTL(초)",
+      "jwks_cache_ttl_description": "공급자의 JWKS 키를 캐시하는 기간(최소 60초, 기본 24시간)",
+      "jwks_cache_ttl_min": "캐시 TTL은 최소 60초 이상이어야 합니다.",
+      "rate_limit_label": "속도 제한",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "요청 제한(예: 120/minute). 기본 속도 제한을 사용하려면 비워두세요.",
+      "enable_provider": "이 공급자 활성화",
+      "saving": "저장 중...",
+      "update": "업데이트"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "깃허브 엔터프라이즈 조직을 플레인과 연결하고 동기화하세요.",
+    "app_form_title": "깃허브 엔터프라이즈 설정",
+    "app_form_description": "깃허브 엔터프라이즈를 플레인과 연결하세요.",
+    "app_id_title": "앱 ID",
+    "app_id_description": "깃허브 엔터프라이즈 조직에서 생성한 앱의 ID입니다.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID는 필수입니다",
+    "app_name_title": "App Slug",
+    "app_name_description": "깃허브 엔터프라이즈 조직에서 생성한 앱의 Slug입니다.",
+    "app_name_error": "App slug는 필수입니다",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "Base URL",
+    "base_url_description": "깃허브 엔터프라이즈 조직의 Base URL입니다.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "Base URL는 필수입니다",
+    "invalid_base_url_error": "Base URL이 유효하지 않습니다",
+    "client_id_title": "Client ID",
+    "client_id_description": "깃허브 엔터프라이즈 조직에서 생성한 앱의 Client ID입니다.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "Client ID는 필수입니다",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "깃허브 엔터프라이즈 조직에서 생성한 앱의 Client Secret입니다.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Client Secret는 필수입니다",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "깃허브 엔터프라이즈 조직에서 생성한 앱의 Webhook Secret입니다.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Webhook Secret는 필수입니다",
+    "private_key_title": "Private Key (Base64 encoded)",
+    "private_key_description": "깃허브 엔터프라이즈 조직에서 생성한 앱의 Private Key입니다.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Private Key는 필수입니다",
+    "connect_app": "앱 연결"
+  },
+  "silo_errors": {
+    "invalid_query_params": "제공된 쿼리 파라미터가 유효하지 않거나 필수 필드가 누락되었습니다",
+    "invalid_installation_account": "제공된 인스톨레이션 계정이 유효하지 않습니다",
+    "generic_error": "요청을 처리하는 동안 예상치 못한 오류가 발생했습니다",
+    "connection_not_found": "요청한 연결을 찾을 수 없습니다",
+    "multiple_connections_found": "하나만 예상했을 때 여러 연결이 발견되었습니다",
+    "cannot_create_multiple_connections": "이미 조직을 작업 공간과 연결했습니다. 새 연결을 추가하기 전에 기존 연결을 해제해 주세요.",
+    "installation_not_found": "요청한 인스톨레이션을 찾을 수 없습니다",
+    "user_not_found": "요청한 사용자를 찾을 수 없습니다",
+    "error_fetching_token": "인증 토큰 가져오기에 실패했습니다",
+    "invalid_app_credentials": "제공된 앱 자격 증명이 유효하지 않습니다",
+    "invalid_app_installation_id": "앱 설치에 실패했습니다"
+  },
+  "import_status": {
+    "queued": "대기 중",
+    "created": "생성됨",
+    "initiated": "시작됨",
+    "pulling": "풀링 중",
+    "timed_out": "시간 초과",
+    "pulled": "풀링 완료",
+    "progressing": "진행 중",
+    "transforming": "변환 중",
+    "transformed": "변환 완료",
+    "pushing": "푸싱 중",
+    "finished": "완료됨",
+    "error": "오류",
+    "cancelled": "취소됨"
+  }
+}
diff --git a/packages/i18n/src/locales/ko/module.json b/packages/i18n/src/locales/ko/module.json
new file mode 100644
index 0000000..36a1319
--- /dev/null
+++ b/packages/i18n/src/locales/ko/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {모듈} other {모듈}}",
+    "no_module": "모듈 없음",
+    "select": "모듈 추가"
+  }
+}
diff --git a/packages/i18n/src/locales/ko/navigation.json b/packages/i18n/src/locales/ko/navigation.json
new file mode 100644
index 0000000..86ba3b7
--- /dev/null
+++ b/packages/i18n/src/locales/ko/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "결과 없음"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "스티키",
+    "your_work": "나의 작업",
+    "projects": "프로젝트",
+    "pages": "페이지",
+    "new_work_item": "새 작업 항목",
+    "home": "홈",
+    "inbox": "받은 편지함",
+    "workspace": "작업 공간",
+    "views": "보기",
+    "analytics": "분석",
+    "work_items": "작업 항목",
+    "cycles": "주기",
+    "modules": "모듈",
+    "intake": "접수",
+    "drafts": "초안",
+    "favorites": "즐겨찾기",
+    "pro": "프로",
+    "upgrade": "업그레이드",
+    "pi_chat": "인공지능 챗",
+    "epics": "에픽스",
+    "upgrade_plan": "업그레이드 플랜",
+    "plane_pro": "플레인 프로",
+    "business": "비즈니스"
+  }
+}
diff --git a/packages/i18n/src/locales/ko/notification.json b/packages/i18n/src/locales/ko/notification.json
new file mode 100644
index 0000000..60c39f6
--- /dev/null
+++ b/packages/i18n/src/locales/ko/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "받은 편지함",
+    "page_label": "{workspace} - 받은 편지함",
+    "options": {
+      "mark_all_as_read": "모두 읽음으로 표시",
+      "mark_read": "읽음으로 표시",
+      "mark_unread": "읽지 않음으로 표시",
+      "refresh": "새로 고침",
+      "filters": "받은 편지함 필터",
+      "show_unread": "읽지 않음 표시",
+      "show_snoozed": "미루기 표시",
+      "show_archived": "아카이브 표시",
+      "mark_archive": "아카이브",
+      "mark_unarchive": "아카이브 해제",
+      "mark_snooze": "미루기",
+      "mark_unsnooze": "미루기 해제"
+    },
+    "toasts": {
+      "read": "알림이 읽음으로 표시되었습니다",
+      "unread": "알림이 읽지 않음으로 표시되었습니다",
+      "archived": "알림이 아카이브되었습니다",
+      "unarchived": "알림이 아카이브 해제되었습니다",
+      "snoozed": "알림이 미루기되었습니다",
+      "unsnoozed": "알림이 미루기 해제되었습니다"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "세부 정보를 보려면 선택하세요."
+      },
+      "all": {
+        "title": "할당된 작업 항목 없음",
+        "description": "할당된 작업 항목의 업데이트를 여기에서 확인할 수 있습니다"
+      },
+      "mentions": {
+        "title": "할당된 작업 항목 없음",
+        "description": "할당된 작업 항목의 업데이트를 여기에서 확인할 수 있습니다"
+      }
+    },
+    "tabs": {
+      "all": "모두",
+      "mentions": "멘션"
+    },
+    "filter": {
+      "assigned": "나에게 할당됨",
+      "created": "내가 생성함",
+      "subscribed": "내가 구독함"
+    },
+    "snooze": {
+      "1_day": "1일",
+      "3_days": "3일",
+      "5_days": "5일",
+      "1_week": "1주",
+      "2_weeks": "2주",
+      "custom": "사용자 정의"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/page.json b/packages/i18n/src/locales/ko/page.json
new file mode 100644
index 0000000..079864c
--- /dev/null
+++ b/packages/i18n/src/locales/ko/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "개요",
+        "empty_state": {
+          "title": "제목이 없습니다",
+          "description": "이 페이지에 제목을 추가하여 여기에서 확인해보세요."
+        }
+      },
+      "info": {
+        "label": "정보",
+        "document_info": {
+          "words": "단어",
+          "characters": "문자",
+          "paragraphs": "단락",
+          "read_time": "읽기 시간"
+        },
+        "actors_info": {
+          "edited_by": "편집자",
+          "created_by": "작성자"
+        },
+        "version_history": {
+          "label": "버전 기록",
+          "current_version": "현재 버전",
+          "highlight_changes": "변경 사항 강조 표시"
+        }
+      },
+      "assets": {
+        "label": "자산",
+        "download_button": "다운로드",
+        "empty_state": {
+          "title": "이미지가 없습니다",
+          "description": "이미지를 추가하여 여기에서 확인하세요."
+        }
+      },
+      "comments": {
+        "label": "댓글",
+        "empty_state": {
+          "title": "댓글 없음",
+          "description": "댓글을 추가하여 여기에서 확인하세요."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "스티키 이름은 100자를 초과할 수 없습니다.",
+        "already_exists": "설명이 없는 스티키가 이미 존재합니다"
+      },
+      "created": {
+        "title": "스티키 생성됨",
+        "message": "스티키가 성공적으로 생성되었습니다"
+      },
+      "not_created": {
+        "title": "스티키가 생성되지 않음",
+        "message": "스티키를 생성할 수 없습니다"
+      },
+      "updated": {
+        "title": "스티키 업데이트됨",
+        "message": "스티키가 성공적으로 업데이트되었습니다"
+      },
+      "not_updated": {
+        "title": "스티키가 업데이트되지 않음",
+        "message": "스티키를 업데이트할 수 없습니다"
+      },
+      "removed": {
+        "title": "스티키 제거됨",
+        "message": "스티키가 성공적으로 제거되었습니다"
+      },
+      "not_removed": {
+        "title": "스티키가 제거되지 않음",
+        "message": "스티키를 제거할 수 없습니다"
+      }
+    },
+    "open_button": "네비게이션 패널 열기",
+    "close_button": "네비게이션 패널 닫기",
+    "outline_floating_button": "개요 열기"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "이동",
+        "loading": "이동 중"
+      },
+      "cannot_move_to_teamspace": "비공개 및 공유 페이지는 팀스페이스로 이동할 수 없습니다.",
+      "placeholders": {
+        "workspace_to_all": "프로젝트 및 팀스페이스 검색",
+        "workspace_to_project": "프로젝트 검색",
+        "project_to_all": "프로젝트 및 팀스페이스 검색",
+        "project_to_project": "프로젝트 검색",
+        "project_to_all_with_wiki": "위키 컬렉션, 프로젝트 및 팀스페이스 검색",
+        "project_to_project_with_wiki": "위키 컬렉션 및 프로젝트 검색"
+      },
+      "toasts": {
+        "success": {
+          "title": "성공!",
+          "message": "페이지가 성공적으로 이동되었습니다."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "페이지를 이동할 수 없습니다. 나중에 다시 시도해 주세요."
+        },
+        "collection_error": {
+          "title": "위키로 이동됨",
+          "message": "페이지가 위키로 이동되었지만 선택한 컬렉션에 추가할 수 없었습니다. 페이지는 General에 그대로 유지됩니다."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "컬렉션에서 제거",
+      "success_message": "페이지가 컬렉션에서 제거되었습니다.",
+      "error_message": "페이지를 컬렉션에서 제거할 수 없습니다. 다시 시도해 주세요."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "콘텐츠 한도에 도달하여 실시간 동기화가 꺼졌습니다. 동기화를 계속하려면 새 페이지를 만들거나 중첩 페이지를 사용하세요."
+  }
+}
diff --git a/packages/i18n/src/locales/ko/power-k.json b/packages/i18n/src/locales/ko/power-k.json
new file mode 100644
index 0000000..883f1f5
--- /dev/null
+++ b/packages/i18n/src/locales/ko/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "작업 항목 일괄 삭제"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "작업 항목 액션",
+        "indicator": "작업 항목",
+        "change_state": "상태 변경",
+        "change_priority": "우선순위 변경",
+        "change_assignees": "담당자 지정",
+        "assign_to_me": "나에게 할당",
+        "unassign_from_me": "나에게서 할당 해제",
+        "change_estimate": "추정치 변경",
+        "add_to_cycle": "주기에 추가",
+        "add_to_modules": "모듈에 추가",
+        "add_labels": "레이블 추가",
+        "subscribe": "알림 구독",
+        "unsubscribe": "알림 구독 취소",
+        "delete": "삭제",
+        "copy_id": "ID 복사",
+        "copy_id_toast_success": "작업 항목 ID가 클립보드에 복사되었습니다.",
+        "copy_id_toast_error": "작업 항목 ID를 클립보드에 복사하는 중 오류가 발생했습니다.",
+        "copy_title": "제목 복사",
+        "copy_title_toast_success": "작업 항목 제목이 클립보드에 복사되었습니다.",
+        "copy_title_toast_error": "작업 항목 제목을 클립보드에 복사하는 중 오류가 발생했습니다.",
+        "copy_url": "URL 복사",
+        "copy_url_toast_success": "작업 항목 URL이 클립보드에 복사되었습니다.",
+        "copy_url_toast_error": "작업 항목 URL을 클립보드에 복사하는 중 오류가 발생했습니다."
+      },
+      "cycle": {
+        "title": "주기 액션",
+        "indicator": "주기",
+        "add_to_favorites": "즐겨찾기에 추가",
+        "remove_from_favorites": "즐겨찾기에서 제거",
+        "copy_url": "URL 복사",
+        "copy_url_toast_success": "주기 URL이 클립보드에 복사되었습니다.",
+        "copy_url_toast_error": "주기 URL을 클립보드에 복사하는 중 오류가 발생했습니다."
+      },
+      "module": {
+        "title": "모듈 액션",
+        "indicator": "모듈",
+        "add_remove_members": "멤버 추가/제거",
+        "change_status": "상태 변경",
+        "add_to_favorites": "즐겨찾기에 추가",
+        "remove_from_favorites": "즐겨찾기에서 제거",
+        "copy_url": "URL 복사",
+        "copy_url_toast_success": "모듈 URL이 클립보드에 복사되었습니다.",
+        "copy_url_toast_error": "모듈 URL을 클립보드에 복사하는 중 오류가 발생했습니다."
+      },
+      "page": {
+        "title": "페이지 액션",
+        "indicator": "페이지",
+        "lock": "잠금",
+        "unlock": "잠금 해제",
+        "make_private": "비공개로 설정",
+        "make_public": "공개로 설정",
+        "archive": "아카이브",
+        "restore": "복원",
+        "add_to_favorites": "즐겨찾기에 추가",
+        "remove_from_favorites": "즐겨찾기에서 제거",
+        "copy_url": "URL 복사",
+        "copy_url_toast_success": "페이지 URL이 클립보드에 복사되었습니다.",
+        "copy_url_toast_error": "페이지 URL을 클립보드에 복사하는 중 오류가 발생했습니다."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "새 작업 항목",
+      "create_page": "새 페이지",
+      "create_view": "새 보기",
+      "create_cycle": "새 주기",
+      "create_module": "새 모듈",
+      "create_project": "새 프로젝트",
+      "create_workspace": "새 작업 공간",
+      "create_project_automation": "새 자동화"
+    },
+    "navigation_actions": {
+      "open_workspace": "작업 공간 열기",
+      "nav_home": "홈으로 이동",
+      "nav_inbox": "받은 편지함으로 이동",
+      "nav_your_work": "나의 작업으로 이동",
+      "nav_account_settings": "계정 설정으로 이동",
+      "open_project": "프로젝트 열기",
+      "nav_projects_list": "프로젝트 목록으로 이동",
+      "nav_all_workspace_work_items": "모든 작업 항목으로 이동",
+      "nav_assigned_workspace_work_items": "할당된 작업 항목으로 이동",
+      "nav_created_workspace_work_items": "생성한 작업 항목으로 이동",
+      "nav_subscribed_workspace_work_items": "구독한 작업 항목으로 이동",
+      "nav_workspace_analytics": "작업 공간 분석으로 이동",
+      "nav_workspace_drafts": "작업 공간 초안으로 이동",
+      "nav_workspace_archives": "작업 공간 아카이브로 이동",
+      "open_workspace_setting": "작업 공간 설정 열기",
+      "nav_workspace_settings": "작업 공간 설정으로 이동",
+      "nav_project_work_items": "작업 항목으로 이동",
+      "open_project_cycle": "주기 열기",
+      "nav_project_cycles": "주기로 이동",
+      "open_project_module": "모듈 열기",
+      "nav_project_modules": "모듈로 이동",
+      "open_project_view": "프로젝트 보기 열기",
+      "nav_project_views": "프로젝트 보기로 이동",
+      "nav_project_pages": "페이지로 이동",
+      "nav_project_intake": "접수로 이동",
+      "nav_project_archives": "프로젝트 아카이브로 이동",
+      "open_project_setting": "프로젝트 설정 열기",
+      "nav_project_settings": "프로젝트 설정으로 이동",
+      "nav_workspace_active_cycle": "모든 활성 주기로 이동",
+      "nav_project_overview": "프로젝트 개요로 이동"
+    },
+    "account_actions": {
+      "sign_out": "로그아웃",
+      "workspace_invites": "작업 공간 초대"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "앱 사이드바 전환",
+      "copy_current_page_url": "현재 페이지 URL 복사",
+      "copy_current_page_url_toast_success": "현재 페이지 URL이 클립보드에 복사되었습니다.",
+      "copy_current_page_url_toast_error": "현재 페이지 URL을 클립보드에 복사하는 중 오류가 발생했습니다.",
+      "focus_top_nav_search": "검색 입력에 포커스"
+    },
+    "preferences_actions": {
+      "update_theme": "인터페이스 테마 변경",
+      "update_timezone": "시간대 변경",
+      "update_start_of_week": "주 시작 요일 변경",
+      "update_language": "인터페이스 언어 변경",
+      "toast": {
+        "theme": {
+          "success": "테마가 성공적으로 업데이트되었습니다.",
+          "error": "테마 업데이트에 실패했습니다. 다시 시도해 주세요."
+        },
+        "timezone": {
+          "success": "시간대가 성공적으로 업데이트되었습니다.",
+          "error": "시간대 업데이트에 실패했습니다. 다시 시도해 주세요."
+        },
+        "generic": {
+          "success": "환경 설정이 성공적으로 업데이트되었습니다.",
+          "error": "환경 설정 업데이트에 실패했습니다. 다시 시도해 주세요."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "키보드 단축키 열기",
+      "open_plane_documentation": "Plane 문서 열기",
+      "join_forum": "포럼 참여",
+      "report_bug": "버그 신고",
+      "chat_with_us": "문의하기"
+    },
+    "page_placeholders": {
+      "default": "명령어 또는 검색어를 입력하세요",
+      "open_workspace": "작업 공간 열기",
+      "open_project": "프로젝트 열기",
+      "open_workspace_setting": "작업 공간 설정 열기",
+      "open_project_cycle": "주기 열기",
+      "open_project_module": "모듈 열기",
+      "open_project_view": "프로젝트 보기 열기",
+      "open_project_setting": "프로젝트 설정 열기",
+      "update_work_item_state": "상태 변경",
+      "update_work_item_priority": "우선순위 변경",
+      "update_work_item_assignee": "담당자 지정",
+      "update_work_item_estimate": "추정치 변경",
+      "update_work_item_cycle": "주기에 추가",
+      "update_work_item_module": "모듈에 추가",
+      "update_work_item_labels": "레이블 추가",
+      "update_module_member": "멤버 변경",
+      "update_module_status": "상태 변경",
+      "update_theme": "테마 변경",
+      "update_timezone": "시간대 변경",
+      "update_start_of_week": "주 시작 요일 변경",
+      "update_language": "언어 변경"
+    },
+    "search_menu": {
+      "no_results": "결과를 찾을 수 없습니다",
+      "clear_search": "검색 지우기",
+      "go_to_advanced_search": "고급 검색으로 이동"
+    },
+    "footer": {
+      "workspace_level": "작업 공간 수준"
+    },
+    "group_titles": {
+      "actions": "액션",
+      "contextual": "컨텍스트",
+      "navigation": "탐색",
+      "create": "생성",
+      "general": "일반",
+      "settings": "설정",
+      "account": "계정",
+      "miscellaneous": "기타",
+      "preferences": "환경 설정",
+      "help": "도움말"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/project-settings.json b/packages/i18n/src/locales/ko/project-settings.json
new file mode 100644
index 0000000..cf07169
--- /dev/null
+++ b/packages/i18n/src/locales/ko/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "프로젝트 ID 입력",
+      "please_select_a_timezone": "시간대를 선택하세요",
+      "archive_project": {
+        "title": "프로젝트 아카이브",
+        "description": "프로젝트를 아카이브하면 사이드 내비게이션에서 프로젝트가 목록에서 제외되지만 프로젝트 페이지에서 여전히 접근할 수 있습니다. 언제든지 프로젝트를 복원하거나 삭제할 수 있습니다.",
+        "button": "프로젝트 아카이브"
+      },
+      "delete_project": {
+        "title": "프로젝트 삭제",
+        "description": "프로젝트를 삭제하면 해당 프로젝트 내의 모든 데이터와 리소스가 영구적으로 삭제되며 복구할 수 없습니다.",
+        "button": "프로젝트 삭제"
+      },
+      "toast": {
+        "success": "프로젝트가 성공적으로 업데이트되었습니다",
+        "error": "프로젝트를 업데이트할 수 없습니다. 다시 시도해주세요."
+      }
+    },
+    "members": {
+      "label": "멤버",
+      "project_lead": "프로젝트 리드",
+      "project_lead_description": "프로젝트의 프로젝트 리더를 선택하세요.",
+      "default_assignee": "기본 담당자",
+      "default_assignee_description": "프로젝트의 기본 담당자를 선택하세요.",
+      "project_subscribers": "프로젝트 구독자",
+      "project_subscribers_description": "이 프로젝트의 알림을 받을 멤버를 선택하세요.",
+      "guest_super_permissions": {
+        "title": "게스트 사용자에게 모든 작업 항목에 대한 보기 권한 부여:",
+        "sub_heading": "이렇게 하면 게스트가 모든 프로젝트 작업 항목에 대한 보기 권한을 갖게 됩니다."
+      },
+      "invite_members": {
+        "title": "멤버 초대",
+        "sub_heading": "프로젝트에서 작업할 멤버를 초대하세요.",
+        "select_co_worker": "동료 선택"
+      }
+    },
+    "states": {
+      "heading": "상태",
+      "description": "작업 항목의 진행 상황을 추적하기 위해 워크플로우 상태를 정의하고 사용자 정의하세요.",
+      "describe_this_state_for_your_members": "멤버를 위해 이 상태를 설명하세요.",
+      "empty_state": {
+        "title": "{groupKey} 그룹에 사용할 수 있는 상태 없음",
+        "description": "새 상태를 생성하세요"
+      }
+    },
+    "labels": {
+      "heading": "레이블",
+      "description": "작업 항목을 분류하고 정리할 수 있는 커스텀 레이블을 생성하세요",
+      "label_title": "레이블 제목",
+      "label_title_is_required": "레이블 제목이 필요합니다",
+      "label_max_char": "레이블 이름은 255자를 초과할 수 없습니다",
+      "toast": {
+        "error": "레이블 업데이트 중 오류 발생"
+      }
+    },
+    "estimates": {
+      "heading": "추정",
+      "description": "각 작업 항목에 필요한 노력을 추적하고 전달할 수 있는 추정 시스템을 설정하세요.",
+      "label": "추정",
+      "title": "프로젝트 추정 활성화",
+      "enable_description": "팀의 복잡성과 작업량을 전달하는 데 도움이 됩니다.",
+      "no_estimate": "추정 없음",
+      "new": "새 추정 시스템",
+      "create": {
+        "custom": "사용자 지정",
+        "start_from_scratch": "처음부터 시작",
+        "choose_template": "템플릿 선택",
+        "choose_estimate_system": "추정 시스템 선택",
+        "enter_estimate_point": "추정 입력",
+        "step": "단계 {step}/{total}",
+        "label": "추정 생성"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "추정 생성됨",
+            "message": "추정이 성공적으로 생성되었습니다"
+          },
+          "error": {
+            "title": "추정 생성 실패",
+            "message": "새 추정을 생성할 수 없습니다. 다시 시도해 주세요."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "추정 수정됨",
+            "message": "프로젝트의 추정이 업데이트되었습니다."
+          },
+          "error": {
+            "title": "추정 수정 실패",
+            "message": "추정을 수정할 수 없습니다. 다시 시도해 주세요"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "성공!",
+            "message": "추정이 활성화되었습니다."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "성공!",
+            "message": "추정이 비활성화되었습니다."
+          },
+          "error": {
+            "title": "오류!",
+            "message": "추정을 비활성화할 수 없습니다. 다시 시도해 주세요"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "견적 순서 변경됨",
+            "message": "프로젝트의 견적 순서가 변경되었습니다."
+          },
+          "error": {
+            "title": "견적 순서 변경 실패",
+            "message": "견적 순서를 변경할 수 없습니다. 다시 시도해 주세요."
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "추정 시스템 생성됨",
+            "message": "성공적으로 생성되고 활성화되었습니다"
+          },
+          "error": {
+            "title": "오류",
+            "message": "문제가 발생했습니다"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "추정은 0보다 커야 합니다.",
+        "unable_to_process": "요청을 처리할 수 없습니다. 다시 시도해 주세요.",
+        "numeric": "추정은 숫자 값이어야 합니다.",
+        "character": "추정은 문자 값이어야 합니다.",
+        "empty": "추정 값은 비어있을 수 없습니다.",
+        "already_exists": "추정 값이 이미 존재합니다.",
+        "unsaved_changes": "저장되지 않은 변경 사항이 있습니다. 완료를 클릭하기 전에 저장하세요",
+        "remove_empty": "추정은 비어있을 수 없습니다. 각 필드에 값을 입력하거나 값이 없는 필드를 제거하세요.",
+        "fill": "이 견적 필드를 작성해 주세요",
+        "repeat": "견적 값은 중복될 수 없습니다"
+      },
+      "systems": {
+        "points": {
+          "label": "포인트",
+          "fibonacci": "피보나치",
+          "linear": "선형",
+          "squares": "제곱",
+          "custom": "사용자 정의"
+        },
+        "categories": {
+          "label": "카테고리",
+          "t_shirt_sizes": "티셔츠 사이즈",
+          "easy_to_hard": "쉬움에서 어려움",
+          "custom": "사용자 정의"
+        },
+        "time": {
+          "label": "시간",
+          "hours": "시간"
+        }
+      },
+      "edit": {
+        "title": "견적 시스템 편집",
+        "add_or_update": {
+          "title": "견적 추가, 업데이트 또는 제거",
+          "description": "포인트 또는 카테고리를 추가, 업데이트 또는 제거하여 현재 시스템을 관리합니다."
+        },
+        "switch": {
+          "title": "견적 유형 변경",
+          "description": "포인트 시스템을 카테고리 시스템으로 변환하거나 그 반대로 변환합니다."
+        }
+      },
+      "switch": "견적 시스템 전환",
+      "current": "현재 견적 시스템",
+      "select": "견적 시스템 선택"
+    },
+    "automations": {
+      "label": "자동화",
+      "heading": "자동화",
+      "description": "자동화된 액션을 구성하여 프로젝트 관리 워크플로우를 간소화하고 수동 작업을 줄이세요.",
+      "auto-archive": {
+        "title": "완료된 작업 항목 자동 보관",
+        "description": "Plane은 완료되거나 취소된 작업 항목을 자동으로 보관합니다.",
+        "duration": "다음 기간 동안 닫힌 작업 항목 자동 보관"
+      },
+      "auto-close": {
+        "title": "작업 항목 자동 닫기",
+        "description": "Plane은 완료되거나 취소되지 않은 작업 항목을 자동으로 닫습니다.",
+        "duration": "다음 기간 동안 비활성 작업 항목 자동 닫기",
+        "auto_close_status": "자동 닫기 상태"
+      },
+      "auto-remind": {
+        "title": "자동 알림",
+        "description": "Plane은 이메일과 앱 알림을 통해 팀이 마감일에 따라 추진하도록 자동으로 알림을 보냅니다.",
+        "duration": "알림 전"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "레이블 없음",
+        "description": "프로젝트에서 작업 항목을 구성하고 필터링하는 데 도움이 되는 레이블을 생성하세요."
+      },
+      "estimates": {
+        "title": "추정 시스템 없음",
+        "description": "작업 항목당 작업량을 전달하는 추정 세트를 생성하세요.",
+        "primary_button": "추정 시스템 추가"
+      },
+      "integrations": {
+        "title": "구성된 인테그레이션 없음",
+        "description": "GitHub 및 기타 인테그레이션을 구성하여 프로젝트 작업 항목을 동기화하세요."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "워크플로우 활성화",
+        "description": "작업 항목 이동을 제어할 워크플로우를 설정하세요",
+        "no_states_tooltip": "워크플로우에 추가된 상태가 없습니다.",
+        "no_work_item_types_tooltip": "워크플로우에 추가된 작업 항목 유형이 없습니다.",
+        "no_states_or_work_item_types_tooltip": "워크플로우에 추가된 상태나 작업 항목 유형이 없습니다.",
+        "toast": {
+          "loading": {
+            "enabling": "워크플로우 활성화 중",
+            "disabling": "워크플로우 비활성화 중"
+          },
+          "success": {
+            "title": "성공!",
+            "message": "워크플로우가 성공적으로 활성화되었습니다."
+          },
+          "error": {
+            "title": "오류!",
+            "message": "워크플로우 활성화에 실패했습니다. 다시 시도해 주세요."
+          }
+        }
+      },
+      "heading": "워크플로우",
+      "description": "작업 항목 전환을 자동화하고 태스크가 프로젝트 파이프라인을 이동하는 방식을 제어하는 규칙을 설정하세요.",
+      "add_button": "새 워크플로우 추가",
+      "search": "워크플로우 검색",
+      "detail": {
+        "define": "워크플로우 정의",
+        "add_states": "상태 추가",
+        "unmapped_states": {
+          "title": "매핑되지 않은 상태가 감지되었습니다",
+          "description": "선택한 유형의 일부 작업 항목이 현재 이 워크플로우에 존재하지 않는 상태에 있습니다.",
+          "note": "이 워크플로우를 활성화하면 해당 항목은 이 워크플로우의 초기 상태로 자동 이동합니다.",
+          "label": "누락된 상태",
+          "tooltip": "일부 작업 항목이 이 워크플로우에 매핑되지 않은 상태에 있습니다. 검토하려면 워크플로우를 여세요."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "모든 상태가 사용 중입니다",
+          "description": "이 프로젝트에 정의된 모든 상태가 이미 현재 워크플로우에 포함되어 있습니다."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "이 워크플로우는 워크플로우에 할당되지 않은 모든 작업 항목 유형에 적용됩니다."
+      },
+      "create": {
+        "heading": "새 워크플로우 만들기",
+        "name": {
+          "placeholder": "고유한 이름 추가",
+          "validation": {
+            "max_length": "이름은 255자 미만이어야 합니다",
+            "required": "이름은 필수입니다",
+            "invalid": "이름은 문자, 숫자, 공백, 하이픈 및 아포스트로피만 포함할 수 있습니다"
+          }
+        },
+        "description": {
+          "placeholder": "간단한 설명 추가",
+          "validation": {
+            "invalid": "설명은 문자, 숫자, 공백, 하이픈 및 아포스트로피만 포함할 수 있습니다"
+          }
+        },
+        "work_item_type": {
+          "label": "작업 항목 유형"
+        },
+        "success": {
+          "title": "성공!",
+          "message": "워크플로우가 성공적으로 생성되었습니다."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "워크플로우 생성에 실패했습니다. 다시 시도해 주세요."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "성공!",
+          "message": "워크플로우가 성공적으로 업데이트되었습니다."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "워크플로우 업데이트에 실패했습니다. 다시 시도해 주세요."
+        }
+      },
+      "delete": {
+        "loading": "워크플로우 삭제 중",
+        "success": {
+          "title": "성공!",
+          "message": "워크플로우가 성공적으로 삭제되었습니다."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "워크플로우 삭제에 실패했습니다. 다시 시도해 주세요."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "성공!",
+          "message": "상태가 성공적으로 추가되었습니다."
+        },
+        "error": {
+          "title": "오류!",
+          "message": "상태 추가에 실패했습니다. 다시 시도해 주세요."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "작업 항목 유형",
+      "description": "고유한 속성을 가진 다양한 유형의 작업 항목을 생성하고 사용자 정의하세요"
+    },
+    "features": {
+      "cycles": {
+        "title": "사이클",
+        "short_title": "사이클",
+        "description": "이 프로젝트의 고유한 리듬과 속도에 적응하는 유연한 기간으로 작업을 예약합니다.",
+        "toggle_title": "사이클 활성화",
+        "toggle_description": "집중된 기간에 작업을 계획합니다."
+      },
+      "modules": {
+        "title": "모듈",
+        "short_title": "모듈",
+        "description": "전담 리더와 담당자가 있는 하위 프로젝트로 작업을 구성합니다.",
+        "toggle_title": "모듈 활성화",
+        "toggle_description": "프로젝트 멤버가 모듈을 생성하고 편집할 수 있습니다."
+      },
+      "views": {
+        "title": "보기",
+        "short_title": "보기",
+        "description": "사용자 정의 정렬, 필터 및 표시 옵션을 저장하거나 팀과 공유합니다.",
+        "toggle_title": "보기 활성화",
+        "toggle_description": "프로젝트 멤버가 보기를 생성하고 편집할 수 있습니다."
+      },
+      "pages": {
+        "title": "페이지",
+        "short_title": "페이지",
+        "description": "자유 형식 콘텐츠를 생성하고 편집합니다: 메모, 문서, 무엇이든.",
+        "toggle_title": "페이지 활성화",
+        "toggle_description": "프로젝트 멤버가 페이지를 생성하고 편집할 수 있습니다."
+      },
+      "intake": {
+        "intake_responsibility": "인테이크 책임",
+        "intake_sources": "인테이크 소스",
+        "title": "접수",
+        "short_title": "접수",
+        "description": "워크플로를 방해하지 않고 비회원이 버그, 피드백 및 제안을 공유할 수 있도록 합니다.",
+        "toggle_title": "접수 활성화",
+        "toggle_description": "프로젝트 멤버가 앱 내에서 접수 요청을 생성할 수 있도록 허용합니다.",
+        "toggle_tooltip_on": "프로젝트 관리자에게 활성화를 요청하세요.",
+        "toggle_tooltip_off": "프로젝트 관리자에게 비활성화를 요청하세요.",
+        "notify_assignee": {
+          "title": "담당자에게 알림",
+          "description": "새로운 인테이크 요청의 경우 기본 담당자가 알림을 통해 알림을 받습니다"
+        },
+        "in_app": {
+          "title": "앱 내",
+          "description": "기존 작업 항목을 방해하지 않고 워크스페이스의 멤버와 게스트로부터 새로운 작업 항목을 받습니다."
+        },
+        "email": {
+          "title": "이메일",
+          "description": "Plane 이메일 주소로 이메일을 보내는 누구로부터든 새로운 작업 항목을 수집합니다.",
+          "fieldName": "이메일 ID"
+        },
+        "form": {
+          "title": "양식",
+          "description": "전용 보안 양식을 통해 워크스페이스 외부 사용자가 잠재적인 새로운 작업 항목을 만들 수 있도록 합니다.",
+          "fieldName": "기본 양식 URL",
+          "create_forms": "작업 항목 유형을 사용하여 양식 만들기",
+          "manage_forms": "양식 관리",
+          "manage_forms_tooltip": "워크스페이스 관리자에게 관리를 요청하세요.",
+          "create_form": "양식 만들기",
+          "edit_form": "양식 세부 정보 편집",
+          "form_title": "양식 제목",
+          "form_title_required": "양식 제목은 필수입니다",
+          "work_item_type": "작업 항목 유형",
+          "remove_property": "속성 제거",
+          "select_properties": "속성 선택",
+          "search_placeholder": "속성 검색",
+          "toasts": {
+            "success_create": "인테이크 양식이 성공적으로 생성되었습니다",
+            "success_update": "인테이크 양식이 성공적으로 업데이트되었습니다",
+            "error_create": "인테이크 양식 생성에 실패했습니다",
+            "error_update": "인테이크 양식 업데이트에 실패했습니다"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "담당자 설정 중...",
+            "success": {
+              "title": "성공!",
+              "message": "담당자가 성공적으로 설정되었습니다."
+            },
+            "error": {
+              "title": "오류!",
+              "message": "담당자 설정 중 문제가 발생했습니다. 다시 시도해 주세요."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "시간 추적",
+        "short_title": "시간 추적",
+        "description": "작업 항목 및 프로젝트에 소요된 시간을 기록합니다.",
+        "toggle_title": "시간 추적 활성화",
+        "toggle_description": "프로젝트 멤버가 작업 시간을 기록할 수 있습니다."
+      },
+      "milestones": {
+        "title": "마일스톤",
+        "short_title": "마일스톤",
+        "description": "마일스톤은 작업 항목을 공유 완료 날짜에 맞춰 정렬하는 레이어를 제공합니다.",
+        "toggle_title": "마일스톤 활성화",
+        "toggle_description": "마일스톤 마감일별로 작업 항목을 구성합니다."
+      },
+      "toasts": {
+        "loading": "프로젝트 기능 업데이트 중...",
+        "success": "프로젝트 기능이 성공적으로 업데이트되었습니다.",
+        "error": "프로젝트 기능 업데이트 중 문제가 발생했습니다. 다시 시도해 주세요."
+      }
+    },
+    "project_updates": {
+      "heading": "프로젝트 업데이트",
+      "description": "이 프로젝트에 대한 통합된 추적 및 진행 상황 모니터링"
+    },
+    "templates": {
+      "heading": "템플릿",
+      "description": "템플릿을 사용하면 프로젝트, 작업 항목, 페이지를 생성하는 데 걸리는 시간을 80% 절약할 수 있습니다."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "사이클 자동 일정",
+        "description": "수동 설정 없이 사이클을 유지합니다.",
+        "tooltip": "선택한 일정에 따라 새로운 사이클을 자동으로 생성합니다.",
+        "edit_button": "편집",
+        "form": {
+          "cycle_title": {
+            "label": "사이클 제목",
+            "placeholder": "제목",
+            "tooltip": "제목은 후속 사이클에 번호가 추가됩니다. 예: 디자인 - 1/2/3",
+            "validation": {
+              "required": "사이클 제목은 필수입니다",
+              "max_length": "제목은 255자를 초과할 수 없습니다"
+            }
+          },
+          "cycle_duration": {
+            "label": "사이클 기간",
+            "unit": "주",
+            "validation": {
+              "required": "사이클 기간은 필수입니다",
+              "min": "사이클 기간은 최소 1주 이상이어야 합니다",
+              "max": "사이클 기간은 30주를 초과할 수 없습니다",
+              "positive": "사이클 기간은 양수여야 합니다"
+            }
+          },
+          "cooldown_period": {
+            "label": "쿨다운 기간",
+            "unit": "일",
+            "tooltip": "다음 사이클이 시작되기 전 사이클 간 휴지 기간입니다.",
+            "validation": {
+              "required": "쿨다운 기간은 필수입니다",
+              "negative": "쿨다운 기간은 음수일 수 없습니다"
+            }
+          },
+          "start_date": {
+            "label": "사이클 시작일",
+            "validation": {
+              "required": "시작일은 필수입니다",
+              "past": "시작일은 과거일 수 없습니다"
+            }
+          },
+          "number_of_cycles": {
+            "label": "미래 사이클 수",
+            "validation": {
+              "required": "사이클 수는 필수입니다",
+              "min": "최소 1개의 사이클이 필요합니다",
+              "max": "3개 이상의 사이클을 예약할 수 없습니다"
+            }
+          },
+          "auto_rollover": {
+            "label": "작업 항목 자동 이월",
+            "tooltip": "사이클이 완료되는 날, 완료되지 않은 모든 작업 항목을 다음 사이클로 이동합니다."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "사이클 자동 일정 활성화 중",
+            "loading_disable": "사이클 자동 일정 비활성화 중",
+            "success": {
+              "title": "성공!",
+              "message": "사이클 자동 일정이 성공적으로 전환되었습니다."
+            },
+            "error": {
+              "title": "오류!",
+              "message": "사이클 자동 일정 전환에 실패했습니다."
+            }
+          },
+          "save": {
+            "loading": "사이클 자동 일정 구성 저장 중",
+            "success": {
+              "title": "성공!",
+              "message_create": "사이클 자동 일정 구성이 성공적으로 저장되었습니다.",
+              "message_update": "사이클 자동 일정 구성이 성공적으로 업데이트되었습니다."
+            },
+            "error": {
+              "title": "오류!",
+              "message_create": "사이클 자동 일정 구성 저장에 실패했습니다.",
+              "message_update": "사이클 자동 일정 구성 업데이트에 실패했습니다."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/project.json b/packages/i18n/src/locales/ko/project.json
new file mode 100644
index 0000000..7175491
--- /dev/null
+++ b/packages/i18n/src/locales/ko/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "생성일",
+      "updated_at": "업데이트일",
+      "name": "이름"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "주기 추가",
+    "more_details": "자세히 보기",
+    "cycle": "주기",
+    "update_cycle": "주기 업데이트",
+    "create_cycle": "주기 생성",
+    "no_matching_cycles": "일치하는 주기 없음",
+    "remove_filters_to_see_all_cycles": "모든 주기를 보려면 필터를 제거하세요",
+    "remove_search_criteria_to_see_all_cycles": "모든 주기를 보려면 검색 기준을 제거하세요",
+    "only_completed_cycles_can_be_archived": "완료된 주기만 아카이브할 수 있습니다",
+    "start_date": "시작일",
+    "end_date": "종료일",
+    "in_your_timezone": "내 시간대",
+    "transfer_work_items": "{count}개의 작업 항목 이전",
+    "transfer": {
+      "no_cycles_available": "작업 항목을 전송할 수 있는 다른 사이클이 없습니다."
+    },
+    "date_range": "날짜 범위",
+    "add_date": "날짜 추가",
+    "active_cycle": {
+      "label": "활성 주기",
+      "progress": "진행",
+      "chart": "버다운 차트",
+      "priority_issue": "우선순위 작업 항목",
+      "assignees": "담당자",
+      "issue_burndown": "작업 항목 버다운",
+      "ideal": "이상적인",
+      "current": "현재",
+      "labels": "레이블",
+      "trailing": "뒤처짐",
+      "leading": "앞섬"
+    },
+    "upcoming_cycle": {
+      "label": "다가오는 주기"
+    },
+    "completed_cycle": {
+      "label": "완료된 주기"
+    },
+    "status": {
+      "days_left": "남은 일수",
+      "completed": "완료됨",
+      "yet_to_start": "시작되지 않음",
+      "in_progress": "진행 중",
+      "draft": "초안"
+    },
+    "action": {
+      "restore": {
+        "title": "주기 복원",
+        "success": {
+          "title": "주기 복원됨",
+          "description": "주기가 복원되었습니다."
+        },
+        "failed": {
+          "title": "주기 복원 실패",
+          "description": "주기를 복원할 수 없습니다. 다시 시도해주세요."
+        }
+      },
+      "favorite": {
+        "loading": "주기를 즐겨찾기에 추가 중",
+        "success": {
+          "description": "주기가 즐겨찾기에 추가되었습니다.",
+          "title": "성공!"
+        },
+        "failed": {
+          "description": "주기를 즐겨찾기에 추가할 수 없습니다. 다시 시도해주세요.",
+          "title": "오류!"
+        }
+      },
+      "unfavorite": {
+        "loading": "주기를 즐겨찾기에서 제거 중",
+        "success": {
+          "description": "주기가 즐겨찾기에서 제거되었습니다.",
+          "title": "성공!"
+        },
+        "failed": {
+          "description": "주기를 즐겨찾기에서 제거할 수 없습니다. 다시 시도해주세요.",
+          "title": "오류!"
+        }
+      },
+      "update": {
+        "loading": "주기 업데이트 중",
+        "success": {
+          "description": "주기가 성공적으로 업데이트되었습니다.",
+          "title": "성공!"
+        },
+        "failed": {
+          "description": "주기 업데이트 중 오류 발생. 다시 시도해주세요.",
+          "title": "오류!"
+        },
+        "error": {
+          "already_exists": "주어진 날짜에 이미 주기가 있습니다. 초안 주기를 생성하려면 두 날짜를 모두 제거하세요."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "작업을 주기로 그룹화하고 시간 상자화하세요.",
+        "description": "작업을 시간 상자로 나누고, 프로젝트 마감일에서 역으로 날짜를 설정하며, 팀으로서 실질적인 진전을 이루세요.",
+        "primary_button": {
+          "text": "첫 번째 주기 설정",
+          "comic": {
+            "title": "주기는 반복적인 시간 상자입니다.",
+            "description": "스프린트, 반복 또는 주간 또는 격주로 작업을 추적하는 데 사용하는 다른 용어는 모두 주기입니다."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "주기에 추가된 작업 항목 없음",
+        "description": "이 주기 내에서 시간 상자화하고 전달하려는 작업 항목을 추가하거나 생성하세요",
+        "primary_button": {
+          "text": "새 작업 항목 생성"
+        },
+        "secondary_button": {
+          "text": "기존 작업 항목 추가"
+        }
+      },
+      "completed_no_issues": {
+        "title": "주기에 작업 항목 없음",
+        "description": "주기에 작업 항목이 없습니다. 작업 항목이 전송되었거나 숨겨져 있습니다. 숨겨진 작업 항목을 보려면 표시 속성을 적절히 업데이트하세요."
+      },
+      "active": {
+        "title": "활성 주기 없음",
+        "description": "활성 주기에는 오늘 날짜가 범위 내에 포함된 모든 기간이 포함됩니다. 여기에서 활성 주기의 진행 상황과 세부 정보를 확인하세요."
+      },
+      "archived": {
+        "title": "아카이브된 주기 없음",
+        "description": "프로젝트를 정리하려면 완료된 주기를 아카이브하세요. 아카이브된 주기는 여기에서 찾을 수 있습니다."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "프로젝트에 대한 필터링된 뷰를 저장하세요. 필요한 만큼 생성하세요",
+        "description": "뷰는 자주 사용하는 필터 또는 쉽게 접근하고 싶은 필터 세트입니다. 프로젝트의 모든 동료가 모든 사람의 뷰를 보고 자신에게 가장 적합한 뷰를 선택할 수 있습니다.",
+        "primary_button": {
+          "text": "첫 번째 뷰 생성",
+          "comic": {
+            "title": "뷰는 작업 항목 속성 위에서 작동합니다.",
+            "description": "여기에서 원하는 만큼의 속성을 필터로 사용하여 뷰를 생성할 수 있습니다."
+          }
+        },
+        "filter": {
+          "title": "일치하는 뷰 없음",
+          "description": "검색 기준과 일치하는 뷰가 없습니다.\n 대신 새 뷰를 생성하세요."
+        }
+      },
+      "no_archived_issues": {
+        "title": "아직 아카이브된 작업 항목이 없습니다",
+        "description": "수동으로 또는 자동화를 통해 완료되거나 취소된 작업 항목을 아카이브할 수 있습니다. 아카이브되면 여기에서 찾을 수 있습니다.",
+        "primary_button": {
+          "text": "자동화 설정"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "적용된 필터와 일치하는 작업 항목을 찾을 수 없습니다",
+        "secondary_button": {
+          "text": "모든 필터 지우기"
+        }
+      },
+      "public": {
+        "title": "아직 공개 페이지가 없습니다",
+        "description": "프로젝트의 모든 사람과 공유된 페이지를 여기에서 확인하세요.",
+        "primary_button": {
+          "text": "첫 번째 페이지 생성"
+        }
+      },
+      "archived": {
+        "title": "아직 아카이브된 페이지가 없습니다",
+        "description": "레이더에 없는 페이지를 아카이브하세요. 필요할 때 여기에서 접근하세요."
+      },
+      "shared": {
+        "title": "아직 공유된 페이지가 없습니다",
+        "description": "다른 사람이 공유한 페이지가 여기에 표시됩니다."
+      }
+    },
+    "delete_view": {
+      "title": "이 뷰를 삭제하시겠습니까?",
+      "content": "확인하면 이 뷰에 대해 선택한 모든 정렬, 필터 및 표시 옵션 + 레이아웃이 복원할 수 없는 방식으로 영구적으로 삭제됩니다."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "작업 항목을 생성하고 누군가에게 할당하세요, 심지어 자신에게도",
+        "description": "작업 항목을 작업, 작업, 작업 또는 JTBD로 생각하세요. 작업 항목과 하위 작업 항목은 일반적으로 팀원에게 할당된 시간 기반 작업입니다. 팀은 작업 항목을 생성, 할당 및 완료하여 프로젝트 목표를 향해 나아갑니다.",
+        "primary_button": {
+          "text": "첫 번째 작업 항목 생성",
+          "comic": {
+            "title": "작업 항목은 Plane의 구성 요소입니다.",
+            "description": "Plane UI 재설계, 회사 리브랜딩 또는 새로운 연료 주입 시스템 출시와 같은 작업 항목은 하위 작업 항목이 있을 가능성이 큽니다."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "아카이브된 작업 항목 없음",
+        "description": "수동으로 또는 자동화를 통해 완료되거나 취소된 작업 항목을 아카이브할 수 있습니다. 아카이브된 항목은 여기에서 찾을 수 있습니다.",
+        "primary_button": {
+          "text": "자동화 설정"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "적용된 필터와 일치하는 작업 항목 없음",
+        "secondary_button": {
+          "text": "모든 필터 지우기"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "모듈 추가",
+    "update_module": "모듈 업데이트",
+    "create_module": "모듈 생성",
+    "archive_module": "모듈 아카이브",
+    "restore_module": "모듈 복원",
+    "delete_module": "모듈 삭제",
+    "empty_state": {
+      "general": {
+        "title": "프로젝트 마일스톤을 모듈로 매핑하고 집계된 작업을 쉽게 추적하세요.",
+        "description": "논리적이고 계층적인 부모에 속하는 작업 항목 그룹이 모듈을 형성합니다. 이를 프로젝트 마일스톤별로 작업을 추적하는 방법으로 생각하세요. 모듈은 자체 기간과 마감일을 가지며, 마일스톤에 얼마나 가까운지 또는 먼지를 확인하는 데 도움이 되는 분석을 제공합니다.",
+        "primary_button": {
+          "text": "첫 번째 모듈 생성",
+          "comic": {
+            "title": "모듈은 계층별로 작업을 그룹화하는 데 도움이 됩니다.",
+            "description": "카트 모듈, 섀시 모듈 및 창고 모듈은 모두 이 그룹화의 좋은 예입니다."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "모듈에 작업 항목 없음",
+        "description": "이 모듈의 일부로 완료하려는 작업 항목을 생성하거나 추가하세요",
+        "primary_button": {
+          "text": "새 작업 항목 생성"
+        },
+        "secondary_button": {
+          "text": "기존 작업 항목 추가"
+        }
+      },
+      "archived": {
+        "title": "아카이브된 모듈 없음",
+        "description": "프로젝트를 정리하려면 완료되거나 취소된 모듈을 아카이브하세요. 아카이브된 모듈은 여기에서 찾을 수 있습니다."
+      },
+      "sidebar": {
+        "in_active": "이 모듈은 아직 활성화되지 않았습니다.",
+        "invalid_date": "유효하지 않은 날짜입니다. 유효한 날짜를 입력하세요."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "모듈 아카이브",
+      "archive_module_description": "완료되거나 취소된 모듈만 아카이브할 수 있습니다.",
+      "delete_module": "모듈 삭제"
+    },
+    "toast": {
+      "copy": {
+        "success": "모듈 링크가 클립보드에 복사되었습니다"
+      },
+      "delete": {
+        "success": "모듈이 성공적으로 삭제되었습니다",
+        "error": "모듈 삭제 실패"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "메모, 문서 또는 전체 지식 기반을 작성하세요. Galileo, Plane의 AI 도우미가 시작을 도와줍니다",
+        "description": "페이지는 Plane에서 생각을 정리하는 공간입니다. 회의 메모를 작성하고, 쉽게 형식을 지정하고, 작업 항목을 포함하고, 구성 요소 라이브러리를 사용하여 레이아웃을 작성하고, 모든 것을 프로젝트의 맥락에서 유지하세요. 문서를 빠르게 작성하려면 단축키나 버튼 클릭으로 Galileo, Plane의 AI를 호출하세요.",
+        "primary_button": {
+          "text": "첫 번째 페이지 생성"
+        }
+      },
+      "private": {
+        "title": "비공개 페이지 없음",
+        "description": "비공개 생각을 여기에 보관하세요. 공유할 준비가 되면 팀이 클릭 한 번으로 접근할 수 있습니다.",
+        "primary_button": {
+          "text": "첫 번째 페이지 생성"
+        }
+      },
+      "public": {
+        "title": "공개 페이지 없음",
+        "description": "프로젝트의 모든 사람과 공유된 페이지를 여기에서 확인하세요.",
+        "primary_button": {
+          "text": "첫 번째 페이지 생성"
+        }
+      },
+      "archived": {
+        "title": "아카이브된 페이지 없음",
+        "description": "레이더에 없는 페이지를 아카이브하세요. 필요할 때 여기에서 접근하세요."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "프로젝트에 접수가 활성화되지 않았습니다.",
+        "description": "접수는 프로젝트로 들어오는 요청을 관리하고 이를 워크플로우의 작업 항목으로 추가하는 데 도움이 됩니다. 프로젝트 설정에서 접수를 활성화하여 요청을 관리하세요.",
+        "primary_button": {
+          "text": "기능 관리"
+        }
+      },
+      "cycle": {
+        "title": "이 프로젝트에 주기가 활성화되지 않았습니다.",
+        "description": "작업을 시간 상자로 나누고, 프로젝트 마감일에서 역으로 날짜를 설정하며, 팀으로서 실질적인 진전을 이루세요. 프로젝트에 주기 기능을 활성화하여 사용하세요.",
+        "primary_button": {
+          "text": "기능 관리"
+        }
+      },
+      "module": {
+        "title": "프로젝트에 모듈이 활성화되지 않았습니다.",
+        "description": "모듈은 프로젝트의 구성 요소입니다. 프로젝트 설정에서 모듈을 활성화하여 사용하세요.",
+        "primary_button": {
+          "text": "기능 관리"
+        }
+      },
+      "page": {
+        "title": "프로젝트에 페이지가 활성화되지 않았습니다.",
+        "description": "페이지는 프로젝트의 구성 요소입니다. 프로젝트 설정에서 페이지를 활성화하여 사용하세요.",
+        "primary_button": {
+          "text": "기능 관리"
+        }
+      },
+      "view": {
+        "title": "프로젝트에 뷰가 활성화되지 않았습니다.",
+        "description": "뷰는 프로젝트의 구성 요소입니다. 프로젝트 설정에서 뷰를 활성화하여 사용하세요.",
+        "primary_button": {
+          "text": "기능 관리"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "백로그",
+      "planned": "계획됨",
+      "in_progress": "진행 중",
+      "paused": "일시 중지됨",
+      "completed": "완료됨",
+      "cancelled": "취소됨"
+    },
+    "layout": {
+      "list": "목록 레이아웃",
+      "board": "갤러리 레이아웃",
+      "timeline": "타임라인 레이아웃"
+    },
+    "order_by": {
+      "name": "이름",
+      "progress": "진행",
+      "issues": "작업 항목 수",
+      "due_date": "마감일",
+      "created_at": "생성일",
+      "manual": "수동"
+    }
+  },
+  "project_members": {
+    "full_name": "성명",
+    "display_name": "표시 이름",
+    "email": "이메일",
+    "joining_date": "가입일",
+    "role": "역할"
+  },
+  "project": {
+    "members_import": {
+      "title": "CSV에서 구성원 가져오기",
+      "description": "다음 열이 포함된 CSV 업로드: 이메일 및 역할(5=게스트, 15=멤버, 20=관리자). 사용자는 이미 워크스페이스 멤버여야 합니다.",
+      "download_sample": "샘플 CSV 다운로드",
+      "dropzone": {
+        "active": "CSV 파일을 여기에 놓으세요",
+        "inactive": "드래그 앤 드롭 또는 클릭하여 업로드",
+        "file_type": ".csv 파일만 지원됩니다"
+      },
+      "buttons": {
+        "cancel": "취소",
+        "import": "가져오기",
+        "try_again": "다시 시도",
+        "close": "닫기",
+        "done": "완료"
+      },
+      "progress": {
+        "uploading": "업로드 중...",
+        "importing": "가져오는 중..."
+      },
+      "summary": {
+        "title": {
+          "complete": "가져오기 완료"
+        },
+        "message": {
+          "success": "프로젝트에 {count}명의 구성원을 가져왔습니다.",
+          "no_imports": "CSV 파일에서 새 구성원을 가져오지 못했습니다."
+        },
+        "stats": {
+          "added": "추가됨",
+          "reactivated": "다시 활성화됨",
+          "already_members": "이미 멤버",
+          "skipped": "건너뜀"
+        },
+        "download_errors": "건너뛴 세부 정보 다운로드"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "잘못된 파일",
+          "message": "CSV 파일만 지원됩니다."
+        },
+        "import_failed": {
+          "title": "가져오기 실패",
+          "message": "문제가 발생했습니다."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/settings.json b/packages/i18n/src/locales/ko/settings.json
new file mode 100644
index 0000000..74a2892
--- /dev/null
+++ b/packages/i18n/src/locales/ko/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "이메일 변경",
+        "description": "확인 링크를 받으려면 새 이메일 주소를 입력하세요.",
+        "toasts": {
+          "success_title": "성공!",
+          "success_message": "이메일이 업데이트되었습니다. 다시 로그인하세요."
+        },
+        "form": {
+          "email": {
+            "label": "새 이메일",
+            "placeholder": "이메일을 입력하세요",
+            "errors": {
+              "required": "이메일은 필수입니다",
+              "invalid": "유효하지 않은 이메일입니다",
+              "exists": "이미 존재하는 이메일입니다. 다른 주소를 사용하세요.",
+              "validation_failed": "이메일 확인에 실패했습니다. 다시 시도하세요."
+            }
+          },
+          "code": {
+            "label": "고유 코드",
+            "placeholder": "123456",
+            "helper_text": "인증 코드가 새 이메일로 전송되었습니다.",
+            "errors": {
+              "required": "고유 코드는 필수입니다",
+              "invalid": "잘못된 인증 코드입니다. 다시 시도하세요."
+            }
+          }
+        },
+        "actions": {
+          "continue": "계속",
+          "confirm": "확인",
+          "cancel": "취소"
+        },
+        "states": {
+          "sending": "전송 중…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "환경 설정",
+      "description": "작업 방식에 맞게 앱 환경을 사용자 정의하세요"
+    },
+    "notifications": {
+      "heading": "이메일 알림",
+      "description": "구독한 작업 항목에 대한 최신 정보를 유지하세요. 알림을 받으려면 이 기능을 활성화하세요.",
+      "select_default_view": "기본 보기 선택",
+      "compact": "컴팩트",
+      "full": "전체 화면"
+    },
+    "security": {
+      "heading": "보안"
+    },
+    "api_tokens": {
+      "title": "퍼스널 액세스 토큰",
+      "description": "보안 API 토큰을 생성하여 외부 시스템 및 애플리케이션과 데이터를 통합하세요."
+    },
+    "activity": {
+      "heading": "활동",
+      "description": "모든 프로젝트 및 작업 항목에 걸친 최근 작업과 변경 사항을 추적하세요."
+    },
+    "connections": {
+      "title": "커넥션",
+      "heading": "커넥션",
+      "description": "작업 공간 연결 설정을 관리하세요."
+    }
+  },
+  "profile": {
+    "label": "프로필",
+    "page_label": "나의 작업",
+    "work": "작업",
+    "details": {
+      "joined_on": "가입일",
+      "time_zone": "시간대"
+    },
+    "stats": {
+      "workload": "작업량",
+      "overview": "개요",
+      "created": "생성된 작업 항목",
+      "assigned": "할당된 작업 항목",
+      "subscribed": "구독된 작업 항목",
+      "state_distribution": {
+        "title": "상태별 작업 항목",
+        "empty": "작업 항목을 생성하여 상태별 그래프에서 분석을 확인하세요."
+      },
+      "priority_distribution": {
+        "title": "우선순위별 작업 항목",
+        "empty": "작업 항목을 생성하여 우선순위별 그래프에서 분석을 확인하세요."
+      },
+      "recent_activity": {
+        "title": "최근 활동",
+        "empty": "데이터를 찾을 수 없습니다. 입력을 확인하세요",
+        "button": "오늘의 활동 다운로드",
+        "button_loading": "다운로드 중"
+      }
+    },
+    "actions": {
+      "profile": "프로필",
+      "security": "보안",
+      "activity": "활동",
+      "preferences": "환경 설정",
+      "notifications": "알림",
+      "api-tokens": "퍼스널 액세스 토큰",
+      "connections": "커넥션"
+    },
+    "tabs": {
+      "summary": "요약",
+      "assigned": "할당됨",
+      "created": "생성됨",
+      "subscribed": "구독됨",
+      "activity": "활동"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "아직 활동 없음",
+        "description": "새 작업 항목을 생성하여 시작하세요! 세부 정보와 속성을 추가하세요. Plane에서 더 많은 것을 탐색하여 활동을 확인하세요."
+      },
+      "assigned": {
+        "title": "할당된 작업 항목 없음",
+        "description": "할당된 작업 항목을 여기에서 추적할 수 있습니다."
+      },
+      "created": {
+        "title": "작업 항목 없음",
+        "description": "생성한 모든 작업 항목이 여기에 표시됩니다. 여기에서 직접 추적하세요."
+      },
+      "subscribed": {
+        "title": "작업 항목 없음",
+        "description": "관심 있는 작업 항목을 구독하고 여기에서 모두 추적하세요."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "시스템 기본값"
+      },
+      "light": {
+        "label": "라이트"
+      },
+      "dark": {
+        "label": "다크"
+      },
+      "light_contrast": {
+        "label": "라이트 고대비"
+      },
+      "dark_contrast": {
+        "label": "다크 고대비"
+      },
+      "custom": {
+        "label": "사용자 정의 테마"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/stickies.json b/packages/i18n/src/locales/ko/stickies.json
new file mode 100644
index 0000000..5ea115a
--- /dev/null
+++ b/packages/i18n/src/locales/ko/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "나의 스티키",
+    "placeholder": "여기에 입력하려면 클릭하세요",
+    "all": "모든 스티키",
+    "no-data": "아이디어를 적어두거나, 유레카를 기록하거나, 영감을 기록하세요. 스티키를 추가하여 시작하세요.",
+    "add": "스티키 추가",
+    "search_placeholder": "제목으로 검색",
+    "delete": "스티키 삭제",
+    "delete_confirmation": "이 스티키를 삭제하시겠습니까?",
+    "empty_state": {
+      "simple": "아이디어를 적어두거나, 유레카를 기록하거나, 영감을 기록하세요. 스티키를 추가하여 시작하세요.",
+      "general": {
+        "title": "스티키는 즉석에서 작성하는 빠른 메모와 할 일입니다.",
+        "description": "스티키를 생성하여 생각과 아이디어를 쉽게 캡처하고 언제 어디서나 접근할 수 있습니다.",
+        "primary_button": {
+          "text": "스티키 추가"
+        }
+      },
+      "search": {
+        "title": "일치하는 스티키가 없습니다.",
+        "description": "다른 용어를 시도하거나 검색이 올바른지 확신하는 경우 알려주세요.",
+        "primary_button": {
+          "text": "스티키 추가"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "스티키 이름은 100자를 초과할 수 없습니다.",
+        "already_exists": "설명이 없는 스티키가 이미 존재합니다"
+      },
+      "created": {
+        "title": "스티키 생성됨",
+        "message": "스티키가 성공적으로 생성되었습니다"
+      },
+      "not_created": {
+        "title": "스티키 생성되지 않음",
+        "message": "스티키를 생성할 수 없습니다"
+      },
+      "updated": {
+        "title": "스티키 업데이트됨",
+        "message": "스티키가 성공적으로 업데이트되었습니다"
+      },
+      "not_updated": {
+        "title": "스티키 업데이트되지 않음",
+        "message": "스티키를 업데이트할 수 없습니다"
+      },
+      "removed": {
+        "title": "스티키 제거됨",
+        "message": "스티키가 성공적으로 제거되었습니다"
+      },
+      "not_removed": {
+        "title": "스티키 제거되지 않음",
+        "message": "스티키를 제거할 수 없습니다"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/template.json b/packages/i18n/src/locales/ko/template.json
new file mode 100644
index 0000000..aeb7915
--- /dev/null
+++ b/packages/i18n/src/locales/ko/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "템플릿",
+      "description": "템플릿을 사용하면 프로젝트, 워크 아이템 및 페이지를 만드는 데 소요되는 시간의 80%를 절약할 수 있습니다.",
+      "new_project_template": "새 프로젝트 템플릿",
+      "new_work_item_template": "새 작업 항목 템플릿",
+      "new_page_template": "새 페이지 템플릿",
+      "options": {
+        "project": {
+          "label": "프로젝트 템플릿"
+        },
+        "work_item": {
+          "label": "워크 아이템 템플릿"
+        },
+        "page": {
+          "label": "페이지 템플릿"
+        }
+      },
+      "create_template": {
+        "label": "템플릿 생성",
+        "no_permission": {
+          "project": "템플릿을 생성하려면 프로젝트 관리자에게 문의하세요",
+          "workspace": "템플릿을 생성하려면 워크스페이스 관리자에게 문의하세요"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "템플릿 사용",
+          "loading": "사용 중"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "워크스페이스에서 파생됨"
+        },
+        "project": {
+          "info": "프로젝트에서 파생됨"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "프로젝트 템플릿의 이름을 지정하세요.",
+              "validation": {
+                "required": "템플릿 이름이 필요합니다",
+                "maxLength": "템플릿 이름은 255자 미만이어야 합니다"
+              }
+            },
+            "description": {
+              "placeholder": "이 템플릿을 언제 어떻게 사용할지 설명하세요."
+            }
+          },
+          "name": {
+            "placeholder": "프로젝트의 이름을 지정하세요.",
+            "validation": {
+              "required": "프로젝트 타이틀이 필요합니다",
+              "maxLength": "프로젝트 타이틀은 255자 미만이어야 합니다"
+            }
+          },
+          "description": {
+            "placeholder": "이 프로젝트의 목적과 목표를 설명하세요."
+          },
+          "button": {
+            "create": "프로젝트 템플릿 생성",
+            "update": "프로젝트 템플릿 업데이트"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "워크 아이템 템플릿의 이름을 지정하세요.",
+              "validation": {
+                "required": "템플릿 이름이 필요합니다",
+                "maxLength": "템플릿 이름은 255자 미만이어야 합니다"
+              }
+            },
+            "description": {
+              "placeholder": "이 템플릿을 언제 어떻게 사용할지 설명하세요."
+            }
+          },
+          "name": {
+            "placeholder": "이 워크 아이템에 타이틀을 지정하세요.",
+            "validation": {
+              "required": "워크 아이템 타이틀이 필요합니다",
+              "maxLength": "워크 아이템 타이틀은 255자 미만이어야 합니다"
+            }
+          },
+          "description": {
+            "placeholder": "이 작업을 완료했을 때 무엇을 달성할 것인지 명확하게 이 워크 아이템을 설명하세요."
+          },
+          "button": {
+            "create": "워크 아이템 템플릿 생성",
+            "update": "워크 아이템 템플릿 업데이트"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "페이지 템플릿의 이름을 지정하세요.",
+              "validation": {
+                "required": "템플릿 이름이 필요합니다",
+                "maxLength": "템플릿 이름은 255자 미만이어야 합니다"
+              }
+            },
+            "description": {
+              "placeholder": "이 템플릿을 언제 어떻게 사용할지 설명하세요."
+            }
+          },
+          "name": {
+            "placeholder": "제목 없음",
+            "validation": {
+              "maxLength": "페이지 이름은 255자 미만이어야 합니다"
+            }
+          },
+          "button": {
+            "create": "페이지 템플릿 생성",
+            "update": "페이지 템플릿 업데이트"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {게시 설정} other {마켓플레이스에 게시}}",
+          "unpublish_action": "마켓플레이스에서 제거",
+          "title": "템플릿을 발견 가능하고 인식 가능하게 만드세요.",
+          "name": {
+            "label": "템플릿 이름",
+            "placeholder": "템플릿 이름을 지정하세요",
+            "validation": {
+              "required": "템플릿 이름이 필요합니다",
+              "maxLength": "템플릿 이름은 255자 미만이어야 합니다"
+            }
+          },
+          "short_description": {
+            "label": "짧은 설명",
+            "placeholder": "이 템플릿은 동시에 여러 프로젝트를 관리하는 프로젝트 관리자에게 적합합니다.",
+            "validation": {
+              "required": "짧은 설명이 필요합니다"
+            }
+          },
+          "description": {
+            "label": "설명",
+            "placeholder": "음성-텍스트 변환 기능으로 생산성을 향상시키고 커뮤니케이션을 효율화하세요.\n• 실시간 음성 변환: 말한 내용을 즉시 정확한 텍스트로 변환합니다.\n• 작업 및 댓글 생성: 음성 명령으로 작업, 설명, 댓글을 추가할 수 있습니다.",
+            "validation": {
+              "required": "설명이 필요합니다"
+            }
+          },
+          "category": {
+            "label": "카테고리",
+            "placeholder": "이 템플릿이 가장 적합한 위치를 선택하세요. 여러 개를 선택할 수 있습니다.",
+            "validation": {
+              "required": "최소 하나의 카테고리가 필요합니다"
+            }
+          },
+          "keywords": {
+            "label": "키워드",
+            "placeholder": "이 템플릿을 찾을 때 사용자가 검색할 것으로 생각하는 용어를 사용하세요.",
+            "helperText": "쉼표로 구분된 키워드를 입력하여 사람들이 이를 검색에서 찾을 수 있도록 도와주세요.",
+            "validation": {
+              "required": "최소 하나의 키워드가 필요합니다"
+            }
+          },
+          "website": {
+            "label": "웹사이트 URL",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "유효하지 않은 URL",
+              "maxLength": "URL은 800자 미만이어야 합니다"
+            }
+          },
+          "company_name": {
+            "label": "회사 이름",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "회사 이름이 필요합니다",
+              "maxLength": "회사 이름은 255자 미만이어야 합니다"
+            }
+          },
+          "contact_email": {
+            "label": "지원 이메일",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "유효하지 않은 이메일 주소",
+              "maxLength": "지원 이메일은 255자 미만이어야 합니다"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "개인정보 처리 방침 링크",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "유효하지 않은 URL",
+              "maxLength": "URL은 800자 미만이어야 합니다"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "이용 약관 링크",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "유효하지 않은 URL",
+              "maxLength": "URL은 800자 미만이어야 합니다"
+            }
+          },
+          "cover_image": {
+            "label": "마켓플레이스에 표시될 커버 이미지 추가",
+            "upload_title": "커버 이미지 업로드",
+            "upload_placeholder": "클릭하여 업로드하거나 드래그 앤 드롭으로 커버 이미지 업로드",
+            "drop_here": "여기에 놓기",
+            "click_to_upload": "클릭하여 업로드",
+            "invalid_file_or_exceeds_size_limit": "유효하지 않은 파일이거나 크기 제한을 초과했습니다. 다시 시도해 주세요.",
+            "upload_and_save": "업로드 및 저장",
+            "uploading": "업로드 중",
+            "remove": "제거",
+            "removing": "제거 중",
+            "validation": {
+              "required": "커버 이미지가 필요합니다"
+            }
+          },
+          "attach_screenshots": {
+            "label": "이 템플릿의 뷰어에게 도움이 될 것으로 생각되는 문서와 사진을 포함하세요.",
+            "validation": {
+              "required": "최소 하나의 스크린샷이 필요합니다"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "템플릿",
+        "description": "플레인의 프로젝트, 워크 아이템 및 페이지 템플릿을 사용하면 처음부터 프로젝트를 만들거나 워크 아이템 속성을 수동으로 설정할 필요가 없습니다.",
+        "sub_description": "템플릿을 사용하면 관리 시간의 80%를 절약할 수 있습니다."
+      },
+      "no_templates": {
+        "button": "첫 번째 템플릿 생성"
+      },
+      "no_labels": {
+        "description": " 아직 라벨이 없습니다. 프로젝트의 워크 아이템을 구성하고 필터링하는 데 도움이 되는 라벨을 만드세요."
+      },
+      "no_modules": {
+        "description": "아직 모듈이 없습니다. 전담 리드와 담당자가 있는 하위 프로젝트로 작업을 구성하세요."
+      },
+      "no_work_items": {
+        "description": "아직 워크 아이템이 없습니다. 하나를 추가하여 작업을 더 잘 구성하세요."
+      },
+      "no_sub_work_items": {
+        "description": "아직 서브 워크 아이템이 없습니다. 하나를 추가하여 작업을 더 잘 구성하세요."
+      },
+      "page": {
+        "no_templates": {
+          "title": "액세스할 수 있는 템플릿이 없습니다.",
+          "description": "템플릿을 생성해 주세요"
+        },
+        "no_results": {
+          "title": "템플릿과 일치하지 않습니다.",
+          "description": "다른 용어로 검색해 보세요."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "템플릿 생성됨",
+          "message": "{templateType} 템플릿인 {templateName}이(가) 이제 워크스페이스에서 사용 가능합니다."
+        },
+        "error": {
+          "title": "이번에는 템플릿을 생성할 수 없습니다.",
+          "message": "세부 정보를 다시 저장하거나 가급적 다른 탭에서 새 템플릿으로 복사하세요."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "템플릿 변경됨",
+          "message": "{templateType} 템플릿인 {templateName}이(가) 변경되었습니다."
+        },
+        "error": {
+          "title": "이 템플릿에 대한 변경 사항을 저장할 수 없습니다.",
+          "message": "세부 정보를 다시 저장하거나 나중에 이 템플릿으로 돌아오세요. 여전히 문제가 있으면 문의하세요."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "템플릿 삭제됨",
+          "message": "{templateType} 템플릿인 {templateName}이(가) 이제 워크스페이스에서 삭제되었습니다."
+        },
+        "error": {
+          "title": "이 템플릿을 삭제할 수 없습니다.",
+          "message": "다시 삭제하거나 나중에 돌아오세요. 그때도 삭제할 수 없으면 문의하세요."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "템플릿 제거됨",
+          "message": "{templateType} 템플릿인 {templateName}이(가) 제거되었습니다."
+        },
+        "error": {
+          "title": "이 템플릿을 제거할 수 없습니다.",
+          "message": "다시 제거하거나 나중에 돌아오세요. 그때도 제거할 수 없으면 문의하세요."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "템플릿 삭제",
+      "description": {
+        "prefix": "템플릿-",
+        "suffix": "을(를) 삭제하시겠습니까? 템플릿과 관련된 모든 데이터가 영구적으로 제거됩니다. 이 작업은 취소할 수 없습니다."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "템플릿 제거",
+      "description": {
+        "prefix": "템플릿-",
+        "suffix": "을(를) 제거하시겠습니까? 이 템플릿은 마켓플레이스에서 사용자가 더 이상 사용할 수 없습니다."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "새 템플릿 추가",
+        "project": "새 템플릿 추가"
+      },
+      "label": {
+        "project": "프로젝트 템플릿 선택",
+        "page": "템플릿에서 선택"
+      },
+      "tooltip": {
+        "work_item": "작업 항목 템플릿 선택"
+      },
+      "no_results": {
+        "work_item": "템플릿을 찾을 수 없습니다.",
+        "project": "템플릿을 찾을 수 없습니다."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/tour.json b/packages/i18n/src/locales/ko/tour.json
new file mode 100644
index 0000000..16cf9cd
--- /dev/null
+++ b/packages/i18n/src/locales/ko/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "워크스페이스에 오신 것을 환영합니다",
+        "description": "시작을 도와드리기 위해 데모 프로젝트를 만들었습니다. 첫 번째 작업 항목을 추가해 보겠습니다."
+      },
+      "step_one": {
+        "title": "\"+ 작업 항목 추가\"를 클릭하세요",
+        "description": "\"+ 새 작업 항목\" 버튼을 클릭하여 시작하세요. 필요에 맞는 작업, 버그 또는 사용자 정의 유형을 만들 수 있습니다."
+      },
+      "step_two": {
+        "title": "작업 항목 필터링",
+        "description": "필터를 사용하여 목록을 빠르게 좁힙니다. 상태, 우선순위 또는 팀원별로 필터링할 수 있습니다. "
+      },
+      "step_three": {
+        "title": "필요에 따라 작업 항목을 보고 그룹화하고 정렬합니다.",
+        "description": "필요한 속성을 보고 필요에 따라 작업 항목을 그룹화하거나 정렬합니다."
+      },
+      "step_four": {
+        "title": "원하는 대로 시각화",
+        "description": "목록에 표시할 속성을 선택합니다. 작업 항목을 원하는 방식으로 그룹화하고 정렬할 수도 있습니다."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "사이클로 진행",
+        "description": "Q를 눌러 사이클을 만듭니다. 이름을 지정하고 날짜를 설정하세요—프로젝트당 하나의 사이클만 가능합니다."
+      },
+      "step_one": {
+        "title": "새 사이클 만들기",
+        "description": "Q를 눌러 사이클을 만듭니다. 이름을 지정하고 날짜를 설정하세요—프로젝트당 하나의 사이클만 가능합니다."
+      },
+      "step_two": {
+        "title": "\"+\"를 클릭하세요",
+        "description": "\"+\" 버튼을 클릭하여 시작하세요. 사이클 페이지에서 직접 새 작업 항목이나 기존 작업 항목을 추가합니다."
+      },
+      "step_three": {
+        "title": "사이클 요약",
+        "description": "사이클 진행 상황, 팀 생산성 및 우선순위를 추적하고 뒤처지는 것이 있는지 조사합니다."
+      },
+      "step_four": {
+        "title": "작업 항목 이전",
+        "description": "마감일이 지나면 사이클이 자동으로 완료됩니다. 완료되지 않은 작업을 다른 사이클로 이동합니다."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "프로젝트를 모듈로 나누기",
+        "description": "모듈은 사용자가 특정 기간 내에 작업 항목을 그룹화하고 구성하는 데 도움이 되는 더 작고 집중된 프로젝트입니다."
+      },
+      "step_one": {
+        "title": "모듈 만들기",
+        "description": "모듈은 사용자가 특정 기간 내에 작업 항목을 그룹화하고 구성하는 데 도움이 되는 더 작고 집중된 프로젝트입니다."
+      },
+      "step_two": {
+        "title": "\"+\"를 클릭하세요",
+        "description": "\"+\" 버튼을 클릭하여 시작하세요. 모듈 페이지에서 직접 새 작업 항목이나 기존 작업 항목을 추가합니다."
+      },
+      "step_three": {
+        "title": "모듈 상태",
+        "description": "모듈은 이러한 상태를 사용하여 사용자가 계획하고 진행 상황과 단계를 명확하게 추적하는 데 도움을 줍니다."
+      },
+      "step_four": {
+        "title": "모듈 진행",
+        "description": "모듈 진행 상황은 완료된 항목을 통해 추적되며 성능을 모니터링하기 위한 분석이 포함됩니다."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "AI 기반 페이지로 문서화",
+        "description": "Plane의 페이지를 사용하면 외부 도구 없이 프로젝트 정보를 캡처하고 구성하고 협업할 수 있습니다."
+      },
+      "step_one": {
+        "title": "페이지를 공개 또는 비공개로 설정",
+        "description": "페이지는 워크스페이스의 모든 사람에게 표시되는 공개 또는 사용자만 액세스할 수 있는 비공개로 설정할 수 있습니다."
+      },
+      "step_two": {
+        "title": "/ 명령 사용",
+        "description": "페이지에서 /를 사용하여 목록, 이미지, 테이블 및 임베드를 포함한 16가지 블록 유형에서 콘텐츠를 추가합니다."
+      },
+      "step_three": {
+        "title": "페이지 작업",
+        "description": "페이지가 생성되면 오른쪽 상단 모서리의 ••• 메뉴를 클릭하여 다음 작업을 수행할 수 있습니다."
+      },
+      "step_four": {
+        "title": "목차",
+        "description": "패널 아이콘을 클릭하여 모든 제목을 보고 페이지의 전체적인 보기를 얻습니다."
+      },
+      "step_five": {
+        "title": "버전 기록",
+        "description": "페이지는 버전 기록으로 모든 편집을 추적하여 필요한 경우 이전 버전을 복원할 수 있습니다."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "접수로 요청 간소화",
+        "description": "게스트가 버그, 요청 또는 티켓에 대한 작업 항목을 만들 수 있는 Plane 전용 기능입니다."
+      },
+      "step_one": {
+        "title": "열린/닫힌 접수 요청",
+        "description": "대기 중인 요청은 열기 탭에 유지되며 관리자 또는 구성원이 처리하면 닫힘으로 이동합니다."
+      },
+      "step_two": {
+        "title": "대기 중인 요청 수락/거부",
+        "description": "수락하여 작업 항목을 편집하고 프로젝트로 이동하거나 거부하여 취소됨으로 표시합니다."
+      },
+      "step_three": {
+        "title": "지금은 스누즈",
+        "description": "작업 항목을 스누즈하여 나중에 검토할 수 있습니다. 열린 요청 목록의 맨 아래로 이동됩니다."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "탭 전환은 그만. 당신의 세계를 연결하세요.",
+        "description": "GitHub, Slack을 연결하여 PR을 추적하고 Plane AI에서 직접 채팅을 요약하세요."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "탐색, 재구상",
+        "sub_title": "워크스페이스가 이제 더 스마트하고 단순화된 탐색으로 탐색하기 더 쉬워졌습니다.",
+        "highlight_1": "더 빠른 발견을 위한 간소화된 왼쪽 패널 구조",
+        "highlight_2": "즉시 무엇이든 이동할 수 있는 개선된 전역 검색",
+        "highlight_3": "명확성과 집중을 위한 더 스마트한 카테고리 그룹화",
+        "footer": "빠른 안내를 원하십니까?"
+      },
+      "step_zero": {
+        "title": "즉시 무엇이든 찾기",
+        "description": "보편적 검색을 사용하여 작업, 프로젝트, 페이지 및 사람으로 이동—흐름을 벗어나지 않고."
+      },
+      "step_one": {
+        "title": "업데이트를 제어하세요",
+        "description": "받은 편지함은 모든 멘션, 승인 및 활동을 한 곳에 보관하므로 중요한 작업을 놓치지 않습니다."
+      },
+      "step_two": {
+        "title": "탐색 개인화",
+        "description": "기본 설정에서 표시되는 내용과 탐색 방법을 사용자 정의합니다."
+      }
+    },
+    "actions": {
+      "close": "닫기",
+      "next": "다음",
+      "back": "뒤로",
+      "done": "완료",
+      "take_a_tour": "둘러보기",
+      "get_started": "시작하기",
+      "got_it": "알겠습니다"
+    },
+    "seed_data": {
+      "title": "여기 데모 프로젝트가 있습니다",
+      "description": "프로젝트를 사용하면 워크스페이스 내에서 팀, 작업 및 작업을 완료하는 데 필요한 모든 것을 관리할 수 있습니다."
+    }
+  },
+  "get_started": {
+    "title": "안녕하세요 {name}님, 환영합니다!",
+    "description": "Plane과의 여정을 시작하는 데 필요한 모든 것이 여기 있습니다.",
+    "checklist_section": {
+      "title": "시작하기",
+      "description": "설정을 시작하고 아이디어가 더 빨리 실현되는 것을 보세요.",
+      "checklist_items": {
+        "item_1": {
+          "title": "프로젝트 만들기"
+        },
+        "item_2": {
+          "title": "작업 항목 만들기"
+        },
+        "item_3": {
+          "title": "팀원 초대"
+        },
+        "item_4": {
+          "title": "페이지 만들기"
+        },
+        "item_5": {
+          "title": "Plane AI 채팅 시도"
+        },
+        "item_6": {
+          "title": "통합 연결"
+        }
+      }
+    },
+    "team_section": {
+      "title": "팀 초대",
+      "description": "팀원을 초대하고 함께 구축을 시작하세요."
+    },
+    "integrations_section": {
+      "title": "워크스페이스 강화",
+      "more_integrations": "더 많은 통합 찾아보기"
+    },
+    "switch_to_plane_section": {
+      "title": "팀이 Plane으로 전환하는 이유 알아보기",
+      "description": "오늘 사용하는 도구와 Plane을 비교하고 차이점을 확인하세요."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/update.json b/packages/i18n/src/locales/ko/update.json
new file mode 100644
index 0000000..7bc93c9
--- /dev/null
+++ b/packages/i18n/src/locales/ko/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "진행 상태",
+      "since_last_update": "마지막 업데이트부터",
+      "comments": "{count, plural, one{# 댓글} other{# 댓글}}"
+    },
+    "add_update": "업데이트 추가",
+    "add_update_placeholder": "여기에 업데이트를 입력하세요",
+    "empty": {
+      "title": "아직 업데이트가 없습니다",
+      "description": "여기에서 업데이트를 확인할 수 있습니다."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "반응이 생성되었습니다",
+          "message": "반응이 성공적으로 생성되었습니다."
+        },
+        "error": {
+          "title": "반응 생성 실패",
+          "message": "반응을 생성할 수 없습니다."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "반응이 삭제되었습니다",
+          "message": "반응이 성공적으로 삭제되었습니다."
+        },
+        "error": {
+          "title": "반응 삭제 실패",
+          "message": "반응을 삭제할 수 없습니다."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "업데이트가 생성되었습니다",
+        "message": "업데이트가 성공적으로 생성되었습니다."
+      },
+      "error": {
+        "title": "업데이트 생성 실패",
+        "message": "업데이트를 생성할 수 없습니다."
+      }
+    },
+    "delete": {
+      "title": "업데이트 삭제",
+      "confirmation": "이 업데이트를 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.",
+      "success": {
+        "title": "업데이트가 삭제되었습니다",
+        "message": "업데이트가 성공적으로 삭제되었습니다."
+      },
+      "error": {
+        "title": "업데이트 삭제 실패",
+        "message": "업데이트를 삭제할 수 없습니다."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "업데이트가 업데이트되었습니다",
+        "message": "업데이트가 성공적으로 업데이트되었습니다."
+      },
+      "error": {
+        "title": "업데이트 업데이트 실패",
+        "message": "업데이트를 업데이트할 수 없습니다."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/wiki.json b/packages/i18n/src/locales/ko/wiki.json
new file mode 100644
index 0000000..4677c1b
--- /dev/null
+++ b/packages/i18n/src/locales/ko/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "일반",
+      "private": "비공개",
+      "shared": "공유됨",
+      "archived": "보관됨"
+    },
+    "fallback_name": "컬렉션",
+    "form": {
+      "name_required": "컬렉션 제목은 필수입니다",
+      "name_max_length": "컬렉션 이름은 255자 미만이어야 합니다",
+      "name_placeholder_create": "컬렉션 제목을 입력하세요",
+      "name_placeholder_edit": "컬렉션 이름"
+    },
+    "create_modal": {
+      "title": "컬렉션 만들기",
+      "submit": "컬렉션 만들기"
+    },
+    "edit_modal": {
+      "title": "컬렉션 편집"
+    },
+    "delete_modal": {
+      "title": "컬렉션 삭제",
+      "page_count": "이 컬렉션에는 페이지가 {pageCount}개 있습니다. 어떻게 처리할지 선택하세요.",
+      "transfer_title": "페이지를 옮기고 컬렉션 삭제",
+      "transfer_description": "삭제하기 전에 모든 페이지를 다른 컬렉션으로 이동하세요. 페이지와 권한은 유지됩니다.",
+      "transfer_warning": "이동된 페이지는 선택한 컬렉션의 권한을 상속받습니다.",
+      "transfer_target_label": "페이지 이동 대상",
+      "transfer_target_placeholder": "컬렉션 선택",
+      "delete_with_pages_title": "페이지와 함께 컬렉션 삭제",
+      "delete_with_pages_description": "컬렉션과 모든 페이지를 영구적으로 삭제합니다. 이 작업은 되돌릴 수 없습니다.",
+      "submit": "컬렉션 삭제"
+    },
+    "header": {
+      "add_page": "페이지 추가"
+    },
+    "menu": {
+      "create_new_page": "새 페이지 만들기",
+      "add_existing_page": "기존 페이지 추가",
+      "edit_collection": "컬렉션 편집",
+      "collection_options": "컬렉션 옵션"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "페이지 검색",
+      "success_message": "페이지 {count}개가 컬렉션에 추가되었습니다.",
+      "error_message": "페이지를 이동할 수 없습니다. 다시 시도해 주세요.",
+      "no_pages_found": "검색과 일치하는 페이지가 없습니다",
+      "no_pages_available": "이동할 수 있는 페이지가 없습니다",
+      "submit": "이동"
+    },
+    "list": {
+      "invite_only": "초대 전용",
+      "remove_error": "페이지를 컬렉션에서 제거할 수 없습니다.",
+      "no_matching_pages": "일치하는 페이지가 없습니다",
+      "remove_search_criteria": "모든 페이지를 보려면 검색 조건을 제거하세요",
+      "remove_filters": "모든 페이지를 보려면 필터를 제거하세요",
+      "no_pages_title": "아직 페이지가 없습니다",
+      "no_pages_description": "이 컬렉션에는 아직 페이지가 없습니다.",
+      "untitled": "제목 없음",
+      "restricted_access": "접근 제한",
+      "collapse_page": "페이지 접기",
+      "expand_page": "페이지 펼치기",
+      "page_actions": "페이지 작업",
+      "page_link_copied": "페이지 링크가 클립보드에 복사되었습니다.",
+      "columns": {
+        "page_name": "페이지 이름",
+        "owner": "소유자",
+        "nested_pages": "중첩 페이지",
+        "last_activity": "최근 활동",
+        "actions": "작업"
+      }
+    },
+    "toasts": {
+      "created": "컬렉션이 생성되었습니다.",
+      "create_error": "컬렉션을 만들 수 없습니다. 다시 시도해 주세요.",
+      "renamed": "컬렉션 이름이 변경되었습니다.",
+      "rename_error": "컬렉션을 업데이트할 수 없습니다. 다시 시도해 주세요.",
+      "transferred_deleted": "페이지를 이동하고 컬렉션을 삭제했습니다.",
+      "deleted_with_pages": "컬렉션과 해당 페이지가 삭제되었습니다.",
+      "delete_error": "컬렉션을 삭제할 수 없습니다. 다시 시도해 주세요.",
+      "target_required": "페이지를 이동할 컬렉션을 선택해 주세요.",
+      "create_page_error": "페이지를 만들 수 없습니다. 다시 시도해 주세요.",
+      "create_page_in_collection_error": "페이지를 만들거나 컬렉션에 추가할 수 없습니다. 다시 시도해 주세요.",
+      "collection_link_copied": "컬렉션 링크가 클립보드에 복사되었습니다."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "업그레이드하여 위키 잠금 해제",
+      "description": "Plane Pro로 공개 페이지, 버전 기록, 공유 페이지, 실시간 협업, 작업 공간 페이지를 활용해 위키, 전사 문서 및 지식 베이스를 구축하세요.",
+      "upgrade_button": {
+        "text": "업그레이드"
+      },
+      "learn_more_button": {
+        "text": "자세히 알아보기"
+      },
+      "download_button": {
+        "text": "데이터 다운로드",
+        "loading": "다운로드 중"
+      },
+      "tabs": {
+        "nested_pages": "중첩 페이지",
+        "add_embeds": "임베드 추가",
+        "publish_pages": "페이지 게시",
+        "comments": "댓글"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "중첩 페이지는 유료 플랜이 필요합니다. 업그레이드하여 잠금을 해제하세요."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/work-item-type.json b/packages/i18n/src/locales/ko/work-item-type.json
new file mode 100644
index 0000000..a964f4e
--- /dev/null
+++ b/packages/i18n/src/locales/ko/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "워크 아이템 타입",
+    "label_lowercase": "워크 아이템 타입",
+    "settings": {
+      "description": "팀의 요구에 맞게 자신만의 프로퍼티를 사용자 정의하고 추가하세요.",
+      "cant_delete_default_message": "이 작업 항목 유형은 삭제할 수 없습니다. 이 프로젝트의 기본 작업 항목 유형으로 설정되어 있기 때문입니다.",
+      "set_as_default": "기본값으로 설정",
+      "cant_set_default_inactive_message": "기본값으로 설정하기 전에 이 유형을 활성화하세요",
+      "set_default_confirmation": {
+        "title": "기본 작업 항목 유형으로 설정",
+        "description": "{name}을(를) 기본값으로 설정하면 이 워크스페이스의 모든 프로젝트에 가져옵니다. 모든 새 작업 항목은 기본적으로 이 유형을 사용합니다.",
+        "confirm_button": "기본값으로 설정"
+      },
+      "properties": {
+        "title": "커스텀 프로퍼티",
+        "description": "프로퍼티를 생성하고 사용자 정의하세요.",
+        "tooltip": "각 워크 아이템 타입에는 제목, 설명, 담당자, 상태, 우선순위, 시작 날짜, 마감일, 모듈, 사이클 등과 같은 기본 프로퍼티 세트가 함께 제공됩니다. 팀의 요구에 맞게 자신만의 프로퍼티를 사용자 정의하고 추가할 수도 있습니다.",
+        "add_button": "새 프로퍼티 추가",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "워크스페이스에서 가져오기"
+          }
+        },
+        "dropdown": {
+          "label": "프로퍼티 타입",
+          "placeholder": "타입 선택"
+        },
+        "property_type": {
+          "text": {
+            "label": "텍스트"
+          },
+          "number": {
+            "label": "넘버"
+          },
+          "dropdown": {
+            "label": "드롭다운"
+          },
+          "boolean": {
+            "label": "불리언"
+          },
+          "date": {
+            "label": "데이트"
+          },
+          "member_picker": {
+            "label": "멤버 피커"
+          },
+          "formula": {
+            "label": "수식"
+          }
+        },
+        "attributes": {
+          "label": "어트리뷰트",
+          "text": {
+            "single_line": {
+              "label": "싱글 라인"
+            },
+            "multi_line": {
+              "label": "패러그래프"
+            },
+            "readonly": {
+              "label": "읽기 전용",
+              "header": "읽기 전용 데이터"
+            },
+            "invalid_text_format": {
+              "label": "유효하지 않은 텍스트 포맷"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "넘버 추가"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "싱글 셀렉트"
+            },
+            "multi_select": {
+              "label": "멀티 셀렉트"
+            },
+            "no_default_value": {
+              "label": "기본값 없음"
+            }
+          },
+          "boolean": {
+            "label": "참 | 거짓",
+            "no_default": "기본값 없음"
+          },
+          "option": {
+            "create_update": {
+              "label": "옵션",
+              "form": {
+                "placeholder": "옵션 추가",
+                "errors": {
+                  "name": {
+                    "required": "옵션 이름은 필수입니다.",
+                    "integrity": "동일한 이름의 옵션이 이미 존재합니다."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "옵션 선택",
+                "multi": {
+                  "default": "옵션 선택",
+                  "variable": "{count}개 옵션 선택됨"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "성공!",
+              "message": "프로퍼티 {name}이(가) 성공적으로 생성되었습니다."
+            },
+            "error": {
+              "title": "에러!",
+              "message": "프로퍼티 생성에 실패했습니다. 다시 시도해 주세요!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "성공!",
+              "message": "프로퍼티 {name}이(가) 성공적으로 업데이트되었습니다."
+            },
+            "error": {
+              "title": "에러!",
+              "message": "프로퍼티 업데이트에 실패했습니다. 다시 시도해 주세요!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "성공!",
+              "message": "프로퍼티 {name}이(가) 성공적으로 삭제되었습니다."
+            },
+            "error": {
+              "title": "에러!",
+              "message": "프로퍼티 삭제에 실패했습니다. 다시 시도해 주세요!"
+            }
+          },
+          "enable_disable": {
+            "loading": "프로퍼티 {name} {action} 중",
+            "success": {
+              "title": "성공!",
+              "message": "프로퍼티 {name}이(가) 성공적으로 {action}되었습니다."
+            },
+            "error": {
+              "title": "에러!",
+              "message": "프로퍼티 {action}에 실패했습니다. 다시 시도해 주세요!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "새 커스텀 프로퍼티 생성",
+            "update": "커스텀 프로퍼티 업데이트"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "타이틀"
+            },
+            "description": {
+              "placeholder": "디스크립션"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "프로퍼티 이름을 지정해야 합니다.",
+              "max_length": "프로퍼티 이름은 255자를 초과할 수 없습니다."
+            },
+            "property_type": {
+              "required": "프로퍼티 타입을 선택해야 합니다."
+            },
+            "options": {
+              "required": "최소한 하나의 옵션을 추가해야 합니다."
+            },
+            "formula": {
+              "required": "수식 표현식이 필요합니다.",
+              "invalid": "잘못된 수식: {error}",
+              "circular_reference": "순환 참조가 감지되었습니다. 수식은 직접 또는 간접적으로 자신을 참조할 수 없습니다.",
+              "invalid_reference": "수식이 존재하지 않는 속성을 참조합니다."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "수식 필드",
+          "tooltip": "'{'필드 이름'}' 구문을 사용하여 수식을 입력하세요. +, -, *, /, & 연산자를 지원합니다.",
+          "placeholder": "수식 작성",
+          "test_button": "테스트",
+          "validating": "검증 중",
+          "validation_success": "수식이 유효합니다! {resultType}을(를) 반환합니다",
+          "validation_success_with_refs": "수식이 유효합니다! {resultType}을(를) 반환합니다 ({count}개 필드 참조)",
+          "error": {
+            "empty": "수식을 입력해 주세요",
+            "missing_context": "워크스페이스, 프로젝트 또는 작업 항목 유형 컨텍스트가 없습니다",
+            "validation_failed": "검증 실패"
+          },
+          "picker": {
+            "no_match": "일치하는 속성 없음",
+            "no_available": "사용 가능한 속성 없음"
+          }
+        },
+        "enable_disable": {
+          "label": "액티브",
+          "tooltip": {
+            "disabled": "클릭하여 비활성화",
+            "enabled": "클릭하여 활성화"
+          }
+        },
+        "delete_confirmation": {
+          "title": "이 프로퍼티 삭제",
+          "description": "프로퍼티 삭제는 기존 데이터 손실로 이어질 수 있습니다.",
+          "secondary_description": "대신 프로퍼티를 비활성화하시겠습니까?",
+          "primary_button": "{action}, 삭제하기",
+          "secondary_button": "네, 비활성화하기"
+        },
+        "mandate_confirmation": {
+          "label": "필수 프로퍼티",
+          "content": "이 프로퍼티에 대한 기본 옵션이 있는 것 같습니다. 프로퍼티를 필수로 설정하면 기본값이 제거되고 사용자는 자신이 선택한 값을 추가해야 합니다.",
+          "tooltip": {
+            "disabled": "이 프로퍼티 타입은 필수로 설정할 수 없습니다",
+            "enabled": "선택 해제하여 필드를 선택 사항으로 표시",
+            "checked": "선택하여 필드를 필수로 표시"
+          }
+        },
+        "empty_state": {
+          "title": "커스텀 프로퍼티 추가",
+          "description": "이 워크 아이템 타입에 대해 추가하는 새 프로퍼티가 여기에 표시됩니다."
+        }
+      },
+      "types": {
+        "title": "타입",
+        "description": "프로퍼티로 작업 항목 유형을 생성하고 사용자 정의하세요.",
+        "sort_options": {
+          "project_count": "소속된 프로젝트 수"
+        },
+        "filter_options": {
+          "show_active": "활성 표시",
+          "show_inactive": "비활성 표시"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "새로 생성",
+            "import_from_workspace": "워크스페이스에서 가져오기"
+          },
+          "banner": {
+            "with_access": "워크스페이스 수준에서 타입을 가져오려면 작업 항목 유형을 활성화하세요",
+            "without_access": "작업 항목 유형이 비활성화되어 있습니다. 워크스페이스 관리자에게 문의하여 워크스페이스 설정에서 활성화하세요."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "커스텀 프로퍼티",
+        "add_button": "프로퍼티 추가",
+        "modal": {
+          "title": "프로퍼티 추가",
+          "empty": {
+            "title": "사용 가능한 프로퍼티 없음",
+            "description": "모든 프로퍼티가 이미 이 타입에 연결되어 있습니다."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "프로퍼티 연결 해제",
+          "description": "이 프로퍼티의 연결을 해제하면 이 타입을 사용하는 모든 작업 항목에서 해당 값이 영구적으로 삭제됩니다. 이 작업은 취소할 수 없습니다.",
+          "input_label": "입력",
+          "input_label_suffix": "계속하려면:",
+          "confirm": "프로퍼티 연결 해제",
+          "loading": "연결 해제 중"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "이 유형 삭제",
+        "description": "유형을 삭제하면 기존 데이터가 손실될 수 있습니다.",
+        "can_disable_warning": "대신 유형을 비활성화하시겠습니까?",
+        "primary_button": "예, 삭제합니다",
+        "toast": {
+          "success": {
+            "title": "성공!",
+            "message": "작업 항목 유형이 성공적으로 삭제되었습니다."
+          },
+          "error": {
+            "title": "오류!",
+            "message": "작업 항목 유형 삭제에 실패했습니다. 다시 시도해 주세요!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "기본 작업 항목 유형은 삭제할 수 없습니다",
+          "cannot_delete_work_item_type_with_associated_work_items": "연결된 작업 항목이 있는 작업 항목 유형은 삭제할 수 없습니다"
+        }
+      }
+    },
+    "create": {
+      "title": "워크 아이템 타입 생성",
+      "button": "워크 아이템 타입 추가",
+      "toast": {
+        "success": {
+          "title": "성공!",
+          "message": "워크 아이템 타입이 성공적으로 생성되었습니다."
+        },
+        "error": {
+          "title": "에러!",
+          "message": {
+            "default": "작업 항목 유형 생성에 실패했습니다. 다시 시도해 주세요!",
+            "conflict": "{name} 유형이 이미 존재합니다. 다른 이름을 선택하세요."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "워크 아이템 타입 업데이트",
+      "button": "워크 아이템 타입 업데이트",
+      "toast": {
+        "success": {
+          "title": "성공!",
+          "message": "워크 아이템 타입 {name}이(가) 성공적으로 업데이트되었습니다."
+        },
+        "error": {
+          "title": "에러!",
+          "message": {
+            "default": "작업 항목 유형 업데이트에 실패했습니다. 다시 시도해 주세요!",
+            "conflict": "{name} 유형이 이미 존재합니다. 다른 이름을 선택하세요."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "이 워크 아이템 타입에 고유한 이름 지정"
+        },
+        "description": {
+          "placeholder": "이 워크 아이템 타입의 용도와 사용 시기를 설명하세요."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "워크 아이템 타입 {name} {action} 중",
+        "success": {
+          "title": "성공!",
+          "message": "워크 아이템 타입 {name}이(가) 성공적으로 {action}되었습니다."
+        },
+        "error": {
+          "title": "에러!",
+          "message": "워크 아이템 타입 {action}에 실패했습니다. 다시 시도해 주세요!"
+        }
+      },
+      "tooltip": "클릭하여 {action}"
+    },
+    "change_confirmation": {
+      "title": "워크 아이템 타입을 변경하시겠습니까?",
+      "description": "워크 아이템 타입을 변경하면 현재 타입에 특정한 사용자 정의 속성 값이 손실될 수 있습니다. 이 작업은 취소할 수 없습니다.",
+      "button": {
+        "loading": "변경 중",
+        "default": "타입 변경"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "워크 아이템 타입 활성화",
+        "description": "워크 아이템 타입으로 작업 항목을 작업에 맞게 조정하세요. 아이콘, 배경 및 프로퍼티로 사용자 정의하고 이 프로젝트에 대해 구성하세요.",
+        "primary_button": {
+          "text": "활성화"
+        },
+        "confirmation": {
+          "title": "활성화되면 워크 아이템 타입은 비활성화할 수 없습니다.",
+          "description": "플레인의 워크 아이템이 이 프로젝트의 기본 워크 아이템 타입이 되고 이 프로젝트에 아이콘과 배경과 함께 표시됩니다.",
+          "button": {
+            "default": "활성화",
+            "loading": "설정 중"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "워크 아이템 타입을 활성화하려면 프로로 업그레이드하세요.",
+        "description": "워크 아이템 타입으로 작업 항목을 작업에 맞게 조정하세요. 아이콘, 배경 및 프로퍼티로 사용자 정의하고 이 프로젝트에 대해 구성하세요.",
+        "primary_button": {
+          "text": "프로 구매"
+        }
+      },
+      "upgrade": {
+        "title": "워크 아이템 타입을 활성화하려면 업그레이드하세요.",
+        "description": "워크 아이템 타입으로 작업 항목을 작업에 맞게 조정하세요. 아이콘, 배경 및 프로퍼티로 사용자 정의하고 이 프로젝트에 대해 구성하세요.",
+        "primary_button": {
+          "text": "업그레이드"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "계층 구조",
+      "tab_label": "계층 구조",
+      "description": "작업을 정리하기 위한 계층 구조 레벨을 설정하세요. 각 레벨은 바로 위 항목과의 상위 관계와 바로 아래 항목과의 하위 관계를 정의합니다. ",
+      "sidebar_label": "계층 구조",
+      "enable_control": {
+        "title": "계층 구조 활성화",
+        "description": "다양한 작업 항목 유형 간에 상위-하위 관계를 생성합니다.",
+        "tooltip": "계층 구조는 한번 활성화되면 비활성화할 수 없습니다."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "새 계층 구조를 만들려면 먼저 작업 항목 유형을 정의하세요.",
+        "cta": "작업 항목 유형 설정"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "새 계층 레벨을 추가하려면 유형을 끌어다 놓으세요",
+      "empty_level_placeholder": "작업 항목 유형을 레벨 {level}(으)로 끌어다 놓으세요",
+      "drag_tooltip": "드래그하여 레벨 변경",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "기본값으로 설정",
+          "toast": {
+            "loading": "기본값으로 설정 중...",
+            "success": {
+              "title": "성공!",
+              "message": "계층 레벨 {level}이(가) 기본값으로 성공적으로 설정되었습니다."
+            },
+            "error": {
+              "title": "오류!",
+              "message": "계층 레벨 {level}을(를) 기본값으로 설정하지 못했습니다. 다시 시도해 주세요."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "{workItemTypeName}을(를) 레벨 {level}(으)로 이동하는 중...",
+        "success": {
+          "title": "성공!",
+          "message": "{workItemTypeName}이(가) 레벨 {level}(으)로 성공적으로 이동했습니다."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "저장하면 기존 링크가 끊어집니다",
+      "content": {
+        "intro": "작업 항목 유형 {workItemTypeName}에 다음이 있습니다.",
+        "parent_items": "{count, plural, other {#개 상위 링크가}} 제거됩니다.",
+        "child_items": "{count, plural, other {하위 작업 항목}}",
+        "parent_line_suffix_when_also_children": ", 그리고 ",
+        "footer": "이 변경은 {workItemTypeName} 작업 항목 유형의 기존 작업 항목에서 상위·하위 관계를 제거합니다."
+      },
+      "confirm_input": {
+        "label": "계속하려면 \"확인\"을 입력하세요.",
+        "placeholder": "확인"
+      },
+      "error_toast": {
+        "title": "오류!",
+        "message": "연결을 해제하고 저장하지 못했습니다. 다시 시도해 주세요."
+      },
+      "confirm_button": {
+        "loading": "저장 중",
+        "default": "그래도 저장"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "오류!",
+        "message": "선택한 작업 항목 유형은 계층 규칙을 위반하므로 새 작업 항목을 만드는 데 사용할 수 없습니다."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "오류!",
+        "message": "작업 항목 유형은 계층 규칙을 위반하므로 업데이트할 수 없습니다."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "계층 레벨",
+      "invalid_level_toast": {
+        "title": "오류!",
+        "message": "계층 규칙을 위반하므로 작업 항목 유형을 업데이트할 수 없습니다."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/work-item.json b/packages/i18n/src/locales/ko/work-item.json
new file mode 100644
index 0000000..66007d2
--- /dev/null
+++ b/packages/i18n/src/locales/ko/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {작업 항목} other {작업 항목}}",
+    "all": "모든 작업 항목",
+    "edit": "작업 항목 편집",
+    "title": {
+      "label": "작업 항목 제목",
+      "required": "작업 항목 제목이 필요합니다."
+    },
+    "add": {
+      "press_enter": "다른 작업 항목을 추가하려면 'Enter'를 누르세요",
+      "label": "작업 항목 추가",
+      "cycle": {
+        "failed": "작업 항목을 주기에 추가할 수 없습니다. 다시 시도해주세요.",
+        "success": "{count, plural, one {작업 항목} other {작업 항목}}이 주기에 성공적으로 추가되었습니다.",
+        "loading": "{count, plural, one {작업 항목} other {작업 항목}}을 주기에 추가 중"
+      },
+      "assignee": "담당자 추가",
+      "start_date": "시작 날짜 추가",
+      "due_date": "마감일 추가",
+      "parent": "상위 작업 항목 추가",
+      "sub_issue": "하위 작업 항목 추가",
+      "dependency": "종속성 추가",
+      "relation": "관계 추가",
+      "link": "링크 추가",
+      "existing": "기존 작업 항목 추가"
+    },
+    "remove": {
+      "label": "작업 항목 제거",
+      "cycle": {
+        "loading": "작업 항목을 주기에서 제거 중",
+        "success": "작업 항목이 주기에서 성공적으로 제거되었습니다.",
+        "failed": "작업 항목을 주기에서 제거할 수 없습니다. 다시 시도해주세요."
+      },
+      "module": {
+        "loading": "작업 항목을 모듈에서 제거 중",
+        "success": "작업 항목이 모듈에서 성공적으로 제거되었습니다.",
+        "failed": "작업 항목을 모듈에서 제거할 수 없습니다. 다시 시도해주세요."
+      },
+      "parent": {
+        "label": "상위 작업 항목 제거"
+      }
+    },
+    "new": "새 작업 항목",
+    "adding": "작업 항목 추가 중",
+    "create": {
+      "success": "작업 항목이 성공적으로 생성되었습니다"
+    },
+    "priority": {
+      "urgent": "긴급",
+      "high": "높음",
+      "medium": "중간",
+      "low": "낮음"
+    },
+    "display": {
+      "properties": {
+        "label": "디스플레이 속성",
+        "id": "ID",
+        "issue_type": "작업 항목 유형",
+        "sub_issue_count": "하위 작업 항목 수",
+        "attachment_count": "첨부 파일 수",
+        "created_on": "생성일",
+        "sub_issue": "하위 작업 항목",
+        "work_item_count": "작업 항목 수"
+      },
+      "extra": {
+        "show_sub_issues": "하위 작업 항목 표시",
+        "show_empty_groups": "빈 그룹 표시"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "이 레이아웃은 다음 기준으로 정렬됩니다",
+      "list": "목록",
+      "kanban": "보드",
+      "calendar": "캘린더",
+      "spreadsheet": "테이블",
+      "gantt": "타임라인",
+      "title": {
+        "list": "목록 레이아웃",
+        "kanban": "보드 레이아웃",
+        "calendar": "캘린더 레이아웃",
+        "spreadsheet": "테이블 레이아웃",
+        "gantt": "타임라인 레이아웃"
+      }
+    },
+    "states": {
+      "active": "활성",
+      "backlog": "백로그"
+    },
+    "comments": {
+      "placeholder": "댓글 추가",
+      "switch": {
+        "private": "비공개 댓글로 전환",
+        "public": "공개 댓글로 전환"
+      },
+      "create": {
+        "success": "댓글이 성공적으로 생성되었습니다",
+        "error": "댓글 생성 실패. 나중에 다시 시도해주세요."
+      },
+      "update": {
+        "success": "댓글이 성공적으로 업데이트되었습니다",
+        "error": "댓글 업데이트 실패. 나중에 다시 시도해주세요."
+      },
+      "remove": {
+        "success": "댓글이 성공적으로 제거되었습니다",
+        "error": "댓글 제거 실패. 나중에 다시 시도해주세요."
+      },
+      "upload": {
+        "error": "자산 업로드 실패. 나중에 다시 시도해주세요."
+      },
+      "copy_link": {
+        "success": "댓글 링크가 클립보드에 복사되었습니다",
+        "error": "댓글 링크 복사 중 오류가 발생했습니다. 나중에 다시 시도해 주세요."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "답글 추가",
+          "placeholder": "답글 추가"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "답글을 가져오지 못했습니다"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "답글이 성공적으로 생성되었습니다"
+            },
+            "error": {
+              "message": "답글 생성에 실패했습니다"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "답글이 성공적으로 업데이트되었습니다"
+            },
+            "error": {
+              "message": "답글 업데이트에 실패했습니다"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "답글이 성공적으로 삭제되었습니다"
+            },
+            "error": {
+              "message": "답글 삭제에 실패했습니다"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "작업 항목이 존재하지 않습니다",
+        "description": "찾고 있는 작업 항목이 존재하지 않거나, 아카이브되었거나, 삭제되었습니다.",
+        "primary_button": {
+          "text": "다른 작업 항목 보기"
+        }
+      }
+    },
+    "sibling": {
+      "label": "형제 작업 항목"
+    },
+    "archive": {
+      "description": "완료되거나 취소된 작업 항목만 아카이브할 수 있습니다",
+      "label": "작업 항목 아카이브",
+      "confirm_message": "작업 항목을 아카이브하시겠습니까? 모든 아카이브된 작업 항목은 나중에 복원할 수 있습니다.",
+      "success": {
+        "label": "아카이브 성공",
+        "message": "아카이브된 항목은 프로젝트 아카이브에서 찾을 수 있습니다."
+      },
+      "failed": {
+        "message": "작업 항목을 아카이브할 수 없습니다. 다시 시도해주세요."
+      },
+      "banner_message": "이 작업 항목은 아카이브되었습니다. 복원하려면 아카이브 섹션으로 이동하세요.",
+      "go_to_archives": "아카이브로 이동"
+    },
+    "restore": {
+      "success": {
+        "title": "복원 성공",
+        "message": "작업 항목을 프로젝트 작업 항목에서 찾을 수 있습니다."
+      },
+      "failed": {
+        "message": "작업 항목을 복원할 수 없습니다. 다시 시도해주세요."
+      }
+    },
+    "relation": {
+      "relates_to": "관련 있음",
+      "duplicate": "중복",
+      "blocked_by": "차단됨",
+      "blocking": "차단 중",
+      "start_before": "시작 이전",
+      "start_after": "시작 이후",
+      "finish_before": "완료 이전",
+      "finish_after": "완료 이후",
+      "implements": "구현",
+      "implemented_by": "구현 참조"
+    },
+    "copy_link": "작업 항목 링크 복사",
+    "delete": {
+      "label": "작업 항목 삭제",
+      "error": "작업 항목 삭제 중 오류 발생"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "작업 항목이 성공적으로 구독되었습니다",
+        "unsubscribed": "작업 항목 구독이 성공적으로 취소되었습니다"
+      }
+    },
+    "select": {
+      "error": "최소 하나의 작업 항목을 선택하세요",
+      "empty": "선택된 작업 항목 없음",
+      "add_selected": "선택된 작업 항목 추가",
+      "select_all": "모두 선택",
+      "deselect_all": "모두 선택 해제"
+    },
+    "open_in_full_screen": "작업 항목을 전체 화면으로 열기",
+    "duplicate": {
+      "modal": {
+        "title": "다른 프로젝트로 복사본 만들기",
+        "description1": "작업 항목의 복사본을 생성합니다.",
+        "description2": "복제하는 동안 모든 속성 데이터가 제거됩니다.",
+        "placeholder": "프로젝트 선택"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "작업 항목이 성공적으로 복제되었습니다"
+        },
+        "error": {
+          "message": "작업 항목 복제에 실패했습니다"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "페이지 연결",
+      "show_wiki_pages": "위키 페이지 표시",
+      "link_pages_to": "페이지 연결",
+      "linked_pages": "연결된 페이지",
+      "no_description": "이 페이지는 비어 있습니다. 여기에 무언가를 작성하고 이 플레이스홀더로 표시하세요.",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "페이지가 업데이트되었습니다",
+            "message": "페이지가 성공적으로 업데이트되었습니다"
+          },
+          "error": {
+            "title": "페이지 업데이트 실패",
+            "message": "페이지 업데이트에 실패했습니다"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "페이지 제거됨",
+            "message": "페이지가 성공적으로 제거되었습니다"
+          },
+          "error": {
+            "title": "페이지 제거 실패",
+            "message": "페이지 제거에 실패했습니다"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "클릭하여 추천",
+      "click_to_downvote": "클릭하여 비추천",
+      "click_to_view_upvotes": "클릭하여 추천 목록 보기",
+      "click_to_view_downvotes": "클릭하여 비추천 목록 보기"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "하위 작업 항목이 성공적으로 업데이트되었습니다",
+      "error": "하위 작업 항목 업데이트 중 오류 발생"
+    },
+    "remove": {
+      "success": "하위 작업 항목이 성공적으로 제거되었습니다",
+      "error": "하위 작업 항목 제거 중 오류 발생"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "적용된 필터에 일치하는 하위 작업 항목이 없습니다.",
+        "description": "모든 하위 작업 항목을 보려면 모든 적용된 필터를 지우세요.",
+        "action": "필터 지우기"
+      },
+      "list_filters": {
+        "title": "적용된 필터에 일치하는 작업 항목이 없습니다.",
+        "description": "모든 작업 항목을 보려면 모든 적용된 필터를 지우세요.",
+        "action": "필터 지우기"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "일치하는 작업 항목 없음"
+      },
+      "no_issues": {
+        "title": "작업 항목 없음"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "댓글 없음",
+        "description": "댓글은 작업 항목에 대한 토론 및 후속 공간으로 사용할 수 있습니다"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "작업 항목을 아카이브할 수 없습니다",
+        "message": "완료됨 또는 취소됨 상태 그룹에 속한 작업 항목만 아카이브할 수 있습니다."
+      },
+      "invalid_issue_start_date": {
+        "title": "작업 항목을 업데이트할 수 없습니다",
+        "message": "선택한 시작 날짜가 일부 작업 항목의 마감일을 초과합니다. 시작 날짜가 마감일 이전인지 확인하세요."
+      },
+      "invalid_issue_target_date": {
+        "title": "작업 항목을 업데이트할 수 없습니다",
+        "message": "선택한 마감일이 일부 작업 항목의 시작 날짜보다 앞섭니다. 마감일이 시작 날짜 이후인지 확인하세요."
+      },
+      "invalid_state_transition": {
+        "title": "작업 항목을 업데이트할 수 없습니다",
+        "message": "일부 작업 항목에 대해 상태 변경이 허용되지 않습니다. 상태 변경이 허용되는지 확인하세요."
+      }
+    },
+    "upgrade_banner": {
+      "message": "여러 작업 항목의 상태, 우선순위 등을 한 번에 변경할 수 있습니다. 작업당 평균 3분을 절약합니다.",
+      "cta": "One으로 업그레이드"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "반복 작업 항목",
+      "description": "반복 작업을 한 번 설정하고, 반복을 관리해 드립니다. 시간이 되면 여기에 모두 표시됩니다.",
+      "new_recurring_work_item": "새 반복 작업 항목",
+      "update_recurring_work_item": "반복 작업 항목 수정",
+      "form": {
+        "interval": {
+          "title": "일정",
+          "start_date": {
+            "validation": {
+              "required": "시작일은 필수입니다"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "반복 유형은 필수입니다"
+            }
+          }
+        },
+        "button": {
+          "create": "반복 작업 항목 생성",
+          "update": "반복 작업 항목 수정"
+        }
+      },
+      "create_button": {
+        "label": "반복 작업 항목 생성",
+        "no_permission": "반복 작업 항목을 생성하려면 프로젝트 관리자에게 문의하세요"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "자동으로 처리되는 작업",
+        "description": "한 번만 설정하세요. 기한이 되면 자동으로 다시 생성됩니다. 반복 작업을 더 쉽게 하려면 비즈니스 요금제로 업그레이드하세요."
+      },
+      "no_templates": {
+        "button": "첫 반복 작업 항목 생성"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "반복 작업 항목이 생성되었습니다",
+          "message": "{name} 반복 작업 항목이 워크스페이스에서 사용할 수 있습니다."
+        },
+        "error": {
+          "title": "반복 작업 항목을 생성하지 못했습니다.",
+          "message": "다시 한 번 저장하거나, 새 반복 작업 항목에 복사해 보세요. 가능하다면 다른 탭에서 시도해 보세요."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "반복 작업 항목이 변경되었습니다",
+          "message": "{name} 반복 작업 항목이 변경되었습니다."
+        },
+        "error": {
+          "title": "반복 작업 항목 변경을 저장하지 못했습니다.",
+          "message": "다시 한 번 저장하거나, 나중에 이 반복 작업 항목으로 돌아와 주세요. 문제가 계속되면 문의해 주세요."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "반복 작업 항목이 삭제되었습니다",
+          "message": "{name} 반복 작업 항목이 워크스페이스에서 삭제되었습니다."
+        },
+        "error": {
+          "title": "반복 작업 항목을 삭제하지 못했습니다.",
+          "message": "다시 삭제를 시도하거나 나중에 다시 시도해 보세요. 계속 삭제할 수 없다면 문의해 주세요."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "반복 작업 항목 삭제",
+      "description": {
+        "prefix": "반복 작업 항목-",
+        "suffix": "을(를) 삭제하시겠습니까? 반복 작업 항목과 관련된 모든 데이터가 영구적으로 삭제됩니다. 이 작업은 취소할 수 없습니다."
+      }
+    }
+  },
+  "epic": {
+    "new": "새 에픽",
+    "label": "{count, plural, one {에픽} other {에픽}}",
+    "adding": "에픽 추가 중",
+    "create": {
+      "success": "에픽이 성공적으로 생성되었습니다"
+    },
+    "add": {
+      "label": "에픽 추가",
+      "press_enter": "다른 에픽을 추가하려면 'Enter'를 누르세요"
+    },
+    "title": {
+      "label": "에픽 제목",
+      "required": "에픽 제목이 필요합니다."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/workflow.json b/packages/i18n/src/locales/ko/workflow.json
new file mode 100644
index 0000000..0d81b0a
--- /dev/null
+++ b/packages/i18n/src/locales/ko/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "새 워크 아이템 허용",
+      "work_item_creation_disable_tooltip": "이 스테이트에서는 워크 아이템 생성이 비활성화되어 있습니다",
+      "default_state": "기본 스테이트는 모든 멤버가 새 워크 아이템을 생성할 수 있도록 합니다. 이는 변경할 수 없습니다",
+      "state_change_count": "{count, plural, one {1개의 허용된 스테이트 변경} other {{count}개의 허용된 스테이트 변경}}",
+      "movers_count": "{count, plural, one {1명의 리스트된 리뷰어} other {{count}명의 리스트된 리뷰어}}",
+      "state_changes": {
+        "label": {
+          "default": "허용된 스테이트 변경 추가",
+          "loading": "허용된 스테이트 변경 추가 중"
+        },
+        "move_to": "스테이트 변경",
+        "movers": {
+          "label": "리뷰 담당자",
+          "tooltip": "리뷰어는 워크 아이템을 한 스테이트에서 다른 스테이트로 이동할 수 있는 권한이 있는 사람입니다.",
+          "add": "리뷰어 추가"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "이 워크 아이템을 여기로 이동할 수 없습니다."
+    },
+    "workflow_enabled": {
+      "label": "스테이트 변경"
+    },
+    "workflow_tree": {
+      "label": "다음에 있는 워크 아이템의 경우",
+      "state_change_label": "다음으로 이동할 수 있습니다"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "워크플로우로 변경 및 리뷰의 혼란을 제어하세요.",
+        "description": "플레인의 워크플로우로 작업이 이동하는 위치, 누가, 언제 이동하는지에 대한 규칙을 설정하세요."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "변경 내역 보기",
+      "reset_workflow": "워크플로우 리셋"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "이 워크플로우를 리셋하시겠습니까?",
+        "description": "이 워크플로우를 리셋하면 모든 스테이트 변경 규칙이 삭제되며 이 프로젝트에서 실행하려면 다시 생성해야 합니다."
+      },
+      "delete_state_change": {
+        "title": "이 스테이트 변경 규칙을 삭제하시겠습니까?",
+        "description": "삭제하면 이 변경을 취소할 수 없으며 이 프로젝트에서 실행하려면 규칙을 다시 설정해야 합니다."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "워크플로우 {action} 중",
+        "success": {
+          "title": "성공",
+          "message": "워크플로우가 성공적으로 {action}되었습니다"
+        },
+        "error": {
+          "title": "오류",
+          "message": "워크플로우를 {action}할 수 없습니다. 다시 시도하세요."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "성공",
+          "message": "워크플로우가 성공적으로 리셋되었습니다"
+        },
+        "error": {
+          "title": "워크플로우 리셋 오류",
+          "message": "워크플로우를 리셋할 수 없습니다. 다시 시도하세요."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "스테이트 변경 규칙 추가 오류",
+          "message": "스테이트 변경 규칙을 추가할 수 없습니다. 다시 시도하세요."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "스테이트 변경 규칙 수정 오류",
+          "message": "스테이트 변경 규칙을 수정할 수 없습니다. 다시 시도하세요."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "스테이트 변경 규칙 제거 오류",
+          "message": "스테이트 변경 규칙을 제거할 수 없습니다. 다시 시도하세요."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "스테이트 변경 규칙 리뷰어 수정 오류",
+          "message": "스테이트 변경 규칙 리뷰어를 수정할 수 없습니다. 다시 시도하세요."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/workspace-settings.json b/packages/i18n/src/locales/ko/workspace-settings.json
new file mode 100644
index 0000000..3b76493
--- /dev/null
+++ b/packages/i18n/src/locales/ko/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "작업 공간 설정",
+    "page_label": "{workspace} - 일반 설정",
+    "key_created": "키 생성됨",
+    "copy_key": "이 비밀 키를 Plane Pages에 복사하고 저장하세요. 닫기 버튼을 누른 후에는 이 키를 볼 수 없습니다. 키가 포함된 CSV 파일이 다운로드되었습니다.",
+    "token_copied": "토큰이 클립보드에 복사되었습니다.",
+    "settings": {
+      "general": {
+        "title": "일반",
+        "upload_logo": "로고 업로드",
+        "edit_logo": "로고 편집",
+        "name": "작업 공간 이름",
+        "company_size": "회사 규모",
+        "url": "작업 공간 URL",
+        "workspace_timezone": "작업 공간 시간대",
+        "update_workspace": "작업 공간 업데이트",
+        "delete_workspace": "이 작업 공간 삭제",
+        "delete_workspace_description": "작업 공간을 삭제하면 해당 작업 공간 내의 모든 데이터와 리소스가 영구적으로 삭제되며 복구할 수 없습니다.",
+        "delete_btn": "이 작업 공간 삭제",
+        "delete_modal": {
+          "title": "이 작업 공간을 삭제하시겠습니까?",
+          "description": "유료 플랜의 활성화된 평가판이 있습니다. 먼저 취소해야 진행할 수 있습니다.",
+          "dismiss": "무시",
+          "cancel": "평가판 취소",
+          "success_title": "작업 공간 삭제됨.",
+          "success_message": "곧 프로필 페이지로 이동합니다.",
+          "error_title": "작업이 실패했습니다.",
+          "error_message": "다시 시도해주세요."
+        },
+        "errors": {
+          "name": {
+            "required": "이름이 필요합니다",
+            "max_length": "작업 공간 이름은 80자를 초과할 수 없습니다"
+          },
+          "company_size": {
+            "required": "회사 규모가 필요합니다",
+            "select_a_range": "조직 규모 선택"
+          }
+        }
+      },
+      "members": {
+        "title": "멤버",
+        "add_member": "멤버 추가",
+        "pending_invites": "보류 중인 초대",
+        "invitations_sent_successfully": "초대가 성공적으로 전송되었습니다",
+        "leave_confirmation": "작업 공간을 떠나시겠습니까? 더 이상 이 작업 공간에 접근할 수 없습니다. 이 작업은 되돌릴 수 없습니다.",
+        "details": {
+          "full_name": "전체 이름",
+          "display_name": "표시 이름",
+          "email_address": "이메일 주소",
+          "account_type": "계정 유형",
+          "authentication": "인증",
+          "joining_date": "가입 날짜"
+        },
+        "modal": {
+          "title": "사람들을 초대하여 협업하세요",
+          "description": "작업 공간에서 협업할 사람들을 초대하세요.",
+          "button": "초대 전송",
+          "button_loading": "초대 전송 중",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "초대하려면 이메일 주소가 필요합니다.",
+            "invalid": "이메일이 유효하지 않습니다"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "청구 및 플랜",
+        "description": "플랜을 선택하고, 구독을 관리하며, 필요에 따라 손쉽게 업그레이드하세요.",
+        "title": "청구 및 플랜",
+        "current_plan": "현재 플랜",
+        "free_plan": "현재 무료 플랜을 사용 중입니다",
+        "view_plans": "플랜 보기"
+      },
+      "exports": {
+        "heading": "내보내기",
+        "description": "프로젝트 데이터를 다양한 형식으로 내보내고 다운로드 링크가 포함된 내보내기 기록에 접근하세요.",
+        "title": "내보내기",
+        "exporting": "내보내기 중",
+        "previous_exports": "이전 내보내기",
+        "export_separate_files": "데이터를 별도의 파일로 내보내기",
+        "exporting_projects": "프로젝트 내보내는 중",
+        "format": "포맷",
+        "filters_info": "기준에 따라 특정 작업 항목을 내보내려면 필터를 적용하세요.",
+        "modal": {
+          "title": "내보내기",
+          "toasts": {
+            "success": {
+              "title": "내보내기 성공",
+              "message": "이전 내보내기에서 내보낸 {entity}를 다운로드할 수 있습니다."
+            },
+            "error": {
+              "title": "내보내기 실패",
+              "message": "내보내기가 실패했습니다. 다시 시도해주세요."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "웹훅",
+        "description": "프로젝트 이벤트가 발생할 때 외부 서비스로 알림을 자동화하세요.",
+        "title": "웹훅",
+        "add_webhook": "웹훅 추가",
+        "modal": {
+          "title": "웹훅 생성",
+          "details": "웹훅 세부 정보",
+          "payload": "페이로드 URL",
+          "question": "어떤 이벤트가 이 웹훅을 트리거하길 원하십니까?",
+          "error": "URL이 필요합니다"
+        },
+        "secret_key": {
+          "title": "비밀 키",
+          "message": "웹훅 페이로드에 로그인하려면 토큰을 생성하세요"
+        },
+        "options": {
+          "all": "모든 항목 보내기",
+          "individual": "개별 이벤트 선택"
+        },
+        "toasts": {
+          "created": {
+            "title": "웹훅 생성됨",
+            "message": "웹훅이 성공적으로 생성되었습니다"
+          },
+          "not_created": {
+            "title": "웹훅 생성되지 않음",
+            "message": "웹훅을 생성할 수 없습니다"
+          },
+          "updated": {
+            "title": "웹훅 업데이트됨",
+            "message": "웹훅이 성공적으로 업데이트되었습니다"
+          },
+          "not_updated": {
+            "title": "웹훅 업데이트되지 않음",
+            "message": "웹훅을 업데이트할 수 없습니다"
+          },
+          "removed": {
+            "title": "웹훅 제거됨",
+            "message": "웹훅이 성공적으로 제거되었습니다"
+          },
+          "not_removed": {
+            "title": "웹훅 제거되지 않음",
+            "message": "웹훅을 제거할 수 없습니다"
+          },
+          "secret_key_copied": {
+            "message": "비밀 키가 클립보드에 복사되었습니다."
+          },
+          "secret_key_not_copied": {
+            "message": "비밀 키를 복사하는 중 오류가 발생했습니다."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "API 토큰",
+        "description": "보안 API 토큰을 생성하여 데이터를 외부 시스템 및 애플리케이션과 통합합니다.",
+        "title": "API 토큰",
+        "add_token": "액세스 토큰 추가",
+        "create_token": "토큰 생성",
+        "never_expires": "만료되지 않음",
+        "generate_token": "토큰 생성",
+        "generating": "생성 중",
+        "delete": {
+          "title": "API 토큰 삭제",
+          "description": "이 토큰을 사용하는 애플리케이션은 더 이상 Plane 데이터에 접근할 수 없습니다. 이 작업은 되돌릴 수 없습니다.",
+          "success": {
+            "title": "성공!",
+            "message": "API 토큰이 성공적으로 삭제되었습니다"
+          },
+          "error": {
+            "title": "오류!",
+            "message": "API 토큰을 삭제할 수 없습니다"
+          }
+        }
+      },
+      "integrations": {
+        "title": "인테그레이션",
+        "heading": "인테그레이션",
+        "description": "인기 있는 도구 및 서비스와 연결하여 전체 워크플로우 에코시스템에서 작업을 동기화하세요.",
+        "page_title": "Plane 데이터를 사용 가능한 앱이나 본인 소유 앱에서 활용하세요.",
+        "page_description": "이 워크스페이스 또는 사용자가 사용하는 모든 통합을 확인하세요."
+      },
+      "imports": {
+        "title": "임포트",
+        "heading": "임포트",
+        "description": "기존 프로젝트 관리 도구에서 데이터를 연결하고 가져와 워크플로우 통합을 간소화하세요."
+      },
+      "worklogs": {
+        "title": "워크로그",
+        "heading": "워크로그",
+        "description": "어떤 프로젝트의 누구의 워크로그(타임시트)든 다운로드하세요."
+      },
+      "group_syncing": {
+        "title": "그룹 동기화",
+        "heading": "그룹 동기화",
+        "description": "ID 공급자 그룹을 프로젝트 및 역할에 연결합니다. IdP에서 그룹 멤버십이 변경되면 사용자 액세스가 자동으로 업데이트되어 온보딩 및 오프보딩이 간소화됩니다.",
+        "enable": {
+          "title": "그룹 동기화 활성화",
+          "description": "ID 공급자 그룹을 기반으로 사용자를 프로젝트에 자동으로 추가합니다."
+        },
+        "config": {
+          "title": "그룹 동기화 구성",
+          "description": "ID 공급자 그룹이 프로젝트 및 역할에 매핑되는 방식을 설정합니다.",
+          "sync_on_login": {
+            "title": "로그인 시 동기화",
+            "description": "사용자가 로그인할 때 그룹 멤버십 및 프로젝트 액세스를 업데이트합니다."
+          },
+          "sync_offline": {
+            "title": "오프라인 동기화",
+            "description": "사용자 로그인을 기다리지 않고 6시간마다 자동으로 동기화를 실행합니다."
+          },
+          "auto_remove": {
+            "title": "자동 제거",
+            "description": "그룹과 더 이상 일치하지 않는 사용자를 프로젝트에서 자동으로 제거합니다."
+          },
+          "group_attribute_key": {
+            "title": "그룹 속성 키",
+            "description": "사용자 그룹을 식별하고 동기화하는 데 사용되는 ID 공급자 속성.",
+            "placeholder": "그룹"
+          }
+        },
+        "group_mapping": {
+          "title": "그룹 매핑",
+          "description": "ID 공급자 그룹을 프로젝트 및 역할에 연결합니다.",
+          "button_text": "새 그룹 동기화 추가"
+        },
+        "toast": {
+          "updating": "그룹 동기화 기능 업데이트 중",
+          "success": "그룹 동기화 기능이 성공적으로 업데이트되었습니다.",
+          "error": "그룹 동기화 기능 업데이트에 실패했습니다!"
+        },
+        "delete_modal": {
+          "title": "그룹 동기화 삭제",
+          "content": "이 ID 그룹의 새 사용자는 더 이상 프로젝트에 추가되지 않습니다. 이미 추가된 사용자는 현재 역할을 유지합니다."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "사용자 그룹",
+            "required": "사용자 그룹은 필수입니다",
+            "placeholder": "IdP 그룹 이름 입력"
+          },
+          "project": {
+            "text": "프로젝트",
+            "required": "프로젝트는 필수입니다",
+            "placeholder": "프로젝트 선택"
+          },
+          "default_role": {
+            "text": "프로젝트 역할",
+            "required": "프로젝트 역할은 필수입니다",
+            "placeholder": "프로젝트 역할 선택"
+          }
+        }
+      },
+      "identity": {
+        "title": "신원",
+        "heading": "신원",
+        "description": "도메인을 구성하고 Single sign-on을 활성화하세요"
+      },
+      "project_states": {
+        "title": "프로젝트 스테이트",
+        "heading": "모든 프로젝트의 진행 상황 개요를 확인하세요.",
+        "description": "프로젝트 스테이트는 어떤 프로젝트 속성으로든 모든 프로젝트의 진행 상황을 추적하는 Plane 전용 기능입니다.",
+        "go_to_settings": "설정으로 이동"
+      },
+      "projects": {
+        "title": "프로젝트",
+        "description": "프로젝트 상태 관리, 프로젝트 레이블 활성화 및 기타 구성을 관리합니다.",
+        "tabs": {
+          "states": "프로젝트 스테이트",
+          "labels": "프로젝트 레이블"
+        }
+      },
+      "templates": {
+        "title": "템플릿",
+        "heading": "템플릿",
+        "description": "템플릿을 사용하면 프로젝트, 작업 항목, 페이지를 생성하는 데 걸리는 시간을 80% 절약할 수 있습니다."
+      },
+      "relations": {
+        "title": "관계",
+        "heading": "관계",
+        "description": "작업 공간 전반의 작업 항목을 연결하는 관계 타입을 생성하고 관리하세요."
+      },
+      "cancel_trial": {
+        "title": "먼저 트라이얼을 취소하세요.",
+        "description": "유료 플랜 중 하나에 대한 활성 트라이얼이 있습니다. 계속하려면 먼저 이를 취소하세요.",
+        "dismiss": "무시",
+        "cancel": "트라이얼 취소",
+        "cancel_success_title": "트라이얼이 취소되었습니다.",
+        "cancel_success_message": "이제 워크스페이스를 삭제할 수 있습니다.",
+        "cancel_error_title": "작동하지 않았습니다.",
+        "cancel_error_message": "다시 시도해 주세요."
+      },
+      "applications": {
+        "internal": "내부",
+        "title": "애플리케이션",
+        "applicationId_copied": "애플리케이션 ID가 클립보드에 복사되었습니다",
+        "clientId_copied": "클라이언트 ID가 클립보드에 복사되었습니다",
+        "clientSecret_copied": "클라이언트 시크릿이 클립보드에 복사되었습니다",
+        "third_party_apps": "서드파티 앱",
+        "your_apps": "내 앱",
+        "connect": "연결",
+        "connected": "연결됨",
+        "disconnect": "연결 해제",
+        "install": "설치",
+        "installed": "설치됨",
+        "configure": "설정",
+        "app_available": "이 앱을 Plane 워크스페이스에서 사용할 수 있게 되었습니다",
+        "app_credentials_regenrated": {
+          "title": "앱 자격 증명이 성공적으로 재생성되었습니다",
+          "description": "클라이언트 시크릿이 사용되는 모든 곳에서 교체하세요. 이전 시크릿은 더 이상 유효하지 않습니다."
+        },
+        "app_created": {
+          "title": "앱이 성공적으로 생성되었습니다",
+          "description": "자격 증명을 사용하여 Plane 작업 공간에 앱을 설치하세요"
+        },
+        "installed_apps": "설치된 앱",
+        "all_apps": "모든 앱",
+        "internal_apps": "내부 앱",
+        "app_name_title": "이 앱의 이름을 지정하세요",
+        "app_description_title": {
+          "label": "긴 설명",
+          "placeholder": "마켓플레이스를 위한 긴 설명을 작성하세요. 명령을 보려면 '/' 키를 누르세요."
+        },
+        "authorization_grant_type": {
+          "title": "연결 유형",
+          "description": "앱을 워크스페이스에 한 번 설치할지, 각 사용자가 자신의 계정을 연결할 수 있도록 할지 선택하세요"
+        },
+        "website": {
+          "title": "웹사이트",
+          "description": "앱 웹사이트로 연결되는 링크입니다.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "앱 메이커",
+          "description": "앱을 만드는 개인 또는 조직입니다."
+        },
+        "app_maker_error": "앱 제작자는 필수입니다",
+        "setup_url": {
+          "label": "설정 URL",
+          "description": "사용자가 앱을 설치하면 이 URL로 리디렉션됩니다.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "웹훅 URL",
+          "description": "앱이 설치된 작업 공간에서 발생하는 웹훅 이벤트와 업데이트를 여기에 전송합니다.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "웹훅 시크릿",
+          "description": "들어오는 웹훅 요청을 검증하는 데 사용되는 시크릿입니다.",
+          "placeholder": "임의의 시크릿 키를 입력하세요"
+        },
+        "redirect_uris": {
+          "label": "리디렉션 URI(공백으로 구분)",
+          "description": "사용자가 Plane에서 인증을 완료하면 이 경로로 리디렉션됩니다.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "사용을 시작하려면 Plane 워크스페이스에 연결하세요",
+        "client_id_and_secret": "클라이언트 ID와 시크릿",
+        "client_id_and_secret_description": "이 시크릿 키를 복사하여 저장하세요. 닫기를 누른 후에는 이 키를 볼 수 없습니다.",
+        "client_id_and_secret_download": "여기에서 키가 포함된 CSV를 다운로드할 수 있습니다.",
+        "application_id": "애플리케이션 ID",
+        "client_id": "클라이언트 ID",
+        "client_secret": "클라이언트 시크릿",
+        "export_as_csv": "CSV로 내보내기",
+        "slug_already_exists": "슬러그가 이미 존재합니다",
+        "failed_to_create_application": "애플리케이션 생성 실패",
+        "upload_logo": "로고 업로드",
+        "app_name_error": "앱 이름은 필수입니다",
+        "app_short_description_title": "이 앱에 대한 간단한 설명을 작성하세요",
+        "app_short_description_error": "앱 간단 설명은 필수입니다",
+        "app_description_error": "앱 설명은 필수입니다",
+        "app_slug_title": "앱 슬러그",
+        "app_slug_error": "앱 슬러그는 필수입니다",
+        "invalid_website_error": "유효하지 않은 웹사이트",
+        "webhook_url_title": "웹훅 URL",
+        "webhook_url_error": "웹훅 URL은 필수입니다",
+        "invalid_webhook_url_error": "잘못된 웹훅 URL",
+        "redirect_uris_title": "리다이렉트 URI",
+        "redirect_uris_error": "리다이렉트 URI는 필수입니다",
+        "invalid_redirect_uris_error": "잘못된 리다이렉트 URI",
+        "redirect_uris_description": "앱이 사용자를 리다이렉트할 URI를 공백으로 구분하여 입력하세요(예: https://example.com https://example.com/)",
+        "authorized_javascript_origins_title": "승인된 자바스크립트 출처",
+        "authorized_javascript_origins_error": "승인된 자바스크립트 출처는 필수입니다",
+        "invalid_authorized_javascript_origins_error": "잘못된 승인된 자바스크립트 출처",
+        "authorized_javascript_origins_description": "앱이 요청을 할 수 있는 출처를 공백으로 구분하여 입력하세요(예: app.com example.com)",
+        "create_app": "앱 생성",
+        "update_app": "앱 업데이트",
+        "build_your_own_app": "나만의 앱 만들기",
+        "edit_app_details": "앱 세부정보 편집",
+        "regenerate_client_secret_description": "클라이언트 시크릿을 재생성합니다. 재생성 후 키를 복사하거나 CSV 파일로 다운로드할 수 있습니다.",
+        "regenerate_client_secret": "클라이언트 시크릿 재생성",
+        "regenerate_client_secret_confirm_title": "클라이언트 시크릿을 재생성하시겠습니까?",
+        "regenerate_client_secret_confirm_description": "이 시크릿을 사용하는 앱이 작동을 멈춥니다. 앱에서 시크릿을 업데이트해야 합니다.",
+        "regenerate_client_secret_confirm_cancel": "취소",
+        "regenerate_client_secret_confirm_regenerate": "재생성",
+        "read_only_access_to_workspace": "워크스페이스에 대한 읽기 전용 접근",
+        "write_access_to_workspace": "워크스페이스에 대한 쓰기 접근",
+        "read_only_access_to_user_profile": "사용자 프로필에 대한 읽기 전용 접근",
+        "write_access_to_user_profile": "사용자 프로필에 대한 쓰기 접근",
+        "connect_app_to_workspace": "{app}을(를) {workspace} 워크스페이스에 연결",
+        "user_permissions": "사용자 권한",
+        "user_permissions_description": "사용자 권한은 사용자 프로필에 대한 접근을 허용하는 데 사용됩니다.",
+        "workspace_permissions": "워크스페이스 권한",
+        "workspace_permissions_description": "워크스페이스 권한은 워크스페이스에 대한 접근을 허용하는 데 사용됩니다.",
+        "with_the_permissions": "권한과 함께",
+        "app_consent_title": "{app}이(가) 귀하의 Plane 워크스페이스와 프로필에 대한 접근을 요청하고 있습니다.",
+        "choose_workspace_to_connect_app_with": "앱을 연결할 워크스페이스를 선택하세요",
+        "app_consent_workspace_permissions_title": "{app}이(가) 원하는 것",
+        "app_consent_user_permissions_title": "{app}은(는) 다음 리소스에 대한 사용자 권한도 요청할 수 있습니다. 이러한 권한은 사용자에 의해서만 요청되고 승인됩니다.",
+        "app_consent_accept_title": "수락함으로써",
+        "app_consent_accept_1": "앱이 Plane 내부 또는 외부에서 사용할 수 있는 곳에서 귀하의 Plane 데이터에 접근할 수 있도록 허용합니다",
+        "app_consent_accept_2": "{app}의 개인정보 보호정책 및 이용 약관에 동의합니다",
+        "accepting": "수락 중...",
+        "accept": "수락",
+        "categories": "카테고리",
+        "select_app_categories": "앱 카테고리 선택",
+        "categories_title": "카테고리",
+        "categories_error": "카테고리는 필수입니다",
+        "invalid_categories_error": "유효하지 않은 카테고리",
+        "categories_description": "앱을 가장 잘 설명하는 카테고리를 선택하세요",
+        "supported_plans": "지원되는 플랜",
+        "supported_plans_description": "이 애플리케이션을 설치할 수 있는 워크스페이스 플랜을 선택하세요. 비워두면 모든 플랜이 허용됩니다.",
+        "select_plans": "플랜 선택",
+        "privacy_policy_url_title": "개인정보 보호 정책 URL",
+        "privacy_policy_url_error": "개인정보 보호 정책 URL은 필수입니다",
+        "invalid_privacy_policy_url_error": "유효하지 않은 개인정보 보호 정책 URL",
+        "terms_of_service_url_title": "이용 약관 URL",
+        "terms_of_service_url_error": "이용 약관 URL은 필수입니다",
+        "invalid_terms_of_service_url_error": "유효하지 않은 이용 약관 URL",
+        "support_url_title": "지원 URL",
+        "support_url_error": "지원 URL은 필수입니다",
+        "invalid_support_url_error": "유효하지 않은 지원 URL",
+        "video_url_title": "비디오 URL",
+        "video_url_error": "비디오 URL은 필수입니다",
+        "invalid_video_url_error": "유효하지 않은 비디오 URL",
+        "setup_url_error": "설정 URL은 필수입니다",
+        "invalid_setup_url_error": "유효하지 않은 설정 URL",
+        "configuration_url_title": "설정 URL",
+        "configuration_url_error": "설정 URL은 필수입니다",
+        "invalid_configuration_url_error": "유효하지 않은 설정 URL",
+        "contact_email_title": "연락처 이메일",
+        "contact_email_error": "연락처 이메일은 필수입니다",
+        "invalid_contact_email_error": "유효하지 않은 연락처 이메일",
+        "upload_attachments": "첨부 파일 업로드",
+        "uploading_images": "업로드 중 {count} 이미지{count, plural, one {s} other {s}}",
+        "drop_images_here": "이미지를 여기에 놓으세요",
+        "click_to_upload_images": "이미지를 클릭하여 업로드",
+        "invalid_file_or_exceeds_size_limit": "유효하지 않은 파일 또는 크기 제한 초과 ({size} MB)",
+        "uploading": "업로드 중...",
+        "upload_and_save": "업로드 및 저장",
+        "app_consent_no_access_title": "설치 요청",
+        "app_consent_no_access_description": "이 앱은 워크스페이스 관리자가 설치한 후에만 설치할 수 있습니다. 계속 진행하려면 워크스페이스 관리자에게 문의하세요.",
+        "app_consent_unapproved_title": "이 앱은 아직 Plane의 검토나 승인을 받지 않았습니다.",
+        "app_consent_unapproved_description": "워크스페이스에 연결하기 전에 이 앱을 신뢰할 수 있는지 확인하세요.",
+        "go_to_app": "앱으로 이동",
+        "enable_app_mentions": "앱 멘션 활성화",
+        "enable_app_mentions_tooltip": "이 기능을 활성화하면 사용자가 워크 아이템을 이 애플리케이션에 언급하거나 할당할 수 있습니다.",
+        "scopes": "범위",
+        "select_scopes": "범위 선택",
+        "read_access_to": "읽기 전용 액세스",
+        "write_access_to": "쓰기 액세스",
+        "global_permission_expiration": "전역 범위가 곧 만료됩니다. 대신 세분화된 범위를 사용하세요. 예: 전역 읽기 대신 project:read를 사용하세요.",
+        "selected_scopes": "{count}개 선택됨",
+        "scopes_and_permissions": "범위 및 권한",
+        "read": "읽기",
+        "write": "쓰기",
+        "scope_description": {
+          "projects": "프로젝트 및 프로젝트 관련 엔티티에 대한 액세스",
+          "wiki": "위키 및 위키 관련 엔티티에 대한 액세스",
+          "workspaces": "워크스페이스 및 워크스페이스 관련 엔티티에 대한 액세스",
+          "stickies": "스티키 및 스티키 관련 엔티티에 대한 액세스",
+          "profile": "사용자 프로필 정보에 대한 액세스",
+          "agents": "에이전트 및 모든 에이전트 관련 엔티티에 대한 액세스",
+          "assets": "에셋 및 모든 에셋 관련 엔티티에 대한 액세스"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "작업이 더 똑똑하고 빨리 진행되도록 네이티브로 연결된 AI를 사용하세요."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "스크립트",
+        "new_script": "새 스크립트",
+        "description": "커스텀 스크립트와 자동화 규칙으로 워크플로우를 자동화하세요."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "생성된 API 토큰 없음",
+        "description": "Plane API를 사용하여 Plane의 데이터를 외부 시스템과 통합할 수 있습니다. 토큰을 생성하여 시작하세요."
+      },
+      "webhooks": {
+        "title": "추가된 웹훅 없음",
+        "description": "실시간 업데이트를 받고 작업을 자동화하려면 웹훅을 생성하세요."
+      },
+      "exports": {
+        "title": "아직 내보내기 없음",
+        "description": "내보낼 때마다 참조용으로 여기에 복사본이 있습니다."
+      },
+      "imports": {
+        "title": "아직 가져오기 없음",
+        "description": "이전 가져오기를 모두 여기에서 찾고 다운로드하세요."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ko/workspace.json b/packages/i18n/src/locales/ko/workspace.json
new file mode 100644
index 0000000..196b8e2
--- /dev/null
+++ b/packages/i18n/src/locales/ko/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "작업 공간 생성",
+    "subheading": "Plane을 사용하려면 작업 공간을 생성하거나 참여해야 합니다.",
+    "form": {
+      "name": {
+        "label": "작업 공간 이름",
+        "placeholder": "익숙하고 인식 가능한 이름이 가장 좋습니다."
+      },
+      "url": {
+        "label": "작업 공간 URL 설정",
+        "placeholder": "URL 입력 또는 붙여넣기",
+        "edit_slug": "URL의 슬러그만 편집할 수 있습니다"
+      },
+      "organization_size": {
+        "label": "이 작업 공간을 사용할 사람 수",
+        "placeholder": "범위 선택"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "작업 공간은 인스턴스 관리자만 생성할 수 있습니다",
+        "description": "인스턴스 관리자 이메일 주소를 알고 있다면 아래 버튼을 클릭하여 연락하세요.",
+        "request_button": "인스턴스 관리자 요청"
+      },
+      "validation": {
+        "name_alphanumeric": "작업 공간 이름에는 (' '), ('-'), ('_') 및 영숫자 문자만 포함될 수 있습니다.",
+        "name_length": "이름은 80자 이내로 제한하세요.",
+        "url_alphanumeric": "URL에는 ('-') 및 영숫자 문자만 포함될 수 있습니다.",
+        "url_length": "URL은 48자 이내로 제한하세요.",
+        "url_already_taken": "작업 공간 URL이 이미 사용 중입니다!"
+      }
+    },
+    "request_email": {
+      "subject": "새 작업 공간 요청",
+      "body": "안녕하세요 인스턴스 관리자님,\n\n[목적]을 위해 [/workspace-name] URL로 새 작업 공간을 생성해 주세요.\n\n감사합니다,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "작업 공간 생성",
+      "loading": "작업 공간 생성 중"
+    },
+    "toast": {
+      "success": {
+        "title": "성공",
+        "message": "작업 공간이 성공적으로 생성되었습니다"
+      },
+      "error": {
+        "title": "오류",
+        "message": "작업 공간을 생성할 수 없습니다. 다시 시도해주세요."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "프로젝트, 활동 및 메트릭 개요",
+        "description": "Plane에 오신 것을 환영합니다. 첫 번째 프로젝트를 생성하고 작업 항목을 추적하면 이 페이지가 진행 상황을 돕는 공간으로 변합니다. 관리자도 팀의 진행을 돕는 항목을 볼 수 있습니다.",
+        "primary_button": {
+          "text": "첫 번째 프로젝트 생성",
+          "comic": {
+            "title": "Plane에서 모든 것은 프로젝트로 시작됩니다",
+            "description": "프로젝트는 제품 로드맵, 마케팅 캠페인 또는 새로운 자동차 출시일 수 있습니다."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "분석",
+    "page_label": "{workspace} - 분석",
+    "open_tasks": "열린 작업 항목",
+    "error": "데이터를 가져오는 중 오류가 발생했습니다.",
+    "work_items_closed_in": "닫힌 작업 항목",
+    "selected_projects": "선택된 프로젝트",
+    "total_members": "총 멤버",
+    "total_cycles": "총 주기",
+    "total_modules": "총 모듈",
+    "pending_work_items": {
+      "title": "보류 중인 작업 항목",
+      "empty_state": "동료의 보류 중인 작업 항목 분석이 여기에 표시됩니다."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "1년 동안 닫힌 작업 항목",
+      "empty_state": "작업 항목을 닫아 그래프에서 분석을 확인하세요."
+    },
+    "most_work_items_created": {
+      "title": "가장 많은 작업 항목 생성",
+      "empty_state": "동료와 그들이 생성한 작업 항목 수가 여기에 표시됩니다."
+    },
+    "most_work_items_closed": {
+      "title": "가장 많은 작업 항목 닫힘",
+      "empty_state": "동료와 그들이 닫은 작업 항목 수가 여기에 표시됩니다."
+    },
+    "tabs": {
+      "scope_and_demand": "범위 및 수요",
+      "custom": "맞춤형 분석"
+    },
+    "total": "총 {entity}",
+    "started_work_items": "시작된 {entity}",
+    "backlog_work_items": "백로그 {entity}",
+    "un_started_work_items": "시작되지 않은 {entity}",
+    "completed_work_items": "완료된 {entity}",
+    "project_insights": "프로젝트 인사이트",
+    "summary_of_projects": "프로젝트 요약",
+    "all_projects": "모든 프로젝트",
+    "trend_on_charts": "차트의 추세",
+    "active_projects": "활성 프로젝트",
+    "customized_insights": "맞춤형 인사이트",
+    "created_vs_resolved": "생성됨 vs 해결됨",
+    "empty_state": {
+      "project_insights": {
+        "title": "아직 데이터가 없습니다",
+        "description": "귀하에게 할당된 작업 항목이 상태별로 나누어 여기에 표시됩니다."
+      },
+      "created_vs_resolved": {
+        "title": "아직 데이터가 없습니다",
+        "description": "시간이 지나면서 생성되고 해결된 작업 항목이 여기에 표시됩니다."
+      },
+      "customized_insights": {
+        "title": "아직 데이터가 없습니다",
+        "description": "귀하에게 할당된 작업 항목이 상태별로 나누어 여기에 표시됩니다."
+      },
+      "general": {
+        "title": "진행 상황, 워크로드 및 할당을 추적하세요. 트렌드를 파악하고 장애물을 제거하며 더 빠르게 작업하세요",
+        "description": "범위 대 수요, 추정치 및 범위 크리프를 확인하세요. 팀 구성원과 팀의 성과를 파악하고 프로젝트가 제시간에 실행되도록 하세요.",
+        "primary_button": {
+          "text": "첫 번째 프로젝트 시작",
+          "comic": {
+            "title": "분석은 사이클 + 모듈과 함께 가장 잘 작동합니다",
+            "description": "먼저 작업 항목을 사이클로 시간 제한을 두고, 가능하다면 한 사이클 이상 걸리는 작업 항목을 모듈로 그룹화하세요. 왼쪽 탐색에서 둘 다 확인하세요."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "아직 데이터가 없습니다",
+        "description": "사이클 진행 분석이 여기에 표시됩니다. 작업 항목을 사이클에 추가하여 진행 상황을 추적하세요."
+      },
+      "module_progress": {
+        "title": "아직 데이터가 없습니다",
+        "description": "모듈 진행 분석이 여기에 표시됩니다. 작업 항목을 모듈에 추가하여 진행 상황을 추적하세요."
+      },
+      "intake_trends": {
+        "title": "아직 데이터가 없습니다",
+        "description": "인테이크 트렌드 분석이 여기에 표시됩니다. 작업 항목을 인테이크에 추가하여 트렌드를 추적하세요."
+      }
+    },
+    "upgrade_to_plan": "{tab} 잠금 해제를 위해 {plan}(으)로 업그레이드하세요",
+    "workitem_resolved_vs_pending": "해결된 vs 대기 중인 작업 항목",
+    "projects_by_status": "상태별 프로젝트",
+    "active_users": "활성 사용자",
+    "intake_trends": "수용 추세"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {프로젝트} other {프로젝트}}",
+    "create": {
+      "label": "프로젝트 추가"
+    },
+    "network": {
+      "label": "네트워크",
+      "private": {
+        "title": "비공개",
+        "description": "초대에 의해서만 접근 가능"
+      },
+      "public": {
+        "title": "공개",
+        "description": "게스트를 제외한 작업 공간의 모든 사람이 참여할 수 있습니다"
+      }
+    },
+    "error": {
+      "permission": "이 작업을 수행할 권한이 없습니다.",
+      "cycle_delete": "주기 삭제 실패",
+      "module_delete": "모듈 삭제 실패",
+      "issue_delete": "작업 항목 삭제 실패"
+    },
+    "state": {
+      "backlog": "백로그",
+      "unstarted": "시작되지 않음",
+      "started": "시작됨",
+      "completed": "완료됨",
+      "cancelled": "취소됨"
+    },
+    "sort": {
+      "manual": "수동",
+      "name": "이름",
+      "created_at": "생성일",
+      "members_length": "멤버 수"
+    },
+    "scope": {
+      "my_projects": "내 프로젝트",
+      "archived_projects": "아카이브"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# 개월} other{# 개월}}",
+      "days_count": "{days, plural, one{# 일} other{# 일}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "활성 프로젝트 없음",
+        "description": "각 프로젝트를 목표 지향 작업의 부모로 생각하세요. 프로젝트는 작업, 주기 및 모듈이 존재하는 곳이며, 동료와 함께 목표를 달성하는 데 도움이 됩니다. 새 프로젝트를 생성하거나 아카이브된 프로젝트를 필터링하세요.",
+        "primary_button": {
+          "text": "첫 번째 프로젝트 시작",
+          "comic": {
+            "title": "Plane에서 모든 것은 프로젝트로 시작됩니다",
+            "description": "프로젝트는 제품 로드맵, 마케팅 캠페인 또는 새로운 자동차 출시일 수 있습니다."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "프로젝트 없음",
+        "description": "작업 항목을 생성하거나 작업을 관리하려면 프로젝트를 생성하거나 참여해야 합니다.",
+        "primary_button": {
+          "text": "첫 번째 프로젝트 시작",
+          "comic": {
+            "title": "Plane에서 모든 것은 프로젝트로 시작됩니다",
+            "description": "프로젝트는 제품 로드맵, 마케팅 캠페인 또는 새로운 자동차 출시일 수 있습니다."
+          }
+        }
+      },
+      "filter": {
+        "title": "일치하는 프로젝트 없음",
+        "description": "일치하는 프로젝트가 없습니다. 대신 새 프로젝트를 생성하세요."
+      },
+      "search": {
+        "description": "일치하는 프로젝트가 없습니다. 대신 새 프로젝트를 생성하세요"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "뷰 추가",
+    "empty_state": {
+      "all-issues": {
+        "title": "프로젝트에 작업 항목 없음",
+        "description": "첫 번째 프로젝트 완료! 이제 작업 항목을 추적 가능한 조각으로 나누세요. 시작합시다!",
+        "primary_button": {
+          "text": "새 작업 항목 생성"
+        }
+      },
+      "assigned": {
+        "title": "작업 항목 없음",
+        "description": "할당된 작업 항목을 여기에서 추적할 수 있습니다.",
+        "primary_button": {
+          "text": "새 작업 항목 생성"
+        }
+      },
+      "created": {
+        "title": "작업 항목 없음",
+        "description": "생성한 모든 작업 항목이 여기에 표시됩니다. 여기에서 직접 추적하세요.",
+        "primary_button": {
+          "text": "새 작업 항목 생성"
+        }
+      },
+      "subscribed": {
+        "title": "작업 항목 없음",
+        "description": "관심 있는 작업 항목을 구독하고 여기에서 모두 추적하세요."
+      },
+      "custom-view": {
+        "title": "작업 항목 없음",
+        "description": "필터가 적용된 작업 항목을 여기에서 모두 추적하세요."
+      }
+    },
+    "delete_view": {
+      "title": "이 뷰를 삭제하시겠습니까?",
+      "content": "확인하면 이 뷰에 대해 선택한 모든 정렬, 필터 및 표시 옵션 + 레이아웃이 복원할 수 없는 방식으로 영구적으로 삭제됩니다."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "작업 항목 초안",
+    "empty_state": {
+      "title": "작성 중인 작업 항목과 곧 댓글이 여기에 표시됩니다.",
+      "description": "이 기능을 사용해 보려면 작업 항목을 추가하고 중간에 멈추거나 아래에서 첫 번째 초안을 생성하세요. 😉",
+      "primary_button": {
+        "text": "첫 번째 초안 생성"
+      }
+    },
+    "delete_modal": {
+      "title": "초안 삭제",
+      "description": "이 초안을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
+    },
+    "toasts": {
+      "created": {
+        "success": "초안 생성됨",
+        "error": "작업 항목을 생성할 수 없습니다. 다시 시도해주세요."
+      },
+      "deleted": {
+        "success": "초안 삭제됨"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "메모, 문서 또는 전체 지식 기반을 작성하세요. 플레인의 AI 어시스턴트인 갈릴레오가 시작하는 데 도움을 줍니다",
+        "description": "페이지는 플레인에서 생각을 정리하는 공간입니다. 회의 노트를 작성하고, 쉽게 포맷하고, 작업 항목을 포함시키고, 컴포넌트 라이브러리를 사용하여 레이아웃하고, 모든 것을 프로젝트 컨텍스트에 유지하세요. 어떤 문서든 빠르게 작업하려면 단축키나 버튼 클릭으로 플레인의 AI인 갈릴레오를 호출하세요.",
+        "primary_button": {
+          "text": "첫 번째 페이지 만들기"
+        }
+      },
+      "private": {
+        "title": "아직 개인 페이지가 없습니다",
+        "description": "여기에 개인 생각을 보관하세요. 공유할 준비가 되면, 팀은 클릭 한 번으로 가능합니다.",
+        "primary_button": {
+          "text": "첫 번째 페이지 만들기"
+        }
+      },
+      "public": {
+        "title": "아직 워크스페이스 페이지가 없습니다",
+        "description": "워크스페이스의 모든 사람과 공유된 페이지를 여기서 확인하세요.",
+        "primary_button": {
+          "text": "첫 번째 페이지 만들기"
+        }
+      },
+      "archived": {
+        "title": "아직 보관된 페이지가 없습니다",
+        "description": "현재 관심 없는 페이지를 보관하세요. 필요할 때 여기서 액세스하세요."
+      },
+      "shared": {
+        "title": "아직 공유된 페이지가 없습니다",
+        "description": "다른 사람이 공유한 페이지가 여기에 표시됩니다."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "활성 사이클 없음",
+        "description": "범위 내에 오늘 날짜를 포함하는 기간이 있는 프로젝트의 사이클입니다. 여기에서 모든 활성 사이클의 진행 상황과 세부 정보를 찾을 수 있습니다."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "CSV에서 구성원 가져오기",
+      "description": "다음 열이 포함된 CSV 업로드: Email, Display Name, First Name, Last Name, Role (5, 15 또는 20)",
+      "dropzone": {
+        "active": "CSV 파일을 여기에 놓으세요",
+        "inactive": "드래그 앤 드롭 또는 클릭하여 업로드",
+        "file_type": ".csv 파일만 지원됩니다"
+      },
+      "buttons": {
+        "cancel": "취소",
+        "import": "가져오기",
+        "try_again": "다시 시도",
+        "close": "닫기",
+        "done": "완료"
+      },
+      "progress": {
+        "uploading": "업로드 중...",
+        "importing": "가져오는 중..."
+      },
+      "summary": {
+        "title": {
+          "failed": "가져오기 실패",
+          "complete": "가져오기 완료"
+        },
+        "message": {
+          "seat_limit": "시트 제한으로 인해 구성원을 가져올 수 없습니다.",
+          "success": "{count}명의 구성원을 워크스페이스에 추가했습니다.",
+          "no_imports": "CSV 파일에서 구성원을 가져오지 못했습니다."
+        },
+        "stats": {
+          "successful": "성공",
+          "failed": "실패"
+        },
+        "download_errors": "오류 다운로드"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "잘못된 파일",
+          "message": "CSV 파일만 지원됩니다."
+        },
+        "import_failed": {
+          "title": "가져오기 실패",
+          "message": "문제가 발생했습니다."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/accessibility.json b/packages/i18n/src/locales/pl/accessibility.json
new file mode 100644
index 0000000..c140791
--- /dev/null
+++ b/packages/i18n/src/locales/pl/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo obszaru roboczego",
+      "open_workspace_switcher": "Otwórz przełącznik obszaru roboczego",
+      "open_user_menu": "Otwórz menu użytkownika",
+      "open_command_palette": "Otwórz paletę poleceń",
+      "open_extended_sidebar": "Otwórz rozszerzoną pasek boczny",
+      "close_extended_sidebar": "Zamknij rozszerzoną pasek boczny",
+      "create_favorites_folder": "Utwórz folder ulubionych",
+      "open_folder": "Otwórz folder",
+      "close_folder": "Zamknij folder",
+      "open_favorites_menu": "Otwórz menu ulubionych",
+      "close_favorites_menu": "Zamknij menu ulubionych",
+      "enter_folder_name": "Wprowadź nazwę folderu",
+      "create_new_project": "Utwórz nowy projekt",
+      "open_projects_menu": "Otwórz menu projektów",
+      "close_projects_menu": "Zamknij menu projektów",
+      "toggle_quick_actions_menu": "Przełącz menu szybkich akcji",
+      "open_project_menu": "Otwórz menu projektu",
+      "close_project_menu": "Zamknij menu projektu",
+      "collapse_sidebar": "Zwiń pasek boczny",
+      "expand_sidebar": "Rozwiń pasek boczny",
+      "edition_badge": "Otwórz modal płatnych planów"
+    },
+    "auth_forms": {
+      "clear_email": "Wyczyść e-mail",
+      "show_password": "Pokaż hasło",
+      "hide_password": "Ukryj hasło",
+      "close_alert": "Zamknij alert",
+      "close_popover": "Zamknij popover"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/auth.json b/packages/i18n/src/locales/pl/auth.json
new file mode 100644
index 0000000..a39ce3a
--- /dev/null
+++ b/packages/i18n/src/locales/pl/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Tożsamość",
+    "description": "Skonfiguruj swoją domenę, aby uzyskać dostęp do funkcji bezpieczeństwa, w tym logowania jednokrotnego.",
+    "domain_management": {
+      "header": "Zarządzanie domenami",
+      "verified_domains": {
+        "header": "Zweryfikowane domeny",
+        "description": "Zweryfikuj własność domeny e-mail, aby włączyć logowanie jednokrotne.",
+        "button_text": "Dodaj domenę",
+        "list": {
+          "domain_name": "Nazwa domeny",
+          "status": "Status",
+          "status_verified": "Zweryfikowano",
+          "status_failed": "Niepowodzenie",
+          "status_pending": "Oczekujące"
+        },
+        "add_domain": {
+          "title": "Dodaj domenę",
+          "description": "Dodaj swoją domenę, aby skonfigurować SSO i ją zweryfikować.",
+          "form": {
+            "domain_label": "Domena",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Domena jest wymagana",
+            "domain_invalid": "Wprowadź prawidłową nazwę domeny (np. plane.so)"
+          },
+          "primary_button_text": "Dodaj domenę",
+          "primary_button_loading_text": "Dodawanie",
+          "toast": {
+            "success_title": "Sukces!",
+            "success_message": "Domena została pomyślnie dodana. Proszę zweryfikować ją, dodając rekord DNS TXT.",
+            "error_message": "Nie udało się dodać domeny. Spróbuj ponownie."
+          }
+        },
+        "verify_domain": {
+          "title": "Zweryfikuj swoją domenę",
+          "description": "Wykonaj te kroki, aby zweryfikować swoją domenę.",
+          "instructions": {
+            "label": "Instrukcje",
+            "step_1": "Przejdź do ustawień DNS dla swojego hosta domeny.",
+            "step_2": {
+              "part_1": "Utwórz",
+              "part_2": "rekord TXT",
+              "part_3": "i wklej pełną wartość rekordu podaną poniżej."
+            },
+            "step_3": "Ta aktualizacja zwykle trwa kilka minut, ale może zająć do 72 godzin.",
+            "step_4": "Kliknij \"Zweryfikuj domenę\", aby potwierdzić po zaktualizowaniu rekordu DNS."
+          },
+          "verification_code_label": "Wartość rekordu TXT",
+          "verification_code_description": "Dodaj ten rekord do ustawień DNS",
+          "domain_label": "Domena",
+          "primary_button_text": "Zweryfikuj domenę",
+          "primary_button_loading_text": "Weryfikowanie",
+          "secondary_button_text": "Zrobię to później",
+          "toast": {
+            "success_title": "Sukces!",
+            "success_message": "Domena została pomyślnie zweryfikowana.",
+            "error_message": "Nie udało się zweryfikować domeny. Spróbuj ponownie."
+          }
+        },
+        "delete_domain": {
+          "title": "Usuń domenę",
+          "description": {
+            "prefix": "Czy na pewno chcesz usunąć",
+            "suffix": "? Tej akcji nie można cofnąć."
+          },
+          "primary_button_text": "Usuń",
+          "primary_button_loading_text": "Usuwanie",
+          "secondary_button_text": "Anuluj",
+          "toast": {
+            "success_title": "Sukces!",
+            "success_message": "Domena została pomyślnie usunięta.",
+            "error_message": "Nie udało się usunąć domeny. Spróbuj ponownie."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Logowanie jednokrotne",
+      "disabled_message": "Dodaj zweryfikowaną domenę, aby skonfigurować SSO",
+      "configure": {
+        "create": "Skonfiguruj",
+        "update": "Edytuj"
+      },
+      "switch_alert_modal": {
+        "title": "Przełącz metodę SSO na {newProviderShortName}?",
+        "content": "Zamierzasz włączyć {newProviderLongName} ({newProviderShortName}). Ta akcja automatycznie wyłączy {activeProviderLongName} ({activeProviderShortName}). Użytkownicy próbujący zalogować się przez {activeProviderShortName} nie będą już mogli uzyskać dostępu do platformy, dopóki nie przełączą się na nową metodę. Czy na pewno chcesz kontynuować?",
+        "primary_button_text": "Przełącz",
+        "primary_button_text_loading": "Przełączanie",
+        "secondary_button_text": "Anuluj"
+      },
+      "form_section": {
+        "title": "Szczegóły dostarczone przez IdP dla {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Zapisywanie",
+        "save_changes": "Zapisz zmiany",
+        "configure_only": "Tylko konfiguracja",
+        "configure_and_enable": "Skonfiguruj i włącz",
+        "default": "Zapisz"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} szczegóły dostarczone dla Twojego IdP",
+        "button_text": "Pobierz szczegóły konfiguracji"
+      },
+      "saml": {
+        "header": "Włącz SAML",
+        "description": "Skonfiguruj swojego dostawcę tożsamości SAML, aby włączyć logowanie jednokrotne.",
+        "configure": {
+          "title": "Włącz SAML",
+          "description": "Zweryfikuj własność domeny e-mail, aby uzyskać dostęp do funkcji bezpieczeństwa, w tym logowania jednokrotnego.",
+          "toast": {
+            "success_title": "Sukces!",
+            "create_success_message": "Dostawca SAML został pomyślnie utworzony.",
+            "update_success_message": "Dostawca SAML został pomyślnie zaktualizowany.",
+            "error_title": "Błąd!",
+            "error_message": "Nie udało się zapisać dostawcy SAML. Spróbuj ponownie."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Szczegóły internetowe",
+            "entity_id": {
+              "label": "Identyfikator jednostki | Odbiorcy | Informacje o metadanych",
+              "description": "Wygenerujemy tę część metadanych, która identyfikuje tę aplikację Plane jako autoryzowaną usługę w Twoim IdP."
+            },
+            "callback_url": {
+              "label": "URL logowania jednokrotnego",
+              "description": "Wygenerujemy to dla Ciebie. Dodaj to w polu URL przekierowania logowania Twojego IdP."
+            },
+            "logout_url": {
+              "label": "URL wylogowania jednokrotnego",
+              "description": "Wygenerujemy to dla Ciebie. Dodaj to w polu URL przekierowania wylogowania jednokrotnego Twojego IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Szczegóły mobilne",
+            "entity_id": {
+              "label": "Identyfikator jednostki | Odbiorcy | Informacje o metadanych",
+              "description": "Wygenerujemy tę część metadanych, która identyfikuje tę aplikację Plane jako autoryzowaną usługę w Twoim IdP."
+            },
+            "callback_url": {
+              "label": "URL logowania jednokrotnego",
+              "description": "Wygenerujemy to dla Ciebie. Dodaj to w polu URL przekierowania logowania Twojego IdP."
+            },
+            "logout_url": {
+              "label": "URL wylogowania jednokrotnego",
+              "description": "Wygenerujemy to dla Ciebie. Dodaj to w polu URL przekierowania wylogowania Twojego IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Szczegóły mapowania",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Włącz OIDC",
+        "description": "Skonfiguruj swojego dostawcę tożsamości OIDC, aby włączyć logowanie jednokrotne.",
+        "configure": {
+          "title": "Włącz OIDC",
+          "description": "Zweryfikuj własność domeny e-mail, aby uzyskać dostęp do funkcji bezpieczeństwa, w tym logowania jednokrotnego.",
+          "toast": {
+            "success_title": "Sukces!",
+            "create_success_message": "Dostawca OIDC został pomyślnie utworzony.",
+            "update_success_message": "Dostawca OIDC został pomyślnie zaktualizowany.",
+            "error_title": "Błąd!",
+            "error_message": "Nie udało się zapisać dostawcy OIDC. Spróbuj ponownie."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Szczegóły internetowe",
+            "origin_url": {
+              "label": "URL źródła",
+              "description": "Wygenerujemy to dla tej aplikacji Plane. Dodaj to jako zaufane źródło w odpowiednim polu Twojego IdP."
+            },
+            "callback_url": {
+              "label": "URL przekierowania",
+              "description": "Wygenerujemy to dla Ciebie. Dodaj to w polu URL przekierowania logowania Twojego IdP."
+            },
+            "logout_url": {
+              "label": "URL wylogowania",
+              "description": "Wygenerujemy to dla Ciebie. Dodaj to w polu URL przekierowania wylogowania Twojego IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Szczegóły mobilne",
+            "origin_url": {
+              "label": "URL źródła",
+              "description": "Wygenerujemy to dla tej aplikacji Plane. Dodaj to jako zaufane źródło w odpowiednim polu Twojego IdP."
+            },
+            "callback_url": {
+              "label": "URL przekierowania",
+              "description": "Wygenerujemy to dla Ciebie. Dodaj to w polu URL przekierowania logowania Twojego IdP."
+            },
+            "logout_url": {
+              "label": "URL wylogowania",
+              "description": "Wygenerujemy to dla Ciebie. Dodaj to w polu URL przekierowania wylogowania Twojego IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "E-mail",
+        "placeholder": "imię@firma.pl",
+        "errors": {
+          "required": "E-mail jest wymagany",
+          "invalid": "E-mail jest nieprawidłowy"
+        }
+      },
+      "password": {
+        "label": "Hasło",
+        "set_password": "Ustaw hasło",
+        "placeholder": "Wpisz hasło",
+        "confirm_password": {
+          "label": "Potwierdź hasło",
+          "placeholder": "Potwierdź hasło"
+        },
+        "current_password": {
+          "label": "Obecne hasło"
+        },
+        "new_password": {
+          "label": "Nowe hasło",
+          "placeholder": "Wpisz nowe hasło"
+        },
+        "change_password": {
+          "label": {
+            "default": "Zmień hasło",
+            "submitting": "Trwa zmiana hasła"
+          }
+        },
+        "errors": {
+          "match": "Hasła nie pasują do siebie",
+          "empty": "Proszę wpisać swoje hasło",
+          "length": "Hasło musi mieć więcej niż 8 znaków",
+          "strength": {
+            "weak": "Hasło jest słabe",
+            "strong": "Hasło jest silne"
+          }
+        },
+        "submit": "Ustaw hasło",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Sukces!",
+              "message": "Hasło zostało pomyślnie zmienione."
+            },
+            "error": {
+              "title": "Błąd!",
+              "message": "Coś poszło nie tak. Spróbuj ponownie."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Unikalny kod",
+        "placeholder": "123456",
+        "paste_code": "Wklej kod wysłany na Twój e-mail",
+        "requesting_new_code": "Żądanie nowego kodu",
+        "sending_code": "Wysyłanie kodu"
+      },
+      "already_have_an_account": "Masz już konto?",
+      "login": "Zaloguj się",
+      "create_account": "Utwórz konto",
+      "new_to_plane": "Nowy w Plane?",
+      "back_to_sign_in": "Powrót do logowania",
+      "resend_in": "Wyślij ponownie za {seconds} sekund",
+      "sign_in_with_unique_code": "Zaloguj się za pomocą unikalnego kodu",
+      "forgot_password": "Zapomniałeś hasła?",
+      "username": {
+        "label": "Nazwa użytkownika",
+        "placeholder": "Wprowadź swoją nazwę użytkownika"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Utwórz konto i zacznij zarządzać pracą ze swoim zespołem.",
+        "step": {
+          "email": {
+            "header": "Rejestracja",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Rejestracja",
+            "sub_header": "Zarejestruj się, korzystając z kombinacji e-maila i hasła."
+          },
+          "unique_code": {
+            "header": "Rejestracja",
+            "sub_header": "Zarejestruj się, używając unikalnego kodu wysłanego na powyższy adres e-mail."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Użyj silniejszego hasła, aby kontynuować"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Zaloguj się i zacznij zarządzać pracą ze swoim zespołem.",
+        "step": {
+          "email": {
+            "header": "Zaloguj się lub zarejestruj",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Zaloguj się lub zarejestruj",
+            "sub_header": "Użyj adresu e-mail i hasła, aby się zalogować."
+          },
+          "unique_code": {
+            "header": "Zaloguj się lub zarejestruj",
+            "sub_header": "Zaloguj się za pomocą unikalnego kodu wysłanego na powyższy adres e-mail."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Zresetuj swoje hasło",
+      "description": "Podaj zweryfikowany adres e-mail konta użytkownika, a wyślemy Ci link do resetowania hasła.",
+      "email_sent": "Wysłaliśmy link resetujący na Twój adres e-mail",
+      "send_reset_link": "Wyślij link do resetowania",
+      "errors": {
+        "smtp_not_enabled": "Administrator nie włączył SMTP, nie możemy wysłać linku do resetowania hasła"
+      },
+      "toast": {
+        "success": {
+          "title": "E-mail wysłany",
+          "message": "Sprawdź skrzynkę pocztową, aby znaleźć link do resetowania hasła. Jeśli nie pojawi się w ciągu kilku minut, sprawdź folder spam."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Coś poszło nie tak. Spróbuj ponownie."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Ustaw nowe hasło",
+      "description": "Zabezpiecz swoje konto silnym hasłem"
+    },
+    "set_password": {
+      "title": "Zabezpiecz swoje konto",
+      "description": "Ustawienie hasła pomoże Ci bezpiecznie się logować"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Błąd!",
+          "message": "Wylogowanie nie powiodło się. Spróbuj ponownie."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Kontynuuj z {ldapProviderName}",
+        "sub_header": "Wprowadź swoje dane logowania {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/automation.json b/packages/i18n/src/locales/pl/automation.json
new file mode 100644
index 0000000..0632d1f
--- /dev/null
+++ b/packages/i18n/src/locales/pl/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Niestandardowe automatyzacje",
+      "create_automation": "Utwórz automatyzację"
+    },
+    "scope": {
+      "label": "Zakres",
+      "run_on": "Uruchom na"
+    },
+    "trigger": {
+      "label": "Wyzwalacz",
+      "add_trigger": "Dodaj wyzwalacz",
+      "sidebar_header": "Konfiguracja wyzwalacza",
+      "input_label": "Jaki jest wyzwalacz dla tej automatyzacji?",
+      "input_placeholder": "Wybierz opcję",
+      "section_plane_events": "Zdarzenia Plane",
+      "section_time_based": "Oparte na czasie",
+      "fixed_schedule": "Stały harmonogram",
+      "schedule": {
+        "frequency": "Częstotliwość",
+        "select_day": "Wybierz dzień",
+        "day_of_month": "Dzień miesiąca",
+        "monthly_every": "Każdy",
+        "monthly_day_aria": "Dzień {day}",
+        "time": "Godzina",
+        "hour": "Godzina",
+        "minute": "Minuta",
+        "hour_suffix": "godz",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Strefa czasowa",
+        "timezone_placeholder": "Wybierz strefę czasową",
+        "frequency_daily": "Codziennie",
+        "frequency_weekly": "Co tydzień",
+        "frequency_monthly": "Co miesiąc",
+        "on": "W",
+        "validation_weekly_day_required": "Wybierz co najmniej jeden dzień tygodnia.",
+        "validation_monthly_date_required": "Wybierz dzień miesiąca.",
+        "main_content_schedule_summary_daily": "Każdego dnia o {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Co tydzień w {days} o {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Co miesiąc w dniu {day} o {time} ({timezone}).",
+        "schedule_mode": "Tryb harmonogramu",
+        "schedule_mode_fixed": "Stały",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Wprowadź wyrażenie Cron",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Nieprawidłowe wyrażenie cron.",
+        "cron_preview": "To wyrażenie Cron uruchamia \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Wstecz",
+        "next": "Dodaj akcję"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Po utworzeniu nie można zmienić typu wyzwalacza"
+      }
+    },
+    "condition": {
+      "label": "Warunek",
+      "add_condition": "Dodaj warunek",
+      "adding_condition": "Dodawanie warunku"
+    },
+    "action": {
+      "label": "Akcja",
+      "add_action": "Dodaj akcję",
+      "sidebar_header": "Akcje",
+      "input_label": "Co robi automatyzacja?",
+      "input_placeholder": "Wybierz opcję",
+      "handler_name": {
+        "add_comment": "Dodaj komentarz",
+        "change_property": "Zmień właściwość",
+        "run_script": "Uruchom skrypt"
+      },
+      "configuration": {
+        "label": "Konfiguracja",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Wybierz właściwość",
+            "change_type": "Wybierz",
+            "property_value_select": "{count, plural, one{Wybierz wartość} other{Wybierz wartości}}",
+            "property_value_select_date": "Wybierz datę"
+          },
+          "validation": {
+            "property_name_required": "Nazwa właściwości jest wymagana",
+            "change_type_required": "Typ zmiany jest wymagany",
+            "property_value_required": "Wartość właściwości jest wymagana"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Dodaj komentarz"
+      },
+      "run_script_block": {
+        "title": "Uruchom skrypt"
+      },
+      "change_property_block": {
+        "title": "Zmień właściwość"
+      },
+      "validation": {
+        "delete_only_action": "Wyłącz automatyzację przed usunięciem jej jedynej akcji."
+      }
+    },
+    "conjunctions": {
+      "and": "I",
+      "or": "Lub",
+      "if": "Jeśli",
+      "then": "Wtedy"
+    },
+    "enable": {
+      "alert": "Naciśnij 'Włącz', gdy automatyzacja będzie gotowa. Po włączeniu automatyzacja będzie gotowa do uruchomienia.",
+      "validation": {
+        "required": "Automatyzacja musi mieć wyzwalacz i co najmniej jedną akcję, aby mogła zostać włączona."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Automatyzacja musi zostać wyłączona przed usunięciem."
+      }
+    },
+    "table": {
+      "title": "Tytuł automatyzacji",
+      "scope": "Zakres",
+      "projects": "Projekty",
+      "last_run_on": "Ostatnie uruchomienie",
+      "created_on": "Utworzono",
+      "last_updated_on": "Ostatnia aktualizacja",
+      "last_run_status": "Status ostatniego uruchomienia",
+      "average_duration": "Średni czas trwania",
+      "owner": "Właściciel",
+      "executions": "Wykonania"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Utwórz automatyzację",
+        "update": "Zaktualizuj automatyzację"
+      },
+      "title": {
+        "placeholder": "Nazwij swoją automatyzację.",
+        "required_error": "Tytuł jest wymagany"
+      },
+      "description": {
+        "placeholder": "Opisz swoją automatyzację."
+      },
+      "submit_button": {
+        "create": "Utwórz automatyzację",
+        "update": "Zaktualizuj automatyzację"
+      }
+    },
+    "delete_modal": {
+      "heading": "Usuń automatyzację"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Pokaż błędy",
+        "all": "Wszystkie",
+        "only_activity": "Tylko aktywność",
+        "only_run_history": "Tylko historia uruchomień"
+      },
+      "run_history": {
+        "initiator": "Inicjator"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Sukces!",
+          "message": "Automatyzacja została pomyślnie utworzona."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Tworzenie automatyzacji nie powiodło się."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Sukces!",
+          "message": "Automatyzacja została pomyślnie zaktualizowana."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Aktualizacja automatyzacji nie powiodła się."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Sukces!",
+          "message": "Automatyzacja została pomyślnie włączona."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Włączenie automatyzacji nie powiodło się."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Sukces!",
+          "message": "Automatyzacja została pomyślnie wyłączona."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Wyłączenie automatyzacji nie powiodło się."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automatyzacja usunięta",
+          "message": "{name}, automatyzacja, została usunięta z Twojego projektu."
+        },
+        "error": {
+          "title": "Nie udało się usunąć tej automatyzacji tym razem.",
+          "message": "Spróbuj usunąć ją ponownie lub wróć do niej później. Jeśli nadal nie możesz jej usunąć, skontaktuj się z nami."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Błąd!",
+            "message": "Nie udało się utworzyć akcji. Spróbuj ponownie!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Błąd!",
+            "message": "Nie udało się zaktualizować akcji. Spróbuj ponownie!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Nie ma jeszcze automatyzacji do wyświetlenia.",
+        "description": "Automatyzacje pomagają wyeliminować powtarzalne zadania poprzez ustawianie wyzwalaczy, warunków i akcji. Utwórz jedną, aby zaoszczędzić czas i utrzymać płynny przepływ pracy."
+      },
+      "upgrade": {
+        "title": "Automatyzacje",
+        "description": "Automatyzacje to sposób na automatyzację zadań w Twoim projekcie.",
+        "sub_description": "Odzyskaj 80% czasu administracyjnego, gdy używasz Automatyzacji."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Wybierz projekty, w których ma działać ta automatyzacja",
+        "all_projects": {
+          "label": "Wszystkie projekty",
+          "description": "Automatyzacja będzie działać dla wszystkich projektów w przestrzeni roboczej."
+        },
+        "select_projects": {
+          "label": "Wybierz projekty",
+          "description": "Automatyzacja będzie działać dla wybranych projektów w przestrzeni roboczej.",
+          "placeholder": "Wybierz projekty"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automatyzacje",
+        "title": "Automatyzacje",
+        "description": "Standaryzuj procesy w całej przestrzeni roboczej za pomocą globalnych automatyzacji."
+      },
+      "table": {
+        "scope": {
+          "global": "Globalny",
+          "project": {
+            "label": "Projekt",
+            "multiple": "Wiele",
+            "all": "Wszystkie"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/common.json b/packages/i18n/src/locales/pl/common.json
new file mode 100644
index 0000000..4c4850c
--- /dev/null
+++ b/packages/i18n/src/locales/pl/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Pracujemy nad tym. Jeśli potrzebujesz natychmiastowej pomocy,",
+    "reach_out_to_us": "skontaktuj się z nami",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "W przeciwnym razie spróbuj od czasu do czasu odświeżyć stronę lub odwiedź naszą",
+    "status_page": "stronę statusu"
+  },
+  "submit": "Wyślij",
+  "cancel": "Anuluj",
+  "loading": "Ładowanie",
+  "error": "Błąd",
+  "success": "Sukces",
+  "warning": "Ostrzeżenie",
+  "info": "Informacja",
+  "close": "Zamknij",
+  "yes": "Tak",
+  "no": "Nie",
+  "ok": "OK",
+  "name": "Nazwa",
+  "unknown_user": "Nieznany użytkownik",
+  "description": "Opis",
+  "search": "Szukaj",
+  "add_member": "Dodaj członka",
+  "adding_members": "Dodawanie członków",
+  "remove_member": "Usuń członka",
+  "add_members": "Dodaj członków",
+  "adding_member": "Dodawanie członka",
+  "remove_members": "Usuń członków",
+  "add": "Dodaj",
+  "adding": "Dodawanie",
+  "remove": "Usuń",
+  "add_new": "Dodaj nowy",
+  "remove_selected": "Usuń wybrane",
+  "first_name": "Imię",
+  "last_name": "Nazwisko",
+  "email": "E-mail",
+  "display_name": "Nazwa wyświetlana",
+  "role": "Rola",
+  "timezone": "Strefa czasowa",
+  "avatar": "Zdjęcie profilowe",
+  "cover_image": "Obraz w tle",
+  "password": "Hasło",
+  "change_cover": "Zmień obraz w tle",
+  "language": "Język",
+  "saving": "Zapisywanie",
+  "save_changes": "Zapisz zmiany",
+  "deactivate_account": "Dezaktywuj konto",
+  "deactivate_account_description": "Po dezaktywacji konto i wszystkie zasoby z nim związane zostaną trwale usunięte i nie będzie można ich odzyskać.",
+  "profile_settings": "Ustawienia profilu",
+  "your_account": "Twoje konto",
+  "security": "Bezpieczeństwo",
+  "activity": "Aktywność",
+  "activity_empty_state": {
+    "no_activity": "Brak aktywności",
+    "no_transitions": "Brak przejść",
+    "no_comments": "Brak komentarzy",
+    "no_worklogs": "Brak dzienników pracy",
+    "no_history": "Brak historii"
+  },
+  "preferences": "Preferencje",
+  "language_and_time": "Język i czas",
+  "notifications": "Powiadomienia",
+  "workspaces": "Przestrzenie robocze",
+  "create_workspace": "Utwórz przestrzeń roboczą",
+  "invitations": "Zaproszenia",
+  "summary": "Podsumowanie",
+  "assigned": "Przypisane",
+  "created": "Utworzone",
+  "subscribed": "Subskrybowane",
+  "you_do_not_have_the_permission_to_access_this_page": "Nie masz uprawnień do wyświetlenia tej strony.",
+  "something_went_wrong_please_try_again": "Coś poszło nie tak. Spróbuj ponownie.",
+  "load_more": "Załaduj więcej",
+  "select_or_customize_your_interface_color_scheme": "Wybierz lub dostosuj schemat kolorów interfejsu.",
+  "timezone_setting": "Aktualne ustawienie strefy czasowej.",
+  "language_setting": "Wybierz język używany w interfejsie użytkownika.",
+  "settings_moved_to_preferences": "Ustawienia strefy czasowej i języka zostały przeniesione do preferencji.",
+  "go_to_preferences": "Przejdź do preferencji",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Wybierz styl ruchu kursora, który Ci odpowiada.",
+  "theme": "Motyw",
+  "smooth_cursor": "Płynny kursor",
+  "system_preference": "Preferencje systemowe",
+  "light": "Jasny",
+  "dark": "Ciemny",
+  "light_contrast": "Jasny wysoki kontrast",
+  "dark_contrast": "Ciemny wysoki kontrast",
+  "custom": "Motyw niestandardowy",
+  "select_your_theme": "Wybierz motyw",
+  "customize_your_theme": "Dostosuj motyw",
+  "background_color": "Kolor tła",
+  "text_color": "Kolor tekstu",
+  "primary_color": "Kolor główny (motyw)",
+  "sidebar_background_color": "Kolor tła paska bocznego",
+  "sidebar_text_color": "Kolor tekstu paska bocznego",
+  "set_theme": "Ustaw motyw",
+  "enter_a_valid_hex_code_of_6_characters": "Wprowadź prawidłowy kod hex składający się z 6 znaków",
+  "background_color_is_required": "Kolor tła jest wymagany",
+  "text_color_is_required": "Kolor tekstu jest wymagany",
+  "primary_color_is_required": "Kolor główny jest wymagany",
+  "sidebar_background_color_is_required": "Kolor tła paska bocznego jest wymagany",
+  "sidebar_text_color_is_required": "Kolor tekstu paska bocznego jest wymagany",
+  "updating_theme": "Aktualizowanie motywu",
+  "theme_updated_successfully": "Motyw zaktualizowano pomyślnie",
+  "failed_to_update_the_theme": "Aktualizacja motywu nie powiodła się",
+  "email_notifications": "Powiadomienia e-mail",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Bądź na bieżąco z subskrybowanymi elementami pracy. Włącz, aby otrzymywać powiadomienia.",
+  "email_notification_setting_updated_successfully": "Ustawienia powiadomień e-mail zaktualizowano pomyślnie",
+  "failed_to_update_email_notification_setting": "Aktualizacja ustawień powiadomień e-mail nie powiodła się",
+  "notify_me_when": "Powiadamiaj mnie, gdy",
+  "property_changes": "Zmiany właściwości",
+  "property_changes_description": "Powiadamiaj, gdy zmieniają się właściwości elementów pracy, takie jak przypisanie, priorytet, oszacowania lub cokolwiek innego.",
+  "state_change": "Zmiana stanu",
+  "state_change_description": "Powiadamiaj, gdy element pracy zostaje przeniesiony do innego stanu",
+  "issue_completed": "Element pracy ukończony",
+  "issue_completed_description": "Powiadamiaj tylko, gdy element pracy zostanie ukończony",
+  "comments": "Komentarze",
+  "comments_description": "Powiadamiaj, gdy ktoś doda komentarz do elementu pracy",
+  "mentions": "Wzmianki",
+  "mentions_description": "Powiadamiaj mnie tylko, gdy ktoś mnie wspomni w komentarzach lub opisie",
+  "old_password": "Stare hasło",
+  "general_settings": "Ustawienia ogólne",
+  "sign_out": "Wyloguj się",
+  "signing_out": "Wylogowywanie",
+  "active_cycles": "Aktywne cykle",
+  "active_cycles_description": "Śledź cykle w różnych projektach, monitoruj elementy o wysokim priorytecie i koncentruj się na cyklach wymagających uwagi.",
+  "on_demand_snapshots_of_all_your_cycles": "Migawki wszystkich Twoich cykli na żądanie",
+  "upgrade": "Uaktualnij",
+  "10000_feet_view": "Widok z wysokości 10 000 stóp na wszystkie aktywne cykle.",
+  "10000_feet_view_description": "Przybliż wszystkie aktywne cykle w różnych projektach bez konieczności przełączania się między nimi.",
+  "get_snapshot_of_each_active_cycle": "Uzyskaj migawkę każdego aktywnego cyklu.",
+  "get_snapshot_of_each_active_cycle_description": "Śledź kluczowe metryki wszystkich aktywnych cykli, sprawdzaj postęp i porównuj zakres z terminami.",
+  "compare_burndowns": "Porównuj wykresy burndown.",
+  "compare_burndowns_description": "Obserwuj wydajność zespołów, przeglądając raporty burndown każdego cyklu.",
+  "quickly_see_make_or_break_issues": "Szybko identyfikuj kluczowe elementy pracy.",
+  "quickly_see_make_or_break_issues_description": "Przeglądaj elementy o wysokim priorytecie w każdym cyklu w kontekście terminów. Jeden klik i wszystko widzisz.",
+  "zoom_into_cycles_that_need_attention": "Skup się na cyklach wymagających uwagi.",
+  "zoom_into_cycles_that_need_attention_description": "Zbadaj stan każdego cyklu, który nie spełnia oczekiwań, za pomocą jednego kliknięcia.",
+  "stay_ahead_of_blockers": "Wyprzedzaj blokery.",
+  "stay_ahead_of_blockers_description": "Identyfikuj problemy między projektami i odkrywaj zależności między cyklami, niewidoczne w innych widokach.",
+  "analytics": "Analizy",
+  "workspace_invites": "Zaproszenia do przestrzeni roboczej",
+  "enter_god_mode": "Wejdź w tryb boga",
+  "workspace_logo": "Logo przestrzeni roboczej",
+  "new_issue": "Nowy element pracy",
+  "your_work": "Twoja praca",
+  "drafts": "Szkice",
+  "projects": "Projekty",
+  "views": "Widoki",
+  "archives": "Archiwa",
+  "settings": "Ustawienia",
+  "failed_to_move_favorite": "Nie udało się przenieść ulubionego",
+  "favorites": "Ulubione",
+  "no_favorites_yet": "Brak ulubionych",
+  "create_folder": "Utwórz folder",
+  "new_folder": "Nowy folder",
+  "favorite_updated_successfully": "Ulubione zaktualizowano pomyślnie",
+  "favorite_created_successfully": "Ulubione utworzono pomyślnie",
+  "folder_already_exists": "Folder już istnieje",
+  "folder_name_cannot_be_empty": "Nazwa folderu nie może być pusta",
+  "something_went_wrong": "Coś poszło nie tak",
+  "failed_to_reorder_favorite": "Nie udało się zmienić kolejności ulubionego",
+  "favorite_removed_successfully": "Ulubione usunięto pomyślnie",
+  "failed_to_create_favorite": "Nie udało się utworzyć ulubionego",
+  "failed_to_rename_favorite": "Nie udało się zmienić nazwy ulubionego",
+  "project_link_copied_to_clipboard": "Link do projektu skopiowano do schowka",
+  "link_copied": "Link skopiowany",
+  "add_project": "Dodaj projekt",
+  "create_project": "Utwórz projekt",
+  "failed_to_remove_project_from_favorites": "Nie udało się usunąć projektu z ulubionych. Spróbuj ponownie.",
+  "project_created_successfully": "Projekt utworzono pomyślnie",
+  "project_created_successfully_description": "Projekt został pomyślnie utworzony. Teraz możesz dodawać elementy pracy.",
+  "project_name_already_taken": "Nazwa projektu jest już zajęta.",
+  "project_name_cannot_contain_special_characters": "Nazwa projektu nie może zawierać znaków specjalnych.",
+  "project_identifier_already_taken": "Identyfikator projektu jest już zajęty.",
+  "project_cover_image_alt": "Obraz w tle projektu",
+  "name_is_required": "Nazwa jest wymagana",
+  "title_should_be_less_than_255_characters": "Nazwa musi mieć mniej niż 255 znaków",
+  "project_name": "Nazwa projektu",
+  "project_id_must_be_at_least_1_character": "ID projektu musi mieć co najmniej 1 znak",
+  "project_id_must_be_at_most_5_characters": "ID projektu może mieć maksymalnie 5 znaków",
+  "project_id": "ID projektu",
+  "project_id_tooltip_content": "Pomaga jednoznacznie identyfikować elementy pracy w projekcie. Max. 50 znaków.",
+  "description_placeholder": "Opis",
+  "only_alphanumeric_non_latin_characters_allowed": "Dozwolone są tylko znaki alfanumeryczne i nielatynowskie.",
+  "project_id_is_required": "ID projektu jest wymagane",
+  "project_id_allowed_char": "Dozwolone są tylko znaki alfanumeryczne i nielatynowskie.",
+  "project_id_min_char": "ID projektu musi mieć co najmniej 1 znak",
+  "project_id_max_char": "ID projektu może mieć maksymalnie {max} znaków",
+  "project_description_placeholder": "Wpisz opis projektu",
+  "select_network": "Wybierz sieć",
+  "lead": "Lead",
+  "date_range": "Zakres dat",
+  "private": "Prywatny",
+  "public": "Publiczny",
+  "accessible_only_by_invite": "Dostęp wyłącznie na zaproszenie",
+  "anyone_in_the_workspace_except_guests_can_join": "Każdy w przestrzeni, poza gośćmi, może dołączyć",
+  "creating": "Tworzenie",
+  "creating_project": "Tworzenie projektu",
+  "adding_project_to_favorites": "Dodawanie projektu do ulubionych",
+  "project_added_to_favorites": "Projekt dodano do ulubionych",
+  "couldnt_add_the_project_to_favorites": "Nie udało się dodać projektu do ulubionych. Spróbuj ponownie.",
+  "removing_project_from_favorites": "Usuwanie projektu z ulubionych",
+  "project_removed_from_favorites": "Projekt usunięto z ulubionych",
+  "couldnt_remove_the_project_from_favorites": "Nie udało się usunąć projektu z ulubionych. Spróbuj ponownie.",
+  "add_to_favorites": "Dodaj do ulubionych",
+  "remove_from_favorites": "Usuń z ulubionych",
+  "publish_project": "Opublikuj projekt",
+  "publish": "Opublikuj",
+  "copy_link": "Kopiuj link",
+  "leave_project": "Opuść projekt",
+  "join_the_project_to_rearrange": "Dołącz do projektu, aby zmienić układ",
+  "drag_to_rearrange": "Przeciągnij, aby zmienić układ",
+  "congrats": "Gratulacje!",
+  "open_project": "Otwórz projekt",
+  "issues": "Elementy pracy",
+  "cycles": "Cykle",
+  "modules": "Moduły",
+  "pages": "Strony",
+  "intake": "Zgłoszenia",
+  "renew": "Odnów",
+  "preview": "Podgląd",
+  "time_tracking": "Śledzenie czasu",
+  "work_management": "Zarządzanie pracą",
+  "projects_and_issues": "Projekty i elementy pracy",
+  "projects_and_issues_description": "Włączaj lub wyłączaj te funkcje w projekcie.",
+  "cycles_description": "Określ ramy czasowe pracy dla każdego projektu i dostosuj okres w razie potrzeby. Jeden cykl może trwać 2 tygodnie, a następny 1 tydzień.",
+  "modules_description": "Organizuj pracę w podprojekty z dedykowanymi liderami i przypisanymi osobami.",
+  "views_description": "Zapisz niestandardowe sortowania, filtry i opcje wyświetlania lub udostępnij je zespołowi.",
+  "pages_description": "Twórz i edytuj treści o swobodnej formie – notatki, dokumenty, cokolwiek.",
+  "intake_description": "Pozwól osobom spoza zespołu zgłaszać błędy, opinie i sugestie bez zakłócania przepływu pracy.",
+  "time_tracking_description": "Rejestruj czas spędzony na elementach pracy i projektach.",
+  "work_management_description": "Łatwo zarządzaj swoją pracą i projektami.",
+  "documentation": "Dokumentacja",
+  "message_support": "Skontaktuj się z pomocą",
+  "contact_sales": "Skontaktuj się z działem sprzedaży",
+  "hyper_mode": "Tryb Hyper",
+  "keyboard_shortcuts": "Skróty klawiaturowe",
+  "whats_new": "Co nowego?",
+  "version": "Wersja",
+  "we_are_having_trouble_fetching_the_updates": "Mamy problem z pobraniem aktualizacji.",
+  "our_changelogs": "nasze dzienniki zmian",
+  "for_the_latest_updates": "z najnowszymi aktualizacjami.",
+  "please_visit": "Odwiedź",
+  "docs": "Dokumentację",
+  "full_changelog": "Pełny dziennik zmian",
+  "support": "Wsparcie",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Oparte na Plane Pages",
+  "please_select_at_least_one_invitation": "Wybierz co najmniej jedno zaproszenie.",
+  "please_select_at_least_one_invitation_description": "Wybierz co najmniej jedno zaproszenie, aby dołączyć do przestrzeni roboczej.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Ktoś zaprosił Cię do przestrzeni roboczej",
+  "join_a_workspace": "Dołącz do przestrzeni roboczej",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Widzimy, że ktoś zaprosił Cię do przestrzeni roboczej",
+  "join_a_workspace_description": "Dołącz do przestrzeni roboczej",
+  "accept_and_join": "Zaakceptuj i dołącz",
+  "go_home": "Strona główna",
+  "no_pending_invites": "Brak oczekujących zaproszeń",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Zobaczysz tutaj, jeśli ktoś zaprosi Cię do przestrzeni roboczej",
+  "back_to_home": "Wróć do strony głównej",
+  "workspace_name": "nazwa-przestrzeni-roboczej",
+  "deactivate_your_account": "Dezaktywuj swoje konto",
+  "deactivate_your_account_description": "Po dezaktywacji nie będziesz mógł być przypisywany do elementów pracy, a opłaty za przestrzeń roboczą nie będą naliczane. Aby ponownie aktywować konto, będziesz potrzebować zaproszenia na ten adres e-mail.",
+  "deactivating": "Dezaktywowanie",
+  "confirm": "Potwierdź",
+  "confirming": "Potwierdzanie",
+  "draft_created": "Szkic utworzony",
+  "issue_created_successfully": "Element pracy utworzony pomyślnie",
+  "draft_creation_failed": "Nie udało się utworzyć szkicu",
+  "issue_creation_failed": "Nie udało się utworzyć elementu pracy",
+  "draft_issue": "Szkic elementu pracy",
+  "issue_updated_successfully": "Element pracy zaktualizowano pomyślnie",
+  "issue_could_not_be_updated": "Nie udało się zaktualizować elementu pracy",
+  "create_a_draft": "Utwórz szkic",
+  "save_to_drafts": "Zapisz w szkicach",
+  "save": "Zapisz",
+  "update": "Aktualizuj",
+  "updating": "Aktualizowanie",
+  "create_new_issue": "Utwórz nowy element pracy",
+  "editor_is_not_ready_to_discard_changes": "Edytor nie jest gotowy do odrzucenia zmian",
+  "failed_to_move_issue_to_project": "Nie udało się przenieść elementu pracy do projektu",
+  "create_more": "Utwórz więcej",
+  "add_to_project": "Dodaj do projektu",
+  "discard": "Odrzuć",
+  "duplicate_issue_found": "Znaleziono zduplikowany element pracy",
+  "duplicate_issues_found": "Znaleziono zduplikowane elementy pracy",
+  "no_matching_results": "Brak pasujących wyników",
+  "title_is_required": "Tytuł jest wymagany",
+  "title": "Tytuł",
+  "state": "Stan",
+  "transition": "Przejście",
+  "history": "Historia",
+  "priority": "Priorytet",
+  "none": "Brak",
+  "urgent": "Pilny",
+  "high": "Wysoki",
+  "medium": "Średni",
+  "low": "Niski",
+  "members": "Członkowie",
+  "assignee": "Przypisano",
+  "assignees": "Przypisani",
+  "subscriber": "{count, plural, one{# Subskrybent} few{# Subskrybentów} other{# Subskrybentów}}",
+  "you": "Ty",
+  "labels": "Etykiety",
+  "create_new_label": "Utwórz nową etykietę",
+  "label_name": "Nazwa etykiety",
+  "failed_to_create_label": "Nie udało się utworzyć etykiety. Spróbuj ponownie.",
+  "start_date": "Data rozpoczęcia",
+  "end_date": "Data zakończenia",
+  "due_date": "Termin",
+  "target_date": "Data docelowa",
+  "estimate": "Szacowanie",
+  "change_parent_issue": "Zmień element nadrzędny",
+  "remove_parent_issue": "Usuń element nadrzędny",
+  "add_parent": "Dodaj element nadrzędny",
+  "loading_members": "Ładowanie członków",
+  "view_link_copied_to_clipboard": "Link do widoku skopiowano do schowka.",
+  "required": "Wymagane",
+  "optional": "Opcjonalne",
+  "Cancel": "Anuluj",
+  "edit": "Edytuj",
+  "archive": "Archiwizuj",
+  "restore": "Przywróć",
+  "open_in_new_tab": "Otwórz w nowej karcie",
+  "delete": "Usuń",
+  "deleting": "Usuwanie",
+  "make_a_copy": "Utwórz kopię",
+  "move_to_project": "Przenieś do projektu",
+  "good": "Dzień dobry",
+  "morning": "rano",
+  "afternoon": "po południu",
+  "evening": "wieczorem",
+  "show_all": "Pokaż wszystko",
+  "show_less": "Pokaż mniej",
+  "no_data_yet": "Brak danych",
+  "syncing": "Synchronizowanie",
+  "add_work_item": "Dodaj element pracy",
+  "advanced_description_placeholder": "Naciśnij '/' aby wywołać polecenia",
+  "create_work_item": "Utwórz element pracy",
+  "attachments": "Załączniki",
+  "declining": "Odrzucanie",
+  "declined": "Odrzucono",
+  "decline": "Odrzuć",
+  "unassigned": "Nieprzypisane",
+  "work_items": "Elementy pracy",
+  "add_link": "Dodaj link",
+  "points": "Punkty",
+  "no_assignee": "Brak przypisanego",
+  "no_assignees_yet": "Brak przypisanych",
+  "no_labels_yet": "Brak etykiet",
+  "ideal": "Idealny",
+  "current": "Obecny",
+  "no_matching_members": "Brak pasujących członków",
+  "leaving": "Opuść",
+  "removing": "Usuwanie",
+  "leave": "Opuść",
+  "refresh": "Odśwież",
+  "refreshing": "Odświeżanie",
+  "refresh_status": "Odśwież status",
+  "prev": "Poprzedni",
+  "next": "Następny",
+  "re_generating": "Ponowne generowanie",
+  "re_generate": "Wygeneruj ponownie",
+  "re_generate_key": "Wygeneruj klucz ponownie",
+  "export": "Eksportuj",
+  "member": "{count, plural, one{# członek} few{# członkowie} other{# członków}}",
+  "new_password_must_be_different_from_old_password": "Nowe hasło musi być innym niż stare hasło",
+  "edited": "Edytowano",
+  "bot": "Bot",
+  "settings_description": "Zarządzaj preferencjami konta, przestrzeni roboczej i projektu w jednym miejscu. Przełączaj się między zakładkami, aby łatwo je skonfigurować.",
+  "back_to_workspace": "Wróć do przestrzeni roboczej",
+  "upgrade_request": "Poproś administratora obszaru roboczego o uaktualnienie.",
+  "copied_to_clipboard": "Skopiowano do schowka",
+  "copied_to_clipboard_description": "URL został pomyślnie skopiowany do schowka",
+  "toast": {
+    "success": "Sukces!",
+    "error": "Błąd!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Link utworzony",
+        "message": "Link został pomyślnie utworzony"
+      },
+      "not_created": {
+        "title": "Nie utworzono linku",
+        "message": "Nie udało się utworzyć linku"
+      },
+      "updated": {
+        "title": "Link zaktualizowany",
+        "message": "Link został pomyślnie zaktualizowany"
+      },
+      "not_updated": {
+        "title": "Link nie został zaktualizowany",
+        "message": "Nie udało się zaktualizować linku"
+      },
+      "removed": {
+        "title": "Link usunięty",
+        "message": "Link został pomyślnie usunięty"
+      },
+      "not_removed": {
+        "title": "Link nie został usunięty",
+        "message": "Nie udało się usunąć linku"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL jest nieprawidłowy",
+        "placeholder": "Wpisz lub wklej adres URL"
+      },
+      "title": {
+        "text": "Nazwa wyświetlana",
+        "placeholder": "Jak chcesz nazwać ten link"
+      }
+    }
+  },
+  "common": {
+    "all": "Wszystko",
+    "no_items_in_this_group": "Brak elementów w tej grupie",
+    "drop_here_to_move": "Upuść tutaj, aby przenieść",
+    "states": "Stany",
+    "state": "Stan",
+    "state_groups": "Grupy stanów",
+    "state_group": "Grupa stanów",
+    "priorities": "Priorytety",
+    "priority": "Priorytet",
+    "team_project": "Projekt zespołowy",
+    "project": "Projekt",
+    "cycle": "Cykl",
+    "cycles": "Cykle",
+    "module": "Moduł",
+    "modules": "Moduły",
+    "labels": "Etykiety",
+    "label": "Etykieta",
+    "admins": "Administratorzy",
+    "users": "Użytkownicy",
+    "guests": "Goście",
+    "assignees": "Przypisani",
+    "assignee": "Przypisano",
+    "created_by": "Utworzone przez",
+    "none": "Brak",
+    "link": "Link",
+    "estimates": "Szacunki",
+    "estimate": "Szacowanie",
+    "created_at": "Utworzono dnia",
+    "updated_at": "Zaktualizowano dnia",
+    "completed_at": "Zakończono dnia",
+    "layout": "Układ",
+    "filters": "Filtry",
+    "display": "Wyświetlanie",
+    "load_more": "Załaduj więcej",
+    "activity": "Aktywność",
+    "analytics": "Analizy",
+    "dates": "Daty",
+    "success": "Sukces!",
+    "something_went_wrong": "Coś poszło nie tak",
+    "error": {
+      "label": "Błąd!",
+      "message": "Wystąpił błąd. Spróbuj ponownie."
+    },
+    "group_by": "Grupuj według",
+    "epic": "Epik",
+    "epics": "Epiki",
+    "work_item": "Element pracy",
+    "work_items": "Elementy pracy",
+    "sub_work_item": "Podrzędny element pracy",
+    "views": "Widoki",
+    "pages": "Strony",
+    "add": "Dodaj",
+    "warning": "Ostrzeżenie",
+    "updating": "Aktualizowanie",
+    "adding": "Dodawanie",
+    "update": "Aktualizuj",
+    "creating": "Tworzenie",
+    "create": "Utwórz",
+    "cancel": "Anuluj",
+    "description": "Opis",
+    "title": "Tytuł",
+    "attachment": "Załącznik",
+    "general": "Ogólne",
+    "features": "Funkcje",
+    "automation": "Automatyzacja",
+    "project_name": "Nazwa projektu",
+    "project_id": "ID projektu",
+    "project_timezone": "Strefa czasowa projektu",
+    "created_on": "Utworzono dnia",
+    "updated_on": "Zaktualizowano",
+    "completed_on": "Completed on",
+    "update_project": "Zaktualizuj projekt",
+    "identifier_already_exists": "Identyfikator już istnieje",
+    "add_more": "Dodaj więcej",
+    "defaults": "Domyślne",
+    "add_label": "Dodaj etykietę",
+    "customize_time_range": "Dostosuj zakres czasu",
+    "loading": "Ładowanie",
+    "attachments": "Załączniki",
+    "property": "Właściwość",
+    "properties": "Właściwości",
+    "parent": "Nadrzędny",
+    "page": "Strona",
+    "remove": "Usuń",
+    "archiving": "Archiwizowanie",
+    "archive": "Archiwizuj",
+    "access": {
+      "public": "Publiczny",
+      "private": "Prywatny"
+    },
+    "done": "Gotowe",
+    "sub_work_items": "Podrzędne elementy pracy",
+    "comment": "Komentarz",
+    "workspace_level": "Poziom przestrzeni roboczej",
+    "order_by": {
+      "label": "Sortuj według",
+      "manual": "Ręcznie - Ranking",
+      "last_created": "Last created",
+      "last_updated": "Last updated",
+      "start_date": "Data rozpoczęcia",
+      "due_date": "Termin",
+      "asc": "Rosnąco",
+      "desc": "Malejąco",
+      "updated_on": "Zaktualizowano dnia"
+    },
+    "sort": {
+      "asc": "Rosnąco",
+      "desc": "Malejąco",
+      "created_on": "Utworzono dnia",
+      "updated_on": "Zaktualizowano dnia"
+    },
+    "comments": "Komentarze",
+    "updates": "Aktualizacje",
+    "additional_updates": "Dodatkowe aktualizacje",
+    "clear_all": "Wyczyść wszystko",
+    "copied": "Skopiowano!",
+    "link_copied": "Link skopiowano!",
+    "link_copied_to_clipboard": "Link skopiowano do schowka",
+    "copied_to_clipboard": "Link do elementu pracy skopiowano do schowka",
+    "branch_name_copied_to_clipboard": "Nazwa gałęzi skopiowana do schowka",
+    "is_copied_to_clipboard": "Element pracy skopiowany do schowka",
+    "no_links_added_yet": "Nie dodano jeszcze żadnych linków",
+    "add_link": "Dodaj link",
+    "links": "Linki",
+    "go_to_workspace": "Przejdź do przestrzeni roboczej",
+    "progress": "Postęp",
+    "optional": "Opcjonalne",
+    "join": "Dołącz",
+    "go_back": "Wróć",
+    "continue": "Kontynuuj",
+    "resend": "Wyślij ponownie",
+    "relations": "Relacje",
+    "dependencies": "Zależności",
+    "errors": {
+      "default": {
+        "title": "Błąd!",
+        "message": "Coś poszło nie tak. Spróbuj ponownie."
+      },
+      "required": "To pole jest wymagane",
+      "entity_required": "{entity} jest wymagane",
+      "restricted_entity": "{entity} jest ograniczony"
+    },
+    "update_link": "Zaktualizuj link",
+    "attach": "Dołącz",
+    "create_new": "Utwórz nowy",
+    "add_existing": "Dodaj istniejący",
+    "type_or_paste_a_url": "Wpisz lub wklej URL",
+    "url_is_invalid": "URL jest nieprawidłowy",
+    "display_title": "Nazwa wyświetlana",
+    "link_title_placeholder": "Jak chcesz nazwać ten link",
+    "url": "URL",
+    "side_peek": "Widok boczny",
+    "modal": "Okno modalne",
+    "full_screen": "Pełny ekran",
+    "close_peek_view": "Zamknij podgląd",
+    "toggle_peek_view_layout": "Przełącz układ podglądu",
+    "options": "Opcje",
+    "duration": "Czas trwania",
+    "today": "Dziś",
+    "week": "Tydzień",
+    "month": "Miesiąc",
+    "quarter": "Kwartał",
+    "press_for_commands": "Naciśnij '/' aby wywołać polecenia",
+    "click_to_add_description": "Kliknij, aby dodać opis",
+    "on_track": "Na dobrej drodze",
+    "off_track": "Poza planem",
+    "at_risk": "W zagrożeniu",
+    "timeline": "Oś czasu",
+    "completion": "Zakończenie",
+    "upcoming": "Nadchodzące",
+    "completed": "Zakończone",
+    "in_progress": "W trakcie",
+    "planned": "Zaplanowane",
+    "paused": "Wstrzymane",
+    "search": {
+      "label": "Szukaj",
+      "placeholder": "Wpisz wyszukiwane hasło",
+      "no_matches_found": "Nie znaleziono pasujących wyników",
+      "no_matching_results": "Brak pasujących wyników",
+      "min_chars": "Wpisz co najmniej {count} znaków, aby wyszukać",
+      "error": "Błąd pobierania wyników wyszukiwania",
+      "no_results": {
+        "title": "Brak pasujących wyników",
+        "description": "Usuń kryteria wyszukiwania, aby zobaczyć wszystkie wyniki"
+      }
+    },
+    "actions": {
+      "edit": "Edytuj",
+      "make_a_copy": "Utwórz kopię",
+      "open_in_new_tab": "Otwórz w nowej karcie",
+      "copy_link": "Kopiuj link",
+      "copy_branch_name": "Kopiuj nazwę gałęzi",
+      "archive": "Archiwizuj",
+      "restore": "Przywróć",
+      "delete": "Usuń",
+      "remove_relation": "Usuń relację",
+      "subscribe": "Subskrybuj",
+      "unsubscribe": "Anuluj subskrypcję",
+      "clear_sorting": "Wyczyść sortowanie",
+      "show_weekends": "Pokaż weekendy",
+      "enable": "Włącz",
+      "disable": "Wyłącz",
+      "copy_markdown": "Kopiuj markdown",
+      "reply": "Odpowiedz"
+    },
+    "name": "Nazwa",
+    "discard": "Odrzuć",
+    "confirm": "Potwierdź",
+    "confirming": "Potwierdzanie",
+    "read_the_docs": "Przeczytaj dokumentację",
+    "default": "Domyślne",
+    "active": "Aktywny",
+    "enabled": "Włączone",
+    "disabled": "Wyłączone",
+    "mandate": "Mandat",
+    "mandatory": "Wymagane",
+    "global": "Globalny",
+    "yes": "Tak",
+    "no": "Nie",
+    "please_wait": "Proszę czekać",
+    "enabling": "Włączanie",
+    "disabling": "Wyłączanie",
+    "beta": "Beta",
+    "or": "lub",
+    "next": "Dalej",
+    "back": "Wstecz",
+    "retry": "Ponów",
+    "cancelling": "Anulowanie",
+    "configuring": "Konfigurowanie",
+    "clear": "Wyczyść",
+    "import": "Importuj",
+    "connect": "Połącz",
+    "authorizing": "Autoryzowanie",
+    "processing": "Przetwarzanie",
+    "no_data_available": "Brak dostępnych danych",
+    "from": "od {name}",
+    "authenticated": "Uwierzytelniono",
+    "select": "Wybierz",
+    "upgrade": "Uaktualnij",
+    "add_seats": "Dodaj miejsca",
+    "projects": "Projekty",
+    "workspace": "Przestrzeń robocza",
+    "workspaces": "Przestrzenie robocze",
+    "team": "Zespół",
+    "teams": "Zespoły",
+    "entity": "Encja",
+    "entities": "Encje",
+    "task": "Zadanie",
+    "tasks": "Zadania",
+    "section": "Sekcja",
+    "sections": "Sekcje",
+    "edit": "Edytuj",
+    "connecting": "Łączenie",
+    "connected": "Połączono",
+    "disconnect": "Odłącz",
+    "disconnecting": "Odłączanie",
+    "installing": "Instalowanie",
+    "install": "Zainstaluj",
+    "reset": "Resetuj",
+    "live": "Na żywo",
+    "change_history": "Historia zmian",
+    "coming_soon": "Wkrótce",
+    "member": "Członek",
+    "members": "Członkowie",
+    "you": "Ty",
+    "upgrade_cta": {
+      "higher_subscription": "Uaktualnij do wyższego abonamentu",
+      "talk_to_sales": "Skontaktuj się z działem sprzedaży"
+    },
+    "category": "Kategoria",
+    "categories": "Kategorie",
+    "saving": "Zapisywanie",
+    "save_changes": "Zapisz zmiany",
+    "delete": "Usuń",
+    "deleting": "Usuwanie",
+    "pending": "Oczekujące",
+    "invite": "Zaproś",
+    "view": "Widok",
+    "deactivated_user": "Dezaktywowany użytkownik",
+    "apply": "Zastosuj",
+    "applying": "Zastosowanie",
+    "overview": "Przegląd",
+    "no_of": "Liczba {entity}",
+    "resolved": "Rozwiązane",
+    "get_started": "Rozpocznij",
+    "worklogs": "Logi pracy",
+    "project_updates": "Aktualizacje projektu",
+    "workflows": "Workflowy",
+    "templates": "Szablony",
+    "business": "Biznes",
+    "members_and_teamspaces": "Członkowie i tymacz",
+    "recurring_work_items": "Powtarzające się elementy pracy",
+    "milestones": "Kamienie milowe",
+    "open_in_full_screen": "Otwórz {page} na pełnym ekranie",
+    "details": "Szczegóły",
+    "project_structure": "Struktura projektu",
+    "custom_properties": "Właściwości niestandardowe",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Oś X",
+    "y_axis": "Oś Y",
+    "metric": "Metryka"
+  },
+  "form": {
+    "title": {
+      "required": "Tytuł jest wymagany",
+      "max_length": "Tytuł powinien mieć mniej niż {length} znaków"
+    }
+  },
+  "entity": {
+    "grouping_title": "Grupowanie {entity}",
+    "priority": "Priorytet {entity}",
+    "all": "Wszystkie {entity}",
+    "drop_here_to_move": "Przeciągnij tutaj, aby przenieść {entity}",
+    "delete": {
+      "label": "Usuń {entity}",
+      "success": "{entity} pomyślnie usunięto",
+      "failed": "Nie udało się usunąć {entity}"
+    },
+    "update": {
+      "failed": "Aktualizacja {entity} nie powiodła się",
+      "success": "{entity} zaktualizowano pomyślnie"
+    },
+    "link_copied_to_clipboard": "Link do {entity} skopiowano do schowka",
+    "fetch": {
+      "failed": "Błąd podczas pobierania {entity}"
+    },
+    "add": {
+      "success": "{entity} dodano pomyślnie",
+      "failed": "Błąd podczas dodawania {entity}"
+    },
+    "remove": {
+      "success": "{entity} usunięto pomyślnie",
+      "failed": "Błąd podczas usuwania {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Nie udało się dodać pliku. Spróbuj ponownie.",
+    "only_one_file_allowed": "Możesz przesłać tylko jeden plik naraz.",
+    "file_size_limit": "Plik musi być mniejszy niż {size}MB.",
+    "drag_and_drop": "Przeciągnij plik w dowolne miejsce, aby przesłać",
+    "delete": "Usuń załącznik"
+  },
+  "label": {
+    "select": "Wybierz etykietę",
+    "create": {
+      "success": "Etykietę utworzono pomyślnie",
+      "failed": "Nie udało się utworzyć etykiety",
+      "already_exists": "Taka etykieta już istnieje",
+      "type": "Wpisz, aby utworzyć nową etykietę"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Widok} few {Widoki} other {Widoków}}",
+    "create": {
+      "label": "Utwórz widok"
+    },
+    "update": {
+      "label": "Zaktualizuj widok"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Gość",
+      "description": "Użytkownicy zewnętrzni mogą być zapraszani jako goście."
+    },
+    "member": {
+      "title": "Członek",
+      "description": "Może czytać, tworzyć, edytować i usuwać encje."
+    },
+    "admin": {
+      "title": "Administrator",
+      "description": "Posiada wszystkie uprawnienia w przestrzeni."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Menadżer produktu/projektu",
+    "development_or_engineering": "Deweloper/Inżynier",
+    "founder_or_executive": "Założyciel/Dyrektor",
+    "freelancer_or_consultant": "Freelancer/Konsultant",
+    "marketing_or_growth": "Marketing/Rozwój",
+    "sales_or_business_development": "Sprzedaż/Business Development",
+    "support_or_operations": "Wsparcie/Operacje",
+    "student_or_professor": "Student/Profesor",
+    "human_resources": "Zasoby ludzkie",
+    "other": "Inne"
+  },
+  "default_global_view": {
+    "all_issues": "Wszystkie elementy",
+    "assigned": "Przypisane",
+    "created": "Utworzone",
+    "subscribed": "Subskrybowane"
+  },
+  "description_versions": {
+    "last_edited_by": "Ostatnio edytowane przez",
+    "previously_edited_by": "Wcześniej edytowane przez",
+    "edited_by": "Edytowane przez"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane nie uruchomił się. Może to być spowodowane tym, że jedna lub więcej usług Plane nie mogła się uruchomić.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Wybierz View Logs z setup.sh i logów Docker, aby mieć pewność."
+  },
+  "customize_navigation": "Dostosuj nawigację",
+  "personal": "Osobiste",
+  "accordion_navigation_control": "Nawigacja boczna typu akordeon",
+  "horizontal_navigation_bar": "Nawigacja z zakładkami",
+  "show_limited_projects_on_sidebar": "Pokaż ograniczoną liczbę projektów na pasku bocznym",
+  "enter_number_of_projects": "Wprowadź liczbę projektów",
+  "pin": "Przypnij",
+  "unpin": "Odepnij",
+  "workspace_dashboards": "Daszbord",
+  "pi_chat": "AI Czat",
+  "in_app": "W aplikacji",
+  "forms": "Formularze",
+  "milestones": "Kamienie milowe",
+  "milestones_description": "Kamienie milowe tworzą warstwę pozwalającą wyrównać elementy pracy wokół wspólnych dat zakończenia.",
+  "file_upload": {
+    "upload_text": "Kliknij tutaj, aby przesłać plik",
+    "drag_drop_text": "Przeciągnij i upuść",
+    "processing": "Przetwarzanie",
+    "invalid_file_type": "Nieprawidłowy typ pliku",
+    "missing_fields": "Brakujące pola",
+    "success": "{fileName} przesłany!"
+  },
+  "date": "Data",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Eksportuj elementy do pliku CSV.",
+      "short_description": "Eksportuj jako CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Eksportuj elementy do pliku Excel.",
+      "short_description": "Eksportuj jako Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Eksportuj elementy do pliku Excel.",
+      "short_description": "Eksportuj jako Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Eksportuj elementy do pliku JSON.",
+      "short_description": "Eksportuj jako JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/cycle.json b/packages/i18n/src/locales/pl/cycle.json
new file mode 100644
index 0000000..0ef3168
--- /dev/null
+++ b/packages/i18n/src/locales/pl/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Dodaj elementy pracy, aby śledzić postęp"
+      },
+      "chart": {
+        "title": "Dodaj elementy pracy, aby wyświetlić wykres burndown."
+      },
+      "priority_issue": {
+        "title": "Tutaj pojawią się elementy o wysokim priorytecie."
+      },
+      "assignee": {
+        "title": "Przypisz elementy, aby zobaczyć podział przypisania."
+      },
+      "label": {
+        "title": "Dodaj etykiety, aby przeprowadzić analizę według etykiet."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Cykl} few {Cykle} other {Cyklów}}",
+    "no_cycle": "Brak cyklu"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Dodaj elementy pracy do cyklu, aby zobaczyć jego\n postęp"
+      },
+      "priority": {
+        "title": "Obserwuj elementy pracy o wysokim priorytecie\n realizowane w cyklu na pierwszy rzut oka."
+      },
+      "assignee": {
+        "title": "Dodaj przypisanych do elementów pracy, aby zobaczyć\n podział pracy według przypisanych osób."
+      },
+      "label": {
+        "title": "Dodaj etykiety do elementów pracy, aby zobaczyć\n podział pracy według etykiet."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/editor.json b/packages/i18n/src/locales/pl/editor.json
new file mode 100644
index 0000000..ffe6382
--- /dev/null
+++ b/packages/i18n/src/locales/pl/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Przeciągnij i upuść, aby przesłać pliki zewnętrzne"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Plik za duży.",
+        "description": "Maksymalny rozmiar na plik to {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Nieobsługiwany typ pliku.",
+        "description": "Zobacz obsługiwane formaty"
+      },
+      "default": {
+        "title": "Przesyłanie nie powiodło się.",
+        "description": "Coś poszło nie tak. Spróbuj ponownie."
+      }
+    },
+    "upgrade": {
+      "description": "Uaktualnij swój plan, aby wyświetlić ten załącznik."
+    },
+    "aria": {
+      "click_to_upload": "Kliknij, aby przesłać załącznik"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Konwertuj na osadzenie",
+      "convert_to_link": "Konwertuj na link",
+      "convert_to_richcard": "Konwertuj na bogatą kartę"
+    },
+    "placeholder": {
+      "insert_embed": "Wstaw tutaj preferowany link do osadzenia, np. film YouTube, projekt Figma itp.",
+      "link": "Wprowadź lub wklej link"
+    },
+    "input_modal": {
+      "embed": "Osadź",
+      "works_with_links": "Działa z YouTube, Figma, Google Docs i innymi"
+    },
+    "error": {
+      "not_valid_link": "Wprowadź prawidłowy adres URL."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Opisz zawartość tego bloku",
+      "generated_here": "Twoja zawartość AI zostanie wygenerowana tutaj"
+    },
+    "block_types": {
+      "placeholder": "Wybierz typ bloku",
+      "summarize_page": "Podsumuj stronę",
+      "custom_prompt": "Niestandardowy prompt"
+    },
+    "actions": {
+      "discard": "Odrzuć",
+      "generate": "Generuj",
+      "generating": "Generowanie",
+      "rewriting": "Przepisywanie",
+      "rewrite": "Przepisz",
+      "use_this": "Użyj tego",
+      "refine": "Udoskonal"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/empty-state.json b/packages/i18n/src/locales/pl/empty-state.json
new file mode 100644
index 0000000..9ade0d8
--- /dev/null
+++ b/packages/i18n/src/locales/pl/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Nie ma jeszcze metryk postępu do wyświetlenia.",
+      "description": "Zacznij ustawiać wartości właściwości w elementach roboczych, aby zobaczyć tutaj metryki postępu."
+    },
+    "updates": {
+      "title": "Jeszcze brak aktualizacji.",
+      "description": "Gdy członkowie projektu dodadzą aktualizacje, pojawią się one tutaj"
+    },
+    "search": {
+      "title": "Brak pasujących wyników.",
+      "description": "Nie znaleziono wyników. Spróbuj dostosować wyszukiwane hasła."
+    },
+    "not_found": {
+      "title": "Ups! Coś wydaje się nie tak",
+      "description": "Obecnie nie możemy pobrać Twojego konta plane. Może to być błąd sieci.",
+      "cta_primary": "Spróbuj przeładować"
+    },
+    "server_error": {
+      "title": "Błąd serwera",
+      "description": "Nie możemy się połączyć i pobrać danych z naszego serwera. Nie martw się, pracujemy nad tym.",
+      "cta_primary": "Spróbuj przeładować"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Wygląda na to, że nie masz dostępu do tego projektu",
+      "restricted_description": "Skontaktuj się z administratorem, aby poprosić o dostęp i móc kontynuować tutaj.",
+      "join_description": "Kliknij przycisk poniżej, aby dołączyć.",
+      "cta_primary": "Dołącz do projektu",
+      "cta_loading": "Dołączanie do projektu"
+    },
+    "invalid_project": {
+      "title": "Projekt nie został znaleziony",
+      "description": "Projekt, którego szukasz, nie istnieje."
+    },
+    "work_items": {
+      "title": "Zacznij od swojego pierwszego elementu roboczego.",
+      "description": "Elementy robocze są podstawowymi elementami Twojego projektu — przypisuj właścicieli, ustalaj priorytety i łatwo śledź postęp.",
+      "cta_primary": "Utwórz swój pierwszy element roboczy"
+    },
+    "cycles": {
+      "title": "Grupuj i ograniczaj czasowo swoją pracę w Cyklach.",
+      "description": "Podziel pracę na bloki czasowe, pracuj wstecz od terminu projektu, aby ustalić daty, i osiągaj wymierny postęp jako zespół.",
+      "cta_primary": "Ustaw swój pierwszy cykl"
+    },
+    "cycle_work_items": {
+      "title": "Brak elementów roboczych do wyświetlenia w tym cyklu",
+      "description": "Utwórz elementy robocze, aby rozpocząć monitorowanie postępów Twojego zespołu w tym cyklu i osiągnąć swoje cele na czas.",
+      "cta_primary": "Utwórz element roboczy",
+      "cta_secondary": "Dodaj istniejący element roboczy"
+    },
+    "modules": {
+      "title": "Mapuj cele swojego projektu na Moduły i łatwo śledź.",
+      "description": "Moduły składają się z połączonych elementów roboczych. Pomagają one monitorować postęp przez fazy projektu, każda z konkretnymi terminami i analityką, aby wskazać, jak blisko jesteś osiągnięcia tych faz.",
+      "cta_primary": "Ustaw swój pierwszy moduł"
+    },
+    "module_work_items": {
+      "title": "Brak elementów roboczych do wyświetlenia w tym Module",
+      "description": "Utwórz elementy robocze, aby rozpocząć monitorowanie tego modułu.",
+      "cta_primary": "Utwórz element roboczy",
+      "cta_secondary": "Dodaj istniejący element roboczy"
+    },
+    "views": {
+      "title": "Zapisz niestandardowe widoki dla swojego projektu",
+      "description": "Widoki to zapisane filtry, które pomagają szybko uzyskać dostęp do najczęściej używanych informacji. Współpracuj bez wysiłku, gdy członkowie zespołu udostępniają i dostosowują widoki do swoich konkretnych potrzeb.",
+      "cta_primary": "Utwórz widok"
+    },
+    "no_work_items_in_project": {
+      "title": "Brak elementów roboczych w projekcie jeszcze",
+      "description": "Dodaj elementy robocze do swojego projektu i podziel swoją pracę na śledzone części za pomocą widoków.",
+      "cta_primary": "Dodaj element roboczy"
+    },
+    "work_item_filter": {
+      "title": "Nie znaleziono elementów roboczych",
+      "description": "Twój aktualny filtr nie zwrócił żadnych wyników. Spróbuj zmienić filtry.",
+      "cta_primary": "Dodaj element roboczy"
+    },
+    "pages": {
+      "title": "Dokumentuj wszystko — od notatek po PRD",
+      "description": "Strony pozwalają przechwytywać i organizować informacje w jednym miejscu. Pisz notatki ze spotkań, dokumentację projektu i PRD, osadzaj elementy robocze i strukturyzuj je za pomocą gotowych komponentów.",
+      "cta_primary": "Utwórz swoją pierwszą Stronę"
+    },
+    "archive_pages": {
+      "title": "Jeszcze brak zarchiwizowanych stron",
+      "description": "Archiwizuj strony, które nie są na Twoim radarze. Uzyskaj do nich dostęp tutaj, gdy będzie to potrzebne."
+    },
+    "intake_sidebar": {
+      "title": "Rejestruj zgłoszenia przyjmowane",
+      "description": "Przesyłaj nowe zgłoszenia do przeglądu, ustalania priorytetów i śledzenia w ramach przepływu pracy Twojego projektu.",
+      "cta_primary": "Utwórz zgłoszenie przyjmowane"
+    },
+    "intake_main": {
+      "title": "Wybierz element roboczy Intake, aby wyświetlić jego szczegóły"
+    },
+    "epics": {
+      "title": "Przekształć złożone projekty w uporządkowane epiki.",
+      "description": "Epik pomaga organizować duże cele w mniejsze, śledzone zadania.",
+      "cta_primary": "Utwórz epik",
+      "cta_secondary": "Dokumentacja"
+    },
+    "epic_work_items": {
+      "title": "Nie dodałeś jeszcze elementów roboczych do tego epiku.",
+      "description": "Zacznij od dodania elementów roboczych do tego epiku i śledź je tutaj.",
+      "cta_secondary": "Dodaj elementy robocze"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Jeszcze brak zarchiwizowanych epik",
+      "description": "Możesz archiwizować ukończone lub anulowane epiki. Znajdziesz je tutaj po zarchiwizowaniu."
+    },
+    "archive_work_items": {
+      "title": "Jeszcze brak zarchiwizowanych elementów roboczych",
+      "description": "Ręcznie lub za pomocą automatyzacji możesz archiwizować ukończone lub anulowane elementy robocze. Znajdź je tutaj po zarchiwizowaniu.",
+      "cta_primary": "Ustaw automatyzację"
+    },
+    "archive_cycles": {
+      "title": "Jeszcze brak zarchiwizowanych cykli",
+      "description": "Aby uporządkować swój projekt, archiwizuj ukończone cykle. Znajdź je tutaj po zarchiwizowaniu."
+    },
+    "archive_modules": {
+      "title": "Jeszcze brak zarchiwizowanych Modułów",
+      "description": "Aby uporządkować swój projekt, archiwizuj ukończone lub anulowane moduły. Znajdź je tutaj po zarchiwizowaniu."
+    },
+    "home_widget_quick_links": {
+      "title": "Miej pod ręką ważne odniesienia, zasoby lub dokumenty do swojej pracy"
+    },
+    "inbox_sidebar_all": {
+      "title": "Aktualizacje dla Twoich subskrybowanych elementów roboczych pojawią się tutaj"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Wzmianki dotyczące Twoich elementów roboczych pojawią się tutaj"
+    },
+    "your_work_by_priority": {
+      "title": "Jeszcze nie przypisano elementu roboczego"
+    },
+    "your_work_by_state": {
+      "title": "Jeszcze nie przypisano elementu roboczego"
+    },
+    "views": {
+      "title": "Jeszcze brak Widoków",
+      "description": "Dodaj elementy robocze do swojego projektu i używaj widoków do filtrowania, sortowania i monitorowania postępów bez wysiłku.",
+      "cta_primary": "Dodaj element roboczy"
+    },
+    "drafts": {
+      "title": "Półnapisane elementy robocze",
+      "description": "Aby to wypróbować, zacznij dodawać element roboczy i zostaw go w połowie lub utwórz swój pierwszy szkic poniżej. 😉",
+      "cta_primary": "Utwórz szkic elementu roboczego"
+    },
+    "projects_archived": {
+      "title": "Brak zarchiwizowanych projektów",
+      "description": "Wygląda na to, że wszystkie Twoje projekty są nadal aktywne—świetna robota!"
+    },
+    "analytics_projects": {
+      "title": "Utwórz projekty, aby wizualizować metryki projektu tutaj."
+    },
+    "analytics_work_items": {
+      "title": "Utwórz projekty z elementami roboczymi i osobami przypisanymi, aby rozpocząć śledzenie wydajności, postępów i wpływu zespołu tutaj."
+    },
+    "analytics_no_cycle": {
+      "title": "Utwórz cykle, aby organizować pracę w fazy czasowe i śledzić postępy przez sprinty."
+    },
+    "analytics_no_module": {
+      "title": "Utwórz moduły, aby organizować swoją pracę i śledzić postępy przez różne fazy."
+    },
+    "analytics_no_intake": {
+      "title": "Skonfiguruj przyjmowanie, aby zarządzać przychodzącymi zgłoszeniami i śledzić, jak są akceptowane i odrzucane"
+    },
+    "home_widget_stickies": {
+      "title": "Zapisz pomysł, uchwć moment olśnienia lub nagraj falę mózgową. Dodaj notatkę, aby rozpocząć."
+    },
+    "stickies": {
+      "title": "Przechwytuj pomysły natychmiast",
+      "description": "Twórz notatki na szybkie notatki i zadania do zrobienia i zabieraj je ze sobą, dokądkolwiek się udasz.",
+      "cta_primary": "Utwórz pierwszą notatkę",
+      "cta_secondary": "Dokumentacja"
+    },
+    "active_cycles": {
+      "title": "Brak aktywnych cykli",
+      "description": "Nie masz teraz żadnych trwających cykli. Aktywne cykle pojawiają się tutaj, gdy obejmują dzisiejszą datę."
+    },
+    "dashboard": {
+      "title": "Wizualizuj swój postęp za pomocą pulpitów nawigacyjnych",
+      "description": "Twórz konfigurowalne pulpity nawigacyjne do śledzenia metryk, mierzenia wyników i efektywnego prezentowania spostrzeżeń.",
+      "cta_primary": "Utwórz nowy pulpit nawigacyjny"
+    },
+    "wiki": {
+      "title": "Napisz notatkę, dokument lub pełną bazę wiedzy.",
+      "description": "Strony to przestrzeń do wychwytywania myśli w Plane. Zapisuj notatki ze spotkań, łatwo je formatuj, osadzaj elementy robocze, układaj je za pomocą biblioteki komponentów i zachowuj wszystkie w kontekście projektu.",
+      "cta_primary": "Utwórz swoją stronę"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Włącz stany projektu",
+      "description": "Włącz stany projektu, aby wyświetlać i zarządzać właściwościami takimi jak stan, priorytet, terminy i inne."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Jeszcze brak szacunków",
+      "description": "Zdefiniuj, jak Twój zespół mierzy wysiłek i śledź to konsekwentnie we wszystkich elementach roboczych.",
+      "cta_primary": "Dodaj system szacowania"
+    },
+    "labels": {
+      "title": "Jeszcze brak etykiet",
+      "description": "Twórz spersonalizowane etykiety, aby skutecznie kategoryzować i zarządzać swoimi elementami roboczymi.",
+      "cta_primary": "Utwórz swoją pierwszą etykietę"
+    },
+    "exports": {
+      "title": "Jeszcze brak eksportów",
+      "description": "Obecnie nie masz żadnych rekordów eksportu. Po wyeksportowaniu danych wszystkie rekordy pojawią się tutaj."
+    },
+    "tokens": {
+      "title": "Jeszcze brak Tokenu osobistego",
+      "description": "Generuj bezpieczne tokeny API, aby połączyć swój obszar roboczy z zewnętrznymi systemami i aplikacjami.",
+      "cta_primary": "Dodaj token API"
+    },
+    "workspace_tokens": {
+      "title": "Jeszcze brak Tokenów API",
+      "description": "Generuj bezpieczne tokeny API, aby połączyć swój obszar roboczy z zewnętrznymi systemami i aplikacjami.",
+      "cta_primary": "Dodaj token API"
+    },
+    "webhooks": {
+      "title": "Nie dodano jeszcze webhooka",
+      "description": "Automatyzuj powiadomienia do usług zewnętrznych, gdy wystąpią zdarzenia projektowe.",
+      "cta_primary": "Dodaj webhook"
+    },
+    "work_item_types": {
+      "title": "Twórz i dostosowuj typy elementów roboczych",
+      "description": "Zdefiniuj unikalne typy elementów roboczych dla swojego projektu. Każdy typ może mieć własne właściwości, przepływy pracy i pola - dostosowane do potrzeb Twojego projektu i zespołu.",
+      "cta_primary": "Włącz"
+    },
+    "work_item_type_properties": {
+      "title": "Zdefiniuj właściwości i szczegóły, które chcesz przechwycić dla tego typu elementu roboczego. Dostosuj go do przepływu pracy Twojego projektu.",
+      "cta_secondary": "Dodaj właściwość"
+    },
+    "templates": {
+      "title": "Brak szablonów",
+      "description": "Skróć czas konfiguracji, tworząc szablony dla elementów roboczych i stron — i rozpocznij nową pracę w ciągu kilku sekund.",
+      "cta_primary": "Utwórz swój pierwszy szablon"
+    },
+    "recurring_work_items": {
+      "title": "Brak powtarzających się elementów roboczych",
+      "description": "Skonfiguruj powtarzające się elementy robocze, aby zautomatyzować powtarzające się zadania i bez wysiłku dotrzymywać harmonogramu.",
+      "cta_primary": "Utwórz powtarzający się element roboczy"
+    },
+    "worklogs": {
+      "title": "Śledź karty czasu pracy dla wszystkich członków",
+      "description": "Rejestruj czas w elementach roboczych, aby wyświetlać szczegółowe karty czasu pracy dla każdego członka zespołu w projektach."
+    },
+    "group_syncing": {
+      "title": "Brak mapowań grup"
+    },
+    "template_setting": {
+      "title": "Brak szablonów",
+      "description": "Skróć czas konfiguracji, tworząc szablony dla projektów, elementów roboczych i stron — i rozpocznij nową pracę w ciągu kilku sekund.",
+      "cta_primary": "Utwórz szablon"
+    },
+    "workflows": {
+      "title": "Brak przepływów pracy",
+      "description": "Utwórz przepływy pracy, aby zarządzać postępem elementów pracy.",
+      "cta_primary": "Dodaj nowy przepływ pracy",
+      "states": {
+        "title": "Dodaj stany",
+        "description": "Wybierz stany, przez które przechodzi element pracy."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/home.json b/packages/i18n/src/locales/pl/home.json
new file mode 100644
index 0000000..7801ee4
--- /dev/null
+++ b/packages/i18n/src/locales/pl/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Twój przewodnik szybkiego startu",
+      "not_right_now": "Nie teraz",
+      "create_project": {
+        "title": "Utwórz projekt",
+        "description": "Większość rzeczy zaczyna się od projektu w Plane.",
+        "cta": "Zacznij"
+      },
+      "invite_team": {
+        "title": "Zaproś zespół",
+        "description": "Współpracuj z kolegami, twórz, dostarczaj i zarządzaj.",
+        "cta": "Zaproś ich"
+      },
+      "configure_workspace": {
+        "title": "Skonfiguruj swoją przestrzeń roboczą.",
+        "description": "Włącz lub wyłącz funkcje albo idź dalej.",
+        "cta": "Skonfiguruj tę przestrzeń"
+      },
+      "personalize_account": {
+        "title": "Spersonalizuj Plane.",
+        "description": "Wybierz zdjęcie, kolory i inne.",
+        "cta": "Dostosuj teraz"
+      },
+      "widgets": {
+        "title": "Jest tu pusto bez widżetów, włącz je",
+        "description": "Wygląda na to, że wszystkie Twoje widżety są wyłączone. Włącz je\ndla lepszego doświadczenia!",
+        "primary_button": {
+          "text": "Zarządzaj widżetami"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Zapisz linki do ważnych rzeczy, które chcesz mieć pod ręką.",
+      "add": "Dodaj szybki link",
+      "title": "Szybki link",
+      "title_plural": "Szybkie linki"
+    },
+    "recents": {
+      "title": "Ostatnie",
+      "empty": {
+        "project": "Twoje ostatnio odwiedzone projekty pojawią się tutaj.",
+        "page": "Twoje ostatnio odwiedzone strony pojawią się tutaj.",
+        "issue": "Twoje ostatnio odwiedzone elementy pracy pojawią się tutaj.",
+        "default": "Nie masz jeszcze żadnych ostatnich pozycji."
+      },
+      "filters": {
+        "all": "Wszystkie",
+        "projects": "Projekty",
+        "pages": "Strony",
+        "issues": "Elementy pracy"
+      }
+    },
+    "new_at_plane": {
+      "title": "Co nowego w Plane"
+    },
+    "quick_tutorial": {
+      "title": "Szybki samouczek"
+    },
+    "widget": {
+      "reordered_successfully": "Widżet pomyślnie przeniesiono.",
+      "reordering_failed": "Wystąpił błąd podczas przenoszenia widżetu."
+    },
+    "manage_widgets": "Zarządzaj widżetami",
+    "title": "Strona główna",
+    "star_us_on_github": "Oceń nas na GitHubie",
+    "business_trial_banner": {
+      "title": "Twój 14-dniowy okres próbny planu Business jest aktywny!",
+      "description": "Poznaj wszystkie funkcje Business. Gdy będziesz gotowy, wybierz subskrypcję. Nie zostaniesz automatycznie obciążony.",
+      "trial_ends_today": "Okres próbny kończy się dzisiaj",
+      "trial_ends_in_days": "Okres próbny kończy się za {days, plural, one {# dzień} few {# dni} other {# dni}}",
+      "start_subscription": "Rozpocznij subskrypcję",
+      "explore_business_features": "Poznaj funkcje Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/inbox.json b/packages/i18n/src/locales/pl/inbox.json
new file mode 100644
index 0000000..5a42e76
--- /dev/null
+++ b/packages/i18n/src/locales/pl/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Oczekujące",
+        "description": "Oczekujące"
+      },
+      "declined": {
+        "title": "Odrzucone",
+        "description": "Odrzucone"
+      },
+      "snoozed": {
+        "title": "Odłożone",
+        "description": "Pozostało {days, plural, one{# dzień} few{# dni} other{# dni}}"
+      },
+      "accepted": {
+        "title": "Zaakceptowane",
+        "description": "Zaakceptowane"
+      },
+      "duplicate": {
+        "title": "Duplikat",
+        "description": "Duplikat"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Odrzuć element pracy",
+        "content": "Czy na pewno chcesz odrzucić element pracy {value}?"
+      },
+      "delete": {
+        "title": "Usuń element pracy",
+        "content": "Czy na pewno chcesz usunąć element pracy {value}?",
+        "success": "Element pracy usunięto pomyślnie"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Tylko administratorzy projektu mogą odkładać/odkładać ponownie elementy pracy",
+      "accept_permission": "Tylko administratorzy projektu mogą akceptować elementy pracy",
+      "decline_permission": "Tylko administratorzy projektu mogą odrzucać elementy pracy"
+    },
+    "actions": {
+      "accept": "Zaakceptuj",
+      "decline": "Odrzuć",
+      "snooze": "Odłóż",
+      "unsnooze": "Anuluj odłożenie",
+      "copy": "Kopiuj link do elementu pracy",
+      "delete": "Usuń",
+      "open": "Otwórz element pracy",
+      "mark_as_duplicate": "Oznacz jako duplikat",
+      "move": "Przenieś {value} do elementów pracy projektu"
+    },
+    "source": {
+      "in-app": "w aplikacji"
+    },
+    "order_by": {
+      "created_at": "Utworzono dnia",
+      "updated_at": "Zaktualizowano dnia",
+      "id": "ID"
+    },
+    "label": "Zgłoszenia",
+    "page_label": "{workspace} - Zgłoszenia",
+    "modal": {
+      "title": "Utwórz przyjęty element pracy"
+    },
+    "tabs": {
+      "open": "Otwarte",
+      "closed": "Zamknięte"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Brak otwartych elementów pracy",
+        "description": "Tutaj znajdziesz otwarte elementy pracy. Utwórz nowy."
+      },
+      "sidebar_closed_tab": {
+        "title": "Brak zamkniętych elementów pracy",
+        "description": "Wszystkie zaakceptowane lub odrzucone elementy pracy pojawią się tutaj."
+      },
+      "sidebar_filter": {
+        "title": "Brak pasujących elementów pracy",
+        "description": "Żaden element nie pasuje do filtra w zgłoszeniach. Utwórz nowy."
+      },
+      "detail": {
+        "title": "Wybierz element pracy, aby zobaczyć szczegóły."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/integration.json b/packages/i18n/src/locales/pl/integration.json
new file mode 100644
index 0000000..67c05cc
--- /dev/null
+++ b/packages/i18n/src/locales/pl/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integracje",
+    "loading": "Ładowanie",
+    "unauthorized": "Nie masz uprawnień do wyświetlenia tej strony.",
+    "configure": "Konfiguruj",
+    "not_enabled": "{name} nie jest włączone dla tego workspejsu.",
+    "not_configured": "Nie skonfigurowano",
+    "disconnect_personal_account": "Odłącz osobiste konto {providerName}",
+    "not_configured_message_admin": "Integracja {name} nie jest skonfigurowana. Skontaktuj się z administratorem instancji, aby ją skonfigurować.",
+    "not_configured_message_support": "Integracja {name} nie jest skonfigurowana. Skontaktuj się z pomocą techniczną, aby ją skonfigurować.",
+    "external_api_unreachable": "Nie można uzyskać dostępu do zewnętrznego API. Spróbuj ponownie później.",
+    "error_fetching_supported_integrations": "Nie można pobrać obsługiwanych integracji. Spróbuj ponownie później.",
+    "back_to_integrations": "Powrót do integracji",
+    "select_state": "Wybierz stan",
+    "set_state": "Ustaw stan",
+    "choose_project": "Wybierz projekt...",
+    "skip_backward_state_movement": "Zapobiegaj przenoszeniu zadań do wcześniejszego stanu z powodu aktualizacji PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Połącz i synchronizuj swoje elementy pracy GitHub z Plane",
+    "connect_org": "Connect Organization",
+    "connect_org_description": "Połącz swoją organizację GitHub z Plane",
+    "processing": "Przetwarzanie",
+    "org_added_desc": "GitHub org dodana przez i czas",
+    "connection_fetch_error": "Błąd pobierania szczegółów połączenia z serwera",
+    "personal_account_connected": "osobisty konto połączone",
+    "personal_account_connected_description": "Twoje konto GitHub jest teraz połączone z Plane",
+    "connect_personal_account": "Połącz osobiste konto",
+    "connect_personal_account_description": "Połącz swoje osobiste konto GitHub z Plane.",
+    "repo_mapping": "Mapowanie repozytorium",
+    "repo_mapping_description": "Mapuj swoje repozytoria GitHub z projektami Plane.",
+    "project_issue_sync": "Synchronizacja problemów projektu",
+    "project_issue_sync_description": "Synchronizuj problemy z GitHub do swojego projektu Plane",
+    "project_issue_sync_empty_state": "Zmapowane synchronizacje problemów projektu pojawią się tutaj",
+    "configure_project_issue_sync_state": "Konfiguruj stan synchronizacji problemów",
+    "select_issue_sync_direction": "Wybierz kierunek synchronizacji problemów",
+    "allow_bidirectional_sync": "Bidirectional - Synchronizuj problemy i komentarze w obu kierunkach między GitHub i Plane",
+    "allow_unidirectional_sync": "Unidirectional - Synchronizuj problemy i komentarze z GitHub do Plane tylko",
+    "allow_unidirectional_sync_warning": "Dane z GitHub Issue zastąpią dane w połączonym elemencie pracy Plane (GitHub → Plane tylko)",
+    "remove_project_issue_sync": "Usuń tę synchronizację problemów projektu",
+    "remove_project_issue_sync_confirmation": "Czy na pewno chcesz usunąć tę synchronizację problemów projektu?",
+    "add_pr_state_mapping": "Dodaj mapowanie stanu pull request dla projektu Plane",
+    "edit_pr_state_mapping": "Edytuj mapowanie stanu pull request dla projektu Plane",
+    "pr_state_mapping": "Mapowanie stanu pull request",
+    "pr_state_mapping_description": "Mapuj stany pull request z GitHub do swojego projektu Plane",
+    "pr_state_mapping_empty_state": "Zmapowane stany PR pojawią się tutaj",
+    "remove_pr_state_mapping": "Usuń to mapowanie stanu pull request",
+    "remove_pr_state_mapping_confirmation": "Czy na pewno chcesz usunąć to mapowanie stanu pull request?",
+    "issue_sync_message": "Elementy pracy są synchronizowane do {project}",
+    "link": "Link GitHub Repository do projektu Plane",
+    "pull_request_automation": "Automatyzacja pull request",
+    "pull_request_automation_description": "Skonfiguruj mapowanie stanu pull request z GitHub do swojego projektu Plane",
+    "DRAFT_MR_OPENED": "Otwarty draft",
+    "MR_OPENED": "Otwarty",
+    "MR_READY_FOR_MERGE": "Gotowy do połączenia",
+    "MR_REVIEW_REQUESTED": "Zażądano przeglądu",
+    "MR_MERGED": "Połączony",
+    "MR_CLOSED": "Zamknięty",
+    "ISSUE_OPEN": "Issue otwarty",
+    "ISSUE_CLOSED": "Issue zamknięty",
+    "save": "Zapisz",
+    "start_sync": "Start synchronizacji",
+    "choose_repository": "Wybierz repozytorium..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Połącz i synchronizuj swoje żądania połączenia Gitlab z Plane.",
+    "connection_fetch_error": "Błąd pobierania szczegółów połączenia z serwera",
+    "connect_org": "Połącz organizację",
+    "connect_org_description": "Połącz swoją organizację Gitlab z Plane.",
+    "project_connections": "Połączenia projektu Gitlab",
+    "project_connections_description": "Synchronizuj żądania połączenia z Gitlab do projektów Plane.",
+    "plane_project_connection": "Połączenie projektu Plane",
+    "plane_project_connection_description": "Skonfiguruj mapowanie stanu pull requestów z Gitlab do projektów Plane",
+    "remove_connection": "Usuń połączenie",
+    "remove_connection_confirmation": "Czy na pewno chcesz usunąć to połączenie?",
+    "link": "Połącz repozytorium Gitlab z projektem Plane",
+    "pull_request_automation": "Automatyzacja Pull Requestów",
+    "pull_request_automation_description": "Skonfiguruj mapowanie stanu pull requestów z Gitlab do Plane",
+    "DRAFT_MR_OPENED": "Po otwarciu wersji roboczej MR ustaw stan na",
+    "MR_OPENED": "Po otwarciu MR ustaw stan na",
+    "MR_REVIEW_REQUESTED": "Gdy zażądano przeglądu MR, ustaw stan na",
+    "MR_READY_FOR_MERGE": "Gdy MR gotowy do połączenia, ustaw stan na",
+    "MR_MERGED": "Po połączeniu MR ustaw stan na",
+    "MR_CLOSED": "Po zamknięciu MR ustaw stan na",
+    "integration_enabled_text": "Dzięki włączonej integracji Gitlab możesz automatyzować przepływy pracy elementów pracy",
+    "choose_entity": "Wybierz jednostkę",
+    "choose_project": "Wybierz projekt",
+    "link_plane_project": "Połącz projekt Plane",
+    "project_issue_sync": "Synchronizacja problemów projektu",
+    "project_issue_sync_description": "Synchronizuj problemy z Gitlab do swojego projektu Plane",
+    "project_issue_sync_empty_state": "Zmapowana synchronizacja problemów projektu pojawi się tutaj",
+    "configure_project_issue_sync_state": "Skonfiguruj stan synchronizacji problemów",
+    "select_issue_sync_direction": "Wybierz kierunek synchronizacji problemów",
+    "allow_bidirectional_sync": "Dwukierunkowa - Synchronizuj problemy i komentarze w obu kierunkach między Gitlab a Plane",
+    "allow_unidirectional_sync": "Jednokierunkowa - Synchronizuj problemy i komentarze tylko z Gitlab do Plane",
+    "allow_unidirectional_sync_warning": "Dane z Gitlab Issue zastąpią dane w powiązanym elemencie pracy Plane (tylko Gitlab → Plane)",
+    "remove_project_issue_sync": "Usuń tę synchronizację problemów projektu",
+    "remove_project_issue_sync_confirmation": "Czy na pewno chcesz usunąć tę synchronizację problemów projektu?",
+    "ISSUE_OPEN": "Problem otwarty",
+    "ISSUE_CLOSED": "Problem zamknięty",
+    "save": "Zapisz",
+    "start_sync": "Rozpocznij synchronizację",
+    "choose_repository": "Wybierz repozytorium..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Połącz i zsynchronizuj swoją instancję Gitlab Enterprise z Plane.",
+    "app_form_title": "Konfiguracja Gitlab Enterprise",
+    "app_form_description": "Skonfiguruj Gitlab Enterprise aby połączyć z Plane.",
+    "base_url_title": "Bazowy URL",
+    "base_url_description": "Bazowy URL Twojej instancji Gitlab Enterprise.",
+    "base_url_placeholder": "np. \"https://glab.plane.town\"",
+    "base_url_error": "Bazowy URL jest wymagany",
+    "invalid_base_url_error": "Nieprawidłowy bazowy URL",
+    "client_id_title": "ID Aplikacji",
+    "client_id_description": "ID aplikacji, którą utworzyłeś w swojej instancji Gitlab Enterprise.",
+    "client_id_placeholder": "np. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "ID Aplikacji jest wymagane",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Client secret aplikacji, którą utworzyłeś w swojej instancji Gitlab Enterprise.",
+    "client_secret_placeholder": "np. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret jest wymagany",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Losowy webhook secret, który będzie używany do weryfikacji webhooka z instancji Gitlab Enterprise.",
+    "webhook_secret_placeholder": "np. \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret jest wymagany",
+    "connect_app": "Połącz Aplikację"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Połącz swój workspace Slack z Plane.",
+    "connect_personal_account": "Połącz swoje osobiste konto Slack z Plane.",
+    "personal_account_connected": "Twoje osobiste konto {providerName} jest teraz połączone z Plane.",
+    "link_personal_account": "Połącz swoje osobiste konto {providerName} z Plane.",
+    "connected_slack_workspaces": "Połączone workspejsy Slack",
+    "connected_on": "Połączono {date}",
+    "disconnect_workspace": "Odłącz workspace {name}",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Otrzymuj powiadomienia w prywatnych wiadomościach Slack dla ważnych aktualizacji, przypomnień i alertów tylko dla Ciebie."
+      }
+    },
+    "project_updates": {
+      "title": "Aktualizacje Projektu",
+      "description": "Skonfiguruj powiadomienia o aktualizacjach projektów dla swoich projektów",
+      "add_new_project_update": "Dodaj nowe powiadomienie o aktualizacjach projektu",
+      "project_updates_empty_state": "Projekty połączone z kanałami Slack pojawią się tutaj.",
+      "project_updates_form": {
+        "title": "Skonfiguruj Aktualizacje Projektu",
+        "description": "Otrzymuj powiadomienia o aktualizacjach projektu w Slack, gdy tworzone są elementy pracy",
+        "failed_to_load_channels": "Nie udało się załadować kanałów ze Slack",
+        "project_dropdown": {
+          "placeholder": "Wybierz projekt",
+          "label": "Projekt Plane",
+          "no_projects": "Brak dostępnych projektów"
+        },
+        "channel_dropdown": {
+          "label": "Kanał Slack",
+          "placeholder": "Wybierz kanał",
+          "no_channels": "Brak dostępnych kanałów"
+        },
+        "all_projects_connected": "Wszystkie projekty są już połączone z kanałami Slack.",
+        "all_channels_connected": "Wszystkie kanały Slack są już połączone z projektami.",
+        "project_connection_success": "Połączenie projektu utworzone pomyślnie",
+        "project_connection_updated": "Połączenie projektu zaktualizowane pomyślnie",
+        "project_connection_deleted": "Połączenie projektu usunięte pomyślnie",
+        "failed_delete_project_connection": "Nie udało się usunąć połączenia projektu",
+        "failed_create_project_connection": "Nie udało się utworzyć połączenia projektu",
+        "failed_upserting_project_connection": "Nie udało się zaktualizować połączenia projektu",
+        "failed_loading_project_connections": "Nie mogliśmy załadować twoich połączeń projektu. Może to być spowodowane problemem z siecią lub problemem z integracją."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Połącz swój obszar roboczy Sentry z Plane.",
+    "connected_sentry_workspaces": "Połączone obszary robocze Sentry",
+    "connected_on": "Połączono {date}",
+    "disconnect_workspace": "Odłącz obszar roboczy {name}",
+    "state_mapping": {
+      "title": "Mapowanie stanów",
+      "description": "Mapuj stany incydentów Sentry na stany swojego projektu. Skonfiguruj, które stany używać, gdy incydent Sentry jest rozwiązany lub nierozwiązany.",
+      "add_new_state_mapping": "Dodaj nowe mapowanie stanu",
+      "empty_state": "Nie skonfigurowano mapowań stanów. Utwórz swoje pierwsze mapowanie, aby zsynchronizować stany incydentów Sentry ze stanami swojego projektu.",
+      "failed_loading_state_mappings": "Nie udało się załadować mapowań stanów. Może to być spowodowane problemem z siecią lub problemem z integracją.",
+      "loading_project_states": "Ładowanie stanów projektu...",
+      "error_loading_states": "Błąd ładowania stanów",
+      "no_states_available": "Brak dostępnych stanów",
+      "no_permission_states": "Nie masz uprawnień do dostępu do stanów dla tego projektu",
+      "states_not_found": "Nie znaleziono stanów projektu",
+      "server_error_states": "Błąd serwera podczas ładowania stanów"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Połącz i synchronizuj repozytoria Bitbucket Data Center z Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Walidacja tokenów zewnętrznych IdP dla dostępu do API.",
+    "header_description": "Weryfikuj zewnętrzne tokeny OIDC/JWT z Twojego IdP (Azure AD, Okta itp.) dla dostępu do API Plane.",
+    "connected": "Połączono",
+    "connect": "Połącz",
+    "uninstall": "Odinstaluj",
+    "uninstalling": "Odinstalowywanie...",
+    "install_success": "OAuth Bridge zainstalowany pomyślnie.",
+    "install_error": "Nie udało się zainstalować OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge odinstalowany.",
+    "uninstall_error": "Nie udało się odinstalować OAuth Bridge.",
+    "token_providers": "Dostawcy tokenów",
+    "token_providers_description": "Skonfiguruj zewnętrzne IdP, których JWT są akceptowane jako dane uwierzytelniające API.",
+    "add_provider": "Dodaj dostawcę",
+    "edit_provider": "Edytuj dostawcę",
+    "enabled": "Włączony",
+    "disabled": "Wyłączony",
+    "test": "Testuj",
+    "no_providers_title": "Brak skonfigurowanych dostawców.",
+    "no_providers_description": "Dodaj IdP, aby włączyć uwierzytelnianie tokenami zewnętrznymi.",
+    "provider_updated": "Dostawca zaktualizowany.",
+    "provider_added": "Dostawca dodany.",
+    "provider_save_error": "Nie udało się zapisać dostawcy.",
+    "provider_deleted": "Dostawca usunięty.",
+    "provider_delete_error": "Nie udało się usunąć dostawcy.",
+    "provider_update_error": "Nie udało się zaktualizować dostawcy.",
+    "jwks_reachable": "JWKS osiągalny",
+    "jwks_unreachable": "JWKS nieosiągalny",
+    "jwks_test_error": "Nie udało się pobrać JWKS ze skonfigurowanego URL.",
+    "provider_form": {
+      "name_label": "Nazwa",
+      "name_placeholder": "np. Azure AD Production",
+      "name_description": "Czytelna etykieta dla tego dostawcy tożsamości",
+      "name_required": "Nazwa jest wymagana.",
+      "issuer_label": "Wystawca",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Oczekiwana wartość claim iss w JWT",
+      "issuer_required": "Wystawca jest wymagany.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "Endpoint HTTPS udostępniający JSON Web Key Set dostawcy",
+      "jwks_url_required": "URL JWKS jest wymagany.",
+      "jwks_url_https": "URL JWKS musi używać HTTPS.",
+      "audience_label": "Odbiorcy",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Oczekiwane claim(y) aud w JWT, rozdzielone przecinkami.",
+      "user_claims_label": "Claim użytkownika",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "Claim JWT zawierający adres e-mail użytkownika",
+      "user_claims_required": "Claim użytkownika jest wymagany.",
+      "allowed_algorithms_label": "Dozwolone algorytmy podpisu",
+      "allowed_algorithms_description": "Algorytmy asymetryczne do weryfikacji podpisu JWT",
+      "allowed_algorithms_required": "Wymagany jest co najmniej jeden algorytm.",
+      "select_algorithms": "Wybierz algorytmy",
+      "jwks_cache_ttl_label": "TTL pamięci podręcznej JWKS (sekundy)",
+      "jwks_cache_ttl_description": "Czas przechowywania kluczy JWKS dostawcy w pamięci podręcznej (minimum 60s, domyślnie 24 godziny)",
+      "jwks_cache_ttl_min": "TTL pamięci podręcznej musi wynosić co najmniej 60 sekund.",
+      "rate_limit_label": "Limit żądań",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Ograniczenie żądań jako ilość/okres (np. 120/minute). Pozostaw puste dla domyślnego limitu.",
+      "enable_provider": "Włącz tego dostawcę",
+      "saving": "Zapisywanie...",
+      "update": "Aktualizuj"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Połącz i synchronizuj swoją organizację GitHub Enterprise z Plane.",
+    "app_form_title": "Konfiguracja GitHub Enterprise",
+    "app_form_description": "Skonfiguruj GitHub Enterprise, aby połączyć się z Plane.",
+    "app_id_title": "ID aplikacji",
+    "app_id_description": "ID aplikacji, którą utworzyłeś w swojej organizacji GitHub Enterprise.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID jest wymagany",
+    "app_name_title": "Slug aplikacji",
+    "app_name_description": "Slug aplikacji, którą utworzyłeś w swojej organizacji GitHub Enterprise.",
+    "app_name_error": "App slug jest wymagany",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "URL bazowy",
+    "base_url_description": "URL bazowy Twojej organizacji GitHub Enterprise.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "URL bazowy jest wymagany",
+    "invalid_base_url_error": "Nieprawidłowy URL bazowy",
+    "client_id_title": "ID klienta",
+    "client_id_description": "ID klienta aplikacji, którą utworzyłeś w swojej organizacji GitHub Enterprise.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID klienta jest wymagany",
+    "client_secret_title": "Secret klienta",
+    "client_secret_description": "Secret klienta aplikacji, którą utworzyłeś w swojej organizacji GitHub Enterprise.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Secret klienta jest wymagany",
+    "webhook_secret_title": "Secret webhooka",
+    "webhook_secret_description": "Secret webhooka aplikacji, którą utworzyłeś w swojej organizacji GitHub Enterprise.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Secret webhooka jest wymagany",
+    "private_key_title": "Klucz prywatny (Base64 encoded)",
+    "private_key_description": "Base64 encoded private key aplikacji, którą utworzyłeś w swojej organizacji GitHub Enterprise.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Klucz prywatny jest wymagany",
+    "connect_app": "Połącz aplikację"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Podane parametry zapytania są nieprawidłowe lub brakuje wymaganych pól",
+    "invalid_installation_account": "Podane konto instalacji nie jest prawidłowe",
+    "generic_error": "Wystąpił nieoczekiwany błąd podczas przetwarzania Twojego żądania",
+    "connection_not_found": "Nie można znaleźć żądanego połączenia",
+    "multiple_connections_found": "Znaleziono wiele połączeń, gdy oczekiwano tylko jednego",
+    "cannot_create_multiple_connections": "Twoja organizacja jest już połączona z przestrzenią roboczą. Rozłącz istniejące połączenie przed utworzeniem nowego.",
+    "installation_not_found": "Nie można znaleźć żądanej instalacji",
+    "user_not_found": "Nie można znaleźć żądanego użytkownika",
+    "error_fetching_token": "Nie udało się pobrać tokenu uwierzytelniającego",
+    "invalid_app_credentials": "Podane poświadczenia aplikacji są nieprawidłowe",
+    "invalid_app_installation_id": "Nie udało się zainstalować aplikacji"
+  },
+  "import_status": {
+    "queued": "W kolejce",
+    "created": "Utworzono",
+    "initiated": "Zainicjowano",
+    "pulling": "Pobieranie",
+    "timed_out": "Przekroczenie czasu oczekiwania",
+    "pulled": "Pobrano",
+    "progressing": "W toku",
+    "transforming": "Transformowanie",
+    "transformed": "Przekształcono",
+    "pushing": "Przesyłanie",
+    "finished": "Zakończono",
+    "error": "Błąd",
+    "cancelled": "Anulowano"
+  }
+}
diff --git a/packages/i18n/src/locales/pl/module.json b/packages/i18n/src/locales/pl/module.json
new file mode 100644
index 0000000..80e97ec
--- /dev/null
+++ b/packages/i18n/src/locales/pl/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Moduł} few {Moduły} other {Modułów}}",
+    "no_module": "Brak modułu",
+    "select": "Dodaj moduły"
+  }
+}
diff --git a/packages/i18n/src/locales/pl/navigation.json b/packages/i18n/src/locales/pl/navigation.json
new file mode 100644
index 0000000..3089b6d
--- /dev/null
+++ b/packages/i18n/src/locales/pl/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Nie znaleziono wyników"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Karteczki",
+    "your_work": "Twoja praca",
+    "projects": "Projekty",
+    "pages": "Strony",
+    "new_work_item": "Nowy element pracy",
+    "home": "Strona główna",
+    "inbox": "Skrzynka odbiorcza",
+    "workspace": "Przestrzeń robocza",
+    "views": "Widoki",
+    "analytics": "Analizy",
+    "work_items": "Elementy pracy",
+    "cycles": "Cykle",
+    "modules": "Moduły",
+    "intake": "Zgłoszenia",
+    "drafts": "Szkice",
+    "favorites": "Ulubione",
+    "pro": "Pro",
+    "upgrade": "Uaktualnij",
+    "pi_chat": "AI Czat",
+    "epics": "Epiki",
+    "upgrade_plan": "Apgrejduj plan",
+    "plane_pro": "Plejn Pro",
+    "business": "Biznes"
+  }
+}
diff --git a/packages/i18n/src/locales/pl/notification.json b/packages/i18n/src/locales/pl/notification.json
new file mode 100644
index 0000000..7d370e0
--- /dev/null
+++ b/packages/i18n/src/locales/pl/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Skrzynka",
+    "page_label": "{workspace} - Skrzynka",
+    "options": {
+      "mark_all_as_read": "Oznacz wszystko jako przeczytane",
+      "mark_read": "Oznacz jako przeczytane",
+      "mark_unread": "Oznacz jako nieprzeczytane",
+      "refresh": "Odśwież",
+      "filters": "Filtry skrzynki",
+      "show_unread": "Pokaż nieprzeczytane",
+      "show_snoozed": "Pokaż odłożone",
+      "show_archived": "Pokaż zarchiwizowane",
+      "mark_archive": "Archiwizuj",
+      "mark_unarchive": "Przywróć z archiwum",
+      "mark_snooze": "Odłóż",
+      "mark_unsnooze": "Anuluj odłożenie"
+    },
+    "toasts": {
+      "read": "Powiadomienie oznaczono jako przeczytane",
+      "unread": "Oznaczono jako nieprzeczytane",
+      "archived": "Zarchiwizowano",
+      "unarchived": "Przywrócono z archiwum",
+      "snoozed": "Odłożono",
+      "unsnoozed": "Anulowano odłożenie"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Wybierz, aby zobaczyć szczegóły."
+      },
+      "all": {
+        "title": "Brak przypisanych elementów",
+        "description": "Aktualizacje przypisanych elementów pojawią się tutaj."
+      },
+      "mentions": {
+        "title": "Brak wzmianek",
+        "description": "Twoje wzmianki pojawią się tutaj."
+      }
+    },
+    "tabs": {
+      "all": "Wszystko",
+      "mentions": "Wzmianki"
+    },
+    "filter": {
+      "assigned": "Przypisano mnie",
+      "created": "Utworzyłem(am)",
+      "subscribed": "Subskrybuję"
+    },
+    "snooze": {
+      "1_day": "1 dzień",
+      "3_days": "3 dni",
+      "5_days": "5 dni",
+      "1_week": "1 tydzień",
+      "2_weeks": "2 tygodnie",
+      "custom": "Niestandardowe"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/page.json b/packages/i18n/src/locales/pl/page.json
new file mode 100644
index 0000000..fb7ca0b
--- /dev/null
+++ b/packages/i18n/src/locales/pl/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Konspekt",
+        "empty_state": {
+          "title": "Brakuje nagłówków",
+          "description": "Dodajmy kilka nagłówków na tej stronie, aby je tutaj zobaczyć."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Słowa",
+          "characters": "Znaki",
+          "paragraphs": "Akapity",
+          "read_time": "Czas czytania"
+        },
+        "actors_info": {
+          "edited_by": "Edytowane przez",
+          "created_by": "Utworzone przez"
+        },
+        "version_history": {
+          "label": "Historia wersji",
+          "current_version": "Bieżąca wersja",
+          "highlight_changes": "Podświetl zmiany"
+        }
+      },
+      "assets": {
+        "label": "Zasoby",
+        "download_button": "Pobierz",
+        "empty_state": {
+          "title": "Brakuje obrazów",
+          "description": "Dodaj obrazy, aby je tutaj zobaczyć."
+        }
+      },
+      "comments": {
+        "label": "Komentarze",
+        "empty_state": {
+          "title": "Brak komentarzy",
+          "description": "Dodaj komentarze, aby je tutaj zobaczyć."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Nazwa karteczki nie może być dłuższa niż 100 znaków.",
+        "already_exists": "Istnieje już karteczka bez opisu"
+      },
+      "created": {
+        "title": "Karteczka utworzona",
+        "message": "Karteczka została pomyślnie utworzona"
+      },
+      "not_created": {
+        "title": "Karteczka nie utworzona",
+        "message": "Nie udało się utworzyć karteczki"
+      },
+      "updated": {
+        "title": "Karteczka zaktualizowana",
+        "message": "Karteczka została pomyślnie zaktualizowana"
+      },
+      "not_updated": {
+        "title": "Karteczka nie zaktualizowana",
+        "message": "Nie udało się zaktualizować karteczki"
+      },
+      "removed": {
+        "title": "Karteczka usunięta",
+        "message": "Karteczka została pomyślnie usunięta"
+      },
+      "not_removed": {
+        "title": "Karteczka nie usunięta",
+        "message": "Nie udało się usunąć karteczki"
+      }
+    },
+    "open_button": "Otwórz panel nawigacji",
+    "close_button": "Zamknij panel nawigacji",
+    "outline_floating_button": "Otwórz konspekt"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Przenieś",
+        "loading": "Przenoszenie"
+      },
+      "cannot_move_to_teamspace": "Prywatne i udostępnione strony nie mogą być przenoszone do teamspace.",
+      "placeholders": {
+        "workspace_to_all": "Szukaj projektów i teamspejsów",
+        "workspace_to_project": "Szukaj projektów",
+        "project_to_all": "Szukaj projektów i teamspejsów",
+        "project_to_project": "Szukaj projektów",
+        "project_to_all_with_wiki": "Szukaj kolekcji wiki, projektów i przestrzeni zespołowych",
+        "project_to_project_with_wiki": "Szukaj kolekcji wiki i projektów"
+      },
+      "toasts": {
+        "success": {
+          "title": "Sukces!",
+          "message": "Strona przeniesiona pomyślnie."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Nie udało się przenieść strony. Spróbuj ponownie później."
+        },
+        "collection_error": {
+          "title": "Przeniesiono do wiki",
+          "message": "Strona została przeniesiona do wiki, ale nie udało się dodać jej do wybranej kolekcji. Pozostaje w General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Usuń z kolekcji",
+      "success_message": "Strona została usunięta z kolekcji.",
+      "error_message": "Nie udało się usunąć strony z kolekcji. Spróbuj ponownie."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Osiągnięto limit treści, a synchronizacja na żywo jest wyłączona. Utwórz nową stronę lub użyj zagnieżdżonych stron, aby kontynuować synchronizację."
+  }
+}
diff --git a/packages/i18n/src/locales/pl/power-k.json b/packages/i18n/src/locales/pl/power-k.json
new file mode 100644
index 0000000..6498a06
--- /dev/null
+++ b/packages/i18n/src/locales/pl/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Masowo usuń elementy pracy"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Akcje elementu pracy",
+        "indicator": "Element pracy",
+        "change_state": "Zmień stan",
+        "change_priority": "Zmień priorytet",
+        "change_assignees": "Przypisz do",
+        "assign_to_me": "Przypisz do mnie",
+        "unassign_from_me": "Usuń przypisanie do mnie",
+        "change_estimate": "Zmień szacowanie",
+        "add_to_cycle": "Dodaj do cyklu",
+        "add_to_modules": "Dodaj do modułów",
+        "add_labels": "Dodaj etykiety",
+        "subscribe": "Subskrybuj powiadomienia",
+        "unsubscribe": "Anuluj subskrypcję powiadomień",
+        "delete": "Usuń",
+        "copy_id": "Kopiuj ID",
+        "copy_id_toast_success": "ID elementu pracy skopiowano do schowka.",
+        "copy_id_toast_error": "Wystąpił błąd podczas kopiowania ID elementu pracy do schowka.",
+        "copy_title": "Kopiuj tytuł",
+        "copy_title_toast_success": "Tytuł elementu pracy skopiowano do schowka.",
+        "copy_title_toast_error": "Wystąpił błąd podczas kopiowania tytułu elementu pracy do schowka.",
+        "copy_url": "Kopiuj URL",
+        "copy_url_toast_success": "URL elementu pracy skopiowano do schowka.",
+        "copy_url_toast_error": "Wystąpił błąd podczas kopiowania URL elementu pracy do schowka."
+      },
+      "cycle": {
+        "title": "Akcje cyklu",
+        "indicator": "Cykl",
+        "add_to_favorites": "Dodaj do ulubionych",
+        "remove_from_favorites": "Usuń z ulubionych",
+        "copy_url": "Kopiuj URL",
+        "copy_url_toast_success": "URL cyklu skopiowano do schowka.",
+        "copy_url_toast_error": "Wystąpił błąd podczas kopiowania URL cyklu do schowka."
+      },
+      "module": {
+        "title": "Akcje modułu",
+        "indicator": "Moduł",
+        "add_remove_members": "Dodaj/usuń członków",
+        "change_status": "Zmień status",
+        "add_to_favorites": "Dodaj do ulubionych",
+        "remove_from_favorites": "Usuń z ulubionych",
+        "copy_url": "Kopiuj URL",
+        "copy_url_toast_success": "URL modułu skopiowano do schowka.",
+        "copy_url_toast_error": "Wystąpił błąd podczas kopiowania URL modułu do schowka."
+      },
+      "page": {
+        "title": "Akcje strony",
+        "indicator": "Strona",
+        "lock": "Zablokuj",
+        "unlock": "Odblokuj",
+        "make_private": "Ustaw jako prywatne",
+        "make_public": "Ustaw jako publiczne",
+        "archive": "Archiwizuj",
+        "restore": "Przywróć",
+        "add_to_favorites": "Dodaj do ulubionych",
+        "remove_from_favorites": "Usuń z ulubionych",
+        "copy_url": "Kopiuj URL",
+        "copy_url_toast_success": "URL strony skopiowano do schowka.",
+        "copy_url_toast_error": "Wystąpił błąd podczas kopiowania URL strony do schowka."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Nowy element pracy",
+      "create_page": "Nowa strona",
+      "create_view": "Nowy widok",
+      "create_cycle": "Nowy cykl",
+      "create_module": "Nowy moduł",
+      "create_project": "Nowy projekt",
+      "create_workspace": "Nowa przestrzeń robocza",
+      "create_project_automation": "Nowa automatyzacja"
+    },
+    "navigation_actions": {
+      "open_workspace": "Otwórz przestrzeń roboczą",
+      "nav_home": "Przejdź do strony głównej",
+      "nav_inbox": "Przejdź do skrzynki odbiorczej",
+      "nav_your_work": "Przejdź do Twojej pracy",
+      "nav_account_settings": "Przejdź do ustawień konta",
+      "open_project": "Otwórz projekt",
+      "nav_projects_list": "Przejdź do listy projektów",
+      "nav_all_workspace_work_items": "Przejdź do wszystkich elementów pracy",
+      "nav_assigned_workspace_work_items": "Przejdź do przypisanych elementów pracy",
+      "nav_created_workspace_work_items": "Przejdź do utworzonych elementów pracy",
+      "nav_subscribed_workspace_work_items": "Przejdź do subskrybowanych elementów pracy",
+      "nav_workspace_analytics": "Przejdź do analiz przestrzeni roboczej",
+      "nav_workspace_drafts": "Przejdź do szkiców przestrzeni roboczej",
+      "nav_workspace_archives": "Przejdź do archiwów przestrzeni roboczej",
+      "open_workspace_setting": "Otwórz ustawienie przestrzeni roboczej",
+      "nav_workspace_settings": "Przejdź do ustawień przestrzeni roboczej",
+      "nav_project_work_items": "Przejdź do elementów pracy",
+      "open_project_cycle": "Otwórz cykl",
+      "nav_project_cycles": "Przejdź do cykli",
+      "open_project_module": "Otwórz moduł",
+      "nav_project_modules": "Przejdź do modułów",
+      "open_project_view": "Otwórz widok projektu",
+      "nav_project_views": "Przejdź do widoków projektu",
+      "nav_project_pages": "Przejdź do stron",
+      "nav_project_intake": "Przejdź do zgłoszeń",
+      "nav_project_archives": "Przejdź do archiwów projektu",
+      "open_project_setting": "Otwórz ustawienie projektu",
+      "nav_project_settings": "Przejdź do ustawień projektu",
+      "nav_workspace_active_cycle": "Przejdź do wszystkich aktywnych cykli",
+      "nav_project_overview": "Przejdź do przeglądu projektu"
+    },
+    "account_actions": {
+      "sign_out": "Wyloguj się",
+      "workspace_invites": "Zaproszenia do przestrzeni roboczej"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Przełącz pasek boczny aplikacji",
+      "copy_current_page_url": "Kopiuj URL bieżącej strony",
+      "copy_current_page_url_toast_success": "URL bieżącej strony skopiowano do schowka.",
+      "copy_current_page_url_toast_error": "Wystąpił błąd podczas kopiowania URL bieżącej strony do schowka.",
+      "focus_top_nav_search": "Ustaw fokus na polu wyszukiwania"
+    },
+    "preferences_actions": {
+      "update_theme": "Zmień motyw interfejsu",
+      "update_timezone": "Zmień strefę czasową",
+      "update_start_of_week": "Zmień pierwszy dzień tygodnia",
+      "update_language": "Zmień język interfejsu",
+      "toast": {
+        "theme": {
+          "success": "Motyw zaktualizowano pomyślnie.",
+          "error": "Nie udało się zaktualizować motywu. Spróbuj ponownie."
+        },
+        "timezone": {
+          "success": "Strefę czasową zaktualizowano pomyślnie.",
+          "error": "Nie udało się zaktualizować strefy czasowej. Spróbuj ponownie."
+        },
+        "generic": {
+          "success": "Preferencje zaktualizowano pomyślnie.",
+          "error": "Nie udało się zaktualizować preferencji. Spróbuj ponownie."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Otwórz skróty klawiszowe",
+      "open_plane_documentation": "Otwórz dokumentację Plane",
+      "join_forum": "Dołącz do naszego forum",
+      "report_bug": "Zgłoś błąd",
+      "chat_with_us": "Napisz do nas"
+    },
+    "page_placeholders": {
+      "default": "Wpisz polecenie lub szukaj",
+      "open_workspace": "Otwórz przestrzeń roboczą",
+      "open_project": "Otwórz projekt",
+      "open_workspace_setting": "Otwórz ustawienie przestrzeni roboczej",
+      "open_project_cycle": "Otwórz cykl",
+      "open_project_module": "Otwórz moduł",
+      "open_project_view": "Otwórz widok projektu",
+      "open_project_setting": "Otwórz ustawienie projektu",
+      "update_work_item_state": "Zmień stan",
+      "update_work_item_priority": "Zmień priorytet",
+      "update_work_item_assignee": "Przypisz do",
+      "update_work_item_estimate": "Zmień szacowanie",
+      "update_work_item_cycle": "Dodaj do cyklu",
+      "update_work_item_module": "Dodaj do modułów",
+      "update_work_item_labels": "Dodaj etykiety",
+      "update_module_member": "Zmień członków",
+      "update_module_status": "Zmień status",
+      "update_theme": "Zmień motyw",
+      "update_timezone": "Zmień strefę czasową",
+      "update_start_of_week": "Zmień pierwszy dzień tygodnia",
+      "update_language": "Zmień język"
+    },
+    "search_menu": {
+      "no_results": "Nie znaleziono wyników",
+      "clear_search": "Wyczyść wyszukiwanie",
+      "go_to_advanced_search": "Przejdź do wyszukiwania zaawansowanego"
+    },
+    "footer": {
+      "workspace_level": "Poziom przestrzeni roboczej"
+    },
+    "group_titles": {
+      "actions": "Akcje",
+      "contextual": "Kontekstowe",
+      "navigation": "Nawiguj",
+      "create": "Utwórz",
+      "general": "Ogólne",
+      "settings": "Ustawienia",
+      "account": "Konto",
+      "miscellaneous": "Różne",
+      "preferences": "Preferencje",
+      "help": "Pomoc"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/project-settings.json b/packages/i18n/src/locales/pl/project-settings.json
new file mode 100644
index 0000000..302ec78
--- /dev/null
+++ b/packages/i18n/src/locales/pl/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Wpisz ID projektu",
+      "please_select_a_timezone": "Wybierz strefę czasową",
+      "archive_project": {
+        "title": "Archiwizuj projekt",
+        "description": "Archiwizacja ukryje projekt w menu. Dostęp będzie możliwy przez stronę projektów.",
+        "button": "Archiwizuj projekt"
+      },
+      "delete_project": {
+        "title": "Usuń projekt",
+        "description": "Usunięcie projektu spowoduje trwałe wymazanie wszystkich danych. Ta akcja jest nieodwracalna.",
+        "button": "Usuń projekt"
+      },
+      "toast": {
+        "success": "Projekt zaktualizowano",
+        "error": "Aktualizacja nie powiodła się. Spróbuj ponownie."
+      }
+    },
+    "members": {
+      "label": "Członkowie",
+      "project_lead": "Lider projektu",
+      "project_lead_description": "Wybierz lidera projektu.",
+      "default_assignee": "Domyślnie przypisany",
+      "default_assignee_description": "Wybierz domyślnego przypisanego do projektu.",
+      "project_subscribers": "Subskrybenci projektu",
+      "project_subscribers_description": "Wybierz członków, którzy będą otrzymywać powiadomienia dotyczące tego projektu.",
+      "guest_super_permissions": {
+        "title": "Nadaj gościom dostęp do wszystkich elementów:",
+        "sub_heading": "Goście zobaczą wszystkie elementy w projekcie."
+      },
+      "invite_members": {
+        "title": "Zaproś członków",
+        "sub_heading": "Zaproś członków do projektu.",
+        "select_co_worker": "Wybierz współpracownika"
+      }
+    },
+    "states": {
+      "heading": "Stany",
+      "description": "Definiuj i dostosowuj stany przepływu pracy, aby śledzić postęp elementów pracy.",
+      "describe_this_state_for_your_members": "Opisz ten stan członkom projektu.",
+      "empty_state": {
+        "title": "Brak stanów w grupie {groupKey}",
+        "description": "Utwórz nowy stan"
+      }
+    },
+    "labels": {
+      "heading": "Etykiety",
+      "description": "Twórz niestandardowe etykiety, aby kategoryzować i organizować swoje elementy pracy",
+      "label_title": "Nazwa etykiety",
+      "label_title_is_required": "Nazwa etykiety jest wymagana",
+      "label_max_char": "Nazwa etykiety nie może mieć więcej niż 255 znaków",
+      "toast": {
+        "error": "Błąd podczas aktualizacji etykiety"
+      }
+    },
+    "estimates": {
+      "heading": "Szacunki",
+      "description": "Skonfiguruj systemy szacowania, aby śledzić i komunikować nakład pracy wymagany dla każdego elementu pracy.",
+      "label": "Szacunki",
+      "title": "Włącz szacunki dla mojego projektu",
+      "enable_description": "Pomagają w komunikacji o złożoności i obciążeniu zespołu.",
+      "no_estimate": "Bez szacunku",
+      "new": "Nowy system szacowania",
+      "create": {
+        "custom": "Niestandardowy",
+        "start_from_scratch": "Zacznij od zera",
+        "choose_template": "Wybierz szablon",
+        "choose_estimate_system": "Wybierz system szacowania",
+        "enter_estimate_point": "Wprowadź punkt szacunkowy",
+        "step": "Krok {step} z {total}",
+        "label": "Utwórz szacunek"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Utworzono szacunek",
+            "message": "Szacunek został utworzony pomyślnie"
+          },
+          "error": {
+            "title": "Błąd tworzenia szacunku",
+            "message": "Nie udało się utworzyć nowego szacunku, spróbuj ponownie."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Zaktualizowano szacunek",
+            "message": "Szacunek został zaktualizowany w Twoim projekcie."
+          },
+          "error": {
+            "title": "Błąd aktualizacji szacunku",
+            "message": "Nie udało się zaktualizować szacunku, spróbuj ponownie"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Sukces!",
+            "message": "Szacunki zostały włączone."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Sukces!",
+            "message": "Szacunki zostały wyłączone."
+          },
+          "error": {
+            "title": "Błąd!",
+            "message": "Nie udało się wyłączyć szacunków. Spróbuj ponownie"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Szacunki zostały przestawione",
+            "message": "Szacunki zostały przestawione w Twoim projekcie."
+          },
+          "error": {
+            "title": "Nie udało się przestawić szacunków",
+            "message": "Nie mogliśmy przestawić szacunków, spróbuj ponownie"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "System szacowania utworzony",
+            "message": "Utworzono i włączono pomyślnie"
+          },
+          "error": {
+            "title": "Błąd",
+            "message": "Coś poszło nie tak"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Punkt szacunkowy musi być większy niż 0.",
+        "unable_to_process": "Nie możemy przetworzyć Twojego żądania, spróbuj ponownie.",
+        "numeric": "Punkt szacunkowy musi być wartością liczbową.",
+        "character": "Punkt szacunkowy musi być znakiem.",
+        "empty": "Wartość szacunku nie może być pusta.",
+        "already_exists": "Wartość szacunku już istnieje.",
+        "unsaved_changes": "Masz niezapisane zmiany. Zapisz je przed kliknięciem 'gotowe'",
+        "remove_empty": "Szacunek nie może być pusty. Wprowadź wartość w każde pole lub usuń te, dla których nie masz wartości.",
+        "fill": "Proszę wypełnić to pole szacowania",
+        "repeat": "Wartość szacowania nie może się powtarzać"
+      },
+      "systems": {
+        "points": {
+          "label": "Punkty",
+          "fibonacci": "Fibonacci",
+          "linear": "Liniowy",
+          "squares": "Kwadraty",
+          "custom": "Własny"
+        },
+        "categories": {
+          "label": "Kategorie",
+          "t_shirt_sizes": "Rozmiary koszulek",
+          "easy_to_hard": "Od łatwego do trudnego",
+          "custom": "Własne"
+        },
+        "time": {
+          "label": "Czas",
+          "hours": "Godziny"
+        }
+      },
+      "edit": {
+        "title": "Edytuj system szacowania",
+        "add_or_update": {
+          "title": "Dodaj, zaktualizuj lub usuń szacunki",
+          "description": "Zarządzaj obecnym systemem poprzez dodawanie, aktualizowanie lub usuwanie punktów lub kategorii."
+        },
+        "switch": {
+          "title": "Zmień typ szacowania",
+          "description": "Przekształć system punktowy na system kategorii i odwrotnie."
+        }
+      },
+      "switch": "Przełącz system szacowania",
+      "current": "Obecny system szacowania",
+      "select": "Wybierz system szacowania"
+    },
+    "automations": {
+      "label": "Automatyzacja",
+      "heading": "Automatyzacje",
+      "description": "Skonfiguruj automatyczne akcje, aby usprawnić przepływ zarządzania projektem i zmniejszyć liczbę zadań ręcznych.",
+      "auto-archive": {
+        "title": "Automatyczna archiwizacja zamkniętych elementów",
+        "description": "Plane będzie automatycznie archiwizował elementy, które zostały ukończone lub anulowane.",
+        "duration": "Archiwizuj elementy zamknięte dłużej niż"
+      },
+      "auto-close": {
+        "title": "Automatyczne zamykanie elementów",
+        "description": "Plane będzie automatycznie zamykał elementy, które nie zostały ukończone lub anulowane.",
+        "duration": "Zamknij elementy nieaktywne dłużej niż",
+        "auto_close_status": "Status automatycznego zamknięcia"
+      },
+      "auto-remind": {
+        "title": "Automatyczne przypomnienia",
+        "description": "Plane automatycznie wysyła przypomnienia przez e-mail i powiadomienia w aplikacji, aby Twoja ekipa utrzymała się na ścieżce do terminów.",
+        "duration": "Wyślij przypomnienie przed"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Brak etykiet",
+        "description": "Utwórz etykiety, aby organizować elementy pracy."
+      },
+      "estimates": {
+        "title": "Brak systemów szacowania",
+        "description": "Utwórz system szacowania, aby komunikować obciążenie.",
+        "primary_button": "Dodaj system szacowania"
+      },
+      "integrations": {
+        "title": "Brak skonfigurowanych integracji",
+        "description": "Skonfiguruj GitHub i inne integracje, aby synchronizować elementy pracy projektu."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Włącz przepływy pracy",
+        "description": "Ustaw przepływy pracy, aby kontrolować przemieszczanie się elementów pracy",
+        "no_states_tooltip": "Do przepływu pracy nie dodano żadnych stanów.",
+        "no_work_item_types_tooltip": "Do przepływu pracy nie dodano żadnych typów elementów pracy.",
+        "no_states_or_work_item_types_tooltip": "Do przepływu pracy nie dodano żadnych stanów ani typów elementów pracy.",
+        "toast": {
+          "loading": {
+            "enabling": "Włączanie przepływów pracy",
+            "disabling": "Wyłączanie przepływów pracy"
+          },
+          "success": {
+            "title": "Sukces!",
+            "message": "Przepływy pracy włączono pomyślnie."
+          },
+          "error": {
+            "title": "Błąd!",
+            "message": "Nie udało się włączyć przepływów pracy. Spróbuj ponownie."
+          }
+        }
+      },
+      "heading": "Przepływy pracy",
+      "description": "Automatyzuj przejścia elementów pracy i ustaw reguły kontrolujące, jak zadania przechodzą przez potok projektu.",
+      "add_button": "Dodaj nowy przepływ pracy",
+      "search": "Szukaj przepływów pracy",
+      "detail": {
+        "define": "Zdefiniuj przepływ pracy",
+        "add_states": "Dodaj stany",
+        "unmapped_states": {
+          "title": "Wykryto niezmapowane stany",
+          "description": "Niektóre elementy pracy dla wybranych typów znajdują się obecnie w stanach, które nie istnieją w tym przepływie pracy.",
+          "note": "Jeśli włączysz ten przepływ pracy, te elementy zostaną automatycznie przeniesione do stanu początkowego tego przepływu pracy.",
+          "label": "Brakujące stany",
+          "tooltip": "Niektóre elementy pracy znajdują się w stanach, które nie są zmapowane do tego przepływu pracy. Otwórz przepływ pracy, aby sprawdzić."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Wszystkie stany są używane",
+          "description": "Wszystkie zdefiniowane stany dla tego projektu są już obecne w Twoim obecnym przepływie pracy."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Ten przepływ pracy stosuje się do każdego typu elementu pracy, który nie jest przypisany do przepływu pracy."
+      },
+      "create": {
+        "heading": "Utwórz nowy przepływ pracy",
+        "name": {
+          "placeholder": "Dodaj unikalną nazwę",
+          "validation": {
+            "max_length": "Nazwa musi mieć mniej niż 255 znaków",
+            "required": "Nazwa jest wymagana",
+            "invalid": "Nazwa może zawierać tylko litery, cyfry, spacje, myślniki i apostrofy"
+          }
+        },
+        "description": {
+          "placeholder": "Dodaj krótki opis",
+          "validation": {
+            "invalid": "Opis może zawierać tylko litery, cyfry, spacje, myślniki i apostrofy"
+          }
+        },
+        "work_item_type": {
+          "label": "Typ elementu pracy"
+        },
+        "success": {
+          "title": "Sukces!",
+          "message": "Przepływ pracy utworzono pomyślnie."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Nie udało się utworzyć przepływu pracy. Spróbuj ponownie."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Sukces!",
+          "message": "Przepływ pracy zaktualizowano pomyślnie."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Nie udało się zaktualizować przepływu pracy. Spróbuj ponownie."
+        }
+      },
+      "delete": {
+        "loading": "Usuwanie przepływu pracy",
+        "success": {
+          "title": "Sukces!",
+          "message": "Przepływ pracy usunięto pomyślnie."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Nie udało się usunąć przepływu pracy. Spróbuj ponownie."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Sukces!",
+          "message": "Stany dodano pomyślnie."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Nie udało się dodać stanów. Spróbuj ponownie."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Typy elementów pracy",
+      "description": "Twórz i dostosowuj różne typy elementów pracy z unikalnymi właściwościami"
+    },
+    "features": {
+      "cycles": {
+        "title": "Cykle",
+        "short_title": "Cykle",
+        "description": "Planuj pracę w elastycznych okresach, które dostosowują się do unikalnego rytmu i tempa tego projektu.",
+        "toggle_title": "Włącz cykle",
+        "toggle_description": "Planuj pracę w skoncentrowanych ramach czasowych."
+      },
+      "modules": {
+        "title": "Moduły",
+        "short_title": "Moduły",
+        "description": "Organizuj pracę w podprojekty z dedykowanymi liderami i przypisanymi osobami.",
+        "toggle_title": "Włącz moduły",
+        "toggle_description": "Członkowie projektu będą mogli tworzyć i edytować moduły."
+      },
+      "views": {
+        "title": "Widoki",
+        "short_title": "Widoki",
+        "description": "Zapisuj niestandardowe sortowania, filtry i opcje wyświetlania lub udostępniaj je zespołowi.",
+        "toggle_title": "Włącz widoki",
+        "toggle_description": "Członkowie projektu będą mogli tworzyć i edytować widoki."
+      },
+      "pages": {
+        "title": "Strony",
+        "short_title": "Strony",
+        "description": "Twórz i edytuj dowolne treści: notatki, dokumenty, cokolwiek.",
+        "toggle_title": "Włącz strony",
+        "toggle_description": "Członkowie projektu będą mogli tworzyć i edytować strony."
+      },
+      "intake": {
+        "intake_responsibility": "Odpowiedzialność za przyjęcie",
+        "intake_sources": "Źródła przyjęć",
+        "title": "Odbiór",
+        "short_title": "Odbiór",
+        "description": "Pozwól osobom niebędącym członkami dzielić się błędami, opiniami i sugestiami; bez zakłócania przepływu pracy.",
+        "toggle_title": "Włącz odbiór",
+        "toggle_description": "Pozwól członkom projektu tworzyć żądania odbioru w aplikacji.",
+        "toggle_tooltip_on": "Poproś administratora projektu o włączenie.",
+        "toggle_tooltip_off": "Poproś administratora projektu o wyłączenie.",
+        "notify_assignee": {
+          "title": "Powiadom przypisanych",
+          "description": "Dla nowego żądania przyjęcia domyślni przypisani zostaną powiadomieni poprzez powiadomienia"
+        },
+        "in_app": {
+          "title": "W aplikacji",
+          "description": "Otrzymuj nowe elementy pracy od członków i gości w obszarze roboczym bez zakłócania istniejących."
+        },
+        "email": {
+          "title": "E-mail",
+          "description": "Zbieraj nowe elementy pracy od każdego, kto wyśle e-mail na adres Plane.",
+          "fieldName": "ID e-mail"
+        },
+        "form": {
+          "title": "Formularze",
+          "description": "Pozwól osobom spoza obszaru roboczego tworzyć potencjalne nowe elementy pracy przez dedykowany i bezpieczny formularz.",
+          "fieldName": "Domyślny URL formularza",
+          "create_forms": "Twórz formularze przy użyciu typów elementów pracy",
+          "manage_forms": "Zarządzaj formularzami",
+          "manage_forms_tooltip": "Poproś administratora obszaru roboczego o zarządzanie.",
+          "create_form": "Utwórz formularz",
+          "edit_form": "Edytuj szczegóły formularza",
+          "form_title": "Tytuł formularza",
+          "form_title_required": "Tytuł formularza jest wymagany",
+          "work_item_type": "Typ elementu pracy",
+          "remove_property": "Usuń właściwość",
+          "select_properties": "Wybierz właściwości",
+          "search_placeholder": "Szukaj właściwości",
+          "toasts": {
+            "success_create": "Formularz przyjęcia utworzony pomyślnie",
+            "success_update": "Formularz przyjęcia zaktualizowany pomyślnie",
+            "error_create": "Nie udało się utworzyć formularza przyjęcia",
+            "error_update": "Nie udało się zaktualizować formularza przyjęcia"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Ustawianie przypisanych...",
+            "success": {
+              "title": "Sukces!",
+              "message": "Przypisani ustawieni pomyślnie."
+            },
+            "error": {
+              "title": "Błąd!",
+              "message": "Coś poszło nie tak podczas ustawiania przypisanych. Spróbuj ponownie."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Śledzenie czasu",
+        "short_title": "Śledzenie czasu",
+        "description": "Rejestruj czas spędzony nad elementami pracy i projektami.",
+        "toggle_title": "Włącz śledzenie czasu",
+        "toggle_description": "Członkowie projektu będą mogli rejestrować przepracowany czas."
+      },
+      "milestones": {
+        "title": "Kamienie milowe",
+        "short_title": "Kamienie milowe",
+        "description": "Kamienie milowe zapewniają warstwę do wyrównania elementów pracy w kierunku wspólnych dat zakończenia.",
+        "toggle_title": "Włącz kamienie milowe",
+        "toggle_description": "Organizuj elementy pracy według terminów kamieni milowych."
+      },
+      "toasts": {
+        "loading": "Aktualizowanie funkcji projektu...",
+        "success": "Funkcja projektu zaktualizowana pomyślnie.",
+        "error": "Coś poszło nie tak podczas aktualizacji funkcji projektu. Spróbuj ponownie."
+      }
+    },
+    "project_updates": {
+      "heading": "Aktualizacje projektu",
+      "description": "Skonsolidowane śledzenie i monitorowanie postępu dla tego projektu"
+    },
+    "templates": {
+      "heading": "Szablony",
+      "description": "Zaoszczędź 80% czasu poświęcanego na tworzenie projektów, elementów pracy i stron, gdy używasz szablonów."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Automatyczne planowanie cykli",
+        "description": "Utrzymuj cykle w ruchu bez ręcznej konfiguracji.",
+        "tooltip": "Automatycznie twórz nowe cykle na podstawie wybranego harmonogramu.",
+        "edit_button": "Edytuj",
+        "form": {
+          "cycle_title": {
+            "label": "Tytuł cyklu",
+            "placeholder": "Tytuł",
+            "tooltip": "Tytuł zostanie uzupełniony o numery dla kolejnych cykli. Na przykład: Projekt - 1/2/3",
+            "validation": {
+              "required": "Tytuł cyklu jest wymagany",
+              "max_length": "Tytuł nie może przekraczać 255 znaków"
+            }
+          },
+          "cycle_duration": {
+            "label": "Czas trwania cyklu",
+            "unit": "Tygodnie",
+            "validation": {
+              "required": "Czas trwania cyklu jest wymagany",
+              "min": "Czas trwania cyklu musi wynosić co najmniej 1 tydzień",
+              "max": "Czas trwania cyklu nie może przekraczać 30 tygodni",
+              "positive": "Czas trwania cyklu musi być dodatni"
+            }
+          },
+          "cooldown_period": {
+            "label": "Okres ochłodzenia",
+            "unit": "dni",
+            "tooltip": "Przerwa między cyklami przed rozpoczęciem następnego.",
+            "validation": {
+              "required": "Okres ochłodzenia jest wymagany",
+              "negative": "Okres ochłodzenia nie może być ujemny"
+            }
+          },
+          "start_date": {
+            "label": "Dzień rozpoczęcia cyklu",
+            "validation": {
+              "required": "Data rozpoczęcia jest wymagana",
+              "past": "Data rozpoczęcia nie może być w przeszłości"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Liczba przyszłych cykli",
+            "validation": {
+              "required": "Liczba cykli jest wymagana",
+              "min": "Wymagany jest co najmniej 1 cykl",
+              "max": "Nie można zaplanować więcej niż 3 cykle"
+            }
+          },
+          "auto_rollover": {
+            "label": "Automatyczne przenoszenie elementów pracy",
+            "tooltip": "W dniu zakończenia cyklu przenieś wszystkie niedokończone elementy pracy do następnego cyklu."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Włączanie automatycznego planowania cykli",
+            "loading_disable": "Wyłączanie automatycznego planowania cykli",
+            "success": {
+              "title": "Sukces!",
+              "message": "Automatyczne planowanie cykli zostało pomyślnie przełączone."
+            },
+            "error": {
+              "title": "Błąd!",
+              "message": "Nie udało się przełączyć automatycznego planowania cykli."
+            }
+          },
+          "save": {
+            "loading": "Zapisywanie konfiguracji automatycznego planowania cykli",
+            "success": {
+              "title": "Sukces!",
+              "message_create": "Konfiguracja automatycznego planowania cykli została pomyślnie zapisana.",
+              "message_update": "Konfiguracja automatycznego planowania cykli została pomyślnie zaktualizowana."
+            },
+            "error": {
+              "title": "Błąd!",
+              "message_create": "Nie udało się zapisać konfiguracji automatycznego planowania cykli.",
+              "message_update": "Nie udało się zaktualizować konfiguracji automatycznego planowania cykli."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/project.json b/packages/i18n/src/locales/pl/project.json
new file mode 100644
index 0000000..6a3dc76
--- /dev/null
+++ b/packages/i18n/src/locales/pl/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Utworzono dnia",
+      "updated_at": "Zaktualizowano dnia",
+      "name": "Nazwa"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Dodaj cykl",
+    "more_details": "Więcej szczegółów",
+    "cycle": "Cykl",
+    "update_cycle": "Zaktualizuj cykl",
+    "create_cycle": "Utwórz cykl",
+    "no_matching_cycles": "Brak pasujących cykli",
+    "remove_filters_to_see_all_cycles": "Usuń filtry, aby wyświetlić wszystkie cykle",
+    "remove_search_criteria_to_see_all_cycles": "Usuń kryteria wyszukiwania, aby wyświetlić wszystkie cykle",
+    "only_completed_cycles_can_be_archived": "Można archiwizować tylko ukończone cykle",
+    "start_date": "Data początku",
+    "end_date": "Data końca",
+    "in_your_timezone": "W Twojej strefie czasowej",
+    "transfer_work_items": "Przenieś {count} elementów pracy",
+    "transfer": {
+      "no_cycles_available": "Brak innych cykli dostępnych do przeniesienia elementów pracy."
+    },
+    "date_range": "Zakres dat",
+    "add_date": "Dodaj datę",
+    "active_cycle": {
+      "label": "Aktywny cykl",
+      "progress": "Postęp",
+      "chart": "Wykres burndown",
+      "priority_issue": "Elementy o wysokim priorytecie",
+      "assignees": "Przypisani",
+      "issue_burndown": "Burndown elementów pracy",
+      "ideal": "Idealny",
+      "current": "Obecny",
+      "labels": "Etykiety",
+      "trailing": "Opóźnienie",
+      "leading": "Wyprzedzenie"
+    },
+    "upcoming_cycle": {
+      "label": "Nadchodzący cykl"
+    },
+    "completed_cycle": {
+      "label": "Ukończony cykl"
+    },
+    "status": {
+      "days_left": "Pozostało dni",
+      "completed": "Ukończono",
+      "yet_to_start": "Jeszcze nierozpoczęty",
+      "in_progress": "W trakcie",
+      "draft": "Szkic"
+    },
+    "action": {
+      "restore": {
+        "title": "Przywróć cykl",
+        "success": {
+          "title": "Cykl przywrócony",
+          "description": "Cykl został przywrócony."
+        },
+        "failed": {
+          "title": "Przywracanie nie powiodło się",
+          "description": "Nie udało się przywrócić cyklu."
+        }
+      },
+      "favorite": {
+        "loading": "Dodawanie do ulubionych",
+        "success": {
+          "description": "Cykl dodano do ulubionych.",
+          "title": "Sukces!"
+        },
+        "failed": {
+          "description": "Nie udało się dodać do ulubionych.",
+          "title": "Błąd!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Usuwanie z ulubionych",
+        "success": {
+          "description": "Cykl usunięto z ulubionych.",
+          "title": "Sukces!"
+        },
+        "failed": {
+          "description": "Nie udało się usunąć z ulubionych.",
+          "title": "Błąd!"
+        }
+      },
+      "update": {
+        "loading": "Aktualizowanie cyklu",
+        "success": {
+          "description": "Cykl zaktualizowano.",
+          "title": "Sukces!"
+        },
+        "failed": {
+          "description": "Aktualizacja nie powiodła się.",
+          "title": "Błąd!"
+        },
+        "error": {
+          "already_exists": "Cykl o tych datach już istnieje. Aby mieć szkic, usuń daty."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Grupuj pracę w cykle.",
+        "description": "Ograniczaj pracę w czasie, śledź terminy i monitoruj postępy.",
+        "primary_button": {
+          "text": "Utwórz pierwszy cykl",
+          "comic": {
+            "title": "Cykle to powtarzalne okresy czasu.",
+            "description": "Sprint, iteracja lub inny okres, w którym śledzisz pracę."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Brak elementów w cyklu",
+        "description": "Dodaj elementy, które chcesz śledzić.",
+        "primary_button": {
+          "text": "Utwórz element"
+        },
+        "secondary_button": {
+          "text": "Dodaj istniejący element"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Brak elementów w cyklu",
+        "description": "Elementy zostały przeniesione lub ukryte. Aby je zobaczyć, zmień właściwości."
+      },
+      "active": {
+        "title": "Brak aktywnego cyklu",
+        "description": "Aktywny cykl obejmuje aktualną datę. Będzie wyświetlany tutaj."
+      },
+      "archived": {
+        "title": "Brak zarchiwizowanych cykli",
+        "description": "Archiwizuj ukończone cykle, aby zachować porządek."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Zapisuj filtry jako widoki.",
+        "description": "Widoki to zapisane filtry zapewniające łatwy dostęp. Udostępnij je zespołowi.",
+        "primary_button": {
+          "text": "Utwórz pierwszy widok",
+          "comic": {
+            "title": "Widoki działają z właściwościami elementów pracy.",
+            "description": "Utwórz widok z żądanymi filtrami."
+          }
+        },
+        "filter": {
+          "title": "Brak pasujących widoków",
+          "description": "Żadne widoki nie pasują do kryteriów wyszukiwania.\n Utwórz nowy widok."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Brak zarchiwizowanych elementów pracy",
+        "description": "Ręcznie lub przez automatyzację możesz archiwizować elementy pracy, które są ukończone lub anulowane. Znajdziesz je tutaj po zarchiwizowaniu.",
+        "primary_button": {
+          "text": "Ustaw automatyzację"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Nie znaleziono elementów pracy pasujących do zastosowanych filtrów",
+        "secondary_button": {
+          "text": "Wyczyść wszystkie filtry"
+        }
+      },
+      "public": {
+        "title": "Brak publicznych stron",
+        "description": "Zobacz strony udostępnione wszystkim w Twoim projekcie tutaj.",
+        "primary_button": {
+          "text": "Utwórz pierwszą stronę"
+        }
+      },
+      "archived": {
+        "title": "Brak zarchiwizowanych stron",
+        "description": "Archiwizuj strony, które nie są już na Twoim radarze. Uzyskaj do nich dostęp tutaj, gdy będą potrzebne."
+      },
+      "shared": {
+        "title": "Brak udostępnionych stron",
+        "description": "Strony, które inni Ci udostępnili, pojawią się tutaj."
+      }
+    },
+    "delete_view": {
+      "title": "Czy na pewno chcesz usunąć ten widok?",
+      "content": "Jeśli potwierdzisz, wszystkie opcje sortowania, filtrowania i wyświetlania + układ, który wybrałeś dla tego widoku, zostaną trwale usunięte bez możliwości przywrócenia."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Utwórz i przypisz element pracy",
+        "description": "Elementy to zadania, które przypisujesz sobie lub zespołowi. Śledź ich postęp.",
+        "primary_button": {
+          "text": "Utwórz pierwszy element",
+          "comic": {
+            "title": "Elementy to podstawowe zadania",
+            "description": "Przykłady: przeprojektowanie interfejsu, rebranding, nowy system."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Brak zarchiwizowanych elementów",
+        "description": "Archiwizuj elementy ukończone lub anulowane. Skonfiguruj automatyzację.",
+        "primary_button": {
+          "text": "Skonfiguruj automatyzację"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Brak pasujących elementów",
+        "secondary_button": {
+          "text": "Wyczyść filtry"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Dodaj moduł",
+    "update_module": "Zaktualizuj moduł",
+    "create_module": "Utwórz moduł",
+    "archive_module": "Archiwizuj moduł",
+    "restore_module": "Przywróć moduł",
+    "delete_module": "Usuń moduł",
+    "empty_state": {
+      "general": {
+        "title": "Grupuj etapy w moduły.",
+        "description": "Moduły grupują elementy pod wspólnym nadrzędnym celem. Śledź terminy i postępy.",
+        "primary_button": {
+          "text": "Utwórz pierwszy moduł",
+          "comic": {
+            "title": "Moduły grupują elementy hierarchicznie.",
+            "description": "Przykłady: moduł koszyka, podwozia, magazynu."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Brak elementów w module",
+        "description": "Dodaj elementy do modułu.",
+        "primary_button": {
+          "text": "Utwórz elementy"
+        },
+        "secondary_button": {
+          "text": "Dodaj istniejący element"
+        }
+      },
+      "archived": {
+        "title": "Brak zarchiwizowanych modułów",
+        "description": "Archiwizuj moduły ukończone lub anulowane."
+      },
+      "sidebar": {
+        "in_active": "Moduł nie jest aktywny.",
+        "invalid_date": "Nieprawidłowa data. Wpisz prawidłową."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Archiwizuj moduł",
+      "archive_module_description": "Można archiwizować tylko ukończone/anulowane moduły.",
+      "delete_module": "Usuń moduł"
+    },
+    "toast": {
+      "copy": {
+        "success": "Link do modułu skopiowano"
+      },
+      "delete": {
+        "success": "Moduł usunięto",
+        "error": "Nie udało się usunąć modułu"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Notuj, dokumentuj lub twórz bazę wiedzy. Użyj AI Galileo.",
+        "description": "Strony to obszar na Twoje myśli. Pisz, formatuj, osadzaj elementy i używaj komponentów.",
+        "primary_button": {
+          "text": "Utwórz pierwszą stronę"
+        }
+      },
+      "private": {
+        "title": "Brak prywatnych stron",
+        "description": "Przechowuj prywatne notatki. Udostępnij je później, gdy będziesz gotowy.",
+        "primary_button": {
+          "text": "Utwórz stronę"
+        }
+      },
+      "public": {
+        "title": "Brak publicznych stron",
+        "description": "Tutaj zobaczysz strony udostępnione w projekcie.",
+        "primary_button": {
+          "text": "Utwórz stronę"
+        }
+      },
+      "archived": {
+        "title": "Brak zarchiwizowanych stron",
+        "description": "Archiwizuj strony do późniejszego użytku."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Zgłoszenia nie są włączone",
+        "description": "Włącz zgłoszenia w ustawieniach projektu, aby zarządzać prośbami.",
+        "primary_button": {
+          "text": "Zarządzaj funkcjami"
+        }
+      },
+      "cycle": {
+        "title": "Cykle nie są włączone",
+        "description": "Włącz cykle, aby ograniczać pracę w czasie.",
+        "primary_button": {
+          "text": "Zarządzaj funkcjami"
+        }
+      },
+      "module": {
+        "title": "Moduły nie są włączone",
+        "description": "Włącz moduły w ustawieniach projektu.",
+        "primary_button": {
+          "text": "Zarządzaj funkcjami"
+        }
+      },
+      "page": {
+        "title": "Strony nie są włączone",
+        "description": "Włącz strony w ustawieniach projektu.",
+        "primary_button": {
+          "text": "Zarządzaj funkcjami"
+        }
+      },
+      "view": {
+        "title": "Widoki nie są włączone",
+        "description": "Włącz widoki w ustawieniach projektu.",
+        "primary_button": {
+          "text": "Zarządzaj funkcjami"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Planowane",
+      "in_progress": "W trakcie",
+      "paused": "Wstrzymane",
+      "completed": "Ukończone",
+      "cancelled": "Anulowane"
+    },
+    "layout": {
+      "list": "Lista",
+      "board": "Tablica",
+      "timeline": "Oś czasu"
+    },
+    "order_by": {
+      "name": "Nazwa",
+      "progress": "Postęp",
+      "issues": "Liczba elementów",
+      "due_date": "Termin",
+      "created_at": "Data utworzenia",
+      "manual": "Ręcznie"
+    }
+  },
+  "project_members": {
+    "full_name": "Imię i nazwisko",
+    "display_name": "Nazwa wyświetlana",
+    "email": "E-mail",
+    "joining_date": "Data dołączenia",
+    "role": "Rola"
+  },
+  "project": {
+    "members_import": {
+      "title": "Importuj członków z CSV",
+      "description": "Prześlij CSV z kolumnami: Email i Rola (5=Gość, 15=Członek, 20=Administrator). Użytkownicy muszą już należeć do przestrzeni roboczej.",
+      "download_sample": "Pobierz przykładowy CSV",
+      "dropzone": {
+        "active": "Upuść plik CSV tutaj",
+        "inactive": "Przeciągnij i upuść lub kliknij, aby przesłać",
+        "file_type": "Obsługiwane są tylko pliki .csv"
+      },
+      "buttons": {
+        "cancel": "Anuluj",
+        "import": "Importuj",
+        "try_again": "Spróbuj ponownie",
+        "close": "Zamknij",
+        "done": "Gotowe"
+      },
+      "progress": {
+        "uploading": "Przesyłanie...",
+        "importing": "Importowanie..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Import zakończony"
+        },
+        "message": {
+          "success": "Pomyślnie zaimportowano {count} członk{plural} do projektu.",
+          "no_imports": "Z pliku CSV nie zaimportowano żadnych nowych członków."
+        },
+        "stats": {
+          "added": "Dodano",
+          "reactivated": "Ponownie aktywowano",
+          "already_members": "Już członkowie",
+          "skipped": "Pominięto"
+        },
+        "download_errors": "Pobierz szczegóły pominiętych"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Nieprawidłowy plik",
+          "message": "Obsługiwane są tylko pliki CSV."
+        },
+        "import_failed": {
+          "title": "Import nie powiódł się",
+          "message": "Coś poszło nie tak."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/settings.json b/packages/i18n/src/locales/pl/settings.json
new file mode 100644
index 0000000..a39cbe5
--- /dev/null
+++ b/packages/i18n/src/locales/pl/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Zmień e-mail",
+        "description": "Wpisz nowy adres e-mail, aby otrzymać link weryfikacyjny.",
+        "toasts": {
+          "success_title": "Sukces!",
+          "success_message": "E-mail zaktualizowano. Zaloguj się ponownie."
+        },
+        "form": {
+          "email": {
+            "label": "Nowy e-mail",
+            "placeholder": "Wpisz swój e-mail",
+            "errors": {
+              "required": "E-mail jest wymagany",
+              "invalid": "E-mail jest nieprawidłowy",
+              "exists": "E-mail już istnieje. Użyj innego.",
+              "validation_failed": "Weryfikacja e-maila nie powiodła się. Spróbuj ponownie."
+            }
+          },
+          "code": {
+            "label": "Unikalny kod",
+            "placeholder": "123456",
+            "helper_text": "Kod weryfikacyjny wysłano na nowy e-mail.",
+            "errors": {
+              "required": "Unikalny kod jest wymagany",
+              "invalid": "Nieprawidłowy kod weryfikacyjny. Spróbuj ponownie."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Kontynuuj",
+          "confirm": "Potwierdź",
+          "cancel": "Anuluj"
+        },
+        "states": {
+          "sending": "Wysyłanie…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Preferencje",
+      "description": "Dostosuj sposób korzystania z aplikacji do swojego stylu pracy"
+    },
+    "notifications": {
+      "heading": "Powiadomienia e-mail",
+      "description": "Bądź na bieżąco z subskrybowanymi elementami pracy. Włącz, aby otrzymywać powiadomienia.",
+      "select_default_view": "Wybierz widok domyślny",
+      "compact": "Kompaktowy",
+      "full": "Pełny ekran"
+    },
+    "security": {
+      "heading": "Bezpieczeństwo"
+    },
+    "api_tokens": {
+      "title": "Osobiste tokeny dostępu",
+      "description": "Generuj bezpieczne tokeny API, aby integrować swoje dane z zewnętrznymi systemami i aplikacjami."
+    },
+    "activity": {
+      "heading": "Aktywność",
+      "description": "Śledź swoje ostatnie działania i zmiany we wszystkich projektach i elementach pracy."
+    },
+    "connections": {
+      "title": "Połączenia",
+      "heading": "Połączenia",
+      "description": "Zarządzaj ustawieniami połączeń przestrzeni roboczej."
+    }
+  },
+  "profile": {
+    "label": "Profil",
+    "page_label": "Twoja praca",
+    "work": "Praca",
+    "details": {
+      "joined_on": "Dołączył(a) dnia",
+      "time_zone": "Strefa czasowa"
+    },
+    "stats": {
+      "workload": "Obciążenie",
+      "overview": "Przegląd",
+      "created": "Utworzone elementy",
+      "assigned": "Przypisane elementy",
+      "subscribed": "Subskrybowane elementy",
+      "state_distribution": {
+        "title": "Elementy według stanu",
+        "empty": "Twórz elementy, aby móc analizować stany."
+      },
+      "priority_distribution": {
+        "title": "Elementy według priorytetu",
+        "empty": "Twórz elementy, aby móc analizować priorytety."
+      },
+      "recent_activity": {
+        "title": "Ostatnia aktywność",
+        "empty": "Brak aktywności.",
+        "button": "Pobierz dzisiejszą aktywność",
+        "button_loading": "Pobieranie"
+      }
+    },
+    "actions": {
+      "profile": "Profil",
+      "security": "Bezpieczeństwo",
+      "activity": "Aktywność",
+      "preferences": "Preferencje",
+      "notifications": "Powiadomienia",
+      "api-tokens": "Osobiste tokeny dostępu",
+      "connections": "Połączenia"
+    },
+    "tabs": {
+      "summary": "Podsumowanie",
+      "assigned": "Przypisane",
+      "created": "Utworzone",
+      "subscribed": "Subskrybowane",
+      "activity": "Aktywność"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Brak aktywności",
+        "description": "Utwórz element pracy, aby zacząć."
+      },
+      "assigned": {
+        "title": "Brak przypisanych elementów pracy",
+        "description": "Tutaj zobaczysz elementy pracy przypisane do Ciebie."
+      },
+      "created": {
+        "title": "Brak utworzonych elementów pracy",
+        "description": "Tutaj są elementy pracy, które utworzyłeś(aś)."
+      },
+      "subscribed": {
+        "title": "Brak subskrybowanych elementów pracy",
+        "description": "Subskrybuj interesujące Cię elementy pracy, a pojawią się tutaj."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Preferencje systemowe"
+      },
+      "light": {
+        "label": "Jasny"
+      },
+      "dark": {
+        "label": "Ciemny"
+      },
+      "light_contrast": {
+        "label": "Jasny wysoki kontrast"
+      },
+      "dark_contrast": {
+        "label": "Ciemny wysoki kontrast"
+      },
+      "custom": {
+        "label": "Motyw niestandardowy"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/stickies.json b/packages/i18n/src/locales/pl/stickies.json
new file mode 100644
index 0000000..9ef958b
--- /dev/null
+++ b/packages/i18n/src/locales/pl/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Twoje notatki",
+    "placeholder": "kliknij, aby zacząć pisać",
+    "all": "Wszystkie notatki",
+    "no-data": "Zapisuj pomysły i myśli. Dodaj pierwszą notatkę.",
+    "add": "Dodaj notatkę",
+    "search_placeholder": "Szukaj według nazwy",
+    "delete": "Usuń notatkę",
+    "delete_confirmation": "Czy na pewno chcesz usunąć tę notatkę?",
+    "empty_state": {
+      "simple": "Zapisuj pomysły i myśli. Dodaj pierwszą notatkę.",
+      "general": {
+        "title": "Notatki to szybkie zapiski.",
+        "description": "Zapisuj pomysły i uzyskuj do nich dostęp z dowolnego miejsca.",
+        "primary_button": {
+          "text": "Dodaj notatkę"
+        }
+      },
+      "search": {
+        "title": "Nie znaleziono żadnych notatek.",
+        "description": "Spróbuj innego wyrażenia lub utwórz nową notatkę.",
+        "primary_button": {
+          "text": "Dodaj notatkę"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Nazwa notatki może mieć maks. 100 znaków.",
+        "already_exists": "Notatka bez opisu już istnieje"
+      },
+      "created": {
+        "title": "Notatkę utworzono",
+        "message": "Notatkę utworzono pomyślnie"
+      },
+      "not_created": {
+        "title": "Nie udało się utworzyć",
+        "message": "Nie można utworzyć notatki"
+      },
+      "updated": {
+        "title": "Notatkę zaktualizowano",
+        "message": "Notatkę zaktualizowano pomyślnie"
+      },
+      "not_updated": {
+        "title": "Aktualizacja się nie powiodła",
+        "message": "Nie można zaktualizować notatki"
+      },
+      "removed": {
+        "title": "Notatkę usunięto",
+        "message": "Notatkę usunięto pomyślnie"
+      },
+      "not_removed": {
+        "title": "Usunięcie się nie powiodło",
+        "message": "Nie można usunąć notatki"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/template.json b/packages/i18n/src/locales/pl/template.json
new file mode 100644
index 0000000..e6b80ad
--- /dev/null
+++ b/packages/i18n/src/locales/pl/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Szablony",
+      "description": "Zaoszczędź 80% czasu spędzonego na tworzeniu projektów, elementów pracy i stron, korzystając z szablonów.",
+      "new_project_template": "Nowy szablon projektu",
+      "new_work_item_template": "Nowy szablon elementu pracy",
+      "new_page_template": "Nowy szablon strony",
+      "options": {
+        "project": {
+          "label": "Szablony projektów"
+        },
+        "work_item": {
+          "label": "Szablony elementów pracy"
+        },
+        "page": {
+          "label": "Szablony stron"
+        }
+      },
+      "create_template": {
+        "label": "Utwórz szablon",
+        "no_permission": {
+          "project": "Skontaktuj się z administratorem projektu, aby utworzyć szablony",
+          "workspace": "Skontaktuj się z administratorem workspejsu, aby utworzyć szablony"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Użyj szablonu",
+          "loading": "Używam"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Utworzony z workspejsu"
+        },
+        "project": {
+          "info": "Utworzony z projektu"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Nazwij swój szablon projektu.",
+              "validation": {
+                "required": "Nazwa szablonu jest wymagana",
+                "maxLength": "Nazwa szablonu powinna mieć mniej niż 255 znaków"
+              }
+            },
+            "description": {
+              "placeholder": "Opisz kiedy i jak korzystać z tego szablonu."
+            }
+          },
+          "name": {
+            "placeholder": "Nazwij swój projekt.",
+            "validation": {
+              "required": "Tytuł projektu jest wymagany",
+              "maxLength": "Tytuł projektu powinien mieć mniej niż 255 znaków"
+            }
+          },
+          "description": {
+            "placeholder": "Opisz cel i założenia tego projektu."
+          },
+          "button": {
+            "create": "Utwórz szablon projektu",
+            "update": "Aktualizuj szablon projektu"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Nazwij swój szablon elementu pracy.",
+              "validation": {
+                "required": "Nazwa szablonu jest wymagana",
+                "maxLength": "Nazwa szablonu powinna mieć mniej niż 255 znaków"
+              }
+            },
+            "description": {
+              "placeholder": "Opisz kiedy i jak korzystać z tego szablonu."
+            }
+          },
+          "name": {
+            "placeholder": "Nadaj tytuł temu elementowi pracy.",
+            "validation": {
+              "required": "Tytuł elementu pracy jest wymagany",
+              "maxLength": "Tytuł elementu pracy powinien mieć mniej niż 255 znaków"
+            }
+          },
+          "description": {
+            "placeholder": "Opisz ten element pracy, aby było jasne, co osiągniesz po jego ukończeniu."
+          },
+          "button": {
+            "create": "Utwórz szablon elementu pracy",
+            "update": "Aktualizuj szablon elementu pracy"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Nazwij swój szablon strony.",
+              "validation": {
+                "required": "Nazwa szablonu jest wymagana",
+                "maxLength": "Nazwa szablonu powinna mieć mniej niż 255 znaków"
+              }
+            },
+            "description": {
+              "placeholder": "Opisz kiedy i jak korzystać z tego szablonu."
+            }
+          },
+          "name": {
+            "placeholder": "Niezidentyfikowana strona",
+            "validation": {
+              "maxLength": "Nazwa strony powinna mieć mniej niż 255 znaków"
+            }
+          },
+          "button": {
+            "create": "Utwórz szablon strony",
+            "update": "Aktualizuj szablon strony"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Ustawienia publikacji} other {Publikuj na Marketplace}}",
+          "unpublish_action": "Usuń z Marketplace",
+          "title": "Ułatw swoim szablonom by były znalezione i rozpoznawalne.",
+          "name": {
+            "label": "Nazwa szablonu",
+            "placeholder": "Nazwij swój szablon",
+            "validation": {
+              "required": "Nazwa szablonu jest wymagana",
+              "maxLength": "Nazwa szablonu powinna mieć mniej niż 255 znaków"
+            }
+          },
+          "short_description": {
+            "label": "Krótki opis",
+            "placeholder": "Ten szablon jest idealny dla menedżerów projektów, którzy zarządzają wieloma projektami jednocześnie.",
+            "validation": {
+              "required": "Krótki opis jest wymagany"
+            }
+          },
+          "description": {
+            "label": "Opis",
+            "placeholder": "Zwiększ produktywność i usprawnij komunikację dzięki integracji mowy z tekstem.\n• Transkrypcja w czasie rzeczywistym: Natychmiast zamieniaj wypowiedziane słowa na dokładny tekst.\n• Tworzenie zadań i komentarzy: Dodawaj zadania, opisy i komentarze za pomocą komend głosowych.",
+            "validation": {
+              "required": "Opis jest wymagany"
+            }
+          },
+          "category": {
+            "label": "Kategoria",
+            "placeholder": "Wybierz gdzie uważasz, że pasuje najlepiej. Możesz wybrać więcej niż jedną.",
+            "validation": {
+              "required": "Przynajmniej jedna kategoria jest wymagana"
+            }
+          },
+          "keywords": {
+            "label": "Słowa kluczowe",
+            "placeholder": "Użyj terminów, które uważasz, że Twoi użytkownicy będą szukać podczas wyszukiwania tego szablonu.",
+            "helperText": "Wprowadź słowa kluczowe oddzielone przecinkami, które pomożą ludziom znaleźć to z wyszukiwania.",
+            "validation": {
+              "required": "Przynajmniej jedno słowo kluczowe jest wymagane"
+            }
+          },
+          "website": {
+            "label": "Adres URL strony",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "Nieprawidłowy adres URL",
+              "maxLength": "Adres URL powinien mieć mniej niż 800 znaków"
+            }
+          },
+          "company_name": {
+            "label": "Nazwa firmy",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Nazwa firmy jest wymagana",
+              "maxLength": "Nazwa firmy powinna mieć mniej niż 255 znaków"
+            }
+          },
+          "contact_email": {
+            "label": "Adres email obsługi",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Nieprawidłowy adres email",
+              "maxLength": "Adres email obsługi powinien mieć mniej niż 255 znaków"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Link do Twojej polityki prywatności",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Nieprawidłowy adres URL",
+              "maxLength": "Adres URL powinien mieć mniej niż 800 znaków"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Link do Twoich warunków użycia",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "Nieprawidłowy adres URL",
+              "maxLength": "Adres URL powinien mieć mniej niż 800 znaków"
+            }
+          },
+          "cover_image": {
+            "label": "Dodaj obraz okładki, który będzie wyświetlany w sklepie",
+            "upload_title": "Prześlij obraz okładki",
+            "upload_placeholder": "Kliknij, aby przesłać lub przeciągnij i upuść, aby przesłać obraz okładki",
+            "drop_here": "Upuść tutaj",
+            "click_to_upload": "Kliknij, aby przesłać",
+            "invalid_file_or_exceeds_size_limit": "Nieprawidłowy plik lub przekroczono limit rozmiaru. Spróbuj ponownie.",
+            "upload_and_save": "Prześlij i zapisz",
+            "uploading": "Przesyłanie",
+            "remove": "Usuń",
+            "removing": "Usuwanie",
+            "validation": {
+              "required": "Obraz okładki jest wymagany"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Dołącz dokumenty i obrazy, które uważasz, że sprawią, że widzowie tego szablonu będą lepiej zrozumieli jego potencjał.",
+            "validation": {
+              "required": "Przynajmniej jedno zrzut ekranu jest wymagane"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Szablony",
+        "description": "Dzięki szablonom projektów, elementów pracy i stron w Plane nie musisz tworzyć projektu od podstaw ani ręcznie ustawiać właściwości elementów pracy.",
+        "sub_description": "Odzyskaj 80% czasu administracyjnego, korzystając z Szablonów."
+      },
+      "no_templates": {
+        "button": "Utwórz swój pierwszy szablon"
+      },
+      "no_labels": {
+        "description": " Brak etykiet. Utwórz etykiety, aby pomóc zorganizować i filtrować elementy pracy w Twoim projekcie."
+      },
+      "no_modules": {
+        "description": "Brak modułów. Organizuj pracę w podprojekty z dedykowanymi liderami i przypisanymi osobami."
+      },
+      "no_work_items": {
+        "description": "Brak elementów pracy. Dodaj jeden, aby lepiej zorganizować swoją pracę."
+      },
+      "no_sub_work_items": {
+        "description": "Brak pod-elementów pracy. Dodaj jeden, aby lepiej zorganizować swoją pracę."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Nie ma szablonów, do których masz dostęp.",
+          "description": "Proszę utwórz szablon"
+        },
+        "no_results": {
+          "title": "To nie pasuje do żadnego szablonu.",
+          "description": "Spróbuj wyszukać innymi terminami."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Szablon utworzony",
+          "message": "{templateName}, szablon typu {templateType}, jest teraz dostępny dla Twojego workspejsu."
+        },
+        "error": {
+          "title": "Nie mogliśmy utworzyć tego szablonu tym razem.",
+          "message": "Spróbuj zapisać swoje szczegóły ponownie lub skopiuj je do nowego szablonu, najlepiej w innej karcie."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Szablon zmieniony",
+          "message": "{templateName}, szablon typu {templateType}, został zmieniony."
+        },
+        "error": {
+          "title": "Nie mogliśmy zapisać zmian w tym szablonie.",
+          "message": "Spróbuj zapisać swoje szczegóły ponownie lub wróć do tego szablonu później. Jeśli nadal występują problemy, skontaktuj się z nami."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Szablon usunięty",
+          "message": "{templateName}, szablon typu {templateType}, został teraz usunięty z Twojego workspejsu."
+        },
+        "error": {
+          "title": "Nie mogliśmy usunąć tego szablonu.",
+          "message": "Spróbuj usunąć go ponownie lub wróć do niego później. Jeśli nadal nie możesz go usunąć, skontaktuj się z nami."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Szablon wycofany z publikacji",
+          "message": "{templateName}, szablon typu {templateType}, został wycofany z marketplace."
+        },
+        "error": {
+          "title": "Nie mogliśmy wycofać tego szablonu z publikacji.",
+          "message": "Spróbuj wycofać go ponownie lub wróć do tego później. Jeśli nadal nie możesz go wycofać, skontaktuj się z nami."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Usuń szablon",
+      "description": {
+        "prefix": "Czy na pewno chcesz usunąć szablon-",
+        "suffix": "? Wszystkie dane związane z szablonem zostaną trwale usunięte. Tej akcji nie można cofnąć."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Wycofaj szablon z publikacji",
+      "description": {
+        "prefix": "Czy na pewno chcesz wycofać szablon z publikacji-",
+        "suffix": "? Szablon zostanie usunięty z marketplace i nie będzie już dostępny dla innych."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Dodaj nowy szablon",
+        "project": "Dodaj nowy szablon"
+      },
+      "label": {
+        "project": "Wybierz szablon projektu",
+        "page": "Wybierz szablon"
+      },
+      "tooltip": {
+        "work_item": "Wybierz szablon elementu pracy"
+      },
+      "no_results": {
+        "work_item": "Nie znaleziono szablonów.",
+        "project": "Nie znaleziono szablonów."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/tour.json b/packages/i18n/src/locales/pl/tour.json
new file mode 100644
index 0000000..5f45b7e
--- /dev/null
+++ b/packages/i18n/src/locales/pl/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Witaj w swoim obszarze roboczym",
+        "description": "Aby pomóc Ci zacząć, stworzyliśmy dla Ciebie Projekt Demo. Dodajmy Twój pierwszy element pracy."
+      },
+      "step_one": {
+        "title": "Kliknij \"+ Dodaj element pracy\"",
+        "description": "Zacznij od kliknięcia przycisku \"+ Nowy element pracy\". Możesz tworzyć zadania, błędy lub niestandardowy typ pasujący do Twoich potrzeb."
+      },
+      "step_two": {
+        "title": "Filtruj swoje elementy pracy",
+        "description": "Użyj filtrów, aby szybko zawęzić swoją listę. Możesz filtrować według statusu, priorytetu lub członków zespołu. "
+      },
+      "step_three": {
+        "title": "Przeglądaj, grupuj i porządkuj elementy pracy według potrzeb.",
+        "description": "Zobacz wymagane właściwości i grupuj lub porządkuj elementy pracy zgodnie z Twoimi potrzebami."
+      },
+      "step_four": {
+        "title": "Wizualizuj tak, jak chcesz",
+        "description": "Wybierz właściwości, które chcesz widzieć na liście. Możesz także grupować i sortować elementy pracy na swój sposób."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Osiągaj postępy dzięki Cyklom",
+        "description": "Naciśnij Q, aby utworzyć Cykl. Nazwij go i ustaw daty—tylko jeden cykl na projekt."
+      },
+      "step_one": {
+        "title": "Utwórz nowy cykl",
+        "description": "Naciśnij Q, aby utworzyć Cykl. Nazwij go i ustaw daty—tylko jeden cykl na projekt."
+      },
+      "step_two": {
+        "title": "Kliknij \"+\"",
+        "description": "Zacznij od kliknięcia przycisku \"+\". Dodaj nowe lub istniejące elementy pracy bezpośrednio ze strony Cyklu."
+      },
+      "step_three": {
+        "title": "Podsumowanie cyklu",
+        "description": "Śledź postęp cyklu, produktywność zespołu i priorytety—i zbadaj, czy coś się opóźnia."
+      },
+      "step_four": {
+        "title": "Przenieś elementy pracy",
+        "description": "Po terminie cykl automatycznie się kończy. Przenieś niedokończoną pracę do innego cyklu."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Podziel swój projekt na Moduły",
+        "description": "Moduły to mniejsze, skupione projekty, które pomagają użytkownikom grupować i organizować elementy pracy w określonych ramach czasowych."
+      },
+      "step_one": {
+        "title": "Utwórz Moduł",
+        "description": "Moduły to mniejsze, skupione projekty, które pomagają użytkownikom grupować i organizować elementy pracy w określonych ramach czasowych."
+      },
+      "step_two": {
+        "title": "Kliknij \"+\"",
+        "description": "Zacznij od kliknięcia przycisku \"+\". Dodaj nowe lub istniejące elementy pracy bezpośrednio ze strony Modułu."
+      },
+      "step_three": {
+        "title": "Stany modułu",
+        "description": "Moduły używają tych statusów, aby pomóc użytkownikom planować i wyraźnie śledzić postęp i etap."
+      },
+      "step_four": {
+        "title": "Postęp modułu",
+        "description": "Postęp modułu jest śledzony przez ukończone elementy, z analityką do monitorowania wydajności."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Dokumentuj za pomocą Stron opartych na AI",
+        "description": "Strony w Plane pozwalają Ci przechwytywać, organizować i współpracować nad informacjami o projekcie—bez zewnętrznych narzędzi."
+      },
+      "step_one": {
+        "title": "Ustaw stronę jako Publiczną lub Prywatną",
+        "description": "Strony można ustawić jako publiczne, widoczne dla wszystkich w Twoim obszarze roboczym, lub prywatne, dostępne tylko dla Ciebie."
+      },
+      "step_two": {
+        "title": "Użyj polecenia /",
+        "description": "Użyj / na stronie, aby dodać treść z 16 typów bloków, w tym list, obrazów, tabel i osadzeń."
+      },
+      "step_three": {
+        "title": "Akcje strony",
+        "description": "Po utworzeniu strony możesz kliknąć menu ••• w prawym górnym rogu, aby wykonać następujące akcje."
+      },
+      "step_four": {
+        "title": "Spis treści",
+        "description": "Uzyskaj widok z lotu ptaka na swoją stronę, klikając ikonę panelu, aby zobaczyć wszystkie nagłówki."
+      },
+      "step_five": {
+        "title": "Historia wersji",
+        "description": "Strony śledzą wszystkie edycje za pomocą historii wersji, umożliwiając przywrócenie poprzednich wersji w razie potrzeby."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Usprawnij zgłoszenia dzięki przyjmowaniu",
+        "description": "Funkcja dostępna tylko w Plane, która pozwala Gościom tworzyć elementy pracy dla błędów, zgłoszeń lub biletów."
+      },
+      "step_one": {
+        "title": "Otwarte/zamknięte zgłoszenia przyjmowania",
+        "description": "Oczekujące zgłoszenia pozostają w karcie Otwarte, a po rozpatrzeniu przez administratora lub członka przechodzą do Zamknięte."
+      },
+      "step_two": {
+        "title": "Zaakceptuj/odrzuć oczekujące zgłoszenie",
+        "description": "Zaakceptuj, aby edytować i przenieść element pracy do swojego projektu, lub odrzuć, aby oznaczyć go jako Anulowane."
+      },
+      "step_three": {
+        "title": "Odłóż na później",
+        "description": "Element pracy można odłożyć, aby przejrzeć go później. Zostanie przeniesiony na dół listy otwartych zgłoszeń."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Przestań przełączać karty. Połącz swój świat.",
+        "description": "Połącz GitHub, Slack, aby śledzić PR-y i podsumowywać czaty bezpośrednio w Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Nawigacja, na nowo przemyślana",
+        "sub_title": "Twój obszar roboczy jest teraz łatwiejszy do eksploracji dzięki mądrzejszej, uproszczonej nawigacji.",
+        "highlight_1": "Uproszczona struktura lewego panelu dla szybszego odkrywania",
+        "highlight_2": "Ulepszone wyszukiwanie globalne, aby natychmiast przejść do czegokolwiek",
+        "highlight_3": "Mądrzejsze grupowanie kategorii dla przejrzystości i skupienia",
+        "footer": "Chcesz szybki przewodnik?"
+      },
+      "step_zero": {
+        "title": "Znajdź cokolwiek natychmiast",
+        "description": "Użyj uniwersalnego wyszukiwania, aby przejść do zadań, projektów, stron i osób—bez opuszczania swojego przepływu."
+      },
+      "step_one": {
+        "title": "Zachowaj kontrolę nad aktualizacjami",
+        "description": "Twoja skrzynka odbiorcza przechowuje wszystkie wzmianki, zatwierdzenia i aktywność w jednym miejscu, więc nigdy nie przegapisz ważnej pracy."
+      },
+      "step_two": {
+        "title": "Spersonalizuj swoją Nawigację",
+        "description": "Dostosuj to, co widzisz i jak nawigujesz w Preferencjach."
+      }
+    },
+    "actions": {
+      "close": "Zamknij",
+      "next": "Dalej",
+      "back": "Wstecz",
+      "done": "Gotowe",
+      "take_a_tour": "Weź udział w rundzie",
+      "get_started": "Zacznij",
+      "got_it": "Rozumiem"
+    },
+    "seed_data": {
+      "title": "Oto Twój projekt demo",
+      "description": "Projekty pozwalają zarządzać zespołami, zadaniami i wszystkim, czego potrzebujesz, aby wykonać pracę w swoim obszarze roboczym."
+    }
+  },
+  "get_started": {
+    "title": "Cześć {name}, witaj na pokładzie!",
+    "description": "Oto wszystko, czego potrzebujesz, aby rozpocząć swoją podróż z Plane.",
+    "checklist_section": {
+      "title": "Zacznij",
+      "description": "Rozpocznij konfigurację i zobacz, jak Twoje pomysły ożywają szybciej.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Utwórz projekt"
+        },
+        "item_2": {
+          "title": "Utwórz element pracy"
+        },
+        "item_3": {
+          "title": "Zaproś członków zespołu"
+        },
+        "item_4": {
+          "title": "Utwórz stronę"
+        },
+        "item_5": {
+          "title": "Wypróbuj czat Plane AI"
+        },
+        "item_6": {
+          "title": "Połącz integracje"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Zaproś swój zespół",
+      "description": "Zaproś członków zespołu i zacznij budować razem."
+    },
+    "integrations_section": {
+      "title": "Wzmocnij swój obszar roboczy",
+      "more_integrations": "Przeglądaj więcej integracji"
+    },
+    "switch_to_plane_section": {
+      "title": "Odkryj, dlaczego zespoły przechodzą na Plane",
+      "description": "Porównaj Plane z narzędziami, których używasz dzisiaj i zobacz różnicę."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/update.json b/packages/i18n/src/locales/pl/update.json
new file mode 100644
index 0000000..10542b3
--- /dev/null
+++ b/packages/i18n/src/locales/pl/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Postęp",
+      "since_last_update": "Od ostatniej aktualizacji",
+      "comments": "{count, plural, one{# komentarz} other{# komentarze}}"
+    },
+    "add_update": "Dodaj aktualizację",
+    "add_update_placeholder": "Dodaj swoją aktualizację tutaj",
+    "empty": {
+      "title": "Nie ma jeszcze aktualizacji",
+      "description": "Możesz tutaj zobaczyć aktualizacje."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reakcja została dodana",
+          "message": "Reakcja została pomyślnie dodana."
+        },
+        "error": {
+          "title": "Reakcja nie została dodana",
+          "message": "Nie udało się dodać reakcji."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reakcja została usunięta",
+          "message": "Reakcja została pomyślnie usunięta."
+        },
+        "error": {
+          "title": "Reakcja nie została usunięta",
+          "message": "Nie udało się usunąć reakcji."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Aktualizacja została stworzona",
+        "message": "Aktualizacja została pomyślnie stworzona."
+      },
+      "error": {
+        "title": "Aktualizacja nie została stworzona",
+        "message": "Nie udało się stworzyć aktualizacji."
+      }
+    },
+    "delete": {
+      "title": "Usuń aktualizację",
+      "confirmation": "Czy na pewno chcesz usunąć tę aktualizację? Ta operacja jest nieodwracalna.",
+      "success": {
+        "title": "Aktualizacja została usunięta",
+        "message": "Aktualizacja została pomyślnie usunięta."
+      },
+      "error": {
+        "title": "Aktualizacja nie została usunięta",
+        "message": "Nie udało się usunąć aktualizacji."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Aktualizacja została zaktualizowana",
+        "message": "Aktualizacja została pomyślnie zaktualizowana."
+      },
+      "error": {
+        "title": "Aktualizacja nie została zaktualizowana",
+        "message": "Nie udało się zaktualizować aktualizacji."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/wiki.json b/packages/i18n/src/locales/pl/wiki.json
new file mode 100644
index 0000000..6c97339
--- /dev/null
+++ b/packages/i18n/src/locales/pl/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Ogólne",
+      "private": "Prywatne",
+      "shared": "Udostępnione",
+      "archived": "Zarchiwizowane"
+    },
+    "fallback_name": "Kolekcja",
+    "form": {
+      "name_required": "Tytuł kolekcji jest wymagany",
+      "name_max_length": "Nazwa kolekcji musi mieć mniej niż 255 znaków",
+      "name_placeholder_create": "Nadaj kolekcji tytuł",
+      "name_placeholder_edit": "Nazwa kolekcji"
+    },
+    "create_modal": {
+      "title": "Utwórz kolekcję",
+      "submit": "Utwórz kolekcję"
+    },
+    "edit_modal": {
+      "title": "Edytuj kolekcję"
+    },
+    "delete_modal": {
+      "title": "Usuń kolekcję",
+      "page_count": "Ta kolekcja zawiera {pageCount} stron. Wybierz, co ma się z nimi stać.",
+      "transfer_title": "Przenieś strony i usuń kolekcję",
+      "transfer_description": "Przed usunięciem przenieś wszystkie strony do innej kolekcji. Strony i ich uprawnienia zostaną zachowane.",
+      "transfer_warning": "Przeniesione strony odziedziczą uprawnienia wybranej kolekcji.",
+      "transfer_target_label": "Przenieś strony do",
+      "transfer_target_placeholder": "Wybierz kolekcję",
+      "delete_with_pages_title": "Usuń kolekcję wraz ze stronami",
+      "delete_with_pages_description": "Trwale usuwa kolekcję i wszystkie jej strony. Tej operacji nie można cofnąć.",
+      "submit": "Usuń kolekcję"
+    },
+    "header": {
+      "add_page": "Dodaj stronę"
+    },
+    "menu": {
+      "create_new_page": "Utwórz nową stronę",
+      "add_existing_page": "Dodaj istniejącą stronę",
+      "edit_collection": "Edytuj kolekcję",
+      "collection_options": "Opcje kolekcji"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Szukaj stron",
+      "success_message": "Dodano {count} stron do kolekcji.",
+      "error_message": "Nie udało się przenieść stron. Spróbuj ponownie.",
+      "no_pages_found": "Nie znaleziono stron pasujących do wyszukiwania",
+      "no_pages_available": "Brak stron dostępnych do przeniesienia",
+      "submit": "Przenieś"
+    },
+    "list": {
+      "invite_only": "Tylko na zaproszenie",
+      "remove_error": "Nie udało się usunąć strony z kolekcji.",
+      "no_matching_pages": "Brak pasujących stron",
+      "remove_search_criteria": "Usuń kryteria wyszukiwania, aby zobaczyć wszystkie strony",
+      "remove_filters": "Usuń filtry, aby zobaczyć wszystkie strony",
+      "no_pages_title": "Nie ma jeszcze żadnych stron",
+      "no_pages_description": "Ta kolekcja nie ma jeszcze żadnych stron.",
+      "untitled": "Bez tytułu",
+      "restricted_access": "Ograniczony dostęp",
+      "collapse_page": "Zwiń stronę",
+      "expand_page": "Rozwiń stronę",
+      "page_actions": "Akcje strony",
+      "page_link_copied": "Link do strony skopiowano do schowka.",
+      "columns": {
+        "page_name": "Nazwa strony",
+        "owner": "Właściciel",
+        "nested_pages": "Zagnieżdżone strony",
+        "last_activity": "Ostatnia aktywność",
+        "actions": "Akcje"
+      }
+    },
+    "toasts": {
+      "created": "Kolekcja została utworzona.",
+      "create_error": "Nie udało się utworzyć kolekcji. Spróbuj ponownie.",
+      "renamed": "Nazwa kolekcji została zmieniona.",
+      "rename_error": "Nie udało się zaktualizować kolekcji. Spróbuj ponownie.",
+      "transferred_deleted": "Strony zostały przeniesione, a kolekcja usunięta.",
+      "deleted_with_pages": "Kolekcja i jej strony zostały usunięte.",
+      "delete_error": "Nie udało się usunąć kolekcji. Spróbuj ponownie.",
+      "target_required": "Wybierz kolekcję, do której chcesz przenieść strony.",
+      "create_page_error": "Nie udało się utworzyć strony. Spróbuj ponownie.",
+      "create_page_in_collection_error": "Nie udało się utworzyć strony lub dodać jej do kolekcji. Spróbuj ponownie.",
+      "collection_link_copied": "Link do kolekcji skopiowano do schowka."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Uaktualnij, aby odblokować Wiki",
+      "description": "Odblokuj publiczne strony, historię wersji, udostępnione strony, współpracę w czasie rzeczywistym oraz strony przestrzeni roboczej dla wiki, dokumentacji firmowej i baz wiedzy dzięki Plane Pro.",
+      "upgrade_button": {
+        "text": "Uaktualnij"
+      },
+      "learn_more_button": {
+        "text": "Dowiedz się więcej"
+      },
+      "download_button": {
+        "text": "Pobierz dane",
+        "loading": "Pobieranie"
+      },
+      "tabs": {
+        "nested_pages": "Zagnieżdżone strony",
+        "add_embeds": "Dodaj osadzenia",
+        "publish_pages": "Publikuj strony",
+        "comments": "Komentarze"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Zagnieżdżone strony wymagają planu płatnego. Uaktualnij, aby odblokować."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/work-item-type.json b/packages/i18n/src/locales/pl/work-item-type.json
new file mode 100644
index 0000000..1772c8b
--- /dev/null
+++ b/packages/i18n/src/locales/pl/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Typy Elementów Pracy",
+    "label_lowercase": "typy elementów pracy",
+    "settings": {
+      "description": "Dostosuj i dodaj własne właściwości, aby dopasować do potrzeb zespołu.",
+      "cant_delete_default_message": "Nie można usunąć tego typu elementu pracy, ponieważ jest on ustawiony jako domyślny dla tego projektu.",
+      "set_as_default": "Ustaw jako domyślny",
+      "cant_set_default_inactive_message": "Aktywuj ten typ przed ustawieniem go jako domyślny",
+      "set_default_confirmation": {
+        "title": "Ustaw jako domyślny typ elementu pracy",
+        "description": "Ustawienie {name} jako domyślnego zaimportuje go do wszystkich projektów w tym obszarze roboczym. Wszystkie nowe elementy pracy będą domyślnie używać tego typu.",
+        "confirm_button": "Ustaw jako domyślny"
+      },
+      "properties": {
+        "title": "Właściwości",
+        "description": "Twórz i dostosowuj właściwości.",
+        "tooltip": "Każdy typ elementu pracy posiada domyślny zestaw właściwości, takich jak Tytuł, Opis, Przypisany, Stan, Priorytet, Data rozpoczęcia, Termin zakończenia, Moduł, Cykl itp. Możesz również dostosować i dodać własne właściwości, aby dopasować je do potrzeb Twojego zespołu.",
+        "add_button": "Dodaj nową właściwość",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Importuj z przestrzeni roboczej"
+          }
+        },
+        "dropdown": {
+          "label": "Typ właściwości",
+          "placeholder": "Wybierz typ"
+        },
+        "property_type": {
+          "text": {
+            "label": "Tekst"
+          },
+          "number": {
+            "label": "Numer"
+          },
+          "dropdown": {
+            "label": "Lista rozwijana"
+          },
+          "boolean": {
+            "label": "Wartość logiczna"
+          },
+          "date": {
+            "label": "Data"
+          },
+          "member_picker": {
+            "label": "Wybór członka"
+          },
+          "formula": {
+            "label": "Formuła"
+          }
+        },
+        "attributes": {
+          "label": "Atrybuty",
+          "text": {
+            "single_line": {
+              "label": "Pojedyncza linia"
+            },
+            "multi_line": {
+              "label": "Paragraf"
+            },
+            "readonly": {
+              "label": "Tylko do odczytu",
+              "header": "Dane tylko do odczytu"
+            },
+            "invalid_text_format": {
+              "label": "Nieprawidłowy format tekstu"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Dodaj numer"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Pojedynczy wybór"
+            },
+            "multi_select": {
+              "label": "Wielokrotny wybór"
+            },
+            "no_default_value": {
+              "label": "Brak wartości domyślnej"
+            }
+          },
+          "boolean": {
+            "label": "Prawda | Fałsz",
+            "no_default": "Brak wartości domyślnej"
+          },
+          "option": {
+            "create_update": {
+              "label": "Opcje",
+              "form": {
+                "placeholder": "Dodaj opcję",
+                "errors": {
+                  "name": {
+                    "required": "Nazwa opcji jest wymagana.",
+                    "integrity": "Opcja o tej samej nazwie już istnieje."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Wybierz opcję",
+                "multi": {
+                  "default": "Wybierz opcje",
+                  "variable": "Wybrano {count} opcji"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Sukces!",
+              "message": "Właściwość {name} utworzona pomyślnie."
+            },
+            "error": {
+              "title": "Błąd!",
+              "message": "Nie udało się utworzyć właściwości. Spróbuj ponownie!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Sukces!",
+              "message": "Właściwość {name} zaktualizowana pomyślnie."
+            },
+            "error": {
+              "title": "Błąd!",
+              "message": "Nie udało się zaktualizować właściwości. Spróbuj ponownie!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Sukces!",
+              "message": "Właściwość {name} usunięta pomyślnie."
+            },
+            "error": {
+              "title": "Błąd!",
+              "message": "Nie udało się usunąć właściwości. Spróbuj ponownie!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} właściwość {name}",
+            "success": {
+              "title": "Sukces!",
+              "message": "Właściwość {name} {action} pomyślnie."
+            },
+            "error": {
+              "title": "Błąd!",
+              "message": "Nie udało się {action} właściwości. Spróbuj ponownie!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Utwórz nową niestandardową właściwość",
+            "update": "Zaktualizuj niestandardową właściwość"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Tytuł"
+            },
+            "description": {
+              "placeholder": "Opis"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Musisz nazwać swoją właściwość.",
+              "max_length": "Nazwa właściwości nie powinna przekraczać 255 znaków."
+            },
+            "property_type": {
+              "required": "Musisz wybrać typ właściwości."
+            },
+            "options": {
+              "required": "Musisz dodać co najmniej jedną opcję."
+            },
+            "formula": {
+              "required": "Wyrażenie formuły jest wymagane.",
+              "invalid": "Nieprawidłowa formuła: {error}",
+              "circular_reference": "Wykryto odwołanie cykliczne. Formuła nie może odwoływać się do siebie bezpośrednio ani pośrednio.",
+              "invalid_reference": "Formuła odwołuje się do nieistniejącej właściwości."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Pole formuły",
+          "tooltip": "Wprowadź formułę używając składni '{'Nazwa pola'}'. Obsługuje operatory +, -, *, / i &.",
+          "placeholder": "Napisz formułę",
+          "test_button": "Test",
+          "validating": "Weryfikowanie",
+          "validation_success": "Formuła jest prawidłowa! Zwraca {resultType}",
+          "validation_success_with_refs": "Formuła jest prawidłowa! Zwraca {resultType} ({count} pól odwołanych)",
+          "error": {
+            "empty": "Wprowadź formułę",
+            "missing_context": "Brak kontekstu przestrzeni roboczej, projektu lub typu elementu roboczego",
+            "validation_failed": "Weryfikacja nie powiodła się"
+          },
+          "picker": {
+            "no_match": "Brak pasujących właściwości",
+            "no_available": "Brak dostępnych właściwości"
+          }
+        },
+        "enable_disable": {
+          "label": "Aktywna",
+          "tooltip": {
+            "disabled": "Kliknij, aby wyłączyć",
+            "enabled": "Kliknij, aby włączyć"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Usuń tę właściwość",
+          "description": "Usunięcie właściwości może prowadzić do utraty istniejących danych.",
+          "secondary_description": "Czy chcesz zamiast tego wyłączyć właściwość?",
+          "primary_button": "{action}, usuń to",
+          "secondary_button": "Tak, wyłącz to"
+        },
+        "mandate_confirmation": {
+          "label": "Obowiązkowa właściwość",
+          "content": "Wygląda na to, że istnieje domyślna opcja dla tej właściwości. Uczynienie właściwości obowiązkową usunie wartość domyślną, a użytkownicy będą musieli dodać wartość według własnego wyboru.",
+          "tooltip": {
+            "disabled": "Ten typ właściwości nie może być obowiązkowy",
+            "enabled": "Odznacz, aby oznaczyć pole jako opcjonalne",
+            "checked": "Zaznacz, aby oznaczyć pole jako obowiązkowe"
+          }
+        },
+        "empty_state": {
+          "title": "Dodaj niestandardowe właściwości",
+          "description": "Nowe właściwości, które dodasz dla tego typu elementu pracy, pojawią się tutaj."
+        }
+      },
+      "types": {
+        "title": "Typy",
+        "description": "Twórz i dostosowuj typy elementów pracy z właściwościami.",
+        "sort_options": {
+          "project_count": "Liczba projektów, w których uczestniczy"
+        },
+        "filter_options": {
+          "show_active": "Pokaż aktywne",
+          "show_inactive": "Pokaż nieaktywne"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Utwórz nowy",
+            "import_from_workspace": "Importuj z przestrzeni roboczej"
+          },
+          "banner": {
+            "with_access": "Włącz typy elementów pracy, aby importować typy z poziomu przestrzeni roboczej",
+            "without_access": "Typy elementów pracy są wyłączone. Skontaktuj się z administratorem przestrzeni roboczej, aby je włączyć w ustawieniach przestrzeni roboczej."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Niestandardowe właściwości",
+        "add_button": "Dodaj właściwości",
+        "modal": {
+          "title": "Dodaj właściwości",
+          "empty": {
+            "title": "Brak dostępnych właściwości",
+            "description": "Wszystkie właściwości zostały już powiązane z tym typem."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Odłącz właściwość",
+          "description": "Odłączenie tej właściwości trwale usunie wszystkie jej wartości z każdego elementu pracy używającego tego typu. Tej akcji nie można cofnąć.",
+          "input_label": "Wpisz",
+          "input_label_suffix": "aby kontynuować:",
+          "confirm": "Odłącz właściwość",
+          "loading": "Odłączanie"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Usuń ten typ",
+        "description": "Usunięcie typów może prowadzić do utraty istniejących danych.",
+        "can_disable_warning": "Czy chcesz zamiast tego wyłączyć ten typ?",
+        "primary_button": "Tak, usuń to",
+        "toast": {
+          "success": {
+            "title": "Sukces!",
+            "message": "Typ elementu pracy został pomyślnie usunięty."
+          },
+          "error": {
+            "title": "Błąd!",
+            "message": "Nie udało się usunąć typu elementu pracy. Spróbuj ponownie!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Nie można usunąć domyślnego typu elementu pracy",
+          "cannot_delete_work_item_type_with_associated_work_items": "Nie można usunąć typu elementu pracy z powiązanymi elementami pracy"
+        }
+      }
+    },
+    "create": {
+      "title": "Utwórz typ elementu pracy",
+      "button": "Dodaj typ elementu pracy",
+      "toast": {
+        "success": {
+          "title": "Sukces!",
+          "message": "Typ elementu pracy utworzony pomyślnie."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": {
+            "default": "Nie udało się utworzyć typu elementu pracy. Spróbuj ponownie!",
+            "conflict": "Typ {name} już istnieje. Wybierz inną nazwę."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Aktualizuj typ elementu pracy",
+      "button": "Aktualizuj typ elementu pracy",
+      "toast": {
+        "success": {
+          "title": "Sukces!",
+          "message": "Typ elementu pracy {name} zaktualizowany pomyślnie."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": {
+            "default": "Nie udało się zaktualizować typu elementu pracy. Spróbuj ponownie!",
+            "conflict": "Typ {name} już istnieje. Wybierz inną nazwę."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Nadaj temu typowi elementu pracy unikalną nazwę"
+        },
+        "description": {
+          "placeholder": "Opisz, do czego służy ten typ elementu pracy i kiedy należy go używać."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} typ elementu pracy {name}",
+        "success": {
+          "title": "Sukces!",
+          "message": "Typ elementu pracy {name} {action} pomyślnie."
+        },
+        "error": {
+          "title": "Błąd!",
+          "message": "Nie udało się {action} typu elementu pracy. Spróbuj ponownie!"
+        }
+      },
+      "tooltip": "Kliknij, aby {action}"
+    },
+    "change_confirmation": {
+      "title": "Zmień typ elementu pracy?",
+      "description": "Zmiana typu elementu pracy może spowodować utratę wartości właściwości niestandardowych specyficznych dla bieżącego typu. Ta akcja nie może zostać cofnięta.",
+      "button": {
+        "loading": "Zmienianie",
+        "default": "Zmień typ"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Włącz Typy Elementów Pracy",
+        "description": "Kształtuj elementy pracy według swojej pracy za pomocą Typów elementów pracy. Dostosuj je za pomocą ikon, teł i właściwości oraz skonfiguruj je dla tego projektu.",
+        "primary_button": {
+          "text": "Włącz"
+        },
+        "confirmation": {
+          "title": "Po włączeniu Typów Elementów Pracy nie można ich wyłączyć.",
+          "description": "Element pracy Plane stanie się domyślnym typem elementu pracy dla tego projektu i pojawi się ze swoją ikoną i tłem w tym projekcie.",
+          "button": {
+            "default": "Włącz",
+            "loading": "Konfigurowanie"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Zdobądź Pro, aby włączyć Typy elementów pracy.",
+        "description": "Kształtuj elementy pracy według swojej pracy za pomocą Typów elementów pracy. Dostosuj je za pomocą ikon, teł i właściwości oraz skonfiguruj je dla tego projektu.",
+        "primary_button": {
+          "text": "Zdobądź Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Aktualizuj, aby włączyć Typy elementów pracy.",
+        "description": "Kształtuj elementy pracy według swojej pracy za pomocą Typów elementów pracy. Dostosuj je za pomocą ikon, teł i właściwości oraz skonfiguruj je dla tego projektu.",
+        "primary_button": {
+          "text": "Aktualizuj"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hierarchia",
+      "tab_label": "Hierarchia",
+      "description": "Skonfiguruj poziomy hierarchii, aby zorganizować swoją pracę. Każdy poziom definiuje relację nadrzędną z elementem bezpośrednio powyżej i relację podrzędną z elementem bezpośrednio poniżej. ",
+      "sidebar_label": "Hierarchia",
+      "enable_control": {
+        "title": "Włącz hierarchię",
+        "description": "Twórz relacje nadrzędny-podrzędny między różnymi typami elementów roboczych.",
+        "tooltip": "Nie można wyłączyć hierarchii po jej włączeniu."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Najpierw zdefiniuj typy elementów roboczych, aby utworzyć nową hierarchię.",
+        "cta": "Ustawienia typów elementów roboczych"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Przeciągnij i upuść typ, aby dodać nowy poziom hierarchii",
+      "empty_level_placeholder": "Przeciągnij i upuść typ elementu roboczego na poziom {level}",
+      "drag_tooltip": "Przeciągnij, aby zmienić poziom",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Ustaw jako domyślny",
+          "toast": {
+            "loading": "Ustawianie jako domyślny...",
+            "success": {
+              "title": "Sukces!",
+              "message": "Poziom hierarchii {level} został ustawiony jako domyślny."
+            },
+            "error": {
+              "title": "Błąd!",
+              "message": "Nie udało się ustawić poziomu hierarchii {level} jako domyślnego. Spróbuj ponownie."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Przenoszenie {workItemTypeName} na poziom {level}...",
+        "success": {
+          "title": "Sukces!",
+          "message": "{workItemTypeName} został pomyślnie przeniesiony na poziom {level}."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Zapisanie usunie istniejące powiązania",
+      "content": {
+        "intro": "Typ elementu roboczego {workItemTypeName} obejmuje:",
+        "parent_items": "{count, plural, one {Zostanie usunięte # powiązanie nadrzędne} few {Zostaną usunięte # powiązania nadrzędne} other {Zostanie usuniętych # powiązań nadrzędnych}}.",
+        "child_items": "{count, plural, one {podelement} few {podelementy} other {podelementów}}",
+        "parent_line_suffix_when_also_children": ", oraz ",
+        "footer": "Ta zmiana usunie relacje nadrzędne i podrzędne z istniejących elementów roboczych typu {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Wpisz „potwierdź”, aby kontynuować.",
+        "placeholder": "potwierdź"
+      },
+      "error_toast": {
+        "title": "Błąd!",
+        "message": "Nie udało się odłączyć powiązań i zapisać. Spróbuj ponownie."
+      },
+      "confirm_button": {
+        "loading": "Zapisywanie",
+        "default": "Zapisz mimo to"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Błąd!",
+        "message": "Wybrany typ elementu roboczego nie może być użyty do utworzenia nowego elementu roboczego, ponieważ narusza zasady hierarchii."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Błąd!",
+        "message": "Typ elementu roboczego nie może być zaktualizowany, ponieważ narusza zasady hierarchii."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Poziom hierarchii",
+      "invalid_level_toast": {
+        "title": "Błąd!",
+        "message": "Typ elementu pracy nie może zostać zaktualizowany, ponieważ narusza zasady hierarchii."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/work-item.json b/packages/i18n/src/locales/pl/work-item.json
new file mode 100644
index 0000000..b375939
--- /dev/null
+++ b/packages/i18n/src/locales/pl/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Element pracy} few {Elementy pracy} other {Elementów pracy}}",
+    "all": "Wszystkie elementy pracy",
+    "edit": "Edytuj element pracy",
+    "title": {
+      "label": "Tytuł elementu pracy",
+      "required": "Tytuł elementu pracy jest wymagany."
+    },
+    "add": {
+      "press_enter": "Naciśnij 'Enter', aby dodać kolejny element pracy",
+      "label": "Dodaj element pracy",
+      "cycle": {
+        "failed": "Nie udało się dodać elementu pracy do cyklu. Spróbuj ponownie.",
+        "success": "{count, plural, one {Element pracy} few {Elementy pracy} other {Elementów pracy}} dodano do cyklu.",
+        "loading": "Dodawanie {count, plural, one {elementu pracy} few {elementów pracy} other {elementów pracy}} do cyklu"
+      },
+      "assignee": "Dodaj przypisanego",
+      "start_date": "Dodaj datę rozpoczęcia",
+      "due_date": "Dodaj termin",
+      "parent": "Dodaj element nadrzędny",
+      "sub_issue": "Dodaj podrzędny element pracy",
+      "dependency": "Dodaj zależność",
+      "relation": "Dodaj relację",
+      "link": "Dodaj link",
+      "existing": "Dodaj istniejący element pracy"
+    },
+    "remove": {
+      "label": "Usuń element pracy",
+      "cycle": {
+        "loading": "Usuwanie elementu pracy z cyklu",
+        "success": "Element pracy usunięto z cyklu.",
+        "failed": "Nie udało się usunąć elementu pracy z cyklu. Spróbuj ponownie."
+      },
+      "module": {
+        "loading": "Usuwanie elementu pracy z modułu",
+        "success": "Element pracy usunięto z modułu.",
+        "failed": "Nie udało się usunąć elementu pracy z modułu. Spróbuj ponownie."
+      },
+      "parent": {
+        "label": "Usuń element nadrzędny"
+      }
+    },
+    "new": "Nowy element pracy",
+    "adding": "Dodawanie elementu pracy",
+    "create": {
+      "success": "Element pracy utworzono pomyślnie"
+    },
+    "priority": {
+      "urgent": "Pilny",
+      "high": "Wysoki",
+      "medium": "Średni",
+      "low": "Niski"
+    },
+    "display": {
+      "properties": {
+        "label": "Wyświetlane właściwości",
+        "id": "ID",
+        "issue_type": "Typ elementu pracy",
+        "sub_issue_count": "Liczba elementów podrzędnych",
+        "attachment_count": "Liczba załączników",
+        "created_on": "Utworzono dnia",
+        "sub_issue": "Element podrzędny",
+        "work_item_count": "Liczba elementów pracy"
+      },
+      "extra": {
+        "show_sub_issues": "Pokaż elementy podrzędne",
+        "show_empty_groups": "Pokaż puste grupy"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Ten układ jest sortowany według",
+      "list": "Lista",
+      "kanban": "Tablica Kanban",
+      "calendar": "Kalendarz",
+      "spreadsheet": "Arkusz",
+      "gantt": "Oś czasu",
+      "title": {
+        "list": "Układ listy",
+        "kanban": "Układ tablicy",
+        "calendar": "Układ kalendarza",
+        "spreadsheet": "Układ arkusza",
+        "gantt": "Układ osi czasu"
+      }
+    },
+    "states": {
+      "active": "Aktywny",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Dodaj komentarz",
+      "switch": {
+        "private": "Przełącz na komentarz prywatny",
+        "public": "Przełącz na komentarz publiczny"
+      },
+      "create": {
+        "success": "Komentarz utworzono pomyślnie",
+        "error": "Nie udało się utworzyć komentarza. Spróbuj później."
+      },
+      "update": {
+        "success": "Komentarz zaktualizowano pomyślnie",
+        "error": "Nie udało się zaktualizować komentarza. Spróbuj później."
+      },
+      "remove": {
+        "success": "Komentarz usunięto pomyślnie",
+        "error": "Nie udało się usunąć komentarza. Spróbuj później."
+      },
+      "upload": {
+        "error": "Nie udało się przesłać załącznika. Spróbuj później."
+      },
+      "copy_link": {
+        "success": "Link do komentarza skopiowany do schowka",
+        "error": "Błąd podczas kopiowania linka do komentarza. Spróbuj ponownie później."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Dodaj odpowiedź",
+          "placeholder": "Dodaj odpowiedź"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Nie udało się pobrać odpowiedzi"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Odpowiedź utworzono pomyślnie"
+            },
+            "error": {
+              "message": "Nie udało się utworzyć odpowiedzi"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Odpowiedź zaktualizowano pomyślnie"
+            },
+            "error": {
+              "message": "Nie udało się zaktualizować odpowiedzi"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Odpowiedź usunięto pomyślnie"
+            },
+            "error": {
+              "message": "Nie udało się usunąć odpowiedzi"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Element pracy nie istnieje",
+        "description": "Element pracy, którego szukasz, nie istnieje, został zarchiwizowany lub usunięty.",
+        "primary_button": {
+          "text": "Pokaż inne elementy pracy"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Powiązane elementy pracy"
+    },
+    "archive": {
+      "description": "Można archiwizować tylko elementy pracy w stanie ukończonym lub anulowanym",
+      "label": "Archiwizuj element pracy",
+      "confirm_message": "Czy na pewno chcesz zarchiwizować ten element pracy? Wszystkie zarchiwizowane elementy można później przywrócić.",
+      "success": {
+        "label": "Archiwizacja zakończona",
+        "message": "Archiwa znajdziesz w archiwum projektu."
+      },
+      "failed": {
+        "message": "Nie udało się zarchiwizować elementu pracy. Spróbuj ponownie."
+      },
+      "banner_message": "Ten element pracy został zarchiwizowany. Przejdź do sekcji Archiwa, aby go przywrócić.",
+      "go_to_archives": "Przejdź do archiwów"
+    },
+    "restore": {
+      "success": {
+        "title": "Przywrócenie zakończone",
+        "message": "Twój element pracy można znaleźć w elementach pracy projektu."
+      },
+      "failed": {
+        "message": "Nie udało się przywrócić elementu pracy. Spróbuj ponownie."
+      }
+    },
+    "relation": {
+      "relates_to": "Powiązany z",
+      "duplicate": "Duplikat",
+      "blocked_by": "Zablokowany przez",
+      "blocking": "Blokuje",
+      "start_before": "Zaczyna przed",
+      "start_after": "Zaczyna po",
+      "finish_before": "Kończy przed",
+      "finish_after": "Kończy po",
+      "implements": "Implementuje",
+      "implemented_by": "Implementowane przez"
+    },
+    "copy_link": "Kopiuj link do elementu pracy",
+    "delete": {
+      "label": "Usuń element pracy",
+      "error": "Błąd podczas usuwania elementu pracy"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Subskrypcja elementu pracy powiodła się",
+        "unsubscribed": "Anulowano subskrypcję elementu pracy"
+      }
+    },
+    "select": {
+      "error": "Wybierz co najmniej jeden element pracy",
+      "empty": "Nie wybrano żadnych elementów pracy",
+      "add_selected": "Dodaj wybrane elementy pracy",
+      "select_all": "Wybierz wszystko",
+      "deselect_all": "Odznacz wszystko"
+    },
+    "open_in_full_screen": "Otwórz element pracy na pełnym ekranie",
+    "duplicate": {
+      "modal": {
+        "title": "Utwórz kopię w innym projekcie",
+        "description1": "Tworzy to kopię elementu pracy.",
+        "description2": "Podczas duplikowania wszystkie dane właściwości zostaną usunięte.",
+        "placeholder": "Wybierz projekt"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Element pracy zduplikowano pomyślnie"
+        },
+        "error": {
+          "message": "Nie udało się zduplikować elementu pracy"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Połącz strony",
+      "show_wiki_pages": "Pokaż strony Wiki",
+      "link_pages_to": "Połącz strony z",
+      "linked_pages": "Połączone strony",
+      "no_description": "To pusta strona. Napisz coś wewnątrz, a pojawi się tutaj podobnie jak ten placeholder",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Strony zaktualizowane",
+            "message": "Strony zaktualizowano pomyślnie"
+          },
+          "error": {
+            "title": "Aktualizacja stron nie powiodła się",
+            "message": "Aktualizacja stron nie powiodła się"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Strona usunięta",
+            "message": "Strona usunięta pomyślnie"
+          },
+          "error": {
+            "title": "Usunięcie strony nie powiodło się",
+            "message": "Usunięcie strony nie powiodło się"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Kliknij, aby zagłosować za",
+      "click_to_downvote": "Kliknij, aby zagłosować przeciw",
+      "click_to_view_upvotes": "Kliknij, aby zobaczyć głosy za",
+      "click_to_view_downvotes": "Kliknij, aby zobaczyć głosy przeciw"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Podrzędny element pracy zaktualizowano pomyślnie",
+      "error": "Błąd podczas aktualizacji elementu podrzędnego"
+    },
+    "remove": {
+      "success": "Podrzędny element pracy usunięto pomyślnie",
+      "error": "Błąd podczas usuwania elementu podrzędnego"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Nie masz elementów podrzędnych, które pasują do filtrów, które zastosowałeś.",
+        "description": "Aby zobaczyć wszystkie elementy podrzędne, wyczyść wszystkie zastosowane filtry.",
+        "action": "Wyczyść filtry"
+      },
+      "list_filters": {
+        "title": "Nie masz elementów pracy, które pasują do filtrów, które zastosowałeś.",
+        "description": "Aby zobaczyć wszystkie elementy pracy, wyczyść wszystkie zastosowane filtry.",
+        "action": "Wyczyść filtry"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Brak pasujących elementów"
+      },
+      "no_issues": {
+        "title": "Brak elementów"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Brak komentarzy",
+        "description": "Komentarze służą do dyskusji i śledzenia elementów."
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Nie można zarchiwizować elementów pracy",
+        "message": "Tylko elementy pracy należące do grup stanów Ukończone lub Anulowane mogą być archiwizowane."
+      },
+      "invalid_issue_start_date": {
+        "title": "Nie można zaktualizować elementów pracy",
+        "message": "Wybrana data rozpoczęcia następuje po terminie zakończenia dla niektórych elementów pracy. Upewnij się, że data rozpoczęcia jest przed terminem zakończenia."
+      },
+      "invalid_issue_target_date": {
+        "title": "Nie można zaktualizować elementów pracy",
+        "message": "Wybrany termin zakończenia poprzedza datę rozpoczęcia dla niektórych elementów pracy. Upewnij się, że termin zakończenia jest po dacie rozpoczęcia."
+      },
+      "invalid_state_transition": {
+        "title": "Nie można zaktualizować elementów pracy",
+        "message": "Zmiana stanu nie jest dozwolona dla niektórych elementów pracy. Upewnij się, że zmiana stanu jest dozwolona."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Zmieniaj stan, priorytet i inne właściwości wielu elementów pracy jednocześnie. Zaoszczędź średnio trzy minuty na operację.",
+      "cta": "Uaktualnij do One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Elementy pracy cykliczne",
+      "description": "Ustaw swoją cykliczną pracę raz, a my zajmiemy się powtarzaniem. Wszystko będzie tutaj, gdy będzie to potrzebne.",
+      "new_recurring_work_item": "Nowy cykliczny element pracy",
+      "update_recurring_work_item": "Zaktualizuj cykliczny element pracy",
+      "form": {
+        "interval": {
+          "title": "Harmonogram",
+          "start_date": {
+            "validation": {
+              "required": "Data rozpoczęcia jest wymagana"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Typ interwału jest wymagany"
+            }
+          }
+        },
+        "button": {
+          "create": "Utwórz cykliczny element pracy",
+          "update": "Zaktualizuj cykliczny element pracy"
+        }
+      },
+      "create_button": {
+        "label": "Utwórz cykliczny element pracy",
+        "no_permission": "Skontaktuj się z administratorem projektu, aby utworzyć cykliczne elementy pracy"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Twoja praca na autopilocie",
+        "description": "Ustaw raz. Przywrócimy ją, gdy nadejdzie termin. Ulepsz do Business, aby cykliczna praca była bezwysiłkowa."
+      },
+      "no_templates": {
+        "button": "Utwórz swój pierwszy cykliczny element pracy"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Cykliczny element pracy utworzony",
+          "message": "{name}, cykliczny element pracy, jest już dostępny w Twojej przestrzeni roboczej."
+        },
+        "error": {
+          "title": "Nie udało się utworzyć cyklicznego elementu pracy.",
+          "message": "Spróbuj ponownie zapisać dane lub skopiuj je do nowego cyklicznego elementu pracy, najlepiej w innej karcie."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Cykliczny element pracy zaktualizowany",
+          "message": "{name}, cykliczny element pracy, został zaktualizowany."
+        },
+        "error": {
+          "title": "Nie udało się zapisać zmian w tym cyklicznym elemencie pracy.",
+          "message": "Spróbuj ponownie zapisać dane lub wróć do tego cyklicznego elementu pracy później. Jeśli problem będzie się powtarzał, skontaktuj się z nami."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Cykliczny element pracy usunięty",
+          "message": "{name}, cykliczny element pracy, został usunięty z Twojej przestrzeni roboczej."
+        },
+        "error": {
+          "title": "Nie udało się usunąć cyklicznego elementu pracy.",
+          "message": "Spróbuj usunąć go ponownie lub wróć do niego później. Jeśli nadal nie możesz go usunąć, skontaktuj się z nami."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Usuń cykliczny element pracy",
+      "description": {
+        "prefix": "Czy na pewno chcesz usunąć cykliczny element pracy-",
+        "suffix": "? Wszystkie dane powiązane z cyklicznym elementem pracy zostaną trwale usunięte. Tej operacji nie można cofnąć."
+      }
+    }
+  },
+  "epic": {
+    "new": "Nowy epik",
+    "label": "{count, plural, one {Epik} other {Epiki}}",
+    "adding": "Dodawanie epiku",
+    "create": {
+      "success": "Epik utworzono pomyślnie"
+    },
+    "add": {
+      "label": "Dodaj epik",
+      "press_enter": "Naciśnij 'Enter', aby dodać kolejny epik"
+    },
+    "title": {
+      "label": "Tytuł epiku",
+      "required": "Tytuł epiku jest wymagany."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/workflow.json b/packages/i18n/src/locales/pl/workflow.json
new file mode 100644
index 0000000..4717a24
--- /dev/null
+++ b/packages/i18n/src/locales/pl/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Zezwalaj na nowe elementy pracy",
+      "work_item_creation_disable_tooltip": "Tworzenie elementów pracy jest wyłączone dla tego stanu",
+      "default_state": "Stan domyślny pozwala wszystkim członkom tworzyć nowe elementy pracy. Nie można tego zmienić",
+      "state_change_count": "{count, plural, one {1 dozwolona zmiana stanu} other {{count} dozwolone zmiany stanu}}",
+      "movers_count": "{count, plural, one {1 wymieniony recenzent} other {{count} wymienionych recenzentów}}",
+      "state_changes": {
+        "label": {
+          "default": "Dodaj dozwoloną zmianę stanu",
+          "loading": "Dodawanie dozwolonej zmiany stanu"
+        },
+        "move_to": "Zmień stan na",
+        "movers": {
+          "label": "Gdy zrecenzowane przez",
+          "tooltip": "Recenzenci to osoby, które mają pozwolenie na przenoszenie elementów pracy z jednego stanu do drugiego.",
+          "add": "Dodaj recenzentów"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Nie możesz przenieść tego elementu pracy tutaj."
+    },
+    "workflow_enabled": {
+      "label": "Zmiana stanu"
+    },
+    "workflow_tree": {
+      "label": "Dla elementów pracy w",
+      "state_change_label": "może przenieść to do"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Kontroluj chaos zmian i recenzji dzięki Workflowom.",
+        "description": "Ustaw reguły dotyczące tego, gdzie przenosi się Twoja praca, przez kogo i kiedy, dzięki Workflowom w Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Zobacz historię zmian",
+      "reset_workflow": "Zresetuj workflow"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Czy na pewno chcesz zresetować ten workflow?",
+        "description": "Jeśli zresetujesz ten workflow, wszystkie Twoje reguły zmiany stanu zostaną usunięte i będziesz musiał je utworzyć ponownie, aby uruchomić je w tym projekcie."
+      },
+      "delete_state_change": {
+        "title": "Czy na pewno chcesz usunąć tę regułę zmiany stanu?",
+        "description": "Po usunięciu nie możesz cofnąć tej zmiany i będziesz musiał ponownie ustawić regułę, jeśli chcesz, aby działała dla tego projektu."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} workflow",
+        "success": {
+          "title": "Sukces",
+          "message": "Workflow {action} pomyślnie"
+        },
+        "error": {
+          "title": "Błąd",
+          "message": "Workflow nie mógł zostać {action}. Spróbuj ponownie."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Sukces",
+          "message": "Workflow zresetowany pomyślnie"
+        },
+        "error": {
+          "title": "Błąd resetowania workflow",
+          "message": "Workflow nie mógł zostać zresetowany. Spróbuj ponownie."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Błąd dodawania reguły zmiany stanu",
+          "message": "Reguła zmiany stanu nie mogła zostać dodana. Spróbuj ponownie."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Błąd modyfikowania reguły zmiany stanu",
+          "message": "Reguła zmiany stanu nie mogła zostać zmodyfikowana. Spróbuj ponownie."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Błąd usuwania reguły zmiany stanu",
+          "message": "Reguła zmiany stanu nie mogła zostać usunięta. Spróbuj ponownie."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Błąd modyfikowania recenzentów reguły zmiany stanu",
+          "message": "Recenzenci reguły zmiany stanu nie mogli zostać zmodyfikowani. Spróbuj ponownie."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/workspace-settings.json b/packages/i18n/src/locales/pl/workspace-settings.json
new file mode 100644
index 0000000..f91303e
--- /dev/null
+++ b/packages/i18n/src/locales/pl/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Ustawienia przestrzeni roboczej",
+    "page_label": "{workspace} - Ustawienia ogólne",
+    "key_created": "Klucz utworzony",
+    "copy_key": "Skopiuj i zapisz ten klucz w Plane Pages. Po zamknięciu nie będzie widoczny ponownie. Plik CSV z kluczem został pobrany.",
+    "token_copied": "Token skopiowano do schowka.",
+    "settings": {
+      "general": {
+        "title": "Ogólne",
+        "upload_logo": "Prześlij logo",
+        "edit_logo": "Edytuj logo",
+        "name": "Nazwa przestrzeni roboczej",
+        "company_size": "Rozmiar firmy",
+        "url": "URL przestrzeni roboczej",
+        "workspace_timezone": "Strefa czasowa przestrzeni roboczej",
+        "update_workspace": "Zaktualizuj przestrzeń",
+        "delete_workspace": "Usuń tę przestrzeń",
+        "delete_workspace_description": "Usunięcie przestrzeni spowoduje wymazanie wszystkich danych i zasobów. Ta akcja jest nieodwracalna.",
+        "delete_btn": "Usuń przestrzeń",
+        "delete_modal": {
+          "title": "Czy na pewno chcesz usunąć tę przestrzeń?",
+          "description": "Masz aktywną wersję próbną. Najpierw ją anuluj.",
+          "dismiss": "Zamknij",
+          "cancel": "Anuluj wersję próbną",
+          "success_title": "Przestrzeń usunięta.",
+          "success_message": "Zostaniesz przekierowany do profilu.",
+          "error_title": "Nie udało się.",
+          "error_message": "Spróbuj ponownie."
+        },
+        "errors": {
+          "name": {
+            "required": "Nazwa jest wymagana",
+            "max_length": "Nazwa przestrzeni nie może przekraczać 80 znaków"
+          },
+          "company_size": {
+            "required": "Rozmiar firmy jest wymagany",
+            "select_a_range": "Wybierz rozmiar organizacji"
+          }
+        }
+      },
+      "members": {
+        "title": "Członkowie",
+        "add_member": "Dodaj członka",
+        "pending_invites": "Oczekujące zaproszenia",
+        "invitations_sent_successfully": "Zaproszenia wysłano pomyślnie",
+        "leave_confirmation": "Czy na pewno chcesz opuścić przestrzeń? Stracisz dostęp. Ta akcja jest nieodwracalna.",
+        "details": {
+          "full_name": "Imię i nazwisko",
+          "display_name": "Nazwa wyświetlana",
+          "email_address": "Adres e-mail",
+          "account_type": "Typ konta",
+          "authentication": "Uwierzytelnianie",
+          "joining_date": "Data dołączenia"
+        },
+        "modal": {
+          "title": "Zaproś współpracowników",
+          "description": "Zaproś osoby do współpracy.",
+          "button": "Wyślij zaproszenia",
+          "button_loading": "Wysyłanie zaproszeń",
+          "placeholder": "imię@firma.pl",
+          "errors": {
+            "required": "Wymagany jest adres e-mail.",
+            "invalid": "E-mail jest nieprawidłowy"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Rozliczenia i plany",
+        "description": "Wybierz plan, zarządzaj subskrypcjami i łatwo dokonaj uaktualnienia w miarę rozwoju Twoich potrzeb.",
+        "title": "Rozliczenia i plany",
+        "current_plan": "Obecny plan",
+        "free_plan": "Używasz bezpłatnego planu",
+        "view_plans": "Wyświetl plany"
+      },
+      "exports": {
+        "heading": "Eksporty",
+        "description": "Eksportuj dane projektu w różnych formatach i uzyskaj dostęp do historii eksportów z linkami do pobrania.",
+        "title": "Eksporty",
+        "exporting": "Eksportowanie",
+        "previous_exports": "Poprzednie eksporty",
+        "export_separate_files": "Eksportuj dane do oddzielnych plików",
+        "exporting_projects": "Eksportowanie projektu",
+        "format": "Format",
+        "filters_info": "Zastosuj filtry, aby wyeksportować określone elementy robocze według Twoich kryteriów.",
+        "modal": {
+          "title": "Eksport do",
+          "toasts": {
+            "success": {
+              "title": "Eksport zakończony sukcesem",
+              "message": "Wyeksportowane {entity} można pobrać z poprzednich eksportów."
+            },
+            "error": {
+              "title": "Eksport nie powiódł się",
+              "message": "Spróbuj ponownie."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooki",
+        "description": "Automatyzuj powiadomienia do usług zewnętrznych, gdy wystąpią zdarzenia projektowe.",
+        "title": "Webhooki",
+        "add_webhook": "Dodaj webhook",
+        "modal": {
+          "title": "Utwórz webhook",
+          "details": "Szczegóły webhooka",
+          "payload": "URL payloadu",
+          "question": "Które zdarzenia mają uruchamiać ten webhook?",
+          "error": "URL jest wymagany"
+        },
+        "secret_key": {
+          "title": "Klucz tajny",
+          "message": "Wygeneruj token do logowania webhooka"
+        },
+        "options": {
+          "all": "Wysyłaj wszystko",
+          "individual": "Wybierz pojedyncze zdarzenia"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook utworzony",
+            "message": "Webhook został pomyślnie utworzony"
+          },
+          "not_created": {
+            "title": "Webhook nie został utworzony",
+            "message": "Nie udało się utworzyć webhooka"
+          },
+          "updated": {
+            "title": "Webhook zaktualizowany",
+            "message": "Webhook został pomyślnie zaktualizowany"
+          },
+          "not_updated": {
+            "title": "Aktualizacja webhooka nie powiodła się",
+            "message": "Nie udało się zaktualizować webhooka"
+          },
+          "removed": {
+            "title": "Webhook usunięty",
+            "message": "Webhook został pomyślnie usunięty"
+          },
+          "not_removed": {
+            "title": "Usunięcie webhooka nie powiodło się",
+            "message": "Nie udało się usunąć webhooka"
+          },
+          "secret_key_copied": {
+            "message": "Klucz tajny skopiowany do schowka."
+          },
+          "secret_key_not_copied": {
+            "message": "Błąd podczas kopiowania klucza."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Tokeny API",
+        "description": "Generuj bezpieczne tokeny API, aby integrować swoje dane z zewnętrznymi systemami i aplikacjami.",
+        "title": "Tokeny API",
+        "add_token": "Dodaj token dostępu",
+        "create_token": "Utwórz token",
+        "never_expires": "Nigdy nie wygasa",
+        "generate_token": "Wygeneruj token",
+        "generating": "Generowanie",
+        "delete": {
+          "title": "Usuń token API",
+          "description": "Aplikacje używające tego tokena stracą dostęp. Ta akcja jest nieodwracalna.",
+          "success": {
+            "title": "Sukces!",
+            "message": "Token pomyślnie usunięto"
+          },
+          "error": {
+            "title": "Błąd!",
+            "message": "Usunięcie tokena nie powiodło się"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integracje",
+        "heading": "Integracje",
+        "description": "Łącz się z popularnymi narzędziami i usługami, aby synchronizować pracę w całym ekosystemie przepływu pracy.",
+        "page_title": "Pracuj ze swoimi danymi Plane w dostępnych aplikacjach lub we własnych.",
+        "page_description": "Zobacz wszystkie integracje używane przez tę przestrzeń roboczą lub przez Ciebie."
+      },
+      "imports": {
+        "title": "Importy",
+        "heading": "Importy",
+        "description": "Łącz i importuj dane z istniejących narzędzi do zarządzania projektami, aby usprawnić integrację przepływu pracy."
+      },
+      "worklogs": {
+        "title": "Logi pracy",
+        "heading": "Logi pracy",
+        "description": "Pobierz logi pracy (karty czasu pracy) dla każdej osoby w dowolnym projekcie."
+      },
+      "group_syncing": {
+        "title": "Synchronizacja grup",
+        "heading": "Synchronizacja grup",
+        "description": "Połącz grupy dostawcy tożsamości z projektami i rolami. Dostęp użytkowników jest automatycznie aktualizowany przy zmianach członkostwa w grupie w Twoim IdP, upraszczając onboardingu i offboarding.",
+        "enable": {
+          "title": "Włącz synchronizację grup",
+          "description": "Automatycznie dodawaj użytkowników do projektów na podstawie grup dostawcy tożsamości."
+        },
+        "config": {
+          "title": "Skonfiguruj synchronizację grup",
+          "description": "Ustaw, jak grupy dostawcy tożsamości są mapowane na projekty i role.",
+          "sync_on_login": {
+            "title": "Synchronizacja przy logowaniu",
+            "description": "Aktualizuj członkostwo w grupie i dostęp do projektu przy logowaniu użytkownika."
+          },
+          "sync_offline": {
+            "title": "Synchronizacja offline",
+            "description": "Uruchamia synchronizację co sześć godzin automatycznie, bez czekania na logowanie użytkowników."
+          },
+          "auto_remove": {
+            "title": "Automatyczne usuwanie",
+            "description": "Automatycznie usuwaj użytkowników z projektów, gdy nie pasują już do grupy."
+          },
+          "group_attribute_key": {
+            "title": "Klucz atrybutu grupy",
+            "description": "Atrybut dostawcy tożsamości używany do identyfikacji i synchronizacji grup użytkowników.",
+            "placeholder": "Grupy"
+          }
+        },
+        "group_mapping": {
+          "title": "Mapowanie grup",
+          "description": "Połącz grupy dostawcy tożsamości z projektami i rolami.",
+          "button_text": "Dodaj nową synchronizację grupy"
+        },
+        "toast": {
+          "updating": "Aktualizowanie funkcji synchronizacji grup",
+          "success": "Funkcja synchronizacji grup została pomyślnie zaktualizowana.",
+          "error": "Nie udało się zaktualizować funkcji synchronizacji grup!"
+        },
+        "delete_modal": {
+          "title": "Usuń synchronizację grupy",
+          "content": "Nowi użytkownicy z tej grupy tożsamości nie będą już dodawani do projektu. Już dodani użytkownicy zachowają swoją obecną rolę."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Grupa użytkowników",
+            "required": "Grupa użytkowników jest wymagana",
+            "placeholder": "Wprowadź nazwy grup IdP"
+          },
+          "project": {
+            "text": "Projekt",
+            "required": "Projekt jest wymagany",
+            "placeholder": "Wybierz projekt"
+          },
+          "default_role": {
+            "text": "Rola projektu",
+            "required": "Rola projektu jest wymagana",
+            "placeholder": "Wybierz rolę projektu"
+          }
+        }
+      },
+      "identity": {
+        "title": "Tożsamość",
+        "heading": "Tożsamość",
+        "description": "Skonfiguruj swoją domenę i włącz logowanie jednokrotne"
+      },
+      "project_states": {
+        "title": "Stany projektu",
+        "heading": "Zobacz przegląd postępu dla wszystkich projektów.",
+        "description": "Stany projektów to funkcja Plane służąca do śledzenia postępu wszystkich projektów według dowolnej właściwości projektu.",
+        "go_to_settings": "Przejdź do ustawień"
+      },
+      "projects": {
+        "title": "Projekty",
+        "description": "Zarządzaj stanami projektów, włączaj etykiety projektów i inne konfiguracje.",
+        "tabs": {
+          "states": "Stany projektu",
+          "labels": "Etykiety projektu"
+        }
+      },
+      "templates": {
+        "title": "Szablony",
+        "heading": "Szablony",
+        "description": "Zaoszczędź 80% czasu poświęcanego na tworzenie projektów, elementów pracy i stron, gdy używasz szablonów."
+      },
+      "relations": {
+        "title": "Relacje",
+        "heading": "Relacje",
+        "description": "Twórz typy relacji i zarządzaj nimi, które łączą elementy pracy w całej przestrzeni roboczej."
+      },
+      "cancel_trial": {
+        "title": "Najpierw anuluj swój okres próbny.",
+        "description": "Masz aktywny okres próbny jednego z naszych płatnych planów. Proszę najpierw go anulować, aby kontynuować.",
+        "dismiss": "Odrzuć",
+        "cancel": "Anuluj okres próbny",
+        "cancel_success_title": "Okres próbny anulowany.",
+        "cancel_success_message": "Teraz możesz usunąć workspace.",
+        "cancel_error_title": "To nie zadziałało.",
+        "cancel_error_message": "Spróbuj ponownie, proszę."
+      },
+      "applications": {
+        "internal": "Wewnętrzny",
+        "title": "Aplikacje",
+        "applicationId_copied": "ID aplikacji skopiowane do schowka",
+        "clientId_copied": "ID klienta skopiowane do schowka",
+        "clientSecret_copied": "Sekret klienta skopiowany do schowka",
+        "third_party_apps": "Aplikacje zewnętrzne",
+        "your_apps": "Twoje aplikacje",
+        "connect": "Połącz",
+        "connected": "Połączono",
+        "disconnect": "Odłącz",
+        "install": "Zainstaluj",
+        "installed": "Zainstalowano",
+        "configure": "Konfiguruj",
+        "app_available": "Udostępniłeś tę aplikację do użytku z przestrzenią roboczą Plane",
+        "app_credentials_regenrated": {
+          "title": "Dane uwierzytelniające aplikacji zostały pomyślnie wygenerowane ponownie",
+          "description": "Zastąp sekret klienta wszędzie tam, gdzie jest używany. Poprzedni sekret nie jest już ważny."
+        },
+        "app_created": {
+          "title": "Aplikacja została pomyślnie utworzona",
+          "description": "Użyj danych uwierzytelniających, aby zainstalować aplikację w przestrzeni roboczej Plane"
+        },
+        "installed_apps": "Zainstalowane aplikacje",
+        "all_apps": "Wszystkie aplikacje",
+        "internal_apps": "Aplikacje wewnętrzne",
+        "app_name_title": "Jak nazwiesz tę aplikację",
+        "app_description_title": {
+          "label": "Długi opis",
+          "placeholder": "Napisz długi opis dla marketplace. Naciśnij '/', aby zobaczyć polecenia."
+        },
+        "authorization_grant_type": {
+          "title": "Typ połączenia",
+          "description": "Wybierz, czy Twoja aplikacja ma być zainstalowana raz dla obszaru roboczego, czy pozwolić każdemu użytkownikowi na połączenie własnego konta"
+        },
+        "website": {
+          "title": "Strona internetowa",
+          "description": "Link do strony internetowej Twojej aplikacji.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Twórca aplikacji",
+          "description": "Osoba lub organizacja tworząca aplikację."
+        },
+        "app_maker_error": "Twórca aplikacji jest wymagany",
+        "setup_url": {
+          "label": "URL konfiguracji",
+          "description": "Użytkownicy zostaną przekierowani na ten adres URL po zainstalowaniu aplikacji.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL webhooka",
+          "description": "Tutaj będziemy wysyłać zdarzenia webhook i aktualizacje z przestrzeni roboczych, w których zainstalowano Twoją aplikację.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Sekret webhooka",
+          "description": "Sekret używany do weryfikacji przychodzących żądań webhooka.",
+          "placeholder": "Wprowadź losowy klucz sekretny"
+        },
+        "redirect_uris": {
+          "label": "URI przekierowań (oddzielone spacją)",
+          "description": "Użytkownicy zostaną przekierowani na tę ścieżkę po uwierzytelnieniu się w Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Połącz przestrzeń roboczą Plane, aby rozpocząć korzystanie",
+        "client_id_and_secret": "ID i Sekret Klienta",
+        "client_id_and_secret_description": "Skopiuj i zapisz ten klucz sekretny. Nie będziesz mógł zobaczyć tego klucza po kliknięciu Zamknij.",
+        "client_id_and_secret_download": "Możesz pobrać CSV z kluczem stąd.",
+        "application_id": "ID Aplikacji",
+        "client_id": "ID Klienta",
+        "client_secret": "Sekret Klienta",
+        "export_as_csv": "Eksportuj jako CSV",
+        "slug_already_exists": "Slug już istnieje",
+        "failed_to_create_application": "Nie udało się utworzyć aplikacji",
+        "upload_logo": "Prześlij Logo",
+        "app_name_error": "Nazwa aplikacji jest wymagana",
+        "app_short_description_title": "Podaj krótki opis tej aplikacji",
+        "app_short_description_error": "Krótki opis aplikacji jest wymagany",
+        "app_description_error": "Opis aplikacji jest wymagany",
+        "app_slug_title": "Slug aplikacji",
+        "app_slug_error": "Slug aplikacji jest wymagany",
+        "invalid_website_error": "Nieprawidłowa strona internetowa",
+        "webhook_url_title": "URL Webhooka",
+        "webhook_url_error": "URL webhooka jest wymagany",
+        "invalid_webhook_url_error": "Nieprawidłowy URL webhooka",
+        "redirect_uris_title": "URI przekierowania",
+        "redirect_uris_error": "URI przekierowania są wymagane",
+        "invalid_redirect_uris_error": "Nieprawidłowe URI przekierowania",
+        "redirect_uris_description": "Wprowadź URI oddzielone spacjami, gdzie aplikacja przekieruje po użytkowniku, np. https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Autoryzowane źródła JavaScript",
+        "authorized_javascript_origins_error": "Autoryzowane źródła JavaScript są wymagane",
+        "invalid_authorized_javascript_origins_error": "Nieprawidłowe autoryzowane źródła JavaScript",
+        "authorized_javascript_origins_description": "Wprowadź źródła oddzielone spacjami, z których aplikacja będzie mogła wysyłać żądania, np. app.com example.com",
+        "create_app": "Utwórz aplikację",
+        "update_app": "Aktualizuj aplikację",
+        "build_your_own_app": "Zbuduj własną aplikację",
+        "edit_app_details": "Edytuj szczegóły aplikacji",
+        "regenerate_client_secret_description": "Wygeneruj ponownie sekret klienta. Po regeneracji możesz skopiować klucz lub pobrać go do pliku CSV.",
+        "regenerate_client_secret": "Wygeneruj ponownie sekret klienta",
+        "regenerate_client_secret_confirm_title": "Czy na pewno chcesz wygenerować ponownie sekret klienta?",
+        "regenerate_client_secret_confirm_description": "Aplikacja używająca tego sekretu przestanie działać. Będziesz musiał zaktualizować sekret w aplikacji.",
+        "regenerate_client_secret_confirm_cancel": "Anuluj",
+        "regenerate_client_secret_confirm_regenerate": "Wygeneruj ponownie",
+        "read_only_access_to_workspace": "Dostęp tylko do odczytu do Twojej przestrzeni roboczej",
+        "write_access_to_workspace": "Dostęp do zapisu do Twojej przestrzeni roboczej",
+        "read_only_access_to_user_profile": "Dostęp tylko do odczytu do Twojego profilu użytkownika",
+        "write_access_to_user_profile": "Dostęp do zapisu do Twojego profilu użytkownika",
+        "connect_app_to_workspace": "Połącz {app} z Twoją przestrzenią roboczą {workspace}",
+        "user_permissions": "Uprawnienia użytkownika",
+        "user_permissions_description": "Uprawnienia użytkownika są używane do przyznawania dostępu do profilu użytkownika.",
+        "workspace_permissions": "Uprawnienia przestrzeni roboczej",
+        "workspace_permissions_description": "Uprawnienia przestrzeni roboczej są używane do przyznawania dostępu do przestrzeni roboczej.",
+        "with_the_permissions": "z uprawnieniami",
+        "app_consent_title": "{app} prosi o dostęp do Twojej przestrzeni roboczej i profilu Plane.",
+        "choose_workspace_to_connect_app_with": "Wybierz przestrzeń roboczą, z którą chcesz połączyć aplikację",
+        "app_consent_workspace_permissions_title": "{app} chciałby",
+        "app_consent_user_permissions_title": "{app} może również poprosić o uprawnienia użytkownika do następujących zasobów. Te uprawnienia będą wymagane i autoryzowane tylko przez użytkownika.",
+        "app_consent_accept_title": "Akceptując",
+        "app_consent_accept_1": "Udzielasz aplikacji dostępu do Twoich danych Plane wszędzie tam, gdzie możesz używać aplikacji w lub poza Plane",
+        "app_consent_accept_2": "Zgadzasz się na Politykę Prywatności i Warunki Użytkowania {app}",
+        "accepting": "Akceptowanie...",
+        "accept": "Akceptuj",
+        "categories": "Kategorie",
+        "select_app_categories": "Wybierz kategorie aplikacji",
+        "categories_title": "Kategorie",
+        "categories_error": "Kategorie są wymagane",
+        "invalid_categories_error": "Nieprawidłowe kategorie",
+        "categories_description": "Wybierz kategorie, które najlepiej opisują aplikację",
+        "supported_plans": "Obsługiwane Plany",
+        "supported_plans_description": "Wybierz plany obszaru roboczego, które mogą zainstalować tę aplikację. Pozostaw puste, aby zezwolić na wszystkie plany.",
+        "select_plans": "Wybierz Plany",
+        "privacy_policy_url_title": "URL Polityki Prywatności",
+        "privacy_policy_url_error": "URL Polityki Prywatności jest wymagany",
+        "invalid_privacy_policy_url_error": "Nieprawidłowy URL Polityki Prywatności",
+        "terms_of_service_url_title": "URL Warunków Użytkowania",
+        "terms_of_service_url_error": "URL Warunków Użytkowania jest wymagany",
+        "invalid_terms_of_service_url_error": "Nieprawidłowy URL Warunków Użytkowania",
+        "support_url_title": "URL Obsługi",
+        "support_url_error": "URL Obsługi jest wymagany",
+        "invalid_support_url_error": "Nieprawidłowy URL Obsługi",
+        "video_url_title": "URL Filmu",
+        "video_url_error": "URL Filmu jest wymagany",
+        "invalid_video_url_error": "Nieprawidłowy URL Filmu",
+        "setup_url_error": "URL Konfiguracji jest wymagany",
+        "invalid_setup_url_error": "Nieprawidłowy URL Konfiguracji",
+        "configuration_url_title": "URL Konfiguracji",
+        "configuration_url_error": "URL Konfiguracji jest wymagany",
+        "invalid_configuration_url_error": "Nieprawidłowy URL Konfiguracji",
+        "contact_email_title": "Email kontaktu",
+        "contact_email_error": "Email kontaktu jest wymagany",
+        "invalid_contact_email_error": "Nieprawidłowy email kontaktu",
+        "upload_attachments": "Prześlij załączniki",
+        "uploading_images": "Przesyłanie {count} obrazu{count, plural, one {s} other {s}}",
+        "drop_images_here": "Rzucaj obrazy tutaj",
+        "click_to_upload_images": "Kliknij, aby przesłać obrazy",
+        "invalid_file_or_exceeds_size_limit": "Nieprawidłowy plik lub przekracza limit rozmiaru ({size} MB)",
+        "uploading": "Przesyłanie...",
+        "upload_and_save": "Prześlij i zapisz",
+        "app_consent_no_access_title": "Prośba o instalację",
+        "app_consent_no_access_description": "Aplikacja może być zainstalowana dopiero po tym, jak administrator workspace ją zainstaluje. Skontaktuj się z administratorem workspace, aby kontynuować.",
+        "app_consent_unapproved_title": "Ta aplikacja nie została jeszcze sprawdzona ani zatwierdzona przez Plane.",
+        "app_consent_unapproved_description": "Upewnij się, że ufasz tej aplikacji, zanim połączysz ją ze swoją przestrzenią roboczą.",
+        "go_to_app": "Przejdź do aplikacji",
+        "enable_app_mentions": "Włącz wzmianki o aplikacji",
+        "enable_app_mentions_tooltip": "Po włączeniu tej opcji użytkownicy mogą wspominać lub przypisywać elementy pracy do tej aplikacji.",
+        "scopes": "Zakresy",
+        "select_scopes": "Wybierz zakresy",
+        "read_access_to": "Dostęp tylko do odczytu do",
+        "write_access_to": "Dostęp do zapisu do",
+        "global_permission_expiration": "Zakresy globalne wkrótce wygasną. Zamiast tego używaj zakresów szczegółowych. Na przykład użyj project:read zamiast globalnego odczytu.",
+        "selected_scopes": "{count} wybranych",
+        "scopes_and_permissions": "Zakresy i uprawnienia",
+        "read": "Odczyt",
+        "write": "Zapis",
+        "scope_description": {
+          "projects": "Dostęp do projektów i wszystkich powiązanych encji",
+          "wiki": "Dostęp do wiki i wszystkich powiązanych encji",
+          "workspaces": "Dostęp do obszarów roboczych i wszystkich powiązanych encji",
+          "stickies": "Dostęp do notatek i wszystkich powiązanych encji",
+          "profile": "Dostęp do informacji o profilu użytkownika",
+          "agents": "Dostęp do agentów i wszystkich powiązanych encji",
+          "assets": "Dostęp do zasobów i wszystkich powiązanych encji"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Twoja praca staje się inteligentniejsza i szybsza dzięki AI, która jest natywnie połączona z Twoją pracą i bazą wiedzy."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Skrypty",
+        "new_script": "Nowy skrypt",
+        "description": "Automatyzuj swoje przepływy pracy za pomocą niestandardowych skryptów i reguł automatyzacji."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Brak tokenów API",
+        "description": "Używaj API, aby zintegrować Plane z zewnętrznymi systemami."
+      },
+      "webhooks": {
+        "title": "Brak webhooków",
+        "description": "Utwórz webhooki, aby zautomatyzować działania."
+      },
+      "exports": {
+        "title": "Brak eksportów",
+        "description": "Znajdziesz tu historię swoich eksportów."
+      },
+      "imports": {
+        "title": "Brak importów",
+        "description": "Znajdziesz tu historię swoich importów."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pl/workspace.json b/packages/i18n/src/locales/pl/workspace.json
new file mode 100644
index 0000000..53d5735
--- /dev/null
+++ b/packages/i18n/src/locales/pl/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Utwórz przestrzeń roboczą",
+    "subheading": "Aby korzystać z Plane, musisz utworzyć lub dołączyć do przestrzeni roboczej.",
+    "form": {
+      "name": {
+        "label": "Nazwij swoją przestrzeń roboczą",
+        "placeholder": "Użyj czegoś rozpoznawalnego."
+      },
+      "url": {
+        "label": "Skonfiguruj adres URL swojej przestrzeni",
+        "placeholder": "Wpisz lub wklej adres URL",
+        "edit_slug": "Możesz edytować tylko fragment adresu URL (slug)"
+      },
+      "organization_size": {
+        "label": "Ile osób będzie używać tej przestrzeni?",
+        "placeholder": "Wybierz zakres"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Tylko administrator instancji może tworzyć przestrzenie robocze",
+        "description": "Jeśli znasz adres e-mail administratora, kliknij przycisk poniżej, aby się skontaktować.",
+        "request_button": "Poproś administratora instancji"
+      },
+      "validation": {
+        "name_alphanumeric": "Nazwy przestrzeni mogą zawierać tylko (' '), ('-'), ('_') i znaki alfanumeryczne.",
+        "name_length": "Nazwa ograniczona do 80 znaków.",
+        "url_alphanumeric": "Adres URL może zawierać tylko ('-') i znaki alfanumeryczne.",
+        "url_length": "Adres URL ograniczony do 48 znaków.",
+        "url_already_taken": "Adres URL przestrzeni roboczej jest już zajęty!"
+      }
+    },
+    "request_email": {
+      "subject": "Prośba o nową przestrzeń roboczą",
+      "body": "Cześć Administratorze,\n\nProszę o utworzenie nowej przestrzeni roboczej z adresem [/workspace-name] dla [cel utworzenia].\n\nDziękuję,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Utwórz przestrzeń roboczą",
+      "loading": "Tworzenie przestrzeni roboczej"
+    },
+    "toast": {
+      "success": {
+        "title": "Sukces",
+        "message": "Przestrzeń roboczą utworzono pomyślnie"
+      },
+      "error": {
+        "title": "Błąd",
+        "message": "Nie udało się utworzyć przestrzeni roboczej. Spróbuj ponownie."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Podgląd projektów, aktywności i metryk",
+        "description": "Witaj w Plane, cieszymy się, że jesteś. Utwórz pierwszy projekt, śledź elementy pracy, a ta strona stanie się centrum Twojego postępu. Administratorzy zobaczą tu również elementy pomocne zespołowi.",
+        "primary_button": {
+          "text": "Utwórz pierwszy projekt",
+          "comic": {
+            "title": "Wszystko zaczyna się od projektu w Plane",
+            "description": "Projektem może być harmonogram produktu, kampania marketingowa czy wprowadzenie nowego samochodu."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Analizy",
+    "page_label": "{workspace} - Analizy",
+    "open_tasks": "Łączna liczba otwartych zadań",
+    "error": "Wystąpił błąd podczas wczytywania danych.",
+    "work_items_closed_in": "Elementy pracy zamknięte w",
+    "selected_projects": "Wybrane projekty",
+    "total_members": "Łączna liczba członków",
+    "total_cycles": "Łączna liczba cykli",
+    "total_modules": "Łączna liczba modułów",
+    "pending_work_items": {
+      "title": "Oczekujące elementy pracy",
+      "empty_state": "Tutaj zobaczysz analizę oczekujących elementów pracy według współpracowników."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Elementy pracy zamknięte w ciągu roku",
+      "empty_state": "Zamykaj elementy pracy, aby zobaczyć analizę w wykresie."
+    },
+    "most_work_items_created": {
+      "title": "Najwięcej utworzonych elementów",
+      "empty_state": "Zostaną wyświetleni współpracownicy oraz liczba utworzonych przez nich elementów."
+    },
+    "most_work_items_closed": {
+      "title": "Najwięcej zamkniętych elementów",
+      "empty_state": "Zostaną wyświetleni współpracownicy oraz liczba zamkniętych przez nich elementów."
+    },
+    "tabs": {
+      "scope_and_demand": "Zakres i zapotrzebowanie",
+      "custom": "Analizy niestandardowe"
+    },
+    "total": "Łączna liczba {entity}",
+    "started_work_items": "Rozpoczęte {entity}",
+    "backlog_work_items": "{entity} w backlogu",
+    "un_started_work_items": "Nierozpoczęte {entity}",
+    "completed_work_items": "Ukończone {entity}",
+    "project_insights": "Wgląd w projekt",
+    "summary_of_projects": "Podsumowanie projektów",
+    "all_projects": "Wszystkie projekty",
+    "trend_on_charts": "Trend na wykresach",
+    "active_projects": "Aktywne projekty",
+    "customized_insights": "Dostosowane informacje",
+    "created_vs_resolved": "Utworzone vs Rozwiązane",
+    "empty_state": {
+      "project_insights": {
+        "title": "Brak danych",
+        "description": "Przypisane do Ciebie elementy pracy, podzielone według stanu, pojawią się tutaj."
+      },
+      "created_vs_resolved": {
+        "title": "Brak danych",
+        "description": "Elementy pracy utworzone i rozwiązane w czasie pojawią się tutaj."
+      },
+      "customized_insights": {
+        "title": "Brak danych",
+        "description": "Przypisane do Ciebie elementy pracy, podzielone według stanu, pojawią się tutaj."
+      },
+      "general": {
+        "title": "Śledź postęp, obciążenie pracą i alokacje. Wykrywaj trendy, usuwaj blokady i pracuj szybciej",
+        "description": "Zobacz zakres vs zapotrzebowanie, oszacowania i rozrost zakresu. Uzyskaj wydajność członków zespołu i zespołów, upewniając się, że projekt jest realizowany na czas.",
+        "primary_button": {
+          "text": "Rozpocznij swój pierwszy projekt",
+          "comic": {
+            "title": "Analityka działa najlepiej z Cyklami + Modułami",
+            "description": "Najpierw umieść swoje elementy pracy w Cyklach, a jeśli można, pogrupuj elementy obejmujące więcej niż jeden cykl w Moduły. Sprawdź oba w lewej nawigacji."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Brak danych",
+        "description": "Analiza postępu cyklu pojawi się tutaj. Dodaj elementy pracy do cykli, aby rozpocząć śledzenie postępów."
+      },
+      "module_progress": {
+        "title": "Brak danych",
+        "description": "Analiza postępu modułu pojawi się tutaj. Dodaj elementy pracy do modułów, aby rozpocząć śledzenie postępów."
+      },
+      "intake_trends": {
+        "title": "Brak danych",
+        "description": "Analiza trendów przyjęć pojawi się tutaj. Dodaj elementy pracy do przyjęć, aby rozpocząć śledzenie trendów."
+      }
+    },
+    "upgrade_to_plan": "Ulepsz do {plan}, aby odblokować {tab}",
+    "workitem_resolved_vs_pending": "Rozwiązane vs oczekujące elementy pracy",
+    "projects_by_status": "Projekty według statusu",
+    "active_users": "Aktywni użytkownicy",
+    "intake_trends": "Trendy przyjęć"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Projekt} few {Projekty} other {Projektów}}",
+    "create": {
+      "label": "Dodaj projekt"
+    },
+    "network": {
+      "label": "Sieć",
+      "private": {
+        "title": "Prywatny",
+        "description": "Dostęp tylko na zaproszenie"
+      },
+      "public": {
+        "title": "Publiczny",
+        "description": "Każdy w przestrzeni, poza gośćmi, może dołączyć"
+      }
+    },
+    "error": {
+      "permission": "Nie masz uprawnień do wykonania tej akcji.",
+      "cycle_delete": "Nie udało się usunąć cyklu",
+      "module_delete": "Nie udało się usunąć modułu",
+      "issue_delete": "Nie udało się usunąć elementu pracy"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Nierozpoczęty",
+      "started": "Rozpoczęty",
+      "completed": "Ukończony",
+      "cancelled": "Anulowany"
+    },
+    "sort": {
+      "manual": "Ręcznie",
+      "name": "Nazwa",
+      "created_at": "Data utworzenia",
+      "members_length": "Liczba członków"
+    },
+    "scope": {
+      "my_projects": "Moje projekty",
+      "archived_projects": "Zarchiwizowane"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# miesiąc} few{# miesiące} other{# miesięcy}}",
+      "days_count": "{days, plural, one{# dzień} other{# dni}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Brak aktywnych projektów",
+        "description": "Projekt to główny cel. Zawiera zadania, cykle i moduły. Utwórz nowy lub poszukaj zarchiwizowanych.",
+        "primary_button": {
+          "text": "Rozpocznij pierwszy projekt",
+          "comic": {
+            "title": "Wszystko zaczyna się od projektu w Plane",
+            "description": "Projekt może dotyczyć planu produktu, kampanii marketingowej lub uruchomienia nowego samochodu."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Brak projektów",
+        "description": "Aby tworzyć elementy pracy, musisz utworzyć lub dołączyć do projektu.",
+        "primary_button": {
+          "text": "Rozpocznij pierwszy projekt",
+          "comic": {
+            "title": "Wszystko zaczyna się od projektu w Plane",
+            "description": "Projekt może dotyczyć planu produktu, kampanii marketingowej lub uruchomienia nowego samochodu."
+          }
+        }
+      },
+      "filter": {
+        "title": "Brak pasujących projektów",
+        "description": "Nie znaleziono projektów spełniających kryteria.\nUtwórz nowy."
+      },
+      "search": {
+        "description": "Nie znaleziono projektów spełniających kryteria.\nUtwórz nowy."
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Dodaj widok",
+    "empty_state": {
+      "all-issues": {
+        "title": "Brak elementów pracy w projekcie",
+        "description": "Utwórz pierwszy element i śledź postępy!",
+        "primary_button": {
+          "text": "Utwórz element pracy"
+        }
+      },
+      "assigned": {
+        "title": "Brak przypisanych elementów",
+        "description": "Tutaj zobaczysz elementy przypisane Tobie.",
+        "primary_button": {
+          "text": "Utwórz element pracy"
+        }
+      },
+      "created": {
+        "title": "Brak utworzonych elementów",
+        "description": "Tutaj pojawiają się elementy, które utworzyłeś(aś).",
+        "primary_button": {
+          "text": "Utwórz element pracy"
+        }
+      },
+      "subscribed": {
+        "title": "Brak subskrybowanych elementów",
+        "description": "Subskrybuj elementy, które Cię interesują."
+      },
+      "custom-view": {
+        "title": "Brak pasujących elementów",
+        "description": "Wyświetlane są elementy spełniające filtr."
+      }
+    },
+    "delete_view": {
+      "title": "Czy na pewno chcesz usunąć ten widok?",
+      "content": "Jeśli potwierdzisz, wszystkie opcje sortowania, filtrowania i wyświetlania + układ, który wybrałeś dla tego widoku, zostaną trwale usunięte bez możliwości przywrócenia."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Utwórz szkic elementu pracy",
+    "empty_state": {
+      "title": "Robocze elementy pracy i komentarze pojawią się tutaj.",
+      "description": "Rozpocznij tworzenie elementu pracy i zostaw go w formie szkicu.",
+      "primary_button": {
+        "text": "Utwórz pierwszy szkic"
+      }
+    },
+    "delete_modal": {
+      "title": "Usuń szkic",
+      "description": "Czy na pewno chcesz usunąć ten szkic? Ta akcja jest nieodwracalna."
+    },
+    "toasts": {
+      "created": {
+        "success": "Szkic utworzono",
+        "error": "Nie udało się utworzyć"
+      },
+      "deleted": {
+        "success": "Szkic usunięto"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Napisz notatkę, dokument lub pełną bazę wiedzy. Niech Galileo, asystent AI Plane, pomoże Ci zacząć",
+        "description": "Strony to przestrzeń do przechowywania myśli w Plane. Sporządzaj notatki ze spotkań, formatuj je łatwo, osadzaj elementy pracy, układaj je za pomocą biblioteki komponentów i trzymaj je wszystkie w kontekście projektu. Aby szybko wykonać dowolny dokument, wywołaj Galileo, AI Plane, za pomocą skrótu lub kliknięcia przycisku.",
+        "primary_button": {
+          "text": "Utwórz swoją pierwszą stronę"
+        }
+      },
+      "private": {
+        "title": "Brak prywatnych stron",
+        "description": "Zachowaj swoje prywatne myśli tutaj. Kiedy będziesz gotowy do udostępnienia, zespół jest tylko o kliknięcie dalej.",
+        "primary_button": {
+          "text": "Utwórz swoją pierwszą stronę"
+        }
+      },
+      "public": {
+        "title": "Brak stron obszaru roboczego",
+        "description": "Zobacz strony udostępniane wszystkim w Twojej przestrzeni roboczej właśnie tutaj.",
+        "primary_button": {
+          "text": "Utwórz swoją pierwszą stronę"
+        }
+      },
+      "archived": {
+        "title": "Brak zarchiwizowanych stron",
+        "description": "Archiwizuj strony, których nie masz na radarze. Dostęp do nich tutaj, gdy potrzeba."
+      },
+      "shared": {
+        "title": "Brak udostępnionych stron",
+        "description": "Strony, które inni Ci udostępnili, pojawią się tutaj."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Brak aktywnych cykli",
+        "description": "Cykle Twoich projektów, które obejmują dowolny okres zawierający dzisiejszą datę w swoim zakresie. Znajdź tutaj postęp i szczegóły wszystkich aktywnych cykli."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Importuj członków z CSV",
+      "description": "Prześlij CSV z kolumnami: Email, Display Name, First Name, Last Name, Role (5, 15 lub 20)",
+      "dropzone": {
+        "active": "Upuść plik CSV tutaj",
+        "inactive": "Przeciągnij i upuść lub kliknij, aby przesłać",
+        "file_type": "Obsługiwane są tylko pliki .csv"
+      },
+      "buttons": {
+        "cancel": "Anuluj",
+        "import": "Importuj",
+        "try_again": "Spróbuj ponownie",
+        "close": "Zamknij",
+        "done": "Gotowe"
+      },
+      "progress": {
+        "uploading": "Przesyłanie...",
+        "importing": "Importowanie..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Import nie powiódł się",
+          "complete": "Import zakończony"
+        },
+        "message": {
+          "seat_limit": "Nie można zaimportować członków z powodu ograniczeń liczby miejsc.",
+          "success": "Pomyślnie dodano {count} członk{plural} do przestrzeni roboczej.",
+          "no_imports": "Nie zaimportowano żadnych członków z pliku CSV."
+        },
+        "stats": {
+          "successful": "Pomyślne",
+          "failed": "Nieudane"
+        },
+        "download_errors": "Pobierz błędy"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Nieprawidłowy plik",
+          "message": "Obsługiwane są tylko pliki CSV."
+        },
+        "import_failed": {
+          "title": "Import nie powiódł się",
+          "message": "Coś poszło nie tak."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/accessibility.json b/packages/i18n/src/locales/pt-BR/accessibility.json
new file mode 100644
index 0000000..de90eeb
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo do espaço de trabalho",
+      "open_workspace_switcher": "Abrir seletor de espaço de trabalho",
+      "open_user_menu": "Abrir menu do usuário",
+      "open_command_palette": "Abrir paleta de comandos",
+      "open_extended_sidebar": "Abrir barra lateral estendida",
+      "close_extended_sidebar": "Fechar barra lateral estendida",
+      "create_favorites_folder": "Criar pasta de favoritos",
+      "open_folder": "Abrir pasta",
+      "close_folder": "Fechar pasta",
+      "open_favorites_menu": "Abrir menu de favoritos",
+      "close_favorites_menu": "Fechar menu de favoritos",
+      "enter_folder_name": "Digite o nome da pasta",
+      "create_new_project": "Criar novo projeto",
+      "open_projects_menu": "Abrir menu de projetos",
+      "close_projects_menu": "Fechar menu de projetos",
+      "toggle_quick_actions_menu": "Alternar menu de ações rápidas",
+      "open_project_menu": "Abrir menu do projeto",
+      "close_project_menu": "Fechar menu do projeto",
+      "collapse_sidebar": "Recolher barra lateral",
+      "expand_sidebar": "Expandir barra lateral",
+      "edition_badge": "Abrir modal de planos pagos"
+    },
+    "auth_forms": {
+      "clear_email": "Limpar e-mail",
+      "show_password": "Mostrar senha",
+      "hide_password": "Ocultar senha",
+      "close_alert": "Fechar alerta",
+      "close_popover": "Fechar popover"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/auth.json b/packages/i18n/src/locales/pt-BR/auth.json
new file mode 100644
index 0000000..eff421c
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identidade",
+    "description": "Configure seu domínio para acessar recursos de segurança, incluindo single sign-on.",
+    "domain_management": {
+      "header": "Gerenciamento de domínios",
+      "verified_domains": {
+        "header": "Domínios verificados",
+        "description": "Verifique a propriedade de um domínio de e-mail para habilitar o single sign-on.",
+        "button_text": "Adicionar domínio",
+        "list": {
+          "domain_name": "Nome do domínio",
+          "status": "Status",
+          "status_verified": "Verificado",
+          "status_failed": "Falhou",
+          "status_pending": "Pendente"
+        },
+        "add_domain": {
+          "title": "Adicionar domínio",
+          "description": "Adicione seu domínio para configurar SSO e verificá-lo.",
+          "form": {
+            "domain_label": "Domínio",
+            "domain_placeholder": "plane.so",
+            "domain_required": "O domínio é obrigatório",
+            "domain_invalid": "Digite um nome de domínio válido (ex: plane.so)"
+          },
+          "primary_button_text": "Adicionar domínio",
+          "primary_button_loading_text": "Adicionando",
+          "toast": {
+            "success_title": "Sucesso!",
+            "success_message": "Domínio adicionado com sucesso. Por favor, verifique-o adicionando o registro DNS TXT.",
+            "error_message": "Falha ao adicionar domínio. Por favor, tente novamente."
+          }
+        },
+        "verify_domain": {
+          "title": "Verifique seu domínio",
+          "description": "Siga estas etapas para verificar seu domínio.",
+          "instructions": {
+            "label": "Instruções",
+            "step_1": "Vá para as configurações DNS do seu host de domínio.",
+            "step_2": {
+              "part_1": "Crie um",
+              "part_2": "registro TXT",
+              "part_3": "e cole o valor completo do registro fornecido abaixo."
+            },
+            "step_3": "Esta atualização geralmente leva alguns minutos, mas pode levar até 72 horas para ser concluída.",
+            "step_4": "Clique em \"Verificar domínio\" para confirmar assim que seu registro DNS for atualizado."
+          },
+          "verification_code_label": "Valor do registro TXT",
+          "verification_code_description": "Adicione este registro às suas configurações DNS",
+          "domain_label": "Domínio",
+          "primary_button_text": "Verificar domínio",
+          "primary_button_loading_text": "Verificando",
+          "secondary_button_text": "Vou fazer isso mais tarde",
+          "toast": {
+            "success_title": "Sucesso!",
+            "success_message": "Domínio verificado com sucesso.",
+            "error_message": "Falha ao verificar domínio. Por favor, tente novamente."
+          }
+        },
+        "delete_domain": {
+          "title": "Excluir domínio",
+          "description": {
+            "prefix": "Tem certeza de que deseja excluir",
+            "suffix": "? Esta ação não pode ser desfeita."
+          },
+          "primary_button_text": "Excluir",
+          "primary_button_loading_text": "Excluindo",
+          "secondary_button_text": "Cancelar",
+          "toast": {
+            "success_title": "Sucesso!",
+            "success_message": "Domínio excluído com sucesso.",
+            "error_message": "Falha ao excluir domínio. Por favor, tente novamente."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Single sign-on",
+      "disabled_message": "Adicione um domínio verificado para configurar SSO",
+      "configure": {
+        "create": "Configurar",
+        "update": "Editar"
+      },
+      "switch_alert_modal": {
+        "title": "Alternar método SSO para {newProviderShortName}?",
+        "content": "Você está prestes a habilitar {newProviderLongName} ({newProviderShortName}). Esta ação desabilitará automaticamente {activeProviderLongName} ({activeProviderShortName}). Usuários que tentarem fazer login via {activeProviderShortName} não poderão mais acessar a plataforma até que alternem para o novo método. Tem certeza de que deseja continuar?",
+        "primary_button_text": "Alternar",
+        "primary_button_text_loading": "Alternando",
+        "secondary_button_text": "Cancelar"
+      },
+      "form_section": {
+        "title": "Detalhes fornecidos pelo IdP para {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Salvando",
+        "save_changes": "Salvar alterações",
+        "configure_only": "Apenas configurar",
+        "configure_and_enable": "Configurar e habilitar",
+        "default": "Salvar"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} detalhes fornecidos para seu IdP",
+        "button_text": "Obter detalhes de configuração"
+      },
+      "saml": {
+        "header": "Habilitar SAML",
+        "description": "Configure seu provedor de identidade SAML para habilitar single sign-on.",
+        "configure": {
+          "title": "Habilitar SAML",
+          "description": "Verifique a propriedade de um domínio de e-mail para acessar recursos de segurança, incluindo single sign-on.",
+          "toast": {
+            "success_title": "Sucesso!",
+            "create_success_message": "Provedor SAML criado com sucesso.",
+            "update_success_message": "Provedor SAML atualizado com sucesso.",
+            "error_title": "Erro!",
+            "error_message": "Falha ao salvar provedor SAML. Por favor, tente novamente."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Detalhes da web",
+            "entity_id": {
+              "label": "ID da entidade | Público | Informações de metadados",
+              "description": "Geraremos esta parte dos metadados que identifica este aplicativo Plane como um serviço autorizado em seu IdP."
+            },
+            "callback_url": {
+              "label": "URL de login único",
+              "description": "Geraremos isso para você. Adicione isso no campo URL de redirecionamento de login do seu IdP."
+            },
+            "logout_url": {
+              "label": "URL de logout único",
+              "description": "Geraremos isso para você. Adicione isso no campo URL de redirecionamento de logout único do seu IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Detalhes móveis",
+            "entity_id": {
+              "label": "ID da entidade | Público | Informações de metadados",
+              "description": "Geraremos esta parte dos metadados que identifica este aplicativo Plane como um serviço autorizado em seu IdP."
+            },
+            "callback_url": {
+              "label": "URL de login único",
+              "description": "Geraremos isso para você. Adicione isso no campo URL de redirecionamento de login do seu IdP."
+            },
+            "logout_url": {
+              "label": "URL de logout único",
+              "description": "Geraremos isso para você. Adicione isso no campo URL de redirecionamento de logout do seu IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Detalhes de mapeamento",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Habilitar OIDC",
+        "description": "Configure seu provedor de identidade OIDC para habilitar single sign-on.",
+        "configure": {
+          "title": "Habilitar OIDC",
+          "description": "Verifique a propriedade de um domínio de e-mail para acessar recursos de segurança, incluindo single sign-on.",
+          "toast": {
+            "success_title": "Sucesso!",
+            "create_success_message": "Provedor OIDC criado com sucesso.",
+            "update_success_message": "Provedor OIDC atualizado com sucesso.",
+            "error_title": "Erro!",
+            "error_message": "Falha ao salvar provedor OIDC. Por favor, tente novamente."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Detalhes da web",
+            "origin_url": {
+              "label": "URL de origem",
+              "description": "Geraremos isso para este aplicativo Plane. Adicione isso como uma origem confiável no campo correspondente do seu IdP."
+            },
+            "callback_url": {
+              "label": "URL de redirecionamento",
+              "description": "Geraremos isso para você. Adicione isso no campo URL de redirecionamento de login do seu IdP."
+            },
+            "logout_url": {
+              "label": "URL de logout",
+              "description": "Geraremos isso para você. Adicione isso no campo URL de redirecionamento de logout do seu IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Detalhes móveis",
+            "origin_url": {
+              "label": "URL de origem",
+              "description": "Geraremos isso para este aplicativo Plane. Adicione isso como uma origem confiável no campo correspondente do seu IdP."
+            },
+            "callback_url": {
+              "label": "URL de redirecionamento",
+              "description": "Geraremos isso para você. Adicione isso no campo URL de redirecionamento de login do seu IdP."
+            },
+            "logout_url": {
+              "label": "URL de logout",
+              "description": "Geraremos isso para você. Adicione isso no campo URL de redirecionamento de logout do seu IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "Email",
+        "placeholder": "nome@empresa.com",
+        "errors": {
+          "required": "Email é obrigatório",
+          "invalid": "Email inválido"
+        }
+      },
+      "password": {
+        "label": "Senha",
+        "set_password": "Definir senha",
+        "placeholder": "Digite a senha",
+        "confirm_password": {
+          "label": "Confirmar senha",
+          "placeholder": "Confirmar senha"
+        },
+        "current_password": {
+          "label": "Senha atual"
+        },
+        "new_password": {
+          "label": "Nova senha",
+          "placeholder": "Digite a nova senha"
+        },
+        "change_password": {
+          "label": {
+            "default": "Alterar senha",
+            "submitting": "Alterando senha"
+          }
+        },
+        "errors": {
+          "match": "As senhas não coincidem",
+          "empty": "Por favor digite sua senha",
+          "length": "A senha deve ter mais de 8 caracteres",
+          "strength": {
+            "weak": "Senha fraca",
+            "strong": "Senha forte"
+          }
+        },
+        "submit": "Definir senha",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Sucesso!",
+              "message": "Senha alterada com sucesso."
+            },
+            "error": {
+              "title": "Erro!",
+              "message": "Algo deu errado. Por favor, tente novamente."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Código único",
+        "placeholder": "123456",
+        "paste_code": "Cole o código enviado para seu email",
+        "requesting_new_code": "Solicitando novo código",
+        "sending_code": "Enviando código"
+      },
+      "already_have_an_account": "Já tem uma conta?",
+      "login": "Login",
+      "create_account": "Criar conta",
+      "new_to_plane": "Novo no Plane?",
+      "back_to_sign_in": "Voltar ao login",
+      "resend_in": "Reenviar em {seconds} segundos",
+      "sign_in_with_unique_code": "Login com código único",
+      "forgot_password": "Esqueceu sua senha?",
+      "username": {
+        "label": "Nome de usuário",
+        "placeholder": "Digite seu nome de usuário"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Crie uma conta para começar a gerenciar trabalho com sua equipe.",
+        "step": {
+          "email": {
+            "header": "Cadastro",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Cadastro",
+            "sub_header": "Cadastre-se usando email e senha."
+          },
+          "unique_code": {
+            "header": "Cadastro",
+            "sub_header": "Cadastre-se usando um código único enviado para o email acima."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Tente definir uma senha forte para continuar"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Faça login para começar a gerenciar trabalho com sua equipe.",
+        "step": {
+          "email": {
+            "header": "Login ou cadastro",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Login ou cadastro",
+            "sub_header": "Use seu email e senha para fazer login."
+          },
+          "unique_code": {
+            "header": "Login ou cadastro",
+            "sub_header": "Faça login usando um código único enviado para o email acima."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Redefinir sua senha",
+      "description": "Digite o email verificado da sua conta e enviaremos um link para redefinir sua senha.",
+      "email_sent": "Enviamos o link de redefinição para seu email",
+      "send_reset_link": "Enviar link de redefinição",
+      "errors": {
+        "smtp_not_enabled": "Vemos que seu administrador não habilitou SMTP, não poderemos enviar um link de redefinição de senha"
+      },
+      "toast": {
+        "success": {
+          "title": "Email enviado",
+          "message": "Verifique sua caixa de entrada para um link de redefinição de senha. Se não aparecer em alguns minutos, verifique sua pasta de spam."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Algo deu errado. Por favor, tente novamente."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Definir nova senha",
+      "description": "Proteja sua conta com uma senha forte"
+    },
+    "set_password": {
+      "title": "Proteja sua conta",
+      "description": "Definir uma senha ajuda você a fazer login com segurança"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Erro!",
+          "message": "Falha ao sair. Por favor, tente novamente."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Continuar com {ldapProviderName}",
+        "sub_header": "Digite suas credenciais {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/automation.json b/packages/i18n/src/locales/pt-BR/automation.json
new file mode 100644
index 0000000..3eab73f
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Automações personalizadas",
+      "create_automation": "Criar automação"
+    },
+    "scope": {
+      "label": "Escopo",
+      "run_on": "Executar em"
+    },
+    "trigger": {
+      "label": "Gatilho",
+      "add_trigger": "Adicionar gatilho",
+      "sidebar_header": "Configuração do gatilho",
+      "input_label": "Qual é o gatilho para esta automação?",
+      "input_placeholder": "Selecione uma opção",
+      "section_plane_events": "Eventos do Plane",
+      "section_time_based": "Baseado em tempo",
+      "fixed_schedule": "Agendamento fixo",
+      "schedule": {
+        "frequency": "Frequência",
+        "select_day": "Selecionar dia",
+        "day_of_month": "Dia do mês",
+        "monthly_every": "Todo",
+        "monthly_day_aria": "Dia {day}",
+        "time": "Horário",
+        "hour": "Hora",
+        "minute": "Minuto",
+        "hour_suffix": "h",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Fuso horário",
+        "timezone_placeholder": "Selecionar um fuso horário",
+        "frequency_daily": "Diário",
+        "frequency_weekly": "Semanal",
+        "frequency_monthly": "Mensal",
+        "on": "Em",
+        "validation_weekly_day_required": "Selecione pelo menos um dia da semana.",
+        "validation_monthly_date_required": "Selecione um dia do mês.",
+        "main_content_schedule_summary_daily": "Todo dia às {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Toda semana em {days} às {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Todo mês no dia {day} às {time} ({timezone}).",
+        "schedule_mode": "Modo de agendamento",
+        "schedule_mode_fixed": "Fixo",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Inserir expressão Cron",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Expressão cron inválida.",
+        "cron_preview": "Esta expressão Cron executa \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Voltar",
+        "next": "Adicionar ação"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Você não pode alterar o tipo do gatilho após a criação"
+      }
+    },
+    "condition": {
+      "label": "Condição",
+      "add_condition": "Adicionar condição",
+      "adding_condition": "Adicionando condição"
+    },
+    "action": {
+      "label": "Ação",
+      "add_action": "Adicionar ação",
+      "sidebar_header": "Ações",
+      "input_label": "O que a automação faz?",
+      "input_placeholder": "Selecione uma opção",
+      "handler_name": {
+        "add_comment": "Adicionar comentário",
+        "change_property": "Alterar propriedade",
+        "run_script": "Executar Script"
+      },
+      "configuration": {
+        "label": "Configuração",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Selecione uma propriedade",
+            "change_type": "Selecionar",
+            "property_value_select": "{count, plural, one{Selecionar valor} other{Selecionar valores}}",
+            "property_value_select_date": "Selecionar data"
+          },
+          "validation": {
+            "property_name_required": "Nome da propriedade é obrigatório",
+            "change_type_required": "Tipo de alteração é obrigatório",
+            "property_value_required": "Valor da propriedade é obrigatório"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Adicionar comentário"
+      },
+      "run_script_block": {
+        "title": "Executar script"
+      },
+      "change_property_block": {
+        "title": "Alterar propriedade"
+      },
+      "validation": {
+        "delete_only_action": "Desabilite a automação antes de excluir sua única ação."
+      }
+    },
+    "conjunctions": {
+      "and": "E",
+      "or": "Ou",
+      "if": "Se",
+      "then": "Então"
+    },
+    "enable": {
+      "alert": "Clique em 'Habilitar' quando sua automação estiver completa. Uma vez habilitada, a automação estará pronta para executar.",
+      "validation": {
+        "required": "A automação deve ter um gatilho e pelo menos uma ação para ser habilitada."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "A automação deve ser desabilitada antes de excluí-la."
+      }
+    },
+    "table": {
+      "title": "Título da automação",
+      "scope": "Escopo",
+      "projects": "Projetos",
+      "last_run_on": "Última execução em",
+      "created_on": "Criado em",
+      "last_updated_on": "Última atualização em",
+      "last_run_status": "Status da última execução",
+      "average_duration": "Duração média",
+      "owner": "Proprietário",
+      "executions": "Execuções"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Criar automação",
+        "update": "Atualizar automação"
+      },
+      "title": {
+        "placeholder": "Nomeie sua automação.",
+        "required_error": "Título é obrigatório"
+      },
+      "description": {
+        "placeholder": "Descreva sua automação."
+      },
+      "submit_button": {
+        "create": "Criar automação",
+        "update": "Atualizar automação"
+      }
+    },
+    "delete_modal": {
+      "heading": "Excluir automação"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Mostrar falhas",
+        "all": "Todos",
+        "only_activity": "Apenas atividade",
+        "only_run_history": "Apenas histórico de execução"
+      },
+      "run_history": {
+        "initiator": "Iniciador"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Sucesso!",
+          "message": "Automação criada com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Falha na criação da automação."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Sucesso!",
+          "message": "Automação atualizada com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Falha na atualização da automação."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Sucesso!",
+          "message": "Automação habilitada com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Falha ao habilitar a automação."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Sucesso!",
+          "message": "Automação desabilitada com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Falha ao desabilitar a automação."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automação excluída",
+          "message": "{name}, a automação, foi excluída do seu projeto."
+        },
+        "error": {
+          "title": "Não foi possível excluir essa automação desta vez.",
+          "message": "Tente excluir novamente ou volte mais tarde. Se não conseguir excluir, entre em contato conosco."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Erro!",
+            "message": "Falha ao criar ação. Tente novamente!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Erro!",
+            "message": "Falha ao atualizar ação. Tente novamente!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Ainda não há automações para mostrar.",
+        "description": "As automações ajudam você a eliminar tarefas repetitivas definindo gatilhos, condições e ações. Crie uma para economizar tempo e manter o trabalho fluindo sem esforço."
+      },
+      "upgrade": {
+        "title": "Automações",
+        "description": "Automações são uma forma de automatizar tarefas no seu projeto.",
+        "sub_description": "Recupere 80% do seu tempo administrativo quando usar Automações."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Selecione os projetos nos quais esta automação será executada",
+        "all_projects": {
+          "label": "Todos os projetos",
+          "description": "A automação será executada para todos os projetos do espaço de trabalho."
+        },
+        "select_projects": {
+          "label": "Selecionar projetos",
+          "description": "A automação será executada para os projetos selecionados do espaço de trabalho.",
+          "placeholder": "Selecionar projetos"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automações",
+        "title": "Automações",
+        "description": "Padronize processos em todo o seu espaço de trabalho com automações globais."
+      },
+      "table": {
+        "scope": {
+          "global": "Global",
+          "project": {
+            "label": "Projeto",
+            "multiple": "Múltiplos",
+            "all": "Todos"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/common.json b/packages/i18n/src/locales/pt-BR/common.json
new file mode 100644
index 0000000..565e85d
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Estamos trabalhando nisso. Se você precisar de assistência imediata,",
+    "reach_out_to_us": "entre em contato conosco",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Caso contrário, tente atualizar a página ocasionalmente ou visite nossa",
+    "status_page": "página de status"
+  },
+  "submit": "Enviar",
+  "cancel": "Cancelar",
+  "loading": "Carregando",
+  "error": "Erro",
+  "success": "Sucesso",
+  "warning": "Aviso",
+  "info": "Informação",
+  "close": "Fechar",
+  "yes": "Sim",
+  "no": "Não",
+  "ok": "OK",
+  "name": "Nome",
+  "unknown_user": "Usuário desconhecido",
+  "description": "Descrição",
+  "search": "Pesquisar",
+  "add_member": "Adicionar membro",
+  "adding_members": "Adicionando membros",
+  "remove_member": "Remover membro",
+  "add_members": "Adicionar membros",
+  "adding_member": "Adicionando membro",
+  "remove_members": "Remover membros",
+  "add": "Adicionar",
+  "adding": "Adicionando",
+  "remove": "Remover",
+  "add_new": "Adicionar novo",
+  "remove_selected": "Remover selecionado",
+  "first_name": "Primeiro nome",
+  "last_name": "Sobrenome",
+  "email": "E-mail",
+  "display_name": "Nome de exibição",
+  "role": "Cargo",
+  "timezone": "Fuso horário",
+  "avatar": "Avatar",
+  "cover_image": "Imagem de capa",
+  "password": "Senha",
+  "change_cover": "Alterar capa",
+  "language": "Idioma",
+  "saving": "Salvando",
+  "save_changes": "Salvar alterações",
+  "deactivate_account": "Desativar conta",
+  "deactivate_account_description": "Ao desativar uma conta, todos os dados e recursos dessa conta serão removidos permanentemente e não poderão ser recuperados.",
+  "profile_settings": "Configurações de perfil",
+  "your_account": "Sua conta",
+  "security": "Segurança",
+  "activity": "Atividade",
+  "activity_empty_state": {
+    "no_activity": "Nenhuma atividade ainda",
+    "no_transitions": "Nenhuma transição ainda",
+    "no_comments": "Nenhum comentário ainda",
+    "no_worklogs": "Nenhum registro de trabalho ainda",
+    "no_history": "Nenhum histórico ainda"
+  },
+  "preferences": "Preferências",
+  "language_and_time": "Idioma e Hora",
+  "notifications": "Notificações",
+  "workspaces": "Espaços de trabalho",
+  "create_workspace": "Criar espaço de trabalho",
+  "invitations": "Convites",
+  "summary": "Resumo",
+  "assigned": "Atribuído",
+  "created": "Criado",
+  "subscribed": "Inscrito",
+  "you_do_not_have_the_permission_to_access_this_page": "Você não tem permissão para acessar esta página.",
+  "something_went_wrong_please_try_again": "Algo deu errado. Por favor, tente novamente.",
+  "load_more": "Carregar mais",
+  "select_or_customize_your_interface_color_scheme": "Selecione ou personalize o esquema de cores da sua interface.",
+  "timezone_setting": "Configuração atual de fuso horário.",
+  "language_setting": "Escolha o idioma usado na interface do usuário.",
+  "settings_moved_to_preferences": "As configurações de Fuso horário e Idioma foram movidas para as preferências.",
+  "go_to_preferences": "Ir para preferências",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Selecione o estilo de movimento do cursor que parece certo para você.",
+  "theme": "Tema",
+  "smooth_cursor": "Cursor Suave",
+  "system_preference": "Preferência do sistema",
+  "light": "Claro",
+  "dark": "Escuro",
+  "light_contrast": "Alto contraste claro",
+  "dark_contrast": "Alto contraste escuro",
+  "custom": "Personalizado",
+  "select_your_theme": "Selecione seu tema",
+  "customize_your_theme": "Personalize seu tema",
+  "background_color": "Cor de fundo",
+  "text_color": "Cor do texto",
+  "primary_color": "Cor primária (Tema)",
+  "sidebar_background_color": "Cor de fundo da barra lateral",
+  "sidebar_text_color": "Cor do texto da barra lateral",
+  "set_theme": "Definir tema",
+  "enter_a_valid_hex_code_of_6_characters": "Insira um código hexadecimal válido de 6 caracteres",
+  "background_color_is_required": "A cor de fundo é obrigatória",
+  "text_color_is_required": "A cor do texto é obrigatória",
+  "primary_color_is_required": "A cor primária é obrigatória",
+  "sidebar_background_color_is_required": "A cor de fundo da barra lateral é obrigatória",
+  "sidebar_text_color_is_required": "A cor do texto da barra lateral é obrigatória",
+  "updating_theme": "Atualizando tema",
+  "theme_updated_successfully": "Tema atualizado com sucesso",
+  "failed_to_update_the_theme": "Falha ao atualizar o tema",
+  "email_notifications": "Notificações por e-mail",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Mantenha-se informado sobre os itens de trabalho aos quais você está inscrito. Ative isso para ser notificado.",
+  "email_notification_setting_updated_successfully": "Configuração de notificação por e-mail atualizada com sucesso",
+  "failed_to_update_email_notification_setting": "Falha ao atualizar a configuração de notificação por e-mail",
+  "notify_me_when": "Notifique-me quando",
+  "property_changes": "Alterações de propriedade",
+  "property_changes_description": "Notifique-me quando as propriedades dos itens de trabalho, como responsáveis, prioridade, estimativas ou qualquer outra coisa, mudarem.",
+  "state_change": "Mudança de estado",
+  "state_change_description": "Notifique-me quando os itens de trabalho mudarem para um estado diferente",
+  "issue_completed": "Item de trabalho concluído",
+  "issue_completed_description": "Notifique-me apenas quando um item de trabalho for concluído",
+  "comments": "Comentários",
+  "comments_description": "Notifique-me quando alguém deixar um comentário no item de trabalho",
+  "mentions": "Menções",
+  "mentions_description": "Notifique-me apenas quando alguém me mencionar nos comentários ou na descrição",
+  "old_password": "Senha antiga",
+  "general_settings": "Configurações gerais",
+  "sign_out": "Sair",
+  "signing_out": "Saindo",
+  "active_cycles": "Ciclos ativos",
+  "active_cycles_description": "Monitore os ciclos entre os projetos, rastreie os itens de trabalho de alta prioridade e amplie os ciclos que precisam de atenção.",
+  "on_demand_snapshots_of_all_your_cycles": "Snapshots sob demanda de todos os seus ciclos",
+  "upgrade": "Upgrade",
+  "10000_feet_view": "Visão geral de todos os ciclos ativos.",
+  "10000_feet_view_description": "Reduza o zoom para ver os ciclos em execução em todos os seus projetos de uma só vez, em vez de ir de ciclo para ciclo em cada projeto.",
+  "get_snapshot_of_each_active_cycle": "Obtenha um snapshot de cada ciclo ativo.",
+  "get_snapshot_of_each_active_cycle_description": "Rastreie as métricas de alto nível para todos os ciclos ativos, veja seu estado de progresso e tenha uma noção do escopo em relação aos prazos.",
+  "compare_burndowns": "Compare burndowns.",
+  "compare_burndowns_description": "Monitore o desempenho de cada uma de suas equipes com uma olhada no relatório de burndown de cada ciclo.",
+  "quickly_see_make_or_break_issues": "Veja rapidamente os itens de trabalho decisivos.",
+  "quickly_see_make_or_break_issues_description": "Visualize os itens de trabalho de alta prioridade para cada ciclo em relação aos prazos. Veja todos eles por ciclo com um clique.",
+  "zoom_into_cycles_that_need_attention": "Amplie os ciclos que precisam de atenção.",
+  "zoom_into_cycles_that_need_attention_description": "Investigue o estado de qualquer ciclo que não esteja em conformidade com as expectativas com um clique.",
+  "stay_ahead_of_blockers": "Fique à frente dos bloqueios.",
+  "stay_ahead_of_blockers_description": "Identifique desafios de um projeto para outro e veja as dependências entre ciclos que não são óbvias em nenhuma outra visualização.",
+  "analytics": "Análises",
+  "workspace_invites": "Convites para o espaço de trabalho",
+  "enter_god_mode": "Entrar no God Mode",
+  "workspace_logo": "Logo do espaço de trabalho",
+  "new_issue": "Novo item de trabalho",
+  "your_work": "Seu trabalho",
+  "drafts": "Rascunhos",
+  "projects": "Projetos",
+  "views": "Visualizações",
+  "archives": "Arquivos",
+  "settings": "Configurações",
+  "failed_to_move_favorite": "Falha ao mover o favorito",
+  "favorites": "Favoritos",
+  "no_favorites_yet": "Nenhum favorito ainda",
+  "create_folder": "Criar pasta",
+  "new_folder": "Nova pasta",
+  "favorite_updated_successfully": "Favorito atualizado com sucesso",
+  "favorite_created_successfully": "Favorito criado com sucesso",
+  "folder_already_exists": "A pasta já existe",
+  "folder_name_cannot_be_empty": "O nome da pasta não pode estar vazio",
+  "something_went_wrong": "Algo deu errado",
+  "failed_to_reorder_favorite": "Falha ao reordenar o favorito",
+  "favorite_removed_successfully": "Favorito removido com sucesso",
+  "failed_to_create_favorite": "Falha ao criar favorito",
+  "failed_to_rename_favorite": "Falha ao renomear favorito",
+  "project_link_copied_to_clipboard": "Link do projeto copiado para a área de transferência",
+  "link_copied": "Link copiado",
+  "add_project": "Adicionar projeto",
+  "create_project": "Criar projeto",
+  "failed_to_remove_project_from_favorites": "Não foi possível remover o projeto dos favoritos. Por favor, tente novamente.",
+  "project_created_successfully": "Projeto criado com sucesso",
+  "project_created_successfully_description": "Projeto criado com sucesso. Agora você pode começar a adicionar itens de trabalho a ele.",
+  "project_name_already_taken": "O nome do projeto já está em uso.",
+  "project_name_cannot_contain_special_characters": "O nome do projeto não pode conter caracteres especiais.",
+  "project_identifier_already_taken": "O identificador do projeto já está em uso.",
+  "project_cover_image_alt": "Imagem de capa do projeto",
+  "name_is_required": "Nome é obrigatório",
+  "title_should_be_less_than_255_characters": "O título deve ter menos de 255 caracteres",
+  "project_name": "Nome do projeto",
+  "project_id_must_be_at_least_1_character": "O ID do projeto deve ter pelo menos 1 caractere",
+  "project_id_must_be_at_most_5_characters": "O ID do projeto deve ter no máximo 5 caracteres",
+  "project_id": "ID do projeto",
+  "project_id_tooltip_content": "Ajuda você a identificar itens de trabalho no projeto de forma exclusiva. Máximo de 50 caracteres.",
+  "description_placeholder": "Descrição",
+  "only_alphanumeric_non_latin_characters_allowed": "Apenas caracteres alfanuméricos e não latinos são permitidos.",
+  "project_id_is_required": "O ID do projeto é obrigatório",
+  "project_id_allowed_char": "Apenas caracteres alfanuméricos e não latinos são permitidos.",
+  "project_id_min_char": "O ID do projeto deve ter pelo menos 1 caractere",
+  "project_id_max_char": "O ID do projeto deve ter no máximo {max} caracteres",
+  "project_description_placeholder": "Insira a descrição do projeto",
+  "select_network": "Selecione a rede",
+  "lead": "Líder",
+  "date_range": "Intervalo de datas",
+  "private": "Privado",
+  "public": "Público",
+  "accessible_only_by_invite": "Acessível apenas por convite",
+  "anyone_in_the_workspace_except_guests_can_join": "Qualquer pessoa no espaço de trabalho, exceto convidados, pode participar",
+  "creating": "Criando",
+  "creating_project": "Criando projeto",
+  "adding_project_to_favorites": "Adicionando projeto aos favoritos",
+  "project_added_to_favorites": "Projeto adicionado aos favoritos",
+  "couldnt_add_the_project_to_favorites": "Não foi possível adicionar o projeto aos favoritos. Por favor, tente novamente.",
+  "removing_project_from_favorites": "Removendo projeto dos favoritos",
+  "project_removed_from_favorites": "Projeto removido dos favoritos",
+  "couldnt_remove_the_project_from_favorites": "Não foi possível remover o projeto dos favoritos. Por favor, tente novamente.",
+  "add_to_favorites": "Adicionar aos favoritos",
+  "remove_from_favorites": "Remover dos favoritos",
+  "publish_project": "Publicar projeto",
+  "publish": "Publicar",
+  "copy_link": "Copiar link",
+  "leave_project": "Sair do projeto",
+  "join_the_project_to_rearrange": "Participe do projeto para reorganizar",
+  "drag_to_rearrange": "Arraste para reorganizar",
+  "congrats": "Parabéns!",
+  "open_project": "Abrir projeto",
+  "issues": "Itens de trabalho",
+  "cycles": "Ciclos",
+  "modules": "Módulos",
+  "pages": "Páginas",
+  "intake": "Admissão",
+  "renew": "Renovar",
+  "preview": "Visualização",
+  "time_tracking": "Rastreamento de tempo",
+  "work_management": "Gerenciamento de trabalho",
+  "projects_and_issues": "Projetos e itens de trabalho",
+  "projects_and_issues_description": "Ative ou desative estes neste projeto.",
+  "cycles_description": "Defina o tempo de trabalho por projeto e ajuste o período conforme necessário. Um ciclo pode durar 2 semanas, o próximo 1 semana.",
+  "modules_description": "Organize o trabalho em subprojetos com líderes e responsáveis dedicados.",
+  "views_description": "Salve classificações, filtros e opções de exibição personalizadas ou compartilhe com sua equipe.",
+  "pages_description": "Crie e edite conteúdo livre – anotações, documentos, qualquer coisa.",
+  "intake_description": "Permita que não membros compartilhem bugs, feedbacks e sugestões sem interromper seu fluxo de trabalho.",
+  "time_tracking_description": "Registre o tempo gasto em itens de trabalho e projetos.",
+  "work_management_description": "Gerencie seu trabalho e projetos com facilidade.",
+  "documentation": "Documentação",
+  "message_support": "Suporte por mensagem",
+  "contact_sales": "Contatar vendas",
+  "hyper_mode": "Modo Hyper",
+  "keyboard_shortcuts": "Atalhos do teclado",
+  "whats_new": "O que há de novo?",
+  "version": "Versão",
+  "we_are_having_trouble_fetching_the_updates": "Estamos tendo problemas para buscar as atualizações.",
+  "our_changelogs": "nossos changelogs",
+  "for_the_latest_updates": "para as últimas atualizações.",
+  "please_visit": "Por favor, visite",
+  "docs": "Documentos",
+  "full_changelog": "Changelog completo",
+  "support": "Suporte",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Desenvolvido por Plane Pages",
+  "please_select_at_least_one_invitation": "Selecione pelo menos um convite.",
+  "please_select_at_least_one_invitation_description": "Selecione pelo menos um convite para entrar no espaço de trabalho.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Vemos que alguém convidou você para entrar em um espaço de trabalho",
+  "join_a_workspace": "Entrar em um espaço de trabalho",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Vemos que alguém convidou você para entrar em um espaço de trabalho",
+  "join_a_workspace_description": "Entrar em um espaço de trabalho",
+  "accept_and_join": "Aceitar e entrar",
+  "go_home": "Ir para a página inicial",
+  "no_pending_invites": "Nenhum convite pendente",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Você pode ver aqui se alguém convida você para um espaço de trabalho",
+  "back_to_home": "Voltar para a página inicial",
+  "workspace_name": "nome-do-espaço-de-trabalho",
+  "deactivate_your_account": "Desativar sua conta",
+  "deactivate_your_account_description": "Uma vez desativada, você não poderá ser atribuído a itens de trabalho e ser cobrado pelo seu espaço de trabalho. Para reativar sua conta, você precisará de um convite para um espaço de trabalho neste endereço de e-mail.",
+  "deactivating": "Desativando",
+  "confirm": "Confirmar",
+  "confirming": "Confirmando",
+  "draft_created": "Rascunho criado",
+  "issue_created_successfully": "Item de trabalho criado com sucesso",
+  "draft_creation_failed": "Falha na criação do rascunho",
+  "issue_creation_failed": "Falha na criação do item de trabalho",
+  "draft_issue": "Rascunhar item de trabalho",
+  "issue_updated_successfully": "Item de trabalho atualizado com sucesso",
+  "issue_could_not_be_updated": "Não foi possível atualizar o item de trabalho",
+  "create_a_draft": "Criar um rascunho",
+  "save_to_drafts": "Salvar em rascunhos",
+  "save": "Salvar",
+  "update": "Atualizar",
+  "updating": "Atualizando",
+  "create_new_issue": "Criar novo item de trabalho",
+  "editor_is_not_ready_to_discard_changes": "O editor não está pronto para descartar as alterações",
+  "failed_to_move_issue_to_project": "Falha ao mover o item de trabalho para o projeto",
+  "create_more": "Criar mais",
+  "add_to_project": "Adicionar ao projeto",
+  "discard": "Descartar",
+  "duplicate_issue_found": "Item de trabalho duplicado encontrado",
+  "duplicate_issues_found": "Itens de trabalho duplicados encontrados",
+  "no_matching_results": "Nenhum resultado correspondente",
+  "title_is_required": "O título é obrigatório",
+  "title": "Título",
+  "state": "Estado",
+  "transition": "Transição",
+  "history": "Histórico",
+  "priority": "Prioridade",
+  "none": "Nenhum",
+  "urgent": "Urgente",
+  "high": "Alta",
+  "medium": "Média",
+  "low": "Baixa",
+  "members": "Membros",
+  "assignee": "Responsável",
+  "assignees": "Responsáveis",
+  "subscriber": "{count, plural, one{# Inscrito} other{# Inscritos}}",
+  "you": "Você",
+  "labels": "Etiquetas",
+  "create_new_label": "Criar nova etiqueta",
+  "label_name": "Nome da etiqueta",
+  "failed_to_create_label": "Falha ao criar etiqueta. Por favor, tente novamente.",
+  "start_date": "Data de início",
+  "end_date": "Data de término",
+  "due_date": "Data de vencimento",
+  "target_date": "Data alvo",
+  "estimate": "Estimativa",
+  "change_parent_issue": "Alterar item de trabalho pai",
+  "remove_parent_issue": "Remover item de trabalho pai",
+  "add_parent": "Adicionar pai",
+  "loading_members": "Carregando membros",
+  "view_link_copied_to_clipboard": "Link de visualização copiado para a área de transferência.",
+  "required": "Obrigatório",
+  "optional": "Opcional",
+  "Cancel": "Cancelar",
+  "edit": "Editar",
+  "archive": "Arquivar",
+  "restore": "Restaurar",
+  "open_in_new_tab": "Abrir em nova aba",
+  "delete": "Excluir",
+  "deleting": "Excluindo",
+  "make_a_copy": "Fazer uma cópia",
+  "move_to_project": "Mover para o projeto",
+  "good": "Bom",
+  "morning": "manhã",
+  "afternoon": "tarde",
+  "evening": "noite",
+  "show_all": "Mostrar tudo",
+  "show_less": "Mostrar menos",
+  "no_data_yet": "Nenhum dado ainda",
+  "syncing": "Sincronizando",
+  "add_work_item": "Adicionar item de trabalho",
+  "advanced_description_placeholder": "Pressione '/' para comandos",
+  "create_work_item": "Criar item de trabalho",
+  "attachments": "Anexos",
+  "declining": "Recusando",
+  "declined": "Recusado",
+  "decline": "Recusar",
+  "unassigned": "Não atribuído",
+  "work_items": "Itens de trabalho",
+  "add_link": "Adicionar link",
+  "points": "Pontos",
+  "no_assignee": "Sem responsável",
+  "no_assignees_yet": "Nenhum responsável ainda",
+  "no_labels_yet": "Nenhuma etiqueta ainda",
+  "ideal": "Ideal",
+  "current": "Atual",
+  "no_matching_members": "Nenhum membro correspondente",
+  "leaving": "Saindo",
+  "removing": "Removendo",
+  "leave": "Sair",
+  "refresh": "Atualizar",
+  "refreshing": "Atualizando",
+  "refresh_status": "Status da atualização",
+  "prev": "Anterior",
+  "next": "Próximo",
+  "re_generating": "Regerando",
+  "re_generate": "Regerar",
+  "re_generate_key": "Regerar chave",
+  "export": "Exportar",
+  "member": "{count, plural, one{# membro} other{# membros}}",
+  "new_password_must_be_different_from_old_password": "Nova senha deve ser diferente da senha antiga",
+  "edited": "editado",
+  "bot": "robô",
+  "settings_description": "Gerencie suas preferências de conta, espaço de trabalho e projeto em um só lugar. Alterne entre as abas para configurar facilmente.",
+  "back_to_workspace": "Voltar ao espaço de trabalho",
+  "upgrade_request": "Peça ao administrador do espaço de trabalho para fazer upgrade.",
+  "copied_to_clipboard": "Copiado para a área de transferência",
+  "copied_to_clipboard_description": "A URL foi copiada com sucesso para a área de transferência",
+  "toast": {
+    "success": "Sucesso!",
+    "error": "Erro!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Link criado",
+        "message": "O link foi criado com sucesso"
+      },
+      "not_created": {
+        "title": "Link não criado",
+        "message": "O link não pôde ser criado"
+      },
+      "updated": {
+        "title": "Link atualizado",
+        "message": "O link foi atualizado com sucesso"
+      },
+      "not_updated": {
+        "title": "Link não atualizado",
+        "message": "O link não pôde ser atualizado"
+      },
+      "removed": {
+        "title": "Link removido",
+        "message": "O link foi removido com sucesso"
+      },
+      "not_removed": {
+        "title": "Link não removido",
+        "message": "O link não pôde ser removido"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL inválido",
+        "placeholder": "Digite ou cole um URL"
+      },
+      "title": {
+        "text": "Título de exibição",
+        "placeholder": "Como você gostaria de ver este link"
+      }
+    }
+  },
+  "common": {
+    "all": "Todos",
+    "no_items_in_this_group": "Nenhum item neste grupo",
+    "drop_here_to_move": "Solte aqui para mover",
+    "states": "Estados",
+    "state": "Estado",
+    "state_groups": "Grupos de estado",
+    "state_group": "Grupo de estado",
+    "priorities": "Prioridades",
+    "priority": "Prioridade",
+    "team_project": "Projeto de equipe",
+    "project": "Projeto",
+    "cycle": "Ciclo",
+    "cycles": "Ciclos",
+    "module": "Módulo",
+    "modules": "Módulos",
+    "labels": "Etiquetas",
+    "label": "Etiqueta",
+    "admins": "Administradores",
+    "users": "Usuários",
+    "guests": "Convidados",
+    "assignees": "Responsáveis",
+    "assignee": "Responsável",
+    "created_by": "Criado por",
+    "none": "Nenhum",
+    "link": "Link",
+    "estimates": "Estimativas",
+    "estimate": "Estimativa",
+    "created_at": "Criado em",
+    "updated_at": "Atualizado em",
+    "completed_at": "Concluído em",
+    "layout": "Layout",
+    "filters": "Filtros",
+    "display": "Exibir",
+    "load_more": "Carregar mais",
+    "activity": "Atividade",
+    "analytics": "Análises",
+    "dates": "Datas",
+    "success": "Sucesso!",
+    "something_went_wrong": "Algo deu errado",
+    "error": {
+      "label": "Erro!",
+      "message": "Ocorreu algum erro. Por favor, tente novamente."
+    },
+    "group_by": "Agrupar por",
+    "epic": "Épico",
+    "epics": "Épicos",
+    "work_item": "Item de trabalho",
+    "work_items": "Itens de trabalho",
+    "sub_work_item": "Sub-item de trabalho",
+    "views": "Visualizações",
+    "pages": "Páginas",
+    "add": "Adicionar",
+    "warning": "Aviso",
+    "updating": "Atualizando",
+    "adding": "Adicionando",
+    "update": "Atualizar",
+    "creating": "Criando",
+    "create": "Criar",
+    "cancel": "Cancelar",
+    "description": "Descrição",
+    "title": "Título",
+    "attachment": "Anexo",
+    "general": "Geral",
+    "features": "Funcionalidades",
+    "automation": "Automação",
+    "project_name": "Nome do projeto",
+    "project_id": "ID do projeto",
+    "project_timezone": "Fuso horário do projeto",
+    "created_on": "Criado em",
+    "updated_on": "Atualizado em",
+    "completed_on": "Completed on",
+    "update_project": "Atualizar projeto",
+    "identifier_already_exists": "O identificador já existe",
+    "add_more": "Adicionar mais",
+    "defaults": "Padrões",
+    "add_label": "Adicionar etiqueta",
+    "customize_time_range": "Personalizar intervalo de tempo",
+    "loading": "Carregando",
+    "attachments": "Anexos",
+    "property": "Propriedade",
+    "properties": "Propriedades",
+    "parent": "Pai",
+    "page": "Página",
+    "remove": "Remover",
+    "archiving": "Arquivando",
+    "archive": "Arquivar",
+    "access": {
+      "public": "Público",
+      "private": "Privado"
+    },
+    "done": "Concluído",
+    "sub_work_items": "Sub-itens de trabalho",
+    "comment": "Comentário",
+    "workspace_level": "Nível do espaço de trabalho",
+    "order_by": {
+      "label": "Ordenar por",
+      "manual": "Manual - Classificação",
+      "last_created": "Último criado",
+      "last_updated": "Último atualizado",
+      "start_date": "Data de início",
+      "due_date": "Data de vencimento",
+      "asc": "Ascendente",
+      "desc": "Descendente",
+      "updated_on": "Atualizado em"
+    },
+    "sort": {
+      "asc": "Ascendente",
+      "desc": "Descendente",
+      "created_on": "Criado em",
+      "updated_on": "Atualizado em"
+    },
+    "comments": "Comentários",
+    "updates": "Atualizações",
+    "additional_updates": "Atualizações adicionais",
+    "clear_all": "Limpar tudo",
+    "copied": "Copiado!",
+    "link_copied": "Link copiado!",
+    "link_copied_to_clipboard": "Link copiado para a área de transferência",
+    "copied_to_clipboard": "Link do item de trabalho copiado para a área de transferência",
+    "branch_name_copied_to_clipboard": "Nome do branch copiado para a área de transferência",
+    "is_copied_to_clipboard": "O link do item de trabalho foi copiado para a área de transferência",
+    "no_links_added_yet": "Nenhum link adicionado ainda",
+    "add_link": "Adicionar link",
+    "links": "Links",
+    "go_to_workspace": "Ir para o espaço de trabalho",
+    "progress": "Progresso",
+    "optional": "Opcional",
+    "join": "Participar",
+    "go_back": "Voltar",
+    "continue": "Continuar",
+    "resend": "Reenviar",
+    "relations": "Relações",
+    "dependencies": "Dependências",
+    "errors": {
+      "default": {
+        "title": "Erro!",
+        "message": "Algo deu errado. Por favor, tente novamente."
+      },
+      "required": "Este campo é obrigatório",
+      "entity_required": "{entity} é obrigatório",
+      "restricted_entity": "{entity} está restrito"
+    },
+    "update_link": "Atualizar link",
+    "attach": "Anexar",
+    "create_new": "Criar novo",
+    "add_existing": "Adicionar existente",
+    "type_or_paste_a_url": "Digite ou cole uma URL",
+    "url_is_invalid": "URL inválida",
+    "display_title": "Título de exibição",
+    "link_title_placeholder": "Como você gostaria de ver este link",
+    "url": "URL",
+    "side_peek": "Visualização lateral",
+    "modal": "Modal",
+    "full_screen": "Tela cheia",
+    "close_peek_view": "Fechar a visualização",
+    "toggle_peek_view_layout": "Alternar layout de visualização rápida",
+    "options": "Opções",
+    "duration": "Duração",
+    "today": "Hoje",
+    "week": "Semana",
+    "month": "Mês",
+    "quarter": "Trimestre",
+    "press_for_commands": "Pressione '/' para comandos",
+    "click_to_add_description": "Clique para adicionar descrição",
+    "on_track": "No caminho certo",
+    "off_track": "Fora do caminho",
+    "at_risk": "Em risco",
+    "timeline": "Linha do tempo",
+    "completion": "Conclusão",
+    "upcoming": "Próximo",
+    "completed": "Concluído",
+    "in_progress": "Em andamento",
+    "planned": "Planejado",
+    "paused": "Pausado",
+    "search": {
+      "label": "Buscar",
+      "placeholder": "Digite para buscar",
+      "no_matches_found": "Nenhum resultado encontrado",
+      "no_matching_results": "Nenhum resultado correspondente",
+      "min_chars": "Digite pelo menos {count} caracteres para buscar",
+      "error": "Erro ao buscar resultados",
+      "no_results": {
+        "title": "Nenhum resultado correspondente",
+        "description": "Remova os critérios de busca para ver todos os resultados"
+      }
+    },
+    "actions": {
+      "edit": "Editar",
+      "make_a_copy": "Fazer uma cópia",
+      "open_in_new_tab": "Abrir em nova aba",
+      "copy_link": "Copiar link",
+      "copy_branch_name": "Copiar nome do branch",
+      "archive": "Arquivar",
+      "restore": "Restaurar",
+      "delete": "Excluir",
+      "remove_relation": "Remover relação",
+      "subscribe": "Inscrever-se",
+      "unsubscribe": "Cancelar inscrição",
+      "clear_sorting": "Limpar ordenação",
+      "show_weekends": "Mostrar fins de semana",
+      "enable": "Habilitar",
+      "disable": "Desabilitar",
+      "copy_markdown": "Copiar markdown",
+      "reply": "Responder"
+    },
+    "name": "Nome",
+    "discard": "Descartar",
+    "confirm": "Confirmar",
+    "confirming": "Confirmando",
+    "read_the_docs": "Ler a documentação",
+    "default": "Padrão",
+    "active": "Ativo",
+    "enabled": "Habilitado",
+    "disabled": "Desabilitado",
+    "mandate": "Mandato",
+    "mandatory": "Obrigatório",
+    "global": "Global",
+    "yes": "Sim",
+    "no": "Não",
+    "please_wait": "Por favor, aguarde",
+    "enabling": "Habilitando",
+    "disabling": "Desabilitando",
+    "beta": "Beta",
+    "or": "ou",
+    "next": "Próximo",
+    "back": "Voltar",
+    "retry": "Tentar novamente",
+    "cancelling": "Cancelando",
+    "configuring": "Configurando",
+    "clear": "Limpar",
+    "import": "Importar",
+    "connect": "Conectar",
+    "authorizing": "Autorizando",
+    "processing": "Processando",
+    "no_data_available": "Nenhum dado disponível",
+    "from": "de {name}",
+    "authenticated": "Autenticado",
+    "select": "Selecionar",
+    "upgrade": "Upgrade",
+    "add_seats": "Adicionar lugares",
+    "projects": "Projetos",
+    "workspace": "Espaço de trabalho",
+    "workspaces": "Espaços de trabalho",
+    "team": "Equipe",
+    "teams": "Equipes",
+    "entity": "Entidade",
+    "entities": "Entidades",
+    "task": "Tarefa",
+    "tasks": "Tarefas",
+    "section": "Seção",
+    "sections": "Seções",
+    "edit": "Editar",
+    "connecting": "Conectando",
+    "connected": "Conectado",
+    "disconnect": "Desconectar",
+    "disconnecting": "Desconectando",
+    "installing": "Instalando",
+    "install": "Instalar",
+    "reset": "Redefinir",
+    "live": "Ao vivo",
+    "change_history": "Histórico de alterações",
+    "coming_soon": "Em breve",
+    "member": "Membro",
+    "members": "Membros",
+    "you": "Você",
+    "upgrade_cta": {
+      "higher_subscription": "Faça upgrade para uma assinatura superior",
+      "talk_to_sales": "Fale com o departamento de vendas"
+    },
+    "category": "Categoria",
+    "categories": "Categorias",
+    "saving": "Salvando",
+    "save_changes": "Salvar alterações",
+    "delete": "Excluir",
+    "deleting": "Excluindo",
+    "pending": "Pendente",
+    "invite": "Convidar",
+    "view": "Visualizar",
+    "deactivated_user": "Usuário desativado",
+    "apply": "Aplicar",
+    "applying": "Aplicando",
+    "overview": "Visão geral",
+    "no_of": "Nº de {entity}",
+    "resolved": "Resolvido",
+    "get_started": "Começar",
+    "worklogs": "Registros de trabalho",
+    "project_updates": "Atualizações do projeto",
+    "workflows": "Fluxos de trabalho",
+    "templates": "Modelos",
+    "business": "Business",
+    "members_and_teamspaces": "Membros e espaços de equipe",
+    "recurring_work_items": "Itens de trabalho recorrentes",
+    "milestones": "Marcos",
+    "open_in_full_screen": "Abrir {page} em tela cheia",
+    "details": "Detalhes",
+    "project_structure": "Estrutura do projeto",
+    "custom_properties": "Propriedades personalizadas",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Eixo X",
+    "y_axis": "Eixo Y",
+    "metric": "Métrica"
+  },
+  "form": {
+    "title": {
+      "required": "Título é obrigatório",
+      "max_length": "O título deve ter menos de {length} caracteres"
+    }
+  },
+  "entity": {
+    "grouping_title": "Agrupamento de {entity}",
+    "priority": "Prioridade de {entity}",
+    "all": "Todos os {entity}",
+    "drop_here_to_move": "Solte aqui para mover o {entity}",
+    "delete": {
+      "label": "Excluir {entity}",
+      "success": "{entity} excluído com sucesso",
+      "failed": "Falha ao excluir {entity}"
+    },
+    "update": {
+      "failed": "Falha ao atualizar {entity}",
+      "success": "{entity} atualizado com sucesso"
+    },
+    "link_copied_to_clipboard": "Link de {entity} copiado para a área de transferência",
+    "fetch": {
+      "failed": "Erro ao buscar {entity}"
+    },
+    "add": {
+      "success": "{entity} adicionado com sucesso",
+      "failed": "Erro ao adicionar {entity}"
+    },
+    "remove": {
+      "success": "{entity} removido com sucesso",
+      "failed": "Erro ao remover {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Não foi possível anexar o arquivo. Tente enviar novamente.",
+    "only_one_file_allowed": "Apenas um arquivo pode ser enviado por vez.",
+    "file_size_limit": "O arquivo deve ter {size}MB ou menos.",
+    "drag_and_drop": "Arraste e solte em qualquer lugar para enviar",
+    "delete": "Excluir anexo"
+  },
+  "label": {
+    "select": "Selecionar etiqueta",
+    "create": {
+      "success": "Etiqueta criada com sucesso",
+      "failed": "Falha ao criar etiqueta",
+      "already_exists": "Etiqueta já existe",
+      "type": "Digite para adicionar uma nova etiqueta"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Visualização} other {Visualizações}}",
+    "create": {
+      "label": "Criar Visualização"
+    },
+    "update": {
+      "label": "Atualizar Visualização"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Convidado",
+      "description": "Membros externos de organizações podem ser convidados como convidados."
+    },
+    "member": {
+      "title": "Membro",
+      "description": "Capacidade de ler, escrever, editar e excluir entidades dentro de projetos, ciclos e módulos"
+    },
+    "admin": {
+      "title": "Administrador",
+      "description": "Todas as permissões definidas como verdadeiras dentro do espaço de trabalho."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Gerente de Produto / Projeto",
+    "development_or_engineering": "Desenvolvimento / Engenharia",
+    "founder_or_executive": "Fundador / Executivo",
+    "freelancer_or_consultant": "Freelancer / Consultor",
+    "marketing_or_growth": "Marketing / Crescimento",
+    "sales_or_business_development": "Vendas / Desenvolvimento de Negócios",
+    "support_or_operations": "Suporte / Operações",
+    "student_or_professor": "Estudante / Professor",
+    "human_resources": "Recursos Humanos",
+    "other": "Outro"
+  },
+  "default_global_view": {
+    "all_issues": "Todos os itens de trabalho",
+    "assigned": "Atribuído",
+    "created": "Criado",
+    "subscribed": "Inscrito"
+  },
+  "description_versions": {
+    "last_edited_by": "Última edição por",
+    "previously_edited_by": "Anteriormente editado por",
+    "edited_by": "Editado por"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "O Plane não inicializou. Isso pode ser porque um ou mais serviços do Plane falharam ao iniciar.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Escolha View Logs do setup.sh e logs do Docker para ter certeza."
+  },
+  "customize_navigation": "Personalizar navegação",
+  "personal": "Pessoal",
+  "accordion_navigation_control": "Navegação lateral em acordeão",
+  "horizontal_navigation_bar": "Navegação em abas",
+  "show_limited_projects_on_sidebar": "Mostrar projetos limitados na barra lateral",
+  "enter_number_of_projects": "Informe o número de projetos",
+  "pin": "Fixar",
+  "unpin": "Desafixar",
+  "workspace_dashboards": "Dashboards",
+  "pi_chat": "Chat AI",
+  "in_app": "No aplicativo",
+  "forms": "Formulários",
+  "milestones": "Marcos",
+  "milestones_description": "Os marcos oferecem uma camada para alinhar os itens de trabalho com datas de conclusão compartilhadas.",
+  "file_upload": {
+    "upload_text": "Clique aqui para fazer upload do arquivo",
+    "drag_drop_text": "Arraste e Solte",
+    "processing": "Processando",
+    "invalid_file_type": "Tipo de arquivo inválido",
+    "missing_fields": "Campos ausentes",
+    "success": "{fileName} Enviado!"
+  },
+  "date": "Data",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Exporte itens de trabalho para um arquivo CSV.",
+      "short_description": "Exportar como CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Exporte itens de trabalho para um arquivo Excel.",
+      "short_description": "Exportar como Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Exporte itens de trabalho para um arquivo Excel.",
+      "short_description": "Exportar como Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Exporte itens de trabalho para um arquivo JSON.",
+      "short_description": "Exportar como JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/cycle.json b/packages/i18n/src/locales/pt-BR/cycle.json
new file mode 100644
index 0000000..3167b6a
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Adicione itens de trabalho ao ciclo para visualizar seu progresso"
+      },
+      "chart": {
+        "title": "Adicione itens de trabalho ao ciclo para visualizar o gráfico de burndown."
+      },
+      "priority_issue": {
+        "title": "Observe os itens de trabalho de alta prioridade abordados no ciclo rapidamente."
+      },
+      "assignee": {
+        "title": "Adicione responsáveis aos itens de trabalho para ver uma divisão do trabalho por responsáveis."
+      },
+      "label": {
+        "title": "Adicione etiquetas aos itens de trabalho para ver a divisão do trabalho por etiquetas."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Ciclo} other {Ciclos}}",
+    "no_cycle": "Nenhum ciclo"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Adicione itens de trabalho ao ciclo para visualizar seu\n progresso"
+      },
+      "priority": {
+        "title": "Observe itens de trabalho de alta prioridade abordados no\n ciclo rapidamente."
+      },
+      "assignee": {
+        "title": "Adicione responsáveis aos itens de trabalho para ver uma\n divisão do trabalho por responsáveis."
+      },
+      "label": {
+        "title": "Adicione etiquetas aos itens de trabalho para ver a\n divisão do trabalho por etiquetas."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/editor.json b/packages/i18n/src/locales/pt-BR/editor.json
new file mode 100644
index 0000000..105df38
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Arraste e solte para fazer upload de arquivos externos"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Arquivo muito grande.",
+        "description": "O tamanho máximo por arquivo é {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Tipo de arquivo não suportado.",
+        "description": "Ver formatos suportados"
+      },
+      "default": {
+        "title": "Falha no upload.",
+        "description": "Algo deu errado. Tente novamente."
+      }
+    },
+    "upgrade": {
+      "description": "Atualize seu plano para visualizar este anexo."
+    },
+    "aria": {
+      "click_to_upload": "Clique para fazer upload do anexo"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Converter para incorporação",
+      "convert_to_link": "Converter para link",
+      "convert_to_richcard": "Converter para cartão rico"
+    },
+    "placeholder": {
+      "insert_embed": "Insira aqui seu link de incorporação preferido, como vídeo do YouTube, design do Figma, etc.",
+      "link": "Digite ou cole um link"
+    },
+    "input_modal": {
+      "embed": "Incorporar",
+      "works_with_links": "Funciona com YouTube, Figma, Google Docs e mais"
+    },
+    "error": {
+      "not_valid_link": "Por favor, insira uma URL válida."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Descreva o conteúdo deste bloco",
+      "generated_here": "Seu conteúdo de IA será gerado aqui"
+    },
+    "block_types": {
+      "placeholder": "Selecionar tipo de bloco",
+      "summarize_page": "Resumir página",
+      "custom_prompt": "Prompt personalizado"
+    },
+    "actions": {
+      "discard": "Descartar",
+      "generate": "Gerar",
+      "generating": "Gerando",
+      "rewriting": "Reescrevendo",
+      "rewrite": "Reescrever",
+      "use_this": "Usar este",
+      "refine": "Refinar"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/empty-state.json b/packages/i18n/src/locales/pt-BR/empty-state.json
new file mode 100644
index 0000000..e9863a4
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Ainda não há métricas de progresso para mostrar.",
+      "description": "Comece definindo valores de propriedades em itens de trabalho para ver as métricas de progresso aqui."
+    },
+    "updates": {
+      "title": "Ainda não há atualizações.",
+      "description": "Quando os membros do projeto adicionarem atualizações, elas aparecerão aqui"
+    },
+    "search": {
+      "title": "Nenhum resultado correspondente.",
+      "description": "Nenhum resultado encontrado. Tente ajustar seus termos de pesquisa."
+    },
+    "not_found": {
+      "title": "Ops! Algo parece errado",
+      "description": "Não conseguimos buscar sua conta Plane no momento. Pode ser um erro de rede.",
+      "cta_primary": "Tentar recarregar"
+    },
+    "server_error": {
+      "title": "Erro do servidor",
+      "description": "Não conseguimos conectar e buscar dados do nosso servidor. Não se preocupe, estamos trabalhando nisso.",
+      "cta_primary": "Tentar recarregar"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Parece que você não tem acesso a este projeto",
+      "restricted_description": "Entre em contato com o administrador para solicitar acesso e você poderá continuar aqui.",
+      "join_description": "Clique no botão abaixo para participar.",
+      "cta_primary": "Participar do projeto",
+      "cta_loading": "Participando do projeto"
+    },
+    "invalid_project": {
+      "title": "Projeto não encontrado",
+      "description": "O projeto que você está procurando não existe."
+    },
+    "work_items": {
+      "title": "Comece com seu primeiro item de trabalho.",
+      "description": "Os itens de trabalho são os blocos de construção do seu projeto — atribua proprietários, defina prioridades e acompanhe o progresso facilmente.",
+      "cta_primary": "Criar seu primeiro item de trabalho"
+    },
+    "cycles": {
+      "title": "Agrupe e defina prazos para seu trabalho em Ciclos.",
+      "description": "Divida o trabalho em blocos com prazo definido, trabalhe de trás para frente a partir do prazo do projeto para definir datas e faça progresso tangível como equipe.",
+      "cta_primary": "Definir seu primeiro ciclo"
+    },
+    "cycle_work_items": {
+      "title": "Nenhum item de trabalho para mostrar neste ciclo",
+      "description": "Crie itens de trabalho para começar a monitorar o progresso da sua equipe neste ciclo e atingir seus objetivos no prazo.",
+      "cta_primary": "Criar item de trabalho",
+      "cta_secondary": "Adicionar item de trabalho existente"
+    },
+    "modules": {
+      "title": "Mapeie as metas do seu projeto para Módulos e acompanhe facilmente.",
+      "description": "Os módulos são compostos por itens de trabalho interconectados. Eles auxiliam no monitoramento do progresso através das fases do projeto, cada uma com prazos e análises específicas para indicar o quão perto você está de alcançar essas fases.",
+      "cta_primary": "Definir seu primeiro módulo"
+    },
+    "module_work_items": {
+      "title": "Nenhum item de trabalho para mostrar neste Módulo",
+      "description": "Crie itens de trabalho para começar a monitorar este módulo.",
+      "cta_primary": "Criar item de trabalho",
+      "cta_secondary": "Adicionar item de trabalho existente"
+    },
+    "views": {
+      "title": "Salve visualizações personalizadas para seu projeto",
+      "description": "As visualizações são filtros salvos que ajudam você a acessar rapidamente as informações que mais usa. Colabore sem esforço enquanto os colegas de equipe compartilham e adaptam as visualizações às suas necessidades específicas.",
+      "cta_primary": "Criar visualização"
+    },
+    "no_work_items_in_project": {
+      "title": "Ainda não há itens de trabalho no projeto",
+      "description": "Adicione itens de trabalho ao seu projeto e divida seu trabalho em partes rastreáveis com visualizações.",
+      "cta_primary": "Adicionar item de trabalho"
+    },
+    "work_item_filter": {
+      "title": "Nenhum item de trabalho encontrado",
+      "description": "Seu filtro atual não retornou nenhum resultado. Tente alterar os filtros.",
+      "cta_primary": "Adicionar item de trabalho"
+    },
+    "pages": {
+      "title": "Documente tudo — de notas a PRDs",
+      "description": "As páginas permitem que você capture e organize informações em um só lugar. Escreva notas de reuniões, documentação de projetos e PRDs, incorpore itens de trabalho e estruture-os com componentes prontos para uso.",
+      "cta_primary": "Criar sua primeira Página"
+    },
+    "archive_pages": {
+      "title": "Ainda não há páginas arquivadas",
+      "description": "Arquive páginas que não estão no seu radar. Acesse-as aqui quando necessário."
+    },
+    "intake_sidebar": {
+      "title": "Registrar solicitações de Entrada",
+      "description": "Envie novas solicitações para serem revisadas, priorizadas e rastreadas dentro do fluxo de trabalho do seu projeto.",
+      "cta_primary": "Criar solicitação de Entrada"
+    },
+    "intake_main": {
+      "title": "Selecione um item de trabalho de Entrada para ver seus detalhes"
+    },
+    "epics": {
+      "title": "Transforme projetos complexos em épicos estruturados.",
+      "description": "Um épico ajuda você a organizar grandes objetivos em tarefas menores e rastreáveis.",
+      "cta_primary": "Criar um Épico",
+      "cta_secondary": "Documentação"
+    },
+    "epic_work_items": {
+      "title": "Você ainda não adicionou itens de trabalho a este épico.",
+      "description": "Comece adicionando alguns itens de trabalho a este épico e acompanhe-os aqui.",
+      "cta_secondary": "Adicionar itens de trabalho"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Ainda não há épicos arquivados",
+      "description": "Você pode arquivar épicos concluídos ou cancelados. Encontre-os aqui após o arquivamento."
+    },
+    "archive_work_items": {
+      "title": "Ainda não há itens de trabalho arquivados",
+      "description": "Manualmente ou por meio de automação, você pode arquivar itens de trabalho concluídos ou cancelados. Encontre-os aqui uma vez arquivados.",
+      "cta_primary": "Configurar automação"
+    },
+    "archive_cycles": {
+      "title": "Ainda não há ciclos arquivados",
+      "description": "Para organizar seu projeto, arquive ciclos concluídos. Encontre-os aqui uma vez arquivados."
+    },
+    "archive_modules": {
+      "title": "Ainda não há Módulos arquivados",
+      "description": "Para organizar seu projeto, arquive módulos concluídos ou cancelados. Encontre-os aqui uma vez arquivados."
+    },
+    "home_widget_quick_links": {
+      "title": "Mantenha referências, recursos ou documentos importantes à mão para o seu trabalho"
+    },
+    "inbox_sidebar_all": {
+      "title": "As atualizações dos seus itens de trabalho inscritos aparecerão aqui"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "As menções aos seus itens de trabalho aparecerão aqui"
+    },
+    "your_work_by_priority": {
+      "title": "Ainda não há item de trabalho atribuído"
+    },
+    "your_work_by_state": {
+      "title": "Ainda não há item de trabalho atribuído"
+    },
+    "views": {
+      "title": "Ainda não há Visualizações",
+      "description": "Adicione itens de trabalho ao seu projeto e use visualizações para filtrar, classificar e monitorar o progresso sem esforço.",
+      "cta_primary": "Adicionar item de trabalho"
+    },
+    "drafts": {
+      "title": "Itens de trabalho semi-escritos",
+      "description": "Para experimentar isso, comece a adicionar um item de trabalho e deixe-o no meio do caminho ou crie seu primeiro rascunho abaixo. 😉",
+      "cta_primary": "Criar item de trabalho de rascunho"
+    },
+    "projects_archived": {
+      "title": "Nenhum projeto arquivado",
+      "description": "Parece que todos os seus projetos ainda estão ativos — ótimo trabalho!"
+    },
+    "analytics_projects": {
+      "title": "Crie projetos para visualizar as métricas do projeto aqui."
+    },
+    "analytics_work_items": {
+      "title": "Crie projetos com itens de trabalho e responsáveis para começar a rastrear desempenho, progresso e impacto da equipe aqui."
+    },
+    "analytics_no_cycle": {
+      "title": "Crie ciclos para organizar o trabalho em fases com prazo definido e acompanhar o progresso em sprints."
+    },
+    "analytics_no_module": {
+      "title": "Crie módulos para organizar seu trabalho e acompanhar o progresso em diferentes estágios."
+    },
+    "analytics_no_intake": {
+      "title": "Configure a entrada para gerenciar solicitações recebidas e rastrear como elas são aceitas e rejeitadas"
+    },
+    "home_widget_stickies": {
+      "title": "Anote uma ideia, capture um momento de inspiração ou registre um lampejo. Adicione um adesivo para começar."
+    },
+    "stickies": {
+      "title": "Capture ideias instantaneamente",
+      "description": "Crie adesivos para notas rápidas e tarefas pendentes, e mantenha-os com você onde quer que vá.",
+      "cta_primary": "Criar primeiro adesivo",
+      "cta_secondary": "Documentação"
+    },
+    "active_cycles": {
+      "title": "Nenhum ciclo ativo",
+      "description": "Você não tem nenhum ciclo em andamento no momento. Os ciclos ativos aparecem aqui quando incluem a data de hoje."
+    },
+    "dashboard": {
+      "title": "Visualize seu progresso com painéis",
+      "description": "Crie painéis personalizáveis para rastrear métricas, medir resultados e apresentar insights de forma eficaz.",
+      "cta_primary": "Criar novo painel"
+    },
+    "wiki": {
+      "title": "Escreva uma nota, um documento ou uma base de conhecimento completa.",
+      "description": "As páginas são espaço para capturar pensamentos no Plane. Anote notas de reuniões, formate-as facilmente, incorpore itens de trabalho, organize-as usando uma biblioteca de componentes e mantenha todas no contexto do seu projeto.",
+      "cta_primary": "Criar sua página"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Ativar estados do projeto",
+      "description": "Ative os estados do projeto para visualizar e gerenciar propriedades como estado, prioridade, datas de vencimento e mais."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Ainda não há estimativas",
+      "description": "Defina como sua equipe mede o esforço e acompanhe-o consistentemente em todos os itens de trabalho.",
+      "cta_primary": "Adicionar sistema de estimativas"
+    },
+    "labels": {
+      "title": "Ainda não há etiquetas",
+      "description": "Crie etiquetas personalizadas para categorizar e gerenciar efetivamente seus itens de trabalho.",
+      "cta_primary": "Criar sua primeira etiqueta"
+    },
+    "exports": {
+      "title": "Ainda não há exportações",
+      "description": "Você não tem nenhum registro de exportação no momento. Depois de exportar dados, todos os registros aparecerão aqui."
+    },
+    "tokens": {
+      "title": "Ainda não há token Pessoal",
+      "description": "Gere tokens de API seguros para conectar seu espaço de trabalho com sistemas e aplicativos externos.",
+      "cta_primary": "Adicionar token de API"
+    },
+    "workspace_tokens": {
+      "title": "Ainda não há tokens de acesso",
+      "description": "Gere tokens de API seguros para conectar seu espaço de trabalho com sistemas e aplicativos externos.",
+      "cta_primary": "Adicionar token de acesso"
+    },
+    "webhooks": {
+      "title": "Ainda não foi adicionado nenhum Webhook",
+      "description": "Automatize notificações para serviços externos quando ocorrerem eventos do projeto.",
+      "cta_primary": "Adicionar webhook"
+    },
+    "work_item_types": {
+      "title": "Crie e personalize tipos de itens de trabalho",
+      "description": "Defina tipos de itens de trabalho exclusivos para seu projeto. Cada tipo pode ter suas próprias propriedades, fluxos de trabalho e campos - adaptados às necessidades do seu projeto e equipe.",
+      "cta_primary": "Ativar"
+    },
+    "work_item_type_properties": {
+      "title": "Defina a propriedade e os detalhes que você deseja capturar para este tipo de item de trabalho. Personalize-o para corresponder ao fluxo de trabalho do seu projeto.",
+      "cta_secondary": "Adicionar propriedade"
+    },
+    "templates": {
+      "title": "Ainda não há modelos",
+      "description": "Reduza o tempo de configuração criando modelos para itens de trabalho e páginas — e comece novo trabalho em segundos.",
+      "cta_primary": "Criar seu primeiro modelo"
+    },
+    "recurring_work_items": {
+      "title": "Ainda não há item de trabalho recorrente",
+      "description": "Configure itens de trabalho recorrentes para automatizar tarefas repetidas e manter-se no cronograma sem esforço.",
+      "cta_primary": "Criar item de trabalho recorrente"
+    },
+    "worklogs": {
+      "title": "Acompanhe folhas de ponto para todos os membros",
+      "description": "Registre tempo em itens de trabalho para ver folhas de ponto detalhadas para qualquer membro da equipe em projetos."
+    },
+    "group_syncing": {
+      "title": "Ainda não há mapeamentos de grupos"
+    },
+    "template_setting": {
+      "title": "Ainda não há modelos",
+      "description": "Reduza o tempo de configuração criando modelos para projetos, itens de trabalho e páginas — e comece novo trabalho em segundos.",
+      "cta_primary": "Criar modelo"
+    },
+    "workflows": {
+      "title": "Ainda não há fluxos de trabalho",
+      "description": "Crie fluxos de trabalho para gerenciar o progresso dos seus itens de trabalho.",
+      "cta_primary": "Adicionar novo fluxo de trabalho",
+      "states": {
+        "title": "Adicionar estados",
+        "description": "Selecione os estados pelos quais o item de trabalho progride."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/home.json b/packages/i18n/src/locales/pt-BR/home.json
new file mode 100644
index 0000000..fcc320b
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Seu guia de início rápido",
+      "not_right_now": "Agora não",
+      "create_project": {
+        "title": "Criar um projeto",
+        "description": "A maioria das coisas começa com um projeto no Plane.",
+        "cta": "Começar"
+      },
+      "invite_team": {
+        "title": "Convide sua equipe",
+        "description": "Construa, entregue e gerencie com colegas de trabalho.",
+        "cta": "Convidar"
+      },
+      "configure_workspace": {
+        "title": "Configure seu espaço de trabalho.",
+        "description": "Ative ou desative recursos ou vá além disso.",
+        "cta": "Configurar este espaço de trabalho"
+      },
+      "personalize_account": {
+        "title": "Personalize o Plane.",
+        "description": "Escolha sua foto, cores e muito mais.",
+        "cta": "Personalizar agora"
+      },
+      "widgets": {
+        "title": "Está quieto sem widgets, ative-os",
+        "description": "Parece que todos os seus widgets estão desativados. Ative-os\nagora para melhorar sua experiência!",
+        "primary_button": {
+          "text": "Gerenciar widgets"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Salve links para os itens de trabalho que você gostaria de ter à mão.",
+      "add": "Adicionar link rápido",
+      "title": "Link rápido",
+      "title_plural": "Links rápidos"
+    },
+    "recents": {
+      "title": "Recentes",
+      "empty": {
+        "project": "Seus projetos recentes aparecerão aqui quando você visitar um.",
+        "page": "Suas páginas recentes aparecerão aqui quando você visitar uma.",
+        "issue": "Seus itens de trabalho recentes aparecerão aqui quando você visitar um.",
+        "default": "Você não tem nenhum item recente ainda."
+      },
+      "filters": {
+        "all": "Todos",
+        "projects": "Projetos",
+        "pages": "Páginas",
+        "issues": "Itens de trabalho"
+      }
+    },
+    "new_at_plane": {
+      "title": "Novidades no Plane"
+    },
+    "quick_tutorial": {
+      "title": "Tutorial rápido"
+    },
+    "widget": {
+      "reordered_successfully": "Widget reordenado com sucesso.",
+      "reordering_failed": "Ocorreu um erro ao reordenar o widget."
+    },
+    "manage_widgets": "Gerenciar widgets",
+    "title": "Página inicial",
+    "star_us_on_github": "Nos dê uma estrela no GitHub",
+    "business_trial_banner": {
+      "title": "Seu teste de 14 dias do plano Business está ativo!",
+      "description": "Explore todos os recursos Business. Quando estiver pronto, escolha assinar. Você não será cobrado automaticamente.",
+      "trial_ends_today": "O teste termina hoje",
+      "trial_ends_in_days": "O teste termina em {days, plural, one {# dia} other {# dias}}",
+      "start_subscription": "Iniciar assinatura",
+      "explore_business_features": "Explorar recursos Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/inbox.json b/packages/i18n/src/locales/pt-BR/inbox.json
new file mode 100644
index 0000000..564a733
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Pendente",
+        "description": "Pendente"
+      },
+      "declined": {
+        "title": "Recusado",
+        "description": "Recusado"
+      },
+      "snoozed": {
+        "title": "Adiado",
+        "description": "{days, plural, one{Falta # dia} other{Faltam # dias}}"
+      },
+      "accepted": {
+        "title": "Aceito",
+        "description": "Aceito"
+      },
+      "duplicate": {
+        "title": "Duplicado",
+        "description": "Duplicado"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Recusar item de trabalho",
+        "content": "Tem certeza de que deseja recusar o item de trabalho {value}?"
+      },
+      "delete": {
+        "title": "Excluir item de trabalho",
+        "content": "Tem certeza de que deseja excluir o item de trabalho {value}?",
+        "success": "Item de trabalho excluído com sucesso"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Apenas administradores do projeto podem adiar/reativar itens de trabalho",
+      "accept_permission": "Apenas administradores do projeto podem aceitar itens de trabalho",
+      "decline_permission": "Apenas administradores do projeto podem recusar itens de trabalho"
+    },
+    "actions": {
+      "accept": "Aceitar",
+      "decline": "Recusar",
+      "snooze": "Adiar",
+      "unsnooze": "Reativar",
+      "copy": "Copiar link do item de trabalho",
+      "delete": "Excluir",
+      "open": "Abrir item de trabalho",
+      "mark_as_duplicate": "Marcar como duplicado",
+      "move": "Mover {value} para os itens de trabalho do projeto"
+    },
+    "source": {
+      "in-app": "no aplicativo"
+    },
+    "order_by": {
+      "created_at": "Criado em",
+      "updated_at": "Atualizado em",
+      "id": "ID"
+    },
+    "label": "Admissão",
+    "page_label": "{workspace} - Admissão",
+    "modal": {
+      "title": "Criar item de trabalho de admissão"
+    },
+    "tabs": {
+      "open": "Aberto",
+      "closed": "Fechado"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Nenhum item de trabalho aberto",
+        "description": "Encontre itens de trabalho abertos aqui. Crie um novo item de trabalho."
+      },
+      "sidebar_closed_tab": {
+        "title": "Nenhum item de trabalho fechado",
+        "description": "Todos os itens de trabalho, sejam aceitos ou recusados, podem ser encontrados aqui."
+      },
+      "sidebar_filter": {
+        "title": "Nenhum item de trabalho correspondente",
+        "description": "Nenhum item de trabalho corresponde ao filtro aplicado na admissão. Crie um novo item de trabalho."
+      },
+      "detail": {
+        "title": "Selecione um item de trabalho para visualizar seus detalhes."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/integration.json b/packages/i18n/src/locales/pt-BR/integration.json
new file mode 100644
index 0000000..b094ffa
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integrações",
+    "loading": "Carregando",
+    "unauthorized": "Você não está autorizado a visualizar esta página.",
+    "configure": "Configurar",
+    "not_enabled": "{name} não está habilitado para este workspace.",
+    "not_configured": "Não configurado",
+    "disconnect_personal_account": "Desconectar conta pessoal do {providerName}",
+    "not_configured_message_admin": "A integração com {name} não está configurada. Entre em contato com o administrador da sua instância para configurá-la.",
+    "not_configured_message_support": "A integração com {name} não está configurada. Entre em contato com o suporte para configurá-la.",
+    "external_api_unreachable": "Não foi possível acessar a API externa. Por favor, tente novamente mais tarde.",
+    "error_fetching_supported_integrations": "Não foi possível buscar integrações suportadas. Por favor, tente novamente mais tarde.",
+    "back_to_integrations": "Voltar para integrações",
+    "select_state": "Selecionar Estado",
+    "set_state": "Definir Estado",
+    "choose_project": "Escolher Projeto...",
+    "skip_backward_state_movement": "Impedir que os itens voltem a um estado anterior devido a atualizações de PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Conecte e sincronize seus itens de trabalho do GitHub com o Plane",
+    "connect_org": "Conectar Organização",
+    "connect_org_description": "Conecte sua organização do GitHub com o Plane",
+    "processing": "Processando",
+    "org_added_desc": "GitHub org adicionada por e tempo",
+    "connection_fetch_error": "Erro ao buscar detalhes de conexão do servidor",
+    "personal_account_connected": "Conta pessoal conectada",
+    "personal_account_connected_description": "Sua conta GitHub agora está conectada ao Plane",
+    "connect_personal_account": "Conectar Conta Pessoal",
+    "connect_personal_account_description": "Conecte sua conta GitHub pessoal com o Plane.",
+    "repo_mapping": "Mapeamento de Repositório",
+    "repo_mapping_description": "Mapeie seus repositórios do GitHub com projetos do Plane.",
+    "project_issue_sync": "Sincronização de Problema de Projeto",
+    "project_issue_sync_description": "Sincronize problemas do GitHub para seu projeto Plane",
+    "project_issue_sync_empty_state": "Sincronizações de problemas de projeto mapeadas aparecerão aqui",
+    "configure_project_issue_sync_state": "Configurar Estado de Sincronização de Problema",
+    "select_issue_sync_direction": "Selecionar Direção de Sincronização de Problema",
+    "allow_bidirectional_sync": "Bidirecional - Sincronize problemas e comentários em ambos os sentidos entre GitHub e Plane",
+    "allow_unidirectional_sync": "Unidirecional - Sincronize problemas e comentários do GitHub para o Plane apenas",
+    "allow_unidirectional_sync_warning": "Os dados do GitHub Issue substituirão os dados no Item de Trabalho Plane Vinculado (GitHub → Plane apenas)",
+    "remove_project_issue_sync": "Remover esta Sincronização de Problema de Projeto",
+    "remove_project_issue_sync_confirmation": "Tem certeza de que deseja remover esta sincronização de problema de projeto?",
+    "add_pr_state_mapping": "Adicionar Mapeamento de Estado de Pull Request para Projeto Plane",
+    "edit_pr_state_mapping": "Editar Mapeamento de Estado de Pull Request para Projeto Plane",
+    "pr_state_mapping": "Mapeamento de Estado de Pull Request",
+    "pr_state_mapping_description": "Mapeie os estados de pull request do GitHub para seu projeto Plane",
+    "pr_state_mapping_empty_state": "Estados de PR mapeados aparecerão aqui",
+    "remove_pr_state_mapping": "Remover este Mapeamento de Estado de Pull Request",
+    "remove_pr_state_mapping_confirmation": "Tem certeza de que deseja remover este mapeamento de estado de pull request?",
+    "issue_sync_message": "Itens de trabalho são sincronizados para {project}",
+    "link": "Vincular repositório do GitHub ao projeto do Plane",
+    "pull_request_automation": "Automação de Pull Request",
+    "pull_request_automation_description": "Configure o mapeamento de estado de pull request do GitHub para seu projeto Plane",
+    "DRAFT_MR_OPENED": "Draft Aberto",
+    "MR_OPENED": "Aberto",
+    "MR_READY_FOR_MERGE": "Pronto para Merge",
+    "MR_REVIEW_REQUESTED": "Revisão Requerida",
+    "MR_MERGED": "Mesclado",
+    "MR_CLOSED": "Fechado",
+    "ISSUE_OPEN": "Issue Aberto",
+    "ISSUE_CLOSED": "Issue Fechado",
+    "save": "Salvar",
+    "start_sync": "Iniciar Sincronização",
+    "choose_repository": "Escolher Repositório..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Conecte e sincronize seus Merge Requests do Gitlab com o Plane.",
+    "connection_fetch_error": "Erro ao buscar detalhes de conexão do servidor",
+    "connect_org": "Conectar Organização",
+    "connect_org_description": "Conecte sua organização do Gitlab com o Plane.",
+    "project_connections": "Conexões de Projeto do Gitlab",
+    "project_connections_description": "Sincronize merge requests do Gitlab para projetos do Plane.",
+    "plane_project_connection": "Conexão de Projeto do Plane",
+    "plane_project_connection_description": "Configure o mapeamento de estado de pull requests do Gitlab para projetos do Plane",
+    "remove_connection": "Remover Conexão",
+    "remove_connection_confirmation": "Tem certeza de que deseja remover esta conexão?",
+    "link": "Vincular repositório do Gitlab ao projeto do Plane",
+    "pull_request_automation": "Automação de Pull Request",
+    "pull_request_automation_description": "Configure o mapeamento de estado de pull request do Gitlab para o Plane",
+    "DRAFT_MR_OPENED": "Ao abrir MR rascunho, definir o estado para",
+    "MR_OPENED": "Ao abrir MR, definir o estado para",
+    "MR_REVIEW_REQUESTED": "Quando for solicitada revisão do MR, definir o estado para",
+    "MR_READY_FOR_MERGE": "Quando o MR estiver pronto para merge, definir o estado para",
+    "MR_MERGED": "Quando o MR for mesclado, definir o estado para",
+    "MR_CLOSED": "Quando o MR for fechado, definir o estado para",
+    "integration_enabled_text": "Com a integração do Gitlab ativada, você pode automatizar fluxos de trabalho de itens de trabalho",
+    "choose_entity": "Escolher Entidade",
+    "choose_project": "Escolher Projeto",
+    "link_plane_project": "Vincular projeto do Plane",
+    "project_issue_sync": "Sincronização de Issues do Projeto",
+    "project_issue_sync_description": "Sincronize issues do Gitlab para seu projeto Plane",
+    "project_issue_sync_empty_state": "A sincronização de issues do projeto mapeada aparecerá aqui",
+    "configure_project_issue_sync_state": "Configurar Estado de Sincronização de Issues",
+    "select_issue_sync_direction": "Selecione a direção de sincronização de issues",
+    "allow_bidirectional_sync": "Bidirecional - Sincronizar issues e comentários em ambas as direções entre Gitlab e Plane",
+    "allow_unidirectional_sync": "Unidirecional - Sincronizar issues e comentários apenas do Gitlab para o Plane",
+    "allow_unidirectional_sync_warning": "Dados do Gitlab Issue substituirão dados no Item de Trabalho do Plane vinculado (apenas Gitlab → Plane)",
+    "remove_project_issue_sync": "Remover esta Sincronização de Issues do Projeto",
+    "remove_project_issue_sync_confirmation": "Tem certeza de que deseja remover esta sincronização de issues do projeto?",
+    "ISSUE_OPEN": "Issue Aberta",
+    "ISSUE_CLOSED": "Issue Fechada",
+    "save": "Salvar",
+    "start_sync": "Iniciar Sincronização",
+    "choose_repository": "Escolher Repositório..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Conecte e sincronize sua instância do Gitlab Enterprise com o Plane.",
+    "app_form_title": "Configuração do Gitlab Enterprise",
+    "app_form_description": "Configure o Gitlab Enterprise para conectar com o Plane.",
+    "base_url_title": "URL Base",
+    "base_url_description": "A URL base da sua instância do Gitlab Enterprise.",
+    "base_url_placeholder": "ex. \"https://glab.plane.town\"",
+    "base_url_error": "URL base é obrigatória",
+    "invalid_base_url_error": "URL base inválida",
+    "client_id_title": "ID do App",
+    "client_id_description": "O ID do app que você criou na sua instância do Gitlab Enterprise.",
+    "client_id_placeholder": "ex. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "ID do App é obrigatório",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "O client secret do app que você criou na sua instância do Gitlab Enterprise.",
+    "client_secret_placeholder": "ex. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret é obrigatório",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Um webhook secret aleatório que será usado para verificar o webhook da instância do Gitlab Enterprise.",
+    "webhook_secret_placeholder": "ex. \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret é obrigatório",
+    "connect_app": "Conectar App"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Conecte seu workspace do Slack com o Plane.",
+    "connect_personal_account": "Conecte sua conta pessoal do Slack com o Plane.",
+    "personal_account_connected": "Sua conta pessoal do {providerName} agora está conectada ao Plane.",
+    "link_personal_account": "Vincule sua conta pessoal do {providerName} ao Plane.",
+    "connected_slack_workspaces": "Workspaces do Slack conectados",
+    "connected_on": "Conectado em {date}",
+    "disconnect_workspace": "Desconectar workspace {name}",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Receba notificações em mensagens diretas do Slack para atualizações importantes, lembretes e alertas apenas para você."
+      }
+    },
+    "project_updates": {
+      "title": "Atualizações de Projeto",
+      "description": "Configure notificações de atualizações de projetos para seus projetos",
+      "add_new_project_update": "Adicionar nova notificação de atualizações de projeto",
+      "project_updates_empty_state": "Projetos conectados com Canais do Slack aparecerão aqui.",
+      "project_updates_form": {
+        "title": "Configurar Atualizações de Projeto",
+        "description": "Receba notificações de atualizações de projeto no Slack quando itens de trabalho são criados",
+        "failed_to_load_channels": "Falha ao carregar canais do Slack",
+        "project_dropdown": {
+          "placeholder": "Selecione um projeto",
+          "label": "Projeto do Plane",
+          "no_projects": "Nenhum projeto disponível"
+        },
+        "channel_dropdown": {
+          "label": "Canal do Slack",
+          "placeholder": "Selecione um canal",
+          "no_channels": "Nenhum canal disponível"
+        },
+        "all_projects_connected": "Todos os projetos já estão conectados a canais do Slack.",
+        "all_channels_connected": "Todos os canais do Slack já estão conectados a projetos.",
+        "project_connection_success": "Conexão de projeto criada com sucesso",
+        "project_connection_updated": "Conexão de projeto atualizada com sucesso",
+        "project_connection_deleted": "Conexão de projeto excluída com sucesso",
+        "failed_delete_project_connection": "Falha ao excluir conexão de projeto",
+        "failed_create_project_connection": "Falha ao criar conexão de projeto",
+        "failed_upserting_project_connection": "Falha ao atualizar conexão de projeto",
+        "failed_loading_project_connections": "Não foi possível carregar suas conexões de projeto. Isso pode ser devido a um problema de rede ou um problema com a integração."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Conecte seu espaço de trabalho Sentry com o Plane.",
+    "connected_sentry_workspaces": "Espaços de trabalho Sentry conectados",
+    "connected_on": "Conectado em {date}",
+    "disconnect_workspace": "Desconectar espaço de trabalho {name}",
+    "state_mapping": {
+      "title": "Mapeamento de estado",
+      "description": "Mapeie os estados de incidente do Sentry para os estados do seu projeto. Configure quais estados usar quando um incidente do Sentry é resolvido ou não resolvido.",
+      "add_new_state_mapping": "Adicionar novo mapeamento de estado",
+      "empty_state": "Nenhum mapeamento de estado configurado. Crie seu primeiro mapeamento para sincronizar os estados de incidente do Sentry com os estados do seu projeto.",
+      "failed_loading_state_mappings": "Não conseguimos carregar seus mapeamentos de estado. Isso pode ser devido a um problema de rede ou um problema com a integração.",
+      "loading_project_states": "Carregando estados do projeto...",
+      "error_loading_states": "Erro ao carregar estados",
+      "no_states_available": "Nenhum estado disponível",
+      "no_permission_states": "Você não tem permissão para acessar os estados deste projeto",
+      "states_not_found": "Estados do projeto não encontrados",
+      "server_error_states": "Erro do servidor ao carregar estados"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Conecte e sincronize seus repositórios do Bitbucket Data Center com o Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Validar tokens de IdP externos para acesso à API.",
+    "header_description": "Valide tokens OIDC/JWT emitidos externamente pelo seu IdP (Azure AD, Okta, etc.) para acesso à API do Plane.",
+    "connected": "Conectado",
+    "connect": "Conectar",
+    "uninstall": "Desinstalar",
+    "uninstalling": "Desinstalando...",
+    "install_success": "OAuth Bridge instalado com sucesso.",
+    "install_error": "Falha ao instalar o OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge desinstalado.",
+    "uninstall_error": "Falha ao desinstalar o OAuth Bridge.",
+    "token_providers": "Provedores de tokens",
+    "token_providers_description": "Configure IdPs externos cujos JWTs são aceitos como credenciais de API.",
+    "add_provider": "Adicionar provedor",
+    "edit_provider": "Editar provedor",
+    "enabled": "Habilitado",
+    "disabled": "Desabilitado",
+    "test": "Testar",
+    "no_providers_title": "Nenhum provedor configurado.",
+    "no_providers_description": "Adicione um IdP para habilitar a autenticação por token externo.",
+    "provider_updated": "Provedor atualizado.",
+    "provider_added": "Provedor adicionado.",
+    "provider_save_error": "Falha ao salvar o provedor.",
+    "provider_deleted": "Provedor excluído.",
+    "provider_delete_error": "Falha ao excluir o provedor.",
+    "provider_update_error": "Falha ao atualizar o provedor.",
+    "jwks_reachable": "JWKS acessível",
+    "jwks_unreachable": "JWKS inacessível",
+    "jwks_test_error": "Não foi possível obter o JWKS da URL configurada.",
+    "provider_form": {
+      "name_label": "Nome",
+      "name_placeholder": "ex. Azure AD Production",
+      "name_description": "Rótulo legível para este provedor de identidade",
+      "name_required": "O nome é obrigatório.",
+      "issuer_label": "Emissor",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Valor esperado do claim iss no JWT",
+      "issuer_required": "O emissor é obrigatório.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "Endpoint HTTPS que fornece o JSON Web Key Set do provedor",
+      "jwks_url_required": "A URL JWKS é obrigatória.",
+      "jwks_url_https": "A URL JWKS deve usar HTTPS.",
+      "audience_label": "Audiência",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Claim(s) aud esperado(s) no JWT, separados por vírgula.",
+      "user_claims_label": "Claim do usuário",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "Claim JWT contendo o endereço de e-mail do usuário",
+      "user_claims_required": "O claim do usuário é obrigatório.",
+      "allowed_algorithms_label": "Algoritmos de assinatura permitidos",
+      "allowed_algorithms_description": "Algoritmos assimétricos aceitos para verificação de assinatura JWT",
+      "allowed_algorithms_required": "É necessário pelo menos um algoritmo.",
+      "select_algorithms": "Selecionar algoritmos",
+      "jwks_cache_ttl_label": "TTL do cache JWKS (segundos)",
+      "jwks_cache_ttl_description": "Tempo de cache das chaves JWKS do provedor (mínimo 60s, padrão 24 horas)",
+      "jwks_cache_ttl_min": "O TTL do cache deve ser de pelo menos 60 segundos.",
+      "rate_limit_label": "Limite de taxa",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Limitação de requisições como quantidade/período (ex. 120/minute). Deixe em branco para o limite padrão.",
+      "enable_provider": "Habilitar este provedor",
+      "saving": "Salvando...",
+      "update": "Atualizar"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Conecte e sincronize sua organização GitHub Enterprise com o Plane.",
+    "app_form_title": "Configuração do GitHub Enterprise",
+    "app_form_description": "Configure o GitHub Enterprise para conectar com o Plane.",
+    "app_id_title": "ID da Aplicação",
+    "app_id_description": "O ID da aplicação que você criou em sua organização GitHub Enterprise.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "ID da aplicação é obrigatório",
+    "app_name_title": "Slug da Aplicação",
+    "app_name_description": "O slug da aplicação que você criou em sua organização GitHub Enterprise.",
+    "app_name_error": "Slug da aplicação é obrigatório",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "URL Base",
+    "base_url_description": "A URL base da sua organização GitHub Enterprise.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "URL base é obrigatório",
+    "invalid_base_url_error": "URL base inválida",
+    "client_id_title": "ID do Cliente",
+    "client_id_description": "O ID do cliente da aplicação que você criou em sua organização GitHub Enterprise.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID do cliente é obrigatório",
+    "client_secret_title": "Secret do Cliente",
+    "client_secret_description": "O secret do cliente da aplicação que você criou em sua organização GitHub Enterprise.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Secret do cliente é obrigatório",
+    "webhook_secret_title": "Secret do Webhook",
+    "webhook_secret_description": "O secret do webhook da aplicação que você criou em sua organização GitHub Enterprise.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Secret do webhook é obrigatório",
+    "private_key_title": "Chave Privada (Base64 codificado)",
+    "private_key_description": "Chave privada da aplicação que você criou em sua organização GitHub Enterprise.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Chave privada é obrigatória",
+    "connect_app": "Conectar Aplicação"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Os parâmetros de consulta fornecidos são inválidos ou estão faltando campos obrigatórios",
+    "invalid_installation_account": "A conta de instalação fornecida não é válida",
+    "generic_error": "Ocorreu um erro inesperado ao processar sua solicitação",
+    "connection_not_found": "A conexão solicitada não pôde ser encontrada",
+    "multiple_connections_found": "Várias conexões foram encontradas quando apenas uma era esperada",
+    "cannot_create_multiple_connections": "Você já conectou sua organização a um espaço de trabalho. Por favor, desconecte a conexão existente antes de conectar uma nova.",
+    "installation_not_found": "A instalação solicitada não pôde ser encontrada",
+    "user_not_found": "O usuário solicitado não pôde ser encontrado",
+    "error_fetching_token": "Falha ao buscar token de autenticação",
+    "invalid_app_credentials": "As credenciais da aplicação fornecidas são inválidas",
+    "invalid_app_installation_id": "Falha ao instalar a aplicação"
+  },
+  "import_status": {
+    "queued": "Em fila",
+    "created": "Criado",
+    "initiated": "Iniciado",
+    "pulling": "Extraindo",
+    "timed_out": "Tempo limite esgotado",
+    "pulled": "Extraído",
+    "progressing": "Em progresso",
+    "transforming": "Transformando",
+    "transformed": "Transformado",
+    "pushing": "Enviando",
+    "finished": "Finalizado",
+    "error": "Erro",
+    "cancelled": "Cancelado"
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/module.json b/packages/i18n/src/locales/pt-BR/module.json
new file mode 100644
index 0000000..9503230
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Módulo} other {Módulos}}",
+    "no_module": "Nenhum módulo",
+    "select": "Adicionar módulos"
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/navigation.json b/packages/i18n/src/locales/pt-BR/navigation.json
new file mode 100644
index 0000000..c2a2d62
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Nenhum resultado encontrado"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Notas adesivas",
+    "your_work": "Seu trabalho",
+    "projects": "Projetos",
+    "pages": "Páginas",
+    "new_work_item": "Novo item",
+    "home": "Home",
+    "inbox": "Inbox",
+    "workspace": "Workspace",
+    "views": "Visualizações",
+    "analytics": "Analytics",
+    "work_items": "Itens",
+    "cycles": "Ciclos",
+    "modules": "Módulos",
+    "intake": "Intake",
+    "drafts": "Rascunhos",
+    "favorites": "Favoritos",
+    "pro": "Pro",
+    "upgrade": "Upgrade",
+    "pi_chat": "Chat AI",
+    "epics": "Épicos",
+    "upgrade_plan": "Atualizar plano",
+    "plane_pro": "Plane Pro",
+    "business": "Business"
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/notification.json b/packages/i18n/src/locales/pt-BR/notification.json
new file mode 100644
index 0000000..99dabce
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Caixa de entrada",
+    "page_label": "{workspace} - Caixa de entrada",
+    "options": {
+      "mark_all_as_read": "Marcar tudo como lido",
+      "mark_read": "Marcar como lido",
+      "mark_unread": "Marcar como não lido",
+      "refresh": "Atualizar",
+      "filters": "Filtros da caixa de entrada",
+      "show_unread": "Mostrar não lidos",
+      "show_snoozed": "Mostrar adiados",
+      "show_archived": "Mostrar arquivados",
+      "mark_archive": "Arquivar",
+      "mark_unarchive": "Desarquivar",
+      "mark_snooze": "Adiar",
+      "mark_unsnooze": "Reativar"
+    },
+    "toasts": {
+      "read": "Notificação marcada como lida",
+      "unread": "Notificação marcada como não lida",
+      "archived": "Notificação marcada como arquivada",
+      "unarchived": "Notificação marcada como não arquivada",
+      "snoozed": "Notificação adiada",
+      "unsnoozed": "Notificação reativada"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Selecione para ver os detalhes."
+      },
+      "all": {
+        "title": "Nenhum item de trabalho atribuído",
+        "description": "As atualizações para itens de trabalho atribuídos a você podem ser\nvistas aqui"
+      },
+      "mentions": {
+        "title": "Nenhum item de trabalho atribuído",
+        "description": "As atualizações para itens de trabalho atribuídos a você podem ser\nvistas aqui"
+      }
+    },
+    "tabs": {
+      "all": "Todos",
+      "mentions": "Menções"
+    },
+    "filter": {
+      "assigned": "Atribuído a mim",
+      "created": "Criado por mim",
+      "subscribed": "Inscrito por mim"
+    },
+    "snooze": {
+      "1_day": "1 dia",
+      "3_days": "3 dias",
+      "5_days": "5 dias",
+      "1_week": "1 semana",
+      "2_weeks": "2 semanas",
+      "custom": "Personalizado"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/page.json b/packages/i18n/src/locales/pt-BR/page.json
new file mode 100644
index 0000000..aaeb04a
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Estrutura",
+        "empty_state": {
+          "title": "Cabeçalhos ausentes",
+          "description": "Vamos adicionar alguns cabeçalhos nesta página para vê-los aqui."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Palavras",
+          "characters": "Caracteres",
+          "paragraphs": "Parágrafos",
+          "read_time": "Tempo de leitura"
+        },
+        "actors_info": {
+          "edited_by": "Editado por",
+          "created_by": "Criado por"
+        },
+        "version_history": {
+          "label": "Histórico de versões",
+          "current_version": "Versão atual",
+          "highlight_changes": "Destacar alterações"
+        }
+      },
+      "assets": {
+        "label": "Recursos",
+        "download_button": "Baixar",
+        "empty_state": {
+          "title": "Imagens ausentes",
+          "description": "Adicione imagens para vê-las aqui."
+        }
+      },
+      "comments": {
+        "label": "Comentários",
+        "empty_state": {
+          "title": "Nenhum comentário",
+          "description": "Adicione comentários para vê-los aqui."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "O nome da nota adesiva não pode ter mais de 100 caracteres.",
+        "already_exists": "Já existe uma nota adesiva sem descrição"
+      },
+      "created": {
+        "title": "Nota adesiva criada",
+        "message": "A nota adesiva foi criada com sucesso"
+      },
+      "not_created": {
+        "title": "Nota adesiva não criada",
+        "message": "A nota adesiva não pôde ser criada"
+      },
+      "updated": {
+        "title": "Nota adesiva atualizada",
+        "message": "A nota adesiva foi atualizada com sucesso"
+      },
+      "not_updated": {
+        "title": "Nota adesiva não atualizada",
+        "message": "A nota adesiva não pôde ser atualizada"
+      },
+      "removed": {
+        "title": "Nota adesiva removida",
+        "message": "A nota adesiva foi removida com sucesso"
+      },
+      "not_removed": {
+        "title": "Nota adesiva não removida",
+        "message": "A nota adesiva não pôde ser removida"
+      }
+    },
+    "open_button": "Abrir painel de navegação",
+    "close_button": "Fechar painel de navegação",
+    "outline_floating_button": "Abrir estrutura"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Mover",
+        "loading": "Movendo"
+      },
+      "cannot_move_to_teamspace": "Páginas privadas e compartilhadas não podem ser movidas para um espaço de equipe.",
+      "placeholders": {
+        "workspace_to_all": "Pesquisar por projetos e espaços de equipe",
+        "workspace_to_project": "Pesquisar por projetos",
+        "project_to_all": "Pesquisar por projetos e espaços de equipe",
+        "project_to_project": "Pesquisar por projetos",
+        "project_to_all_with_wiki": "Pesquisar coleções wiki, projetos e teamspaces",
+        "project_to_project_with_wiki": "Pesquisar coleções wiki e projetos"
+      },
+      "toasts": {
+        "success": {
+          "title": "Sucesso!",
+          "message": "Página movida com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Não foi possível mover a página. Tente novamente mais tarde."
+        },
+        "collection_error": {
+          "title": "Movida para o wiki",
+          "message": "A página foi movida para o wiki, mas não pôde ser adicionada à coleção selecionada. Ela permanece em General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Remover da coleção",
+      "success_message": "Página removida da coleção.",
+      "error_message": "Não foi possível remover a página da coleção. Tente novamente."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Limite de conteúdo atingido e a sincronização em tempo real está desativada. Crie uma nova página ou use páginas aninhadas para continuar sincronizando."
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/power-k.json b/packages/i18n/src/locales/pt-BR/power-k.json
new file mode 100644
index 0000000..3b22938
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Excluir itens de trabalho em massa"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Ações do item de trabalho",
+        "indicator": "Item de trabalho",
+        "change_state": "Alterar estado",
+        "change_priority": "Alterar prioridade",
+        "change_assignees": "Atribuir a",
+        "assign_to_me": "Atribuir a mim",
+        "unassign_from_me": "Remover minha atribuição",
+        "change_estimate": "Alterar estimativa",
+        "add_to_cycle": "Adicionar ao ciclo",
+        "add_to_modules": "Adicionar aos módulos",
+        "add_labels": "Adicionar etiquetas",
+        "subscribe": "Inscrever-se nas notificações",
+        "unsubscribe": "Cancelar inscrição nas notificações",
+        "delete": "Excluir",
+        "copy_id": "Copiar ID",
+        "copy_id_toast_success": "ID do item de trabalho copiado para a área de transferência.",
+        "copy_id_toast_error": "Ocorreu um erro ao copiar o ID do item de trabalho para a área de transferência.",
+        "copy_title": "Copiar título",
+        "copy_title_toast_success": "Título do item de trabalho copiado para a área de transferência.",
+        "copy_title_toast_error": "Ocorreu um erro ao copiar o título do item de trabalho para a área de transferência.",
+        "copy_url": "Copiar URL",
+        "copy_url_toast_success": "URL do item de trabalho copiada para a área de transferência.",
+        "copy_url_toast_error": "Ocorreu um erro ao copiar a URL do item de trabalho para a área de transferência."
+      },
+      "cycle": {
+        "title": "Ações do ciclo",
+        "indicator": "Ciclo",
+        "add_to_favorites": "Adicionar aos favoritos",
+        "remove_from_favorites": "Remover dos favoritos",
+        "copy_url": "Copiar URL",
+        "copy_url_toast_success": "URL do ciclo copiada para a área de transferência.",
+        "copy_url_toast_error": "Ocorreu um erro ao copiar a URL do ciclo para a área de transferência."
+      },
+      "module": {
+        "title": "Ações do módulo",
+        "indicator": "Módulo",
+        "add_remove_members": "Adicionar/remover membros",
+        "change_status": "Alterar status",
+        "add_to_favorites": "Adicionar aos favoritos",
+        "remove_from_favorites": "Remover dos favoritos",
+        "copy_url": "Copiar URL",
+        "copy_url_toast_success": "URL do módulo copiada para a área de transferência.",
+        "copy_url_toast_error": "Ocorreu um erro ao copiar a URL do módulo para a área de transferência."
+      },
+      "page": {
+        "title": "Ações da página",
+        "indicator": "Página",
+        "lock": "Bloquear",
+        "unlock": "Desbloquear",
+        "make_private": "Tornar privada",
+        "make_public": "Tornar pública",
+        "archive": "Arquivar",
+        "restore": "Restaurar",
+        "add_to_favorites": "Adicionar aos favoritos",
+        "remove_from_favorites": "Remover dos favoritos",
+        "copy_url": "Copiar URL",
+        "copy_url_toast_success": "URL da página copiada para a área de transferência.",
+        "copy_url_toast_error": "Ocorreu um erro ao copiar a URL da página para a área de transferência."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Novo item de trabalho",
+      "create_page": "Nova página",
+      "create_view": "Nova visualização",
+      "create_cycle": "Novo ciclo",
+      "create_module": "Novo módulo",
+      "create_project": "Novo projeto",
+      "create_workspace": "Novo espaço de trabalho",
+      "create_project_automation": "Nova automação"
+    },
+    "navigation_actions": {
+      "open_workspace": "Abrir um espaço de trabalho",
+      "nav_home": "Ir para a página inicial",
+      "nav_inbox": "Ir para a caixa de entrada",
+      "nav_your_work": "Ir para seu trabalho",
+      "nav_account_settings": "Ir para configurações da conta",
+      "open_project": "Abrir um projeto",
+      "nav_projects_list": "Ir para lista de projetos",
+      "nav_all_workspace_work_items": "Ir para todos os itens de trabalho",
+      "nav_assigned_workspace_work_items": "Ir para itens de trabalho atribuídos",
+      "nav_created_workspace_work_items": "Ir para itens de trabalho criados",
+      "nav_subscribed_workspace_work_items": "Ir para itens de trabalho inscritos",
+      "nav_workspace_analytics": "Ir para análises do espaço de trabalho",
+      "nav_workspace_drafts": "Ir para rascunhos do espaço de trabalho",
+      "nav_workspace_archives": "Ir para arquivos do espaço de trabalho",
+      "open_workspace_setting": "Abrir uma configuração do espaço de trabalho",
+      "nav_workspace_settings": "Ir para configurações do espaço de trabalho",
+      "nav_project_work_items": "Ir para itens de trabalho",
+      "open_project_cycle": "Abrir um ciclo",
+      "nav_project_cycles": "Ir para ciclos",
+      "open_project_module": "Abrir um módulo",
+      "nav_project_modules": "Ir para módulos",
+      "open_project_view": "Abrir uma visualização do projeto",
+      "nav_project_views": "Ir para visualizações do projeto",
+      "nav_project_pages": "Ir para páginas",
+      "nav_project_intake": "Ir para admissão",
+      "nav_project_archives": "Ir para arquivos do projeto",
+      "open_project_setting": "Abrir uma configuração do projeto",
+      "nav_project_settings": "Ir para configurações do projeto",
+      "nav_workspace_active_cycle": "Ir para todos os ciclos ativos",
+      "nav_project_overview": "Ir para visão geral do projeto"
+    },
+    "account_actions": {
+      "sign_out": "Sair",
+      "workspace_invites": "Convites do espaço de trabalho"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Alternar barra lateral do aplicativo",
+      "copy_current_page_url": "Copiar URL da página atual",
+      "copy_current_page_url_toast_success": "URL da página atual copiada para a área de transferência.",
+      "copy_current_page_url_toast_error": "Ocorreu um erro ao copiar a URL da página atual para a área de transferência.",
+      "focus_top_nav_search": "Focar campo de busca"
+    },
+    "preferences_actions": {
+      "update_theme": "Alterar tema da interface",
+      "update_timezone": "Alterar fuso horário",
+      "update_start_of_week": "Alterar primeiro dia da semana",
+      "update_language": "Alterar idioma da interface",
+      "toast": {
+        "theme": {
+          "success": "Tema atualizado com sucesso.",
+          "error": "Falha ao atualizar o tema. Tente novamente."
+        },
+        "timezone": {
+          "success": "Fuso horário atualizado com sucesso.",
+          "error": "Falha ao atualizar o fuso horário. Tente novamente."
+        },
+        "generic": {
+          "success": "Preferências atualizadas com sucesso.",
+          "error": "Falha ao atualizar as preferências. Tente novamente."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Abrir atalhos do teclado",
+      "open_plane_documentation": "Abrir documentação do Plane",
+      "join_forum": "Participar do nosso Fórum",
+      "report_bug": "Reportar um bug",
+      "chat_with_us": "Converse conosco"
+    },
+    "page_placeholders": {
+      "default": "Digite um comando ou pesquise",
+      "open_workspace": "Abrir um espaço de trabalho",
+      "open_project": "Abrir um projeto",
+      "open_workspace_setting": "Abrir uma configuração do espaço de trabalho",
+      "open_project_cycle": "Abrir um ciclo",
+      "open_project_module": "Abrir um módulo",
+      "open_project_view": "Abrir uma visualização do projeto",
+      "open_project_setting": "Abrir uma configuração do projeto",
+      "update_work_item_state": "Alterar estado",
+      "update_work_item_priority": "Alterar prioridade",
+      "update_work_item_assignee": "Atribuir a",
+      "update_work_item_estimate": "Alterar estimativa",
+      "update_work_item_cycle": "Adicionar ao ciclo",
+      "update_work_item_module": "Adicionar aos módulos",
+      "update_work_item_labels": "Adicionar etiquetas",
+      "update_module_member": "Alterar membros",
+      "update_module_status": "Alterar status",
+      "update_theme": "Alterar tema",
+      "update_timezone": "Alterar fuso horário",
+      "update_start_of_week": "Alterar primeiro dia da semana",
+      "update_language": "Alterar idioma"
+    },
+    "search_menu": {
+      "no_results": "Nenhum resultado encontrado",
+      "clear_search": "Limpar pesquisa",
+      "go_to_advanced_search": "Ir para pesquisa avançada"
+    },
+    "footer": {
+      "workspace_level": "Nível do espaço de trabalho"
+    },
+    "group_titles": {
+      "actions": "Ações",
+      "contextual": "Contextual",
+      "navigation": "Navegar",
+      "create": "Criar",
+      "general": "Geral",
+      "settings": "Configurações",
+      "account": "Conta",
+      "miscellaneous": "Diversos",
+      "preferences": "Preferências",
+      "help": "Ajuda"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/project-settings.json b/packages/i18n/src/locales/pt-BR/project-settings.json
new file mode 100644
index 0000000..401a26f
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Inserir ID do projeto",
+      "please_select_a_timezone": "Por favor, selecione um fuso horário",
+      "archive_project": {
+        "title": "Arquivar projeto",
+        "description": "Arquivar um projeto removerá seu projeto da navegação lateral, embora você ainda possa acessá-lo na página de projetos. Você pode restaurar o projeto ou excluí-lo quando quiser.",
+        "button": "Arquivar projeto"
+      },
+      "delete_project": {
+        "title": "Excluir projeto",
+        "description": "Ao excluir um projeto, todos os dados e recursos dentro desse projeto serão removidos permanentemente e não poderão ser recuperados.",
+        "button": "Excluir meu projeto"
+      },
+      "toast": {
+        "success": "Projeto atualizado com sucesso",
+        "error": "Não foi possível atualizar o projeto. Por favor, tente novamente."
+      }
+    },
+    "members": {
+      "label": "Membros",
+      "project_lead": "Líder do projeto",
+      "project_lead_description": "Selecione o líder do projeto.",
+      "default_assignee": "Responsável padrão",
+      "default_assignee_description": "Selecione o responsável padrão do projeto.",
+      "project_subscribers": "Assinantes do projeto",
+      "project_subscribers_description": "Selecione os membros que receberão notificações deste projeto.",
+      "guest_super_permissions": {
+        "title": "Conceder acesso de visualização a todos os itens de trabalho para usuários convidados:",
+        "sub_heading": "Isso permitirá que os convidados tenham acesso de visualização a todos os itens de trabalho do projeto."
+      },
+      "invite_members": {
+        "title": "Convidar membros",
+        "sub_heading": "Convide membros para trabalhar em seu projeto.",
+        "select_co_worker": "Selecionar colega de trabalho"
+      }
+    },
+    "states": {
+      "heading": "Estados",
+      "description": "Defina e personalize os estados de fluxo de trabalho para acompanhar o progresso dos seus itens de trabalho.",
+      "describe_this_state_for_your_members": "Descreva este estado para seus membros.",
+      "empty_state": {
+        "title": "Nenhum estado disponível para o grupo {groupKey}",
+        "description": "Por favor, crie um novo estado"
+      }
+    },
+    "labels": {
+      "heading": "Etiquetas",
+      "description": "Crie etiquetas personalizadas para categorizar e organizar seus itens de trabalho",
+      "label_title": "Título da etiqueta",
+      "label_title_is_required": "O título da etiqueta é obrigatório",
+      "label_max_char": "O nome da etiqueta não deve exceder 255 caracteres",
+      "toast": {
+        "error": "Erro ao atualizar a etiqueta"
+      }
+    },
+    "estimates": {
+      "heading": "Estimativas",
+      "description": "Elas ajudam você a comunicar a complexidade e a carga de trabalho da equipe.",
+      "label": "Estimativas",
+      "title": "Habilitar estimativas para meu projeto",
+      "enable_description": "Elas ajudam você a comunicar a complexidade e a carga de trabalho da equipe.",
+      "no_estimate": "Sem estimativa",
+      "new": "Novo sistema de estimativa",
+      "create": {
+        "custom": "Personalizado",
+        "start_from_scratch": "Começar do zero",
+        "choose_template": "Escolher um modelo",
+        "choose_estimate_system": "Escolher um sistema de estimativa",
+        "enter_estimate_point": "Inserir estimativa",
+        "step": "Passo {step} de {total}",
+        "label": "Criar estimativa"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Estimativa criada",
+            "message": "A estimativa foi criada com sucesso"
+          },
+          "error": {
+            "title": "Falha na criação da estimativa",
+            "message": "Não foi possível criar a nova estimativa, por favor tente novamente."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Estimativa modificada",
+            "message": "A estimativa foi atualizada em seu projeto."
+          },
+          "error": {
+            "title": "Falha na modificação da estimativa",
+            "message": "Não foi possível modificar a estimativa, por favor tente novamente"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Sucesso!",
+            "message": "As estimativas foram habilitadas."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Sucesso!",
+            "message": "As estimativas foram desabilitadas."
+          },
+          "error": {
+            "title": "Erro!",
+            "message": "Não foi possível desabilitar a estimativa. Por favor, tente novamente"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Estimativas reordenadas",
+            "message": "As estimativas foram reordenadas no seu projeto."
+          },
+          "error": {
+            "title": "Falha ao reordenar estimativas",
+            "message": "Não foi possível reordenar as estimativas, tente novamente"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Sistema de estimativa criado",
+            "message": "Criado e habilitado com sucesso"
+          },
+          "error": {
+            "title": "Erro",
+            "message": "Algo deu errado"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "A estimativa precisa ser maior que 0.",
+        "unable_to_process": "Não foi possível processar sua solicitação, por favor tente novamente.",
+        "numeric": "A estimativa precisa ser um valor numérico.",
+        "character": "A estimativa precisa ser um valor em caracteres.",
+        "empty": "O valor da estimativa não pode estar vazio.",
+        "already_exists": "O valor da estimativa já existe.",
+        "unsaved_changes": "Você tem algumas alterações não salvas. Por favor, salve-as antes de clicar em concluir",
+        "remove_empty": "A estimativa não pode estar vazia. Insira um valor em cada campo ou remova aqueles para os quais você não tem valores.",
+        "fill": "Por favor, preencha este campo de estimativa",
+        "repeat": "O valor da estimativa não pode ser repetido"
+      },
+      "systems": {
+        "points": {
+          "label": "Pontos",
+          "fibonacci": "Fibonacci",
+          "linear": "Linear",
+          "squares": "Quadrados",
+          "custom": "Personalizado"
+        },
+        "categories": {
+          "label": "Categorias",
+          "t_shirt_sizes": "Tamanhos de Camiseta",
+          "easy_to_hard": "Fácil a difícil",
+          "custom": "Personalizado"
+        },
+        "time": {
+          "label": "Tempo",
+          "hours": "Horas"
+        }
+      },
+      "edit": {
+        "title": "Editar sistema de estimativas",
+        "add_or_update": {
+          "title": "Adicionar, atualizar ou remover estimativas",
+          "description": "Gerencie o sistema atual adicionando, atualizando ou removendo os pontos ou categorias."
+        },
+        "switch": {
+          "title": "Alterar tipo de estimativa",
+          "description": "Converta seu sistema de pontos em sistema de categorias e vice-versa."
+        }
+      },
+      "switch": "Alternar sistema de estimativas",
+      "current": "Sistema de estimativas atual",
+      "select": "Selecione um sistema de estimativas"
+    },
+    "automations": {
+      "label": "Automações",
+      "heading": "Automações",
+      "description": "Configure ações automatizadas para otimizar seu fluxo de trabalho de gerenciamento de projetos e reduzir tarefas manuais.",
+      "auto-archive": {
+        "title": "Arquivar automaticamente itens de trabalho fechados",
+        "description": "O Plane arquivará automaticamente os itens de trabalho que foram concluídos ou cancelados.",
+        "duration": "Arquivar automaticamente itens de trabalho que estão fechados por"
+      },
+      "auto-close": {
+        "title": "Fechar automaticamente itens de trabalho",
+        "description": "O Plane fechará automaticamente os itens de trabalho que não foram concluídos ou cancelados.",
+        "duration": "Fechar automaticamente itens de trabalho que estão inativos por",
+        "auto_close_status": "Status de fechamento automático"
+      },
+      "auto-remind": {
+        "title": "Avisos automáticos",
+        "description": "O Plane enviará avisos automáticos via e-mail e notificações no aplicativo para manter sua equipe no caminho dos prazos.",
+        "duration": "Enviar aviso antes"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Nenhuma etiqueta ainda",
+        "description": "Crie etiquetas para ajudar a organizar e filtrar itens de trabalho em seu projeto."
+      },
+      "estimates": {
+        "title": "Nenhum sistema de estimativa ainda",
+        "description": "Crie um conjunto de estimativas para comunicar a quantidade de trabalho por item de trabalho.",
+        "primary_button": "Adicionar sistema de estimativa"
+      },
+      "integrations": {
+        "title": "Nenhuma integração configurada",
+        "description": "Configure o GitHub e outras integrações para sincronizar os itens de trabalho do seu projeto."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Habilitar fluxos de trabalho",
+        "description": "Defina fluxos de trabalho para controlar a movimentação dos itens de trabalho",
+        "no_states_tooltip": "Nenhum estado foi adicionado ao fluxo de trabalho.",
+        "no_work_item_types_tooltip": "Nenhum tipo de item de trabalho foi adicionado ao fluxo de trabalho.",
+        "no_states_or_work_item_types_tooltip": "Nenhum estado ou tipo de item de trabalho foi adicionado ao fluxo de trabalho.",
+        "toast": {
+          "loading": {
+            "enabling": "Habilitando fluxos de trabalho",
+            "disabling": "Desabilitando fluxos de trabalho"
+          },
+          "success": {
+            "title": "Sucesso!",
+            "message": "Fluxos de trabalho habilitados com sucesso."
+          },
+          "error": {
+            "title": "Erro!",
+            "message": "Falha ao habilitar os fluxos de trabalho. Tente novamente."
+          }
+        }
+      },
+      "heading": "Fluxos de trabalho",
+      "description": "Automatize as transições dos itens de trabalho e defina regras para controlar como as tarefas avançam pelo fluxo do seu projeto.",
+      "add_button": "Adicionar novo fluxo de trabalho",
+      "search": "Pesquisar fluxos de trabalho",
+      "detail": {
+        "define": "Definir fluxo de trabalho",
+        "add_states": "Adicionar estados",
+        "unmapped_states": {
+          "title": "Estados não mapeados detectados",
+          "description": "Alguns itens de trabalho dos tipos selecionados estão atualmente em estados que não existem neste fluxo de trabalho.",
+          "note": "Se você habilitar este fluxo de trabalho, esses itens serão movidos automaticamente para o estado inicial deste fluxo de trabalho.",
+          "label": "Estados ausentes",
+          "tooltip": "Alguns itens de trabalho estão em estados que não estão mapeados para este fluxo de trabalho. Abra o fluxo de trabalho para revisar."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Todos os estados estão em uso",
+          "description": "Todos os estados definidos para este projeto já estão presentes no seu fluxo de trabalho atual."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Este fluxo de trabalho se aplica a qualquer tipo de item de trabalho que não esteja atribuído a um fluxo de trabalho."
+      },
+      "create": {
+        "heading": "Criar novo fluxo de trabalho",
+        "name": {
+          "placeholder": "Adicione um nome único",
+          "validation": {
+            "max_length": "O nome deve ter menos de 255 caracteres",
+            "required": "O nome é obrigatório",
+            "invalid": "O nome só pode conter letras, números, espaços, hifens e apóstrofos"
+          }
+        },
+        "description": {
+          "placeholder": "Adicione uma breve descrição",
+          "validation": {
+            "invalid": "A descrição só pode conter letras, números, espaços, hifens e apóstrofos"
+          }
+        },
+        "work_item_type": {
+          "label": "Tipo de item de trabalho"
+        },
+        "success": {
+          "title": "Sucesso!",
+          "message": "Fluxo de trabalho criado com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Falha ao criar o fluxo de trabalho. Tente novamente."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Sucesso!",
+          "message": "Fluxo de trabalho atualizado com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Falha ao atualizar o fluxo de trabalho. Tente novamente."
+        }
+      },
+      "delete": {
+        "loading": "Excluindo fluxo de trabalho",
+        "success": {
+          "title": "Sucesso!",
+          "message": "Fluxo de trabalho excluído com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Falha ao excluir o fluxo de trabalho. Tente novamente."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Sucesso!",
+          "message": "Estados adicionados com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Falha ao adicionar estados. Tente novamente."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Tipos de item de trabalho",
+      "description": "Crie e personalize diferentes tipos de itens de trabalho com propriedades únicas"
+    },
+    "features": {
+      "cycles": {
+        "title": "Ciclos",
+        "short_title": "Ciclos",
+        "description": "Agende o trabalho em períodos flexíveis que se adaptam ao ritmo e ao tempo únicos deste projeto.",
+        "toggle_title": "Ativar ciclos",
+        "toggle_description": "Planeje o trabalho em períodos de tempo focados."
+      },
+      "modules": {
+        "title": "Módulos",
+        "short_title": "Módulos",
+        "description": "Organize o trabalho em subprojetos com líderes e responsáveis dedicados.",
+        "toggle_title": "Ativar módulos",
+        "toggle_description": "Os membros do projeto poderão criar e editar módulos."
+      },
+      "views": {
+        "title": "Visualizações",
+        "short_title": "Visualizações",
+        "description": "Salve ordenações, filtros e opções de exibição personalizadas ou compartilhe-as com sua equipe.",
+        "toggle_title": "Ativar visualizações",
+        "toggle_description": "Os membros do projeto poderão criar e editar visualizações."
+      },
+      "pages": {
+        "title": "Páginas",
+        "short_title": "Páginas",
+        "description": "Crie e edite conteúdo livre: notas, documentos, qualquer coisa.",
+        "toggle_title": "Ativar páginas",
+        "toggle_description": "Os membros do projeto poderão criar e editar páginas."
+      },
+      "intake": {
+        "intake_responsibility": "Responsabilidade de recebimento",
+        "intake_sources": "Fontes de recebimento",
+        "title": "Recepção",
+        "short_title": "Recepção",
+        "description": "Permita que não membros compartilhem bugs, feedback e sugestões; sem interromper seu fluxo de trabalho.",
+        "toggle_title": "Ativar recepção",
+        "toggle_description": "Permitir que membros do projeto criem solicitações de recepção no aplicativo.",
+        "toggle_tooltip_on": "Peça ao administrador do projeto para ativar.",
+        "toggle_tooltip_off": "Peça ao administrador do projeto para desativar.",
+        "notify_assignee": {
+          "title": "Notificar responsáveis",
+          "description": "Para uma nova solicitação de recebimento, os responsáveis padrão serão alertados via notificações"
+        },
+        "in_app": {
+          "title": "No aplicativo",
+          "description": "Receba novos itens de trabalho de membros e convidados do seu espaço de trabalho sem perturbar os existentes."
+        },
+        "email": {
+          "title": "E-mail",
+          "description": "Colete novos itens de trabalho de qualquer pessoa que envie um e-mail para um endereço Plane.",
+          "fieldName": "ID do e-mail"
+        },
+        "form": {
+          "title": "Formulários",
+          "description": "Permita que pessoas fora do seu espaço de trabalho criem possíveis novos itens de trabalho por meio de um formulário dedicado e seguro.",
+          "fieldName": "URL do formulário padrão",
+          "create_forms": "Criar formulários usando tipos de itens de trabalho",
+          "manage_forms": "Gerenciar formulários",
+          "manage_forms_tooltip": "Peça ao administrador do espaço de trabalho para gerenciar.",
+          "create_form": "Criar formulário",
+          "edit_form": "Editar detalhes do formulário",
+          "form_title": "Título do formulário",
+          "form_title_required": "O título do formulário é obrigatório",
+          "work_item_type": "Tipo de item de trabalho",
+          "remove_property": "Remover propriedade",
+          "select_properties": "Selecionar propriedades",
+          "search_placeholder": "Pesquisar propriedades",
+          "toasts": {
+            "success_create": "Formulário de recebimento criado com sucesso",
+            "success_update": "Formulário de recebimento atualizado com sucesso",
+            "error_create": "Falha ao criar formulário de recebimento",
+            "error_update": "Falha ao atualizar formulário de recebimento"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Definindo responsáveis...",
+            "success": {
+              "title": "Sucesso!",
+              "message": "Responsáveis definidos com sucesso."
+            },
+            "error": {
+              "title": "Erro!",
+              "message": "Algo deu errado ao definir os responsáveis. Por favor, tente novamente."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Rastreamento de tempo",
+        "short_title": "Rastreamento de tempo",
+        "description": "Registre o tempo gasto em itens de trabalho e projetos.",
+        "toggle_title": "Ativar rastreamento de tempo",
+        "toggle_description": "Os membros do projeto poderão registrar o tempo trabalhado."
+      },
+      "milestones": {
+        "title": "Marcos",
+        "short_title": "Marcos",
+        "description": "Os marcos fornecem uma camada para alinhar itens de trabalho em direção a datas de conclusão compartilhadas.",
+        "toggle_title": "Ativar marcos",
+        "toggle_description": "Organize itens de trabalho por prazos de marcos."
+      },
+      "toasts": {
+        "loading": "Atualizando recurso do projeto...",
+        "success": "Recurso do projeto atualizado com sucesso.",
+        "error": "Algo deu errado ao atualizar o recurso do projeto. Por favor, tente novamente."
+      }
+    },
+    "project_updates": {
+      "heading": "Atualizações do projeto",
+      "description": "Acompanhamento consolidado e monitoramento do progresso para este projeto"
+    },
+    "templates": {
+      "heading": "Modelos",
+      "description": "Economize 80% do tempo gasto na criação de projetos, itens de trabalho e páginas quando você usar modelos."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Agendamento automático de ciclos",
+        "description": "Mantenha os ciclos em movimento sem configuração manual.",
+        "tooltip": "Crie automaticamente novos ciclos com base na programação escolhida.",
+        "edit_button": "Editar",
+        "form": {
+          "cycle_title": {
+            "label": "Título do ciclo",
+            "placeholder": "Título",
+            "tooltip": "O título será acrescido de números para os ciclos subsequentes. Por exemplo: Design - 1/2/3",
+            "validation": {
+              "required": "O título do ciclo é obrigatório",
+              "max_length": "O título não deve exceder 255 caracteres"
+            }
+          },
+          "cycle_duration": {
+            "label": "Duração do ciclo",
+            "unit": "Semanas",
+            "validation": {
+              "required": "A duração do ciclo é obrigatória",
+              "min": "A duração do ciclo deve ser de pelo menos 1 semana",
+              "max": "A duração do ciclo não pode exceder 30 semanas",
+              "positive": "A duração do ciclo deve ser positiva"
+            }
+          },
+          "cooldown_period": {
+            "label": "Período de resfriamento",
+            "unit": "dias",
+            "tooltip": "Pausa entre ciclos antes do início do próximo.",
+            "validation": {
+              "required": "O período de resfriamento é obrigatório",
+              "negative": "O período de resfriamento não pode ser negativo"
+            }
+          },
+          "start_date": {
+            "label": "Dia de início do ciclo",
+            "validation": {
+              "required": "A data de início é obrigatória",
+              "past": "A data de início não pode estar no passado"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Número de ciclos futuros",
+            "validation": {
+              "required": "O número de ciclos é obrigatório",
+              "min": "Pelo menos 1 ciclo é obrigatório",
+              "max": "Não é possível agendar mais de 3 ciclos"
+            }
+          },
+          "auto_rollover": {
+            "label": "Transferência automática de itens de trabalho",
+            "tooltip": "No dia em que um ciclo for concluído, mover todos os itens de trabalho não concluídos para o próximo ciclo."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Ativando agendamento automático de ciclos",
+            "loading_disable": "Desativando agendamento automático de ciclos",
+            "success": {
+              "title": "Sucesso!",
+              "message": "Agendamento automático de ciclos ativado com sucesso."
+            },
+            "error": {
+              "title": "Erro!",
+              "message": "Falha ao ativar o agendamento automático de ciclos."
+            }
+          },
+          "save": {
+            "loading": "Salvando configuração de agendamento automático de ciclos",
+            "success": {
+              "title": "Sucesso!",
+              "message_create": "Configuração de agendamento automático de ciclos salva com sucesso.",
+              "message_update": "Configuração de agendamento automático de ciclos atualizada com sucesso."
+            },
+            "error": {
+              "title": "Erro!",
+              "message_create": "Falha ao salvar a configuração de agendamento automático de ciclos.",
+              "message_update": "Falha ao atualizar a configuração de agendamento automático de ciclos."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/project.json b/packages/i18n/src/locales/pt-BR/project.json
new file mode 100644
index 0000000..2bd0970
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Criado em",
+      "updated_at": "Atualizado em",
+      "name": "Nome"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Adicionar ciclo",
+    "more_details": "Mais detalhes",
+    "cycle": "Ciclo",
+    "update_cycle": "Atualizar ciclo",
+    "create_cycle": "Criar ciclo",
+    "no_matching_cycles": "Nenhum ciclo correspondente",
+    "remove_filters_to_see_all_cycles": "Remova os filtros para ver todos os ciclos",
+    "remove_search_criteria_to_see_all_cycles": "Remova os critérios de pesquisa para ver todos os ciclos",
+    "only_completed_cycles_can_be_archived": "Apenas ciclos concluídos podem ser arquivados",
+    "start_date": "Data de início",
+    "end_date": "Data de término",
+    "in_your_timezone": "No seu fuso horário",
+    "transfer_work_items": "Transferir {count} itens de trabalho",
+    "transfer": {
+      "no_cycles_available": "Não há outros ciclos disponíveis para transferir itens de trabalho."
+    },
+    "date_range": "Intervalo de datas",
+    "add_date": "Adicionar data",
+    "active_cycle": {
+      "label": "Ciclo ativo",
+      "progress": "Progresso",
+      "chart": "Gráfico de burndown",
+      "priority_issue": "Itens de trabalho prioritários",
+      "assignees": "Responsáveis",
+      "issue_burndown": "Burndown de itens de trabalho",
+      "ideal": "Ideal",
+      "current": "Atual",
+      "labels": "Etiquetas",
+      "trailing": "Atrasado",
+      "leading": "Adiantado"
+    },
+    "upcoming_cycle": {
+      "label": "Próximo ciclo"
+    },
+    "completed_cycle": {
+      "label": "Ciclo concluído"
+    },
+    "status": {
+      "days_left": "Dias restantes",
+      "completed": "Concluído",
+      "yet_to_start": "Ainda não começou",
+      "in_progress": "Em progresso",
+      "draft": "Rascunho"
+    },
+    "action": {
+      "restore": {
+        "title": "Restaurar ciclo",
+        "success": {
+          "title": "Ciclo restaurado",
+          "description": "O ciclo foi restaurado."
+        },
+        "failed": {
+          "title": "Falha ao restaurar o ciclo",
+          "description": "Não foi possível restaurar o ciclo. Por favor, tente novamente."
+        }
+      },
+      "favorite": {
+        "loading": "Adicionando ciclo aos favoritos",
+        "success": {
+          "description": "Ciclo adicionado aos favoritos.",
+          "title": "Sucesso!"
+        },
+        "failed": {
+          "description": "Não foi possível adicionar o ciclo aos favoritos. Por favor, tente novamente.",
+          "title": "Erro!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Removendo ciclo dos favoritos",
+        "success": {
+          "description": "Ciclo removido dos favoritos.",
+          "title": "Sucesso!"
+        },
+        "failed": {
+          "description": "Não foi possível remover o ciclo dos favoritos. Por favor, tente novamente.",
+          "title": "Erro!"
+        }
+      },
+      "update": {
+        "loading": "Atualizando ciclo",
+        "success": {
+          "description": "Ciclo atualizado com sucesso.",
+          "title": "Sucesso!"
+        },
+        "failed": {
+          "description": "Erro ao atualizar o ciclo. Por favor, tente novamente.",
+          "title": "Erro!"
+        },
+        "error": {
+          "already_exists": "Você já tem um ciclo nas datas fornecidas, se você quiser criar um ciclo de rascunho, você pode fazer isso removendo ambas as datas."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Agrupe e defina prazos para seu trabalho em Ciclos.",
+        "description": "Divida o trabalho em partes com prazos definidos, trabalhe de trás para frente a partir do prazo do seu projeto para definir datas e faça um progresso tangível como equipe.",
+        "primary_button": {
+          "text": "Defina seu primeiro ciclo",
+          "comic": {
+            "title": "Ciclos são caixas de tempo repetitivas.",
+            "description": "Uma sprint, uma iteração ou qualquer outro termo que você use para rastreamento semanal ou quinzenal do trabalho é um ciclo."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Nenhum item de trabalho adicionado ao ciclo",
+        "description": "Adicione ou crie itens de trabalho que você deseja definir prazos e entregar dentro deste ciclo",
+        "primary_button": {
+          "text": "Criar novo item de trabalho"
+        },
+        "secondary_button": {
+          "text": "Adicionar item de trabalho existente"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Nenhum item de trabalho no ciclo",
+        "description": "Nenhum item de trabalho no ciclo. Os itens de trabalho são transferidos ou ocultos. Para ver os itens de trabalho ocultos, se houver, atualize suas propriedades de exibição de acordo."
+      },
+      "active": {
+        "title": "Nenhum ciclo ativo",
+        "description": "Um ciclo ativo inclui qualquer período que abranja a data de hoje dentro de seu intervalo. Encontre o progresso e os detalhes do ciclo ativo aqui."
+      },
+      "archived": {
+        "title": "Nenhum ciclo arquivado ainda",
+        "description": "Para organizar seu projeto, arquive os ciclos concluídos. Encontre-os aqui quando forem arquivados."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Salve visualizações filtradas para o seu projeto. Crie quantas precisar",
+        "description": "As visualizações são um conjunto de filtros salvos que você usa com frequência ou deseja acesso fácil. Todos os seus colegas em um projeto podem ver as visualizações de todos e escolher o que melhor se adapta às suas necessidades.",
+        "primary_button": {
+          "text": "Crie sua primeira visualização",
+          "comic": {
+            "title": "As visualizações funcionam sobre as propriedades do item de trabalho.",
+            "description": "Você pode criar uma visualização a partir daqui com quantas propriedades como filtros que você achar adequado."
+          }
+        },
+        "filter": {
+          "title": "Nenhuma visualização correspondente",
+          "description": "Nenhuma visualização corresponde aos critérios de pesquisa.\n Crie uma nova visualização em vez disso."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Ainda não há itens de trabalho arquivados",
+        "description": "Manualmente ou através de automação, você pode arquivar itens de trabalho concluídos ou cancelados. Encontre-os aqui depois de arquivados.",
+        "primary_button": {
+          "text": "Definir automação"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Nenhum item de trabalho encontrado correspondente aos filtros aplicados",
+        "secondary_button": {
+          "text": "Limpar todos os filtros"
+        }
+      },
+      "public": {
+        "title": "Ainda não há páginas públicas",
+        "description": "Veja aqui as páginas compartilhadas com todos do seu projeto.",
+        "primary_button": {
+          "text": "Crie sua primeira página"
+        }
+      },
+      "archived": {
+        "title": "Ainda não há páginas arquivadas",
+        "description": "Arquive páginas que não estão no seu radar. Acesse-as aqui quando precisar."
+      },
+      "shared": {
+        "title": "Ainda não há páginas compartilhadas",
+        "description": "As páginas que outros compartilharam com você aparecerão aqui."
+      }
+    },
+    "delete_view": {
+      "title": "Tem certeza de que deseja excluir esta visualização?",
+      "content": "Se você confirmar, todas as opções de classificação, filtro e exibição + o layout que você escolheu para esta visualização serão excluídos permanentemente sem nenhuma maneira de restaurá-los."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Crie um item de trabalho e atribua-o a alguém, mesmo a você mesmo",
+        "description": "Pense nos itens de trabalho como tarefas, trabalhos ou JTBD. O que nós gostamos. Um item de trabalho e seus subitens de trabalho são geralmente acionáveis baseados no tempo atribuídos aos membros de sua equipe. Sua equipe cria, atribui e conclui itens de trabalho para mover seu projeto em direção à sua meta.",
+        "primary_button": {
+          "text": "Crie seu primeiro item de trabalho",
+          "comic": {
+            "title": "Os itens de trabalho são blocos de construção no Plane.",
+            "description": "Redesenhar a interface do usuário do Plane, reformular a marca da empresa ou lançar o novo sistema de injeção de combustível são exemplos de itens de trabalho que provavelmente têm subitens de trabalho."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Nenhum item de trabalho arquivado ainda",
+        "description": "Manualmente ou por meio de automação, você pode arquivar itens de trabalho que foram concluídos ou cancelados. Encontre-os aqui quando forem arquivados.",
+        "primary_button": {
+          "text": "Definir automação"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Nenhum item de trabalho encontrado correspondendo aos filtros aplicados",
+        "secondary_button": {
+          "text": "Limpar todos os filtros"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Adicionar Módulo",
+    "update_module": "Atualizar Módulo",
+    "create_module": "Criar Módulo",
+    "archive_module": "Arquivar Módulo",
+    "restore_module": "Restaurar Módulo",
+    "delete_module": "Excluir módulo",
+    "empty_state": {
+      "general": {
+        "title": "Mapeie os marcos do seu projeto para Módulos e rastreie o trabalho agregado facilmente.",
+        "description": "Um grupo de itens de trabalho que pertencem a um pai lógico e hierárquico forma um módulo. Pense neles como uma forma de rastrear o trabalho por marcos do projeto. Eles têm seus próprios períodos e prazos, bem como análises para ajudá-lo a ver o quão perto ou longe você está de um marco.",
+        "primary_button": {
+          "text": "Construa seu primeiro módulo",
+          "comic": {
+            "title": "Os módulos ajudam a agrupar o trabalho por hierarquia.",
+            "description": "Um módulo de carrinho, um módulo de chassi e um módulo de armazém são todos bons exemplos desse agrupamento."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Nenhum item de trabalho no módulo",
+        "description": "Crie ou adicione itens de trabalho que você deseja realizar como parte deste módulo",
+        "primary_button": {
+          "text": "Criar novos itens de trabalho"
+        },
+        "secondary_button": {
+          "text": "Adicionar um item de trabalho existente"
+        }
+      },
+      "archived": {
+        "title": "Nenhum Módulo arquivado ainda",
+        "description": "Para organizar seu projeto, arquive os módulos concluídos ou cancelados. Encontre-os aqui quando forem arquivados."
+      },
+      "sidebar": {
+        "in_active": "Este módulo ainda não está ativo.",
+        "invalid_date": "Data inválida. Por favor, insira uma data válida."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Arquivar módulo",
+      "archive_module_description": "Apenas módulos concluídos ou cancelados\npodem ser arquivados.",
+      "delete_module": "Excluir módulo"
+    },
+    "toast": {
+      "copy": {
+        "success": "Link do módulo copiado para a área de transferência"
+      },
+      "delete": {
+        "success": "Módulo excluído com sucesso",
+        "error": "Falha ao excluir o módulo"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Escreva uma nota, um documento ou uma base de conhecimento completa. Peça a Galileo, o assistente de IA do Plane, para ajudá-lo a começar",
+        "description": "As páginas são espaço para registrar pensamentos no Plane. Anote notas de reunião, formate-as facilmente, incorpore itens de trabalho, organize-os usando uma biblioteca de componentes e mantenha-os todos no contexto do seu projeto. Para facilitar qualquer documento, invoque Galileo, a IA do Plane, com um atalho ou o clique de um botão.",
+        "primary_button": {
+          "text": "Crie sua primeira página"
+        }
+      },
+      "private": {
+        "title": "Nenhuma página privada ainda",
+        "description": "Mantenha seus pensamentos privados aqui. Quando estiver pronto para compartilhar, a equipe está a apenas um clique de distância.",
+        "primary_button": {
+          "text": "Crie sua primeira página"
+        }
+      },
+      "public": {
+        "title": "Nenhuma página pública ainda",
+        "description": "Veja as páginas compartilhadas com todos em seu projeto aqui mesmo.",
+        "primary_button": {
+          "text": "Crie sua primeira página"
+        }
+      },
+      "archived": {
+        "title": "Nenhuma página arquivada ainda",
+        "description": "Arquive as páginas que não estão no seu radar. Acesse-as aqui quando necessário."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "A Admissão não está habilitado para o projeto.",
+        "description": "A Admissão ajuda você a gerenciar as solicitações recebidas para o seu projeto e adicioná-las como itens de trabalho em seu fluxo de trabalho. Habilite a admissão nas configurações do projeto para gerenciar as solicitações.",
+        "primary_button": {
+          "text": "Gerenciar funcionalidades"
+        }
+      },
+      "cycle": {
+        "title": "Os ciclos não estão habilitados para este projeto.",
+        "description": "Divida o trabalho em partes com prazos definidos, trabalhe de trás para frente a partir do prazo do seu projeto para definir datas e faça um progresso tangível como equipe. Habilite o recurso de ciclos para o seu projeto para começar a usá-los.",
+        "primary_button": {
+          "text": "Gerenciar funcionalidades"
+        }
+      },
+      "module": {
+        "title": "Os módulos não estão habilitados para o projeto.",
+        "description": "Os módulos são os blocos de construção do seu projeto. Habilite os módulos nas configurações do projeto para começar a usá-los.",
+        "primary_button": {
+          "text": "Gerenciar funcionalidades"
+        }
+      },
+      "page": {
+        "title": "As páginas não estão habilitadas para o projeto.",
+        "description": "As páginas são os blocos de construção do seu projeto. Habilite as páginas nas configurações do projeto para começar a usá-las.",
+        "primary_button": {
+          "text": "Gerenciar funcionalidades"
+        }
+      },
+      "view": {
+        "title": "As visualizações não estão habilitadas para o projeto.",
+        "description": "As visualizações são os blocos de construção do seu projeto. Habilite as visualizações nas configurações do projeto para começar a usá-las.",
+        "primary_button": {
+          "text": "Gerenciar funcionalidades"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Planejado",
+      "in_progress": "Em Andamento",
+      "paused": "Pausado",
+      "completed": "Concluído",
+      "cancelled": "Cancelado"
+    },
+    "layout": {
+      "list": "Layout de lista",
+      "board": "Layout de galeria",
+      "timeline": "Layout de linha do tempo"
+    },
+    "order_by": {
+      "name": "Nome",
+      "progress": "Progresso",
+      "issues": "Número de itens de trabalho",
+      "due_date": "Data de vencimento",
+      "created_at": "Data de criação",
+      "manual": "Manual"
+    }
+  },
+  "project_members": {
+    "full_name": "Nome completo",
+    "display_name": "Nome de exibição",
+    "email": "E-mail",
+    "joining_date": "Data de entrada",
+    "role": "Cargo"
+  },
+  "project": {
+    "members_import": {
+      "title": "Importar membros do CSV",
+      "description": "Carregue um CSV com colunas: Email e Função (5=Convidado, 15=Membro, 20=Admin). Os usuários já devem ser membros do espaço de trabalho.",
+      "download_sample": "Baixar CSV de exemplo",
+      "dropzone": {
+        "active": "Solte o arquivo CSV aqui",
+        "inactive": "Arraste e solte ou clique para fazer upload",
+        "file_type": "Apenas arquivos .csv são suportados"
+      },
+      "buttons": {
+        "cancel": "Cancelar",
+        "import": "Importar",
+        "try_again": "Tentar novamente",
+        "close": "Fechar",
+        "done": "Concluído"
+      },
+      "progress": {
+        "uploading": "Enviando...",
+        "importing": "Importando..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Importação concluída"
+        },
+        "message": {
+          "success": "{count} membr{plural} importad{plural} com sucesso para o projeto.",
+          "no_imports": "Nenhum novo membro foi importado do arquivo CSV."
+        },
+        "stats": {
+          "added": "Adicionados",
+          "reactivated": "Reativados",
+          "already_members": "Já são membros",
+          "skipped": "Ignorados"
+        },
+        "download_errors": "Baixar detalhes ignorados"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Arquivo inválido",
+          "message": "Apenas arquivos CSV são suportados."
+        },
+        "import_failed": {
+          "title": "Importação falhou",
+          "message": "Algo deu errado."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/settings.json b/packages/i18n/src/locales/pt-BR/settings.json
new file mode 100644
index 0000000..d7a94a5
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Alterar e-mail",
+        "description": "Digite um novo endereço de e-mail para receber um link de verificação.",
+        "toasts": {
+          "success_title": "Sucesso!",
+          "success_message": "E-mail atualizado com sucesso. Faça login novamente."
+        },
+        "form": {
+          "email": {
+            "label": "Novo e-mail",
+            "placeholder": "Digite seu e-mail",
+            "errors": {
+              "required": "O e-mail é obrigatório",
+              "invalid": "O e-mail é inválido",
+              "exists": "O e-mail já existe. Use outro.",
+              "validation_failed": "Falha na validação do e-mail. Tente novamente."
+            }
+          },
+          "code": {
+            "label": "Código único",
+            "placeholder": "123456",
+            "helper_text": "Código de verificação enviado para o novo e-mail.",
+            "errors": {
+              "required": "O código único é obrigatório",
+              "invalid": "Código de verificação inválido. Tente novamente."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Continuar",
+          "confirm": "Confirmar",
+          "cancel": "Cancelar"
+        },
+        "states": {
+          "sending": "Enviando…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Preferências",
+      "description": "Personalize sua experiência no aplicativo do jeito que você trabalha"
+    },
+    "notifications": {
+      "heading": "Notificações por e-mail",
+      "description": "Mantenha-se informado sobre os itens de trabalho aos quais você está inscrito. Ative isso para ser notificado.",
+      "select_default_view": "Selecionar visualização padrão",
+      "compact": "Compacto",
+      "full": "Tela cheia"
+    },
+    "security": {
+      "heading": "Segurança"
+    },
+    "api_tokens": {
+      "title": "Tokens de Acesso Pessoal",
+      "description": "Gere tokens de API seguros para integrar seus dados com sistemas e aplicativos externos."
+    },
+    "activity": {
+      "heading": "Atividade",
+      "description": "Acompanhe suas ações e alterações recentes em todos os projetos e itens de trabalho."
+    },
+    "connections": {
+      "title": "Conexões",
+      "heading": "Conexões",
+      "description": "Gerencie as configurações de conexões do seu espaço de trabalho."
+    }
+  },
+  "profile": {
+    "label": "Perfil",
+    "page_label": "Seu trabalho",
+    "work": "Trabalho",
+    "details": {
+      "joined_on": "Entrou em",
+      "time_zone": "Fuso horário"
+    },
+    "stats": {
+      "workload": "Carga de trabalho",
+      "overview": "Visão geral",
+      "created": "Itens de trabalho criados",
+      "assigned": "Itens de trabalho atribuídos",
+      "subscribed": "Itens de trabalho inscritos",
+      "state_distribution": {
+        "title": "Itens de trabalho por estado",
+        "empty": "Crie itens de trabalho para visualizá-los por estado no gráfico para uma melhor análise."
+      },
+      "priority_distribution": {
+        "title": "Itens de trabalho por prioridade",
+        "empty": "Crie itens de trabalho para visualizá-los por prioridade no gráfico para uma melhor análise."
+      },
+      "recent_activity": {
+        "title": "Atividade recente",
+        "empty": "Não foi possível encontrar dados. Por favor, verifique suas entradas",
+        "button": "Baixar atividade de hoje",
+        "button_loading": "Baixando"
+      }
+    },
+    "actions": {
+      "profile": "Perfil",
+      "security": "Segurança",
+      "activity": "Atividade",
+      "preferences": "Preferências",
+      "notifications": "Notificações",
+      "api-tokens": "Tokens de Acesso Pessoal",
+      "connections": "Conexões"
+    },
+    "tabs": {
+      "summary": "Resumo",
+      "assigned": "Atribuído",
+      "created": "Criado",
+      "subscribed": "Inscrito",
+      "activity": "Atividade"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Nenhuma atividade ainda",
+        "description": "Comece criando um novo item de trabalho! Adicione detalhes e propriedades a ele. Explore mais no Plane para ver sua atividade."
+      },
+      "assigned": {
+        "title": "Nenhum item de trabalho atribuído a você",
+        "description": "Os itens de trabalho atribuídos a você podem ser rastreados aqui."
+      },
+      "created": {
+        "title": "Nenhum item de trabalho ainda",
+        "description": "Todos os itens de trabalho criados por você vêm aqui, rastreie-os aqui diretamente."
+      },
+      "subscribed": {
+        "title": "Nenhum item de trabalho ainda",
+        "description": "Inscreva-se nos itens de trabalho nos quais você está interessado, rastreie todos eles aqui."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Preferência do sistema"
+      },
+      "light": {
+        "label": "Claro"
+      },
+      "dark": {
+        "label": "Escuro"
+      },
+      "light_contrast": {
+        "label": "Alto contraste claro"
+      },
+      "dark_contrast": {
+        "label": "Alto contraste escuro"
+      },
+      "custom": {
+        "label": "Tema personalizado"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/stickies.json b/packages/i18n/src/locales/pt-BR/stickies.json
new file mode 100644
index 0000000..70923a1
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Suas anotações",
+    "placeholder": "clique para digitar aqui",
+    "all": "Todas as anotações",
+    "no-data": "Anote uma ideia, capture um insight ou registre uma onda cerebral. Adicione uma anotação para começar.",
+    "add": "Adicionar anotação",
+    "search_placeholder": "Pesquisar por título",
+    "delete": "Excluir anotação",
+    "delete_confirmation": "Tem certeza de que deseja excluir esta anotação?",
+    "empty_state": {
+      "simple": "Anote uma ideia, capture um insight ou registre uma onda cerebral. Adicione uma anotação para começar.",
+      "general": {
+        "title": "As anotações são notas rápidas e tarefas que você anota rapidamente.",
+        "description": "Capture seus pensamentos e ideias sem esforço, criando anotações que você pode acessar a qualquer momento e de qualquer lugar.",
+        "primary_button": {
+          "text": "Adicionar anotação"
+        }
+      },
+      "search": {
+        "title": "Isso não corresponde a nenhuma de suas anotações.",
+        "description": "Tente um termo diferente ou nos informe\nse você tem certeza de que sua pesquisa está correta.",
+        "primary_button": {
+          "text": "Adicionar anotação"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "O nome da anotação não pode ter mais de 100 caracteres.",
+        "already_exists": "Já existe uma anotação sem descrição"
+      },
+      "created": {
+        "title": "Anotação criada",
+        "message": "A anotação foi criada com sucesso"
+      },
+      "not_created": {
+        "title": "Anotação não criada",
+        "message": "A anotação não pôde ser criada"
+      },
+      "updated": {
+        "title": "Anotação atualizada",
+        "message": "A anotação foi atualizada com sucesso"
+      },
+      "not_updated": {
+        "title": "Anotação não atualizada",
+        "message": "A anotação não pôde ser atualizada"
+      },
+      "removed": {
+        "title": "Anotação removida",
+        "message": "A anotação foi removida com sucesso"
+      },
+      "not_removed": {
+        "title": "Anotação não removida",
+        "message": "A anotação não pôde ser removida"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/template.json b/packages/i18n/src/locales/pt-BR/template.json
new file mode 100644
index 0000000..cd3bdb0
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Modelos",
+      "description": "Economize 80% do tempo gasto na criação de projetos, itens de trabalho e páginas quando você usa modelos.",
+      "new_project_template": "Novo modelo de projeto",
+      "new_work_item_template": "Novo modelo de item de trabalho",
+      "new_page_template": "Novo modelo de página",
+      "options": {
+        "project": {
+          "label": "Modelos de projeto"
+        },
+        "work_item": {
+          "label": "Modelos de item de trabalho"
+        },
+        "page": {
+          "label": "Modelos de página"
+        }
+      },
+      "create_template": {
+        "label": "Criar modelo",
+        "no_permission": {
+          "project": "Entre em contato com o administrador do projeto para criar modelos",
+          "workspace": "Entre em contato com o administrador do workspace para criar modelos"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Usar modelo",
+          "loading": "Usando"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Derivado do workspace"
+        },
+        "project": {
+          "info": "Derivado do projeto"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Nomeie seu modelo de projeto.",
+              "validation": {
+                "required": "Nome do modelo é obrigatório",
+                "maxLength": "Nome do modelo deve ter menos de 255 caracteres"
+              }
+            },
+            "description": {
+              "placeholder": "Descreva quando e como usar este modelo."
+            }
+          },
+          "name": {
+            "placeholder": "Nomeie seu projeto.",
+            "validation": {
+              "required": "Título do projeto é obrigatório",
+              "maxLength": "Título do projeto deve ter menos de 255 caracteres"
+            }
+          },
+          "description": {
+            "placeholder": "Descreva o propósito e objetivos deste projeto."
+          },
+          "button": {
+            "create": "Criar modelo de projeto",
+            "update": "Atualizar modelo de projeto"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Nomeie seu modelo de item de trabalho.",
+              "validation": {
+                "required": "Nome do modelo é obrigatório",
+                "maxLength": "Nome do modelo deve ter menos de 255 caracteres"
+              }
+            },
+            "description": {
+              "placeholder": "Descreva quando e como usar este modelo."
+            }
+          },
+          "name": {
+            "placeholder": "Dê um título a este item de trabalho.",
+            "validation": {
+              "required": "Título do item de trabalho é obrigatório",
+              "maxLength": "Título do item de trabalho deve ter menos de 255 caracteres"
+            }
+          },
+          "description": {
+            "placeholder": "Descreva este item de trabalho para que fique claro o que você realizará quando concluí-lo."
+          },
+          "button": {
+            "create": "Criar modelo de item de trabalho",
+            "update": "Atualizar modelo de item de trabalho"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Nomeie swoj szablon strony.",
+              "validation": {
+                "required": "Nazwa szablonu jest wymagana",
+                "maxLength": "Nazwa szablonu powinna mieć mniej niż 255 znaków"
+              }
+            },
+            "description": {
+              "placeholder": "Opisz, kiedy i jak używać tego szablonu."
+            }
+          },
+          "name": {
+            "placeholder": "Nieznana strona",
+            "validation": {
+              "maxLength": "Nazwa strony powinna mieć mniej niż 255 znaków"
+            }
+          },
+          "button": {
+            "create": "Utwórz szablon strony",
+            "update": "Aktualizuj szablon strony"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Configurações de publicação} other {Publicar no Marketplace}}",
+          "unpublish_action": "Remover do Marketplace",
+          "title": "Upewnij się, że szablon jest odkrywalny i rozpoznawalny.",
+          "name": {
+            "label": "Nazwa szablonu",
+            "placeholder": "Nazwij swoj szablon",
+            "validation": {
+              "required": "Nazwa szablonu jest wymagana",
+              "maxLength": "Nazwa szablonu powinna mieć mniej niż 255 znaków"
+            }
+          },
+          "short_description": {
+            "label": "Krótki opis",
+            "placeholder": "Ten szablon jest idealny dla menedżerów projektów, którzy zarządzają wieloma projektami jednocześnie.",
+            "validation": {
+              "required": "Krótki opis jest wymagany"
+            }
+          },
+          "description": {
+            "label": "Opis",
+            "placeholder": "Aumente a produtividade e otimize a comunicação com nossa integração de Fala-para-Texto.\n• Transcrição em tempo real: Converta palavras faladas em texto preciso instantaneamente.\n• Criação de tarefas e comentários: Adicione tarefas, descrições e comentários através de comandos de voz.",
+            "validation": {
+              "required": "Opis jest wymagany"
+            }
+          },
+          "category": {
+            "label": "Kategoria",
+            "placeholder": "Wybierz, gdzie uważasz, że pasuje najlepiej. Możesz wybrać więcej niż jedną.",
+            "validation": {
+              "required": "Przynajmniej jedna kategoria jest wymagana"
+            }
+          },
+          "keywords": {
+            "label": "Palavras-chave",
+            "placeholder": "Use termos que você acha que seus usuários procurarão ao buscar por este modelo.",
+            "helperText": "Insira palavras-chave separadas por vírgulas que ajudarão as pessoas a encontrar este modelo na pesquisa.",
+            "validation": {
+              "required": "Pelo menos uma palavra-chave é obrigatória"
+            }
+          },
+          "website": {
+            "label": "URL do site",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "URL inválida",
+              "maxLength": "A URL deve ter menos de 800 caracteres"
+            }
+          },
+          "company_name": {
+            "label": "Nazwa firmy",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Nazwa firmy jest wymagana",
+              "maxLength": "Nazwa firmy powinna mieć mniej niż 255 znaków"
+            }
+          },
+          "contact_email": {
+            "label": "Email podpory",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Nieprawidłowy adres e-mail",
+              "maxLength": "Email podpory powinien mieć mniej niż 255 znaków"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Link do Twojej polityki prywatności",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Nieprawidłowy URL",
+              "maxLength": "URL powinien mieć mniej niż 800 znaków"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Link do Twoich warunków użycia",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "Nieprawidłowy URL",
+              "maxLength": "URL powinien mieć mniej niż 800 znaków"
+            }
+          },
+          "cover_image": {
+            "label": "Adicione uma imagem de capa que será exibida no marketplace",
+            "upload_title": "Enviar imagem de capa",
+            "upload_placeholder": "Clique para enviar ou arraste e solte para enviar uma imagem de capa",
+            "drop_here": "Solte aqui",
+            "click_to_upload": "Clique para enviar",
+            "invalid_file_or_exceeds_size_limit": "Arquivo inválido ou excede o limite de tamanho. Por favor, tente novamente.",
+            "upload_and_save": "Enviar e salvar",
+            "uploading": "Enviando",
+            "remove": "Remover",
+            "removing": "Removendo",
+            "validation": {
+              "required": "A imagem de capa é obrigatória"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Dołącz dokumenty i obrazy, które uważasz, że sprawią, że widzowie tego szablonu będą zainteresowani.",
+            "validation": {
+              "required": "Przynajmniej jedno zrzut ekranu jest wymagane"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Modelos",
+        "description": "Com modelos de projeto, item de trabalho e página no Plane, você não precisa criar um projeto do zero ou definir propriedades de item de trabalho manualmente.",
+        "sub_description": "Recupere 80% do seu tempo administrativo quando você usa Modelos."
+      },
+      "no_templates": {
+        "button": "Crie seu primeiro modelo"
+      },
+      "no_labels": {
+        "description": " Ainda não há etiquetas. Crie etiquetas para ajudar a organizar e filtrar itens de trabalho em seu projeto."
+      },
+      "no_modules": {
+        "description": "Ainda não há módulos. Organize o trabalho em subprojetos com líderes e responsáveis dedicados."
+      },
+      "no_work_items": {
+        "description": "Não há itens de trabalho ainda. Adicione um para estruturar seu trabalho melhor."
+      },
+      "no_sub_work_items": {
+        "description": "Não há itens de trabalho ainda. Adicione um para estruturar seu trabalho melhor."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Não há modelos aos quais você tem acesso.",
+          "description": "Por favor, crie um modelo"
+        },
+        "no_results": {
+          "title": "Isso não corresponde a nenhum modelo.",
+          "description": "Tente pesquisar com outros termos."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Modelo criado",
+          "message": "{templateName}, o modelo de {templateType}, agora está disponível para seu workspace."
+        },
+        "error": {
+          "title": "Não conseguimos criar esse modelo desta vez.",
+          "message": "Tente salvar seus detalhes novamente ou copie-os para um novo modelo, preferencialmente em outra aba."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Modelo alterado",
+          "message": "{templateName}, o modelo de {templateType}, foi alterado."
+        },
+        "error": {
+          "title": "Não conseguimos salvar alterações neste modelo.",
+          "message": "Tente salvar seus detalhes novamente ou volte a este modelo mais tarde. Se ainda houver problemas, entre em contato conosco."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Modelo excluído",
+          "message": "{templateName}, o modelo de {templateType}, foi excluído do seu workspace."
+        },
+        "error": {
+          "title": "Não conseguimos excluir esse modelo.",
+          "message": "Tente excluí-lo novamente ou volte a ele mais tarde. Se você não conseguir excluí-lo, entre em contato conosco."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Modelo removido",
+          "message": "{templateName}, o modelo de {templateType}, foi removido."
+        },
+        "error": {
+          "title": "Não conseguimos remover esse modelo desta vez.",
+          "message": "Tente removê-lo novamente ou volte a ele mais tarde. Se você não conseguir removê-lo, entre em contato conosco."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Excluir modelo",
+      "description": {
+        "prefix": "Tem certeza que deseja excluir o modelo-",
+        "suffix": "? Todos os dados relacionados ao modelo serão removidos permanentemente. Esta ação não pode ser desfeita."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Remover modelo",
+      "description": {
+        "prefix": "Tem certeza que deseja remover o modelo-",
+        "suffix": "? Este modelo não estará mais disponível para usuários no marketplace."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Adicionar novo modelo",
+        "project": "Adicionar novo modelo"
+      },
+      "label": {
+        "project": "Escolher um modelo de projeto",
+        "page": "Escolher a partir do modelo"
+      },
+      "tooltip": {
+        "work_item": "Escolher um modelo de item de trabalho"
+      },
+      "no_results": {
+        "work_item": "Nenhum modelo encontrado.",
+        "project": "Nenhum modelo encontrado."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/tour.json b/packages/i18n/src/locales/pt-BR/tour.json
new file mode 100644
index 0000000..512aad6
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Bem-vindo ao seu espaço de trabalho",
+        "description": "Para ajudá-lo a começar, criamos um Projeto Demo para você. Vamos adicionar seu primeiro item de trabalho."
+      },
+      "step_one": {
+        "title": "Clique em \"+ Adicionar item de trabalho\"",
+        "description": "Comece clicando no botão \"+ Novo item de trabalho\". Você pode criar tarefas, bugs ou um tipo personalizado que atenda às suas necessidades."
+      },
+      "step_two": {
+        "title": "Filtre seus itens de trabalho",
+        "description": "Use filtros para restringir rapidamente sua lista. Você pode filtrar por status, prioridade ou membros da equipe. "
+      },
+      "step_three": {
+        "title": "Visualize, agrupe e ordene itens de trabalho conforme necessário.",
+        "description": "Veja as propriedades necessárias e agrupe ou ordene itens de trabalho conforme suas necessidades."
+      },
+      "step_four": {
+        "title": "Visualize como quiser",
+        "description": "Selecione quais propriedades você deseja ver na lista. Você também pode agrupar e classificar itens de trabalho do seu jeito."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Progrida com Ciclos",
+        "description": "Pressione Q para criar um Ciclo. Nomeie-o e defina datas—apenas um ciclo por projeto."
+      },
+      "step_one": {
+        "title": "Criar um novo ciclo",
+        "description": "Pressione Q para criar um Ciclo. Nomeie-o e defina datas—apenas um ciclo por projeto."
+      },
+      "step_two": {
+        "title": "Clique em \"+\"",
+        "description": "Comece clicando no botão \"+\". Adicione itens de trabalho novos ou existentes diretamente da página Ciclo."
+      },
+      "step_three": {
+        "title": "Resumo do ciclo",
+        "description": "Acompanhe o progresso do ciclo, a produtividade da equipe e as prioridades—e investigue se algo está atrasado."
+      },
+      "step_four": {
+        "title": "Transferir itens de trabalho",
+        "description": "Após a data de vencimento, um ciclo é concluído automaticamente. Mova o trabalho não concluído para outro ciclo."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Divida seu projeto em Módulos",
+        "description": "Módulos são projetos menores e focados que ajudam os usuários a agrupar e organizar itens de trabalho dentro de prazos específicos."
+      },
+      "step_one": {
+        "title": "Criar Módulo",
+        "description": "Módulos são projetos menores e focados que ajudam os usuários a agrupar e organizar itens de trabalho dentro de prazos específicos."
+      },
+      "step_two": {
+        "title": "Clique em \"+\"",
+        "description": "Comece clicando no botão \"+\". Adicione itens de trabalho novos ou existentes diretamente da página Módulo."
+      },
+      "step_three": {
+        "title": "Estados do módulo",
+        "description": "Os módulos usam esses status para ajudar os usuários a planejar e acompanhar claramente o progresso e a etapa."
+      },
+      "step_four": {
+        "title": "Progresso do módulo",
+        "description": "O progresso do módulo é rastreado por meio de itens concluídos, com análises para monitorar o desempenho."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Documente com Páginas com IA",
+        "description": "As Páginas no Plane permitem capturar, organizar e colaborar em informações do projeto—sem ferramentas externas."
+      },
+      "step_one": {
+        "title": "Tornar página Pública ou Privada",
+        "description": "As páginas podem ser definidas como públicas, visíveis para todos no seu espaço de trabalho, ou privadas, acessíveis apenas para você."
+      },
+      "step_two": {
+        "title": "Use o comando /",
+        "description": "Use / em uma página para adicionar conteúdo de 16 tipos de blocos, incluindo listas, imagens, tabelas e incorporações."
+      },
+      "step_three": {
+        "title": "Ações da página",
+        "description": "Depois que sua página for criada, você pode clicar no menu ••• no canto superior direito para realizar as seguintes ações."
+      },
+      "step_four": {
+        "title": "Índice",
+        "description": "Obtenha uma visão geral da sua página clicando no ícone do painel para ver todos os títulos."
+      },
+      "step_five": {
+        "title": "Histórico de versões",
+        "description": "As páginas rastreiam todas as edições com histórico de versões, permitindo restaurar versões anteriores se necessário."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Simplifique solicitações com entrada",
+        "description": "Um recurso exclusivo do Plane que permite aos Convidados criar itens de trabalho para bugs, solicitações ou tickets."
+      },
+      "step_one": {
+        "title": "Solicitações de entrada abertas/fechadas",
+        "description": "Solicitações pendentes permanecem na guia Abertas e, uma vez atendidas por um administrador ou membro, elas são movidas para Fechadas."
+      },
+      "step_two": {
+        "title": "Aceitar/recusar uma solicitação pendente",
+        "description": "Aceite para editar e mover o item de trabalho para seu projeto ou recuse para marcá-lo como Cancelado."
+      },
+      "step_three": {
+        "title": "Adiar por enquanto",
+        "description": "Um item de trabalho pode ser adiado para revisá-lo mais tarde. Ele será movido para o final da sua lista de solicitações abertas."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Pare de alternar abas. Conecte seu mundo.",
+        "description": "Conecte o GitHub e o Slack para acompanhar PRs e resumir conversas diretamente no Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navegação, reimaginada",
+        "sub_title": "Seu espaço de trabalho agora é mais fácil de explorar com uma navegação mais inteligente e simplificada.",
+        "highlight_1": "Estrutura simplificada do painel esquerdo para descoberta mais rápida",
+        "highlight_2": "Pesquisa global aprimorada para pular para qualquer coisa instantaneamente",
+        "highlight_3": "Agrupamento de categorias mais inteligente para clareza e foco",
+        "footer": "Quer um guia rápido?"
+      },
+      "step_zero": {
+        "title": "Encontre qualquer coisa instantaneamente",
+        "description": "Use a pesquisa universal para pular para tarefas, projetos, páginas e pessoas—sem sair do seu fluxo."
+      },
+      "step_one": {
+        "title": "Mantenha o controle das atualizações",
+        "description": "Sua caixa de entrada mantém todas as menções, aprovações e atividades em um só lugar, para que você nunca perca trabalho importante."
+      },
+      "step_two": {
+        "title": "Personalize sua Navegação",
+        "description": "Personalize o que você vê e como navega nas Preferências."
+      }
+    },
+    "actions": {
+      "close": "Fechar",
+      "next": "Próximo",
+      "back": "Voltar",
+      "done": "Concluído",
+      "take_a_tour": "Fazer um tour",
+      "get_started": "Começar",
+      "got_it": "Entendi"
+    },
+    "seed_data": {
+      "title": "Aqui está seu projeto demo",
+      "description": "Os projetos permitem que você gerencie suas equipes, tarefas e tudo o que precisa para realizar as coisas dentro do seu espaço de trabalho."
+    }
+  },
+  "get_started": {
+    "title": "Olá {name}, bem-vindo a bordo!",
+    "description": "Aqui está tudo o que você precisa para iniciar sua jornada com o Plane.",
+    "checklist_section": {
+      "title": "Começar",
+      "description": "Comece sua configuração e veja suas ideias ganharem vida mais rapidamente.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Criar um projeto"
+        },
+        "item_2": {
+          "title": "Criar um item de trabalho"
+        },
+        "item_3": {
+          "title": "Convidar membros da equipe"
+        },
+        "item_4": {
+          "title": "Criar uma página"
+        },
+        "item_5": {
+          "title": "Experimentar o chat Plane AI"
+        },
+        "item_6": {
+          "title": "Vincular integrações"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Convide sua equipe",
+      "description": "Convide colegas de equipe e comece a construir juntos."
+    },
+    "integrations_section": {
+      "title": "Potencialize seu espaço de trabalho",
+      "more_integrations": "Navegar por mais integrações"
+    },
+    "switch_to_plane_section": {
+      "title": "Descubra por que as equipes mudam para o Plane",
+      "description": "Compare o Plane com as ferramentas que você usa hoje e veja a diferença."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/update.json b/packages/i18n/src/locales/pt-BR/update.json
new file mode 100644
index 0000000..ba914fc
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Progresso",
+      "since_last_update": "Desde a última atualização",
+      "comments": "{count, plural, one{# comentário} other{# comentários}}"
+    },
+    "add_update": "Adicionar atualização",
+    "add_update_placeholder": "Adicione sua atualização aqui",
+    "empty": {
+      "title": "Ainda não há atualizações",
+      "description": "Você pode ver as atualizações aqui."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reação criada",
+          "message": "A reação foi criada com sucesso."
+        },
+        "error": {
+          "title": "Reação não criada",
+          "message": "A reação não foi criada."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reação removida",
+          "message": "A reação foi removida com sucesso."
+        },
+        "error": {
+          "title": "Reação não removida",
+          "message": "A reação não foi removida."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Atualização criada",
+        "message": "A atualização foi criada com sucesso."
+      },
+      "error": {
+        "title": "Atualização não criada",
+        "message": "A atualização não foi criada."
+      }
+    },
+    "delete": {
+      "title": "Deletar atualização",
+      "confirmation": "Você tem certeza que deseja deletar esta atualização? Esta operação é irreversível.",
+      "success": {
+        "title": "Atualização deletada",
+        "message": "A atualização foi deletada com sucesso."
+      },
+      "error": {
+        "title": "Atualização não deletada",
+        "message": "A atualização não foi deletada."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Atualização atualizada",
+        "message": "A atualização foi atualizada com sucesso."
+      },
+      "error": {
+        "title": "Atualização não atualizada",
+        "message": "A atualização não foi atualizada."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/wiki.json b/packages/i18n/src/locales/pt-BR/wiki.json
new file mode 100644
index 0000000..5769bb9
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Geral",
+      "private": "Privado",
+      "shared": "Compartilhado",
+      "archived": "Arquivado"
+    },
+    "fallback_name": "Coleção",
+    "form": {
+      "name_required": "O título da coleção é obrigatório",
+      "name_max_length": "O nome da coleção deve ter menos de 255 caracteres",
+      "name_placeholder_create": "Dê um título para a coleção",
+      "name_placeholder_edit": "Nome da coleção"
+    },
+    "create_modal": {
+      "title": "Criar uma coleção",
+      "submit": "Criar coleção"
+    },
+    "edit_modal": {
+      "title": "Editar coleção"
+    },
+    "delete_modal": {
+      "title": "Excluir coleção",
+      "page_count": "Esta coleção tem {pageCount} páginas. Escolha o que deve acontecer com elas.",
+      "transfer_title": "Transferir páginas e excluir coleção",
+      "transfer_description": "Mova todas as páginas para outra coleção antes de excluir. As páginas e suas permissões serão preservadas.",
+      "transfer_warning": "As páginas movidas herdarão as permissões da coleção selecionada.",
+      "transfer_target_label": "Mover páginas para",
+      "transfer_target_placeholder": "Selecione uma coleção",
+      "delete_with_pages_title": "Excluir coleção com páginas",
+      "delete_with_pages_description": "Exclui permanentemente a coleção e todas as suas páginas. Esta ação não pode ser desfeita.",
+      "submit": "Excluir coleção"
+    },
+    "header": {
+      "add_page": "Adicionar página"
+    },
+    "menu": {
+      "create_new_page": "Criar nova página",
+      "add_existing_page": "Adicionar página existente",
+      "edit_collection": "Editar coleção",
+      "collection_options": "Opções da coleção"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Pesquisar páginas",
+      "success_message": "{count} páginas adicionadas à coleção.",
+      "error_message": "Não foi possível mover as páginas. Tente novamente.",
+      "no_pages_found": "Nenhuma página encontrada para a sua busca",
+      "no_pages_available": "Nenhuma página disponível para mover",
+      "submit": "Mover"
+    },
+    "list": {
+      "invite_only": "Somente por convite",
+      "remove_error": "Não foi possível remover a página da coleção.",
+      "no_matching_pages": "Nenhuma página correspondente",
+      "remove_search_criteria": "Remova os critérios de busca para ver todas as páginas",
+      "remove_filters": "Remova os filtros para ver todas as páginas",
+      "no_pages_title": "Ainda não há páginas",
+      "no_pages_description": "Esta coleção ainda não tem páginas.",
+      "untitled": "Sem título",
+      "restricted_access": "Acesso restrito",
+      "collapse_page": "Recolher página",
+      "expand_page": "Expandir página",
+      "page_actions": "Ações da página",
+      "page_link_copied": "Link da página copiado para a área de transferência.",
+      "columns": {
+        "page_name": "Nome da página",
+        "owner": "Proprietário",
+        "nested_pages": "Páginas aninhadas",
+        "last_activity": "Última atividade",
+        "actions": "Ações"
+      }
+    },
+    "toasts": {
+      "created": "Coleção criada com sucesso.",
+      "create_error": "Não foi possível criar a coleção. Tente novamente.",
+      "renamed": "Coleção renomeada com sucesso.",
+      "rename_error": "Não foi possível atualizar a coleção. Tente novamente.",
+      "transferred_deleted": "As páginas foram transferidas e a coleção foi excluída.",
+      "deleted_with_pages": "A coleção e suas páginas foram excluídas.",
+      "delete_error": "Não foi possível excluir a coleção. Tente novamente.",
+      "target_required": "Selecione uma coleção para mover as páginas.",
+      "create_page_error": "Não foi possível criar a página. Tente novamente.",
+      "create_page_in_collection_error": "Não foi possível criar a página ou adicioná-la à coleção. Tente novamente.",
+      "collection_link_copied": "Link da coleção copiado para a área de transferência."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Faça upgrade para desbloquear o Wiki",
+      "description": "Desbloqueie páginas públicas, histórico de versões, páginas compartilhadas, colaboração em tempo real e páginas do espaço de trabalho para wikis, documentos da empresa e bases de conhecimento com o Plane Pro.",
+      "upgrade_button": {
+        "text": "Fazer upgrade"
+      },
+      "learn_more_button": {
+        "text": "Saiba mais"
+      },
+      "download_button": {
+        "text": "Baixar dados",
+        "loading": "Baixando"
+      },
+      "tabs": {
+        "nested_pages": "Páginas aninhadas",
+        "add_embeds": "Adicionar incorporações",
+        "publish_pages": "Publicar páginas",
+        "comments": "Comentários"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "As páginas aninhadas exigem um plano pago. Faça upgrade para desbloquear."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/work-item-type.json b/packages/i18n/src/locales/pt-BR/work-item-type.json
new file mode 100644
index 0000000..b287bf2
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Tipos de Item de Trabalho",
+    "label_lowercase": "tipos de item de trabalho",
+    "settings": {
+      "description": "Personalize e adicione suas próprias propriedades para adaptar às necessidades da sua equipe.",
+      "cant_delete_default_message": "Não é possível excluir este tipo de item de trabalho, pois ele está definido como o tipo padrão para este projeto.",
+      "set_as_default": "Definir como padrão",
+      "cant_set_default_inactive_message": "Ative este tipo antes de defini-lo como padrão",
+      "set_default_confirmation": {
+        "title": "Definir como tipo de item de trabalho padrão",
+        "description": "Definir {name} como padrão irá importá-lo para todos os projetos neste espaço de trabalho. Todos os novos itens de trabalho usarão este tipo por padrão.",
+        "confirm_button": "Definir como padrão"
+      },
+      "properties": {
+        "title": "Propriedades personalizadas",
+        "description": "Crie e personalize propriedades.",
+        "tooltip": "Cada tipo de item de trabalho vem com um conjunto padrão de propriedades como Título, Descrição, Responsável, Estado, Prioridade, Data de início, Data de vencimento, Módulo, Ciclo etc. Você também pode personalizar e adicionar suas próprias propriedades para adaptar às necessidades da sua equipe.",
+        "add_button": "Adicionar nova propriedade",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Importar do espaço de trabalho"
+          }
+        },
+        "dropdown": {
+          "label": "Tipo de propriedade",
+          "placeholder": "Selecionar tipo"
+        },
+        "property_type": {
+          "text": {
+            "label": "Texto"
+          },
+          "number": {
+            "label": "Número"
+          },
+          "dropdown": {
+            "label": "Menu suspenso"
+          },
+          "boolean": {
+            "label": "Booleano"
+          },
+          "date": {
+            "label": "Data"
+          },
+          "member_picker": {
+            "label": "Seletor de membro"
+          },
+          "formula": {
+            "label": "Fórmula"
+          }
+        },
+        "attributes": {
+          "label": "Atributos",
+          "text": {
+            "single_line": {
+              "label": "Linha única"
+            },
+            "multi_line": {
+              "label": "Parágrafo"
+            },
+            "readonly": {
+              "label": "Somente leitura",
+              "header": "Dados somente leitura"
+            },
+            "invalid_text_format": {
+              "label": "Formato de texto inválido"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Adicionar número"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Seleção única"
+            },
+            "multi_select": {
+              "label": "Seleção múltipla"
+            },
+            "no_default_value": {
+              "label": "Sem valor padrão"
+            }
+          },
+          "boolean": {
+            "label": "Verdadeiro | Falso",
+            "no_default": "Sem valor padrão"
+          },
+          "option": {
+            "create_update": {
+              "label": "Opções",
+              "form": {
+                "placeholder": "Adicionar opção",
+                "errors": {
+                  "name": {
+                    "required": "Nome da opção é obrigatório.",
+                    "integrity": "Opção com o mesmo nome já existe."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Selecionar opção",
+                "multi": {
+                  "default": "Selecionar opções",
+                  "variable": "{count} opções selecionadas"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Sucesso!",
+              "message": "Propriedade {name} criada com sucesso."
+            },
+            "error": {
+              "title": "Erro!",
+              "message": "Falha ao criar propriedade. Por favor, tente novamente!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Sucesso!",
+              "message": "Propriedade {name} atualizada com sucesso."
+            },
+            "error": {
+              "title": "Erro!",
+              "message": "Falha ao atualizar propriedade. Por favor, tente novamente!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Sucesso!",
+              "message": "Propriedade {name} excluída com sucesso."
+            },
+            "error": {
+              "title": "Erro!",
+              "message": "Falha ao excluir propriedade. Por favor, tente novamente!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} propriedade {name}",
+            "success": {
+              "title": "Sucesso!",
+              "message": "Propriedade {name} {action} com sucesso."
+            },
+            "error": {
+              "title": "Erro!",
+              "message": "Falha ao {action} propriedade. Por favor, tente novamente!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Criar nova propriedade personalizada",
+            "update": "Atualizar propriedade personalizada"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Título"
+            },
+            "description": {
+              "placeholder": "Descrição"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Você deve nomear sua propriedade.",
+              "max_length": "O nome da propriedade não deve exceder 255 caracteres."
+            },
+            "property_type": {
+              "required": "Você deve selecionar um tipo de propriedade."
+            },
+            "options": {
+              "required": "Você deve adicionar pelo menos uma opção."
+            },
+            "formula": {
+              "required": "A expressão da fórmula é obrigatória.",
+              "invalid": "Fórmula inválida: {error}",
+              "circular_reference": "Referência circular detectada. Uma fórmula não pode referenciar a si mesma direta ou indiretamente.",
+              "invalid_reference": "A fórmula referencia uma propriedade inexistente."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Campo de fórmula",
+          "tooltip": "Insira uma fórmula usando a sintaxe '{'Nome do campo'}'. Suporta os operadores +, -, *, / e &.",
+          "placeholder": "Escrever a fórmula",
+          "test_button": "Testar",
+          "validating": "Validando",
+          "validation_success": "A fórmula é válida! Retorna {resultType}",
+          "validation_success_with_refs": "A fórmula é válida! Retorna {resultType} ({count} campo(s) referenciado(s))",
+          "error": {
+            "empty": "Por favor, insira uma fórmula",
+            "missing_context": "Contexto de espaço de trabalho, projeto ou tipo de item de trabalho ausente",
+            "validation_failed": "Falha na validação"
+          },
+          "picker": {
+            "no_match": "Nenhuma propriedade correspondente",
+            "no_available": "Nenhuma propriedade disponível"
+          }
+        },
+        "enable_disable": {
+          "label": "Ativo",
+          "tooltip": {
+            "disabled": "Clique para desativar",
+            "enabled": "Clique para ativar"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Excluir esta propriedade",
+          "description": "A exclusão de propriedades pode levar à perda de dados existentes.",
+          "secondary_description": "Você quer desativar a propriedade em vez disso?",
+          "primary_button": "{action}, excluir",
+          "secondary_button": "Sim, desativar"
+        },
+        "mandate_confirmation": {
+          "label": "Propriedade obrigatória",
+          "content": "Parece haver uma opção padrão para esta propriedade. Tornar a propriedade obrigatória removerá o valor padrão e os usuários terão que adicionar um valor de sua escolha.",
+          "tooltip": {
+            "disabled": "Este tipo de propriedade não pode ser tornado obrigatório",
+            "enabled": "Desmarque para marcar o campo como opcional",
+            "checked": "Marque para tornar o campo obrigatório"
+          }
+        },
+        "empty_state": {
+          "title": "Adicionar propriedades personalizadas",
+          "description": "Novas propriedades que você adicionar para este tipo de item de trabalho aparecerão aqui."
+        }
+      },
+      "types": {
+        "title": "Tipos",
+        "description": "Crie e personalize tipos de itens de trabalho com propriedades.",
+        "sort_options": {
+          "project_count": "Número de projetos dos quais faz parte"
+        },
+        "filter_options": {
+          "show_active": "Mostrar ativos",
+          "show_inactive": "Mostrar inativos"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Criar novo",
+            "import_from_workspace": "Importar do espaço de trabalho"
+          },
+          "banner": {
+            "with_access": "Habilite os tipos de item de trabalho para importar tipos do nível do espaço de trabalho",
+            "without_access": "Os tipos de item de trabalho estão desabilitados. Entre em contato com o administrador do espaço de trabalho para habilitá-los nas configurações do espaço de trabalho."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Propriedades personalizadas",
+        "add_button": "Adicionar propriedades",
+        "modal": {
+          "title": "Adicionar propriedades",
+          "empty": {
+            "title": "Nenhuma propriedade disponível",
+            "description": "Todas as propriedades já foram vinculadas a este tipo."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Desvincular propriedade",
+          "description": "Desvincular esta propriedade excluirá permanentemente todos os seus valores em todos os itens de trabalho que usam este tipo. Esta ação não pode ser desfeita.",
+          "input_label": "Digite",
+          "input_label_suffix": "para continuar:",
+          "confirm": "Desvincular propriedade",
+          "loading": "Desvinculando"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Excluir este tipo",
+        "description": "A exclusão de tipos pode levar à perda de dados existentes.",
+        "can_disable_warning": "Deseja desativar o tipo em vez disso?",
+        "primary_button": "Sim, excluir",
+        "toast": {
+          "success": {
+            "title": "Sucesso!",
+            "message": "Tipo de item de trabalho excluído com sucesso."
+          },
+          "error": {
+            "title": "Erro!",
+            "message": "Falha ao excluir o tipo de item de trabalho. Por favor, tente novamente!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Não é possível excluir o tipo de item de trabalho padrão",
+          "cannot_delete_work_item_type_with_associated_work_items": "Não é possível excluir o tipo de item de trabalho com itens de trabalho associados"
+        }
+      }
+    },
+    "create": {
+      "title": "Criar tipo de item de trabalho",
+      "button": "Adicionar tipo de item de trabalho",
+      "toast": {
+        "success": {
+          "title": "Sucesso!",
+          "message": "Tipo de item de trabalho criado com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": {
+            "default": "Falha ao criar o tipo de item de trabalho. Tente novamente!",
+            "conflict": "O tipo {name} já existe. Escolha um nome diferente."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Atualizar tipo de item de trabalho",
+      "button": "Atualizar tipo de item de trabalho",
+      "toast": {
+        "success": {
+          "title": "Sucesso!",
+          "message": "Tipo de item de trabalho {name} atualizado com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": {
+            "default": "Falha ao atualizar o tipo de item de trabalho. Tente novamente!",
+            "conflict": "O tipo {name} já existe. Escolha um nome diferente."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Dê a este tipo de item de trabalho um nome único"
+        },
+        "description": {
+          "placeholder": "Descreva para que serve este tipo de item de trabalho e quando deve ser usado."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} tipo de item de trabalho {name}",
+        "success": {
+          "title": "Sucesso!",
+          "message": "Tipo de item de trabalho {name} {action} com sucesso."
+        },
+        "error": {
+          "title": "Erro!",
+          "message": "Falha ao {action} tipo de item de trabalho. Por favor, tente novamente!"
+        }
+      },
+      "tooltip": "Clique para {action}"
+    },
+    "change_confirmation": {
+      "title": "Alterar tipo de item de trabalho?",
+      "description": "Alterar o tipo de item de trabalho pode resultar na perda de valores de propriedades personalizadas que são específicas do tipo atual. Esta ação não pode ser desfeita.",
+      "button": {
+        "loading": "Alterando",
+        "default": "Alterar tipo"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Ativar Tipos de Item de Trabalho",
+        "description": "Molde itens de trabalho para seu trabalho com Tipos de Item de Trabalho. Personalize com ícones, planos de fundo e propriedades e configure-os para este projeto.",
+        "primary_button": {
+          "text": "Ativar"
+        },
+        "confirmation": {
+          "title": "Uma vez ativados, os Tipos de Item de Trabalho não podem ser desativados.",
+          "description": "O Item de Trabalho do Plane se tornará o tipo de item de trabalho padrão para este projeto e aparecerá com seu ícone e plano de fundo neste projeto.",
+          "button": {
+            "default": "Ativar",
+            "loading": "Configurando"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Obtenha Pro para ativar Tipos de Item de Trabalho.",
+        "description": "Molde itens de trabalho para seu trabalho com Tipos de Item de Trabalho. Personalize com ícones, planos de fundo e propriedades e configure-os para este projeto.",
+        "primary_button": {
+          "text": "Obter Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Faça upgrade para ativar Tipos de Item de Trabalho.",
+        "description": "Molde itens de trabalho para seu trabalho com Tipos de Item de Trabalho. Personalize com ícones, planos de fundo e propriedades e configure-os para este projeto.",
+        "primary_button": {
+          "text": "Fazer upgrade"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hierarquia",
+      "tab_label": "Hierarquia",
+      "description": "Configure os níveis de hierarquia para organizar seu trabalho. Cada nível define uma relação de pai com o item diretamente acima e uma relação de filho com o item diretamente abaixo. ",
+      "sidebar_label": "Hierarquia",
+      "enable_control": {
+        "title": "Ativar hierarquia",
+        "description": "Crie relações pai-filho entre diferentes tipos de itens de trabalho.",
+        "tooltip": "Você não pode desativar a hierarquia depois que ela for ativada."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Defina primeiro os tipos de itens de trabalho para criar uma nova hierarquia.",
+        "cta": "Configurações de tipos de itens de trabalho"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Arraste e solte um tipo para adicionar um novo nível de hierarquia",
+      "empty_level_placeholder": "Arraste e solte um tipo de item de trabalho para o nível {level}",
+      "drag_tooltip": "Arraste para mudar o nível",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Definir como padrão",
+          "toast": {
+            "loading": "Definindo como padrão...",
+            "success": {
+              "title": "Sucesso!",
+              "message": "Nível de hierarquia {level} definido como padrão com sucesso."
+            },
+            "error": {
+              "title": "Erro!",
+              "message": "Falha ao definir o nível de hierarquia {level} como padrão. Por favor, tente novamente."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Movendo {workItemTypeName} para o nível {level}...",
+        "success": {
+          "title": "Sucesso!",
+          "message": "{workItemTypeName} foi movido para o nível {level} com sucesso."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Salvar quebrará os vínculos existentes",
+      "content": {
+        "intro": "O tipo de item de trabalho {workItemTypeName} possui:",
+        "parent_items": "{count, plural, one {# vínculo pai será} other {# vínculos pai serão}} removidos.",
+        "child_items": "{count, plural, one {subitem de trabalho} other {subitens de trabalho}}",
+        "parent_line_suffix_when_also_children": ", e ",
+        "footer": "Esta alteração removerá as relações pai-filho dos itens de trabalho existentes do tipo {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Digite «confirmar» para continuar.",
+        "placeholder": "confirmar"
+      },
+      "error_toast": {
+        "title": "Erro!",
+        "message": "Falha ao desvincular e salvar. Tente novamente."
+      },
+      "confirm_button": {
+        "loading": "Salvando",
+        "default": "Salvar mesmo assim"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Erro!",
+        "message": "O tipo de item de trabalho selecionado não pode ser usado para criar um novo item de trabalho pois viola as regras de hierarquia."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Erro!",
+        "message": "O tipo de item de trabalho não pode ser atualizado pois viola as regras de hierarquia."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Nível de hierarquia",
+      "invalid_level_toast": {
+        "title": "Erro!",
+        "message": "O tipo de item de trabalho não pode ser atualizado pois viola as regras de hierarquia."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/work-item.json b/packages/i18n/src/locales/pt-BR/work-item.json
new file mode 100644
index 0000000..7436c40
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Item de trabalho} other {Itens de trabalho}}",
+    "all": "Todos os Itens de trabalho",
+    "edit": "Editar item de trabalho",
+    "title": {
+      "label": "Título do item de trabalho",
+      "required": "O título do item de trabalho é obrigatório."
+    },
+    "add": {
+      "press_enter": "Pressione 'Enter' para adicionar outro item de trabalho",
+      "label": "Adicionar item de trabalho",
+      "cycle": {
+        "failed": "Não foi possível adicionar o item de trabalho ao ciclo. Por favor, tente novamente.",
+        "success": "{count, plural, one {Item de trabalho} other {Itens de trabalho}} adicionado(s) ao ciclo com sucesso.",
+        "loading": "Adicionando {count, plural, one {item de trabalho} other {itens de trabalho}} ao ciclo"
+      },
+      "assignee": "Adicionar responsáveis",
+      "start_date": "Adicionar data de início",
+      "due_date": "Adicionar data de vencimento",
+      "parent": "Adicionar item de trabalho pai",
+      "sub_issue": "Adicionar sub-item de trabalho",
+      "dependency": "Adicionar dependência",
+      "relation": "Adicionar relação",
+      "link": "Adicionar link",
+      "existing": "Adicionar item de trabalho existente"
+    },
+    "remove": {
+      "label": "Remover item de trabalho",
+      "cycle": {
+        "loading": "Removendo item de trabalho do ciclo",
+        "success": "Item de trabalho removido do ciclo com sucesso.",
+        "failed": "Não foi possível remover o item de trabalho do ciclo. Por favor, tente novamente."
+      },
+      "module": {
+        "loading": "Removendo item de trabalho do módulo",
+        "success": "Item de trabalho removido do módulo com sucesso.",
+        "failed": "Não foi possível remover o item de trabalho do módulo. Por favor, tente novamente."
+      },
+      "parent": {
+        "label": "Remover item de trabalho pai"
+      }
+    },
+    "new": "Novo Item de trabalho",
+    "adding": "Adicionando item de trabalho",
+    "create": {
+      "success": "Item de trabalho criado com sucesso"
+    },
+    "priority": {
+      "urgent": "Urgente",
+      "high": "Alta",
+      "medium": "Média",
+      "low": "Baixa"
+    },
+    "display": {
+      "properties": {
+        "label": "Exibir Propriedades",
+        "id": "ID",
+        "issue_type": "Tipo de Item de Trabalho",
+        "sub_issue_count": "Contagem de sub-itens de trabalho",
+        "attachment_count": "Contagem de anexos",
+        "created_on": "Criado em",
+        "sub_issue": "Sub-item de trabalho",
+        "work_item_count": "Contagem de itens de trabalho"
+      },
+      "extra": {
+        "show_sub_issues": "Mostrar sub-itens de trabalho",
+        "show_empty_groups": "Mostrar grupos vazios"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Este layout é ordenado por",
+      "list": "Lista",
+      "kanban": "Quadro",
+      "calendar": "Calendário",
+      "spreadsheet": "Tabela",
+      "gantt": "Cronograma",
+      "title": {
+        "list": "Layout de Lista",
+        "kanban": "Layout de Quadro",
+        "calendar": "Layout de Calendário",
+        "spreadsheet": "Layout de Tabela",
+        "gantt": "Layout de Cronograma"
+      }
+    },
+    "states": {
+      "active": "Ativo",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Adicionar comentário",
+      "switch": {
+        "private": "Alternar para comentário privado",
+        "public": "Alternar para comentário público"
+      },
+      "create": {
+        "success": "Comentário criado com sucesso",
+        "error": "Falha ao criar o comentário. Por favor, tente novamente mais tarde."
+      },
+      "update": {
+        "success": "Comentário atualizado com sucesso",
+        "error": "Falha ao atualizar o comentário. Por favor, tente novamente mais tarde."
+      },
+      "remove": {
+        "success": "Comentário removido com sucesso",
+        "error": "Falha ao remover o comentário. Por favor, tente novamente mais tarde."
+      },
+      "upload": {
+        "error": "Falha ao carregar o recurso. Por favor, tente novamente mais tarde."
+      },
+      "copy_link": {
+        "success": "Link do comentário copiado para a área de transferência",
+        "error": "Erro ao copiar o link do comentário. Tente novamente mais tarde."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Adicionar resposta",
+          "placeholder": "Adicionar resposta"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Falha ao buscar as respostas"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Resposta criada com sucesso"
+            },
+            "error": {
+              "message": "Falha ao criar a resposta"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Resposta atualizada com sucesso"
+            },
+            "error": {
+              "message": "Falha ao atualizar a resposta"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Resposta excluída com sucesso"
+            },
+            "error": {
+              "message": "Falha ao excluir a resposta"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "O item de trabalho não existe",
+        "description": "O item de trabalho que você está procurando não existe, foi arquivado ou foi excluído.",
+        "primary_button": {
+          "text": "Visualizar outros itens de trabalho"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Itens de trabalho irmãos"
+    },
+    "archive": {
+      "description": "Apenas itens de trabalho concluídos ou cancelados\npodem ser arquivados",
+      "label": "Arquivar Item de Trabalho",
+      "confirm_message": "Tem certeza de que deseja arquivar o item de trabalho? Todos os seus itens de trabalho arquivados podem ser restaurados posteriormente.",
+      "success": {
+        "label": "Sucesso ao arquivar",
+        "message": "Seus arquivos podem ser encontrados nos arquivos do projeto."
+      },
+      "failed": {
+        "message": "Não foi possível arquivar o item de trabalho. Por favor, tente novamente."
+      },
+      "banner_message": "Este item de trabalho foi arquivado. Acesse a seção Arquivos para restaurá-lo.",
+      "go_to_archives": "Ir para arquivos"
+    },
+    "restore": {
+      "success": {
+        "title": "Sucesso ao restaurar",
+        "message": "Seu item de trabalho pode ser encontrado nos itens de trabalho do projeto."
+      },
+      "failed": {
+        "message": "Não foi possível restaurar o item de trabalho. Por favor, tente novamente."
+      }
+    },
+    "relation": {
+      "relates_to": "Relacionado a",
+      "duplicate": "Duplicado de",
+      "blocked_by": "Bloqueado por",
+      "blocking": "Bloqueando",
+      "start_before": "Inicia antes",
+      "start_after": "Inicia depois",
+      "finish_before": "Termina antes",
+      "finish_after": "Termina depois",
+      "implements": "Implementa",
+      "implemented_by": "Implementado por"
+    },
+    "copy_link": "Copiar link do item de trabalho",
+    "delete": {
+      "label": "Excluir item de trabalho",
+      "error": "Erro ao excluir item de trabalho"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Item de trabalho inscrito com sucesso",
+        "unsubscribed": "Item de trabalho não inscrito com sucesso"
+      }
+    },
+    "select": {
+      "error": "Selecione pelo menos um item de trabalho",
+      "empty": "Nenhum item de trabalho selecionado",
+      "add_selected": "Adicionar itens de trabalho selecionados",
+      "select_all": "Selecionar tudo",
+      "deselect_all": "Desmarcar tudo"
+    },
+    "open_in_full_screen": "Abrir item de trabalho em tela cheia",
+    "duplicate": {
+      "modal": {
+        "title": "Fazer uma cópia para outro projeto",
+        "description1": "Isto cria uma cópia do item de trabalho.",
+        "description2": "Todos os dados de propriedades serão removidos ao duplicar.",
+        "placeholder": "Selecionar um projeto"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Item de trabalho duplicado com sucesso"
+        },
+        "error": {
+          "message": "Falha ao duplicar o item de trabalho"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Conectar páginas",
+      "show_wiki_pages": "Mostrar páginas Wiki",
+      "link_pages_to": "Conectar páginas a",
+      "linked_pages": "Páginas vinculadas",
+      "no_description": "Esta página está vazia. Por que você não escreve algo dentro dela e vê isso aparecer aqui como este espaço reservado",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Páginas atualizadas",
+            "message": "Páginas atualizadas com sucesso"
+          },
+          "error": {
+            "title": "Falha ao atualizar páginas",
+            "message": "Falha ao atualizar páginas"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Página removida",
+            "message": "Página removida com sucesso"
+          },
+          "error": {
+            "title": "Falha ao remover página",
+            "message": "Falha ao remover página"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Clique para votar a favor",
+      "click_to_downvote": "Clique para votar contra",
+      "click_to_view_upvotes": "Clique para ver os votos a favor",
+      "click_to_view_downvotes": "Clique para ver os votos contra"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Sub-item de trabalho atualizado com sucesso",
+      "error": "Erro ao atualizar sub-item de trabalho"
+    },
+    "remove": {
+      "success": "Sub-item de trabalho removido com sucesso",
+      "error": "Erro ao remover sub-item de trabalho"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Você não tem sub-itens de trabalho que correspondem aos filtros que você aplicou.",
+        "description": "Para ver todos os sub-itens de trabalho, limpe todos os filtros aplicados.",
+        "action": "Limpar filtros"
+      },
+      "list_filters": {
+        "title": "Você não tem itens de trabalho que correspondem aos filtros que você aplicou.",
+        "description": "Para ver todos os itens de trabalho, limpe todos os filtros aplicados.",
+        "action": "Limpar filtros"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Nenhum item de trabalho correspondente encontrado"
+      },
+      "no_issues": {
+        "title": "Nenhum item de trabalho encontrado"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Nenhum comentário ainda",
+        "description": "Os comentários podem ser usados como um espaço de discussão e acompanhamento para os itens de trabalho"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Não é possível arquivar itens de trabalho",
+        "message": "Apenas itens de trabalho pertencentes aos grupos de estado Concluído ou Cancelado podem ser arquivados."
+      },
+      "invalid_issue_start_date": {
+        "title": "Não é possível atualizar itens de trabalho",
+        "message": "A data de início selecionada sucede a data de vencimento para alguns itens de trabalho. Certifique-se de que a data de início seja anterior à data de vencimento."
+      },
+      "invalid_issue_target_date": {
+        "title": "Não é possível atualizar itens de trabalho",
+        "message": "A data de vencimento selecionada precede a data de início para alguns itens de trabalho. Certifique-se de que a data de vencimento seja posterior à data de início."
+      },
+      "invalid_state_transition": {
+        "title": "Não é possível atualizar itens de trabalho",
+        "message": "A mudança de estado não é permitida para alguns itens de trabalho. Certifique-se de que a mudança de estado seja permitida."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Altere o estado, a prioridade e muito mais para vários itens de trabalho de uma vez. Economize em média três minutos por operação.",
+      "cta": "Upgrade para One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Itens de trabalho recorrentes",
+      "description": "Configure seu trabalho recorrente uma vez e nós cuidaremos das repetições. Você verá tudo aqui quando for necessário.",
+      "new_recurring_work_item": "Novo item de trabalho recorrente",
+      "update_recurring_work_item": "Atualizar item de trabalho recorrente",
+      "form": {
+        "interval": {
+          "title": "Agendamento",
+          "start_date": {
+            "validation": {
+              "required": "A data de início é obrigatória"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "O tipo de intervalo é obrigatório"
+            }
+          }
+        },
+        "button": {
+          "create": "Criar item de trabalho recorrente",
+          "update": "Atualizar item de trabalho recorrente"
+        }
+      },
+      "create_button": {
+        "label": "Criar item de trabalho recorrente",
+        "no_permission": "Entre em contato com o administrador do projeto para criar itens de trabalho recorrentes"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Seu trabalho no piloto automático",
+        "description": "Configure uma vez. Nós o traremos de volta quando chegar a hora. Faça upgrade para o Business para tornar o trabalho recorrente mais fácil."
+      },
+      "no_templates": {
+        "button": "Crie seu primeiro item de trabalho recorrente"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Item de trabalho recorrente criado",
+          "message": "{name}, o item de trabalho recorrente, agora está disponível no seu espaço de trabalho."
+        },
+        "error": {
+          "title": "Não foi possível criar o item de trabalho recorrente desta vez.",
+          "message": "Tente salvar seus dados novamente ou copie-os para um novo item de trabalho recorrente, de preferência em outra aba."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Item de trabalho recorrente alterado",
+          "message": "{name}, o item de trabalho recorrente, foi alterado."
+        },
+        "error": {
+          "title": "Não foi possível salvar as alterações neste item de trabalho recorrente.",
+          "message": "Tente salvar seus dados novamente ou volte a este item de trabalho recorrente mais tarde. Se o problema persistir, entre em contato conosco."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Item de trabalho recorrente excluído",
+          "message": "{name}, o item de trabalho recorrente, foi excluído do seu espaço de trabalho."
+        },
+        "error": {
+          "title": "Não foi possível excluir o item de trabalho recorrente.",
+          "message": "Tente excluir novamente ou volte mais tarde. Se não conseguir excluir, entre em contato conosco."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Excluir item de trabalho recorrente",
+      "description": {
+        "prefix": "Tem certeza que deseja excluir o item de trabalho recorrente-",
+        "suffix": "? Todos os dados relacionados ao item de trabalho recorrente serão removidos permanentemente. Esta ação não pode ser desfeita."
+      }
+    }
+  },
+  "epic": {
+    "new": "Novo Épico",
+    "label": "{count, plural, one {Épico} other {Épicos}}",
+    "adding": "Adicionando épico",
+    "create": {
+      "success": "Épico criado com sucesso"
+    },
+    "add": {
+      "label": "Adicionar Épico",
+      "press_enter": "Pressione 'Enter' para adicionar outro épico"
+    },
+    "title": {
+      "label": "Título do Épico",
+      "required": "O título do épico é obrigatório."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/workflow.json b/packages/i18n/src/locales/pt-BR/workflow.json
new file mode 100644
index 0000000..7b61d58
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Permitir novos itens de trabalho",
+      "work_item_creation_disable_tooltip": "A criação de itens de trabalho está desativada para este estado",
+      "default_state": "O estado padrão permite que todos os membros criem novos itens de trabalho. Isso não pode ser alterado",
+      "state_change_count": "{count, plural, one {1 mudança de estado permitida} other {{count} mudanças de estado permitidas}}",
+      "movers_count": "{count, plural, one {1 revisor listado} other {{count} revisores listados}}",
+      "state_changes": {
+        "label": {
+          "default": "Adicionar mudança de estado permitida",
+          "loading": "Adicionando mudança de estado permitida"
+        },
+        "move_to": "Mudar estado para",
+        "movers": {
+          "label": "Quando revisado por",
+          "tooltip": "Revisores são pessoas que têm permissão para mover itens de trabalho de um estado para outro.",
+          "add": "Adicionar revisores"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Você não pode mover este item de trabalho para cá."
+    },
+    "workflow_enabled": {
+      "label": "Mudança de estado"
+    },
+    "workflow_tree": {
+      "label": "Para itens de trabalho em",
+      "state_change_label": "pode movê-lo para"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Controle o caos de mudanças e revisões com Fluxos de Trabalho.",
+        "description": "Defina regras para onde seu trabalho se move, por quem e quando com Fluxos de Trabalho no Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Ver histórico de mudanças",
+      "reset_workflow": "Reiniciar fluxo de trabalho"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Tem certeza de que deseja reiniciar este fluxo de trabalho?",
+        "description": "Se você reiniciar este fluxo de trabalho, todas as suas regras de mudança de estado serão excluídas e você terá que criá-las novamente para executá-las neste projeto."
+      },
+      "delete_state_change": {
+        "title": "Tem certeza de que deseja excluir esta regra de mudança de estado?",
+        "description": "Uma vez excluída, você não pode desfazer esta alteração e terá que definir a regra novamente se quiser que ela funcione para este projeto."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} fluxo de trabalho",
+        "success": {
+          "title": "Sucesso",
+          "message": "Fluxo de trabalho {action} com sucesso"
+        },
+        "error": {
+          "title": "Erro",
+          "message": "Fluxo de trabalho não pôde ser {action}. Por favor, tente novamente."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Sucesso",
+          "message": "Fluxo de trabalho reiniciado com sucesso"
+        },
+        "error": {
+          "title": "Erro ao reiniciar fluxo de trabalho",
+          "message": "Fluxo de trabalho não pôde ser reiniciado. Por favor, tente novamente."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Erro ao adicionar regra de mudança de estado",
+          "message": "A regra de mudança de estado não pôde ser adicionada. Por favor, tente novamente."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Erro ao modificar regra de mudança de estado",
+          "message": "A regra de mudança de estado não pôde ser modificada. Por favor, tente novamente."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Erro ao remover regra de mudança de estado",
+          "message": "A regra de mudança de estado não pôde ser removida. Por favor, tente novamente."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Erro ao modificar revisores da regra de mudança de estado",
+          "message": "Os revisores da regra de mudança de estado não puderam ser modificados. Por favor, tente novamente."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/workspace-settings.json b/packages/i18n/src/locales/pt-BR/workspace-settings.json
new file mode 100644
index 0000000..ba42f92
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Configurações do espaço de trabalho",
+    "page_label": "{workspace} - Configurações gerais",
+    "key_created": "Chave criada",
+    "copy_key": "Copie e salve esta chave secreta no Páginas do Plane. Você não pode ver esta chave depois de clicar em Fechar. Um arquivo CSV contendo a chave foi baixado.",
+    "token_copied": "Token copiado para a área de transferência.",
+    "settings": {
+      "general": {
+        "title": "Geral",
+        "upload_logo": "Carregar logo",
+        "edit_logo": "Editar logo",
+        "name": "Nome do espaço de trabalho",
+        "company_size": "Tamanho da empresa",
+        "url": "URL do espaço de trabalho",
+        "workspace_timezone": "Fuso horário do espaço de trabalho",
+        "update_workspace": "Atualizar espaço de trabalho",
+        "delete_workspace": "Excluir este espaço de trabalho",
+        "delete_workspace_description": "Ao excluir um espaço de trabalho, todos os dados e recursos dentro desse espaço de trabalho serão permanentemente removidos e não poderão ser recuperados.",
+        "delete_btn": "Excluir este espaço de trabalho",
+        "delete_modal": {
+          "title": "Tem certeza de que deseja excluir este espaço de trabalho?",
+          "description": "Você tem uma avaliação ativa para um de nossos planos pagos. Cancele-o primeiro para prosseguir.",
+          "dismiss": "Dispensar",
+          "cancel": "Cancelar avaliação",
+          "success_title": "Espaço de trabalho excluído.",
+          "success_message": "Em breve, você irá para a página do seu perfil.",
+          "error_title": "Isso não funcionou.",
+          "error_message": "Tente novamente, por favor."
+        },
+        "errors": {
+          "name": {
+            "required": "O nome é obrigatório",
+            "max_length": "O nome do espaço de trabalho não deve exceder 80 caracteres"
+          },
+          "company_size": {
+            "required": "O tamanho da empresa é obrigatório",
+            "select_a_range": "Selecione o tamanho da organização"
+          }
+        }
+      },
+      "members": {
+        "title": "Membros",
+        "add_member": "Adicionar membro",
+        "pending_invites": "Convites pendentes",
+        "invitations_sent_successfully": "Convites enviados com sucesso",
+        "leave_confirmation": "Tem certeza de que deseja sair do espaço de trabalho? Você não terá mais acesso a este espaço de trabalho. Esta ação não pode ser desfeita.",
+        "details": {
+          "full_name": "Nome completo",
+          "display_name": "Nome de exibição",
+          "email_address": "Endereço de e-mail",
+          "account_type": "Tipo de conta",
+          "authentication": "Autenticação",
+          "joining_date": "Data de adesão"
+        },
+        "modal": {
+          "title": "Convidar pessoas para colaborar",
+          "description": "Convide pessoas para colaborar em seu espaço de trabalho.",
+          "button": "Enviar convites",
+          "button_loading": "Enviando convites",
+          "placeholder": "nome@empresa.com",
+          "errors": {
+            "required": "Precisamos de um endereço de e-mail para convidá-los.",
+            "invalid": "E-mail inválido"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Faturamento e planos",
+        "description": "Escolha seu plano, gerencie assinaturas e faça upgrade facilmente conforme suas necessidades crescem.",
+        "title": "Faturamento e planos",
+        "current_plan": "Plano atual",
+        "free_plan": "Você está usando o plano gratuito atualmente",
+        "view_plans": "Ver planos"
+      },
+      "exports": {
+        "heading": "Exportações",
+        "description": "Exporte os dados do seu projeto em vários formatos e acesse seu histórico de exportações com links para download.",
+        "title": "Exportações",
+        "exporting": "Exportando",
+        "previous_exports": "Exportações anteriores",
+        "export_separate_files": "Exporte os dados em arquivos separados",
+        "exporting_projects": "Exportando projeto",
+        "format": "Formato",
+        "filters_info": "Aplique filtros para exportar itens de trabalho específicos com base em seus critérios.",
+        "modal": {
+          "title": "Exportar para",
+          "toasts": {
+            "success": {
+              "title": "Exportação bem-sucedida",
+              "message": "Você poderá baixar o(a) {entity} exportado(a) na exportação anterior."
+            },
+            "error": {
+              "title": "Falha na exportação",
+              "message": "A exportação não foi bem-sucedida. Tente novamente."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooks",
+        "description": "Automatize notificações para serviços externos quando ocorrerem eventos do projeto.",
+        "title": "Webhooks",
+        "add_webhook": "Adicionar webhook",
+        "modal": {
+          "title": "Criar webhook",
+          "details": "Detalhes do webhook",
+          "payload": "URL do payload",
+          "question": "Quais eventos você gostaria de acionar este webhook?",
+          "error": "URL é obrigatório"
+        },
+        "secret_key": {
+          "title": "Chave secreta",
+          "message": "Gere um token para fazer login no payload do webhook"
+        },
+        "options": {
+          "all": "Envie-me tudo",
+          "individual": "Selecionar eventos individuais"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook criado",
+            "message": "O webhook foi criado com sucesso"
+          },
+          "not_created": {
+            "title": "Webhook não criado",
+            "message": "O webhook não pôde ser criado"
+          },
+          "updated": {
+            "title": "Webhook atualizado",
+            "message": "O webhook foi atualizado com sucesso"
+          },
+          "not_updated": {
+            "title": "Webhook não atualizado",
+            "message": "O webhook não pôde ser atualizado"
+          },
+          "removed": {
+            "title": "Webhook removido",
+            "message": "O webhook foi removido com sucesso"
+          },
+          "not_removed": {
+            "title": "Webhook não removido",
+            "message": "O webhook não pôde ser removido"
+          },
+          "secret_key_copied": {
+            "message": "Chave secreta copiada para a área de transferência."
+          },
+          "secret_key_not_copied": {
+            "message": "Ocorreu um erro ao copiar a chave secreta."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Tokens de API",
+        "description": "Gere tokens de API seguros para integrar seus dados com sistemas e aplicativos externos.",
+        "title": "Tokens de API",
+        "add_token": "Adicionar token de acesso",
+        "create_token": "Criar token",
+        "never_expires": "Nunca expira",
+        "generate_token": "Gerar token",
+        "generating": "Gerando",
+        "delete": {
+          "title": "Excluir token de API",
+          "description": "Qualquer aplicativo que use este token não terá mais acesso aos dados do Plane. Esta ação não pode ser desfeita.",
+          "success": {
+            "title": "Sucesso!",
+            "message": "O token de API foi excluído com sucesso"
+          },
+          "error": {
+            "title": "Erro!",
+            "message": "O token de API não pôde ser excluído"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integrações",
+        "heading": "Integrações",
+        "description": "Conecte-se com ferramentas e serviços populares para sincronizar seu trabalho em todo o seu ecossistema de fluxo de trabalho.",
+        "page_title": "Trabalhe com seus dados do Plane em aplicativos disponíveis ou nos seus próprios.",
+        "page_description": "Veja todas as integrações em uso por este workspace ou por você."
+      },
+      "imports": {
+        "title": "Importações",
+        "heading": "Importações",
+        "description": "Conecte e importe dados das suas ferramentas de gerenciamento de projetos existentes para otimizar a integração do seu fluxo de trabalho."
+      },
+      "worklogs": {
+        "title": "Registros de trabalho",
+        "heading": "Registros de trabalho",
+        "description": "Baixe registros de trabalho, também conhecidos como folhas de ponto, de qualquer pessoa em qualquer projeto."
+      },
+      "group_syncing": {
+        "title": "Sincronização de grupos",
+        "heading": "Sincronização de grupos",
+        "description": "Vincule grupos do provedor de identidade a projetos e funções. O acesso do usuário é atualizado automaticamente quando a associação ao grupo muda no seu IdP, simplificando onboarding e offboarding.",
+        "enable": {
+          "title": "Ativar sincronização de grupos",
+          "description": "Adicione automaticamente usuários a projetos com base nos grupos do provedor de identidade."
+        },
+        "config": {
+          "title": "Configurar sincronização de grupos",
+          "description": "Configure como os grupos do provedor de identidade são mapeados para projetos e funções.",
+          "sync_on_login": {
+            "title": "Sincronizar no login",
+            "description": "Atualize a associação ao grupo e o acesso ao projeto quando um usuário fizer login."
+          },
+          "sync_offline": {
+            "title": "Sincronização offline",
+            "description": "Executa a sincronização a cada seis horas automaticamente, sem esperar que os usuários façam login."
+          },
+          "auto_remove": {
+            "title": "Remoção automática",
+            "description": "Remova automaticamente usuários dos projetos quando não corresponderem mais ao grupo."
+          },
+          "group_attribute_key": {
+            "title": "Chave do atributo de grupo",
+            "description": "O atributo do provedor de identidade usado para identificar e sincronizar grupos de usuários.",
+            "placeholder": "Grupos"
+          }
+        },
+        "group_mapping": {
+          "title": "Mapeamento de grupos",
+          "description": "Vincule grupos do provedor de identidade a projetos e funções.",
+          "button_text": "Adicionar nova sincronização de grupo"
+        },
+        "toast": {
+          "updating": "Atualizando recurso de sincronização de grupos",
+          "success": "Recurso de sincronização de grupos atualizado com sucesso.",
+          "error": "Falha ao atualizar o recurso de sincronização de grupos!"
+        },
+        "delete_modal": {
+          "title": "Excluir sincronização de grupo",
+          "content": "Novos usuários deste grupo de identidade não serão mais adicionados ao projeto. Usuários já adicionados manterão sua função atual."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Grupo de usuários",
+            "required": "O grupo de usuários é obrigatório",
+            "placeholder": "Digite os nomes dos grupos IdP"
+          },
+          "project": {
+            "text": "Projeto",
+            "required": "O projeto é obrigatório",
+            "placeholder": "Selecione um projeto"
+          },
+          "default_role": {
+            "text": "Função do projeto",
+            "required": "A função do projeto é obrigatória",
+            "placeholder": "Selecione uma função do projeto"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identidade",
+        "heading": "Identidade",
+        "description": "Configure seu domínio e habilite o Single sign-on"
+      },
+      "project_states": {
+        "title": "Estados do projeto",
+        "heading": "Veja uma visão geral do progresso de todos os projetos.",
+        "description": "Os Estados de projeto são um recurso exclusivo do Plane para acompanhar o progresso de todos os seus projetos por qualquer propriedade do projeto.",
+        "go_to_settings": "Ir para as configurações"
+      },
+      "projects": {
+        "title": "Projetos",
+        "description": "Gerencie estados de projetos, ative etiquetas de projetos e outras configurações.",
+        "tabs": {
+          "states": "Estados do projeto",
+          "labels": "Etiquetas do projeto"
+        }
+      },
+      "templates": {
+        "title": "Modelos",
+        "heading": "Modelos",
+        "description": "Economize 80% do tempo gasto na criação de projetos, itens de trabalho e páginas quando você usar modelos."
+      },
+      "relations": {
+        "title": "Relações",
+        "heading": "Relações",
+        "description": "Crie e gerencie tipos de relação que conectam itens de trabalho em todo o seu espaço de trabalho."
+      },
+      "cancel_trial": {
+        "title": "Cancele seu período de teste primeiro.",
+        "description": "Você tem um período de teste ativo para um de nossos planos pagos. Por favor, cancele-o primeiro para prosseguir.",
+        "dismiss": "Dispensar",
+        "cancel": "Cancelar período de teste",
+        "cancel_success_title": "Período de teste cancelado.",
+        "cancel_success_message": "Agora você pode excluir o workspace.",
+        "cancel_error_title": "Isso não funcionou.",
+        "cancel_error_message": "Tente novamente, por favor."
+      },
+      "applications": {
+        "internal": "Interno",
+        "title": "Aplicativos",
+        "applicationId_copied": "ID da aplicação copiado para a área de transferência",
+        "clientId_copied": "ID do cliente copiado para a área de transferência",
+        "clientSecret_copied": "Chave secreta do cliente copiado para a área de transferência",
+        "third_party_apps": "Aplicativos de terceiros",
+        "your_apps": "Seus aplicativos",
+        "connect": "Conectar",
+        "connected": "Conectado",
+        "disconnect": "Desconectar",
+        "install": "Instalar",
+        "installed": "Instalado",
+        "configure": "Configurar",
+        "app_available": "Você fez este aplicativo disponível para uso com um workspace do Plane",
+        "app_credentials_regenrated": {
+          "title": "As credenciais do aplicativo foram regeneradas com sucesso",
+          "description": "Substitua o segredo do cliente em todos os lugares onde for usado. O segredo anterior não é mais válido."
+        },
+        "app_created": {
+          "title": "Aplicativo criado com sucesso",
+          "description": "Use as credenciais para instalar o aplicativo em um workspace Plane"
+        },
+        "installed_apps": "Aplicativos instalados",
+        "all_apps": "Todos os aplicativos",
+        "internal_apps": "Aplicativos internos",
+        "app_name_title": "Como você vai chamar este aplicativo",
+        "app_description_title": {
+          "label": "Descrição longa",
+          "placeholder": "Escreva uma descrição longa para o marketplace. Pressione '/' para comandos."
+        },
+        "authorization_grant_type": {
+          "title": "Tipo de conexão",
+          "description": "Escolha se seu aplicativo deve ser instalado uma vez para o workspace ou permitir que cada usuário conecte sua própria conta"
+        },
+        "website": {
+          "title": "Site",
+          "description": "Link para o site do seu aplicativo.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Criador de aplicativos",
+          "description": "A pessoa ou organização que está criando o aplicativo."
+        },
+        "app_maker_error": "Criador de aplicativos é obrigatório",
+        "setup_url": {
+          "label": "URL de configuração",
+          "description": "Os usuários serão redirecionados para este URL quando instalarem o aplicativo.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL do webhook",
+          "description": "É aqui que enviaremos eventos e atualizações do webhook a partir dos workspaces onde seu aplicativo está instalado.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Segredo do webhook",
+          "description": "Segredo usado para verificar as solicitações de webhook recebidas.",
+          "placeholder": "Digite uma chave secreta aleatória"
+        },
+        "redirect_uris": {
+          "label": "URIs de redirecionamento (separadas por espaço)",
+          "description": "Os usuários serão redirecionados para este caminho após se autenticarem com o Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Conecte um workspace do Plane para começar a usar",
+        "client_id_and_secret": "ID do cliente e chave secreta",
+        "client_id_and_secret_description": "Copie e salve esta chave secreta em Páginas. Você não poderá ver esta chave novamente após fechar.",
+        "client_id_and_secret_download": "Você pode baixar um CSV com a chave aqui.",
+        "application_id": "ID da aplicação",
+        "client_id": "ID do cliente",
+        "client_secret": "Chave secreta do cliente",
+        "export_as_csv": "Exportar como CSV",
+        "slug_already_exists": "Slug já existe",
+        "failed_to_create_application": "Falha ao criar aplicação",
+        "upload_logo": "Carregar logo",
+        "app_name_error": "Nome do aplicativo é obrigatório",
+        "app_short_description_title": "Dê este aplicativo uma descrição curta",
+        "app_short_description_error": "Descrição curta do aplicativo é obrigatória",
+        "app_description_error": "Descrição do aplicativo é obrigatória",
+        "app_slug_title": "Slug do aplicativo",
+        "app_slug_error": "Slug do aplicativo é obrigatório",
+        "invalid_website_error": "Site inválido",
+        "webhook_url_title": "URL do webhook",
+        "webhook_url_error": "URL do webhook é obrigatória",
+        "invalid_webhook_url_error": "URL do webhook inválida",
+        "redirect_uris_title": "Redirect URIs",
+        "redirect_uris_error": "Redirect URIs são obrigatórias",
+        "invalid_redirect_uris_error": "Redirect URIs inválidas",
+        "redirect_uris_description": "Digite URIs separados por espaço onde o aplicativo redirecionará para o usuário após e.g https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Origens de Javascript autorizadas",
+        "authorized_javascript_origins_error": "Origens de Javascript autorizadas são obrigatórias",
+        "invalid_authorized_javascript_origins_error": "Origens de Javascript autorizadas inválidas",
+        "authorized_javascript_origins_description": "Digite origens separadas por espaço onde o aplicativo será permitido fazer solicitações e.g app.com example.com",
+        "create_app": "Criar aplicativo",
+        "update_app": "Atualizar aplicativo",
+        "build_your_own_app": "Crie seu próprio aplicativo",
+        "edit_app_details": "Editar detalhes do aplicativo",
+        "regenerate_client_secret_description": "Regenerar a chave secreta do cliente. Se você regenerar a chave, poderá copiar a chave ou baixá-la para um arquivo CSV logo após.",
+        "regenerate_client_secret": "Regenerar chave secreta do cliente",
+        "regenerate_client_secret_confirm_title": "Tem certeza que deseja regenerar a chave secreta do cliente?",
+        "regenerate_client_secret_confirm_description": "O aplicativo que usa esta chave secreta deixará de funcionar. Você precisará atualizar a chave secreta no aplicativo.",
+        "regenerate_client_secret_confirm_cancel": "Cancelar",
+        "regenerate_client_secret_confirm_regenerate": "Regenerar",
+        "read_only_access_to_workspace": "Acesso de leitura ao seu workspace",
+        "write_access_to_workspace": "Acesso de escrita ao seu workspace",
+        "read_only_access_to_user_profile": "Acesso de leitura ao seu perfil de usuário",
+        "write_access_to_user_profile": "Acesso de escrita ao seu perfil de usuário",
+        "connect_app_to_workspace": "Conectar {app} ao seu workspace {workspace}",
+        "user_permissions": "Permissões de usuário",
+        "user_permissions_description": "Permissões de usuário são usadas para conceder acesso ao perfil do usuário.",
+        "workspace_permissions": "Permissões de workspace",
+        "workspace_permissions_description": "Permissões de workspace são usadas para conceder acesso ao workspace.",
+        "with_the_permissions": "com as permissões",
+        "app_consent_title": "{app} está solicitando acesso ao seu workspace do Plane e perfil.",
+        "choose_workspace_to_connect_app_with": "Escolha um workspace para conectar o aplicativo",
+        "app_consent_workspace_permissions_title": "{app} gostaria de",
+        "app_consent_user_permissions_title": "{app} também pode solicitar permissão de um usuário para os seguintes recursos. Essas permissões serão solicitadas e autorizadas apenas por um usuário.",
+        "app_consent_accept_title": "Ao aceitar, você",
+        "app_consent_accept_1": "Conceda ao aplicativo acesso aos seus dados do Plane onde você puder usar o aplicativo dentro ou fora do Plane",
+        "app_consent_accept_2": "Concorda com a Política de Privacidade e Termos de Uso de {app}",
+        "accepting": "Aceitando...",
+        "accept": "Aceitar",
+        "categories": "Categorias",
+        "select_app_categories": "Selecione as categorias do aplicativo",
+        "categories_title": "Categorias",
+        "categories_error": "Categorias são obrigatórias",
+        "invalid_categories_error": "Categorias inválidas",
+        "categories_description": "Selecione as categorias que melhor descrevem o aplicativo",
+        "supported_plans": "Planos Suportados",
+        "supported_plans_description": "Selecione os planos de workspace que podem instalar esta aplicação. Deixe vazio para permitir todos os planos.",
+        "select_plans": "Selecionar Planos",
+        "privacy_policy_url_title": "URL da Política de Privacidade",
+        "privacy_policy_url_error": "URL da Política de Privacidade é obrigatória",
+        "invalid_privacy_policy_url_error": "URL da Política de Privacidade inválida",
+        "terms_of_service_url_title": "URL dos Termos de Serviço",
+        "terms_of_service_url_error": "URL dos Termos de Serviço é obrigatória",
+        "invalid_terms_of_service_url_error": "URL dos Termos de Serviço inválida",
+        "support_url_title": "URL de Suporte",
+        "support_url_error": "URL de Suporte é obrigatória",
+        "invalid_support_url_error": "URL de Suporte inválida",
+        "video_url_title": "URL do Vídeo",
+        "video_url_error": "URL do Vídeo é obrigatória",
+        "invalid_video_url_error": "URL do Vídeo inválida",
+        "setup_url_error": "URL de Configuração é obrigatória",
+        "invalid_setup_url_error": "URL de Configuração inválida",
+        "configuration_url_title": "URL de Configuração",
+        "configuration_url_error": "URL de Configuração é obrigatória",
+        "invalid_configuration_url_error": "URL de Configuração inválida",
+        "contact_email_title": "Email de Contato",
+        "contact_email_error": "Email de Contato é obrigatório",
+        "invalid_contact_email_error": "Email de Contato inválido",
+        "upload_attachments": "Carregar Anexos",
+        "uploading_images": "Carregando {count} Imagem{count, plural, one {s} other {s}}",
+        "drop_images_here": "Arraste e solte as imagens aqui",
+        "click_to_upload_images": "Clique para carregar imagens",
+        "invalid_file_or_exceeds_size_limit": "Arquivo inválido ou excede o limite de tamanho ({size} MB)",
+        "uploading": "Carregando...",
+        "upload_and_save": "Carregar e salvar",
+        "app_consent_no_access_title": "Solicitação para instalar",
+        "app_consent_no_access_description": "Este aplicativo só pode ser instalado depois que um administrador do workspace o instalar. Entre em contato com o administrador do seu workspace para continuar.",
+        "app_consent_unapproved_title": "Este aplicativo ainda não foi revisado ou aprovado pelo Plane.",
+        "app_consent_unapproved_description": "Certifique-se de confiar neste aplicativo antes de conectá-lo ao seu espaço de trabalho.",
+        "go_to_app": "Ir para o aplicativo",
+        "enable_app_mentions": "Ativar menções do aplicativo",
+        "enable_app_mentions_tooltip": "Quando isso está ativado, os usuários podem mencionar ou atribuir Work Items a este aplicativo.",
+        "scopes": "Escopos",
+        "select_scopes": "Selecionar escopos",
+        "read_access_to": "Acesso somente leitura a",
+        "write_access_to": "Acesso de gravação a",
+        "global_permission_expiration": "Os escopos globais estão expirando em breve. Use escopos granulares em vez disso. Por exemplo, use project:read em vez de uma leitura global.",
+        "selected_scopes": "{count} selecionado(s)",
+        "scopes_and_permissions": "Escopos e permissões",
+        "read": "Leitura",
+        "write": "Gravação",
+        "scope_description": {
+          "projects": "Acesso a projetos e todas as entidades relacionadas a projetos",
+          "wiki": "Acesso ao wiki e todas as entidades relacionadas ao wiki",
+          "workspaces": "Acesso a workspaces e todas as entidades relacionadas",
+          "stickies": "Acesso a stickies e todas as entidades relacionadas a stickies",
+          "profile": "Acesso às informações do perfil do usuário",
+          "agents": "Acesso a agentes e todas as entidades relacionadas a agentes",
+          "assets": "Acesso a ativos e todas as entidades relacionadas a ativos"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Veja seu trabalho se tornar mais inteligente e mais rápido com IA que está conectada de forma nativa ao seu trabalho e base de conhecimentos."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Scripts",
+        "new_script": "Novo Script",
+        "description": "Automatize seus fluxos de trabalho com scripts personalizados e regras de automação."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Nenhum token de API criado",
+        "description": "As APIs do Plane podem ser usadas para integrar seus dados no Plane com qualquer sistema externo. Crie um token para começar."
+      },
+      "webhooks": {
+        "title": "Nenhum webhook adicionado",
+        "description": "Crie webhooks para receber atualizações em tempo real e automatizar ações."
+      },
+      "exports": {
+        "title": "Nenhuma exportação ainda",
+        "description": "Sempre que você exportar, você também terá uma cópia aqui para referência."
+      },
+      "imports": {
+        "title": "Nenhuma importação ainda",
+        "description": "Encontre todas as suas importações anteriores aqui e baixe-as."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/pt-BR/workspace.json b/packages/i18n/src/locales/pt-BR/workspace.json
new file mode 100644
index 0000000..5570c56
--- /dev/null
+++ b/packages/i18n/src/locales/pt-BR/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Crie seu espaço de trabalho",
+    "subheading": "Para começar a usar o Plane, você precisa criar ou entrar em um espaço de trabalho.",
+    "form": {
+      "name": {
+        "label": "Nomeie seu espaço de trabalho",
+        "placeholder": "Algo familiar e reconhecível é sempre melhor."
+      },
+      "url": {
+        "label": "Defina o URL do seu espaço de trabalho",
+        "placeholder": "Digite ou cole um URL",
+        "edit_slug": "Você só pode editar o slug do URL"
+      },
+      "organization_size": {
+        "label": "Quantas pessoas usarão este espaço de trabalho?",
+        "placeholder": "Selecione um intervalo"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Apenas o administrador da sua instância pode criar espaços de trabalho",
+        "description": "Se você souber o endereço de e-mail do administrador da sua instância, clique no botão abaixo para entrar em contato com ele.",
+        "request_button": "Solicitar administrador da instância"
+      },
+      "validation": {
+        "name_alphanumeric": "Os nomes dos espaços de trabalho podem conter apenas (' '), ('-'), ('_') e caracteres alfanuméricos.",
+        "name_length": "Limite seu nome a 80 caracteres.",
+        "url_alphanumeric": "Os URLs podem conter apenas ('-') e caracteres alfanuméricos.",
+        "url_length": "Limite seu URL a 48 caracteres.",
+        "url_already_taken": "O URL do espaço de trabalho já está em uso!"
+      }
+    },
+    "request_email": {
+      "subject": "Solicitando um novo espaço de trabalho",
+      "body": "Olá, administrador(es) da instância,\n\nPor favor, crie um novo espaço de trabalho com o URL [/nome-do-espaço-de-trabalho] para [finalidade de criar o espaço de trabalho].\n\nObrigado,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Criar espaço de trabalho",
+      "loading": "Criando espaço de trabalho"
+    },
+    "toast": {
+      "success": {
+        "title": "Sucesso",
+        "message": "Espaço de trabalho criado com sucesso"
+      },
+      "error": {
+        "title": "Erro",
+        "message": "Não foi possível criar o espaço de trabalho. Por favor, tente novamente."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Visão geral dos seus projetos, atividades e métricas",
+        "description": "Bem-vindo ao Plane, estamos animados por tê-lo aqui. Crie seu primeiro projeto e rastreie seus itens de trabalho, e esta página se transformará em um espaço que ajuda você a progredir. Os administradores também verão itens que ajudam sua equipe a progredir.",
+        "primary_button": {
+          "text": "Construa seu primeiro projeto",
+          "comic": {
+            "title": "Tudo começa com um projeto no Plane",
+            "description": "Um projeto pode ser o planejamento de um produto, uma campanha de marketing ou o lançamento de um novo carro."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Análises",
+    "page_label": "{workspace} - Análises",
+    "open_tasks": "Total de tarefas abertas",
+    "error": "Ocorreu algum erro ao buscar os dados.",
+    "work_items_closed_in": "Itens de trabalho fechados em",
+    "selected_projects": "Projetos selecionados",
+    "total_members": "Total de membros",
+    "total_cycles": "Total de ciclos",
+    "total_modules": "Total de módulos",
+    "pending_work_items": {
+      "title": "Itens de trabalho pendentes",
+      "empty_state": "A análise de itens de trabalho pendentes por colegas de trabalho aparece aqui."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Itens de trabalho fechados em um ano",
+      "empty_state": "Feche os itens de trabalho para visualizar a análise dos mesmos na forma de um gráfico."
+    },
+    "most_work_items_created": {
+      "title": "Itens de trabalho mais criados",
+      "empty_state": "Colegas de trabalho e o número de itens de trabalho criados por eles aparecem aqui."
+    },
+    "most_work_items_closed": {
+      "title": "Itens de trabalho mais fechados",
+      "empty_state": "Colegas de trabalho e o número de itens de trabalho fechados por eles aparecem aqui."
+    },
+    "tabs": {
+      "scope_and_demand": "Escopo e Demanda",
+      "custom": "Análises Personalizadas"
+    },
+    "total": "Total de {entity}",
+    "started_work_items": "{entity} iniciados",
+    "backlog_work_items": "{entity} no backlog",
+    "un_started_work_items": "{entity} não iniciados",
+    "completed_work_items": "{entity} concluídos",
+    "project_insights": "Insights do projeto",
+    "summary_of_projects": "Resumo dos projetos",
+    "all_projects": "Todos os projetos",
+    "trend_on_charts": "Tendência nos gráficos",
+    "active_projects": "Projetos ativos",
+    "customized_insights": "Insights personalizados",
+    "created_vs_resolved": "Criado vs Resolvido",
+    "empty_state": {
+      "project_insights": {
+        "title": "Ainda não há dados",
+        "description": "Os itens de trabalho atribuídos a você, divididos por estado, aparecerão aqui."
+      },
+      "created_vs_resolved": {
+        "title": "Ainda não há dados",
+        "description": "Os itens de trabalho criados e resolvidos ao longo do tempo aparecerão aqui."
+      },
+      "customized_insights": {
+        "title": "Ainda não há dados",
+        "description": "Os itens de trabalho atribuídos a você, divididos por estado, aparecerão aqui."
+      },
+      "general": {
+        "title": "Acompanhe progresso, cargas de trabalho e alocações. Identifique tendências, remova bloqueios e trabalhe mais rápido",
+        "description": "Veja escopo versus demanda, estimativas e expansão de escopo. Obtenha desempenho por membros da equipe e equipes, garantindo que seu projeto seja executado no prazo.",
+        "primary_button": {
+          "text": "Comece seu primeiro projeto",
+          "comic": {
+            "title": "Analytics funciona melhor com Ciclos + Módulos",
+            "description": "Primeiro, defina um tempo limite para seus itens de trabalho em Ciclos e, se possível, agrupe itens que abrangem mais de um ciclo em Módulos. Confira ambos na navegação esquerda."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Ainda não há dados",
+        "description": "A análise de progresso do ciclo aparecerá aqui. Adicione itens de trabalho aos ciclos para começar a acompanhar o progresso."
+      },
+      "module_progress": {
+        "title": "Ainda não há dados",
+        "description": "A análise de progresso do módulo aparecerá aqui. Adicione itens de trabalho aos módulos para começar a acompanhar o progresso."
+      },
+      "intake_trends": {
+        "title": "Ainda não há dados",
+        "description": "A análise de tendências de intake aparecerá aqui. Adicione itens de trabalho ao intake para começar a acompanhar as tendências."
+      }
+    },
+    "upgrade_to_plan": "Faça upgrade para {plan} para desbloquear {tab}",
+    "workitem_resolved_vs_pending": "Itens de trabalho resolvidos vs pendentes",
+    "projects_by_status": "Projetos por status",
+    "active_users": "Usuários ativos",
+    "intake_trends": "Tendências de entrada"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Projeto} other {Projetos}}",
+    "create": {
+      "label": "Adicionar Projeto"
+    },
+    "network": {
+      "label": "Rede",
+      "private": {
+        "title": "Privado",
+        "description": "Acessível apenas por convite"
+      },
+      "public": {
+        "title": "Público",
+        "description": "Qualquer pessoa no espaço de trabalho, exceto convidados, pode participar"
+      }
+    },
+    "error": {
+      "permission": "Você não tem permissão para realizar esta ação.",
+      "cycle_delete": "Falha ao excluir o ciclo",
+      "module_delete": "Falha ao excluir o módulo",
+      "issue_delete": "Falha ao excluir o item de trabalho"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Não iniciado",
+      "started": "Iniciado",
+      "completed": "Concluído",
+      "cancelled": "Cancelado"
+    },
+    "sort": {
+      "manual": "Manual",
+      "name": "Nome",
+      "created_at": "Data de criação",
+      "members_length": "Número de membros"
+    },
+    "scope": {
+      "my_projects": "Meus projetos",
+      "archived_projects": "Arquivados"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# mês} other{# meses}}",
+      "days_count": "{days, plural, one{# dia} other{# dias}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Nenhum projeto ativo",
+        "description": "Pense em cada projeto como o pai do trabalho orientado a objetivos. Os projetos são onde os Trabalhos, Ciclos e Módulos vivem e, junto com seus colegas, ajudam você a atingir esse objetivo. Crie um novo projeto ou filtre os projetos arquivados.",
+        "primary_button": {
+          "text": "Comece seu primeiro projeto",
+          "comic": {
+            "title": "Tudo começa com um projeto no Plane",
+            "description": "Um projeto pode ser o roteiro de um produto, uma campanha de marketing ou o lançamento de um novo carro."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Nenhum projeto",
+        "description": "Para criar itens de trabalho ou gerenciar seu trabalho, você precisa criar um projeto ou fazer parte de um.",
+        "primary_button": {
+          "text": "Comece seu primeiro projeto",
+          "comic": {
+            "title": "Tudo começa com um projeto no Plane",
+            "description": "Um projeto pode ser o roteiro de um produto, uma campanha de marketing ou o lançamento de um novo carro."
+          }
+        }
+      },
+      "filter": {
+        "title": "Nenhum projeto correspondente",
+        "description": "Nenhum projeto detectado com os critérios correspondentes.\n Crie um novo projeto em vez disso."
+      },
+      "search": {
+        "description": "Nenhum projeto detectado com os critérios correspondentes.\nCrie um novo projeto em vez disso"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Adicionar visualização",
+    "empty_state": {
+      "all-issues": {
+        "title": "Nenhum item de trabalho no projeto",
+        "description": "Primeiro projeto concluído! Agora, divida seu trabalho em partes rastreáveis com itens de trabalho. Vamos lá!",
+        "primary_button": {
+          "text": "Criar novo item de trabalho"
+        }
+      },
+      "assigned": {
+        "title": "Nenhum item de trabalho ainda",
+        "description": "Os itens de trabalho atribuídos a você podem ser rastreados aqui.",
+        "primary_button": {
+          "text": "Criar novo item de trabalho"
+        }
+      },
+      "created": {
+        "title": "Nenhum item de trabalho ainda",
+        "description": "Todos os itens de trabalho criados por você vêm aqui, rastreie-os aqui diretamente.",
+        "primary_button": {
+          "text": "Criar novo item de trabalho"
+        }
+      },
+      "subscribed": {
+        "title": "Nenhum item de trabalho ainda",
+        "description": "Inscreva-se nos itens de trabalho nos quais você está interessado, rastreie todos eles aqui."
+      },
+      "custom-view": {
+        "title": "Nenhum item de trabalho ainda",
+        "description": "Itens de trabalho que se aplicam aos filtros, rastreie todos eles aqui."
+      }
+    },
+    "delete_view": {
+      "title": "Tem certeza de que deseja excluir esta visualização?",
+      "content": "Se você confirmar, todas as opções de classificação, filtro e exibição + o layout que você escolheu para esta visualização serão excluídos permanentemente sem nenhuma maneira de restaurá-los."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Rascunhar um item de trabalho",
+    "empty_state": {
+      "title": "Itens de trabalho semi-escritos e, em breve, os comentários aparecerão aqui.",
+      "description": "Para experimentar, comece a adicionar um item de trabalho e deixe-o no meio do caminho ou crie seu primeiro rascunho abaixo. 😉",
+      "primary_button": {
+        "text": "Criar seu primeiro rascunho"
+      }
+    },
+    "delete_modal": {
+      "title": "Excluir rascunho",
+      "description": "Tem certeza de que deseja excluir este rascunho? Isso não pode ser desfeito."
+    },
+    "toasts": {
+      "created": {
+        "success": "Rascunho criado",
+        "error": "Não foi possível criar o item de trabalho. Por favor, tente novamente."
+      },
+      "deleted": {
+        "success": "Rascunho excluído"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Escreva uma nota, um documento ou uma base de conhecimento completa. Obtenha ajuda do Galileo, o assistente de IA do Plane, para começar",
+        "description": "Páginas são espaços para desenvolver pensamentos no Plane. Anote notas de reunião, formate-as facilmente, incorpore itens de trabalho, organize-os usando uma biblioteca de componentes e mantenha tudo no contexto do seu projeto. Para facilitar qualquer documento, invoque o Galileo, a IA do Plane, com um atalho ou clique de um botão.",
+        "primary_button": {
+          "text": "Crie sua primeira página"
+        }
+      },
+      "private": {
+        "title": "Ainda não há páginas privadas",
+        "description": "Mantenha seus pensamentos privados aqui. Quando estiver pronto para compartilhar, a equipe está a apenas um clique de distância.",
+        "primary_button": {
+          "text": "Crie sua primeira página"
+        }
+      },
+      "public": {
+        "title": "Ainda não há páginas do espaço de trabalho",
+        "description": "Veja páginas compartilhadas com todos em seu espaço de trabalho aqui mesmo.",
+        "primary_button": {
+          "text": "Crie sua primeira página"
+        }
+      },
+      "archived": {
+        "title": "Ainda não há páginas arquivadas",
+        "description": "Arquive páginas fora do seu radar. Acesse-as aqui quando necessário."
+      },
+      "shared": {
+        "title": "Ainda não há páginas compartilhadas",
+        "description": "As páginas que outros compartilharam com você aparecerão aqui."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Nenhum ciclo ativo",
+        "description": "Ciclos dos seus projetos que incluem qualquer período que engloba a data de hoje dentro de seu intervalo. Encontre o progresso e detalhes de todos os seus ciclos ativos aqui."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Importar membros do CSV",
+      "description": "Carregue um CSV com colunas: Email, Display Name, First Name, Last Name, Role (5, 15 ou 20)",
+      "dropzone": {
+        "active": "Solte o arquivo CSV aqui",
+        "inactive": "Arraste e solte ou clique para fazer upload",
+        "file_type": "Apenas arquivos .csv são suportados"
+      },
+      "buttons": {
+        "cancel": "Cancelar",
+        "import": "Importar",
+        "try_again": "Tentar novamente",
+        "close": "Fechar",
+        "done": "Concluído"
+      },
+      "progress": {
+        "uploading": "Enviando...",
+        "importing": "Importando..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Importação falhou",
+          "complete": "Importação concluída"
+        },
+        "message": {
+          "seat_limit": "Não foi possível importar membros devido a restrições de limite de assentos.",
+          "success": "{count} membr{plural} adicionad{plural} com sucesso ao espaço de trabalho.",
+          "no_imports": "Nenhum membro foi importado do arquivo CSV."
+        },
+        "stats": {
+          "successful": "Bem-sucedido",
+          "failed": "Falhou"
+        },
+        "download_errors": "Baixar erros"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Arquivo inválido",
+          "message": "Apenas arquivos CSV são suportados."
+        },
+        "import_failed": {
+          "title": "Importação falhou",
+          "message": "Algo deu errado."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/accessibility.json b/packages/i18n/src/locales/ro/accessibility.json
new file mode 100644
index 0000000..52f5554
--- /dev/null
+++ b/packages/i18n/src/locales/ro/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo spațiu de lucru",
+      "open_workspace_switcher": "Deschide comutator spațiu de lucru",
+      "open_user_menu": "Deschide meniul utilizatorului",
+      "open_command_palette": "Deschide paleta de comenzi",
+      "open_extended_sidebar": "Deschide bara laterală extinsă",
+      "close_extended_sidebar": "Închide bara laterală extinsă",
+      "create_favorites_folder": "Creează folder de favorite",
+      "open_folder": "Deschide folderul",
+      "close_folder": "Închide folderul",
+      "open_favorites_menu": "Deschide meniul de favorite",
+      "close_favorites_menu": "Închide meniul de favorite",
+      "enter_folder_name": "Introduceți numele folderului",
+      "create_new_project": "Creează proiect nou",
+      "open_projects_menu": "Deschide meniul de proiecte",
+      "close_projects_menu": "Închide meniul de proiecte",
+      "toggle_quick_actions_menu": "Comută meniul de acțiuni rapide",
+      "open_project_menu": "Deschide meniul proiectului",
+      "close_project_menu": "Închide meniul proiectului",
+      "collapse_sidebar": "Restrânge bara laterală",
+      "expand_sidebar": "Extinde bara laterală",
+      "edition_badge": "Deschide modalul planurilor plătite"
+    },
+    "auth_forms": {
+      "clear_email": "Șterge e-mailul",
+      "show_password": "Afișează parola",
+      "hide_password": "Ascunde parola",
+      "close_alert": "Închide alerta",
+      "close_popover": "Închide popover-ul"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/auth.json b/packages/i18n/src/locales/ro/auth.json
new file mode 100644
index 0000000..960c5fa
--- /dev/null
+++ b/packages/i18n/src/locales/ro/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identitate",
+    "description": "Configurați domeniul dvs. pentru a accesa funcțiile de securitate, inclusiv autentificarea unică.",
+    "domain_management": {
+      "header": "Gestionarea domeniilor",
+      "verified_domains": {
+        "header": "Domenii verificate",
+        "description": "Verificați proprietatea unui domeniu de e-mail pentru a activa autentificarea unică.",
+        "button_text": "Adăugați domeniu",
+        "list": {
+          "domain_name": "Numele domeniului",
+          "status": "Stare",
+          "status_verified": "Verificat",
+          "status_failed": "Eșuat",
+          "status_pending": "În așteptare"
+        },
+        "add_domain": {
+          "title": "Adăugați domeniu",
+          "description": "Adăugați domeniul dvs. pentru a configura SSO și a-l verifica.",
+          "form": {
+            "domain_label": "Domeniu",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Domeniul este obligatoriu",
+            "domain_invalid": "Introduceți un nume de domeniu valid (ex. plane.so)"
+          },
+          "primary_button_text": "Adăugați domeniu",
+          "primary_button_loading_text": "Se adaugă",
+          "toast": {
+            "success_title": "Succes!",
+            "success_message": "Domeniul a fost adăugat cu succes. Vă rugăm să-l verificați adăugând înregistrarea DNS TXT.",
+            "error_message": "Nu s-a putut adăuga domeniul. Vă rugăm să încercați din nou."
+          }
+        },
+        "verify_domain": {
+          "title": "Verificați domeniul dvs.",
+          "description": "Urmați acești pași pentru a vă verifica domeniul.",
+          "instructions": {
+            "label": "Instrucțiuni",
+            "step_1": "Accesați setările DNS pentru gazda domeniului dvs.",
+            "step_2": {
+              "part_1": "Creați o",
+              "part_2": "înregistrare TXT",
+              "part_3": "și lipiți valoarea completă a înregistrării furnizate mai jos."
+            },
+            "step_3": "Această actualizare durează de obicei câteva minute, dar poate dura până la 72 de ore.",
+            "step_4": "Faceți clic pe \"Verificați domeniul\" pentru a confirma odată ce înregistrarea DNS a fost actualizată."
+          },
+          "verification_code_label": "Valoarea înregistrării TXT",
+          "verification_code_description": "Adăugați această înregistrare la setările DNS",
+          "domain_label": "Domeniu",
+          "primary_button_text": "Verificați domeniul",
+          "primary_button_loading_text": "Se verifică",
+          "secondary_button_text": "O voi face mai târziu",
+          "toast": {
+            "success_title": "Succes!",
+            "success_message": "Domeniul a fost verificat cu succes.",
+            "error_message": "Nu s-a putut verifica domeniul. Vă rugăm să încercați din nou."
+          }
+        },
+        "delete_domain": {
+          "title": "Ștergeți domeniul",
+          "description": {
+            "prefix": "Sigur doriți să ștergeți",
+            "suffix": "? Această acțiune nu poate fi anulată."
+          },
+          "primary_button_text": "Șterge",
+          "primary_button_loading_text": "Se șterge",
+          "secondary_button_text": "Anulează",
+          "toast": {
+            "success_title": "Succes!",
+            "success_message": "Domeniul a fost șters cu succes.",
+            "error_message": "Nu s-a putut șterge domeniul. Vă rugăm să încercați din nou."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Autentificare unică",
+      "disabled_message": "Adăugați un domeniu verificat pentru a configura SSO",
+      "configure": {
+        "create": "Configurați",
+        "update": "Editați"
+      },
+      "switch_alert_modal": {
+        "title": "Comutați metoda SSO la {newProviderShortName}?",
+        "content": "Sunteți pe cale să activați {newProviderLongName} ({newProviderShortName}). Această acțiune va dezactiva automat {activeProviderLongName} ({activeProviderShortName}). Utilizatorii care încearcă să se conecteze prin {activeProviderShortName} nu vor mai putea accesa platforma până când nu trec la noua metodă. Sigur doriți să continuați?",
+        "primary_button_text": "Comutați",
+        "primary_button_text_loading": "Se comută",
+        "secondary_button_text": "Anulează"
+      },
+      "form_section": {
+        "title": "Detalii furnizate de IdP pentru {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Se salvează",
+        "save_changes": "Salvați modificările",
+        "configure_only": "Doar configurare",
+        "configure_and_enable": "Configurați și activați",
+        "default": "Salvați"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} detalii furnizate pentru IdP-ul dvs.",
+        "button_text": "Obțineți detalii de configurare"
+      },
+      "saml": {
+        "header": "Activați SAML",
+        "description": "Configurați furnizorul dvs. de identitate SAML pentru a activa autentificarea unică.",
+        "configure": {
+          "title": "Activați SAML",
+          "description": "Verificați proprietatea unui domeniu de e-mail pentru a accesa funcțiile de securitate, inclusiv autentificarea unică.",
+          "toast": {
+            "success_title": "Succes!",
+            "create_success_message": "Furnizorul SAML a fost creat cu succes.",
+            "update_success_message": "Furnizorul SAML a fost actualizat cu succes.",
+            "error_title": "Eroare!",
+            "error_message": "Nu s-a putut salva furnizorul SAML. Vă rugăm să încercați din nou."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Detalii web",
+            "entity_id": {
+              "label": "ID entitate | Public | Informații metadate",
+              "description": "Vom genera această parte a metadatelor care identifică această aplicație Plane ca un serviciu autorizat pe IdP-ul dvs."
+            },
+            "callback_url": {
+              "label": "URL autentificare unică",
+              "description": "Vom genera acest lucru pentru dvs. Adăugați acest lucru în câmpul URL de redirecționare de conectare al IdP-ului dvs."
+            },
+            "logout_url": {
+              "label": "URL deconectare unică",
+              "description": "Vom genera acest lucru pentru dvs. Adăugați acest lucru în câmpul URL de redirecționare de deconectare unică al IdP-ului dvs."
+            }
+          },
+          "mobile_details": {
+            "header": "Detalii mobile",
+            "entity_id": {
+              "label": "ID entitate | Public | Informații metadate",
+              "description": "Vom genera această parte a metadatelor care identifică această aplicație Plane ca un serviciu autorizat pe IdP-ul dvs."
+            },
+            "callback_url": {
+              "label": "URL autentificare unică",
+              "description": "Vom genera acest lucru pentru dvs. Adăugați acest lucru în câmpul URL de redirecționare de conectare al IdP-ului dvs."
+            },
+            "logout_url": {
+              "label": "URL deconectare unică",
+              "description": "Vom genera acest lucru pentru dvs. Adăugați acest lucru în câmpul URL de redirecționare de deconectare al IdP-ului dvs."
+            }
+          },
+          "mapping_table": {
+            "header": "Detalii mapare",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Activați OIDC",
+        "description": "Configurați furnizorul dvs. de identitate OIDC pentru a activa autentificarea unică.",
+        "configure": {
+          "title": "Activați OIDC",
+          "description": "Verificați proprietatea unui domeniu de e-mail pentru a accesa funcțiile de securitate, inclusiv autentificarea unică.",
+          "toast": {
+            "success_title": "Succes!",
+            "create_success_message": "Furnizorul OIDC a fost creat cu succes.",
+            "update_success_message": "Furnizorul OIDC a fost actualizat cu succes.",
+            "error_title": "Eroare!",
+            "error_message": "Nu s-a putut salva furnizorul OIDC. Vă rugăm să încercați din nou."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Detalii web",
+            "origin_url": {
+              "label": "URL origine",
+              "description": "Vom genera acest lucru pentru această aplicație Plane. Adăugați acest lucru ca origine de încredere în câmpul corespunzător al IdP-ului dvs."
+            },
+            "callback_url": {
+              "label": "URL de redirecționare",
+              "description": "Vom genera acest lucru pentru dvs. Adăugați acest lucru în câmpul URL de redirecționare de conectare al IdP-ului dvs."
+            },
+            "logout_url": {
+              "label": "URL de deconectare",
+              "description": "Vom genera acest lucru pentru dvs. Adăugați acest lucru în câmpul URL de redirecționare de deconectare al IdP-ului dvs."
+            }
+          },
+          "mobile_details": {
+            "header": "Detalii mobile",
+            "origin_url": {
+              "label": "URL origine",
+              "description": "Vom genera acest lucru pentru această aplicație Plane. Adăugați acest lucru ca origine de încredere în câmpul corespunzător al IdP-ului dvs."
+            },
+            "callback_url": {
+              "label": "URL de redirecționare",
+              "description": "Vom genera acest lucru pentru dvs. Adăugați acest lucru în câmpul URL de redirecționare de conectare al IdP-ului dvs."
+            },
+            "logout_url": {
+              "label": "URL de deconectare",
+              "description": "Vom genera acest lucru pentru dvs. Adăugați acest lucru în câmpul URL de redirecționare de deconectare al IdP-ului dvs."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "Email",
+        "placeholder": "nume@companie.ro",
+        "errors": {
+          "required": "Email-ul este obligatoriu",
+          "invalid": "Email-ul nu este valid"
+        }
+      },
+      "password": {
+        "label": "Parolă",
+        "set_password": "Setează o parolă",
+        "placeholder": "Introdu parola",
+        "confirm_password": {
+          "label": "Confirmă parola",
+          "placeholder": "Confirmă parola"
+        },
+        "current_password": {
+          "label": "Parola curentă"
+        },
+        "new_password": {
+          "label": "Parolă nouă",
+          "placeholder": "Introdu parola nouă"
+        },
+        "change_password": {
+          "label": {
+            "default": "Schimbă parola",
+            "submitting": "Se schimbă parola"
+          }
+        },
+        "errors": {
+          "match": "Parolele nu se potrivesc",
+          "empty": "Te rugăm să introduci parola",
+          "length": "Parola trebuie să aibă mai mult de 8 caractere",
+          "strength": {
+            "weak": "Parola este slabă",
+            "strong": "Parola este puternică"
+          }
+        },
+        "submit": "Setează parola",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Succes!",
+              "message": "Parola a fost schimbată cu succes."
+            },
+            "error": {
+              "title": "Eroare!",
+              "message": "Ceva nu a funcționat. Te rugăm să încerci din nou."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Cod unic",
+        "placeholder": "exemplu-cod-unic",
+        "paste_code": "Introdu codul trimis pe email",
+        "requesting_new_code": "Se solicită un cod nou",
+        "sending_code": "Se trimite codul"
+      },
+      "already_have_an_account": "Ai deja un cont?",
+      "login": "Autentificare",
+      "create_account": "Creează un cont",
+      "new_to_plane": "Ești nou în Plane?",
+      "back_to_sign_in": "Înapoi la autentificare",
+      "resend_in": "Retrimite în {seconds} secunde",
+      "sign_in_with_unique_code": "Autentificare cu cod unic",
+      "forgot_password": "Ți-ai uitat parola?",
+      "username": {
+        "label": "Nume de utilizator",
+        "placeholder": "Introduceți numele de utilizator"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Creează un cont pentru a începe să-ți gestionezi activitatea împreună cu echipa ta.",
+        "step": {
+          "email": {
+            "header": "Înregistrare",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Înregistrare",
+            "sub_header": "Înregistrează-te folosind o combinație email-parolă."
+          },
+          "unique_code": {
+            "header": "Înregistrare",
+            "sub_header": "Înregistrează-te folosind un cod unic trimis pe adresa de email de mai sus."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Setează o parolă puternică pentru a continua"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Autentifică-te pentru a începe să-ți gestionezi activitatea împreună cu echipa ta.",
+        "step": {
+          "email": {
+            "header": "Autentificare sau înregistrare",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Autentificare sau înregistrare",
+            "sub_header": "Folosește combinația email-parolă pentru a te autentifica."
+          },
+          "unique_code": {
+            "header": "Autentificare sau înregistrare",
+            "sub_header": "Autentifică-te folosind un cod unic trimis pe adresa de email de mai sus."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Resetează-ți parola",
+      "description": "Introdu adresa de email verificată a contului tău și îți vom trimite un link pentru resetarea parolei.",
+      "email_sent": "Am trimis link-ul de resetare pe adresa ta de email",
+      "send_reset_link": "Trimite link-ul de resetare",
+      "errors": {
+        "smtp_not_enabled": "Se pare că administratorul nu a activat SMTP, nu putem trimite link-ul de resetare a parolei"
+      },
+      "toast": {
+        "success": {
+          "title": "Email trimis",
+          "message": "Verifică-ți căsuța de mesaje pentru link-ul de resetare a parolei. Dacă nu apare în câteva minute, verifică folderul de spam."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Ceva nu a funcționat. Te rugăm să încerci din nou."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Setează o parolă nouă",
+      "description": "Protejează-ți contul cu o parolă puternică"
+    },
+    "set_password": {
+      "title": "Protejează-ți contul",
+      "description": "Setarea parolei te ajută să te autentifici în siguranță"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Eroare!",
+          "message": "Deconectarea a eșuat. Te rugăm să încerci din nou."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Continuați cu {ldapProviderName}",
+        "sub_header": "Introduceți datele de autentificare {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/automation.json b/packages/i18n/src/locales/ro/automation.json
new file mode 100644
index 0000000..509bbb1
--- /dev/null
+++ b/packages/i18n/src/locales/ro/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Automatizări personalizate",
+      "create_automation": "Creează automatizare"
+    },
+    "scope": {
+      "label": "Domeniu",
+      "run_on": "Rulează pe"
+    },
+    "trigger": {
+      "label": "Declanșator",
+      "add_trigger": "Adaugă declanșator",
+      "sidebar_header": "Configurarea declanșatorului",
+      "input_label": "Care este declanșatorul pentru această automatizare?",
+      "input_placeholder": "Selectează o opțiune",
+      "section_plane_events": "Evenimente Plane",
+      "section_time_based": "Bazat pe timp",
+      "fixed_schedule": "Program fix",
+      "schedule": {
+        "frequency": "Frecvență",
+        "select_day": "Selectează ziua",
+        "day_of_month": "Ziua din lună",
+        "monthly_every": "În fiecare",
+        "monthly_day_aria": "Ziua {day}",
+        "time": "Oră",
+        "hour": "Oră",
+        "minute": "Minut",
+        "hour_suffix": "h",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Fus orar",
+        "timezone_placeholder": "Selectează un fus orar",
+        "frequency_daily": "Zilnic",
+        "frequency_weekly": "Săptămânal",
+        "frequency_monthly": "Lunar",
+        "on": "Pe",
+        "validation_weekly_day_required": "Selectează cel puțin o zi a săptămânii.",
+        "validation_monthly_date_required": "Selectează o zi din lună.",
+        "main_content_schedule_summary_daily": "În fiecare zi la {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "În fiecare săptămână pe {days} la {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "În fiecare lună în ziua {day} la {time} ({timezone}).",
+        "schedule_mode": "Mod de planificare",
+        "schedule_mode_fixed": "Fix",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Introduceți expresia Cron",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Expresie cron invalidă.",
+        "cron_preview": "Această expresie Cron execută \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Înapoi",
+        "next": "Adaugă acțiune"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Nu poți schimba tipul declanșatorului după ce a fost creat"
+      }
+    },
+    "condition": {
+      "label": "Condiție",
+      "add_condition": "Adaugă condiție",
+      "adding_condition": "Se adaugă condiția"
+    },
+    "action": {
+      "label": "Acțiune",
+      "add_action": "Adaugă acțiune",
+      "sidebar_header": "Acțiuni",
+      "input_label": "Ce face automatizarea?",
+      "input_placeholder": "Selectează o opțiune",
+      "handler_name": {
+        "add_comment": "Adaugă comentariu",
+        "change_property": "Schimbă proprietatea",
+        "run_script": "Rulează script"
+      },
+      "configuration": {
+        "label": "Configurare",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Selectează o proprietate",
+            "change_type": "Selectează",
+            "property_value_select": "{count, plural, one{Selectează valoarea} other{Selectează valorile}}",
+            "property_value_select_date": "Selectează data"
+          },
+          "validation": {
+            "property_name_required": "Numele proprietății este obligatoriu",
+            "change_type_required": "Tipul de schimbare este obligatoriu",
+            "property_value_required": "Valoarea proprietății este obligatorie"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Adaugă comentariu"
+      },
+      "run_script_block": {
+        "title": "Rulează script"
+      },
+      "change_property_block": {
+        "title": "Schimbă proprietatea"
+      },
+      "validation": {
+        "delete_only_action": "Dezactivează automatizarea înainte de a-i șterge singura acțiune."
+      }
+    },
+    "conjunctions": {
+      "and": "Și",
+      "or": "Sau",
+      "if": "Dacă",
+      "then": "Atunci"
+    },
+    "enable": {
+      "alert": "Apasă 'Activează' când automatizarea ta este completă. Odată activată, automatizarea va fi gata să ruleze.",
+      "validation": {
+        "required": "Automatizarea trebuie să aibă un declanșator și cel puțin o acțiune pentru a fi activată."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Automatizarea trebuie dezactivată înainte de a fi ștearsă."
+      }
+    },
+    "table": {
+      "title": "Titlul automatizării",
+      "scope": "Domeniu",
+      "projects": "Proiecte",
+      "last_run_on": "Ultima rulare pe",
+      "created_on": "Creată pe",
+      "last_updated_on": "Ultima actualizare pe",
+      "last_run_status": "Statusul ultimei rulări",
+      "average_duration": "Durata medie",
+      "owner": "Proprietar",
+      "executions": "Execuții"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Creează automatizare",
+        "update": "Actualizează automatizarea"
+      },
+      "title": {
+        "placeholder": "Denumește automatizarea ta.",
+        "required_error": "Titlul este obligatoriu"
+      },
+      "description": {
+        "placeholder": "Descrie automatizarea ta."
+      },
+      "submit_button": {
+        "create": "Creează automatizare",
+        "update": "Actualizează automatizarea"
+      }
+    },
+    "delete_modal": {
+      "heading": "Șterge automatizarea"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Arată eșecurile",
+        "all": "Toate",
+        "only_activity": "Doar activitatea",
+        "only_run_history": "Doar istoricul rulărilor"
+      },
+      "run_history": {
+        "initiator": "Inițiator"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Succes!",
+          "message": "Automatizarea a fost creată cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Crearea automatizării a eșuat."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Succes!",
+          "message": "Automatizarea a fost actualizată cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Actualizarea automatizării a eșuat."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Succes!",
+          "message": "Automatizarea a fost activată cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Activarea automatizării a eșuat."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Succes!",
+          "message": "Automatizarea a fost dezactivată cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Dezactivarea automatizării a eșuat."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automatizare ștearsă",
+          "message": "{name}, automatizarea, a fost ștearsă din proiectul tău."
+        },
+        "error": {
+          "title": "Nu am putut șterge această automatizare de data aceasta.",
+          "message": "Încearcă să o ștergi din nou sau revino mai târziu. Dacă nu poți să o ștergi nici atunci, contactează-ne."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Eroare!",
+            "message": "Nu s-a putut crea acțiunea. Te rog încearcă din nou!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Eroare!",
+            "message": "Nu s-a putut actualiza acțiunea. Te rog încearcă din nou!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Încă nu există automatizări de afișat.",
+        "description": "Automatizările te ajută să elimini sarcinile repetitive prin stabilirea de declanșatori, condiții și acțiuni. Creează una pentru a economisi timp și a menține munca în mișcare fără efort."
+      },
+      "upgrade": {
+        "title": "Automatizări",
+        "description": "Automatizările sunt o modalitate de a automatiza sarcinile din proiectul tău.",
+        "sub_description": "Recuperează 80% din timpul tău administrativ când folosești Automatizările."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Selectează proiectele pe care să ruleze această automatizare",
+        "all_projects": {
+          "label": "Toate proiectele",
+          "description": "Automatizarea va rula pentru toate proiectele din spațiul de lucru."
+        },
+        "select_projects": {
+          "label": "Selectează proiectele",
+          "description": "Automatizarea va rula pentru proiectele selectate din spațiul de lucru.",
+          "placeholder": "Selectează proiectele"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automatizări",
+        "title": "Automatizări",
+        "description": "Standardizează procesele din întregul spațiu de lucru cu automatizări globale."
+      },
+      "table": {
+        "scope": {
+          "global": "Global",
+          "project": {
+            "label": "Proiect",
+            "multiple": "Multiple",
+            "all": "Toate"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/common.json b/packages/i18n/src/locales/ro/common.json
new file mode 100644
index 0000000..e2b44ce
--- /dev/null
+++ b/packages/i18n/src/locales/ro/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Lucrăm la asta. Dacă aveți nevoie de asistență imediată,",
+    "reach_out_to_us": "contactați-ne",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Altfel, încercați să reîmprospătați pagina din când în când sau vizitați",
+    "status_page": "pagina noastră de stare"
+  },
+  "submit": "Trimite",
+  "cancel": "Anulează",
+  "loading": "Se încarcă",
+  "error": "Eroare",
+  "success": "Succes",
+  "warning": "Avertisment",
+  "info": "Informații",
+  "close": "Închide",
+  "yes": "Da",
+  "no": "Nu",
+  "ok": "OK",
+  "name": "Nume",
+  "unknown_user": "Utilizator necunoscut",
+  "description": "Descriere",
+  "search": "Caută",
+  "add_member": "Adaugă membru",
+  "adding_members": "Se adaugă membri",
+  "remove_member": "Elimină membru",
+  "add_members": "Adaugă membri",
+  "adding_member": "Se adaugă membru",
+  "remove_members": "Elimină membri",
+  "add": "Adaugă",
+  "adding": "Se adaugă",
+  "remove": "Elimină",
+  "add_new": "Adaugă nou",
+  "remove_selected": "Elimină selecția",
+  "first_name": "Prenume",
+  "last_name": "Nume de familie",
+  "email": "Email",
+  "display_name": "Nume afișat",
+  "role": "Rol",
+  "timezone": "Fus orar",
+  "avatar": "Imagine de profil",
+  "cover_image": "Copertă",
+  "password": "Parolă",
+  "change_cover": "Schimbă coperta",
+  "language": "Limbă",
+  "saving": "Se salvează",
+  "save_changes": "Salvează modificările",
+  "deactivate_account": "Dezactivează contul",
+  "deactivate_account_description": "Când dezactivezi un cont, toate datele și activitățile din acel cont vor fi șterse permanent și nu pot fi recuperate.",
+  "profile_settings": "Setări profil",
+  "your_account": "Contul tău",
+  "security": "Securitate",
+  "activity": "Activitate",
+  "activity_empty_state": {
+    "no_activity": "Nicio activitate încă",
+    "no_transitions": "Nicio tranziție încă",
+    "no_comments": "Niciun comentariu încă",
+    "no_worklogs": "Niciun jurnal de lucru încă",
+    "no_history": "Niciun istoric încă"
+  },
+  "preferences": "Preferințe",
+  "language_and_time": "Limbă și oră",
+  "notifications": "Notificări",
+  "workspaces": "Spații de lucru",
+  "create_workspace": "Creează spațiu de lucru",
+  "invitations": "Invitații",
+  "summary": "Rezumat",
+  "assigned": "Responsabil",
+  "created": "Creat",
+  "subscribed": "Abonat",
+  "you_do_not_have_the_permission_to_access_this_page": "Nu ai permisiunea de a accesa această pagină.",
+  "something_went_wrong_please_try_again": "Ceva nu a funcționat. Te rugăm să încerci din nou.",
+  "load_more": "Încarcă mai mult",
+  "select_or_customize_your_interface_color_scheme": "Selectați sau personalizați schema de culori a interfeței dvs.",
+  "timezone_setting": "Setarea actuală a fusului orar.",
+  "language_setting": "Alege limba folosită în interfața utilizatorului.",
+  "settings_moved_to_preferences": "Setările pentru fus orar și limbă au fost mutate în preferințe.",
+  "go_to_preferences": "Mergi la preferințe",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Selectați stilul de mișcare al cursorului care vi se potrivește.",
+  "theme": "Temă",
+  "smooth_cursor": "Cursor lin",
+  "system_preference": "Preferință sistem",
+  "light": "Luminos",
+  "dark": "Întunecat",
+  "light_contrast": "Luminos - contrast ridicat",
+  "dark_contrast": "Întunecat - contrast ridicat",
+  "custom": "Temă personalizată",
+  "select_your_theme": "Selectează tema",
+  "customize_your_theme": "Personalizează tema",
+  "background_color": "Culoare fundal",
+  "text_color": "Culoare text",
+  "primary_color": "Culoare principală (temă)",
+  "sidebar_background_color": "Culoare fundal bară laterală",
+  "sidebar_text_color": "Culoare text bară laterală",
+  "set_theme": "Setează tema",
+  "enter_a_valid_hex_code_of_6_characters": "Introdu un cod hexadecimal valid de 6 caractere",
+  "background_color_is_required": "Culoarea de fundal este obligatorie",
+  "text_color_is_required": "Culoarea textului este obligatorie",
+  "primary_color_is_required": "Culoarea principală este obligatorie",
+  "sidebar_background_color_is_required": "Culoarea de fundal a barei laterale este obligatorie",
+  "sidebar_text_color_is_required": "Culoarea textului din bara laterală este obligatorie",
+  "updating_theme": "Se actualizează tema",
+  "theme_updated_successfully": "Tema a fost actualizată cu succes",
+  "failed_to_update_the_theme": "Eroare la actualizarea temei",
+  "email_notifications": "Notificări prin email",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Rămâi la curent cu activitățile la care ești abonat. Activează această opțiune pentru a primi notificări.",
+  "email_notification_setting_updated_successfully": "Setarea notificărilor prin email a fost actualizată cu succes",
+  "failed_to_update_email_notification_setting": "Eroare la actualizarea setării notificărilor prin email",
+  "notify_me_when": "Notifică-mă când",
+  "property_changes": "Se modifică proprietățile",
+  "property_changes_description": "Notifică-mă când proprietăți precum responsabilii, prioritatea, estimările sau altele se modifică.",
+  "state_change": "Se schimbă starea",
+  "state_change_description": "Notifică-mă când activitățile trec într-o stare diferită",
+  "issue_completed": "Activitate finalizată",
+  "issue_completed_description": "Notifică-mă doar când o activitate este finalizată",
+  "comments": "Comentarii",
+  "comments_description": "Notifică-mă când cineva lasă un comentariu la o activitate",
+  "mentions": "Mențiuni",
+  "mentions_description": "Notifică-mă doar când cineva mă menționează în comentarii sau descriere",
+  "old_password": "Parolă veche",
+  "general_settings": "Setări generale",
+  "sign_out": "Deconectează-te",
+  "signing_out": "Se deconectează",
+  "active_cycles": "Cicluri active",
+  "active_cycles_description": "Monitorizează ciclurile din proiecte, urmărește activitățile prioritare și focalizează-te pe ciclurile care necesită atenție.",
+  "on_demand_snapshots_of_all_your_cycles": "Instantanee la cerere ale tuturor ciclurilor tale",
+  "upgrade": "Treci la o versiune superioră",
+  "10000_feet_view": "Vedere de ansamblu asupra tuturor ciclurilor active.",
+  "10000_feet_view_description": "Vezi în ansamblu și simultan toate ciclurile active din proiectele tale, fără a naviga individual la fiecare ciclu.",
+  "get_snapshot_of_each_active_cycle": "Obține un instantaneu al fiecărui ciclu activ.",
+  "get_snapshot_of_each_active_cycle_description": "Urmărește statisticile generale pentru toate ciclurile active, vezi progresul și estimează volumul de muncă în raport cu termenele limită.",
+  "compare_burndowns": "Compară graficele de finalizare a activităților ",
+  "compare_burndowns_description": "Monitorizează performanța echipelor tale, analizând graficul de finalizare a activităților ale fiecărui ciclu.",
+  "quickly_see_make_or_break_issues": "Vezi rapid activitățile critice.",
+  "quickly_see_make_or_break_issues_description": "Previzualizează activitățile prioritare pentru fiecare ciclu în funcție de termene. Vizualizează-le pe toate dintr-un singur click.",
+  "zoom_into_cycles_that_need_attention": "Concentrează-te pe ciclurile care necesită atenție.",
+  "zoom_into_cycles_that_need_attention_description": "Analizează starea oricărui ciclu care nu corespunde așteptărilor, dintr-un singur click.",
+  "stay_ahead_of_blockers": "Anticipează blocajele.",
+  "stay_ahead_of_blockers_description": "Identifică provocările între proiecte și vezi dependențele între cicluri care altfel nu sunt evidente.",
+  "analytics": "Statistici",
+  "workspace_invites": "Invitațiile din spațiul de lucru",
+  "enter_god_mode": "Activează modul Dumnezeu",
+  "workspace_logo": "Sigla spațiului de lucru",
+  "new_issue": "Activitate nouă",
+  "your_work": "Munca ta",
+  "drafts": "Schițe",
+  "projects": "Proiecte",
+  "views": "Perspective",
+  "archives": "Arhive",
+  "settings": "Setări",
+  "failed_to_move_favorite": "Nu s-a putut muta favorita",
+  "favorites": "Favorite",
+  "no_favorites_yet": "Nicio favorită încă",
+  "create_folder": "Creează dosar",
+  "new_folder": "Dosar nou",
+  "favorite_updated_successfully": "Favorita a fost actualizată cu succes",
+  "favorite_created_successfully": "Favorita a fost creată cu succes",
+  "folder_already_exists": "Dosarul există deja",
+  "folder_name_cannot_be_empty": "Numele dosarului nu poate fi gol",
+  "something_went_wrong": "Ceva nu a funcționat",
+  "failed_to_reorder_favorite": "Nu s-a putut reordona favorita",
+  "favorite_removed_successfully": "Favorita a fost eliminată cu succes",
+  "failed_to_create_favorite": "Nu s-a putut crea favorita",
+  "failed_to_rename_favorite": "Nu s-a putut redenumi favorita",
+  "project_link_copied_to_clipboard": "Link-ul proiectului a fost copiat în memoria temporară",
+  "link_copied": "Link copiat",
+  "add_project": "Adaugă proiect",
+  "create_project": "Creează proiect",
+  "failed_to_remove_project_from_favorites": "Nu s-a putut elimina proiectul din favorite. Încearcă din nou.",
+  "project_created_successfully": "Proiect creat cu succes",
+  "project_created_successfully_description": "Proiect creat cu succes. Poți începe să adaugi activități în el.",
+  "project_name_already_taken": "Numele proiectului este deja folosit.",
+  "project_name_cannot_contain_special_characters": "Numele proiectului nu poate conține caractere speciale.",
+  "project_identifier_already_taken": "Identificatorul proiectului este deja folosit.",
+  "project_cover_image_alt": "Coperta proiectului",
+  "name_is_required": "Numele este obligatoriu",
+  "title_should_be_less_than_255_characters": "Titlul trebuie să conțină mai puțin de 255 de caractere",
+  "project_name": "Numele proiectului",
+  "project_id_must_be_at_least_1_character": "ID-ul proiectului trebuie să conțină cel puțin 1 caracter",
+  "project_id_must_be_at_most_5_characters": "ID-ul proiectului trebuie să conțină cel mult 5 caractere",
+  "project_id": "ID-ul Proiectului",
+  "project_id_tooltip_content": "Te ajută să identifici unic activitățile din proiect. Maxim 50 caractere.",
+  "description_placeholder": "Descriere",
+  "only_alphanumeric_non_latin_characters_allowed": "Sunt permise doar caractere alfanumerice și non-latine.",
+  "project_id_is_required": "ID-ul proiectului este obligatoriu",
+  "project_id_allowed_char": "Sunt permise doar caractere alfanumerice și non-latine.",
+  "project_id_min_char": "ID-ul proiectului trebuie să aibă cel puțin 1 caracter",
+  "project_id_max_char": "ID-ul proiectului trebuie să aibă cel mult {max} caractere",
+  "project_description_placeholder": "Introdu descrierea proiectului",
+  "select_network": "Selectează rețeaua",
+  "lead": "Lider",
+  "date_range": "Interval de date",
+  "private": "Privat",
+  "public": "Public",
+  "accessible_only_by_invite": "Accesibil doar prin invitație",
+  "anyone_in_the_workspace_except_guests_can_join": "Oricine din spațiul de lucru, cu excepția celor de tip Invitat, se poate alătura",
+  "creating": "Se creează",
+  "creating_project": "Se creează proiectul",
+  "adding_project_to_favorites": "Se adaugă proiectul la favorite",
+  "project_added_to_favorites": "Proiectul a fost adăugat la favorite",
+  "couldnt_add_the_project_to_favorites": "Nu s-a putut adăuga proiectul la favorite. Încearcă din nou.",
+  "removing_project_from_favorites": "Se elimină proiectul din favorite",
+  "project_removed_from_favorites": "Proiectul a fost eliminat din favorite",
+  "couldnt_remove_the_project_from_favorites": "Nu s-a putut elimina proiectul din favorite. Încearcă din nou.",
+  "add_to_favorites": "Adaugă la favorite",
+  "remove_from_favorites": "Elimină din favorite",
+  "publish_project": "Publică proiectul",
+  "publish": "Publică",
+  "copy_link": "Copiază link-ul",
+  "leave_project": "Părăsește proiectul",
+  "join_the_project_to_rearrange": "Alătură-te proiectului pentru a rearanja",
+  "drag_to_rearrange": "Trage pentru a rearanja",
+  "congrats": "Felicitări!",
+  "open_project": "Deschide proiectul",
+  "issues": "Activități",
+  "cycles": "Cicluri",
+  "modules": "Module",
+  "pages": "Documentație",
+  "intake": "Cereri",
+  "renew": "Reînnoiește",
+  "preview": "Previzualizare",
+  "time_tracking": "Monitorizare timp",
+  "work_management": "Gestionare muncă",
+  "projects_and_issues": "Proiecte și activități",
+  "projects_and_issues_description": "Activează sau dezactivează aceste opțiuni pentru proiect.",
+  "cycles_description": "Stabilește perioade de timp pentru fiecare proiect și ajustează-le după cum este necesar. Un ciclu poate dura 2 săptămâni, următorul 1 săptămână.",
+  "modules_description": "Organizează munca în sub-proiecte cu lideri și responsabili dedicați.",
+  "views_description": "Salvează sortările, filtrele și opțiunile de afișare personalizate sau distribuie-le echipei tale.",
+  "pages_description": "Creează și editează conținut liber: note, documente, orice.",
+  "intake_description": "Permite utilizatorilor care nu sunt membri să trimită erori, feedback și sugestii fără a perturba fluxul de lucru.",
+  "time_tracking_description": "Înregistrează timpul petrecut pe activități și proiecte.",
+  "work_management_description": "Gestionează-ți munca și proiectele cu ușurință.",
+  "documentation": "Documentație",
+  "message_support": "Trimite mesaj la suport",
+  "contact_sales": "Contactează vânzările",
+  "hyper_mode": "Mod Hyper",
+  "keyboard_shortcuts": "Scurtături tastatură",
+  "whats_new": "Ce e nou?",
+  "version": "Versiune",
+  "we_are_having_trouble_fetching_the_updates": "Avem probleme în a prelua actualizările.",
+  "our_changelogs": "jurnalele noastre de modificări",
+  "for_the_latest_updates": "pentru cele mai recente actualizări.",
+  "please_visit": "Te rugăm să vizitezi",
+  "docs": "Documentație",
+  "full_changelog": "Jurnal complet al modificărilor",
+  "support": "Suport",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Oferit de Plane Documentație",
+  "please_select_at_least_one_invitation": "Te rugăm să selectezi cel puțin o invitație.",
+  "please_select_at_least_one_invitation_description": "Te rugăm să selectezi cel puțin o invitație pentru a te alătura spațiului de lucru.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Se pare că cineva te-a invitat să te alături unui spațiu de lucru",
+  "join_a_workspace": "Alătură-te unui spațiu de lucru",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Se pare că cineva te-a invitat să te alături unui spațiu de lucru",
+  "join_a_workspace_description": "Alătură-te unui spațiu de lucru",
+  "accept_and_join": "Acceptă și alătură-te",
+  "go_home": "Mergi la început",
+  "no_pending_invites": "Nicio invitație în așteptare",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Aici vei vedea dacă cineva te-a invitat într-un spațiu de lucru",
+  "back_to_home": "Înapoi la început",
+  "workspace_name": "nume-spațiu-de-lucru",
+  "deactivate_your_account": "Dezactivează-ți contul",
+  "deactivate_your_account_description": "Odată dezactivat, nu vei mai putea primi activități sau fi taxat pentru spațiul tău de lucru. Pentru a-ți reactiva contul, vei avea nevoie de o invitație către un spațiu de lucru la această adresă de email.",
+  "deactivating": "Se dezactivează",
+  "confirm": "Confirmă",
+  "confirming": "Se confirmă",
+  "draft_created": "Schiță creată",
+  "issue_created_successfully": "Activitate creată cu succes",
+  "draft_creation_failed": "Crearea schiței a eșuat",
+  "issue_creation_failed": "Crearea activității a eșuat",
+  "draft_issue": "Schiță activitate",
+  "issue_updated_successfully": "Activitate actualizată cu succes",
+  "issue_could_not_be_updated": "Activitatea nu a putut fi actualizată",
+  "create_a_draft": "Creează o schiță",
+  "save_to_drafts": "Salvează în schițe",
+  "save": "Salvează",
+  "update": "Actualizează",
+  "updating": "Se actualizează",
+  "create_new_issue": "Creează activate nouă",
+  "editor_is_not_ready_to_discard_changes": "Editorul nu este pregătit să renunțe la modificări",
+  "failed_to_move_issue_to_project": "Nu s-a putut muta activitatea în proiect",
+  "create_more": "Creează mai multe",
+  "add_to_project": "Adaugă la proiect",
+  "discard": "Renunță",
+  "duplicate_issue_found": "Activitate duplicată găsită",
+  "duplicate_issues_found": "Activități duplicate găsite",
+  "no_matching_results": "Nu există rezultate potrivite",
+  "title_is_required": "Titlul este obligatoriu",
+  "title": "Titlu",
+  "state": "Stare",
+  "transition": "Tranziție",
+  "history": "Istoric",
+  "priority": "Prioritate",
+  "none": "Niciuna",
+  "urgent": "Urgentă",
+  "high": "Importantă",
+  "medium": "Medie",
+  "low": "Scăzută",
+  "members": "Membri",
+  "assignee": "Responsabil",
+  "assignees": "Responsabili",
+  "subscriber": "{count, plural, one{# Abonat} few{# Abonați} other{# Abonați}}",
+  "you": "Tu",
+  "labels": "Etichete",
+  "create_new_label": "Creează etichetă nouă",
+  "label_name": "Nume etichetă",
+  "failed_to_create_label": "Nu s-a putut crea eticheta. Vă rugăm să încercați din nou.",
+  "start_date": "Data de început",
+  "end_date": "Data de sfârșit",
+  "due_date": "Data limită",
+  "target_date": "Data țintă",
+  "estimate": "Estimare",
+  "change_parent_issue": "Schimbă activitatea părinte",
+  "remove_parent_issue": "Elimină activitatea părinte",
+  "add_parent": "Adaugă părinte",
+  "loading_members": "Se încarcă membrii",
+  "view_link_copied_to_clipboard": "Link-ul de perspectivă a fost copiat în memoria temporară.",
+  "required": "Obligatoriu",
+  "optional": "Opțional",
+  "Cancel": "Anulează",
+  "edit": "Editează",
+  "archive": "Arhivează",
+  "restore": "Restaurează",
+  "open_in_new_tab": "Deschide într-un nou tab",
+  "delete": "Șterge",
+  "deleting": "Se șterge",
+  "make_a_copy": "Creează o copie",
+  "move_to_project": "Mută în proiect",
+  "good": "Bună",
+  "morning": "dimineața",
+  "afternoon": "după-amiaza",
+  "evening": "seara",
+  "show_all": "Arată tot",
+  "show_less": "Arată mai puțin",
+  "no_data_yet": "Nicio dată încă",
+  "syncing": "Se sincronizează",
+  "add_work_item": "Adaugă activitate",
+  "advanced_description_placeholder": "Apasă '/' pentru comenzi",
+  "create_work_item": "Creează activitate",
+  "attachments": "Atașamente",
+  "declining": "Se refuză",
+  "declined": "Refuzat",
+  "decline": "Refuză",
+  "unassigned": "Fără responsabil",
+  "work_items": "Activități",
+  "add_link": "Adaugă link",
+  "points": "Puncte",
+  "no_assignee": "Fără responsabil",
+  "no_assignees_yet": "Niciun responsabil încă",
+  "no_labels_yet": "Nicio etichetă încă",
+  "ideal": "Ideal",
+  "current": "Curent",
+  "no_matching_members": "Niciun membru potrivit",
+  "leaving": "Se părăsește",
+  "removing": "Se elimină",
+  "leave": "Părăsește",
+  "refresh": "Reîncarcă",
+  "refreshing": "Se reîncarcă",
+  "refresh_status": "Reîncarcă statusul",
+  "prev": "Înapoi",
+  "next": "Înainte",
+  "re_generating": "Se regenerează",
+  "re_generate": "Regenerează",
+  "re_generate_key": "Regenerează cheia",
+  "export": "Exportă",
+  "member": "{count, plural, one{# membru} other{# membri}}",
+  "new_password_must_be_different_from_old_password": "Parola nouă trebuie să fie diferită de parola veche",
+  "edited": "editat",
+  "bot": "Bot",
+  "settings_description": "Gestionează preferințele contului, spațiului de lucru și proiectelor tale într-un singur loc. Comută între file pentru a configura cu ușurință.",
+  "back_to_workspace": "Înapoi la spațiul de lucru",
+  "upgrade_request": "Solicitați administratorului spațiului de lucru să facă upgrade.",
+  "copied_to_clipboard": "Copiat în clipboard",
+  "copied_to_clipboard_description": "URL-ul a fost copiat cu succes în clipboard",
+  "toast": {
+    "success": "Succes!",
+    "error": "Eroare!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Link creat",
+        "message": "Link-ul a fost creat cu succes"
+      },
+      "not_created": {
+        "title": "Link-ul nu a fost creat",
+        "message": "Link-ul nu a putut fi creat"
+      },
+      "updated": {
+        "title": "Link actualizat",
+        "message": "Link-ul a fost actualizat cu succes"
+      },
+      "not_updated": {
+        "title": "Link-ul nu a fost actualizat",
+        "message": "Link-ul nu a putut fi actualizat"
+      },
+      "removed": {
+        "title": "Link eliminat",
+        "message": "Link-ul a fost eliminat cu succes"
+      },
+      "not_removed": {
+        "title": "Link-ul nu a fost eliminat",
+        "message": "Link-ul nu a putut fi eliminat"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL-ul nu este valid",
+        "placeholder": "Tastează sau lipește un URL"
+      },
+      "title": {
+        "text": "Titlu afișat",
+        "placeholder": "Cum vrei să se vadă acest link"
+      }
+    }
+  },
+  "common": {
+    "all": "Toate",
+    "no_items_in_this_group": "Nu există elemente în acest grup",
+    "drop_here_to_move": "Eliberează aici pentru a muta",
+    "states": "Stări",
+    "state": "Stare",
+    "state_groups": "Grupuri de stări",
+    "state_group": "Grup de stare",
+    "priorities": "Priorități",
+    "priority": "Prioritate",
+    "team_project": "Proiect de echipă",
+    "project": "Proiect",
+    "cycle": "Ciclu",
+    "cycles": "Cicluri",
+    "module": "Modul",
+    "modules": "Module",
+    "labels": "Etichete",
+    "label": "Etichetă",
+    "admins": "Administratori",
+    "users": "Utilizatori",
+    "guests": "Invitați",
+    "assignees": "Responsabili",
+    "assignee": "Responsabil",
+    "created_by": "Creat de",
+    "none": "Niciuna",
+    "link": "Link",
+    "estimates": "Estimări",
+    "estimate": "Estimare",
+    "created_at": "Creat la",
+    "updated_at": "Actualizat la",
+    "completed_at": "Finalizat la",
+    "layout": "Aspect",
+    "filters": "Filtre",
+    "display": "Afișare",
+    "load_more": "Încarcă mai mult",
+    "activity": "Activitate",
+    "analytics": "Analitice",
+    "dates": "Date",
+    "success": "Succes!",
+    "something_went_wrong": "Ceva a mers greșit",
+    "error": {
+      "label": "Eroare!",
+      "message": "A apărut o eroare. Te rugăm să încerci din nou."
+    },
+    "group_by": "Grupează după",
+    "epic": "Sarcină majoră",
+    "epics": "Epice",
+    "work_item": "Activitate",
+    "work_items": "Activități",
+    "sub_work_item": "Sub-activitate",
+    "views": "Perspective",
+    "pages": "Documentație",
+    "add": "Adaugă",
+    "warning": "Avertisment",
+    "updating": "Se actualizează",
+    "adding": "Se adaugă",
+    "update": "Actualizează",
+    "creating": "Se creează",
+    "create": "Creează",
+    "cancel": "Anulează",
+    "description": "Descriere",
+    "title": "Titlu",
+    "attachment": "Atașament",
+    "general": "General",
+    "features": "Funcționalități",
+    "automation": "Automatizare",
+    "project_name": "Nume proiect",
+    "project_id": "ID Proiect",
+    "project_timezone": "Fus orar proiect",
+    "created_on": "Creat la",
+    "updated_on": "Actualizat la",
+    "completed_on": "Completed on",
+    "update_project": "Actualizează proiectul",
+    "identifier_already_exists": "Identificatorul există deja",
+    "add_more": "Adaugă mai mult",
+    "defaults": "Implicit",
+    "add_label": "Adaugă etichetă",
+    "customize_time_range": "Personalizează intervalul de timp",
+    "loading": "Se încarcă",
+    "attachments": "Atașamente",
+    "property": "Proprietate",
+    "properties": "Proprietăți",
+    "parent": "Părinte",
+    "page": "Document",
+    "remove": "Elimină",
+    "archiving": "Se arhivează",
+    "archive": "Arhivează",
+    "access": {
+      "public": "Public",
+      "private": "Privat"
+    },
+    "done": "Gata",
+    "sub_work_items": "Sub-activități",
+    "comment": "Comentariu",
+    "workspace_level": "La nivel de spațiu de lucru",
+    "order_by": {
+      "label": "Ordonează după",
+      "manual": "Manual - Rang",
+      "last_created": "Ultima creată",
+      "last_updated": "Ultima actualizată",
+      "start_date": "Data de început",
+      "due_date": "Data limită",
+      "asc": "Crescător",
+      "desc": "Descrescător",
+      "updated_on": "Actualizat la"
+    },
+    "sort": {
+      "asc": "Crescător",
+      "desc": "Descrescător",
+      "created_on": "Creată la",
+      "updated_on": "Actualizată la"
+    },
+    "comments": "Comentarii",
+    "updates": "Actualizări",
+    "additional_updates": "Actualizări suplimentare",
+    "clear_all": "Șterge tot",
+    "copied": "Copiat!",
+    "link_copied": "Link copiat!",
+    "link_copied_to_clipboard": "Link-ul a fost copiat în memoria temporară",
+    "copied_to_clipboard": "Link-ul activității copiat în memoria temporară",
+    "branch_name_copied_to_clipboard": "Nume de ramură copiat în memoria temporară",
+    "is_copied_to_clipboard": "Activitatea a fost copiată în memoria temporară",
+    "no_links_added_yet": "Niciun link adăugat încă",
+    "add_link": "Adaugă link",
+    "links": "Linkuri",
+    "go_to_workspace": "Mergi la spațiul de lucru",
+    "progress": "Progres",
+    "optional": "Opțional",
+    "join": "Alătură-te",
+    "go_back": "Înapoi",
+    "continue": "Continuă",
+    "resend": "Retrimite",
+    "relations": "Relații",
+    "dependencies": "Dependențe",
+    "errors": {
+      "default": {
+        "title": "Eroare!",
+        "message": "Ceva a funcționat greșit. Te rugăm să încerci din nou."
+      },
+      "required": "Acest câmp este obligatoriu",
+      "entity_required": "{entity} este obligatoriu",
+      "restricted_entity": "{entity} este restricționat"
+    },
+    "update_link": "Actualizează link-ul",
+    "attach": "Atașează",
+    "create_new": "Creează nou",
+    "add_existing": "Adaugă existent",
+    "type_or_paste_a_url": "Tastează sau lipește un URL",
+    "url_is_invalid": "URL-ul nu este valid",
+    "display_title": "Titlu afișat",
+    "link_title_placeholder": "Cum vrei să se vadă acest link",
+    "url": "URL",
+    "side_peek": "Previzualizare laterală",
+    "modal": "Fereastră modală",
+    "full_screen": "Ecran complet",
+    "close_peek_view": "Închide previzualizarea",
+    "toggle_peek_view_layout": "Comută aspectul previzualizării",
+    "options": "Opțiuni",
+    "duration": "Durată",
+    "today": "Astăzi",
+    "week": "Săptămână",
+    "month": "Lună",
+    "quarter": "Trimestru",
+    "press_for_commands": "Apasă '/' pentru comenzi",
+    "click_to_add_description": "Apasă pentru a adăuga descriere",
+    "on_track": "Pe drumul cel bun",
+    "off_track": "În afara traiectoriei",
+    "at_risk": "În pericol",
+    "timeline": "Cronologie",
+    "completion": "Finalizare",
+    "upcoming": "Viitor",
+    "completed": "Finalizat",
+    "in_progress": "În desfășurare",
+    "planned": "Planificat",
+    "paused": "Pauzat",
+    "search": {
+      "label": "Caută",
+      "placeholder": "Tastează pentru a căuta",
+      "no_matches_found": "Nu s-au găsit rezultate",
+      "no_matching_results": "Nicio potrivire găsită",
+      "min_chars": "Tastează cel puțin {count} caractere pentru a căuta",
+      "error": "Eroare la preluarea rezultatelor căutării",
+      "no_results": {
+        "title": "Nicio potrivire găsită",
+        "description": "Elimină criteriile de căutare pentru a vedea toate rezultatele"
+      }
+    },
+    "actions": {
+      "edit": "Editează",
+      "make_a_copy": "Fă o copie",
+      "open_in_new_tab": "Deschide într-un nou tab",
+      "copy_link": "Copiază link-ul",
+      "copy_branch_name": "Copiază numele ramurii",
+      "archive": "Arhivează",
+      "restore": "Restaurează",
+      "delete": "Șterge",
+      "remove_relation": "Elimină relația",
+      "subscribe": "Abonează-te",
+      "unsubscribe": "Dezabonează-te",
+      "clear_sorting": "Șterge sortarea",
+      "show_weekends": "Arată sfârșiturile de săptămână",
+      "enable": "Activează",
+      "disable": "Dezactivează",
+      "copy_markdown": "Copiază markdown",
+      "reply": "Răspunde"
+    },
+    "name": "Nume",
+    "discard": "Renunță",
+    "confirm": "Confirmă",
+    "confirming": "Se confirmă",
+    "read_the_docs": "Citește documentația",
+    "default": "Implicit",
+    "active": "Activ",
+    "enabled": "Activat",
+    "disabled": "Dezactivat",
+    "mandate": "Împuternicire",
+    "mandatory": "Obligatoriu",
+    "global": "Global",
+    "yes": "Da",
+    "no": "Nu",
+    "please_wait": "Te rog așteaptă",
+    "enabling": "Se activează",
+    "disabling": "Se dezactivează",
+    "beta": "Testare",
+    "or": "sau",
+    "next": "Înainte",
+    "back": "Înapoi",
+    "retry": "Reîncearcă",
+    "cancelling": "Se anulează",
+    "configuring": "Se configurează",
+    "clear": "Șterge",
+    "import": "Importă",
+    "connect": "Conectează",
+    "authorizing": "Se autorizează",
+    "processing": "Se procesează",
+    "no_data_available": "Nicio dată disponibilă",
+    "from": "de la {name}",
+    "authenticated": "Autentificat",
+    "select": "Selectează",
+    "upgrade": "Treci la o versiune superioră",
+    "add_seats": "Adaugă locuri",
+    "projects": "Proiecte",
+    "workspace": "Spațiu de lucru",
+    "workspaces": "Spații de lucru",
+    "team": "Echipă",
+    "teams": "Echipe",
+    "entity": "Entitate",
+    "entities": "Entități",
+    "task": "Sarcină",
+    "tasks": "Sarcini",
+    "section": "Secțiune",
+    "sections": "Secțiuni",
+    "edit": "Editează",
+    "connecting": "Se conectează",
+    "connected": "Conectat",
+    "disconnect": "Deconectează",
+    "disconnecting": "Se deconectează",
+    "installing": "Se instalează",
+    "install": "Instalează",
+    "reset": "Resetează",
+    "live": "Live",
+    "change_history": "Istoric modificări",
+    "coming_soon": "În curând",
+    "member": "Membru",
+    "members": "Membri",
+    "you": "Tu",
+    "upgrade_cta": {
+      "higher_subscription": "Treci la un abonament superior",
+      "talk_to_sales": "Discută cu vânzările"
+    },
+    "category": "Categorie",
+    "categories": "Categorii",
+    "saving": "Se salvează",
+    "save_changes": "Salvează modificările",
+    "delete": "Șterge",
+    "deleting": "Se șterge",
+    "pending": "În așteptare",
+    "invite": "Invită",
+    "view": "Vizualizează",
+    "deactivated_user": "Utilizator dezactivat",
+    "apply": "Aplică",
+    "applying": "Aplicând",
+    "overview": "Prezentare generală",
+    "no_of": "Nr. de {entity}",
+    "resolved": "Rezolvat",
+    "get_started": "Începe",
+    "worklogs": "Jurnale de lucru",
+    "project_updates": "Actualizări proiect",
+    "workflows": "Fluxuri de lucru",
+    "templates": "Șabloane",
+    "business": "Business",
+    "members_and_teamspaces": "Membri și spații de echipă",
+    "recurring_work_items": "Elemente de lucru repetitive",
+    "milestones": "Jaloane",
+    "open_in_full_screen": "Deschide {page} pe tot ecranul",
+    "details": "Detalii",
+    "project_structure": "Structura proiectului",
+    "custom_properties": "Proprietăți personalizate",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "axa-X",
+    "y_axis": "axa-Y",
+    "metric": "Indicator"
+  },
+  "form": {
+    "title": {
+      "required": "Titlul este obligatoriu",
+      "max_length": "Titlul trebuie să conțină mai puțin de {length} caractere"
+    }
+  },
+  "entity": {
+    "grouping_title": "Grupare {entity}",
+    "priority": "Prioritate {entity}",
+    "all": "Toate {entity}",
+    "drop_here_to_move": "Trage aici pentru a muta {entity}",
+    "delete": {
+      "label": "Șterge {entity}",
+      "success": "{entity} a fost ștearsă cu succes",
+      "failed": "Ștergerea {entity} a eșuat"
+    },
+    "update": {
+      "failed": "Actualizarea {entity} a eșuat",
+      "success": "{entity} a fost actualizată cu succes"
+    },
+    "link_copied_to_clipboard": "Link-ul {entity} a fost copiat în memoria temporară",
+    "fetch": {
+      "failed": "Eroare la preluarea {entity}"
+    },
+    "add": {
+      "success": "{entity} a fost adăugată cu succes",
+      "failed": "Eroare la adăugarea {entity}"
+    },
+    "remove": {
+      "success": "{entity} a fost eliminată cu succes",
+      "failed": "Eroare la eliminarea {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Fișierul nu a putut fi atașat. Încearcă să încarci din nou.",
+    "only_one_file_allowed": "Se poate încărca doar un fișier o dată.",
+    "file_size_limit": "Fișierul trebuie să aibă {size}MB sau mai puțin.",
+    "drag_and_drop": "Trage și plasează oriunde pentru a încărca",
+    "delete": "Șterge atașamentul"
+  },
+  "label": {
+    "select": "Selectează eticheta",
+    "create": {
+      "success": "Etichetă creată cu succes",
+      "failed": "Crearea etichetei a eșuat",
+      "already_exists": "Eticheta există deja",
+      "type": "Tastează pentru a adăuga o etichetă nouă"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Perspectivă} other {Perspective}}",
+    "create": {
+      "label": "Creează perspectivă"
+    },
+    "update": {
+      "label": "Actualizează perspectiva"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Invitat",
+      "description": "Membrii externi ai organizațiilor pot fi incluși ca invitați."
+    },
+    "member": {
+      "title": "Membru",
+      "description": "Poate citi, scrie, edita și șterge entități în proiecte, cicluri și module"
+    },
+    "admin": {
+      "title": "Administrator",
+      "description": "Toate permisiunile setate pe adevărat în cadrul workspace-ului."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Manager de produs / proiect",
+    "development_or_engineering": "Dezvoltare / Inginerie",
+    "founder_or_executive": "Fondator / Director executiv",
+    "freelancer_or_consultant": "Liber profesionist / Consultant",
+    "marketing_or_growth": "Marketing / Creștere",
+    "sales_or_business_development": "Vânzări / Dezvoltare afaceri",
+    "support_or_operations": "Suport / Operațiuni",
+    "student_or_professor": "Student / Profesor",
+    "human_resources": "Resurse umane",
+    "other": "Altceva"
+  },
+  "default_global_view": {
+    "all_issues": "Toate activitățile",
+    "assigned": "Atribuite",
+    "created": "Create",
+    "subscribed": "Urmărite"
+  },
+  "description_versions": {
+    "last_edited_by": "Ultima editare de către",
+    "previously_edited_by": "Editat anterior de către",
+    "edited_by": "Editat de"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane nu a pornit. Aceasta ar putea fi din cauza că unul sau mai multe servicii Plane au eșuat să pornească.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Alegeți View Logs din setup.sh și logurile Docker pentru a fi siguri."
+  },
+  "customize_navigation": "Personalizează navigarea",
+  "personal": "Personal",
+  "accordion_navigation_control": "Navigare acordeon bară laterală",
+  "horizontal_navigation_bar": "Navigare cu file",
+  "show_limited_projects_on_sidebar": "Afișează proiecte limitate în bara laterală",
+  "enter_number_of_projects": "Introdu numărul de proiecte",
+  "pin": "Fixează",
+  "unpin": "Anulează fixarea",
+  "workspace_dashboards": "Dashboarduri",
+  "pi_chat": "Plane AI",
+  "in_app": "În-app",
+  "forms": "Formulare",
+  "milestones": "Jaloane",
+  "milestones_description": "Jaloanele oferă un strat pentru a alinia activitățile către date comune de finalizare.",
+  "file_upload": {
+    "upload_text": "Click aici pentru a încărca fișierul",
+    "drag_drop_text": "Trage și Plasează",
+    "processing": "Se procesează",
+    "invalid_file_type": "Tip de fișier invalid",
+    "missing_fields": "Câmpuri lipsă",
+    "success": "{fileName} Încărcat!"
+  },
+  "date": "Dată",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Exportă activitățile într-un fișier CSV.",
+      "short_description": "Exportă ca CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Exportă activitățile într-un fișier Excel.",
+      "short_description": "Exportă ca Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Exportă activitățile într-un fișier Excel.",
+      "short_description": "Exportă ca Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Exportă activitățile într-un fișier JSON.",
+      "short_description": "Exportă ca JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/cycle.json b/packages/i18n/src/locales/ro/cycle.json
new file mode 100644
index 0000000..c87feb0
--- /dev/null
+++ b/packages/i18n/src/locales/ro/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Adaugă activități în ciclu pentru a vedea progresul"
+      },
+      "chart": {
+        "title": "Adaugă activități în ciclu pentru a vedea graficul de finalizare a activităților."
+      },
+      "priority_issue": {
+        "title": "Observă rapid activitățile cu prioritate ridicată abordate în ciclu."
+      },
+      "assignee": {
+        "title": "Adaugă responsabili pentru a vedea repartizarea muncii pe persoane."
+      },
+      "label": {
+        "title": "Adaugă etichete activităților pentru a vedea repartizarea muncii pe etichete."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Ciclu} other {Cicluri}}",
+    "no_cycle": "Niciun ciclu"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Adaugă elemente de lucru la ciclu pentru a-i vedea\n progresul"
+      },
+      "priority": {
+        "title": "Observă elementele de lucru cu prioritate ridicată abordate în\n ciclu dintr-o privire."
+      },
+      "assignee": {
+        "title": "Adaugă responsabili la elementele de lucru pentru a vedea o\n defalcare a muncii după responsabili."
+      },
+      "label": {
+        "title": "Adaugă etichete la elementele de lucru pentru a vedea\n defalcarea muncii după etichete."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/editor.json b/packages/i18n/src/locales/ro/editor.json
new file mode 100644
index 0000000..09a1f4b
--- /dev/null
+++ b/packages/i18n/src/locales/ro/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Trageți și plasați pentru a încărca fișiere externe"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Fișier prea mare.",
+        "description": "Dimensiunea maximă per fișier este {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Tip de fișier neacceptat.",
+        "description": "Vezi formatele acceptate"
+      },
+      "default": {
+        "title": "Încărcarea a eșuat.",
+        "description": "Ceva a mers prost. Vă rugăm să încercați din nou."
+      }
+    },
+    "upgrade": {
+      "description": "Actualizați planul pentru a vizualiza această atașare."
+    },
+    "aria": {
+      "click_to_upload": "Faceți clic pentru a încărca atașamentul"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Convertește în încorporare",
+      "convert_to_link": "Convertește în link",
+      "convert_to_richcard": "Convertește în card bogat"
+    },
+    "placeholder": {
+      "insert_embed": "Introduceți aici linkul preferat pentru încorporare, cum ar fi video YouTube, design Figma etc.",
+      "link": "Introduceți sau lipiți un link"
+    },
+    "input_modal": {
+      "embed": "Încorporează",
+      "works_with_links": "Funcționează cu YouTube, Figma, Google Docs și altele"
+    },
+    "error": {
+      "not_valid_link": "Vă rugăm să introduceți o adresă URL validă."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Descrie conținutul acestui bloc",
+      "generated_here": "Conținutul tău AI va fi generat aici"
+    },
+    "block_types": {
+      "placeholder": "Selectează tipul blocului",
+      "summarize_page": "Rezumă pagina",
+      "custom_prompt": "Prompt personalizat"
+    },
+    "actions": {
+      "discard": "Renunță",
+      "generate": "Generează",
+      "generating": "Se generează",
+      "rewriting": "Se rescrie",
+      "rewrite": "Rescrie",
+      "use_this": "Folosește aceasta",
+      "refine": "Rafinează"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/empty-state.json b/packages/i18n/src/locales/ro/empty-state.json
new file mode 100644
index 0000000..a613a68
--- /dev/null
+++ b/packages/i18n/src/locales/ro/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Nu există încă metrici de progres de afișat.",
+      "description": "Începeți să setați valori de proprietăți în elementele de lucru pentru a vedea metricile de progres aici."
+    },
+    "updates": {
+      "title": "Încă nu există actualizări.",
+      "description": "Odată ce membrii proiectului adaugă actualizări, acestea vor apărea aici"
+    },
+    "search": {
+      "title": "Niciun rezultat corespunzător.",
+      "description": "Nu s-au găsit rezultate. Încercați să ajustați termenii de căutare."
+    },
+    "not_found": {
+      "title": "Hopa! Se pare că ceva nu este în regulă",
+      "description": "Nu putem accesa contul dvs. Plane în prezent. Aceasta ar putea fi o eroare de rețea.",
+      "cta_primary": "Încercați reîncărcarea"
+    },
+    "server_error": {
+      "title": "Eroare de server",
+      "description": "Nu ne putem conecta și accesa datele de pe serverul nostru. Nu vă faceți griji, lucrăm la asta.",
+      "cta_primary": "Încercați reîncărcarea"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Se pare că nu aveți acces la acest proiect",
+      "restricted_description": "Contactați administratorul pentru a solicita accesul și veți putea continua aici.",
+      "join_description": "Faceți clic pe butonul de mai jos pentru a vă alătura.",
+      "cta_primary": "Alăturați-vă proiectului",
+      "cta_loading": "Se alătură proiectului"
+    },
+    "invalid_project": {
+      "title": "Proiect negăsit",
+      "description": "Proiectul pe care îl căutați nu există."
+    },
+    "work_items": {
+      "title": "Începeți cu primul dvs. element de lucru.",
+      "description": "Elementele de lucru sunt blocurile de construcție ale proiectului dvs. — alocați proprietari, stabiliți priorități și urmăriți progresul cu ușurință.",
+      "cta_primary": "Creați primul dvs. element de lucru"
+    },
+    "cycles": {
+      "title": "Grupați și limitați în timp munca dvs. în Cicluri.",
+      "description": "Împărțiți munca în bucăți limitate în timp, lucrați înapoi de la termenul limită al proiectului pentru a stabili datele și faceți progrese tangibile ca echipă.",
+      "cta_primary": "Setați primul dvs. ciclu"
+    },
+    "cycle_work_items": {
+      "title": "Niciun element de lucru de afișat în acest ciclu",
+      "description": "Creați elemente de lucru pentru a începe monitorizarea progresului echipei dvs. în acest ciclu și pentru a-vă atinge obiectivele la timp.",
+      "cta_primary": "Creați element de lucru",
+      "cta_secondary": "Adăugați element de lucru existent"
+    },
+    "modules": {
+      "title": "Mapați obiectivele proiectului dvs. la Module și urmăriți cu ușurință.",
+      "description": "Modulele sunt compuse din elemente de lucru interconectate. Acestea ajută la monitorizarea progresului prin fazele proiectului, fiecare cu termene limită și analize specifice pentru a indica cât de aproape sunteți de atingerea acelor faze.",
+      "cta_primary": "Setați primul dvs. modul"
+    },
+    "module_work_items": {
+      "title": "Niciun element de lucru de afișat în acest Modul",
+      "description": "Creați elemente de lucru pentru a începe monitorizarea acestui modul.",
+      "cta_primary": "Creați element de lucru",
+      "cta_secondary": "Adăugați element de lucru existent"
+    },
+    "views": {
+      "title": "Salvați vizualizări personalizate pentru proiectul dvs.",
+      "description": "Vizualizările sunt filtre salvate care vă ajută să accesați rapid informațiile pe care le utilizați cel mai mult. Colaborați fără efort pe măsură ce colegii de echipă partajează și personalizează vizualizările conform nevoilor lor specifice.",
+      "cta_primary": "Creați vizualizare"
+    },
+    "no_work_items_in_project": {
+      "title": "Încă nu există elemente de lucru în proiect",
+      "description": "Adăugați elemente de lucru la proiectul dvs. și împărțiți munca în bucăți urmăribile cu vizualizări.",
+      "cta_primary": "Adăugați element de lucru"
+    },
+    "work_item_filter": {
+      "title": "Nu s-au găsit elemente de lucru",
+      "description": "Filtrul dvs. curent nu a returnat niciun rezultat. Încercați să modificați filtrele.",
+      "cta_primary": "Adăugați element de lucru"
+    },
+    "pages": {
+      "title": "Documentați totul — de la notițe la PRD-uri",
+      "description": "Paginile vă permit să capturați și să organizați informații într-un singur loc. Scrieți note de întâlnire, documentație de proiect și PRD-uri, încorporați elemente de lucru și structurați-le cu componente gata de utilizat.",
+      "cta_primary": "Creați prima dvs. Pagină"
+    },
+    "archive_pages": {
+      "title": "Încă nu există pagini arhivate",
+      "description": "Arhivați paginile care nu sunt în radar-ul dvs. Accesați-le aici când este necesar."
+    },
+    "intake_sidebar": {
+      "title": "Înregistrați solicitări de Admitere",
+      "description": "Trimiteți solicitări noi pentru a fi revizuite, prioritizate și urmărite în cadrul fluxului de lucru al proiectului dvs.",
+      "cta_primary": "Creați solicitare de Admitere"
+    },
+    "intake_main": {
+      "title": "Selectați un element de lucru de Admitere pentru a vedea detaliile"
+    },
+    "epics": {
+      "title": "Transformați proiecte complexe în epopei structurate.",
+      "description": "O epopeie vă ajută să organizați obiective mari în sarcini mai mici, urmăribile.",
+      "cta_primary": "Creați o Epopeie",
+      "cta_secondary": "Documentație"
+    },
+    "epic_work_items": {
+      "title": "Nu ați adăugat încă elemente de lucru la această epopeie.",
+      "description": "Începeți prin a adăuga câteva elemente de lucru la această epopeie și urmăriți-le aici.",
+      "cta_secondary": "Adăugați elemente de lucru"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Încă nu există epici arhivate",
+      "description": "Puteți arhiva epici finalizate sau anulate. Găsiți-le aici după arhivare."
+    },
+    "archive_work_items": {
+      "title": "Încă nu există elemente de lucru arhivate",
+      "description": "Manual sau prin automatizare, puteți arhiva elemente de lucru finalizate sau anulate. Găsiți-le aici odată arhivate.",
+      "cta_primary": "Configurați automatizarea"
+    },
+    "archive_cycles": {
+      "title": "Încă nu există cicluri arhivate",
+      "description": "Pentru a vă aranja proiectul, arhivați ciclurile finalizate. Găsiți-le aici odată arhivate."
+    },
+    "archive_modules": {
+      "title": "Încă nu există Module arhivate",
+      "description": "Pentru a vă aranja proiectul, arhivați modulele finalizate sau anulate. Găsiți-le aici odată arhivate."
+    },
+    "home_widget_quick_links": {
+      "title": "Păstrați referințe importante, resurse sau documente la îndemână pentru munca dvs."
+    },
+    "inbox_sidebar_all": {
+      "title": "Actualizările pentru elementele dvs. de lucru la care sunteți abonat vor apărea aici"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Mențiunile pentru elementele dvs. de lucru vor apărea aici"
+    },
+    "your_work_by_priority": {
+      "title": "Încă nu există elemente de lucru atribuite"
+    },
+    "your_work_by_state": {
+      "title": "Încă nu există elemente de lucru atribuite"
+    },
+    "views": {
+      "title": "Încă nu există Vizualizări",
+      "description": "Adăugați elemente de lucru la proiectul dvs. și utilizați vizualizări pentru a filtra, sorta și monitoriza progresul fără efort.",
+      "cta_primary": "Adăugați element de lucru"
+    },
+    "drafts": {
+      "title": "Elemente de lucru semi-scrise",
+      "description": "Pentru a încerca acest lucru, începeți să adăugați un element de lucru și lăsați-l nefinalizat sau creați prima dvs. schiță mai jos. 😉",
+      "cta_primary": "Creați element de lucru schiță"
+    },
+    "projects_archived": {
+      "title": "Niciun proiect arhivat",
+      "description": "Se pare că toate proiectele dvs. sunt încă active — bună treabă!"
+    },
+    "analytics_projects": {
+      "title": "Creați proiecte pentru a vizualiza metricile proiectului aici."
+    },
+    "analytics_work_items": {
+      "title": "Creați proiecte cu elemente de lucru și responsabili pentru a începe urmărirea performanței, progresului și impactului echipei aici."
+    },
+    "analytics_no_cycle": {
+      "title": "Creați cicluri pentru a organiza munca în faze limitate în timp și a urmări progresul în sprint-uri."
+    },
+    "analytics_no_module": {
+      "title": "Creați module pentru a vă organiza munca și a urmări progresul în diferite etape."
+    },
+    "analytics_no_intake": {
+      "title": "Configurați admiterea pentru a gestiona solicitările primite și a urmări cum sunt acceptate și respinse"
+    },
+    "home_widget_stickies": {
+      "title": "Notați o idee, capturați un moment de inspirație sau înregistrați o idee genială. Adăugați un notă pentru a începe."
+    },
+    "stickies": {
+      "title": "Capturați idei instantaneu",
+      "description": "Creați note pentru notițe rapide și sarcini, și păstrați-le cu dvs. oriunde mergeți.",
+      "cta_primary": "Creați prima notă",
+      "cta_secondary": "Documentație"
+    },
+    "active_cycles": {
+      "title": "Niciun ciclu activ",
+      "description": "Nu aveți cicluri în desfășurare în acest moment. Ciclurile active apar aici când includ data de azi."
+    },
+    "dashboard": {
+      "title": "Vizualizați progresul dvs. cu tablouri de bord",
+      "description": "Construiți tablouri de bord personalizabile pentru a urmări metricile, a măsura rezultatele și a prezenta informații eficient.",
+      "cta_primary": "Creați tablou de bord nou"
+    },
+    "wiki": {
+      "title": "Scrieți o notă, un document sau o bază de cunoștințe completă.",
+      "description": "Paginile sunt spațiu de captare a gândurilor în Plane. Notați note de întâlnire, formatați-le cu ușurință, încorporați elemente de lucru, aranjați-le folosind o bibliotecă de componente și păstrați-le toate în contextul proiectului dvs.",
+      "cta_primary": "Creați pagina dvs."
+    },
+    "project_overview_state_sidebar": {
+      "title": "Activați stările proiectului",
+      "description": "Activați stările proiectului pentru a vizualiza și gestiona proprietăți precum starea, prioritatea, datele scadente și altele."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Încă nu există estimări",
+      "description": "Definiți modul în care echipa dvs. măsoară efortul și urmăriți-l consecvent în toate elementele de lucru.",
+      "cta_primary": "Adăugați sistem de estimări"
+    },
+    "labels": {
+      "title": "Încă nu există etichete",
+      "description": "Creați etichete personalizate pentru a categorisi și gestiona eficient elementele dvs. de lucru.",
+      "cta_primary": "Creați prima dvs. etichetă"
+    },
+    "exports": {
+      "title": "Încă nu există exporturi",
+      "description": "Nu aveți nicio înregistrare de export în acest moment. Odată ce exportați date, toate înregistrările vor apărea aici."
+    },
+    "tokens": {
+      "title": "Încă nu există token Personal",
+      "description": "Generați token-uri API sigure pentru a conecta spațiul dvs. de lucru cu sisteme și aplicații externe.",
+      "cta_primary": "Adăugați token API"
+    },
+    "workspace_tokens": {
+      "title": "Încă nu există token-uri API",
+      "description": "Generați token-uri API sigure pentru a conecta spațiul dvs. de lucru cu sisteme și aplicații externe.",
+      "cta_primary": "Adăugați token API"
+    },
+    "webhooks": {
+      "title": "Încă nu s-a adăugat niciun Webhook",
+      "description": "Automatizați notificările către servicii externe când apar evenimente ale proiectului.",
+      "cta_primary": "Adăugați webhook"
+    },
+    "work_item_types": {
+      "title": "Creați și personalizați tipuri de elemente de lucru",
+      "description": "Definiți tipuri unice de elemente de lucru pentru proiectul dvs. Fiecare tip poate avea propriile proprietăți, fluxuri de lucru și câmpuri - adaptate la nevoile proiectului și echipei dvs.",
+      "cta_primary": "Activați"
+    },
+    "work_item_type_properties": {
+      "title": "Definiți proprietatea și detaliile pe care doriți să le capturați pentru acest tip de element de lucru. Personalizați-l pentru a se potrivi fluxului de lucru al proiectului dvs.",
+      "cta_secondary": "Adăugați proprietate"
+    },
+    "templates": {
+      "title": "Încă nu există șabloane",
+      "description": "Reduceți timpul de configurare prin crearea de șabloane pentru elemente de lucru și pagini — și începeți munca nouă în câteva secunde.",
+      "cta_primary": "Creați primul dvs. șablon"
+    },
+    "recurring_work_items": {
+      "title": "Încă nu există elemente de lucru recurente",
+      "description": "Configurați elemente de lucru recurente pentru a automatiza sarcinile repetitive și a rămâne la timp fără efort.",
+      "cta_primary": "Creați element de lucru recurent"
+    },
+    "worklogs": {
+      "title": "Urmăriți foile de pontaj pentru toți membrii",
+      "description": "Înregistrați timpul pe elemente de lucru pentru a vedea foi de pontaj detaliate pentru orice membru al echipei din proiecte."
+    },
+    "group_syncing": {
+      "title": "Încă nu există mapări de grup"
+    },
+    "template_setting": {
+      "title": "Încă nu există șabloane",
+      "description": "Reduceți timpul de configurare prin crearea de șabloane pentru proiecte, elemente de lucru și pagini — și începeți munca nouă în câteva secunde.",
+      "cta_primary": "Creați șablon"
+    },
+    "workflows": {
+      "title": "Încă nu există fluxuri de lucru",
+      "description": "Creați fluxuri de lucru pentru a gestiona progresul elementelor de lucru.",
+      "cta_primary": "Adaugă flux de lucru nou",
+      "states": {
+        "title": "Adaugă stări",
+        "description": "Selectează stările prin care progresează elementul de lucru."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/home.json b/packages/i18n/src/locales/ro/home.json
new file mode 100644
index 0000000..df5fae3
--- /dev/null
+++ b/packages/i18n/src/locales/ro/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Ghid de pornire rapidă",
+      "not_right_now": "Nu acum",
+      "create_project": {
+        "title": "Creează un proiect",
+        "description": "Majoritatea lucrurilor încep cu un proiect în Plane.",
+        "cta": "Începe acum"
+      },
+      "invite_team": {
+        "title": "Invită-ți echipa",
+        "description": "Construiește, livrează și gestionează împreună cu colegii.",
+        "cta": "Invită-i"
+      },
+      "configure_workspace": {
+        "title": "Configurează-ți spațiul de lucru.",
+        "description": "Activează sau dezactivează opțiuni sau mergi mai departe.",
+        "cta": "Configurează acest spațiu de lucru"
+      },
+      "personalize_account": {
+        "title": "Personalizează Plane.",
+        "description": "Alege-ți poza de profil, culorile și multe altele.",
+        "cta": "Personalizează acum"
+      },
+      "widgets": {
+        "title": "Este liniște fără mini-aplicații, activează-le",
+        "description": "Se pare că toate mini-aplicațiile tale sunt dezactivate. Activează-le acum pentru a-ți îmbunătăți experiența!",
+        "primary_button": {
+          "text": "Gestionează mini-aplicațiile"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Salvează link-uri către elementele utile pe care vrei să le ai la îndemână.",
+      "add": "Adaugă link rapid",
+      "title": "Link rapid",
+      "title_plural": "Linkuri rapide"
+    },
+    "recents": {
+      "title": "Recente",
+      "empty": {
+        "project": "Proiectele vizitate recent vor apărea aici.",
+        "page": "Documentele din Documentație vizitate recent vor apărea aici.",
+        "issue": "Activitățile vizitate recent vor apărea aici.",
+        "default": "Nu ai nimic recent încă."
+      },
+      "filters": {
+        "all": "Toate",
+        "projects": "Proiecte",
+        "pages": "Documentație",
+        "issues": "Activități"
+      }
+    },
+    "new_at_plane": {
+      "title": "Noutăți în Plane"
+    },
+    "quick_tutorial": {
+      "title": "Tutorial rapid"
+    },
+    "widget": {
+      "reordered_successfully": "Mini-aplicație reordonată cu succes.",
+      "reordering_failed": "Eroare la reordonarea mini-aplicației."
+    },
+    "manage_widgets": "Gestionează mini-aplicațiile",
+    "title": "Acasă",
+    "star_us_on_github": "Dă-ne o stea pe GitHub",
+    "business_trial_banner": {
+      "title": "Perioada de probă de 14 zile pentru planul Business este activă!",
+      "description": "Explorați toate funcțiile Business. Când sunteți pregătit, alegeți să vă abonați. Nu veți fi facturat automat.",
+      "trial_ends_today": "Perioada de probă se încheie astăzi",
+      "trial_ends_in_days": "Perioada de probă se încheie în {days, plural, one {# zi} other {# zile}}",
+      "start_subscription": "Începe abonamentul",
+      "explore_business_features": "Explorează funcțiile Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/inbox.json b/packages/i18n/src/locales/ro/inbox.json
new file mode 100644
index 0000000..4d24a4b
--- /dev/null
+++ b/packages/i18n/src/locales/ro/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "În așteptare",
+        "description": "În așteptare"
+      },
+      "declined": {
+        "title": "Respinse",
+        "description": "Respinse"
+      },
+      "snoozed": {
+        "title": "Amânate",
+        "description": "{days, plural, one{# zi} other{# zile}} rămase"
+      },
+      "accepted": {
+        "title": "Acceptate",
+        "description": "Acceptate"
+      },
+      "duplicate": {
+        "title": "Duplicate",
+        "description": "Duplicate"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Respinge activitatea",
+        "content": "Ești sigur că vrei să respingi activitatea {value}?"
+      },
+      "delete": {
+        "title": "Șterge activitatea",
+        "content": "Ești sigur că vrei să ștergi activitatea {value}?",
+        "success": "Activitatea a fost ștersă cu succes"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Doar administratorii proiectului pot amâna/dezactiva amânarea activităților",
+      "accept_permission": "Doar administratorii proiectului pot accepta activități",
+      "decline_permission": "Doar administratorii proiectului pot respinge activități"
+    },
+    "actions": {
+      "accept": "Acceptă",
+      "decline": "Respinge",
+      "snooze": "Amână",
+      "unsnooze": "Dezactivează amânarea",
+      "copy": "Copiază link-ul activității",
+      "delete": "Șterge",
+      "open": "Deschide activitatea",
+      "mark_as_duplicate": "Marchează ca duplicat",
+      "move": "Mută {value} în activitățile proiectului"
+    },
+    "source": {
+      "in-app": "în aplicație"
+    },
+    "order_by": {
+      "created_at": "Creată la",
+      "updated_at": "Actualizată la",
+      "id": "ID"
+    },
+    "label": "Cereri",
+    "page_label": "{workspace} - Cereri",
+    "modal": {
+      "title": "Creează o cerere în Cereri"
+    },
+    "tabs": {
+      "open": "Deschise",
+      "closed": "Închise"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Nicio cerere deschisă",
+        "description": "Găsește aici cererile primite. Creează o cerere nouă."
+      },
+      "sidebar_closed_tab": {
+        "title": "Nicio cerere închisă",
+        "description": "Toate cererile, fie acceptate, fie respinse, pot fi găsite aici."
+      },
+      "sidebar_filter": {
+        "title": "Nicio cerere gasită",
+        "description": "Nicio cerere nu se potrivește cu filtrul aplicat în Cereri. Creează o cerere nouă."
+      },
+      "detail": {
+        "title": "Selectează o cerere pentru a-i vedea detaliile."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/integration.json b/packages/i18n/src/locales/ro/integration.json
new file mode 100644
index 0000000..b6b92f4
--- /dev/null
+++ b/packages/i18n/src/locales/ro/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integrări",
+    "loading": "Se încarcă",
+    "unauthorized": "Nu ești autorizat să vezi această pagină.",
+    "configure": "Configurează",
+    "not_enabled": "{name} nu este activat pentru acest workspace.",
+    "not_configured": "Neconfigurat",
+    "disconnect_personal_account": "Deconectează contul personal {providerName}",
+    "not_configured_message_admin": "Integrarea {name} nu este configurată. Te rugăm să contactezi administratorul instanței pentru a o configura.",
+    "not_configured_message_support": "Integrarea {name} nu este configurată. Te rugăm să contactezi suportul pentru a o configura.",
+    "external_api_unreachable": "Nu se poate accesa API-ul extern. Te rugăm să încerci din nou mai târziu.",
+    "error_fetching_supported_integrations": "Nu se pot prelua integrările suportate. Te rugăm să încerci din nou mai târziu.",
+    "back_to_integrations": "Înapoi la integrări",
+    "select_state": "Selectează Starea",
+    "set_state": "Setează Starea",
+    "choose_project": "Alege Proiectul...",
+    "skip_backward_state_movement": "Împiedică mutarea problemelor într-o stare anterioară din cauza actualizărilor PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Conectează și sincronizează elementele tale de lucru GitHub cu Plane",
+    "connect_org": "Conectează Organizația",
+    "connect_org_description": "Conectează organizația ta GitHub cu Plane",
+    "processing": "Se procesează",
+    "org_added_desc": "GitHub org adăugată de și timp",
+    "connection_fetch_error": "Eroare la preluarea detaliilor conexiunii de la server",
+    "personal_account_connected": "Cont personal conectat",
+    "personal_account_connected_description": "Contul tău GitHub este acum conectat la Plane",
+    "connect_personal_account": "Conectează Cont Personal",
+    "connect_personal_account_description": "Conectează contul tău personal GitHub cu Plane.",
+    "repo_mapping": "Mapare Repozitoriu",
+    "repo_mapping_description": "Mapează repository-urile tale GitHub cu proiectele Plane.",
+    "project_issue_sync": "Sincronizare Problema Proiect",
+    "project_issue_sync_description": "Sincronizează problemele de la GitHub la proiectul tău Plane",
+    "project_issue_sync_empty_state": "Sincronizările problemelor de proiect mapate vor apărea aici",
+    "configure_project_issue_sync_state": "Configurează Starea de Sincronizare a Problemei",
+    "select_issue_sync_direction": "Selectează direcția de sincronizare a problemelor",
+    "allow_bidirectional_sync": "Bidirecional - Sincronizează probleme și comentarii în ambele sensuri între GitHub și Plane",
+    "allow_unidirectional_sync": "Unidirectional - Sincronizează probleme și comentariile de la GitHub la Plane doar",
+    "allow_unidirectional_sync_warning": "Datele din GitHub Issue vor înlocui datele din Elementul de Lucru Plane Legat (GitHub → Plane doar)",
+    "remove_project_issue_sync": "Elimină această Sincronizare Problema Proiect",
+    "remove_project_issue_sync_confirmation": "Ești sigur că vrei să elimiști această sincronizare problema proiect?",
+    "add_pr_state_mapping": "Adaugă Mapare Stare Pull Request pentru Proiectul Plane",
+    "edit_pr_state_mapping": "Editare Mapare Stare Pull Request pentru Proiectul Plane",
+    "pr_state_mapping": "Mapare Stare Pull Request",
+    "pr_state_mapping_description": "Mapează stările pull request de la GitHub la proiectul tău Plane",
+    "pr_state_mapping_empty_state": "Stările PR mapate vor apărea aici",
+    "remove_pr_state_mapping": "Elimină această Mapare Stare Pull Request",
+    "remove_pr_state_mapping_confirmation": "Ești sigur că vrei să elimiști această mapare de stare pull request?",
+    "issue_sync_message": "Elementele de lucru sunt sincronizate cu {project}",
+    "link": "Leagă Repozitoriu GitHub la Proiectul Plane",
+    "pull_request_automation": "Automatizare Pull Request",
+    "pull_request_automation_description": "Configurează maparea stării pull request de la GitHub la proiectul tău Plane",
+    "DRAFT_MR_OPENED": "Draft Deschis",
+    "MR_OPENED": "Deschis",
+    "MR_READY_FOR_MERGE": "Gata pentru Fuzionare",
+    "MR_REVIEW_REQUESTED": "Revizuire Solicitată",
+    "MR_MERGED": "Fuzionat",
+    "MR_CLOSED": "Închis",
+    "ISSUE_OPEN": "Issue Deschis",
+    "ISSUE_CLOSED": "Issue Închis",
+    "save": "Salvează",
+    "start_sync": "Start Sincronizare",
+    "choose_repository": "Alege Repozitoriu..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Conectează și sincronizează cererile tale de fuzionare Gitlab cu Plane.",
+    "connection_fetch_error": "Eroare la preluarea detaliilor conexiunii de la server",
+    "connect_org": "Conectează Organizația",
+    "connect_org_description": "Conectează organizația ta Gitlab cu Plane.",
+    "project_connections": "Conexiuni Proiect Gitlab",
+    "project_connections_description": "Sincronizează cererile de fuzionare de la Gitlab la proiectele Plane.",
+    "plane_project_connection": "Conexiune Proiect Plane",
+    "plane_project_connection_description": "Configurează maparea stării cererilor pull de la Gitlab la proiectele Plane",
+    "remove_connection": "Elimină Conexiunea",
+    "remove_connection_confirmation": "Ești sigur că vrei să elimini această conexiune?",
+    "link": "Leagă repozitoriul Gitlab la proiectul Plane",
+    "pull_request_automation": "Automatizare Pull Request",
+    "pull_request_automation_description": "Configurează maparea stării pull request de la Gitlab la Plane",
+    "DRAFT_MR_OPENED": "La deschiderea MR-ului draft, setează starea la",
+    "MR_OPENED": "La deschiderea MR-ului, setează starea la",
+    "MR_REVIEW_REQUESTED": "La solicitarea revizuirii MR-ului, setează starea la",
+    "MR_READY_FOR_MERGE": "Când MR-ul este gata de fuzionare, setează starea la",
+    "MR_MERGED": "La fuzionarea MR-ului, setează starea la",
+    "MR_CLOSED": "La închiderea MR-ului, setează starea la",
+    "integration_enabled_text": "Cu integrarea Gitlab activată, poți automatiza fluxurile de lucru ale elementelor de lucru",
+    "choose_entity": "Alege Entitatea",
+    "choose_project": "Alege Proiectul",
+    "link_plane_project": "Leagă proiectul Plane",
+    "project_issue_sync": "Sincronizare probleme proiect",
+    "project_issue_sync_description": "Sincronizează problemele din Gitlab în proiectul tău Plane",
+    "project_issue_sync_empty_state": "Sincronizarea problemelor de proiect mapate va apărea aici",
+    "configure_project_issue_sync_state": "Configurează starea sincronizării problemelor",
+    "select_issue_sync_direction": "Selectează direcția de sincronizare a problemelor",
+    "allow_bidirectional_sync": "Bidirecțional - Sincronizează probleme și comentarii în ambele direcții între Gitlab și Plane",
+    "allow_unidirectional_sync": "Unidirecțional - Sincronizează probleme și comentarii doar din Gitlab în Plane",
+    "allow_unidirectional_sync_warning": "Datele din Gitlab Issue vor înlocui datele din Elementul de lucru Plane legat (doar Gitlab → Plane)",
+    "remove_project_issue_sync": "Elimină această sincronizare a problemelor de proiect",
+    "remove_project_issue_sync_confirmation": "Ești sigur că vrei să elimini această sincronizare a problemelor de proiect?",
+    "ISSUE_OPEN": "Problemă deschisă",
+    "ISSUE_CLOSED": "Problemă închisă",
+    "save": "Salvează",
+    "start_sync": "Începe sincronizarea",
+    "choose_repository": "Alege depozitul..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Conectați și sincronizați instanța dumneavoastră Gitlab Enterprise cu Plane.",
+    "app_form_title": "Configurare Gitlab Enterprise",
+    "app_form_description": "Configurați Gitlab Enterprise pentru a se conecta la Plane.",
+    "base_url_title": "URL de bază",
+    "base_url_description": "URL-ul de bază al instanței dumneavoastră Gitlab Enterprise.",
+    "base_url_placeholder": "ex. \"https://glab.plane.town\"",
+    "base_url_error": "URL-ul de bază este obligatoriu",
+    "invalid_base_url_error": "URL de bază invalid",
+    "client_id_title": "ID App",
+    "client_id_description": "ID-ul aplicației pe care ați creat-o în instanța dumneavoastră Gitlab Enterprise.",
+    "client_id_placeholder": "ex. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "ID-ul App este obligatoriu",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Client secret-ul aplicației pe care ați creat-o în instanța dumneavoastră Gitlab Enterprise.",
+    "client_secret_placeholder": "ex. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret este obligatoriu",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Un webhook secret aleatoriu care va fi folosit pentru a verifica webhook-ul din instanța Gitlab Enterprise.",
+    "webhook_secret_placeholder": "ex. \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret este obligatoriu",
+    "connect_app": "Conectează App"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Conectează workspace-ul tău Slack cu Plane.",
+    "connect_personal_account": "Conectează contul tău personal Slack cu Plane.",
+    "personal_account_connected": "Contul tău personal {providerName} este acum conectat la Plane.",
+    "link_personal_account": "Leagă contul tău personal {providerName} de Plane.",
+    "connected_slack_workspaces": "Workspace-uri Slack conectate",
+    "connected_on": "Conectat pe {date}",
+    "disconnect_workspace": "Deconectează workspace-ul {name}",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Primește notificări în mesajele directe Slack pentru actualizări importante, memento-uri și alerte doar pentru tine."
+      }
+    },
+    "project_updates": {
+      "title": "Actualizări Proiect",
+      "description": "Configurează notificări de actualizări ale proiectelor pentru proiectele tale",
+      "add_new_project_update": "Adaugă o nouă notificare de actualizări proiect",
+      "project_updates_empty_state": "Proiectele conectate cu Canale Slack vor apărea aici.",
+      "project_updates_form": {
+        "title": "Configurează Actualizări Proiect",
+        "description": "Primește notificări de actualizări proiect în Slack când sunt create elemente de lucru",
+        "failed_to_load_channels": "Nu s-au putut încărca canalele din Slack",
+        "project_dropdown": {
+          "placeholder": "Selectează un proiect",
+          "label": "Proiect Plane",
+          "no_projects": "Nu există proiecte disponibile"
+        },
+        "channel_dropdown": {
+          "label": "Canal Slack",
+          "placeholder": "Selectează un canal",
+          "no_channels": "Nu există canale disponibile"
+        },
+        "all_projects_connected": "Toate proiectele sunt deja conectate la canale Slack.",
+        "all_channels_connected": "Toate canalele Slack sunt deja conectate la proiecte.",
+        "project_connection_success": "Conexiunea proiectului a fost creată cu succes",
+        "project_connection_updated": "Conexiunea proiectului a fost actualizată cu succes",
+        "project_connection_deleted": "Conexiunea proiectului a fost ștearsă cu succes",
+        "failed_delete_project_connection": "Nu s-a putut șterge conexiunea proiectului",
+        "failed_create_project_connection": "Nu s-a putut crea conexiunea proiectului",
+        "failed_upserting_project_connection": "Nu s-a putut actualiza conexiunea proiectului",
+        "failed_loading_project_connections": "Nu am putut încărca conexiunile proiectelor tale. Acest lucru ar putea fi din cauza unei probleme de rețea sau a unei probleme cu integrarea."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Conectează spațiul tău de lucru Sentry cu Plane.",
+    "connected_sentry_workspaces": "Spații de lucru Sentry conectate",
+    "connected_on": "Conectat la {date}",
+    "disconnect_workspace": "Deconectează spațiul de lucru {name}",
+    "state_mapping": {
+      "title": "Maparea stărilor",
+      "description": "Mapează stările incidentelor Sentry la stările proiectului tău. Configurează ce stări să folosești când un incident Sentry este rezolvat sau nerezolvat.",
+      "add_new_state_mapping": "Adaugă mapare nouă de stare",
+      "empty_state": "Nu sunt configurate mapări de stări. Creează prima ta mapare pentru a sincroniza stările incidentelor Sentry cu stările proiectului tău.",
+      "failed_loading_state_mappings": "Nu am putut încărca mapările tale de stări. Aceasta ar putea fi din cauza unei probleme de rețea sau a unei probleme cu integrarea.",
+      "loading_project_states": "Se încarcă stările proiectului...",
+      "error_loading_states": "Eroare la încărcarea stărilor",
+      "no_states_available": "Nu sunt disponibile stări",
+      "no_permission_states": "Nu ai permisiunea de a accesa stările pentru acest proiect",
+      "states_not_found": "Stările proiectului nu au fost găsite",
+      "server_error_states": "Eroare de server la încărcarea stărilor"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Conectează și sincronizează depozitele tale Bitbucket Data Center cu Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Validează tokenurile IdP externe pentru accesul la API.",
+    "header_description": "Validați tokenurile OIDC/JWT emise extern de IdP-ul dvs. (Azure AD, Okta etc.) pentru accesul la API-ul Plane.",
+    "connected": "Conectat",
+    "connect": "Conectare",
+    "uninstall": "Dezinstalare",
+    "uninstalling": "Se dezinstalează...",
+    "install_success": "OAuth Bridge instalat cu succes.",
+    "install_error": "Instalarea OAuth Bridge a eșuat.",
+    "uninstall_success": "OAuth Bridge dezinstalat.",
+    "uninstall_error": "Dezinstalarea OAuth Bridge a eșuat.",
+    "token_providers": "Furnizori de tokenuri",
+    "token_providers_description": "Configurați IdP-urile externe ale căror JWT-uri sunt acceptate ca credențiale API.",
+    "add_provider": "Adăugare furnizor",
+    "edit_provider": "Editare furnizor",
+    "enabled": "Activat",
+    "disabled": "Dezactivat",
+    "test": "Test",
+    "no_providers_title": "Niciun furnizor configurat.",
+    "no_providers_description": "Adăugați un IdP pentru a activa autentificarea cu tokenuri externe.",
+    "provider_updated": "Furnizor actualizat.",
+    "provider_added": "Furnizor adăugat.",
+    "provider_save_error": "Salvarea furnizorului a eșuat.",
+    "provider_deleted": "Furnizor șters.",
+    "provider_delete_error": "Ștergerea furnizorului a eșuat.",
+    "provider_update_error": "Actualizarea furnizorului a eșuat.",
+    "jwks_reachable": "JWKS accesibil",
+    "jwks_unreachable": "JWKS inaccesibil",
+    "jwks_test_error": "Nu s-a putut obține JWKS de la URL-ul configurat.",
+    "provider_form": {
+      "name_label": "Nume",
+      "name_placeholder": "ex. Azure AD Production",
+      "name_description": "Etichetă lizibilă pentru acest furnizor de identitate",
+      "name_required": "Numele este obligatoriu.",
+      "issuer_label": "Emitent",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Valoarea așteptată a claim-ului iss din JWT",
+      "issuer_required": "Emitentul este obligatoriu.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "Endpoint HTTPS care furnizează JSON Web Key Set-ul furnizorului",
+      "jwks_url_required": "URL-ul JWKS este obligatoriu.",
+      "jwks_url_https": "URL-ul JWKS trebuie să folosească HTTPS.",
+      "audience_label": "Audiență",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Claim-urile aud așteptate din JWT, separate prin virgulă.",
+      "user_claims_label": "Claim utilizator",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "Claim JWT care conține adresa de email a utilizatorului",
+      "user_claims_required": "Claim-ul utilizator este obligatoriu.",
+      "allowed_algorithms_label": "Algoritmi de semnare permiși",
+      "allowed_algorithms_description": "Algoritmi asimetrici acceptați pentru verificarea semnăturii JWT",
+      "allowed_algorithms_required": "Este necesar cel puțin un algoritm.",
+      "select_algorithms": "Selectați algoritmi",
+      "jwks_cache_ttl_label": "TTL cache JWKS (secunde)",
+      "jwks_cache_ttl_description": "Durata stocării în cache a cheilor JWKS ale furnizorului (minim 60s, implicit 24 ore)",
+      "jwks_cache_ttl_min": "TTL-ul cache-ului trebuie să fie de cel puțin 60 secunde.",
+      "rate_limit_label": "Limită de rată",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Limitare cereri ca număr/perioadă (ex. 120/minute). Lăsați gol pentru limita implicită.",
+      "enable_provider": "Activează acest furnizor",
+      "saving": "Se salvează...",
+      "update": "Actualizare"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Conectează și sincronizează organizația ta GitHub Enterprise cu Plane.",
+    "app_form_title": "Configurare GitHub Enterprise",
+    "app_form_description": "Configurează GitHub Enterprise pentru a se conecta cu Plane.",
+    "app_id_title": "ID Aplicație",
+    "app_id_description": "ID-ul aplicației pe care l-ai creat în organizația ta GitHub Enterprise.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "ID-ul aplicației este obligatoriu",
+    "app_name_title": "Slug Aplicație",
+    "app_name_description": "Slug-ul aplicației pe care l-ai creat în organizația ta GitHub Enterprise.",
+    "app_name_error": "Slug-ul aplicației este obligatoriu",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "URL de bază",
+    "base_url_description": "URL-ul de bază al organizației tale GitHub Enterprise.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "URL-ul de bază este obligatoriu",
+    "invalid_base_url_error": "URL-ul de bază este invalid",
+    "client_id_title": "ID Client",
+    "client_id_description": "ID-ul client al aplicației pe care l-ai creat în organizația ta GitHub Enterprise.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID-ul client este obligatoriu",
+    "client_secret_title": "Secret Client",
+    "client_secret_description": "Secret-ul client al aplicației pe care l-ai creat în organizația ta GitHub Enterprise.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Secret-ul client este obligatoriu",
+    "webhook_secret_title": "Secret Webhook",
+    "webhook_secret_description": "Secret-ul webhook al aplicației pe care l-ai creat în organizația ta GitHub Enterprise.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Secret-ul webhook este obligatoriu",
+    "private_key_title": "Cheie Privată (Base64 encoded)",
+    "private_key_description": "Cheia privată codificată în Base64 a aplicației pe care l-ai creat în organizația ta GitHub Enterprise.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Cheia privată este obligatorie",
+    "connect_app": "Conectează Aplicația"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Parametrii de interogare furnizați sunt invalizi sau lipsesc câmpuri obligatorii",
+    "invalid_installation_account": "Contul de instalare furnizat nu este valid",
+    "generic_error": "A apărut o eroare neașteptată în timpul procesării cererii tale",
+    "connection_not_found": "Conexiunea solicitată nu a putut fi găsită",
+    "multiple_connections_found": "Au fost găsite mai multe conexiuni când se aștepta doar una",
+    "cannot_create_multiple_connections": "Ai conectat deja organizația ta cu un spațiu de lucru. Te rugăm să deconectezi conexiunea existentă înainte de a conecta una nouă.",
+    "installation_not_found": "Instalarea solicitată nu a putut fi găsită",
+    "user_not_found": "Utilizatorul solicitat nu a putut fi găsit",
+    "error_fetching_token": "Nu s-a putut prelua tokenul de autentificare",
+    "invalid_app_credentials": "Credențialele aplicației furnizate sunt invalide",
+    "invalid_app_installation_id": "A apărut o eroare la instalarea aplicației"
+  },
+  "import_status": {
+    "queued": "În coadă",
+    "created": "Creat",
+    "initiated": "Inițiat",
+    "pulling": "Se extrag",
+    "timed_out": "Timp expirat",
+    "pulled": "Extras",
+    "progressing": "În desfășurare",
+    "transforming": "Se transformă",
+    "transformed": "Transformat",
+    "pushing": "Se încarcă",
+    "finished": "Finalizat",
+    "error": "Eroare",
+    "cancelled": "Anulat"
+  }
+}
diff --git a/packages/i18n/src/locales/ro/module.json b/packages/i18n/src/locales/ro/module.json
new file mode 100644
index 0000000..9bc9312
--- /dev/null
+++ b/packages/i18n/src/locales/ro/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Modul} other {Module}}",
+    "no_module": "Niciun modul",
+    "select": "Adaugă module"
+  }
+}
diff --git a/packages/i18n/src/locales/ro/navigation.json b/packages/i18n/src/locales/ro/navigation.json
new file mode 100644
index 0000000..e56d5aa
--- /dev/null
+++ b/packages/i18n/src/locales/ro/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Niciun rezultat găsit"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Notițe",
+    "your_work": "Munca ta",
+    "projects": "Proiecte",
+    "pages": "Documentație",
+    "new_work_item": "Activitate nouă",
+    "home": "Acasă",
+    "inbox": "Căsuță de mesaje",
+    "workspace": "Spațiu de lucru",
+    "views": "Perspective",
+    "analytics": "Statistici",
+    "work_items": "Activități",
+    "cycles": "Cicluri",
+    "modules": "Module",
+    "intake": "Cereri",
+    "drafts": "Schițe",
+    "favorites": "Favorite",
+    "pro": "Pro",
+    "upgrade": "Treci la versiunea superioară",
+    "pi_chat": "Plane AI",
+    "epics": "Epice",
+    "upgrade_plan": "Actualizare plan",
+    "plane_pro": "Plane Pro",
+    "business": "Business"
+  }
+}
diff --git a/packages/i18n/src/locales/ro/notification.json b/packages/i18n/src/locales/ro/notification.json
new file mode 100644
index 0000000..74ca5cd
--- /dev/null
+++ b/packages/i18n/src/locales/ro/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Căsuță de mesaje",
+    "page_label": "{workspace} - Căsuță de mesaje",
+    "options": {
+      "mark_all_as_read": "Marchează toate ca citite",
+      "mark_read": "Marchează ca citit",
+      "mark_unread": "Marchează ca necitit",
+      "refresh": "Reîmprospătează",
+      "filters": "Filtre Căsuță de mesaje",
+      "show_unread": "Afișează necitite",
+      "show_snoozed": "Afișează amânate",
+      "show_archived": "Afișează arhivate",
+      "mark_archive": "Arhivează",
+      "mark_unarchive": "Dezarhivează",
+      "mark_snooze": "Amână",
+      "mark_unsnooze": "Dezactivează amânarea"
+    },
+    "toasts": {
+      "read": "Notificare marcată ca citită",
+      "unread": "Notificare marcată ca necitită",
+      "archived": "Notificare arhivată",
+      "unarchived": "Notificare dezarhivată",
+      "snoozed": "Notificare amânată",
+      "unsnoozed": "Notificare reactivată"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Selectează pentru a vedea detalii."
+      },
+      "all": {
+        "title": "Nicio activitate atribuită",
+        "description": "Actualizările pentru activitățile atribuite ție pot fi\nvăzute aici"
+      },
+      "mentions": {
+        "title": "Nicio activitate atribuită",
+        "description": "Actualizările pentru activitățile atribuite ție pot fi\nvăzute aici"
+      }
+    },
+    "tabs": {
+      "all": "Toate",
+      "mentions": "Mențiuni"
+    },
+    "filter": {
+      "assigned": "Atribuite mie",
+      "created": "Create de mine",
+      "subscribed": "Urmărite de mine"
+    },
+    "snooze": {
+      "1_day": "1 zi",
+      "3_days": "3 zile",
+      "5_days": "5 zile",
+      "1_week": "1 săptămână",
+      "2_weeks": "2 săptămâni",
+      "custom": "Personalizat"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/page.json b/packages/i18n/src/locales/ro/page.json
new file mode 100644
index 0000000..be1dad4
--- /dev/null
+++ b/packages/i18n/src/locales/ro/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Contur",
+        "empty_state": {
+          "title": "Titluri lipsă",
+          "description": "Să punem câteva titluri în această pagină pentru a le vedea aici."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Cuvinte",
+          "characters": "Caractere",
+          "paragraphs": "Paragrafe",
+          "read_time": "Timp de citire"
+        },
+        "actors_info": {
+          "edited_by": "Editat de",
+          "created_by": "Creat de"
+        },
+        "version_history": {
+          "label": "Istoricul versiunilor",
+          "current_version": "Versiunea curentă",
+          "highlight_changes": "Evidențiază modificările"
+        }
+      },
+      "assets": {
+        "label": "Resurse",
+        "download_button": "Descarcă",
+        "empty_state": {
+          "title": "Imagini lipsă",
+          "description": "Adăugați imagini pentru a le vedea aici."
+        }
+      },
+      "comments": {
+        "label": "Comentarii",
+        "empty_state": {
+          "title": "Niciun comentariu",
+          "description": "Adaugă comentarii pentru a le vedea aici."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Numele notiței nu poate avea mai mult de 100 de caractere.",
+        "already_exists": "Există deja o notiță fără descriere"
+      },
+      "created": {
+        "title": "Notiță creată",
+        "message": "Notița a fost creată cu succes"
+      },
+      "not_created": {
+        "title": "Notița nu a fost creată",
+        "message": "Notița nu a putut fi creată"
+      },
+      "updated": {
+        "title": "Notiță actualizată",
+        "message": "Notița a fost actualizată cu succes"
+      },
+      "not_updated": {
+        "title": "Notița nu a fost actualizată",
+        "message": "Notița nu a putut fi actualizată"
+      },
+      "removed": {
+        "title": "Notiță eliminată",
+        "message": "Notița a fost eliminată cu succes"
+      },
+      "not_removed": {
+        "title": "Notița nu a fost eliminată",
+        "message": "Notița nu a putut fi eliminată"
+      }
+    },
+    "open_button": "Deschide panoul de navigare",
+    "close_button": "Închide panoul de navigare",
+    "outline_floating_button": "Deschide conturul"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Mută",
+        "loading": "Se mută"
+      },
+      "cannot_move_to_teamspace": "Paginile private și partajate nu pot fi mutate într-un spațiu de echipă.",
+      "placeholders": {
+        "workspace_to_all": "Caută proiecte și spații de echipă",
+        "workspace_to_project": "Caută proiecte",
+        "project_to_all": "Caută proiecte și spații de echipă",
+        "project_to_project": "Caută proiecte",
+        "project_to_all_with_wiki": "Caută colecții wiki, proiecte și spații de echipă",
+        "project_to_project_with_wiki": "Caută colecții wiki și proiecte"
+      },
+      "toasts": {
+        "success": {
+          "title": "Succes!",
+          "message": "Pagină mutată cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Pagina nu a putut fi mutată. Te rugăm să încerci din nou mai târziu."
+        },
+        "collection_error": {
+          "title": "Mutată în wiki",
+          "message": "Pagina a fost mutată în wiki, dar nu a putut fi adăugată la colecția selectată. Rămâne în General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Elimină din colecție",
+      "success_message": "Pagina a fost eliminată din colecție.",
+      "error_message": "Pagina nu a putut fi eliminată din colecție. Te rugăm să încerci din nou."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Limita de conținut a fost atinsă, iar sincronizarea live este dezactivată. Creează o pagină nouă sau folosește pagini imbricate pentru a continua sincronizarea."
+  }
+}
diff --git a/packages/i18n/src/locales/ro/power-k.json b/packages/i18n/src/locales/ro/power-k.json
new file mode 100644
index 0000000..eca4f24
--- /dev/null
+++ b/packages/i18n/src/locales/ro/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Șterge în masă activitățile"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Acțiuni activitate",
+        "indicator": "Activitate",
+        "change_state": "Schimbă starea",
+        "change_priority": "Schimbă prioritatea",
+        "change_assignees": "Atribuie lui",
+        "assign_to_me": "Atribuie-mi mie",
+        "unassign_from_me": "Dezatribuie de la mine",
+        "change_estimate": "Schimbă estimarea",
+        "add_to_cycle": "Adaugă la ciclu",
+        "add_to_modules": "Adaugă la module",
+        "add_labels": "Adaugă etichete",
+        "subscribe": "Abonează-te la notificări",
+        "unsubscribe": "Dezabonează-te de la notificări",
+        "delete": "Șterge",
+        "copy_id": "Copiază ID",
+        "copy_id_toast_success": "ID-ul activității a fost copiat în clipboard.",
+        "copy_id_toast_error": "A apărut o eroare la copierea ID-ului activității în clipboard.",
+        "copy_title": "Copiază titlul",
+        "copy_title_toast_success": "Titlul activității a fost copiat în clipboard.",
+        "copy_title_toast_error": "A apărut o eroare la copierea titlului activității în clipboard.",
+        "copy_url": "Copiază URL",
+        "copy_url_toast_success": "URL-ul activității a fost copiat în clipboard.",
+        "copy_url_toast_error": "A apărut o eroare la copierea URL-ului activității în clipboard."
+      },
+      "cycle": {
+        "title": "Acțiuni ciclu",
+        "indicator": "Ciclu",
+        "add_to_favorites": "Adaugă la favorite",
+        "remove_from_favorites": "Elimină din favorite",
+        "copy_url": "Copiază URL",
+        "copy_url_toast_success": "URL-ul ciclului a fost copiat în clipboard.",
+        "copy_url_toast_error": "A apărut o eroare la copierea URL-ului ciclului în clipboard."
+      },
+      "module": {
+        "title": "Acțiuni modul",
+        "indicator": "Modul",
+        "add_remove_members": "Adaugă/elimină membri",
+        "change_status": "Schimbă statusul",
+        "add_to_favorites": "Adaugă la favorite",
+        "remove_from_favorites": "Elimină din favorite",
+        "copy_url": "Copiază URL",
+        "copy_url_toast_success": "URL-ul modulului a fost copiat în clipboard.",
+        "copy_url_toast_error": "A apărut o eroare la copierea URL-ului modulului în clipboard."
+      },
+      "page": {
+        "title": "Acțiuni pagină",
+        "indicator": "Pagină",
+        "lock": "Blochează",
+        "unlock": "Deblochează",
+        "make_private": "Fă privată",
+        "make_public": "Fă publică",
+        "archive": "Arhivează",
+        "restore": "Restaurează",
+        "add_to_favorites": "Adaugă la favorite",
+        "remove_from_favorites": "Elimină din favorite",
+        "copy_url": "Copiază URL",
+        "copy_url_toast_success": "URL-ul paginii a fost copiat în clipboard.",
+        "copy_url_toast_error": "A apărut o eroare la copierea URL-ului paginii în clipboard."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Activitate nouă",
+      "create_page": "Pagină nouă",
+      "create_view": "Perspectivă nouă",
+      "create_cycle": "Ciclu nou",
+      "create_module": "Modul nou",
+      "create_project": "Proiect nou",
+      "create_workspace": "Spațiu de lucru nou",
+      "create_project_automation": "Automatizare nouă"
+    },
+    "navigation_actions": {
+      "open_workspace": "Deschide un spațiu de lucru",
+      "nav_home": "Mergi la acasă",
+      "nav_inbox": "Mergi la căsuța de mesaje",
+      "nav_your_work": "Mergi la munca ta",
+      "nav_account_settings": "Mergi la setările contului",
+      "open_project": "Deschide un proiect",
+      "nav_projects_list": "Mergi la lista de proiecte",
+      "nav_all_workspace_work_items": "Mergi la toate activitățile",
+      "nav_assigned_workspace_work_items": "Mergi la activitățile atribuite",
+      "nav_created_workspace_work_items": "Mergi la activitățile create",
+      "nav_subscribed_workspace_work_items": "Mergi la activitățile urmărite",
+      "nav_workspace_analytics": "Mergi la statisticile spațiului de lucru",
+      "nav_workspace_drafts": "Mergi la schițele spațiului de lucru",
+      "nav_workspace_archives": "Mergi la arhivele spațiului de lucru",
+      "open_workspace_setting": "Deschide o setare a spațiului de lucru",
+      "nav_workspace_settings": "Mergi la setările spațiului de lucru",
+      "nav_project_work_items": "Mergi la activități",
+      "open_project_cycle": "Deschide un ciclu",
+      "nav_project_cycles": "Mergi la cicluri",
+      "open_project_module": "Deschide un modul",
+      "nav_project_modules": "Mergi la module",
+      "open_project_view": "Deschide o perspectivă a proiectului",
+      "nav_project_views": "Mergi la perspectivele proiectului",
+      "nav_project_pages": "Mergi la documentație",
+      "nav_project_intake": "Mergi la cereri",
+      "nav_project_archives": "Mergi la arhivele proiectului",
+      "open_project_setting": "Deschide o setare a proiectului",
+      "nav_project_settings": "Mergi la setările proiectului",
+      "nav_workspace_active_cycle": "Mergi la toate ciclurile active",
+      "nav_project_overview": "Mergi la prezentarea generală a proiectului"
+    },
+    "account_actions": {
+      "sign_out": "Deconectează-te",
+      "workspace_invites": "Invitații la spațiul de lucru"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Comută bara laterală a aplicației",
+      "copy_current_page_url": "Copiază URL-ul paginii curente",
+      "copy_current_page_url_toast_success": "URL-ul paginii curente a fost copiat în clipboard.",
+      "copy_current_page_url_toast_error": "A apărut o eroare la copierea URL-ului paginii curente în clipboard.",
+      "focus_top_nav_search": "Focalizează câmpul de căutare"
+    },
+    "preferences_actions": {
+      "update_theme": "Schimbă tema interfeței",
+      "update_timezone": "Schimbă fusul orar",
+      "update_start_of_week": "Schimbă prima zi a săptămânii",
+      "update_language": "Schimbă limba interfeței",
+      "toast": {
+        "theme": {
+          "success": "Tema a fost actualizată cu succes.",
+          "error": "Actualizarea temei a eșuat. Te rugăm să încerci din nou."
+        },
+        "timezone": {
+          "success": "Fusul orar a fost actualizat cu succes.",
+          "error": "Actualizarea fusului orar a eșuat. Te rugăm să încerci din nou."
+        },
+        "generic": {
+          "success": "Preferințele au fost actualizate cu succes.",
+          "error": "Actualizarea preferințelor a eșuat. Te rugăm să încerci din nou."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Deschide scurtăturile de tastatură",
+      "open_plane_documentation": "Deschide documentația Plane",
+      "join_forum": "Alătură-te forumului nostru",
+      "report_bug": "Raportează o eroare",
+      "chat_with_us": "Discută cu noi"
+    },
+    "page_placeholders": {
+      "default": "Tastează o comandă sau caută",
+      "open_workspace": "Deschide un spațiu de lucru",
+      "open_project": "Deschide un proiect",
+      "open_workspace_setting": "Deschide o setare a spațiului de lucru",
+      "open_project_cycle": "Deschide un ciclu",
+      "open_project_module": "Deschide un modul",
+      "open_project_view": "Deschide o perspectivă a proiectului",
+      "open_project_setting": "Deschide o setare a proiectului",
+      "update_work_item_state": "Schimbă starea",
+      "update_work_item_priority": "Schimbă prioritatea",
+      "update_work_item_assignee": "Atribuie lui",
+      "update_work_item_estimate": "Schimbă estimarea",
+      "update_work_item_cycle": "Adaugă la ciclu",
+      "update_work_item_module": "Adaugă la module",
+      "update_work_item_labels": "Adaugă etichete",
+      "update_module_member": "Schimbă membrii",
+      "update_module_status": "Schimbă statusul",
+      "update_theme": "Schimbă tema",
+      "update_timezone": "Schimbă fusul orar",
+      "update_start_of_week": "Schimbă prima zi a săptămânii",
+      "update_language": "Schimbă limba"
+    },
+    "search_menu": {
+      "no_results": "Niciun rezultat găsit",
+      "clear_search": "Șterge căutarea",
+      "go_to_advanced_search": "Mergi la căutarea avansată"
+    },
+    "footer": {
+      "workspace_level": "La nivel de spațiu de lucru"
+    },
+    "group_titles": {
+      "actions": "Acțiuni",
+      "contextual": "Contextual",
+      "navigation": "Navigare",
+      "create": "Creează",
+      "general": "General",
+      "settings": "Setări",
+      "account": "Cont",
+      "miscellaneous": "Diverse",
+      "preferences": "Preferințe",
+      "help": "Ajutor"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/project-settings.json b/packages/i18n/src/locales/ro/project-settings.json
new file mode 100644
index 0000000..8472198
--- /dev/null
+++ b/packages/i18n/src/locales/ro/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Introdu ID-ul proiectului",
+      "please_select_a_timezone": "Te rugăm să selectezi un fus orar",
+      "archive_project": {
+        "title": "Arhivează proiectul",
+        "description": "Arhivarea unui proiect îl va elimina din navigarea laterală, dar vei putea accesa proiectul din pagina ta de proiecte. Poți restaura sau șterge proiectul oricând dorești.",
+        "button": "Arhivează proiectul"
+      },
+      "delete_project": {
+        "title": "Șterge proiectul",
+        "description": "La ștergerea unui proiect, toate datele și resursele din cadrul proiectului vor fi eliminate definitiv și nu vor putea fi recuperate.",
+        "button": "Șterge proiectul meu"
+      },
+      "toast": {
+        "success": "Proiect actualizat cu succes",
+        "error": "Proiectul nu a putut fi actualizat. Te rugăm să încerci din nou."
+      }
+    },
+    "members": {
+      "label": "Membri",
+      "project_lead": "Lider de proiect",
+      "project_lead_description": "Selectați liderul proiectului.",
+      "default_assignee": "Persoană atribuită implicit",
+      "default_assignee_description": "Selectați persoana implicită atribuită proiectului.",
+      "project_subscribers": "Abonații proiectului",
+      "project_subscribers_description": "Selectați membrii care vor primi notificări pentru acest proiect.",
+      "guest_super_permissions": {
+        "title": "Acordă acces la perspectivă pentru toți utilizatorii de tip Invitat:",
+        "sub_heading": "Aceasta va permite utilizatorilor din categoria Invitați să vadă toate activitățile din proiect."
+      },
+      "invite_members": {
+        "title": "Invită membri",
+        "sub_heading": "Invită membri să lucreze la proiectul tău.",
+        "select_co_worker": "Selectează colegul de echipă"
+      }
+    },
+    "states": {
+      "heading": "Stări",
+      "description": "Definește și personalizează stările fluxului de lucru pentru a urmări progresul activităților tale.",
+      "describe_this_state_for_your_members": "Descrie această stare pentru membrii tăi.",
+      "empty_state": {
+        "title": "Nicio stare disponibilă pentru grupul {groupKey}",
+        "description": "Te rog să creezi o stare nouă"
+      }
+    },
+    "labels": {
+      "heading": "Etichete",
+      "description": "Creează etichete personalizate pentru a categoriza și organiza activitățile tale",
+      "label_title": "Titlu etichetă",
+      "label_title_is_required": "Titlul etichetei este obligatoriu",
+      "label_max_char": "Numele etichetei nu trebuie să depășească 255 de caractere",
+      "toast": {
+        "error": "Eroare la actualizarea etichetei"
+      }
+    },
+    "estimates": {
+      "heading": "Estimări",
+      "description": "Te ajută să comunici complexitatea și volumul de muncă al echipei.",
+      "label": "Estimări",
+      "title": "Activează estimările pentru proiectul meu",
+      "enable_description": "Te ajută să comunici complexitatea și volumul de muncă al echipei.",
+      "no_estimate": "Fără estimare",
+      "new": "Noul sistem de estimare",
+      "create": {
+        "custom": "Personalizat",
+        "start_from_scratch": "Începe de la zero",
+        "choose_template": "Alege un șablon",
+        "choose_estimate_system": "Alege un sistem de estimare",
+        "enter_estimate_point": "Introdu estimarea",
+        "step": "Pasul {step} de {total}",
+        "label": "Creează estimare"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Estimare creată",
+            "message": "Estimarea a fost creată cu succes"
+          },
+          "error": {
+            "title": "Crearea estimării a eșuat",
+            "message": "Nu am putut crea noua estimare, te rugăm să încerci din nou."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Estimare modificată",
+            "message": "Estimarea a fost actualizată în proiectul tău."
+          },
+          "error": {
+            "title": "Modificarea estimării a eșuat",
+            "message": "Nu am putut modifica estimarea, te rugăm să încerci din nou"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Succes!",
+            "message": "Estimările au fost activate."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Succes!",
+            "message": "Estimările au fost dezactivate."
+          },
+          "error": {
+            "title": "Eroare!",
+            "message": "Estimarea nu a putut fi dezactivată. Te rugăm să încerci din nou"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Estimări reordonate",
+            "message": "Estimările au fost reordonate în proiectul tău."
+          },
+          "error": {
+            "title": "Reordonarea estimărilor a eșuat",
+            "message": "Nu am putut reordona estimările, te rugăm să încerci din nou"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Sistem de estimări creat",
+            "message": "Creat și activat cu succes"
+          },
+          "error": {
+            "title": "Eroare",
+            "message": "Ceva a mers greșit"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Estimarea trebuie să fie mai mare decât 0.",
+        "unable_to_process": "Nu putem procesa cererea ta, te rugăm să încerci din nou.",
+        "numeric": "Estimarea trebuie să fie o valoare numerică.",
+        "character": "Estimarea trebuie să fie o valoare de tip caracter.",
+        "empty": "Valoarea estimării nu poate fi goală.",
+        "already_exists": "Valoarea estimării există deja.",
+        "unsaved_changes": "Ai modificări nesalvate, te rugăm să le salvezi înainte de a finaliza",
+        "remove_empty": "Estimarea nu poate fi goală. Introdu o valoare în fiecare câmp sau elimină câmpurile pentru care nu ai valori.",
+        "fill": "Te rugăm să completezi acest câmp de estimare",
+        "repeat": "Valoarea estimării nu poate fi repetată"
+      },
+      "systems": {
+        "points": {
+          "label": "Puncte",
+          "fibonacci": "Fibonacci",
+          "linear": "Linear",
+          "squares": "Pătrate",
+          "custom": "Personalizat"
+        },
+        "categories": {
+          "label": "Categorii",
+          "t_shirt_sizes": "Mărimi tricou",
+          "easy_to_hard": "De la ușor la greu",
+          "custom": "Personalizat"
+        },
+        "time": {
+          "label": "Timp",
+          "hours": "Ore"
+        }
+      },
+      "edit": {
+        "title": "Editează sistemul de estimări",
+        "add_or_update": {
+          "title": "Adaugă, actualizează sau elimină estimări",
+          "description": "Gestionează sistemul curent prin adăugarea, actualizarea sau eliminarea punctelor sau categoriilor."
+        },
+        "switch": {
+          "title": "Schimbă tipul de estimare",
+          "description": "Convertește sistemul tău de puncte în sistem de categorii și invers."
+        }
+      },
+      "switch": "Schimbă sistemul de estimări",
+      "current": "Sistemul de estimări curent",
+      "select": "Selectează un sistem de estimări"
+    },
+    "automations": {
+      "label": "Automatizări",
+      "heading": "Automatizări",
+      "description": "Configurează acțiuni automate pentru a-ți eficientiza fluxul de lucru al proiectului și a reduce sarcinile manuale.",
+      "auto-archive": {
+        "title": "Auto-arhivează activitățile finalizate",
+        "description": "Plane va arhiva automat activitățile care au fost finalizate sau anulate.",
+        "duration": "Auto-arhivează activitățile finalizate de"
+      },
+      "auto-close": {
+        "title": "Închide automat activitățile",
+        "description": "Plane va închide automat activitățile care nu au fost finalizate sau anulate.",
+        "duration": "Închide automat activitățile inactive de",
+        "auto_close_status": "Stare închidere automată"
+      },
+      "auto-remind": {
+        "title": "Avertismente automate",
+        "description": "Plane va trimite avertizări automate prin e-mail și notificări în aplicație pentru a menține echipa pe calea termenelor.",
+        "duration": "Trimite avertizare înainte"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Nicio etichetă încă",
+        "description": "Creează etichete pentru a organiza și filtra activitățile din proiect."
+      },
+      "estimates": {
+        "title": "Nicio estimare configurată",
+        "description": "Creează un set de estimări pentru a comunica volumul de muncă pentru fiecare activitate.",
+        "primary_button": "Adaugă sistem de estimare"
+      },
+      "integrations": {
+        "title": "Nicio integrare configurată",
+        "description": "Configurează GitHub și alte integrări pentru a sincroniza elementele de lucru ale proiectului tău."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Activează fluxurile de lucru",
+        "description": "Setează fluxuri de lucru pentru a controla mișcarea activităților",
+        "no_states_tooltip": "Nu există stări adăugate în fluxul de lucru.",
+        "no_work_item_types_tooltip": "Nu există tipuri de activități adăugate în fluxul de lucru.",
+        "no_states_or_work_item_types_tooltip": "Nu există stări sau tipuri de activități adăugate în fluxul de lucru.",
+        "toast": {
+          "loading": {
+            "enabling": "Se activează fluxurile de lucru",
+            "disabling": "Se dezactivează fluxurile de lucru"
+          },
+          "success": {
+            "title": "Succes!",
+            "message": "Fluxurile de lucru au fost activate cu succes."
+          },
+          "error": {
+            "title": "Eroare!",
+            "message": "Activarea fluxurilor de lucru a eșuat. Te rugăm să încerci din nou."
+          }
+        }
+      },
+      "heading": "Fluxuri de lucru",
+      "description": "Automatizează tranzițiile activităților și setează reguli pentru a controla modul în care sarcinile se deplasează prin fluxul proiectului tău.",
+      "add_button": "Adaugă flux de lucru nou",
+      "search": "Caută fluxuri de lucru",
+      "detail": {
+        "define": "Definește fluxul de lucru",
+        "add_states": "Adaugă stări",
+        "unmapped_states": {
+          "title": "Stări nemapate detectate",
+          "description": "Unele activități pentru tipurile selectate sunt în prezent în stări care nu există în acest flux de lucru.",
+          "note": "Dacă activezi acest flux de lucru, aceste elemente se vor muta automat în starea inițială a acestui flux de lucru.",
+          "label": "Stări lipsă",
+          "tooltip": "Unele activități sunt în stări care nu sunt mapate la acest flux de lucru. Deschide fluxul de lucru pentru a revizui."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Toate stările sunt utilizate",
+          "description": "Toate stările definite pentru acest proiect sunt deja prezente în fluxul tău de lucru curent."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Acest flux de lucru se aplică oricărui tip de activitate care nu este atribuit unui flux de lucru."
+      },
+      "create": {
+        "heading": "Creează flux de lucru nou",
+        "name": {
+          "placeholder": "Adaugă un nume unic",
+          "validation": {
+            "max_length": "Numele trebuie să aibă mai puțin de 255 de caractere",
+            "required": "Numele este obligatoriu",
+            "invalid": "Numele poate conține doar litere, cifre, spații, cratime și apostrofe"
+          }
+        },
+        "description": {
+          "placeholder": "Adaugă o scurtă descriere",
+          "validation": {
+            "invalid": "Descrierea poate conține doar litere, cifre, spații, cratime și apostrofe"
+          }
+        },
+        "work_item_type": {
+          "label": "Tip de activitate"
+        },
+        "success": {
+          "title": "Succes!",
+          "message": "Flux de lucru creat cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Crearea fluxului de lucru a eșuat. Te rugăm să încerci din nou."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Succes!",
+          "message": "Flux de lucru actualizat cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Actualizarea fluxului de lucru a eșuat. Te rugăm să încerci din nou."
+        }
+      },
+      "delete": {
+        "loading": "Se șterge fluxul de lucru",
+        "success": {
+          "title": "Succes!",
+          "message": "Flux de lucru șters cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Ștergerea fluxului de lucru a eșuat. Te rugăm să încerci din nou."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Succes!",
+          "message": "Stări adăugate cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Adăugarea stărilor a eșuat. Te rugăm să încerci din nou."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Tipuri de activități",
+      "description": "Creează și personalizează diferite tipuri de activități cu proprietăți unice"
+    },
+    "features": {
+      "cycles": {
+        "title": "Cicluri",
+        "short_title": "Cicluri",
+        "description": "Programați munca în perioade flexibile care se adaptează ritmului și ritmului unic al acestui proiect.",
+        "toggle_title": "Activați ciclurile",
+        "toggle_description": "Planificați munca în intervale de timp concentrate."
+      },
+      "modules": {
+        "title": "Module",
+        "short_title": "Module",
+        "description": "Organizați munca în subproiecte cu lideri și responsabili dedicați.",
+        "toggle_title": "Activați modulele",
+        "toggle_description": "Membrii proiectului vor putea crea și edita module."
+      },
+      "views": {
+        "title": "Vizualizări",
+        "short_title": "Vizualizări",
+        "description": "Salvați sortări personalizate, filtre și opțiuni de afișare sau partajați-le cu echipa dvs.",
+        "toggle_title": "Activați vizualizările",
+        "toggle_description": "Membrii proiectului vor putea crea și edita vizualizări."
+      },
+      "pages": {
+        "title": "Pagini",
+        "short_title": "Pagini",
+        "description": "Creați și editați conținut liber: note, documente, orice.",
+        "toggle_title": "Activați paginile",
+        "toggle_description": "Membrii proiectului vor putea crea și edita pagini."
+      },
+      "intake": {
+        "intake_responsibility": "Responsabilitate de primire",
+        "intake_sources": "Surse de primire",
+        "title": "Recepție",
+        "short_title": "Recepție",
+        "description": "Permiteți non-membrilor să partajeze erori, feedback și sugestii; fără a perturba fluxul de lucru.",
+        "toggle_title": "Activați recepția",
+        "toggle_description": "Permiteți membrilor proiectului să creeze solicitări de recepție în aplicație.",
+        "toggle_tooltip_on": "Solicitați administratorului proiectului să activeze.",
+        "toggle_tooltip_off": "Solicitați administratorului proiectului să dezactiveze.",
+        "notify_assignee": {
+          "title": "Notifică persoanele desemnate",
+          "description": "Pentru o nouă cerere de primire, persoanele desemnate implicit vor fi alertate prin notificări"
+        },
+        "in_app": {
+          "title": "În aplicație",
+          "description": "Primiți elemente de lucru noi de la membri și invitați în spațiul de lucru fără a perturba cele existente."
+        },
+        "email": {
+          "title": "E-mail",
+          "description": "Colectați elemente de lucru noi de la oricine trimite un e-mail la o adresă Plane.",
+          "fieldName": "ID e-mail"
+        },
+        "form": {
+          "title": "Formulare",
+          "description": "Permiteți persoanelor din afara spațiului de lucru să creeze elemente de lucru noi potențiale printr-un formular dedicat și sigur.",
+          "fieldName": "URL formular implicit",
+          "create_forms": "Creați formulare folosind tipuri de elemente de lucru",
+          "manage_forms": "Gestionați formularele",
+          "manage_forms_tooltip": "Solicitați administratorului spațiului de lucru să gestioneze.",
+          "create_form": "Creați formular",
+          "edit_form": "Editați detaliile formularului",
+          "form_title": "Titlul formularului",
+          "form_title_required": "Titlul formularului este obligatoriu",
+          "work_item_type": "Tip element de lucru",
+          "remove_property": "Eliminați proprietatea",
+          "select_properties": "Selectați proprietăți",
+          "search_placeholder": "Căutați proprietăți",
+          "toasts": {
+            "success_create": "Formularul de primire a fost creat cu succes",
+            "success_update": "Formularul de primire a fost actualizat cu succes",
+            "error_create": "Crearea formularului de primire a eșuat",
+            "error_update": "Actualizarea formularului de primire a eșuat"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Setarea persoanelor desemnate...",
+            "success": {
+              "title": "Succes!",
+              "message": "Persoanele desemnate au fost setate cu succes."
+            },
+            "error": {
+              "title": "Eroare!",
+              "message": "Ceva a mers greșit la setarea persoanelor desemnate. Vă rugăm să încercați din nou."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Urmărire timp",
+        "short_title": "Urmărire timp",
+        "description": "Înregistrați timpul petrecut pe elemente de lucru și proiecte.",
+        "toggle_title": "Activați urmărirea timpului",
+        "toggle_description": "Membrii proiectului vor putea înregistra timpul lucrat."
+      },
+      "milestones": {
+        "title": "Etape importante",
+        "short_title": "Etape importante",
+        "description": "Etapele importante oferă un strat pentru a alinia elementele de lucru către date comune de finalizare.",
+        "toggle_title": "Activați etapele importante",
+        "toggle_description": "Organizați elementele de lucru după termenele etapelor importante."
+      },
+      "toasts": {
+        "loading": "Se actualizează funcționalitatea proiectului...",
+        "success": "Funcționalitatea proiectului a fost actualizată cu succes.",
+        "error": "Ceva a mers greșit la actualizarea funcționalității proiectului. Vă rugăm să încercați din nou."
+      }
+    },
+    "project_updates": {
+      "heading": "Actualizări proiect",
+      "description": "Urmărire consolidată și monitorizare a progresului pentru acest proiect"
+    },
+    "templates": {
+      "heading": "Șabloane",
+      "description": "Economisește 80% din timpul petrecut creând proiecte, activități și pagini atunci când folosești șabloane."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Programare automată a ciclurilor",
+        "description": "Mențineți ciclurile în mișcare fără configurare manuală.",
+        "tooltip": "Creați automat cicluri noi pe baza programului ales.",
+        "edit_button": "Editează",
+        "form": {
+          "cycle_title": {
+            "label": "Titlul ciclului",
+            "placeholder": "Titlu",
+            "tooltip": "Titlul va fi completat cu numere pentru ciclurile următoare. De exemplu: Design - 1/2/3",
+            "validation": {
+              "required": "Titlul ciclului este obligatoriu",
+              "max_length": "Titlul nu trebuie să depășească 255 de caractere"
+            }
+          },
+          "cycle_duration": {
+            "label": "Durata ciclului",
+            "unit": "Săptămâni",
+            "validation": {
+              "required": "Durata ciclului este obligatorie",
+              "min": "Durata ciclului trebuie să fie de cel puțin 1 săptămână",
+              "max": "Durata ciclului nu poate depăși 30 de săptămâni",
+              "positive": "Durata ciclului trebuie să fie pozitivă"
+            }
+          },
+          "cooldown_period": {
+            "label": "Perioadă de răcire",
+            "unit": "zile",
+            "tooltip": "Pauză între cicluri înainte de începerea următorului.",
+            "validation": {
+              "required": "Perioada de răcire este obligatorie",
+              "negative": "Perioada de răcire nu poate fi negativă"
+            }
+          },
+          "start_date": {
+            "label": "Ziua de început a ciclului",
+            "validation": {
+              "required": "Data de început este obligatorie",
+              "past": "Data de început nu poate fi în trecut"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Numărul de cicluri viitoare",
+            "validation": {
+              "required": "Numărul de cicluri este obligatoriu",
+              "min": "Este necesar cel puțin 1 ciclu",
+              "max": "Nu se pot programa mai mult de 3 cicluri"
+            }
+          },
+          "auto_rollover": {
+            "label": "Transfer automat al elementelor de lucru",
+            "tooltip": "În ziua în care se completează un ciclu, mutați toate elementele de lucru nefinalizate în ciclul următor."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Se activează programarea automată a ciclurilor",
+            "loading_disable": "Se dezactivează programarea automată a ciclurilor",
+            "success": {
+              "title": "Succes!",
+              "message": "Programarea automată a ciclurilor a fost comutată cu succes."
+            },
+            "error": {
+              "title": "Eroare!",
+              "message": "Nu s-a putut comuta programarea automată a ciclurilor."
+            }
+          },
+          "save": {
+            "loading": "Se salvează configurația programării automate a ciclurilor",
+            "success": {
+              "title": "Succes!",
+              "message_create": "Configurația programării automate a ciclurilor a fost salvată cu succes.",
+              "message_update": "Configurația programării automate a ciclurilor a fost actualizată cu succes."
+            },
+            "error": {
+              "title": "Eroare!",
+              "message_create": "Nu s-a putut salva configurația programării automate a ciclurilor.",
+              "message_update": "Nu s-a putut actualiza configurația programării automate a ciclurilor."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/project.json b/packages/i18n/src/locales/ro/project.json
new file mode 100644
index 0000000..b50982c
--- /dev/null
+++ b/packages/i18n/src/locales/ro/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Creat la",
+      "updated_at": "Actualizat la",
+      "name": "Nume"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Adaugă ciclu",
+    "more_details": "Mai multe detalii",
+    "cycle": "Ciclu",
+    "update_cycle": "Actualizează ciclul",
+    "create_cycle": "Creează ciclu",
+    "no_matching_cycles": "Niciun ciclu găsit",
+    "remove_filters_to_see_all_cycles": "Elimină filtrele pentru a vedea toate ciclurile",
+    "remove_search_criteria_to_see_all_cycles": "Elimină criteriile de căutare pentru a vedea toate ciclurile",
+    "only_completed_cycles_can_be_archived": "Doar ciclurile finalizate pot fi arhivate",
+    "start_date": "Data de început",
+    "end_date": "Data de sfârșit",
+    "in_your_timezone": "În fusul tău orar",
+    "transfer_work_items": "Transferați {count} elemente de lucru",
+    "transfer": {
+      "no_cycles_available": "Nu există alte cicluri disponibile pentru a transfera elemente de lucru."
+    },
+    "date_range": "Interval de date",
+    "add_date": "Adaugă data",
+    "active_cycle": {
+      "label": "Ciclu activ",
+      "progress": "Progres",
+      "chart": "Ritmul de finalizare a activităților",
+      "priority_issue": "Activități prioritare",
+      "assignees": "Persoane atribuite",
+      "issue_burndown": "Grafic de finalizare a activităților",
+      "ideal": "Ideal",
+      "current": "Curent",
+      "labels": "Etichete",
+      "trailing": "Întârziat",
+      "leading": "Avansat"
+    },
+    "upcoming_cycle": {
+      "label": "Ciclu viitor"
+    },
+    "completed_cycle": {
+      "label": "Ciclu finalizat"
+    },
+    "status": {
+      "days_left": "Zile rămase",
+      "completed": "Finalizat",
+      "yet_to_start": "Nu a început",
+      "in_progress": "În desfășurare",
+      "draft": "Schiță"
+    },
+    "action": {
+      "restore": {
+        "title": "Restaurează ciclul",
+        "success": {
+          "title": "Ciclu restaurat",
+          "description": "Ciclul a fost restaurat."
+        },
+        "failed": {
+          "title": "Restaurarea ciclului a eșuat",
+          "description": "Ciclul nu a putut fi restaurat. Te rugăm să încerci din nou."
+        }
+      },
+      "favorite": {
+        "loading": "Se adaugă ciclul la favorite",
+        "success": {
+          "description": "Ciclul a fost adăugat la favorite.",
+          "title": "Succes!"
+        },
+        "failed": {
+          "description": "Nu s-a putut adăuga ciclul la favorite. Te rugăm să încerci din nou.",
+          "title": "Eroare!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Se elimină ciclul din favorite",
+        "success": {
+          "description": "Ciclul a fost eliminat din favorite.",
+          "title": "Succes!"
+        },
+        "failed": {
+          "description": "Nu s-a putut elimina ciclul din favorite. Te rugăm să încerci din nou.",
+          "title": "Eroare!"
+        }
+      },
+      "update": {
+        "loading": "Se actualizează ciclul",
+        "success": {
+          "description": "Ciclul a fost actualizat cu succes.",
+          "title": "Succes!"
+        },
+        "failed": {
+          "description": "Eroare la actualizarea ciclului. Te rugăm să încerci din nou.",
+          "title": "Eroare!"
+        },
+        "error": {
+          "already_exists": "Ai deja un ciclu în datele selectate. Dacă vrei să creezi o schiță, poți face asta eliminând ambele date."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Grupează și delimitează în timp munca ta în Cicluri.",
+        "description": "Împarte munca în intervale de timp, stabilește datele în funcție de termenul limită al proiectului și progresează vizibil ca echipă.",
+        "primary_button": {
+          "text": "Setează primul tău ciclu",
+          "comic": {
+            "title": "Ciclurile sunt intervale repetitive de timp.",
+            "description": "O iterație sau orice alt termen folosit pentru urmărirea săptămânală sau bilunară a muncii este un ciclu."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Nicio activitate adăugată în ciclu",
+        "description": "Adaugă sau creează activități pe care vrei să le implementezi în acest ciclu",
+        "primary_button": {
+          "text": "Creează o activitate nouă"
+        },
+        "secondary_button": {
+          "text": "Adaugă o activitate existentă"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Nicio activitate în ciclu",
+        "description": "Nu există activități în ciclu. Acestea au fost fie transferate, fie ascunse. Pentru a vedea activitățile ascunse, actualizează proprietățile de afișare."
+      },
+      "active": {
+        "title": "Niciun ciclu activ",
+        "description": "Un ciclu activ include orice perioadă care conține data de azi în intervalul său. Progresul și detaliile ciclului activ apar aici."
+      },
+      "archived": {
+        "title": "Niciun ciclu arhivat încă",
+        "description": "Pentru a păstra proiectul ordonat, arhivează ciclurile completate. Le vei găsi aici după arhivare."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Salvează perspective filtrate pentru proiectul tău. Creează câte ai nevoie",
+        "description": "Perspectivele sunt seturi de filtre salvate pe care le folosești frecvent sau la care vrei acces rapid. Toți colegii tăi dintr-un proiect pot vedea perspectivele tuturor și pot alege ce li se potrivește cel mai bine.",
+        "primary_button": {
+          "text": "Creează prima ta perspectivă",
+          "comic": {
+            "title": "Perspectivele funcționează pe baza proprietăților activităților.",
+            "description": "Poți crea o perspectivă de aici, cu oricâte proprietăți și filtre consideri necesare."
+          }
+        },
+        "filter": {
+          "title": "Nicio perspectivă potrivită",
+          "description": "Nicio perspectivă nu se potrivește criteriilor de căutare.\n Creează o nouă perspectivă în schimb."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Nicio activitate arhivată încă",
+        "description": "Manual sau prin automatizare, poți arhiva activitățile care sunt finalizate sau anulate. Găsește-le aici odată arhivate.",
+        "primary_button": {
+          "text": "Setează automatizare"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Nu s-au găsit activități care să corespundă filtrelor aplicate",
+        "secondary_button": {
+          "text": "Șterge toate filtrele"
+        }
+      },
+      "public": {
+        "title": "Nicio pagină publică încă",
+        "description": "Vezi paginile distribuite cu toată lumea din proiectul tău chiar aici.",
+        "primary_button": {
+          "text": "Creează prima ta pagină"
+        }
+      },
+      "archived": {
+        "title": "Nicio pagină arhivată încă",
+        "description": "Arhivează paginile care nu îți sunt pe radar. Accesează-le aici când ai nevoie."
+      },
+      "shared": {
+        "title": "Nicio pagină partajată încă",
+        "description": "Paginile pe care alții le-au partajat cu tine vor apărea aici."
+      }
+    },
+    "delete_view": {
+      "title": "Sunteți sigur că doriți să ștergeți această vizualizare?",
+      "content": "Dacă confirmați, toate opțiunile de sortare, filtrare și afișare + aspectul pe care l-ați ales pentru această vizualizare vor fi șterse permanent fără nicio modalitate de a le restaura."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Creează o activitate și atribuie-o cuiva, chiar și ție",
+        "description": "Gândește-te la activități ca la sarcini sau lucruri care trebuie făcute. O activitate și sub-activitățile sale sunt acțiuni care trebuie realizate într-un interval de timp de către membrii echipei tale. Echipa creează, atribuie și finalizează activități pentru a duce proiectul spre obiectivul său.",
+        "primary_button": {
+          "text": "Creează prima ta activitate",
+          "comic": {
+            "title": "Activitățile sunt elemente de bază în Plane.",
+            "description": "Reproiectarea interfeței Plane, modernizarea imaginii companiei sau lansarea noului sistem de injecție sunt exemple de activități care au, cel mai probabil, sub-activități."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Nicio activitate arhivată încă",
+        "description": "Manual sau automat, poți arhiva activitățile care sunt finalizate sau anulate. Le vei găsi aici după arhivare.",
+        "primary_button": {
+          "text": "Setează automatizarea"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Nicio activitate găsită conform filtrelor aplicate",
+        "secondary_button": {
+          "text": "Șterge toate filtrele"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Adaugă Modul",
+    "update_module": "Actualizează Modul",
+    "create_module": "Creează Modul",
+    "archive_module": "Arhivează Modul",
+    "restore_module": "Restaurează Modul",
+    "delete_module": "Șterge modulul",
+    "empty_state": {
+      "general": {
+        "title": "Mapează etapele proiectului în Module și urmărește munca agregată cu ușurință.",
+        "description": "Un grup de activități care aparțin unui părinte logic și ierarhic formează un modul. Gândește-te la module ca la un mod de a urmări munca în funcție de etapele proiectului. Au propriile perioade, termene limită și statistici pentru a-ți arăta cât de aproape sau departe ești de un reper.",
+        "primary_button": {
+          "text": "Construiește primul tău modul",
+          "comic": {
+            "title": "Modulele ajută la organizarea muncii pe niveluri ierarhice.",
+            "description": "Un modul pentru caroserie, un modul pentru șasiu sau un modul pentru depozit sunt exemple bune de astfel de grupare."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Nicio activitate în modul",
+        "description": "Creează sau adaugă activități pe care vrei să le finalizezi ca parte a acestui modul",
+        "primary_button": {
+          "text": "Creează activități noi"
+        },
+        "secondary_button": {
+          "text": "Adaugă o activitate existentă"
+        }
+      },
+      "archived": {
+        "title": "Niciun modul arhivat încă",
+        "description": "Pentru a păstra proiectul ordonat, arhivează modulele finalizate sau anulate. Le vei găsi aici după arhivare."
+      },
+      "sidebar": {
+        "in_active": "Acest modul nu este încă activ.",
+        "invalid_date": "Dată invalidă. Te rugăm să introduci o dată validă."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Arhivează modulul",
+      "archive_module_description": "Doar modulele finalizate sau anulate pot fi arhivate.",
+      "delete_module": "Șterge modulul"
+    },
+    "toast": {
+      "copy": {
+        "success": "Link-ul modulului a fost copiat în memoria temporară"
+      },
+      "delete": {
+        "success": "Modulul a fost șters cu succes",
+        "error": "Ștergerea modulului a eșuat"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Scrie o notiță, un document sau o bază completă de cunoștințe. Folosește-l pe Galileo, Inteligența Artificială a Plane, ca să te ajute să începi",
+        "description": "Documentația e spațiul în care îți notezi gândurile în Plane. Ia notițe de la ședințe, formatează-le ușor, inserează activități, așază-le folosind o bibliotecă de componente și păstrează-le pe toate în contextul proiectului tău. Pentru a redacta rapid orice document, apelează la Galileo, Inteligența Artificială a Plane, cu un shortcut sau un click.",
+        "primary_button": {
+          "text": "Creează primul tău document"
+        }
+      },
+      "private": {
+        "title": "Niciun document privată încă",
+        "description": "Păstrează-ți gândurile private aici. Când ești gata să le împarți, echipa e la un click distanță.",
+        "primary_button": {
+          "text": "Creează primul tău document"
+        }
+      },
+      "public": {
+        "title": "Niciun document public încă",
+        "description": "Vezi aici documentele distribuite cu toată echipa ta din proiect.",
+        "primary_button": {
+          "text": "Creează primul tău document"
+        }
+      },
+      "archived": {
+        "title": "Niciun document arhivat încă",
+        "description": "Arhivează documentele de care nu mai ai nevoie. Le poți accesa de aici oricând."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Funcția Cereri nu este activată pentru proiect.",
+        "description": "Funcția Cereri te ajută să gestionezi cererile care vin în proiectul tău și să le adaugi ca activități în fluxul tău. Activează Cereri din setările proiectului pentru a gestiona cererile.",
+        "primary_button": {
+          "text": "Gestionează funcțiile"
+        }
+      },
+      "cycle": {
+        "title": "Funcția Cicluri nu este activată pentru acest proiect.",
+        "description": "Împarte munca în intervale de timp, pleacă de la termenul limită al proiectului pentru a seta date și progresează vizibil ca echipă. Activează funcția de cicluri pentru a începe să o folosești.",
+        "primary_button": {
+          "text": "Gestionează funcțiile"
+        }
+      },
+      "module": {
+        "title": "Funcția Module nu este activată pentru proiect.",
+        "description": "Modulele sunt componentele de bază ale proiectului tău. Activează modulele din setările proiectului pentru a începe să le folosești.",
+        "primary_button": {
+          "text": "Gestionează funcțiile"
+        }
+      },
+      "page": {
+        "title": "Funcția Documentație nu este activată pentru proiect.",
+        "description": "Paginile sunt componentele de bază ale proiectului tău. Activează paginile din setările proiectului pentru a începe să le folosești.",
+        "primary_button": {
+          "text": "Gestionează funcțiile"
+        }
+      },
+      "view": {
+        "title": "Funcția Perspective nu este activată pentru proiect.",
+        "description": "Perspectivele sunt componentele de bază ale proiectului tău. Activează perspectivele din setările proiectului pentru a începe să le folosești.",
+        "primary_button": {
+          "text": "Gestionează funcțiile"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Restante",
+      "planned": "Planificate",
+      "in_progress": "În desfășurare",
+      "paused": "În pauză",
+      "completed": "Finalizat",
+      "cancelled": "Anulat"
+    },
+    "layout": {
+      "list": "Aspect listă",
+      "board": "Aspect galerie",
+      "timeline": "Aspect cronologic"
+    },
+    "order_by": {
+      "name": "Nume",
+      "progress": "Progres",
+      "issues": "Număr de activități",
+      "due_date": "Termen limită",
+      "created_at": "Dată creare",
+      "manual": "Manual"
+    }
+  },
+  "project_members": {
+    "full_name": "Nume complet",
+    "display_name": "Nume afișat",
+    "email": "Email",
+    "joining_date": "Data înscrierii",
+    "role": "Rol"
+  },
+  "project": {
+    "members_import": {
+      "title": "Importă membri din CSV",
+      "description": "Încărcați un CSV cu coloanele: Email și Rol (5=Invitat, 15=Membru, 20=Administrator). Utilizatorii trebuie să fie deja membri ai spațiului de lucru.",
+      "download_sample": "Descărcați CSV exemplu",
+      "dropzone": {
+        "active": "Plasați fișierul CSV aici",
+        "inactive": "Trageți și plasați sau faceți clic pentru a încărca",
+        "file_type": "Sunt acceptate doar fișiere .csv"
+      },
+      "buttons": {
+        "cancel": "Anulare",
+        "import": "Importă",
+        "try_again": "Încearcă din nou",
+        "close": "Închide",
+        "done": "Gata"
+      },
+      "progress": {
+        "uploading": "Se încarcă...",
+        "importing": "Se importă..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Import finalizat"
+        },
+        "message": {
+          "success": "{count} membr{plural} importat{plural} cu succes în proiect.",
+          "no_imports": "Nu au fost importați membri noi din fișierul CSV."
+        },
+        "stats": {
+          "added": "Adăugate",
+          "reactivated": "Reactivați",
+          "already_members": "Deja membri",
+          "skipped": "Omise"
+        },
+        "download_errors": "Descarcă detaliile omise"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Fișier invalid",
+          "message": "Sunt acceptate doar fișiere CSV."
+        },
+        "import_failed": {
+          "title": "Import eșuat",
+          "message": "Ceva nu a funcționat."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/settings.json b/packages/i18n/src/locales/ro/settings.json
new file mode 100644
index 0000000..dee69bd
--- /dev/null
+++ b/packages/i18n/src/locales/ro/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Schimbă e-mailul",
+        "description": "Introduceți o nouă adresă de e-mail pentru a primi un link de verificare.",
+        "toasts": {
+          "success_title": "Succes!",
+          "success_message": "E-mail actualizat cu succes. Conectați-vă din nou."
+        },
+        "form": {
+          "email": {
+            "label": "E-mail nou",
+            "placeholder": "Introduceți e-mailul",
+            "errors": {
+              "required": "E-mailul este obligatoriu",
+              "invalid": "E-mailul este invalid",
+              "exists": "E-mailul există deja. Folosiți altul.",
+              "validation_failed": "Validarea e-mailului a eșuat. Încercați din nou."
+            }
+          },
+          "code": {
+            "label": "Cod unic",
+            "placeholder": "123456",
+            "helper_text": "Codul de verificare a fost trimis la noul e-mail.",
+            "errors": {
+              "required": "Codul unic este obligatoriu",
+              "invalid": "Cod de verificare invalid. Încercați din nou."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Continuă",
+          "confirm": "Confirmă",
+          "cancel": "Anulează"
+        },
+        "states": {
+          "sending": "Se trimite…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Preferințe",
+      "description": "Personalizează experiența aplicației așa cum lucrezi"
+    },
+    "notifications": {
+      "heading": "Notificări prin e-mail",
+      "description": "Rămâi la curent cu activitățile la care ești abonat. Activează această opțiune pentru a primi notificări.",
+      "select_default_view": "Selectează vizualizarea implicită",
+      "compact": "Compact",
+      "full": "Ecran complet"
+    },
+    "security": {
+      "heading": "Securitate"
+    },
+    "api_tokens": {
+      "title": "Tokenuri de acces personale",
+      "description": "Generează tokenuri API securizate pentru a integra datele tale cu sisteme și aplicații externe."
+    },
+    "activity": {
+      "heading": "Activitate",
+      "description": "Urmărește acțiunile și modificările tale recente din toate proiectele și activitățile."
+    },
+    "connections": {
+      "title": "Conexiuni",
+      "heading": "Conexiuni",
+      "description": "Gestionează setările conexiunilor spațiului tău de lucru."
+    }
+  },
+  "profile": {
+    "label": "Profil",
+    "page_label": "Munca ta",
+    "work": "Muncă",
+    "details": {
+      "joined_on": "S-a înscris la",
+      "time_zone": "Fus orar"
+    },
+    "stats": {
+      "workload": "Volum de muncă",
+      "overview": "Prezentare generală",
+      "created": "Activități create",
+      "assigned": "Activități atribuite",
+      "subscribed": "Activități urmărite",
+      "state_distribution": {
+        "title": "Activități după stare",
+        "empty": "Creează activități pentru a le vedea distribuite pe stări în grafic, pentru o analiză mai bună."
+      },
+      "priority_distribution": {
+        "title": "Activități după prioritate",
+        "empty": "Creează activități pentru a le vedea distribuite pe priorități în grafic, pentru o analiză mai bună."
+      },
+      "recent_activity": {
+        "title": "Activitate recentă",
+        "empty": "Nu am găsit date. Te rugăm să verifici activitățile tale.",
+        "button": "Descarcă activitatea de azi",
+        "button_loading": "Se descarcă"
+      }
+    },
+    "actions": {
+      "profile": "Profil",
+      "security": "Securitate",
+      "activity": "Activitate",
+      "preferences": "Preferințe",
+      "notifications": "Notificări",
+      "api-tokens": "Tokenuri de acces personale",
+      "connections": "Conexiuni"
+    },
+    "tabs": {
+      "summary": "Sumar",
+      "assigned": "Atribuite",
+      "created": "Create",
+      "subscribed": "Urmărite",
+      "activity": "Activitate"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Nicio activitate încă",
+        "description": "Începe prin a crea o nouă activitate! Adaugă detalii și proprietăți. Explorează mai mult în Plane pentru a-ți vedea activitatea."
+      },
+      "assigned": {
+        "title": "Nicio activitate atribuită ție",
+        "description": "Elementele de lucru care ți-au fost atribuite pot fi urmărite de aici."
+      },
+      "created": {
+        "title": "Nicio activitate creată",
+        "description": "Toate activitățile create de tine vor apărea aici. Le poți urmări direct din această pagină."
+      },
+      "subscribed": {
+        "title": "Nicio activitate urmărită",
+        "description": "Abonează-te la activitățile care te interesează și urmărește-le pe toate aici."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Preferință sistem"
+      },
+      "light": {
+        "label": "Luminos"
+      },
+      "dark": {
+        "label": "Întunecat"
+      },
+      "light_contrast": {
+        "label": "Luminos cu contrast ridicat"
+      },
+      "dark_contrast": {
+        "label": "Întunecat cu contrast ridicat"
+      },
+      "custom": {
+        "label": "Temă personalizată"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/stickies.json b/packages/i18n/src/locales/ro/stickies.json
new file mode 100644
index 0000000..dda52ad
--- /dev/null
+++ b/packages/i18n/src/locales/ro/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Notițele tale",
+    "placeholder": "click pentru a scrie aici",
+    "all": "Toate notițele",
+    "no-data": "Notează o idee, surprinde un moment de inspirație sau înregistrează o idee. Adaugă o notiță pentru a începe.",
+    "add": "Adaugă notiță",
+    "search_placeholder": "Caută după titlu",
+    "delete": "Șterge notița",
+    "delete_confirmation": "Ești sigur că vrei să ștergi această notiță?",
+    "empty_state": {
+      "simple": "Notează o idee, surprinde un moment de inspirație sau înregistrează o idee. Adaugă o notiță pentru a începe.",
+      "general": {
+        "title": "Notițele sunt observații rapide și lucruri de făcut pe care le notezi din mers.",
+        "description": "Surprinde-ți gândurile și ideile fără efort, creând notițe la care poți avea acces oricând și de oriunde.",
+        "primary_button": {
+          "text": "Adaugă notiță"
+        }
+      },
+      "search": {
+        "title": "Nu se potrivește cu nicio notiță existentă.",
+        "description": "Încearcă un alt termen sau anunță-ne\n dacă ești sigur că ai căutat corect.",
+        "primary_button": {
+          "text": "Adaugă notiță"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Numele notiței nu poate depăși 100 de caractere.",
+        "already_exists": "Există deja o notiță fără descriere"
+      },
+      "created": {
+        "title": "Notiță creată",
+        "message": "Notița a fost creată cu succes"
+      },
+      "not_created": {
+        "title": "Notiță necreată",
+        "message": "Notița nu a putut fi creată"
+      },
+      "updated": {
+        "title": "Notiță actualizată",
+        "message": "Notița a fost actualizată cu succes"
+      },
+      "not_updated": {
+        "title": "Notiță neactualizată",
+        "message": "Notița nu a putut fi actualizată"
+      },
+      "removed": {
+        "title": "Notiță ștearsă",
+        "message": "Notița a fost ștearsă cu succes"
+      },
+      "not_removed": {
+        "title": "Notiță neștearsă",
+        "message": "Notița nu a putut fi ștearsă"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/template.json b/packages/i18n/src/locales/ro/template.json
new file mode 100644
index 0000000..a80ef4f
--- /dev/null
+++ b/packages/i18n/src/locales/ro/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Șabloane",
+      "description": "Economisește 80% din timpul petrecut pentru crearea proiectelor, a elementelor de lucru și a paginilor când folosești șabloane.",
+      "new_project_template": "Șablon de proiect nou",
+      "new_work_item_template": "Șablon de activitate nou",
+      "new_page_template": "Șablon de pagină nou",
+      "options": {
+        "project": {
+          "label": "Șabloane de proiect"
+        },
+        "work_item": {
+          "label": "Șabloane de elemente de lucru"
+        },
+        "page": {
+          "label": "Șabloane de pagină"
+        }
+      },
+      "create_template": {
+        "label": "Creează șablon",
+        "no_permission": {
+          "project": "Contactează administratorul proiectului pentru a crea șabloane",
+          "workspace": "Contactează administratorul workspace-ului pentru a crea șabloane"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Folosește șablon",
+          "loading": "Folosind"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Derivat din workspace"
+        },
+        "project": {
+          "info": "Derivat din proiect"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Denumește șablonul tău de proiect.",
+              "validation": {
+                "required": "Numele șablonului este obligatoriu",
+                "maxLength": "Numele șablonului trebuie să fie mai mic de 255 de caractere"
+              }
+            },
+            "description": {
+              "placeholder": "Descrie când și cum să folosești acest șablon."
+            }
+          },
+          "name": {
+            "placeholder": "Denumește proiectul tău.",
+            "validation": {
+              "required": "Titlul proiectului este obligatoriu",
+              "maxLength": "Titlul proiectului trebuie să fie mai mic de 255 de caractere"
+            }
+          },
+          "description": {
+            "placeholder": "Descrie scopul și obiectivele acestui proiect."
+          },
+          "button": {
+            "create": "Creează șablon de proiect",
+            "update": "Actualizează șablon de proiect"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Denumește șablonul tău de element de lucru.",
+              "validation": {
+                "required": "Numele șablonului este obligatoriu",
+                "maxLength": "Numele șablonului trebuie să fie mai mic de 255 de caractere"
+              }
+            },
+            "description": {
+              "placeholder": "Descrie când și cum să folosești acest șablon."
+            }
+          },
+          "name": {
+            "placeholder": "Dă acestui element de lucru un titlu.",
+            "validation": {
+              "required": "Titlul elementului de lucru este obligatoriu",
+              "maxLength": "Titlul elementului de lucru trebuie să fie mai mic de 255 de caractere"
+            }
+          },
+          "description": {
+            "placeholder": "Descrie acest element de lucru astfel încât să fie clar ce vei realiza când îl vei completa."
+          },
+          "button": {
+            "create": "Creează șablon de element de lucru",
+            "update": "Actualizează șablon de element de lucru"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Numele șablonului paginii.",
+              "validation": {
+                "required": "Numele șablonului este obligatoriu",
+                "maxLength": "Numele șablonului trebuie să fie mai mic de 255 de caractere"
+              }
+            },
+            "description": {
+              "placeholder": "Descrie când și cum să folosești acest șablon."
+            }
+          },
+          "name": {
+            "placeholder": "Pagina fără nume",
+            "validation": {
+              "maxLength": "Numele paginii trebuie să fie mai mic de 255 de caractere"
+            }
+          },
+          "button": {
+            "create": "Creează șablon de pagină",
+            "update": "Actualizează șablon de pagină"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Setări de publicare} other {Publică pe Marketplace}}",
+          "unpublish_action": "Elimină din Marketplace",
+          "title": "Faceți-vă șablonul detectabil și recunoscut.",
+          "name": {
+            "label": "Numele șablonului",
+            "placeholder": "Numele șablonului",
+            "validation": {
+              "required": "Numele șablonului este obligatoriu",
+              "maxLength": "Numele șablonului trebuie să fie mai mic de 255 de caractere"
+            }
+          },
+          "short_description": {
+            "label": "Descriere scurtă",
+            "placeholder": "Acest șablon este excelent pentru managerii proiectelor care gestionează mai multe proiecte în același timp.",
+            "validation": {
+              "required": "Descrierea scurtă este obligatorie"
+            }
+          },
+          "description": {
+            "label": "Descriere",
+            "placeholder": "Îmbunătățiți productivitatea și optimizați comunicarea cu integrarea noastră Vorbire-În-Text.\n• Transcriere în timp real: Convertiți cuvintele rostite în text precis instantaneu.\n• Crearea sarcinilor și comentariilor: Adăugați sarcini, descrieri și comentarii prin comenzi vocale.",
+            "validation": {
+              "required": "Descrierea este obligatorie"
+            }
+          },
+          "category": {
+            "label": "Categorie",
+            "placeholder": "Alege unde crezi că acest șablon încalcă cel mai bine. Poți alege mai multe.",
+            "validation": {
+              "required": "Cel puțin o categorie este obligatorie"
+            }
+          },
+          "keywords": {
+            "label": "Cuvinte cheie",
+            "placeholder": "Folosește termeni care crezi că utilizatorii vor căuta atunci când vor căuta acest șablon.",
+            "helperText": "Introduceți cuvinte cheie separate de virgule care vor ajuta oamenii să găsească acest lucru din căutare.",
+            "validation": {
+              "required": "Cel puțin un cuvânt cheie este obligatoriu"
+            }
+          },
+          "website": {
+            "label": "URL site web",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "URL invalid",
+              "maxLength": "URL-ul trebuie să fie mai mic de 800 de caractere"
+            }
+          },
+          "company_name": {
+            "label": "Numele companiei",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Numele companiei este obligatoriu",
+              "maxLength": "Numele companiei trebuie să fie mai mic de 255 de caractere"
+            }
+          },
+          "contact_email": {
+            "label": "Email de suport",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Adresa email-ului este invalidă",
+              "maxLength": "Adresa email-ului trebuie să fie mai mică de 255 de caractere"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Link către politică de confidențialitate",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "URL-ul este invalid",
+              "maxLength": "URL-ul trebuie să fie mai mic de 800 de caractere"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Link către termenii de utilizare",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "URL-ul este invalid",
+              "maxLength": "URL-ul trebuie să fie mai mic de 800 de caractere"
+            }
+          },
+          "cover_image": {
+            "label": "Adăugați o imagine de copertă care va fi afișată în marketplace",
+            "upload_title": "Încarcă imagine de copertă",
+            "upload_placeholder": "Faceți clic pentru a încărca sau trageți și plasați pentru a încărca o imagine de copertă",
+            "drop_here": "Plasați aici",
+            "click_to_upload": "Faceți clic pentru a încărca",
+            "invalid_file_or_exceeds_size_limit": "Fișier invalid sau depășește limita de dimensiune. Vă rugăm să încercați din nou.",
+            "upload_and_save": "Încarcă și salvează",
+            "uploading": "Se încarcă",
+            "remove": "Elimină",
+            "removing": "Se elimină",
+            "validation": {
+              "required": "Imaginea de copertă este obligatorie"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Include documente și capturi de ecran care credeți că vor face vizualizatorii acestui șablon mai interesanți.",
+            "validation": {
+              "required": "Cel puțin o captură de ecran este obligatorie"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Șabloane",
+        "description": "Cu șabloane de proiect, element de lucru și pagină în Plane, nu trebuie să creezi un proiect de la zero sau să setezi manual proprietățile elementelor de lucru.",
+        "sub_description": "Recuperează 80% din timpul tău administrativ când folosești Șabloane."
+      },
+      "no_templates": {
+        "button": "Creează primul tău șablon"
+      },
+      "no_labels": {
+        "description": " Nu există etichete încă. Creează etichete pentru a ajuta la organizarea și filtrarea elementelor de lucru în proiectul tău."
+      },
+      "no_modules": {
+        "description": "Nu există module încă. Organizează munca în sub-proiecte cu lideri și responsabili dedicați."
+      },
+      "no_work_items": {
+        "description": "Nu există elemente de lucru încă. Adaugă unul pentru a structura mai bine munca ta."
+      },
+      "no_sub_work_items": {
+        "description": "Nu există sub-elemente de lucru încă. Adaugă unul pentru a structura mai bine munca ta."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Nu există șabloane la care aveți acces.",
+          "description": "Vă rugăm să creați un șablon"
+        },
+        "no_results": {
+          "title": "Aceasta nu se potrivește cu un șablon.",
+          "description": "Încercați să căutați cu alți termeni."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Șablon creat",
+          "message": "{templateName}, șablonul de {templateType}, este acum disponibil pentru workspace-ul tău."
+        },
+        "error": {
+          "title": "Nu am putut crea acel șablon de data aceasta.",
+          "message": "Încearcă să salvezi detaliile din nou sau copiază-le într-un nou șablon, de preferință într-o altă filă."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Șablon modificat",
+          "message": "{templateName}, șablonul de {templateType}, a fost modificat."
+        },
+        "error": {
+          "title": "Nu am putut salva modificările la acest șablon.",
+          "message": "Încearcă să salvezi detaliile din nou sau revino la acest șablon mai târziu. Dacă tot apar probleme, contactează-ne."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Șablon șters",
+          "message": "{templateName}, șablonul de {templateType}, a fost acum șters din workspace-ul tău."
+        },
+        "error": {
+          "title": "Nu am putut șterge acel șablon.",
+          "message": "Încearcă să-l ștergi din nou sau revino la el mai târziu. Dacă nu îl poți șterge nici atunci, contactează-ne."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Șablon retras",
+          "message": "{templateName}, șablonul de {templateType}, a fost retras de pe marketplace."
+        },
+        "error": {
+          "title": "Nu am putut retrage șablonul.",
+          "message": "Încearcă să-l retragi din nou sau revino la el mai târziu. Dacă nu îl poți retrage nici atunci, contactează-ne."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Șterge șablon",
+      "description": {
+        "prefix": "Ești sigur că vrei să ștergi șablonul-",
+        "suffix": "? Toate datele legate de șablon vor fi eliminate permanent. Această acțiune nu poate fi anulată."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Retrage șablonul",
+      "description": {
+        "prefix": "Ești sigur că vrei să retragi șablonul-",
+        "suffix": "? Șablonul va fi retras din marketplace și nu va mai fi disponibil pentru alții."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Adaugă șablon nou",
+        "project": "Adaugă șablon nou"
+      },
+      "label": {
+        "project": "Alege un șablon de proiect",
+        "page": "Alege un șablon"
+      },
+      "tooltip": {
+        "work_item": "Alege un șablon de element de lucru"
+      },
+      "no_results": {
+        "work_item": "Nu s-au găsit șabloane.",
+        "project": "Nu s-au găsit șabloane."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/tour.json b/packages/i18n/src/locales/ro/tour.json
new file mode 100644
index 0000000..c3735c9
--- /dev/null
+++ b/packages/i18n/src/locales/ro/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Bun venit în spațiul tău de lucru",
+        "description": "Pentru a te ajuta să începi, am creat un Proiect Demo pentru tine. Hai să adăugăm primul tău element de lucru."
+      },
+      "step_one": {
+        "title": "Fă clic pe \"+ Adaugă element de lucru\"",
+        "description": "Începe făcând clic pe butonul \"+ Element de lucru nou\". Poți crea sarcini, erori sau un tip personalizat care se potrivește nevoilor tale."
+      },
+      "step_two": {
+        "title": "Filtrează elementele tale de lucru",
+        "description": "Folosește filtre pentru a restrânge rapid lista ta. Poți filtra după status, prioritate sau membri ai echipei. "
+      },
+      "step_three": {
+        "title": "Vizualizează, grupează și ordonează elementele de lucru după nev oie.",
+        "description": "Vezi proprietățile necesare și grupează sau ordonează elementele de lucru în funcție de nevoile tale."
+      },
+      "step_four": {
+        "title": "Vizualizează cum dorești",
+        "description": "Selectează ce proprietăți vrei să vezi în listă. Poți, de asemenea, să grupezi și să sortezi elementele de lucru în felul tău."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Fă progrese cu Cicluri",
+        "description": "Apasă Q pentru a crea un Ciclu. Numește-l și stabilește datele—doar un ciclu per proiect."
+      },
+      "step_one": {
+        "title": "Creează un ciclu nou",
+        "description": "Apasă Q pentru a crea un Ciclu. Numește-l și stabilește datele—doar un ciclu per proiect."
+      },
+      "step_two": {
+        "title": "Fă clic pe \"+\"",
+        "description": "Începe făcând clic pe butonul \"+\". Adaugă elemente de lucru noi sau existente direct de pe pagina Ciclului."
+      },
+      "step_three": {
+        "title": "Rezumatul ciclului",
+        "description": "Urmărește progresul ciclului, productivitatea echipei și prioritățile—și investighează dacă ceva rămâne în urmă."
+      },
+      "step_four": {
+        "title": "Transferă elemente de lucru",
+        "description": "După data scadentă, un ciclu se finalizează automat. Mută munca neterminată într-un alt ciclu."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Împarte-ți proiectul în Module",
+        "description": "Modulele sunt proiecte mai mici, focalizate, care ajută utilizatorii să grupeze și să organizeze elementele de lucru în cadre temporale specifice."
+      },
+      "step_one": {
+        "title": "Creează Modul",
+        "description": "Modulele sunt proiecte mai mici, focalizate, care ajută utilizatorii să grupeze și să organizeze elementele de lucru în cadre temporale specifice."
+      },
+      "step_two": {
+        "title": "Fă clic pe \"+\"",
+        "description": "Începe făcând clic pe butonul \"+\". Adaugă elemente de lucru noi sau existente direct de pe pagina Modulului."
+      },
+      "step_three": {
+        "title": "Stările modulului",
+        "description": "Modulele folosesc aceste statusuri pentru a ajuta utilizatorii să planifice și să urmărească clar progresul și etapa."
+      },
+      "step_four": {
+        "title": "Progresul modulului",
+        "description": "Progresul modulului este urmărit prin elementele finalizate, cu analize pentru monitorizarea performanței."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Documentează cu Pagini alimentate de AI",
+        "description": "Paginile în Plane îți permit să capturezi, să organizezi și să colaborezi la informații despre proiect—fără instrumente externe."
+      },
+      "step_one": {
+        "title": "Fă pagina Publică sau Privată",
+        "description": "Paginile pot fi setate ca publice, vizibile pentru toți din spațiul tău de lucru, sau private, accesibile doar pentru tine."
+      },
+      "step_two": {
+        "title": "Folosește comanda /",
+        "description": "Folosește / pe o pagină pentru a adăuga conținut din 16 tipuri de blocuri, inclusiv liste, imagini, tabele și încorporări."
+      },
+      "step_three": {
+        "title": "Acțiunile paginii",
+        "description": "Odată ce pagina ta este creată, poți face clic pe meniul ••• din colțul din dreapta sus pentru a efectua următoarele acțiuni."
+      },
+      "step_four": {
+        "title": "Cuprins",
+        "description": "Obține o vedere de ansamblu a paginii tale făcând clic pe pictograma panoului pentru a vedea toate titlurile."
+      },
+      "step_five": {
+        "title": "Istoricul versiunilor",
+        "description": "Paginile urmăresc toate editările cu istoricul versiunilor, permițându-ți să restaurezi versiuni anterioare dacă este necesar."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Simplifică cererile cu admitere",
+        "description": "O funcție exclusivă Plane care permite Oaspeților să creeze elemente de lucru pentru erori, cereri sau tichete."
+      },
+      "step_one": {
+        "title": "Cereri de admitere deschise/închise",
+        "description": "Cererile în așteptare rămân în fila Deschise, iar odată ce sunt abordate de un administrator sau membru, se mută la Închise."
+      },
+      "step_two": {
+        "title": "Acceptă/respinge o cerere în așteptare",
+        "description": "Acceptă pentru a edita și muta elementul de lucru în proiectul tău sau respinge-l pentru a-l marca ca Anulat."
+      },
+      "step_three": {
+        "title": "Amână deocamdată",
+        "description": "Un element de lucru poate fi amânat pentru a-l revizui mai târziu. Va fi mutat la sfârșitul listei tale de cereri deschise."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Oprește schimbarea filelor. Conectează-ți lumea.",
+        "description": "Conectează GitHub, Slack pentru a urmări PR-urile și a rezuma conversațiile direct în Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigare, reimaginată",
+        "sub_title": "Spațiul tău de lucru este acum mai ușor de explorat cu o navigare mai inteligentă și simplificată.",
+        "highlight_1": "Structură simplificată a panoului stâng pentru descoperire mai rapidă",
+        "highlight_2": "Căutare globală îmbunătățită pentru a sări instant la orice",
+        "highlight_3": "Grupare de categorii mai inteligentă pentru claritate și concentrare",
+        "footer": "Vrei un ghid rapid?"
+      },
+      "step_zero": {
+        "title": "Găsește orice instant",
+        "description": "Folosește căutarea universală pentru a sări la sarcini, proiecte, pagini și persoane—fără să-ți părăsești fluxul."
+      },
+      "step_one": {
+        "title": "Păstrează controlul asupra actualizărilor",
+        "description": "Căsuța ta de primire păstrează toate mențiunile, aprobările și activitatea într-un singur loc, astfel încât să nu ratezi niciodată munca importantă."
+      },
+      "step_two": {
+        "title": "Personalizează-ți Navigarea",
+        "description": "Personalizează ce vezi și cum navighezi în Preferințe."
+      }
+    },
+    "actions": {
+      "close": "Închide",
+      "next": "Următorul",
+      "back": "Înapoi",
+      "done": "Terminat",
+      "take_a_tour": "Fă un tur",
+      "get_started": "Începe",
+      "got_it": "Am înțeles"
+    },
+    "seed_data": {
+      "title": "Iată proiectul tău demo",
+      "description": "Proiectele îți permit să gestionezi echipele, sarcinile și tot ce ai nevoie pentru a duce lucrurile la bun sfârșit în spațiul tău de lucru."
+    }
+  },
+  "get_started": {
+    "title": "Salut {name}, bun venit la bord!",
+    "description": "Iată tot ce ai nevoie pentru a-ți începe călătoria cu Plane.",
+    "checklist_section": {
+      "title": "Începe",
+      "description": "Începe configurarea și vezi-ți ideile prind viață mai repede.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Creează un proiect"
+        },
+        "item_2": {
+          "title": "Creează un element de lucru"
+        },
+        "item_3": {
+          "title": "Invită membri ai echipei"
+        },
+        "item_4": {
+          "title": "Creează o pagină"
+        },
+        "item_5": {
+          "title": "Încearcă chatul Plane AI"
+        },
+        "item_6": {
+          "title": "Conectează integrări"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Invită-ți echipa",
+      "description": "Invită colegii de echipă și începe să construiți împreună."
+    },
+    "integrations_section": {
+      "title": "Îmbunătățește-ți spațiul de lucru",
+      "more_integrations": "Explorează mai multe integrări"
+    },
+    "switch_to_plane_section": {
+      "title": "Descoperă de ce echipele trec la Plane",
+      "description": "Compară Plane cu instrumentele pe care le folosești astăzi și vezi diferența."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/update.json b/packages/i18n/src/locales/ro/update.json
new file mode 100644
index 0000000..768f0d3
--- /dev/null
+++ b/packages/i18n/src/locales/ro/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Progres",
+      "since_last_update": "De la ultima actualizare",
+      "comments": "{count, plural, one{# comentariu} other{# comentarii}}"
+    },
+    "add_update": "Adaugă actualizare",
+    "add_update_placeholder": "Adaugă actualizarea ta aici",
+    "empty": {
+      "title": "Încă nu există actualizări",
+      "description": "Poți vedea actualizările aici."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reacție creată",
+          "message": "Reacția a fost creată cu succes."
+        },
+        "error": {
+          "title": "Reacție năo creată",
+          "message": "Reacția nu a putut fi creată."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reacție ștearsă",
+          "message": "Reacția a fost ștearsă cu succes."
+        },
+        "error": {
+          "title": "Reacție năo ștearsă",
+          "message": "Reacția nu a putut fi ștearsă."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Actualizare creată",
+        "message": "Actualizarea a fost creată cu succes."
+      },
+      "error": {
+        "title": "Actualizare năo creată",
+        "message": "Actualizarea nu a putut fi creată."
+      }
+    },
+    "delete": {
+      "title": "Șterge actualizare",
+      "confirmation": "Ești sigur că vrei să ștergi această actualizare? Această acțiune este ireversibilă.",
+      "success": {
+        "title": "Actualizare ștearsă",
+        "message": "Actualizarea a fost ștearsă cu succes."
+      },
+      "error": {
+        "title": "Actualizare năo ștearsă",
+        "message": "Actualizarea nu a putut fi ștearsă."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Actualizare actualizată",
+        "message": "Actualizarea a fost actualizată cu succes."
+      },
+      "error": {
+        "title": "Actualizare năo actualizată",
+        "message": "Actualizarea nu a putut fi actualizată."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/wiki.json b/packages/i18n/src/locales/ro/wiki.json
new file mode 100644
index 0000000..a59e9c9
--- /dev/null
+++ b/packages/i18n/src/locales/ro/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "General",
+      "private": "Privat",
+      "shared": "Partajat",
+      "archived": "Arhivat"
+    },
+    "fallback_name": "Colecție",
+    "form": {
+      "name_required": "Titlul colecției este obligatoriu",
+      "name_max_length": "Numele colecției trebuie să aibă mai puțin de 255 de caractere",
+      "name_placeholder_create": "Dă un titlu colecției",
+      "name_placeholder_edit": "Numele colecției"
+    },
+    "create_modal": {
+      "title": "Creează o colecție",
+      "submit": "Creează colecția"
+    },
+    "edit_modal": {
+      "title": "Editează colecția"
+    },
+    "delete_modal": {
+      "title": "Șterge colecția",
+      "page_count": "Această colecție are {pageCount} pagini. Alege ce se întâmplă cu ele.",
+      "transfer_title": "Mută paginile și șterge colecția",
+      "transfer_description": "Mută toate paginile într-o altă colecție înainte de ștergere. Paginile și permisiunile lor vor fi păstrate.",
+      "transfer_warning": "Paginile mutate vor moșteni permisiunile colecției selectate.",
+      "transfer_target_label": "Mută paginile în",
+      "transfer_target_placeholder": "Selectează o colecție",
+      "delete_with_pages_title": "Șterge colecția împreună cu paginile",
+      "delete_with_pages_description": "Șterge definitiv colecția și toate paginile ei. Această acțiune nu poate fi anulată.",
+      "submit": "Șterge colecția"
+    },
+    "header": {
+      "add_page": "Adaugă o pagină"
+    },
+    "menu": {
+      "create_new_page": "Creează o pagină nouă",
+      "add_existing_page": "Adaugă o pagină existentă",
+      "edit_collection": "Editează colecția",
+      "collection_options": "Opțiuni colecție"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Caută pagini",
+      "success_message": "{count} pagini au fost adăugate în colecție.",
+      "error_message": "Paginile nu au putut fi mutate. Te rugăm să încerci din nou.",
+      "no_pages_found": "Nu au fost găsite pagini care să corespundă căutării",
+      "no_pages_available": "Nu există pagini disponibile pentru mutare",
+      "submit": "Mută"
+    },
+    "list": {
+      "invite_only": "Doar pe bază de invitație",
+      "remove_error": "Pagina nu a putut fi eliminată din colecție.",
+      "no_matching_pages": "Nicio pagină potrivită",
+      "remove_search_criteria": "Elimină criteriile de căutare pentru a vedea toate paginile",
+      "remove_filters": "Elimină filtrele pentru a vedea toate paginile",
+      "no_pages_title": "Încă nu există pagini",
+      "no_pages_description": "Această colecție nu are momentan nicio pagină.",
+      "untitled": "Fără titlu",
+      "restricted_access": "Acces restricționat",
+      "collapse_page": "Restrânge pagina",
+      "expand_page": "Extinde pagina",
+      "page_actions": "Acțiuni pagină",
+      "page_link_copied": "Linkul paginii a fost copiat în clipboard.",
+      "columns": {
+        "page_name": "Nume pagină",
+        "owner": "Proprietar",
+        "nested_pages": "Pagini imbricate",
+        "last_activity": "Ultima activitate",
+        "actions": "Acțiuni"
+      }
+    },
+    "toasts": {
+      "created": "Colecția a fost creată cu succes.",
+      "create_error": "Colecția nu a putut fi creată. Te rugăm să încerci din nou.",
+      "renamed": "Colecția a fost redenumită cu succes.",
+      "rename_error": "Colecția nu a putut fi actualizată. Te rugăm să încerci din nou.",
+      "transferred_deleted": "Paginile au fost mutate, iar colecția a fost ștearsă.",
+      "deleted_with_pages": "Colecția și paginile ei au fost șterse.",
+      "delete_error": "Colecția nu a putut fi ștearsă. Te rugăm să încerci din nou.",
+      "target_required": "Te rugăm să selectezi o colecție în care să muți paginile.",
+      "create_page_error": "Pagina nu a putut fi creată. Te rugăm să încerci din nou.",
+      "create_page_in_collection_error": "Pagina nu a putut fi creată sau adăugată în colecție. Te rugăm să încerci din nou.",
+      "collection_link_copied": "Linkul colecției a fost copiat în clipboard."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Actualizează pentru a debloca Wiki",
+      "description": "Deblochează pagini publice, istoric de versiuni, pagini partajate, colaborare în timp real și pagini ale spațiului de lucru pentru wiki-uri, documente la nivel de companie și baze de cunoștințe cu Plane Pro.",
+      "upgrade_button": {
+        "text": "Actualizează"
+      },
+      "learn_more_button": {
+        "text": "Află mai multe"
+      },
+      "download_button": {
+        "text": "Descarcă datele",
+        "loading": "Se descarcă"
+      },
+      "tabs": {
+        "nested_pages": "Pagini imbricate",
+        "add_embeds": "Adaugă încorporări",
+        "publish_pages": "Publică pagini",
+        "comments": "Comentarii"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Paginile imbricate necesită un plan plătit. Actualizează pentru a debloca."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/work-item-type.json b/packages/i18n/src/locales/ro/work-item-type.json
new file mode 100644
index 0000000..e1dbf6d
--- /dev/null
+++ b/packages/i18n/src/locales/ro/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Tipuri de Elemente de Lucru",
+    "label_lowercase": "tipuri de elemente de lucru",
+    "settings": {
+      "description": "Personalizează și adaugă propriile proprietăți pentru a le adapta nevoilor echipei tale.",
+      "cant_delete_default_message": "Nu se poate șterge acest tip de element de lucru deoarece este setat ca tip implicit pentru acest proiect.",
+      "set_as_default": "Setează ca implicit",
+      "cant_set_default_inactive_message": "Activează acest tip înainte de a-l seta ca implicit",
+      "set_default_confirmation": {
+        "title": "Setează ca tip implicit de element de lucru",
+        "description": "Setarea {name} ca implicit îl va importa în toate proiectele din acest spațiu de lucru. Toate elementele de lucru noi vor folosi acest tip în mod implicit.",
+        "confirm_button": "Setează ca implicit"
+      },
+      "properties": {
+        "title": "Proprietăți personalizate",
+        "description": "Creează și personalizează proprietăți.",
+        "tooltip": "Fiecare tip de element de lucru vine cu un set implicit de proprietăți precum Titlu, Descriere, Responsabil, Stare, Prioritate, Data de început, Data scadentă, Modul, Ciclu etc. De asemenea, poți personaliza și adăuga propriile proprietăți pentru a le adapta nevoilor echipei tale.",
+        "add_button": "Adaugă proprietate nouă",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Importă din spațiul de lucru"
+          }
+        },
+        "dropdown": {
+          "label": "Tip de proprietate",
+          "placeholder": "Selectează tipul"
+        },
+        "property_type": {
+          "text": {
+            "label": "Text"
+          },
+          "number": {
+            "label": "Număr"
+          },
+          "dropdown": {
+            "label": "Dropdown"
+          },
+          "boolean": {
+            "label": "Boolean"
+          },
+          "date": {
+            "label": "Dată"
+          },
+          "member_picker": {
+            "label": "Selector de membri"
+          },
+          "formula": {
+            "label": "Formulă"
+          }
+        },
+        "attributes": {
+          "label": "Atribute",
+          "text": {
+            "single_line": {
+              "label": "Linie unică"
+            },
+            "multi_line": {
+              "label": "Paragraf"
+            },
+            "readonly": {
+              "label": "Doar citire",
+              "header": "Date doar pentru citire"
+            },
+            "invalid_text_format": {
+              "label": "Format de text invalid"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Adaugă număr"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Selecție unică"
+            },
+            "multi_select": {
+              "label": "Selecție multiplă"
+            },
+            "no_default_value": {
+              "label": "Nicio valoare implicită"
+            }
+          },
+          "boolean": {
+            "label": "Adevărat | Fals",
+            "no_default": "Nicio valoare implicită"
+          },
+          "option": {
+            "create_update": {
+              "label": "Opțiuni",
+              "form": {
+                "placeholder": "Adaugă opțiune",
+                "errors": {
+                  "name": {
+                    "required": "Numele opțiunii este obligatoriu.",
+                    "integrity": "Opțiunea cu același nume există deja."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Selectează opțiune",
+                "multi": {
+                  "default": "Selectează opțiuni",
+                  "variable": "{count} opțiuni selectate"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Succes!",
+              "message": "Proprietatea {name} a fost creată cu succes."
+            },
+            "error": {
+              "title": "Eroare!",
+              "message": "Nu s-a putut crea proprietatea. Te rugăm să încerci din nou!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Succes!",
+              "message": "Proprietatea {name} a fost actualizată cu succes."
+            },
+            "error": {
+              "title": "Eroare!",
+              "message": "Nu s-a putut actualiza proprietatea. Te rugăm să încerci din nou!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Succes!",
+              "message": "Proprietatea {name} a fost ștearsă cu succes."
+            },
+            "error": {
+              "title": "Eroare!",
+              "message": "Nu s-a putut șterge proprietatea. Te rugăm să încerci din nou!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} proprietatea {name}",
+            "success": {
+              "title": "Succes!",
+              "message": "Proprietatea {name} {action} cu succes."
+            },
+            "error": {
+              "title": "Eroare!",
+              "message": "Nu s-a putut {action} proprietatea. Te rugăm să încerci din nou!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Creează o proprietate personalizată nouă",
+            "update": "Actualizează proprietatea personalizată"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Titlu"
+            },
+            "description": {
+              "placeholder": "Descriere"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Trebuie să denumești proprietatea ta.",
+              "max_length": "Numele proprietății nu trebuie să depășească 255 de caractere."
+            },
+            "property_type": {
+              "required": "Trebuie să selectezi un tip de proprietate."
+            },
+            "options": {
+              "required": "Trebuie să adaugi cel puțin o opțiune."
+            },
+            "formula": {
+              "required": "Expresia formulei este obligatorie.",
+              "invalid": "Formulă invalidă: {error}",
+              "circular_reference": "Referință circulară detectată. O formulă nu poate face referire la ea însăși direct sau indirect.",
+              "invalid_reference": "Formula face referire la o proprietate inexistentă."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Câmp formulă",
+          "tooltip": "Introduceți o formulă folosind sintaxa '{'Nume câmp'}'. Suportă operatorii +, -, *, / și &.",
+          "placeholder": "Scrieți formula",
+          "test_button": "Test",
+          "validating": "Se validează",
+          "validation_success": "Formula este validă! Returnează {resultType}",
+          "validation_success_with_refs": "Formula este validă! Returnează {resultType} ({count} câmp(uri) referențiat(e))",
+          "error": {
+            "empty": "Vă rugăm introduceți o formulă",
+            "missing_context": "Lipsește contextul spațiului de lucru, proiectului sau tipului de element de lucru",
+            "validation_failed": "Validarea a eșuat"
+          },
+          "picker": {
+            "no_match": "Nicio proprietate corespunzătoare",
+            "no_available": "Nicio proprietate disponibilă"
+          }
+        },
+        "enable_disable": {
+          "label": "Activ",
+          "tooltip": {
+            "disabled": "Click pentru a dezactiva",
+            "enabled": "Click pentru a activa"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Șterge această proprietate",
+          "description": "Ștergerea proprietăților poate duce la pierderea datelor existente.",
+          "secondary_description": "Vrei să dezactivezi proprietatea în schimb?",
+          "primary_button": "{action}, șterge-o",
+          "secondary_button": "Da, dezactiveaz-o"
+        },
+        "mandate_confirmation": {
+          "label": "Proprietate obligatorie",
+          "content": "Se pare că există o opțiune implicită pentru această proprietate. Dacă faci proprietatea obligatorie, aceasta va elimina valoarea implicită, iar utilizatorii vor trebui să adauge o valoare la alegerea lor.",
+          "tooltip": {
+            "disabled": "Acest tip de proprietate nu poate fi făcut obligatoriu",
+            "enabled": "Debifează pentru a marca câmpul ca opțional",
+            "checked": "Bifează pentru a marca câmpul ca obligatoriu"
+          }
+        },
+        "empty_state": {
+          "title": "Adaugă proprietăți personalizate",
+          "description": "Noile proprietăți pe care le adaugi pentru acest tip de element de lucru vor apărea aici."
+        }
+      },
+      "types": {
+        "title": "Tipuri",
+        "description": "Creează și personalizează tipuri de activități cu proprietăți.",
+        "sort_options": {
+          "project_count": "Numărul de proiecte din care face parte"
+        },
+        "filter_options": {
+          "show_active": "Afișează active",
+          "show_inactive": "Afișează inactive"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Creează nou",
+            "import_from_workspace": "Importă din spațiul de lucru"
+          },
+          "banner": {
+            "with_access": "Activează tipurile de activități pentru a importa tipuri de la nivelul spațiului de lucru",
+            "without_access": "Tipurile de activități sunt dezactivate. Contactează administratorul spațiului de lucru pentru a le activa în setările spațiului de lucru."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Proprietăți personalizate",
+        "add_button": "Adaugă proprietăți",
+        "modal": {
+          "title": "Adaugă proprietăți",
+          "empty": {
+            "title": "Nu există proprietăți disponibile",
+            "description": "Toate proprietățile au fost deja conectate la acest tip."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Deconectează proprietatea",
+          "description": "Deconectarea acestei proprietăți va șterge permanent toate valorile sale din fiecare activitate care folosește acest tip. Această acțiune nu poate fi anulată.",
+          "input_label": "Tastează",
+          "input_label_suffix": "pentru a continua:",
+          "confirm": "Deconectează proprietatea",
+          "loading": "Se deconectează"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Șterge acest tip",
+        "description": "Ștergerea tipurilor poate duce la pierderea datelor existente.",
+        "can_disable_warning": "Doriți să dezactivați tipul în schimb?",
+        "primary_button": "Da, șterge-l",
+        "toast": {
+          "success": {
+            "title": "Succes!",
+            "message": "Tipul elementului de lucru a fost șters cu succes."
+          },
+          "error": {
+            "title": "Eroare!",
+            "message": "Ștergerea tipului de element de lucru a eșuat. Vă rugăm să încercați din nou!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Nu se poate șterge tipul implicit de element de lucru",
+          "cannot_delete_work_item_type_with_associated_work_items": "Nu se poate șterge tipul de element de lucru cu elemente de lucru asociate"
+        }
+      }
+    },
+    "create": {
+      "title": "Creează tip de element de lucru",
+      "button": "Adaugă tip de element de lucru",
+      "toast": {
+        "success": {
+          "title": "Succes!",
+          "message": "Tipul de element de lucru a fost creat cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": {
+            "default": "Crearea tipului de activitate a eșuat. Te rugăm să încerci din nou!",
+            "conflict": "Tipul {name} există deja. Alegeți un alt nume."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Actualizează tipul de element de lucru",
+      "button": "Actualizează tipul de element de lucru",
+      "toast": {
+        "success": {
+          "title": "Succes!",
+          "message": "Tipul de element de lucru {name} a fost actualizat cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": {
+            "default": "Actualizarea tipului de activitate a eșuat. Te rugăm să încerci din nou!",
+            "conflict": "Tipul {name} există deja. Alegeți un alt nume."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Dă acestui tip de element de lucru un nume unic"
+        },
+        "description": {
+          "placeholder": "Descrie pentru ce este destinat acest tip de element de lucru și când trebuie utilizat."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} tipul de element de lucru {name}",
+        "success": {
+          "title": "Succes!",
+          "message": "Tipul de element de lucru {name} {action} cu succes."
+        },
+        "error": {
+          "title": "Eroare!",
+          "message": "Nu s-a putut {action} tipul de element de lucru. Te rugăm să încerci din nou!"
+        }
+      },
+      "tooltip": "Click pentru a {action}"
+    },
+    "change_confirmation": {
+      "title": "Schimbați tipul de element de lucru?",
+      "description": "Schimbarea tipului de element de lucru poate duce la pierderea valorilor proprietăților personalizate care sunt specifice tipului curent. Această acțiune nu poate fi anulată.",
+      "button": {
+        "loading": "Se schimbă",
+        "default": "Schimbă tipul"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Activează Tipurile de Elemente de Lucru",
+        "description": "Modelează elementele de lucru pentru munca ta cu Tipuri de elemente de lucru. Personalizează cu pictograme, fundaluri și proprietăți și configurează-le pentru acest proiect.",
+        "primary_button": {
+          "text": "Activează"
+        },
+        "confirmation": {
+          "title": "Odată activate, Tipurile de Elemente de Lucru nu pot fi dezactivate.",
+          "description": "Elementul de Lucru al Plane va deveni tipul implicit de element de lucru pentru acest proiect și va apărea cu pictograma și fundalul său în acest proiect.",
+          "button": {
+            "default": "Activează",
+            "loading": "Se configurează"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Obține Pro pentru a activa Tipurile de Elemente de Lucru.",
+        "description": "Modelează elementele de lucru pentru munca ta cu Tipuri de elemente de lucru. Personalizează cu pictograme, fundaluri și proprietăți și configurează-le pentru acest proiect.",
+        "primary_button": {
+          "text": "Obține Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Actualizează pentru a activa Tipurile de Elemente de Lucru.",
+        "description": "Modelează elementele de lucru pentru munca ta cu Tipuri de elemente de lucru. Personalizează cu pictograme, fundaluri și proprietăți și configurează-le pentru acest proiect.",
+        "primary_button": {
+          "text": "Actualizează"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Ierarhie",
+      "tab_label": "Ierarhie",
+      "description": "Configurați niveluri de ierarhie pentru a vă organiza munca. Fiecare nivel definește o relație de părinte cu elementul direct deasupra și o relație de copil cu elementul direct dedesubt. ",
+      "sidebar_label": "Ierarhie",
+      "enable_control": {
+        "title": "Activați ierarhia",
+        "description": "Creați relații părinte-copil între diferite tipuri de elemente de lucru.",
+        "tooltip": "Nu puteți dezactiva ierarhia odată ce este activată."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Definiți mai întâi tipurile de elemente de lucru pentru a crea o nouă ierarhie.",
+        "cta": "Setări tipuri elemente de lucru"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Trageți și plasați un tip pentru a adăuga un nou nivel ierarhic",
+      "empty_level_placeholder": "Trageți și plasați un tip de element de lucru la nivelul {level}",
+      "drag_tooltip": "Glisați pentru a schimba nivelul",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Setați ca implicit",
+          "toast": {
+            "loading": "Setare ca implicit...",
+            "success": {
+              "title": "Succes!",
+              "message": "Nivelul de ierarhie {level} a fost setat ca implicit cu succes."
+            },
+            "error": {
+              "title": "Eroare!",
+              "message": "Nu s-a putut seta nivelul de ierarhie {level} ca implicit. Vă rugăm să încercați din nou."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Se mută {workItemTypeName} la nivelul {level}...",
+        "success": {
+          "title": "Succes!",
+          "message": "{workItemTypeName} a fost mutat la nivelul {level} cu succes."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Salvarea va rupe legăturile existente",
+      "content": {
+        "intro": "Tipul de element de lucru {workItemTypeName} are:",
+        "parent_items": "{count, plural, one {Se va elimina # legătură părinte} few {Se vor elimina # legături părinte} other {Se vor elimina # de legături părinte}}.",
+        "child_items": "{count, plural, one {sub-element de lucru} few {sub-elemente de lucru} other {sub-elemente de lucru}}",
+        "parent_line_suffix_when_also_children": ", și ",
+        "footer": "Această modificare va elimina relațiile părinte-copil din elementele de lucru existente de tipul {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Introduceți „confirmă” pentru a continua.",
+        "placeholder": "confirmă"
+      },
+      "error_toast": {
+        "title": "Eroare!",
+        "message": "Nu s-au putut elimina legăturile și salva. Vă rugăm să încercați din nou."
+      },
+      "confirm_button": {
+        "loading": "Se salvează",
+        "default": "Salvează oricum"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Eroare!",
+        "message": "Tipul de element de lucru selectat nu poate fi utilizat pentru a crea un nou element de lucru deoarece încalcă regulile ierarhiei."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Eroare!",
+        "message": "Tipul de element de lucru nu poate fi actualizat deoarece încalcă regulile ierarhiei."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Nivel de ierarhie",
+      "invalid_level_toast": {
+        "title": "Eroare!",
+        "message": "Tipul elementului de lucru nu poate fi actualizat deoarece încalcă regulile de ierarhie."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/work-item.json b/packages/i18n/src/locales/ro/work-item.json
new file mode 100644
index 0000000..b9d56bd
--- /dev/null
+++ b/packages/i18n/src/locales/ro/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Activitate} other {Activități}}",
+    "all": "Toate activitățile",
+    "edit": "Editează activitatea",
+    "title": {
+      "label": "Titlul activității",
+      "required": "Titlul activității este obligatoriu."
+    },
+    "add": {
+      "press_enter": "Apasă 'Enter' pentru a adăuga o altă activitate",
+      "label": "Adaugă activitate",
+      "cycle": {
+        "failed": "Activitatea nu a putut fi adăugată în ciclu. Te rugăm să încerci din nou.",
+        "success": "{count, plural, one {Activitate} other {Activități}} adăugată(e) în ciclu cu succes.",
+        "loading": "Se adaugă {count, plural, one {activitate} other {activități}} în ciclu"
+      },
+      "assignee": "Adaugă responsabili",
+      "start_date": "Adaugă data de început",
+      "due_date": "Adaugă termenul limită",
+      "parent": "Adaugă activitate părinte",
+      "sub_issue": "Adaugă sub-activitate",
+      "dependency": "Adaugă dependență",
+      "relation": "Adaugă relație",
+      "link": "Adaugă link",
+      "existing": "Adaugă activitate existentă"
+    },
+    "remove": {
+      "label": "Elimină activitatea",
+      "cycle": {
+        "loading": "Se elimină activitatea din ciclu",
+        "success": "Activitatea a fost eliminată din ciclu cu succes.",
+        "failed": "Activitatea nu a putut fi eliminată din ciclu. Te rugăm să încerci din nou."
+      },
+      "module": {
+        "loading": "Se elimină activitatea din modul",
+        "success": "Activitatea a fost eliminată din modul cu succes.",
+        "failed": "Activitatea nu a putut fi eliminată din modul. Te rugăm să încerci din nou."
+      },
+      "parent": {
+        "label": "Elimină activitatea părinte"
+      }
+    },
+    "new": "Activitate nouă",
+    "adding": "Se adaugă activitatea",
+    "create": {
+      "success": "Activitatea a fost creată cu succes"
+    },
+    "priority": {
+      "urgent": "Urgentă",
+      "high": "Ridicată",
+      "medium": "Medie",
+      "low": "Scăzută"
+    },
+    "display": {
+      "properties": {
+        "label": "Afișează proprietățile",
+        "id": "ID",
+        "issue_type": "Tipul activității",
+        "sub_issue_count": "Număr de sub-activități",
+        "attachment_count": "Număr de atașamente",
+        "created_on": "Creată la",
+        "sub_issue": "Sub-activitate",
+        "work_item_count": "Număr de activități"
+      },
+      "extra": {
+        "show_sub_issues": "Afișează sub-activitățile",
+        "show_empty_groups": "Afișează grupurile goale"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Această vizualizare este ordonată după",
+      "list": "Listă",
+      "kanban": "Tablă",
+      "calendar": "Calendar",
+      "spreadsheet": "Tabel",
+      "gantt": "Cronologic",
+      "title": {
+        "list": "Vizualizare tip Listă",
+        "kanban": "Vizualizare tip Tablă",
+        "calendar": "Vizualizare tip Calendar",
+        "spreadsheet": "Vizualizare tip Tabel",
+        "gantt": "Vizualizare tip Cronologic"
+      }
+    },
+    "states": {
+      "active": "Active",
+      "backlog": "Restante"
+    },
+    "comments": {
+      "placeholder": "Adaugă comentariu",
+      "switch": {
+        "private": "Comută pe comentariu privat",
+        "public": "Comută pe comentariu public"
+      },
+      "create": {
+        "success": "Comentariu adăugat cu succes",
+        "error": "Adăugarea comentariului a eșuat. Te rugăm să încerci mai târziu."
+      },
+      "update": {
+        "success": "Comentariu actualizat cu succes",
+        "error": "Actualizarea comentariului a eșuat. Te rugăm să încerci mai târziu."
+      },
+      "remove": {
+        "success": "Comentariu șters cu succes",
+        "error": "Ștergerea comentariului a eșuat. Te rugăm să încerci mai târziu."
+      },
+      "upload": {
+        "error": "Încărcarea fișierului a eșuat. Te rugăm să încerci mai târziu."
+      },
+      "copy_link": {
+        "success": "Linkul comentariului a fost copiat în clipboard",
+        "error": "Eroare la copierea linkului comentariului. Încercați din nou mai târziu."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Adaugă răspuns",
+          "placeholder": "Adaugă răspuns"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Preluarea răspunsurilor a eșuat"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Răspuns creat cu succes"
+            },
+            "error": {
+              "message": "Crearea răspunsului a eșuat"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Răspuns actualizat cu succes"
+            },
+            "error": {
+              "message": "Actualizarea răspunsului a eșuat"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Răspuns șters cu succes"
+            },
+            "error": {
+              "message": "Ștergerea răspunsului a eșuat"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Activitatea nu există",
+        "description": "Activitatea căutată nu există, a fost arhivată sau ștearsă.",
+        "primary_button": {
+          "text": "Vezi alte activități"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Activități înrudite"
+    },
+    "archive": {
+      "description": "Doar activitățile finalizate sau anulate\npot fi arhivate",
+      "label": "Arhivează activitatea",
+      "confirm_message": "Ești sigur că vrei să arhivezi această activitate? Toate activitățile arhivate pot fi restaurate ulterior.",
+      "success": {
+        "label": "Arhivare reușită",
+        "message": "Arhivele tale pot fi găsite în arhiva proiectului."
+      },
+      "failed": {
+        "message": "Activitatea nu a putut fi arhivată. Te rugăm să încerci din nou."
+      },
+      "banner_message": "Această activitate a fost arhivată. Accesează secțiunea Arhive pentru a o restaura.",
+      "go_to_archives": "Accesează arhivele"
+    },
+    "restore": {
+      "success": {
+        "title": "Restaurare reușită",
+        "message": "Activitatea poate fi găsită în lista de activități ale proiectului."
+      },
+      "failed": {
+        "message": "Activitatea nu a putut fi restaurată. Te rugăm să încerci din nou."
+      }
+    },
+    "relation": {
+      "relates_to": "Este legată de",
+      "duplicate": "Duplicată a",
+      "blocked_by": "Blocată de",
+      "blocking": "Blochează",
+      "start_before": "Începe înainte",
+      "start_after": "Începe după",
+      "finish_before": "Termină înainte",
+      "finish_after": "Termină după",
+      "implements": "Implementează",
+      "implemented_by": "Implementat de"
+    },
+    "copy_link": "Copiază link-ul activității",
+    "delete": {
+      "label": "Șterge activitatea",
+      "error": "Eroare la ștergerea activității"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Abonarea la activitate realizată cu succes",
+        "unsubscribed": "Dezabonarea de la activitate realizată cu succes"
+      }
+    },
+    "select": {
+      "error": "Selectează cel puțin o activitate",
+      "empty": "Nicio activitate selectată",
+      "add_selected": "Adaugă activitățile selectate",
+      "select_all": "Selectează tot",
+      "deselect_all": "Deselează tot"
+    },
+    "open_in_full_screen": "Deschide activitatea pe tot ecranul",
+    "duplicate": {
+      "modal": {
+        "title": "Creează o copie într-un alt proiect",
+        "description1": "Aceasta creează o copie a activității.",
+        "description2": "Toate datele proprietăților vor fi eliminate la duplicare.",
+        "placeholder": "Selectează un proiect"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Activitate duplicată cu succes"
+        },
+        "error": {
+          "message": "Duplicarea activității a eșuat"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Conectează pagini",
+      "show_wiki_pages": "Afișează paginile Wiki",
+      "link_pages_to": "Conectează pagini la",
+      "linked_pages": "Pagini conectate",
+      "no_description": "Aceasta este o pagină goală. De ce nu scrii ceva înăuntru și o vezi apărând aici ca acest text indicator",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Pagini actualizate",
+            "message": "Paginile au fost actualizate cu succes"
+          },
+          "error": {
+            "title": "Actualizarea paginilor a eșuat",
+            "message": "Actualizarea paginilor a eșuat"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Pagină eliminată",
+            "message": "Pagina a fost eliminată cu succes"
+          },
+          "error": {
+            "title": "Eliminarea paginii a eșuat",
+            "message": "Eliminarea paginii a eșuat"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Clic pentru a vota pozitiv",
+      "click_to_downvote": "Clic pentru a vota negativ",
+      "click_to_view_upvotes": "Clic pentru a vedea voturile pozitive",
+      "click_to_view_downvotes": "Clic pentru a vedea voturile negative"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Sub-activitatea a fost actualizată cu succes",
+      "error": "Eroare la actualizarea sub-activității"
+    },
+    "remove": {
+      "success": "Sub-activitatea a fost eliminată cu succes",
+      "error": "Eroare la eliminarea sub-activității"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Nu ai sub-elemente de lucru care corespund filtrelor pe care le-ai aplicat.",
+        "description": "Pentru a vedea toate sub-elementele de lucru, șterge toate filtrele aplicate.",
+        "action": "Șterge filtrele"
+      },
+      "list_filters": {
+        "title": "Nu ai elemente de lucru care corespund filtrelor pe care le-ai aplicat.",
+        "description": "Pentru a vedea toate elementele de lucru, șterge toate filtrele aplicate.",
+        "action": "Șterge filtrele"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Nu au fost găsite activități potrivite"
+      },
+      "no_issues": {
+        "title": "Nu au fost găsite activități"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Niciun comentariu încă",
+        "description": "Comentariile pot fi folosite ca spațiu de discuții și urmărire pentru activități"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Imposibil de arhivat elementele de lucru",
+        "message": "Doar elementele de lucru aparținând grupelor de stare Finalizate sau Anulate pot fi arhivate."
+      },
+      "invalid_issue_start_date": {
+        "title": "Imposibil de actualizat elementele de lucru",
+        "message": "Data de început selectată succede data scadentă pentru unele elemente de lucru. Asigură-te că data de început este înainte de data scadentă."
+      },
+      "invalid_issue_target_date": {
+        "title": "Imposibil de actualizat elementele de lucru",
+        "message": "Data scadentă selectată precedă data de început pentru unele elemente de lucru. Asigură-te că data scadentă este după data de început."
+      },
+      "invalid_state_transition": {
+        "title": "Imposibil de actualizat elementele de lucru",
+        "message": "Schimbarea stării nu este permisă pentru unele elemente de lucru. Asigură-te că schimbarea stării este permisă."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Schimbă starea, prioritatea și multe altele pentru mai multe activități simultan. Economisește în medie trei minute per operațiune.",
+      "cta": "Treci la One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Elemente de lucru recurente",
+      "description": "Setează munca recurentă o singură dată și noi vom face munca. Vei vedea totul aici când este momentul.",
+      "new_recurring_work_item": "Element de lucru recurent nou",
+      "update_recurring_work_item": "Actualizează elementul de lucru recurent",
+      "form": {
+        "interval": {
+          "title": "Programare",
+          "start_date": {
+            "validation": {
+              "required": "Data de început este obligatorie"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Tipul de interval este obligatoriu"
+            }
+          }
+        },
+        "button": {
+          "create": "Creează element de lucru recurent",
+          "update": "Actualizează elementul de lucru recurent"
+        }
+      },
+      "create_button": {
+        "label": "Creează element de lucru recurent",
+        "no_permission": "Contactează administratorul proiectului pentru a crea elemente de lucru recurente"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Munca ta, pe pilot automat",
+        "description": "Setează o dată. Îl readucem când este necesar. Fă upgrade la Business pentru ca munca recurentă să fie fără efort."
+      },
+      "no_templates": {
+        "button": "Creează primul tău element de lucru recurent"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Element de lucru recurent creat",
+          "message": "{name}, elementul de lucru recurent, este acum disponibil în spațiul tău de lucru."
+        },
+        "error": {
+          "title": "Nu am putut crea acest element de lucru recurent de data aceasta.",
+          "message": "Încearcă să salvezi din nou detaliile sau copiază-le într-un nou element de lucru recurent, de preferat într-un alt tab."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Element de lucru recurent modificat",
+          "message": "{name}, elementul de lucru recurent, a fost modificat."
+        },
+        "error": {
+          "title": "Nu am putut salva modificările la acest element de lucru recurent.",
+          "message": "Încearcă să salvezi din nou detaliile sau revino la acest element de lucru recurent mai târziu. Dacă problema persistă, contactează-ne."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Element de lucru recurent șters",
+          "message": "{name}, elementul de lucru recurent, a fost șters din spațiul tău de lucru."
+        },
+        "error": {
+          "title": "Nu am putut șterge acest element de lucru recurent.",
+          "message": "Încearcă să-l ștergi din nou sau revino mai târziu. Dacă nu poți să-l ștergi nici atunci, contactează-ne."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Șterge elementul de lucru recurent",
+      "description": {
+        "prefix": "Ești sigur că vrei să ștergi elementul de lucru recurent-",
+        "suffix": "? Toate datele legate de acest element de lucru recurent vor fi eliminate permanent. Această acțiune nu poate fi anulată."
+      }
+    }
+  },
+  "epic": {
+    "new": "Sarcină majoră",
+    "label": "{count, plural, one {Sarcină majoră} other {Sarcini majore}}",
+    "adding": "Se adaugă sarcină majoră",
+    "create": {
+      "success": "Sarcină majoră creată cu succes"
+    },
+    "add": {
+      "label": "Adaugă sarcină majoră",
+      "press_enter": "Apasă 'Enter' pentru a adăuga o altă sarcină majoră"
+    },
+    "title": {
+      "label": "Titlu sarcină majoră",
+      "required": "Titlul sarcinii majore este obligatoriu."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/workflow.json b/packages/i18n/src/locales/ro/workflow.json
new file mode 100644
index 0000000..6f621fd
--- /dev/null
+++ b/packages/i18n/src/locales/ro/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Permite elemente noi de lucru",
+      "work_item_creation_disable_tooltip": "Crearea de elemente de lucru este dezactivată pentru această stare",
+      "default_state": "Starea implicită permite tuturor membrilor să creeze elemente noi de lucru. Acest lucru nu poate fi schimbat",
+      "state_change_count": "{count, plural, one {1 schimbare de stare permisă} other {{count} schimbări de stare permise}}",
+      "movers_count": "{count, plural, one {1 evaluator listat} other {{count} evaluatori listați}}",
+      "state_changes": {
+        "label": {
+          "default": "Adaugă schimbare de stare permisă",
+          "loading": "Se adaugă schimbare de stare permisă"
+        },
+        "move_to": "Schimbă starea la",
+        "movers": {
+          "label": "Când este evaluat de",
+          "tooltip": "Evaluatorii sunt persoane care au permisiunea de a muta elemente de lucru dintr-o stare în alta.",
+          "add": "Adaugă evaluatori"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Nu poți muta acest element de lucru aici."
+    },
+    "workflow_enabled": {
+      "label": "Schimbare de stare"
+    },
+    "workflow_tree": {
+      "label": "Pentru elemente de lucru în",
+      "state_change_label": "poate să-l mute la"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Controlează haosul schimbărilor și evaluărilor cu Fluxuri de lucru.",
+        "description": "Setează reguli pentru unde se mută lucrul tău, de către cine și când cu Fluxuri de lucru în Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Vezi istoricul schimbărilor",
+      "reset_workflow": "Resetează fluxul de lucru"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Ești sigur că vrei să resetezi acest flux de lucru?",
+        "description": "Dacă resetezi acest flux de lucru, toate regulile tale de schimbare a stării vor fi șterse și va trebui să le creezi din nou pentru a le rula în acest proiect."
+      },
+      "delete_state_change": {
+        "title": "Ești sigur că vrei să ștergi această regulă de schimbare a stării?",
+        "description": "Odată ștearsă, nu poți anula această schimbare și va trebui să setezi regula din nou dacă vrei să o rulezi pentru acest proiect."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} flux de lucru",
+        "success": {
+          "title": "Succes",
+          "message": "Flux de lucru {action} cu succes"
+        },
+        "error": {
+          "title": "Eroare",
+          "message": "Fluxul de lucru nu a putut fi {action}. Te rugăm să încerci din nou."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Succes",
+          "message": "Fluxul de lucru a fost resetat cu succes"
+        },
+        "error": {
+          "title": "Eroare la resetarea fluxului de lucru",
+          "message": "Fluxul de lucru nu a putut fi resetat. Te rugăm să încerci din nou."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Eroare la adăugarea regulii de schimbare a stării",
+          "message": "Regula de schimbare a stării nu a putut fi adăugată. Te rugăm să încerci din nou."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Eroare la modificarea regulii de schimbare a stării",
+          "message": "Regula de schimbare a stării nu a putut fi modificată. Te rugăm să încerci din nou."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Eroare la eliminarea regulii de schimbare a stării",
+          "message": "Regula de schimbare a stării nu a putut fi eliminată. Te rugăm să încerci din nou."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Eroare la modificarea evaluatorilor regulii de schimbare a stării",
+          "message": "Evaluatorii regulii de schimbare a stării nu au putut fi modificați. Te rugăm să încerci din nou."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/workspace-settings.json b/packages/i18n/src/locales/ro/workspace-settings.json
new file mode 100644
index 0000000..f408044
--- /dev/null
+++ b/packages/i18n/src/locales/ro/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Setări spațiu de lucru",
+    "page_label": "{workspace} - Setări generale",
+    "key_created": "Cheie creată",
+    "copy_key": "Copiază și salvează această cheie secretă în Plane Documentație. Nu vei mai putea vedea această cheie după ce închizi. Un fișier CSV care conține cheia a fost descărcat.",
+    "token_copied": "Token-ul a fost copiat în memoria temporară.",
+    "settings": {
+      "general": {
+        "title": "General",
+        "upload_logo": "Încarcă siglă",
+        "edit_logo": "Editează siglă",
+        "name": "Numele spațiului de lucru",
+        "company_size": "Dimensiunea companiei",
+        "url": "URL-ul spațiului de lucru",
+        "workspace_timezone": "Fusul orar al spațiului de lucru",
+        "update_workspace": "Actualizează spațiul de lucru",
+        "delete_workspace": "Șterge acest spațiu de lucru",
+        "delete_workspace_description": "La ștergerea spațiului de lucru, toate datele și resursele din cadrul acestuia vor fi eliminate definitiv și nu vor putea fi recuperate.",
+        "delete_btn": "Șterge acest spațiu de lucru",
+        "delete_modal": {
+          "title": "Ești sigur că vrei să ștergi acest spațiu de lucru?",
+          "description": "Ai o perioadă de probă activă pentru unul dintre planurile noastre plătite. Te rugăm să o anulezi înainte de a continua.",
+          "dismiss": "Renunță",
+          "cancel": "Anulează perioadă de probă",
+          "success_title": "Spațiul de lucru a fost șters.",
+          "success_message": "Vei fi redirecționat în curând către pagina de profil.",
+          "error_title": "Ceva nu a funcționat.",
+          "error_message": "Încearcă din nou, te rog."
+        },
+        "errors": {
+          "name": {
+            "required": "Numele este obligatoriu",
+            "max_length": "Numele spațiului de lucru nu trebuie să depășească 80 de caractere"
+          },
+          "company_size": {
+            "required": "Dimensiunea companiei este obligatorie",
+            "select_a_range": "Selectează dimensiunea companiei"
+          }
+        }
+      },
+      "members": {
+        "title": "Membri",
+        "add_member": "Adaugă membru",
+        "pending_invites": "Invitații în așteptare",
+        "invitations_sent_successfully": "Invitațiile au fost trimise cu succes",
+        "leave_confirmation": "Ești sigur că vrei să părăsești spațiul de lucru? Nu vei mai avea acces la acest spațiu. Această acțiune este ireversibilă.",
+        "details": {
+          "full_name": "Nume complet",
+          "display_name": "Nume afișat",
+          "email_address": "Adresă de email",
+          "account_type": "Tip cont",
+          "authentication": "Autentificare",
+          "joining_date": "Data înscrierii"
+        },
+        "modal": {
+          "title": "Invită persoane cu care să colaborezi",
+          "description": "Invită persoane cu care să colaborezi în spațiul tău de lucru.",
+          "button": "Trimite invitațiile",
+          "button_loading": "Se trimit invitațiile",
+          "placeholder": "nume@companie.ro",
+          "errors": {
+            "required": "Avem nevoie de o adresă de email pentru a trimite invitația.",
+            "invalid": "Adresa de email este invalidă"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Facturare și abonamente",
+        "description": "Alege abonamentul tău, gestionează abonamentele și actualizează cu ușurință pe măsură ce nevoile tale cresc.",
+        "title": "Facturare și Abonamente",
+        "current_plan": "Abonament curent",
+        "free_plan": "Folosești în prezent abonamentul gratuit",
+        "view_plans": "Vezi abonamentele"
+      },
+      "exports": {
+        "heading": "Exporturi",
+        "description": "Exportă datele proiectelor tale în diverse formate și accesează istoricul exporturilor cu link-uri de descărcare.",
+        "title": "Exporturi",
+        "exporting": "Se exportă",
+        "previous_exports": "Exporturi anterioare",
+        "export_separate_files": "Exportă datele în fișiere separate",
+        "exporting_projects": "Se exportă proiectul",
+        "format": "Format",
+        "filters_info": "Aplică filtre pentru a exporta elemente de lucru specifice în funcție de criteriile tale.",
+        "modal": {
+          "title": "Exportă în",
+          "toasts": {
+            "success": {
+              "title": "Export reușit",
+              "message": "Vei putea descărca exportul {entity} din secțiunea de exporturi anterioare."
+            },
+            "error": {
+              "title": "Export eșuat",
+              "message": "Exportul a eșuat. Te rugăm să încerci din nou."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhook-uri",
+        "description": "Automatizează notificările către servicii externe când se produc evenimente ale proiectului.",
+        "title": "Puncte de notificare (Webhooks)",
+        "add_webhook": "Adaugă punct de notificare (webhook)",
+        "modal": {
+          "title": "Creează punct de notificare (webhook)",
+          "details": "Detalii punct de notificare (webhook)",
+          "payload": " URL-ul de trimitere a datelor",
+          "question": "La ce evenimente vrei să activezi acest punct de notificare (webhook)?",
+          "error": "URL-ul este obligatoriu"
+        },
+        "secret_key": {
+          "title": "Cheie secretă",
+          "message": "Generează o cheie de acces pentru a semna datele trimise la punctul de notificare (webhook)"
+        },
+        "options": {
+          "all": "Trimite-mi tot",
+          "individual": "Selectează evenimente individuale"
+        },
+        "toasts": {
+          "created": {
+            "title": "Punct de notificare (webhook) creat",
+            "message": "Punctul de notificare (webhook) a fost creat cu succes"
+          },
+          "not_created": {
+            "title": "Punctul de notificare (webhook) nu a fost creat",
+            "message": "Punctul de notificare (webhook) nu a putut fi creat"
+          },
+          "updated": {
+            "title": "Punctul de notificare (webhook) actualizat",
+            "message": "Punctul de notificare (webhook) a fost actualizat cu succes"
+          },
+          "not_updated": {
+            "title": "Punctul de notificare (webhook) nu a fost actualizat",
+            "message": "Punctul de notificare (webhook) nu a putut fi actualizat"
+          },
+          "removed": {
+            "title": "Punct de notificare (webhook) șters",
+            "message": "Punctul de notificare (webhook) a fost șters cu succes"
+          },
+          "not_removed": {
+            "title": "Punctul de notificare (webhook) nu a fost șters",
+            "message": "Punctul de notificare (webhook) nu a putut fi șters"
+          },
+          "secret_key_copied": {
+            "message": "Cheia secretă a fost copiată în memoria temporară."
+          },
+          "secret_key_not_copied": {
+            "message": "A apărut o eroare la copierea cheii secrete."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Chei secrete API",
+        "description": "Generează chei secrete API sigure pentru a integra datele tale cu sisteme și aplicații externe.",
+        "title": "Chei secrete API",
+        "add_token": "Adaugă token de acces",
+        "create_token": "Creează cheie secretă",
+        "never_expires": "Nu expiră niciodată",
+        "generate_token": "Generează cheie secretă",
+        "generating": "Se generează",
+        "delete": {
+          "title": "Șterge cheia secretă API",
+          "description": "Orice aplicație care folosește această cheie secretă nu va mai avea acces la datele Plane. Această acțiune este ireversibilă.",
+          "success": {
+            "title": "Succes!",
+            "message": "Cheia secretă API a fost ștearsă cu succes"
+          },
+          "error": {
+            "title": "Eroare!",
+            "message": "Cheia secretă API nu a putut fi ștearsă"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integrări",
+        "heading": "Integrări",
+        "description": "Conectează-te cu instrumente și servicii populare pentru a sincroniza munca ta în întregul ecosistem al fluxului de lucru.",
+        "page_title": "Lucrează cu datele tale Plane în aplicațiile disponibile sau în ale tale proprii.",
+        "page_description": "Vizualizează toate integrările utilizate de acest spațiu de lucru sau de tine."
+      },
+      "imports": {
+        "title": "Importuri",
+        "heading": "Importuri",
+        "description": "Conectează-te și importă date din instrumentele tale existente de gestionare a proiectelor pentru a-ți simplifica integrarea fluxului de lucru."
+      },
+      "worklogs": {
+        "title": "Jurnale de lucru",
+        "heading": "Jurnale de lucru",
+        "description": "Descarcă jurnale de lucru (timesheet-uri) pentru oricine din orice proiect."
+      },
+      "group_syncing": {
+        "title": "Sincronizare grupuri",
+        "heading": "Sincronizare grupuri",
+        "description": "Asociați grupurile furnizorului de identitate cu proiecte și roluri. Accesul utilizatorilor se actualizează automat când apartenența la grup se schimbă în IdP-ul dvs., simplificând onboarding-ul și offboarding-ul.",
+        "enable": {
+          "title": "Activați sincronizarea grupurilor",
+          "description": "Adăugați automat utilizatori la proiecte pe baza grupurilor furnizorului de identitate."
+        },
+        "config": {
+          "title": "Configurați sincronizarea grupurilor",
+          "description": "Setați cum grupurile furnizorului de identitate sunt mapate la proiecte și roluri.",
+          "sync_on_login": {
+            "title": "Sincronizare la autentificare",
+            "description": "Actualizați apartenența la grup și accesul la proiect când un utilizator se autentifică."
+          },
+          "sync_offline": {
+            "title": "Sincronizare offline",
+            "description": "Rulează sincronizarea la fiecare șase ore automat, fără a aștepta autentificarea utilizatorilor."
+          },
+          "auto_remove": {
+            "title": "Eliminare automată",
+            "description": "Eliminați automat utilizatorii din proiecte când nu mai corespund grupului."
+          },
+          "group_attribute_key": {
+            "title": "Cheie atribut grup",
+            "description": "Atributul furnizorului de identitate folosit pentru identificarea și sincronizarea grupurilor de utilizatori.",
+            "placeholder": "Grupuri"
+          }
+        },
+        "group_mapping": {
+          "title": "Mapare grupuri",
+          "description": "Asociați grupurile furnizorului de identitate cu proiecte și roluri.",
+          "button_text": "Adăugați nouă sincronizare grup"
+        },
+        "toast": {
+          "updating": "Se actualizează funcția de sincronizare a grupurilor",
+          "success": "Funcția de sincronizare a grupurilor a fost actualizată cu succes.",
+          "error": "Actualizarea funcției de sincronizare a grupurilor a eșuat!"
+        },
+        "delete_modal": {
+          "title": "Ștergeți sincronizarea grupului",
+          "content": "Utilizatorii noi din acest grup de identitate nu vor mai fi adăugați la proiect. Utilizatorii deja adăugați își vor păstra rolul actual."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Grup utilizatori",
+            "required": "Grupul utilizatori este obligatoriu",
+            "placeholder": "Introduceți numele grupurilor IdP"
+          },
+          "project": {
+            "text": "Proiect",
+            "required": "Proiectul este obligatoriu",
+            "placeholder": "Selectați un proiect"
+          },
+          "default_role": {
+            "text": "Rol proiect",
+            "required": "Rolul proiectului este obligatoriu",
+            "placeholder": "Selectați un rol de proiect"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identitate",
+        "heading": "Identitate",
+        "description": "Configurați domeniul dvs. și activați Single sign-on"
+      },
+      "project_states": {
+        "title": "Stări de proiect",
+        "heading": "Vezi prezentarea progresului pentru toate proiectele.",
+        "description": "Stările proiectelor sunt o funcție exclusivă Plane pentru urmărirea progresului tuturor proiectelor tale după orice proprietate a proiectului.",
+        "go_to_settings": "Mergi la setări"
+      },
+      "projects": {
+        "title": "Proiecte",
+        "description": "Gestionează stările proiectelor, activează etichetele proiectelor și alte configurări.",
+        "tabs": {
+          "states": "Stări de proiect",
+          "labels": "Etichete de proiect"
+        }
+      },
+      "templates": {
+        "title": "Șabloane",
+        "heading": "Șabloane",
+        "description": "Economisește 80% din timpul petrecut creând proiecte, activități și pagini atunci când folosești șabloane."
+      },
+      "relations": {
+        "title": "Relații",
+        "heading": "Relații",
+        "description": "Creează și gestionează tipurile de relații care conectează activitățile din spațiul tău de lucru."
+      },
+      "cancel_trial": {
+        "title": "Anulează mai întâi perioada de probă.",
+        "description": "Ai o perioadă de probă activă pentru unul dintre planurile noastre plătite. Te rugăm să o anulezi mai întâi pentru a continua.",
+        "dismiss": "Respinge",
+        "cancel": "Anulează perioada de probă",
+        "cancel_success_title": "Perioada de probă anulată.",
+        "cancel_success_message": "Acum poți șterge workspace-ul.",
+        "cancel_error_title": "Asta nu a funcționat.",
+        "cancel_error_message": "Încearcă din nou, te rog."
+      },
+      "applications": {
+        "internal": "Intern",
+        "title": "Applications",
+        "applicationId_copied": "ID-ul aplicației copiat în clipboard",
+        "clientId_copied": "ID-ul clientului copiat în clipboard",
+        "clientSecret_copied": "Secretul clientului copiat în clipboard",
+        "third_party_apps": "Aplicații de terță parte",
+        "your_apps": "Aplicațiile tale",
+        "connect": "Conectează",
+        "connected": "Conectat",
+        "disconnect": "Deconectează",
+        "install": "Instalează",
+        "installed": "Instalat",
+        "configure": "Configurează",
+        "app_available": "Ai făcut această aplicație disponibilă pentru a fi folosită cu un workspace al Plane",
+        "app_credentials_regenrated": {
+          "title": "Acreditările aplicației au fost regenerate cu succes",
+          "description": "Înlocuiți secretul clientului peste tot unde este folosit. Secretul anterior nu mai este valid."
+        },
+        "app_created": {
+          "title": "Aplicația a fost creată cu succes",
+          "description": "Folosiți acreditările pentru a instala aplicația într-un spațiu de lucru Plane"
+        },
+        "installed_apps": "Aplicații instalate",
+        "all_apps": "Toate aplicațiile",
+        "internal_apps": "Aplicații interne",
+        "app_name_title": "Cum vei numi această aplicație",
+        "app_description_title": {
+          "label": "Descriere lungă",
+          "placeholder": "Scrieți o descriere lungă pentru piață. Apăsați '/' pentru comenzi."
+        },
+        "authorization_grant_type": {
+          "title": "Tipul conexiunii",
+          "description": "Alege dacă aplicația ta trebuie instalată o dată pentru spațiul de lucru sau să permită fiecărui utilizator să își conecteze propriul cont"
+        },
+        "website": {
+          "title": "Site web",
+          "description": "Link către site-ul web al aplicației dvs.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Creator de aplicații",
+          "description": "Persoana sau organizația care creează aplicația."
+        },
+        "app_maker_error": "Maker-ul aplicației este obligatoriu",
+        "setup_url": {
+          "label": "URL de configurare",
+          "description": "Utilizatorii vor fi redirecționați către acest URL atunci când instalează aplicația.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL webhook",
+          "description": "Aici vom trimite evenimente și actualizări webhook din spațiile de lucru unde aplicația dvs. este instalată.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Secret webhook",
+          "description": "Secret folosit pentru a verifica cererile webhook primite.",
+          "placeholder": "Introdu o cheie secretă aleatorie"
+        },
+        "redirect_uris": {
+          "label": "URI de redirecționare (separate prin spațiu)",
+          "description": "Utilizatorii vor fi redirecționați către acest traseu după ce s-au autentificat cu Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Conectează un workspace al Plane pentru a începe să folosesti",
+        "client_id_and_secret": "ID-ul clientului și Secretul",
+        "client_id_and_secret_description": "Copiază și salvează această cheie secretă în Pagini. Nu poți vedea această cheie din nou după ce închizi.",
+        "client_id_and_secret_download": "Poți descărca un fișier CSV cu cheia de aici.",
+        "application_id": "ID-ul aplicației",
+        "client_id": "ID-ul clientului",
+        "client_secret": "Secretul clientului",
+        "export_as_csv": "Exportă ca CSV",
+        "slug_already_exists": "Slug deja există",
+        "failed_to_create_application": "Eroare la crearea aplicației",
+        "upload_logo": "Încarcă Logo",
+        "app_name_error": "Numele aplicației este obligatoriu",
+        "app_short_description_title": "Dați această aplicație o descriere scurtă",
+        "app_short_description_error": "Descrierea scurtă a aplicației este obligatorie",
+        "app_description_error": "Descrierea aplicației este obligatorie",
+        "app_slug_title": "Slug-ul aplicației",
+        "app_slug_error": "Slug-ul aplicației este obligatoriu",
+        "invalid_website_error": "Site web invalid",
+        "webhook_url_title": "URL-ul webhook-ului",
+        "webhook_url_error": "URL-ul webhook-ului este obligatoriu",
+        "invalid_webhook_url_error": "URL-ul webhook-ului este invalid",
+        "redirect_uris_title": "Redirect URIs",
+        "redirect_uris_error": "Redirect URIs sunt obligatorii",
+        "invalid_redirect_uris_error": "Redirect URIs sunt inva",
+        "redirect_uris_description": "Introduceți URI-uri separate prin spațiu unde aplicația va fi redirecționată după utilizator e.g https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Authorized Javascript Origins",
+        "authorized_javascript_origins_error": "Authorized Javascript Origins sunt obligatorii",
+        "invalid_authorized_javascript_origins_error": "Authorized Javascript Origins sunt inva",
+        "authorized_javascript_origins_description": "Introduceți spațiu separat originile unde aplicația va fi permisă să facă cereri e.g app.com example.com",
+        "create_app": "Creează aplicație",
+        "update_app": "Actualizează aplicație",
+        "build_your_own_app": "Construiți propria aplicație",
+        "edit_app_details": "Editează detaliile aplicației",
+        "regenerate_client_secret_description": "Regenerate the client secret. If you regenerate the secret, you can copy the key or download it to a CSV file right after.",
+        "regenerate_client_secret": "Regenerate client secret",
+        "regenerate_client_secret_confirm_title": "Sigur vrei să regenerezi secretul client?",
+        "regenerate_client_secret_confirm_description": "Aplicația care folosește acest secret va înceta să funcționeze. Trebuie să actualizezi secretul în aplicație.",
+        "regenerate_client_secret_confirm_cancel": "Anulează",
+        "regenerate_client_secret_confirm_regenerate": "Regenerate",
+        "read_only_access_to_workspace": "Acces doar pentru citire la workspace-ul tău",
+        "write_access_to_workspace": "Acces pentru scriere la workspace-ul tău",
+        "read_only_access_to_user_profile": "Acces doar pentru citire la profilul tău",
+        "write_access_to_user_profile": "Acces pentru scriere la profilul tău",
+        "connect_app_to_workspace": "Conectează {app} la workspace-ul tău {workspace}",
+        "user_permissions": "Permisiuni pentru utilizator",
+        "user_permissions_description": "Permisiunile pentru utilizator sunt folosite pentru a acorda acces la profilul utilizatorului.",
+        "workspace_permissions": "Permisiuni pentru workspace",
+        "workspace_permissions_description": "Permisiunile pentru workspace sunt folosite pentru a acorda acces la workspace.",
+        "with_the_permissions": "cu permisiunile",
+        "app_consent_title": "{app} cere acces la workspace-ul tău și profilul tău.",
+        "choose_workspace_to_connect_app_with": "Alege un workspace pentru a conecta aplicația",
+        "app_consent_workspace_permissions_title": "{app} ar dori să",
+        "app_consent_user_permissions_title": "{app} poate solicita și permisiuni pentru utilizator pentru următoarele resurse. Aceste permisiuni vor fi solicitate și autorizate doar de un utilizator.",
+        "app_consent_accept_title": "Prin acceptare, tu",
+        "app_consent_accept_1": "Permite aplicației acces la datele Plane în orice loc unde poți folosi aplicația în interior sau în afara Plane",
+        "app_consent_accept_2": "Apreciază politica de confidențialitate și termenii de utilizare a {app}",
+        "accepting": "Acceptând...",
+        "accept": "Acceptă",
+        "categories": "Categorii",
+        "select_app_categories": "Selectează categorii de aplicație",
+        "categories_title": "Categorii",
+        "categories_error": "Categorii sunt obligatorii",
+        "invalid_categories_error": "Categorii sunt inva",
+        "categories_description": "Selectează categorii care descriu cel mai bine aplicația",
+        "supported_plans": "Planuri Suportate",
+        "supported_plans_description": "Selectează planurile de spațiu de lucru care pot instala această aplicație. Lasă gol pentru a permite toate planurile.",
+        "select_plans": "Selectează Planuri",
+        "privacy_policy_url_title": "URL-ul politică de confidențialitate",
+        "privacy_policy_url_error": "Privacy Policy URL is required",
+        "invalid_privacy_policy_url_error": "URL-ul politică de confidențialitate este invalid",
+        "terms_of_service_url_title": "URL-ul termenilor de serviciu",
+        "terms_of_service_url_error": "URL-ul termenilor de serviciu este obligatoriu",
+        "invalid_terms_of_service_url_error": "URL-ul termenilor de serviciu este invalid",
+        "support_url_title": "URL-ul suportului",
+        "support_url_error": "URL-ul suportului este obligatoriu",
+        "invalid_support_url_error": "URL-ul suportului este invalid",
+        "video_url_title": "URL-ul video",
+        "video_url_error": "URL-ul video este obligatoriu",
+        "invalid_video_url_error": "URL-ul video este invalid",
+        "setup_url_error": "URL-ul setup-ului este obligatoriu",
+        "invalid_setup_url_error": "URL-ul setup-ului este invalid",
+        "configuration_url_title": "URL-ul configurării",
+        "configuration_url_error": "URL-ul configurării este obligatoriu",
+        "invalid_configuration_url_error": "URL-ul configurării este invalid",
+        "contact_email_title": "Email-ul contactului",
+        "contact_email_error": "Email-ul contactului este obligatoriu",
+        "invalid_contact_email_error": "Email-ul contactului este invalid",
+        "upload_attachments": "Încarcă atașamente",
+        "uploading_images": "Încarcă {count} imagine{count, plural, one {s} other {s}}",
+        "drop_images_here": "Aruncă imagini aici",
+        "click_to_upload_images": "Click pentru a încărca imagini",
+        "invalid_file_or_exceeds_size_limit": "Fișier invalid sau depășește limita de dimensiune ({size} MB)",
+        "uploading": "Încarcă...",
+        "upload_and_save": "Încarcă și salvează",
+        "app_consent_no_access_title": "Cerere de instalare",
+        "app_consent_no_access_description": "Această aplicație poate fi instalată doar după ce un administrator al workspace-ului o instalează. Contactați administratorul workspace-ului pentru a continua.",
+        "app_consent_unapproved_title": "Această aplicație nu a fost încă revizuită sau aprobată de Plane.",
+        "app_consent_unapproved_description": "Asigură-te că ai încredere în această aplicație înainte de a o conecta la spațiul tău de lucru.",
+        "go_to_app": "Mergi la aplicație",
+        "enable_app_mentions": "Activează mențiunile aplicației",
+        "enable_app_mentions_tooltip": "Când aceasta este activată, utilizatorii pot menționa sau atribui Work Items acestei aplicații.",
+        "scopes": "Domenii",
+        "select_scopes": "Selectați domeniile",
+        "read_access_to": "Acces doar citire la",
+        "write_access_to": "Acces scriere la",
+        "global_permission_expiration": "Domeniile globale expiră în curând. Folosiți domenii granulare în schimb. De exemplu, folosiți project:read în loc de citire globală.",
+        "selected_scopes": "{count} selectate",
+        "scopes_and_permissions": "Domenii și permisiuni",
+        "read": "Citire",
+        "write": "Scriere",
+        "scope_description": {
+          "projects": "Acces la proiecte și toate entitățile legate de proiecte",
+          "wiki": "Acces la wiki și toate entitățile legate de wiki",
+          "workspaces": "Acces la spații de lucru și toate entitățile legate",
+          "stickies": "Acces la stickies și toate entitățile legate",
+          "profile": "Acces la informațiile profilului utilizatorului",
+          "agents": "Acces la agenți și toate entitățile legate de agenți",
+          "assets": "Acces la active și toate entitățile legate de active"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Vezi-ți munca să devină mai inteligentă și mai rapidă cu AI care este conectată în mod nativ la munca ta și la baza de cunoștințe."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Script-uri",
+        "new_script": "Script nou",
+        "description": "Automatizează fluxurile tale de lucru cu scripturi personalizate și reguli de automatizare."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Nicio cheie secretă API creată",
+        "description": "API-ul Plane poate fi folosit pentru a integra datele tale din Plane cu orice sistem extern. Creează o cheie secretă pentru a începe."
+      },
+      "webhooks": {
+        "title": "Niciun punctul de notificare (webhook) adăugat",
+        "description": "Creează puncte de notificare (webhooks) pentru a primi actualizări în timp real și a automatiza acțiuni."
+      },
+      "exports": {
+        "title": "Niciun export efectuat",
+        "description": "Ori de câte ori exporți, vei avea o copie și aici pentru referință."
+      },
+      "imports": {
+        "title": "Niciun import efectuat",
+        "description": "Găsește aici toate importurile anterioare și descarcă-le."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ro/workspace.json b/packages/i18n/src/locales/ro/workspace.json
new file mode 100644
index 0000000..abdc8cb
--- /dev/null
+++ b/packages/i18n/src/locales/ro/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Creează spațiul tău de lucru",
+    "subheading": "Pentru a începe să folosești Plane, trebuie să creezi sau să te alături unui spațiu de lucru.",
+    "form": {
+      "name": {
+        "label": "Denumește-ți spațiul de lucru",
+        "placeholder": "Cel mai bine este să alegi ceva familiar și ușor de recunoscut."
+      },
+      "url": {
+        "label": "Setează URL-ul spațiului de lucru",
+        "placeholder": "Tastează sau lipește un URL",
+        "edit_slug": "Poți edita doar identificatorul URL-ului"
+      },
+      "organization_size": {
+        "label": "Câți oameni vor folosi acest spațiu de lucru?",
+        "placeholder": "Selectează un interval"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Doar administratorul instanței poate crea spații de lucru",
+        "description": "Dacă știi adresa de email a administratorului instanței tale, apasă butonul de mai jos pentru a-l contacta.",
+        "request_button": "Solicită administratorul instanței"
+      },
+      "validation": {
+        "name_alphanumeric": "Numele spațiilor de lucru pot conține doar (' '), ('-'), ('_') și caractere alfanumerice.",
+        "name_length": "Limitează numele la 80 de caractere.",
+        "url_alphanumeric": "URL-urile pot conține doar ('-') și caractere alfanumerice.",
+        "url_length": "Limitează URL-ul la 48 de caractere.",
+        "url_already_taken": "URL-ul spațiului de lucru este deja folosit!"
+      }
+    },
+    "request_email": {
+      "subject": "Solicitare creare spațiu de lucru nou",
+      "body": "Salut administrator(i) instanței,\n\nVă rog să creați un nou spațiu de lucru cu URL-ul [/workspace-name] pentru [scopul creării spațiului de lucru].\n\nMulțumesc,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Creează spațiu de lucru",
+      "loading": "Se creează spațiul de lucru"
+    },
+    "toast": {
+      "success": {
+        "title": "Succes",
+        "message": "Spațiul de lucru a fost creat cu succes"
+      },
+      "error": {
+        "title": "Eroare",
+        "message": "Spațiul de lucru nu a putut fi creat. Te rugăm să încerci din nou."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Prezentare generală a proiectelor, activităților și statisticilor tale",
+        "description": "Bine ai venit în Plane, suntem încântați să te avem aici. Creează primul tău proiect și urmărește activitățile, iar această pagină se va transforma într-un spațiu care te ajută să progresezi. Administratorii vor vedea și elementele care ajută echipa lor să progreseze.",
+        "primary_button": {
+          "text": "Creează primul tău proiect",
+          "comic": {
+            "title": "Totul începe cu un proiect în Plane",
+            "description": "Un proiect poate fi planul de dezvoltare a unui produs, o campanie de marketing sau lansarea unei noi mașini."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Statistici",
+    "page_label": "{workspace} - Statistici",
+    "open_tasks": "Total activități deschise",
+    "error": "A apărut o eroare la preluarea datelor.",
+    "work_items_closed_in": "Activități finalizate în",
+    "selected_projects": "Proiecte selectate",
+    "total_members": "Total membri",
+    "total_cycles": "Total cicluri",
+    "total_modules": "Total module",
+    "pending_work_items": {
+      "title": "Activități în așteptare",
+      "empty_state": "Aici apare analiza activităților în așteptare atribuite colegilor."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Activități finalizate într-un an",
+      "empty_state": "Închide activități pentru a vedea statisticile sub formă de grafic."
+    },
+    "most_work_items_created": {
+      "title": "Cele mai multe activități create",
+      "empty_state": "Aici vor apărea colegii și numărul de activități create de aceștia."
+    },
+    "most_work_items_closed": {
+      "title": "Cele mai multe activități finalizate",
+      "empty_state": "Aici vor apărea colegii și numărul de activități finalizate de aceștia."
+    },
+    "tabs": {
+      "scope_and_demand": "Activități asumate și cerere",
+      "custom": "Analitice personalizate"
+    },
+    "total": "Totalul {entity}",
+    "started_work_items": "{entity} începute",
+    "backlog_work_items": "{entity} din backlog",
+    "un_started_work_items": "{entity} neîncepute",
+    "completed_work_items": "{entity} finalizate",
+    "project_insights": "Informații despre proiect",
+    "summary_of_projects": "Sumarul proiectelor",
+    "all_projects": "Toate proiectele",
+    "trend_on_charts": "Tendință în grafice",
+    "active_projects": "Proiecte active",
+    "customized_insights": "Perspective personalizate",
+    "created_vs_resolved": "Creat vs Rezolvat",
+    "empty_state": {
+      "project_insights": {
+        "title": "Nu există date încă",
+        "description": "Elementele de lucru atribuite ție, împărțite pe stări, vor apărea aici."
+      },
+      "created_vs_resolved": {
+        "title": "Nu există date încă",
+        "description": "Elementele de lucru create și rezolvate în timp vor apărea aici."
+      },
+      "customized_insights": {
+        "title": "Nu există date încă",
+        "description": "Elementele de lucru atribuite ție, împărțite pe stări, vor apărea aici."
+      },
+      "general": {
+        "title": "Urmărește progresul, sarcinile și alocările. Identifică tendințele, elimină blocajele și accelerează munca",
+        "description": "Vezi domeniul versus cererea, estimările și extinderea domeniului. Obține performanțe pe membrii echipei și echipe, și asigură-te că proiectul tău rulează la timp.",
+        "primary_button": {
+          "text": "Începe primul tău proiect",
+          "comic": {
+            "title": "Analitica funcționează cel mai bine cu Cicluri + Module",
+            "description": "Întâi, limitează-ți problemele în Cicluri și, dacă poți, grupează problemele care durează mai mult de un ciclu în Module. Verifică ambele în navigarea din stânga."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Nu există date încă",
+        "description": "Analizele progresului ciclului vor apărea aici. Adăugați elemente de lucru la cicluri pentru a începe să urmăriți progresul."
+      },
+      "module_progress": {
+        "title": "Nu există date încă",
+        "description": "Analizele progresului modulului vor apărea aici. Adăugați elemente de lucru la module pentru a începe să urmăriți progresul."
+      },
+      "intake_trends": {
+        "title": "Nu există date încă",
+        "description": "Analizele tendințelor de intake vor apărea aici. Adăugați elemente de lucru la intake pentru a începe să urmăriți tendințele."
+      }
+    },
+    "upgrade_to_plan": "Upgradează la {plan} pentru a debloca {tab}",
+    "workitem_resolved_vs_pending": "Elemente de lucru rezolvate vs în așteptare",
+    "projects_by_status": "Proiecte după statut",
+    "active_users": "Utilizatori activi",
+    "intake_trends": "Tendințe de admitere"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Proiect} other {Proiecte}}",
+    "create": {
+      "label": "Adaugă proiect"
+    },
+    "network": {
+      "label": "Rețea",
+      "private": {
+        "title": "Privat",
+        "description": "Accesibil doar pe bază de invitație"
+      },
+      "public": {
+        "title": "Public",
+        "description": "Oricine din spațiul de lucru, cu excepția celor din categoria Invitați, se poate alătura"
+      }
+    },
+    "error": {
+      "permission": "Nu ai permisiunea să efectuezi această acțiune.",
+      "cycle_delete": "Ștergerea ciclului a eșuat",
+      "module_delete": "Ștergerea modulului a eșuat",
+      "issue_delete": "Ștergerea activității a eșuat"
+    },
+    "state": {
+      "backlog": "Restante",
+      "unstarted": "Neîncepute",
+      "started": "În desfășurare",
+      "completed": "Finalizate",
+      "cancelled": "Anulate"
+    },
+    "sort": {
+      "manual": "Manual",
+      "name": "Nume",
+      "created_at": "Data creării",
+      "members_length": "Număr de membri"
+    },
+    "scope": {
+      "my_projects": "Proiectele mele",
+      "archived_projects": "Arhivate"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# lună} other{# luni}}",
+      "days_count": "{days, plural, one{# zi} other{# zile}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Niciun proiect activ",
+        "description": "Gândește-te la fiecare proiect ca la părintele muncii orientate pe obiectiv. Proiectele sunt locul unde trăiesc Activitățile, Ciclurile și Modulele și, împreună cu colegii tăi, te ajută să îți atingi obiectivul. Creează un proiect nou sau filtrează pentru a vedea proiectele arhivate.",
+        "primary_button": {
+          "text": "Începe primul tău proiect",
+          "comic": {
+            "title": "Totul începe cu un proiect în Plane",
+            "description": "Un proiect poate fi o foaie de parcurs pentru un produs, o campanie de marketing sau lansarea unei noi mașini."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Niciun proiect",
+        "description": "Pentru a crea activități sau a-ți gestiona activitatea, trebuie să creezi un proiect sau să faci parte dintr-unul.",
+        "primary_button": {
+          "text": "Începe primul tău proiect",
+          "comic": {
+            "title": "Totul începe cu un proiect în Plane",
+            "description": "Un proiect poate fi o foaie de parcurs pentru un produs, o campanie de marketing sau lansarea unei noi mașini."
+          }
+        }
+      },
+      "filter": {
+        "title": "Niciun proiect care să corespundă filtrului",
+        "description": "Nu s-au găsit proiecte care să corespundă criteriilor aplicate.\n Creează un proiect nou."
+      },
+      "search": {
+        "description": "Nu s-au găsit proiecte care să corespundă criteriilor.\nCreează un proiect nou."
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Adaugă perspectivă",
+    "empty_state": {
+      "all-issues": {
+        "title": "Nicio activitate în proiect",
+        "description": "Primul proiect este gata! Acum împarte-ți munca în bucăți gestionabile prin activități. Hai să începem!",
+        "primary_button": {
+          "text": "Creează o nouă activitate"
+        }
+      },
+      "assigned": {
+        "title": "Nicio activitate încă",
+        "description": "Activitățile care ți-au fost atribuite pot fi urmărite de aici.",
+        "primary_button": {
+          "text": "Creează o nouă activitate"
+        }
+      },
+      "created": {
+        "title": "Nicio activitate încă",
+        "description": "Toate activitățile create de tine vor apărea aici. Le poți urmări direct din această pagină.",
+        "primary_button": {
+          "text": "Creează o nouă activitate"
+        }
+      },
+      "subscribed": {
+        "title": "Nicio activitate încă",
+        "description": "Abonează-te la activitățile care te interesează și urmărește-le pe toate aici."
+      },
+      "custom-view": {
+        "title": "Nicio activitate încă",
+        "description": "Elementele de lucru care corespund filtrelor aplicate vor fi afișate aici."
+      }
+    },
+    "delete_view": {
+      "title": "Sunteți sigur că doriți să ștergeți această vizualizare?",
+      "content": "Dacă confirmați, toate opțiunile de sortare, filtrare și afișare + aspectul pe care l-ați ales pentru această vizualizare vor fi șterse permanent fără nicio modalitate de a le restaura."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Salvează o activitate ca schiță",
+    "empty_state": {
+      "title": "Elementele de lucru scrise pe jumătate, și în curând și comentariile, vor apărea aici.",
+      "description": "Ca să testezi, începe să adaugi o activitate și las-o nefinalizată sau creează prima ta schiță mai jos. 😉",
+      "primary_button": {
+        "text": "Creează prima ta schiță"
+      }
+    },
+    "delete_modal": {
+      "title": "Șterge schița",
+      "description": "Ești sigur că vrei să ștergi această schiță? Această acțiune este ireversibilă."
+    },
+    "toasts": {
+      "created": {
+        "success": "Schiță creată",
+        "error": "Activitatea nu a putut fi creată. Te rugăm să încerci din nou."
+      },
+      "deleted": {
+        "success": "Schiță ștearsă"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Scrie o notă, un document sau o bază de cunoștințe completă. Obține ajutorul lui Galileo, asistentul AI al Plane, pentru a începe",
+        "description": "Paginile sunt spații de gândire în Plane. Notează notițe de întâlnire, formatează-le ușor, încorporează elemente de lucru, aranjează-le folosind o bibliotecă de componente și păstrează-le toate în contextul proiectului tău. Pentru a face o muncă scurtă din orice document, invocă Galileo, AI-ul Plane, cu o scurtătură sau click pe un buton.",
+        "primary_button": {
+          "text": "Creează prima ta pagină"
+        }
+      },
+      "private": {
+        "title": "Încă nu există pagini private",
+        "description": "Păstrează-ți gândurile private aici. Când ești gata să le împărtășești, echipa este la doar un click distanță.",
+        "primary_button": {
+          "text": "Creează prima ta pagină"
+        }
+      },
+      "public": {
+        "title": "Încă nu există pagini spațiu de lucru",
+        "description": "Vezi paginile împărtășite cu toată lumea din spațiul tău de lucru chiar aici.",
+        "primary_button": {
+          "text": "Creează prima ta pagină"
+        }
+      },
+      "archived": {
+        "title": "Încă nu există pagini arhivate",
+        "description": "Arhivează paginile care nu sunt pe radarul tău. Accesează-le aici când ai nevoie."
+      },
+      "shared": {
+        "title": "Nicio pagină partajată încă",
+        "description": "Paginile pe care alții le-au partajat cu tine vor apărea aici."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Niciun ciclu activ",
+        "description": "Ciclurile proiectelor tale care includ orice perioadă care cuprinde data de astăzi în intervalul său. Găsește progresul și detaliile tuturor ciclurilor tale active aici."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Importă membri din CSV",
+      "description": "Încărcați un CSV cu coloane: Email, Display Name, First Name, Last Name, Role (5, 15 sau 20)",
+      "dropzone": {
+        "active": "Plasați fișierul CSV aici",
+        "inactive": "Trageți și plasați sau faceți clic pentru a încărca",
+        "file_type": "Sunt acceptate doar fișiere .csv"
+      },
+      "buttons": {
+        "cancel": "Anulare",
+        "import": "Importă",
+        "try_again": "Încearcă din nou",
+        "close": "Închide",
+        "done": "Gata"
+      },
+      "progress": {
+        "uploading": "Se încarcă...",
+        "importing": "Se importă..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Import eșuat",
+          "complete": "Import finalizat"
+        },
+        "message": {
+          "seat_limit": "Nu se pot importa membri din cauza restricțiilor de locuri.",
+          "success": "{count} membr{plural} adăugat{plural} cu succes în spațiul de lucru.",
+          "no_imports": "Nu au fost importați membri din fișierul CSV."
+        },
+        "stats": {
+          "successful": "Reușit",
+          "failed": "Eșuat"
+        },
+        "download_errors": "Descarcă erori"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Fișier invalid",
+          "message": "Sunt acceptate doar fișiere CSV."
+        },
+        "import_failed": {
+          "title": "Import eșuat",
+          "message": "Ceva nu a funcționat."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/accessibility.json b/packages/i18n/src/locales/ru/accessibility.json
new file mode 100644
index 0000000..dd4dde7
--- /dev/null
+++ b/packages/i18n/src/locales/ru/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Логотип рабочей области",
+      "open_workspace_switcher": "Открыть переключатель рабочей области",
+      "open_user_menu": "Открыть пользовательское меню",
+      "open_command_palette": "Открыть палитру команд",
+      "open_extended_sidebar": "Открыть расширенную боковую панель",
+      "close_extended_sidebar": "Закрыть расширенную боковую панель",
+      "create_favorites_folder": "Создать папку избранного",
+      "open_folder": "Открыть папку",
+      "close_folder": "Закрыть папку",
+      "open_favorites_menu": "Открыть меню избранного",
+      "close_favorites_menu": "Закрыть меню избранного",
+      "enter_folder_name": "Введите имя папки",
+      "create_new_project": "Создать новый проект",
+      "open_projects_menu": "Открыть меню проектов",
+      "close_projects_menu": "Закрыть меню проектов",
+      "toggle_quick_actions_menu": "Переключить меню быстрых действий",
+      "open_project_menu": "Открыть меню проекта",
+      "close_project_menu": "Закрыть меню проекта",
+      "collapse_sidebar": "Свернуть боковую панель",
+      "expand_sidebar": "Развернуть боковую панель",
+      "edition_badge": "Открыть модал платных планов"
+    },
+    "auth_forms": {
+      "clear_email": "Очистить email",
+      "show_password": "Показать пароль",
+      "hide_password": "Скрыть пароль",
+      "close_alert": "Закрыть уведомление",
+      "close_popover": "Закрыть всплывающее окно"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/auth.json b/packages/i18n/src/locales/ru/auth.json
new file mode 100644
index 0000000..3757c97
--- /dev/null
+++ b/packages/i18n/src/locales/ru/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Идентичность",
+    "description": "Настройте свой домен для доступа к функциям безопасности, включая единый вход.",
+    "domain_management": {
+      "header": "Управление доменами",
+      "verified_domains": {
+        "header": "Проверенные домены",
+        "description": "Подтвердите право собственности на домен электронной почты, чтобы включить единый вход.",
+        "button_text": "Добавить домен",
+        "list": {
+          "domain_name": "Имя домена",
+          "status": "Статус",
+          "status_verified": "Проверено",
+          "status_failed": "Не удалось",
+          "status_pending": "Ожидает"
+        },
+        "add_domain": {
+          "title": "Добавить домен",
+          "description": "Добавьте свой домен для настройки SSO и его проверки.",
+          "form": {
+            "domain_label": "Домен",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Домен обязателен",
+            "domain_invalid": "Введите действительное имя домена (например, plane.so)"
+          },
+          "primary_button_text": "Добавить домен",
+          "primary_button_loading_text": "Добавление",
+          "toast": {
+            "success_title": "Успех!",
+            "success_message": "Домен успешно добавлен. Пожалуйста, проверьте его, добавив запись DNS TXT.",
+            "error_message": "Не удалось добавить домен. Пожалуйста, попробуйте снова."
+          }
+        },
+        "verify_domain": {
+          "title": "Проверьте свой домен",
+          "description": "Выполните следующие шаги, чтобы проверить свой домен.",
+          "instructions": {
+            "label": "Инструкции",
+            "step_1": "Перейдите в настройки DNS для вашего хостинг-провайдера домена.",
+            "step_2": {
+              "part_1": "Создайте",
+              "part_2": "запись TXT",
+              "part_3": "и вставьте полное значение записи, указанное ниже."
+            },
+            "step_3": "Это обновление обычно занимает несколько минут, но может занять до 72 часов.",
+            "step_4": "Нажмите \"Проверить домен\", чтобы подтвердить после обновления записи DNS."
+          },
+          "verification_code_label": "Значение записи TXT",
+          "verification_code_description": "Добавьте эту запись в настройки DNS",
+          "domain_label": "Домен",
+          "primary_button_text": "Проверить домен",
+          "primary_button_loading_text": "Проверка",
+          "secondary_button_text": "Сделаю это позже",
+          "toast": {
+            "success_title": "Успех!",
+            "success_message": "Домен успешно проверен.",
+            "error_message": "Не удалось проверить домен. Пожалуйста, попробуйте снова."
+          }
+        },
+        "delete_domain": {
+          "title": "Удалить домен",
+          "description": {
+            "prefix": "Вы уверены, что хотите удалить",
+            "suffix": "? Это действие нельзя отменить."
+          },
+          "primary_button_text": "Удалить",
+          "primary_button_loading_text": "Удаление",
+          "secondary_button_text": "Отмена",
+          "toast": {
+            "success_title": "Успех!",
+            "success_message": "Домен успешно удален.",
+            "error_message": "Не удалось удалить домен. Пожалуйста, попробуйте снова."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Единый вход",
+      "disabled_message": "Добавьте проверенный домен для настройки SSO",
+      "configure": {
+        "create": "Настроить",
+        "update": "Редактировать"
+      },
+      "switch_alert_modal": {
+        "title": "Переключить метод SSO на {newProviderShortName}?",
+        "content": "Вы собираетесь включить {newProviderLongName} ({newProviderShortName}). Это действие автоматически отключит {activeProviderLongName} ({activeProviderShortName}). Пользователи, пытающиеся войти через {activeProviderShortName}, больше не смогут получить доступ к платформе, пока не переключатся на новый метод. Вы уверены, что хотите продолжить?",
+        "primary_button_text": "Переключить",
+        "primary_button_text_loading": "Переключение",
+        "secondary_button_text": "Отмена"
+      },
+      "form_section": {
+        "title": "Детали, предоставленные IdP для {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Сохранение",
+        "save_changes": "Сохранить изменения",
+        "configure_only": "Только настройка",
+        "configure_and_enable": "Настроить и включить",
+        "default": "Сохранить"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} детали, предоставленные для вашего IdP",
+        "button_text": "Получить детали настройки"
+      },
+      "saml": {
+        "header": "Включить SAML",
+        "description": "Настройте своего поставщика удостоверений SAML для включения единого входа.",
+        "configure": {
+          "title": "Включить SAML",
+          "description": "Подтвердите право собственности на домен электронной почты для доступа к функциям безопасности, включая единый вход.",
+          "toast": {
+            "success_title": "Успех!",
+            "create_success_message": "Поставщик SAML успешно создан.",
+            "update_success_message": "Поставщик SAML успешно обновлен.",
+            "error_title": "Ошибка!",
+            "error_message": "Не удалось сохранить поставщика SAML. Пожалуйста, попробуйте снова."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Веб-детали",
+            "entity_id": {
+              "label": "ID сущности | Аудитория | Информация о метаданных",
+              "description": "Мы сгенерируем эту часть метаданных, которая идентифицирует это приложение Plane как авторизованный сервис в вашем IdP."
+            },
+            "callback_url": {
+              "label": "URL единого входа",
+              "description": "Мы сгенерируем это для вас. Добавьте это в поле URL перенаправления входа вашего IdP."
+            },
+            "logout_url": {
+              "label": "URL единого выхода",
+              "description": "Мы сгенерируем это для вас. Добавьте это в поле URL перенаправления единого выхода вашего IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Мобильные детали",
+            "entity_id": {
+              "label": "ID сущности | Аудитория | Информация о метаданных",
+              "description": "Мы сгенерируем эту часть метаданных, которая идентифицирует это приложение Plane как авторизованный сервис в вашем IdP."
+            },
+            "callback_url": {
+              "label": "URL единого входа",
+              "description": "Мы сгенерируем это для вас. Добавьте это в поле URL перенаправления входа вашего IdP."
+            },
+            "logout_url": {
+              "label": "URL единого выхода",
+              "description": "Мы сгенерируем это для вас. Добавьте это в поле URL перенаправления выхода вашего IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Детали сопоставления",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Включить OIDC",
+        "description": "Настройте своего поставщика удостоверений OIDC для включения единого входа.",
+        "configure": {
+          "title": "Включить OIDC",
+          "description": "Подтвердите право собственности на домен электронной почты для доступа к функциям безопасности, включая единый вход.",
+          "toast": {
+            "success_title": "Успех!",
+            "create_success_message": "Поставщик OIDC успешно создан.",
+            "update_success_message": "Поставщик OIDC успешно обновлен.",
+            "error_title": "Ошибка!",
+            "error_message": "Не удалось сохранить поставщика OIDC. Пожалуйста, попробуйте снова."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Веб-детали",
+            "origin_url": {
+              "label": "URL источника",
+              "description": "Мы сгенерируем это для этого приложения Plane. Добавьте это как доверенный источник в соответствующее поле вашего IdP."
+            },
+            "callback_url": {
+              "label": "URL перенаправления",
+              "description": "Мы сгенерируем это для вас. Добавьте это в поле URL перенаправления входа вашего IdP."
+            },
+            "logout_url": {
+              "label": "URL выхода",
+              "description": "Мы сгенерируем это для вас. Добавьте это в поле URL перенаправления выхода вашего IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Мобильные детали",
+            "origin_url": {
+              "label": "URL источника",
+              "description": "Мы сгенерируем это для этого приложения Plane. Добавьте это как доверенный источник в соответствующее поле вашего IdP."
+            },
+            "callback_url": {
+              "label": "URL перенаправления",
+              "description": "Мы сгенерируем это для вас. Добавьте это в поле URL перенаправления входа вашего IdP."
+            },
+            "logout_url": {
+              "label": "URL выхода",
+              "description": "Мы сгенерируем это для вас. Добавьте это в поле URL перенаправления выхода вашего IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "Email",
+        "placeholder": "name@company.com",
+        "errors": {
+          "required": "Email обязателен",
+          "invalid": "Email недействителен"
+        }
+      },
+      "password": {
+        "label": "Пароль",
+        "set_password": "Установить пароль",
+        "placeholder": "Введите пароль",
+        "confirm_password": {
+          "label": "Подтвердите пароль",
+          "placeholder": "Подтвердите пароль"
+        },
+        "current_password": {
+          "label": "Текущий пароль"
+        },
+        "new_password": {
+          "label": "Новый пароль",
+          "placeholder": "Введите новый пароль"
+        },
+        "change_password": {
+          "label": {
+            "default": "Сменить пароль",
+            "submitting": "Смена пароля"
+          }
+        },
+        "errors": {
+          "match": "Пароли не совпадают",
+          "empty": "Пожалуйста, введите ваш пароль",
+          "length": "Длина пароля должна быть более 8 символов",
+          "strength": {
+            "weak": "Слабый пароль",
+            "strong": "Сильный пароль"
+          }
+        },
+        "submit": "Установить пароль",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Успех!",
+              "message": "Пароль успешно изменён."
+            },
+            "error": {
+              "title": "Ошибка!",
+              "message": "Что-то пошло не так. Пожалуйста, попробуйте снова."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Уникальный код",
+        "placeholder": "123456",
+        "paste_code": "Вставьте код, отправленный на ваш email",
+        "requesting_new_code": "Запрос нового кода",
+        "sending_code": "Отправка кода"
+      },
+      "already_have_an_account": "Уже есть аккаунт?",
+      "login": "Войти",
+      "create_account": "Создать аккаунт",
+      "new_to_plane": "Впервые в Plane?",
+      "back_to_sign_in": "Вернуться к входу",
+      "resend_in": "Отправить снова через {seconds} секунд",
+      "sign_in_with_unique_code": "Войти с уникальным кодом",
+      "forgot_password": "Забыли пароль?",
+      "username": {
+        "label": "Имя пользователя",
+        "placeholder": "Введите ваше имя пользователя"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Создайте аккаунт, чтобы начать управлять работой с вашей командой.",
+        "step": {
+          "email": {
+            "header": "Регистрация",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Регистрация",
+            "sub_header": "Зарегистрируйтесь, используя комбинацию email-пароль."
+          },
+          "unique_code": {
+            "header": "Регистрация",
+            "sub_header": "Зарегистрируйтесь, используя уникальный код, отправленный на указанный выше email."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Попробуйте установить сильный пароль для продолжения"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Войдите, чтобы начать управлять работой с вашей командой.",
+        "step": {
+          "email": {
+            "header": "Войти или зарегистрироваться",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Войти или зарегистрироваться",
+            "sub_header": "Используйте комбинацию email-пароль для входа."
+          },
+          "unique_code": {
+            "header": "Войти или зарегистрироваться",
+            "sub_header": "Войдите, используя уникальный код, отправленный на указанный выше email."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Сбросьте ваш пароль",
+      "description": "Введите проверенный email вашего аккаунта, и мы отправим вам ссылку для сброса пароля.",
+      "email_sent": "Мы отправили ссылку для сброса на ваш email",
+      "send_reset_link": "Отправить ссылку для сброса",
+      "errors": {
+        "smtp_not_enabled": "Мы видим, что ваш администратор не включил SMTP, мы не сможем отправить ссылку для сброса пароля"
+      },
+      "toast": {
+        "success": {
+          "title": "Email отправлен",
+          "message": "Проверьте ваши входящие для ссылки на сброс пароля. Если она не появится в течение нескольких минут, проверьте папку спама."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Что-то пошло не так. Пожалуйста, попробуйте снова."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Установите новый пароль",
+      "description": "Обеспечьте безопасность вашего аккаунта с помощью сильного пароля"
+    },
+    "set_password": {
+      "title": "Обеспечьте безопасность вашего аккаунта",
+      "description": "Установка пароля помогает вам безопасно входить в систему"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось выйти. Пожалуйста, попробуйте снова."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Продолжить с {ldapProviderName}",
+        "sub_header": "Введите ваши учетные данные {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/automation.json b/packages/i18n/src/locales/ru/automation.json
new file mode 100644
index 0000000..a97e9e6
--- /dev/null
+++ b/packages/i18n/src/locales/ru/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Пользовательские автоматизации",
+      "create_automation": "Создать автоматизацию"
+    },
+    "scope": {
+      "label": "Область",
+      "run_on": "Запускать на"
+    },
+    "trigger": {
+      "label": "Триггер",
+      "add_trigger": "Добавить триггер",
+      "sidebar_header": "Настройка триггера",
+      "input_label": "Какой триггер для этой автоматизации?",
+      "input_placeholder": "Выберите опцию",
+      "section_plane_events": "События Plane",
+      "section_time_based": "По времени",
+      "fixed_schedule": "Фиксированное расписание",
+      "schedule": {
+        "frequency": "Частота",
+        "select_day": "Выбрать день",
+        "day_of_month": "День месяца",
+        "monthly_every": "Каждый",
+        "monthly_day_aria": "День {day}",
+        "time": "Время",
+        "hour": "Час",
+        "minute": "Минута",
+        "hour_suffix": "ч",
+        "minute_suffix": "мин",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Часовой пояс",
+        "timezone_placeholder": "Выберите часовой пояс",
+        "frequency_daily": "Ежедневно",
+        "frequency_weekly": "Еженедельно",
+        "frequency_monthly": "Ежемесячно",
+        "on": "В",
+        "validation_weekly_day_required": "Выберите хотя бы один день недели.",
+        "validation_monthly_date_required": "Выберите день месяца.",
+        "main_content_schedule_summary_daily": "Каждый день в {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Каждую неделю в {days} в {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Каждый месяц в день {day} в {time} ({timezone}).",
+        "schedule_mode": "Режим расписания",
+        "schedule_mode_fixed": "Фиксированный",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Введите Cron-выражение",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Недопустимое Cron-выражение.",
+        "cron_preview": "Это Cron-выражение запускает \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Назад",
+        "next": "Добавить действие"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Нельзя изменить тип триггера после создания"
+      }
+    },
+    "condition": {
+      "label": "Условие",
+      "add_condition": "Добавить условие",
+      "adding_condition": "Добавление условия"
+    },
+    "action": {
+      "label": "Действие",
+      "add_action": "Добавить действие",
+      "sidebar_header": "Действия",
+      "input_label": "Что делает автоматизация?",
+      "input_placeholder": "Выберите опцию",
+      "handler_name": {
+        "add_comment": "Добавить комментарий",
+        "change_property": "Изменить свойство",
+        "run_script": "Запустить скрипт"
+      },
+      "configuration": {
+        "label": "Конфигурация",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Выберите свойство",
+            "change_type": "Выберите",
+            "property_value_select": "{count, plural, one{Выберите значение} other{Выберите значения}}",
+            "property_value_select_date": "Выберите дату"
+          },
+          "validation": {
+            "property_name_required": "Название свойства обязательно",
+            "change_type_required": "Тип изменения обязателен",
+            "property_value_required": "Значение свойства обязательно"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Добавить комментарий"
+      },
+      "run_script_block": {
+        "title": "Запустить скрипт"
+      },
+      "change_property_block": {
+        "title": "Изменить свойство"
+      },
+      "validation": {
+        "delete_only_action": "Отключите автоматизацию перед удалением её единственного действия."
+      }
+    },
+    "conjunctions": {
+      "and": "И",
+      "or": "Или",
+      "if": "Если",
+      "then": "Тогда"
+    },
+    "enable": {
+      "alert": "Нажмите 'Включить', когда ваша автоматизация будет готова. После включения автоматизация будет готова к запуску.",
+      "validation": {
+        "required": "Автоматизация должна иметь триггер и хотя бы одно действие для включения."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Автоматизация должна быть отключена перед удалением."
+      }
+    },
+    "table": {
+      "title": "Название автоматизации",
+      "scope": "Область",
+      "projects": "Проекты",
+      "last_run_on": "Последний запуск",
+      "created_on": "Создано",
+      "last_updated_on": "Последнее обновление",
+      "last_run_status": "Статус последнего запуска",
+      "average_duration": "Средняя продолжительность",
+      "owner": "Владелец",
+      "executions": "Выполнения"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Создать автоматизацию",
+        "update": "Обновить автоматизацию"
+      },
+      "title": {
+        "placeholder": "Назовите вашу автоматизацию.",
+        "required_error": "Название обязательно"
+      },
+      "description": {
+        "placeholder": "Опишите вашу автоматизацию."
+      },
+      "submit_button": {
+        "create": "Создать автоматизацию",
+        "update": "Обновить автоматизацию"
+      }
+    },
+    "delete_modal": {
+      "heading": "Удалить автоматизацию"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Показать ошибки",
+        "all": "Все",
+        "only_activity": "Только активность",
+        "only_run_history": "Только история запусков"
+      },
+      "run_history": {
+        "initiator": "Инициатор"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Успешно!",
+          "message": "Автоматизация успешно создана."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось создать автоматизацию."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Успешно!",
+          "message": "Автоматизация успешно обновлена."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось обновить автоматизацию."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Успешно!",
+          "message": "Автоматизация успешно включена."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось включить автоматизацию."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Успешно!",
+          "message": "Автоматизация успешно отключена."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось отключить автоматизацию."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Автоматизация удалена",
+          "message": "{name}, автоматизация, была удалена из вашего проекта."
+        },
+        "error": {
+          "title": "Не удалось удалить эту автоматизацию.",
+          "message": "Попробуйте удалить её снова или вернитесь позже. Если не удаётся удалить, свяжитесь с нами."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Ошибка!",
+            "message": "Не удалось создать действие. Пожалуйста, попробуйте снова!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Ошибка!",
+            "message": "Не удалось обновить действие. Пожалуйста, попробуйте снова!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Пока нет автоматизаций для отображения.",
+        "description": "Автоматизации помогают устранить повторяющиеся задачи, устанавливая триггеры, условия и действия. Создайте одну, чтобы сэкономить время и поддерживать работу без усилий."
+      },
+      "upgrade": {
+        "title": "Автоматизации",
+        "description": "Автоматизации - это способ автоматизировать задачи в вашем проекте.",
+        "sub_description": "Верните 80% своего административного времени, используя Автоматизации."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Выберите проекты для запуска этой автоматизации",
+        "all_projects": {
+          "label": "Все проекты",
+          "description": "Автоматизация будет запускаться для всех проектов в рабочем пространстве."
+        },
+        "select_projects": {
+          "label": "Выбрать проекты",
+          "description": "Автоматизация будет запускаться для выбранных проектов в рабочем пространстве.",
+          "placeholder": "Выберите проекты"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Автоматизации",
+        "title": "Автоматизации",
+        "description": "Стандартизируйте процессы в вашем рабочем пространстве с помощью глобальных автоматизаций."
+      },
+      "table": {
+        "scope": {
+          "global": "Глобальный",
+          "project": {
+            "label": "Проект",
+            "multiple": "Несколько",
+            "all": "Все"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/common.json b/packages/i18n/src/locales/ru/common.json
new file mode 100644
index 0000000..c2881e5
--- /dev/null
+++ b/packages/i18n/src/locales/ru/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Мы работаем над этим. Если вам нужна немедленная помощь,",
+    "reach_out_to_us": "свяжитесь с нами",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "В противном случае попробуйте периодически обновлять страницу или посетите нашу",
+    "status_page": "страницу статуса"
+  },
+  "submit": "Отправить",
+  "cancel": "Отменить",
+  "loading": "Загрузка",
+  "error": "Ошибка",
+  "success": "Успешно",
+  "warning": "Предупреждение",
+  "info": "Информация",
+  "close": "Закрыть",
+  "yes": "Да",
+  "no": "Нет",
+  "ok": "OK",
+  "name": "Имя",
+  "unknown_user": "Неизвестный пользователь",
+  "description": "Описание",
+  "search": "Поиск",
+  "add_member": "Добавить участника",
+  "adding_members": "Добавление участников",
+  "remove_member": "Удалить участника",
+  "add_members": "Добавить участников",
+  "adding_member": "Добавление участников",
+  "remove_members": "Удалить участников",
+  "add": "Добавить",
+  "adding": "Добавление",
+  "remove": "Удалить",
+  "add_new": "Добавить новый",
+  "remove_selected": "Удалить выбранное",
+  "first_name": "Имя",
+  "last_name": "Фамилия",
+  "email": "Email",
+  "display_name": "Отображаемое имя",
+  "role": "Роль",
+  "timezone": "Часовой пояс",
+  "avatar": "Аватар",
+  "cover_image": "Обложка",
+  "password": "Пароль",
+  "change_cover": "Изменить обложку",
+  "language": "Язык",
+  "saving": "Сохранение",
+  "save_changes": "Сохранить изменения",
+  "deactivate_account": "Деактивировать аккаунт",
+  "deactivate_account_description": "При деактивации аккаунта все данные и ресурсы будут безвозвратно удалены и не могут быть восстановлены.",
+  "profile_settings": "Настройки профиля",
+  "your_account": "Ваш аккаунт",
+  "security": "Безопасность",
+  "activity": "Активность",
+  "activity_empty_state": {
+    "no_activity": "Пока нет активности",
+    "no_transitions": "Пока нет переходов",
+    "no_comments": "Комментариев пока нет",
+    "no_worklogs": "Записей о работе пока нет",
+    "no_history": "Истории пока нет"
+  },
+  "preferences": "Настройки",
+  "language_and_time": "Язык и время",
+  "notifications": "Уведомления",
+  "workspaces": "Рабочие пространства",
+  "create_workspace": "Создать рабочее пространство",
+  "invitations": "Приглашения",
+  "summary": "Сводка",
+  "assigned": "Назначено",
+  "created": "Создано",
+  "subscribed": "Подписались",
+  "you_do_not_have_the_permission_to_access_this_page": "У вас нет прав для доступа к этой странице.",
+  "something_went_wrong_please_try_again": "Что-то пошло не так. Пожалуйста, попробуйте еще раз.",
+  "load_more": "Загрузить еще",
+  "select_or_customize_your_interface_color_scheme": "Выберите или настройте цветовую схему интерфейса.",
+  "timezone_setting": "Текущая настройка часового пояса.",
+  "language_setting": "Выберите язык, используемый в интерфейсе.",
+  "settings_moved_to_preferences": "Настройки часового пояса и языка перенесены в раздел «Настройки».",
+  "go_to_preferences": "Перейти к настройкам",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Выберите стиль движения курсора, который подходит именно вам.",
+  "theme": "Тема",
+  "smooth_cursor": "Плавный курсор",
+  "system_preference": "Системные настройки",
+  "light": "Светлая",
+  "dark": "Темная",
+  "light_contrast": "Светлая высококонтрастная",
+  "dark_contrast": "Темная высококонтрастностная",
+  "custom": "Пользовательская тема",
+  "select_your_theme": "Выберите тему",
+  "customize_your_theme": "Настройте свою тему",
+  "background_color": "Цвет фона",
+  "text_color": "Цвет текста",
+  "primary_color": "Основной цвет (темы)",
+  "sidebar_background_color": "Цвет фона боковой панели",
+  "sidebar_text_color": "Цвет текста боковой панели",
+  "set_theme": "Установить тему",
+  "enter_a_valid_hex_code_of_6_characters": "Введите корректный HEX-код из 6 символов",
+  "background_color_is_required": "Требуется цвет фона",
+  "text_color_is_required": "Требуется цвет текста",
+  "primary_color_is_required": "Требуется основной цвет",
+  "sidebar_background_color_is_required": "Требуется цвет фона боковой панели",
+  "sidebar_text_color_is_required": "Требуется цвет текста боковой панели",
+  "updating_theme": "Обновление темы",
+  "theme_updated_successfully": "Тема успешно обновлена",
+  "failed_to_update_the_theme": "Не удалось обновить тему",
+  "email_notifications": "Email-уведомления",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Будьте в курсе рабочих элементов, на которые вы подписаны. Включите уведомления.",
+  "email_notification_setting_updated_successfully": "Настройки email-уведомлений успешно обновлены",
+  "failed_to_update_email_notification_setting": "Не удалось обновить настройки email-уведомлений",
+  "notify_me_when": "Уведомлять меня, когда",
+  "property_changes": "Изменения свойств",
+  "property_changes_description": "Уведомлять при изменении свойств рабочих элементов: назначенные, приоритет, оценки и прочее",
+  "state_change": "Изменение статуса",
+  "state_change_description": "Уведомлять при изменении статуса рабочего элемента",
+  "issue_completed": "Рабочий элемент выполнен",
+  "issue_completed_description": "Уведомлять только при выполнении рабочего элемента",
+  "comments": "Комментарии",
+  "comments_description": "Уведомлять при добавлении комментариев к рабочему элементу",
+  "mentions": "Упоминания",
+  "mentions_description": "Уведомлять только при упоминании меня в комментариях или описании",
+  "old_password": "Старый пароль",
+  "general_settings": "Общие настройки",
+  "sign_out": "Выйти",
+  "signing_out": "Выход...",
+  "active_cycles": "Активные циклы",
+  "active_cycles_description": "Мониторинг циклов по проектам, отслеживание приоритетных рабочих элементов и фокусировка на проблемных циклах.",
+  "on_demand_snapshots_of_all_your_cycles": "Моментальные снимки всех ваших циклов",
+  "upgrade": "Обновить",
+  "10000_feet_view": "Обзор всех активных циклов с высоты",
+  "10000_feet_view_description": "Общий обзор выполняющихся циклов во всех проектах вместо переключения между циклами в каждом проекте.",
+  "get_snapshot_of_each_active_cycle": "Получить снимок каждого активного цикла",
+  "get_snapshot_of_each_active_cycle_description": "Отслеживайте ключевые метрики активных циклов, их прогресс и соответствие срокам.",
+  "compare_burndowns": "Сравнение графиков выгорания",
+  "compare_burndowns_description": "Мониторинг производительности команд через анализ графиков выполнения циклов.",
+  "quickly_see_make_or_break_issues": "Быстрый просмотр критических рабочих элементов",
+  "quickly_see_make_or_break_issues_description": "Просмотр высокоприоритетных рабочих элементов с указанием сроков для каждого цикла в один клик.",
+  "zoom_into_cycles_that_need_attention": "Фокусировка на проблемных циклах",
+  "zoom_into_cycles_that_need_attention_description": "Исследование состояния циклов, не соответствующих ожиданиям, в один клик.",
+  "stay_ahead_of_blockers": "Предупреждение блокирующих рабочих элементов",
+  "stay_ahead_of_blockers_description": "Выявление проблем между проектами и скрытых зависимостей между циклами.",
+  "analytics": "Аналитика",
+  "workspace_invites": "Приглашения в рабочее пространство",
+  "enter_god_mode": "Режим администратора",
+  "workspace_logo": "Логотип рабочего пространства",
+  "new_issue": "Новый рабочий элемент",
+  "your_work": "Ваша работа",
+  "drafts": "Черновики",
+  "projects": "Проекты",
+  "views": "Представления",
+  "archives": "Архивы",
+  "settings": "Настройки",
+  "failed_to_move_favorite": "Ошибка перемещения избранного",
+  "favorites": "Избранное",
+  "no_favorites_yet": "Нет избранного",
+  "create_folder": "Создать папку",
+  "new_folder": "Новая папка",
+  "favorite_updated_successfully": "Избранное успешно обновлено",
+  "favorite_created_successfully": "Избранное успешно создано",
+  "folder_already_exists": "Папка уже существует",
+  "folder_name_cannot_be_empty": "Имя папки не может быть пустым",
+  "something_went_wrong": "Что-то пошло не так",
+  "failed_to_reorder_favorite": "Ошибка изменения порядка избранного",
+  "favorite_removed_successfully": "Избранное успешно удалено",
+  "failed_to_create_favorite": "Ошибка создания избранного",
+  "failed_to_rename_favorite": "Ошибка переименования избранного",
+  "project_link_copied_to_clipboard": "Ссылка на проект скопирована в буфер обмена",
+  "link_copied": "Ссылка скопирована",
+  "add_project": "Добавить проект",
+  "create_project": "Создать проект",
+  "failed_to_remove_project_from_favorites": "Не удалось удалить проект из избранного. Попробуйте снова.",
+  "project_created_successfully": "Проект успешно создан",
+  "project_created_successfully_description": "Проект успешно создан. Теперь вы можете добавлять рабочие элементы.",
+  "project_name_already_taken": "Имя проекта уже используется.",
+  "project_name_cannot_contain_special_characters": "Название проекта не может содержать специальные символы.",
+  "project_identifier_already_taken": "Идентификатор проекта уже используется.",
+  "project_cover_image_alt": "Обложка проекта",
+  "name_is_required": "Требуется имя",
+  "title_should_be_less_than_255_characters": "Заголовок должен быть короче 255 символов",
+  "project_name": "Название проекта",
+  "project_id_must_be_at_least_1_character": "ID проекта должен содержать минимум 1 символ",
+  "project_id_must_be_at_most_5_characters": "ID проекта должен содержать максимум 5 символов",
+  "project_id": "ID проекта",
+  "project_id_tooltip_content": "Помогает идентифицировать рабочие элементы в проекте. Макс. 50 символов.",
+  "description_placeholder": "Описание",
+  "only_alphanumeric_non_latin_characters_allowed": "Допускаются только буквенно-цифровые и нелатинские символы.",
+  "project_id_is_required": "Требуется ID проекта",
+  "project_id_allowed_char": "Допускаются только буквенно-цифровые и нелатинские символы.",
+  "project_id_min_char": "ID проекта должен содержать минимум 1 символ",
+  "project_id_max_char": "ID проекта должен содержать максимум {max} символов",
+  "project_description_placeholder": "Введите описание проекта",
+  "select_network": "Выбрать сеть",
+  "lead": "Руководитель",
+  "date_range": "Диапазон дат",
+  "private": "Приватный",
+  "public": "Публичный",
+  "accessible_only_by_invite": "Доступ только по приглашению",
+  "anyone_in_the_workspace_except_guests_can_join": "Все участники рабочего пространства (кроме гостей) могут присоединиться",
+  "creating": "Создание",
+  "creating_project": "Создание проекта",
+  "adding_project_to_favorites": "Добавление проекта в избранное",
+  "project_added_to_favorites": "Проект добавлен в избранное",
+  "couldnt_add_the_project_to_favorites": "Не удалось добавить проект в избранное. Попробуйте снова.",
+  "removing_project_from_favorites": "Удаление проекта из избранного",
+  "project_removed_from_favorites": "Проект удален из избранного",
+  "couldnt_remove_the_project_from_favorites": "Не удалось удалить проект из избранного. Попробуйте снова.",
+  "add_to_favorites": "Добавить в избранное",
+  "remove_from_favorites": "Удалить из избранного",
+  "publish_project": "Опубликовать проект",
+  "publish": "Опубликовать",
+  "copy_link": "Копировать ссылку",
+  "leave_project": "Покинуть проект",
+  "join_the_project_to_rearrange": "Присоединитесь к проекту для изменения порядка",
+  "drag_to_rearrange": "Перетащите для изменения порядка",
+  "congrats": "Поздравляем!",
+  "open_project": "Открыть проект",
+  "issues": "Рабочие элементы",
+  "cycles": "Циклы",
+  "modules": "Модули",
+  "pages": "Страницы",
+  "intake": "Предложения",
+  "renew": "Продлить",
+  "preview": "Предпросмотр",
+  "time_tracking": "Учет времени",
+  "work_management": "Управление рабочими элементами",
+  "projects_and_issues": "Проекты и рабочие элементы",
+  "projects_and_issues_description": "Включить/отключить для этого проекта",
+  "cycles_description": "Ограничьте работу по времени для каждого проекта и при необходимости изменяйте период. Один цикл может длиться 2 недели, следующий — 1 неделю.",
+  "modules_description": "Организуйте работу в подпроекты с назначенными руководителями и исполнителями.",
+  "views_description": "Сохраните пользовательские сортировки, фильтры и параметры отображения или поделитесь ими с командой.",
+  "pages_description": "Создавайте и редактируйте свободный контент: заметки, документы, что угодно.",
+  "intake_description": "Позвольте участникам вне команды сообщать об ошибках, оставлять отзывы и предложения, не нарушая ваш рабочий процесс.",
+  "time_tracking_description": "Записывайте время, потраченное на рабочие элементы и проекты.",
+  "work_management_description": "Управление рабочими элементами и проектами",
+  "documentation": "Документация",
+  "message_support": "Написать в поддержку",
+  "contact_sales": "Связаться с отделом продаж",
+  "hyper_mode": "Гиперрежим",
+  "keyboard_shortcuts": "Горячие клавиши",
+  "whats_new": "Что нового?",
+  "version": "Версия",
+  "we_are_having_trouble_fetching_the_updates": "Возникли проблемы с получением обновлений.",
+  "our_changelogs": "наши журналы изменений",
+  "for_the_latest_updates": "для последних обновлений.",
+  "please_visit": "Пожалуйста, посетите",
+  "docs": "Документация",
+  "full_changelog": "Полный журнал изменений",
+  "support": "Поддержка",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Работает на Plane Pages",
+  "please_select_at_least_one_invitation": "Пожалуйста, выберите хотя бы одно приглашение.",
+  "please_select_at_least_one_invitation_description": "Для присоединения к рабочему пространству выберите хотя бы одно приглашение.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Вы получили приглашение присоединиться к рабочему пространству",
+  "join_a_workspace": "Присоединиться к рабочему пространству",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Вы получили приглашение присоединиться к рабочему пространству",
+  "join_a_workspace_description": "Присоединиться к рабочему пространству",
+  "accept_and_join": "Принять и присоединиться",
+  "go_home": "На главную",
+  "no_pending_invites": "Нет ожидающих приглашений",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Здесь отображаются приглашения в рабочие пространства",
+  "back_to_home": "Вернуться на главную",
+  "workspace_name": "название-рабочего-пространства",
+  "deactivate_your_account": "Деактивировать ваш аккаунт",
+  "deactivate_your_account_description": "После деактивации вы не сможете получать рабочие элементы и оплачивать рабочее пространство. Для реактивации потребуется новое приглашение.",
+  "deactivating": "Деактивация...",
+  "confirm": "Подтвердить",
+  "confirming": "Подтверждение...",
+  "draft_created": "Черновик создан",
+  "issue_created_successfully": "Рабочий элемент успешно создан",
+  "draft_creation_failed": "Ошибка создания черновика",
+  "issue_creation_failed": "Ошибка создания рабочего элемента",
+  "draft_issue": "Черновик рабочего элемента",
+  "issue_updated_successfully": "Рабочий элемент успешно обновлен",
+  "issue_could_not_be_updated": "Не удалось обновить рабочий элемент",
+  "create_a_draft": "Создать черновик",
+  "save_to_drafts": "Сохранить в черновики",
+  "save": "Сохранить",
+  "update": "Обновить",
+  "updating": "Обновление...",
+  "create_new_issue": "Создать новый рабочий элемент",
+  "editor_is_not_ready_to_discard_changes": "Редактор не готов отменить изменения",
+  "failed_to_move_issue_to_project": "Ошибка перемещения рабочего элемента в проект",
+  "create_more": "Создать еще",
+  "add_to_project": "Добавить в проект",
+  "discard": "Отменить",
+  "duplicate_issue_found": "Найден дублирующийся рабочий элемент",
+  "duplicate_issues_found": "Найдены дублирующиеся рабочие элементы",
+  "no_matching_results": "Нет совпадений",
+  "title_is_required": "Требуется заголовок",
+  "title": "Заголовок",
+  "state": "Статус",
+  "transition": "Переход",
+  "history": "История",
+  "priority": "Приоритет",
+  "none": "Нет",
+  "urgent": "Срочный",
+  "high": "Высокий",
+  "medium": "Средний",
+  "low": "Низкий",
+  "members": "Участники",
+  "assignee": "Назначенный",
+  "assignees": "Назначенные",
+  "subscriber": "{count, plural, one{# Подписчик} few{# Подписчика} other{# Подписчиков}}",
+  "you": "Вы",
+  "labels": "Метки",
+  "create_new_label": "Создать новую метку",
+  "label_name": "Название метки",
+  "failed_to_create_label": "Не удалось создать метку. Пожалуйста, попробуйте снова.",
+  "start_date": "Дата начала",
+  "end_date": "Дата окончания",
+  "due_date": "Срок выполнения",
+  "target_date": "Целевая дата",
+  "estimate": "Оценка",
+  "change_parent_issue": "Изменить родительский рабочий элемент",
+  "remove_parent_issue": "Удалить родительский рабочий элемент",
+  "add_parent": "Добавить родительский",
+  "loading_members": "Загрузка участников",
+  "view_link_copied_to_clipboard": "Ссылка на представление скопирована в буфер",
+  "required": "Обязательно",
+  "optional": "Опционально",
+  "Cancel": "Отмена",
+  "edit": "Редактировать",
+  "archive": "Архивировать",
+  "restore": "Восстановить",
+  "open_in_new_tab": "Открыть в новой вкладке",
+  "delete": "Удалить",
+  "deleting": "Удаление...",
+  "make_a_copy": "Создать копию",
+  "move_to_project": "Переместить в проект",
+  "good": "Доброго",
+  "morning": "утра",
+  "afternoon": "дня",
+  "evening": "вечера",
+  "show_all": "Показать все",
+  "show_less": "Свернуть",
+  "no_data_yet": "Нет данных",
+  "syncing": "Синхронизация",
+  "add_work_item": "Добавить рабочий элемент",
+  "advanced_description_placeholder": "Нажмите '/' для команд",
+  "create_work_item": "Создать рабочий элемент",
+  "attachments": "Вложения",
+  "declining": "Отмена...",
+  "declined": "Отменено",
+  "decline": "Отменить",
+  "unassigned": "Не назначено",
+  "work_items": "Рабочие элементы",
+  "add_link": "Добавить ссылку",
+  "points": "Очки",
+  "no_assignee": "Нет назначенного",
+  "no_assignees_yet": "Нет назначенных",
+  "no_labels_yet": "Нет меток",
+  "ideal": "Идеально",
+  "current": "Текущее",
+  "no_matching_members": "Нет совпадений",
+  "leaving": "Выход...",
+  "removing": "Удаление...",
+  "leave": "Покинуть",
+  "refresh": "Обновить",
+  "refreshing": "Обновление...",
+  "refresh_status": "Обновить статус",
+  "prev": "Назад",
+  "next": "Вперед",
+  "re_generating": "Повторная генерация...",
+  "re_generate": "Сгенерировать заново",
+  "re_generate_key": "Перегенерировать ключ",
+  "export": "Экспорт",
+  "member": "{count, plural, one{# участник} few{# участника} other{# участников}}",
+  "new_password_must_be_different_from_old_password": "Новое пароль должен отличаться от старого пароля",
+  "edited": "Редактировано",
+  "bot": "Бот",
+  "settings_description": "Управляйте настройками аккаунта, рабочего пространства и проектов в одном месте. Переключайтесь между вкладками для удобной настройки.",
+  "back_to_workspace": "Вернуться в рабочее пространство",
+  "upgrade_request": "Попросите администратора рабочего пространства выполнить обновление.",
+  "copied_to_clipboard": "Скопировано в буфер обмена",
+  "copied_to_clipboard_description": "URL успешно скопирован в буфер обмена",
+  "toast": {
+    "success": "Успех!",
+    "error": "Ошибка!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Ссылка создана",
+        "message": "Ссылка успешно создана"
+      },
+      "not_created": {
+        "title": "Ошибка создания ссылки",
+        "message": "Не удалось создать ссылку"
+      },
+      "updated": {
+        "title": "Ссылка обновлена",
+        "message": "Ссылка успешно обновлена"
+      },
+      "not_updated": {
+        "title": "Ошибка обновления ссылки",
+        "message": "Не удалось обновить ссылку"
+      },
+      "removed": {
+        "title": "Ссылка удалена",
+        "message": "Ссылка успешно удалена"
+      },
+      "not_removed": {
+        "title": "Ошибка удаления ссылки",
+        "message": "Не удалось удалить ссылку"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "Некорректный URL",
+        "placeholder": "Введите или вставьте URL"
+      },
+      "title": {
+        "text": "Отображаемый заголовок",
+        "placeholder": "Как вы хотите видеть эту ссылку"
+      }
+    }
+  },
+  "common": {
+    "all": "Все",
+    "no_items_in_this_group": "В этой группе нет элементов",
+    "drop_here_to_move": "Перетащите сюда для перемещения",
+    "states": "Статусы",
+    "state": "Статус",
+    "state_groups": "Группы статусов",
+    "state_group": "Группа статусов",
+    "priorities": "Приоритеты",
+    "priority": "Приоритет",
+    "team_project": "Командный проект",
+    "project": "Проект",
+    "cycle": "Цикл",
+    "cycles": "Циклы",
+    "module": "Модуль",
+    "modules": "Модули",
+    "labels": "Метки",
+    "label": "Метка",
+    "admins": "Администраторы",
+    "users": "Пользователи",
+    "guests": "Гости",
+    "assignees": "Назначенные",
+    "assignee": "Назначенный",
+    "created_by": "Создано",
+    "none": "Нет",
+    "link": "Ссылка",
+    "estimates": "Оценки",
+    "estimate": "Оценка",
+    "created_at": "Создано в",
+    "updated_at": "Дата обновления",
+    "completed_at": "Завершено в",
+    "layout": "Макет",
+    "filters": "Фильтры",
+    "display": "Отображение",
+    "load_more": "Загрузить еще",
+    "activity": "Активность",
+    "analytics": "Аналитика",
+    "dates": "Даты",
+    "success": "Успешно!",
+    "something_went_wrong": "Что-то пошло не так",
+    "error": {
+      "label": "Ошибка!",
+      "message": "Произошла ошибка. Пожалуйста, попробуйте снова."
+    },
+    "group_by": "Группировать по",
+    "epic": "Эпик",
+    "epics": "Эпики",
+    "work_item": "Рабочий элемент",
+    "work_items": "Рабочие элементы",
+    "sub_work_item": "Подэлемент",
+    "views": "Представления",
+    "pages": "Страницы",
+    "add": "Добавить",
+    "warning": "Предупреждение",
+    "updating": "Обновление",
+    "adding": "Добавление",
+    "update": "Обновить",
+    "creating": "Создание",
+    "create": "Создать",
+    "cancel": "Отмена",
+    "description": "Описание",
+    "title": "Заголовок",
+    "attachment": "Вложение",
+    "general": "Общее",
+    "features": "Функции",
+    "automation": "Автоматизация",
+    "project_name": "Название проекта",
+    "project_id": "ID проекта",
+    "project_timezone": "Часовой пояс проекта",
+    "created_on": "Создано",
+    "updated_on": "Обновлено",
+    "completed_on": "Completed on",
+    "update_project": "Обновить проект",
+    "identifier_already_exists": "Идентификатор уже существует",
+    "add_more": "Добавить еще",
+    "defaults": "По умолчанию",
+    "add_label": "Добавить метку",
+    "customize_time_range": "Настроить период",
+    "loading": "Загрузка",
+    "attachments": "Вложения",
+    "property": "Свойство",
+    "properties": "Свойства",
+    "parent": "Родительский",
+    "page": "Пейдж",
+    "remove": "Удалить",
+    "archiving": "Архивация",
+    "archive": "Архивировать",
+    "access": {
+      "public": "Публичный",
+      "private": "Приватный"
+    },
+    "done": "Готово",
+    "sub_work_items": "Подэлементы",
+    "comment": "Комментарий",
+    "workspace_level": "Уровень рабочего пространства",
+    "order_by": {
+      "label": "Сортировать по",
+      "manual": "Вручную — Ранг",
+      "last_created": "Последние созданные",
+      "last_updated": "Последние обновленные",
+      "start_date": "Дата начала",
+      "due_date": "Срок выполнения",
+      "asc": "По возрастанию",
+      "desc": "По убыванию",
+      "updated_on": "Дата обновления"
+    },
+    "sort": {
+      "asc": "По возрастанию",
+      "desc": "По убыванию",
+      "created_on": "Дата создания",
+      "updated_on": "Дата обновления"
+    },
+    "comments": "Комментарии",
+    "updates": "Обновления",
+    "additional_updates": "Дополнительные обновления",
+    "clear_all": "Очистить все",
+    "copied": "Скопировано!",
+    "link_copied": "Ссылка скопирована!",
+    "link_copied_to_clipboard": "Ссылка скопирована в буфер обмена",
+    "copied_to_clipboard": "Ссылка на рабочий элемент скопирована",
+    "branch_name_copied_to_clipboard": "Название ветки скопировано в буфер обмена",
+    "is_copied_to_clipboard": "Рабочий элемент скопирован в буфер обмена",
+    "no_links_added_yet": "Нет добавленных ссылок",
+    "add_link": "Добавить ссылку",
+    "links": "Ссылки",
+    "go_to_workspace": "Перейти в рабочее пространство",
+    "progress": "Прогресс",
+    "optional": "Опционально",
+    "join": "Присоединиться",
+    "go_back": "Назад",
+    "continue": "Продолжить",
+    "resend": "Отправить повторно",
+    "relations": "Связи",
+    "dependencies": "Зависимости",
+    "errors": {
+      "default": {
+        "title": "Ошибка!",
+        "message": "Что-то пошло не так. Попробуйте позже."
+      },
+      "required": "Это поле обязательно",
+      "entity_required": "{entity} обязательно",
+      "restricted_entity": "{entity} ограничен"
+    },
+    "update_link": "обновить ссылку",
+    "attach": "Прикрепить",
+    "create_new": "Создать новый",
+    "add_existing": "Добавить существующий",
+    "type_or_paste_a_url": "Введите или вставьте URL",
+    "url_is_invalid": "Некорректный URL",
+    "display_title": "Отображаемое название",
+    "link_title_placeholder": "Как вы хотите видеть эту ссылку",
+    "url": "URL",
+    "side_peek": "Боковой просмотр",
+    "modal": "Модальное окно",
+    "full_screen": "Полный экран",
+    "close_peek_view": "Закрыть просмотр",
+    "toggle_peek_view_layout": "Переключить макет просмотра",
+    "options": "Опции",
+    "duration": "Продолжительность",
+    "today": "Сегодня",
+    "week": "Неделя",
+    "month": "Месяц",
+    "quarter": "Квартал",
+    "press_for_commands": "Нажмите '/' для команд",
+    "click_to_add_description": "Нажмите, чтобы добавить описание",
+    "on_track": "По плану",
+    "off_track": "Отклонение от плана",
+    "at_risk": "Под угрозой",
+    "timeline": "Хронология",
+    "completion": "Завершение",
+    "upcoming": "Предстоящие",
+    "completed": "Завершено",
+    "in_progress": "В процессе",
+    "planned": "Запланировано",
+    "paused": "На паузе",
+    "search": {
+      "label": "Поиск",
+      "placeholder": "Введите для поиска",
+      "no_matches_found": "Совпадений не найдено",
+      "no_matching_results": "Нет подходящих результатов",
+      "min_chars": "Введите минимум {count} символов для поиска",
+      "error": "Ошибка получения результатов поиска",
+      "no_results": {
+        "title": "Нет подходящих результатов",
+        "description": "Удалите критерии поиска, чтобы увидеть все результаты"
+      }
+    },
+    "actions": {
+      "edit": "Редактировать",
+      "make_a_copy": "Сделать копию",
+      "open_in_new_tab": "Открыть в новой вкладке",
+      "copy_link": "Копировать ссылку",
+      "copy_branch_name": "Копировать название ветки",
+      "archive": "Архивировать",
+      "restore": "Восстановить",
+      "delete": "Удалить",
+      "remove_relation": "Удалить связь",
+      "subscribe": "Подписаться",
+      "unsubscribe": "Отписаться",
+      "clear_sorting": "Сбросить сортировку",
+      "show_weekends": "Показывать выходные",
+      "enable": "Включить",
+      "disable": "Отключить",
+      "copy_markdown": "Копировать markdown",
+      "reply": "Ответить"
+    },
+    "name": "Название",
+    "discard": "Отменить",
+    "confirm": "Подтвердить",
+    "confirming": "Подтверждение",
+    "read_the_docs": "Документация",
+    "default": "По умолчанию",
+    "active": "Активный",
+    "enabled": "Включён",
+    "disabled": "Отключён",
+    "mandate": "Мандат",
+    "mandatory": "Обязательный",
+    "global": "Глобальный",
+    "yes": "Да",
+    "no": "Нет",
+    "please_wait": "Пожалуйста, подождите",
+    "enabling": "Включение",
+    "disabling": "Отключение",
+    "beta": "Бета",
+    "or": "или",
+    "next": "Далее",
+    "back": "Назад",
+    "retry": "Повторить",
+    "cancelling": "Отмена",
+    "configuring": "Настройка",
+    "clear": "Очистить",
+    "import": "Импорт",
+    "connect": "Подключить",
+    "authorizing": "Авторизация",
+    "processing": "Обработка",
+    "no_data_available": "Нет доступных данных",
+    "from": "от {name}",
+    "authenticated": "Авторизован",
+    "select": "Выбрать",
+    "upgrade": "Обновить",
+    "add_seats": "Добавить места",
+    "projects": "Проекты",
+    "workspace": "Рабочее пространство",
+    "workspaces": "Рабочие пространства",
+    "team": "Команда",
+    "teams": "Команды",
+    "entity": "Сущность",
+    "entities": "Сущности",
+    "task": "Рабочий элемент",
+    "tasks": "Рабочие элементы",
+    "section": "Секция",
+    "sections": "Секции",
+    "edit": "Редактировать",
+    "connecting": "Подключение",
+    "connected": "Подключён",
+    "disconnect": "Отключить",
+    "disconnecting": "Отключение",
+    "installing": "Установка",
+    "install": "Установить",
+    "reset": "Сбросить",
+    "live": "В реальном времени",
+    "change_history": "История изменений",
+    "coming_soon": "Скоро",
+    "member": "Участник",
+    "members": "Участники",
+    "you": "Вы",
+    "upgrade_cta": {
+      "higher_subscription": "Перейти на подписку выше",
+      "talk_to_sales": "Связаться с отделом продаж"
+    },
+    "category": "Категория",
+    "categories": "Категории",
+    "saving": "Сохранение",
+    "save_changes": "Сохранить изменения",
+    "delete": "Удалить",
+    "deleting": "Удаление",
+    "pending": "Ожидание",
+    "invite": "Пригласить",
+    "view": "Просмотр",
+    "deactivated_user": "Деактивированный пользователь",
+    "apply": "Применить",
+    "applying": "Применение",
+    "overview": "Обзор",
+    "no_of": "Количество {entity}",
+    "resolved": "Решено",
+    "get_started": "Начать",
+    "worklogs": "Рабочие журналы",
+    "project_updates": "Обновления проекта",
+    "workflows": "Рабочие процессы",
+    "templates": "Шаблоны",
+    "business": "Business",
+    "members_and_teamspaces": "Участники и командные пространства",
+    "recurring_work_items": "Повторяющиеся рабочие элементы",
+    "milestones": "Вехи",
+    "open_in_full_screen": "Открыть {page} в полном экране",
+    "details": "Подробности",
+    "project_structure": "Структура проекта",
+    "custom_properties": "Пользовательские свойства",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Ось X",
+    "y_axis": "Ось Y",
+    "metric": "Метрика"
+  },
+  "form": {
+    "title": {
+      "required": "Название обязательно",
+      "max_length": "Название должно быть короче {length} символов"
+    }
+  },
+  "entity": {
+    "grouping_title": "Группировка {entity}",
+    "priority": "Приоритет {entity}",
+    "all": "Все {entity}",
+    "drop_here_to_move": "Переместите {entity} сюда",
+    "delete": {
+      "label": "Удалить {entity}",
+      "success": "{entity} успешно удалён",
+      "failed": "Ошибка удаления {entity}"
+    },
+    "update": {
+      "failed": "Ошибка обновления {entity}",
+      "success": "{entity} успешно обновлён"
+    },
+    "link_copied_to_clipboard": "Ссылка на {entity} скопирована",
+    "fetch": {
+      "failed": "Ошибка получения {entity}"
+    },
+    "add": {
+      "success": "{entity} успешно добавлен",
+      "failed": "Ошибка добавления {entity}"
+    },
+    "remove": {
+      "success": "{entity} успешно удален",
+      "failed": "Ошибка удаления {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Ошибка прикрепления файла",
+    "only_one_file_allowed": "Можно загрузить только один файл",
+    "file_size_limit": "Максимальный размер файла - {size} МБ",
+    "drag_and_drop": "Перетащите файл для загрузки",
+    "delete": "Удалить вложение"
+  },
+  "label": {
+    "select": "Выбрать метку",
+    "create": {
+      "success": "Метка создана",
+      "failed": "Ошибка создания метки",
+      "already_exists": "Метка уже существует",
+      "type": "Введите новую метку"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Представление} other {Представления}}",
+    "create": {
+      "label": "Создать представление"
+    },
+    "update": {
+      "label": "Обновить представление"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Гость",
+      "description": "Внешние участники организаций могут быть приглашены как гости."
+    },
+    "member": {
+      "title": "Участник",
+      "description": "Чтение, создание, редактирование и удаление элементов внутри проектов, циклов и модулей"
+    },
+    "admin": {
+      "title": "Администратор",
+      "description": "Полные права доступа в рамках рабочего пространства."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Продукт / Проект менеджер",
+    "development_or_engineering": "Разработка / Инжиниринг",
+    "founder_or_executive": "Основатель / Руководитель",
+    "freelancer_or_consultant": "Фрилансер / Консультант",
+    "marketing_or_growth": "Маркетинг / Рост",
+    "sales_or_business_development": "Продажи / Развитие бизнеса",
+    "support_or_operations": "Поддержка / Операции",
+    "student_or_professor": "Студент / Преподаватель",
+    "human_resources": "HR / Кадры",
+    "other": "Другое"
+  },
+  "default_global_view": {
+    "all_issues": "Все рабочие элементы",
+    "assigned": "Назначенные",
+    "created": "Созданные",
+    "subscribed": "Подписанные"
+  },
+  "description_versions": {
+    "last_edited_by": "Последнее редактирование",
+    "previously_edited_by": "Ранее отредактировано",
+    "edited_by": "Отредактировано"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane не запустился. Это может быть из-за того, что один или несколько сервисов Plane не смогли запуститься.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Выберите View Logs из setup.sh и логов Docker, чтобы убедиться."
+  },
+  "customize_navigation": "Настроить навигацию",
+  "personal": "Личное",
+  "accordion_navigation_control": "Навигация с аккордеоном",
+  "horizontal_navigation_bar": "Вкладочная навигация",
+  "show_limited_projects_on_sidebar": "Показывать ограниченное число проектов в боковой панели",
+  "enter_number_of_projects": "Введите число проектов",
+  "pin": "Закрепить",
+  "unpin": "Открепить",
+  "workspace_dashboards": "Дашборды",
+  "pi_chat": "AI Чат",
+  "in_app": "В приложении",
+  "forms": "Формы",
+  "milestones": "Вехи",
+  "milestones_description": "Вехи позволяют синхронизировать рабочие элементы с общими датами завершения.",
+  "file_upload": {
+    "upload_text": "Нажмите здесь, чтобы загрузить файл",
+    "drag_drop_text": "Перетащите и отпустите",
+    "processing": "Обработка",
+    "invalid_file_type": "Недопустимый тип файла",
+    "missing_fields": "Отсутствуют поля",
+    "success": "{fileName} загружен!"
+  },
+  "date": "Дата",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Экспорт рабочих элементов в CSV-файл.",
+      "short_description": "Экспорт в csv"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Экспорт рабочих элементов в файл Excel.",
+      "short_description": "Экспорт в excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Экспорт рабочих элементов в файл Excel.",
+      "short_description": "Экспорт в excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Экспорт рабочих элементов в JSON-файл.",
+      "short_description": "Экспорт в json"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/cycle.json b/packages/i18n/src/locales/ru/cycle.json
new file mode 100644
index 0000000..43b1fdc
--- /dev/null
+++ b/packages/i18n/src/locales/ru/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Добавьте рабочие элементы в цикл, чтобы отслеживать прогресс"
+      },
+      "chart": {
+        "title": "Добавьте рабочие элементы в цикл для построения графика выполнения"
+      },
+      "priority_issue": {
+        "title": "Просматривайте рабочие элементы с высоким приоритетом в цикле"
+      },
+      "assignee": {
+        "title": "Назначьте ответственных, чтобы видеть распределение рабочих элементов"
+      },
+      "label": {
+        "title": "Добавьте метки, чтобы видеть распределение рабочих элементов по категориям"
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Цикл} other {Циклы}}",
+    "no_cycle": "Нет цикла"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Добавьте рабочие элементы в цикл, чтобы увидеть его\n прогресс"
+      },
+      "priority": {
+        "title": "Наблюдайте за высокоприоритетными рабочими элементами, решаемыми в\n цикле на первый взгляд."
+      },
+      "assignee": {
+        "title": "Добавьте назначенных к рабочим элементам, чтобы увидеть\n разбивку работы по назначенным."
+      },
+      "label": {
+        "title": "Добавьте метки к рабочим элементам, чтобы увидеть\n разбивку работы по меткам."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/editor.json b/packages/i18n/src/locales/ru/editor.json
new file mode 100644
index 0000000..0e0cabd
--- /dev/null
+++ b/packages/i18n/src/locales/ru/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Перетащите для загрузки внешних файлов"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Файл слишком большой.",
+        "description": "Максимальный размер файла {maxFileSize} МБ"
+      },
+      "unsupported_file_type": {
+        "title": "Неподдерживаемый тип файла.",
+        "description": "Посмотреть поддерживаемые форматы"
+      },
+      "default": {
+        "title": "Загрузка не удалась.",
+        "description": "Что-то пошло не так. Попробуйте еще раз."
+      }
+    },
+    "upgrade": {
+      "description": "Обновите план для просмотра этого вложения."
+    },
+    "aria": {
+      "click_to_upload": "Нажмите для загрузки вложения"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Преобразовать во встраиваемый контент",
+      "convert_to_link": "Преобразовать в ссылку",
+      "convert_to_richcard": "Преобразовать в rich-карточку"
+    },
+    "placeholder": {
+      "insert_embed": "Вставьте здесь предпочитаемую ссылку для встраивания, например, видео YouTube, дизайн Figma и т.д.",
+      "link": "Введите или вставьте ссылку"
+    },
+    "input_modal": {
+      "embed": "Встроить",
+      "works_with_links": "Работает с YouTube, Figma, Google Docs и другими"
+    },
+    "error": {
+      "not_valid_link": "Пожалуйста, введите действительный URL."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Опишите содержимое этого блока",
+      "generated_here": "Ваш AI-контент будет сгенерирован здесь"
+    },
+    "block_types": {
+      "placeholder": "Выберите тип блока",
+      "summarize_page": "Суммировать страницу",
+      "custom_prompt": "Пользовательский запрос"
+    },
+    "actions": {
+      "discard": "Отменить",
+      "generate": "Сгенерировать",
+      "generating": "Генерация",
+      "rewriting": "Переписывание",
+      "rewrite": "Переписать",
+      "use_this": "Использовать это",
+      "refine": "Уточнить"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/empty-state.json b/packages/i18n/src/locales/ru/empty-state.json
new file mode 100644
index 0000000..e322a5e
--- /dev/null
+++ b/packages/i18n/src/locales/ru/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Пока нет показателей прогресса для отображения.",
+      "description": "Начните устанавливать значения свойств в рабочих элементах, чтобы видеть показатели прогресса здесь."
+    },
+    "updates": {
+      "title": "Пока нет обновлений.",
+      "description": "Когда участники проекта добавят обновления, они появятся здесь"
+    },
+    "search": {
+      "title": "Не найдено совпадающих результатов.",
+      "description": "Результаты не найдены. Попробуйте изменить условия поиска."
+    },
+    "not_found": {
+      "title": "Упс! Что-то пошло не так",
+      "description": "Мы не можем получить вашу учетную запись Plane в данный момент. Возможно, это ошибка сети.",
+      "cta_primary": "Попробовать перезагрузить"
+    },
+    "server_error": {
+      "title": "Ошибка сервера",
+      "description": "Мы не можем подключиться и получить данные с нашего сервера. Не волнуйтесь, мы работаем над этим.",
+      "cta_primary": "Попробовать перезагрузить"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Похоже, у вас нет доступа к этому проекту",
+      "restricted_description": "Свяжитесь с администратором, чтобы запросить доступ, и вы сможете продолжить здесь.",
+      "join_description": "Нажмите кнопку ниже, чтобы присоединиться.",
+      "cta_primary": "Присоединиться к проекту",
+      "cta_loading": "Присоединение к проекту"
+    },
+    "invalid_project": {
+      "title": "Проект не найден",
+      "description": "Проект, который вы ищете, не существует."
+    },
+    "work_items": {
+      "title": "Начните с вашего первого рабочего элемента.",
+      "description": "Рабочие элементы — это строительные блоки вашего проекта — назначайте ответственных, устанавливайте приоритеты и легко отслеживайте прогресс.",
+      "cta_primary": "Создайте свой первый рабочий элемент"
+    },
+    "cycles": {
+      "title": "Группируйте и ограничивайте по времени свою работу в Циклах.",
+      "description": "Разбивайте работу на временные блоки, работайте в обратном направлении от крайнего срока проекта для установки дат и добивайтесь ощутимого прогресса как команда.",
+      "cta_primary": "Установите свой первый цикл"
+    },
+    "cycle_work_items": {
+      "title": "Нет рабочих элементов для отображения в этом цикле",
+      "description": "Создайте рабочие элементы, чтобы начать отслеживать прогресс вашей команды в этом цикле и достичь целей вовремя.",
+      "cta_primary": "Создать рабочий элемент",
+      "cta_secondary": "Добавить существующий рабочий элемент"
+    },
+    "modules": {
+      "title": "Сопоставьте цели проекта с Модулями и легко отслеживайте.",
+      "description": "Модули состоят из взаимосвязанных рабочих элементов. Они помогают отслеживать прогресс через фазы проекта, каждая из которых имеет конкретные сроки и аналитику, указывающую, насколько близко вы к достижению этих фаз.",
+      "cta_primary": "Установите свой первый модуль"
+    },
+    "module_work_items": {
+      "title": "Нет рабочих элементов для отображения в этом Модуле",
+      "description": "Создайте рабочие элементы, чтобы начать отслеживать этот модуль.",
+      "cta_primary": "Создать рабочий элемент",
+      "cta_secondary": "Добавить существующий рабочий элемент"
+    },
+    "views": {
+      "title": "Сохраните пользовательские представления для вашего проекта",
+      "description": "Представления — это сохраненные фильтры, которые помогают вам быстро получить доступ к информации, которую вы используете чаще всего. Сотрудничайте легко, когда товарищи по команде делятся и адаптируют представления к своим конкретным потребностям.",
+      "cta_primary": "Создать представление"
+    },
+    "no_work_items_in_project": {
+      "title": "Пока нет рабочих элементов в проекте",
+      "description": "Добавьте рабочие элементы в свой проект и разделите работу на отслеживаемые части с помощью представлений.",
+      "cta_primary": "Добавить рабочий элемент"
+    },
+    "work_item_filter": {
+      "title": "Рабочие элементы не найдены",
+      "description": "Ваш текущий фильтр не вернул результатов. Попробуйте изменить фильтры.",
+      "cta_primary": "Добавить рабочий элемент"
+    },
+    "pages": {
+      "title": "Документируйте все — от заметок до PRD",
+      "description": "Страницы позволяют захватывать и организовывать информацию в одном месте. Пишите заметки о встречах, документацию проекта и PRD, встраивайте рабочие элементы и структурируйте их с помощью готовых компонентов.",
+      "cta_primary": "Создайте свою первую Страницу"
+    },
+    "archive_pages": {
+      "title": "Пока нет архивированных страниц",
+      "description": "Архивируйте страницы, которые не находятся в поле вашего зрения. Получите доступ к ним здесь при необходимости."
+    },
+    "intake_sidebar": {
+      "title": "Регистрируйте запросы на прием",
+      "description": "Отправляйте новые запросы для рассмотрения, приоритизации и отслеживания в рамках рабочего процесса вашего проекта.",
+      "cta_primary": "Создать запрос на прием"
+    },
+    "intake_main": {
+      "title": "Выберите рабочий элемент приема, чтобы просмотреть его детали"
+    },
+    "epics": {
+      "title": "Превратите сложные проекты в структурированные эпики.",
+      "description": "Эпик помогает организовать большие цели в более мелкие, отслеживаемые задачи.",
+      "cta_primary": "Создать эпик",
+      "cta_secondary": "Документация"
+    },
+    "epic_work_items": {
+      "title": "Вы еще не добавили рабочие элементы в этот эпик.",
+      "description": "Начните с добавления рабочих элементов в этот эпик и отслеживайте их здесь.",
+      "cta_secondary": "Добавить рабочие элементы"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Пока нет архивированных эпиков",
+      "description": "Вы можете архивировать завершённые или отменённые эпики. Найдите их здесь после архивации."
+    },
+    "archive_work_items": {
+      "title": "Пока нет архивированных рабочих элементов",
+      "description": "Вручную или через автоматизацию вы можете архивировать завершенные или отмененные рабочие элементы. Найдите их здесь после архивирования.",
+      "cta_primary": "Настроить автоматизацию"
+    },
+    "archive_cycles": {
+      "title": "Пока нет архивированных циклов",
+      "description": "Чтобы привести в порядок ваш проект, архивируйте завершенные циклы. Найдите их здесь после архивирования."
+    },
+    "archive_modules": {
+      "title": "Пока нет архивированных Модулей",
+      "description": "Чтобы привести в порядок ваш проект, архивируйте завершенные или отмененные модули. Найдите их здесь после архивирования."
+    },
+    "home_widget_quick_links": {
+      "title": "Держите под рукой важные ссылки, ресурсы или документы для вашей работы"
+    },
+    "inbox_sidebar_all": {
+      "title": "Обновления для ваших подписанных рабочих элементов появятся здесь"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Упоминания ваших рабочих элементов появятся здесь"
+    },
+    "your_work_by_priority": {
+      "title": "Пока не назначен рабочий элемент"
+    },
+    "your_work_by_state": {
+      "title": "Пока не назначен рабочий элемент"
+    },
+    "views": {
+      "title": "Пока нет Представлений",
+      "description": "Добавьте рабочие элементы в свой проект и используйте представления для фильтрации, сортировки и отслеживания прогресса без усилий.",
+      "cta_primary": "Добавить рабочий элемент"
+    },
+    "drafts": {
+      "title": "Недописанные рабочие элементы",
+      "description": "Чтобы попробовать это, начните добавлять рабочий элемент и оставьте его на полпути или создайте свой первый черновик ниже. 😉",
+      "cta_primary": "Создать черновик рабочего элемента"
+    },
+    "projects_archived": {
+      "title": "Нет архивированных проектов",
+      "description": "Похоже, все ваши проекты все еще активны — отличная работа!"
+    },
+    "analytics_projects": {
+      "title": "Создайте проекты для визуализации метрик проекта здесь."
+    },
+    "analytics_work_items": {
+      "title": "Создайте проекты с рабочими элементами и ответственными, чтобы начать отслеживать производительность, прогресс и влияние команды здесь."
+    },
+    "analytics_no_cycle": {
+      "title": "Создайте циклы для организации работы в ограниченные по времени фазы и отслеживания прогресса в спринтах."
+    },
+    "analytics_no_module": {
+      "title": "Создайте модули для организации работы и отслеживания прогресса на разных этапах."
+    },
+    "analytics_no_intake": {
+      "title": "Настройте прием для управления входящими запросами и отслеживания их принятия и отклонения"
+    },
+    "home_widget_stickies": {
+      "title": "Запишите идею, зафиксируйте озарение или запомните внезапную мысль. Добавьте стикер, чтобы начать."
+    },
+    "stickies": {
+      "title": "Фиксируйте идеи мгновенно",
+      "description": "Создавайте стикеры для быстрых заметок и задач, и держите их при себе, куда бы вы ни пошли.",
+      "cta_primary": "Создать первый стикер",
+      "cta_secondary": "Документация"
+    },
+    "active_cycles": {
+      "title": "Нет активных циклов",
+      "description": "У вас сейчас нет активных циклов. Активные циклы появляются здесь, когда они включают сегодняшнюю дату."
+    },
+    "dashboard": {
+      "title": "Визуализируйте свой прогресс с помощью панелей",
+      "description": "Создавайте настраиваемые панели для отслеживания метрик, измерения результатов и эффективного представления аналитики.",
+      "cta_primary": "Создать новую панель"
+    },
+    "wiki": {
+      "title": "Напишите заметку, документ или полную базу знаний.",
+      "description": "Страницы — это пространство для фиксации мыслей в Plane. Делайте заметки со встреч, легко форматируйте их, встраивайте рабочие элементы, размещайте их с помощью библиотеки компонентов и храните все в контексте вашего проекта.",
+      "cta_primary": "Создать вашу страницу"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Включить состояния проекта",
+      "description": "Включите состояния проекта для просмотра и управления свойствами, такими как состояние, приоритет, сроки и многое другое."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Пока нет оценок",
+      "description": "Определите, как ваша команда измеряет усилия, и отслеживайте это последовательно во всех рабочих элементах.",
+      "cta_primary": "Добавить систему оценок"
+    },
+    "labels": {
+      "title": "Пока нет меток",
+      "description": "Создавайте персонализированные метки для эффективной категоризации и управления рабочими элементами.",
+      "cta_primary": "Создайте свою первую метку"
+    },
+    "exports": {
+      "title": "Пока нет экспортов",
+      "description": "У вас пока нет записей экспорта. После экспорта данных все записи появятся здесь."
+    },
+    "tokens": {
+      "title": "Пока нет Личного токена",
+      "description": "Генерируйте безопасные API-токены для подключения вашего рабочего пространства к внешним системам и приложениям.",
+      "cta_primary": "Добавить API-токен"
+    },
+    "workspace_tokens": {
+      "title": "Пока нет API токенов",
+      "description": "Генерируйте безопасные API-токены для подключения вашего рабочего пространства к внешним системам и приложениям.",
+      "cta_primary": "Добавить API-токен"
+    },
+    "webhooks": {
+      "title": "Вебхуков пока не добавлено",
+      "description": "Автоматизируйте уведомления внешних сервисов при возникновении событий проекта.",
+      "cta_primary": "Добавить вебхук"
+    },
+    "work_item_types": {
+      "title": "Создавайте и настраивайте типы рабочих элементов",
+      "description": "Определите уникальные типы рабочих элементов для вашего проекта. Каждый тип может иметь свои собственные свойства, рабочие процессы и поля — адаптированные к потребностям вашего проекта и команды.",
+      "cta_primary": "Включить"
+    },
+    "work_item_type_properties": {
+      "title": "Определите свойство и детали, которые вы хотите зафиксировать для этого типа рабочего элемента. Настройте его в соответствии с рабочим процессом вашего проекта.",
+      "cta_secondary": "Добавить свойство"
+    },
+    "templates": {
+      "title": "Шаблонов пока нет",
+      "description": "Сократите время настройки, создавая шаблоны для рабочих элементов и страниц — и начинайте новую работу за секунды.",
+      "cta_primary": "Создать свой первый шаблон"
+    },
+    "recurring_work_items": {
+      "title": "Повторяющихся рабочих элементов пока нет",
+      "description": "Настройте повторяющиеся рабочие элементы для автоматизации повторяющихся задач и легкого соблюдения графика.",
+      "cta_primary": "Создать повторяющийся рабочий элемент"
+    },
+    "worklogs": {
+      "title": "Отслеживайте учет времени для всех участников",
+      "description": "Регистрируйте время на рабочих элементах, чтобы просматривать подробные табели для любого члена команды по проектам."
+    },
+    "group_syncing": {
+      "title": "Сопоставлений групп пока нет"
+    },
+    "template_setting": {
+      "title": "Шаблонов пока нет",
+      "description": "Сократите время настройки, создавая шаблоны для проектов, рабочих элементов и страниц — и начинайте новую работу за секунды.",
+      "cta_primary": "Создать шаблон"
+    },
+    "workflows": {
+      "title": "Рабочих процессов пока нет",
+      "description": "Создавайте рабочие процессы для управления прогрессом ваших рабочих элементов.",
+      "cta_primary": "Добавить новый рабочий процесс",
+      "states": {
+        "title": "Добавить состояния",
+        "description": "Выберите состояния, через которые проходит рабочий элемент."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/home.json b/packages/i18n/src/locales/ru/home.json
new file mode 100644
index 0000000..fb77dfb
--- /dev/null
+++ b/packages/i18n/src/locales/ru/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Руководство по началу работы",
+      "not_right_now": "Не сейчас",
+      "create_project": {
+        "title": "Создать проект",
+        "description": "Большинство вещей начинаются с проекта в Plane.",
+        "cta": "Начать"
+      },
+      "invite_team": {
+        "title": "Пригласить команду",
+        "description": "Создавайте, развивайте и управляйте вместе с коллегами.",
+        "cta": "Пригласить"
+      },
+      "configure_workspace": {
+        "title": "Настройте рабочее пространство",
+        "description": "Включайте/отключайте функции или делайте больше.",
+        "cta": "Настроить"
+      },
+      "personalize_account": {
+        "title": "Персонализируйте Plane",
+        "description": "Выберите изображение, цвета и другие параметры.",
+        "cta": "Настроить сейчас"
+      },
+      "widgets": {
+        "title": "Включите виджеты для лучшего опыта",
+        "description": "Все ваши виджеты выключены. Включите их\nдля улучшения взаимодействия!",
+        "primary_button": {
+          "text": "Управление виджетами"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Сохраняйте ссылки на важные рабочие элементы.",
+      "add": "Добавить быструю ссылку",
+      "title": "Быстрая ссылка",
+      "title_plural": "Быстрые ссылки"
+    },
+    "recents": {
+      "title": "Недавние",
+      "empty": {
+        "project": "Недавние проекты появятся здесь после посещения.",
+        "page": "Недавние страницы появятся здесь после посещения.",
+        "issue": "Недавние рабочие элементы появятся здесь после посещения.",
+        "default": "Пока нет недавних элементов"
+      },
+      "filters": {
+        "all": "Все",
+        "projects": "Проекты",
+        "pages": "Страницы",
+        "issues": "Рабочие элементы"
+      }
+    },
+    "new_at_plane": {
+      "title": "Новое в Plane"
+    },
+    "quick_tutorial": {
+      "title": "Быстрое обучение"
+    },
+    "widget": {
+      "reordered_successfully": "Виджет успешно перемещен.",
+      "reordering_failed": "Ошибка при изменении порядка виджетов."
+    },
+    "manage_widgets": "Управление виджетами",
+    "title": "Главная",
+    "star_us_on_github": "Оцените нас на GitHub",
+    "business_trial_banner": {
+      "title": "Ваш 14-дневный пробный период плана Business активен!",
+      "description": "Изучите все функции Business. Когда будете готовы, оформите подписку. Автоматическое списание не производится.",
+      "trial_ends_today": "Пробный период заканчивается сегодня",
+      "trial_ends_in_days": "Пробный период заканчивается через {days, plural, one {# день} few {# дня} other {# дней}}",
+      "start_subscription": "Оформить подписку",
+      "explore_business_features": "Изучить функции Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/inbox.json b/packages/i18n/src/locales/ru/inbox.json
new file mode 100644
index 0000000..434d226
--- /dev/null
+++ b/packages/i18n/src/locales/ru/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Ожидание",
+        "description": "Ожидание"
+      },
+      "declined": {
+        "title": "Отклонено",
+        "description": "Отклонено"
+      },
+      "snoozed": {
+        "title": "Отложено",
+        "description": "{days, plural, one{# день} other{# дней}} осталось"
+      },
+      "accepted": {
+        "title": "Принято",
+        "description": "Принято"
+      },
+      "duplicate": {
+        "title": "Дубликат",
+        "description": "Дубликат"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Отклонить рабочий элемент",
+        "content": "Вы уверены, что хотите отклонить рабочий элемент {value}?"
+      },
+      "delete": {
+        "title": "Удалить рабочий элемент",
+        "content": "Вы уверены, что хотите удалить рабочий элемент {value}?",
+        "success": "Рабочий элемент успешно удален"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Только администраторы проекта могут откладывать/возобновлять рабочие элементы",
+      "accept_permission": "Только администраторы проекта могут принимать рабочие элементы",
+      "decline_permission": "Только администраторы проекта могут отклонять рабочие элементы"
+    },
+    "actions": {
+      "accept": "Принять",
+      "decline": "Отклонить",
+      "snooze": "Отложить",
+      "unsnooze": "Возобновить",
+      "copy": "Копировать ссылку на рабочий элемент",
+      "delete": "Удалить",
+      "open": "Открыть рабочий элемент",
+      "mark_as_duplicate": "Пометить как дубликат",
+      "move": "Перенести {value} в рабочие элементы проекта"
+    },
+    "source": {
+      "in-app": "в приложении"
+    },
+    "order_by": {
+      "created_at": "Дата создания",
+      "updated_at": "Дата обновления",
+      "id": "ID"
+    },
+    "label": "Входящие",
+    "page_label": "{workspace} - Входящие",
+    "modal": {
+      "title": "Создать входящий рабочий элемент"
+    },
+    "tabs": {
+      "open": "Открытые",
+      "closed": "Закрытые"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Нет открытых рабочих элементов",
+        "description": "Здесь отображаются открытые рабочие элементы. Создайте новый рабочий элемент."
+      },
+      "sidebar_closed_tab": {
+        "title": "Нет закрытых рабочих элементов",
+        "description": "Все рабочие элементы, принятые или отклоненные, можно найти здесь."
+      },
+      "sidebar_filter": {
+        "title": "Нет подходящих рабочих элементов",
+        "description": "Не найдено рабочих элементов по примененным фильтрам. Создайте новый рабочий элемент."
+      },
+      "detail": {
+        "title": "Выберите рабочий элемент для просмотра деталей."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/integration.json b/packages/i18n/src/locales/ru/integration.json
new file mode 100644
index 0000000..2ca6489
--- /dev/null
+++ b/packages/i18n/src/locales/ru/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Интеграции",
+    "loading": "Загрузка",
+    "unauthorized": "У вас нет прав для просмотра этой страницы.",
+    "configure": "Настроить",
+    "not_enabled": "{name} не включен для этого рабочего пространства.",
+    "not_configured": "Не настроено",
+    "disconnect_personal_account": "Отключить личный аккаунт {providerName}",
+    "not_configured_message_admin": "Интеграция {name} не настроена. Пожалуйста, свяжитесь с администратором вашей инстанции для настройки.",
+    "not_configured_message_support": "Интеграция {name} не настроена. Пожалуйста, свяжитесь с поддержкой для настройки.",
+    "external_api_unreachable": "Не удалось получить доступ к внешнему API. Пожалуйста, попробуйте снова позже.",
+    "error_fetching_supported_integrations": "Не удалось получить поддерживаемые интеграции. Пожалуйста, попробуйте снова позже.",
+    "back_to_integrations": "Назад к интеграциям",
+    "select_state": "Выбрать состояние",
+    "set_state": "Установить состояние",
+    "choose_project": "Выбрать проект...",
+    "skip_backward_state_movement": "Запретить перемещение задач в более раннее состояние из-за обновлений PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Подключите и синхронизируйте ваши рабочие элементы GitHub с Plane.",
+    "connect_org": "Подключить организацию",
+    "connect_org_description": "Подключите вашу организацию GitHub к Plane",
+    "processing": "Обработка",
+    "org_added_desc": "GitHub org добавлена в и время",
+    "connection_fetch_error": "Ошибка получения данных подключения с сервера",
+    "personal_account_connected": "Личный аккаунт подключен",
+    "personal_account_connected_description": "Ваш GitHub аккаунт теперь подключен к Plane",
+    "connect_personal_account": "Подключить личный аккаунт",
+    "connect_personal_account_description": "Подключите ваш личный GitHub аккаунт к Plane.",
+    "repo_mapping": "Сопоставление репозитория",
+    "repo_mapping_description": "Сопоставьте ваши репозитории GitHub с проектами Plane.",
+    "project_issue_sync": "Синхронизация проблем проекта",
+    "project_issue_sync_description": "Синхронизируйте проблемы из GitHub в ваш проект Plane",
+    "project_issue_sync_empty_state": "Сопоставленные синхронизации проблем проекта появятся здесь",
+    "configure_project_issue_sync_state": "Настроить состояние синхронизации проблем",
+    "select_issue_sync_direction": "Выбрать направление синхронизации проблем",
+    "allow_bidirectional_sync": "Двунаправленная - Синхронизируйте проблемы и комментарии в обоих направлениях между GitHub и Plane",
+    "allow_unidirectional_sync": "Однонаправленная - Синхронизируйте проблемы и комментарии из GitHub в Plane только",
+    "allow_unidirectional_sync_warning": "Данные из GitHub Issue заменят данные в связанном рабочем элементе Plane (только GitHub → Plane)",
+    "remove_project_issue_sync": "Удалить эту синхронизацию проблем проекта",
+    "remove_project_issue_sync_confirmation": "Вы уверены, что хотите удалить эту синхронизацию проблем проекта?",
+    "add_pr_state_mapping": "Добавить сопоставление состояния запроса на слияние для проекта Plane",
+    "edit_pr_state_mapping": "Редактировать сопоставление состояния запроса на слияние для проекта Plane",
+    "pr_state_mapping": "Сопоставление состояния запроса на слияние",
+    "pr_state_mapping_description": "Сопоставьте состояния запросов на слияние из GitHub в ваш проект Plane",
+    "pr_state_mapping_empty_state": "Сопоставленные состояния PR появятся здесь",
+    "remove_pr_state_mapping": "Удалить это сопоставление состояния запроса на слияние",
+    "remove_pr_state_mapping_confirmation": "Вы уверены, что хотите удалить это сопоставление состояния запроса на слияние?",
+    "issue_sync_message": "Рабочие элементы синхронизированы в {project}",
+    "link": "Ссылка на репозиторий GitHub на проект Plane",
+    "pull_request_automation": "Автоматизация запроса на слияние",
+    "pull_request_automation_description": "Настройте сопоставление состояния запроса на слияние из GitHub в ваш проект Plane",
+    "DRAFT_MR_OPENED": "Открыт черновик",
+    "MR_OPENED": "Открыт",
+    "MR_READY_FOR_MERGE": "Готово к слиянию",
+    "MR_REVIEW_REQUESTED": "Запрошено обзор",
+    "MR_MERGED": "Слияние",
+    "MR_CLOSED": "Закрыт",
+    "ISSUE_OPEN": "Открыт",
+    "ISSUE_CLOSED": "Закрыт",
+    "save": "Сохранить",
+    "start_sync": "Начать синхронизацию",
+    "choose_repository": "Выбрать репозиторий..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Подключите и синхронизируйте ваши запросы на слияние Gitlab с Plane.",
+    "connection_fetch_error": "Ошибка получения данных подключения с сервера",
+    "connect_org": "Подключить организацию",
+    "connect_org_description": "Подключите вашу организацию Gitlab к Plane.",
+    "project_connections": "Подключения проектов Gitlab",
+    "project_connections_description": "Синхронизируйте запросы на слияние из Gitlab в проекты Plane.",
+    "plane_project_connection": "Подключение проекта Plane",
+    "plane_project_connection_description": "Настройте сопоставление состояния запросов на слияние из Gitlab в проекты Plane",
+    "remove_connection": "Удалить подключение",
+    "remove_connection_confirmation": "Вы уверены, что хотите удалить это подключение?",
+    "link": "Ссылка на репозиторий Gitlab в проект Plane",
+    "pull_request_automation": "Автоматизация запросов на слияние",
+    "pull_request_automation_description": "Настройте сопоставление состояния запросов на слияние из Gitlab в Plane",
+    "DRAFT_MR_OPENED": "При открытии чернового MR установить состояние на",
+    "MR_OPENED": "При открытии MR установить состояние на",
+    "MR_REVIEW_REQUESTED": "При запросе на обзор MR установить состояние на",
+    "MR_READY_FOR_MERGE": "При готовности MR к слиянию установить состояние на",
+    "MR_MERGED": "При слиянии MR установить состояние на",
+    "MR_CLOSED": "При закрытии MR установить состояние на",
+    "integration_enabled_text": "С включенной интеграцией Gitlab вы можете автоматизировать рабочие процессы рабочих элементов",
+    "choose_entity": "Выбрать сущность",
+    "choose_project": "Выбрать проект",
+    "link_plane_project": "Ссылка на проект Plane",
+    "project_issue_sync": "Синхронизация задач проекта",
+    "project_issue_sync_description": "Синхронизируйте задачи из Gitlab в ваш проект Plane",
+    "project_issue_sync_empty_state": "Сопоставленная синхронизация задач проекта появится здесь",
+    "configure_project_issue_sync_state": "Настроить состояние синхронизации задач",
+    "select_issue_sync_direction": "Выберите направление синхронизации задач",
+    "allow_bidirectional_sync": "Двунаправленная - Синхронизировать задачи и комментарии в обоих направлениях между Gitlab и Plane",
+    "allow_unidirectional_sync": "Однонаправленная - Синхронизировать задачи и комментарии только из Gitlab в Plane",
+    "allow_unidirectional_sync_warning": "Данные из Gitlab Issue заменят данные в связанном рабочем элементе Plane (только Gitlab → Plane)",
+    "remove_project_issue_sync": "Удалить эту синхронизацию задач проекта",
+    "remove_project_issue_sync_confirmation": "Вы уверены, что хотите удалить эту синхронизацию задач проекта?",
+    "ISSUE_OPEN": "Задача открыта",
+    "ISSUE_CLOSED": "Задача закрыта",
+    "save": "Сохранить",
+    "start_sync": "Начать синхронизацию",
+    "choose_repository": "Выберите репозиторий..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Подключите и синхронизируйте ваш экземпляр Gitlab Enterprise с Plane.",
+    "app_form_title": "Конфигурация Gitlab Enterprise",
+    "app_form_description": "Настройте Gitlab Enterprise для подключения к Plane.",
+    "base_url_title": "Базовый URL",
+    "base_url_description": "Базовый URL вашего экземпляра Gitlab Enterprise.",
+    "base_url_placeholder": "напр. \"https://glab.plane.town\"",
+    "base_url_error": "Базовый URL обязателен",
+    "invalid_base_url_error": "Недействительный базовый URL",
+    "client_id_title": "ID приложения",
+    "client_id_description": "ID приложения, которое вы создали в вашем экземпляре Gitlab Enterprise.",
+    "client_id_placeholder": "напр. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "ID приложения обязателен",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Client secret приложения, которое вы создали в вашем экземпляре Gitlab Enterprise.",
+    "client_secret_placeholder": "напр. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret обязателен",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Случайный webhook secret, который будет использоваться для проверки webhook от экземпляра Gitlab Enterprise.",
+    "webhook_secret_placeholder": "напр. \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret обязателен",
+    "connect_app": "Подключить приложение"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Подключите ваше рабочее пространство Slack к Plane.",
+    "connect_personal_account": "Подключите ваш личный аккаунт Slack к Plane.",
+    "personal_account_connected": "Ваш личный аккаунт {providerName} теперь подключен к Plane.",
+    "link_personal_account": "Связать ваш личный аккаунт {providerName} с Plane.",
+    "connected_slack_workspaces": "Подключенные рабочие пространства Slack",
+    "connected_on": "Подключено {date}",
+    "disconnect_workspace": "Отключить рабочее пространство {name}",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Получайте уведомления в личных сообщениях Slack о важных обновлениях, напоминаниях и оповещениях только для вас."
+      }
+    },
+    "project_updates": {
+      "title": "Обновления Проекта",
+      "description": "Настройте уведомления об обновлениях проектов для ваших проектов",
+      "add_new_project_update": "Добавить новое уведомление об обновлениях проекта",
+      "project_updates_empty_state": "Проекты, подключенные к каналам Slack, появятся здесь.",
+      "project_updates_form": {
+        "title": "Настроить Обновления Проекта",
+        "description": "Получайте уведомления об обновлениях проекта в Slack, когда создаются рабочие элементы",
+        "failed_to_load_channels": "Не удалось загрузить каналы из Slack",
+        "project_dropdown": {
+          "placeholder": "Выберите проект",
+          "label": "Проект Plane",
+          "no_projects": "Нет доступных проектов"
+        },
+        "channel_dropdown": {
+          "label": "Канал Slack",
+          "placeholder": "Выберите канал",
+          "no_channels": "Нет доступных каналов"
+        },
+        "all_projects_connected": "Все проекты уже подключены к каналам Slack.",
+        "all_channels_connected": "Все каналы Slack уже подключены к проектам.",
+        "project_connection_success": "Подключение проекта успешно создано",
+        "project_connection_updated": "Подключение проекта успешно обновлено",
+        "project_connection_deleted": "Подключение проекта успешно удалено",
+        "failed_delete_project_connection": "Не удалось удалить подключение проекта",
+        "failed_create_project_connection": "Не удалось создать подключение проекта",
+        "failed_upserting_project_connection": "Не удалось обновить подключение проекта",
+        "failed_loading_project_connections": "Мы не смогли загрузить ваши подключения проектов. Это может быть связано с проблемой сети или проблемой с интеграцией."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Подключите ваше рабочее пространство Sentry к Plane.",
+    "connected_sentry_workspaces": "Подключенные рабочие пространства Sentry",
+    "connected_on": "Подключено {date}",
+    "disconnect_workspace": "Отключить рабочее пространство {name}",
+    "state_mapping": {
+      "title": "Сопоставление состояний",
+      "description": "Сопоставьте состояния инцидентов Sentry с состояниями вашего проекта. Настройте, какие состояния использовать, когда инцидент Sentry разрешен или не разрешен.",
+      "add_new_state_mapping": "Добавить новое сопоставление состояний",
+      "empty_state": "Сопоставления состояний не настроены. Создайте первое сопоставление для синхронизации состояний инцидентов Sentry с состояниями вашего проекта.",
+      "failed_loading_state_mappings": "Не удалось загрузить ваши сопоставления состояний. Это может быть связано с проблемой сети или проблемой с интеграцией.",
+      "loading_project_states": "Загрузка состояний проекта...",
+      "error_loading_states": "Ошибка загрузки состояний",
+      "no_states_available": "Состояния недоступны",
+      "no_permission_states": "У вас нет разрешения на доступ к состояниям для этого проекта",
+      "states_not_found": "Состояния проекта не найдены",
+      "server_error_states": "Ошибка сервера при загрузке состояний"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Подключите и синхронизируйте репозитории Bitbucket Data Center с Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Проверка токенов внешних IdP для доступа к API.",
+    "header_description": "Проверяйте внешние OIDC/JWT-токены от вашего IdP (Azure AD, Okta и др.) для доступа к API Plane.",
+    "connected": "Подключено",
+    "connect": "Подключить",
+    "uninstall": "Удалить",
+    "uninstalling": "Удаление...",
+    "install_success": "OAuth Bridge успешно установлен.",
+    "install_error": "Не удалось установить OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge удалён.",
+    "uninstall_error": "Не удалось удалить OAuth Bridge.",
+    "token_providers": "Провайдеры токенов",
+    "token_providers_description": "Настройте внешние IdP, чьи JWT принимаются как учётные данные API.",
+    "add_provider": "Добавить провайдера",
+    "edit_provider": "Редактировать провайдера",
+    "enabled": "Включён",
+    "disabled": "Отключён",
+    "test": "Тест",
+    "no_providers_title": "Провайдеры не настроены.",
+    "no_providers_description": "Добавьте IdP для включения аутентификации по внешним токенам.",
+    "provider_updated": "Провайдер обновлён.",
+    "provider_added": "Провайдер добавлен.",
+    "provider_save_error": "Не удалось сохранить провайдера.",
+    "provider_deleted": "Провайдер удалён.",
+    "provider_delete_error": "Не удалось удалить провайдера.",
+    "provider_update_error": "Не удалось обновить провайдера.",
+    "jwks_reachable": "JWKS доступен",
+    "jwks_unreachable": "JWKS недоступен",
+    "jwks_test_error": "Не удалось получить JWKS по настроенному URL.",
+    "provider_form": {
+      "name_label": "Название",
+      "name_placeholder": "напр. Azure AD Production",
+      "name_description": "Понятное название для этого провайдера идентификации",
+      "name_required": "Название обязательно.",
+      "issuer_label": "Издатель",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Ожидаемое значение claim iss в JWT",
+      "issuer_required": "Издатель обязателен.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "HTTPS-эндпоинт, предоставляющий JSON Web Key Set провайдера",
+      "jwks_url_required": "URL JWKS обязателен.",
+      "jwks_url_https": "URL JWKS должен использовать HTTPS.",
+      "audience_label": "Аудитория",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Ожидаемые claim(ы) aud в JWT, через запятую.",
+      "user_claims_label": "Claim пользователя",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "JWT claim, содержащий email пользователя",
+      "user_claims_required": "Claim пользователя обязателен.",
+      "allowed_algorithms_label": "Разрешённые алгоритмы подписи",
+      "allowed_algorithms_description": "Асимметричные алгоритмы для проверки подписи JWT",
+      "allowed_algorithms_required": "Необходим хотя бы один алгоритм.",
+      "select_algorithms": "Выберите алгоритмы",
+      "jwks_cache_ttl_label": "TTL кэша JWKS (секунды)",
+      "jwks_cache_ttl_description": "Время кэширования ключей JWKS провайдера (минимум 60 сек., по умолчанию 24 часа)",
+      "jwks_cache_ttl_min": "TTL кэша должен быть не менее 60 секунд.",
+      "rate_limit_label": "Лимит запросов",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Ограничение запросов в формате количество/период (напр. 120/minute). Оставьте пустым для лимита по умолчанию.",
+      "enable_provider": "Включить этого провайдера",
+      "saving": "Сохранение...",
+      "update": "Обновить"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Подключите и синхронизируйте вашу организацию GitHub Enterprise с Plane.",
+    "app_form_title": "Настройка GitHub Enterprise",
+    "app_form_description": "Настройте GitHub Enterprise для подключения к Plane.",
+    "app_id_title": "ID приложения",
+    "app_id_description": "ID приложения, которое вы создали в вашей организации GitHub Enterprise.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "ID приложения является обязательным",
+    "app_name_title": "Slug приложения",
+    "app_name_description": "Slug приложения, которое вы создали в вашей организации GitHub Enterprise.",
+    "app_name_error": "Slug приложения является обязательным",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "Базовая URL",
+    "base_url_description": "Базовая URL вашей организации GitHub Enterprise.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "Базовая URL является обязательной",
+    "invalid_base_url_error": "Неверная базовая URL",
+    "client_id_title": "ID клиента",
+    "client_id_description": "ID клиента приложения, которое вы создали в вашей организации GitHub Enterprise.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID клиента является обязательным",
+    "client_secret_title": "Секрет клиента",
+    "client_secret_description": "Секрет клиента приложения, которое вы создали в вашей организации GitHub Enterprise.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Секрет клиента является обязательным",
+    "webhook_secret_title": "Секрет вебхука",
+    "webhook_secret_description": "Секрет вебхука приложения, которое вы создали в вашей организации GitHub Enterprise.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Секрет вебхука является обязательным",
+    "private_key_title": "Приватный ключ (Base64 encoded)",
+    "private_key_description": "Base64 encoded private key приложения, которое вы создали в вашей организации GitHub Enterprise.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Приватный ключ является обязательным",
+    "connect_app": "Подключить приложение"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Предоставленные параметры запроса недействительны или отсутствуют обязательные поля",
+    "invalid_installation_account": "Предоставленный аккаунт установки недействителен",
+    "generic_error": "Произошла неожиданная ошибка при обработке вашего запроса",
+    "connection_not_found": "Запрашиваемое подключение не найдено",
+    "multiple_connections_found": "Найдено несколько подключений, когда ожидалось только одно",
+    "cannot_create_multiple_connections": "Вы уже подключили свою организацию к рабочему пространству. Пожалуйста, отключите существующее подключение перед подключением нового.",
+    "installation_not_found": "Запрашиваемая установка не найдена",
+    "user_not_found": "Запрашиваемый пользователь не найден",
+    "error_fetching_token": "Не удалось получить токен аутентификации",
+    "invalid_app_credentials": "Предоставленные учетные данные приложения недействительны",
+    "invalid_app_installation_id": "Не удалось установить приложение"
+  },
+  "import_status": {
+    "queued": "В очереди",
+    "created": "Создано",
+    "initiated": "Инициировано",
+    "pulling": "Извлечение",
+    "timed_out": "Время истекло",
+    "pulled": "Извлечено",
+    "progressing": "В процессе",
+    "transforming": "Преобразование",
+    "transformed": "Преобразовано",
+    "pushing": "Отправка",
+    "finished": "Завершено",
+    "error": "Ошибка",
+    "cancelled": "Отменено"
+  }
+}
diff --git a/packages/i18n/src/locales/ru/module.json b/packages/i18n/src/locales/ru/module.json
new file mode 100644
index 0000000..a42dd90
--- /dev/null
+++ b/packages/i18n/src/locales/ru/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Модуль} other {Модули}}",
+    "no_module": "Нет модуля",
+    "select": "Добавить модули"
+  }
+}
diff --git a/packages/i18n/src/locales/ru/navigation.json b/packages/i18n/src/locales/ru/navigation.json
new file mode 100644
index 0000000..80bbdd8
--- /dev/null
+++ b/packages/i18n/src/locales/ru/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Ничего не найдено"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Стикеры",
+    "your_work": "Ваша работа",
+    "projects": "Проекты",
+    "pages": "Страницы",
+    "new_work_item": "Новый рабочий элемент",
+    "home": "Главная",
+    "inbox": "Входящие",
+    "workspace": "Рабочие пространства",
+    "views": "Представления",
+    "analytics": "Аналитика",
+    "work_items": "Рабочие элементы",
+    "cycles": "Циклы",
+    "modules": "Модули",
+    "intake": "Предложения",
+    "drafts": "Черновики",
+    "favorites": "Избранное",
+    "pro": "Pro",
+    "upgrade": "Обновить",
+    "pi_chat": "AI Чат",
+    "epics": "Эпики",
+    "upgrade_plan": "Апгрейд план",
+    "plane_pro": "Плейн Про",
+    "business": "Бизнес"
+  }
+}
diff --git a/packages/i18n/src/locales/ru/notification.json b/packages/i18n/src/locales/ru/notification.json
new file mode 100644
index 0000000..fd40911
--- /dev/null
+++ b/packages/i18n/src/locales/ru/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Входящие",
+    "page_label": "{workspace} - Входящие",
+    "options": {
+      "mark_all_as_read": "Пометить все как прочитанные",
+      "mark_read": "Пометить как прочитанное",
+      "mark_unread": "Пометить как непрочитанное",
+      "refresh": "Обновить",
+      "filters": "Фильтры входящих",
+      "show_unread": "Показать непрочитанные",
+      "show_snoozed": "Показать отложенные",
+      "show_archived": "Показать архивные",
+      "mark_archive": "Архивировать",
+      "mark_unarchive": "Разархивировать",
+      "mark_snooze": "Отложить",
+      "mark_unsnooze": "Возобновить"
+    },
+    "toasts": {
+      "read": "Уведомление помечено как прочитанное",
+      "unread": "Уведомление помечено как непрочитанное",
+      "archived": "Уведомление архивировано",
+      "unarchived": "Уведомление разархивировано",
+      "snoozed": "Уведомление отложено",
+      "unsnoozed": "Уведомление возобновлено"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Выберите для просмотра деталей"
+      },
+      "all": {
+        "title": "Нет назначенных рабочих элементов",
+        "description": "Обновления по назначенным вам рабочим элементам будут\n отображаться здесь"
+      },
+      "mentions": {
+        "title": "Нет упомянутых рабочих элементов",
+        "description": "Обновления по рабочим элементам, где вас упомянули,\n будут отображаться здесь"
+      }
+    },
+    "tabs": {
+      "all": "Все",
+      "mentions": "Упоминания"
+    },
+    "filter": {
+      "assigned": "Назначенные мне",
+      "created": "Созданные мной",
+      "subscribed": "Отслеживаемые мной"
+    },
+    "snooze": {
+      "1_day": "1 день",
+      "3_days": "3 дня",
+      "5_days": "5 дней",
+      "1_week": "1 неделя",
+      "2_weeks": "2 недели",
+      "custom": "Другое"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/page.json b/packages/i18n/src/locales/ru/page.json
new file mode 100644
index 0000000..f92020d
--- /dev/null
+++ b/packages/i18n/src/locales/ru/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Структура",
+        "empty_state": {
+          "title": "Отсутствуют заголовки",
+          "description": "Давайте добавим несколько заголовков на эту страницу, чтобы увидеть их здесь."
+        }
+      },
+      "info": {
+        "label": "Информация",
+        "document_info": {
+          "words": "Слова",
+          "characters": "Символы",
+          "paragraphs": "Абзацы",
+          "read_time": "Время чтения"
+        },
+        "actors_info": {
+          "edited_by": "Отредактировано",
+          "created_by": "Создано"
+        },
+        "version_history": {
+          "label": "История версий",
+          "current_version": "Текущая версия",
+          "highlight_changes": "Выделить изменения"
+        }
+      },
+      "assets": {
+        "label": "Ресурсы",
+        "download_button": "Скачать",
+        "empty_state": {
+          "title": "Отсутствуют изображения",
+          "description": "Добавьте изображения, чтобы увидеть их здесь."
+        }
+      },
+      "comments": {
+        "label": "Комментарии",
+        "empty_state": {
+          "title": "Нет комментариев",
+          "description": "Добавьте комментарии, чтобы увидеть их здесь."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Название стикера не может быть длиннее 100 символов.",
+        "already_exists": "Стикер без описания уже существует"
+      },
+      "created": {
+        "title": "Стикер создан",
+        "message": "Стикер успешно создан"
+      },
+      "not_created": {
+        "title": "Ошибка создания стикера",
+        "message": "Не удалось создать стикер"
+      },
+      "updated": {
+        "title": "Стикер обновлён",
+        "message": "Стикер успешно обновлён"
+      },
+      "not_updated": {
+        "title": "Ошибка обновления",
+        "message": "Не удалось обновить стикер"
+      },
+      "removed": {
+        "title": "Стикер удалён",
+        "message": "Стикер успешно удалён"
+      },
+      "not_removed": {
+        "title": "Ошибка удаления",
+        "message": "Не удалось удалить стикер"
+      }
+    },
+    "open_button": "Открыть панель навигации",
+    "close_button": "Закрыть панель навигации",
+    "outline_floating_button": "Открыть структуру"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Переместить",
+        "loading": "Перемещение"
+      },
+      "cannot_move_to_teamspace": "Приватные и общие страницы нельзя переместить в командное пространство.",
+      "placeholders": {
+        "workspace_to_all": "Искать проекты и командные пространства",
+        "workspace_to_project": "Искать проекты",
+        "project_to_all": "Искать проекты и командные пространства",
+        "project_to_project": "Искать проекты",
+        "project_to_all_with_wiki": "Искать коллекции wiki, проекты и командные пространства",
+        "project_to_project_with_wiki": "Искать коллекции wiki и проекты"
+      },
+      "toasts": {
+        "success": {
+          "title": "Успех!",
+          "message": "Страница успешно перемещена."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось переместить страницу. Повторите попытку позже."
+        },
+        "collection_error": {
+          "title": "Перемещено в wiki",
+          "message": "Страница была перемещена в wiki, но её не удалось добавить в выбранную коллекцию. Она остаётся в General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Удалить из коллекции",
+      "success_message": "Страница удалена из коллекции.",
+      "error_message": "Не удалось удалить страницу из коллекции. Повторите попытку."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Достигнут лимит контента, живая синхронизация отключена. Создайте новую страницу или используйте вложенные страницы, чтобы продолжить синхронизацию."
+  }
+}
diff --git a/packages/i18n/src/locales/ru/power-k.json b/packages/i18n/src/locales/ru/power-k.json
new file mode 100644
index 0000000..6d63a6c
--- /dev/null
+++ b/packages/i18n/src/locales/ru/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Массовое удаление рабочих элементов"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Действия с рабочим элементом",
+        "indicator": "Рабочий элемент",
+        "change_state": "Изменить состояние",
+        "change_priority": "Изменить приоритет",
+        "change_assignees": "Назначить",
+        "assign_to_me": "Назначить мне",
+        "unassign_from_me": "Снять назначение с меня",
+        "change_estimate": "Изменить оценку",
+        "add_to_cycle": "Добавить в цикл",
+        "add_to_modules": "Добавить в модули",
+        "add_labels": "Добавить метки",
+        "subscribe": "Подписаться на уведомления",
+        "unsubscribe": "Отписаться от уведомлений",
+        "delete": "Удалить",
+        "copy_id": "Копировать ID",
+        "copy_id_toast_success": "ID рабочего элемента скопирован в буфер обмена.",
+        "copy_id_toast_error": "Произошла ошибка при копировании ID рабочего элемента в буфер обмена.",
+        "copy_title": "Копировать название",
+        "copy_title_toast_success": "Название рабочего элемента скопировано в буфер обмена.",
+        "copy_title_toast_error": "Произошла ошибка при копировании названия рабочего элемента в буфер обмена.",
+        "copy_url": "Копировать URL",
+        "copy_url_toast_success": "URL рабочего элемента скопирован в буфер обмена.",
+        "copy_url_toast_error": "Произошла ошибка при копировании URL рабочего элемента в буфер обмена."
+      },
+      "cycle": {
+        "title": "Действия с циклом",
+        "indicator": "Цикл",
+        "add_to_favorites": "Добавить в избранное",
+        "remove_from_favorites": "Удалить из избранного",
+        "copy_url": "Копировать URL",
+        "copy_url_toast_success": "URL цикла скопирован в буфер обмена.",
+        "copy_url_toast_error": "Произошла ошибка при копировании URL цикла в буфер обмена."
+      },
+      "module": {
+        "title": "Действия с модулем",
+        "indicator": "Модуль",
+        "add_remove_members": "Добавить/удалить участников",
+        "change_status": "Изменить статус",
+        "add_to_favorites": "Добавить в избранное",
+        "remove_from_favorites": "Удалить из избранного",
+        "copy_url": "Копировать URL",
+        "copy_url_toast_success": "URL модуля скопирован в буфер обмена.",
+        "copy_url_toast_error": "Произошла ошибка при копировании URL модуля в буфер обмена."
+      },
+      "page": {
+        "title": "Действия со страницей",
+        "indicator": "Страница",
+        "lock": "Заблокировать",
+        "unlock": "Разблокировать",
+        "make_private": "Сделать приватной",
+        "make_public": "Сделать публичной",
+        "archive": "Архивировать",
+        "restore": "Восстановить",
+        "add_to_favorites": "Добавить в избранное",
+        "remove_from_favorites": "Удалить из избранного",
+        "copy_url": "Копировать URL",
+        "copy_url_toast_success": "URL страницы скопирован в буфер обмена.",
+        "copy_url_toast_error": "Произошла ошибка при копировании URL страницы в буфер обмена."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Новый рабочий элемент",
+      "create_page": "Новая страница",
+      "create_view": "Новое представление",
+      "create_cycle": "Новый цикл",
+      "create_module": "Новый модуль",
+      "create_project": "Новый проект",
+      "create_workspace": "Новое рабочее пространство",
+      "create_project_automation": "Новая автоматизация"
+    },
+    "navigation_actions": {
+      "open_workspace": "Открыть рабочее пространство",
+      "nav_home": "Перейти на главную",
+      "nav_inbox": "Перейти во входящие",
+      "nav_your_work": "Перейти к вашей работе",
+      "nav_account_settings": "Перейти в настройки аккаунта",
+      "open_project": "Открыть проект",
+      "nav_projects_list": "Перейти к списку проектов",
+      "nav_all_workspace_work_items": "Перейти ко всем рабочим элементам",
+      "nav_assigned_workspace_work_items": "Перейти к назначенным рабочим элементам",
+      "nav_created_workspace_work_items": "Перейти к созданным рабочим элементам",
+      "nav_subscribed_workspace_work_items": "Перейти к рабочим элементам с подпиской",
+      "nav_workspace_analytics": "Перейти к аналитике рабочего пространства",
+      "nav_workspace_drafts": "Перейти к черновикам рабочего пространства",
+      "nav_workspace_archives": "Перейти в архивы рабочего пространства",
+      "open_workspace_setting": "Открыть настройку рабочего пространства",
+      "nav_workspace_settings": "Перейти в настройки рабочего пространства",
+      "nav_project_work_items": "Перейти к рабочим элементам",
+      "open_project_cycle": "Открыть цикл",
+      "nav_project_cycles": "Перейти к циклам",
+      "open_project_module": "Открыть модуль",
+      "nav_project_modules": "Перейти к модулям",
+      "open_project_view": "Открыть представление проекта",
+      "nav_project_views": "Перейти к представлениям проекта",
+      "nav_project_pages": "Перейти к страницам",
+      "nav_project_intake": "Перейти к предложениям",
+      "nav_project_archives": "Перейти в архивы проекта",
+      "open_project_setting": "Открыть настройку проекта",
+      "nav_project_settings": "Перейти в настройки проекта",
+      "nav_workspace_active_cycle": "Перейти ко всем активным циклам",
+      "nav_project_overview": "Перейти к обзору проекта"
+    },
+    "account_actions": {
+      "sign_out": "Выйти",
+      "workspace_invites": "Приглашения в рабочее пространство"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Переключить боковую панель приложения",
+      "copy_current_page_url": "Копировать URL текущей страницы",
+      "copy_current_page_url_toast_success": "URL текущей страницы скопирован в буфер обмена.",
+      "copy_current_page_url_toast_error": "Произошла ошибка при копировании URL текущей страницы в буфер обмена.",
+      "focus_top_nav_search": "Фокус на поле поиска"
+    },
+    "preferences_actions": {
+      "update_theme": "Изменить тему интерфейса",
+      "update_timezone": "Изменить часовой пояс",
+      "update_start_of_week": "Изменить первый день недели",
+      "update_language": "Изменить язык интерфейса",
+      "toast": {
+        "theme": {
+          "success": "Тема успешно обновлена.",
+          "error": "Не удалось обновить тему. Пожалуйста, попробуйте снова."
+        },
+        "timezone": {
+          "success": "Часовой пояс успешно обновлён.",
+          "error": "Не удалось обновить часовой пояс. Пожалуйста, попробуйте снова."
+        },
+        "generic": {
+          "success": "Настройки успешно обновлены.",
+          "error": "Не удалось обновить настройки. Пожалуйста, попробуйте снова."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Открыть горячие клавиши",
+      "open_plane_documentation": "Открыть документацию Plane",
+      "join_forum": "Присоединиться к нашему форуму",
+      "report_bug": "Сообщить об ошибке",
+      "chat_with_us": "Чат с нами"
+    },
+    "page_placeholders": {
+      "default": "Введите команду или выполните поиск",
+      "open_workspace": "Открыть рабочее пространство",
+      "open_project": "Открыть проект",
+      "open_workspace_setting": "Открыть настройку рабочего пространства",
+      "open_project_cycle": "Открыть цикл",
+      "open_project_module": "Открыть модуль",
+      "open_project_view": "Открыть представление проекта",
+      "open_project_setting": "Открыть настройку проекта",
+      "update_work_item_state": "Изменить состояние",
+      "update_work_item_priority": "Изменить приоритет",
+      "update_work_item_assignee": "Назначить",
+      "update_work_item_estimate": "Изменить оценку",
+      "update_work_item_cycle": "Добавить в цикл",
+      "update_work_item_module": "Добавить в модули",
+      "update_work_item_labels": "Добавить метки",
+      "update_module_member": "Изменить участников",
+      "update_module_status": "Изменить статус",
+      "update_theme": "Изменить тему",
+      "update_timezone": "Изменить часовой пояс",
+      "update_start_of_week": "Изменить первый день недели",
+      "update_language": "Изменить язык"
+    },
+    "search_menu": {
+      "no_results": "Ничего не найдено",
+      "clear_search": "Очистить поиск",
+      "go_to_advanced_search": "Перейти к расширенному поиску"
+    },
+    "footer": {
+      "workspace_level": "Уровень рабочего пространства"
+    },
+    "group_titles": {
+      "actions": "Действия",
+      "contextual": "Контекстные",
+      "navigation": "Навигация",
+      "create": "Создать",
+      "general": "Общее",
+      "settings": "Настройки",
+      "account": "Аккаунт",
+      "miscellaneous": "Прочее",
+      "preferences": "Настройки",
+      "help": "Помощь"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/project-settings.json b/packages/i18n/src/locales/ru/project-settings.json
new file mode 100644
index 0000000..6ecde27
--- /dev/null
+++ b/packages/i18n/src/locales/ru/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Введите ID проекта",
+      "please_select_a_timezone": "Выберите часовой пояс",
+      "archive_project": {
+        "title": "Архивировать проект",
+        "description": "Проект исчезнет из бокового меню, но останется доступным на странице проектов. Можно восстановить или удалить позже.",
+        "button": "Архивировать"
+      },
+      "delete_project": {
+        "title": "Удалить проект",
+        "description": "Все данные проекта будут безвозвратно удалены без возможности восстановления.",
+        "button": "Удалить проект"
+      },
+      "toast": {
+        "success": "Проект обновлён",
+        "error": "Ошибка обновления. Попробуйте снова."
+      }
+    },
+    "members": {
+      "label": "Участники",
+      "project_lead": "Руководитель проекта",
+      "project_lead_description": "Выберите руководителя проекта.",
+      "default_assignee": "Ответственный по умолчанию",
+      "default_assignee_description": "Выберите исполнителя по умолчанию для проекта.",
+      "project_subscribers": "Подписчики проекта",
+      "project_subscribers_description": "Выберите участников, которые будут получать уведомления по этому проекту.",
+      "guest_super_permissions": {
+        "title": "Дать гостям доступ на просмотр всех рабочих элементов:",
+        "sub_heading": "Гости смогут просматривать все рабочие элементы проекта"
+      },
+      "invite_members": {
+        "title": "Пригласить участников",
+        "sub_heading": "Пригласите коллег для работы над проектом.",
+        "select_co_worker": "Выберите сотрудника"
+      }
+    },
+    "states": {
+      "heading": "Состояния",
+      "description": "Определяйте и настраивайте состояния рабочего процесса для отслеживания прогресса ваших рабочих элементов.",
+      "describe_this_state_for_your_members": "Опишите этот статус для участников",
+      "empty_state": {
+        "title": "Нет статусов для группы {groupKey}",
+        "description": "Создайте новый статус"
+      }
+    },
+    "labels": {
+      "heading": "Метки",
+      "description": "Создавайте пользовательские метки для категоризации и организации ваших рабочих элементов",
+      "label_title": "Название метки",
+      "label_title_is_required": "Название обязательно",
+      "label_max_char": "Максимальная длина названия - 255 символов",
+      "toast": {
+        "error": "Ошибка обновления метки"
+      }
+    },
+    "estimates": {
+      "heading": "Оценки",
+      "description": "Настройте системы оценки для отслеживания и обмена информацией об усилиях, необходимых для каждого рабочего элемента.",
+      "label": "Оценки",
+      "title": "Включить оценки для моего проекта",
+      "enable_description": "Они помогают вам в общении о сложности и рабочей нагрузке команды.",
+      "no_estimate": "Без оценки",
+      "new": "Новая система оценок",
+      "create": {
+        "custom": "Пользовательская",
+        "start_from_scratch": "Начать с нуля",
+        "choose_template": "Выбрать шаблон",
+        "choose_estimate_system": "Выбрать систему оценок",
+        "enter_estimate_point": "Ввести оценку",
+        "step": "Шаг {step} из {total}",
+        "label": "Создать оценку"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Оценка создана",
+            "message": "Оценка успешно создана"
+          },
+          "error": {
+            "title": "Ошибка создания оценки",
+            "message": "Не удалось создать новую оценку, пожалуйста, попробуйте снова."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Оценка изменена",
+            "message": "Оценка обновлена в вашем проекте."
+          },
+          "error": {
+            "title": "Ошибка изменения оценки",
+            "message": "Не удалось изменить оценку, пожалуйста, попробуйте снова"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Успех!",
+            "message": "Оценки включены."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Успех!",
+            "message": "Оценки отключены."
+          },
+          "error": {
+            "title": "Ошибка!",
+            "message": "Не удалось отключить оценки. Пожалуйста, попробуйте снова"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Оценки переупорядочены",
+            "message": "Оценки были переупорядочены в вашем проекте."
+          },
+          "error": {
+            "title": "Не удалось переупорядочить оценки",
+            "message": "Мы не смогли переупорядочить оценки, пожалуйста, попробуйте снова"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Система оценок создана",
+            "message": "Успешно создано и включено"
+          },
+          "error": {
+            "title": "Ошибка",
+            "message": "Что-то пошло не так"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Оценка должна быть больше 0.",
+        "unable_to_process": "Не удалось обработать ваш запрос, пожалуйста, попробуйте снова.",
+        "numeric": "Оценка должна быть числовым значением.",
+        "character": "Оценка должна быть символьным значением.",
+        "empty": "Значение оценки не может быть пустым.",
+        "already_exists": "Значение оценки уже существует.",
+        "unsaved_changes": "У вас есть несохраненные изменения. Пожалуйста, сохраните их перед нажатием на готово",
+        "remove_empty": "Оценка не может быть пустой. Введите значение в каждое поле или удалите те, для которых у вас нет значений.",
+        "fill": "Пожалуйста, заполните это поле оценки",
+        "repeat": "Значение оценки не может повторяться"
+      },
+      "systems": {
+        "points": {
+          "label": "Баллы",
+          "fibonacci": "Фибоначчи",
+          "linear": "Линейная",
+          "squares": "Квадраты",
+          "custom": "Пользовательская"
+        },
+        "categories": {
+          "label": "Категории",
+          "t_shirt_sizes": "Размеры футболок",
+          "easy_to_hard": "От простого к сложному",
+          "custom": "Пользовательская"
+        },
+        "time": {
+          "label": "Время",
+          "hours": "Часы"
+        }
+      },
+      "edit": {
+        "title": "Редактировать систему оценок",
+        "add_or_update": {
+          "title": "Добавить, обновить или удалить оценки",
+          "description": "Управляйте текущей системой, добавляя, обновляя или удаляя баллы или категории."
+        },
+        "switch": {
+          "title": "Изменить тип оценки",
+          "description": "Преобразуйте вашу систему баллов в систему категорий и наоборот."
+        }
+      },
+      "switch": "Переключить систему оценок",
+      "current": "Текущая система оценок",
+      "select": "Выберите систему оценок"
+    },
+    "automations": {
+      "label": "Автоматизация",
+      "heading": "Автоматизации",
+      "description": "Настройте автоматические действия, чтобы упростить процесс управления проектом и сократить ручные задачи.",
+      "auto-archive": {
+        "title": "Автоархивация закрытых рабочих элементов",
+        "description": "Plane будет автоматически архивировать рабочие элементы, которые были завершены или отменены.",
+        "duration": "Автоархивация рабочих элементов, которые закрыты в течение"
+      },
+      "auto-close": {
+        "title": "Автоматическое закрытие рабочих элементов",
+        "description": "Plane будет автоматически закрывать рабочие элементы, которые не были завершены или отменены.",
+        "duration": "Автоматическое закрытие рабочих элементов, которые неактивны в течение",
+        "auto_close_status": "Статус автоматического закрытия"
+      },
+      "auto-remind": {
+        "title": "Автоматические напоминания",
+        "description": "Plane автоматически будет отправлять напоминания через email и в приложении, чтобы ваша команда оставалась на пути к срокам.",
+        "duration": "Отправить напоминание заранее"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Нет меток",
+        "description": "Создайте метки для организации и фильтрации рабочих элементов в вашем проекте."
+      },
+      "estimates": {
+        "title": "Нет систем оценок",
+        "description": "Создайте набор оценок для передачи объема работы на каждый рабочий элемент.",
+        "primary_button": "Добавить систему оценок"
+      },
+      "integrations": {
+        "title": "Интеграции не настроены",
+        "description": "Настройте GitHub и другие интеграции для синхронизации ваших рабочих элементов проекта."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Включить рабочие процессы",
+        "description": "Настройте рабочие процессы для управления перемещением рабочих элементов",
+        "no_states_tooltip": "В рабочий процесс не добавлены состояния.",
+        "no_work_item_types_tooltip": "В рабочий процесс не добавлены типы рабочих элементов.",
+        "no_states_or_work_item_types_tooltip": "В рабочий процесс не добавлены состояния или типы рабочих элементов.",
+        "toast": {
+          "loading": {
+            "enabling": "Включение рабочих процессов",
+            "disabling": "Отключение рабочих процессов"
+          },
+          "success": {
+            "title": "Успех!",
+            "message": "Рабочие процессы успешно включены."
+          },
+          "error": {
+            "title": "Ошибка!",
+            "message": "Не удалось включить рабочие процессы. Пожалуйста, попробуйте снова."
+          }
+        }
+      },
+      "heading": "Рабочие процессы",
+      "description": "Автоматизируйте переходы рабочих элементов и устанавливайте правила, которые управляют тем, как задачи проходят через конвейер вашего проекта.",
+      "add_button": "Добавить новый рабочий процесс",
+      "search": "Искать рабочие процессы",
+      "detail": {
+        "define": "Определить рабочий процесс",
+        "add_states": "Добавить состояния",
+        "unmapped_states": {
+          "title": "Обнаружены несопоставленные состояния",
+          "description": "Некоторые рабочие элементы выбранных типов сейчас находятся в состояниях, которых нет в этом рабочем процессе.",
+          "note": "Если вы включите этот рабочий процесс, эти элементы будут автоматически перемещены в начальное состояние этого рабочего процесса.",
+          "label": "Отсутствующие состояния",
+          "tooltip": "Некоторые рабочие элементы находятся в состояниях, которые не сопоставлены с этим рабочим процессом. Откройте рабочий процесс, чтобы проверить."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Все состояния используются",
+          "description": "Все определённые для этого проекта состояния уже присутствуют в текущем рабочем процессе."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Этот рабочий процесс применяется к любому типу рабочего элемента, который не назначен ни одному рабочему процессу."
+      },
+      "create": {
+        "heading": "Создать новый рабочий процесс",
+        "name": {
+          "placeholder": "Добавьте уникальное имя",
+          "validation": {
+            "max_length": "Имя должно содержать менее 255 символов",
+            "required": "Имя обязательно",
+            "invalid": "Имя может содержать только буквы, цифры, пробелы, дефисы и апострофы"
+          }
+        },
+        "description": {
+          "placeholder": "Добавьте краткое описание",
+          "validation": {
+            "invalid": "Описание может содержать только буквы, цифры, пробелы, дефисы и апострофы"
+          }
+        },
+        "work_item_type": {
+          "label": "Тип рабочего элемента"
+        },
+        "success": {
+          "title": "Успех!",
+          "message": "Рабочий процесс успешно создан."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось создать рабочий процесс. Пожалуйста, попробуйте снова."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Успех!",
+          "message": "Рабочий процесс успешно обновлён."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось обновить рабочий процесс. Пожалуйста, попробуйте снова."
+        }
+      },
+      "delete": {
+        "loading": "Удаление рабочего процесса",
+        "success": {
+          "title": "Успех!",
+          "message": "Рабочий процесс успешно удалён."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось удалить рабочий процесс. Пожалуйста, попробуйте снова."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Успех!",
+          "message": "Состояния успешно добавлены."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось добавить состояния. Пожалуйста, попробуйте снова."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Типы рабочих элементов",
+      "description": "Создавайте и настраивайте различные типы рабочих элементов с уникальными свойствами"
+    },
+    "features": {
+      "cycles": {
+        "title": "Циклы",
+        "short_title": "Циклы",
+        "description": "Планируйте работу в гибких периодах, которые адаптируются к уникальному ритму и темпу этого проекта.",
+        "toggle_title": "Включить циклы",
+        "toggle_description": "Планируйте работу в целенаправленные периоды времени."
+      },
+      "modules": {
+        "title": "Модули",
+        "short_title": "Модули",
+        "description": "Организуйте работу в подпроекты с выделенными руководителями и исполнителями.",
+        "toggle_title": "Включить модули",
+        "toggle_description": "Участники проекта смогут создавать и редактировать модули."
+      },
+      "views": {
+        "title": "Представления",
+        "short_title": "Представления",
+        "description": "Сохраняйте пользовательские сортировки, фильтры и параметры отображения или делитесь ими с командой.",
+        "toggle_title": "Включить представления",
+        "toggle_description": "Участники проекта смогут создавать и редактировать представления."
+      },
+      "pages": {
+        "title": "Страницы",
+        "short_title": "Страницы",
+        "description": "Создавайте и редактируйте свободный контент: заметки, документы, что угодно.",
+        "toggle_title": "Включить страницы",
+        "toggle_description": "Участники проекта смогут создавать и редактировать страницы."
+      },
+      "intake": {
+        "intake_responsibility": "Ответственность за прием",
+        "intake_sources": "Источники приёма",
+        "title": "Приём",
+        "short_title": "Приём",
+        "description": "Позвольте не-участникам делиться ошибками, отзывами и предложениями; не нарушая ваш рабочий процесс.",
+        "toggle_title": "Включить приём",
+        "toggle_description": "Разрешить участникам проекта создавать запросы на приём в приложении.",
+        "toggle_tooltip_on": "Попросите администратора проекта включить.",
+        "toggle_tooltip_off": "Попросите администратора проекта выключить.",
+        "notify_assignee": {
+          "title": "Уведомить ответственных",
+          "description": "Для нового запроса на прием ответственные по умолчанию будут уведомлены через уведомления"
+        },
+        "in_app": {
+          "title": "В приложении",
+          "description": "Получайте новые рабочие элементы от участников и гостей рабочего пространства без нарушения существующих."
+        },
+        "email": {
+          "title": "Электронная почта",
+          "description": "Собирайте новые рабочие элементы от всех, кто отправляет письмо на адрес Plane.",
+          "fieldName": "ID электронной почты"
+        },
+        "form": {
+          "title": "Формы",
+          "description": "Позвольте людям вне рабочего пространства создавать потенциальные новые рабочие элементы через выделенную и безопасную форму.",
+          "fieldName": "URL формы по умолчанию",
+          "create_forms": "Создавайте формы с типами рабочих элементов",
+          "manage_forms": "Управление формами",
+          "manage_forms_tooltip": "Попросите администратора рабочего пространства управлять.",
+          "create_form": "Создать форму",
+          "edit_form": "Редактировать детали формы",
+          "form_title": "Название формы",
+          "form_title_required": "Название формы обязательно",
+          "work_item_type": "Тип рабочего элемента",
+          "remove_property": "Удалить свойство",
+          "select_properties": "Выбрать свойства",
+          "search_placeholder": "Поиск свойств",
+          "toasts": {
+            "success_create": "Форма приёма успешно создана",
+            "success_update": "Форма приёма успешно обновлена",
+            "error_create": "Не удалось создать форму приёма",
+            "error_update": "Не удалось обновить форму приёма"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Установка ответственных...",
+            "success": {
+              "title": "Успех!",
+              "message": "Ответственные успешно установлены."
+            },
+            "error": {
+              "title": "Ошибка!",
+              "message": "Что-то пошло не так при установке ответственных. Пожалуйста, попробуйте снова."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Отслеживание времени",
+        "short_title": "Отслеживание времени",
+        "description": "Записывайте время, затраченное на рабочие элементы и проекты.",
+        "toggle_title": "Включить отслеживание времени",
+        "toggle_description": "Участники проекта смогут записывать отработанное время."
+      },
+      "milestones": {
+        "title": "Вехи",
+        "short_title": "Вехи",
+        "description": "Вехи обеспечивают уровень для выравнивания рабочих элементов к общим датам завершения.",
+        "toggle_title": "Включить вехи",
+        "toggle_description": "Организуйте рабочие элементы по срокам вех."
+      },
+      "toasts": {
+        "loading": "Обновление функции проекта...",
+        "success": "Функция проекта успешно обновлена.",
+        "error": "Что-то пошло не так при обновлении функции проекта. Пожалуйста, попробуйте снова."
+      }
+    },
+    "project_updates": {
+      "heading": "Обновления проекта",
+      "description": "Консолидированное отслеживание и мониторинг прогресса по этому проекту"
+    },
+    "templates": {
+      "heading": "Шаблоны",
+      "description": "Экономьте 80% времени, затрачиваемого на создание проектов, рабочих элементов и страниц, используя шаблоны."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Автоматическое планирование циклов",
+        "description": "Поддерживайте движение циклов без ручной настройки.",
+        "tooltip": "Автоматически создавайте новые циклы на основе выбранного расписания.",
+        "edit_button": "Редактировать",
+        "form": {
+          "cycle_title": {
+            "label": "Название цикла",
+            "placeholder": "Название",
+            "tooltip": "К названию будут добавлены номера для последующих циклов. Например: Дизайн - 1/2/3",
+            "validation": {
+              "required": "Название цикла обязательно",
+              "max_length": "Название не должно превышать 255 символов"
+            }
+          },
+          "cycle_duration": {
+            "label": "Длительность цикла",
+            "unit": "Недели",
+            "validation": {
+              "required": "Длительность цикла обязательна",
+              "min": "Длительность цикла должна быть не менее 1 недели",
+              "max": "Длительность цикла не может превышать 30 недель",
+              "positive": "Длительность цикла должна быть положительной"
+            }
+          },
+          "cooldown_period": {
+            "label": "Период охлаждения",
+            "unit": "дни",
+            "tooltip": "Пауза между циклами перед началом следующего.",
+            "validation": {
+              "required": "Период охлаждения обязателен",
+              "negative": "Период охлаждения не может быть отрицательным"
+            }
+          },
+          "start_date": {
+            "label": "День начала цикла",
+            "validation": {
+              "required": "Дата начала обязательна",
+              "past": "Дата начала не может быть в прошлом"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Количество будущих циклов",
+            "validation": {
+              "required": "Количество циклов обязательно",
+              "min": "Требуется не менее 1 цикла",
+              "max": "Невозможно запланировать более 3 циклов"
+            }
+          },
+          "auto_rollover": {
+            "label": "Автоматический перенос рабочих элементов",
+            "tooltip": "В день завершения цикла переместить все незавершенные рабочие элементы в следующий цикл."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Включение автоматического планирования циклов",
+            "loading_disable": "Отключение автоматического планирования циклов",
+            "success": {
+              "title": "Успешно!",
+              "message": "Автоматическое планирование циклов успешно переключено."
+            },
+            "error": {
+              "title": "Ошибка!",
+              "message": "Не удалось переключить автоматическое планирование циклов."
+            }
+          },
+          "save": {
+            "loading": "Сохранение конфигурации автоматического планирования циклов",
+            "success": {
+              "title": "Успешно!",
+              "message_create": "Конфигурация автоматического планирования циклов успешно сохранена.",
+              "message_update": "Конфигурация автоматического планирования циклов успешно обновлена."
+            },
+            "error": {
+              "title": "Ошибка!",
+              "message_create": "Не удалось сохранить конфигурацию автоматического планирования циклов.",
+              "message_update": "Не удалось обновить конфигурацию автоматического планирования циклов."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/project.json b/packages/i18n/src/locales/ru/project.json
new file mode 100644
index 0000000..78fab1e
--- /dev/null
+++ b/packages/i18n/src/locales/ru/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Дата создания",
+      "updated_at": "Дата обновления",
+      "name": "Имя"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Добавить цикл",
+    "more_details": "Подробнее",
+    "cycle": "Цикл",
+    "update_cycle": "Обновить цикл",
+    "create_cycle": "Создать цикл",
+    "no_matching_cycles": "Нет подходящих циклов",
+    "remove_filters_to_see_all_cycles": "Снимите фильтры для просмотра всех циклов",
+    "remove_search_criteria_to_see_all_cycles": "Очистите поиск для просмотра всех циклов",
+    "only_completed_cycles_can_be_archived": "Только завершённые циклы можно архивировать",
+    "start_date": "Дата начала",
+    "end_date": "Дата окончания",
+    "in_your_timezone": "В вашем часовом поясе",
+    "transfer_work_items": "Перенести {count} рабочих элементов",
+    "transfer": {
+      "no_cycles_available": "Нет других циклов для переноса рабочих элементов."
+    },
+    "date_range": "Диапазон дат",
+    "add_date": "Добавить дату",
+    "active_cycle": {
+      "label": "Активный цикл",
+      "progress": "Прогресс",
+      "chart": "Диаграмма сгорания",
+      "priority_issue": "Приоритетные рабочие элементы",
+      "assignees": "Ответственные",
+      "issue_burndown": "Выгорание рабочих элементов",
+      "ideal": "Идеальный",
+      "current": "Текущий",
+      "labels": "Метки",
+      "trailing": "Отставание",
+      "leading": "Опережение"
+    },
+    "upcoming_cycle": {
+      "label": "Предстоящий цикл"
+    },
+    "completed_cycle": {
+      "label": "Завершённый цикл"
+    },
+    "status": {
+      "days_left": "Дней осталось",
+      "completed": "Завершено",
+      "yet_to_start": "Ещё не начато",
+      "in_progress": "В процессе",
+      "draft": "Черновик"
+    },
+    "action": {
+      "restore": {
+        "title": "Восстановить цикл",
+        "success": {
+          "title": "Цикл восстановлен",
+          "description": "Цикл успешно восстановлен"
+        },
+        "failed": {
+          "title": "Ошибка восстановления",
+          "description": "Не удалось восстановить цикл"
+        }
+      },
+      "favorite": {
+        "loading": "Добавление в избранное",
+        "success": {
+          "description": "Цикл добавлен в избранное",
+          "title": "Успех!"
+        },
+        "failed": {
+          "description": "Ошибка добавления в избранное",
+          "title": "Ошибка!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Удаление из избранного",
+        "success": {
+          "description": "Цикл удалён из избранного",
+          "title": "Успех!"
+        },
+        "failed": {
+          "description": "Ошибка удаления цикла из избранного. Попробуйте снова.",
+          "title": "Ошибка!"
+        }
+      },
+      "update": {
+        "loading": "Обновление цикла",
+        "success": {
+          "description": "Цикл успешно обновлён",
+          "title": "Успех!"
+        },
+        "failed": {
+          "description": "Ошибка обновления цикла. Попробуйте снова.",
+          "title": "Ошибка!"
+        },
+        "error": {
+          "already_exists": "Цикл на указанные даты уже существует. Для создания черновика удалите даты."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Организуйте работу в циклах",
+        "description": "Разбивайте работу на временные интервалы, устанавливайте сроки и отслеживайте прогресс команды.",
+        "primary_button": {
+          "text": "Создать первый цикл",
+          "comic": {
+            "title": "Циклы - повторяющиеся временные интервалы",
+            "description": "Спринт, итерация или любой другой термин для еженедельного/двухнедельного планирования."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Нет рабочих элементов в цикле",
+        "description": "Добавьте существующие или создайте новые рабочие элементы для этого цикла",
+        "primary_button": {
+          "text": "Создать рабочий элемент"
+        },
+        "secondary_button": {
+          "text": "Добавить существующий рабочий элемент"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Нет рабочих элементов в цикле",
+        "description": "Нет рабочих элементов. Рабочие элементы были перенесены или скрыты. Для просмотра измените настройки отображения."
+      },
+      "active": {
+        "title": "Нет активных циклов",
+        "description": "Активный цикл включает текущую дату. Здесь отображается прогресс активного цикла."
+      },
+      "archived": {
+        "title": "Нет архивных циклов",
+        "description": "Архивируйте завершённые циклы для упорядочивания проекта."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Сохраняйте фильтры в виде представлений. Создавайте неограниченное количество вариантов",
+        "description": "Представления - это сохранённые наборы фильтров для быстрого доступа. Все участники проекта видят созданные представления и могут выбирать подходящие.",
+        "primary_button": {
+          "text": "Создать первое представление",
+          "comic": {
+            "title": "Представления работают на основе свойств рабочих элементов",
+            "description": "Создавайте представления с любым количеством свойств в качестве фильтров."
+          }
+        },
+        "filter": {
+          "title": "Подходящих представлений не найдено",
+          "description": "Нет представлений, соответствующих критериям поиска.\n Создайте новое представление."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Пока нет архивных рабочих элементов",
+        "description": "Вручную или автоматически вы можете архивировать рабочие элементы, которые завершены или отменены. Найдите их здесь после архивации.",
+        "primary_button": {
+          "text": "Настроить автоматизацию"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Нет рабочих элементов, соответствующих применённым фильтрам",
+        "secondary_button": {
+          "text": "Сбросить все фильтры"
+        }
+      },
+      "public": {
+        "title": "Пока нет публичных страниц",
+        "description": "Смотрите страницы, которыми поделились со всеми участниками проекта, здесь.",
+        "primary_button": {
+          "text": "Создать первую страницу"
+        }
+      },
+      "archived": {
+        "title": "Пока нет архивных страниц",
+        "description": "Архивируйте неактуальные страницы. Получайте доступ к ним здесь при необходимости."
+      },
+      "shared": {
+        "title": "Пока нет общих страниц",
+        "description": "Страницы, которыми с вами поделились, будут отображаться здесь."
+      }
+    },
+    "delete_view": {
+      "title": "Вы уверены, что хотите удалить это представление?",
+      "content": "При подтверждении все параметры сортировки, фильтрации и отображения + макет, выбранный для этого представления, будут безвозвратно удалены без возможности восстановления."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Создайте рабочий элемент и назначьте исполнителя",
+        "description": "Рабочие элементы помогают организовать работу команды. Создавайте, назначайте и завершайте рабочие элементы для достижения целей проекта.",
+        "primary_button": {
+          "text": "Создать первый рабочий элемент",
+          "comic": {
+            "title": "Рабочие элементы - строительные блоки Plane",
+            "description": "Примеры рабочих элементов: редизайн интерфейса, ребрендинг компании или запуск новой системы."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Нет архивных рабочих элементов",
+        "description": "Архивируйте завершённые или отменённые рабочие элементы вручную или автоматически.",
+        "primary_button": {
+          "text": "Настроить автоматизацию"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Нет рабочих элементов подходящих фильтрам",
+        "secondary_button": {
+          "text": "Сбросить фильтры"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Добавить модуль",
+    "update_module": "Обновить модуль",
+    "create_module": "Создать модуль",
+    "archive_module": "Архивировать модуль",
+    "restore_module": "Восстановить модуль",
+    "delete_module": "Удалить модуль",
+    "empty_state": {
+      "general": {
+        "title": "Связывайте этапы проекта с модулями для удобного отслеживания рабочих элементов.",
+        "description": "Модуль объединяет рабочие элементы по логическому или иерархическому признаку. Используйте модули для контроля этапов проекта. Каждый модуль имеет собственные сроки выполнения и аналитику для отслеживания прогресса.",
+        "primary_button": {
+          "text": "Создать первый модуль",
+          "comic": {
+            "title": "Модули группируют рабочие элементы по иерархии",
+            "description": "Примеры группировки: модуль корзины, модуль шасси или модуль склада."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Нет рабочих элементов в модуле",
+        "description": "Создавайте или добавляйте рабочие элементы, которые хотите выполнить в рамках этого модуля",
+        "primary_button": {
+          "text": "Создать новые рабочие элементы"
+        },
+        "secondary_button": {
+          "text": "Добавить существующий рабочий элемент"
+        }
+      },
+      "archived": {
+        "title": "Нет архивных модулей",
+        "description": "Архивируйте завершённые или отменённые модули для упорядочивания проекта. Они появятся здесь после архивации."
+      },
+      "sidebar": {
+        "in_active": "Этот модуль ещё не активен.",
+        "invalid_date": "Некорректная дата. Укажите правильную дату."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Архивировать модуль",
+      "archive_module_description": "Только завершённые или отменённые\nмодули можно архивировать.",
+      "delete_module": "Удалить модуль"
+    },
+    "toast": {
+      "copy": {
+        "success": "Ссылка на модуль скопирована в буфер обмена"
+      },
+      "delete": {
+        "success": "Модуль успешно удалён",
+        "error": "Ошибка удаления модуля"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Создавайте заметки, документы или базу знаний. Используйте Galileo, ИИ-помощник Plane.",
+        "description": "Страницы - пространство для организации мыслей в Plane. Делайте заметки, форматируйте текст, встраивайте рабочие элементы, используйте компоненты. Для быстрого создания документов используйте Galileo через горячие клавиши или кнопку.",
+        "primary_button": {
+          "text": "Создать первую страницу"
+        }
+      },
+      "private": {
+        "title": "Нет приватных страниц",
+        "description": "Храните личные заметки здесь. Когда будете готовы поделиться, команда будет в одном клике.",
+        "primary_button": {
+          "text": "Создать первую страницу"
+        }
+      },
+      "public": {
+        "title": "Нет публичных страниц",
+        "description": "Здесь отображаются страницы, доступные всем участникам проекта.",
+        "primary_button": {
+          "text": "Создать первую страницу"
+        }
+      },
+      "archived": {
+        "title": "Нет архивных страниц",
+        "description": "Архивируйте неактуальные страницы. При необходимости вы найдете их здесь."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Функция 'Входящие' отключена для проекта",
+        "description": "Входящие помогают управлять запросами и добавлять их в рабочий процесс. Включите функцию в настройках проекта.",
+        "primary_button": {
+          "text": "Управление функциями"
+        }
+      },
+      "cycle": {
+        "title": "Циклы отключены для этого проекта",
+        "description": "Разбивайте работу на временные интервалы, устанавливайте сроки и отслеживайте прогресс команды. Включите функцию циклов в настройках проекта.",
+        "primary_button": {
+          "text": "Управление функциями"
+        }
+      },
+      "module": {
+        "title": "Модули отключены для проекта",
+        "description": "Модули - основные компоненты вашего проекта. Включите их в настройках проекта.",
+        "primary_button": {
+          "text": "Управление функциями"
+        }
+      },
+      "page": {
+        "title": "Страницы отключены для проекта",
+        "description": "Страницы - основные компоненты вашего проекта. Включите их в настройках проекта.",
+        "primary_button": {
+          "text": "Управление функциями"
+        }
+      },
+      "view": {
+        "title": "Представления отключены для проекта",
+        "description": "Представления - основные компоненты вашего проекта. Включите их в настройках проекта.",
+        "primary_button": {
+          "text": "Управление функциями"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Бэклог",
+      "planned": "Запланировано",
+      "in_progress": "В процессе",
+      "paused": "Приостановлено",
+      "completed": "Завершено",
+      "cancelled": "Отменено"
+    },
+    "layout": {
+      "list": "Список",
+      "board": "Галерея",
+      "timeline": "Хронология"
+    },
+    "order_by": {
+      "name": "Название",
+      "progress": "Прогресс",
+      "issues": "Количество рабочих элементов",
+      "due_date": "Срок выполнения",
+      "created_at": "Дата создания",
+      "manual": "Вручную"
+    }
+  },
+  "project_members": {
+    "full_name": "Полное имя",
+    "display_name": "Отображаемое имя",
+    "email": "Email",
+    "joining_date": "Дата присоединения",
+    "role": "Роль"
+  },
+  "project": {
+    "members_import": {
+      "title": "Импорт участников из CSV",
+      "description": "Загрузите CSV со столбцами: Email и Role (5=Гость, 15=Участник, 20=Администратор). Пользователи уже должны быть участниками рабочего пространства.",
+      "download_sample": "Скачать пример CSV",
+      "dropzone": {
+        "active": "Перетащите CSV файл сюда",
+        "inactive": "Перетащите или нажмите для загрузки",
+        "file_type": "Поддерживаются только файлы .csv"
+      },
+      "buttons": {
+        "cancel": "Отмена",
+        "import": "Импортировать",
+        "try_again": "Попробовать снова",
+        "close": "Закрыть",
+        "done": "Готово"
+      },
+      "progress": {
+        "uploading": "Загрузка...",
+        "importing": "Импорт..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Импорт завершен"
+        },
+        "message": {
+          "success": "Успешно импортировано {count} участник{plural} в проект.",
+          "no_imports": "Из CSV не было импортировано новых участников."
+        },
+        "stats": {
+          "added": "Добавлено",
+          "reactivated": "Повторно активированы",
+          "already_members": "Уже участники",
+          "skipped": "Пропущено"
+        },
+        "download_errors": "Скачать сведения о пропущенных"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Недопустимый файл",
+          "message": "Поддерживаются только CSV файлы."
+        },
+        "import_failed": {
+          "title": "Импорт не удался",
+          "message": "Что-то пошло не так."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/settings.json b/packages/i18n/src/locales/ru/settings.json
new file mode 100644
index 0000000..baa8ab0
--- /dev/null
+++ b/packages/i18n/src/locales/ru/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Изменить email",
+        "description": "Введите новый адрес электронной почты, чтобы получить ссылку для подтверждения.",
+        "toasts": {
+          "success_title": "Успех!",
+          "success_message": "Email успешно обновлён. Пожалуйста, войдите снова."
+        },
+        "form": {
+          "email": {
+            "label": "Новый email",
+            "placeholder": "Введите свой email",
+            "errors": {
+              "required": "Email обязателен",
+              "invalid": "Email недействителен",
+              "exists": "Email уже существует. Используйте другой.",
+              "validation_failed": "Не удалось подтвердить email. Попробуйте ещё раз."
+            }
+          },
+          "code": {
+            "label": "Уникальный код",
+            "placeholder": "123456",
+            "helper_text": "Код подтверждения отправлен на ваш новый email.",
+            "errors": {
+              "required": "Уникальный код обязателен",
+              "invalid": "Неверный код подтверждения. Попробуйте ещё раз."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Продолжить",
+          "confirm": "Подтвердить",
+          "cancel": "Отмена"
+        },
+        "states": {
+          "sending": "Отправка…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Настройки",
+      "description": "Настройте работу с приложением так, как вам удобно"
+    },
+    "notifications": {
+      "heading": "Email-уведомления",
+      "description": "Будьте в курсе рабочих элементов, на которые вы подписаны. Включите, чтобы получать уведомления.",
+      "select_default_view": "Выбрать вид по умолчанию",
+      "compact": "Компактный",
+      "full": "Полный экран"
+    },
+    "security": {
+      "heading": "Безопасность"
+    },
+    "api_tokens": {
+      "title": "Личные токены доступа",
+      "description": "Генерируйте безопасные API-токены для интеграции ваших данных с внешними системами и приложениями."
+    },
+    "activity": {
+      "heading": "Активность",
+      "description": "Отслеживайте ваши недавние действия и изменения во всех проектах и рабочих элементах."
+    },
+    "connections": {
+      "title": "Соединения",
+      "heading": "Соединения",
+      "description": "Управляйте настройками соединений вашего рабочего пространства."
+    }
+  },
+  "profile": {
+    "label": "Профиль",
+    "page_label": "Ваша работа",
+    "work": "Работа",
+    "details": {
+      "joined_on": "Присоединился",
+      "time_zone": "Часовой пояс"
+    },
+    "stats": {
+      "workload": "Нагрузка",
+      "overview": "Обзор",
+      "created": "Созданные рабочие элементы",
+      "assigned": "Назначенные рабочие элементы",
+      "subscribed": "Отслеживаемые рабочие элементы",
+      "state_distribution": {
+        "title": "Рабочие элементы по статусам",
+        "empty": "Создавайте рабочие элементы для анализа по статусам"
+      },
+      "priority_distribution": {
+        "title": "Рабочие элементы по приоритетам",
+        "empty": "Создавайте рабочие элементы для анализа по приоритетам"
+      },
+      "recent_activity": {
+        "title": "Недавняя активность",
+        "empty": "Данные не найдены",
+        "button": "Скачать активность",
+        "button_loading": "Скачивание"
+      }
+    },
+    "actions": {
+      "profile": "Профиль",
+      "security": "Безопасность",
+      "activity": "Активность",
+      "preferences": "Настройки",
+      "notifications": "Уведомления",
+      "api-tokens": "Личные токены доступа",
+      "connections": "Соединения"
+    },
+    "tabs": {
+      "summary": "Сводка",
+      "assigned": "Назначенные",
+      "created": "Созданные",
+      "subscribed": "Отслеживаемые",
+      "activity": "Активность"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Нет активности",
+        "description": "Создайте первый рабочий элемент для начала работы! Добавьте детали и свойства рабочего элемента. Исследуйте больше в Plane, чтобы увидеть вашу активность."
+      },
+      "assigned": {
+        "title": "Нет назначенных рабочих элементов",
+        "description": "Здесь отображаются рабочие элементы, назначенные вам."
+      },
+      "created": {
+        "title": "Нет созданных рабочих элементов",
+        "description": "Все созданные вами рабочие элементы отображаются здесь."
+      },
+      "subscribed": {
+        "title": "Нет отслеживаемых рабочих элементов",
+        "description": "Подпишитесь на интересующие рабочие элементы."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Системные настройки"
+      },
+      "light": {
+        "label": "Светлая"
+      },
+      "dark": {
+        "label": "Тёмная"
+      },
+      "light_contrast": {
+        "label": "Светлая высококонтрастностная"
+      },
+      "dark_contrast": {
+        "label": "Тёмная высокая контрастность"
+      },
+      "custom": {
+        "label": "Пользовательская тема"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/stickies.json b/packages/i18n/src/locales/ru/stickies.json
new file mode 100644
index 0000000..c907ee7
--- /dev/null
+++ b/packages/i18n/src/locales/ru/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Ваши стикеры",
+    "placeholder": "нажмите, чтобы написать",
+    "all": "Все стикеры",
+    "no-data": "Запишите идею, зафиксируйте озарение или сохраните мысль. Создайте стикер, чтобы начать.",
+    "add": "Добавить стикер",
+    "search_placeholder": "Поиск по названию",
+    "delete": "Удалить стикер",
+    "delete_confirmation": "Вы уверены, что хотите удалить этот стикер?",
+    "empty_state": {
+      "simple": "Запишите идею, зафиксируйте озарение или сохраните мысль. Создайте стикер, чтобы начать.",
+      "general": {
+        "title": "Стикеры - это быстрые заметки и рабочие элементы, которые вы создаёте на лету.",
+        "description": "Легко фиксируйте свои мысли и идеи с помощью стикеров, которые доступны в любое время и в любом месте.",
+        "primary_button": {
+          "text": "Добавить стикер"
+        }
+      },
+      "search": {
+        "title": "Ничего не найдено.",
+        "description": "Попробуйте другой запрос или сообщите нам,\nесли уверены в правильности поиска.",
+        "primary_button": {
+          "text": "Добавить стикер"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Название стикера не может быть длиннее 100 символов.",
+        "already_exists": "Стикер без описания уже существует"
+      },
+      "created": {
+        "title": "Стикер создан",
+        "message": "Стикер успешно создан"
+      },
+      "not_created": {
+        "title": "Ошибка создания стикера",
+        "message": "Не удалось создать стикер"
+      },
+      "updated": {
+        "title": "Стикер обновлён",
+        "message": "Стикер успешно обновлён"
+      },
+      "not_updated": {
+        "title": "Ошибка обновления",
+        "message": "Не удалось обновить стикер"
+      },
+      "removed": {
+        "title": "Стикер удалён",
+        "message": "Стикер успешно удалён"
+      },
+      "not_removed": {
+        "title": "Ошибка удаления",
+        "message": "Не удалось удалить стикер"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/template.json b/packages/i18n/src/locales/ru/template.json
new file mode 100644
index 0000000..3087fd7
--- /dev/null
+++ b/packages/i18n/src/locales/ru/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Шаблоны",
+      "description": "Сэкономьте 80% времени, затрачиваемого на создание проектов, рабочих элементов и страниц, используя шаблоны.",
+      "new_project_template": "Новый шаблон проекта",
+      "new_work_item_template": "Новый шаблон рабочего элемента",
+      "new_page_template": "Новый шаблон страницы",
+      "options": {
+        "project": {
+          "label": "Шаблоны проектов"
+        },
+        "work_item": {
+          "label": "Шаблоны рабочих элементов"
+        },
+        "page": {
+          "label": "Шаблоны страниц"
+        }
+      },
+      "create_template": {
+        "label": "Создать шаблон",
+        "no_permission": {
+          "project": "Обратитесь к администратору проекта для создания шаблонов",
+          "workspace": "Обратитесь к администратору рабочего пространства для создания шаблонов"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Использовать шаблон",
+          "loading": "Использование"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Из рабочего пространства"
+        },
+        "project": {
+          "info": "Из проекта"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Назовите ваш шаблон проекта.",
+              "validation": {
+                "required": "Название шаблона обязательно",
+                "maxLength": "Название шаблона должно быть менее 255 символов"
+              }
+            },
+            "description": {
+              "placeholder": "Опишите, когда и как использовать этот шаблон."
+            }
+          },
+          "name": {
+            "placeholder": "Назовите ваш проект.",
+            "validation": {
+              "required": "Название проекта обязательно",
+              "maxLength": "Название проекта должно быть менее 255 символов"
+            }
+          },
+          "description": {
+            "placeholder": "Опишите цель и задачи этого проекта."
+          },
+          "button": {
+            "create": "Создать шаблон проекта",
+            "update": "Обновить шаблон проекта"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Назовите ваш шаблон рабочего элемента.",
+              "validation": {
+                "required": "Название шаблона обязательно",
+                "maxLength": "Название шаблона должно быть менее 255 символов"
+              }
+            },
+            "description": {
+              "placeholder": "Опишите, когда и как использовать этот шаблон."
+            }
+          },
+          "name": {
+            "placeholder": "Дайте название этому рабочему элементу.",
+            "validation": {
+              "required": "Название рабочего элемента обязательно",
+              "maxLength": "Название рабочего элемента должно быть менее 255 символов"
+            }
+          },
+          "description": {
+            "placeholder": "Опишите этот рабочий элемент так, чтобы было понятно, чего вы достигнете, когда выполните его."
+          },
+          "button": {
+            "create": "Создать шаблон рабочего элемента",
+            "update": "Обновить шаблон рабочего элемента"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Назовите ваш шаблон страницы.",
+              "validation": {
+                "required": "Название шаблона обязательно",
+                "maxLength": "Название шаблона должно быть менее 255 символов"
+              }
+            },
+            "description": {
+              "placeholder": "Опишите, когда и как использовать этот шаблон."
+            }
+          },
+          "name": {
+            "placeholder": "Неизвестная страница",
+            "validation": {
+              "maxLength": "Название страницы должно быть менее 255 символов"
+            }
+          },
+          "button": {
+            "create": "Создать шаблон страницы",
+            "update": "Обновить шаблон страницы"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Настройки публикации} other {Опубликовать в Маркетплейсе}}",
+          "unpublish_action": "Удалить из Маркетплейса",
+          "title": "Сделайте ваш шаблон доступным и узнаваемым.",
+          "name": {
+            "label": "Название шаблона",
+            "placeholder": "Назовите ваш шаблон",
+            "validation": {
+              "required": "Название шаблона обязательно",
+              "maxLength": "Название шаблона должно быть менее 255 символов"
+            }
+          },
+          "short_description": {
+            "label": "Краткое описание",
+            "placeholder": "Этот шаблон идеален для менеджеров проектов, которые управляют несколькими проектами одновременно.",
+            "validation": {
+              "required": "Краткое описание обязательно"
+            }
+          },
+          "description": {
+            "label": "Описание",
+            "placeholder": "Повысьте продуктивность и оптимизируйте коммуникацию с помощью нашей интеграции Речь-в-Текст.\n• Транскрипция в реальном времени: мгновенно преобразуйте произнесенные слова в точный текст.\n• Создание задач и комментариев: добавляйте задачи, описания и комментарии с помощью голосовых команд.",
+            "validation": {
+              "required": "Описание обязательно"
+            }
+          },
+          "category": {
+            "label": "Категория",
+            "placeholder": "Выберите, где вы считаете, что это лучше всего подходит. Вы можете выбрать несколько.",
+            "validation": {
+              "required": "Хотя бы одна категория обязательна"
+            }
+          },
+          "keywords": {
+            "label": "Ключевые слова",
+            "placeholder": "Используйте термины, которые, по вашему мнению, будут использовать пользователи при поиске этого шаблона.",
+            "helperText": "Введите ключевые слова, разделенные запятыми, которые, по вашему мнению, помогут пользователям найти этот шаблон из поиска.",
+            "validation": {
+              "required": "Хотя бы одно ключевое слово обязательно"
+            }
+          },
+          "website": {
+            "label": "URL веб-сайта",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "Некорректный URL",
+              "maxLength": "URL должен быть менее 800 символов"
+            }
+          },
+          "company_name": {
+            "label": "Название компании",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Название компании обязательно",
+              "maxLength": "Название компании должно быть менее 255 символов"
+            }
+          },
+          "contact_email": {
+            "label": "Email поддержки",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Некорректный email адрес",
+              "maxLength": "Email поддержки должен быть менее 255 символов"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Ссылка на вашу политику конфиденциальности",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Некорректный URL",
+              "maxLength": "URL должен быть менее 800 символов"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Ссылка на ваши условия использования",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "Некорректный URL",
+              "maxLength": "URL должен быть менее 800 символов"
+            }
+          },
+          "cover_image": {
+            "label": "Добавьте обложку, которая будет отображаться в маркетплейсе",
+            "upload_title": "Загрузить обложку",
+            "upload_placeholder": "Нажмите для загрузки или перетащите файл для загрузки обложки",
+            "drop_here": "Перетащите сюда",
+            "click_to_upload": "Нажмите для загрузки",
+            "invalid_file_or_exceeds_size_limit": "Неверный файл или превышен лимит размера. Пожалуйста, попробуйте снова.",
+            "upload_and_save": "Загрузить и сохранить",
+            "uploading": "Загрузка",
+            "remove": "Удалить",
+            "removing": "Удаление",
+            "validation": {
+              "required": "Обложка обязательна"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Включите документы и изображения, которые, по вашему мнению, помогут зрителям этого шаблона.",
+            "validation": {
+              "required": "Хотя бы один скриншот обязателен"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Шаблоны",
+        "description": "С шаблонами проектов, рабочих элементов и страниц в Plane вам не нужно создавать проект с нуля или вручную устанавливать свойства рабочих элементов.",
+        "sub_description": "Верните 80% времени администрирования, используя Шаблоны."
+      },
+      "no_templates": {
+        "button": "Создайте ваш первый шаблон"
+      },
+      "no_labels": {
+        "description": "Еще нет меток. Создайте метки, чтобы помочь организовать и фильтровать элементы работы в вашем проекте."
+      },
+      "no_modules": {
+        "description": "Модулей пока нет. Организуйте работу в подпроекты с назначенными руководителями и исполнителями."
+      },
+      "no_work_items": {
+        "description": "Еще нет элементов работы. Добавьте один, чтобы лучше структурировать свою работу."
+      },
+      "no_sub_work_items": {
+        "description": "Еще нет под-элементов работы. Добавьте один, чтобы лучше структурировать свою работу."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Нет шаблонов, к которым у вас есть доступ.",
+          "description": "Пожалуйста, создайте шаблон"
+        },
+        "no_results": {
+          "title": "Это не соответствует шаблону.",
+          "description": "Попробуйте поиск по другим терминам."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Шаблон создан",
+          "message": "{templateName}, шаблон {templateType}, теперь доступен для вашего рабочего пространства."
+        },
+        "error": {
+          "title": "Мы не смогли создать этот шаблон в этот раз.",
+          "message": "Попробуйте сохранить ваши данные снова или скопируйте их в новый шаблон, предпочтительно в другой вкладке."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Шаблон изменен",
+          "message": "{templateName}, шаблон {templateType}, был изменен."
+        },
+        "error": {
+          "title": "Мы не смогли сохранить изменения в этом шаблоне.",
+          "message": "Попробуйте сохранить ваши данные снова или вернитесь к этому шаблону позже. Если проблема не исчезнет, свяжитесь с нами."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Шаблон удален",
+          "message": "{templateName}, шаблон {templateType}, был удален из вашего рабочего пространства."
+        },
+        "error": {
+          "title": "Мы не смогли удалить этот шаблон в этот раз.",
+          "message": "Попробуйте удалить его снова или вернитесь к нему позже. Если вы не сможете удалить его и тогда, свяжитесь с нами."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Шаблон снят с публикации",
+          "message": "{templateName}, шаблон {templateType}, был снят с публикации."
+        },
+        "error": {
+          "title": "Мы не смогли снять этот шаблон с публикации в этот раз.",
+          "message": "Попробуйте снять его с публикации снова или вернитесь к нему позже. Если вы не сможете снять его с публикации и тогда, свяжитесь с нами."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Удалить шаблон",
+      "description": {
+        "prefix": "Вы уверены, что хотите удалить шаблон-",
+        "suffix": "? Все данные, связанные с шаблоном, будут безвозвратно удалены. Это действие нельзя отменить."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Снять шаблон с публикации",
+      "description": {
+        "prefix": "Вы уверены, что хотите снять шаблон-",
+        "suffix": " с публикации? Этот шаблон больше не будет доступен пользователям в маркетплейсе."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Добавить новый шаблон",
+        "project": "Добавить новый шаблон"
+      },
+      "label": {
+        "project": "Выберите шаблон проекта",
+        "page": "Выбрать из шаблона"
+      },
+      "tooltip": {
+        "work_item": "Выбрать шаблон элемента работы"
+      },
+      "no_results": {
+        "work_item": "Шаблоны не найдены.",
+        "project": "Шаблоны не найдены."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/tour.json b/packages/i18n/src/locales/ru/tour.json
new file mode 100644
index 0000000..6a752da
--- /dev/null
+++ b/packages/i18n/src/locales/ru/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Добро пожаловать в ваше рабочее пространство",
+        "description": "Чтобы помочь вам начать, мы создали Демо-проект для вас. Давайте добавим вашу первую рабочую задачу."
+      },
+      "step_one": {
+        "title": "Нажмите \"+ Добавить рабочую задачу\"",
+        "description": "Начните с нажатия кнопки \"+ Новая рабочая задача\". Вы можете создавать задачи, ошибки или пользовательский тип, который соответствует вашим потребностям."
+      },
+      "step_two": {
+        "title": "Фильтруйте свои рабочие задачи",
+        "description": "Используйте фильтры, чтобы быстро сузить свой список. Вы можете фильтровать по статусу, приоритету или членам команды. "
+      },
+      "step_three": {
+        "title": "Просматривайте, группируйте и сортируйте рабочие задачи по мере необходимости.",
+        "description": "Просмотрите необходимые свойства и сгруппируйте или отсортируйте рабочие задачи в соответствии с вашими потребностями."
+      },
+      "step_four": {
+        "title": "Визуализируйте как хотите",
+        "description": "Выберите, какие свойства вы хотите видеть в списке. Вы также можете группировать и сортировать рабочие задачи по-своему."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Добивайтесь прогресса с Циклами",
+        "description": "Нажмите Q, чтобы создать Цикл. Назовите его и установите даты—только один цикл на проект."
+      },
+      "step_one": {
+        "title": "Создать новый цикл",
+        "description": "Нажмите Q, чтобы создать Цикл. Назовите его и установите даты—только один цикл на проект."
+      },
+      "step_two": {
+        "title": "Нажмите \"+\"",
+        "description": "Начните с нажатия кнопки \"+\". Добавьте новые или существующие рабочие задачи прямо со страницы Цикла."
+      },
+      "step_three": {
+        "title": "Сводка цикла",
+        "description": "Отслеживайте прогресс цикла, продуктивность команды и приоритеты—и расследуйте, если что-то отстает."
+      },
+      "step_four": {
+        "title": "Перенести рабочие задачи",
+        "description": "После срока цикл автоматически завершается. Переместите незавершенную работу в другой цикл."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Разделите свой проект на Модули",
+        "description": "Модули—это меньшие, сфокусированные проекты, которые помогают пользователям группировать и организовывать рабочие задачи в определенные временные рамки."
+      },
+      "step_one": {
+        "title": "Создать Модуль",
+        "description": "Модули—это меньшие, сфокусированные проекты, которые помогают пользователям группировать и организовывать рабочие задачи в определенные временные рамки."
+      },
+      "step_two": {
+        "title": "Нажмите \"+\"",
+        "description": "Начните с нажатия кнопки \"+\". Добавьте новые или существующие рабочие задачи прямо со страницы Модуля."
+      },
+      "step_three": {
+        "title": "Состояния модуля",
+        "description": "Модули используют эти статусы, чтобы помочь пользователям планировать и четко отслеживать прогресс и этап."
+      },
+      "step_four": {
+        "title": "Прогресс модуля",
+        "description": "Прогресс модуля отслеживается через завершенные элементы, с аналитикой для мониторинга производительности."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Документируйте с помощью Страниц на основе ИИ",
+        "description": "Страницы в Plane позволяют вам захватывать, организовывать и сотрудничать над информацией о проекте—без внешних инструментов."
+      },
+      "step_one": {
+        "title": "Сделать страницу Общедоступной или Приватной",
+        "description": "Страницы могут быть установлены как общедоступные, видимые для всех в вашем рабочем пространстве, или приватные, доступные только вам."
+      },
+      "step_two": {
+        "title": "Используйте команду /",
+        "description": "Используйте / на странице, чтобы добавить контент из 16 типов блоков, включая списки, изображения, таблицы и встраивания."
+      },
+      "step_three": {
+        "title": "Действия со страницей",
+        "description": "После создания страницы вы можете нажать на меню ••• в правом верхнем углу, чтобы выполнить следующие действия."
+      },
+      "step_four": {
+        "title": "Оглавление",
+        "description": "Получите общий вид вашей страницы, нажав на значок панели, чтобы увидеть все заголовки."
+      },
+      "step_five": {
+        "title": "История версий",
+        "description": "Страницы отслеживают все правки с историей версий, позволяя вам восстанавливать предыдущие версии при необходимости."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Оптимизируйте запросы с приемом",
+        "description": "Функция только для Plane, которая позволяет Гостям создавать рабочие задачи для ошибок, запросов или тикетов."
+      },
+      "step_one": {
+        "title": "Открытые/закрытые запросы на прием",
+        "description": "Ожидающие запросы остаются на вкладке Открытые, и после их рассмотрения администратором или участником они перемещаются в Закрытые."
+      },
+      "step_two": {
+        "title": "Принять/отклонить ожидающий запрос",
+        "description": "Примите, чтобы отредактировать и переместить рабочую задачу в ваш проект, или отклоните, чтобы пометить ее как Отмененную."
+      },
+      "step_three": {
+        "title": "Отложить на потом",
+        "description": "Рабочую задачу можно отложить, чтобы просмотреть ее позже. Она будет перемещена в конец вашего списка открытых запросов."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Хватит переключать вкладки. Подключите свой мир.",
+        "description": "Подключите GitHub, Slack для отслеживания PR и получения сводок чатов прямо в Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Навигация, переосмысленная",
+        "sub_title": "Ваше рабочее пространство теперь легче исследовать с более умной, упрощенной навигацией.",
+        "highlight_1": "Упрощенная структура левой панели для более быстрого обнаружения",
+        "highlight_2": "Улучшенный глобальный поиск для мгновенного перехода к чему угодно",
+        "highlight_3": "Более умная группировка категорий для ясности и фокуса",
+        "footer": "Хотите быстрое введение?"
+      },
+      "step_zero": {
+        "title": "Найдите что угодно мгновенно",
+        "description": "Используйте универсальный поиск, чтобы перейти к задачам, проектам, страницам и людям—не покидая своего потока."
+      },
+      "step_one": {
+        "title": "Сохраняйте контроль над обновлениями",
+        "description": "Ваш почтовый ящик хранит все упоминания, одобрения и активность в одном месте, чтобы вы никогда не пропустили важную работу."
+      },
+      "step_two": {
+        "title": "Персонализируйте свою Навигацию",
+        "description": "Настройте то, что вы видите и как вы перемещаетесь в Настройках."
+      }
+    },
+    "actions": {
+      "close": "Закрыть",
+      "next": "Далее",
+      "back": "Назад",
+      "done": "Готово",
+      "take_a_tour": "Совершить тур",
+      "get_started": "Начать",
+      "got_it": "Понятно"
+    },
+    "seed_data": {
+      "title": "Вот ваш демо-проект",
+      "description": "Проекты позволяют вам управлять вашими командами, задачами и всем, что вам нужно для выполнения работы в вашем рабочем пространстве."
+    }
+  },
+  "get_started": {
+    "title": "Привет {name}, добро пожаловать на борт!",
+    "description": "Вот все, что вам нужно, чтобы начать свое путешествие с Plane.",
+    "checklist_section": {
+      "title": "Начать",
+      "description": "Начните настройку и посмотрите, как ваши идеи воплощаются в жизнь быстрее.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Создать проект"
+        },
+        "item_2": {
+          "title": "Создать рабочую задачу"
+        },
+        "item_3": {
+          "title": "Пригласить участников команды"
+        },
+        "item_4": {
+          "title": "Создать страницу"
+        },
+        "item_5": {
+          "title": "Попробовать чат Plane AI"
+        },
+        "item_6": {
+          "title": "Связать интеграции"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Пригласите свою команду",
+      "description": "Пригласите товарищей по команде и начните строить вместе."
+    },
+    "integrations_section": {
+      "title": "Усильте свое рабочее пространство",
+      "more_integrations": "Просмотреть больше интеграций"
+    },
+    "switch_to_plane_section": {
+      "title": "Узнайте, почему команды переходят на Plane",
+      "description": "Сравните Plane с инструментами, которые вы используете сегодня, и увидьте разницу."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/update.json b/packages/i18n/src/locales/ru/update.json
new file mode 100644
index 0000000..50b4e2f
--- /dev/null
+++ b/packages/i18n/src/locales/ru/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Прогресс",
+      "since_last_update": "С последнего обновления",
+      "comments": "{count, plural, one{# Комментарий} few{# Комментария} many{# Комментариев} other{# Комментариев}}"
+    },
+    "add_update": "Добавить обновление",
+    "add_update_placeholder": "Введите ваше обновление здесь",
+    "empty": {
+      "title": "Еще нет обновлений",
+      "description": "Вы можете здесь просматривать обновления."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Реакция создана",
+          "message": "Реакция успешно создана."
+        },
+        "error": {
+          "title": "Не удалось создать реакцию",
+          "message": "Не удалось создать реакцию. Пожалуйста, попробуйте снова."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Реакция удалена",
+          "message": "Реакция успешно удалена"
+        },
+        "error": {
+          "title": "Реакция не удалена",
+          "message": "Не удалось удалить реакцию"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Обновление создано",
+        "message": "Обновление успешно создано."
+      },
+      "error": {
+        "title": "Не удалось создать обновление",
+        "message": "Не удалось создать обновление. Пожалуйста, попробуйте снова."
+      }
+    },
+    "delete": {
+      "title": "Удалить обновление",
+      "confirmation": "Вы уверены, что хотите удалить это обновление? Это действие нельзя отменить.",
+      "success": {
+        "title": "Обновление удалено",
+        "message": "Обновление успешно удалено."
+      },
+      "error": {
+        "title": "Не удалось удалить обновление",
+        "message": "Не удалось удалить обновление. Пожалуйста, попробуйте снова."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Обновление обновлено",
+        "message": "Обновление успешно обновлено."
+      },
+      "error": {
+        "title": "Не удалось обновить обновление",
+        "message": "Не удалось обновить обновление. Пожалуйста, попробуйте снова."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/wiki.json b/packages/i18n/src/locales/ru/wiki.json
new file mode 100644
index 0000000..3d97fdc
--- /dev/null
+++ b/packages/i18n/src/locales/ru/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Общее",
+      "private": "Приватные",
+      "shared": "Общие",
+      "archived": "Архив"
+    },
+    "fallback_name": "Коллекция",
+    "form": {
+      "name_required": "Название коллекции обязательно",
+      "name_max_length": "Название коллекции должно содержать менее 255 символов",
+      "name_placeholder_create": "Задайте название коллекции",
+      "name_placeholder_edit": "Название коллекции"
+    },
+    "create_modal": {
+      "title": "Создать коллекцию",
+      "submit": "Создать коллекцию"
+    },
+    "edit_modal": {
+      "title": "Редактировать коллекцию"
+    },
+    "delete_modal": {
+      "title": "Удалить коллекцию",
+      "page_count": "В этой коллекции {pageCount} страниц. Выберите, что с ними сделать.",
+      "transfer_title": "Переместить страницы и удалить коллекцию",
+      "transfer_description": "Перед удалением переместите все страницы в другую коллекцию. Страницы и их права доступа будут сохранены.",
+      "transfer_warning": "Перемещённые страницы унаследуют права доступа выбранной коллекции.",
+      "transfer_target_label": "Переместить страницы в",
+      "transfer_target_placeholder": "Выберите коллекцию",
+      "delete_with_pages_title": "Удалить коллекцию вместе со страницами",
+      "delete_with_pages_description": "Навсегда удаляет коллекцию и все её страницы. Это действие нельзя отменить.",
+      "submit": "Удалить коллекцию"
+    },
+    "header": {
+      "add_page": "Добавить страницу"
+    },
+    "menu": {
+      "create_new_page": "Создать новую страницу",
+      "add_existing_page": "Добавить существующую страницу",
+      "edit_collection": "Редактировать коллекцию",
+      "collection_options": "Параметры коллекции"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Поиск страниц",
+      "success_message": "В коллекцию добавлено страниц: {count}.",
+      "error_message": "Не удалось переместить страницы. Повторите попытку.",
+      "no_pages_found": "Не найдено страниц, соответствующих вашему запросу",
+      "no_pages_available": "Нет доступных страниц для перемещения",
+      "submit": "Переместить"
+    },
+    "list": {
+      "invite_only": "Только по приглашению",
+      "remove_error": "Не удалось удалить страницу из коллекции.",
+      "no_matching_pages": "Нет подходящих страниц",
+      "remove_search_criteria": "Уберите условия поиска, чтобы увидеть все страницы",
+      "remove_filters": "Уберите фильтры, чтобы увидеть все страницы",
+      "no_pages_title": "Пока нет страниц",
+      "no_pages_description": "В этой коллекции пока нет страниц.",
+      "untitled": "Без названия",
+      "restricted_access": "Ограниченный доступ",
+      "collapse_page": "Свернуть страницу",
+      "expand_page": "Развернуть страницу",
+      "page_actions": "Действия со страницей",
+      "page_link_copied": "Ссылка на страницу скопирована в буфер обмена.",
+      "columns": {
+        "page_name": "Название страницы",
+        "owner": "Владелец",
+        "nested_pages": "Вложенные страницы",
+        "last_activity": "Последняя активность",
+        "actions": "Действия"
+      }
+    },
+    "toasts": {
+      "created": "Коллекция успешно создана.",
+      "create_error": "Не удалось создать коллекцию. Повторите попытку.",
+      "renamed": "Коллекция успешно переименована.",
+      "rename_error": "Не удалось обновить коллекцию. Повторите попытку.",
+      "transferred_deleted": "Страницы перенесены, коллекция удалена.",
+      "deleted_with_pages": "Коллекция и её страницы удалены.",
+      "delete_error": "Не удалось удалить коллекцию. Повторите попытку.",
+      "target_required": "Выберите коллекцию, в которую нужно перенести страницы.",
+      "create_page_error": "Не удалось создать страницу. Повторите попытку.",
+      "create_page_in_collection_error": "Не удалось создать страницу или добавить её в коллекцию. Повторите попытку.",
+      "collection_link_copied": "Ссылка на коллекцию скопирована в буфер обмена."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Обновите план, чтобы разблокировать Wiki",
+      "description": "Разблокируйте публичные страницы, историю версий, общие страницы, совместную работу в реальном времени и страницы рабочего пространства для wiki, корпоративной документации и баз знаний с Plane Pro.",
+      "upgrade_button": {
+        "text": "Обновить"
+      },
+      "learn_more_button": {
+        "text": "Узнать больше"
+      },
+      "download_button": {
+        "text": "Скачать данные",
+        "loading": "Скачивание"
+      },
+      "tabs": {
+        "nested_pages": "Вложенные страницы",
+        "add_embeds": "Добавление встраиваемого контента",
+        "publish_pages": "Публикация страниц",
+        "comments": "Комментарии"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Вложенные страницы требуют платного плана. Обновите, чтобы разблокировать."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/work-item-type.json b/packages/i18n/src/locales/ru/work-item-type.json
new file mode 100644
index 0000000..bda68e7
--- /dev/null
+++ b/packages/i18n/src/locales/ru/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Типы рабочих элементов",
+    "label_lowercase": "типы рабочих элементов",
+    "settings": {
+      "description": "Настраивайте и добавляйте свои собственные свойства, чтобы адаптировать их к потребностям вашей команды.",
+      "cant_delete_default_message": "Невозможно удалить этот тип рабочего элемента, так как он установлен как тип по умолчанию для этого проекта.",
+      "set_as_default": "Установить по умолчанию",
+      "cant_set_default_inactive_message": "Активируйте этот тип перед установкой по умолчанию",
+      "set_default_confirmation": {
+        "title": "Установить как тип рабочего элемента по умолчанию",
+        "description": "Установка {name} по умолчанию импортирует его во все проекты этого рабочего пространства. Все новые рабочие элементы будут использовать этот тип по умолчанию.",
+        "confirm_button": "Установить по умолчанию"
+      },
+      "properties": {
+        "title": "Пользовательские свойства",
+        "description": "Создавайте и настраивайте свойства.",
+        "tooltip": "Каждый тип рабочего элемента имеет набор свойств по умолчанию, таких как Заголовок, Описание, Ответственный, Состояние, Приоритет, Дата начала, Дата окончания, Модуль, Цикл и т.д. Вы также можете настроить и добавить свои собственные свойства, чтобы адаптировать их к потребностям вашей команды.",
+        "add_button": "Добавить новое свойство",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Импортировать из рабочего пространства"
+          }
+        },
+        "dropdown": {
+          "label": "Тип свойства",
+          "placeholder": "Выберите тип"
+        },
+        "property_type": {
+          "text": {
+            "label": "Текст"
+          },
+          "number": {
+            "label": "Число"
+          },
+          "dropdown": {
+            "label": "Выпадающий список"
+          },
+          "boolean": {
+            "label": "Логический"
+          },
+          "date": {
+            "label": "Дата"
+          },
+          "member_picker": {
+            "label": "Выбор участника"
+          },
+          "formula": {
+            "label": "Формула"
+          }
+        },
+        "attributes": {
+          "label": "Атрибуты",
+          "text": {
+            "single_line": {
+              "label": "Одна строка"
+            },
+            "multi_line": {
+              "label": "Параграф"
+            },
+            "readonly": {
+              "label": "Только для чтения",
+              "header": "Данные только для чтения"
+            },
+            "invalid_text_format": {
+              "label": "Неверный текстовый формат"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Добавить число"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Один выбор"
+            },
+            "multi_select": {
+              "label": "Множественный выбор"
+            },
+            "no_default_value": {
+              "label": "Нет значения по умолчанию"
+            }
+          },
+          "boolean": {
+            "label": "Истина | Ложь",
+            "no_default": "Нет значения по умолчанию"
+          },
+          "option": {
+            "create_update": {
+              "label": "Опции",
+              "form": {
+                "placeholder": "Добавить опцию",
+                "errors": {
+                  "name": {
+                    "required": "Имя опции обязательно.",
+                    "integrity": "Опция с таким именем уже существует."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Выберите опцию",
+                "multi": {
+                  "default": "Выберите опции",
+                  "variable": "{count} опций выбрано"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Успех!",
+              "message": "Свойство {name} успешно создано."
+            },
+            "error": {
+              "title": "Ошибка!",
+              "message": "Не удалось создать свойство. Пожалуйста, попробуйте снова!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Успех!",
+              "message": "Свойство {name} успешно обновлено."
+            },
+            "error": {
+              "title": "Ошибка!",
+              "message": "Не удалось обновить свойство. Пожалуйста, попробуйте снова!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Успех!",
+              "message": "Свойство {name} успешно удалено."
+            },
+            "error": {
+              "title": "Ошибка!",
+              "message": "Не удалось удалить свойство. Пожалуйста, попробуйте снова!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} {name} свойство",
+            "success": {
+              "title": "Успех!",
+              "message": "Свойство {name} {action} успешно."
+            },
+            "error": {
+              "title": "Ошибка!",
+              "message": "Не удалось {action} свойство. Пожалуйста, попробуйте снова!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Создать новое пользовательское свойство",
+            "update": "Обновить пользовательское свойство"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Заголовок"
+            },
+            "description": {
+              "placeholder": "Описание"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Вы должны назвать ваше свойство.",
+              "max_length": "Имя свойства не должно превышать 255 символов."
+            },
+            "property_type": {
+              "required": "Вы должны выбрать тип свойства."
+            },
+            "options": {
+              "required": "Вы должны добавить хотя бы одну опцию."
+            },
+            "formula": {
+              "required": "Выражение формулы обязательно.",
+              "invalid": "Недопустимая формула: {error}",
+              "circular_reference": "Обнаружена циклическая ссылка. Формула не может ссылаться на саму себя прямо или косвенно.",
+              "invalid_reference": "Формула ссылается на несуществующее свойство."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Поле формулы",
+          "tooltip": "Введите формулу, используя синтаксис '{'Имя поля'}'. Поддерживает операторы +, -, *, / и &.",
+          "placeholder": "Напишите формулу",
+          "test_button": "Тест",
+          "validating": "Проверка",
+          "validation_success": "Формула действительна! Возвращает {resultType}",
+          "validation_success_with_refs": "Формула действительна! Возвращает {resultType} ({count} полей указано)",
+          "error": {
+            "empty": "Пожалуйста, введите формулу",
+            "missing_context": "Отсутствует контекст рабочего пространства, проекта или типа рабочего элемента",
+            "validation_failed": "Проверка не удалась"
+          },
+          "picker": {
+            "no_match": "Нет совпадающих свойств",
+            "no_available": "Нет доступных свойств"
+          }
+        },
+        "enable_disable": {
+          "label": "Активно",
+          "tooltip": {
+            "disabled": "Нажмите, чтобы отключить",
+            "enabled": "Нажмите, чтобы включить"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Удалить это свойство",
+          "description": "Удаление свойств может привести к потере существующих данных.",
+          "secondary_description": "Хотите отключить свойство вместо этого?",
+          "primary_button": "{action}, удалить его",
+          "secondary_button": "Да, отключить его"
+        },
+        "mandate_confirmation": {
+          "label": "Обязательное свойство",
+          "content": "Похоже, что для этого свойства есть значение по умолчанию. Сделав свойство обязательным, вы удалите значение по умолчанию, и пользователи должны будут добавить значение по своему выбору.",
+          "tooltip": {
+            "disabled": "Этот тип свойства не может быть сделан обязательным",
+            "enabled": "Снимите отметку, чтобы отметить поле как необязательное",
+            "checked": "Установите отметку, чтобы отметить поле как обязательное"
+          }
+        },
+        "empty_state": {
+          "title": "Добавьте пользовательские свойства",
+          "description": "Новые свойства, которые вы добавите для этого типа рабочего элемента, будут отображаться здесь."
+        }
+      },
+      "types": {
+        "title": "Типы",
+        "description": "Создавайте и настраивайте типы рабочих элементов со свойствами.",
+        "sort_options": {
+          "project_count": "Количество проектов, в которых используется"
+        },
+        "filter_options": {
+          "show_active": "Показать активные",
+          "show_inactive": "Показать неактивные"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Создать новый",
+            "import_from_workspace": "Импортировать из рабочего пространства"
+          },
+          "banner": {
+            "with_access": "Включите типы рабочих элементов, чтобы импортировать типы с уровня рабочего пространства",
+            "without_access": "Типы рабочих элементов отключены. Обратитесь к администратору рабочего пространства, чтобы включить их в настройках рабочего пространства."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Пользовательские свойства",
+        "add_button": "Добавить свойства",
+        "modal": {
+          "title": "Добавить свойства",
+          "empty": {
+            "title": "Нет доступных свойств",
+            "description": "Все свойства уже связаны с этим типом."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Отвязать свойство",
+          "description": "Отвязывание этого свойства приведёт к безвозвратному удалению всех его значений у всех рабочих элементов, использующих этот тип. Это действие нельзя отменить.",
+          "input_label": "Введите",
+          "input_label_suffix": "для продолжения:",
+          "confirm": "Отвязать свойство",
+          "loading": "Отвязывание"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Удалить этот тип",
+        "description": "Удаление типов может привести к потере существующих данных.",
+        "can_disable_warning": "Хотите отключить этот тип вместо этого?",
+        "primary_button": "Да, удалить",
+        "toast": {
+          "success": {
+            "title": "Успешно!",
+            "message": "Тип рабочего элемента успешно удалён."
+          },
+          "error": {
+            "title": "Ошибка!",
+            "message": "Не удалось удалить тип рабочего элемента. Пожалуйста, попробуйте снова!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Невозможно удалить тип рабочего элемента по умолчанию",
+          "cannot_delete_work_item_type_with_associated_work_items": "Невозможно удалить тип рабочего элемента со связанными рабочими элементами"
+        }
+      }
+    },
+    "create": {
+      "title": "Создать тип рабочего элемента",
+      "button": "Добавить тип рабочего элемента",
+      "toast": {
+        "success": {
+          "title": "Успех!",
+          "message": "Тип рабочего элемента успешно создан."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": {
+            "default": "Не удалось создать тип рабочего элемента. Пожалуйста, попробуйте снова!",
+            "conflict": "Тип {name} уже существует. Выберите другое имя."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Обновить тип рабочего элемента",
+      "button": "Обновить тип рабочего элемента",
+      "toast": {
+        "success": {
+          "title": "Успех!",
+          "message": "Тип рабочего элемента {name} успешно обновлен."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": {
+            "default": "Не удалось обновить тип рабочего элемента. Пожалуйста, попробуйте снова!",
+            "conflict": "Тип {name} уже существует. Выберите другое имя."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Дайте этому типу рабочего элемента уникальное имя"
+        },
+        "description": {
+          "placeholder": "Опишите, для чего предназначен этот тип рабочего элемента и когда его следует использовать."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} {name} тип рабочего элемента",
+        "success": {
+          "title": "Успех!",
+          "message": "Тип рабочего элемента {name} {action} успешно."
+        },
+        "error": {
+          "title": "Ошибка!",
+          "message": "Не удалось {action} тип рабочего элемента. Пожалуйста, попробуйте снова!"
+        }
+      },
+      "tooltip": "Нажмите, чтобы {action}"
+    },
+    "change_confirmation": {
+      "title": "Изменить тип рабочего элемента?",
+      "description": "Изменение типа рабочего элемента может привести к потере значений пользовательских свойств, специфичных для текущего типа. Это действие нельзя отменить.",
+      "button": {
+        "loading": "Изменение",
+        "default": "Изменить тип"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Включить типы рабочих элементов",
+        "description": "Настройте рабочие элементы под свои нужды с помощью типов рабочих элементов. Настройте с помощью значков, фонов и свойств и настройте их для этого проекта.",
+        "primary_button": {
+          "text": "Включить"
+        },
+        "confirmation": {
+          "title": "После включения типы рабочих элементов не могут быть отключены.",
+          "description": "Тип рабочего элемента Plane станет типом рабочего элемента по умолчанию для этого проекта и будет отображаться с его значком и фоном в этом проекте.",
+          "button": {
+            "default": "Включить",
+            "loading": "Настройка"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Получите Pro, чтобы включить типы рабочих элементов.",
+        "description": "Настройте рабочие элементы под свои нужды с помощью типов рабочих элементов. Настройте с помощью значков, фонов и свойств и настройте их для этого проекта.",
+        "primary_button": {
+          "text": "Получить Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Обновите, чтобы включить типы рабочих элементов.",
+        "description": "Настройте рабочие элементы под свои нужды с помощью типов рабочих элементов. Настройте с помощью значков, фонов и свойств и настройте их для этого проекта.",
+        "primary_button": {
+          "text": "Обновить"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Иерархия",
+      "tab_label": "Иерархия",
+      "description": "Настройте уровни иерархии для организации работы. Каждый уровень определяет родительскую связь с элементом непосредственно выше и дочернюю связь с элементом непосредственно ниже. ",
+      "sidebar_label": "Иерархия",
+      "enable_control": {
+        "title": "Включить иерархию",
+        "description": "Создавайте отношения родитель-потомок между различными типами рабочих элементов.",
+        "tooltip": "Вы не сможете отключить иерархию после её включения."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Сначала определите типы рабочих элементов для создания новой иерархии.",
+        "cta": "Настройки типов рабочих элементов"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Перетащите тип, чтобы добавить новый уровень иерархии",
+      "empty_level_placeholder": "Перетащите тип рабочего элемента на уровень {level}",
+      "drag_tooltip": "Перетащите для изменения уровня",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Установить по умолчанию",
+          "toast": {
+            "loading": "Установка по умолчанию...",
+            "success": {
+              "title": "Успех!",
+              "message": "Уровень иерархии {level} успешно установлен по умолчанию."
+            },
+            "error": {
+              "title": "Ошибка!",
+              "message": "Не удалось установить уровень иерархии {level} по умолчанию. Пожалуйста, попробуйте ещё раз."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Перемещение {workItemTypeName} на уровень {level}...",
+        "success": {
+          "title": "Успешно!",
+          "message": "{workItemTypeName} успешно перемещён на уровень {level}."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Сохранение разорвёт существующие связи",
+      "content": {
+        "intro": "У типа рабочего элемента {workItemTypeName} есть:",
+        "parent_items": "{count, plural, one {Будет удалена # родительская связь} few {Будут удалены # родительские связи} many {Будет удалено # родительских связей} other {Будет удалено # родительских связей}}.",
+        "child_items": "{count, plural, one {дочерний рабочий элемент} few {дочерних рабочих элемента} other {дочерних рабочих элементов}}",
+        "parent_line_suffix_when_also_children": ", а также ",
+        "footer": "Это изменение удалит родительские и дочерние связи у существующих рабочих элементов типа {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Введите «подтвердить», чтобы продолжить.",
+        "placeholder": "подтвердить"
+      },
+      "error_toast": {
+        "title": "Ошибка!",
+        "message": "Не удалось отвязать связи и сохранить. Пожалуйста, попробуйте ещё раз."
+      },
+      "confirm_button": {
+        "loading": "Сохранение",
+        "default": "Всё равно сохранить"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Ошибка!",
+        "message": "Выбранный тип рабочего элемента не может использоваться для создания нового рабочего элемента, так как это нарушает правила иерархии."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Ошибка!",
+        "message": "Тип рабочего элемента не может быть обновлён, так как это нарушает правила иерархии."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Уровень иерархии",
+      "invalid_level_toast": {
+        "title": "Ошибка!",
+        "message": "Тип рабочего элемента не может быть обновлён, так как это нарушает правила иерархии."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/work-item.json b/packages/i18n/src/locales/ru/work-item.json
new file mode 100644
index 0000000..014478f
--- /dev/null
+++ b/packages/i18n/src/locales/ru/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Рабочий элемент} other {Рабочие элементы}}",
+    "all": "Все рабочие элементы",
+    "edit": "Редактировать рабочий элемент",
+    "title": {
+      "label": "Название рабочего элемента",
+      "required": "Название рабочего элемента обязательно."
+    },
+    "add": {
+      "press_enter": "Нажмите 'Enter' чтобы добавить ещё рабочий элемент",
+      "label": "Добавить рабочий элемент",
+      "cycle": {
+        "failed": "Не удалось добавить рабочий элемент в цикл. Попробуйте снова.",
+        "success": "{count, plural, one {Рабочий элемент} other {Рабочие элементы}} успешно {count, plural, one {добавлен} other {добавлены}} в цикл.",
+        "loading": "Добавление {count, plural, one {рабочего элемента} other {рабочих элементов}} в цикл"
+      },
+      "assignee": "Добавить ответственных",
+      "start_date": "Добавить дату начала",
+      "due_date": "Добавить срок выполнения",
+      "parent": "Добавить родительский рабочий элемент",
+      "sub_issue": "Добавить подэлемент",
+      "dependency": "Добавить зависимость",
+      "relation": "Добавить связь",
+      "link": "Добавить ссылку",
+      "existing": "Добавить существующий рабочий элемент"
+    },
+    "remove": {
+      "label": "Удалить рабочий элемент",
+      "cycle": {
+        "loading": "Удаление рабочего элемента из цикла",
+        "success": "Рабочий элемент успешно удален из цикла",
+        "failed": "Не удалось удалить рабочий элемент из цикла. Попробуйте снова."
+      },
+      "module": {
+        "loading": "Удаление рабочего элемента из модуля",
+        "success": "Рабочий элемент успешно удален из модуля.",
+        "failed": "Не удалось удалить рабочий элемент из модуля. Попробуйте снова."
+      },
+      "parent": {
+        "label": "Удалить родительский рабочий элемент"
+      }
+    },
+    "new": "Новый рабочий элемент",
+    "adding": "Добавление рабочего элемента",
+    "create": {
+      "success": "Рабочий элемент успешно создан"
+    },
+    "priority": {
+      "urgent": "Срочный",
+      "high": "Высокий",
+      "medium": "Средний",
+      "low": "Низкий"
+    },
+    "display": {
+      "properties": {
+        "label": "Отображаемые свойства",
+        "id": "ID",
+        "issue_type": "Тип рабочего элемента",
+        "sub_issue_count": "Количество подэлементов",
+        "attachment_count": "Количество вложений",
+        "created_on": "Дата создания",
+        "sub_issue": "Подэлемент",
+        "work_item_count": "Количество рабочих элементов"
+      },
+      "extra": {
+        "show_sub_issues": "Показывать подэлементы",
+        "show_empty_groups": "Показывать пустые группы"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Сортировка по",
+      "list": "Список",
+      "kanban": "Доска",
+      "calendar": "Календарь",
+      "spreadsheet": "Таблица",
+      "gantt": "График",
+      "title": {
+        "list": "Список",
+        "kanban": "Доска",
+        "calendar": "Календарь",
+        "spreadsheet": "Таблица",
+        "gantt": "График"
+      }
+    },
+    "states": {
+      "active": "Активно",
+      "backlog": "Бэклог"
+    },
+    "comments": {
+      "placeholder": "Добавить комментарий",
+      "switch": {
+        "private": "Изменить на приватный комментарий",
+        "public": "Изменить на публичный комментарий"
+      },
+      "create": {
+        "success": "Комментарий успешно добавлен",
+        "error": "Ошибка создания комментария. Попробуйте позже."
+      },
+      "update": {
+        "success": "Комментарий успешно обновлён",
+        "error": "Ошибка обновления комментария. Попробуйте позже."
+      },
+      "remove": {
+        "success": "Комментарий успешно удалён",
+        "error": "Ошибка удаления комментария. Попробуйте позже."
+      },
+      "upload": {
+        "error": "Ошибка загрузки файла. Попробуйте позже."
+      },
+      "copy_link": {
+        "success": "Ссылка на комментарий скопирована в буфер обмена",
+        "error": "Ошибка при копировании ссылки на комментарий. Попробуйте позже."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Добавить ответ",
+          "placeholder": "Добавить ответ"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Не удалось получить ответы"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Ответ успешно создан"
+            },
+            "error": {
+              "message": "Не удалось создать ответ"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Ответ успешно обновлён"
+            },
+            "error": {
+              "message": "Не удалось обновить ответ"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Ответ успешно удалён"
+            },
+            "error": {
+              "message": "Не удалось удалить ответ"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Рабочий элемент не существует",
+        "description": "Данный рабочий элемент был удален, архивирован или не существует.",
+        "primary_button": {
+          "text": "Посмотреть другие рабочие элементы"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Связанные рабочие элементы"
+    },
+    "archive": {
+      "description": "Только завершённые или отменённые\nрабочие элементы можно архивировать",
+      "label": "Архивировать рабочий элемент",
+      "confirm_message": "Вы уверены что хотите архивировать рабочий элемент? Архивы можно восстановить позже.",
+      "success": {
+        "label": "Архивация успешна",
+        "message": "Архивы доступны в разделе архивов проекта"
+      },
+      "failed": {
+        "message": "Ошибка архивации рабочего элемента. Попробуйте позже."
+      },
+      "banner_message": "Этот рабочий элемент архивирован. Перейдите в раздел «Архивы», чтобы восстановить его.",
+      "go_to_archives": "Перейти в архивы"
+    },
+    "restore": {
+      "success": {
+        "title": "Восстановление успешно",
+        "message": "Рабочий элемент доступен в разделе рабочих элементов проекта"
+      },
+      "failed": {
+        "message": "Ошибка восстановления рабочего элемента. Попробуйте позже."
+      }
+    },
+    "relation": {
+      "relates_to": "Связан с",
+      "duplicate": "Дубликат",
+      "blocked_by": "Блокируется",
+      "blocking": "Блокирует",
+      "start_before": "Начинается до",
+      "start_after": "Начинается после",
+      "finish_before": "Заканчивается до",
+      "finish_after": "Заканчивается после",
+      "implements": "Реализует",
+      "implemented_by": "Реализовано"
+    },
+    "copy_link": "Копировать ссылку на рабочий элемент",
+    "delete": {
+      "label": "Удалить рабочий элемент",
+      "error": "Ошибка удаления рабочего элемента"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Подписка на рабочий элемент оформлена",
+        "unsubscribed": "Подписка на рабочий элемент отменена"
+      }
+    },
+    "select": {
+      "error": "Выберите хотя бы один рабочий элемент",
+      "empty": "Рабочие элементы не выбраны",
+      "add_selected": "Добавить выбранные рабочие элементы",
+      "select_all": "Выбрать все",
+      "deselect_all": "Снять выделение со всех"
+    },
+    "open_in_full_screen": "Открыть рабочий элемент в полном экране",
+    "duplicate": {
+      "modal": {
+        "title": "Создать копию в другой проект",
+        "description1": "Это создаст копию рабочего элемента.",
+        "description2": "При дублировании все данные свойств будут удалены.",
+        "placeholder": "Выберите проект"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Рабочий элемент успешно дублирован"
+        },
+        "error": {
+          "message": "Не удалось дублировать рабочий элемент"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Связать страницы",
+      "show_wiki_pages": "Показать страницы Wiki",
+      "link_pages_to": "Связать страницы с",
+      "linked_pages": "Связанные страницы",
+      "no_description": "Это пустая страница. Почему бы вам не написать что-нибудь внутри и не увидеть, как это отобразится здесь, как этот плейсхолдер",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Страницы обновлены",
+            "message": "Страницы успешно обновлены"
+          },
+          "error": {
+            "title": "Ошибка обновления страниц",
+            "message": "Ошибка обновления страниц"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Страница удалена",
+            "message": "Страница успешно удалена"
+          },
+          "error": {
+            "title": "Ошибка удаления страницы",
+            "message": "Ошибка удаления страницы"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Нажмите, чтобы проголосовать за",
+      "click_to_downvote": "Нажмите, чтобы проголосовать против",
+      "click_to_view_upvotes": "Нажмите, чтобы посмотреть голоса за",
+      "click_to_view_downvotes": "Нажмите, чтобы посмотреть голоса против"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Подэлемент успешно обновлен",
+      "error": "Ошибка обновления подэлемента"
+    },
+    "remove": {
+      "success": "Подэлемент успешно удален",
+      "error": "Ошибка удаления подэлемента"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "У вас нет подэлементов, которые соответствуют примененным фильтрам.",
+        "description": "Чтобы увидеть все подэлементы, очистите все примененные фильтры.",
+        "action": "Очистить фильтры"
+      },
+      "list_filters": {
+        "title": "У вас нет рабочих элементов, которые соответствуют примененным фильтрам.",
+        "description": "Чтобы увидеть все рабочие элементы, очистите все примененные фильтры.",
+        "action": "Очистить фильтры"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Не найдено подходящих рабочих элементов"
+      },
+      "no_issues": {
+        "title": "Рабочие элементы не найдены"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Комментариев пока нет",
+        "description": "Используйте комментарии для обсуждения и отслеживания задач"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Не удалось архивировать рабочие элементы",
+        "message": "Только рабочие элементы, принадлежащие завершенным или отмененным группам состояния, могут быть архивированы."
+      },
+      "invalid_issue_start_date": {
+        "title": "Не удалось обновить рабочие элементы",
+        "message": "Выбранная дата начала превышает дату окончания для некоторых рабочих элементов. Убедитесь, что дата начала раньше даты окончания."
+      },
+      "invalid_issue_target_date": {
+        "title": "Не удалось обновить рабочие элементы",
+        "message": "Выбранная дата окончания предшествует дате начала для некоторых рабочих элементов. Убедитесь, что дата окончания позже даты начала."
+      },
+      "invalid_state_transition": {
+        "title": "Не удалось обновить рабочие элементы",
+        "message": "Изменение состояния не разрешено для некоторых рабочих элементов. Убедитесь, что изменение состояния разрешено."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Изменяйте статус, приоритет и другие параметры сразу для нескольких рабочих элементов. В среднем экономьте три минуты на операцию.",
+      "cta": "Обновить до One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Повторяющиеся рабочие элементы",
+      "description": "Настройте повторяющиеся рабочие элементы один раз, и мы позаботимся о повторениях. Вы увидите все здесь, когда придет время.",
+      "new_recurring_work_item": "Новый повторяющийся рабочий элемент",
+      "update_recurring_work_item": "Обновить повторяющийся рабочий элемент",
+      "form": {
+        "interval": {
+          "title": "Расписание",
+          "start_date": {
+            "validation": {
+              "required": "Требуется дата начала"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Требуется тип интервала"
+            }
+          }
+        },
+        "button": {
+          "create": "Создать повторяющийся рабочий элемент",
+          "update": "Обновить повторяющийся рабочий элемент"
+        }
+      },
+      "create_button": {
+        "label": "Создать повторяющийся рабочий элемент",
+        "no_permission": "Обратитесь к администратору проекта для создания повторяющихся рабочих элементов"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Ваша работа на автопилоте",
+        "description": "Настройте один раз. Мы вернем это, когда придет время. Обновите до Business, чтобы сделать повторяющуюся работу легкой."
+      },
+      "no_templates": {
+        "button": "Создайте свой первый повторяющийся рабочий элемент"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Повторяющийся рабочий элемент создан",
+          "message": "{name}, повторяющийся рабочий элемент, теперь доступен в вашем рабочем пространстве."
+        },
+        "error": {
+          "title": "Не удалось создать повторяющийся рабочий элемент.",
+          "message": "Попробуйте сохранить данные еще раз или скопируйте их в новый повторяющийся рабочий элемент, желательно в другой вкладке."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Повторяющийся рабочий элемент изменен",
+          "message": "{name}, повторяющийся рабочий элемент, был изменен."
+        },
+        "error": {
+          "title": "Не удалось сохранить изменения в этом повторяющемся рабочем элементе.",
+          "message": "Попробуйте сохранить данные еще раз или вернитесь к этому повторяющемуся рабочему элементу позже. Если проблема сохраняется, свяжитесь с нами."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Повторяющийся рабочий элемент удалён",
+          "message": "{name}, повторяющийся рабочий элемент, был удалён из вашего рабочего пространства."
+        },
+        "error": {
+          "title": "Не удалось удалить повторяющийся рабочий элемент.",
+          "message": "Попробуйте удалить его снова или вернитесь позже. Если не удаётся удалить, свяжитесь с нами."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Удалить повторяющийся рабочий элемент",
+      "description": {
+        "prefix": "Вы уверены, что хотите удалить повторяющийся рабочий элемент-",
+        "suffix": "? Все данные, связанные с этим повторяющимся рабочим элементом, будут безвозвратно удалены. Это действие нельзя отменить."
+      }
+    }
+  },
+  "epic": {
+    "new": "Новый эпик",
+    "label": "{count, plural, one {Эпик} other {Эпики}}",
+    "adding": "Добавление эпика",
+    "create": {
+      "success": "Эпик успешно создан"
+    },
+    "add": {
+      "label": "Добавить эпик",
+      "press_enter": "Нажмите 'Enter' чтобы добавить ещё эпик"
+    },
+    "title": {
+      "label": "Название эпика",
+      "required": "Название эпика обязательно"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/workflow.json b/packages/i18n/src/locales/ru/workflow.json
new file mode 100644
index 0000000..748dbea
--- /dev/null
+++ b/packages/i18n/src/locales/ru/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Разрешить новые рабочие элементы",
+      "work_item_creation_disable_tooltip": "Создание рабочих элементов отключено для этого состояния",
+      "default_state": "Стандартное состояние позволяет всем участникам создавать новые рабочие элементы. Это нельзя изменить",
+      "state_change_count": "{count, plural, one {1 разрешенное изменение состояния} other {{count} разрешенных изменения состояния}}",
+      "movers_count": "{count, plural, one {1 указанный перемещатель} other {{count} указанных перемещателей}}",
+      "state_changes": {
+        "label": {
+          "default": "Добавить разрешенное изменение состояния",
+          "loading": "Добавление разрешенного изменения состояния"
+        },
+        "move_to": "Переместить в",
+        "movers": {
+          "label": "Когда перемещено",
+          "tooltip": "Перемещатели — это люди, которым разрешено перемещать рабочие элементы из одного состояния в другое.",
+          "add": "Добавить перемещателей"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Вы не можете переместить этот рабочий элемент сюда."
+    },
+    "workflow_enabled": {
+      "label": "Изменение состояния"
+    },
+    "workflow_tree": {
+      "label": "Для рабочих элементов в",
+      "state_change_label": "можно переместить в"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Контролируйте хаос изменений и проверок с помощью Рабочих процессов.",
+        "description": "Установите правила для того, куда перемещается ваша работа, кем и когда с помощью Рабочих процессов в Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Просмотреть историю изменений",
+      "reset_workflow": "Сбросить рабочий процесс"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Вы уверены, что хотите сбросить этот рабочий процесс?",
+        "description": "Если вы сбросите этот рабочий процесс, все ваши правила изменения состояния будут удалены, и вам придется создать их заново, чтобы они работали в этом проекте."
+      },
+      "delete_state_change": {
+        "title": "Вы уверены, что хотите удалить это правило изменения состояния?",
+        "description": "После удаления вы не сможете отменить это изменение, и вам придется установить правило снова, если вы хотите, чтобы оно работало для этого проекта."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} рабочие процессы",
+        "success": {
+          "title": "Рабочие процессы {action} успешно",
+          "message": "Рабочие процессы {action} успешно"
+        },
+        "error": {
+          "title": "Ошибка {action} рабочих процессов",
+          "message": "Рабочие процессы не могут быть {action}. Пожалуйста, попробуйте снова."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Рабочие процессы успешно сброшены",
+          "message": "Рабочие процессы успешно сброшены"
+        },
+        "error": {
+          "title": "Ошибка сброса рабочих процессов",
+          "message": "Рабочие процессы не могут быть сброшены. Пожалуйста, попробуйте снова."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Ошибка добавления правила изменения состояния",
+          "message": "Правило изменения состояния не может быть добавлено. Пожалуйста, попробуйте снова."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Ошибка изменения правила изменения состояния",
+          "message": "Правило изменения состояния не может быть изменено. Пожалуйста, попробуйте снова."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Ошибка удаления правила изменения состояния",
+          "message": "Правило изменения состояния не может быть удалено. Пожалуйста, попробуйте снова."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Ошибка изменения утверждающих правил изменения состояния",
+          "message": "Утверждающие правила изменения состояния не могут быть изменены. Пожалуйста, попробуйте снова."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/workspace-settings.json b/packages/i18n/src/locales/ru/workspace-settings.json
new file mode 100644
index 0000000..58a53eb
--- /dev/null
+++ b/packages/i18n/src/locales/ru/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Настройки пространства",
+    "page_label": "{workspace} - Основные настройки",
+    "key_created": "Ключ создан",
+    "copy_key": "Скопируйте и сохраните секретный ключ в Plane Pages. После закрытия ключ будет недоступен. CSV-файл с ключом был скачан.",
+    "token_copied": "Токен скопирован в буфер",
+    "settings": {
+      "general": {
+        "title": "Основные",
+        "upload_logo": "Загрузить логотип",
+        "edit_logo": "Изменить логотип",
+        "name": "Название пространства",
+        "company_size": "Размер компании",
+        "url": "URL пространства",
+        "workspace_timezone": "Часовой пояс рабочего пространства",
+        "update_workspace": "Обновить пространство",
+        "delete_workspace": "Удалить пространство",
+        "delete_workspace_description": "Все данные будут безвозвратно удалены.",
+        "delete_btn": "Удалить пространство",
+        "delete_modal": {
+          "title": "Подтвердите удаление пространства",
+          "description": "У вас есть активная пробная подписка. Сначала отмените её.",
+          "dismiss": "Отмена",
+          "cancel": "Отменить подписку",
+          "success_title": "Пространство удалено",
+          "success_message": "Вы будете перенаправлены в профиль",
+          "error_title": "Ошибка",
+          "error_message": "Попробуйте снова"
+        },
+        "errors": {
+          "name": {
+            "required": "Обязательное поле",
+            "max_length": "Максимум 80 символов"
+          },
+          "company_size": {
+            "required": "Размер компании обязателен",
+            "select_a_range": "Выберите размер организации"
+          }
+        }
+      },
+      "members": {
+        "title": "Участники",
+        "add_member": "Добавить участника",
+        "pending_invites": "Ожидающие приглашения",
+        "invitations_sent_successfully": "Приглашения отправлены",
+        "leave_confirmation": "Подтвердите выход из пространства. Доступ будет утрачен. Это действие нельзя отменить.",
+        "details": {
+          "full_name": "Полное имя",
+          "display_name": "Отображаемое имя",
+          "email_address": "Email",
+          "account_type": "Тип аккаунта",
+          "authentication": "Аутентификация",
+          "joining_date": "Дата присоединения"
+        },
+        "modal": {
+          "title": "Пригласить участников",
+          "description": "Пригласите коллег в рабочее пространство.",
+          "button": "Отправить приглашения",
+          "button_loading": "Отправка...",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "Введите email адрес, чтобы пригласить участников",
+            "invalid": "Неверный email"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Оплата и тарифы",
+        "description": "Выберите ваш тариф, управляйте подписками и легко переходите на более высокий план по мере роста ваших потребностей.",
+        "title": "Оплата и тарифы",
+        "current_plan": "Текущий тариф",
+        "free_plan": "Используется бесплатный тариф",
+        "view_plans": "Посмотреть тарифы"
+      },
+      "exports": {
+        "heading": "Экспорт",
+        "description": "Экспортируйте данные проекта в различных форматах и получайте доступ к истории экспортов со ссылками для скачивания.",
+        "title": "Экспорт",
+        "exporting": "Экспортируется",
+        "previous_exports": "Предыдущие экспорты",
+        "export_separate_files": "Экспорт в отдельные файлы",
+        "exporting_projects": "Экспорт проекта",
+        "format": "Формат",
+        "filters_info": "Примените фильтры для экспорта конкретных рабочих элементов по вашим критериям.",
+        "modal": {
+          "title": "Экспорт в",
+          "toasts": {
+            "success": {
+              "title": "Успешный экспорт",
+              "message": "Экспортированные {entity} доступны для скачивания."
+            },
+            "error": {
+              "title": "Ошибка экспорта",
+              "message": "Эскпорт не удался. Попробуйте снова"
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Вебхуки",
+        "description": "Автоматизируйте уведомления внешним сервисам при возникновении событий проекта.",
+        "title": "Вебхуки",
+        "add_webhook": "Добавить вебхук",
+        "modal": {
+          "title": "Создать вебхук",
+          "details": "Детали вебхука",
+          "payload": "URL для уведомлений",
+          "question": "Какие события будут активировать вебхук?",
+          "error": "Требуется URL"
+        },
+        "secret_key": {
+          "title": "Секретный ключ",
+          "message": "Сгенерируйте токен для подписи уведомлений"
+        },
+        "options": {
+          "all": "Все события",
+          "individual": "Выбрать события"
+        },
+        "toasts": {
+          "created": {
+            "title": "Вебхук создан",
+            "message": "Вебхук успешно создан"
+          },
+          "not_created": {
+            "title": "Ошибка создания",
+            "message": "Не удалось создать вебхук"
+          },
+          "updated": {
+            "title": "Обновлено",
+            "message": "Вебхук успешно обновлён"
+          },
+          "not_updated": {
+            "title": "Ошибка обновления",
+            "message": "Не удалось обновить вебхук"
+          },
+          "removed": {
+            "title": "Вебхук удалён",
+            "message": "Вебхук успешно удалён"
+          },
+          "not_removed": {
+            "title": "Ошибка удаления вебхука",
+            "message": "Не удалось удалить вебхук"
+          },
+          "secret_key_copied": {
+            "message": "Секретный ключ скопирован"
+          },
+          "secret_key_not_copied": {
+            "message": "Ошибка копирования ключа"
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "API-токены",
+        "description": "Создавайте безопасные API-токены для интеграции ваших данных с внешними системами и приложениями.",
+        "title": "API-токены",
+        "add_token": "Добавить токен доступа",
+        "create_token": "Создать токен",
+        "never_expires": "Бессрочный",
+        "generate_token": "Сгенерировать токен",
+        "generating": "Генерация",
+        "delete": {
+          "title": "Удалить токен",
+          "description": "Приложения, использующие этот токен, потеряют доступ. Действие необратимо.",
+          "success": {
+            "title": "Успех!",
+            "message": "Токен удалён"
+          },
+          "error": {
+            "title": "Ошибка!",
+            "message": "Не удалось удалить токен"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Интеграции",
+        "heading": "Интеграции",
+        "description": "Подключайтесь к популярным инструментам и сервисам для синхронизации работы в вашей экосистеме.",
+        "page_title": "Работайте с данными Plane в доступных приложениях или в собственных.",
+        "page_description": "Просмотрите все интеграции, используемые этим рабочим пространством или вами."
+      },
+      "imports": {
+        "title": "Импорт",
+        "heading": "Импорт",
+        "description": "Подключайтесь и импортируйте данные из существующих инструментов управления проектами для оптимизации интеграции рабочих процессов."
+      },
+      "worklogs": {
+        "title": "Рабочие журналы",
+        "heading": "Рабочие журналы",
+        "description": "Скачивайте рабочие журналы (табели учёта рабочего времени) для любого участника любого проекта."
+      },
+      "group_syncing": {
+        "title": "Синхронизация групп",
+        "heading": "Синхронизация групп",
+        "description": "Свяжите группы поставщика удостоверений с проектами и ролями. Доступ пользователей обновляется автоматически при изменении членства в группе в вашем IdP, упрощая онбординг и оффбординг.",
+        "enable": {
+          "title": "Включить синхронизацию групп",
+          "description": "Автоматически добавляйте пользователей в проекты на основе групп поставщика удостоверений."
+        },
+        "config": {
+          "title": "Настроить синхронизацию групп",
+          "description": "Настройте сопоставление групп поставщика удостоверений с проектами и ролями.",
+          "sync_on_login": {
+            "title": "Синхронизация при входе",
+            "description": "Обновляйте членство в группе и доступ к проекту при входе пользователя."
+          },
+          "sync_offline": {
+            "title": "Офлайн-синхронизация",
+            "description": "Запускает синхронизацию каждые шесть часов автоматически, не дожидаясь входа пользователей."
+          },
+          "auto_remove": {
+            "title": "Автоудаление",
+            "description": "Автоматически удаляйте пользователей из проектов, когда они больше не соответствуют группе."
+          },
+          "group_attribute_key": {
+            "title": "Ключ атрибута группы",
+            "description": "Атрибут поставщика удостоверений, используемый для идентификации и синхронизации групп пользователей.",
+            "placeholder": "Группы"
+          }
+        },
+        "group_mapping": {
+          "title": "Сопоставление групп",
+          "description": "Свяжите группы поставщика удостоверений с проектами и ролями.",
+          "button_text": "Добавить новую синхронизацию группы"
+        },
+        "toast": {
+          "updating": "Обновление функции синхронизации групп",
+          "success": "Функция синхронизации групп успешно обновлена.",
+          "error": "Не удалось обновить функцию синхронизации групп!"
+        },
+        "delete_modal": {
+          "title": "Удалить синхронизацию группы",
+          "content": "Новые пользователи из этой группы удостоверений больше не будут добавляться в проект. Уже добавленные пользователи сохранят свою текущую роль."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Группа пользователей",
+            "required": "Группа пользователей обязательна",
+            "placeholder": "Введите названия групп IdP"
+          },
+          "project": {
+            "text": "Проект",
+            "required": "Проект обязателен",
+            "placeholder": "Выберите проект"
+          },
+          "default_role": {
+            "text": "Роль проекта",
+            "required": "Роль проекта обязательна",
+            "placeholder": "Выберите роль проекта"
+          }
+        }
+      },
+      "identity": {
+        "title": "Идентичность",
+        "heading": "Идентичность",
+        "description": "Настройте свой домен и включите единый вход"
+      },
+      "project_states": {
+        "title": "Состояния проектов",
+        "heading": "Обзор прогресса по всем проектам.",
+        "description": "Состояния проектов — это эксклюзивная функция Plane для отслеживания прогресса всех ваших проектов по любому свойству проекта.",
+        "go_to_settings": "Перейти в настройки"
+      },
+      "projects": {
+        "title": "Проекты",
+        "description": "Управление состояниями проектов, включение меток проектов и другие настройки.",
+        "tabs": {
+          "states": "Состояния проектов",
+          "labels": "Метки проектов"
+        }
+      },
+      "templates": {
+        "title": "Шаблоны",
+        "heading": "Шаблоны",
+        "description": "Экономьте 80% времени, затрачиваемого на создание проектов, рабочих элементов и страниц, используя шаблоны."
+      },
+      "relations": {
+        "title": "Связи",
+        "heading": "Связи",
+        "description": "Создавайте и управляйте типами связей, которые соединяют рабочие элементы в вашем рабочем пространстве."
+      },
+      "cancel_trial": {
+        "title": "Сначала отмените свою пробную версию.",
+        "description": "У вас есть активная пробная версия одного из наших платных планов. Пожалуйста, отмените ее сначала, чтобы продолжить.",
+        "dismiss": "Закрыть",
+        "cancel": "Отменить пробную версию",
+        "cancel_success_title": "Пробная версия отменена.",
+        "cancel_success_message": "Теперь вы можете удалить рабочее пространство.",
+        "cancel_error_title": "Это не сработало.",
+        "cancel_error_message": "Попробуйте снова, пожалуйста."
+      },
+      "applications": {
+        "internal": "Внутренний",
+        "title": "Приложения",
+        "applicationId_copied": "ID приложения скопирован в буфер обмена",
+        "clientId_copied": "ID клиента скопирован в буфер обмена",
+        "clientSecret_copied": "Секрет клиента скопирован в буфер обмена",
+        "third_party_apps": "Сторонние приложения",
+        "your_apps": "Ваши приложения",
+        "connect": "Подключить",
+        "connected": "Подключено",
+        "disconnect": "Отключить",
+        "install": "Установить",
+        "installed": "Установлено",
+        "configure": "Настроить",
+        "app_available": "Вы сделали это приложение доступным для использования с рабочим пространством Plane",
+        "app_credentials_regenrated": {
+          "title": "Учетные данные приложения были успешно сгенерированы заново",
+          "description": "Замените секрет клиента во всех местах, где он используется. Предыдущий секрет больше недействителен."
+        },
+        "app_created": {
+          "title": "Приложение успешно создано",
+          "description": "Используйте учетные данные, чтобы установить приложение в рабочее пространство Plane"
+        },
+        "installed_apps": "Установленные приложения",
+        "all_apps": "Все приложения",
+        "internal_apps": "Внутренние приложения",
+        "app_name_title": "Как вы назовете это приложение",
+        "app_description_title": {
+          "label": "Длинное описание",
+          "placeholder": "Напишите подробное описание для маркетплейса. Нажмите '/' для команд."
+        },
+        "authorization_grant_type": {
+          "title": "Тип подключения",
+          "description": "Выберите, должно ли ваше приложение быть установлено один раз для рабочего пространства или позволить каждому пользователю подключить свою учетную запись"
+        },
+        "website": {
+          "title": "Веб-сайт",
+          "description": "Ссылка на веб-сайт вашего приложения.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Создатель приложений",
+          "description": "Лицо или организация, создающая приложение."
+        },
+        "app_maker_error": "Создатель приложения обязателен",
+        "setup_url": {
+          "label": "URL настройки",
+          "description": "Пользователи будут перенаправлены на этот URL при установке приложения.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL вебхука",
+          "description": "Здесь мы будем отправлять события вебхука и обновления из рабочих пространств, где установлено ваше приложение.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Секрет вебхука",
+          "description": "Секрет, используемый для проверки входящих запросов вебхука.",
+          "placeholder": "Введите случайный секретный ключ"
+        },
+        "redirect_uris": {
+          "label": "URI перенаправления (через пробел)",
+          "description": "Пользователи будут перенаправлены на этот путь после аутентификации через Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Подключите рабочее пространство Plane, чтобы начать использование",
+        "client_id_and_secret": "ID и Секрет Клиента",
+        "client_id_and_secret_description": "Скопируйте и сохраните этот секретный ключ. Вы не сможете увидеть этот ключ после нажатия Закрыть.",
+        "client_id_and_secret_download": "Вы можете скачать CSV с ключом отсюда.",
+        "application_id": "ID Приложения",
+        "client_id": "ID Клиента",
+        "client_secret": "Секрет Клиента",
+        "export_as_csv": "Экспорт в CSV",
+        "slug_already_exists": "Слаг уже существует",
+        "failed_to_create_application": "Не удалось создать приложение",
+        "upload_logo": "Загрузить Логотип",
+        "app_name_error": "Название приложения обязательно",
+        "app_short_description_title": "Дайте краткое описание этому приложению",
+        "app_short_description_error": "Краткое описание приложения обязательно",
+        "app_description_error": "Описание приложения обязательно",
+        "app_slug_title": "Слаг приложения",
+        "app_slug_error": "Слаг приложения обязателен",
+        "invalid_website_error": "Некорректный веб-сайт",
+        "webhook_url_title": "URL вебхука",
+        "webhook_url_error": "URL вебхука обязателен",
+        "invalid_webhook_url_error": "Недействительный URL вебхука",
+        "redirect_uris_title": "URI перенаправления",
+        "redirect_uris_error": "URI перенаправления обязательны",
+        "invalid_redirect_uris_error": "Недействительные URI перенаправления",
+        "redirect_uris_description": "Введите URI через пробел, куда приложение будет перенаправлять после пользователя, например https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Разрешенные источники JavaScript",
+        "authorized_javascript_origins_error": "Разрешенные источники JavaScript обязательны",
+        "invalid_authorized_javascript_origins_error": "Недействительные разрешенные источники JavaScript",
+        "authorized_javascript_origins_description": "Введите источники через пробел, откуда приложение сможет делать запросы, например app.com example.com",
+        "create_app": "Создать приложение",
+        "update_app": "Обновить приложение",
+        "build_your_own_app": "Создайте собственное приложение",
+        "edit_app_details": "Редактировать детали приложения",
+        "regenerate_client_secret_description": "Перегенерировать секрет клиента. После перегенерации вы сможете скопировать ключ или скачать его в файл CSV.",
+        "regenerate_client_secret": "Перегенерировать секрет клиента",
+        "regenerate_client_secret_confirm_title": "Вы уверены, что хотите перегенерировать секрет клиента?",
+        "regenerate_client_secret_confirm_description": "Приложение, использующее этот секрет, перестанет работать. Вам нужно будет обновить секрет в приложении.",
+        "regenerate_client_secret_confirm_cancel": "Отмена",
+        "regenerate_client_secret_confirm_regenerate": "Перегенерировать",
+        "read_only_access_to_workspace": "Доступ только для чтения к вашему рабочему пространству",
+        "write_access_to_workspace": "Доступ для записи к вашему рабочему пространству",
+        "read_only_access_to_user_profile": "Доступ только для чтения к вашему профилю пользователя",
+        "write_access_to_user_profile": "Доступ для записи к вашему профилю пользователя",
+        "connect_app_to_workspace": "Подключить {app} к вашему рабочему пространству {workspace}",
+        "user_permissions": "Разрешения пользователя",
+        "user_permissions_description": "Разрешения пользователя используются для предоставления доступа к профилю пользователя.",
+        "workspace_permissions": "Разрешения рабочего пространства",
+        "workspace_permissions_description": "Разрешения рабочего пространства используются для предоставления доступа к рабочему пространству.",
+        "with_the_permissions": "с разрешениями",
+        "app_consent_title": "{app} запрашивает доступ к вашему рабочему пространству и профилю Plane.",
+        "choose_workspace_to_connect_app_with": "Выберите рабочее пространство для подключения приложения",
+        "app_consent_workspace_permissions_title": "{app} хочет",
+        "app_consent_user_permissions_title": "{app} также может запросить разрешение пользователя на следующие ресурсы. Эти разрешения будут запрошены и авторизованы только пользователем.",
+        "app_consent_accept_title": "Принимая",
+        "app_consent_accept_1": "Вы предоставляете приложению доступ к вашим данным Plane везде, где вы можете использовать приложение внутри или вне Plane",
+        "app_consent_accept_2": "Вы соглашаетесь с Политикой конфиденциальности и Условиями использования {app}",
+        "accepting": "Принятие...",
+        "accept": "Принять",
+        "categories": "Категории",
+        "select_app_categories": "Выберите категории приложения",
+        "categories_title": "Категории",
+        "categories_error": "Категории обязательны",
+        "invalid_categories_error": "Неверные категории",
+        "categories_description": "Выберите категории, которые лучше всего описывают приложение",
+        "supported_plans": "Поддерживаемые планы",
+        "supported_plans_description": "Выберите планы рабочего пространства, которые могут установить это приложение. Оставьте пустым, чтобы разрешить все планы.",
+        "select_plans": "Выбрать планы",
+        "privacy_policy_url_title": "URL Политики конфиденциальности",
+        "privacy_policy_url_error": "URL Политики конфиденциальности обязателен",
+        "invalid_privacy_policy_url_error": "Неверный URL Политики конфиденциальности",
+        "terms_of_service_url_title": "URL Условий использования",
+        "terms_of_service_url_error": "URL Условий использования обязателен",
+        "invalid_terms_of_service_url_error": "Неверный URL Условий использования",
+        "support_url_title": "URL поддержки",
+        "support_url_error": "URL поддержки обязателен",
+        "invalid_support_url_error": "Неверный URL поддержки",
+        "video_url_title": "URL видео",
+        "video_url_error": "URL видео обязателен",
+        "invalid_video_url_error": "Неверный URL видео",
+        "setup_url_error": "URL настройки обязателен",
+        "invalid_setup_url_error": "Неверный URL настройки",
+        "configuration_url_title": "URL настройки",
+        "configuration_url_error": "URL настройки обязателен",
+        "invalid_configuration_url_error": "Неверный URL настройки",
+        "contact_email_title": "Email контакта",
+        "contact_email_error": "Email контакта обязателен",
+        "invalid_contact_email_error": "Неверный email контакта",
+        "upload_attachments": "Загрузить вложения",
+        "uploading_images": "Загрузка {count} изображения{count, plural, one {s} other {s}}",
+        "drop_images_here": "Перетащите изображения сюда",
+        "click_to_upload_images": "Нажмите, чтобы загрузить изображения",
+        "invalid_file_or_exceeds_size_limit": "Неверный файл или превышен лимит размера ({size} MB)",
+        "uploading": "Загрузка...",
+        "upload_and_save": "Загрузить и сохранить",
+        "app_consent_no_access_title": "Запрос на установку",
+        "app_consent_no_access_description": "Это приложение можно установить только после установки администратором рабочего пространства. Свяжитесь с администратором вашего рабочего пространства, чтобы продолжить.",
+        "app_consent_unapproved_title": "Это приложение ещё не было рассмотрено или одобрено Plane.",
+        "app_consent_unapproved_description": "Убедитесь, что вы доверяете этому приложению, прежде чем подключить его к своему рабочему пространству.",
+        "go_to_app": "Перейти к приложению",
+        "enable_app_mentions": "Включить упоминания приложения",
+        "enable_app_mentions_tooltip": "Когда эта функция включена, пользователи могут упоминать или назначать рабочие элементы этому приложению.",
+        "scopes": "Области доступа",
+        "select_scopes": "Выбрать области",
+        "read_access_to": "Доступ только для чтения к",
+        "write_access_to": "Доступ на запись к",
+        "global_permission_expiration": "Глобальные области доступа скоро устареют. Используйте детализированные области. Например, используйте project:read вместо глобального чтения.",
+        "selected_scopes": "Выбрано: {count}",
+        "scopes_and_permissions": "Области и разрешения",
+        "read": "Чтение",
+        "write": "Запись",
+        "scope_description": {
+          "projects": "Доступ к проектам и всем связанным сущностям",
+          "wiki": "Доступ к вики и всем связанным сущностям",
+          "workspaces": "Доступ к рабочим пространствам и всем связанным сущностям",
+          "stickies": "Доступ к стикерам и всем связанным сущностям",
+          "profile": "Доступ к информации профиля пользователя",
+          "agents": "Доступ к агентам и всем связанным с ними сущностям",
+          "assets": "Доступ к активам и всем связанным с ними сущностям"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Смотрите, как ваша работа становится более интеллектуальной и быстрой с помощью ИИ, которая напрямую связана с вашей работой и базой знаний."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Скрипты",
+        "new_script": "Новый скрипт",
+        "description": "Автоматизируйте рабочие процессы с помощью пользовательских скриптов и правил автоматизации."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Нет API-токенов",
+        "description": "Используйте API Plane для интеграции с внешними системами. Создайте тоекен чтобы начать."
+      },
+      "webhooks": {
+        "title": "Нет вебхуков",
+        "description": "Создавайте вебхуки для автоматизации и получения уведомлений."
+      },
+      "exports": {
+        "title": "Нет экспортов",
+        "description": "Здесь будут сохранённые копии ваших экспортов."
+      },
+      "imports": {
+        "title": "Нет импортов",
+        "description": "Здесь отображаются все предыдущие импорты."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ru/workspace.json b/packages/i18n/src/locales/ru/workspace.json
new file mode 100644
index 0000000..1bcd720
--- /dev/null
+++ b/packages/i18n/src/locales/ru/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Создайте рабочее пространство",
+    "subheading": "Чтобы начать использовать Plane, создайте или присоединитесь к рабочему пространству.",
+    "form": {
+      "name": {
+        "label": "Название рабочего пространства",
+        "placeholder": "Лучше использовать знакомое и узнаваемое название"
+      },
+      "url": {
+        "label": "Установите URL рабочего пространства",
+        "placeholder": "Введите или вставьте URL",
+        "edit_slug": "Можно редактировать только часть URL (slug)"
+      },
+      "organization_size": {
+        "label": "Сколько человек будут использовать это пространство?",
+        "placeholder": "Выберите диапазон"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Только администратор экземпляра может создавать рабочие пространства",
+        "description": "Если вы знаете email администратора, нажмите кнопку ниже для связи.",
+        "request_button": "Запросить администратора"
+      },
+      "validation": {
+        "name_alphanumeric": "Название может содержать только пробелы, дефисы, подчёркивания и буквенно-цифровые символы",
+        "name_length": "Максимальная длина названия - 80 символов",
+        "url_alphanumeric": "URL может содержать только дефисы и буквенно-цифровые символы",
+        "url_length": "Максимальная длина URL - 48 символов",
+        "url_already_taken": "Этот URL уже занят!"
+      }
+    },
+    "request_email": {
+      "subject": "Запрос нового рабочего пространства",
+      "body": "Здравствуйте, администратор!\n\nПожалуйста, создайте новое рабочее пространство с URL [/workspace-name] для [цель создания].\n\nСпасибо,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Создать пространство",
+      "loading": "Создание пространства"
+    },
+    "toast": {
+      "success": {
+        "title": "Успех",
+        "message": "Рабочее пространство успешно создано"
+      },
+      "error": {
+        "title": "Ошибка",
+        "message": "Не удалось создать пространство. Попробуйте снова."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Обзор проектов, активности и метрик",
+        "description": "Добро пожаловать в Plane! Создайте первый проект и отслеживайте рабочие элементы - эта страница станет вашим рабочим пространством. Администраторы также увидят элементы для управления командой.",
+        "primary_button": {
+          "text": "Создать первый проект",
+          "comic": {
+            "title": "Всё начинается с проекта в Plane",
+            "description": "Проектом может быть роадмап продукта, маркетинговая кампания или запуск нового автомобиля."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Аналитика",
+    "page_label": "{workspace} - Аналитика",
+    "open_tasks": "Всего открытых рабочих элементов",
+    "error": "Ошибка при получении данных",
+    "work_items_closed_in": "Рабочие элементы закрыты в",
+    "selected_projects": "Выбранные проекты",
+    "total_members": "Всего участников",
+    "total_cycles": "Всего циклов",
+    "total_modules": "Всего модулей",
+    "pending_work_items": {
+      "title": "Ожидающие рабочие элементы",
+      "empty_state": "Здесь отображается анализ ожидающих рабочих элементов по сотрудникам."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Рабочие элементы закрытые за год",
+      "empty_state": "Закрывайте рабочие элементы для просмотра анализа в виде графика."
+    },
+    "most_work_items_created": {
+      "title": "Наибольшее количество созданных рабочих элементов",
+      "empty_state": "Здесь отображаются сотрудники и количество созданных ими рабочих элементов."
+    },
+    "most_work_items_closed": {
+      "title": "Наибольшее количество закрытых рабочих элементов",
+      "empty_state": "Здесь отображаются сотрудники и количество закрытых ими рабочих элементов."
+    },
+    "tabs": {
+      "scope_and_demand": "Объём и спрос",
+      "custom": "Пользовательская аналитика"
+    },
+    "total": "Общее количество {entity}",
+    "started_work_items": "Начатые {entity}",
+    "backlog_work_items": "{entity} в бэклоге",
+    "un_started_work_items": "Не начатые {entity}",
+    "completed_work_items": "Завершённые {entity}",
+    "project_insights": "Аналитика проекта",
+    "summary_of_projects": "Сводка по проектам",
+    "all_projects": "Все проекты",
+    "trend_on_charts": "Тренд на графиках",
+    "active_projects": "Активные проекты",
+    "customized_insights": "Индивидуальные аналитические данные",
+    "created_vs_resolved": "Создано vs Решено",
+    "empty_state": {
+      "project_insights": {
+        "title": "Данных пока нет",
+        "description": "Назначенные вам рабочие элементы, разбитые по статусам, появятся здесь."
+      },
+      "created_vs_resolved": {
+        "title": "Данных пока нет",
+        "description": "Созданные и решённые со временем рабочие элементы появятся здесь."
+      },
+      "customized_insights": {
+        "title": "Данных пока нет",
+        "description": "Назначенные вам рабочие элементы, разбитые по статусам, появятся здесь."
+      },
+      "general": {
+        "title": "Отслеживайте прогресс, рабочие нагрузки и распределения. Выявляйте тренды, устраняйте блокировки и ускоряйте работу",
+        "description": "Смотрите объём versus спрос, оценки и расширение объёма. Получайте производительность по членам команды и командам, и убеждайтесь, что ваш проект выполняется в срок.",
+        "primary_button": {
+          "text": "Начать ваш первый проект",
+          "comic": {
+            "title": "Аналитика работает лучше всего с Циклами + Модулями",
+            "description": "Сначала ограничьте по времени ваши задачи в Циклах и, если можете, сгруппируйте задачи, которые длятся больше одного цикла, в Модули. Проверьте оба в левой навигации."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Данных пока нет",
+        "description": "Аналитика прогресса цикла появится здесь. Добавьте рабочие элементы в циклы, чтобы начать отслеживание прогресса."
+      },
+      "module_progress": {
+        "title": "Данных пока нет",
+        "description": "Аналитика прогресса модуля появится здесь. Добавьте рабочие элементы в модули, чтобы начать отслеживание прогресса."
+      },
+      "intake_trends": {
+        "title": "Данных пока нет",
+        "description": "Аналитика тенденций intake появится здесь. Добавьте рабочие элементы в intake, чтобы начать отслеживать тенденции."
+      }
+    },
+    "upgrade_to_plan": "Обновитесь до {plan}, чтобы разблокировать {tab}",
+    "workitem_resolved_vs_pending": "Решенные vs ожидающие рабочие элементы",
+    "projects_by_status": "Проекты по статусу",
+    "active_users": "Активные пользователи",
+    "intake_trends": "Тенденции приёма"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Проект} other {Проекты}}",
+    "create": {
+      "label": "Добавить проект"
+    },
+    "network": {
+      "label": "Сеть",
+      "private": {
+        "title": "Приватный",
+        "description": "Доступ только по приглашению"
+      },
+      "public": {
+        "title": "Публичный",
+        "description": "Доступен всем в рабочем пространстве кроме гостей"
+      }
+    },
+    "error": {
+      "permission": "Недостаточно прав для выполнения действия",
+      "cycle_delete": "Ошибка удаления цикла",
+      "module_delete": "Ошибка удаления модуля",
+      "issue_delete": "Не удалось удалить рабочий элемент"
+    },
+    "state": {
+      "backlog": "Бэклог",
+      "unstarted": "Не начато",
+      "started": "В процессе",
+      "completed": "Завершено",
+      "cancelled": "Отменено"
+    },
+    "sort": {
+      "manual": "Вручную",
+      "name": "По имени",
+      "created_at": "По дате создания",
+      "members_length": "По количеству участников"
+    },
+    "scope": {
+      "my_projects": "Мои проекты",
+      "archived_projects": "Архивные"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# месяц} other{# месяцев}}",
+      "days_count": "{days, plural, one{# день} other{# дней}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Нет активных проектов",
+        "description": "Проекты помогают организовать работу. Создавайте проекты для управления рабочими элементами, циклами и модулями. Фильтруйте архивные проекты при необходимости.",
+        "primary_button": {
+          "text": "Создать первый проект",
+          "comic": {
+            "title": "Всё начинается с проекта в Plane",
+            "description": "Проектом может быть дорожная карта продукта, маркетинговая кампания или запуск нового автомобиля."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Нет проектов",
+        "description": "Для управления рабочими элементами необходимо создать проект или быть его участником.",
+        "primary_button": {
+          "text": "Создать первый проект",
+          "comic": {
+            "title": "Всё начинается с проекта в Plane",
+            "description": "Проектом может быть дорожная карта продукта, маркетинговая кампания или запуск нового автомобиля."
+          }
+        }
+      },
+      "filter": {
+        "title": "Нет подходящих проектов",
+        "description": "Не найдено проектов по заданным критериям.\nСоздайте новый проект."
+      },
+      "search": {
+        "description": "Не найдено проектов по заданным критериям.\nСоздайте новый проект"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Добавить представление",
+    "empty_state": {
+      "all-issues": {
+        "title": "Нет рабочих элементов в проекте",
+        "description": "Первый проект создан! Теперь разделите работу на отслеживаемые рабочие элементы.",
+        "primary_button": {
+          "text": "Создать рабочий элемент"
+        }
+      },
+      "assigned": {
+        "title": "Нет назначенных рабочих элементов",
+        "description": "Здесь отображаются рабочие элементы, назначенные вам.",
+        "primary_button": {
+          "text": "Создать рабочий элемент"
+        }
+      },
+      "created": {
+        "title": "Нет созданных рабочих элементов",
+        "description": "Все созданные вами рабочие элементы отображаются здесь.",
+        "primary_button": {
+          "text": "Создать рабочий элемент"
+        }
+      },
+      "subscribed": {
+        "title": "Нет отслеживаемых рабочих элементов",
+        "description": "Подпишитесь на интересующие рабочие элементы для отслеживания."
+      },
+      "custom-view": {
+        "title": "Нет рабочих элементов",
+        "description": "Здесь отображаются рабочие элементы, соответствующие фильтрам."
+      }
+    },
+    "delete_view": {
+      "title": "Вы уверены, что хотите удалить это представление?",
+      "content": "При подтверждении все параметры сортировки, фильтрации и отображения + макет, выбранный для этого представления, будут безвозвратно удалены без возможности восстановления."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Создать черновик рабочего элемента",
+    "empty_state": {
+      "title": "Черновики рабочих элементов, а вскоре и комментарии, будут отображаться здесь.",
+      "description": "Чтобы попробовать, начните добавлять рабочий элемент и прервитесь на полпути или создайте первый черновик ниже. 😉",
+      "primary_button": {
+        "text": "Создать первый черновик"
+      }
+    },
+    "delete_modal": {
+      "title": "Удалить черновик",
+      "description": "Вы уверены, что хотите удалить этот черновик? Это действие нельзя отменить."
+    },
+    "toasts": {
+      "created": {
+        "success": "Черновик создан",
+        "error": "Не удалось создать рабочий элемент. Попробуйте снова."
+      },
+      "deleted": {
+        "success": "Черновик удалён"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Напишите заметку, документ или полную базу знаний. Попросите Галила, ИИ-помощника Plane, помочь вам начать",
+        "description": "Страницы — это пространство для мыслей в Plane. Записывайте заметки с встреч, форматируйте их легко, встраивайте рабочие элементы, раскладывайте их с помощью библиотеки компонентов и держите их все в контексте вашего проекта. Чтобы быстро справиться с любым документом, вызовите Галила, ИИ Plane, с помощью сочетания клавиш или нажатием кнопки.",
+        "primary_button": {
+          "text": "Создать вашу первую страницу"
+        }
+      },
+      "private": {
+        "title": "Пока нет частных страниц",
+        "description": "Держите свои частные мысли здесь. Когда вы будете готовы поделиться, команда всего в одном клике.",
+        "primary_button": {
+          "text": "Создать вашу первую страницу"
+        }
+      },
+      "public": {
+        "title": "Пока нет страниц рабочего пространства",
+        "description": "Смотрите страницы, поделенные со всеми в вашем рабочем пространстве, прямо здесь.",
+        "primary_button": {
+          "text": "Создать вашу первую страницу"
+        }
+      },
+      "archived": {
+        "title": "Пока нет архивированных страниц",
+        "description": "Архивируйте страницы, которые не на вашем радаре. Получите к ним доступ здесь, когда это необходимо."
+      },
+      "shared": {
+        "title": "Пока нет общих страниц",
+        "description": "Страницы, которыми с вами поделились, будут отображаться здесь."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Нет активных циклов",
+        "description": "Циклы ваших проектов, которые включают любой период, охватывающий сегодняшнюю дату в своем диапазоне. Найдите прогресс и детали всех ваших активных циклов здесь."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Импорт участников из CSV",
+      "description": "Загрузите CSV со столбцами: Email, Display Name, First Name, Last Name, Role (5, 15 или 20)",
+      "dropzone": {
+        "active": "Перетащите CSV файл сюда",
+        "inactive": "Перетащите или нажмите для загрузки",
+        "file_type": "Поддерживаются только файлы .csv"
+      },
+      "buttons": {
+        "cancel": "Отмена",
+        "import": "Импортировать",
+        "try_again": "Попробовать снова",
+        "close": "Закрыть",
+        "done": "Готово"
+      },
+      "progress": {
+        "uploading": "Загрузка...",
+        "importing": "Импорт..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Импорт не удался",
+          "complete": "Импорт завершен"
+        },
+        "message": {
+          "seat_limit": "Не удалось импортировать участников из-за ограничений количества мест.",
+          "success": "Успешно добавлено {count} участник{plural} в рабочее пространство.",
+          "no_imports": "Участники не были импортированы из CSV файла."
+        },
+        "stats": {
+          "successful": "Успешно",
+          "failed": "Не удалось"
+        },
+        "download_errors": "Скачать ошибки"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Недопустимый файл",
+          "message": "Поддерживаются только CSV файлы."
+        },
+        "import_failed": {
+          "title": "Импорт не удался",
+          "message": "Что-то пошло не так."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/accessibility.json b/packages/i18n/src/locales/sk/accessibility.json
new file mode 100644
index 0000000..26c5c8b
--- /dev/null
+++ b/packages/i18n/src/locales/sk/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo pracovného priestoru",
+      "open_workspace_switcher": "Otvoriť prepínač pracovného priestoru",
+      "open_user_menu": "Otvoriť používateľské menu",
+      "open_command_palette": "Otvoriť paletu príkazov",
+      "open_extended_sidebar": "Otvoriť rozšírený bočný panel",
+      "close_extended_sidebar": "Zavrieť rozšírený bočný panel",
+      "create_favorites_folder": "Vytvoriť priečinok obľúbených",
+      "open_folder": "Otvoriť priečinok",
+      "close_folder": "Zavrieť priečinok",
+      "open_favorites_menu": "Otvoriť menu obľúbených",
+      "close_favorites_menu": "Zavrieť menu obľúbených",
+      "enter_folder_name": "Zadajte názov priečinka",
+      "create_new_project": "Vytvoriť nový projekt",
+      "open_projects_menu": "Otvoriť menu projektov",
+      "close_projects_menu": "Zavrieť menu projektov",
+      "toggle_quick_actions_menu": "Prepnúť menu rýchlych akcií",
+      "open_project_menu": "Otvoriť menu projektu",
+      "close_project_menu": "Zavrieť menu projektu",
+      "collapse_sidebar": "Zbaliť bočný panel",
+      "expand_sidebar": "Rozbaliť bočný panel",
+      "edition_badge": "Otvoriť modal platených plánov"
+    },
+    "auth_forms": {
+      "clear_email": "Vymazať e-mail",
+      "show_password": "Zobraziť heslo",
+      "hide_password": "Skryť heslo",
+      "close_alert": "Zavrieť upozornenie",
+      "close_popover": "Zavrieť vyskakovacie okno"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/auth.json b/packages/i18n/src/locales/sk/auth.json
new file mode 100644
index 0000000..703e269
--- /dev/null
+++ b/packages/i18n/src/locales/sk/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Identita",
+    "description": "Nakonfigurujte svoju doménu pre prístup k bezpečnostným funkciám vrátane jednotného prihlásenia.",
+    "domain_management": {
+      "header": "Správa domén",
+      "verified_domains": {
+        "header": "Overené domény",
+        "description": "Overte vlastníctvo e-mailovej domény na povolenie jednotného prihlásenia.",
+        "button_text": "Pridať doménu",
+        "list": {
+          "domain_name": "Názov domény",
+          "status": "Stav",
+          "status_verified": "Overené",
+          "status_failed": "Zlyhalo",
+          "status_pending": "Čaká sa"
+        },
+        "add_domain": {
+          "title": "Pridať doménu",
+          "description": "Pridajte svoju doménu na konfiguráciu SSO a overenie.",
+          "form": {
+            "domain_label": "Doména",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Doména je povinná",
+            "domain_invalid": "Zadajte platný názov domény (napr. plane.so)"
+          },
+          "primary_button_text": "Pridať doménu",
+          "primary_button_loading_text": "Pridáva sa",
+          "toast": {
+            "success_title": "Úspech!",
+            "success_message": "Doména bola úspešne pridaná. Prosím overte ju pridaním DNS TXT záznamu.",
+            "error_message": "Nepodarilo sa pridať doménu. Skúste to prosím znova."
+          }
+        },
+        "verify_domain": {
+          "title": "Overte svoju doménu",
+          "description": "Postupujte podľa týchto krokov na overenie vašej domény.",
+          "instructions": {
+            "label": "Pokyny",
+            "step_1": "Prejdite do nastavení DNS pre váš doménový hostiteľ.",
+            "step_2": {
+              "part_1": "Vytvorte",
+              "part_2": "TXT záznam",
+              "part_3": "a vložte úplnú hodnotu záznamu uvedenú nižšie."
+            },
+            "step_3": "Táto aktualizácia zvyčajne trvá niekoľko minút, ale môže trvať až 72 hodín.",
+            "step_4": "Kliknite na \"Overiť doménu\" na potvrdenie po aktualizácii DNS záznamu."
+          },
+          "verification_code_label": "Hodnota TXT záznamu",
+          "verification_code_description": "Pridajte tento záznam do nastavení DNS",
+          "domain_label": "Doména",
+          "primary_button_text": "Overiť doménu",
+          "primary_button_loading_text": "Overuje sa",
+          "secondary_button_text": "Urobím to neskôr",
+          "toast": {
+            "success_title": "Úspech!",
+            "success_message": "Doména bola úspešne overená.",
+            "error_message": "Nepodarilo sa overiť doménu. Skúste to prosím znova."
+          }
+        },
+        "delete_domain": {
+          "title": "Zmazať doménu",
+          "description": {
+            "prefix": "Naozaj chcete zmazať",
+            "suffix": "? Túto akciu nemožno vrátiť späť."
+          },
+          "primary_button_text": "Zmazať",
+          "primary_button_loading_text": "Maže sa",
+          "secondary_button_text": "Zrušiť",
+          "toast": {
+            "success_title": "Úspech!",
+            "success_message": "Doména bola úspešne zmazaná.",
+            "error_message": "Nepodarilo sa zmazať doménu. Skúste to prosím znova."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Jednotné prihlásenie",
+      "disabled_message": "Pridajte overenú doménu na konfiguráciu SSO",
+      "configure": {
+        "create": "Nakonfigurovať",
+        "update": "Upraviť"
+      },
+      "switch_alert_modal": {
+        "title": "Prepínať metódu SSO na {newProviderShortName}?",
+        "content": "Chystáte sa povoliť {newProviderLongName} ({newProviderShortName}). Táto akcia automaticky zakáže {activeProviderLongName} ({activeProviderShortName}). Používatelia, ktorí sa pokúšajú prihlásiť cez {activeProviderShortName}, už nebudú môcť pristupovať k platforme, kým neprepnu na novú metódu. Naozaj chcete pokračovať?",
+        "primary_button_text": "Prepínať",
+        "primary_button_text_loading": "Prepína sa",
+        "secondary_button_text": "Zrušiť"
+      },
+      "form_section": {
+        "title": "Detaily poskytnuté IdP pre {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Ukladá sa",
+        "save_changes": "Uložiť zmeny",
+        "configure_only": "Len nakonfigurovať",
+        "configure_and_enable": "Nakonfigurovať a povoliť",
+        "default": "Uložiť"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} poskytnuté detaily pre váš IdP",
+        "button_text": "Získať detaily nastavenia"
+      },
+      "saml": {
+        "header": "Povoliť SAML",
+        "description": "Nakonfigurujte svojho poskytovateľa identity SAML na povolenie jednotného prihlásenia.",
+        "configure": {
+          "title": "Povoliť SAML",
+          "description": "Overte vlastníctvo e-mailovej domény pre prístup k bezpečnostným funkciám vrátane jednotného prihlásenia.",
+          "toast": {
+            "success_title": "Úspech!",
+            "create_success_message": "Poskytovateľ SAML bol úspešne vytvorený.",
+            "update_success_message": "Poskytovateľ SAML bol úspešne aktualizovaný.",
+            "error_title": "Chyba!",
+            "error_message": "Nepodarilo sa uložiť poskytovateľa SAML. Skúste to prosím znova."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Webové detaily",
+            "entity_id": {
+              "label": "Entity ID | Publikum | Informácie o metadátach",
+              "description": "Vygenerujeme túto časť metadátov, ktorá identifikuje túto aplikáciu Plane ako autorizovanú službu na vašom IdP."
+            },
+            "callback_url": {
+              "label": "URL jednotného prihlásenia",
+              "description": "Vygenerujeme toto za vás. Pridajte toto do poľa URL presmerovania prihlásenia vášho IdP."
+            },
+            "logout_url": {
+              "label": "URL jednotného odhlásenia",
+              "description": "Vygenerujeme toto za vás. Pridajte toto do poľa URL presmerovania jednotného odhlásenia vášho IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobilné detaily",
+            "entity_id": {
+              "label": "Entity ID | Publikum | Informácie o metadátach",
+              "description": "Vygenerujeme túto časť metadátov, ktorá identifikuje túto aplikáciu Plane ako autorizovanú službu na vašom IdP."
+            },
+            "callback_url": {
+              "label": "URL jednotného prihlásenia",
+              "description": "Vygenerujeme toto za vás. Pridajte toto do poľa URL presmerovania prihlásenia vášho IdP."
+            },
+            "logout_url": {
+              "label": "URL jednotného odhlásenia",
+              "description": "Vygenerujeme toto za vás. Pridajte toto do poľa URL presmerovania odhlásenia vášho IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Detaily mapovania",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Povoliť OIDC",
+        "description": "Nakonfigurujte svojho poskytovateľa identity OIDC na povolenie jednotného prihlásenia.",
+        "configure": {
+          "title": "Povoliť OIDC",
+          "description": "Overte vlastníctvo e-mailovej domény pre prístup k bezpečnostným funkciám vrátane jednotného prihlásenia.",
+          "toast": {
+            "success_title": "Úspech!",
+            "create_success_message": "Poskytovateľ OIDC bol úspešne vytvorený.",
+            "update_success_message": "Poskytovateľ OIDC bol úspešne aktualizovaný.",
+            "error_title": "Chyba!",
+            "error_message": "Nepodarilo sa uložiť poskytovateľa OIDC. Skúste to prosím znova."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Webové detaily",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "Vygenerujeme toto pre túto aplikáciu Plane. Pridajte toto ako dôveryhodný pôvod do zodpovedajúceho poľa vášho IdP."
+            },
+            "callback_url": {
+              "label": "URL presmerovania",
+              "description": "Vygenerujeme toto za vás. Pridajte toto do poľa URL presmerovania prihlásenia vášho IdP."
+            },
+            "logout_url": {
+              "label": "URL odhlásenia",
+              "description": "Vygenerujeme toto za vás. Pridajte toto do poľa URL presmerovania odhlásenia vášho IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobilné detaily",
+            "origin_url": {
+              "label": "Origin URL",
+              "description": "Vygenerujeme toto pre túto aplikáciu Plane. Pridajte toto ako dôveryhodný pôvod do zodpovedajúceho poľa vášho IdP."
+            },
+            "callback_url": {
+              "label": "URL presmerovania",
+              "description": "Vygenerujeme toto za vás. Pridajte toto do poľa URL presmerovania prihlásenia vášho IdP."
+            },
+            "logout_url": {
+              "label": "URL odhlásenia",
+              "description": "Vygenerujeme toto za vás. Pridajte toto do poľa URL presmerovania odhlásenia vášho IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "E-mail",
+        "placeholder": "meno@spolocnost.sk",
+        "errors": {
+          "required": "E-mail je povinný",
+          "invalid": "E-mail je neplatný"
+        }
+      },
+      "password": {
+        "label": "Heslo",
+        "set_password": "Nastaviť heslo",
+        "placeholder": "Zadajte heslo",
+        "confirm_password": {
+          "label": "Potvrďte heslo",
+          "placeholder": "Potvrďte heslo"
+        },
+        "current_password": {
+          "label": "Aktuálne heslo"
+        },
+        "new_password": {
+          "label": "Nové heslo",
+          "placeholder": "Zadajte nové heslo"
+        },
+        "change_password": {
+          "label": {
+            "default": "Zmeniť heslo",
+            "submitting": "Mení sa heslo"
+          }
+        },
+        "errors": {
+          "match": "Heslá sa nezhodujú",
+          "empty": "Zadajte prosím svoje heslo",
+          "length": "Dĺžka hesla by mala byť viac ako 8 znakov",
+          "strength": {
+            "weak": "Heslo je slabé",
+            "strong": "Heslo je silné"
+          }
+        },
+        "submit": "Nastaviť heslo",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Úspech!",
+              "message": "Heslo bolo úspešne zmenené."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Niečo sa pokazilo. Skúste to prosím znova."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Jedinečný kód",
+        "placeholder": "123456",
+        "paste_code": "Vložte kód zaslaný na váš e-mail",
+        "requesting_new_code": "Žiadam o nový kód",
+        "sending_code": "Odosielam kód"
+      },
+      "already_have_an_account": "Už máte účet?",
+      "login": "Prihlásiť sa",
+      "create_account": "Vytvoriť účet",
+      "new_to_plane": "Nový v Plane?",
+      "back_to_sign_in": "Späť na prihlásenie",
+      "resend_in": "Znova odoslať za {seconds} sekúnd",
+      "sign_in_with_unique_code": "Prihlásiť sa pomocou jedinečného kódu",
+      "forgot_password": "Zabudli ste heslo?",
+      "username": {
+        "label": "Používateľské meno",
+        "placeholder": "Zadajte svoje používateľské meno"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Vytvorte účet a začnite spravovať prácu so svojím tímom.",
+        "step": {
+          "email": {
+            "header": "Registrácia",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Registrácia",
+            "sub_header": "Zaregistrujte sa pomocou kombinácie e-mailu a hesla."
+          },
+          "unique_code": {
+            "header": "Registrácia",
+            "sub_header": "Zaregistrujte sa pomocou jedinečného kódu zaslaného na vyššie uvedenú e-mailovú adresu."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Skúste nastaviť silné heslo, aby ste mohli pokračovať"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Prihláste sa a začnite spravovať prácu so svojím tímom.",
+        "step": {
+          "email": {
+            "header": "Prihlásiť sa alebo zaregistrovať",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Prihlásiť sa alebo zaregistrovať",
+            "sub_header": "Použite svoju kombináciu e-mailu a hesla na prihlásenie."
+          },
+          "unique_code": {
+            "header": "Prihlásiť sa alebo zaregistrovať",
+            "sub_header": "Prihláste sa pomocou jedinečného kódu zaslaného na vyššie uvedenú e-mailovú adresu."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Obnovte svoje heslo",
+      "description": "Zadajte overenú e-mailovú adresu vášho používateľského účtu a my vám zašleme odkaz na obnovenie hesla.",
+      "email_sent": "Odoslali sme odkaz na obnovenie na vašu e-mailovú adresu",
+      "send_reset_link": "Odoslať odkaz na obnovenie",
+      "errors": {
+        "smtp_not_enabled": "Vidíme, že váš správca neaktivoval SMTP, nebudeme môcť odoslať odkaz na obnovenie hesla"
+      },
+      "toast": {
+        "success": {
+          "title": "E-mail odoslaný",
+          "message": "Skontrolujte si doručenú poštu pre odkaz na obnovenie hesla. Ak sa neobjaví v priebehu niekoľkých minút, skontrolujte si spam."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Niečo sa pokazilo. Skúste to prosím znova."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Nastaviť nové heslo",
+      "description": "Zabezpečte svoj účet silným heslom"
+    },
+    "set_password": {
+      "title": "Zabezpečte svoj účet",
+      "description": "Nastavenie hesla vám pomôže bezpečne sa prihlásiť"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Chyba!",
+          "message": "Nepodarilo sa odhlásiť. Skúste to prosím znova."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Pokračovať s {ldapProviderName}",
+        "sub_header": "Zadajte svoje prihlasovacie údaje {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/automation.json b/packages/i18n/src/locales/sk/automation.json
new file mode 100644
index 0000000..3e7dbc5
--- /dev/null
+++ b/packages/i18n/src/locales/sk/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Vlastné automatizácie",
+      "create_automation": "Vytvoriť automatizáciu"
+    },
+    "scope": {
+      "label": "Rozsah",
+      "run_on": "Spustiť na"
+    },
+    "trigger": {
+      "label": "Spúšťač",
+      "add_trigger": "Pridať spúšťač",
+      "sidebar_header": "Konfigurácia spúšťača",
+      "input_label": "Aký je spúšťač pre túto automatizáciu?",
+      "input_placeholder": "Vyberte možnosť",
+      "section_plane_events": "Udalosti Plane",
+      "section_time_based": "Časovo založené",
+      "fixed_schedule": "Pevný rozvrh",
+      "schedule": {
+        "frequency": "Frekvencia",
+        "select_day": "Vybrať deň",
+        "day_of_month": "Deň v mesiaci",
+        "monthly_every": "Každý",
+        "monthly_day_aria": "Deň {day}",
+        "time": "Čas",
+        "hour": "Hodina",
+        "minute": "Minúta",
+        "hour_suffix": "hod",
+        "minute_suffix": "min",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Časové pásmo",
+        "timezone_placeholder": "Vyberte časové pásmo",
+        "frequency_daily": "Denne",
+        "frequency_weekly": "Týždenne",
+        "frequency_monthly": "Mesačne",
+        "on": "V",
+        "validation_weekly_day_required": "Vyberte aspoň jeden deň v týždni.",
+        "validation_monthly_date_required": "Vyberte deň v mesiaci.",
+        "main_content_schedule_summary_daily": "Každý deň o {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Každý týždeň v {days} o {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Každý mesiac v deň {day} o {time} ({timezone}).",
+        "schedule_mode": "Režim plánovania",
+        "schedule_mode_fixed": "Pevný",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Zadajte Cron výraz",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Neplatný Cron výraz.",
+        "cron_preview": "Tento Cron výraz spúšťa \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Späť",
+        "next": "Pridať akciu"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Typ spúšťača nie je možné po vytvorení zmeniť"
+      }
+    },
+    "condition": {
+      "label": "Podmienka",
+      "add_condition": "Pridať podmienku",
+      "adding_condition": "Pridávanie podmienky"
+    },
+    "action": {
+      "label": "Akcia",
+      "add_action": "Pridať akciu",
+      "sidebar_header": "Akcie",
+      "input_label": "Čo robí automatizácia?",
+      "input_placeholder": "Vyberte možnosť",
+      "handler_name": {
+        "add_comment": "Pridať komentár",
+        "change_property": "Zmeniť vlastnosť",
+        "run_script": "Spustiť skript"
+      },
+      "configuration": {
+        "label": "Konfigurácia",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Vyberte vlastnosť",
+            "change_type": "Vyberte",
+            "property_value_select": "{count, plural, one{Vyberte hodnotu} few{Vyberte hodnoty} other{Vyberte hodnoty}}",
+            "property_value_select_date": "Vyberte dátum"
+          },
+          "validation": {
+            "property_name_required": "Názov vlastnosti je povinný",
+            "change_type_required": "Typ zmeny je povinný",
+            "property_value_required": "Hodnota vlastnosti je povinná"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Pridať komentár"
+      },
+      "run_script_block": {
+        "title": "Spustiť skript"
+      },
+      "change_property_block": {
+        "title": "Zmeniť vlastnosť"
+      },
+      "validation": {
+        "delete_only_action": "Pred odstránením jedinej akcie vypnite automatizáciu."
+      }
+    },
+    "conjunctions": {
+      "and": "A",
+      "or": "Alebo",
+      "if": "Ak",
+      "then": "Potom"
+    },
+    "enable": {
+      "alert": "Stlačte 'Povoliť', keď je vaša automatizácia dokončená. Po povolení bude automatizácia pripravená na spustenie.",
+      "validation": {
+        "required": "Automatizácia musí mať spúšťač a aspoň jednu akciu, aby mohla byť povolená."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Automatizácia musí byť pred odstránením vypnutá."
+      }
+    },
+    "table": {
+      "title": "Názov automatizácie",
+      "scope": "Rozsah",
+      "projects": "Projekty",
+      "last_run_on": "Posledné spustenie",
+      "created_on": "Vytvorené",
+      "last_updated_on": "Posledná aktualizácia",
+      "last_run_status": "Stav posledného spustenia",
+      "average_duration": "Priemerné trvanie",
+      "owner": "Vlastník",
+      "executions": "Spustenia"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Vytvoriť automatizáciu",
+        "update": "Aktualizovať automatizáciu"
+      },
+      "title": {
+        "placeholder": "Pomenujte svoju automatizáciu.",
+        "required_error": "Názov je povinný"
+      },
+      "description": {
+        "placeholder": "Opíšte svoju automatizáciu."
+      },
+      "submit_button": {
+        "create": "Vytvoriť automatizáciu",
+        "update": "Aktualizovať automatizáciu"
+      }
+    },
+    "delete_modal": {
+      "heading": "Odstrániť automatizáciu"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Zobraziť chyby",
+        "all": "Všetko",
+        "only_activity": "Len aktivita",
+        "only_run_history": "Len história spustení"
+      },
+      "run_history": {
+        "initiator": "Iniciátor"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Úspech!",
+          "message": "Automatizácia bola úspešne vytvorená."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Vytvorenie automatizácie zlyhalo."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Úspech!",
+          "message": "Automatizácia bola úspešne aktualizovaná."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Aktualizácia automatizácie zlyhala."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Úspech!",
+          "message": "Automatizácia bola úspešne povolená."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Povolenie automatizácie zlyhalo."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Úspech!",
+          "message": "Automatizácia bola úspešne vypnutá."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Vypnutie automatizácie zlyhalo."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Automatizácia odstránená",
+          "message": "{name}, automatizácia, bola odstránená z vášho projektu."
+        },
+        "error": {
+          "title": "Túto automatizáciu sa tentokrát nepodarilo odstrániť.",
+          "message": "Skúste ju odstrániť znova alebo sa k nej vráťte neskôr. Ak sa vám ju stále nedarí odstrániť, kontaktujte nás."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Chyba!",
+            "message": "Vytvorenie akcie zlyhalo. Skúste to znova!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Chyba!",
+            "message": "Aktualizácia akcie zlyhala. Skúste to znova!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Zatiaľ nie sú žiadne automatizácie na zobrazenie.",
+        "description": "Automatizácie vám pomáhajú eliminovať opakujúce sa úlohy nastavením spúšťačov, podmienok a akcií. Vytvorte jednu, aby ste ušetrili čas a udržali prácu v plynulom chode."
+      },
+      "upgrade": {
+        "title": "Automatizácie",
+        "description": "Automatizácie sú spôsob automatizácie úloh vo vašom projekte.",
+        "sub_description": "Získajte späť 80% svojho administratívneho času, keď používate automatizácie."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Vyberte projekty, v ktorých sa má táto automatizácia spúšťať",
+        "all_projects": {
+          "label": "Všetky projekty",
+          "description": "Automatizácia sa bude spúšťať pre všetky projekty v pracovnom priestore."
+        },
+        "select_projects": {
+          "label": "Vybrať projekty",
+          "description": "Automatizácia sa bude spúšťať pre vybrané projekty v pracovnom priestore.",
+          "placeholder": "Vybrať projekty"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Automatizácie",
+        "title": "Automatizácie",
+        "description": "Štandardizujte procesy v celom pracovnom priestore pomocou globálnych automatizácií."
+      },
+      "table": {
+        "scope": {
+          "global": "Globálny",
+          "project": {
+            "label": "Projekt",
+            "multiple": "Viacero",
+            "all": "Všetky"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/common.json b/packages/i18n/src/locales/sk/common.json
new file mode 100644
index 0000000..4fc339c
--- /dev/null
+++ b/packages/i18n/src/locales/sk/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Pracujeme na tom. Ak potrebujete okamžitú pomoc,",
+    "reach_out_to_us": "kontaktujte nás",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Inak skúste občas obnoviť stránku alebo navštívte našu",
+    "status_page": "stránku stavu"
+  },
+  "submit": "Odoslať",
+  "cancel": "Zrušiť",
+  "loading": "Načítavanie",
+  "error": "Chyba",
+  "success": "Úspech",
+  "warning": "Varovanie",
+  "info": "Informácia",
+  "close": "Zatvoriť",
+  "yes": "Áno",
+  "no": "Nie",
+  "ok": "OK",
+  "name": "Názov",
+  "unknown_user": "Neznámy používateľ",
+  "description": "Popis",
+  "search": "Hľadať",
+  "add_member": "Pridať člena",
+  "adding_members": "Pridávanie členov",
+  "remove_member": "Odstrániť člena",
+  "add_members": "Pridať členov",
+  "adding_member": "Pridávanie členov",
+  "remove_members": "Odstrániť členov",
+  "add": "Pridať",
+  "adding": "Pridávanie",
+  "remove": "Odstrániť",
+  "add_new": "Pridať nový",
+  "remove_selected": "Odstrániť vybrané",
+  "first_name": "Krstné meno",
+  "last_name": "Priezvisko",
+  "email": "E-mail",
+  "display_name": "Zobrazované meno",
+  "role": "Rola",
+  "timezone": "Časové pásmo",
+  "avatar": "Profilový obrázok",
+  "cover_image": "Úvodný obrázok",
+  "password": "Heslo",
+  "change_cover": "Zmeniť úvodný obrázok",
+  "language": "Jazyk",
+  "saving": "Ukladanie",
+  "save_changes": "Uložiť zmeny",
+  "deactivate_account": "Deaktivovať účet",
+  "deactivate_account_description": "Pri deaktivácii účtu budú všetky dáta a prostriedky v rámci tohto účtu trvalo odstránené a nedajú sa obnoviť.",
+  "profile_settings": "Nastavenia profilu",
+  "your_account": "Váš účet",
+  "security": "Zabezpečenie",
+  "activity": "Aktivita",
+  "activity_empty_state": {
+    "no_activity": "Zatiaľ žiadna aktivita",
+    "no_transitions": "Zatiaľ žiadne prechody",
+    "no_comments": "Zatiaľ žiadne komentáre",
+    "no_worklogs": "Zatiaľ žiadne záznamy práce",
+    "no_history": "Zatiaľ žiadna história"
+  },
+  "preferences": "Predvoľby",
+  "language_and_time": "Jazyk a čas",
+  "notifications": "Oznámenia",
+  "workspaces": "Pracovné priestory",
+  "create_workspace": "Vytvoriť pracovný priestor",
+  "invitations": "Pozvánky",
+  "summary": "Zhrnutie",
+  "assigned": "Priradené",
+  "created": "Vytvorené",
+  "subscribed": "Odobierané",
+  "you_do_not_have_the_permission_to_access_this_page": "Nemáte oprávnenie na prístup k tejto stránke.",
+  "something_went_wrong_please_try_again": "Niečo sa pokazilo. Skúste to prosím znova.",
+  "load_more": "Načítať viac",
+  "select_or_customize_your_interface_color_scheme": "Vyberte alebo prispôsobte farebnú schému rozhrania.",
+  "timezone_setting": "Aktuálne nastavenie časového pásma.",
+  "language_setting": "Zvoľte jazyk používaný v používateľskom rozhraní.",
+  "settings_moved_to_preferences": "Nastavenia časového pásma a jazyka boli presunuté do predvolieb.",
+  "go_to_preferences": "Prejsť na predvoľby",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Vyberte štýl pohybu kurzora, ktorý vám vyhovuje.",
+  "theme": "Téma",
+  "smooth_cursor": "Plynulý kurzor",
+  "system_preference": "Systémové preferencie",
+  "light": "Svetlé",
+  "dark": "Tmavé",
+  "light_contrast": "Svetlý vysoký kontrast",
+  "dark_contrast": "Tmavý vysoký kontrast",
+  "custom": "Vlastná téma",
+  "select_your_theme": "Vyberte tému",
+  "customize_your_theme": "Prispôsobte si tému",
+  "background_color": "Farba pozadia",
+  "text_color": "Farba textu",
+  "primary_color": "Hlavná farba (téma)",
+  "sidebar_background_color": "Farba pozadia bočného panela",
+  "sidebar_text_color": "Farba textu bočného panela",
+  "set_theme": "Nastaviť tému",
+  "enter_a_valid_hex_code_of_6_characters": "Zadajte platný hexadecimálny kód so 6 znakmi",
+  "background_color_is_required": "Farba pozadia je povinná",
+  "text_color_is_required": "Farba textu je povinná",
+  "primary_color_is_required": "Hlavná farba je povinná",
+  "sidebar_background_color_is_required": "Farba pozadia bočného panela je povinná",
+  "sidebar_text_color_is_required": "Farba textu bočného panela je povinná",
+  "updating_theme": "Aktualizácia témy",
+  "theme_updated_successfully": "Téma bola úspešne aktualizovaná",
+  "failed_to_update_the_theme": "Aktualizácia témy zlyhala",
+  "email_notifications": "E-mailové oznámenia",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Majte prehľad o pracovných položkách, ktoré odoberáte. Aktivujte toto pre zasielanie oznámení.",
+  "email_notification_setting_updated_successfully": "Nastavenie e-mailových oznámení bolo úspešne aktualizované",
+  "failed_to_update_email_notification_setting": "Aktualizácia nastavenia e-mailových oznámení zlyhala",
+  "notify_me_when": "Upozorniť ma, keď",
+  "property_changes": "Zmeny vlastností",
+  "property_changes_description": "Upozorniť ma, keď sa zmenia vlastnosti pracovných položiek ako priradenie, priorita, odhady alebo čokoľvek iné.",
+  "state_change": "Zmena stavu",
+  "state_change_description": "Upozorniť ma, keď sa pracovná položka presunie do iného stavu",
+  "issue_completed": "Pracovná položka dokončená",
+  "issue_completed_description": "Upozorniť ma iba pri dokončení pracovnej položky",
+  "comments": "Komentáre",
+  "comments_description": "Upozorniť ma, keď niekto pridá komentár k pracovnej položke",
+  "mentions": "Zmienky",
+  "mentions_description": "Upozorniť ma iba, keď ma niekto spomenie v komentároch alebo popise",
+  "old_password": "Staré heslo",
+  "general_settings": "Všeobecné nastavenia",
+  "sign_out": "Odhlásiť sa",
+  "signing_out": "Odhlasovanie",
+  "active_cycles": "Aktívne cykly",
+  "active_cycles_description": "Sledujte cykly naprieč projektmi, monitorujte vysoko prioritné pracovné položky a zamerajte sa na cykly vyžadujúce pozornosť.",
+  "on_demand_snapshots_of_all_your_cycles": "Okamžité snapshoty všetkých vašich cyklov",
+  "upgrade": "Upgradovať",
+  "10000_feet_view": "Pohľad z výšky 10 000 stôp na všetky aktívne cykly.",
+  "10000_feet_view_description": "Priblížte si všetky prebiehajúce cykly naprieč všetkými projektmi naraz, namiesto prepínania medzi cyklami v každom projekte.",
+  "get_snapshot_of_each_active_cycle": "Získajte snapshot každého aktívneho cyklu.",
+  "get_snapshot_of_each_active_cycle_description": "Sledujte kľúčové metriky pre všetky aktívne cykly, zistite ich priebeh a porovnajte rozsah s termínmi.",
+  "compare_burndowns": "Porovnajte burndowny.",
+  "compare_burndowns_description": "Sledujte výkonnosť tímov prostredníctvom prehľadu burndown reportov každého cyklu.",
+  "quickly_see_make_or_break_issues": "Rýchlo zistite kľúčové pracovné položky.",
+  "quickly_see_make_or_break_issues_description": "Pozrite si vysoko prioritné pracovné položky pre každý cyklus vzhľadom na termíny. Zobrazte všetky jedným kliknutím.",
+  "zoom_into_cycles_that_need_attention": "Zamerajte sa na cykly vyžadujúce pozornosť.",
+  "zoom_into_cycles_that_need_attention_description": "Preskúmajte stav akéhokoľvek cyklu, ktorý nespĺňa očakávania, jedným kliknutím.",
+  "stay_ahead_of_blockers": "Buďte o krok pred prekážkami.",
+  "stay_ahead_of_blockers_description": "Identifikujte problémy medzi projektmi a zistite závislosti medzi cyklami, ktoré nie sú z iných pohľadov zrejmé.",
+  "analytics": "Analytika",
+  "workspace_invites": "Pozvánky do pracovného priestoru",
+  "enter_god_mode": "Vstúpiť do božského režimu",
+  "workspace_logo": "Logo pracovného priestoru",
+  "new_issue": "Nová pracovná položka",
+  "your_work": "Vaša práca",
+  "drafts": "Koncepty",
+  "projects": "Projekty",
+  "views": "Pohľady",
+  "archives": "Archívy",
+  "settings": "Nastavenia",
+  "failed_to_move_favorite": "Presunutie obľúbeného zlyhalo",
+  "favorites": "Obľúbené",
+  "no_favorites_yet": "Zatiaľ žiadne obľúbené",
+  "create_folder": "Vytvoriť priečinok",
+  "new_folder": "Nový priečinok",
+  "favorite_updated_successfully": "Obľúbené bolo úspešne aktualizované",
+  "favorite_created_successfully": "Obľúbené bolo úspešne vytvorené",
+  "folder_already_exists": "Priečinok už existuje",
+  "folder_name_cannot_be_empty": "Názov priečinka nemôže byť prázdny",
+  "something_went_wrong": "Niečo sa pokazilo",
+  "failed_to_reorder_favorite": "Zmena poradia obľúbeného zlyhala",
+  "favorite_removed_successfully": "Obľúbené bolo úspešne odstránené",
+  "failed_to_create_favorite": "Vytvorenie obľúbeného zlyhalo",
+  "failed_to_rename_favorite": "Premenovanie obľúbeného zlyhalo",
+  "project_link_copied_to_clipboard": "Odkaz na projekt bol skopírovaný do schránky",
+  "link_copied": "Odkaz skopírovaný",
+  "add_project": "Pridať projekt",
+  "create_project": "Vytvoriť projekt",
+  "failed_to_remove_project_from_favorites": "Nepodarilo sa odstrániť projekt z obľúbených. Skúste to prosím znova.",
+  "project_created_successfully": "Projekt bol úspešne vytvorený",
+  "project_created_successfully_description": "Projekt bol úspešne vytvorený. Teraz môžete začať pridávať pracovné položky.",
+  "project_name_already_taken": "Názov projektu je už použitý.",
+  "project_name_cannot_contain_special_characters": "Názov projektu nesmie obsahovať špeciálne znaky.",
+  "project_identifier_already_taken": "Identifikátor projektu je už použitý.",
+  "project_cover_image_alt": "Úvodný obrázok projektu",
+  "name_is_required": "Názov je povinný",
+  "title_should_be_less_than_255_characters": "Názov by mal byť kratší ako 255 znakov",
+  "project_name": "Názov projektu",
+  "project_id_must_be_at_least_1_character": "ID projektu musí mať aspoň 1 znak",
+  "project_id_must_be_at_most_5_characters": "ID projektu môže mať maximálne 5 znakov",
+  "project_id": "ID projektu",
+  "project_id_tooltip_content": "Pomáha jednoznačne identifikovať pracovné položky v projekte. Max. 50 znakov.",
+  "description_placeholder": "Popis",
+  "only_alphanumeric_non_latin_characters_allowed": "Sú povolené iba alfanumerické a nelatinské znaky.",
+  "project_id_is_required": "ID projektu je povinné",
+  "project_id_allowed_char": "Sú povolené iba alfanumerické a nelatinské znaky.",
+  "project_id_min_char": "ID projektu musí mať aspoň 1 znak",
+  "project_id_max_char": "ID projektu môže mať maximálne {max} znakov",
+  "project_description_placeholder": "Zadajte popis projektu",
+  "select_network": "Vybrať sieť",
+  "lead": "Vedúci",
+  "date_range": "Rozsah dát",
+  "private": "Súkromný",
+  "public": "Verejný",
+  "accessible_only_by_invite": "Prístupné iba na pozvanie",
+  "anyone_in_the_workspace_except_guests_can_join": "Ktokoľvek v pracovnom priestore okrem hostí sa môže pripojiť",
+  "creating": "Vytváranie",
+  "creating_project": "Vytváranie projektu",
+  "adding_project_to_favorites": "Pridávanie projektu do obľúbených",
+  "project_added_to_favorites": "Projekt pridaný do obľúbených",
+  "couldnt_add_the_project_to_favorites": "Nepodarilo sa pridať projekt do obľúbených. Skúste to prosím znova.",
+  "removing_project_from_favorites": "Odstraňovanie projektu z obľúbených",
+  "project_removed_from_favorites": "Projekt odstránený z obľúbených",
+  "couldnt_remove_the_project_from_favorites": "Nepodarilo sa odstrániť projekt z obľúbených. Skúste to prosím znova.",
+  "add_to_favorites": "Pridať do obľúbených",
+  "remove_from_favorites": "Odstrániť z obľúbených",
+  "publish_project": "Publikovať projekt",
+  "publish": "Publikovať",
+  "copy_link": "Kopírovať odkaz",
+  "leave_project": "Opustiť projekt",
+  "join_the_project_to_rearrange": "Pripojte sa k projektu pre zmenu usporiadania",
+  "drag_to_rearrange": "Pretiahnite pre usporiadanie",
+  "congrats": "Gratulujeme!",
+  "open_project": "Otvoriť projekt",
+  "issues": "Pracovné položky",
+  "cycles": "Cykly",
+  "modules": "Moduly",
+  "pages": "Stránky",
+  "intake": "Príjem",
+  "renew": "Obnoviť",
+  "preview": "Náhľad",
+  "time_tracking": "Sledovanie času",
+  "work_management": "Správa práce",
+  "projects_and_issues": "Projekty a pracovné položky",
+  "projects_and_issues_description": "Aktivujte alebo deaktivujte tieto funkcie v projekte.",
+  "cycles_description": "Časovo ohraničte prácu podľa projektu a upravte obdobie podľa potreby. Jeden cyklus môže mať 2 týždne, ďalší 1 týždeň.",
+  "modules_description": "Organizujte prácu do podprojektov s určenými vedúcimi a priradenými osobami.",
+  "views_description": "Uložte vlastné triedenia, filtre a možnosti zobrazenia alebo ich zdieľajte so svojím tímom.",
+  "pages_description": "Vytvárajte a upravujte voľne štruktúrovaný obsah – poznámky, dokumenty, čokoľvek.",
+  "intake_description": "Umožnite nečlenom zdieľať chyby, spätnú väzbu a návrhy bez narušenia vášho pracovného postupu.",
+  "time_tracking_description": "Zaznamenajte čas strávený na pracovných položkách a projektoch.",
+  "work_management_description": "Spravujte svoju prácu a projekty jednoducho.",
+  "documentation": "Dokumentácia",
+  "message_support": "Kontaktovať podporu",
+  "contact_sales": "Kontaktovať predaj",
+  "hyper_mode": "Hyper režim",
+  "keyboard_shortcuts": "Klávesové skratky",
+  "whats_new": "Čo je nové?",
+  "version": "Verzia",
+  "we_are_having_trouble_fetching_the_updates": "Máme problém s načítaním aktualizácií.",
+  "our_changelogs": "naše zmenové protokoly",
+  "for_the_latest_updates": "pre najnovšie aktualizácie.",
+  "please_visit": "Navštívte",
+  "docs": "Dokumentáciu",
+  "full_changelog": "Úplný zmenový protokol",
+  "support": "Podpora",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Poháňa Plane Pages",
+  "please_select_at_least_one_invitation": "Vyberte aspoň jednu pozvánku.",
+  "please_select_at_least_one_invitation_description": "Vyberte aspoň jednu pozvánku na pripojenie do pracovného priestoru.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Vidíme, že vás niekto pozval do pracovného priestoru",
+  "join_a_workspace": "Pripojiť sa k pracovnému priestoru",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Vidíme, že vás niekto pozval do pracovného priestoru",
+  "join_a_workspace_description": "Pripojiť sa k pracovnému priestoru",
+  "accept_and_join": "Prijať a pripojiť sa",
+  "go_home": "Domov",
+  "no_pending_invites": "Žiadne čakajúce pozvánky",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Tu uvidíte, ak vás niekto pozve do pracovného priestoru",
+  "back_to_home": "Späť na domovskú stránku",
+  "workspace_name": "názov-pracovného-priestoru",
+  "deactivate_your_account": "Deaktivovať váš účet",
+  "deactivate_your_account_description": "Po deaktivácii nebudete môcť byť priradení k pracovným položkám a nebude vám účtovaný poplatok za pracovný priestor. Na opätovnú aktiváciu účtu budete potrebovať pozvánku do pracovného priestoru na tento e-mail.",
+  "deactivating": "Deaktivácia",
+  "confirm": "Potvrdiť",
+  "confirming": "Potvrdzovanie",
+  "draft_created": "Koncept vytvorený",
+  "issue_created_successfully": "Pracovná položka bola úspešne vytvorená",
+  "draft_creation_failed": "Vytvorenie konceptu zlyhalo",
+  "issue_creation_failed": "Vytvorenie pracovnej položky zlyhalo",
+  "draft_issue": "Koncept pracovnej položky",
+  "issue_updated_successfully": "Pracovná položka bola úspešne aktualizovaná",
+  "issue_could_not_be_updated": "Aktualizácia pracovnej položky zlyhala",
+  "create_a_draft": "Vytvoriť koncept",
+  "save_to_drafts": "Uložiť do konceptov",
+  "save": "Uložiť",
+  "update": "Aktualizovať",
+  "updating": "Aktualizácia",
+  "create_new_issue": "Vytvoriť novú pracovnú položku",
+  "editor_is_not_ready_to_discard_changes": "Editor nie je pripravený zahodiť zmeny",
+  "failed_to_move_issue_to_project": "Presunutie pracovnej položky do projektu zlyhalo",
+  "create_more": "Vytvoriť viac",
+  "add_to_project": "Pridať do projektu",
+  "discard": "Zahodiť",
+  "duplicate_issue_found": "Nájdená duplicitná pracovná položka",
+  "duplicate_issues_found": "Nájdené duplicitné pracovné položky",
+  "no_matching_results": "Žiadne zodpovedajúce výsledky",
+  "title_is_required": "Názov je povinný",
+  "title": "Názov",
+  "state": "Stav",
+  "transition": "Prechod",
+  "history": "História",
+  "priority": "Priorita",
+  "none": "Žiadna",
+  "urgent": "Naliehavá",
+  "high": "Vysoká",
+  "medium": "Stredná",
+  "low": "Nízka",
+  "members": "Členovia",
+  "assignee": "Priradené",
+  "assignees": "Priradení",
+  "subscriber": "{count, plural, one{# Odberateľ} few{# Odberatelia} other{# Odberateľov}}",
+  "you": "Vy",
+  "labels": "Štítky",
+  "create_new_label": "Vytvoriť nový štítok",
+  "label_name": "Názov štítku",
+  "failed_to_create_label": "Vytvorenie štítku zlyhalo. Skúste to prosím znova.",
+  "start_date": "Dátum začiatku",
+  "end_date": "Dátum ukončenia",
+  "due_date": "Termín",
+  "target_date": "Cieľový dátum",
+  "estimate": "Odhad",
+  "change_parent_issue": "Zmeniť nadradenú pracovnú položku",
+  "remove_parent_issue": "Odstrániť nadradenú pracovnú položku",
+  "add_parent": "Pridať nadradenú",
+  "loading_members": "Načítavam členov",
+  "view_link_copied_to_clipboard": "Odkaz na pohľad bol skopírovaný do schránky.",
+  "required": "Povinné",
+  "optional": "Voliteľné",
+  "Cancel": "Zrušiť",
+  "edit": "Upraviť",
+  "archive": "Archivovať",
+  "restore": "Obnoviť",
+  "open_in_new_tab": "Otvoriť na novej karte",
+  "delete": "Zmazať",
+  "deleting": "Mazanie",
+  "make_a_copy": "Vytvoriť kópiu",
+  "move_to_project": "Presunúť do projektu",
+  "good": "Dobrý",
+  "morning": "ráno",
+  "afternoon": "popoludnie",
+  "evening": "večer",
+  "show_all": "Zobraziť všetko",
+  "show_less": "Zobraziť menej",
+  "no_data_yet": "Zatiaľ žiadne dáta",
+  "syncing": "Synchronizácia",
+  "add_work_item": "Pridať pracovnú položku",
+  "advanced_description_placeholder": "Stlačte '/' pre príkazy",
+  "create_work_item": "Vytvoriť pracovnú položku",
+  "attachments": "Prílohy",
+  "declining": "Odmietanie",
+  "declined": "Odmietnuté",
+  "decline": "Odmietnuť",
+  "unassigned": "Nepriradené",
+  "work_items": "Pracovné položky",
+  "add_link": "Pridať odkaz",
+  "points": "Body",
+  "no_assignee": "Žiadne priradenie",
+  "no_assignees_yet": "Zatiaľ žiadni priradení",
+  "no_labels_yet": "Zatiaľ žiadne štítky",
+  "ideal": "Ideálne",
+  "current": "Aktuálne",
+  "no_matching_members": "Žiadni zodpovedajúci členovia",
+  "leaving": "Opúšťanie",
+  "removing": "Odstraňovanie",
+  "leave": "Opustiť",
+  "refresh": "Obnoviť",
+  "refreshing": "Obnovovanie",
+  "refresh_status": "Obnoviť stav",
+  "prev": "Predchádzajúci",
+  "next": "Ďalší",
+  "re_generating": "Znova generovanie",
+  "re_generate": "Znova generovať",
+  "re_generate_key": "Znova generovať kľúč",
+  "export": "Exportovať",
+  "member": "{count, plural, one{# člen} few{# členovia} other{# členov}}",
+  "new_password_must_be_different_from_old_password": "Nové heslo musí byť odlišné od starého hesla",
+  "edited": "Upravené",
+  "bot": "Bot",
+  "settings_description": "Spravujte predvoľby svojho účtu, pracovného priestoru a projektu na jednom mieste. Prepínajte medzi kartami a jednoducho konfigurujte.",
+  "back_to_workspace": "Späť do pracovného priestoru",
+  "upgrade_request": "Požadujte od správcu pracovného priestoru upgrade.",
+  "copied_to_clipboard": "Skopírované do schránky",
+  "copied_to_clipboard_description": "URL bola úspešne skopírovaná do schránky",
+  "toast": {
+    "success": "Úspech!",
+    "error": "Chyba!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Odkaz vytvorený",
+        "message": "Odkaz bol úspešne vytvorený"
+      },
+      "not_created": {
+        "title": "Odkaz nebol vytvorený",
+        "message": "Odkaz sa nepodarilo vytvoriť"
+      },
+      "updated": {
+        "title": "Odkaz aktualizovaný",
+        "message": "Odkaz bol úspešne aktualizovaný"
+      },
+      "not_updated": {
+        "title": "Odkaz nebol aktualizovaný",
+        "message": "Odkaz sa nepodarilo aktualizovať"
+      },
+      "removed": {
+        "title": "Odkaz odstránený",
+        "message": "Odkaz bol úspešne odstránený"
+      },
+      "not_removed": {
+        "title": "Odkaz nebol odstránený",
+        "message": "Odkaz sa nepodarilo odstrániť"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL je neplatná",
+        "placeholder": "Zadajte alebo vložte URL"
+      },
+      "title": {
+        "text": "Zobrazovaný názov",
+        "placeholder": "Ako chcete tento odkaz vidieť"
+      }
+    }
+  },
+  "common": {
+    "all": "Všetko",
+    "no_items_in_this_group": "V tejto skupine nie sú žiadne položky",
+    "drop_here_to_move": "Presuňte sem na presunutie",
+    "states": "Stavy",
+    "state": "Stav",
+    "state_groups": "Skupiny stavov",
+    "state_group": "Skupina stavov",
+    "priorities": "Priority",
+    "priority": "Priorita",
+    "team_project": "Tímový projekt",
+    "project": "Projekt",
+    "cycle": "Cyklus",
+    "cycles": "Cykly",
+    "module": "Modul",
+    "modules": "Moduly",
+    "labels": "Štítky",
+    "label": "Štítok",
+    "admins": "Administrátori",
+    "users": "Používatelia",
+    "guests": "Hostia",
+    "assignees": "Priradení",
+    "assignee": "Priradené",
+    "created_by": "Vytvoril",
+    "none": "Žiadne",
+    "link": "Odkaz",
+    "estimates": "Odhady",
+    "estimate": "Odhad",
+    "created_at": "Vytvorené dňa",
+    "updated_at": "Aktualizované dňa",
+    "completed_at": "Dokončené dňa",
+    "layout": "Rozloženie",
+    "filters": "Filtre",
+    "display": "Zobrazenie",
+    "load_more": "Načítať viac",
+    "activity": "Aktivita",
+    "analytics": "Analytika",
+    "dates": "Dáta",
+    "success": "Úspech!",
+    "something_went_wrong": "Niečo sa pokazilo",
+    "error": {
+      "label": "Chyba!",
+      "message": "Došlo k chybe. Skúste to prosím znova."
+    },
+    "group_by": "Zoskupiť podľa",
+    "epic": "Epika",
+    "epics": "Epiky",
+    "work_item": "Pracovná položka",
+    "work_items": "Pracovné položky",
+    "sub_work_item": "Podriadená pracovná položka",
+    "views": "Pohľady",
+    "pages": "Stránky",
+    "add": "Pridať",
+    "warning": "Varovanie",
+    "updating": "Aktualizácia",
+    "adding": "Pridávanie",
+    "update": "Aktualizovať",
+    "creating": "Vytváranie",
+    "create": "Vytvoriť",
+    "cancel": "Zrušiť",
+    "description": "Popis",
+    "title": "Názov",
+    "attachment": "Príloha",
+    "general": "Všeobecné",
+    "features": "Funkcie",
+    "automation": "Automatizácia",
+    "project_name": "Názov projektu",
+    "project_id": "ID projektu",
+    "project_timezone": "Časové pásmo projektu",
+    "created_on": "Vytvorené dňa",
+    "updated_on": "Aktualizované",
+    "completed_on": "Completed on",
+    "update_project": "Aktualizovať projekt",
+    "identifier_already_exists": "Identifikátor už existuje",
+    "add_more": "Pridať viac",
+    "defaults": "Predvolené",
+    "add_label": "Pridať štítok",
+    "customize_time_range": "Prispôsobiť časový rozsah",
+    "loading": "Načítavanie",
+    "attachments": "Prílohy",
+    "property": "Vlastnosť",
+    "properties": "Vlastnosti",
+    "parent": "Nadradený",
+    "page": "Stránka",
+    "remove": "Odstrániť",
+    "archiving": "Archivovanie",
+    "archive": "Archivovať",
+    "access": {
+      "public": "Verejný",
+      "private": "Súkromný"
+    },
+    "done": "Hotovo",
+    "sub_work_items": "Podriadené pracovné položky",
+    "comment": "Komentár",
+    "workspace_level": "Úroveň pracovného priestoru",
+    "order_by": {
+      "label": "Triediť podľa",
+      "manual": "Manuálne - Poradie",
+      "last_created": "Naposledy vytvorené",
+      "last_updated": "Naposledy aktualizované",
+      "start_date": "Dátum začiatku",
+      "due_date": "Termín",
+      "asc": "Vzostupne",
+      "desc": "Zostupne",
+      "updated_on": "Aktualizované dňa"
+    },
+    "sort": {
+      "asc": "Vzostupne",
+      "desc": "Zostupne",
+      "created_on": "Vytvorené dňa",
+      "updated_on": "Aktualizované dňa"
+    },
+    "comments": "Komentáre",
+    "updates": "Aktualizácie",
+    "additional_updates": "Ďalšie aktualizácie",
+    "clear_all": "Vymazať všetko",
+    "copied": "Skopírované!",
+    "link_copied": "Odkaz skopírovaný!",
+    "link_copied_to_clipboard": "Odkaz skopírovaný do schránky",
+    "copied_to_clipboard": "Odkaz na pracovnú položku bol skopírovaný do schránky",
+    "branch_name_copied_to_clipboard": "Názov vetvy skopírovaný do schránky",
+    "is_copied_to_clipboard": "Pracovná položka skopírovaná do schránky",
+    "no_links_added_yet": "Zatiaľ neboli pridané žiadne odkazy",
+    "add_link": "Pridať odkaz",
+    "links": "Odkazy",
+    "go_to_workspace": "Prejsť do pracovného priestoru",
+    "progress": "Pokrok",
+    "optional": "Voliteľné",
+    "join": "Pripojiť sa",
+    "go_back": "Späť",
+    "continue": "Pokračovať",
+    "resend": "Znova odoslať",
+    "relations": "Vzťahy",
+    "dependencies": "Závislosti",
+    "errors": {
+      "default": {
+        "title": "Chyba!",
+        "message": "Niečo sa pokazilo. Skúste to prosím znova."
+      },
+      "required": "Toto pole je povinné",
+      "entity_required": "{entity} je povinná",
+      "restricted_entity": "{entity} je obmedzený"
+    },
+    "update_link": "Aktualizovať odkaz",
+    "attach": "Pripojiť",
+    "create_new": "Vytvoriť nový",
+    "add_existing": "Pridať existujúci",
+    "type_or_paste_a_url": "Zadajte alebo vložte URL",
+    "url_is_invalid": "URL je neplatná",
+    "display_title": "Zobrazovaný názov",
+    "link_title_placeholder": "Ako chcete tento odkaz vidieť",
+    "url": "URL",
+    "side_peek": "Bočný náhľad",
+    "modal": "Modálne okno",
+    "full_screen": "Celá obrazovka",
+    "close_peek_view": "Zatvoriť náhľad",
+    "toggle_peek_view_layout": "Prepnúť rozloženie náhľadu",
+    "options": "Možnosti",
+    "duration": "Trvanie",
+    "today": "Dnes",
+    "week": "Týždeň",
+    "month": "Mesiac",
+    "quarter": "Kvartál",
+    "press_for_commands": "Stlačte '/' pre príkazy",
+    "click_to_add_description": "Kliknite pre pridanie popisu",
+    "on_track": "Na správnej ceste",
+    "off_track": "Mimo plán",
+    "at_risk": "V ohrození",
+    "timeline": "Časová os",
+    "completion": "Dokončenie",
+    "upcoming": "Nadchádzajúce",
+    "completed": "Dokončené",
+    "in_progress": "Prebieha",
+    "planned": "Plánované",
+    "paused": "Pozastavené",
+    "search": {
+      "label": "Hľadať",
+      "placeholder": "Zadajte hľadaný výraz",
+      "no_matches_found": "Nenašli sa žiadne zhody",
+      "no_matching_results": "Žiadne zodpovedajúce výsledky",
+      "min_chars": "Pre vyhľadávanie zadajte aspoň {count} znakov",
+      "error": "Chyba pri načítavaní výsledkov vyhľadávania",
+      "no_results": {
+        "title": "Žiadne zodpovedajúce výsledky",
+        "description": "Odstráňte kritériá vyhľadávania, aby ste videli všetky výsledky"
+      }
+    },
+    "actions": {
+      "edit": "Upraviť",
+      "make_a_copy": "Vytvoriť kópiu",
+      "open_in_new_tab": "Otvoriť na novej karte",
+      "copy_link": "Kopírovať odkaz",
+      "copy_branch_name": "Kopírovať názov vetvy",
+      "archive": "Archivovať",
+      "restore": "Obnoviť",
+      "delete": "Zmazať",
+      "remove_relation": "Odstrániť vzťah",
+      "subscribe": "Odoberať",
+      "unsubscribe": "Zrušiť odber",
+      "clear_sorting": "Vymazať triedenie",
+      "show_weekends": "Zobraziť víkendy",
+      "enable": "Povoliť",
+      "disable": "Zakázať",
+      "copy_markdown": "Kopírovať markdown",
+      "reply": "Odpovedať"
+    },
+    "name": "Názov",
+    "discard": "Zahodiť",
+    "confirm": "Potvrdiť",
+    "confirming": "Potvrdzovanie",
+    "read_the_docs": "Prečítajte si dokumentáciu",
+    "default": "Predvolené",
+    "active": "Aktívne",
+    "enabled": "Povolené",
+    "disabled": "Zakázané",
+    "mandate": "Mandát",
+    "mandatory": "Povinné",
+    "global": "Globálny",
+    "yes": "Áno",
+    "no": "Nie",
+    "please_wait": "Prosím čakajte",
+    "enabling": "Povoľovanie",
+    "disabling": "Zakazovanie",
+    "beta": "Beta",
+    "or": "alebo",
+    "next": "Ďalej",
+    "back": "Späť",
+    "retry": "Skúsiť znova",
+    "cancelling": "Rušenie",
+    "configuring": "Konfigurácia",
+    "clear": "Vymazať",
+    "import": "Importovať",
+    "connect": "Pripojiť",
+    "authorizing": "Autorizácia",
+    "processing": "Spracovanie",
+    "no_data_available": "Nie sú k dispozícii žiadne dáta",
+    "from": "od {name}",
+    "authenticated": "Overené",
+    "select": "Vybrať",
+    "upgrade": "Upgradovať",
+    "add_seats": "Pridať miesta",
+    "projects": "Projekty",
+    "workspace": "Pracovný priestor",
+    "workspaces": "Pracovné priestory",
+    "team": "Tím",
+    "teams": "Tímy",
+    "entity": "Entita",
+    "entities": "Entity",
+    "task": "Úloha",
+    "tasks": "Úlohy",
+    "section": "Sekcia",
+    "sections": "Sekcie",
+    "edit": "Upraviť",
+    "connecting": "Pripájanie",
+    "connected": "Pripojené",
+    "disconnect": "Odpojiť",
+    "disconnecting": "Odpájanie",
+    "installing": "Inštalácia",
+    "install": "Nainštalovať",
+    "reset": "Resetovať",
+    "live": "Naživo",
+    "change_history": "História zmien",
+    "coming_soon": "Už čoskoro",
+    "member": "Člen",
+    "members": "Členovia",
+    "you": "Vy",
+    "upgrade_cta": {
+      "higher_subscription": "Upgradovať na vyššie predplatné",
+      "talk_to_sales": "Porozprávajte sa s predajom"
+    },
+    "category": "Kategória",
+    "categories": "Kategórie",
+    "saving": "Ukladanie",
+    "save_changes": "Uložiť zmeny",
+    "delete": "Zmazať",
+    "deleting": "Mazanie",
+    "pending": "Čakajúce",
+    "invite": "Pozvať",
+    "view": "Zobraziť",
+    "deactivated_user": "Deaktivovaný používateľ",
+    "apply": "Použiť",
+    "applying": "Používanie",
+    "overview": "Prehľad",
+    "no_of": "Počet {entity}",
+    "resolved": "Vyriešené",
+    "get_started": "Začať",
+    "worklogs": "Pracovné záznamy",
+    "project_updates": "Aktualizácie projektov",
+    "workflows": "Vorkflou",
+    "templates": "Šablóny",
+    "business": "Biznis",
+    "members_and_teamspaces": "Členovia a tímspejse",
+    "recurring_work_items": "Opakujúce sa pracovné položky",
+    "milestones": "Míľniky",
+    "open_in_full_screen": "Otvoriť {page} na celú obrazovku",
+    "details": "Podrobnosti",
+    "project_structure": "Štruktúra projektu",
+    "custom_properties": "Vlastné vlastnosti",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Os X",
+    "y_axis": "Os Y",
+    "metric": "Metrika"
+  },
+  "form": {
+    "title": {
+      "required": "Názov je povinný",
+      "max_length": "Názov by mal byť kratší ako {length} znakov"
+    }
+  },
+  "entity": {
+    "grouping_title": "Zoskupenie {entity}",
+    "priority": "Priorita {entity}",
+    "all": "Všetky {entity}",
+    "drop_here_to_move": "Pretiahnite sem pre presunutie {entity}",
+    "delete": {
+      "label": "Zmazať {entity}",
+      "success": "{entity} bola úspešne zmazaná",
+      "failed": "Mazanie {entity} zlyhalo"
+    },
+    "update": {
+      "failed": "Aktualizácia {entity} zlyhala",
+      "success": "{entity} bola úspešne aktualizovaná"
+    },
+    "link_copied_to_clipboard": "Odkaz na {entity} bol skopírovaný do schránky",
+    "fetch": {
+      "failed": "Chyba pri načítaní {entity}"
+    },
+    "add": {
+      "success": "{entity} bola úspešne pridaná",
+      "failed": "Chyba pri pridávaní {entity}"
+    },
+    "remove": {
+      "success": "{entity} bola úspešne odstránená",
+      "failed": "Chyba pri odstrávaní {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Súbor sa nedá pripojiť. Skúste to prosím znova.",
+    "only_one_file_allowed": "Je možné nahrať iba jeden súbor naraz.",
+    "file_size_limit": "Súbor musí byť menší ako {size}MB.",
+    "drag_and_drop": "Pretiahnite súbor kamkoľvek pre nahratie",
+    "delete": "Zmazať prílohu"
+  },
+  "label": {
+    "select": "Vybrať štítok",
+    "create": {
+      "success": "Štítok bol úspešne vytvorený",
+      "failed": "Vytvorenie štítka zlyhalo",
+      "already_exists": "Štítok už existuje",
+      "type": "Zadajte pre vytvorenie nového štítka"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Pohľad} few {Pohľady} other {Pohľadov}}",
+    "create": {
+      "label": "Vytvoriť pohľad"
+    },
+    "update": {
+      "label": "Aktualizovať pohľad"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Hosť",
+      "description": "Externí členovia môžu byť pozvaní ako hostia."
+    },
+    "member": {
+      "title": "Člen",
+      "description": "Môže čítať, písať, upravovať a mazať entity."
+    },
+    "admin": {
+      "title": "Správca",
+      "description": "Má všetky oprávnenia v priestore."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Produktový/Projektový manažér",
+    "development_or_engineering": "Vývoj/Inžinierstvo",
+    "founder_or_executive": "Zakladateľ/Vedenie",
+    "freelancer_or_consultant": "Freelancer/Konzultant",
+    "marketing_or_growth": "Marketing/Rast",
+    "sales_or_business_development": "Predaj/Business Development",
+    "support_or_operations": "Podpora/Operácie",
+    "student_or_professor": "Študent/Profesor",
+    "human_resources": "Ľudské zdroje",
+    "other": "Iné"
+  },
+  "default_global_view": {
+    "all_issues": "Všetky položky",
+    "assigned": "Priradené",
+    "created": "Vytvorené",
+    "subscribed": "Odobierané"
+  },
+  "description_versions": {
+    "last_edited_by": "Naposledy upravené používateľom",
+    "previously_edited_by": "Predtým upravené používateľom",
+    "edited_by": "Upravené používateľom"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane sa nespustil. Toto môže byť spôsobené tým, že sa jedna alebo viac služieb Plane nepodarilo spustiť.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Vyberte View Logs z setup.sh a Docker logov, aby ste si boli istí."
+  },
+  "customize_navigation": "Prispôsobiť navigáciu",
+  "personal": "Osobné",
+  "accordion_navigation_control": "Harmonická navigácia bočného panela",
+  "horizontal_navigation_bar": "Navigácia s kartami",
+  "show_limited_projects_on_sidebar": "Zobraziť obmedzený počet projektov v bočnom paneli",
+  "enter_number_of_projects": "Zadajte počet projektov",
+  "pin": "Pripnúť",
+  "unpin": "Odopnúť",
+  "workspace_dashboards": "Dešbordy",
+  "pi_chat": "AI Čet",
+  "in_app": "V aplikácii",
+  "forms": "Formuláre",
+  "milestones": "Míľniky",
+  "milestones_description": "Míľniky poskytujú vrstvu na zjednotenie pracovných položiek k spoločným dátumom dokončenia.",
+  "file_upload": {
+    "upload_text": "Kliknite sem na nahratie súboru",
+    "drag_drop_text": "Drag and Drop",
+    "processing": "Spracováva sa",
+    "invalid_file_type": "Neplatný typ súboru",
+    "missing_fields": "Chýbajúce polia",
+    "success": "{fileName} nahraný!"
+  },
+  "date": "Dátum",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Exportujte položky do CSV.",
+      "short_description": "Exportovať ako CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Exportujte položky do Excelu.",
+      "short_description": "Exportovať ako Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Exportujte položky do Excelu.",
+      "short_description": "Exportovať ako Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Exportujte položky do JSON.",
+      "short_description": "Exportovať ako JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/cycle.json b/packages/i18n/src/locales/sk/cycle.json
new file mode 100644
index 0000000..24c2eea
--- /dev/null
+++ b/packages/i18n/src/locales/sk/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Pridajte položky pre sledovanie pokroku"
+      },
+      "chart": {
+        "title": "Pridajte položky pre zobrazenie burndown grafu."
+      },
+      "priority_issue": {
+        "title": "Zobrazia sa vysoko prioritné pracovné položky."
+      },
+      "assignee": {
+        "title": "Priraďte položky pre prehľad priradení."
+      },
+      "label": {
+        "title": "Pridajte štítky pre analýzu podľa štítkov."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Cyklus} few {Cykly} other {Cyklov}}",
+    "no_cycle": "Žiadny cyklus"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Pridajte pracovné položky do cyklu, aby ste videli jeho\n pokrok"
+      },
+      "priority": {
+        "title": "Sledujte pracovné položky s vysokou prioritou riešené v\n cykle na prvý pohľad."
+      },
+      "assignee": {
+        "title": "Pridajte priradeným osobám pracovné položky, aby ste videli\n rozdelenie práce podľa priradených osôb."
+      },
+      "label": {
+        "title": "Pridajte štítky k pracovným položkám, aby ste videli\n rozdelenie práce podľa štítkov."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/editor.json b/packages/i18n/src/locales/sk/editor.json
new file mode 100644
index 0000000..8059307
--- /dev/null
+++ b/packages/i18n/src/locales/sk/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Pretiahni a pusť pre nahranie externých súborov"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Súbor je príliš veľký.",
+        "description": "Maximálna veľkosť na súbor je {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Nepodporovaný typ súboru.",
+        "description": "Zobraziť podporované formáty"
+      },
+      "default": {
+        "title": "Nahrávanie zlyhalo.",
+        "description": "Niečo sa pokazilo. Skúste to znovu."
+      }
+    },
+    "upgrade": {
+      "description": "Upgradujte svoj plán pre zobrazenie tejto prílohy."
+    },
+    "aria": {
+      "click_to_upload": "Kliknite pre nahranie prílohy"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Konvertovať na vložený obsah",
+      "convert_to_link": "Konvertovať na odkaz",
+      "convert_to_richcard": "Konvertovať na bohatú kartu"
+    },
+    "placeholder": {
+      "insert_embed": "Vložte sem svoj preferovaný odkaz na vloženie, napríklad video YouTube, dizajn Figma atď.",
+      "link": "Zadajte alebo vložte odkaz"
+    },
+    "input_modal": {
+      "embed": "Vložiť",
+      "works_with_links": "Funguje s YouTube, Figma, Google Docs a ďalšími"
+    },
+    "error": {
+      "not_valid_link": "Prosím, zadajte platnú URL adresu."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Opíšte obsah tohto bloku",
+      "generated_here": "Tu bude vygenerovaný váš AI obsah"
+    },
+    "block_types": {
+      "placeholder": "Vybrať typ bloku",
+      "summarize_page": "Zhrnúť stránku",
+      "custom_prompt": "Vlastná výzva"
+    },
+    "actions": {
+      "discard": "Zahodiť",
+      "generate": "Vygenerovať",
+      "generating": "Generovanie",
+      "rewriting": "Prepisovanie",
+      "rewrite": "Prepísať",
+      "use_this": "Použiť toto",
+      "refine": "Upraviť"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/empty-state.json b/packages/i18n/src/locales/sk/empty-state.json
new file mode 100644
index 0000000..15bc7d2
--- /dev/null
+++ b/packages/i18n/src/locales/sk/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Zatiaľ nie sú k dispozícii žiadne metriky pokroku.",
+      "description": "Začnite nastavovať hodnoty vlastností v pracovných položkách, aby ste tu videli metriky pokroku."
+    },
+    "updates": {
+      "title": "Zatiaľ žiadne aktualizácie.",
+      "description": "Akonáhle členovia projektu pridajú aktualizácie, zobrazia sa tu"
+    },
+    "search": {
+      "title": "Žiadne zodpovedajúce výsledky.",
+      "description": "Neboli nájdené žiadne výsledky. Skúste upraviť vyhľadávacie výrazy."
+    },
+    "not_found": {
+      "title": "Ojej! Niečo sa zdá byť v neporiadku",
+      "description": "Momentálne sa nám nedarí načítať váš účet plane. Môže ísť o chybu siete.",
+      "cta_primary": "Skúste znovu načítať"
+    },
+    "server_error": {
+      "title": "Chyba servera",
+      "description": "Nemôžeme sa pripojiť a načítať údaje z nášho servera. Nebojte sa, pracujeme na tom.",
+      "cta_primary": "Skúste znovu načítať"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Zdá sa, že nemáte prístup k tomuto projektu",
+      "restricted_description": "Kontaktujte administrátora, aby ste požiadali o prístup, a potom tu môžete pokračovať.",
+      "join_description": "Kliknite na tlačidlo nižšie, aby ste sa pripojili.",
+      "cta_primary": "Pripojiť sa k projektu",
+      "cta_loading": "Pripájanie k projektu"
+    },
+    "invalid_project": {
+      "title": "Projekt nebol nájdený",
+      "description": "Projekt, ktorý hľadáte, neexistuje."
+    },
+    "work_items": {
+      "title": "Začnite s vašou prvou pracovnou položkou.",
+      "description": "Pracovné položky sú stavebnými kameňmi vášho projektu — priraďujte vlastníkov, nastavujte priority a jednoducho sledujte pokrok.",
+      "cta_primary": "Vytvorte svoju prvú pracovnú položku"
+    },
+    "cycles": {
+      "title": "Zoskupujte a časovo obmedzte svoju prácu v cykloch.",
+      "description": "Rozdeľte prácu do časovo obmedzených blokov, pracujte spätne od termínu projektu na nastavenie dátumov a dosahujte hmatateľný pokrok ako tým.",
+      "cta_primary": "Nastavte svoj prvý cyklus"
+    },
+    "cycle_work_items": {
+      "title": "V tomto cykle nie sú žiadne pracovné položky na zobrazenie",
+      "description": "Vytvorte pracovné položky na začatie sledovania pokroku vášho tímu v tomto cykle a dosiahnutie vašich cieľov včas.",
+      "cta_primary": "Vytvoriť pracovnú položku",
+      "cta_secondary": "Pridať existujúcu pracovnú položku"
+    },
+    "modules": {
+      "title": "Namapujte ciele vášho projektu na moduly a jednoducho sledujte.",
+      "description": "Moduly sa skladajú z prepojených pracovných položiek. Pomáhajú sledovať pokrok prostredníctvom fáz projektu, z ktorých každá má špecifické termíny a analytiku, ktorá ukazuje, ako blízko ste dosiahnutiu týchto fáz.",
+      "cta_primary": "Nastavte svoj prvý modul"
+    },
+    "module_work_items": {
+      "title": "V tomto module nie sú žiadne pracovné položky na zobrazenie",
+      "description": "Vytvorte pracovné položky na začatie sledovania tohto modulu.",
+      "cta_primary": "Vytvoriť pracovnú položku",
+      "cta_secondary": "Pridať existujúcu pracovnú položku"
+    },
+    "views": {
+      "title": "Uložte vlastné pohľady pre váš projekt",
+      "description": "Pohľady sú uložené filtre, ktoré vám pomáhajú rýchlo pristupovať k informáciám, ktoré používate najčastejšie. Spolupracujte bez námahy, zatiaľ čo spolupracovníci zdieľajú a prispôsobujú pohľady svojim špecifickým potrebám.",
+      "cta_primary": "Vytvoriť pohľad"
+    },
+    "no_work_items_in_project": {
+      "title": "V projekte zatiaľ nie sú žiadne pracovné položky",
+      "description": "Pridajte pracovné položky do svojho projektu a rozdeľte svoju prácu na sledovateľné časti pomocou pohľadov.",
+      "cta_primary": "Pridať pracovnú položku"
+    },
+    "work_item_filter": {
+      "title": "Neboli nájdené žiadne pracovné položky",
+      "description": "Váš aktuálny filter nevrátil žiadne výsledky. Skúste zmeniť filtre.",
+      "cta_primary": "Pridať pracovnú položku"
+    },
+    "pages": {
+      "title": "Dokumentujte všetko — od poznámok po PRD",
+      "description": "Stránky vám umožňujú zachytiť a organizovať informácie na jednom mieste. Píšte poznámky zo stretnutí, projektovú dokumentáciu a PRD, vkladajte pracovné položky a štruktúrujte ich pomocou pripravených komponentov.",
+      "cta_primary": "Vytvorte svoju prvú stránku"
+    },
+    "archive_pages": {
+      "title": "Zatiaľ žiadne archivované stránky",
+      "description": "Archivujte stránky, ktoré nie sú na vašom radare. Pristúpte k nim tu, keď budete potrebovať."
+    },
+    "intake_sidebar": {
+      "title": "Zaznamenajte príchodzí požiadavky",
+      "description": "Odosielajte nové požiadavky na preskúmanie, stanovenie priorít a sledovanie v rámci pracovného postupu vášho projektu.",
+      "cta_primary": "Vytvoriť príchodzí požiadavku"
+    },
+    "intake_main": {
+      "title": "Vyberte príchodzí pracovnú položku na zobrazenie jej podrobností"
+    },
+    "epics": {
+      "title": "Premeňte zložité projekty na štruktúrované epiky.",
+      "description": "Epik vám pomôže organizovať veľké ciele do menších, sledovateľných úloh.",
+      "cta_primary": "Vytvoriť epik",
+      "cta_secondary": "Dokumentácia"
+    },
+    "epic_work_items": {
+      "title": "K tomuto epiku ste ešte nepridali pracovné položky.",
+      "description": "Začnite pridaním niektorých pracovných položiek k tomuto epiku a sledujte ich tu.",
+      "cta_secondary": "Pridať pracovné položky"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Zatiaľ žiadne archivované epiky",
+      "description": "Môžete archivovať dokončené alebo zrušené epiky. Nájdete ich tu po archivácii."
+    },
+    "archive_work_items": {
+      "title": "Zatiaľ žiadne archivované pracovné položky",
+      "description": "Ručne alebo pomocou automatizácie môžete archivovať dokončené alebo zrušené pracovné položky. Nájdete ich tu, akonáhle budú archivované.",
+      "cta_primary": "Nastaviť automatizáciu"
+    },
+    "archive_cycles": {
+      "title": "Zatiaľ žiadne archivované cykly",
+      "description": "Pre upratanie vášho projektu archivujte dokončené cykly. Nájdete ich tu, akonáhle budú archivované."
+    },
+    "archive_modules": {
+      "title": "Zatiaľ žiadne archivované moduly",
+      "description": "Pre upratanie vášho projektu archivujte dokončené alebo zrušené moduly. Nájdete ich tu, akonáhle budú archivované."
+    },
+    "home_widget_quick_links": {
+      "title": "Majte po ruke dôležité odkazy, zdroje alebo dokumenty pre vašu prácu"
+    },
+    "inbox_sidebar_all": {
+      "title": "Aktualizácie pre vaše odoberané pracovné položky sa zobrazia tu"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Zmienky o vašich pracovných položkách sa zobrazia tu"
+    },
+    "your_work_by_priority": {
+      "title": "Zatiaľ nie je priradená žiadna pracovná položka"
+    },
+    "your_work_by_state": {
+      "title": "Zatiaľ nie je priradená žiadna pracovná položka"
+    },
+    "views": {
+      "title": "Zatiaľ žiadne pohľady",
+      "description": "Pridajte pracovné položky do svojho projektu a používajte pohľady na jednoduché filtrovanie, triedenie a sledovanie pokroku.",
+      "cta_primary": "Pridať pracovnú položku"
+    },
+    "drafts": {
+      "title": "Napoly napísané pracovné položky",
+      "description": "Ak to chcete vyskúšať, začnite pridávať pracovnú položku a nechajte ju nedokončenú alebo vytvorte svoj prvý koncept nižšie. 😉",
+      "cta_primary": "Vytvoriť koncept pracovnej položky"
+    },
+    "projects_archived": {
+      "title": "Žiadne archivované projekty",
+      "description": "Vyzerá to, že všetky vaše projekty sú stále aktívne—skvelá práca!"
+    },
+    "analytics_projects": {
+      "title": "Vytvorte projekty na vizualizáciu metrík projektu tu."
+    },
+    "analytics_work_items": {
+      "title": "Vytvorte projekty s pracovnými položkami a priradenými osobami na začatie sledovania výkonu, pokroku a dopadu tímu tu."
+    },
+    "analytics_no_cycle": {
+      "title": "Vytvorte cykly na organizáciu práce do časovo obmedzených fáz a sledovanie pokroku naprieč šprintmi."
+    },
+    "analytics_no_module": {
+      "title": "Vytvorte moduly na organizáciu svojej práce a sledovanie pokroku naprieč rôznymi fázami."
+    },
+    "analytics_no_intake": {
+      "title": "Nastavte príjem na správu prichádzajúcich požiadaviek a sledovanie, ako sú prijímané a odmietané"
+    },
+    "home_widget_stickies": {
+      "title": "Poznamenajte si nápad, zachyťte aha moment alebo zaznamenajte náhly nápad. Pridajte poznámku a začnite."
+    },
+    "stickies": {
+      "title": "Zachyťte nápady okamžite",
+      "description": "Vytvárajte poznámky pre rýchle poznámky a úlohy a majte ich pri sebe, kamkoľvek idete.",
+      "cta_primary": "Vytvoriť prvú poznámku",
+      "cta_secondary": "Dokumentácia"
+    },
+    "active_cycles": {
+      "title": "Žiadne aktívne cykly",
+      "description": "Momentálne nemáte žiadne prebiehajúce cykly. Aktívne cykly sa tu zobrazia, keď budú zahŕňať dnešný dátum."
+    },
+    "dashboard": {
+      "title": "Vizualizujte svoj pokrok pomocou prehľadov",
+      "description": "Vytvárajte prispôsobiteľné prehľady na sledovanie metrík, meranie výsledkov a efektívnu prezentáciu poznatkov.",
+      "cta_primary": "Vytvoriť nový prehľad"
+    },
+    "wiki": {
+      "title": "Napíšte poznámku, dokument alebo celú vedomostnú bázu.",
+      "description": "Stránky sú priestorom pre zachytenie myšlienok v Plane. Robte poznámky zo stretnutí, jednoducho ich formátujte, vkladajte pracovné položky, usporiadajte ich pomocou knižnice komponentov a udržujte všetko v kontexte vášho projektu.",
+      "cta_primary": "Vytvorte svoju stránku"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Povoliť stavy projektu",
+      "description": "Povoľte stavy projektu na zobrazenie a správu vlastností ako stav, priorita, termíny a ďalšie."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Zatiaľ žiadne odhady",
+      "description": "Definujte, ako váš tím meria úsilie, a sledujte to konzistentne naprieč všetkými pracovnými položkami.",
+      "cta_primary": "Pridať systém odhadov"
+    },
+    "labels": {
+      "title": "Zatiaľ žiadne štítky",
+      "description": "Vytvorte personalizované štítky na efektívnu kategorizáciu a správu vašich pracovných položiek.",
+      "cta_primary": "Vytvorte svoj prvý štítok"
+    },
+    "exports": {
+      "title": "Zatiaľ žiadne exporty",
+      "description": "Momentálne nemáte žiadne záznamy exportu. Akonáhle exportujete údaje, všetky záznamy sa zobrazia tu."
+    },
+    "tokens": {
+      "title": "Zatiaľ žiadny osobný token",
+      "description": "Generujte bezpečné API tokeny na pripojenie vášho pracovného priestoru s externými systémami a aplikáciami.",
+      "cta_primary": "Pridať API token"
+    },
+    "workspace_tokens": {
+      "title": "Zatiaľ žiadne API tokeny",
+      "description": "Generujte bezpečné API tokeny na pripojenie vášho pracovného priestoru s externými systémami a aplikáciami.",
+      "cta_primary": "Pridať API token"
+    },
+    "webhooks": {
+      "title": "Zatiaľ nebol pridaný žiadny Webhook",
+      "description": "Automatizujte oznámenia externým službám pri výskyte udalostí projektu.",
+      "cta_primary": "Pridať webhook"
+    },
+    "work_item_types": {
+      "title": "Vytvárajte a prispôsobujte typy pracovných položiek",
+      "description": "Definujte jedinečné typy pracovných položiek pre váš projekt. Každý typ môže mať svoje vlastné vlastnosti, pracovné postupy a polia - prispôsobené potrebám vášho projektu a tímu.",
+      "cta_primary": "Povoliť"
+    },
+    "work_item_type_properties": {
+      "title": "Definujte vlastnosť a podrobnosti, ktoré chcete zachytiť pre tento typ pracovnej položky. Prispôsobte ho pracovnému postupu vášho projektu.",
+      "cta_secondary": "Pridať vlastnosť"
+    },
+    "templates": {
+      "title": "Zatiaľ žiadne šablóny",
+      "description": "Skráťte dobu nastavenia vytváraním šablón pre pracovné položky a stránky — a začnite novú prácu počas niekoľkých sekúnd.",
+      "cta_primary": "Vytvorte svoju prvú šablónu"
+    },
+    "recurring_work_items": {
+      "title": "Zatiaľ žiadna opakujúca sa pracovná položka",
+      "description": "Nastavte opakujúce sa pracovné položky na automatizáciu opakujúcich sa úloh a jednoduché dodržiavanie harmonogramu.",
+      "cta_primary": "Vytvoriť opakujúcu sa pracovnú položku"
+    },
+    "worklogs": {
+      "title": "Sledujte časové výkazy pre všetkých členov",
+      "description": "Zaznamenávajte čas na pracovných položkách na zobrazenie podrobných časových výkazov pre akéhokoľvek člena tímu naprieč projektmi."
+    },
+    "group_syncing": {
+      "title": "Zatiaľ žiadne mapovania skupín"
+    },
+    "template_setting": {
+      "title": "Zatiaľ žiadne šablóny",
+      "description": "Skráťte dobu nastavenia vytváraním šablón pre projekty, pracovné položky a stránky — a začnite novú prácu počas niekoľkých sekúnd.",
+      "cta_primary": "Vytvoriť šablónu"
+    },
+    "workflows": {
+      "title": "Zatiaľ žiadne pracovné postupy",
+      "description": "Vytvorte pracovné postupy na riadenie priebehu svojich pracovných položiek.",
+      "cta_primary": "Pridať nový pracovný postup",
+      "states": {
+        "title": "Pridať stavy",
+        "description": "Vyberte stavy, cez ktoré pracovná položka prechádza."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/home.json b/packages/i18n/src/locales/sk/home.json
new file mode 100644
index 0000000..bb022d1
--- /dev/null
+++ b/packages/i18n/src/locales/sk/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Váš sprievodca rýchlym štartom",
+      "not_right_now": "Teraz nie",
+      "create_project": {
+        "title": "Vytvoriť projekt",
+        "description": "Väčšina vecí začína projektom v Plane.",
+        "cta": "Začať"
+      },
+      "invite_team": {
+        "title": "Pozvať tím",
+        "description": "Spolupracujte s kolegami na tvorbe, dodávkach a správe.",
+        "cta": "Pozvať ich"
+      },
+      "configure_workspace": {
+        "title": "Nastavte si svoj pracovný priestor.",
+        "description": "Aktivujte alebo deaktivujte funkcie alebo choďte ďalej.",
+        "cta": "Konfigurovať tento priestor"
+      },
+      "personalize_account": {
+        "title": "Prispôsobte si Plane.",
+        "description": "Vyberte si obrázok, farby a ďalšie.",
+        "cta": "Prispôsobiť teraz"
+      },
+      "widgets": {
+        "title": "Je ticho bez widgetov, zapnite ich",
+        "description": "Vyzerá to, že všetky vaše widgety sú vypnuté. Zapnite ich\npre lepší zážitok!",
+        "primary_button": {
+          "text": "Spravovať widgety"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Uložte si odkazy na dôležité veci, ktoré chcete mať po ruke.",
+      "add": "Pridať rýchly odkaz",
+      "title": "Rýchly odkaz",
+      "title_plural": "Rýchle odkazy"
+    },
+    "recents": {
+      "title": "Nedávne",
+      "empty": {
+        "project": "Vaše nedávne projekty sa zobrazia po návšteve.",
+        "page": "Vaše nedávne stránky sa zobrazia po návšteve.",
+        "issue": "Vaše nedávne pracovné položky sa zobrazia po návšteve.",
+        "default": "Zatiaľ nemáte žiadne nedávne položky."
+      },
+      "filters": {
+        "all": "Všetko",
+        "projects": "Projekty",
+        "pages": "Stránky",
+        "issues": "Pracovné položky"
+      }
+    },
+    "new_at_plane": {
+      "title": "Novinky v Plane"
+    },
+    "quick_tutorial": {
+      "title": "Rýchly tutoriál"
+    },
+    "widget": {
+      "reordered_successfully": "Widget bol úspešne presunutý.",
+      "reordering_failed": "Pri presúvaní widgetu došlo k chybe."
+    },
+    "manage_widgets": "Spravovať widgety",
+    "title": "Domov",
+    "star_us_on_github": "Ohodnoťte nás na GitHube",
+    "business_trial_banner": {
+      "title": "Vaša 14-dňová skúšobná verzia plánu Business je aktívna!",
+      "description": "Preskúmajte všetky funkcie Business. Keď budete pripravení, vyberte si predplatné. Nebudete automaticky účtovaní.",
+      "trial_ends_today": "Skúšobná verzia končí dnes",
+      "trial_ends_in_days": "Skúšobná verzia končí za {days, plural, one {# deň} few {# dni} other {# dní}}",
+      "start_subscription": "Začať predplatné",
+      "explore_business_features": "Preskúmať funkcie Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/inbox.json b/packages/i18n/src/locales/sk/inbox.json
new file mode 100644
index 0000000..4be3787
--- /dev/null
+++ b/packages/i18n/src/locales/sk/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Čakajúce",
+        "description": "Čakajúce"
+      },
+      "declined": {
+        "title": "Odmietnuté",
+        "description": "Odmietnuté"
+      },
+      "snoozed": {
+        "title": "Odložené",
+        "description": "Zostáva {days, plural, one{# deň} few{# dni} other{# dní}}"
+      },
+      "accepted": {
+        "title": "Prijaté",
+        "description": "Prijaté"
+      },
+      "duplicate": {
+        "title": "Duplikát",
+        "description": "Duplikát"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Odmietnuť pracovnú položku",
+        "content": "Naozaj chcete odmietnuť pracovnú položku {value}?"
+      },
+      "delete": {
+        "title": "Zmazať pracovnú položku",
+        "content": "Naozaj chcete zmazať pracovnú položku {value}?",
+        "success": "Pracovná položka bola úspešne zmazaná"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Iba správcovia projektu môžu odkladať/zrušiť odloženie pracovných položiek",
+      "accept_permission": "Iba správcovia projektu môžu prijímať pracovné položky",
+      "decline_permission": "Iba správcovia projektu môžu odmietnuť pracovné položky"
+    },
+    "actions": {
+      "accept": "Prijať",
+      "decline": "Odmietnuť",
+      "snooze": "Odložiť",
+      "unsnooze": "Zrušiť odloženie",
+      "copy": "Kopírovať odkaz na pracovnú položku",
+      "delete": "Zmazať",
+      "open": "Otvoriť pracovnú položku",
+      "mark_as_duplicate": "Označiť ako duplikát",
+      "move": "Presunúť {value} do pracovných položiek projektu"
+    },
+    "source": {
+      "in-app": "v aplikácii"
+    },
+    "order_by": {
+      "created_at": "Vytvorené dňa",
+      "updated_at": "Aktualizované dňa",
+      "id": "ID"
+    },
+    "label": "Príjem",
+    "page_label": "{workspace} - Príjem",
+    "modal": {
+      "title": "Vytvoriť prijatú pracovnú položku"
+    },
+    "tabs": {
+      "open": "Otvorené",
+      "closed": "Uzavreté"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Žiadne otvorené pracovné položky",
+        "description": "Tu nájdete otvorené pracovné položky. Vytvorte novú."
+      },
+      "sidebar_closed_tab": {
+        "title": "Žiadne uzavreté pracovné položky",
+        "description": "Všetky prijaté alebo odmietnuté pracovné položky nájdete tu."
+      },
+      "sidebar_filter": {
+        "title": "Žiadne zodpovedajúce pracovné položky",
+        "description": "Žiadna položka nezodpovedá filtru v príjme. Vytvorte novú."
+      },
+      "detail": {
+        "title": "Vyberte pracovnú položku pre zobrazenie detailov."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/integration.json b/packages/i18n/src/locales/sk/integration.json
new file mode 100644
index 0000000..79689a4
--- /dev/null
+++ b/packages/i18n/src/locales/sk/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Integrácie",
+    "loading": "Načítava sa",
+    "unauthorized": "Nemáte oprávnenie na zobrazenie tejto stránky.",
+    "configure": "Konfigurovať",
+    "not_enabled": "{name} nie je povolené pre tento vorkspejs.",
+    "not_configured": "Nenakonfigurované",
+    "disconnect_personal_account": "Odpojiť osobný {providerName} účet",
+    "not_configured_message_admin": "Integrácia {name} nie je nakonfigurovaná. Kontaktujte správcu vašej inštancie pre konfiguráciu.",
+    "not_configured_message_support": "Integrácia {name} nie je nakonfigurovaná. Kontaktujte podporu pre konfiguráciu.",
+    "external_api_unreachable": "Nie je možné pristupovať k externej API. Skúste to prosím neskôr.",
+    "error_fetching_supported_integrations": "Nie je možné načítať podporované integrácie. Skúste to prosím neskôr.",
+    "back_to_integrations": "Späť na integrácie",
+    "select_state": "Vyberte stav",
+    "set_state": "Nastaviť stav",
+    "choose_project": "Vyberte projekt...",
+    "skip_backward_state_movement": "Zabrániť presunu problémov do skoršieho stavu kvôli aktualizáciám PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Pripojte a synchronizujte vaše pracovné položky z GitHub s Plane",
+    "connect_org": "Pripojte organizáciu",
+    "connect_org_description": "Pripojte vašu GitHub organizáciu s Plane",
+    "processing": "Spracováva sa",
+    "org_added_desc": "GitHub org pripojená a čas",
+    "connection_fetch_error": "Chyba pri načítavaní detailov pripojenia zo servera",
+    "personal_account_connected": "Osobný účet pripojený",
+    "personal_account_connected_description": "Vaša GitHub účet je teraz pripojená k Plane",
+    "connect_personal_account": "Pripojte osobný účet",
+    "connect_personal_account_description": "Pripojte vašu osobnú GitHub účet s Plane.",
+    "repo_mapping": "Mapovanie repozitárov",
+    "repo_mapping_description": "Mapujte vaše GitHub repozitáre s projektami Plane.",
+    "project_issue_sync": "Synchronizácia problémov projektu",
+    "project_issue_sync_description": "Synchronizujte problémy z GitHub do vašeho projektu Plane",
+    "project_issue_sync_empty_state": "Zmapované synchronizácie problémov projektu sa zobrazia tu",
+    "configure_project_issue_sync_state": "Konfigurujte stav synchronizácie problémov",
+    "select_issue_sync_direction": "Vyberte smer synchronizácie problémov",
+    "allow_bidirectional_sync": "Bidirectional - Synchronizujte problémy a komentáre v oboch smeroch medzi GitHub a Plane",
+    "allow_unidirectional_sync": "Unidirectional - Synchronizujte problémy a komentáre z GitHub do Plane len",
+    "allow_unidirectional_sync_warning": "Údaje z GitHub Issue nahradia údaje v prepojenom pracovnom prvku Plane (iba GitHub → Plane)",
+    "remove_project_issue_sync": "Odstrániť túto synchronizáciu problémov projektu",
+    "remove_project_issue_sync_confirmation": "Ste si istí, že chcete odstrániť túto synchronizáciu problémov projektu?",
+    "add_pr_state_mapping": "Pridajte mapovanie stavu žiadosti o zlúčenie pre projekt Plane",
+    "edit_pr_state_mapping": "Edit mapovanie stavu žiadosti o zlúčenie pre projekt Plane",
+    "pr_state_mapping": "Mapovanie stavu žiadosti o zlúčenie",
+    "pr_state_mapping_description": "Mapujte stavy žiadostí o zlúčenie z GitHub do vašeho projektu Plane",
+    "pr_state_mapping_empty_state": "Zmapované stavy PR sa zobrazia tu",
+    "remove_pr_state_mapping": "Odstrániť toto mapovanie stavu žiadosti o zlúčenie",
+    "remove_pr_state_mapping_confirmation": "Ste si istí, že chcete odstrániť toto mapovanie stavu žiadosti o zlúčenie?",
+    "issue_sync_message": "Pracovné položky sú synchronizované do {project}",
+    "link": "Prepojiť GitHub repozitár s projektom Plane",
+    "pull_request_automation": "Automatizácia žiadosti o zlúčenie",
+    "pull_request_automation_description": "Nakonfigurujte mapovanie stavu žiadosti o zlúčenie z GitHub do vašeho projektu Plane",
+    "DRAFT_MR_OPENED": "Otvorený draft",
+    "MR_OPENED": "Otvorené",
+    "MR_READY_FOR_MERGE": "Pripravené na zlúčenie",
+    "MR_REVIEW_REQUESTED": "Kontrola vyžadovaná",
+    "MR_MERGED": "Zlúčené",
+    "MR_CLOSED": "Zatvorené",
+    "ISSUE_OPEN": "Issue Otvorené",
+    "ISSUE_CLOSED": "Issue Zatvorené",
+    "save": "Uložiť",
+    "start_sync": "Spustiť synchronizáciu",
+    "choose_repository": "Vyberte repozitár..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Pripojte a synchronizujte vaše Gitlab žiadosti o zlúčenie s Plane.",
+    "connection_fetch_error": "Chyba pri načítavaní detailov pripojenia zo servera",
+    "connect_org": "Pripojiť organizáciu",
+    "connect_org_description": "Pripojte vašu Gitlab organizáciu s Plane.",
+    "project_connections": "Pripojenia Gitlab projektov",
+    "project_connections_description": "Synchronizujte žiadosti o zlúčenie z Gitlab do projektov Plane.",
+    "plane_project_connection": "Pripojenie projektu Plane",
+    "plane_project_connection_description": "Nakonfigurujte mapovanie stavov žiadostí o zlúčenie z Gitlab do projektov Plane",
+    "remove_connection": "Odstrániť pripojenie",
+    "remove_connection_confirmation": "Ste si istí, že chcete odstrániť toto pripojenie?",
+    "link": "Prepojiť Gitlab repozitár s projektom Plane",
+    "pull_request_automation": "Automatizácia žiadostí o zlúčenie",
+    "pull_request_automation_description": "Nakonfigurujte mapovanie stavov žiadostí o zlúčenie z Gitlab do Plane",
+    "DRAFT_MR_OPENED": "Pri otvorení konceptu MR nastaviť stav na",
+    "MR_OPENED": "Pri otvorení MR nastaviť stav na",
+    "MR_REVIEW_REQUESTED": "Pri vyžiadaní kontroly MR nastaviť stav na",
+    "MR_READY_FOR_MERGE": "Pri MR pripravenom na zlúčenie nastaviť stav na",
+    "MR_MERGED": "Pri zlúčení MR nastaviť stav na",
+    "MR_CLOSED": "Pri uzavretí MR nastaviť stav na",
+    "integration_enabled_text": "S povolenou integráciou Gitlab môžete automatizovať pracovné postupy pracovných položiek",
+    "choose_entity": "Vyberte entitu",
+    "choose_project": "Vyberte projekt",
+    "link_plane_project": "Prepojiť projekt Plane",
+    "project_issue_sync": "Synchronizácia problémov projektu",
+    "project_issue_sync_description": "Synchronizujte problémy z Gitlab do vášho projektu Plane",
+    "project_issue_sync_empty_state": "Mapovaná synchronizácia problémov projektu sa zobrazí tu",
+    "configure_project_issue_sync_state": "Konfigurovať stav synchronizácie problémov",
+    "select_issue_sync_direction": "Vyberte smer synchronizácie problémov",
+    "allow_bidirectional_sync": "Obojsmerná - Synchronizovať problémy a komentáre obojsmerne medzi Gitlab a Plane",
+    "allow_unidirectional_sync": "Jednosmerná - Synchronizovať problémy a komentáre iba z Gitlab do Plane",
+    "allow_unidirectional_sync_warning": "Údaje z Gitlab Issue nahradia údaje v prepojenom pracovnom prvku Plane (iba Gitlab → Plane)",
+    "remove_project_issue_sync": "Odstrániť túto synchronizáciu problémov projektu",
+    "remove_project_issue_sync_confirmation": "Ste si istí, že chcete odstrániť túto synchronizáciu problémov projektu?",
+    "ISSUE_OPEN": "Problém otvorený",
+    "ISSUE_CLOSED": "Problém uzavretý",
+    "save": "Uložiť",
+    "start_sync": "Spustiť synchronizáciu",
+    "choose_repository": "Vyberte repozitár..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Pripojte a synchronizujte svoju inštanciu Gitlab Enterprise s Plane.",
+    "app_form_title": "Konfigurácia Gitlab Enterprise",
+    "app_form_description": "Nakonfigurujte Gitlab Enterprise pre pripojenie k Plane.",
+    "base_url_title": "Základná URL",
+    "base_url_description": "Základná URL vašej inštancie Gitlab Enterprise.",
+    "base_url_placeholder": "napr. \"https://glab.plane.town\"",
+    "base_url_error": "Základná URL je povinná",
+    "invalid_base_url_error": "Neplatná základná URL",
+    "client_id_title": "ID aplikácie",
+    "client_id_description": "ID aplikácie, ktorú ste vytvorili vo vašej inštancii Gitlab Enterprise.",
+    "client_id_placeholder": "napr. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "ID aplikácie je povinné",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Client secret aplikácie, ktorú ste vytvorili vo vašej inštancii Gitlab Enterprise.",
+    "client_secret_placeholder": "napr. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret je povinný",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Náhodný webhook secret, ktorý bude použitý na overenie webhooku z inštancie Gitlab Enterprise.",
+    "webhook_secret_placeholder": "napr. \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret je povinný",
+    "connect_app": "Pripojiť aplikáciu"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Pripojte váš Slack vorkspejs s Plane.",
+    "connect_personal_account": "Pripojte váš osobný Slack účet s Plane.",
+    "personal_account_connected": "Váš osobný {providerName} účet je teraz pripojený k Plane.",
+    "link_personal_account": "Prepojte váš osobný {providerName} účet s Plane.",
+    "connected_slack_workspaces": "Pripojené Slack vorkspejsy",
+    "connected_on": "Pripojené {date}",
+    "disconnect_workspace": "Odpojiť {name} vorkspejs",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Dostávajte upozornenia v súkromných správach Slack pre dôležité aktualizácie, pripomenutia a upozornenia len pre vás."
+      }
+    },
+    "project_updates": {
+      "title": "Aktualizácie Projektu",
+      "description": "Nakonfigurujte notifikácie o aktualizáciách projektov pre vaše projekty",
+      "add_new_project_update": "Pridať novú notifikáciu o aktualizáciách projektu",
+      "project_updates_empty_state": "Projekty pripojené s kanálmi Slack sa zobrazia tu.",
+      "project_updates_form": {
+        "title": "Konfigurovať Aktualizácie Projektu",
+        "description": "Dostávajte notifikácie o aktualizáciách projektu v Slack, keď sa vytvoria pracovné položky",
+        "failed_to_load_channels": "Nepodarilo sa načítať kanály zo Slack",
+        "project_dropdown": {
+          "placeholder": "Vyberte projekt",
+          "label": "Plane Projekt",
+          "no_projects": "Žiadne dostupné projekty"
+        },
+        "channel_dropdown": {
+          "label": "Slack Kanál",
+          "placeholder": "Vyberte kanál",
+          "no_channels": "Žiadne dostupné kanály"
+        },
+        "all_projects_connected": "Všetky projekty sú už pripojené ku kanálom Slack.",
+        "all_channels_connected": "Všetky kanály Slack sú už pripojené k projektom.",
+        "project_connection_success": "Pripojenie projektu úspešne vytvorené",
+        "project_connection_updated": "Pripojenie projektu úspešne aktualizované",
+        "project_connection_deleted": "Pripojenie projektu úspešne odstránené",
+        "failed_delete_project_connection": "Nepodarilo sa odstrániť pripojenie projektu",
+        "failed_create_project_connection": "Nepodarilo sa vytvoriť pripojenie projektu",
+        "failed_upserting_project_connection": "Nepodarilo sa aktualizovať pripojenie projektu",
+        "failed_loading_project_connections": "Nepodarilo sa načítať vaše pripojenia projektu. Môže to byť spôsobené problémom so sieťou alebo problémom s integráciou."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Pripojte váš Sentry pracovný priestor s Plane.",
+    "connected_sentry_workspaces": "Pripojené Sentry pracovné priestory",
+    "connected_on": "Pripojené {date}",
+    "disconnect_workspace": "Odpojiť pracovný priestor {name}",
+    "state_mapping": {
+      "title": "Mapovanie stavov",
+      "description": "Mapujte stavy incidentov Sentry na stavy vášho projektu. Nakonfigurujte, ktoré stavy použiť, keď je incident Sentry vyriešený alebo nevyriešený.",
+      "add_new_state_mapping": "Pridať nové mapovanie stavu",
+      "empty_state": "Nie sú nakonfigurované žiadne mapovania stavov. Vytvorte svoje prvé mapovanie na synchronizáciu stavov incidentov Sentry so stavmi vášho projektu.",
+      "failed_loading_state_mappings": "Nepodarilo sa nám načítať vaše mapovania stavov. Môže to byť spôsobené problémom so sieťou alebo problémom s integráciou.",
+      "loading_project_states": "Načítavanie stavov projektu...",
+      "error_loading_states": "Chyba pri načítavaní stavov",
+      "no_states_available": "Nie sú dostupné žiadne stavy",
+      "no_permission_states": "Nemáte povolenie na prístup k stavom pre tento projekt",
+      "states_not_found": "Stavy projektu sa nenašli",
+      "server_error_states": "Chyba servera pri načítavaní stavov"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Prepojte a synchronizujte svoje repozitáre Bitbucket Data Center s Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Overenie tokenov externých IdP pre prístup k API.",
+    "header_description": "Overujte externe vydané OIDC/JWT tokeny z vášho IdP (Azure AD, Okta atď.) pre prístup k API Plane.",
+    "connected": "Pripojené",
+    "connect": "Pripojiť",
+    "uninstall": "Odinštalovať",
+    "uninstalling": "Odinštalovanie...",
+    "install_success": "OAuth Bridge úspešne nainštalovaný.",
+    "install_error": "Nepodarilo sa nainštalovať OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge odinštalovaný.",
+    "uninstall_error": "Nepodarilo sa odinštalovať OAuth Bridge.",
+    "token_providers": "Poskytovatelia tokenov",
+    "token_providers_description": "Nakonfigurujte externých IdP, ktorých JWT sú akceptované ako API prihlasovacie údaje.",
+    "add_provider": "Pridať poskytovateľa",
+    "edit_provider": "Upraviť poskytovateľa",
+    "enabled": "Povolené",
+    "disabled": "Zakázané",
+    "test": "Test",
+    "no_providers_title": "Žiadni poskytovatelia nie sú nakonfigurovaní.",
+    "no_providers_description": "Pridajte IdP na povolenie overovania externými tokenmi.",
+    "provider_updated": "Poskytovateľ aktualizovaný.",
+    "provider_added": "Poskytovateľ pridaný.",
+    "provider_save_error": "Nepodarilo sa uložiť poskytovateľa.",
+    "provider_deleted": "Poskytovateľ zmazaný.",
+    "provider_delete_error": "Nepodarilo sa zmazať poskytovateľa.",
+    "provider_update_error": "Nepodarilo sa aktualizovať poskytovateľa.",
+    "jwks_reachable": "JWKS dostupný",
+    "jwks_unreachable": "JWKS nedostupný",
+    "jwks_test_error": "Nepodarilo sa získať JWKS z nakonfigurovanej URL.",
+    "provider_form": {
+      "name_label": "Názov",
+      "name_placeholder": "napr. Azure AD Production",
+      "name_description": "Čitateľný popisok pre tohto poskytovateľa identity",
+      "name_required": "Názov je povinný.",
+      "issuer_label": "Vydavateľ",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Očakávaná hodnota claim iss v JWT",
+      "issuer_required": "Vydavateľ je povinný.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "HTTPS endpoint poskytujúci JSON Web Key Set poskytovateľa",
+      "jwks_url_required": "URL JWKS je povinná.",
+      "jwks_url_https": "URL JWKS musí používať HTTPS.",
+      "audience_label": "Publikum",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Očakávané claim(y) aud v JWT, oddelené čiarkami.",
+      "user_claims_label": "Claim používateľa",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "JWT claim obsahujúci e-mailovú adresu používateľa",
+      "user_claims_required": "Claim používateľa je povinný.",
+      "allowed_algorithms_label": "Povolené podpisové algoritmy",
+      "allowed_algorithms_description": "Asymetrické algoritmy pre overenie podpisu JWT",
+      "allowed_algorithms_required": "Je vyžadovaný aspoň jeden algoritmus.",
+      "select_algorithms": "Vyberte algoritmy",
+      "jwks_cache_ttl_label": "TTL vyrovnávacej pamäte JWKS (sekundy)",
+      "jwks_cache_ttl_description": "Doba ukladania kľúčov JWKS poskytovateľa do vyrovnávacej pamäte (minimum 60s, predvolene 24 hodín)",
+      "jwks_cache_ttl_min": "TTL vyrovnávacej pamäte musí byť aspoň 60 sekúnd.",
+      "rate_limit_label": "Limit požiadaviek",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Obmedzenie požiadaviek ako počet/obdobie (napr. 120/minute). Ponechajte prázdne pre predvolený limit.",
+      "enable_provider": "Povoliť tohto poskytovateľa",
+      "saving": "Ukladanie...",
+      "update": "Aktualizovať"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Pripojte a synchronizujte vašu GitHub Enterprise organizáciu s Plane.",
+    "app_form_title": "Konfigurácia GitHub Enterprise",
+    "app_form_description": "Konfigurujte GitHub Enterprise pre pripojenie s Plane.",
+    "app_id_title": "App ID",
+    "app_id_description": "ID aplikácie, ktorú ste vytvorili v vašej GitHub Enterprise organizácii.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "ID aplikácie je povinný",
+    "app_name_title": "App Slug",
+    "app_name_description": "Slug aplikácie, ktorú ste vytvorili v vašej GitHub Enterprise organizácii.",
+    "app_name_error": "Slug aplikácie je povinný",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "Základná URL",
+    "base_url_description": "Základná URL vašej GitHub Enterprise organizácie.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "Základná URL je povinná",
+    "invalid_base_url_error": "Neplatná základná URL",
+    "client_id_title": "ID klienta",
+    "client_id_description": "ID klienta aplikácie, ktorú ste vytvorili v vašej GitHub Enterprise organizácii.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID klienta je povinný",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Secret klienta aplikácie, ktorú ste vytvorili v vašej GitHub Enterprise organizácii.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Secret klienta je povinný",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Secret webhooku aplikácie, ktorú ste vytvorili v vašej GitHub Enterprise organizácii.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Secret webhooku je povinný",
+    "private_key_title": "Privátny kľúč (Base64 encoded)",
+    "private_key_description": "Base64 encoded privátny kľúč aplikácie, ktorú ste vytvorili v vašej GitHub Enterprise organizácii.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Privátny kľúč je povinný",
+    "connect_app": "Pripojiť aplikáciu"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Poskytnuté parametre dotazu sú neplatné alebo chýbajú povinné polia",
+    "invalid_installation_account": "Poskytnutý inštalačný účet nie je platný",
+    "generic_error": "Pri spracovaní vašej požiadavky sa vyskytla neočakávaná chyba",
+    "connection_not_found": "Požadované pripojenie nebolo nájdené",
+    "multiple_connections_found": "Bolo nájdených viacero pripojení, keď sa očakávalo iba jedno",
+    "cannot_create_multiple_connections": "Už ste prepojili svoju organizáciu s pracovným priestorom. Pred pripojením nového prepojenia najprv odpojte existujúce.",
+    "installation_not_found": "Požadovaná inštalácia nebola nájdená",
+    "user_not_found": "Požadovaný používateľ nebol nájdený",
+    "error_fetching_token": "Zlyhalo načítanie autentifikačného tokenu",
+    "invalid_app_credentials": "Poskytnuté údaje aplikácie sú neplatné",
+    "invalid_app_installation_id": "Nepodarilo sa nainštalovať aplikáciu"
+  },
+  "import_status": {
+    "queued": "V poradí",
+    "created": "Vytvorené",
+    "initiated": "Iniciované",
+    "pulling": "Sťahuje sa",
+    "timed_out": "Časový limit vypršal",
+    "pulled": "Stiahnuté",
+    "progressing": "Prebieha",
+    "transforming": "Transformuje sa",
+    "transformed": "Transformované",
+    "pushing": "Nahrávajú sa",
+    "finished": "Dokončené",
+    "error": "Chyba",
+    "cancelled": "Zrušené"
+  }
+}
diff --git a/packages/i18n/src/locales/sk/module.json b/packages/i18n/src/locales/sk/module.json
new file mode 100644
index 0000000..b896af4
--- /dev/null
+++ b/packages/i18n/src/locales/sk/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Modul} few {Moduly} other {Modulov}}",
+    "no_module": "Žiadny modul",
+    "select": "Pridať moduly"
+  }
+}
diff --git a/packages/i18n/src/locales/sk/navigation.json b/packages/i18n/src/locales/sk/navigation.json
new file mode 100644
index 0000000..0d09286
--- /dev/null
+++ b/packages/i18n/src/locales/sk/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Nenašli sa žiadne výsledky"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Poznámky",
+    "your_work": "Vaša práca",
+    "projects": "Projekty",
+    "pages": "Stránky",
+    "new_work_item": "Nová pracovná položka",
+    "home": "Domov",
+    "inbox": "Doručená pošta",
+    "workspace": "Pracovný priestor",
+    "views": "Pohľady",
+    "analytics": "Analytika",
+    "work_items": "Pracovné položky",
+    "cycles": "Cykly",
+    "modules": "Moduly",
+    "intake": "Príjem",
+    "drafts": "Koncepty",
+    "favorites": "Obľúbené",
+    "pro": "Pro",
+    "upgrade": "Upgrade",
+    "pi_chat": "AI Čet",
+    "epics": "Epiky",
+    "upgrade_plan": "Apgrejd plán",
+    "plane_pro": "Plejn Pro",
+    "business": "Biznis"
+  }
+}
diff --git a/packages/i18n/src/locales/sk/notification.json b/packages/i18n/src/locales/sk/notification.json
new file mode 100644
index 0000000..9624d2a
--- /dev/null
+++ b/packages/i18n/src/locales/sk/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Schránka",
+    "page_label": "{workspace} - Schránka",
+    "options": {
+      "mark_all_as_read": "Označiť všetko ako prečítané",
+      "mark_read": "Označiť ako prečítané",
+      "mark_unread": "Označiť ako neprečítané",
+      "refresh": "Obnoviť",
+      "filters": "Filtre schránky",
+      "show_unread": "Zobraziť neprečítané",
+      "show_snoozed": "Zobraziť odložené",
+      "show_archived": "Zobraziť archivované",
+      "mark_archive": "Archivovať",
+      "mark_unarchive": "Zrušiť archiváciu",
+      "mark_snooze": "Odložiť",
+      "mark_unsnooze": "Zrušiť odloženie"
+    },
+    "toasts": {
+      "read": "Oznámenie prečítané",
+      "unread": "Označené ako neprečítané",
+      "archived": "Archivované",
+      "unarchived": "Archivácia zrušená",
+      "snoozed": "Odložené",
+      "unsnoozed": "Odloženie zrušené"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Vyberte pre podrobnosti."
+      },
+      "all": {
+        "title": "Žiadne priradené položky",
+        "description": "Aktualizácie k priradeným položkám sa zobrazia tu."
+      },
+      "mentions": {
+        "title": "Žiadne zmienky",
+        "description": "Zobrazia sa tu zmienky o vás."
+      }
+    },
+    "tabs": {
+      "all": "Všetko",
+      "mentions": "Zmienky"
+    },
+    "filter": {
+      "assigned": "Priradené mne",
+      "created": "Vytvoril som",
+      "subscribed": "Odobieram"
+    },
+    "snooze": {
+      "1_day": "1 deň",
+      "3_days": "3 dni",
+      "5_days": "5 dní",
+      "1_week": "1 týždeň",
+      "2_weeks": "2 týždne",
+      "custom": "Vlastné"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/page.json b/packages/i18n/src/locales/sk/page.json
new file mode 100644
index 0000000..b5833f0
--- /dev/null
+++ b/packages/i18n/src/locales/sk/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Osnova",
+        "empty_state": {
+          "title": "Chýbajú nadpisy",
+          "description": "Pridajme na túto stránku nejaké nadpisy, aby sa tu zobrazili."
+        }
+      },
+      "info": {
+        "label": "Info",
+        "document_info": {
+          "words": "Slová",
+          "characters": "Znaky",
+          "paragraphs": "Odseky",
+          "read_time": "Čas čítania"
+        },
+        "actors_info": {
+          "edited_by": "Upravil",
+          "created_by": "Vytvoril"
+        },
+        "version_history": {
+          "label": "História verzií",
+          "current_version": "Aktuálna verzia",
+          "highlight_changes": "Zvýrazniť zmeny"
+        }
+      },
+      "assets": {
+        "label": "Prílohy",
+        "download_button": "Stiahnuť",
+        "empty_state": {
+          "title": "Chýbajú obrázky",
+          "description": "Pridajte obrázky, aby sa tu zobrazili."
+        }
+      },
+      "comments": {
+        "label": "Komentáre",
+        "empty_state": {
+          "title": "Žiadne komentáre",
+          "description": "Pridávajte komentáre, aby ste ich videli tu."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Názov poznámky nemôže mať viac ako 100 znakov.",
+        "already_exists": "Už existuje poznámka bez popisu"
+      },
+      "created": {
+        "title": "Poznámka bola vytvorená",
+        "message": "Poznámka bola úspešne vytvorená"
+      },
+      "not_created": {
+        "title": "Poznámka nebola vytvorená",
+        "message": "Poznámku sa nepodarilo vytvoriť"
+      },
+      "updated": {
+        "title": "Poznámka bola aktualizovaná",
+        "message": "Poznámka bola úspešne aktualizovaná"
+      },
+      "not_updated": {
+        "title": "Poznámka nebola aktualizovaná",
+        "message": "Poznámku sa nepodarilo aktualizovať"
+      },
+      "removed": {
+        "title": "Poznámka bola odstránená",
+        "message": "Poznámka bola úspešne odstránená"
+      },
+      "not_removed": {
+        "title": "Poznámka nebola odstránená",
+        "message": "Poznámku sa nepodarilo odstrániť"
+      }
+    },
+    "open_button": "Otvoriť navigačný panel",
+    "close_button": "Zavrieť navigačný panel",
+    "outline_floating_button": "Otvoriť osnovu"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Presunúť",
+        "loading": "Presúvanie"
+      },
+      "cannot_move_to_teamspace": "Súkromné a zdieľané stránky nie je možné presunúť do tímspejsu.",
+      "placeholders": {
+        "workspace_to_all": "Hľadať projekty a tímspejsy",
+        "workspace_to_project": "Hľadať projekty",
+        "project_to_all": "Hľadať projekty a tímspejsy",
+        "project_to_project": "Hľadať projekty",
+        "project_to_all_with_wiki": "Hľadať wiki kolekcie, projekty a tímové priestory",
+        "project_to_project_with_wiki": "Hľadať wiki kolekcie a projekty"
+      },
+      "toasts": {
+        "success": {
+          "title": "Úspech!",
+          "message": "Stránka bola úspešne presunutá."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Stránku nebolo možné presunúť. Skúste to prosím neskôr."
+        },
+        "collection_error": {
+          "title": "Presunuté do wiki",
+          "message": "Stránka bola presunutá do wiki, ale nepodarilo sa ju pridať do vybratej kolekcie. Zostáva v General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Odstrániť z kolekcie",
+      "success_message": "Stránka bola odstránená z kolekcie.",
+      "error_message": "Stránku sa nepodarilo odstrániť z kolekcie. Skúste to prosím znova."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Bol dosiahnutý limit obsahu a živá synchronizácia je vypnutá. Vytvorte novú stránku alebo použite vnorené stránky na pokračovanie synchronizácie."
+  }
+}
diff --git a/packages/i18n/src/locales/sk/power-k.json b/packages/i18n/src/locales/sk/power-k.json
new file mode 100644
index 0000000..5117a68
--- /dev/null
+++ b/packages/i18n/src/locales/sk/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Hromadne odstrániť pracovné položky"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Akcie pre pracovnú položku",
+        "indicator": "Pracovná položka",
+        "change_state": "Zmeniť stav",
+        "change_priority": "Zmeniť prioritu",
+        "change_assignees": "Priradiť",
+        "assign_to_me": "Priradiť mne",
+        "unassign_from_me": "Zrušiť priradenie mne",
+        "change_estimate": "Zmeniť odhad",
+        "add_to_cycle": "Pridať do cyklu",
+        "add_to_modules": "Pridať do modulov",
+        "add_labels": "Pridať štítky",
+        "subscribe": "Odoberať oznámenia",
+        "unsubscribe": "Zrušiť odber oznámení",
+        "delete": "Odstrániť",
+        "copy_id": "Kopírovať ID",
+        "copy_id_toast_success": "ID pracovnej položky bolo skopírované do schránky.",
+        "copy_id_toast_error": "Pri kopírovaní ID pracovnej položky do schránky sa vyskytla chyba.",
+        "copy_title": "Kopírovať názov",
+        "copy_title_toast_success": "Názov pracovnej položky bol skopírovaný do schránky.",
+        "copy_title_toast_error": "Pri kopírovaní názvu pracovnej položky do schránky sa vyskytla chyba.",
+        "copy_url": "Kopírovať URL",
+        "copy_url_toast_success": "URL pracovnej položky bola skopírovaná do schránky.",
+        "copy_url_toast_error": "Pri kopírovaní URL pracovnej položky do schránky sa vyskytla chyba."
+      },
+      "cycle": {
+        "title": "Akcie pre cyklus",
+        "indicator": "Cyklus",
+        "add_to_favorites": "Pridať do obľúbených",
+        "remove_from_favorites": "Odstrániť z obľúbených",
+        "copy_url": "Kopírovať URL",
+        "copy_url_toast_success": "URL cyklu bola skopírovaná do schránky.",
+        "copy_url_toast_error": "Pri kopírovaní URL cyklu do schránky sa vyskytla chyba."
+      },
+      "module": {
+        "title": "Akcie pre modul",
+        "indicator": "Modul",
+        "add_remove_members": "Pridať/odstrániť členov",
+        "change_status": "Zmeniť stav",
+        "add_to_favorites": "Pridať do obľúbených",
+        "remove_from_favorites": "Odstrániť z obľúbených",
+        "copy_url": "Kopírovať URL",
+        "copy_url_toast_success": "URL modulu bola skopírovaná do schránky.",
+        "copy_url_toast_error": "Pri kopírovaní URL modulu do schránky sa vyskytla chyba."
+      },
+      "page": {
+        "title": "Akcie pre stránku",
+        "indicator": "Stránka",
+        "lock": "Uzamknúť",
+        "unlock": "Odomknúť",
+        "make_private": "Nastaviť ako súkromnú",
+        "make_public": "Nastaviť ako verejnú",
+        "archive": "Archivovať",
+        "restore": "Obnoviť",
+        "add_to_favorites": "Pridať do obľúbených",
+        "remove_from_favorites": "Odstrániť z obľúbených",
+        "copy_url": "Kopírovať URL",
+        "copy_url_toast_success": "URL stránky bola skopírovaná do schránky.",
+        "copy_url_toast_error": "Pri kopírovaní URL stránky do schránky sa vyskytla chyba."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Nová pracovná položka",
+      "create_page": "Nová stránka",
+      "create_view": "Nový pohľad",
+      "create_cycle": "Nový cyklus",
+      "create_module": "Nový modul",
+      "create_project": "Nový projekt",
+      "create_workspace": "Nový pracovný priestor",
+      "create_project_automation": "Nová automatizácia"
+    },
+    "navigation_actions": {
+      "open_workspace": "Otvoriť pracovný priestor",
+      "nav_home": "Prejsť na domov",
+      "nav_inbox": "Prejsť na doručenú poštu",
+      "nav_your_work": "Prejsť na vašu prácu",
+      "nav_account_settings": "Prejsť na nastavenia účtu",
+      "open_project": "Otvoriť projekt",
+      "nav_projects_list": "Prejsť na zoznam projektov",
+      "nav_all_workspace_work_items": "Prejsť na všetky pracovné položky",
+      "nav_assigned_workspace_work_items": "Prejsť na priradené pracovné položky",
+      "nav_created_workspace_work_items": "Prejsť na vytvorené pracovné položky",
+      "nav_subscribed_workspace_work_items": "Prejsť na odoberané pracovné položky",
+      "nav_workspace_analytics": "Prejsť na analytiku pracovného priestoru",
+      "nav_workspace_drafts": "Prejsť na koncepty pracovného priestoru",
+      "nav_workspace_archives": "Prejsť na archívy pracovného priestoru",
+      "open_workspace_setting": "Otvoriť nastavenie pracovného priestoru",
+      "nav_workspace_settings": "Prejsť na nastavenia pracovného priestoru",
+      "nav_project_work_items": "Prejsť na pracovné položky",
+      "open_project_cycle": "Otvoriť cyklus",
+      "nav_project_cycles": "Prejsť na cykly",
+      "open_project_module": "Otvoriť modul",
+      "nav_project_modules": "Prejsť na moduly",
+      "open_project_view": "Otvoriť pohľad projektu",
+      "nav_project_views": "Prejsť na pohľady projektu",
+      "nav_project_pages": "Prejsť na stránky",
+      "nav_project_intake": "Prejsť na príjem",
+      "nav_project_archives": "Prejsť na archívy projektu",
+      "open_project_setting": "Otvoriť nastavenie projektu",
+      "nav_project_settings": "Prejsť na nastavenia projektu",
+      "nav_workspace_active_cycle": "Prejsť na všetky aktívne cykly",
+      "nav_project_overview": "Prejsť na prehľad projektu"
+    },
+    "account_actions": {
+      "sign_out": "Odhlásiť sa",
+      "workspace_invites": "Pozvánky do pracovného priestoru"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Prepnúť bočný panel aplikácie",
+      "copy_current_page_url": "Kopírovať URL aktuálnej stránky",
+      "copy_current_page_url_toast_success": "URL aktuálnej stránky bola skopírovaná do schránky.",
+      "copy_current_page_url_toast_error": "Pri kopírovaní URL aktuálnej stránky do schránky sa vyskytla chyba.",
+      "focus_top_nav_search": "Zamerať vyhľadávacie pole"
+    },
+    "preferences_actions": {
+      "update_theme": "Zmeniť tému rozhrania",
+      "update_timezone": "Zmeniť časové pásmo",
+      "update_start_of_week": "Zmeniť prvý deň týždňa",
+      "update_language": "Zmeniť jazyk rozhrania",
+      "toast": {
+        "theme": {
+          "success": "Téma bola úspešne aktualizovaná.",
+          "error": "Aktualizácia témy zlyhala. Skúste to prosím znova."
+        },
+        "timezone": {
+          "success": "Časové pásmo bolo úspešne aktualizované.",
+          "error": "Aktualizácia časového pásma zlyhala. Skúste to prosím znova."
+        },
+        "generic": {
+          "success": "Predvoľby boli úspešne aktualizované.",
+          "error": "Aktualizácia predvolieb zlyhala. Skúste to prosím znova."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Otvoriť klávesové skratky",
+      "open_plane_documentation": "Otvoriť dokumentáciu Plane",
+      "join_forum": "Pripojiť sa na naše fórum",
+      "report_bug": "Nahlásiť chybu",
+      "chat_with_us": "Chatovať s nami"
+    },
+    "page_placeholders": {
+      "default": "Zadajte príkaz alebo vyhľadajte",
+      "open_workspace": "Otvoriť pracovný priestor",
+      "open_project": "Otvoriť projekt",
+      "open_workspace_setting": "Otvoriť nastavenie pracovného priestoru",
+      "open_project_cycle": "Otvoriť cyklus",
+      "open_project_module": "Otvoriť modul",
+      "open_project_view": "Otvoriť pohľad projektu",
+      "open_project_setting": "Otvoriť nastavenie projektu",
+      "update_work_item_state": "Zmeniť stav",
+      "update_work_item_priority": "Zmeniť prioritu",
+      "update_work_item_assignee": "Priradiť",
+      "update_work_item_estimate": "Zmeniť odhad",
+      "update_work_item_cycle": "Pridať do cyklu",
+      "update_work_item_module": "Pridať do modulov",
+      "update_work_item_labels": "Pridať štítky",
+      "update_module_member": "Zmeniť členov",
+      "update_module_status": "Zmeniť stav",
+      "update_theme": "Zmeniť tému",
+      "update_timezone": "Zmeniť časové pásmo",
+      "update_start_of_week": "Zmeniť prvý deň týždňa",
+      "update_language": "Zmeniť jazyk"
+    },
+    "search_menu": {
+      "no_results": "Nenašli sa žiadne výsledky",
+      "clear_search": "Vymazať vyhľadávanie",
+      "go_to_advanced_search": "Prejsť na pokročilé vyhľadávanie"
+    },
+    "footer": {
+      "workspace_level": "Úroveň pracovného priestoru"
+    },
+    "group_titles": {
+      "actions": "Akcie",
+      "contextual": "Kontextové",
+      "navigation": "Navigácia",
+      "create": "Vytvoriť",
+      "general": "Všeobecné",
+      "settings": "Nastavenia",
+      "account": "Účet",
+      "miscellaneous": "Rôzne",
+      "preferences": "Predvoľby",
+      "help": "Pomoc"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/project-settings.json b/packages/i18n/src/locales/sk/project-settings.json
new file mode 100644
index 0000000..18ce015
--- /dev/null
+++ b/packages/i18n/src/locales/sk/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Zadajte ID projektu",
+      "please_select_a_timezone": "Vyberte časové pásmo",
+      "archive_project": {
+        "title": "Archivovať projekt",
+        "description": "Archivácia skryje projekt z menu. Prístup zostane cez stránku projektov.",
+        "button": "Archivovať projekt"
+      },
+      "delete_project": {
+        "title": "Zmazať projekt",
+        "description": "Zmazaním projektu odstránite všetky dáta. Akcia je nevratná.",
+        "button": "Zmazať projekt"
+      },
+      "toast": {
+        "success": "Projekt aktualizovaný",
+        "error": "Aktualizácia zlyhala. Skúste to znova."
+      }
+    },
+    "members": {
+      "label": "Členovia",
+      "project_lead": "Vedúci projektu",
+      "project_lead_description": "Vyberte vedúceho projektu.",
+      "default_assignee": "Predvolené priradenie",
+      "default_assignee_description": "Vyberte predvoleného priradeného pre projekt.",
+      "project_subscribers": "Odberatelia projektu",
+      "project_subscribers_description": "Vyberte členov, ktorí budú dostávať upozornenia pre tento projekt.",
+      "guest_super_permissions": {
+        "title": "Udeľovať hosťom prístup ku všetkým položkám:",
+        "sub_heading": "Hostia uvidia všetky položky v projekte."
+      },
+      "invite_members": {
+        "title": "Pozvať členov",
+        "sub_heading": "Pozvite členov do projektu.",
+        "select_co_worker": "Vybrať spolupracovníka"
+      }
+    },
+    "states": {
+      "heading": "Stavy",
+      "description": "Definujte a prispôsobte stavy pracovného postupu na sledovanie priebehu vašich pracovných položiek.",
+      "describe_this_state_for_your_members": "Opíšte tento stav členom.",
+      "empty_state": {
+        "title": "Žiadne stavy pre skupinu {groupKey}",
+        "description": "Vytvorte nový stav"
+      }
+    },
+    "labels": {
+      "heading": "Štítky",
+      "description": "Vytvorte vlastné štítky na kategorizáciu a organizáciu pracovných položiek",
+      "label_title": "Názov štítka",
+      "label_title_is_required": "Názov štítka je povinný",
+      "label_max_char": "Názov štítka nesmie presiahnuť 255 znakov",
+      "toast": {
+        "error": "Chyba pri aktualizácii štítka"
+      }
+    },
+    "estimates": {
+      "heading": "Odhady",
+      "description": "Pomáhajú vám komunikovať zložitosť a pracovné zaťaženie tímu.",
+      "label": "Odhady",
+      "title": "Povoliť odhady pre môj projekt",
+      "enable_description": "Pomáhajú vám komunikovať zložitosť a vyťaženie tímu.",
+      "no_estimate": "Bez odhadu",
+      "new": "Nový systém odhadov",
+      "create": {
+        "custom": "Vlastné",
+        "start_from_scratch": "Začať od nuly",
+        "choose_template": "Vybrať šablónu",
+        "choose_estimate_system": "Vybrať systém odhadov",
+        "enter_estimate_point": "Zadať bod odhadu",
+        "step": "Krok {step} z {total}",
+        "label": "Vytvoriť odhad"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Bod odhadu vytvorený",
+            "message": "Bod odhadu bol úspešne vytvorený"
+          },
+          "error": {
+            "title": "Vytvorenie bodu odhadu zlyhalo",
+            "message": "Nepodarilo sa vytvoriť nový bod odhadu, skúste to prosím znova."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Odhad upravený",
+            "message": "Bod odhadu bol aktualizovaný vo vašom projekte."
+          },
+          "error": {
+            "title": "Úprava odhadu zlyhala",
+            "message": "Nepodarilo sa upraviť odhad, skúste to prosím znova"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Úspech!",
+            "message": "Odhady boli povolené."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Úspech!",
+            "message": "Odhady boli zakázané."
+          },
+          "error": {
+            "title": "Chyba!",
+            "message": "Odhad sa nepodarilo zakázať. Skúste to prosím znova"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Odhady boli preusporiadané",
+            "message": "Odhady boli preusporiadané vo vašom projekte."
+          },
+          "error": {
+            "title": "Preusporiadanie odhadov zlyhalo",
+            "message": "Nepodarilo sa preusporiadať odhady, skúste to prosím znova"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Systém odhadov bol vytvorený",
+            "message": "Úspešne vytvorené a povolené"
+          },
+          "error": {
+            "title": "Chyba",
+            "message": "Niečo sa pokazilo"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Bod odhadu musí byť väčší ako 0.",
+        "unable_to_process": "Nemôžeme spracovať vašu požiadavku, skúste to prosím znova.",
+        "numeric": "Bod odhadu musí byť číselná hodnota.",
+        "character": "Bod odhadu musí byť znakovou hodnotou.",
+        "empty": "Hodnota odhadu nemôže byť prázdna.",
+        "already_exists": "Hodnota odhadu už existuje.",
+        "unsaved_changes": "Máte neuložené zmeny. Prosím, uložte ich pred kliknutím na hotovo",
+        "remove_empty": "Odhad nemôže byť prázdny. Zadajte hodnotu do každého poľa alebo odstráňte prázdne polia.",
+        "fill": "Prosím vyplňte toto pole odhadu",
+        "repeat": "Hodnota odhadu sa nemôže opakovať"
+      },
+      "systems": {
+        "points": {
+          "label": "Body",
+          "fibonacci": "Fibonacci",
+          "linear": "Lineárne",
+          "squares": "Štvorce",
+          "custom": "Vlastné"
+        },
+        "categories": {
+          "label": "Kategórie",
+          "t_shirt_sizes": "Veľkosti tričiek",
+          "easy_to_hard": "Od jednoduchého po náročné",
+          "custom": "Vlastné"
+        },
+        "time": {
+          "label": "Čas",
+          "hours": "Hodiny"
+        }
+      },
+      "edit": {
+        "title": "Upraviť systém odhadov",
+        "add_or_update": {
+          "title": "Pridať, aktualizovať alebo odstrániť odhady",
+          "description": "Spravujte aktuálny systém pridávaním, aktualizáciou alebo odstraňovaním bodov alebo kategórií."
+        },
+        "switch": {
+          "title": "Zmeniť typ odhadu",
+          "description": "Konvertujte váš bodový systém na systém kategórií a naopak."
+        }
+      },
+      "switch": "Prepnúť systém odhadov",
+      "current": "Aktuálny systém odhadov",
+      "select": "Vyberte systém odhadov"
+    },
+    "automations": {
+      "label": "Automatizácie",
+      "heading": "Automatizácie",
+      "description": "Nakonfigurujte automatizované akcie na zefektívnenie riadenia projektu a zníženie manuálnej práce.",
+      "auto-archive": {
+        "title": "Automaticky archivovať uzavreté položky",
+        "description": "Plane bude archivovať dokončené alebo zrušené položky.",
+        "duration": "Archivovať položky uzavreté dlhšie ako"
+      },
+      "auto-close": {
+        "title": "Automaticky uzatvárať položky",
+        "description": "Plane uzavrie neaktívne položky.",
+        "duration": "Uzatvoriť položky neaktívne dlhšie ako",
+        "auto_close_status": "Stav pre automatické uzatvorenie"
+      },
+      "auto-remind": {
+        "title": "Automatické upozornenia",
+        "description": "Plane automaticky bude poslať upozornenia cez email a notifikácie v aplikácii, aby vaša ekipa zostala na ceste s termínmi.",
+        "duration": "Poslať upozornenie pred"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Žiadne štítky",
+        "description": "Vytvárajte štítky na organizáciu položiek."
+      },
+      "estimates": {
+        "title": "Žiadne systémy odhadov",
+        "description": "Vytvorte systém odhadov na komunikáciu vyťaženia.",
+        "primary_button": "Pridať systém odhadov"
+      },
+      "integrations": {
+        "title": "Žiadne nakonfigurované integrácie",
+        "description": "Nakonfigurujte GitHub a ďalšie integrácie na synchronizáciu vašich projektových pracovných položiek."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Povoliť pracovné postupy",
+        "description": "Nastavte pracovné postupy na riadenie pohybu pracovných položiek",
+        "no_states_tooltip": "Do pracovného postupu nie sú pridané žiadne stavy.",
+        "no_work_item_types_tooltip": "Do pracovného postupu nie sú pridané žiadne typy pracovných položiek.",
+        "no_states_or_work_item_types_tooltip": "Do pracovného postupu nie sú pridané žiadne stavy ani typy pracovných položiek.",
+        "toast": {
+          "loading": {
+            "enabling": "Povoľovanie pracovných postupov",
+            "disabling": "Zakazovanie pracovných postupov"
+          },
+          "success": {
+            "title": "Úspech!",
+            "message": "Pracovné postupy boli úspešne povolené."
+          },
+          "error": {
+            "title": "Chyba!",
+            "message": "Povolenie pracovných postupov zlyhalo. Skúste to prosím znova."
+          }
+        }
+      },
+      "heading": "Pracovné postupy",
+      "description": "Automatizujte prechody pracovných položiek a nastavte pravidlá, ktorými sa bude riadiť pohyb úloh vaším projektom.",
+      "add_button": "Pridať nový pracovný postup",
+      "search": "Hľadať pracovné postupy",
+      "detail": {
+        "define": "Definovať pracovný postup",
+        "add_states": "Pridať stavy",
+        "unmapped_states": {
+          "title": "Zistené nenamapované stavy",
+          "description": "Niektoré pracovné položky vybraných typov sa aktuálne nachádzajú v stavoch, ktoré v tomto pracovnom postupe neexistujú.",
+          "note": "Ak tento pracovný postup povolíte, tieto položky sa automaticky presunú do počiatočného stavu tohto pracovného postupu.",
+          "label": "Chýbajúce stavy",
+          "tooltip": "Niektoré pracovné položky sú v stavoch, ktoré nie sú namapované na tento pracovný postup. Otvorte pracovný postup a skontrolujte."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Všetky stavy sa už používajú",
+          "description": "Všetky definované stavy tohto projektu sú už vo vašom aktuálnom pracovnom postupe."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Tento pracovný postup platí pre všetky typy pracovných položiek, ktoré nie sú priradené k pracovnému postupu."
+      },
+      "create": {
+        "heading": "Vytvoriť nový pracovný postup",
+        "name": {
+          "placeholder": "Pridajte jedinečný názov",
+          "validation": {
+            "max_length": "Názov musí mať menej ako 255 znakov",
+            "required": "Názov je povinný",
+            "invalid": "Názov môže obsahovať len písmená, čísla, medzery, pomlčky a apostrofy"
+          }
+        },
+        "description": {
+          "placeholder": "Pridajte krátky popis",
+          "validation": {
+            "invalid": "Popis môže obsahovať len písmená, čísla, medzery, pomlčky a apostrofy"
+          }
+        },
+        "work_item_type": {
+          "label": "Typ pracovnej položky"
+        },
+        "success": {
+          "title": "Úspech!",
+          "message": "Pracovný postup bol úspešne vytvorený."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Vytvorenie pracovného postupu zlyhalo. Skúste to prosím znova."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Úspech!",
+          "message": "Pracovný postup bol úspešne aktualizovaný."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Aktualizácia pracovného postupu zlyhala. Skúste to prosím znova."
+        }
+      },
+      "delete": {
+        "loading": "Mazanie pracovného postupu",
+        "success": {
+          "title": "Úspech!",
+          "message": "Pracovný postup bol úspešne odstránený."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Odstránenie pracovného postupu zlyhalo. Skúste to prosím znova."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Úspech!",
+          "message": "Stavy boli úspešne pridané."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Pridanie stavov zlyhalo. Skúste to prosím znova."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Typy pracovných položiek",
+      "description": "Vytvárajte a prispôsobujte rôzne typy pracovných položiek s jedinečnými vlastnosťami"
+    },
+    "features": {
+      "cycles": {
+        "title": "Cykly",
+        "short_title": "Cykly",
+        "description": "Naplánujte prácu v flexibilných obdobiach, ktoré sa prispôsobia jedinečnému rytmu a tempu tohto projektu.",
+        "toggle_title": "Povoliť cykly",
+        "toggle_description": "Naplánujte prácu v sústredenej časovej osi."
+      },
+      "modules": {
+        "title": "Moduly",
+        "short_title": "Moduly",
+        "description": "Organizujte prácu do podprojektov s vyčlenenými vedúcimi a priradenými osobami.",
+        "toggle_title": "Povoliť moduly",
+        "toggle_description": "Členovia projektu budú môcť vytvárať a upravovať moduly."
+      },
+      "views": {
+        "title": "Zobrazenia",
+        "short_title": "Zobrazenia",
+        "description": "Uložte vlastné triedenia, filtre a možnosti zobrazenia alebo ich zdieľajte so svojím tímom.",
+        "toggle_title": "Povoliť zobrazenia",
+        "toggle_description": "Členovia projektu budú môcť vytvárať a upravovať zobrazenia."
+      },
+      "pages": {
+        "title": "Stránky",
+        "short_title": "Stránky",
+        "description": "Vytvárajte a upravujte voľný obsah: poznámky, dokumenty, čokoľvek.",
+        "toggle_title": "Povoliť stránky",
+        "toggle_description": "Členovia projektu budú môcť vytvárať a upravovať stránky."
+      },
+      "intake": {
+        "intake_responsibility": "Zodpovednosť za príjem",
+        "intake_sources": "Zdroje príjmu",
+        "title": "Príjem",
+        "short_title": "Príjem",
+        "description": "Umožnite nečlenom zdieľať chyby, spätnú väzbu a návrhy; bez narušenia vášho pracovného postupu.",
+        "toggle_title": "Povoliť príjem",
+        "toggle_description": "Povoliť členom projektu vytvárať žiadosti o príjem v aplikácii.",
+        "toggle_tooltip_on": "Požiadajte správcu projektu, aby toto zapol.",
+        "toggle_tooltip_off": "Požiadajte správcu projektu, aby toto vypol.",
+        "notify_assignee": {
+          "title": "Upozorniť priradených",
+          "description": "Pre novú žiadosť o príjem budú predvolení priradení upozornení prostredníctvom oznámení"
+        },
+        "in_app": {
+          "title": "V aplikácii",
+          "description": "Získajte nové pracovné položky od členov a hostí vo vašom pracovnom priestore bez narušenia existujúcich pracovných položiek."
+        },
+        "email": {
+          "title": "E-mail",
+          "description": "Zhromažďujte nové pracovné položky od každého, kto pošle e-mail na Plane e-mailovú adresu.",
+          "fieldName": "ID e-mailu"
+        },
+        "form": {
+          "title": "Formuláre",
+          "description": "Umožnite ľuďom mimo pracovného priestoru vytvárať pre vás potenciálne nové pracovné položky prostredníctvom vyhradeného a bezpečného formulára.",
+          "fieldName": "Predvolená URL formulára",
+          "create_forms": "Vytvárať formuláre pomocou typov pracovných položiek",
+          "manage_forms": "Spravovať formuláre",
+          "manage_forms_tooltip": "Požiadajte správcu pracovného priestoru, aby toto spravoval.",
+          "create_form": "Vytvoriť formulár",
+          "edit_form": "Upraviť detaily formulára",
+          "form_title": "Názov formulára",
+          "form_title_required": "Názov formulára je povinný",
+          "work_item_type": "Typ pracovnej položky",
+          "remove_property": "Odstrániť vlastnosť",
+          "select_properties": "Vybrať vlastnosti",
+          "search_placeholder": "Hľadať vlastnosti",
+          "toasts": {
+            "success_create": "Formulár príjmu bol úspešne vytvorený",
+            "success_update": "Formulár príjmu bol úspešne aktualizovaný",
+            "error_create": "Vytvorenie formulára príjmu zlyhalo",
+            "error_update": "Aktualizácia formulára príjmu zlyhala"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Nastavovanie priradených...",
+            "success": {
+              "title": "Úspech!",
+              "message": "Priradení úspešne nastavení."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Pri nastavovaní priradených sa niečo pokazilo. Skúste to prosím znova."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Sledovanie času",
+        "short_title": "Sledovanie času",
+        "description": "Zaznamenávajte čas strávený na pracovných položkách a projektoch.",
+        "toggle_title": "Povoliť sledovanie času",
+        "toggle_description": "Členovia projektu budú môcť zaznamenávať odpracovaný čas."
+      },
+      "milestones": {
+        "title": "Míľniky",
+        "short_title": "Míľniky",
+        "description": "Míľniky poskytujú vrstvu na zladenie pracovných položiek smerom k spoločným termínom dokončenia.",
+        "toggle_title": "Povoliť míľniky",
+        "toggle_description": "Organizujte pracovné položky podľa termínov míľnikov."
+      },
+      "toasts": {
+        "loading": "Aktualizácia funkcie projektu...",
+        "success": "Funkcia projektu bola úspešne aktualizovaná.",
+        "error": "Pri aktualizácii funkcie projektu sa niečo pokazilo. Skúste to prosím znova."
+      }
+    },
+    "project_updates": {
+      "heading": "Aktualizácie projektu",
+      "description": "Konsolidované sledovanie a monitorovanie priebehu pre tento projekt"
+    },
+    "templates": {
+      "heading": "Šablóny",
+      "description": "Ušetrite 80 % času stráveného vytváraním projektov, pracovných položiek a stránok pomocou šablón."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Automatické plánovanie cyklov",
+        "description": "Udržiavajte cykly v pohybe bez manuálneho nastavenia.",
+        "tooltip": "Automaticky vytvárajte nové cykly na základe zvoleného rozvrhu.",
+        "edit_button": "Upraviť",
+        "form": {
+          "cycle_title": {
+            "label": "Názov cyklu",
+            "placeholder": "Názov",
+            "tooltip": "K názvu budú pridané čísla pre následné cykly. Napríklad: Dizajn - 1/2/3",
+            "validation": {
+              "required": "Názov cyklu je povinný",
+              "max_length": "Názov nesmie presiahnuť 255 znakov"
+            }
+          },
+          "cycle_duration": {
+            "label": "Trvanie cyklu",
+            "unit": "Týždne",
+            "validation": {
+              "required": "Trvanie cyklu je povinné",
+              "min": "Trvanie cyklu musí byť aspoň 1 týždeň",
+              "max": "Trvanie cyklu nemôže presiahnuť 30 týždňov",
+              "positive": "Trvanie cyklu musí byť kladné"
+            }
+          },
+          "cooldown_period": {
+            "label": "Obdobie chladenia",
+            "unit": "dni",
+            "tooltip": "Prestávka medzi cyklami pred začiatkom ďalšieho.",
+            "validation": {
+              "required": "Obdobie chladenia je povinné",
+              "negative": "Obdobie chladenia nemôže byť záporné"
+            }
+          },
+          "start_date": {
+            "label": "Deň začiatku cyklu",
+            "validation": {
+              "required": "Dátum začiatku je povinný",
+              "past": "Dátum začiatku nemôže byť v minulosti"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Počet budúcich cyklov",
+            "validation": {
+              "required": "Počet cyklov je povinný",
+              "min": "Je vyžadovaný aspoň 1 cyklus",
+              "max": "Nie je možné naplánovať viac ako 3 cykly"
+            }
+          },
+          "auto_rollover": {
+            "label": "Automatický prevod pracovných položiek",
+            "tooltip": "V deň dokončenia cyklu presunúť všetky nedokončené pracovné položky do ďalšieho cyklu."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Povoľovanie automatického plánovania cyklov",
+            "loading_disable": "Zakazovanie automatického plánovania cyklov",
+            "success": {
+              "title": "Úspech!",
+              "message": "Automatické plánovanie cyklov bolo úspešne prepnuté."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodarilo sa prepnúť automatické plánovanie cyklov."
+            }
+          },
+          "save": {
+            "loading": "Ukladanie konfigurácie automatického plánovania cyklov",
+            "success": {
+              "title": "Úspech!",
+              "message_create": "Konfigurácia automatického plánovania cyklov bola úspešne uložená.",
+              "message_update": "Konfigurácia automatického plánovania cyklov bola úspešne aktualizovaná."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message_create": "Nepodarilo sa uložiť konfiguráciu automatického plánovania cyklov.",
+              "message_update": "Nepodarilo sa aktualizovať konfiguráciu automatického plánovania cyklov."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/project.json b/packages/i18n/src/locales/sk/project.json
new file mode 100644
index 0000000..7a4e6ee
--- /dev/null
+++ b/packages/i18n/src/locales/sk/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Vytvorené dňa",
+      "updated_at": "Aktualizované dňa",
+      "name": "Názov"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Pridať cyklus",
+    "more_details": "Viac detailov",
+    "cycle": "Cyklus",
+    "update_cycle": "Aktualizovať cyklus",
+    "create_cycle": "Vytvoriť cyklus",
+    "no_matching_cycles": "Žiadne zodpovedajúce cykly",
+    "remove_filters_to_see_all_cycles": "Odstráňte filtre pre zobrazenie všetkých cyklov",
+    "remove_search_criteria_to_see_all_cycles": "Odstráňte kritériá pre zobrazenie všetkých cyklov",
+    "only_completed_cycles_can_be_archived": "Archivovať je možné iba dokončené cykly",
+    "start_date": "Dátum začiatku",
+    "end_date": "Dátum konca",
+    "in_your_timezone": "Váš časový pásmo",
+    "transfer_work_items": "Presunúť {count} pracovných položiek",
+    "transfer": {
+      "no_cycles_available": "Nie sú k dispozícii žiadne iné cykly na prenos pracovných položiek."
+    },
+    "date_range": "Dátumový rozsah",
+    "add_date": "Pridať dátum",
+    "active_cycle": {
+      "label": "Aktívny cyklus",
+      "progress": "Pokrok",
+      "chart": "Burndown graf",
+      "priority_issue": "Vysoko prioritné položky",
+      "assignees": "Priradení",
+      "issue_burndown": "Burndown pracovných položiek",
+      "ideal": "Ideálne",
+      "current": "Aktuálne",
+      "labels": "Štítky",
+      "trailing": "Oneskorenie",
+      "leading": "Náskok"
+    },
+    "upcoming_cycle": {
+      "label": "Nadchádzajúci cyklus"
+    },
+    "completed_cycle": {
+      "label": "Dokončený cyklus"
+    },
+    "status": {
+      "days_left": "Zostáva dní",
+      "completed": "Dokončené",
+      "yet_to_start": "Ešte nezačaté",
+      "in_progress": "Prebieha",
+      "draft": "Koncept"
+    },
+    "action": {
+      "restore": {
+        "title": "Obnoviť cyklus",
+        "success": {
+          "title": "Cyklus obnovený",
+          "description": "Cyklus bol obnovený."
+        },
+        "failed": {
+          "title": "Obnovenie zlyhalo",
+          "description": "Obnovenie cyklu sa nepodarilo."
+        }
+      },
+      "favorite": {
+        "loading": "Pridávanie do obľúbených",
+        "success": {
+          "description": "Cyklus pridaný do obľúbených.",
+          "title": "Úspech!"
+        },
+        "failed": {
+          "description": "Pridanie do obľúbených zlyhalo.",
+          "title": "Chyba!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Odstraňovanie z obľúbených",
+        "success": {
+          "description": "Cyklus odstránený z obľúbených.",
+          "title": "Úspech!"
+        },
+        "failed": {
+          "description": "Odstránenie zlyhalo.",
+          "title": "Chyba!"
+        }
+      },
+      "update": {
+        "loading": "Aktualizácia cyklu",
+        "success": {
+          "description": "Cyklus aktualizovaný.",
+          "title": "Úspech!"
+        },
+        "failed": {
+          "description": "Aktualizácia zlyhala.",
+          "title": "Chyba!"
+        },
+        "error": {
+          "already_exists": "Cyklus s týmito dátami už existuje. Pre koncept odstráňte dáta."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Zoskupujte prácu do cyklov.",
+        "description": "Časovo ohraničte prácu, sledujte termíny a robte pokroky.",
+        "primary_button": {
+          "text": "Vytvorte prvý cyklus",
+          "comic": {
+            "title": "Cykly sú opakované časové obdobia.",
+            "description": "Sprint, iterácia alebo akékoľvek iné časové obdobie na sledovanie práce."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Žiadne položky v cykle",
+        "description": "Pridajte položky, ktoré chcete sledovať.",
+        "primary_button": {
+          "text": "Vytvoriť položku"
+        },
+        "secondary_button": {
+          "text": "Pridať existujúcu položku"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Žiadne položky v cykle",
+        "description": "Položky boli presunuté alebo skryté. Pre zobrazenie upravte vlastnosti."
+      },
+      "active": {
+        "title": "Žiadny aktívny cyklus",
+        "description": "Aktívny cyklus zahŕňa dnešný dátum. Sledujte jeho priebeh tu."
+      },
+      "archived": {
+        "title": "Žiadne archivované cykly",
+        "description": "Archivujte dokončené cykly pre poriadok."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Ukladajte filtre ako pohľady.",
+        "description": "Pohľady sú uložené filtre na jednoduchý prístup. Zdieľajte ich v tíme.",
+        "primary_button": {
+          "text": "Vytvoriť prvý pohľad",
+          "comic": {
+            "title": "Pohľady pracujú s vlastnosťami položiek.",
+            "description": "Vytvorte pohľad s požadovanými filtrami."
+          }
+        },
+        "filter": {
+          "title": "Žiadne zodpovedajúce pohľady",
+          "description": "Žiadne pohľady nezodpovedajú kritériám vyhľadávania.\n Vytvorte namiesto toho nový pohľad."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Zatiaľ žiadne archivované pracovné položky",
+        "description": "Manuálne alebo pomocou automatizácie môžete archivovať pracovné položky, ktoré sú dokončené alebo zrušené. Po archivácii ich nájdete tu.",
+        "primary_button": {
+          "text": "Nastaviť automatizáciu"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Nenašli sa žiadne pracovné položky zodpovedajúce použitým filtrom",
+        "secondary_button": {
+          "text": "Zrušiť všetky filtre"
+        }
+      },
+      "public": {
+        "title": "Zatiaľ žiadne verejné stránky",
+        "description": "Stránky zdieľané so všetkými vo vašom projekte uvidíte tu.",
+        "primary_button": {
+          "text": "Vytvorte svoju prvú stránku"
+        }
+      },
+      "archived": {
+        "title": "Zatiaľ žiadne archivované stránky",
+        "description": "Archivujte stránky, ktoré nepotrebujete. Prístup k nim máte tu, keď ich budete potrebovať."
+      },
+      "shared": {
+        "title": "Zatiaľ žiadne zdieľané stránky",
+        "description": "Stránky, ktoré s vami zdieľali iní, sa zobrazia tu."
+      }
+    },
+    "delete_view": {
+      "title": "Ste si istí, že chcete vymazať toto zobrazenie?",
+      "content": "Ak potvrdíte, všetky možnosti triedenia, filtrovania a zobrazenia + rozloženie, ktoré ste vybrali pre toto zobrazenie, budú natrvalo vymazané bez možnosti obnovenia."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Vytvorte a priraďte pracovnú položku",
+        "description": "Položky sú úlohy, ktoré priraďujete sebe alebo tímu. Sledujte ich postup.",
+        "primary_button": {
+          "text": "Vytvoriť prvú položku",
+          "comic": {
+            "title": "Položky sú stavebnými kameňmi",
+            "description": "Príklady: Redizajn UI, Rebranding, Nový systém."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Žiadne archivované položky",
+        "description": "Archivujte dokončené alebo zrušené položky. Nastavte automatizáciu.",
+        "primary_button": {
+          "text": "Nastaviť automatizáciu"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Žiadne zodpovedajúce položky",
+        "secondary_button": {
+          "text": "Vymazať filtre"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Pridať modul",
+    "update_module": "Aktualizovať modul",
+    "create_module": "Vytvoriť modul",
+    "archive_module": "Archivovať modul",
+    "restore_module": "Obnoviť modul",
+    "delete_module": "Zmazať modul",
+    "empty_state": {
+      "general": {
+        "title": "Zoskupujte míľniky do modulov.",
+        "description": "Moduly zoskupujú položky pod logického nadradeného. Sledujte termíny a pokrok.",
+        "primary_button": {
+          "text": "Vytvorte prvý modul",
+          "comic": {
+            "title": "Moduly zoskupujú hierarchicky.",
+            "description": "Príklady: Modul košíka, podvozku, skladu."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Žiadne položky v module",
+        "description": "Pridajte položky do modulu.",
+        "primary_button": {
+          "text": "Vytvoriť položky"
+        },
+        "secondary_button": {
+          "text": "Pridať existujúcu položku"
+        }
+      },
+      "archived": {
+        "title": "Žiadne archivované moduly",
+        "description": "Archivujte dokončené alebo zrušené moduly."
+      },
+      "sidebar": {
+        "in_active": "Modul nie je aktívny.",
+        "invalid_date": "Neplatný dátum. Zadajte platný."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Archivovať modul",
+      "archive_module_description": "Archivovať je možné iba dokončené/zrušené moduly.",
+      "delete_module": "Zmazať modul"
+    },
+    "toast": {
+      "copy": {
+        "success": "Odkaz na modul bol skopírovaný"
+      },
+      "delete": {
+        "success": "Modul zmazaný",
+        "error": "Mazanie zlyhalo"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Píšte poznámky, dokumenty alebo znalostnú bázu. Využite AI Galileo.",
+        "description": "Stránky sú priestorom pre myšlienky. Píšte, formátujte, vkladajte položky a používajte komponenty.",
+        "primary_button": {
+          "text": "Vytvoriť prvú stránku"
+        }
+      },
+      "private": {
+        "title": "Žiadne súkromné stránky",
+        "description": "Uchovávajte súkromné myšlienky. Zdieľajte ich, až budete pripravení.",
+        "primary_button": {
+          "text": "Vytvoriť stránku"
+        }
+      },
+      "public": {
+        "title": "Žiadne verejné stránky",
+        "description": "Tu uvidíte stránky zdieľané v projekte.",
+        "primary_button": {
+          "text": "Vytvoriť stránku"
+        }
+      },
+      "archived": {
+        "title": "Žiadne archivované stránky",
+        "description": "Archivujte stránky pre neskorší prístup."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Príjem nie je povolený",
+        "description": "Aktivujte príjem v nastaveniach projektu pre správu požiadaviek.",
+        "primary_button": {
+          "text": "Spravovať funkcie"
+        }
+      },
+      "cycle": {
+        "title": "Cykly nie sú povolené",
+        "description": "Aktivujte cykly pre časové ohraničenie práce.",
+        "primary_button": {
+          "text": "Spravovať funkcie"
+        }
+      },
+      "module": {
+        "title": "Moduly nie sú povolené",
+        "description": "Aktivujte moduly v nastaveniach projektu.",
+        "primary_button": {
+          "text": "Spravovať funkcie"
+        }
+      },
+      "page": {
+        "title": "Stránky nie sú povolené",
+        "description": "Aktivujte stránky v nastaveniach projektu.",
+        "primary_button": {
+          "text": "Spravovať funkcie"
+        }
+      },
+      "view": {
+        "title": "Pohľady nie sú povolené",
+        "description": "Aktivujte pohľady v nastaveniach projektu.",
+        "primary_button": {
+          "text": "Spravovať funkcie"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Plánované",
+      "in_progress": "Prebieha",
+      "paused": "Pozastavené",
+      "completed": "Dokončené",
+      "cancelled": "Zrušené"
+    },
+    "layout": {
+      "list": "Zoznam",
+      "board": "Nástenka",
+      "timeline": "Časová os"
+    },
+    "order_by": {
+      "name": "Názov",
+      "progress": "Pokrok",
+      "issues": "Počet položiek",
+      "due_date": "Termín",
+      "created_at": "Dátum vytvorenia",
+      "manual": "Manuálne"
+    }
+  },
+  "project_members": {
+    "full_name": "Celé meno",
+    "display_name": "Zobrazované meno",
+    "email": "E-mail",
+    "joining_date": "Dátum pripojenia",
+    "role": "Rola"
+  },
+  "project": {
+    "members_import": {
+      "title": "Importovať členov z CSV",
+      "description": "Nahrajte CSV so stĺpcami: E-mail a Rola (5=Hosť, 15=Člen, 20=Správca). Používatelia musia byť už členmi pracovného priestoru.",
+      "download_sample": "Stiahnuť vzorové CSV",
+      "dropzone": {
+        "active": "Presuňte CSV súbor sem",
+        "inactive": "Presuňte alebo kliknite pre nahranie",
+        "file_type": "Podporované sú iba súbory .csv"
+      },
+      "buttons": {
+        "cancel": "Zrušiť",
+        "import": "Importovať",
+        "try_again": "Skúsiť znova",
+        "close": "Zavrieť",
+        "done": "Hotovo"
+      },
+      "progress": {
+        "uploading": "Nahrávanie...",
+        "importing": "Importovanie..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Import dokončený"
+        },
+        "message": {
+          "success": "Úspešne importovaných {count} člen{plural} do projektu.",
+          "no_imports": "Zo súboru CSV neboli importovaní žiadni noví členovia."
+        },
+        "stats": {
+          "added": "Pridané",
+          "reactivated": "Znovu aktivované",
+          "already_members": "Už členovia",
+          "skipped": "Preskočené"
+        },
+        "download_errors": "Stiahnuť podrobnosti preskočených"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Neplatný súbor",
+          "message": "Podporované sú iba CSV súbory."
+        },
+        "import_failed": {
+          "title": "Import zlyhal",
+          "message": "Niečo sa pokazilo."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/settings.json b/packages/i18n/src/locales/sk/settings.json
new file mode 100644
index 0000000..1ef5c13
--- /dev/null
+++ b/packages/i18n/src/locales/sk/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Zmeniť e-mail",
+        "description": "Zadajte novú e-mailovú adresu, aby ste dostali overovací odkaz.",
+        "toasts": {
+          "success_title": "Úspech!",
+          "success_message": "E-mail bol úspešne aktualizovaný. Prihláste sa znova."
+        },
+        "form": {
+          "email": {
+            "label": "Nový e-mail",
+            "placeholder": "Zadajte svoj e-mail",
+            "errors": {
+              "required": "E-mail je povinný",
+              "invalid": "E-mail je neplatný",
+              "exists": "E-mail už existuje. Použite iný.",
+              "validation_failed": "Overenie e-mailu zlyhalo. Skúste znova."
+            }
+          },
+          "code": {
+            "label": "Jedinečný kód",
+            "placeholder": "123456",
+            "helper_text": "Overovací kód bol odoslaný na váš nový e-mail.",
+            "errors": {
+              "required": "Jedinečný kód je povinný",
+              "invalid": "Neplatný overovací kód. Skúste znova."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Pokračovať",
+          "confirm": "Potvrdiť",
+          "cancel": "Zrušiť"
+        },
+        "states": {
+          "sending": "Odosielanie…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Predvoľby",
+      "description": "Prispôsobte si aplikáciu spôsobu, akým pracujete"
+    },
+    "notifications": {
+      "heading": "E-mailové oznámenia",
+      "description": "Majte prehľad o pracovných položkách, ktoré odoberáte. Aktivujte toto pre zasielanie oznámení.",
+      "select_default_view": "Vybrať predvolené zobrazenie",
+      "compact": "Kompaktné",
+      "full": "Celá obrazovka"
+    },
+    "security": {
+      "heading": "Zabezpečenie"
+    },
+    "api_tokens": {
+      "title": "Osobné prístupové tokeny",
+      "description": "Generujte bezpečné API tokeny na integráciu vašich údajov s externými systémami a aplikáciami."
+    },
+    "activity": {
+      "heading": "Aktivita",
+      "description": "Sledujte svoje nedávne akcie a zmeny naprieč všetkými projektmi a pracovnými položkami."
+    },
+    "connections": {
+      "title": "Prepojenia",
+      "heading": "Prepojenia",
+      "description": "Spravujte nastavenia prepojení svojho pracovného priestoru."
+    }
+  },
+  "profile": {
+    "label": "Profil",
+    "page_label": "Vaša práca",
+    "work": "Práca",
+    "details": {
+      "joined_on": "Pripojený dňa",
+      "time_zone": "Časové pásmo"
+    },
+    "stats": {
+      "workload": "Vyťaženie",
+      "overview": "Prehľad",
+      "created": "Vytvorené položky",
+      "assigned": "Priradené položky",
+      "subscribed": "Odobierané položky",
+      "state_distribution": {
+        "title": "Položky podľa stavu",
+        "empty": "Vytvárajte položky pre analýzu stavov."
+      },
+      "priority_distribution": {
+        "title": "Položky podľa priority",
+        "empty": "Vytvárajte položky pre analýzu priorít."
+      },
+      "recent_activity": {
+        "title": "Nedávna aktivita",
+        "empty": "Nebola nájdená žiadna aktivita.",
+        "button": "Stiahnuť dnešnú aktivitu",
+        "button_loading": "Sťahovanie"
+      }
+    },
+    "actions": {
+      "profile": "Profil",
+      "security": "Zabezpečenie",
+      "activity": "Aktivita",
+      "preferences": "Predvoľby",
+      "notifications": "Oznámenia",
+      "api-tokens": "Osobné prístupové tokeny",
+      "connections": "Pripojenia"
+    },
+    "tabs": {
+      "summary": "Zhrnutie",
+      "assigned": "Priradené",
+      "created": "Vytvorené",
+      "subscribed": "Odobierané",
+      "activity": "Aktivita"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Žiadna aktivita",
+        "description": "Vytvorte pracovnú položku pre začiatok."
+      },
+      "assigned": {
+        "title": "Žiadne priradené pracovné položky",
+        "description": "Tu uvidíte priradené pracovné položky."
+      },
+      "created": {
+        "title": "Žiadne vytvorené pracovné položky",
+        "description": "Tu sú pracovné položky, ktoré ste vytvorili."
+      },
+      "subscribed": {
+        "title": "Žiadne odoberané pracovné položky",
+        "description": "Odobierajte pracovné položky, ktoré vás zaujímajú, a sledujte ich tu."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Systémové predvoľby"
+      },
+      "light": {
+        "label": "Svetlé"
+      },
+      "dark": {
+        "label": "Tmavé"
+      },
+      "light_contrast": {
+        "label": "Svetlý vysoký kontrast"
+      },
+      "dark_contrast": {
+        "label": "Tmavý vysoký kontrast"
+      },
+      "custom": {
+        "label": "Vlastná téma"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/stickies.json b/packages/i18n/src/locales/sk/stickies.json
new file mode 100644
index 0000000..aec9548
--- /dev/null
+++ b/packages/i18n/src/locales/sk/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Vaše poznámky",
+    "placeholder": "kliknutím začnite písať",
+    "all": "Všetky poznámky",
+    "no-data": "Zapisujte nápady a myšlienky. Pridajte prvú poznámku.",
+    "add": "Pridať poznámku",
+    "search_placeholder": "Hľadať podľa názvu",
+    "delete": "Zmazať poznámku",
+    "delete_confirmation": "Naozaj chcete zmazať túto poznámku?",
+    "empty_state": {
+      "simple": "Zapisujte nápady a myšlienky. Pridajte prvú poznámku.",
+      "general": {
+        "title": "Poznámky sú rýchle záznamy.",
+        "description": "Zapisujte myšlienky a pristupujte k nim odkiaľkoľvek.",
+        "primary_button": {
+          "text": "Pridať poznámku"
+        }
+      },
+      "search": {
+        "title": "Nenašli sa žiadne poznámky.",
+        "description": "Skúste iný výraz alebo vytvorte novú.",
+        "primary_button": {
+          "text": "Pridať poznámku"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Názov poznámky môže mať max. 100 znakov.",
+        "already_exists": "Poznámka bez popisu už existuje"
+      },
+      "created": {
+        "title": "Poznámka vytvorená",
+        "message": "Poznámka bola úspešne vytvorená"
+      },
+      "not_created": {
+        "title": "Vytvorenie zlyhalo",
+        "message": "Poznámku sa nepodarilo vytvoriť"
+      },
+      "updated": {
+        "title": "Poznámka aktualizovaná",
+        "message": "Poznámka bola úspešne aktualizovaná"
+      },
+      "not_updated": {
+        "title": "Aktualizácia zlyhala",
+        "message": "Poznámku sa nepodarilo aktualizovať"
+      },
+      "removed": {
+        "title": "Poznámka zmazaná",
+        "message": "Poznámka bola úspešne zmazaná"
+      },
+      "not_removed": {
+        "title": "Mazanie zlyhalo",
+        "message": "Poznámku sa nepodarilo zmazať"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/template.json b/packages/i18n/src/locales/sk/template.json
new file mode 100644
index 0000000..9d42a68
--- /dev/null
+++ b/packages/i18n/src/locales/sk/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Šablóny",
+      "description": "Ušetríte 80% času stráveného vytváraním projektov, pracovných položiek a stránok, keď použijete šablóny.",
+      "new_project_template": "Nová šablóna projektu",
+      "new_work_item_template": "Nová šablóna pracovnej položky",
+      "new_page_template": "Nová šablóna stránky",
+      "options": {
+        "project": {
+          "label": "Šablóny projektov"
+        },
+        "work_item": {
+          "label": "Šablóny pracovných položiek"
+        },
+        "page": {
+          "label": "Šablóny stránok"
+        }
+      },
+      "create_template": {
+        "label": "Vytvoriť šablónu",
+        "no_permission": {
+          "project": "Kontaktujte administrátora projektu na vytvorenie šablón",
+          "workspace": "Kontaktujte administrátora workspace na vytvorenie šablón"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Použiť šablónu",
+          "loading": "Používa sa"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Odvodené od workspace"
+        },
+        "project": {
+          "info": "Odvodené od projektu"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Pomenujte svoju šablónu projektu.",
+              "validation": {
+                "required": "Názov šablóny je povinný",
+                "maxLength": "Názov šablóny by nemal presiahnuť 255 znakov"
+              }
+            },
+            "description": {
+              "placeholder": "Popíšte, kedy a ako použiť túto šablónu."
+            }
+          },
+          "name": {
+            "placeholder": "Pomenujte svoj projekt.",
+            "validation": {
+              "required": "Názov projektu je povinný",
+              "maxLength": "Názov projektu by nemal presiahnuť 255 znakov"
+            }
+          },
+          "description": {
+            "placeholder": "Popíšte účel a ciele tohto projektu."
+          },
+          "button": {
+            "create": "Vytvoriť šablónu projektu",
+            "update": "Aktualizovať šablónu projektu"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Pomenujte svoju šablónu pracovnej položky.",
+              "validation": {
+                "required": "Názov šablóny je povinný",
+                "maxLength": "Názov šablóny by nemal presiahnuť 255 znakov"
+              }
+            },
+            "description": {
+              "placeholder": "Popíšte, kedy a ako použiť túto šablónu."
+            }
+          },
+          "name": {
+            "placeholder": "Pomenujte túto pracovnú položku.",
+            "validation": {
+              "required": "Názov pracovnej položky je povinný",
+              "maxLength": "Názov pracovnej položky by nemal presiahnuť 255 znakov"
+            }
+          },
+          "description": {
+            "placeholder": "Popíšte, čo chcete dosiahnuť, keď dokončíte túto pracovnú položku."
+          },
+          "button": {
+            "create": "Vytvoriť šablónu pracovnej položky",
+            "update": "Aktualizovať šablónu pracovnej položky"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Pomenujte svoju šablónu stránky.",
+              "validation": {
+                "required": "Názov šablóny je povinný",
+                "maxLength": "Názov šablóny by nemal presiahnuť 255 znakov"
+              }
+            },
+            "description": {
+              "placeholder": "Popíšte, kedy a ako použiť túto šablónu."
+            }
+          },
+          "name": {
+            "placeholder": "Neznáma stránka",
+            "validation": {
+              "maxLength": "Názov stránky by nemal presiahnuť 255 znakov"
+            }
+          },
+          "button": {
+            "create": "Vytvoriť šablónu stránky",
+            "update": "Aktualizovať šablónu stránky"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Nastavenia publikovania} other {Publikovať na Marketplace}}",
+          "unpublish_action": "Odstrániť z Marketplace",
+          "title": "Urobte vašu šablónu objaviteľnou a rozpoznateľnou.",
+          "name": {
+            "label": "Názov šablóny",
+            "placeholder": "Pomenujte vašu šablónu",
+            "validation": {
+              "required": "Názov šablóny je povinný",
+              "maxLength": "Názov šablóny by nemal presiahnuť 255 znakov"
+            }
+          },
+          "short_description": {
+            "label": "Krátky popis",
+            "placeholder": "Táto šablóna je skvelá pre projektových manažérov, ktorí riadia niekoľko projektov súčasne.",
+            "validation": {
+              "required": "Krátky popis je povinný"
+            }
+          },
+          "description": {
+            "label": "Popis",
+            "placeholder": "Zvyšte produktivitu a zefektívnite komunikáciu s našou integráciou Reč-do-Textu.\n• Prepis v reálnom čase: Okamžite preveďte hovorené slová do presného textu.\n• Vytváranie úloh a komentárov: Pridávajte úlohy, popisy a komentáre pomocou hlasových príkazov.",
+            "validation": {
+              "required": "Popis je povinný"
+            }
+          },
+          "category": {
+            "label": "Kategória",
+            "placeholder": "Vyberte, kde si myslíte, že to najlepšie zapadá. Môžete vybrať viacero.",
+            "validation": {
+              "required": "Je vyžadovaná aspoň jedna kategória"
+            }
+          },
+          "keywords": {
+            "label": "Kľúčové slová",
+            "placeholder": "Použite výrazy, ktoré si myslíte, že vaši používatelia budú hľadať pri hľadaní tejto šablóny.",
+            "helperText": "Zadajte kľúčové slová oddelené čiarkami, ktoré pomôžu ľuďom nájsť túto šablónu z vyhľadávania.",
+            "validation": {
+              "required": "Aspoň jedno kľúčové slovo je povinné"
+            }
+          },
+          "website": {
+            "label": "URL webovej stránky",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "Neplatná URL",
+              "maxLength": "URL musí mať menej ako 800 znakov"
+            }
+          },
+          "company_name": {
+            "label": "Názov spoločnosti",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Názov spoločnosti je povinný",
+              "maxLength": "Názov spoločnosti by nemal presiahnuť 255 znakov"
+            }
+          },
+          "contact_email": {
+            "label": "Email podpory",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Neplatná emailová adresa",
+              "maxLength": "Email podpory by nemal presiahnuť 255 znakov"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Odkaz na vaše zásady ochrany súkromia",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Neplatná URL",
+              "maxLength": "URL by nemala presiahnuť 800 znakov"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Odkaz na vaše podmienky používania",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "Neplatná URL",
+              "maxLength": "URL by nemala presiahnuť 800 znakov"
+            }
+          },
+          "cover_image": {
+            "label": "Pridajte obrázok na obálku, ktorý sa zobrazí na trhu",
+            "upload_title": "Nahrať obrázok na obálku",
+            "upload_placeholder": "Kliknite na nahranie alebo pretiahnite a pustite pre nahranie obrázka na obálku",
+            "drop_here": "Pustiť sem",
+            "click_to_upload": "Kliknite na nahranie",
+            "invalid_file_or_exceeds_size_limit": "Neplatný súbor alebo prekročený limit veľkosti. Prosím, skúste znova.",
+            "upload_and_save": "Nahrať a uložiť",
+            "uploading": "Nahrávanie",
+            "remove": "Odstrániť",
+            "removing": "Odstraňovanie",
+            "validation": {
+              "required": "Obrázok na obálku je povinný"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Zahrňte dokumenty a obrázky, ktoré si myslíte, že urobia prezeračov tejto šablóny.",
+            "validation": {
+              "required": "Je vyžadovaná aspoň jedna snímka obrazovky"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Šablóny",
+        "description": "S projektmi, pracovnými položkami a stránkami v Plane, nemusíte vytvárať projekty od začiatku alebo nastavovať vlastnosti pracovných položiek ručne.",
+        "sub_description": "Ušetríte 80% času, keď použijete šablóny."
+      },
+      "no_templates": {
+        "button": "Vytvoriť svoju prvú šablónu"
+      },
+      "no_labels": {
+        "description": "Žiadne štítky ešte neexistujú. Vytvorte štítky na pomoc organizácii a filtrovaniu pracovných položiek v projekte."
+      },
+      "no_modules": {
+        "description": "Zatiaľ žiadne moduly. Zorganizujte prácu do podprojektov s vyhradenými vedúcimi a priradenými."
+      },
+      "no_work_items": {
+        "description": "Ešte nemáte pracovné položky. Pridajte jednu, aby ste lepšie struktúrovali svoju prácu."
+      },
+      "no_sub_work_items": {
+        "description": "Ešte nemáte pod-pracovné položky. Pridajte jednu, aby ste lepšie struktúrovali svoju prácu."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Neexistujú žiadne šablóny, ku ktorým máte prístup.",
+          "description": "Prosím, vytvorte šablónu"
+        },
+        "no_results": {
+          "title": "To sa nezhoduje so žiadnou šablónou.",
+          "description": "Skúste hľadať pomocou iných výrazov."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Šablóna vytvorená",
+          "message": "{templateName}, šablóna typu {templateType}, je teraz dostupná pre váš workspace."
+        },
+        "error": {
+          "title": "Nepodarilo sa vytvoriť túto šablónu.",
+          "message": "Skúste znova uložiť vaše údaje alebo ich prekopírovať do novej šablóny, preferujúc inú kartu."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Šablóna upravená",
+          "message": "{templateName}, šablóna typu {templateType}, bola upravená."
+        },
+        "error": {
+          "title": "Nepodarilo sa uložiť zmeny do tejto šablóny.",
+          "message": "Skúste znova uložiť vaše údaje alebo sa vráťte k tejto šablóne neskôr. Ak stále existujú problémy, kontaktujte nás."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Šablóna odstránená",
+          "message": "{templateName}, šablóna typu {templateType}, bola odstránená z vašeho workspace."
+        },
+        "error": {
+          "title": "Nepodarilo sa odstrániť túto šablónu.",
+          "message": "Skúste odstrániť ju znova alebo sa vráťte k nej neskôr. Ak stále nepodarí, kontaktujte nás."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Šablóna stiahnuta",
+          "message": "{templateName}, šablóna typu {templateType}, bola stiahnutá z marketplace."
+        },
+        "error": {
+          "title": "Nepodarilo sa stiahnuť šablónu.",
+          "message": "Skúste ju stiahnuť znova alebo sa vráťte k nej neskôr. Ak stále nepodarí, kontaktujte nás."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Odstrániť šablónu",
+      "description": {
+        "prefix": "Ste si istí, že chcete odstrániť šablónu-",
+        "suffix": "? Všetky údaje spojené s touto šablónou budú natrvalo odstránené. Tento krok nie je možné vrátiť späť."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Stiahnuť šablónu",
+      "description": {
+        "prefix": "Ste si istí, že chcete stiahnuť šablónu-",
+        "suffix": "? Šablóna bude stiahnutá z marketplace a nebude viac dostupná pre ostatných."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Pridať novú šablónu",
+        "project": "Pridať novú šablónu"
+      },
+      "label": {
+        "project": "Vybrať šablónu projektu",
+        "page": "Vybrať šablónu"
+      },
+      "tooltip": {
+        "work_item": "Vybrať šablónu pracovnej položky"
+      },
+      "no_results": {
+        "work_item": "Žiadne šablóny neboli nájdené.",
+        "project": "Žiadne šablóny neboli nájdené."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/tour.json b/packages/i18n/src/locales/sk/tour.json
new file mode 100644
index 0000000..f5f6c66
--- /dev/null
+++ b/packages/i18n/src/locales/sk/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Vitajte vo vašom pracovnom priestore",
+        "description": "Aby sme vám pomohli začať, vytvorili sme pre vás Demo projekt. Pridajme vašu prvú pracovnú položku."
+      },
+      "step_one": {
+        "title": "Kliknite na \"+ Pridať pracovnú položku\"",
+        "description": "Začnite kliknutím na tlačidlo \"+ Nová pracovná položka\". Môžete vytvoriť úlohy, chyby alebo vlastný typ, ktorý vyhovuje vašim potrebám."
+      },
+      "step_two": {
+        "title": "Filtrujte svoje pracovné položky",
+        "description": "Použite filtre na rýchle zúženie zoznamu. Môžete filtrovať podľa stavu, priority alebo členov tímu. "
+      },
+      "step_three": {
+        "title": "Zobrazujte, zoskupujte a zoraďujte pracovné položky podľa potreby.",
+        "description": "Pozrite si požadované vlastnosti a zoskupte alebo zoraďte pracovné položky podľa svojich potrieb."
+      },
+      "step_four": {
+        "title": "Vizualizujte ako chcete",
+        "description": "Vyberte vlastnosti, ktoré chcete vidieť v zozname. Môžete tiež zoskupovať a triediť pracovné položky podľa seba."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Dosahujte pokrok s Cyklami",
+        "description": "Stlačte Q na vytvorenie Cyklu. Pomenujte ho a nastavte dátumy—len jeden cyklus na projekt."
+      },
+      "step_one": {
+        "title": "Vytvoriť nový cyklus",
+        "description": "Stlačte Q na vytvorenie Cyklu. Pomenujte ho a nastavte dátumy—len jeden cyklus na projekt."
+      },
+      "step_two": {
+        "title": "Kliknite na \"+\"",
+        "description": "Začnite kliknutím na tlačidlo \"+\". Pridajte nové alebo existujúce pracovné položky priamo zo stránky Cyklu."
+      },
+      "step_three": {
+        "title": "Súhrn cyklu",
+        "description": "Sledujte priebeh cyklu, produktivitu tímu a priority—a zisťujte, či niečo zaostáva."
+      },
+      "step_four": {
+        "title": "Preniesť pracovné položky",
+        "description": "Po termíne sa cyklus automaticky dokončí. Presuňte nedokončenú prácu do iného cyklu."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Rozdeľte svoj projekt do Modulov",
+        "description": "Moduly sú menšie, zamerané projekty, ktoré pomáhajú používateľom zoskupovať a organizovať pracovné položky v špecifických časových rámcoch."
+      },
+      "step_one": {
+        "title": "Vytvoriť Modul",
+        "description": "Moduly sú menšie, zamerané projekty, ktoré pomáhajú používateľom zoskupovať a organizovať pracovné položky v špecifických časových rámcoch."
+      },
+      "step_two": {
+        "title": "Kliknite na \"+\"",
+        "description": "Začnite kliknutím na tlačidlo \"+\". Pridajte nové alebo existujúce pracovné položky priamo zo stránky Modulu."
+      },
+      "step_three": {
+        "title": "Stavy modulu",
+        "description": "Moduly používajú tieto stavy na pomoc používateľom plánovať a jasne sledovať priebeh a fázu."
+      },
+      "step_four": {
+        "title": "Priebeh modulu",
+        "description": "Priebeh modulu sa sleduje prostredníctvom dokončených položiek s analýzou na monitorovanie výkonu."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Dokumentujte s AI stránkami",
+        "description": "Stránky v Plane vám umožňujú zachytiť, organizovať a spolupracovať na projektových informáciách—bez externých nástrojov."
+      },
+      "step_one": {
+        "title": "Urobte stránku Verejnou alebo Súkromnou",
+        "description": "Stránky môžu byť nastavené ako verejné, viditeľné pre všetkých vo vašom pracovnom priestore, alebo súkromné, prístupné len vám."
+      },
+      "step_two": {
+        "title": "Použite príkaz /",
+        "description": "Použite / na stránke na pridanie obsahu zo 16 typov blokov, vrátane zoznamov, obrázkov, tabuliek a vložení."
+      },
+      "step_three": {
+        "title": "Akcie stránky",
+        "description": "Po vytvorení stránky môžete kliknúť na menu ••• v pravom hornom rohu a vykonať nasledujúce akcie."
+      },
+      "step_four": {
+        "title": "Obsah",
+        "description": "Získajte prehľad o svojej stránke kliknutím na ikonu panela a zobrazením všetkých nadpisov."
+      },
+      "step_five": {
+        "title": "História verzií",
+        "description": "Stránky sledujú všetky úpravy s históriou verzií, čo vám umožňuje obnoviť predchádzajúce verzie v prípade potreby."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Zjednodušte žiadosti s príjmom",
+        "description": "Funkcia exkluzívne pre Plane, ktorá umožňuje Hostiam vytvárať pracovné položky pre chyby, žiadosti alebo tikety."
+      },
+      "step_one": {
+        "title": "Otvorené/zatvorené žiadosti o príjem",
+        "description": "Čakajúce žiadosti zostávajú na karte Otvorené a po vybavení správcom alebo členom sa presunú do Zatvorené."
+      },
+      "step_two": {
+        "title": "Prijať/odmietnuť čakajúcu žiadosť",
+        "description": "Prijmite na úpravu a presunutie pracovnej položky do svojho projektu alebo odmiet nite na označenie ako Zrušené."
+      },
+      "step_three": {
+        "title": "Odložiť zatiaľ",
+        "description": "Pracovná položka môže byť odložená na preskúmanie neskôr. Presunie sa na koniec vášho zoznamu otvorených žiadostí."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Prestaňte prepínať medzi kartami. Prepojte svoj svet.",
+        "description": "Prepojte GitHub a Slack, aby ste mohli sledovať PR a sumarizovať chaty priamo v Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigácia, znovu premyslená",
+        "sub_title": "Váš pracovný priestor je teraz ľahšie preskúmať s inteligentnejšou, zjednodušenou navigáciou.",
+        "highlight_1": "Zjednodušená štruktúra ľavého panela pre rýchlejšie objavovanie",
+        "highlight_2": "Vylepšené globálne vyhľadávanie na okamžitý preskok kamkoľvek",
+        "highlight_3": "Inteligentnejšie zoskupovanie kategórií pre jasnosť a zameranie",
+        "footer": "Chcete rýchly sprievodca?"
+      },
+      "step_zero": {
+        "title": "Nájdite čokoľvek okamžite",
+        "description": "Použite univerzálne vyhľadávanie na preskok k úlohám, projektom, stránkam a ľuďom—bez opustenia toku."
+      },
+      "step_one": {
+        "title": "Udržujte kontrolu nad aktualizáciami",
+        "description": "Vaša doručená pošta uchováva všetky zmienky, schválenia a aktivitu na jednom mieste, takže nikdy nezmešká te dôležitú prácu."
+      },
+      "step_two": {
+        "title": "Prispôsobte si Navigáciu",
+        "description": "Prispôsobte si, čo vidíte a ako navigujete v Predvoľbách."
+      }
+    },
+    "actions": {
+      "close": "Zatvoriť",
+      "next": "Ďalej",
+      "back": "Späť",
+      "done": "Hotovo",
+      "take_a_tour": "Absolvovať prehliadku",
+      "get_started": "Začať",
+      "got_it": "Rozumiem"
+    },
+    "seed_data": {
+      "title": "Tu je váš demo projekt",
+      "description": "Projekty vám umožňujú spravovať vaše tímy, úlohy a všetko, čo potrebujete na dokončenie práce vo vašom pracovnom priestore."
+    }
+  },
+  "get_started": {
+    "title": "Ahoj {name}, vitaj na palube!",
+    "description": "Tu je všetko, čo potrebujete na spustenie vašej cesty s Plane.",
+    "checklist_section": {
+      "title": "Začať",
+      "description": "Začnite s nastavením a uvidíte svoje nápady ožívať rýchlejšie.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Vytvoriť projekt"
+        },
+        "item_2": {
+          "title": "Vytvoriť pracovnú položku"
+        },
+        "item_3": {
+          "title": "Pozvať členov tímu"
+        },
+        "item_4": {
+          "title": "Vytvoriť stránku"
+        },
+        "item_5": {
+          "title": "Vyskúšať Plane AI chat"
+        },
+        "item_6": {
+          "title": "Prepojiť integrácie"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Pozvite svoj tím",
+      "description": "Pozvite tímových kolegov a začnite spoločne budovať."
+    },
+    "integrations_section": {
+      "title": "Posilnite svoj pracovný priestor",
+      "more_integrations": "Prezerať viac integrácií"
+    },
+    "switch_to_plane_section": {
+      "title": "Objavte, prečo tímy prechádzajú na Plane",
+      "description": "Porovnajte Plane s nástrojmi, ktoré dnes používate a uvidíte rozdiel."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/update.json b/packages/i18n/src/locales/sk/update.json
new file mode 100644
index 0000000..ea9d927
--- /dev/null
+++ b/packages/i18n/src/locales/sk/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Postup",
+      "since_last_update": "Od poslednej aktualizácie",
+      "comments": "{count, plural, one{# komentár} few{# komentáre} other{# komentárov}}"
+    },
+    "add_update": "Pridať aktualizáciu",
+    "add_update_placeholder": "Vložte vašu aktualizáciu tu",
+    "empty": {
+      "title": "Ešte nie sú žiadne aktualizácie",
+      "description": "Tu môžete zobraziť aktualizácie."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reakcia vytvorená",
+          "message": "Reakcia bola úspešne vytvorená."
+        },
+        "error": {
+          "title": "Reakcia sa nepodarila vytvoriť",
+          "message": "Reakcia sa nepodarila vytvoriť."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reakcia odstránená",
+          "message": "Reakcia bola úspešne odstránená."
+        },
+        "error": {
+          "title": "Reakcia sa nepodarila odstrániť",
+          "message": "Reakcia sa nepodarila odstrániť."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Aktualizácia vytvorená",
+        "message": "Aktualizácia bola úspešne vytvorená."
+      },
+      "error": {
+        "title": "Aktualizáciu sa nepodarilo vytvoriť",
+        "message": "Aktualizáciu sa nepodarilo vytvoriť."
+      }
+    },
+    "delete": {
+      "title": "Odstrániť aktualizáciu",
+      "confirmation": "Naozaj chcete odstrániť túto aktualizáciu? Táto akcia je neobnoviteľná.",
+      "success": {
+        "title": "Aktualizácia odstránená",
+        "message": "Aktualizácia bola úspešne odstránená."
+      },
+      "error": {
+        "title": "Aktualizáciu sa nepodarilo odstrániť",
+        "message": "Aktualizáciu sa nepodarilo odstrániť."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Aktualizácia aktualizovaná",
+        "message": "Aktualizácia bola úspešne aktualizovaná."
+      },
+      "error": {
+        "title": "Aktualizáciu sa nepodarilo aktualizovať",
+        "message": "Aktualizáciu sa nepodarilo aktualizovať."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/wiki.json b/packages/i18n/src/locales/sk/wiki.json
new file mode 100644
index 0000000..8ccbc28
--- /dev/null
+++ b/packages/i18n/src/locales/sk/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Všeobecné",
+      "private": "Súkromné",
+      "shared": "Zdieľané",
+      "archived": "Archivované"
+    },
+    "fallback_name": "Kolekcia",
+    "form": {
+      "name_required": "Názov kolekcie je povinný",
+      "name_max_length": "Názov kolekcie musí mať menej ako 255 znakov",
+      "name_placeholder_create": "Zadajte názov kolekcie",
+      "name_placeholder_edit": "Názov kolekcie"
+    },
+    "create_modal": {
+      "title": "Vytvoriť kolekciu",
+      "submit": "Vytvoriť kolekciu"
+    },
+    "edit_modal": {
+      "title": "Upraviť kolekciu"
+    },
+    "delete_modal": {
+      "title": "Odstrániť kolekciu",
+      "page_count": "Táto kolekcia obsahuje {pageCount} stránok. Vyberte, čo sa s nimi má stať.",
+      "transfer_title": "Presunúť stránky a odstrániť kolekciu",
+      "transfer_description": "Pred odstránením presuňte všetky stránky do inej kolekcie. Stránky aj ich oprávnenia zostanú zachované.",
+      "transfer_warning": "Presunuté stránky zdedia oprávnenia vybratej kolekcie.",
+      "transfer_target_label": "Presunúť stránky do",
+      "transfer_target_placeholder": "Vyberte kolekciu",
+      "delete_with_pages_title": "Odstrániť kolekciu aj so stránkami",
+      "delete_with_pages_description": "Natrvalo odstráni kolekciu aj všetky jej stránky. Túto akciu nie je možné vrátiť späť.",
+      "submit": "Odstrániť kolekciu"
+    },
+    "header": {
+      "add_page": "Pridať stránku"
+    },
+    "menu": {
+      "create_new_page": "Vytvoriť novú stránku",
+      "add_existing_page": "Pridať existujúcu stránku",
+      "edit_collection": "Upraviť kolekciu",
+      "collection_options": "Možnosti kolekcie"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Hľadať stránky",
+      "success_message": "Do kolekcie bolo pridaných {count} stránok.",
+      "error_message": "Stránky sa nepodarilo presunúť. Skúste to prosím znova.",
+      "no_pages_found": "Neboli nájdené žiadne stránky zodpovedajúce vášmu vyhľadávaniu",
+      "no_pages_available": "Žiadne stránky na presun",
+      "submit": "Presunúť"
+    },
+    "list": {
+      "invite_only": "Len na pozvanie",
+      "remove_error": "Stránku sa nepodarilo odstrániť z kolekcie.",
+      "no_matching_pages": "Žiadne zodpovedajúce stránky",
+      "remove_search_criteria": "Odstráňte kritériá vyhľadávania a zobrazia sa všetky stránky",
+      "remove_filters": "Odstráňte filtre a zobrazia sa všetky stránky",
+      "no_pages_title": "Zatiaľ žiadne stránky",
+      "no_pages_description": "Táto kolekcia zatiaľ neobsahuje žiadne stránky.",
+      "untitled": "Bez názvu",
+      "restricted_access": "Obmedzený prístup",
+      "collapse_page": "Zbaliť stránku",
+      "expand_page": "Rozbaliť stránku",
+      "page_actions": "Akcie stránky",
+      "page_link_copied": "Odkaz na stránku bol skopírovaný do schránky.",
+      "columns": {
+        "page_name": "Názov stránky",
+        "owner": "Vlastník",
+        "nested_pages": "Vnorené stránky",
+        "last_activity": "Posledná aktivita",
+        "actions": "Akcie"
+      }
+    },
+    "toasts": {
+      "created": "Kolekcia bola úspešne vytvorená.",
+      "create_error": "Kolekciu sa nepodarilo vytvoriť. Skúste to prosím znova.",
+      "renamed": "Kolekcia bola úspešne premenovaná.",
+      "rename_error": "Kolekciu sa nepodarilo aktualizovať. Skúste to prosím znova.",
+      "transferred_deleted": "Stránky boli presunuté a kolekcia odstránená.",
+      "deleted_with_pages": "Kolekcia aj jej stránky boli odstránené.",
+      "delete_error": "Kolekciu sa nepodarilo odstrániť. Skúste to prosím znova.",
+      "target_required": "Vyberte prosím kolekciu, do ktorej chcete stránky presunúť.",
+      "create_page_error": "Stránku sa nepodarilo vytvoriť. Skúste to prosím znova.",
+      "create_page_in_collection_error": "Stránku sa nepodarilo vytvoriť alebo pridať do kolekcie. Skúste to prosím znova.",
+      "collection_link_copied": "Odkaz na kolekciu bol skopírovaný do schránky."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Upgradujte a odomknite Wiki",
+      "description": "Odomknite verejné stránky, históriu verzií, zdieľané stránky, spoluprácu v reálnom čase a stránky pracovného priestoru pre wiki, firemnú dokumentáciu a databázy znalostí s Plane Pro.",
+      "upgrade_button": {
+        "text": "Upgradovať"
+      },
+      "learn_more_button": {
+        "text": "Zistiť viac"
+      },
+      "download_button": {
+        "text": "Stiahnuť údaje",
+        "loading": "Sťahovanie"
+      },
+      "tabs": {
+        "nested_pages": "Vnorené stránky",
+        "add_embeds": "Pridať vložené prvky",
+        "publish_pages": "Publikovať stránky",
+        "comments": "Komentáre"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Vnorené stránky vyžadujú platený plán. Upgradujte a odomknite ich."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/work-item-type.json b/packages/i18n/src/locales/sk/work-item-type.json
new file mode 100644
index 0000000..c41385f
--- /dev/null
+++ b/packages/i18n/src/locales/sk/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Typy pracovných položiek",
+    "label_lowercase": "typy pracovných položiek",
+    "settings": {
+      "description": "Prispôsobte a pridajte si vlastné vlastnosti, aby zodpovedali potrebám vášho tímu.",
+      "cant_delete_default_message": "Tento typ pracovnej položky nie je možné odstrániť, pretože je nastavený ako predvolený pre tento projekt.",
+      "set_as_default": "Nastaviť ako predvolený",
+      "cant_set_default_inactive_message": "Pred nastavením ako predvolený tento typ aktivujte",
+      "set_default_confirmation": {
+        "title": "Nastaviť ako predvolený typ pracovnej položky",
+        "description": "Nastavením {name} ako predvoleného sa tento typ importuje do všetkých projektov v tomto pracovnom priestore. Všetky nové pracovné položky budú štandardne používať tento typ.",
+        "confirm_button": "Nastaviť ako predvolený"
+      },
+      "properties": {
+        "title": "Vlastné vlastnosti",
+        "description": "Vytvárajte a prispôsobujte vlastnosti.",
+        "tooltip": "Každý typ pracovnej položky je dodávaný s predvolenou sadou vlastností ako Názov, Popis, Priradený používateľ, Stav, Priorita, Dátum začiatku, Termín dokončenia, Modul, Cyklus atď. Môžete si tiež prispôsobiť a pridať vlastné vlastnosti, aby vyhovovali potrebám vášho tímu.",
+        "add_button": "Pridať novú vlastnosť",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Importovať z pracovného priestoru"
+          }
+        },
+        "dropdown": {
+          "label": "Typ vlastnosti",
+          "placeholder": "Vyberte typ"
+        },
+        "property_type": {
+          "text": {
+            "label": "Text"
+          },
+          "number": {
+            "label": "Číslo"
+          },
+          "dropdown": {
+            "label": "Rozbaľovací zoznam"
+          },
+          "boolean": {
+            "label": "Booleovský"
+          },
+          "date": {
+            "label": "Dátum"
+          },
+          "member_picker": {
+            "label": "Výber člena"
+          },
+          "formula": {
+            "label": "Vzorec"
+          }
+        },
+        "attributes": {
+          "label": "Atribúty",
+          "text": {
+            "single_line": {
+              "label": "Jeden riadok"
+            },
+            "multi_line": {
+              "label": "Odsek"
+            },
+            "readonly": {
+              "label": "Iba na čítanie",
+              "header": "Údaje iba na čítanie"
+            },
+            "invalid_text_format": {
+              "label": "Neplatný formát textu"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Pridať číslo"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Jediný výber"
+            },
+            "multi_select": {
+              "label": "Viacnásobný výber"
+            },
+            "no_default_value": {
+              "label": "Žiadna predvolená hodnota"
+            }
+          },
+          "boolean": {
+            "label": "Pravda | Nepravda",
+            "no_default": "Žiadna predvolená hodnota"
+          },
+          "option": {
+            "create_update": {
+              "label": "Možnosti",
+              "form": {
+                "placeholder": "Pridať možnosť",
+                "errors": {
+                  "name": {
+                    "required": "Názov možnosti je povinný.",
+                    "integrity": "Možnosť s rovnakým názvom už existuje."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Vyberte možnosť",
+                "multi": {
+                  "default": "Vyberte možnosti",
+                  "variable": "{count} vybraných možností"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Úspech!",
+              "message": "Vlastnosť {name} bola úspešne vytvorená."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodarilo sa vytvoriť vlastnosť. Skúste to znova!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Úspech!",
+              "message": "Vlastnosť {name} bola úspešne aktualizovaná."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodarilo sa aktualizovať vlastnosť. Skúste to znova!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Úspech!",
+              "message": "Vlastnosť {name} bola úspešne odstránená."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodarilo sa odstrániť vlastnosť. Skúste to znova!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} vlastnosti {name}",
+            "success": {
+              "title": "Úspech!",
+              "message": "Vlastnosť {name} bola úspešne {action}."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodarilo sa {action} vlastnosť. Skúste to znova!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Vytvoriť novú vlastnú vlastnosť",
+            "update": "Aktualizovať vlastnú vlastnosť"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Názov"
+            },
+            "description": {
+              "placeholder": "Popis"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Musíte pomenovať vašu vlastnosť.",
+              "max_length": "Názov vlastnosti by nemal presiahnuť 255 znakov."
+            },
+            "property_type": {
+              "required": "Musíte vybrať typ vlastnosti."
+            },
+            "options": {
+              "required": "Musíte pridať aspoň jednu možnosť."
+            },
+            "formula": {
+              "required": "Výraz vzorca je povinný.",
+              "invalid": "Neplatný vzorec: {error}",
+              "circular_reference": "Zistená cyklická referencia. Vzorec nemôže odkazovať sám na seba priamo ani nepriamo.",
+              "invalid_reference": "Vzorec odkazuje na neexistujúcu vlastnosť."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Pole vzorca",
+          "tooltip": "Zadajte vzorec pomocou syntaxe '{'Názov poľa'}'. Podporuje operátory +, -, *, / a &.",
+          "placeholder": "Napíšte vzorec",
+          "test_button": "Test",
+          "validating": "Overovanie",
+          "validation_success": "Vzorec je platný! Vracia {resultType}",
+          "validation_success_with_refs": "Vzorec je platný! Vracia {resultType} ({count} odkazovaných polí)",
+          "error": {
+            "empty": "Zadajte prosím vzorec",
+            "missing_context": "Chýba kontext pracovného priestoru, projektu alebo typu pracovnej položky",
+            "validation_failed": "Overenie zlyhalo"
+          },
+          "picker": {
+            "no_match": "Žiadne zodpovedajúce vlastnosti",
+            "no_available": "Žiadne dostupné vlastnosti"
+          }
+        },
+        "enable_disable": {
+          "label": "Aktívne",
+          "tooltip": {
+            "disabled": "Kliknite pre deaktiváciu",
+            "enabled": "Kliknite pre aktiváciu"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Odstrániť túto vlastnosť",
+          "description": "Odstránenie vlastností môže viesť k strate existujúcich údajov.",
+          "secondary_description": "Chcete namiesto toho deaktivovať vlastnosť?",
+          "primary_button": "{action}, odstrániť ju",
+          "secondary_button": "Áno, deaktivovať ju"
+        },
+        "mandate_confirmation": {
+          "label": "Povinná vlastnosť",
+          "content": "Zdá sa, že pre túto vlastnosť existuje predvolená možnosť. Nastavenie vlastnosti ako povinnej odstráni predvolenú hodnotu a používatelia budú musieť pridať hodnotu podľa svojho výberu.",
+          "tooltip": {
+            "disabled": "Tento typ vlastnosti nemôže byť označený ako povinný",
+            "enabled": "Odškrtnite, aby ste pole označili ako voliteľné",
+            "checked": "Zaškrtnite, aby ste pole označili ako povinné"
+          }
+        },
+        "empty_state": {
+          "title": "Pridať vlastné vlastnosti",
+          "description": "Nové vlastnosti, ktoré pridáte pre tento typ pracovnej položky, sa zobrazia tu."
+        }
+      },
+      "types": {
+        "title": "Typy",
+        "description": "Vytvárajte a prispôsobujte typy pracovných položiek s vlastnosťami.",
+        "sort_options": {
+          "project_count": "Počet projektov, v ktorých je súčasťou"
+        },
+        "filter_options": {
+          "show_active": "Zobraziť aktívne",
+          "show_inactive": "Zobraziť neaktívne"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Vytvoriť nový",
+            "import_from_workspace": "Importovať z pracovného priestoru"
+          },
+          "banner": {
+            "with_access": "Povoľte typy pracovných položiek, aby bolo možné importovať typy z úrovne pracovného priestoru",
+            "without_access": "Typy pracovných položiek sú zakázané. Kontaktujte správcu pracovného priestoru, aby ich povolil v nastaveniach pracovného priestoru."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Vlastné vlastnosti",
+        "add_button": "Pridať vlastnosti",
+        "modal": {
+          "title": "Pridať vlastnosti",
+          "empty": {
+            "title": "Žiadne dostupné vlastnosti",
+            "description": "Všetky vlastnosti sú už prepojené s týmto typom."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Odpojiť vlastnosť",
+          "description": "Odpojením tejto vlastnosti sa natrvalo odstránia všetky jej hodnoty vo všetkých pracovných položkách používajúcich tento typ. Túto akciu nie je možné vrátiť späť.",
+          "input_label": "Napíšte",
+          "input_label_suffix": "pre pokračovanie:",
+          "confirm": "Odpojiť vlastnosť",
+          "loading": "Odpájanie"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Odstrániť tento typ",
+        "description": "Odstránenie typov môže viesť k strate existujúcich údajov.",
+        "can_disable_warning": "Chcete namiesto toho zakázať tento typ?",
+        "primary_button": "Áno, odstrániť",
+        "toast": {
+          "success": {
+            "title": "Úspech!",
+            "message": "Typ pracovnej položky bol úspešne odstránený."
+          },
+          "error": {
+            "title": "Chyba!",
+            "message": "Nepodarilo sa odstrániť typ pracovnej položky. Skúste to znova!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Predvolený typ pracovnej položky nie je možné odstrániť",
+          "cannot_delete_work_item_type_with_associated_work_items": "Typ pracovnej položky s priradenými pracovnými položkami nie je možné odstrániť"
+        }
+      }
+    },
+    "create": {
+      "title": "Vytvoriť typ pracovnej položky",
+      "button": "Pridať typ pracovnej položky",
+      "toast": {
+        "success": {
+          "title": "Úspech!",
+          "message": "Typ pracovnej položky bol úspešne vytvorený."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": {
+            "default": "Vytvorenie typu pracovnej položky zlyhalo. Skúste to prosím znova!",
+            "conflict": "Typ {name} už existuje. Zvoľte iný názov."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Aktualizovať typ pracovnej položky",
+      "button": "Aktualizovať typ pracovnej položky",
+      "toast": {
+        "success": {
+          "title": "Úspech!",
+          "message": "Typ pracovnej položky {name} bol úspešne aktualizovaný."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": {
+            "default": "Aktualizácia typu pracovnej položky zlyhala. Skúste to prosím znova!",
+            "conflict": "Typ {name} už existuje. Zvoľte iný názov."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Dajte tomuto typu pracovnej položky jedinečný názov"
+        },
+        "description": {
+          "placeholder": "Popíšte, na čo je tento typ pracovnej položky určený a kedy sa má používať."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} typu pracovnej položky {name}",
+        "success": {
+          "title": "Úspech!",
+          "message": "Typ pracovnej položky {name} bol úspešne {action}."
+        },
+        "error": {
+          "title": "Chyba!",
+          "message": "Nepodarilo sa {action} typ pracovnej položky. Skúste to znova!"
+        }
+      },
+      "tooltip": "Kliknite pre {action}"
+    },
+    "change_confirmation": {
+      "title": "Zmeniť typ pracovnej položky?",
+      "description": "Zmena typu pracovnej položky môže viesť k strate hodnôt vlastných vlastností, ktoré sú špecifické pre aktuálny typ. Túto akciu nie je možné vrátiť späť.",
+      "button": {
+        "loading": "Mení sa",
+        "default": "Zmeniť typ"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Povoliť Typy pracovných položiek",
+        "description": "Formujte pracovné položky podľa vašej práce pomocou Typov pracovných položiek. Prispôsobte ich ikonami, pozadiami a vlastnosťami a nakonfigurujte ich pre tento projekt.",
+        "primary_button": {
+          "text": "Povoliť"
+        },
+        "confirmation": {
+          "title": "Po povolení nemožno Typy pracovných položiek zakázať.",
+          "description": "Pracovná položka Plane sa stane predvoleným typom pracovnej položky pre tento projekt a zobrazí sa so svojou ikonou a pozadím v tomto projekte.",
+          "button": {
+            "default": "Povoliť",
+            "loading": "Nastavuje sa"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Získajte Pro pre povolenie Typov pracovných položiek.",
+        "description": "Formujte pracovné položky podľa vašej práce pomocou Typov pracovných položiek. Prispôsobte ich ikonami, pozadiami a vlastnosťami a nakonfigurujte ich pre tento projekt.",
+        "primary_button": {
+          "text": "Získať Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Inovácia pre povolenie Typov pracovných položiek.",
+        "description": "Formujte pracovné položky podľa vašej práce pomocou Typov pracovných položiek. Prispôsobte ich ikonami, pozadiami a vlastnosťami a nakonfigurujte ich pre tento projekt.",
+        "primary_button": {
+          "text": "Inovovať"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hierarchia",
+      "tab_label": "Hierarchia",
+      "description": "Nastavte úrovne hierarchie na organizáciu svojej práce. Každá úroveň definuje nadradenú vzťah s položkou priamo nad ňou a podradenou vzťah s položkou priamo pod ňou. ",
+      "sidebar_label": "Hierarchia",
+      "enable_control": {
+        "title": "Povoliť hierarchiu",
+        "description": "Vytvorte vzťahy rodič-potomok medzi rôznymi typmi pracovných položiek.",
+        "tooltip": "Hierarchiu nemôžete deaktivovať po jej aktivácii."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Najprv definujte typy pracovných položiek na vytvorenie novej hierarchie.",
+        "cta": "Nastavenia typov pracovných položiek"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Presuňte typ a pridajte novú úroveň hierarchie",
+      "empty_level_placeholder": "Presuňte typ pracovnej položky na úroveň {level}",
+      "drag_tooltip": "Ťahaním zmeňte úroveň",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Nastaviť ako predvolené",
+          "toast": {
+            "loading": "Nastavenie ako predvolené...",
+            "success": {
+              "title": "Úspech!",
+              "message": "Úroveň hierarchie {level} bola úspešne nastavená ako predvolená."
+            },
+            "error": {
+              "title": "Chyba!",
+              "message": "Nepodarilo sa nastaviť úroveň hierarchie {level} ako predvolenú. Skúste to prosím znovu."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Presúvanie {workItemTypeName} na úroveň {level}...",
+        "success": {
+          "title": "Úspech!",
+          "message": "{workItemTypeName} bol úspešne presunutý na úroveň {level}."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Uloženie zruší existujúce väzby",
+      "content": {
+        "intro": "Typ pracovnej položky {workItemTypeName} obsahuje:",
+        "parent_items": "{count, plural, one {Bude odstránené # nadradené prepojenie} few {Budú odstránené # nadradené prepojenia} other {Bude odstránených # nadradených prepojení}}.",
+        "child_items": "{count, plural, one {podradenú pracovnú položku} few {podradené pracovné položky} other {podradených pracovných položiek}}",
+        "parent_line_suffix_when_also_children": ", a ",
+        "footer": "Táto zmena odstráni nadradené a podradené vzťahy u existujúcich pracovných položiek typu {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Pre pokračovanie napíšte „potvrdiť“.",
+        "placeholder": "potvrdiť"
+      },
+      "error_toast": {
+        "title": "Chyba!",
+        "message": "Nepodarilo sa odpojiť prepojenia a uložiť. Skúste to prosím znova."
+      },
+      "confirm_button": {
+        "loading": "Ukladanie",
+        "default": "Uložiť napriek tomu"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Chyba!",
+        "message": "Vybraný typ pracovnej položky nie je možné použiť na vytvorenie novej pracovnej položky, pretože porušuje pravidlá hierarchie."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Chyba!",
+        "message": "Typ pracovnej položky nie je možné aktualizovať, pretože porušuje pravidlá hierarchie."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Úroveň hierarchie",
+      "invalid_level_toast": {
+        "title": "Chyba!",
+        "message": "Typ pracovnej položky nie je možné aktualizovať, pretože to porušuje pravidlá hierarchie."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/work-item.json b/packages/i18n/src/locales/sk/work-item.json
new file mode 100644
index 0000000..803aab5
--- /dev/null
+++ b/packages/i18n/src/locales/sk/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Pracovná položka} few {Pracovné položky} other {Pracovných položiek}}",
+    "all": "Všetky pracovné položky",
+    "edit": "Upraviť pracovnú položku",
+    "title": {
+      "label": "Názov pracovnej položky",
+      "required": "Názov pracovnej položky je povinný."
+    },
+    "add": {
+      "press_enter": "Stlačte 'Enter' pre pridanie ďalšej pracovnej položky",
+      "label": "Pridať pracovnú položku",
+      "cycle": {
+        "failed": "Pridanie pracovnej položky do cyklu zlyhalo. Skúste to prosím znova.",
+        "success": "{count, plural, one {Pracovná položka} few {Pracovné položky} other {Pracovných položiek}} pridaná do cyklu.",
+        "loading": "Pridávanie {count, plural, one {pracovnej položky} few {pracovných položiek} other {pracovných položiek}} do cyklu"
+      },
+      "assignee": "Pridať priradených",
+      "start_date": "Pridať dátum začiatku",
+      "due_date": "Pridať termín",
+      "parent": "Pridať nadradenú pracovnú položku",
+      "sub_issue": "Pridať podriadenú pracovnú položku",
+      "dependency": "Pridať závislosť",
+      "relation": "Pridať vzťah",
+      "link": "Pridať odkaz",
+      "existing": "Pridať existujúcu pracovnú položku"
+    },
+    "remove": {
+      "label": "Odstrániť pracovnú položku",
+      "cycle": {
+        "loading": "Odstraňovanie pracovnej položky z cyklu",
+        "success": "Pracovná položka odstránená z cyklu.",
+        "failed": "Odstránenie pracovnej položky z cyklu zlyhalo. Skúste to prosím znova."
+      },
+      "module": {
+        "loading": "Odstraňovanie pracovnej položky z modulu",
+        "success": "Pracovná položka odstránená z modulu.",
+        "failed": "Odstránenie pracovnej položky z modulu zlyhalo. Skúste to prosím znova."
+      },
+      "parent": {
+        "label": "Odstrániť nadradenú pracovnú položku"
+      }
+    },
+    "new": "Nová pracovná položka",
+    "adding": "Pridávanie pracovnej položky",
+    "create": {
+      "success": "Pracovná položka bola úspešne vytvorená"
+    },
+    "priority": {
+      "urgent": "Naliehavá",
+      "high": "Vysoká",
+      "medium": "Stredná",
+      "low": "Nízka"
+    },
+    "display": {
+      "properties": {
+        "label": "Zobrazované vlastnosti",
+        "id": "ID",
+        "issue_type": "Typ pracovnej položky",
+        "sub_issue_count": "Počet podriadených položiek",
+        "attachment_count": "Počet príloh",
+        "created_on": "Vytvorené dňa",
+        "sub_issue": "Podriadená položka",
+        "work_item_count": "Počet pracovných položiek"
+      },
+      "extra": {
+        "show_sub_issues": "Zobraziť podriadené položky",
+        "show_empty_groups": "Zobraziť prázdne skupiny"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Toto rozloženie je triedené podľa",
+      "list": "Zoznam",
+      "kanban": "Nástenka",
+      "calendar": "Kalendár",
+      "spreadsheet": "Tabuľka",
+      "gantt": "Časová os",
+      "title": {
+        "list": "Zoznamové rozloženie",
+        "kanban": "Nástenkové rozloženie",
+        "calendar": "Kalendárové rozloženie",
+        "spreadsheet": "Tabuľkové rozloženie",
+        "gantt": "Rozloženie časovej osi"
+      }
+    },
+    "states": {
+      "active": "Aktívne",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Pridať komentár",
+      "switch": {
+        "private": "Prepnúť na súkromný komentár",
+        "public": "Prepnúť na verejný komentár"
+      },
+      "create": {
+        "success": "Komentár bol úspešne vytvorený",
+        "error": "Vytvorenie komentára zlyhalo. Skúste to prosím neskôr."
+      },
+      "update": {
+        "success": "Komentár bol úspešne aktualizovaný",
+        "error": "Aktualizácia komentára zlyhala. Skúste to prosím neskôr."
+      },
+      "remove": {
+        "success": "Komentár bol úspešne odstránený",
+        "error": "Odstránenie komentára zlyhalo. Skúste to prosím neskôr."
+      },
+      "upload": {
+        "error": "Nahratie prílohy zlyhalo. Skúste to prosím neskôr."
+      },
+      "copy_link": {
+        "success": "Odkaz na komentár bol skopírovaný do schránky",
+        "error": "Chyba pri kopírovaní odkazu na komentár. Skúste to prosím neskôr."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Pridať odpoveď",
+          "placeholder": "Pridať odpoveď"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Načítanie odpovedí zlyhalo"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Odpoveď bola úspešne vytvorená"
+            },
+            "error": {
+              "message": "Vytvorenie odpovede zlyhalo"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Odpoveď bola úspešne aktualizovaná"
+            },
+            "error": {
+              "message": "Aktualizácia odpovede zlyhala"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Odpoveď bola úspešne odstránená"
+            },
+            "error": {
+              "message": "Odstránenie odpovede zlyhalo"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Pracovná položka neexistuje",
+        "description": "Pracovná položka, ktorú hľadáte, neexistuje, bola archivovaná alebo zmazaná.",
+        "primary_button": {
+          "text": "Zobraziť ďalšie pracovné položky"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Súvisiace pracovné položky"
+    },
+    "archive": {
+      "description": "Archivovať je možné iba dokončené alebo zrušené\npracovné položky",
+      "label": "Archivovať pracovnú položku",
+      "confirm_message": "Naozaj chcete archivovať túto pracovnú položku? Všetky archivované položky je možné neskôr obnoviť.",
+      "success": {
+        "label": "Archivácia úspešná",
+        "message": "Vaše archívy nájdete v archívoch projektu."
+      },
+      "failed": {
+        "message": "Archivácia pracovnej položky zlyhala. Skúste to prosím znova."
+      },
+      "banner_message": "Táto pracovná položka bola archivovaná. Prejdite do sekcie Archívy a obnovte ju.",
+      "go_to_archives": "Prejsť do archívov"
+    },
+    "restore": {
+      "success": {
+        "title": "Obnovenie úspešné",
+        "message": "Vaša pracovná položka je na nájdenie v pracovných položkách projektu."
+      },
+      "failed": {
+        "message": "Obnovenie pracovnej položky zlyhalo. Skúste to prosím znova."
+      }
+    },
+    "relation": {
+      "relates_to": "Súvisiace s",
+      "duplicate": "Duplikát",
+      "blocked_by": "Blokované",
+      "blocking": "Blokujúce",
+      "start_before": "Začína pred",
+      "start_after": "Začína po",
+      "finish_before": "Končí pred",
+      "finish_after": "Končí po",
+      "implements": "Implementuje",
+      "implemented_by": "Implementované"
+    },
+    "copy_link": "Kopírovať odkaz na pracovnú položku",
+    "delete": {
+      "label": "Zmazať pracovnú položku",
+      "error": "Chyba pri mazaní pracovnej položky"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Pracovná položka úspešne prihlásená na odber",
+        "unsubscribed": "Odber pracovnej položky zrušený"
+      }
+    },
+    "select": {
+      "error": "Vyberte aspoň jednu pracovnú položku",
+      "empty": "Nie sú vybrané žiadne pracovné položky",
+      "add_selected": "Pridať vybrané pracovné položky",
+      "select_all": "Vybrať všetko",
+      "deselect_all": "Zrušiť výber všetkého"
+    },
+    "open_in_full_screen": "Otvoriť pracovnú položku na celú obrazovku",
+    "duplicate": {
+      "modal": {
+        "title": "Vytvoriť kópiu do iného projektu",
+        "description1": "Toto vytvorí kópiu pracovnej položky.",
+        "description2": "Pri duplikovaní budú odstránené všetky údaje vlastností.",
+        "placeholder": "Vybrať projekt"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Pracovná položka bola úspešne duplikovaná"
+        },
+        "error": {
+          "message": "Duplikovanie pracovnej položky zlyhalo"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Prepojiť stránky",
+      "show_wiki_pages": "Zobraziť wiki stránky",
+      "link_pages_to": "Prepojiť stránky s",
+      "linked_pages": "Prepojené stránky",
+      "no_description": "Toto je prázdna stránka. Prečo nenapíšete dovnútra niečo a neuvidíte to zobrazené ako tento zástupný text",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Stránky boli aktualizované",
+            "message": "Stránky boli úspešne aktualizované"
+          },
+          "error": {
+            "title": "Aktualizácia stránok zlyhala",
+            "message": "Aktualizácia stránok zlyhala"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Stránka bola odstránená",
+            "message": "Stránka bola úspešne odstránená"
+          },
+          "error": {
+            "title": "Odstránenie stránky zlyhalo",
+            "message": "Odstránenie stránky zlyhalo"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Kliknite pre hlasovanie hore",
+      "click_to_downvote": "Kliknite pre hlasovanie dole",
+      "click_to_view_upvotes": "Kliknite pre zobrazenie hlasov hore",
+      "click_to_view_downvotes": "Kliknite pre zobrazenie hlasov dole"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Podriadená pracovná položka bola úspešne aktualizovaná",
+      "error": "Chyba pri aktualizácii podriadenej položky"
+    },
+    "remove": {
+      "success": "Podriadená pracovná položka bola úspešne odstránená",
+      "error": "Chyba pri odstraňovaní podriadenej položky"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Nemáte podriadené pracovné položky, ktoré zodpovedajú použitým filtrom.",
+        "description": "Pre zobrazenie všetkých podriadených pracovných položiek vymažte všetky použité filtre.",
+        "action": "Vymazať filtre"
+      },
+      "list_filters": {
+        "title": "Nemáte pracovné položky, ktoré zodpovedajú použitým filtrom.",
+        "description": "Pre zobrazenie všetkých pracovných položiek vymažte všetky použité filtre.",
+        "action": "Vymazať filtre"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Žiadne zodpovedajúce položky"
+      },
+      "no_issues": {
+        "title": "Žiadne položky"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Žiadne komentáre",
+        "description": "Komentáre slúžia na diskusiu a sledovanie položiek."
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Nemožno archivovať pracovné položky",
+        "message": "Archivovať je možné iba pracovné položky patriace do skupín stavov Dokončené alebo Zrušené."
+      },
+      "invalid_issue_start_date": {
+        "title": "Nemožno aktualizovať pracovné položky",
+        "message": "Vybraný dátum začiatku nasleduje po termíne dokončenia niektorých pracovných položiek. Zabezpečte, aby dátum začiatku predchádzal termínu dokončenia."
+      },
+      "invalid_issue_target_date": {
+        "title": "Nemožno aktualizovať pracovné položky",
+        "message": "Vybraný termín dokončenia predchádza dátumu začiatku niektorých pracovných položiek. Zabezpečte, aby termín dokončenia nasledoval po dátume začiatku."
+      },
+      "invalid_state_transition": {
+        "title": "Nemožno aktualizovať pracovné položky",
+        "message": "Zmena stavu nie je povolená pre niektoré pracovné položky. Uistite sa, že zmena stavu je povolená."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Menite stav, prioritu a ďalšie vlastnosti viacerých pracovných položiek naraz. V priemere ušetríte tri minúty na operáciu.",
+      "cta": "Upgradovať na One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Opakujúce sa pracovné položky",
+      "description": "Nastavte opakujúce sa pracovné položky raz a my sa postaráme o opakovanie. Všetko sa tu zobrazí, keď bude čas.",
+      "new_recurring_work_item": "Nová opakujúca sa úloha",
+      "update_recurring_work_item": "Upraviť opakujúcu sa úlohu",
+      "form": {
+        "interval": {
+          "title": "Plán",
+          "start_date": {
+            "validation": {
+              "required": "Dátum začiatku je povinný"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Typ intervalu je povinný"
+            }
+          }
+        },
+        "button": {
+          "create": "Vytvoriť opakujúcu sa úlohu",
+          "update": "Upraviť opakujúcu sa úlohu"
+        }
+      },
+      "create_button": {
+        "label": "Vytvoriť opakujúcu sa úlohu",
+        "no_permission": "Kontaktujte správcu projektu pre vytvorenie opakujúcich sa úloh"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Vaša práca na autopilote",
+        "description": "Nastavte raz. Pripomenieme vám to, keď bude čas. Upgradujte na Business, aby bola opakovaná práca bez námahy."
+      },
+      "no_templates": {
+        "button": "Vytvorte svoju prvú opakujúcu sa úlohu"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Opakujúca sa úloha vytvorená",
+          "message": "{name}, opakujúca sa úloha, je teraz dostupná vo vašom pracovnom priestore."
+        },
+        "error": {
+          "title": "Túto opakujúcu sa úlohu sa tentokrát nepodarilo vytvoriť.",
+          "message": "Skúste znova uložiť detaily alebo ich skopírujte do novej opakujúcej sa úlohy, ideálne v inom okne."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Opakujúca sa úloha upravená",
+          "message": "{name}, opakujúca sa úloha, bola upravená."
+        },
+        "error": {
+          "title": "Zmeny tejto opakujúcej sa úlohy sa nepodarilo uložiť.",
+          "message": "Skúste znova uložiť detaily alebo sa k tejto úlohe vráťte neskôr. Ak problém pretrváva, kontaktujte nás."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Opakujúca sa úloha odstránená",
+          "message": "{name}, opakujúca sa úloha, bola odstránená z vášho pracovného priestoru."
+        },
+        "error": {
+          "title": "Túto opakujúcu sa úlohu sa nepodarilo odstrániť.",
+          "message": "Skúste ju odstrániť znova alebo sa k nej vráťte neskôr. Ak sa vám ju stále nedarí odstrániť, kontaktujte nás."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Odstrániť opakujúcu sa úlohu",
+      "description": {
+        "prefix": "Naozaj chcete odstrániť opakujúcu sa úlohu-",
+        "suffix": "? Všetky údaje súvisiace s touto opakujúcou sa úlohou budú natrvalo odstránené. Táto akcia je nevratná."
+      }
+    }
+  },
+  "epic": {
+    "new": "Nová epika",
+    "label": "{count, plural, one {Epika} few {Epiky} other {Epík}}",
+    "adding": "Pridávam epiku",
+    "create": {
+      "success": "Epika bola úspešne vytvorená"
+    },
+    "add": {
+      "label": "Pridať epiku",
+      "press_enter": "Pre pridanie ďalšej epiky stlačte 'Enter'"
+    },
+    "title": {
+      "label": "Názov epiky",
+      "required": "Názov epiky je povinný."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/workflow.json b/packages/i18n/src/locales/sk/workflow.json
new file mode 100644
index 0000000..5726de4
--- /dev/null
+++ b/packages/i18n/src/locales/sk/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Povoliť nové pracovné položky",
+      "work_item_creation_disable_tooltip": "Vytváranie pracovných položiek je pre tento stav zakázané",
+      "default_state": "Predvolený stav umožňuje všetkým členom vytvárať nové pracovné položky. Toto sa nedá zmeniť",
+      "state_change_count": "{count, plural, one {1 povolená zmena stavu} few {{count} povolené zmeny stavu} other {{count} povolených zmien stavu}}",
+      "movers_count": "{count, plural, one {1 uvedený recenzent} few {{count} uvedení recenzenti} other {{count} uvedených recenzentov}}",
+      "state_changes": {
+        "label": {
+          "default": "Pridať povolenú zmenu stavu",
+          "loading": "Pridáva sa povolená zmena stavu"
+        },
+        "move_to": "Zmeniť stav na",
+        "movers": {
+          "label": "Po kontrole používateľom",
+          "tooltip": "Recenzenti sú ľudia, ktorí majú povolenie presúvať pracovné položky z jedného stavu do druhého.",
+          "add": "Pridať recenzentov"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Túto pracovnú položku sem nemôžete presunúť."
+    },
+    "workflow_enabled": {
+      "label": "Zmena stavu"
+    },
+    "workflow_tree": {
+      "label": "Pre pracovné položky v",
+      "state_change_label": "môže ho presunúť do"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Ovládajte chaos zmien a recenzií s Vorkflou.",
+        "description": "Nastavte pravidlá pre to, kam sa vaša práca presúva, kým a kedy s Vorkflou v Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Zobraziť históriu zmien",
+      "reset_workflow": "Resetovať vorkflou"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Ste si istí, že chcete resetovať túto vorkflou?",
+        "description": "Ak resetujete túto vorkflou, všetky vaše pravidlá zmien stavu budú odstránené a budete ich musieť vytvoriť znova, aby fungovali v tomto projekte."
+      },
+      "delete_state_change": {
+        "title": "Ste si istí, že chcete odstrániť toto pravidlo zmeny stavu?",
+        "description": "Po odstránení nemôžete túto zmenu vrátiť späť a budete musieť nastaviť pravidlo znova, ak chcete, aby fungovalo pre tento projekt."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} vorkflou",
+        "success": {
+          "title": "Úspech",
+          "message": "Vorkflou bola úspešne {action}"
+        },
+        "error": {
+          "title": "Chyba",
+          "message": "Vorkflou nemohla byť {action}. Skúste to znova."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Úspech",
+          "message": "Vorkflou bola úspešne resetovaná"
+        },
+        "error": {
+          "title": "Chyba pri resetovaní vorkflou",
+          "message": "Vorkflou nemohla byť resetovaná. Skúste to znova."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Chyba pri pridávaní pravidla zmeny stavu",
+          "message": "Pravidlo zmeny stavu nemohlo byť pridané. Skúste to znova."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Chyba pri úprave pravidla zmeny stavu",
+          "message": "Pravidlo zmeny stavu nemohlo byť upravené. Skúste to znova."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Chyba pri odstránení pravidla zmeny stavu",
+          "message": "Pravidlo zmeny stavu nemohlo byť odstránené. Skúste to znova."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Chyba pri úprave recenzentov pravidla zmeny stavu",
+          "message": "Recenzenti pravidla zmeny stavu nemohli byť upravení. Skúste to znova."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/workspace-settings.json b/packages/i18n/src/locales/sk/workspace-settings.json
new file mode 100644
index 0000000..d2ed5bf
--- /dev/null
+++ b/packages/i18n/src/locales/sk/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Nastavenia pracovného priestoru",
+    "page_label": "{workspace} - Všeobecné nastavenia",
+    "key_created": "Kľúč vytvorený",
+    "copy_key": "Skopírujte a uložte tento kľúč do Plane Pages. Po zatvorení ho neuvidíte. CSV súbor s kľúčom bol stiahnutý.",
+    "token_copied": "Token skopírovaný do schránky.",
+    "settings": {
+      "general": {
+        "title": "Všeobecné",
+        "upload_logo": "Nahrať logo",
+        "edit_logo": "Upraviť logo",
+        "name": "Názov pracovného priestoru",
+        "company_size": "Veľkosť spoločnosti",
+        "url": "URL pracovného priestoru",
+        "workspace_timezone": "Časové pásmo pracovného priestoru",
+        "update_workspace": "Aktualizovať priestor",
+        "delete_workspace": "Zmazať tento priestor",
+        "delete_workspace_description": "Zmazaním priestoru odstránite všetky dáta a zdroje. Akcia je nevratná.",
+        "delete_btn": "Zmazať priestor",
+        "delete_modal": {
+          "title": "Naozaj chcete zmazať tento priestor?",
+          "description": "Máte aktívnu skúšobnú verziu. Najprv ju zrušte.",
+          "dismiss": "Zatvoriť",
+          "cancel": "Zrušiť skúšobnú verziu",
+          "success_title": "Priestor zmazaný.",
+          "success_message": "Budete presmerovaný na profil.",
+          "error_title": "Nepodarilo sa.",
+          "error_message": "Skúste to prosím znova."
+        },
+        "errors": {
+          "name": {
+            "required": "Názov je povinný",
+            "max_length": "Názov priestoru nesmie presiahnuť 80 znakov"
+          },
+          "company_size": {
+            "required": "Veľkosť spoločnosti je povinná",
+            "select_a_range": "Vyberte veľkosť organizácie"
+          }
+        }
+      },
+      "members": {
+        "title": "Členovia",
+        "add_member": "Pridať člena",
+        "pending_invites": "Čakajúce pozvánky",
+        "invitations_sent_successfully": "Pozvánky boli úspešne odoslané",
+        "leave_confirmation": "Naozaj chcete opustiť priestor? Stratíte prístup. Akcia je nevratná.",
+        "details": {
+          "full_name": "Celé meno",
+          "display_name": "Zobrazované meno",
+          "email_address": "E-mailová adresa",
+          "account_type": "Typ účtu",
+          "authentication": "Overovanie",
+          "joining_date": "Dátum pripojenia"
+        },
+        "modal": {
+          "title": "Pozvať spolupracovníkov",
+          "description": "Pozvite ľudí na spoluprácu.",
+          "button": "Odoslať pozvánky",
+          "button_loading": "Odosielanie pozvánok",
+          "placeholder": "meno@spoločnosť.sk",
+          "errors": {
+            "required": "Vyžaduje sa e-mailová adresa.",
+            "invalid": "E-mail je neplatný"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Fakturácia a plány",
+        "description": "Vyberte si plán, spravujte predplatné a jednoducho upgradujte podľa vašich potrieb.",
+        "title": "Fakturácia a plány",
+        "current_plan": "Aktuálny plán",
+        "free_plan": "Používate bezplatný plán",
+        "view_plans": "Zobraziť plány"
+      },
+      "exports": {
+        "heading": "Exporty",
+        "description": "Exportujte údaje o projektoch v rôznych formátoch a získajte prístup k histórii exportov s odkazmi na stiahnutie.",
+        "title": "Exporty",
+        "exporting": "Exportovanie",
+        "previous_exports": "Predchádzajúce exporty",
+        "export_separate_files": "Exportovať dáta do samostatných súborov",
+        "exporting_projects": "Exportovanie projektu",
+        "format": "Formát",
+        "filters_info": "Použite filtre na export konkrétnych pracovných položiek podľa vašich kritérií.",
+        "modal": {
+          "title": "Exportovať do",
+          "toasts": {
+            "success": {
+              "title": "Export úspešný",
+              "message": "Exportované {entity} si môžete stiahnuť z predchádzajúceho exportu."
+            },
+            "error": {
+              "title": "Export zlyhal",
+              "message": "Skúste to prosím znova."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooky",
+        "description": "Automatizujte oznámenia do externých služieb pri udalostiach v projekte.",
+        "title": "Webhooky",
+        "add_webhook": "Pridať webhook",
+        "modal": {
+          "title": "Vytvoriť webhook",
+          "details": "Detaily webhooku",
+          "payload": "URL pre payload",
+          "question": "Ktoré udalosti majú spustiť tento webhook?",
+          "error": "URL je povinná"
+        },
+        "secret_key": {
+          "title": "Tajný kľúč",
+          "message": "Vygenerujte token na prihlásenie k webhooku"
+        },
+        "options": {
+          "all": "Posielať všetko",
+          "individual": "Vybrať jednotlivé udalosti"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook vytvorený",
+            "message": "Webhook bol úspešne vytvorený"
+          },
+          "not_created": {
+            "title": "Webhook nebol vytvorený",
+            "message": "Vytvorenie webhooku zlyhalo"
+          },
+          "updated": {
+            "title": "Webhook aktualizovaný",
+            "message": "Webhook bol úspešne aktualizovaný"
+          },
+          "not_updated": {
+            "title": "Aktualizácia webhooku zlyhala",
+            "message": "Webhook sa nepodarilo aktualizovať"
+          },
+          "removed": {
+            "title": "Webhook odstránený",
+            "message": "Webhook bol úspešne odstránený"
+          },
+          "not_removed": {
+            "title": "Odstránenie webhooku zlyhalo",
+            "message": "Webhook sa nepodarilo odstrániť"
+          },
+          "secret_key_copied": {
+            "message": "Tajný kľúč skopírovaný do schránky."
+          },
+          "secret_key_not_copied": {
+            "message": "Chyba pri kopírovaní kľúča."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "API Tokeny",
+        "description": "Generujte bezpečné API tokeny na integráciu vašich dát s externými systémami a aplikáciami.",
+        "title": "API Tokeny",
+        "add_token": "Pridať token prístupu",
+        "create_token": "Vytvoriť token",
+        "never_expires": "Nikdy neexpiruje",
+        "generate_token": "Generovať token",
+        "generating": "Generovanie",
+        "delete": {
+          "title": "Zmazať API token",
+          "description": "Aplikácie používajúce tento token stratia prístup. Akcia je nevratná.",
+          "success": {
+            "title": "Úspech!",
+            "message": "Token úspešne zmazaný"
+          },
+          "error": {
+            "title": "Chyba!",
+            "message": "Mazanie tokenu zlyhalo"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Integrácie",
+        "heading": "Integrácie",
+        "description": "Prepojte sa s populárnymi nástrojmi a službami a synchronizujte svoju prácu v rámci celého ekosystému pracovného postupu.",
+        "page_title": "Pracujte so svojimi údajmi Plane v dostupných aplikáciách alebo vo vlastných.",
+        "page_description": "Zobraziť všetky integrácie používané týmto pracovným priestorom alebo vami."
+      },
+      "imports": {
+        "title": "Importy",
+        "heading": "Importy",
+        "description": "Pripojte a importujte údaje z existujúcich nástrojov na riadenie projektov a zefektívnite integráciu svojho pracovného postupu."
+      },
+      "worklogs": {
+        "title": "Pracovné záznamy",
+        "heading": "Záznamy práce",
+        "description": "Stiahnite si záznamy práce (timesheety) pre kohokoľvek v akomkoľvek projekte."
+      },
+      "group_syncing": {
+        "title": "Synchronizácia skupín",
+        "heading": "Synchronizácia skupín",
+        "description": "Prepojte skupiny poskytovateľa identity s projektami a rolami. Prístup používateľov sa automaticky aktualizuje pri zmene členstva v skupine vo vašom IdP, čím sa zjednodušuje onboarding a offboarding.",
+        "enable": {
+          "title": "Povoliť synchronizáciu skupín",
+          "description": "Automaticky pridávajte používateľov do projektov na základe skupín poskytovateľa identity."
+        },
+        "config": {
+          "title": "Konfigurovať synchronizáciu skupín",
+          "description": "Nastavte, ako sú skupiny poskytovateľa identity mapované na projekty a role.",
+          "sync_on_login": {
+            "title": "Synchronizácia pri prihlásení",
+            "description": "Aktualizujte členstvo v skupine a prístup k projektu pri prihlásení používateľa."
+          },
+          "sync_offline": {
+            "title": "Offline synchronizácia",
+            "description": "Spúšťa synchronizáciu každých šesť hodín automaticky, bez čakania na prihlásenie používateľov."
+          },
+          "auto_remove": {
+            "title": "Automatické odstránenie",
+            "description": "Automaticky odstráňte používateľov z projektov, keď už nezodpovedajú skupine."
+          },
+          "group_attribute_key": {
+            "title": "Kľúč atribútu skupiny",
+            "description": "Atribút poskytovateľa identity používaný na identifikáciu a synchronizáciu používateľských skupín.",
+            "placeholder": "Skupiny"
+          }
+        },
+        "group_mapping": {
+          "title": "Mapovanie skupín",
+          "description": "Prepojte skupiny poskytovateľa identity s projektami a rolami.",
+          "button_text": "Pridať novú synchronizáciu skupín"
+        },
+        "toast": {
+          "updating": "Aktualizácia funkcie synchronizácie skupín",
+          "success": "Funkcia synchronizácie skupín bola úspešne aktualizovaná.",
+          "error": "Nepodarilo sa aktualizovať funkciu synchronizácie skupín!"
+        },
+        "delete_modal": {
+          "title": "Zmazať synchronizáciu skupín",
+          "content": "Noví používatelia z tejto skupiny identity už nebudú pridávaní do projektu. Už pridaní používatelia si zachovajú svoju súčasnú rolu."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Používateľská skupina",
+            "required": "Používateľská skupina je povinná",
+            "placeholder": "Zadajte názvy skupín IdP"
+          },
+          "project": {
+            "text": "Projekt",
+            "required": "Projekt je povinný",
+            "placeholder": "Vyberte projekt"
+          },
+          "default_role": {
+            "text": "Rola projektu",
+            "required": "Rola projektu je povinná",
+            "placeholder": "Vyberte rolu projektu"
+          }
+        }
+      },
+      "identity": {
+        "title": "Identita",
+        "heading": "Identita",
+        "description": "Nakonfigurujte svoju doménu a povolte jednotné prihlásenie"
+      },
+      "project_states": {
+        "title": "Stavy projektu",
+        "heading": "Zobrazte prehľad priebehu všetkých projektov.",
+        "description": "Stavy projektov sú funkcia exkluzívna pre Plane na sledovanie priebehu všetkých vašich projektov podľa ľubovoľnej vlastnosti projektu.",
+        "go_to_settings": "Prejsť na nastavenia"
+      },
+      "projects": {
+        "title": "Projekty",
+        "description": "Spravujte stavy projektov, povoľte štítky projektov a ďalšie konfigurácie.",
+        "tabs": {
+          "states": "Stavy projektu",
+          "labels": "Štítky projektu"
+        }
+      },
+      "templates": {
+        "title": "Šablóny",
+        "heading": "Šablóny",
+        "description": "Ušetrite 80 % času stráveného vytváraním projektov, pracovných položiek a stránok pomocou šablón."
+      },
+      "relations": {
+        "title": "Vzťahy",
+        "heading": "Vzťahy",
+        "description": "Vytvárajte a spravujte typy vzťahov, ktoré prepájajú pracovné položky naprieč vaším pracovným priestorom."
+      },
+      "cancel_trial": {
+        "title": "Najprv zrušte vašu skúšobnú verziu.",
+        "description": "Máte aktívnu skúšobnú verziu jedného z našich platených plánov. Prosím, najskôr ju zrušte, aby ste mohli pokračovať.",
+        "dismiss": "Zavrieť",
+        "cancel": "Zrušiť skúšobnú verziu",
+        "cancel_success_title": "Skúšobná verzia zrušená.",
+        "cancel_success_message": "Teraz môžete odstrániť vorkspejs.",
+        "cancel_error_title": "To nefungovalo.",
+        "cancel_error_message": "Skúste to znova, prosím."
+      },
+      "applications": {
+        "internal": "Interný",
+        "title": "Aplikácie",
+        "applicationId_copied": "ID aplikácie skopírované do schránky",
+        "clientId_copied": "ID klienta skopírované do schránky",
+        "clientSecret_copied": "Tajomstvo klienta skopírované do schránky",
+        "third_party_apps": "Aplikácie tretích strán",
+        "your_apps": "Vaše aplikácie",
+        "connect": "Pripojiť",
+        "connected": "Pripojené",
+        "disconnect": "Odpojiť",
+        "install": "Nainštalovať",
+        "installed": "Nainštalované",
+        "configure": "Konfigurovať",
+        "app_available": "Túto aplikáciu ste sprístupnili na použitie s pracovným priestorom Plane",
+        "app_credentials_regenrated": {
+          "title": "Prihlasovacie údaje aplikácie boli úspešne znovu vygenerované",
+          "description": "Nahraďte klientsky kľúč všade, kde sa používa. Predchádzajúci kľúč už nie je platný."
+        },
+        "app_created": {
+          "title": "Aplikácia bola úspešne vytvorená",
+          "description": "Použite prihlasovacie údaje na inštaláciu aplikácie do pracovného priestoru Plane"
+        },
+        "installed_apps": "Nainštalované aplikácie",
+        "all_apps": "Všetky aplikácie",
+        "internal_apps": "Interné aplikácie",
+        "app_name_title": "Ako pomenujete túto aplikáciu",
+        "app_description_title": {
+          "label": "Dlhý popis",
+          "placeholder": "Napíšte dlhý popis pre trhovisko. Stlačte '/' pre príkazy."
+        },
+        "authorization_grant_type": {
+          "title": "Typ pripojenia",
+          "description": "Vyberte, či má byť vaša aplikácia nainštalovaná raz pre pracovný priestor alebo umožniť každému používateľovi pripojiť svoj vlastný účet"
+        },
+        "website": {
+          "title": "Webová stránka",
+          "description": "Odkaz na webovú stránku vašej aplikácie.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Tvorca aplikácií",
+          "description": "Osoba alebo organizácia, ktorá vytvára aplikáciu."
+        },
+        "app_maker_error": "Tvorca aplikácie je povinný",
+        "setup_url": {
+          "label": "URL nastavenia",
+          "description": "Používatelia budú po nainštalovaní aplikácie presmerovaní na túto URL.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "Webhook URL",
+          "description": "Tu budeme posielať udalosti webhook a aktualizácie z pracovných priestorov, kde je vaša aplikácia nainštalovaná.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Webhook Secret",
+          "description": "Tajný kľúč používaný na overenie prichádzajúcich webhook požiadaviek.",
+          "placeholder": "Zadajte náhodný tajný kľúč"
+        },
+        "redirect_uris": {
+          "label": "Presmerovacie URI (oddelené medzerou)",
+          "description": "Používatelia budú po autentifikácii pomocou Plane presmerovaní na túto cestu.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Pripojte pracovný priestor Plane pre začatie používania",
+        "client_id_and_secret": "ID a Tajomstvo Klienta",
+        "client_id_and_secret_description": "Skopírujte a uložte tento tajný kľúč. Po kliknutí na Zavrieť tento kľúč už neuvidíte.",
+        "client_id_and_secret_download": "Môžete si stiahnuť CSV s kľúčom odtiaľto.",
+        "application_id": "ID Aplikácie",
+        "client_id": "ID Klienta",
+        "client_secret": "Tajomstvo Klienta",
+        "export_as_csv": "Exportovať ako CSV",
+        "slug_already_exists": "Slug už existuje",
+        "failed_to_create_application": "Nepodarilo sa vytvoriť aplikáciu",
+        "upload_logo": "Nahrať Logo",
+        "app_name_error": "Názov aplikácie je povinný",
+        "app_short_description_title": "Dajte tejto aplikácii krátky popis",
+        "app_short_description_error": "Krátky popis aplikácie je povinný",
+        "app_description_error": "Popis aplikácie je povinný",
+        "app_slug_title": "Slug aplikácie",
+        "app_slug_error": "Slug aplikácie je povinný",
+        "invalid_website_error": "Neplatná webová stránka",
+        "webhook_url_title": "URL Webhooku",
+        "webhook_url_error": "URL webhooku je povinné",
+        "invalid_webhook_url_error": "Neplatné URL webhooku",
+        "redirect_uris_title": "URI presmerovania",
+        "redirect_uris_error": "URI presmerovania sú povinné",
+        "invalid_redirect_uris_error": "Neplatné URI presmerovania",
+        "redirect_uris_description": "Zadajte URI oddelené medzerami, kam aplikácia presmeruje po používateľovi, napr. https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Autorizované JavaScript pôvody",
+        "authorized_javascript_origins_error": "Autorizované JavaScript pôvody sú povinné",
+        "invalid_authorized_javascript_origins_error": "Neplatné autorizované JavaScript pôvody",
+        "authorized_javascript_origins_description": "Zadajte pôvody oddelené medzerami, odkiaľ bude môcť aplikácia robiť požiadavky, napr. app.com example.com",
+        "create_app": "Vytvoriť aplikáciu",
+        "update_app": "Aktualizovať aplikáciu",
+        "build_your_own_app": "Vytvorte si vlastnú aplikáciu",
+        "edit_app_details": "Upraviť detaily aplikácie",
+        "regenerate_client_secret_description": "Znovu vygenerovať tajomstvo klienta. Po regenerácii môžete kľúč skopírovať alebo stiahnuť do CSV súboru.",
+        "regenerate_client_secret": "Znovu vygenerovať tajomstvo klienta",
+        "regenerate_client_secret_confirm_title": "Ste si istí, že chcete znovu vygenerovať tajomstvo klienta?",
+        "regenerate_client_secret_confirm_description": "Aplikácia používajúca toto tajomstvo prestane fungovať. Budete musieť aktualizovať tajomstvo v aplikácii.",
+        "regenerate_client_secret_confirm_cancel": "Zrušiť",
+        "regenerate_client_secret_confirm_regenerate": "Znovu vygenerovať",
+        "read_only_access_to_workspace": "Prístup len na čítanie k vášmu pracovnému priestoru",
+        "write_access_to_workspace": "Prístup na zápis k vášmu pracovnému priestoru",
+        "read_only_access_to_user_profile": "Prístup len na čítanie k vášmu používateľskému profilu",
+        "write_access_to_user_profile": "Prístup na zápis k vášmu používateľskému profilu",
+        "connect_app_to_workspace": "Pripojiť {app} k vášmu pracovnému priestoru {workspace}",
+        "user_permissions": "Používateľské oprávnenia",
+        "user_permissions_description": "Používateľské oprávnenia sa používajú na udelenie prístupu k profilu používateľa.",
+        "workspace_permissions": "Oprávnenia pracovného priestoru",
+        "workspace_permissions_description": "Oprávnenia pracovného priestoru sa používajú na udelenie prístupu k pracovnému priestoru.",
+        "with_the_permissions": "s oprávneniami",
+        "app_consent_title": "{app} žiada o prístup k vášmu pracovnému priestoru a profilu Plane.",
+        "choose_workspace_to_connect_app_with": "Vyberte pracovný priestor, s ktorým chcete pripojiť aplikáciu",
+        "app_consent_workspace_permissions_title": "{app} by chcel",
+        "app_consent_user_permissions_title": "{app} môže tiež požiadať o povolenie používateľa pre nasledujúce zdroje. Tieto oprávnenia budú vyžiadané a autorizované iba používateľom.",
+        "app_consent_accept_title": "Prijatím",
+        "app_consent_accept_1": "Udeľujete aplikácii prístup k vašim údajom Plane kdekoľvek, kde môžete používať aplikáciu v rámci alebo mimo Plane",
+        "app_consent_accept_2": "Súhlasíte s Pravidlami ochrany súkromia a Podmienkami používania {app}",
+        "accepting": "Prijímanie...",
+        "accept": "Prijať",
+        "categories": "Kategórie",
+        "select_app_categories": "Vyberte kategórie aplikácie",
+        "categories_title": "Kategórie",
+        "categories_error": "Kategórie sú povinné",
+        "invalid_categories_error": "Neplatné kategórie",
+        "categories_description": "Vyberte kategórie, ktoré najlepšie opisujú aplikáciu",
+        "supported_plans": "Podporované Plány",
+        "supported_plans_description": "Vyberte plány pracovného priestoru, ktoré môžu nainštalovať túto aplikáciu. Ponechajte prázdne, ak chcete povoliť všetky plány.",
+        "select_plans": "Vybrať Plány",
+        "privacy_policy_url_title": "URL Pravidiel ochrany súkromia",
+        "privacy_policy_url_error": "URL Pravidiel ochrany súkromia je povinné",
+        "invalid_privacy_policy_url_error": "Neplatné URL Pravidiel ochrany súkromia",
+        "terms_of_service_url_title": "URL Podmienok služby",
+        "terms_of_service_url_error": "URL Podmienok služby je povinné",
+        "invalid_terms_of_service_url_error": "Neplatné URL Podmienok služby",
+        "support_url_title": "URL Podpory",
+        "support_url_error": "URL Podpory je povinné",
+        "invalid_support_url_error": "Neplatné URL Podpory",
+        "video_url_title": "URL Video",
+        "video_url_error": "URL Video je povinné",
+        "invalid_video_url_error": "Neplatné URL Video",
+        "setup_url_error": "URL Nastavenia je povinné",
+        "invalid_setup_url_error": "Neplatné URL Nastavenia",
+        "configuration_url_title": "URL Konfigurácie",
+        "configuration_url_error": "URL Konfigurácie je povinné",
+        "invalid_configuration_url_error": "Neplatné URL Konfigurácie",
+        "contact_email_title": "Email Kontaktu",
+        "contact_email_error": "Email Kontaktu je povinný",
+        "invalid_contact_email_error": "Neplatný email kontaktu",
+        "upload_attachments": "Nahrať prílohy",
+        "uploading_images": "Nahrávanie {count} obrázku{count, plural, one {s} other {s}}",
+        "drop_images_here": "Presuňte obrázky sem",
+        "click_to_upload_images": "Kliknite, aby ste nahrávali obrázky",
+        "invalid_file_or_exceeds_size_limit": "Neplatný súbor alebo presahuje limit veľkosti ({size} MB)",
+        "uploading": "Nahrávanie...",
+        "upload_and_save": "Nahrať a uložiť",
+        "app_consent_no_access_title": "Požiadavka na inštaláciu",
+        "app_consent_no_access_description": "Táto aplikácia môže byť nainštalovaná až po jej inštalácii administrátorom pracovného priestoru. Kontaktujte svojho administrátora pracovného priestoru, aby ste mohli pokračovať.",
+        "app_consent_unapproved_title": "Túto aplikáciu Plane ešte neskontrolovalo ani neschválilo.",
+        "app_consent_unapproved_description": "Pred prepojením s pracovným priestorom sa uistite, že tejto aplikácii dôverujete.",
+        "go_to_app": "Prejsť na aplikáciu",
+        "enable_app_mentions": "Povoliť zmienky o aplikácii",
+        "enable_app_mentions_tooltip": "Keď je toto povolené, používatelia môžu spomenúť alebo priradiť pracovné položky tejto aplikácii.",
+        "scopes": "Rozsahy",
+        "select_scopes": "Vybrať rozsahy",
+        "read_access_to": "Prístup len na čítanie k",
+        "write_access_to": "Prístup na zápis k",
+        "global_permission_expiration": "Globálne rozsahy čoskoro vypršia. Namiesto toho použite granulované rozsahy. Napríklad použite project:read namiesto globálneho čítania.",
+        "selected_scopes": "{count} vybraných",
+        "scopes_and_permissions": "Rozsahy a oprávnenia",
+        "read": "Čítanie",
+        "write": "Zápis",
+        "scope_description": {
+          "projects": "Prístup k projektom a všetkým súvisiacim entitám",
+          "wiki": "Prístup k wiki a všetkým súvisiacim entitám",
+          "workspaces": "Prístup k pracovným priestorom a všetkým súvisiacim entitám",
+          "stickies": "Prístup k poznámkam a všetkým súvisiacim entitám",
+          "profile": "Prístup k informáciám o profile používateľa",
+          "agents": "Prístup k agentom a všetkým súvisiacim entitám",
+          "assets": "Prístup k aktívam a všetkým súvisiacim entitám"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Vidíte, ako sa vaša práca stáva inteligentnejšou a rýchlejšou s pomocou AI, ktorá je natívne pripojená k vašej práci a znalostnej základni."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Skripty",
+        "new_script": "Nový skript",
+        "description": "Automatizujte svoje pracovné postupy pomocou vlastných skriptov a automatizačných pravidiel."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Žiadne API tokeny",
+        "description": "Používajte API na integráciu Plane s externými systémami."
+      },
+      "webhooks": {
+        "title": "Žiadne webhooky",
+        "description": "Vytvorte webhooky na automatizáciu akcií."
+      },
+      "exports": {
+        "title": "Žiadne exporty",
+        "description": "Tu nájdete históriu exportov."
+      },
+      "imports": {
+        "title": "Žiadne importy",
+        "description": "Tu nájdete históriu importov."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/sk/workspace.json b/packages/i18n/src/locales/sk/workspace.json
new file mode 100644
index 0000000..55a77e6
--- /dev/null
+++ b/packages/i18n/src/locales/sk/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Vytvorte si pracovný priestor",
+    "subheading": "Na používanie Plane musíte vytvoriť alebo sa pripojiť k pracovnému priestoru.",
+    "form": {
+      "name": {
+        "label": "Pomenujte svoj pracovný priestor",
+        "placeholder": "Vhodné je použiť niečo známe a rozpoznateľné."
+      },
+      "url": {
+        "label": "Nastavte URL vášho priestoru",
+        "placeholder": "Zadajte alebo vložte URL",
+        "edit_slug": "Môžete upraviť iba časť URL (slug)"
+      },
+      "organization_size": {
+        "label": "Koľko ľudí bude tento priestor používať?",
+        "placeholder": "Vyberte rozsah"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Len správca inštancie môže vytvárať pracovné priestory",
+        "description": "Ak poznáte e-mail správcu inštancie, kliknite na tlačidlo nižšie pre kontakt.",
+        "request_button": "Požiadať správcu inštancie"
+      },
+      "validation": {
+        "name_alphanumeric": "Názvy pracovných priestorov môžu obsahovať iba (' '), ('-'), ('_') a alfanumerické znaky.",
+        "name_length": "Názov je obmedzený na 80 znakov.",
+        "url_alphanumeric": "URL môžu obsahovať iba ('-') a alfanumerické znaky.",
+        "url_length": "URL je obmedzená na 48 znakov.",
+        "url_already_taken": "URL pracovného priestoru je už obsadená!"
+      }
+    },
+    "request_email": {
+      "subject": "Žiadosť o nový pracovný priestor",
+      "body": "Ahoj správca,\n\nProsím, vytvor nový pracovný priestor s URL [/workspace-name] pre [účel vytvorenia].\n\nVďaka,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Vytvoriť pracovný priestor",
+      "loading": "Vytváranie pracovného priestoru"
+    },
+    "toast": {
+      "success": {
+        "title": "Úspech",
+        "message": "Pracovný priestor bol úspešne vytvorený"
+      },
+      "error": {
+        "title": "Chyba",
+        "message": "Vytvorenie pracovného priestoru zlyhalo. Skúste to prosím znova."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Prehľad projektov, aktivít a metrík",
+        "description": "Vitajte v Plane, teší nás, že ste tu. Vytvorte prvý projekt, sledujte pracovné položky a táto stránka sa zmení na priestor pre váš pokrok. Správcovia tu uvidia aj položky pomáhajúce tímu.",
+        "primary_button": {
+          "text": "Vytvorte prvý projekt",
+          "comic": {
+            "title": "Všetko začína projektom v Plane",
+            "description": "Projektom môže byť roadmapa produktu, marketingová kampaň alebo uvedenie nového auta."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Analytika",
+    "page_label": "{workspace} - Analytika",
+    "open_tasks": "Celkovo otvorených úloh",
+    "error": "Pri načítaní dát došlo k chybe.",
+    "work_items_closed_in": "Pracovné položky uzavreté v",
+    "selected_projects": "Vybrané projekty",
+    "total_members": "Celkovo členov",
+    "total_cycles": "Celkovo cyklov",
+    "total_modules": "Celkovo modulov",
+    "pending_work_items": {
+      "title": "Čakajúce pracovné položky",
+      "empty_state": "Tu sa zobrazí analýza čakajúcich položiek podľa spolupracovníkov."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Pracovné položky uzavreté v roku",
+      "empty_state": "Uzatvárajte položky, aby ste videli analýzu stavov v grafe."
+    },
+    "most_work_items_created": {
+      "title": "Najviac vytvorených položiek",
+      "empty_state": "Zobrazia sa spolupracovníci a počet nimi vytvorených položiek."
+    },
+    "most_work_items_closed": {
+      "title": "Najviac uzavretých položiek",
+      "empty_state": "Zobrazia sa spolupracovníci a počet nimi uzavretých položiek."
+    },
+    "tabs": {
+      "scope_and_demand": "Rozsah a dopyt",
+      "custom": "Vlastná analytika"
+    },
+    "total": "Celkový počet {entity}",
+    "started_work_items": "Spustené {entity}",
+    "backlog_work_items": "{entity} v backlogu",
+    "un_started_work_items": "Nespustené {entity}",
+    "completed_work_items": "Dokončené {entity}",
+    "project_insights": "Prehľad projektu",
+    "summary_of_projects": "Súhrn projektov",
+    "all_projects": "Všetky projekty",
+    "trend_on_charts": "Trend na grafoch",
+    "active_projects": "Aktívne projekty",
+    "customized_insights": "Prispôsobené prehľady",
+    "created_vs_resolved": "Vytvorené vs Vyriešené",
+    "empty_state": {
+      "project_insights": {
+        "title": "Zatiaľ žiadne údaje",
+        "description": "Pracovné položky priradené vám, rozdelené podľa stavu, sa zobrazia tu."
+      },
+      "created_vs_resolved": {
+        "title": "Zatiaľ žiadne údaje",
+        "description": "Pracovné položky vytvorené a vyriešené v priebehu času sa zobrazia tu."
+      },
+      "customized_insights": {
+        "title": "Zatiaľ žiadne údaje",
+        "description": "Pracovné položky priradené vám, rozdelené podľa stavu, sa zobrazia tu."
+      },
+      "general": {
+        "title": "Sledujte pokrok, pracovné zaťaženie a alokácie. Identifikujte trendy, odstráňte prekážky a urýchlite prácu",
+        "description": "Porovnávajte rozsah s dopytom, odhady a rozširovanie rozsahu. Získajte výkonnosť podľa členov tímu a tímov, a uistite sa, že váš projekt beží načas.",
+        "primary_button": {
+          "text": "Začnite svoj prvý projekt",
+          "comic": {
+            "title": "Analytika funguje najlepšie s Cyklami + Modulmi",
+            "description": "Najprv časovo ohraničte svoje problémy do Cyklov a, ak môžete, zoskupte problémy, ktoré trvajú viac ako jeden cyklus, do Modulov. Pozrite si oboje v ľavej navigácii."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Zatiaľ žiadne údaje",
+        "description": "Analýza postupu cyklu sa zobrazí tu. Pridajte pracovné položky do cyklov, aby ste mohli začať sledovať postup."
+      },
+      "module_progress": {
+        "title": "Zatiaľ žiadne údaje",
+        "description": "Analýza postupu modulu sa zobrazí tu. Pridajte pracovné položky do modulov, aby ste mohli začať sledovať postup."
+      },
+      "intake_trends": {
+        "title": "Zatiaľ žiadne údaje",
+        "description": "Analýza trendov príjmu sa zobrazí tu. Pridajte pracovné položky do príjmu, aby ste mohli sledovať trendy."
+      }
+    },
+    "upgrade_to_plan": "Inovujte na {plan}, aby ste odomkli kartu {tab}",
+    "workitem_resolved_vs_pending": "Vyriešené vs. čakajúce pracovné položky",
+    "projects_by_status": "Projekty podľa stavu",
+    "active_users": "Aktívni používatelia",
+    "intake_trends": "Trendy prijímania"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Projekt} few {Projekty} other {Projektov}}",
+    "create": {
+      "label": "Pridať projekt"
+    },
+    "network": {
+      "label": "Sieť",
+      "private": {
+        "title": "Súkromný",
+        "description": "Prístupné iba na pozvanie"
+      },
+      "public": {
+        "title": "Verejný",
+        "description": "Ktokoľvek v priestore okrem hostí sa môže pripojiť"
+      }
+    },
+    "error": {
+      "permission": "Nemáte oprávnenie na túto akciu.",
+      "cycle_delete": "Odstránenie cyklu zlyhalo",
+      "module_delete": "Odstránenie modulu zlyhalo",
+      "issue_delete": "Odstránenie pracovnej položky zlyhalo"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Nezačaté",
+      "started": "Začaté",
+      "completed": "Dokončené",
+      "cancelled": "Zrušené"
+    },
+    "sort": {
+      "manual": "Manuálne",
+      "name": "Názov",
+      "created_at": "Dátum vytvorenia",
+      "members_length": "Počet členov"
+    },
+    "scope": {
+      "my_projects": "Moje projekty",
+      "archived_projects": "Archivované"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# mesiac} few{# mesiace} other{# mesiacov}}",
+      "days_count": "{days, plural, one{# deň} other{# dni}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Žiadne aktívne projekty",
+        "description": "Projekt je nadradený cieľom. Projekty obsahujú Úlohy, Cykly a Moduly. Vytvorte nový alebo filtrujte archivované.",
+        "primary_button": {
+          "text": "Začnite prvý projekt",
+          "comic": {
+            "title": "Všetko začína projektom v Plane",
+            "description": "Projektom môže byť roadmapa produktu, marketingová kampaň alebo uvedenie nového auta."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Žiadne projekty",
+        "description": "Na vytváranie pracovných položiek potrebujete vytvoriť alebo byť súčasťou projektu.",
+        "primary_button": {
+          "text": "Začnite prvý projekt",
+          "comic": {
+            "title": "Všetko začína projektom v Plane",
+            "description": "Projektom môže byť roadmapa produktu, marketingová kampaň alebo uvedenie nového auta."
+          }
+        }
+      },
+      "filter": {
+        "title": "Žiadne zodpovedajúce projekty",
+        "description": "Nenašli sa projekty zodpovedajúce kritériám.\n Vytvorte nový."
+      },
+      "search": {
+        "description": "Nenašli sa projekty zodpovedajúce kritériám.\nVytvorte nový."
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Pridať pohľad",
+    "empty_state": {
+      "all-issues": {
+        "title": "Žiadne pracovné položky v projekte",
+        "description": "Vytvorte prvú položku a sledujte svoj pokrok!",
+        "primary_button": {
+          "text": "Vytvoriť pracovnú položku"
+        }
+      },
+      "assigned": {
+        "title": "Žiadne priradené položky",
+        "description": "Tu uvidíte položky priradené vám.",
+        "primary_button": {
+          "text": "Vytvoriť pracovnú položku"
+        }
+      },
+      "created": {
+        "title": "Žiadne vytvorené položky",
+        "description": "Tu sú položky, ktoré ste vytvorili.",
+        "primary_button": {
+          "text": "Vytvoriť pracovnú položku"
+        }
+      },
+      "subscribed": {
+        "title": "Žiadne odoberané položky",
+        "description": "Prihláste sa na odber položiek, ktoré vás zaujímajú."
+      },
+      "custom-view": {
+        "title": "Žiadne zodpovedajúce položky",
+        "description": "Zobrazia sa položky zodpovedajúce filtru."
+      }
+    },
+    "delete_view": {
+      "title": "Ste si istí, že chcete vymazať toto zobrazenie?",
+      "content": "Ak potvrdíte, všetky možnosti triedenia, filtrovania a zobrazenia + rozloženie, ktoré ste vybrali pre toto zobrazenie, budú natrvalo vymazané bez možnosti obnovenia."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Vytvoriť koncept položky",
+    "empty_state": {
+      "title": "Rozpracované položky a komentáre sa zobrazia tu.",
+      "description": "Začnite vytvárať položku a nechajte ju rozpracovanú.",
+      "primary_button": {
+        "text": "Vytvoriť prvý koncept"
+      }
+    },
+    "delete_modal": {
+      "title": "Zmazať koncept",
+      "description": "Naozaj chcete zmazať tento koncept? Akcia je nevratná."
+    },
+    "toasts": {
+      "created": {
+        "success": "Koncept vytvorený",
+        "error": "Vytvorenie zlyhalo"
+      },
+      "deleted": {
+        "success": "Koncept zmazaný"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Napíšte poznámku, dokument alebo úplnú znalostnej bázu. Nechajte Galilea, Plenovho AI asistenta, aby vám pomohol začať",
+        "description": "Stránky sú priestor pre myšlienky v Plene. Zapíšte si poznámky zo stretnutí, jednoducho ich formátujte, vložte pracovné položky, rozložte ich pomocou knižnice komponentov a uchovajte ich všetky v kontexte vášho projektu. Aby ste skrátili prácu na akomkoľvek dokumente, vyvolajte Galilea, AI Plena, pomocou skratky alebo kliknutia na tlačidlo.",
+        "primary_button": {
+          "text": "Vytvorte svoju prvú stránku"
+        }
+      },
+      "private": {
+        "title": "Zatiaľ žiadne súkromné stránky",
+        "description": "Uchovajte si tu svoje súkromné myšlienky. Keď budete pripravení zdieľať, tím je len na kliknutie.",
+        "primary_button": {
+          "text": "Vytvorte svoju prvú stránku"
+        }
+      },
+      "public": {
+        "title": "Zatiaľ žiadne stránky pracovného priestoru",
+        "description": "Pozrite si stránky zdieľané so všetkými vo vašom pracovnom priestore práve tu.",
+        "primary_button": {
+          "text": "Vytvorte svoju prvú stránku"
+        }
+      },
+      "archived": {
+        "title": "Zatiaľ žiadne archivované stránky",
+        "description": "Archivujte stránky, ktoré nie sú vo vašom radare. Keď ich budete potrebovať, pristupujte k nim tu."
+      },
+      "shared": {
+        "title": "Zatiaľ žiadne zdieľané stránky",
+        "description": "Stránky, ktoré s vami zdieľali iní, sa zobrazia tu."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Žiadne aktívne cykly",
+        "description": "Cykly vašich projektov, ktoré zahŕňajú akékoľvek obdobie, ktoré zahŕňa dnešný dátum v rámci svojho rozsahu. Nájdite tu pokrok a detaily všetkých vašich aktívnych cyklov."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Importovať členov z CSV",
+      "description": "Nahrajte CSV so stĺpcami: Email, Display Name, First Name, Last Name, Role (5, 15 alebo 20)",
+      "dropzone": {
+        "active": "Presuňte CSV súbor sem",
+        "inactive": "Presuňte alebo kliknite pre nahranie",
+        "file_type": "Podporované są iba súbory .csv"
+      },
+      "buttons": {
+        "cancel": "Zrušiť",
+        "import": "Importovať",
+        "try_again": "Skúsiť znova",
+        "close": "Zavrieť",
+        "done": "Hotovo"
+      },
+      "progress": {
+        "uploading": "Nahrávanie...",
+        "importing": "Importovanie..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Import zlyhal",
+          "complete": "Import dokončený"
+        },
+        "message": {
+          "seat_limit": "Nie je možné importovať členov kvôli obmedzeniam počtu miest.",
+          "success": "Úspešne pridaných {count} člen{plural} do pracovného priestoru.",
+          "no_imports": "Zo súboru CSV neboli importovaní žiadni členovia."
+        },
+        "stats": {
+          "successful": "Úspešné",
+          "failed": "Neúspešné"
+        },
+        "download_errors": "Stiahnuť chyby"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Neplatný súbor",
+          "message": "Podporované sú iba CSV súbory."
+        },
+        "import_failed": {
+          "title": "Import zlyhal",
+          "message": "Niečo sa pokazilo."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/accessibility.json b/packages/i18n/src/locales/tr-TR/accessibility.json
new file mode 100644
index 0000000..80a3561
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Çalışma alanı logosu",
+      "open_workspace_switcher": "Çalışma alanı değiştiricisini aç",
+      "open_user_menu": "Kullanıcı menüsünü aç",
+      "open_command_palette": "Komut paletini aç",
+      "open_extended_sidebar": "Genişletilmiş kenar çubuğunu aç",
+      "close_extended_sidebar": "Genişletilmiş kenar çubuğunu kapat",
+      "create_favorites_folder": "Favoriler klasörü oluştur",
+      "open_folder": "Klasörü aç",
+      "close_folder": "Klasörü kapat",
+      "open_favorites_menu": "Favoriler menüsünü aç",
+      "close_favorites_menu": "Favoriler menüsünü kapat",
+      "enter_folder_name": "Klasör adını girin",
+      "create_new_project": "Yeni proje oluştur",
+      "open_projects_menu": "Projeler menüsünü aç",
+      "close_projects_menu": "Projeler menüsünü kapat",
+      "toggle_quick_actions_menu": "Hızlı eylemler menüsünü aç/kapat",
+      "open_project_menu": "Proje menüsünü aç",
+      "close_project_menu": "Proje menüsünü kapat",
+      "collapse_sidebar": "Kenar çubuğunu daralt",
+      "expand_sidebar": "Kenar çubuğunu genişlet",
+      "edition_badge": "Ücretli planlar modalını aç"
+    },
+    "auth_forms": {
+      "clear_email": "E-postayı temizle",
+      "show_password": "Şifreyi göster",
+      "hide_password": "Şifreyi gizle",
+      "close_alert": "Uyarıyı kapat",
+      "close_popover": "Açılır pencereyi kapat"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/auth.json b/packages/i18n/src/locales/tr-TR/auth.json
new file mode 100644
index 0000000..041a729
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Kimlik",
+    "description": "Tek oturum açma dahil güvenlik özelliklerine erişmek için etki alanınızı yapılandırın.",
+    "domain_management": {
+      "header": "Etki alanı yönetimi",
+      "verified_domains": {
+        "header": "Doğrulanmış etki alanları",
+        "description": "Tek oturum açmayı etkinleştirmek için bir e-posta etki alanının sahipliğini doğrulayın.",
+        "button_text": "Etki alanı ekle",
+        "list": {
+          "domain_name": "Etki alanı adı",
+          "status": "Durum",
+          "status_verified": "Doğrulandı",
+          "status_failed": "Başarısız",
+          "status_pending": "Beklemede"
+        },
+        "add_domain": {
+          "title": "Etki alanı ekle",
+          "description": "SSO'yu yapılandırmak ve doğrulamak için etki alanınızı ekleyin.",
+          "form": {
+            "domain_label": "Etki alanı",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Etki alanı gereklidir",
+            "domain_invalid": "Geçerli bir etki alanı adı girin (örn. plane.so)"
+          },
+          "primary_button_text": "Etki alanı ekle",
+          "primary_button_loading_text": "Ekleniyor",
+          "toast": {
+            "success_title": "Başarılı!",
+            "success_message": "Etki alanı başarıyla eklendi. Lütfen DNS TXT kaydını ekleyerek doğrulayın.",
+            "error_message": "Etki alanı eklenemedi. Lütfen tekrar deneyin."
+          }
+        },
+        "verify_domain": {
+          "title": "Etki alanınızı doğrulayın",
+          "description": "Etki alanınızı doğrulamak için bu adımları izleyin.",
+          "instructions": {
+            "label": "Talimatlar",
+            "step_1": "Etki alanı ana bilgisayarınızın DNS ayarlarına gidin.",
+            "step_2": {
+              "part_1": "Bir",
+              "part_2": "TXT kaydı",
+              "part_3": "oluşturun ve aşağıda sağlanan tam kayıt değerini yapıştırın."
+            },
+            "step_3": "Bu güncelleme genellikle birkaç dakika sürer ancak tamamlanması 72 saate kadar sürebilir.",
+            "step_4": "DNS kaydınız güncellendikten sonra onaylamak için \"Etki alanını doğrula\" seçeneğine tıklayın."
+          },
+          "verification_code_label": "TXT kaydı değeri",
+          "verification_code_description": "Bu kaydı DNS ayarlarınıza ekleyin",
+          "domain_label": "Etki alanı",
+          "primary_button_text": "Etki alanını doğrula",
+          "primary_button_loading_text": "Doğrulanıyor",
+          "secondary_button_text": "Bunu daha sonra yapacağım",
+          "toast": {
+            "success_title": "Başarılı!",
+            "success_message": "Etki alanı başarıyla doğrulandı.",
+            "error_message": "Etki alanı doğrulanamadı. Lütfen tekrar deneyin."
+          }
+        },
+        "delete_domain": {
+          "title": "Etki alanını sil",
+          "description": {
+            "prefix": "Silmek istediğinizden emin misiniz",
+            "suffix": "? Bu işlem geri alınamaz."
+          },
+          "primary_button_text": "Sil",
+          "primary_button_loading_text": "Siliniyor",
+          "secondary_button_text": "İptal",
+          "toast": {
+            "success_title": "Başarılı!",
+            "success_message": "Etki alanı başarıyla silindi.",
+            "error_message": "Etki alanı silinemedi. Lütfen tekrar deneyin."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Tek oturum açma",
+      "disabled_message": "SSO'yu yapılandırmak için doğrulanmış bir etki alanı ekleyin",
+      "configure": {
+        "create": "Yapılandır",
+        "update": "Düzenle"
+      },
+      "switch_alert_modal": {
+        "title": "SSO yöntemini {newProviderShortName}'a geçir?",
+        "content": "{newProviderLongName} ({newProviderShortName})'ı etkinleştirmek üzeresiniz. Bu işlem {activeProviderLongName} ({activeProviderShortName})'ı otomatik olarak devre dışı bırakacaktır. {activeProviderShortName} üzerinden giriş yapmaya çalışan kullanıcılar yeni yönteme geçene kadar platforma erişemeyeceklerdir. Devam etmek istediğinizden emin misiniz?",
+        "primary_button_text": "Geçir",
+        "primary_button_text_loading": "Geçiriliyor",
+        "secondary_button_text": "İptal"
+      },
+      "form_section": {
+        "title": "{workspaceName} için IdP tarafından sağlanan ayrıntılar"
+      },
+      "form_action_buttons": {
+        "saving": "Kaydediliyor",
+        "save_changes": "Değişiklikleri kaydet",
+        "configure_only": "Yalnızca yapılandır",
+        "configure_and_enable": "Yapılandır ve etkinleştir",
+        "default": "Kaydet"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} IdP'niz için sağlanan ayrıntılar",
+        "button_text": "Kurulum ayrıntılarını al"
+      },
+      "saml": {
+        "header": "SAML'i etkinleştir",
+        "description": "Tek oturum açmayı etkinleştirmek için SAML kimlik sağlayıcınızı yapılandırın.",
+        "configure": {
+          "title": "SAML'i etkinleştir",
+          "description": "Tek oturum açma dahil güvenlik özelliklerine erişmek için bir e-posta etki alanının sahipliğini doğrulayın.",
+          "toast": {
+            "success_title": "Başarılı!",
+            "create_success_message": "SAML sağlayıcı başarıyla oluşturuldu.",
+            "update_success_message": "SAML sağlayıcı başarıyla güncellendi.",
+            "error_title": "Hata!",
+            "error_message": "SAML sağlayıcı kaydedilemedi. Lütfen tekrar deneyin."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web ayrıntıları",
+            "entity_id": {
+              "label": "Varlık Kimliği | Hedef Kitle | Meta veri bilgileri",
+              "description": "Bu Plane uygulamasını IdP'nizde yetkili bir hizmet olarak tanımlayan meta verilerin bu bölümünü oluşturacağız."
+            },
+            "callback_url": {
+              "label": "Tek oturum açma URL'si",
+              "description": "Bunu sizin için oluşturacağız. Bunu IdP'nizin oturum açma yönlendirme URL'si alanına ekleyin."
+            },
+            "logout_url": {
+              "label": "Tek oturum kapatma URL'si",
+              "description": "Bunu sizin için oluşturacağız. Bunu IdP'nizin tek oturum kapatma yönlendirme URL'si alanına ekleyin."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobil ayrıntılar",
+            "entity_id": {
+              "label": "Varlık Kimliği | Hedef Kitle | Meta veri bilgileri",
+              "description": "Bu Plane uygulamasını IdP'nizde yetkili bir hizmet olarak tanımlayan meta verilerin bu bölümünü oluşturacağız."
+            },
+            "callback_url": {
+              "label": "Tek oturum açma URL'si",
+              "description": "Bunu sizin için oluşturacağız. Bunu IdP'nizin oturum açma yönlendirme URL'si alanına ekleyin."
+            },
+            "logout_url": {
+              "label": "Tek oturum kapatma URL'si",
+              "description": "Bunu sizin için oluşturacağız. Bunu IdP'nizin oturum kapatma yönlendirme URL'si alanına ekleyin."
+            }
+          },
+          "mapping_table": {
+            "header": "Eşleme ayrıntıları",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "OIDC'yi etkinleştir",
+        "description": "Tek oturum açmayı etkinleştirmek için OIDC kimlik sağlayıcınızı yapılandırın.",
+        "configure": {
+          "title": "OIDC'yi etkinleştir",
+          "description": "Tek oturum açma dahil güvenlik özelliklerine erişmek için bir e-posta etki alanının sahipliğini doğrulayın.",
+          "toast": {
+            "success_title": "Başarılı!",
+            "create_success_message": "OIDC sağlayıcı başarıyla oluşturuldu.",
+            "update_success_message": "OIDC sağlayıcı başarıyla güncellendi.",
+            "error_title": "Hata!",
+            "error_message": "OIDC sağlayıcı kaydedilemedi. Lütfen tekrar deneyin."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web ayrıntıları",
+            "origin_url": {
+              "label": "Kaynak URL",
+              "description": "Bunu bu Plane uygulaması için oluşturacağız. Bunu IdP'nizin ilgili alanına güvenilir bir kaynak olarak ekleyin."
+            },
+            "callback_url": {
+              "label": "Yönlendirme URL'si",
+              "description": "Bunu sizin için oluşturacağız. Bunu IdP'nizin oturum açma yönlendirme URL'si alanına ekleyin."
+            },
+            "logout_url": {
+              "label": "Oturum kapatma URL'si",
+              "description": "Bunu sizin için oluşturacağız. Bunu IdP'nizin oturum kapatma yönlendirme URL'si alanına ekleyin."
+            }
+          },
+          "mobile_details": {
+            "header": "Mobil ayrıntılar",
+            "origin_url": {
+              "label": "Kaynak URL",
+              "description": "Bunu bu Plane uygulaması için oluşturacağız. Bunu IdP'nizin ilgili alanına güvenilir bir kaynak olarak ekleyin."
+            },
+            "callback_url": {
+              "label": "Yönlendirme URL'si",
+              "description": "Bunu sizin için oluşturacağız. Bunu IdP'nizin oturum açma yönlendirme URL'si alanına ekleyin."
+            },
+            "logout_url": {
+              "label": "Oturum kapatma URL'si",
+              "description": "Bunu sizin için oluşturacağız. Bunu IdP'nizin oturum kapatma yönlendirme URL'si alanına ekleyin."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "E-posta",
+        "placeholder": "isim@şirket.com",
+        "errors": {
+          "required": "E-posta gerekli",
+          "invalid": "Geçersiz e-posta"
+        }
+      },
+      "password": {
+        "label": "Şifre",
+        "set_password": "Şifre belirle",
+        "placeholder": "Şifreyi girin",
+        "confirm_password": {
+          "label": "Şifreyi onayla",
+          "placeholder": "Şifreyi onayla"
+        },
+        "current_password": {
+          "label": "Mevcut şifre"
+        },
+        "new_password": {
+          "label": "Yeni şifre",
+          "placeholder": "Yeni şifreyi girin"
+        },
+        "change_password": {
+          "label": {
+            "default": "Şifreyi değiştir",
+            "submitting": "Şifre değiştiriliyor"
+          }
+        },
+        "errors": {
+          "match": "Şifreler eşleşmiyor",
+          "empty": "Lütfen şifrenizi girin",
+          "length": "Şifre uzunluğu 8 karakterden fazla olmalı",
+          "strength": {
+            "weak": "Şifre zayıf",
+            "strong": "Şifre güçlü"
+          }
+        },
+        "submit": "Şifreyi belirle",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Başarılı!",
+              "message": "Şifre başarıyla değiştirildi."
+            },
+            "error": {
+              "title": "Hata!",
+              "message": "Bir şeyler ters gitti. Lütfen tekrar deneyin."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Benzersiz kod",
+        "placeholder": "alır-atar-uçar",
+        "paste_code": "E-postanıza gönderilen kodu yapıştırın",
+        "requesting_new_code": "Yeni kod isteniyor",
+        "sending_code": "Kod gönderiliyor"
+      },
+      "already_have_an_account": "Zaten bir hesabınız var mı?",
+      "login": "Giriş yap",
+      "create_account": "Hesap oluştur",
+      "new_to_plane": "Plane'e yeni mi geldiniz?",
+      "back_to_sign_in": "Giriş yapmaya geri dön",
+      "resend_in": "{seconds} saniye içinde tekrar gönder",
+      "sign_in_with_unique_code": "Benzersiz kod ile giriş yap",
+      "forgot_password": "Şifrenizi mi unuttunuz?",
+      "username": {
+        "label": "Kullanıcı adı",
+        "placeholder": "Kullanıcı adınızı girin"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Ekibinizle işleri yönetmeye başlamak için bir hesap oluşturun.",
+        "step": {
+          "email": {
+            "header": "Kaydol",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Kaydol",
+            "sub_header": "E-posta-şifre kombinasyonu kullanarak kaydolun."
+          },
+          "unique_code": {
+            "header": "Kaydol",
+            "sub_header": "Yukarıdaki e-posta adresine gönderilen benzersiz bir kod kullanarak kaydolun."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Devam etmek için güçlü bir şifre belirlemeyi deneyin"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Ekibinizle işleri yönetmeye başlamak için giriş yapın.",
+        "step": {
+          "email": {
+            "header": "Giriş yap veya kaydol",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Giriş yap veya kaydol",
+            "sub_header": "Giriş yapmak için e-posta-şifre kombinasyonunuzu kullanın."
+          },
+          "unique_code": {
+            "header": "Giriş yap veya kaydol",
+            "sub_header": "Yukarıdaki e-posta adresine gönderilen benzersiz bir kod kullanarak giriş yapın."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Şifrenizi sıfırlayın",
+      "description": "Kullanıcı hesabınızın doğrulanmış e-posta adresini girin, size bir şifre sıfırlama bağlantısı göndereceğiz.",
+      "email_sent": "Sıfırlama bağlantısını e-posta adresinize gönderdik",
+      "send_reset_link": "Sıfırlama bağlantısı gönder",
+      "errors": {
+        "smtp_not_enabled": "Yöneticinizin SMTP'yi etkinleştirmediğini görüyoruz, bu yüzden şifre sıfırlama bağlantısı gönderemeyeceğiz"
+      },
+      "toast": {
+        "success": {
+          "title": "E-posta gönderildi",
+          "message": "Şifrenizi sıfırlamak için gelen kutunuzu kontrol edin. Birkaç dakika içinde gelmezse, spam klasörünüzü kontrol edin."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "Bir şeyler ters gitti. Lütfen tekrar deneyin."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Yeni şifre belirle",
+      "description": "Hesabınızı güçlü bir şifreyle güvence altına alın"
+    },
+    "set_password": {
+      "title": "Hesabınızı güvence altına alın",
+      "description": "Şifre belirlemek güvenli bir şekilde giriş yapmanıza yardımcı olur"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Hata!",
+          "message": "Çıkış yapılamadı. Lütfen tekrar deneyin."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "{ldapProviderName} ile devam et",
+        "sub_header": "{ldapProviderName} kimlik bilgilerinizi girin"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/automation.json b/packages/i18n/src/locales/tr-TR/automation.json
new file mode 100644
index 0000000..5d44f94
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Özel otomasyonlar",
+      "create_automation": "Otomasyon oluştur"
+    },
+    "scope": {
+      "label": "Kapsam",
+      "run_on": "Çalıştır"
+    },
+    "trigger": {
+      "label": "Tetikleyici",
+      "add_trigger": "Tetikleyici ekle",
+      "sidebar_header": "Tetikleyici yapılandırması",
+      "input_label": "Bu otomasyon için tetikleyici nedir?",
+      "input_placeholder": "Bir seçenek seçin",
+      "section_plane_events": "Plane olayları",
+      "section_time_based": "Zamana dayalı",
+      "fixed_schedule": "Sabit zamanlama",
+      "schedule": {
+        "frequency": "Sıklık",
+        "select_day": "Gün seçin",
+        "day_of_month": "Ayın günü",
+        "monthly_every": "Her",
+        "monthly_day_aria": "{day}. gün",
+        "time": "Saat",
+        "hour": "Saat",
+        "minute": "Dakika",
+        "hour_suffix": "sa",
+        "minute_suffix": "dk",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Saat dilimi",
+        "timezone_placeholder": "Saat dilimi seçin",
+        "frequency_daily": "Günlük",
+        "frequency_weekly": "Haftalık",
+        "frequency_monthly": "Aylık",
+        "on": "Tarihinde",
+        "validation_weekly_day_required": "Haftanın en az bir gününü seçin.",
+        "validation_monthly_date_required": "Ayın bir gününü seçin.",
+        "main_content_schedule_summary_daily": "Her gün {time} saatinde ({timezone}).",
+        "main_content_schedule_summary_weekly": "Her hafta {days} günü {time} saatinde ({timezone}).",
+        "main_content_schedule_summary_monthly": "Her ay {day}. günü {time} saatinde ({timezone}).",
+        "schedule_mode": "Zamanlama modu",
+        "schedule_mode_fixed": "Sabit",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Cron ifadesi girin",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Geçersiz cron ifadesi.",
+        "cron_preview": "Bu Cron ifadesi \"{description}\" çalıştırır.",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Geri",
+        "next": "Eylem ekle"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Oluşturulduktan sonra tetikleyici türünü değiştiremezsiniz"
+      }
+    },
+    "condition": {
+      "label": "Sağlanan",
+      "add_condition": "Koşul ekle",
+      "adding_condition": "Koşul ekleniyor"
+    },
+    "action": {
+      "label": "Eylem",
+      "add_action": "Eylem ekle",
+      "sidebar_header": "Eylemler",
+      "input_label": "Otomasyon ne yapar?",
+      "input_placeholder": "Bir seçenek seçin",
+      "handler_name": {
+        "add_comment": "Yorum ekle",
+        "change_property": "Özelliği değiştir",
+        "run_script": "Komut Dosyası Çalıştır"
+      },
+      "configuration": {
+        "label": "Yapılandırma",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Bir özellik seçin",
+            "change_type": "Seç",
+            "property_value_select": "{count, plural, one{Değer seç} other{Değerler seç}}",
+            "property_value_select_date": "Tarih seç"
+          },
+          "validation": {
+            "property_name_required": "Özellik adı gerekli",
+            "change_type_required": "Değişiklik türü gerekli",
+            "property_value_required": "Özellik değeri gerekli"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Yorum ekle"
+      },
+      "run_script_block": {
+        "title": "Komut dosyası çalıştır"
+      },
+      "change_property_block": {
+        "title": "Özelliği değiştir"
+      },
+      "validation": {
+        "delete_only_action": "Tek eylemini silmeden önce otomasyonu devre dışı bırakın."
+      }
+    },
+    "conjunctions": {
+      "and": "Ve",
+      "or": "Veya",
+      "if": "Eğer",
+      "then": "O zaman"
+    },
+    "enable": {
+      "alert": "Otomasyonunuz tamamlandığında 'Etkinleştir'e basın. Etkinleştirildikten sonra, otomasyon çalışmaya hazır olacak.",
+      "validation": {
+        "required": "Otomasyonun etkinleştirilebilmesi için bir tetikleyicisi ve en az bir eylemi olmalıdır."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Otomasyon silinmeden önce devre dışı bırakılmalıdır."
+      }
+    },
+    "table": {
+      "title": "Otomasyon başlığı",
+      "scope": "Kapsam",
+      "projects": "Projeler",
+      "last_run_on": "Son çalıştırma",
+      "created_on": "Oluşturulma tarihi",
+      "last_updated_on": "Son güncelleme",
+      "last_run_status": "Son çalıştırma durumu",
+      "average_duration": "Ortalama süre",
+      "owner": "Sahip",
+      "executions": "Yürütmeler"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Otomasyon oluştur",
+        "update": "Otomasyonu güncelle"
+      },
+      "title": {
+        "placeholder": "Otomasyonunuzu adlandırın.",
+        "required_error": "Başlık gerekli"
+      },
+      "description": {
+        "placeholder": "Otomasyonunuzu açıklayın."
+      },
+      "submit_button": {
+        "create": "Otomasyon oluştur",
+        "update": "Otomasyonu güncelle"
+      }
+    },
+    "delete_modal": {
+      "heading": "Otomasyonu sil"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Hataları göster",
+        "all": "Tümü",
+        "only_activity": "Sadece etkinlik",
+        "only_run_history": "Sadece çalıştırma geçmişi"
+      },
+      "run_history": {
+        "initiator": "Başlatıcı"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Başarılı!",
+          "message": "Otomasyon başarıyla oluşturuldu."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "Otomasyon oluşturma başarısız."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Başarılı!",
+          "message": "Otomasyon başarıyla güncellendi."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "Otomasyon güncelleme başarısız."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Başarılı!",
+          "message": "Otomasyon başarıyla etkinleştirildi."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "Otomasyon etkinleştirme başarısız."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Başarılı!",
+          "message": "Otomasyon başarıyla devre dışı bırakıldı."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "Otomasyon devre dışı bırakma başarısız."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Otomasyon silindi",
+          "message": "{name} adlı otomasyon artık projenizden silindi."
+        },
+        "error": {
+          "title": "Bu sefer o otomasyonu silemedik.",
+          "message": "Tekrar silmeyi deneyin veya daha sonra tekrar deneyin. O zaman da silemezseniz, bizimle iletişime geçin."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Hata!",
+            "message": "Eylem oluşturulamadı. Lütfen tekrar deneyin!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Hata!",
+            "message": "Eylem güncellenemedi. Lütfen tekrar deneyin!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Henüz gösterilecek otomasyon yok.",
+        "description": "Otomasyonlar, tetikleyiciler, koşullar ve eylemler ayarlayarak tekrarlayan görevleri ortadan kaldırmanıza yardımcı olur. Zaman kazanmak ve işlerin zahmetsizce devam etmesini sağlamak için bir tane oluşturun."
+      },
+      "upgrade": {
+        "title": "Otomasyonlar",
+        "description": "Otomasyonlar, projenizdeki görevleri otomatikleştirmenin bir yoludur.",
+        "sub_description": "Otomasyonları kullandığınızda yönetim zamanınızın %80'ini geri kazanın."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Bu otomasyonun çalıştırılacağı projeleri seçin",
+        "all_projects": {
+          "label": "Tüm projeler",
+          "description": "Otomasyon, çalışma alanındaki tüm projeler için çalışacak."
+        },
+        "select_projects": {
+          "label": "Projeleri seç",
+          "description": "Otomasyon, çalışma alanındaki seçilen projeler için çalışacak.",
+          "placeholder": "Projeleri seç"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Otomasyonlar",
+        "title": "Otomasyonlar",
+        "description": "Global otomasyonlarla çalışma alanınızdaki süreçleri standartlaştırın."
+      },
+      "table": {
+        "scope": {
+          "global": "Global",
+          "project": {
+            "label": "Proje",
+            "multiple": "Birden fazla",
+            "all": "Tümü"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/common.json b/packages/i18n/src/locales/tr-TR/common.json
new file mode 100644
index 0000000..74bd5cb
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Bu konuda çalışıyoruz. Acil yardıma ihtiyacınız varsa,",
+    "reach_out_to_us": "bize ulaşın",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Aksi takdirde, sayfayı ara sıra yenilemeyi deneyin veya",
+    "status_page": "durum sayfamızı ziyaret edin"
+  },
+  "submit": "Gönder",
+  "cancel": "İptal",
+  "loading": "Yükleniyor",
+  "error": "Hata",
+  "success": "Başarılı",
+  "warning": "Uyarı",
+  "info": "Bilgi",
+  "close": "Kapat",
+  "yes": "Evet",
+  "no": "Hayır",
+  "ok": "Tamam",
+  "name": "Ad",
+  "unknown_user": "Bilinmeyen kullanıcı",
+  "description": "Açıklama",
+  "search": "Ara",
+  "add_member": "Üye ekle",
+  "adding_members": "Üyeler ekleniyor",
+  "remove_member": "Üyeyi kaldır",
+  "add_members": "Üyeler ekle",
+  "adding_member": "Üye ekleniyor",
+  "remove_members": "Üyeleri kaldır",
+  "add": "Ekle",
+  "adding": "Ekleniyor",
+  "remove": "Kaldır",
+  "add_new": "Yeni ekle",
+  "remove_selected": "Seçileni kaldır",
+  "first_name": "Ad",
+  "last_name": "Soyad",
+  "email": "E-posta",
+  "display_name": "Görünen ad",
+  "role": "Rol",
+  "timezone": "Saat dilimi",
+  "avatar": "Profil resmi",
+  "cover_image": "Kapak resmi",
+  "password": "Şifre",
+  "change_cover": "Kapağı değiştir",
+  "language": "Dil",
+  "saving": "Kaydediliyor",
+  "save_changes": "Değişiklikleri kaydet",
+  "deactivate_account": "Hesabı devre dışı bırak",
+  "deactivate_account_description": "Bir hesap devre dışı bırakıldığında, o hesaptaki tüm veri ve kaynaklar kalıcı olarak kaldırılır ve kurtarılamaz.",
+  "profile_settings": "Profil ayarları",
+  "your_account": "Hesabınız",
+  "security": "Güvenlik",
+  "activity": "Aktivite",
+  "activity_empty_state": {
+    "no_activity": "Henüz etkinlik yok",
+    "no_transitions": "Henüz geçiş yok",
+    "no_comments": "Henüz yorum yok",
+    "no_worklogs": "Henüz çalışma kaydı yok",
+    "no_history": "Henüz geçmiş yok"
+  },
+  "preferences": "Tercihler",
+  "language_and_time": "Dil ve Saat",
+  "notifications": "Bildirimler",
+  "workspaces": "Çalışma Alanları",
+  "create_workspace": "Çalışma Alanı Oluştur",
+  "invitations": "Davetler",
+  "summary": "Özet",
+  "assigned": "Atanan",
+  "created": "Oluşturulan",
+  "subscribed": "Abone olunan",
+  "you_do_not_have_the_permission_to_access_this_page": "Bu sayfaya erişim izniniz yok.",
+  "something_went_wrong_please_try_again": "Bir hata oluştu. Lütfen tekrar deneyin.",
+  "load_more": "Daha fazla yükle",
+  "select_or_customize_your_interface_color_scheme": "Arayüz renk şemanızı seçin veya özelleştirin.",
+  "timezone_setting": "Geçerli saat dilimi ayarı.",
+  "language_setting": "Kullanıcı arayüzünde kullanılan dili seçin.",
+  "settings_moved_to_preferences": "Saat Dilimi ve Dil ayarları tercihlere taşındı.",
+  "go_to_preferences": "Tercihlere git",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Size uygun imleç hareket stilini seçin.",
+  "theme": "Tema",
+  "smooth_cursor": "Yumuşak İmleç",
+  "system_preference": "Sistem Tercihi",
+  "light": "Açık",
+  "dark": "Koyu",
+  "light_contrast": "Yüksek kontrastlı açık",
+  "dark_contrast": "Yüksek kontrastlı koyu",
+  "custom": "Özel tema",
+  "select_your_theme": "Temanızı seçin",
+  "customize_your_theme": "Temanızı özelleştirin",
+  "background_color": "Arkaplan rengi",
+  "text_color": "Metin rengi",
+  "primary_color": "Ana (Tema) rengi",
+  "sidebar_background_color": "Kenar çubuğu arkaplan rengi",
+  "sidebar_text_color": "Kenar çubuğu metin rengi",
+  "set_theme": "Temayı ayarla",
+  "enter_a_valid_hex_code_of_6_characters": "6 karakterlik geçerli bir hex kodu girin",
+  "background_color_is_required": "Arkaplan rengi gereklidir",
+  "text_color_is_required": "Metin rengi gereklidir",
+  "primary_color_is_required": "Ana renk gereklidir",
+  "sidebar_background_color_is_required": "Kenar çubuğu arkaplan rengi gereklidir",
+  "sidebar_text_color_is_required": "Kenar çubuğu metin rengi gereklidir",
+  "updating_theme": "Tema güncelleniyor",
+  "theme_updated_successfully": "Tema başarıyla güncellendi",
+  "failed_to_update_the_theme": "Tema güncellenemedi",
+  "email_notifications": "E-posta bildirimleri",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Abone olduğunuz iş öğelerinden haberdar olun. Bildirim almak için bunu etkinleştirin.",
+  "email_notification_setting_updated_successfully": "E-posta bildirim ayarı başarıyla güncellendi",
+  "failed_to_update_email_notification_setting": "E-posta bildirim ayarı güncellenemedi",
+  "notify_me_when": "Bana ne zaman bildirilsin",
+  "property_changes": "Özellik değişiklikleri",
+  "property_changes_description": "Bir iş öğesinin atananlar, öncelik, tahminler gibi özellikleri değiştiğinde bildir.",
+  "state_change": "Durum değişikliği",
+  "state_change_description": "İş öğesi farklı bir duruma geçtiğinde bildir.",
+  "issue_completed": "İş öğesi tamamlandı",
+  "issue_completed_description": "Yalnızca bir iş öğesi tamamlandığında bildir.",
+  "comments": "Yorumlar",
+  "comments_description": "Birisi iş öğesine yorum yaptığında bildir.",
+  "mentions": "Bahsetmeler",
+  "mentions_description": "Yalnızca birisi yorumlarda veya açıklamada beni etiketlediğinde bildir.",
+  "old_password": "Eski şifre",
+  "general_settings": "Genel ayarlar",
+  "sign_out": "Çıkış yap",
+  "signing_out": "Çıkış yapılıyor",
+  "active_cycles": "Aktif Döngüler",
+  "active_cycles_description": "Projeler arasında döngüleri izleyin, yüksek öncelikli iş öğelerini takip edin ve dikkat gerektiren döngülere odaklanın.",
+  "on_demand_snapshots_of_all_your_cycles": "Tüm döngülerinizin anlık görüntüleri",
+  "upgrade": "Yükselt",
+  "10000_feet_view": "Tüm aktif döngülerin genel görünümü",
+  "10000_feet_view_description": "Her projede tek tek dolaşmak yerine, tüm projelerinizdeki çalışan döngüleri bir arada görün.",
+  "get_snapshot_of_each_active_cycle": "Her aktif döngünün anlık görüntüsünü alın",
+  "get_snapshot_of_each_active_cycle_description": "Tüm aktif döngüler için üst düzey metrikleri takip edin, ilerleme durumlarını görün ve son teslim tarihlerine göre kapsamı anlayın.",
+  "compare_burndowns": "Burndown'ları karşılaştırın",
+  "compare_burndowns_description": "Her ekibin performansını her döngünün burndown raporuyla izleyin.",
+  "quickly_see_make_or_break_issues": "Kritik iş öğelerini hızlıca görün",
+  "quickly_see_make_or_break_issues_description": "Her döngü için yüksek öncelikli iş öğelerini son teslim tarihlerine göre önizleyin. Tümünü tek tıkla görün.",
+  "zoom_into_cycles_that_need_attention": "Dikkat gerektiren döngülere odaklanın",
+  "zoom_into_cycles_that_need_attention_description": "Beklentilere uymayan herhangi bir döngünün durumunu tek tıkla inceleyin.",
+  "stay_ahead_of_blockers": "Engellerin önüne geçin",
+  "stay_ahead_of_blockers_description": "Projeler arası zorlukları ve diğer görünümlerde belirgin olmayan döngü bağımlılıklarını tespit edin.",
+  "analytics": "Analitik",
+  "workspace_invites": "Çalışma Alanı Davetleri",
+  "enter_god_mode": "Yönetici Moduna Geç",
+  "workspace_logo": "Çalışma Alanı Logosu",
+  "new_issue": "Yeni İş Öğesi",
+  "your_work": "Sizin İşleriniz",
+  "drafts": "Taslaklar",
+  "projects": "Projeler",
+  "views": "Görünümler",
+  "archives": "Arşivler",
+  "settings": "Ayarlar",
+  "failed_to_move_favorite": "Favori taşınamadı",
+  "favorites": "Favoriler",
+  "no_favorites_yet": "Henüz favori yok",
+  "create_folder": "Klasör oluştur",
+  "new_folder": "Yeni Klasör",
+  "favorite_updated_successfully": "Favori başarıyla güncellendi",
+  "favorite_created_successfully": "Favori başarıyla oluşturuldu",
+  "folder_already_exists": "Klasör zaten var",
+  "folder_name_cannot_be_empty": "Klasör adı boş olamaz",
+  "something_went_wrong": "Bir şeyler yanlış gitti",
+  "failed_to_reorder_favorite": "Favori sıralaması değiştirilemedi",
+  "favorite_removed_successfully": "Favori başarıyla kaldırıldı",
+  "failed_to_create_favorite": "Favori oluşturulamadı",
+  "failed_to_rename_favorite": "Favori yeniden adlandırılamadı",
+  "project_link_copied_to_clipboard": "Proje bağlantısı panoya kopyalandı",
+  "link_copied": "Bağlantı kopyalandı",
+  "add_project": "Proje ekle",
+  "create_project": "Proje oluştur",
+  "failed_to_remove_project_from_favorites": "Proje favorilerden kaldırılamadı. Lütfen tekrar deneyin.",
+  "project_created_successfully": "Proje başarıyla oluşturuldu",
+  "project_created_successfully_description": "Proje başarıyla oluşturuldu. Artık iş öğeleri eklemeye başlayabilirsiniz.",
+  "project_name_already_taken": "Proje ismi zaten kullanılıyor.",
+  "project_name_cannot_contain_special_characters": "Proje adı özel karakterler içeremez.",
+  "project_identifier_already_taken": "Proje kimliği zaten kullanılıyor.",
+  "project_cover_image_alt": "Proje kapak resmi",
+  "name_is_required": "Ad gereklidir",
+  "title_should_be_less_than_255_characters": "Başlık 255 karakterden az olmalı",
+  "project_name": "Proje Adı",
+  "project_id_must_be_at_least_1_character": "Proje ID en az 1 karakter olmalı",
+  "project_id_must_be_at_most_5_characters": "Proje ID en fazla 5 karakter olmalı",
+  "project_id": "Proje ID",
+  "project_id_tooltip_content": "Projedeki iş öğelerini benzersiz şekilde tanımlamanıza yardımcı olur. Maks. 50 karakter.",
+  "description_placeholder": "Açıklama",
+  "only_alphanumeric_non_latin_characters_allowed": "Yalnızca alfasayısal ve Latin olmayan karakterlere izin verilir.",
+  "project_id_is_required": "Proje ID gereklidir",
+  "project_id_allowed_char": "Yalnızca alfasayısal ve Latin olmayan karakterlere izin verilir.",
+  "project_id_min_char": "Proje ID en az 1 karakter olmalı",
+  "project_id_max_char": "Proje ID en fazla {max} karakter olmalı",
+  "project_description_placeholder": "Proje açıklamasını girin",
+  "select_network": "Ağ seç",
+  "lead": "Lider",
+  "date_range": "Tarih aralığı",
+  "private": "Özel",
+  "public": "Herkese Açık",
+  "accessible_only_by_invite": "Yalnızca davetle erişilebilir",
+  "anyone_in_the_workspace_except_guests_can_join": "Çalışma alanındaki herkes (Misafirler hariç) katılabilir",
+  "creating": "Oluşturuluyor",
+  "creating_project": "Proje oluşturuluyor",
+  "adding_project_to_favorites": "Proje favorilere ekleniyor",
+  "project_added_to_favorites": "Proje favorilere eklendi",
+  "couldnt_add_the_project_to_favorites": "Proje favorilere eklenemedi. Lütfen tekrar deneyin.",
+  "removing_project_from_favorites": "Proje favorilerden kaldırılıyor",
+  "project_removed_from_favorites": "Proje favorilerden kaldırıldı",
+  "couldnt_remove_the_project_from_favorites": "Proje favorilerden kaldırılamadı. Lütfen tekrar deneyin.",
+  "add_to_favorites": "Favorilere ekle",
+  "remove_from_favorites": "Favorilerden kaldır",
+  "publish_project": "Projeyi yayımla",
+  "publish": "Yayınla",
+  "copy_link": "Bağlantıyı kopyala",
+  "leave_project": "Projeden ayrıl",
+  "join_the_project_to_rearrange": "Yeniden düzenlemek için projeye katılın",
+  "drag_to_rearrange": "Sürükleyerek yeniden düzenle",
+  "congrats": "Tebrikler!",
+  "open_project": "Projeyi aç",
+  "issues": "İş Öğeleri",
+  "cycles": "Döngüler",
+  "modules": "Modüller",
+  "pages": "Sayfalar",
+  "intake": "Talep",
+  "renew": "Yenile",
+  "preview": "Önizleme",
+  "time_tracking": "Zaman Takibi",
+  "work_management": "İş Yönetimi",
+  "projects_and_issues": "Projeler ve İş Öğeleri",
+  "projects_and_issues_description": "Bu projede bu özellikleri açıp kapatın.",
+  "cycles_description": "Projeye göre işi zamanla sınırlandırın ve gerektiğinde zaman dilimini ayarlayın. Bir döngü 2 hafta, bir sonraki 1 hafta olabilir.",
+  "modules_description": "İşi, özel liderler ve atanmış kişilerle alt projelere ayırın.",
+  "views_description": "Özel sıralamaları, filtreleri ve görüntüleme seçeneklerini kaydedin veya ekibinizle paylaşın.",
+  "pages_description": "Serbest biçimli içerikler oluşturun ve düzenleyin; notlar, belgeler, her şey.",
+  "intake_description": "Üye olmayanların hata, geri bildirim ve öneri paylaşmasına izin verin; iş akışınızı bozmadan.",
+  "time_tracking_description": "İş öğeleri ve projelerde harcanan zamanı kaydedin.",
+  "work_management_description": "İşlerinizi ve projelerinizi kolayca yönetin.",
+  "documentation": "Dokümantasyon",
+  "message_support": "Destekle iletişim",
+  "contact_sales": "Satış Ekibiyle İletişim",
+  "hyper_mode": "Hiper Mod",
+  "keyboard_shortcuts": "Klavye Kısayolları",
+  "whats_new": "Yenilikler",
+  "version": "Sürüm",
+  "we_are_having_trouble_fetching_the_updates": "Güncellemeler alınırken sorun oluştu.",
+  "our_changelogs": "değişiklik kayıtlarımızı",
+  "for_the_latest_updates": "en son güncellemeler için",
+  "please_visit": "Lütfen ziyaret edin",
+  "docs": "Dokümanlar",
+  "full_changelog": "Tam Değişiklik Kaydı",
+  "support": "Destek",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Plane Pages tarafından desteklenmektedir",
+  "please_select_at_least_one_invitation": "Lütfen en az bir davet seçin.",
+  "please_select_at_least_one_invitation_description": "Çalışma alanına katılmak için lütfen en az bir davet seçin.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Birinin sizi bir çalışma alanına davet ettiğini görüyoruz",
+  "join_a_workspace": "Bir çalışma alanına katıl",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Birinin sizi bir çalışma alanına davet ettiğini görüyoruz",
+  "join_a_workspace_description": "Bir çalışma alanına katıl",
+  "accept_and_join": "Kabul Et ve Katıl",
+  "go_home": "Ana Sayfaya Dön",
+  "no_pending_invites": "Bekleyen davet yok",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Biri sizi bir çalışma alanına davet ederse burada görebilirsiniz",
+  "back_to_home": "Ana Sayfaya Dön",
+  "workspace_name": "çalışma-alanı-adı",
+  "deactivate_your_account": "Hesabınızı devre dışı bırakın",
+  "deactivate_your_account_description": "Devre dışı bırakıldığında, iş öğelerine atanamazsınız ve çalışma alanınız için faturalandırılmazsınız. Hesabınızı yeniden etkinleştirmek için bu e-posta adresine bir çalışma alanı daveti gerekecektir.",
+  "deactivating": "Devre dışı bırakılıyor",
+  "confirm": "Onayla",
+  "confirming": "Onaylanıyor",
+  "draft_created": "Taslak oluşturuldu",
+  "issue_created_successfully": "İş öğesi başarıyla oluşturuldu",
+  "draft_creation_failed": "Taslak oluşturulamadı",
+  "issue_creation_failed": "İş öğesi oluşturulamadı",
+  "draft_issue": "Taslak İş Öğesi",
+  "issue_updated_successfully": "İş öğesi başarıyla güncellendi",
+  "issue_could_not_be_updated": "İş öğesi güncellenemedi",
+  "create_a_draft": "Taslak oluştur",
+  "save_to_drafts": "Taslaklara Kaydet",
+  "save": "Kaydet",
+  "update": "Güncelle",
+  "updating": "Güncelleniyor",
+  "create_new_issue": "Yeni iş öğesi oluştur",
+  "editor_is_not_ready_to_discard_changes": "Düzenleyici değişiklikleri atmaya hazır değil",
+  "failed_to_move_issue_to_project": "İş öğesi projeye taşınamadı",
+  "create_more": "Daha fazla oluştur",
+  "add_to_project": "Projeye ekle",
+  "discard": "Vazgeç",
+  "duplicate_issue_found": "Yinelenen iş öğesi bulundu",
+  "duplicate_issues_found": "Yinelenen iş öğeleri bulundu",
+  "no_matching_results": "Eşleşen sonuç yok",
+  "title_is_required": "Başlık gereklidir",
+  "title": "Başlık",
+  "state": "Durum",
+  "transition": "Geçiş",
+  "history": "Geçmiş",
+  "priority": "Öncelik",
+  "none": "Yok",
+  "urgent": "Acil",
+  "high": "Yüksek",
+  "medium": "Orta",
+  "low": "Düşük",
+  "members": "Üyeler",
+  "assignee": "Atanan",
+  "assignees": "Atananlar",
+  "subscriber": "{count, plural, one{# Abone} other{# Abone}}",
+  "you": "Siz",
+  "labels": "Etiketler",
+  "create_new_label": "Yeni etiket oluştur",
+  "label_name": "Etiket adı",
+  "failed_to_create_label": "Etiket oluşturulamadı. Lütfen tekrar deneyin.",
+  "start_date": "Başlangıç tarihi",
+  "end_date": "Bitiş tarihi",
+  "due_date": "Son tarih",
+  "target_date": "Hedef tarih",
+  "estimate": "Tahmin",
+  "change_parent_issue": "Üst iş öğesini değiştir",
+  "remove_parent_issue": "Üst iş öğesini kaldır",
+  "add_parent": "Üst ekle",
+  "loading_members": "Üyeler yükleniyor",
+  "view_link_copied_to_clipboard": "Görünüm bağlantısı panoya kopyalandı.",
+  "required": "Gerekli",
+  "optional": "İsteğe Bağlı",
+  "Cancel": "İptal",
+  "edit": "Düzenle",
+  "archive": "Arşivle",
+  "restore": "Geri Yükle",
+  "open_in_new_tab": "Yeni sekmede aç",
+  "delete": "Sil",
+  "deleting": "Siliniyor",
+  "make_a_copy": "Kopyasını oluştur",
+  "move_to_project": "Projeye taşı",
+  "good": "İyi",
+  "morning": "sabah",
+  "afternoon": "öğleden sonra",
+  "evening": "akşam",
+  "show_all": "Tümünü göster",
+  "show_less": "Daha az göster",
+  "no_data_yet": "Henüz veri yok",
+  "syncing": "Senkronize ediliyor",
+  "add_work_item": "İş öğesi ekle",
+  "advanced_description_placeholder": "Komutlar için '/' tuşuna basın",
+  "create_work_item": "İş öğesi oluştur",
+  "attachments": "Ekler",
+  "declining": "Reddediliyor",
+  "declined": "Reddedildi",
+  "decline": "Reddet",
+  "unassigned": "Atanmamış",
+  "work_items": "İş Öğeleri",
+  "add_link": "Bağlantı ekle",
+  "points": "Puanlar",
+  "no_assignee": "Atanan yok",
+  "no_assignees_yet": "Henüz atanan yok",
+  "no_labels_yet": "Henüz etiket yok",
+  "ideal": "İdeal",
+  "current": "Mevcut",
+  "no_matching_members": "Eşleşen üye yok",
+  "leaving": "Ayrılıyor",
+  "removing": "Kaldırılıyor",
+  "leave": "Ayrıl",
+  "refresh": "Yenile",
+  "refreshing": "Yenileniyor",
+  "refresh_status": "Durumu yenile",
+  "prev": "Önceki",
+  "next": "Sonraki",
+  "re_generating": "Yeniden oluşturuluyor",
+  "re_generate": "Yeniden oluştur",
+  "re_generate_key": "Anahtarı yeniden oluştur",
+  "export": "Dışa aktar",
+  "member": "{count, plural, one{# üye} other{# üye}}",
+  "new_password_must_be_different_from_old_password": "Yeni şifre eski şifreden farklı olmalı",
+  "edited": "düzenlendi",
+  "bot": "Bot",
+  "settings_description": "Hesap, çalışma alanı ve proje tercihlerinizi tek yerden yönetin. Kolayca yapılandırmak için sekmeler arasında geçiş yapın.",
+  "back_to_workspace": "Çalışma alanına dön",
+  "upgrade_request": "Yükseltme için Çalışma Alanı Yöneticinize başvurun.",
+  "copied_to_clipboard": "Panoya kopyalandı",
+  "copied_to_clipboard_description": "URL panonuza başarıyla kopyalandı",
+  "toast": {
+    "success": "Başarılı!",
+    "error": "Hata!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Bağlantı oluşturuldu",
+        "message": "Bağlantı başarıyla oluşturuldu"
+      },
+      "not_created": {
+        "title": "Bağlantı oluşturulamadı",
+        "message": "Bağlantı oluşturulamadı"
+      },
+      "updated": {
+        "title": "Bağlantı güncellendi",
+        "message": "Bağlantı başarıyla güncellendi"
+      },
+      "not_updated": {
+        "title": "Bağlantı güncellenemedi",
+        "message": "Bağlantı güncellenemedi"
+      },
+      "removed": {
+        "title": "Bağlantı kaldırıldı",
+        "message": "Bağlantı başarıyla kaldırıldı"
+      },
+      "not_removed": {
+        "title": "Bağlantı kaldırılamadı",
+        "message": "Bağlantı kaldırılamadı"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL geçersiz",
+        "placeholder": "URL yazın veya yapıştırın"
+      },
+      "title": {
+        "text": "Görünen başlık",
+        "placeholder": "Bu bağlantıyı nasıl görmek istersiniz"
+      }
+    }
+  },
+  "common": {
+    "all": "Tümü",
+    "no_items_in_this_group": "Bu grupta öğe yok",
+    "drop_here_to_move": "Taşımak için buraya bırakın",
+    "states": "Durumlar",
+    "state": "Durum",
+    "state_groups": "Durum grupları",
+    "state_group": "Durum grubu",
+    "priorities": "Öncelikler",
+    "priority": "Öncelik",
+    "team_project": "Takım projesi",
+    "project": "Proje",
+    "cycle": "Döngü",
+    "cycles": "Döngüler",
+    "module": "Modül",
+    "modules": "Modüller",
+    "labels": "Etiketler",
+    "label": "Etiket",
+    "admins": "Yöneticiler",
+    "users": "Kullanıcılar",
+    "guests": "Misafirler",
+    "assignees": "Atananlar",
+    "assignee": "Atanan",
+    "created_by": "Oluşturan",
+    "none": "Yok",
+    "link": "Bağlantı",
+    "estimates": "Tahminler",
+    "estimate": "Tahmin",
+    "created_at": "Oluşturulma tarihi",
+    "updated_at": "Güncelleme tarihi",
+    "completed_at": "Tamamlanma tarihi",
+    "layout": "Düzen",
+    "filters": "Filtreler",
+    "display": "Görüntüle",
+    "load_more": "Daha fazla yükle",
+    "activity": "Aktivite",
+    "analytics": "Analitik",
+    "dates": "Tarihler",
+    "success": "Başarılı!",
+    "something_went_wrong": "Bir şeyler yanlış gitti",
+    "error": {
+      "label": "Hata!",
+      "message": "Bir hata oluştu. Lütfen tekrar deneyin."
+    },
+    "group_by": "Gruplandır",
+    "epic": "Epik",
+    "epics": "Epikler",
+    "work_item": "İş öğesi",
+    "work_items": "İş Öğeleri",
+    "sub_work_item": "Alt iş öğesi",
+    "views": "Görünümler",
+    "pages": "Sayfalar",
+    "add": "Ekle",
+    "warning": "Uyarı",
+    "updating": "Güncelleniyor",
+    "adding": "Ekleniyor",
+    "update": "Güncelle",
+    "creating": "Oluşturuluyor",
+    "create": "Oluştur",
+    "cancel": "İptal",
+    "description": "Açıklama",
+    "title": "Başlık",
+    "attachment": "Ek",
+    "general": "Genel",
+    "features": "Özellikler",
+    "automation": "Otomasyon",
+    "project_name": "Proje Adı",
+    "project_id": "Proje ID",
+    "project_timezone": "Proje Saat Dilimi",
+    "created_on": "Oluşturulma tarihi",
+    "updated_on": "Güncellenme tarihi",
+    "completed_on": "Completed on",
+    "update_project": "Projeyi güncelle",
+    "identifier_already_exists": "Tanımlayıcı zaten var",
+    "add_more": "Daha fazla ekle",
+    "defaults": "Varsayılanlar",
+    "add_label": "Etiket ekle",
+    "customize_time_range": "Zaman aralığını özelleştir",
+    "loading": "Yükleniyor",
+    "attachments": "Ekler",
+    "property": "Özellik",
+    "properties": "Özellikler",
+    "parent": "Üst",
+    "page": "Sayfa",
+    "remove": "Kaldır",
+    "archiving": "Arşivleniyor",
+    "archive": "Arşivle",
+    "access": {
+      "public": "Herkese Açık",
+      "private": "Özel"
+    },
+    "done": "Tamamlandı",
+    "sub_work_items": "Alt iş öğeleri",
+    "comment": "Yorum",
+    "workspace_level": "Çalışma Alanı Seviyesi",
+    "order_by": {
+      "label": "Sırala",
+      "manual": "Manuel - Sıra",
+      "last_created": "Son oluşturulan",
+      "last_updated": "Son güncellenen",
+      "start_date": "Başlangıç tarihi",
+      "due_date": "Son tarih",
+      "asc": "Artan",
+      "desc": "Azalan",
+      "updated_on": "Güncellenme tarihi"
+    },
+    "sort": {
+      "asc": "Artan",
+      "desc": "Azalan",
+      "created_on": "Oluşturulma tarihi",
+      "updated_on": "Güncellenme tarihi"
+    },
+    "comments": "Yorumlar",
+    "updates": "Güncellemeler",
+    "additional_updates": "Ek güncellemeler",
+    "clear_all": "Tümünü temizle",
+    "copied": "Kopyalandı!",
+    "link_copied": "Bağlantı kopyalandı!",
+    "link_copied_to_clipboard": "Bağlantı panoya kopyalandı",
+    "copied_to_clipboard": "İş öğesi bağlantısı panoya kopyalandı",
+    "branch_name_copied_to_clipboard": "Dal adı panoya kopyalandı",
+    "is_copied_to_clipboard": "İş öğesi panoya kopyalandı",
+    "no_links_added_yet": "Henüz bağlantı eklenmedi",
+    "add_link": "Bağlantı ekle",
+    "links": "Bağlantılar",
+    "go_to_workspace": "Çalışma Alanına Git",
+    "progress": "İlerleme",
+    "optional": "İsteğe Bağlı",
+    "join": "Katıl",
+    "go_back": "Geri Dön",
+    "continue": "Devam Et",
+    "resend": "Yeniden Gönder",
+    "relations": "İlişkiler",
+    "dependencies": "Bağımlılıklar",
+    "errors": {
+      "default": {
+        "title": "Hata!",
+        "message": "Bir hata oluştu. Lütfen tekrar deneyin."
+      },
+      "required": "Bu alan gereklidir",
+      "entity_required": "{entity} gereklidir",
+      "restricted_entity": "{entity} kısıtlanmıştır"
+    },
+    "update_link": "Bağlantıyı güncelle",
+    "attach": "Ekle",
+    "create_new": "Yeni oluştur",
+    "add_existing": "Varolanı ekle",
+    "type_or_paste_a_url": "URL yazın veya yapıştırın",
+    "url_is_invalid": "URL geçersiz",
+    "display_title": "Görünen başlık",
+    "link_title_placeholder": "Bu bağlantıyı nasıl görmek istersiniz",
+    "url": "URL",
+    "side_peek": "Yan Görünüm",
+    "modal": "Modal",
+    "full_screen": "Tam Ekran",
+    "close_peek_view": "Yan görünümü kapat",
+    "toggle_peek_view_layout": "Yan görünüm düzenini değiştir",
+    "options": "Seçenekler",
+    "duration": "Süre",
+    "today": "Bugün",
+    "week": "Hafta",
+    "month": "Ay",
+    "quarter": "Çeyrek",
+    "press_for_commands": "Komutlar için '/' tuşuna basın",
+    "click_to_add_description": "Açıklama eklemek için tıkla",
+    "on_track": "Yolunda",
+    "off_track": "Yolunda değil",
+    "at_risk": "Risk altında",
+    "timeline": "Zaman çizelgesi",
+    "completion": "Tamamlama",
+    "upcoming": "Yaklaşan",
+    "completed": "Tamamlandı",
+    "in_progress": "Devam ediyor",
+    "planned": "Planlandı",
+    "paused": "Durduruldu",
+    "search": {
+      "label": "Ara",
+      "placeholder": "Aramak için yazın",
+      "no_matches_found": "Eşleşme bulunamadı",
+      "no_matching_results": "Eşleşen sonuç yok",
+      "min_chars": "Arama için en az {count} karakter yazın",
+      "error": "Arama sonuçları alınırken hata oluştu",
+      "no_results": {
+        "title": "Eşleşen sonuç yok",
+        "description": "Tüm sonuçları görmek için arama kriterlerini kaldırın"
+      }
+    },
+    "actions": {
+      "edit": "Düzenle",
+      "make_a_copy": "Kopyasını oluştur",
+      "open_in_new_tab": "Yeni sekmede aç",
+      "copy_link": "Bağlantıyı kopyala",
+      "copy_branch_name": "Dal adını kopyala",
+      "archive": "Arşivle",
+      "restore": "Geri yükle",
+      "delete": "Sil",
+      "remove_relation": "İlişkiyi kaldır",
+      "subscribe": "Abone ol",
+      "unsubscribe": "Abonelikten çık",
+      "clear_sorting": "Sıralamayı temizle",
+      "show_weekends": "Hafta sonlarını göster",
+      "enable": "Etkinleştir",
+      "disable": "Devre dışı bırak",
+      "copy_markdown": "Markdown'ı kopyala",
+      "reply": "Yanıtla"
+    },
+    "name": "Ad",
+    "discard": "Vazgeç",
+    "confirm": "Onayla",
+    "confirming": "Onaylanıyor",
+    "read_the_docs": "Dokümanları oku",
+    "default": "Varsayılan",
+    "active": "Aktif",
+    "enabled": "Etkin",
+    "disabled": "Devre Dışı",
+    "mandate": "Yetki",
+    "mandatory": "Zorunlu",
+    "global": "Global",
+    "yes": "Evet",
+    "no": "Hayır",
+    "please_wait": "Lütfen bekleyin",
+    "enabling": "Etkinleştiriliyor",
+    "disabling": "Devre Dışı Bırakılıyor",
+    "beta": "Beta",
+    "or": "veya",
+    "next": "Sonraki",
+    "back": "Geri",
+    "retry": "Tekrar dene",
+    "cancelling": "İptal ediliyor",
+    "configuring": "Yapılandırılıyor",
+    "clear": "Temizle",
+    "import": "İçe aktar",
+    "connect": "Bağlan",
+    "authorizing": "Yetkilendiriliyor",
+    "processing": "İşleniyor",
+    "no_data_available": "Veri yok",
+    "from": "{name} kaynaklı",
+    "authenticated": "Kimliği doğrulandı",
+    "select": "Seç",
+    "upgrade": "Yükselt",
+    "add_seats": "Koltuk Ekle",
+    "projects": "Projeler",
+    "workspace": "Çalışma Alanı",
+    "workspaces": "Çalışma Alanları",
+    "team": "Takım",
+    "teams": "Takımlar",
+    "entity": "Varlık",
+    "entities": "Varlıklar",
+    "task": "Görev",
+    "tasks": "Görevler",
+    "section": "Bölüm",
+    "sections": "Bölümler",
+    "edit": "Düzenle",
+    "connecting": "Bağlanılıyor",
+    "connected": "Bağlı",
+    "disconnect": "Bağlantıyı kes",
+    "disconnecting": "Bağlantı kesiliyor",
+    "installing": "Yükleniyor",
+    "install": "Yükle",
+    "reset": "Sıfırla",
+    "live": "Canlı",
+    "change_history": "Değişiklik Geçmişi",
+    "coming_soon": "Çok Yakında",
+    "member": "Üye",
+    "members": "Üyeler",
+    "you": "Siz",
+    "upgrade_cta": {
+      "higher_subscription": "Daha yüksek aboneliğe yükselt",
+      "talk_to_sales": "Satış Ekibiyle Görüş"
+    },
+    "category": "Kategori",
+    "categories": "Kategoriler",
+    "saving": "Kaydediliyor",
+    "save_changes": "Değişiklikleri Kaydet",
+    "delete": "Sil",
+    "deleting": "Siliniyor",
+    "pending": "Beklemede",
+    "invite": "Davet Et",
+    "view": "Görünüm",
+    "deactivated_user": "Devre dışı bırakılmış kullanıcı",
+    "apply": "Uygula",
+    "applying": "Uygulanıyor",
+    "overview": "Genel Bakış",
+    "no_of": "{entity} sayısı",
+    "resolved": "Çözüldü",
+    "get_started": "Başla",
+    "worklogs": "Çalışma Logları",
+    "project_updates": "Proje Güncellemeleri",
+    "workflows": "İş Akışları",
+    "templates": "Şablonlar",
+    "business": "İş",
+    "members_and_teamspaces": "Üyeler ve Takım Alanları",
+    "recurring_work_items": "Yinelenen iş öğeleri",
+    "milestones": "Kilometre taşları",
+    "open_in_full_screen": "{page} öğesini tam ekranda aç",
+    "details": "Ayrıntılar",
+    "project_structure": "Proje yapısı",
+    "custom_properties": "Özel özellikler",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "X ekseni",
+    "y_axis": "Y ekseni",
+    "metric": "Metrik"
+  },
+  "form": {
+    "title": {
+      "required": "Başlık gereklidir",
+      "max_length": "Başlık {length} karakterden az olmalı"
+    }
+  },
+  "entity": {
+    "grouping_title": "{entity} Gruplandırma",
+    "priority": "{entity} Önceliği",
+    "all": "Tüm {entity}",
+    "drop_here_to_move": "{entity} taşımak için buraya bırakın",
+    "delete": {
+      "label": "{entity} Sil",
+      "success": "{entity} başarıyla silindi",
+      "failed": "{entity} silinemedi"
+    },
+    "update": {
+      "failed": "{entity} güncellenemedi",
+      "success": "{entity} başarıyla güncellendi"
+    },
+    "link_copied_to_clipboard": "{entity} bağlantısı panoya kopyalandı",
+    "fetch": {
+      "failed": "{entity} alınırken hata oluştu"
+    },
+    "add": {
+      "success": "{entity} başarıyla eklendi",
+      "failed": "{entity} eklenirken hata oluştu"
+    },
+    "remove": {
+      "success": "{entity} başarıyla kaldırıldı",
+      "failed": "{entity} kaldırılırken hata oluştu"
+    }
+  },
+  "attachment": {
+    "error": "Dosya eklenemedi. Tekrar yüklemeyi deneyin.",
+    "only_one_file_allowed": "Aynı anda yalnızca bir dosya yüklenebilir.",
+    "file_size_limit": "Dosya boyutu {size}MB veya daha az olmalıdır.",
+    "drag_and_drop": "Yüklemek için herhangi bir yere sürükleyip bırakın",
+    "delete": "Eki sil"
+  },
+  "label": {
+    "select": "Etiket seç",
+    "create": {
+      "success": "Etiket başarıyla oluşturuldu",
+      "failed": "Etiket oluşturulamadı",
+      "already_exists": "Etiket zaten mevcut",
+      "type": "Yeni etiket eklemek için yazın"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Görünüm} other {Görünümler}}",
+    "create": {
+      "label": "Görünüm Oluştur"
+    },
+    "update": {
+      "label": "Görünümü Güncelle"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Misafir",
+      "description": "Kuruluşların dış üyeleri misafir olarak davet edilebilir."
+    },
+    "member": {
+      "title": "Üye",
+      "description": "Projeler, döngüler ve modüller içindeki varlıkları okuma, yazma, düzenleme ve silme yetkisi"
+    },
+    "admin": {
+      "title": "Yönetici",
+      "description": "Çalışma alanı içinde tüm izinler aktif."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Ürün / Proje Yöneticisi",
+    "development_or_engineering": "Geliştirme / Mühendislik",
+    "founder_or_executive": "Kurucu / Yönetici",
+    "freelancer_or_consultant": "Serbest Çalışan / Danışman",
+    "marketing_or_growth": "Pazarlama / Büyüme",
+    "sales_or_business_development": "Satış / İş Geliştirme",
+    "support_or_operations": "Destek / Operasyonlar",
+    "student_or_professor": "Öğrenci / Profesör",
+    "human_resources": "İnsan Kaynakları",
+    "other": "Diğer"
+  },
+  "default_global_view": {
+    "all_issues": "Tüm iş öğeleri",
+    "assigned": "Atanan",
+    "created": "Oluşturulan",
+    "subscribed": "Abone olunan"
+  },
+  "description_versions": {
+    "last_edited_by": "Son düzenleyen",
+    "previously_edited_by": "Önceki düzenleyen",
+    "edited_by": "Tarafından düzenlendi"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane başlatılamadı. Bu, bir veya daha fazla Plane servisinin başlatılamaması nedeniyle olabilir.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Emin olmak için setup.sh ve Docker loglarından View Logs'u seçin."
+  },
+  "customize_navigation": "Gezinmeyi özelleştir",
+  "personal": "Kişisel",
+  "accordion_navigation_control": "Akordeon kenar çubuğu gezinmesi",
+  "horizontal_navigation_bar": "Sekmeli Gezinme",
+  "show_limited_projects_on_sidebar": "Kenar çubuğunda sınırlı sayıda proje göster",
+  "enter_number_of_projects": "Proje sayısını girin",
+  "pin": "Sabitle",
+  "unpin": "Sabitlemeyi kaldır",
+  "workspace_dashboards": "Dashbordlar",
+  "pi_chat": "Plane AI",
+  "in_app": "Uygulama İçi",
+  "forms": "Formlar",
+  "milestones": "Kilometre taşları",
+  "milestones_description": "Kilometre taşları, iş öğelerini ortak tamamlanma tarihlerine göre hizalamak için bir katman sağlar.",
+  "file_upload": {
+    "upload_text": "Dosya yüklemek için buraya tıklayın",
+    "drag_drop_text": "Sürükle ve Bırak",
+    "processing": "İşleniyor",
+    "invalid_file_type": "Geçersiz dosya tipi",
+    "missing_fields": "Eksik alanlar",
+    "success": "{fileName} Yüklendi!"
+  },
+  "date": "Tarih",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "İş öğelerini CSV dosyasına aktarın.",
+      "short_description": "CSV olarak aktar"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "İş öğelerini Excel dosyasına aktarın.",
+      "short_description": "Excel olarak aktar"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "İş öğelerini Excel dosyasına aktarın.",
+      "short_description": "Excel olarak aktar"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "İş öğelerini JSON dosyasına aktarın.",
+      "short_description": "JSON olarak aktar"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/cycle.json b/packages/i18n/src/locales/tr-TR/cycle.json
new file mode 100644
index 0000000..ea3f5fe
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "İlerlemeyi görüntülemek için döngüye iş öğeleri ekleyin"
+      },
+      "chart": {
+        "title": "Burndown grafiğini görüntülemek için döngüye iş öğeleri ekleyin."
+      },
+      "priority_issue": {
+        "title": "Döngüde ele alınan yüksek öncelikli iş öğelerini bir bakışta görün."
+      },
+      "assignee": {
+        "title": "Atananları iş öğelerine ekleyerek iş dağılımını görün."
+      },
+      "label": {
+        "title": "Etiketleri iş öğelerine ekleyerek iş dağılımını görün."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Döngü} other {Döngüler}}",
+    "no_cycle": "Döngü yok"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Döngünün ilerlemesini görüntülemek için iş öğeleri ekleyin"
+      },
+      "priority": {
+        "title": "Döngüde ele alınan yüksek öncelikli iş öğelerini bir bakışta gözlemleyin."
+      },
+      "assignee": {
+        "title": "Atayanlara göre iş dağılımını görmek için iş öğelerine atayan ekleyin."
+      },
+      "label": {
+        "title": "Etiketlere göre iş dağılımını görmek için iş öğelerine etiketler ekleyin."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/editor.json b/packages/i18n/src/locales/tr-TR/editor.json
new file mode 100644
index 0000000..d9715e9
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Harici dosyaları yüklemek için sürükle ve bırak"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Dosya çok büyük.",
+        "description": "Dosya başına maksimum boyut {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Desteklenmeyen dosya türü.",
+        "description": "Desteklenen formatları gör"
+      },
+      "default": {
+        "title": "Yükleme başarısız.",
+        "description": "Bir şeyler ters gitti. Lütfen tekrar deneyin."
+      }
+    },
+    "upgrade": {
+      "description": "Bu eki görüntülemek için planınızı yükseltin."
+    },
+    "aria": {
+      "click_to_upload": "Ek yüklemek için tıklayın"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Gömülü içeriğe dönüştür",
+      "convert_to_link": "Bağlantıya dönüştür",
+      "convert_to_richcard": "Zengin karta dönüştür"
+    },
+    "placeholder": {
+      "insert_embed": "YouTube videosu, Figma tasarımı vb. tercih ettiğiniz gömme bağlantısını buraya ekleyin",
+      "link": "Bir bağlantı girin veya yapıştırın"
+    },
+    "input_modal": {
+      "embed": "Göm",
+      "works_with_links": "YouTube, Figma, Google Docs ve daha fazlasıyla çalışır"
+    },
+    "error": {
+      "not_valid_link": "Lütfen geçerli bir URL girin."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Bu bloğun içeriğini açıklayın",
+      "generated_here": "AI içeriğiniz burada oluşturulacak"
+    },
+    "block_types": {
+      "placeholder": "Blok türü seçin",
+      "summarize_page": "Sayfayı Özetle",
+      "custom_prompt": "Özel İstem"
+    },
+    "actions": {
+      "discard": "Vazgeç",
+      "generate": "Oluştur",
+      "generating": "Oluşturuluyor",
+      "rewriting": "Yeniden yazılıyor",
+      "rewrite": "Yeniden yaz",
+      "use_this": "Bunu kullan",
+      "refine": "İyileştir"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/empty-state.json b/packages/i18n/src/locales/tr-TR/empty-state.json
new file mode 100644
index 0000000..c326cea
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Henüz gösterilecek ilerleme metriği yok.",
+      "description": "İlerleme metriklerini burada görmek için iş öğelerinde özellik değerleri belirlemeye başlayın."
+    },
+    "updates": {
+      "title": "Henüz güncelleme yok.",
+      "description": "Proje üyeleri güncelleme eklediğinde burada görünecek"
+    },
+    "search": {
+      "title": "Eşleşen sonuç yok.",
+      "description": "Sonuç bulunamadı. Arama terimlerinizi ayarlamayı deneyin."
+    },
+    "not_found": {
+      "title": "Hata! Bir şeyler ters gitti",
+      "description": "Şu anda Plane hesabınızı alamıyoruz. Bu bir ağ hatası olabilir.",
+      "cta_primary": "Yeniden yüklemeyi dene"
+    },
+    "server_error": {
+      "title": "Sunucu hatası",
+      "description": "Sunucumuza bağlanamıyor ve veri alamıyoruz. Endişelenmeyin, üzerinde çalışıyoruz.",
+      "cta_primary": "Yeniden yüklemeyi dene"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Görünüşe göre bu projeye erişiminiz yok",
+      "restricted_description": "Erişim talep etmek için yöneticiyle iletişime geçin, sonra burada devam edebilirsiniz.",
+      "join_description": "Katılmak için aşağıdaki butona tıklayın.",
+      "cta_primary": "Projeye katıl",
+      "cta_loading": "Projeye katılınıyor"
+    },
+    "invalid_project": {
+      "title": "Proje bulunamadı",
+      "description": "Aradığınız proje mevcut değil."
+    },
+    "work_items": {
+      "title": "İlk iş öğenizle başlayın.",
+      "description": "İş öğeleri projenizin yapı taşlarıdır — sahipler atayın, öncelikleri belirleyin ve ilerlemeyi kolayca takip edin.",
+      "cta_primary": "İlk iş öğenizi oluşturun"
+    },
+    "cycles": {
+      "title": "Çalışmanızı Döngülerde gruplayın ve zaman sınırlayın.",
+      "description": "Çalışmayı zaman sınırlı parçalara bölün, tarihleri belirlemek için proje son tarihinden geriye doğru çalışın ve bir ekip olarak somut ilerleme kaydedin.",
+      "cta_primary": "İlk döngünüzü ayarlayın"
+    },
+    "cycle_work_items": {
+      "title": "Bu döngüde gösterilecek iş öğesi yok",
+      "description": "Ekibinizin bu döngüdeki ilerlemesini izlemeye başlamak ve hedeflerinize zamanında ulaşmak için iş öğeleri oluşturun.",
+      "cta_primary": "İş öğesi oluştur",
+      "cta_secondary": "Mevcut iş öğesini ekle"
+    },
+    "modules": {
+      "title": "Proje hedeflerinizi Modüllere eşleyin ve kolayca takip edin.",
+      "description": "Modüller birbirine bağlı iş öğelerinden oluşur. Proje aşamalarındaki ilerlemeyi izlemeye yardımcı olurlar, her biri bu aşamalara ne kadar yakın olduğunuzu göstermek için belirli son tarihler ve analizlerle.",
+      "cta_primary": "İlk modülünüzü ayarlayın"
+    },
+    "module_work_items": {
+      "title": "Bu Modülde gösterilecek iş öğesi yok",
+      "description": "Bu modülü izlemeye başlamak için iş öğeleri oluşturun.",
+      "cta_primary": "İş öğesi oluştur",
+      "cta_secondary": "Mevcut iş öğesini ekle"
+    },
+    "views": {
+      "title": "Projeniz için özel görünümler kaydedin",
+      "description": "Görünümler, en çok kullandığınız bilgilere hızlı erişmenize yardımcı olan kaydedilmiş filtrelerdir. Ekip arkadaşları görünümleri paylaşıp kendi özel ihtiyaçlarına göre uyarladıkça zahmetsizce işbirliği yapın.",
+      "cta_primary": "Görünüm oluştur"
+    },
+    "no_work_items_in_project": {
+      "title": "Projede henüz iş öğesi yok",
+      "description": "Projenize iş öğeleri ekleyin ve çalışmanızı görünümlerle takip edilebilir parçalara ayırın.",
+      "cta_primary": "İş öğesi ekle"
+    },
+    "work_item_filter": {
+      "title": "İş öğesi bulunamadı",
+      "description": "Mevcut filtreniz hiçbir sonuç döndürmedi. Filtreleri değiştirmeyi deneyin.",
+      "cta_primary": "İş öğesi ekle"
+    },
+    "pages": {
+      "title": "Her şeyi belgeleyin — notlardan PRD'lere",
+      "description": "Sayfalar bilgileri tek bir yerde yakalamanıza ve düzenlemenize olanak tanır. Toplantı notları, proje belgeleri ve PRD'ler yazın, iş öğelerini yerleştirin ve kullanıma hazır bileşenlerle yapılandırın.",
+      "cta_primary": "İlk Sayfanızı oluşturun"
+    },
+    "archive_pages": {
+      "title": "Henüz arşivlenmiş sayfa yok",
+      "description": "Radarınızda olmayan sayfaları arşivleyin. Gerektiğinde buradan erişin."
+    },
+    "intake_sidebar": {
+      "title": "Giriş isteklerini kaydedin",
+      "description": "Projenizin iş akışı içinde incelenmek, önceliklendirilmek ve takip edilmek üzere yeni istekler gönderin.",
+      "cta_primary": "Giriş isteği oluştur"
+    },
+    "intake_main": {
+      "title": "Ayrıntılarını görmek için bir Giriş iş öğesi seçin"
+    },
+    "epics": {
+      "title": "Karmaşık projeleri yapılandırılmış destanlara dönüştürün.",
+      "description": "Bir destan, büyük hedefleri daha küçük, takip edilebilir görevlere organize etmenize yardımcı olur.",
+      "cta_primary": "Destan Oluştur",
+      "cta_secondary": "Belgeler"
+    },
+    "epic_work_items": {
+      "title": "Bu destana henüz iş öğesi eklemediniz.",
+      "description": "Bu destana bazı iş öğeleri ekleyerek başlayın ve burada takip edin.",
+      "cta_secondary": "İş öğeleri ekle"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Henüz arşivlenmiş epik yok",
+      "description": "Tamamlanan veya iptal edilen epikleri arşivleyebilirsiniz. Arşivlendikten sonra burada bulun."
+    },
+    "archive_work_items": {
+      "title": "Henüz arşivlenmiş iş öğesi yok",
+      "description": "Manuel veya otomasyon yoluyla tamamlanmış veya iptal edilmiş iş öğelerini arşivleyebilirsiniz. Arşivlendikten sonra burada bulun.",
+      "cta_primary": "Otomasyonu ayarla"
+    },
+    "archive_cycles": {
+      "title": "Henüz arşivlenmiş döngü yok",
+      "description": "Projenizi düzenlemek için tamamlanmış döngüleri arşivleyin. Arşivlendikten sonra burada bulun."
+    },
+    "archive_modules": {
+      "title": "Henüz arşivlenmiş Modül yok",
+      "description": "Projenizi düzenlemek için tamamlanmış veya iptal edilmiş modülleri arşivleyin. Arşivlendikten sonra burada bulun."
+    },
+    "home_widget_quick_links": {
+      "title": "Çalışmanız için önemli referansları, kaynakları veya belgeleri elinizin altında tutun"
+    },
+    "inbox_sidebar_all": {
+      "title": "Abone olduğunuz iş öğeleri için güncellemeler burada görünecek"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "İş öğeleriniz için bahsetmeler burada görünecek"
+    },
+    "your_work_by_priority": {
+      "title": "Henüz atanmış iş öğesi yok"
+    },
+    "your_work_by_state": {
+      "title": "Henüz atanmış iş öğesi yok"
+    },
+    "views": {
+      "title": "Henüz Görünüm yok",
+      "description": "Projenize iş öğeleri ekleyin ve zahmetsizce filtrelemek, sıralamak ve ilerlemeyi izlemek için görünümleri kullanın.",
+      "cta_primary": "İş öğesi ekle"
+    },
+    "drafts": {
+      "title": "Yarım yazılmış iş öğeleri",
+      "description": "Bunu denemek için bir iş öğesi eklemeye başlayın ve yarıda bırakın veya aşağıda ilk taslağınızı oluşturun. 😉",
+      "cta_primary": "Taslak iş öğesi oluştur"
+    },
+    "projects_archived": {
+      "title": "Arşivlenmiş proje yok",
+      "description": "Görünüşe göre tüm projeleriniz hala aktif—harika iş!"
+    },
+    "analytics_projects": {
+      "title": "Proje metriklerini burada görselleştirmek için projeler oluşturun."
+    },
+    "analytics_work_items": {
+      "title": "Performansı, ilerlemeyi ve ekip etkisini burada izlemeye başlamak için iş öğeleri ve atananlar içeren projeler oluşturun."
+    },
+    "analytics_no_cycle": {
+      "title": "Çalışmayı zaman sınırlı aşamalara organize etmek ve sprintler boyunca ilerlemeyi takip etmek için döngüler oluşturun."
+    },
+    "analytics_no_module": {
+      "title": "Çalışmanızı organize etmek ve farklı aşamalarda ilerlemeyi takip etmek için modüller oluşturun."
+    },
+    "analytics_no_intake": {
+      "title": "Gelen istekleri yönetmek ve bunların nasıl kabul edildiğini ve reddedildiğini izlemek için giriş ayarlayın"
+    },
+    "home_widget_stickies": {
+      "title": "Bir fikir yazın, bir aha anını yakalayın veya bir beyin dalgasını kaydedin. Başlamak için yapışkan not ekleyin."
+    },
+    "stickies": {
+      "title": "Fikirleri anında yakalayın",
+      "description": "Hızlı notlar ve yapılacaklar için yapışkan notlar oluşturun ve onları nereye giderseniz gidin yanınızda taşıyın.",
+      "cta_primary": "İlk yapışkan notu oluştur",
+      "cta_secondary": "Belgeler"
+    },
+    "active_cycles": {
+      "title": "Aktif döngü yok",
+      "description": "Şu anda devam eden döngünüz yok. Aktif döngüler bugünün tarihini içerdiğinde burada görünür."
+    },
+    "dashboard": {
+      "title": "İlerlemenizi kontrol panelleriyle görselleştirin",
+      "description": "Metrikleri takip etmek, sonuçları ölçmek ve içgörüleri etkili bir şekilde sunmak için özelleştirilebilir kontrol panelleri oluşturun.",
+      "cta_primary": "Yeni kontrol paneli oluştur"
+    },
+    "wiki": {
+      "title": "Bir not, bir belge veya tam bir bilgi tabanı yazın.",
+      "description": "Sayfalar Plane'de düşünce yakalama alanıdır. Toplantı notları alın, kolayca biçimlendirin, iş öğelerini yerleştirin, bir bileşenler kütüphanesi kullanarak düzenleyin ve hepsini projenizin bağlamında tutun.",
+      "cta_primary": "Sayfanızı oluşturun"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Proje durumlarını etkinleştir",
+      "description": "Durum, öncelik, bitiş tarihleri ve daha fazlası gibi özellikleri görüntülemek ve yönetmek için Proje Durumlarını etkinleştirin."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Henüz tahmin yok",
+      "description": "Ekibinizin çabayı nasıl ölçtüğünü tanımlayın ve tüm iş öğelerinde tutarlı bir şekilde takip edin.",
+      "cta_primary": "Tahmin sistemi ekle"
+    },
+    "labels": {
+      "title": "Henüz etiket yok",
+      "description": "İş öğelerinizi etkili bir şekilde kategorize etmek ve yönetmek için kişiselleştirilmiş etiketler oluşturun.",
+      "cta_primary": "İlk etiketinizi oluşturun"
+    },
+    "exports": {
+      "title": "Henüz dışa aktarma yok",
+      "description": "Şu anda hiç dışa aktarma kaydınız yok. Verileri dışa aktardığınızda tüm kayıtlar burada görünecek."
+    },
+    "tokens": {
+      "title": "Henüz Kişisel token yok",
+      "description": "Çalışma alanınızı harici sistemler ve uygulamalarla bağlamak için güvenli API token'ları oluşturun.",
+      "cta_primary": "API token'ı ekle"
+    },
+    "workspace_tokens": {
+      "title": "Henüz Erişim token'ı yok",
+      "description": "Çalışma alanınızı harici sistemler ve uygulamalarla bağlamak için güvenli API token'ları oluşturun.",
+      "cta_primary": "Erişim token'ı ekle"
+    },
+    "webhooks": {
+      "title": "Henüz Webhook eklenmedi",
+      "description": "Proje olayları gerçekleştiğinde harici hizmetlere bildirimleri otomatikleştirin.",
+      "cta_primary": "Webhook ekle"
+    },
+    "work_item_types": {
+      "title": "İş öğesi türleri oluşturun ve özelleştirin",
+      "description": "Projeniz için benzersiz iş öğesi türleri tanımlayın. Her tür, projenizin ve ekibinizin ihtiyaçlarına göre uyarlanmış kendi özellikleri, iş akışları ve alanlarına sahip olabilir.",
+      "cta_primary": "Etkinleştir"
+    },
+    "work_item_type_properties": {
+      "title": "Bu iş öğesi türü için yakalamak istediğiniz özelliği ve ayrıntıları tanımlayın. Projenizin iş akışına uyacak şekilde özelleştirin.",
+      "cta_secondary": "Özellik ekle"
+    },
+    "templates": {
+      "title": "Henüz şablon yok",
+      "description": "İş öğeleri ve sayfalar için şablonlar oluşturarak kurulum süresini azaltın — ve saniyeler içinde yeni çalışmaya başlayın.",
+      "cta_primary": "İlk şablonunuzu oluşturun"
+    },
+    "recurring_work_items": {
+      "title": "Henüz yinelenen iş öğesi yok",
+      "description": "Tekrarlanan görevleri otomatikleştirmek ve zahmetsizce programa sadık kalmak için yinelenen iş öğeleri ayarlayın.",
+      "cta_primary": "Yinelenen iş öğesi oluştur"
+    },
+    "worklogs": {
+      "title": "Tüm üyeler için zaman çizelgelerini takip edin",
+      "description": "Projeler arasında herhangi bir ekip üyesi için ayrıntılı zaman çizelgelerini görmek için iş öğelerinde zaman kaydedin."
+    },
+    "group_syncing": {
+      "title": "Henüz grup eşlemesi yok"
+    },
+    "template_setting": {
+      "title": "Henüz şablon yok",
+      "description": "Projeler, iş öğeleri ve sayfalar için şablonlar oluşturarak kurulum süresini azaltın — ve saniyeler içinde yeni çalışmaya başlayın.",
+      "cta_primary": "Şablon oluştur"
+    },
+    "workflows": {
+      "title": "Henüz iş akışı yok",
+      "description": "İş öğelerinizin ilerlemesini yönetmek için iş akışları oluşturun.",
+      "cta_primary": "Yeni iş akışı ekle",
+      "states": {
+        "title": "Durum ekle",
+        "description": "İş öğesinin ilerlediği durumları seçin."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/home.json b/packages/i18n/src/locales/tr-TR/home.json
new file mode 100644
index 0000000..b1177ce
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Hızlı başlangıç rehberiniz",
+      "not_right_now": "Şimdi değil",
+      "create_project": {
+        "title": "Proje oluştur",
+        "description": "Çoğu şey Plane'de bir projeyle başlar.",
+        "cta": "Başla"
+      },
+      "invite_team": {
+        "title": "Ekibinizi davet edin",
+        "description": "Ekip arkadaşlarınızla birlikte inşa edin, gönderin ve yönetin.",
+        "cta": "Davet et"
+      },
+      "configure_workspace": {
+        "title": "Çalışma alanınızı ayarlayın.",
+        "description": "Özellikleri açıp kapatın veya daha fazlasını yapın.",
+        "cta": "Yapılandır"
+      },
+      "personalize_account": {
+        "title": "Plane'yi kendinize özelleştirin.",
+        "description": "Resminizi, renklerinizi ve daha fazlasını seçin.",
+        "cta": "Kişiselleştir"
+      },
+      "widgets": {
+        "title": "Widget'lar Kapalıyken Sessiz, Onları Açın",
+        "description": "Görünüşe göre tüm widget'larınız kapalı. Deneyiminizi geliştirmek için şimdi etkinleştirin!",
+        "primary_button": {
+          "text": "Widget'ları yönet"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Kolay erişim için hızlı bağlantılar ekleyin.",
+      "add": "Hızlı bağlantı ekle",
+      "title": "Hızlı Bağlantı",
+      "title_plural": "Hızlı Bağlantılar"
+    },
+    "recents": {
+      "title": "Sonlar",
+      "empty": {
+        "project": "Bir projeyi ziyaret ettikten sonra son projeleriniz burada görünecek.",
+        "page": "Bir sayfayı ziyaret ettikten sonra son sayfalarınız burada görünecek.",
+        "issue": "Bir iş öğesini ziyaret ettikten sonra son iş öğeleriniz burada görünecek.",
+        "default": "Henüz hiç sonunuz yok."
+      },
+      "filters": {
+        "all": "Tüm öğeler",
+        "projects": "Projeler",
+        "pages": "Sayfalar",
+        "issues": "İş öğeleri"
+      }
+    },
+    "new_at_plane": {
+      "title": "Plane'de Yenilikler"
+    },
+    "quick_tutorial": {
+      "title": "Hızlı eğitim"
+    },
+    "widget": {
+      "reordered_successfully": "Widget başarıyla yeniden sıralandı.",
+      "reordering_failed": "Widget yeniden sıralanırken hata oluştu."
+    },
+    "manage_widgets": "Widget'ları yönet",
+    "title": "Ana Sayfa",
+    "star_us_on_github": "Bizi GitHub'da yıldızlayın",
+    "business_trial_banner": {
+      "title": "14 günlük Business planı denemeniz aktif!",
+      "description": "Tüm Business özelliklerini keşfedin. Hazır olduğunuzda abone olmayı seçin. Otomatik olarak faturalandırılmayacaksınız.",
+      "trial_ends_today": "Deneme bugün sona eriyor",
+      "trial_ends_in_days": "Deneme {days} gün içinde sona eriyor",
+      "start_subscription": "Aboneliği başlat",
+      "explore_business_features": "Business özelliklerini keşfet"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/inbox.json b/packages/i18n/src/locales/tr-TR/inbox.json
new file mode 100644
index 0000000..7ac329e
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Beklemede",
+        "description": "Beklemede"
+      },
+      "declined": {
+        "title": "Reddedildi",
+        "description": "Reddedildi"
+      },
+      "snoozed": {
+        "title": "Erteleme",
+        "description": "{days, plural, one{# gün} other{# gün}} kaldı"
+      },
+      "accepted": {
+        "title": "Kabul Edildi",
+        "description": "Kabul Edildi"
+      },
+      "duplicate": {
+        "title": "Kopya",
+        "description": "Kopya"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "İş öğesini reddet",
+        "content": "{value} iş öğesini reddetmek istediğinizden emin misiniz?"
+      },
+      "delete": {
+        "title": "İş öğesini sil",
+        "content": "{value} iş öğesini silmek istediğinizden emin misiniz?",
+        "success": "İş öğesi başarıyla silindi"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Yalnızca proje yöneticileri iş öğelerini erteleyebilir/ertelemeyi kaldırabilir",
+      "accept_permission": "Yalnızca proje yöneticileri iş öğelerini kabul edebilir",
+      "decline_permission": "Yalnızca proje yöneticileri iş öğelerini reddedebilir"
+    },
+    "actions": {
+      "accept": "Kabul Et",
+      "decline": "Reddet",
+      "snooze": "Ertele",
+      "unsnooze": "Ertelemeyi Kaldır",
+      "copy": "İş öğesi bağlantısını kopyala",
+      "delete": "Sil",
+      "open": "İş öğesini aç",
+      "mark_as_duplicate": "Kopya olarak işaretle",
+      "move": "{value} proje iş öğelerine taşı"
+    },
+    "source": {
+      "in-app": "uygulama içi"
+    },
+    "order_by": {
+      "created_at": "Oluşturulma tarihi",
+      "updated_at": "Güncelleme tarihi",
+      "id": "ID"
+    },
+    "label": "Talep",
+    "page_label": "{workspace} - Talep",
+    "modal": {
+      "title": "Talep iş öğesi oluştur"
+    },
+    "tabs": {
+      "open": "Açık",
+      "closed": "Kapalı"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Açık iş öğesi yok",
+        "description": "Açık iş öğelerini burada bulabilirsiniz. Yeni iş öğesi oluşturun."
+      },
+      "sidebar_closed_tab": {
+        "title": "Kapalı iş öğesi yok",
+        "description": "Kabul edilen veya reddedilen tüm iş öğeleri burada bulunabilir."
+      },
+      "sidebar_filter": {
+        "title": "Eşleşen iş öğesi yok",
+        "description": "Talep bölümünde uygulanan filtreyle eşleşen iş öğesi yok. Yeni bir iş öğesi oluşturun."
+      },
+      "detail": {
+        "title": "Detaylarını görüntülemek için bir iş öğesi seçin."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/integration.json b/packages/i18n/src/locales/tr-TR/integration.json
new file mode 100644
index 0000000..0d9074f
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Entegrasyonlar",
+    "loading": "Yükleniyor",
+    "unauthorized": "Bu sayfayı görüntüleme yetkiniz yok.",
+    "configure": "Yapılandır",
+    "not_enabled": "{name} bu workspace için etkinleştirilmemiş.",
+    "not_configured": "Yapılandırılmamış",
+    "disconnect_personal_account": "Kişisel {providerName} hesabını bağlantıdan kes",
+    "not_configured_message_admin": "{name} entegrasyonu yapılandırılmamış. Lütfen yapılandırmak için instance admininizle iletişime geçin.",
+    "not_configured_message_support": "{name} entegrasyonu yapılandırılmamış. Lütfen yapılandırmak için destekle iletişime geçin.",
+    "external_api_unreachable": "Harici API'ye erişilemiyor. Lütfen daha sonra tekrar deneyin.",
+    "error_fetching_supported_integrations": "Desteklenen entegrasyonlar getirilemedi. Lütfen daha sonra tekrar deneyin.",
+    "back_to_integrations": "Entegrasyonlara geri dön",
+    "select_state": "Durum Seçin",
+    "set_state": "Durumu Ayarla",
+    "choose_project": "Proje Seçin...",
+    "skip_backward_state_movement": "PR güncellemeleri nedeniyle sorunların önceki bir duruma taşınmasını önle"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "GitHub iş öğelerinizi Plane ile bağlayın ve senkronize edin",
+    "connect_org": "Organizasyonu Bağla",
+    "connect_org_description": "GitHub organizasyonunuzu Plane ile bağlayın",
+    "processing": "İşleniyor",
+    "org_added_desc": "GitHub org eklendi ve zaman",
+    "connection_fetch_error": "Sunucudan bağlantı detayları getirilirken hata oluştu",
+    "personal_account_connected": "Kişisel hesabı bağlı",
+    "personal_account_connected_description": "GitHub hesabınız artık Plane'e bağlı",
+    "connect_personal_account": "Kişisel hesabı bağla",
+    "connect_personal_account_description": "GitHub hesabınızı Plane ile bağlayın.",
+    "repo_mapping": "Repository Eşleme",
+    "repo_mapping_description": "GitHub repository'lerinizi Plane projeleriyle eşleyin.",
+    "project_issue_sync": "Project Issue Senkronizasyonu",
+    "project_issue_sync_description": "GitHub'dan Plane projeye issue'leri senkronize edin",
+    "project_issue_sync_empty_state": "Eşlenen proje issue senkronizasyonları burada görünecek",
+    "configure_project_issue_sync_state": "Issue senkronizasyon durumunu yapılandırın",
+    "select_issue_sync_direction": "Issue senkronizasyon yönünü seçin",
+    "allow_bidirectional_sync": "Bidirectional - GitHub ve Plane arasında issue ve yorumları senkronize edin",
+    "allow_unidirectional_sync": "Unidirectional - GitHub'dan Plane'e issue ve yorumları senkronize edin",
+    "allow_unidirectional_sync_warning": "GitHub Issue'dan gelen veriler, Bağlantılı Plane Çalışma Öğesindeki verileri değiştirecek (sadece GitHub → Plane)",
+    "remove_project_issue_sync": "Bu Project Issue Senkronizasyonunu kaldırın",
+    "remove_project_issue_sync_confirmation": "Bu project issue senkronizasyonunu kaldırmak istediğinizden emin misiniz?",
+    "add_pr_state_mapping": "Plane projesine için Pull Request durum eşlemesini ekle",
+    "edit_pr_state_mapping": "Plane projesine için Pull Request durum eşlemesini düzenle",
+    "pr_state_mapping": "Pull Request durum eşlemesi",
+    "pr_state_mapping_description": "GitHub pull request durumlarını Plane projeye eşleyin",
+    "pr_state_mapping_empty_state": "Eşlenen PR durumları burada görünecek",
+    "remove_pr_state_mapping": "Bu Pull Request durum eşlemesini kaldırın",
+    "remove_pr_state_mapping_confirmation": "Bu pull request durum eşlemesini kaldırmak istediğinizden emin misiniz?",
+    "issue_sync_message": "İş öğeleri {project} projesine senkronize edildi",
+    "link": "GitHub repository'yi Plane projeye bağla",
+    "pull_request_automation": "Pull Request Otomasyonu",
+    "pull_request_automation_description": "GitHub'dan Plane projeye pull request durum eşlemesini yapılandırın",
+    "DRAFT_MR_OPENED": "Taslak MR açıldığında, durumu şuna ayarla",
+    "MR_OPENED": "MR açıldığında, durumu şuna ayarla",
+    "MR_READY_FOR_MERGE": "MR birleştirmeye hazır olduğunda, durumu şuna ayarla",
+    "MR_REVIEW_REQUESTED": "MR incelemesi istendiğinde, durumu şuna ayarla",
+    "MR_MERGED": "MR birleştirildiğinde, durumu şuna ayarla",
+    "MR_CLOSED": "MR Kapandığında, durumu şuna ayarla",
+    "ISSUE_OPEN": "Issue Açıldığında, durumu şuna ayarla",
+    "ISSUE_CLOSED": "Issue Kapandığında, durumu şuna ayarla",
+    "save": "Kaydet",
+    "start_sync": "Senkronizasyonu Başlat",
+    "choose_repository": "Repository Seçin..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Gitlab Merge Requestlerinizi Plane ile bağlayın ve senkronize edin.",
+    "connection_fetch_error": "Sunucudan bağlantı detayları getirilirken hata oluştu",
+    "connect_org": "Organizasyonu Bağla",
+    "connect_org_description": "Gitlab organizasyonunuzu Plane ile bağlayın.",
+    "project_connections": "Gitlab Proje Bağlantıları",
+    "project_connections_description": "Gitlab'dan Plane projelerine merge requestleri senkronize edin.",
+    "plane_project_connection": "Plane Proje Bağlantısı",
+    "plane_project_connection_description": "Gitlab'dan Plane projelerine pull request durum eşlemesini yapılandırın",
+    "remove_connection": "Bağlantıyı Kaldır",
+    "remove_connection_confirmation": "Bu bağlantıyı kaldırmak istediğinizden emin misiniz?",
+    "link": "Gitlab reposunu Plane projesine bağla",
+    "pull_request_automation": "Pull Request Otomasyonu",
+    "pull_request_automation_description": "Gitlab'dan Plane'e pull request durum eşlemesini yapılandırın",
+    "DRAFT_MR_OPENED": "Taslak MR açıldığında, durumu şuna ayarla",
+    "MR_OPENED": "MR açıldığında, durumu şuna ayarla",
+    "MR_REVIEW_REQUESTED": "MR incelemesi istendiğinde, durumu şuna ayarla",
+    "MR_READY_FOR_MERGE": "MR birleştirmeye hazır olduğunda, durumu şuna ayarla",
+    "MR_MERGED": "MR birleştirildiğinde, durumu şuna ayarla",
+    "MR_CLOSED": "MR kapatıldığında, durumu şuna ayarla",
+    "integration_enabled_text": "Gitlab entegrasyonu Etkinleştirildiğinde, iş öğesi iş akışlarını otomatikleştirebilirsiniz",
+    "choose_entity": "Varlık Seçin",
+    "choose_project": "Proje Seçin",
+    "link_plane_project": "Plane projesini bağla",
+    "project_issue_sync": "Proje Sorun Senkronizasyonu",
+    "project_issue_sync_description": "Gitlab'dan Plane projenize sorunları senkronize edin",
+    "project_issue_sync_empty_state": "Eşlenmiş proje sorun senkronizasyonu burada görünecek",
+    "configure_project_issue_sync_state": "Sorun Senkronizasyon Durumunu Yapılandır",
+    "select_issue_sync_direction": "Sorun senkronizasyon yönünü seçin",
+    "allow_bidirectional_sync": "Çift Yönlü - Gitlab ve Plane arasında sorunları ve yorumları her iki yönde senkronize et",
+    "allow_unidirectional_sync": "Tek Yönlü - Sorunları ve yorumları yalnızca Gitlab'dan Plane'e senkronize et",
+    "allow_unidirectional_sync_warning": "Gitlab Sorunu'ndaki veriler Bağlantılı Plane İş Öğesi'ndeki verilerin yerini alacak (yalnızca Gitlab → Plane)",
+    "remove_project_issue_sync": "Bu Proje Sorun Senkronizasyonunu Kaldır",
+    "remove_project_issue_sync_confirmation": "Bu proje sorun senkronizasyonunu kaldırmak istediğinizden emin misiniz?",
+    "ISSUE_OPEN": "Sorun Açık",
+    "ISSUE_CLOSED": "Sorun Kapalı",
+    "save": "Kaydet",
+    "start_sync": "Senkronizasyonu Başlat",
+    "choose_repository": "Depo Seçin..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Gitlab Enterprise örneğinizi Plane ile bağlayın ve senkronize edin.",
+    "app_form_title": "Gitlab Enterprise Yapılandırması",
+    "app_form_description": "Gitlab Enterprise'ı Plane'e bağlanmak için yapılandırın.",
+    "base_url_title": "Temel URL",
+    "base_url_description": "Gitlab Enterprise örneğinizin temel URL'si.",
+    "base_url_placeholder": "örn. \"https://glab.plane.town\"",
+    "base_url_error": "Temel URL gereklidir",
+    "invalid_base_url_error": "Geçersiz temel URL",
+    "client_id_title": "Uygulama ID",
+    "client_id_description": "Gitlab Enterprise örneğinizde oluşturduğunuz uygulamanın ID'si.",
+    "client_id_placeholder": "örn. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "Uygulama ID gereklidir",
+    "client_secret_title": "İstemci Gizli Anahtarı",
+    "client_secret_description": "Gitlab Enterprise örneğinizde oluşturduğunuz uygulamanın istemci gizli anahtarı.",
+    "client_secret_placeholder": "örn. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "İstemci gizli anahtarı gereklidir",
+    "webhook_secret_title": "Webhook Gizli Anahtarı",
+    "webhook_secret_description": "Gitlab Enterprise örneğinden webhook'u doğrulamak için kullanılacak rastgele webhook gizli anahtarı.",
+    "webhook_secret_placeholder": "örn. \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook gizli anahtarı gereklidir",
+    "connect_app": "Uygulamayı Bağla"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Slack workspacenizi Plane ile bağlayın.",
+    "connect_personal_account": "Kişisel Slack hesabınızı Plane ile bağlayın.",
+    "personal_account_connected": "Kişisel {providerName} hesabınız artık Plane'e bağlı.",
+    "link_personal_account": "Kişisel {providerName} hesabınızı Plane'e bağlayın.",
+    "connected_slack_workspaces": "Bağlı Slack workspaceleri",
+    "connected_on": "{date} tarihinde bağlandı",
+    "disconnect_workspace": "{name} workspaceini bağlantıdan kes",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Önemli güncellemeler, hatırlatmalar ve sadece size özel uyarılar için Slack direkt mesajlarında bildirim alın."
+      }
+    },
+    "project_updates": {
+      "title": "Proje Güncellemeleri",
+      "description": "Projeleriniz için proje güncelleme bildirimlerini yapılandırın",
+      "add_new_project_update": "Yeni proje güncelleme bildirimi ekle",
+      "project_updates_empty_state": "Slack Kanallarına bağlı projeler burada görünecek.",
+      "project_updates_form": {
+        "title": "Proje Güncellemelerini Yapılandır",
+        "description": "İş öğeleri oluşturulduğunda Slack'te proje güncelleme bildirimleri alın",
+        "failed_to_load_channels": "Slack'ten kanallar yüklenemedi",
+        "project_dropdown": {
+          "placeholder": "Bir proje seçin",
+          "label": "Plane Projesi",
+          "no_projects": "Kullanılabilir proje yok"
+        },
+        "channel_dropdown": {
+          "label": "Slack Kanalı",
+          "placeholder": "Bir kanal seçin",
+          "no_channels": "Kullanılabilir kanal yok"
+        },
+        "all_projects_connected": "Tüm projeler zaten Slack kanallarına bağlı.",
+        "all_channels_connected": "Tüm Slack kanalları zaten projelere bağlı.",
+        "project_connection_success": "Proje bağlantısı başarıyla oluşturuldu",
+        "project_connection_updated": "Proje bağlantısı başarıyla güncellendi",
+        "project_connection_deleted": "Proje bağlantısı başarıyla silindi",
+        "failed_delete_project_connection": "Proje bağlantısı silinemedi",
+        "failed_create_project_connection": "Proje bağlantısı oluşturulamadı",
+        "failed_upserting_project_connection": "Proje bağlantısı güncellenemedi",
+        "failed_loading_project_connections": "Proje bağlantılarınızı yükleyemedik. Bu, bir ağ sorunu veya entegrasyonla ilgili bir sorundan kaynaklanıyor olabilir."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Sentry çalışma alanınızı Plane ile bağlayın.",
+    "connected_sentry_workspaces": "Bağlı Sentry çalışma alanları",
+    "connected_on": "{date} tarihinde bağlandı",
+    "disconnect_workspace": "{name} çalışma alanını bağlantısını kes",
+    "state_mapping": {
+      "title": "Durum eşleştirme",
+      "description": "Sentry olay durumlarını proje durumlarınızla eşleştirin. Bir Sentry olayı çözüldüğünde veya çözülmediğinde hangi durumların kullanılacağını yapılandırın.",
+      "add_new_state_mapping": "Yeni durum eşleştirme ekle",
+      "empty_state": "Durum eşleştirme yapılandırılmamış. Sentry olay durumlarını proje durumlarınızla senkronize etmek için ilk eşleştirmenizi oluşturun.",
+      "failed_loading_state_mappings": "Durum eşleştirmelerinizi yükleyemedik. Bu, ağ sorunu veya entegrasyon sorunu nedeniyle olabilir.",
+      "loading_project_states": "Proje durumları yükleniyor...",
+      "error_loading_states": "Durumlar yüklenirken hata",
+      "no_states_available": "Kullanılabilir durum yok",
+      "no_permission_states": "Bu proje için durumlara erişim izniniz yok",
+      "states_not_found": "Proje durumları bulunamadı",
+      "server_error_states": "Durumlar yüklenirken sunucu hatası"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Bitbucket Data Center depolarınızı Plane ile bağlayın ve senkronize edin."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "API erişimi için harici IdP tokenlarını doğrulayın.",
+    "header_description": "IdP'nizden (Azure AD, Okta vb.) harici olarak verilen OIDC/JWT tokenlarını Plane API erişimi için doğrulayın.",
+    "connected": "Bağlı",
+    "connect": "Bağlan",
+    "uninstall": "Kaldır",
+    "uninstalling": "Kaldırılıyor...",
+    "install_success": "OAuth Bridge başarıyla kuruldu.",
+    "install_error": "OAuth Bridge kurulamadı.",
+    "uninstall_success": "OAuth Bridge kaldırıldı.",
+    "uninstall_error": "OAuth Bridge kaldırılamadı.",
+    "token_providers": "Token Sağlayıcıları",
+    "token_providers_description": "JWT'leri API kimlik bilgileri olarak kabul edilen harici IdP'leri yapılandırın.",
+    "add_provider": "Sağlayıcı ekle",
+    "edit_provider": "Sağlayıcıyı düzenle",
+    "enabled": "Etkin",
+    "disabled": "Devre dışı",
+    "test": "Test",
+    "no_providers_title": "Yapılandırılmış sağlayıcı yok.",
+    "no_providers_description": "Harici token kimlik doğrulamasını etkinleştirmek için bir IdP ekleyin.",
+    "provider_updated": "Sağlayıcı güncellendi.",
+    "provider_added": "Sağlayıcı eklendi.",
+    "provider_save_error": "Sağlayıcı kaydedilemedi.",
+    "provider_deleted": "Sağlayıcı silindi.",
+    "provider_delete_error": "Sağlayıcı silinemedi.",
+    "provider_update_error": "Sağlayıcı güncellenemedi.",
+    "jwks_reachable": "JWKS erişilebilir",
+    "jwks_unreachable": "JWKS erişilemez",
+    "jwks_test_error": "Yapılandırılmış URL'den JWKS alınamadı.",
+    "provider_form": {
+      "name_label": "Ad",
+      "name_placeholder": "ör. Azure AD Production",
+      "name_description": "Bu kimlik sağlayıcısı için okunabilir etiket",
+      "name_required": "Ad gereklidir.",
+      "issuer_label": "Yayıncı",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "JWT'deki beklenen iss claim değeri",
+      "issuer_required": "Yayıncı gereklidir.",
+      "jwks_url_label": "JWKS URL",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "Sağlayıcının JSON Web Key Set'ini sunan HTTPS uç noktası",
+      "jwks_url_required": "JWKS URL gereklidir.",
+      "jwks_url_https": "JWKS URL HTTPS kullanmalıdır.",
+      "audience_label": "Hedef Kitle",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "JWT'deki beklenen aud claim'leri, virgülle ayrılmış.",
+      "user_claims_label": "Kullanıcı claim'i",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "Kullanıcının e-posta adresini içeren JWT claim'i",
+      "user_claims_required": "Kullanıcı claim'i gereklidir.",
+      "allowed_algorithms_label": "İzin verilen imza algoritmaları",
+      "allowed_algorithms_description": "JWT imza doğrulaması için kabul edilen asimetrik algoritmalar",
+      "allowed_algorithms_required": "En az bir algoritma gereklidir.",
+      "select_algorithms": "Algoritma seçin",
+      "jwks_cache_ttl_label": "JWKS önbellek TTL (saniye)",
+      "jwks_cache_ttl_description": "Sağlayıcının JWKS anahtarlarının önbellekte tutulma süresi (minimum 60s, varsayılan 24 saat)",
+      "jwks_cache_ttl_min": "Önbellek TTL en az 60 saniye olmalıdır.",
+      "rate_limit_label": "Hız limiti",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "İstek sınırlaması sayı/dönem olarak (ör. 120/minute). Varsayılan hız limiti için boş bırakın.",
+      "enable_provider": "Bu sağlayıcıyı etkinleştir",
+      "saving": "Kaydediliyor...",
+      "update": "Güncelle"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "GitHub Enterprise organizasyonunuzu Plane ile bağlayın ve senkronize edin.",
+    "app_form_title": "GitHub Enterprise Yapılandırması",
+    "app_form_description": "GitHub Enterprise'ı Plane ile bağlamak için yapılandırın.",
+    "app_id_title": "App ID",
+    "app_id_description": "GitHub Enterprise organizasyonunuzda oluşturduğunuz uygulamanın ID'si.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID gereklidir",
+    "app_name_title": "App Slug",
+    "app_name_description": "GitHub Enterprise organizasyonunuzda oluşturduğunuz uygulamanın slug'ı.",
+    "app_name_error": "App slug gereklidir",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "Base URL",
+    "base_url_description": "GitHub Enterprise organizasyonunuzun base URL'si.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "Base URL gereklidir",
+    "invalid_base_url_error": "Geçersiz base URL",
+    "client_id_title": "Client ID",
+    "client_id_description": "GitHub Enterprise organizasyonunuzda oluşturduğunuz uygulamanın client ID'si.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "Client ID gereklidir",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "GitHub Enterprise organizasyonunuzda oluşturduğunuz uygulamanın client secret'i.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Client secret gereklidir",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "GitHub Enterprise organizasyonunuzda oluşturduğunuz uygulamanın webhook secret'i.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Webhook secret gereklidir",
+    "private_key_title": "Private Key (Base64 encoded)",
+    "private_key_description": "GitHub Enterprise organizasyonunuzda oluşturduğunuz uygulamanın private key'i.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Private key gereklidir",
+    "connect_app": "Uygulamayı Bağla"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Sağlanan sorgu parametreleri geçersiz veya gerekli alanlar eksik",
+    "invalid_installation_account": "Sağlanan kurulum hesabı geçerli değil",
+    "generic_error": "İsteğiniz işlenirken beklenmeyen bir hata oluştu",
+    "connection_not_found": "İstenilen bağlantı bulunamadı",
+    "multiple_connections_found": "Yalnızca bir tane beklenirken birden fazla bağlantı bulundu",
+    "cannot_create_multiple_connections": "Organizasyonunuzu zaten bir workspeysle konnekt ettiniz. Lütfen yeni bir konnekşın yapmadan önce mevcut konnekşını diskonnekt edin.",
+    "installation_not_found": "İstenilen kurulum bulunamadı",
+    "user_not_found": "İstenilen kullanıcı bulunamadı",
+    "error_fetching_token": "Kimlik doğrulama tokeni alınamadı",
+    "invalid_app_credentials": "Sağlanan uygulama kimlik bilgileri geçersiz",
+    "invalid_app_installation_id": "Uygulama yüklenemedi"
+  },
+  "import_status": {
+    "queued": "Sıraya Alındı",
+    "created": "Oluşturuldu",
+    "initiated": "Başlatıldı",
+    "pulling": "Çekiliyor",
+    "timed_out": "Zaman aşımı",
+    "pulled": "Çekildi",
+    "progressing": "Devam ediyor",
+    "transforming": "Dönüştürülüyor",
+    "transformed": "Dönüştürüldü",
+    "pushing": "İtiliyor",
+    "finished": "Tamamlandı",
+    "error": "Hata",
+    "cancelled": "İptal Edildi"
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/module.json b/packages/i18n/src/locales/tr-TR/module.json
new file mode 100644
index 0000000..43a72d9
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Modül} other {Modüller}}",
+    "no_module": "Modül yok",
+    "select": "Modül ekle"
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/navigation.json b/packages/i18n/src/locales/tr-TR/navigation.json
new file mode 100644
index 0000000..f347e01
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Sonuç bulunamadı"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Yapışkan Notlar",
+    "your_work": "Çalışmalarınız",
+    "projects": "Projeler",
+    "pages": "Sayfalar",
+    "new_work_item": "Yeni iş öğesi",
+    "home": "Ana Sayfa",
+    "inbox": "Gelen Kutusu",
+    "workspace": "Çalışma Alanı",
+    "views": "Görünümler",
+    "analytics": "Analizler",
+    "work_items": "İş öğeleri",
+    "cycles": "Döngüler",
+    "modules": "Modüller",
+    "intake": "Talep",
+    "drafts": "Taslaklar",
+    "favorites": "Favoriler",
+    "pro": "Pro",
+    "upgrade": "Yükselt",
+    "pi_chat": "AI Çet",
+    "epics": "Epiks",
+    "upgrade_plan": "Apgreyd plen",
+    "plane_pro": "Pleyn Pro",
+    "business": "Biznis"
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/notification.json b/packages/i18n/src/locales/tr-TR/notification.json
new file mode 100644
index 0000000..bf2ea10
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Bildirimler",
+    "page_label": "{workspace} - Bildirimler",
+    "options": {
+      "mark_all_as_read": "Tümünü okundu olarak işaretle",
+      "mark_read": "Okundu olarak işaretle",
+      "mark_unread": "Okunmamış olarak işaretle",
+      "refresh": "Yenile",
+      "filters": "Bildirim Filtreleri",
+      "show_unread": "Okunmamışları göster",
+      "show_snoozed": "Ertelenenleri göster",
+      "show_archived": "Arşivlenmişleri göster",
+      "mark_archive": "Arşivle",
+      "mark_unarchive": "Arşivden çıkar",
+      "mark_snooze": "Ertelenmiş",
+      "mark_unsnooze": "Ertelenmemiş"
+    },
+    "toasts": {
+      "read": "Bildirim okundu olarak işaretlendi",
+      "unread": "Bildirim okunmamış olarak işaretlendi",
+      "archived": "Bildirim arşivlendi",
+      "unarchived": "Bildirim arşivden çıkarıldı",
+      "snoozed": "Bildirim ertelendi",
+      "unsnoozed": "Bildirim ertelenmedi"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Detayları görüntülemek için seçin."
+      },
+      "all": {
+        "title": "Atanan iş öğesi yok",
+        "description": "Size atanan iş öğelerinin güncellemelerini\n burada görebilirsiniz"
+      },
+      "mentions": {
+        "title": "Atanan iş öğesi yok",
+        "description": "Size atanan iş öğelerinin güncellemelerini\n burada görebilirsiniz"
+      }
+    },
+    "tabs": {
+      "all": "Tümü",
+      "mentions": "Bahsetmeler"
+    },
+    "filter": {
+      "assigned": "Bana atanan",
+      "created": "Benim oluşturduğum",
+      "subscribed": "Abone olduğum"
+    },
+    "snooze": {
+      "1_day": "1 gün",
+      "3_days": "3 gün",
+      "5_days": "5 gün",
+      "1_week": "1 hafta",
+      "2_weeks": "2 hafta",
+      "custom": "Özel"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/page.json b/packages/i18n/src/locales/tr-TR/page.json
new file mode 100644
index 0000000..a2cf0e1
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Ana Hat",
+        "empty_state": {
+          "title": "Eksik başlıklar",
+          "description": "Bu sayfaya bazı başlıklar ekleyelim ki burada görebilelim."
+        }
+      },
+      "info": {
+        "label": "Bilgi",
+        "document_info": {
+          "words": "Kelimeler",
+          "characters": "Karakterler",
+          "paragraphs": "Paragraflar",
+          "read_time": "Okuma süresi"
+        },
+        "actors_info": {
+          "edited_by": "Düzenleyen",
+          "created_by": "Oluşturan"
+        },
+        "version_history": {
+          "label": "Sürüm geçmişi",
+          "current_version": "Mevcut sürüm",
+          "highlight_changes": "Değişiklikleri vurgula"
+        }
+      },
+      "assets": {
+        "label": "Varlıklar",
+        "download_button": "İndir",
+        "empty_state": {
+          "title": "Eksik görseller",
+          "description": "Burada görmek için görseller ekleyin."
+        }
+      },
+      "comments": {
+        "label": "Yorumlar",
+        "empty_state": {
+          "title": "Yorum yok",
+          "description": "Burada görmek için yorum ekleyin."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Yapışkan not adı 100 karakterden uzun olamaz.",
+        "already_exists": "Açıklaması olmayan bir yapışkan not zaten mevcut"
+      },
+      "created": {
+        "title": "Yapışkan not oluşturuldu",
+        "message": "Yapışkan not başarıyla oluşturuldu"
+      },
+      "not_created": {
+        "title": "Yapışkan not oluşturulamadı",
+        "message": "Yapışkan not oluşturulamadı"
+      },
+      "updated": {
+        "title": "Yapışkan not güncellendi",
+        "message": "Yapışkan not başarıyla güncellendi"
+      },
+      "not_updated": {
+        "title": "Yapışkan not güncellenemedi",
+        "message": "Yapışkan not güncellenemedi"
+      },
+      "removed": {
+        "title": "Yapışkan not kaldırıldı",
+        "message": "Yapışkan not başarıyla kaldırıldı"
+      },
+      "not_removed": {
+        "title": "Yapışkan not kaldırılamadı",
+        "message": "Yapışkan not kaldırılamadı"
+      }
+    },
+    "open_button": "Navigasyon panelini aç",
+    "close_button": "Navigasyon panelini kapat",
+    "outline_floating_button": "Ana hatları aç"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Taşı",
+        "loading": "Taşınıyor"
+      },
+      "cannot_move_to_teamspace": "Özel ve paylaşılan sayfalar takım alanına taşınamaz.",
+      "placeholders": {
+        "workspace_to_all": "Projeleri ve takım alanlarını ara",
+        "workspace_to_project": "Projeleri ara",
+        "project_to_all": "Projeleri ve takım alanlarını ara",
+        "project_to_project": "Projeleri ara",
+        "project_to_all_with_wiki": "Wiki koleksiyonlarını, projeleri ve takım alanlarını ara",
+        "project_to_project_with_wiki": "Wiki koleksiyonlarını ve projeleri ara"
+      },
+      "toasts": {
+        "success": {
+          "title": "Başarılı!",
+          "message": "Sayfa başarıyla taşındı."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "Sayfa taşınamadı. Lütfen daha sonra tekrar deneyin."
+        },
+        "collection_error": {
+          "title": "Wiki'ye taşındı",
+          "message": "Sayfa wiki'ye taşındı, ancak seçilen koleksiyona eklenemedi. General içinde kalır."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Koleksiyondan kaldır",
+      "success_message": "Sayfa koleksiyondan kaldırıldı.",
+      "error_message": "Sayfa koleksiyondan kaldırılamadı. Lütfen tekrar deneyin."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "İçerik sınırına ulaşıldı ve canlı senkronizasyon kapalı. Senkronizasyona devam etmek için yeni bir sayfa oluşturun veya iç içe sayfalar kullanın."
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/power-k.json b/packages/i18n/src/locales/tr-TR/power-k.json
new file mode 100644
index 0000000..d5afdec
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "İş öğelerini toplu sil"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "İş öğesi eylemleri",
+        "indicator": "İş öğesi",
+        "change_state": "Durumu değiştir",
+        "change_priority": "Önceliği değiştir",
+        "change_assignees": "Kişiye ata",
+        "assign_to_me": "Bana ata",
+        "unassign_from_me": "Benden kaldır",
+        "change_estimate": "Tahmini değiştir",
+        "add_to_cycle": "Döngüye ekle",
+        "add_to_modules": "Modüllere ekle",
+        "add_labels": "Etiket ekle",
+        "subscribe": "Bildirimlere abone ol",
+        "unsubscribe": "Bildirim aboneliğinden çık",
+        "delete": "Sil",
+        "copy_id": "ID'yi kopyala",
+        "copy_id_toast_success": "İş öğesi ID'si panoya kopyalandı.",
+        "copy_id_toast_error": "İş öğesi ID'si panoya kopyalanırken bir hata oluştu.",
+        "copy_title": "Başlığı kopyala",
+        "copy_title_toast_success": "İş öğesi başlığı panoya kopyalandı.",
+        "copy_title_toast_error": "İş öğesi başlığı panoya kopyalanırken bir hata oluştu.",
+        "copy_url": "URL'yi kopyala",
+        "copy_url_toast_success": "İş öğesi URL'si panoya kopyalandı.",
+        "copy_url_toast_error": "İş öğesi URL'si panoya kopyalanırken bir hata oluştu."
+      },
+      "cycle": {
+        "title": "Döngü eylemleri",
+        "indicator": "Döngü",
+        "add_to_favorites": "Favorilere ekle",
+        "remove_from_favorites": "Favorilerden kaldır",
+        "copy_url": "URL'yi kopyala",
+        "copy_url_toast_success": "Döngü URL'si panoya kopyalandı.",
+        "copy_url_toast_error": "Döngü URL'si panoya kopyalanırken bir hata oluştu."
+      },
+      "module": {
+        "title": "Modül eylemleri",
+        "indicator": "Modül",
+        "add_remove_members": "Üye ekle/kaldır",
+        "change_status": "Durumu değiştir",
+        "add_to_favorites": "Favorilere ekle",
+        "remove_from_favorites": "Favorilerden kaldır",
+        "copy_url": "URL'yi kopyala",
+        "copy_url_toast_success": "Modül URL'si panoya kopyalandı.",
+        "copy_url_toast_error": "Modül URL'si panoya kopyalanırken bir hata oluştu."
+      },
+      "page": {
+        "title": "Sayfa eylemleri",
+        "indicator": "Sayfa",
+        "lock": "Kilitle",
+        "unlock": "Kilidi aç",
+        "make_private": "Özel yap",
+        "make_public": "Herkese açık yap",
+        "archive": "Arşivle",
+        "restore": "Geri yükle",
+        "add_to_favorites": "Favorilere ekle",
+        "remove_from_favorites": "Favorilerden kaldır",
+        "copy_url": "URL'yi kopyala",
+        "copy_url_toast_success": "Sayfa URL'si panoya kopyalandı.",
+        "copy_url_toast_error": "Sayfa URL'si panoya kopyalanırken bir hata oluştu."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Yeni iş öğesi",
+      "create_page": "Yeni sayfa",
+      "create_view": "Yeni görünüm",
+      "create_cycle": "Yeni döngü",
+      "create_module": "Yeni modül",
+      "create_project": "Yeni proje",
+      "create_workspace": "Yeni çalışma alanı",
+      "create_project_automation": "Yeni otomasyon"
+    },
+    "navigation_actions": {
+      "open_workspace": "Bir çalışma alanı aç",
+      "nav_home": "Ana sayfaya git",
+      "nav_inbox": "Gelen kutusuna git",
+      "nav_your_work": "Çalışmalarınıza git",
+      "nav_account_settings": "Hesap ayarlarına git",
+      "open_project": "Bir proje aç",
+      "nav_projects_list": "Projeler listesine git",
+      "nav_all_workspace_work_items": "Tüm iş öğelerine git",
+      "nav_assigned_workspace_work_items": "Atanan iş öğelerine git",
+      "nav_created_workspace_work_items": "Oluşturulan iş öğelerine git",
+      "nav_subscribed_workspace_work_items": "Abone olunan iş öğelerine git",
+      "nav_workspace_analytics": "Çalışma alanı analitiklerine git",
+      "nav_workspace_drafts": "Çalışma alanı taslaklarına git",
+      "nav_workspace_archives": "Çalışma alanı arşivlerine git",
+      "open_workspace_setting": "Bir çalışma alanı ayarı aç",
+      "nav_workspace_settings": "Çalışma alanı ayarlarına git",
+      "nav_project_work_items": "İş öğelerine git",
+      "open_project_cycle": "Bir döngü aç",
+      "nav_project_cycles": "Döngülere git",
+      "open_project_module": "Bir modül aç",
+      "nav_project_modules": "Modüllere git",
+      "open_project_view": "Bir proje görünümü aç",
+      "nav_project_views": "Proje görünümlerine git",
+      "nav_project_pages": "Sayfalara git",
+      "nav_project_intake": "Talebe git",
+      "nav_project_archives": "Proje arşivlerine git",
+      "open_project_setting": "Bir proje ayarı aç",
+      "nav_project_settings": "Proje ayarlarına git",
+      "nav_workspace_active_cycle": "Tüm aktif döngülere git",
+      "nav_project_overview": "Proje genel bakışına git"
+    },
+    "account_actions": {
+      "sign_out": "Çıkış yap",
+      "workspace_invites": "Çalışma alanı davetleri"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Uygulama kenar çubuğunu aç/kapat",
+      "copy_current_page_url": "Geçerli sayfa URL'sini kopyala",
+      "copy_current_page_url_toast_success": "Geçerli sayfa URL'si panoya kopyalandı.",
+      "copy_current_page_url_toast_error": "Geçerli sayfa URL'si panoya kopyalanırken bir hata oluştu.",
+      "focus_top_nav_search": "Arama girişine odaklan"
+    },
+    "preferences_actions": {
+      "update_theme": "Arayüz temasını değiştir",
+      "update_timezone": "Saat dilimini değiştir",
+      "update_start_of_week": "Haftanın ilk gününü değiştir",
+      "update_language": "Arayüz dilini değiştir",
+      "toast": {
+        "theme": {
+          "success": "Tema başarıyla güncellendi.",
+          "error": "Tema güncellenemedi. Lütfen tekrar deneyin."
+        },
+        "timezone": {
+          "success": "Saat dilimi başarıyla güncellendi.",
+          "error": "Saat dilimi güncellenemedi. Lütfen tekrar deneyin."
+        },
+        "generic": {
+          "success": "Tercihler başarıyla güncellendi.",
+          "error": "Tercihler güncellenemedi. Lütfen tekrar deneyin."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Klavye kısayollarını aç",
+      "open_plane_documentation": "Plane belgelerini aç",
+      "join_forum": "Forumumuza katılın",
+      "report_bug": "Hata bildir",
+      "chat_with_us": "Bizimle sohbet edin"
+    },
+    "page_placeholders": {
+      "default": "Bir komut yazın veya arayın",
+      "open_workspace": "Bir çalışma alanı aç",
+      "open_project": "Bir proje aç",
+      "open_workspace_setting": "Bir çalışma alanı ayarı aç",
+      "open_project_cycle": "Bir döngü aç",
+      "open_project_module": "Bir modül aç",
+      "open_project_view": "Bir proje görünümü aç",
+      "open_project_setting": "Bir proje ayarı aç",
+      "update_work_item_state": "Durumu değiştir",
+      "update_work_item_priority": "Önceliği değiştir",
+      "update_work_item_assignee": "Kişiye ata",
+      "update_work_item_estimate": "Tahmini değiştir",
+      "update_work_item_cycle": "Döngüye ekle",
+      "update_work_item_module": "Modüllere ekle",
+      "update_work_item_labels": "Etiket ekle",
+      "update_module_member": "Üyeleri değiştir",
+      "update_module_status": "Durumu değiştir",
+      "update_theme": "Temayı değiştir",
+      "update_timezone": "Saat dilimini değiştir",
+      "update_start_of_week": "Haftanın ilk gününü değiştir",
+      "update_language": "Dili değiştir"
+    },
+    "search_menu": {
+      "no_results": "Sonuç bulunamadı",
+      "clear_search": "Aramayı temizle",
+      "go_to_advanced_search": "Gelişmiş aramaya git"
+    },
+    "footer": {
+      "workspace_level": "Çalışma alanı seviyesi"
+    },
+    "group_titles": {
+      "actions": "Eylemler",
+      "contextual": "Bağlamsal",
+      "navigation": "Gezin",
+      "create": "Oluştur",
+      "general": "Genel",
+      "settings": "Ayarlar",
+      "account": "Hesap",
+      "miscellaneous": "Çeşitli",
+      "preferences": "Tercihler",
+      "help": "Yardım"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/project-settings.json b/packages/i18n/src/locales/tr-TR/project-settings.json
new file mode 100644
index 0000000..3eb3262
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Proje ID girin",
+      "please_select_a_timezone": "Lütfen bir saat dilimi seçin",
+      "archive_project": {
+        "title": "Projeyi arşivle",
+        "description": "Bir projeyi arşivlemek, projenizi yan gezintiden kaldırır ancak yine de projeler sayfasından erişebilirsiniz. Projeyi istediğiniz zaman geri yükleyebilir veya silebilirsiniz.",
+        "button": "Projeyi arşivle"
+      },
+      "delete_project": {
+        "title": "Projeyi sil",
+        "description": "Bir proje silindiğinde, içindeki tüm veri ve kaynaklar kalıcı olarak kaldırılır ve kurtarılamaz.",
+        "button": "Projemi sil"
+      },
+      "toast": {
+        "success": "Proje başarıyla güncellendi",
+        "error": "Proje güncellenemedi. Lütfen tekrar deneyin."
+      }
+    },
+    "members": {
+      "label": "Üyeler",
+      "project_lead": "Proje lideri",
+      "project_lead_description": "Proje için proje liderini seçin.",
+      "default_assignee": "Varsayılan atanan",
+      "default_assignee_description": "Proje için varsayılan atanacak kişiyi seçin.",
+      "project_subscribers": "Proje aboneleri",
+      "project_subscribers_description": "Bu proje için bildirim alacak üyeleri seçin.",
+      "guest_super_permissions": {
+        "title": "Misafir kullanıcılara tüm iş öğelerini görüntüleme izni ver:",
+        "sub_heading": "Bu, misafirlerin tüm proje iş öğelerini görüntülemesine izin verecektir."
+      },
+      "invite_members": {
+        "title": "Üyeleri davet et",
+        "sub_heading": "Projenizde çalışmaları için üyeleri davet edin.",
+        "select_co_worker": "İş arkadaşı seç"
+      }
+    },
+    "states": {
+      "heading": "Durumlar",
+      "description": "İş öğelerinizin ilerlemesini izlemek için iş akışı durumlarını tanımlayın ve özelleştirin.",
+      "describe_this_state_for_your_members": "Bu durumu üyeleriniz için açıklayın.",
+      "empty_state": {
+        "title": "{groupKey} grubu için durum yok",
+        "description": "Lütfen yeni bir durum oluşturun"
+      }
+    },
+    "labels": {
+      "heading": "Etiketler",
+      "description": "İş öğelerinizi kategorize etmek ve düzenlemek için özel etiketler oluşturun",
+      "label_title": "Etiket başlığı",
+      "label_title_is_required": "Etiket başlığı gereklidir",
+      "label_max_char": "Etiket adı 255 karakteri geçmemeli",
+      "toast": {
+        "error": "Etiket güncellenirken hata oluştu"
+      }
+    },
+    "estimates": {
+      "heading": "Tahminler",
+      "description": "Takımınızın karmaşıklık ve iş yükünü iletişim kurmanıza yardımcı olurlar.",
+      "label": "Tahminler",
+      "title": "Projem için tahminleri etkinleştir",
+      "enable_description": "Takımın karmaşıklığını ve iş yükünü iletmenize yardımcı olurlar.",
+      "no_estimate": "Tahmin yok",
+      "new": "Yeni tahmin sistemi",
+      "create": {
+        "custom": "Özel",
+        "start_from_scratch": "Sıfırdan başla",
+        "choose_template": "Şablon seç",
+        "choose_estimate_system": "Tahmin sistemi seç",
+        "enter_estimate_point": "Tahmin puanı girin",
+        "step": "Adım {step} / {total}",
+        "label": "Tahmin oluştur"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Tahmin puanı oluşturuldu",
+            "message": "Tahmin puanı başarıyla oluşturuldu"
+          },
+          "error": {
+            "title": "Tahmin puanı oluşturulamadı",
+            "message": "Yeni tahmin puanı oluşturulamadı, lütfen tekrar deneyin."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Tahmin değiştirildi",
+            "message": "Tahmin puanı projenizde güncellendi."
+          },
+          "error": {
+            "title": "Tahmin değiştirilemedi",
+            "message": "Tahmin değiştirilemedi, lütfen tekrar deneyin"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Başarılı!",
+            "message": "Tahminler etkinleştirildi."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Başarılı!",
+            "message": "Tahminler devre dışı bırakıldı."
+          },
+          "error": {
+            "title": "Hata!",
+            "message": "Tahmin devre dışı bırakılamadı. Lütfen tekrar deneyin"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Estimasyonlar yeniden sıralandı",
+            "message": "Projenizdeki estimasyonlar yeniden sıralandı."
+          },
+          "error": {
+            "title": "Estimasyonları yeniden sıralama başarısız",
+            "message": "Estimasyonlar yeniden sıralanamadı, lütfen tekrar deneyin"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Estimeyt sistemi oluşturuldu",
+            "message": "Başarıyla oluşturuldu ve aktif edildi"
+          },
+          "error": {
+            "title": "Erır",
+            "message": "Bir şeyler yanlış gitti"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Tahmin puanı 0'dan büyük olmalı.",
+        "unable_to_process": "İsteğiniz işlenemedi, lütfen tekrar deneyin.",
+        "numeric": "Tahmin puanı sayısal bir değer olmalı.",
+        "character": "Tahmin puanı karakter değeri olmalı.",
+        "empty": "Tahmin değeri boş olamaz.",
+        "already_exists": "Tahmin değeri zaten var.",
+        "unsaved_changes": "Kaydedilmemiş değişiklikleriniz var, bitirmeden önce lütfen kaydedin",
+        "remove_empty": "Tahmin boş olamaz. Her alana bir değer girin veya değeri olmayanları kaldırın.",
+        "fill": "Lütfen bu estimasyon alanını doldurun",
+        "repeat": "Estimasyon değeri tekrar edemez"
+      },
+      "systems": {
+        "points": {
+          "label": "Puanlar",
+          "fibonacci": "Fibonacci",
+          "linear": "Doğrusal",
+          "squares": "Kareler",
+          "custom": "Özel"
+        },
+        "categories": {
+          "label": "Kategoriler",
+          "t_shirt_sizes": "Tişört Boyutları",
+          "easy_to_hard": "Kolaydan zora",
+          "custom": "Özel"
+        },
+        "time": {
+          "label": "Zaman",
+          "hours": "Saat"
+        }
+      },
+      "edit": {
+        "title": "Estimasyon sistemini düzenle",
+        "add_or_update": {
+          "title": "Estimasyonları ekle, güncelle veya sil",
+          "description": "Mevcut sistemi puanlar veya kategoriler ekleyerek, güncelleyerek veya silerek yönetin."
+        },
+        "switch": {
+          "title": "Estimasyon tipini değiştir",
+          "description": "Puan sisteminizi kategori sistemine veya tam tersine dönüştürün."
+        }
+      },
+      "switch": "Estimasyon sistemini değiştir",
+      "current": "Mevcut estimasyon sistemi",
+      "select": "Estimasyon sistemi seç"
+    },
+    "automations": {
+      "label": "Otomasyonlar",
+      "heading": "Otomasyonlar",
+      "description": "Proje yönetimi iş akışınızı kolaylaştırmak ve manuel görevleri azaltmak için otomatik eylemleri yapılandırın.",
+      "auto-archive": {
+        "title": "Tamamlanan iş öğelerini otomatik arşivle",
+        "description": "Plane, tamamlanan veya iptal edilen iş öğelerini otomatik arşivleyecek.",
+        "duration": "Şu süre kapalı kalan iş öğelerini otomatik arşivle"
+      },
+      "auto-close": {
+        "title": "İş öğelerini otomatik kapat",
+        "description": "Plane, tamamlanmamış veya iptal edilmemiş iş öğelerini otomatik kapatacak.",
+        "duration": "Şu süre etkin olmayan iş öğelerini otomatik kapat",
+        "auto_close_status": "Otomatik kapatma durumu"
+      },
+      "auto-remind": {
+        "title": "Otomatik hatırlatmalar",
+        "description": "Plane, e-posta ve uygulama bildirimleri aracılığıyla otomatik olarak takımınızı zamanlama yolunda tutacaktır.",
+        "duration": "Hatırlatma gönderimi öncesi"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Henüz etiket yok",
+        "description": "Projenizdeki iş öğelerini düzenlemek ve filtrelemek için etiketler oluşturun."
+      },
+      "estimates": {
+        "title": "Henüz tahmin sistemi yok",
+        "description": "İş öğesi başına çalışma miktarını iletişim kurmak için bir tahmin seti oluşturun.",
+        "primary_button": "Tahmin sistemi ekle"
+      },
+      "integrations": {
+        "title": "Konfigüre edilmiş entegrasyon yok",
+        "description": "Proje iş öğelerinizi senkronize etmek için GitHub ve diğer entegrasyonları konfigüre edin."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "İş akışlarını etkinleştir",
+        "description": "İş öğesi hareketini kontrol etmek için iş akışları ayarlayın",
+        "no_states_tooltip": "İş akışına durum eklenmemiş.",
+        "no_work_item_types_tooltip": "İş akışına iş öğesi türü eklenmemiş.",
+        "no_states_or_work_item_types_tooltip": "İş akışına durum veya iş öğesi türü eklenmemiş.",
+        "toast": {
+          "loading": {
+            "enabling": "İş akışları etkinleştiriliyor",
+            "disabling": "İş akışları devre dışı bırakılıyor"
+          },
+          "success": {
+            "title": "Başarılı!",
+            "message": "İş akışları başarıyla etkinleştirildi."
+          },
+          "error": {
+            "title": "Hata!",
+            "message": "İş akışları etkinleştirilemedi. Lütfen tekrar deneyin."
+          }
+        }
+      },
+      "heading": "İş Akışları",
+      "description": "İş öğesi geçişlerini otomatikleştirin ve görevlerin proje süreciniz boyunca nasıl hareket ettiğini kontrol etmek için kurallar belirleyin.",
+      "add_button": "Yeni iş akışı ekle",
+      "search": "İş akışlarında ara",
+      "detail": {
+        "define": "İş akışı tanımla",
+        "add_states": "Durum ekle",
+        "unmapped_states": {
+          "title": "Eşlenmemiş durumlar tespit edildi",
+          "description": "Seçili türlerdeki bazı iş öğeleri şu anda bu iş akışında bulunmayan durumlarda.",
+          "note": "Bu iş akışını etkinleştirirseniz, bu öğeler otomatik olarak bu iş akışının başlangıç durumuna taşınır.",
+          "label": "Eksik durumlar",
+          "tooltip": "Bazı iş öğeleri bu iş akışına eşlenmemiş durumlarda. İncelemek için iş akışını açın."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Tüm durumlar kullanımda",
+          "description": "Bu proje için tanımlanan tüm durumlar zaten mevcut iş akışınızda mevcut."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Bu iş akışı, bir iş akışına atanmamış herhangi bir iş öğesi türüne uygulanır."
+      },
+      "create": {
+        "heading": "Yeni iş akışı oluştur",
+        "name": {
+          "placeholder": "Benzersiz bir ad ekleyin",
+          "validation": {
+            "max_length": "Ad 255 karakterden az olmalıdır",
+            "required": "Ad gereklidir",
+            "invalid": "Ad yalnızca harfler, rakamlar, boşluklar, tireler ve kesme işaretleri içerebilir"
+          }
+        },
+        "description": {
+          "placeholder": "Kısa bir açıklama ekleyin",
+          "validation": {
+            "invalid": "Açıklama yalnızca harfler, rakamlar, boşluklar, tireler ve kesme işaretleri içerebilir"
+          }
+        },
+        "work_item_type": {
+          "label": "İş öğesi türü"
+        },
+        "success": {
+          "title": "Başarılı!",
+          "message": "İş akışı başarıyla oluşturuldu."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "İş akışı oluşturulamadı. Lütfen tekrar deneyin."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Başarılı!",
+          "message": "İş akışı başarıyla güncellendi."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "İş akışı güncellenemedi. Lütfen tekrar deneyin."
+        }
+      },
+      "delete": {
+        "loading": "İş akışı siliniyor",
+        "success": {
+          "title": "Başarılı!",
+          "message": "İş akışı başarıyla silindi."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "İş akışı silinemedi. Lütfen tekrar deneyin."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Başarılı!",
+          "message": "Durumlar başarıyla eklendi."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "Durumlar eklenemedi. Lütfen tekrar deneyin."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "İş öğesi Türleri",
+      "description": "Benzersiz özelliklere sahip farklı iş öğesi türleri oluşturun ve özelleştirin"
+    },
+    "features": {
+      "cycles": {
+        "title": "Döngüler",
+        "short_title": "Döngüler",
+        "description": "Bu projenin benzersiz ritmine ve hızına uyum sağlayan esnek dönemlerde iş planlayın.",
+        "toggle_title": "Döngüleri etkinleştir",
+        "toggle_description": "Odaklanmış zaman dilimlerinde iş planlayın."
+      },
+      "modules": {
+        "title": "Modüller",
+        "short_title": "Modüller",
+        "description": "İşi özel liderler ve atananlarla alt projelere organize edin.",
+        "toggle_title": "Modülleri etkinleştir",
+        "toggle_description": "Proje üyeleri modüller oluşturabilir ve düzenleyebilir."
+      },
+      "views": {
+        "title": "Görünümler",
+        "short_title": "Görünümler",
+        "description": "Özel sıralamalar, filtreler ve görüntüleme seçeneklerini kaydedin veya ekibinizle paylaşın.",
+        "toggle_title": "Görünümleri etkinleştir",
+        "toggle_description": "Proje üyeleri görünümler oluşturabilir ve düzenleyebilir."
+      },
+      "pages": {
+        "title": "Sayfalar",
+        "short_title": "Sayfalar",
+        "description": "Serbest biçimli içerik oluşturun ve düzenleyin: notlar, belgeler, herhangi bir şey.",
+        "toggle_title": "Sayfaları etkinleştir",
+        "toggle_description": "Proje üyeleri sayfalar oluşturabilir ve düzenleyebilir."
+      },
+      "intake": {
+        "intake_responsibility": "Alım sorumluluğu",
+        "intake_sources": "Alım kaynakları",
+        "title": "Alım",
+        "short_title": "Alım",
+        "description": "Üye olmayanların hataları, geri bildirimleri ve önerileri paylaşmasına izin verin; iş akışınızı aksatmadan.",
+        "toggle_title": "Alımı etkinleştir",
+        "toggle_description": "Proje üyelerinin uygulama içinde alım talepleri oluşturmasına izin verin.",
+        "toggle_tooltip_on": "Proje Yöneticinizden bunu açmasını isteyin.",
+        "toggle_tooltip_off": "Proje Yöneticinizden bunu kapatmasını isteyin.",
+        "notify_assignee": {
+          "title": "Atanan kişileri bildir",
+          "description": "Yeni bir alım talebi için varsayılan atanan kişiler bildirimler aracılığıyla uyarılacaktır"
+        },
+        "in_app": {
+          "title": "Uygulama içi",
+          "description": "Mevcut iş öğelerinizi bozmadan çalışma alanınızdaki Üyeler ve Konuklardan yeni iş öğeleri alın."
+        },
+        "email": {
+          "title": "E-posta",
+          "description": "Plane e-posta adresine e-posta gönderen herkesten yeni iş öğeleri toplayın.",
+          "fieldName": "E-posta ID"
+        },
+        "form": {
+          "title": "Formlar",
+          "description": "Çalışma alanınızın dışındaki kişilerin özel ve güvenli bir form aracılığıyla sizin için potansiyel yeni iş öğeleri oluşturmasına izin verin.",
+          "fieldName": "Varsayılan form URL'si",
+          "create_forms": "İş öğesi türlerini kullanarak form oluşturun",
+          "manage_forms": "Formları yönet",
+          "manage_forms_tooltip": "Çalışma Alanı Yöneticinizden bunu yönetmesini isteyin.",
+          "create_form": "Form oluştur",
+          "edit_form": "Form ayrıntılarını düzenle",
+          "form_title": "Form başlığı",
+          "form_title_required": "Form başlığı zorunludur",
+          "work_item_type": "İş öğesi türü",
+          "remove_property": "Özelliği kaldır",
+          "select_properties": "Özellikleri seç",
+          "search_placeholder": "Özelliklerde ara",
+          "toasts": {
+            "success_create": "Alım formu başarıyla oluşturuldu",
+            "success_update": "Alım formu başarıyla güncellendi",
+            "error_create": "Alım formu oluşturulamadı",
+            "error_update": "Alım formu güncellenemedi"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Atanan kişiler ayarlanıyor...",
+            "success": {
+              "title": "Başarılı!",
+              "message": "Atanan kişiler başarıyla ayarlandı."
+            },
+            "error": {
+              "title": "Hata!",
+              "message": "Atanan kişileri ayarlarken bir şeyler yanlış gitti. Lütfen tekrar deneyin."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Zaman takibi",
+        "short_title": "Zaman takibi",
+        "description": "İş öğelerine ve projelere harcanan zamanı kaydedin.",
+        "toggle_title": "Zaman takibini etkinleştir",
+        "toggle_description": "Proje üyeleri çalışılan zamanı kaydedebilecektir."
+      },
+      "milestones": {
+        "title": "Kilometre taşları",
+        "short_title": "Kilometre taşları",
+        "description": "Kilometre taşları, iş öğelerini ortak tamamlanma tarihlerine doğru hizalamak için bir katman sağlar.",
+        "toggle_title": "Kilometre taşlarını etkinleştir",
+        "toggle_description": "İş öğelerini kilometre taşı son tarihleri ile organize edin."
+      },
+      "toasts": {
+        "loading": "Proje özelliği güncelleniyor...",
+        "success": "Proje özelliği başarıyla güncellendi.",
+        "error": "Proje özelliği güncellenirken bir şeyler yanlış gitti. Lütfen tekrar deneyin."
+      }
+    },
+    "project_updates": {
+      "heading": "Proje Güncellemeleri",
+      "description": "Bu proje için birleştirilmiş takip ve ilerleme izleme"
+    },
+    "templates": {
+      "heading": "Şablonlar",
+      "description": "Şablonları kullandığınızda projeler, iş öğeleri ve sayfalar oluşturmaya harcanan zamanın %80'ini tasarruf edin."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Otomatik döngü planlaması",
+        "description": "Döngüleri manuel kurulum olmadan devam ettirin.",
+        "tooltip": "Seçtiğiniz programa göre otomatik olarak yeni döngüler oluşturun.",
+        "edit_button": "Düzenle",
+        "form": {
+          "cycle_title": {
+            "label": "Döngü başlığı",
+            "placeholder": "Başlık",
+            "tooltip": "Başlık, sonraki döngüler için numaralarla tamamlanacaktır. Örneğin: Tasarım - 1/2/3",
+            "validation": {
+              "required": "Döngü başlığı zorunludur",
+              "max_length": "Başlık 255 karakteri aşmamalıdır"
+            }
+          },
+          "cycle_duration": {
+            "label": "Döngü süresi",
+            "unit": "Hafta",
+            "validation": {
+              "required": "Döngü süresi zorunludur",
+              "min": "Döngü süresi en az 1 hafta olmalıdır",
+              "max": "Döngü süresi 30 haftayı aşamaz",
+              "positive": "Döngü süresi pozitif olmalıdır"
+            }
+          },
+          "cooldown_period": {
+            "label": "Soğuma süresi",
+            "unit": "gün",
+            "tooltip": "Bir sonraki döngü başlamadan önce döngüler arası duraklatma.",
+            "validation": {
+              "required": "Soğuma süresi zorunludur",
+              "negative": "Soğuma süresi negatif olamaz"
+            }
+          },
+          "start_date": {
+            "label": "Döngü başlangıç günü",
+            "validation": {
+              "required": "Başlangıç tarihi zorunludur",
+              "past": "Başlangıç tarihi geçmişte olamaz"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Gelecekteki döngü sayısı",
+            "validation": {
+              "required": "Döngü sayısı zorunludur",
+              "min": "En az 1 döngü gereklidir",
+              "max": "3'ten fazla döngü planlanamaz"
+            }
+          },
+          "auto_rollover": {
+            "label": "İş öğelerini otomatik devret",
+            "tooltip": "Bir döngünün tamamlandığı gün, tüm bitmemiş iş öğelerini bir sonraki döngüye taşıyın."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Otomatik döngü planlaması etkinleştiriliyor",
+            "loading_disable": "Otomatik döngü planlaması devre dışı bırakılıyor",
+            "success": {
+              "title": "Başarılı!",
+              "message": "Otomatik döngü planlaması başarıyla değiştirildi."
+            },
+            "error": {
+              "title": "Hata!",
+              "message": "Otomatik döngü planlaması değiştirilemedi."
+            }
+          },
+          "save": {
+            "loading": "Otomatik döngü planlaması yapılandırması kaydediliyor",
+            "success": {
+              "title": "Başarılı!",
+              "message_create": "Otomatik döngü planlaması yapılandırması başarıyla kaydedildi.",
+              "message_update": "Otomatik döngü planlaması yapılandırması başarıyla güncellendi."
+            },
+            "error": {
+              "title": "Hata!",
+              "message_create": "Otomatik döngü planlaması yapılandırması kaydedilemedi.",
+              "message_update": "Otomatik döngü planlaması yapılandırması güncellenemedi."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/project.json b/packages/i18n/src/locales/tr-TR/project.json
new file mode 100644
index 0000000..3731849
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Oluşturulma tarihi",
+      "updated_at": "Güncelleme tarihi",
+      "name": "Ad"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Döngü ekle",
+    "more_details": "Daha fazla detay",
+    "cycle": "Döngü",
+    "update_cycle": "Döngüyü güncelle",
+    "create_cycle": "Döngü oluştur",
+    "no_matching_cycles": "Eşleşen döngü yok",
+    "remove_filters_to_see_all_cycles": "Tüm döngüleri görmek için filtreleri kaldırın",
+    "remove_search_criteria_to_see_all_cycles": "Tüm döngüleri görmek için arama kriterlerini kaldırın",
+    "only_completed_cycles_can_be_archived": "Yalnızca tamamlanmış döngüler arşivlenebilir",
+    "start_date": "Başlangıç tarihi",
+    "end_date": "Bitiş tarihi",
+    "in_your_timezone": "Saat diliminizde",
+    "transfer_work_items": "{count} iş öğesini aktar",
+    "transfer": {
+      "no_cycles_available": "İş öğelerini aktaracak başka döngü bulunamadı."
+    },
+    "date_range": "Tarih aralığı",
+    "add_date": "Tarih ekle",
+    "active_cycle": {
+      "label": "Aktif döngü",
+      "progress": "İlerleme",
+      "chart": "Burndown grafiği",
+      "priority_issue": "Öncelikli iş öğeleri",
+      "assignees": "Atananlar",
+      "issue_burndown": "İş öğesi burndown",
+      "ideal": "İdeal",
+      "current": "Mevcut",
+      "labels": "Etiketler",
+      "trailing": "Geride",
+      "leading": "İlerde"
+    },
+    "upcoming_cycle": {
+      "label": "Yaklaşan döngü"
+    },
+    "completed_cycle": {
+      "label": "Tamamlanan döngü"
+    },
+    "status": {
+      "days_left": "Kalan gün",
+      "completed": "Tamamlandı",
+      "yet_to_start": "Başlamadı",
+      "in_progress": "Devam Ediyor",
+      "draft": "Taslak"
+    },
+    "action": {
+      "restore": {
+        "title": "Döngüyü geri yükle",
+        "success": {
+          "title": "Döngü geri yüklendi",
+          "description": "Döngü başarıyla geri yüklendi."
+        },
+        "failed": {
+          "title": "Döngü geri yüklenemedi",
+          "description": "Döngü geri yüklenemedi. Lütfen tekrar deneyin."
+        }
+      },
+      "favorite": {
+        "loading": "Döngü favorilere ekleniyor",
+        "success": {
+          "description": "Döngü favorilere eklendi.",
+          "title": "Başarılı!"
+        },
+        "failed": {
+          "description": "Döngü favorilere eklenemedi. Lütfen tekrar deneyin.",
+          "title": "Hata!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Döngü favorilerden kaldırılıyor",
+        "success": {
+          "description": "Döngü favorilerden kaldırıldı.",
+          "title": "Başarılı!"
+        },
+        "failed": {
+          "description": "Döngü favorilerden kaldırılamadı. Lütfen tekrar deneyin.",
+          "title": "Hata!"
+        }
+      },
+      "update": {
+        "loading": "Döngü güncelleniyor",
+        "success": {
+          "description": "Döngü başarıyla güncellendi.",
+          "title": "Başarılı!"
+        },
+        "failed": {
+          "description": "Döngü güncellenirken hata oluştu. Lütfen tekrar deneyin.",
+          "title": "Hata!"
+        },
+        "error": {
+          "already_exists": "Belirtilen tarihlerde zaten bir döngünüz var, taslak bir döngü oluşturmak istiyorsanız, her iki tarihi de kaldırarak oluşturabilirsiniz."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "İşlerinizi Döngülerde gruplayın ve zamanlayın.",
+        "description": "İşleri zaman dilimlerine bölün, proje son teslim tarihinden geriye çalışarak tarihler belirleyin ve takım olarak somut ilerleme kaydedin.",
+        "primary_button": {
+          "text": "İlk döngünüzü ayarlayın",
+          "comic": {
+            "title": "Döngüler tekrarlayan zaman dilimleridir.",
+            "description": "Haftalık veya iki haftalık iş takibi için kullandığınız sprint, iterasyon veya başka bir terim bir döngüdür."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Döngüye iş öğesi eklenmedi",
+        "description": "Bu döngüde tamamlamak istediğiniz iş öğelerini ekleyin veya oluşturun",
+        "primary_button": {
+          "text": "Yeni iş öğesi oluştur"
+        },
+        "secondary_button": {
+          "text": "Varolan iş öğesi ekle"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Döngüde iş öğesi yok",
+        "description": "Döngüde iş öğesi yok. İş öğeleri ya aktarıldı ya da gizlendi. Gizli iş öğelerini görmek için görüntüleme özelliklerinizi güncelleyin."
+      },
+      "active": {
+        "title": "Aktif döngü yok",
+        "description": "Aktif bir döngü, bugünün tarihini içeren herhangi bir dönemi kapsar. Aktif döngünün ilerleme ve detaylarını burada bulabilirsiniz."
+      },
+      "archived": {
+        "title": "Henüz arşivlenmiş döngü yok",
+        "description": "Projenizi düzenli tutmak için tamamlanmış döngüleri arşivleyin. Arşivlendikten sonra burada bulabilirsiniz."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Projeniz için filtreli görünümleri kaydedin. İhtiyacınız olduğu kadar oluşturun",
+        "description": "Görünümler, sık kullandığınız veya kolay erişim istediğiniz kayıtlı filtrelerdir. Bir projedeki tüm meslektaşlarınız herkesin görünümlerini görebilir ve ihtiyaçlarına en uygun olanı seçebilir.",
+        "primary_button": {
+          "text": "İlk görünümünüzü oluşturun",
+          "comic": {
+            "title": "Görünümler İş Öğesi özellikleri üzerinde çalışır.",
+            "description": "Buradan istediğiniz kadar özellikle filtre içeren bir görünüm oluşturabilirsiniz."
+          }
+        },
+        "filter": {
+          "title": "Eşleşen görünüm yok",
+          "description": "Arama kriterleriyle eşleşen görünüm yok.\n Bunun yerine yeni bir görünüm oluşturun."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Henüz arşivlenmiş iş öğesi yok",
+        "description": "Manuel olarak veya otomasyon aracılığıyla, tamamlanan veya iptal edilen iş öğelerini arşivleyebilirsiniz. Arşivlendikten sonra burada bulabilirsiniz.",
+        "primary_button": {
+          "text": "Otomasyon ayarla"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Uygulanan filtrelerle eşleşen iş öğesi bulunamadı",
+        "secondary_button": {
+          "text": "Tüm filtreleri temizle"
+        }
+      },
+      "public": {
+        "title": "Henüz genel sayfa yok",
+        "description": "Projenizdeki herkesle paylaşılan sayfaları burada görün.",
+        "primary_button": {
+          "text": "İlk sayfanızı oluşturun"
+        }
+      },
+      "archived": {
+        "title": "Henüz arşivlenmiş sayfa yok",
+        "description": "Radarınızda olmayan sayfaları arşivleyin. İhtiyaç duyduğunuzda buradan erişin."
+      },
+      "shared": {
+        "title": "Henüz paylaşılan sayfa yok",
+        "description": "Başkalarının sizinle paylaştığı sayfalar burada görünecek."
+      }
+    },
+    "delete_view": {
+      "title": "Bu görünümü silmek istediğinizden emin misiniz?",
+      "content": "Onaylarsanız, bu görünüm için seçtiğiniz tüm sıralama, filtreleme ve görüntüleme seçenekleri + düzen kalıcı olarak silinecek ve geri yükleme imkanı olmayacaktır."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Bir iş öğesi oluşturun ve birine, hatta kendinize atayın",
+        "description": "İş öğelerini işler, görevler, çalışma veya JTBD olarak düşünün. Bir iş öğesi ve alt iş öğeleri genellikle takım üyelerinize atanan zaman temelli eylemlerdir. Takımınız, projenizi hedefine doğru ilerletmek için iş öğeleri oluşturur, atar ve tamamlar.",
+        "primary_button": {
+          "text": "İlk iş öğenizi oluşturun",
+          "comic": {
+            "title": "İş öğeleri Plane'de yapı taşlarıdır.",
+            "description": "Plane UI'yi yeniden tasarlamak, şirketi yeniden markalaştırmak veya yeni yakıt enjeksiyon sistemini başlatmak, muhtemelen alt iş öğeleri olan iş öğesi örnekleridir."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Henüz arşivlenmiş iş öğesi yok",
+        "description": "Tamamlanan veya iptal edilen iş öğelerini manuel olarak veya otomasyonla arşivleyebilirsiniz. Arşivlendikten sonra burada bulabilirsiniz.",
+        "primary_button": {
+          "text": "Otomasyon ayarla"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Uygulanan filtrelerle eşleşen iş öğesi bulunamadı",
+        "secondary_button": {
+          "text": "Tüm filtreleri temizle"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Modül Ekle",
+    "update_module": "Modülü Güncelle",
+    "create_module": "Modül Oluştur",
+    "archive_module": "Modülü Arşivle",
+    "restore_module": "Modülü Geri Yükle",
+    "delete_module": "Modülü sil",
+    "empty_state": {
+      "general": {
+        "title": "Proje kilometre taşlarınızı Modüllere eşleyin ve toplu işleri kolayca takip edin.",
+        "description": "Mantıksal bir üst öğeye ait iş öğeleri grubu bir modül oluşturur. Bunları bir kilometre taşını takip etmenin bir yolu olarak düşünün. Kendi dönemleri ve son teslim tarihleri ile birlikte, bir kilometre taşına ne kadar yakın veya uzak olduğunuzu görmenize yardımcı olacak analitiklere sahiptirler.",
+        "primary_button": {
+          "text": "İlk modülünüzü oluşturun",
+          "comic": {
+            "title": "Modüller işleri hiyerarşiye göre gruplamaya yardımcı olur.",
+            "description": "Bir araba modülü, bir şasi modülü ve bir depo modülü bu gruplandırmanın iyi örnekleridir."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Modülde iş öğesi yok",
+        "description": "Bu modülün bir parçası olarak gerçekleştirmek istediğiniz iş öğelerini oluşturun veya ekleyin",
+        "primary_button": {
+          "text": "Yeni iş öğeleri oluştur"
+        },
+        "secondary_button": {
+          "text": "Varolan bir iş öğesi ekle"
+        }
+      },
+      "archived": {
+        "title": "Henüz arşivlenmiş Modül yok",
+        "description": "Projenizi düzenli tutmak için tamamlanmış veya iptal edilmiş modülleri arşivleyin. Arşivlendikten sonra burada bulabilirsiniz."
+      },
+      "sidebar": {
+        "in_active": "Bu modül henüz aktif değil.",
+        "invalid_date": "Geçersiz tarih. Lütfen geçerli bir tarih girin."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Modülü arşivle",
+      "archive_module_description": "Yalnızca tamamlanmış veya iptal edilmiş\nmodüller arşivlenebilir.",
+      "delete_module": "Modülü sil"
+    },
+    "toast": {
+      "copy": {
+        "success": "Modül bağlantısı panoya kopyalandı"
+      },
+      "delete": {
+        "success": "Modül başarıyla silindi",
+        "error": "Modül silinemedi"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Bir not, belge veya tam bir bilgi bankası yazın. Plane'in AI asistanı Galileo'nun başlamanıza yardımcı olmasını sağlayın",
+        "description": "Sayfalar Plane'de düşüncelerinizi döktüğünüz alanlardır. Toplantı notları alın, kolayca biçimlendirin, iş öğelerini yerleştirin, bir bileşen kitaplığı kullanarak düzenleyin ve hepsini proje bağlamınızda tutun. Herhangi bir belgeyi hızlıca tamamlamak için bir kısayol veya düğme ile Plane'in AI'sı Galileo'yu çağırın.",
+        "primary_button": {
+          "text": "İlk sayfanızı oluşturun"
+        }
+      },
+      "private": {
+        "title": "Henüz özel sayfa yok",
+        "description": "Özel düşüncelerinizi burada saklayın. Paylaşmaya hazır olduğunuzda, ekip bir tık uzağınızda.",
+        "primary_button": {
+          "text": "İlk sayfanızı oluşturun"
+        }
+      },
+      "public": {
+        "title": "Henüz genel sayfa yok",
+        "description": "Projenizdeki herkesle paylaşılan sayfaları burada görün.",
+        "primary_button": {
+          "text": "İlk sayfanızı oluşturun"
+        }
+      },
+      "archived": {
+        "title": "Henüz arşivlenmiş sayfa yok",
+        "description": "Radarınızda olmayan sayfaları arşivleyin. İhtiyaç duyduğunuzda buradan erişin."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Talep bu proje için etkin değil.",
+        "description": "Talep, projenize gelen istekleri yönetmenize ve bunları iş akışınıza iş öğesi olarak eklemenize yardımcı olur. İstekleri yönetmek için proje ayarlarından talebi etkinleştirin.",
+        "primary_button": {
+          "text": "Özellikleri yönet"
+        }
+      },
+      "cycle": {
+        "title": "Döngüler bu proje için etkin değil.",
+        "description": "İşleri zaman dilimlerine bölün, proje son teslim tarihinden geriye çalışarak tarihler belirleyin ve takım olarak somut ilerleme kaydedin. Döngüleri kullanmaya başlamak için projenizde döngü özelliğini etkinleştirin.",
+        "primary_button": {
+          "text": "Özellikleri yönet"
+        }
+      },
+      "module": {
+        "title": "Modüller bu proje için etkin değil.",
+        "description": "Modüller projenizin yapı taşlarıdır. Kullanmaya başlamak için proje ayarlarından modülleri etkinleştirin.",
+        "primary_button": {
+          "text": "Özellikleri yönet"
+        }
+      },
+      "page": {
+        "title": "Sayfalar bu proje için etkin değil.",
+        "description": "Sayfalar projenizin yapı taşlarıdır. Kullanmaya başlamak için proje ayarlarından sayfaları etkinleştirin.",
+        "primary_button": {
+          "text": "Özellikleri yönet"
+        }
+      },
+      "view": {
+        "title": "Görünümler bu proje için etkin değil.",
+        "description": "Görünümler projenizin yapı taşlarıdır. Kullanmaya başlamak için proje ayarlarından görünümleri etkinleştirin.",
+        "primary_button": {
+          "text": "Özellikleri yönet"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Bekleme Listesi",
+      "planned": "Planlandı",
+      "in_progress": "Devam Ediyor",
+      "paused": "Duraklatıldı",
+      "completed": "Tamamlandı",
+      "cancelled": "İptal Edildi"
+    },
+    "layout": {
+      "list": "Liste düzeni",
+      "board": "Galeri düzeni",
+      "timeline": "Zaman çizelgesi düzeni"
+    },
+    "order_by": {
+      "name": "Ad",
+      "progress": "İlerleme",
+      "issues": "İş öğesi sayısı",
+      "due_date": "Son tarih",
+      "created_at": "Oluşturulma tarihi",
+      "manual": "Manuel"
+    }
+  },
+  "project_members": {
+    "full_name": "Ad soyad",
+    "display_name": "Görünen ad",
+    "email": "E-posta",
+    "joining_date": "Katılma tarihi",
+    "role": "Rol"
+  },
+  "project": {
+    "members_import": {
+      "title": "CSV'den üye içe aktar",
+      "description": "Şu sütunları içeren bir CSV yükleyin: E-posta ve Rol (5=Misafir, 15=Üye, 20=Yönetici). Kullanıcılar zaten çalışma alanı üyesi olmalıdır.",
+      "download_sample": "Örnek CSV indir",
+      "dropzone": {
+        "active": "CSV dosyasını buraya bırakın",
+        "inactive": "Sürükle bırak veya yüklemek için tıklayın",
+        "file_type": "Yalnızca .csv dosyaları desteklenir"
+      },
+      "buttons": {
+        "cancel": "İptal",
+        "import": "İçe Aktar",
+        "try_again": "Tekrar Dene",
+        "close": "Kapat",
+        "done": "Tamamlandı"
+      },
+      "progress": {
+        "uploading": "Yükleniyor...",
+        "importing": "İçe aktarılıyor..."
+      },
+      "summary": {
+        "title": {
+          "complete": "İçe Aktarma Tamamlandı"
+        },
+        "message": {
+          "success": "Projeye başarıyla {count} üye içe aktarıldı.",
+          "no_imports": "CSV dosyasından yeni üye içe aktarılmadı."
+        },
+        "stats": {
+          "added": "Eklendi",
+          "reactivated": "Yeniden etkinleştirildi",
+          "already_members": "Zaten üyeler",
+          "skipped": "Atlandı"
+        },
+        "download_errors": "Atlanan ayrıntıları indir"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Geçersiz dosya",
+          "message": "Yalnızca CSV dosyaları desteklenir."
+        },
+        "import_failed": {
+          "title": "İçe aktarma başarısız",
+          "message": "Bir şeyler ters gitti."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/settings.json b/packages/i18n/src/locales/tr-TR/settings.json
new file mode 100644
index 0000000..3a51093
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "E-postayı değiştir",
+        "description": "Doğrulama bağlantısı almak için yeni bir e-posta adresi girin.",
+        "toasts": {
+          "success_title": "Başarılı!",
+          "success_message": "E-posta başarıyla güncellendi. Lütfen tekrar giriş yapın."
+        },
+        "form": {
+          "email": {
+            "label": "Yeni e-posta",
+            "placeholder": "E-postanızı girin",
+            "errors": {
+              "required": "E-posta zorunludur",
+              "invalid": "E-posta geçersiz",
+              "exists": "E-posta zaten mevcut. Başka bir tane kullanın.",
+              "validation_failed": "E-posta doğrulaması başarısız oldu. Lütfen tekrar deneyin."
+            }
+          },
+          "code": {
+            "label": "Benzersiz kod",
+            "placeholder": "123456",
+            "helper_text": "Doğrulama kodu yeni e-postanıza gönderildi.",
+            "errors": {
+              "required": "Benzersiz kod zorunludur",
+              "invalid": "Geçersiz doğrulama kodu. Lütfen tekrar deneyin."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Devam et",
+          "confirm": "Onayla",
+          "cancel": "İptal et"
+        },
+        "states": {
+          "sending": "Gönderiliyor…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Tercihler",
+      "description": "Uygulama deneyiminizi çalışma şeklinize göre özelleştirin"
+    },
+    "notifications": {
+      "heading": "E-posta bildirimleri",
+      "description": "Abone olduğunuz İş öğelerinden haberdar olun. Bildirim almak için bunu etkinleştirin.",
+      "select_default_view": "Varsayılan görünümü seç",
+      "compact": "Kompakt",
+      "full": "Tam ekran"
+    },
+    "security": {
+      "heading": "Güvenlik"
+    },
+    "api_tokens": {
+      "title": "Kişisel Erişim Tokenları",
+      "description": "Verilerinizi harici sistemler ve uygulamalarla entegre etmek için güvenli API tokenları oluşturun."
+    },
+    "activity": {
+      "heading": "Aktivite",
+      "description": "Tüm projeler ve iş öğeleri genelinde son eylemlerinizi ve değişikliklerinizi izleyin."
+    },
+    "connections": {
+      "title": "Bağlantılar",
+      "heading": "Bağlantılar",
+      "description": "Çalışma alanı bağlantı ayarlarınızı yönetin."
+    }
+  },
+  "profile": {
+    "label": "Profil",
+    "page_label": "Sizin İşleriniz",
+    "work": "İş",
+    "details": {
+      "joined_on": "Katılma tarihi",
+      "time_zone": "Saat Dilimi"
+    },
+    "stats": {
+      "workload": "İş Yükü",
+      "overview": "Genel Bakış",
+      "created": "Oluşturulan iş öğeleri",
+      "assigned": "Atanan iş öğeleri",
+      "subscribed": "Abone olunan iş öğeleri",
+      "state_distribution": {
+        "title": "Duruma göre iş öğeleri",
+        "empty": "Daha iyi analiz için durumlarına göre iş öğelerini görmek üzere iş öğesi oluşturun."
+      },
+      "priority_distribution": {
+        "title": "Önceliğe göre iş öğeleri",
+        "empty": "Daha iyi analiz için önceliklerine göre iş öğelerini görmek üzere iş öğesi oluşturun."
+      },
+      "recent_activity": {
+        "title": "Son aktiviteler",
+        "empty": "Veri bulunamadı. Lütfen girdilerinizi kontrol edin",
+        "button": "Bugünün aktivitesini indir",
+        "button_loading": "İndiriliyor"
+      }
+    },
+    "actions": {
+      "profile": "Profil",
+      "security": "Güvenlik",
+      "activity": "Aktivite",
+      "preferences": "Tercihler",
+      "notifications": "Bildirimler",
+      "api-tokens": "Kişisel Erişim Tokenları",
+      "connections": "Bağlantılar"
+    },
+    "tabs": {
+      "summary": "Özet",
+      "assigned": "Atanan",
+      "created": "Oluşturulan",
+      "subscribed": "Abone olunan",
+      "activity": "Aktivite"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Henüz aktivite yok",
+        "description": "Yeni bir iş öğesi oluşturarak başlayın! Detaylar ve özellikler ekleyin. Aktivitenizi görmek için Plane'de daha fazlasını keşfedin."
+      },
+      "assigned": {
+        "title": "Size atanan iş öğesi yok",
+        "description": "Size atanan iş öğeleri buradan takip edilebilir."
+      },
+      "created": {
+        "title": "Henüz iş öğesi yok",
+        "description": "Sizin oluşturduğunuz tüm iş öğeleri burada görünecek, doğrudan buradan takip edin."
+      },
+      "subscribed": {
+        "title": "Henüz iş öğesi yok",
+        "description": "İlgilendiğiniz iş öğelerine abone olun, hepsini buradan takip edin."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Sistem tercihi"
+      },
+      "light": {
+        "label": "Açık"
+      },
+      "dark": {
+        "label": "Koyu"
+      },
+      "light_contrast": {
+        "label": "Yüksek kontrastlı açık"
+      },
+      "dark_contrast": {
+        "label": "Yüksek kontrastlı koyu"
+      },
+      "custom": {
+        "label": "Özel tema"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/stickies.json b/packages/i18n/src/locales/tr-TR/stickies.json
new file mode 100644
index 0000000..c619be6
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Yapışkan Notlarınız",
+    "placeholder": "buraya yazmak için tıkla",
+    "all": "Tüm yapışkan notlar",
+    "no-data": "Bir fikir yazın, bir aydınlanma anını yakalayın veya bir beyin fırtınasını kaydedin. Başlamak için bir yapışkan not ekleyin.",
+    "add": "Yapışkan not ekle",
+    "search_placeholder": "Başlığa göre ara",
+    "delete": "Yapışkan notu sil",
+    "delete_confirmation": "Bu yapışkan notu silmek istediğinizden emin misiniz?",
+    "empty_state": {
+      "simple": "Bir fikir yazın, bir aydınlanma anını yakalayın veya bir beyin fırtınasını kaydedin. Başlamak için bir yapışkan not ekleyin.",
+      "general": {
+        "title": "Yapışkan notlar anlık notlar ve yapılacaklardır.",
+        "description": "Düşünce ve fikirlerinizi her zaman ve her yerden erişebileceğiniz yapışkan notlar oluşturarak zahmetsizce yakalayın.",
+        "primary_button": {
+          "text": "Yapışkan not ekle"
+        }
+      },
+      "search": {
+        "title": "Hiçbir yapışkan not eşleşmiyor.",
+        "description": "Farklı bir terim deneyin veya aramanızın doğru olduğundan eminseniz bize bildirin. ",
+        "primary_button": {
+          "text": "Yapışkan not ekle"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Yapışkan not adı 100 karakteri geçemez.",
+        "already_exists": "Açıklamasız bir yapışkan not zaten var"
+      },
+      "created": {
+        "title": "Yapışkan not oluşturuldu",
+        "message": "Yapışkan not başarıyla oluşturuldu"
+      },
+      "not_created": {
+        "title": "Yapışkan not oluşturulamadı",
+        "message": "Yapışkan not oluşturulamadı"
+      },
+      "updated": {
+        "title": "Yapışkan not güncellendi",
+        "message": "Yapışkan not başarıyla güncellendi"
+      },
+      "not_updated": {
+        "title": "Yapışkan not güncellenemedi",
+        "message": "Yapışkan not güncellenemedi"
+      },
+      "removed": {
+        "title": "Yapışkan not kaldırıldı",
+        "message": "Yapışkan not başarıyla kaldırıldı"
+      },
+      "not_removed": {
+        "title": "Yapışkan not kaldırılamadı",
+        "message": "Yapışkan not kaldırılamadı"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/template.json b/packages/i18n/src/locales/tr-TR/template.json
new file mode 100644
index 0000000..64f5136
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Şablonlar",
+      "description": "Şablonları kullandığınızda projeler, iş öğeleri ve sayfalar oluşturmak için harcanan zamanın %80'ini tasarruf edin.",
+      "new_project_template": "Yeni proje şablonu",
+      "new_work_item_template": "Yeni iş öğesi şablonu",
+      "new_page_template": "Yeni sayfa şablonu",
+      "options": {
+        "project": {
+          "label": "Proje şablonları"
+        },
+        "work_item": {
+          "label": "İş öğesi şablonları"
+        },
+        "page": {
+          "label": "Sayfa şablonları"
+        }
+      },
+      "create_template": {
+        "label": "Şablon oluştur",
+        "no_permission": {
+          "project": "Şablon oluşturmak için proje admininizle iletişime geçin",
+          "workspace": "Şablon oluşturmak için workspace admininizle iletişime geçin"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Şablonu kullan",
+          "loading": "Uygulanıyor"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Workspace'den türetildi"
+        },
+        "project": {
+          "info": "Projeden türetildi"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Proje şablonunuzu adlandırın.",
+              "validation": {
+                "required": "Şablon adı gereklidir",
+                "maxLength": "Şablon adı 255 karakterden az olmalıdır"
+              }
+            },
+            "description": {
+              "placeholder": "Bu şablonun ne zaman ve nasıl kullanılacağını açıklayın."
+            }
+          },
+          "name": {
+            "placeholder": "Projenizi adlandırın.",
+            "validation": {
+              "required": "Proje başlığı gereklidir",
+              "maxLength": "Proje başlığı 255 karakterden az olmalıdır"
+            }
+          },
+          "description": {
+            "placeholder": "Bu projenin amacını ve hedeflerini açıklayın."
+          },
+          "button": {
+            "create": "Proje şablonu oluştur",
+            "update": "Proje şablonunu güncelle"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "İş-öğesi şablonunuzu adlandırın.",
+              "validation": {
+                "required": "Şablon adı gereklidir",
+                "maxLength": "Şablon adı 255 karakterden az olmalıdır"
+              }
+            },
+            "description": {
+              "placeholder": "Bu şablonun ne zaman ve nasıl kullanılacağını açıklayın."
+            }
+          },
+          "name": {
+            "placeholder": "Bu iş öğesine bir başlık verin.",
+            "validation": {
+              "required": "İş öğesi başlığı gereklidir",
+              "maxLength": "İş öğesi başlığı 255 karakterden az olmalıdır"
+            }
+          },
+          "description": {
+            "placeholder": "Bu iş öğesini, tamamladığınızda ne başaracağınız açık olacak şekilde açıklayın."
+          },
+          "button": {
+            "create": "İş-öğesi şablonu oluştur",
+            "update": "İş-öğesi şablonunu güncelle"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Sayfa şablonunuzu adlandırın.",
+              "validation": {
+                "required": "Şablon adı gereklidir",
+                "maxLength": "Şablon adı 255 karakterden az olmalıdır"
+              }
+            },
+            "description": {
+              "placeholder": "Bu şablonun ne zaman ve nasıl kullanılacağını açıklayın."
+            }
+          },
+          "name": {
+            "placeholder": "Başlıksız sayfa",
+            "validation": {
+              "maxLength": "Sayfa adı 255 karakterden az olmalıdır"
+            }
+          },
+          "button": {
+            "create": "Sayfa şablonu oluştur",
+            "update": "Sayfa şablonunu güncelle"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Yayın ayarları} other {Marketplace'de yayınla}}",
+          "unpublish_action": "Marketplace'den kaldır",
+          "title": "Şablonunuzu keşfedilebilir ve tanınabilir yapın.",
+          "name": {
+            "label": "Şablon adı",
+            "placeholder": "Şablonunuzu adlandırın",
+            "validation": {
+              "required": "Şablon adı gereklidir",
+              "maxLength": "Şablon adı 255 karakterden az olmalıdır"
+            }
+          },
+          "short_description": {
+            "label": "Kısa açıklama",
+            "placeholder": "Bu şablon, aynı anda birden fazla projeyi yöneten Proje Yöneticileri için mükemmeldir.",
+            "validation": {
+              "required": "Kısa açıklama gereklidir"
+            }
+          },
+          "description": {
+            "label": "Açıklama",
+            "placeholder": "Konuşma-Metin entegrasyonumuzla üretkenliği artırın ve iletişimi kolaylaştırın.\n• Gerçek zamanlı dönüştürme: Söylenen kelimeleri anında doğru metne dönüştürün.\n• Görev ve yorum oluşturma: Sesli komutlarla görevler, açıklamalar ve yorumlar ekleyin.",
+            "validation": {
+              "required": "Açıklama gereklidir"
+            }
+          },
+          "category": {
+            "label": "Kategori",
+            "placeholder": "En uygun olduğunu düşündüğünüz yeri seçin. Birden fazla seçim yapabilirsiniz.",
+            "validation": {
+              "required": "En az bir kategori gereklidir"
+            }
+          },
+          "keywords": {
+            "label": "Anahtar kelimeler",
+            "placeholder": "Kullanıcılarınızın bu şablonu ararken arayacağını düşündüğünüz terimleri kullanın.",
+            "helperText": "Virgül ile ayrılmış anahtar kelimeleri girin, bu, insanların bu şablonu aramadan bulmasına yardımcı olacaktır.",
+            "validation": {
+              "required": "En az bir anahtar kelime gereklidir"
+            }
+          },
+          "website": {
+            "label": "Web sitesi URL'si",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "Geçersiz URL",
+              "maxLength": "URL 800 karakterden az olmalıdır"
+            }
+          },
+          "company_name": {
+            "label": "Şirket adı",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Şirket adı gereklidir",
+              "maxLength": "Şirket adı 255 karakterden az olmalıdır"
+            }
+          },
+          "contact_email": {
+            "label": "Destek e-postası",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Geçersiz e-posta adresi",
+              "maxLength": "Destek e-postası 255 karakterden az olmalıdır"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Gizlilik politikası bağlantısı",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Geçersiz URL",
+              "maxLength": "URL 800 karakterden az olmalıdır"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Kullanım koşulları bağlantısı",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "Geçersiz URL",
+              "maxLength": "URL 800 karakterden az olmalıdır"
+            }
+          },
+          "cover_image": {
+            "label": "Pazaryerinde görüntülenecek bir kapak resmi ekleyin",
+            "upload_title": "Kapak resmi yükle",
+            "upload_placeholder": "Kapak resmi yüklemek için tıklayın veya sürükleyip bırakın",
+            "drop_here": "Buraya bırakın",
+            "click_to_upload": "Yüklemek için tıklayın",
+            "invalid_file_or_exceeds_size_limit": "Geçersiz dosya veya boyut sınırını aşıyor. Lütfen tekrar deneyin.",
+            "upload_and_save": "Yükle ve kaydet",
+            "uploading": "Yükleniyor",
+            "remove": "Kaldır",
+            "removing": "Kaldırılıyor",
+            "validation": {
+              "required": "Kapak resmi gereklidir"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Bu şablonun görüntüleyicilerini etkileyeceğini düşündüğünüz belgeleri ve resimleri ekleyin.",
+            "validation": {
+              "required": "En az bir ekran görüntüsü gereklidir"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Şablonlar",
+        "description": "Plane'deki proje, iş-öğesi ve sayfa şablonlarıyla, bir projeyi sıfırdan oluşturmanız veya iş öğesi özelliklerini manuel olarak ayarlamanız gerekmez.",
+        "sub_description": "Şablonları kullandığınızda admin zamanınızın %80'ini geri kazanın."
+      },
+      "no_templates": {
+        "button": "İlk şablonunuzu oluşturun"
+      },
+      "no_labels": {
+        "description": "Henüz etiket yok. Projenizde iş öğelerini düzenlemek ve filtrelemek için etiketler oluşturun."
+      },
+      "no_modules": {
+        "description": "Henüz modül yok. Özel liderler ve atananlarla işleri alt projelere organize edin."
+      },
+      "no_work_items": {
+        "description": "Henüz iş öğesi yok. Bir tane ekleyin, işinizi daha iyi yapılandırın."
+      },
+      "no_sub_work_items": {
+        "description": "Henüz alt iş öğesi yok. Bir tane ekleyin, işinizi daha iyi yapılandırın."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Erişiminiz olan şablon yok.",
+          "description": "Lütfen bir şablon oluşturun"
+        },
+        "no_results": {
+          "title": "Bu bir şablonla eşleşmedi.",
+          "description": "Başka terimlerle arama yapmayı deneyin."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Şablon oluşturuldu",
+          "message": "{templateType} şablonu olan {templateName}, artık workspace'iniz için kullanılabilir."
+        },
+        "error": {
+          "title": "Bu sefer o şablonu oluşturamadık.",
+          "message": "Detaylarınızı tekrar kaydetmeyi deneyin veya tercihen başka bir sekmede yeni bir şablona kopyalayın."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Şablon değiştirildi",
+          "message": "{templateType} şablonu olan {templateName} değiştirildi."
+        },
+        "error": {
+          "title": "Bu şablondaki değişiklikleri kaydedemedik.",
+          "message": "Detaylarınızı tekrar kaydetmeyi deneyin veya daha sonra bu şablona geri dönün. Hala sorun yaşıyorsanız, bizimle iletişime geçin."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Şablon silindi",
+          "message": "{templateType} şablonu olan {templateName} artık workspace'inizden silindi."
+        },
+        "error": {
+          "title": "O şablonu bu sefer silemedik.",
+          "message": "Tekrar silmeyi deneyin veya daha sonra tekrar gelin. O zaman silemezseniz bizimle iletişime geçin."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Şablon yayından kaldırıldı",
+          "message": "{templateType} şablonu olan {templateName} marketplace'den kaldırıldı."
+        },
+        "error": {
+          "title": "Şablonu yayından kaldıramadık.",
+          "message": "Tekrar yayından kaldırmayı deneyin veya daha sonra tekrar gelin. O zaman kaldıramazsanız bizimle iletişime geçin."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Şablonu sil",
+      "description": {
+        "prefix": "Şablonu silmek istediğinizden emin misiniz-",
+        "suffix": "? Şablonla ilgili tüm veriler kalıcı olarak kaldırılacak. Bu işlem geri alınamaz."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Şablonu yayından kaldır",
+      "description": {
+        "prefix": "Şablonu yayından kaldırmak istediğinizden emin misiniz-",
+        "suffix": "? Şablon marketplace'den kaldırılacak ve diğerleri için artık mevcut olmayacak."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Yeni şablon ekle",
+        "project": "Yeni şablon ekle"
+      },
+      "label": {
+        "project": "Bir proje şablonu seçin",
+        "page": "Şablon seç"
+      },
+      "tooltip": {
+        "work_item": "Bir iş öğesi şablonu seçin"
+      },
+      "no_results": {
+        "work_item": "Şablon bulunamadı.",
+        "project": "Şablon bulunamadı."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/tour.json b/packages/i18n/src/locales/tr-TR/tour.json
new file mode 100644
index 0000000..f9457f1
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Çalışma alanınıza hoş geldiniz",
+        "description": "Başlamanıza yardımcı olmak için sizin için bir Demo Proje oluşturduk. İlk çalışma öğenizi ekleyelim."
+      },
+      "step_one": {
+        "title": "\"+ Çalışma öğesi ekle\"ye tıklayın",
+        "description": "\"+ Yeni Çalışma Öğesi\" düğmesine tıklayarak başlayın. İhtiyaçlarınıza uygun görevler, hatalar veya özel bir tür oluşturabilirsiniz."
+      },
+      "step_two": {
+        "title": "Çalışma öğelerinizi filtreleyin",
+        "description": "Listenizi hızlıca daraltmak için filtreleri kullanın. Durum, öncelik veya ekip üyelerine göre filtreleyebilirsiniz. "
+      },
+      "step_three": {
+        "title": "Çalışma öğelerini gerektiği gibi görüntüleyin, gruplandırın ve sıralayın.",
+        "description": "Gerekli özellikleri görün ve çalışma öğelerini ihtiyaçlarınıza göre gruplandırın veya sıralayın."
+      },
+      "step_four": {
+        "title": "İstediğiniz gibi görselleştirin",
+        "description": "Listede görmek istediğiniz özellikleri seçin. Çalışma öğelerini kendi yönteminizle de gruplayabilir ve sıralayabilirsiniz."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Döngülerle ilerleme kaydedin",
+        "description": "Bir Döngü oluşturmak için Q tuşuna basın. Adlandırın ve tarihleri ayarlayın—proje başına yalnızca bir döngü."
+      },
+      "step_one": {
+        "title": "Yeni bir döngü oluşturun",
+        "description": "Bir Döngü oluşturmak için Q tuşuna basın. Adlandırın ve tarihleri ayarlayın—proje başına yalnızca bir döngü."
+      },
+      "step_two": {
+        "title": "\"+\" tuşuna tıklayın",
+        "description": "\"+\" düğmesine tıklayarak başlayın. Döngü sayfasından doğrudan yeni veya mevcut çalışma öğeleri ekleyin."
+      },
+      "step_three": {
+        "title": "Döngü özeti",
+        "description": "Döngü ilerlemesini, ekip üretkenliğini ve öncelikleri izleyin—ve bir şeyler geride kalıyorsa araştırın."
+      },
+      "step_four": {
+        "title": "Çalışma öğelerini aktarın",
+        "description": "Son tarihten sonra bir döngü otomatik olarak tamamlanır. Bitmemiş işi başka bir döngüye taşıyın."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Projenizi Modüllere ayırın",
+        "description": "Modüller, kullanıcıların belirli zaman dilimlerinde çalışma öğelerini gruplandırmasına ve düzenlemesine yardımcı olan daha küçük, odaklı projelerdir."
+      },
+      "step_one": {
+        "title": "Modül oluşturun",
+        "description": "Modüller, kullanıcıların belirli zaman dilimlerinde çalışma öğelerini gruplandırmasına ve düzenlemesine yardımcı olan daha küçük, odaklı projelerdir."
+      },
+      "step_two": {
+        "title": "\"+\" tuşuna tıklayın",
+        "description": "\"+\" düğmesine tıklayarak başlayın. Modül sayfasından doğrudan yeni veya mevcut çalışma öğeleri ekleyin."
+      },
+      "step_three": {
+        "title": "Modül durumları",
+        "description": "Modüller, kullanıcıların plan yapmasına ve ilerleme ile aşamayı net bir şekilde izlemesine yardımcı olmak için bu durumları kullanır."
+      },
+      "step_four": {
+        "title": "Modül ilerlemesi",
+        "description": "Modül ilerlemesi, performansı izlemek için analizlerle tamamlanan öğeler aracılığıyla izlenir."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "AI destekli Sayfalarla belgeleyin",
+        "description": "Plane deki Sayfalar, proje bilgilerini yakalamanıza, düzenlemenize ve işbirliği yapmanıza olanak tanır—harici araçlara gerek yoktur."
+      },
+      "step_one": {
+        "title": "Sayfayı Genel veya Özel yapın",
+        "description": "Sayfalar, çalışma alanınızdaki herkes tarafından görülebilen genel veya yalnızca sizin erişebildiğiniz özel olarak ayarlanabilir."
+      },
+      "step_two": {
+        "title": "/ komutunu kullanın",
+        "description": "Listeler, resimler, tablolar ve yerleştirmeler dahil 16 blok türünden içerik eklemek için bir sayfada / kullanın."
+      },
+      "step_three": {
+        "title": "Sayfa eylemleri",
+        "description": "Sayfanız oluşturulduktan sonra, aşağıdaki eylemleri gerçekleştirmek için sağ üst köşedeki ••• menüsüne tıklayabilirsiniz."
+      },
+      "step_four": {
+        "title": "İçindekiler",
+        "description": "Tüm başlıkları görmek için panel simgesine tıklayarak sayfanızın kuşbakışı görünümünü elde edin."
+      },
+      "step_five": {
+        "title": "Sürüm geçmişi",
+        "description": "Sayfalar, sürüm geçmişiyle tüm düzenlemeleri izler ve gerekirse önceki sürümleri geri yüklemenizi sağlar."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Alımla istekleri kolaylaştırın",
+        "description": "Konukların hatalar, istekler veya biletler için çalışma öğeleri oluşturmasına olanak tanıyan Plane a özel bir özellik."
+      },
+      "step_one": {
+        "title": "Açık/kapalı alım istekleri",
+        "description": "Bekleyen istekler Açık sekmesinde kalır ve bir yönetici veya üye tarafından ele alındıktan sonra Kapalı a taşınır."
+      },
+      "step_two": {
+        "title": "Bekleyen bir isteği kabul edin/reddedin",
+        "description": "Çalışma öğesini düzenlemek ve projenize taşımak için kabul edin veya İptal Edildi olarak işaretlemek için reddedin."
+      },
+      "step_three": {
+        "title": "Şimdilik erteleyin",
+        "description": "Bir çalışma öğesi daha sonra incelemek üzere ertelenebilir. Açık istek listenizin alt kısmına taşınacaktır."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Sekmeler arası geçişi bırakın. Dünyanızı bağlayın.",
+        "description": "PR'ları takip etmek ve sohbetleri doğrudan Plane AI'da özetlemek için GitHub ve Slack'i bağlayın."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Navigasyon, yeniden hayal edildi",
+        "sub_title": "Çalışma alanınız artık daha akıllı, basitleştirilmiş bir navigasyonla keşfetmek daha kolay.",
+        "highlight_1": "Daha hızlı keşif için düzenlenmiş sol panel yapısı",
+        "highlight_2": "Anında herhangi bir şeye atlamak için geliştirilmiş global arama",
+        "highlight_3": "Netlik ve odaklanma için daha akıllı kategori gruplama",
+        "footer": "Hızlı bir tur ister misiniz?"
+      },
+      "step_zero": {
+        "title": "Anında herhangi bir şeyi bulun",
+        "description": "Görevlere, projelere, sayfalara ve kişilere atlamak için evrensel aramayı kullanın—akışınızdan ayrılmadan."
+      },
+      "step_one": {
+        "title": "Güncellemelerin kontrolünü elinizde tutun",
+        "description": "Gelen kutunuz tüm bahsetmeleri, onayları ve etkinliği tek bir yerde tutar, böylece asla önemli bir işi kaçırmazsınız."
+      },
+      "step_two": {
+        "title": "Navigasyonunuzu Kişiselleştirin",
+        "description": "Tercihlerde neyi gördüğünüzü ve nasıl gezindiğinizi özelleştirin."
+      }
+    },
+    "actions": {
+      "close": "Kapat",
+      "next": "Sonraki",
+      "back": "Geri",
+      "done": "Bitti",
+      "take_a_tour": "Tur yapın",
+      "get_started": "Başlayın",
+      "got_it": "Anladım"
+    },
+    "seed_data": {
+      "title": "İşte demo projeniz",
+      "description": "Projeler, çalışma alanınızda ekiplerinizi, görevlerinizi ve işleri bitirmek için ihtiyacınız olan her şeyi yönetmenize olanak tanır."
+    }
+  },
+  "get_started": {
+    "title": "Merhaba {name}, hoş geldiniz!",
+    "description": "İşte Plane ile yolculuğunuza başlamak için ihtiyacınız olan her şey.",
+    "checklist_section": {
+      "title": "Başlayın",
+      "description": "Kurulumunuza başlayın ve fikirlerinizin daha hızlı hayata geçtiğini görün.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Bir proje oluşturun"
+        },
+        "item_2": {
+          "title": "Bir çalışma öğesi oluşturun"
+        },
+        "item_3": {
+          "title": "Ekip üyelerini davet edin"
+        },
+        "item_4": {
+          "title": "Bir sayfa oluşturun"
+        },
+        "item_5": {
+          "title": "Plane AI sohbetini deneyin"
+        },
+        "item_6": {
+          "title": "Entegrasyonları bağlayın"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Ekibinizi davet edin",
+      "description": "Takım arkadaşlarını davet edin ve birlikte inşa etmeye başlayın."
+    },
+    "integrations_section": {
+      "title": "Çalışma alanınızı güçlendirin",
+      "more_integrations": "Daha fazla entegrasyona göz atın"
+    },
+    "switch_to_plane_section": {
+      "title": "Ekiplerin neden Plane e geçtiğini keşfedin",
+      "description": "Bugün kullandığınız araçlarla Plane i karşılaştırın ve farkı görün."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/update.json b/packages/i18n/src/locales/tr-TR/update.json
new file mode 100644
index 0000000..fc0f855
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "İlerleme",
+      "since_last_update": "Son güncellemeden beri",
+      "comments": "{count, plural, one{# yorum} other{# yorum}}"
+    },
+    "add_update": "Güncelleme Ekle",
+    "add_update_placeholder": "Buraya güncelleme ekleyin",
+    "empty": {
+      "title": "Henüz güncelleme yok",
+      "description": "Burada güncellemelere göz atabilirsiniz."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reaksiyon oluşturuldu",
+          "message": "Reaksiyon başarıyla oluşturuldu."
+        },
+        "error": {
+          "title": "Reaksiyon oluşturulamadı",
+          "message": "Reaksiyon oluşturulamadı. Lütfen tekrar deneyin."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reaksiyon silindi",
+          "message": "Reaksiyon başarıyla silindi."
+        },
+        "error": {
+          "title": "Reaksiyon silinemedi",
+          "message": "Reaksiyon silinemedi. Lütfen tekrar deneyin."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Güncelleme oluşturuldu",
+        "message": "Güncelleme başarıyla oluşturuldu."
+      },
+      "error": {
+        "title": "Güncelleme oluşturulamadı",
+        "message": "Güncelleme oluşturulamadı. Lütfen tekrar deneyin."
+      }
+    },
+    "delete": {
+      "title": "Güncellemeyi sil",
+      "confirmation": "Bu güncellemeyi silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.",
+      "success": {
+        "title": "Güncelleme silindi",
+        "message": "Güncelleme başarıyla silindi."
+      },
+      "error": {
+        "title": "Güncelleme silinemedi",
+        "message": "Güncelleme silinemedi. Lütfen tekrar deneyin."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Güncelleme güncellendi",
+        "message": "Güncelleme başarıyla güncellendi."
+      },
+      "error": {
+        "title": "Güncelleme güncellenemedi",
+        "message": "Güncelleme güncellenemedi. Lütfen tekrar deneyin."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/wiki.json b/packages/i18n/src/locales/tr-TR/wiki.json
new file mode 100644
index 0000000..d9ba5d3
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Genel",
+      "private": "Özel",
+      "shared": "Paylaşılan",
+      "archived": "Arşivlenen"
+    },
+    "fallback_name": "Koleksiyon",
+    "form": {
+      "name_required": "Koleksiyon başlığı zorunludur",
+      "name_max_length": "Koleksiyon adı 255 karakterden kısa olmalıdır",
+      "name_placeholder_create": "Koleksiyona bir başlık verin",
+      "name_placeholder_edit": "Koleksiyon adı"
+    },
+    "create_modal": {
+      "title": "Koleksiyon oluştur",
+      "submit": "Koleksiyon oluştur"
+    },
+    "edit_modal": {
+      "title": "Koleksiyonu düzenle"
+    },
+    "delete_modal": {
+      "title": "Koleksiyonu sil",
+      "page_count": "Bu koleksiyonda {pageCount} sayfa var. Onlara ne olacağını seçin.",
+      "transfer_title": "Sayfaları taşı ve koleksiyonu sil",
+      "transfer_description": "Silmeden önce tüm sayfaları başka bir koleksiyona taşıyın. Sayfalar ve izinleri korunur.",
+      "transfer_warning": "Taşınan sayfalar seçilen koleksiyonun izinlerini devralır.",
+      "transfer_target_label": "Sayfaları şuraya taşı",
+      "transfer_target_placeholder": "Bir koleksiyon seçin",
+      "delete_with_pages_title": "Koleksiyonu sayfalarla birlikte sil",
+      "delete_with_pages_description": "Koleksiyonu ve tüm sayfalarını kalıcı olarak siler. Bu işlem geri alınamaz.",
+      "submit": "Koleksiyonu sil"
+    },
+    "header": {
+      "add_page": "Sayfa ekle"
+    },
+    "menu": {
+      "create_new_page": "Yeni sayfa oluştur",
+      "add_existing_page": "Var olan sayfa ekle",
+      "edit_collection": "Koleksiyonu düzenle",
+      "collection_options": "Koleksiyon seçenekleri"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Sayfa ara",
+      "success_message": "{count} sayfa koleksiyona eklendi.",
+      "error_message": "Sayfalar taşınamadı. Lütfen tekrar deneyin.",
+      "no_pages_found": "Aramanızla eşleşen sayfa bulunamadı",
+      "no_pages_available": "Taşınabilecek sayfa yok",
+      "submit": "Taşı"
+    },
+    "list": {
+      "invite_only": "Yalnızca davetliler",
+      "remove_error": "Sayfa koleksiyondan kaldırılamadı.",
+      "no_matching_pages": "Eşleşen sayfa yok",
+      "remove_search_criteria": "Tüm sayfaları görmek için arama kriterlerini kaldırın",
+      "remove_filters": "Tüm sayfaları görmek için filtreleri kaldırın",
+      "no_pages_title": "Henüz sayfa yok",
+      "no_pages_description": "Bu koleksiyonda şu anda hiç sayfa yok.",
+      "untitled": "Başlıksız",
+      "restricted_access": "Kısıtlı erişim",
+      "collapse_page": "Sayfayı daralt",
+      "expand_page": "Sayfayı genişlet",
+      "page_actions": "Sayfa işlemleri",
+      "page_link_copied": "Sayfa bağlantısı panoya kopyalandı.",
+      "columns": {
+        "page_name": "Sayfa adı",
+        "owner": "Sahip",
+        "nested_pages": "İç içe sayfalar",
+        "last_activity": "Son etkinlik",
+        "actions": "İşlemler"
+      }
+    },
+    "toasts": {
+      "created": "Koleksiyon başarıyla oluşturuldu.",
+      "create_error": "Koleksiyon oluşturulamadı. Lütfen tekrar deneyin.",
+      "renamed": "Koleksiyon başarıyla yeniden adlandırıldı.",
+      "rename_error": "Koleksiyon güncellenemedi. Lütfen tekrar deneyin.",
+      "transferred_deleted": "Sayfalar taşındı ve koleksiyon silindi.",
+      "deleted_with_pages": "Koleksiyon ve sayfaları silindi.",
+      "delete_error": "Koleksiyon silinemedi. Lütfen tekrar deneyin.",
+      "target_required": "Lütfen sayfaların taşınacağı bir koleksiyon seçin.",
+      "create_page_error": "Sayfa oluşturulamadı. Lütfen tekrar deneyin.",
+      "create_page_in_collection_error": "Sayfa oluşturulamadı veya koleksiyona eklenemedi. Lütfen tekrar deneyin.",
+      "collection_link_copied": "Koleksiyon bağlantısı panoya kopyalandı."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Wiki'yi açmak için yükseltin",
+      "description": "Plane Pro ile genel sayfaları, sürüm geçmişini, paylaşılan sayfaları, gerçek zamanlı işbirliğini ve wiki'ler, şirket içi belgeler ve bilgi tabanları için çalışma alanı sayfalarını açın.",
+      "upgrade_button": {
+        "text": "Yükselt"
+      },
+      "learn_more_button": {
+        "text": "Daha fazla bilgi"
+      },
+      "download_button": {
+        "text": "Verileri indir",
+        "loading": "İndiriliyor"
+      },
+      "tabs": {
+        "nested_pages": "İç İçe Sayfalar",
+        "add_embeds": "Gömülü içerik ekle",
+        "publish_pages": "Sayfaları yayınla",
+        "comments": "Yorumlar"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "İç içe sayfalar ücretli bir plan gerektirir. Açmak için yükseltin."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/work-item-type.json b/packages/i18n/src/locales/tr-TR/work-item-type.json
new file mode 100644
index 0000000..160d7c4
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "İş Öğesi Tipleri",
+    "label_lowercase": "iş öğesi tipleri",
+    "settings": {
+      "description": "Ekibinizin ihtiyaçlarına göre özelleştirin ve kendi özelliklerinizi ekleyin.",
+      "cant_delete_default_message": "Bu iş öğesi türü mevcut iş öğeleriyle bağlantılı olduğundan silinemez.",
+      "set_as_default": "Varsayılan olarak ayarla",
+      "cant_set_default_inactive_message": "Varsayılan olarak ayarlamadan önce bu türü etkinleştirin",
+      "set_default_confirmation": {
+        "title": "Varsayılan iş öğesi türü olarak ayarla",
+        "description": "{name} türünü varsayılan olarak ayarlamak, bu çalışma alanındaki tüm projelere aktarılmasını sağlar. Tüm yeni iş öğeleri varsayılan olarak bu türü kullanacaktır.",
+        "confirm_button": "Varsayılan olarak ayarla"
+      },
+      "properties": {
+        "title": "Özel özellikler",
+        "description": "Özellikler oluşturun ve özelleştirin.",
+        "tooltip": "Her iş öğesi tipi, Başlık, Açıklama, Atanan Kişi, Durum, Öncelik, Başlangıç tarihi, Bitiş tarihi, Modül, Döngü vb. gibi varsayılan bir özellik seti ile gelir. Ayrıca ekibinizin ihtiyaçlarına göre kendi özelliklerinizi özelleştirebilir ve ekleyebilirsiniz.",
+        "add_button": "Yeni özellik ekle",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Çalışma alanından içe aktar"
+          }
+        },
+        "dropdown": {
+          "label": "Özellik tipi",
+          "placeholder": "Tip seçin"
+        },
+        "property_type": {
+          "text": {
+            "label": "Metin"
+          },
+          "number": {
+            "label": "Sayı"
+          },
+          "dropdown": {
+            "label": "Açılır Liste"
+          },
+          "boolean": {
+            "label": "Boolean"
+          },
+          "date": {
+            "label": "Tarih"
+          },
+          "member_picker": {
+            "label": "Üye seçici"
+          },
+          "formula": {
+            "label": "Formül"
+          }
+        },
+        "attributes": {
+          "label": "Özellikler",
+          "text": {
+            "single_line": {
+              "label": "Tek satır"
+            },
+            "multi_line": {
+              "label": "Paragraf"
+            },
+            "readonly": {
+              "label": "Salt okunur",
+              "header": "Salt okunur veri"
+            },
+            "invalid_text_format": {
+              "label": "Geçersiz metin formatı"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Sayı ekle"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Tek seçim"
+            },
+            "multi_select": {
+              "label": "Çoklu seçim"
+            },
+            "no_default_value": {
+              "label": "Varsayılan değer yok"
+            }
+          },
+          "boolean": {
+            "label": "Doğru | Yanlış",
+            "no_default": "Varsayılan değer yok"
+          },
+          "option": {
+            "create_update": {
+              "label": "Seçenekler",
+              "form": {
+                "placeholder": "Seçenek ekle",
+                "errors": {
+                  "name": {
+                    "required": "Seçenek adı gereklidir.",
+                    "integrity": "Aynı ada sahip seçenek zaten var."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Seçenek seçin",
+                "multi": {
+                  "default": "Seçenekler seçin",
+                  "variable": "{count} seçenek seçildi"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Başarılı!",
+              "message": "Özellik {name} başarıyla oluşturuldu."
+            },
+            "error": {
+              "title": "Hata!",
+              "message": "Özellik oluşturulamadı. Lütfen tekrar deneyin!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Başarılı!",
+              "message": "Özellik {name} başarıyla güncellendi."
+            },
+            "error": {
+              "title": "Hata!",
+              "message": "Özellik güncellenemedi. Lütfen tekrar deneyin!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Başarılı!",
+              "message": "Özellik {name} başarıyla silindi."
+            },
+            "error": {
+              "title": "Hata!",
+              "message": "Özellik silinemedi. Lütfen tekrar deneyin!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{name} özelliği {action}",
+            "success": {
+              "title": "Başarılı!",
+              "message": "Özellik {name} başarıyla {action}."
+            },
+            "error": {
+              "title": "Hata!",
+              "message": "Özellik {action} başarısız oldu. Lütfen tekrar deneyin!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Yeni özel özellik oluştur",
+            "update": "Özel özelliği güncelle"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Başlık"
+            },
+            "description": {
+              "placeholder": "Açıklama"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Özelliğinize bir isim vermelisiniz.",
+              "max_length": "Özellik adı 255 karakteri geçmemelidir."
+            },
+            "property_type": {
+              "required": "Bir özellik tipi seçmelisiniz."
+            },
+            "options": {
+              "required": "En az bir seçenek eklemelisiniz."
+            },
+            "formula": {
+              "required": "Formül ifadesi gereklidir.",
+              "invalid": "Geçersiz formül: {error}",
+              "circular_reference": "Döngüsel referans algılandı. Bir formül doğrudan veya dolaylı olarak kendisine referans veremez.",
+              "invalid_reference": "Formül var olmayan bir özelliğe referans veriyor."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Formül alanı",
+          "tooltip": "'{'Alan Adı'}' sözdizimini kullanarak bir formül girin. +, -, *, / ve & operatörlerini destekler.",
+          "placeholder": "Formülü yazın",
+          "test_button": "Test",
+          "validating": "Doğrulanıyor",
+          "validation_success": "Formül geçerli! {resultType} döndürür",
+          "validation_success_with_refs": "Formül geçerli! {resultType} döndürür ({count} alan referans verildi)",
+          "error": {
+            "empty": "Lütfen bir formül girin",
+            "missing_context": "Çalışma alanı, proje veya iş öğesi türü bağlamı eksik",
+            "validation_failed": "Doğrulama başarısız"
+          },
+          "picker": {
+            "no_match": "Eşleşen özellik yok",
+            "no_available": "Kullanılabilir özellik yok"
+          }
+        },
+        "enable_disable": {
+          "label": "Aktif",
+          "tooltip": {
+            "disabled": "Devre dışı bırakmak için tıklayın",
+            "enabled": "Etkinleştirmek için tıklayın"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Bu özelliği sil",
+          "description": "Özelliklerin silinmesi mevcut verilerin kaybına neden olabilir.",
+          "secondary_description": "Bunun yerine özelliği devre dışı bırakmak ister misiniz?",
+          "primary_button": "{action}, sil",
+          "secondary_button": "Evet, devre dışı bırak"
+        },
+        "mandate_confirmation": {
+          "label": "Zorunlu özellik",
+          "content": "Bu özellik için varsayılan bir seçenek olduğu görünüyor. Özelliği zorunlu hale getirmek varsayılan değeri kaldıracak ve kullanıcıların kendi seçtikleri bir değer eklemeleri gerekecek.",
+          "tooltip": {
+            "disabled": "Bu özellik türü zorunlu hale getirilemez",
+            "enabled": "Alanı isteğe bağlı olarak işaretlemek için işareti kaldırın",
+            "checked": "Alanı zorunlu olarak işaretlemek için işaretleyin"
+          }
+        },
+        "empty_state": {
+          "title": "Özel özellikler ekle",
+          "description": "Bu iş öğesi tipi için eklediğiniz yeni özellikler burada gösterilecektir."
+        }
+      },
+      "types": {
+        "title": "Türler",
+        "description": "Özelliklere sahip iş öğesi türleri oluşturun ve özelleştirin.",
+        "sort_options": {
+          "project_count": "Dahil olduğu proje sayısı"
+        },
+        "filter_options": {
+          "show_active": "Aktifleri göster",
+          "show_inactive": "Pasifleri göster"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Yeni oluştur",
+            "import_from_workspace": "Çalışma alanından içe aktar"
+          },
+          "banner": {
+            "with_access": "Çalışma alanı seviyesinden türleri içe aktarmak için iş öğesi türlerini etkinleştirin",
+            "without_access": "İş öğesi türleri devre dışı. Çalışma alanı ayarlarından etkinleştirmek için çalışma alanı yöneticisiyle iletişime geçin."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Özel özellikler",
+        "add_button": "Özellik ekle",
+        "modal": {
+          "title": "Özellik ekle",
+          "empty": {
+            "title": "Kullanılabilir özellik yok",
+            "description": "Tüm özellikler zaten bu türe bağlandı."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Özelliğin bağlantısını kaldır",
+          "description": "Bu özelliğin bağlantısını kaldırmak, bu türü kullanan her iş öğesindeki tüm değerlerini kalıcı olarak siler. Bu işlem geri alınamaz.",
+          "input_label": "Yazın",
+          "input_label_suffix": "devam etmek için:",
+          "confirm": "Özelliğin bağlantısını kaldır",
+          "loading": "Bağlantı kaldırılıyor"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Bu türü sil",
+        "description": "Türlerin silinmesi mevcut verilerin kaybına yol açabilir.",
+        "can_disable_warning": "Bunun yerine türü devre dışı bırakmak ister misiniz?",
+        "primary_button": "Evet, sil",
+        "toast": {
+          "success": {
+            "title": "Başarılı!",
+            "message": "İş öğesi türü başarıyla silindi."
+          },
+          "error": {
+            "title": "Hata!",
+            "message": "İş öğesi türü silinemedi. Lütfen tekrar deneyin!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Varsayılan iş öğesi türü silinemez",
+          "cannot_delete_work_item_type_with_associated_work_items": "İlişkili iş öğeleri olan iş öğesi türü silinemez"
+        }
+      }
+    },
+    "create": {
+      "title": "İş öğesi tipi oluştur",
+      "button": "İş öğesi tipi ekle",
+      "toast": {
+        "success": {
+          "title": "Başarılı!",
+          "message": "İş öğesi tipi başarıyla oluşturuldu."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": {
+            "default": "İş öğesi tipi oluşturulamadı. Lütfen tekrar deneyin!",
+            "conflict": "{name} türü zaten mevcut. Farklı bir ad seçin."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "İş öğesi tipini güncelle",
+      "button": "İş öğesi tipini güncelle",
+      "toast": {
+        "success": {
+          "title": "Başarılı!",
+          "message": "İş öğesi tipi {name} başarıyla güncellendi."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": {
+            "default": "İş öğesi tipi güncellenemedi. Lütfen tekrar deneyin!",
+            "conflict": "{name} türü zaten mevcut. Farklı bir ad seçin."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Bu iş öğesi tipine benzersiz bir isim verin"
+        },
+        "description": {
+          "placeholder": "Bu iş öğesi tipinin ne için olduğunu ve ne zaman kullanılacağını açıklayın."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{name} iş öğesi tipi {action}",
+        "success": {
+          "title": "Başarılı!",
+          "message": "İş öğesi tipi {name} başarıyla {action}."
+        },
+        "error": {
+          "title": "Hata!",
+          "message": "İş öğesi tipi {action} başarısız oldu. Lütfen tekrar deneyin!"
+        }
+      },
+      "tooltip": "{action} için tıklayın"
+    },
+    "change_confirmation": {
+      "title": "İş öğesi tipini değiştir?",
+      "description": "İş öğesi tipini değiştirmek, mevcut tipe özgü özel özellik değerlerinin kaybına neden olabilir. Bu işlem geri alınamaz.",
+      "button": {
+        "loading": "Değiştiriliyor",
+        "default": "Tipi değiştir"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "İş Öğesi Tiplerini Etkinleştir",
+        "description": "İş öğelerinizi İş öğesi tipleriyle şekillendirin. Simgeler, arka planlar ve özelliklerle özelleştirin ve bu proje için yapılandırın.",
+        "primary_button": {
+          "text": "Etkinleştir"
+        },
+        "confirmation": {
+          "title": "Bir kez etkinleştirildikten sonra, İş Öğesi Tipleri devre dışı bırakılamaz.",
+          "description": "Plane'in İş Öğesi, bu proje için varsayılan iş öğesi tipi haline gelecek ve bu projede simgesi ve arka planıyla görünecektir.",
+          "button": {
+            "default": "Etkinleştir",
+            "loading": "Ayarlanıyor"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "İş öğesi tiplerini etkinleştirmek için Pro'ya geçin.",
+        "description": "İş öğelerinizi İş öğesi tipleriyle şekillendirin. Simgeler, arka planlar ve özelliklerle özelleştirin ve bu proje için yapılandırın.",
+        "primary_button": {
+          "text": "Pro'ya Geç"
+        }
+      },
+      "upgrade": {
+        "title": "İş öğesi tiplerini etkinleştirmek için yükseltin.",
+        "description": "İş öğelerinizi İş öğesi tipleriyle şekillendirin. Simgeler, arka planlar ve özelliklerle özelleştirin ve bu proje için yapılandırın.",
+        "primary_button": {
+          "text": "Yükselt"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Hiyerarşi",
+      "tab_label": "Hiyerarşi",
+      "description": "Çalışmanızı düzenlemek için hiyerarşi seviyeleri oluşturun. Her seviye, doğrudan üstündeki öğeyle üst ilişkisi ve doğrudan altındaki öğeyle alt ilişkisi tanımlar. ",
+      "sidebar_label": "Hiyerarşi",
+      "enable_control": {
+        "title": "Hiyerarşiyi etkinleştir",
+        "description": "Farklı iş öğesi türleri arasında üst-alt ilişkileri oluşturun.",
+        "tooltip": "Hiyerarşi etkinleştirildikten sonra devre dışı bırakılamaz."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Yeni bir hiyerarşi oluşturmak için önce İş Öğesi Türlerini tanımlayın.",
+        "cta": "İş öğesi türleri ayarları"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Yeni bir hiyerarşi seviyesi eklemek için türü sürükleyip bırakın",
+      "empty_level_placeholder": "{level}. seviyeye bir iş öğesi türünü sürükleyip bırakın",
+      "drag_tooltip": "Seviyeyi değiştirmek için sürükleyin",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Varsayılan olarak ayarla",
+          "toast": {
+            "loading": "Varsayılan olarak ayarlanıyor...",
+            "success": {
+              "title": "Başarılı!",
+              "message": "{level}. hiyerarşi seviyesi varsayılan olarak başarıyla ayarlandı."
+            },
+            "error": {
+              "title": "Hata!",
+              "message": "{level}. hiyerarşi seviyesi varsayılan olarak ayarlanamadı. Lütfen tekrar deneyin."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "{workItemTypeName}, {level}. seviyeye taşınıyor...",
+        "success": {
+          "title": "Başarılı!",
+          "message": "{workItemTypeName}, {level}. seviyeye başarıyla taşındı."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Kaydetmek mevcut bağlantıları kopardı",
+      "content": {
+        "intro": "{workItemTypeName} iş öğesi türünde şunlar var:",
+        "parent_items": "{count, plural, one {# üst bağlantı kaldırılacak} other {# üst bağlantı kaldırılacak}}.",
+        "child_items": "{count, plural, one {alt iş öğesi} other {alt iş öğeleri}}",
+        "parent_line_suffix_when_also_children": ", ve ",
+        "footer": "Bu değişiklik, {workItemTypeName} iş öğesi türündeki mevcut iş öğelerinden üst-alt ilişkilerini kaldıracaktır."
+      },
+      "confirm_input": {
+        "label": "Devam etmek için «onayla» yazın.",
+        "placeholder": "onayla"
+      },
+      "error_toast": {
+        "title": "Hata!",
+        "message": "Bağlantılar kaldırılamadı ve kaydedilemedi. Lütfen tekrar deneyin."
+      },
+      "confirm_button": {
+        "loading": "Kaydediliyor",
+        "default": "Yine de kaydet"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Hata!",
+        "message": "Seçilen iş öğesi türü, hiyerarşi kurallarını bozduğundan yeni bir iş öğesi oluşturmak için kullanılamaz."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Hata!",
+        "message": "İş öğesi türü, hiyerarşi kurallarını bozduğundan güncellenemiyor."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Hiyerarşi seviyesi",
+      "invalid_level_toast": {
+        "title": "Hata!",
+        "message": "Çalışma öğesi türü, hiyerarşi kurallarını ihlal ettiğinden güncellenemiyor."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/work-item.json b/packages/i18n/src/locales/tr-TR/work-item.json
new file mode 100644
index 0000000..27ef7de
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {İş öğesi} other {İş öğeleri}}",
+    "all": "Tüm İş Öğeleri",
+    "edit": "İş öğesini düzenle",
+    "title": {
+      "label": "İş öğesi başlığı",
+      "required": "İş öğesi başlığı gereklidir."
+    },
+    "add": {
+      "press_enter": "Başka bir iş öğesi eklemek için 'Enter'a basın",
+      "label": "İş öğesi ekle",
+      "cycle": {
+        "failed": "İş öğesi döngüye eklenemedi. Lütfen tekrar deneyin.",
+        "success": "{count, plural, one {İş öğesi} other {İş öğeleri}} döngüye başarıyla eklendi.",
+        "loading": "{count, plural, one {İş öğesi} other {İş öğeleri}} döngüye ekleniyor"
+      },
+      "assignee": "Atanan ekle",
+      "start_date": "Başlangıç tarihi ekle",
+      "due_date": "Son tarih ekle",
+      "parent": "Üst iş öğesi ekle",
+      "sub_issue": "Alt iş öğesi ekle",
+      "dependency": "Bağımlılık ekle",
+      "relation": "İlişki ekle",
+      "link": "Bağlantı ekle",
+      "existing": "Varolan iş öğesi ekle"
+    },
+    "remove": {
+      "label": "İş öğesini kaldır",
+      "cycle": {
+        "loading": "İş öğesi döngüden kaldırılıyor",
+        "success": "İş öğesi döngüden başarıyla kaldırıldı.",
+        "failed": "İş öğesi döngüden kaldırılamadı. Lütfen tekrar deneyin."
+      },
+      "module": {
+        "loading": "İş öğesi modülden kaldırılıyor",
+        "success": "İş öğesi modülden başarıyla kaldırıldı.",
+        "failed": "İş öğesi modülden kaldırılamadı. Lütfen tekrar deneyin."
+      },
+      "parent": {
+        "label": "Üst iş öğesini kaldır"
+      }
+    },
+    "new": "Yeni İş Öğesi",
+    "adding": "İş öğesi ekleniyor",
+    "create": {
+      "success": "İş öğesi başarıyla oluşturuldu"
+    },
+    "priority": {
+      "urgent": "Acil",
+      "high": "Yüksek",
+      "medium": "Orta",
+      "low": "Düşük"
+    },
+    "display": {
+      "properties": {
+        "label": "Görünen Özellikler",
+        "id": "ID",
+        "issue_type": "İş Öğesi Türü",
+        "sub_issue_count": "Alt iş öğesi sayısı",
+        "attachment_count": "Ek sayısı",
+        "created_on": "Oluşturulma tarihi",
+        "sub_issue": "Alt iş öğesi",
+        "work_item_count": "İş öğesi sayısı"
+      },
+      "extra": {
+        "show_sub_issues": "Alt iş öğelerini göster",
+        "show_empty_groups": "Boş grupları göster"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Bu düzen şu şekilde sıralanmıştır",
+      "list": "Liste",
+      "kanban": "Pano",
+      "calendar": "Takvim",
+      "spreadsheet": "Tablo",
+      "gantt": "Zaman Çizelgesi",
+      "title": {
+        "list": "Liste Düzeni",
+        "kanban": "Pano Düzeni",
+        "calendar": "Takvim Düzeni",
+        "spreadsheet": "Tablo Düzeni",
+        "gantt": "Zaman Çizelgesi Düzeni"
+      }
+    },
+    "states": {
+      "active": "Aktif",
+      "backlog": "Bekleme Listesi"
+    },
+    "comments": {
+      "placeholder": "Yorum ekle",
+      "switch": {
+        "private": "Özel yoruma geç",
+        "public": "Genel yoruma geç"
+      },
+      "create": {
+        "success": "Yorum başarıyla oluşturuldu",
+        "error": "Yorum oluşturulamadı. Lütfen daha sonra tekrar deneyin."
+      },
+      "update": {
+        "success": "Yorum başarıyla güncellendi",
+        "error": "Yorum güncellenemedi. Lütfen daha sonra tekrar deneyin."
+      },
+      "remove": {
+        "success": "Yorum başarıyla kaldırıldı",
+        "error": "Yorum kaldırılamadı. Lütfen daha sonra tekrar deneyin."
+      },
+      "upload": {
+        "error": "Dosya yüklenemedi. Lütfen daha sonra tekrar deneyin."
+      },
+      "copy_link": {
+        "success": "Yorum bağlantısı panoya kopyalandı",
+        "error": "Yorum bağlantısı kopyalanırken hata oluştu. Lütfen daha sonra tekrar deneyin."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Yanıt ekle",
+          "placeholder": "Yanıt ekle"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Yanıtlar alınamadı"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Yanıt başarıyla oluşturuldu"
+            },
+            "error": {
+              "message": "Yanıt oluşturulamadı"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Yanıt başarıyla güncellendi"
+            },
+            "error": {
+              "message": "Yanıt güncellenemedi"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Yanıt başarıyla silindi"
+            },
+            "error": {
+              "message": "Yanıt silinemedi"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "İş öğesi mevcut değil",
+        "description": "Aradığınız iş öğesi mevcut değil, arşivlenmiş veya silinmiş.",
+        "primary_button": {
+          "text": "Diğer iş öğelerini görüntüle"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Kardeş iş öğeleri"
+    },
+    "archive": {
+      "description": "Yalnızca tamamlanmış veya iptal edilmiş\niş öğeleri arşivlenebilir",
+      "label": "İş Öğesini Arşivle",
+      "confirm_message": "Bu iş öğesini arşivlemek istediğinizden emin misiniz? Arşivlenen tüm iş öğelerinizi daha sonra geri yükleyebilirsiniz.",
+      "success": {
+        "label": "Arşivleme başarılı",
+        "message": "Arşivleriniz proje arşivlerinde bulunabilir."
+      },
+      "failed": {
+        "message": "İş öğesi arşivlenemedi. Lütfen tekrar deneyin."
+      },
+      "banner_message": "Bu iş öğesi arşivlendi. Geri yüklemek için Arşivler bölümüne gidin.",
+      "go_to_archives": "Arşivlere git"
+    },
+    "restore": {
+      "success": {
+        "title": "Geri yükleme başarılı",
+        "message": "İş öğeniz proje iş öğelerinde bulunabilir."
+      },
+      "failed": {
+        "message": "İş öğesi geri yüklenemedi. Lütfen tekrar deneyin."
+      }
+    },
+    "relation": {
+      "relates_to": "İlişkili",
+      "duplicate": "Kopyası",
+      "blocked_by": "Engellendi",
+      "blocking": "Engelliyor",
+      "start_before": "Starts Bifor",
+      "start_after": "Starts Aftır",
+      "finish_before": "Finishes Bifor",
+      "finish_after": "Finishes Aftır",
+      "implements": "Implemente",
+      "implemented_by": "Implemente edilen"
+    },
+    "copy_link": "İş öğesi bağlantısını kopyala",
+    "delete": {
+      "label": "İş öğesini sil",
+      "error": "İş öğesi silinirken hata oluştu"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "İş öğesine abone olundu",
+        "unsubscribed": "İş öğesi aboneliği sonlandırıldı"
+      }
+    },
+    "select": {
+      "error": "Lütfen en az bir iş öğesi seçin",
+      "empty": "Hiç iş öğesi seçilmedi",
+      "add_selected": "Seçilen iş öğelerini ekle",
+      "select_all": "Tümünü seç",
+      "deselect_all": "Tümünü seçme"
+    },
+    "open_in_full_screen": "İş öğesini tam ekranda aç",
+    "duplicate": {
+      "modal": {
+        "title": "Başka bir projeye kopya oluştur",
+        "description1": "Bu, iş öğesinin bir kopyasını oluşturur.",
+        "description2": "Çoğaltılırken tüm özellik verileri kaldırılacaktır.",
+        "placeholder": "Bir proje seçin"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "İş öğesi başarıyla çoğaltıldı"
+        },
+        "error": {
+          "message": "İş öğesi çoğaltılamadı"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Sayfaları bağla",
+      "show_wiki_pages": "Wiki sayfalarını göster",
+      "link_pages_to": "Sayfaları bağla:",
+      "linked_pages": "Bağlı sayfalar",
+      "no_description": "Bu boş bir sayfa. Neden içine bir şeyler yazmıyorsunuz ve bu yer tutucu gibi burada görünmesini sağlamıyorsunuz",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Sayfalar güncellendi",
+            "message": "Sayfalar başarıyla güncellendi"
+          },
+          "error": {
+            "title": "Sayfa güncelleme başarısız",
+            "message": "Sayfa güncelleme başarısız"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Sayfa kaldırıldı",
+            "message": "Sayfa başarıyla kaldırıldı"
+          },
+          "error": {
+            "title": "Sayfa kaldırma başarısız",
+            "message": "Sayfa kaldırma başarısız"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Olumlu oy vermek için tıklayın",
+      "click_to_downvote": "Olumsuz oy vermek için tıklayın",
+      "click_to_view_upvotes": "Olumlu oyları görüntülemek için tıklayın",
+      "click_to_view_downvotes": "Olumsuz oyları görüntülemek için tıklayın"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Alt iş öğesi başarıyla güncellendi",
+      "error": "Alt iş öğesi güncellenirken hata oluştu"
+    },
+    "remove": {
+      "success": "Alt iş öğesi başarıyla kaldırıldı",
+      "error": "Alt iş öğesi kaldırılırken hata oluştu"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Alt iş öğelerinizin filtreleriyle eşleşmiyor.",
+        "description": "Tüm alt iş öğelerini görmek için tüm uygulanan filtreleri temizleyin.",
+        "action": "Filtreleri temizle"
+      },
+      "list_filters": {
+        "title": "İş öğelerinizin filtreleriyle eşleşmiyor.",
+        "description": "Tüm iş öğelerini görmek için tüm uygulanan filtreleri temizleyin.",
+        "action": "Filtreleri temizle"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Eşleşen iş öğesi bulunamadı"
+      },
+      "no_issues": {
+        "title": "İş öğesi bulunamadı"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Henüz yorum yok",
+        "description": "Yorumlar, iş öğeleri için tartışma ve takip alanı olarak kullanılabilir"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "İş öğeleri arşivlenemiyor",
+        "message": "Yalnızca Tamamlanmış veya İptal Edilmiş durum gruplarına ait iş öğeleri arşivlenebilir."
+      },
+      "invalid_issue_start_date": {
+        "title": "İş öğeleri güncellenemiyor",
+        "message": "Seçilen başlangıç tarihi bazı iş öğeleri için bitiş tarihinden sonra geliyor. Başlangıç tarihinin bitiş tarihinden önce olduğundan emin olun."
+      },
+      "invalid_issue_target_date": {
+        "title": "İş öğeleri güncellenemiyor",
+        "message": "Seçilen bitiş tarihi bazı iş öğeleri için başlangıç tarihinden önce geliyor. Bitiş tarihinin başlangıç tarihinden sonra olduğundan emin olun."
+      },
+      "invalid_state_transition": {
+        "title": "İş öğeleri güncellenemiyor",
+        "message": "Bazı iş öğeleri için durum değişikliğine izin verilmiyor. Durum değişikliğine izin verildiğinden emin olun."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Birden fazla iş öğesinin durumunu, önceliğini ve daha fazlasını tek seferde değiştirin. İşlem başına ortalama üç dakika kazanın.",
+      "cta": "One'a yükseltin"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Yinelenen iş öğeleri",
+      "description": "Yinelenen iş öğelerini bir kere ayarlayın, ve biz onları yöneteceğiz. Zamanı geldiğinde burada göreceksin.",
+      "new_recurring_work_item": "Yeni yinelenen iş öğesi",
+      "update_recurring_work_item": "Yinelenen iş öğesini güncelle",
+      "form": {
+        "interval": {
+          "title": "Zamanlama",
+          "start_date": {
+            "validation": {
+              "required": "Başlangıç tarihi gereklidir"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Aralık türü gereklidir"
+            }
+          }
+        },
+        "button": {
+          "create": "Yinelenen iş öğesi oluştur",
+          "update": "Yinelenen iş öğesini güncelle"
+        }
+      },
+      "create_button": {
+        "label": "Yinelenen iş öğesi oluştur",
+        "no_permission": "Yinelenen iş öğeleri oluşturmak için proje yöneticinizle iletişime geçin"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "İşiniz, otomatik pilotta",
+        "description": "Bir kez ayarlayın. Zamanı geldiğinde geri getireceğiz. Yinelenen işleri zahmetsiz hale getirmek için Business'a yükseltin."
+      },
+      "no_templates": {
+        "button": "İlk yinelenen iş öğenizi oluşturun"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Yinelenen iş öğesi oluşturuldu",
+          "message": "{name} adlı yinelenen iş öğesi artık çalışma alanınızda kullanılabilir."
+        },
+        "error": {
+          "title": "Bu sefer yinelenen iş öğesini oluşturamadık.",
+          "message": "Bilgilerinizi tekrar kaydetmeyi deneyin veya bunları yeni bir yinelenen iş öğesine, tercihen başka bir sekmede, kopyalayın."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Yinelenen iş öğesi değiştirildi",
+          "message": "{name} adlı yinelenen iş öğesi değiştirildi."
+        },
+        "error": {
+          "title": "Bu yinelenen iş öğesindeki değişiklikleri kaydedemedik.",
+          "message": "Bilgilerinizi tekrar kaydetmeyi deneyin veya bu yinelenen iş öğesine daha sonra geri dönün. Hala sorun yaşarsanız, bizimle iletişime geçin."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Yinelenen iş öğesi silindi",
+          "message": "{name} adlı yinelenen iş öğesi çalışma alanınızdan silindi."
+        },
+        "error": {
+          "title": "Bu yinelenen iş öğesini silemedik.",
+          "message": "Tekrar silmeyi deneyin veya daha sonra tekrar deneyin. Hala silemiyorsanız, bizimle iletişime geçin."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Yinelenen iş öğesini sil",
+      "description": {
+        "prefix": "Yinelenen iş öğesini silmek istediğinizden emin misiniz-",
+        "suffix": "? Bu yinelenen iş öğesiyle ilgili tüm veriler kalıcı olarak silinecek. Bu işlem geri alınamaz."
+      }
+    }
+  },
+  "epic": {
+    "new": "Yeni Epik",
+    "label": "{count, plural, one {Epik} other {Epikler}}",
+    "adding": "Epik ekleniyor",
+    "create": {
+      "success": "Epik başarıyla oluşturuldu"
+    },
+    "add": {
+      "label": "Epik Ekle",
+      "press_enter": "Başka bir epik eklemek için 'Enter'a basın"
+    },
+    "title": {
+      "label": "Epik Başlığı",
+      "required": "Epik başlığı gereklidir."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/workflow.json b/packages/i18n/src/locales/tr-TR/workflow.json
new file mode 100644
index 0000000..e000621
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Yeni iş öğelerine izin ver",
+      "work_item_creation_disable_tooltip": "Bu durum için iş öğesi oluşturma devre dışı",
+      "default_state": "Varsayılan durum tüm üyelerin yeni iş öğeleri oluşturmasına izin verir. Bu değiştirilemez",
+      "state_change_count": "{count, plural, one {1 izin verilen durum değişikliği} other {{count} izin verilen durum değişikliği}}",
+      "movers_count": "{count, plural, one {1 listelenmiş inceleyici} other {{count} listelenmiş inceleyici}}",
+      "state_changes": {
+        "label": {
+          "default": "İzin verilen durum değişikliği ekle",
+          "loading": "İzin verilen durum değişikliği ekleniyor"
+        },
+        "move_to": "Durumu şuna değiştir",
+        "movers": {
+          "label": "İncelendiğinde",
+          "tooltip": "İnceleyiciler, iş öğelerini bir durumdan diğerine taşıma izni olan kişilerdir.",
+          "add": "İnceleyici ekle"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Bu iş öğesini buraya taşıyamazsınız."
+    },
+    "workflow_enabled": {
+      "label": "Durum değişikliği"
+    },
+    "workflow_tree": {
+      "label": "Şuradaki iş öğeleri için",
+      "state_change_label": "şuraya taşıyabilir"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Değişikliklerin ve incelemelerin kargaşasını İş Akışları ile kontrol edin.",
+        "description": "Plane'deki İş Akışları ile işinizin nereye, kim tarafından ve ne zaman taşınacağına dair kurallar belirleyin."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Değişiklik geçmişini görüntüle",
+      "reset_workflow": "İş akışını sıfırla"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Bu iş akışını sıfırlamak istediğinizden emin misiniz?",
+        "description": "Bu iş akışını sıfırlarsanız, tüm durum değişikliği kurallarınız silinecek ve bunları bu projede çalıştırmak için yeniden oluşturmanız gerekecektir."
+      },
+      "delete_state_change": {
+        "title": "Bu durum değişikliği kuralını silmek istediğinizden emin misiniz?",
+        "description": "Silindikten sonra, bu değişikliği geri alamazsınız ve bu kuralı bu proje için çalıştırmak istiyorsanız tekrar ayarlamanız gerekecektir."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "İş akışı {action}",
+        "success": {
+          "title": "Başarılı",
+          "message": "İş akışı başarıyla {action}"
+        },
+        "error": {
+          "title": "Hata",
+          "message": "İş akışı {action} olamadı. Lütfen tekrar deneyin."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Başarılı",
+          "message": "İş akışı başarıyla sıfırlandı"
+        },
+        "error": {
+          "title": "İş akışı sıfırlama hatası",
+          "message": "İş akışı sıfırlanamadı. Lütfen tekrar deneyin."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Durum değişikliği kuralı ekleme hatası",
+          "message": "Durum değişikliği kuralı eklenemedi. Lütfen tekrar deneyin."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Durum değişikliği kuralı değiştirme hatası",
+          "message": "Durum değişikliği kuralı değiştirilemedi. Lütfen tekrar deneyin."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Durum değişikliği kuralı kaldırma hatası",
+          "message": "Durum değişikliği kuralı kaldırılamadı. Lütfen tekrar deneyin."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Durum değişikliği kuralı inceleyicileri değiştirme hatası",
+          "message": "Durum değişikliği kuralı inceleyicileri değiştirilemedi. Lütfen tekrar deneyin."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/workspace-settings.json b/packages/i18n/src/locales/tr-TR/workspace-settings.json
new file mode 100644
index 0000000..c9eb5c0
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Çalışma Alanı Ayarları",
+    "page_label": "{workspace} - Genel ayarlar",
+    "key_created": "Anahtar oluşturuldu",
+    "copy_key": "Bu gizli anahtarı Plane Pages'e kopyalayıp kaydedin. Kapat düğmesine bastıktan sonra bu anahtarı göremezsiniz. Anahtar içeren bir CSV dosyası indirildi.",
+    "token_copied": "Token panoya kopyalandı.",
+    "settings": {
+      "general": {
+        "title": "Genel",
+        "upload_logo": "Logo yükle",
+        "edit_logo": "Logoyu düzenle",
+        "name": "Çalışma Alanı Adı",
+        "company_size": "Şirket Büyüklüğü",
+        "url": "Çalışma Alanı URL'si",
+        "workspace_timezone": "Çalışma Alanı Saat Dilimi",
+        "update_workspace": "Çalışma Alanını Güncelle",
+        "delete_workspace": "Bu çalışma alanını sil",
+        "delete_workspace_description": "Bir çalışma alanı silindiğinde, içindeki tüm veri ve kaynaklar kalıcı olarak kaldırılır ve kurtarılamaz.",
+        "delete_btn": "Bu çalışma alanını sil",
+        "delete_modal": {
+          "title": "Bu çalışma alanını silmek istediğinizden emin misiniz?",
+          "description": "Ücretli planlarımızdan birine aktif bir deneme sürümünüz var. Devam etmek için önce iptal edin.",
+          "dismiss": "Kapat",
+          "cancel": "Denemeyi iptal et",
+          "success_title": "Çalışma alanı silindi.",
+          "success_message": "Kısa süre sonra profil sayfanıza yönlendirileceksiniz.",
+          "error_title": "Bu işe yaramadı.",
+          "error_message": "Lütfen tekrar deneyin."
+        },
+        "errors": {
+          "name": {
+            "required": "Ad gereklidir",
+            "max_length": "Çalışma alanı adı 80 karakteri geçmemeli"
+          },
+          "company_size": {
+            "required": "Şirket büyüklüğü gereklidir",
+            "select_a_range": "Kuruluş büyüklüğünü seçin"
+          }
+        }
+      },
+      "members": {
+        "title": "Üyeler",
+        "add_member": "Üye ekle",
+        "pending_invites": "Bekleyen davetler",
+        "invitations_sent_successfully": "Davetler başarıyla gönderildi",
+        "leave_confirmation": "Çalışma alanından ayrılmak istediğinizden emin misiniz? Artık bu çalışma alanına erişiminiz olmayacak. Bu işlem geri alınamaz.",
+        "details": {
+          "full_name": "Tam ad",
+          "display_name": "Görünen ad",
+          "email_address": "E-posta adresi",
+          "account_type": "Hesap türü",
+          "authentication": "Kimlik Doğrulama",
+          "joining_date": "Katılma tarihi"
+        },
+        "modal": {
+          "title": "İşbirliği yapmaları için kişileri davet edin",
+          "description": "Kişileri çalışma alanınızda işbirliği yapmaları için davet edin.",
+          "button": "Davetleri gönder",
+          "button_loading": "Davetler gönderiliyor",
+          "placeholder": "isim@firma.com",
+          "errors": {
+            "required": "Davet etmek için bir e-posta adresine ihtiyacımız var.",
+            "invalid": "E-posta geçersiz"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Faturalandırma ve Planlar",
+        "description": "Planınızı seçin, abonelikleri yönetin ve ihtiyaçlarınız arttıkça kolayca yükseltin.",
+        "title": "Faturalandırma ve Planlar",
+        "current_plan": "Mevcut plan",
+        "free_plan": "Şu anda ücretsiz planı kullanıyorsunuz",
+        "view_plans": "Planları görüntüle"
+      },
+      "exports": {
+        "heading": "Dışa Aktarımlar",
+        "description": "Proje verilerinizi çeşitli formatlarda dışa aktarın ve indirme bağlantılarıyla dışa aktarma geçmişinize erişin.",
+        "title": "Dışa Aktarımlar",
+        "exporting": "Dışa aktarılıyor",
+        "previous_exports": "Önceki dışa aktarımlar",
+        "export_separate_files": "Verileri ayrı dosyalara aktar",
+        "exporting_projects": "Proje dışa aktarılıyor",
+        "format": "Format",
+        "filters_info": "Kriterlerinize göre belirli iş öğelerini dışa aktarmak için filtreler uygulayın.",
+        "modal": {
+          "title": "Şuraya aktar",
+          "toasts": {
+            "success": {
+              "title": "Dışa aktarma başarılı",
+              "message": "{entity} önceki dışa aktarmadan indirilebilir."
+            },
+            "error": {
+              "title": "Dışa aktarma başarısız",
+              "message": "Dışa aktarma başarısız oldu. Lütfen tekrar deneyin."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhook'lar",
+        "description": "Proje olayları gerçekleştiğinde harici hizmetlere bildirimleri otomatikleştirin.",
+        "title": "Webhook'lar",
+        "add_webhook": "Webhook ekle",
+        "modal": {
+          "title": "Webhook oluştur",
+          "details": "Webhook detayları",
+          "payload": "Payload URL",
+          "question": "Bu webhook'u hangi olaylar tetiklesin?",
+          "error": "URL gereklidir"
+        },
+        "secret_key": {
+          "title": "Gizli anahtar",
+          "message": "Webhook payload'ında oturum açmak için bir token oluşturun"
+        },
+        "options": {
+          "all": "Her şeyi gönder",
+          "individual": "Tek tek olayları seç"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook oluşturuldu",
+            "message": "Webhook başarıyla oluşturuldu"
+          },
+          "not_created": {
+            "title": "Webhook oluşturulamadı",
+            "message": "Webhook oluşturulamadı"
+          },
+          "updated": {
+            "title": "Webhook güncellendi",
+            "message": "Webhook başarıyla güncellendi"
+          },
+          "not_updated": {
+            "title": "Webhook güncellenemedi",
+            "message": "Webhook güncellenemedi"
+          },
+          "removed": {
+            "title": "Webhook kaldırıldı",
+            "message": "Webhook başarıyla kaldırıldı"
+          },
+          "not_removed": {
+            "title": "Webhook kaldırılamadı",
+            "message": "Webhook kaldırılamadı"
+          },
+          "secret_key_copied": {
+            "message": "Gizli anahtar panoya kopyalandı."
+          },
+          "secret_key_not_copied": {
+            "message": "Gizli anahtar kopyalanırken hata oluştu."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "API Token'ları",
+        "description": "Verilerinizi harici sistemler ve uygulamalarla entegre etmek için güvenli API token'ları oluşturun.",
+        "title": "API Token'ları",
+        "add_token": "Erişim token'ı ekle",
+        "create_token": "Token oluştur",
+        "never_expires": "Süresi dolmaz",
+        "generate_token": "Token oluştur",
+        "generating": "Oluşturuluyor",
+        "delete": {
+          "title": "API Token'ını sil",
+          "description": "Bu token'ı kullanan uygulamalar artık Plane verilerine erişemeyecek. Bu işlem geri alınamaz.",
+          "success": {
+            "title": "Başarılı!",
+            "message": "API token'ı başarıyla silindi"
+          },
+          "error": {
+            "title": "Hata!",
+            "message": "API token'ı silinemedi"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Entegrasyonlar",
+        "heading": "Entegrasyonlar",
+        "description": "Tüm iş akışı ekosisteminizde işinizi senkronize etmek için popüler araçlar ve hizmetlerle bağlantı kurun.",
+        "page_title": "Plane verilerinizi mevcut uygulamalarda veya kendi uygulamalarınızda kullanın.",
+        "page_description": "Bu çalışma alanı veya sizin tarafınızdan kullanılan tüm entegrasyonları görüntüleyin."
+      },
+      "imports": {
+        "title": "İmportlar",
+        "heading": "İmportlar",
+        "description": "İş akışı entegrasyonunuzu kolaylaştırmak için mevcut proje yönetim araçlarınızdan verileri bağlayın ve içe aktarın."
+      },
+      "worklogs": {
+        "title": "Workloglar",
+        "heading": "Workloglar",
+        "description": "Herhangi bir projedeki herkes için çalışma günlüklerini (zaman çizelgelerini) indirin."
+      },
+      "group_syncing": {
+        "title": "Grup senkronizasyonu",
+        "heading": "Grup senkronizasyonu",
+        "description": "Kimlik sağlayıcı gruplarını projelere ve rollere bağlayın. IdP'nizde grup üyeliği değiştiğinde kullanıcı erişimi otomatik olarak güncellenir; işe alıştırma ve işten çıkarma süreçlerini basitleştirir.",
+        "enable": {
+          "title": "Grup senkronizasyonunu etkinleştir",
+          "description": "Kimlik sağlayıcı gruplarına göre kullanıcıları projelere otomatik olarak ekleyin."
+        },
+        "config": {
+          "title": "Grup senkronizasyonunu yapılandır",
+          "description": "Kimlik sağlayıcı gruplarının projelere ve rollere nasıl eşlendiğini ayarlayın.",
+          "sync_on_login": {
+            "title": "Girişte senkronize et",
+            "description": "Kullanıcı giriş yaptığında grup üyeliğini ve proje erişimini güncelleyin."
+          },
+          "sync_offline": {
+            "title": "Çevrimdışı senkronizasyon",
+            "description": "Kullanıcıların giriş yapmasını beklemeden her altı saatte bir otomatik olarak senkronizasyon çalıştırır."
+          },
+          "auto_remove": {
+            "title": "Otomatik kaldırma",
+            "description": "Artık gruba uymayan kullanıcıları projelerden otomatik olarak kaldırın."
+          },
+          "group_attribute_key": {
+            "title": "Grup öznitelik anahtarı",
+            "description": "Kullanıcı gruplarını tanımlamak ve senkronize etmek için kullanılan kimlik sağlayıcı özniteliği.",
+            "placeholder": "Gruplar"
+          }
+        },
+        "group_mapping": {
+          "title": "Grup eşlemesi",
+          "description": "Kimlik sağlayıcı gruplarını projelere ve rollere bağlayın.",
+          "button_text": "Yeni grup senkronizasyonu ekle"
+        },
+        "toast": {
+          "updating": "Grup senkronizasyonu özelliği güncelleniyor",
+          "success": "Grup senkronizasyonu özelliği başarıyla güncellendi.",
+          "error": "Grup senkronizasyonu özelliği güncellenemedi!"
+        },
+        "delete_modal": {
+          "title": "Grup senkronizasyonunu sil",
+          "content": "Bu kimlik grubundan yeni kullanıcılar artık projeye eklenmeyecek. Zaten eklenen kullanıcılar mevcut rollerini koruyacaktır."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Kullanıcı grubu",
+            "required": "Kullanıcı grubu zorunludur",
+            "placeholder": "IdP grup adlarını girin"
+          },
+          "project": {
+            "text": "Proje",
+            "required": "Proje zorunludur",
+            "placeholder": "Proje seçin"
+          },
+          "default_role": {
+            "text": "Proje rolü",
+            "required": "Proje rolü zorunludur",
+            "placeholder": "Proje rolü seçin"
+          }
+        }
+      },
+      "identity": {
+        "title": "Kimlik",
+        "heading": "Kimlik",
+        "description": "Alan adınızı yapılandırın ve Tek oturum açmayı etkinleştirin"
+      },
+      "project_states": {
+        "title": "Proje durumları",
+        "heading": "Tüm projeler için ilerleme özetini görün.",
+        "description": "Proje Durumları, herhangi bir proje özelliğine göre tüm projelerinizin ilerlemesini takip etmek için Plane'e özgü bir özelliktir.",
+        "go_to_settings": "Ayarlara git"
+      },
+      "projects": {
+        "title": "Projeler",
+        "description": "Proje durumlarını yönetin, proje etiketlerini etkinleştirin ve diğer yapılandırmaları düzenleyin.",
+        "tabs": {
+          "states": "Proje durumları",
+          "labels": "Proje etiketleri"
+        }
+      },
+      "templates": {
+        "title": "Şablonlar",
+        "heading": "Şablonlar",
+        "description": "Şablonları kullandığınızda projeler, iş öğeleri ve sayfalar oluşturmaya harcanan zamanın %80'ini tasarruf edin."
+      },
+      "relations": {
+        "title": "İlişkiler",
+        "heading": "İlişkiler",
+        "description": "Çalışma alanınızdaki iş öğelerini birbirine bağlayan ilişki türlerini oluşturun ve yönetin."
+      },
+      "cancel_trial": {
+        "title": "Önce deneme sürenizi iptal edin.",
+        "description": "Ücretli planlarımızdan birine ait aktif deneme süreniz var. Lütfen devam etmek için önce bunu iptal edin.",
+        "dismiss": "Kapat",
+        "cancel": "Denemeyi iptal et",
+        "cancel_success_title": "Deneme iptal edildi.",
+        "cancel_success_message": "Artık workspeysi silebilirsiniz.",
+        "cancel_error_title": "Bu işlem başarısız oldu.",
+        "cancel_error_message": "Lütfen tekrar deneyin."
+      },
+      "applications": {
+        "internal": "Dahili",
+        "title": "Aplikasyonlar",
+        "applicationId_copied": "Aplikasyon ID panoya kopyalandı",
+        "clientId_copied": "Klayınt ID panoya kopyalandı",
+        "clientSecret_copied": "Klayınt Sikrıt panoya kopyalandı",
+        "third_party_apps": "Üçüncü parti aplikasyonlar",
+        "your_apps": "Aplikasyonlarınız",
+        "connect": "Bağlan",
+        "connected": "Bağlandı",
+        "disconnect": "Bağlantıyı kes",
+        "install": "Yükle",
+        "installed": "Yüklendi",
+        "configure": "Yapılandır",
+        "app_available": "Bu aplikasyonu bir Pleyn workspeysi ile kullanılabilir hale getirdiniz",
+        "app_credentials_regenrated": {
+          "title": "Uygulama kimlik bilgileri başarıyla yeniden oluşturuldu",
+          "description": "İstemci sırrını kullanıldığı her yerde değiştirin. Önceki sır artık geçerli değil."
+        },
+        "app_created": {
+          "title": "Uygulama başarıyla oluşturuldu",
+          "description": "Uygulamayı bir Plane çalışma alanına yüklemek için kimlik bilgilerini kullanın"
+        },
+        "installed_apps": "Yüklü uygulamalar",
+        "all_apps": "Tüm uygulamalar",
+        "internal_apps": "Dahili uygulamalar",
+        "app_name_title": "Bu aplikasyonu ne olarak adlandıracaksınız",
+        "app_description_title": {
+          "label": "Uzun açıklama",
+          "placeholder": "Pazar yeri için uzun bir açıklama yazın. Komutlar için '/' tuşuna basın."
+        },
+        "authorization_grant_type": {
+          "title": "Bağlantı türü",
+          "description": "Uygulamanızın çalışma alanı için bir kez mi kurulması gerektiğini yoksa her kullanıcının kendi hesabını bağlamasına mı izin verileceğini seçin"
+        },
+        "website": {
+          "title": "Web sitesi",
+          "description": "Uygulamanızın web sitesine bağlantı.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Uygulama Yapıcı",
+          "description": "Uygulamayı oluşturan kişi veya kuruluş."
+        },
+        "app_maker_error": "Aplikasyon meykır gerekli",
+        "setup_url": {
+          "label": "Kurulum URL'si",
+          "description": "Kullanıcılar uygulamayı yüklediklerinde bu URL'ye yönlendirilecektir.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "Webhook URL'si",
+          "description": "Uygulamanızın yüklü olduğu çalışma alanlarından webhook olaylarını ve güncellemelerini buraya göndereceğiz.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Webhook Gizli Anahtarı",
+          "description": "Gelen webhook isteklerini doğrulamak için kullanılan gizli anahtar.",
+          "placeholder": "Rastgele bir gizli anahtar girin"
+        },
+        "redirect_uris": {
+          "label": "Yönlendirme URI'leri (boşluk ile ayrılmış)",
+          "description": "Kullanıcılar Plane ile kimlik doğrulaması yaptıktan sonra bu yola yönlendirilecektir.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Kullanmaya başlamak için bir Pleyn workspeysi bağlayın",
+        "client_id_and_secret": "Klayınt ID ve Sikrıt",
+        "client_id_and_secret_description": "Bu sikrıt anahtarı Peycislere kopyalayıp kaydedin. Kapat'a bastıktan sonra bu anahtarı tekrar göremezsiniz.",
+        "client_id_and_secret_download": "Anahtarı buradan CSV olarak indirebilirsiniz.",
+        "application_id": "Aplikasyon ID",
+        "client_id": "Klayınt ID",
+        "client_secret": "Klayınt Sikrıt",
+        "export_as_csv": "CSV olarak dışa aktar",
+        "slug_already_exists": "Slag zaten mevcut",
+        "failed_to_create_application": "Aplikasyon oluşturulamadı",
+        "upload_logo": "Logo yükle",
+        "app_name_error": "Aplikasyon adı gerekli",
+        "app_short_description_title": "Bu aplikasyona kısa bir açıklama verin",
+        "app_short_description_error": "Aplikasyon kısa açıklaması gerekli",
+        "app_description_error": "Aplikasyon açıklaması gerekli",
+        "app_slug_title": "Aplikasyon slag",
+        "app_slug_error": "Aplikasyon slag gerekli",
+        "invalid_website_error": "Geçersiz web sitesi",
+        "webhook_url_title": "Webhuk URL",
+        "webhook_url_error": "Webhuk URL gerekli",
+        "invalid_webhook_url_error": "Geçersiz webhuk URL",
+        "redirect_uris_title": "Ridayrekt URIları",
+        "redirect_uris_error": "Ridayrekt URIları gerekli",
+        "invalid_redirect_uris_error": "Geçersiz ridayrekt URIları",
+        "redirect_uris_description": "Aplikasyonun kullanıcıdan sonra yönlendirileceği boşlukla ayrılmış URIları girin örn. https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Yetkilendirilmiş Cavaskrip Orijinleri",
+        "authorized_javascript_origins_error": "Yetkilendirilmiş Cavaskrip Orijinleri gerekli",
+        "invalid_authorized_javascript_origins_error": "Geçersiz yetkilendirilmiş Cavaskrip Orijinleri",
+        "authorized_javascript_origins_description": "Aplikasyonun istek yapmasına izin verilecek boşlukla ayrılmış orijinleri girin örn. app.com example.com",
+        "create_app": "Aplikasyon oluştur",
+        "update_app": "Aplikasyonu güncelle",
+        "build_your_own_app": "Kendi uygulamanızı oluşturun",
+        "edit_app_details": "Uygulama ayrıntılarını düzenle",
+        "regenerate_client_secret_description": "Klayınt sikrıtı yeniden oluştur. Sikrıtı yeniden oluşturursanız, anahtarı kopyalayabilir veya hemen sonra bir CSV dosyasına indirebilirsiniz.",
+        "regenerate_client_secret": "Klayınt sikrıtı yeniden oluştur",
+        "regenerate_client_secret_confirm_title": "Klayınt sikrıtı yeniden oluşturmak istediğinizden emin misiniz?",
+        "regenerate_client_secret_confirm_description": "Bu sikrıtı kullanan aplikasyon çalışmayı durduracak. Sikrıtı aplikasyonda güncellemeniz gerekecek.",
+        "regenerate_client_secret_confirm_cancel": "İptal",
+        "regenerate_client_secret_confirm_regenerate": "Yeniden oluştur",
+        "read_only_access_to_workspace": "Workspeysinize salt okunur erişim",
+        "write_access_to_workspace": "Workspeysinize yazma erişimi",
+        "read_only_access_to_user_profile": "Kullanıcı profilinize salt okunur erişim",
+        "write_access_to_user_profile": "Kullanıcı profilinize yazma erişimi",
+        "connect_app_to_workspace": "{app} aplikasyonunu {workspace} workspeysinize bağlayın",
+        "user_permissions": "Kullanıcı permişınları",
+        "user_permissions_description": "Kullanıcı permişınları, kullanıcının profiline erişim vermek için kullanılır.",
+        "workspace_permissions": "Workspeysı permişınları",
+        "workspace_permissions_description": "Workspeysı permişınları, workspeyse erişim vermek için kullanılır.",
+        "with_the_permissions": "permişınlarla birlikte",
+        "app_consent_title": "{app} Pleyn workspeysinize ve profilinize erişim talep ediyor.",
+        "choose_workspace_to_connect_app_with": "Aplikasyonu bağlamak için bir workspeysı seçin",
+        "app_consent_workspace_permissions_title": "{app} şunları yapmak istiyor",
+        "app_consent_user_permissions_title": "{app} ayrıca bir kullanıcının aşağıdaki kaynaklara erişim permişınını talep edebilir. Bu permişınlar yalnızca bir kullanıcı tarafından talep edilecek ve yetkilendirilecektir.",
+        "app_consent_accept_title": "Kabul ederek",
+        "app_consent_accept_1": "Aplikasyona Pleyn içinde veya dışında kullanabileceğiniz her yerde Pleyn verilerinize erişim izni verirsiniz",
+        "app_consent_accept_2": "{app}'in Gizlilik Politikası ve Kullanım Koşullarını kabul edersiniz",
+        "accepting": "Kabul ediliyor...",
+        "accept": "Kabul et",
+        "categories": "Kategoriler",
+        "select_app_categories": "Aplikasyon kategorilerini seçin",
+        "categories_title": "Kategoriler",
+        "categories_error": "Kategoriler gerekli",
+        "invalid_categories_error": "Geçersiz kategoriler",
+        "categories_description": "En iyi açıklamayı veren kategorileri seçin",
+        "supported_plans": "Desteklenen Planlar",
+        "supported_plans_description": "Bu uygulamayı yükleyebilecek çalışma alanı planlarını seçin. Tüm planlara izin vermek için boş bırakın.",
+        "select_plans": "Planları Seç",
+        "privacy_policy_url_title": "Gizlilik Politikası URL",
+        "privacy_policy_url_error": "Gizlilik Politikası URL gerekli",
+        "invalid_privacy_policy_url_error": "Geçersiz gizlilik politikası URL",
+        "terms_of_service_url_title": "Hizmet Şartları URL",
+        "terms_of_service_url_error": "Hizmet Şartları URL gerekli",
+        "invalid_terms_of_service_url_error": "Geçersiz hizmet şartları URL",
+        "support_url_title": "Destek URL",
+        "support_url_error": "Destek URL gerekli",
+        "invalid_support_url_error": "Geçersiz destek URL",
+        "video_url_title": "Video URL",
+        "video_url_error": "Video URL gerekli",
+        "invalid_video_url_error": "Geçersiz video URL",
+        "setup_url_error": "Kurulum URL gerekli",
+        "invalid_setup_url_error": "Geçersiz kurulum URL",
+        "configuration_url_title": "Yapılandırma URL",
+        "configuration_url_error": "Yapılandırma URL gerekli",
+        "invalid_configuration_url_error": "Geçersiz yapılandırma URL",
+        "contact_email_title": "İletişim Email",
+        "contact_email_error": "İletişim Email gerekli",
+        "invalid_contact_email_error": "Geçersiz iletişim email",
+        "upload_attachments": "Ekleri yükle",
+        "uploading_images": "{count, plural, one {Yükleniyor {count} görsel} other {Yükleniyor {count} görsel}}",
+        "drop_images_here": "Görselleri buraya bırakın",
+        "click_to_upload_images": "Görselleri yüklemek için tıklayın",
+        "invalid_file_or_exceeds_size_limit": "Geçersiz dosya veya boyut sınırını aşıyor ({size} MB)",
+        "uploading": "Yükleniyor...",
+        "upload_and_save": "Yükle ve kaydet",
+        "app_consent_no_access_title": "Yükleme talebi",
+        "app_consent_no_access_description": "Bu uygulama yalnızca bir workspace yöneticisi tarafından kurulduktan sonra yüklenebilir. Devam etmek için workspace yöneticinizle iletişime geçin.",
+        "app_consent_unapproved_title": "Bu uygulama henüz Plane tarafından incelenmedi veya onaylanmadı.",
+        "app_consent_unapproved_description": "Bu uygulamayı çalışma alanınıza bağlamadan önce güvendiğinizden emin olun.",
+        "go_to_app": "Uygulamaya git",
+        "enable_app_mentions": "Uygulama bahsini etkinleştir",
+        "enable_app_mentions_tooltip": "Bu etkinleştirildiğinde, kullanıcılar Çalışma Öğelerini bu uygulamaya atayabilir veya bahsedebilir.",
+        "scopes": "Kapsamlar",
+        "select_scopes": "Kapsamları seçin",
+        "read_access_to": "Salt okunur erişim",
+        "write_access_to": "Yazma erişimi",
+        "global_permission_expiration": "Genel kapsamlar yakında sona erecek. Bunun yerine ayrıntılı kapsamlar kullanın. Örneğin, genel okuma yerine project:read kullanın.",
+        "selected_scopes": "{count} seçildi",
+        "scopes_and_permissions": "Kapsamlar ve izinler",
+        "read": "Okuma",
+        "write": "Yazma",
+        "scope_description": {
+          "projects": "Projelere ve projeyle ilgili tüm varlıklara erişim",
+          "wiki": "Wiki'ye ve wiki ile ilgili tüm varlıklara erişim",
+          "workspaces": "Çalışma alanlarına ve ilgili tüm varlıklara erişim",
+          "stickies": "Yapışkanlara ve ilgili tüm varlıklara erişim",
+          "profile": "Kullanıcı profil bilgilerine erişim",
+          "agents": "Ajanlara ve tüm ajana bağlı varlıklara erişim",
+          "assets": "Varlıklara ve tüm varlıkla ilgili öğelere erişim"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "İşinizi daha akıllı ve daha hızlı hale getirmek için doğal olarak işinize ve bilgi tabanınıza bağlı olan AI kullanın."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Komut Dosyaları",
+        "new_script": "Yeni Komut Dosyası",
+        "description": "İş akışlarınızı özel komut dosyaları ve otomasyon kurallarıyla otomatikleştirin."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "API token'ı oluşturulmadı",
+        "description": "Plane API'lerini harici sistemlere entegre etmek için bir token oluşturun."
+      },
+      "webhooks": {
+        "title": "Webhook eklenmedi",
+        "description": "Gerçek zamanlı güncellemeler almak ve otomatik eylemler gerçekleştirmek için webhook'lar oluşturun."
+      },
+      "exports": {
+        "title": "Henüz dışa aktarma yok",
+        "description": "Dışa aktardığınızda, referans için burada bir kopya bulunur."
+      },
+      "imports": {
+        "title": "Henüz içe aktarma yok",
+        "description": "Tüm önceki içe aktarmalarınızı burada bulabilir ve indirebilirsiniz."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/tr-TR/workspace.json b/packages/i18n/src/locales/tr-TR/workspace.json
new file mode 100644
index 0000000..19f64e7
--- /dev/null
+++ b/packages/i18n/src/locales/tr-TR/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Çalışma Alanınızı Oluşturun",
+    "subheading": "Plane'i kullanmaya başlamak için bir çalışma alanı oluşturmalı veya katılmalısınız.",
+    "form": {
+      "name": {
+        "label": "Çalışma Alanınıza Ad Verin",
+        "placeholder": "Tanıdık ve tanınabilir bir şey her zaman iyidir."
+      },
+      "url": {
+        "label": "Çalışma Alanı URL'nizi Belirleyin",
+        "placeholder": "URL yazın veya yapıştırın",
+        "edit_slug": "Yalnızca URL'nin kısa adını düzenleyebilirsiniz"
+      },
+      "organization_size": {
+        "label": "Bu çalışma alanını kaç kişi kullanacak?",
+        "placeholder": "Bir aralık seçin"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Yalnızca örnek yöneticiniz çalışma alanları oluşturabilir",
+        "description": "Örnek yöneticinizin e-posta adresini biliyorsanız, iletişime geçmek için aşağıdaki düğmeye tıklayın.",
+        "request_button": "Örnek yönetici iste"
+      },
+      "validation": {
+        "name_alphanumeric": "Çalışma alanı adları yalnızca (' '), ('-'), ('_') ve alfasayısal karakterler içerebilir.",
+        "name_length": "Adınızı 80 karakterle sınırlayın.",
+        "url_alphanumeric": "URL'ler yalnızca ('-') ve alfasayısal karakterler içerebilir.",
+        "url_length": "URL'nizi 48 karakterle sınırlayın.",
+        "url_already_taken": "Çalışma alanı URL'si zaten alınmış!"
+      }
+    },
+    "request_email": {
+      "subject": "Yeni çalışma alanı isteği",
+      "body": "Merhaba örnek yönetici(ler),\n\nLütfen [çalışma-alanı-adı] URL'si ile [çalışma alanı oluşturma amacı] için yeni bir çalışma alanı oluşturun.\n\nTeşekkürler,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Çalışma alanı oluştur",
+      "loading": "Çalışma alanı oluşturuluyor"
+    },
+    "toast": {
+      "success": {
+        "title": "Başarılı",
+        "message": "Çalışma alanı başarıyla oluşturuldu"
+      },
+      "error": {
+        "title": "Hata",
+        "message": "Çalışma alanı oluşturulamadı. Lütfen tekrar deneyin."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Projelerinizin, aktivitenizin ve metriklerinizin genel görünümü",
+        "description": "Plane'e hoş geldiniz, sizi aramızda görmekten heyecan duyuyoruz. İlk projenizi oluşturun ve iş öğelerinizi takip edin, bu sayfa ilerlemenize yardımcı olacak bir alana dönüşecek. Yöneticiler ayrıca ekiplerinin ilerlemesine yardımcı olacak öğeler görecek.",
+        "primary_button": {
+          "text": "İlk projenizi oluşturun",
+          "comic": {
+            "title": "Plane'de her şey bir projeyle başlar",
+            "description": "Bir proje, bir ürünün yol haritası, bir pazarlama kampanyası veya yeni bir araba lansmanı olabilir."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Analitik",
+    "page_label": "{workspace} - Analitik",
+    "open_tasks": "Toplam açık görev",
+    "error": "Veri alınırken bir hata oluştu.",
+    "work_items_closed_in": "Kapanan iş öğeleri",
+    "selected_projects": "Seçilen projeler",
+    "total_members": "Toplam üye",
+    "total_cycles": "Toplam döngü",
+    "total_modules": "Toplam modül",
+    "pending_work_items": {
+      "title": "Bekleyen iş öğeleri",
+      "empty_state": "Ekip arkadaşlarınız tarafından bekleyen iş öğelerinin analizi burada görünür."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Bir yılda kapanan iş öğeleri",
+      "empty_state": "Aynı grafikte analizini görmek için iş öğelerini kapatın."
+    },
+    "most_work_items_created": {
+      "title": "En çok iş öğesi oluşturan",
+      "empty_state": "Ekip arkadaşlarınız ve onların oluşturduğu iş öğesi sayıları burada görünür."
+    },
+    "most_work_items_closed": {
+      "title": "En çok iş öğesi kapatan",
+      "empty_state": "Ekip arkadaşlarınız ve onların kapattığı iş öğesi sayıları burada görünür."
+    },
+    "tabs": {
+      "scope_and_demand": "Kapsam ve Talep",
+      "custom": "Özel Analitik"
+    },
+    "total": "Toplam {entity}",
+    "started_work_items": "Başlatılan {entity}",
+    "backlog_work_items": "Backlog {entity}",
+    "un_started_work_items": "Başlanmamış {entity}",
+    "completed_work_items": "Tamamlanmış {entity}",
+    "project_insights": "Proje İçgörüleri",
+    "summary_of_projects": "Projelerin Özeti",
+    "all_projects": "Tüm Projeler",
+    "trend_on_charts": "Grafiklerdeki eğilim",
+    "active_projects": "Aktif Projeler",
+    "customized_insights": "Özelleştirilmiş İçgörüler",
+    "created_vs_resolved": "Oluşturulan vs Çözülen",
+    "empty_state": {
+      "project_insights": {
+        "title": "Henüz veri yok",
+        "description": "Size atanan iş öğeleri, duruma göre ayrılarak burada gösterilecektir."
+      },
+      "created_vs_resolved": {
+        "title": "Henüz veri yok",
+        "description": "Zaman içinde oluşturulan ve çözümlenen iş öğeleri burada gösterilecektir."
+      },
+      "customized_insights": {
+        "title": "Henüz veri yok",
+        "description": "Size atanan iş öğeleri, duruma göre ayrılarak burada gösterilecektir."
+      },
+      "general": {
+        "title": "İlerlemeyi, iş yüklerini ve tahsisleri takip edin. Eğilimleri tespit edin, engelleri kaldırın ve işi hızlandırın",
+        "description": "Kapsam ile talep, tahminler ve kapsam genişlemesini görün. Takım üyeleri ve takımlar bazında performans alın ve projenizin zamanında çalıştığından emin olun.",
+        "primary_button": {
+          "text": "İlk projenizi başlatın",
+          "comic": {
+            "title": "Analitik en iyi Döngüler + Modüller ile çalışır",
+            "description": "İlk olarak, sorunlarınızı Döngülere sınırlandırın ve eğer mümkünse, bir döngüden fazla süren sorunları Modüllere gruplandırın. Sol navigasyonda ikisini de kontrol edin."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Henüz veri yok",
+        "description": "Döngü ilerleme analizleri burada görünecek. İlerlemesini izlemeye başlamak için döngülere iş öğeleri ekleyin."
+      },
+      "module_progress": {
+        "title": "Henüz veri yok",
+        "description": "Modül ilerleme analizleri burada görünecek. İlerlemesini izlemeye başlamak için modüllere iş öğeleri ekleyin."
+      },
+      "intake_trends": {
+        "title": "Henüz veri yok",
+        "description": "Intake eğilim analizleri burada görünecek. Eğilimleri izlemeye başlamak için intake'e iş öğeleri ekleyin."
+      }
+    },
+    "upgrade_to_plan": "{tab} sekmesini açmak için {plan} planına geçin",
+    "workitem_resolved_vs_pending": "Çözülen vs bekleyen iş öğeleri",
+    "projects_by_status": "Durumuna göre projeler",
+    "active_users": "Aktif kullanıcılar",
+    "intake_trends": "Alım Eğilimleri"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Proje} other {Projeler}}",
+    "create": {
+      "label": "Proje Ekle"
+    },
+    "network": {
+      "label": "Ağ",
+      "private": {
+        "title": "Özel",
+        "description": "Yalnızca davetle erişilebilir"
+      },
+      "public": {
+        "title": "Herkese Açık",
+        "description": "Çalışma alanındaki herkes (Misafirler hariç) katılabilir"
+      }
+    },
+    "error": {
+      "permission": "Bu işlemi yapma izniniz yok.",
+      "cycle_delete": "Döngü silinemedi",
+      "module_delete": "Modül silinemedi",
+      "issue_delete": "İş öğesi silinemedi"
+    },
+    "state": {
+      "backlog": "Bekleme Listesi",
+      "unstarted": "Başlatılmadı",
+      "started": "Başlatıldı",
+      "completed": "Tamamlandı",
+      "cancelled": "İptal Edildi"
+    },
+    "sort": {
+      "manual": "Manuel",
+      "name": "Ad",
+      "created_at": "Oluşturulma tarihi",
+      "members_length": "Üye sayısı"
+    },
+    "scope": {
+      "my_projects": "Projelerim",
+      "archived_projects": "Arşivlenmiş"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# ay} other{# ay}}",
+      "days_count": "{days, plural, one{# gün} other{# gün}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Aktif proje yok",
+        "description": "Her projeyi hedef odaklı çalışmanın üst öğesi olarak düşünün. Projeler, İşler, Döngüler ve Modüllerin yaşadığı ve meslektaşlarınızla birlikte bu hedefe ulaşmanıza yardımcı olan yerlerdir. Yeni bir proje oluşturun veya arşivlenmiş projeler için filtreleyin.",
+        "primary_button": {
+          "text": "İlk projenizi başlatın",
+          "comic": {
+            "title": "Plane'de her şey bir projeyle başlar",
+            "description": "Bir proje, bir ürünün yol haritası, bir pazarlama kampanyası veya yeni bir araba lansmanı olabilir."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Proje yok",
+        "description": "İş öğesi oluşturmak veya işlerinizi yönetmek için bir proje oluşturmalı veya bir parçası olmalısınız.",
+        "primary_button": {
+          "text": "İlk projenizi başlatın",
+          "comic": {
+            "title": "Plane'de her şey bir projeyle başlar",
+            "description": "Bir proje, bir ürünün yol haritası, bir pazarlama kampanyası veya yeni bir araba lansmanı olabilir."
+          }
+        }
+      },
+      "filter": {
+        "title": "Eşleşen proje yok",
+        "description": "Eşleşen kriterlerle proje bulunamadı.\n Bunun yerine yeni bir proje oluşturun."
+      },
+      "search": {
+        "description": "Eşleşen kriterlerle proje bulunamadı.\nBunun yerine yeni bir proje oluşturun"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Görünüm ekle",
+    "empty_state": {
+      "all-issues": {
+        "title": "Projede iş öğesi yok",
+        "description": "İlk projeniz tamamlandı! Şimdi, işlerinizi izlenebilir parçalara bölün. Hadi başlayalım!",
+        "primary_button": {
+          "text": "Yeni iş öğesi oluştur"
+        }
+      },
+      "assigned": {
+        "title": "Henüz iş öğesi yok",
+        "description": "Size atanan iş öğeleri buradan takip edilebilir.",
+        "primary_button": {
+          "text": "Yeni iş öğesi oluştur"
+        }
+      },
+      "created": {
+        "title": "Henüz iş öğesi yok",
+        "description": "Sizin oluşturduğunuz tüm iş öğeleri burada görünecek, doğrudan buradan takip edin.",
+        "primary_button": {
+          "text": "Yeni iş öğesi oluştur"
+        }
+      },
+      "subscribed": {
+        "title": "Henüz iş öğesi yok",
+        "description": "İlgilendiğiniz iş öğelerine abone olun, hepsini buradan takip edin."
+      },
+      "custom-view": {
+        "title": "Henüz iş öğesi yok",
+        "description": "Filtrelere uyan iş öğeleri burada takip edilebilir."
+      }
+    },
+    "delete_view": {
+      "title": "Bu görünümü silmek istediğinizden emin misiniz?",
+      "content": "Onaylarsanız, bu görünüm için seçtiğiniz tüm sıralama, filtreleme ve görüntüleme seçenekleri + düzen kalıcı olarak silinecek ve geri yükleme imkanı olmayacaktır."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Taslak iş öğesi oluştur",
+    "empty_state": {
+      "title": "Yarı yazılmış iş öğeleri ve yakında yorumlar burada görünecek.",
+      "description": "Bunu denemek için bir iş öğesi eklemeye başlayın ve yarıda bırakın veya ilk taslağınızı aşağıda oluşturun. 😉",
+      "primary_button": {
+        "text": "İlk taslağınızı oluşturun"
+      }
+    },
+    "delete_modal": {
+      "title": "Taslağı sil",
+      "description": "Bu taslağı silmek istediğinizden emin misiniz? Bu işlem geri alınamaz."
+    },
+    "toasts": {
+      "created": {
+        "success": "Taslak oluşturuldu",
+        "error": "İş öğesi oluşturulamadı. Lütfen tekrar deneyin."
+      },
+      "deleted": {
+        "success": "Taslak silindi"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Bir not, bir belge veya tam bir bilgi tabanı yazın. Başlamanıza yardımcı olması için Plane'in yapay zeka asistanı Galileo'yu alın",
+        "description": "Sayfalar, Plane'deki düşünce saksı alanıdır. Toplantı notları alın, bunları kolayca biçimlendirin, iş öğelerini gömin, bunları bir bileşen kitaplığı kullanarak düzenleyin ve hepsini projenizin bağlamında tutun. Herhangi bir belgeyi kısa sürede yapmak için, Plane'in yapay zekası Galileo'yu bir kısayolla veya bir düğmeye tıklayarak çağırın.",
+        "primary_button": {
+          "text": "İlk sayfanızı oluşturun"
+        }
+      },
+      "private": {
+        "title": "Henüz özel sayfa yok",
+        "description": "Özel düşüncelerinizi burada saklayın. Paylaşmaya hazır olduğunuzda, ekip sadece bir tık uzaklıkta.",
+        "primary_button": {
+          "text": "İlk sayfanızı oluşturun"
+        }
+      },
+      "public": {
+        "title": "Henüz çalışma alanı sayfası yok",
+        "description": "Çalışma alanınızdaki herkesle paylaşılan sayfaları burada görün.",
+        "primary_button": {
+          "text": "İlk sayfanızı oluşturun"
+        }
+      },
+      "archived": {
+        "title": "Henüz arşivlenmiş sayfa yok",
+        "description": "Radarınızda olmayan sayfaları arşivleyin. Gerektiğinde bunlara buradan erişin."
+      },
+      "shared": {
+        "title": "Henüz paylaşılan sayfa yok",
+        "description": "Başkalarının sizinle paylaştığı sayfalar burada görünecek."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Aktif döngü yok",
+        "description": "Projelerinizin, bugünün tarihini aralığı içinde kapsayan herhangi bir dönemi içeren döngüleri. Tüm aktif döngünüzün ilerlemesini ve detaylarını burada bulun."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "CSV'den üye içe aktar",
+      "description": "Şu sütunları içeren bir CSV yükleyin: Email, Display Name, First Name, Last Name, Role (5, 15 veya 20)",
+      "dropzone": {
+        "active": "CSV dosyasını buraya bırakın",
+        "inactive": "Sürükle bırak veya yüklemek için tıklayın",
+        "file_type": "Yalnızca .csv dosyaları desteklenir"
+      },
+      "buttons": {
+        "cancel": "İptal",
+        "import": "İçe Aktar",
+        "try_again": "Tekrar Dene",
+        "close": "Kapat",
+        "done": "Tamamlandı"
+      },
+      "progress": {
+        "uploading": "Yükleniyor...",
+        "importing": "İçe aktarılıyor..."
+      },
+      "summary": {
+        "title": {
+          "failed": "İçe Aktarma Başarısız",
+          "complete": "İçe Aktarma Tamamlandı"
+        },
+        "message": {
+          "seat_limit": "Koltuk sınırlamaları nedeniyle üyeler içe aktarılamıyor.",
+          "success": "Çalışma alanına başarıyla {count} üye eklendi.",
+          "no_imports": "CSV dosyasından hiçbir üye içe aktarılmadı."
+        },
+        "stats": {
+          "successful": "Başarılı",
+          "failed": "Başarısız"
+        },
+        "download_errors": "Hataları indir"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Geçersiz dosya",
+          "message": "Yalnızca CSV dosyaları desteklenir."
+        },
+        "import_failed": {
+          "title": "İçe aktarma başarısız",
+          "message": "Bir şeyler ters gitti."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/accessibility.json b/packages/i18n/src/locales/ua/accessibility.json
new file mode 100644
index 0000000..4276673
--- /dev/null
+++ b/packages/i18n/src/locales/ua/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Логотип робочого простору",
+      "open_workspace_switcher": "Відкрити перемикач робочого простору",
+      "open_user_menu": "Відкрити меню користувача",
+      "open_command_palette": "Відкрити палітру команд",
+      "open_extended_sidebar": "Відкрити розширену бічну панель",
+      "close_extended_sidebar": "Закрити розширену бічну панель",
+      "create_favorites_folder": "Створити папку улюблених",
+      "open_folder": "Відкрити папку",
+      "close_folder": "Закрити папку",
+      "open_favorites_menu": "Відкрити меню улюблених",
+      "close_favorites_menu": "Закрити меню улюблених",
+      "enter_folder_name": "Введіть назву папки",
+      "create_new_project": "Створити новий проект",
+      "open_projects_menu": "Відкрити меню проектів",
+      "close_projects_menu": "Закрити меню проектів",
+      "toggle_quick_actions_menu": "Перемкнути меню швидких дій",
+      "open_project_menu": "Відкрити меню проекту",
+      "close_project_menu": "Закрити меню проекту",
+      "collapse_sidebar": "Згорнути бічну панель",
+      "expand_sidebar": "Розгорнути бічну панель",
+      "edition_badge": "Відкрити модал платних планів"
+    },
+    "auth_forms": {
+      "clear_email": "Очистити email",
+      "show_password": "Показати пароль",
+      "hide_password": "Приховати пароль",
+      "close_alert": "Закрити сповіщення",
+      "close_popover": "Закрити спливаюче вікно"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/auth.json b/packages/i18n/src/locales/ua/auth.json
new file mode 100644
index 0000000..93198c7
--- /dev/null
+++ b/packages/i18n/src/locales/ua/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Ідентичність",
+    "description": "Налаштуйте свій домен для доступу до функцій безпеки, включаючи єдиний вхід.",
+    "domain_management": {
+      "header": "Управління доменами",
+      "verified_domains": {
+        "header": "Перевірені домени",
+        "description": "Перевірте право власності на домен електронної пошти, щоб увімкнути єдиний вхід.",
+        "button_text": "Додати домен",
+        "list": {
+          "domain_name": "Назва домену",
+          "status": "Статус",
+          "status_verified": "Перевірено",
+          "status_failed": "Не вдалося",
+          "status_pending": "Очікує"
+        },
+        "add_domain": {
+          "title": "Додати домен",
+          "description": "Додайте свій домен для налаштування SSO та його перевірки.",
+          "form": {
+            "domain_label": "Домен",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Домен обов'язковий",
+            "domain_invalid": "Введіть дійсну назву домену (напр. plane.so)"
+          },
+          "primary_button_text": "Додати домен",
+          "primary_button_loading_text": "Додавання",
+          "toast": {
+            "success_title": "Успіх!",
+            "success_message": "Домен успішно додано. Будь ласка, перевірте його, додавши запис DNS TXT.",
+            "error_message": "Не вдалося додати домен. Будь ласка, спробуйте ще раз."
+          }
+        },
+        "verify_domain": {
+          "title": "Перевірте свій домен",
+          "description": "Виконайте ці кроки, щоб перевірити свій домен.",
+          "instructions": {
+            "label": "Інструкції",
+            "step_1": "Перейдіть до налаштувань DNS для вашого хостинг-провайдера домену.",
+            "step_2": {
+              "part_1": "Створіть",
+              "part_2": "запис TXT",
+              "part_3": "та вставте повне значення запису, вказане нижче."
+            },
+            "step_3": "Це оновлення зазвичай займає кілька хвилин, але може зайняти до 72 годин.",
+            "step_4": "Натисніть \"Перевірити домен\", щоб підтвердити після оновлення запису DNS."
+          },
+          "verification_code_label": "Значення запису TXT",
+          "verification_code_description": "Додайте цей запис до налаштувань DNS",
+          "domain_label": "Домен",
+          "primary_button_text": "Перевірити домен",
+          "primary_button_loading_text": "Перевірка",
+          "secondary_button_text": "Зроблю це пізніше",
+          "toast": {
+            "success_title": "Успіх!",
+            "success_message": "Домен успішно перевірено.",
+            "error_message": "Не вдалося перевірити домен. Будь ласка, спробуйте ще раз."
+          }
+        },
+        "delete_domain": {
+          "title": "Видалити домен",
+          "description": {
+            "prefix": "Ви впевнені, що хочете видалити",
+            "suffix": "? Цю дію неможливо скасувати."
+          },
+          "primary_button_text": "Видалити",
+          "primary_button_loading_text": "Видалення",
+          "secondary_button_text": "Скасувати",
+          "toast": {
+            "success_title": "Успіх!",
+            "success_message": "Домен успішно видалено.",
+            "error_message": "Не вдалося видалити домен. Будь ласка, спробуйте ще раз."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Єдиний вхід",
+      "disabled_message": "Додайте перевірений домен для налаштування SSO",
+      "configure": {
+        "create": "Налаштувати",
+        "update": "Редагувати"
+      },
+      "switch_alert_modal": {
+        "title": "Перемкнути метод SSO на {newProviderShortName}?",
+        "content": "Ви збираєтеся увімкнути {newProviderLongName} ({newProviderShortName}). Ця дія автоматично вимкне {activeProviderLongName} ({activeProviderShortName}). Користувачі, які намагаються увійти через {activeProviderShortName}, більше не зможуть отримати доступ до платформи, поки не перемкнуться на новий метод. Ви впевнені, що хочете продовжити?",
+        "primary_button_text": "Перемкнути",
+        "primary_button_text_loading": "Перемикання",
+        "secondary_button_text": "Скасувати"
+      },
+      "form_section": {
+        "title": "Деталі, надані IdP для {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Збереження",
+        "save_changes": "Зберегти зміни",
+        "configure_only": "Тільки налаштування",
+        "configure_and_enable": "Налаштувати та увімкнути",
+        "default": "Зберегти"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} деталі, надані для вашого IdP",
+        "button_text": "Отримати деталі налаштування"
+      },
+      "saml": {
+        "header": "Увімкнути SAML",
+        "description": "Налаштуйте свого постачальника ідентичності SAML для ввімкнення єдиного входу.",
+        "configure": {
+          "title": "Увімкнути SAML",
+          "description": "Перевірте право власності на домен електронної пошти для доступу до функцій безпеки, включаючи єдиний вхід.",
+          "toast": {
+            "success_title": "Успіх!",
+            "create_success_message": "Постачальник SAML успішно створено.",
+            "update_success_message": "Постачальник SAML успішно оновлено.",
+            "error_title": "Помилка!",
+            "error_message": "Не вдалося зберегти постачальника SAML. Будь ласка, спробуйте ще раз."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Веб-деталі",
+            "entity_id": {
+              "label": "ID сутності | Аудиторія | Інформація про метадані",
+              "description": "Ми згенеруємо цю частину метаданих, яка ідентифікує цю програму Plane як авторизований сервіс у вашому IdP."
+            },
+            "callback_url": {
+              "label": "URL єдиного входу",
+              "description": "Ми згенеруємо це для вас. Додайте це в поле URL перенаправлення входу вашого IdP."
+            },
+            "logout_url": {
+              "label": "URL єдиного виходу",
+              "description": "Ми згенеруємо це для вас. Додайте це в поле URL перенаправлення єдиного виходу вашого IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Мобільні деталі",
+            "entity_id": {
+              "label": "ID сутності | Аудиторія | Інформація про метадані",
+              "description": "Ми згенеруємо цю частину метаданих, яка ідентифікує цю програму Plane як авторизований сервіс у вашому IdP."
+            },
+            "callback_url": {
+              "label": "URL єдиного входу",
+              "description": "Ми згенеруємо це для вас. Додайте це в поле URL перенаправлення входу вашого IdP."
+            },
+            "logout_url": {
+              "label": "URL єдиного виходу",
+              "description": "Ми згенеруємо це для вас. Додайте це в поле URL перенаправлення виходу вашого IdP."
+            }
+          },
+          "mapping_table": {
+            "header": "Деталі відображення",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Увімкнути OIDC",
+        "description": "Налаштуйте свого постачальника ідентичності OIDC для ввімкнення єдиного входу.",
+        "configure": {
+          "title": "Увімкнути OIDC",
+          "description": "Перевірте право власності на домен електронної пошти для доступу до функцій безпеки, включаючи єдиний вхід.",
+          "toast": {
+            "success_title": "Успіх!",
+            "create_success_message": "Постачальник OIDC успішно створено.",
+            "update_success_message": "Постачальник OIDC успішно оновлено.",
+            "error_title": "Помилка!",
+            "error_message": "Не вдалося зберегти постачальника OIDC. Будь ласка, спробуйте ще раз."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Веб-деталі",
+            "origin_url": {
+              "label": "URL джерела",
+              "description": "Ми згенеруємо це для цієї програми Plane. Додайте це як надійне джерело у відповідне поле вашого IdP."
+            },
+            "callback_url": {
+              "label": "URL перенаправлення",
+              "description": "Ми згенеруємо це для вас. Додайте це в поле URL перенаправлення входу вашого IdP."
+            },
+            "logout_url": {
+              "label": "URL виходу",
+              "description": "Ми згенеруємо це для вас. Додайте це в поле URL перенаправлення виходу вашого IdP."
+            }
+          },
+          "mobile_details": {
+            "header": "Мобільні деталі",
+            "origin_url": {
+              "label": "URL джерела",
+              "description": "Ми згенеруємо це для цієї програми Plane. Додайте це як надійне джерело у відповідне поле вашого IdP."
+            },
+            "callback_url": {
+              "label": "URL перенаправлення",
+              "description": "Ми згенеруємо це для вас. Додайте це в поле URL перенаправлення входу вашого IdP."
+            },
+            "logout_url": {
+              "label": "URL виходу",
+              "description": "Ми згенеруємо це для вас. Додайте це в поле URL перенаправлення виходу вашого IdP."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "Електронна пошта",
+        "placeholder": "ім'я@компанія.ua",
+        "errors": {
+          "required": "Електронна пошта є обов'язковою",
+          "invalid": "Неправильна адреса електронної пошти"
+        }
+      },
+      "password": {
+        "label": "Пароль",
+        "set_password": "Встановити пароль",
+        "placeholder": "Введіть пароль",
+        "confirm_password": {
+          "label": "Підтвердіть пароль",
+          "placeholder": "Підтвердіть пароль"
+        },
+        "current_password": {
+          "label": "Поточний пароль"
+        },
+        "new_password": {
+          "label": "Новий пароль",
+          "placeholder": "Введіть новий пароль"
+        },
+        "change_password": {
+          "label": {
+            "default": "Змінити пароль",
+            "submitting": "Зміна пароля"
+          }
+        },
+        "errors": {
+          "match": "Паролі не співпадають",
+          "empty": "Будь ласка, введіть свій пароль",
+          "length": "Довжина пароля має бути більше 8 символів",
+          "strength": {
+            "weak": "Пароль занадто слабкий",
+            "strong": "Пароль надійний"
+          }
+        },
+        "submit": "Встановити пароль",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Успіх!",
+              "message": "Пароль було успішно змінено."
+            },
+            "error": {
+              "title": "Помилка!",
+              "message": "Щось пішло не так. Будь ласка, спробуйте ще раз."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Унікальний код",
+        "placeholder": "123456",
+        "paste_code": "Вставте код, надісланий на вашу електронну пошту",
+        "requesting_new_code": "Запитую новий код",
+        "sending_code": "Надсилаю код"
+      },
+      "already_have_an_account": "Вже маєте обліковий запис?",
+      "login": "Увійти",
+      "create_account": "Створити обліковий запис",
+      "new_to_plane": "Вперше в Plane?",
+      "back_to_sign_in": "Повернутися до входу",
+      "resend_in": "Надіслати повторно через {seconds} секунд",
+      "sign_in_with_unique_code": "Увійти за допомогою унікального коду",
+      "forgot_password": "Забули пароль?",
+      "username": {
+        "label": "Ім'я користувача",
+        "placeholder": "Введіть ваше ім'я користувача"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Створіть обліковий запис і почніть керувати роботою зі своєю командою.",
+        "step": {
+          "email": {
+            "header": "Реєстрація",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Реєстрація",
+            "sub_header": "Зареєструйтесь, використовуючи комбінацію електронної пошти та пароля."
+          },
+          "unique_code": {
+            "header": "Реєстрація",
+            "sub_header": "Зареєструйтесь за допомогою унікального коду, надісланого на вказану вище адресу електронної пошти."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Спробуйте встановити надійний пароль, щоб продовжити"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Увійдіть і почніть керувати роботою зі своєю командою.",
+        "step": {
+          "email": {
+            "header": "Увійти або зареєструватись",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Увійти або зареєструватись",
+            "sub_header": "Використовуйте комбінацію електронної пошти та пароля, щоб увійти."
+          },
+          "unique_code": {
+            "header": "Увійти або зареєструватись",
+            "sub_header": "Увійдіть за допомогою унікального коду, надісланого на вказану вище адресу електронної пошти."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Відновіть свій пароль",
+      "description": "Введіть підтверджену адресу електронної пошти вашого облікового запису, і ми надішлемо вам посилання для відновлення пароля.",
+      "email_sent": "Ми надіслали посилання для відновлення на вашу електронну пошту",
+      "send_reset_link": "Надіслати посилання для відновлення",
+      "errors": {
+        "smtp_not_enabled": "Адміністратор не активував SMTP, тому неможливо надіслати посилання для відновлення пароля"
+      },
+      "toast": {
+        "success": {
+          "title": "Лист надіслано",
+          "message": "Перевірте свою пошту для відновлення пароля. Якщо не отримали протягом кількох хвилин, перевірте папку «Спам»."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Щось пішло не так. Будь ласка, спробуйте ще раз."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Встановити новий пароль",
+      "description": "Захистіть свій обліковий запис надійним паролем"
+    },
+    "set_password": {
+      "title": "Захистіть свій обліковий запис",
+      "description": "Встановлення пароля допоможе безпечно входити у систему"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося вийти. Спробуйте знову."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Продовжити з {ldapProviderName}",
+        "sub_header": "Введіть ваші облікові дані {ldapProviderName}"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/automation.json b/packages/i18n/src/locales/ua/automation.json
new file mode 100644
index 0000000..25a1f98
--- /dev/null
+++ b/packages/i18n/src/locales/ua/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Користувацькі автоматизації",
+      "create_automation": "Створити автоматизацію"
+    },
+    "scope": {
+      "label": "Область",
+      "run_on": "Запустити на"
+    },
+    "trigger": {
+      "label": "Тригер",
+      "add_trigger": "Додати тригер",
+      "sidebar_header": "Конфігурація тригера",
+      "input_label": "Який тригер для цієї автоматизації?",
+      "input_placeholder": "Виберіть опцію",
+      "section_plane_events": "Події Plane",
+      "section_time_based": "За часом",
+      "fixed_schedule": "Фіксований розклад",
+      "schedule": {
+        "frequency": "Частота",
+        "select_day": "Вибрати день",
+        "day_of_month": "День місяця",
+        "monthly_every": "Кожен",
+        "monthly_day_aria": "День {day}",
+        "time": "Час",
+        "hour": "Година",
+        "minute": "Хвилина",
+        "hour_suffix": "год",
+        "minute_suffix": "хв",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Часовий пояс",
+        "timezone_placeholder": "Виберіть часовий пояс",
+        "frequency_daily": "Щодня",
+        "frequency_weekly": "Щотижня",
+        "frequency_monthly": "Щомісяця",
+        "on": "У",
+        "validation_weekly_day_required": "Виберіть принаймні один день тижня.",
+        "validation_monthly_date_required": "Виберіть день місяця.",
+        "main_content_schedule_summary_daily": "Щодня о {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Щотижня у {days} о {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Щомісяця в день {day} о {time} ({timezone}).",
+        "schedule_mode": "Режим розкладу",
+        "schedule_mode_fixed": "Фіксований",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Введіть Cron-вираз",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Недійсний Cron-вираз.",
+        "cron_preview": "Цей Cron-вираз запускає \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Назад",
+        "next": "Додати дію"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Неможливо змінити тип тригера після створення"
+      }
+    },
+    "condition": {
+      "label": "За умови",
+      "add_condition": "Додати умову",
+      "adding_condition": "Додавання умови"
+    },
+    "action": {
+      "label": "Дія",
+      "add_action": "Додати дію",
+      "sidebar_header": "Дії",
+      "input_label": "Що робить автоматизація?",
+      "input_placeholder": "Виберіть опцію",
+      "handler_name": {
+        "add_comment": "Додати коментар",
+        "change_property": "Змінити властивість",
+        "run_script": "Запустити скрипт"
+      },
+      "configuration": {
+        "label": "Конфігурація",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Виберіть властивість",
+            "change_type": "Вибрати",
+            "property_value_select": "{count, plural, one{Вибрати значення} few{Вибрати значення} other{Вибрати значення}}",
+            "property_value_select_date": "Вибрати дату"
+          },
+          "validation": {
+            "property_name_required": "Назва властивості обов'язкова",
+            "change_type_required": "Тип зміни обов'язковий",
+            "property_value_required": "Значення властивості обов'язкове"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Додати коментар"
+      },
+      "run_script_block": {
+        "title": "Запустити скрипт"
+      },
+      "change_property_block": {
+        "title": "Змінити властивість"
+      },
+      "validation": {
+        "delete_only_action": "Вимкніть автоматизацію перед видаленням її єдиної дії."
+      }
+    },
+    "conjunctions": {
+      "and": "І",
+      "or": "Або",
+      "if": "Якщо",
+      "then": "Тоді"
+    },
+    "enable": {
+      "alert": "Натисніть 'Увімкнути', коли ваша автоматизація буде завершена. Після увімкнення автоматизація буде готова до запуску.",
+      "validation": {
+        "required": "Автоматизація повинна мати тригер і принаймні одну дію, щоб бути увімкненою."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Автоматизація повинна бути вимкнена перед її видаленням."
+      }
+    },
+    "table": {
+      "title": "Назва автоматизації",
+      "scope": "Область",
+      "projects": "Проекти",
+      "last_run_on": "Останній запуск",
+      "created_on": "Створено",
+      "last_updated_on": "Останнє оновлення",
+      "last_run_status": "Статус останнього запуску",
+      "average_duration": "Середня тривалість",
+      "owner": "Власник",
+      "executions": "Виконання"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Створити автоматизацію",
+        "update": "Оновити автоматизацію"
+      },
+      "title": {
+        "placeholder": "Назвіть вашу автоматизацію.",
+        "required_error": "Назва обов'язкова"
+      },
+      "description": {
+        "placeholder": "Опишіть вашу автоматизацію."
+      },
+      "submit_button": {
+        "create": "Створити автоматизацію",
+        "update": "Оновити автоматизацію"
+      }
+    },
+    "delete_modal": {
+      "heading": "Видалити автоматизацію"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Показати помилки",
+        "all": "Всі",
+        "only_activity": "Тільки активність",
+        "only_run_history": "Тільки історія запусків"
+      },
+      "run_history": {
+        "initiator": "Ініціатор"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Успішно!",
+          "message": "Автоматизація успішно створена."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося створити автоматизацію."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Успішно!",
+          "message": "Автоматизація успішно оновлена."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося оновити автоматизацію."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Успішно!",
+          "message": "Автоматизація успішно увімкнена."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося увімкнути автоматизацію."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Успішно!",
+          "message": "Автоматизація успішно вимкнена."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося вимкнути автоматизацію."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Автоматизація видалена",
+          "message": "{name}, автоматизація, тепер видалена з вашого проекту."
+        },
+        "error": {
+          "title": "Не вдалося видалити цю автоматизацію цього разу.",
+          "message": "Спробуйте видалити її знову або поверніться до неї пізніше. Якщо не вдається видалити, зверніться до нас."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Помилка!",
+            "message": "Не вдалося створити дію. Будь ласка, спробуйте ще раз!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Помилка!",
+            "message": "Не вдалося оновити дію. Будь ласка, спробуйте ще раз!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Поки що немає автоматизацій для показу.",
+        "description": "Автоматизації допомагають усунути повторювані завдання шляхом налаштування тригерів, умов та дій. Створіть одну, щоб заощадити час і підтримувати роботу без зусиль."
+      },
+      "upgrade": {
+        "title": "Автоматизації",
+        "description": "Автоматизації - це спосіб автоматизувати завдання у вашому проекті.",
+        "sub_description": "Поверніть 80% свого адміністративного часу, коли використовуєте автоматизації."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Виберіть проекти для запуску цієї автоматизації",
+        "all_projects": {
+          "label": "Усі проекти",
+          "description": "Автоматизація буде запущена для всіх проектів у робочому просторі."
+        },
+        "select_projects": {
+          "label": "Вибрати проекти",
+          "description": "Автоматизація буде запущена для вибраних проектів у робочому просторі.",
+          "placeholder": "Вибрати проекти"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Автоматизації",
+        "title": "Автоматизації",
+        "description": "Стандартизуйте процеси у вашому робочому просторі за допомогою глобальних автоматизацій."
+      },
+      "table": {
+        "scope": {
+          "global": "Глобальна",
+          "project": {
+            "label": "Проект",
+            "multiple": "Декілька",
+            "all": "Усі"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/common.json b/packages/i18n/src/locales/ua/common.json
new file mode 100644
index 0000000..89bd906
--- /dev/null
+++ b/packages/i18n/src/locales/ua/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Ми працюємо над цим. Якщо вам потрібна негайна допомога,",
+    "reach_out_to_us": "зв'яжіться з нами",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Інакше спробуйте періодично оновлювати сторінку або відвідайте нашу",
+    "status_page": "сторінку статусу"
+  },
+  "submit": "Надіслати",
+  "cancel": "Скасувати",
+  "loading": "Завантаження",
+  "error": "Помилка",
+  "success": "Успіх",
+  "warning": "Попередження",
+  "info": "Інформація",
+  "close": "Закрити",
+  "yes": "Так",
+  "no": "Ні",
+  "ok": "OK",
+  "name": "Назва",
+  "unknown_user": "Невідомий користувач",
+  "description": "Опис",
+  "search": "Пошук",
+  "add_member": "Додати учасника",
+  "adding_members": "Додавання учасників",
+  "remove_member": "Видалити учасника",
+  "add_members": "Додати учасників",
+  "adding_member": "Додавання учасників",
+  "remove_members": "Видалити учасників",
+  "add": "Додати",
+  "adding": "Додавання",
+  "remove": "Вилучити",
+  "add_new": "Додати новий",
+  "remove_selected": "Вилучити вибрані",
+  "first_name": "Ім'я",
+  "last_name": "Прізвище",
+  "email": "Електронна пошта",
+  "display_name": "Відображуване ім'я",
+  "role": "Роль",
+  "timezone": "Часовий пояс",
+  "avatar": "Аватар",
+  "cover_image": "Обкладинка",
+  "password": "Пароль",
+  "change_cover": "Змінити обкладинку",
+  "language": "Мова",
+  "saving": "Збереження",
+  "save_changes": "Зберегти зміни",
+  "deactivate_account": "Деактивувати обліковий запис",
+  "deactivate_account_description": "Після деактивації всі дані й ресурси цього облікового запису будуть видалені без можливості відновлення.",
+  "profile_settings": "Налаштування профілю",
+  "your_account": "Ваш обліковий запис",
+  "security": "Безпека",
+  "activity": "Активність",
+  "activity_empty_state": {
+    "no_activity": "Ще немає активності",
+    "no_transitions": "Ще немає переходів",
+    "no_comments": "Коментарів ще немає",
+    "no_worklogs": "Записів роботи ще немає",
+    "no_history": "Історії ще немає"
+  },
+  "preferences": "Налаштування",
+  "language_and_time": "Мова та час",
+  "notifications": "Сповіщення",
+  "workspaces": "Робочі простори",
+  "create_workspace": "Створити робочий простір",
+  "invitations": "Запрошення",
+  "summary": "Зведення",
+  "assigned": "Призначено",
+  "created": "Створено",
+  "subscribed": "Підписано",
+  "you_do_not_have_the_permission_to_access_this_page": "Ви не маєте прав доступу до цієї сторінки.",
+  "something_went_wrong_please_try_again": "Щось пішло не так. Будь ласка, спробуйте ще раз.",
+  "load_more": "Завантажити ще",
+  "select_or_customize_your_interface_color_scheme": "Виберіть або налаштуйте колірну схему інтерфейсу.",
+  "timezone_setting": "Поточне налаштування часового поясу.",
+  "language_setting": "Виберіть мову, яку буде використано в інтерфейсі користувача.",
+  "settings_moved_to_preferences": "Налаштування часового поясу та мови переміщено до розділу Налаштування.",
+  "go_to_preferences": "Перейти до налаштувань",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Виберіть стиль руху курсору, який вам підходить.",
+  "theme": "Тема",
+  "smooth_cursor": "Плавний курсор",
+  "system_preference": "Системні налаштування",
+  "light": "Світла",
+  "dark": "Темна",
+  "light_contrast": "Світла з високою контрастністю",
+  "dark_contrast": "Темна з високою контрастністю",
+  "custom": "Користувацька тема",
+  "select_your_theme": "Виберіть тему",
+  "customize_your_theme": "Налаштуйте свою тему",
+  "background_color": "Колір фону",
+  "text_color": "Колір тексту",
+  "primary_color": "Основний колір (тема)",
+  "sidebar_background_color": "Колір фону бічної панелі",
+  "sidebar_text_color": "Колір тексту бічної панелі",
+  "set_theme": "Застосувати тему",
+  "enter_a_valid_hex_code_of_6_characters": "Введіть дійсний hex-код довжиною 6 символів",
+  "background_color_is_required": "Колір фону є обов'язковим",
+  "text_color_is_required": "Колір тексту є обов'язковим",
+  "primary_color_is_required": "Основний колір є обов'язковим",
+  "sidebar_background_color_is_required": "Колір фону бічної панелі є обов'язковим",
+  "sidebar_text_color_is_required": "Колір тексту бічної панелі є обов'язковим",
+  "updating_theme": "Оновлення теми",
+  "theme_updated_successfully": "Тему успішно оновлено",
+  "failed_to_update_the_theme": "Не вдалося оновити тему",
+  "email_notifications": "Сповіщення електронною поштою",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Будьте в курсі робочих одиниць, на які ви підписані. Увімкніть це, щоб отримувати сповіщення.",
+  "email_notification_setting_updated_successfully": "Налаштування сповіщень електронною поштою успішно оновлено",
+  "failed_to_update_email_notification_setting": "Не вдалося оновити налаштування сповіщень електронною поштою",
+  "notify_me_when": "Повідомляти мене, коли",
+  "property_changes": "Зміни властивостей",
+  "property_changes_description": "Повідомляти, коли змінюються властивості робочих одиниць, такі як призначення, пріоритет, оцінки чи інші.",
+  "state_change": "Зміна стану",
+  "state_change_description": "Повідомляти, коли робоча одиниця переходить в інший стан",
+  "issue_completed": "Робоча одиниця завершена",
+  "issue_completed_description": "Повідомляти лише коли робоча одиниця завершена",
+  "comments": "Коментарі",
+  "comments_description": "Повідомляти, коли хтось додає коментар до робочої одиниці",
+  "mentions": "Згадки",
+  "mentions_description": "Повідомляти лише коли хтось згадає мене у коментарі чи описі",
+  "old_password": "Старий пароль",
+  "general_settings": "Загальні налаштування",
+  "sign_out": "Вийти",
+  "signing_out": "Вихід",
+  "active_cycles": "Активні цикли",
+  "active_cycles_description": "Відстежуйте цикли між проєктами, слідкуйте за пріоритетними робочими одиницями та звертайте увагу на цикли, які потребують втручання.",
+  "on_demand_snapshots_of_all_your_cycles": "Знімки всіх ваших циклів на вимогу",
+  "upgrade": "Підвищити",
+  "10000_feet_view": "Огляд з висоти 10 000 футів для всіх активних циклів.",
+  "10000_feet_view_description": "Переглядайте всі поточні цикли у різних проєктах одночасно, замість перемикання між ними в кожному проєкті.",
+  "get_snapshot_of_each_active_cycle": "Отримайте знімок кожного активного циклу.",
+  "get_snapshot_of_each_active_cycle_description": "Відстежуйте ключові метрики для всіх активних циклів, переглядайте їхній прогрес і порівнюйте обсяг із крайніми строками.",
+  "compare_burndowns": "Порівнюйте burndown-графіки.",
+  "compare_burndowns_description": "Контролюйте ефективність команд за допомогою огляду burndown-звітів кожного циклу.",
+  "quickly_see_make_or_break_issues": "Швидко визначайте критичні робочі одиниці.",
+  "quickly_see_make_or_break_issues_description": "Переглядайте найпріоритетніші робочі одиниці для кожного циклу з урахуванням термінів. Усе за один клік.",
+  "zoom_into_cycles_that_need_attention": "Зосередьтеся на циклах, що потребують уваги.",
+  "zoom_into_cycles_that_need_attention_description": "Одним кліком вивчайте стан будь-якого циклу, який не відповідає очікуванням.",
+  "stay_ahead_of_blockers": "Вчасно виявляйте перешкоди.",
+  "stay_ahead_of_blockers_description": "Виявляйте проблеми між проєктами та залежності між циклами, які неочевидні в інших поданнях.",
+  "analytics": "Аналітика",
+  "workspace_invites": "Запрошення до робочого простору",
+  "enter_god_mode": "Увійти в режим Бога",
+  "workspace_logo": "Логотип робочого простору",
+  "new_issue": "Нова робоча одиниця",
+  "your_work": "Ваша робота",
+  "drafts": "Чернетки",
+  "projects": "Проєкти",
+  "views": "Подання",
+  "archives": "Архіви",
+  "settings": "Налаштування",
+  "failed_to_move_favorite": "Не вдалося перемістити обране",
+  "favorites": "Вибране",
+  "no_favorites_yet": "Поки немає вибраного",
+  "create_folder": "Створити папку",
+  "new_folder": "Нова папка",
+  "favorite_updated_successfully": "Вибране успішно оновлено",
+  "favorite_created_successfully": "Вибране успішно створено",
+  "folder_already_exists": "Папка вже існує",
+  "folder_name_cannot_be_empty": "Назва папки не може бути порожньою",
+  "something_went_wrong": "Щось пішло не так",
+  "failed_to_reorder_favorite": "Не вдалося змінити порядок елементів у вибраному",
+  "favorite_removed_successfully": "Вибране успішно видалено",
+  "failed_to_create_favorite": "Не вдалося створити вибране",
+  "failed_to_rename_favorite": "Не вдалося перейменувати вибране",
+  "project_link_copied_to_clipboard": "Посилання на проєкт скопійовано до буфера обміну",
+  "link_copied": "Посилання скопійовано",
+  "add_project": "Додати проєкт",
+  "create_project": "Створити проєкт",
+  "failed_to_remove_project_from_favorites": "Не вдалося видалити проєкт із вибраного. Спробуйте ще раз.",
+  "project_created_successfully": "Проєкт успішно створено",
+  "project_created_successfully_description": "Проєкт успішно створений. Тепер ви можете почати додавати робочі одиниці.",
+  "project_name_already_taken": "Назва проекту вже використовується.",
+  "project_name_cannot_contain_special_characters": "Назва проєкту не може містити спеціальні символи.",
+  "project_identifier_already_taken": "Ідентифікатор проекту вже використовується.",
+  "project_cover_image_alt": "Обкладинка проєкту",
+  "name_is_required": "Назва є обов'язковою",
+  "title_should_be_less_than_255_characters": "Назва має бути коротшою за 255 символів",
+  "project_name": "Назва проєкту",
+  "project_id_must_be_at_least_1_character": "Ідентифікатор проєкту має містити принаймні 1 символ",
+  "project_id_must_be_at_most_5_characters": "Ідентифікатор проєкту може містити максимум 5 символів",
+  "project_id": "ID проєкту",
+  "project_id_tooltip_content": "Допомагає унікально ідентифікувати робочі одиниці в проєкті. Макс. 50 символів.",
+  "description_placeholder": "Опис",
+  "only_alphanumeric_non_latin_characters_allowed": "Дозволені лише алфанумеричні та нелатинські символи.",
+  "project_id_is_required": "ID проєкту є обов'язковим",
+  "project_id_allowed_char": "Дозволені лише алфанумеричні та нелатинські символи.",
+  "project_id_min_char": "ID проєкту має містити принаймні 1 символ",
+  "project_id_max_char": "ID проєкту може містити максимум {max} символів",
+  "project_description_placeholder": "Введіть опис проєкту",
+  "select_network": "Вибрати мережу",
+  "lead": "Керівник",
+  "date_range": "Діапазон дат",
+  "private": "Приватний",
+  "public": "Публічний",
+  "accessible_only_by_invite": "Доступ лише за запрошенням",
+  "anyone_in_the_workspace_except_guests_can_join": "Будь-хто в робочому просторі, крім гостей, може приєднатися",
+  "creating": "Створення",
+  "creating_project": "Створення проєкту",
+  "adding_project_to_favorites": "Додавання проєкту у вибране",
+  "project_added_to_favorites": "Проєкт додано у вибране",
+  "couldnt_add_the_project_to_favorites": "Не вдалося додати проєкт у вибране. Спробуйте ще раз.",
+  "removing_project_from_favorites": "Вилучення проєкту з вибраного",
+  "project_removed_from_favorites": "Проєкт вилучено з вибраного",
+  "couldnt_remove_the_project_from_favorites": "Не вдалося вилучити проєкт із вибраного. Спробуйте ще раз.",
+  "add_to_favorites": "Додати у вибране",
+  "remove_from_favorites": "Вилучити з вибраного",
+  "publish_project": "Опублікувати проєкт",
+  "publish": "Опублікувати",
+  "copy_link": "Скопіювати посилання",
+  "leave_project": "Вийти з проєкту",
+  "join_the_project_to_rearrange": "Приєднайтеся до проєкту, щоб змінити впорядкування",
+  "drag_to_rearrange": "Перетягніть для впорядкування",
+  "congrats": "Вітаємо!",
+  "open_project": "Відкрити проєкт",
+  "issues": "Робочі одиниці",
+  "cycles": "Цикли",
+  "modules": "Модулі",
+  "pages": "Сторінки",
+  "intake": "Надходження",
+  "renew": "Оновити",
+  "preview": "Попередній перегляд",
+  "time_tracking": "Відстеження часу",
+  "work_management": "Управління роботою",
+  "projects_and_issues": "Проєкти та робочі одиниці",
+  "projects_and_issues_description": "Увімкніть або вимкніть ці функції в проєкті.",
+  "cycles_description": "Обмежуйте роботу в часі для кожного проєкту та за потреби коригуйте період. Один цикл може тривати 2 тижні, наступний — 1 тиждень.",
+  "modules_description": "Організуйте роботу в підпроєкти з окремими керівниками та виконавцями.",
+  "views_description": "Зберігайте власні сортування, фільтри та варіанти відображення або діліться ними з командою.",
+  "pages_description": "Створюйте та редагуйте довільний вміст: нотатки, документи, що завгодно.",
+  "intake_description": "Дозвольте неучасникам ділитися помилками, відгуками й пропозиціями без порушення робочого процесу.",
+  "time_tracking_description": "Фіксуйте час, витрачений на робочі одиниці та проєкти.",
+  "work_management_description": "Зручно керуйте своєю роботою та проєктами.",
+  "documentation": "Документація",
+  "message_support": "Звернутися в підтримку",
+  "contact_sales": "Зв'язатися з відділом продажів",
+  "hyper_mode": "Гіпер-режим",
+  "keyboard_shortcuts": "Гарячі клавіші",
+  "whats_new": "Що нового?",
+  "version": "Версія",
+  "we_are_having_trouble_fetching_the_updates": "Виникли проблеми з отриманням оновлень.",
+  "our_changelogs": "наш журнал змін",
+  "for_the_latest_updates": "для найсвіжіших оновлень.",
+  "please_visit": "Будь ласка, відвідайте",
+  "docs": "Документацію",
+  "full_changelog": "Повний журнал змін",
+  "support": "Підтримка",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Працює на Plane Pages",
+  "please_select_at_least_one_invitation": "Виберіть принаймні одне запрошення.",
+  "please_select_at_least_one_invitation_description": "Виберіть принаймні одне запрошення, щоб приєднатися до робочого простору.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Ми бачимо, що вас запросили приєднатися до робочого простору",
+  "join_a_workspace": "Приєднатися до робочого простору",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Ми бачимо, що вас запросили приєднатися до робочого простору",
+  "join_a_workspace_description": "Приєднатися до робочого простору",
+  "accept_and_join": "Прийняти та приєднатися",
+  "go_home": "Головна",
+  "no_pending_invites": "Немає активних запрошень",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Тут з'являтимуться запрошення до робочого простору",
+  "back_to_home": "Повернутися на головну",
+  "workspace_name": "назва-робочого-простору",
+  "deactivate_your_account": "Деактивувати ваш обліковий запис",
+  "deactivate_your_account_description": "Після деактивації вас не можна буде призначати на робочі одиниці, і з вас не стягуватиметься плата за робочий простір. Щоб знову активувати обліковий запис, потрібно отримати запрошення на цей e-mail.",
+  "deactivating": "Деактивація",
+  "confirm": "Підтвердити",
+  "confirming": "Підтвердження",
+  "draft_created": "Чернетку створено",
+  "issue_created_successfully": "Робочу одиницю успішно створено",
+  "draft_creation_failed": "Не вдалося створити чернетку",
+  "issue_creation_failed": "Не вдалося створити робочу одиницю",
+  "draft_issue": "Чернетка робочої одиниці",
+  "issue_updated_successfully": "Робочу одиницю успішно оновлено",
+  "issue_could_not_be_updated": "Не вдалося оновити робочу одиницю",
+  "create_a_draft": "Створити чернетку",
+  "save_to_drafts": "Зберегти до чернеток",
+  "save": "Зберегти",
+  "update": "Оновити",
+  "updating": "Оновлення",
+  "create_new_issue": "Створити нову робочу одиницю",
+  "editor_is_not_ready_to_discard_changes": "Редактор ще не готовий скасувати зміни",
+  "failed_to_move_issue_to_project": "Не вдалося перемістити робочу одиницю до проєкту",
+  "create_more": "Створити ще",
+  "add_to_project": "Додати до проєкту",
+  "discard": "Скасувати",
+  "duplicate_issue_found": "Знайдено дублікат робочої одиниці",
+  "duplicate_issues_found": "Знайдено дублікати робочих одиниць",
+  "no_matching_results": "Немає відповідних результатів",
+  "title_is_required": "Назва є обов'язковою",
+  "title": "Назва",
+  "state": "Стан",
+  "transition": "Перехід",
+  "history": "Історія",
+  "priority": "Пріоритет",
+  "none": "Немає",
+  "urgent": "Терміновий",
+  "high": "Високий",
+  "medium": "Середній",
+  "low": "Низький",
+  "members": "Учасники",
+  "assignee": "Призначено",
+  "assignees": "Призначені",
+  "subscriber": "{count, plural, one{# Підписник} other{# Підписників}}",
+  "you": "Ви",
+  "labels": "Мітки",
+  "create_new_label": "Створити нову мітку",
+  "label_name": "Назва мітки",
+  "failed_to_create_label": "Не вдалося створити мітку. Будь ласка, спробуйте ще раз.",
+  "start_date": "Дата початку",
+  "end_date": "Дата завершення",
+  "due_date": "Крайній термін",
+  "target_date": "Цільова дата",
+  "estimate": "Оцінка",
+  "change_parent_issue": "Змінити батьківську робочу одиницю",
+  "remove_parent_issue": "Вилучити батьківську робочу одиницю",
+  "add_parent": "Додати батьківську",
+  "loading_members": "Завантаження учасників",
+  "view_link_copied_to_clipboard": "Посилання на подання скопійовано до буфера обміну.",
+  "required": "Обов'язково",
+  "optional": "Необов'язково",
+  "Cancel": "Скасувати",
+  "edit": "Редагувати",
+  "archive": "Заархівувати",
+  "restore": "Відновити",
+  "open_in_new_tab": "Відкрити в новій вкладці",
+  "delete": "Видалити",
+  "deleting": "Видалення",
+  "make_a_copy": "Зробити копію",
+  "move_to_project": "Перемістити в проєкт",
+  "good": "Доброго",
+  "morning": "ранку",
+  "afternoon": "дня",
+  "evening": "вечора",
+  "show_all": "Показати все",
+  "show_less": "Показати менше",
+  "no_data_yet": "Поки що немає даних",
+  "syncing": "Синхронізація",
+  "add_work_item": "Додати робочу одиницю",
+  "advanced_description_placeholder": "Натисніть '/' для команд",
+  "create_work_item": "Створити робочу одиницю",
+  "attachments": "Вкладення",
+  "declining": "Відхилення",
+  "declined": "Відхилено",
+  "decline": "Відхилити",
+  "unassigned": "Не призначено",
+  "work_items": "Робочі одиниці",
+  "add_link": "Додати посилання",
+  "points": "Бали",
+  "no_assignee": "Без призначення",
+  "no_assignees_yet": "Поки немає призначених",
+  "no_labels_yet": "Поки немає міток",
+  "ideal": "Ідеальний",
+  "current": "Поточний",
+  "no_matching_members": "Немає відповідних учасників",
+  "leaving": "Вихід",
+  "removing": "Вилучення",
+  "leave": "Вийти",
+  "refresh": "Оновити",
+  "refreshing": "Оновлення",
+  "refresh_status": "Оновити статус",
+  "prev": "Попередній",
+  "next": "Наступний",
+  "re_generating": "Повторне генерування",
+  "re_generate": "Повторно згенерувати",
+  "re_generate_key": "Повторно згенерувати ключ",
+  "export": "Експортувати",
+  "member": "{count, plural, one{# учасник} few{# учасники} other{# учасників}}",
+  "new_password_must_be_different_from_old_password": "Новий пароль повинен бути відмінним від старого пароля",
+  "edited": "Редагувано",
+  "bot": "Бот",
+  "settings_description": "Керуйте налаштуваннями облікового запису, робочого простору та проєкту в одному місці. Перемикайтеся між вкладками для зручного налаштування.",
+  "back_to_workspace": "Повернутися до робочого простору",
+  "upgrade_request": "Попросіть адміністратора робочого простору виконати оновлення.",
+  "copied_to_clipboard": "Скопійовано в буфер обміну",
+  "copied_to_clipboard_description": "URL успішно скопійовано в буфер обміну",
+  "toast": {
+    "success": "Успіх!",
+    "error": "Помилка!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Посилання створено",
+        "message": "Посилання було успішно створено"
+      },
+      "not_created": {
+        "title": "Посилання не створено",
+        "message": "Не вдалося створити посилання"
+      },
+      "updated": {
+        "title": "Посилання оновлено",
+        "message": "Посилання було успішно оновлено"
+      },
+      "not_updated": {
+        "title": "Посилання не оновлено",
+        "message": "Не вдалося оновити посилання"
+      },
+      "removed": {
+        "title": "Посилання видалено",
+        "message": "Посилання було успішно видалено"
+      },
+      "not_removed": {
+        "title": "Посилання не видалено",
+        "message": "Не вдалося видалити посилання"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "Неприпустимий URL",
+        "placeholder": "Введіть або вставте URL"
+      },
+      "title": {
+        "text": "Відображувана назва",
+        "placeholder": "Як ви хочете бачити це посилання"
+      }
+    }
+  },
+  "common": {
+    "all": "Усе",
+    "no_items_in_this_group": "У цій групі немає елементів",
+    "drop_here_to_move": "Перетягніть сюди для переміщення",
+    "states": "Стани",
+    "state": "Стан",
+    "state_groups": "Групи станів",
+    "state_group": "Група станів",
+    "priorities": "Пріоритети",
+    "priority": "Пріоритет",
+    "team_project": "Командний проєкт",
+    "project": "Проєкт",
+    "cycle": "Цикл",
+    "cycles": "Цикли",
+    "module": "Модуль",
+    "modules": "Модулі",
+    "labels": "Мітки",
+    "label": "Мітка",
+    "admins": "Адміністратори",
+    "users": "Користувачі",
+    "guests": "Гості",
+    "assignees": "Призначені",
+    "assignee": "Призначено",
+    "created_by": "Створено",
+    "none": "Немає",
+    "link": "Посилання",
+    "estimates": "Оцінки",
+    "estimate": "Оцінка",
+    "created_at": "Створено",
+    "updated_at": "Оновлено",
+    "completed_at": "Завершено",
+    "layout": "Розташування",
+    "filters": "Фільтри",
+    "display": "Відображення",
+    "load_more": "Завантажити ще",
+    "activity": "Активність",
+    "analytics": "Аналітика",
+    "dates": "Дати",
+    "success": "Успіх!",
+    "something_went_wrong": "Щось пішло не так",
+    "error": {
+      "label": "Помилка!",
+      "message": "Сталася помилка. Спробуйте ще раз."
+    },
+    "group_by": "Групувати за",
+    "epic": "Епік",
+    "epics": "Епіки",
+    "work_item": "Робоча одиниця",
+    "work_items": "Робочі одиниці",
+    "sub_work_item": "Похідна робоча одиниця",
+    "views": "Подання",
+    "pages": "Сторінки",
+    "add": "Додати",
+    "warning": "Попередження",
+    "updating": "Оновлення",
+    "adding": "Додавання",
+    "update": "Оновити",
+    "creating": "Створення",
+    "create": "Створити",
+    "cancel": "Скасувати",
+    "description": "Опис",
+    "title": "Назва",
+    "attachment": "Вкладення",
+    "general": "Загальне",
+    "features": "Функції",
+    "automation": "Автоматизація",
+    "project_name": "Назва проєкту",
+    "project_id": "ID проєкту",
+    "project_timezone": "Часовий пояс проєкту",
+    "created_on": "Створено",
+    "updated_on": "Оновлено",
+    "completed_on": "Completed on",
+    "update_project": "Оновити проєкт",
+    "identifier_already_exists": "Такий ідентифікатор уже існує",
+    "add_more": "Додати ще",
+    "defaults": "Типові",
+    "add_label": "Додати мітку",
+    "customize_time_range": "Налаштувати діапазон часу",
+    "loading": "Завантаження",
+    "attachments": "Вкладення",
+    "property": "Властивість",
+    "properties": "Властивості",
+    "parent": "Батьківська",
+    "page": "Сторінка",
+    "remove": "Вилучити",
+    "archiving": "Архівація",
+    "archive": "Заархівувати",
+    "access": {
+      "public": "Публічний",
+      "private": "Приватний"
+    },
+    "done": "Готово",
+    "sub_work_items": "Похідні робочі одиниці",
+    "comment": "Коментар",
+    "workspace_level": "Рівень робочого простору",
+    "order_by": {
+      "label": "Сортувати за",
+      "manual": "Вручну — Ранг",
+      "last_created": "Останні створені",
+      "last_updated": "Останні оновлені",
+      "start_date": "Дата початку",
+      "due_date": "Крайній термін",
+      "asc": "За зростанням",
+      "desc": "За спаданням",
+      "updated_on": "Оновлено"
+    },
+    "sort": {
+      "asc": "За зростанням",
+      "desc": "За спаданням",
+      "created_on": "Створено",
+      "updated_on": "Оновлено"
+    },
+    "comments": "Коментарі",
+    "updates": "Оновлення",
+    "additional_updates": "Додаткові оновлення",
+    "clear_all": "Очистити все",
+    "copied": "Скопійовано!",
+    "link_copied": "Посилання скопійовано!",
+    "link_copied_to_clipboard": "Посилання скопійовано до буфера обміну",
+    "copied_to_clipboard": "Посилання на робочу одиницю скопійовано до буфера",
+    "branch_name_copied_to_clipboard": "Назву гілки скопійовано до буфера",
+    "is_copied_to_clipboard": "Робочу одиницю скопійовано до буфера",
+    "no_links_added_yet": "Поки що немає доданих посилань",
+    "add_link": "Додати посилання",
+    "links": "Посилання",
+    "go_to_workspace": "Перейти до робочого простору",
+    "progress": "Прогрес",
+    "optional": "Необов'язково",
+    "join": "Приєднатися",
+    "go_back": "Назад",
+    "continue": "Продовжити",
+    "resend": "Надіслати повторно",
+    "relations": "Зв'язки",
+    "dependencies": "Залежності",
+    "errors": {
+      "default": {
+        "title": "Помилка!",
+        "message": "Щось пішло не так. Будь ласка, спробуйте ще раз."
+      },
+      "required": "Це поле є обов'язковим",
+      "entity_required": "{entity} є обов'язковим",
+      "restricted_entity": "{entity} обмежено"
+    },
+    "update_link": "Оновити посилання",
+    "attach": "Прикріпити",
+    "create_new": "Створити новий",
+    "add_existing": "Додати існуючий",
+    "type_or_paste_a_url": "Введіть або вставте URL",
+    "url_is_invalid": "Некоректний URL",
+    "display_title": "Відображувана назва",
+    "link_title_placeholder": "Як ви хочете бачити це посилання",
+    "url": "URL",
+    "side_peek": "Бічний перегляд",
+    "modal": "Модальне вікно",
+    "full_screen": "Повноекранний режим",
+    "close_peek_view": "Закрити перегляд",
+    "toggle_peek_view_layout": "Перемкнути режим перегляду",
+    "options": "Параметри",
+    "duration": "Тривалість",
+    "today": "Сьогодні",
+    "week": "Тиждень",
+    "month": "Місяць",
+    "quarter": "Квартал",
+    "press_for_commands": "Натисніть '/' для команд",
+    "click_to_add_description": "Натисніть, щоб додати опис",
+    "on_track": "У межах графіку",
+    "off_track": "Поза графіком",
+    "at_risk": "Під загрозою",
+    "timeline": "Хронологія",
+    "completion": "Завершення",
+    "upcoming": "Майбутнє",
+    "completed": "Завершено",
+    "in_progress": "В процесі",
+    "planned": "Заплановано",
+    "paused": "Призупинено",
+    "search": {
+      "label": "Пошук",
+      "placeholder": "Введіть пошуковий запит",
+      "no_matches_found": "Немає збігів",
+      "no_matching_results": "Немає відповідних результатів",
+      "min_chars": "Введіть щонайменше {count} символів для пошуку",
+      "error": "Помилка завантаження результатів пошуку",
+      "no_results": {
+        "title": "Немає відповідних результатів",
+        "description": "Видаліть критерії пошуку, щоб побачити всі результати"
+      }
+    },
+    "actions": {
+      "edit": "Редагувати",
+      "make_a_copy": "Зробити копію",
+      "open_in_new_tab": "Відкрити в новій вкладці",
+      "copy_link": "Скопіювати посилання",
+      "copy_branch_name": "Скопіювати назву гілки",
+      "archive": "Заархівувати",
+      "restore": "Відновити",
+      "delete": "Видалити",
+      "remove_relation": "Вилучити зв'язок",
+      "subscribe": "Підписатися",
+      "unsubscribe": "Скасувати підписку",
+      "clear_sorting": "Скинути сортування",
+      "show_weekends": "Показати вихідні",
+      "enable": "Увімкнути",
+      "disable": "Вимкнути",
+      "copy_markdown": "Скопіювати markdown",
+      "reply": "Відповісти"
+    },
+    "name": "Назва",
+    "discard": "Скасувати",
+    "confirm": "Підтвердити",
+    "confirming": "Підтвердження",
+    "read_the_docs": "Прочитати документацію",
+    "default": "Типове",
+    "active": "Активний",
+    "enabled": "Увімкнено",
+    "disabled": "Вимкнено",
+    "mandate": "Мандат",
+    "mandatory": "Обов'язково",
+    "global": "Глобальна",
+    "yes": "Так",
+    "no": "Ні",
+    "please_wait": "Будь ласка, зачекайте",
+    "enabling": "Увімкнення",
+    "disabling": "Вимкнення",
+    "beta": "Бета",
+    "or": "або",
+    "next": "Далі",
+    "back": "Назад",
+    "retry": "Повторити",
+    "cancelling": "Скасування",
+    "configuring": "Налаштування",
+    "clear": "Очистити",
+    "import": "Імпортувати",
+    "connect": "Підключити",
+    "authorizing": "Авторизація",
+    "processing": "Обробка",
+    "no_data_available": "Немає доступних даних",
+    "from": "від {name}",
+    "authenticated": "Автентифіковано",
+    "select": "Вибрати",
+    "upgrade": "Підвищити",
+    "add_seats": "Додати місця",
+    "projects": "Проєкти",
+    "workspace": "Робочий простір",
+    "workspaces": "Робочі простори",
+    "team": "Команда",
+    "teams": "Команди",
+    "entity": "Сутність",
+    "entities": "Сутності",
+    "task": "Завдання",
+    "tasks": "Завдання",
+    "section": "Розділ",
+    "sections": "Розділи",
+    "edit": "Редагувати",
+    "connecting": "Підключення",
+    "connected": "Підключено",
+    "disconnect": "Відключити",
+    "disconnecting": "Відключення",
+    "installing": "Встановлення",
+    "install": "Встановити",
+    "reset": "Скинути",
+    "live": "Лайв",
+    "change_history": "Історія змін",
+    "coming_soon": "Незабаром",
+    "member": "Учасник",
+    "members": "Учасники",
+    "you": "Ви",
+    "upgrade_cta": {
+      "higher_subscription": "Підвищити до вищого плану",
+      "talk_to_sales": "Зв'язатися з відділом продажів"
+    },
+    "category": "Категорія",
+    "categories": "Категорії",
+    "saving": "Збереження",
+    "save_changes": "Зберегти зміни",
+    "delete": "Видалити",
+    "deleting": "Видалення",
+    "pending": "Очікує",
+    "invite": "Запросити",
+    "view": "Подання",
+    "deactivated_user": "Деактивований користувач",
+    "apply": "Застосувати",
+    "applying": "Застосовується",
+    "overview": "Оверв'ю",
+    "no_of": "Кількість {entity}",
+    "resolved": "Вирішено",
+    "get_started": "Почати",
+    "worklogs": "Ворклоги",
+    "project_updates": "Проджект Апдейти",
+    "workflows": "Воркфлоус",
+    "templates": "Темплейти",
+    "business": "Бізнес",
+    "members_and_teamspaces": "Члени та командних просторів",
+    "recurring_work_items": "Повторювані робочі одиниці",
+    "milestones": "Віхи",
+    "open_in_full_screen": "Відкрити {page} на повний екран",
+    "details": "Деталі",
+    "project_structure": "Структура проєкту",
+    "custom_properties": "Користувацькі властивості",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Вісь X",
+    "y_axis": "Вісь Y",
+    "metric": "Метрика"
+  },
+  "form": {
+    "title": {
+      "required": "Назва є обов'язковою",
+      "max_length": "Назва має бути коротшою за {length} символів"
+    }
+  },
+  "entity": {
+    "grouping_title": "Групування {entity}",
+    "priority": "Пріоритет {entity}",
+    "all": "Усі {entity}",
+    "drop_here_to_move": "Перетягніть сюди для переміщення {entity}",
+    "delete": {
+      "label": "Видалити {entity}",
+      "success": "{entity} успішно видалено",
+      "failed": "Не вдалося видалити {entity}"
+    },
+    "update": {
+      "failed": "Не вдалося оновити {entity}",
+      "success": "{entity} успішно оновлено"
+    },
+    "link_copied_to_clipboard": "Посилання на {entity} скопійовано до буфера обміну",
+    "fetch": {
+      "failed": "Помилка під час завантаження {entity}"
+    },
+    "add": {
+      "success": "{entity} успішно додано",
+      "failed": "Помилка під час додавання {entity}"
+    },
+    "remove": {
+      "success": "{entity} успішно видалено",
+      "failed": "Помилка під час видалення {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Не вдалося додати файл. Спробуйте ще раз.",
+    "only_one_file_allowed": "Можна завантажити лише один файл одночасно.",
+    "file_size_limit": "Файл має бути меншим за {size}МБ.",
+    "drag_and_drop": "Перетягніть файл сюди для завантаження",
+    "delete": "Видалити вкладення"
+  },
+  "label": {
+    "select": "Вибрати мітку",
+    "create": {
+      "success": "Мітку успішно створено",
+      "failed": "Не вдалося створити мітку",
+      "already_exists": "Така мітка вже існує",
+      "type": "Введіть для створення нової мітки"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {Подання} few {Подання} other {Подань}}",
+    "create": {
+      "label": "Створити подання"
+    },
+    "update": {
+      "label": "Оновити подання"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Гість",
+      "description": "Зовнішні учасники можуть бути запрошені як гості."
+    },
+    "member": {
+      "title": "Учасник",
+      "description": "Може читати, створювати, редагувати та видаляти сутності."
+    },
+    "admin": {
+      "title": "Адміністратор",
+      "description": "Має всі права в робочому просторі."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Продуктовий/Проєктний менеджер",
+    "development_or_engineering": "Розробка/Інженерія",
+    "founder_or_executive": "Засновник/Керівник",
+    "freelancer_or_consultant": "Фрілансер/Консультант",
+    "marketing_or_growth": "Маркетинг/Зростання",
+    "sales_or_business_development": "Продажі/Розвиток бізнесу",
+    "support_or_operations": "Підтримка/Операції",
+    "student_or_professor": "Студент/Професор",
+    "human_resources": "HR (кадри)",
+    "other": "Інше"
+  },
+  "default_global_view": {
+    "all_issues": "Усі одиниці",
+    "assigned": "Призначено",
+    "created": "Створено",
+    "subscribed": "Підписано"
+  },
+  "description_versions": {
+    "last_edited_by": "Останнє редагування",
+    "previously_edited_by": "Раніше відредаговано",
+    "edited_by": "Відредаговано"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane не запустився. Це може бути через те, що один або декілька сервісів Plane не змогли запуститися.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Виберіть View Logs з setup.sh та логів Docker, щоб переконатися."
+  },
+  "customize_navigation": "Налаштувати навігацію",
+  "personal": "Особисте",
+  "accordion_navigation_control": "Акордеонна навігація бічної панелі",
+  "horizontal_navigation_bar": "Вкладкова навігація",
+  "show_limited_projects_on_sidebar": "Показувати обмежену кількість проєктів на бічній панелі",
+  "enter_number_of_projects": "Введіть кількість проєктів",
+  "pin": "Закріпити",
+  "unpin": "Відкріпити",
+  "workspace_dashboards": "Дешборди",
+  "pi_chat": "ШІ Чат",
+  "in_app": "В-апп",
+  "forms": "Форми",
+  "milestones": "Віхи",
+  "milestones_description": "Віхи забезпечують шар для узгодження робочих одиниць до спільних дат завершення.",
+  "file_upload": {
+    "upload_text": "Натисніть тут, щоб завантажити файл",
+    "drag_drop_text": "Перетягніть",
+    "processing": "Обробка",
+    "invalid_file_type": "Недійсний тип файлу",
+    "missing_fields": "Відсутні поля",
+    "success": "{fileName} Завантажено!"
+  },
+  "date": "Дата",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Експортуйте одиниці у формат CSV.",
+      "short_description": "Експортувати як CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Експортуйте одиниці у формат Excel.",
+      "short_description": "Експортувати як Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Експортуйте одиниці у формат Excel.",
+      "short_description": "Експортувати як Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Експортуйте одиниці у формат JSON.",
+      "short_description": "Експортувати як JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/cycle.json b/packages/i18n/src/locales/ua/cycle.json
new file mode 100644
index 0000000..2037905
--- /dev/null
+++ b/packages/i18n/src/locales/ua/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Додайте одиниці, щоб відстежувати прогрес"
+      },
+      "chart": {
+        "title": "Додайте одиниці, щоб побачити burndown-графік."
+      },
+      "priority_issue": {
+        "title": "Тут з’являться найпріоритетніші робочі одиниці."
+      },
+      "assignee": {
+        "title": "Призначте робочі одиниці, щоб побачити розподіл."
+      },
+      "label": {
+        "title": "Додайте мітки, щоб аналізувати за мітками."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {Цикл} few {Цикли} other {Циклів}}",
+    "no_cycle": "Немає циклу"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Додайте робочі елементи до циклу, щоб\n переглянути його прогрес"
+      },
+      "priority": {
+        "title": "Спостерігайте за важливими робочими\n елементами, що розглядаються в циклі."
+      },
+      "assignee": {
+        "title": "Додайте призначених осіб до робочих елементів,\n щоб побачити розподіл роботи за призначеними особами."
+      },
+      "label": {
+        "title": "Додайте лейбли до робочих елементів, щоб\n побачити розподіл роботи за лейблами."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/editor.json b/packages/i18n/src/locales/ua/editor.json
new file mode 100644
index 0000000..e688e33
--- /dev/null
+++ b/packages/i18n/src/locales/ua/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Перетягніть для завантаження зовнішніх файлів"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Файл занадто великий.",
+        "description": "Максимальний розмір файлу {maxFileSize} МБ"
+      },
+      "unsupported_file_type": {
+        "title": "Непідтримуваний тип файлу.",
+        "description": "Переглянути підтримувані формати"
+      },
+      "default": {
+        "title": "Завантаження не вдалося.",
+        "description": "Щось пішло не так. Спробуйте ще раз."
+      }
+    },
+    "upgrade": {
+      "description": "Оновіть план для перегляду цього вкладення."
+    },
+    "aria": {
+      "click_to_upload": "Натисніть для завантаження вкладення"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Перетворити на вбудований вміст",
+      "convert_to_link": "Перетворити на посилання",
+      "convert_to_richcard": "Перетворити на rich-картку"
+    },
+    "placeholder": {
+      "insert_embed": "Вставте тут своє бажане посилання для вбудовування, наприклад, відео YouTube, дизайн Figma тощо",
+      "link": "Введіть або вставте посилання"
+    },
+    "input_modal": {
+      "embed": "Вбудувати",
+      "works_with_links": "Працює з YouTube, Figma, Google Docs та іншими"
+    },
+    "error": {
+      "not_valid_link": "Будь ласка, введіть дійсну URL-адресу."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Опишіть вміст цього блоку",
+      "generated_here": "Ваш ШІ-контент буде згенеровано тут"
+    },
+    "block_types": {
+      "placeholder": "Виберіть тип блоку",
+      "summarize_page": "Підсумувати сторінку",
+      "custom_prompt": "Користувацький промпт"
+    },
+    "actions": {
+      "discard": "Відхилити",
+      "generate": "Згенерувати",
+      "generating": "Генерація",
+      "rewriting": "Переписування",
+      "rewrite": "Переписати",
+      "use_this": "Використати це",
+      "refine": "Уточнити"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/empty-state.json b/packages/i18n/src/locales/ua/empty-state.json
new file mode 100644
index 0000000..a1672ce
--- /dev/null
+++ b/packages/i18n/src/locales/ua/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Ще немає метрик прогресу для відображення.",
+      "description": "Почніть встановлювати значення властивостей у робочих елементах, щоб побачити тут метрики прогресу."
+    },
+    "updates": {
+      "title": "Ще немає оновлень.",
+      "description": "Як тільки учасники проєкту додадуть оновлення, вони з'являться тут"
+    },
+    "search": {
+      "title": "Немає відповідних результатів.",
+      "description": "Результатів не знайдено. Спробуйте змінити пошукові терміни."
+    },
+    "not_found": {
+      "title": "Ой! Щось здається не так",
+      "description": "Ми не можемо отримати ваш обліковий запис plane зараз. Це може бути помилка мережі.",
+      "cta_primary": "Спробуйте перезавантажити"
+    },
+    "server_error": {
+      "title": "Помилка сервера",
+      "description": "Ми не можемо підключитися та отримати дані з нашого сервера. Не хвилюйтеся, ми працюємо над цим.",
+      "cta_primary": "Спробуйте перезавантажити"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Схоже, у вас немає доступу до цього проєкту",
+      "restricted_description": "Зверніться до адміністратора, щоб запросити доступ, і ви зможете продовжити тут.",
+      "join_description": "Натисніть кнопку нижче, щоб приєднатися.",
+      "cta_primary": "Приєднатися до проєкту",
+      "cta_loading": "Приєднання до проєкту"
+    },
+    "invalid_project": {
+      "title": "Проєкт не знайдено",
+      "description": "Проєкт, який ви шукаєте, не існує."
+    },
+    "work_items": {
+      "title": "Почніть з вашого першого робочого елемента.",
+      "description": "Робочі елементи є будівельними блоками вашого проєкту — призначайте власників, встановлюйте пріоритети та легко відстежуйте прогрес.",
+      "cta_primary": "Створіть свій перший робочий елемент"
+    },
+    "cycles": {
+      "title": "Групуйте та обмежуйте за часом вашу роботу в Циклах.",
+      "description": "Розділіть роботу на часові блоки, працюйте назад від кінцевого терміну проєкту для встановлення дат і робіть відчутний прогрес як команда.",
+      "cta_primary": "Встановіть свій перший цикл"
+    },
+    "cycle_work_items": {
+      "title": "Немає робочих елементів для відображення в цьому циклі",
+      "description": "Створіть робочі елементи, щоб почати моніторинг прогресу вашої команди в цьому циклі та досягти своїх цілей вчасно.",
+      "cta_primary": "Створити робочий елемент",
+      "cta_secondary": "Додати існуючий робочий елемент"
+    },
+    "modules": {
+      "title": "Відобразіть цілі вашого проєкту на Модулі та легко відстежуйте.",
+      "description": "Модулі складаються з взаємопов'язаних робочих елементів. Вони допомагають моніторити прогрес через фази проєкту, кожна з конкретними термінами та аналітикою, щоб показати, наскільки ви близькі до досягнення цих фаз.",
+      "cta_primary": "Встановіть свій перший модуль"
+    },
+    "module_work_items": {
+      "title": "Немає робочих елементів для відображення в цьому Модулі",
+      "description": "Створіть робочі елементи, щоб почати моніторинг цього модуля.",
+      "cta_primary": "Створити робочий елемент",
+      "cta_secondary": "Додати існуючий робочий елемент"
+    },
+    "views": {
+      "title": "Зберігайте власні подання для вашого проєкту",
+      "description": "Подання є збереженими фільтрами, які допомагають вам швидко отримувати доступ до інформації, яку ви використовуєте найчастіше. Співпрацюйте без зусиль, оскільки члени команди діляться та адаптують подання до своїх конкретних потреб.",
+      "cta_primary": "Створити подання"
+    },
+    "no_work_items_in_project": {
+      "title": "У проєкті ще немає робочих елементів",
+      "description": "Додайте робочі елементи до свого проєкту та розділіть свою роботу на відстежувані частини з поданнями.",
+      "cta_primary": "Додати робочий елемент"
+    },
+    "work_item_filter": {
+      "title": "Робочих елементів не знайдено",
+      "description": "Ваш поточний фільтр не повернув результатів. Спробуйте змінити фільтри.",
+      "cta_primary": "Додати робочий елемент"
+    },
+    "pages": {
+      "title": "Документуйте все — від нотаток до PRD",
+      "description": "Сторінки дозволяють вам захоплювати та організовувати інформацію в одному місці. Пишіть нотатки зустрічей, проєктну документацію та PRD, вбудовуйте робочі елементи та структуруйте їх за допомогою готових компонентів.",
+      "cta_primary": "Створіть свою першу Сторінку"
+    },
+    "archive_pages": {
+      "title": "Ще немає архівованих сторінок",
+      "description": "Архівуйте сторінки, які не на вашому радарі. Отримуйте до них доступ тут, коли потрібно."
+    },
+    "intake_sidebar": {
+      "title": "Реєструйте запити на вхід",
+      "description": "Надсилайте нові запити для перегляду, встановлення пріоритетів та відстеження в рамках робочого процесу вашого проєкту.",
+      "cta_primary": "Створити запит на вхід"
+    },
+    "intake_main": {
+      "title": "Виберіть робочий елемент Intake, щоб переглянути його деталі"
+    },
+    "epics": {
+      "title": "Перетворюйте складні проєкти на структуровані епіки.",
+      "description": "Епік допомагає вам організовувати великі цілі в менші, відстежувані завдання.",
+      "cta_primary": "Створити Епік",
+      "cta_secondary": "Документація"
+    },
+    "epic_work_items": {
+      "title": "Ви ще не додали робочі елементи до цього епіка.",
+      "description": "Почніть з додавання деяких робочих елементів до цього епіка та відстежуйте їх тут.",
+      "cta_secondary": "Додати робочі елементи"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Ще немає архівованих епіків",
+      "description": "Ви можете архівувати завершені або скасовані епіки. Знайдіть їх тут після архівації."
+    },
+    "archive_work_items": {
+      "title": "Ще немає архівованих робочих елементів",
+      "description": "Вручну або через автоматизацію ви можете архівувати завершені або скасовані робочі елементи. Знайдіть їх тут після архівування.",
+      "cta_primary": "Налаштувати автоматизацію"
+    },
+    "archive_cycles": {
+      "title": "Ще немає архівованих циклів",
+      "description": "Щоб упорядкувати свій проєкт, архівуйте завершені цикли. Знайдіть їх тут після архівування."
+    },
+    "archive_modules": {
+      "title": "Ще немає архівованих Модулів",
+      "description": "Щоб упорядкувати свій проєкт, архівуйте завершені або скасовані модулі. Знайдіть їх тут після архівування."
+    },
+    "home_widget_quick_links": {
+      "title": "Тримайте під рукою важливі посилання, ресурси або документи для вашої роботи"
+    },
+    "inbox_sidebar_all": {
+      "title": "Оновлення для ваших підписаних робочих елементів з'являться тут"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Згадки для ваших робочих елементів з'являться тут"
+    },
+    "your_work_by_priority": {
+      "title": "Ще не призначено робочого елемента"
+    },
+    "your_work_by_state": {
+      "title": "Ще не призначено робочого елемента"
+    },
+    "views": {
+      "title": "Ще немає Поданнь",
+      "description": "Додайте робочі елементи до свого проєкту та використовуйте подання для фільтрування, сортування та моніторингу прогресу без зусиль.",
+      "cta_primary": "Додати робочий елемент"
+    },
+    "drafts": {
+      "title": "Напівнаписані робочі елементи",
+      "description": "Щоб спробувати це, почніть додавати робочий елемент і залиште його на половині або створіть свій перший чернетка нижче. 😉",
+      "cta_primary": "Створити чернетковий робочий елемент"
+    },
+    "projects_archived": {
+      "title": "Немає архівованих проєктів",
+      "description": "Схоже, всі ваші проєкти все ще активні—чудова робота!"
+    },
+    "analytics_projects": {
+      "title": "Створіть проєкти для візуалізації метрик проєкту тут."
+    },
+    "analytics_work_items": {
+      "title": "Створіть проєкти з робочими елементами та призначеними особами, щоб почати відстежувати ефективність, прогрес та вплив команди тут."
+    },
+    "analytics_no_cycle": {
+      "title": "Створіть цикли для організації роботи в часові фази та відстеження прогресу через спринти."
+    },
+    "analytics_no_module": {
+      "title": "Створіть модулі для організації вашої роботи та відстеження прогресу через різні фази."
+    },
+    "analytics_no_intake": {
+      "title": "Налаштуйте вхід для управління вхідними запитами та відстеження того, як вони приймаються та відхиляються"
+    },
+    "home_widget_stickies": {
+      "title": "Запишіть ідею, зафіксуйте осяяння або запам'ятайте раптову думку. Додайте стікер, щоб почати."
+    },
+    "stickies": {
+      "title": "Фіксуйте ідеї миттєво",
+      "description": "Створюйте стікери для швидких нотаток та завдань, і тримайте їх при собі, куди б ви не йшли.",
+      "cta_primary": "Створити перший стікер",
+      "cta_secondary": "Документація"
+    },
+    "active_cycles": {
+      "title": "Немає активних циклів",
+      "description": "У вас зараз немає поточних циклів. Активні цикли з'являються тут, коли вони включають сьогоднішню дату."
+    },
+    "dashboard": {
+      "title": "Візуалізуйте свій прогрес за допомогою панелей",
+      "description": "Створюйте налаштовувані панелі для відстеження метрик, вимірювання результатів та ефективного представлення аналітики.",
+      "cta_primary": "Створити нову панель"
+    },
+    "wiki": {
+      "title": "Напишіть нотатку, документ або повну базу знань.",
+      "description": "Сторінки — це простір для фіксації думок у Plane. Робіть нотатки зустрічей, легко форматуйте їх, вбудовуйте робочі елементи, розміщуйте їх за допомогою бібліотеки компонентів і зберігайте все в контексті вашого проєкту.",
+      "cta_primary": "Створіть вашу сторінку"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Увімкнути стани проєкту",
+      "description": "Увімкніть стани проєкту для перегляду та керування властивостями, такими як стан, пріоритет, терміни виконання та інше."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Ще немає оцінок",
+      "description": "Визначте, як ваша команда вимірює зусилля, та відстежуйте це послідовно для всіх робочих елементів.",
+      "cta_primary": "Додати систему оцінок"
+    },
+    "labels": {
+      "title": "Ще немає міток",
+      "description": "Створіть персоналізовані мітки для ефективної категоризації та управління вашими робочими елементами.",
+      "cta_primary": "Створіть свою першу мітку"
+    },
+    "exports": {
+      "title": "Ще немає експортів",
+      "description": "Ви зараз не маєте жодних записів експорту. Як тільки ви експортуєте дані, усі записи з'являться тут."
+    },
+    "tokens": {
+      "title": "Ще немає Персонального токена",
+      "description": "Генеруйте безпечні API токени для підключення вашого робочого простору до зовнішніх систем та додатків.",
+      "cta_primary": "Додати API токен"
+    },
+    "workspace_tokens": {
+      "title": "Ще немає API токенів",
+      "description": "Генеруйте безпечні API токени для підключення вашого робочого простору до зовнішніх систем та додатків.",
+      "cta_primary": "Додати API токен"
+    },
+    "webhooks": {
+      "title": "Ще не додано Webhook",
+      "description": "Автоматизуйте сповіщення зовнішнім сервісам, коли відбуваються події проєкту.",
+      "cta_primary": "Додати webhook"
+    },
+    "work_item_types": {
+      "title": "Створюйте та налаштовуйте типи робочих елементів",
+      "description": "Визначте унікальні типи робочих елементів для вашого проєкту. Кожен тип може мати власні властивості, робочі процеси та поля — адаптовані до потреб вашого проєкту та команди.",
+      "cta_primary": "Увімкнути"
+    },
+    "work_item_type_properties": {
+      "title": "Визначте властивість та деталі, які ви хочете зафіксувати для цього типу робочого елемента. Налаштуйте його відповідно до робочого процесу вашого проєкту.",
+      "cta_secondary": "Додати властивість"
+    },
+    "templates": {
+      "title": "Ще немає шаблонів",
+      "description": "Скоротіть час налаштування, створюючи шаблони для робочих елементів та сторінок — і починайте нову роботу за секунди.",
+      "cta_primary": "Створіть свій перший шаблон"
+    },
+    "recurring_work_items": {
+      "title": "Ще немає повторюваного робочого елемента",
+      "description": "Налаштуйте повторювані робочі елементи для автоматизації повторюваних завдань та легкого дотримання графіка.",
+      "cta_primary": "Створити повторюваний робочий елемент"
+    },
+    "worklogs": {
+      "title": "Відстежуйте табелі обліку часу для всіх учасників",
+      "description": "Реєструйте час на робочих елементах для перегляду детальних табелів для будь-якого члена команди по проєктах."
+    },
+    "group_syncing": {
+      "title": "Ще немає зіставлень груп"
+    },
+    "template_setting": {
+      "title": "Ще немає шаблонів",
+      "description": "Скоротіть час налаштування, створюючи шаблони для проєктів, робочих елементів та сторінок — і починайте нову роботу за секунди.",
+      "cta_primary": "Створити шаблон"
+    },
+    "workflows": {
+      "title": "Ще немає воркфлоу",
+      "description": "Створюйте воркфлоу для керування перебігом ваших робочих елементів.",
+      "cta_primary": "Додати новий воркфлоу",
+      "states": {
+        "title": "Додати стани",
+        "description": "Виберіть стани, через які проходить робочий елемент."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/home.json b/packages/i18n/src/locales/ua/home.json
new file mode 100644
index 0000000..0a1b496
--- /dev/null
+++ b/packages/i18n/src/locales/ua/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Ваш посібник із швидкого старту",
+      "not_right_now": "Зараз не треба",
+      "create_project": {
+        "title": "Створити проєкт",
+        "description": "Більшість речей починається з проєкту в Plane.",
+        "cta": "Почати"
+      },
+      "invite_team": {
+        "title": "Запросити команду",
+        "description": "Співпрацюйте з колегами у створенні, постачанні та керуванні.",
+        "cta": "Запросити їх"
+      },
+      "configure_workspace": {
+        "title": "Налаштуйте свій робочий простір.",
+        "description": "Увімкніть або вимкніть функції чи зайдіть далі.",
+        "cta": "Налаштувати цей простір"
+      },
+      "personalize_account": {
+        "title": "Налаштуйте Plane під себе.",
+        "description": "Оберіть картинку, кольори та інше.",
+        "cta": "Налаштувати зараз"
+      },
+      "widgets": {
+        "title": "Без віджетів трохи порожньо, увімкніть їх",
+        "description": "Схоже, що всі ваші віджети вимкнені. Увімкніть їх\nдля покращеного досвіду!",
+        "primary_button": {
+          "text": "Керувати віджетами"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Збережіть посилання на важливі речі, які хочете мати під рукою.",
+      "add": "Додати швидке посилання",
+      "title": "Швидке посилання",
+      "title_plural": "Швидкі посилання"
+    },
+    "recents": {
+      "title": "Нещодавні",
+      "empty": {
+        "project": "Ваші нещодавні проєкти з'являться тут після перегляду.",
+        "page": "Ваші нещодавні сторінки з'являться тут після перегляду.",
+        "issue": "Ваші нещодавні робочі одиниці з'являться тут після перегляду.",
+        "default": "Поки у вас немає нещодавніх елементів."
+      },
+      "filters": {
+        "all": "Усі",
+        "projects": "Проєкти",
+        "pages": "Сторінки",
+        "issues": "Робочі одиниці"
+      }
+    },
+    "new_at_plane": {
+      "title": "Новинки в Plane"
+    },
+    "quick_tutorial": {
+      "title": "Швидкий посібник"
+    },
+    "widget": {
+      "reordered_successfully": "Віджет успішно переміщено.",
+      "reordering_failed": "Сталася помилка під час переміщення віджета."
+    },
+    "manage_widgets": "Керувати віджетами",
+    "title": "Головна",
+    "star_us_on_github": "Оцініть нас на GitHub",
+    "business_trial_banner": {
+      "title": "Ваш 14-денний пробний період плану Business активний!",
+      "description": "Ознайомтеся з усіма функціями Business. Коли будете готові, оберіть підписку. Автоматичне списання не здійснюється.",
+      "trial_ends_today": "Пробний період закінчується сьогодні",
+      "trial_ends_in_days": "Пробний період закінчується через {days, plural, one {# день} few {# дні} other {# днів}}",
+      "start_subscription": "Оформити підписку",
+      "explore_business_features": "Ознайомитися з функціями Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/inbox.json b/packages/i18n/src/locales/ua/inbox.json
new file mode 100644
index 0000000..96264f4
--- /dev/null
+++ b/packages/i18n/src/locales/ua/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "В очікуванні",
+        "description": "В очікуванні"
+      },
+      "declined": {
+        "title": "Відхилено",
+        "description": "Відхилено"
+      },
+      "snoozed": {
+        "title": "Відкладено",
+        "description": "Залишилося {days, plural, one{# день} few{# дні} other{# днів}}"
+      },
+      "accepted": {
+        "title": "Прийнято",
+        "description": "Прийнято"
+      },
+      "duplicate": {
+        "title": "Дублікат",
+        "description": "Дублікат"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Відхилити робочу одиницю",
+        "content": "Справді відхилити робочу одиницю {value}?"
+      },
+      "delete": {
+        "title": "Видалити робочу одиницю",
+        "content": "Справді видалити робочу одиницю {value}?",
+        "success": "Робочу одиницю успішно видалено"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Лише адміністратори проєкту можуть відкладати/повертати відкладені робочі одиниці",
+      "accept_permission": "Лише адміністратори проєкту можуть приймати робочі одиниці",
+      "decline_permission": "Лише адміністратори проєкту можуть відхилити робочі одиниці"
+    },
+    "actions": {
+      "accept": "Прийняти",
+      "decline": "Відхилити",
+      "snooze": "Відкласти",
+      "unsnooze": "Повернути з відкладених",
+      "copy": "Скопіювати посилання на робочу одиницю",
+      "delete": "Видалити",
+      "open": "Відкрити робочу одиницю",
+      "mark_as_duplicate": "Позначити як дублікат",
+      "move": "Перемістити {value} до робочих одиниць проєкту"
+    },
+    "source": {
+      "in-app": "в застосунку"
+    },
+    "order_by": {
+      "created_at": "Створено",
+      "updated_at": "Оновлено",
+      "id": "ID"
+    },
+    "label": "Надходження",
+    "page_label": "{workspace} - Надходження",
+    "modal": {
+      "title": "Створити прийняту робочу одиницю"
+    },
+    "tabs": {
+      "open": "Відкриті",
+      "closed": "Закриті"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Немає відкритих робочих одиниць",
+        "description": "Тут будуть відкриті робочі одиниці. Створіть нову."
+      },
+      "sidebar_closed_tab": {
+        "title": "Немає закритих робочих одиниць",
+        "description": "Усі прийняті або відхилені робочі одиниці будуть тут."
+      },
+      "sidebar_filter": {
+        "title": "Немає робочих одиниць за фільтром",
+        "description": "Немає одиниць, що відповідають фільтру у надходженнях. Створіть нову."
+      },
+      "detail": {
+        "title": "Виберіть робочу одиницю для перегляду деталей."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/integration.json b/packages/i18n/src/locales/ua/integration.json
new file mode 100644
index 0000000..df88777
--- /dev/null
+++ b/packages/i18n/src/locales/ua/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Інтеграції",
+    "loading": "Завантаження",
+    "unauthorized": "Ви не маєте дозволу переглядати цю сторінку.",
+    "configure": "Налаштувати",
+    "not_enabled": "{name} не увімкнено для цього воркспейсу.",
+    "not_configured": "Не налаштовано",
+    "disconnect_personal_account": "Відключити персональний аккаунт {providerName}",
+    "not_configured_message_admin": "Інтеграція {name} не налаштована. Будь ласка, зверніться до адміністратора вашого інстансу для налаштування.",
+    "not_configured_message_support": "Інтеграція {name} не налаштована. Будь ласка, зверніться до підтримки для налаштування.",
+    "external_api_unreachable": "Неможливо отримати доступ до зовнішнього API. Будь ласка, спробуйте пізніше.",
+    "error_fetching_supported_integrations": "Неможливо отримати підтримувані інтеграції. Будь ласка, спробуйте пізніше.",
+    "back_to_integrations": "Назад до інтеграцій",
+    "select_state": "Виберіть Стейт",
+    "set_state": "Встановити Стейт",
+    "choose_project": "Виберіть Проджект...",
+    "skip_backward_state_movement": "Запобігти переміщенню завдань у попередній стан через оновлення PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Підключіть та синхронізуйте ваші робочі елементи GitHub з Плейн.",
+    "connect_org": "Підключити Організацію",
+    "connect_org_description": "Підключіть вашу організацію GitHub до Плейн.",
+    "processing": "Обробка",
+    "org_added_desc": "GitHub org додана і час",
+    "connection_fetch_error": "Помилка отримання деталей підключення з сервера",
+    "personal_account_connected": "Персональний аккаунт підключено",
+    "personal_account_connected_description": "Ваш персональний аккаунт GitHub тепер підключено до Плейн.",
+    "connect_personal_account": "Підключити персональний аккаунт",
+    "connect_personal_account_description": "Підключіть ваш персональний аккаунт GitHub до Плейн.",
+    "repo_mapping": "Маппінг Репозиторіїв",
+    "repo_mapping_description": "Маппінг ваших репозиторіїв GitHub з проджектами Плейн.",
+    "project_issue_sync": "Синхронізація Проблем Проджекту",
+    "project_issue_sync_description": "Синхронізуйте проблеми з GitHub до вашого проджекту Плейн",
+    "project_issue_sync_empty_state": "Змаповані синхронізації проблем проджекту з'являться тут",
+    "configure_project_issue_sync_state": "Налаштуйте стан синхронізації проблем",
+    "select_issue_sync_direction": "Виберіть напрямок синхронізації проблем",
+    "allow_bidirectional_sync": "Bidirectional - Синхронізуйте проблеми і коментарі в обох напрямках між GitHub і Плейн",
+    "allow_unidirectional_sync": "Unidirectional - Синхронізуйте проблеми і коментарі з GitHub до Плейн тільки",
+    "allow_unidirectional_sync_warning": "Дані з GitHub Issue замінять дані у пов'язаному робочому елементі Plane (тільки GitHub → Plane)",
+    "remove_project_issue_sync": "Видалити цю Синхронізацію Проблем Проджекту",
+    "remove_project_issue_sync_confirmation": "Ви впевнені, що хочете видалити цю синхронізацію проблем проджекту?",
+    "add_pr_state_mapping": "Додати Маппінг Стану Пул Ріквесту для Проджекту Плейн",
+    "edit_pr_state_mapping": "Редагувати Маппінг Стану Пул Ріквесту для Проджекту Плейн",
+    "pr_state_mapping": "Маппінг Стану Пул Ріквесту",
+    "pr_state_mapping_description": "Маппінг стану пул ріквесту з GitHub до вашого проджекту Плейн",
+    "pr_state_mapping_empty_state": "Змаповані стани PR з'являться тут",
+    "remove_pr_state_mapping": "Видалити цей Маппінг Стану Пул Ріквесту",
+    "remove_pr_state_mapping_confirmation": "Ви впевнені, що хочете видалити цей маппінг стану пул ріквесту?",
+    "issue_sync_message": "Робочі елементи синхронізовані до {project}",
+    "link": "Прив'язати репозиторій GitHub до проджекту Плейн",
+    "pull_request_automation": "Автоматизація Пул Ріквестів",
+    "pull_request_automation_description": "Налаштуйте маппінг стану пул ріквесту з GitHub до вашого проджекту Плейн",
+    "DRAFT_MR_OPENED": "При відкритті чернетки МР, встановити стан на",
+    "MR_OPENED": "Акрито",
+    "MR_READY_FOR_MERGE": "Коли МР готовий до мерджу, встановити стан на",
+    "MR_REVIEW_REQUESTED": "Коли запитано рев'ю МР, встановити стан на",
+    "MR_MERGED": "Коли МР змерджено, встановити стан на",
+    "MR_CLOSED": "Закрито",
+    "ISSUE_OPEN": "Issue Акрито",
+    "ISSUE_CLOSED": "Issue Закрито",
+    "save": "Зберегти",
+    "start_sync": "Почати Синхронізацію",
+    "choose_repository": "Виберіть Репозиторій..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Підключіть та синхронізуйте ваші Мердж Ріквести Gitlab з Плейн.",
+    "connection_fetch_error": "Помилка отримання деталей підключення з сервера",
+    "connect_org": "Підключити Організацію",
+    "connect_org_description": "Підключіть вашу організацію Gitlab до Плейн.",
+    "project_connections": "Підключення Проджектів Gitlab",
+    "project_connections_description": "Синхронізуйте мердж ріквести з Gitlab до проджектів Плейн.",
+    "plane_project_connection": "Підключення Проджекту Плейн",
+    "plane_project_connection_description": "Налаштуйте маппінг стану пул ріквестів з Gitlab до проджектів Плейн",
+    "remove_connection": "Видалити Підключення",
+    "remove_connection_confirmation": "Ви впевнені, що хочете видалити це підключення?",
+    "link": "Прив'язати репозиторій Gitlab до проджекту Плейн",
+    "pull_request_automation": "Автоматизація Пул Ріквестів",
+    "pull_request_automation_description": "Налаштуйте маппінг стану пул ріквесту з Gitlab до Плейн",
+    "DRAFT_MR_OPENED": "При відкритті чернетки МР, встановити стан на",
+    "MR_OPENED": "При відкритті МР, встановити стан на",
+    "MR_REVIEW_REQUESTED": "Коли запитано рев'ю МР, встановити стан на",
+    "MR_READY_FOR_MERGE": "Коли МР готовий до мерджу, встановити стан на",
+    "MR_MERGED": "Коли МР змерджено, встановити стан на",
+    "MR_CLOSED": "Коли МР закрито, встановити стан на",
+    "integration_enabled_text": "З увімкненою інтеграцією Gitlab ви можете автоматизувати воркфлоу робочих елементів",
+    "choose_entity": "Виберіть Сутність",
+    "choose_project": "Виберіть Проджект",
+    "link_plane_project": "Прив'язати проджект Плейн",
+    "project_issue_sync": "Синхронізація задач проджекту",
+    "project_issue_sync_description": "Синхронізуйте задачі з Gitlab до вашого проджекту Plane",
+    "project_issue_sync_empty_state": "Мапінг синхронізації задач проджекту з'явиться тут",
+    "configure_project_issue_sync_state": "Налаштувати стан синхронізації задач",
+    "select_issue_sync_direction": "Виберіть напрямок синхронізації задач",
+    "allow_bidirectional_sync": "Двосторонній - Синхронізувати задачі та коментарі в обох напрямках між Gitlab і Plane",
+    "allow_unidirectional_sync": "Односторонній - Синхронізувати задачі та коментарі лише з Gitlab до Plane",
+    "allow_unidirectional_sync_warning": "Дані з Gitlab Issue замінять дані в пов'язаному робочому елементі Plane (лише Gitlab → Plane)",
+    "remove_project_issue_sync": "Видалити цю синхронізацію задач проджекту",
+    "remove_project_issue_sync_confirmation": "Ви впевнені, що хочете видалити цю синхронізацію задач проджекту?",
+    "ISSUE_OPEN": "Задача відкрита",
+    "ISSUE_CLOSED": "Задача закрита",
+    "save": "Зберегти",
+    "start_sync": "Почати синхронізацію",
+    "choose_repository": "Виберіть репозиторій..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Підключіть та синхронізуйте ваш екземпляр Gitlab Enterprise з Plane.",
+    "app_form_title": "Конфігурація Gitlab Enterprise",
+    "app_form_description": "Налаштуйте Gitlab Enterprise для підключення до Plane.",
+    "base_url_title": "Базова URL",
+    "base_url_description": "Базова URL вашого екземпляра Gitlab Enterprise.",
+    "base_url_placeholder": "напр. \"https://glab.plane.town\"",
+    "base_url_error": "Базова URL є обов'язковою",
+    "invalid_base_url_error": "Недійсна базова URL",
+    "client_id_title": "ID застосунку",
+    "client_id_description": "ID застосунку, який ви створили у вашому екземплярі Gitlab Enterprise.",
+    "client_id_placeholder": "напр. \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "ID застосунку є обов'язковим",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Client secret застосунку, який ви створили у вашому екземплярі Gitlab Enterprise.",
+    "client_secret_placeholder": "напр. \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret є обов'язковим",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Випадковий webhook secret, який буде використовуватися для перевірки webhook з екземпляра Gitlab Enterprise.",
+    "webhook_secret_placeholder": "напр. \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret є обов'язковим",
+    "connect_app": "Підключити застосунок"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Підключіть ваш воркспейс Slack до Плейн.",
+    "connect_personal_account": "Підключіть ваш персональний аккаунт Slack до Плейн.",
+    "personal_account_connected": "Ваш персональний аккаунт {providerName} тепер підключено до Плейн.",
+    "link_personal_account": "Прив'яжіть ваш персональний аккаунт {providerName} до Плейн.",
+    "connected_slack_workspaces": "Підключені воркспейси Slack",
+    "connected_on": "Підключено {date}",
+    "disconnect_workspace": "Відключити воркспейс {name}",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Отримуйте сповіщення в особистих повідомленнях Slack про важливі оновлення, нагадування та сповіщення тільки для вас."
+      }
+    },
+    "project_updates": {
+      "title": "Оновлення Проєкту",
+      "description": "Налаштуйте сповіщення про оновлення проєктів для ваших проєктів",
+      "add_new_project_update": "Додати нове сповіщення про оновлення проєкту",
+      "project_updates_empty_state": "Проєкти, підключені до каналів Slack, з'являться тут.",
+      "project_updates_form": {
+        "title": "Налаштувати Оновлення Проєкту",
+        "description": "Отримуйте сповіщення про оновлення проєкту в Slack, коли створюються робочі елементи",
+        "failed_to_load_channels": "Не вдалося завантажити канали зі Slack",
+        "project_dropdown": {
+          "placeholder": "Виберіть проєкт",
+          "label": "Проєкт Plane",
+          "no_projects": "Немає доступних проєктів"
+        },
+        "channel_dropdown": {
+          "label": "Канал Slack",
+          "placeholder": "Виберіть канал",
+          "no_channels": "Немає доступних каналів"
+        },
+        "all_projects_connected": "Усі проєкти вже підключені до каналів Slack.",
+        "all_channels_connected": "Усі канали Slack вже підключені до проєктів.",
+        "project_connection_success": "З'єднання проєкту успішно створено",
+        "project_connection_updated": "З'єднання проєкту успішно оновлено",
+        "project_connection_deleted": "З'єднання проєкту успішно видалено",
+        "failed_delete_project_connection": "Не вдалося видалити з'єднання проєкту",
+        "failed_create_project_connection": "Не вдалося створити з'єднання проєкту",
+        "failed_upserting_project_connection": "Не вдалося оновити з'єднання проєкту",
+        "failed_loading_project_connections": "Ми не змогли завантажити ваші з'єднання проєкту. Це може бути пов'язано з проблемою мережі або проблемою з інтеграцією."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Підключіть ваш робочий простір Sentry до Plane.",
+    "connected_sentry_workspaces": "Підключені робочі простори Sentry",
+    "connected_on": "Підключено {date}",
+    "disconnect_workspace": "Відключити робочий простір {name}",
+    "state_mapping": {
+      "title": "Відображення станів",
+      "description": "Відображіть стани інцидентів Sentry до станів вашого проекту. Налаштуйте, які стани використовувати, коли інцидент Sentry вирішено або не вирішено.",
+      "add_new_state_mapping": "Додати нове відображення стану",
+      "empty_state": "Відображення станів не налаштовано. Створіть перше відображення для синхронізації станів інцидентів Sentry зі станами вашого проекту.",
+      "failed_loading_state_mappings": "Не вдалося завантажити ваші відображення станів. Це може бути пов'язано з проблемою мережі або проблемою з інтеграцією.",
+      "loading_project_states": "Завантаження станів проекту...",
+      "error_loading_states": "Помилка завантаження станів",
+      "no_states_available": "Стани недоступні",
+      "no_permission_states": "У вас немає дозволу на доступ до станів для цього проекту",
+      "states_not_found": "Стани проекту не знайдено",
+      "server_error_states": "Помилка сервера при завантаженні станів"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Підключайте та синхронізуйте ваші репозиторії Bitbucket Data Center з Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Перевірка токенів зовнішніх IdP для доступу до API.",
+    "header_description": "Перевіряйте зовнішні OIDC/JWT-токени від вашого IdP (Azure AD, Okta тощо) для доступу до API Plane.",
+    "connected": "Підключено",
+    "connect": "Підключити",
+    "uninstall": "Видалити",
+    "uninstalling": "Видалення...",
+    "install_success": "OAuth Bridge успішно встановлено.",
+    "install_error": "Не вдалося встановити OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge видалено.",
+    "uninstall_error": "Не вдалося видалити OAuth Bridge.",
+    "token_providers": "Провайдери токенів",
+    "token_providers_description": "Налаштуйте зовнішні IdP, чиї JWT приймаються як облікові дані API.",
+    "add_provider": "Додати провайдера",
+    "edit_provider": "Редагувати провайдера",
+    "enabled": "Увімкнено",
+    "disabled": "Вимкнено",
+    "test": "Тест",
+    "no_providers_title": "Провайдери не налаштовані.",
+    "no_providers_description": "Додайте IdP для увімкнення автентифікації за зовнішніми токенами.",
+    "provider_updated": "Провайдера оновлено.",
+    "provider_added": "Провайдера додано.",
+    "provider_save_error": "Не вдалося зберегти провайдера.",
+    "provider_deleted": "Провайдера видалено.",
+    "provider_delete_error": "Не вдалося видалити провайдера.",
+    "provider_update_error": "Не вдалося оновити провайдера.",
+    "jwks_reachable": "JWKS доступний",
+    "jwks_unreachable": "JWKS недоступний",
+    "jwks_test_error": "Не вдалося отримати JWKS з налаштованого URL.",
+    "provider_form": {
+      "name_label": "Назва",
+      "name_placeholder": "напр. Azure AD Production",
+      "name_description": "Зрозуміла назва для цього провайдера ідентифікації",
+      "name_required": "Назва обов'язкова.",
+      "issuer_label": "Видавець",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Очікуване значення claim iss у JWT",
+      "issuer_required": "Видавець обов'язковий.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "HTTPS-ендпоінт, що надає JSON Web Key Set провайдера",
+      "jwks_url_required": "URL JWKS обов'язковий.",
+      "jwks_url_https": "URL JWKS повинен використовувати HTTPS.",
+      "audience_label": "Аудиторія",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Очікувані claim(и) aud у JWT, через кому.",
+      "user_claims_label": "Claim користувача",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "JWT claim, що містить email користувача",
+      "user_claims_required": "Claim користувача обов'язковий.",
+      "allowed_algorithms_label": "Дозволені алгоритми підпису",
+      "allowed_algorithms_description": "Асиметричні алгоритми для перевірки підпису JWT",
+      "allowed_algorithms_required": "Потрібен хоча б один алгоритм.",
+      "select_algorithms": "Оберіть алгоритми",
+      "jwks_cache_ttl_label": "TTL кешу JWKS (секунди)",
+      "jwks_cache_ttl_description": "Тривалість кешування ключів JWKS провайдера (мінімум 60 сек., за замовчуванням 24 години)",
+      "jwks_cache_ttl_min": "TTL кешу повинен бути не менше 60 секунд.",
+      "rate_limit_label": "Обмеження запитів",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Обмеження запитів у форматі кількість/період (напр. 120/minute). Залиште порожнім для обмеження за замовчуванням.",
+      "enable_provider": "Увімкнути цього провайдера",
+      "saving": "Збереження...",
+      "update": "Оновити"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Підключіть та синхронізуйте вашу організацію GitHub Enterprise з Плейн.",
+    "app_form_title": "Налаштування GitHub Enterprise",
+    "app_form_description": "Налаштуйте GitHub Enterprise для підключення до Плейн.",
+    "app_id_title": "ID Застосунку",
+    "app_id_description": "ID вашого застосунку в організації GitHub Enterprise.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID є обов'язковим",
+    "app_name_title": "Слаг Застосунку",
+    "app_name_description": "Слаг вашого застосунку в організації GitHub Enterprise.",
+    "app_name_error": "Слаг застосунку є обов'язковим",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "Базова URL",
+    "base_url_description": "Базова URL вашої організації GitHub Enterprise.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "Базова URL є обов'язковою",
+    "invalid_base_url_error": "Недійсна базова URL",
+    "client_id_title": "ID Клієнта",
+    "client_id_description": "ID клієнта вашого застосунку в організації GitHub Enterprise.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID клієнта є обов'язковим",
+    "client_secret_title": "Секретний Клієнт",
+    "client_secret_description": "Секретний ключ вашого застосунку в організації GitHub Enterprise.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Секретний ключ є обов'язковим",
+    "webhook_secret_title": "Секретний Webhook",
+    "webhook_secret_description": "Секретний ключ вашого застосунку в організації GitHub Enterprise.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Секретний ключ webhook є обов'язковим",
+    "private_key_title": "Приватний Ключ (Base64)",
+    "private_key_description": "Base64 закодований приватний ключ вашого застосунку в організації GitHub Enterprise.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Приватний ключ є обов'язковим",
+    "connect_app": "Підключити Застосунок"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Надані параметри запиту недійсні або відсутні обов'язкові поля",
+    "invalid_installation_account": "Наданий аккаунт інсталяції недійсний",
+    "generic_error": "Під час обробки вашого запиту сталася неочікувана помилка",
+    "connection_not_found": "Запитане підключення не знайдено",
+    "multiple_connections_found": "Знайдено кілька підключень, коли очікувалося лише одне",
+    "cannot_create_multiple_connections": "Ви вже підключили вашу організацію до робочого простору. Будь ласка, відключіть існуюче підключення перед створенням нового.",
+    "installation_not_found": "Запитана інсталяція не знайдена",
+    "user_not_found": "Запитаний користувач не знайдений",
+    "error_fetching_token": "Не вдалося отримати токен аутентифікації",
+    "invalid_app_credentials": "Наданий токен аутентифікації недійсний",
+    "invalid_app_installation_id": "Не вдалося встановити застосунок"
+  },
+  "import_status": {
+    "queued": "В черзі",
+    "created": "Створено",
+    "initiated": "Ініційовано",
+    "pulling": "Отримання",
+    "timed_out": "Час вийшов",
+    "pulled": "Отримано",
+    "progressing": "Виконується",
+    "transforming": "Трансформація",
+    "transformed": "Трансформовано",
+    "pushing": "Надсилання",
+    "finished": "Завершено",
+    "error": "Помилка",
+    "cancelled": "Скасовано"
+  }
+}
diff --git a/packages/i18n/src/locales/ua/module.json b/packages/i18n/src/locales/ua/module.json
new file mode 100644
index 0000000..1619776
--- /dev/null
+++ b/packages/i18n/src/locales/ua/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {Модуль} few {Модулі} other {Модулів}}",
+    "no_module": "Немає модуля",
+    "select": "Додати модулі"
+  }
+}
diff --git a/packages/i18n/src/locales/ua/navigation.json b/packages/i18n/src/locales/ua/navigation.json
new file mode 100644
index 0000000..742ef12
--- /dev/null
+++ b/packages/i18n/src/locales/ua/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Немає результатів"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Стікі",
+    "your_work": "Ваша робота",
+    "projects": "Проєкти",
+    "pages": "Сторінки",
+    "new_work_item": "Нова робоча одиниця",
+    "home": "Головна",
+    "inbox": "Вхідні",
+    "workspace": "Робочий простір",
+    "views": "Подання",
+    "analytics": "Аналітика",
+    "work_items": "Робочі одиниці",
+    "cycles": "Цикли",
+    "modules": "Модулі",
+    "intake": "Надходження",
+    "drafts": "Чернетки",
+    "favorites": "Вибране",
+    "pro": "Pro",
+    "upgrade": "Підвищити",
+    "pi_chat": "ШІ Чат",
+    "epics": "Епікс",
+    "upgrade_plan": "Апгрейд план",
+    "plane_pro": "Плейн Про",
+    "business": "Бізнес"
+  }
+}
diff --git a/packages/i18n/src/locales/ua/notification.json b/packages/i18n/src/locales/ua/notification.json
new file mode 100644
index 0000000..8e619fd
--- /dev/null
+++ b/packages/i18n/src/locales/ua/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Скринька",
+    "page_label": "{workspace} - Скринька",
+    "options": {
+      "mark_all_as_read": "Позначити все як прочитане",
+      "mark_read": "Позначити як прочитане",
+      "mark_unread": "Позначити як непрочитане",
+      "refresh": "Оновити",
+      "filters": "Фільтри скриньки",
+      "show_unread": "Показати непрочитані",
+      "show_snoozed": "Показати відкладені",
+      "show_archived": "Показати заархівовані",
+      "mark_archive": "Заархівувати",
+      "mark_unarchive": "Повернути з архіву",
+      "mark_snooze": "Відкласти",
+      "mark_unsnooze": "Повернути з відкладених"
+    },
+    "toasts": {
+      "read": "Сповіщення прочитано",
+      "unread": "Позначено як непрочитане",
+      "archived": "Заархівовано",
+      "unarchived": "Повернуто з архіву",
+      "snoozed": "Відкладено",
+      "unsnoozed": "Повернуто з відкладених"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Виберіть елемент, щоб побачити деталі."
+      },
+      "all": {
+        "title": "Немає призначених одиниць",
+        "description": "Тут відображатимуться оновлення щодо призначених вам одиниць."
+      },
+      "mentions": {
+        "title": "Немає згадок",
+        "description": "Тут відображатимуться згадки про вас."
+      }
+    },
+    "tabs": {
+      "all": "Усе",
+      "mentions": "Згадки"
+    },
+    "filter": {
+      "assigned": "Призначені мені",
+      "created": "Створені мною",
+      "subscribed": "Підписані мною"
+    },
+    "snooze": {
+      "1_day": "1 день",
+      "3_days": "3 дні",
+      "5_days": "5 днів",
+      "1_week": "1 тиждень",
+      "2_weeks": "2 тижні",
+      "custom": "Власне"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/page.json b/packages/i18n/src/locales/ua/page.json
new file mode 100644
index 0000000..9605d8e
--- /dev/null
+++ b/packages/i18n/src/locales/ua/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Структура",
+        "empty_state": {
+          "title": "Відсутні заголовки",
+          "description": "Давайте додамо кілька заголовків на цю сторінку, щоб побачити їх тут."
+        }
+      },
+      "info": {
+        "label": "Інформація",
+        "document_info": {
+          "words": "Слова",
+          "characters": "Символи",
+          "paragraphs": "Абзаци",
+          "read_time": "Час читання"
+        },
+        "actors_info": {
+          "edited_by": "Відредаговано",
+          "created_by": "Створено"
+        },
+        "version_history": {
+          "label": "Історія версій",
+          "current_version": "Поточна версія",
+          "highlight_changes": "Виділити зміни"
+        }
+      },
+      "assets": {
+        "label": "Ресурси",
+        "download_button": "Завантажити",
+        "empty_state": {
+          "title": "Відсутні зображення",
+          "description": "Додайте зображення, щоб побачити їх тут."
+        }
+      },
+      "comments": {
+        "label": "Коментарі",
+        "empty_state": {
+          "title": "Немає коментарів",
+          "description": "Додайте коментарі, щоб побачити їх тут."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Назва стікі не може перевищувати 100 символів.",
+        "already_exists": "Вже існує стікі без опису"
+      },
+      "created": {
+        "title": "Стікі створено",
+        "message": "Стікі успішно створено"
+      },
+      "not_created": {
+        "title": "Стікі не створено",
+        "message": "Не вдалося створити стікі"
+      },
+      "updated": {
+        "title": "Стікі оновлено",
+        "message": "Стікі успішно оновлено"
+      },
+      "not_updated": {
+        "title": "Стікі не оновлено",
+        "message": "Не вдалося оновити стікі"
+      },
+      "removed": {
+        "title": "Стікі видалено",
+        "message": "Стікі успішно видалено"
+      },
+      "not_removed": {
+        "title": "Стікі не видалено",
+        "message": "Не вдалося видалити стікі"
+      }
+    },
+    "open_button": "Відкрити панель навігації",
+    "close_button": "Закрити панель навігації",
+    "outline_floating_button": "Відкрити структуру"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Перемістити",
+        "loading": "Переміщення"
+      },
+      "cannot_move_to_teamspace": "Приватні та спільні сторінки не можна перемістити до командного простору.",
+      "placeholders": {
+        "workspace_to_all": "Шукати проєкти та командні простори",
+        "workspace_to_project": "Шукати проєкти",
+        "project_to_all": "Шукати проєкти та командні простори",
+        "project_to_project": "Шукати проєкти",
+        "project_to_all_with_wiki": "Шукати колекції wiki, проєкти та командні простори",
+        "project_to_project_with_wiki": "Шукати колекції wiki та проєкти"
+      },
+      "toasts": {
+        "success": {
+          "title": "Успіх!",
+          "message": "Сторінку успішно переміщено."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося перемістити сторінку. Спробуйте ще раз пізніше."
+        },
+        "collection_error": {
+          "title": "Переміщено до wiki",
+          "message": "Сторінку було переміщено до wiki, але не вдалося додати її до вибраної колекції. Вона залишається в General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Видалити з колекції",
+      "success_message": "Сторінку видалено з колекції.",
+      "error_message": "Не вдалося видалити сторінку з колекції. Спробуйте ще раз."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Досягнуто ліміту вмісту, і живу синхронізацію вимкнено. Створіть нову сторінку або використайте вкладені сторінки, щоб продовжити синхронізацію."
+  }
+}
diff --git a/packages/i18n/src/locales/ua/power-k.json b/packages/i18n/src/locales/ua/power-k.json
new file mode 100644
index 0000000..5e4630f
--- /dev/null
+++ b/packages/i18n/src/locales/ua/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Масове видалення робочих одиниць"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Дії робочої одиниці",
+        "indicator": "Робоча одиниця",
+        "change_state": "Змінити стан",
+        "change_priority": "Змінити пріоритет",
+        "change_assignees": "Призначити",
+        "assign_to_me": "Призначити мені",
+        "unassign_from_me": "Зняти призначення з мене",
+        "change_estimate": "Змінити оцінку",
+        "add_to_cycle": "Додати до циклу",
+        "add_to_modules": "Додати до модулів",
+        "add_labels": "Додати мітки",
+        "subscribe": "Підписатися на сповіщення",
+        "unsubscribe": "Скасувати підписку на сповіщення",
+        "delete": "Видалити",
+        "copy_id": "Скопіювати ID",
+        "copy_id_toast_success": "ID робочої одиниці скопійовано в буфер обміну.",
+        "copy_id_toast_error": "Під час копіювання ID робочої одиниці в буфер обміну сталася помилка.",
+        "copy_title": "Скопіювати назву",
+        "copy_title_toast_success": "Назву робочої одиниці скопійовано в буфер обміну.",
+        "copy_title_toast_error": "Під час копіювання назви робочої одиниці в буфер обміну сталася помилка.",
+        "copy_url": "Скопіювати URL",
+        "copy_url_toast_success": "URL робочої одиниці скопійовано в буфер обміну.",
+        "copy_url_toast_error": "Під час копіювання URL робочої одиниці в буфер обміну сталася помилка."
+      },
+      "cycle": {
+        "title": "Дії циклу",
+        "indicator": "Цикл",
+        "add_to_favorites": "Додати у вибране",
+        "remove_from_favorites": "Вилучити з вибраного",
+        "copy_url": "Скопіювати URL",
+        "copy_url_toast_success": "URL циклу скопійовано в буфер обміну.",
+        "copy_url_toast_error": "Під час копіювання URL циклу в буфер обміну сталася помилка."
+      },
+      "module": {
+        "title": "Дії модуля",
+        "indicator": "Модуль",
+        "add_remove_members": "Додати/видалити учасників",
+        "change_status": "Змінити статус",
+        "add_to_favorites": "Додати у вибране",
+        "remove_from_favorites": "Вилучити з вибраного",
+        "copy_url": "Скопіювати URL",
+        "copy_url_toast_success": "URL модуля скопійовано в буфер обміну.",
+        "copy_url_toast_error": "Під час копіювання URL модуля в буфер обміну сталася помилка."
+      },
+      "page": {
+        "title": "Дії сторінки",
+        "indicator": "Сторінка",
+        "lock": "Заблокувати",
+        "unlock": "Розблокувати",
+        "make_private": "Зробити приватною",
+        "make_public": "Зробити публічною",
+        "archive": "Заархівувати",
+        "restore": "Відновити",
+        "add_to_favorites": "Додати у вибране",
+        "remove_from_favorites": "Вилучити з вибраного",
+        "copy_url": "Скопіювати URL",
+        "copy_url_toast_success": "URL сторінки скопійовано в буфер обміну.",
+        "copy_url_toast_error": "Під час копіювання URL сторінки в буфер обміну сталася помилка."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Нова робоча одиниця",
+      "create_page": "Нова сторінка",
+      "create_view": "Нове подання",
+      "create_cycle": "Новий цикл",
+      "create_module": "Новий модуль",
+      "create_project": "Новий проєкт",
+      "create_workspace": "Новий робочий простір",
+      "create_project_automation": "Нова автоматизація"
+    },
+    "navigation_actions": {
+      "open_workspace": "Відкрити робочий простір",
+      "nav_home": "Перейти на головну",
+      "nav_inbox": "Перейти до вхідних",
+      "nav_your_work": "Перейти до вашої роботи",
+      "nav_account_settings": "Перейти до налаштувань облікового запису",
+      "open_project": "Відкрити проєкт",
+      "nav_projects_list": "Перейти до списку проєктів",
+      "nav_all_workspace_work_items": "Перейти до всіх робочих одиниць",
+      "nav_assigned_workspace_work_items": "Перейти до призначених робочих одиниць",
+      "nav_created_workspace_work_items": "Перейти до створених робочих одиниць",
+      "nav_subscribed_workspace_work_items": "Перейти до підписаних робочих одиниць",
+      "nav_workspace_analytics": "Перейти до аналітики робочого простору",
+      "nav_workspace_drafts": "Перейти до чернеток робочого простору",
+      "nav_workspace_archives": "Перейти до архівів робочого простору",
+      "open_workspace_setting": "Відкрити налаштування робочого простору",
+      "nav_workspace_settings": "Перейти до налаштувань робочого простору",
+      "nav_project_work_items": "Перейти до робочих одиниць",
+      "open_project_cycle": "Відкрити цикл",
+      "nav_project_cycles": "Перейти до циклів",
+      "open_project_module": "Відкрити модуль",
+      "nav_project_modules": "Перейти до модулів",
+      "open_project_view": "Відкрити подання проєкту",
+      "nav_project_views": "Перейти до подань проєкту",
+      "nav_project_pages": "Перейти до сторінок",
+      "nav_project_intake": "Перейти до надходжень",
+      "nav_project_archives": "Перейти до архівів проєкту",
+      "open_project_setting": "Відкрити налаштування проєкту",
+      "nav_project_settings": "Перейти до налаштувань проєкту",
+      "nav_workspace_active_cycle": "Перейти до всіх активних циклів",
+      "nav_project_overview": "Перейти до огляду проєкту"
+    },
+    "account_actions": {
+      "sign_out": "Вийти",
+      "workspace_invites": "Запрошення до робочого простору"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Перемкнути бічну панель застосунку",
+      "copy_current_page_url": "Скопіювати URL поточної сторінки",
+      "copy_current_page_url_toast_success": "URL поточної сторінки скопійовано в буфер обміну.",
+      "copy_current_page_url_toast_error": "Під час копіювання URL поточної сторінки в буфер обміну сталася помилка.",
+      "focus_top_nav_search": "Фокус на полі пошуку"
+    },
+    "preferences_actions": {
+      "update_theme": "Змінити тему інтерфейсу",
+      "update_timezone": "Змінити часовий пояс",
+      "update_start_of_week": "Змінити перший день тижня",
+      "update_language": "Змінити мову інтерфейсу",
+      "toast": {
+        "theme": {
+          "success": "Тему успішно оновлено.",
+          "error": "Не вдалося оновити тему. Спробуйте ще раз."
+        },
+        "timezone": {
+          "success": "Часовий пояс успішно оновлено.",
+          "error": "Не вдалося оновити часовий пояс. Спробуйте ще раз."
+        },
+        "generic": {
+          "success": "Налаштування успішно оновлено.",
+          "error": "Не вдалося оновити налаштування. Спробуйте ще раз."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Відкрити гарячі клавіші",
+      "open_plane_documentation": "Відкрити документацію Plane",
+      "join_forum": "Приєднатися до нашого форуму",
+      "report_bug": "Повідомити про помилку",
+      "chat_with_us": "Поспілкуватися з нами"
+    },
+    "page_placeholders": {
+      "default": "Введіть команду або пошуковий запит",
+      "open_workspace": "Відкрити робочий простір",
+      "open_project": "Відкрити проєкт",
+      "open_workspace_setting": "Відкрити налаштування робочого простору",
+      "open_project_cycle": "Відкрити цикл",
+      "open_project_module": "Відкрити модуль",
+      "open_project_view": "Відкрити подання проєкту",
+      "open_project_setting": "Відкрити налаштування проєкту",
+      "update_work_item_state": "Змінити стан",
+      "update_work_item_priority": "Змінити пріоритет",
+      "update_work_item_assignee": "Призначити",
+      "update_work_item_estimate": "Змінити оцінку",
+      "update_work_item_cycle": "Додати до циклу",
+      "update_work_item_module": "Додати до модулів",
+      "update_work_item_labels": "Додати мітки",
+      "update_module_member": "Змінити учасників",
+      "update_module_status": "Змінити статус",
+      "update_theme": "Змінити тему",
+      "update_timezone": "Змінити часовий пояс",
+      "update_start_of_week": "Змінити перший день тижня",
+      "update_language": "Змінити мову"
+    },
+    "search_menu": {
+      "no_results": "Не знайдено результатів",
+      "clear_search": "Очистити пошук",
+      "go_to_advanced_search": "Перейти до розширеного пошуку"
+    },
+    "footer": {
+      "workspace_level": "Рівень робочого простору"
+    },
+    "group_titles": {
+      "actions": "Дії",
+      "contextual": "Контекстні",
+      "navigation": "Навігація",
+      "create": "Створити",
+      "general": "Загальне",
+      "settings": "Налаштування",
+      "account": "Обліковий запис",
+      "miscellaneous": "Інше",
+      "preferences": "Налаштування",
+      "help": "Довідка"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/project-settings.json b/packages/i18n/src/locales/ua/project-settings.json
new file mode 100644
index 0000000..987be6f
--- /dev/null
+++ b/packages/i18n/src/locales/ua/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Введіть ID проєкту",
+      "please_select_a_timezone": "Виберіть часовий пояс",
+      "archive_project": {
+        "title": "Заархівувати проєкт",
+        "description": "Архівування приховає проєкт із меню. Доступ залишиться через сторінку проєктів.",
+        "button": "Заархівувати проєкт"
+      },
+      "delete_project": {
+        "title": "Видалити проєкт",
+        "description": "Видалення проєкту призведе до знищення всіх даних. Дія незворотна.",
+        "button": "Видалити проєкт"
+      },
+      "toast": {
+        "success": "Проєкт оновлено",
+        "error": "Не вдалося оновити. Спробуйте знову."
+      }
+    },
+    "members": {
+      "label": "Учасники",
+      "project_lead": "Керівник проєкту",
+      "project_lead_description": "Виберіть керівника проєкту.",
+      "default_assignee": "Типовий виконавець",
+      "default_assignee_description": "Виберіть виконавця за замовчуванням для проєкту.",
+      "project_subscribers": "Підписники проєкту",
+      "project_subscribers_description": "Виберіть учасників, які отримуватимуть сповіщення для цього проєкту.",
+      "guest_super_permissions": {
+        "title": "Надати гостям доступ до всіх одиниць:",
+        "sub_heading": "Гості бачитимуть усі одиниці у проєкті."
+      },
+      "invite_members": {
+        "title": "Запросити учасників",
+        "sub_heading": "Запросіть учасників до проєкту.",
+        "select_co_worker": "Вибрати колегу"
+      }
+    },
+    "states": {
+      "heading": "Стани",
+      "description": "Визначайте та налаштовуйте стани робочого процесу для відстеження прогресу ваших робочих одиниць.",
+      "describe_this_state_for_your_members": "Опишіть цей стан для учасників.",
+      "empty_state": {
+        "title": "Немає станів у групі {groupKey}",
+        "description": "Створіть новий стан"
+      }
+    },
+    "labels": {
+      "heading": "Мітки",
+      "description": "Створюйте користувацькі мітки для категоризації та організації ваших робочих одиниць",
+      "label_title": "Назва мітки",
+      "label_title_is_required": "Назва мітки є обов'язковою",
+      "label_max_char": "Назва мітки не може перевищувати 255 символів",
+      "toast": {
+        "error": "Помилка під час оновлення мітки"
+      }
+    },
+    "estimates": {
+      "heading": "Оцінки",
+      "description": "Вони допомагають вам повідомляти про складність та навантаження команди.",
+      "label": "Оцінки",
+      "title": "Увімкнути оцінки для мого проєкту",
+      "enable_description": "Вони допомагають вам повідомляти про складність та навантаження команди.",
+      "no_estimate": "Без оцінки",
+      "new": "Нова система оцінок",
+      "create": {
+        "custom": "Власний",
+        "start_from_scratch": "Почати з нуля",
+        "choose_template": "Вибрати шаблон",
+        "choose_estimate_system": "Вибрати систему оцінок",
+        "enter_estimate_point": "Введіть оцінку",
+        "step": "Крок {step} з {total}",
+        "label": "Створити оцінку"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Оцінку створено",
+            "message": "Оцінку успішно створено"
+          },
+          "error": {
+            "title": "Не вдалося створити оцінку",
+            "message": "Не вдалося створити нову оцінку, спробуйте ще раз."
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Оцінку змінено",
+            "message": "Оцінку оновлено у вашому проєкті."
+          },
+          "error": {
+            "title": "Не вдалося змінити оцінку",
+            "message": "Не вдалося змінити оцінку, спробуйте ще раз"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Успіх!",
+            "message": "Оцінки увімкнено."
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Успіх!",
+            "message": "Оцінки вимкнено."
+          },
+          "error": {
+            "title": "Помилка!",
+            "message": "Не вдалося вимкнути оцінку. Спробуйте ще раз"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Оцінки переупорядковано",
+            "message": "Оцінки були переупорядковані у вашому проєкті."
+          },
+          "error": {
+            "title": "Не вдалося переупорядкувати оцінки",
+            "message": "Ми не змогли переупорядкувати оцінки, спробуйте ще раз"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Систему оцінок створено",
+            "message": "Успішно створено та увімкнено"
+          },
+          "error": {
+            "title": "Помилка",
+            "message": "Щось пішло не так"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Оцінка має бути більшою за 0.",
+        "unable_to_process": "Не вдалося обробити ваш запит, спробуйте ще раз.",
+        "numeric": "Оцінка має бути числовим значенням.",
+        "character": "Оцінка має бути символьним значенням.",
+        "empty": "Значення оцінки не може бути порожнім.",
+        "already_exists": "Таке значення оцінки вже існує.",
+        "unsaved_changes": "У вас є незбережені зміни. Збережіть їх перед тим, як натиснути 'готово'",
+        "remove_empty": "Оцінка не може бути порожньою. Введіть значення в кожне поле або видаліть ті, для яких у вас немає значень.",
+        "fill": "Будь ласка, заповніть це поле оцінки",
+        "repeat": "Значення оцінки не може повторюватися"
+      },
+      "systems": {
+        "points": {
+          "label": "Бали",
+          "fibonacci": "Фібоначчі",
+          "linear": "Лінійна",
+          "squares": "Квадрати",
+          "custom": "Власна"
+        },
+        "categories": {
+          "label": "Категорії",
+          "t_shirt_sizes": "Розміри футболок",
+          "easy_to_hard": "Від легкого до складного",
+          "custom": "Власна"
+        },
+        "time": {
+          "label": "Час",
+          "hours": "Години"
+        }
+      },
+      "edit": {
+        "title": "Редагувати систему оцінок",
+        "add_or_update": {
+          "title": "Додати, оновити або видалити оцінки",
+          "description": "Керуйте поточною системою, додаючи, оновлюючи або видаляючи бали чи категорії."
+        },
+        "switch": {
+          "title": "Змінити тип оцінки",
+          "description": "Конвертуйте вашу систему балів у систему категорій і навпаки."
+        }
+      },
+      "switch": "Перемкнути систему оцінок",
+      "current": "Поточна система оцінок",
+      "select": "Виберіть систему оцінок"
+    },
+    "automations": {
+      "label": "Автоматизація",
+      "heading": "Автоматизації",
+      "description": "Налаштовуйте автоматичні дії, щоб спростити управління робочим процесом та зменшити ручну роботу.",
+      "auto-archive": {
+        "title": "Автоматично архівувати закриті одиниці",
+        "description": "Plane архівуватиме завершені або скасовані одиниці.",
+        "duration": "Архівувати одиниці, закриті понад"
+      },
+      "auto-close": {
+        "title": "Автоматично закривати одиниці",
+        "description": "Plane закриватиме неактивні одиниці.",
+        "duration": "Закривати одиниці, що неактивні понад",
+        "auto_close_status": "Стан для автоматичного закриття"
+      },
+      "auto-remind": {
+        "title": "Автоматичні сповіщення",
+        "description": "Plane автоматично буде надсилати сповіщення через email та в додатку, щоб ваша команда залишалася на шляху до термінів.",
+        "duration": "Надіслати сповіщення заздалегідь"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Немає міток",
+        "description": "Створіть мітки для організації робочих одиниць."
+      },
+      "estimates": {
+        "title": "Немає систем оцінок",
+        "description": "Створіть систему оцінок, щоб відображати навантаження.",
+        "primary_button": "Додати систему оцінок"
+      },
+      "integrations": {
+        "title": "Немає налаштованих інтеграцій",
+        "description": "Налаштуйте GitHub та інші інтеграції для синхронізації ваших проджектних робочих елементів."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Увімкнути воркфлоу",
+        "description": "Налаштуйте воркфлоу для керування рухом робочих одиниць",
+        "no_states_tooltip": "Стани не додано до воркфлоу.",
+        "no_work_item_types_tooltip": "Типи робочих одиниць не додано до воркфлоу.",
+        "no_states_or_work_item_types_tooltip": "Стани або типи робочих одиниць не додано до воркфлоу.",
+        "toast": {
+          "loading": {
+            "enabling": "Увімкнення воркфлоу",
+            "disabling": "Вимкнення воркфлоу"
+          },
+          "success": {
+            "title": "Успіх!",
+            "message": "Воркфлоу успішно увімкнено."
+          },
+          "error": {
+            "title": "Помилка!",
+            "message": "Не вдалося увімкнути воркфлоу. Спробуйте ще раз."
+          }
+        }
+      },
+      "heading": "Воркфлоу",
+      "description": "Автоматизуйте переходи робочих одиниць і встановлюйте правила, які визначають, як завдання рухаються у конвеєрі вашого проєкту.",
+      "add_button": "Додати новий воркфлоу",
+      "search": "Шукати воркфлоу",
+      "detail": {
+        "define": "Визначити воркфлоу",
+        "add_states": "Додати стани",
+        "unmapped_states": {
+          "title": "Виявлено незіставлені стани",
+          "description": "Деякі робочі одиниці вибраних типів наразі перебувають у станах, яких немає в цьому воркфлоу.",
+          "note": "Якщо ви увімкнете цей воркфлоу, такі елементи автоматично перейдуть у початковий стан цього воркфлоу.",
+          "label": "Відсутні стани",
+          "tooltip": "Деякі робочі одиниці перебувають у станах, які не зіставлені з цим воркфлоу. Відкрийте воркфлоу для перегляду."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Усі стани використовуються",
+          "description": "Усі визначені стани цього проєкту вже присутні у вашому поточному воркфлоу."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Цей воркфлоу застосовується до будь-якого типу робочої одиниці, який не прив'язаний до воркфлоу."
+      },
+      "create": {
+        "heading": "Створити новий воркфлоу",
+        "name": {
+          "placeholder": "Введіть унікальну назву",
+          "validation": {
+            "max_length": "Назва має бути коротшою за 255 символів",
+            "required": "Назва обов'язкова",
+            "invalid": "Назва може містити лише літери, цифри, пробіли, дефіси й апострофи"
+          }
+        },
+        "description": {
+          "placeholder": "Додайте короткий опис",
+          "validation": {
+            "invalid": "Опис може містити лише літери, цифри, пробіли, дефіси й апострофи"
+          }
+        },
+        "work_item_type": {
+          "label": "Тип робочої одиниці"
+        },
+        "success": {
+          "title": "Успіх!",
+          "message": "Воркфлоу успішно створено."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося створити воркфлоу. Спробуйте ще раз."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Успіх!",
+          "message": "Воркфлоу успішно оновлено."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося оновити воркфлоу. Спробуйте ще раз."
+        }
+      },
+      "delete": {
+        "loading": "Видалення воркфлоу",
+        "success": {
+          "title": "Успіх!",
+          "message": "Воркфлоу успішно видалено."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося видалити воркфлоу. Спробуйте ще раз."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Успіх!",
+          "message": "Стани успішно додано."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося додати стани. Спробуйте ще раз."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Типи робочих одиниць",
+      "description": "Створюйте та налаштовуйте різні типи робочих одиниць з унікальними властивостями"
+    },
+    "features": {
+      "cycles": {
+        "title": "Цикли",
+        "short_title": "Цикли",
+        "description": "Плануйте роботу в гнучких періодах, які адаптуються до унікального ритму та темпу цього проекту.",
+        "toggle_title": "Увімкнути цикли",
+        "toggle_description": "Плануйте роботу в цілеспрямовані періоди часу."
+      },
+      "modules": {
+        "title": "Модулі",
+        "short_title": "Модулі",
+        "description": "Організуйте роботу в підпроекти з виділеними керівниками та виконавцями.",
+        "toggle_title": "Увімкнути модулі",
+        "toggle_description": "Учасники проекту зможуть створювати та редагувати модулі."
+      },
+      "views": {
+        "title": "Перегляди",
+        "short_title": "Перегляди",
+        "description": "Зберігайте користувацькі сортування, фільтри та параметри відображення або діліться ними з командою.",
+        "toggle_title": "Увімкнути перегляди",
+        "toggle_description": "Учасники проекту зможуть створювати та редагувати перегляди."
+      },
+      "pages": {
+        "title": "Сторінки",
+        "short_title": "Сторінки",
+        "description": "Створюйте та редагуйте вільний контент: нотатки, документи, що завгодно.",
+        "toggle_title": "Увімкнути сторінки",
+        "toggle_description": "Учасники проекту зможуть створювати та редагувати сторінки."
+      },
+      "intake": {
+        "intake_responsibility": "Відповідальність за прийом",
+        "intake_sources": "Джерела прийому",
+        "title": "Прийом",
+        "short_title": "Прийом",
+        "description": "Дозвольте не-учасникам ділитися помилками, відгуками та пропозиціями; не порушуючи ваш робочий процес.",
+        "toggle_title": "Увімкнути прийом",
+        "toggle_description": "Дозволити учасникам проекту створювати запити на прийом в додатку.",
+        "toggle_tooltip_on": "Попросіть адміністратора проекту увімкнути.",
+        "toggle_tooltip_off": "Попросіть адміністратора проекту вимкнути.",
+        "notify_assignee": {
+          "title": "Сповістити призначених",
+          "description": "Для нового запиту на прийом призначені за замовчуванням будуть сповіщені через сповіщення"
+        },
+        "in_app": {
+          "title": "В додатку",
+          "description": "Отримуйте нові робочі елементи від учасників та гостей у вашому робочому просторі без порушення наявних."
+        },
+        "email": {
+          "title": "Ел. пошта",
+          "description": "Збирайте нові робочі елементи від усіх, хто надсилає листа на адресу Plane.",
+          "fieldName": "ID ел. пошти"
+        },
+        "form": {
+          "title": "Форми",
+          "description": "Дозвольте людям поза робочим простором створювати потенційні нові робочі елементи через виділену безпечну форму.",
+          "fieldName": "URL форми за замовчуванням",
+          "create_forms": "Створюйте форми за типами робочих елементів",
+          "manage_forms": "Керувати формами",
+          "manage_forms_tooltip": "Попросіть адміністратора робочого простору керувати.",
+          "create_form": "Створити форму",
+          "edit_form": "Редагувати деталі форми",
+          "form_title": "Назва форми",
+          "form_title_required": "Назва форми обов'язкова",
+          "work_item_type": "Тип робочого елемента",
+          "remove_property": "Видалити властивість",
+          "select_properties": "Вибрати властивості",
+          "search_placeholder": "Шукати властивості",
+          "toasts": {
+            "success_create": "Форму прийому успішно створено",
+            "success_update": "Форму прийому успішно оновлено",
+            "error_create": "Не вдалося створити форму прийому",
+            "error_update": "Не вдалося оновити форму прийому"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Встановлення призначених...",
+            "success": {
+              "title": "Успіх!",
+              "message": "Призначені успішно встановлені."
+            },
+            "error": {
+              "title": "Помилка!",
+              "message": "Щось пішло не так під час встановлення призначених. Будь ласка, спробуйте ще раз."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Відстеження часу",
+        "short_title": "Відстеження часу",
+        "description": "Записуйте час, витрачений на робочі елементи та проекти.",
+        "toggle_title": "Увімкнути відстеження часу",
+        "toggle_description": "Учасники проекту зможуть записувати відпрацьований час."
+      },
+      "milestones": {
+        "title": "Віхи",
+        "short_title": "Віхи",
+        "description": "Віхи забезпечують рівень для вирівнювання робочих елементів до спільних дат завершення.",
+        "toggle_title": "Увімкнути віхи",
+        "toggle_description": "Організуйте робочі елементи за термінами віх."
+      },
+      "toasts": {
+        "loading": "Оновлення функції проєкту...",
+        "success": "Функцію проєкту успішно оновлено.",
+        "error": "Щось пішло не так під час оновлення функції проєкту. Спробуйте ще раз."
+      }
+    },
+    "project_updates": {
+      "heading": "Оновлення проєкту",
+      "description": "Консолідоване відстеження та моніторинг прогресу для цього проєкту"
+    },
+    "templates": {
+      "heading": "Шаблони",
+      "description": "Заощаджуйте 80% часу, витраченого на створення проєктів, робочих одиниць і сторінок, коли ви використовуєте шаблони."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Автоматичне планування циклів",
+        "description": "Підтримуйте рух циклів без ручного налаштування.",
+        "tooltip": "Автоматично створюйте нові цикли на основі обраного розкладу.",
+        "edit_button": "Редагувати",
+        "form": {
+          "cycle_title": {
+            "label": "Назва циклу",
+            "placeholder": "Назва",
+            "tooltip": "До назви будуть додані номери для наступних циклів. Наприклад: Дизайн - 1/2/3",
+            "validation": {
+              "required": "Назва циклу є обов'язковою",
+              "max_length": "Назва не повинна перевищувати 255 символів"
+            }
+          },
+          "cycle_duration": {
+            "label": "Тривалість циклу",
+            "unit": "Тижні",
+            "validation": {
+              "required": "Тривалість циклу є обов'язковою",
+              "min": "Тривалість циклу повинна бути щонайменше 1 тиждень",
+              "max": "Тривалість циклу не може перевищувати 30 тижнів",
+              "positive": "Тривалість циклу має бути додатною"
+            }
+          },
+          "cooldown_period": {
+            "label": "Період охолодження",
+            "unit": "днів",
+            "tooltip": "Пауза між циклами перед початком наступного.",
+            "validation": {
+              "required": "Період охолодження є обов'язковим",
+              "negative": "Період охолодження не може бути від'ємним"
+            }
+          },
+          "start_date": {
+            "label": "День початку циклу",
+            "validation": {
+              "required": "Дата початку є обов'язковою",
+              "past": "Дата початку не може бути в минулому"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Кількість майбутніх циклів",
+            "validation": {
+              "required": "Кількість циклів є обов'язковою",
+              "min": "Потрібен принаймні 1 цикл",
+              "max": "Неможливо запланувати більше 3 циклів"
+            }
+          },
+          "auto_rollover": {
+            "label": "Автоматичне перенесення робочих елементів",
+            "tooltip": "У день завершення циклу перемістити всі незавершені робочі елементи в наступний цикл."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Увімкнення автоматичного планування циклів",
+            "loading_disable": "Вимкнення автоматичного планування циклів",
+            "success": {
+              "title": "Успішно!",
+              "message": "Автоматичне планування циклів успішно перемкнуто."
+            },
+            "error": {
+              "title": "Помилка!",
+              "message": "Не вдалося перемкнути автоматичне планування циклів."
+            }
+          },
+          "save": {
+            "loading": "Збереження конфігурації автоматичного планування циклів",
+            "success": {
+              "title": "Успішно!",
+              "message_create": "Конфігурацію автоматичного планування циклів успішно збережено.",
+              "message_update": "Конфігурацію автоматичного планування циклів успішно оновлено."
+            },
+            "error": {
+              "title": "Помилка!",
+              "message_create": "Не вдалося зберегти конфігурацію автоматичного планування циклів.",
+              "message_update": "Не вдалося оновити конфігурацію автоматичного планування циклів."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/project.json b/packages/i18n/src/locales/ua/project.json
new file mode 100644
index 0000000..7cf6713
--- /dev/null
+++ b/packages/i18n/src/locales/ua/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Створено",
+      "updated_at": "Оновлено",
+      "name": "Назва"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Додати цикл",
+    "more_details": "Докладніше",
+    "cycle": "Цикл",
+    "update_cycle": "Оновити цикл",
+    "create_cycle": "Створити цикл",
+    "no_matching_cycles": "Немає циклів за цим запитом",
+    "remove_filters_to_see_all_cycles": "Приберіть фільтри, щоб побачити всі цикли",
+    "remove_search_criteria_to_see_all_cycles": "Приберіть критерії пошуку, щоб побачити всі цикли",
+    "only_completed_cycles_can_be_archived": "Архівувати можна лише завершені цикли",
+    "start_date": "Дата початку",
+    "end_date": "Дата завершення",
+    "in_your_timezone": "У вашому часовому поясі",
+    "transfer_work_items": "Перенести {count} робочих одиниць",
+    "transfer": {
+      "no_cycles_available": "Немає інших циклів для переміщення робочих елементів."
+    },
+    "date_range": "Діапазон дат",
+    "add_date": "Додати дату",
+    "active_cycle": {
+      "label": "Активний цикл",
+      "progress": "Прогрес",
+      "chart": "Burndown-графік",
+      "priority_issue": "Найпріоритетніші одиниці",
+      "assignees": "Призначені",
+      "issue_burndown": "Burndown робочих одиниць",
+      "ideal": "Ідеальний",
+      "current": "Поточний",
+      "labels": "Мітки",
+      "trailing": "Відставання",
+      "leading": "Випередження"
+    },
+    "upcoming_cycle": {
+      "label": "Майбутній цикл"
+    },
+    "completed_cycle": {
+      "label": "Завершений цикл"
+    },
+    "status": {
+      "days_left": "Залишилося днів",
+      "completed": "Завершено",
+      "yet_to_start": "Ще не почався",
+      "in_progress": "У процесі",
+      "draft": "Чернетка"
+    },
+    "action": {
+      "restore": {
+        "title": "Відновити цикл",
+        "success": {
+          "title": "Цикл відновлено",
+          "description": "Цикл було відновлено."
+        },
+        "failed": {
+          "title": "Не вдалося відновити цикл",
+          "description": "Відновити цикл не вдалося."
+        }
+      },
+      "favorite": {
+        "loading": "Додавання у вибране",
+        "success": {
+          "description": "Цикл додано у вибране.",
+          "title": "Успіх!"
+        },
+        "failed": {
+          "description": "Не вдалося додати у вибране.",
+          "title": "Помилка!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Вилучення з вибраного",
+        "success": {
+          "description": "Цикл вилучено з вибраного.",
+          "title": "Успіх!"
+        },
+        "failed": {
+          "description": "Не вдалося вилучити з вибраного.",
+          "title": "Помилка!"
+        }
+      },
+      "update": {
+        "loading": "Оновлення циклу",
+        "success": {
+          "description": "Цикл оновлено.",
+          "title": "Успіх!"
+        },
+        "failed": {
+          "description": "Не вдалося оновити цикл.",
+          "title": "Помилка!"
+        },
+        "error": {
+          "already_exists": "Цикл із цими датами вже існує. Для чернетки видаліть дати."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Групуйте роботу за циклами.",
+        "description": "Обмежуйте роботу в часі, слідкуйте за крайніми строками та рухайтеся вперед.",
+        "primary_button": {
+          "text": "Створіть перший цикл",
+          "comic": {
+            "title": "Цикли — це повторювані періоди.",
+            "description": "Спрайт, ітерація або будь-який інший період часу для відстеження роботи."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "У циклі немає робочих одиниць",
+        "description": "Додайте ті одиниці, які хочете відстежувати.",
+        "primary_button": {
+          "text": "Створити одиницю"
+        },
+        "secondary_button": {
+          "text": "Додати наявну одиницю"
+        }
+      },
+      "completed_no_issues": {
+        "title": "У циклі немає робочих одиниць",
+        "description": "Одиниці переміщено або приховано. Щоб побачити їх, змініть властивості."
+      },
+      "active": {
+        "title": "Немає активного циклу",
+        "description": "Активний цикл — це цикл, що містить сьогоднішню дату. Відстежуйте його прогрес тут."
+      },
+      "archived": {
+        "title": "Немає заархівованих циклів",
+        "description": "Заархівуйте завершені цикли, щоб не захаращувати список."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Зберігайте фільтри як подання.",
+        "description": "Подання — це збережені фільтри для швидкого доступу. Діліться ними з командою.",
+        "primary_button": {
+          "text": "Створити перше подання",
+          "comic": {
+            "title": "Подання працюють з властивостями одиниць.",
+            "description": "Створіть подання з потрібними фільтрами."
+          }
+        },
+        "filter": {
+          "title": "Немає відповідних подань",
+          "description": "Жодне подання не відповідає критеріям пошуку.\n Натомість створіть нове подання."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Поки що немає заархівованих робочих одиниць",
+        "description": "Вручну або через автоматизацію ви можете архівувати робочі одиниці, які завершено або скасовано. Знайдіть їх тут після архівування.",
+        "primary_button": {
+          "text": "Налаштувати автоматизацію"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Не знайдено робочих одиниць за застосованими фільтрами",
+        "secondary_button": {
+          "text": "Очистити всі фільтри"
+        }
+      },
+      "public": {
+        "title": "Поки що немає публічних сторінок",
+        "description": "Переглядайте сторінки, якими поділилися з усіма у вашому проєкті, просто тут.",
+        "primary_button": {
+          "text": "Створити першу сторінку"
+        }
+      },
+      "archived": {
+        "title": "Поки що немає заархівованих сторінок",
+        "description": "Архівуйте сторінки, які не у вас на контролі. Отримайте доступ до них тут, коли знадобиться."
+      },
+      "shared": {
+        "title": "Поки що немає спільних сторінок",
+        "description": "Сторінки, якими з вами поділилися, з'являться тут."
+      }
+    },
+    "delete_view": {
+      "title": "Ви впевнені, що хочете видалити це подання?",
+      "content": "Якщо ви підтвердите, всі параметри сортування, фільтрації та відображення + макет, який ви обрали для цього подання, будуть безповоротно видалені без можливості відновлення."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Створіть і призначте робочу одиницю",
+        "description": "Робочі одиниці — це завдання, які ви призначаєте собі чи команді. Відстежуйте їхній прогрес.",
+        "primary_button": {
+          "text": "Створити першу одиницю",
+          "comic": {
+            "title": "Робочі одиниці — будівельні блоки",
+            "description": "Наприклад: редизайн інтерфейсу, ребрендинг, нова система."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Немає заархівованих одиниць",
+        "description": "Архівуйте завершені чи скасовані одиниці. Налаштуйте автоматизацію.",
+        "primary_button": {
+          "text": "Налаштувати автоматизацію"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Немає одиниць за цим фільтром",
+        "secondary_button": {
+          "text": "Скинути фільтри"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Додати модуль",
+    "update_module": "Оновити модуль",
+    "create_module": "Створити модуль",
+    "archive_module": "Заархівувати модуль",
+    "restore_module": "Відновити модуль",
+    "delete_module": "Видалити модуль",
+    "empty_state": {
+      "general": {
+        "title": "Об'єднуйте ключові етапи в модулі.",
+        "description": "Модулі структурують одиниці під окремими логічними компонентами. Відстежуйте крайні строки та прогрес.",
+        "primary_button": {
+          "text": "Створити перший модуль",
+          "comic": {
+            "title": "Модулі — це ієрархічні об'єднання.",
+            "description": "Наприклад: модуль кошика, шасі, складу."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "У модулі немає одиниць",
+        "description": "Додайте одиниці до модуля.",
+        "primary_button": {
+          "text": "Створити одиниці"
+        },
+        "secondary_button": {
+          "text": "Додати наявну одиницю"
+        }
+      },
+      "archived": {
+        "title": "Немає заархівованих модулів",
+        "description": "Архівуйте завершені або скасовані модулі."
+      },
+      "sidebar": {
+        "in_active": "Модуль неактивний.",
+        "invalid_date": "Неправильна дата. Вкажіть коректну."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Заархівувати модуль",
+      "archive_module_description": "Архівувати можна лише завершені/скасовані модулі.",
+      "delete_module": "Видалити модуль"
+    },
+    "toast": {
+      "copy": {
+        "success": "Посилання на модуль скопійовано"
+      },
+      "delete": {
+        "success": "Модуль видалено",
+        "error": "Не вдалося видалити"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Пишіть нотатки, документи або базу знань із допомогою AI Galileo.",
+        "description": "Сторінки — це простір для ідей. Пишіть, форматуйте, вбудовуйте робочі одиниці та використовуйте компоненти.",
+        "primary_button": {
+          "text": "Створити першу сторінку"
+        }
+      },
+      "private": {
+        "title": "Немає приватних сторінок",
+        "description": "Ви можете зберігати сторінки лише для себе. Поділіться, коли будете готові.",
+        "primary_button": {
+          "text": "Створити сторінку"
+        }
+      },
+      "public": {
+        "title": "Немає публічних сторінок",
+        "description": "Тут з’являться сторінки, якими діляться в проєкті.",
+        "primary_button": {
+          "text": "Створити сторінку"
+        }
+      },
+      "archived": {
+        "title": "Немає заархівованих сторінок",
+        "description": "Архівуйте сторінки для подальшого перегляду."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Надходження не увімкнені",
+        "description": "Увімкніть надходження в налаштуваннях проєкту, щоб керувати заявками.",
+        "primary_button": {
+          "text": "Керувати функціями"
+        }
+      },
+      "cycle": {
+        "title": "Цикли не увімкнені",
+        "description": "Увімкніть цикли, щоб обмежувати роботу в часі.",
+        "primary_button": {
+          "text": "Керувати функціями"
+        }
+      },
+      "module": {
+        "title": "Модулі не увімкнені",
+        "description": "Увімкніть модулі в налаштуваннях проєкту.",
+        "primary_button": {
+          "text": "Керувати функціями"
+        }
+      },
+      "page": {
+        "title": "Сторінки не увімкнені",
+        "description": "Увімкніть сторінки в налаштуваннях проєкту.",
+        "primary_button": {
+          "text": "Керувати функціями"
+        }
+      },
+      "view": {
+        "title": "Подання не увімкнене",
+        "description": "Увімкніть подання в налаштуваннях проєкту.",
+        "primary_button": {
+          "text": "Керувати функціями"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Backlog",
+      "planned": "Заплановано",
+      "in_progress": "У процесі",
+      "paused": "Призупинено",
+      "completed": "Завершено",
+      "cancelled": "Скасовано"
+    },
+    "layout": {
+      "list": "Список",
+      "board": "Дошка",
+      "timeline": "Шкала часу"
+    },
+    "order_by": {
+      "name": "Назва",
+      "progress": "Прогрес",
+      "issues": "Кількість одиниць",
+      "due_date": "Крайній термін",
+      "created_at": "Дата створення",
+      "manual": "Вручну"
+    }
+  },
+  "project_members": {
+    "full_name": "Повне ім'я",
+    "display_name": "Відображуване ім'я",
+    "email": "Електронна пошта",
+    "joining_date": "Дата приєднання",
+    "role": "Роль"
+  },
+  "project": {
+    "members_import": {
+      "title": "Імпорт учасників з CSV",
+      "description": "Завантажте CSV зі стовпцями: Email та Role (5=Гість, 15=Учасник, 20=Адміністратор). Користувачі вже повинні бути учасниками робочого простору.",
+      "download_sample": "Завантажити зразок CSV",
+      "dropzone": {
+        "active": "Перетягніть CSV файл сюди",
+        "inactive": "Перетягніть або натисніть для завантаження",
+        "file_type": "Підтримуються лише файли .csv"
+      },
+      "buttons": {
+        "cancel": "Скасувати",
+        "import": "Імпортувати",
+        "try_again": "Спробувати знову",
+        "close": "Закрити",
+        "done": "Готово"
+      },
+      "progress": {
+        "uploading": "Завантаження...",
+        "importing": "Імпорт..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Імпорт завершено"
+        },
+        "message": {
+          "success": "Успішно імпортовано {count} учасник{plural} до проєкту.",
+          "no_imports": "З CSV не було імпортовано нових учасників."
+        },
+        "stats": {
+          "added": "Додано",
+          "reactivated": "Повторно активовано",
+          "already_members": "Вже учасники",
+          "skipped": "Пропущено"
+        },
+        "download_errors": "Завантажити деталі пропущених"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Недійсний файл",
+          "message": "Підтримуються лише CSV файли."
+        },
+        "import_failed": {
+          "title": "Імпорт не вдався",
+          "message": "Щось пішло не так."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/settings.json b/packages/i18n/src/locales/ua/settings.json
new file mode 100644
index 0000000..313da74
--- /dev/null
+++ b/packages/i18n/src/locales/ua/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Змінити email",
+        "description": "Введіть нову адресу електронної пошти, щоб отримати посилання для підтвердження.",
+        "toasts": {
+          "success_title": "Успіх!",
+          "success_message": "Email успішно оновлено. Увійдіть знову."
+        },
+        "form": {
+          "email": {
+            "label": "Новий email",
+            "placeholder": "Введіть свій email",
+            "errors": {
+              "required": "Email є обов’язковим",
+              "invalid": "Email недійсний",
+              "exists": "Email уже існує. Використайте інший.",
+              "validation_failed": "Не вдалося підтвердити email. Спробуйте ще раз."
+            }
+          },
+          "code": {
+            "label": "Унікальний код",
+            "placeholder": "123456",
+            "helper_text": "Код підтвердження надіслано на ваш новий email.",
+            "errors": {
+              "required": "Унікальний код є обов’язковим",
+              "invalid": "Недійсний код підтвердження. Спробуйте ще раз."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Продовжити",
+          "confirm": "Підтвердити",
+          "cancel": "Скасувати"
+        },
+        "states": {
+          "sending": "Надсилання…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Налаштування",
+      "description": "Налаштуйте роботу застосунку так, як вам зручно"
+    },
+    "notifications": {
+      "heading": "Сповіщення електронною поштою",
+      "description": "Будьте в курсі робочих одиниць, на які ви підписані. Увімкніть, щоб отримувати сповіщення.",
+      "select_default_view": "Вибрати подання за замовчуванням",
+      "compact": "Компактний",
+      "full": "Повний екран"
+    },
+    "security": {
+      "heading": "Безпека"
+    },
+    "api_tokens": {
+      "title": "Особисті токени доступу",
+      "description": "Генеруйте безпечні API-токени для інтеграції ваших даних із зовнішніми системами та застосунками."
+    },
+    "activity": {
+      "heading": "Активність",
+      "description": "Відстежуйте свої нещодавні дії та зміни в усіх проєктах і робочих одиницях."
+    },
+    "connections": {
+      "title": "Коннекшнс",
+      "heading": "Коннекшнс",
+      "description": "Керуйте налаштуваннями підключень вашого робочого простору."
+    }
+  },
+  "profile": {
+    "label": "Профіль",
+    "page_label": "Ваша робота",
+    "work": "Робота",
+    "details": {
+      "joined_on": "Приєднався",
+      "time_zone": "Часовий пояс"
+    },
+    "stats": {
+      "workload": "Навантаження",
+      "overview": "Огляд",
+      "created": "Створені одиниці",
+      "assigned": "Призначені одиниці",
+      "subscribed": "Підписані одиниці",
+      "state_distribution": {
+        "title": "Одиниці за станом",
+        "empty": "Створіть одиниці, щоб переглянути статистику станів."
+      },
+      "priority_distribution": {
+        "title": "Одиниці за пріоритетом",
+        "empty": "Створіть одиниці, щоб переглянути статистику пріоритетів."
+      },
+      "recent_activity": {
+        "title": "Нещодавня активність",
+        "empty": "Активність не знайдена.",
+        "button": "Завантажити сьогоднішню активність",
+        "button_loading": "Завантаження"
+      }
+    },
+    "actions": {
+      "profile": "Профіль",
+      "security": "Безпека",
+      "activity": "Активність",
+      "preferences": "Налаштування",
+      "notifications": "Сповіщення",
+      "api-tokens": "Особисті токени доступу",
+      "connections": "Коннекшнс"
+    },
+    "tabs": {
+      "summary": "Зведення",
+      "assigned": "Призначено",
+      "created": "Створено",
+      "subscribed": "Підписано",
+      "activity": "Активність"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Немає активності",
+        "description": "Створіть робочу одиницю, щоб почати."
+      },
+      "assigned": {
+        "title": "Немає призначених робочих одиниць",
+        "description": "Тут будуть відображатися одиниці, призначені вам."
+      },
+      "created": {
+        "title": "Немає створених робочих одиниць",
+        "description": "Тут будуть відображатися одиниці, які ви створили."
+      },
+      "subscribed": {
+        "title": "Немає підписаних робочих одиниць",
+        "description": "Підпишіться на потрібні одиниці, й вони з'являться тут."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Системні налаштування"
+      },
+      "light": {
+        "label": "Світла"
+      },
+      "dark": {
+        "label": "Темна"
+      },
+      "light_contrast": {
+        "label": "Світла з високою контрастністю"
+      },
+      "dark_contrast": {
+        "label": "Темна з високою контрастністю"
+      },
+      "custom": {
+        "label": "Користувацька тема"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/stickies.json b/packages/i18n/src/locales/ua/stickies.json
new file mode 100644
index 0000000..163728a
--- /dev/null
+++ b/packages/i18n/src/locales/ua/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Ваші нотатки",
+    "placeholder": "клікніть, щоб почати вводити",
+    "all": "Усі нотатки",
+    "no-data": "Фіксуйте ідеї та думки. Додайте першу нотатку.",
+    "add": "Додати нотатку",
+    "search_placeholder": "Пошук за назвою",
+    "delete": "Видалити нотатку",
+    "delete_confirmation": "Справді видалити цю нотатку?",
+    "empty_state": {
+      "simple": "Фіксуйте ідеї та думки. Додайте першу нотатку.",
+      "general": {
+        "title": "Нотатки — це швидкі записи.",
+        "description": "Записуйте думки та отримуйте до них доступ з будь-якого пристрою.",
+        "primary_button": {
+          "text": "Додати нотатку"
+        }
+      },
+      "search": {
+        "title": "Нотаток не знайдено.",
+        "description": "Спробуйте інший пошуковий запит або створіть нову нотатку.",
+        "primary_button": {
+          "text": "Додати нотатку"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Назва нотатки може бути не більш ніж 100 символів.",
+        "already_exists": "Нотатка без опису вже існує"
+      },
+      "created": {
+        "title": "Нотатку створено",
+        "message": "Нотатку успішно створено"
+      },
+      "not_created": {
+        "title": "Не вдалося створити",
+        "message": "Нотатку не вдалося створити"
+      },
+      "updated": {
+        "title": "Нотатку оновлено",
+        "message": "Нотатку успішно оновлено"
+      },
+      "not_updated": {
+        "title": "Не вдалося оновити",
+        "message": "Нотатку не вдалося оновити"
+      },
+      "removed": {
+        "title": "Нотатку видалено",
+        "message": "Нотатку успішно видалено"
+      },
+      "not_removed": {
+        "title": "Не вдалося видалити",
+        "message": "Нотатку не вдалося видалити"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/template.json b/packages/i18n/src/locales/ua/template.json
new file mode 100644
index 0000000..bea8fa6
--- /dev/null
+++ b/packages/i18n/src/locales/ua/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Темплейти",
+      "description": "Заощаджуйте 80% часу, витраченого на створення проджектів, робочих елементів та пейджів, коли використовуєте темплейти.",
+      "new_project_template": "Новий темплейт проєкту",
+      "new_work_item_template": "Новий темплейт робочої одиниці",
+      "new_page_template": "Новий темплейт сторінки",
+      "options": {
+        "project": {
+          "label": "Проджект темплейти"
+        },
+        "work_item": {
+          "label": "Темплейти робочих елементів"
+        },
+        "page": {
+          "label": "Пейдж темплейти"
+        }
+      },
+      "create_template": {
+        "label": "Створити темплейт",
+        "no_permission": {
+          "project": "Зверніться до адміністратора проджекту, щоб створити темплейти",
+          "workspace": "Зверніться до адміністратора воркспейсу, щоб створити темплейти"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Використати темплейт",
+          "loading": "Використання"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Походить з воркспейсу"
+        },
+        "project": {
+          "info": "Походить з проджекту"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Назвіть ваш проджект темплейт.",
+              "validation": {
+                "required": "Назва темплейту обов'язкова",
+                "maxLength": "Назва темплейту має бути менше 255 символів"
+              }
+            },
+            "description": {
+              "placeholder": "Опишіть, коли і як використовувати цей темплейт."
+            }
+          },
+          "name": {
+            "placeholder": "Назвіть ваш проджект.",
+            "validation": {
+              "required": "Назва проджекту обов'язкова",
+              "maxLength": "Назва проджекту має бути менше 255 символів"
+            }
+          },
+          "description": {
+            "placeholder": "Опишіть мету та цілі цього проджекту."
+          },
+          "button": {
+            "create": "Створити проджект темплейт",
+            "update": "Оновити проджект темплейт"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Назвіть ваш темплейт робочого елемента.",
+              "validation": {
+                "required": "Назва темплейту обов'язкова",
+                "maxLength": "Назва темплейту має бути менше 255 символів"
+              }
+            },
+            "description": {
+              "placeholder": "Опишіть, коли і як використовувати цей темплейт."
+            }
+          },
+          "name": {
+            "placeholder": "Дайте цьому робочому елементу заголовок.",
+            "validation": {
+              "required": "Заголовок робочого елемента обов'язковий",
+              "maxLength": "Заголовок робочого елемента має бути менше 255 символів"
+            }
+          },
+          "description": {
+            "placeholder": "Опишіть цей робочий елемент так, щоб було зрозуміло, чого ви досягнете, коли завершите його."
+          },
+          "button": {
+            "create": "Створити темплейт робочого елемента",
+            "update": "Оновити темплейт робочого елемента"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Назвіть ваш темплейт сторінки.",
+              "validation": {
+                "required": "Назва темплейту обов'язкова",
+                "maxLength": "Назва темплейту має бути менше 255 символів"
+              }
+            },
+            "description": {
+              "placeholder": "Опишіть, коли і як використовувати цей темплейт."
+            }
+          },
+          "name": {
+            "placeholder": "Без назви",
+            "validation": {
+              "maxLength": "Назва сторінки має бути менше 255 символів"
+            }
+          },
+          "button": {
+            "create": "Створити темплейт сторінки",
+            "update": "Оновити темплейт сторінки"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Налаштування публікації} other {Опублікувати в Маркетплейсі}}",
+          "unpublish_action": "Видалити з Маркетплейсу",
+          "title": "Зробіть ваш темплейт знайденим та впізнаваним.",
+          "name": {
+            "label": "Назва темплейту",
+            "placeholder": "Назвіть ваш темплейт",
+            "validation": {
+              "required": "Назва темплейту обов'язкова",
+              "maxLength": "Назва темплейту має бути менше 255 символів"
+            }
+          },
+          "short_description": {
+            "label": "Короткий опис",
+            "placeholder": "Цей темплейт чудово підходить для Проджект Менеджерів, які керують кількома проджектами одночасно.",
+            "validation": {
+              "required": "Короткий опис обов'язковий"
+            }
+          },
+          "description": {
+            "label": "Опис",
+            "placeholder": "Підвищте продуктивність та оптимізуйте комунікацію за допомогою нашої інтеграції Мова-в-Текст.\n• Транскрипція в реальному часі: Миттєво перетворюйте розмовну мову на точний текст.\n• Створення завдань та коментарів: Додавайте завдання, описи та коментарі за допомогою голосових команд.",
+            "validation": {
+              "required": "Опис обов'язковий"
+            }
+          },
+          "category": {
+            "label": "Категорія",
+            "placeholder": "Виберіть, де, на вашу думку, це найкраще підходить. Ви можете вибрати більше однієї.",
+            "validation": {
+              "required": "Потрібна хоча б одна категорія"
+            }
+          },
+          "keywords": {
+            "label": "Ключові слова",
+            "placeholder": "Використовуйте терміни, які, на вашу думку, ваші користувачі будуть шукати при пошуку цього темплейту.",
+            "helperText": "Введіть ключові слова, розділені комами, які, на вашу думку, допоможуть людям знайти це з пошуку.",
+            "validation": {
+              "required": "Потрібно хоча б одне ключове слово"
+            }
+          },
+          "website": {
+            "label": "URL вебсайту",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "Некоректний URL",
+              "maxLength": "URL має бути менше 800 символів"
+            }
+          },
+          "company_name": {
+            "label": "Назва компанії",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Назва компанії обов'язкова",
+              "maxLength": "Назва компанії має бути менше 255 символів"
+            }
+          },
+          "contact_email": {
+            "label": "Email підтримки",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Некоректна email адреса",
+              "maxLength": "Email підтримки має бути менше 255 символів"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Посилання на вашу політику конфіденційності",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "Некоректне посилання",
+              "maxLength": "Посилання має бути менше 800 символів"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Посилання на ваші умови використання",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "Некоректне посилання",
+              "maxLength": "Посилання має бути менше 800 символів"
+            }
+          },
+          "cover_image": {
+            "label": "Додайте зображення обкладинки, яке буде відображатися на ринку",
+            "upload_title": "Завантажити зображення обкладинки",
+            "upload_placeholder": "Натисніть для завантаження або перетягніть зображення обкладинки",
+            "drop_here": "Відпустіть тут",
+            "click_to_upload": "Натисніть для завантаження",
+            "invalid_file_or_exceeds_size_limit": "Недійсний файл або перевищує ліміт розміру. Будь ласка, спробуйте ще раз.",
+            "upload_and_save": "Завантажити та зберегти",
+            "uploading": "Завантаження",
+            "remove": "Видалити",
+            "removing": "Видалення",
+            "validation": {
+              "required": "Зображення обкладинки обов'язкове"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Додайте документи та зображення, які, на вашу думку, допоможуть переглядачам цього темплейту.",
+            "validation": {
+              "required": "Потрібен хоча б один скріншот"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Темплейти",
+        "description": "З темплейтами проджектів, робочих елементів та пейджів у Плейн, вам не доведеться створювати проджект з нуля або вручну налаштовувати пропси робочих елементів.",
+        "sub_description": "Поверніть 80% часу адміністрування, коли використовуєте Темплейти."
+      },
+      "no_templates": {
+        "button": "Створіть ваш перший темплейт"
+      },
+      "no_labels": {
+        "description": " Поки що немає лейблів. Створіть лейбли, щоб допомогти організувати та фільтрувати робочі елементи у вашому проджекті."
+      },
+      "no_modules": {
+        "description": "Ще немає модулів. Організуйте роботу в підпроєкти з окремими керівниками та виконавцями."
+      },
+      "no_work_items": {
+        "description": "Немає робочих елементів. Додайте один, щоб краще структурувати свою роботу."
+      },
+      "no_sub_work_items": {
+        "description": "Немає під-робочих елементів. Додайте один, щоб краще структурувати свою роботу."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Немає темплейтів, до яких у вас є доступ.",
+          "description": "Будь ласка, створіть темплейт"
+        },
+        "no_results": {
+          "title": "Це не відповідає жодному темплейту.",
+          "description": "Спробуйте пошук за іншими термінами."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Темплейт створено",
+          "message": "{templateName}, {templateType} темплейт, тепер доступний для вашого воркспейсу."
+        },
+        "error": {
+          "title": "Ми не змогли створити цей темплейт цього разу.",
+          "message": "Спробуйте зберегти ваші деталі знову або скопіюйте їх до нового темплейту, бажано в іншій вкладці."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Темплейт змінено",
+          "message": "{templateName}, {templateType} темплейт, було змінено."
+        },
+        "error": {
+          "title": "Ми не змогли зберегти зміни до цього темплейту.",
+          "message": "Спробуйте зберегти ваші деталі знову або повернутися до цього темплейту пізніше. Якщо все ще виникають проблеми, зверніться до нас."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Темплейт видалено",
+          "message": "{templateName}, {templateType} темплейт, тепер видалено з вашого воркспейсу."
+        },
+        "error": {
+          "title": "Ми не змогли видалити цей темплейт.",
+          "message": "Спробуйте видалити його знову або повернутися до нього пізніше. Якщо ви не можете видалити його, зверніться до нас."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Темплейт знято з публікації",
+          "message": "{templateName}, {templateType} темплейт, було знято з публікації."
+        },
+        "error": {
+          "title": "Ми не змогли зняти цей темплейт з публікації.",
+          "message": "Спробуйте зняти його з публікації знову або повернутися до нього пізніше. Якщо ви не можете зняти його з публікації, зверніться до нас."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Видалити темплейт",
+      "description": {
+        "prefix": "Ви впевнені, що хочете видалити темплейт-",
+        "suffix": "? Всі дані, пов'язані з темплейтом, будуть остаточно видалені. Цю дію неможливо скасувати."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Зняти темплейт з публікації",
+      "description": {
+        "prefix": "Ви впевнені, що хочете зняти темплейт-",
+        "suffix": " з публікації? Цей темплейт більше не буде доступний користувачам у маркетплейсі."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Додати новий шаблон",
+        "project": "Додати новий шаблон"
+      },
+      "label": {
+        "project": "Вибрати шаблон проекту",
+        "page": "Вибрати шаблон"
+      },
+      "tooltip": {
+        "work_item": "Вибрати шаблон елемента роботи"
+      },
+      "no_results": {
+        "work_item": "Шаблони не знайдено.",
+        "project": "Шаблони не знайдено."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/tour.json b/packages/i18n/src/locales/ua/tour.json
new file mode 100644
index 0000000..7dbec43
--- /dev/null
+++ b/packages/i18n/src/locales/ua/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Ласкаво просимо до вашого робочого простору",
+        "description": "Щоб допомогти вам почати, ми створили Демо-проект для вас. Додаймо вашу першу робочу задачу."
+      },
+      "step_one": {
+        "title": "Натисніть \"+ Додати робочу задачу\"",
+        "description": "Почніть з натискання кнопки \"+ Нова робоча задача\". Ви можете створювати завдання, помилки або власний тип, який відповідає вашим потребам."
+      },
+      "step_two": {
+        "title": "Фільтруйте свої робочі задачі",
+        "description": "Використовуйте фільтри, щоб швидко звузити свій список. Ви можете фільтрувати за статусом, пріоритетом або членами команди. "
+      },
+      "step_three": {
+        "title": "Переглядайте, групуйте та сортуйте робочі задачі за потребою.",
+        "description": "Подивіться необхідні властивості та згрупуйте або відсортуйте робочі задачі відповідно до ваших потреб."
+      },
+      "step_four": {
+        "title": "Візуалізуйте як хочете",
+        "description": "Виберіть, які властивості ви хочете бачити в списку. Ви також можете групувати та сортувати робочі задачі по-своєму."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Досягайте прогресу з Циклами",
+        "description": "Натисніть Q, щоб створити Цикл. Назвіть його та встановіть дати—лише один цикл на проект."
+      },
+      "step_one": {
+        "title": "Створити новий цикл",
+        "description": "Натисніть Q, щоб створити Цикл. Назвіть його та встановіть дати—лише один цикл на проект."
+      },
+      "step_two": {
+        "title": "Натисніть \"+\"",
+        "description": "Почніть з натискання кнопки \"+\". Додайте нові або існуючі робочі задачі прямо зі сторінки Циклу."
+      },
+      "step_three": {
+        "title": "Зведення циклу",
+        "description": "Відстежуйте прогрес циклу, продуктивність команди та пріоритети—та досліджуйте, якщо щось відстає."
+      },
+      "step_four": {
+        "title": "Перенести робочі задачі",
+        "description": "Після терміну цикл автоматично завершується. Перемістіть незавершену роботу в інший цикл."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Розділіть свій проект на Модулі",
+        "description": "Модулі—це менші, сфокусовані проекти, які допомагають користувачам групувати та організовувати робочі задачі в межах певних часових рамок."
+      },
+      "step_one": {
+        "title": "Створити Модуль",
+        "description": "Модулі—це менші, сфокусовані проекти, які допомагають користувачам групувати та організовувати робочі задачі в межах певних часових рамок."
+      },
+      "step_two": {
+        "title": "Натисніть \"+\"",
+        "description": "Почніть з натискання кнопки \"+\". Додайте нові або існуючі робочі задачі прямо зі сторінки Модуля."
+      },
+      "step_three": {
+        "title": "Стани модуля",
+        "description": "Модулі використовують ці статуси, щоб допомогти користувачам планувати та чітко відстежувати прогрес та етап."
+      },
+      "step_four": {
+        "title": "Прогрес модуля",
+        "description": "Прогрес модуля відстежується через завершені елементи з аналітикою для моніторингу продуктивності."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Документуйте за допомогою Сторінок на основі ШІ",
+        "description": "Сторінки в Plane дозволяють вам захоплювати, організовувати та співпрацювати над інформацією про проект—без зовнішніх інструментів."
+      },
+      "step_one": {
+        "title": "Зробити сторінку Публічною або Приватною",
+        "description": "Сторінки можна встановити як публічні, видимі для всіх у вашому робочому просторі, або приватні, доступні лише вам."
+      },
+      "step_two": {
+        "title": "Використовуйте команду /",
+        "description": "Використовуйте / на сторінці, щоб додати вміст із 16 типів блоків, включаючи списки, зображення, таблиці та вбудовування."
+      },
+      "step_three": {
+        "title": "Дії зі сторінкою",
+        "description": "Після створення сторінки ви можете натиснути на меню ••• у правому верхньому куті, щоб виконати наступні дії."
+      },
+      "step_four": {
+        "title": "Зміст",
+        "description": "Отримайте загальний вигляд вашої сторінки, натиснувши на значок панелі, щоб побачити всі заголовки."
+      },
+      "step_five": {
+        "title": "Історія версій",
+        "description": "Сторінки відстежують всі правки з історією версій, дозволяючи вам відновлювати попередні версії за потреби."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Оптимізуйте запити з прийомом",
+        "description": "Функція лише для Plane, яка дозволяє Гостям створювати робочі задачі для помилок, запитів або тикетів."
+      },
+      "step_one": {
+        "title": "Відкриті/закриті запити на прийом",
+        "description": "Очікуючі запити залишаються на вкладці Відкриті, і після їх розгляду адміністратором або учасником вони переміщуються в Закриті."
+      },
+      "step_two": {
+        "title": "Прийняти/відхилити очікуючий запит",
+        "description": "Прийміть, щоб відредагувати та перемістити робочу задачу у ваш проект, або відхиліть, щоб позначити її як Скасовану."
+      },
+      "step_three": {
+        "title": "Відкласти на потім",
+        "description": "Робочу задачу можна відкласти, щоб переглянути її пізніше. Вона буде переміщена в кінець вашого списку відкритих запитів."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Досить перемикати вкладки. Підключіть ваш світ.",
+        "description": "Підключіть GitHub, Slack, щоб відстежувати PR і підсумовувати чати прямо в Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Навігація, переосмислена",
+        "sub_title": "Ваш робочий простір тепер легше досліджувати з розумнішою, спрощеною навігацією.",
+        "highlight_1": "Спрощена структура лівої панелі для швидшого виявлення",
+        "highlight_2": "Покращений глобальний пошук для миттєвого переходу до чого завгодно",
+        "highlight_3": "Розумніше групування категорій для ясності та фокусу",
+        "footer": "Хочете швидке ознайомлення?"
+      },
+      "step_zero": {
+        "title": "Знайдіть що завгодно миттєво",
+        "description": "Використовуйте універсальний пошук, щоб перейти до завдань, проектів, сторінок та людей—не виходячи зі свого потоку."
+      },
+      "step_one": {
+        "title": "Зберігайте контроль над оновленнями",
+        "description": "Ваша поштова скринька зберігає всі згадки, схвалення та активність в одному місці, щоб ви ніколи не пропустили важливу роботу."
+      },
+      "step_two": {
+        "title": "Персоналізуйте свою Навігацію",
+        "description": "Налаштуйте те, що ви бачите та як ви переміщуєтесь у Налаштуваннях."
+      }
+    },
+    "actions": {
+      "close": "Закрити",
+      "next": "Далі",
+      "back": "Назад",
+      "done": "Готово",
+      "take_a_tour": "Зробити тур",
+      "get_started": "Почати",
+      "got_it": "Зрозуміло"
+    },
+    "seed_data": {
+      "title": "Ось ваш демо-проект",
+      "description": "Проекти дозволяють вам керувати вашими командами, завданнями та всім, що вам потрібно для виконання роботи у вашому робочому просторі."
+    }
+  },
+  "get_started": {
+    "title": "Привіт {name}, ласкаво просимо на борт!",
+    "description": "Ось все, що вам потрібно, щоб почати свою подорож з Plane.",
+    "checklist_section": {
+      "title": "Почати",
+      "description": "Почніть налаштування та побачите, як ваші ідеї втілюються в життя швидше.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Створити проект"
+        },
+        "item_2": {
+          "title": "Створити робочу задачу"
+        },
+        "item_3": {
+          "title": "Запросити учасників команди"
+        },
+        "item_4": {
+          "title": "Створити сторінку"
+        },
+        "item_5": {
+          "title": "Спробувати чат Plane AI"
+        },
+        "item_6": {
+          "title": "Зв язати інтеграції"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Запросіть свою команду",
+      "description": "Запросіть товаришів по команді та почніть будувати разом."
+    },
+    "integrations_section": {
+      "title": "Посильте свій робочий простір",
+      "more_integrations": "Переглянути більше інтеграцій"
+    },
+    "switch_to_plane_section": {
+      "title": "Дізнайтеся, чому команди переходять на Plane",
+      "description": "Порівняйте Plane з інструментами, які ви використовуєте сьогодні, та побачте різницю."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/update.json b/packages/i18n/src/locales/ua/update.json
new file mode 100644
index 0000000..1732a95
--- /dev/null
+++ b/packages/i18n/src/locales/ua/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Прогрес",
+      "since_last_update": "Від останнього оновлення",
+      "comments": "{count, plural, one{# коментар} few{# коментарі} other{# коментарів}}"
+    },
+    "add_update": "Додати оновлення",
+    "add_update_placeholder": "Додайте ваше оновлення тут",
+    "empty": {
+      "title": "Ще немає оновлень",
+      "description": "Ви можете тут переглядати оновлення."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Реакція створена",
+          "message": "Реакція була успішно створена."
+        },
+        "error": {
+          "title": "Реакцію не створено",
+          "message": "Реакцію не створено."
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Реакція видалена",
+          "message": "Реакція була успішно видалена."
+        },
+        "error": {
+          "title": "Реакцію не видалено",
+          "message": "Реакцію не видалено."
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Оновлення створено",
+        "message": "Оновлення було успішно створено."
+      },
+      "error": {
+        "title": "Оновлення не створено",
+        "message": "Оновлення не створено."
+      }
+    },
+    "delete": {
+      "title": "Видалити оновлення",
+      "confirmation": "Ви впевнені, що хочете видалити це оновлення? Це дія є незворотним.",
+      "success": {
+        "title": "Оновлення видалено",
+        "message": "Оновлення було успішно видалено."
+      },
+      "error": {
+        "title": "Оновлення не видалено",
+        "message": "Оновлення не видалено."
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Оновлення оновлено",
+        "message": "Оновлення було успішно оновлено."
+      },
+      "error": {
+        "title": "Оновлення не оновлено",
+        "message": "Оновлення не оновлено."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/wiki.json b/packages/i18n/src/locales/ua/wiki.json
new file mode 100644
index 0000000..11cf166
--- /dev/null
+++ b/packages/i18n/src/locales/ua/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Загальні",
+      "private": "Приватні",
+      "shared": "Спільні",
+      "archived": "Архівовані"
+    },
+    "fallback_name": "Колекція",
+    "form": {
+      "name_required": "Назва колекції обов’язкова",
+      "name_max_length": "Назва колекції має містити менше 255 символів",
+      "name_placeholder_create": "Вкажіть назву колекції",
+      "name_placeholder_edit": "Назва колекції"
+    },
+    "create_modal": {
+      "title": "Створити колекцію",
+      "submit": "Створити колекцію"
+    },
+    "edit_modal": {
+      "title": "Редагувати колекцію"
+    },
+    "delete_modal": {
+      "title": "Видалити колекцію",
+      "page_count": "У цій колекції {pageCount} сторінок. Виберіть, що з ними зробити.",
+      "transfer_title": "Перемістити сторінки й видалити колекцію",
+      "transfer_description": "Перед видаленням перемістіть усі сторінки до іншої колекції. Сторінки та їхні дозволи буде збережено.",
+      "transfer_warning": "Переміщені сторінки успадкують дозволи вибраної колекції.",
+      "transfer_target_label": "Перемістити сторінки до",
+      "transfer_target_placeholder": "Виберіть колекцію",
+      "delete_with_pages_title": "Видалити колекцію разом зі сторінками",
+      "delete_with_pages_description": "Назавжди видаляє колекцію та всі її сторінки. Цю дію не можна скасувати.",
+      "submit": "Видалити колекцію"
+    },
+    "header": {
+      "add_page": "Додати сторінку"
+    },
+    "menu": {
+      "create_new_page": "Створити нову сторінку",
+      "add_existing_page": "Додати наявну сторінку",
+      "edit_collection": "Редагувати колекцію",
+      "collection_options": "Параметри колекції"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Шукати сторінки",
+      "success_message": "До колекції додано сторінок: {count}.",
+      "error_message": "Не вдалося перемістити сторінки. Спробуйте ще раз.",
+      "no_pages_found": "Не знайдено сторінок, що відповідають вашому пошуку",
+      "no_pages_available": "Немає сторінок, доступних для переміщення",
+      "submit": "Перемістити"
+    },
+    "list": {
+      "invite_only": "Лише за запрошенням",
+      "remove_error": "Не вдалося видалити сторінку з колекції.",
+      "no_matching_pages": "Немає відповідних сторінок",
+      "remove_search_criteria": "Приберіть критерії пошуку, щоб побачити всі сторінки",
+      "remove_filters": "Приберіть фільтри, щоб побачити всі сторінки",
+      "no_pages_title": "Поки що немає сторінок",
+      "no_pages_description": "У цій колекції поки що немає сторінок.",
+      "untitled": "Без назви",
+      "restricted_access": "Обмежений доступ",
+      "collapse_page": "Згорнути сторінку",
+      "expand_page": "Розгорнути сторінку",
+      "page_actions": "Дії зі сторінкою",
+      "page_link_copied": "Посилання на сторінку скопійовано в буфер обміну.",
+      "columns": {
+        "page_name": "Назва сторінки",
+        "owner": "Власник",
+        "nested_pages": "Вкладені сторінки",
+        "last_activity": "Остання активність",
+        "actions": "Дії"
+      }
+    },
+    "toasts": {
+      "created": "Колекцію успішно створено.",
+      "create_error": "Не вдалося створити колекцію. Спробуйте ще раз.",
+      "renamed": "Колекцію успішно перейменовано.",
+      "rename_error": "Не вдалося оновити колекцію. Спробуйте ще раз.",
+      "transferred_deleted": "Сторінки переміщено, а колекцію видалено.",
+      "deleted_with_pages": "Колекцію та її сторінки видалено.",
+      "delete_error": "Не вдалося видалити колекцію. Спробуйте ще раз.",
+      "target_required": "Виберіть колекцію, до якої потрібно перемістити сторінки.",
+      "create_page_error": "Не вдалося створити сторінку. Спробуйте ще раз.",
+      "create_page_in_collection_error": "Не вдалося створити сторінку або додати її до колекції. Спробуйте ще раз.",
+      "collection_link_copied": "Посилання на колекцію скопійовано в буфер обміну."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Оновіться, щоб розблокувати Wiki",
+      "description": "Розблокуйте публічні сторінки, історію версій, спільні сторінки, спільне редагування в реальному часі та сторінки робочого простору для wiki, корпоративних документів і баз знань з Plane Pro.",
+      "upgrade_button": {
+        "text": "Оновити"
+      },
+      "learn_more_button": {
+        "text": "Дізнатися більше"
+      },
+      "download_button": {
+        "text": "Завантажити дані",
+        "loading": "Завантаження"
+      },
+      "tabs": {
+        "nested_pages": "Вкладені сторінки",
+        "add_embeds": "Додати вбудовування",
+        "publish_pages": "Опублікувати сторінки",
+        "comments": "Коментарі"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Вкладені сторінки вимагають платного плану. Оновіться, щоб розблокувати."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/work-item-type.json b/packages/i18n/src/locales/ua/work-item-type.json
new file mode 100644
index 0000000..6e037fe
--- /dev/null
+++ b/packages/i18n/src/locales/ua/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Типи Робочих Елементів",
+    "label_lowercase": "типи робочих елементів",
+    "settings": {
+      "description": "Налаштовуйте та додавайте власні властивості, щоб адаптувати їх до потреб вашої команди.",
+      "cant_delete_default_message": "Неможливо видалити цей тип робочого елемента, оскільки він встановлений як тип за замовчуванням для цього проджекту.",
+      "set_as_default": "Встановити за замовчуванням",
+      "cant_set_default_inactive_message": "Активуйте цей тип перед встановленням за замовчуванням",
+      "set_default_confirmation": {
+        "title": "Встановити як тип робочого елемента за замовчуванням",
+        "description": "Встановлення {name} за замовчуванням імпортує його в усі проекти цього робочого простору. Усі нові робочі елементи використовуватимуть цей тип за замовчуванням.",
+        "confirm_button": "Встановити за замовчуванням"
+      },
+      "properties": {
+        "title": "Кастомні проперті",
+        "description": "Створюйте та налаштовуйте властивості.",
+        "tooltip": "Кожен тип робочого елемента постачається з набором проперті за замовчуванням, як-от Заголовок, Опис, Призначений, Стан, Пріоритет, Дата початку, Дата завершення, Модуль, Цикл тощо. Ви також можете налаштувати та додати власні проперті, щоб адаптувати їх до потреб вашої команди.",
+        "add_button": "Додати нове проперті",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Імпортувати з робочого простору"
+          }
+        },
+        "dropdown": {
+          "label": "Тип проперті",
+          "placeholder": "Виберіть тип"
+        },
+        "property_type": {
+          "text": {
+            "label": "Текст"
+          },
+          "number": {
+            "label": "Число"
+          },
+          "dropdown": {
+            "label": "Дропдаун"
+          },
+          "boolean": {
+            "label": "Булеан"
+          },
+          "date": {
+            "label": "Дата"
+          },
+          "member_picker": {
+            "label": "Вибір мембера"
+          },
+          "formula": {
+            "label": "Формула"
+          }
+        },
+        "attributes": {
+          "label": "Атрибути",
+          "text": {
+            "single_line": {
+              "label": "Однолінійний"
+            },
+            "multi_line": {
+              "label": "Параграф"
+            },
+            "readonly": {
+              "label": "Лише для читання",
+              "header": "Дані лише для читання"
+            },
+            "invalid_text_format": {
+              "label": "Недійсний формат тексту"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Додати число"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Одиночний вибір"
+            },
+            "multi_select": {
+              "label": "Множинний вибір"
+            },
+            "no_default_value": {
+              "label": "Без значення за замовчуванням"
+            }
+          },
+          "boolean": {
+            "label": "Так | Ні",
+            "no_default": "Без значення за замовчуванням"
+          },
+          "option": {
+            "create_update": {
+              "label": "Опції",
+              "form": {
+                "placeholder": "Додати опцію",
+                "errors": {
+                  "name": {
+                    "required": "Назва опції обов'язкова.",
+                    "integrity": "Опція з такою назвою вже існує."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Вибрати опцію",
+                "multi": {
+                  "default": "Вибрати опції",
+                  "variable": "Вибрано {count} опцій"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Успіх!",
+              "message": "Проперті {name} успішно створено."
+            },
+            "error": {
+              "title": "Помилка!",
+              "message": "Не вдалося створити проперті. Будь ласка, спробуйте ще раз!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Успіх!",
+              "message": "Проперті {name} успішно оновлено."
+            },
+            "error": {
+              "title": "Помилка!",
+              "message": "Не вдалося оновити проперті. Будь ласка, спробуйте ще раз!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Успіх!",
+              "message": "Проперті {name} успішно видалено."
+            },
+            "error": {
+              "title": "Помилка!",
+              "message": "Не вдалося видалити проперті. Будь ласка, спробуйте ще раз!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} проперті {name}",
+            "success": {
+              "title": "Успіх!",
+              "message": "Проперті {name} успішно {action}."
+            },
+            "error": {
+              "title": "Помилка!",
+              "message": "Не вдалося {action} проперті. Будь ласка, спробуйте ще раз!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Створити нову користувацьку властивість",
+            "update": "Оновити користувацьку властивість"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Заголовок"
+            },
+            "description": {
+              "placeholder": "Опис"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Ви повинні назвати своє проперті.",
+              "max_length": "Назва проперті не повинна перевищувати 255 символів."
+            },
+            "property_type": {
+              "required": "Ви повинні вибрати тип проперті."
+            },
+            "options": {
+              "required": "Ви повинні додати хоча б одну опцію."
+            },
+            "formula": {
+              "required": "Вираз формули є обов'язковим.",
+              "invalid": "Недійсна формула: {error}",
+              "circular_reference": "Виявлено циклічне посилання. Формула не може посилатися на саму себе прямо або опосередковано.",
+              "invalid_reference": "Формула посилається на неіснуючу властивість."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Поле формули",
+          "tooltip": "Введіть формулу, використовуючи синтаксис '{'Назва поля'}'. Підтримує оператори +, -, *, / та &.",
+          "placeholder": "Напишіть формулу",
+          "test_button": "Тест",
+          "validating": "Перевірка",
+          "validation_success": "Формула дійсна! Повертає {resultType}",
+          "validation_success_with_refs": "Формула дійсна! Повертає {resultType} ({count} поле(ів) зазначено)",
+          "error": {
+            "empty": "Будь ласка, введіть формулу",
+            "missing_context": "Відсутній контекст робочого простору, проєкту або типу робочого елемента",
+            "validation_failed": "Перевірка не вдалася"
+          },
+          "picker": {
+            "no_match": "Немає відповідних властивостей",
+            "no_available": "Немає доступних властивостей"
+          }
+        },
+        "enable_disable": {
+          "label": "Активно",
+          "tooltip": {
+            "disabled": "Натисніть, щоб вимкнути",
+            "enabled": "Натисніть, щоб увімкнути"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Видалити це проперті",
+          "description": "Видалення проперті може призвести до втрати існуючих даних.",
+          "secondary_description": "Ви хочете натомість вимкнути проперті?",
+          "primary_button": "{action}, видалити це",
+          "secondary_button": "Так, вимкнути це"
+        },
+        "mandate_confirmation": {
+          "label": "Обов'язкове проперті",
+          "content": "Здається, для цього проперті є опція за замовчуванням. Встановлення проперті як обов'язкового видалить значення за замовчуванням, і користувачі повинні будуть додати значення на свій вибір.",
+          "tooltip": {
+            "disabled": "Цей тип проперті не може бути зроблений обов'язковим",
+            "enabled": "Зніміть прапорець, щоб позначити поле як необов'язкове",
+            "checked": "Встановіть прапорець, щоб позначити поле як обов'язкове"
+          }
+        },
+        "empty_state": {
+          "title": "Додати кастомні проперті",
+          "description": "Нові проперті, які ви додасте для цього типу робочого елемента, будуть показані тут."
+        }
+      },
+      "types": {
+        "title": "Типи",
+        "description": "Створюйте та налаштовуйте типи робочих одиниць із властивостями.",
+        "sort_options": {
+          "project_count": "Кількість проєктів"
+        },
+        "filter_options": {
+          "show_active": "Показати активні",
+          "show_inactive": "Показати неактивні"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Створити новий",
+            "import_from_workspace": "Імпортувати з робочого простору"
+          },
+          "banner": {
+            "with_access": "Увімкніть типи робочих одиниць, щоб імпортувати типи з рівня робочого простору",
+            "without_access": "Типи робочих одиниць вимкнено. Зверніться до адміністратора робочого простору, щоб увімкнути їх у налаштуваннях робочого простору."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Користувацькі властивості",
+        "add_button": "Додати властивості",
+        "modal": {
+          "title": "Додати властивості",
+          "empty": {
+            "title": "Немає доступних властивостей",
+            "description": "Усі властивості вже прив'язано до цього типу."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Від'єднати властивість",
+          "description": "Від'єднання цієї властивості назавжди видалить усі її значення для кожної робочої одиниці, яка використовує цей тип. Цю дію неможливо скасувати.",
+          "input_label": "Введіть",
+          "input_label_suffix": "для продовження:",
+          "confirm": "Від'єднати властивість",
+          "loading": "Від'єднання"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Видалити цей тип",
+        "description": "Видалення типів може призвести до втрати наявних даних.",
+        "can_disable_warning": "Ви хочете замість цього вимкнути тип?",
+        "primary_button": "Так, видалити",
+        "toast": {
+          "success": {
+            "title": "Успіх!",
+            "message": "Тип робочого елемента успішно видалено."
+          },
+          "error": {
+            "title": "Помилка!",
+            "message": "Не вдалося видалити тип робочого елемента. Будь ласка, спробуйте ще раз!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Неможливо видалити тип робочого елемента за замовчуванням",
+          "cannot_delete_work_item_type_with_associated_work_items": "Неможливо видалити тип робочого елемента з пов'язаними робочими елементами"
+        }
+      }
+    },
+    "create": {
+      "title": "Створити тип робочого елемента",
+      "button": "Додати тип робочого елемента",
+      "toast": {
+        "success": {
+          "title": "Успіх!",
+          "message": "Тип робочого елемента успішно створено."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": {
+            "default": "Не вдалося створити тип робочого елемента. Спробуйте ще раз!",
+            "conflict": "Тип {name} вже існує. Виберіть іншу назву."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Оновити тип робочого елемента",
+      "button": "Оновити тип робочого елемента",
+      "toast": {
+        "success": {
+          "title": "Успіх!",
+          "message": "Тип робочого елемента {name} успішно оновлено."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": {
+            "default": "Не вдалося оновити тип робочого елемента. Спробуйте ще раз!",
+            "conflict": "Тип {name} вже існує. Виберіть іншу назву."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Дайте цьому типу робочого елемента унікальну назву"
+        },
+        "description": {
+          "placeholder": "Опишіть, для чого призначений цей тип робочого елемента і коли його слід використовувати."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} тип робочого елемента {name}",
+        "success": {
+          "title": "Успіх!",
+          "message": "Тип робочого елемента {name} успішно {action}."
+        },
+        "error": {
+          "title": "Помилка!",
+          "message": "Не вдалося {action} тип робочого елемента. Будь ласка, спробуйте ще раз!"
+        }
+      },
+      "tooltip": "Натисніть, щоб {action}"
+    },
+    "change_confirmation": {
+      "title": "Змінити тип робочого елемента?",
+      "description": "Зміна типу робочого елемента може призвести до втрати значень користувацьких властивостей, специфічних для поточного типу. Цю дію неможливо скасувати.",
+      "button": {
+        "loading": "Зміна",
+        "default": "Змінити тип"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Увімкнути Типи Робочих Елементів",
+        "description": "Формуйте робочі елементи для вашої роботи за допомогою Типів робочих елементів. Налаштовуйте їх за допомогою іконок, фонів та проперті та конфігуруйте їх для цього проджекту.",
+        "primary_button": {
+          "text": "Увімкнути"
+        },
+        "confirmation": {
+          "title": "Після увімкнення Типи Робочих Елементів не можна вимкнути.",
+          "description": "Робочий Елемент Плейн стане типом робочого елемента за замовчуванням для цього проджекту та відображатиметься з його іконкою та фоном у цьому проджекті.",
+          "button": {
+            "default": "Увімкнути",
+            "loading": "Налаштування"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Отримайте Про, щоб увімкнути Типи робочих елементів.",
+        "description": "Формуйте робочі елементи для вашої роботи за допомогою Типів робочих елементів. Налаштовуйте їх за допомогою іконок, фонів та проперті та конфігуруйте їх для цього проджекту.",
+        "primary_button": {
+          "text": "Отримати Про"
+        }
+      },
+      "upgrade": {
+        "title": "Оновіть, щоб увімкнути Типи робочих елементів.",
+        "description": "Формуйте робочі елементи для вашої роботи за допомогою Типів робочих елементів. Налаштовуйте їх за допомогою іконок, фонів та проперті та конфігуруйте їх для цього проджекту.",
+        "primary_button": {
+          "text": "Оновити"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Ієрархія",
+      "tab_label": "Ієрархія",
+      "description": "Налаштуйте рівні ієрархії для організації роботи. Кожен рівень визначає батьківський зв'язок з елементом безпосередньо вище та дочірній зв'язок з елементом безпосередньо нижче. ",
+      "sidebar_label": "Ієрархія",
+      "enable_control": {
+        "title": "Увімкнути ієрархію",
+        "description": "Створіть відносини батько-нащадок між різними типами робочих елементів.",
+        "tooltip": "Ви не зможете вимкнути ієрархію після її увімкнення."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Спочатку визначте типи робочих елементів для створення нової ієрархії.",
+        "cta": "Налаштування типів робочих елементів"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Перетягніть тип, щоб додати новий рівень ієрархії",
+      "empty_level_placeholder": "Перетягніть тип робочого елемента на рівень {level}",
+      "drag_tooltip": "Перетягніть для зміни рівня",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Встановити за замовчуванням",
+          "toast": {
+            "loading": "Встановлення за замовчуванням...",
+            "success": {
+              "title": "Успіх!",
+              "message": "Рівень ієрархії {level} успішно встановлено за замовчуванням."
+            },
+            "error": {
+              "title": "Помилка!",
+              "message": "Не вдалося встановити рівень ієрархії {level} за замовчуванням. Будь ласка, спробуйте ще раз."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Переміщення {workItemTypeName} на рівень {level}...",
+        "success": {
+          "title": "Успішно!",
+          "message": "{workItemTypeName} успішно переміщено на рівень {level}."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Збереження розірве наявні зв’язки",
+      "content": {
+        "intro": "У типу робочого елемента {workItemTypeName} є:",
+        "parent_items": "{count, plural, one {Буде видалено # батьківський зв’язок} few {Буде видалено # батьківські зв’язки} many {Буде видалено # батьківських зв’язків} other {Буде видалено # батьківських зв’язків}}.",
+        "child_items": "{count, plural, one {дочірній робочий елемент} few {дочірні робочі елементи} other {дочірніх робочих елементів}}",
+        "parent_line_suffix_when_also_children": ", а також ",
+        "footer": "Ця зміна прибере батьківські та дочірні зв’язки з наявних робочих елементів типу {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Введіть «підтвердити», щоб продовжити.",
+        "placeholder": "підтвердити"
+      },
+      "error_toast": {
+        "title": "Помилка!",
+        "message": "Не вдалося від’єднати зв’язки й зберегти. Будь ласка, спробуйте ще раз."
+      },
+      "confirm_button": {
+        "loading": "Збереження",
+        "default": "Усе одно зберегти"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Помилка!",
+        "message": "Вибраний тип робочого елемента не може бути використаний для створення нового робочого елемента, оскільки це порушує правила ієрархії."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Помилка!",
+        "message": "Тип робочого елемента не може бути оновлений, оскільки це порушує правила ієрархії."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Рівень ієрархії",
+      "invalid_level_toast": {
+        "title": "Помилка!",
+        "message": "Тип робочого елемента не може бути оновлений, оскільки це порушує правила ієрархії."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/work-item.json b/packages/i18n/src/locales/ua/work-item.json
new file mode 100644
index 0000000..c799374
--- /dev/null
+++ b/packages/i18n/src/locales/ua/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {Робоча одиниця} few {Робочі одиниці} other {Робочих одиниць}}",
+    "all": "Усі робочі одиниці",
+    "edit": "Редагувати робочу одиницю",
+    "title": {
+      "label": "Назва робочої одиниці",
+      "required": "Назва робочої одиниці є обов'язковою."
+    },
+    "add": {
+      "press_enter": "Натисніть 'Enter', щоб додати ще одну робочу одиницю",
+      "label": "Додати робочу одиницю",
+      "cycle": {
+        "failed": "Не вдалося додати робочу одиницю в цикл. Спробуйте ще раз.",
+        "success": "{count, plural, one {Робоча одиниця} few {Робочі одиниці} other {Робочих одиниць}} додано до циклу.",
+        "loading": "Додавання {count, plural, one {робочої одиниці} few {робочих одиниць} other {робочих одиниць}} до циклу"
+      },
+      "assignee": "Додати призначеного",
+      "start_date": "Додати дату початку",
+      "due_date": "Додати крайній термін",
+      "parent": "Додати батьківську робочу одиницю",
+      "sub_issue": "Додати похідну робочу одиницю",
+      "dependency": "Додати залежність",
+      "relation": "Додати зв'язок",
+      "link": "Додати посилання",
+      "existing": "Додати наявну робочу одиницю"
+    },
+    "remove": {
+      "label": "Видалити робочу одиницю",
+      "cycle": {
+        "loading": "Вилучення робочої одиниці з циклу",
+        "success": "Робочу одиницю вилучено з циклу.",
+        "failed": "Не вдалося вилучити робочу одиницю з циклу. Спробуйте ще раз."
+      },
+      "module": {
+        "loading": "Вилучення робочої одиниці з модуля",
+        "success": "Робочу одиницю вилучено з модуля.",
+        "failed": "Не вдалося вилучити робочу одиницю з модуля. Спробуйте ще раз."
+      },
+      "parent": {
+        "label": "Вилучити батьківську робочу одиницю"
+      }
+    },
+    "new": "Нова робоча одиниця",
+    "adding": "Додавання робочої одиниці",
+    "create": {
+      "success": "Робочу одиницю успішно створено"
+    },
+    "priority": {
+      "urgent": "Терміновий",
+      "high": "Високий",
+      "medium": "Середній",
+      "low": "Низький"
+    },
+    "display": {
+      "properties": {
+        "label": "Відображувані властивості",
+        "id": "ID",
+        "issue_type": "Тип робочої одиниці",
+        "sub_issue_count": "Кількість похідних",
+        "attachment_count": "Кількість вкладень",
+        "created_on": "Створено",
+        "sub_issue": "Похідна одиниця",
+        "work_item_count": "Кількість робочих одиниць"
+      },
+      "extra": {
+        "show_sub_issues": "Показати похідні робочі одиниці",
+        "show_empty_groups": "Показати порожні групи"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Це розташування відсортоване за",
+      "list": "Список",
+      "kanban": "Дошка",
+      "calendar": "Календар",
+      "spreadsheet": "Таблиця",
+      "gantt": "Діаграма Ганта",
+      "title": {
+        "list": "Спискове розташування",
+        "kanban": "Розташування «Дошка»",
+        "calendar": "Розташування «Календар»",
+        "spreadsheet": "Табличне розташування",
+        "gantt": "Розташування «Діаграма Ганта»"
+      }
+    },
+    "states": {
+      "active": "Активно",
+      "backlog": "Backlog"
+    },
+    "comments": {
+      "placeholder": "Додати коментар",
+      "switch": {
+        "private": "Перемкнути на приватний коментар",
+        "public": "Перемкнути на публічний коментар"
+      },
+      "create": {
+        "success": "Коментар успішно створено",
+        "error": "Не вдалося створити коментар. Спробуйте пізніше."
+      },
+      "update": {
+        "success": "Коментар успішно оновлено",
+        "error": "Не вдалося оновити коментар. Спробуйте пізніше."
+      },
+      "remove": {
+        "success": "Коментар успішно видалено",
+        "error": "Не вдалося видалити коментар. Спробуйте пізніше."
+      },
+      "upload": {
+        "error": "Не вдалося завантажити вкладення. Спробуйте пізніше."
+      },
+      "copy_link": {
+        "success": "Посилання на коментар скопійовано в буфер обміну",
+        "error": "Помилка при копіюванні посилання на коментар. Спробуйте пізніше."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Додати відповідь",
+          "placeholder": "Додати відповідь"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Не вдалося отримати відповіді"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Відповідь успішно створено"
+            },
+            "error": {
+              "message": "Не вдалося створити відповідь"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Відповідь успішно оновлено"
+            },
+            "error": {
+              "message": "Не вдалося оновити відповідь"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Відповідь успішно видалено"
+            },
+            "error": {
+              "message": "Не вдалося видалити відповідь"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Робоча одиниця не існує",
+        "description": "Шукана робоча одиниця не існує, була заархівована або видалена.",
+        "primary_button": {
+          "text": "Переглянути інші робочі одиниці"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Пов'язані робочі одиниці"
+    },
+    "archive": {
+      "description": "Архівувати можна лише завершені або скасовані\nробочі одиниці",
+      "label": "Заархівувати робочу одиницю",
+      "confirm_message": "Справді заархівувати цю робочу одиницю? Усі заархівовані одиниці можна пізніше відновити.",
+      "success": {
+        "label": "Успішно заархівовано",
+        "message": "Ваші архіви можна знайти в архівах проєкту."
+      },
+      "failed": {
+        "message": "Не вдалося заархівувати робочу одиницю. Спробуйте ще раз."
+      },
+      "banner_message": "Цю робочу одиницю заархівовано. Перейдіть до розділу «Архіви», щоб відновити її.",
+      "go_to_archives": "Перейти до архівів"
+    },
+    "restore": {
+      "success": {
+        "title": "Успішне відновлення",
+        "message": "Ваша робоча одиниця тепер доступна серед робочих одиниць проєкту."
+      },
+      "failed": {
+        "message": "Не вдалося відновити робочу одиницю. Спробуйте ще раз."
+      }
+    },
+    "relation": {
+      "relates_to": "Пов'язана з",
+      "duplicate": "Дублікат",
+      "blocked_by": "Заблокована",
+      "blocking": "Блокує",
+      "start_before": "Стартує Перед",
+      "start_after": "Стартує Після",
+      "finish_before": "Фінішує Перед",
+      "finish_after": "Фінішує Після",
+      "implements": "Реалізує",
+      "implemented_by": "Реалізовано"
+    },
+    "copy_link": "Скопіювати посилання на робочу одиницю",
+    "delete": {
+      "label": "Видалити робочу одиницю",
+      "error": "Помилка під час видалення робочої одиниці"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Ви підписалися на оновлення робочої одиниці",
+        "unsubscribed": "Ви скасували підписку на оновлення робочої одиниці"
+      }
+    },
+    "select": {
+      "error": "Виберіть принаймні одну робочу одиницю",
+      "empty": "Не вибрано жодної робочої одиниці",
+      "add_selected": "Додати вибрані робочі одиниці",
+      "select_all": "Вибрати всі",
+      "deselect_all": "Скасувати вибір усіх"
+    },
+    "open_in_full_screen": "Відкрити робочу одиницю на повний екран",
+    "duplicate": {
+      "modal": {
+        "title": "Зробити копію в іншому проєкті",
+        "description1": "Це створить копію робочої одиниці.",
+        "description2": "Усі дані властивостей будуть видалені під час дублювання.",
+        "placeholder": "Виберіть проєкт"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Робочу одиницю успішно дубльовано"
+        },
+        "error": {
+          "message": "Не вдалося дублювати робочу одиницю"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "З'єднати сторінки",
+      "show_wiki_pages": "Показати сторінки Wiki",
+      "link_pages_to": "З'єднати сторінки до",
+      "linked_pages": "Пов'язані сторінки",
+      "no_description": "Це порожня сторінка. Чому б не написати щось всередині та побачити це тут, як цей замісник",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Сторінки оновлено",
+            "message": "Сторінки успішно оновлено"
+          },
+          "error": {
+            "title": "Не вдалося оновити сторінки",
+            "message": "Не вдалося оновити сторінки"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Сторінку видалено",
+            "message": "Сторінку успішно видалено"
+          },
+          "error": {
+            "title": "Не вдалося видалити сторінку",
+            "message": "Не вдалося видалити сторінку"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Натисніть, щоб проголосувати за",
+      "click_to_downvote": "Натисніть, щоб проголосувати проти",
+      "click_to_view_upvotes": "Натисніть, щоб переглянути голоси за",
+      "click_to_view_downvotes": "Натисніть, щоб переглянути голоси проти"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Похідну робочу одиницю успішно оновлено",
+      "error": "Помилка під час оновлення похідної одиниці"
+    },
+    "remove": {
+      "success": "Похідну робочу одиницю успішно вилучено",
+      "error": "Помилка під час вилучення похідної одиниці"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Ви не маєте похідних робочих одиниць, які відповідають застосованим фільтрам.",
+        "description": "Щоб побачити всі похідні робочі одиниці, очистіть всі застосовані фільтри.",
+        "action": "Очистити фільтри"
+      },
+      "list_filters": {
+        "title": "Ви не маєте робочих одиниць, які відповідають застосованим фільтрам.",
+        "description": "Щоб побачити всі робочі одиниці, очистіть всі застосовані фільтри.",
+        "action": "Очистити фільтри"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Немає відповідних одиниць"
+      },
+      "no_issues": {
+        "title": "Немає одиниць"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Коментарів немає",
+        "description": "Коментарі використовуються для обговорення та відстеження."
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Неможливо архівувати робочі елементи",
+        "message": "Архівувати можна лише робочі елементи, що належать до груп станів Завершено або Скасовано."
+      },
+      "invalid_issue_start_date": {
+        "title": "Неможливо оновити робочі елементи",
+        "message": "Вибрана дата початку перевищує дату завершення для деяких робочих елементів. Переконайтеся, що дата початку передує даті завершення."
+      },
+      "invalid_issue_target_date": {
+        "title": "Неможливо оновити робочі елементи",
+        "message": "Вибрана дата завершення передує даті початку для деяких робочих елементів. Переконайтеся, що дата завершення настає після дати початку."
+      },
+      "invalid_state_transition": {
+        "title": "Неможливо оновити робочі елементи",
+        "message": "Зміна стану не дозволена для деяких робочих елементів. Переконайтеся, що зміна стану дозволена."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Змінюйте стан, пріоритет та інше одразу для кількох робочих одиниць. У середньому економте три хвилини на операцію.",
+      "cta": "Підвищити до One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Повторювані робочі елементи",
+      "description": "Налаштуйте повторювані робочі елементи один раз, і ми займемося повтореннями. Ви побачите все тут, коли настане час.",
+      "new_recurring_work_item": "Нова повторювана робоча задача",
+      "update_recurring_work_item": "Оновити повторювану робочу задачу",
+      "form": {
+        "interval": {
+          "title": "Розклад",
+          "start_date": {
+            "validation": {
+              "required": "Початкова дата є обовʼязковою"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Тип інтервалу є обовʼязковим"
+            }
+          }
+        },
+        "button": {
+          "create": "Створити повторювану задачу",
+          "update": "Оновити повторювану задачу"
+        }
+      },
+      "create_button": {
+        "label": "Створити повторювану задачу",
+        "no_permission": "Зверніться до адміністратора проєкту, щоб створити повторювані задачі"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Ваша робота на автопілоті",
+        "description": "Налаштуйте один раз. Ми повернемо її, коли настане час. Оновіть до Бізнес, щоб повторювана робота була легкою."
+      },
+      "no_templates": {
+        "button": "Створіть свою першу повторювану задачу"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Повторювана задача створена",
+          "message": "{name}, повторювана задача, тепер доступна у вашому робочому просторі."
+        },
+        "error": {
+          "title": "Не вдалося створити цю повторювану задачу.",
+          "message": "Спробуйте зберегти дані ще раз або скопіюйте їх у нову повторювану задачу, бажано в іншій вкладці."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Повторювана задача змінена",
+          "message": "{name}, повторювана задача, була змінена."
+        },
+        "error": {
+          "title": "Не вдалося зберегти зміни до цієї повторюваної задачі.",
+          "message": "Спробуйте зберегти дані ще раз або поверніться до цієї задачі пізніше. Якщо проблема залишиться, зверніться до нас."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Повторювана задача видалена",
+          "message": "{name}, повторювана задача, була видалена з вашого робочого простору."
+        },
+        "error": {
+          "title": "Не вдалося видалити цю повторювану задачу.",
+          "message": "Спробуйте видалити ще раз або поверніться до неї пізніше. Якщо не вдається видалити, зверніться до нас."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Видалити повторювану задачу",
+      "description": {
+        "prefix": "Ви впевнені, що хочете видалити повторювану задачу-",
+        "suffix": "? Всі дані, пов'язані з цією повторюваною задачею, будуть остаточно видалені. Цю дію неможливо скасувати."
+      }
+    }
+  },
+  "epic": {
+    "new": "Новий епік",
+    "label": "{count, plural, one {Епік} other {Епіки}}",
+    "adding": "Додавання епіку",
+    "create": {
+      "success": "Епік успішно створено"
+    },
+    "add": {
+      "label": "Додати епік",
+      "press_enter": "Натисніть 'Enter', щоб додати ще один епік"
+    },
+    "title": {
+      "label": "Назва епіку",
+      "required": "Назва епіку є обов'язковою."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/workflow.json b/packages/i18n/src/locales/ua/workflow.json
new file mode 100644
index 0000000..a5d5293
--- /dev/null
+++ b/packages/i18n/src/locales/ua/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Дозволити нові робочі елементи",
+      "work_item_creation_disable_tooltip": "Створення робочих елементів вимкнено для цього стану",
+      "default_state": "Стан за замовчуванням дозволяє всім членам створювати нові робочі елементи. Це не можна змінити",
+      "state_change_count": "{count, plural, one {1 дозволена зміна стану} other {{count} дозволених змін стану}}",
+      "movers_count": "{count, plural, one {1 зазначений рев'юер} other {{count} зазначених рев'юерів}}",
+      "state_changes": {
+        "label": {
+          "default": "Додати дозволену зміну стану",
+          "loading": "Додавання дозволеної зміни стану"
+        },
+        "move_to": "Змінити стан на",
+        "movers": {
+          "label": "Коли перевірено",
+          "tooltip": "Рев'юери - це люди, яким дозволено переміщувати робочі елементи з одного стану в інший.",
+          "add": "Додати рев'юерів"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Ви не можете перемістити цей робочий елемент сюди."
+    },
+    "workflow_enabled": {
+      "label": "Зміна стану"
+    },
+    "workflow_tree": {
+      "label": "Для робочих елементів у",
+      "state_change_label": "може перемістити його до"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Контролюйте хаос змін та перевірок за допомогою Воркфлоу.",
+        "description": "Встановлюйте правила для переміщення вашої роботи, ким і коли за допомогою Воркфлоу в Плейн."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Перегляд історії змін",
+      "reset_workflow": "Скинути воркфлоу"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Ви впевнені, що хочете скинути цей воркфлоу?",
+        "description": "Якщо ви скинете цей воркфлоу, всі ваші правила зміни стану будуть видалені, і вам доведеться створити їх знову, щоб запустити їх у цьому проджекті."
+      },
+      "delete_state_change": {
+        "title": "Ви впевнені, що хочете видалити це правило зміни стану?",
+        "description": "Після видалення ви не зможете скасувати цю зміну, і вам доведеться знову встановити правило, якщо ви хочете, щоб воно працювало для цього проджекту."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} воркфлоу",
+        "success": {
+          "title": "Успіх",
+          "message": "Воркфлоу успішно {action}"
+        },
+        "error": {
+          "title": "Помилка",
+          "message": "Воркфлоу не вдалося {action}. Будь ласка, спробуйте ще раз."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Успіх",
+          "message": "Воркфлоу успішно скинуто"
+        },
+        "error": {
+          "title": "Помилка скидання воркфлоу",
+          "message": "Не вдалося скинути воркфлоу. Будь ласка, спробуйте ще раз."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Помилка додавання правила зміни стану",
+          "message": "Не вдалося додати правило зміни стану. Будь ласка, спробуйте ще раз."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Помилка зміни правила зміни стану",
+          "message": "Не вдалося змінити правило зміни стану. Будь ласка, спробуйте ще раз."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Помилка видалення правила зміни стану",
+          "message": "Не вдалося видалити правило зміни стану. Будь ласка, спробуйте ще раз."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Помилка зміни рев'юерів правила зміни стану",
+          "message": "Не вдалося змінити рев'юерів правила зміни стану. Будь ласка, спробуйте ще раз."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/workspace-settings.json b/packages/i18n/src/locales/ua/workspace-settings.json
new file mode 100644
index 0000000..ad89c67
--- /dev/null
+++ b/packages/i18n/src/locales/ua/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Налаштування робочого простору",
+    "page_label": "{workspace} - Загальні налаштування",
+    "key_created": "Ключ створено",
+    "copy_key": "Скопіюйте й збережіть цей ключ для Plane Pages. Після закриття ви його більше не побачите. CSV-файл із ключем було завантажено.",
+    "token_copied": "Токен скопійовано до буфера.",
+    "settings": {
+      "general": {
+        "title": "Загальне",
+        "upload_logo": "Завантажити логотип",
+        "edit_logo": "Редагувати логотип",
+        "name": "Назва робочого простору",
+        "company_size": "Розмір компанії",
+        "url": "URL робочого простору",
+        "workspace_timezone": "Часовий пояс робочого простору",
+        "update_workspace": "Оновити простір",
+        "delete_workspace": "Видалити цей простір",
+        "delete_workspace_description": "Видалення простору призведе до втрати всіх даних і ресурсів. Дія незворотна.",
+        "delete_btn": "Видалити простір",
+        "delete_modal": {
+          "title": "Справді видалити цей простір?",
+          "description": "У вас активна пробна версія. Спочатку скасуйте її.",
+          "dismiss": "Закрити",
+          "cancel": "Скасувати пробну версію",
+          "success_title": "Простір видалено.",
+          "success_message": "Ви будете перенаправлені до профілю.",
+          "error_title": "Не вдалося.",
+          "error_message": "Спробуйте ще раз."
+        },
+        "errors": {
+          "name": {
+            "required": "Назва є обов'язковою",
+            "max_length": "Назва робочого простору не може перевищувати 80 символів"
+          },
+          "company_size": {
+            "required": "Розмір компанії є обов'язковим",
+            "select_a_range": "Виберіть розмір організації"
+          }
+        }
+      },
+      "members": {
+        "title": "Учасники",
+        "add_member": "Додати учасника",
+        "pending_invites": "Очікувані запрошення",
+        "invitations_sent_successfully": "Запрошення успішно надіслано",
+        "leave_confirmation": "Справді вийти з цього простору? Ви втратите доступ. Дія незворотна.",
+        "details": {
+          "full_name": "Повне ім'я",
+          "display_name": "Відображуване ім'я",
+          "email_address": "Електронна пошта",
+          "account_type": "Тип облікового запису",
+          "authentication": "Автентифікація",
+          "joining_date": "Дата приєднання"
+        },
+        "modal": {
+          "title": "Запросити колег",
+          "description": "Запросіть людей для співпраці.",
+          "button": "Надіслати запрошення",
+          "button_loading": "Надсилання запрошень",
+          "placeholder": "ім'я@компанія.ua",
+          "errors": {
+            "required": "Потрібно вказати адресу електронної пошти.",
+            "invalid": "Неправильна адреса електронної пошти"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Платежі та плани",
+        "description": "Виберіть свій план, керуйте підписками та легко оновлюйте їх у міру зростання потреб.",
+        "title": "Платежі та плани",
+        "current_plan": "Поточний план",
+        "free_plan": "Ви використовуєте безкоштовний план",
+        "view_plans": "Переглянути плани"
+      },
+      "exports": {
+        "heading": "Експорти",
+        "description": "Експортуйте дані вашого проєкту в різних форматах і отримуйте доступ до історії експорту з посиланнями для завантаження.",
+        "title": "Експорти",
+        "exporting": "Експортування",
+        "previous_exports": "Попередні експорти",
+        "export_separate_files": "Експортувати дані в окремі файли",
+        "exporting_projects": "Експортування проєкту",
+        "format": "Формат",
+        "filters_info": "Застосуйте фільтри для експорту конкретних робочих елементів за вашими критеріями.",
+        "modal": {
+          "title": "Експортувати в",
+          "toasts": {
+            "success": {
+              "title": "Експорт успішний",
+              "message": "Ви можете завантажити експортовані {entity} у попередніх експортованих файлах."
+            },
+            "error": {
+              "title": "Експорт не вдався",
+              "message": "Спробуйте ще раз."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Вебхуки",
+        "description": "Автоматизуйте сповіщення зовнішнім сервісам, коли відбуваються події проєкту.",
+        "title": "Вебхуки",
+        "add_webhook": "Додати вебхук",
+        "modal": {
+          "title": "Створити вебхук",
+          "details": "Деталі вебхука",
+          "payload": "URL для надсилання даних",
+          "question": "Які події мають запускати цей вебхук?",
+          "error": "URL є обов'язковим"
+        },
+        "secret_key": {
+          "title": "Секретний ключ",
+          "message": "Згенеруйте токен для авторизації вебхука"
+        },
+        "options": {
+          "all": "Надсилати все",
+          "individual": "Вибрати окремі події"
+        },
+        "toasts": {
+          "created": {
+            "title": "Вебхук створено",
+            "message": "Вебхук успішно створено"
+          },
+          "not_created": {
+            "title": "Вебхук не створено",
+            "message": "Не вдалося створити вебхук"
+          },
+          "updated": {
+            "title": "Вебхук оновлено",
+            "message": "Вебхук успішно оновлено"
+          },
+          "not_updated": {
+            "title": "Не вдалося оновити вебхук",
+            "message": "Не вдалося оновити вебхук"
+          },
+          "removed": {
+            "title": "Вебхук видалено",
+            "message": "Вебхук успішно видалено"
+          },
+          "not_removed": {
+            "title": "Не вдалося видалити вебхук",
+            "message": "Не вдалося видалити вебхук"
+          },
+          "secret_key_copied": {
+            "message": "Секретний ключ скопійовано до буфера."
+          },
+          "secret_key_not_copied": {
+            "message": "Помилка під час копіювання ключа."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "API токени",
+        "description": "Створюйте безпечні API токени для інтеграції ваших даних із зовнішніми системами та додатками.",
+        "title": "API токени",
+        "add_token": "Додати токен доступу",
+        "create_token": "Створити токен",
+        "never_expires": "Ніколи не спливає",
+        "generate_token": "Згенерувати токен",
+        "generating": "Генерація",
+        "delete": {
+          "title": "Видалити API токен",
+          "description": "Застосунки, які використовують цей токен, втратять доступ. Ця дія незворотна.",
+          "success": {
+            "title": "Успіх!",
+            "message": "Токен успішно видалено"
+          },
+          "error": {
+            "title": "Помилка!",
+            "message": "Не вдалося видалити токен"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Інтеграції",
+        "heading": "Інтеграції",
+        "description": "Підключайтеся до популярних інструментів і сервісів, щоб синхронізувати вашу роботу в усій екосистемі робочого процесу.",
+        "page_title": "Працюйте зі своїми даними Plane у доступних додатках або у власних.",
+        "page_description": "Перегляньте всі інтеграції, які використовує цей робочий простір або ви."
+      },
+      "imports": {
+        "title": "Імпорти",
+        "heading": "Імпорти",
+        "description": "Підключайтеся та імпортуйте дані з ваших наявних інструментів керування проєктами, щоб оптимізувати інтеграцію робочого процесу."
+      },
+      "worklogs": {
+        "title": "Ворклоги",
+        "heading": "Ворклоги",
+        "description": "Завантажуйте ворклоги (табелі обліку часу) для будь-кого в будь-якому проєкті."
+      },
+      "group_syncing": {
+        "title": "Синхронізація груп",
+        "heading": "Синхронізація груп",
+        "description": "Пов'яжіть групи провайдера ідентичності з проєктами та ролями. Доступ користувачів оновлюється автоматично при зміні членства в групі у вашому IdP, спрощуючи онбординг та офбординг.",
+        "enable": {
+          "title": "Увімкнути синхронізацію груп",
+          "description": "Автоматично додавайте користувачів до проєктів на основі груп провайдера ідентичності."
+        },
+        "config": {
+          "title": "Налаштувати синхронізацію груп",
+          "description": "Налаштуйте, як групи провайдера ідентичності зіставляються з проєктами та ролями.",
+          "sync_on_login": {
+            "title": "Синхронізація при вході",
+            "description": "Оновлюйте членство в групі та доступ до проєкту при вході користувача."
+          },
+          "sync_offline": {
+            "title": "Офлайн-синхронізація",
+            "description": "Запускає синхронізацію кожні шість годин автоматично, не чекаючи входу користувачів."
+          },
+          "auto_remove": {
+            "title": "Автоматичне видалення",
+            "description": "Автоматично видаляйте користувачів із проєктів, коли вони більше не відповідають групі."
+          },
+          "group_attribute_key": {
+            "title": "Ключ атрибута групи",
+            "description": "Атрибут провайдера ідентичності, що використовується для ідентифікації та синхронізації груп користувачів.",
+            "placeholder": "Групи"
+          }
+        },
+        "group_mapping": {
+          "title": "Зіставлення груп",
+          "description": "Пов'яжіть групи провайдера ідентичності з проєктами та ролями.",
+          "button_text": "Додати нову синхронізацію групи"
+        },
+        "toast": {
+          "updating": "Оновлення функції синхронізації груп",
+          "success": "Функцію синхронізації груп успішно оновлено.",
+          "error": "Не вдалося оновити функцію синхронізації груп!"
+        },
+        "delete_modal": {
+          "title": "Видалити синхронізацію групи",
+          "content": "Нові користувачі з цієї групи ідентичності більше не будуть додаватися до проєкту. Вже додані користувачі збережуть свою поточну роль."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Група користувачів",
+            "required": "Група користувачів обов'язкова",
+            "placeholder": "Введіть назви груп IdP"
+          },
+          "project": {
+            "text": "Проєкт",
+            "required": "Проєкт обов'язковий",
+            "placeholder": "Виберіть проєкт"
+          },
+          "default_role": {
+            "text": "Роль проєкту",
+            "required": "Роль проєкту обов'язкова",
+            "placeholder": "Виберіть роль проєкту"
+          }
+        }
+      },
+      "identity": {
+        "title": "Ідентичність",
+        "heading": "Ідентичність",
+        "description": "Налаштуйте свій домен і увімкніть єдиний вхід"
+      },
+      "project_states": {
+        "title": "Проджект стейти",
+        "heading": "Огляд прогресу для всіх проєктів.",
+        "description": "Стани проєктів — це функція, доступна лише в Plane, для відстеження прогресу всіх ваших проєктів за будь-якою властивістю проєкту.",
+        "go_to_settings": "Перейти до налаштувань"
+      },
+      "projects": {
+        "title": "Проєкти",
+        "description": "Керування станами проєктів, увімкнення міток проєктів та інші налаштування.",
+        "tabs": {
+          "states": "Проджект стейти",
+          "labels": "Мітки проєктів"
+        }
+      },
+      "templates": {
+        "title": "Шаблони",
+        "heading": "Шаблони",
+        "description": "Заощаджуйте 80% часу, витраченого на створення проєктів, робочих одиниць і сторінок, коли ви використовуєте шаблони."
+      },
+      "relations": {
+        "title": "Зв'язки",
+        "heading": "Зв'язки",
+        "description": "Створюйте та керуйте типами зв'язків, які поєднують робочі одиниці у вашому робочому просторі."
+      },
+      "cancel_trial": {
+        "title": "Спочатку скасуйте пробний період.",
+        "description": "У вас активний пробний період одного з наших платних планів. Будь ласка, спочатку скасуйте його, щоб продовжити.",
+        "dismiss": "Відхилити",
+        "cancel": "Скасувати пробний період",
+        "cancel_success_title": "Пробний період скасовано.",
+        "cancel_success_message": "Тепер ви можете видалити воркспейс.",
+        "cancel_error_title": "Це не спрацювало.",
+        "cancel_error_message": "Спробуйте ще раз, будь ласка."
+      },
+      "applications": {
+        "internal": "Внутрішній",
+        "title": "Додатки",
+        "applicationId_copied": "ID додатку скопійовано в буфер обміну",
+        "clientId_copied": "ID клієнта скопійовано в буфер обміну",
+        "clientSecret_copied": "Секрет клієнта скопійовано в буфер обміну",
+        "third_party_apps": "Сторонні додатки",
+        "your_apps": "Ваші додатки",
+        "connect": "Підключити",
+        "connected": "Підключено",
+        "disconnect": "Відключити",
+        "install": "Встановити",
+        "installed": "Встановлено",
+        "configure": "Налаштувати",
+        "app_available": "Ви зробили цей додаток доступним для використання з робочим простором Plane",
+        "app_credentials_regenrated": {
+          "title": "Облікові дані додатка були успішно згенеровані повторно",
+          "description": "Замініть клієнтський секрет усюди, де він використовується. Попередній секрет більше не дійсний."
+        },
+        "app_created": {
+          "title": "Додаток успішно створено",
+          "description": "Використайте облікові дані, щоб встановити додаток у робочому просторі Plane"
+        },
+        "installed_apps": "Встановлені додатки",
+        "all_apps": "Усі додатки",
+        "internal_apps": "Внутрішні додатки",
+        "app_name_title": "Як ви назвете цей додаток",
+        "app_description_title": {
+          "label": "Довгий опис",
+          "placeholder": "Напишіть довгий опис для маркетплейсу. Натисніть '/' для команд."
+        },
+        "authorization_grant_type": {
+          "title": "Тип підключення",
+          "description": "Виберіть, чи має ваш додаток бути встановлений один раз для робочого простору, чи дозволити кожному користувачу підключити свій власний обліковий запис"
+        },
+        "website": {
+          "title": "Вебсайт",
+          "description": "Посилання на вебсайт вашого додатка.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Створювач додатків",
+          "description": "Особа чи організація, яка створює додаток."
+        },
+        "app_maker_error": "Розробник додатку обов'язковий",
+        "setup_url": {
+          "label": "URL налаштування",
+          "description": "Користувачі будуть перенаправлені на цю URL після встановлення додатка.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL вебхука",
+          "description": "Тут ми будемо надсилати події вебхука та оновлення з робочих просторів, де встановлено ваш додаток.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Секрет вебхука",
+          "description": "Секрет, що використовується для перевірки вхідних запитів вебхука.",
+          "placeholder": "Введіть випадковий секретний ключ"
+        },
+        "redirect_uris": {
+          "label": "URI перенаправлення (через пробіл)",
+          "description": "Користувачі будуть перенаправлені на цей шлях після автентифікації через Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Підключіть робочий простір Plane, щоб почати використання",
+        "client_id_and_secret": "ID та Секрет Клієнта",
+        "client_id_and_secret_description": "Скопіюйте та збережіть цей секретний ключ. Ви не зможете побачити цей ключ після натискання Закрити.",
+        "client_id_and_secret_download": "Ви можете завантажити CSV з ключем звідси.",
+        "application_id": "ID Додатку",
+        "client_id": "ID Клієнта",
+        "client_secret": "Секрет Клієнта",
+        "export_as_csv": "Експорт у CSV",
+        "slug_already_exists": "Слаг вже існує",
+        "failed_to_create_application": "Не вдалося створити додаток",
+        "upload_logo": "Завантажити Логотип",
+        "app_name_error": "Назва додатку обов'язкова",
+        "app_short_description_title": "Дайте короткий опис цьому додатку",
+        "app_short_description_error": "Короткий опис додатку обов'язковий",
+        "app_description_error": "Опис додатку обов'язковий",
+        "app_slug_title": "Слаг додатку",
+        "app_slug_error": "Слаг додатку обов'язковий",
+        "invalid_website_error": "Недійсний вебсайт",
+        "webhook_url_title": "URL вебхука",
+        "webhook_url_error": "URL вебхука обов'язковий",
+        "invalid_webhook_url_error": "Недійсний URL вебхука",
+        "redirect_uris_title": "URI перенаправлення",
+        "redirect_uris_error": "URI перенаправлення обов'язкові",
+        "invalid_redirect_uris_error": "Недійсні URI перенаправлення",
+        "redirect_uris_description": "Введіть URI через пробіл, куди додаток буде перенаправляти після користувача, наприклад https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Дозволені джерела JavaScript",
+        "authorized_javascript_origins_error": "Дозволені джерела JavaScript обов'язкові",
+        "invalid_authorized_javascript_origins_error": "Недійсні дозволені джерела JavaScript",
+        "authorized_javascript_origins_description": "Введіть джерела через пробіл, звідки додаток зможе робити запити, наприклад app.com example.com",
+        "create_app": "Створити додаток",
+        "update_app": "Оновити додаток",
+        "build_your_own_app": "Створіть власний додаток",
+        "edit_app_details": "Редагувати деталі додатку",
+        "regenerate_client_secret_description": "Перегенерувати секрет клієнта. Після перегенерації ви зможете скопіювати ключ або завантажити його у файл CSV.",
+        "regenerate_client_secret": "Перегенерувати секрет клієнта",
+        "regenerate_client_secret_confirm_title": "Ви впевнені, що хочете перегенерувати секрет клієнта?",
+        "regenerate_client_secret_confirm_description": "Додаток, що використовує цей секрет, перестане працювати. Вам потрібно буде оновити секрет у додатку.",
+        "regenerate_client_secret_confirm_cancel": "Скасувати",
+        "regenerate_client_secret_confirm_regenerate": "Перегенерувати",
+        "read_only_access_to_workspace": "Доступ лише для читання до вашого робочого простору",
+        "write_access_to_workspace": "Доступ для запису до вашого робочого простору",
+        "read_only_access_to_user_profile": "Доступ лише для читання до вашого профілю користувача",
+        "write_access_to_user_profile": "Доступ для запису до вашого профілю користувача",
+        "connect_app_to_workspace": "Підключити {app} до вашого робочого простору {workspace}",
+        "user_permissions": "Дозволи користувача",
+        "user_permissions_description": "Дозволи користувача використовуються для надання доступу до профілю користувача.",
+        "workspace_permissions": "Дозволи робочого простору",
+        "workspace_permissions_description": "Дозволи робочого простору використовуються для надання доступу до робочого простору.",
+        "with_the_permissions": "з дозволами",
+        "app_consent_title": "{app} запитує доступ до вашого робочого простору та профілю Plane.",
+        "choose_workspace_to_connect_app_with": "Виберіть робочий простір для підключення додатку",
+        "app_consent_workspace_permissions_title": "{app} хоче",
+        "app_consent_user_permissions_title": "{app} також може запитати дозвіл користувача на наступні ресурси. Ці дозволи будуть запитані та авторизовані лише користувачем.",
+        "app_consent_accept_title": "Приймаючи",
+        "app_consent_accept_1": "Ви надаєте додатку доступ до ваших даних Plane скрізь, де ви можете використовувати додаток всередині або поза Plane",
+        "app_consent_accept_2": "Ви погоджуєтесь з Політикою конфіденційності та Умовами використання {app}",
+        "accepting": "Прийняття...",
+        "accept": "Прийняти",
+        "categories": "Категорії",
+        "select_app_categories": "Виберіть категорії додатку",
+        "categories_title": "Категорії",
+        "categories_error": "Категорії обов'язкові",
+        "invalid_categories_error": "Недійсні категорії",
+        "categories_description": "Виберіть категорії, які найкраще описують додаток",
+        "supported_plans": "Підтримувані Плани",
+        "supported_plans_description": "Виберіть плани робочого простору, які можуть встановити цю програму. Залиште порожнім, щоб дозволити всі плани.",
+        "select_plans": "Вибрати Плани",
+        "privacy_policy_url_title": "URL Політики конфіденційності",
+        "privacy_policy_url_error": "URL Політики конфіденційності обов'язковий",
+        "invalid_privacy_policy_url_error": "Недійсний URL Політики конфіденційності",
+        "terms_of_service_url_title": "URL Умов використання",
+        "terms_of_service_url_error": "URL Умов використання обов'язковий",
+        "invalid_terms_of_service_url_error": "Недійсний URL Умов використання",
+        "support_url_title": "URL підтримки",
+        "support_url_error": "URL підтримки обов'язковий",
+        "invalid_support_url_error": "Недійсний URL підтримки",
+        "video_url_title": "URL відео",
+        "video_url_error": "URL відео обов'язковий",
+        "invalid_video_url_error": "Недійсний URL відео",
+        "setup_url_error": "URL налаштування обов'язковий",
+        "invalid_setup_url_error": "Недійсний URL налаштування",
+        "configuration_url_title": "URL налаштування",
+        "configuration_url_error": "URL налаштування обов'язковий",
+        "invalid_configuration_url_error": "Недійсний URL налаштування",
+        "contact_email_title": "Email контакту",
+        "contact_email_error": "Email контакту обов'язковий",
+        "invalid_contact_email_error": "Недійсний email контакту",
+        "upload_attachments": "Завантажити вкладення",
+        "uploading_images": "Завантаження {count} зображення{count, plural, one {s} other {s}}",
+        "drop_images_here": "Перетягніть зображення сюди",
+        "click_to_upload_images": "Натисніть, щоб завантажити зображення",
+        "invalid_file_or_exceeds_size_limit": "Недійсний файл або перевищує ліміт розміру ({size} MB)",
+        "uploading": "Завантаження...",
+        "upload_and_save": "Завантажити та зберегти",
+        "app_consent_no_access_title": "Запит на встановлення",
+        "app_consent_no_access_description": "Цей додаток можна встановити лише після того, як адміністратор робочого простору його встановить. Зверніться до адміністратора робочого простору, щоб продовжити.",
+        "app_consent_unapproved_title": "Цей додаток ще не переглянуто та не схвалено Plane.",
+        "app_consent_unapproved_description": "Переконайтеся, що ви довіряєте цьому додатку, перш ніж підключати його до вашого робочого простору.",
+        "go_to_app": "Перейти до додатку",
+        "enable_app_mentions": "Увімкнути згадки додатка",
+        "enable_app_mentions_tooltip": "Коли це увімкнено, користувачі можуть згадувати або призначати робочі елементи цьому додатку.",
+        "scopes": "Області доступу",
+        "select_scopes": "Вибрати області",
+        "read_access_to": "Доступ лише для читання до",
+        "write_access_to": "Доступ на запис до",
+        "global_permission_expiration": "Глобальні області доступу незабаром застаріють. Використовуйте деталізовані області. Наприклад, використовуйте project:read замість глобального читання.",
+        "selected_scopes": "Вибрано: {count}",
+        "scopes_and_permissions": "Області та дозволи",
+        "read": "Читання",
+        "write": "Запис",
+        "scope_description": {
+          "projects": "Доступ до проектів та всіх пов’язаних сутностей",
+          "wiki": "Доступ до вікі та всіх пов’язаних сутностей",
+          "workspaces": "Доступ до робочих просторів та всіх пов’язаних сутностей",
+          "stickies": "Доступ до стікерів та всіх пов’язаних сутностей",
+          "profile": "Доступ до інформації профілю користувача",
+          "agents": "Доступ до агентів та всіх пов’язаних з агентами сутностей",
+          "assets": "Доступ до активів та всіх пов’язаних з активами сутностей"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Переглядайте, як ваша робота стає розумнішою та швидшою завдяки штучному інтелекту, який напряму пов'язаний з вашою роботою та базою знань."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Скрипти",
+        "new_script": "Новий скрипт",
+        "description": "Автоматизуйте свої робочі процеси за допомогою користувацьких скриптів і правил автоматизації."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Немає API токенів",
+        "description": "Використовуйте API, щоб інтегрувати Plane із зовнішніми системами."
+      },
+      "webhooks": {
+        "title": "Немає вебхуків",
+        "description": "Створіть вебхуки для автоматизації дій."
+      },
+      "exports": {
+        "title": "Немає експортів",
+        "description": "Історія експортів з'явиться тут."
+      },
+      "imports": {
+        "title": "Немає імпортів",
+        "description": "Історія імпортів з'явиться тут."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/ua/workspace.json b/packages/i18n/src/locales/ua/workspace.json
new file mode 100644
index 0000000..cb288fd
--- /dev/null
+++ b/packages/i18n/src/locales/ua/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Створіть робочий простір",
+    "subheading": "Щоб користуватися Plane, вам потрібно створити або приєднатися до робочого простору.",
+    "form": {
+      "name": {
+        "label": "Назвіть свій робочий простір",
+        "placeholder": "Добре підійде щось знайоме та впізнаване."
+      },
+      "url": {
+        "label": "Встановіть URL вашого простору",
+        "placeholder": "Введіть або вставте URL",
+        "edit_slug": "Ви можете відредагувати лише частину URL (slug)"
+      },
+      "organization_size": {
+        "label": "Скільки людей користуватиметься цим простором?",
+        "placeholder": "Виберіть діапазон"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Тільки адміністратор інстанції може створювати робочі простори",
+        "description": "Якщо ви знаєте електронну адресу адміністратора інстанції, натисніть кнопку нижче, щоб зв'язатися з ним.",
+        "request_button": "Запитати адміністратора інстанції"
+      },
+      "validation": {
+        "name_alphanumeric": "Назви робочих просторів можуть містити лише (' '), ('-'), ('_') і алфанумеричні символи.",
+        "name_length": "Назва обмежена 80 символами.",
+        "url_alphanumeric": "URL може містити лише ('-') та алфанумеричні символи.",
+        "url_length": "URL обмежений 48 символами.",
+        "url_already_taken": "URL робочого простору вже зайнято!"
+      }
+    },
+    "request_email": {
+      "subject": "Запит на новий робочий простір",
+      "body": "Привіт, адміністраторе,\n\nБудь ласка, створіть новий робочий простір з URL [/workspace-name] для [мета створення].\n\nДякую,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Створити робочий простір",
+      "loading": "Створення робочого простору"
+    },
+    "toast": {
+      "success": {
+        "title": "Успіх",
+        "message": "Робочий простір успішно створено"
+      },
+      "error": {
+        "title": "Помилка",
+        "message": "Не вдалося створити робочий простір. Спробуйте ще раз."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Огляд проєктів, активностей і метрик",
+        "description": "Ласкаво просимо до Plane, ми раді, що ви з нами. Створіть перший проєкт, додайте робочі одиниці — і ця сторінка заповниться вашим прогресом. Адміністратори побачать тут також важливі елементи для команди.",
+        "primary_button": {
+          "text": "Створіть перший проєкт",
+          "comic": {
+            "title": "Усе починається з проєкту в Plane",
+            "description": "Проєкт може бути дорожньою картою продукту, маркетинговою кампанією або розробкою нового автомобіля."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Аналітика",
+    "page_label": "{workspace} - Аналітика",
+    "open_tasks": "Усього відкритих завдань",
+    "error": "Сталася помилка під час завантаження даних.",
+    "work_items_closed_in": "Робочі одиниці, закриті в",
+    "selected_projects": "Вибрані проєкти",
+    "total_members": "Усього учасників",
+    "total_cycles": "Усього циклів",
+    "total_modules": "Усього модулів",
+    "pending_work_items": {
+      "title": "Робочі одиниці, що очікують",
+      "empty_state": "Тут буде аналітика щодо робочих одиниць у розрізі виконавців."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Робочі одиниці, закриті за рік",
+      "empty_state": "Закривайте одиниці, щоб побачити аналітику в графіку."
+    },
+    "most_work_items_created": {
+      "title": "Найбільше створених одиниць",
+      "empty_state": "Тут відображатимуться виконавці та кількість створених ними одиниць."
+    },
+    "most_work_items_closed": {
+      "title": "Найбільше закритих одиниць",
+      "empty_state": "Тут відображатимуться виконавці та кількість закритих ними одиниць."
+    },
+    "tabs": {
+      "scope_and_demand": "Обсяг і попит",
+      "custom": "Користувацька аналітика"
+    },
+    "total": "Усього {entity}",
+    "started_work_items": "Розпочаті {entity}",
+    "backlog_work_items": "{entity} у беклозі",
+    "un_started_work_items": "Нерозпочаті {entity}",
+    "completed_work_items": "Завершені {entity}",
+    "project_insights": "Аналітика проєкту",
+    "summary_of_projects": "Зведення проєктів",
+    "all_projects": "Усі проєкти",
+    "trend_on_charts": "Тенденція на графіках",
+    "active_projects": "Активні проєкти",
+    "customized_insights": "Персоналізовані аналітичні дані",
+    "created_vs_resolved": "Створено vs Вирішено",
+    "empty_state": {
+      "project_insights": {
+        "title": "Ще немає даних",
+        "description": "Призначені вам робочі елементи, розбиті за станом, з’являться тут."
+      },
+      "created_vs_resolved": {
+        "title": "Ще немає даних",
+        "description": "Створені та вирішені з часом робочі елементи з’являться тут."
+      },
+      "customized_insights": {
+        "title": "Ще немає даних",
+        "description": "Призначені вам робочі елементи, розбиті за станом, з’являться тут."
+      },
+      "general": {
+        "title": "Відстежуйте прогрес, робочу навантаженні та розподіл. Виявляйте тенденції, усувайте перешкоди та прискорюйте роботу",
+        "description": "Перегляньте обсяг проти попиту, оцінки та розповсюдження обсягу. Отримайте продуктивність членів команди та команд, щоб переконатися, що ваш проєкт виконується вчасно.",
+        "primary_button": {
+          "text": "Розпочніть свій перший проєкт",
+          "comic": {
+            "title": "Аналітика найкраще працює з циклами + модулями",
+            "description": "Спочатку обмежте свої робочі елементи часом у циклах та, якщо можливо, згрупуйте робочі елементи, які перевищують один цикл, у модулі. Перегляньте обидва в навігації зліва."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Ще немає даних",
+        "description": "Аналітика прогресу циклу з’явиться тут. Додайте робочі елементи до циклів, щоб почати відстеження прогресу."
+      },
+      "module_progress": {
+        "title": "Ще немає даних",
+        "description": "Аналітика прогресу модуля з’явиться тут. Додайте робочі елементи до модулів, щоб почати відстеження прогресу."
+      },
+      "intake_trends": {
+        "title": "Ще немає даних",
+        "description": "Аналітика тенденцій intake з’явиться тут. Додайте робочі елементи до intake, щоб почати відстеження тенденцій."
+      }
+    },
+    "upgrade_to_plan": "Оновіть до {plan}, щоб розблокувати {tab}",
+    "workitem_resolved_vs_pending": "Вирішені vs очікуючі робочі елементи",
+    "projects_by_status": "Проєкти за статусом",
+    "active_users": "Активні користувачі",
+    "intake_trends": "Тенденції прийому"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {Проєкт} few {Проєкти} other {Проєктів}}",
+    "create": {
+      "label": "Додати проєкт"
+    },
+    "network": {
+      "label": "Мережа",
+      "private": {
+        "title": "Приватний",
+        "description": "Доступний лише за запрошенням"
+      },
+      "public": {
+        "title": "Публічний",
+        "description": "Будь-хто в просторі, крім гостей, може приєднатися"
+      }
+    },
+    "error": {
+      "permission": "У вас немає прав для цієї дії.",
+      "cycle_delete": "Не вдалося видалити цикл",
+      "module_delete": "Не вдалося видалити модуль",
+      "issue_delete": "Не вдалося видалити робочу одиницю"
+    },
+    "state": {
+      "backlog": "Backlog",
+      "unstarted": "Не почато",
+      "started": "Розпочато",
+      "completed": "Завершено",
+      "cancelled": "Скасовано"
+    },
+    "sort": {
+      "manual": "Вручну",
+      "name": "Назва",
+      "created_at": "Дата створення",
+      "members_length": "Кількість учасників"
+    },
+    "scope": {
+      "my_projects": "Мої проєкти",
+      "archived_projects": "Заархівовані"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# місяць} few{# місяці} other{# місяців}}",
+      "days_count": "{days, plural, one{# день} few{# дні} other{# днів}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Немає активних проєктів",
+        "description": "Проєкт є базовою одиницею цілей. У проєкті є завдання, Цикли та Модулі. Створіть новий проєкт або перемкніть фільтр на заархівовані.",
+        "primary_button": {
+          "text": "Розпочати перший проєкт",
+          "comic": {
+            "title": "Усе починається з проєкту в Plane",
+            "description": "Проєкт може бути дорожньою картою продукту, маркетинговою кампанією або розробкою нового авто."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Немає проєктів",
+        "description": "Щоб створювати робочі одиниці, потрібно створити або приєднатися до проєкту.",
+        "primary_button": {
+          "text": "Розпочати перший проєкт",
+          "comic": {
+            "title": "Усе починається з проєкту в Plane",
+            "description": "Проєкт може бути дорожньою картою продукту, маркетинговою кампанією або розробкою нового авто."
+          }
+        }
+      },
+      "filter": {
+        "title": "Немає проєктів за цим фільтром",
+        "description": "Не знайдено проєктів, що відповідають критеріям.\nСтворіть новий."
+      },
+      "search": {
+        "description": "Не знайдено проєктів, що відповідають критеріям.\nСтворіть новий."
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Додати подання",
+    "empty_state": {
+      "all-issues": {
+        "title": "Немає робочих одиниць у проєкті",
+        "description": "Створіть першу одиницю та відстежуйте прогрес!",
+        "primary_button": {
+          "text": "Створити робочу одиницю"
+        }
+      },
+      "assigned": {
+        "title": "Немає призначених одиниць",
+        "description": "Тут відображатимуться одиниці, призначені вам.",
+        "primary_button": {
+          "text": "Створити робочу одиницю"
+        }
+      },
+      "created": {
+        "title": "Немає створених одиниць",
+        "description": "Тут відображатимуться одиниці, які ви створили.",
+        "primary_button": {
+          "text": "Створити робочу одиницю"
+        }
+      },
+      "subscribed": {
+        "title": "Немає підписаних одиниць",
+        "description": "Підпишіться на одиниці, які вас цікавлять."
+      },
+      "custom-view": {
+        "title": "Немає одиниць за заданим фільтром",
+        "description": "Тут з'являться одиниці, що відповідають фільтру."
+      }
+    },
+    "delete_view": {
+      "title": "Ви впевнені, що хочете видалити це подання?",
+      "content": "Якщо ви підтвердите, всі параметри сортування, фільтрації та відображення + макет, який ви обрали для цього подання, будуть безповоротно видалені без можливості відновлення."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Створити чернетку одиниці",
+    "empty_state": {
+      "title": "Тут відображатимуться ваші чернетки одиниць та коментарів.",
+      "description": "Почніть створювати одиницю і залиште її як чернетку.",
+      "primary_button": {
+        "text": "Створити першу чернетку"
+      }
+    },
+    "delete_modal": {
+      "title": "Видалити чернетку",
+      "description": "Справді видалити цю чернетку? Дію неможливо скасувати."
+    },
+    "toasts": {
+      "created": {
+        "success": "Чернетку створено",
+        "error": "Не вдалося створити"
+      },
+      "deleted": {
+        "success": "Чернетку видалено"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Напишіть нотатку, документ або повну базу знань. Отримайте Галілео, ШІ-асистента Плейн, щоб допомогти вам почати",
+        "description": "Пейджі - це простір для роздумів у Плейн. Записуйте нотатки зустрічей, легко форматуйте їх, вбудовуйте робочі елементи, розташовуйте їх за допомогою бібліотеки компонентів і зберігайте їх усі в контексті вашого проджекту. Щоб скоротити будь-який документ, викликайте Галілео, ШІ Плейн, за допомогою ярлика або натисканням кнопки.",
+        "primary_button": {
+          "text": "Створіть свій перший пейдж"
+        }
+      },
+      "private": {
+        "title": "Ще немає приватних пейджів",
+        "description": "Зберігайте свої приватні думки тут. Коли ви будете готові поділитися, команда за один клік.",
+        "primary_button": {
+          "text": "Створіть свій перший пейдж"
+        }
+      },
+      "public": {
+        "title": "Ще немає сторінок робочого простору",
+        "description": "Дивіться пейджі, якими діляться з усіма у вашому робочому просторі, прямо тут.",
+        "primary_button": {
+          "text": "Створіть свій перший пейдж"
+        }
+      },
+      "archived": {
+        "title": "Ще немає заархівованих пейджів",
+        "description": "Архівуйте пейджі, які не на вашому радарі. Доступ до них тут, коли потрібно."
+      },
+      "shared": {
+        "title": "Поки що немає спільних сторінок",
+        "description": "Сторінки, якими з вами поділилися, з'являться тут."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Немає активних циклів",
+        "description": "Цикли ваших проджектів, які включають будь-який період, що охоплює сьогоднішню дату в межах свого діапазону. Знайдіть прогрес і деталі всіх ваших активних циклів тут."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Імпорт учасників з CSV",
+      "description": "Завантажте CSV зі стовпцями: Email, Display Name, First Name, Last Name, Role (5, 15 або 20)",
+      "dropzone": {
+        "active": "Перетягніть CSV файл сюди",
+        "inactive": "Перетягніть або натисніть для завантаження",
+        "file_type": "Підтримуються лише файли .csv"
+      },
+      "buttons": {
+        "cancel": "Скасувати",
+        "import": "Імпортувати",
+        "try_again": "Спробувати знову",
+        "close": "Закрити",
+        "done": "Готово"
+      },
+      "progress": {
+        "uploading": "Завантаження...",
+        "importing": "Імпорт..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Імпорт не вдався",
+          "complete": "Імпорт завершено"
+        },
+        "message": {
+          "seat_limit": "Не вдалося імпортувати учасників через обмеження кількості місць.",
+          "success": "Успішно додано {count} учасник{plural} до робочого простору.",
+          "no_imports": "Учасники не були імпортовані з CSV файлу."
+        },
+        "stats": {
+          "successful": "Успішно",
+          "failed": "Не вдалося"
+        },
+        "download_errors": "Завантажити помилки"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Недійсний файл",
+          "message": "Підтримуються лише CSV файли."
+        },
+        "import_failed": {
+          "title": "Імпорт не вдався",
+          "message": "Щось пішло не так."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/accessibility.json b/packages/i18n/src/locales/vi-VN/accessibility.json
new file mode 100644
index 0000000..b3ab935
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "Logo không gian làm việc",
+      "open_workspace_switcher": "Mở trình chuyển đổi không gian làm việc",
+      "open_user_menu": "Mở menu người dùng",
+      "open_command_palette": "Mở bảng lệnh",
+      "open_extended_sidebar": "Mở thanh bên mở rộng",
+      "close_extended_sidebar": "Đóng thanh bên mở rộng",
+      "create_favorites_folder": "Tạo thư mục yêu thích",
+      "open_folder": "Mở thư mục",
+      "close_folder": "Đóng thư mục",
+      "open_favorites_menu": "Mở menu yêu thích",
+      "close_favorites_menu": "Đóng menu yêu thích",
+      "enter_folder_name": "Nhập tên thư mục",
+      "create_new_project": "Tạo dự án mới",
+      "open_projects_menu": "Mở menu dự án",
+      "close_projects_menu": "Đóng menu dự án",
+      "toggle_quick_actions_menu": "Bật/tắt menu hành động nhanh",
+      "open_project_menu": "Mở menu dự án",
+      "close_project_menu": "Đóng menu dự án",
+      "collapse_sidebar": "Thu gọn thanh bên",
+      "expand_sidebar": "Mở rộng thanh bên",
+      "edition_badge": "Mở modal gói trả phí"
+    },
+    "auth_forms": {
+      "clear_email": "Xóa email",
+      "show_password": "Hiển thị mật khẩu",
+      "hide_password": "Ẩn mật khẩu",
+      "close_alert": "Đóng cảnh báo",
+      "close_popover": "Đóng popover"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/auth.json b/packages/i18n/src/locales/vi-VN/auth.json
new file mode 100644
index 0000000..04e00f3
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "Danh tính",
+    "description": "Cấu hình miền của bạn để truy cập các tính năng bảo mật bao gồm đăng nhập một lần.",
+    "domain_management": {
+      "header": "Quản lý miền",
+      "verified_domains": {
+        "header": "Miền đã xác minh",
+        "description": "Xác minh quyền sở hữu miền email để bật đăng nhập một lần.",
+        "button_text": "Thêm miền",
+        "list": {
+          "domain_name": "Tên miền",
+          "status": "Trạng thái",
+          "status_verified": "Đã xác minh",
+          "status_failed": "Thất bại",
+          "status_pending": "Đang chờ"
+        },
+        "add_domain": {
+          "title": "Thêm miền",
+          "description": "Thêm miền của bạn để cấu hình SSO và xác minh nó.",
+          "form": {
+            "domain_label": "Miền",
+            "domain_placeholder": "plane.so",
+            "domain_required": "Miền là bắt buộc",
+            "domain_invalid": "Nhập tên miền hợp lệ (ví dụ: plane.so)"
+          },
+          "primary_button_text": "Thêm miền",
+          "primary_button_loading_text": "Đang thêm",
+          "toast": {
+            "success_title": "Thành công!",
+            "success_message": "Miền đã được thêm thành công. Vui lòng xác minh bằng cách thêm bản ghi DNS TXT.",
+            "error_message": "Không thể thêm miền. Vui lòng thử lại."
+          }
+        },
+        "verify_domain": {
+          "title": "Xác minh miền của bạn",
+          "description": "Làm theo các bước sau để xác minh miền của bạn.",
+          "instructions": {
+            "label": "Hướng dẫn",
+            "step_1": "Đi tới cài đặt DNS cho máy chủ miền của bạn.",
+            "step_2": {
+              "part_1": "Tạo một",
+              "part_2": "bản ghi TXT",
+              "part_3": "và dán giá trị bản ghi đầy đủ được cung cấp bên dưới."
+            },
+            "step_3": "Bản cập nhật này thường mất vài phút nhưng có thể mất tới 72 giờ để hoàn thành.",
+            "step_4": "Nhấp vào \"Xác minh miền\" để xác nhận sau khi bản ghi DNS của bạn được cập nhật."
+          },
+          "verification_code_label": "Giá trị bản ghi TXT",
+          "verification_code_description": "Thêm bản ghi này vào cài đặt DNS của bạn",
+          "domain_label": "Miền",
+          "primary_button_text": "Xác minh miền",
+          "primary_button_loading_text": "Đang xác minh",
+          "secondary_button_text": "Tôi sẽ làm sau",
+          "toast": {
+            "success_title": "Thành công!",
+            "success_message": "Miền đã được xác minh thành công.",
+            "error_message": "Không thể xác minh miền. Vui lòng thử lại."
+          }
+        },
+        "delete_domain": {
+          "title": "Xóa miền",
+          "description": {
+            "prefix": "Bạn có chắc chắn muốn xóa",
+            "suffix": "? Hành động này không thể hoàn tác."
+          },
+          "primary_button_text": "Xóa",
+          "primary_button_loading_text": "Đang xóa",
+          "secondary_button_text": "Hủy",
+          "toast": {
+            "success_title": "Thành công!",
+            "success_message": "Miền đã được xóa thành công.",
+            "error_message": "Không thể xóa miền. Vui lòng thử lại."
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "Đăng nhập một lần",
+      "disabled_message": "Thêm miền đã xác minh để cấu hình SSO",
+      "configure": {
+        "create": "Cấu hình",
+        "update": "Chỉnh sửa"
+      },
+      "switch_alert_modal": {
+        "title": "Chuyển phương thức SSO sang {newProviderShortName}?",
+        "content": "Bạn sắp bật {newProviderLongName} ({newProviderShortName}). Hành động này sẽ tự động tắt {activeProviderLongName} ({activeProviderShortName}). Người dùng cố gắng đăng nhập qua {activeProviderShortName} sẽ không thể truy cập nền tảng cho đến khi họ chuyển sang phương thức mới. Bạn có chắc chắn muốn tiếp tục?",
+        "primary_button_text": "Chuyển",
+        "primary_button_text_loading": "Đang chuyển",
+        "secondary_button_text": "Hủy"
+      },
+      "form_section": {
+        "title": "Chi tiết do IdP cung cấp cho {workspaceName}"
+      },
+      "form_action_buttons": {
+        "saving": "Đang lưu",
+        "save_changes": "Lưu thay đổi",
+        "configure_only": "Chỉ cấu hình",
+        "configure_and_enable": "Cấu hình và bật",
+        "default": "Lưu"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} chi tiết được cung cấp cho IdP của bạn",
+        "button_text": "Lấy chi tiết thiết lập"
+      },
+      "saml": {
+        "header": "Bật SAML",
+        "description": "Cấu hình nhà cung cấp danh tính SAML của bạn để bật đăng nhập một lần.",
+        "configure": {
+          "title": "Bật SAML",
+          "description": "Xác minh quyền sở hữu miền email để truy cập các tính năng bảo mật bao gồm đăng nhập một lần.",
+          "toast": {
+            "success_title": "Thành công!",
+            "create_success_message": "Nhà cung cấp SAML đã được tạo thành công.",
+            "update_success_message": "Nhà cung cấp SAML đã được cập nhật thành công.",
+            "error_title": "Lỗi!",
+            "error_message": "Không thể lưu nhà cung cấp SAML. Vui lòng thử lại."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Chi tiết web",
+            "entity_id": {
+              "label": "ID thực thể | Đối tượng | Thông tin siêu dữ liệu",
+              "description": "Chúng tôi sẽ tạo phần siêu dữ liệu này xác định ứng dụng Plane này như một dịch vụ được ủy quyền trên IdP của bạn."
+            },
+            "callback_url": {
+              "label": "URL đăng nhập một lần",
+              "description": "Chúng tôi sẽ tạo điều này cho bạn. Thêm điều này vào trường URL chuyển hướng đăng nhập của IdP của bạn."
+            },
+            "logout_url": {
+              "label": "URL đăng xuất một lần",
+              "description": "Chúng tôi sẽ tạo điều này cho bạn. Thêm điều này vào trường URL chuyển hướng đăng xuất đơn của IdP của bạn."
+            }
+          },
+          "mobile_details": {
+            "header": "Chi tiết di động",
+            "entity_id": {
+              "label": "ID thực thể | Đối tượng | Thông tin siêu dữ liệu",
+              "description": "Chúng tôi sẽ tạo phần siêu dữ liệu này xác định ứng dụng Plane này như một dịch vụ được ủy quyền trên IdP của bạn."
+            },
+            "callback_url": {
+              "label": "URL đăng nhập một lần",
+              "description": "Chúng tôi sẽ tạo điều này cho bạn. Thêm điều này vào trường URL chuyển hướng đăng nhập của IdP của bạn."
+            },
+            "logout_url": {
+              "label": "URL đăng xuất một lần",
+              "description": "Chúng tôi sẽ tạo điều này cho bạn. Thêm điều này vào trường URL chuyển hướng đăng xuất của IdP của bạn."
+            }
+          },
+          "mapping_table": {
+            "header": "Chi tiết ánh xạ",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "Bật OIDC",
+        "description": "Cấu hình nhà cung cấp danh tính OIDC của bạn để bật đăng nhập một lần.",
+        "configure": {
+          "title": "Bật OIDC",
+          "description": "Xác minh quyền sở hữu miền email để truy cập các tính năng bảo mật bao gồm đăng nhập một lần.",
+          "toast": {
+            "success_title": "Thành công!",
+            "create_success_message": "Nhà cung cấp OIDC đã được tạo thành công.",
+            "update_success_message": "Nhà cung cấp OIDC đã được cập nhật thành công.",
+            "error_title": "Lỗi!",
+            "error_message": "Không thể lưu nhà cung cấp OIDC. Vui lòng thử lại."
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Chi tiết web",
+            "origin_url": {
+              "label": "URL nguồn gốc",
+              "description": "Chúng tôi sẽ tạo điều này cho ứng dụng Plane này. Thêm điều này như một nguồn gốc đáng tin cậy vào trường tương ứng của IdP của bạn."
+            },
+            "callback_url": {
+              "label": "URL chuyển hướng",
+              "description": "Chúng tôi sẽ tạo điều này cho bạn. Thêm điều này vào trường URL chuyển hướng đăng nhập của IdP của bạn."
+            },
+            "logout_url": {
+              "label": "URL đăng xuất",
+              "description": "Chúng tôi sẽ tạo điều này cho bạn. Thêm điều này vào trường URL chuyển hướng đăng xuất của IdP của bạn."
+            }
+          },
+          "mobile_details": {
+            "header": "Chi tiết di động",
+            "origin_url": {
+              "label": "URL nguồn gốc",
+              "description": "Chúng tôi sẽ tạo điều này cho ứng dụng Plane này. Thêm điều này như một nguồn gốc đáng tin cậy vào trường tương ứng của IdP của bạn."
+            },
+            "callback_url": {
+              "label": "URL chuyển hướng",
+              "description": "Chúng tôi sẽ tạo điều này cho bạn. Thêm điều này vào trường URL chuyển hướng đăng nhập của IdP của bạn."
+            },
+            "logout_url": {
+              "label": "URL đăng xuất",
+              "description": "Chúng tôi sẽ tạo điều này cho bạn. Thêm điều này vào trường URL chuyển hướng đăng xuất của IdP của bạn."
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "Email",
+        "placeholder": "name@company.com",
+        "errors": {
+          "required": "Email là bắt buộc",
+          "invalid": "Email không hợp lệ"
+        }
+      },
+      "password": {
+        "label": "Mật khẩu",
+        "set_password": "Đặt mật khẩu",
+        "placeholder": "Nhập mật khẩu",
+        "confirm_password": {
+          "label": "Xác nhận mật khẩu",
+          "placeholder": "Xác nhận mật khẩu"
+        },
+        "current_password": {
+          "label": "Mật khẩu hiện tại"
+        },
+        "new_password": {
+          "label": "Mật khẩu mới",
+          "placeholder": "Nhập mật khẩu mới"
+        },
+        "change_password": {
+          "label": {
+            "default": "Thay đổi mật khẩu",
+            "submitting": "Đang thay đổi mật khẩu"
+          }
+        },
+        "errors": {
+          "match": "Mật khẩu không khớp",
+          "empty": "Vui lòng nhập mật khẩu",
+          "length": "Mật khẩu phải dài hơn 8 ký tự",
+          "strength": {
+            "weak": "Mật khẩu yếu",
+            "strong": "Mật khẩu mạnh"
+          }
+        },
+        "submit": "Đặt mật khẩu",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "Thành công!",
+              "message": "Mật khẩu đã được thay đổi thành công."
+            },
+            "error": {
+              "title": "Lỗi!",
+              "message": "Đã xảy ra lỗi. Vui lòng thử lại."
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "Mã duy nhất",
+        "placeholder": "123456",
+        "paste_code": "Dán mã xác minh đã gửi đến email của bạn",
+        "requesting_new_code": "Đang yêu cầu mã mới",
+        "sending_code": "Đang gửi mã"
+      },
+      "already_have_an_account": "Đã có tài khoản?",
+      "login": "Đăng nhập",
+      "create_account": "Tạo tài khoản",
+      "new_to_plane": "Lần đầu sử dụng Plane?",
+      "back_to_sign_in": "Quay lại đăng nhập",
+      "resend_in": "Gửi lại sau {seconds} giây",
+      "sign_in_with_unique_code": "Đăng nhập bằng mã duy nhất",
+      "forgot_password": "Quên mật khẩu?",
+      "username": {
+        "label": "Tên người dùng",
+        "placeholder": "Nhập tên người dùng của bạn"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "Tạo tài khoản để bắt đầu quản lý công việc cùng nhóm của bạn.",
+        "step": {
+          "email": {
+            "header": "Đăng ký",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Đăng ký",
+            "sub_header": "Đăng ký bằng cách kết hợp email-mật khẩu."
+          },
+          "unique_code": {
+            "header": "Đăng ký",
+            "sub_header": "Đăng ký bằng mã duy nhất được gửi đến email trên."
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "Vui lòng đặt mật khẩu mạnh để tiếp tục"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "Đăng nhập để bắt đầu quản lý công việc cùng nhóm của bạn.",
+        "step": {
+          "email": {
+            "header": "Đăng nhập hoặc đăng ký",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "Đăng nhập hoặc đăng ký",
+            "sub_header": "Đăng nhập bằng cách kết hợp email-mật khẩu của bạn."
+          },
+          "unique_code": {
+            "header": "Đăng nhập hoặc đăng ký",
+            "sub_header": "Đăng nhập bằng mã duy nhất được gửi đến email trên."
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "Đặt lại mật khẩu",
+      "description": "Nhập địa chỉ email đã xác minh cho tài khoản người dùng của bạn và chúng tôi sẽ gửi cho bạn liên kết đặt lại mật khẩu.",
+      "email_sent": "Chúng tôi đã gửi liên kết đặt lại đến email của bạn",
+      "send_reset_link": "Gửi liên kết đặt lại",
+      "errors": {
+        "smtp_not_enabled": "Chúng tôi nhận thấy quản trị viên của bạn chưa bật SMTP, chúng tôi sẽ không thể gửi liên kết đặt lại mật khẩu"
+      },
+      "toast": {
+        "success": {
+          "title": "Email đã được gửi",
+          "message": "Hãy kiểm tra hộp thư đến của bạn để lấy liên kết đặt lại mật khẩu. Nếu bạn không nhận được trong vòng vài phút, vui lòng kiểm tra thư mục spam."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Đã xảy ra lỗi. Vui lòng thử lại."
+        }
+      }
+    },
+    "reset_password": {
+      "title": "Đặt mật khẩu mới",
+      "description": "Bảo vệ tài khoản của bạn bằng mật khẩu mạnh"
+    },
+    "set_password": {
+      "title": "Bảo vệ tài khoản của bạn",
+      "description": "Đặt mật khẩu giúp bạn đăng nhập an toàn"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "Lỗi!",
+          "message": "Không thể đăng xuất. Vui lòng thử lại."
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "Tiếp tục với {ldapProviderName}",
+        "sub_header": "Nhập thông tin đăng nhập {ldapProviderName} của bạn"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/automation.json b/packages/i18n/src/locales/vi-VN/automation.json
new file mode 100644
index 0000000..8dec0fb
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "Tự động hóa tùy chỉnh",
+      "create_automation": "Tạo tự động hóa"
+    },
+    "scope": {
+      "label": "Phạm vi",
+      "run_on": "Chạy trên"
+    },
+    "trigger": {
+      "label": "Kích hoạt",
+      "add_trigger": "Thêm kích hoạt",
+      "sidebar_header": "Cấu hình kích hoạt",
+      "input_label": "Kích hoạt nào cho tự động hóa này?",
+      "input_placeholder": "Chọn một tùy chọn",
+      "section_plane_events": "Sự kiện Plane",
+      "section_time_based": "Dựa trên thời gian",
+      "fixed_schedule": "Lịch trình cố định",
+      "schedule": {
+        "frequency": "Tần suất",
+        "select_day": "Chọn ngày",
+        "day_of_month": "Ngày trong tháng",
+        "monthly_every": "Mỗi",
+        "monthly_day_aria": "Ngày {day}",
+        "time": "Thời gian",
+        "hour": "Giờ",
+        "minute": "Phút",
+        "hour_suffix": "giờ",
+        "minute_suffix": "phút",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "Múi giờ",
+        "timezone_placeholder": "Chọn múi giờ",
+        "frequency_daily": "Hàng ngày",
+        "frequency_weekly": "Hàng tuần",
+        "frequency_monthly": "Hàng tháng",
+        "on": "Vào",
+        "validation_weekly_day_required": "Chọn ít nhất một ngày trong tuần.",
+        "validation_monthly_date_required": "Chọn một ngày trong tháng.",
+        "main_content_schedule_summary_daily": "Mỗi ngày lúc {time} ({timezone}).",
+        "main_content_schedule_summary_weekly": "Mỗi tuần vào {days} lúc {time} ({timezone}).",
+        "main_content_schedule_summary_monthly": "Mỗi tháng vào ngày {day} lúc {time} ({timezone}).",
+        "schedule_mode": "Chế độ lịch",
+        "schedule_mode_fixed": "Cố định",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "Nhập biểu thức Cron",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "Biểu thức Cron không hợp lệ.",
+        "cron_preview": "Biểu thức Cron này chạy \"{description}\".",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "Quay lại",
+        "next": "Thêm hành động"
+      },
+      "warning": {
+        "disabled_trigger_switching": "Bạn không thể thay đổi loại kích hoạt sau khi đã tạo"
+      }
+    },
+    "condition": {
+      "label": "Điều kiện",
+      "add_condition": "Thêm điều kiện",
+      "adding_condition": "Đang thêm điều kiện"
+    },
+    "action": {
+      "label": "Hành động",
+      "add_action": "Thêm hành động",
+      "sidebar_header": "Hành động",
+      "input_label": "Tự động hóa làm gì?",
+      "input_placeholder": "Chọn một tùy chọn",
+      "handler_name": {
+        "add_comment": "Thêm bình luận",
+        "change_property": "Thay đổi thuộc tính",
+        "run_script": "Chạy script"
+      },
+      "configuration": {
+        "label": "Cấu hình",
+        "change_property": {
+          "placeholders": {
+            "property_name": "Chọn thuộc tính",
+            "change_type": "Chọn",
+            "property_value_select": "{count, plural, one{Chọn giá trị} other{Chọn giá trị}}",
+            "property_value_select_date": "Chọn ngày"
+          },
+          "validation": {
+            "property_name_required": "Tên thuộc tính là bắt buộc",
+            "change_type_required": "Loại thay đổi là bắt buộc",
+            "property_value_required": "Giá trị thuộc tính là bắt buộc"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "Thêm bình luận"
+      },
+      "run_script_block": {
+        "title": "Chạy script"
+      },
+      "change_property_block": {
+        "title": "Thay đổi thuộc tính"
+      },
+      "validation": {
+        "delete_only_action": "Vô hiệu hóa tự động hóa trước khi xóa hành động duy nhất của nó."
+      }
+    },
+    "conjunctions": {
+      "and": "Và",
+      "or": "Hoặc",
+      "if": "Nếu",
+      "then": "Thì"
+    },
+    "enable": {
+      "alert": "Nhấn 'Kích hoạt' khi tự động hóa của bạn hoàn tất. Sau khi được kích hoạt, tự động hóa sẽ sẵn sàng chạy.",
+      "validation": {
+        "required": "Tự động hóa phải có kích hoạt và ít nhất một hành động để được kích hoạt."
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "Tự động hóa phải được vô hiệu hóa trước khi xóa."
+      }
+    },
+    "table": {
+      "title": "Tiêu đề tự động hóa",
+      "scope": "Phạm vi",
+      "projects": "Dự án",
+      "last_run_on": "Chạy lần cuối vào",
+      "created_on": "Được tạo vào",
+      "last_updated_on": "Cập nhật lần cuối vào",
+      "last_run_status": "Trạng thái chạy lần cuối",
+      "average_duration": "Thời gian trung bình",
+      "owner": "Chủ sở hữu",
+      "executions": "Lần thực thi"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "Tạo tự động hóa",
+        "update": "Cập nhật tự động hóa"
+      },
+      "title": {
+        "placeholder": "Đặt tên cho tự động hóa của bạn.",
+        "required_error": "Tiêu đề là bắt buộc"
+      },
+      "description": {
+        "placeholder": "Mô tả tự động hóa của bạn."
+      },
+      "submit_button": {
+        "create": "Tạo tự động hóa",
+        "update": "Cập nhật tự động hóa"
+      }
+    },
+    "delete_modal": {
+      "heading": "Xóa tự động hóa"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "Hiển thị lỗi",
+        "all": "Tất cả",
+        "only_activity": "Chỉ hoạt động",
+        "only_run_history": "Chỉ lịch sử chạy"
+      },
+      "run_history": {
+        "initiator": "Người khởi tạo"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Thành công!",
+          "message": "Tự động hóa đã được tạo thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Tạo tự động hóa thất bại."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Thành công!",
+          "message": "Tự động hóa đã được cập nhật thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Cập nhật tự động hóa thất bại."
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "Thành công!",
+          "message": "Tự động hóa đã được kích hoạt thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Kích hoạt tự động hóa thất bại."
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "Thành công!",
+          "message": "Tự động hóa đã được vô hiệu hóa thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Vô hiệu hóa tự động hóa thất bại."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Đã xóa tự động hóa",
+          "message": "{name}, tự động hóa, hiện đã bị xóa khỏi dự án của bạn."
+        },
+        "error": {
+          "title": "Chúng tôi không thể xóa tự động hóa đó lần này.",
+          "message": "Hãy thử xóa lại hoặc quay lại sau. Nếu vẫn không thể xóa, hãy liên hệ với chúng tôi."
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "Lỗi!",
+            "message": "Không thể tạo hành động. Vui lòng thử lại!"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "Lỗi!",
+            "message": "Không thể cập nhật hành động. Vui lòng thử lại!"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "Chưa có tự động hóa nào để hiển thị.",
+        "description": "Tự động hóa giúp bạn loại bỏ các tác vụ lặp lại bằng cách thiết lập kích hoạt, điều kiện và hành động. Tạo một cái để tiết kiệm thời gian và giữ cho công việc diễn ra một cách dễ dàng."
+      },
+      "upgrade": {
+        "title": "Tự động hóa",
+        "description": "Tự động hóa là cách để tự động hóa các tác vụ trong dự án của bạn.",
+        "sub_description": "Lấy lại 80% thời gian quản trị của bạn khi sử dụng Tự động hóa."
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "Chọn các dự án để chạy tự động hóa này",
+        "all_projects": {
+          "label": "Tất cả dự án",
+          "description": "Tự động hóa sẽ chạy cho tất cả dự án trong không gian làm việc."
+        },
+        "select_projects": {
+          "label": "Chọn dự án",
+          "description": "Tự động hóa sẽ chạy cho các dự án đã chọn trong không gian làm việc.",
+          "placeholder": "Chọn dự án"
+        }
+      },
+      "settings": {
+        "sidebar_label": "Tự động hóa",
+        "title": "Tự động hóa",
+        "description": "Chuẩn hóa quy trình trong toàn bộ không gian làm việc với tự động hóa toàn cục."
+      },
+      "table": {
+        "scope": {
+          "global": "Toàn cục",
+          "project": {
+            "label": "Dự án",
+            "multiple": "Nhiều",
+            "all": "Tất cả"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/common.json b/packages/i18n/src/locales/vi-VN/common.json
new file mode 100644
index 0000000..f9aae43
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "Chúng tôi đang xử lý vấn đề này. Nếu bạn cần hỗ trợ ngay lập tức,",
+    "reach_out_to_us": "hãy liên hệ với chúng tôi",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "Nếu không, hãy thử làm mới trang thỉnh thoảng hoặc truy cập",
+    "status_page": "trang trạng thái của chúng tôi"
+  },
+  "submit": "Gửi",
+  "cancel": "Hủy",
+  "loading": "Đang tải",
+  "error": "Lỗi",
+  "success": "Thành công",
+  "warning": "Cảnh báo",
+  "info": "Thông tin",
+  "close": "Đóng",
+  "yes": "Có",
+  "no": "Không",
+  "ok": "OK",
+  "name": "Tên",
+  "unknown_user": "Người dùng không xác định",
+  "description": "Mô tả",
+  "search": "Tìm kiếm",
+  "add_member": "Thêm thành viên",
+  "adding_members": "Đang thêm thành viên",
+  "remove_member": "Xóa thành viên",
+  "add_members": "Thêm thành viên",
+  "adding_member": "Đang thêm thành viên",
+  "remove_members": "Xóa thành viên",
+  "add": "Thêm",
+  "adding": "Đang thêm",
+  "remove": "Xóa",
+  "add_new": "Thêm mới",
+  "remove_selected": "Xóa đã chọn",
+  "first_name": "Tên",
+  "last_name": "Họ",
+  "email": "Email",
+  "display_name": "Tên hiển thị",
+  "role": "Vai trò",
+  "timezone": "Múi giờ",
+  "avatar": "Ảnh đại diện",
+  "cover_image": "Ảnh bìa",
+  "password": "Mật khẩu",
+  "change_cover": "Thay đổi ảnh bìa",
+  "language": "Ngôn ngữ",
+  "saving": "Đang lưu",
+  "save_changes": "Lưu thay đổi",
+  "deactivate_account": "Vô hiệu hóa tài khoản",
+  "deactivate_account_description": "Khi tài khoản bị vô hiệu hóa, tất cả dữ liệu và tài nguyên trong tài khoản đó sẽ bị xóa vĩnh viễn và không thể khôi phục.",
+  "profile_settings": "Cài đặt hồ sơ",
+  "your_account": "Tài khoản của bạn",
+  "security": "Bảo mật",
+  "activity": "Hoạt động",
+  "activity_empty_state": {
+    "no_activity": "Chưa có hoạt động",
+    "no_transitions": "Chưa có chuyển đổi",
+    "no_comments": "Chưa có bình luận",
+    "no_worklogs": "Chưa có nhật ký công việc",
+    "no_history": "Chưa có lịch sử"
+  },
+  "preferences": "Tùy chọn",
+  "language_and_time": "Ngôn ngữ và thời gian",
+  "notifications": "Thông báo",
+  "workspaces": "Không gian làm việc",
+  "create_workspace": "Tạo không gian làm việc",
+  "invitations": "Lời mời",
+  "summary": "Tóm tắt",
+  "assigned": "Đã phân công",
+  "created": "Đã tạo",
+  "subscribed": "Đã đăng ký",
+  "you_do_not_have_the_permission_to_access_this_page": "Bạn không có quyền truy cập trang này.",
+  "something_went_wrong_please_try_again": "Đã xảy ra lỗi. Vui lòng thử lại.",
+  "load_more": "Tải thêm",
+  "select_or_customize_your_interface_color_scheme": "Chọn hoặc tùy chỉnh giao diện màu của bạn.",
+  "timezone_setting": "Cài đặt múi giờ hiện tại.",
+  "language_setting": "Chọn ngôn ngữ được sử dụng trong giao diện người dùng.",
+  "settings_moved_to_preferences": "Cài đặt Múi giờ và Ngôn ngữ đã được chuyển sang tùy chọn.",
+  "go_to_preferences": "Đi đến tùy chọn",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "Chọn kiểu chuyển động con trỏ phù hợp với bạn.",
+  "theme": "Chủ đề",
+  "smooth_cursor": "Con trỏ mượt",
+  "system_preference": "Tùy chọn hệ thống",
+  "light": "Sáng",
+  "dark": "Tối",
+  "light_contrast": "Sáng tương phản cao",
+  "dark_contrast": "Tối tương phản cao",
+  "custom": "Tùy chỉnh",
+  "select_your_theme": "Chọn chủ đề của bạn",
+  "customize_your_theme": "Tùy chỉnh chủ đề của bạn",
+  "background_color": "Màu nền",
+  "text_color": "Màu chữ",
+  "primary_color": "Màu chính (chủ đề)",
+  "sidebar_background_color": "Màu nền thanh bên",
+  "sidebar_text_color": "Màu chữ thanh bên",
+  "set_theme": "Đặt chủ đề",
+  "enter_a_valid_hex_code_of_6_characters": "Nhập mã hex hợp lệ gồm 6 ký tự",
+  "background_color_is_required": "Màu nền là bắt buộc",
+  "text_color_is_required": "Màu chữ là bắt buộc",
+  "primary_color_is_required": "Màu chính là bắt buộc",
+  "sidebar_background_color_is_required": "Màu nền thanh bên là bắt buộc",
+  "sidebar_text_color_is_required": "Màu chữ thanh bên là bắt buộc",
+  "updating_theme": "Đang cập nhật chủ đề",
+  "theme_updated_successfully": "Chủ đề đã được cập nhật thành công",
+  "failed_to_update_the_theme": "Không thể cập nhật chủ đề",
+  "email_notifications": "Thông báo qua email",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "Cập nhật những mục công việc bạn đã đăng ký. Bật tính năng này để nhận thông báo.",
+  "email_notification_setting_updated_successfully": "Cài đặt thông báo email đã được cập nhật thành công",
+  "failed_to_update_email_notification_setting": "Không thể cập nhật cài đặt thông báo email",
+  "notify_me_when": "Thông báo cho tôi khi",
+  "property_changes": "Thay đổi thuộc tính",
+  "property_changes_description": "Thông báo cho tôi khi thuộc tính của mục công việc (như người phụ trách, mức độ ưu tiên, ước tính, v.v.) thay đổi.",
+  "state_change": "Thay đổi trạng thái",
+  "state_change_description": "Thông báo cho tôi khi mục công việc được chuyển sang trạng thái khác",
+  "issue_completed": "Mục công việc hoàn thành",
+  "issue_completed_description": "Chỉ thông báo cho tôi khi mục công việc hoàn thành",
+  "comments": "Bình luận",
+  "comments_description": "Thông báo cho tôi khi ai đó bình luận về mục công việc",
+  "mentions": "Đề cập",
+  "mentions_description": "Chỉ thông báo cho tôi khi ai đó đề cập đến tôi trong bình luận hoặc mô tả",
+  "old_password": "Mật khẩu cũ",
+  "general_settings": "Cài đặt chung",
+  "sign_out": "Đăng xuất",
+  "signing_out": "Đang đăng xuất",
+  "active_cycles": "Chu kỳ hoạt động",
+  "active_cycles_description": "Theo dõi chu kỳ trên các dự án, theo dõi mục công việc ưu tiên cao và chú ý đến các chu kỳ cần quan tâm.",
+  "on_demand_snapshots_of_all_your_cycles": "Ảnh chụp nhanh theo yêu cầu của tất cả chu kỳ của bạn",
+  "upgrade": "Nâng cấp",
+  "10000_feet_view": "Góc nhìn tổng quan về tất cả chu kỳ hoạt động.",
+  "10000_feet_view_description": "Phóng to tầm nhìn để xem tất cả chu kỳ đang diễn ra trong tất cả dự án cùng một lúc, thay vì xem từng chu kỳ trong mỗi dự án.",
+  "get_snapshot_of_each_active_cycle": "Nhận ảnh chụp nhanh của mỗi chu kỳ hoạt động.",
+  "get_snapshot_of_each_active_cycle_description": "Theo dõi số liệu tổng hợp cho tất cả chu kỳ hoạt động, xem trạng thái tiến độ và hiểu phạm vi liên quan đến thời hạn.",
+  "compare_burndowns": "So sánh biểu đồ burndown.",
+  "compare_burndowns_description": "Giám sát hiệu suất của từng nhóm bằng cách xem báo cáo burndown cho mỗi chu kỳ.",
+  "quickly_see_make_or_break_issues": "Nhanh chóng xem các vấn đề quan trọng.",
+  "quickly_see_make_or_break_issues_description": "Xem trước các mục công việc ưu tiên cao liên quan đến thời hạn trong mỗi chu kỳ. Xem tất cả mục công việc trong mỗi chu kỳ chỉ bằng một cú nhấp chuột.",
+  "zoom_into_cycles_that_need_attention": "Phóng to vào chu kỳ cần chú ý.",
+  "zoom_into_cycles_that_need_attention_description": "Điều tra bất kỳ trạng thái chu kỳ nào không đáp ứng mong đợi chỉ bằng một cú nhấp chuột.",
+  "stay_ahead_of_blockers": "Đi trước các yếu tố chặn.",
+  "stay_ahead_of_blockers_description": "Phát hiện thách thức từ dự án này sang dự án khác và xem các phụ thuộc giữa các chu kỳ không dễ thấy từ các chế độ xem khác.",
+  "analytics": "Phân tích",
+  "workspace_invites": "Lời mời không gian làm việc",
+  "enter_god_mode": "Vào chế độ quản trị viên",
+  "workspace_logo": "Logo không gian làm việc",
+  "new_issue": "Mục công việc mới",
+  "your_work": "Công việc của tôi",
+  "drafts": "Bản nháp",
+  "projects": "Dự án",
+  "views": "Chế độ xem",
+  "archives": "Lưu trữ",
+  "settings": "Cài đặt",
+  "failed_to_move_favorite": "Không thể di chuyển mục yêu thích",
+  "favorites": "Yêu thích",
+  "no_favorites_yet": "Chưa có mục yêu thích",
+  "create_folder": "Tạo thư mục",
+  "new_folder": "Thư mục mới",
+  "favorite_updated_successfully": "Đã cập nhật mục yêu thích thành công",
+  "favorite_created_successfully": "Đã tạo mục yêu thích thành công",
+  "folder_already_exists": "Thư mục đã tồn tại",
+  "folder_name_cannot_be_empty": "Tên thư mục không thể trống",
+  "something_went_wrong": "Đã xảy ra lỗi",
+  "failed_to_reorder_favorite": "Không thể sắp xếp lại mục yêu thích",
+  "favorite_removed_successfully": "Đã xóa mục yêu thích thành công",
+  "failed_to_create_favorite": "Không thể tạo mục yêu thích",
+  "failed_to_rename_favorite": "Không thể đổi tên mục yêu thích",
+  "project_link_copied_to_clipboard": "Đã sao chép liên kết dự án vào bảng tạm",
+  "link_copied": "Đã sao chép liên kết",
+  "add_project": "Thêm dự án",
+  "create_project": "Tạo dự án",
+  "failed_to_remove_project_from_favorites": "Không thể xóa dự án khỏi mục yêu thích. Vui lòng thử lại.",
+  "project_created_successfully": "Dự án đã được tạo thành công",
+  "project_created_successfully_description": "Dự án đã được tạo thành công. Bây giờ bạn có thể bắt đầu thêm mục công việc.",
+  "project_name_already_taken": "Tên dự án đã được sử dụng.",
+  "project_name_cannot_contain_special_characters": "Tên dự án không được chứa ký tự đặc biệt.",
+  "project_identifier_already_taken": "ID dự án đã được sử dụng.",
+  "project_cover_image_alt": "Ảnh bìa dự án",
+  "name_is_required": "Tên là bắt buộc",
+  "title_should_be_less_than_255_characters": "Tiêu đề phải ít hơn 255 ký tự",
+  "project_name": "Tên dự án",
+  "project_id_must_be_at_least_1_character": "ID dự án phải có ít nhất 1 ký tự",
+  "project_id_must_be_at_most_5_characters": "ID dự án chỉ được tối đa 5 ký tự",
+  "project_id": "ID dự án",
+  "project_id_tooltip_content": "Giúp xác định duy nhất mục công việc trong dự án của bạn. Tối đa 50 ký tự.",
+  "description_placeholder": "Mô tả",
+  "only_alphanumeric_non_latin_characters_allowed": "Chỉ cho phép các ký tự chữ số và không phải Latin.",
+  "project_id_is_required": "ID dự án là bắt buộc",
+  "project_id_allowed_char": "Chỉ cho phép các ký tự chữ số và không phải Latin.",
+  "project_id_min_char": "ID dự án phải có ít nhất 1 ký tự",
+  "project_id_max_char": "ID dự án chỉ được tối đa {max} ký tự",
+  "project_description_placeholder": "Nhập mô tả dự án",
+  "select_network": "Chọn mạng",
+  "lead": "Người phụ trách",
+  "date_range": "Khoảng thời gian",
+  "private": "Riêng tư",
+  "public": "Công khai",
+  "accessible_only_by_invite": "Chỉ truy cập được bằng lời mời",
+  "anyone_in_the_workspace_except_guests_can_join": "Bất kỳ ai trong không gian làm việc ngoại trừ khách đều có thể tham gia",
+  "creating": "Đang tạo",
+  "creating_project": "Đang tạo dự án",
+  "adding_project_to_favorites": "Đang thêm dự án vào mục yêu thích",
+  "project_added_to_favorites": "Đã thêm dự án vào mục yêu thích",
+  "couldnt_add_the_project_to_favorites": "Không thể thêm dự án vào mục yêu thích. Vui lòng thử lại.",
+  "removing_project_from_favorites": "Đang xóa dự án khỏi mục yêu thích",
+  "project_removed_from_favorites": "Đã xóa dự án khỏi mục yêu thích",
+  "couldnt_remove_the_project_from_favorites": "Không thể xóa dự án khỏi mục yêu thích. Vui lòng thử lại.",
+  "add_to_favorites": "Thêm vào mục yêu thích",
+  "remove_from_favorites": "Xóa khỏi mục yêu thích",
+  "publish_project": "Xuất bản dự án",
+  "publish": "Xuất bản",
+  "copy_link": "Sao chép liên kết",
+  "leave_project": "Rời dự án",
+  "join_the_project_to_rearrange": "Tham gia dự án để sắp xếp lại",
+  "drag_to_rearrange": "Kéo để sắp xếp lại",
+  "congrats": "Chúc mừng!",
+  "open_project": "Mở dự án",
+  "issues": "Mục công việc",
+  "cycles": "Chu kỳ",
+  "modules": "Mô-đun",
+  "pages": "Trang",
+  "intake": "Thu thập",
+  "renew": "Gia hạn",
+  "preview": "Xem trước",
+  "time_tracking": "Theo dõi thời gian",
+  "work_management": "Quản lý công việc",
+  "projects_and_issues": "Dự án và mục công việc",
+  "projects_and_issues_description": "Bật hoặc tắt các tính năng này trong dự án này. Có thể thay đổi theo thời gian phù hợp với nhu cầu.",
+  "cycles_description": "Thiết lập thời gian làm việc theo dự án và điều chỉnh thời gian nếu cần. Một chu kỳ có thể là 2 tuần, chu kỳ tiếp theo là 1 tuần.",
+  "modules_description": "Tổ chức công việc thành các dự án con với người lãnh đạo và người được phân công riêng.",
+  "views_description": "Lưu các tùy chọn sắp xếp, lọc và hiển thị tùy chỉnh hoặc chia sẻ chúng với nhóm của bạn.",
+  "pages_description": "Tạo và chỉnh sửa nội dung tự do: ghi chú, tài liệu, bất cứ thứ gì.",
+  "intake_description": "Cho phép người không phải thành viên chia sẻ lỗi, phản hồi và đề xuất mà không làm gián đoạn quy trình làm việc của bạn.",
+  "time_tracking_description": "Ghi lại thời gian dành cho các mục công việc và dự án.",
+  "work_management_description": "Quản lý công việc và dự án của bạn một cách dễ dàng.",
+  "documentation": "Tài liệu",
+  "message_support": "Liên hệ hỗ trợ",
+  "contact_sales": "Liên hệ bộ phận bán hàng",
+  "hyper_mode": "Chế độ siêu tốc",
+  "keyboard_shortcuts": "Phím tắt",
+  "whats_new": "Có gì mới",
+  "version": "Phiên bản",
+  "we_are_having_trouble_fetching_the_updates": "Chúng tôi đang gặp sự cố khi lấy bản cập nhật.",
+  "our_changelogs": "Nhật ký thay đổi của chúng tôi",
+  "for_the_latest_updates": "Để cập nhật mới nhất.",
+  "please_visit": "Vui lòng truy cập",
+  "docs": "Tài liệu",
+  "full_changelog": "Nhật ký thay đổi đầy đủ",
+  "support": "Hỗ trợ",
+  "forum": "Forum",
+  "powered_by_plane_pages": "Được hỗ trợ bởi Plane Pages",
+  "please_select_at_least_one_invitation": "Vui lòng chọn ít nhất một lời mời.",
+  "please_select_at_least_one_invitation_description": "Vui lòng chọn ít nhất một lời mời để tham gia không gian làm việc.",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "Chúng tôi thấy có người đã mời bạn tham gia không gian làm việc",
+  "join_a_workspace": "Tham gia không gian làm việc",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "Chúng tôi thấy có người đã mời bạn tham gia không gian làm việc",
+  "join_a_workspace_description": "Tham gia không gian làm việc",
+  "accept_and_join": "Chấp nhận và tham gia",
+  "go_home": "Về trang chủ",
+  "no_pending_invites": "Không có lời mời đang chờ xử lý",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "Bạn có thể xem ở đây nếu ai đó mời bạn vào không gian làm việc",
+  "back_to_home": "Quay lại trang chủ",
+  "workspace_name": "Tên không gian làm việc",
+  "deactivate_your_account": "Vô hiệu hóa tài khoản của bạn",
+  "deactivate_your_account_description": "Khi đã vô hiệu hóa, bạn sẽ không được phân công công việc và sẽ không được tính vào hóa đơn của không gian làm việc. Để kích hoạt lại tài khoản, bạn cần nhận được lời mời không gian làm việc gửi đến địa chỉ email này.",
+  "deactivating": "Đang vô hiệu hóa",
+  "confirm": "Xác nhận",
+  "confirming": "Đang xác nhận",
+  "draft_created": "Đã tạo bản nháp",
+  "issue_created_successfully": "Đã tạo mục công việc thành công",
+  "draft_creation_failed": "Tạo bản nháp thất bại",
+  "issue_creation_failed": "Tạo mục công việc thất bại",
+  "draft_issue": "Mục công việc nháp",
+  "issue_updated_successfully": "Đã cập nhật mục công việc thành công",
+  "issue_could_not_be_updated": "Không thể cập nhật mục công việc",
+  "create_a_draft": "Tạo bản nháp",
+  "save_to_drafts": "Lưu vào bản nháp",
+  "save": "Lưu",
+  "update": "Cập nhật",
+  "updating": "Đang cập nhật",
+  "create_new_issue": "Tạo mục công việc mới",
+  "editor_is_not_ready_to_discard_changes": "Trình soạn thảo chưa sẵn sàng để hủy bỏ thay đổi",
+  "failed_to_move_issue_to_project": "Không thể di chuyển mục công việc đến dự án",
+  "create_more": "Tạo thêm",
+  "add_to_project": "Thêm vào dự án",
+  "discard": "Hủy bỏ",
+  "duplicate_issue_found": "Đã tìm thấy mục công việc trùng lặp",
+  "duplicate_issues_found": "Đã tìm thấy các mục công việc trùng lặp",
+  "no_matching_results": "Không có kết quả phù hợp",
+  "title_is_required": "Tiêu đề là bắt buộc",
+  "title": "Tiêu đề",
+  "state": "Trạng thái",
+  "transition": "Chuyển đổi",
+  "history": "Lịch sử",
+  "priority": "Ưu tiên",
+  "none": "Không có",
+  "urgent": "Khẩn cấp",
+  "high": "Cao",
+  "medium": "Trung bình",
+  "low": "Thấp",
+  "members": "Thành viên",
+  "assignee": "Người phụ trách",
+  "assignees": "Người phụ trách",
+  "subscriber": "{count, plural, one{# Người theo dõi} other{# Người theo dõi}}",
+  "you": "Bạn",
+  "labels": "Nhãn",
+  "create_new_label": "Tạo nhãn mới",
+  "label_name": "Tên nhãn",
+  "failed_to_create_label": "Không thể tạo nhãn. Vui lòng thử lại.",
+  "start_date": "Ngày bắt đầu",
+  "end_date": "Ngày kết thúc",
+  "due_date": "Ngày hết hạn",
+  "target_date": "Ngày đích",
+  "estimate": "Ước tính",
+  "change_parent_issue": "Thay đổi mục công việc cha",
+  "remove_parent_issue": "Xóa mục công việc cha",
+  "add_parent": "Thêm mục cha",
+  "loading_members": "Đang tải thành viên",
+  "view_link_copied_to_clipboard": "Đã sao chép liên kết xem vào bảng tạm",
+  "required": "Bắt buộc",
+  "optional": "Tùy chọn",
+  "Cancel": "Hủy",
+  "edit": "Chỉnh sửa",
+  "archive": "Lưu trữ",
+  "restore": "Khôi phục",
+  "open_in_new_tab": "Mở trong tab mới",
+  "delete": "Xóa",
+  "deleting": "Đang xóa",
+  "make_a_copy": "Tạo bản sao",
+  "move_to_project": "Di chuyển đến dự án",
+  "good": "Chào buổi sáng",
+  "morning": "Buổi sáng",
+  "afternoon": "Buổi chiều",
+  "evening": "Buổi tối",
+  "show_all": "Hiển thị tất cả",
+  "show_less": "Hiển thị ít hơn",
+  "no_data_yet": "Chưa có dữ liệu",
+  "syncing": "Đang đồng bộ",
+  "add_work_item": "Thêm mục công việc",
+  "advanced_description_placeholder": "Nhấn '/' để sử dụng lệnh",
+  "create_work_item": "Tạo mục công việc",
+  "attachments": "Tệp đính kèm",
+  "declining": "Đang từ chối",
+  "declined": "Đã từ chối",
+  "decline": "Từ chối",
+  "unassigned": "Chưa phân công",
+  "work_items": "Mục công việc",
+  "add_link": "Thêm liên kết",
+  "points": "Điểm",
+  "no_assignee": "Không có người phụ trách",
+  "no_assignees_yet": "Chưa có người phụ trách",
+  "no_labels_yet": "Chưa có nhãn",
+  "ideal": "Lý tưởng",
+  "current": "Hiện tại",
+  "no_matching_members": "Không có thành viên phù hợp",
+  "leaving": "Đang rời",
+  "removing": "Đang xóa",
+  "leave": "Rời",
+  "refresh": "Làm mới",
+  "refreshing": "Đang làm mới",
+  "refresh_status": "Làm mới trạng thái",
+  "prev": "Trước",
+  "next": "Tiếp",
+  "re_generating": "Đang tạo lại",
+  "re_generate": "Tạo lại",
+  "re_generate_key": "Tạo lại khóa",
+  "export": "Xuất",
+  "member": "{count, plural, other{# thành viên}}",
+  "new_password_must_be_different_from_old_password": "Mật khẩu mới phải khác mật khẩu cũ",
+  "edited": "đã chỉnh sửa",
+  "bot": "bot",
+  "settings_description": "Quản lý tài khoản, không gian làm việc và các tùy chọn dự án của bạn tại một nơi. Chuyển đổi giữa các tab để dễ dàng cấu hình.",
+  "back_to_workspace": "Quay lại không gian làm việc",
+  "upgrade_request": "Yêu cầu Quản trị viên Không gian làm việc nâng cấp.",
+  "copied_to_clipboard": "Đã sao chép vào bảng tạm",
+  "copied_to_clipboard_description": "URL đã được sao chép thành công vào bảng tạm của bạn",
+  "toast": {
+    "success": "Thành công!",
+    "error": "Lỗi!"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "Đã tạo liên kết",
+        "message": "Liên kết đã được tạo thành công"
+      },
+      "not_created": {
+        "title": "Chưa tạo liên kết",
+        "message": "Không thể tạo liên kết"
+      },
+      "updated": {
+        "title": "Đã cập nhật liên kết",
+        "message": "Liên kết đã được cập nhật thành công"
+      },
+      "not_updated": {
+        "title": "Chưa cập nhật liên kết",
+        "message": "Không thể cập nhật liên kết"
+      },
+      "removed": {
+        "title": "Đã xóa liên kết",
+        "message": "Liên kết đã được xóa thành công"
+      },
+      "not_removed": {
+        "title": "Chưa xóa liên kết",
+        "message": "Không thể xóa liên kết"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL không hợp lệ",
+        "placeholder": "Nhập hoặc dán URL"
+      },
+      "title": {
+        "text": "Tiêu đề hiển thị",
+        "placeholder": "Bạn muốn hiển thị liên kết này như thế nào"
+      }
+    }
+  },
+  "common": {
+    "all": "Tất cả",
+    "no_items_in_this_group": "Không có mục nào trong nhóm này",
+    "drop_here_to_move": "Thả vào đây để di chuyển",
+    "states": "Trạng thái",
+    "state": "Trạng thái",
+    "state_groups": "Nhóm trạng thái",
+    "state_group": "Nhóm trạng thái",
+    "priorities": "Ưu tiên",
+    "priority": "Ưu tiên",
+    "team_project": "Dự án nhóm",
+    "project": "Dự án",
+    "cycle": "Chu kỳ",
+    "cycles": "Chu kỳ",
+    "module": "Mô-đun",
+    "modules": "Mô-đun",
+    "labels": "Nhãn",
+    "label": "Nhãn",
+    "admins": "Quản trị viên",
+    "users": "Người dùng",
+    "guests": "Khách",
+    "assignees": "Người phụ trách",
+    "assignee": "Người phụ trách",
+    "created_by": "Người tạo",
+    "none": "Không có",
+    "link": "Liên kết",
+    "estimates": "Ước tính",
+    "estimate": "Ước tính",
+    "created_at": "Được tạo vào",
+    "updated_at": "Thời gian cập nhật",
+    "completed_at": "Hoàn thành vào",
+    "layout": "Bố cục",
+    "filters": "Bộ lọc",
+    "display": "Hiển thị",
+    "load_more": "Tải thêm",
+    "activity": "Hoạt động",
+    "analytics": "Phân tích",
+    "dates": "Ngày tháng",
+    "success": "Thành công!",
+    "something_went_wrong": "Đã xảy ra lỗi",
+    "error": {
+      "label": "Lỗi!",
+      "message": "Đã xảy ra lỗi. Vui lòng thử lại."
+    },
+    "group_by": "Nhóm theo",
+    "epic": "Sử thi",
+    "epics": "Epics",
+    "work_item": "Mục công việc",
+    "work_items": "Mục công việc",
+    "sub_work_item": "Mục công việc con",
+    "views": "Chế độ xem",
+    "pages": "Trang",
+    "add": "Thêm",
+    "warning": "Cảnh báo",
+    "updating": "Đang cập nhật",
+    "adding": "Đang thêm",
+    "update": "Cập nhật",
+    "creating": "Đang tạo",
+    "create": "Tạo",
+    "cancel": "Hủy",
+    "description": "Mô tả",
+    "title": "Tiêu đề",
+    "attachment": "Tệp đính kèm",
+    "general": "Chung",
+    "features": "Tính năng",
+    "automation": "Tự động hóa",
+    "project_name": "Tên dự án",
+    "project_id": "ID dự án",
+    "project_timezone": "Múi giờ dự án",
+    "created_on": "Được tạo vào",
+    "updated_on": "Cập nhật vào",
+    "completed_on": "Completed on",
+    "update_project": "Cập nhật dự án",
+    "identifier_already_exists": "Định danh đã tồn tại",
+    "add_more": "Thêm nữa",
+    "defaults": "Mặc định",
+    "add_label": "Thêm nhãn",
+    "customize_time_range": "Tùy chỉnh khoảng thời gian",
+    "loading": "Đang tải",
+    "attachments": "Tệp đính kèm",
+    "property": "Thuộc tính",
+    "properties": "Thuộc tính",
+    "parent": "Mục cha",
+    "page": "Trang",
+    "remove": "Xóa",
+    "archiving": "Đang lưu trữ",
+    "archive": "Lưu trữ",
+    "access": {
+      "public": "Công khai",
+      "private": "Riêng tư"
+    },
+    "done": "Hoàn thành",
+    "sub_work_items": "Mục công việc con",
+    "comment": "Bình luận",
+    "workspace_level": "Cấp không gian làm việc",
+    "order_by": {
+      "label": "Sắp xếp theo",
+      "manual": "Thủ công - Xếp hạng",
+      "last_created": "Mới tạo nhất",
+      "last_updated": "Mới cập nhật nhất",
+      "start_date": "Ngày bắt đầu",
+      "due_date": "Ngày hết hạn",
+      "asc": "Tăng dần",
+      "desc": "Giảm dần",
+      "updated_on": "Cập nhật vào"
+    },
+    "sort": {
+      "asc": "Tăng dần",
+      "desc": "Giảm dần",
+      "created_on": "Thời gian tạo",
+      "updated_on": "Thời gian cập nhật"
+    },
+    "comments": "Bình luận",
+    "updates": "Cập nhật",
+    "additional_updates": "Cập nhật bổ sung",
+    "clear_all": "Xóa tất cả",
+    "copied": "Đã sao chép!",
+    "link_copied": "Đã sao chép liên kết!",
+    "link_copied_to_clipboard": "Đã sao chép liên kết vào bảng tạm",
+    "copied_to_clipboard": "Đã sao chép liên kết mục công việc vào bảng tạm",
+    "branch_name_copied_to_clipboard": "Tên nhánh đã được sao chép vào bảng tạm",
+    "is_copied_to_clipboard": "Mục công việc đã được sao chép vào bảng tạm",
+    "no_links_added_yet": "Chưa có liên kết nào được thêm",
+    "add_link": "Thêm liên kết",
+    "links": "Liên kết",
+    "go_to_workspace": "Đi đến không gian làm việc",
+    "progress": "Tiến độ",
+    "optional": "Tùy chọn",
+    "join": "Tham gia",
+    "go_back": "Quay lại",
+    "continue": "Tiếp tục",
+    "resend": "Gửi lại",
+    "relations": "Mối quan hệ",
+    "dependencies": "Phụ thuộc",
+    "errors": {
+      "default": {
+        "title": "Lỗi!",
+        "message": "Đã xảy ra lỗi. Vui lòng thử lại."
+      },
+      "required": "Trường này là bắt buộc",
+      "entity_required": "{entity} là bắt buộc",
+      "restricted_entity": "{entity} bị hạn chế"
+    },
+    "update_link": "Cập nhật liên kết",
+    "attach": "Đính kèm",
+    "create_new": "Tạo mới",
+    "add_existing": "Thêm mục hiện có",
+    "type_or_paste_a_url": "Nhập hoặc dán URL",
+    "url_is_invalid": "URL không hợp lệ",
+    "display_title": "Tiêu đề hiển thị",
+    "link_title_placeholder": "Bạn muốn hiển thị liên kết này như thế nào",
+    "url": "URL",
+    "side_peek": "Xem lướt bên cạnh",
+    "modal": "Cửa sổ",
+    "full_screen": "Toàn màn hình",
+    "close_peek_view": "Đóng chế độ xem lướt",
+    "toggle_peek_view_layout": "Chuyển đổi bố cục xem lướt",
+    "options": "Tùy chọn",
+    "duration": "Thời lượng",
+    "today": "Hôm nay",
+    "week": "Tuần",
+    "month": "Tháng",
+    "quarter": "Quý",
+    "press_for_commands": "Nhấn '/' để sử dụng lệnh",
+    "click_to_add_description": "Nhấp để thêm mô tả",
+    "on_track": "Đúng tiến độ",
+    "off_track": "Chệch hướng",
+    "at_risk": "Có nguy cơ",
+    "timeline": "Dòng thời gian",
+    "completion": "Hoàn thành",
+    "upcoming": "Sắp tới",
+    "completed": "Đã hoàn thành",
+    "in_progress": "Đang tiến hành",
+    "planned": "Đã lên kế hoạch",
+    "paused": "Tạm dừng",
+    "search": {
+      "label": "Tìm kiếm",
+      "placeholder": "Nhập nội dung tìm kiếm",
+      "no_matches_found": "Không tìm thấy kết quả phù hợp",
+      "no_matching_results": "Không có kết quả phù hợp",
+      "min_chars": "Nhập ít nhất {count} ký tự để tìm kiếm",
+      "error": "Lỗi khi tải kết quả tìm kiếm",
+      "no_results": {
+        "title": "Không có kết quả phù hợp",
+        "description": "Xóa tiêu chí tìm kiếm để xem tất cả kết quả"
+      }
+    },
+    "actions": {
+      "edit": "Chỉnh sửa",
+      "make_a_copy": "Tạo bản sao",
+      "open_in_new_tab": "Mở trong tab mới",
+      "copy_link": "Sao chép liên kết",
+      "copy_branch_name": "Sao chép tên nhánh",
+      "archive": "Lưu trữ",
+      "restore": "Khôi phục",
+      "delete": "Xóa",
+      "remove_relation": "Xóa mối quan hệ",
+      "subscribe": "Đăng ký",
+      "unsubscribe": "Hủy đăng ký",
+      "clear_sorting": "Xóa sắp xếp",
+      "show_weekends": "Hiển thị cuối tuần",
+      "enable": "Bật",
+      "disable": "Tắt",
+      "copy_markdown": "Sao chép markdown",
+      "reply": "Trả lời"
+    },
+    "name": "Tên",
+    "discard": "Hủy bỏ",
+    "confirm": "Xác nhận",
+    "confirming": "Đang xác nhận",
+    "read_the_docs": "Đọc tài liệu",
+    "default": "Mặc định",
+    "active": "Hoạt động",
+    "enabled": "Đã bật",
+    "disabled": "Đã tắt",
+    "mandate": "Ủy quyền",
+    "mandatory": "Bắt buộc",
+    "global": "Toàn cục",
+    "yes": "Có",
+    "no": "Không",
+    "please_wait": "Vui lòng đợi",
+    "enabling": "Đang bật",
+    "disabling": "Đang tắt",
+    "beta": "Phiên bản beta",
+    "or": "Hoặc",
+    "next": "Tiếp theo",
+    "back": "Quay lại",
+    "retry": "Thử lại",
+    "cancelling": "Đang hủy",
+    "configuring": "Đang cấu hình",
+    "clear": "Xóa",
+    "import": "Nhập",
+    "connect": "Kết nối",
+    "authorizing": "Đang xác thực",
+    "processing": "Đang xử lý",
+    "no_data_available": "Không có dữ liệu",
+    "from": "Từ {name}",
+    "authenticated": "Đã xác thực",
+    "select": "Chọn",
+    "upgrade": "Nâng cấp",
+    "add_seats": "Thêm vị trí",
+    "projects": "Dự án",
+    "workspace": "Không gian làm việc",
+    "workspaces": "Không gian làm việc",
+    "team": "Nhóm",
+    "teams": "Nhóm",
+    "entity": "Thực thể",
+    "entities": "Thực thể",
+    "task": "Nhiệm vụ",
+    "tasks": "Nhiệm vụ",
+    "section": "Phần",
+    "sections": "Phần",
+    "edit": "Chỉnh sửa",
+    "connecting": "Đang kết nối",
+    "connected": "Đã kết nối",
+    "disconnect": "Ngắt kết nối",
+    "disconnecting": "Đang ngắt kết nối",
+    "installing": "Đang cài đặt",
+    "install": "Cài đặt",
+    "reset": "Đặt lại",
+    "live": "Trực tiếp",
+    "change_history": "Lịch sử thay đổi",
+    "coming_soon": "Sắp ra mắt",
+    "member": "Thành viên",
+    "members": "Thành viên",
+    "you": "Bạn",
+    "upgrade_cta": {
+      "higher_subscription": "Nâng cấp lên gói cao hơn",
+      "talk_to_sales": "Liên hệ bộ phận bán hàng"
+    },
+    "category": "Danh mục",
+    "categories": "Danh mục",
+    "saving": "Đang lưu",
+    "save_changes": "Lưu thay đổi",
+    "delete": "Xóa",
+    "deleting": "Đang xóa",
+    "pending": "Đang chờ xử lý",
+    "invite": "Mời",
+    "view": "Xem",
+    "deactivated_user": "Người dùng bị vô hiệu hóa",
+    "apply": "Áp dụng",
+    "applying": "Đang áp dụng",
+    "overview": "Tổng quan",
+    "no_of": "Số lượng {entity}",
+    "resolved": "Đã giải quyết",
+    "get_started": "Bắt đầu",
+    "worklogs": "Nhật ký công việc",
+    "project_updates": "Cập nhật dự án",
+    "workflows": "Quy trình làm việc",
+    "templates": "Mẫu",
+    "business": "Doanh nghiệp",
+    "members_and_teamspaces": "Thành viên và không gian nhóm",
+    "recurring_work_items": "Mục công việc định kỳ",
+    "milestones": "Cột mốc",
+    "open_in_full_screen": "Mở {page} trong chế độ toàn màn hình",
+    "details": "Chi tiết",
+    "project_structure": "Cấu trúc dự án",
+    "custom_properties": "Thuộc tính tùy chỉnh",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "Trục X",
+    "y_axis": "Trục Y",
+    "metric": "Chỉ số"
+  },
+  "form": {
+    "title": {
+      "required": "Tiêu đề là bắt buộc",
+      "max_length": "Tiêu đề phải ít hơn {length} ký tự"
+    }
+  },
+  "entity": {
+    "grouping_title": "Nhóm {entity}",
+    "priority": "Ưu tiên {entity}",
+    "all": "Tất cả {entity}",
+    "drop_here_to_move": "Kéo thả vào đây để di chuyển {entity}",
+    "delete": {
+      "label": "Xóa {entity}",
+      "success": "Đã xóa {entity} thành công",
+      "failed": "Xóa {entity} thất bại"
+    },
+    "update": {
+      "failed": "Cập nhật {entity} thất bại",
+      "success": "Đã cập nhật {entity} thành công"
+    },
+    "link_copied_to_clipboard": "Đã sao chép liên kết {entity} vào bảng tạm",
+    "fetch": {
+      "failed": "Đã xảy ra lỗi khi tải {entity}"
+    },
+    "add": {
+      "success": "Đã thêm {entity} thành công",
+      "failed": "Đã xảy ra lỗi khi thêm {entity}"
+    },
+    "remove": {
+      "success": "Đã xóa {entity} thành công",
+      "failed": "Đã xảy ra lỗi khi xóa {entity}"
+    }
+  },
+  "attachment": {
+    "error": "Không thể đính kèm tệp. Vui lòng tải lên lại.",
+    "only_one_file_allowed": "Chỉ có thể tải lên một tệp mỗi lần.",
+    "file_size_limit": "Kích thước tệp phải nhỏ hơn hoặc bằng {size}MB.",
+    "drag_and_drop": "Kéo và thả vào bất kỳ đâu để tải lên",
+    "delete": "Xóa tệp đính kèm"
+  },
+  "label": {
+    "select": "Chọn nhãn",
+    "create": {
+      "success": "Đã tạo nhãn thành công",
+      "failed": "Tạo nhãn thất bại",
+      "already_exists": "Nhãn đã tồn tại",
+      "type": "Nhập để thêm nhãn mới"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {chế độ xem} other {chế độ xem}}",
+    "create": {
+      "label": "Tạo chế độ xem"
+    },
+    "update": {
+      "label": "Cập nhật chế độ xem"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "Khách",
+      "description": "Thành viên bên ngoài của tổ chức có thể được mời với tư cách khách."
+    },
+    "member": {
+      "title": "Thành viên",
+      "description": "Có thể đọc, viết, chỉnh sửa và xóa thực thể trong dự án, chu kỳ và mô-đun"
+    },
+    "admin": {
+      "title": "Quản trị viên",
+      "description": "Tất cả quyền trong không gian làm việc đều được đặt là cho phép."
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "Quản lý sản phẩm/dự án",
+    "development_or_engineering": "Phát triển/Kỹ thuật",
+    "founder_or_executive": "Nhà sáng lập/Giám đốc điều hành",
+    "freelancer_or_consultant": "Freelancer/Tư vấn viên",
+    "marketing_or_growth": "Marketing/Tăng trưởng",
+    "sales_or_business_development": "Bán hàng/Phát triển kinh doanh",
+    "support_or_operations": "Hỗ trợ/Vận hành",
+    "student_or_professor": "Sinh viên/Giáo sư",
+    "human_resources": "Nhân sự",
+    "other": "Khác"
+  },
+  "default_global_view": {
+    "all_issues": "Tất cả mục công việc",
+    "assigned": "Đã giao",
+    "created": "Đã tạo",
+    "subscribed": "Đã đăng ký"
+  },
+  "description_versions": {
+    "last_edited_by": "Chỉnh sửa lần cuối bởi",
+    "previously_edited_by": "Trước đây được chỉnh sửa bởi",
+    "edited_by": "Được chỉnh sửa bởi"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane không khởi động được. Điều này có thể do một hoặc nhiều dịch vụ Plane không khởi động được.",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Chọn View Logs từ setup.sh và log Docker để chắc chắn."
+  },
+  "customize_navigation": "Tùy chỉnh điều hướng",
+  "personal": "Cá nhân",
+  "accordion_navigation_control": "Điều hướng thanh bên kiểu accordion",
+  "horizontal_navigation_bar": "Điều hướng dạng tab",
+  "show_limited_projects_on_sidebar": "Hiển thị số dự án giới hạn trên thanh bên",
+  "enter_number_of_projects": "Nhập số lượng dự án",
+  "pin": "Ghim",
+  "unpin": "Bỏ ghim",
+  "workspace_dashboards": "Bảng điều khiển",
+  "pi_chat": "Plane AI",
+  "in_app": "Trong ứng dụng",
+  "forms": "Biểu mẫu",
+  "milestones": "Cột mốc",
+  "milestones_description": "Cột mốc cung cấp một lớp để căn chỉnh các mục công việc hướng đến ngày hoàn thành chung.",
+  "file_upload": {
+    "upload_text": "Nhấp vào đây để tải lên tệp",
+    "drag_drop_text": "Kéo và thả",
+    "processing": "Đang xử lý",
+    "invalid_file_type": "Loại tệp không hợp lệ",
+    "missing_fields": "Thiếu trường",
+    "success": "{fileName} đã được tải lên!"
+  },
+  "date": "Ngày",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "Xuất mục công việc thành tệp CSV.",
+      "short_description": "Xuất sang CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "Xuất mục công việc thành tệp Excel.",
+      "short_description": "Xuất sang Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "Xuất mục công việc thành tệp Excel.",
+      "short_description": "Xuất sang Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "Xuất mục công việc thành tệp JSON.",
+      "short_description": "Xuất sang JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/cycle.json b/packages/i18n/src/locales/vi-VN/cycle.json
new file mode 100644
index 0000000..9777316
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "Thêm mục công việc vào chu kỳ để xem tiến độ của nó"
+      },
+      "chart": {
+        "title": "Thêm mục công việc vào chu kỳ để xem biểu đồ burndown."
+      },
+      "priority_issue": {
+        "title": "Xem nhanh các mục công việc ưu tiên cao đang được xử lý trong chu kỳ."
+      },
+      "assignee": {
+        "title": "Thêm người phụ trách cho mục công việc để xem phân tích công việc theo người phụ trách."
+      },
+      "label": {
+        "title": "Thêm nhãn cho mục công việc để xem phân tích công việc theo nhãn."
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {chu kỳ} other {chu kỳ}}",
+    "no_cycle": "Không có chu kỳ"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "Thêm mục công việc vào chu kỳ để xem tiến độ\n của nó"
+      },
+      "priority": {
+        "title": "Quan sát các mục công việc ưu tiên cao được giải quyết trong\n chu kỳ chỉ với một cái nhìn."
+      },
+      "assignee": {
+        "title": "Thêm người được gán cho mục công việc để xem\n phân tích công việc theo người được gán."
+      },
+      "label": {
+        "title": "Thêm nhãn vào mục công việc để xem\n phân tích công việc theo nhãn."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/editor.json b/packages/i18n/src/locales/vi-VN/editor.json
new file mode 100644
index 0000000..24ff7ca
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "Kéo và thả để tải lên tệp bên ngoài"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "Tệp quá lớn.",
+        "description": "Kích thước tối đa mỗi tệp là {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "Loại tệp không được hỗ trợ.",
+        "description": "Xem các định dạng được hỗ trợ"
+      },
+      "default": {
+        "title": "Tải lên thất bại.",
+        "description": "Đã xảy ra lỗi. Vui lòng thử lại."
+      }
+    },
+    "upgrade": {
+      "description": "Nâng cấp gói của bạn để xem tệp đính kèm này."
+    },
+    "aria": {
+      "click_to_upload": "Nhấp để tải lên tệp đính kèm"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "Chuyển thành nội dung nhúng",
+      "convert_to_link": "Chuyển thành liên kết",
+      "convert_to_richcard": "Chuyển thành thẻ phong phú"
+    },
+    "placeholder": {
+      "insert_embed": "Chèn liên kết nhúng ưa thích của bạn vào đây, như video YouTube, thiết kế Figma, v.v.",
+      "link": "Nhập hoặc dán một liên kết"
+    },
+    "input_modal": {
+      "embed": "Nhúng",
+      "works_with_links": "Hoạt động với YouTube, Figma, Google Docs và nhiều hơn nữa"
+    },
+    "error": {
+      "not_valid_link": "Vui lòng nhập một URL hợp lệ."
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "Mô tả nội dung của khối này",
+      "generated_here": "Nội dung AI của bạn sẽ được tạo ở đây"
+    },
+    "block_types": {
+      "placeholder": "Chọn loại khối",
+      "summarize_page": "Tóm tắt trang",
+      "custom_prompt": "Gợi ý tùy chỉnh"
+    },
+    "actions": {
+      "discard": "Hủy bỏ",
+      "generate": "Tạo",
+      "generating": "Đang tạo",
+      "rewriting": "Đang viết lại",
+      "rewrite": "Viết lại",
+      "use_this": "Sử dụng cái này",
+      "refine": "Tinh chỉnh"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/empty-state.json b/packages/i18n/src/locales/vi-VN/empty-state.json
new file mode 100644
index 0000000..3e6a3be
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "Chưa có số liệu tiến độ để hiển thị.",
+      "description": "Bắt đầu đặt giá trị thuộc tính trong các mục công việc để xem số liệu tiến độ ở đây."
+    },
+    "updates": {
+      "title": "Chưa có cập nhật.",
+      "description": "Khi thành viên dự án thêm cập nhật, nó sẽ xuất hiện ở đây"
+    },
+    "search": {
+      "title": "Không có kết quả phù hợp.",
+      "description": "Không tìm thấy kết quả. Hãy thử điều chỉnh các từ khóa tìm kiếm."
+    },
+    "not_found": {
+      "title": "Rất tiếc! Có vẻ như có gì đó không ổn",
+      "description": "Chúng tôi không thể tải tài khoản Plane của bạn hiện tại. Đây có thể là lỗi mạng.",
+      "cta_primary": "Thử tải lại"
+    },
+    "server_error": {
+      "title": "Lỗi máy chủ",
+      "description": "Chúng tôi không thể kết nối và lấy dữ liệu từ máy chủ của chúng tôi. Đừng lo lắng, chúng tôi đang khắc phục.",
+      "cta_primary": "Thử tải lại"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "Có vẻ như bạn không có quyền truy cập vào Dự án này",
+      "restricted_description": "Liên hệ với quản trị viên để yêu cầu quyền truy cập và bạn có thể tiếp tục tại đây.",
+      "join_description": "Nhấn nút bên dưới để tham gia.",
+      "cta_primary": "Tham gia dự án",
+      "cta_loading": "Đang tham gia dự án"
+    },
+    "invalid_project": {
+      "title": "Không tìm thấy dự án",
+      "description": "Dự án bạn đang tìm kiếm không tồn tại."
+    },
+    "work_items": {
+      "title": "Bắt đầu với mục công việc đầu tiên của bạn.",
+      "description": "Các mục công việc là những khối xây dựng của dự án của bạn — chỉ định người sở hữu, đặt mức độ ưu tiên và theo dõi tiến độ dễ dàng.",
+      "cta_primary": "Tạo mục công việc đầu tiên của bạn"
+    },
+    "cycles": {
+      "title": "Nhóm và giới hạn thời gian công việc của bạn trong Chu kỳ.",
+      "description": "Chia nhỏ công việc thành các phần có giới hạn thời gian, làm ngược từ thời hạn dự án để đặt ngày và tạo tiến triển cụ thể như một đội.",
+      "cta_primary": "Đặt chu kỳ đầu tiên của bạn"
+    },
+    "cycle_work_items": {
+      "title": "Không có mục công việc để hiển thị trong chu kỳ này",
+      "description": "Tạo các mục công việc để bắt đầu giám sát tiến độ của đội bạn trong chu kỳ này và đạt được mục tiêu đúng hạn.",
+      "cta_primary": "Tạo mục công việc",
+      "cta_secondary": "Thêm mục công việc hiện có"
+    },
+    "modules": {
+      "title": "Ánh xạ mục tiêu dự án của bạn vào Mô-đun và theo dõi dễ dàng.",
+      "description": "Các mô-đun được tạo thành từ các mục công việc kết nối với nhau. Chúng hỗ trợ theo dõi tiến độ qua các giai đoạn dự án, mỗi giai đoạn có thời hạn và phân tích cụ thể để chỉ ra bạn gần đạt được các giai đoạn đó như thế nào.",
+      "cta_primary": "Đặt mô-đun đầu tiên của bạn"
+    },
+    "module_work_items": {
+      "title": "Không có mục công việc để hiển thị trong Mô-đun này",
+      "description": "Tạo các mục công việc để bắt đầu giám sát mô-đun này.",
+      "cta_primary": "Tạo mục công việc",
+      "cta_secondary": "Thêm mục công việc hiện có"
+    },
+    "views": {
+      "title": "Lưu chế độ xem tùy chỉnh cho dự án của bạn",
+      "description": "Chế độ xem là các bộ lọc đã lưu giúp bạn truy cập nhanh chóng thông tin bạn sử dụng nhiều nhất. Cộng tác dễ dàng khi các đồng đội chia sẻ và điều chỉnh chế độ xem theo nhu cầu cụ thể của họ.",
+      "cta_primary": "Tạo chế độ xem"
+    },
+    "no_work_items_in_project": {
+      "title": "Chưa có mục công việc trong dự án",
+      "description": "Thêm các mục công việc vào dự án của bạn và chia nhỏ công việc thành các phần có thể theo dõi với chế độ xem.",
+      "cta_primary": "Thêm mục công việc"
+    },
+    "work_item_filter": {
+      "title": "Không tìm thấy mục công việc",
+      "description": "Bộ lọc hiện tại của bạn không trả về kết quả nào. Hãy thử thay đổi bộ lọc.",
+      "cta_primary": "Thêm mục công việc"
+    },
+    "pages": {
+      "title": "Ghi chép mọi thứ — từ ghi chú đến PRD",
+      "description": "Các trang cho phép bạn ghi lại và tổ chức thông tin ở một nơi. Viết ghi chú cuộc họp, tài liệu dự án và PRD, nhúng các mục công việc và cấu trúc chúng với các thành phần sẵn sàng sử dụng.",
+      "cta_primary": "Tạo Trang đầu tiên của bạn"
+    },
+    "archive_pages": {
+      "title": "Chưa có trang được lưu trữ",
+      "description": "Lưu trữ các trang không nằm trong tầm quan sát của bạn. Truy cập chúng ở đây khi cần."
+    },
+    "intake_sidebar": {
+      "title": "Ghi lại yêu cầu Tiếp nhận",
+      "description": "Gửi các yêu cầu mới để được xem xét, ưu tiên và theo dõi trong quy trình làm việc của dự án.",
+      "cta_primary": "Tạo yêu cầu Tiếp nhận"
+    },
+    "intake_main": {
+      "title": "Chọn một mục công việc Tiếp nhận để xem chi tiết của nó"
+    },
+    "epics": {
+      "title": "Biến các dự án phức tạp thành các câu chuyện sử thi có cấu trúc.",
+      "description": "Một câu chuyện sử thi giúp bạn tổ chức các mục tiêu lớn thành các nhiệm vụ nhỏ hơn, có thể theo dõi.",
+      "cta_primary": "Tạo Câu chuyện Sử thi",
+      "cta_secondary": "Tài liệu"
+    },
+    "epic_work_items": {
+      "title": "Bạn chưa thêm mục công việc vào câu chuyện sử thi này.",
+      "description": "Bắt đầu bằng cách thêm một số mục công việc vào câu chuyện sử thi này và theo dõi chúng ở đây.",
+      "cta_secondary": "Thêm mục công việc"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "Chưa có epic nào được lưu trữ",
+      "description": "Bạn có thể lưu trữ các epic đã hoàn thành hoặc đã hủy. Tìm chúng tại đây sau khi lưu trữ."
+    },
+    "archive_work_items": {
+      "title": "Chưa có mục công việc được lưu trữ",
+      "description": "Thủ công hoặc thông qua tự động hóa, bạn có thể lưu trữ các mục công việc đã hoàn thành hoặc bị hủy. Tìm chúng ở đây sau khi lưu trữ.",
+      "cta_primary": "Thiết lập tự động hóa"
+    },
+    "archive_cycles": {
+      "title": "Chưa có chu kỳ được lưu trữ",
+      "description": "Để sắp xếp dự án của bạn, hãy lưu trữ các chu kỳ đã hoàn thành. Tìm chúng ở đây sau khi lưu trữ."
+    },
+    "archive_modules": {
+      "title": "Chưa có Mô-đun được lưu trữ",
+      "description": "Để sắp xếp dự án của bạn, hãy lưu trữ các mô-đun đã hoàn thành hoặc bị hủy. Tìm chúng ở đây sau khi lưu trữ."
+    },
+    "home_widget_quick_links": {
+      "title": "Giữ các tài liệu tham khảo, tài nguyên hoặc tài liệu quan trọng tiện lợi cho công việc của bạn"
+    },
+    "inbox_sidebar_all": {
+      "title": "Cập nhật cho các mục công việc bạn đăng ký sẽ xuất hiện ở đây"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "Đề cập cho các mục công việc của bạn sẽ xuất hiện ở đây"
+    },
+    "your_work_by_priority": {
+      "title": "Chưa có mục công việc được giao"
+    },
+    "your_work_by_state": {
+      "title": "Chưa có mục công việc được giao"
+    },
+    "views": {
+      "title": "Chưa có Chế độ xem",
+      "description": "Thêm các mục công việc vào dự án của bạn và sử dụng chế độ xem để lọc, sắp xếp và giám sát tiến độ dễ dàng.",
+      "cta_primary": "Thêm mục công việc"
+    },
+    "drafts": {
+      "title": "Các mục công việc viết dở",
+      "description": "Để thử điều này, hãy bắt đầu thêm một mục công việc và để nó ở giữa chừng hoặc tạo bản nháp đầu tiên của bạn bên dưới. 😉",
+      "cta_primary": "Tạo mục công việc nháp"
+    },
+    "projects_archived": {
+      "title": "Không có dự án được lưu trữ",
+      "description": "Có vẻ như tất cả các dự án của bạn vẫn đang hoạt động—làm tốt lắm!"
+    },
+    "analytics_projects": {
+      "title": "Tạo dự án để trực quan hóa số liệu dự án ở đây."
+    },
+    "analytics_work_items": {
+      "title": "Tạo dự án với các mục công việc và người được giao để bắt đầu theo dõi hiệu suất, tiến độ và tác động của đội ở đây."
+    },
+    "analytics_no_cycle": {
+      "title": "Tạo chu kỳ để tổ chức công việc thành các giai đoạn có giới hạn thời gian và theo dõi tiến độ qua các sprint."
+    },
+    "analytics_no_module": {
+      "title": "Tạo mô-đun để tổ chức công việc của bạn và theo dõi tiến độ qua các giai đoạn khác nhau."
+    },
+    "analytics_no_intake": {
+      "title": "Thiết lập tiếp nhận để quản lý các yêu cầu đến và theo dõi cách chúng được chấp nhận và từ chối"
+    },
+    "home_widget_stickies": {
+      "title": "Ghi lại một ý tưởng, ghi lại khoảnh khắc sáng tạo hoặc ghi lại ý nghĩ. Thêm ghi chú dán để bắt đầu."
+    },
+    "stickies": {
+      "title": "Ghi lại ý tưởng ngay lập tức",
+      "description": "Tạo ghi chú dán cho các ghi chú nhanh và việc cần làm, và mang chúng theo bên mình mọi nơi bạn đến.",
+      "cta_primary": "Tạo ghi chú dán đầu tiên",
+      "cta_secondary": "Tài liệu"
+    },
+    "active_cycles": {
+      "title": "Không có chu kỳ hoạt động",
+      "description": "Bạn không có chu kỳ đang tiến hành ngay bây giờ. Các chu kỳ hoạt động xuất hiện ở đây khi chúng bao gồm ngày hôm nay."
+    },
+    "dashboard": {
+      "title": "Trực quan hóa tiến độ của bạn với bảng điều khiển",
+      "description": "Xây dựng bảng điều khiển có thể tùy chỉnh để theo dõi số liệu, đo lường kết quả và trình bày thông tin hiệu quả.",
+      "cta_primary": "Tạo bảng điều khiển mới"
+    },
+    "wiki": {
+      "title": "Viết một ghi chú, một tài liệu hoặc một cơ sở kiến thức đầy đủ.",
+      "description": "Các trang là không gian ghi lại suy nghĩ trong Plane. Ghi chú cuộc họp, định dạng chúng dễ dàng, nhúng các mục công việc, bố trí chúng bằng thư viện các thành phần và giữ chúng tất cả trong bối cảnh dự án của bạn.",
+      "cta_primary": "Tạo trang của bạn"
+    },
+    "project_overview_state_sidebar": {
+      "title": "Kích hoạt trạng thái dự án",
+      "description": "Kích hoạt Trạng thái Dự án để xem và quản lý các thuộc tính như trạng thái, mức độ ưu tiên, ngày đến hạn và hơn thế nữa."
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "Chưa có ước tính",
+      "description": "Xác định cách đội của bạn đo lường nỗ lực và theo dõi nó một cách nhất quán trên tất cả các mục công việc.",
+      "cta_primary": "Thêm hệ thống ước tính"
+    },
+    "labels": {
+      "title": "Chưa có nhãn",
+      "description": "Tạo nhãn cá nhân hóa để phân loại và quản lý các mục công việc của bạn một cách hiệu quả.",
+      "cta_primary": "Tạo nhãn đầu tiên của bạn"
+    },
+    "exports": {
+      "title": "Chưa có xuất khẩu",
+      "description": "Bạn chưa có bản ghi xuất khẩu nào ngay bây giờ. Sau khi bạn xuất dữ liệu, tất cả các bản ghi sẽ xuất hiện ở đây."
+    },
+    "tokens": {
+      "title": "Chưa có token Cá nhân",
+      "description": "Tạo token API an toàn để kết nối không gian làm việc của bạn với các hệ thống và ứng dụng bên ngoài.",
+      "cta_primary": "Thêm token API"
+    },
+    "workspace_tokens": {
+      "title": "Chưa có token API",
+      "description": "Tạo token API an toàn để kết nối không gian làm việc của bạn với các hệ thống và ứng dụng bên ngoài.",
+      "cta_primary": "Thêm token API"
+    },
+    "webhooks": {
+      "title": "Chưa thêm Webhook",
+      "description": "Tự động hóa thông báo đến các dịch vụ bên ngoài khi sự kiện dự án xảy ra.",
+      "cta_primary": "Thêm webhook"
+    },
+    "work_item_types": {
+      "title": "Tạo và tùy chỉnh các loại mục công việc",
+      "description": "Xác định các loại mục công việc độc đáo cho dự án của bạn. Mỗi loại có thể có thuộc tính, quy trình làm việc và trường riêng - được điều chỉnh theo nhu cầu của dự án và đội của bạn.",
+      "cta_primary": "Kích hoạt"
+    },
+    "work_item_type_properties": {
+      "title": "Xác định thuộc tính và chi tiết bạn muốn thu thập cho loại mục công việc này. Tùy chỉnh nó để phù hợp với quy trình làm việc của dự án.",
+      "cta_secondary": "Thêm thuộc tính"
+    },
+    "templates": {
+      "title": "Chưa có mẫu",
+      "description": "Giảm thời gian thiết lập bằng cách tạo mẫu cho các mục công việc và trang — và bắt đầu công việc mới trong vài giây.",
+      "cta_primary": "Tạo mẫu đầu tiên của bạn"
+    },
+    "recurring_work_items": {
+      "title": "Chưa có mục công việc định kỳ",
+      "description": "Thiết lập các mục công việc định kỳ để tự động hóa các nhiệm vụ lặp lại và giữ đúng lịch trình một cách dễ dàng.",
+      "cta_primary": "Tạo mục công việc định kỳ"
+    },
+    "worklogs": {
+      "title": "Theo dõi bảng chấm công cho tất cả thành viên",
+      "description": "Ghi nhật ký thời gian trên các mục công việc để xem bảng chấm công chi tiết cho bất kỳ thành viên nào trong đội qua các dự án."
+    },
+    "group_syncing": {
+      "title": "Chưa có ánh xạ nhóm"
+    },
+    "template_setting": {
+      "title": "Chưa có mẫu",
+      "description": "Giảm thời gian thiết lập bằng cách tạo mẫu cho dự án, mục công việc và trang — và bắt đầu công việc mới trong vài giây.",
+      "cta_primary": "Tạo mẫu"
+    },
+    "workflows": {
+      "title": "Chưa có quy trình làm việc",
+      "description": "Tạo quy trình làm việc để quản lý tiến độ của các mục công việc.",
+      "cta_primary": "Thêm quy trình làm việc mới",
+      "states": {
+        "title": "Thêm trạng thái",
+        "description": "Chọn các trạng thái mà mục công việc sẽ đi qua."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/home.json b/packages/i18n/src/locales/vi-VN/home.json
new file mode 100644
index 0000000..6bfbac7
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "Hướng dẫn nhanh",
+      "not_right_now": "Không phải bây giờ",
+      "create_project": {
+        "title": "Tạo dự án",
+        "description": "Trong Plane, hầu hết mọi thứ đều bắt đầu từ dự án.",
+        "cta": "Bắt đầu"
+      },
+      "invite_team": {
+        "title": "Mời nhóm của bạn",
+        "description": "Xây dựng, phát hành và quản lý cùng với đồng nghiệp.",
+        "cta": "Mời họ tham gia"
+      },
+      "configure_workspace": {
+        "title": "Thiết lập không gian làm việc của bạn",
+        "description": "Bật hoặc tắt tính năng, hoặc thiết lập thêm.",
+        "cta": "Cấu hình không gian làm việc này"
+      },
+      "personalize_account": {
+        "title": "Cá nhân hóa Plane cho bạn",
+        "description": "Chọn ảnh đại diện, màu sắc và nhiều hơn nữa.",
+        "cta": "Cá nhân hóa ngay"
+      },
+      "widgets": {
+        "title": "Không có tiện ích nào trông có vẻ yên tĩnh, hãy bật chúng lên",
+        "description": "Có vẻ như tất cả tiện ích của bạn đều đã bị tắt. Bật chúng ngay\nđể nâng cao trải nghiệm của bạn!",
+        "primary_button": {
+          "text": "Quản lý tiện ích"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "Lưu liên kết liên quan đến công việc mà bạn muốn truy cập thuận tiện.",
+      "add": "Thêm liên kết nhanh",
+      "title": "Liên kết nhanh",
+      "title_plural": "Liên kết nhanh"
+    },
+    "recents": {
+      "title": "Gần đây",
+      "empty": {
+        "project": "Sau khi truy cập dự án, các dự án gần đây của bạn sẽ xuất hiện ở đây.",
+        "page": "Sau khi truy cập trang, các trang gần đây của bạn sẽ xuất hiện ở đây.",
+        "issue": "Sau khi truy cập mục công việc, các mục công việc gần đây của bạn sẽ xuất hiện ở đây.",
+        "default": "Bạn chưa có dự án gần đây nào."
+      },
+      "filters": {
+        "all": "Tất cả",
+        "projects": "Dự án",
+        "pages": "Trang",
+        "issues": "Mục công việc"
+      }
+    },
+    "new_at_plane": {
+      "title": "Tính năng mới của Plane"
+    },
+    "quick_tutorial": {
+      "title": "Hướng dẫn nhanh"
+    },
+    "widget": {
+      "reordered_successfully": "Đã sắp xếp lại tiện ích thành công.",
+      "reordering_failed": "Đã xảy ra lỗi khi sắp xếp lại tiện ích."
+    },
+    "manage_widgets": "Quản lý tiện ích",
+    "title": "Trang chủ",
+    "star_us_on_github": "Gắn sao cho chúng tôi trên GitHub",
+    "business_trial_banner": {
+      "title": "Bản dùng thử 14 ngày gói Business của bạn đã được kích hoạt!",
+      "description": "Khám phá tất cả các tính năng Business. Khi bạn sẵn sàng, hãy chọn đăng ký. Bạn sẽ không bị tính phí tự động.",
+      "trial_ends_today": "Bản dùng thử kết thúc hôm nay",
+      "trial_ends_in_days": "Bản dùng thử kết thúc sau {days} ngày",
+      "start_subscription": "Bắt đầu đăng ký",
+      "explore_business_features": "Khám phá tính năng Business"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/inbox.json b/packages/i18n/src/locales/vi-VN/inbox.json
new file mode 100644
index 0000000..a471acf
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "Đang chờ xử lý",
+        "description": "Đang chờ xử lý"
+      },
+      "declined": {
+        "title": "Đã từ chối",
+        "description": "Đã từ chối"
+      },
+      "snoozed": {
+        "title": "Đã tạm hoãn",
+        "description": "Còn lại {days, plural, one{# ngày} other{# ngày}}"
+      },
+      "accepted": {
+        "title": "Đã chấp nhận",
+        "description": "Đã chấp nhận"
+      },
+      "duplicate": {
+        "title": "Trùng lặp",
+        "description": "Trùng lặp"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "Từ chối mục công việc",
+        "content": "Bạn có chắc chắn muốn từ chối mục công việc {value} không?"
+      },
+      "delete": {
+        "title": "Xóa mục công việc",
+        "content": "Bạn có chắc chắn muốn xóa mục công việc {value} không?",
+        "success": "Đã xóa mục công việc thành công"
+      }
+    },
+    "errors": {
+      "snooze_permission": "Chỉ quản trị viên dự án mới có thể tạm hoãn/hủy tạm hoãn mục công việc",
+      "accept_permission": "Chỉ quản trị viên dự án mới có thể chấp nhận mục công việc",
+      "decline_permission": "Chỉ quản trị viên dự án mới có thể từ chối mục công việc"
+    },
+    "actions": {
+      "accept": "Chấp nhận",
+      "decline": "Từ chối",
+      "snooze": "Tạm hoãn",
+      "unsnooze": "Hủy tạm hoãn",
+      "copy": "Sao chép liên kết mục công việc",
+      "delete": "Xóa",
+      "open": "Mở mục công việc",
+      "mark_as_duplicate": "Đánh dấu là trùng lặp",
+      "move": "Di chuyển {value} đến mục công việc dự án"
+    },
+    "source": {
+      "in-app": "Trong ứng dụng"
+    },
+    "order_by": {
+      "created_at": "Thời gian tạo",
+      "updated_at": "Thời gian cập nhật",
+      "id": "ID"
+    },
+    "label": "Thu thập",
+    "page_label": "{workspace} - Thu thập",
+    "modal": {
+      "title": "Tạo mục công việc thu thập"
+    },
+    "tabs": {
+      "open": "Chưa xử lý",
+      "closed": "Đã xử lý"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "Không có mục công việc chưa xử lý",
+        "description": "Tìm mục công việc chưa xử lý tại đây. Tạo mục công việc mới."
+      },
+      "sidebar_closed_tab": {
+        "title": "Không có mục công việc đã xử lý",
+        "description": "Tất cả mục công việc đã chấp nhận hoặc từ chối có thể được tìm thấy ở đây."
+      },
+      "sidebar_filter": {
+        "title": "Không có mục công việc phù hợp",
+        "description": "Không có mục công việc trong thu thập phù hợp với bộ lọc của bạn. Tạo mục công việc mới."
+      },
+      "detail": {
+        "title": "Chọn một mục công việc để xem chi tiết."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/integration.json b/packages/i18n/src/locales/vi-VN/integration.json
new file mode 100644
index 0000000..b884fb2
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "Tích hợp",
+    "loading": "Đang tải",
+    "unauthorized": "Bạn không được phép xem trang này.",
+    "configure": "Cấu hình",
+    "not_enabled": "{name} không được kích hoạt cho workspace này.",
+    "not_configured": "Chưa được cấu hình",
+    "disconnect_personal_account": "Ngắt kết nối tài khoản {providerName} cá nhân",
+    "not_configured_message_admin": "Tích hợp {name} chưa được cấu hình. Vui lòng liên hệ quản trị viên để cấu hình.",
+    "not_configured_message_support": "Tích hợp {name} chưa được cấu hình. Vui lòng liên hệ hỗ trợ để cấu hình.",
+    "external_api_unreachable": "Không thể truy cập API bên ngoài. Vui lòng thử lại sau.",
+    "error_fetching_supported_integrations": "Không thể lấy các tích hợp được hỗ trợ. Vui lòng thử lại sau.",
+    "back_to_integrations": "Quay lại tích hợp",
+    "select_state": "Chọn trạng thái",
+    "set_state": "Cập nhật trạng thái",
+    "choose_project": "Chọn dự án...",
+    "skip_backward_state_movement": "Ngăn các vấn đề chuyển về trạng thái trước đó do cập nhật PR"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "Kết nối và đồng bộ các mục công việc GitHub của bạn với Plane",
+    "connect_org": "Kết nối tổ chức",
+    "connect_org_description": "Kết nối tổ chức GitHub của bạn với Plane",
+    "processing": "Đang xử lý",
+    "org_added_desc": "GitHub org đã được thêm vào vào thời gian",
+    "connection_fetch_error": "Lỗi khi lấy chi tiết kết nối từ máy chủ",
+    "personal_account_connected": "Tài khoản cá nhân đã kết nối",
+    "personal_account_connected_description": "Tài khoản GitHub của bạn đã được kết nối với Plane",
+    "connect_personal_account": "Kết nối tài khoản cá nhân",
+    "connect_personal_account_description": "Kết nối tài khoản GitHub cá nhân của bạn với Plane.",
+    "repo_mapping": "Map kho lưu trữ",
+    "repo_mapping_description": "Map kho lưu trữ GitHub của bạn với dự án Plane.",
+    "project_issue_sync": "Đồng bộ vấn đề dự án",
+    "project_issue_sync_description": "Đồng bộ vấn đề từ GitHub đến dự án Plane của bạn",
+    "project_issue_sync_empty_state": "Các đồng bộ vấn đề dự án đã được ánh xạ sẽ xuất hiện ở đây",
+    "configure_project_issue_sync_state": "Cấu hình trạng thái đồng bộ vấn đề",
+    "select_issue_sync_direction": "Chọn hướng đồng bộ vấn đề",
+    "allow_bidirectional_sync": "Bidirectional - Đồng bộ vấn đề và bình luận trong cả hai hướng giữa GitHub và Plane",
+    "allow_unidirectional_sync": "Unidirectional - Đồng bộ vấn đề từ vấn đề và bình luận GitHub đến Plane chỉ",
+    "allow_unidirectional_sync_warning": "Dữ liệu từ GitHub Issue sẽ thay thế dữ liệu trong Mục Công việc Plane Được Liên kết (chỉ GitHub → Plane)",
+    "remove_project_issue_sync": "Xóa đồng bộ vấn đề dự án này",
+    "remove_project_issue_sync_confirmation": "Bạn có chắc muốn xóa đồng bộ vấn đề dự án này?",
+    "add_pr_state_mapping": "Thêm map trạng thái pull request cho dự án Plane",
+    "edit_pr_state_mapping": "Sửa map trạng thái pull request cho dự án Plane",
+    "pr_state_mapping": "Map trạng thái pull request",
+    "pr_state_mapping_description": "Map trạng thái pull request từ GitHub đến dự án Plane của bạn",
+    "pr_state_mapping_empty_state": "Các trạng thái PR đã được ánh xạ sẽ xuất hiện ở đây",
+    "remove_pr_state_mapping": "Xóa map trạng thái pull request này",
+    "remove_pr_state_mapping_confirmation": "Bạn có chắc muốn xóa map trạng thái pull request này?",
+    "issue_sync_message": "Mục công viện được đồng bộ với {project}",
+    "link": "Liên kết kho lưu trữ GitHub với dự án Plane",
+    "pull_request_automation": "Tự động hóa pull request",
+    "pull_request_automation_description": "Cấu hình map trạng thái pull request từ GitHub đến dự án Plane của bạn",
+    "DRAFT_MR_OPENED": "Draft Mở",
+    "MR_OPENED": "Mở",
+    "MR_READY_FOR_MERGE": "Sẵn sàng để hợp nhất",
+    "MR_REVIEW_REQUESTED": "Yêu cầu xem xét",
+    "MR_MERGED": "Hợp nhất",
+    "MR_CLOSED": "Đóng",
+    "ISSUE_OPEN": "Issue Mở",
+    "ISSUE_CLOSED": "Issue Đóng",
+    "save": "Lưu",
+    "start_sync": "Bắt đầu đồng bộ",
+    "choose_repository": "Chọn kho lưu trữ..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "Kết nối và đồng bộ Merge Requests của Gitlab với Plane.",
+    "connection_fetch_error": "Lỗi khi lấy chi tiết kết nối từ máy chủ",
+    "connect_org": "Kết nối tổ chức",
+    "connect_org_description": "Kết nối tổ chức Gitlab của bạn với Plane.",
+    "project_connections": "Kết nối dự án Gitlab",
+    "project_connections_description": "Đồng bộ yêu cầu hợp nhất từ Gitlab sang dự án Plane.",
+    "plane_project_connection": "Kết nối dự án Plane",
+    "plane_project_connection_description": "Cấu hình ánh xạ trạng thái pull request từ Gitlab sang dự án Plane",
+    "remove_connection": "Xóa kết nối",
+    "remove_connection_confirmation": "Bạn có chắc muốn xóa kết nối này không?",
+    "link": "Liên kết kho lưu trữ Gitlab với dự án Plane",
+    "pull_request_automation": "Tự động hóa Pull Request",
+    "pull_request_automation_description": "Cấu hình ánh xạ trạng thái pull request từ Gitlab sang Plane",
+    "DRAFT_MR_OPENED": "Khi dự thảo MR mở, đặt trạng thái thành",
+    "MR_OPENED": "Khi MR mở, đặt trạng thái thành",
+    "MR_REVIEW_REQUESTED": "Khi yêu cầu xem xét MR, đặt trạng thái thành",
+    "MR_READY_FOR_MERGE": "Khi MR sẵn sàng để hợp nhất, đặt trạng thái thành",
+    "MR_MERGED": "Khi MR được hợp nhất, đặt trạng thái thành",
+    "MR_CLOSED": "Khi MR đóng, đặt trạng thái thành",
+    "integration_enabled_text": "Với tích hợp Gitlab được Kích hoạt, bạn có thể tự động hóa quy trình làm việc của mục công việc",
+    "choose_entity": "Chọn thực thể",
+    "choose_project": "Chọn dự án",
+    "link_plane_project": "Liên kết dự án Plane",
+    "project_issue_sync": "Đồng bộ vấn đề dự án",
+    "project_issue_sync_description": "Đồng bộ vấn đề từ Gitlab sang dự án Plane của bạn",
+    "project_issue_sync_empty_state": "Đồng bộ vấn đề dự án đã ánh xạ sẽ xuất hiện ở đây",
+    "configure_project_issue_sync_state": "Cấu hình trạng thái đồng bộ vấn đề",
+    "select_issue_sync_direction": "Chọn hướng đồng bộ vấn đề",
+    "allow_bidirectional_sync": "Hai chiều - Đồng bộ vấn đề và bình luận cả hai chiều giữa Gitlab và Plane",
+    "allow_unidirectional_sync": "Một chiều - Chỉ đồng bộ vấn đề và bình luận từ Gitlab sang Plane",
+    "allow_unidirectional_sync_warning": "Dữ liệu từ Gitlab Issue sẽ thay thế dữ liệu trong Mục công việc Plane được liên kết (chỉ Gitlab → Plane)",
+    "remove_project_issue_sync": "Xóa đồng bộ vấn đề dự án này",
+    "remove_project_issue_sync_confirmation": "Bạn có chắc muốn xóa đồng bộ vấn đề dự án này không?",
+    "ISSUE_OPEN": "Vấn đề mở",
+    "ISSUE_CLOSED": "Vấn đề đóng",
+    "save": "Lưu",
+    "start_sync": "Bắt đầu đồng bộ",
+    "choose_repository": "Chọn kho lưu trữ..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "Kết nối và đồng bộ instance Gitlab Enterprise của bạn với Plane.",
+    "app_form_title": "Cấu hình Gitlab Enterprise",
+    "app_form_description": "Cấu hình Gitlab Enterprise để kết nối với Plane.",
+    "base_url_title": "URL Cơ bản",
+    "base_url_description": "URL cơ bản của instance Gitlab Enterprise của bạn.",
+    "base_url_placeholder": "ví dụ: \"https://glab.plane.town\"",
+    "base_url_error": "URL cơ bản là bắt buộc",
+    "invalid_base_url_error": "URL cơ bản không hợp lệ",
+    "client_id_title": "ID Ứng dụng",
+    "client_id_description": "ID của ứng dụng bạn đã tạo trong instance Gitlab Enterprise của bạn.",
+    "client_id_placeholder": "ví dụ: \"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "ID Ứng dụng là bắt buộc",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "Client secret của ứng dụng bạn đã tạo trong instance Gitlab Enterprise của bạn.",
+    "client_secret_placeholder": "ví dụ: \"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "Client secret là bắt buộc",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "Webhook secret ngẫu nhiên sẽ được sử dụng để xác minh webhook từ instance Gitlab Enterprise.",
+    "webhook_secret_placeholder": "ví dụ: \"webhook1234567890\"",
+    "webhook_secret_error": "Webhook secret là bắt buộc",
+    "connect_app": "Kết nối Ứng dụng"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "Kết nối workspace Slack của bạn với Plane.",
+    "connect_personal_account": "Kết nối tài khoản Slack cá nhân của bạn với Plane.",
+    "personal_account_connected": "Tài khoản {providerName} cá nhân của bạn hiện đã được kết nối với Plane.",
+    "link_personal_account": "Liên kết tài khoản {providerName} cá nhân của bạn với Plane.",
+    "connected_slack_workspaces": "Các workspace Slack đã kết nối",
+    "connected_on": "Đã kết nối vào {date}",
+    "disconnect_workspace": "Ngắt kết nối workspace {name}",
+    "alerts": {
+      "dm_alerts": {
+        "title": "Nhận thông báo trong tin nhắn trực tiếp Slack cho các cập nhật quan trọng, lời nhắc và cảnh báo chỉ dành cho bạn."
+      }
+    },
+    "project_updates": {
+      "title": "Cập Nhật Dự Án",
+      "description": "Cấu hình thông báo cập nhật dự án cho các dự án của bạn",
+      "add_new_project_update": "Thêm thông báo cập nhật dự án mới",
+      "project_updates_empty_state": "Các dự án kết nối với Kênh Slack sẽ xuất hiện ở đây.",
+      "project_updates_form": {
+        "title": "Cấu Hình Cập Nhật Dự Án",
+        "description": "Nhận thông báo cập nhật dự án trong Slack khi các mục công việc được tạo",
+        "failed_to_load_channels": "Không thể tải kênh từ Slack",
+        "project_dropdown": {
+          "placeholder": "Chọn dự án",
+          "label": "Dự Án Plane",
+          "no_projects": "Không có dự án nào khả dụng"
+        },
+        "channel_dropdown": {
+          "label": "Kênh Slack",
+          "placeholder": "Chọn kênh",
+          "no_channels": "Không có kênh nào khả dụng"
+        },
+        "all_projects_connected": "Tất cả các dự án đã được kết nối với kênh Slack.",
+        "all_channels_connected": "Tất cả các kênh Slack đã được kết nối với dự án.",
+        "project_connection_success": "Kết nối dự án được tạo thành công",
+        "project_connection_updated": "Kết nối dự án được cập nhật thành công",
+        "project_connection_deleted": "Kết nối dự án được xóa thành công",
+        "failed_delete_project_connection": "Không thể xóa kết nối dự án",
+        "failed_create_project_connection": "Không thể tạo kết nối dự án",
+        "failed_upserting_project_connection": "Không thể cập nhật kết nối dự án",
+        "failed_loading_project_connections": "Chúng tôi không thể tải kết nối dự án của bạn. Điều này có thể do sự cố mạng hoặc sự cố với tích hợp."
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "Kết nối không gian làm việc Sentry của bạn với Plane.",
+    "connected_sentry_workspaces": "Không gian làm việc Sentry đã kết nối",
+    "connected_on": "Đã kết nối vào {date}",
+    "disconnect_workspace": "Ngắt kết nối không gian làm việc {name}",
+    "state_mapping": {
+      "title": "Ánh xạ trạng thái",
+      "description": "Ánh xạ trạng thái sự cố Sentry với trạng thái dự án của bạn. Cấu hình trạng thái nào sử dụng khi sự cố Sentry được giải quyết hoặc chưa giải quyết.",
+      "add_new_state_mapping": "Thêm ánh xạ trạng thái mới",
+      "empty_state": "Chưa cấu hình ánh xạ trạng thái. Tạo ánh xạ đầu tiên để đồng bộ trạng thái sự cố Sentry với trạng thái dự án của bạn.",
+      "failed_loading_state_mappings": "Chúng tôi không thể tải ánh xạ trạng thái của bạn. Điều này có thể do vấn đề mạng hoặc vấn đề với tích hợp.",
+      "loading_project_states": "Đang tải trạng thái dự án...",
+      "error_loading_states": "Lỗi khi tải trạng thái",
+      "no_states_available": "Không có trạng thái khả dụng",
+      "no_permission_states": "Bạn không có quyền truy cập trạng thái cho dự án này",
+      "states_not_found": "Không tìm thấy trạng thái dự án",
+      "server_error_states": "Lỗi máy chủ khi tải trạng thái"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "Kết nối và đồng bộ kho Bitbucket Data Center của bạn với Plane."
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "Xác thực token IdP bên ngoài để truy cập API.",
+    "header_description": "Xác thực token OIDC/JWT được cấp bên ngoài từ IdP của bạn (Azure AD, Okta, v.v.) để truy cập API Plane.",
+    "connected": "Đã kết nối",
+    "connect": "Kết nối",
+    "uninstall": "Gỡ cài đặt",
+    "uninstalling": "Đang gỡ cài đặt...",
+    "install_success": "OAuth Bridge đã được cài đặt thành công.",
+    "install_error": "Không thể cài đặt OAuth Bridge.",
+    "uninstall_success": "OAuth Bridge đã được gỡ cài đặt.",
+    "uninstall_error": "Không thể gỡ cài đặt OAuth Bridge.",
+    "token_providers": "Nhà cung cấp token",
+    "token_providers_description": "Cấu hình các IdP bên ngoài có JWT được chấp nhận làm thông tin xác thực API.",
+    "add_provider": "Thêm nhà cung cấp",
+    "edit_provider": "Sửa nhà cung cấp",
+    "enabled": "Đã bật",
+    "disabled": "Đã tắt",
+    "test": "Kiểm tra",
+    "no_providers_title": "Chưa có nhà cung cấp nào được cấu hình.",
+    "no_providers_description": "Thêm IdP để bật xác thực token bên ngoài.",
+    "provider_updated": "Nhà cung cấp đã được cập nhật.",
+    "provider_added": "Nhà cung cấp đã được thêm.",
+    "provider_save_error": "Không thể lưu nhà cung cấp.",
+    "provider_deleted": "Nhà cung cấp đã được xóa.",
+    "provider_delete_error": "Không thể xóa nhà cung cấp.",
+    "provider_update_error": "Không thể cập nhật nhà cung cấp.",
+    "jwks_reachable": "JWKS có thể truy cập",
+    "jwks_unreachable": "JWKS không thể truy cập",
+    "jwks_test_error": "Không thể lấy JWKS từ URL đã cấu hình.",
+    "provider_form": {
+      "name_label": "Tên",
+      "name_placeholder": "vd. Azure AD Production",
+      "name_description": "Nhãn dễ đọc cho nhà cung cấp danh tính này",
+      "name_required": "Tên là bắt buộc.",
+      "issuer_label": "Nhà phát hành",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "Giá trị claim iss mong đợi trong JWT",
+      "issuer_required": "Nhà phát hành là bắt buộc.",
+      "jwks_url_label": "URL JWKS",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "Endpoint HTTPS cung cấp JSON Web Key Set của nhà cung cấp",
+      "jwks_url_required": "URL JWKS là bắt buộc.",
+      "jwks_url_https": "URL JWKS phải sử dụng HTTPS.",
+      "audience_label": "Đối tượng",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "Claim aud mong đợi trong JWT, phân tách bằng dấu phẩy.",
+      "user_claims_label": "Claim người dùng",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "Claim JWT chứa địa chỉ email của người dùng",
+      "user_claims_required": "Claim người dùng là bắt buộc.",
+      "allowed_algorithms_label": "Thuật toán ký được phép",
+      "allowed_algorithms_description": "Thuật toán bất đối xứng được chấp nhận để xác minh chữ ký JWT",
+      "allowed_algorithms_required": "Cần ít nhất một thuật toán.",
+      "select_algorithms": "Chọn thuật toán",
+      "jwks_cache_ttl_label": "TTL bộ nhớ đệm JWKS (giây)",
+      "jwks_cache_ttl_description": "Thời gian lưu trữ khóa JWKS của nhà cung cấp trong bộ nhớ đệm (tối thiểu 60 giây, mặc định 24 giờ)",
+      "jwks_cache_ttl_min": "TTL bộ nhớ đệm phải ít nhất 60 giây.",
+      "rate_limit_label": "Giới hạn tốc độ",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "Giới hạn yêu cầu dạng số lượng/khoảng thời gian (vd. 120/minute). Để trống để sử dụng giới hạn mặc định.",
+      "enable_provider": "Bật nhà cung cấp này",
+      "saving": "Đang lưu...",
+      "update": "Cập nhật"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "Kết nối và đồng bộ tổ chức GitHub Enterprise của bạn với Plane.",
+    "app_form_title": "Cấu hình GitHub Enterprise",
+    "app_form_description": "Cấu hình GitHub Enterprise để kết nối với Plane.",
+    "app_id_title": "ID Ứng dụng",
+    "app_id_description": "ID ứng dụng bạn đã tạo trong tổ chức GitHub Enterprise của bạn.",
+    "app_id_placeholder": "e.g., \"1234567890\"",
+    "app_id_error": "App ID là bắt buộc",
+    "app_name_title": "Slug Ứng dụng",
+    "app_name_description": "Slug ứng dụng bạn đã tạo trong tổ chức GitHub Enterprise của bạn.",
+    "app_name_error": "Slug ứng dụng là bắt buộc",
+    "app_name_placeholder": "e.g., \"plane-github-enterprise\"",
+    "base_url_title": "URL Cơ Bản",
+    "base_url_description": "URL cơ bản của tổ chức GitHub Enterprise của bạn.",
+    "base_url_placeholder": "e.g., \"https://gh.plane.town\"",
+    "base_url_error": "URL cơ bản là bắt buộc",
+    "invalid_base_url_error": "URL cơ bản không hợp lệ",
+    "client_id_title": "ID Khách Hàng",
+    "client_id_description": "ID khách hàng của ứng dụng bạn đã tạo trong tổ chức GitHub Enterprise của bạn.",
+    "client_id_placeholder": "e.g., \"1234567890\"",
+    "client_id_error": "ID khách hàng là bắt buộc",
+    "client_secret_title": "Secret Khách Hàng",
+    "client_secret_description": "Secret khách hàng của ứng dụng bạn đã tạo trong tổ chức GitHub Enterprise của bạn.",
+    "client_secret_placeholder": "e.g., \"1234567890\"",
+    "client_secret_error": "Secret khách hàng là bắt buộc",
+    "webhook_secret_title": "Secret Webhook",
+    "webhook_secret_description": "Secret webhook của ứng dụng bạn đã tạo trong tổ chức GitHub Enterprise của bạn.",
+    "webhook_secret_placeholder": "e.g., \"1234567890\"",
+    "webhook_secret_error": "Secret webhook là bắt buộc",
+    "private_key_title": "Private Key (Base64 encoded)",
+    "private_key_description": "Private key của ứng dụng bạn đã tạo trong tổ chức GitHub Enterprise của bạn.",
+    "private_key_placeholder": "e.g., \"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Private key là bắt buộc",
+    "connect_app": "Kết nối Ứng dụng"
+  },
+  "silo_errors": {
+    "invalid_query_params": "Tham số truy vấn được cung cấp không hợp lệ hoặc thiếu trường bắt buộc",
+    "invalid_installation_account": "Tài khoản cài đặt được cung cấp không hợp lệ",
+    "generic_error": "Đã xảy ra lỗi không mong muốn khi xử lý yêu cầu của bạn",
+    "connection_not_found": "Không thể tìm thấy kết nối được yêu cầu",
+    "multiple_connections_found": "Nhiều kết nối đã được tìm thấy khi chỉ mong đợi một kết nối",
+    "cannot_create_multiple_connections": "Bạn đã kết nối tổ chức của mình với một không gian làm việc. Vui lòng ngắt kết nối hiện tại trước khi kết nối mới.",
+    "installation_not_found": "Không thể tìm thấy cài đặt được yêu cầu",
+    "user_not_found": "Không thể tìm thấy người dùng được yêu cầu",
+    "error_fetching_token": "Không thể lấy mã thông báo xác thực",
+    "invalid_app_credentials": "Các thông tin xác thực ứng dụng đã cung cấp không hợp lệ",
+    "invalid_app_installation_id": "Không thể cài đặt ứng dụng"
+  },
+  "import_status": {
+    "queued": "Đang chờ",
+    "created": "Đã tạo",
+    "initiated": "Đã bắt đầu",
+    "pulling": "Đang kéo",
+    "timed_out": "Quá thời gian",
+    "pulled": "Đã kéo",
+    "progressing": "Đang tiến hành",
+    "transforming": "Đang chuyển đổi",
+    "transformed": "Đã chuyển đổi",
+    "pushing": "Đang đẩy",
+    "finished": "Hoàn thành",
+    "error": "Lỗi",
+    "cancelled": "Đã hủy"
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/module.json b/packages/i18n/src/locales/vi-VN/module.json
new file mode 100644
index 0000000..a08bdd2
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {mô-đun} other {mô-đun}}",
+    "no_module": "Không có mô-đun",
+    "select": "Thêm mô-đun"
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/navigation.json b/packages/i18n/src/locales/vi-VN/navigation.json
new file mode 100644
index 0000000..1e5d213
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Không tìm thấy kết quả"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "Ghi chú nhanh",
+    "your_work": "Công việc của tôi",
+    "projects": "Dự án",
+    "pages": "Trang",
+    "new_work_item": "Mục công việc mới",
+    "home": "Trang chủ",
+    "inbox": "Hộp thư đến",
+    "workspace": "Không gian làm việc",
+    "views": "Chế độ xem",
+    "analytics": "Phân tích",
+    "work_items": "Mục công việc",
+    "cycles": "Chu kỳ",
+    "modules": "Mô-đun",
+    "intake": "Thu thập",
+    "drafts": "Bản nháp",
+    "favorites": "Yêu thích",
+    "pro": "Phiên bản Pro",
+    "upgrade": "Nâng cấp",
+    "pi_chat": "Plane AI",
+    "epics": "Epics",
+    "upgrade_plan": "Nâng cấp gói",
+    "plane_pro": "Plane Pro",
+    "business": "Doanh nghiệp"
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/notification.json b/packages/i18n/src/locales/vi-VN/notification.json
new file mode 100644
index 0000000..13ff857
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "Hộp thư đến",
+    "page_label": "{workspace} - Hộp thư đến",
+    "options": {
+      "mark_all_as_read": "Đánh dấu tất cả là đã đọc",
+      "mark_read": "Đánh dấu đã đọc",
+      "mark_unread": "Đánh dấu chưa đọc",
+      "refresh": "Làm mới",
+      "filters": "Bộ lọc hộp thư đến",
+      "show_unread": "Hiển thị chưa đọc",
+      "show_snoozed": "Hiển thị đã tạm hoãn",
+      "show_archived": "Hiển thị đã lưu trữ",
+      "mark_archive": "Lưu trữ",
+      "mark_unarchive": "Hủy lưu trữ",
+      "mark_snooze": "Tạm hoãn",
+      "mark_unsnooze": "Hủy tạm hoãn"
+    },
+    "toasts": {
+      "read": "Thông báo đã được đánh dấu là đã đọc",
+      "unread": "Thông báo đã được đánh dấu là chưa đọc",
+      "archived": "Thông báo đã được đánh dấu là đã lưu trữ",
+      "unarchived": "Thông báo đã được đánh dấu là đã hủy lưu trữ",
+      "snoozed": "Thông báo đã được tạm hoãn",
+      "unsnoozed": "Thông báo đã được hủy tạm hoãn"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "Chọn để xem chi tiết."
+      },
+      "all": {
+        "title": "Không có mục công việc được giao",
+        "description": "Xem cập nhật về mục công việc được giao cho bạn tại đây"
+      },
+      "mentions": {
+        "title": "Không có mục công việc được giao",
+        "description": "Xem cập nhật về mục công việc được giao cho bạn tại đây"
+      }
+    },
+    "tabs": {
+      "all": "Tất cả",
+      "mentions": "Đề cập"
+    },
+    "filter": {
+      "assigned": "Được giao cho tôi",
+      "created": "Được tạo bởi tôi",
+      "subscribed": "Được đăng ký bởi tôi"
+    },
+    "snooze": {
+      "1_day": "1 ngày",
+      "3_days": "3 ngày",
+      "5_days": "5 ngày",
+      "1_week": "1 tuần",
+      "2_weeks": "2 tuần",
+      "custom": "Tùy chỉnh"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/page.json b/packages/i18n/src/locales/vi-VN/page.json
new file mode 100644
index 0000000..c254374
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "Phác thảo",
+        "empty_state": {
+          "title": "Thiếu tiêu đề",
+          "description": "Hãy thêm một số tiêu đề vào trang này để xem chúng ở đây."
+        }
+      },
+      "info": {
+        "label": "Thông tin",
+        "document_info": {
+          "words": "Từ",
+          "characters": "Ký tự",
+          "paragraphs": "Đoạn văn",
+          "read_time": "Thời gian đọc"
+        },
+        "actors_info": {
+          "edited_by": "Được chỉnh sửa bởi",
+          "created_by": "Được tạo bởi"
+        },
+        "version_history": {
+          "label": "Lịch sử phiên bản",
+          "current_version": "Phiên bản hiện tại",
+          "highlight_changes": "Đánh dấu thay đổi"
+        }
+      },
+      "assets": {
+        "label": "Tài sản",
+        "download_button": "Tải xuống",
+        "empty_state": {
+          "title": "Thiếu hình ảnh",
+          "description": "Thêm hình ảnh để xem chúng ở đây."
+        }
+      },
+      "comments": {
+        "label": "Bình luận",
+        "empty_state": {
+          "title": "Không có bình luận",
+          "description": "Thêm bình luận để xem chúng ở đây."
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Tên ghi chú không được dài hơn 100 ký tự.",
+        "already_exists": "Đã tồn tại một ghi chú không có mô tả"
+      },
+      "created": {
+        "title": "Đã tạo ghi chú",
+        "message": "Ghi chú đã được tạo thành công"
+      },
+      "not_created": {
+        "title": "Không tạo được ghi chú",
+        "message": "Không thể tạo ghi chú"
+      },
+      "updated": {
+        "title": "Đã cập nhật ghi chú",
+        "message": "Ghi chú đã được cập nhật thành công"
+      },
+      "not_updated": {
+        "title": "Không cập nhật được ghi chú",
+        "message": "Không thể cập nhật ghi chú"
+      },
+      "removed": {
+        "title": "Đã xóa ghi chú",
+        "message": "Ghi chú đã được xóa thành công"
+      },
+      "not_removed": {
+        "title": "Không xóa được ghi chú",
+        "message": "Không thể xóa ghi chú"
+      }
+    },
+    "open_button": "Mở bảng điều hướng",
+    "close_button": "Đóng bảng điều hướng",
+    "outline_floating_button": "Mở phác thảo"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "Di chuyển",
+        "loading": "Đang di chuyển"
+      },
+      "cannot_move_to_teamspace": "Không thể di chuyển trang riêng tư và trang đã chia sẻ đến không gian nhóm.",
+      "placeholders": {
+        "workspace_to_all": "Tìm dự án và không gian nhóm",
+        "workspace_to_project": "Tìm dự án",
+        "project_to_all": "Tìm dự án và không gian nhóm",
+        "project_to_project": "Tìm dự án",
+        "project_to_all_with_wiki": "Tìm bộ sưu tập wiki, dự án và không gian nhóm",
+        "project_to_project_with_wiki": "Tìm bộ sưu tập wiki và dự án"
+      },
+      "toasts": {
+        "success": {
+          "title": "Thành công!",
+          "message": "Đã di chuyển trang thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Không thể di chuyển trang. Vui lòng thử lại sau."
+        },
+        "collection_error": {
+          "title": "Đã chuyển vào wiki",
+          "message": "Trang đã được chuyển vào wiki, nhưng không thể thêm vào bộ sưu tập đã chọn. Trang vẫn nằm trong General."
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "Xóa khỏi bộ sưu tập",
+      "success_message": "Đã xóa trang khỏi bộ sưu tập.",
+      "error_message": "Không thể xóa trang khỏi bộ sưu tập. Vui lòng thử lại."
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "Đã đạt giới hạn nội dung và đồng bộ trực tiếp đã tắt. Tạo trang mới hoặc dùng trang lồng nhau để tiếp tục đồng bộ."
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/power-k.json b/packages/i18n/src/locales/vi-VN/power-k.json
new file mode 100644
index 0000000..ef55655
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "Xóa hàng loạt mục công việc"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "Hành động mục công việc",
+        "indicator": "Mục công việc",
+        "change_state": "Đổi trạng thái",
+        "change_priority": "Đổi mức độ ưu tiên",
+        "change_assignees": "Giao cho",
+        "assign_to_me": "Giao cho tôi",
+        "unassign_from_me": "Hủy giao khỏi tôi",
+        "change_estimate": "Đổi ước tính",
+        "add_to_cycle": "Thêm vào chu kỳ",
+        "add_to_modules": "Thêm vào mô-đun",
+        "add_labels": "Thêm nhãn",
+        "subscribe": "Đăng ký thông báo",
+        "unsubscribe": "Hủy đăng ký thông báo",
+        "delete": "Xóa",
+        "copy_id": "Sao chép ID",
+        "copy_id_toast_success": "Đã sao chép ID mục công việc vào bảng tạm.",
+        "copy_id_toast_error": "Đã xảy ra lỗi khi sao chép ID mục công việc vào bảng tạm.",
+        "copy_title": "Sao chép tiêu đề",
+        "copy_title_toast_success": "Đã sao chép tiêu đề mục công việc vào bảng tạm.",
+        "copy_title_toast_error": "Đã xảy ra lỗi khi sao chép tiêu đề mục công việc vào bảng tạm.",
+        "copy_url": "Sao chép URL",
+        "copy_url_toast_success": "Đã sao chép URL mục công việc vào bảng tạm.",
+        "copy_url_toast_error": "Đã xảy ra lỗi khi sao chép URL mục công việc vào bảng tạm."
+      },
+      "cycle": {
+        "title": "Hành động chu kỳ",
+        "indicator": "Chu kỳ",
+        "add_to_favorites": "Thêm vào mục yêu thích",
+        "remove_from_favorites": "Xóa khỏi mục yêu thích",
+        "copy_url": "Sao chép URL",
+        "copy_url_toast_success": "Đã sao chép URL chu kỳ vào bảng tạm.",
+        "copy_url_toast_error": "Đã xảy ra lỗi khi sao chép URL chu kỳ vào bảng tạm."
+      },
+      "module": {
+        "title": "Hành động mô-đun",
+        "indicator": "Mô-đun",
+        "add_remove_members": "Thêm/xóa thành viên",
+        "change_status": "Đổi trạng thái",
+        "add_to_favorites": "Thêm vào mục yêu thích",
+        "remove_from_favorites": "Xóa khỏi mục yêu thích",
+        "copy_url": "Sao chép URL",
+        "copy_url_toast_success": "Đã sao chép URL mô-đun vào bảng tạm.",
+        "copy_url_toast_error": "Đã xảy ra lỗi khi sao chép URL mô-đun vào bảng tạm."
+      },
+      "page": {
+        "title": "Hành động trang",
+        "indicator": "Trang",
+        "lock": "Khóa",
+        "unlock": "Mở khóa",
+        "make_private": "Chuyển thành riêng tư",
+        "make_public": "Chuyển thành công khai",
+        "archive": "Lưu trữ",
+        "restore": "Khôi phục",
+        "add_to_favorites": "Thêm vào mục yêu thích",
+        "remove_from_favorites": "Xóa khỏi mục yêu thích",
+        "copy_url": "Sao chép URL",
+        "copy_url_toast_success": "Đã sao chép URL trang vào bảng tạm.",
+        "copy_url_toast_error": "Đã xảy ra lỗi khi sao chép URL trang vào bảng tạm."
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "Mục công việc mới",
+      "create_page": "Trang mới",
+      "create_view": "Chế độ xem mới",
+      "create_cycle": "Chu kỳ mới",
+      "create_module": "Mô-đun mới",
+      "create_project": "Dự án mới",
+      "create_workspace": "Không gian làm việc mới",
+      "create_project_automation": "Tự động hóa mới"
+    },
+    "navigation_actions": {
+      "open_workspace": "Mở một không gian làm việc",
+      "nav_home": "Đi đến trang chủ",
+      "nav_inbox": "Đi đến hộp thư đến",
+      "nav_your_work": "Đi đến công việc của bạn",
+      "nav_account_settings": "Đi đến cài đặt tài khoản",
+      "open_project": "Mở một dự án",
+      "nav_projects_list": "Đi đến danh sách dự án",
+      "nav_all_workspace_work_items": "Đi đến tất cả mục công việc",
+      "nav_assigned_workspace_work_items": "Đi đến mục công việc đã giao",
+      "nav_created_workspace_work_items": "Đi đến mục công việc đã tạo",
+      "nav_subscribed_workspace_work_items": "Đi đến mục công việc đã đăng ký",
+      "nav_workspace_analytics": "Đi đến phân tích không gian làm việc",
+      "nav_workspace_drafts": "Đi đến bản nháp không gian làm việc",
+      "nav_workspace_archives": "Đi đến lưu trữ không gian làm việc",
+      "open_workspace_setting": "Mở một cài đặt không gian làm việc",
+      "nav_workspace_settings": "Đi đến cài đặt không gian làm việc",
+      "nav_project_work_items": "Đi đến mục công việc",
+      "open_project_cycle": "Mở một chu kỳ",
+      "nav_project_cycles": "Đi đến chu kỳ",
+      "open_project_module": "Mở một mô-đun",
+      "nav_project_modules": "Đi đến mô-đun",
+      "open_project_view": "Mở một chế độ xem dự án",
+      "nav_project_views": "Đi đến chế độ xem dự án",
+      "nav_project_pages": "Đi đến trang",
+      "nav_project_intake": "Đi đến thu thập",
+      "nav_project_archives": "Đi đến lưu trữ dự án",
+      "open_project_setting": "Mở một cài đặt dự án",
+      "nav_project_settings": "Đi đến cài đặt dự án",
+      "nav_workspace_active_cycle": "Đi đến tất cả chu kỳ đang hoạt động",
+      "nav_project_overview": "Đi đến tổng quan dự án"
+    },
+    "account_actions": {
+      "sign_out": "Đăng xuất",
+      "workspace_invites": "Lời mời không gian làm việc"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "Bật/tắt thanh bên ứng dụng",
+      "copy_current_page_url": "Sao chép URL trang hiện tại",
+      "copy_current_page_url_toast_success": "Đã sao chép URL trang hiện tại vào bảng tạm.",
+      "copy_current_page_url_toast_error": "Đã xảy ra lỗi khi sao chép URL trang hiện tại vào bảng tạm.",
+      "focus_top_nav_search": "Tập trung ô tìm kiếm"
+    },
+    "preferences_actions": {
+      "update_theme": "Thay đổi chủ đề giao diện",
+      "update_timezone": "Thay đổi múi giờ",
+      "update_start_of_week": "Thay đổi ngày đầu tuần",
+      "update_language": "Thay đổi ngôn ngữ giao diện",
+      "toast": {
+        "theme": {
+          "success": "Đã cập nhật chủ đề thành công.",
+          "error": "Không thể cập nhật chủ đề. Vui lòng thử lại."
+        },
+        "timezone": {
+          "success": "Đã cập nhật múi giờ thành công.",
+          "error": "Không thể cập nhật múi giờ. Vui lòng thử lại."
+        },
+        "generic": {
+          "success": "Đã cập nhật tùy chọn thành công.",
+          "error": "Không thể cập nhật tùy chọn. Vui lòng thử lại."
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "Mở phím tắt",
+      "open_plane_documentation": "Mở tài liệu Plane",
+      "join_forum": "Tham gia diễn đàn của chúng tôi",
+      "report_bug": "Báo lỗi",
+      "chat_with_us": "Trò chuyện với chúng tôi"
+    },
+    "page_placeholders": {
+      "default": "Nhập lệnh hoặc tìm kiếm",
+      "open_workspace": "Mở một không gian làm việc",
+      "open_project": "Mở một dự án",
+      "open_workspace_setting": "Mở một cài đặt không gian làm việc",
+      "open_project_cycle": "Mở một chu kỳ",
+      "open_project_module": "Mở một mô-đun",
+      "open_project_view": "Mở một chế độ xem dự án",
+      "open_project_setting": "Mở một cài đặt dự án",
+      "update_work_item_state": "Đổi trạng thái",
+      "update_work_item_priority": "Đổi mức độ ưu tiên",
+      "update_work_item_assignee": "Giao cho",
+      "update_work_item_estimate": "Đổi ước tính",
+      "update_work_item_cycle": "Thêm vào chu kỳ",
+      "update_work_item_module": "Thêm vào mô-đun",
+      "update_work_item_labels": "Thêm nhãn",
+      "update_module_member": "Đổi thành viên",
+      "update_module_status": "Đổi trạng thái",
+      "update_theme": "Thay đổi chủ đề",
+      "update_timezone": "Thay đổi múi giờ",
+      "update_start_of_week": "Thay đổi ngày đầu tuần",
+      "update_language": "Thay đổi ngôn ngữ"
+    },
+    "search_menu": {
+      "no_results": "Không tìm thấy kết quả",
+      "clear_search": "Xóa tìm kiếm",
+      "go_to_advanced_search": "Đi đến tìm kiếm nâng cao"
+    },
+    "footer": {
+      "workspace_level": "Cấp không gian làm việc"
+    },
+    "group_titles": {
+      "actions": "Hành động",
+      "contextual": "Theo ngữ cảnh",
+      "navigation": "Điều hướng",
+      "create": "Tạo",
+      "general": "Chung",
+      "settings": "Cài đặt",
+      "account": "Tài khoản",
+      "miscellaneous": "Khác",
+      "preferences": "Tùy chọn",
+      "help": "Trợ giúp"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/project-settings.json b/packages/i18n/src/locales/vi-VN/project-settings.json
new file mode 100644
index 0000000..33f3ab6
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "Nhập ID dự án",
+      "please_select_a_timezone": "Vui lòng chọn múi giờ",
+      "archive_project": {
+        "title": "Lưu trữ dự án",
+        "description": "Lưu trữ dự án sẽ hủy liệt kê dự án của bạn khỏi thanh điều hướng bên, nhưng bạn vẫn có thể truy cập nó từ trang dự án. Bạn có thể khôi phục hoặc xóa dự án bất cứ lúc nào.",
+        "button": "Lưu trữ dự án"
+      },
+      "delete_project": {
+        "title": "Xóa dự án",
+        "description": "Khi xóa dự án, tất cả dữ liệu và tài nguyên trong dự án đó sẽ bị xóa vĩnh viễn và không thể khôi phục.",
+        "button": "Xóa dự án của tôi"
+      },
+      "toast": {
+        "success": "Dự án đã được cập nhật thành công",
+        "error": "Không thể cập nhật dự án. Vui lòng thử lại."
+      }
+    },
+    "members": {
+      "label": "Thành viên",
+      "project_lead": "Người phụ trách dự án",
+      "project_lead_description": "Chọn trưởng dự án cho dự án.",
+      "default_assignee": "Người nhận mặc định",
+      "default_assignee_description": "Chọn người được giao mặc định cho dự án.",
+      "project_subscribers": "Người theo dõi dự án",
+      "project_subscribers_description": "Chọn các thành viên sẽ nhận thông báo cho dự án này.",
+      "guest_super_permissions": {
+        "title": "Cấp quyền cho người dùng khách xem tất cả mục công việc:",
+        "sub_heading": "Điều này sẽ cho phép khách xem tất cả mục công việc của dự án."
+      },
+      "invite_members": {
+        "title": "Mời thành viên",
+        "sub_heading": "Mời thành viên tham gia dự án của bạn.",
+        "select_co_worker": "Chọn đồng nghiệp"
+      }
+    },
+    "states": {
+      "heading": "Trạng thái",
+      "description": "Xác định và tùy chỉnh trạng thái quy trình làm việc để theo dõi tiến độ các mục công việc của bạn.",
+      "describe_this_state_for_your_members": "Mô tả trạng thái này cho thành viên của bạn.",
+      "empty_state": {
+        "title": "Không có trạng thái trong nhóm {groupKey}",
+        "description": "Vui lòng tạo một trạng thái mới"
+      }
+    },
+    "labels": {
+      "heading": "Nhãn",
+      "description": "Tạo nhãn tùy chỉnh để phân loại và tổ chức các mục công việc của bạn",
+      "label_title": "Tiêu đề nhãn",
+      "label_title_is_required": "Tiêu đề nhãn là bắt buộc",
+      "label_max_char": "Tên nhãn không nên vượt quá 255 ký tự",
+      "toast": {
+        "error": "Đã xảy ra lỗi khi cập nhật nhãn"
+      }
+    },
+    "estimates": {
+      "heading": "Ước tính",
+      "description": "Thiết lập hệ thống ước tính để theo dõi và truyền đạt nỗ lực cần thiết cho mỗi mục công việc.",
+      "label": "Ước tính",
+      "title": "Bật ước tính cho dự án của tôi",
+      "enable_description": "Chúng giúp bạn truyền đạt độ phức tạp và khối lượng công việc của nhóm.",
+      "no_estimate": "Không có ước tính",
+      "new": "Hệ thống ước tính mới",
+      "create": {
+        "custom": "Tùy chỉnh",
+        "start_from_scratch": "Bắt đầu từ đầu",
+        "choose_template": "Chọn mẫu",
+        "choose_estimate_system": "Chọn hệ thống ước tính",
+        "enter_estimate_point": "Nhập điểm ước tính",
+        "step": "Bước {step} của {total}",
+        "label": "Tạo ước tính"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "Đã tạo điểm ước tính",
+            "message": "Điểm ước tính đã được tạo thành công"
+          },
+          "error": {
+            "title": "Không thể tạo điểm ước tính",
+            "message": "Không thể tạo điểm ước tính mới, vui lòng thử lại"
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "Đã cập nhật ước tính",
+            "message": "Điểm ước tính đã được cập nhật trong dự án của bạn"
+          },
+          "error": {
+            "title": "Không thể cập nhật ước tính",
+            "message": "Không thể cập nhật ước tính, vui lòng thử lại"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "Thành công!",
+            "message": "Đã bật ước tính"
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "Thành công!",
+            "message": "Đã tắt ước tính"
+          },
+          "error": {
+            "title": "Lỗi!",
+            "message": "Không thể tắt ước tính. Vui lòng thử lại"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "Đã sắp xếp lại ước tính",
+            "message": "Ước tính đã được sắp xếp lại trong dự án của bạn."
+          },
+          "error": {
+            "title": "Sắp xếp lại ước tính thất bại",
+            "message": "Chúng tôi không thể sắp xếp lại ước tính, vui lòng thử lại"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "Đã tạo hệ thống ước tính",
+            "message": "Đã tạo và bật thành công"
+          },
+          "error": {
+            "title": "Lỗi",
+            "message": "Đã xảy ra lỗi"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "Điểm ước tính phải lớn hơn 0",
+        "unable_to_process": "Không thể xử lý yêu cầu của bạn, vui lòng thử lại",
+        "numeric": "Điểm ước tính phải là số",
+        "character": "Điểm ước tính phải là ký tự",
+        "empty": "Giá trị ước tính không được để trống",
+        "already_exists": "Giá trị ước tính này đã tồn tại",
+        "unsaved_changes": "Bạn có thay đổi chưa lưu. Vui lòng lưu trước khi nhấn 'xong'",
+        "remove_empty": "Ước tính không thể để trống. Hãy nhập giá trị vào mỗi trường hoặc xóa những trường bạn không có giá trị.",
+        "fill": "Vui lòng điền vào trường ước tính này",
+        "repeat": "Giá trị ước tính không thể lặp lại"
+      },
+      "systems": {
+        "points": {
+          "label": "Điểm",
+          "fibonacci": "Fibonacci",
+          "linear": "Tuyến tính",
+          "squares": "Bình phương",
+          "custom": "Tùy chỉnh"
+        },
+        "categories": {
+          "label": "Danh mục",
+          "t_shirt_sizes": "Kích cỡ áo",
+          "easy_to_hard": "Dễ đến khó",
+          "custom": "Tùy chỉnh"
+        },
+        "time": {
+          "label": "Thời gian",
+          "hours": "Giờ"
+        }
+      },
+      "edit": {
+        "title": "Chỉnh sửa hệ thống ước tính",
+        "add_or_update": {
+          "title": "Thêm, cập nhật hoặc xóa ước tính",
+          "description": "Quản lý hệ thống hiện tại bằng cách thêm, cập nhật hoặc xóa điểm hoặc danh mục."
+        },
+        "switch": {
+          "title": "Thay đổi loại ước tính",
+          "description": "Chuyển đổi hệ thống điểm của bạn thành hệ thống danh mục và ngược lại."
+        }
+      },
+      "switch": "Chuyển đổi hệ thống ước tính",
+      "current": "Hệ thống ước tính hiện tại",
+      "select": "Chọn hệ thống ước tính"
+    },
+    "automations": {
+      "label": "Tự động hóa",
+      "heading": "Tự động hóa",
+      "description": "Cấu hình các hành động tự động để tinh giản quy trình quản lý dự án và giảm công việc thủ công.",
+      "auto-archive": {
+        "title": "Tự động lưu trữ mục công việc đã đóng",
+        "description": "Plane sẽ tự động lưu trữ các mục công việc đã hoàn thành hoặc đã hủy.",
+        "duration": "Tự động lưu trữ đã đóng"
+      },
+      "auto-close": {
+        "title": "Tự động đóng mục công việc",
+        "description": "Plane sẽ tự động đóng các mục công việc chưa hoàn thành hoặc hủy.",
+        "duration": "Tự động đóng không hoạt động",
+        "auto_close_status": "Trạng thái tự động đóng"
+      },
+      "auto-remind": {
+        "title": "Nhắc nhở tự động",
+        "description": "Plane sẽ tự động gửi nhắc nhở qua email và thông báo trong ứng dụng để giữ cho nhóm của bạn trên đường đến các hạn chót.",
+        "duration": "Gửi nhắc nhở trước"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "Chưa có nhãn",
+        "description": "Tạo nhãn để giúp tổ chức và lọc mục công việc trong dự án của bạn."
+      },
+      "estimates": {
+        "title": "Chưa có hệ thống ước tính",
+        "description": "Tạo một tập hợp ước tính để truyền đạt khối lượng công việc cho mỗi mục công việc.",
+        "primary_button": "Thêm hệ thống ước tính"
+      },
+      "integrations": {
+        "title": "Không có tích hợp nào được cấu hình",
+        "description": "Cấu hình GitHub và các tích hợp khác để đồng bộ hóa các mục công việc dự án của bạn."
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "Bật quy trình làm việc",
+        "description": "Thiết lập quy trình làm việc để kiểm soát việc di chuyển mục công việc",
+        "no_states_tooltip": "Chưa có trạng thái nào được thêm vào quy trình làm việc.",
+        "no_work_item_types_tooltip": "Chưa có loại mục công việc nào được thêm vào quy trình làm việc.",
+        "no_states_or_work_item_types_tooltip": "Chưa có trạng thái hoặc loại mục công việc nào được thêm vào quy trình làm việc.",
+        "toast": {
+          "loading": {
+            "enabling": "Đang bật quy trình làm việc",
+            "disabling": "Đang tắt quy trình làm việc"
+          },
+          "success": {
+            "title": "Thành công!",
+            "message": "Đã bật quy trình làm việc thành công."
+          },
+          "error": {
+            "title": "Lỗi!",
+            "message": "Không thể bật quy trình làm việc. Vui lòng thử lại."
+          }
+        }
+      },
+      "heading": "Quy trình làm việc",
+      "description": "Tự động hóa việc chuyển đổi mục công việc và đặt quy tắc để kiểm soát cách các nhiệm vụ di chuyển qua luồng dự án của bạn.",
+      "add_button": "Thêm quy trình làm việc mới",
+      "search": "Tìm kiếm quy trình làm việc",
+      "detail": {
+        "define": "Xác định quy trình làm việc",
+        "add_states": "Thêm trạng thái",
+        "unmapped_states": {
+          "title": "Đã phát hiện trạng thái chưa ánh xạ",
+          "description": "Một số mục công việc của các loại đã chọn hiện đang ở trạng thái không tồn tại trong quy trình làm việc này.",
+          "note": "Nếu bạn bật quy trình làm việc này, các mục này sẽ tự động chuyển sang trạng thái ban đầu của quy trình làm việc.",
+          "label": "Trạng thái bị thiếu",
+          "tooltip": "Một số mục công việc đang ở trạng thái không được ánh xạ đến quy trình làm việc này. Mở quy trình làm việc để xem xét."
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "Tất cả trạng thái đang được sử dụng",
+          "description": "Tất cả trạng thái đã xác định cho dự án này đã có trong quy trình làm việc hiện tại của bạn."
+        }
+      },
+      "default_footer": {
+        "fallback_message": "Quy trình làm việc này áp dụng cho bất kỳ loại mục công việc nào không được gán cho một quy trình làm việc."
+      },
+      "create": {
+        "heading": "Tạo quy trình làm việc mới",
+        "name": {
+          "placeholder": "Thêm tên duy nhất",
+          "validation": {
+            "max_length": "Tên phải ít hơn 255 ký tự",
+            "required": "Tên là bắt buộc",
+            "invalid": "Tên chỉ có thể chứa chữ cái, số, khoảng trắng, dấu gạch nối và dấu nháy đơn"
+          }
+        },
+        "description": {
+          "placeholder": "Thêm mô tả ngắn",
+          "validation": {
+            "invalid": "Mô tả chỉ có thể chứa chữ cái, số, khoảng trắng, dấu gạch nối và dấu nháy đơn"
+          }
+        },
+        "work_item_type": {
+          "label": "Loại mục công việc"
+        },
+        "success": {
+          "title": "Thành công!",
+          "message": "Đã tạo quy trình làm việc thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Không thể tạo quy trình làm việc. Vui lòng thử lại."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Thành công!",
+          "message": "Đã cập nhật quy trình làm việc thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Không thể cập nhật quy trình làm việc. Vui lòng thử lại."
+        }
+      },
+      "delete": {
+        "loading": "Đang xóa quy trình làm việc",
+        "success": {
+          "title": "Thành công!",
+          "message": "Đã xóa quy trình làm việc thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Không thể xóa quy trình làm việc. Vui lòng thử lại."
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "Thành công!",
+          "message": "Đã thêm trạng thái thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Không thể thêm trạng thái. Vui lòng thử lại."
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "Loại mục công việc",
+      "description": "Tạo và tùy chỉnh các loại mục công việc khác nhau với các thuộc tính riêng"
+    },
+    "features": {
+      "cycles": {
+        "title": "Chu kỳ",
+        "short_title": "Chu kỳ",
+        "description": "Lên lịch công việc trong các khoảng thời gian linh hoạt thích ứng với nhịp điệu và tốc độ độc đáo của dự án này.",
+        "toggle_title": "Bật chu kỳ",
+        "toggle_description": "Lập kế hoạch công việc trong khung thời gian tập trung."
+      },
+      "modules": {
+        "title": "Mô-đun",
+        "short_title": "Mô-đun",
+        "description": "Tổ chức công việc thành các dự án phụ với người dẫn đầu và người được phân công chuyên trách.",
+        "toggle_title": "Bật mô-đun",
+        "toggle_description": "Thành viên dự án sẽ có thể tạo và chỉnh sửa mô-đun."
+      },
+      "views": {
+        "title": "Chế độ xem",
+        "short_title": "Chế độ xem",
+        "description": "Lưu các tùy chọn sắp xếp, bộ lọc và hiển thị tùy chỉnh hoặc chia sẻ chúng với nhóm của bạn.",
+        "toggle_title": "Bật chế độ xem",
+        "toggle_description": "Thành viên dự án sẽ có thể tạo và chỉnh sửa chế độ xem."
+      },
+      "pages": {
+        "title": "Trang",
+        "short_title": "Trang",
+        "description": "Tạo và chỉnh sửa nội dung tự do: ghi chú, tài liệu, bất cứ thứ gì.",
+        "toggle_title": "Bật trang",
+        "toggle_description": "Thành viên dự án sẽ có thể tạo và chỉnh sửa trang."
+      },
+      "intake": {
+        "intake_responsibility": "Trách nhiệm tiếp nhận",
+        "intake_sources": "Nguồn tiếp nhận",
+        "title": "Tiếp nhận",
+        "short_title": "Tiếp nhận",
+        "description": "Cho phép những người không phải thành viên chia sẻ lỗi, phản hồi và đề xuất; mà không làm gián đoạn quy trình làm việc của bạn.",
+        "toggle_title": "Bật tiếp nhận",
+        "toggle_description": "Cho phép thành viên dự án tạo yêu cầu tiếp nhận trong ứng dụng.",
+        "toggle_tooltip_on": "Yêu cầu Quản trị viên Dự án bật tính năng này.",
+        "toggle_tooltip_off": "Yêu cầu Quản trị viên Dự án tắt tính năng này.",
+        "notify_assignee": {
+          "title": "Thông báo người được chỉ định",
+          "description": "Đối với yêu cầu tiếp nhận mới, người được chỉ định mặc định sẽ được cảnh báo qua thông báo"
+        },
+        "in_app": {
+          "title": "Trong ứng dụng",
+          "description": "Nhận mục công việc mới từ Thành viên và Khách trong không gian làm việc mà không ảnh hưởng đến mục hiện có."
+        },
+        "email": {
+          "title": "Email",
+          "description": "Thu thập mục công việc mới từ bất kỳ ai gửi email đến địa chỉ email Plane.",
+          "fieldName": "ID email"
+        },
+        "form": {
+          "title": "Biểu mẫu",
+          "description": "Cho phép người ngoài không gian làm việc tạo mục công việc mới tiềm năng cho bạn qua biểu mẫu chuyên dụng và an toàn.",
+          "fieldName": "URL biểu mẫu mặc định",
+          "create_forms": "Tạo biểu mẫu bằng loại mục công việc",
+          "manage_forms": "Quản lý biểu mẫu",
+          "manage_forms_tooltip": "Yêu cầu Quản trị viên Không gian làm việc quản lý.",
+          "create_form": "Tạo biểu mẫu",
+          "edit_form": "Chỉnh sửa chi tiết biểu mẫu",
+          "form_title": "Tiêu đề biểu mẫu",
+          "form_title_required": "Tiêu đề biểu mẫu là bắt buộc",
+          "work_item_type": "Loại mục công việc",
+          "remove_property": "Xóa thuộc tính",
+          "select_properties": "Chọn thuộc tính",
+          "search_placeholder": "Tìm thuộc tính",
+          "toasts": {
+            "success_create": "Đã tạo biểu mẫu tiếp nhận thành công",
+            "success_update": "Đã cập nhật biểu mẫu tiếp nhận thành công",
+            "error_create": "Không thể tạo biểu mẫu tiếp nhận",
+            "error_update": "Không thể cập nhật biểu mẫu tiếp nhận"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "Đang đặt người được chỉ định...",
+            "success": {
+              "title": "Thành công!",
+              "message": "Người được chỉ định đã được đặt thành công."
+            },
+            "error": {
+              "title": "Lỗi!",
+              "message": "Đã xảy ra lỗi khi đặt người được chỉ định. Vui lòng thử lại."
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "Theo dõi thời gian",
+        "short_title": "Theo dõi thời gian",
+        "description": "Ghi lại thời gian dành cho các mục công việc và dự án.",
+        "toggle_title": "Bật theo dõi thời gian",
+        "toggle_description": "Thành viên dự án sẽ có thể ghi lại thời gian làm việc."
+      },
+      "milestones": {
+        "title": "Cột mốc",
+        "short_title": "Cột mốc",
+        "description": "Cột mốc cung cấp một lớp để điều chỉnh các mục công việc theo các ngày hoàn thành chung.",
+        "toggle_title": "Bật cột mốc",
+        "toggle_description": "Tổ chức các mục công việc theo thời hạn cột mốc."
+      },
+      "toasts": {
+        "loading": "Đang cập nhật tính năng dự án...",
+        "success": "Đã cập nhật tính năng dự án thành công.",
+        "error": "Đã xảy ra lỗi khi cập nhật tính năng dự án. Vui lòng thử lại."
+      }
+    },
+    "project_updates": {
+      "heading": "Cập nhật dự án",
+      "description": "Theo dõi và giám sát tiến độ được hợp nhất cho dự án này"
+    },
+    "templates": {
+      "heading": "Mẫu",
+      "description": "Tiết kiệm 80% thời gian dành cho việc tạo dự án, mục công việc và trang khi bạn sử dụng mẫu."
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "Tự động lên lịch chu kỳ",
+        "description": "Duy trì chu kỳ hoạt động mà không cần thiết lập thủ công.",
+        "tooltip": "Tự động tạo chu kỳ mới dựa trên lịch trình bạn chọn.",
+        "edit_button": "Chỉnh sửa",
+        "form": {
+          "cycle_title": {
+            "label": "Tiêu đề chu kỳ",
+            "placeholder": "Tiêu đề",
+            "tooltip": "Tiêu đề sẽ được thêm số cho các chu kỳ tiếp theo. Ví dụ: Thiết kế - 1/2/3",
+            "validation": {
+              "required": "Tiêu đề chu kỳ là bắt buộc",
+              "max_length": "Tiêu đề không được vượt quá 255 ký tự"
+            }
+          },
+          "cycle_duration": {
+            "label": "Thời lượng chu kỳ",
+            "unit": "Tuần",
+            "validation": {
+              "required": "Thời lượng chu kỳ là bắt buộc",
+              "min": "Thời lượng chu kỳ phải ít nhất 1 tuần",
+              "max": "Thời lượng chu kỳ không được vượt quá 30 tuần",
+              "positive": "Thời lượng chu kỳ phải là số dương"
+            }
+          },
+          "cooldown_period": {
+            "label": "Thời gian nghỉ",
+            "unit": "ngày",
+            "tooltip": "Khoảng nghỉ giữa các chu kỳ trước khi bắt đầu chu kỳ tiếp theo.",
+            "validation": {
+              "required": "Thời gian nghỉ là bắt buộc",
+              "negative": "Thời gian nghỉ không thể là số âm"
+            }
+          },
+          "start_date": {
+            "label": "Ngày bắt đầu chu kỳ",
+            "validation": {
+              "required": "Ngày bắt đầu là bắt buộc",
+              "past": "Ngày bắt đầu không thể ở quá khứ"
+            }
+          },
+          "number_of_cycles": {
+            "label": "Số chu kỳ tương lai",
+            "validation": {
+              "required": "Số chu kỳ là bắt buộc",
+              "min": "Cần ít nhất 1 chu kỳ",
+              "max": "Không thể lên lịch nhiều hơn 3 chu kỳ"
+            }
+          },
+          "auto_rollover": {
+            "label": "Tự động chuyển các mục công việc",
+            "tooltip": "Vào ngày hoàn thành chu kỳ, chuyển tất cả các mục công việc chưa hoàn thành sang chu kỳ tiếp theo."
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "Đang bật tự động lên lịch chu kỳ",
+            "loading_disable": "Đang tắt tự động lên lịch chu kỳ",
+            "success": {
+              "title": "Thành công!",
+              "message": "Đã chuyển đổi tự động lên lịch chu kỳ thành công."
+            },
+            "error": {
+              "title": "Lỗi!",
+              "message": "Không thể chuyển đổi tự động lên lịch chu kỳ."
+            }
+          },
+          "save": {
+            "loading": "Đang lưu cấu hình tự động lên lịch chu kỳ",
+            "success": {
+              "title": "Thành công!",
+              "message_create": "Đã lưu cấu hình tự động lên lịch chu kỳ thành công.",
+              "message_update": "Đã cập nhật cấu hình tự động lên lịch chu kỳ thành công."
+            },
+            "error": {
+              "title": "Lỗi!",
+              "message_create": "Không thể lưu cấu hình tự động lên lịch chu kỳ.",
+              "message_update": "Không thể cập nhật cấu hình tự động lên lịch chu kỳ."
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/project.json b/packages/i18n/src/locales/vi-VN/project.json
new file mode 100644
index 0000000..5a0388c
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "Thời gian tạo",
+      "updated_at": "Thời gian cập nhật",
+      "name": "Tên"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "Thêm chu kỳ",
+    "more_details": "Thêm chi tiết",
+    "cycle": "Chu kỳ",
+    "update_cycle": "Cập nhật chu kỳ",
+    "create_cycle": "Tạo chu kỳ",
+    "no_matching_cycles": "Không có chu kỳ phù hợp",
+    "remove_filters_to_see_all_cycles": "Xóa bộ lọc để xem tất cả chu kỳ",
+    "remove_search_criteria_to_see_all_cycles": "Xóa tiêu chí tìm kiếm để xem tất cả chu kỳ",
+    "only_completed_cycles_can_be_archived": "Chỉ có thể lưu trữ chu kỳ đã hoàn thành",
+    "start_date": "Ngày bắt đầu",
+    "end_date": "Ngày kết thúc",
+    "in_your_timezone": "Trong múi giờ của bạn",
+    "transfer_work_items": "Chuyển {count} mục công việc",
+    "transfer": {
+      "no_cycles_available": "Không có chu kỳ nào khác để chuyển mục công việc."
+    },
+    "date_range": "Khoảng thời gian",
+    "add_date": "Thêm ngày",
+    "active_cycle": {
+      "label": "Chu kỳ hoạt động",
+      "progress": "Tiến độ",
+      "chart": "Biểu đồ burndown",
+      "priority_issue": "Mục công việc ưu tiên",
+      "assignees": "Người được giao",
+      "issue_burndown": "Burndown mục công việc",
+      "ideal": "Lý tưởng",
+      "current": "Hiện tại",
+      "labels": "Nhãn",
+      "trailing": "Chậm tiến độ",
+      "leading": "Vượt tiến độ"
+    },
+    "upcoming_cycle": {
+      "label": "Chu kỳ sắp tới"
+    },
+    "completed_cycle": {
+      "label": "Chu kỳ đã hoàn thành"
+    },
+    "status": {
+      "days_left": "Số ngày còn lại",
+      "completed": "Đã hoàn thành",
+      "yet_to_start": "Chưa bắt đầu",
+      "in_progress": "Đang tiến hành",
+      "draft": "Bản nháp"
+    },
+    "action": {
+      "restore": {
+        "title": "Khôi phục chu kỳ",
+        "success": {
+          "title": "Đã khôi phục chu kỳ",
+          "description": "Chu kỳ đã được khôi phục."
+        },
+        "failed": {
+          "title": "Khôi phục chu kỳ thất bại",
+          "description": "Không thể khôi phục chu kỳ. Vui lòng thử lại."
+        }
+      },
+      "favorite": {
+        "loading": "Đang thêm chu kỳ vào mục yêu thích",
+        "success": {
+          "description": "Chu kỳ đã được thêm vào mục yêu thích.",
+          "title": "Thành công!"
+        },
+        "failed": {
+          "description": "Không thể thêm chu kỳ vào mục yêu thích. Vui lòng thử lại.",
+          "title": "Lỗi!"
+        }
+      },
+      "unfavorite": {
+        "loading": "Đang xóa chu kỳ khỏi mục yêu thích",
+        "success": {
+          "description": "Chu kỳ đã được xóa khỏi mục yêu thích.",
+          "title": "Thành công!"
+        },
+        "failed": {
+          "description": "Không thể xóa chu kỳ khỏi mục yêu thích. Vui lòng thử lại.",
+          "title": "Lỗi!"
+        }
+      },
+      "update": {
+        "loading": "Đang cập nhật chu kỳ",
+        "success": {
+          "description": "Chu kỳ đã được cập nhật thành công.",
+          "title": "Thành công!"
+        },
+        "failed": {
+          "description": "Đã xảy ra lỗi khi cập nhật chu kỳ. Vui lòng thử lại.",
+          "title": "Lỗi!"
+        },
+        "error": {
+          "already_exists": "Đã tồn tại chu kỳ trong khoảng thời gian đã cho, nếu bạn muốn tạo chu kỳ nháp, bạn có thể làm vậy bằng cách xóa cả hai ngày."
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "Nhóm và đặt khung thời gian cho công việc của bạn trong chu kỳ.",
+        "description": "Chia nhỏ công việc theo khung thời gian, đặt ngày từ thời hạn dự án và đạt được tiến độ cụ thể với tư cách là một nhóm.",
+        "primary_button": {
+          "text": "Thiết lập chu kỳ đầu tiên của bạn",
+          "comic": {
+            "title": "Chu kỳ là khung thời gian lặp lại.",
+            "description": "Sprint, iteration hoặc bất kỳ thuật ngữ nào khác bạn sử dụng để theo dõi công việc hàng tuần hoặc hai tuần một lần đều là một chu kỳ."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Chưa thêm mục công việc vào chu kỳ",
+        "description": "Thêm hoặc tạo mục công việc bạn muốn đặt khung thời gian và giao trong chu kỳ này",
+        "primary_button": {
+          "text": "Tạo mục công việc mới"
+        },
+        "secondary_button": {
+          "text": "Thêm mục công việc hiện có"
+        }
+      },
+      "completed_no_issues": {
+        "title": "Không có mục công việc trong chu kỳ",
+        "description": "Không có mục công việc trong chu kỳ. Mục công việc đã được chuyển hoặc ẩn. Để xem mục công việc đã ẩn (nếu có), vui lòng cập nhật thuộc tính hiển thị của bạn tương ứng."
+      },
+      "active": {
+        "title": "Không có chu kỳ hoạt động",
+        "description": "Chu kỳ hoạt động bao gồm bất kỳ khoảng thời gian nào có ngày hôm nay trong phạm vi của nó. Tìm tiến độ và chi tiết về chu kỳ hoạt động ở đây."
+      },
+      "archived": {
+        "title": "Chưa có chu kỳ đã lưu trữ",
+        "description": "Để tổ chức dự án của bạn, hãy lưu trữ chu kỳ đã hoàn thành. Bạn có thể tìm thấy chúng ở đây sau khi lưu trữ."
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "Lưu chế độ xem đã lọc cho dự án của bạn. Tạo bao nhiêu tùy ý",
+        "description": "Chế độ xem là bộ bộ lọc đã lưu mà bạn thường xuyên sử dụng hoặc muốn truy cập dễ dàng. Tất cả đồng nghiệp trong dự án có thể thấy chế độ xem của mọi người và chọn cái phù hợp nhất với nhu cầu của họ.",
+        "primary_button": {
+          "text": "Tạo chế độ xem đầu tiên của bạn",
+          "comic": {
+            "title": "Chế độ xem hoạt động dựa trên thuộc tính mục công việc.",
+            "description": "Bạn có thể tạo chế độ xem ở đây sử dụng bất kỳ số lượng thuộc tính nào làm bộ lọc theo nhu cầu của bạn."
+          }
+        },
+        "filter": {
+          "title": "Không có chế độ xem phù hợp",
+          "description": "Không có chế độ xem phù hợp với tiêu chí tìm kiếm.\n Tạo chế độ xem mới."
+        }
+      },
+      "no_archived_issues": {
+        "title": "Chưa có mục công việc đã lưu trữ",
+        "description": "Thủ công hoặc thông qua tự động hóa, bạn có thể lưu trữ mục công việc đã hoàn thành hoặc đã hủy. Tìm chúng ở đây sau khi lưu trữ.",
+        "primary_button": {
+          "text": "Thiết lập tự động hóa"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Không tìm thấy mục công việc nào phù hợp với bộ lọc đã áp dụng",
+        "secondary_button": {
+          "text": "Xóa tất cả bộ lọc"
+        }
+      },
+      "public": {
+        "title": "Chưa có trang công khai",
+        "description": "Xem các trang được chia sẻ với mọi người trong dự án của bạn tại đây.",
+        "primary_button": {
+          "text": "Tạo trang đầu tiên của bạn"
+        }
+      },
+      "archived": {
+        "title": "Chưa có trang đã lưu trữ",
+        "description": "Lưu trữ các trang không còn trong tầm nhìn của bạn. Truy cập chúng ở đây khi cần."
+      },
+      "shared": {
+        "title": "Chưa có trang được chia sẻ",
+        "description": "Các trang mà người khác đã chia sẻ với bạn sẽ xuất hiện ở đây."
+      }
+    },
+    "delete_view": {
+      "title": "Bạn có chắc chắn muốn xóa chế độ xem này không?",
+      "content": "Nếu bạn xác nhận, tất cả các tùy chọn sắp xếp, lọc và hiển thị + bố cục mà bạn đã chọn cho chế độ xem này sẽ bị xóa vĩnh viễn mà không có cách nào khôi phục."
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "Tạo mục công việc và giao nó cho ai đó, thậm chí là chính bạn",
+        "description": "Xem mục công việc như công việc, nhiệm vụ hoặc công việc cần hoàn thành. Mục công việc và các mục công việc con của chúng thường dựa trên thời gian, được giao cho thành viên nhóm để thực hiện. Nhóm của bạn thúc đẩy dự án đạt được mục tiêu bằng cách tạo, giao và hoàn thành mục công việc.",
+        "primary_button": {
+          "text": "Tạo mục công việc đầu tiên của bạn",
+          "comic": {
+            "title": "Mục công việc là khối xây dựng cơ bản trong Plane.",
+            "description": "Thiết kế lại giao diện Plane, định vị lại thương hiệu công ty hoặc ra mắt hệ thống phun nhiên liệu mới đều là ví dụ về mục công việc có thể chứa các mục công việc con."
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "Chưa có mục công việc đã lưu trữ",
+        "description": "Thông qua phương thức thủ công hoặc tự động, bạn có thể lưu trữ mục công việc đã hoàn thành hoặc đã hủy. Bạn có thể tìm thấy chúng ở đây sau khi lưu trữ.",
+        "primary_button": {
+          "text": "Thiết lập tự động hóa"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "Không tìm thấy mục công việc phù hợp với bộ lọc",
+        "secondary_button": {
+          "text": "Xóa tất cả bộ lọc"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "Thêm mô-đun",
+    "update_module": "Cập nhật mô-đun",
+    "create_module": "Tạo mô-đun",
+    "archive_module": "Lưu trữ mô-đun",
+    "restore_module": "Khôi phục mô-đun",
+    "delete_module": "Xóa mô-đun",
+    "empty_state": {
+      "general": {
+        "title": "Ánh xạ cột mốc dự án vào mô-đun, dễ dàng theo dõi công việc tổng hợp.",
+        "description": "Một nhóm mục công việc thuộc cấp cha trong cấu trúc logic tạo thành một mô-đun. Xem nó như một cách theo dõi công việc theo cột mốc dự án. Chúng có chu kỳ riêng và thời hạn cùng với các tính năng phân tích giúp bạn hiểu bạn đang ở đâu so với cột mốc.",
+        "primary_button": {
+          "text": "Xây dựng mô-đun đầu tiên của bạn",
+          "comic": {
+            "title": "Mô-đun giúp nhóm công việc theo cấu trúc phân cấp.",
+            "description": "Mô-đun giỏ hàng, mô-đun khung gầm và mô-đun kho đều là ví dụ tốt về nhóm như vậy."
+          }
+        }
+      },
+      "no_issues": {
+        "title": "Không có mục công việc trong mô-đun",
+        "description": "Tạo hoặc thêm mục công việc bạn muốn hoàn thành như một phần của mô-đun này",
+        "primary_button": {
+          "text": "Tạo mục công việc mới"
+        },
+        "secondary_button": {
+          "text": "Thêm mục công việc hiện có"
+        }
+      },
+      "archived": {
+        "title": "Chưa có mô-đun đã lưu trữ",
+        "description": "Để tổ chức dự án của bạn, hãy lưu trữ mô-đun đã hoàn thành hoặc đã hủy. Bạn có thể tìm thấy chúng ở đây sau khi lưu trữ."
+      },
+      "sidebar": {
+        "in_active": "Mô-đun này chưa được kích hoạt.",
+        "invalid_date": "Ngày không hợp lệ. Vui lòng nhập ngày hợp lệ."
+      }
+    },
+    "quick_actions": {
+      "archive_module": "Lưu trữ mô-đun",
+      "archive_module_description": "Chỉ mô-đun đã hoàn thành hoặc đã hủy\ncó thể được lưu trữ.",
+      "delete_module": "Xóa mô-đun"
+    },
+    "toast": {
+      "copy": {
+        "success": "Đã sao chép liên kết mô-đun vào bảng tạm"
+      },
+      "delete": {
+        "success": "Đã xóa mô-đun thành công",
+        "error": "Xóa mô-đun thất bại"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "Viết ghi chú, tài liệu hoặc cơ sở kiến thức đầy đủ. Để trợ lý AI Galileo của Plane giúp bạn bắt đầu",
+        "description": "Trang là không gian ghi lại suy nghĩ trong Plane. Ghi lại các ghi chú cuộc họp, định dạng dễ dàng, nhúng mục công việc, sử dụng thư viện thành phần để bố cục và lưu tất cả trong ngữ cảnh dự án. Để hoàn thành nhanh bất kỳ tài liệu nào, bạn có thể gọi AI Galileo của Plane thông qua phím tắt hoặc nhấp nút.",
+        "primary_button": {
+          "text": "Tạo trang đầu tiên của bạn"
+        }
+      },
+      "private": {
+        "title": "Chưa có trang riêng tư",
+        "description": "Lưu ý riêng tư của bạn ở đây. Khi sẵn sàng chia sẻ, nhóm của bạn chỉ cách một cú nhấp chuột.",
+        "primary_button": {
+          "text": "Tạo trang đầu tiên của bạn"
+        }
+      },
+      "public": {
+        "title": "Chưa có trang công khai",
+        "description": "Xem các trang được chia sẻ với mọi người trong dự án tại đây.",
+        "primary_button": {
+          "text": "Tạo trang đầu tiên của bạn"
+        }
+      },
+      "archived": {
+        "title": "Chưa có trang đã lưu trữ",
+        "description": "Lưu trữ các trang không còn trong tầm nhìn của bạn. Truy cập chúng ở đây khi cần."
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "Dự án chưa bật tính năng thu thập.",
+        "description": "Tính năng thu thập giúp bạn quản lý các yêu cầu đến của dự án và thêm chúng như mục công việc trong quy trình làm việc. Bật tính năng thu thập từ cài đặt dự án để quản lý yêu cầu.",
+        "primary_button": {
+          "text": "Quản lý tính năng"
+        }
+      },
+      "cycle": {
+        "title": "Dự án này chưa bật tính năng chu kỳ.",
+        "description": "Chia nhỏ công việc theo khung thời gian, đặt ngày từ thời hạn dự án, và đạt được tiến độ cụ thể với tư cách là một nhóm. Bật tính năng chu kỳ cho dự án của bạn để bắt đầu sử dụng.",
+        "primary_button": {
+          "text": "Quản lý tính năng"
+        }
+      },
+      "module": {
+        "title": "Dự án chưa bật tính năng mô-đun.",
+        "description": "Mô-đun là khối xây dựng cơ bản của dự án. Bật mô-đun từ cài đặt dự án để bắt đầu sử dụng chúng.",
+        "primary_button": {
+          "text": "Quản lý tính năng"
+        }
+      },
+      "page": {
+        "title": "Dự án chưa bật tính năng trang.",
+        "description": "Trang là khối xây dựng cơ bản của dự án. Bật trang từ cài đặt dự án để bắt đầu sử dụng chúng.",
+        "primary_button": {
+          "text": "Quản lý tính năng"
+        }
+      },
+      "view": {
+        "title": "Dự án chưa bật tính năng chế độ xem.",
+        "description": "Chế độ xem là khối xây dựng cơ bản của dự án. Bật chế độ xem từ cài đặt dự án để bắt đầu sử dụng chúng.",
+        "primary_button": {
+          "text": "Quản lý tính năng"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "Tồn đọng",
+      "planned": "Đã lên kế hoạch",
+      "in_progress": "Đang tiến hành",
+      "paused": "Đã tạm dừng",
+      "completed": "Đã hoàn thành",
+      "cancelled": "Đã hủy"
+    },
+    "layout": {
+      "list": "Bố cục danh sách",
+      "board": "Bố cục bảng",
+      "timeline": "Bố cục dòng thời gian"
+    },
+    "order_by": {
+      "name": "Tên",
+      "progress": "Tiến độ",
+      "issues": "Số lượng mục công việc",
+      "due_date": "Ngày hết hạn",
+      "created_at": "Ngày tạo",
+      "manual": "Thủ công"
+    }
+  },
+  "project_members": {
+    "full_name": "Họ và tên",
+    "display_name": "Tên hiển thị",
+    "email": "Email",
+    "joining_date": "Ngày tham gia",
+    "role": "Vai trò"
+  },
+  "project": {
+    "members_import": {
+      "title": "Nhập thành viên từ CSV",
+      "description": "Tải lên CSV với các cột: Email và Vai trò (5=Khách, 15=Thành viên, 20=Quản trị viên). Người dùng phải đã là thành viên không gian làm việc.",
+      "download_sample": "Tải xuống CSV mẫu",
+      "dropzone": {
+        "active": "Thả tệp CSV vào đây",
+        "inactive": "Kéo & thả hoặc nhấp để tải lên",
+        "file_type": "Chỉ hỗ trợ tệp .csv"
+      },
+      "buttons": {
+        "cancel": "Hủy",
+        "import": "Nhập",
+        "try_again": "Thử lại",
+        "close": "Đóng",
+        "done": "Hoàn tất"
+      },
+      "progress": {
+        "uploading": "Đang tải lên...",
+        "importing": "Đang nhập..."
+      },
+      "summary": {
+        "title": {
+          "complete": "Nhập hoàn tất"
+        },
+        "message": {
+          "success": "Đã nhập thành công {count} thành viên vào dự án.",
+          "no_imports": "Không có thành viên mới nào được nhập từ tệp CSV."
+        },
+        "stats": {
+          "added": "Đã thêm",
+          "reactivated": "Đã kích hoạt lại",
+          "already_members": "Đã là thành viên",
+          "skipped": "Đã bỏ qua"
+        },
+        "download_errors": "Tải xuống chi tiết đã bỏ qua"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Tệp không hợp lệ",
+          "message": "Chỉ hỗ trợ tệp CSV."
+        },
+        "import_failed": {
+          "title": "Nhập thất bại",
+          "message": "Đã xảy ra lỗi."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/settings.json b/packages/i18n/src/locales/vi-VN/settings.json
new file mode 100644
index 0000000..cc7ab0f
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "Đổi email",
+        "description": "Nhập địa chỉ email mới để nhận liên kết xác minh.",
+        "toasts": {
+          "success_title": "Thành công!",
+          "success_message": "Email đã được cập nhật. Vui lòng đăng nhập lại."
+        },
+        "form": {
+          "email": {
+            "label": "Email mới",
+            "placeholder": "Nhập email của bạn",
+            "errors": {
+              "required": "Email là bắt buộc",
+              "invalid": "Email không hợp lệ",
+              "exists": "Email đã tồn tại. Vui lòng dùng email khác.",
+              "validation_failed": "Xác thực email thất bại. Thử lại."
+            }
+          },
+          "code": {
+            "label": "Mã duy nhất",
+            "placeholder": "123456",
+            "helper_text": "Mã xác minh đã được gửi tới email mới của bạn.",
+            "errors": {
+              "required": "Mã duy nhất là bắt buộc",
+              "invalid": "Mã xác minh không hợp lệ. Thử lại."
+            }
+          }
+        },
+        "actions": {
+          "continue": "Tiếp tục",
+          "confirm": "Xác nhận",
+          "cancel": "Hủy"
+        },
+        "states": {
+          "sending": "Đang gửi…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "Tùy chọn",
+      "description": "Tùy chỉnh trải nghiệm ứng dụng theo cách bạn làm việc"
+    },
+    "notifications": {
+      "heading": "Thông báo qua email",
+      "description": "Cập nhật những mục công việc bạn đã đăng ký. Bật tính năng này để nhận thông báo.",
+      "select_default_view": "Chọn chế độ xem mặc định",
+      "compact": "Gọn",
+      "full": "Toàn màn hình"
+    },
+    "security": {
+      "heading": "Bảo mật"
+    },
+    "api_tokens": {
+      "title": "Mã truy cập cá nhân",
+      "description": "Tạo mã API bảo mật để tích hợp dữ liệu của bạn với các hệ thống và ứng dụng bên ngoài."
+    },
+    "activity": {
+      "heading": "Hoạt động",
+      "description": "Theo dõi các hành động và thay đổi gần đây của bạn trong tất cả dự án và mục công việc."
+    },
+    "connections": {
+      "title": "Kết nối",
+      "heading": "Kết nối",
+      "description": "Quản lý cài đặt kết nối không gian làm việc của bạn."
+    }
+  },
+  "profile": {
+    "label": "Hồ sơ",
+    "page_label": "Công việc của bạn",
+    "work": "Công việc",
+    "details": {
+      "joined_on": "Tham gia vào",
+      "time_zone": "Múi giờ"
+    },
+    "stats": {
+      "workload": "Khối lượng công việc",
+      "overview": "Tổng quan",
+      "created": "Mục công việc đã tạo",
+      "assigned": "Mục công việc đã giao",
+      "subscribed": "Mục công việc đã đăng ký",
+      "state_distribution": {
+        "title": "Mục công việc theo trạng thái",
+        "empty": "Tạo mục công việc để xem phân loại theo trạng thái trong biểu đồ để phân tích tốt hơn."
+      },
+      "priority_distribution": {
+        "title": "Mục công việc theo mức độ ưu tiên",
+        "empty": "Tạo mục công việc để xem phân loại theo mức độ ưu tiên trong biểu đồ để phân tích tốt hơn."
+      },
+      "recent_activity": {
+        "title": "Hoạt động gần đây",
+        "empty": "Chúng tôi không tìm thấy dữ liệu. Vui lòng kiểm tra đầu vào của bạn",
+        "button": "Tải xuống hoạt động hôm nay",
+        "button_loading": "Đang tải xuống"
+      }
+    },
+    "actions": {
+      "profile": "Hồ sơ",
+      "security": "Bảo mật",
+      "activity": "Hoạt động",
+      "preferences": "Tùy chọn",
+      "notifications": "Thông báo",
+      "api-tokens": "Mã truy cập cá nhân",
+      "connections": "Kết nối"
+    },
+    "tabs": {
+      "summary": "Tóm tắt",
+      "assigned": "Đã giao",
+      "created": "Đã tạo",
+      "subscribed": "Đã đăng ký",
+      "activity": "Hoạt động"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "Chưa có hoạt động",
+        "description": "Bắt đầu bằng cách tạo mục công việc mới! Thêm chi tiết và thuộc tính cho nó. Khám phá thêm trong Plane để xem hoạt động của bạn."
+      },
+      "assigned": {
+        "title": "Không có mục công việc nào được giao cho bạn",
+        "description": "Có thể theo dõi mục công việc được giao cho bạn từ đây."
+      },
+      "created": {
+        "title": "Chưa có mục công việc",
+        "description": "Tất cả mục công việc bạn tạo sẽ xuất hiện ở đây, theo dõi chúng trực tiếp tại đây."
+      },
+      "subscribed": {
+        "title": "Chưa có mục công việc",
+        "description": "Đăng ký mục công việc bạn quan tâm, theo dõi tất cả chúng tại đây."
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "Tùy chọn hệ thống"
+      },
+      "light": {
+        "label": "Sáng"
+      },
+      "dark": {
+        "label": "Tối"
+      },
+      "light_contrast": {
+        "label": "Sáng tương phản cao"
+      },
+      "dark_contrast": {
+        "label": "Tối tương phản cao"
+      },
+      "custom": {
+        "label": "Chủ đề tùy chỉnh"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/stickies.json b/packages/i18n/src/locales/vi-VN/stickies.json
new file mode 100644
index 0000000..523d888
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "Ghi chú của bạn",
+    "placeholder": "Nhấp vào đây để nhập",
+    "all": "Tất cả ghi chú",
+    "no-data": "Ghi lại một ý tưởng, nắm bắt một cảm hứng, hoặc ghi lại một suy nghĩ chợt nảy ra. Thêm ghi chú để bắt đầu.",
+    "add": "Thêm ghi chú",
+    "search_placeholder": "Tìm kiếm theo tiêu đề",
+    "delete": "Xóa ghi chú",
+    "delete_confirmation": "Bạn có chắc chắn muốn xóa ghi chú này không?",
+    "empty_state": {
+      "simple": "Ghi lại một ý tưởng, nắm bắt một cảm hứng, hoặc ghi lại một suy nghĩ chợt nảy ra. Thêm ghi chú để bắt đầu.",
+      "general": {
+        "title": "Ghi chú là ghi chú nhanh và việc cần làm mà bạn ghi lại ngay lập tức.",
+        "description": "Dễ dàng nắm bắt ý tưởng và sáng tạo của bạn bằng cách tạo ghi chú có thể truy cập từ mọi nơi, mọi lúc.",
+        "primary_button": {
+          "text": "Thêm ghi chú"
+        }
+      },
+      "search": {
+        "title": "Điều này không khớp với bất kỳ ghi chú nào của bạn.",
+        "description": "Thử sử dụng các thuật ngữ khác, hoặc nếu bạn chắc chắn\ntìm kiếm là chính xác, hãy cho chúng tôi biết.",
+        "primary_button": {
+          "text": "Thêm ghi chú"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Tên ghi chú không thể vượt quá 100 ký tự.",
+        "already_exists": "Đã tồn tại một ghi chú không có mô tả"
+      },
+      "created": {
+        "title": "Đã tạo ghi chú",
+        "message": "Ghi chú đã được tạo thành công"
+      },
+      "not_created": {
+        "title": "Chưa tạo ghi chú",
+        "message": "Không thể tạo ghi chú"
+      },
+      "updated": {
+        "title": "Đã cập nhật ghi chú",
+        "message": "Ghi chú đã được cập nhật thành công"
+      },
+      "not_updated": {
+        "title": "Chưa cập nhật ghi chú",
+        "message": "Không thể cập nhật ghi chú"
+      },
+      "removed": {
+        "title": "Đã xóa ghi chú",
+        "message": "Ghi chú đã được xóa thành công"
+      },
+      "not_removed": {
+        "title": "Chưa xóa ghi chú",
+        "message": "Không thể xóa ghi chú"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/template.json b/packages/i18n/src/locales/vi-VN/template.json
new file mode 100644
index 0000000..209c772
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "Mẫu",
+      "description": "Lưu 80% thời gian đã tiêu tốn trong việc tạo dự án, mục công việc và trang khi bạn sử dụng các mẫu.",
+      "new_project_template": "Mẫu dự án mới",
+      "new_work_item_template": "Mẫu mục công việc mới",
+      "new_page_template": "Mẫu trang mới",
+      "options": {
+        "project": {
+          "label": "Mẫu dự án"
+        },
+        "work_item": {
+          "label": "Mẫu mục công việc"
+        },
+        "page": {
+          "label": "Mẫu trang"
+        }
+      },
+      "create_template": {
+        "label": "Tạo mẫu",
+        "no_permission": {
+          "project": "Liên hệ quản trị dự án của bạn để tạo mẫu",
+          "workspace": "Liên hệ quản trị workspace của bạn để tạo mẫu"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "Sử dụng mẫu",
+          "loading": "Đang áp dụng"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "Được thừa kế từ workspace"
+        },
+        "project": {
+          "info": "Được thừa kế từ dự án"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "Đặt tên cho mẫu dự án của bạn.",
+              "validation": {
+                "required": "Tên mẫu là bắt buộc",
+                "maxLength": "Tên mẫu không nên vượt quá 255 ký tự"
+              }
+            },
+            "description": {
+              "placeholder": "Mô tả khi và cách sử dụng mẫu này."
+            }
+          },
+          "name": {
+            "placeholder": "Đặt tên cho dự án của bạn.",
+            "validation": {
+              "required": "Tên dự án là bắt buộc",
+              "maxLength": "Tên dự án không nên vượt quá 255 ký tự"
+            }
+          },
+          "description": {
+            "placeholder": "Mô tả mục tiêu và mục tiêu của dự án này."
+          },
+          "button": {
+            "create": "Tạo mẫu dự án",
+            "update": "Cập nhật mẫu dự án"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "Đặt tên cho mẫu mục công việc của bạn.",
+              "validation": {
+                "required": "Tên mẫu là bắt buộc",
+                "maxLength": "Tên mẫu không nên vượt quá 255 ký tự"
+              }
+            },
+            "description": {
+              "placeholder": "Mô tả khi và cách sử dụng mẫu này."
+            }
+          },
+          "name": {
+            "placeholder": "Đặt tên cho mục công việc của bạn.",
+            "validation": {
+              "required": "Tên mục công việc là bắt buộc",
+              "maxLength": "Tên mục công việc không nên vượt quá 255 ký tự"
+            }
+          },
+          "description": {
+            "placeholder": "Mô tả mục công việc này để rõ ràng những gì bạn sẽ hoàn thành khi hoàn tất điều này."
+          },
+          "button": {
+            "create": "Tạo mẫu mục công việc",
+            "update": "Cập nhật mẫu mục công việc"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "Đặt tên cho mẫu trang của bạn.",
+              "validation": {
+                "required": "Tên mẫu là bắt buộc",
+                "maxLength": "Tên mẫu không nên vượt quá 255 ký tự"
+              }
+            },
+            "description": {
+              "placeholder": "Mô tả khi và cách sử dụng mẫu này."
+            }
+          },
+          "name": {
+            "placeholder": "Trang không có tên",
+            "validation": {
+              "maxLength": "Tên trang không nên vượt quá 255 ký tự"
+            }
+          },
+          "button": {
+            "create": "Tạo mẫu trang",
+            "update": "Cập nhật mẫu trang"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {Cài đặt xuất bản} other {Xuất bản lên Marketplace}}",
+          "unpublish_action": "Gỡ khỏi Marketplace",
+          "title": "Làm cho mẫu của bạn dễ khám phá và nhận biết.",
+          "name": {
+            "label": "Tên mẫu",
+            "placeholder": "Đặt tên cho mẫu của bạn",
+            "validation": {
+              "required": "Tên mẫu là bắt buộc",
+              "maxLength": "Tên mẫu không nên vượt quá 255 ký tự"
+            }
+          },
+          "short_description": {
+            "label": "Mô tả ngắn",
+            "placeholder": "Mẫu này rất phù hợp cho các Quản lý Dự án đang quản lý nhiều dự án cùng lúc.",
+            "validation": {
+              "required": "Mô tả ngắn là bắt buộc"
+            }
+          },
+          "description": {
+            "label": "Mô tả",
+            "placeholder": "Nâng cao năng suất và tối ưu hóa giao tiếp với tính năng Chuyển đổi Giọng nói thành Văn bản.\n• Chuyển đổi thời gian thực: Chuyển đổi lời nói thành văn bản chính xác ngay lập tức.\n• Tạo nhiệm vụ và bình luận: Thêm nhiệm vụ, mô tả và bình luận thông qua lệnh thoại.",
+            "validation": {
+              "required": "Mô tả là bắt buộc"
+            }
+          },
+          "category": {
+            "label": "Danh mục",
+            "placeholder": "Chọn nơi bạn nghĩ phù hợp nhất. Bạn có thể chọn nhiều hơn một.",
+            "validation": {
+              "required": "Cần ít nhất một danh mục"
+            }
+          },
+          "keywords": {
+            "label": "Từ khóa",
+            "placeholder": "Sử dụng các thuật ngữ mà bạn nghĩ người dùng sẽ tìm kiếm khi tìm mẫu này.",
+            "helperText": "Nhập các từ khóa được phân tách bằng dấu phẩy, có khả năng giúp người dùng tìm kiếm từ khóa này.",
+            "validation": {
+              "required": "Cần ít nhất một từ khóa"
+            }
+          },
+          "website": {
+            "label": "URL trang web",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "URL không hợp lệ",
+              "maxLength": "URL không nên vượt quá 800 ký tự"
+            }
+          },
+          "company_name": {
+            "label": "Tên công ty",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "Tên công ty là bắt buộc",
+              "maxLength": "Tên công ty không nên vượt quá 255 ký tự"
+            }
+          },
+          "contact_email": {
+            "label": "Email hỗ trợ",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "Địa chỉ email không hợp lệ",
+              "maxLength": "Email hỗ trợ không nên vượt quá 255 ký tự"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "Liên kết đến chính sách bảo mật của bạn",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "URL không hợp lệ",
+              "maxLength": "URL không nên vượt quá 800 ký tự"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "Liên kết đến điều khoản sử dụng của bạn",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "URL không hợp lệ",
+              "maxLength": "URL không nên vượt quá 800 ký tự"
+            }
+          },
+          "cover_image": {
+            "label": "Thêm ảnh bìa sẽ được hiển thị trong marketplace",
+            "upload_title": "Tải lên ảnh bìa",
+            "upload_placeholder": "Nhấp để tải lên hoặc kéo và thả để tải lên ảnh bìa",
+            "drop_here": "Thả vào đây",
+            "click_to_upload": "Nhấp để tải lên",
+            "invalid_file_or_exceeds_size_limit": "Tệp không hợp lệ hoặc vượt quá giới hạn kích thước. Vui lòng thử lại.",
+            "upload_and_save": "Tải lên và lưu",
+            "uploading": "Đang tải lên",
+            "remove": "Xóa",
+            "removing": "Đang xóa",
+            "validation": {
+              "required": "Ảnh bìa là bắt buộc"
+            }
+          },
+          "attach_screenshots": {
+            "label": "Bao gồm tài liệu và hình ảnh mà bạn nghĩ sẽ giúp người xem hiểu rõ hơn về mẫu này.",
+            "validation": {
+              "required": "Cần ít nhất một ảnh chụp màn hình"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Mẫu",
+        "description": "Với mẫu dự án, mẫu mục công việc và mẫu trang trong Plane, bạn không phải tạo dự án từ đầu hoặc thiết lập thuộc tính mục công việc theo cách thủ công.",
+        "sub_description": "Nhận lại 80% thời gian quản lý của bạn khi bạn sử dụng Mẫu."
+      },
+      "no_templates": {
+        "button": "Tạo mẫu của bạn"
+      },
+      "no_labels": {
+        "description": "Chưa có nhãn nào. Tạo nhãn để giúp tổ chức và lọc mục công việc trong dự án của bạn."
+      },
+      "no_modules": {
+        "description": "Chưa có mô-đun nào. Tổ chức công việc thành các dự án phụ với người dẫn đầu và người được phân công chuyên trách."
+      },
+      "no_work_items": {
+        "description": "Chưa có mục công việc nào. Thêm một để cấu trúc công việc của bạn tốt hơn."
+      },
+      "no_sub_work_items": {
+        "description": "Chưa có mục công việc con. Thêm một để cấu trúc công việc của bạn tốt hơn."
+      },
+      "page": {
+        "no_templates": {
+          "title": "Không có mẫu nào mà bạn có quyền truy cập.",
+          "description": "Vui lòng tạo một mẫu"
+        },
+        "no_results": {
+          "title": "Điều đó không khớp với mẫu nào.",
+          "description": "Thử tìm kiếm bằng các thuật ngữ khác."
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Mẫu đã được tạo",
+          "message": "{templateName}, mẫu {templateType}, hiện có sẵn cho workspace của bạn."
+        },
+        "error": {
+          "title": "Chúng tôi không thể tạo mẫu đó lần này.",
+          "message": "Thử lưu lại chi tiết của bạn hoặc sao chép chúng sang mẫu mới, nhất quán trong một tab khác."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Mẫu đã được thay đổi",
+          "message": "{templateName}, mẫu {templateType}, đã được thay đổi."
+        },
+        "error": {
+          "title": "Chúng tôi không thể lưu thay đổi cho mẫu này.",
+          "message": "Thử lưu lại chi tiết của bạn hoặc quay lại mẫu này sau. Nếu vẫn còn vấn đề, liên hệ với chúng tôi."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Mẫu đã được xóa",
+          "message": "{templateName}, mẫu {templateType}, đã được xóa khỏi workspace của bạn."
+        },
+        "error": {
+          "title": "Chúng tôi không thể xóa mẫu đó lần này.",
+          "message": "Thử xóa nó lại hoặc quay lại nó sau. Nếu vẫn còn vấn đề, liên hệ với chúng tôi."
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "Mẫu đã được gỡ xuất bản",
+          "message": "{templateName}, mẫu {templateType}, đã được gỡ xuất bản."
+        },
+        "error": {
+          "title": "Chúng tôi không thể gỡ xuất bản mẫu đó lần này.",
+          "message": "Thử gỡ xuất bản nó lại hoặc quay lại nó sau. Nếu vẫn còn vấn đề, liên hệ với chúng tôi."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Xóa mẫu",
+      "description": {
+        "prefix": "Bạn có chắc chắn muốn xóa mẫu-",
+        "suffix": "? Tất cả dữ liệu liên quan đến mẫu sẽ bị xóa vĩnh viễn. Hành động này không thể hoàn tác."
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "Gỡ xuất bản mẫu",
+      "description": {
+        "prefix": "Bạn có chắc chắn muốn gỡ xuất bản mẫu-",
+        "suffix": "? Mẫu này sẽ không còn khả dụng cho người dùng trên marketplace."
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "Thêm mẫu mới",
+        "project": "Thêm mẫu mới"
+      },
+      "label": {
+        "project": "Chọn mẫu dự án",
+        "page": "Chọn từ mẫu"
+      },
+      "tooltip": {
+        "work_item": "Chọn mẫu mục công việc"
+      },
+      "no_results": {
+        "work_item": "Không tìm thấy mẫu.",
+        "project": "Không tìm thấy mẫu."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/tour.json b/packages/i18n/src/locales/vi-VN/tour.json
new file mode 100644
index 0000000..69e10b6
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "Chào mừng đến với không gian làm việc của bạn",
+        "description": "Để giúp bạn bắt đầu, chúng tôi đã tạo một Dự án Demo cho bạn. Hãy thêm mục công việc đầu tiên của bạn."
+      },
+      "step_one": {
+        "title": "Nhấp vào \"+ Thêm mục công việc\"",
+        "description": "Bắt đầu bằng cách nhấp vào nút \"+ Mục công việc mới\". Bạn có thể tạo nhiệm vụ, lỗi hoặc loại tùy chỉnh phù hợp với nhu cầu của bạn."
+      },
+      "step_two": {
+        "title": "Lọc các mục công việc của bạn",
+        "description": "Sử dụng bộ lọc để thu hẹp danh sách của bạn một cách nhanh chóng. Bạn có thể lọc theo trạng thái, mức độ ưu tiên hoặc thành viên trong nhóm. "
+      },
+      "step_three": {
+        "title": "Xem, nhóm và sắp xếp các mục công việc theo nhu cầu.",
+        "description": "Xem các thuộc tính cần thiết và nhóm hoặc sắp xếp các mục công việc theo nhu cầu của bạn."
+      },
+      "step_four": {
+        "title": "Trực quan hóa theo cách bạn muốn",
+        "description": "Chọn thuộc tính nào bạn muốn xem trong danh sách. Bạn cũng có thể nhóm và sắp xếp các mục công việc theo cách của mình."
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "Đạt tiến độ với Chu kỳ",
+        "description": "Nhấn Q để tạo Chu kỳ. Đặt tên và thiết lập ngày—chỉ một chu kỳ cho mỗi dự án."
+      },
+      "step_one": {
+        "title": "Tạo chu kỳ mới",
+        "description": "Nhấn Q để tạo Chu kỳ. Đặt tên và thiết lập ngày—chỉ một chu kỳ cho mỗi dự án."
+      },
+      "step_two": {
+        "title": "Nhấp vào \"+\"",
+        "description": "Bắt đầu bằng cách nhấp vào nút \"+\". Thêm các mục công việc mới hoặc hiện có trực tiếp từ trang Chu kỳ."
+      },
+      "step_three": {
+        "title": "Tóm tắt chu kỳ",
+        "description": "Theo dõi tiến độ chu kỳ, năng suất của nhóm và các ưu tiên—và điều tra nếu có gì tụt hậu."
+      },
+      "step_four": {
+        "title": "Chuyển các mục công việc",
+        "description": "Sau ngày đáo hạn, chu kỳ tự động hoàn thành. Di chuyển công việc chưa hoàn thành sang chu kỳ khác."
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "Chia dự án của bạn thành các Mô-đun",
+        "description": "Mô-đun là các dự án nhỏ hơn, tập trung giúp người dùng nhóm và tổ chức các mục công việc trong khung thời gian cụ thể."
+      },
+      "step_one": {
+        "title": "Tạo Mô-đun",
+        "description": "Mô-đun là các dự án nhỏ hơn, tập trung giúp người dùng nhóm và tổ chức các mục công việc trong khung thời gian cụ thể."
+      },
+      "step_two": {
+        "title": "Nhấp vào \"+\"",
+        "description": "Bắt đầu bằng cách nhấp vào nút \"+\". Thêm các mục công việc mới hoặc hiện có trực tiếp từ trang Mô-đun."
+      },
+      "step_three": {
+        "title": "Trạng thái mô-đun",
+        "description": "Mô-đun sử dụng các trạng thái này để giúp người dùng lập kế hoạch và theo dõi rõ ràng tiến độ và giai đoạn."
+      },
+      "step_four": {
+        "title": "Tiến độ mô-đun",
+        "description": "Tiến độ mô-đun được theo dõi thông qua các mục đã hoàn thành, với phân tích để giám sát hiệu suất."
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "Tài liệu hóa với Trang hỗ trợ AI",
+        "description": "Trang trong Plane cho phép bạn nắm bắt, tổ chức và cộng tác về thông tin dự án—không cần công cụ bên ngoài."
+      },
+      "step_one": {
+        "title": "Đặt trang thành Công khai hoặc Riêng tư",
+        "description": "Trang có thể được đặt là công khai, hiển thị cho mọi người trong không gian làm việc của bạn, hoặc riêng tư, chỉ bạn mới truy cập được."
+      },
+      "step_two": {
+        "title": "Sử dụng lệnh /",
+        "description": "Sử dụng / trên trang để thêm nội dung từ 16 loại khối, bao gồm danh sách, hình ảnh, bảng và nhúng."
+      },
+      "step_three": {
+        "title": "Hành động trang",
+        "description": "Sau khi trang của bạn được tạo, bạn có thể nhấp vào menu ••• ở góc trên bên phải để thực hiện các hành động sau."
+      },
+      "step_four": {
+        "title": "Mục lục",
+        "description": "Có cái nhìn tổng quan về trang của bạn bằng cách nhấp vào biểu tượng bảng điều khiển để xem tất cả tiêu đề."
+      },
+      "step_five": {
+        "title": "Lịch sử phiên bản",
+        "description": "Trang theo dõi tất cả các chỉnh sửa với lịch sử phiên bản, cho phép bạn khôi phục các phiên bản trước nếu cần."
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "Đơn giản hóa yêu cầu với tiếp nhận",
+        "description": "Tính năng chỉ dành cho Plane cho phép Khách tạo các mục công việc cho lỗi, yêu cầu hoặc vé."
+      },
+      "step_one": {
+        "title": "Yêu cầu tiếp nhận mở/đóng",
+        "description": "Các yêu cầu đang chờ vẫn ở tab Mở, và sau khi được quản trị viên hoặc thành viên xử lý, chúng chuyển sang Đóng."
+      },
+      "step_two": {
+        "title": "Chấp nhận/từ chối yêu cầu đang chờ",
+        "description": "Chấp nhận để chỉnh sửa và di chuyển mục công việc vào dự án của bạn, hoặc từ chối để đánh dấu là Đã hủy."
+      },
+      "step_three": {
+        "title": "Hoãn lại bây giờ",
+        "description": "Một mục công việc có thể được hoãn lại để xem xét sau. Nó sẽ được di chuyển xuống cuối danh sách yêu cầu mở của bạn."
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "Ngừng chuyển tab. Kết nối thế giới của bạn.",
+        "description": "Kết nối GitHub, Slack để theo dõi PR và tóm tắt trò chuyện trực tiếp trong Plane AI."
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "Điều hướng, được tưởng tượng lại",
+        "sub_title": "Không gian làm việc của bạn giờ đây dễ khám phá hơn với điều hướng thông minh hơn, đơn giản hơn.",
+        "highlight_1": "Cấu trúc bảng điều khiển bên trái được sắp xếp hợp lý để khám phá nhanh hơn",
+        "highlight_2": "Tìm kiếm toàn cục được cải thiện để nhảy đến bất cứ thứ gì ngay lập tức",
+        "highlight_3": "Nhóm danh mục thông minh hơn để rõ ràng và tập trung",
+        "footer": "Bạn muốn hướng dẫn nhanh?"
+      },
+      "step_zero": {
+        "title": "Tìm bất cứ thứ gì ngay lập tức",
+        "description": "Sử dụng tìm kiếm toàn cầu để nhảy đến nhiệm vụ, dự án, trang và mọi người—mà không rời khỏi luồng của bạn."
+      },
+      "step_one": {
+        "title": "Kiểm soát các cập nhật",
+        "description": "Hộp thư đến của bạn giữ tất cả các đề cập, phê duyệt và hoạt động ở một nơi, vì vậy bạn không bao giờ bỏ lỡ công việc quan trọng."
+      },
+      "step_two": {
+        "title": "Cá nhân hóa Điều hướng của bạn",
+        "description": "Tùy chỉnh những gì bạn thấy và cách bạn điều hướng trong Tùy chỉnh."
+      }
+    },
+    "actions": {
+      "close": "Đóng",
+      "next": "Tiếp theo",
+      "back": "Quay lại",
+      "done": "Xong",
+      "take_a_tour": "Tham quan",
+      "get_started": "Bắt đầu",
+      "got_it": "Hiểu rồi"
+    },
+    "seed_data": {
+      "title": "Đây là dự án demo của bạn",
+      "description": "Dự án cho phép bạn quản lý nhóm, nhiệm vụ và mọi thứ bạn cần để hoàn thành công việc trong không gian làm việc của bạn."
+    }
+  },
+  "get_started": {
+    "title": "Xin chào {name}, chào mừng!",
+    "description": "Đây là tất cả những gì bạn cần để bắt đầu hành trình của mình với Plane.",
+    "checklist_section": {
+      "title": "Bắt đầu",
+      "description": "Bắt đầu thiết lập của bạn và xem ý tưởng của bạn trở thành hiện thực nhanh hơn.",
+      "checklist_items": {
+        "item_1": {
+          "title": "Tạo dự án"
+        },
+        "item_2": {
+          "title": "Tạo mục công việc"
+        },
+        "item_3": {
+          "title": "Mời thành viên nhóm"
+        },
+        "item_4": {
+          "title": "Tạo trang"
+        },
+        "item_5": {
+          "title": "Thử trò chuyện Plane AI"
+        },
+        "item_6": {
+          "title": "Liên kết Tích hợp"
+        }
+      }
+    },
+    "team_section": {
+      "title": "Mời nhóm của bạn",
+      "description": "Mời đồng đội và bắt đầu xây dựng cùng nhau."
+    },
+    "integrations_section": {
+      "title": "Nâng cao không gian làm việc của bạn",
+      "more_integrations": "Duyệt thêm tích hợp"
+    },
+    "switch_to_plane_section": {
+      "title": "Khám phá lý do các nhóm chuyển sang Plane",
+      "description": "So sánh Plane với các công cụ bạn sử dụng hôm nay và xem sự khác biệt."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/update.json b/packages/i18n/src/locales/vi-VN/update.json
new file mode 100644
index 0000000..b84b0c1
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "Tiến độ",
+      "since_last_update": "Từ lần cập nhật cuối cùng",
+      "comments": "{count, plural, one{# bình luận} other{# bình luận}}"
+    },
+    "add_update": "Thêm cập nhật",
+    "add_update_placeholder": "Thêm cập nhật của bạn ở đây",
+    "empty": {
+      "title": "Chưa có cập nhật",
+      "description": "Bạn có thể xem cập nhật ở đây."
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "Reaction đã được tạo",
+          "message": "Reaction đã được tạo thành công."
+        },
+        "error": {
+          "title": "Không thể tạo reaction",
+          "message": "Không thể tạo reaction"
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "Reaction đã được xóa",
+          "message": "Reaction đã được xóa thành công."
+        },
+        "error": {
+          "title": "Không thể xóa reaction",
+          "message": "Không thể xóa reaction"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "Cập nhật đã được tạo",
+        "message": "Cập nhật đã được tạo thành công."
+      },
+      "error": {
+        "title": "Không thể tạo cập nhật",
+        "message": "Không thể tạo cập nhật. Vui lòng thử lại!"
+      }
+    },
+    "delete": {
+      "title": "Xóa cập nhật",
+      "confirmation": "Bạn có chắc chắn muốn xóa cập nhật này? Đây là hành động không thể hoàn tác.",
+      "success": {
+        "title": "Cập nhật đã được xóa",
+        "message": "Cập nhật đã được xóa thành công."
+      },
+      "error": {
+        "title": "Không thể xóa cập nhật",
+        "message": "Không thể xóa cập nhật. Vui lòng thử lại!"
+      }
+    },
+    "update": {
+      "success": {
+        "title": "Cập nhật đã được cập nhật",
+        "message": "Cập nhật đã được cập nhật thành công."
+      },
+      "error": {
+        "title": "Không thể cập nhật cập nhật",
+        "message": "Không thể cập nhật cập nhật. Vui lòng thử lại!"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/wiki.json b/packages/i18n/src/locales/vi-VN/wiki.json
new file mode 100644
index 0000000..1eb5312
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "Chung",
+      "private": "Riêng tư",
+      "shared": "Được chia sẻ",
+      "archived": "Đã lưu trữ"
+    },
+    "fallback_name": "Bộ sưu tập",
+    "form": {
+      "name_required": "Tiêu đề bộ sưu tập là bắt buộc",
+      "name_max_length": "Tên bộ sưu tập phải ít hơn 255 ký tự",
+      "name_placeholder_create": "Đặt tiêu đề cho bộ sưu tập",
+      "name_placeholder_edit": "Tên bộ sưu tập"
+    },
+    "create_modal": {
+      "title": "Tạo bộ sưu tập",
+      "submit": "Tạo bộ sưu tập"
+    },
+    "edit_modal": {
+      "title": "Chỉnh sửa bộ sưu tập"
+    },
+    "delete_modal": {
+      "title": "Xóa bộ sưu tập",
+      "page_count": "Bộ sưu tập này có {pageCount} trang. Chọn điều sẽ xảy ra với chúng.",
+      "transfer_title": "Chuyển trang và xóa bộ sưu tập",
+      "transfer_description": "Di chuyển tất cả các trang sang bộ sưu tập khác trước khi xóa. Các trang và quyền của chúng sẽ được giữ nguyên.",
+      "transfer_warning": "Các trang được chuyển sẽ kế thừa quyền của bộ sưu tập đã chọn.",
+      "transfer_target_label": "Chuyển trang đến",
+      "transfer_target_placeholder": "Chọn một bộ sưu tập",
+      "delete_with_pages_title": "Xóa bộ sưu tập cùng các trang",
+      "delete_with_pages_description": "Xóa vĩnh viễn bộ sưu tập và tất cả các trang của nó. Hành động này không thể hoàn tác.",
+      "submit": "Xóa bộ sưu tập"
+    },
+    "header": {
+      "add_page": "Thêm trang"
+    },
+    "menu": {
+      "create_new_page": "Tạo trang mới",
+      "add_existing_page": "Thêm trang hiện có",
+      "edit_collection": "Chỉnh sửa bộ sưu tập",
+      "collection_options": "Tùy chọn bộ sưu tập"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "Tìm kiếm trang",
+      "success_message": "Đã thêm {count} trang vào bộ sưu tập.",
+      "error_message": "Không thể di chuyển các trang. Vui lòng thử lại.",
+      "no_pages_found": "Không tìm thấy trang nào khớp với tìm kiếm của bạn",
+      "no_pages_available": "Không có trang nào để di chuyển",
+      "submit": "Di chuyển"
+    },
+    "list": {
+      "invite_only": "Chỉ dành cho người được mời",
+      "remove_error": "Không thể xóa trang khỏi bộ sưu tập.",
+      "no_matching_pages": "Không có trang nào phù hợp",
+      "remove_search_criteria": "Xóa tiêu chí tìm kiếm để xem tất cả các trang",
+      "remove_filters": "Xóa bộ lọc để xem tất cả các trang",
+      "no_pages_title": "Chưa có trang nào",
+      "no_pages_description": "Bộ sưu tập này hiện chưa có trang nào.",
+      "untitled": "Không tiêu đề",
+      "restricted_access": "Truy cập bị hạn chế",
+      "collapse_page": "Thu gọn trang",
+      "expand_page": "Mở rộng trang",
+      "page_actions": "Thao tác trang",
+      "page_link_copied": "Đã sao chép liên kết trang vào bộ nhớ tạm.",
+      "columns": {
+        "page_name": "Tên trang",
+        "owner": "Chủ sở hữu",
+        "nested_pages": "Trang lồng nhau",
+        "last_activity": "Hoạt động gần nhất",
+        "actions": "Thao tác"
+      }
+    },
+    "toasts": {
+      "created": "Đã tạo bộ sưu tập thành công.",
+      "create_error": "Không thể tạo bộ sưu tập. Vui lòng thử lại.",
+      "renamed": "Đã đổi tên bộ sưu tập thành công.",
+      "rename_error": "Không thể cập nhật bộ sưu tập. Vui lòng thử lại.",
+      "transferred_deleted": "Các trang đã được chuyển và bộ sưu tập đã bị xóa.",
+      "deleted_with_pages": "Bộ sưu tập và các trang của nó đã bị xóa.",
+      "delete_error": "Không thể xóa bộ sưu tập. Vui lòng thử lại.",
+      "target_required": "Vui lòng chọn một bộ sưu tập để chuyển các trang đến.",
+      "create_page_error": "Không thể tạo trang. Vui lòng thử lại.",
+      "create_page_in_collection_error": "Không thể tạo trang hoặc thêm trang vào bộ sưu tập. Vui lòng thử lại.",
+      "collection_link_copied": "Đã sao chép liên kết bộ sưu tập vào bộ nhớ tạm."
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "Nâng cấp để mở khóa Wiki",
+      "description": "Mở khóa trang công khai, lịch sử phiên bản, trang được chia sẻ, cộng tác thời gian thực và trang không gian làm việc cho wiki, tài liệu toàn công ty và cơ sở kiến thức với Plane Pro.",
+      "upgrade_button": {
+        "text": "Nâng cấp"
+      },
+      "learn_more_button": {
+        "text": "Tìm hiểu thêm"
+      },
+      "download_button": {
+        "text": "Tải xuống dữ liệu",
+        "loading": "Đang tải xuống"
+      },
+      "tabs": {
+        "nested_pages": "Trang lồng nhau",
+        "add_embeds": "Thêm nội dung nhúng",
+        "publish_pages": "Xuất bản trang",
+        "comments": "Bình luận"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "Trang lồng nhau yêu cầu gói trả phí. Nâng cấp để mở khóa."
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/work-item-type.json b/packages/i18n/src/locales/vi-VN/work-item-type.json
new file mode 100644
index 0000000..2314d1a
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "Loại mục công việc",
+    "label_lowercase": "loại mục công việc",
+    "settings": {
+      "description": "Tùy chỉnh và thêm thuộc tính riêng của bạn để điều chỉnh theo nhu cầu của nhóm.",
+      "cant_delete_default_message": "Không thể xóa loại hạng mục công việc này vì nó đang được liên kết với các hạng mục công việc hiện có.",
+      "set_as_default": "Đặt làm mặc định",
+      "cant_set_default_inactive_message": "Kích hoạt loại này trước khi đặt làm mặc định",
+      "set_default_confirmation": {
+        "title": "Đặt làm loại hạng mục công việc mặc định",
+        "description": "Đặt {name} làm mặc định sẽ nhập nó vào tất cả các dự án trong không gian làm việc này. Tất cả hạng mục công việc mới sẽ sử dụng loại này theo mặc định.",
+        "confirm_button": "Đặt làm mặc định"
+      },
+      "properties": {
+        "title": "Thuộc tính",
+        "description": "Tạo và tùy chỉnh thuộc tính.",
+        "tooltip": "Mỗi loại mục công việc đi kèm với một bộ thuộc tính mặc định như Tiêu đề, Mô tả, Người được giao, Trạng thái, Ưu tiên, Ngày bắt đầu, Ngày đến hạn, Module, Chu kỳ, v.v. Bạn cũng có thể tùy chỉnh và thêm thuộc tính riêng của mình để phù hợp với nhu cầu của nhóm bạn.",
+        "add_button": "Thêm thuộc tính mới",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "Nhập từ không gian làm việc"
+          }
+        },
+        "dropdown": {
+          "label": "Loại thuộc tính",
+          "placeholder": "Chọn loại"
+        },
+        "property_type": {
+          "text": {
+            "label": "Văn bản"
+          },
+          "number": {
+            "label": "Số"
+          },
+          "dropdown": {
+            "label": "Dropdown"
+          },
+          "boolean": {
+            "label": "Boolean"
+          },
+          "date": {
+            "label": "Ngày"
+          },
+          "member_picker": {
+            "label": "Chọn thành viên"
+          },
+          "formula": {
+            "label": "Công thức"
+          }
+        },
+        "attributes": {
+          "label": "Thuộc tính",
+          "text": {
+            "single_line": {
+              "label": "Một dòng"
+            },
+            "multi_line": {
+              "label": "Đoạn văn"
+            },
+            "readonly": {
+              "label": "Chỉ đọc",
+              "header": "Dữ liệu chỉ đọc"
+            },
+            "invalid_text_format": {
+              "label": "Định dạng văn bản không hợp lệ"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "Thêm số"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "Chọn một"
+            },
+            "multi_select": {
+              "label": "Chọn nhiều"
+            },
+            "no_default_value": {
+              "label": "Không có giá trị mặc định"
+            }
+          },
+          "boolean": {
+            "label": "Đúng | Sai",
+            "no_default": "Không có giá trị mặc định"
+          },
+          "option": {
+            "create_update": {
+              "label": "Tùy chọn",
+              "form": {
+                "placeholder": "Thêm tùy chọn",
+                "errors": {
+                  "name": {
+                    "required": "Tên tùy chọn là bắt buộc.",
+                    "integrity": "Tùy chọn với cùng tên đã tồn tại."
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "Chọn tùy chọn",
+                "multi": {
+                  "default": "Chọn tùy chọn",
+                  "variable": "{count} tùy chọn đã chọn"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "Thành công!",
+              "message": "Thuộc tính {name} đã được tạo thành công."
+            },
+            "error": {
+              "title": "Lỗi!",
+              "message": "Không thể tạo thuộc tính. Vui lòng thử lại!"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "Thành công!",
+              "message": "Thuộc tính {name} đã được cập nhật thành công."
+            },
+            "error": {
+              "title": "Lỗi!",
+              "message": "Không thể cập nhật thuộc tính. Vui lòng thử lại!"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "Thành công!",
+              "message": "Thuộc tính {name} đã được xóa thành công."
+            },
+            "error": {
+              "title": "Lỗi!",
+              "message": "Không thể xóa thuộc tính. Vui lòng thử lại!"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} thuộc tính {name}",
+            "success": {
+              "title": "Thành công!",
+              "message": "Thuộc tính {name} đã được {action} thành công."
+            },
+            "error": {
+              "title": "Lỗi!",
+              "message": "Không thể {action} thuộc tính. Vui lòng thử lại!"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "Tạo thuộc tính tùy chỉnh mới",
+            "update": "Cập nhật thuộc tính tùy chỉnh"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "Tiêu đề"
+            },
+            "description": {
+              "placeholder": "Mô tả"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "Bạn phải đặt tên cho thuộc tính của mình.",
+              "max_length": "Tên thuộc tính không được vượt quá 255 ký tự."
+            },
+            "property_type": {
+              "required": "Bạn phải chọn một loại thuộc tính."
+            },
+            "options": {
+              "required": "Bạn phải thêm ít nhất một tùy chọn."
+            },
+            "formula": {
+              "required": "Biểu thức công thức là bắt buộc.",
+              "invalid": "Công thức không hợp lệ: {error}",
+              "circular_reference": "Phát hiện tham chiếu vòng. Công thức không thể tham chiếu chính nó trực tiếp hoặc gián tiếp.",
+              "invalid_reference": "Công thức tham chiếu đến thuộc tính không tồn tại."
+            }
+          }
+        },
+        "formula": {
+          "field_label": "Trường công thức",
+          "tooltip": "Nhập công thức sử dụng cú pháp '{'Tên trường'}'. Hỗ trợ các toán tử +, -, *, / và &.",
+          "placeholder": "Viết công thức",
+          "test_button": "Kiểm tra",
+          "validating": "Đang xác thực",
+          "validation_success": "Công thức hợp lệ! Trả về {resultType}",
+          "validation_success_with_refs": "Công thức hợp lệ! Trả về {resultType} ({count} trường được tham chiếu)",
+          "error": {
+            "empty": "Vui lòng nhập công thức",
+            "missing_context": "Thiếu ngữ cảnh không gian làm việc, dự án hoặc loại mục công việc",
+            "validation_failed": "Xác thực thất bại"
+          },
+          "picker": {
+            "no_match": "Không có thuộc tính phù hợp",
+            "no_available": "Không có thuộc tính khả dụng"
+          }
+        },
+        "enable_disable": {
+          "label": "Đang hoạt động",
+          "tooltip": {
+            "disabled": "Nhấp để vô hiệu hóa",
+            "enabled": "Nhấp để kích hoạt"
+          }
+        },
+        "delete_confirmation": {
+          "title": "Xóa thuộc tính này",
+          "description": "Việc xóa thuộc tính có thể dẫn đến mất dữ liệu hiện có.",
+          "secondary_description": "Bạn có muốn vô hiệu hóa thuộc tính thay thế?",
+          "primary_button": "{action}, xóa nó",
+          "secondary_button": "Có, vô hiệu hóa nó"
+        },
+        "mandate_confirmation": {
+          "label": "Thuộc tính bắt buộc",
+          "content": "Có vẻ như có một tùy chọn mặc định cho thuộc tính này. Việc làm cho thuộc tính trở thành bắt buộc sẽ xóa giá trị mặc định và người dùng sẽ phải thêm một giá trị theo lựa chọn của họ.",
+          "tooltip": {
+            "disabled": "Loại thuộc tính này không thể được làm thành bắt buộc",
+            "enabled": "Bỏ chọn để đánh dấu trường là tùy chọn",
+            "checked": "Chọn để đánh dấu trường là bắt buộc"
+          }
+        },
+        "empty_state": {
+          "title": "Thêm thuộc tính tùy chỉnh",
+          "description": "Các thuộc tính mới bạn thêm cho loại mục công việc này sẽ hiển thị ở đây."
+        }
+      },
+      "types": {
+        "title": "Loại",
+        "description": "Tạo và tùy chỉnh loại mục công việc với các thuộc tính.",
+        "sort_options": {
+          "project_count": "Số lượng dự án sử dụng"
+        },
+        "filter_options": {
+          "show_active": "Hiển thị đang hoạt động",
+          "show_inactive": "Hiển thị không hoạt động"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "Tạo mới",
+            "import_from_workspace": "Nhập từ không gian làm việc"
+          },
+          "banner": {
+            "with_access": "Bật loại mục công việc để nhập các loại từ cấp không gian làm việc",
+            "without_access": "Loại mục công việc đã bị tắt. Liên hệ quản trị viên không gian làm việc để bật trong cài đặt không gian làm việc."
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "Thuộc tính tùy chỉnh",
+        "add_button": "Thêm thuộc tính",
+        "modal": {
+          "title": "Thêm thuộc tính",
+          "empty": {
+            "title": "Không có thuộc tính nào khả dụng",
+            "description": "Tất cả thuộc tính đã được liên kết với loại này."
+          }
+        },
+        "unlink_confirmation": {
+          "title": "Hủy liên kết thuộc tính",
+          "description": "Việc hủy liên kết thuộc tính này sẽ xóa vĩnh viễn tất cả các giá trị của nó trên mỗi mục công việc sử dụng loại này. Hành động này không thể hoàn tác.",
+          "input_label": "Nhập",
+          "input_label_suffix": "để tiếp tục:",
+          "confirm": "Hủy liên kết thuộc tính",
+          "loading": "Đang hủy liên kết"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "Xóa loại này",
+        "description": "Việc xóa các loại có thể dẫn đến mất dữ liệu hiện có.",
+        "can_disable_warning": "Bạn có muốn tắt loại này thay thế không?",
+        "primary_button": "Vâng, xóa nó",
+        "toast": {
+          "success": {
+            "title": "Thành công!",
+            "message": "Đã xóa thành công loại mục công việc."
+          },
+          "error": {
+            "title": "Lỗi!",
+            "message": "Không thể xóa loại mục công việc. Vui lòng thử lại!"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "Không thể xóa loại mục công việc mặc định",
+          "cannot_delete_work_item_type_with_associated_work_items": "Không thể xóa loại mục công việc có mục công việc liên quan"
+        }
+      }
+    },
+    "create": {
+      "title": "Tạo loại mục công việc",
+      "button": "Thêm loại mục công việc",
+      "toast": {
+        "success": {
+          "title": "Thành công!",
+          "message": "Loại mục công việc đã được tạo thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": {
+            "default": "Không thể tạo loại mục công việc. Vui lòng thử lại!",
+            "conflict": "Loại {name} đã tồn tại. Hãy chọn một tên khác."
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "Cập nhật loại mục công việc",
+      "button": "Cập nhật loại mục công việc",
+      "toast": {
+        "success": {
+          "title": "Thành công!",
+          "message": "Loại mục công việc {name} đã được cập nhật thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": {
+            "default": "Không thể cập nhật loại mục công việc. Vui lòng thử lại!",
+            "conflict": "Loại {name} đã tồn tại. Hãy chọn một tên khác."
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "Đặt cho loại mục công việc này một tên duy nhất"
+        },
+        "description": {
+          "placeholder": "Mô tả loại mục công việc này dùng để làm gì và khi nào nên sử dụng nó."
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} loại mục công việc {name}",
+        "success": {
+          "title": "Thành công!",
+          "message": "Loại mục công việc {name} đã được {action} thành công."
+        },
+        "error": {
+          "title": "Lỗi!",
+          "message": "Không thể {action} loại mục công việc. Vui lòng thử lại!"
+        }
+      },
+      "tooltip": "Nhấp để {action}"
+    },
+    "change_confirmation": {
+      "title": "Thay đổi loại mục công việc?",
+      "description": "Thay đổi loại mục công việc có thể dẫn đến mất các giá trị thuộc tính tùy chỉnh cụ thể cho loại hiện tại. Hành động này không thể hoàn tác.",
+      "button": {
+        "loading": "Đang thay đổi",
+        "default": "Thay đổi loại"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "Kích hoạt Loại mục công việc",
+        "description": "Định hình mục công việc theo công việc của bạn với Loại mục công việc. Tùy chỉnh với biểu tượng, nền và thuộc tính và cấu hình chúng cho dự án này.",
+        "primary_button": {
+          "text": "Kích hoạt"
+        },
+        "confirmation": {
+          "title": "Khi đã kích hoạt, Loại mục công việc không thể bị vô hiệu hóa.",
+          "description": "Mục công việc của Plane sẽ trở thành loại mục công việc mặc định cho dự án này và sẽ hiển thị với biểu tượng và nền của nó trong dự án này.",
+          "button": {
+            "default": "Kích hoạt",
+            "loading": "Đang thiết lập"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "Nâng cấp lên Pro để kích hoạt Loại mục công việc.",
+        "description": "Định hình mục công việc theo công việc của bạn với Loại mục công việc. Tùy chỉnh với biểu tượng, nền và thuộc tính và cấu hình chúng cho dự án này.",
+        "primary_button": {
+          "text": "Nâng cấp lên Pro"
+        }
+      },
+      "upgrade": {
+        "title": "Nâng cấp để kích hoạt Loại mục công việc.",
+        "description": "Định hình mục công việc theo công việc của bạn với Loại mục công việc. Tùy chỉnh với biểu tượng, nền và thuộc tính và cấu hình chúng cho dự án này.",
+        "primary_button": {
+          "text": "Nâng cấp"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "Phân cấp",
+      "tab_label": "Phân cấp",
+      "description": "Thiết lập các cấp độ phân cấp để tổ chức công việc của bạn. Mỗi cấp độ xác định mối quan hệ cha với mục ngay phía trên và mối quan hệ con với mục ngay phía dưới. ",
+      "sidebar_label": "Phân cấp",
+      "enable_control": {
+        "title": "Bật phân cấp",
+        "description": "Tạo mối quan hệ cha-con giữa các loại mục công việc khác nhau.",
+        "tooltip": "Bạn không thể tắt phân cấp sau khi đã bật."
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "Trước tiên hãy xác định các Loại Mục Công Việc để tạo phân cấp mới.",
+        "cta": "Cài đặt loại mục công việc"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "Kéo và thả loại để thêm cấp phân cấp mới",
+      "empty_level_placeholder": "Kéo và thả loại mục công việc vào cấp độ {level}",
+      "drag_tooltip": "Kéo để thay đổi cấp độ",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "Đặt làm mặc định",
+          "toast": {
+            "loading": "Đang đặt làm mặc định...",
+            "success": {
+              "title": "Thành công!",
+              "message": "Cấp độ phân cấp {level} đã được đặt làm mặc định thành công."
+            },
+            "error": {
+              "title": "Lỗi!",
+              "message": "Không thể đặt cấp độ phân cấp {level} làm mặc định. Vui lòng thử lại."
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "Đang chuyển {workItemTypeName} sang cấp độ {level}...",
+        "success": {
+          "title": "Thành công!",
+          "message": "{workItemTypeName} đã được chuyển sang cấp độ {level} thành công."
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "Lưu sẽ gỡ các liên kết hiện có",
+      "content": {
+        "intro": "Loại mục công việc {workItemTypeName} có:",
+        "parent_items": "{count, plural, other {Sẽ xóa # liên kết cấp cha}}.",
+        "child_items": "{count, plural, other {mục công việc con}}",
+        "parent_line_suffix_when_also_children": ", và ",
+        "footer": "Thay đổi này sẽ gỡ bỏ quan hệ cha-con khỏi các mục công việc hiện có thuộc loại {workItemTypeName}."
+      },
+      "confirm_input": {
+        "label": "Nhập \"xác nhận\" để tiếp tục.",
+        "placeholder": "xác nhận"
+      },
+      "error_toast": {
+        "title": "Lỗi!",
+        "message": "Không thể gỡ liên kết và lưu. Vui lòng thử lại."
+      },
+      "confirm_button": {
+        "loading": "Đang lưu",
+        "default": "Vẫn lưu"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "Lỗi!",
+        "message": "Loại mục công việc được chọn không thể dùng để tạo mục công việc mới vì vi phạm quy tắc phân cấp."
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "Lỗi!",
+        "message": "Loại mục công việc không thể cập nhật vì vi phạm quy tắc phân cấp."
+      }
+    },
+    "work_item_type_modal": {
+      "level": "Cấp độ phân cấp",
+      "invalid_level_toast": {
+        "title": "Lỗi!",
+        "message": "Không thể cập nhật loại mục công việc vì vi phạm quy tắc phân cấp."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/work-item.json b/packages/i18n/src/locales/vi-VN/work-item.json
new file mode 100644
index 0000000..fea748b
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {mục công việc} other {mục công việc}}",
+    "all": "Tất cả mục công việc",
+    "edit": "Chỉnh sửa mục công việc",
+    "title": {
+      "label": "Tiêu đề mục công việc",
+      "required": "Tiêu đề mục công việc là bắt buộc"
+    },
+    "add": {
+      "press_enter": "Nhấn 'Enter' để thêm mục công việc khác",
+      "label": "Thêm mục công việc",
+      "cycle": {
+        "failed": "Không thể thêm mục công việc vào chu kỳ. Vui lòng thử lại.",
+        "success": "{count, plural, one {Mục công việc} other {Mục công việc}} đã được thêm vào chu kỳ thành công.",
+        "loading": "Đang thêm {count, plural, one {mục công việc} other {mục công việc}} vào chu kỳ"
+      },
+      "assignee": "Thêm người phụ trách",
+      "start_date": "Thêm ngày bắt đầu",
+      "due_date": "Thêm ngày hết hạn",
+      "parent": "Thêm mục công việc cha",
+      "sub_issue": "Thêm mục công việc con",
+      "dependency": "Thêm phụ thuộc",
+      "relation": "Thêm mối quan hệ",
+      "link": "Thêm liên kết",
+      "existing": "Thêm mục công việc hiện có"
+    },
+    "remove": {
+      "label": "Xóa mục công việc",
+      "cycle": {
+        "loading": "Đang xóa mục công việc khỏi chu kỳ",
+        "success": "Đã xóa mục công việc khỏi chu kỳ thành công.",
+        "failed": "Không thể xóa mục công việc khỏi chu kỳ. Vui lòng thử lại."
+      },
+      "module": {
+        "loading": "Đang xóa mục công việc khỏi mô-đun",
+        "success": "Đã xóa mục công việc khỏi mô-đun thành công.",
+        "failed": "Không thể xóa mục công việc khỏi mô-đun. Vui lòng thử lại."
+      },
+      "parent": {
+        "label": "Xóa mục công việc cha"
+      }
+    },
+    "new": "Mục công việc mới",
+    "adding": "Đang thêm mục công việc",
+    "create": {
+      "success": "Đã tạo mục công việc thành công"
+    },
+    "priority": {
+      "urgent": "Khẩn cấp",
+      "high": "Cao",
+      "medium": "Trung bình",
+      "low": "Thấp"
+    },
+    "display": {
+      "properties": {
+        "label": "Hiển thị thuộc tính",
+        "id": "ID",
+        "issue_type": "Loại mục công việc",
+        "sub_issue_count": "Số lượng mục công việc con",
+        "attachment_count": "Số lượng tệp đính kèm",
+        "created_on": "Được tạo vào",
+        "sub_issue": "Mục công việc con",
+        "work_item_count": "Số lượng mục công việc"
+      },
+      "extra": {
+        "show_sub_issues": "Hiển thị mục công việc con",
+        "show_empty_groups": "Hiển thị nhóm trống"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "Bố cục này được sắp xếp theo",
+      "list": "Danh sách",
+      "kanban": "Kanban",
+      "calendar": "Lịch",
+      "spreadsheet": "Bảng tính",
+      "gantt": "Dòng thời gian",
+      "title": {
+        "list": "Bố cục danh sách",
+        "kanban": "Bố cục kanban",
+        "calendar": "Bố cục lịch",
+        "spreadsheet": "Bố cục bảng tính",
+        "gantt": "Bố cục dòng thời gian"
+      }
+    },
+    "states": {
+      "active": "Hoạt động",
+      "backlog": "Tồn đọng"
+    },
+    "comments": {
+      "placeholder": "Thêm bình luận",
+      "switch": {
+        "private": "Chuyển sang bình luận riêng tư",
+        "public": "Chuyển sang bình luận công khai"
+      },
+      "create": {
+        "success": "Đã tạo bình luận thành công",
+        "error": "Không thể tạo bình luận. Vui lòng thử lại sau."
+      },
+      "update": {
+        "success": "Đã cập nhật bình luận thành công",
+        "error": "Không thể cập nhật bình luận. Vui lòng thử lại sau."
+      },
+      "remove": {
+        "success": "Đã xóa bình luận thành công",
+        "error": "Không thể xóa bình luận. Vui lòng thử lại sau."
+      },
+      "upload": {
+        "error": "Không thể tải lên tài nguyên. Vui lòng thử lại sau."
+      },
+      "copy_link": {
+        "success": "Liên kết bình luận đã được sao chép vào clipboard",
+        "error": "Lỗi khi sao chép liên kết bình luận. Vui lòng thử lại sau."
+      },
+      "replies": {
+        "create": {
+          "submit_button": "Thêm trả lời",
+          "placeholder": "Thêm trả lời"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "Không thể tải các trả lời"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "Đã tạo trả lời thành công"
+            },
+            "error": {
+              "message": "Không thể tạo trả lời"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "Đã cập nhật trả lời thành công"
+            },
+            "error": {
+              "message": "Không thể cập nhật trả lời"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "Đã xóa trả lời thành công"
+            },
+            "error": {
+              "message": "Không thể xóa trả lời"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "Mục công việc không tồn tại",
+        "description": "Mục công việc bạn đang tìm kiếm không tồn tại, đã được lưu trữ hoặc đã bị xóa.",
+        "primary_button": {
+          "text": "Xem các mục công việc khác"
+        }
+      }
+    },
+    "sibling": {
+      "label": "Mục công việc cùng cấp"
+    },
+    "archive": {
+      "description": "Chỉ những mục công việc đã hoàn thành hoặc đã hủy\ncó thể được lưu trữ",
+      "label": "Lưu trữ mục công việc",
+      "confirm_message": "Bạn có chắc chắn muốn lưu trữ mục công việc này không? Tất cả mục công việc đã lưu trữ có thể được khôi phục sau.",
+      "success": {
+        "label": "Lưu trữ thành công",
+        "message": "Mục đã lưu trữ của bạn có thể được tìm thấy trong phần lưu trữ của dự án."
+      },
+      "failed": {
+        "message": "Không thể lưu trữ mục công việc. Vui lòng thử lại."
+      },
+      "banner_message": "Mục công việc này đã được lưu trữ. Truy cập mục Lưu trữ để khôi phục.",
+      "go_to_archives": "Đi đến lưu trữ"
+    },
+    "restore": {
+      "success": {
+        "title": "Khôi phục thành công",
+        "message": "Mục công việc của bạn có thể được tìm thấy trong mục công việc của dự án."
+      },
+      "failed": {
+        "message": "Không thể khôi phục mục công việc. Vui lòng thử lại."
+      }
+    },
+    "relation": {
+      "relates_to": "Liên quan đến",
+      "duplicate": "Trùng lặp với",
+      "blocked_by": "Bị chặn bởi",
+      "blocking": "Đang chặn",
+      "start_before": "Bắt đầu Trước",
+      "start_after": "Bắt đầu Sau",
+      "finish_before": "Kết thúc Trước",
+      "finish_after": "Kết thúc Sau",
+      "implements": "Thực hiện",
+      "implemented_by": "Được thực hiện bởi"
+    },
+    "copy_link": "Sao chép liên kết mục công việc",
+    "delete": {
+      "label": "Xóa mục công việc",
+      "error": "Đã xảy ra lỗi khi xóa mục công việc"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "Đã đăng ký mục công việc thành công",
+        "unsubscribed": "Đã hủy đăng ký mục công việc thành công"
+      }
+    },
+    "select": {
+      "error": "Vui lòng chọn ít nhất một mục công việc",
+      "empty": "Chưa chọn mục công việc",
+      "add_selected": "Thêm mục công việc đã chọn",
+      "select_all": "Chọn tất cả",
+      "deselect_all": "Bỏ chọn tất cả"
+    },
+    "open_in_full_screen": "Mở mục công việc trong chế độ toàn màn hình",
+    "duplicate": {
+      "modal": {
+        "title": "Tạo một bản sao đến dự án khác",
+        "description1": "Thao tác này tạo một bản sao của mục công việc.",
+        "description2": "Tất cả dữ liệu thuộc tính sẽ bị xóa khi sao chép.",
+        "placeholder": "Chọn một dự án"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "Đã sao chép mục công việc thành công"
+        },
+        "error": {
+          "message": "Không thể sao chép mục công việc"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "Liên kết trang",
+      "show_wiki_pages": "Hiển thị trang Wiki",
+      "link_pages_to": "Liên kết trang đến",
+      "linked_pages": "Trang đã liên kết",
+      "no_description": "Đây là một trang trống. Sao bạn không viết gì đó bên trong và xem nó xuất hiện ở đây giống như phần giữ chỗ này",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "Đã cập nhật trang",
+            "message": "Đã cập nhật trang thành công"
+          },
+          "error": {
+            "title": "Cập nhật trang thất bại",
+            "message": "Cập nhật trang thất bại"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "Đã xóa trang",
+            "message": "Đã xóa trang thành công"
+          },
+          "error": {
+            "title": "Xóa trang thất bại",
+            "message": "Xóa trang thất bại"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "Nhấp để bỏ phiếu thuận",
+      "click_to_downvote": "Nhấp để bỏ phiếu chống",
+      "click_to_view_upvotes": "Nhấp để xem phiếu thuận",
+      "click_to_view_downvotes": "Nhấp để xem phiếu chống"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "Đã cập nhật mục công việc con thành công",
+      "error": "Đã xảy ra lỗi khi cập nhật mục công việc con"
+    },
+    "remove": {
+      "success": "Đã xóa mục công việc con thành công",
+      "error": "Đã xảy ra lỗi khi xóa mục công việc con"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "Bạn không có mục công việc con nào phù hợp với các bộ lọc mà bạn đã áp dụng.",
+        "description": "Để xem tất cả các mục công việc con, hãy xóa tất cả các bộ lọc đã áp dụng.",
+        "action": "Xóa bộ lọc"
+      },
+      "list_filters": {
+        "title": "Bạn không có mục công việc nào phù hợp với các bộ lọc mà bạn đã áp dụng.",
+        "description": "Để xem tất cả các mục công việc, hãy xóa tất cả các bộ lọc đã áp dụng.",
+        "action": "Xóa bộ lọc"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "Không tìm thấy mục công việc phù hợp"
+      },
+      "no_issues": {
+        "title": "Không tìm thấy mục công việc"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "Chưa có bình luận",
+        "description": "Bình luận có thể được sử dụng như không gian thảo luận và theo dõi cho mục công việc"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "Không thể lưu trữ mục công việc",
+        "message": "Chỉ các mục công việc thuộc nhóm trạng thái Hoàn thành hoặc Đã hủy mới có thể được lưu trữ."
+      },
+      "invalid_issue_start_date": {
+        "title": "Không thể cập nhật mục công việc",
+        "message": "Ngày bắt đầu đã chọn vượt quá ngày đến hạn cho một số mục công việc. Đảm bảo ngày bắt đầu phải trước ngày đến hạn."
+      },
+      "invalid_issue_target_date": {
+        "title": "Không thể cập nhật mục công việc",
+        "message": "Ngày đến hạn đã chọn trước ngày bắt đầu cho một số mục công việc. Đảm bảo ngày đến hạn phải sau ngày bắt đầu."
+      },
+      "invalid_state_transition": {
+        "title": "Không thể cập nhật mục công việc",
+        "message": "Thay đổi trạng thái không được phép cho một số mục công việc. Đảm bảo thay đổi trạng thái được cho phép."
+      }
+    },
+    "upgrade_banner": {
+      "message": "Thay đổi trạng thái, mức ưu tiên và nhiều thứ khác cho nhiều mục công việc cùng lúc. Tiết kiệm trung bình ba phút cho mỗi thao tác.",
+      "cta": "Nâng cấp lên One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "Công việc lặp lại",
+      "description": "Thiết lập công việc lặp lại một lần, và chúng tôi sẽ chăm sóc các lặp lại. Bạn sẽ thấy tất cả ở đây khi đến lúc.",
+      "new_recurring_work_item": "Tạo mục công việc lặp lại mới",
+      "update_recurring_work_item": "Cập nhật mục công việc lặp lại",
+      "form": {
+        "interval": {
+          "title": "Lịch trình",
+          "start_date": {
+            "validation": {
+              "required": "Ngày bắt đầu là bắt buộc"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "Loại khoảng thời gian là bắt buộc"
+            }
+          }
+        },
+        "button": {
+          "create": "Tạo mục công việc lặp lại",
+          "update": "Cập nhật mục công việc lặp lại"
+        }
+      },
+      "create_button": {
+        "label": "Tạo mục công việc lặp lại",
+        "no_permission": "Liên hệ quản trị viên dự án của bạn để tạo mục công việc lặp lại"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Công việc của bạn, tự động hóa",
+        "description": "Thiết lập một lần. Chúng tôi sẽ tự động lặp lại khi đến hạn. Nâng cấp lên Doanh nghiệp để công việc lặp lại trở nên dễ dàng."
+      },
+      "no_templates": {
+        "button": "Tạo mục công việc lặp lại đầu tiên của bạn"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "Đã tạo mục công việc lặp lại",
+          "message": "{name}, mục công việc lặp lại, hiện đã có trong không gian làm việc của bạn."
+        },
+        "error": {
+          "title": "Không thể tạo mục công việc lặp lại lần này.",
+          "message": "Hãy thử lưu lại thông tin của bạn hoặc sao chép sang một mục công việc lặp lại mới, tốt nhất ở tab khác."
+        }
+      },
+      "update": {
+        "success": {
+          "title": "Đã thay đổi mục công việc lặp lại",
+          "message": "{name}, mục công việc lặp lại, đã được thay đổi."
+        },
+        "error": {
+          "title": "Không thể lưu thay đổi cho mục công việc lặp lại này.",
+          "message": "Hãy thử lưu lại thông tin hoặc quay lại mục công việc lặp lại này sau. Nếu vẫn gặp sự cố, hãy liên hệ với chúng tôi."
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "Đã xóa mục công việc lặp lại",
+          "message": "{name}, mục công việc lặp lại, đã bị xóa khỏi không gian làm việc của bạn."
+        },
+        "error": {
+          "title": "Không thể xóa mục công việc lặp lại này.",
+          "message": "Hãy thử xóa lại hoặc quay lại sau. Nếu vẫn không thể xóa, hãy liên hệ với chúng tôi."
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "Xóa mục công việc lặp lại",
+      "description": {
+        "prefix": "Bạn có chắc chắn muốn xóa mục công việc lặp lại-",
+        "suffix": "? Tất cả dữ liệu liên quan đến mục công việc lặp lại này sẽ bị xóa vĩnh viễn. Hành động này không thể hoàn tác."
+      }
+    }
+  },
+  "epic": {
+    "new": "Sử thi mới",
+    "label": "{count, plural, one {sử thi} other {sử thi}}",
+    "adding": "Đang thêm sử thi",
+    "create": {
+      "success": "Đã tạo sử thi thành công"
+    },
+    "add": {
+      "label": "Thêm sử thi",
+      "press_enter": "Nhấn 'Enter' để thêm sử thi khác"
+    },
+    "title": {
+      "label": "Tiêu đề sử thi",
+      "required": "Tiêu đề sử thi là bắt buộc"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/workflow.json b/packages/i18n/src/locales/vi-VN/workflow.json
new file mode 100644
index 0000000..a52c122
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "Cho phép mục công việc mới",
+      "work_item_creation_disable_tooltip": "Tạo mục công việc bị vô hiệu hóa cho trạng thái này",
+      "default_state": "Trạng thái mặc định cho phép tất cả thành viên tạo mục công việc mới. Điều này không thể thay đổi",
+      "state_change_count": "{count, plural, one {1 thay đổi trạng thái được cho phép} other {{count} thay đổi trạng thái được cho phép}}",
+      "movers_count": "{count, plural, one {1 người xem xét được liệt kê} other {{count} người xem xét được liệt kê}}",
+      "state_changes": {
+        "label": {
+          "default": "Thêm thay đổi trạng thái được cho phép",
+          "loading": "Đang thêm thay đổi trạng thái được cho phép"
+        },
+        "move_to": "Thay đổi trạng thái thành",
+        "movers": {
+          "label": "Khi được xem xét bởi",
+          "tooltip": "Người xem xét là những người được phép di chuyển mục công việc từ một trạng thái sang trạng thái khác.",
+          "add": "Thêm người xem xét"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "Bạn không thể di chuyển mục công việc này đến đây."
+    },
+    "workflow_enabled": {
+      "label": "Thay đổi trạng thái"
+    },
+    "workflow_tree": {
+      "label": "Đối với mục công việc trong",
+      "state_change_label": "có thể di chuyển nó đến"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "Kiểm soát sự hỗn loạn của thay đổi và xem xét với Quy trình làm việc.",
+        "description": "Đặt quy tắc cho nơi công việc của bạn di chuyển, bởi ai và khi nào với Quy trình làm việc trong Plane."
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "Xem lịch sử thay đổi",
+      "reset_workflow": "Đặt lại quy trình làm việc"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "Bạn có chắc muốn đặt lại quy trình làm việc này không?",
+        "description": "Nếu bạn đặt lại quy trình làm việc này, tất cả các quy tắc thay đổi trạng thái của bạn sẽ bị xóa và bạn sẽ phải tạo lại chúng để chạy chúng trong dự án này."
+      },
+      "delete_state_change": {
+        "title": "Bạn có chắc muốn xóa quy tắc thay đổi trạng thái này không?",
+        "description": "Sau khi xóa, bạn không thể hoàn tác thay đổi này và bạn sẽ phải đặt lại quy tắc nếu bạn muốn nó chạy cho dự án này."
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} quy trình làm việc",
+        "success": {
+          "title": "Thành công",
+          "message": "Quy trình làm việc {action} thành công"
+        },
+        "error": {
+          "title": "Lỗi",
+          "message": "Quy trình làm việc không thể {action}. Vui lòng thử lại."
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "Thành công",
+          "message": "Quy trình làm việc đặt lại thành công"
+        },
+        "error": {
+          "title": "Lỗi đặt lại quy trình làm việc",
+          "message": "Quy trình làm việc không thể đặt lại. Vui lòng thử lại."
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "Lỗi thêm quy tắc thay đổi trạng thái",
+          "message": "Quy tắc thay đổi trạng thái không thể thêm. Vui lòng thử lại."
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "Lỗi sửa đổi quy tắc thay đổi trạng thái",
+          "message": "Quy tắc thay đổi trạng thái không thể sửa đổi. Vui lòng thử lại."
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "Lỗi xóa quy tắc thay đổi trạng thái",
+          "message": "Quy tắc thay đổi trạng thái không thể xóa. Vui lòng thử lại."
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "Lỗi sửa đổi người xem xét quy tắc thay đổi trạng thái",
+          "message": "Người xem xét quy tắc thay đổi trạng thái không thể sửa đổi. Vui lòng thử lại."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/workspace-settings.json b/packages/i18n/src/locales/vi-VN/workspace-settings.json
new file mode 100644
index 0000000..f15c5f2
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "Cài đặt không gian làm việc",
+    "page_label": "{workspace} - Cài đặt chung",
+    "key_created": "Đã tạo khóa",
+    "copy_key": "Sao chép và lưu khóa này trong Plane Pages. Bạn sẽ không thể thấy khóa này sau khi đóng. Tệp CSV chứa khóa đã được tải xuống.",
+    "token_copied": "Đã sao chép token vào bảng tạm.",
+    "settings": {
+      "general": {
+        "title": "Chung",
+        "upload_logo": "Tải lên logo",
+        "edit_logo": "Chỉnh sửa logo",
+        "name": "Tên không gian làm việc",
+        "company_size": "Quy mô công ty",
+        "url": "URL không gian làm việc",
+        "workspace_timezone": "Múi giờ không gian làm việc",
+        "update_workspace": "Cập nhật không gian làm việc",
+        "delete_workspace": "Xóa không gian làm việc này",
+        "delete_workspace_description": "Khi xóa không gian làm việc, tất cả dữ liệu và tài nguyên trong không gian làm việc đó sẽ bị xóa vĩnh viễn và không thể khôi phục.",
+        "delete_btn": "Xóa không gian làm việc này",
+        "delete_modal": {
+          "title": "Bạn có chắc chắn muốn xóa không gian làm việc này không?",
+          "description": "Bạn hiện đang dùng thử gói trả phí của chúng tôi. Vui lòng hủy dùng thử trước khi tiếp tục.",
+          "dismiss": "Đóng",
+          "cancel": "Hủy dùng thử",
+          "success_title": "Đã xóa không gian làm việc.",
+          "success_message": "Sắp chuyển hướng đến trang hồ sơ của bạn.",
+          "error_title": "Thao tác thất bại.",
+          "error_message": "Vui lòng thử lại."
+        },
+        "errors": {
+          "name": {
+            "required": "Tên là bắt buộc",
+            "max_length": "Tên không gian làm việc không nên vượt quá 80 ký tự"
+          },
+          "company_size": {
+            "required": "Quy mô công ty là bắt buộc",
+            "select_a_range": "Chọn quy mô tổ chức"
+          }
+        }
+      },
+      "members": {
+        "title": "Thành viên",
+        "add_member": "Thêm thành viên",
+        "pending_invites": "Lời mời đang chờ xử lý",
+        "invitations_sent_successfully": "Đã gửi lời mời thành công",
+        "leave_confirmation": "Bạn có chắc chắn muốn rời khỏi không gian làm việc này không? Bạn sẽ không thể truy cập không gian làm việc này nữa. Hành động này không thể hoàn tác.",
+        "details": {
+          "full_name": "Tên đầy đủ",
+          "display_name": "Tên hiển thị",
+          "email_address": "Địa chỉ email",
+          "account_type": "Loại tài khoản",
+          "authentication": "Xác thực",
+          "joining_date": "Ngày tham gia"
+        },
+        "modal": {
+          "title": "Mời người cộng tác",
+          "description": "Mời người cộng tác trong không gian làm việc của bạn.",
+          "button": "Gửi lời mời",
+          "button_loading": "Đang gửi lời mời",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "Chúng tôi cần một địa chỉ email để mời họ.",
+            "invalid": "Email không hợp lệ"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "Thanh toán và Kế hoạch",
+        "description": "Chọn gói của bạn, quản lý đăng ký và dễ dàng nâng cấp khi nhu cầu của bạn phát triển.",
+        "title": "Thanh toán và Kế hoạch",
+        "current_plan": "Kế hoạch hiện tại",
+        "free_plan": "Bạn đang sử dụng kế hoạch miễn phí",
+        "view_plans": "Xem kế hoạch"
+      },
+      "exports": {
+        "heading": "Xuất",
+        "description": "Xuất dữ liệu dự án của bạn dưới nhiều định dạng và truy cập lịch sử xuất với các liên kết tải xuống.",
+        "title": "Xuất",
+        "exporting": "Đang xuất",
+        "previous_exports": "Xuất trước đây",
+        "export_separate_files": "Xuất dữ liệu thành các tệp riêng biệt",
+        "exporting_projects": "Đang xuất dự án",
+        "format": "Định dạng",
+        "filters_info": "Áp dụng bộ lọc để xuất các mục công việc cụ thể dựa trên tiêu chí của bạn.",
+        "modal": {
+          "title": "Xuất đến",
+          "toasts": {
+            "success": {
+              "title": "Xuất thành công",
+              "message": "Bạn có thể tải xuống {entity} đã xuất từ phần xuất trước đây"
+            },
+            "error": {
+              "title": "Xuất thất bại",
+              "message": "Xuất không thành công. Vui lòng thử lại."
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhook",
+        "description": "Tự động hóa thông báo đến các dịch vụ bên ngoài khi các sự kiện dự án xảy ra.",
+        "title": "Webhooks",
+        "add_webhook": "Thêm webhook",
+        "modal": {
+          "title": "Tạo webhook",
+          "details": "Chi tiết Webhook",
+          "payload": "URL tải",
+          "question": "Bạn muốn những sự kiện nào kích hoạt webhook này?",
+          "error": "URL là bắt buộc"
+        },
+        "secret_key": {
+          "title": "Khóa bí mật",
+          "message": "Tạo token để đăng nhập tải webhook"
+        },
+        "options": {
+          "all": "Gửi tất cả",
+          "individual": "Chọn từng sự kiện"
+        },
+        "toasts": {
+          "created": {
+            "title": "Đã tạo Webhook",
+            "message": "Webhook đã được tạo thành công"
+          },
+          "not_created": {
+            "title": "Chưa tạo Webhook",
+            "message": "Không thể tạo webhook"
+          },
+          "updated": {
+            "title": "Đã cập nhật Webhook",
+            "message": "Webhook đã được cập nhật thành công"
+          },
+          "not_updated": {
+            "title": "Chưa cập nhật Webhook",
+            "message": "Không thể cập nhật webhook"
+          },
+          "removed": {
+            "title": "Đã xóa Webhook",
+            "message": "Webhook đã được xóa thành công"
+          },
+          "not_removed": {
+            "title": "Chưa xóa Webhook",
+            "message": "Không thể xóa webhook"
+          },
+          "secret_key_copied": {
+            "message": "Đã sao chép khóa bí mật vào bảng tạm."
+          },
+          "secret_key_not_copied": {
+            "message": "Đã xảy ra lỗi khi sao chép khóa bí mật."
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "Token API",
+        "description": "Tạo token API bảo mật để tích hợp dữ liệu của bạn với các hệ thống và ứng dụng bên ngoài.",
+        "title": "Token API",
+        "add_token": "Thêm token truy cập",
+        "create_token": "Tạo token",
+        "never_expires": "Không bao giờ hết hạn",
+        "generate_token": "Tạo token",
+        "generating": "Đang tạo",
+        "delete": {
+          "title": "Xóa token API",
+          "description": "Bất kỳ ứng dụng nào sử dụng token này sẽ không thể truy cập dữ liệu Plane nữa. Hành động này không thể hoàn tác.",
+          "success": {
+            "title": "Thành công!",
+            "message": "Đã xóa token API thành công"
+          },
+          "error": {
+            "title": "Lỗi!",
+            "message": "Không thể xóa token API"
+          }
+        }
+      },
+      "integrations": {
+        "title": "Tích hợp",
+        "heading": "Tích hợp",
+        "description": "Kết nối với các công cụ và dịch vụ phổ biến để đồng bộ hóa công việc của bạn trong toàn bộ hệ sinh thái quy trình làm việc.",
+        "page_title": "Làm việc với dữ liệu Plane của bạn trong các ứng dụng có sẵn hoặc ứng dụng riêng của bạn.",
+        "page_description": "Xem tất cả các tích hợp được workspace này hoặc bạn đang sử dụng."
+      },
+      "imports": {
+        "title": "Nhập dữ liệu",
+        "heading": "Nhập",
+        "description": "Kết nối và nhập dữ liệu từ các công cụ quản lý dự án hiện có của bạn để tinh giản việc tích hợp quy trình làm việc."
+      },
+      "worklogs": {
+        "title": "Nhật ký công việc",
+        "heading": "Nhật ký công việc",
+        "description": "Tải xuống nhật ký công việc (bảng chấm công) cho bất kỳ ai trong bất kỳ dự án nào."
+      },
+      "group_syncing": {
+        "title": "Đồng bộ nhóm",
+        "heading": "Đồng bộ nhóm",
+        "description": "Liên kết các nhóm nhà cung cấp danh tính với dự án và vai trò. Quyền truy cập người dùng được cập nhật tự động khi thành viên nhóm thay đổi trong IdP của bạn, đơn giản hóa quy trình onboarding và offboarding.",
+        "enable": {
+          "title": "Bật đồng bộ nhóm",
+          "description": "Tự động thêm người dùng vào dự án dựa trên các nhóm nhà cung cấp danh tính."
+        },
+        "config": {
+          "title": "Cấu hình đồng bộ nhóm",
+          "description": "Thiết lập cách các nhóm nhà cung cấp danh tính được ánh xạ tới dự án và vai trò.",
+          "sync_on_login": {
+            "title": "Đồng bộ khi đăng nhập",
+            "description": "Cập nhật thành viên nhóm và quyền truy cập dự án khi người dùng đăng nhập."
+          },
+          "sync_offline": {
+            "title": "Đồng bộ ngoại tuyến",
+            "description": "Chạy đồng bộ mỗi sáu giờ tự động, không cần chờ người dùng đăng nhập."
+          },
+          "auto_remove": {
+            "title": "Tự động xóa",
+            "description": "Tự động xóa người dùng khỏi dự án khi họ không còn khớp với nhóm."
+          },
+          "group_attribute_key": {
+            "title": "Khóa thuộc tính nhóm",
+            "description": "Thuộc tính nhà cung cấp danh tính dùng để xác định và đồng bộ nhóm người dùng.",
+            "placeholder": "Nhóm"
+          }
+        },
+        "group_mapping": {
+          "title": "Ánh xạ nhóm",
+          "description": "Liên kết các nhóm nhà cung cấp danh tính với dự án và vai trò.",
+          "button_text": "Thêm đồng bộ nhóm mới"
+        },
+        "toast": {
+          "updating": "Đang cập nhật tính năng đồng bộ nhóm",
+          "success": "Tính năng đồng bộ nhóm đã được cập nhật thành công.",
+          "error": "Cập nhật tính năng đồng bộ nhóm thất bại!"
+        },
+        "delete_modal": {
+          "title": "Xóa đồng bộ nhóm",
+          "content": "Người dùng mới từ nhóm danh tính này sẽ không còn được thêm vào dự án. Người dùng đã thêm sẽ giữ vai trò hiện tại của họ."
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "Nhóm người dùng",
+            "required": "Nhóm người dùng là bắt buộc",
+            "placeholder": "Nhập tên nhóm IdP"
+          },
+          "project": {
+            "text": "Dự án",
+            "required": "Dự án là bắt buộc",
+            "placeholder": "Chọn dự án"
+          },
+          "default_role": {
+            "text": "Vai trò dự án",
+            "required": "Vai trò dự án là bắt buộc",
+            "placeholder": "Chọn vai trò dự án"
+          }
+        }
+      },
+      "identity": {
+        "title": "Danh tính",
+        "heading": "Danh tính",
+        "description": "Cấu hình miền của bạn và bật Đăng nhập một lần"
+      },
+      "project_states": {
+        "title": "Trạng thái dự án",
+        "heading": "Xem tổng quan tiến độ cho tất cả dự án.",
+        "description": "Trạng thái Dự án là tính năng chỉ có trong Plane để theo dõi tiến độ của tất cả các dự án của bạn theo bất kỳ thuộc tính dự án nào.",
+        "go_to_settings": "Đi đến cài đặt"
+      },
+      "projects": {
+        "title": "Dự án",
+        "description": "Quản lý trạng thái dự án, bật nhãn dự án và các cấu hình khác.",
+        "tabs": {
+          "states": "Trạng thái dự án",
+          "labels": "Nhãn dự án"
+        }
+      },
+      "templates": {
+        "title": "Mẫu",
+        "heading": "Mẫu",
+        "description": "Tiết kiệm 80% thời gian dành cho việc tạo dự án, mục công việc và trang khi bạn sử dụng mẫu."
+      },
+      "relations": {
+        "title": "Quan hệ",
+        "heading": "Quan hệ",
+        "description": "Tạo và quản lý các loại quan hệ kết nối các mục công việc trong không gian làm việc của bạn."
+      },
+      "cancel_trial": {
+        "title": "Hủy bỏ dùng thử trước.",
+        "description": "Bạn đang có gói dùng thử cho một trong các gói trả phí của chúng tôi. Vui lòng hủy nó trước để tiếp tục.",
+        "dismiss": "Bỏ qua",
+        "cancel": "Hủy dùng thử",
+        "cancel_success_title": "Đã hủy dùng thử.",
+        "cancel_success_message": "Bây giờ bạn có thể xóa workspace.",
+        "cancel_error_title": "Điều đó không hoạt động.",
+        "cancel_error_message": "Vui lòng thử lại."
+      },
+      "applications": {
+        "internal": "Nội bộ",
+        "title": "Ứng dụng",
+        "applicationId_copied": "ID ứng dụng đã được sao chép vào clipboard",
+        "clientId_copied": "ID khách hàng đã được sao chép vào clipboard",
+        "clientSecret_copied": "Secret khách hàng đã được sao chép vào clipboard",
+        "third_party_apps": "Ứng dụng thứ ba",
+        "your_apps": "Ứng dụng của bạn",
+        "connect": "Kết nối",
+        "connected": "Đã kết nối",
+        "disconnect": "Ngắt kết nối",
+        "install": "Cài đặt",
+        "installed": "Đã cài đặt",
+        "configure": "Cấu hình",
+        "app_available": "Bạn đã làm cho ứng dụng này có sẵn để sử dụng với một workspace Plane",
+        "app_credentials_regenrated": {
+          "title": "Thông tin xác thực ứng dụng đã được tạo lại thành công",
+          "description": "Thay thế client secret ở mọi nơi nó được sử dụng. Secret trước đó không còn hợp lệ."
+        },
+        "app_created": {
+          "title": "Ứng dụng đã được tạo thành công",
+          "description": "Sử dụng thông tin xác thực để cài đặt ứng dụng trong không gian làm việc Plane"
+        },
+        "installed_apps": "Ứng dụng đã cài đặt",
+        "all_apps": "Tất cả ứng dụng",
+        "internal_apps": "Ứng dụng nội bộ",
+        "app_name_title": "Bạn sẽ gọi ứng dụng này là gì",
+        "app_description_title": {
+          "label": "Mô tả dài",
+          "placeholder": "Viết mô tả dài cho marketplace. Nhấn '/' để xem lệnh."
+        },
+        "authorization_grant_type": {
+          "title": "Loại kết nối",
+          "description": "Chọn liệu ứng dụng của bạn nên được cài đặt một lần cho không gian làm việc hay để mỗi người dùng kết nối tài khoản riêng của họ"
+        },
+        "website": {
+          "title": "Trang web",
+          "description": "Liên kết đến trang web của ứng dụng của bạn.",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "Trình tạo ứng dụng",
+          "description": "Người hoặc tổ chức tạo ra ứng dụng."
+        },
+        "app_maker_error": "Người tạo ứng dụng là bắt buộc",
+        "setup_url": {
+          "label": "URL thiết lập",
+          "description": "Người dùng sẽ được chuyển hướng đến URL này khi họ cài đặt ứng dụng.",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "URL webhook",
+          "description": "Đây là nơi chúng tôi sẽ gửi các sự kiện và cập nhật webhook từ các workspace nơi ứng dụng của bạn được cài đặt.",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Khóa bí mật Webhook",
+          "description": "Khóa bí mật được sử dụng để xác minh các yêu cầu webhook đến.",
+          "placeholder": "Nhập một khóa bí mật ngẫu nhiên"
+        },
+        "redirect_uris": {
+          "label": "URI chuyển hướng (cách nhau bằng dấu cách)",
+          "description": "Người dùng sẽ được chuyển hướng đến đường dẫn này sau khi xác thực với Plane.",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "Kết nối một workspace Plane để bắt đầu sử dụng nó",
+        "client_id_and_secret": "ID khách hàng và Secret",
+        "client_id_and_secret_description": "Sao chép và lưu khóa bí mật này trong Pages. Bạn không thể nhìn thấy khóa này lại sau khi bạn đóng.",
+        "client_id_and_secret_download": "Bạn có thể tải xuống một CSV với khóa từ đây.",
+        "application_id": "ID ứng dụng",
+        "client_id": "ID khách hàng",
+        "client_secret": "Secret khách hàng",
+        "export_as_csv": "Xuất ra CSV",
+        "slug_already_exists": "Slug đã tồn tại",
+        "failed_to_create_application": "Không thể tạo ứng dụng",
+        "upload_logo": "Tải lên Logo",
+        "app_name_error": "Tên ứng dụng là bắt buộc",
+        "app_short_description_title": "Đưa ra một mô tả ngắn cho ứng dụng này",
+        "app_short_description_error": "Mô tả ngắn ứng dụng là bắt buộc",
+        "app_description_error": "Mô tả ứng dụng là bắt buộc",
+        "app_slug_title": "Slug ứng dụng",
+        "app_slug_error": "Slug ứng dụng là bắt buộc",
+        "invalid_website_error": "Trang web không hợp lệ",
+        "webhook_url_title": "URL Webhook",
+        "webhook_url_error": "URL Webhook là bắt buộc",
+        "invalid_webhook_url_error": "URL Webhook không hợp lệ",
+        "redirect_uris_title": "Redirect URIs",
+        "redirect_uris_error": "Redirect URIs là bắt buộc",
+        "invalid_redirect_uris_error": "Redirect URIs không hợp lệ",
+        "redirect_uris_description": "Nhập các URI cách nhau bởi dấu cách mà ứng dụng sẽ chuyển hướng sau khi người dùng e.g https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "Authorized Javascript Origins",
+        "authorized_javascript_origins_error": "Authorized Javascript Origins là bắt buộc",
+        "invalid_authorized_javascript_origins_error": "Authorized Javascript Origins không hợp lệ",
+        "authorized_javascript_origins_description": "Nhập các nguồn cách nhau bởi dấu cách mà ứng dụng sẽ được phép thực hiện yêu cầu e.g app.com example.com",
+        "create_app": "Tạo ứng dụng",
+        "update_app": "Cập nhật ứng dụng",
+        "build_your_own_app": "Tạo ứng dụng của riêng bạn",
+        "edit_app_details": "Chỉnh sửa chi tiết ứng dụng",
+        "regenerate_client_secret_description": "Tạo lại khóa bí mật. Nếu bạn tạo lại khóa, bạn có thể sao chép khóa hoặc tải xuống nó thành một tệp CSV ngay sau đó.",
+        "regenerate_client_secret": "Tạo lại khóa bí mật",
+        "regenerate_client_secret_confirm_title": "Bạn có chắc chắn muốn tạo lại khóa bí mật?",
+        "regenerate_client_secret_confirm_description": "Ứng dụng sử dụng khóa này sẽ ngừng hoạt động. Bạn sẽ cần cập nhật khóa trong ứng dụng.",
+        "regenerate_client_secret_confirm_cancel": "Hủy bỏ",
+        "regenerate_client_secret_confirm_regenerate": "Regenerate",
+        "read_only_access_to_workspace": "Truy cập chỉ đọc vào workspace của bạn",
+        "write_access_to_workspace": "Truy cập viết vào workspace của bạn",
+        "read_only_access_to_user_profile": "Truy cập chỉ đọc vào hồ sơ người dùng của bạn",
+        "write_access_to_user_profile": "Truy cập viết vào hồ sơ người dùng của bạn",
+        "connect_app_to_workspace": "Kết nối {app} vào workspace của bạn {workspace}",
+        "user_permissions": "Quyền người dùng",
+        "user_permissions_description": "Quyền người dùng được sử dụng để cấp quyền truy cập vào hồ sơ người dùng.",
+        "workspace_permissions": "Quyền workspace",
+        "workspace_permissions_description": "Quyền workspace được sử dụng để cấp quyền truy cập vào workspace.",
+        "with_the_permissions": "với quyền",
+        "app_consent_title": "{app} đang yêu cầu truy cập vào workspace Plane của bạn và hồ sơ.",
+        "choose_workspace_to_connect_app_with": "Chọn một workspace để kết nối ứng dụng",
+        "app_consent_workspace_permissions_title": "{app} muốn",
+        "app_consent_user_permissions_title": "{app} cũng có thể yêu cầu quyền của người dùng cho các tài nguyên sau. Các quyền này sẽ được yêu cầu và được cấp phép chỉ bởi một người dùng.",
+        "app_consent_accept_title": "Bằng cách chấp nhận, bạn",
+        "app_consent_accept_1": "Cấp quyền truy cập vào dữ liệu Plane của bạn ở bất kỳ đâu bạn có thể sử dụng ứng dụng bên trong hoặc ngoài Plane",
+        "app_consent_accept_2": "Đồng ý với Chính sách bảo mật và Điều khoản sử dụng của {app}",
+        "accepting": "Đang chấp nhận...",
+        "accept": "Chấp nhận",
+        "categories": "Danh mục",
+        "select_app_categories": "Chọn danh mục ứng dụng",
+        "categories_title": "Danh mục",
+        "categories_error": "Danh mục là bắt buộc",
+        "invalid_categories_error": "Danh mục không hợp lệ",
+        "categories_description": "Chọn các danh mục phù hợp nhất với ứng dụng",
+        "supported_plans": "Gói được Hỗ trợ",
+        "supported_plans_description": "Chọn các gói không gian làm việc có thể cài đặt ứng dụng này. Để trống để cho phép tất cả các gói.",
+        "select_plans": "Chọn Gói",
+        "privacy_policy_url_title": "URL Chính sách bảo mật",
+        "privacy_policy_url_error": "URL Chính sách bảo mật là bắt buộc",
+        "invalid_privacy_policy_url_error": "URL Chính sách bảo mật không hợp lệ",
+        "terms_of_service_url_title": "URL Điều khoản sử dụng",
+        "terms_of_service_url_error": "URL Điều khoản sử dụng là bắt buộc",
+        "invalid_terms_of_service_url_error": "URL Điều khoản sử dụng không hợp lệ",
+        "support_url_title": "URL Hỗ trợ",
+        "support_url_error": "URL Hỗ trợ là bắt buộc",
+        "invalid_support_url_error": "URL Hỗ trợ không hợp lệ",
+        "video_url_title": "URL Video",
+        "video_url_error": "URL Video là bắt buộc",
+        "invalid_video_url_error": "URL Video không hợp lệ",
+        "setup_url_error": "URL Cài đặt là bắt buộc",
+        "invalid_setup_url_error": "URL Cài đặt không hợp lệ",
+        "configuration_url_title": "URL Cấu hình",
+        "configuration_url_error": "URL Cấu hình là bắt buộc",
+        "invalid_configuration_url_error": "URL Cấu hình không hợp lệ",
+        "contact_email_title": "Email Liên hệ",
+        "contact_email_error": "Email Liên hệ là bắt buộc",
+        "invalid_contact_email_error": "Email Liên hệ không hợp lệ",
+        "upload_attachments": "Tải lên tệp đính kèm",
+        "uploading_images": "Tải lên {count, plural, one {hình ảnh} other {hình ảnh}}",
+        "drop_images_here": "Đặt hình ảnh vào đây",
+        "click_to_upload_images": "Nhấp để tải lên hình ảnh",
+        "invalid_file_or_exceeds_size_limit": "Tệp không hợp lệ hoặc vượt quá giới hạn kích thước ({size} MB)",
+        "uploading": "Đang tải lên...",
+        "upload_and_save": "Tải lên và lưu",
+        "app_consent_no_access_title": "Yêu cầu cài đặt",
+        "app_consent_no_access_description": "Ứng dụng này chỉ có thể được cài đặt sau khi quản trị viên workspace cài đặt nó. Liên hệ với quản trị viên workspace của bạn để tiếp tục.",
+        "app_consent_unapproved_title": "Ứng dụng này chưa được Plane xem xét hoặc phê duyệt.",
+        "app_consent_unapproved_description": "Hãy chắc chắn rằng bạn tin tưởng ứng dụng này trước khi kết nối nó với không gian làm việc của bạn.",
+        "go_to_app": "Đi đến ứng dụng",
+        "enable_app_mentions": "Bật đề cập ứng dụng",
+        "enable_app_mentions_tooltip": "Khi bật tính năng này, người dùng có thể đề cập hoặc gán Work Items cho ứng dụng này.",
+        "scopes": "Phạm vi",
+        "select_scopes": "Chọn phạm vi",
+        "read_access_to": "Quyền truy cập chỉ đọc tới",
+        "write_access_to": "Quyền truy cập ghi tới",
+        "global_permission_expiration": "Phạm vi toàn cục sắp hết hạn. Thay vào đó hãy dùng phạm vi chi tiết. Ví dụ: dùng project:read thay vì đọc toàn cục.",
+        "selected_scopes": "Đã chọn {count}",
+        "scopes_and_permissions": "Phạm vi & Quyền",
+        "read": "Đọc",
+        "write": "Ghi",
+        "scope_description": {
+          "projects": "Truy cập dự án và mọi thực thể liên quan đến dự án",
+          "wiki": "Truy cập wiki và mọi thực thể liên quan đến wiki",
+          "workspaces": "Truy cập không gian làm việc và mọi thực thể liên quan",
+          "stickies": "Truy cập ghi chú dán và mọi thực thể liên quan",
+          "profile": "Truy cập thông tin hồ sơ người dùng",
+          "agents": "Truy cập vào agents và tất cả các thực thể liên quan đến agent",
+          "assets": "Truy cập vào tài sản và tất cả các thực thể liên quan đến tài sản"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "Xem công việc của bạn trở nên thông minh và nhanh hơn với AI được kết nối một cách tự nhiên với công việc và cơ sở kiến thức của bạn."
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "Script",
+        "new_script": "Script mới",
+        "description": "Tự động hóa quy trình làm việc của bạn với các script và quy tắc tự động hóa tùy chỉnh."
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "Chưa tạo token API",
+        "description": "API Plane có thể được sử dụng để tích hợp dữ liệu Plane của bạn với bất kỳ hệ thống bên ngoài nào. Tạo token để bắt đầu."
+      },
+      "webhooks": {
+        "title": "Chưa thêm webhook",
+        "description": "Tạo webhook để nhận cập nhật theo thời gian thực và tự động hóa hành động."
+      },
+      "exports": {
+        "title": "Chưa có xuất dữ liệu",
+        "description": "Mỗi khi xuất, bạn sẽ có một bản sao ở đây để tham khảo."
+      },
+      "imports": {
+        "title": "Chưa có nhập dữ liệu",
+        "description": "Tìm tất cả các lần nhập trước đây và tải xuống chúng tại đây."
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/vi-VN/workspace.json b/packages/i18n/src/locales/vi-VN/workspace.json
new file mode 100644
index 0000000..4b7418d
--- /dev/null
+++ b/packages/i18n/src/locales/vi-VN/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "Tạo không gian làm việc của bạn",
+    "subheading": "Để bắt đầu với Plane, bạn cần tạo hoặc tham gia một không gian làm việc.",
+    "form": {
+      "name": {
+        "label": "Đặt tên cho không gian làm việc của bạn",
+        "placeholder": "Một tên quen thuộc và dễ nhận diện luôn là tốt nhất."
+      },
+      "url": {
+        "label": "Thiết lập URL không gian làm việc của bạn",
+        "placeholder": "Nhập hoặc dán URL",
+        "edit_slug": "Bạn chỉ có thể chỉnh sửa phần định danh của URL"
+      },
+      "organization_size": {
+        "label": "Có bao nhiêu người sẽ sử dụng không gian làm việc này?",
+        "placeholder": "Chọn một phạm vi"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "Chỉ quản trị viên hệ thống của bạn mới có thể tạo không gian làm việc",
+        "description": "Nếu bạn biết địa chỉ email của quản trị viên hệ thống, hãy nhấp vào nút bên dưới để liên hệ với họ.",
+        "request_button": "Yêu cầu quản trị viên hệ thống"
+      },
+      "validation": {
+        "name_alphanumeric": "Tên không gian làm việc chỉ có thể chứa (' '), ('-'), ('_') và các ký tự chữ số.",
+        "name_length": "Tên giới hạn trong 80 ký tự.",
+        "url_alphanumeric": "URL chỉ có thể chứa ('-') và các ký tự chữ số.",
+        "url_length": "URL giới hạn trong 48 ký tự.",
+        "url_already_taken": "URL không gian làm việc đã được sử dụng!"
+      }
+    },
+    "request_email": {
+      "subject": "Yêu cầu không gian làm việc mới",
+      "body": "Xin chào Quản trị viên hệ thống:\n\nVui lòng tạo một không gian làm việc mới có URL là [/workspace-name] cho [mục đích tạo không gian làm việc].\n\nCảm ơn,\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "Tạo không gian làm việc",
+      "loading": "Đang tạo không gian làm việc"
+    },
+    "toast": {
+      "success": {
+        "title": "Thành công",
+        "message": "Đã tạo không gian làm việc thành công"
+      },
+      "error": {
+        "title": "Lỗi",
+        "message": "Tạo không gian làm việc thất bại. Vui lòng thử lại."
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "Tổng quan về dự án, hoạt động và chỉ số",
+        "description": "Chào mừng đến với Plane, chúng tôi rất vui khi bạn ở đây. Tạo dự án đầu tiên của bạn và theo dõi mục công việc, trang này sẽ trở thành không gian giúp bạn tiến triển. Quản trị viên cũng sẽ thấy dự án giúp nhóm tiến triển.",
+        "primary_button": {
+          "text": "Xây dựng dự án đầu tiên của bạn",
+          "comic": {
+            "title": "Trong Plane, mọi thứ đều bắt đầu với dự án",
+            "description": "Dự án có thể là lộ trình sản phẩm, chiến dịch tiếp thị hoặc ra mắt xe mới."
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "Phân tích",
+    "page_label": "{workspace} - Phân tích",
+    "open_tasks": "Tổng nhiệm vụ đang mở",
+    "error": "Đã xảy ra lỗi khi truy xuất dữ liệu.",
+    "work_items_closed_in": "Mục công việc đã đóng trong",
+    "selected_projects": "Dự án đã chọn",
+    "total_members": "Tổng số thành viên",
+    "total_cycles": "Tổng số chu kỳ",
+    "total_modules": "Tổng số mô-đun",
+    "pending_work_items": {
+      "title": "Mục công việc đang chờ xử lý",
+      "empty_state": "Phân tích mục công việc đang chờ xử lý của đồng nghiệp sẽ hiển thị ở đây."
+    },
+    "work_items_closed_in_a_year": {
+      "title": "Mục công việc đã đóng trong một năm",
+      "empty_state": "Đóng mục công việc để xem phân tích dưới dạng biểu đồ."
+    },
+    "most_work_items_created": {
+      "title": "Tạo nhiều mục công việc nhất",
+      "empty_state": "Đồng nghiệp và số lượng mục công việc họ đã tạo sẽ hiển thị ở đây."
+    },
+    "most_work_items_closed": {
+      "title": "Đóng nhiều mục công việc nhất",
+      "empty_state": "Đồng nghiệp và số lượng mục công việc họ đã đóng sẽ hiển thị ở đây."
+    },
+    "tabs": {
+      "scope_and_demand": "Phạm vi và nhu cầu",
+      "custom": "Phân tích tùy chỉnh"
+    },
+    "total": "Tổng số {entity}",
+    "started_work_items": "{entity} đã bắt đầu",
+    "backlog_work_items": "{entity} tồn đọng",
+    "un_started_work_items": "{entity} chưa bắt đầu",
+    "completed_work_items": "{entity} đã hoàn thành",
+    "project_insights": "Thông tin chi tiết dự án",
+    "summary_of_projects": "Tóm tắt dự án",
+    "all_projects": "Tất cả dự án",
+    "trend_on_charts": "Xu hướng trên biểu đồ",
+    "active_projects": "Dự án đang hoạt động",
+    "customized_insights": "Thông tin chi tiết tùy chỉnh",
+    "created_vs_resolved": "Đã tạo vs Đã giải quyết",
+    "empty_state": {
+      "project_insights": {
+        "title": "Chưa có dữ liệu",
+        "description": "Các hạng mục công việc được giao cho bạn, phân loại theo trạng thái, sẽ hiển thị tại đây."
+      },
+      "created_vs_resolved": {
+        "title": "Chưa có dữ liệu",
+        "description": "Các hạng mục công việc được tạo và giải quyết theo thời gian sẽ hiển thị tại đây."
+      },
+      "customized_insights": {
+        "title": "Chưa có dữ liệu",
+        "description": "Các hạng mục công việc được giao cho bạn, phân loại theo trạng thái, sẽ hiển thị tại đây."
+      },
+      "general": {
+        "title": "Theo dõi tiến độ, khối lượng công việc và phân bổ. Phát hiện xu hướng, loại bỏ rào cản và tăng tốc công việc",
+        "description": "Xem phạm vi so với nhu cầu, ước tính và mở rộng phạm vi. Theo dõi hiệu suất của các thành viên trong nhóm và đội nhóm, đảm bảo dự án của bạn hoạt động đúng tiến độ.",
+        "primary_button": {
+          "text": "Bắt đầu dự án đầu tiên của bạn",
+          "comic": {
+            "title": "Phân tích hoạt động tốt nhất với Chu kỳ + Mô-đun",
+            "description": "Đầu tiên, giới hạn thời gian các vấn đề của bạn trong Chu kỳ và, nếu có thể, nhóm các vấn đề kéo dài hơn một chu kỳ vào Mô-đun. Kiểm tra cả hai trong điều hướng bên trái."
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "Chưa có dữ liệu",
+        "description": "Phân tích tiến độ chu kỳ sẽ hiển thị ở đây. Thêm các hạng mục công việc vào chu kỳ để bắt đầu theo dõi tiến độ."
+      },
+      "module_progress": {
+        "title": "Chưa có dữ liệu",
+        "description": "Phân tích tiến độ mô-đun sẽ hiển thị ở đây. Thêm các hạng mục công việc vào mô-đun để bắt đầu theo dõi tiến độ."
+      },
+      "intake_trends": {
+        "title": "Chưa có dữ liệu",
+        "description": "Phân tích xu hướng intake sẽ hiển thị ở đây. Thêm các hạng mục công việc vào intake để bắt đầu theo dõi xu hướng."
+      }
+    },
+    "upgrade_to_plan": "Nâng cấp lên {plan} để mở khóa {tab}",
+    "workitem_resolved_vs_pending": "Mục công việc đã giải quyết vs đang chờ",
+    "projects_by_status": "Dự án theo trạng thái",
+    "active_users": "Người dùng hoạt động",
+    "intake_trends": "Xu hướng tiếp nhận"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {dự án} other {dự án}}",
+    "create": {
+      "label": "Thêm dự án"
+    },
+    "network": {
+      "label": "Mạng",
+      "private": {
+        "title": "Riêng tư",
+        "description": "Chỉ truy cập bằng lời mời"
+      },
+      "public": {
+        "title": "Công khai",
+        "description": "Bất kỳ ai trong không gian làm việc ngoại trừ khách đều có thể tham gia"
+      }
+    },
+    "error": {
+      "permission": "Bạn không có quyền thực hiện thao tác này.",
+      "cycle_delete": "Xóa chu kỳ thất bại",
+      "module_delete": "Xóa mô-đun thất bại",
+      "issue_delete": "Xóa mục công việc thất bại"
+    },
+    "state": {
+      "backlog": "Tồn đọng",
+      "unstarted": "Chưa bắt đầu",
+      "started": "Đang tiến hành",
+      "completed": "Đã hoàn thành",
+      "cancelled": "Đã hủy"
+    },
+    "sort": {
+      "manual": "Thủ công",
+      "name": "Tên",
+      "created_at": "Ngày tạo",
+      "members_length": "Số lượng thành viên"
+    },
+    "scope": {
+      "my_projects": "Dự án của tôi",
+      "archived_projects": "Đã lưu trữ"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# tháng} other{# tháng}}",
+      "days_count": "{days, plural, one{# ngày} other{# ngày}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Không có dự án hoạt động",
+        "description": "Coi mỗi dự án như là cấp cha của công việc định hướng mục tiêu. Dự án là nơi chứa mục công việc, chu kỳ và mô-đun, cùng với đồng nghiệp giúp bạn đạt được mục tiêu. Tạo dự án mới hoặc lọc dự án đã lưu trữ.",
+        "primary_button": {
+          "text": "Bắt đầu dự án đầu tiên của bạn",
+          "comic": {
+            "title": "Trong Plane, mọi thứ đều bắt đầu với dự án",
+            "description": "Dự án có thể là lộ trình sản phẩm, chiến dịch tiếp thị hoặc ra mắt xe mới."
+          }
+        }
+      },
+      "no_projects": {
+        "title": "Không có dự án",
+        "description": "Để tạo mục công việc hoặc quản lý công việc của bạn, bạn cần tạo dự án hoặc trở thành một phần của dự án.",
+        "primary_button": {
+          "text": "Bắt đầu dự án đầu tiên của bạn",
+          "comic": {
+            "title": "Trong Plane, mọi thứ đều bắt đầu với dự án",
+            "description": "Dự án có thể là lộ trình sản phẩm, chiến dịch tiếp thị hoặc ra mắt xe mới."
+          }
+        }
+      },
+      "filter": {
+        "title": "Không có dự án phù hợp",
+        "description": "Không phát hiện dự án nào phù hợp với điều kiện tìm kiếm.\nTạo dự án mới."
+      },
+      "search": {
+        "description": "Không phát hiện dự án nào phù hợp với điều kiện tìm kiếm.\nTạo dự án mới"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "Thêm chế độ xem",
+    "empty_state": {
+      "all-issues": {
+        "title": "Không có mục công việc trong dự án",
+        "description": "Dự án đầu tiên hoàn thành! Bây giờ, hãy chia nhỏ công việc của bạn thành các mục công việc có thể theo dõi. Hãy bắt đầu nào!",
+        "primary_button": {
+          "text": "Tạo mục công việc mới"
+        }
+      },
+      "assigned": {
+        "title": "Chưa có mục công việc",
+        "description": "Mục công việc được giao cho bạn có thể được theo dõi tại đây.",
+        "primary_button": {
+          "text": "Tạo mục công việc mới"
+        }
+      },
+      "created": {
+        "title": "Chưa có mục công việc",
+        "description": "Tất cả mục công việc bạn tạo sẽ xuất hiện ở đây, theo dõi chúng trực tiếp tại đây.",
+        "primary_button": {
+          "text": "Tạo mục công việc mới"
+        }
+      },
+      "subscribed": {
+        "title": "Chưa có mục công việc",
+        "description": "Đăng ký mục công việc bạn quan tâm, theo dõi tất cả chúng tại đây."
+      },
+      "custom-view": {
+        "title": "Chưa có mục công việc",
+        "description": "Mục công việc phù hợp với bộ lọc, theo dõi tất cả chúng tại đây."
+      }
+    },
+    "delete_view": {
+      "title": "Bạn có chắc chắn muốn xóa chế độ xem này không?",
+      "content": "Nếu bạn xác nhận, tất cả các tùy chọn sắp xếp, lọc và hiển thị + bố cục mà bạn đã chọn cho chế độ xem này sẽ bị xóa vĩnh viễn mà không có cách nào khôi phục."
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "Nháp một mục công việc",
+    "empty_state": {
+      "title": "Mục công việc viết dở và bình luận sắp ra mắt sẽ hiển thị ở đây.",
+      "description": "Để thử tính năng này, hãy bắt đầu thêm mục công việc và rời đi giữa chừng, hoặc tạo bản nháp đầu tiên của bạn bên dưới. 😉",
+      "primary_button": {
+        "text": "Tạo bản nháp đầu tiên của bạn"
+      }
+    },
+    "delete_modal": {
+      "title": "Xóa bản nháp",
+      "description": "Bạn có chắc chắn muốn xóa bản nháp này không? Hành động này không thể hoàn tác."
+    },
+    "toasts": {
+      "created": {
+        "success": "Đã tạo bản nháp",
+        "error": "Không thể tạo mục công việc. Vui lòng thử lại."
+      },
+      "deleted": {
+        "success": "Đã xóa bản nháp"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "Viết ghi chú, tài liệu, hoặc cơ sở kiến thức đầy đủ. Nhờ Galileo, trợ lý AI của Plane, giúp bạn bắt đầu",
+        "description": "Trang là không gian lưu trữ ý tưởng trong Plane. Ghi lại ghi chú cuộc họp, định dạng chúng dễ dàng, nhúng mục công việc, bố trí chúng bằng thư viện các thành phần, và giữ tất cả trong ngữ cảnh dự án của bạn. Để làm ngắn gọn bất kỳ tài liệu nào, gọi Galileo, AI của Plane, bằng phím tắt hoặc nhấp vào nút.",
+        "primary_button": {
+          "text": "Tạo trang đầu tiên của bạn"
+        }
+      },
+      "private": {
+        "title": "Chưa có trang riêng tư",
+        "description": "Giữ suy nghĩ riêng tư của bạn ở đây. Khi bạn sẵn sàng chia sẻ, nhóm chỉ cách một cú nhấp chuột.",
+        "primary_button": {
+          "text": "Tạo trang đầu tiên của bạn"
+        }
+      },
+      "public": {
+        "title": "Chưa có trang không gian làm việc",
+        "description": "Xem các trang được chia sẻ với mọi người trong không gian làm việc của bạn ngay tại đây.",
+        "primary_button": {
+          "text": "Tạo trang đầu tiên của bạn"
+        }
+      },
+      "archived": {
+        "title": "Chưa có trang đã lưu trữ",
+        "description": "Lưu trữ các trang không nằm trong tầm nhìn của bạn. Truy cập chúng ở đây khi cần thiết."
+      },
+      "shared": {
+        "title": "Chưa có trang được chia sẻ",
+        "description": "Các trang mà người khác đã chia sẻ với bạn sẽ xuất hiện ở đây."
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "Không có chu kỳ đang hoạt động",
+        "description": "Chu kỳ của các dự án của bạn bao gồm bất kỳ khoảng thời gian nào bao gồm ngày hôm nay trong phạm vi của nó. Tìm tiến độ và chi tiết của tất cả chu kỳ đang hoạt động của bạn tại đây."
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "Nhập thành viên từ CSV",
+      "description": "Tải lên CSV với các cột: Email, Display Name, First Name, Last Name, Role (5, 15 hoặc 20)",
+      "dropzone": {
+        "active": "Thả tệp CSV vào đây",
+        "inactive": "Kéo & thả hoặc nhấp để tải lên",
+        "file_type": "Chỉ hỗ trợ tệp .csv"
+      },
+      "buttons": {
+        "cancel": "Hủy",
+        "import": "Nhập",
+        "try_again": "Thử lại",
+        "close": "Đóng",
+        "done": "Hoàn tất"
+      },
+      "progress": {
+        "uploading": "Đang tải lên...",
+        "importing": "Đang nhập..."
+      },
+      "summary": {
+        "title": {
+          "failed": "Nhập thất bại",
+          "complete": "Nhập hoàn tất"
+        },
+        "message": {
+          "seat_limit": "Không thể nhập thành viên do hạn chế số ghế.",
+          "success": "Đã thêm thành công {count} thành viên vào không gian làm việc.",
+          "no_imports": "Không có thành viên nào được nhập từ tệp CSV."
+        },
+        "stats": {
+          "successful": "Thành công",
+          "failed": "Thất bại"
+        },
+        "download_errors": "Tải xuống lỗi"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "Tệp không hợp lệ",
+          "message": "Chỉ hỗ trợ tệp CSV."
+        },
+        "import_failed": {
+          "title": "Nhập thất bại",
+          "message": "Đã xảy ra lỗi."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/accessibility.json b/packages/i18n/src/locales/zh-CN/accessibility.json
new file mode 100644
index 0000000..fea84d0
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "工作空间徽标",
+      "open_workspace_switcher": "打开工作空间切换器",
+      "open_user_menu": "打开用户菜单",
+      "open_command_palette": "打开命令面板",
+      "open_extended_sidebar": "打开扩展侧边栏",
+      "close_extended_sidebar": "关闭扩展侧边栏",
+      "create_favorites_folder": "创建收藏夹文件夹",
+      "open_folder": "打开文件夹",
+      "close_folder": "关闭文件夹",
+      "open_favorites_menu": "打开收藏夹菜单",
+      "close_favorites_menu": "关闭收藏夹菜单",
+      "enter_folder_name": "输入文件夹名称",
+      "create_new_project": "创建新项目",
+      "open_projects_menu": "打开项目菜单",
+      "close_projects_menu": "关闭项目菜单",
+      "toggle_quick_actions_menu": "切换快速操作菜单",
+      "open_project_menu": "打开项目菜单",
+      "close_project_menu": "关闭项目菜单",
+      "collapse_sidebar": "折叠侧边栏",
+      "expand_sidebar": "展开侧边栏",
+      "edition_badge": "打开付费计划模态框"
+    },
+    "auth_forms": {
+      "clear_email": "清除邮箱",
+      "show_password": "显示密码",
+      "hide_password": "隐藏密码",
+      "close_alert": "关闭警告",
+      "close_popover": "关闭弹出框"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/auth.json b/packages/i18n/src/locales/zh-CN/auth.json
new file mode 100644
index 0000000..1fc6f70
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "身份",
+    "description": "配置您的域名以访问安全功能，包括单点登录。",
+    "domain_management": {
+      "header": "域名管理",
+      "verified_domains": {
+        "header": "已验证的域名",
+        "description": "验证电子邮件域名的所有权以启用单点登录。",
+        "button_text": "添加域名",
+        "list": {
+          "domain_name": "域名",
+          "status": "状态",
+          "status_verified": "已验证",
+          "status_failed": "失败",
+          "status_pending": "待处理"
+        },
+        "add_domain": {
+          "title": "添加域名",
+          "description": "添加您的域名以配置 SSO 并验证它。",
+          "form": {
+            "domain_label": "域名",
+            "domain_placeholder": "plane.so",
+            "domain_required": "域名是必需的",
+            "domain_invalid": "请输入有效的域名（例如 plane.so）"
+          },
+          "primary_button_text": "添加域名",
+          "primary_button_loading_text": "添加中",
+          "toast": {
+            "success_title": "成功！",
+            "success_message": "域名已成功添加。请通过添加 DNS TXT 记录来验证它。",
+            "error_message": "添加域名失败。请重试。"
+          }
+        },
+        "verify_domain": {
+          "title": "验证您的域名",
+          "description": "按照以下步骤验证您的域名。",
+          "instructions": {
+            "label": "说明",
+            "step_1": "转到您的域名主机的 DNS 设置。",
+            "step_2": {
+              "part_1": "创建一个",
+              "part_2": "TXT 记录",
+              "part_3": "并粘贴下面提供的完整记录值。"
+            },
+            "step_3": "此更新通常需要几分钟，但可能需要长达 72 小时才能完成。",
+            "step_4": "DNS 记录更新后，点击“验证域名”进行确认。"
+          },
+          "verification_code_label": "TXT 记录值",
+          "verification_code_description": "将此记录添加到您的 DNS 设置",
+          "domain_label": "域名",
+          "primary_button_text": "验证域名",
+          "primary_button_loading_text": "验证中",
+          "secondary_button_text": "稍后处理",
+          "toast": {
+            "success_title": "成功！",
+            "success_message": "域名已成功验证。",
+            "error_message": "验证域名失败。请重试。"
+          }
+        },
+        "delete_domain": {
+          "title": "删除域名",
+          "description": {
+            "prefix": "您确定要删除",
+            "suffix": "吗？此操作无法撤销。"
+          },
+          "primary_button_text": "删除",
+          "primary_button_loading_text": "删除中",
+          "secondary_button_text": "取消",
+          "toast": {
+            "success_title": "成功！",
+            "success_message": "域名已成功删除。",
+            "error_message": "删除域名失败。请重试。"
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "单点登录",
+      "disabled_message": "添加已验证的域名以配置 SSO",
+      "configure": {
+        "create": "配置",
+        "update": "编辑"
+      },
+      "switch_alert_modal": {
+        "title": "将 SSO 方法切换到 {newProviderShortName}？",
+        "content": "您即将启用 {newProviderLongName}（{newProviderShortName}）。此操作将自动禁用 {activeProviderLongName}（{activeProviderShortName}）。尝试通过 {activeProviderShortName} 登录的用户将无法再访问平台，直到他们切换到新方法。您确定要继续吗？",
+        "primary_button_text": "切换",
+        "primary_button_text_loading": "切换中",
+        "secondary_button_text": "取消"
+      },
+      "form_section": {
+        "title": "IdP 为 {workspaceName} 提供的详细信息"
+      },
+      "form_action_buttons": {
+        "saving": "保存中",
+        "save_changes": "保存更改",
+        "configure_only": "仅配置",
+        "configure_and_enable": "配置并启用",
+        "default": "保存"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} 为您的 IdP 提供的详细信息",
+        "button_text": "获取设置详细信息"
+      },
+      "saml": {
+        "header": "启用 SAML",
+        "description": "配置您的 SAML 身份提供商以启用单点登录。",
+        "configure": {
+          "title": "启用 SAML",
+          "description": "验证电子邮件域名的所有权以访问安全功能，包括单点登录。",
+          "toast": {
+            "success_title": "成功！",
+            "create_success_message": "SAML 提供商已成功创建。",
+            "update_success_message": "SAML 提供商已成功更新。",
+            "error_title": "错误！",
+            "error_message": "保存 SAML 提供商失败。请重试。"
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web 详细信息",
+            "entity_id": {
+              "label": "实体 ID | 受众 | 元数据信息",
+              "description": "我们将生成这部分元数据，将 Plane 应用识别为 IdP 上的授权服务。"
+            },
+            "callback_url": {
+              "label": "单点登录 URL",
+              "description": "我们将为您生成此内容。将其添加到 IdP 的登录重定向 URL 字段中。"
+            },
+            "logout_url": {
+              "label": "单点注销 URL",
+              "description": "我们将为您生成此内容。将其添加到 IdP 的单点注销重定向 URL 字段中。"
+            }
+          },
+          "mobile_details": {
+            "header": "移动端详细信息",
+            "entity_id": {
+              "label": "实体 ID | 受众 | 元数据信息",
+              "description": "我们将生成这部分元数据，将 Plane 应用识别为 IdP 上的授权服务。"
+            },
+            "callback_url": {
+              "label": "单点登录 URL",
+              "description": "我们将为您生成此内容。将其添加到 IdP 的登录重定向 URL 字段中。"
+            },
+            "logout_url": {
+              "label": "单点注销 URL",
+              "description": "我们将为您生成此内容。将其添加到 IdP 的注销重定向 URL 字段中。"
+            }
+          },
+          "mapping_table": {
+            "header": "映射详细信息",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "启用 OIDC",
+        "description": "配置您的 OIDC 身份提供商以启用单点登录。",
+        "configure": {
+          "title": "启用 OIDC",
+          "description": "验证电子邮件域名的所有权以访问安全功能，包括单点登录。",
+          "toast": {
+            "success_title": "成功！",
+            "create_success_message": "OIDC 提供商已成功创建。",
+            "update_success_message": "OIDC 提供商已成功更新。",
+            "error_title": "错误！",
+            "error_message": "保存 OIDC 提供商失败。请重试。"
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web 详细信息",
+            "origin_url": {
+              "label": "源 URL",
+              "description": "我们将为此 Plane 应用生成此内容。将其作为受信任的源添加到 IdP 的相应字段中。"
+            },
+            "callback_url": {
+              "label": "重定向 URL",
+              "description": "我们将为您生成此内容。将其添加到 IdP 的登录重定向 URL 字段中。"
+            },
+            "logout_url": {
+              "label": "注销 URL",
+              "description": "我们将为您生成此内容。将其添加到 IdP 的注销重定向 URL 字段中。"
+            }
+          },
+          "mobile_details": {
+            "header": "移动端详细信息",
+            "origin_url": {
+              "label": "源 URL",
+              "description": "我们将为此 Plane 应用生成此内容。将其作为受信任的源添加到 IdP 的相应字段中。"
+            },
+            "callback_url": {
+              "label": "重定向 URL",
+              "description": "我们将为您生成此内容。将其添加到 IdP 的登录重定向 URL 字段中。"
+            },
+            "logout_url": {
+              "label": "注销 URL",
+              "description": "我们将为您生成此内容。将其添加到 IdP 的注销重定向 URL 字段中。"
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "邮箱",
+        "placeholder": "name@company.com",
+        "errors": {
+          "required": "邮箱是必填项",
+          "invalid": "邮箱格式无效"
+        }
+      },
+      "password": {
+        "label": "密码",
+        "set_password": "设置密码",
+        "placeholder": "输入密码",
+        "confirm_password": {
+          "label": "确认密码",
+          "placeholder": "确认密码"
+        },
+        "current_password": {
+          "label": "当前密码"
+        },
+        "new_password": {
+          "label": "新密码",
+          "placeholder": "输入新密码"
+        },
+        "change_password": {
+          "label": {
+            "default": "修改密码",
+            "submitting": "正在修改密码"
+          }
+        },
+        "errors": {
+          "match": "密码不匹配",
+          "empty": "请输入密码",
+          "length": "密码长度应超过8个字符",
+          "strength": {
+            "weak": "密码强度较弱",
+            "strong": "密码强度较强"
+          }
+        },
+        "submit": "设置密码",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "成功！",
+              "message": "密码修改成功。"
+            },
+            "error": {
+              "title": "错误！",
+              "message": "出现错误。请重试。"
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "唯一码",
+        "placeholder": "123456",
+        "paste_code": "粘贴发送到您邮箱的验证码",
+        "requesting_new_code": "正在请求新验证码",
+        "sending_code": "正在发送验证码"
+      },
+      "already_have_an_account": "已有账号？",
+      "login": "登录",
+      "create_account": "创建账号",
+      "new_to_plane": "首次使用 Plane？",
+      "back_to_sign_in": "返回登录",
+      "resend_in": "{seconds} 秒后重新发送",
+      "sign_in_with_unique_code": "使用唯一码登录",
+      "forgot_password": "忘记密码？",
+      "username": {
+        "label": "用户名",
+        "placeholder": "请输入您的用户名"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "创建账号以开始与团队一起管理工作。",
+        "step": {
+          "email": {
+            "header": "注册",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "注册",
+            "sub_header": "使用邮箱-密码组合注册。"
+          },
+          "unique_code": {
+            "header": "注册",
+            "sub_header": "使用发送到上述邮箱的唯一码注册。"
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "请设置一个强密码以继续"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "登录以开始与团队一起管理工作。",
+        "step": {
+          "email": {
+            "header": "登录或注册",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "登录或注册",
+            "sub_header": "使用您的邮箱-密码组合登录。"
+          },
+          "unique_code": {
+            "header": "登录或注册",
+            "sub_header": "使用发送到上述邮箱的唯一码登录。"
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "重置密码",
+      "description": "输入您的用户账号已验证的邮箱地址，我们将向您发送密码重置链接。",
+      "email_sent": "我们已将重置链接发送到您的邮箱",
+      "send_reset_link": "发送重置链接",
+      "errors": {
+        "smtp_not_enabled": "我们发现您的管理员未启用 SMTP，我们将无法发送密码重置链接"
+      },
+      "toast": {
+        "success": {
+          "title": "邮件已发送",
+          "message": "请查看您的收件箱以获取重置密码的链接。如果几分钟内未收到，请检查垃圾邮件文件夹。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "出现错误。请重试。"
+        }
+      }
+    },
+    "reset_password": {
+      "title": "设置新密码",
+      "description": "使用强密码保护您的账号"
+    },
+    "set_password": {
+      "title": "保护您的账号",
+      "description": "设置密码有助于您安全登录"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "错误！",
+          "message": "登出失败。请重试。"
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "使用 {ldapProviderName} 继续",
+        "sub_header": "请输入您的 {ldapProviderName} 凭据"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/automation.json b/packages/i18n/src/locales/zh-CN/automation.json
new file mode 100644
index 0000000..3f057bd
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "自定义自动化",
+      "create_automation": "创建自动化"
+    },
+    "scope": {
+      "label": "范围",
+      "run_on": "运行于"
+    },
+    "trigger": {
+      "label": "触发器",
+      "add_trigger": "添加触发器",
+      "sidebar_header": "触发器配置",
+      "input_label": "此自动化的触发器是什么？",
+      "input_placeholder": "选择一个选项",
+      "section_plane_events": "Plane 事件",
+      "section_time_based": "基于时间",
+      "fixed_schedule": "固定计划",
+      "schedule": {
+        "frequency": "频率",
+        "select_day": "选择日期",
+        "day_of_month": "月份中的日期",
+        "monthly_every": "每",
+        "monthly_day_aria": "第 {day} 天",
+        "time": "时间",
+        "hour": "小时",
+        "minute": "分钟",
+        "hour_suffix": "时",
+        "minute_suffix": "分",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "时区",
+        "timezone_placeholder": "选择时区",
+        "frequency_daily": "每天",
+        "frequency_weekly": "每周",
+        "frequency_monthly": "每月",
+        "on": "于",
+        "validation_weekly_day_required": "请至少选择一天。",
+        "validation_monthly_date_required": "请选择月份中的某一天。",
+        "main_content_schedule_summary_daily": "每天 {time} ({timezone})。",
+        "main_content_schedule_summary_weekly": "每周 {days} 的 {time} ({timezone})。",
+        "main_content_schedule_summary_monthly": "每月第 {day} 天的 {time} ({timezone})。",
+        "schedule_mode": "计划模式",
+        "schedule_mode_fixed": "固定",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "输入 Cron 表达式",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "无效的 Cron 表达式。",
+        "cron_preview": "此 Cron 表达式将运行\"{description}\"。",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "返回",
+        "next": "添加操作"
+      },
+      "warning": {
+        "disabled_trigger_switching": "创建后无法更改触发器类型"
+      }
+    },
+    "condition": {
+      "label": "条件",
+      "add_condition": "添加条件",
+      "adding_condition": "正在添加条件"
+    },
+    "action": {
+      "label": "操作",
+      "add_action": "添加操作",
+      "sidebar_header": "操作",
+      "input_label": "自动化执行什么操作？",
+      "input_placeholder": "选择一个选项",
+      "handler_name": {
+        "add_comment": "添加评论",
+        "change_property": "更改属性",
+        "run_script": "运行脚本"
+      },
+      "configuration": {
+        "label": "配置",
+        "change_property": {
+          "placeholders": {
+            "property_name": "选择属性",
+            "change_type": "选择",
+            "property_value_select": "{count, plural, other{选择值}}",
+            "property_value_select_date": "选择日期"
+          },
+          "validation": {
+            "property_name_required": "属性名称是必需的",
+            "change_type_required": "更改类型是必需的",
+            "property_value_required": "属性值是必需的"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "添加评论"
+      },
+      "run_script_block": {
+        "title": "运行脚本"
+      },
+      "change_property_block": {
+        "title": "更改属性"
+      },
+      "validation": {
+        "delete_only_action": "在删除唯一操作之前，请先禁用自动化。"
+      }
+    },
+    "conjunctions": {
+      "and": "并且",
+      "or": "或者",
+      "if": "如果",
+      "then": "那么"
+    },
+    "enable": {
+      "alert": "当您的自动化完成时，点击\"启用\"。启用后，自动化将准备运行。",
+      "validation": {
+        "required": "自动化必须有一个触发器和至少一个操作才能启用。"
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "删除自动化之前必须先禁用它。"
+      }
+    },
+    "table": {
+      "title": "自动化标题",
+      "scope": "范围",
+      "projects": "项目",
+      "last_run_on": "最后运行时间",
+      "created_on": "创建时间",
+      "last_updated_on": "最后更新时间",
+      "last_run_status": "最后运行状态",
+      "average_duration": "平均持续时间",
+      "owner": "所有者",
+      "executions": "执行次数"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "创建自动化",
+        "update": "更新自动化"
+      },
+      "title": {
+        "placeholder": "为您的自动化命名。",
+        "required_error": "标题是必需的"
+      },
+      "description": {
+        "placeholder": "描述您的自动化。"
+      },
+      "submit_button": {
+        "create": "创建自动化",
+        "update": "更新自动化"
+      }
+    },
+    "delete_modal": {
+      "heading": "删除自动化"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "显示失败",
+        "all": "全部",
+        "only_activity": "仅活动",
+        "only_run_history": "仅运行历史"
+      },
+      "run_history": {
+        "initiator": "发起者"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "成功！",
+          "message": "自动化创建成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "自动化创建失败。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "成功！",
+          "message": "自动化更新成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "自动化更新失败。"
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "成功！",
+          "message": "自动化启用成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "自动化启用失败。"
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "成功！",
+          "message": "自动化禁用成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "自动化禁用失败。"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "自动化已删除",
+          "message": "{name}，该自动化，现已从您的项目中删除。"
+        },
+        "error": {
+          "title": "本次无法删除该自动化。",
+          "message": "请重试删除，或稍后再试。如果仍无法删除，请联系我们。"
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "错误！",
+            "message": "创建操作失败。请重试！"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "错误！",
+            "message": "更新操作失败。请重试！"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "还没有自动化可显示。",
+        "description": "自动化通过设置触发器、条件和操作来帮助您消除重复性任务。创建一个来节省时间并让工作轻松进行。"
+      },
+      "upgrade": {
+        "title": "自动化",
+        "description": "自动化是在您的项目中自动执行任务的方式。",
+        "sub_description": "使用自动化可以节省80%的管理时间。"
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "选择要运行此自动化的项目",
+        "all_projects": {
+          "label": "所有项目",
+          "description": "自动化将在工作区的所有项目中运行。"
+        },
+        "select_projects": {
+          "label": "选择项目",
+          "description": "自动化将在工作区中所选的项目中运行。",
+          "placeholder": "选择项目"
+        }
+      },
+      "settings": {
+        "sidebar_label": "自动化",
+        "title": "自动化",
+        "description": "通过全局自动化标准化工作区中的流程。"
+      },
+      "table": {
+        "scope": {
+          "global": "全局",
+          "project": {
+            "label": "项目",
+            "multiple": "多个",
+            "all": "全部"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/common.json b/packages/i18n/src/locales/zh-CN/common.json
new file mode 100644
index 0000000..dd67d92
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "我们正在处理此问题。如果您需要紧急协助，",
+    "reach_out_to_us": "请联系我们",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "否则，请偶尔刷新页面或访问我们的",
+    "status_page": "状态页面"
+  },
+  "submit": "提交",
+  "cancel": "取消",
+  "loading": "加载中",
+  "error": "错误",
+  "success": "成功",
+  "warning": "警告",
+  "info": "信息",
+  "close": "关闭",
+  "yes": "是",
+  "no": "否",
+  "ok": "确定",
+  "name": "名称",
+  "unknown_user": "未知用户",
+  "description": "描述",
+  "search": "搜索",
+  "add_member": "添加成员",
+  "adding_members": "正在添加成员",
+  "remove_member": "移除成员",
+  "add_members": "添加成员",
+  "adding_member": "正在添加成员",
+  "remove_members": "移除成员",
+  "add": "添加",
+  "adding": "添加中",
+  "remove": "移除",
+  "add_new": "添加新的",
+  "remove_selected": "移除所选",
+  "first_name": "名",
+  "last_name": "姓",
+  "email": "邮箱",
+  "display_name": "显示名称",
+  "role": "角色",
+  "timezone": "时区",
+  "avatar": "头像",
+  "cover_image": "封面图片",
+  "password": "密码",
+  "change_cover": "更改封面",
+  "language": "语言",
+  "saving": "保存中",
+  "save_changes": "保存更改",
+  "deactivate_account": "停用账号",
+  "deactivate_account_description": "停用账号后，该账号内的所有数据和资源将被永久删除且无法恢复。",
+  "profile_settings": "个人资料设置",
+  "your_account": "您的账号",
+  "security": "安全",
+  "activity": "活动",
+  "activity_empty_state": {
+    "no_activity": "暂无活动",
+    "no_transitions": "暂无转换",
+    "no_comments": "暂无评论",
+    "no_worklogs": "暂无工时记录",
+    "no_history": "暂无历史记录"
+  },
+  "preferences": "偏好设置",
+  "language_and_time": "语言和时间",
+  "notifications": "通知",
+  "workspaces": "工作区",
+  "create_workspace": "创建工作区",
+  "invitations": "邀请",
+  "summary": "摘要",
+  "assigned": "已分配",
+  "created": "已创建",
+  "subscribed": "已订阅",
+  "you_do_not_have_the_permission_to_access_this_page": "您没有访问此页面的权限。",
+  "something_went_wrong_please_try_again": "出现错误。请重试。",
+  "load_more": "加载更多",
+  "select_or_customize_your_interface_color_scheme": "选择或自定义您的界面配色方案。",
+  "timezone_setting": "当前时区设置。",
+  "language_setting": "选择用户界面使用的语言。",
+  "settings_moved_to_preferences": "时区和语言设置已移至偏好设置。",
+  "go_to_preferences": "前往偏好设置",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "选择适合您的光标移动样式。",
+  "theme": "主题",
+  "smooth_cursor": "平滑光标",
+  "system_preference": "系统偏好",
+  "light": "浅色",
+  "dark": "深色",
+  "light_contrast": "浅色高对比度",
+  "dark_contrast": "深色高对比度",
+  "custom": "自定义主题",
+  "select_your_theme": "选择您的主题",
+  "customize_your_theme": "自定义您的主题",
+  "background_color": "背景颜色",
+  "text_color": "文字颜色",
+  "primary_color": "主要(主题)颜色",
+  "sidebar_background_color": "侧边栏背景颜色",
+  "sidebar_text_color": "侧边栏文字颜色",
+  "set_theme": "设置主题",
+  "enter_a_valid_hex_code_of_6_characters": "输入有效的6位十六进制代码",
+  "background_color_is_required": "背景颜色为必填项",
+  "text_color_is_required": "文字颜色为必填项",
+  "primary_color_is_required": "主要颜色为必填项",
+  "sidebar_background_color_is_required": "侧边栏背景颜色为必填项",
+  "sidebar_text_color_is_required": "侧边栏文字颜色为必填项",
+  "updating_theme": "正在更新主题",
+  "theme_updated_successfully": "主题更新成功",
+  "failed_to_update_the_theme": "主题更新失败",
+  "email_notifications": "邮件通知",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "及时了解您订阅的工作项。启用此功能以获取通知。",
+  "email_notification_setting_updated_successfully": "邮件通知设置更新成功",
+  "failed_to_update_email_notification_setting": "邮件通知设置更新失败",
+  "notify_me_when": "在以下情况通知我",
+  "property_changes": "属性变更",
+  "property_changes_description": "当工作项的属性（如负责人、优先级、估算等）发生变更时通知我。",
+  "state_change": "状态变更",
+  "state_change_description": "当工作项移动到不同状态时通知我",
+  "issue_completed": "工作项完成",
+  "issue_completed_description": "仅当工作项完成时通知我",
+  "comments": "评论",
+  "comments_description": "当有人在工作项上发表评论时通知我",
+  "mentions": "提及",
+  "mentions_description": "仅当有人在评论或描述中提及我时通知我",
+  "old_password": "旧密码",
+  "general_settings": "常规设置",
+  "sign_out": "退出登录",
+  "signing_out": "正在退出登录",
+  "active_cycles": "活动周期",
+  "active_cycles_description": "监控各个项目的周期，跟踪高优先级工作项，并关注需要注意的周期。",
+  "on_demand_snapshots_of_all_your_cycles": "所有周期的实时快照",
+  "upgrade": "升级",
+  "10000_feet_view": "所有活动周期的全局视图。",
+  "10000_feet_view_description": "放大视角，一次性查看所有项目中正在进行的周期，而不是在每个项目中逐个查看周期。",
+  "get_snapshot_of_each_active_cycle": "获取每个活动周期的快照。",
+  "get_snapshot_of_each_active_cycle_description": "跟踪所有活动周期的高级指标，查看其进度状态，并了解与截止日期相关的范围。",
+  "compare_burndowns": "比较燃尽图。",
+  "compare_burndowns_description": "通过查看每个周期的燃尽报告，监控每个团队的表现。",
+  "quickly_see_make_or_break_issues": "快速查看关键工作项。",
+  "quickly_see_make_or_break_issues_description": "预览每个周期中与截止日期相关的高优先级工作项。一键查看每个周期的所有工作项。",
+  "zoom_into_cycles_that_need_attention": "关注需要注意的周期。",
+  "zoom_into_cycles_that_need_attention_description": "一键调查任何不符合预期的周期状态。",
+  "stay_ahead_of_blockers": "提前预防阻塞。",
+  "stay_ahead_of_blockers_description": "发现从一个项目到另一个项目的挑战，并查看从其他视图中不易发现的周期间依赖关系。",
+  "analytics": "分析",
+  "workspace_invites": "工作区邀请",
+  "enter_god_mode": "进入管理员模式",
+  "workspace_logo": "工作区标志",
+  "new_issue": "新工作项",
+  "your_work": "我的工作",
+  "drafts": "草稿",
+  "projects": "项目",
+  "views": "视图",
+  "archives": "归档",
+  "settings": "设置",
+  "failed_to_move_favorite": "移动收藏失败",
+  "favorites": "收藏",
+  "no_favorites_yet": "暂无收藏",
+  "create_folder": "创建文件夹",
+  "new_folder": "新建文件夹",
+  "favorite_updated_successfully": "收藏更新成功",
+  "favorite_created_successfully": "收藏创建成功",
+  "folder_already_exists": "文件夹已存在",
+  "folder_name_cannot_be_empty": "文件夹名称不能为空",
+  "something_went_wrong": "出现错误",
+  "failed_to_reorder_favorite": "重新排序收藏失败",
+  "favorite_removed_successfully": "收藏移除成功",
+  "failed_to_create_favorite": "创建收藏失败",
+  "failed_to_rename_favorite": "重命名收藏失败",
+  "project_link_copied_to_clipboard": "项目链接已复制到剪贴板",
+  "link_copied": "链接已复制",
+  "add_project": "添加项目",
+  "create_project": "创建项目",
+  "failed_to_remove_project_from_favorites": "无法从收藏中移除项目。请重试。",
+  "project_created_successfully": "项目创建成功",
+  "project_created_successfully_description": "项目创建成功。您现在可以开始添加工作项了。",
+  "project_name_already_taken": "项目名称已被使用。",
+  "project_name_cannot_contain_special_characters": "项目名称不能包含特殊字符。",
+  "project_identifier_already_taken": "项目标识符已被使用。",
+  "project_cover_image_alt": "项目封面图片",
+  "name_is_required": "名称为必填项",
+  "title_should_be_less_than_255_characters": "标题应少于255个字符",
+  "project_name": "项目名称",
+  "project_id_must_be_at_least_1_character": "项目ID至少需要1个字符",
+  "project_id_must_be_at_most_5_characters": "项目ID最多只能有5个字符",
+  "project_id": "项目ID",
+  "project_id_tooltip_content": "帮助您唯一标识项目中的工作项。最多50个字符。",
+  "description_placeholder": "描述",
+  "only_alphanumeric_non_latin_characters_allowed": "仅允许字母数字和非拉丁字符。",
+  "project_id_is_required": "项目ID为必填项",
+  "project_id_allowed_char": "仅允许字母数字和非拉丁字符。",
+  "project_id_min_char": "项目ID至少需要1个字符",
+  "project_id_max_char": "项目ID最多只能有{max}个字符",
+  "project_description_placeholder": "输入项目描述",
+  "select_network": "选择网络",
+  "lead": "负责人",
+  "date_range": "日期范围",
+  "private": "私有",
+  "public": "公开",
+  "accessible_only_by_invite": "仅受邀者可访问",
+  "anyone_in_the_workspace_except_guests_can_join": "除访客外的工作区所有成员都可以加入",
+  "creating": "创建中",
+  "creating_project": "正在创建项目",
+  "adding_project_to_favorites": "正在将项目添加到收藏",
+  "project_added_to_favorites": "项目已添加到收藏",
+  "couldnt_add_the_project_to_favorites": "无法将项目添加到收藏。请重试。",
+  "removing_project_from_favorites": "正在从收藏中移除项目",
+  "project_removed_from_favorites": "项目已从收藏中移除",
+  "couldnt_remove_the_project_from_favorites": "无法从收藏中移除项目。请重试。",
+  "add_to_favorites": "添加到收藏",
+  "remove_from_favorites": "从收藏中移除",
+  "publish_project": "发布项目",
+  "publish": "发布",
+  "copy_link": "复制链接",
+  "leave_project": "离开项目",
+  "join_the_project_to_rearrange": "加入项目以重新排列",
+  "drag_to_rearrange": "拖动以重新排列",
+  "congrats": "恭喜！",
+  "open_project": "打开项目",
+  "issues": "工作项",
+  "cycles": "周期",
+  "modules": "模块",
+  "pages": "页面",
+  "intake": "收集",
+  "renew": "更新",
+  "preview": "预览",
+  "time_tracking": "时间跟踪",
+  "work_management": "工作管理",
+  "projects_and_issues": "项目和工作项",
+  "projects_and_issues_description": "在此项目中开启或关闭这些功能。",
+  "cycles_description": "为每个项目设置时间框，并根据需要调整周期。一个周期可以是两周，下一个周期是一周。",
+  "modules_description": "将工作组织为子项目，并指定专门的负责人和受理人。",
+  "views_description": "保存自定义排序、筛选和显示选项，或与团队共享。",
+  "pages_description": "创建和编辑自由格式的内容：笔记、文档，任何内容。",
+  "intake_description": "允许非成员提交 Bug、反馈和建议，且不会干扰您的工作流程。",
+  "time_tracking_description": "记录在工作项和项目上花费的时间。",
+  "work_management_description": "轻松管理您的工作和项目。",
+  "documentation": "文档",
+  "message_support": "联系支持",
+  "contact_sales": "联系销售",
+  "hyper_mode": "超级模式",
+  "keyboard_shortcuts": "键盘快捷键",
+  "whats_new": "新功能",
+  "version": "版本",
+  "we_are_having_trouble_fetching_the_updates": "我们在获取更新时遇到问题。",
+  "our_changelogs": "我们的更新日志",
+  "for_the_latest_updates": "获取最新更新。",
+  "please_visit": "请访问",
+  "docs": "文档",
+  "full_changelog": "完整更新日志",
+  "support": "支持",
+  "forum": "Forum",
+  "powered_by_plane_pages": "由Plane Pages提供支持",
+  "please_select_at_least_one_invitation": "请至少选择一个邀请。",
+  "please_select_at_least_one_invitation_description": "请至少选择一个加入工作区的邀请。",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "我们看到有人邀请您加入工作区",
+  "join_a_workspace": "加入工作区",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "我们看到有人邀请您加入工作区",
+  "join_a_workspace_description": "加入工作区",
+  "accept_and_join": "接受并加入",
+  "go_home": "返回首页",
+  "no_pending_invites": "没有待处理的邀请",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "如果有人邀请您加入工作区，您可以在这里看到",
+  "back_to_home": "返回首页",
+  "workspace_name": "工作区名称",
+  "deactivate_your_account": "停用您的账户",
+  "deactivate_your_account_description": "一旦停用，您将无法被分配工作项，也不会被计入工作区的账单。要重新激活您的账户，您需要收到发送到此电子邮件地址的工作区邀请。",
+  "deactivating": "正在停用",
+  "confirm": "确认",
+  "confirming": "确认中",
+  "draft_created": "草稿已创建",
+  "issue_created_successfully": "工作项创建成功",
+  "draft_creation_failed": "草稿创建失败",
+  "issue_creation_failed": "工作项创建失败",
+  "draft_issue": "草稿工作项",
+  "issue_updated_successfully": "工作项更新成功",
+  "issue_could_not_be_updated": "工作项无法更新",
+  "create_a_draft": "创建草稿",
+  "save_to_drafts": "保存到草稿",
+  "save": "保存",
+  "update": "更新",
+  "updating": "更新中",
+  "create_new_issue": "创建新工作项",
+  "editor_is_not_ready_to_discard_changes": "编辑器尚未准备好放弃更改",
+  "failed_to_move_issue_to_project": "无法将工作项移动到项目",
+  "create_more": "创建更多",
+  "add_to_project": "添加到项目",
+  "discard": "放弃",
+  "duplicate_issue_found": "发现重复的工作项",
+  "duplicate_issues_found": "发现重复的工作项",
+  "no_matching_results": "没有匹配的结果",
+  "title_is_required": "标题为必填项",
+  "title": "标题",
+  "state": "状态",
+  "transition": "转换",
+  "history": "历史",
+  "priority": "优先级",
+  "none": "无",
+  "urgent": "紧急",
+  "high": "高",
+  "medium": "中",
+  "low": "低",
+  "members": "成员",
+  "assignee": "负责人",
+  "assignees": "负责人",
+  "subscriber": "{count, plural, one{# 位订阅者} other{# 位订阅者}}",
+  "you": "您",
+  "labels": "标签",
+  "create_new_label": "创建新标签",
+  "label_name": "标签名称",
+  "failed_to_create_label": "创建标签失败，请重试。",
+  "start_date": "开始日期",
+  "end_date": "结束日期",
+  "due_date": "截止日期",
+  "target_date": "目标日期",
+  "estimate": "估算",
+  "change_parent_issue": "更改父工作项",
+  "remove_parent_issue": "移除父工作项",
+  "add_parent": "添加父项",
+  "loading_members": "正在加载成员",
+  "view_link_copied_to_clipboard": "视图链接已复制到剪贴板",
+  "required": "必填",
+  "optional": "可选",
+  "Cancel": "取消",
+  "edit": "编辑",
+  "archive": "归档",
+  "restore": "恢复",
+  "open_in_new_tab": "在新标签页中打开",
+  "delete": "删除",
+  "deleting": "删除中",
+  "make_a_copy": "创建副本",
+  "move_to_project": "移动到项目",
+  "good": "早上",
+  "morning": "早上",
+  "afternoon": "下午",
+  "evening": "晚上",
+  "show_all": "显示全部",
+  "show_less": "显示更少",
+  "no_data_yet": "暂无数据",
+  "syncing": "同步中",
+  "add_work_item": "添加工作项",
+  "advanced_description_placeholder": "按'/'使用命令",
+  "create_work_item": "创建工作项",
+  "attachments": "附件",
+  "declining": "拒绝中",
+  "declined": "已拒绝",
+  "decline": "拒绝",
+  "unassigned": "未分配",
+  "work_items": "工作项",
+  "add_link": "添加链接",
+  "points": "点数",
+  "no_assignee": "无负责人",
+  "no_assignees_yet": "暂无负责人",
+  "no_labels_yet": "暂无标签",
+  "ideal": "理想",
+  "current": "当前",
+  "no_matching_members": "没有匹配的成员",
+  "leaving": "离开中",
+  "removing": "移除中",
+  "leave": "离开",
+  "refresh": "刷新",
+  "refreshing": "刷新中",
+  "refresh_status": "刷新状态",
+  "prev": "上一个",
+  "next": "下一个",
+  "re_generating": "重新生成中",
+  "re_generate": "重新生成",
+  "re_generate_key": "重新生成密钥",
+  "export": "导出",
+  "member": "{count, plural, other{# 成员}}",
+  "new_password_must_be_different_from_old_password": "新密码必须不同于旧密码",
+  "edited": "已编辑",
+  "bot": "机器人",
+  "settings_description": "一站式管理您的账户、工作区和项目偏好设置。在各个标签页之间切换，轻松进行配置。",
+  "back_to_workspace": "返回工作区",
+  "upgrade_request": "请联系工作区管理员升级。",
+  "copied_to_clipboard": "已复制到剪贴板",
+  "copied_to_clipboard_description": "URL 已成功复制到您的剪贴板",
+  "toast": {
+    "success": "成功！",
+    "error": "错误！"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "链接已创建",
+        "message": "链接已成功创建"
+      },
+      "not_created": {
+        "title": "链接未创建",
+        "message": "无法创建链接"
+      },
+      "updated": {
+        "title": "链接已更新",
+        "message": "链接已成功更新"
+      },
+      "not_updated": {
+        "title": "链接未更新",
+        "message": "无法更新链接"
+      },
+      "removed": {
+        "title": "链接已移除",
+        "message": "链接已成功移除"
+      },
+      "not_removed": {
+        "title": "链接未移除",
+        "message": "无法移除链接"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL无效",
+        "placeholder": "输入或粘贴URL"
+      },
+      "title": {
+        "text": "显示标题",
+        "placeholder": "您希望如何显示此链接"
+      }
+    }
+  },
+  "common": {
+    "all": "全部",
+    "no_items_in_this_group": "此组中没有项目",
+    "drop_here_to_move": "拖放到此处以移动",
+    "states": "状态",
+    "state": "状态",
+    "state_groups": "状态组",
+    "state_group": "状态组",
+    "priorities": "优先级",
+    "priority": "优先级",
+    "team_project": "团队项目",
+    "project": "项目",
+    "cycle": "周期",
+    "cycles": "周期",
+    "module": "模块",
+    "modules": "模块",
+    "labels": "标签",
+    "label": "标签",
+    "admins": "管理员",
+    "users": "用户",
+    "guests": "访客",
+    "assignees": "负责人",
+    "assignee": "负责人",
+    "created_by": "创建者",
+    "none": "无",
+    "link": "链接",
+    "estimates": "估算",
+    "estimate": "估算",
+    "created_at": "创建于",
+    "updated_at": "更新时间",
+    "completed_at": "完成于",
+    "layout": "布局",
+    "filters": "筛选",
+    "display": "显示",
+    "load_more": "加载更多",
+    "activity": "活动",
+    "analytics": "分析",
+    "dates": "日期",
+    "success": "成功！",
+    "something_went_wrong": "出现错误",
+    "error": {
+      "label": "错误！",
+      "message": "发生错误。请重试。"
+    },
+    "group_by": "分组方式",
+    "epic": "史诗",
+    "epics": "史诗",
+    "work_item": "工作项",
+    "work_items": "工作项",
+    "sub_work_item": "子工作项",
+    "views": "视图",
+    "pages": "页面",
+    "add": "添加",
+    "warning": "警告",
+    "updating": "更新中",
+    "adding": "添加中",
+    "update": "更新",
+    "creating": "创建中",
+    "create": "创建",
+    "cancel": "取消",
+    "description": "描述",
+    "title": "标题",
+    "attachment": "附件",
+    "general": "常规",
+    "features": "功能",
+    "automation": "自动化",
+    "project_name": "项目名称",
+    "project_id": "项目ID",
+    "project_timezone": "项目时区",
+    "created_on": "创建于",
+    "updated_on": "更新于",
+    "completed_on": "Completed on",
+    "update_project": "更新项目",
+    "identifier_already_exists": "标识符已存在",
+    "add_more": "添加更多",
+    "defaults": "默认值",
+    "add_label": "添加标签",
+    "customize_time_range": "自定义时间范围",
+    "loading": "加载中",
+    "attachments": "附件",
+    "property": "属性",
+    "properties": "属性",
+    "parent": "父项",
+    "page": "页面",
+    "remove": "移除",
+    "archiving": "归档中",
+    "archive": "归档",
+    "access": {
+      "public": "公开",
+      "private": "私有"
+    },
+    "done": "完成",
+    "sub_work_items": "子工作项",
+    "comment": "评论",
+    "workspace_level": "工作区级别",
+    "order_by": {
+      "label": "排序方式",
+      "manual": "手动 - 排名",
+      "last_created": "最近创建",
+      "last_updated": "最近更新",
+      "start_date": "开始日期",
+      "due_date": "截止日期",
+      "asc": "升序",
+      "desc": "降序",
+      "updated_on": "更新时间"
+    },
+    "sort": {
+      "asc": "升序",
+      "desc": "降序",
+      "created_on": "创建时间",
+      "updated_on": "更新时间"
+    },
+    "comments": "评论",
+    "updates": "更新",
+    "additional_updates": "额外更新",
+    "clear_all": "清除全部",
+    "copied": "已复制！",
+    "link_copied": "链接已复制！",
+    "link_copied_to_clipboard": "链接已复制到剪贴板",
+    "copied_to_clipboard": "工作项链接已复制到剪贴板",
+    "branch_name_copied_to_clipboard": "分支名称已复制到剪贴板",
+    "is_copied_to_clipboard": "工作项已复制到剪贴板",
+    "no_links_added_yet": "暂无添加的链接",
+    "add_link": "添加链接",
+    "links": "链接",
+    "go_to_workspace": "前往工作区",
+    "progress": "进度",
+    "optional": "可选",
+    "join": "加入",
+    "go_back": "返回",
+    "continue": "继续",
+    "resend": "重新发送",
+    "relations": "关系",
+    "dependencies": "依赖关系",
+    "errors": {
+      "default": {
+        "title": "错误！",
+        "message": "发生错误。请重试。"
+      },
+      "required": "此字段为必填项",
+      "entity_required": "{entity}为必填项",
+      "restricted_entity": "{entity}已被限制"
+    },
+    "update_link": "更新链接",
+    "attach": "附加",
+    "create_new": "创建新的",
+    "add_existing": "添加现有",
+    "type_or_paste_a_url": "输入或粘贴URL",
+    "url_is_invalid": "URL无效",
+    "display_title": "显示标题",
+    "link_title_placeholder": "您希望如何显示此链接",
+    "url": "URL",
+    "side_peek": "侧边预览",
+    "modal": "模态框",
+    "full_screen": "全屏",
+    "close_peek_view": "关闭预览视图",
+    "toggle_peek_view_layout": "切换预览视图布局",
+    "options": "选项",
+    "duration": "持续时间",
+    "today": "今天",
+    "week": "周",
+    "month": "月",
+    "quarter": "季度",
+    "press_for_commands": "按'/'使用命令",
+    "click_to_add_description": "点击添加描述",
+    "on_track": "进展顺利",
+    "off_track": "偏离轨道",
+    "at_risk": "有风险",
+    "timeline": "时间轴",
+    "completion": "完成",
+    "upcoming": "即将发生",
+    "completed": "已完成",
+    "in_progress": "进行中",
+    "planned": "已计划",
+    "paused": "暂停",
+    "search": {
+      "label": "搜索",
+      "placeholder": "输入搜索内容",
+      "no_matches_found": "未找到匹配项",
+      "no_matching_results": "没有匹配的结果",
+      "min_chars": "至少输入 {count} 个字符进行搜索",
+      "error": "获取搜索结果时出错",
+      "no_results": {
+        "title": "没有匹配的结果",
+        "description": "移除搜索条件以查看所有结果"
+      }
+    },
+    "actions": {
+      "edit": "编辑",
+      "make_a_copy": "创建副本",
+      "open_in_new_tab": "在新标签页中打开",
+      "copy_link": "复制链接",
+      "copy_branch_name": "复制分支名称",
+      "archive": "归档",
+      "restore": "恢复",
+      "delete": "删除",
+      "remove_relation": "移除关系",
+      "subscribe": "订阅",
+      "unsubscribe": "取消订阅",
+      "clear_sorting": "清除排序",
+      "show_weekends": "显示周末",
+      "enable": "启用",
+      "disable": "禁用",
+      "copy_markdown": "复制Markdown",
+      "reply": "回复"
+    },
+    "name": "名称",
+    "discard": "放弃",
+    "confirm": "确认",
+    "confirming": "确认中",
+    "read_the_docs": "阅读文档",
+    "default": "默认",
+    "active": "活动",
+    "enabled": "已启用",
+    "disabled": "已禁用",
+    "mandate": "授权",
+    "mandatory": "必需的",
+    "global": "全局",
+    "yes": "是",
+    "no": "否",
+    "please_wait": "请稍候",
+    "enabling": "正在启用",
+    "disabling": "正在禁用",
+    "beta": "测试版",
+    "or": "或",
+    "next": "下一步",
+    "back": "返回",
+    "retry": "重试",
+    "cancelling": "正在取消",
+    "configuring": "正在配置",
+    "clear": "清除",
+    "import": "导入",
+    "connect": "连接",
+    "authorizing": "正在授权",
+    "processing": "正在处理",
+    "no_data_available": "暂无数据",
+    "from": "来自 {name}",
+    "authenticated": "已认证",
+    "select": "选择",
+    "upgrade": "升级",
+    "add_seats": "添加席位",
+    "projects": "项目",
+    "workspace": "工作区",
+    "workspaces": "工作区",
+    "team": "团队",
+    "teams": "团队",
+    "entity": "实体",
+    "entities": "实体",
+    "task": "任务",
+    "tasks": "任务",
+    "section": "部分",
+    "sections": "部分",
+    "edit": "编辑",
+    "connecting": "正在连接",
+    "connected": "已连接",
+    "disconnect": "断开连接",
+    "disconnecting": "正在断开连接",
+    "installing": "正在安装",
+    "install": "安装",
+    "reset": "重置",
+    "live": "实时",
+    "change_history": "变更历史",
+    "coming_soon": "即将推出",
+    "member": "成员",
+    "members": "成员",
+    "you": "你",
+    "upgrade_cta": {
+      "higher_subscription": "升级到更高订阅",
+      "talk_to_sales": "联系销售"
+    },
+    "category": "类别",
+    "categories": "类别",
+    "saving": "保存中",
+    "save_changes": "保存更改",
+    "delete": "删除",
+    "deleting": "删除中",
+    "pending": "待处理",
+    "invite": "邀请",
+    "view": "查看",
+    "deactivated_user": "已停用用户",
+    "apply": "应用",
+    "applying": "应用中",
+    "overview": "概览",
+    "no_of": "{entity} 的数量",
+    "resolved": "已解决",
+    "get_started": "开始使用",
+    "worklogs": "工作日志",
+    "project_updates": "项目更新",
+    "workflows": "工作流",
+    "templates": "模板",
+    "business": "商业",
+    "members_and_teamspaces": "成员和团队空间",
+    "recurring_work_items": "重复工作项",
+    "milestones": "里程碑",
+    "open_in_full_screen": "在全屏中打开{page}",
+    "details": "详情",
+    "project_structure": "项目结构",
+    "custom_properties": "自定义属性",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "X轴",
+    "y_axis": "Y轴",
+    "metric": "指标"
+  },
+  "form": {
+    "title": {
+      "required": "标题为必填项",
+      "max_length": "标题应少于 {length} 个字符"
+    }
+  },
+  "entity": {
+    "grouping_title": "{entity}分组",
+    "priority": "{entity}优先级",
+    "all": "所有{entity}",
+    "drop_here_to_move": "拖放到此处以移动{entity}",
+    "delete": {
+      "label": "删除{entity}",
+      "success": "{entity}删除成功",
+      "failed": "{entity}删除失败"
+    },
+    "update": {
+      "failed": "{entity}更新失败",
+      "success": "{entity}更新成功"
+    },
+    "link_copied_to_clipboard": "{entity}链接已复制到剪贴板",
+    "fetch": {
+      "failed": "获取{entity}时出错"
+    },
+    "add": {
+      "success": "{entity}添加成功",
+      "failed": "添加{entity}时出错"
+    },
+    "remove": {
+      "success": "{entity}删除成功",
+      "failed": "删除{entity}时出错"
+    }
+  },
+  "attachment": {
+    "error": "无法附加文件。请重新上传。",
+    "only_one_file_allowed": "一次只能上传一个文件。",
+    "file_size_limit": "文件大小必须小于或等于 {size}MB。",
+    "drag_and_drop": "拖放到任意位置以上传",
+    "delete": "删除附件"
+  },
+  "label": {
+    "select": "选择标签",
+    "create": {
+      "success": "标签创建成功",
+      "failed": "标签创建失败",
+      "already_exists": "标签已存在",
+      "type": "输入以添加新标签"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {视图} other {视图}}",
+    "create": {
+      "label": "创建视图"
+    },
+    "update": {
+      "label": "更新视图"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "访客",
+      "description": "组织的外部成员可以被邀请为访客。"
+    },
+    "member": {
+      "title": "成员",
+      "description": "可以在项目、周期和模块内读取、写入、编辑和删除实体"
+    },
+    "admin": {
+      "title": "管理员",
+      "description": "在工作区内所有权限均设置为允许。"
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "产品/项目经理",
+    "development_or_engineering": "开发/工程",
+    "founder_or_executive": "创始人/高管",
+    "freelancer_or_consultant": "自由职业者/顾问",
+    "marketing_or_growth": "市场/增长",
+    "sales_or_business_development": "销售/业务发展",
+    "support_or_operations": "支持/运营",
+    "student_or_professor": "学生/教授",
+    "human_resources": "人力资源",
+    "other": "其他"
+  },
+  "default_global_view": {
+    "all_issues": "所有工作项",
+    "assigned": "已分配",
+    "created": "已创建",
+    "subscribed": "已订阅"
+  },
+  "description_versions": {
+    "last_edited_by": "最后编辑者",
+    "previously_edited_by": "之前编辑者",
+    "edited_by": "编辑者"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane 未能启动。这可能是因为一个或多个 Plane 服务启动失败。",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "请选择“查看日志”来查看 setup.sh 和 Docker 日志，以确认问题。"
+  },
+  "customize_navigation": "自定义导航",
+  "personal": "个人",
+  "accordion_navigation_control": "折叠侧边栏导航",
+  "horizontal_navigation_bar": "标签式导航",
+  "show_limited_projects_on_sidebar": "在侧边栏显示有限数量的项目",
+  "enter_number_of_projects": "输入项目数量",
+  "pin": "置顶",
+  "unpin": "取消置顶",
+  "workspace_dashboards": "仪表板",
+  "pi_chat": "AI 聊天",
+  "in_app": "应用内",
+  "forms": "表单",
+  "milestones": "里程碑",
+  "milestones_description": "里程碑提供了一层结构，用于将工作项对齐到共同的完成日期。",
+  "file_upload": {
+    "upload_text": "点击此处上传文件",
+    "drag_drop_text": "拖放",
+    "processing": "处理中",
+    "invalid_file_type": "无效的文件类型",
+    "missing_fields": "缺少字段",
+    "success": "{fileName} 已上传！"
+  },
+  "date": "日期",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "将工作项导出为 CSV 文件。",
+      "short_description": "导出为 CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "将工作项导出为 Excel 文件。",
+      "short_description": "导出为 Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "将工作项导出为 Excel 文件。",
+      "short_description": "导出为 Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "将工作项导出为 JSON 文件。",
+      "short_description": "导出为 JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/cycle.json b/packages/i18n/src/locales/zh-CN/cycle.json
new file mode 100644
index 0000000..fec1634
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "向周期添加工作项以查看其进度"
+      },
+      "chart": {
+        "title": "向周期添加工作项以查看燃尽图。"
+      },
+      "priority_issue": {
+        "title": "一目了然地观察周期中处理的高优先级工作项。"
+      },
+      "assignee": {
+        "title": "为工作项添加负责人以查看按负责人划分的工作明细。"
+      },
+      "label": {
+        "title": "为工作项添加标签以查看按标签划分的工作明细。"
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {周期} other {周期}}",
+    "no_cycle": "无周期"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "向周期添加工作项以查看其进度"
+      },
+      "priority": {
+        "title": "一目了然地观察周期中处理的高优先级工作项"
+      },
+      "assignee": {
+        "title": "为工作项添加负责人以查看按负责人\n划分的工作明细"
+      },
+      "label": {
+        "title": "为工作项添加标签以查看按标签\n划分的工作明细"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/editor.json b/packages/i18n/src/locales/zh-CN/editor.json
new file mode 100644
index 0000000..418274f
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "拖拽上传外部文件"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "文件过大。",
+        "description": "每个文件的最大大小为 {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "不支持的文件类型。",
+        "description": "查看支持的格式"
+      },
+      "default": {
+        "title": "上传失败。",
+        "description": "出现错误。请重试。"
+      }
+    },
+    "upgrade": {
+      "description": "升级您的计划以查看此附件。"
+    },
+    "aria": {
+      "click_to_upload": "点击上传附件"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "转换为嵌入内容",
+      "convert_to_link": "转换为链接",
+      "convert_to_richcard": "转换为富卡片"
+    },
+    "placeholder": {
+      "insert_embed": "在此插入您喜欢的嵌入链接，如 YouTube 视频、Figma 设计等",
+      "link": "输入或粘贴链接"
+    },
+    "input_modal": {
+      "embed": "嵌入",
+      "works_with_links": "适用于 YouTube、Figma、Google Docs 等"
+    },
+    "error": {
+      "not_valid_link": "请输入有效的 URL。"
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "描述此块的内容",
+      "generated_here": "您的 AI 内容将在此处生成"
+    },
+    "block_types": {
+      "placeholder": "选择块类型",
+      "summarize_page": "总结页面",
+      "custom_prompt": "自定义提示"
+    },
+    "actions": {
+      "discard": "放弃",
+      "generate": "生成",
+      "generating": "生成中",
+      "rewriting": "重写中",
+      "rewrite": "重写",
+      "use_this": "使用此",
+      "refine": "优化"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/empty-state.json b/packages/i18n/src/locales/zh-CN/empty-state.json
new file mode 100644
index 0000000..6dd4704
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "暂无进度指标可显示。",
+      "description": "开始在工作项中设置属性值以在此查看进度指标。"
+    },
+    "updates": {
+      "title": "暂无更新。",
+      "description": "项目成员添加更新后将显示在此处"
+    },
+    "search": {
+      "title": "未找到匹配结果。",
+      "description": "未找到结果。请尝试调整搜索条件。"
+    },
+    "not_found": {
+      "title": "糟糕!似乎出了点问题",
+      "description": "我们目前无法获取您的 Plane 账户。这可能是网络错误。",
+      "cta_primary": "尝试重新加载"
+    },
+    "server_error": {
+      "title": "服务器错误",
+      "description": "我们无法连接并从服务器获取数据。请放心,我们正在处理。",
+      "cta_primary": "尝试重新加载"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "您似乎无权访问该项目",
+      "restricted_description": "请联系管理员申请访问权限，通过后您可以在此继续。",
+      "join_description": "点击下方按钮加入该项目。",
+      "cta_primary": "加入项目",
+      "cta_loading": "正在加入项目"
+    },
+    "invalid_project": {
+      "title": "未找到项目",
+      "description": "您查找的项目不存在。"
+    },
+    "work_items": {
+      "title": "从您的第一个工作项开始。",
+      "description": "工作项是项目的构建块 — 分配负责人、设置优先级并轻松跟踪进度。",
+      "cta_primary": "创建您的第一个工作项"
+    },
+    "cycles": {
+      "title": "在周期中分组和限时您的工作。",
+      "description": "将工作分解为限时块,从项目截止日期倒推设置日期,并作为团队取得实质性进展。",
+      "cta_primary": "设置您的第一个周期"
+    },
+    "cycle_work_items": {
+      "title": "此周期中没有要显示的工作项",
+      "description": "创建工作项以开始监控团队在此周期中的进度并按时实现目标。",
+      "cta_primary": "创建工作项",
+      "cta_secondary": "添加现有工作项"
+    },
+    "modules": {
+      "title": "将项目目标映射到模块并轻松跟踪。",
+      "description": "模块由相互关联的工作项组成。它们有助于监控项目阶段的进度,每个阶段都有特定的截止日期和分析,以指示您离实现这些阶段有多近。",
+      "cta_primary": "设置您的第一个模块"
+    },
+    "module_work_items": {
+      "title": "此模块中没有要显示的工作项",
+      "description": "创建工作项以开始监控此模块。",
+      "cta_primary": "创建工作项",
+      "cta_secondary": "添加现有工作项"
+    },
+    "views": {
+      "title": "为项目保存自定义视图",
+      "description": "视图是保存的过滤器,可帮助您快速访问最常用的信息。团队成员可以轻松协作,共享视图并根据特定需求进行调整。",
+      "cta_primary": "创建视图"
+    },
+    "no_work_items_in_project": {
+      "title": "项目中暂无工作项",
+      "description": "将工作项添加到项目中,并使用视图将工作切分为可跟踪的部分。",
+      "cta_primary": "添加工作项"
+    },
+    "work_item_filter": {
+      "title": "未找到工作项",
+      "description": "您当前的过滤器未返回任何结果。请尝试更改过滤器。",
+      "cta_primary": "添加工作项"
+    },
+    "pages": {
+      "title": "记录一切 — 从笔记到 PRD",
+      "description": "页面让您在一个地方捕获和组织信息。编写会议笔记、项目文档和 PRD,嵌入工作项,并使用现成的组件进行结构化。",
+      "cta_primary": "创建您的第一个页面"
+    },
+    "archive_pages": {
+      "title": "暂无已归档页面",
+      "description": "归档不在您关注范围内的页面。需要时在此处访问它们。"
+    },
+    "intake_sidebar": {
+      "title": "记录接收请求",
+      "description": "提交新请求以在项目工作流程中进行审查、优先排序和跟踪。",
+      "cta_primary": "创建接收请求"
+    },
+    "intake_main": {
+      "title": "选择一个接收工作项以查看其详细信息"
+    },
+    "epics": {
+      "title": "将复杂项目转化为结构化史诗。",
+      "description": "史诗帮助您将大目标组织成更小的可跟踪任务。",
+      "cta_primary": "创建史诗",
+      "cta_secondary": "文档"
+    },
+    "epic_work_items": {
+      "title": "您尚未向此史诗添加工作项。",
+      "description": "开始向此史诗添加一些工作项并在此处跟踪它们。",
+      "cta_secondary": "添加工作项"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "暂无已归档史诗",
+      "description": "您可以归档已完成或已取消的史诗。归档后在此处查找它们。"
+    },
+    "archive_work_items": {
+      "title": "暂无已归档工作项",
+      "description": "通过手动或自动化,您可以归档已完成或已取消的工作项。归档后在此处查找它们。",
+      "cta_primary": "设置自动化"
+    },
+    "archive_cycles": {
+      "title": "暂无已归档周期",
+      "description": "为了整理项目,请归档已完成的周期。归档后在此处查找它们。"
+    },
+    "archive_modules": {
+      "title": "暂无已归档模块",
+      "description": "为了整理项目,请归档已完成或已取消的模块。归档后在此处查找它们。"
+    },
+    "home_widget_quick_links": {
+      "title": "为您的工作保留重要的参考、资源或文档"
+    },
+    "inbox_sidebar_all": {
+      "title": "您订阅的工作项的更新将显示在此处"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "您的工作项的提及将显示在此处"
+    },
+    "your_work_by_priority": {
+      "title": "尚未分配工作项"
+    },
+    "your_work_by_state": {
+      "title": "尚未分配工作项"
+    },
+    "views": {
+      "title": "暂无视图",
+      "description": "将工作项添加到项目中并使用视图轻松过滤、排序和监控进度。",
+      "cta_primary": "添加工作项"
+    },
+    "drafts": {
+      "title": "半成品工作项",
+      "description": "要试用此功能,请开始添加工作项并在中途离开,或在下方创建您的第一个草稿。😉",
+      "cta_primary": "创建草稿工作项"
+    },
+    "projects_archived": {
+      "title": "没有已归档项目",
+      "description": "看起来您的所有项目仍然活跃 — 做得好!"
+    },
+    "analytics_projects": {
+      "title": "创建项目以在此处可视化项目指标。"
+    },
+    "analytics_work_items": {
+      "title": "创建包含工作项和受理人的项目,以开始在此处跟踪绩效、进度和团队影响。"
+    },
+    "analytics_no_cycle": {
+      "title": "创建周期以将工作组织成有时限的阶段并跟踪冲刺进度。"
+    },
+    "analytics_no_module": {
+      "title": "创建模块以组织工作并跟踪不同阶段的进度。"
+    },
+    "analytics_no_intake": {
+      "title": "设置接收以管理传入请求并跟踪它们的接受和拒绝情况"
+    },
+    "home_widget_stickies": {
+      "title": "记下想法、捕捉灵光一现或记录思维火花。添加便签开始。"
+    },
+    "stickies": {
+      "title": "即时捕捉想法",
+      "description": "创建便签记录快速笔记和待办事项,并随身携带它们无论您走到哪里。",
+      "cta_primary": "创建第一个便签",
+      "cta_secondary": "文档"
+    },
+    "active_cycles": {
+      "title": "无活跃周期",
+      "description": "您目前没有任何正在进行的周期。包含今天日期的活跃周期将显示在此处。"
+    },
+    "dashboard": {
+      "title": "使用仪表板可视化您的进度",
+      "description": "构建可自定义的仪表板以跟踪指标、衡量成果并有效呈现见解。",
+      "cta_primary": "创建新仪表板"
+    },
+    "wiki": {
+      "title": "编写笔记、文档或完整的知识库。",
+      "description": "页面是 Plane 中的思想捕捉空间。记录会议笔记,轻松格式化,嵌入工作项,使用组件库进行布局,并将它们全部保留在项目上下文中。",
+      "cta_primary": "创建您的页面"
+    },
+    "project_overview_state_sidebar": {
+      "title": "启用项目状态",
+      "description": "启用项目状态以查看和管理状态、优先级、截止日期等属性。"
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "暂无估算",
+      "description": "定义团队如何衡量工作量,并在所有工作项中一致地跟踪它。",
+      "cta_primary": "添加估算系统"
+    },
+    "labels": {
+      "title": "暂无标签",
+      "description": "创建个性化标签以有效分类和管理工作项。",
+      "cta_primary": "创建您的第一个标签"
+    },
+    "exports": {
+      "title": "暂无导出",
+      "description": "您目前没有任何导出记录。导出数据后,所有记录将显示在此处。"
+    },
+    "tokens": {
+      "title": "暂无个人令牌",
+      "description": "生成安全的 API 令牌以将工作空间与外部系统和应用程序连接。",
+      "cta_primary": "添加 API 令牌"
+    },
+    "workspace_tokens": {
+      "title": "暂无访问令牌",
+      "description": "生成安全的 API 令牌以将工作空间与外部系统和应用程序连接。",
+      "cta_primary": "添加访问令牌"
+    },
+    "webhooks": {
+      "title": "尚未添加 Webhook",
+      "description": "在项目事件发生时自动向外部服务发送通知。",
+      "cta_primary": "添加 webhook"
+    },
+    "work_item_types": {
+      "title": "创建和自定义工作项类型",
+      "description": "为项目定义独特的工作项类型。每种类型都可以有自己的属性、工作流程和字段 — 根据项目和团队需求量身定制。",
+      "cta_primary": "启用"
+    },
+    "work_item_type_properties": {
+      "title": "定义要为此工作项类型捕获的属性和详细信息。自定义它以匹配项目的工作流程。",
+      "cta_secondary": "添加属性"
+    },
+    "templates": {
+      "title": "暂无模板",
+      "description": "通过为工作项和页面创建模板来减少设置时间 — 并在几秒钟内开始新工作。",
+      "cta_primary": "创建您的第一个模板"
+    },
+    "recurring_work_items": {
+      "title": "暂无循环工作项",
+      "description": "设置循环工作项以自动化重复任务并轻松保持计划进度。",
+      "cta_primary": "创建循环工作项"
+    },
+    "worklogs": {
+      "title": "跟踪所有成员的工时表",
+      "description": "在工作项上记录时间以查看跨项目任何团队成员的详细工时表。"
+    },
+    "group_syncing": {
+      "title": "暂无组映射"
+    },
+    "template_setting": {
+      "title": "暂无模板",
+      "description": "通过为项目、工作项和页面创建模板来减少设置时间 — 并在几秒钟内开始新工作。",
+      "cta_primary": "创建模板"
+    },
+    "workflows": {
+      "title": "暂无工作流",
+      "description": "创建工作流以管理工作项的进度。",
+      "cta_primary": "添加新工作流",
+      "states": {
+        "title": "添加状态",
+        "description": "选择工作项推进过程中经历的状态。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/home.json b/packages/i18n/src/locales/zh-CN/home.json
new file mode 100644
index 0000000..fec78d4
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "快速入门指南",
+      "not_right_now": "暂时不要",
+      "create_project": {
+        "title": "创建项目",
+        "description": "在Plane中，大多数事情都从项目开始。",
+        "cta": "开始使用"
+      },
+      "invite_team": {
+        "title": "邀请您的团队",
+        "description": "与同事一起构建、发布和管理。",
+        "cta": "邀请他们加入"
+      },
+      "configure_workspace": {
+        "title": "设置您的工作区",
+        "description": "开启或关闭功能，或进行更多设置。",
+        "cta": "配置此工作区"
+      },
+      "personalize_account": {
+        "title": "让Plane更适合您",
+        "description": "选择您的头像、颜色等。",
+        "cta": "立即个性化"
+      },
+      "widgets": {
+        "title": "没有小部件看起来很安静，开启它们吧",
+        "description": "看起来您的所有小部件都已关闭。现在启用它们\n来提升您的体验！",
+        "primary_button": {
+          "text": "管理小部件"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "保存您想要方便访问的工作相关链接。",
+      "add": "添加快速链接",
+      "title": "快速链接",
+      "title_plural": "快速链接"
+    },
+    "recents": {
+      "title": "最近",
+      "empty": {
+        "project": "访问项目后，您的最近项目将显示在这里。",
+        "page": "访问页面后，您的最近页面将显示在这里。",
+        "issue": "访问工作项后，您的最近工作项将显示在这里。",
+        "default": "您还没有任何最近项目。"
+      },
+      "filters": {
+        "all": "所有",
+        "projects": "项目",
+        "pages": "页面",
+        "issues": "工作项"
+      }
+    },
+    "new_at_plane": {
+      "title": "Plane新功能"
+    },
+    "quick_tutorial": {
+      "title": "快速教程"
+    },
+    "widget": {
+      "reordered_successfully": "小部件重新排序成功。",
+      "reordering_failed": "重新排序小部件时出错。"
+    },
+    "manage_widgets": "管理小部件",
+    "title": "首页",
+    "star_us_on_github": "在GitHub上为我们加星",
+    "business_trial_banner": {
+      "title": "您的14天Business计划试用已开始！",
+      "description": "探索所有Business功能。准备好后，选择订阅。不会自动收费。",
+      "trial_ends_today": "试用今天结束",
+      "trial_ends_in_days": "试用将在{days}天后结束",
+      "start_subscription": "开始订阅",
+      "explore_business_features": "探索Business功能"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/inbox.json b/packages/i18n/src/locales/zh-CN/inbox.json
new file mode 100644
index 0000000..5df39b5
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "待处理",
+        "description": "待处理"
+      },
+      "declined": {
+        "title": "已拒绝",
+        "description": "已拒绝"
+      },
+      "snoozed": {
+        "title": "已暂停",
+        "description": "还剩{days, plural, one{# 天} other{# 天}}"
+      },
+      "accepted": {
+        "title": "已接受",
+        "description": "已接受"
+      },
+      "duplicate": {
+        "title": "重复",
+        "description": "重复"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "拒绝工作项",
+        "content": "您确定要拒绝工作项 {value} 吗？"
+      },
+      "delete": {
+        "title": "删除工作项",
+        "content": "您确定要删除工作项 {value} 吗？",
+        "success": "工作项删除成功"
+      }
+    },
+    "errors": {
+      "snooze_permission": "只有项目管理员可以暂停/取消暂停工作项",
+      "accept_permission": "只有项目管理员可以接受工作项",
+      "decline_permission": "只有项目管理员可以拒绝工作项"
+    },
+    "actions": {
+      "accept": "接受",
+      "decline": "拒绝",
+      "snooze": "暂停",
+      "unsnooze": "取消暂停",
+      "copy": "复制工作项链接",
+      "delete": "删除",
+      "open": "打开工作项",
+      "mark_as_duplicate": "标记为重复",
+      "move": "将 {value} 移至项目工作项"
+    },
+    "source": {
+      "in-app": "应用内"
+    },
+    "order_by": {
+      "created_at": "创建时间",
+      "updated_at": "更新时间",
+      "id": "ID"
+    },
+    "label": "收集",
+    "page_label": "{workspace} - 收集",
+    "modal": {
+      "title": "创建收集工作项"
+    },
+    "tabs": {
+      "open": "未处理",
+      "closed": "已处理"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "没有未处理的工作项",
+        "description": "在此处查找未处理的工作项。创建新工作项。"
+      },
+      "sidebar_closed_tab": {
+        "title": "没有已处理的工作项",
+        "description": "所有已接受或已拒绝的工作项都可以在这里找到。"
+      },
+      "sidebar_filter": {
+        "title": "没有匹配的工作项",
+        "description": "收集中没有符合筛选条件的工作项。创建新工作项。"
+      },
+      "detail": {
+        "title": "选择一个工作项以查看其详细信息。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/integration.json b/packages/i18n/src/locales/zh-CN/integration.json
new file mode 100644
index 0000000..3ea1da4
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "集成",
+    "loading": "正在加载",
+    "unauthorized": "您无权查看此页面。",
+    "configure": "配置",
+    "not_enabled": "此工作区未启用 {name}。",
+    "not_configured": "未配置",
+    "disconnect_personal_account": "断开个人 {providerName} 账户连接",
+    "not_configured_message_admin": "{name} 集成未配置。请联系您的实例管理员进行配置。",
+    "not_configured_message_support": "{name} 集成未配置。请联系支持进行配置。",
+    "external_api_unreachable": "无法访问外部 API。请稍后重试。",
+    "error_fetching_supported_integrations": "无法获取支持的集成。请稍后重试。",
+    "back_to_integrations": "返回集成",
+    "select_state": "选择状态",
+    "set_state": "设置状态",
+    "choose_project": "选择项目...",
+    "skip_backward_state_movement": "防止因 PR 更新将问题移回较早的状态"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "将您的 GitHub 工作项与 Plane 连接并同步",
+    "connect_org": "连接组织",
+    "connect_org_description": "将您的 GitHub 组织与 Plane 连接",
+    "processing": "处理中",
+    "org_added_desc": "GitHub org 添加于和时间",
+    "connection_fetch_error": "从服务器获取连接详情时出错",
+    "personal_account_connected": "个人账户已连接",
+    "personal_account_connected_description": "您的 GitHub 账户现已连接到 Plane",
+    "connect_personal_account": "连接个人账户",
+    "connect_personal_account_description": "将您的个人 GitHub 账户与 Plane 连接。",
+    "repo_mapping": "仓库映射",
+    "repo_mapping_description": "将您的 GitHub 仓库与 Plane 项目映射",
+    "project_issue_sync": "项目问题同步",
+    "project_issue_sync_description": "将 GitHub 的问题同步到您的 Plane 项目",
+    "project_issue_sync_empty_state": "映射的项目问题同步将在此处显示",
+    "configure_project_issue_sync_state": "配置问题同步状态",
+    "select_issue_sync_direction": "选择问题同步方向",
+    "allow_bidirectional_sync": "双向 - 在 GitHub 和 Plane 之间同步问题和评论",
+    "allow_unidirectional_sync": "单向 - 仅从 GitHub 同步问题和评论到 Plane",
+    "allow_unidirectional_sync_warning": "GitHub 问题的数据将替换关联 Plane 工作项中的数据（仅 GitHub → Plane）",
+    "remove_project_issue_sync": "移除此项目问题同步",
+    "remove_project_issue_sync_confirmation": "您确定要移除此项目问题同步吗？",
+    "add_pr_state_mapping": "添加拉取请求状态映射到 Plane 项目",
+    "edit_pr_state_mapping": "编辑拉取请求状态映射到 Plane 项目",
+    "pr_state_mapping": "拉取请求状态映射",
+    "pr_state_mapping_description": "将 GitHub 的拉取请求状态映射到您的 Plane 项目",
+    "pr_state_mapping_empty_state": "映射的 PR 状态将在此处显示",
+    "remove_pr_state_mapping": "移除此拉取请求状态映射",
+    "remove_pr_state_mapping_confirmation": "您确定要移除此拉取请求状态映射吗？",
+    "issue_sync_message": "工作项已同步到 {project}",
+    "link": "将 GitHub 仓库链接到 Plane 项目",
+    "pull_request_automation": "拉取请求自动化",
+    "pull_request_automation_description": "配置从 GitHub 到 Plane 项目的拉取请求状态映射",
+    "DRAFT_MR_OPENED": "草稿打开",
+    "MR_OPENED": "打开",
+    "MR_READY_FOR_MERGE": "准备合并",
+    "MR_REVIEW_REQUESTED": "请求审查",
+    "MR_MERGED": "合并",
+    "MR_CLOSED": "关闭",
+    "ISSUE_OPEN": "Issue 打开",
+    "ISSUE_CLOSED": "Issue 关闭",
+    "save": "保存",
+    "start_sync": "开始同步",
+    "choose_repository": "选择仓库..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "连接并同步您的 Gitlab 合并请求与 Plane。",
+    "connection_fetch_error": "从服务器获取连接详情时出错",
+    "connect_org": "连接组织",
+    "connect_org_description": "将您的 Gitlab 组织与 Plane 连接。",
+    "project_connections": "Gitlab 项目连接",
+    "project_connections_description": "从 Gitlab 同步合并请求到 Plane 项目。",
+    "plane_project_connection": "Plane 项目连接",
+    "plane_project_connection_description": "配置从 Gitlab 到 Plane 项目的拉取请求状态映射",
+    "remove_connection": "移除连接",
+    "remove_connection_confirmation": "您确定要移除此连接吗？",
+    "link": "将 Gitlab 仓库链接到 Plane 项目",
+    "pull_request_automation": "拉取请求自动化",
+    "pull_request_automation_description": "配置从 Gitlab 到 Plane 的拉取请求状态映射",
+    "DRAFT_MR_OPENED": "当草稿 MR 打开时，将状态设置为",
+    "MR_OPENED": "当 MR 打开时，将状态设置为",
+    "MR_REVIEW_REQUESTED": "当请求 MR 审查时，将状态设置为",
+    "MR_READY_FOR_MERGE": "当 MR 准备合并时，将状态设置为",
+    "MR_MERGED": "当 MR 合并时，将状态设置为",
+    "MR_CLOSED": "当 MR 关闭时，将状态设置为",
+    "integration_enabled_text": "启用 Gitlab 集成后，您可以自动化工作项工作流",
+    "choose_entity": "选择实体",
+    "choose_project": "选择项目",
+    "link_plane_project": "链接 Plane 项目",
+    "project_issue_sync": "项目问题同步",
+    "project_issue_sync_description": "从 Gitlab 同步问题到您的 Plane 项目",
+    "project_issue_sync_empty_state": "映射的项目问题同步将显示在这里",
+    "configure_project_issue_sync_state": "配置问题同步状态",
+    "select_issue_sync_direction": "选择问题同步方向",
+    "allow_bidirectional_sync": "双向 - 在 Gitlab 和 Plane 之间双向同步问题和评论",
+    "allow_unidirectional_sync": "单向 - 仅从 Gitlab 同步问题和评论到 Plane",
+    "allow_unidirectional_sync_warning": "Gitlab 问题中的数据将替换链接的 Plane 工作项中的数据（仅 Gitlab → Plane）",
+    "remove_project_issue_sync": "移除此项目问题同步",
+    "remove_project_issue_sync_confirmation": "您确定要移除此项目问题同步吗？",
+    "ISSUE_OPEN": "问题打开",
+    "ISSUE_CLOSED": "问题关闭",
+    "save": "保存",
+    "start_sync": "开始同步",
+    "choose_repository": "选择仓库..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "连接并同步您的 Gitlab Enterprise 实例与 Plane。",
+    "app_form_title": "Gitlab Enterprise 配置",
+    "app_form_description": "配置 Gitlab Enterprise 以连接到 Plane。",
+    "base_url_title": "基础 URL",
+    "base_url_description": "您的 Gitlab Enterprise 实例的基础 URL。",
+    "base_url_placeholder": "例如：\"https://glab.plane.town\"",
+    "base_url_error": "基础 URL 是必需的",
+    "invalid_base_url_error": "无效的基础 URL",
+    "client_id_title": "应用 ID",
+    "client_id_description": "您在 Gitlab Enterprise 实例中创建的应用的 ID。",
+    "client_id_placeholder": "例如：\"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "应用 ID 是必需的",
+    "client_secret_title": "客户端密钥",
+    "client_secret_description": "您在 Gitlab Enterprise 实例中创建的应用的客户端密钥。",
+    "client_secret_placeholder": "例如：\"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "客户端密钥是必需的",
+    "webhook_secret_title": "Webhook 密钥",
+    "webhook_secret_description": "一个随机的 webhook 密钥，用于验证来自 Gitlab Enterprise 实例的 webhook。",
+    "webhook_secret_placeholder": "例如：\"webhook1234567890\"",
+    "webhook_secret_error": "Webhook 密钥是必需的",
+    "connect_app": "连接应用"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "将您的 Slack 工作区与 Plane 连接。",
+    "connect_personal_account": "将您的个人 Slack 账户与 Plane 连接。",
+    "personal_account_connected": "您的个人 {providerName} 账户现已连接到 Plane。",
+    "link_personal_account": "将您的个人 {providerName} 账户链接到 Plane。",
+    "connected_slack_workspaces": "已连接的 Slack 工作区",
+    "connected_on": "连接于 {date}",
+    "disconnect_workspace": "断开 {name} 工作区连接",
+    "alerts": {
+      "dm_alerts": {
+        "title": "在 Slack 私信中接收重要更新、提醒和专属警报的通知。"
+      }
+    },
+    "project_updates": {
+      "title": "项目更新",
+      "description": "配置项目的更新通知",
+      "add_new_project_update": "添加新的项目更新通知",
+      "project_updates_empty_state": "与 Slack 频道连接的项目将在此处显示。",
+      "project_updates_form": {
+        "title": "配置项目更新",
+        "description": "在创建工作项时在 Slack 中接收项目更新通知",
+        "failed_to_load_channels": "无法从 Slack 加载频道",
+        "project_dropdown": {
+          "placeholder": "选择项目",
+          "label": "Plane 项目",
+          "no_projects": "没有可用项目"
+        },
+        "channel_dropdown": {
+          "label": "Slack 频道",
+          "placeholder": "选择频道",
+          "no_channels": "没有可用频道"
+        },
+        "all_projects_connected": "所有项目已连接到 Slack 频道。",
+        "all_channels_connected": "所有 Slack 频道已连接到项目。",
+        "project_connection_success": "项目连接创建成功",
+        "project_connection_updated": "项目连接更新成功",
+        "project_connection_deleted": "项目连接删除成功",
+        "failed_delete_project_connection": "删除项目连接失败",
+        "failed_create_project_connection": "创建项目连接失败",
+        "failed_upserting_project_connection": "更新项目连接失败",
+        "failed_loading_project_connections": "无法加载您的项目连接。这可能是由于网络问题或集成问题。"
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "将您的Sentry工作空间连接到Plane。",
+    "connected_sentry_workspaces": "已连接的Sentry工作空间",
+    "connected_on": "连接于{date}",
+    "disconnect_workspace": "断开{name}工作空间",
+    "state_mapping": {
+      "title": "状态映射",
+      "description": "将Sentry事件状态映射到您的项目状态。配置当Sentry事件已解决或未解决时使用哪些状态。",
+      "add_new_state_mapping": "添加新状态映射",
+      "empty_state": "未配置状态映射。创建您的第一个映射以同步Sentry事件状态与您的项目状态。",
+      "failed_loading_state_mappings": "我们无法加载您的状态映射。这可能是由于网络问题或集成问题。",
+      "loading_project_states": "正在加载项目状态...",
+      "error_loading_states": "加载状态时出错",
+      "no_states_available": "没有可用状态",
+      "no_permission_states": "您没有权限访问此项目的状态",
+      "states_not_found": "未找到项目状态",
+      "server_error_states": "加载状态时服务器错误"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "将您的 Bitbucket Data Center 仓库与 Plane 连接并同步。"
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "验证外部 IdP 令牌以进行 API 访问。",
+    "header_description": "验证来自您的 IdP（Azure AD、Okta 等）的外部 OIDC/JWT 令牌，用于 Plane API 访问。",
+    "connected": "已连接",
+    "connect": "连接",
+    "uninstall": "卸载",
+    "uninstalling": "卸载中...",
+    "install_success": "OAuth Bridge 安装成功。",
+    "install_error": "OAuth Bridge 安装失败。",
+    "uninstall_success": "OAuth Bridge 已卸载。",
+    "uninstall_error": "OAuth Bridge 卸载失败。",
+    "token_providers": "令牌提供者",
+    "token_providers_description": "配置其 JWT 被接受为 API 凭证的外部 IdP。",
+    "add_provider": "添加提供者",
+    "edit_provider": "编辑提供者",
+    "enabled": "已启用",
+    "disabled": "已禁用",
+    "test": "测试",
+    "no_providers_title": "未配置提供者。",
+    "no_providers_description": "添加 IdP 以启用外部令牌认证。",
+    "provider_updated": "提供者已更新。",
+    "provider_added": "提供者已添加。",
+    "provider_save_error": "保存提供者失败。",
+    "provider_deleted": "提供者已删除。",
+    "provider_delete_error": "删除提供者失败。",
+    "provider_update_error": "更新提供者失败。",
+    "jwks_reachable": "JWKS 可达",
+    "jwks_unreachable": "JWKS 不可达",
+    "jwks_test_error": "无法从配置的 URL 获取 JWKS。",
+    "provider_form": {
+      "name_label": "名称",
+      "name_placeholder": "例如 Azure AD Production",
+      "name_description": "此身份提供者的可读标签",
+      "name_required": "名称为必填项。",
+      "issuer_label": "签发者",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "JWT 中预期的 iss 声明值",
+      "issuer_required": "签发者为必填项。",
+      "jwks_url_label": "JWKS URL",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "提供者 JSON Web Key Set 的 HTTPS 端点",
+      "jwks_url_required": "JWKS URL 为必填项。",
+      "jwks_url_https": "JWKS URL 必须使用 HTTPS。",
+      "audience_label": "受众",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "JWT 中预期的 aud 声明，以逗号分隔。",
+      "user_claims_label": "用户声明",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "包含用户电子邮件地址的 JWT 声明",
+      "user_claims_required": "用户声明为必填项。",
+      "allowed_algorithms_label": "允许的签名算法",
+      "allowed_algorithms_description": "用于 JWT 签名验证的非对称算法",
+      "allowed_algorithms_required": "至少需要一个算法。",
+      "select_algorithms": "选择算法",
+      "jwks_cache_ttl_label": "JWKS 缓存 TTL（秒）",
+      "jwks_cache_ttl_description": "缓存提供者 JWKS 密钥的时长（最少 60 秒，默认 24 小时）",
+      "jwks_cache_ttl_min": "缓存 TTL 至少为 60 秒。",
+      "rate_limit_label": "速率限制",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "请求限制格式为 次数/周期（例如 120/minute）。留空使用默认速率限制。",
+      "enable_provider": "启用此提供者",
+      "saving": "保存中...",
+      "update": "更新"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "连接并同步您的 GitHub Enterprise 组织与 Plane。",
+    "app_form_title": "GitHub Enterprise 配置",
+    "app_form_description": "配置 GitHub Enterprise 以连接到 Plane。",
+    "app_id_title": "App ID",
+    "app_id_description": "您在 GitHub Enterprise 组织中创建的应用程序的 ID。",
+    "app_id_placeholder": "例如，\"1234567890\"",
+    "app_id_error": "App ID 是必需的",
+    "app_name_title": "App Slug",
+    "app_name_description": "您在 GitHub Enterprise 组织中创建的应用程序的 slug。",
+    "app_name_error": "App slug 是必需的",
+    "app_name_placeholder": "例如，\"plane-github-enterprise\"",
+    "base_url_title": "Base URL",
+    "base_url_description": "您的 GitHub Enterprise 组织的基 URL。",
+    "base_url_placeholder": "例如，\"https://gh.plane.town\"",
+    "base_url_error": "Base URL 是必需的",
+    "invalid_base_url_error": "无效的基 URL",
+    "client_id_title": "Client ID",
+    "client_id_description": "您在 GitHub Enterprise 组织中创建的应用程序的客户端 ID。",
+    "client_id_placeholder": "例如，\"1234567890\"",
+    "client_id_error": "Client ID 是必需的",
+    "client_secret_title": "Client Secret",
+    "client_secret_description": "您在 GitHub Enterprise 组织中创建的应用程序的客户端密钥。",
+    "client_secret_placeholder": "例如，\"1234567890\"",
+    "client_secret_error": "Client secret 是必需的",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "您在 GitHub Enterprise 组织中创建的应用程序的 webhook 密钥。",
+    "webhook_secret_placeholder": "例如，\"1234567890\"",
+    "webhook_secret_error": "Webhook secret 是必需的",
+    "private_key_title": "私钥 (Base64 编码)",
+    "private_key_description": "您在 GitHub Enterprise 组织中创建的应用程序的 Base64 编码的私钥。",
+    "private_key_placeholder": "例如，\"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Private key 是必需的",
+    "connect_app": "连接应用"
+  },
+  "silo_errors": {
+    "invalid_query_params": "提供的查询参数无效或缺少必需字段",
+    "invalid_installation_account": "提供的安装账户无效",
+    "generic_error": "处理您的请求时发生意外错误",
+    "connection_not_found": "找不到请求的连接",
+    "multiple_connections_found": "找到多个连接，但只期望一个",
+    "cannot_create_multiple_connections": "您已经将组织连接到工作区。请在连接新组织之前断开现有连接。",
+    "installation_not_found": "找不到请求的安装",
+    "user_not_found": "找不到请求的用户",
+    "error_fetching_token": "获取身份验证令牌失败",
+    "invalid_app_credentials": "提供的应用凭证无效",
+    "invalid_app_installation_id": "安装应用失败"
+  },
+  "import_status": {
+    "queued": "排队中",
+    "created": "已创建",
+    "initiated": "已启动",
+    "pulling": "拉取中",
+    "timed_out": "超时",
+    "pulled": "已拉取",
+    "progressing": "进行中",
+    "transforming": "转换中",
+    "transformed": "已转换",
+    "pushing": "推送中",
+    "finished": "已完成",
+    "error": "错误",
+    "cancelled": "已取消"
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/module.json b/packages/i18n/src/locales/zh-CN/module.json
new file mode 100644
index 0000000..37eac53
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {模块} other {模块}}",
+    "no_module": "无模块",
+    "select": "添加模块"
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/navigation.json b/packages/i18n/src/locales/zh-CN/navigation.json
new file mode 100644
index 0000000..0fe15a3
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "未找到结果"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "便签",
+    "your_work": "我的工作",
+    "projects": "项目",
+    "pages": "页面",
+    "new_work_item": "新工作项",
+    "home": "主页",
+    "inbox": "收件箱",
+    "workspace": "工作区",
+    "views": "视图",
+    "analytics": "分析",
+    "work_items": "工作项",
+    "cycles": "周期",
+    "modules": "模块",
+    "intake": "收集",
+    "drafts": "草稿",
+    "favorites": "收藏",
+    "pro": "专业版",
+    "upgrade": "升级",
+    "pi_chat": "AI 聊天",
+    "epics": "史诗",
+    "upgrade_plan": "升级计划",
+    "plane_pro": "Plane Pro",
+    "business": "商业版"
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/notification.json b/packages/i18n/src/locales/zh-CN/notification.json
new file mode 100644
index 0000000..a3dd4ea
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "收件箱",
+    "page_label": "{workspace} - 收件箱",
+    "options": {
+      "mark_all_as_read": "全部标记为已读",
+      "mark_read": "标记为已读",
+      "mark_unread": "标记为未读",
+      "refresh": "刷新",
+      "filters": "收件箱筛选",
+      "show_unread": "显示未读",
+      "show_snoozed": "显示已暂停",
+      "show_archived": "显示已归档",
+      "mark_archive": "归档",
+      "mark_unarchive": "取消归档",
+      "mark_snooze": "暂停",
+      "mark_unsnooze": "取消暂停"
+    },
+    "toasts": {
+      "read": "通知已标记为已读",
+      "unread": "通知已标记为未读",
+      "archived": "通知已标记为已归档",
+      "unarchived": "通知已标记为未归档",
+      "snoozed": "通知已暂停",
+      "unsnoozed": "通知已取消暂停"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "选择以查看详情。"
+      },
+      "all": {
+        "title": "没有分配的工作项",
+        "description": "在这里可以看到分配给您的工作项的更新"
+      },
+      "mentions": {
+        "title": "没有分配的工作项",
+        "description": "在这里可以看到分配给您的工作项的更新"
+      }
+    },
+    "tabs": {
+      "all": "全部",
+      "mentions": "提及"
+    },
+    "filter": {
+      "assigned": "分配给我",
+      "created": "由我创建",
+      "subscribed": "由我订阅"
+    },
+    "snooze": {
+      "1_day": "1 天",
+      "3_days": "3 天",
+      "5_days": "5 天",
+      "1_week": "1 周",
+      "2_weeks": "2 周",
+      "custom": "自定义"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/page.json b/packages/i18n/src/locales/zh-CN/page.json
new file mode 100644
index 0000000..55d0ddc
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "大纲",
+        "empty_state": {
+          "title": "缺少标题",
+          "description": "让我们在这个页面添加一些标题来在这里查看它们。"
+        }
+      },
+      "info": {
+        "label": "信息",
+        "document_info": {
+          "words": "字数",
+          "characters": "字符数",
+          "paragraphs": "段落数",
+          "read_time": "阅读时间"
+        },
+        "actors_info": {
+          "edited_by": "编辑者",
+          "created_by": "创建者"
+        },
+        "version_history": {
+          "label": "版本历史",
+          "current_version": "当前版本",
+          "highlight_changes": "高亮显示更改"
+        }
+      },
+      "assets": {
+        "label": "资源",
+        "download_button": "下载",
+        "empty_state": {
+          "title": "缺少图片",
+          "description": "添加图片以在这里查看它们。"
+        }
+      },
+      "comments": {
+        "label": "评论",
+        "empty_state": {
+          "title": "暂无评论",
+          "description": "添加评论以在此处查看。"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "便签名称不能超过 100 个字符。",
+        "already_exists": "已存在一个没有描述的便签"
+      },
+      "created": {
+        "title": "便签已创建",
+        "message": "便签已成功创建"
+      },
+      "not_created": {
+        "title": "便签未创建",
+        "message": "无法创建便签"
+      },
+      "updated": {
+        "title": "便签已更新",
+        "message": "便签已成功更新"
+      },
+      "not_updated": {
+        "title": "便签未更新",
+        "message": "无法更新便签"
+      },
+      "removed": {
+        "title": "便签已移除",
+        "message": "便签已成功移除"
+      },
+      "not_removed": {
+        "title": "便签未移除",
+        "message": "无法移除便签"
+      }
+    },
+    "open_button": "打开导航面板",
+    "close_button": "关闭导航面板",
+    "outline_floating_button": "打开大纲"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "移动",
+        "loading": "正在移动"
+      },
+      "cannot_move_to_teamspace": "私有和共享页面无法移动到团队空间。",
+      "placeholders": {
+        "workspace_to_all": "搜索项目和团队空间",
+        "workspace_to_project": "搜索项目",
+        "project_to_all": "搜索项目和团队空间",
+        "project_to_project": "搜索项目",
+        "project_to_all_with_wiki": "搜索 Wiki 集合、项目和团队空间",
+        "project_to_project_with_wiki": "搜索 Wiki 集合和项目"
+      },
+      "toasts": {
+        "success": {
+          "title": "成功！",
+          "message": "页面移动成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "无法移动页面。请稍后重试。"
+        },
+        "collection_error": {
+          "title": "已移动到 Wiki",
+          "message": "页面已移动到 Wiki，但无法添加到所选集合中。它会保留在 General 中。"
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "从集合中移除",
+      "success_message": "页面已从集合中移除。",
+      "error_message": "无法将页面从集合中移除。请重试。"
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "已达到内容上限，实时同步已关闭。请创建新页面或使用嵌套页面以继续同步。"
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/power-k.json b/packages/i18n/src/locales/zh-CN/power-k.json
new file mode 100644
index 0000000..88e0608
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "批量删除工作项"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "工作项操作",
+        "indicator": "工作项",
+        "change_state": "更改状态",
+        "change_priority": "更改优先级",
+        "change_assignees": "分配给",
+        "assign_to_me": "分配给我",
+        "unassign_from_me": "从我处取消分配",
+        "change_estimate": "更改估算",
+        "add_to_cycle": "添加到周期",
+        "add_to_modules": "添加到模块",
+        "add_labels": "添加标签",
+        "subscribe": "订阅通知",
+        "unsubscribe": "取消订阅通知",
+        "delete": "删除",
+        "copy_id": "复制 ID",
+        "copy_id_toast_success": "工作项 ID 已复制到剪贴板。",
+        "copy_id_toast_error": "复制工作项 ID 到剪贴板时出错。",
+        "copy_title": "复制标题",
+        "copy_title_toast_success": "工作项标题已复制到剪贴板。",
+        "copy_title_toast_error": "复制工作项标题到剪贴板时出错。",
+        "copy_url": "复制 URL",
+        "copy_url_toast_success": "工作项 URL 已复制到剪贴板。",
+        "copy_url_toast_error": "复制工作项 URL 到剪贴板时出错。"
+      },
+      "cycle": {
+        "title": "周期操作",
+        "indicator": "周期",
+        "add_to_favorites": "添加到收藏",
+        "remove_from_favorites": "从收藏中移除",
+        "copy_url": "复制 URL",
+        "copy_url_toast_success": "周期 URL 已复制到剪贴板。",
+        "copy_url_toast_error": "复制周期 URL 到剪贴板时出错。"
+      },
+      "module": {
+        "title": "模块操作",
+        "indicator": "模块",
+        "add_remove_members": "添加/移除成员",
+        "change_status": "更改状态",
+        "add_to_favorites": "添加到收藏",
+        "remove_from_favorites": "从收藏中移除",
+        "copy_url": "复制 URL",
+        "copy_url_toast_success": "模块 URL 已复制到剪贴板。",
+        "copy_url_toast_error": "复制模块 URL 到剪贴板时出错。"
+      },
+      "page": {
+        "title": "页面操作",
+        "indicator": "页面",
+        "lock": "锁定",
+        "unlock": "解锁",
+        "make_private": "设为私有",
+        "make_public": "设为公开",
+        "archive": "归档",
+        "restore": "恢复",
+        "add_to_favorites": "添加到收藏",
+        "remove_from_favorites": "从收藏中移除",
+        "copy_url": "复制 URL",
+        "copy_url_toast_success": "页面 URL 已复制到剪贴板。",
+        "copy_url_toast_error": "复制页面 URL 到剪贴板时出错。"
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "新建工作项",
+      "create_page": "新建页面",
+      "create_view": "新建视图",
+      "create_cycle": "新建周期",
+      "create_module": "新建模块",
+      "create_project": "新建项目",
+      "create_workspace": "新建工作区",
+      "create_project_automation": "新建自动化"
+    },
+    "navigation_actions": {
+      "open_workspace": "打开工作区",
+      "nav_home": "转到主页",
+      "nav_inbox": "转到收件箱",
+      "nav_your_work": "转到我的工作",
+      "nav_account_settings": "转到账号设置",
+      "open_project": "打开项目",
+      "nav_projects_list": "转到项目列表",
+      "nav_all_workspace_work_items": "转到所有工作项",
+      "nav_assigned_workspace_work_items": "转到已分配工作项",
+      "nav_created_workspace_work_items": "转到已创建工作项",
+      "nav_subscribed_workspace_work_items": "转到已订阅工作项",
+      "nav_workspace_analytics": "转到工作区分析",
+      "nav_workspace_drafts": "转到工作区草稿",
+      "nav_workspace_archives": "转到工作区归档",
+      "open_workspace_setting": "打开工作区设置",
+      "nav_workspace_settings": "转到工作区设置",
+      "nav_project_work_items": "转到工作项",
+      "open_project_cycle": "打开周期",
+      "nav_project_cycles": "转到周期",
+      "open_project_module": "打开模块",
+      "nav_project_modules": "转到模块",
+      "open_project_view": "打开项目视图",
+      "nav_project_views": "转到项目视图",
+      "nav_project_pages": "转到页面",
+      "nav_project_intake": "转到收集",
+      "nav_project_archives": "转到项目归档",
+      "open_project_setting": "打开项目设置",
+      "nav_project_settings": "转到项目设置",
+      "nav_workspace_active_cycle": "转到所有活动周期",
+      "nav_project_overview": "转到项目概览"
+    },
+    "account_actions": {
+      "sign_out": "退出登录",
+      "workspace_invites": "工作区邀请"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "切换应用侧边栏",
+      "copy_current_page_url": "复制当前页面 URL",
+      "copy_current_page_url_toast_success": "当前页面 URL 已复制到剪贴板。",
+      "copy_current_page_url_toast_error": "复制当前页面 URL 到剪贴板时出错。",
+      "focus_top_nav_search": "聚焦搜索输入框"
+    },
+    "preferences_actions": {
+      "update_theme": "更改界面主题",
+      "update_timezone": "更改时区",
+      "update_start_of_week": "更改一周的第一天",
+      "update_language": "更改界面语言",
+      "toast": {
+        "theme": {
+          "success": "主题更新成功。",
+          "error": "主题更新失败。请重试。"
+        },
+        "timezone": {
+          "success": "时区更新成功。",
+          "error": "时区更新失败。请重试。"
+        },
+        "generic": {
+          "success": "偏好设置更新成功。",
+          "error": "偏好设置更新失败。请重试。"
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "打开键盘快捷键",
+      "open_plane_documentation": "打开 Plane 文档",
+      "join_forum": "加入我们的论坛",
+      "report_bug": "报告 Bug",
+      "chat_with_us": "与我们聊天"
+    },
+    "page_placeholders": {
+      "default": "输入命令或搜索",
+      "open_workspace": "打开工作区",
+      "open_project": "打开项目",
+      "open_workspace_setting": "打开工作区设置",
+      "open_project_cycle": "打开周期",
+      "open_project_module": "打开模块",
+      "open_project_view": "打开项目视图",
+      "open_project_setting": "打开项目设置",
+      "update_work_item_state": "更改状态",
+      "update_work_item_priority": "更改优先级",
+      "update_work_item_assignee": "分配给",
+      "update_work_item_estimate": "更改估算",
+      "update_work_item_cycle": "添加到周期",
+      "update_work_item_module": "添加到模块",
+      "update_work_item_labels": "添加标签",
+      "update_module_member": "更改成员",
+      "update_module_status": "更改状态",
+      "update_theme": "更改主题",
+      "update_timezone": "更改时区",
+      "update_start_of_week": "更改一周的第一天",
+      "update_language": "更改语言"
+    },
+    "search_menu": {
+      "no_results": "未找到结果",
+      "clear_search": "清除搜索",
+      "go_to_advanced_search": "转到高级搜索"
+    },
+    "footer": {
+      "workspace_level": "工作区级别"
+    },
+    "group_titles": {
+      "actions": "操作",
+      "contextual": "上下文",
+      "navigation": "导航",
+      "create": "创建",
+      "general": "常规",
+      "settings": "设置",
+      "account": "账号",
+      "miscellaneous": "其他",
+      "preferences": "偏好设置",
+      "help": "帮助"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/project-settings.json b/packages/i18n/src/locales/zh-CN/project-settings.json
new file mode 100644
index 0000000..594502d
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "输入项目 ID",
+      "please_select_a_timezone": "请选择时区",
+      "archive_project": {
+        "title": "归档项目",
+        "description": "归档项目将从您的侧边导航中取消列出您的项目，但您仍然可以从项目页面访问它。您可以随时恢复或删除项目。",
+        "button": "归档项目"
+      },
+      "delete_project": {
+        "title": "删除项目",
+        "description": "删除项目时，该项目内的所有数据和资源将被永久删除且无法恢复。",
+        "button": "删除我的项目"
+      },
+      "toast": {
+        "success": "项目更新成功",
+        "error": "项目无法更新。请重试。"
+      }
+    },
+    "members": {
+      "label": "成员",
+      "project_lead": "项目负责人",
+      "project_lead_description": "请选择该项目的项目负责人。",
+      "default_assignee": "默认受理人",
+      "default_assignee_description": "请选择该项目的默认指派人。",
+      "project_subscribers": "项目订阅者",
+      "project_subscribers_description": "请选择将接收该项目通知的成员。",
+      "guest_super_permissions": {
+        "title": "为访客用户授予查看所有工作项的权限：",
+        "sub_heading": "这将允许访客查看所有项目工作项。"
+      },
+      "invite_members": {
+        "title": "邀请成员",
+        "sub_heading": "邀请成员参与您的项目。",
+        "select_co_worker": "选择同事"
+      }
+    },
+    "states": {
+      "heading": "状态",
+      "description": "定义和自定义工作流状态以跟踪工作项的进度。",
+      "describe_this_state_for_your_members": "为您的成员描述此状态。",
+      "empty_state": {
+        "title": "{groupKey} 组中没有状态",
+        "description": "请创建一个新状态"
+      }
+    },
+    "labels": {
+      "heading": "标签",
+      "description": "创建自定义标签以分类和组织您的工作项",
+      "label_title": "标签标题",
+      "label_title_is_required": "标签标题为必填项",
+      "label_max_char": "标签名称不应超过255个字符",
+      "toast": {
+        "error": "更新标签时出错"
+      }
+    },
+    "estimates": {
+      "heading": "估算",
+      "description": "设置估算系统以跟踪和传达每个工作项所需的工作量。",
+      "label": "估算",
+      "title": "为我的项目启用估算",
+      "enable_description": "它们有助于您传达团队的复杂性和工作量。",
+      "no_estimate": "无估算",
+      "new": "新估算系统",
+      "create": {
+        "custom": "自定义",
+        "start_from_scratch": "从头开始",
+        "choose_template": "选择模板",
+        "choose_estimate_system": "选择估算系统",
+        "enter_estimate_point": "输入估算点数",
+        "step": "步骤 {step} 共 {total}",
+        "label": "创建估算"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "已创建估算点数",
+            "message": "估算点数创建成功"
+          },
+          "error": {
+            "title": "无法创建估算点数",
+            "message": "无法创建新的估算点数，请重试"
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "已更新估算",
+            "message": "您项目中的估算点数已更新"
+          },
+          "error": {
+            "title": "无法更新估算",
+            "message": "无法更新估算，请重试"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "成功！",
+            "message": "已启用估算"
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "成功！",
+            "message": "已禁用估算"
+          },
+          "error": {
+            "title": "错误！",
+            "message": "无法禁用估算。请重试"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "估算已重新排序",
+            "message": "估算已在您的项目中重新排序。"
+          },
+          "error": {
+            "title": "估算重新排序失败",
+            "message": "我们无法重新排序估算，请重试"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "估算系统已创建",
+            "message": "创建并启用成功"
+          },
+          "error": {
+            "title": "错误",
+            "message": "出现错误"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "估算需要大于0。",
+        "unable_to_process": "我们无法处理您的请求，请重试。",
+        "numeric": "估算需要是数值。",
+        "character": "估算需要是字符值。",
+        "empty": "估算值不能为空。",
+        "already_exists": "估算值已存在。",
+        "unsaved_changes": "您有未保存的更改，请在点击完成前保存。",
+        "remove_empty": "估算不能为空。请在每个字段中输入值或删除没有值的字段。",
+        "fill": "请填写此估算字段",
+        "repeat": "估算值不能重复"
+      },
+      "systems": {
+        "points": {
+          "label": "点数",
+          "fibonacci": "斐波那契",
+          "linear": "线性",
+          "squares": "平方",
+          "custom": "自定义"
+        },
+        "categories": {
+          "label": "类别",
+          "t_shirt_sizes": "T恤尺码",
+          "easy_to_hard": "简单到困难",
+          "custom": "自定义"
+        },
+        "time": {
+          "label": "时间",
+          "hours": "小时"
+        }
+      },
+      "edit": {
+        "title": "编辑估算系统",
+        "add_or_update": {
+          "title": "添加、更新或删除估算",
+          "description": "通过添加、更新或删除点数或类别来管理当前系统。"
+        },
+        "switch": {
+          "title": "更改估算类型",
+          "description": "将点数系统转换为类别系统，反之亦然。"
+        }
+      },
+      "switch": "切换估算系统",
+      "current": "当前估算系统",
+      "select": "选择估算系统"
+    },
+    "automations": {
+      "label": "自动化",
+      "heading": "自动化",
+      "description": "配置自动化操作以简化项目管理工作流并减少手动任务。",
+      "auto-archive": {
+        "title": "自动归档已关闭的工作项",
+        "description": "Plane 将自动归档已完成或已取消的工作项。",
+        "duration": "自动归档已关闭"
+      },
+      "auto-close": {
+        "title": "自动关闭工作项",
+        "description": "Plane 将自动关闭尚未完成或取消的工作项。",
+        "duration": "自动关闭不活跃",
+        "auto_close_status": "自动关闭状态"
+      },
+      "auto-remind": {
+        "title": "自动提醒",
+        "description": "Plane 将自动通过电子邮件和应用程序通知来提醒您的团队保持进度。",
+        "duration": "提前提醒"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "尚无标签",
+        "description": "创建标签以帮助组织和筛选项目中的工作项。"
+      },
+      "estimates": {
+        "title": "尚无估算系统",
+        "description": "创建一组估算以传达每个工作项的工作量。",
+        "primary_button": "添加估算系统"
+      },
+      "integrations": {
+        "title": "未配置集成",
+        "description": "配置 GitHub 和其他集成以同步您的项目工作项。"
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "启用工作流",
+        "description": "设置工作流以控制工作项的流转",
+        "no_states_tooltip": "该工作流中尚未添加任何状态。",
+        "no_work_item_types_tooltip": "该工作流中尚未添加任何工作项类型。",
+        "no_states_or_work_item_types_tooltip": "该工作流中尚未添加任何状态或工作项类型。",
+        "toast": {
+          "loading": {
+            "enabling": "正在启用工作流",
+            "disabling": "正在停用工作流"
+          },
+          "success": {
+            "title": "成功！",
+            "message": "工作流已成功启用。"
+          },
+          "error": {
+            "title": "错误！",
+            "message": "启用工作流失败。请重试。"
+          }
+        }
+      },
+      "heading": "工作流",
+      "description": "自动化工作项流转，并设置规则来控制任务如何在项目流程中推进。",
+      "add_button": "添加新工作流",
+      "search": "搜索工作流",
+      "detail": {
+        "define": "定义工作流",
+        "add_states": "添加状态",
+        "unmapped_states": {
+          "title": "检测到未映射的状态",
+          "description": "所选类型的一些工作项当前处于该工作流中不存在的状态。",
+          "note": "如果启用该工作流，这些工作项将自动移动到该工作流的初始状态。",
+          "label": "缺失的状态",
+          "tooltip": "一些工作项处于未映射到该工作流的状态。打开工作流进行查看。"
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "所有状态均已在使用中",
+          "description": "为该项目定义的所有状态都已存在于当前工作流中。"
+        }
+      },
+      "default_footer": {
+        "fallback_message": "该工作流适用于未分配给任何工作流的任何工作项类型。"
+      },
+      "create": {
+        "heading": "创建新工作流",
+        "name": {
+          "placeholder": "添加唯一名称",
+          "validation": {
+            "max_length": "名称必须少于 255 个字符",
+            "required": "名称为必填项",
+            "invalid": "名称只能包含字母、数字、空格、连字符和撇号"
+          }
+        },
+        "description": {
+          "placeholder": "添加简短描述",
+          "validation": {
+            "invalid": "描述只能包含字母、数字、空格、连字符和撇号"
+          }
+        },
+        "work_item_type": {
+          "label": "工作项类型"
+        },
+        "success": {
+          "title": "成功！",
+          "message": "工作流创建成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "创建工作流失败。请重试。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "成功！",
+          "message": "工作流更新成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "更新工作流失败。请重试。"
+        }
+      },
+      "delete": {
+        "loading": "正在删除工作流",
+        "success": {
+          "title": "成功！",
+          "message": "工作流删除成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "删除工作流失败。请重试。"
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "成功！",
+          "message": "状态添加成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "添加状态失败。请重试。"
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "工作项类型",
+      "description": "创建和自定义具有独特属性的不同类型工作项"
+    },
+    "features": {
+      "cycles": {
+        "title": "周期",
+        "short_title": "周期",
+        "description": "在灵活的时间段内安排工作，以适应该项目独特的节奏和步调。",
+        "toggle_title": "启用周期",
+        "toggle_description": "在集中的时间段内规划工作。"
+      },
+      "modules": {
+        "title": "模块",
+        "short_title": "模块",
+        "description": "将工作组织成具有专门负责人和受让人的子项目。",
+        "toggle_title": "启用模块",
+        "toggle_description": "项目成员将能够创建和编辑模块。"
+      },
+      "views": {
+        "title": "视图",
+        "short_title": "视图",
+        "description": "保存自定义排序、过滤器和显示选项，或与团队共享。",
+        "toggle_title": "启用视图",
+        "toggle_description": "项目成员将能够创建和编辑视图。"
+      },
+      "pages": {
+        "title": "页面",
+        "short_title": "页面",
+        "description": "创建和编辑自由格式的内容：笔记、文档、任何内容。",
+        "toggle_title": "启用页面",
+        "toggle_description": "项目成员将能够创建和编辑页面。"
+      },
+      "intake": {
+        "intake_responsibility": "接收责任",
+        "intake_sources": "接收来源",
+        "title": "接收",
+        "short_title": "接收",
+        "description": "让非成员分享错误、反馈和建议；而不会中断您的工作流程。",
+        "toggle_title": "启用接收",
+        "toggle_description": "允许项目成员在应用中创建接收请求。",
+        "toggle_tooltip_on": "请项目管理员代为开启。",
+        "toggle_tooltip_off": "请项目管理员代为关闭。",
+        "notify_assignee": {
+          "title": "通知负责人",
+          "description": "对于新的接收请求，默认负责人将通过通知收到提醒"
+        },
+        "in_app": {
+          "title": "应用内",
+          "description": "从工作区成员和访客获取新的工作项，不影响现有工作项。"
+        },
+        "email": {
+          "title": "电子邮件",
+          "description": "从任何向 Plane 邮箱地址发送邮件的人收集新的工作项。",
+          "fieldName": "电子邮件 ID"
+        },
+        "form": {
+          "title": "表单",
+          "description": "让工作区外的人通过专用安全表单为您创建潜在的新工作项。",
+          "fieldName": "默认表单 URL",
+          "create_forms": "使用工作项类型创建表单",
+          "manage_forms": "管理表单",
+          "manage_forms_tooltip": "请工作区管理员代为管理。",
+          "create_form": "创建表单",
+          "edit_form": "编辑表单详情",
+          "form_title": "表单标题",
+          "form_title_required": "表单标题为必填",
+          "work_item_type": "工作项类型",
+          "remove_property": "移除属性",
+          "select_properties": "选择属性",
+          "search_placeholder": "搜索属性",
+          "toasts": {
+            "success_create": "接收表单已成功创建",
+            "success_update": "接收表单已成功更新",
+            "error_create": "无法创建接收表单",
+            "error_update": "无法更新接收表单"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "正在设置负责人...",
+            "success": {
+              "title": "成功！",
+              "message": "负责人设置成功。"
+            },
+            "error": {
+              "title": "错误！",
+              "message": "设置负责人时出现问题。请重试。"
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "时间跟踪",
+        "short_title": "时间跟踪",
+        "description": "记录在工作项和项目上花费的时间。",
+        "toggle_title": "启用时间跟踪",
+        "toggle_description": "项目成员将能够记录工作时间。"
+      },
+      "milestones": {
+        "title": "里程碑",
+        "short_title": "里程碑",
+        "description": "里程碑提供了一个层，用于将工作项对齐到共享的完成日期。",
+        "toggle_title": "启用里程碑",
+        "toggle_description": "按里程碑截止日期组织工作项。"
+      },
+      "toasts": {
+        "loading": "正在更新项目功能...",
+        "success": "项目功能更新成功。",
+        "error": "更新项目功能时出现错误。请重试。"
+      }
+    },
+    "project_updates": {
+      "heading": "项目更新",
+      "description": "为此项目提供综合跟踪和进度监控"
+    },
+    "templates": {
+      "heading": "模板",
+      "description": "使用模板可节省 80% 创建项目、工作项和页面的时间。"
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "自动安排周期",
+        "description": "无需手动设置即可保持周期运行。",
+        "tooltip": "根据您选择的计划自动创建新周期。",
+        "edit_button": "编辑",
+        "form": {
+          "cycle_title": {
+            "label": "周期标题",
+            "placeholder": "标题",
+            "tooltip": "标题将为后续周期添加编号。例如：设计 - 1/2/3",
+            "validation": {
+              "required": "周期标题为必填项",
+              "max_length": "标题不得超过255个字符"
+            }
+          },
+          "cycle_duration": {
+            "label": "周期持续时间",
+            "unit": "周",
+            "validation": {
+              "required": "周期持续时间为必填项",
+              "min": "周期持续时间必须至少为1周",
+              "max": "周期持续时间不得超过30周",
+              "positive": "周期持续时间必须为正数"
+            }
+          },
+          "cooldown_period": {
+            "label": "冷却期",
+            "unit": "天",
+            "tooltip": "下一个周期开始前的周期间隔暂停期。",
+            "validation": {
+              "required": "冷却期为必填项",
+              "negative": "冷却期不能为负数"
+            }
+          },
+          "start_date": {
+            "label": "周期开始日",
+            "validation": {
+              "required": "开始日期为必填项",
+              "past": "开始日期不能是过去的日期"
+            }
+          },
+          "number_of_cycles": {
+            "label": "未来周期数",
+            "validation": {
+              "required": "周期数为必填项",
+              "min": "至少需要1个周期",
+              "max": "无法安排超过3个周期"
+            }
+          },
+          "auto_rollover": {
+            "label": "工作项自动结转",
+            "tooltip": "在周期完成的当天，将所有未完成的工作项移至下一个周期。"
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "正在启用自动安排周期",
+            "loading_disable": "正在禁用自动安排周期",
+            "success": {
+              "title": "成功！",
+              "message": "自动安排周期已成功切换。"
+            },
+            "error": {
+              "title": "错误！",
+              "message": "切换自动安排周期失败。"
+            }
+          },
+          "save": {
+            "loading": "正在保存自动安排周期配置",
+            "success": {
+              "title": "成功！",
+              "message_create": "自动安排周期配置已成功保存。",
+              "message_update": "自动安排周期配置已成功更新。"
+            },
+            "error": {
+              "title": "错误！",
+              "message_create": "保存自动安排周期配置失败。",
+              "message_update": "更新自动安排周期配置失败。"
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/project.json b/packages/i18n/src/locales/zh-CN/project.json
new file mode 100644
index 0000000..53c1b28
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "创建时间",
+      "updated_at": "更新时间",
+      "name": "名称"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "添加周期",
+    "more_details": "更多详情",
+    "cycle": "周期",
+    "update_cycle": "更新周期",
+    "create_cycle": "创建周期",
+    "no_matching_cycles": "没有匹配的周期",
+    "remove_filters_to_see_all_cycles": "移除筛选器以查看所有周期",
+    "remove_search_criteria_to_see_all_cycles": "移除搜索条件以查看所有周期",
+    "only_completed_cycles_can_be_archived": "只能归档已完成的周期",
+    "start_date": "开始日期",
+    "end_date": "结束日期",
+    "in_your_timezone": "在您的时区",
+    "transfer_work_items": "转移 {count} 工作项",
+    "transfer": {
+      "no_cycles_available": "没有其他可用的周期来转移工作项。"
+    },
+    "date_range": "日期范围",
+    "add_date": "添加日期",
+    "active_cycle": {
+      "label": "活动周期",
+      "progress": "进度",
+      "chart": "燃尽图",
+      "priority_issue": "优先工作项",
+      "assignees": "受理人",
+      "issue_burndown": "工作项燃尽",
+      "ideal": "理想",
+      "current": "当前",
+      "labels": "标签",
+      "trailing": "落后",
+      "leading": "领先"
+    },
+    "upcoming_cycle": {
+      "label": "即将到来的周期"
+    },
+    "completed_cycle": {
+      "label": "已完成的周期"
+    },
+    "status": {
+      "days_left": "剩余天数",
+      "completed": "已完成",
+      "yet_to_start": "尚未开始",
+      "in_progress": "进行中",
+      "draft": "草稿"
+    },
+    "action": {
+      "restore": {
+        "title": "恢复周期",
+        "success": {
+          "title": "周期已恢复",
+          "description": "周期已被恢复。"
+        },
+        "failed": {
+          "title": "周期恢复失败",
+          "description": "无法恢复周期。请重试。"
+        }
+      },
+      "favorite": {
+        "loading": "正在将周期添加到收藏",
+        "success": {
+          "description": "周期已添加到收藏。",
+          "title": "成功！"
+        },
+        "failed": {
+          "description": "无法将周期添加到收藏。请重试。",
+          "title": "错误！"
+        }
+      },
+      "unfavorite": {
+        "loading": "正在从收藏中移除周期",
+        "success": {
+          "description": "周期已从收藏中移除。",
+          "title": "成功！"
+        },
+        "failed": {
+          "description": "无法从收藏中移除周期。请重试。",
+          "title": "错误！"
+        }
+      },
+      "update": {
+        "loading": "正在更新周期",
+        "success": {
+          "description": "周期更新成功。",
+          "title": "成功！"
+        },
+        "failed": {
+          "description": "更新周期时出错。请重试。",
+          "title": "错误！"
+        },
+        "error": {
+          "already_exists": "在给定日期范围内已存在周期，如果您想创建草稿周期，可以通过移除两个日期来实现。"
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "在周期中分组和时间框定您的工作。",
+        "description": "将工作按时间框分解，从项目截止日期倒推设置日期，并作为团队取得切实的进展。",
+        "primary_button": {
+          "text": "设置您的第一个周期",
+          "comic": {
+            "title": "周期是重复的时间框。",
+            "description": "冲刺、迭代或您用于每周或每两周跟踪工作的任何其他术语都是一个周期。"
+          }
+        }
+      },
+      "no_issues": {
+        "title": "尚未向周期添加工作项",
+        "description": "添加或创建您希望在此周期内时间框定和交付的工作项",
+        "primary_button": {
+          "text": "创建新工作项"
+        },
+        "secondary_button": {
+          "text": "添加现有工作项"
+        }
+      },
+      "completed_no_issues": {
+        "title": "周期中没有工作项",
+        "description": "周期中没有工作项。工作项已被转移或隐藏。要查看隐藏的工作项（如果有），请相应更新您的显示属性。"
+      },
+      "active": {
+        "title": "没有活动周期",
+        "description": "活动周期包括其范围内包含今天日期的任何时期。在这里查找活动周期的进度和详细信息。"
+      },
+      "archived": {
+        "title": "尚无已归档的周期",
+        "description": "为了整理您的项目，归档已完成的周期。归档后可以在这里找到它们。"
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "为您的项目保存筛选视图。根据需要创建任意数量",
+        "description": "视图是您经常使用或想要轻松访问的一组已保存的筛选条件。项目中的所有同事都可以看到每个人的视图，并选择最适合他们需求的视图。",
+        "primary_button": {
+          "text": "创建您的第一个视图",
+          "comic": {
+            "title": "视图基于工作项属性运作。",
+            "description": "您可以在此处创建一个视图，根据需要使用任意数量的属性作为筛选条件。"
+          }
+        },
+        "filter": {
+          "title": "没有匹配的视图",
+          "description": "没有符合搜索条件的视图。\n创建一个新视图。"
+        }
+      },
+      "no_archived_issues": {
+        "title": "尚无已归档的工作项",
+        "description": "通过手动或自动化方式，您可以归档已完成或已取消的工作项。归档后可以在这里找到它们。",
+        "primary_button": {
+          "text": "设置自动化"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "未找到符合筛选条件的工作项",
+        "secondary_button": {
+          "text": "清除所有筛选条件"
+        }
+      },
+      "public": {
+        "title": "尚无公共页面",
+        "description": "在这里查看与项目中所有人共享的页面。",
+        "primary_button": {
+          "text": "创建您的第一个页面"
+        }
+      },
+      "archived": {
+        "title": "尚无已归档的页面",
+        "description": "归档不在您关注范围内的页面。需要时可以在这里访问它们。"
+      },
+      "shared": {
+        "title": "尚无共享页面",
+        "description": "其他人与您共享的页面将显示在此处。"
+      }
+    },
+    "delete_view": {
+      "title": "您确定要删除此视图吗？",
+      "content": "如果您确认，您为此视图选择的所有排序、筛选和显示选项 + 布局将被永久删除，无法恢复。"
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "创建工作项并将其分配给某人，甚至是您自己",
+        "description": "将工作项视为工作、任务或待完成的工作。工作项及其子工作项通常是基于时间的、分配给团队成员的可执行项。您的团队通过创建、分配和完成工作项来推动项目实现其目标。",
+        "primary_button": {
+          "text": "创建您的第一个工作项",
+          "comic": {
+            "title": "工作项是 Plane 中的基本构建块。",
+            "description": "重新设计 Plane 界面、重塑公司品牌或启动新的燃料喷射系统都是可能包含子工作项的工作项示例。"
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "尚无已归档的工作项",
+        "description": "通过手动或自动化方式，您可以归档已完成或已取消的工作项。归档后可以在这里找到它们。",
+        "primary_button": {
+          "text": "设置自动化"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "未找到符合筛选条件的工作项",
+        "secondary_button": {
+          "text": "清除所有筛选条件"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "添加模块",
+    "update_module": "更新模块",
+    "create_module": "创建模块",
+    "archive_module": "归档模块",
+    "restore_module": "恢复模块",
+    "delete_module": "删除模块",
+    "empty_state": {
+      "general": {
+        "title": "将项目里程碑映射到模块，轻松跟踪汇总工作。",
+        "description": "属于逻辑层次结构父级的一组工作项形成一个模块。将其视为按项目里程碑跟踪工作的方式。它们有自己的周期和截止日期以及分析功能，帮助您了解距离里程碑的远近。",
+        "primary_button": {
+          "text": "构建您的第一个模块",
+          "comic": {
+            "title": "模块帮助按层次结构对工作进行分组。",
+            "description": "购物车模块、底盘模块和仓库模块都是这种分组的好例子。"
+          }
+        }
+      },
+      "no_issues": {
+        "title": "模块中没有工作项",
+        "description": "创建或添加您想作为此模块一部分完成的工作项",
+        "primary_button": {
+          "text": "创建新工作项"
+        },
+        "secondary_button": {
+          "text": "添加现有工作项"
+        }
+      },
+      "archived": {
+        "title": "尚无已归档的模块",
+        "description": "为了整理您的项目，归档已完成或已取消的模块。归档后可以在这里找到它们。"
+      },
+      "sidebar": {
+        "in_active": "此模块尚未激活。",
+        "invalid_date": "日期无效。请输入有效日期。"
+      }
+    },
+    "quick_actions": {
+      "archive_module": "归档模块",
+      "archive_module_description": "只有已完成或已取消的\n模块可以归档。",
+      "delete_module": "删除模块"
+    },
+    "toast": {
+      "copy": {
+        "success": "模块链接已复制到剪贴板"
+      },
+      "delete": {
+        "success": "模块删除成功",
+        "error": "删除模块失败"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "写笔记、文档或完整的知识库。让 Plane 的 AI 助手 Galileo 帮助您开始",
+        "description": "页面是 Plane 中的思维记录空间。记录会议笔记，轻松格式化，嵌入工作项，使用组件库进行布局，并将它们全部保存在项目上下文中。要快速完成任何文档，可以通过快捷键或点击按钮调用 Plane 的 AI Galileo。",
+        "primary_button": {
+          "text": "创建您的第一个页面"
+        }
+      },
+      "private": {
+        "title": "尚无私人页面",
+        "description": "在这里保存您的私人想法。准备好分享时，团队就在一键之遥。",
+        "primary_button": {
+          "text": "创建您的第一个页面"
+        }
+      },
+      "public": {
+        "title": "尚无公共页面",
+        "description": "在这里查看与项目中所有人共享的页面。",
+        "primary_button": {
+          "text": "创建您的第一个页面"
+        }
+      },
+      "archived": {
+        "title": "尚无已归档的页面",
+        "description": "归档不在您关注范围内的页面。需要时可以在这里访问它们。"
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "项目未启用收集功能。",
+        "description": "收集功能帮助您管理项目的传入请求，并将其添加为工作流中的工作项。从项目设置启用收集功能以管理请求。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      },
+      "cycle": {
+        "title": "此项目未启用周期功能。",
+        "description": "按时间框将工作分解，从项目截止日期倒推设置日期，并作为团队取得切实的进展。为您的项目启用周期功能以开始使用它们。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      },
+      "module": {
+        "title": "项目未启用模块功能。",
+        "description": "模块是项目的基本构建块。从项目设置启用模块以开始使用它们。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      },
+      "page": {
+        "title": "项目未启用页面功能。",
+        "description": "页面是项目的基本构建块。从项目设置启用页面以开始使用它们。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      },
+      "view": {
+        "title": "项目未启用视图功能。",
+        "description": "视图是项目的基本构建块。从项目设置启用视图以开始使用它们。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "待办",
+      "planned": "已计划",
+      "in_progress": "进行中",
+      "paused": "已暂停",
+      "completed": "已完成",
+      "cancelled": "已取消"
+    },
+    "layout": {
+      "list": "列表布局",
+      "board": "画廊布局",
+      "timeline": "时间线布局"
+    },
+    "order_by": {
+      "name": "名称",
+      "progress": "进度",
+      "issues": "工作项数量",
+      "due_date": "截止日期",
+      "created_at": "创建日期",
+      "manual": "手动"
+    }
+  },
+  "project_members": {
+    "full_name": "全名",
+    "display_name": "显示名称",
+    "email": "邮箱",
+    "joining_date": "加入日期",
+    "role": "角色"
+  },
+  "project": {
+    "members_import": {
+      "title": "从CSV导入成员",
+      "description": "上传包含以下列的CSV：电子邮箱和角色（5=访客，15=成员，20=管理员）。用户必须是工作区成员。",
+      "download_sample": "下载示例CSV",
+      "dropzone": {
+        "active": "将CSV文件放在这里",
+        "inactive": "拖放或点击上传",
+        "file_type": "仅支持.csv文件"
+      },
+      "buttons": {
+        "cancel": "取消",
+        "import": "导入",
+        "try_again": "重试",
+        "close": "关闭",
+        "done": "完成"
+      },
+      "progress": {
+        "uploading": "上传中...",
+        "importing": "导入中..."
+      },
+      "summary": {
+        "title": {
+          "complete": "导入完成"
+        },
+        "message": {
+          "success": "成功将{count}名成员导入到项目。",
+          "no_imports": "CSV文件中未导入任何新成员。"
+        },
+        "stats": {
+          "added": "已添加",
+          "reactivated": "已重新激活",
+          "already_members": "已是成员",
+          "skipped": "已跳过"
+        },
+        "download_errors": "下载跳过详情"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "无效文件",
+          "message": "仅支持CSV文件。"
+        },
+        "import_failed": {
+          "title": "导入失败",
+          "message": "出了些问题。"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/settings.json b/packages/i18n/src/locales/zh-CN/settings.json
new file mode 100644
index 0000000..4351bb5
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "更改邮箱",
+        "description": "请输入新的邮箱地址以接收验证链接。",
+        "toasts": {
+          "success_title": "成功！",
+          "success_message": "邮箱已更新，请重新登录。"
+        },
+        "form": {
+          "email": {
+            "label": "新邮箱",
+            "placeholder": "请输入邮箱",
+            "errors": {
+              "required": "邮箱为必填项",
+              "invalid": "邮箱格式无效",
+              "exists": "邮箱已存在，请使用其他邮箱。",
+              "validation_failed": "邮箱验证失败，请重试。"
+            }
+          },
+          "code": {
+            "label": "验证码",
+            "placeholder": "123456",
+            "helper_text": "验证码已发送至你的新邮箱。",
+            "errors": {
+              "required": "验证码为必填项",
+              "invalid": "验证码无效，请重试。"
+            }
+          }
+        },
+        "actions": {
+          "continue": "继续",
+          "confirm": "确认",
+          "cancel": "取消"
+        },
+        "states": {
+          "sending": "发送中…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "偏好设置",
+      "description": "按照您的工作方式自定义您的应用体验"
+    },
+    "notifications": {
+      "heading": "邮件通知",
+      "description": "及时了解您订阅的工作项。启用此功能以接收通知。",
+      "select_default_view": "选择默认视图",
+      "compact": "紧凑",
+      "full": "全屏"
+    },
+    "security": {
+      "heading": "安全"
+    },
+    "api_tokens": {
+      "title": "个人访问令牌",
+      "description": "生成安全的 API 令牌，将您的数据与外部系统和应用程序集成。"
+    },
+    "activity": {
+      "heading": "活动",
+      "description": "跟踪您在所有项目和工作项中的最近操作和更改。"
+    },
+    "connections": {
+      "title": "连接",
+      "heading": "连接",
+      "description": "管理您的工作区连接设置。"
+    }
+  },
+  "profile": {
+    "label": "个人资料",
+    "page_label": "您的工作",
+    "work": "工作",
+    "details": {
+      "joined_on": "加入时间",
+      "time_zone": "时区"
+    },
+    "stats": {
+      "workload": "工作量",
+      "overview": "概览",
+      "created": "已创建的工作项",
+      "assigned": "已分配的工作项",
+      "subscribed": "已订阅的工作项",
+      "state_distribution": {
+        "title": "按状态分类的工作项",
+        "empty": "创建工作项以在图表中查看按状态分类的工作项，以便更好地分析。"
+      },
+      "priority_distribution": {
+        "title": "按优先级分类的工作项",
+        "empty": "创建工作项以在图表中查看按优先级分类的工作项，以便更好地分析。"
+      },
+      "recent_activity": {
+        "title": "最近活动",
+        "empty": "我们找不到数据。请查看您的输入",
+        "button": "下载今天的活动",
+        "button_loading": "下载中"
+      }
+    },
+    "actions": {
+      "profile": "个人资料",
+      "security": "安全",
+      "activity": "活动",
+      "preferences": "偏好设置",
+      "notifications": "通知",
+      "api-tokens": "个人访问令牌",
+      "connections": "连接"
+    },
+    "tabs": {
+      "summary": "摘要",
+      "assigned": "已分配",
+      "created": "已创建",
+      "subscribed": "已订阅",
+      "activity": "活动"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "尚无活动",
+        "description": "通过创建新工作项开始！为其添加详细信息和属性。在 Plane 中探索更多内容以查看您的活动。"
+      },
+      "assigned": {
+        "title": "没有分配给您的工作项",
+        "description": "可以从这里跟踪分配给您的工作项。"
+      },
+      "created": {
+        "title": "尚无工作项",
+        "description": "您创建的所有工作项都会出现在这里，直接在这里跟踪它们。"
+      },
+      "subscribed": {
+        "title": "尚无工作项",
+        "description": "订阅您感兴趣的工作项，在这里跟踪所有这些工作项。"
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "系统偏好"
+      },
+      "light": {
+        "label": "浅色"
+      },
+      "dark": {
+        "label": "深色"
+      },
+      "light_contrast": {
+        "label": "浅色高对比度"
+      },
+      "dark_contrast": {
+        "label": "深色高对比度"
+      },
+      "custom": {
+        "label": "自定义主题"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/stickies.json b/packages/i18n/src/locales/zh-CN/stickies.json
new file mode 100644
index 0000000..8fcea10
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "您的便签",
+    "placeholder": "点击此处输入",
+    "all": "所有便签",
+    "no-data": "记下一个想法，捕捉一个灵感，或记录一个突发奇想。添加便签开始使用。",
+    "add": "添加便签",
+    "search_placeholder": "按标题搜索",
+    "delete": "删除便签",
+    "delete_confirmation": "您确定要删除此便签吗？",
+    "empty_state": {
+      "simple": "记下一个想法，捕捉一个灵感，或记录一个突发奇想。添加便签开始使用。",
+      "general": {
+        "title": "便签是您随手记下的快速笔记和待办事项。",
+        "description": "通过创建随时随地都可以访问的便签，轻松捕捉您的想法和创意。",
+        "primary_button": {
+          "text": "添加便签"
+        }
+      },
+      "search": {
+        "title": "这与您的任何便签都不匹配。",
+        "description": "尝试使用不同的术语，或如果您确定\n搜索是正确的，请告诉我们。",
+        "primary_button": {
+          "text": "添加便签"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "便签名称不能超过100个字符。",
+        "already_exists": "已存在一个没有描述的便签"
+      },
+      "created": {
+        "title": "便签已创建",
+        "message": "便签已成功创建"
+      },
+      "not_created": {
+        "title": "便签未创建",
+        "message": "无法创建便签"
+      },
+      "updated": {
+        "title": "便签已更新",
+        "message": "便签已成功更新"
+      },
+      "not_updated": {
+        "title": "便签未更新",
+        "message": "无法更新便签"
+      },
+      "removed": {
+        "title": "便签已移除",
+        "message": "便签已成功移除"
+      },
+      "not_removed": {
+        "title": "便签未移除",
+        "message": "无法移除便签"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/template.json b/packages/i18n/src/locales/zh-CN/template.json
new file mode 100644
index 0000000..05112ec
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "模板",
+      "description": "使用模板可以节省80%创建项目、工作项和页面的时间。",
+      "new_project_template": "新建项目模板",
+      "new_work_item_template": "新建工作项模板",
+      "new_page_template": "新建页面模板",
+      "options": {
+        "project": {
+          "label": "项目模板"
+        },
+        "work_item": {
+          "label": "工作项模板"
+        },
+        "page": {
+          "label": "页面模板"
+        }
+      },
+      "create_template": {
+        "label": "创建模板",
+        "no_permission": {
+          "project": "联系您的项目管理员创建模板",
+          "workspace": "联系您的工作区管理员创建模板"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "使用模板",
+          "loading": "使用中"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "源自工作区"
+        },
+        "project": {
+          "info": "源自项目"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "为您的项目模板命名。",
+              "validation": {
+                "required": "模板名称是必填项",
+                "maxLength": "模板名称应少于255个字符"
+              }
+            },
+            "description": {
+              "placeholder": "描述何时以及如何使用此模板。"
+            }
+          },
+          "name": {
+            "placeholder": "为您的项目命名。",
+            "validation": {
+              "required": "项目标题是必填项",
+              "maxLength": "项目标题应少于255个字符"
+            }
+          },
+          "description": {
+            "placeholder": "描述此项目的目的和目标。"
+          },
+          "button": {
+            "create": "创建项目模板",
+            "update": "更新项目模板"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "为您的工作项模板命名。",
+              "validation": {
+                "required": "模板名称是必填项",
+                "maxLength": "模板名称应少于255个字符"
+              }
+            },
+            "description": {
+              "placeholder": "描述何时以及如何使用此模板。"
+            }
+          },
+          "name": {
+            "placeholder": "为此工作项提供标题。",
+            "validation": {
+              "required": "工作项标题是必填项",
+              "maxLength": "工作项标题应少于255个字符"
+            }
+          },
+          "description": {
+            "placeholder": "描述此工作项，以便清楚地了解完成后您将实现什么。"
+          },
+          "button": {
+            "create": "创建工作项模板",
+            "update": "更新工作项模板"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "为您的页面模板命名。",
+              "validation": {
+                "required": "模板名称是必填项",
+                "maxLength": "模板名称应少于255个字符"
+              }
+            },
+            "description": {
+              "placeholder": "描述何时以及如何使用此模板。"
+            }
+          },
+          "name": {
+            "placeholder": "未命名页面",
+            "validation": {
+              "maxLength": "页面名称应少于255个字符"
+            }
+          },
+          "button": {
+            "create": "创建页面模板",
+            "update": "更新页面模板"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {发布设置} other {发布到市场}}",
+          "unpublish_action": "从市场移除",
+          "title": "让您的模板可被发现和识别。",
+          "name": {
+            "label": "模板名称",
+            "placeholder": "为您的模板命名",
+            "validation": {
+              "required": "模板名称是必填项",
+              "maxLength": "模板名称应少于255个字符"
+            }
+          },
+          "short_description": {
+            "label": "简短描述",
+            "placeholder": "此模板非常适合同时管理多个项目的项目经理。",
+            "validation": {
+              "required": "简短描述是必填项"
+            }
+          },
+          "description": {
+            "label": "描述",
+            "placeholder": "通过我们的语音转文字集成提高生产力并简化沟通。\n• 实时转录：立即将语音转换为准确的文本。\n• 任务和评论创建：通过语音命令添加任务、描述和评论。",
+            "validation": {
+              "required": "描述是必填项"
+            }
+          },
+          "category": {
+            "label": "类别",
+            "placeholder": "选择您认为最合适的位置。您可以选择多个。",
+            "validation": {
+              "required": "至少需要一个类别"
+            }
+          },
+          "keywords": {
+            "label": "关键词",
+            "placeholder": "使用您认为用户在查找此模板时会搜索的术语。",
+            "helperText": "输入逗号分隔的关键词，这些关键词可能有助于人们从搜索中找到此模板。",
+            "validation": {
+              "required": "至少需要一个关键词"
+            }
+          },
+          "website": {
+            "label": "网站 URL",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "无效的 URL",
+              "maxLength": "URL 应少于800个字符"
+            }
+          },
+          "company_name": {
+            "label": "公司名称",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "公司名称是必填项",
+              "maxLength": "公司名称应少于255个字符"
+            }
+          },
+          "contact_email": {
+            "label": "支持邮箱",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "无效的邮箱地址",
+              "maxLength": "支持邮箱应少于255个字符"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "隐私政策链接",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "无效的URL",
+              "maxLength": "URL应少于800个字符"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "使用条款链接",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "无效的URL",
+              "maxLength": "URL应少于800个字符"
+            }
+          },
+          "cover_image": {
+            "label": "添加将在市场中显示的封面图片",
+            "upload_title": "上传封面图片",
+            "upload_placeholder": "点击上传或拖放上传封面图片",
+            "drop_here": "拖放到这里",
+            "click_to_upload": "点击上传",
+            "invalid_file_or_exceeds_size_limit": "无效的文件或超出大小限制。请重试。",
+            "upload_and_save": "上传并保存",
+            "uploading": "上传中",
+            "remove": "删除",
+            "removing": "删除中",
+            "validation": {
+              "required": "封面图片是必填项"
+            }
+          },
+          "attach_screenshots": {
+            "label": "包含您认为对查看此模板的用户有帮助的文档和图片。",
+            "validation": {
+              "required": "至少需要一张截图"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "模板",
+        "description": "使用Plane中的项目、工作项和页面模板，您无需从头开始创建项目或手动设置工作项属性。",
+        "sub_description": "使用模板可以收回80%的管理时间。"
+      },
+      "no_templates": {
+        "button": "创建您的第一个模板"
+      },
+      "no_labels": {
+        "description": " 还没有标签。创建标签以帮助组织和筛选项目中的工作项。"
+      },
+      "no_modules": {
+        "description": "还没有模块。将工作组织成具有专门负责人和受理人的子项目。"
+      },
+      "no_work_items": {
+        "description": "还没有工作项。添加一个以更好地组织您的工作。"
+      },
+      "no_sub_work_items": {
+        "description": "还没有子工作项。添加一个以更好地组织您的工作。"
+      },
+      "page": {
+        "no_templates": {
+          "title": "您没有访问任何模板。",
+          "description": "请创建一个模板"
+        },
+        "no_results": {
+          "title": "没有找到模板。",
+          "description": "尝试使用其他术语搜索。"
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "模板已创建",
+          "message": "{templateName}，{templateType}模板，现已可用于您的工作区。"
+        },
+        "error": {
+          "title": "这次我们无法创建该模板。",
+          "message": "尝试再次保存您的详细信息或将它们复制到新模板中，最好在另一个标签页中。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "模板已更改",
+          "message": "{templateName}，{templateType}模板，已被更改。"
+        },
+        "error": {
+          "title": "我们无法保存对此模板的更改。",
+          "message": "尝试再次保存您的详细信息或稍后回到此模板。如果仍有问题，请联系我们。"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "模板已删除",
+          "message": "{templateName}，{templateType}模板，已从您的工作区中删除。"
+        },
+        "error": {
+          "title": "这次我们无法删除该模板。",
+          "message": "尝试再次删除它或稍后再回来。如果那时您仍无法删除它，请联系我们。"
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "模板已移除",
+          "message": "{templateName}，{templateType}模板，已被移除。"
+        },
+        "error": {
+          "title": "这次我们无法移除该模板。",
+          "message": "尝试再次移除它或稍后再回来。如果那时您仍无法移除它，请联系我们。"
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "删除模板",
+      "description": {
+        "prefix": "您确定要删除模板-",
+        "suffix": "吗？与该模板相关的所有数据将被永久删除。此操作无法撤消。"
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "移除模板",
+      "description": {
+        "prefix": "您确定要移除模板-",
+        "suffix": "吗？此模板将不再在市场上供用户使用。"
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "添加新模板",
+        "project": "添加新模板"
+      },
+      "label": {
+        "project": "选择项目模板",
+        "page": "从模板中选择"
+      },
+      "tooltip": {
+        "work_item": "选择工作项模板"
+      },
+      "no_results": {
+        "work_item": "未找到模板。",
+        "project": "未找到模板。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/tour.json b/packages/i18n/src/locales/zh-CN/tour.json
new file mode 100644
index 0000000..431cbad
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "欢迎来到您的工作区",
+        "description": "为了帮助您开始,我们为您创建了一个演示项目。让我们添加您的第一个工作项。"
+      },
+      "step_one": {
+        "title": "点击\"+添加工作项\"",
+        "description": "首先点击\"+新建工作项\"按钮。您可以创建任务、错误或符合您需求的自定义类型。"
+      },
+      "step_two": {
+        "title": "筛选您的工作项",
+        "description": "使用筛选器快速缩小列表范围。您可以按状态、优先级或团队成员进行筛选。 "
+      },
+      "step_three": {
+        "title": "根据需要查看、分组和排序工作项。",
+        "description": "查看所需属性，并根据您的需求对工作项进行分组或排序。"
+      },
+      "step_four": {
+        "title": "按您的方式可视化",
+        "description": "选择要在列表中查看的属性。您还可以按自己的方式对工作项进行分组和排序。"
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "使用周期取得进展",
+        "description": "按Q键创建周期。为其命名并设置日期—每个项目只有一个周期。"
+      },
+      "step_one": {
+        "title": "创建新周期",
+        "description": "按Q键创建周期。为其命名并设置日期—每个项目只有一个周期。"
+      },
+      "step_two": {
+        "title": "点击\"+\"",
+        "description": "首先点击\"+\"按钮。直接从周期页面添加新的或现有的工作项。"
+      },
+      "step_three": {
+        "title": "周期摘要",
+        "description": "跟踪周期进度、团队生产力和优先事项—并调查是否有任何落后。"
+      },
+      "step_four": {
+        "title": "转移工作项",
+        "description": "截止日期后，周期会自动完成。将未完成的工作移至另一个周期。"
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "将项目分解为模块",
+        "description": "模块是较小的、集中的项目，帮助用户在特定时间范围内对工作项进行分组和组织。"
+      },
+      "step_one": {
+        "title": "创建模块",
+        "description": "模块是较小的、集中的项目，帮助用户在特定时间范围内对工作项进行分组和组织。"
+      },
+      "step_two": {
+        "title": "点击\"+\"",
+        "description": "首先点击\"+\"按钮。直接从模块页面添加新的或现有的工作项。"
+      },
+      "step_three": {
+        "title": "模块状态",
+        "description": "模块使用这些状态来帮助用户规划并清楚地跟踪进度和阶段。"
+      },
+      "step_four": {
+        "title": "模块进度",
+        "description": "模块进度通过已完成的项目进行跟踪，并提供分析以监控性能。"
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "使用AI驱动的页面进行文档化",
+        "description": "Plane中的页面让您可以捕获、组织和协作处理项目信息—无需外部工具。"
+      },
+      "step_one": {
+        "title": "将页面设为公开或私密",
+        "description": "页面可以设置为公开，对工作区中的所有人可见，或设置为私密，仅您可以访问。"
+      },
+      "step_two": {
+        "title": "使用 / 命令",
+        "description": "在页面上使用 / 从16种块类型添加内容，包括列表、图像、表格和嵌入。"
+      },
+      "step_three": {
+        "title": "页面操作",
+        "description": "创建页面后，您可以点击右上角的•••菜单执行以下操作。"
+      },
+      "step_four": {
+        "title": "目录",
+        "description": "点击面板图标查看所有标题，获得页面的鸟瞰图。"
+      },
+      "step_five": {
+        "title": "版本历史",
+        "description": "页面通过版本历史跟踪所有编辑，允许您在需要时恢复以前的版本。"
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "使用接收简化请求",
+        "description": "Plane专有功能，允许访客为错误、请求或工单创建工作项。"
+      },
+      "step_one": {
+        "title": "打开/关闭接收请求",
+        "description": "待处理的请求保留在\"打开\"标签中，一旦由管理员或成员处理，它们将移至\"关闭\"。"
+      },
+      "step_two": {
+        "title": "接受/拒绝待处理请求",
+        "description": "接受以编辑工作项并将其移至您的项目，或拒绝以将其标记为已取消。"
+      },
+      "step_three": {
+        "title": "暂时推迟",
+        "description": "可以推迟工作项以便稍后查看。它将移至您的打开请求列表的底部。"
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "告别标签页切换。连接您的世界。",
+        "description": "连接 GitHub、Slack，直接在 Plane AI 中跟踪 PR 并总结聊天内容。"
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "导航，重新想象",
+        "sub_title": "您的工作区现在通过更智能、更简化的导航更容易探索。",
+        "highlight_1": "简化的左侧面板结构，更快发现",
+        "highlight_2": "改进的全局搜索，立即跳转到任何内容",
+        "highlight_3": "更智能的类别分组，清晰和专注",
+        "footer": "想要快速浏览吗？"
+      },
+      "step_zero": {
+        "title": "即刻查找任何内容",
+        "description": "使用通用搜索跳转到任务、项目、页面和人员—不离开您的流程。"
+      },
+      "step_one": {
+        "title": "掌控更新",
+        "description": "您的收件箱将所有提及、批准和活动保存在一个地方，因此您永远不会错过重要的工作。"
+      },
+      "step_two": {
+        "title": "个性化您的导航",
+        "description": "在首选项中自定义您看到的内容以及导航方式。"
+      }
+    },
+    "actions": {
+      "close": "关闭",
+      "next": "下一步",
+      "back": "返回",
+      "done": "完成",
+      "take_a_tour": "浏览",
+      "get_started": "开始",
+      "got_it": "知道了"
+    },
+    "seed_data": {
+      "title": "这是您的演示项目",
+      "description": "项目让您可以管理团队、任务以及在工作区中完成工作所需的一切。"
+    }
+  },
+  "get_started": {
+    "title": "你好 {name}，欢迎！",
+    "description": "这是您开始Plane之旅所需的一切。",
+    "checklist_section": {
+      "title": "开始",
+      "description": "开始设置，看到您的想法更快地变为现实。",
+      "checklist_items": {
+        "item_1": {
+          "title": "创建项目"
+        },
+        "item_2": {
+          "title": "创建工作项"
+        },
+        "item_3": {
+          "title": "邀请团队成员"
+        },
+        "item_4": {
+          "title": "创建页面"
+        },
+        "item_5": {
+          "title": "试用Plane AI聊天"
+        },
+        "item_6": {
+          "title": "链接集成"
+        }
+      }
+    },
+    "team_section": {
+      "title": "邀请您的团队",
+      "description": "邀请队友并开始一起构建。"
+    },
+    "integrations_section": {
+      "title": "增强您的工作区",
+      "more_integrations": "浏览更多集成"
+    },
+    "switch_to_plane_section": {
+      "title": "了解团队为何切换到Plane",
+      "description": "将Plane与您今天使用的工具进行比较，看看差异。"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/update.json b/packages/i18n/src/locales/zh-CN/update.json
new file mode 100644
index 0000000..c464450
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "进度",
+      "since_last_update": "自上次更新以来",
+      "comments": "{count, plural, other{# 评论}}"
+    },
+    "add_update": "添加更新",
+    "add_update_placeholder": "在这里输入您的更新",
+    "empty": {
+      "title": "还没有更新",
+      "description": "您可以在这里查看更新。"
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "反应已创建",
+          "message": "反应已成功创建。"
+        },
+        "error": {
+          "title": "反应未创建",
+          "message": "反应未创建。"
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "反应已移除",
+          "message": "反应已成功移除。"
+        },
+        "error": {
+          "title": "反应未移除",
+          "message": "反应未移除。"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "更新已创建",
+        "message": "更新已成功创建。"
+      },
+      "error": {
+        "title": "更新未创建",
+        "message": "更新未创建。"
+      }
+    },
+    "delete": {
+      "title": "删除更新",
+      "confirmation": "您确定要删除此更新吗？此操作是不可逆的。",
+      "success": {
+        "title": "更新已删除",
+        "message": "更新已成功删除。"
+      },
+      "error": {
+        "title": "更新未删除",
+        "message": "更新未删除。"
+      }
+    },
+    "update": {
+      "success": {
+        "title": "更新已更新",
+        "message": "更新已成功更新。"
+      },
+      "error": {
+        "title": "更新未更新",
+        "message": "更新未更新。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/wiki.json b/packages/i18n/src/locales/zh-CN/wiki.json
new file mode 100644
index 0000000..7ee16ca
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "常规",
+      "private": "私密",
+      "shared": "共享",
+      "archived": "已归档"
+    },
+    "fallback_name": "集合",
+    "form": {
+      "name_required": "集合标题为必填项",
+      "name_max_length": "集合名称必须少于 255 个字符",
+      "name_placeholder_create": "为集合输入一个标题",
+      "name_placeholder_edit": "集合名称"
+    },
+    "create_modal": {
+      "title": "创建集合",
+      "submit": "创建集合"
+    },
+    "edit_modal": {
+      "title": "编辑集合"
+    },
+    "delete_modal": {
+      "title": "删除集合",
+      "page_count": "此集合中有 {pageCount} 个页面。请选择如何处理它们。",
+      "transfer_title": "转移页面并删除集合",
+      "transfer_description": "删除前，请先将所有页面移动到另一个集合。页面及其权限将被保留。",
+      "transfer_warning": "移动后的页面将继承所选集合的权限。",
+      "transfer_target_label": "将页面移动到",
+      "transfer_target_placeholder": "选择一个集合",
+      "delete_with_pages_title": "连同页面一起删除集合",
+      "delete_with_pages_description": "永久删除集合及其所有页面。此操作无法撤销。",
+      "submit": "删除集合"
+    },
+    "header": {
+      "add_page": "添加页面"
+    },
+    "menu": {
+      "create_new_page": "创建新页面",
+      "add_existing_page": "添加现有页面",
+      "edit_collection": "编辑集合",
+      "collection_options": "集合选项"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "搜索页面",
+      "success_message": "已将 {count} 个页面添加到集合。",
+      "error_message": "无法移动页面。请重试。",
+      "no_pages_found": "没有找到与您的搜索匹配的页面",
+      "no_pages_available": "没有可移动的页面",
+      "submit": "移动"
+    },
+    "list": {
+      "invite_only": "仅限邀请",
+      "remove_error": "无法将页面从集合中移除。",
+      "no_matching_pages": "没有匹配的页面",
+      "remove_search_criteria": "移除搜索条件以查看所有页面",
+      "remove_filters": "移除筛选条件以查看所有页面",
+      "no_pages_title": "还没有页面",
+      "no_pages_description": "此集合当前没有任何页面。",
+      "untitled": "未命名",
+      "restricted_access": "访问受限",
+      "collapse_page": "折叠页面",
+      "expand_page": "展开页面",
+      "page_actions": "页面操作",
+      "page_link_copied": "页面链接已复制到剪贴板。",
+      "columns": {
+        "page_name": "页面名称",
+        "owner": "所有者",
+        "nested_pages": "嵌套页面",
+        "last_activity": "最后活动",
+        "actions": "操作"
+      }
+    },
+    "toasts": {
+      "created": "集合创建成功。",
+      "create_error": "无法创建集合。请重试。",
+      "renamed": "集合重命名成功。",
+      "rename_error": "无法更新集合。请重试。",
+      "transferred_deleted": "页面已转移，集合已删除。",
+      "deleted_with_pages": "集合及其页面已删除。",
+      "delete_error": "无法删除集合。请重试。",
+      "target_required": "请选择要将页面移动到的集合。",
+      "create_page_error": "无法创建页面。请重试。",
+      "create_page_in_collection_error": "无法创建页面或将其添加到集合中。请重试。",
+      "collection_link_copied": "集合链接已复制到剪贴板。"
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "升级以解锁 Wiki",
+      "description": "升级到 Plane Pro 以解锁公共页面、版本历史、共享页面、实时协作，以及用于 Wiki、公司内部文档和知识库的工作区页面。",
+      "upgrade_button": {
+        "text": "升级"
+      },
+      "learn_more_button": {
+        "text": "了解更多"
+      },
+      "download_button": {
+        "text": "下载数据",
+        "loading": "下载中"
+      },
+      "tabs": {
+        "nested_pages": "嵌套页面",
+        "add_embeds": "添加嵌入",
+        "publish_pages": "发布页面",
+        "comments": "评论"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "嵌套页面需要付费计划。升级以解锁。"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/work-item-type.json b/packages/i18n/src/locales/zh-CN/work-item-type.json
new file mode 100644
index 0000000..0cc3799
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "工作项类型",
+    "label_lowercase": "工作项类型",
+    "settings": {
+      "description": "自定义并添加您自己的属性以适应团队需求。",
+      "cant_delete_default_message": "无法删除此工作项类型，因为它已设置为该项目的默认类型。",
+      "set_as_default": "设为默认",
+      "cant_set_default_inactive_message": "请先激活此类型再将其设为默认",
+      "set_default_confirmation": {
+        "title": "设为默认工作项类型",
+        "description": "将 {name} 设为默认后，它将被导入到此工作区的所有项目中。所有新工作项将默认使用此类型。",
+        "confirm_button": "设为默认"
+      },
+      "properties": {
+        "title": "属性",
+        "description": "创建和自定义属性。",
+        "tooltip": "每种工作项类型都带有一组默认属性，如标题、描述、负责人、状态、优先级、开始日期、截止日期、模块、周期等。您还可以自定义并添加自己的属性以满足团队需求。",
+        "add_button": "添加新属性",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "从工作区导入"
+          }
+        },
+        "dropdown": {
+          "label": "属性类型",
+          "placeholder": "选择类型"
+        },
+        "property_type": {
+          "text": {
+            "label": "文本"
+          },
+          "number": {
+            "label": "数字"
+          },
+          "dropdown": {
+            "label": "下拉菜单"
+          },
+          "boolean": {
+            "label": "布尔值"
+          },
+          "date": {
+            "label": "日期"
+          },
+          "member_picker": {
+            "label": "成员选择器"
+          },
+          "formula": {
+            "label": "公式"
+          }
+        },
+        "attributes": {
+          "label": "属性",
+          "text": {
+            "single_line": {
+              "label": "单行"
+            },
+            "multi_line": {
+              "label": "段落"
+            },
+            "readonly": {
+              "label": "只读",
+              "header": "只读数据"
+            },
+            "invalid_text_format": {
+              "label": "无效的文本格式"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "添加数字"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "单选"
+            },
+            "multi_select": {
+              "label": "多选"
+            },
+            "no_default_value": {
+              "label": "无默认值"
+            }
+          },
+          "boolean": {
+            "label": "真 | 假",
+            "no_default": "无默认值"
+          },
+          "option": {
+            "create_update": {
+              "label": "选项",
+              "form": {
+                "placeholder": "添加选项",
+                "errors": {
+                  "name": {
+                    "required": "选项名称是必需的。",
+                    "integrity": "已存在同名选项。"
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "选择选项",
+                "multi": {
+                  "default": "选择选项",
+                  "variable": "已选择 {count} 个选项"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "成功！",
+              "message": "属性 {name} 创建成功。"
+            },
+            "error": {
+              "title": "错误！",
+              "message": "创建属性失败。请重试！"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "成功！",
+              "message": "属性 {name} 更新成功。"
+            },
+            "error": {
+              "title": "错误！",
+              "message": "更新属性失败。请重试！"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "成功！",
+              "message": "属性 {name} 删除成功。"
+            },
+            "error": {
+              "title": "错误！",
+              "message": "删除属性失败。请重试！"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} {name} 属性",
+            "success": {
+              "title": "成功！",
+              "message": "属性 {name} {action} 成功。"
+            },
+            "error": {
+              "title": "错误！",
+              "message": "{action} 属性失败。请重试！"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "创建新的自定义属性",
+            "update": "更新自定义属性"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "标题"
+            },
+            "description": {
+              "placeholder": "描述"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "您必须为属性命名。",
+              "max_length": "属性名称不应超过255个字符。"
+            },
+            "property_type": {
+              "required": "您必须选择一个属性类型。"
+            },
+            "options": {
+              "required": "您必须添加至少一个选项。"
+            },
+            "formula": {
+              "required": "公式表达式是必需的。",
+              "invalid": "无效的公式：{error}",
+              "circular_reference": "检测到循环引用。公式不能直接或间接引用自身。",
+              "invalid_reference": "公式引用了不存在的属性。"
+            }
+          }
+        },
+        "formula": {
+          "field_label": "公式字段",
+          "tooltip": "使用 '{'字段名称'}' 语法输入公式。支持 +、-、*、/ 和 & 运算符。",
+          "placeholder": "编写公式",
+          "test_button": "测试",
+          "validating": "验证中",
+          "validation_success": "公式有效！返回 {resultType}",
+          "validation_success_with_refs": "公式有效！返回 {resultType}（引用了 {count} 个字段）",
+          "error": {
+            "empty": "请输入公式",
+            "missing_context": "缺少工作空间、项目或工作项类型上下文",
+            "validation_failed": "验证失败"
+          },
+          "picker": {
+            "no_match": "没有匹配的属性",
+            "no_available": "没有可用的属性"
+          }
+        },
+        "enable_disable": {
+          "label": "活动",
+          "tooltip": {
+            "disabled": "点击禁用",
+            "enabled": "点击启用"
+          }
+        },
+        "delete_confirmation": {
+          "title": "删除此属性",
+          "description": "删除属性可能导致现有数据丢失。",
+          "secondary_description": "您是否想要禁用该属性？",
+          "primary_button": "{action}，删除它",
+          "secondary_button": "是的，禁用它"
+        },
+        "mandate_confirmation": {
+          "label": "必填属性",
+          "content": "此属性似乎有默认选项。将属性设为必填将删除默认值，用户必须添加他们选择的值。",
+          "tooltip": {
+            "disabled": "此属性类型无法设为必填",
+            "enabled": "取消选中以将字段标记为可选",
+            "checked": "选中以将字段标记为必填"
+          }
+        },
+        "empty_state": {
+          "title": "添加自定义属性",
+          "description": "您为此工作项类型添加的新属性将显示在此处。"
+        }
+      },
+      "types": {
+        "title": "类型",
+        "description": "使用属性创建和自定义工作项类型。",
+        "sort_options": {
+          "project_count": "所属项目数量"
+        },
+        "filter_options": {
+          "show_active": "显示活动",
+          "show_inactive": "显示不活动"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "新建",
+            "import_from_workspace": "从工作区导入"
+          },
+          "banner": {
+            "with_access": "启用工作项类型以从工作区级别导入类型",
+            "without_access": "工作项类型已禁用。请联系工作区管理员在工作区设置中启用。"
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "自定义属性",
+        "add_button": "添加属性",
+        "modal": {
+          "title": "添加属性",
+          "empty": {
+            "title": "没有可用属性",
+            "description": "所有属性均已关联到此类型。"
+          }
+        },
+        "unlink_confirmation": {
+          "title": "取消关联属性",
+          "description": "取消关联此属性将永久删除使用此类型的所有工作项中该属性的所有值。此操作无法撤销。",
+          "input_label": "输入",
+          "input_label_suffix": "以继续：",
+          "confirm": "取消关联属性",
+          "loading": "正在取消关联"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "删除此类型",
+        "description": "删除类型可能会导致现有数据丢失。",
+        "can_disable_warning": "您想改为禁用该类型吗？",
+        "primary_button": "是的，删除它",
+        "toast": {
+          "success": {
+            "title": "成功！",
+            "message": "工作项类型已成功删除。"
+          },
+          "error": {
+            "title": "错误！",
+            "message": "删除工作项类型失败。请再试一次！"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "无法删除默认工作项类型",
+          "cannot_delete_work_item_type_with_associated_work_items": "无法删除有关联工作项的工作项类型"
+        }
+      }
+    },
+    "create": {
+      "title": "创建工作项类型",
+      "button": "添加工作项类型",
+      "toast": {
+        "success": {
+          "title": "成功！",
+          "message": "工作项类型创建成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": {
+            "default": "创建工作项类型失败。请重试！",
+            "conflict": "{name} 类型已存在。请选择其他名称。"
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "更新工作项类型",
+      "button": "更新工作项类型",
+      "toast": {
+        "success": {
+          "title": "成功！",
+          "message": "工作项类型 {name} 更新成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": {
+            "default": "更新工作项类型失败。请重试！",
+            "conflict": "{name} 类型已存在。请选择其他名称。"
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "为此工作项类型取一个独特的名称"
+        },
+        "description": {
+          "placeholder": "描述此工作项类型的用途和使用时机。"
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} {name} 工作项类型",
+        "success": {
+          "title": "成功！",
+          "message": "工作项类型 {name} {action} 成功。"
+        },
+        "error": {
+          "title": "错误！",
+          "message": "{action} 工作项类型失败。请重试！"
+        }
+      },
+      "tooltip": "点击 {action}"
+    },
+    "change_confirmation": {
+      "title": "更改工作项类型？",
+      "description": "更改工作项类型可能会导致丢失特定于当前类型的自定义属性值。此操作无法撤销。",
+      "button": {
+        "loading": "更改中",
+        "default": "更改类型"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "启用工作项类型",
+        "description": "使用工作项类型塑造您的工作项。使用图标、背景和属性进行自定义，并为此项目配置它们。",
+        "primary_button": {
+          "text": "启用"
+        },
+        "confirmation": {
+          "title": "一旦启用，工作项类型将无法禁用。",
+          "description": "Plane的工作项将成为此项目的默认工作项类型，并将在此项目中显示其图标和背景。",
+          "button": {
+            "default": "启用",
+            "loading": "正在设置"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "获取 Pro 版以启用工作项类型。",
+        "description": "使用工作项类型塑造您的工作项。使用图标、背景和属性进行自定义，并为此项目配置它们。",
+        "primary_button": {
+          "text": "获取 Pro 版"
+        }
+      },
+      "upgrade": {
+        "title": "升级以启用工作项类型。",
+        "description": "使用工作项类型塑造您的工作项。使用图标、背景和属性进行自定义，并为此项目配置它们。",
+        "primary_button": {
+          "text": "升级"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "层级",
+      "tab_label": "层级",
+      "description": "设置层级结构以整理您的工作。每个层级定义与直接上方项目的父关系，以及与直接下方项目的子关系。 ",
+      "sidebar_label": "层级",
+      "enable_control": {
+        "title": "启用层级",
+        "description": "在不同工作项类型之间建立父子关系。",
+        "tooltip": "层级一旦启用便无法停用。"
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "请先定义工作项类型，再创建新的层级。",
+        "cta": "工作项类型设置"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "拖放类型以添加新的层级",
+      "empty_level_placeholder": "将工作项类型拖放到第 {level} 层",
+      "drag_tooltip": "拖动以更改层级",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "设为默认",
+          "toast": {
+            "loading": "正在设为默认...",
+            "success": {
+              "title": "成功！",
+              "message": "层级 {level} 已成功设为默认。"
+            },
+            "error": {
+              "title": "错误！",
+              "message": "无法将层级 {level} 设为默认，请重试。"
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "正在将 {workItemTypeName} 移动到层级 {level}...",
+        "success": {
+          "title": "成功！",
+          "message": "{workItemTypeName} 已成功移动到层级 {level}。"
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "保存后将断开现有链接",
+      "content": {
+        "intro": "工作项类型 {workItemTypeName} 包含：",
+        "parent_items": "{count, plural, other {将清除 # 个父级链接}}。",
+        "child_items": "{count, plural, other {个子工作项}}",
+        "parent_line_suffix_when_also_children": "，以及 ",
+        "footer": "此变更将从 {workItemTypeName} 工作项类型的现有工作项中移除父子关系。"
+      },
+      "confirm_input": {
+        "label": "请输入「确认」以继续。",
+        "placeholder": "确认"
+      },
+      "error_toast": {
+        "title": "错误！",
+        "message": "解除链接并保存失败，请重试。"
+      },
+      "confirm_button": {
+        "loading": "正在保存",
+        "default": "仍要保存"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "错误！",
+        "message": "所选工作项类型违反层级规则，无法用于创建新的工作项。"
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "错误！",
+        "message": "工作项类型因违反层级规则而无法更新。"
+      }
+    },
+    "work_item_type_modal": {
+      "level": "层级",
+      "invalid_level_toast": {
+        "title": "错误！",
+        "message": "工作项类型无法更新，因为它违反了层级规则。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/work-item.json b/packages/i18n/src/locales/zh-CN/work-item.json
new file mode 100644
index 0000000..bfa3e5e
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {工作项} other {工作项}}",
+    "all": "所有工作项",
+    "edit": "编辑工作项",
+    "title": {
+      "label": "工作项标题",
+      "required": "工作项标题为必填项"
+    },
+    "add": {
+      "press_enter": "按'Enter'添加另一个工作项",
+      "label": "添加工作项",
+      "cycle": {
+        "failed": "无法将工作项添加到周期。请重试。",
+        "success": "{count, plural, one {工作项} other {工作项}}已成功添加到周期。",
+        "loading": "正在将{count, plural, one {工作项} other {工作项}}添加到周期"
+      },
+      "assignee": "添加负责人",
+      "start_date": "添加开始日期",
+      "due_date": "添加截止日期",
+      "parent": "添加父工作项",
+      "sub_issue": "添加子工作项",
+      "dependency": "添加依赖",
+      "relation": "添加关系",
+      "link": "添加链接",
+      "existing": "添加现有工作项"
+    },
+    "remove": {
+      "label": "移除工作项",
+      "cycle": {
+        "loading": "正在从周期中移除工作项",
+        "success": "已成功从周期中移除工作项。",
+        "failed": "无法从周期中移除工作项。请重试。"
+      },
+      "module": {
+        "loading": "正在从模块中移除工作项",
+        "success": "已成功从模块中移除工作项。",
+        "failed": "无法从模块中移除工作项。请重试。"
+      },
+      "parent": {
+        "label": "移除父工作项"
+      }
+    },
+    "new": "新建工作项",
+    "adding": "正在添加工作项",
+    "create": {
+      "success": "工作项创建成功"
+    },
+    "priority": {
+      "urgent": "紧急",
+      "high": "高",
+      "medium": "中",
+      "low": "低"
+    },
+    "display": {
+      "properties": {
+        "label": "显示属性",
+        "id": "ID",
+        "issue_type": "工作项类型",
+        "sub_issue_count": "子工作项数量",
+        "attachment_count": "附件数量",
+        "created_on": "创建于",
+        "sub_issue": "子工作项",
+        "work_item_count": "工作项数量"
+      },
+      "extra": {
+        "show_sub_issues": "显示子工作项",
+        "show_empty_groups": "显示空组"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "此布局按以下方式排序",
+      "list": "列表",
+      "kanban": "看板",
+      "calendar": "日历",
+      "spreadsheet": "表格",
+      "gantt": "时间线",
+      "title": {
+        "list": "列表布局",
+        "kanban": "看板布局",
+        "calendar": "日历布局",
+        "spreadsheet": "表格布局",
+        "gantt": "时间线布局"
+      }
+    },
+    "states": {
+      "active": "活动",
+      "backlog": "待办"
+    },
+    "comments": {
+      "placeholder": "添加评论",
+      "switch": {
+        "private": "切换为私密评论",
+        "public": "切换为公开评论"
+      },
+      "create": {
+        "success": "评论创建成功",
+        "error": "评论创建失败。请稍后重试。"
+      },
+      "update": {
+        "success": "评论更新成功",
+        "error": "评论更新失败。请稍后重试。"
+      },
+      "remove": {
+        "success": "评论删除成功",
+        "error": "评论删除失败。请稍后重试。"
+      },
+      "upload": {
+        "error": "资源上传失败。请稍后重试。"
+      },
+      "copy_link": {
+        "success": "评论链接已复制到剪贴板",
+        "error": "复制评论链接时出错。请稍后再试。"
+      },
+      "replies": {
+        "create": {
+          "submit_button": "添加回复",
+          "placeholder": "添加回复"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "获取回复失败"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "回复创建成功"
+            },
+            "error": {
+              "message": "创建回复失败"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "回复更新成功"
+            },
+            "error": {
+              "message": "更新回复失败"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "回复删除成功"
+            },
+            "error": {
+              "message": "删除回复失败"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "工作项不存在",
+        "description": "您查找的工作项不存在、已归档或已删除。",
+        "primary_button": {
+          "text": "查看其他工作项"
+        }
+      }
+    },
+    "sibling": {
+      "label": "同级工作项"
+    },
+    "archive": {
+      "description": "只有已完成或已取消的\n工作项可以归档",
+      "label": "归档工作项",
+      "confirm_message": "您确定要归档此工作项吗？所有已归档的工作项稍后可以恢复。",
+      "success": {
+        "label": "归档成功",
+        "message": "您的归档可以在项目归档中找到。"
+      },
+      "failed": {
+        "message": "无法归档工作项。请重试。"
+      },
+      "banner_message": "此工作项已归档。请前往归档部分以恢复它。",
+      "go_to_archives": "前往归档"
+    },
+    "restore": {
+      "success": {
+        "title": "恢复成功",
+        "message": "您的工作项可以在项目工作项中找到。"
+      },
+      "failed": {
+        "message": "无法恢复工作项。请重试。"
+      }
+    },
+    "relation": {
+      "relates_to": "关联到",
+      "duplicate": "重复于",
+      "blocked_by": "被阻止于",
+      "blocking": "阻止",
+      "start_before": "开始于之前",
+      "start_after": "开始于之后",
+      "finish_before": "结束于之前",
+      "finish_after": "结束于之后",
+      "implements": "实现",
+      "implemented_by": "实现者"
+    },
+    "copy_link": "复制工作项链接",
+    "delete": {
+      "label": "删除工作项",
+      "error": "删除工作项时出错"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "工作项订阅成功",
+        "unsubscribed": "工作项取消订阅成功"
+      }
+    },
+    "select": {
+      "error": "请至少选择一个工作项",
+      "empty": "未选择工作项",
+      "add_selected": "添加所选工作项",
+      "select_all": "全选",
+      "deselect_all": "取消全选"
+    },
+    "open_in_full_screen": "在全屏中打开工作项",
+    "duplicate": {
+      "modal": {
+        "title": "复制到另一个项目",
+        "description1": "这将创建工作项的副本。",
+        "description2": "复制时将移除所有属性数据。",
+        "placeholder": "选择一个项目"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "工作项复制成功"
+        },
+        "error": {
+          "message": "工作项复制失败"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "连接页面",
+      "show_wiki_pages": "显示 Wiki 页面",
+      "link_pages_to": "连接页面到",
+      "linked_pages": "连接的页面",
+      "no_description": "此页面为空。在此输入一些内容，并在此处查看此占位符",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "页面已更新",
+            "message": "页面已成功更新"
+          },
+          "error": {
+            "title": "页面更新失败",
+            "message": "页面更新失败"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "页面已删除",
+            "message": "页面已成功删除"
+          },
+          "error": {
+            "title": "页面删除失败",
+            "message": "页面删除失败"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "点击赞成",
+      "click_to_downvote": "点击反对",
+      "click_to_view_upvotes": "点击查看赞成票",
+      "click_to_view_downvotes": "点击查看反对票"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "子工作项更新成功",
+      "error": "更新子工作项时出错"
+    },
+    "remove": {
+      "success": "子工作项移除成功",
+      "error": "移除子工作项时出错"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "您没有符合您应用的过滤器的子工作项。",
+        "description": "要查看所有子工作项，请清除所有应用的过滤器。",
+        "action": "清除过滤器"
+      },
+      "list_filters": {
+        "title": "您没有符合您应用的过滤器的工作项。",
+        "description": "要查看所有工作项，请清除所有应用的过滤器。",
+        "action": "清除过滤器"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "未找到匹配的工作项"
+      },
+      "no_issues": {
+        "title": "未找到工作项"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "尚无评论",
+        "description": "评论可用作工作项的讨论和跟进空间"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "无法归档工作项",
+        "message": "只有属于已完成或已取消状态组的工作项才能被归档。"
+      },
+      "invalid_issue_start_date": {
+        "title": "无法更新工作项",
+        "message": "所选开始日期晚于某些工作项的截止日期。请确保开始日期在截止日期之前。"
+      },
+      "invalid_issue_target_date": {
+        "title": "无法更新工作项",
+        "message": "所选截止日期早于某些工作项的开始日期。请确保截止日期在开始日期之后。"
+      },
+      "invalid_state_transition": {
+        "title": "无法更新工作项",
+        "message": "某些工作项的状态更改不被允许。请确保状态更改是被允许的。"
+      }
+    },
+    "upgrade_banner": {
+      "message": "一次性更改多个工作项的状态、优先级等。平均每次操作可节省三分钟。",
+      "cta": "升级到 One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "重复工作项",
+      "description": "设置一次重复工作，我们将处理重复。当需要时，您将在这里看到所有内容。",
+      "new_recurring_work_item": "创建新的重复工作项",
+      "update_recurring_work_item": "更新重复工作项",
+      "form": {
+        "interval": {
+          "title": "计划",
+          "start_date": {
+            "validation": {
+              "required": "开始日期为必填项"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "间隔类型为必填项"
+            }
+          }
+        },
+        "button": {
+          "create": "创建重复工作项",
+          "update": "更新重复工作项"
+        }
+      },
+      "create_button": {
+        "label": "创建重复工作项",
+        "no_permission": "请联系您的项目管理员以创建重复工作项"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "让您的工作自动化",
+        "description": "只需设置一次，到期时我们会自动为您生成。升级到商业版，让重复工作变得轻松无忧。"
+      },
+      "no_templates": {
+        "button": "创建您的第一个重复工作项"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "重复工作项已创建",
+          "message": "{name}，该重复工作项，现已在您的工作区中可用。"
+        },
+        "error": {
+          "title": "本次无法创建该重复工作项。",
+          "message": "请重试保存您的信息，或将其复制到新的重复工作项中，建议在其他标签页操作。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "重复工作项已更改",
+          "message": "{name}，该重复工作项，已被更改。"
+        },
+        "error": {
+          "title": "无法保存该重复工作项的更改。",
+          "message": "请重试保存您的信息，或稍后再回来更改该重复工作项。如果仍有问题，请联系我们。"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "重复工作项已删除",
+          "message": "{name}，该重复工作项，已从您的工作区中删除。"
+        },
+        "error": {
+          "title": "无法删除该重复工作项。",
+          "message": "请重试删除，或稍后再试。如果仍无法删除，请联系我们。"
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "删除重复工作项",
+      "description": {
+        "prefix": "您确定要删除重复工作项-",
+        "suffix": "吗？与该重复工作项相关的所有数据将被永久删除。此操作无法撤销。"
+      }
+    }
+  },
+  "epic": {
+    "new": "新建史诗",
+    "label": "{count, plural, one {史诗} other {史诗}}",
+    "adding": "正在添加史诗",
+    "create": {
+      "success": "史诗创建成功"
+    },
+    "add": {
+      "label": "添加史诗",
+      "press_enter": "按'Enter'添加另一个史诗"
+    },
+    "title": {
+      "label": "史诗标题",
+      "required": "史诗标题为必填项"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/workflow.json b/packages/i18n/src/locales/zh-CN/workflow.json
new file mode 100644
index 0000000..dfad84e
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "允许新工作项",
+      "work_item_creation_disable_tooltip": "工作项创建在此状态中被禁用",
+      "default_state": "默认状态允许所有成员创建新工作项。不能更改",
+      "state_change_count": "{count, plural, one {1 个允许的状态更改} other {{count} 个允许的状态更改}}",
+      "movers_count": "{count, plural, one {1 个列出的评审人} other {{count} 个列出的评审人}}",
+      "state_changes": {
+        "label": {
+          "default": "添加允许的状态更改",
+          "loading": "正在添加允许的状态更改"
+        },
+        "move_to": "移动到",
+        "movers": {
+          "label": "当被",
+          "tooltip": "评审人是允许从一个状态移动到另一个状态的工作项的人。",
+          "add": "添加评审人"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "您不能在这里移动这个工作项。"
+    },
+    "workflow_enabled": {
+      "label": "状态更改"
+    },
+    "workflow_tree": {
+      "label": "对于在",
+      "state_change_label": "可以移动到"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "使用工作流控制更改和审查的混乱。",
+        "description": "使用 Plane 中的工作流定义您工作的移动规则，包括谁、何时。"
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "查看更改历史",
+      "reset_workflow": "重置工作流"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "您确定要重置这个工作流吗？",
+        "description": "如果您重置这个工作流，您所有的状态更改规则将被删除，您将需要为这个项目重新创建它们。"
+      },
+      "delete_state_change": {
+        "title": "您确定要删除这个状态更改规则吗？",
+        "description": "一旦删除，您不能撤销这个更改，您将需要为这个项目重新设置规则。"
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action} 工作流",
+        "success": {
+          "title": "成功",
+          "message": "工作流 {action} 成功"
+        },
+        "error": {
+          "title": "错误",
+          "message": "工作流不能被 {action}。请重试。"
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "成功",
+          "message": "工作流重置成功"
+        },
+        "error": {
+          "title": "重置工作流错误",
+          "message": "工作流不能被重置。请重试。"
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "添加状态更改规则错误",
+          "message": "状态更改规则不能被添加。请重试。"
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "修改状态更改规则错误",
+          "message": "状态更改规则不能被修改。请重试。"
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "删除状态更改规则错误",
+          "message": "状态更改规则不能被删除。请重试。"
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "修改状态更改规则移交人错误",
+          "message": "状态更改规则移交人不能被修改。请重试。"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/workspace-settings.json b/packages/i18n/src/locales/zh-CN/workspace-settings.json
new file mode 100644
index 0000000..87ea4a3
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "工作区设置",
+    "page_label": "{workspace} - 常规设置",
+    "key_created": "密钥已创建",
+    "copy_key": "复制并将此密钥保存在 Plane Pages 中。关闭后您将无法看到此密钥。包含密钥的 CSV 文件已下载。",
+    "token_copied": "令牌已复制到剪贴板。",
+    "settings": {
+      "general": {
+        "title": "常规",
+        "upload_logo": "上传标志",
+        "edit_logo": "编辑标志",
+        "name": "工作区名称",
+        "company_size": "公司规模",
+        "url": "工作区网址",
+        "workspace_timezone": "工作区时区",
+        "update_workspace": "更新工作区",
+        "delete_workspace": "删除此工作区",
+        "delete_workspace_description": "删除工作区时，该工作区内的所有数据和资源将被永久删除，且无法恢复。",
+        "delete_btn": "删除此工作区",
+        "delete_modal": {
+          "title": "确定要删除此工作区吗？",
+          "description": "您目前正在试用我们的付费方案。请先取消试用后再继续。",
+          "dismiss": "关闭",
+          "cancel": "取消试用",
+          "success_title": "工作区已删除。",
+          "success_message": "即将跳转到您的个人资料页面。",
+          "error_title": "操作失败。",
+          "error_message": "请重试。"
+        },
+        "errors": {
+          "name": {
+            "required": "名称为必填项",
+            "max_length": "工作区名称不应超过80个字符"
+          },
+          "company_size": {
+            "required": "公司规模为必填项",
+            "select_a_range": "选择组织规模"
+          }
+        }
+      },
+      "members": {
+        "title": "成员",
+        "add_member": "添加成员",
+        "pending_invites": "待处理邀请",
+        "invitations_sent_successfully": "邀请发送成功",
+        "leave_confirmation": "您确定要离开工作区吗？您将无法再访问此工作区。此操作无法撤消。",
+        "details": {
+          "full_name": "全名",
+          "display_name": "显示名称",
+          "email_address": "电子邮件地址",
+          "account_type": "账户类型",
+          "authentication": "身份验证",
+          "joining_date": "加入日期"
+        },
+        "modal": {
+          "title": "邀请人员协作",
+          "description": "邀请人员在您的工作区中协作。",
+          "button": "发送邀请",
+          "button_loading": "正在发送邀请",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "我们需要一个电子邮件地址来邀请他们。",
+            "invalid": "电子邮件无效"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "账单与计划",
+        "description": "选择您的计划、管理订阅，并随着需求增长轻松升级。",
+        "title": "账单与计划",
+        "current_plan": "当前计划",
+        "free_plan": "您目前使用的是免费计划",
+        "view_plans": "查看计划"
+      },
+      "exports": {
+        "heading": "导出",
+        "description": "以多种格式导出项目数据，并通过下载链接访问导出历史记录。",
+        "title": "导出",
+        "exporting": "导出中",
+        "previous_exports": "以前的导出",
+        "export_separate_files": "将数据导出为单独的文件",
+        "exporting_projects": "正在导出项目",
+        "format": "格式",
+        "filters_info": "应用筛选器以根据您的条件导出特定工作项。",
+        "modal": {
+          "title": "导出到",
+          "toasts": {
+            "success": {
+              "title": "导出成功",
+              "message": "您可以从之前的导出中下载导出的{entity}"
+            },
+            "error": {
+              "title": "导出失败",
+              "message": "导出未成功。请重试。"
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooks",
+        "description": "在项目事件发生时自动向外部服务发送通知。",
+        "title": "Webhooks",
+        "add_webhook": "添加 webhook",
+        "modal": {
+          "title": "创建 webhook",
+          "details": "Webhook 详情",
+          "payload": "负载 URL",
+          "question": "您希望触发此 webhook 的事件有哪些？",
+          "error": "URL 为必填项"
+        },
+        "secret_key": {
+          "title": "密钥",
+          "message": "生成令牌以登录 webhook 负载"
+        },
+        "options": {
+          "all": "发送所有内容",
+          "individual": "选择单个事件"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook 已创建",
+            "message": "Webhook 已成功创建"
+          },
+          "not_created": {
+            "title": "Webhook 未创建",
+            "message": "无法创建 webhook"
+          },
+          "updated": {
+            "title": "Webhook 已更新",
+            "message": "Webhook 已成功更新"
+          },
+          "not_updated": {
+            "title": "Webhook 未更新",
+            "message": "无法更新 webhook"
+          },
+          "removed": {
+            "title": "Webhook 已移除",
+            "message": "Webhook 已成功移除"
+          },
+          "not_removed": {
+            "title": "Webhook 未移除",
+            "message": "无法移除 webhook"
+          },
+          "secret_key_copied": {
+            "message": "密钥已复制到剪贴板。"
+          },
+          "secret_key_not_copied": {
+            "message": "复制密钥时出错。"
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "API 令牌",
+        "description": "生成安全的 API 令牌，将您的数据与外部系统和应用程序集成。",
+        "title": "API 令牌",
+        "add_token": "添加访问令牌",
+        "create_token": "创建令牌",
+        "never_expires": "永不过期",
+        "generate_token": "生成令牌",
+        "generating": "生成中",
+        "delete": {
+          "title": "删除 API 令牌",
+          "description": "使用此令牌的任何应用程序将无法再访问 Plane 数据。此操作无法撤消。",
+          "success": {
+            "title": "成功！",
+            "message": "API 令牌已成功删除"
+          },
+          "error": {
+            "title": "错误！",
+            "message": "无法删除 API 令牌"
+          }
+        }
+      },
+      "integrations": {
+        "title": "集成",
+        "heading": "集成",
+        "description": "与流行的工具和服务连接，在整个工作流生态系统中同步您的工作。",
+        "page_title": "在可用的应用或您自己的应用中使用您的 Plane 数据。",
+        "page_description": "查看此工作区或您正在使用的所有集成。"
+      },
+      "imports": {
+        "title": "导入",
+        "heading": "导入",
+        "description": "连接并从现有的项目管理工具导入数据，以简化您的工作流集成。"
+      },
+      "worklogs": {
+        "title": "工作日志",
+        "heading": "工作日志",
+        "description": "为任何项目中的任何人下载工作日志（即工时表）。"
+      },
+      "group_syncing": {
+        "title": "组同步",
+        "heading": "组同步",
+        "description": "将身份提供者组与项目和角色关联。当 IdP 中的组成员身份发生变化时，用户访问权限将自动更新，简化入职和离职流程。",
+        "enable": {
+          "title": "启用组同步",
+          "description": "根据身份提供者组自动将用户添加到项目。"
+        },
+        "config": {
+          "title": "配置组同步",
+          "description": "设置身份提供者组如何映射到项目和角色。",
+          "sync_on_login": {
+            "title": "登录时同步",
+            "description": "用户登录时更新组成员身份和项目访问权限。"
+          },
+          "sync_offline": {
+            "title": "离线同步",
+            "description": "每六小时自动运行同步，无需等待用户登录。"
+          },
+          "auto_remove": {
+            "title": "自动移除",
+            "description": "当用户不再匹配组时，自动将其从项目中移除。"
+          },
+          "group_attribute_key": {
+            "title": "组属性键",
+            "description": "用于识别和同步用户组的身份提供者属性。",
+            "placeholder": "组"
+          }
+        },
+        "group_mapping": {
+          "title": "组映射",
+          "description": "将身份提供者组与项目和角色关联。",
+          "button_text": "添加新组同步"
+        },
+        "toast": {
+          "updating": "正在更新组同步功能",
+          "success": "组同步功能已成功更新。",
+          "error": "更新组同步功能失败！"
+        },
+        "delete_modal": {
+          "title": "删除组同步",
+          "content": "此身份组的新用户将不再被添加到项目。已添加的用户将保留其当前角色。"
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "用户组",
+            "required": "用户组为必填项",
+            "placeholder": "输入 IdP 组名称"
+          },
+          "project": {
+            "text": "项目",
+            "required": "项目为必填项",
+            "placeholder": "选择项目"
+          },
+          "default_role": {
+            "text": "项目角色",
+            "required": "项目角色为必填项",
+            "placeholder": "选择项目角色"
+          }
+        }
+      },
+      "identity": {
+        "title": "身份",
+        "heading": "身份",
+        "description": "配置您的域名并启用单点登录"
+      },
+      "project_states": {
+        "title": "项目状态",
+        "heading": "查看所有项目的进度概览。",
+        "description": "项目状态是 Plane 独有的功能，用于按任何项目属性跟踪您所有项目的进度。",
+        "go_to_settings": "前往设置"
+      },
+      "projects": {
+        "title": "项目",
+        "description": "管理项目状态、启用项目标签及其他配置。",
+        "tabs": {
+          "states": "项目状态",
+          "labels": "项目标签"
+        }
+      },
+      "templates": {
+        "title": "模板",
+        "heading": "模板",
+        "description": "使用模板可节省 80% 创建项目、工作项和页面的时间。"
+      },
+      "relations": {
+        "title": "关系",
+        "heading": "关系",
+        "description": "创建和管理连接工作区中工作项的关系类型。"
+      },
+      "cancel_trial": {
+        "title": "请先取消试用期。",
+        "description": "您目前正在试用我们的付费计划。请先取消试用后再继续。",
+        "dismiss": "关闭",
+        "cancel": "取消试用",
+        "cancel_success_title": "试用已取消。",
+        "cancel_success_message": "现在您可以删除工作空间了。",
+        "cancel_error_title": "操作失败。",
+        "cancel_error_message": "请重试。"
+      },
+      "applications": {
+        "internal": "内部",
+        "title": "应用程序",
+        "applicationId_copied": "应用ID已复制到剪贴板",
+        "clientId_copied": "客户端ID已复制到剪贴板",
+        "clientSecret_copied": "客户端密钥已复制到剪贴板",
+        "third_party_apps": "第三方应用",
+        "your_apps": "您的应用",
+        "connect": "连接",
+        "connected": "已连接",
+        "disconnect": "断开连接",
+        "install": "安装",
+        "installed": "已安装",
+        "configure": "配置",
+        "app_available": "您已使此应用可用于Plane工作空间",
+        "app_credentials_regenrated": {
+          "title": "应用凭证已成功重新生成",
+          "description": "请在所有使用的地方替换客户端密钥。之前的密钥已不再有效。"
+        },
+        "app_created": {
+          "title": "应用已成功创建",
+          "description": "使用凭证将应用安装到 Plane 工作区中"
+        },
+        "installed_apps": "已安装的应用",
+        "all_apps": "所有应用",
+        "internal_apps": "内部应用",
+        "app_name_title": "您将如何命名此应用",
+        "app_description_title": {
+          "label": "详细描述",
+          "placeholder": "为市场编写详细描述。按 '/' 查看命令。"
+        },
+        "authorization_grant_type": {
+          "title": "连接类型",
+          "description": "选择您的应用程序应该为工作区安装一次，还是让每个用户连接自己的账户"
+        },
+        "website": {
+          "title": "网站",
+          "description": "链接到您的应用程序网站。",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "应用创建者",
+          "description": "创建该应用的个人或组织。"
+        },
+        "app_maker_error": "应用制作者为必填项",
+        "setup_url": {
+          "label": "设置 URL",
+          "description": "用户在安装应用时将被重定向到此 URL。",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "Webhook URL",
+          "description": "我们将在此接收来自安装了您应用的工作区的 Webhook 事件和更新。",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Webhook 密钥",
+          "description": "用于验证传入 Webhook 请求的密钥。",
+          "placeholder": "输入随机密钥"
+        },
+        "redirect_uris": {
+          "label": "重定向 URI（以空格分隔）",
+          "description": "用户在通过 Plane 认证后将被重定向到此路径。",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "连接Plane工作空间以开始使用",
+        "client_id_and_secret": "客户端ID和密钥",
+        "client_id_and_secret_description": "复制并保存此密钥。关闭后您将无法再次查看此密钥。",
+        "client_id_and_secret_download": "您可以从这里下载包含密钥的CSV文件。",
+        "application_id": "应用ID",
+        "client_id": "客户端ID",
+        "client_secret": "客户端密钥",
+        "export_as_csv": "导出为CSV",
+        "slug_already_exists": "别名已存在",
+        "failed_to_create_application": "创建应用程序失败",
+        "upload_logo": "上传标志",
+        "app_name_error": "应用名称为必填项",
+        "app_short_description_title": "为此应用提供简短描述",
+        "app_short_description_error": "应用简短描述为必填项",
+        "app_description_error": "应用描述为必填项",
+        "app_slug_title": "应用别名",
+        "app_slug_error": "应用别名为必填项",
+        "invalid_website_error": "无效的网站",
+        "webhook_url_title": "Webhook URL",
+        "webhook_url_error": "Webhook URL为必填项",
+        "invalid_webhook_url_error": "无效的Webhook URL",
+        "redirect_uris_title": "重定向URI",
+        "redirect_uris_error": "重定向URI为必填项",
+        "invalid_redirect_uris_error": "无效的重定向URI",
+        "redirect_uris_description": "输入应用将在用户后重定向到的URI，用空格分隔，例如 https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "授权的JavaScript来源",
+        "authorized_javascript_origins_error": "授权的JavaScript来源为必填项",
+        "invalid_authorized_javascript_origins_error": "无效的授权JavaScript来源",
+        "authorized_javascript_origins_description": "输入应用将被允许发出请求的来源，用空格分隔，例如 app.com example.com",
+        "create_app": "创建应用",
+        "update_app": "更新应用",
+        "build_your_own_app": "构建您自己的应用",
+        "edit_app_details": "编辑应用详情",
+        "regenerate_client_secret_description": "重新生成客户端密钥。重新生成后，您可以复制密钥或将其下载到CSV文件中。",
+        "regenerate_client_secret": "重新生成客户端密钥",
+        "regenerate_client_secret_confirm_title": "确定要重新生成客户端密钥吗？",
+        "regenerate_client_secret_confirm_description": "使用此密钥的应用将停止工作。您需要在应用中更新密钥。",
+        "regenerate_client_secret_confirm_cancel": "取消",
+        "regenerate_client_secret_confirm_regenerate": "重新生成",
+        "read_only_access_to_workspace": "对您的工作空间的只读访问",
+        "write_access_to_workspace": "对您的工作空间的写入访问",
+        "read_only_access_to_user_profile": "对您的用户配置文件的只读访问",
+        "write_access_to_user_profile": "对您的用户配置文件的写入访问",
+        "connect_app_to_workspace": "将{app}连接到您的工作空间{workspace}",
+        "user_permissions": "用户权限",
+        "user_permissions_description": "用户权限用于授予对用户配置文件的访问权限。",
+        "workspace_permissions": "工作空间权限",
+        "workspace_permissions_description": "工作空间权限用于授予对工作空间的访问权限。",
+        "with_the_permissions": "具有权限",
+        "app_consent_title": "{app}正在请求访问您的Plane工作空间和配置文件。",
+        "choose_workspace_to_connect_app_with": "选择要连接应用的工作空间",
+        "app_consent_workspace_permissions_title": "{app}想要",
+        "app_consent_user_permissions_title": "{app}还可以请求用户对以下资源的权限。这些权限将仅由用户请求和授权。",
+        "app_consent_accept_title": "通过接受",
+        "app_consent_accept_1": "您授予应用在Plane内部或外部可以使用应用的任何地方访问您的Plane数据的权限",
+        "app_consent_accept_2": "您同意{app}的隐私政策和使用条款",
+        "accepting": "接受中...",
+        "accept": "接受",
+        "categories": "类别",
+        "select_app_categories": "选择应用类别",
+        "categories_title": "类别",
+        "categories_error": "类别是必填项",
+        "invalid_categories_error": "无效的类别",
+        "categories_description": "选择最能描述应用的类别",
+        "supported_plans": "支持的方案",
+        "supported_plans_description": "选择可以安装此应用的工作区方案。留空以允许所有方案。",
+        "select_plans": "选择方案",
+        "privacy_policy_url_title": "隐私政策URL",
+        "privacy_policy_url_error": "隐私政策URL是必填项",
+        "invalid_privacy_policy_url_error": "无效的隐私政策URL",
+        "terms_of_service_url_title": "使用条款URL",
+        "terms_of_service_url_error": "使用条款URL是必填项",
+        "invalid_terms_of_service_url_error": "无效的使用条款URL",
+        "support_url_title": "支持URL",
+        "support_url_error": "支持URL是必填项",
+        "invalid_support_url_error": "无效的支持URL",
+        "video_url_title": "视频URL",
+        "video_url_error": "视频URL是必填项",
+        "invalid_video_url_error": "无效的视频URL",
+        "setup_url_error": "设置URL是必填项",
+        "invalid_setup_url_error": "无效的设置URL",
+        "configuration_url_title": "配置URL",
+        "configuration_url_error": "配置URL是必填项",
+        "invalid_configuration_url_error": "无效的配置URL",
+        "contact_email_title": "联系邮箱",
+        "contact_email_error": "联系邮箱是必填项",
+        "invalid_contact_email_error": "无效的联系邮箱",
+        "upload_attachments": "上传附件",
+        "uploading_images": "上传 {count, plural, one {张图片} other {张图片}}",
+        "drop_images_here": "将图片拖到这里",
+        "click_to_upload_images": "点击上传图片",
+        "invalid_file_or_exceeds_size_limit": "无效的文件或超过大小限制 ({size} MB)",
+        "uploading": "上传中...",
+        "upload_and_save": "上传并保存",
+        "app_consent_no_access_title": "安装请求",
+        "app_consent_no_access_description": "此应用只能在工作区管理员安装后才能安装。请联系您的工作区管理员以继续。",
+        "app_consent_unapproved_title": "此应用尚未经过 Plane 审核或批准。",
+        "app_consent_unapproved_description": "在将此应用连接到您的工作区之前，请确保您信任此应用。",
+        "go_to_app": "前往应用",
+        "enable_app_mentions": "启用应用提及",
+        "enable_app_mentions_tooltip": "启用此功能后，用户可以提及或分配工作项到此应用。",
+        "scopes": "范围",
+        "select_scopes": "选择范围",
+        "read_access_to": "只读访问",
+        "write_access_to": "写入访问",
+        "global_permission_expiration": "全局范围即将过期。请改用细粒度范围。例如，使用 project:read 代替全局读取。",
+        "selected_scopes": "已选 {count} 项",
+        "scopes_and_permissions": "范围与权限",
+        "read": "读取",
+        "write": "写入",
+        "scope_description": {
+          "projects": "访问项目及所有项目相关实体",
+          "wiki": "访问 Wiki 及所有 Wiki 相关实体",
+          "workspaces": "访问工作区及所有工作区相关实体",
+          "stickies": "访问便签及所有便签相关实体",
+          "profile": "访问用户资料信息",
+          "agents": "访问代理以及所有代理相关实体",
+          "assets": "访问资产以及所有资产相关实体"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "使用与您的工作和知识库原生连接的 AI，让您的任务变得更智能、更快速。"
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "脚本",
+        "new_script": "新建脚本",
+        "description": "使用自定义脚本和自动化规则自动化您的工作流程。"
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "尚未创建 API 令牌",
+        "description": "Plane API 可用于将您在 Plane 中的数据与任何外部系统集成。创建令牌以开始使用。"
+      },
+      "webhooks": {
+        "title": "尚未添加 webhook",
+        "description": "创建 webhook 以接收实时更新并自动执行操作。"
+      },
+      "exports": {
+        "title": "尚无导出",
+        "description": "每次导出时，您都会在这里有一个副本以供参考。"
+      },
+      "imports": {
+        "title": "尚无导入",
+        "description": "在这里查找所有以前的导入并下载它们。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/workspace.json b/packages/i18n/src/locales/zh-CN/workspace.json
new file mode 100644
index 0000000..a4f06dc
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "创建您的工作区",
+    "subheading": "要开始使用 Plane，您需要创建或加入一个工作区。",
+    "form": {
+      "name": {
+        "label": "为您的工作区命名",
+        "placeholder": "熟悉且易于识别的名称总是最好的。"
+      },
+      "url": {
+        "label": "设置您的工作区 URL",
+        "placeholder": "输入或粘贴 URL",
+        "edit_slug": "您只能编辑 URL 的标识符部分"
+      },
+      "organization_size": {
+        "label": "有多少人将使用这个工作区？",
+        "placeholder": "选择一个范围"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "只有您的实例管理员可以创建工作区",
+        "description": "如果您知道实例管理员的电子邮件地址，请点击下方按钮与他们联系。",
+        "request_button": "请求实例管理员"
+      },
+      "validation": {
+        "name_alphanumeric": "工作区名称只能包含 (' '), ('-'), ('_') 和字母数字字符。",
+        "name_length": "名称限制在 80 个字符以内。",
+        "url_alphanumeric": "URL 只能包含 ('-') 和字母数字字符。",
+        "url_length": "URL 限制在 48 个字符以内。",
+        "url_already_taken": "工作区 URL 已被占用！"
+      }
+    },
+    "request_email": {
+      "subject": "请求新工作区",
+      "body": "您好，实例管理员：\n\n请为 [创建工作区的目的] 创建一个 URL 为 [/workspace-name] 的新工作区。\n\n谢谢，\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "创建工作区",
+      "loading": "正在创建工作区"
+    },
+    "toast": {
+      "success": {
+        "title": "成功",
+        "message": "工作区创建成功"
+      },
+      "error": {
+        "title": "错误",
+        "message": "工作区创建失败。请重试。"
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "项目、活动和指标概览",
+        "description": "欢迎使用 Plane，我们很高兴您能来到这里。创建您的第一个项目并跟踪您的工作项，这个页面将转变为帮助您进展的空间。管理员还将看到帮助团队进展的项目。",
+        "primary_button": {
+          "text": "构建您的第一个项目",
+          "comic": {
+            "title": "在 Plane 中一切都从项目开始",
+            "description": "项目可以是产品路线图、营销活动或新车发布。"
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "分析",
+    "page_label": "{workspace} - 分析",
+    "open_tasks": "总开放任务",
+    "error": "获取数据时出现错误。",
+    "work_items_closed_in": "已关闭的工作项",
+    "selected_projects": "已选择的项目",
+    "total_members": "总成员数",
+    "total_cycles": "总周期数",
+    "total_modules": "总模块数",
+    "pending_work_items": {
+      "title": "待处理工作项",
+      "empty_state": "同事的待处理工作项分析将显示在这里。"
+    },
+    "work_items_closed_in_a_year": {
+      "title": "一年内关闭的工作项",
+      "empty_state": "关闭工作项以查看以图表形式显示的分析。"
+    },
+    "most_work_items_created": {
+      "title": "创建最多工作项",
+      "empty_state": "同事及其创建的工作项数量将显示在这里。"
+    },
+    "most_work_items_closed": {
+      "title": "关闭最多工作项",
+      "empty_state": "同事及其关闭的工作项数量将显示在这里。"
+    },
+    "tabs": {
+      "scope_and_demand": "范围和需求",
+      "custom": "自定义分析"
+    },
+    "total": "{entity}总数",
+    "started_work_items": "已开始的{entity}",
+    "backlog_work_items": "待办的{entity}",
+    "un_started_work_items": "未开始的{entity}",
+    "completed_work_items": "已完成的{entity}",
+    "project_insights": "项目洞察",
+    "summary_of_projects": "项目概览",
+    "all_projects": "所有项目",
+    "trend_on_charts": "图表趋势",
+    "active_projects": "活跃项目",
+    "customized_insights": "自定义洞察",
+    "created_vs_resolved": "已创建 vs 已解决",
+    "empty_state": {
+      "project_insights": {
+        "title": "暂无数据",
+        "description": "分配给您的工作项将按状态分类显示在此处。"
+      },
+      "created_vs_resolved": {
+        "title": "暂无数据",
+        "description": "随着时间推移创建和解决的工作项将显示在此处。"
+      },
+      "customized_insights": {
+        "title": "暂无数据",
+        "description": "分配给您的工作项将按状态分类显示在此处。"
+      },
+      "general": {
+        "title": "跟踪进度、工作量和分配。发现趋势，消除障碍，加速工作进展",
+        "description": "查看范围与需求、估算和范围蔓延。获取团队成员和团队的性能，确保您的项目按时运行。",
+        "primary_button": {
+          "text": "开始您的第一个项目",
+          "comic": {
+            "title": "分析功能在周期 + 模块中效果最佳",
+            "description": "首先，将您的问题在周期中进行时间限制，如果可能的话，将跨越多个周期的问题分组到模块中。在左侧导航中查看这两个功能。"
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "尚无数据",
+        "description": "周期进度分析将显示在此处。将工作项添加到周期中以开始跟踪进度。"
+      },
+      "module_progress": {
+        "title": "尚无数据",
+        "description": "模块进度分析将显示在此处。将工作项添加到模块中以开始跟踪进度。"
+      },
+      "intake_trends": {
+        "title": "尚无数据",
+        "description": "引入趋势分析将显示在此处。将工作项添加到引入中以开始跟踪趋势。"
+      }
+    },
+    "upgrade_to_plan": "升级到 {plan} 以解锁 {tab}",
+    "workitem_resolved_vs_pending": "已解决 vs 待处理的工作项",
+    "projects_by_status": "按状态分类的项目",
+    "active_users": "活跃用户",
+    "intake_trends": "入学趋势"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {项目} other {项目}}",
+    "create": {
+      "label": "添加项目"
+    },
+    "network": {
+      "label": "网络",
+      "private": {
+        "title": "私有",
+        "description": "仅限邀请访问"
+      },
+      "public": {
+        "title": "公开",
+        "description": "工作区中除访客外的任何人都可以加入"
+      }
+    },
+    "error": {
+      "permission": "您没有执行此操作的权限。",
+      "cycle_delete": "删除周期失败",
+      "module_delete": "删除模块失败",
+      "issue_delete": "删除工作项失败"
+    },
+    "state": {
+      "backlog": "待办",
+      "unstarted": "未开始",
+      "started": "进行中",
+      "completed": "已完成",
+      "cancelled": "已取消"
+    },
+    "sort": {
+      "manual": "手动",
+      "name": "名称",
+      "created_at": "创建日期",
+      "members_length": "成员数量"
+    },
+    "scope": {
+      "my_projects": "我的项目",
+      "archived_projects": "已归档"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# 个月} other{# 个月}}",
+      "days_count": "{days, plural, one{# 天} other{# 天}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "没有活动项目",
+        "description": "将每个项目视为目标导向工作的父级。项目是工作项、周期和模块所在的地方，与您的同事一起帮助您实现目标。创建新项目或筛选已归档的项目。",
+        "primary_button": {
+          "text": "开始您的第一个项目",
+          "comic": {
+            "title": "在 Plane 中一切都从项目开始",
+            "description": "项目可以是产品路线图、营销活动或新车发布。"
+          }
+        }
+      },
+      "no_projects": {
+        "title": "没有项目",
+        "description": "要创建工作项或管理您的工作，您需要创建一个项目或成为项目的一部分。",
+        "primary_button": {
+          "text": "开始您的第一个项目",
+          "comic": {
+            "title": "在 Plane 中一切都从项目开始",
+            "description": "项目可以是产品路线图、营销活动或新车发布。"
+          }
+        }
+      },
+      "filter": {
+        "title": "没有匹配的项目",
+        "description": "未检测到符合匹配条件的项目。\n创建一个新项目。"
+      },
+      "search": {
+        "description": "未检测到符合匹配条件的项目。\n创建一个新项目"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "添加视图",
+    "empty_state": {
+      "all-issues": {
+        "title": "项目中没有工作项",
+        "description": "第一个项目完成！现在，将您的工作分解成可跟踪的工作项。让我们开始吧！",
+        "primary_button": {
+          "text": "创建新工作项"
+        }
+      },
+      "assigned": {
+        "title": "还没有工作项",
+        "description": "可以在这里跟踪分配给您的工作项。",
+        "primary_button": {
+          "text": "创建新工作项"
+        }
+      },
+      "created": {
+        "title": "还没有工作项",
+        "description": "您创建的所有工作项都会出现在这里，直接在这里跟踪它们。",
+        "primary_button": {
+          "text": "创建新工作项"
+        }
+      },
+      "subscribed": {
+        "title": "还没有工作项",
+        "description": "订阅您感兴趣的工作项，在这里跟踪所有这些工作项。"
+      },
+      "custom-view": {
+        "title": "还没有工作项",
+        "description": "符合筛选条件的工作项，在这里跟踪所有这些工作项。"
+      }
+    },
+    "delete_view": {
+      "title": "您确定要删除此视图吗？",
+      "content": "如果您确认，您为此视图选择的所有排序、筛选和显示选项 + 布局将被永久删除，无法恢复。"
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "起草工作项",
+    "empty_state": {
+      "title": "半写的工作项，以及即将推出的评论将在这里显示。",
+      "description": "要试用此功能，请开始添加工作项并中途离开，或在下方创建您的第一个草稿。😉",
+      "primary_button": {
+        "text": "创建您的第一个草稿"
+      }
+    },
+    "delete_modal": {
+      "title": "删除草稿",
+      "description": "您确定要删除此草稿吗？此操作无法撤消。"
+    },
+    "toasts": {
+      "created": {
+        "success": "草稿已创建",
+        "error": "无法创建工作项。请重试。"
+      },
+      "deleted": {
+        "success": "草稿已删除"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "写笔记、文档或完整的知识库。让 Galileo，Plane 的 AI 助手，帮助您开始",
+        "description": "页面是 Plane 中的思考空间。记录会议笔记，轻松格式化，嵌入工作项，使用组件库布局，并将它们全部保存在项目的上下文中。要快速完成任何文档，使用快捷键或点击按钮调用 Plane 的 AI Galileo。",
+        "primary_button": {
+          "text": "创建您的第一个页面"
+        }
+      },
+      "private": {
+        "title": "还没有私人页面",
+        "description": "在这里保存您的私人想法。当您准备好分享时，团队就在一键之遥。",
+        "primary_button": {
+          "text": "创建您的第一个页面"
+        }
+      },
+      "public": {
+        "title": "还没有工作空间页面",
+        "description": "在这里查看与工作空间中所有人共享的页面。",
+        "primary_button": {
+          "text": "创建您的第一个页面"
+        }
+      },
+      "archived": {
+        "title": "还没有已归档的页面",
+        "description": "归档不在您关注范围内的页面。需要时可以在这里访问它们。"
+      },
+      "shared": {
+        "title": "尚无共享页面",
+        "description": "其他人与您共享的页面将显示在此处。"
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "没有活动的周期",
+        "description": "您的项目中包含当前日期在其范围内的任何时期的周期。在这里查看所有活动周期的进度和详细信息。"
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "从CSV导入成员",
+      "description": "上传包含以下列的CSV：Email, Display Name, First Name, Last Name, Role（5、15或20）",
+      "dropzone": {
+        "active": "将CSV文件放在这里",
+        "inactive": "拖放或点击上传",
+        "file_type": "仅支持.csv文件"
+      },
+      "buttons": {
+        "cancel": "取消",
+        "import": "导入",
+        "try_again": "重试",
+        "close": "关闭",
+        "done": "完成"
+      },
+      "progress": {
+        "uploading": "上传中...",
+        "importing": "导入中..."
+      },
+      "summary": {
+        "title": {
+          "failed": "导入失败",
+          "complete": "导入完成"
+        },
+        "message": {
+          "seat_limit": "由于席位限制，无法导入成员。",
+          "success": "成功将{count}名成员添加到工作区。",
+          "no_imports": "未从CSV文件导入任何成员。"
+        },
+        "stats": {
+          "successful": "成功",
+          "failed": "失败"
+        },
+        "download_errors": "下载错误"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "无效文件",
+          "message": "仅支持CSV文件。"
+        },
+        "import_failed": {
+          "title": "导入失败",
+          "message": "出了些问题。"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/accessibility.json b/packages/i18n/src/locales/zh-TW/accessibility.json
new file mode 100644
index 0000000..75747f8
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/accessibility.json
@@ -0,0 +1,34 @@
+{
+  "aria_labels": {
+    "projects_sidebar": {
+      "workspace_logo": "工作空間標誌",
+      "open_workspace_switcher": "打開工作空間切換器",
+      "open_user_menu": "打開用戶選單",
+      "open_command_palette": "打開命令面板",
+      "open_extended_sidebar": "打開擴展側邊欄",
+      "close_extended_sidebar": "關閉擴展側邊欄",
+      "create_favorites_folder": "創建收藏夾文件夾",
+      "open_folder": "打開文件夾",
+      "close_folder": "關閉文件夾",
+      "open_favorites_menu": "打開收藏夾選單",
+      "close_favorites_menu": "關閉收藏夾選單",
+      "enter_folder_name": "輸入文件夾名稱",
+      "create_new_project": "創建新項目",
+      "open_projects_menu": "打開項目選單",
+      "close_projects_menu": "關閉項目選單",
+      "toggle_quick_actions_menu": "切換快速操作選單",
+      "open_project_menu": "打開項目選單",
+      "close_project_menu": "關閉項目選單",
+      "collapse_sidebar": "摺疊側邊欄",
+      "expand_sidebar": "展開側邊欄",
+      "edition_badge": "打開付費計劃模態框"
+    },
+    "auth_forms": {
+      "clear_email": "清除電子郵件",
+      "show_password": "顯示密碼",
+      "hide_password": "隱藏密碼",
+      "close_alert": "關閉警告",
+      "close_popover": "關閉彈出框"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/auth.json b/packages/i18n/src/locales/zh-TW/auth.json
new file mode 100644
index 0000000..d7c0504
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/auth.json
@@ -0,0 +1,368 @@
+{
+  "sso": {
+    "header": "身分",
+    "description": "設定您的網域以存取安全功能，包括單一登入。",
+    "domain_management": {
+      "header": "網域管理",
+      "verified_domains": {
+        "header": "已驗證的網域",
+        "description": "驗證電子郵件網域的所有權以啟用單一登入。",
+        "button_text": "新增網域",
+        "list": {
+          "domain_name": "網域名稱",
+          "status": "狀態",
+          "status_verified": "已驗證",
+          "status_failed": "失敗",
+          "status_pending": "待處理"
+        },
+        "add_domain": {
+          "title": "新增網域",
+          "description": "新增您的網域以設定 SSO 並驗證它。",
+          "form": {
+            "domain_label": "網域",
+            "domain_placeholder": "plane.so",
+            "domain_required": "網域為必填",
+            "domain_invalid": "請輸入有效的網域名稱（例如 plane.so）"
+          },
+          "primary_button_text": "新增網域",
+          "primary_button_loading_text": "新增中",
+          "toast": {
+            "success_title": "成功！",
+            "success_message": "網域已成功新增。請透過新增 DNS TXT 記錄來驗證它。",
+            "error_message": "新增網域失敗。請重試。"
+          }
+        },
+        "verify_domain": {
+          "title": "驗證您的網域",
+          "description": "請按照以下步驟驗證您的網域。",
+          "instructions": {
+            "label": "說明",
+            "step_1": "前往您的網域主機的 DNS 設定。",
+            "step_2": {
+              "part_1": "建立一個",
+              "part_2": "TXT 記錄",
+              "part_3": "並貼上下面提供的完整記錄值。"
+            },
+            "step_3": "此更新通常需要幾分鐘，但可能需要長達 72 小時才能完成。",
+            "step_4": "DNS 記錄更新後，點擊「驗證網域」進行確認。"
+          },
+          "verification_code_label": "TXT 記錄值",
+          "verification_code_description": "將此記錄新增到您的 DNS 設定",
+          "domain_label": "網域",
+          "primary_button_text": "驗證網域",
+          "primary_button_loading_text": "驗證中",
+          "secondary_button_text": "稍後處理",
+          "toast": {
+            "success_title": "成功！",
+            "success_message": "網域已成功驗證。",
+            "error_message": "驗證網域失敗。請重試。"
+          }
+        },
+        "delete_domain": {
+          "title": "刪除網域",
+          "description": {
+            "prefix": "您確定要刪除",
+            "suffix": "嗎？此操作無法復原。"
+          },
+          "primary_button_text": "刪除",
+          "primary_button_loading_text": "刪除中",
+          "secondary_button_text": "取消",
+          "toast": {
+            "success_title": "成功！",
+            "success_message": "網域已成功刪除。",
+            "error_message": "刪除網域失敗。請重試。"
+          }
+        }
+      }
+    },
+    "providers": {
+      "header": "單一登入",
+      "disabled_message": "新增已驗證的網域以設定 SSO",
+      "configure": {
+        "create": "設定",
+        "update": "編輯"
+      },
+      "switch_alert_modal": {
+        "title": "將 SSO 方法切換到 {newProviderShortName}？",
+        "content": "您即將啟用 {newProviderLongName}（{newProviderShortName}）。此操作將自動停用 {activeProviderLongName}（{activeProviderShortName}）。嘗試透過 {activeProviderShortName} 登入的使用者將無法再存取平台，直到他們切換到新方法。您確定要繼續嗎？",
+        "primary_button_text": "切換",
+        "primary_button_text_loading": "切換中",
+        "secondary_button_text": "取消"
+      },
+      "form_section": {
+        "title": "IdP 為 {workspaceName} 提供的詳細資訊"
+      },
+      "form_action_buttons": {
+        "saving": "儲存中",
+        "save_changes": "儲存變更",
+        "configure_only": "僅設定",
+        "configure_and_enable": "設定並啟用",
+        "default": "儲存"
+      },
+      "setup_details_section": {
+        "title": "{workspaceName} 為您的 IdP 提供的詳細資訊",
+        "button_text": "取得設定詳細資訊"
+      },
+      "saml": {
+        "header": "啟用 SAML",
+        "description": "設定您的 SAML 身分提供者以啟用單一登入。",
+        "configure": {
+          "title": "啟用 SAML",
+          "description": "驗證電子郵件網域的所有權以存取安全功能，包括單一登入。",
+          "toast": {
+            "success_title": "成功！",
+            "create_success_message": "SAML 提供者已成功建立。",
+            "update_success_message": "SAML 提供者已成功更新。",
+            "error_title": "錯誤！",
+            "error_message": "儲存 SAML 提供者失敗。請重試。"
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web 詳細資訊",
+            "entity_id": {
+              "label": "實體 ID | 對象 | 中繼資料資訊",
+              "description": "我們將產生此部分中繼資料，將此 Plane 應用程式識別為您 IdP 上的授權服務。"
+            },
+            "callback_url": {
+              "label": "單一登入 URL",
+              "description": "我們將為您產生此內容。將其新增到您 IdP 的登入重新導向 URL 欄位中。"
+            },
+            "logout_url": {
+              "label": "單一登出 URL",
+              "description": "我們將為您產生此內容。將其新增到您 IdP 的單一登出重新導向 URL 欄位中。"
+            }
+          },
+          "mobile_details": {
+            "header": "行動裝置詳細資訊",
+            "entity_id": {
+              "label": "實體 ID | 對象 | 中繼資料資訊",
+              "description": "我們將產生此部分中繼資料，將此 Plane 應用程式識別為您 IdP 上的授權服務。"
+            },
+            "callback_url": {
+              "label": "單一登入 URL",
+              "description": "我們將為您產生此內容。將其新增到您 IdP 的登入重新導向 URL 欄位中。"
+            },
+            "logout_url": {
+              "label": "單一登出 URL",
+              "description": "我們將為您產生此內容。將其新增到您 IdP 的登出重新導向 URL 欄位中。"
+            }
+          },
+          "mapping_table": {
+            "header": "對應詳細資訊",
+            "table": {
+              "idp": "IdP",
+              "plane": "Plane"
+            }
+          }
+        }
+      },
+      "oidc": {
+        "header": "啟用 OIDC",
+        "description": "設定您的 OIDC 身分提供者以啟用單一登入。",
+        "configure": {
+          "title": "啟用 OIDC",
+          "description": "驗證電子郵件網域的所有權以存取安全功能，包括單一登入。",
+          "toast": {
+            "success_title": "成功！",
+            "create_success_message": "OIDC 提供者已成功建立。",
+            "update_success_message": "OIDC 提供者已成功更新。",
+            "error_title": "錯誤！",
+            "error_message": "儲存 OIDC 提供者失敗。請重試。"
+          }
+        },
+        "setup_modal": {
+          "web_details": {
+            "header": "Web 詳細資訊",
+            "origin_url": {
+              "label": "來源 URL",
+              "description": "我們將為此 Plane 應用程式產生此內容。將其作為受信任的來源新增到您 IdP 的對應欄位中。"
+            },
+            "callback_url": {
+              "label": "重新導向 URL",
+              "description": "我們將為您產生此內容。將其新增到您 IdP 的登入重新導向 URL 欄位中。"
+            },
+            "logout_url": {
+              "label": "登出 URL",
+              "description": "我們將為您產生此內容。將其新增到您 IdP 的登出重新導向 URL 欄位中。"
+            }
+          },
+          "mobile_details": {
+            "header": "行動裝置詳細資訊",
+            "origin_url": {
+              "label": "來源 URL",
+              "description": "我們將為此 Plane 應用程式產生此內容。將其作為受信任的來源新增到您 IdP 的對應欄位中。"
+            },
+            "callback_url": {
+              "label": "重新導向 URL",
+              "description": "我們將為您產生此內容。將其新增到您 IdP 的登入重新導向 URL 欄位中。"
+            },
+            "logout_url": {
+              "label": "登出 URL",
+              "description": "我們將為您產生此內容。將其新增到您 IdP 的登出重新導向 URL 欄位中。"
+            }
+          }
+        }
+      }
+    }
+  },
+  "auth": {
+    "common": {
+      "email": {
+        "label": "電子郵件",
+        "placeholder": "name@company.com",
+        "errors": {
+          "required": "必須填寫電子郵件",
+          "invalid": "電子郵件無效"
+        }
+      },
+      "password": {
+        "label": "密碼",
+        "set_password": "設定密碼",
+        "placeholder": "輸入密碼",
+        "confirm_password": {
+          "label": "確認密碼",
+          "placeholder": "確認密碼"
+        },
+        "current_password": {
+          "label": "目前密碼"
+        },
+        "new_password": {
+          "label": "新密碼",
+          "placeholder": "輸入新密碼"
+        },
+        "change_password": {
+          "label": {
+            "default": "更改密碼",
+            "submitting": "正在更改密碼"
+          }
+        },
+        "errors": {
+          "match": "密碼不匹配",
+          "empty": "請輸入密碼",
+          "length": "密碼長度應超過8個字符",
+          "strength": {
+            "weak": "密碼強度弱",
+            "strong": "密碼強度強"
+          }
+        },
+        "submit": "設定密碼",
+        "toast": {
+          "change_password": {
+            "success": {
+              "title": "成功！",
+              "message": "密碼已成功更改。"
+            },
+            "error": {
+              "title": "錯誤！",
+              "message": "出現問題。請重試。"
+            }
+          }
+        }
+      },
+      "unique_code": {
+        "label": "唯一代碼",
+        "placeholder": "123456",
+        "paste_code": "貼上傳送到您電子郵件的代碼",
+        "requesting_new_code": "正在請求新代碼",
+        "sending_code": "正在發送代碼"
+      },
+      "already_have_an_account": "已有帳戶？",
+      "login": "登入",
+      "create_account": "創建帳戶",
+      "new_to_plane": "初次使用Plane？",
+      "back_to_sign_in": "返回登入",
+      "resend_in": "{seconds}秒後重新發送",
+      "sign_in_with_unique_code": "使用唯一代碼登入",
+      "forgot_password": "忘記密碼？",
+      "username": {
+        "label": "使用者名稱",
+        "placeholder": "請輸入您的使用者名稱"
+      }
+    },
+    "sign_up": {
+      "header": {
+        "label": "創建帳戶開始與團隊一起管理工作。",
+        "step": {
+          "email": {
+            "header": "註冊",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "註冊",
+            "sub_header": "使用電子郵件-密碼組合註冊。"
+          },
+          "unique_code": {
+            "header": "註冊",
+            "sub_header": "使用發送到上述電子郵件的唯一代碼註冊。"
+          }
+        }
+      },
+      "errors": {
+        "password": {
+          "strength": "請設定強密碼以繼續"
+        }
+      }
+    },
+    "sign_in": {
+      "header": {
+        "label": "登入開始與團隊一起管理工作。",
+        "step": {
+          "email": {
+            "header": "登入或註冊",
+            "sub_header": ""
+          },
+          "password": {
+            "header": "登入或註冊",
+            "sub_header": "使用您的電子郵件-密碼組合登入。"
+          },
+          "unique_code": {
+            "header": "登入或註冊",
+            "sub_header": "使用發送到上述電子郵件地址的唯一代碼登入。"
+          }
+        }
+      }
+    },
+    "forgot_password": {
+      "title": "重設密碼",
+      "description": "輸入您的用戶帳戶已驗證的電子郵件地址，我們將向您發送密碼重設連結。",
+      "email_sent": "我們已將重設連結發送到您的電子郵件地址",
+      "send_reset_link": "發送重設連結",
+      "errors": {
+        "smtp_not_enabled": "我們發現您的管理員尚未啟用SMTP，我們將無法發送密碼重設連結"
+      },
+      "toast": {
+        "success": {
+          "title": "郵件已發送",
+          "message": "請查看您的收件箱以獲取重設密碼的連結。如果幾分鐘內未收到，請檢查垃圾郵件文件夾。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "出現問題。請重試。"
+        }
+      }
+    },
+    "reset_password": {
+      "title": "設定新密碼",
+      "description": "使用強密碼保護您的帳戶"
+    },
+    "set_password": {
+      "title": "保護您的帳戶",
+      "description": "設定密碼有助於您安全登入"
+    },
+    "sign_out": {
+      "toast": {
+        "error": {
+          "title": "錯誤！",
+          "message": "登出失敗。請重試。"
+        }
+      }
+    },
+    "ldap": {
+      "header": {
+        "label": "使用 {ldapProviderName} 繼續",
+        "sub_header": "請輸入您的 {ldapProviderName} 憑證"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/automation.json b/packages/i18n/src/locales/zh-TW/automation.json
new file mode 100644
index 0000000..27b9a4b
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/automation.json
@@ -0,0 +1,273 @@
+{
+  "automations": {
+    "settings": {
+      "title": "自訂自動化",
+      "create_automation": "建立自動化"
+    },
+    "scope": {
+      "label": "範圍",
+      "run_on": "執行於"
+    },
+    "trigger": {
+      "label": "觸發器",
+      "add_trigger": "新增觸發器",
+      "sidebar_header": "觸發器設定",
+      "input_label": "此自動化的觸發器是什麼？",
+      "input_placeholder": "選擇一個選項",
+      "section_plane_events": "Plane 事件",
+      "section_time_based": "基於時間",
+      "fixed_schedule": "固定排程",
+      "schedule": {
+        "frequency": "頻率",
+        "select_day": "選擇日期",
+        "day_of_month": "每月日期",
+        "monthly_every": "每",
+        "monthly_day_aria": "第 {day} 天",
+        "time": "時間",
+        "hour": "小時",
+        "minute": "分鐘",
+        "hour_suffix": "時",
+        "minute_suffix": "分",
+        "am": "AM",
+        "pm": "PM",
+        "timezone": "時區",
+        "timezone_placeholder": "選擇時區",
+        "frequency_daily": "每日",
+        "frequency_weekly": "每週",
+        "frequency_monthly": "每月",
+        "on": "於",
+        "validation_weekly_day_required": "請至少選擇一天。",
+        "validation_monthly_date_required": "請選擇每月的某一天。",
+        "main_content_schedule_summary_daily": "每天 {time} ({timezone})。",
+        "main_content_schedule_summary_weekly": "每週 {days} 的 {time} ({timezone})。",
+        "main_content_schedule_summary_monthly": "每月第 {day} 天的 {time} ({timezone})。",
+        "schedule_mode": "排程模式",
+        "schedule_mode_fixed": "固定",
+        "schedule_mode_cron": "Cron",
+        "cron_expression_label": "輸入 Cron 表達式",
+        "cron_expression_placeholder": "0 9 * * 1-5",
+        "cron_invalid": "無效的 Cron 表達式。",
+        "cron_preview": "此 Cron 表達式執行「{description}」。",
+        "main_content_cron_summary": "{description} ({timezone})."
+      },
+      "button": {
+        "previous": "返回",
+        "next": "新增動作"
+      },
+      "warning": {
+        "disabled_trigger_switching": "建立後即無法變更觸發器類型"
+      }
+    },
+    "condition": {
+      "label": "條件",
+      "add_condition": "新增條件",
+      "adding_condition": "正在新增條件"
+    },
+    "action": {
+      "label": "動作",
+      "add_action": "新增動作",
+      "sidebar_header": "動作",
+      "input_label": "自動化執行什麼動作？",
+      "input_placeholder": "選擇一個選項",
+      "handler_name": {
+        "add_comment": "新增評論",
+        "change_property": "變更屬性",
+        "run_script": "執行指令碼"
+      },
+      "configuration": {
+        "label": "設定",
+        "change_property": {
+          "placeholders": {
+            "property_name": "選擇屬性",
+            "change_type": "選擇",
+            "property_value_select": "{count, plural, one{選擇值} other{選擇值}}",
+            "property_value_select_date": "選擇日期"
+          },
+          "validation": {
+            "property_name_required": "屬性名稱為必填",
+            "change_type_required": "變更類型為必填",
+            "property_value_required": "屬性值為必填"
+          }
+        }
+      },
+      "comment_block": {
+        "title": "新增評論"
+      },
+      "run_script_block": {
+        "title": "執行指令碼"
+      },
+      "change_property_block": {
+        "title": "變更屬性"
+      },
+      "validation": {
+        "delete_only_action": "在刪除唯一動作之前，請先停用自動化。"
+      }
+    },
+    "conjunctions": {
+      "and": "且",
+      "or": "或",
+      "if": "如果",
+      "then": "則"
+    },
+    "enable": {
+      "alert": "當您的自動化完成時，點擊「啟用」。啟用後，自動化將準備執行。",
+      "validation": {
+        "required": "自動化必須有一個觸發器和至少一個動作才能啟用。"
+      }
+    },
+    "delete": {
+      "validation": {
+        "enabled": "刪除自動化之前必須先停用它。"
+      }
+    },
+    "table": {
+      "title": "自動化標題",
+      "scope": "範圍",
+      "projects": "專案",
+      "last_run_on": "最後執行時間",
+      "created_on": "建立時間",
+      "last_updated_on": "最後更新時間",
+      "last_run_status": "最後執行狀態",
+      "average_duration": "平均持續時間",
+      "owner": "擁有者",
+      "executions": "執行次數"
+    },
+    "create_modal": {
+      "heading": {
+        "create": "建立自動化",
+        "update": "更新自動化"
+      },
+      "title": {
+        "placeholder": "為您的自動化命名。",
+        "required_error": "標題為必填"
+      },
+      "description": {
+        "placeholder": "描述您的自動化。"
+      },
+      "submit_button": {
+        "create": "建立自動化",
+        "update": "更新自動化"
+      }
+    },
+    "delete_modal": {
+      "heading": "刪除自動化"
+    },
+    "activity": {
+      "filters": {
+        "show_fails": "顯示失敗",
+        "all": "全部",
+        "only_activity": "僅活動",
+        "only_run_history": "僅執行歷史"
+      },
+      "run_history": {
+        "initiator": "發起者"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "成功！",
+          "message": "自動化建立成功。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "自動化建立失敗。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "成功！",
+          "message": "自動化更新成功。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "自動化更新失敗。"
+        }
+      },
+      "enable": {
+        "success": {
+          "title": "成功！",
+          "message": "自動化啟用成功。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "自動化啟用失敗。"
+        }
+      },
+      "disable": {
+        "success": {
+          "title": "成功！",
+          "message": "自動化停用成功。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "自動化停用失敗。"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "已刪除自動化",
+          "message": "{name}，該自動化，現已從您的專案中刪除。"
+        },
+        "error": {
+          "title": "本次無法刪除該自動化。",
+          "message": "請再試一次刪除，或稍後再試。如果仍無法刪除，請聯繫我們。"
+        }
+      },
+      "action": {
+        "create": {
+          "error": {
+            "title": "錯誤！",
+            "message": "建立動作失敗。請再試一次！"
+          }
+        },
+        "update": {
+          "error": {
+            "title": "錯誤！",
+            "message": "更新動作失敗。請再試一次！"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "no_automations": {
+        "title": "尚無自動化可顯示。",
+        "description": "自動化透過設定觸發器、條件和動作來幫助您消除重複性任務。建立一個來節省時間並讓工作輕鬆進行。"
+      },
+      "upgrade": {
+        "title": "自動化",
+        "description": "自動化是在您的專案中自動執行任務的方式。",
+        "sub_description": "使用自動化可以節省80%的管理時間。"
+      }
+    },
+    "global_automations": {
+      "project_select": {
+        "label": "選擇要執行此自動化的專案",
+        "all_projects": {
+          "label": "所有專案",
+          "description": "自動化將針對工作區中的所有專案執行。"
+        },
+        "select_projects": {
+          "label": "選擇專案",
+          "description": "自動化將針對工作區中選取的專案執行。",
+          "placeholder": "選擇專案"
+        }
+      },
+      "settings": {
+        "sidebar_label": "自動化",
+        "title": "自動化",
+        "description": "透過全域自動化讓工作區中的流程標準化。"
+      },
+      "table": {
+        "scope": {
+          "global": "全域",
+          "project": {
+            "label": "專案",
+            "multiple": "多個",
+            "all": "全部"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/common.json b/packages/i18n/src/locales/zh-TW/common.json
new file mode 100644
index 0000000..834a2d9
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/common.json
@@ -0,0 +1,871 @@
+{
+  "cloud_maintenance_message": {
+    "we_are_working_on_this_if_you_need_immediate_assistance": "我們正在處理此問題。如果您需要緊急協助，",
+    "reach_out_to_us": "請聯絡我們",
+    "otherwise_try_refreshing_the_page_occasionally_or_visit_our": "否則，請偶爾重新整理頁面或造訪我們的",
+    "status_page": "狀態頁面"
+  },
+  "submit": "送出",
+  "cancel": "取消",
+  "loading": "載入中",
+  "error": "錯誤",
+  "success": "成功",
+  "warning": "警告",
+  "info": "資訊",
+  "close": "關閉",
+  "yes": "是",
+  "no": "否",
+  "ok": "確定",
+  "name": "名稱",
+  "unknown_user": "未知使用者",
+  "description": "描述",
+  "search": "搜尋",
+  "add_member": "新增成員",
+  "adding_members": "新增成員中",
+  "remove_member": "移除成員",
+  "add_members": "新增成員",
+  "adding_member": "新增成員中",
+  "remove_members": "移除成員",
+  "add": "新增",
+  "adding": "新增中",
+  "remove": "移除",
+  "add_new": "新增",
+  "remove_selected": "移除已選取項目",
+  "first_name": "名字",
+  "last_name": "姓氏",
+  "email": "電子郵件",
+  "display_name": "顯示名稱",
+  "role": "角色",
+  "timezone": "時區",
+  "avatar": "大頭貼",
+  "cover_image": "封面圖片",
+  "password": "密碼",
+  "change_cover": "更換封面",
+  "language": "語言",
+  "saving": "儲存中",
+  "save_changes": "儲存變更",
+  "deactivate_account": "停用帳號",
+  "deactivate_account_description": "停用帳號時，該帳號內的所有資料和資源將被永久移除，且無法復原。",
+  "profile_settings": "個人資料設定",
+  "your_account": "您的帳號",
+  "security": "安全性",
+  "activity": "活動",
+  "activity_empty_state": {
+    "no_activity": "尚無活動",
+    "no_transitions": "尚無轉換",
+    "no_comments": "尚無評論",
+    "no_worklogs": "尚無工時紀錄",
+    "no_history": "尚無歷史紀錄"
+  },
+  "preferences": "偏好設定",
+  "language_and_time": "語言與時間",
+  "notifications": "通知",
+  "workspaces": "工作區",
+  "create_workspace": "建立工作區",
+  "invitations": "邀請",
+  "summary": "摘要",
+  "assigned": "已指派",
+  "created": "已建立",
+  "subscribed": "已訂閱",
+  "you_do_not_have_the_permission_to_access_this_page": "您沒有權限存取此頁面。",
+  "something_went_wrong_please_try_again": "發生錯誤，請再試一次。",
+  "load_more": "載入更多",
+  "select_or_customize_your_interface_color_scheme": "選擇或自訂您的介面配色方案。",
+  "timezone_setting": "目前的時區設定。",
+  "language_setting": "選擇使用者介面所使用的語言。",
+  "settings_moved_to_preferences": "時區與語言設定已移至偏好設定。",
+  "go_to_preferences": "前往偏好設定",
+  "select_the_cursor_motion_style_that_feels_right_for_you": "選擇適合您的游標移動樣式。",
+  "theme": "主題",
+  "smooth_cursor": "平滑游標",
+  "system_preference": "系統偏好",
+  "light": "淺色",
+  "dark": "深色",
+  "light_contrast": "高對比淺色",
+  "dark_contrast": "高對比深色",
+  "custom": "自訂主題",
+  "select_your_theme": "選擇您的主題",
+  "customize_your_theme": "自訂您的主題",
+  "background_color": "背景顏色",
+  "text_color": "文字顏色",
+  "primary_color": "主要 (主題) 顏色",
+  "sidebar_background_color": "側邊欄背景顏色",
+  "sidebar_text_color": "側邊欄文字顏色",
+  "set_theme": "設定主題",
+  "enter_a_valid_hex_code_of_6_characters": "請輸入有效的 6 位數十六進位色碼",
+  "background_color_is_required": "背景顏色為必填",
+  "text_color_is_required": "文字顏色為必填",
+  "primary_color_is_required": "主要顏色為必填",
+  "sidebar_background_color_is_required": "側邊欄背景顏色為必填",
+  "sidebar_text_color_is_required": "側邊欄文字顏色為必填",
+  "updating_theme": "更新主題中",
+  "theme_updated_successfully": "主題更新成功",
+  "failed_to_update_the_theme": "主題更新失敗",
+  "email_notifications": "電子郵件通知",
+  "stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified": "持續追蹤您訂閱的工作事項。啟用此功能以接收通知。",
+  "email_notification_setting_updated_successfully": "電子郵件通知設定更新成功",
+  "failed_to_update_email_notification_setting": "電子郵件通知設定更新失敗",
+  "notify_me_when": "在以下情況通知我",
+  "property_changes": "屬性變更",
+  "property_changes_description": "當工作事項的屬性 (如：指派對象、優先順序、評估等) 發生變更時通知我。",
+  "state_change": "狀態變更",
+  "state_change_description": "當工作事項狀態變更時通知我",
+  "issue_completed": "工作事項完成",
+  "issue_completed_description": "僅在工作事項完成時通知我",
+  "comments": "留言",
+  "comments_description": "當有人在工作事項上留下留言時通知我",
+  "mentions": "提及",
+  "mentions_description": "僅在有人在留言或描述中提及我時通知我",
+  "old_password": "舊密碼",
+  "general_settings": "一般設定",
+  "sign_out": "登出",
+  "signing_out": "登出中",
+  "active_cycles": "進行中的週期",
+  "active_cycles_description": "監控跨專案的週期、追蹤高優先順序工作事項，並關注需要注意的週期。",
+  "on_demand_snapshots_of_all_your_cycles": "依需求檢視所有週期的快照",
+  "upgrade": "升級",
+  "10000_feet_view": "俯瞰所有進行中的週期。",
+  "10000_feet_view_description": "一次檢視所有專案的進行中週期，不需逐一檢視每個專案的週期。",
+  "get_snapshot_of_each_active_cycle": "取得每個進行中週期的快照。",
+  "get_snapshot_of_each_active_cycle_description": "追蹤所有進行中週期的高階指標，檢視其進度狀態，並根據期限衡量範圍。",
+  "compare_burndowns": "比較燃盡圖。",
+  "compare_burndowns_description": "透過檢視每個週期的燃盡報告來監控每個團隊的表現。",
+  "quickly_see_make_or_break_issues": "快速檢視關鍵工作事項。",
+  "quickly_see_make_or_break_issues_description": "預覽每個週期中相對於截止日期的高優先順序工作事項。一鍵檢視每個週期的所有工作事項。",
+  "zoom_into_cycles_that_need_attention": "關注需要注意的週期。",
+  "zoom_into_cycles_that_need_attention_description": "一鍵調查任何不符合預期的週期狀態。",
+  "stay_ahead_of_blockers": "預防阻礙。",
+  "stay_ahead_of_blockers_description": "發現跨專案的挑戰，並檢視其他檢視無法明顯看出的週期間相依性。",
+  "analytics": "分析",
+  "workspace_invites": "工作區邀請",
+  "enter_god_mode": "進入管理員模式",
+  "workspace_logo": "工作區標誌",
+  "new_issue": "新增工作事項",
+  "your_work": "您的工作",
+  "drafts": "草稿",
+  "projects": "專案",
+  "views": "檢視",
+  "archives": "封存",
+  "settings": "設定",
+  "failed_to_move_favorite": "無法移動我的最愛",
+  "favorites": "我的最愛",
+  "no_favorites_yet": "尚無我的最愛",
+  "create_folder": "建立資料夾",
+  "new_folder": "新資料夾",
+  "favorite_updated_successfully": "我的最愛更新成功",
+  "favorite_created_successfully": "我的最愛建立成功",
+  "folder_already_exists": "資料夾已存在",
+  "folder_name_cannot_be_empty": "資料夾名稱不能為空",
+  "something_went_wrong": "發生錯誤",
+  "failed_to_reorder_favorite": "無法重新排序我的最愛",
+  "favorite_removed_successfully": "我的最愛移除成功",
+  "failed_to_create_favorite": "無法建立我的最愛",
+  "failed_to_rename_favorite": "無法重新命名我的最愛",
+  "project_link_copied_to_clipboard": "專案連結已複製到剪貼簿",
+  "link_copied": "連結已複製",
+  "add_project": "新增專案",
+  "create_project": "建立專案",
+  "failed_to_remove_project_from_favorites": "無法從我的最愛移除專案。請再試一次。",
+  "project_created_successfully": "專案建立成功",
+  "project_created_successfully_description": "專案建立成功。您現在可以開始新增工作事項。",
+  "project_name_already_taken": "專案名稱已被使用。",
+  "project_name_cannot_contain_special_characters": "專案名稱不能包含特殊字元。",
+  "project_identifier_already_taken": "專案識別碼已被使用。",
+  "project_cover_image_alt": "專案封面圖片",
+  "name_is_required": "名稱為必填",
+  "title_should_be_less_than_255_characters": "標題不應超過 255 個字元",
+  "project_name": "專案名稱",
+  "project_id_must_be_at_least_1_character": "專案 ID 至少必須有 1 個字元",
+  "project_id_must_be_at_most_5_characters": "專案 ID 最多只能有 5 個字元",
+  "project_id": "專案 ID",
+  "project_id_tooltip_content": "協助您唯一識別專案中的工作事項。最多 50 個字元。",
+  "description_placeholder": "描述",
+  "only_alphanumeric_non_latin_characters_allowed": "僅允許英數字元和非拉丁字元。",
+  "project_id_is_required": "專案 ID 為必填",
+  "project_id_allowed_char": "僅允許英數字元和非拉丁字元。",
+  "project_id_min_char": "專案 ID 至少必須有 1 個字元",
+  "project_id_max_char": "專案 ID 最多只能有 {max} 個字元",
+  "project_description_placeholder": "輸入專案描述",
+  "select_network": "選擇網路",
+  "lead": "負責人",
+  "date_range": "日期範圍",
+  "private": "私人",
+  "public": "公開",
+  "accessible_only_by_invite": "僅受邀者可存取",
+  "anyone_in_the_workspace_except_guests_can_join": "工作區中除了訪客以外的任何人都可以加入",
+  "creating": "建立中",
+  "creating_project": "建立專案中",
+  "adding_project_to_favorites": "將專案加入我的最愛",
+  "project_added_to_favorites": "專案已加入我的最愛",
+  "couldnt_add_the_project_to_favorites": "無法將專案加入我的最愛。請再試一次。",
+  "removing_project_from_favorites": "從我的最愛移除專案中",
+  "project_removed_from_favorites": "專案已從我的最愛移除",
+  "couldnt_remove_the_project_from_favorites": "無法從我的最愛移除專案。請再試一次。",
+  "add_to_favorites": "加入我的最愛",
+  "remove_from_favorites": "從我的最愛移除",
+  "publish_project": "發佈專案",
+  "publish": "發布",
+  "copy_link": "複製連結",
+  "leave_project": "離開專案",
+  "join_the_project_to_rearrange": "加入專案以重新排列",
+  "drag_to_rearrange": "拖曳以重新排列",
+  "congrats": "恭喜！",
+  "open_project": "開啟專案",
+  "issues": "工作事項",
+  "cycles": "週期",
+  "modules": "模組",
+  "pages": "頁面",
+  "intake": "進件",
+  "renew": "更新",
+  "preview": "預覽",
+  "time_tracking": "時間追蹤",
+  "work_management": "工作管理",
+  "projects_and_issues": "專案與工作事項",
+  "projects_and_issues_description": "為此專案開啟或關閉這些功能。",
+  "cycles_description": "為每個專案設定工作時間區段，並依需求調整週期。一個週期可以是兩週，下一個是一週。",
+  "modules_description": "將工作組織成子專案，並指派專屬的負責人與任務對象。",
+  "views_description": "儲存自訂排序、篩選和顯示選項，或與團隊分享。",
+  "pages_description": "建立與編輯自由格式內容：筆記、文件，任何內容皆可。",
+  "intake_description": "允許非成員分享錯誤、回饋和建議，而不會中斷您的工作流程。",
+  "time_tracking_description": "記錄在工作事項和專案上花費的時間。",
+  "work_management_description": "輕鬆管理您的工作和專案。",
+  "documentation": "文件",
+  "message_support": "聯絡支援",
+  "contact_sales": "聯絡業務",
+  "hyper_mode": "極速模式",
+  "keyboard_shortcuts": "鍵盤快速鍵",
+  "whats_new": "新功能",
+  "version": "版本",
+  "we_are_having_trouble_fetching_the_updates": "我們在取得更新時遇到問題。",
+  "our_changelogs": "我們的更新日誌",
+  "for_the_latest_updates": "以取得最新更新。",
+  "please_visit": "請造訪",
+  "docs": "文件",
+  "full_changelog": "完整更新日誌",
+  "support": "支援",
+  "forum": "Forum",
+  "powered_by_plane_pages": "由 Plane Pages 提供",
+  "please_select_at_least_one_invitation": "請至少選擇一個邀請。",
+  "please_select_at_least_one_invitation_description": "請至少選擇一個邀請加入工作區。",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace": "我們發現有人邀請您加入工作區",
+  "join_a_workspace": "加入工作區",
+  "we_see_that_someone_has_invited_you_to_join_a_workspace_description": "我們發現有人邀請您加入工作區",
+  "join_a_workspace_description": "加入工作區",
+  "accept_and_join": "接受並加入",
+  "go_home": "回首頁",
+  "no_pending_invites": "沒有待處理的邀請",
+  "you_can_see_here_if_someone_invites_you_to_a_workspace": "如果有人邀請您加入工作區，您可以在此處檢視",
+  "back_to_home": "回到首頁",
+  "workspace_name": "工作區名稱",
+  "deactivate_your_account": "停用您的帳號",
+  "deactivate_your_account_description": "一旦停用，您將無法被指派工作事項，並且不會被收費。若要重新啟用帳號，您需要使用此電子郵件地址收到工作區的邀請。",
+  "deactivating": "停用中",
+  "confirm": "確認",
+  "confirming": "確認中",
+  "draft_created": "草稿已建立",
+  "issue_created_successfully": "工作事項建立成功",
+  "draft_creation_failed": "草稿建立失敗",
+  "issue_creation_failed": "工作事項建立失敗",
+  "draft_issue": "草稿工作事項",
+  "issue_updated_successfully": "工作事項更新成功",
+  "issue_could_not_be_updated": "工作事項無法更新",
+  "create_a_draft": "建立草稿",
+  "save_to_drafts": "儲存為草稿",
+  "save": "儲存",
+  "update": "更新",
+  "updating": "更新中",
+  "create_new_issue": "建立新工作事項",
+  "editor_is_not_ready_to_discard_changes": "編輯器尚未準備好捨棄變更",
+  "failed_to_move_issue_to_project": "無法將工作事項移至專案",
+  "create_more": "建立更多",
+  "add_to_project": "新增至專案",
+  "discard": "捨棄",
+  "duplicate_issue_found": "找到重複的工作事項",
+  "duplicate_issues_found": "找到重複的工作事項",
+  "no_matching_results": "沒有符合的結果",
+  "title_is_required": "標題為必填",
+  "title": "標題",
+  "state": "狀態",
+  "transition": "轉換",
+  "history": "歷史",
+  "priority": "優先順序",
+  "none": "無",
+  "urgent": "緊急",
+  "high": "高",
+  "medium": "中",
+  "low": "低",
+  "members": "成員",
+  "assignee": "指派對象",
+  "assignees": "指派對象",
+  "subscriber": "{count, plural, one{# 位訂閱者} other{# 位訂閱者}}",
+  "you": "您",
+  "labels": "標籤",
+  "create_new_label": "建立新標籤",
+  "label_name": "標籤名稱",
+  "failed_to_create_label": "建立標籤失敗，請重試。",
+  "start_date": "開始日期",
+  "end_date": "結束日期",
+  "due_date": "截止日期",
+  "target_date": "目標日期",
+  "estimate": "評估",
+  "change_parent_issue": "變更父工作事項",
+  "remove_parent_issue": "移除父工作事項",
+  "add_parent": "新增上層",
+  "loading_members": "載入成員中",
+  "view_link_copied_to_clipboard": "檢視連結已複製到剪貼簿。",
+  "required": "必填",
+  "optional": "選填",
+  "Cancel": "取消",
+  "edit": "編輯",
+  "archive": "封存",
+  "restore": "還原",
+  "open_in_new_tab": "在新分頁中開啟",
+  "delete": "刪除",
+  "deleting": "刪除中",
+  "make_a_copy": "複製一份",
+  "move_to_project": "移至專案",
+  "good": "早安",
+  "morning": "早上",
+  "afternoon": "下午",
+  "evening": "晚上",
+  "show_all": "顯示全部",
+  "show_less": "顯示較少",
+  "no_data_yet": "尚無資料",
+  "syncing": "同步中",
+  "add_work_item": "新增工作事項",
+  "advanced_description_placeholder": "按 '/' 以使用指令",
+  "create_work_item": "建立工作事項",
+  "attachments": "附件",
+  "declining": "拒絕中",
+  "declined": "已拒絕",
+  "decline": "拒絕",
+  "unassigned": "未指派",
+  "work_items": "工作事項",
+  "add_link": "新增連結",
+  "points": "點數",
+  "no_assignee": "無指派對象",
+  "no_assignees_yet": "尚無指派對象",
+  "no_labels_yet": "尚無標籤",
+  "ideal": "理想",
+  "current": "目前",
+  "no_matching_members": "沒有符合的成員",
+  "leaving": "離開中",
+  "removing": "移除中",
+  "leave": "離開",
+  "refresh": "重新整理",
+  "refreshing": "重新整理中",
+  "refresh_status": "重新整理狀態",
+  "prev": "上一頁",
+  "next": "下一頁",
+  "re_generating": "重新產生中",
+  "re_generate": "重新產生",
+  "re_generate_key": "重新產生金鑰",
+  "export": "匯出",
+  "member": "{count, plural, one{# 位成員} other{# 位成員}}",
+  "new_password_must_be_different_from_old_password": "新密碼必須與舊密碼不同",
+  "edited": "已編輯",
+  "bot": "機器人",
+  "settings_description": "在一個地方管理您的帳號、工作區和專案偏好設定。在各個分頁間切換以輕鬆設定。",
+  "back_to_workspace": "返回工作區",
+  "upgrade_request": "請洽工作區管理員升級。",
+  "copied_to_clipboard": "已複製到剪貼簿",
+  "copied_to_clipboard_description": "URL 已成功複製到您的剪貼簿",
+  "toast": {
+    "success": "成功！",
+    "error": "錯誤！"
+  },
+  "links": {
+    "toasts": {
+      "created": {
+        "title": "連結已建立",
+        "message": "連結已成功建立"
+      },
+      "not_created": {
+        "title": "連結未建立",
+        "message": "無法建立連結"
+      },
+      "updated": {
+        "title": "連結已更新",
+        "message": "連結已成功更新"
+      },
+      "not_updated": {
+        "title": "連結未更新",
+        "message": "無法更新連結"
+      },
+      "removed": {
+        "title": "連結已移除",
+        "message": "連結已成功移除"
+      },
+      "not_removed": {
+        "title": "連結未移除",
+        "message": "無法移除連結"
+      }
+    }
+  },
+  "link": {
+    "modal": {
+      "url": {
+        "text": "網址",
+        "required": "網址無效",
+        "placeholder": "輸入或貼上網址"
+      },
+      "title": {
+        "text": "顯示標題",
+        "placeholder": "您希望如何顯示這個連結"
+      }
+    }
+  },
+  "common": {
+    "all": "全部",
+    "no_items_in_this_group": "此群組中沒有項目",
+    "drop_here_to_move": "拖放到此處以移動",
+    "states": "狀態",
+    "state": "狀態",
+    "state_groups": "狀態群組",
+    "state_group": "狀態群組",
+    "priorities": "優先順序",
+    "priority": "優先順序",
+    "team_project": "團隊專案",
+    "project": "專案",
+    "cycle": "週期",
+    "cycles": "週期",
+    "module": "模組",
+    "modules": "模組",
+    "labels": "標籤",
+    "label": "標籤",
+    "admins": "管理員",
+    "users": "使用者",
+    "guests": "訪客",
+    "assignees": "指派對象",
+    "assignee": "指派對象",
+    "created_by": "建立者",
+    "none": "無",
+    "link": "連結",
+    "estimates": "評估",
+    "estimate": "評估",
+    "created_at": "建立於",
+    "updated_at": "更新時間",
+    "completed_at": "完成於",
+    "layout": "版面配置",
+    "filters": "篩選器",
+    "display": "顯示",
+    "load_more": "載入更多",
+    "activity": "活動",
+    "analytics": "分析",
+    "dates": "日期",
+    "success": "成功！",
+    "something_went_wrong": "發生錯誤",
+    "error": {
+      "label": "錯誤！",
+      "message": "發生錯誤。請再試一次。"
+    },
+    "group_by": "分組依據",
+    "epic": "Epic",
+    "epics": "史詩",
+    "work_item": "工作事項",
+    "work_items": "工作事項",
+    "sub_work_item": "子工作事項",
+    "views": "檢視",
+    "pages": "頁面",
+    "add": "新增",
+    "warning": "警告",
+    "updating": "更新中",
+    "adding": "新增中",
+    "update": "更新",
+    "creating": "建立中",
+    "create": "建立",
+    "cancel": "取消",
+    "description": "描述",
+    "title": "標題",
+    "attachment": "附件",
+    "general": "一般",
+    "features": "功能",
+    "automation": "自動化",
+    "project_name": "專案名稱",
+    "project_id": "專案 ID",
+    "project_timezone": "專案時區",
+    "created_on": "建立於",
+    "updated_on": "更新於",
+    "completed_on": "Completed on",
+    "update_project": "更新專案",
+    "identifier_already_exists": "識別碼已存在",
+    "add_more": "新增更多",
+    "defaults": "預設值",
+    "add_label": "新增標籤",
+    "customize_time_range": "自訂時間範圍",
+    "loading": "載入中",
+    "attachments": "附件",
+    "property": "屬性",
+    "properties": "屬性",
+    "parent": "上層",
+    "page": "頁面",
+    "remove": "移除",
+    "archiving": "封存中",
+    "archive": "封存",
+    "access": {
+      "public": "公開",
+      "private": "私人"
+    },
+    "done": "完成",
+    "sub_work_items": "子工作事項",
+    "comment": "留言",
+    "workspace_level": "工作區層級",
+    "order_by": {
+      "label": "排序依據",
+      "manual": "手動 - 排名",
+      "last_created": "最後建立",
+      "last_updated": "最後更新",
+      "start_date": "開始日期",
+      "due_date": "截止日期",
+      "asc": "遞增",
+      "desc": "遞減",
+      "updated_on": "更新於"
+    },
+    "sort": {
+      "asc": "遞增",
+      "desc": "遞減",
+      "created_on": "建立於",
+      "updated_on": "更新於"
+    },
+    "comments": "留言",
+    "updates": "更新",
+    "additional_updates": "額外更新",
+    "clear_all": "清除全部",
+    "copied": "已複製！",
+    "link_copied": "連結已複製！",
+    "link_copied_to_clipboard": "連結已複製到剪貼簿",
+    "copied_to_clipboard": "工作事項連結已複製到剪貼簿",
+    "branch_name_copied_to_clipboard": "分支名稱已複製到剪貼簿",
+    "is_copied_to_clipboard": "工作事項已複製到剪貼簿",
+    "no_links_added_yet": "尚未新增連結",
+    "add_link": "新增連結",
+    "links": "連結",
+    "go_to_workspace": "前往工作區",
+    "progress": "進度",
+    "optional": "選填",
+    "join": "加入",
+    "go_back": "返回",
+    "continue": "繼續",
+    "resend": "重新傳送",
+    "relations": "關聯",
+    "dependencies": "相依性",
+    "errors": {
+      "default": {
+        "title": "錯誤！",
+        "message": "發生錯誤。請再試一次。"
+      },
+      "required": "此欄位為必填",
+      "entity_required": "{entity} 為必填",
+      "restricted_entity": "{entity}已被限制"
+    },
+    "update_link": "更新連結",
+    "attach": "附加",
+    "create_new": "建立新的",
+    "add_existing": "新增現有的",
+    "type_or_paste_a_url": "輸入或貼上網址",
+    "url_is_invalid": "網址無效",
+    "display_title": "顯示標題",
+    "link_title_placeholder": "您希望如何顯示這個連結",
+    "url": "網址",
+    "side_peek": "側邊預覽",
+    "modal": "彈出視窗",
+    "full_screen": "全螢幕",
+    "close_peek_view": "關閉預覽檢視",
+    "toggle_peek_view_layout": "切換預覽檢視版面配置",
+    "options": "選項",
+    "duration": "時長",
+    "today": "今天",
+    "week": "週",
+    "month": "月",
+    "quarter": "季",
+    "press_for_commands": "按 '/' 以使用指令",
+    "click_to_add_description": "點選以新增描述",
+    "on_track": "進展順利",
+    "off_track": "偏離軌道",
+    "at_risk": "有風險",
+    "timeline": "時間軸",
+    "completion": "完成",
+    "upcoming": "即將發生",
+    "completed": "已完成",
+    "in_progress": "進行中",
+    "planned": "已計劃",
+    "paused": "暫停",
+    "search": {
+      "label": "搜尋",
+      "placeholder": "輸入以搜尋",
+      "no_matches_found": "找不到符合的項目",
+      "no_matching_results": "沒有符合的結果",
+      "min_chars": "請至少輸入 {count} 個字元以進行搜尋",
+      "error": "取得搜尋結果時發生錯誤",
+      "no_results": {
+        "title": "沒有符合的結果",
+        "description": "移除搜尋條件以檢視所有結果"
+      }
+    },
+    "actions": {
+      "edit": "編輯",
+      "make_a_copy": "複製一份",
+      "open_in_new_tab": "在新分頁中開啟",
+      "copy_link": "複製連結",
+      "copy_branch_name": "複製分支名稱",
+      "archive": "封存",
+      "restore": "還原",
+      "delete": "刪除",
+      "remove_relation": "移除關聯",
+      "subscribe": "訂閱",
+      "unsubscribe": "取消訂閱",
+      "clear_sorting": "清除排序",
+      "show_weekends": "顯示週末",
+      "enable": "啟用",
+      "disable": "停用",
+      "copy_markdown": "複製 Markdown",
+      "reply": "回覆"
+    },
+    "name": "名稱",
+    "discard": "捨棄",
+    "confirm": "確認",
+    "confirming": "確認中",
+    "read_the_docs": "閱讀文件",
+    "default": "預設",
+    "active": "使用中",
+    "enabled": "已啟用",
+    "disabled": "已停用",
+    "mandate": "授權",
+    "mandatory": "必要的",
+    "global": "全域",
+    "yes": "是",
+    "no": "否",
+    "please_wait": "請稍候",
+    "enabling": "啟用中",
+    "disabling": "停用中",
+    "beta": "測試版",
+    "or": "或",
+    "next": "下一步",
+    "back": "返回",
+    "retry": "重試",
+    "cancelling": "取消中",
+    "configuring": "設定中",
+    "clear": "清除",
+    "import": "匯入",
+    "connect": "連線",
+    "authorizing": "授權中",
+    "processing": "處理中",
+    "no_data_available": "無可用資料",
+    "from": "來自 {name}",
+    "authenticated": "已認證",
+    "select": "選擇",
+    "upgrade": "升級",
+    "add_seats": "新增席位",
+    "projects": "專案",
+    "workspace": "工作區",
+    "workspaces": "工作區",
+    "team": "團隊",
+    "teams": "團隊",
+    "entity": "實體",
+    "entities": "實體",
+    "task": "任務",
+    "tasks": "任務",
+    "section": "區段",
+    "sections": "區段",
+    "edit": "編輯",
+    "connecting": "連線中",
+    "connected": "已連線",
+    "disconnect": "中斷連線",
+    "disconnecting": "中斷連線中",
+    "installing": "安裝中",
+    "install": "安裝",
+    "reset": "重設",
+    "live": "即時",
+    "change_history": "變更歷史記錄",
+    "coming_soon": "即將推出",
+    "member": "成員",
+    "members": "成員",
+    "you": "您",
+    "upgrade_cta": {
+      "higher_subscription": "升級至更高等級的訂閱方案",
+      "talk_to_sales": "聯絡業務"
+    },
+    "category": "類別",
+    "categories": "類別",
+    "saving": "儲存中",
+    "save_changes": "儲存變更",
+    "delete": "刪除",
+    "deleting": "刪除中",
+    "pending": "待處理",
+    "invite": "邀請",
+    "view": "檢視",
+    "deactivated_user": "已停用用戶",
+    "apply": "應用",
+    "applying": "應用中",
+    "overview": "概覽",
+    "no_of": "{entity} 的數量",
+    "resolved": "已解決",
+    "get_started": "開始使用",
+    "worklogs": "工作日誌",
+    "project_updates": "專案更新",
+    "workflows": "工作流程",
+    "templates": "模板",
+    "business": "商業版",
+    "members_and_teamspaces": "成員和團隊空間",
+    "recurring_work_items": "重複工作事項",
+    "milestones": "里程碑",
+    "open_in_full_screen": "以全螢幕開啟{page}",
+    "details": "詳情",
+    "project_structure": "專案結構",
+    "custom_properties": "自訂屬性",
+    "your_profile": "Your profile",
+    "developer": "Developer",
+    "work_structure": "Work structure",
+    "execution": "Execution",
+    "administration": "Administration"
+  },
+  "chart": {
+    "x_axis": "X 軸",
+    "y_axis": "Y 軸",
+    "metric": "指標"
+  },
+  "form": {
+    "title": {
+      "required": "標題為必填",
+      "max_length": "標題不應超過 {length} 個字元"
+    }
+  },
+  "entity": {
+    "grouping_title": "{entity} 分組",
+    "priority": "{entity} 優先順序",
+    "all": "所有 {entity}",
+    "drop_here_to_move": "拖曳到此處以移動 {entity}",
+    "delete": {
+      "label": "刪除 {entity}",
+      "success": "{entity} 刪除成功",
+      "failed": "{entity} 刪除失敗"
+    },
+    "update": {
+      "failed": "{entity} 更新失敗",
+      "success": "{entity} 更新成功"
+    },
+    "link_copied_to_clipboard": "{entity} 連結已複製到剪貼簿",
+    "fetch": {
+      "failed": "取得 {entity} 時發生錯誤"
+    },
+    "add": {
+      "success": "{entity} 新增成功",
+      "failed": "新增 {entity} 時發生錯誤"
+    },
+    "remove": {
+      "success": "{entity} 刪除成功",
+      "failed": "刪除 {entity} 時發生錯誤"
+    }
+  },
+  "attachment": {
+    "error": "無法附加檔案。請重新上傳。",
+    "only_one_file_allowed": "一次只能上傳一個檔案。",
+    "file_size_limit": "檔案大小必須小於或等於 {size}MB。",
+    "drag_and_drop": "拖曳到任何位置以上傳",
+    "delete": "刪除附件"
+  },
+  "label": {
+    "select": "選擇標籤",
+    "create": {
+      "success": "標籤建立成功",
+      "failed": "標籤建立失敗",
+      "already_exists": "標籤已存在",
+      "type": "輸入以新增標籤"
+    }
+  },
+  "view": {
+    "label": "{count, plural, one {檢視} other {檢視}}",
+    "create": {
+      "label": "建立檢視"
+    },
+    "update": {
+      "label": "更新檢視"
+    }
+  },
+  "role_details": {
+    "guest": {
+      "title": "訪客",
+      "description": "組織的外部成員可以被邀請為訪客。"
+    },
+    "member": {
+      "title": "成員",
+      "description": "在專案、週期和模組內具有讀取、寫入、編輯和刪除實體的能力"
+    },
+    "admin": {
+      "title": "管理員",
+      "description": "工作區內的所有權限都設為允許。"
+    }
+  },
+  "user_roles": {
+    "product_or_project_manager": "產品/專案經理",
+    "development_or_engineering": "開發/工程",
+    "founder_or_executive": "創辦人/主管",
+    "freelancer_or_consultant": "自由工作者/顧問",
+    "marketing_or_growth": "行銷/成長",
+    "sales_or_business_development": "業務/業務發展",
+    "support_or_operations": "支援/營運",
+    "student_or_professor": "學生/教授",
+    "human_resources": "人力資源",
+    "other": "其他"
+  },
+  "default_global_view": {
+    "all_issues": "所有工作事項",
+    "assigned": "已指派",
+    "created": "已建立",
+    "subscribed": "已訂閱"
+  },
+  "description_versions": {
+    "last_edited_by": "最後編輯者",
+    "previously_edited_by": "先前編輯者",
+    "edited_by": "編輯者"
+  },
+  "self_hosted_maintenance_message": {
+    "plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane 未能啟動。這可能是因為一個或多個 Plane 服務啟動失敗。",
+    "choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "從 setup.sh 和 Docker 日誌中選擇 View Logs 來確認。"
+  },
+  "customize_navigation": "自訂導覽",
+  "personal": "個人",
+  "accordion_navigation_control": "手風琴側邊欄導覽",
+  "horizontal_navigation_bar": "分頁式導覽",
+  "show_limited_projects_on_sidebar": "在側邊欄顯示限定數量的專案",
+  "enter_number_of_projects": "輸入專案數量",
+  "pin": "釘選",
+  "unpin": "取消釘選",
+  "workspace_dashboards": "儀表板",
+  "pi_chat": "AI 聊天",
+  "in_app": "應用內",
+  "forms": "表單",
+  "milestones": "里程碑",
+  "milestones_description": "里程碑提供了一個層級，讓工作事項對齊共同的完成日期。",
+  "file_upload": {
+    "upload_text": "點擊此處上傳文件",
+    "drag_drop_text": "拖放",
+    "processing": "處理中",
+    "invalid_file_type": "無效的文件類型",
+    "missing_fields": "缺少字段",
+    "success": "{fileName} 已上傳！"
+  },
+  "date": "日期",
+  "exporter": {
+    "csv": {
+      "title": "CSV",
+      "description": "將工作事項匯出為 CSV 檔案。",
+      "short_description": "匯出為 CSV"
+    },
+    "excel": {
+      "title": "Excel",
+      "description": "將工作事項匯出為 Excel 檔案。",
+      "short_description": "匯出為 Excel"
+    },
+    "xlsx": {
+      "title": "Excel",
+      "description": "將工作事項匯出為 Excel 檔案。",
+      "short_description": "匯出為 Excel"
+    },
+    "json": {
+      "title": "JSON",
+      "description": "將工作事項匯出為 JSON 檔案。",
+      "short_description": "匯出為 JSON"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/cycle.json b/packages/i18n/src/locales/zh-TW/cycle.json
new file mode 100644
index 0000000..acd1764
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/cycle.json
@@ -0,0 +1,41 @@
+{
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "新增工作事項到週期以檢視其進度"
+      },
+      "chart": {
+        "title": "新增工作事項到週期以檢視燃盡圖。"
+      },
+      "priority_issue": {
+        "title": "快速檢視週期中處理的高優先順序工作事項。"
+      },
+      "assignee": {
+        "title": "新增指派對象到工作事項以檢視依指派對象分類的工作分析。"
+      },
+      "label": {
+        "title": "新增標籤到工作事項以檢視依標籤分類的工作分析。"
+      }
+    }
+  },
+  "cycle": {
+    "label": "{count, plural, one {週期} other {週期}}",
+    "no_cycle": "無週期"
+  },
+  "active_cycle_analytics": {
+    "empty_state": {
+      "progress": {
+        "title": "將工作項目添加到週期以查看其\n進度"
+      },
+      "priority": {
+        "title": "一目了然地觀察在週期中處理的高優先級\n工作項目。"
+      },
+      "assignee": {
+        "title": "為工作項目添加負責人，以查看按負責人\n劃分的工作明細。"
+      },
+      "label": {
+        "title": "為工作項目添加標籤，以查看按標籤\n劃分的工作明細。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/editor.json b/packages/i18n/src/locales/zh-TW/editor.json
new file mode 100644
index 0000000..45d93c2
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/editor.json
@@ -0,0 +1,65 @@
+{
+  "attachmentComponent": {
+    "uploader": {
+      "drag_and_drop": "拖拽上傳外部檔案"
+    },
+    "errors": {
+      "file_too_large": {
+        "title": "檔案過大。",
+        "description": "每個檔案的最大大小為 {maxFileSize} MB"
+      },
+      "unsupported_file_type": {
+        "title": "不支援的檔案類型。",
+        "description": "查看支援的格式"
+      },
+      "default": {
+        "title": "上傳失敗。",
+        "description": "出現錯誤。請重試。"
+      }
+    },
+    "upgrade": {
+      "description": "升級您的計劃以查看此附件。"
+    },
+    "aria": {
+      "click_to_upload": "點擊上傳附件"
+    }
+  },
+  "externalEmbedComponent": {
+    "block_menu": {
+      "convert_to_embed": "轉換為嵌入內容",
+      "convert_to_link": "轉換為連結",
+      "convert_to_richcard": "轉換為豐富卡片"
+    },
+    "placeholder": {
+      "insert_embed": "在此插入您喜歡的嵌入連結，如 YouTube 影片、Figma 設計等",
+      "link": "輸入或貼上連結"
+    },
+    "input_modal": {
+      "embed": "嵌入",
+      "works_with_links": "適用於 YouTube、Figma、Google Docs 等"
+    },
+    "error": {
+      "not_valid_link": "請輸入有效的 URL。"
+    }
+  },
+  "ai_block": {
+    "content": {
+      "placeholder": "描述此區塊的內容",
+      "generated_here": "您的 AI 內容將會在此處生成"
+    },
+    "block_types": {
+      "placeholder": "選擇區塊類型",
+      "summarize_page": "摘要頁面",
+      "custom_prompt": "自訂提示"
+    },
+    "actions": {
+      "discard": "捨棄",
+      "generate": "生成",
+      "generating": "生成中",
+      "rewriting": "重寫中",
+      "rewrite": "重寫",
+      "use_this": "使用此項",
+      "refine": "精煉"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/empty-state.json b/packages/i18n/src/locales/zh-TW/empty-state.json
new file mode 100644
index 0000000..ebb0ad8
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/empty-state.json
@@ -0,0 +1,270 @@
+{
+  "common_empty_state": {
+    "progress": {
+      "title": "暫無進度指標可顯示。",
+      "description": "開始在工作項中設定屬性值以在此查看進度指標。"
+    },
+    "updates": {
+      "title": "暫無更新。",
+      "description": "專案成員新增更新後將顯示在此處"
+    },
+    "search": {
+      "title": "未找到符合結果。",
+      "description": "未找到結果。請嘗試調整搜尋條件。"
+    },
+    "not_found": {
+      "title": "糟糕!似乎出了點問題",
+      "description": "我們目前無法取得您的 Plane 帳戶。這可能是網路錯誤。",
+      "cta_primary": "嘗試重新載入"
+    },
+    "server_error": {
+      "title": "伺服器錯誤",
+      "description": "我們無法連線並從伺服器取得資料。請放心,我們正在處理。",
+      "cta_primary": "嘗試重新載入"
+    }
+  },
+  "project_empty_state": {
+    "no_access": {
+      "title": "您似乎無權存取此專案",
+      "restricted_description": "請聯絡管理員以申請存取權，核准後即可在此繼續。",
+      "join_description": "點擊下方按鈕加入專案。",
+      "cta_primary": "加入專案",
+      "cta_loading": "正在加入專案"
+    },
+    "invalid_project": {
+      "title": "找不到專案",
+      "description": "您所查找的專案不存在。"
+    },
+    "work_items": {
+      "title": "從您的第一個工作項開始。",
+      "description": "工作項是專案的建構模組 — 指派負責人、設定優先順序並輕鬆追蹤進度。",
+      "cta_primary": "建立您的第一個工作項"
+    },
+    "cycles": {
+      "title": "在週期中分組和限時您的工作。",
+      "description": "將工作分解為限時區塊,從專案截止日期倒推設定日期,並作為團隊取得實質性進展。",
+      "cta_primary": "設定您的第一個週期"
+    },
+    "cycle_work_items": {
+      "title": "此週期中沒有要顯示的工作項",
+      "description": "建立工作項以開始監控團隊在此週期中的進度並按時實現目標。",
+      "cta_primary": "建立工作項",
+      "cta_secondary": "新增現有工作項"
+    },
+    "modules": {
+      "title": "將專案目標對應到模組並輕鬆追蹤。",
+      "description": "模組由相互關聯的工作項組成。它們有助於監控專案階段的進度,每個階段都有特定的截止日期和分析,以指示您離實現這些階段有多近。",
+      "cta_primary": "設定您的第一個模組"
+    },
+    "module_work_items": {
+      "title": "此模組中沒有要顯示的工作項",
+      "description": "建立工作項以開始監控此模組。",
+      "cta_primary": "建立工作項",
+      "cta_secondary": "新增現有工作項"
+    },
+    "views": {
+      "title": "為專案儲存自訂檢視",
+      "description": "檢視是已儲存的篩選器,可協助您快速存取最常用的資訊。團隊成員可以輕鬆協作,共用檢視並根據特定需求進行調整。",
+      "cta_primary": "建立檢視"
+    },
+    "no_work_items_in_project": {
+      "title": "專案中暫無工作項",
+      "description": "將工作項新增至專案中,並使用檢視將工作切分為可追蹤的部分。",
+      "cta_primary": "新增工作項"
+    },
+    "work_item_filter": {
+      "title": "未找到工作項",
+      "description": "您目前的篩選器未傳回任何結果。請嘗試變更篩選器。",
+      "cta_primary": "新增工作項"
+    },
+    "pages": {
+      "title": "記錄一切 — 從筆記到 PRD",
+      "description": "頁面讓您在一個地方擷取和組織資訊。撰寫會議筆記、專案文件和 PRD,嵌入工作項,並使用現成的元件進行結構化。",
+      "cta_primary": "建立您的第一個頁面"
+    },
+    "archive_pages": {
+      "title": "暫無已封存頁面",
+      "description": "封存不在您關注範圍內的頁面。需要時在此處存取它們。"
+    },
+    "intake_sidebar": {
+      "title": "記錄接收請求",
+      "description": "提交新請求以在專案工作流程中進行審查、優先順序排序和追蹤。",
+      "cta_primary": "建立接收請求"
+    },
+    "intake_main": {
+      "title": "選擇一個接收工作項以查看其詳細資訊"
+    },
+    "epics": {
+      "title": "將複雜專案轉化為結構化史詩。",
+      "description": "史詩幫助您將大目標組織成更小的可追蹤任務。",
+      "cta_primary": "建立史詩",
+      "cta_secondary": "文件"
+    },
+    "epic_work_items": {
+      "title": "您尚未向此史詩新增工作項。",
+      "description": "開始向此史詩新增一些工作項並在此處追蹤它們。",
+      "cta_secondary": "新增工作項"
+    }
+  },
+  "workspace_empty_state": {
+    "archive_epics": {
+      "title": "暫無已封存史詩",
+      "description": "您可以封存已完成或已取消的史詩。封存後在此處尋找它們。"
+    },
+    "archive_work_items": {
+      "title": "暫無已封存工作項",
+      "description": "透過手動或自動化,您可以封存已完成或已取消的工作項。封存後在此處尋找它們。",
+      "cta_primary": "設定自動化"
+    },
+    "archive_cycles": {
+      "title": "暫無已封存週期",
+      "description": "為了整理專案,請封存已完成的週期。封存後在此處尋找它們。"
+    },
+    "archive_modules": {
+      "title": "暫無已封存模組",
+      "description": "為了整理專案,請封存已完成或已取消的模組。封存後在此處尋找它們。"
+    },
+    "home_widget_quick_links": {
+      "title": "為您的工作保留重要的參考、資源或文件"
+    },
+    "inbox_sidebar_all": {
+      "title": "您訂閱的工作項的更新將顯示在此處"
+    },
+    "inbox_sidebar_mentions": {
+      "title": "您的工作項的提及將顯示在此處"
+    },
+    "your_work_by_priority": {
+      "title": "尚未分配工作項"
+    },
+    "your_work_by_state": {
+      "title": "尚未分配工作項"
+    },
+    "views": {
+      "title": "暫無檢視",
+      "description": "將工作項新增至專案中並使用檢視輕鬆篩選、排序和監控進度。",
+      "cta_primary": "新增工作項"
+    },
+    "drafts": {
+      "title": "半成品工作項",
+      "description": "要試用此功能,請開始新增工作項並在中途離開,或在下方建立您的第一個草稿。😉",
+      "cta_primary": "建立草稿工作項"
+    },
+    "projects_archived": {
+      "title": "沒有已封存專案",
+      "description": "看起來您的所有專案仍然活躍 — 做得好!"
+    },
+    "analytics_projects": {
+      "title": "建立專案以在此處視覺化專案指標。"
+    },
+    "analytics_work_items": {
+      "title": "建立包含工作項和受託人的專案,以開始在此處追蹤績效、進度和團隊影響。"
+    },
+    "analytics_no_cycle": {
+      "title": "建立週期以將工作組織成有時限的階段並追蹤衝刺進度。"
+    },
+    "analytics_no_module": {
+      "title": "建立模組以組織工作並追蹤不同階段的進度。"
+    },
+    "analytics_no_intake": {
+      "title": "設定接收以管理傳入請求並追蹤它們的接受和拒絕情況"
+    },
+    "home_widget_stickies": {
+      "title": "記下想法、捕捉靈光一現或記錄思維火花。新增便籤開始。"
+    },
+    "stickies": {
+      "title": "即時捕捉想法",
+      "description": "建立便籤記錄快速筆記和待辦事項,並隨身攜帶它們無論您走到哪裡。",
+      "cta_primary": "建立第一個便籤",
+      "cta_secondary": "文件"
+    },
+    "active_cycles": {
+      "title": "無活躍週期",
+      "description": "您目前沒有任何正在進行的週期。包含今天日期的活躍週期將顯示在此處。"
+    },
+    "dashboard": {
+      "title": "使用儀表板視覺化您的進度",
+      "description": "建構可自訂的儀表板以追蹤指標、衡量成果並有效呈現見解。",
+      "cta_primary": "建立新儀表板"
+    },
+    "wiki": {
+      "title": "撰寫筆記、文件或完整的知識庫。",
+      "description": "頁面是 Plane 中的思想捕捉空間。記錄會議筆記,輕鬆格式化,嵌入工作項,使用元件庫進行配置,並將它們全部保留在專案上下文中。",
+      "cta_primary": "建立您的頁面"
+    },
+    "project_overview_state_sidebar": {
+      "title": "啟用專案狀態",
+      "description": "啟用專案狀態以檢視和管理狀態、優先順序、到期日等屬性。"
+    }
+  },
+  "settings_empty_state": {
+    "estimates": {
+      "title": "暫無估算",
+      "description": "定義團隊如何衡量工作量,並在所有工作項中一致地追蹤它。",
+      "cta_primary": "新增估算系統"
+    },
+    "labels": {
+      "title": "暫無標籤",
+      "description": "建立個人化標籤以有效分類和管理工作項。",
+      "cta_primary": "建立您的第一個標籤"
+    },
+    "exports": {
+      "title": "暫無匯出",
+      "description": "您目前沒有任何匯出記錄。匯出資料後,所有記錄將顯示在此處。"
+    },
+    "tokens": {
+      "title": "暫無個人權杖",
+      "description": "產生安全的 API 權杖以將工作區與外部系統和應用程式連線。",
+      "cta_primary": "新增 API 權杖"
+    },
+    "workspace_tokens": {
+      "title": "暫無存取權杖",
+      "description": "產生安全的 API 權杖以將工作區與外部系統和應用程式連線。",
+      "cta_primary": "新增存取權杖"
+    },
+    "webhooks": {
+      "title": "尚未新增 Webhook",
+      "description": "在專案事件發生時自動向外部服務傳送通知。",
+      "cta_primary": "新增 webhook"
+    },
+    "work_item_types": {
+      "title": "建立和自訂工作項類型",
+      "description": "為專案定義獨特的工作項類型。每種類型都可以有自己的屬性、工作流程和欄位 — 根據專案和團隊需求量身訂製。",
+      "cta_primary": "啟用"
+    },
+    "work_item_type_properties": {
+      "title": "定義要為此工作項類型擷取的屬性和詳細資訊。自訂它以符合專案的工作流程。",
+      "cta_secondary": "新增屬性"
+    },
+    "templates": {
+      "title": "暫無範本",
+      "description": "透過為工作項和頁面建立範本來減少設定時間 — 並在幾秒鐘內開始新工作。",
+      "cta_primary": "建立您的第一個範本"
+    },
+    "recurring_work_items": {
+      "title": "暫無循環工作項",
+      "description": "設定循環工作項以自動化重複任務並輕鬆保持計劃進度。",
+      "cta_primary": "建立循環工作項"
+    },
+    "worklogs": {
+      "title": "追蹤所有成員的工時表",
+      "description": "在工作項上記錄時間以檢視跨專案任何團隊成員的詳細工時表。"
+    },
+    "group_syncing": {
+      "title": "尚無群組對應"
+    },
+    "template_setting": {
+      "title": "暫無範本",
+      "description": "透過為專案、工作項和頁面建立範本來減少設定時間 — 並在幾秒鐘內開始新工作。",
+      "cta_primary": "建立範本"
+    },
+    "workflows": {
+      "title": "尚無工作流程",
+      "description": "建立工作流程以管理工作項目的進度。",
+      "cta_primary": "新增工作流程",
+      "states": {
+        "title": "新增狀態",
+        "description": "選擇工作項目經過的狀態。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/home.json b/packages/i18n/src/locales/zh-TW/home.json
new file mode 100644
index 0000000..d627529
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/home.json
@@ -0,0 +1,77 @@
+{
+  "home": {
+    "empty": {
+      "quickstart_guide": "您的快速入門指南",
+      "not_right_now": "現在不要",
+      "create_project": {
+        "title": "建立專案",
+        "description": "Plane 中的大多數事情都始於一個專案。",
+        "cta": "開始使用"
+      },
+      "invite_team": {
+        "title": "邀請您的團隊",
+        "description": "與同事一起建立、發佈和管理。",
+        "cta": "邀請他們"
+      },
+      "configure_workspace": {
+        "title": "設定您的工作區。",
+        "description": "開啟或關閉功能，或進一步調整。",
+        "cta": "設定此工作區"
+      },
+      "personalize_account": {
+        "title": "讓 Plane 成為您的。",
+        "description": "選擇您的圖片、配色及其他個人化設定。",
+        "cta": "立即個人化"
+      },
+      "widgets": {
+        "title": "沒有小工具很安靜，開啟它們吧",
+        "description": "看起來您的所有小工具都已關閉。現在\n啟用它們以提升您的體驗！",
+        "primary_button": {
+          "text": "管理小工具"
+        }
+      }
+    },
+    "quick_links": {
+      "empty": "儲存您想要隨手可得的工作連結。",
+      "add": "新增快速連結",
+      "title": "快速連結",
+      "title_plural": "快速連結"
+    },
+    "recents": {
+      "title": "最近",
+      "empty": {
+        "project": "一旦您造訪專案，您的最近專案就會出現在這裡。",
+        "page": "一旦您造訪頁面，您的最近頁面就會出現在這裡。",
+        "issue": "一旦您造訪工作事項，您的最近工作事項就會出現在這裡。",
+        "default": "您還沒有任何最近項目。"
+      },
+      "filters": {
+        "all": "所有",
+        "projects": "專案",
+        "pages": "頁面",
+        "issues": "工作事項"
+      }
+    },
+    "new_at_plane": {
+      "title": "Plane 新功能"
+    },
+    "quick_tutorial": {
+      "title": "快速教學"
+    },
+    "widget": {
+      "reordered_successfully": "小工具重新排序成功。",
+      "reordering_failed": "重新排序小工具時發生錯誤。"
+    },
+    "manage_widgets": "管理小工具",
+    "title": "首頁",
+    "star_us_on_github": "在 GitHub 上給我們星星",
+    "business_trial_banner": {
+      "title": "您的14天Business方案試用已啟動！",
+      "description": "探索所有Business功能。準備好後，選擇訂閱。不會自動收費。",
+      "trial_ends_today": "試用今天結束",
+      "trial_ends_in_days": "試用將在{days}天後結束",
+      "start_subscription": "開始訂閱",
+      "explore_business_features": "探索Business功能"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/inbox.json b/packages/i18n/src/locales/zh-TW/inbox.json
new file mode 100644
index 0000000..a6bd6a8
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/inbox.json
@@ -0,0 +1,87 @@
+{
+  "inbox_issue": {
+    "status": {
+      "pending": {
+        "title": "待處理",
+        "description": "待處理"
+      },
+      "declined": {
+        "title": "已拒絕",
+        "description": "已拒絕"
+      },
+      "snoozed": {
+        "title": "已延後",
+        "description": "還剩 {days, plural, one{# 天} other{# 天}}"
+      },
+      "accepted": {
+        "title": "已接受",
+        "description": "已接受"
+      },
+      "duplicate": {
+        "title": "重複",
+        "description": "重複"
+      }
+    },
+    "modals": {
+      "decline": {
+        "title": "拒絕工作事項",
+        "content": "您確定要拒絕工作事項 {value} 嗎？"
+      },
+      "delete": {
+        "title": "刪除工作事項",
+        "content": "您確定要刪除工作事項 {value} 嗎？",
+        "success": "工作事項刪除成功"
+      }
+    },
+    "errors": {
+      "snooze_permission": "只有專案管理員可以延後/取消延後工作事項",
+      "accept_permission": "只有專案管理員可以接受工作事項",
+      "decline_permission": "只有專案管理員可以拒絕工作事項"
+    },
+    "actions": {
+      "accept": "接受",
+      "decline": "拒絕",
+      "snooze": "延後",
+      "unsnooze": "取消延後",
+      "copy": "複製工作事項連結",
+      "delete": "刪除",
+      "open": "開啟工作事項",
+      "mark_as_duplicate": "標記為重複",
+      "move": "將 {value} 移至專案工作事項"
+    },
+    "source": {
+      "in-app": "應用程式內"
+    },
+    "order_by": {
+      "created_at": "建立時間",
+      "updated_at": "更新時間",
+      "id": "ID"
+    },
+    "label": "進件",
+    "page_label": "{workspace} - 進件",
+    "modal": {
+      "title": "建立進件工作事項"
+    },
+    "tabs": {
+      "open": "開啟",
+      "closed": "已關閉"
+    },
+    "empty_state": {
+      "sidebar_open_tab": {
+        "title": "沒有開啟的工作事項",
+        "description": "在這裡尋找開啟的工作事項。建立新工作事項。"
+      },
+      "sidebar_closed_tab": {
+        "title": "沒有已關閉的工作事項",
+        "description": "所有已接受或拒絕的工作事項都可以在這裡找到。"
+      },
+      "sidebar_filter": {
+        "title": "沒有符合的工作事項",
+        "description": "沒有工作事項符合進件中套用的篩選條件。建立新工作事項。"
+      },
+      "detail": {
+        "title": "選擇工作事項以檢視其詳細資訊。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/integration.json b/packages/i18n/src/locales/zh-TW/integration.json
new file mode 100644
index 0000000..fa9fac6
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/integration.json
@@ -0,0 +1,331 @@
+{
+  "integrations": {
+    "integrations": "整合",
+    "loading": "加載中",
+    "unauthorized": "您無權查看此頁面。",
+    "configure": "配置",
+    "not_enabled": "{name} 未為此工作區啟用。",
+    "not_configured": "未配置",
+    "disconnect_personal_account": "斷開個人 {providerName} 帳戶",
+    "not_configured_message_admin": "{name} 整合未配置。請聯繫您的實例管理員進行配置。",
+    "not_configured_message_support": "{name} 整合未配置。請聯繫支持進行配置。",
+    "external_api_unreachable": "無法訪問外部 API。請稍後再試。",
+    "error_fetching_supported_integrations": "無法獲取支持的整合。請稍後再試。",
+    "back_to_integrations": "返回整合",
+    "select_state": "選擇狀態",
+    "set_state": "設置狀態",
+    "choose_project": "選擇專案...",
+    "skip_backward_state_movement": "防止因 PR 更新而將問題移回較早的狀態"
+  },
+  "github_integration": {
+    "name": "GitHub",
+    "description": "將您的 GitHub 工作項目與 Plane 連接並同步",
+    "connect_org": "連接組織",
+    "connect_org_description": "將您的 GitHub 組織與 Plane 連接",
+    "processing": "處理中",
+    "org_added_desc": "GitHub org 添加於和時間",
+    "connection_fetch_error": "從服務器獲取連接詳情時出錯",
+    "personal_account_connected": "個人帳戶已連接",
+    "personal_account_connected_description": "您的 GitHub 帳戶現已連接到 Plane",
+    "connect_personal_account": "連接個人帳戶",
+    "connect_personal_account_description": "將您的個人 GitHub 帳戶與 Plane 連接。",
+    "repo_mapping": "倉庫映射",
+    "repo_mapping_description": "將您的 GitHub 倉庫與 Plane 專案映射",
+    "project_issue_sync": "專案問題同步",
+    "project_issue_sync_description": "將 GitHub 的問題同步到您的 Plane 專案",
+    "project_issue_sync_empty_state": "映射的專案問題同步將在此處顯示",
+    "configure_project_issue_sync_state": "配置問題同步狀態",
+    "select_issue_sync_direction": "選擇問題同步方向",
+    "allow_bidirectional_sync": "雙向 - 在 GitHub 和 Plane 之間同步問題和評論",
+    "allow_unidirectional_sync": "單向 - 僅從 GitHub 同步問題和評論到 Plane",
+    "allow_unidirectional_sync_warning": "GitHub 問題的資料將替換關聯 Plane 工作項中的資料（僅 GitHub → Plane）",
+    "remove_project_issue_sync": "移除此專案問題同步",
+    "remove_project_issue_sync_confirmation": "您確定要移除此專案問題同步嗎？",
+    "add_pr_state_mapping": "添加拉取請求狀態映射到 Plane 專案",
+    "edit_pr_state_mapping": "編輯拉取請求狀態映射到 Plane 專案",
+    "pr_state_mapping": "拉取請求狀態映射",
+    "pr_state_mapping_description": "將 GitHub 的拉取請求狀態映射到您的 Plane 專案",
+    "pr_state_mapping_empty_state": "映射的 PR 狀態將在此處顯示",
+    "remove_pr_state_mapping": "移除此拉取請求狀態映射",
+    "remove_pr_state_mapping_confirmation": "您確定要移除此拉取請求狀態映射嗎？",
+    "issue_sync_message": "工作項目已同步到 {project}",
+    "link": "將 GitHub 倉庫連接到 Plane 專案",
+    "pull_request_automation": "拉取請求自動化",
+    "pull_request_automation_description": "配置從 GitHub 到 Plane 專案的拉取請求狀態映射",
+    "DRAFT_MR_OPENED": "草稿開啟",
+    "MR_OPENED": "開啟",
+    "MR_READY_FOR_MERGE": "準備合併",
+    "MR_REVIEW_REQUESTED": "請求審核",
+    "MR_MERGED": "已合併",
+    "MR_CLOSED": "關閉",
+    "ISSUE_OPEN": "問題開啟",
+    "ISSUE_CLOSED": "問題關閉",
+    "save": "保存",
+    "start_sync": "開始同步",
+    "choose_repository": "選擇倉庫..."
+  },
+  "gitlab_integration": {
+    "name": "Gitlab",
+    "description": "連接並同步您的 Gitlab 合併請求與 Plane。",
+    "connection_fetch_error": "從服務器獲取連接詳情時出錯",
+    "connect_org": "連接組織",
+    "connect_org_description": "將您的 Gitlab 組織與 Plane 連接。",
+    "project_connections": "Gitlab 專案連接",
+    "project_connections_description": "從 Gitlab 同步合併請求到 Plane 專案。",
+    "plane_project_connection": "Plane 專案連接",
+    "plane_project_connection_description": "配置從 Gitlab 到 Plane 專案的拉取請求狀態映射",
+    "remove_connection": "移除連接",
+    "remove_connection_confirmation": "您確定要移除此連接嗎？",
+    "link": "將 Gitlab 倉庫連接到 Plane 專案",
+    "pull_request_automation": "拉取請求自動化",
+    "pull_request_automation_description": "配置從 Gitlab 到 Plane 的拉取請求狀態映射",
+    "DRAFT_MR_OPENED": "當草稿 MR 開啟時，將狀態設置為",
+    "MR_OPENED": "當 MR 開啟時，將狀態設置為",
+    "MR_REVIEW_REQUESTED": "當 MR 請求審核時，將狀態設置為",
+    "MR_READY_FOR_MERGE": "當 MR 準備合併時，將狀態設置為",
+    "MR_MERGED": "當 MR 已合併時，將狀態設置為",
+    "MR_CLOSED": "當 MR 關閉時，將狀態設置為",
+    "integration_enabled_text": "啟用 Gitlab 整合後，您可以自動化工作項目工作流程",
+    "choose_entity": "選擇實體",
+    "choose_project": "選擇專案",
+    "link_plane_project": "連接 Plane 專案",
+    "project_issue_sync": "專案問題同步",
+    "project_issue_sync_description": "從 Gitlab 同步問題到您的 Plane 專案",
+    "project_issue_sync_empty_state": "映射的專案問題同步將顯示在這裡",
+    "configure_project_issue_sync_state": "配置問題同步狀態",
+    "select_issue_sync_direction": "選擇問題同步方向",
+    "allow_bidirectional_sync": "雙向 - 在 Gitlab 和 Plane 之間雙向同步問題和評論",
+    "allow_unidirectional_sync": "單向 - 僅從 Gitlab 同步問題和評論到 Plane",
+    "allow_unidirectional_sync_warning": "Gitlab 問題中的資料將替換連結的 Plane 工作項中的資料（僅 Gitlab → Plane）",
+    "remove_project_issue_sync": "移除此專案問題同步",
+    "remove_project_issue_sync_confirmation": "您確定要移除此專案問題同步嗎？",
+    "ISSUE_OPEN": "問題開啟",
+    "ISSUE_CLOSED": "問題關閉",
+    "save": "保存",
+    "start_sync": "開始同步",
+    "choose_repository": "選擇儲存庫..."
+  },
+  "gitlab_enterprise_integration": {
+    "name": "Gitlab Enterprise",
+    "description": "連接並同步您的 Gitlab Enterprise 實例與 Plane。",
+    "app_form_title": "Gitlab Enterprise 配置",
+    "app_form_description": "配置 Gitlab Enterprise 以連接到 Plane。",
+    "base_url_title": "基礎 URL",
+    "base_url_description": "您的 Gitlab Enterprise 實例的基礎 URL。",
+    "base_url_placeholder": "例如：\"https://glab.plane.town\"",
+    "base_url_error": "基礎 URL 是必需的",
+    "invalid_base_url_error": "無效的基礎 URL",
+    "client_id_title": "應用 ID",
+    "client_id_description": "您在 Gitlab Enterprise 實例中創建的應用的 ID。",
+    "client_id_placeholder": "例如：\"7cd732xxxxxxxxxxxxxx\"",
+    "client_id_error": "應用 ID 是必需的",
+    "client_secret_title": "客戶端密鑰",
+    "client_secret_description": "您在 Gitlab Enterprise 實例中創建的應用的客戶端密鑰。",
+    "client_secret_placeholder": "例如：\"gloas-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"",
+    "client_secret_error": "客戶端密鑰是必需的",
+    "webhook_secret_title": "Webhook 密鑰",
+    "webhook_secret_description": "一個隨機的 webhook 密鑰，用於驗證來自 Gitlab Enterprise 實例的 webhook。",
+    "webhook_secret_placeholder": "例如：\"webhook1234567890\"",
+    "webhook_secret_error": "Webhook 密鑰是必需的",
+    "connect_app": "連接應用"
+  },
+  "slack_integration": {
+    "name": "Slack",
+    "description": "將您的 Slack 工作區與 Plane 連接。",
+    "connect_personal_account": "將您的個人 Slack 帳戶與 Plane 連接。",
+    "personal_account_connected": "您的個人 {providerName} 帳戶現已連接到 Plane。",
+    "link_personal_account": "將您的個人 {providerName} 帳戶連接到 Plane。",
+    "connected_slack_workspaces": "已連接的 Slack 工作區",
+    "connected_on": "連接於 {date}",
+    "disconnect_workspace": "斷開 {name} 工作區",
+    "alerts": {
+      "dm_alerts": {
+        "title": "在 Slack 私訊中接收重要更新、提醒和專屬警報的通知。"
+      }
+    },
+    "project_updates": {
+      "title": "專案更新",
+      "description": "為您的專案配置更新通知",
+      "add_new_project_update": "添加新的專案更新通知",
+      "project_updates_empty_state": "與 Slack 頻道連接的專案將在此處顯示。",
+      "project_updates_form": {
+        "title": "配置專案更新",
+        "description": "在創建工作項時在 Slack 中接收專案更新通知",
+        "failed_to_load_channels": "無法從 Slack 加載頻道",
+        "project_dropdown": {
+          "placeholder": "選擇專案",
+          "label": "Plane 專案",
+          "no_projects": "沒有可用專案"
+        },
+        "channel_dropdown": {
+          "label": "Slack 頻道",
+          "placeholder": "選擇頻道",
+          "no_channels": "沒有可用頻道"
+        },
+        "all_projects_connected": "所有專案已連接到 Slack 頻道。",
+        "all_channels_connected": "所有 Slack 頻道已連接到專案。",
+        "project_connection_success": "專案連接創建成功",
+        "project_connection_updated": "專案連接更新成功",
+        "project_connection_deleted": "專案連接刪除成功",
+        "failed_delete_project_connection": "刪除專案連接失敗",
+        "failed_create_project_connection": "創建專案連接失敗",
+        "failed_upserting_project_connection": "更新專案連接失敗",
+        "failed_loading_project_connections": "無法加載您的專案連接。這可能是由於網絡問題或集成問題。"
+      }
+    }
+  },
+  "sentry_integration": {
+    "name": "Sentry",
+    "description": "將您的Sentry工作空間連接到Plane。",
+    "connected_sentry_workspaces": "已連接的Sentry工作空間",
+    "connected_on": "連接於{date}",
+    "disconnect_workspace": "斷開{name}工作空間",
+    "state_mapping": {
+      "title": "狀態映射",
+      "description": "將Sentry事件狀態映射到您的專案狀態。配置當Sentry事件已解決或未解決時使用哪些狀態。",
+      "add_new_state_mapping": "添加新狀態映射",
+      "empty_state": "未配置狀態映射。建立您的第一個映射以同步Sentry事件狀態與您的專案狀態。",
+      "failed_loading_state_mappings": "我們無法載入您的狀態映射。這可能是由於網路問題或整合問題。",
+      "loading_project_states": "正在載入專案狀態...",
+      "error_loading_states": "載入狀態時出錯",
+      "no_states_available": "沒有可用狀態",
+      "no_permission_states": "您沒有權限存取此專案的狀態",
+      "states_not_found": "未找到專案狀態",
+      "server_error_states": "載入狀態時伺服器錯誤"
+    }
+  },
+  "bitbucket_dc_integration": {
+    "name": "Bitbucket Data Center",
+    "description": "將您的 Bitbucket Data Center 儲存庫與 Plane 連接並同步。"
+  },
+  "oauth_bridge_integration": {
+    "name": "OAuth Bridge",
+    "description": "驗證外部 IdP 權杖以進行 API 存取。",
+    "header_description": "驗證來自您的 IdP（Azure AD、Okta 等）的外部 OIDC/JWT 權杖，用於 Plane API 存取。",
+    "connected": "已連線",
+    "connect": "連線",
+    "uninstall": "解除安裝",
+    "uninstalling": "解除安裝中...",
+    "install_success": "OAuth Bridge 安裝成功。",
+    "install_error": "OAuth Bridge 安裝失敗。",
+    "uninstall_success": "OAuth Bridge 已解除安裝。",
+    "uninstall_error": "OAuth Bridge 解除安裝失敗。",
+    "token_providers": "權杖提供者",
+    "token_providers_description": "設定其 JWT 被接受為 API 憑證的外部 IdP。",
+    "add_provider": "新增提供者",
+    "edit_provider": "編輯提供者",
+    "enabled": "已啟用",
+    "disabled": "已停用",
+    "test": "測試",
+    "no_providers_title": "尚未設定提供者。",
+    "no_providers_description": "新增 IdP 以啟用外部權杖驗證。",
+    "provider_updated": "提供者已更新。",
+    "provider_added": "提供者已新增。",
+    "provider_save_error": "儲存提供者失敗。",
+    "provider_deleted": "提供者已刪除。",
+    "provider_delete_error": "刪除提供者失敗。",
+    "provider_update_error": "更新提供者失敗。",
+    "jwks_reachable": "JWKS 可達",
+    "jwks_unreachable": "JWKS 不可達",
+    "jwks_test_error": "無法從設定的 URL 取得 JWKS。",
+    "provider_form": {
+      "name_label": "名稱",
+      "name_placeholder": "例如 Azure AD Production",
+      "name_description": "此身分提供者的可讀標籤",
+      "name_required": "名稱為必填。",
+      "issuer_label": "簽發者",
+      "issuer_placeholder": "https://login.microsoftonline.com/tenant-id/v2.0",
+      "issuer_description": "JWT 中預期的 iss 宣告值",
+      "issuer_required": "簽發者為必填。",
+      "jwks_url_label": "JWKS URL",
+      "jwks_url_placeholder": "https://login.microsoftonline.com/tenant-id/discovery/v2.0/keys",
+      "jwks_url_description": "提供者 JSON Web Key Set 的 HTTPS 端點",
+      "jwks_url_required": "JWKS URL 為必填。",
+      "jwks_url_https": "JWKS URL 必須使用 HTTPS。",
+      "audience_label": "受眾",
+      "audience_placeholder": "api://my-app-id",
+      "audience_description": "JWT 中預期的 aud 宣告，以逗號分隔。",
+      "user_claims_label": "使用者宣告",
+      "user_claims_placeholder": "email",
+      "user_claims_description": "包含使用者電子郵件地址的 JWT 宣告",
+      "user_claims_required": "使用者宣告為必填。",
+      "allowed_algorithms_label": "允許的簽章演算法",
+      "allowed_algorithms_description": "用於 JWT 簽章驗證的非對稱演算法",
+      "allowed_algorithms_required": "至少需要一個演算法。",
+      "select_algorithms": "選擇演算法",
+      "jwks_cache_ttl_label": "JWKS 快取 TTL（秒）",
+      "jwks_cache_ttl_description": "快取提供者 JWKS 金鑰的時長（最少 60 秒，預設 24 小時）",
+      "jwks_cache_ttl_min": "快取 TTL 至少為 60 秒。",
+      "rate_limit_label": "速率限制",
+      "rate_limit_placeholder": "120/minute",
+      "rate_limit_description": "請求限制格式為 次數/週期（例如 120/minute）。留空使用預設速率限制。",
+      "enable_provider": "啟用此提供者",
+      "saving": "儲存中...",
+      "update": "更新"
+    }
+  },
+  "github_enterprise_integration": {
+    "name": "GitHub Enterprise",
+    "description": "連接並同步您的 GitHub Enterprise 組織與 Plane。",
+    "app_form_title": "GitHub Enterprise 配置",
+    "app_form_description": "配置 GitHub Enterprise 以連接 Plane。",
+    "app_id_title": "應用 ID",
+    "app_id_description": "您在 GitHub Enterprise 組織中創建的應用的 ID。",
+    "app_id_placeholder": "例如，\"1234567890\"",
+    "app_id_error": "App ID 是必需的",
+    "app_name_title": "應用 Slug",
+    "app_name_description": "您在 GitHub Enterprise 組織中創建的應用的 slug。",
+    "app_name_error": "App slug 是必需的",
+    "app_name_placeholder": "例如，\"plane-github-enterprise\"",
+    "base_url_title": "Base URL",
+    "base_url_description": "您的 GitHub Enterprise 組織的基礎 URL。",
+    "base_url_placeholder": "例如，\"https://gh.plane.town\"",
+    "base_url_error": "Base URL 是必需的",
+    "invalid_base_url_error": "無效的基礎 URL",
+    "client_id_title": "Client ID",
+    "client_id_description": "您在 GitHub Enterprise 組織中創建的應用的 client ID。",
+    "client_id_placeholder": "例如，\"1234567890\"",
+    "client_id_error": "Client ID 是必需的",
+    "client_secret_title": "Client Secret客戶端密碼",
+    "client_secret_description": "您在 GitHub Enterprise 組織中創建的應用的 client secret。",
+    "client_secret_placeholder": "例如，\"1234567890\"",
+    "client_secret_error": "Client secret 是必需的",
+    "webhook_secret_title": "Webhook Secret",
+    "webhook_secret_description": "您在 GitHub Enterprise 組織中創建的應用的 webhook secret。",
+    "webhook_secret_placeholder": "例如，\"1234567890\"",
+    "webhook_secret_error": "Webhook secret 是必需的",
+    "private_key_title": "Private Key (Base64 編碼)",
+    "private_key_description": "您在 GitHub Enterprise 組織中創建的應用的 private key。",
+    "private_key_placeholder": "例如，\"MIIEpAIBAAKCAQEA...",
+    "private_key_error": "Private key 是必需的",
+    "connect_app": "連接應用"
+  },
+  "silo_errors": {
+    "invalid_query_params": "提供的查詢參數無效或缺少必填字段",
+    "invalid_installation_account": "提供的安裝帳戶無效",
+    "generic_error": "處理您的請求時發生意外錯誤",
+    "connection_not_found": "找不到請求的連接",
+    "multiple_connections_found": "在只期望一個連接時找到了多個連接",
+    "cannot_create_multiple_connections": "您已將組織連接到某個工作區。請先中斷現有連接，再連接新的工作區。",
+    "installation_not_found": "找不到請求的安裝",
+    "user_not_found": "找不到請求的用戶",
+    "error_fetching_token": "獲取認證令牌失敗",
+    "invalid_app_credentials": "提供的應用憑證無效",
+    "invalid_app_installation_id": "安裝應用失敗"
+  },
+  "import_status": {
+    "queued": "排隊中",
+    "created": "已創建",
+    "initiated": "已啟動",
+    "pulling": "拉取中",
+    "timed_out": "超時",
+    "pulled": "已拉取",
+    "progressing": "進行中",
+    "transforming": "轉換中",
+    "transformed": "已轉換",
+    "pushing": "推送中",
+    "finished": "已完成",
+    "error": "錯誤",
+    "cancelled": "已取消"
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/module.json b/packages/i18n/src/locales/zh-TW/module.json
new file mode 100644
index 0000000..0646d9e
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/module.json
@@ -0,0 +1,7 @@
+{
+  "module": {
+    "label": "{count, plural, one {模組} other {模組}}",
+    "no_module": "無模組",
+    "select": "新增模組"
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/navigation.json b/packages/i18n/src/locales/zh-TW/navigation.json
new file mode 100644
index 0000000..93bd736
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/navigation.json
@@ -0,0 +1,34 @@
+{
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "找不到結果"
+      }
+    }
+  },
+  "sidebar": {
+    "stickies": "便利貼",
+    "your_work": "你的工作",
+    "projects": "專案",
+    "pages": "頁面",
+    "new_work_item": "新工作項目",
+    "home": "首頁",
+    "inbox": "收件匣",
+    "workspace": "工作區",
+    "views": "視圖",
+    "analytics": "分析",
+    "work_items": "工作項目",
+    "cycles": "週期",
+    "modules": "模組",
+    "intake": "接收",
+    "drafts": "草稿",
+    "favorites": "收藏",
+    "pro": "專業版",
+    "upgrade": "升級",
+    "pi_chat": "AI 聊天",
+    "epics": "史詩",
+    "upgrade_plan": "升級方案",
+    "plane_pro": "平面專業版",
+    "business": "商業"
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/notification.json b/packages/i18n/src/locales/zh-TW/notification.json
new file mode 100644
index 0000000..2443561
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/notification.json
@@ -0,0 +1,58 @@
+{
+  "notification": {
+    "label": "收件匣",
+    "page_label": "{workspace} - 收件匣",
+    "options": {
+      "mark_all_as_read": "全部標記為已讀",
+      "mark_read": "標記為已讀",
+      "mark_unread": "標記為未讀",
+      "refresh": "重新整理",
+      "filters": "收件匣篩選器",
+      "show_unread": "顯示未讀",
+      "show_snoozed": "顯示已延後",
+      "show_archived": "顯示已封存",
+      "mark_archive": "封存",
+      "mark_unarchive": "取消封存",
+      "mark_snooze": "延後",
+      "mark_unsnooze": "取消延後"
+    },
+    "toasts": {
+      "read": "通知已標記為已讀",
+      "unread": "通知已標記為未讀",
+      "archived": "通知已標記為已封存",
+      "unarchived": "通知已標記為未封存",
+      "snoozed": "通知已延後",
+      "unsnoozed": "通知已取消延後"
+    },
+    "empty_state": {
+      "detail": {
+        "title": "選擇以檢視詳細資訊。"
+      },
+      "all": {
+        "title": "沒有指派的工作事項",
+        "description": "您可以在這裡看到指派給您的工作事項的更新"
+      },
+      "mentions": {
+        "title": "沒有指派的工作事項",
+        "description": "您可以在這裡看到指派給您的工作事項的更新"
+      }
+    },
+    "tabs": {
+      "all": "全部",
+      "mentions": "提及"
+    },
+    "filter": {
+      "assigned": "指派給我",
+      "created": "由我建立",
+      "subscribed": "由我訂閱"
+    },
+    "snooze": {
+      "1_day": "1 天",
+      "3_days": "3 天",
+      "5_days": "5 天",
+      "1_week": "1 週",
+      "2_weeks": "2 週",
+      "custom": "自訂"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/page.json b/packages/i18n/src/locales/zh-TW/page.json
new file mode 100644
index 0000000..885e31c
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/page.json
@@ -0,0 +1,118 @@
+{
+  "page_navigation_pane": {
+    "tabs": {
+      "outline": {
+        "label": "大綱",
+        "empty_state": {
+          "title": "缺少標題",
+          "description": "讓我們在這個頁面添加一些標題來在這裡查看它們。"
+        }
+      },
+      "info": {
+        "label": "資訊",
+        "document_info": {
+          "words": "字數",
+          "characters": "字元數",
+          "paragraphs": "段落數",
+          "read_time": "閱讀時間"
+        },
+        "actors_info": {
+          "edited_by": "編輯者",
+          "created_by": "建立者"
+        },
+        "version_history": {
+          "label": "版本歷史",
+          "current_version": "目前版本",
+          "highlight_changes": "標示變更"
+        }
+      },
+      "assets": {
+        "label": "資源",
+        "download_button": "下載",
+        "empty_state": {
+          "title": "缺少圖片",
+          "description": "添加圖片以在這裡查看它們。"
+        }
+      },
+      "comments": {
+        "label": "留言",
+        "empty_state": {
+          "title": "沒有留言",
+          "description": "新增留言以在此處檢視它們。"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "便利貼名稱不能超過 100 個字元。",
+        "already_exists": "已存在沒有描述的便利貼"
+      },
+      "created": {
+        "title": "便利貼已建立",
+        "message": "便利貼已成功建立"
+      },
+      "not_created": {
+        "title": "便利貼未建立",
+        "message": "無法建立便利貼"
+      },
+      "updated": {
+        "title": "便利貼已更新",
+        "message": "便利貼已成功更新"
+      },
+      "not_updated": {
+        "title": "便利貼未更新",
+        "message": "無法更新便利貼"
+      },
+      "removed": {
+        "title": "便利貼已移除",
+        "message": "便利貼已成功移除"
+      },
+      "not_removed": {
+        "title": "便利貼未移除",
+        "message": "無法移除便利貼"
+      }
+    },
+    "open_button": "打開導航面板",
+    "close_button": "關閉導航面板",
+    "outline_floating_button": "打開大綱"
+  },
+  "page_actions": {
+    "move_page": {
+      "submit_button": {
+        "default": "移動",
+        "loading": "移動中"
+      },
+      "cannot_move_to_teamspace": "私人和共享頁面無法移至團隊空間。",
+      "placeholders": {
+        "workspace_to_all": "搜尋專案與團隊空間",
+        "workspace_to_project": "搜尋專案",
+        "project_to_all": "搜尋專案與團隊空間",
+        "project_to_project": "搜尋專案",
+        "project_to_all_with_wiki": "搜尋 Wiki 集合、專案和團隊空間",
+        "project_to_project_with_wiki": "搜尋 Wiki 集合和專案"
+      },
+      "toasts": {
+        "success": {
+          "title": "成功！",
+          "message": "頁面移動成功。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "無法移動頁面，請稍後再試。"
+        },
+        "collection_error": {
+          "title": "已移至 Wiki",
+          "message": "頁面已移至 Wiki，但無法加入所選集合。它會保留在 General 中。"
+        }
+      }
+    },
+    "remove_from_collection": {
+      "label": "從集合中移除",
+      "success_message": "頁面已從集合中移除。",
+      "error_message": "無法將頁面從集合中移除。請再試一次。"
+    }
+  },
+  "page_content_limit_banner": {
+    "message": "已達到內容上限，即時同步已關閉。請建立新頁面或使用巢狀頁面以繼續同步。"
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/power-k.json b/packages/i18n/src/locales/zh-TW/power-k.json
new file mode 100644
index 0000000..794259a
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/power-k.json
@@ -0,0 +1,192 @@
+{
+  "power_k": {
+    "actions_commands": {
+      "bulk_delete_work_items": "批次刪除工作事項"
+    },
+    "contextual_actions": {
+      "work_item": {
+        "title": "工作事項操作",
+        "indicator": "工作事項",
+        "change_state": "變更狀態",
+        "change_priority": "變更優先順序",
+        "change_assignees": "指派給",
+        "assign_to_me": "指派給我",
+        "unassign_from_me": "取消指派給我",
+        "change_estimate": "變更評估",
+        "add_to_cycle": "新增至週期",
+        "add_to_modules": "新增至模組",
+        "add_labels": "新增標籤",
+        "subscribe": "訂閱通知",
+        "unsubscribe": "取消訂閱通知",
+        "delete": "刪除",
+        "copy_id": "複製 ID",
+        "copy_id_toast_success": "工作事項 ID 已複製到剪貼簿。",
+        "copy_id_toast_error": "複製工作事項 ID 至剪貼簿時發生錯誤。",
+        "copy_title": "複製標題",
+        "copy_title_toast_success": "工作事項標題已複製到剪貼簿。",
+        "copy_title_toast_error": "複製工作事項標題至剪貼簿時發生錯誤。",
+        "copy_url": "複製 URL",
+        "copy_url_toast_success": "工作事項 URL 已複製到剪貼簿。",
+        "copy_url_toast_error": "複製工作事項 URL 至剪貼簿時發生錯誤。"
+      },
+      "cycle": {
+        "title": "週期操作",
+        "indicator": "週期",
+        "add_to_favorites": "加入我的最愛",
+        "remove_from_favorites": "從我的最愛移除",
+        "copy_url": "複製 URL",
+        "copy_url_toast_success": "週期 URL 已複製到剪貼簿。",
+        "copy_url_toast_error": "複製週期 URL 至剪貼簿時發生錯誤。"
+      },
+      "module": {
+        "title": "模組操作",
+        "indicator": "模組",
+        "add_remove_members": "新增/移除成員",
+        "change_status": "變更狀態",
+        "add_to_favorites": "加入我的最愛",
+        "remove_from_favorites": "從我的最愛移除",
+        "copy_url": "複製 URL",
+        "copy_url_toast_success": "模組 URL 已複製到剪貼簿。",
+        "copy_url_toast_error": "複製模組 URL 至剪貼簿時發生錯誤。"
+      },
+      "page": {
+        "title": "頁面操作",
+        "indicator": "頁面",
+        "lock": "鎖定",
+        "unlock": "解鎖",
+        "make_private": "設為私人",
+        "make_public": "設為公開",
+        "archive": "封存",
+        "restore": "還原",
+        "add_to_favorites": "加入我的最愛",
+        "remove_from_favorites": "從我的最愛移除",
+        "copy_url": "複製 URL",
+        "copy_url_toast_success": "頁面 URL 已複製到剪貼簿。",
+        "copy_url_toast_error": "複製頁面 URL 至剪貼簿時發生錯誤。"
+      }
+    },
+    "creation_actions": {
+      "create_work_item": "新工作事項",
+      "create_page": "新頁面",
+      "create_view": "新檢視",
+      "create_cycle": "新週期",
+      "create_module": "新模組",
+      "create_project": "新專案",
+      "create_workspace": "新工作區",
+      "create_project_automation": "新自動化"
+    },
+    "navigation_actions": {
+      "open_workspace": "開啟工作區",
+      "nav_home": "前往首頁",
+      "nav_inbox": "前往收件匣",
+      "nav_your_work": "前往您的工作",
+      "nav_account_settings": "前往帳號設定",
+      "open_project": "開啟專案",
+      "nav_projects_list": "前往專案清單",
+      "nav_all_workspace_work_items": "前往所有工作事項",
+      "nav_assigned_workspace_work_items": "前往已指派工作事項",
+      "nav_created_workspace_work_items": "前往已建立工作事項",
+      "nav_subscribed_workspace_work_items": "前往已訂閱工作事項",
+      "nav_workspace_analytics": "前往工作區分析",
+      "nav_workspace_drafts": "前往工作區草稿",
+      "nav_workspace_archives": "前往工作區封存",
+      "open_workspace_setting": "開啟工作區設定",
+      "nav_workspace_settings": "前往工作區設定",
+      "nav_project_work_items": "前往工作事項",
+      "open_project_cycle": "開啟週期",
+      "nav_project_cycles": "前往週期",
+      "open_project_module": "開啟模組",
+      "nav_project_modules": "前往模組",
+      "open_project_view": "開啟專案檢視",
+      "nav_project_views": "前往專案檢視",
+      "nav_project_pages": "前往頁面",
+      "nav_project_intake": "前往進件",
+      "nav_project_archives": "前往專案封存",
+      "open_project_setting": "開啟專案設定",
+      "nav_project_settings": "前往專案設定",
+      "nav_workspace_active_cycle": "前往所有進行中的週期",
+      "nav_project_overview": "前往專案概覽"
+    },
+    "account_actions": {
+      "sign_out": "登出",
+      "workspace_invites": "工作區邀請"
+    },
+    "miscellaneous_actions": {
+      "toggle_app_sidebar": "切換應用程式側邊欄",
+      "copy_current_page_url": "複製目前頁面 URL",
+      "copy_current_page_url_toast_success": "目前頁面 URL 已複製到剪貼簿。",
+      "copy_current_page_url_toast_error": "複製目前頁面 URL 至剪貼簿時發生錯誤。",
+      "focus_top_nav_search": "聚焦搜尋輸入欄"
+    },
+    "preferences_actions": {
+      "update_theme": "變更介面主題",
+      "update_timezone": "變更時區",
+      "update_start_of_week": "變更一週的第一天",
+      "update_language": "變更介面語言",
+      "toast": {
+        "theme": {
+          "success": "主題更新成功。",
+          "error": "主題更新失敗，請再試一次。"
+        },
+        "timezone": {
+          "success": "時區更新成功。",
+          "error": "時區更新失敗，請再試一次。"
+        },
+        "generic": {
+          "success": "偏好設定更新成功。",
+          "error": "偏好設定更新失敗，請再試一次。"
+        }
+      }
+    },
+    "help_actions": {
+      "open_keyboard_shortcuts": "開啟鍵盤快速鍵",
+      "open_plane_documentation": "開啟 Plane 文件",
+      "join_forum": "加入我們的 Forum",
+      "report_bug": "回報錯誤",
+      "chat_with_us": "與我們聊天"
+    },
+    "page_placeholders": {
+      "default": "輸入指令或搜尋",
+      "open_workspace": "開啟工作區",
+      "open_project": "開啟專案",
+      "open_workspace_setting": "開啟工作區設定",
+      "open_project_cycle": "開啟週期",
+      "open_project_module": "開啟模組",
+      "open_project_view": "開啟專案檢視",
+      "open_project_setting": "開啟專案設定",
+      "update_work_item_state": "變更狀態",
+      "update_work_item_priority": "變更優先順序",
+      "update_work_item_assignee": "指派給",
+      "update_work_item_estimate": "變更評估",
+      "update_work_item_cycle": "新增至週期",
+      "update_work_item_module": "新增至模組",
+      "update_work_item_labels": "新增標籤",
+      "update_module_member": "變更成員",
+      "update_module_status": "變更狀態",
+      "update_theme": "變更主題",
+      "update_timezone": "變更時區",
+      "update_start_of_week": "變更一週的第一天",
+      "update_language": "變更語言"
+    },
+    "search_menu": {
+      "no_results": "找不到結果",
+      "clear_search": "清除搜尋",
+      "go_to_advanced_search": "前往進階搜尋"
+    },
+    "footer": {
+      "workspace_level": "工作區層級"
+    },
+    "group_titles": {
+      "actions": "操作",
+      "contextual": "情境",
+      "navigation": "導覽",
+      "create": "建立",
+      "general": "一般",
+      "settings": "設定",
+      "account": "帳號",
+      "miscellaneous": "其他",
+      "preferences": "偏好設定",
+      "help": "說明"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/project-settings.json b/packages/i18n/src/locales/zh-TW/project-settings.json
new file mode 100644
index 0000000..a7c3a47
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/project-settings.json
@@ -0,0 +1,526 @@
+{
+  "project_settings": {
+    "general": {
+      "enter_project_id": "輸入專案 ID",
+      "please_select_a_timezone": "請選擇時區",
+      "archive_project": {
+        "title": "封存專案",
+        "description": "封存專案將不再從您的側邊導覽列中列出您的專案，但您仍然可以從專案頁面存取它。您可以隨時還原專案或刪除它。",
+        "button": "封存專案"
+      },
+      "delete_project": {
+        "title": "刪除專案",
+        "description": "刪除專案時，該專案內的所有資料和資源都將被永久移除且無法復原。",
+        "button": "刪除我的專案"
+      },
+      "toast": {
+        "success": "專案更新成功",
+        "error": "無法更新專案。請再試一次。"
+      }
+    },
+    "members": {
+      "label": "成員",
+      "project_lead": "專案負責人",
+      "project_lead_description": "請選擇該專案的專案負責人。",
+      "default_assignee": "預設指派對象",
+      "default_assignee_description": "請選擇該專案的預設指派人。",
+      "project_subscribers": "專案訂閱者",
+      "project_subscribers_description": "請選擇將接收此專案通知的成員。",
+      "guest_super_permissions": {
+        "title": "授予訪客使用者檢視所有工作事項的權限：",
+        "sub_heading": "這將允許訪客檢視所有專案工作事項。"
+      },
+      "invite_members": {
+        "title": "邀請成員",
+        "sub_heading": "邀請成員參與您的專案。",
+        "select_co_worker": "選擇同事"
+      }
+    },
+    "states": {
+      "heading": "狀態",
+      "description": "定義並自訂工作流程狀態以追蹤工作事項的進度。",
+      "describe_this_state_for_your_members": "為您的成員描述此狀態。",
+      "empty_state": {
+        "title": "{groupKey} 群組沒有可用的狀態",
+        "description": "請建立新狀態"
+      }
+    },
+    "labels": {
+      "heading": "標籤",
+      "description": "建立自訂標籤以分類和整理您的工作事項",
+      "label_title": "標籤標題",
+      "label_title_is_required": "標籤標題為必填",
+      "label_max_char": "標籤名稱不應超過 255 個字元",
+      "toast": {
+        "error": "更新標籤時發生錯誤"
+      }
+    },
+    "estimates": {
+      "heading": "評估",
+      "description": "幫助你傳達團隊的複雜性和工作負荷。",
+      "label": "預估",
+      "title": "為我的專案啟用預估",
+      "enable_description": "它們能幫助您傳達團隊的複雜度和工作量。",
+      "no_estimate": "無預估",
+      "new": "新估算系統",
+      "create": {
+        "custom": "自訂",
+        "start_from_scratch": "從頭開始",
+        "choose_template": "選擇範本",
+        "choose_estimate_system": "選擇預估系統",
+        "enter_estimate_point": "輸入預估",
+        "step": "步驟 {step} 共 {total}",
+        "label": "建立預估"
+      },
+      "toasts": {
+        "created": {
+          "success": {
+            "title": "預估已建立",
+            "message": "預估已成功建立"
+          },
+          "error": {
+            "title": "預估建立失敗",
+            "message": "我們無法建立新的預估，請重試。"
+          }
+        },
+        "updated": {
+          "success": {
+            "title": "預估已修改",
+            "message": "專案中的預估已更新。"
+          },
+          "error": {
+            "title": "預估修改失敗",
+            "message": "我們無法修改預估，請重試"
+          }
+        },
+        "enabled": {
+          "success": {
+            "title": "成功！",
+            "message": "預估已啟用。"
+          }
+        },
+        "disabled": {
+          "success": {
+            "title": "成功！",
+            "message": "預估已停用。"
+          },
+          "error": {
+            "title": "錯誤！",
+            "message": "無法停用預估。請重試"
+          }
+        },
+        "reorder": {
+          "success": {
+            "title": "估算已重新排序",
+            "message": "估算已在您的專案中重新排序。"
+          },
+          "error": {
+            "title": "估算重新排序失敗",
+            "message": "我們無法重新排序估算，請再試一次"
+          }
+        },
+        "switch": {
+          "success": {
+            "title": "估算系統已建立",
+            "message": "已成功建立並啟用"
+          },
+          "error": {
+            "title": "錯誤",
+            "message": "發生錯誤"
+          }
+        }
+      },
+      "validation": {
+        "min_length": "預估必須大於0。",
+        "unable_to_process": "我們無法處理你的請求，請重試。",
+        "numeric": "預估必須是數值。",
+        "character": "預估必須是字元值。",
+        "empty": "預估值不能為空。",
+        "already_exists": "預估值已存在。",
+        "unsaved_changes": "你有未儲存的變更。請在點擊完成前儲存",
+        "remove_empty": "預估不能為空。在每個欄位中輸入值或移除沒有值的欄位。",
+        "fill": "請填寫此估算欄位",
+        "repeat": "估算值不能重複"
+      },
+      "systems": {
+        "points": {
+          "label": "點數",
+          "fibonacci": "費波那契數列",
+          "linear": "線性",
+          "squares": "平方數",
+          "custom": "自訂"
+        },
+        "categories": {
+          "label": "類別",
+          "t_shirt_sizes": "T恤尺寸",
+          "easy_to_hard": "簡單到困難",
+          "custom": "自訂"
+        },
+        "time": {
+          "label": "時間",
+          "hours": "小時"
+        }
+      },
+      "edit": {
+        "title": "編輯估算系統",
+        "add_or_update": {
+          "title": "新增、更新或移除估算",
+          "description": "透過新增、更新或移除點數或類別來管理目前系統。"
+        },
+        "switch": {
+          "title": "變更估算類型",
+          "description": "將點數系統轉換為類別系統，反之亦然。"
+        }
+      },
+      "switch": "切換估算系統",
+      "current": "目前估算系統",
+      "select": "選擇估算系統"
+    },
+    "automations": {
+      "label": "自動化",
+      "heading": "自動化",
+      "description": "設定自動化動作以簡化您的專案管理流程並減少手動任務。",
+      "auto-archive": {
+        "title": "自動封存已關閉的工作項目",
+        "description": "Plane將自動封存已完成或已取消的工作項目。",
+        "duration": "自動封存已關閉的工作項目"
+      },
+      "auto-close": {
+        "title": "自動關閉工作項目",
+        "description": "Plane將自動關閉未完成或未取消的工作項目。",
+        "duration": "自動關閉非活動工作項目",
+        "auto_close_status": "自動關閉狀態"
+      },
+      "auto-remind": {
+        "title": "自動提醒",
+        "description": "Plane 將自動通過電子郵件和應用程式通知來提醒您的團隊保持進度。",
+        "duration": "提前提醒"
+      }
+    },
+    "empty_state": {
+      "labels": {
+        "title": "尚無標籤",
+        "description": "建立標籤以協助組織和篩選專案中的工作事項。"
+      },
+      "estimates": {
+        "title": "尚無評估系統",
+        "description": "建立一組評估以傳達每個工作事項的工作量。",
+        "primary_button": "新增評估系統"
+      },
+      "integrations": {
+        "title": "未配置整合",
+        "description": "配置 GitHub 和其他整合以同步您的專案工作項目。"
+      }
+    },
+    "workflows": {
+      "toggle": {
+        "title": "啟用工作流程",
+        "description": "設定工作流程以控制工作事項的流轉",
+        "no_states_tooltip": "此工作流程尚未新增任何狀態。",
+        "no_work_item_types_tooltip": "此工作流程尚未新增任何工作事項類型。",
+        "no_states_or_work_item_types_tooltip": "此工作流程尚未新增任何狀態或工作事項類型。",
+        "toast": {
+          "loading": {
+            "enabling": "正在啟用工作流程",
+            "disabling": "正在停用工作流程"
+          },
+          "success": {
+            "title": "成功！",
+            "message": "工作流程已成功啟用。"
+          },
+          "error": {
+            "title": "錯誤！",
+            "message": "啟用工作流程失敗。請再試一次。"
+          }
+        }
+      },
+      "heading": "工作流程",
+      "description": "自動化工作事項轉換，並設定規則以控制任務在您的專案流程中推進的方式。",
+      "add_button": "新增工作流程",
+      "search": "搜尋工作流程",
+      "detail": {
+        "define": "定義工作流程",
+        "add_states": "新增狀態",
+        "unmapped_states": {
+          "title": "偵測到未對應的狀態",
+          "description": "所選類型的某些工作事項目前處於此工作流程中不存在的狀態。",
+          "note": "如果您啟用此工作流程，這些項目將自動移至此工作流程的初始狀態。",
+          "label": "缺少的狀態",
+          "tooltip": "某些工作事項處於未對應至此工作流程的狀態。開啟工作流程以檢視。"
+        }
+      },
+      "select_states": {
+        "empty_state": {
+          "title": "所有狀態皆已使用中",
+          "description": "此專案定義的所有狀態皆已存在於您目前的工作流程中。"
+        }
+      },
+      "default_footer": {
+        "fallback_message": "此工作流程適用於任何未指派給工作流程的工作事項類型。"
+      },
+      "create": {
+        "heading": "建立新工作流程",
+        "name": {
+          "placeholder": "新增一個獨特的名稱",
+          "validation": {
+            "max_length": "名稱長度必須少於 255 個字元",
+            "required": "名稱為必填",
+            "invalid": "名稱只能包含字母、數字、空格、連字號和撇號"
+          }
+        },
+        "description": {
+          "placeholder": "新增簡短描述",
+          "validation": {
+            "invalid": "描述只能包含字母、數字、空格、連字號和撇號"
+          }
+        },
+        "work_item_type": {
+          "label": "工作事項類型"
+        },
+        "success": {
+          "title": "成功！",
+          "message": "工作流程建立成功。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "建立工作流程失敗。請再試一次。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "成功！",
+          "message": "工作流程更新成功。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "更新工作流程失敗。請再試一次。"
+        }
+      },
+      "delete": {
+        "loading": "正在刪除工作流程",
+        "success": {
+          "title": "成功！",
+          "message": "工作流程刪除成功。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "刪除工作流程失敗。請再試一次。"
+        }
+      },
+      "add_states": {
+        "success": {
+          "title": "成功！",
+          "message": "狀態新增成功。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "新增狀態失敗。請再試一次。"
+        }
+      }
+    },
+    "work_item_types": {
+      "heading": "工作事項類型",
+      "description": "使用獨特屬性建立和自訂不同類型的工作事項"
+    },
+    "features": {
+      "cycles": {
+        "title": "週期",
+        "short_title": "週期",
+        "description": "在靈活的時間段內安排工作，以適應該專案獨特的節奏和步調。",
+        "toggle_title": "啟用週期",
+        "toggle_description": "在集中的時間段內規劃工作。"
+      },
+      "modules": {
+        "title": "模組",
+        "short_title": "模組",
+        "description": "將工作組織成具有專門負責人和受讓人的子專案。",
+        "toggle_title": "啟用模組",
+        "toggle_description": "專案成員將能夠建立和編輯模組。"
+      },
+      "views": {
+        "title": "檢視",
+        "short_title": "檢視",
+        "description": "儲存自訂排序、篩選器和顯示選項，或與團隊共享。",
+        "toggle_title": "啟用檢視",
+        "toggle_description": "專案成員將能夠建立和編輯檢視。"
+      },
+      "pages": {
+        "title": "頁面",
+        "short_title": "頁面",
+        "description": "建立和編輯自由格式的內容：筆記、文件、任何內容。",
+        "toggle_title": "啟用頁面",
+        "toggle_description": "專案成員將能夠建立和編輯頁面。"
+      },
+      "intake": {
+        "intake_responsibility": "接收責任",
+        "intake_sources": "接收來源",
+        "title": "接收",
+        "short_title": "接收",
+        "description": "讓非成員分享錯誤、回饋和建議；而不會中斷您的工作流程。",
+        "toggle_title": "啟用接收",
+        "toggle_description": "允許專案成員在應用程式中建立接收請求。",
+        "toggle_tooltip_on": "請專案管理員代為開啟。",
+        "toggle_tooltip_off": "請專案管理員代為關閉。",
+        "notify_assignee": {
+          "title": "通知負責人",
+          "description": "對於新的接收請求，預設負責人將透過通知收到提醒"
+        },
+        "in_app": {
+          "title": "應用程式內",
+          "description": "從工作區的成員與訪客取得新的工作項目，不影響現有工作項目。"
+        },
+        "email": {
+          "title": "電子郵件",
+          "description": "從任何寄信到 Plane 電子郵件地址的人收集新的工作項目。",
+          "fieldName": "電子郵件 ID"
+        },
+        "form": {
+          "title": "表單",
+          "description": "讓工作區外的人透過專用安全表單為您建立潛在的新工作項目。",
+          "fieldName": "預設表單 URL",
+          "create_forms": "使用工作項目類型建立表單",
+          "manage_forms": "管理表單",
+          "manage_forms_tooltip": "請工作區管理員代為管理。",
+          "create_form": "建立表單",
+          "edit_form": "編輯表單詳細資訊",
+          "form_title": "表單標題",
+          "form_title_required": "表單標題為必填",
+          "work_item_type": "工作項目類型",
+          "remove_property": "移除屬性",
+          "select_properties": "選擇屬性",
+          "search_placeholder": "搜尋屬性",
+          "toasts": {
+            "success_create": "接收表單已成功建立",
+            "success_update": "接收表單已成功更新",
+            "error_create": "無法建立接收表單",
+            "error_update": "無法更新接收表單"
+          }
+        },
+        "toasts": {
+          "set": {
+            "loading": "正在設定負責人...",
+            "success": {
+              "title": "成功！",
+              "message": "負責人設定成功。"
+            },
+            "error": {
+              "title": "錯誤！",
+              "message": "設定負責人時出現問題。請重試。"
+            }
+          }
+        }
+      },
+      "time_tracking": {
+        "title": "時間追蹤",
+        "short_title": "時間追蹤",
+        "description": "記錄在工作項目和專案上花費的時間。",
+        "toggle_title": "啟用時間追蹤",
+        "toggle_description": "專案成員將能夠記錄工作時間。"
+      },
+      "milestones": {
+        "title": "里程碑",
+        "short_title": "里程碑",
+        "description": "里程碑提供了一個層，用於將工作項目對齊到共享的完成日期。",
+        "toggle_title": "啟用里程碑",
+        "toggle_description": "按里程碑截止日期組織工作項目。"
+      },
+      "toasts": {
+        "loading": "正在更新專案功能...",
+        "success": "專案功能更新成功。",
+        "error": "更新專案功能時發生錯誤。請再試一次。"
+      }
+    },
+    "project_updates": {
+      "heading": "專案更新",
+      "description": "此專案的整合追蹤和進度監控"
+    },
+    "templates": {
+      "heading": "模板",
+      "description": "使用範本可節省 80% 建立專案、工作事項和頁面所花費的時間。"
+    },
+    "cycles": {
+      "auto_schedule": {
+        "heading": "自動排程週期",
+        "description": "無需手動設定即可保持週期運作。",
+        "tooltip": "根據您選擇的排程自動建立新週期。",
+        "edit_button": "編輯",
+        "form": {
+          "cycle_title": {
+            "label": "週期標題",
+            "placeholder": "標題",
+            "tooltip": "標題將為後續週期添加編號。例如：設計 - 1/2/3",
+            "validation": {
+              "required": "週期標題為必填項",
+              "max_length": "標題不得超過255個字元"
+            }
+          },
+          "cycle_duration": {
+            "label": "週期持續時間",
+            "unit": "週",
+            "validation": {
+              "required": "週期持續時間為必填項",
+              "min": "週期持續時間必須至少為1週",
+              "max": "週期持續時間不得超過30週",
+              "positive": "週期持續時間必須為正數"
+            }
+          },
+          "cooldown_period": {
+            "label": "冷卻期",
+            "unit": "天",
+            "tooltip": "下一個週期開始前的週期間隔暫停期。",
+            "validation": {
+              "required": "冷卻期為必填項",
+              "negative": "冷卻期不能為負數"
+            }
+          },
+          "start_date": {
+            "label": "週期開始日",
+            "validation": {
+              "required": "開始日期為必填項",
+              "past": "開始日期不能是過去的日期"
+            }
+          },
+          "number_of_cycles": {
+            "label": "未來週期數",
+            "validation": {
+              "required": "週期數為必填項",
+              "min": "至少需要1個週期",
+              "max": "無法排程超過3個週期"
+            }
+          },
+          "auto_rollover": {
+            "label": "工作項自動結轉",
+            "tooltip": "在週期完成的當天，將所有未完成的工作項移至下一個週期。"
+          }
+        },
+        "toast": {
+          "toggle": {
+            "loading_enable": "正在啟用自動排程週期",
+            "loading_disable": "正在停用自動排程週期",
+            "success": {
+              "title": "成功！",
+              "message": "自動排程週期已成功切換。"
+            },
+            "error": {
+              "title": "錯誤！",
+              "message": "切換自動排程週期失敗。"
+            }
+          },
+          "save": {
+            "loading": "正在儲存自動排程週期設定",
+            "success": {
+              "title": "成功！",
+              "message_create": "自動排程週期設定已成功儲存。",
+              "message_update": "自動排程週期設定已成功更新。"
+            },
+            "error": {
+              "title": "錯誤！",
+              "message_create": "儲存自動排程週期設定失敗。",
+              "message_update": "更新自動排程週期設定失敗。"
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/project.json b/packages/i18n/src/locales/zh-TW/project.json
new file mode 100644
index 0000000..08e874a
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/project.json
@@ -0,0 +1,418 @@
+{
+  "project_view": {
+    "sort_by": {
+      "created_at": "建立時間",
+      "updated_at": "更新時間",
+      "name": "名稱"
+    }
+  },
+  "project_cycles": {
+    "add_cycle": "新增週期",
+    "more_details": "更多詳細資訊",
+    "cycle": "週期",
+    "update_cycle": "更新週期",
+    "create_cycle": "建立週期",
+    "no_matching_cycles": "沒有符合的週期",
+    "remove_filters_to_see_all_cycles": "移除篩選器以檢視所有週期",
+    "remove_search_criteria_to_see_all_cycles": "移除搜尋條件以檢視所有週期",
+    "only_completed_cycles_can_be_archived": "只有已完成的週期可以封存",
+    "start_date": "開始日期",
+    "end_date": "結束日期",
+    "in_your_timezone": "在您的時區",
+    "transfer_work_items": "轉移 {count} 工作事項",
+    "transfer": {
+      "no_cycles_available": "沒有其他可用的週期來轉移工作項目。"
+    },
+    "date_range": "日期範圍",
+    "add_date": "新增日期",
+    "active_cycle": {
+      "label": "使用中的週期",
+      "progress": "進度",
+      "chart": "燃盡圖",
+      "priority_issue": "優先順序工作事項",
+      "assignees": "指派對象",
+      "issue_burndown": "工作事項燃盡",
+      "ideal": "理想",
+      "current": "目前",
+      "labels": "標籤",
+      "trailing": "落後",
+      "leading": "領先"
+    },
+    "upcoming_cycle": {
+      "label": "即將到來的週期"
+    },
+    "completed_cycle": {
+      "label": "已完成的週期"
+    },
+    "status": {
+      "days_left": "剩餘天數",
+      "completed": "已完成",
+      "yet_to_start": "尚未開始",
+      "in_progress": "進行中",
+      "draft": "草稿"
+    },
+    "action": {
+      "restore": {
+        "title": "還原週期",
+        "success": {
+          "title": "週期已還原",
+          "description": "週期已還原。"
+        },
+        "failed": {
+          "title": "週期還原失敗",
+          "description": "無法還原週期。請再試一次。"
+        }
+      },
+      "favorite": {
+        "loading": "將週期加入我的最愛",
+        "success": {
+          "description": "週期已加入我的最愛。",
+          "title": "成功！"
+        },
+        "failed": {
+          "description": "無法將週期加入我的最愛。請再試一次。",
+          "title": "錯誤！"
+        }
+      },
+      "unfavorite": {
+        "loading": "從我的最愛移除週期",
+        "success": {
+          "description": "週期已從我的最愛移除。",
+          "title": "成功！"
+        },
+        "failed": {
+          "description": "無法從我的最愛移除週期。請再試一次。",
+          "title": "錯誤！"
+        }
+      },
+      "update": {
+        "loading": "更新週期中",
+        "success": {
+          "description": "週期更新成功。",
+          "title": "成功！"
+        },
+        "failed": {
+          "description": "更新週期時發生錯誤。請再試一次。",
+          "title": "錯誤！"
+        },
+        "error": {
+          "already_exists": "給定日期範圍內已有週期，如果您要建立草稿週期，可以移除兩個日期來執行此操作。"
+        }
+      }
+    },
+    "empty_state": {
+      "general": {
+        "title": "在週期中分組和時間區段化您的工作。",
+        "description": "將工作分解為時間區段化的區塊，從您的專案截止日期向後設定日期，並以團隊的方式取得具體進展。",
+        "primary_button": {
+          "text": "設定您的第一個週期",
+          "comic": {
+            "title": "週期是重複的時間區段。",
+            "description": "衝刺、迭代，或您用於每週或每兩週追蹤工作的任何其他術語都是週期。"
+          }
+        }
+      },
+      "no_issues": {
+        "title": "週期中沒有新增工作事項",
+        "description": "新增或建立您希望在此週期內時間區段化和交付的工作事項",
+        "primary_button": {
+          "text": "建立新工作事項"
+        },
+        "secondary_button": {
+          "text": "新增現有工作事項"
+        }
+      },
+      "completed_no_issues": {
+        "title": "週期中沒有工作事項",
+        "description": "週期中沒有工作事項。工作事項已被轉移或隱藏。若要檢視隱藏的工作事項（如果有），請相應地更新您的顯示屬性。"
+      },
+      "active": {
+        "title": "沒有使用中的週期",
+        "description": "使用中的週期包括任何期間內包含今天日期的週期。在這裡找到使用中週期的進度和詳細資訊。"
+      },
+      "archived": {
+        "title": "尚無已封存的週期",
+        "description": "為了整理您的專案，可以封存已完成的週期。一旦封存，您可以在這裡找到它們。"
+      }
+    }
+  },
+  "project_views": {
+    "empty_state": {
+      "general": {
+        "title": "為您的專案儲存篩選的檢視。依需要建立多個檢視",
+        "description": "檢視是您經常使用或想要輕鬆存取的已儲存篩選器集。專案中的所有同事都可以看到每個人的檢視，並選擇最適合他們需求的檢視。",
+        "primary_button": {
+          "text": "建立您的第一個檢視",
+          "comic": {
+            "title": "檢視基於工作事項屬性運作。",
+            "description": "您可以從這裡建立檢視，使用您認為合適的屬性作為篩選器。"
+          }
+        },
+        "filter": {
+          "title": "沒有符合的檢視",
+          "description": "沒有檢視符合搜尋條件。\n改為建立新檢視。"
+        }
+      },
+      "no_archived_issues": {
+        "title": "尚無已封存的工作事項",
+        "description": "您可以手動或透過自動化封存已完成或已取消的工作事項。封存後會在這裡找到它們。",
+        "primary_button": {
+          "text": "設定自動化"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "找不到符合所套用篩選器的工作事項",
+        "secondary_button": {
+          "text": "清除所有篩選器"
+        }
+      },
+      "public": {
+        "title": "尚無公開頁面",
+        "description": "在此檢視與專案中所有人共享的頁面。",
+        "primary_button": {
+          "text": "建立您的第一個頁面"
+        }
+      },
+      "archived": {
+        "title": "尚無已封存的頁面",
+        "description": "封存不在您雷達上的頁面。需要時在此處存取。"
+      },
+      "shared": {
+        "title": "尚無共享頁面",
+        "description": "其他人與您共享的頁面會顯示在這裡。"
+      }
+    },
+    "delete_view": {
+      "title": "您確定要刪除此視圖嗎？",
+      "content": "如果您確認，您為此視圖選擇的所有排序、篩選和顯示選項 + 布局將被永久刪除，無法恢復。"
+    }
+  },
+  "project_issues": {
+    "empty_state": {
+      "no_issues": {
+        "title": "建立工作事項並指派給某人，甚至是您自己",
+        "description": "將工作事項視為工作、任務、工作或待辦事項。我們喜歡這樣。工作事項及其子工作事項通常是指派給團隊成員的以時間為基礎的可執行項目。您的團隊建立、指派和完成工作事項，以推動您的專案朝向其目標前進。",
+        "primary_button": {
+          "text": "建立您的第一個工作事項",
+          "comic": {
+            "title": "工作事項是 Plane 中的基本單位。",
+            "description": "重新設計 Plane 使用者介面、重塑公司品牌或推出新的燃料噴射系統都是可能有子工作事項的工作事項範例。"
+          }
+        }
+      },
+      "no_archived_issues": {
+        "title": "尚無已封存的工作事項",
+        "description": "透過手動或自動化的方式，您可以封存已完成或取消的工作事項。一旦封存，您可以在這裡找到它們。",
+        "primary_button": {
+          "text": "設定自動化"
+        }
+      },
+      "issues_empty_filter": {
+        "title": "找不到符合套用篩選器的工作事項",
+        "secondary_button": {
+          "text": "清除所有篩選器"
+        }
+      }
+    }
+  },
+  "project_module": {
+    "add_module": "新增模組",
+    "update_module": "更新模組",
+    "create_module": "建立模組",
+    "archive_module": "封存模組",
+    "restore_module": "還原模組",
+    "delete_module": "刪除模組",
+    "empty_state": {
+      "general": {
+        "title": "將您的專案里程碑對應到模組並輕鬆追蹤彙總工作。",
+        "description": "屬於邏輯、階層式上層的一組工作事項形成一個模組。將其視為一種依專案里程碑追蹤工作的方式。它們有自己的期間和截止日期以及分析，可協助您了解您距離里程碑有多近或多遠。",
+        "primary_button": {
+          "text": "建立您的第一個模組",
+          "comic": {
+            "title": "模組協助依階層結構分組工作。",
+            "description": "購物車模組、底盤模組和倉庫模組都是這種分組的好例子。"
+          }
+        }
+      },
+      "no_issues": {
+        "title": "模組中沒有工作事項",
+        "description": "建立或新增您想要作為此模組一部分完成的工作事項",
+        "primary_button": {
+          "text": "建立新工作事項"
+        },
+        "secondary_button": {
+          "text": "新增現有工作事項"
+        }
+      },
+      "archived": {
+        "title": "尚無已封存的模組",
+        "description": "為了整理您的專案，可以封存已完成或取消的模組。一旦封存，您可以在這裡找到它們。"
+      },
+      "sidebar": {
+        "in_active": "此模組尚未啟用。",
+        "invalid_date": "日期無效。請輸入有效日期。"
+      }
+    },
+    "quick_actions": {
+      "archive_module": "封存模組",
+      "archive_module_description": "只有已完成或取消的\n模組可以封存。",
+      "delete_module": "刪除模組"
+    },
+    "toast": {
+      "copy": {
+        "success": "模組連結已複製到剪貼簿"
+      },
+      "delete": {
+        "success": "模組刪除成功",
+        "error": "刪除模組失敗"
+      }
+    }
+  },
+  "project_page": {
+    "empty_state": {
+      "general": {
+        "title": "撰寫筆記、文件或完整的知識庫。讓 Galileo（Plane 的 AI 助手）協助您開始",
+        "description": "頁面是 Plane 中的思考筆記空間。記下會議筆記，輕鬆格式化，嵌入工作事項，使用元件庫排版，並將它們全部保留在專案的上下文中。若要快速完成任何文件，可以使用快速鍵或按鈕來呼叫 Plane 的 AI Galileo。",
+        "primary_button": {
+          "text": "建立您的第一個頁面"
+        }
+      },
+      "private": {
+        "title": "尚無私人頁面",
+        "description": "在這裡保留您的私人想法。當您準備好分享時，團隊只需點選一下即可。",
+        "primary_button": {
+          "text": "建立您的第一個頁面"
+        }
+      },
+      "public": {
+        "title": "尚無公開頁面",
+        "description": "在這裡檢視與專案中所有人分享的頁面。",
+        "primary_button": {
+          "text": "建立您的第一個頁面"
+        }
+      },
+      "archived": {
+        "title": "尚無已封存的頁面",
+        "description": "封存不在您雷達上的頁面。需要時在這裡存取它們。"
+      }
+    }
+  },
+  "disabled_project": {
+    "empty_state": {
+      "inbox": {
+        "title": "進件功能未啟用於此專案。",
+        "description": "進件可協助您管理專案的傳入請求，並將它們新增為工作流程中的工作事項。從專案設定啟用進件以管理請求。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      },
+      "cycle": {
+        "title": "週期功能未啟用於此專案。",
+        "description": "將工作分解成時間區段化的區塊，從專案截止日期向後設定日期，並以團隊的方式取得具體進展。啟用專案的週期功能以開始使用。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      },
+      "module": {
+        "title": "模組未啟用於此專案。",
+        "description": "模組是專案的基本組成部分。從專案設定啟用模組以開始使用。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      },
+      "page": {
+        "title": "頁面未啟用於此專案。",
+        "description": "頁面是專案的基本組成部分。從專案設定啟用頁面以開始使用。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      },
+      "view": {
+        "title": "檢視未啟用於此專案。",
+        "description": "檢視是專案的基本組成部分。從專案設定啟用檢視以開始使用。",
+        "primary_button": {
+          "text": "管理功能"
+        }
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "待辦事項",
+      "planned": "已規劃",
+      "in_progress": "進行中",
+      "paused": "已暫停",
+      "completed": "已完成",
+      "cancelled": "已取消"
+    },
+    "layout": {
+      "list": "清單版面配置",
+      "board": "圖庫版面配置",
+      "timeline": "時間軸版面配置"
+    },
+    "order_by": {
+      "name": "名稱",
+      "progress": "進度",
+      "issues": "工作事項數量",
+      "due_date": "截止日期",
+      "created_at": "建立日期",
+      "manual": "手動"
+    }
+  },
+  "project_members": {
+    "full_name": "全名",
+    "display_name": "顯示名稱",
+    "email": "電子郵件",
+    "joining_date": "加入日期",
+    "role": "角色"
+  },
+  "project": {
+    "members_import": {
+      "title": "從CSV匯入成員",
+      "description": "上傳包含以下欄位的CSV：電子郵件與角色（5=訪客，15=成員，20=管理員）。使用者必須已是工作區成員。",
+      "download_sample": "下載範例CSV",
+      "dropzone": {
+        "active": "將CSV檔案放在這裡",
+        "inactive": "拖放或點擊上傳",
+        "file_type": "僅支援.csv檔案"
+      },
+      "buttons": {
+        "cancel": "取消",
+        "import": "匯入",
+        "try_again": "重試",
+        "close": "關閉",
+        "done": "完成"
+      },
+      "progress": {
+        "uploading": "上傳中...",
+        "importing": "匯入中..."
+      },
+      "summary": {
+        "title": {
+          "complete": "匯入完成"
+        },
+        "message": {
+          "success": "成功將{count}名成員匯入專案。",
+          "no_imports": "CSV檔案中未匯入任何新成員。"
+        },
+        "stats": {
+          "added": "已新增",
+          "reactivated": "已重新啟用",
+          "already_members": "已是成員",
+          "skipped": "已略過"
+        },
+        "download_errors": "下載略過詳情"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "無效檔案",
+          "message": "僅支援CSV檔案。"
+        },
+        "import_failed": {
+          "title": "匯入失敗",
+          "message": "發生錯誤。"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/settings.json b/packages/i18n/src/locales/zh-TW/settings.json
new file mode 100644
index 0000000..ba42402
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/settings.json
@@ -0,0 +1,156 @@
+{
+  "account_settings": {
+    "profile": {
+      "change_email_modal": {
+        "title": "變更電子郵件",
+        "description": "請輸入新的電子郵件地址以接收驗證連結。",
+        "toasts": {
+          "success_title": "成功！",
+          "success_message": "電子郵件已更新，請重新登入。"
+        },
+        "form": {
+          "email": {
+            "label": "新電子郵件",
+            "placeholder": "請輸入電子郵件",
+            "errors": {
+              "required": "電子郵件為必填",
+              "invalid": "電子郵件格式無效",
+              "exists": "電子郵件已存在，請使用其他信箱。",
+              "validation_failed": "電子郵件驗證失敗，請再試一次。"
+            }
+          },
+          "code": {
+            "label": "驗證碼",
+            "placeholder": "123456",
+            "helper_text": "驗證碼已傳送到你的新電子郵件。",
+            "errors": {
+              "required": "驗證碼為必填",
+              "invalid": "驗證碼無效，請再試一次。"
+            }
+          }
+        },
+        "actions": {
+          "continue": "繼續",
+          "confirm": "確認",
+          "cancel": "取消"
+        },
+        "states": {
+          "sending": "傳送中…"
+        }
+      }
+    },
+    "preferences": {
+      "heading": "偏好設定",
+      "description": "以您工作的方式自訂您的應用程式體驗"
+    },
+    "notifications": {
+      "heading": "電子郵件通知",
+      "description": "隨時掌握您訂閱的工作事項。啟用此功能以接收通知。",
+      "select_default_view": "選擇預設檢視",
+      "compact": "緊湊",
+      "full": "全螢幕"
+    },
+    "security": {
+      "heading": "安全性"
+    },
+    "api_tokens": {
+      "title": "個人存取權杖",
+      "description": "產生安全的 API 權杖，以將您的資料與外部系統和應用程式整合。"
+    },
+    "activity": {
+      "heading": "活動",
+      "description": "追蹤您在所有專案和工作事項中的近期操作和變更。"
+    },
+    "connections": {
+      "title": "連接",
+      "heading": "連接",
+      "description": "管理您的工作區連接設定。"
+    }
+  },
+  "profile": {
+    "label": "個人資料",
+    "page_label": "您的工作",
+    "work": "工作",
+    "details": {
+      "joined_on": "加入於",
+      "time_zone": "時區"
+    },
+    "stats": {
+      "workload": "工作量",
+      "overview": "概覽",
+      "created": "已建立的工作事項",
+      "assigned": "已指派的工作事項",
+      "subscribed": "已訂閱的工作事項",
+      "state_distribution": {
+        "title": "依狀態分類的工作事項",
+        "empty": "建立工作事項以在圖表中檢視依狀態分類的工作事項，以便進行更好的分析。"
+      },
+      "priority_distribution": {
+        "title": "依優先順序分類的工作事項",
+        "empty": "建立工作事項以在圖表中檢視依優先順序分類的工作事項，以便進行更好的分析。"
+      },
+      "recent_activity": {
+        "title": "最近活動",
+        "empty": "我們找不到資料。請檢查您的輸入",
+        "button": "下載今天的活動",
+        "button_loading": "下載中"
+      }
+    },
+    "actions": {
+      "profile": "個人資料",
+      "security": "安全性",
+      "activity": "活動",
+      "preferences": "偏好設定",
+      "notifications": "通知",
+      "api-tokens": "個人存取權杖",
+      "connections": "連接"
+    },
+    "tabs": {
+      "summary": "摘要",
+      "assigned": "已指派",
+      "created": "已建立",
+      "subscribed": "已訂閱",
+      "activity": "活動"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "尚無活動",
+        "description": "開始建立新工作事項！為其新增詳細資訊和屬性。探索更多 Plane 功能以檢視您的活動。"
+      },
+      "assigned": {
+        "title": "沒有指派給您的工作事項",
+        "description": "從這裡可以追蹤指派給您的工作事項。"
+      },
+      "created": {
+        "title": "尚無工作事項",
+        "description": "您建立的所有工作事項都會出現在這裡，直接在這裡追蹤它們。"
+      },
+      "subscribed": {
+        "title": "尚無工作事項",
+        "description": "訂閱您感興趣的工作事項，在這裡追蹤它們。"
+      }
+    }
+  },
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "系統偏好設定"
+      },
+      "light": {
+        "label": "淺色"
+      },
+      "dark": {
+        "label": "深色"
+      },
+      "light_contrast": {
+        "label": "高對比淺色"
+      },
+      "dark_contrast": {
+        "label": "高對比深色"
+      },
+      "custom": {
+        "label": "自訂主題"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/stickies.json b/packages/i18n/src/locales/zh-TW/stickies.json
new file mode 100644
index 0000000..8a5a1cd
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/stickies.json
@@ -0,0 +1,59 @@
+{
+  "stickies": {
+    "title": "您的便利貼",
+    "placeholder": "點選此處輸入",
+    "all": "所有便利貼",
+    "no-data": "記下想法、捕捉靈感或記錄突發奇想。新增便利貼以開始。",
+    "add": "新增便利貼",
+    "search_placeholder": "依標題搜尋",
+    "delete": "刪除便利貼",
+    "delete_confirmation": "您確定要刪除此便利貼嗎？",
+    "empty_state": {
+      "simple": "記下想法、捕捉靈感或記錄突發奇想。新增便利貼以開始。",
+      "general": {
+        "title": "便利貼是您隨手記下的快速筆記和待辦事項。",
+        "description": "透過建立可隨時隨地存取的便利貼，輕鬆捕捉您的想法和點子。",
+        "primary_button": {
+          "text": "新增便利貼"
+        }
+      },
+      "search": {
+        "title": "這與您的便利貼都不符。",
+        "description": "嘗試使用不同的詞彙或讓我們知道\n如果您確定您的搜尋是正確的。",
+        "primary_button": {
+          "text": "新增便利貼"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "便利貼名稱不能超過 100 個字元。",
+        "already_exists": "已存在一個沒有描述的便利貼"
+      },
+      "created": {
+        "title": "便利貼已建立",
+        "message": "便利貼已成功建立"
+      },
+      "not_created": {
+        "title": "便利貼未建立",
+        "message": "無法建立便利貼"
+      },
+      "updated": {
+        "title": "便利貼已更新",
+        "message": "便利貼已成功更新"
+      },
+      "not_updated": {
+        "title": "便利貼未更新",
+        "message": "無法更新便利貼"
+      },
+      "removed": {
+        "title": "便利貼已移除",
+        "message": "便利貼已成功移除"
+      },
+      "not_removed": {
+        "title": "便利貼未移除",
+        "message": "無法移除便利貼"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/template.json b/packages/i18n/src/locales/zh-TW/template.json
new file mode 100644
index 0000000..8610f8f
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/template.json
@@ -0,0 +1,333 @@
+{
+  "templates": {
+    "settings": {
+      "title": "模板",
+      "description": "使用模板可節省80%的專案、工作項目和頁面創建時間。",
+      "new_project_template": "新專案模板",
+      "new_work_item_template": "新工作事項模板",
+      "new_page_template": "新頁面模板",
+      "options": {
+        "project": {
+          "label": "專案模板"
+        },
+        "work_item": {
+          "label": "工作項目模板"
+        },
+        "page": {
+          "label": "頁面模板"
+        }
+      },
+      "create_template": {
+        "label": "創建模板",
+        "no_permission": {
+          "project": "聯繫您的專案管理員創建模板",
+          "workspace": "聯繫您的workspace管理員創建模板"
+        }
+      },
+      "use_template": {
+        "button": {
+          "default": "使用模板",
+          "loading": "使用中"
+        }
+      },
+      "template_source": {
+        "workspace": {
+          "info": "源自workspace"
+        },
+        "project": {
+          "info": "源自專案"
+        }
+      },
+      "form": {
+        "project": {
+          "template": {
+            "name": {
+              "placeholder": "為您的專案模板命名。",
+              "validation": {
+                "required": "模板名稱為必填項",
+                "maxLength": "模板名稱應少於255個字符"
+              }
+            },
+            "description": {
+              "placeholder": "描述何時以及如何使用此模板。"
+            }
+          },
+          "name": {
+            "placeholder": "為您的專案命名。",
+            "validation": {
+              "required": "專案標題為必填項",
+              "maxLength": "專案標題應少於255個字符"
+            }
+          },
+          "description": {
+            "placeholder": "描述此專案的目的和目標。"
+          },
+          "button": {
+            "create": "創建專案模板",
+            "update": "更新專案模板"
+          }
+        },
+        "work_item": {
+          "template": {
+            "name": {
+              "placeholder": "為您的工作項目模板命名。",
+              "validation": {
+                "required": "模板名稱為必填項",
+                "maxLength": "模板名稱應少於255個字符"
+              }
+            },
+            "description": {
+              "placeholder": "描述何時以及如何使用此模板。"
+            }
+          },
+          "name": {
+            "placeholder": "為此工作項目提供標題。",
+            "validation": {
+              "required": "工作項目標題為必填項",
+              "maxLength": "工作項目標題應少於255個字符"
+            }
+          },
+          "description": {
+            "placeholder": "描述此工作項目，以便清楚地了解完成時將實現什麼。"
+          },
+          "button": {
+            "create": "創建工作項目模板",
+            "update": "更新工作項目模板"
+          }
+        },
+        "page": {
+          "template": {
+            "name": {
+              "placeholder": "為您的頁面模板命名。",
+              "validation": {
+                "required": "模板名稱為必填項",
+                "maxLength": "模板名稱應少於255個字符"
+              }
+            },
+            "description": {
+              "placeholder": "描述何時以及如何使用此模板。"
+            }
+          },
+          "name": {
+            "placeholder": "未命名頁面",
+            "validation": {
+              "maxLength": "頁面名稱應少於255個字符"
+            }
+          },
+          "button": {
+            "create": "創建頁面模板",
+            "update": "更新頁面模板"
+          }
+        },
+        "publish": {
+          "action": "{isPublished, select, true {發布設定} other {發布到市場}}",
+          "unpublish_action": "從市場移除",
+          "title": "讓您的模板可被發現和識別。",
+          "name": {
+            "label": "模板名稱",
+            "placeholder": "為您的模板命名",
+            "validation": {
+              "required": "模板名稱為必填項",
+              "maxLength": "模板名稱應少於255個字符"
+            }
+          },
+          "short_description": {
+            "label": "簡短描述",
+            "placeholder": "此模板非常適合同時管理多個專案的專案經理。",
+            "validation": {
+              "required": "簡短描述為必填項"
+            }
+          },
+          "description": {
+            "label": "描述",
+            "placeholder": "通過我們的語音轉文字整合提高生產力並簡化溝通。\n• 即時轉錄：立即將口語轉換為準確的文字。\n• 任務和評論創建：通過語音命令添加任務、描述和評論。",
+            "validation": {
+              "required": "描述為必填項"
+            }
+          },
+          "category": {
+            "label": "類別",
+            "placeholder": "選擇您認為最適合的位置。您可以選擇多個。",
+            "validation": {
+              "required": "至少需要一個類別"
+            }
+          },
+          "keywords": {
+            "label": "關鍵字",
+            "placeholder": "使用您認為用戶在尋找此模板時會搜索的術語。",
+            "helperText": "輸入逗號分隔的關鍵詞，這些關鍵詞可能會幫助人們從搜索中找到此模板。",
+            "validation": {
+              "required": "至少需要一個關鍵詞"
+            }
+          },
+          "website": {
+            "label": "網站 URL",
+            "placeholder": "https://plane.so",
+            "validation": {
+              "invalid": "無效的 URL",
+              "maxLength": "URL 應少於 800 個字元"
+            }
+          },
+          "company_name": {
+            "label": "公司名稱",
+            "placeholder": "Plane",
+            "validation": {
+              "required": "公司名稱為必填項",
+              "maxLength": "公司名稱應少於255個字符"
+            }
+          },
+          "contact_email": {
+            "label": "支持電子郵件",
+            "placeholder": "help@plane.so",
+            "validation": {
+              "invalid": "無效的電子郵件地址",
+              "maxLength": "支持電子郵件應少於255個字符"
+            }
+          },
+          "privacy_policy_url": {
+            "label": "隱私政策連結",
+            "placeholder": "https://planes.so/privacy-policy",
+            "validation": {
+              "invalid": "無效的URL",
+              "maxLength": "URL應少於800個字符"
+            }
+          },
+          "terms_of_service_url": {
+            "label": "使用條款連結",
+            "placeholder": "https://planes.so/terms-of-use",
+            "validation": {
+              "invalid": "無效的URL",
+              "maxLength": "URL應少於800個字符"
+            }
+          },
+          "cover_image": {
+            "label": "添加將在市場中顯示的封面圖片",
+            "upload_title": "上傳封面圖片",
+            "upload_placeholder": "點擊上傳或拖放上傳封面圖片",
+            "drop_here": "拖放到這裡",
+            "click_to_upload": "點擊上傳",
+            "invalid_file_or_exceeds_size_limit": "無效的文件或超出大小限制。請重試。",
+            "upload_and_save": "上傳並保存",
+            "uploading": "上傳中",
+            "remove": "刪除",
+            "removing": "刪除中",
+            "validation": {
+              "required": "封面圖片為必填項"
+            }
+          },
+          "attach_screenshots": {
+            "label": "包含您認為會讓此模板的查看者感興趣的文檔和圖片。",
+            "validation": {
+              "required": "至少需要一張截圖"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "模板",
+        "description": "使用Plane中的專案、工作項目和頁面模板，您無需從頭創建專案或手動設置工作項目屬性。",
+        "sub_description": "使用模板可節省80%的管理時間。"
+      },
+      "no_templates": {
+        "button": "創建您的第一個模板"
+      },
+      "no_labels": {
+        "description": " 尚無標籤。創建標籤以幫助組織和篩選專案中的工作項目。"
+      },
+      "no_modules": {
+        "description": "尚無模組。將工作組織成具有專門負責人和受讓人的子專案。"
+      },
+      "no_work_items": {
+        "description": "尚無工作項目。添加一個以更好地組織您的工作。"
+      },
+      "no_sub_work_items": {
+        "description": "尚無子工作項目。添加一個以更好地組織您的工作。"
+      },
+      "page": {
+        "no_templates": {
+          "title": "您沒有訪問任何模板。",
+          "description": "請創建一個模板"
+        },
+        "no_results": {
+          "title": "沒有找到模板。",
+          "description": "嘗試使用其他術語搜索。"
+        }
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "模板已創建",
+          "message": "{templateName}，{templateType}模板，現已可用於您的workspace。"
+        },
+        "error": {
+          "title": "我們這次無法創建該模板。",
+          "message": "嘗試再次保存您的詳細信息或將它們複製到新模板中，最好在另一個標籤頁中。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "模板已更改",
+          "message": "{templateName}，{templateType}模板，已更改。"
+        },
+        "error": {
+          "title": "我們無法保存對此模板的更改。",
+          "message": "嘗試再次保存您的詳細信息或稍後返回此模板。如果仍有問題，請聯繫我們。"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "模板已刪除",
+          "message": "{templateName}，{templateType}模板，現已從您的workspace中刪除。"
+        },
+        "error": {
+          "title": "我們無法刪除該模板。",
+          "message": "嘗試再次刪除它或稍後再試。如果您仍然無法刪除它，請聯繫我們。"
+        }
+      },
+      "unpublish": {
+        "success": {
+          "title": "模板已移除",
+          "message": "{templateName}，{templateType}模板，已被移除。"
+        },
+        "error": {
+          "title": "我們無法移除該模板。",
+          "message": "嘗試再次移除它或稍後再試。如果您仍然無法移除它，請聯繫我們。"
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "刪除模板",
+      "description": {
+        "prefix": "您確定要刪除模板-",
+        "suffix": "嗎？與模板相關的所有數據將被永久移除。此操作無法撤銷。"
+      }
+    },
+    "unpublish_confirmation": {
+      "title": "移除模板",
+      "description": {
+        "prefix": "您確定要移除模板-",
+        "suffix": "嗎？此模板將不再在市場上供用戶使用。"
+      }
+    },
+    "dropdown": {
+      "add": {
+        "work_item": "新增範本",
+        "project": "新增範本"
+      },
+      "label": {
+        "project": "選擇專案範本",
+        "page": "從範本中選擇"
+      },
+      "tooltip": {
+        "work_item": "選擇工作項目範本"
+      },
+      "no_results": {
+        "work_item": "找不到範本。",
+        "project": "找不到範本。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/tour.json b/packages/i18n/src/locales/zh-TW/tour.json
new file mode 100644
index 0000000..f2599d4
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/tour.json
@@ -0,0 +1,195 @@
+{
+  "product_tour": {
+    "workitems": {
+      "step_zero": {
+        "title": "歡迎來到您的工作區",
+        "description": "為了幫助您開始，我們為您創建了一個演示項目。讓我們添加您的第一個工作項。"
+      },
+      "step_one": {
+        "title": "點擊「+添加工作項」",
+        "description": "首先點擊「+新建工作項」按鈕。您可以創建任務、錯誤或符合您需求的自定義類型。"
+      },
+      "step_two": {
+        "title": "篩選您的工作項",
+        "description": "使用篩選器快速縮小列表範圍。您可以按狀態、優先級或團隊成員進行篩選。 "
+      },
+      "step_three": {
+        "title": "根據需要查看、分組和排序工作項。",
+        "description": "查看所需屬性，並根據您的需求對工作項進行分組或排序。"
+      },
+      "step_four": {
+        "title": "按您的方式可視化",
+        "description": "選擇要在列表中查看的屬性。您還可以按自己的方式對工作項進行分組和排序。"
+      }
+    },
+    "cycle": {
+      "step_zero": {
+        "title": "使用週期取得進展",
+        "description": "按Q鍵創建週期。為其命名並設置日期—每個項目只有一個週期。"
+      },
+      "step_one": {
+        "title": "創建新週期",
+        "description": "按Q鍵創建週期。為其命名並設置日期—每個項目只有一個週期。"
+      },
+      "step_two": {
+        "title": "點擊「+」",
+        "description": "首先點擊「+」按鈕。直接從週期頁面添加新的或現有的工作項。"
+      },
+      "step_three": {
+        "title": "週期摘要",
+        "description": "跟踪週期進度、團隊生產力和優先事項—並調查是否有任何落後。"
+      },
+      "step_four": {
+        "title": "轉移工作項",
+        "description": "截止日期後，週期會自動完成。將未完成的工作移至另一個週期。"
+      }
+    },
+    "module": {
+      "step_zero": {
+        "title": "將項目分解為模塊",
+        "description": "模塊是較小的、集中的項目，幫助用戶在特定時間範圍內對工作項進行分組和組織。"
+      },
+      "step_one": {
+        "title": "創建模塊",
+        "description": "模塊是較小的、集中的項目，幫助用戶在特定時間範圍內對工作項進行分組和組織。"
+      },
+      "step_two": {
+        "title": "點擊「+」",
+        "description": "首先點擊「+」按鈕。直接從模塊頁面添加新的或現有的工作項。"
+      },
+      "step_three": {
+        "title": "模塊狀態",
+        "description": "模塊使用這些狀態來幫助用戶規劃並清楚地跟踪進度和階段。"
+      },
+      "step_four": {
+        "title": "模塊進度",
+        "description": "模塊進度通過已完成的項目進行跟踪，並提供分析以監控性能。"
+      }
+    },
+    "page": {
+      "step_zero": {
+        "title": "使用AI驅動的頁面進行文檔化",
+        "description": "Plane中的頁面讓您可以捕獲、組織和協作處理項目信息—無需外部工具。"
+      },
+      "step_one": {
+        "title": "將頁面設為公開或私密",
+        "description": "頁面可以設置為公開，對工作區中的所有人可見，或設置為私密，僅您可以訪問。"
+      },
+      "step_two": {
+        "title": "使用 / 命令",
+        "description": "在頁面上使用 / 從16種塊類型添加內容，包括列表、圖像、表格和嵌入。"
+      },
+      "step_three": {
+        "title": "頁面操作",
+        "description": "創建頁面後，您可以點擊右上角的•••菜單執行以下操作。"
+      },
+      "step_four": {
+        "title": "目錄",
+        "description": "點擊面板圖標查看所有標題，獲得頁面的鳥瞰圖。"
+      },
+      "step_five": {
+        "title": "版本歷史",
+        "description": "頁面通過版本歷史跟踪所有編輯，允許您在需要時恢復以前的版本。"
+      }
+    },
+    "intake": {
+      "step_zero": {
+        "title": "使用接收簡化請求",
+        "description": "Plane專有功能，允許訪客為錯誤、請求或工單創建工作項。"
+      },
+      "step_one": {
+        "title": "打開/關閉接收請求",
+        "description": "待處理的請求保留在「打開」標籤中，一旦由管理員或成員處理，它們將移至「關閉」。"
+      },
+      "step_two": {
+        "title": "接受/拒絕待處理請求",
+        "description": "接受以編輯工作項並將其移至您的項目，或拒絕以將其標記為已取消。"
+      },
+      "step_three": {
+        "title": "暫時推遲",
+        "description": "可以推遲工作項以便稍後查看。它將移至您的打開請求列表的底部。"
+      }
+    },
+    "mcp_connectors": {
+      "step_zero": {
+        "title": "停止切換分頁。連接您的世界。",
+        "description": "連結 GitHub、Slack 以直接在 Plane AI 中追蹤 PR 並摘要聊天內容。"
+      }
+    },
+    "navigation": {
+      "modal": {
+        "title": "導航，重新想像",
+        "sub_title": "您的工作區現在通過更智能、更簡化的導航更容易探索。",
+        "highlight_1": "簡化的左側面板結構，更快發現",
+        "highlight_2": "改進的全局搜索，立即跳轉到任何內容",
+        "highlight_3": "更智能的類別分組，清晰和專注",
+        "footer": "想要快速瀏覽嗎？"
+      },
+      "step_zero": {
+        "title": "即刻查找任何內容",
+        "description": "使用通用搜索跳轉到任務、項目、頁面和人員—不離開您的流程。"
+      },
+      "step_one": {
+        "title": "掌控更新",
+        "description": "您的收件箱將所有提及、批准和活動保存在一個地方，因此您永遠不會錯過重要的工作。"
+      },
+      "step_two": {
+        "title": "個性化您的導航",
+        "description": "在首選項中自定義您看到的內容以及導航方式。"
+      }
+    },
+    "actions": {
+      "close": "關閉",
+      "next": "下一步",
+      "back": "返回",
+      "done": "完成",
+      "take_a_tour": "瀏覽",
+      "get_started": "開始",
+      "got_it": "知道了"
+    },
+    "seed_data": {
+      "title": "這是您的演示項目",
+      "description": "項目讓您可以管理團隊、任務以及在工作區中完成工作所需的一切。"
+    }
+  },
+  "get_started": {
+    "title": "你好 {name}，歡迎！",
+    "description": "這是您開始Plane之旅所需的一切。",
+    "checklist_section": {
+      "title": "開始",
+      "description": "開始設置，看到您的想法更快地變為現實。",
+      "checklist_items": {
+        "item_1": {
+          "title": "創建項目"
+        },
+        "item_2": {
+          "title": "創建工作項"
+        },
+        "item_3": {
+          "title": "邀請團隊成員"
+        },
+        "item_4": {
+          "title": "創建頁面"
+        },
+        "item_5": {
+          "title": "試用Plane AI聊天"
+        },
+        "item_6": {
+          "title": "鏈接集成"
+        }
+      }
+    },
+    "team_section": {
+      "title": "邀請您的團隊",
+      "description": "邀請隊友並開始一起構建。"
+    },
+    "integrations_section": {
+      "title": "增強您的工作區",
+      "more_integrations": "瀏覽更多集成"
+    },
+    "switch_to_plane_section": {
+      "title": "了解團隊為何切換到Plane",
+      "description": "將Plane與您今天使用的工具進行比較，看看差異。"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/update.json b/packages/i18n/src/locales/zh-TW/update.json
new file mode 100644
index 0000000..04bfa1e
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/update.json
@@ -0,0 +1,69 @@
+{
+  "updates": {
+    "progress": {
+      "title": "進度",
+      "since_last_update": "自最後更新以來",
+      "comments": "{count, plural, one{# 評論} other{# 評論}}"
+    },
+    "add_update": "新增更新",
+    "add_update_placeholder": "在此輸入您的更新",
+    "empty": {
+      "title": "尚無更新",
+      "description": "您可以在此查看更新。"
+    },
+    "reaction": {
+      "create": {
+        "success": {
+          "title": "反應已創建",
+          "message": "反應已成功創建。"
+        },
+        "error": {
+          "title": "反應未創建",
+          "message": "反應未創建。"
+        }
+      },
+      "remove": {
+        "success": {
+          "title": "反應已移除",
+          "message": "反應已成功移除。"
+        },
+        "error": {
+          "title": "反應未移除",
+          "message": "反應未移除。"
+        }
+      }
+    },
+    "create": {
+      "success": {
+        "title": "更新已創建",
+        "message": "更新已成功創建。"
+      },
+      "error": {
+        "title": "更新未創建",
+        "message": "更新未創建。"
+      }
+    },
+    "delete": {
+      "title": "刪除更新",
+      "confirmation": "您確定要刪除此更新嗎？此操作是不可逆的。",
+      "success": {
+        "title": "更新已刪除",
+        "message": "更新已成功刪除。"
+      },
+      "error": {
+        "title": "更新未刪除",
+        "message": "更新未刪除。"
+      }
+    },
+    "update": {
+      "success": {
+        "title": "更新已更新",
+        "message": "更新已成功更新。"
+      },
+      "error": {
+        "title": "更新未更新",
+        "message": "更新未更新。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/wiki.json b/packages/i18n/src/locales/zh-TW/wiki.json
new file mode 100644
index 0000000..e53c9ae
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/wiki.json
@@ -0,0 +1,113 @@
+{
+  "wiki_collections": {
+    "predefined": {
+      "general": "一般",
+      "private": "私人",
+      "shared": "已分享",
+      "archived": "已封存"
+    },
+    "fallback_name": "集合",
+    "form": {
+      "name_required": "集合標題為必填",
+      "name_max_length": "集合名稱必須少於 255 個字元",
+      "name_placeholder_create": "為集合輸入標題",
+      "name_placeholder_edit": "集合名稱"
+    },
+    "create_modal": {
+      "title": "建立集合",
+      "submit": "建立集合"
+    },
+    "edit_modal": {
+      "title": "編輯集合"
+    },
+    "delete_modal": {
+      "title": "刪除集合",
+      "page_count": "此集合有 {pageCount} 個頁面。請選擇要如何處理它們。",
+      "transfer_title": "轉移頁面並刪除集合",
+      "transfer_description": "刪除前，請先將所有頁面移到另一個集合。頁面及其權限將會保留。",
+      "transfer_warning": "移動後的頁面將繼承所選集合的權限。",
+      "transfer_target_label": "將頁面移動到",
+      "transfer_target_placeholder": "選擇集合",
+      "delete_with_pages_title": "連同頁面一起刪除集合",
+      "delete_with_pages_description": "永久刪除集合及其所有頁面。此操作無法還原。",
+      "submit": "刪除集合"
+    },
+    "header": {
+      "add_page": "新增頁面"
+    },
+    "menu": {
+      "create_new_page": "建立新頁面",
+      "add_existing_page": "新增現有頁面",
+      "edit_collection": "編輯集合",
+      "collection_options": "集合選項"
+    },
+    "add_existing_page_modal": {
+      "search_placeholder": "搜尋頁面",
+      "success_message": "已將 {count} 個頁面加入集合。",
+      "error_message": "無法移動頁面。請再試一次。",
+      "no_pages_found": "找不到符合搜尋條件的頁面",
+      "no_pages_available": "沒有可移動的頁面",
+      "submit": "移動"
+    },
+    "list": {
+      "invite_only": "僅限邀請",
+      "remove_error": "無法將頁面從集合中移除。",
+      "no_matching_pages": "沒有符合的頁面",
+      "remove_search_criteria": "移除搜尋條件以查看所有頁面",
+      "remove_filters": "移除篩選條件以查看所有頁面",
+      "no_pages_title": "尚無頁面",
+      "no_pages_description": "此集合目前沒有任何頁面。",
+      "untitled": "未命名",
+      "restricted_access": "受限存取",
+      "collapse_page": "收合頁面",
+      "expand_page": "展開頁面",
+      "page_actions": "頁面操作",
+      "page_link_copied": "頁面連結已複製到剪貼簿。",
+      "columns": {
+        "page_name": "頁面名稱",
+        "owner": "擁有者",
+        "nested_pages": "巢狀頁面",
+        "last_activity": "最後活動",
+        "actions": "操作"
+      }
+    },
+    "toasts": {
+      "created": "集合建立成功。",
+      "create_error": "無法建立集合。請再試一次。",
+      "renamed": "集合重新命名成功。",
+      "rename_error": "無法更新集合。請再試一次。",
+      "transferred_deleted": "頁面已轉移，集合已刪除。",
+      "deleted_with_pages": "集合及其頁面已刪除。",
+      "delete_error": "無法刪除集合。請再試一次。",
+      "target_required": "請選擇要將頁面移動到的集合。",
+      "create_page_error": "無法建立頁面。請再試一次。",
+      "create_page_in_collection_error": "無法建立頁面或將其加入集合。請再試一次。",
+      "collection_link_copied": "集合連結已複製到剪貼簿。"
+    }
+  },
+  "wiki": {
+    "upgrade_flow": {
+      "title": "升級以解鎖 Wiki",
+      "description": "透過 Plane Pro 解鎖公開頁面、版本歷史、共享頁面、即時協作，以及用於 Wiki、公司文件和知識庫的工作區頁面。",
+      "upgrade_button": {
+        "text": "升級"
+      },
+      "learn_more_button": {
+        "text": "了解更多"
+      },
+      "download_button": {
+        "text": "下載資料",
+        "loading": "下載中"
+      },
+      "tabs": {
+        "nested_pages": "巢狀頁面",
+        "add_embeds": "新增嵌入內容",
+        "publish_pages": "發佈頁面",
+        "comments": "留言"
+      }
+    },
+    "nested_pages_download_banner": {
+      "title": "巢狀頁面需要付費方案。升級以解鎖。"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/work-item-type.json b/packages/i18n/src/locales/zh-TW/work-item-type.json
new file mode 100644
index 0000000..c58d617
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/work-item-type.json
@@ -0,0 +1,477 @@
+{
+  "work_item_types": {
+    "label": "工作項目類型",
+    "label_lowercase": "工作項目類型",
+    "settings": {
+      "description": "自訂並新增您自己的屬性，以符合您團隊的需求。",
+      "cant_delete_default_message": "無法刪除此工作項目類型，因為它已設置為該專案的預設類型。",
+      "set_as_default": "設為預設",
+      "cant_set_default_inactive_message": "請先啟用此類型再將其設為預設",
+      "set_default_confirmation": {
+        "title": "設為預設工作項目類型",
+        "description": "將 {name} 設為預設後，它將被匯入到此工作區的所有專案中。所有新工作項目將預設使用此類型。",
+        "confirm_button": "設為預設"
+      },
+      "properties": {
+        "title": "自定義屬性",
+        "description": "建立和自訂屬性。",
+        "tooltip": "每種工作項目類型都有一組默認屬性，如標題、描述、負責人、狀態、優先級、開始日期、截止日期、模塊、週期等。您還可以自定義並添加自己的屬性，以適應您團隊的需求。",
+        "add_button": "添加新屬性",
+        "project": {
+          "add_button": {
+            "import_from_workspace": "從工作區匯入"
+          }
+        },
+        "dropdown": {
+          "label": "屬性類型",
+          "placeholder": "選擇類型"
+        },
+        "property_type": {
+          "text": {
+            "label": "文字"
+          },
+          "number": {
+            "label": "數字"
+          },
+          "dropdown": {
+            "label": "下拉選單"
+          },
+          "boolean": {
+            "label": "布林值"
+          },
+          "date": {
+            "label": "日期"
+          },
+          "member_picker": {
+            "label": "成員選擇器"
+          },
+          "formula": {
+            "label": "公式"
+          }
+        },
+        "attributes": {
+          "label": "屬性",
+          "text": {
+            "single_line": {
+              "label": "單行"
+            },
+            "multi_line": {
+              "label": "段落"
+            },
+            "readonly": {
+              "label": "僅讀",
+              "header": "僅讀數據"
+            },
+            "invalid_text_format": {
+              "label": "無效的文字格式"
+            }
+          },
+          "number": {
+            "default": {
+              "placeholder": "添加數字"
+            }
+          },
+          "relation": {
+            "single_select": {
+              "label": "單選"
+            },
+            "multi_select": {
+              "label": "多選"
+            },
+            "no_default_value": {
+              "label": "無默認值"
+            }
+          },
+          "boolean": {
+            "label": "真 | 假",
+            "no_default": "無默認值"
+          },
+          "option": {
+            "create_update": {
+              "label": "選項",
+              "form": {
+                "placeholder": "添加選項",
+                "errors": {
+                  "name": {
+                    "required": "選項名稱是必填的。",
+                    "integrity": "已存在同名選項。"
+                  }
+                }
+              }
+            },
+            "select": {
+              "placeholder": {
+                "single": "選擇選項",
+                "multi": {
+                  "default": "選擇選項",
+                  "variable": "已選擇 {count} 個選項"
+                }
+              }
+            }
+          }
+        },
+        "toast": {
+          "create": {
+            "success": {
+              "title": "成功！",
+              "message": "屬性 {name} 已成功創建。"
+            },
+            "error": {
+              "title": "錯誤！",
+              "message": "創建屬性失敗。請再試一次！"
+            }
+          },
+          "update": {
+            "success": {
+              "title": "成功！",
+              "message": "屬性 {name} 已成功更新。"
+            },
+            "error": {
+              "title": "錯誤！",
+              "message": "更新屬性失敗。請再試一次！"
+            }
+          },
+          "delete": {
+            "success": {
+              "title": "成功！",
+              "message": "屬性 {name} 已成功刪除。"
+            },
+            "error": {
+              "title": "錯誤！",
+              "message": "刪除屬性失敗。請再試一次！"
+            }
+          },
+          "enable_disable": {
+            "loading": "{action} {name} 屬性",
+            "success": {
+              "title": "成功！",
+              "message": "屬性 {name} 已成功{action}。"
+            },
+            "error": {
+              "title": "錯誤！",
+              "message": "{action}屬性失敗。請再試一次！"
+            }
+          }
+        },
+        "create_update": {
+          "title": {
+            "create": "建立新自訂屬性",
+            "update": "更新自訂屬性"
+          },
+          "form": {
+            "display_name": {
+              "placeholder": "標題"
+            },
+            "description": {
+              "placeholder": "描述"
+            }
+          },
+          "errors": {
+            "name": {
+              "required": "您必須為您的屬性命名。",
+              "max_length": "屬性名稱不應超過255個字符。"
+            },
+            "property_type": {
+              "required": "您必須選擇一個屬性類型。"
+            },
+            "options": {
+              "required": "您必須添加至少一個選項。"
+            },
+            "formula": {
+              "required": "公式表達式為必填。",
+              "invalid": "無效的公式：{error}",
+              "circular_reference": "偵測到循環參照。公式不能直接或間接參照自身。",
+              "invalid_reference": "公式參照了不存在的屬性。"
+            }
+          }
+        },
+        "formula": {
+          "field_label": "公式欄位",
+          "tooltip": "使用 '{'欄位名稱'}' 語法輸入公式。支援 +、-、*、/ 和 & 運算子。",
+          "placeholder": "編寫公式",
+          "test_button": "測試",
+          "validating": "驗證中",
+          "validation_success": "公式有效！回傳 {resultType}",
+          "validation_success_with_refs": "公式有效！回傳 {resultType}（參照了 {count} 個欄位）",
+          "error": {
+            "empty": "請輸入公式",
+            "missing_context": "缺少工作空間、專案或工作項目類型上下文",
+            "validation_failed": "驗證失敗"
+          },
+          "picker": {
+            "no_match": "沒有相符的屬性",
+            "no_available": "沒有可用的屬性"
+          }
+        },
+        "enable_disable": {
+          "label": "活躍",
+          "tooltip": {
+            "disabled": "點擊以禁用",
+            "enabled": "點擊以啟用"
+          }
+        },
+        "delete_confirmation": {
+          "title": "刪除此屬性",
+          "description": "刪除屬性可能導致現有數據丟失。",
+          "secondary_description": "您是否想要禁用屬性代替刪除？",
+          "primary_button": "{action}，刪除它",
+          "secondary_button": "是的，禁用它"
+        },
+        "mandate_confirmation": {
+          "label": "必填屬性",
+          "content": "此屬性似乎有一個默認選項。將屬性設為必填將移除默認值，用戶必須添加他們選擇的值。",
+          "tooltip": {
+            "disabled": "此屬性類型不能設為必填",
+            "enabled": "取消勾選以將字段標記為可選",
+            "checked": "勾選以將字段標記為必填"
+          }
+        },
+        "empty_state": {
+          "title": "添加自定義屬性",
+          "description": "您為此工作項目類型添加的新屬性將顯示在此處。"
+        }
+      },
+      "types": {
+        "title": "類型",
+        "description": "建立和自訂具有屬性的工作事項類型。",
+        "sort_options": {
+          "project_count": "參與專案的數量"
+        },
+        "filter_options": {
+          "show_active": "顯示啟用中",
+          "show_inactive": "顯示停用中"
+        },
+        "project": {
+          "add_button": {
+            "create_new": "建立新的",
+            "import_from_workspace": "從工作區匯入"
+          },
+          "banner": {
+            "with_access": "啟用工作事項類型以從工作區層級匯入類型",
+            "without_access": "工作事項類型已停用。請聯絡工作區管理員在工作區設定中啟用。"
+          }
+        }
+      },
+      "linked_properties": {
+        "title": "自訂屬性",
+        "add_button": "新增屬性",
+        "modal": {
+          "title": "新增屬性",
+          "empty": {
+            "title": "沒有可用的屬性",
+            "description": "所有屬性都已連結到此類型。"
+          }
+        },
+        "unlink_confirmation": {
+          "title": "取消連結屬性",
+          "description": "取消連結此屬性將永久刪除使用此類型的每個工作事項中的所有值。此操作無法還原。",
+          "input_label": "輸入",
+          "input_label_suffix": "以繼續：",
+          "confirm": "取消連結屬性",
+          "loading": "取消連結中"
+        }
+      },
+      "item_delete_confirmation": {
+        "title": "刪除此類型",
+        "description": "刪除類型可能會導致現有資料遺失。",
+        "can_disable_warning": "您想改為停用此類型嗎？",
+        "primary_button": "是的，刪除它",
+        "toast": {
+          "success": {
+            "title": "成功！",
+            "message": "工作項目類型已成功刪除。"
+          },
+          "error": {
+            "title": "錯誤！",
+            "message": "刪除工作項目類型失敗。請再試一次！"
+          }
+        },
+        "errors": {
+          "cannot_delete_default_work_item_type": "無法刪除預設工作項目類型",
+          "cannot_delete_work_item_type_with_associated_work_items": "無法刪除具有關聯工作項目的工作項目類型"
+        }
+      }
+    },
+    "create": {
+      "title": "創建工作項目類型",
+      "button": "添加工作項目類型",
+      "toast": {
+        "success": {
+          "title": "成功！",
+          "message": "工作項目類型已成功創建。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": {
+            "default": "建立工作事項類型失敗。請再試一次！",
+            "conflict": "{name} 類型已存在。請選擇其他名稱。"
+          }
+        }
+      }
+    },
+    "update": {
+      "title": "更新工作項目類型",
+      "button": "更新工作項目類型",
+      "toast": {
+        "success": {
+          "title": "成功！",
+          "message": "工作項目類型 {name} 已成功更新。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": {
+            "default": "更新工作事項類型失敗。請再試一次！",
+            "conflict": "{name} 類型已存在。請選擇其他名稱。"
+          }
+        }
+      }
+    },
+    "create_update": {
+      "form": {
+        "name": {
+          "placeholder": "為此工作項目類型提供一個獨特的名稱"
+        },
+        "description": {
+          "placeholder": "描述此工作項目類型的用途以及何時使用。"
+        }
+      }
+    },
+    "enable_disable": {
+      "toast": {
+        "loading": "{action} {name} 工作項目類型",
+        "success": {
+          "title": "成功！",
+          "message": "工作項目類型 {name} 已成功{action}。"
+        },
+        "error": {
+          "title": "錯誤！",
+          "message": "{action}工作項目類型失敗。請再試一次！"
+        }
+      },
+      "tooltip": "點擊以{action}"
+    },
+    "change_confirmation": {
+      "title": "更改工作項目類型？",
+      "description": "更改工作項目類型可能會導致丟失特定於當前類型的自定義屬性值。此操作無法撤銷。",
+      "button": {
+        "loading": "更改中",
+        "default": "更改類型"
+      }
+    },
+    "empty_state": {
+      "enable": {
+        "title": "啟用工作項目類型",
+        "description": "使用工作項目類型為您的工作塑造工作項目。使用圖標、背景和屬性自定義它們，並為此專案配置它們。",
+        "primary_button": {
+          "text": "啟用"
+        },
+        "confirmation": {
+          "title": "一旦啟用，工作項目類型不能被禁用。",
+          "description": "Plane的工作項目將成為此專案的默認工作項目類型，並將在此專案中顯示其圖標和背景。",
+          "button": {
+            "default": "啟用",
+            "loading": "設置中"
+          }
+        }
+      },
+      "get_pro": {
+        "title": "獲取專業版以啟用工作項目類型。",
+        "description": "使用工作項目類型為您的工作塑造工作項目。使用圖標、背景和屬性自定義它們，並為此專案配置它們。",
+        "primary_button": {
+          "text": "獲取專業版"
+        }
+      },
+      "upgrade": {
+        "title": "升級以啟用工作項目類型。",
+        "description": "使用工作項目類型為您的工作塑造工作項目。使用圖標、背景和屬性自定義它們，並為此專案配置它們。",
+        "primary_button": {
+          "text": "升級"
+        }
+      }
+    }
+  },
+  "work_item_type_hierarchy": {
+    "settings": {
+      "title": "層級",
+      "tab_label": "層級",
+      "description": "設定層級結構以整理您的工作。每個層級定義與直接上方項目的父關係，以及與直接下方項目的子關係。 ",
+      "sidebar_label": "層級",
+      "enable_control": {
+        "title": "啟用層級",
+        "description": "在不同工作項目類型之間建立父子關係。",
+        "tooltip": "層級一旦啟用便無法停用。"
+      },
+      "workspace_work_item_types_disabled_banner": {
+        "content": "請先定義工作項目類型，再建立新的層級。",
+        "cta": "工作項目類型設定"
+      }
+    },
+    "levels": {
+      "max_level_placeholder": "拖放類型以新增階層",
+      "empty_level_placeholder": "將工作項目類型拖放到第 {level} 層",
+      "drag_tooltip": "拖曳以變更層級",
+      "quick_actions": {
+        "set_as_default": {
+          "label": "設為預設",
+          "toast": {
+            "loading": "正在設為預設...",
+            "success": {
+              "title": "成功！",
+              "message": "層級 {level} 已成功設為預設。"
+            },
+            "error": {
+              "title": "錯誤！",
+              "message": "無法將層級 {level} 設為預設，請重試。"
+            }
+          }
+        }
+      },
+      "update_level_toast": {
+        "loading": "正在將 {workItemTypeName} 移至層級 {level}...",
+        "success": {
+          "title": "成功！",
+          "message": "{workItemTypeName} 已成功移至層級 {level}。"
+        }
+      }
+    },
+    "break_hierarchy_modal": {
+      "title": "儲存後將中斷現有連結",
+      "content": {
+        "intro": "工作項目類型 {workItemTypeName} 包含：",
+        "parent_items": "{count, plural, other {將清除 # 個父層連結}}。",
+        "child_items": "{count, plural, other {個子工作項目}}",
+        "parent_line_suffix_when_also_children": "，以及 ",
+        "footer": "此變更將從 {workItemTypeName} 工作項目類型的現有工作項目中移除父子關係。"
+      },
+      "confirm_input": {
+        "label": "請輸入「確認」以繼續。",
+        "placeholder": "確認"
+      },
+      "error_toast": {
+        "title": "錯誤！",
+        "message": "解除連結並儲存失敗，請再試一次。"
+      },
+      "confirm_button": {
+        "loading": "正在儲存",
+        "default": "仍要儲存"
+      }
+    },
+    "work_item_modal": {
+      "invalid_work_item_type_create_toast": {
+        "title": "錯誤！",
+        "message": "所選工作項目類型違反層級規則，無法用於建立新的工作項目。"
+      },
+      "invalid_work_item_type_update_toast": {
+        "title": "錯誤！",
+        "message": "工作項目類型因違反層級規則而無法更新。"
+      }
+    },
+    "work_item_type_modal": {
+      "level": "層級",
+      "invalid_level_toast": {
+        "title": "錯誤！",
+        "message": "工作項目類型無法更新，因為它違反了層級規則。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/work-item.json b/packages/i18n/src/locales/zh-TW/work-item.json
new file mode 100644
index 0000000..4d59f7b
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/work-item.json
@@ -0,0 +1,432 @@
+{
+  "issue": {
+    "label": "{count, plural, one {工作事項} other {工作事項}}",
+    "all": "所有工作事項",
+    "edit": "編輯工作事項",
+    "title": {
+      "label": "工作事項標題",
+      "required": "工作事項標題為必填。"
+    },
+    "add": {
+      "press_enter": "按 'Enter' 以新增另一個工作事項",
+      "label": "新增工作事項",
+      "cycle": {
+        "failed": "無法將工作事項新增到週期。請再試一次。",
+        "success": "{count, plural, one {工作事項} other {工作事項}} 已成功新增到週期。",
+        "loading": "正在將 {count, plural, one {工作事項} other {工作事項}} 新增到週期"
+      },
+      "assignee": "新增指派對象",
+      "start_date": "新增開始日期",
+      "due_date": "新增截止日期",
+      "parent": "新增父工作事項",
+      "sub_issue": "新增子工作事項",
+      "dependency": "新增相依性",
+      "relation": "新增關聯",
+      "link": "新增連結",
+      "existing": "新增現有工作事項"
+    },
+    "remove": {
+      "label": "移除工作事項",
+      "cycle": {
+        "loading": "正在從週期移除工作事項",
+        "success": "已成功從週期移除工作事項。",
+        "failed": "無法從週期移除工作事項。請再試一次。"
+      },
+      "module": {
+        "loading": "正在從模組移除工作事項",
+        "success": "已成功從模組移除工作事項。",
+        "failed": "無法從模組移除工作事項。請再試一次。"
+      },
+      "parent": {
+        "label": "移除父工作事項"
+      }
+    },
+    "new": "新工作事項",
+    "adding": "新增工作事項中",
+    "create": {
+      "success": "工作事項建立成功"
+    },
+    "priority": {
+      "urgent": "緊急",
+      "high": "高",
+      "medium": "中",
+      "low": "低"
+    },
+    "display": {
+      "properties": {
+        "label": "顯示屬性",
+        "id": "ID",
+        "issue_type": "工作事項類型",
+        "sub_issue_count": "子工作事項數量",
+        "attachment_count": "附件數量",
+        "created_on": "建立於",
+        "sub_issue": "子工作事項",
+        "work_item_count": "工作事項數量"
+      },
+      "extra": {
+        "show_sub_issues": "顯示子工作事項",
+        "show_empty_groups": "顯示空群組"
+      }
+    },
+    "layouts": {
+      "ordered_by_label": "此版面配置依據以下條件排序",
+      "list": "清單",
+      "kanban": "看板",
+      "calendar": "日曆",
+      "spreadsheet": "試算表",
+      "gantt": "甘特圖",
+      "title": {
+        "list": "清單版面配置",
+        "kanban": "看板版面配置",
+        "calendar": "日曆版面配置",
+        "spreadsheet": "試算表版面配置",
+        "gantt": "甘特圖版面配置"
+      }
+    },
+    "states": {
+      "active": "使用中",
+      "backlog": "待辦事項"
+    },
+    "comments": {
+      "placeholder": "新增留言",
+      "switch": {
+        "private": "切換為私人留言",
+        "public": "切換為公開留言"
+      },
+      "create": {
+        "success": "留言建立成功",
+        "error": "留言建立失敗。請稍後再試。"
+      },
+      "update": {
+        "success": "留言更新成功",
+        "error": "留言更新失敗。請稍後再試。"
+      },
+      "remove": {
+        "success": "留言移除成功",
+        "error": "留言移除失敗。請稍後再試。"
+      },
+      "upload": {
+        "error": "資產上傳失敗。請稍後再試。"
+      },
+      "copy_link": {
+        "success": "評論連結已複製到剪貼簿",
+        "error": "複製評論連結時出錯。請稍後再試。"
+      },
+      "replies": {
+        "create": {
+          "submit_button": "新增回覆",
+          "placeholder": "新增回覆"
+        },
+        "toast": {
+          "fetch": {
+            "error": {
+              "message": "取得回覆失敗"
+            }
+          },
+          "create": {
+            "success": {
+              "message": "回覆建立成功"
+            },
+            "error": {
+              "message": "建立回覆失敗"
+            }
+          },
+          "update": {
+            "success": {
+              "message": "回覆更新成功"
+            },
+            "error": {
+              "message": "更新回覆失敗"
+            }
+          },
+          "delete": {
+            "success": {
+              "message": "回覆刪除成功"
+            },
+            "error": {
+              "message": "刪除回覆失敗"
+            }
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "工作事項不存在",
+        "description": "您尋找的工作事項不存在、已封存或已刪除。",
+        "primary_button": {
+          "text": "檢視其他工作事項"
+        }
+      }
+    },
+    "sibling": {
+      "label": "同層級工作事項"
+    },
+    "archive": {
+      "description": "只有已完成或取消的\n工作事項可以封存",
+      "label": "封存工作事項",
+      "confirm_message": "您確定要封存工作事項嗎？所有已封存的工作事項稍後都可以還原。",
+      "success": {
+        "label": "封存成功",
+        "message": "您的封存可以在專案封存中找到。"
+      },
+      "failed": {
+        "message": "無法封存工作事項。請再試一次。"
+      },
+      "banner_message": "此工作事項已封存。請前往封存區段以還原它。",
+      "go_to_archives": "前往封存"
+    },
+    "restore": {
+      "success": {
+        "title": "還原成功",
+        "message": "您的工作事項可以在專案工作事項中找到。"
+      },
+      "failed": {
+        "message": "無法還原工作事項。請再試一次。"
+      }
+    },
+    "relation": {
+      "relates_to": "與此相關",
+      "duplicate": "此項重複",
+      "blocked_by": "被此阻礙",
+      "blocking": "阻礙此項",
+      "start_before": "在之前開始",
+      "start_after": "在之後開始",
+      "finish_before": "在之前完成",
+      "finish_after": "在之後完成",
+      "implements": "實現",
+      "implemented_by": "實現者"
+    },
+    "copy_link": "複製工作事項連結",
+    "delete": {
+      "label": "刪除工作事項",
+      "error": "刪除工作事項時發生錯誤"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "已成功訂閱工作事項",
+        "unsubscribed": "已成功取消訂閱工作事項"
+      }
+    },
+    "select": {
+      "error": "請至少選擇一個工作事項",
+      "empty": "未選擇工作事項",
+      "add_selected": "新增已選取的工作事項",
+      "select_all": "全選",
+      "deselect_all": "取消全選"
+    },
+    "open_in_full_screen": "以全螢幕開啟工作事項",
+    "duplicate": {
+      "modal": {
+        "title": "複製到另一個專案",
+        "description1": "此操作將建立此工作事項的副本。",
+        "description2": "複製時所有屬性資料都將被移除。",
+        "placeholder": "選擇專案"
+      }
+    },
+    "toast": {
+      "duplicate": {
+        "success": {
+          "message": "工作事項複製成功"
+        },
+        "error": {
+          "message": "工作事項複製失敗"
+        }
+      }
+    },
+    "pages": {
+      "link_pages": "連結頁面",
+      "show_wiki_pages": "顯示 Wiki 頁面",
+      "link_pages_to": "連結頁面至",
+      "linked_pages": "已連結的頁面",
+      "no_description": "這是一個空白頁面。何不在裡面寫點什麼，就像這個佔位符一樣顯示在這裡",
+      "toasts": {
+        "link": {
+          "success": {
+            "title": "頁面已更新",
+            "message": "頁面更新成功"
+          },
+          "error": {
+            "title": "頁面更新失敗",
+            "message": "頁面更新失敗"
+          }
+        },
+        "remove": {
+          "success": {
+            "title": "頁面已移除",
+            "message": "頁面移除成功"
+          },
+          "error": {
+            "title": "頁面移除失敗",
+            "message": "頁面移除失敗"
+          }
+        }
+      }
+    },
+    "vote": {
+      "click_to_upvote": "點擊贊成",
+      "click_to_downvote": "點擊反對",
+      "click_to_view_upvotes": "點擊查看贊成票",
+      "click_to_view_downvotes": "點擊查看反對票"
+    }
+  },
+  "sub_work_item": {
+    "update": {
+      "success": "子工作事項更新成功",
+      "error": "更新子工作事項時發生錯誤"
+    },
+    "remove": {
+      "success": "子工作事項移除成功",
+      "error": "移除子工作事項時發生錯誤"
+    },
+    "empty_state": {
+      "sub_list_filters": {
+        "title": "您沒有符合您應用過的過濾器的子工作事項。",
+        "description": "要查看所有子工作事項，請清除所有應用過的過濾器。",
+        "action": "清除過濾器"
+      },
+      "list_filters": {
+        "title": "您沒有符合您應用過的過濾器的工作事項。",
+        "description": "要查看所有工作事項，請清除所有應用過的過濾器。",
+        "action": "清除過濾器"
+      }
+    }
+  },
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "找不到符合的工作事項"
+      },
+      "no_issues": {
+        "title": "找不到工作事項"
+      }
+    }
+  },
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "尚無留言",
+        "description": "留言可用作工作事項的討論和後續追蹤空間"
+      }
+    }
+  },
+  "bulk_operations": {
+    "error_details": {
+      "invalid_archive_state_group": {
+        "title": "無法歸檔工作項目",
+        "message": "只有屬於已完成或已取消狀態組的工作項目可以被歸檔。"
+      },
+      "invalid_issue_start_date": {
+        "title": "無法更新工作項目",
+        "message": "選擇的開始日期晚於某些工作項目的截止日期。請確保開始日期早於截止日期。"
+      },
+      "invalid_issue_target_date": {
+        "title": "無法更新工作項目",
+        "message": "選擇的截止日期早於某些工作項目的開始日期。請確保截止日期晚於開始日期。"
+      },
+      "invalid_state_transition": {
+        "title": "無法更新工作項目",
+        "message": "某些工作項目不允許狀態變更。請確保狀態變更是允許的。"
+      }
+    },
+    "upgrade_banner": {
+      "message": "一次性變更多個工作事項的狀態、優先順序等。平均每次操作可節省三分鐘。",
+      "cta": "升級到 One"
+    }
+  },
+  "recurring_work_items": {
+    "settings": {
+      "heading": "重複工作項目",
+      "description": "設定一次重複工作，我們將處理重複。當需要時，您將在此處看到所有內容。",
+      "new_recurring_work_item": "新增重複工作項目",
+      "update_recurring_work_item": "更新重複工作項目",
+      "form": {
+        "interval": {
+          "title": "排程",
+          "start_date": {
+            "validation": {
+              "required": "開始日期為必填"
+            }
+          },
+          "interval_type": {
+            "validation": {
+              "required": "間隔類型為必填"
+            }
+          }
+        },
+        "button": {
+          "create": "建立重複工作項目",
+          "update": "更新重複工作項目"
+        }
+      },
+      "create_button": {
+        "label": "建立重複工作項目",
+        "no_permission": "請聯繫您的專案管理員以建立重複工作項目"
+      }
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "自動化您的工作",
+        "description": "只需設定一次，到期時我們會自動為您建立。升級至商業版，讓重複工作變得輕鬆無憂。"
+      },
+      "no_templates": {
+        "button": "建立您的第一個重複工作項目"
+      }
+    },
+    "toasts": {
+      "create": {
+        "success": {
+          "title": "已建立重複工作項目",
+          "message": "{name}，該重複工作項目，現已在您的工作區中可用。"
+        },
+        "error": {
+          "title": "本次無法建立該重複工作項目。",
+          "message": "請再試一次儲存您的資訊，或將其複製到新的重複工作項目中，建議在其他分頁操作。"
+        }
+      },
+      "update": {
+        "success": {
+          "title": "重複工作項目已變更",
+          "message": "{name}，該重複工作項目，已被變更。"
+        },
+        "error": {
+          "title": "無法儲存該重複工作項目的變更。",
+          "message": "請再試一次儲存您的資訊，或稍後再回來變更該重複工作項目。如果仍有問題，請聯繫我們。"
+        }
+      },
+      "delete": {
+        "success": {
+          "title": "已刪除重複工作項目",
+          "message": "{name}，該重複工作項目，已從您的工作區中刪除。"
+        },
+        "error": {
+          "title": "無法刪除該重複工作項目。",
+          "message": "請再試一次刪除，或稍後再試。如果仍無法刪除，請聯繫我們。"
+        }
+      }
+    },
+    "delete_confirmation": {
+      "title": "刪除重複工作項目",
+      "description": {
+        "prefix": "您確定要刪除重複工作項目-",
+        "suffix": "嗎？與該重複工作項目相關的所有資料將被永久移除。此操作無法撤銷。"
+      }
+    }
+  },
+  "epic": {
+    "new": "新 Epic",
+    "label": "{count, plural, one {Epic} other {Epic}}",
+    "adding": "新增 Epic 中",
+    "create": {
+      "success": "Epic 建立成功"
+    },
+    "add": {
+      "label": "新增 Epic",
+      "press_enter": "按 'Enter' 以新增另一個 Epic"
+    },
+    "title": {
+      "label": "Epic 標題",
+      "required": "Epic 標題為必填。"
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/workflow.json b/packages/i18n/src/locales/zh-TW/workflow.json
new file mode 100644
index 0000000..bac5b3f
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/workflow.json
@@ -0,0 +1,100 @@
+{
+  "workflows": {
+    "workflow_states": {
+      "work_item_creation": "允許新工作項目",
+      "work_item_creation_disable_tooltip": "此狀態已禁用工作項目創建",
+      "default_state": "默認狀態允許所有成員創建新工作項目。這無法更改",
+      "state_change_count": "{count, plural, one {1個允許的狀態變更} other {{count}個允許的狀態變更}}",
+      "movers_count": "{count, plural, one {1個列出的審核者} other {{count}個列出的審核者}}",
+      "state_changes": {
+        "label": {
+          "default": "添加允許的狀態變更",
+          "loading": "添加允許的狀態變更中"
+        },
+        "move_to": "變更狀態為",
+        "movers": {
+          "label": "當審核者為",
+          "tooltip": "審核者是被允許將工作項目從一個狀態移動到另一個狀態的人。",
+          "add": "添加審核者"
+        }
+      }
+    },
+    "workflow_disabled": {
+      "title": "您不能將此工作項目移動到這裡。"
+    },
+    "workflow_enabled": {
+      "label": "狀態變更"
+    },
+    "workflow_tree": {
+      "label": "對於工作項目在",
+      "state_change_label": "可以將其移動到"
+    },
+    "empty_state": {
+      "upgrade": {
+        "title": "使用工作流程控制變更和審核的混亂。",
+        "description": "在Plane中使用工作流程設置工作移動、由誰移動以及何時移動的規則。"
+      }
+    },
+    "quick_actions": {
+      "view_change_history": "查看變更歷史",
+      "reset_workflow": "重置工作流程"
+    },
+    "confirmation_modals": {
+      "reset_workflow": {
+        "title": "您確定要重置此工作流程嗎？",
+        "description": "如果您重置此工作流程，所有狀態變更規則都將被刪除，您將需要重新創建它們才能在此專案中運行。"
+      },
+      "delete_state_change": {
+        "title": "您確定要刪除此狀態變更規則嗎？",
+        "description": "一旦刪除，您將無法撤消此更改，如果您希望此規則在此專案中運行，您將需要重新設置。"
+      }
+    },
+    "toasts": {
+      "enable_disable": {
+        "loading": "{action}工作流程",
+        "success": {
+          "title": "成功",
+          "message": "工作流程已成功{action}"
+        },
+        "error": {
+          "title": "錯誤",
+          "message": "工作流程無法{action}。請再試一次。"
+        }
+      },
+      "reset": {
+        "success": {
+          "title": "成功",
+          "message": "工作流程已成功重置"
+        },
+        "error": {
+          "title": "重置工作流程時出錯",
+          "message": "工作流程無法重置。請再試一次。"
+        }
+      },
+      "add_state_change_rule": {
+        "error": {
+          "title": "添加狀態變更規則時出錯",
+          "message": "無法添加狀態變更規則。請再試一次。"
+        }
+      },
+      "modify_state_change_rule": {
+        "error": {
+          "title": "修改狀態變更規則時出錯",
+          "message": "無法修改狀態變更規則。請再試一次。"
+        }
+      },
+      "remove_state_change_rule": {
+        "error": {
+          "title": "移除狀態變更規則時出錯",
+          "message": "無法移除狀態變更規則。請再試一次。"
+        }
+      },
+      "modify_state_change_rule_movers": {
+        "error": {
+          "title": "修改狀態變更規則審核者時出錯",
+          "message": "無法修改狀態變更規則審核者。請再試一次。"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/workspace-settings.json b/packages/i18n/src/locales/zh-TW/workspace-settings.json
new file mode 100644
index 0000000..2d01f10
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/workspace-settings.json
@@ -0,0 +1,508 @@
+{
+  "workspace_settings": {
+    "label": "工作區設定",
+    "page_label": "{workspace} - 一般設定",
+    "key_created": "金鑰已建立",
+    "copy_key": "複製並儲存此金鑰到 Plane Pages。關閉後您將無法看到此金鑰。已下載包含金鑰的 CSV 檔案。",
+    "token_copied": "權杖已複製到剪貼簿。",
+    "settings": {
+      "general": {
+        "title": "一般",
+        "upload_logo": "上傳標誌",
+        "edit_logo": "編輯標誌",
+        "name": "工作區名稱",
+        "company_size": "公司規模",
+        "url": "工作區網址",
+        "workspace_timezone": "工作區時區",
+        "update_workspace": "更新工作區",
+        "delete_workspace": "刪除此工作區",
+        "delete_workspace_description": "刪除工作區時，該工作區內的所有資料和資源都將被永久移除且無法復原。",
+        "delete_btn": "刪除此工作區",
+        "delete_modal": {
+          "title": "您確定要刪除此工作區嗎？",
+          "description": "您有一個使用中的付費方案試用期。請先取消試用期再繼續。",
+          "dismiss": "關閉",
+          "cancel": "取消試用",
+          "success_title": "工作區已刪除。",
+          "success_message": "您很快就會進入個人資料頁面。",
+          "error_title": "操作失敗。",
+          "error_message": "請重試。"
+        },
+        "errors": {
+          "name": {
+            "required": "名稱為必填",
+            "max_length": "工作區名稱不應超過 80 個字元"
+          },
+          "company_size": {
+            "required": "公司規模為必填",
+            "select_a_range": "選擇組織規模"
+          }
+        }
+      },
+      "members": {
+        "title": "成員",
+        "add_member": "新增成員",
+        "pending_invites": "待處理的邀請",
+        "invitations_sent_successfully": "邀請傳送成功",
+        "leave_confirmation": "您確定要離開工作區嗎？您將無法再存取此工作區。此操作無法復原。",
+        "details": {
+          "full_name": "全名",
+          "display_name": "顯示名稱",
+          "email_address": "電子郵件地址",
+          "account_type": "帳號類型",
+          "authentication": "驗證",
+          "joining_date": "加入日期"
+        },
+        "modal": {
+          "title": "邀請人員協作",
+          "description": "邀請人員加入您的工作區進行協作。",
+          "button": "傳送邀請",
+          "button_loading": "傳送邀請中",
+          "placeholder": "name@company.com",
+          "errors": {
+            "required": "我們需要電子郵件地址才能邀請他們。",
+            "invalid": "電子郵件無效"
+          }
+        }
+      },
+      "billing_and_plans": {
+        "heading": "計費與方案",
+        "description": "選擇您的方案、管理訂閱，並在需求增加時輕鬆升級。",
+        "title": "計費和方案",
+        "current_plan": "目前方案",
+        "free_plan": "您目前使用的是免費方案",
+        "view_plans": "檢視方案"
+      },
+      "exports": {
+        "heading": "匯出",
+        "description": "以各種格式匯出您的專案資料，並透過下載連結存取您的匯出歷史記錄。",
+        "title": "匯出",
+        "exporting": "匯出中",
+        "previous_exports": "先前的匯出",
+        "export_separate_files": "將資料匯出為個別檔案",
+        "exporting_projects": "匯出專案",
+        "format": "格式",
+        "filters_info": "應用篩選器以根據您的條件匯出特定工作項。",
+        "modal": {
+          "title": "匯出至",
+          "toasts": {
+            "success": {
+              "title": "匯出成功",
+              "message": "您可以從先前的匯出下載匯出的 {entity}"
+            },
+            "error": {
+              "title": "匯出失敗",
+              "message": "匯出未成功。請再試一次。"
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "heading": "Webhooks",
+        "description": "當專案事件發生時，自動向外部服務傳送通知。",
+        "title": "Webhook",
+        "add_webhook": "新增 Webhook",
+        "modal": {
+          "title": "建立 Webhook",
+          "details": "Webhook 詳細資訊",
+          "payload": "承載網址",
+          "question": "您希望觸發此 Webhook 的事件有哪些？",
+          "error": "網址為必填"
+        },
+        "secret_key": {
+          "title": "金鑰",
+          "message": "產生權杖以簽署 Webhook 承載"
+        },
+        "options": {
+          "all": "傳送所有資訊給我",
+          "individual": "選擇個別事件"
+        },
+        "toasts": {
+          "created": {
+            "title": "Webhook 已建立",
+            "message": "Webhook 已成功建立"
+          },
+          "not_created": {
+            "title": "Webhook 未建立",
+            "message": "無法建立 Webhook"
+          },
+          "updated": {
+            "title": "Webhook 已更新",
+            "message": "Webhook 已成功更新"
+          },
+          "not_updated": {
+            "title": "Webhook 未更新",
+            "message": "無法更新 Webhook"
+          },
+          "removed": {
+            "title": "Webhook 已移除",
+            "message": "Webhook 已成功移除"
+          },
+          "not_removed": {
+            "title": "Webhook 未移除",
+            "message": "無法移除 Webhook"
+          },
+          "secret_key_copied": {
+            "message": "金鑰已複製到剪貼簿。"
+          },
+          "secret_key_not_copied": {
+            "message": "複製金鑰時發生錯誤。"
+          }
+        }
+      },
+      "api_tokens": {
+        "heading": "API 權杖",
+        "description": "產生安全的 API 權杖，將您的資料與外部系統和應用程式整合。",
+        "title": "API 權杖",
+        "add_token": "新增存取權杖",
+        "create_token": "建立權杖",
+        "never_expires": "永不過期",
+        "generate_token": "產生權杖",
+        "generating": "產生中",
+        "delete": {
+          "title": "刪除 API 權杖",
+          "description": "使用此權杖的任何應用程式將無法再存取 Plane 資料。此操作無法復原。",
+          "success": {
+            "title": "成功！",
+            "message": "API 權杖已成功刪除"
+          },
+          "error": {
+            "title": "錯誤！",
+            "message": "無法刪除 API 權杖"
+          }
+        }
+      },
+      "integrations": {
+        "title": "整合",
+        "heading": "整合",
+        "description": "與常用工具和服務連結，以便在整個工作流程生態系中同步您的工作。",
+        "page_title": "在可用的應用程式或您自己的應用程式中使用您的 Plane 資料。",
+        "page_description": "查看此工作區或您正在使用的所有整合。"
+      },
+      "imports": {
+        "title": "導入",
+        "heading": "匯入",
+        "description": "從您現有的專案管理工具連接並匯入資料，以簡化您的工作流程整合。"
+      },
+      "worklogs": {
+        "title": "工作日誌",
+        "heading": "工作日誌",
+        "description": "下載任何專案中任何人的工作日誌（即工時表）。"
+      },
+      "group_syncing": {
+        "title": "群組同步",
+        "heading": "群組同步",
+        "description": "將身份提供者群組與專案和角色連結。當 IdP 中的群組成員資格變更時，使用者存取權會自動更新，簡化入職與離職流程。",
+        "enable": {
+          "title": "啟用群組同步",
+          "description": "根據身份提供者群組自動將使用者加入專案。"
+        },
+        "config": {
+          "title": "設定群組同步",
+          "description": "設定身份提供者群組如何對應至專案和角色。",
+          "sync_on_login": {
+            "title": "登入時同步",
+            "description": "使用者登入時更新群組成員資格與專案存取權。"
+          },
+          "sync_offline": {
+            "title": "離線同步",
+            "description": "每六小時自動執行同步，無需等待使用者登入。"
+          },
+          "auto_remove": {
+            "title": "自動移除",
+            "description": "當使用者不再符合群組時，自動將其從專案中移除。"
+          },
+          "group_attribute_key": {
+            "title": "群組屬性鍵",
+            "description": "用於識別與同步使用者群組的身份提供者屬性。",
+            "placeholder": "群組"
+          }
+        },
+        "group_mapping": {
+          "title": "群組對應",
+          "description": "將身份提供者群組與專案和角色連結。",
+          "button_text": "新增群組同步"
+        },
+        "toast": {
+          "updating": "正在更新群組同步功能",
+          "success": "群組同步功能已成功更新。",
+          "error": "更新群組同步功能失敗！"
+        },
+        "delete_modal": {
+          "title": "刪除群組同步",
+          "content": "此身份群組的新使用者將不再被加入專案。已加入的使用者將保留其目前角色。"
+        },
+        "modal": {
+          "idp_group_name": {
+            "text": "使用者群組",
+            "required": "使用者群組為必填",
+            "placeholder": "輸入 IdP 群組名稱"
+          },
+          "project": {
+            "text": "專案",
+            "required": "專案為必填",
+            "placeholder": "選擇專案"
+          },
+          "default_role": {
+            "text": "專案角色",
+            "required": "專案角色為必填",
+            "placeholder": "選擇專案角色"
+          }
+        }
+      },
+      "identity": {
+        "title": "身份",
+        "heading": "身份",
+        "description": "配置您的網域並啟用單一登入"
+      },
+      "project_states": {
+        "title": "專案狀態",
+        "heading": "查看所有專案的進度概覽。",
+        "description": "專案狀態是 Plane 獨有的功能，可依任何專案屬性追蹤所有專案的進度。",
+        "go_to_settings": "前往設定"
+      },
+      "projects": {
+        "title": "專案",
+        "description": "管理專案狀態、啟用專案標籤及其他設定。",
+        "tabs": {
+          "states": "專案狀態",
+          "labels": "專案標籤"
+        }
+      },
+      "templates": {
+        "title": "範本",
+        "heading": "範本",
+        "description": "使用範本可節省 80% 建立專案、工作事項和頁面所花費的時間。"
+      },
+      "relations": {
+        "title": "關聯",
+        "heading": "關聯",
+        "description": "建立並管理能連接工作區中各工作事項的關聯類型。"
+      },
+      "cancel_trial": {
+        "title": "請先取消您的試用期。",
+        "description": "您有一個我們付費方案的有效試用期。請先取消它才能繼續。",
+        "dismiss": "忽略",
+        "cancel": "取消試用期",
+        "cancel_success_title": "試用期已取消。",
+        "cancel_success_message": "您現在可以刪除工作空間。",
+        "cancel_error_title": "操作失敗。",
+        "cancel_error_message": "請再試一次。"
+      },
+      "applications": {
+        "internal": "內部",
+        "title": "應用程式",
+        "applicationId_copied": "應用程式ID已複製到剪貼簿",
+        "clientId_copied": "客戶端ID已複製到剪貼簿",
+        "clientSecret_copied": "客戶端密鑰已複製到剪貼簿",
+        "third_party_apps": "第三方應用",
+        "your_apps": "您的應用",
+        "connect": "連接",
+        "connected": "已連接",
+        "disconnect": "中斷連線",
+        "install": "安裝",
+        "installed": "已安裝",
+        "configure": "配置",
+        "app_available": "您已使此應用可用於Plane工作空間",
+        "app_credentials_regenrated": {
+          "title": "應用程式憑證已成功重新生成",
+          "description": "請在所有使用的地方替換客戶端密鑰。之前的密鑰已不再有效。"
+        },
+        "app_created": {
+          "title": "應用程式已成功建立",
+          "description": "使用憑證將應用程式安裝到 Plane 工作區中"
+        },
+        "installed_apps": "已安裝的應用程式",
+        "all_apps": "所有應用程式",
+        "internal_apps": "內部應用程式",
+        "app_name_title": "您將如何命名此應用",
+        "app_description_title": {
+          "label": "詳細描述",
+          "placeholder": "為市集撰寫詳細描述。按 '/' 查看指令。"
+        },
+        "authorization_grant_type": {
+          "title": "連接類型",
+          "description": "選擇您的應用程式應該為工作區安裝一次，還是讓每個使用者連接自己的帳戶"
+        },
+        "website": {
+          "title": "網站",
+          "description": "連結到您的應用程式網站。",
+          "placeholder": "https://example.com"
+        },
+        "app_maker": {
+          "title": "應用程式建立者",
+          "description": "建立該應用程式的個人或組織。"
+        },
+        "app_maker_error": "應用製作者為必填項",
+        "setup_url": {
+          "label": "設定 URL",
+          "description": "使用者在安裝應用程式時將被重新導向到此 URL。",
+          "placeholder": "https://example.com/setup"
+        },
+        "webhook_url": {
+          "label": "Webhook URL",
+          "description": "我們將在此接收來自已安裝您應用的工作區的 Webhook 事件和更新。",
+          "placeholder": "https://example.com/webhook"
+        },
+        "webhook_secret": {
+          "label": "Webhook 密鑰",
+          "description": "用於驗證傳入 Webhook 請求的密鑰。",
+          "placeholder": "輸入隨機密鑰"
+        },
+        "redirect_uris": {
+          "label": "重定向 URI（以空格分隔）",
+          "description": "使用者在透過 Plane 認證後將被重新導向到此路徑。",
+          "placeholder": "https://example.com https://example.com/"
+        },
+        "app_available_description": "連接Plane工作空間以開始使用",
+        "client_id_and_secret": "客戶端ID和密鑰",
+        "client_id_and_secret_description": "複製並保存此密鑰。關閉後您將無法再次查看此密鑰。",
+        "client_id_and_secret_download": "您可以從這裡下載包含密鑰的CSV檔案。",
+        "application_id": "應用程式ID",
+        "client_id": "客戶端ID",
+        "client_secret": "客戶端密鑰",
+        "export_as_csv": "匯出為CSV",
+        "slug_already_exists": "別名已存在",
+        "failed_to_create_application": "建立應用程式失敗",
+        "upload_logo": "上傳標誌",
+        "app_name_error": "應用名稱為必填項",
+        "app_short_description_title": "為此應用提供簡短描述",
+        "app_short_description_error": "應用簡短描述為必填項",
+        "app_description_error": "應用描述為必填項",
+        "app_slug_title": "應用別名",
+        "app_slug_error": "應用別名為必填項",
+        "invalid_website_error": "無效的網站",
+        "webhook_url_title": "Webhook URL",
+        "webhook_url_error": "Webhook URL為必填項",
+        "invalid_webhook_url_error": "無效的Webhook URL",
+        "redirect_uris_title": "重定向URI",
+        "redirect_uris_error": "重定向URI為必填項",
+        "invalid_redirect_uris_error": "無效的重定向URI",
+        "redirect_uris_description": "輸入應用將在用戶後重定向到的URI，用空格分隔，例如 https://example.com https://example.com/",
+        "authorized_javascript_origins_title": "授權的JavaScript來源",
+        "authorized_javascript_origins_error": "授權的JavaScript來源為必填項",
+        "invalid_authorized_javascript_origins_error": "無效的授權JavaScript來源",
+        "authorized_javascript_origins_description": "輸入應用將被允許發出請求的來源，用空格分隔，例如 app.com example.com",
+        "create_app": "建立應用",
+        "update_app": "更新應用",
+        "build_your_own_app": "建立您自己的應用程式",
+        "edit_app_details": "編輯應用程式詳情",
+        "regenerate_client_secret_description": "重新生成客戶端密鑰。重新生成後，您可以複製密鑰或將其下載到CSV檔案中。",
+        "regenerate_client_secret": "重新生成客戶端密鑰",
+        "regenerate_client_secret_confirm_title": "確定要重新生成客戶端密鑰嗎？",
+        "regenerate_client_secret_confirm_description": "使用此密鑰的應用將停止工作。您需要在應用中更新密鑰。",
+        "regenerate_client_secret_confirm_cancel": "取消",
+        "regenerate_client_secret_confirm_regenerate": "重新生成",
+        "read_only_access_to_workspace": "對您的工作空間的唯讀存取",
+        "write_access_to_workspace": "對您的工作空間的寫入存取",
+        "read_only_access_to_user_profile": "對您的用戶設定檔的唯讀存取",
+        "write_access_to_user_profile": "對您的用戶設定檔的寫入存取",
+        "connect_app_to_workspace": "將{app}連接到您的工作空間{workspace}",
+        "user_permissions": "用戶權限",
+        "user_permissions_description": "用戶權限用於授予對用戶設定檔的存取權限。",
+        "workspace_permissions": "工作空間權限",
+        "workspace_permissions_description": "工作空間權限用於授予對工作空間的存取權限。",
+        "with_the_permissions": "具有權限",
+        "app_consent_title": "{app}正在請求存取您的Plane工作空間和設定檔。",
+        "choose_workspace_to_connect_app_with": "選擇要連接應用的工作空間",
+        "app_consent_workspace_permissions_title": "{app}想要",
+        "app_consent_user_permissions_title": "{app}還可以請求用戶對以下資源的權限。這些權限將僅由用戶請求和授權。",
+        "app_consent_accept_title": "通過接受",
+        "app_consent_accept_1": "您授予應用在Plane內部或外部可以使用應用的任何地方存取您的Plane資料的權限",
+        "app_consent_accept_2": "您同意{app}的隱私政策和使用條款",
+        "accepting": "接受中...",
+        "accept": "接受",
+        "categories": "類別",
+        "select_app_categories": "選擇應用類別",
+        "categories_title": "類別",
+        "categories_error": "類別是必填項",
+        "invalid_categories_error": "無效的類別",
+        "categories_description": "選擇最能描述應用的類別",
+        "supported_plans": "支援的方案",
+        "supported_plans_description": "選擇可以安裝此應用程式的工作區方案。留空以允許所有方案。",
+        "select_plans": "選擇方案",
+        "privacy_policy_url_title": "隱私政策URL",
+        "privacy_policy_url_error": "隱私政策URL是必填項",
+        "invalid_privacy_policy_url_error": "無效的隱私政策URL",
+        "terms_of_service_url_title": "使用條款URL",
+        "terms_of_service_url_error": "使用條款URL是必填項",
+        "invalid_terms_of_service_url_error": "無效的使用條款URL",
+        "support_url_title": "支持URL",
+        "support_url_error": "支持URL是必填項",
+        "invalid_support_url_error": "無效的支持URL",
+        "video_url_title": "視頻URL",
+        "video_url_error": "視頻URL是必填項",
+        "invalid_video_url_error": "無效的視頻URL",
+        "setup_url_error": "設置URL是必填項",
+        "invalid_setup_url_error": "無效的設置URL",
+        "configuration_url_title": "配置URL",
+        "configuration_url_error": "配置URL是必填項",
+        "invalid_configuration_url_error": "無效的配置URL",
+        "contact_email_title": "聯絡電子郵件",
+        "contact_email_error": "聯絡電子郵件是必填項",
+        "invalid_contact_email_error": "無效的聯絡電子郵件",
+        "upload_attachments": "上傳附件",
+        "uploading_images": "上傳 {count, plural, one {張圖片} other {張圖片}}",
+        "drop_images_here": "將圖片拖到這裡",
+        "click_to_upload_images": "點擊上傳圖片",
+        "invalid_file_or_exceeds_size_limit": "無效的文件或超過大小限制 ({size} MB)",
+        "uploading": "上傳中...",
+        "upload_and_save": "上傳並保存",
+        "app_consent_no_access_title": "請求安裝",
+        "app_consent_no_access_description": "此應用程式只能在工作區管理員安裝後才能安裝。請聯絡您的工作區管理員以繼續。",
+        "app_consent_unapproved_title": "此應用程式尚未經 Plane 審核或核准。",
+        "app_consent_unapproved_description": "將此應用程式連接到您的工作區之前，請確認您信任它。",
+        "go_to_app": "前往應用程式",
+        "enable_app_mentions": "啟用應用程式提及",
+        "enable_app_mentions_tooltip": "啟用此功能後，使用者可以提及或指派工作項目給此應用程式。",
+        "scopes": "範圍",
+        "select_scopes": "選擇範圍",
+        "read_access_to": "唯讀存取",
+        "write_access_to": "寫入存取",
+        "global_permission_expiration": "全域範圍即將過期。請改用細粒度範圍。例如，使用 project:read 取代全域讀取。",
+        "selected_scopes": "已選 {count} 項",
+        "scopes_and_permissions": "範圍與權限",
+        "read": "讀取",
+        "write": "寫入",
+        "scope_description": {
+          "projects": "存取專案及所有專案相關實體",
+          "wiki": "存取 Wiki 及所有 Wiki 相關實體",
+          "workspaces": "存取工作區及所有工作區相關實體",
+          "stickies": "存取便利貼及所有便利貼相關實體",
+          "profile": "存取使用者個人資料資訊",
+          "agents": "存取代理以及所有代理相關實體",
+          "assets": "存取資產以及所有資產相關實體"
+        }
+      },
+      "plane-intelligence": {
+        "title": "Plane AI",
+        "heading": "Plane AI",
+        "description": "使用與您的工作和知識庫原生連接的 AI，讓您的任務變得更智能、更快速。"
+      },
+      "runners": {
+        "title": "Plane Runner",
+        "heading": "指令碼",
+        "new_script": "新指令碼",
+        "description": "使用自訂指令碼和自動化規則，自動化您的工作流程。"
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "尚未建立 API 權杖",
+        "description": "Plane API 可用於將您在 Plane 中的資料與任何外部系統整合。建立權杖以開始使用。"
+      },
+      "webhooks": {
+        "title": "尚未新增 Webhook",
+        "description": "建立 Webhook 以接收即時更新並自動執行操作。"
+      },
+      "exports": {
+        "title": "尚無匯出",
+        "description": "每當您匯出時，也會在這裡保留一份副本供參考。"
+      },
+      "imports": {
+        "title": "尚無匯入",
+        "description": "在這裡找到所有您先前的匯入並下載它們。"
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/zh-TW/workspace.json b/packages/i18n/src/locales/zh-TW/workspace.json
new file mode 100644
index 0000000..3f2194e
--- /dev/null
+++ b/packages/i18n/src/locales/zh-TW/workspace.json
@@ -0,0 +1,378 @@
+{
+  "workspace_creation": {
+    "heading": "建立您的工作區",
+    "subheading": "若要開始使用 Plane，您需要建立或加入工作區。",
+    "form": {
+      "name": {
+        "label": "為您的工作區命名",
+        "placeholder": "最好使用熟悉且容易識別的名稱。"
+      },
+      "url": {
+        "label": "設定您的工作區網址",
+        "placeholder": "輸入或貼上網址",
+        "edit_slug": "您只能編輯網址的片段"
+      },
+      "organization_size": {
+        "label": "有多少人會使用這個工作區？",
+        "placeholder": "選擇一個範圍"
+      }
+    },
+    "errors": {
+      "creation_disabled": {
+        "title": "只有您的執行個體管理員可以建立工作區",
+        "description": "如果您知道您的執行個體管理員的電子郵件地址，請點選下方按鈕與他們聯絡。",
+        "request_button": "請求執行個體管理員"
+      },
+      "validation": {
+        "name_alphanumeric": "工作區名稱只能包含 (' ')、('-')、('_') 和英數字元。",
+        "name_length": "名稱請限制在 80 個字元以內。",
+        "url_alphanumeric": "網址只能包含 ('-') 和英數字元。",
+        "url_length": "網址請限制在 48 個字元以內。",
+        "url_already_taken": "工作區網址已被使用！"
+      }
+    },
+    "request_email": {
+      "subject": "請求新工作區",
+      "body": "您好，執行個體管理員：\n\n請以網址 [/workspace-name] 建立一個新工作區，用於 [建立工作區的目的]。\n\n謝謝，\n{firstName} {lastName}\n{email}"
+    },
+    "button": {
+      "default": "建立工作區",
+      "loading": "建立工作區中"
+    },
+    "toast": {
+      "success": {
+        "title": "成功",
+        "message": "工作區建立成功"
+      },
+      "error": {
+        "title": "錯誤",
+        "message": "無法建立工作區。請再試一次。"
+      }
+    }
+  },
+  "workspace_dashboard": {
+    "empty_state": {
+      "general": {
+        "title": "您的專案、活動和指標概覽",
+        "description": "歡迎使用 Plane，我們很高興您在這裡。建立您的第一個專案並追蹤您的工作事項，這個頁面將會變成一個協助您進展的空間。管理員也會看到協助他們團隊進展的項目。",
+        "primary_button": {
+          "text": "建立您的第一個專案",
+          "comic": {
+            "title": "在 Plane 中，一切都始於專案",
+            "description": "專案可以是產品的藍圖、行銷活動，或是推出新車。"
+          }
+        }
+      }
+    }
+  },
+  "workspace_analytics": {
+    "label": "分析",
+    "page_label": "{workspace} - 分析",
+    "open_tasks": "開啟任務總數",
+    "error": "取得資料時發生錯誤。",
+    "work_items_closed_in": "已完成的工作事項數量在",
+    "selected_projects": "已選取的專案",
+    "total_members": "成員總數",
+    "total_cycles": "週期總數",
+    "total_modules": "模組總數",
+    "pending_work_items": {
+      "title": "待處理工作事項",
+      "empty_state": "在此顯示同事待處理工作事項的分析。"
+    },
+    "work_items_closed_in_a_year": {
+      "title": "年度完成工作事項",
+      "empty_state": "完成工作事項以圖表形式檢視分析。"
+    },
+    "most_work_items_created": {
+      "title": "最多工作事項建立者",
+      "empty_state": "在此顯示同事及其建立的工作事項數量。"
+    },
+    "most_work_items_closed": {
+      "title": "最多工作事項完成者",
+      "empty_state": "在此顯示同事及其完成的工作事項數量。"
+    },
+    "tabs": {
+      "scope_and_demand": "範圍與需求",
+      "custom": "自訂分析"
+    },
+    "total": "{entity}總數",
+    "started_work_items": "已開始的{entity}",
+    "backlog_work_items": "待辦的{entity}",
+    "un_started_work_items": "未開始的{entity}",
+    "completed_work_items": "已完成的{entity}",
+    "project_insights": "專案洞察",
+    "summary_of_projects": "專案摘要",
+    "all_projects": "所有專案",
+    "trend_on_charts": "圖表趨勢",
+    "active_projects": "啟用中的專案",
+    "customized_insights": "自訂化洞察",
+    "created_vs_resolved": "已建立 vs 已解決",
+    "empty_state": {
+      "project_insights": {
+        "title": "尚無資料",
+        "description": "指派給您的工作項目將依狀態分類顯示在此處。"
+      },
+      "created_vs_resolved": {
+        "title": "尚無資料",
+        "description": "隨著時間推移所建立與解決的工作項目將顯示在此處。"
+      },
+      "customized_insights": {
+        "title": "尚無資料",
+        "description": "指派給您的工作項目將依狀態分類顯示在此處。"
+      },
+      "general": {
+        "title": "追蹤進度、工作量和分配。發現趨勢，消除障礙，加速工作進展",
+        "description": "查看範圍與需求、估算和範圍蔓延。獲取團隊成員和團隊的績效，確保您的專案按時運行。",
+        "primary_button": {
+          "text": "開始您的第一個專案",
+          "comic": {
+            "title": "分析功能在週期 + 模組中效果最佳",
+            "description": "首先，將您的問題在週期中進行時間限制，如果可能的話，將跨越多個週期的問題分組到模組中。在左側導覽中查看這兩個功能。"
+          }
+        }
+      },
+      "cycle_progress": {
+        "title": "尚無資料",
+        "description": "循環進度分析將顯示在此處。將工作項目加入循環以開始追蹤進度。"
+      },
+      "module_progress": {
+        "title": "尚無資料",
+        "description": "模組進度分析將顯示在此處。將工作項目加入模組以開始追蹤進度。"
+      },
+      "intake_trends": {
+        "title": "尚無資料",
+        "description": "引入趨勢分析將顯示在此處。將工作項目加入引入以開始追蹤趨勢。"
+      }
+    },
+    "upgrade_to_plan": "升級至 {plan} 以解鎖 {tab}",
+    "workitem_resolved_vs_pending": "已解決 vs 待處理的工作項目",
+    "projects_by_status": "按狀態分類的專案",
+    "active_users": "活躍使用者",
+    "intake_trends": "入學趨勢"
+  },
+  "workspace_projects": {
+    "label": "{count, plural, one {專案} other {專案}}",
+    "create": {
+      "label": "新增專案"
+    },
+    "network": {
+      "label": "網路",
+      "private": {
+        "title": "私人",
+        "description": "僅受邀者可存取"
+      },
+      "public": {
+        "title": "公開",
+        "description": "工作區中除了訪客以外的任何人都可以加入"
+      }
+    },
+    "error": {
+      "permission": "您沒有執行此操作的權限。",
+      "cycle_delete": "無法刪除週期",
+      "module_delete": "無法刪除模組",
+      "issue_delete": "無法刪除工作事項"
+    },
+    "state": {
+      "backlog": "待辦事項",
+      "unstarted": "未開始",
+      "started": "已開始",
+      "completed": "已完成",
+      "cancelled": "已取消"
+    },
+    "sort": {
+      "manual": "手動",
+      "name": "名稱",
+      "created_at": "建立日期",
+      "members_length": "成員數量"
+    },
+    "scope": {
+      "my_projects": "我的專案",
+      "archived_projects": "已封存"
+    },
+    "common": {
+      "months_count": "{months, plural, one{# 個月} other{# 個月}}",
+      "days_count": "{days, plural, one{# 天} other{# 天}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "沒有使用中的專案",
+        "description": "請將每個專案視為目標導向工作的上層。專案是工作、週期和模組所在的地方，並與您的同事一起協助您達成目標。建立新專案或篩選已封存的專案。",
+        "primary_button": {
+          "text": "開始您的第一個專案",
+          "comic": {
+            "title": "在 Plane 中，一切都始於專案",
+            "description": "專案可以是產品的藍圖、行銷活動，或是推出新車。"
+          }
+        }
+      },
+      "no_projects": {
+        "title": "沒有專案",
+        "description": "若要建立工作事項或管理您的工作，您需要建立專案或成為專案的一部分。",
+        "primary_button": {
+          "text": "開始您的第一個專案",
+          "comic": {
+            "title": "在 Plane 中，一切都始於專案",
+            "description": "專案可以是產品的藍圖、行銷活動，或是推出新車。"
+          }
+        }
+      },
+      "filter": {
+        "title": "沒有符合的專案",
+        "description": "找不到符合篩選條件的專案。\n改為建立新專案。"
+      },
+      "search": {
+        "description": "找不到符合篩選條件的專案。\n改為建立新專案"
+      }
+    }
+  },
+  "workspace_views": {
+    "add_view": "新增檢視",
+    "empty_state": {
+      "all-issues": {
+        "title": "專案中沒有工作事項",
+        "description": "第一個專案完成！現在，將您的工作分割成可追蹤的工作事項。讓我們開始吧！",
+        "primary_button": {
+          "text": "建立新工作事項"
+        }
+      },
+      "assigned": {
+        "title": "尚無工作事項",
+        "description": "從這裡可以追蹤指派給您的工作事項。",
+        "primary_button": {
+          "text": "建立新工作事項"
+        }
+      },
+      "created": {
+        "title": "尚無工作事項",
+        "description": "您建立的所有工作事項都會出現在這裡，直接在這裡追蹤它們。",
+        "primary_button": {
+          "text": "建立新工作事項"
+        }
+      },
+      "subscribed": {
+        "title": "尚無工作事項",
+        "description": "訂閱您感興趣的工作事項，在這裡追蹤它們。"
+      },
+      "custom-view": {
+        "title": "尚無工作事項",
+        "description": "符合篩選條件的工作事項，在這裡追蹤它們。"
+      }
+    },
+    "delete_view": {
+      "title": "您確定要刪除此視圖嗎？",
+      "content": "如果您確認，您為此視圖選擇的所有排序、篩選和顯示選項 + 布局將被永久刪除，無法恢復。"
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "建立工作事項草稿",
+    "empty_state": {
+      "title": "寫到一半的工作事項，以及即將推出的留言會出現在這裡。",
+      "description": "若要試用此功能，請開始新增工作事項並中途離開，或在下方建立您的第一個草稿。😉",
+      "primary_button": {
+        "text": "建立您的第一個草稿"
+      }
+    },
+    "delete_modal": {
+      "title": "刪除草稿",
+      "description": "您確定要刪除此草稿嗎？此操作無法復原。"
+    },
+    "toasts": {
+      "created": {
+        "success": "草稿已建立",
+        "error": "無法建立工作事項。請再試一次。"
+      },
+      "deleted": {
+        "success": "草稿已刪除"
+      }
+    }
+  },
+  "workspace_pages": {
+    "empty_state": {
+      "general": {
+        "title": "寫一個筆記、文檔或完整的知識庫。讓 Galileo，Plane 的 AI 助手，幫助您開始",
+        "description": "頁面是 Plane 中的思想沉澱空間。記下會議筆記，輕鬆格式化，嵌入工作項目，使用組件庫佈局，並將它們全部保存在您的專案上下文中。要快速完成任何文檔，使用快捷方式或點擊按鈕來調用 Galileo，Plane 的 AI。",
+        "primary_button": {
+          "text": "創建您的第一個頁面"
+        }
+      },
+      "private": {
+        "title": "還沒有私人頁面",
+        "description": "在這裡保留您的私人想法。當您準備好分享時，團隊只需點擊一下即可。",
+        "primary_button": {
+          "text": "創建您的第一個頁面"
+        }
+      },
+      "public": {
+        "title": "還沒有工作空間頁面",
+        "description": "在這裡查看與工作空間中的每個人共享的頁面。",
+        "primary_button": {
+          "text": "創建您的第一個頁面"
+        }
+      },
+      "archived": {
+        "title": "還沒有歸檔的頁面",
+        "description": "歸檔不在您雷達上的頁面。需要時在這裡訪問它們。"
+      },
+      "shared": {
+        "title": "尚無共享頁面",
+        "description": "其他人與您共享的頁面會顯示在這裡。"
+      }
+    }
+  },
+  "workspace_cycles": {
+    "empty_state": {
+      "active": {
+        "title": "沒有活動週期",
+        "description": "您的專案的週期，包括其範圍內包含今天日期的任何期間。在這裡查找所有活動週期的進度和詳情。"
+      }
+    }
+  },
+  "workspace": {
+    "members_import": {
+      "title": "從CSV匯入成員",
+      "description": "上傳包含以下欄位的CSV：Email, Display Name, First Name, Last Name, Role（5、15或20）",
+      "dropzone": {
+        "active": "將CSV檔案放在這裡",
+        "inactive": "拖放或點擊上傳",
+        "file_type": "僅支援.csv檔案"
+      },
+      "buttons": {
+        "cancel": "取消",
+        "import": "匯入",
+        "try_again": "重試",
+        "close": "關閉",
+        "done": "完成"
+      },
+      "progress": {
+        "uploading": "上傳中...",
+        "importing": "匯入中..."
+      },
+      "summary": {
+        "title": {
+          "failed": "匯入失敗",
+          "complete": "匯入完成"
+        },
+        "message": {
+          "seat_limit": "由於席位限制，無法匯入成員。",
+          "success": "成功將{count}名成員新增至工作區。",
+          "no_imports": "未從CSV檔案匯入任何成員。"
+        },
+        "stats": {
+          "successful": "成功",
+          "failed": "失敗"
+        },
+        "download_errors": "下載錯誤"
+      },
+      "toast": {
+        "invalid_file": {
+          "title": "無效檔案",
+          "message": "僅支援CSV檔案。"
+        },
+        "import_failed": {
+          "title": "匯入失敗",
+          "message": "發生錯誤。"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/provider/index.tsx b/packages/i18n/src/provider/index.tsx
new file mode 100644
index 0000000..5287285
--- /dev/null
+++ b/packages/i18n/src/provider/index.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { I18nextProvider } from "react-i18next";
+import { i18nInstance } from "../core";
+
+interface TranslationProviderProps {
+  children: React.ReactNode;
+}
+
+// Render the provider unconditionally: translation readiness is handled before
+// hydration (entry.client awaits initPromise). Gating on init with `return null`
+// makes the first client render diverge from the server HTML, and React 19
+// leaves server DOM it could not adopt in place instead of clearing it.
+export const TranslationProvider: React.FC<TranslationProviderProps> = ({ children }) => (
+  <I18nextProvider i18n={i18nInstance}>{children}</I18nextProvider>
+);
diff --git a/packages/i18n/src/types/index.ts b/packages/i18n/src/types/index.ts
new file mode 100644
index 0000000..adf6e9f
--- /dev/null
+++ b/packages/i18n/src/types/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./language";
+export type { TTranslationKeys } from "./keys.generated";
diff --git a/packages/i18n/src/types/language.ts b/packages/i18n/src/types/language.ts
new file mode 100644
index 0000000..32c3ef6
--- /dev/null
+++ b/packages/i18n/src/types/language.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TLanguage =
+  | "en"
+  | "fr"
+  | "es"
+  | "ja"
+  | "zh-CN"
+  | "zh-TW"
+  | "ru"
+  | "it"
+  | "cs"
+  | "sk"
+  | "de"
+  | "ua"
+  | "pl"
+  | "ko"
+  | "pt-BR"
+  | "id"
+  | "ro"
+  | "vi-VN"
+  | "tr-TR"
+  | "ka-ge";
+
+export interface ILanguageOption {
+  label: string;
+  value: TLanguage;
+}
diff --git a/packages/i18n/tsconfig.json b/packages/i18n/tsconfig.json
new file mode 100644
index 0000000..9476a80
--- /dev/null
+++ b/packages/i18n/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "noUncheckedIndexedAccess": false,
+    "resolveJsonModule": true
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules", "*.config.ts", "scripts"]
+}
diff --git a/packages/i18n/tsdown.config.ts b/packages/i18n/tsdown.config.ts
new file mode 100644
index 0000000..92959ea
--- /dev/null
+++ b/packages/i18n/tsdown.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  platform: "neutral",
+  exports: true,
+});
diff --git a/packages/logger/.prettierignore b/packages/logger/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/logger/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/logger/README.md b/packages/logger/README.md
new file mode 100644
index 0000000..4391b89
--- /dev/null
+++ b/packages/logger/README.md
@@ -0,0 +1,70 @@
+# Logger Package
+
+This package provides a logger and a request logger utility built using [Winston](https://github.com/winstonjs/winston). It offers customizable log levels using env and supports structured logging for general application logs and HTTP requests.
+
+## Features.
+
+- Dynamic log level configuration using env.
+- Pre-configured winston logger for general usage (`logger`).
+- Request logger middleware that logs incoming request
+
+## Usage
+
+### Adding as a package
+
+Add this package as a dependency in package.json
+
+```typescript
+dependency: {
+    ...
+    @plane/logger":"*",
+    ...
+}
+```
+
+### Importing the Logger
+
+```typescript
+import { logger, requestLogger } from "@plane/logger";
+```
+
+### Usage
+
+### `logger`: General Logger
+
+Use this for general application logs.
+
+```typescript
+logger.info("This is an info log");
+logger.warn("This is a warning");
+logger.error("This is an error");
+```
+
+### `requestLogger`: Request Logger Middleware
+
+Use this as a middleware for incoming requests
+
+```typescript
+const app = express();
+app.use(requestLogger);
+```
+
+## Available Log Levels
+
+- `error`
+- `warn`
+- `info` (default)
+- `http`
+- `verbose`
+- `debug`
+- `silly`
+
+## Log file
+
+- Log files are stored in logs folder of current working directory. Error logs are stored in files with format `error-%DATE%.log` and combined logs are stored with format `combined-%DATE%.log`.
+- Log files have a 7 day rotation period defined.
+
+## Configuration
+
+- By default, the log level is set to `info`.
+- You can specify a log level by adding a LOG_LEVEL in .env.
diff --git a/packages/logger/package.json b/packages/logger/package.json
new file mode 100644
index 0000000..7ebd844
--- /dev/null
+++ b/packages/logger/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@plane/logger",
+  "version": "1.4.2",
+  "private": true,
+  "description": "Logger shared across multiple apps internally",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=0 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "express-winston": "catalog:",
+    "winston": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/typescript-config": "workspace:*",
+    "@types/express": "catalog:",
+    "@types/node": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  },
+  "inlinedDependencies": {
+    "@types/express": "4.17.23",
+    "@types/express-serve-static-core": "4.19.6"
+  }
+}
diff --git a/packages/logger/src/config.ts b/packages/logger/src/config.ts
new file mode 100644
index 0000000..db53402
--- /dev/null
+++ b/packages/logger/src/config.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { LoggerOptions } from "winston";
+import { createLogger, format, transports } from "winston";
+
+export const loggerConfig: LoggerOptions = {
+  level: process.env.LOG_LEVEL || "info",
+  format: format.combine(
+    format.timestamp({
+      format: "YYYY-MM-DD HH:mm:ss:ms",
+    }),
+    format.json()
+  ),
+  transports: [new transports.Console()],
+};
+
+export const logger = createLogger(loggerConfig);
diff --git a/packages/logger/src/index.ts b/packages/logger/src/index.ts
new file mode 100644
index 0000000..dc15dda
--- /dev/null
+++ b/packages/logger/src/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./config";
+export * from "./middleware";
diff --git a/packages/logger/src/middleware.ts b/packages/logger/src/middleware.ts
new file mode 100644
index 0000000..d973b51
--- /dev/null
+++ b/packages/logger/src/middleware.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { RequestHandler } from "express";
+import expressWinston from "express-winston";
+import { transports } from "winston";
+import { loggerConfig } from "./config";
+
+export const loggerMiddleware: RequestHandler = expressWinston.logger({
+  ...loggerConfig,
+  transports: [new transports.Console()],
+  msg: "{{req.method}} {{req.url}} {{res.statusCode}} {{res.responseTime}}ms",
+  expressFormat: true,
+});
diff --git a/packages/logger/tsconfig.json b/packages/logger/tsconfig.json
new file mode 100644
index 0000000..6d63da5
--- /dev/null
+++ b/packages/logger/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@plane/typescript-config/node-library.json",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "experimentalDecorators": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/logger/tsdown.config.ts b/packages/logger/tsdown.config.ts
new file mode 100644
index 0000000..5f7ccad
--- /dev/null
+++ b/packages/logger/tsdown.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  exports: true,
+});
diff --git a/packages/propel/.prettierignore b/packages/propel/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/propel/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/propel/.storybook/main.ts b/packages/propel/.storybook/main.ts
new file mode 100644
index 0000000..79a396c
--- /dev/null
+++ b/packages/propel/.storybook/main.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { createRequire } from "module";
+import { join, dirname } from "path";
+
+const require = createRequire(import.meta.url);
+
+/*
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: [getAbsolutePath("@storybook/addon-designs"), getAbsolutePath("@storybook/addon-docs")],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+};
+export default config;
diff --git a/packages/propel/.storybook/manager.ts b/packages/propel/.storybook/manager.ts
new file mode 100644
index 0000000..014936f
--- /dev/null
+++ b/packages/propel/.storybook/manager.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { addons } from "storybook/manager-api";
+import { create } from "storybook/theming";
+
+const planeTheme = create({
+  base: "dark",
+  brandTitle: "Plane UI",
+  brandUrl: "https://plane.so",
+  brandImage: "plane-lockup-light.svg",
+  brandTarget: "_self",
+});
+
+addons.setConfig({
+  theme: planeTheme,
+});
diff --git a/packages/propel/.storybook/preview.ts b/packages/propel/.storybook/preview.ts
new file mode 100644
index 0000000..bf9957c
--- /dev/null
+++ b/packages/propel/.storybook/preview.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Preview } from "@storybook/react-vite";
+import "./tailwind.css";
+
+const parameters: Preview["parameters"] = {
+  controls: {
+    matchers: {},
+  },
+};
+
+const preview: Preview = {
+  parameters,
+  tags: ["autodocs"],
+};
+export default preview;
diff --git a/packages/propel/.storybook/tailwind.css b/packages/propel/.storybook/tailwind.css
new file mode 100644
index 0000000..aca4ed0
--- /dev/null
+++ b/packages/propel/.storybook/tailwind.css
@@ -0,0 +1,2 @@
+@import "@plane/tailwind-config/index.css";
+@import "../src/styles/react-day-picker.css";
diff --git a/packages/propel/package.json b/packages/propel/package.json
new file mode 100644
index 0000000..6226ec3
--- /dev/null
+++ b/packages/propel/package.json
@@ -0,0 +1,98 @@
+{
+  "name": "@plane/propel",
+  "version": "1.4.2",
+  "private": true,
+  "license": "AGPL-3.0",
+  "type": "module",
+  "exports": {
+    "./accordion": "./dist/accordion/index.js",
+    "./animated-counter": "./dist/animated-counter/index.js",
+    "./avatar": "./dist/avatar/index.js",
+    "./badge": "./dist/badge/index.js",
+    "./banner": "./dist/banner/index.js",
+    "./button": "./dist/button/index.js",
+    "./calendar": "./dist/calendar/index.js",
+    "./card": "./dist/card/index.js",
+    "./charts/area-chart": "./dist/charts/area-chart/index.js",
+    "./charts/bar-chart": "./dist/charts/bar-chart/index.js",
+    "./charts/line-chart": "./dist/charts/line-chart/index.js",
+    "./charts/pie-chart": "./dist/charts/pie-chart/index.js",
+    "./charts/radar-chart": "./dist/charts/radar-chart/index.js",
+    "./charts/scatter-chart": "./dist/charts/scatter-chart/index.js",
+    "./charts/tree-map": "./dist/charts/tree-map/index.js",
+    "./collapsible": "./dist/collapsible/index.js",
+    "./combobox": "./dist/combobox/index.js",
+    "./command": "./dist/command/index.js",
+    "./context-menu": "./dist/context-menu/index.js",
+    "./dialog": "./dist/dialog/index.js",
+    "./emoji-icon-picker": "./dist/emoji-icon-picker/index.js",
+    "./emoji-reaction": "./dist/emoji-reaction/index.js",
+    "./empty-state": "./dist/empty-state/index.js",
+    "./icon-button": "./dist/icon-button/index.js",
+    "./icons": "./dist/icons/index.js",
+    "./input": "./dist/input/index.js",
+    "./menu": "./dist/menu/index.js",
+    "./pill": "./dist/pill/index.js",
+    "./popover": "./dist/popover/index.js",
+    "./portal": "./dist/portal/index.js",
+    "./scrollarea": "./dist/scrollarea/index.js",
+    "./skeleton": "./dist/skeleton/index.js",
+    "./spinners": "./dist/spinners/index.js",
+    "./switch": "./dist/switch/index.js",
+    "./tab-navigation": "./dist/tab-navigation/index.js",
+    "./table": "./dist/table/index.js",
+    "./tabs": "./dist/tabs/index.js",
+    "./toast": "./dist/toast/index.js",
+    "./toolbar": "./dist/toolbar/index.js",
+    "./tooltip": "./dist/tooltip/index.js",
+    "./utils": "./dist/utils/index.js",
+    "./package.json": "./package.json",
+    "./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
+    "./styles/react-day-picker": "./dist/styles/react-day-picker.css"
+  },
+  "scripts": {
+    "dev": "tsdown --watch --no-clean",
+    "build": "tsdown",
+    "check:lint": "oxlint --max-warnings=3605 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@base-ui-components/react": "catalog:",
+    "@makeplane/propel": "catalog:",
+    "@plane/constants": "workspace:*",
+    "@plane/hooks": "workspace:*",
+    "@plane/types": "workspace:*",
+    "@plane/utils": "workspace:*",
+    "@tanstack/react-table": "catalog:",
+    "class-variance-authority": "catalog:",
+    "clsx": "catalog:",
+    "cmdk": "catalog:",
+    "framer-motion": "catalog:",
+    "frimousse": "catalog:",
+    "lucide-react": "catalog:",
+    "react": "catalog:",
+    "react-day-picker": "catalog:",
+    "react-dom": "catalog:",
+    "recharts": "catalog:",
+    "tailwind-merge": "catalog:",
+    "use-font-face-observer": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/tailwind-config": "workspace:*",
+    "@plane/typescript-config": "workspace:*",
+    "@storybook/addon-designs": "catalog:",
+    "@storybook/addon-docs": "catalog:",
+    "@storybook/react-vite": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "storybook": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/packages/propel/postcss.config.js b/packages/propel/postcss.config.js
new file mode 100644
index 0000000..3ad28f1
--- /dev/null
+++ b/packages/propel/postcss.config.js
@@ -0,0 +1,3 @@
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;
diff --git a/packages/propel/public/plane-lockup-light.svg b/packages/propel/public/plane-lockup-light.svg
new file mode 100644
index 0000000..d319a79
--- /dev/null
+++ b/packages/propel/public/plane-lockup-light.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="253" height="53" viewBox="0 0 253 53" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_27_76)">
+    <path d="M217.077 51.4468H210.972L210.98 31.4317C210.717 27.7545 208.786 25.1545 205.03 24.6199C198.587 23.7006 194.663 27.8828 194.21 34.0258L194.218 51.4468H188.041V20.2543H192.158L194.255 26.8846H194.6C195.825 22.8701 198.684 20.4831 202.898 19.5757C210.126 18.0231 216.643 22.2724 217.079 29.8239V51.4468H217.077Z" fill="#ffffff"/>
+    <path d="M163.812 19.7315C158.03 20.9566 153.67 25.2354 153.222 31.264H159.395C159.669 28.3484 161.561 25.9969 164.267 24.9553C167.418 23.7401 172.805 23.8881 175.178 26.6005C176.774 28.4253 177.305 31.5816 175.212 33.2249C172.675 35.2173 166.39 34.6117 163.214 34.7636C158.631 34.9826 154.141 36.8429 153.183 41.7727C151.1 52.5042 165.035 54.9267 171.902 49.8963C174.095 48.2885 175.672 45.8443 176.261 43.1792H176.577L178.788 51.4508H182.61V29.964C182.517 20.3214 171.462 18.108 163.81 19.7315H163.812ZM174.847 41.2637C172.484 45.649 166.958 49.0441 162.218 47.3318C158.44 45.9686 158.268 40.4095 161.973 38.9181C165.613 37.4524 173.732 38.9694 176.368 34.949C176.275 37.0855 175.906 39.2989 174.849 41.2637H174.847Z" fill="#ffffff"/>
+    <path d="M113.082 35.5652V51.4475H106.611V9.00063H124.863C125.007 8.99274 125.141 9.06178 125.283 9.06967C133.732 9.53129 139.297 13.601 139.104 22.6025C138.928 30.7991 132.663 35.2199 124.934 35.5671H113.082V35.5652ZM113.082 14.4828V30.2941H124.088C129.595 29.8956 133.071 27.1022 132.491 21.265C131.967 15.9781 127.802 14.6544 123.107 14.4788C119.795 14.3546 116.402 14.5795 113.082 14.4808V14.4828Z" fill="#ffffff"/>
+    <path d="M148.647 9H142.529V51.4468H148.647V9Z" fill="#ffffff"/>
+    <path d="M245.872 42.418C244.911 44.4953 243.138 46.1603 240.934 46.8981C238.368 47.7562 234.479 47.5431 232.083 46.2569C228.67 44.4263 227.145 40.6485 227.137 36.8984H251.891C252.194 33.6908 251.902 30.3648 250.496 27.4333C247.083 20.3177 238.859 17.7236 231.513 19.9429C222.868 22.5568 220.165 31.4162 221.462 39.6543C222.86 48.5611 230.197 52.976 238.958 52.3585C244.884 51.9423 250.271 48.1192 251.788 42.4161H245.874L245.872 42.418ZM227.208 32.4381C227.778 26.2457 233.347 23.2018 239.163 24.4269C243.361 25.3107 245.75 28.9523 245.842 33.1068H227.145C227.145 33.1068 227.19 32.6255 227.208 32.4401V32.4381Z" fill="#ffffff"/>
+    <path d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z" fill="#ffffff"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_27_76">
+      <rect width="252" height="53" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/packages/propel/src/accordion/accordion.stories.tsx b/packages/propel/src/accordion/accordion.stories.tsx
new file mode 100644
index 0000000..4f1dbd1
--- /dev/null
+++ b/packages/propel/src/accordion/accordion.stories.tsx
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Accordion } from "./accordion";
+
+const meta = {
+  title: "Components/Accordion",
+  component: Accordion.Root,
+  parameters: {
+    layout: "centered",
+    controls: { disable: true },
+  },
+  tags: ["autodocs"],
+  subcomponents: {
+    Item: Accordion.Item,
+    Trigger: Accordion.Trigger,
+    Content: Accordion.Content,
+  },
+  args: {
+    children: null,
+  },
+} satisfies Meta<typeof Accordion.Root>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    return (
+      <Accordion.Root className="w-96">
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>What is Plane?</Accordion.Trigger>
+          <Accordion.Content>
+            Plane is an open-source project management tool designed for developers and teams to plan, track, and manage
+            their work efficiently.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>How do I get started?</Accordion.Trigger>
+          <Accordion.Content>
+            You can get started by signing up for an account, creating your first workspace, and inviting your team
+            members to collaborate.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>Is it free to use?</Accordion.Trigger>
+          <Accordion.Content>
+            Plane offers both free and paid plans. The free plan includes essential features for small teams, while paid
+            plans unlock advanced functionality.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+  },
+};
+
+export const SingleOpen: Story = {
+  render() {
+    return (
+      <Accordion.Root defaultValue={["item-1"]} className="w-96">
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>Section 1</Accordion.Trigger>
+          <Accordion.Content>Content for section 1. Only one section can be open at a time.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>Section 2</Accordion.Trigger>
+          <Accordion.Content>Content for section 2.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>Section 3</Accordion.Trigger>
+          <Accordion.Content>Content for section 3.</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+  },
+};
+
+export const AllowMultiple: Story = {
+  render() {
+    return (
+      <Accordion.Root allowMultiple defaultValue={["item-1", "item-2"]} className="w-96">
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>First Section</Accordion.Trigger>
+          <Accordion.Content>Multiple sections can be open at the same time.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>Second Section</Accordion.Trigger>
+          <Accordion.Content>This section is also open by default.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>Third Section</Accordion.Trigger>
+          <Accordion.Content>You can open this section while keeping the others open.</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+  },
+};
+
+export const WithDisabledItem: Story = {
+  render() {
+    return (
+      <Accordion.Root className="w-96">
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>Enabled Section</Accordion.Trigger>
+          <Accordion.Content>This section can be toggled.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2" disabled>
+          <Accordion.Trigger>Disabled Section</Accordion.Trigger>
+          <Accordion.Content>This content cannot be accessed.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>Another Enabled Section</Accordion.Trigger>
+          <Accordion.Content>This section can also be toggled.</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+  },
+};
+
+export const CustomIcon: Story = {
+  render() {
+    return (
+      <Accordion.Root className="w-96">
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger
+            icon={
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="transition-transform group-data-[panel-open]:rotate-180"
+              >
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            }
+          >
+            Custom Chevron Icon
+          </Accordion.Trigger>
+          <Accordion.Content>
+            This accordion uses a custom chevron icon instead of the default plus icon.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger
+            icon={
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="transition-transform group-data-[panel-open]:rotate-180"
+              >
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            }
+          >
+            Another Section
+          </Accordion.Trigger>
+          <Accordion.Content>All items in this accordion use the custom icon.</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+  },
+};
+
+export const AsChildTrigger: Story = {
+  render() {
+    return (
+      <Accordion.Root className="w-96">
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger asChild>
+            <button className="bg-blue-500 hover:bg-blue-600 w-full rounded-md px-4 py-2 text-left text-on-color">
+              Custom Button Trigger
+            </button>
+          </Accordion.Trigger>
+          <Accordion.Content>
+            When using asChild, you can completely customize the trigger element without the default icon wrapper.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger asChild>
+            <button className="bg-green-500 hover:bg-green-600 w-full rounded-md px-4 py-2 text-left text-on-color">
+              Another Custom Trigger
+            </button>
+          </Accordion.Trigger>
+          <Accordion.Content>This gives you full control over the trigger styling and behavior.</Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+  },
+};
diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
new file mode 100644
index 0000000..ac5071c
--- /dev/null
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Accordion as BaseAccordion } from "@base-ui-components/react";
+
+import { AddOutline } from "@makeplane/propel/icons";
+
+export interface AccordionRootProps {
+  defaultValue?: string[];
+  allowMultiple?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export interface AccordionItemProps {
+  value: string;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export interface AccordionTriggerProps {
+  className?: string;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+  asChild?: boolean;
+  iconClassName?: string;
+}
+
+export interface AccordionContentProps {
+  className?: string;
+  contentWrapperClassName?: string;
+  children: React.ReactNode;
+}
+
+function AccordionRoot({ defaultValue = [], allowMultiple = false, className = "", children }: AccordionRootProps) {
+  return (
+    <BaseAccordion.Root defaultValue={defaultValue} openMultiple={allowMultiple} className={`text-14 ${className}`}>
+      {children}
+    </BaseAccordion.Root>
+  );
+}
+
+function AccordionItem({ value, disabled, className = "", children }: AccordionItemProps) {
+  return (
+    <BaseAccordion.Item value={value} disabled={disabled} className={`relative ${className}`}>
+      {children}
+    </BaseAccordion.Item>
+  );
+}
+
+function AccordionTrigger({
+  className = "",
+  icon = <AddOutline aria-hidden="true" className="transition-all ease-out group-data-[panel-open]:rotate-45" />,
+  iconClassName = "",
+  children,
+  asChild = false,
+}: AccordionTriggerProps) {
+  return (
+    <BaseAccordion.Header>
+      {asChild ? (
+        <BaseAccordion.Trigger className={`w-full py-2 ${className}`}>{children}</BaseAccordion.Trigger>
+      ) : (
+        <BaseAccordion.Trigger className={`flex w-full items-center justify-between gap-2 py-2 ${className}`}>
+          {children}
+          <span aria-hidden="true" className={`flex-shrink-0 ${iconClassName}`}>
+            {icon}
+          </span>
+        </BaseAccordion.Trigger>
+      )}
+    </BaseAccordion.Header>
+  );
+}
+
+function AccordionContent({ className = "", contentWrapperClassName = "", children }: AccordionContentProps) {
+  return (
+    <BaseAccordion.Panel
+      className={`h-[var(--accordion-panel-height)] overflow-hidden transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 ${className}`}
+    >
+      <div className={`py-2 ${contentWrapperClassName}`}>{children}</div>
+    </BaseAccordion.Panel>
+  );
+}
+
+export const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent,
+};
diff --git a/packages/propel/src/accordion/index.ts b/packages/propel/src/accordion/index.ts
new file mode 100644
index 0000000..d0ab5a8
--- /dev/null
+++ b/packages/propel/src/accordion/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./accordion";
diff --git a/packages/propel/src/animated-counter/animated-counter.stories.tsx b/packages/propel/src/animated-counter/animated-counter.stories.tsx
new file mode 100644
index 0000000..5a1a64f
--- /dev/null
+++ b/packages/propel/src/animated-counter/animated-counter.stories.tsx
@@ -0,0 +1,334 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AnimatedCounter } from "./animated-counter";
+
+const meta = {
+  title: "Components/AnimatedCounter",
+  component: AnimatedCounter,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    size: "md",
+    count: 0,
+  },
+} satisfies Meta<typeof AnimatedCounter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render(args) {
+    const [count, setCount] = useState(0);
+
+    return (
+      <div className="space-y-6 p-4">
+        <div className="flex items-center justify-center gap-6">
+          <button
+            className="bg-red-500 hover:bg-red-600 shadow-md rounded-lg px-4 py-2 font-medium text-on-color transition-colors focus:ring-2 focus:ring-danger-strong focus:ring-offset-2 focus:outline-none"
+            onClick={() => setCount((prev) => Math.max(0, prev - 1))}
+          >
+            -1
+          </button>
+          <div className="bg-gray-50 border-gray-200 flex h-12 min-w-[60px] items-center justify-center rounded-lg border">
+            <AnimatedCounter {...args} count={count} />
+          </div>
+          <button
+            className="bg-green-500 hover:bg-green-600 shadow-md rounded-lg px-4 py-2 font-medium text-on-color transition-colors focus:ring-2 focus:ring-success-strong focus:ring-offset-2 focus:outline-none"
+            onClick={() => setCount((prev) => prev + 1)}
+          >
+            +1
+          </button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Sizes: Story = {
+  render() {
+    const [count, setCount] = useState(42);
+
+    return (
+      <div className="space-y-6 p-4">
+        <div className="flex items-center gap-4">
+          <button
+            className="rounded-sm bg-layer-1 px-3 py-1 text-13 hover:bg-surface-2"
+            onClick={() => setCount((prev) => Math.max(0, prev - 1))}
+          >
+            -1
+          </button>
+          <button
+            className="rounded-sm bg-layer-1 px-3 py-1 text-13 hover:bg-surface-2"
+            onClick={() => setCount((prev) => prev + 1)}
+          >
+            +1
+          </button>
+        </div>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-4">
+            <span className="w-20 text-13 text-placeholder">Small:</span>
+            <div className="flex h-8 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
+              <AnimatedCounter count={count} size="sm" />
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <span className="w-20 text-13 text-placeholder">Medium:</span>
+            <div className="flex h-10 min-w-[50px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
+              <AnimatedCounter count={count} size="md" />
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            <span className="w-20 text-13 text-placeholder">Large:</span>
+            <div className="flex h-12 min-w-[60px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
+              <AnimatedCounter count={count} size="lg" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const LargeNumbers: Story = {
+  render() {
+    const [count, setCount] = useState(1234567);
+
+    return (
+      <div className="space-y-6 p-4">
+        <div className="flex items-center gap-4">
+          <button
+            className="bg-red-500 hover:bg-red-600 rounded-sm px-3 py-1 text-13 text-on-color"
+            onClick={() => setCount((prev) => Math.max(0, prev - 1000))}
+          >
+            -1000
+          </button>
+          <button
+            className="bg-green-500 hover:bg-green-600 rounded-sm px-3 py-1 text-13 text-on-color"
+            onClick={() => setCount((prev) => prev + 1000)}
+          >
+            +1000
+          </button>
+        </div>
+        <div className="flex h-12 min-w-[100px] items-center justify-center rounded-lg border border-subtle bg-layer-1">
+          <AnimatedCounter count={count} size="lg" />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Countdown: Story = {
+  render() {
+    const [count, setCount] = useState(10);
+    const [isRunning, setIsRunning] = useState(false);
+
+    useEffect(() => {
+      if (isRunning && count > 0) {
+        const timer = setTimeout(() => setCount((prev) => prev - 1), 1000);
+        return () => clearTimeout(timer);
+      }
+      if (count === 0) {
+        setIsRunning(false);
+      }
+    }, [count, isRunning]);
+
+    const handleStart = () => {
+      setCount(10);
+      setIsRunning(true);
+    };
+
+    return (
+      <div className="space-y-6 p-4">
+        <div className="flex flex-col items-center gap-4">
+          <div className="flex h-16 min-w-[60px] items-center justify-center rounded-lg border-2 border-subtle bg-layer-1">
+            <AnimatedCounter count={count} size="lg" className="text-20" />
+          </div>
+          <button
+            className="rounded-lg bg-accent-primary px-6 py-2 font-medium text-on-color hover:bg-accent-primary/80"
+            onClick={handleStart}
+            disabled={isRunning}
+          >
+            {isRunning ? "Counting..." : "Start Countdown"}
+          </button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const LiveCounter: Story = {
+  render() {
+    const [count, setCount] = useState(0);
+    const [isRunning, setIsRunning] = useState(false);
+
+    useEffect(() => {
+      if (isRunning) {
+        const timer = setInterval(() => setCount((prev) => prev + 1), 500);
+        return () => clearInterval(timer);
+      }
+    }, [isRunning]);
+
+    return (
+      <div className="space-y-6 p-4">
+        <div className="flex flex-col items-center gap-4">
+          <div className="flex h-16 min-w-[80px] items-center justify-center rounded-lg border-2 border-subtle bg-layer-1">
+            <AnimatedCounter count={count} size="lg" className="text-20" />
+          </div>
+          <div className="flex gap-2">
+            <button
+              className="bg-green-500 hover:bg-green-600 rounded-sm px-4 py-2 font-medium text-on-color"
+              onClick={() => setIsRunning(true)}
+              disabled={isRunning}
+            >
+              Start
+            </button>
+            <button
+              className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 font-medium text-on-color"
+              onClick={() => setIsRunning(false)}
+              disabled={!isRunning}
+            >
+              Stop
+            </button>
+            <button
+              className="bg-gray-500 hover:bg-gray-600 rounded-sm px-4 py-2 font-medium text-on-color"
+              onClick={() => {
+                setIsRunning(false);
+                setCount(0);
+              }}
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const MultipleCounters: Story = {
+  render() {
+    const [likes, setLikes] = useState(42);
+    const [comments, setComments] = useState(15);
+    const [shares, setShares] = useState(8);
+
+    return (
+      <div className="space-y-6 p-4">
+        <div className="max-w-md rounded-lg border border-subtle p-4">
+          <div className="mb-4 flex items-center justify-between">
+            <h3 className="font-medium">Engagement Stats</h3>
+          </div>
+          <div className="flex gap-4">
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <div className="text-13 text-placeholder">Likes</div>
+              <div className="flex items-center gap-2">
+                <button
+                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
+                  onClick={() => setLikes((prev) => prev + 1)}
+                >
+                  +
+                </button>
+                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
+                  <AnimatedCounter count={likes} size="md" />
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <div className="text-13 text-placeholder">Comments</div>
+              <div className="flex items-center gap-2">
+                <button
+                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
+                  onClick={() => setComments((prev) => prev + 1)}
+                >
+                  +
+                </button>
+                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
+                  <AnimatedCounter count={comments} size="md" />
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-1 flex-col items-center gap-2">
+              <div className="text-13 text-placeholder">Shares</div>
+              <div className="flex items-center gap-2">
+                <button
+                  className="flex h-8 w-8 items-center justify-center rounded-sm bg-layer-1 hover:bg-surface-2"
+                  onClick={() => setShares((prev) => prev + 1)}
+                >
+                  +
+                </button>
+                <div className="flex h-10 min-w-[40px] items-center justify-center rounded-sm border border-subtle bg-layer-1">
+                  <AnimatedCounter count={shares} size="md" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const InBadge: Story = {
+  render() {
+    const [notifications, setNotifications] = useState(3);
+
+    return (
+      <div className="space-y-6 p-4">
+        <div className="flex flex-col items-center gap-4">
+          <div className="relative">
+            <button className="rounded-lg border border-subtle bg-layer-1 px-4 py-2">Notifications</button>
+            <div className="bg-red-500 absolute -top-2 -right-2 flex h-6 min-w-[24px] items-center justify-center rounded-full px-1.5 text-on-color">
+              <AnimatedCounter count={notifications} size="sm" className="text-11 font-medium" />
+            </div>
+          </div>
+          <button
+            className="rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
+            onClick={() => setNotifications((prev) => prev + 1)}
+          >
+            Add Notification
+          </button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const FastAnimation: Story = {
+  render() {
+    const [count, setCount] = useState(0);
+
+    const incrementFast = () => {
+      for (let i = 1; i <= 10; i++) {
+        setTimeout(() => setCount((prev) => prev + 1), i * 50);
+      }
+    };
+
+    return (
+      <div className="space-y-6 p-4">
+        <div className="flex flex-col items-center gap-4">
+          <div className="flex h-12 min-w-[60px] items-center justify-center rounded-lg border border-subtle bg-layer-1">
+            <AnimatedCounter count={count} size="lg" />
+          </div>
+          <div className="flex gap-2">
+            <button
+              className="rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
+              onClick={incrementFast}
+            >
+              +10 Fast
+            </button>
+            <button className="rounded-sm bg-layer-1 px-4 py-2 hover:bg-surface-2" onClick={() => setCount(0)}>
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/animated-counter/animated-counter.tsx b/packages/propel/src/animated-counter/animated-counter.tsx
new file mode 100644
index 0000000..dd01fad
--- /dev/null
+++ b/packages/propel/src/animated-counter/animated-counter.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+import { cn } from "../utils";
+
+export interface AnimatedCounterProps {
+  count: number;
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeClasses = {
+  sm: "text-11",
+  md: "text-13",
+  lg: "text-14",
+};
+
+export function AnimatedCounter({ count, className, size = "md" }: AnimatedCounterProps) {
+  // states
+  const [displayCount, setDisplayCount] = useState(count);
+  const [prevCount, setPrevCount] = useState(count);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [direction, setDirection] = useState<"up" | "down" | null>(null);
+  const [animationKey, setAnimationKey] = useState(0);
+
+  useEffect(() => {
+    if (count !== prevCount) {
+      setDirection(count > prevCount ? "up" : "down");
+      setIsAnimating(true);
+      setAnimationKey((prev) => prev + 1);
+
+      // Update the display count immediately, animation will show the transition
+      setDisplayCount(count);
+
+      // End animation after CSS transition
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+        setDirection(null);
+        setPrevCount(count);
+      }, 250);
+
+      return () => clearTimeout(timer);
+    }
+  }, [count, prevCount]);
+
+  const sizeClass = sizeClasses[size];
+
+  return (
+    <div className={cn("relative inline-flex min-w-2 items-center justify-center overflow-hidden", sizeClass)}>
+      {/* Previous number sliding out */}
+      {isAnimating && (
+        <span
+          key={`prev-${animationKey}`}
+          className={cn(
+            "absolute inset-0 flex items-center justify-center font-medium",
+            "animate-slide-out",
+            direction === "up" && "[--slide-out-dir:-100%]",
+            direction === "down" && "[--slide-out-dir:100%]",
+            sizeClass,
+            {
+              "animate-fade-out animate-slide-out": isAnimating && direction === "up",
+              "animate-fade-out animate-slide-out-down": isAnimating && direction === "down",
+            }
+          )}
+        >
+          {prevCount}
+        </span>
+      )}
+
+      {/* New number sliding in */}
+      <span
+        key={`current-${animationKey}`}
+        className={cn(
+          "flex items-center justify-center font-medium",
+          !isAnimating && "opacity-100",
+          sizeClass,
+          {
+            "animate-slide-in-from-bottom": isAnimating && direction === "up",
+            "animate-slide-in-from-top": isAnimating && direction === "down",
+          },
+          className
+        )}
+      >
+        {displayCount}
+      </span>
+    </div>
+  );
+}
diff --git a/packages/propel/src/animated-counter/index.ts b/packages/propel/src/animated-counter/index.ts
new file mode 100644
index 0000000..35e0d98
--- /dev/null
+++ b/packages/propel/src/animated-counter/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { AnimatedCounter } from "./animated-counter";
+export type { AnimatedCounterProps } from "./animated-counter";
diff --git a/packages/propel/src/avatar/avatar.stories.tsx b/packages/propel/src/avatar/avatar.stories.tsx
new file mode 100644
index 0000000..dac386e
--- /dev/null
+++ b/packages/propel/src/avatar/avatar.stories.tsx
@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Avatar } from "./avatar";
+
+const meta = {
+  title: "Components/Avatar",
+  component: Avatar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    name: "John Doe",
+    src: "https://i.pravatar.cc/150?img=1",
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithName: Story = {
+  args: {
+    name: "Jane Smith",
+    src: "https://i.pravatar.cc/150?img=5",
+  },
+};
+
+export const Fallback: Story = {
+  args: {
+    name: "Alice Johnson",
+    src: "invalid-url",
+  },
+};
+
+export const FallbackWithCustomColor: Story = {
+  args: {
+    name: "Bob Wilson",
+    src: "invalid-url",
+    fallbackBackgroundColor: "#3b82f6",
+    fallbackTextColor: "#ffffff",
+  },
+};
+
+export const FallbackWithCustomText: Story = {
+  args: {
+    fallbackText: "AB",
+    src: "invalid-url",
+    fallbackBackgroundColor: "#10b981",
+    fallbackTextColor: "#ffffff",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    name: "Small Avatar",
+    src: "https://i.pravatar.cc/150?img=2",
+    size: "sm",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    name: "Medium Avatar",
+    src: "https://i.pravatar.cc/150?img=3",
+    size: "md",
+  },
+};
+
+export const Base: Story = {
+  args: {
+    name: "Base Avatar",
+    src: "https://i.pravatar.cc/150?img=4",
+    size: "base",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    name: "Large Avatar",
+    src: "https://i.pravatar.cc/150?img=6",
+    size: "lg",
+  },
+};
+
+export const CircleShape: Story = {
+  args: {
+    name: "Circle Avatar",
+    src: "https://i.pravatar.cc/150?img=7",
+    shape: "circle",
+  },
+};
+
+export const SquareShape: Story = {
+  args: {
+    name: "Square Avatar",
+    src: "https://i.pravatar.cc/150?img=8",
+    shape: "square",
+  },
+};
+
+export const AllSizes: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render() {
+    return (
+      <div className="flex items-center gap-4">
+        <Avatar name="Small" src="https://i.pravatar.cc/150?img=10" size="sm" />
+        <Avatar name="Medium" src="https://i.pravatar.cc/150?img=11" size="md" />
+        <Avatar name="Base" src="https://i.pravatar.cc/150?img=12" size="base" />
+        <Avatar name="Large" src="https://i.pravatar.cc/150?img=13" size="lg" />
+      </div>
+    );
+  },
+};
+
+export const AllShapes: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render() {
+    return (
+      <div className="flex items-center gap-4">
+        <Avatar name="Circle" src="https://i.pravatar.cc/150?img=14" shape="circle" />
+        <Avatar name="Square" src="https://i.pravatar.cc/150?img=15" shape="square" />
+      </div>
+    );
+  },
+};
+
+export const FallbackVariations: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render() {
+    return (
+      <div className="flex items-center gap-4">
+        <Avatar name="Alice" src="invalid-url" fallbackBackgroundColor="#ef4444" fallbackTextColor="#ffffff" />
+        <Avatar name="Bob" src="invalid-url" fallbackBackgroundColor="#f59e0b" fallbackTextColor="#ffffff" />
+        <Avatar name="Charlie" src="invalid-url" fallbackBackgroundColor="#10b981" fallbackTextColor="#ffffff" />
+        <Avatar name="David" src="invalid-url" fallbackBackgroundColor="#3b82f6" fallbackTextColor="#ffffff" />
+        <Avatar name="Eve" src="invalid-url" fallbackBackgroundColor="#8b5cf6" fallbackTextColor="#ffffff" />
+      </div>
+    );
+  },
+};
+
+export const AvatarGroup: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render() {
+    return (
+      <div className="flex -space-x-2">
+        <Avatar name="User 1" src="https://i.pravatar.cc/150?img=20" size="md" className="ring-2 ring-white" />
+        <Avatar name="User 2" src="https://i.pravatar.cc/150?img=21" size="md" className="ring-2 ring-white" />
+        <Avatar name="User 3" src="https://i.pravatar.cc/150?img=22" size="md" className="ring-2 ring-white" />
+        <Avatar name="User 4" src="https://i.pravatar.cc/150?img=23" size="md" className="ring-2 ring-white" />
+        <Avatar
+          fallbackText="+5"
+          src="invalid-url"
+          size="md"
+          fallbackBackgroundColor="#6b7280"
+          fallbackTextColor="#ffffff"
+          className="ring-2 ring-white"
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/avatar/avatar.tsx b/packages/propel/src/avatar/avatar.tsx
new file mode 100644
index 0000000..3f59a69
--- /dev/null
+++ b/packages/propel/src/avatar/avatar.tsx
@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Avatar as AvatarPrimitive } from "@base-ui-components/react/avatar";
+import { cn } from "../utils/classname";
+
+export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
+
+type Props = {
+  name?: string; //The name of the avatar which will be displayed on the tooltip
+  fallbackBackgroundColor?: string; //The background color if the avatar image fails to load
+  fallbackText?: string;
+  fallbackTextColor?: string; //The text color if the avatar image fails to load
+  showTooltip?: boolean;
+  size?: TAvatarSize; //The size of the avatars
+  shape?: "circle" | "square";
+  src?: string; //The source of the avatar image
+  className?: string;
+};
+
+/**
+ * Get the size details based on the size prop
+ * @param size The size of the avatar
+ * @returns The size details
+ */
+export const getSizeInfo = (size: TAvatarSize) => {
+  switch (size) {
+    case "sm":
+      return {
+        avatarSize: "h-4 w-4",
+        fontSize: "text-11",
+        spacing: "-space-x-1",
+      };
+    case "md":
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-11",
+        spacing: "-space-x-1",
+      };
+    case "base":
+      return {
+        avatarSize: "h-6 w-6",
+        fontSize: "text-13",
+        spacing: "-space-x-1.5",
+      };
+    case "lg":
+      return {
+        avatarSize: "h-7 w-7",
+        fontSize: "text-13",
+        spacing: "-space-x-1.5",
+      };
+    default:
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-11",
+        spacing: "-space-x-1",
+      };
+  }
+};
+
+/**
+ * Get the border radius based on the shape prop
+ * @param shape The shape of the avatar
+ * @returns The border radius
+ */
+export const getBorderRadius = (shape: "circle" | "square") => {
+  switch (shape) {
+    case "circle":
+      return "rounded-full";
+    case "square":
+      return "rounded-sm";
+    default:
+      return "rounded-full";
+  }
+};
+
+/**
+ * Check if the value is a valid number
+ * @param value The value to check
+ * @returns Whether the value is a valid number or not
+ */
+export const isAValidNumber = (value: unknown): value is number => typeof value === "number" && !Number.isNaN(value);
+
+export function Avatar(props: Props) {
+  const {
+    name,
+    fallbackBackgroundColor,
+    fallbackText,
+    fallbackTextColor,
+    size = "md",
+    shape = "circle",
+    src,
+    className = "",
+  } = props;
+
+  // get size details based on the size prop
+  const sizeInfo = getSizeInfo(size);
+
+  const fallbackLetter = name?.[0]?.toUpperCase() ?? fallbackText ?? "?";
+  return (
+    <div
+      className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
+        [sizeInfo.avatarSize]: !isAValidNumber(size),
+      })}
+      style={
+        isAValidNumber(size)
+          ? {
+              height: `${size}px`,
+              width: `${size}px`,
+            }
+          : {}
+      }
+      tabIndex={-1}
+    >
+      <AvatarPrimitive.Root className={cn("h-full w-full", getBorderRadius(shape), className)}>
+        <AvatarPrimitive.Image src={src} width="48" height="48" />
+        <AvatarPrimitive.Fallback
+          className={cn(sizeInfo.fontSize, "grid h-full w-full place-items-center", getBorderRadius(shape), className)}
+          style={{
+            backgroundColor: fallbackBackgroundColor ?? "var(--background-color-accent-primary)",
+            color: fallbackTextColor ?? "var(--text-color-on-color)",
+          }}
+        >
+          {fallbackLetter}
+        </AvatarPrimitive.Fallback>
+      </AvatarPrimitive.Root>
+    </div>
+  );
+}
diff --git a/packages/propel/src/avatar/index.ts b/packages/propel/src/avatar/index.ts
new file mode 100644
index 0000000..522264e
--- /dev/null
+++ b/packages/propel/src/avatar/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./avatar";
diff --git a/packages/propel/src/badge/badge.stories.tsx b/packages/propel/src/badge/badge.stories.tsx
new file mode 100644
index 0000000..75e34e9
--- /dev/null
+++ b/packages/propel/src/badge/badge.stories.tsx
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Badge } from "./badge";
+
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    children: "Badge",
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Neutral: Story = {
+  args: {
+    variant: "neutral",
+    children: "Neutral Badge",
+  },
+};
+
+export const Brand: Story = {
+  args: {
+    variant: "brand",
+    children: "Brand Badge",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+    children: "Warning Badge",
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+    children: "Success Badge",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    variant: "danger",
+    children: "Danger Badge",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: "Small Badge",
+  },
+};
+
+export const Base: Story = {
+  args: {
+    size: "base",
+    children: "Base Badge",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    children: "Large Badge",
+  },
+};
+
+export const WithPrependIcon: Story = {
+  args: {
+    prependIcon: (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M12 5v14m-7-7h14" />
+      </svg>
+    ),
+    children: "With Prepend Icon",
+  },
+};
+
+export const WithAppendIcon: Story = {
+  args: {
+    appendIcon: (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M9 5l7 7-7 7" />
+      </svg>
+    ),
+    children: "With Append Icon",
+  },
+};
+
+export const AllVariants: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-16 font-semibold">Primary Variants</h3>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="neutral">Neutral</Badge>
+            <Badge variant="brand">Brand</Badge>
+            <Badge variant="warning">Warning</Badge>
+            <Badge variant="success">Success</Badge>
+            <Badge variant="danger">Danger</Badge>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <Badge size="sm">Small</Badge>
+          <Badge size="base">Base</Badge>
+          <Badge size="lg">Large</Badge>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/badge/badge.tsx b/packages/propel/src/badge/badge.tsx
new file mode 100644
index 0000000..3d34ba7
--- /dev/null
+++ b/packages/propel/src/badge/badge.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import type { BadgeProps } from "./helper";
+import { getBadgeIconStyling, badgeVariants } from "./helper";
+
+const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.ForwardedRef<HTMLSpanElement>) {
+  const { variant = "neutral", size = "base", prependIcon = null, appendIcon = null, children, ...rest } = props;
+
+  const badgeIconStyle = getBadgeIconStyling(size ?? "base");
+
+  return (
+    <span ref={ref} className={cn(badgeVariants({ variant, size }))} {...rest}>
+      {prependIcon && React.cloneElement(prependIcon, { className: cn("shrink-0", badgeIconStyle), strokeWidth: 2 })}
+      {children}
+      {appendIcon && React.cloneElement(appendIcon, { className: cn("shrink-0", badgeIconStyle), strokeWidth: 2 })}
+    </span>
+  );
+});
+
+Badge.displayName = "plane-ui-badge";
+
+export { Badge };
diff --git a/packages/propel/src/badge/helper.tsx b/packages/propel/src/badge/helper.tsx
new file mode 100644
index 0000000..c339d69
--- /dev/null
+++ b/packages/propel/src/badge/helper.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export const badgeVariants = cva("inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors", {
+  variants: {
+    variant: {
+      neutral: "bg-layer-3 text-tertiary",
+      brand: "bg-accent-subtle-hover text-accent-primary",
+      warning: "bg-warning-subtle text-warning-primary",
+      success: "bg-success-subtle-1 text-success-primary",
+      danger: "bg-danger-subtle text-danger-primary",
+    },
+    size: {
+      sm: "h-4 rounded-sm px-1 text-caption-sm-medium",
+      base: "h-5 rounded-md px-1.5 text-caption-sm-medium",
+      lg: "h-6 rounded-md px-2 text-caption-md-medium",
+    },
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "base",
+  },
+});
+
+export type BadgeProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "className"> &
+  VariantProps<typeof badgeVariants> & {
+    // React 19 defaults ReactElement's props to `unknown`, which would force every
+    // caller to redeclare the icon's props. `any` keeps the React 18 behaviour these
+    // props already had, so cloneElement below still injects className/strokeWidth.
+    appendIcon?: React.ReactElement<any>;
+    prependIcon?: React.ReactElement<any>;
+  };
+
+export type TBadgeVariant = NonNullable<BadgeProps["variant"]>;
+export type TBadgeSize = NonNullable<BadgeProps["size"]>;
+
+const badgeIconStyling: Record<TBadgeSize, string> = {
+  sm: "size-3.5",
+  base: "size-3.5",
+  lg: "size-4",
+};
+
+export function getBadgeIconStyling(size: TBadgeSize): string {
+  return badgeIconStyling[size];
+}
+
+export function getBadgeStyling(variant: TBadgeVariant, size: TBadgeSize): string {
+  return badgeVariants({ variant, size });
+}
diff --git a/packages/propel/src/badge/index.ts b/packages/propel/src/badge/index.ts
new file mode 100644
index 0000000..7372c7c
--- /dev/null
+++ b/packages/propel/src/badge/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { Badge } from "./badge";
+export { getBadgeStyling } from "./helper";
+export type { BadgeProps, TBadgeVariant, TBadgeSize } from "./helper";
diff --git a/packages/propel/src/banner/banner.stories.tsx b/packages/propel/src/banner/banner.stories.tsx
new file mode 100644
index 0000000..abf3473
--- /dev/null
+++ b/packages/propel/src/banner/banner.stories.tsx
@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Banner } from "./banner";
+
+const meta = {
+  title: "Components/Banner",
+  component: Banner,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["success", "error", "warning", "info"],
+      description: "Visual variant of the banner",
+    },
+    title: {
+      control: "text",
+      description: "Banner message text",
+    },
+    icon: {
+      control: false,
+      description: "Icon element to display before the title",
+    },
+    action: {
+      control: false,
+      description: "Action element(s) to display on the right side",
+    },
+  },
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample icons for different variants
+function SuccessIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-success-primary"
+    >
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-danger-primary"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+  );
+}
+
+function WarningIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-yellow-600"
+    >
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+}
+
+function InfoIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-blue-600"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  );
+}
+
+function CloseButton({ onClick }: { onClick?: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="rounded-sm p-1 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
+      aria-label="Dismiss"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-text-secondary"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </button>
+  );
+}
+
+// ============================================================================
+// Interactive Stories
+// ============================================================================
+
+export const Interactive: Story = {
+  args: {
+    variant: "info",
+    title: "This is an interactive banner. Use the controls to customize it.",
+    icon: <InfoIcon />,
+    dismissible: true,
+  },
+};
+
+// ============================================================================
+// Main Variants
+// ============================================================================
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+    title: "Operation completed successfully",
+    icon: <SuccessIcon />,
+    action: <CloseButton />,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+    title: "An error occurred while processing your request",
+    icon: <ErrorIcon />,
+    action: <CloseButton />,
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: "warning",
+    title: "Your session will expire in 5 minutes",
+    icon: <WarningIcon />,
+    action: <CloseButton />,
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: "info",
+    title: "New features are available. Check out what's new!",
+    icon: <InfoIcon />,
+    action: <CloseButton />,
+  },
+};
diff --git a/packages/propel/src/banner/banner.tsx b/packages/propel/src/banner/banner.tsx
new file mode 100644
index 0000000..6afab12
--- /dev/null
+++ b/packages/propel/src/banner/banner.tsx
@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { cn } from "../utils";
+import type { TBannerVariant } from "./helper";
+import {
+  getBannerStyling,
+  getBannerTitleStyling,
+  getBannerActionStyling,
+  getBannerDismissStyling,
+  getBannerDismissIconStyling,
+} from "./helper";
+
+export interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Visual variant of the banner */
+  variant?: TBannerVariant;
+  /** Icon to display before the title */
+  icon?: React.ReactNode;
+  /** Banner title/message */
+  title?: React.ReactNode;
+  /** Action elements to display on the right side */
+  action?: React.ReactNode;
+  /** Whether the banner can be dismissed */
+  dismissible?: boolean;
+  /** Callback when banner is dismissed */
+  onDismiss?: () => void;
+  /** Whether to show the banner */
+  visible?: boolean;
+  /** Animation duration for show/hide */
+  animationDuration?: number;
+}
+
+export const Banner = React.forwardRef(function Banner(
+  {
+    icon,
+    title,
+    action,
+    variant = "info",
+    dismissible = false,
+    onDismiss,
+    visible = true,
+    animationDuration = 200,
+    className,
+    children,
+    ...props
+  }: BannerProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  // Handle dismissal
+  const handleDismiss = () => {
+    if (onDismiss) {
+      onDismiss();
+    }
+  };
+
+  // Don't render if not visible
+  if (!visible) {
+    return null;
+  }
+
+  // Get styling using helper functions
+  const containerStyling = getBannerStyling(variant);
+  const iconStyling = "flex items-center justify-center flex-shrink-0 size-5";
+  const titleStyling = getBannerTitleStyling();
+  const actionStyling = getBannerActionStyling();
+  const dismissStyling = getBannerDismissStyling();
+  const dismissIconStyling = getBannerDismissIconStyling();
+
+  // Render custom icon component if provided
+  const renderIcon = () => {
+    if (icon) {
+      return <div className={cn(iconStyling)}>{icon}</div>;
+    }
+    return null;
+  };
+
+  // Render dismiss button if dismissible
+  const renderDismissButton = () => {
+    if (!dismissible) return null;
+
+    return (
+      <button onClick={handleDismiss} className={cn(dismissStyling)} aria-label="Dismiss banner">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn(dismissIconStyling)}
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    );
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={cn(containerStyling, className)}
+      style={{
+        transitionDuration: `${animationDuration}ms`,
+      }}
+      {...props}
+    >
+      {/* Left side: Icon and Title */}
+      <div className="flex min-w-0 flex-1 items-center gap-3">
+        {renderIcon()}
+        {title && <div className={cn(titleStyling)}>{title}</div>}
+        {children}
+      </div>
+
+      {/* Right side: Actions */}
+      {(action || dismissible) && (
+        <div className={cn(actionStyling)}>
+          {action}
+          {renderDismissButton()}
+        </div>
+      )}
+    </div>
+  );
+});
+
+Banner.displayName = "Banner";
+
+// Export variant types for external use
+export type BannerVariant = TBannerVariant;
diff --git a/packages/propel/src/banner/helper.tsx b/packages/propel/src/banner/helper.tsx
new file mode 100644
index 0000000..1384b31
--- /dev/null
+++ b/packages/propel/src/banner/helper.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TBannerVariant = "success" | "error" | "warning" | "info";
+
+export interface IBannerStyling {
+  [key: string]: string;
+}
+
+export const bannerSizeStyling = {
+  container: "py-3 px-6 h-12",
+  icon: "w-5 h-5",
+  title: "text-13",
+  action: "gap-2",
+};
+
+// TODO: update this with new color once its implemented
+// Banner variant styling
+export const bannerStyling: IBannerStyling = {
+  success: "bg-success-subtle",
+  error: "bg-danger-subtle",
+  warning: "bg-yellow-500/10",
+  info: "bg-blue-500/10",
+};
+
+// Base banner styles
+export const bannerBaseStyles = "flex items-center justify-between w-full transition-all duration-200";
+
+// Get banner container styling
+export const getBannerStyling = (variant: TBannerVariant): string => {
+  const variantStyles = bannerStyling[variant];
+  const sizeStyles = bannerSizeStyling.container;
+
+  return `${bannerBaseStyles} ${variantStyles} ${sizeStyles}`;
+};
+
+// Get title styling
+export const getBannerTitleStyling = (): string =>
+  `font-medium text-secondary flex-1 min-w-0 ${bannerSizeStyling.title}`;
+
+// Get action container styling
+export const getBannerActionStyling = (): string => `flex items-center flex-shrink-0 ${bannerSizeStyling.action}`;
+
+// Get dismiss button styling
+export const getBannerDismissStyling = (): string =>
+  "rounded-sm p-1 hover:bg-surface-2 transition-colors flex-shrink-0";
+
+// Get dismiss icon styling
+export const getBannerDismissIconStyling = (): string => "text-secondary";
diff --git a/packages/propel/src/banner/index.ts b/packages/propel/src/banner/index.ts
new file mode 100644
index 0000000..1b8f799
--- /dev/null
+++ b/packages/propel/src/banner/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { Banner } from "./banner";
+export type { BannerProps, BannerVariant } from "./banner";
+export type { TBannerVariant } from "./helper";
diff --git a/packages/propel/src/button/button.stories.tsx b/packages/propel/src/button/button.stories.tsx
new file mode 100644
index 0000000..3a42c93
--- /dev/null
+++ b/packages/propel/src/button/button.stories.tsx
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    children: "Button",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "Primary Button",
+  },
+};
+
+export const ErrorFill: Story = {
+  args: {
+    variant: "error-fill",
+    children: "Error Button",
+  },
+};
+
+export const ErrorOutline: Story = {
+  args: {
+    variant: "error-outline",
+    children: "Error Outline Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    variant: "tertiary",
+    children: "Tertiary Button",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    children: "Ghost Button",
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: "link",
+    children: "Link Button",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    children: "Small Button",
+  },
+};
+
+export const Base: Story = {
+  args: {
+    size: "base",
+    children: "Base Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    children: "Large Button",
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    size: "xl",
+    children: "Extra Large Button",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+    children: "Loading Button",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: "Disabled Button",
+  },
+};
+
+export const WithPrependIcon: Story = {
+  args: {
+    prependIcon: (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M12 5v14m-7-7h14" />
+      </svg>
+    ),
+    children: "With Prepend Icon",
+  },
+};
+
+export const WithAppendIcon: Story = {
+  args: {
+    appendIcon: (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M9 5l7 7-7 7" />
+      </svg>
+    ),
+    children: "With Append Icon",
+  },
+};
+
+export const AllVariants: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-16 font-semibold">Primary Variants</h3>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="primary">Primary</Button>
+            <Button variant="error-fill">Error Fill</Button>
+            <Button variant="error-outline">Error Outline</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="tertiary">Tertiary</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="link">Link</Button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <Button size="sm">Small</Button>
+          <Button size="base">Base</Button>
+          <Button size="lg">Large</Button>
+          <Button size="xl">Extra Large</Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllStates: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-16 font-semibold">Button States</h3>
+          <div className="flex flex-wrap gap-2">
+            <Button>Default</Button>
+            <Button loading>Loading</Button>
+            <Button disabled>Disabled</Button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/button/button.tsx b/packages/propel/src/button/button.tsx
new file mode 100644
index 0000000..6055c75
--- /dev/null
+++ b/packages/propel/src/button/button.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import type { ButtonProps } from "./helper";
+import { getIconStyling, buttonVariants } from "./helper";
+
+const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) {
+  const {
+    variant = "primary",
+    size = "base",
+    className = "",
+    type = "button",
+    loading = false,
+    disabled = false,
+    prependIcon = null,
+    appendIcon = null,
+    children,
+    ...rest
+  } = props;
+
+  const buttonIconStyle = getIconStyling(size ?? "base");
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(buttonVariants({ variant, size }), className)}
+      disabled={disabled || loading}
+      {...rest}
+    >
+      {prependIcon && React.cloneElement(prependIcon, { className: cn("shrink-0", buttonIconStyle), strokeWidth: 2 })}
+      {children}
+      {appendIcon && React.cloneElement(appendIcon, { className: cn("shrink-0", buttonIconStyle), strokeWidth: 2 })}
+    </button>
+  );
+});
+
+Button.displayName = "plane-ui-button";
+
+export { Button };
diff --git a/packages/propel/src/button/helper.tsx b/packages/propel/src/button/helper.tsx
new file mode 100644
index 0000000..3ab55f5
--- /dev/null
+++ b/packages/propel/src/button/helper.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-accent-primary text-on-color hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled disabled:text-on-color-disabled",
+        "error-fill":
+          "bg-danger-primary text-on-color hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
+        "error-outline":
+          "border border-danger-strong bg-layer-2 text-danger-secondary hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
+        secondary:
+          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
+        tertiary:
+          "bg-layer-3 text-secondary hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
+        ghost:
+          "bg-layer-transparent text-secondary hover:bg-layer-transparent-hover focus:bg-layer-transparent-active active:bg-layer-transparent-active disabled:bg-layer-transparent disabled:text-disabled",
+        link: "px-0 text-link-primary underline hover:text-link-primary-hover focus:text-link-primary-hover active:text-link-primary-hover disabled:text-disabled",
+      },
+      size: {
+        sm: "h-5 rounded-sm px-1.5 text-caption-md-medium",
+        base: "h-6 rounded-md px-2 text-body-xs-medium",
+        lg: "h-7 rounded-md px-2 text-body-xs-medium",
+        xl: "h-8 rounded-md px-2 text-body-sm-medium",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+    },
+  }
+);
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    // React 19 defaults ReactElement's props to `unknown`, which would force every
+    // caller to redeclare the icon's props. `any` keeps the React 18 behaviour these
+    // props already had, so cloneElement below still injects className/strokeWidth.
+    appendIcon?: React.ReactElement<any>;
+    loading?: boolean;
+    prependIcon?: React.ReactElement<any>;
+  };
+
+export type TButtonVariant = NonNullable<ButtonProps["variant"]>;
+export type TButtonSize = NonNullable<ButtonProps["size"]>;
+
+const buttonIconStyling: Record<TButtonSize, string> = {
+  sm: "size-3.5",
+  base: "size-3.5",
+  lg: "size-4",
+  xl: "size-4 ",
+};
+
+export function getIconStyling(size: TButtonSize): string {
+  return buttonIconStyling[size];
+}
+
+export function getButtonStyling(variant: TButtonVariant, size: TButtonSize): string {
+  return buttonVariants({ variant, size });
+}
diff --git a/packages/propel/src/button/index.ts b/packages/propel/src/button/index.ts
new file mode 100644
index 0000000..95ba2da
--- /dev/null
+++ b/packages/propel/src/button/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { Button } from "./button";
+export { getButtonStyling } from "./helper";
+export type { ButtonProps, TButtonVariant, TButtonSize } from "./helper";
diff --git a/packages/propel/src/calendar/calendar.stories.tsx b/packages/propel/src/calendar/calendar.stories.tsx
new file mode 100644
index 0000000..a6a7a7a
--- /dev/null
+++ b/packages/propel/src/calendar/calendar.stories.tsx
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { DateRange } from "react-day-picker";
+import { Calendar } from "./root";
+
+const meta = {
+  title: "Components/Calendar",
+  component: Calendar,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    showOutsideDays: true,
+  },
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SingleDate: Story = {
+  render(args) {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <div className="p-4">
+        <Calendar {...args} mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+      </div>
+    );
+  },
+};
+
+export const MultipleDates: Story = {
+  render(args) {
+    const [dates, setDates] = useState<Date[] | undefined>([
+      new Date(2024, 0, 15),
+      new Date(2024, 0, 20),
+      new Date(2024, 0, 25),
+    ]);
+
+    return (
+      <div className="p-4">
+        <Calendar {...args} mode="multiple" selected={dates} onSelect={setDates} className="rounded-md border" />
+      </div>
+    );
+  },
+};
+
+export const RangeSelection: Story = {
+  render(args) {
+    const [range, setRange] = useState<DateRange | undefined>({
+      from: new Date(2024, 0, 10),
+      to: new Date(2024, 0, 20),
+    });
+
+    return (
+      <div className="p-4">
+        <Calendar {...args} mode="range" selected={range} onSelect={setRange} className="rounded-md border" />
+      </div>
+    );
+  },
+};
+
+export const DisabledDates: Story = {
+  render(args) {
+    const [date, setDate] = useState<Date | undefined>();
+    const disabledDays = [new Date(2024, 0, 5), new Date(2024, 0, 12), new Date(2024, 0, 19), new Date(2024, 0, 26)];
+
+    return (
+      <div className="p-4">
+        <Calendar
+          {...args}
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          disabled={disabledDays}
+          className="rounded-md border"
+        />
+      </div>
+    );
+  },
+};
+
+export const DisabledWeekends: Story = {
+  render(args) {
+    const [date, setDate] = useState<Date | undefined>();
+
+    return (
+      <div className="p-4">
+        <Calendar
+          {...args}
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          disabled={(date) => date.getDay() === 0 || date.getDay() === 6}
+          className="rounded-md border"
+        />
+      </div>
+    );
+  },
+};
+
+export const MinMaxDates: Story = {
+  render(args) {
+    const [date, setDate] = useState<Date | undefined>();
+    const today = new Date();
+    const tenDaysAgo = new Date(today);
+    tenDaysAgo.setDate(today.getDate() - 10);
+    const tenDaysFromNow = new Date(today);
+    tenDaysFromNow.setDate(today.getDate() + 10);
+
+    return (
+      <div className="p-4">
+        <Calendar
+          {...args}
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          disabled={(date) => date < tenDaysAgo || date > tenDaysFromNow}
+          className="rounded-md border"
+        />
+      </div>
+    );
+  },
+};
+
+export const WeekStartsOnMonday: Story = {
+  render(args) {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <div className="p-4">
+        <Calendar
+          {...args}
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          weekStartsOn={1}
+          className="rounded-md border"
+        />
+      </div>
+    );
+  },
+};
+
+export const WithoutOutsideDays: Story = {
+  render(args) {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+
+    return (
+      <div className="p-4">
+        <Calendar
+          {...args}
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          showOutsideDays={false}
+          className="rounded-md border"
+        />
+      </div>
+    );
+  },
+};
+
+export const TwoMonths: Story = {
+  render(args) {
+    const [range, setRange] = useState<DateRange | undefined>({
+      from: new Date(2024, 0, 10),
+      to: new Date(2024, 1, 15),
+    });
+
+    return (
+      <div className="p-4">
+        <Calendar
+          {...args}
+          mode="range"
+          selected={range}
+          onSelect={setRange}
+          numberOfMonths={2}
+          className="rounded-md border"
+        />
+      </div>
+    );
+  },
+};
+
+export const Uncontrolled: Story = {
+  render() {
+    return (
+      <div className="p-4">
+        <Calendar mode="single" defaultMonth={new Date(2024, 0)} showOutsideDays className="rounded-md border" />
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/calendar/index.ts b/packages/propel/src/calendar/index.ts
new file mode 100644
index 0000000..dc603cd
--- /dev/null
+++ b/packages/propel/src/calendar/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
+export type { Matcher, DateRange } from "react-day-picker";
diff --git a/packages/propel/src/calendar/root.tsx b/packages/propel/src/calendar/root.tsx
new file mode 100644
index 0000000..13f18b3
--- /dev/null
+++ b/packages/propel/src/calendar/root.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+import { ChevronLeftOutline } from "@makeplane/propel/icons";
+
+import { cn } from "../utils";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+export function Calendar({ className, showOutsideDays = true, ...props }: CalendarProps) {
+  const currentYear = new Date().getFullYear();
+  const thirtyYearsAgoFirstDay = new Date(currentYear - 30, 0, 1);
+  const thirtyYearsFromNowFirstDay = new Date(currentYear + 30, 11, 31);
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      weekStartsOn={props.weekStartsOn}
+      components={{
+        Chevron: ({ className, ...props }) => (
+          <ChevronLeftOutline
+            className={cn(
+              "size-4",
+              { "rotate-180": props.orientation === "right", "-rotate-90": props.orientation === "down" },
+              className
+            )}
+            {...props}
+          />
+        ),
+      }}
+      startMonth={thirtyYearsAgoFirstDay}
+      endMonth={thirtyYearsFromNowFirstDay}
+      {...props}
+    />
+  );
+}
diff --git a/packages/propel/src/card/card.stories.tsx b/packages/propel/src/card/card.stories.tsx
new file mode 100644
index 0000000..03927c2
--- /dev/null
+++ b/packages/propel/src/card/card.stories.tsx
@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Card, ECardVariant, ECardSpacing, ECardDirection } from "./card";
+
+const meta = {
+  title: "Components/Card",
+  component: Card,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    children: (
+      <>
+        <h3 className="text-16 font-semibold">Card Title</h3>
+        <p className="text-gray-600 text-13">This is a default card with shadow and large spacing.</p>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithShadow: Story = {
+  args: {
+    variant: ECardVariant.WITH_SHADOW,
+    children: (
+      <>
+        <h3 className="text-16 font-semibold">Card with Shadow</h3>
+        <p className="text-gray-600 text-13">Hover over this card to see the shadow effect.</p>
+      </>
+    ),
+  },
+};
+
+export const WithoutShadow: Story = {
+  args: {
+    variant: ECardVariant.WITHOUT_SHADOW,
+    children: (
+      <>
+        <h3 className="text-16 font-semibold">Card without Shadow</h3>
+        <p className="text-gray-600 text-13">This card has no shadow effect on hover.</p>
+      </>
+    ),
+  },
+};
+
+export const SmallSpacing: Story = {
+  args: {
+    spacing: ECardSpacing.SM,
+    children: (
+      <>
+        <h3 className="text-16 font-semibold">Small Spacing</h3>
+        <p className="text-gray-600 text-13">This card uses small spacing (p-4).</p>
+      </>
+    ),
+  },
+};
+
+export const LargeSpacing: Story = {
+  args: {
+    spacing: ECardSpacing.LG,
+    children: (
+      <>
+        <h3 className="text-16 font-semibold">Large Spacing</h3>
+        <p className="text-gray-600 text-13">This card uses large spacing (p-6).</p>
+      </>
+    ),
+  },
+};
+
+export const ColumnDirection: Story = {
+  args: {
+    direction: ECardDirection.COLUMN,
+    children: (
+      <>
+        <h3 className="text-16 font-semibold">Column Direction</h3>
+        <p className="text-gray-600 text-13">Content is arranged vertically.</p>
+        <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Action</button>
+      </>
+    ),
+  },
+};
+
+export const RowDirection: Story = {
+  args: {
+    direction: ECardDirection.ROW,
+    children: (
+      <>
+        <div className="flex-shrink-0">
+          <div className="bg-blue-500 h-12 w-12 rounded-sm" />
+        </div>
+        <div className="flex-1">
+          <h3 className="text-16 font-semibold">Row Direction</h3>
+          <p className="text-gray-600 text-13">Content is arranged horizontally.</p>
+        </div>
+      </>
+    ),
+  },
+};
+
+export const ProductCard: Story = {
+  args: {
+    variant: ECardVariant.WITH_SHADOW,
+    spacing: ECardSpacing.LG,
+    direction: ECardDirection.COLUMN,
+    children: (
+      <>
+        <div className="bg-gray-200 h-48 w-full rounded-sm" />
+        <h3 className="text-18 font-bold">Product Name</h3>
+        <p className="text-gray-600 text-13">A brief description of the product goes here.</p>
+        <div className="flex items-center justify-between">
+          <span className="text-16 font-semibold">$99.99</span>
+          <button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">Add to Cart</button>
+        </div>
+      </>
+    ),
+  },
+};
+
+export const UserCard: Story = {
+  args: {
+    variant: ECardVariant.WITH_SHADOW,
+    spacing: ECardSpacing.LG,
+    direction: ECardDirection.ROW,
+    children: (
+      <>
+        <div className="bg-blue-500 h-16 w-16 flex-shrink-0 rounded-full" />
+        <div className="flex-1">
+          <h3 className="text-16 font-semibold">John Doe</h3>
+          <p className="text-gray-600 text-13">Software Engineer</p>
+          <p className="text-gray-500 text-11">john.doe@example.com</p>
+        </div>
+      </>
+    ),
+  },
+};
+
+export const NotificationCard: Story = {
+  args: {
+    variant: ECardVariant.WITHOUT_SHADOW,
+    spacing: ECardSpacing.SM,
+    direction: ECardDirection.COLUMN,
+    children: (
+      <>
+        <div className="flex items-start justify-between">
+          <h4 className="font-semibold">New Message</h4>
+          <span className="text-gray-500 text-11">2m ago</span>
+        </div>
+        <p className="text-gray-600 text-13">You have received a new message from Alice.</p>
+      </>
+    ),
+  },
+};
+
+export const AllVariants: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <Card variant={ECardVariant.WITH_SHADOW}>
+          <h3 className="font-semibold">With Shadow</h3>
+          <p className="text-gray-600 text-13">Hover to see the shadow effect</p>
+        </Card>
+        <Card variant={ECardVariant.WITHOUT_SHADOW}>
+          <h3 className="font-semibold">Without Shadow</h3>
+          <p className="text-gray-600 text-13">No shadow on hover</p>
+        </Card>
+      </div>
+    );
+  },
+};
+
+export const AllSpacings: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <Card spacing={ECardSpacing.SM}>
+          <h3 className="font-semibold">Small Spacing (p-4)</h3>
+          <p className="text-gray-600 text-13">Compact padding</p>
+        </Card>
+        <Card spacing={ECardSpacing.LG}>
+          <h3 className="font-semibold">Large Spacing (p-6)</h3>
+          <p className="text-gray-600 text-13">More generous padding</p>
+        </Card>
+      </div>
+    );
+  },
+};
+
+export const AllDirections: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <Card direction={ECardDirection.COLUMN}>
+          <h3 className="font-semibold">Column Direction</h3>
+          <p className="text-gray-600 text-13">Vertical layout</p>
+          <button className="bg-blue-500 w-fit rounded-sm px-4 py-2 text-on-color">Button</button>
+        </Card>
+        <Card direction={ECardDirection.ROW}>
+          <div className="bg-blue-500 h-12 w-12 flex-shrink-0 rounded-sm" />
+          <div>
+            <h3 className="font-semibold">Row Direction</h3>
+            <p className="text-gray-600 text-13">Horizontal layout</p>
+          </div>
+        </Card>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/card/card.tsx b/packages/propel/src/card/card.tsx
new file mode 100644
index 0000000..3027500
--- /dev/null
+++ b/packages/propel/src/card/card.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils/classname";
+import type { TCardDirection, TCardSpacing, TCardVariant } from "./helper";
+import { ECardDirection, ECardSpacing, ECardVariant, getCardStyle } from "./helper";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: TCardVariant;
+  spacing?: TCardSpacing;
+  direction?: TCardDirection;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Card = React.forwardRef(function Card(props: CardProps, ref: React.ForwardedRef<HTMLDivElement>) {
+  const {
+    variant = ECardVariant.WITH_SHADOW,
+    direction = ECardDirection.COLUMN,
+    className = "",
+    spacing = ECardSpacing.LG,
+    children,
+    ...rest
+  } = props;
+
+  const style = getCardStyle(variant, spacing, direction);
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+Card.displayName = "plane-ui-card";
+
+export { Card, ECardVariant, ECardSpacing, ECardDirection };
diff --git a/packages/propel/src/card/helper.tsx b/packages/propel/src/card/helper.tsx
new file mode 100644
index 0000000..cc914c5
--- /dev/null
+++ b/packages/propel/src/card/helper.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum ECardVariant {
+  WITHOUT_SHADOW = "without-shadow",
+  WITH_SHADOW = "with-shadow",
+}
+export enum ECardDirection {
+  ROW = "row",
+  COLUMN = "column",
+}
+export enum ECardSpacing {
+  SM = "sm",
+  LG = "lg",
+}
+export type TCardVariant = ECardVariant.WITHOUT_SHADOW | ECardVariant.WITH_SHADOW;
+export type TCardDirection = ECardDirection.ROW | ECardDirection.COLUMN;
+export type TCardSpacing = ECardSpacing.SM | ECardSpacing.LG;
+
+export interface ICardProperties {
+  [key: string]: string;
+}
+
+const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
+export const containerStyle: ICardProperties = {
+  [ECardVariant.WITHOUT_SHADOW]: "",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
+};
+export const spacings = {
+  [ECardSpacing.SM]: "p-4",
+  [ECardSpacing.LG]: "p-6",
+};
+export const directions = {
+  [ECardDirection.ROW]: "flex-row space-x-3",
+  [ECardDirection.COLUMN]: "flex-col space-y-3",
+};
+export const getCardStyle = (variant: TCardVariant, spacing: TCardSpacing, direction: TCardDirection) =>
+  DEFAULT_STYLE + " " + directions[direction] + " " + containerStyle[variant] + " " + spacings[spacing];
diff --git a/packages/propel/src/card/index.ts b/packages/propel/src/card/index.ts
new file mode 100644
index 0000000..4260f85
--- /dev/null
+++ b/packages/propel/src/card/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./card";
diff --git a/packages/propel/src/charts/area-chart/index.ts b/packages/propel/src/charts/area-chart/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/charts/area-chart/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/charts/area-chart/root.tsx b/packages/propel/src/charts/area-chart/root.tsx
new file mode 100644
index 0000000..9999c3d
--- /dev/null
+++ b/packages/propel/src/charts/area-chart/root.tsx
@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useState } from "react";
+import { Area, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, Line, ComposedChart, CartesianGrid } from "recharts";
+// plane imports
+import { AXIS_LABEL_CLASSNAME } from "@plane/constants";
+import type { TAreaChartProps } from "@plane/types";
+// local components
+import { getLegendProps } from "../components/legend";
+import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
+import { CustomTooltip } from "../components/tooltip";
+
+export const AreaChart = React.memo(function AreaChart<K extends string, T extends string>(
+  props: TAreaChartProps<K, T>
+) {
+  const {
+    data,
+    areas,
+    xAxis,
+    yAxis,
+    className,
+    legend,
+    margin,
+    tickCount = {
+      x: undefined,
+      y: 10,
+    },
+    customTicks,
+    showTooltip = true,
+    comparisonLine,
+  } = props;
+  // states
+  const [activeArea, setActiveArea] = useState<string | null>(null);
+  const [activeLegend, setActiveLegend] = useState<string | null>(null);
+
+  // derived values
+  const { itemKeys, itemLabels, itemDotColors } = useMemo(() => {
+    const keys: string[] = [];
+    const labels: Record<string, string> = {};
+    const colors: Record<string, string> = {};
+
+    for (const area of areas) {
+      keys.push(area.key);
+      labels[area.key] = area.label;
+      colors[area.key] = area.fill;
+    }
+
+    return { itemKeys: keys, itemLabels: labels, itemDotColors: colors };
+  }, [areas]);
+
+  const renderAreas = useMemo(
+    () =>
+      areas.map((area) => (
+        <Area
+          key={area.key}
+          type={area.smoothCurves ? "monotone" : "linear"}
+          dataKey={area.key}
+          stackId={area.stackId}
+          fill={area.fill}
+          opacity={!!activeLegend && activeLegend !== area.key ? 0.1 : 1}
+          fillOpacity={area.fillOpacity}
+          strokeOpacity={area.strokeOpacity}
+          stroke={area.strokeColor}
+          strokeWidth={2}
+          style={area.style}
+          dot={
+            area.showDot
+              ? {
+                  fill: area.fill,
+                  fillOpacity: 1,
+                }
+              : false
+          }
+          activeDot={{
+            stroke: area.fill,
+          }}
+          onMouseEnter={() => setActiveArea(area.key)}
+          onMouseLeave={() => setActiveArea(null)}
+          className="[&_path]:transition-opacity [&_path]:duration-200"
+        />
+      )),
+    [activeLegend, areas]
+  );
+
+  // create comparison line data for straight line from origin to last point
+  const comparisonLineData = useMemo(() => {
+    if (!data || data.length === 0) return [];
+    // get the last data point
+    const lastPoint = data[data.length - 1];
+    // for the y-value in the last point, use its yAxis key value
+    const lastYValue = lastPoint[yAxis.key] ?? 0;
+    // create data for a straight line that has points at each x-axis position
+    return data.map((item, index) => {
+      // calculate the y value for this point on the straight line
+      // using linear interpolation between (0,0) and (last_x, last_y)
+      const ratio = index / (data.length - 1);
+      const interpolatedValue = ratio * lastYValue;
+
+      return {
+        [xAxis.key]: item[xAxis.key],
+        comparisonLine: interpolatedValue,
+      };
+    });
+  }, [data, xAxis.key, yAxis.key]);
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <ComposedChart
+          data={data}
+          margin={{
+            top: margin?.top === undefined ? 5 : margin.top,
+            right: margin?.right === undefined ? 30 : margin.right,
+            bottom: margin?.bottom === undefined ? 5 : margin.bottom,
+            left: margin?.left === undefined ? 20 : margin.left,
+          }}
+        >
+          <CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
+          <XAxis
+            dataKey={xAxis.key}
+            tick={(props) => {
+              const TickComponent = customTicks?.x || CustomXAxisTick;
+              return <TickComponent {...props} />;
+            }}
+            tickLine={false}
+            axisLine={false}
+            label={
+              xAxis.label && {
+                value: xAxis.label,
+                dy: 28,
+                className: AXIS_LABEL_CLASSNAME,
+              }
+            }
+            tickCount={tickCount.x}
+          />
+          <YAxis
+            domain={yAxis.domain}
+            tickLine={false}
+            axisLine={false}
+            label={
+              yAxis.label && {
+                value: yAxis.label,
+                angle: -90,
+                position: "bottom",
+                offset: yAxis.offset ?? -24,
+                dx: yAxis.dx ?? -16,
+                className: AXIS_LABEL_CLASSNAME,
+              }
+            }
+            tick={(props) => {
+              const TickComponent = customTicks?.y || CustomYAxisTick;
+              return <TickComponent {...props} />;
+            }}
+            tickCount={tickCount.y}
+            allowDecimals={!!yAxis.allowDecimals}
+          />
+          {legend && (
+            // @ts-expect-error recharts types are not up to date
+            <Legend
+              formatter={(value) => itemLabels[value]}
+              onMouseEnter={(payload) => setActiveLegend(payload.value)}
+              onMouseLeave={() => setActiveLegend(null)}
+              {...getLegendProps(legend)}
+            />
+          )}
+          {showTooltip && (
+            <Tooltip
+              cursor={{
+                stroke: "var(--text-color-tertiary)",
+                strokeDasharray: "4 4",
+              }}
+              wrapperStyle={{
+                pointerEvents: "auto",
+              }}
+              content={({ active, label, payload }) => (
+                <CustomTooltip
+                  active={active}
+                  activeKey={activeArea}
+                  label={label}
+                  payload={payload}
+                  itemKeys={itemKeys}
+                  itemLabels={itemLabels}
+                  itemDotColors={itemDotColors}
+                />
+              )}
+            />
+          )}
+          {renderAreas}
+          {comparisonLine && (
+            <Line
+              data={comparisonLineData}
+              type="linear"
+              dataKey="comparisonLine"
+              stroke={comparisonLine.strokeColor}
+              fill={comparisonLine.strokeColor}
+              strokeWidth={2}
+              strokeDasharray={comparisonLine.dashedLine ? "4 4" : "none"}
+              activeDot={false}
+              legendType="none"
+              name="Comparison line"
+            />
+          )}
+        </ComposedChart>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+AreaChart.displayName = "AreaChart";
diff --git a/packages/propel/src/charts/bar-chart/bar.tsx b/packages/propel/src/charts/bar-chart/bar.tsx
new file mode 100644
index 0000000..1df9c21
--- /dev/null
+++ b/packages/propel/src/charts/bar-chart/bar.tsx
@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+// plane imports
+import type { TBarChartShapeVariant, TBarItem, TChartData } from "@plane/types";
+import { cn } from "../../utils/classname";
+
+// Constants
+const MIN_BAR_HEIGHT_FOR_INTERNAL_TEXT = 14; // Minimum height required to show text inside bar
+const BAR_TOP_BORDER_RADIUS = 4; // Border radius for the top of bars
+const BAR_BOTTOM_BORDER_RADIUS = 4; // Border radius for the bottom of bars
+const DEFAULT_LOLLIPOP_LINE_WIDTH = 2; // Width of lollipop stick
+const DEFAULT_LOLLIPOP_CIRCLE_RADIUS = 8; // Radius of lollipop circle
+const DEFAULT_BAR_FILL_COLOR = "#000000"; // Default color when fill is a function - black
+
+// Types
+interface TShapeProps {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  dataKey: string;
+  payload: any;
+  opacity?: number;
+}
+
+interface TBarProps extends TShapeProps {
+  fill: string;
+  stackKeys: string[];
+  textClassName?: string;
+  showPercentage?: boolean;
+  showTopBorderRadius?: boolean;
+  showBottomBorderRadius?: boolean;
+  dotted?: boolean;
+}
+
+// Helper Functions
+const calculatePercentage = <K extends string, T extends string>(
+  data: TChartData<K, T>,
+  stackKeys: T[],
+  currentKey: T
+): number => {
+  const total = stackKeys.reduce((sum, key) => sum + data[key], 0);
+  return total === 0 ? 0 : Math.round((data[currentKey] / total) * 100);
+};
+
+const getBarPath = (x: number, y: number, width: number, height: number, topRadius: number, bottomRadius: number) => `
+  M${x},${y + topRadius}
+  Q${x},${y} ${x + topRadius},${y}
+  L${x + width - topRadius},${y}
+  Q${x + width},${y} ${x + width},${y + topRadius}
+  L${x + width},${y + height - bottomRadius}
+  Q${x + width},${y + height} ${x + width - bottomRadius},${y + height}
+  L${x + bottomRadius},${y + height}
+  Q${x},${y + height} ${x},${y + height - bottomRadius}
+  Z
+`;
+
+function PercentageText({
+  x,
+  y,
+  percentage,
+  className,
+}: {
+  x: number;
+  y: number;
+  percentage: number;
+  className?: string;
+}) {
+  return (
+    <text x={x} y={y} textAnchor="middle" className={cn("text-xs font-medium", className)} fill="currentColor">
+      {percentage}%
+    </text>
+  );
+}
+
+// Base Components
+const CustomBar = React.memo(function CustomBar(props: TBarProps) {
+  const {
+    opacity,
+    fill,
+    x,
+    y,
+    width,
+    height,
+    dataKey,
+    stackKeys,
+    payload,
+    textClassName,
+    showPercentage,
+    showTopBorderRadius,
+    showBottomBorderRadius,
+  } = props;
+
+  if (!height) return null;
+
+  const currentBarPercentage = calculatePercentage(payload, stackKeys, dataKey);
+  const TEXT_PADDING_Y = Math.min(6, Math.abs(MIN_BAR_HEIGHT_FOR_INTERNAL_TEXT - height / 2));
+  const textY = y + height - TEXT_PADDING_Y;
+
+  const showText =
+    showPercentage &&
+    height >= MIN_BAR_HEIGHT_FOR_INTERNAL_TEXT &&
+    currentBarPercentage !== undefined &&
+    !Number.isNaN(currentBarPercentage);
+
+  const topBorderRadius = showTopBorderRadius ? BAR_TOP_BORDER_RADIUS : 0;
+  const bottomBorderRadius = showBottomBorderRadius ? BAR_BOTTOM_BORDER_RADIUS : 0;
+
+  return (
+    <g>
+      <path
+        d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
+        fill={fill}
+        opacity={opacity}
+        style={{
+          transition: "opacity 200ms",
+          fill: fill,
+        }}
+      />
+      {showText && (
+        <PercentageText x={x + width / 2} y={textY} percentage={currentBarPercentage} className={textClassName} />
+      )}
+    </g>
+  );
+});
+
+const CustomBarLollipop = React.memo(function CustomBarLollipop(props: TBarProps) {
+  const { fill, x, y, width, height, dataKey, stackKeys, payload, textClassName, showPercentage, dotted } = props;
+
+  const currentBarPercentage = calculatePercentage(payload, stackKeys, dataKey);
+
+  return (
+    <g>
+      <line
+        x1={x + width / 2}
+        y1={y + height}
+        x2={x + width / 2}
+        y2={y}
+        stroke={fill}
+        strokeWidth={DEFAULT_LOLLIPOP_LINE_WIDTH}
+        strokeLinecap="round"
+        strokeDasharray={dotted ? "4 4" : "0"}
+      />
+      <circle cx={x + width / 2} cy={y} r={DEFAULT_LOLLIPOP_CIRCLE_RADIUS} fill={fill} stroke="none" />
+      {showPercentage && (
+        <PercentageText x={x + width / 2} y={y} percentage={currentBarPercentage} className={textClassName} />
+      )}
+    </g>
+  );
+});
+
+// Shape Variants
+/**
+ * Factory function to create shape variants with consistent props
+ * @param Component - The base component to render
+ * @param factoryProps - Additional props to pass to the component
+ * @returns A function that creates the shape with proper props
+ */
+const createShapeVariant =
+  (Component: React.ComponentType<TBarProps>, factoryProps?: Partial<TBarProps>) =>
+  (shapeProps: TShapeProps, bar: TBarItem<string>, stackKeys: string[]): React.ReactNode => {
+    const showTopBorderRadius = bar.showTopBorderRadius?.(shapeProps.dataKey, shapeProps.payload);
+    const showBottomBorderRadius = bar.showBottomBorderRadius?.(shapeProps.dataKey, shapeProps.payload);
+
+    return (
+      <Component
+        {...shapeProps}
+        fill={typeof bar.fill === "function" ? bar.fill(shapeProps.payload) : bar.fill}
+        stackKeys={stackKeys}
+        textClassName={bar.textClassName}
+        showPercentage={bar.showPercentage}
+        showTopBorderRadius={!!showTopBorderRadius}
+        showBottomBorderRadius={!!showBottomBorderRadius}
+        {...factoryProps}
+      />
+    );
+  };
+
+export { DEFAULT_BAR_FILL_COLOR };
+
+export const barShapeVariants: Record<
+  TBarChartShapeVariant,
+  (props: TShapeProps, bar: TBarItem<string>, stackKeys: string[]) => React.ReactNode
+> = {
+  bar: createShapeVariant(CustomBar), // Standard bar with rounded corners
+  lollipop: createShapeVariant(CustomBarLollipop), // Line with circle at top
+  "lollipop-dotted": createShapeVariant(CustomBarLollipop, { dotted: true }), // Dotted line lollipop variant
+};
+
+// Display names
+CustomBar.displayName = "CustomBar";
+CustomBarLollipop.displayName = "CustomBarLollipop";
diff --git a/packages/propel/src/charts/bar-chart/index.ts b/packages/propel/src/charts/bar-chart/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/charts/bar-chart/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
new file mode 100644
index 0000000..2dd5f22
--- /dev/null
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useCallback, useMemo, useState } from "react";
+import {
+  BarChart as CoreBarChart,
+  Bar,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  Legend,
+  CartesianGrid,
+} from "recharts";
+// plane imports
+import { AXIS_LABEL_CLASSNAME } from "@plane/constants";
+import type { TBarChartProps } from "@plane/types";
+// local components
+import { getLegendProps } from "../components/legend";
+import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
+import { CustomTooltip } from "../components/tooltip";
+import { barShapeVariants, DEFAULT_BAR_FILL_COLOR } from "./bar";
+
+export const BarChart = React.memo(function BarChart<K extends string, T extends string>(props: TBarChartProps<K, T>) {
+  const {
+    data,
+    bars,
+    xAxis,
+    yAxis,
+    barSize = 40,
+    className,
+    legend,
+    margin,
+    tickCount = {
+      x: undefined,
+      y: 10,
+    },
+    customTicks,
+    showTooltip = true,
+    customTooltipContent,
+  } = props;
+  // states
+  const [activeBar, setActiveBar] = useState<string | null>(null);
+  const [activeLegend, setActiveLegend] = useState<string | null>(null);
+
+  // derived values
+  const { stackKeys, stackLabels } = useMemo(() => {
+    const keys: string[] = [];
+    const labels: Record<string, string> = {};
+
+    for (const bar of bars) {
+      keys.push(bar.key);
+      labels[bar.key] = bar.label;
+    }
+
+    return { stackKeys: keys, stackLabels: labels };
+  }, [bars]);
+
+  // get bar color dynamically based on payload
+  const getBarColor = useCallback(
+    (payload: Record<string, string>[], barKey: string) => {
+      const bar = bars.find((b) => b.key === barKey);
+      if (!bar) return DEFAULT_BAR_FILL_COLOR;
+
+      if (typeof bar.fill === "function") {
+        const payloadItem = payload?.find((item) => item.dataKey === barKey);
+        if (payloadItem?.payload) {
+          try {
+            return bar.fill(payloadItem.payload);
+          } catch (error) {
+            console.error(error);
+            return DEFAULT_BAR_FILL_COLOR;
+          }
+        } else {
+          return DEFAULT_BAR_FILL_COLOR; // fallback color when no payload data
+        }
+      } else {
+        return bar.fill;
+      }
+    },
+    [bars]
+  );
+
+  // get all bar colors
+  const getAllBarColors = useCallback(
+    (payload: any[]) => {
+      const colors: Record<string, string> = {};
+      for (const bar of bars) {
+        colors[bar.key] = getBarColor(payload, bar.key);
+      }
+      return colors;
+    },
+    [bars, getBarColor]
+  );
+
+  const renderBars = useMemo(
+    () =>
+      bars.map((bar) => (
+        <Bar
+          key={bar.key}
+          dataKey={bar.key}
+          stackId={bar.stackId}
+          opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1}
+          shape={(shapeProps: any) => {
+            const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"];
+            const node = shapeVariant(shapeProps, bar, stackKeys);
+            return React.isValidElement(node) ? node : <>{node}</>;
+          }}
+          className="[&_path]:transition-opacity [&_path]:duration-200"
+          onMouseEnter={() => setActiveBar(bar.key)}
+          onMouseLeave={() => setActiveBar(null)}
+          fill={getBarColor(data, bar.key)}
+        />
+      )),
+    [activeLegend, stackKeys, bars, getBarColor, data]
+  );
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <CoreBarChart
+          data={data}
+          margin={{
+            top: margin?.top === undefined ? 5 : margin.top,
+            right: margin?.right === undefined ? 30 : margin.right,
+            bottom: margin?.bottom === undefined ? 5 : margin.bottom,
+            left: margin?.left === undefined ? 20 : margin.left,
+          }}
+          barSize={barSize}
+          className="recharts-wrapper"
+        >
+          <CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
+          <XAxis
+            dataKey={xAxis.key}
+            tick={(props) => {
+              const TickComponent = customTicks?.x || CustomXAxisTick;
+              return <TickComponent {...props} />;
+            }}
+            tickLine={false}
+            axisLine={false}
+            label={{
+              value: xAxis.label,
+              dy: xAxis.dy ?? 28,
+              className: AXIS_LABEL_CLASSNAME,
+            }}
+            tickCount={tickCount.x}
+          />
+          <YAxis
+            domain={yAxis.domain}
+            tickLine={false}
+            axisLine={false}
+            label={{
+              value: yAxis.label,
+              angle: -90,
+              position: "bottom",
+              offset: yAxis.offset ?? -24,
+              dx: yAxis.dx ?? -16,
+              className: AXIS_LABEL_CLASSNAME,
+            }}
+            tick={(props) => {
+              const TickComponent = customTicks?.y || CustomYAxisTick;
+              return <TickComponent {...props} />;
+            }}
+            tickCount={tickCount.y}
+            allowDecimals={!!yAxis.allowDecimals}
+          />
+          {legend && (
+            // @ts-expect-error recharts types are not up to date
+            <Legend
+              onMouseEnter={(payload) => setActiveLegend(payload.value)}
+              onMouseLeave={() => setActiveLegend(null)}
+              formatter={(value) => stackLabels[value]}
+              {...getLegendProps(legend)}
+            />
+          )}
+          {showTooltip && (
+            <Tooltip
+              cursor={{
+                fill: "var(--alpha-black-300)",
+                className: "bg-layer-1 cursor-pointer",
+              }}
+              wrapperStyle={{
+                pointerEvents: "auto",
+              }}
+              content={({ active, label, payload }) => {
+                if (customTooltipContent) return customTooltipContent({ active, label, payload });
+                return (
+                  <CustomTooltip
+                    active={active}
+                    label={label}
+                    payload={payload}
+                    activeKey={activeBar}
+                    itemKeys={stackKeys}
+                    itemLabels={stackLabels}
+                    itemDotColors={getAllBarColors(payload || [])}
+                  />
+                );
+              }}
+            />
+          )}
+          {renderBars}
+        </CoreBarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+BarChart.displayName = "BarChart";
diff --git a/packages/propel/src/charts/components/legend.tsx b/packages/propel/src/charts/components/legend.tsx
new file mode 100644
index 0000000..cadef00
--- /dev/null
+++ b/packages/propel/src/charts/components/legend.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type { LegendProps } from "recharts";
+// plane imports
+import type { TChartLegend } from "@plane/types";
+import { cn } from "../../utils/classname";
+
+export const getLegendProps = (args: TChartLegend): LegendProps => {
+  const { align, layout, verticalAlign } = args;
+  return {
+    layout,
+    align,
+    verticalAlign,
+    wrapperStyle: {
+      display: "flex",
+      overflow: "hidden",
+      ...(layout === "vertical"
+        ? {
+            top: 0,
+            alignItems: "center",
+            height: "100%",
+          }
+        : {
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            justifyContent: "center",
+          }),
+      ...args.wrapperStyles,
+    },
+    content: <CustomLegend {...args} />,
+  };
+};
+
+const CustomLegend = React.forwardRef(function CustomLegend(
+  props: React.ComponentProps<"div"> &
+    Pick<LegendProps, "payload" | "formatter" | "onClick" | "onMouseEnter" | "onMouseLeave"> &
+    TChartLegend,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const { formatter, layout, onClick, onMouseEnter, onMouseLeave, payload } = props;
+
+  if (!payload?.length) return null;
+
+  return (
+    <div
+      ref={ref}
+      className={cn("vertical-scrollbar scrollbar-sm flex items-center overflow-scroll px-4", {
+        "max-h-full flex-col items-start py-4": layout === "vertical",
+      })}
+    >
+      {payload.map((item, index) => (
+        <div
+          key={item.value}
+          className={cn("flex items-center gap-1.5 text-13 font-medium whitespace-nowrap text-tertiary", {
+            "px-2": layout === "horizontal",
+            "py-2": layout === "vertical",
+            "pt-0 pl-0": index === 0,
+            "pr-0 pb-0": index === payload.length - 1,
+            "cursor-pointer": !!props.onClick,
+          })}
+          onClick={(e) => onClick?.(item, index, e)}
+          onMouseEnter={(e) => onMouseEnter?.(item, index, e)}
+          onMouseLeave={(e) => onMouseLeave?.(item, index, e)}
+        >
+          <div
+            className="size-2 flex-shrink-0 rounded-xs"
+            style={{
+              backgroundColor: item.color,
+            }}
+          />
+          {/* @ts-expect-error recharts types are not up to date */}
+          {formatter?.(item.value, { value: item.value }, index) ?? item.payload?.name}
+        </div>
+      ))}
+    </div>
+  );
+});
+CustomLegend.displayName = "CustomLegend";
diff --git a/packages/propel/src/charts/components/tick.tsx b/packages/propel/src/charts/components/tick.tsx
new file mode 100644
index 0000000..307b283
--- /dev/null
+++ b/packages/propel/src/charts/components/tick.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+
+// Common classnames
+const AXIS_TICK_CLASSNAME = "fill-tertiary text-13";
+
+export const CustomXAxisTick = React.memo(function CustomXAxisTick({ x, y, payload, getLabel }: any) {
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text y={0} dy={16} textAnchor="middle" className={AXIS_TICK_CLASSNAME}>
+        {getLabel ? getLabel(payload.value) : payload.value}
+      </text>
+    </g>
+  );
+});
+CustomXAxisTick.displayName = "CustomXAxisTick";
+
+export const CustomYAxisTick = React.memo(function CustomYAxisTick({ x, y, payload }: any) {
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text dx={-10} textAnchor="middle" className={AXIS_TICK_CLASSNAME}>
+        {payload.value}
+      </text>
+    </g>
+  );
+});
+
+CustomYAxisTick.displayName = "CustomYAxisTick";
+
+export const CustomRadarAxisTick = React.memo(function CustomRadarAxisTick({
+  x,
+  y,
+  payload,
+  getLabel,
+  cx,
+  cy,
+  offset = 16,
+}: any) {
+  // Calculate direction vector from center to tick
+  const dx = x - cx;
+  const dy = y - cy;
+  // Normalize and apply offset
+  const length = Math.sqrt(dx * dx + dy * dy);
+  const normX = dx / length;
+  const normY = dy / length;
+  const labelX = x + normX * offset;
+  const labelY = y + normY * offset;
+
+  return (
+    <g transform={`translate(${labelX},${labelY})`}>
+      <text y={0} textAnchor="middle" className={AXIS_TICK_CLASSNAME}>
+        {getLabel ? getLabel(payload.value) : payload.value}
+      </text>
+    </g>
+  );
+});
+CustomRadarAxisTick.displayName = "CustomRadarAxisTick";
diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx
new file mode 100644
index 0000000..f17c343
--- /dev/null
+++ b/packages/propel/src/charts/components/tooltip.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import { Card, ECardSpacing } from "../../card";
+import { cn } from "../../utils/classname";
+
+type Props = {
+  active: boolean | undefined;
+  activeKey?: string | null;
+  label: string | undefined;
+  payload: Payload<ValueType, NameType>[] | undefined;
+  itemKeys: string[];
+  itemLabels: Record<string, string>;
+  itemDotColors: Record<string, string>;
+};
+
+export const CustomTooltip = React.memo(function CustomTooltip(props: Props) {
+  const { active, activeKey, label, payload, itemKeys, itemLabels, itemDotColors } = props;
+  // derived values
+  const filteredPayload = payload?.filter((item) => item.dataKey && itemKeys.includes(`${item.dataKey}`));
+
+  if (!active || !filteredPayload || !filteredPayload.length) return null;
+
+  return (
+    <Card
+      className="vertical-scrollbar scrollbar-sm flex max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
+      spacing={ECardSpacing.SM}
+    >
+      <p className="flex-shrink-0 truncate border-b border-subtle pb-2 text-11 font-medium text-primary">{label}</p>
+      {filteredPayload.map((item) => {
+        if (!item.dataKey) return null;
+
+        return (
+          <div
+            key={item?.dataKey}
+            className={cn("flex items-center gap-2 text-11 transition-opacity", {
+              "opacity-20": activeKey && item.dataKey !== activeKey,
+            })}
+          >
+            <div className="flex items-center gap-2 truncate">
+              {itemDotColors[item?.dataKey] && (
+                <div
+                  className="size-2 flex-shrink-0 rounded-xs"
+                  style={{
+                    backgroundColor: itemDotColors[item?.dataKey],
+                  }}
+                />
+              )}
+              <span className="truncate text-tertiary">{itemLabels[item?.dataKey]}:</span>
+            </div>
+            <span className="flex-shrink-0 font-medium text-secondary">{item?.value}</span>
+          </div>
+        );
+      })}
+    </Card>
+  );
+});
+CustomTooltip.displayName = "CustomTooltip";
diff --git a/packages/propel/src/charts/line-chart/index.ts b/packages/propel/src/charts/line-chart/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/charts/line-chart/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/charts/line-chart/root.tsx b/packages/propel/src/charts/line-chart/root.tsx
new file mode 100644
index 0000000..3e741e5
--- /dev/null
+++ b/packages/propel/src/charts/line-chart/root.tsx
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useState } from "react";
+import {
+  CartesianGrid,
+  LineChart as CoreLineChart,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+// plane imports
+import { AXIS_LABEL_CLASSNAME } from "@plane/constants";
+import type { TLineChartProps } from "@plane/types";
+// local components
+import { getLegendProps } from "../components/legend";
+import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
+import { CustomTooltip } from "../components/tooltip";
+
+export const LineChart = React.memo(function LineChart<K extends string, T extends string>(
+  props: TLineChartProps<K, T>
+) {
+  const {
+    data,
+    lines,
+    margin,
+    xAxis,
+    yAxis,
+    className,
+    tickCount = {
+      x: undefined,
+      y: 10,
+    },
+    customTicks,
+    legend,
+    showTooltip = true,
+    customTooltipContent,
+  } = props;
+  // states
+  const [activeLine, setActiveLine] = useState<string | null>(null);
+  const [activeLegend, setActiveLegend] = useState<string | null>(null);
+
+  // derived values
+  const { itemKeys, itemLabels, itemDotColors } = useMemo(() => {
+    const keys: string[] = [];
+    const labels: Record<string, string> = {};
+    const colors: Record<string, string> = {};
+
+    for (const line of lines) {
+      keys.push(line.key);
+      labels[line.key] = line.label;
+      colors[line.key] = line.stroke;
+    }
+
+    return { itemKeys: keys, itemLabels: labels, itemDotColors: colors };
+  }, [lines]);
+
+  const renderLines = useMemo(
+    () =>
+      lines.map((line) => (
+        <Line
+          key={line.key}
+          dataKey={line.key}
+          type={line.smoothCurves ? "monotone" : "linear"}
+          className="[&_path]:transition-opacity [&_path]:duration-200"
+          opacity={!!activeLegend && activeLegend !== line.key ? 0.1 : 1}
+          fill={line.fill}
+          stroke={line.stroke}
+          strokeWidth={2}
+          strokeDasharray={line.dashedLine ? "4 4" : "none"}
+          dot={
+            line.showDot
+              ? {
+                  fill: line.fill,
+                  fillOpacity: 1,
+                }
+              : false
+          }
+          activeDot={{
+            stroke: line.fill,
+          }}
+          onMouseEnter={() => setActiveLine(line.key)}
+          onMouseLeave={() => setActiveLine(null)}
+        />
+      )),
+    [activeLegend, lines]
+  );
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <CoreLineChart
+          data={data}
+          margin={{
+            top: margin?.top === undefined ? 5 : margin.top,
+            right: margin?.right === undefined ? 30 : margin.right,
+            bottom: margin?.bottom === undefined ? 5 : margin.bottom,
+            left: margin?.left === undefined ? 20 : margin.left,
+          }}
+        >
+          <CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
+          <XAxis
+            dataKey={xAxis.key}
+            tick={(props) => {
+              const TickComponent = customTicks?.x || CustomXAxisTick;
+              return <TickComponent {...props} />;
+            }}
+            tickLine={false}
+            axisLine={false}
+            label={
+              xAxis.label && {
+                value: xAxis.label,
+                dy: 28,
+                className: AXIS_LABEL_CLASSNAME,
+              }
+            }
+            tickCount={tickCount.x}
+          />
+          <YAxis
+            domain={yAxis.domain}
+            tickLine={false}
+            axisLine={false}
+            label={
+              yAxis.label && {
+                value: yAxis.label,
+                angle: -90,
+                position: "bottom",
+                offset: -24,
+                dx: yAxis.dx ?? -16,
+                className: AXIS_LABEL_CLASSNAME,
+              }
+            }
+            tick={(props) => {
+              const TickComponent = customTicks?.y || CustomYAxisTick;
+              return <TickComponent {...props} />;
+            }}
+            tickCount={tickCount.y}
+            allowDecimals={!!yAxis.allowDecimals}
+          />
+          {legend && (
+            // @ts-expect-error recharts types are not up to date
+            <Legend
+              onMouseEnter={(payload) => setActiveLegend(payload.value)}
+              onMouseLeave={() => setActiveLegend(null)}
+              formatter={(value) => itemLabels[value]}
+              {...getLegendProps(legend)}
+            />
+          )}
+          {showTooltip && (
+            <Tooltip
+              cursor={{
+                stroke: "var(--text-color-tertiary)",
+                strokeDasharray: "4 4",
+              }}
+              wrapperStyle={{
+                pointerEvents: "auto",
+              }}
+              content={({ active, label, payload }) => {
+                if (customTooltipContent) return customTooltipContent({ active, label, payload });
+                return (
+                  <CustomTooltip
+                    active={active}
+                    activeKey={activeLine}
+                    label={label}
+                    payload={payload}
+                    itemKeys={itemKeys}
+                    itemLabels={itemLabels}
+                    itemDotColors={itemDotColors}
+                  />
+                );
+              }}
+            />
+          )}
+          {renderLines}
+        </CoreLineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+LineChart.displayName = "LineChart";
diff --git a/packages/propel/src/charts/pie-chart/active-shape.tsx b/packages/propel/src/charts/pie-chart/active-shape.tsx
new file mode 100644
index 0000000..6aeaa76
--- /dev/null
+++ b/packages/propel/src/charts/pie-chart/active-shape.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Sector } from "recharts";
+import type { PieSectorDataItem } from "recharts/types/polar/Pie";
+
+export const CustomActiveShape = React.memo(function CustomActiveShape(props: PieSectorDataItem) {
+  const { cx, cy, cornerRadius, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
+
+  return (
+    <g>
+      <Sector
+        cx={cx}
+        cy={cy}
+        innerRadius={innerRadius}
+        outerRadius={outerRadius}
+        cornerRadius={cornerRadius}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        fill={fill}
+      />
+      <Sector
+        cx={cx}
+        cy={cy}
+        startAngle={startAngle}
+        endAngle={endAngle}
+        cornerRadius={cornerRadius}
+        innerRadius={(outerRadius ?? 0) + 6}
+        outerRadius={(outerRadius ?? 0) + 10}
+        fill={fill}
+      />
+    </g>
+  );
+});
diff --git a/packages/propel/src/charts/pie-chart/index.ts b/packages/propel/src/charts/pie-chart/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/charts/pie-chart/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/charts/pie-chart/root.tsx b/packages/propel/src/charts/pie-chart/root.tsx
new file mode 100644
index 0000000..7daf03e
--- /dev/null
+++ b/packages/propel/src/charts/pie-chart/root.tsx
@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useState } from "react";
+import { Cell, PieChart as CorePieChart, Label, Legend, Pie, ResponsiveContainer, Tooltip } from "recharts";
+// plane imports
+import type { TPieChartProps } from "@plane/types";
+// local components
+import { getLegendProps } from "../components/legend";
+import { CustomActiveShape } from "./active-shape";
+import { CustomPieChartTooltip } from "./tooltip";
+
+export const PieChart = React.memo(function PieChart<K extends string, T extends string>(props: TPieChartProps<K, T>) {
+  const {
+    data,
+    dataKey,
+    cells,
+    className,
+    innerRadius,
+    legend,
+    margin,
+    outerRadius,
+    showTooltip = true,
+    showLabel,
+    customLabel,
+    centerLabel,
+    cornerRadius,
+    paddingAngle,
+    tooltipLabel,
+  } = props;
+  // states
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [activeLegend, setActiveLegend] = useState<string | null>(null);
+
+  const renderCells = useMemo(
+    () =>
+      cells.map((cell, index) => (
+        <Cell
+          key={cell.key}
+          className="transition-opacity duration-200"
+          fill={cell.fill}
+          opacity={!!activeLegend && activeLegend !== cell.key ? 0.1 : 1}
+          style={{
+            outline: "none",
+          }}
+          onMouseEnter={() => setActiveIndex(index)}
+          onMouseLeave={() => setActiveIndex(null)}
+        />
+      )),
+    [activeLegend, cells]
+  );
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <CorePieChart
+          data={data}
+          margin={{
+            top: margin?.top === undefined ? 5 : margin.top,
+            right: margin?.right === undefined ? 30 : margin.right,
+            bottom: margin?.bottom === undefined ? 5 : margin.bottom,
+            left: margin?.left === undefined ? 20 : margin.left,
+          }}
+        >
+          <Pie
+            activeIndex={activeIndex === null ? undefined : activeIndex}
+            onMouseLeave={() => setActiveIndex(null)}
+            data={data}
+            dataKey={dataKey}
+            cx="50%"
+            cy="50%"
+            blendStroke
+            activeShape={<CustomActiveShape />}
+            innerRadius={innerRadius}
+            outerRadius={outerRadius}
+            cornerRadius={cornerRadius}
+            paddingAngle={paddingAngle}
+            labelLine={false}
+            label={
+              showLabel
+                ? ({ payload, ...props }) => (
+                    <text
+                      className="text-sm font-medium transition-opacity duration-200"
+                      cx={props.cx}
+                      cy={props.cy}
+                      x={props.x}
+                      y={props.y}
+                      textAnchor={props.textAnchor}
+                      dominantBaseline={props.dominantBaseline}
+                      fill="var(--text-color-secondary)"
+                      opacity={!!activeLegend && activeLegend !== payload.key ? 0.1 : 1}
+                    >
+                      {customLabel?.(payload.count) ?? payload.count}
+                    </text>
+                  )
+                : undefined
+            }
+          >
+            {renderCells}
+            {centerLabel && (
+              <Label
+                value={centerLabel.text}
+                fill={centerLabel.fill}
+                position="center"
+                opacity={activeLegend ? 0.1 : 1}
+                style={centerLabel.style}
+                className={centerLabel.className}
+              />
+            )}
+          </Pie>
+          {legend && (
+            // @ts-expect-error recharts types are not up to date
+            <Legend
+              onMouseEnter={(payload) => {
+                // @ts-expect-error recharts types are not up to date
+                const key: string | undefined = payload.payload?.key;
+                if (!key) return;
+                setActiveLegend(key);
+                setActiveIndex(null);
+              }}
+              onMouseLeave={() => setActiveLegend(null)}
+              {...getLegendProps(legend)}
+            />
+          )}
+          {showTooltip && (
+            <Tooltip
+              cursor={{
+                fill: "currentColor",
+                className: "bg-layer-1-hover cursor-pointer",
+              }}
+              wrapperStyle={{
+                pointerEvents: "none",
+              }}
+              content={({ active, payload }) => {
+                if (!active || !payload || !payload.length) return null;
+                const cellData = cells.find((c) => c.key === payload[0].payload.key);
+                if (!cellData) return null;
+                const label = tooltipLabel
+                  ? typeof tooltipLabel === "function"
+                    ? tooltipLabel(payload[0]?.payload?.payload)
+                    : tooltipLabel
+                  : dataKey;
+                return <CustomPieChartTooltip dotColor={cellData.fill} label={label} payload={payload} />;
+              }}
+            />
+          )}
+        </CorePieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+PieChart.displayName = "PieChart";
diff --git a/packages/propel/src/charts/pie-chart/tooltip.tsx b/packages/propel/src/charts/pie-chart/tooltip.tsx
new file mode 100644
index 0000000..1c2dcf5
--- /dev/null
+++ b/packages/propel/src/charts/pie-chart/tooltip.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+// plane imports
+import { Card, ECardSpacing } from "../../card";
+
+type Props = {
+  dotColor?: string;
+  label: string;
+  payload: Payload<ValueType, NameType>[];
+};
+
+export const CustomPieChartTooltip = React.memo(function CustomPieChartTooltip(props: Props) {
+  const { dotColor, label, payload } = props;
+
+  return (
+    <Card
+      className="vertical-scrollbar scrollbar-sm flex max-h-[40vh] w-[12rem] flex-col overflow-y-scroll"
+      spacing={ECardSpacing.SM}
+    >
+      <p className="flex-shrink-0 truncate border-b border-subtle pb-2 text-11 font-medium text-primary">{label}</p>
+      {payload?.map((item) => (
+        <div key={item?.dataKey} className="flex items-center gap-2 text-11 capitalize">
+          <div className="flex items-center gap-2 truncate">
+            <div
+              className="size-2 flex-shrink-0 rounded-xs"
+              style={{
+                backgroundColor: dotColor,
+              }}
+            />
+            <span className="truncate text-tertiary">{item?.name}:</span>
+          </div>
+          <span className="flex-shrink-0 font-medium text-secondary">{item?.value}</span>
+        </div>
+      ))}
+    </Card>
+  );
+});
+CustomPieChartTooltip.displayName = "CustomPieChartTooltip";
diff --git a/packages/propel/src/charts/radar-chart/index.ts b/packages/propel/src/charts/radar-chart/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/charts/radar-chart/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/charts/radar-chart/root.tsx b/packages/propel/src/charts/radar-chart/root.tsx
new file mode 100644
index 0000000..01ee5fe
--- /dev/null
+++ b/packages/propel/src/charts/radar-chart/root.tsx
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useState } from "react";
+import {
+  PolarGrid,
+  Radar,
+  RadarChart as CoreRadarChart,
+  ResponsiveContainer,
+  PolarAngleAxis,
+  Tooltip,
+  Legend,
+} from "recharts";
+import type { TRadarChartProps } from "@plane/types";
+import { getLegendProps } from "../components/legend";
+import { CustomRadarAxisTick } from "../components/tick";
+import { CustomTooltip } from "../components/tooltip";
+
+function RadarChart<T extends string, K extends string>(props: TRadarChartProps<T, K>) {
+  const { data, radars, margin, showTooltip, legend, className, angleAxis } = props;
+
+  // states
+  const [, setActiveIndex] = useState<number | null>(null);
+  const [activeLegend, setActiveLegend] = useState<string | null>(null);
+
+  const { itemKeys, itemLabels, itemDotColors } = useMemo(() => {
+    const keys: string[] = [];
+    const labels: Record<string, string> = {};
+    const colors: Record<string, string> = {};
+
+    for (const radar of radars) {
+      keys.push(radar.key);
+      labels[radar.key] = radar.name;
+      colors[radar.key] = radar.stroke ?? radar.fill ?? "#000000";
+    }
+    return { itemKeys: keys, itemLabels: labels, itemDotColors: colors };
+  }, [radars]);
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <CoreRadarChart cx="50%" cy="50%" outerRadius="80%" data={data} margin={margin}>
+          <PolarGrid stroke="var(--border-color-subtle)" />
+          <PolarAngleAxis dataKey={angleAxis.key} tick={(props) => <CustomRadarAxisTick {...props} />} />
+          {showTooltip && (
+            <Tooltip
+              cursor={{
+                stroke: "var(--text-color-tertiary)",
+                strokeDasharray: "4 4",
+              }}
+              wrapperStyle={{
+                pointerEvents: "auto",
+              }}
+              content={({ active, label, payload }) => (
+                <CustomTooltip
+                  active={active}
+                  activeKey={activeLegend}
+                  label={label}
+                  payload={payload}
+                  itemKeys={itemKeys}
+                  itemLabels={itemLabels}
+                  itemDotColors={itemDotColors}
+                />
+              )}
+            />
+          )}
+          {legend && (
+            // @ts-expect-error recharts types are not up to date
+            <Legend
+              onMouseEnter={(payload) => {
+                // @ts-expect-error recharts types are not up to date
+                const key: string | undefined = payload.payload?.key;
+                if (!key) return;
+                setActiveLegend(key);
+                setActiveIndex(null);
+              }}
+              onMouseLeave={() => setActiveLegend(null)}
+              {...getLegendProps(legend)}
+            />
+          )}
+          {radars.map((radar) => (
+            <Radar
+              key={radar.key}
+              name={radar.name}
+              dataKey={radar.key}
+              stroke={radar.stroke}
+              fill={radar.fill}
+              fillOpacity={radar.fillOpacity}
+              dot={radar.dot}
+            />
+          ))}
+        </CoreRadarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export { RadarChart };
diff --git a/packages/propel/src/charts/scatter-chart/index.ts b/packages/propel/src/charts/scatter-chart/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/charts/scatter-chart/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/charts/scatter-chart/root.tsx b/packages/propel/src/charts/scatter-chart/root.tsx
new file mode 100644
index 0000000..9da4975
--- /dev/null
+++ b/packages/propel/src/charts/scatter-chart/root.tsx
@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useState } from "react";
+import {
+  CartesianGrid,
+  ScatterChart as CoreScatterChart,
+  Legend,
+  Scatter,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+// plane imports
+import { AXIS_LABEL_CLASSNAME } from "@plane/constants";
+import type { TScatterChartProps } from "@plane/types";
+// local components
+import { getLegendProps } from "../components/legend";
+import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
+import { CustomTooltip } from "../components/tooltip";
+
+export const ScatterChart = React.memo(function ScatterChart<K extends string, T extends string>(
+  props: TScatterChartProps<K, T>
+) {
+  const {
+    data,
+    scatterPoints,
+    margin,
+    xAxis,
+    yAxis,
+    className,
+    customTicks,
+    tickCount = {
+      x: undefined,
+      y: 10,
+    },
+    legend,
+    showTooltip = true,
+    customTooltipContent,
+  } = props;
+  // states
+  const [activePoint, setActivePoint] = useState<string | null>(null);
+  const [activeLegend, setActiveLegend] = useState<string | null>(null);
+
+  //derived values
+  const { itemKeys, itemLabels, itemDotColors } = useMemo(() => {
+    const keys: string[] = [];
+    const labels: Record<string, string> = {};
+    const colors: Record<string, string> = {};
+
+    for (const point of scatterPoints) {
+      keys.push(point.key);
+      labels[point.key] = point.label;
+      colors[point.key] = point.fill;
+    }
+    return { itemKeys: keys, itemLabels: labels, itemDotColors: colors };
+  }, [scatterPoints]);
+
+  const renderPoints = useMemo(
+    () =>
+      scatterPoints.map((point) => (
+        <Scatter
+          key={point.key}
+          dataKey={point.key}
+          fill={point.fill}
+          stroke={point.stroke}
+          opacity={!!activeLegend && activeLegend !== point.key ? 0.1 : 1}
+          onMouseEnter={() => setActivePoint(point.key)}
+          onMouseLeave={() => setActivePoint(null)}
+        />
+      )),
+    [activeLegend, scatterPoints]
+  );
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <CoreScatterChart
+          data={data}
+          margin={{
+            top: margin?.top === undefined ? 5 : margin.top,
+            right: margin?.right === undefined ? 30 : margin.right,
+            bottom: margin?.bottom === undefined ? 5 : margin.bottom,
+            left: margin?.left === undefined ? 20 : margin.left,
+          }}
+        >
+          <CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
+          <XAxis
+            dataKey={xAxis.key}
+            tick={(props) => {
+              const TickComponent = customTicks?.x || CustomXAxisTick;
+              return <TickComponent {...props} />;
+            }}
+            tickLine={false}
+            axisLine={false}
+            label={
+              xAxis.label && {
+                value: xAxis.label,
+                dy: 28,
+                className: AXIS_LABEL_CLASSNAME,
+              }
+            }
+            tickCount={tickCount.x}
+          />
+          <YAxis
+            domain={yAxis.domain}
+            tickLine={false}
+            axisLine={false}
+            label={
+              yAxis.label && {
+                value: yAxis.label,
+                angle: -90,
+                position: "bottom",
+                offset: -24,
+                dx: yAxis.dx ?? -16,
+                className: AXIS_LABEL_CLASSNAME,
+              }
+            }
+            tick={(props) => {
+              const TickComponent = customTicks?.y || CustomYAxisTick;
+              return <TickComponent {...props} />;
+            }}
+            tickCount={tickCount.y}
+            allowDecimals={!!yAxis.allowDecimals}
+          />
+          {legend && (
+            // @ts-expect-error recharts types are not up to date
+            <Legend
+              onMouseEnter={(payload) => setActiveLegend(payload.value)}
+              onMouseLeave={() => setActiveLegend(null)}
+              formatter={(value) => itemLabels[value]}
+              {...getLegendProps(legend)}
+            />
+          )}
+          {showTooltip && (
+            <Tooltip
+              cursor={{
+                stroke: "var(--text-color-tertiary)",
+                strokeDasharray: "4 4",
+              }}
+              wrapperStyle={{
+                pointerEvents: "auto",
+              }}
+              content={({ active, label, payload }) =>
+                customTooltipContent ? (
+                  customTooltipContent({ active, label, payload })
+                ) : (
+                  <CustomTooltip
+                    active={active}
+                    activeKey={activePoint}
+                    label={label}
+                    payload={payload}
+                    itemKeys={itemKeys}
+                    itemLabels={itemLabels}
+                    itemDotColors={itemDotColors}
+                  />
+                )
+              }
+            />
+          )}
+          {renderPoints}
+        </CoreScatterChart>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+ScatterChart.displayName = "ScatterChart";
diff --git a/packages/propel/src/charts/tree-map/index.ts b/packages/propel/src/charts/tree-map/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/charts/tree-map/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/charts/tree-map/map-content.tsx b/packages/propel/src/charts/tree-map/map-content.tsx
new file mode 100644
index 0000000..c6cf9e7
--- /dev/null
+++ b/packages/propel/src/charts/tree-map/map-content.tsx
@@ -0,0 +1,276 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo } from "react";
+// plane imports
+import type { TBottomSectionConfig, TContentVisibility, TTopSectionConfig } from "@plane/types";
+import { cn } from "../../utils/classname";
+
+const LAYOUT = {
+  PADDING: 2,
+  RADIUS: 6,
+  TEXT: {
+    PADDING_LEFT: 8,
+    PADDING_RIGHT: 8,
+    VERTICAL_OFFSET: 20,
+    ELLIPSIS_OFFSET: -4,
+    FONT_SIZES: {
+      SM: 12.6,
+      XS: 10.8,
+    },
+  },
+  ICON: {
+    SIZE: 16,
+    GAP: 6,
+  },
+  MIN_DIMENSIONS: {
+    HEIGHT_FOR_BOTH: 42,
+    HEIGHT_FOR_TOP: 35,
+    HEIGHT_FOR_DOTS: 20,
+    WIDTH_FOR_ICON: 30,
+    WIDTH_FOR_DOTS: 15,
+  },
+};
+
+const calculateContentWidth = (text: string | number, fontSize: number): number => String(text).length * fontSize * 0.7;
+
+const calculateTopSectionConfig = (effectiveWidth: number, name: string, hasIcon: boolean): TTopSectionConfig => {
+  const iconWidth = hasIcon ? LAYOUT.ICON.SIZE + LAYOUT.ICON.GAP : 0;
+  const nameWidth = calculateContentWidth(name, LAYOUT.TEXT.FONT_SIZES.SM);
+  const totalPadding = LAYOUT.TEXT.PADDING_LEFT + LAYOUT.TEXT.PADDING_RIGHT;
+
+  // First check if we can show icon
+  const canShowIcon = hasIcon && effectiveWidth >= LAYOUT.MIN_DIMENSIONS.WIDTH_FOR_ICON;
+
+  // If we can't even show icon, check if we can show dots
+  if (!canShowIcon) {
+    return {
+      showIcon: false,
+      showName: effectiveWidth >= LAYOUT.MIN_DIMENSIONS.WIDTH_FOR_DOTS,
+      nameTruncated: true,
+    };
+  }
+
+  // We can show icon, now check if we have space for name
+  const availableWidthForName = effectiveWidth - (canShowIcon ? iconWidth : 0) - totalPadding;
+  const canShowFullName = availableWidthForName >= nameWidth;
+
+  return {
+    showIcon: canShowIcon,
+    showName: availableWidthForName > 0,
+    nameTruncated: !canShowFullName,
+  };
+};
+
+const calculateBottomSectionConfig = (
+  effectiveWidth: number,
+  effectiveHeight: number,
+  value: number | undefined,
+  label: string | undefined
+): TBottomSectionConfig => {
+  // If height is not enough for bottom section
+  if (effectiveHeight < LAYOUT.MIN_DIMENSIONS.HEIGHT_FOR_BOTH) {
+    return {
+      show: false,
+      showValue: false,
+      showLabel: false,
+      labelTruncated: false,
+    };
+  }
+
+  // Calculate widths
+  const totalPadding = LAYOUT.TEXT.PADDING_LEFT + LAYOUT.TEXT.PADDING_RIGHT;
+  const valueWidth = value ? calculateContentWidth(value, LAYOUT.TEXT.FONT_SIZES.XS) : 0;
+  const labelWidth = label ? calculateContentWidth(label, LAYOUT.TEXT.FONT_SIZES.XS) + 4 : 0; // 4px for spacing
+  const availableWidth = effectiveWidth - totalPadding;
+
+  // If we can't even show value
+  if (availableWidth < Math.max(valueWidth, LAYOUT.MIN_DIMENSIONS.WIDTH_FOR_DOTS)) {
+    return {
+      show: true,
+      showValue: false,
+      showLabel: false,
+      labelTruncated: false,
+    };
+  }
+
+  // If we can show value but not full label
+  const canShowFullLabel = availableWidth >= valueWidth + labelWidth;
+
+  return {
+    show: true,
+    showValue: true,
+    showLabel: true,
+    labelTruncated: !canShowFullLabel,
+  };
+};
+
+const calculateVisibility = (
+  width: number,
+  height: number,
+  hasIcon: boolean,
+  name: string,
+  value: number | undefined,
+  label: string | undefined
+): TContentVisibility => {
+  const effectiveWidth = width - LAYOUT.PADDING * 2;
+  const effectiveHeight = height - LAYOUT.PADDING * 2;
+
+  // If extremely small, show only dots
+  if (
+    effectiveHeight < LAYOUT.MIN_DIMENSIONS.HEIGHT_FOR_DOTS ||
+    effectiveWidth < LAYOUT.MIN_DIMENSIONS.WIDTH_FOR_DOTS
+  ) {
+    return {
+      top: { showIcon: false, showName: false, nameTruncated: false },
+      bottom: { show: false, showValue: false, showLabel: false, labelTruncated: false },
+    };
+  }
+
+  const topSection = calculateTopSectionConfig(effectiveWidth, name, hasIcon);
+  const bottomSection = calculateBottomSectionConfig(effectiveWidth, effectiveHeight, value, label);
+
+  return {
+    top: topSection,
+    bottom: bottomSection,
+  };
+};
+
+const truncateText = (text: string | number, maxWidth: number, fontSize: number, reservedWidth: number = 0): string => {
+  const availableWidth = maxWidth - reservedWidth;
+  if (availableWidth <= 0) return "";
+
+  const avgCharWidth = fontSize * 0.7;
+  const maxChars = Math.floor(availableWidth / avgCharWidth);
+  const stringText = String(text);
+
+  if (maxChars <= 3) return "";
+  if (stringText.length <= maxChars) return stringText;
+  return `${stringText.slice(0, maxChars - 3)}...`;
+};
+
+export function CustomTreeMapContent({
+  x,
+  y,
+  width,
+  height,
+  name,
+  value,
+  label,
+  fillColor,
+  fillClassName,
+  textClassName,
+  icon,
+}: any) {
+  const dimensions = useMemo(() => {
+    const pX = x + LAYOUT.PADDING;
+    const pY = y + LAYOUT.PADDING;
+    const pWidth = Math.max(0, width - LAYOUT.PADDING * 2);
+    const pHeight = Math.max(0, height - LAYOUT.PADDING * 2);
+    return { pX, pY, pWidth, pHeight };
+  }, [x, y, width, height]);
+
+  const visibility = useMemo(
+    () => calculateVisibility(width, height, !!icon, name, value, label),
+    [width, height, icon, name, value, label]
+  );
+
+  if (!name || width <= 0 || height <= 0) return null;
+
+  const renderContent = () => {
+    const { pX, pY, pWidth, pHeight } = dimensions;
+    const { top, bottom } = visibility;
+
+    const availableTextWidth = pWidth - LAYOUT.TEXT.PADDING_LEFT - LAYOUT.TEXT.PADDING_RIGHT;
+    const iconSpace = top.showIcon ? LAYOUT.ICON.SIZE + LAYOUT.ICON.GAP : 0;
+
+    return (
+      <g>
+        {/* Background shape */}
+        <path
+          d={`
+            M${pX + LAYOUT.RADIUS},${pY}
+            L${pX + pWidth - LAYOUT.RADIUS},${pY}
+            Q${pX + pWidth},${pY} ${pX + pWidth},${pY + LAYOUT.RADIUS}
+            L${pX + pWidth},${pY + pHeight - LAYOUT.RADIUS}
+            Q${pX + pWidth},${pY + pHeight} ${pX + pWidth - LAYOUT.RADIUS},${pY + pHeight}
+            L${pX + LAYOUT.RADIUS},${pY + pHeight}
+            Q${pX},${pY + pHeight} ${pX},${pY + pHeight - LAYOUT.RADIUS}
+            L${pX},${pY + LAYOUT.RADIUS}
+            Q${pX},${pY} ${pX + LAYOUT.RADIUS},${pY}
+          `}
+          className={cn("transition-colors duration-200 hover:opacity-90", fillClassName)}
+          fill={fillColor ?? "currentColor"}
+        />
+
+        {/* Top section */}
+        <g>
+          {top.showIcon && icon && (
+            <foreignObject
+              x={pX + LAYOUT.TEXT.PADDING_LEFT}
+              y={pY + LAYOUT.TEXT.PADDING_LEFT}
+              width={LAYOUT.ICON.SIZE}
+              height={LAYOUT.ICON.SIZE}
+              className={textClassName || "text-tertiary"}
+            >
+              {React.cloneElement(icon, {
+                className: cn("size-4", icon?.props?.className),
+                "aria-hidden": true,
+              })}
+            </foreignObject>
+          )}
+          {top.showName && (
+            <text
+              x={pX + LAYOUT.TEXT.PADDING_LEFT + iconSpace}
+              y={pY + LAYOUT.TEXT.VERTICAL_OFFSET}
+              textAnchor="start"
+              className={cn("tracking-wider text-13 font-light select-none", textClassName || "text-tertiary")}
+              fill="currentColor"
+            >
+              {top.nameTruncated ? truncateText(name, availableTextWidth, LAYOUT.TEXT.FONT_SIZES.SM, iconSpace) : name}
+            </text>
+          )}
+        </g>
+
+        {/* Bottom section */}
+        {bottom.show && (
+          <g>
+            {bottom.showValue && value !== undefined && (
+              <text
+                x={pX + LAYOUT.TEXT.PADDING_LEFT}
+                y={pY + pHeight - LAYOUT.TEXT.PADDING_LEFT}
+                textAnchor="start"
+                className={cn("tracking-wider text-13 font-light select-none", textClassName || "text-tertiary")}
+                fill="currentColor"
+              >
+                {value.toLocaleString()}
+                {bottom.showLabel && label && (
+                  <tspan dx={4}>
+                    {bottom.labelTruncated
+                      ? truncateText(
+                          label,
+                          availableTextWidth - calculateContentWidth(value, LAYOUT.TEXT.FONT_SIZES.SM) - 4,
+                          LAYOUT.TEXT.FONT_SIZES.SM
+                        )
+                      : label}
+                  </tspan>
+                )}
+                {!bottom.showLabel && label && <tspan dx={4}>...</tspan>}
+              </text>
+            )}
+          </g>
+        )}
+      </g>
+    );
+  };
+
+  return (
+    <g>
+      <rect x={x} y={y} width={width} height={height} fill="transparent" />
+      {renderContent()}
+    </g>
+  );
+}
diff --git a/packages/propel/src/charts/tree-map/root.tsx b/packages/propel/src/charts/tree-map/root.tsx
new file mode 100644
index 0000000..e529df4
--- /dev/null
+++ b/packages/propel/src/charts/tree-map/root.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Treemap, ResponsiveContainer, Tooltip } from "recharts";
+// plane imports
+import type { TreeMapChartProps } from "@plane/types";
+// local imports
+import { cn } from "../../utils/classname";
+import { CustomTreeMapContent } from "./map-content";
+import { TreeMapTooltip } from "./tooltip";
+
+export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChartProps) {
+  const { data, className = "w-full h-96", isAnimationActive = false, showTooltip = true } = props;
+  return (
+    <div className={cn(className)}>
+      <ResponsiveContainer width="100%" height="100%">
+        <Treemap
+          data={data}
+          nameKey="name"
+          dataKey="value"
+          stroke="transparent"
+          className="cursor-pointer bg-layer-1"
+          content={<CustomTreeMapContent />}
+          animationEasing="ease-out"
+          isUpdateAnimationActive={isAnimationActive}
+          animationBegin={100}
+          animationDuration={500}
+        >
+          {showTooltip && (
+            <Tooltip
+              content={({ active, payload }) => <TreeMapTooltip active={active} payload={payload} />}
+              cursor={{
+                fill: "currentColor",
+                className: "bg-layer-1 cursor-pointer",
+              }}
+              wrapperStyle={{
+                pointerEvents: "auto",
+              }}
+            />
+          )}
+        </Treemap>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+TreeMapChart.displayName = "TreeMapChart";
diff --git a/packages/propel/src/charts/tree-map/tooltip.tsx b/packages/propel/src/charts/tree-map/tooltip.tsx
new file mode 100644
index 0000000..8fb731c
--- /dev/null
+++ b/packages/propel/src/charts/tree-map/tooltip.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// plane imports
+import { Card, ECardSpacing } from "../../card";
+
+interface TreeMapTooltipProps {
+  active: boolean | undefined;
+  payload: any[] | undefined;
+}
+
+export const TreeMapTooltip = React.memo(function TreeMapTooltip({ active, payload }: TreeMapTooltipProps) {
+  if (!active || !payload || !payload[0]?.payload) return null;
+
+  const data = payload[0].payload;
+
+  return (
+    <Card className="flex flex-col space-y-1.5" spacing={ECardSpacing.SM}>
+      <div className="flex items-center gap-2 border-b border-subtle pb-2.5">
+        {data?.icon}
+        <p className="text-11 font-medium text-primary capitalize">{data?.name}</p>
+      </div>
+      <span className="text-11 font-medium text-secondary">
+        {data?.value.toLocaleString()}
+        {data.label && ` ${data.label}`}
+      </span>
+    </Card>
+  );
+});
+
+TreeMapTooltip.displayName = "TreeMapTooltip";
diff --git a/packages/propel/src/collapsible/collapsible.stories.tsx b/packages/propel/src/collapsible/collapsible.stories.tsx
new file mode 100644
index 0000000..bc6b4e7
--- /dev/null
+++ b/packages/propel/src/collapsible/collapsible.stories.tsx
@@ -0,0 +1,183 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useArgs } from "storybook/preview-api";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
+import { Collapsible } from "./collapsible";
+
+const meta = {
+  title: "Components/Collapsible",
+  component: Collapsible.CollapsibleRoot,
+  subcomponents: {
+    CollapsibleTrigger: Collapsible.CollapsibleTrigger,
+    CollapsibleContent: Collapsible.CollapsibleContent,
+  },
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    children: null,
+    isOpen: false,
+    onToggle: () => {},
+  },
+  render(args) {
+    const [{ isOpen }, updateArgs] = useArgs();
+    const toggleOpen = () => updateArgs({ isOpen: !isOpen });
+
+    return (
+      <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={toggleOpen} className="w-96">
+        <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
+          <span className="font-semibold">Click to toggle</span>
+          <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+        </Collapsible.CollapsibleTrigger>
+        <Collapsible.CollapsibleContent className="mt-2">
+          <div className="border-gray-200 rounded-md border p-4">
+            <p className="text-13">This is the collapsible content that can be shown or hidden.</p>
+          </div>
+        </Collapsible.CollapsibleContent>
+      </Collapsible.CollapsibleRoot>
+    );
+  },
+} satisfies Meta<typeof Collapsible.CollapsibleRoot>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const DefaultOpen: Story = {
+  args: { isOpen: true },
+};
+
+export const Controlled: Story = {
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <button onClick={() => setIsOpen(true)} className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">
+            Open
+          </button>
+          <button onClick={() => setIsOpen(false)} className="bg-gray-500 rounded-sm px-4 py-2 text-13 text-on-color">
+            Close
+          </button>
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className="bg-green-500 rounded-sm px-4 py-2 text-13 text-on-color"
+          >
+            Toggle
+          </button>
+        </div>
+        <Collapsible.CollapsibleRoot isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
+            <span className="font-semibold">Controlled Collapsible</span>
+            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+          </Collapsible.CollapsibleTrigger>
+          <Collapsible.CollapsibleContent className="mt-2">
+            <div className="border-gray-200 rounded-md border p-4">
+              <p className="text-13">This collapsible is controlled by external state.</p>
+              <p className="mt-2 text-13">Current state: {isOpen ? "Open" : "Closed"}</p>
+            </div>
+          </Collapsible.CollapsibleContent>
+        </Collapsible.CollapsibleRoot>
+      </div>
+    );
+  },
+};
+
+export const NestedContent: Story = {
+  render(args) {
+    const [isOpen, setIsOpen] = useState(args.isOpen);
+    return (
+      <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
+        <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
+          <span className="font-semibold">Collapsible with Nested Content</span>
+          <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+        </Collapsible.CollapsibleTrigger>
+        <Collapsible.CollapsibleContent className="mt-2">
+          <div className="border-gray-200 space-y-2 rounded-md border p-4">
+            <h4 className="font-semibold">Section 1</h4>
+            <p className="text-13">This is some content in the first section.</p>
+            <h4 className="font-semibold">Section 2</h4>
+            <p className="text-13">This is some content in the second section.</p>
+            <ul className="list-inside list-disc text-13">
+              <li>Item 1</li>
+              <li>Item 2</li>
+              <li>Item 3</li>
+            </ul>
+          </div>
+        </Collapsible.CollapsibleContent>
+      </Collapsible.CollapsibleRoot>
+    );
+  },
+};
+
+export const CustomStyling: Story = {
+  render(args) {
+    const [isOpen, setIsOpen] = useState(args.isOpen);
+    return (
+      <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
+        <Collapsible.CollapsibleTrigger className="from-purple-500 to-pink-500 shadow-lg hover:shadow-xl flex w-full items-center justify-between rounded-lg bg-gradient-to-r px-6 py-3 text-on-color transition-all">
+          <span className="text-16 font-bold">Custom Styled Trigger</span>
+          <ChevronDownOutline className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
+        </Collapsible.CollapsibleTrigger>
+        <Collapsible.CollapsibleContent className="mt-4">
+          <div className="from-purple-100 to-pink-100 shadow-md rounded-lg bg-gradient-to-br p-6">
+            <p className="text-purple-900">This collapsible has custom styling with gradients, shadows, and colors.</p>
+          </div>
+        </Collapsible.CollapsibleContent>
+      </Collapsible.CollapsibleRoot>
+    );
+  },
+};
+
+export const MultipleCollapsibles: Story = {
+  render() {
+    return (
+      <div className="w-96 space-y-2">
+        <Collapsible.CollapsibleRoot>
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
+            <span className="font-semibold">First Item</span>
+            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+          </Collapsible.CollapsibleTrigger>
+          <Collapsible.CollapsibleContent className="mt-2">
+            <div className="border-gray-200 rounded-md border p-4">
+              <p className="text-13">Content for the first item.</p>
+            </div>
+          </Collapsible.CollapsibleContent>
+        </Collapsible.CollapsibleRoot>
+
+        <Collapsible.CollapsibleRoot>
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
+            <span className="font-semibold">Second Item</span>
+            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+          </Collapsible.CollapsibleTrigger>
+          <Collapsible.CollapsibleContent className="mt-2">
+            <div className="border-gray-200 rounded-md border p-4">
+              <p className="text-13">Content for the second item.</p>
+            </div>
+          </Collapsible.CollapsibleContent>
+        </Collapsible.CollapsibleRoot>
+
+        <Collapsible.CollapsibleRoot>
+          <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
+            <span className="font-semibold">Third Item</span>
+            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+          </Collapsible.CollapsibleTrigger>
+          <Collapsible.CollapsibleContent className="mt-2">
+            <div className="border-gray-200 rounded-md border p-4">
+              <p className="text-13">Content for the third item.</p>
+            </div>
+          </Collapsible.CollapsibleContent>
+        </Collapsible.CollapsibleRoot>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/collapsible/collapsible.tsx b/packages/propel/src/collapsible/collapsible.tsx
new file mode 100644
index 0000000..a92b164
--- /dev/null
+++ b/packages/propel/src/collapsible/collapsible.tsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState, useEffect, useCallback, createContext, useContext } from "react";
+import { Collapsible as BaseCollapsible } from "@base-ui-components/react/collapsible";
+import clsx from "clsx";
+
+// Types
+type CollapsibleContextType = {
+  isOpen: boolean;
+  onToggle: () => void;
+};
+
+type RootProps = {
+  children: React.ReactNode;
+  className?: string;
+  isOpen?: boolean;
+  onToggle?: () => void;
+  defaultOpen?: boolean;
+};
+
+type TriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+  buttonRef?: React.RefObject<HTMLButtonElement | null>;
+};
+
+type ContentProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+// Context
+const CollapsibleContext = createContext<CollapsibleContextType | undefined>(undefined);
+
+// Hook
+const useCollapsible = () => {
+  const context = useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error("Collapsible compound components cannot be rendered outside the Collapsible component");
+  }
+  return context;
+};
+
+// Components
+function Root({ children, className, isOpen: controlledIsOpen, onToggle, defaultOpen }: RootProps) {
+  const [localIsOpen, setLocalIsOpen] = useState<boolean>(controlledIsOpen || defaultOpen || false);
+
+  useEffect(() => {
+    if (controlledIsOpen !== undefined) {
+      setLocalIsOpen(controlledIsOpen);
+    }
+  }, [controlledIsOpen]);
+
+  const handleToggle = useCallback(() => {
+    if (controlledIsOpen !== undefined) {
+      onToggle?.();
+    } else {
+      setLocalIsOpen((prev) => !prev);
+    }
+  }, [controlledIsOpen, onToggle]);
+
+  return (
+    <CollapsibleContext.Provider value={{ isOpen: localIsOpen, onToggle: handleToggle }}>
+      <BaseCollapsible.Root
+        className={clsx(className)}
+        defaultOpen={defaultOpen}
+        open={localIsOpen}
+        onOpenChange={handleToggle}
+      >
+        {children}
+      </BaseCollapsible.Root>
+    </CollapsibleContext.Provider>
+  );
+}
+
+function Trigger({ children, className, buttonRef }: TriggerProps) {
+  const { isOpen } = useCollapsible();
+
+  return (
+    <BaseCollapsible.Trigger data-panel-open={isOpen} ref={buttonRef} className={className}>
+      {children}
+    </BaseCollapsible.Trigger>
+  );
+}
+
+function Content({ children, className }: ContentProps) {
+  return (
+    <BaseCollapsible.Panel
+      className={clsx(
+        "flex h-[var(--collapsible-panel-height)] flex-col overflow-hidden text-13 transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
+        className
+      )}
+    >
+      {children}
+    </BaseCollapsible.Panel>
+  );
+}
+
+// Compound Component
+export const Collapsible = {
+  CollapsibleRoot: Root,
+  CollapsibleTrigger: Trigger,
+  CollapsibleContent: Content,
+};
diff --git a/packages/propel/src/collapsible/index.ts b/packages/propel/src/collapsible/index.ts
new file mode 100644
index 0000000..7528e0d
--- /dev/null
+++ b/packages/propel/src/collapsible/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./collapsible";
diff --git a/packages/propel/src/combobox/combobox.stories.tsx b/packages/propel/src/combobox/combobox.stories.tsx
new file mode 100644
index 0000000..2db76f6
--- /dev/null
+++ b/packages/propel/src/combobox/combobox.stories.tsx
@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronExpandOutline, TickOutline } from "@makeplane/propel/icons";
+import { useArgs } from "storybook/preview-api";
+import { Combobox } from "./combobox";
+
+const frameworks = [
+  { value: "react", label: "React" },
+  { value: "vue", label: "Vue" },
+  { value: "angular", label: "Angular" },
+  { value: "svelte", label: "Svelte" },
+  { value: "solid", label: "Solid" },
+  { value: "next", label: "Next.js" },
+  { value: "nuxt", label: "Nuxt" },
+  { value: "remix", label: "Remix" },
+];
+
+const meta = {
+  title: "Components/Combobox",
+  component: Combobox,
+  subcomponents: {
+    ComboboxButton: Combobox.Button,
+    ComboboxOptions: Combobox.Options,
+    ComboboxOption: Combobox.Option,
+  },
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    children: null,
+    value: "",
+    onValueChange: () => {},
+  },
+  render(args) {
+    const [{ value }, updateArgs] = useArgs();
+    const setValue = (newValue: string | string[]) => updateArgs({ value: newValue });
+    return (
+      <Combobox {...args} value={value} onValueChange={(v) => setValue(v as string)}>
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
+          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Combobox.Button>
+        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+          {frameworks.map((framework) => (
+            <Combobox.Option
+              key={framework.value}
+              value={framework.value}
+              className="flex items-center gap-2 px-4 py-2"
+            >
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
+              <span>{framework.label}</span>
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox>
+    );
+  },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutSearch: Story = {
+  render() {
+    const [value, setValue] = useState("");
+    return (
+      <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
+          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Combobox.Button>
+        <Combobox.Options className="w-72">
+          {frameworks.map((framework) => (
+            <Combobox.Option
+              key={framework.value}
+              value={framework.value}
+              className="flex items-center gap-2 px-4 py-2"
+            >
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
+              <span>{framework.label}</span>
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox>
+    );
+  },
+};
+
+export const MultiSelect: Story = {
+  render() {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+      <Combobox multiSelect value={value} onValueChange={(v) => setValue(v as string[])}>
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
+          <span className="truncate">{value.length > 0 ? `${value.length} selected` : "Select frameworks..."}</span>
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Combobox.Button>
+        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+          {frameworks.map((framework) => (
+            <Combobox.Option
+              key={framework.value}
+              value={framework.value}
+              className="flex items-center gap-2 px-4 py-2"
+            >
+              {value.includes(framework.value) && <TickOutline className="h-4 w-4" />}
+              <span>{framework.label}</span>
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox>
+    );
+  },
+};
+
+export const MultiSelectWithLimit: Story = {
+  render() {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+      <div className="space-y-2">
+        <Combobox multiSelect maxSelections={3} value={value} onValueChange={(v) => setValue(v as string[])}>
+          <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
+            <span className="truncate">
+              {value.length > 0 ? `${value.length}/3 selected` : "Select up to 3 frameworks..."}
+            </span>
+            <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Combobox.Button>
+          <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+            {frameworks.map((framework) => (
+              <Combobox.Option
+                key={framework.value}
+                value={framework.value}
+                className="flex items-center gap-2 px-4 py-2"
+              >
+                {value.includes(framework.value) && <TickOutline className="h-4 w-4" />}
+                <span>{framework.label}</span>
+              </Combobox.Option>
+            ))}
+          </Combobox.Options>
+        </Combobox>
+        <p className="text-gray-500 text-11">Maximum 3 selections allowed</p>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render() {
+    const [value, setValue] = useState("");
+    return (
+      <Combobox disabled value={value} onValueChange={(v) => setValue(v as string)}>
+        <Combobox.Button className="border-gray-300 bg-gray-100 flex w-72 items-center justify-between rounded-md border px-4 py-2 opacity-50">
+          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Combobox.Button>
+        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+          {frameworks.map((framework) => (
+            <Combobox.Option
+              key={framework.value}
+              value={framework.value}
+              className="flex items-center gap-2 px-4 py-2"
+            >
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
+              <span>{framework.label}</span>
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox>
+    );
+  },
+};
+
+export const DisabledOptions: Story = {
+  render() {
+    const [value, setValue] = useState("");
+    return (
+      <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
+          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Combobox.Button>
+        <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
+          {frameworks.map((framework) => (
+            <Combobox.Option
+              key={framework.value}
+              value={framework.value}
+              disabled={framework.value === "angular" || framework.value === "svelte"}
+              className="flex items-center gap-2 px-4 py-2"
+            >
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
+              <span>{framework.label}</span>
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox>
+    );
+  },
+};
+
+export const CustomMaxHeight: Story = {
+  render() {
+    const [value, setValue] = useState("");
+    return (
+      <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
+          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Combobox.Button>
+        <Combobox.Options showSearch searchPlaceholder="Search framework..." maxHeight="sm" className="w-72">
+          {frameworks.map((framework) => (
+            <Combobox.Option
+              key={framework.value}
+              value={framework.value}
+              className="flex items-center gap-2 px-4 py-2"
+            >
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
+              <span>{framework.label}</span>
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox>
+    );
+  },
+};
+
+export const CustomEmptyMessage: Story = {
+  render() {
+    const [value, setValue] = useState("");
+    return (
+      <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
+        <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
+          <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Combobox.Button>
+        <Combobox.Options
+          showSearch
+          searchPlaceholder="Search framework..."
+          emptyMessage="No frameworks found. Try a different search."
+          className="w-72"
+        >
+          {frameworks.map((framework) => (
+            <Combobox.Option
+              key={framework.value}
+              value={framework.value}
+              className="flex items-center gap-2 px-4 py-2"
+            >
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
+              <span>{framework.label}</span>
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox>
+    );
+  },
+};
diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx
new file mode 100644
index 0000000..c4e83c0
--- /dev/null
+++ b/packages/propel/src/combobox/combobox.tsx
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Combobox as BaseCombobox } from "@base-ui-components/react/combobox";
+import { SearchOutline } from "@makeplane/propel/icons";
+import { cn } from "../utils/classname";
+
+// Type definitions
+type TMaxHeight = "lg" | "md" | "rg" | "sm";
+
+export interface ComboboxProps {
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  multiSelect?: boolean;
+  maxSelections?: number;
+  disabled?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export interface ComboboxButtonProps {
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+export interface ComboboxOptionsProps {
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  showSearch?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  maxHeight?: TMaxHeight;
+  inputClassName?: string;
+  optionsContainerClassName?: string;
+  positionerClassName?: string;
+  searchQuery?: string;
+  onSearchQueryChange?: (query: string) => void;
+  onSearchQueryKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  dataPreventOutsideClick?: boolean;
+}
+
+export interface ComboboxOptionProps {
+  value: string;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+// Constants
+const MAX_HEIGHT_CLASSES: Record<TMaxHeight, string> = {
+  lg: "max-h-60",
+  md: "max-h-48",
+  rg: "max-h-36",
+  sm: "max-h-28",
+} as const;
+
+// Root component
+function ComboboxRoot({
+  value,
+  defaultValue,
+  onValueChange,
+  multiSelect = false,
+  disabled = false,
+  open,
+  onOpenChange,
+  children,
+}: ComboboxProps) {
+  const handleValueChange = React.useCallback(
+    (newValue: string | string[]) => {
+      onValueChange?.(newValue);
+    },
+    [onValueChange]
+  );
+
+  return (
+    <BaseCombobox.Root
+      value={value}
+      defaultValue={defaultValue}
+      onValueChange={handleValueChange}
+      multiple={multiSelect}
+      disabled={disabled}
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      {children}
+    </BaseCombobox.Root>
+  );
+}
+
+// Trigger button component
+const ComboboxButton = React.forwardRef(function ComboboxButton(
+  { className, children, disabled = false }: ComboboxButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  return (
+    <BaseCombobox.Trigger ref={ref} disabled={disabled} className={className}>
+      {children}
+    </BaseCombobox.Trigger>
+  );
+});
+
+// Options popup component
+function ComboboxOptions({
+  children,
+  showSearch = false,
+  searchPlaceholder,
+  maxHeight = "lg",
+  className,
+  inputClassName,
+  optionsContainerClassName,
+  emptyMessage = "No results found",
+  positionerClassName,
+  searchQuery: controlledSearchQuery,
+  onSearchQueryChange,
+  onSearchQueryKeyDown,
+  dataPreventOutsideClick,
+}: ComboboxOptionsProps) {
+  // const [searchQuery, setSearchQuery] = React.useState("");
+  const [internalSearchQuery, setInternalSearchQuery] = React.useState("");
+
+  const searchQuery = controlledSearchQuery !== undefined ? controlledSearchQuery : internalSearchQuery;
+
+  const setSearchQuery = React.useCallback(
+    (query: string) => {
+      if (onSearchQueryChange) {
+        onSearchQueryChange(query);
+      } else {
+        setInternalSearchQuery(query);
+      }
+    },
+    [onSearchQueryChange]
+  );
+
+  // Filter children based on search query
+  const filteredChildren = React.useMemo(() => {
+    if (!showSearch || !searchQuery) return children;
+
+    return React.Children.toArray(children).filter((child) => {
+      // React 19 defaults ReactElement's props to `unknown`; name the shape read below.
+      if (!React.isValidElement<{ children?: React.ReactNode; value?: string }>(child)) return true;
+
+      // Only filter ComboboxOption components, leave other elements (like additional content) unfiltered
+      if (child.type !== ComboboxOption) return true;
+
+      // Extract text content from child to search against
+      const getTextContent = (node: React.ReactNode): string => {
+        if (typeof node === "string") return node;
+        if (typeof node === "number") return String(node);
+        if (React.isValidElement<{ children?: React.ReactNode }>(node) && node.props.children) {
+          return getTextContent(node.props.children);
+        }
+        if (Array.isArray(node)) {
+          return node.map(getTextContent).join(" ");
+        }
+        return "";
+      };
+
+      const textContent = getTextContent(child.props.children);
+      const value = child.props.value || "";
+
+      const searchLower = searchQuery.toLowerCase();
+      return textContent.toLowerCase().includes(searchLower) || String(value).toLowerCase().includes(searchLower);
+    });
+  }, [children, searchQuery, showSearch]);
+
+  return (
+    <BaseCombobox.Portal>
+      <BaseCombobox.Positioner sideOffset={8} className={positionerClassName}>
+        <BaseCombobox.Popup
+          className={cn("shadow-lg rounded-md border border-subtle bg-surface-1 p-1", className)}
+          data-prevent-outside-click={dataPreventOutsideClick}
+        >
+          <div className="flex flex-col gap-1">
+            {showSearch && (
+              <div className="relative">
+                <SearchOutline className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-placeholder" />
+                <input
+                  type="text"
+                  placeholder={searchPlaceholder}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onKeyDown={onSearchQueryKeyDown}
+                  className={cn(
+                    "w-full rounded-sm border border-subtle bg-surface-2 py-1.5 pr-2 pl-8 text-13 outline-none placeholder:text-placeholder",
+                    inputClassName
+                  )}
+                />
+              </div>
+            )}
+            <BaseCombobox.List
+              className={cn("overflow-auto outline-none", MAX_HEIGHT_CLASSES[maxHeight], optionsContainerClassName)}
+            >
+              {filteredChildren}
+              {showSearch &&
+                emptyMessage &&
+                React.Children.count(
+                  React.Children.toArray(filteredChildren).filter(
+                    (child) => React.isValidElement(child) && child.type === ComboboxOption
+                  )
+                ) === 0 && <div className="px-2 py-1.5 text-13 text-placeholder">{emptyMessage}</div>}
+            </BaseCombobox.List>
+          </div>
+        </BaseCombobox.Popup>
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
+  );
+}
+
+// Individual option component
+function ComboboxOption({ value, children, disabled, className }: ComboboxOptionProps) {
+  return (
+    <BaseCombobox.Item
+      value={value}
+      disabled={disabled}
+      className={cn("cursor-pointer rounded-sm px-2 py-1.5 text-13 transition-colors outline-none", className)}
+    >
+      {children}
+    </BaseCombobox.Item>
+  );
+}
+
+// Compound component export
+const Combobox = Object.assign(ComboboxRoot, {
+  Button: ComboboxButton,
+  Options: ComboboxOptions,
+  Option: ComboboxOption,
+});
+
+export { Combobox };
diff --git a/packages/propel/src/combobox/index.ts b/packages/propel/src/combobox/index.ts
new file mode 100644
index 0000000..8004ba5
--- /dev/null
+++ b/packages/propel/src/combobox/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./combobox";
diff --git a/packages/propel/src/command/command.stories.tsx b/packages/propel/src/command/command.stories.tsx
new file mode 100644
index 0000000..ab440d8
--- /dev/null
+++ b/packages/propel/src/command/command.stories.tsx
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { FileOutline, FolderOutline, SettingsOutline, UserOutline } from "@makeplane/propel/icons";
+import { Command } from "./command";
+
+const meta = {
+  title: "Components/Command",
+  component: Command,
+  subcomponents: {
+    CommandInput: Command.Input,
+    CommandList: Command.List,
+    CommandItem: Command.Item,
+    CommandEmpty: Command.Empty,
+  },
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Command>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    return (
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
+        <Command.List className="max-h-80 overflow-auto py-2">
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 1</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 2</Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Item 3</Command.Item>
+        </Command.List>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
+      </Command>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  render() {
+    return (
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input
+          placeholder="Search files and folders..."
+          className="h-9 w-full bg-transparent py-3 text-13 outline-none"
+        />
+        <Command.List className="max-h-80 overflow-auto py-2">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <FolderOutline className="h-4 w-4" />
+            <span>Documents</span>
+          </Command.Item>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <FolderOutline className="h-4 w-4" />
+            <span>Downloads</span>
+          </Command.Item>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <FileOutline className="h-4 w-4" />
+            <span>README.md</span>
+          </Command.Item>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <FileOutline className="h-4 w-4" />
+            <span>package.json</span>
+          </Command.Item>
+        </Command.List>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No files or folders found.</Command.Empty>
+      </Command>
+    );
+  },
+};
+
+export const WithCategories: Story = {
+  render() {
+    return (
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input
+          placeholder="Search commands..."
+          className="h-9 w-full bg-transparent py-3 text-13 outline-none"
+        />
+        <Command.List className="max-h-80 overflow-auto py-2">
+          <div className="text-gray-500 px-2 py-1.5 text-11 font-semibold">User</div>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <UserOutline className="h-4 w-4" />
+            <span>Profile</span>
+          </Command.Item>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <SettingsOutline className="h-4 w-4" />
+            <span>Settings</span>
+          </Command.Item>
+
+          <div className="text-gray-500 mt-2 px-2 py-1.5 text-11 font-semibold">Files</div>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <FolderOutline className="h-4 w-4" />
+            <span>Open Folder</span>
+          </Command.Item>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <FileOutline className="h-4 w-4" />
+            <span>New File</span>
+          </Command.Item>
+        </Command.List>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No commands found.</Command.Empty>
+      </Command>
+    );
+  },
+};
+
+export const EmptyState: Story = {
+  render() {
+    return (
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
+        <Command.List className="max-h-80 overflow-auto py-2">{/* No items - will show empty state */}</Command.List>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">
+          <p className="font-semibold">No results found</p>
+          <p className="mt-1 text-11">Try searching for something else</p>
+        </Command.Empty>
+      </Command>
+    );
+  },
+};
+
+export const LongList: Story = {
+  render() {
+    return (
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input placeholder="Search items..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
+        <Command.List className="max-h-60 overflow-auto py-2">
+          {Array.from({ length: 20 }, (_, i) => (
+            <Command.Item key={i} className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">
+              Item {i + 1}
+            </Command.Item>
+          ))}
+        </Command.List>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
+      </Command>
+    );
+  },
+};
+
+export const WithoutSearch: Story = {
+  render() {
+    return (
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.List className="max-h-80 overflow-auto py-2">
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <UserOutline className="h-4 w-4" />
+            <span>Profile</span>
+          </Command.Item>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <SettingsOutline className="h-4 w-4" />
+            <span>Settings</span>
+          </Command.Item>
+          <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
+            <FolderOutline className="h-4 w-4" />
+            <span>Files</span>
+          </Command.Item>
+        </Command.List>
+      </Command>
+    );
+  },
+};
+
+export const CustomStyling: Story = {
+  render() {
+    return (
+      <Command className="border-blue-300 bg-blue-50 shadow-lg w-96 rounded-lg border-2 p-2">
+        <Command.Input
+          placeholder="Search with custom styling..."
+          className="text-blue-900 placeholder:text-blue-400 h-9 w-full bg-transparent py-3 text-13 outline-none"
+        />
+        <Command.List className="max-h-80 overflow-auto py-2">
+          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
+            Custom Item 1
+          </Command.Item>
+          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
+            Custom Item 2
+          </Command.Item>
+          <Command.Item className="text-blue-900 hover:bg-blue-200 cursor-pointer rounded-sm px-3 py-2">
+            Custom Item 3
+          </Command.Item>
+        </Command.List>
+        <Command.Empty className="text-blue-500 py-6 text-center text-13">No matching items found.</Command.Empty>
+      </Command>
+    );
+  },
+};
+
+export const DisabledItems: Story = {
+  render() {
+    return (
+      <Command className="border-gray-200 w-96 rounded-lg border p-2">
+        <Command.Input placeholder="Search..." className="h-9 w-full bg-transparent py-3 text-13 outline-none" />
+        <Command.List className="max-h-80 overflow-auto py-2">
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Active Item 1</Command.Item>
+          <Command.Item disabled className="cursor-not-allowed rounded-sm px-3 py-2 opacity-50">
+            Disabled Item
+          </Command.Item>
+          <Command.Item className="hover:bg-gray-100 cursor-pointer rounded-sm px-3 py-2">Active Item 2</Command.Item>
+        </Command.List>
+        <Command.Empty className="text-gray-500 py-6 text-center text-13">No results found.</Command.Empty>
+      </Command>
+    );
+  },
+};
diff --git a/packages/propel/src/command/command.tsx b/packages/propel/src/command/command.tsx
new file mode 100644
index 0000000..3d94969
--- /dev/null
+++ b/packages/propel/src/command/command.tsx
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchOutline } from "@makeplane/propel/icons";
+import { cn } from "../utils/classname";
+
+function CommandComponent({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return <CommandPrimitive data-slot="command" className={cn("", className)} {...props} />;
+}
+
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2"
+    >
+      <SearchOutline className="size-3.5 flex-shrink-0 text-placeholder" />
+      <CommandPrimitive.Input data-slot="command-input" className={cn(className)} {...props} />
+    </div>
+  );
+}
+
+function CommandList({ ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return <CommandPrimitive.List data-slot="command-list" {...props} />;
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return <CommandPrimitive.Empty data-slot="command-empty" {...props} />;
+}
+
+function CommandItem({ ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return <CommandPrimitive.Item data-slot="command-item" {...props} />;
+}
+
+const Command = Object.assign(CommandComponent, {
+  Input: CommandInput,
+  List: CommandList,
+  Empty: CommandEmpty,
+  Item: CommandItem,
+});
+
+export { Command };
diff --git a/packages/propel/src/command/index.ts b/packages/propel/src/command/index.ts
new file mode 100644
index 0000000..0fc4f85
--- /dev/null
+++ b/packages/propel/src/command/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./command";
diff --git a/packages/propel/src/context-menu/context-menu.stories.tsx b/packages/propel/src/context-menu/context-menu.stories.tsx
new file mode 100644
index 0000000..c7069a0
--- /dev/null
+++ b/packages/propel/src/context-menu/context-menu.stories.tsx
@@ -0,0 +1,391 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ArchiveOutline,
+  ChevronRightOutline,
+  CopyOutline,
+  DeleteOutline,
+  DownloadOutline,
+  EditOutline,
+  ShareOutline,
+  StarOutline,
+} from "@makeplane/propel/icons";
+import { ContextMenu } from "./context-menu";
+
+// cannot use satisfies here because base-ui does not have portable types.
+const meta: Meta<typeof ContextMenu> = {
+  title: "Components/ContextMenu",
+  component: ContextMenu,
+  subcomponents: {
+    ContextMenuTrigger: ContextMenu.Trigger,
+    ContextMenuPortal: ContextMenu.Portal,
+    ContextMenuContent: ContextMenu.Content,
+    ContextMenuItem: ContextMenu.Item,
+    ContextMenuSeparator: ContextMenu.Separator,
+    ContextMenuSubmenu: ContextMenu.Submenu,
+    ContextMenuSubmenuTrigger: ContextMenu.SubmenuTrigger,
+  },
+  args: {
+    children: null,
+  },
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    return (
+      <ContextMenu>
+        <ContextMenu.Trigger>
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
+            Right click here
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content>
+            <ContextMenu.Item>Back</ContextMenu.Item>
+            <ContextMenu.Item>Forward</ContextMenu.Item>
+            <ContextMenu.Item>Reload</ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item>More Tools</ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  render() {
+    return (
+      <ContextMenu>
+        <ContextMenu.Trigger>
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
+            Right click here
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content>
+            <ContextMenu.Item>
+              <CopyOutline className="mr-2 h-4 w-4" />
+              Copy
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <EditOutline className="mr-2 h-4 w-4" />
+              Edit
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <DownloadOutline className="mr-2 h-4 w-4" />
+              Download
+            </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item>
+              <ShareOutline className="mr-2 h-4 w-4" />
+              Share
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    );
+  },
+};
+
+export const WithSubmenus: Story = {
+  render() {
+    return (
+      <ContextMenu>
+        <ContextMenu.Trigger>
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
+            Right click here
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content>
+            <ContextMenu.Item>
+              <CopyOutline className="mr-2 h-4 w-4" />
+              Copy
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <EditOutline className="mr-2 h-4 w-4" />
+              Edit
+            </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Submenu>
+              <ContextMenu.SubmenuTrigger>
+                <ShareOutline className="mr-2 h-4 w-4" />
+                Share
+                <ChevronRightOutline className="ml-auto h-4 w-4" />
+              </ContextMenu.SubmenuTrigger>
+              <ContextMenu.Portal>
+                <ContextMenu.Content>
+                  <ContextMenu.Item>Email</ContextMenu.Item>
+                  <ContextMenu.Item>Message</ContextMenu.Item>
+                  <ContextMenu.Item>Copy Link</ContextMenu.Item>
+                </ContextMenu.Content>
+              </ContextMenu.Portal>
+            </ContextMenu.Submenu>
+            <ContextMenu.Separator />
+            <ContextMenu.Item>
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    );
+  },
+};
+
+export const DisabledItems: Story = {
+  render() {
+    return (
+      <ContextMenu>
+        <ContextMenu.Trigger>
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
+            Right click here
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content>
+            <ContextMenu.Item>
+              <CopyOutline className="mr-2 h-4 w-4" />
+              Copy
+            </ContextMenu.Item>
+            <ContextMenu.Item disabled>
+              <EditOutline className="mr-2 h-4 w-4" />
+              Edit (Disabled)
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <DownloadOutline className="mr-2 h-4 w-4" />
+              Download
+            </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item disabled>
+              <ShareOutline className="mr-2 h-4 w-4" />
+              Share (Disabled)
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    );
+  },
+};
+
+export const OnFileCard: Story = {
+  render() {
+    return (
+      <ContextMenu>
+        <ContextMenu.Trigger>
+          <div className="w-64 cursor-pointer rounded-lg border border-subtle p-4 hover:bg-layer-1">
+            <div className="flex items-center gap-3">
+              <div className="flex h-12 w-12 items-center justify-center rounded-sm bg-accent-primary text-16 text-on-color">
+                📄
+              </div>
+              <div className="flex-1">
+                <div className="font-medium">Document.pdf</div>
+                <div className="text-13 text-placeholder">2.4 MB</div>
+              </div>
+            </div>
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content>
+            <ContextMenu.Item>
+              <DownloadOutline className="mr-2 h-4 w-4" />
+              Download
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <CopyOutline className="mr-2 h-4 w-4" />
+              Copy Link
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <StarOutline className="mr-2 h-4 w-4" />
+              Add to Favorites
+            </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item>
+              <ArchiveOutline className="mr-2 h-4 w-4" />
+              Archive
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    );
+  },
+};
+
+export const OnImage: Story = {
+  render() {
+    return (
+      <ContextMenu>
+        <ContextMenu.Trigger>
+          <div className="relative h-56 w-80 cursor-pointer overflow-hidden rounded-lg bg-layer-1">
+            <div className="absolute inset-0 flex items-center justify-center text-placeholder">Image Placeholder</div>
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content>
+            <ContextMenu.Item>
+              <DownloadOutline className="mr-2 h-4 w-4" />
+              Save Image
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <CopyOutline className="mr-2 h-4 w-4" />
+              Copy Image
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <CopyOutline className="mr-2 h-4 w-4" />
+              Copy Image URL
+            </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item>Open Image in New Tab</ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    );
+  },
+};
+
+export const OnText: Story = {
+  render() {
+    return (
+      <ContextMenu>
+        <ContextMenu.Trigger>
+          <div className="w-96 rounded-lg border border-subtle p-6">
+            <h3 className="mb-2 text-16 font-semibold">Context Menu on Text</h3>
+            <p className="text-tertiary">
+              Right click anywhere on this text area to see the context menu. This demonstrates how context menus can be
+              applied to text content areas.
+            </p>
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content>
+            <ContextMenu.Item>
+              <CopyOutline className="mr-2 h-4 w-4" />
+              Copy
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <EditOutline className="mr-2 h-4 w-4" />
+              Edit
+            </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item>Select All</ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    );
+  },
+};
+
+export const NestedSubmenus: Story = {
+  render() {
+    return (
+      <ContextMenu>
+        <ContextMenu.Trigger>
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
+            Right click here
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content>
+            <ContextMenu.Item>New File</ContextMenu.Item>
+            <ContextMenu.Item>New Folder</ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Submenu>
+              <ContextMenu.SubmenuTrigger>
+                Import
+                <ChevronRightOutline className="ml-auto h-4 w-4" />
+              </ContextMenu.SubmenuTrigger>
+              <ContextMenu.Portal>
+                <ContextMenu.Content>
+                  <ContextMenu.Item>From File</ContextMenu.Item>
+                  <ContextMenu.Item>From URL</ContextMenu.Item>
+                  <ContextMenu.Submenu>
+                    <ContextMenu.SubmenuTrigger>
+                      From Cloud
+                      <ChevronRightOutline className="ml-auto h-4 w-4" />
+                    </ContextMenu.SubmenuTrigger>
+                    <ContextMenu.Portal>
+                      <ContextMenu.Content>
+                        <ContextMenu.Item>Google Drive</ContextMenu.Item>
+                        <ContextMenu.Item>Dropbox</ContextMenu.Item>
+                        <ContextMenu.Item>OneDrive</ContextMenu.Item>
+                      </ContextMenu.Content>
+                    </ContextMenu.Portal>
+                  </ContextMenu.Submenu>
+                </ContextMenu.Content>
+              </ContextMenu.Portal>
+            </ContextMenu.Submenu>
+            <ContextMenu.Separator />
+            <ContextMenu.Item>
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    );
+  },
+};
+
+export const WithKeyboardShortcuts: Story = {
+  render() {
+    return (
+      <ContextMenu>
+        <ContextMenu.Trigger>
+          <div className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed border-strong text-13">
+            Right click here
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content>
+            <ContextMenu.Item>
+              <CopyOutline className="mr-2 h-4 w-4" />
+              Copy
+              <span className="ml-auto text-11 text-placeholder">⌘C</span>
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <EditOutline className="mr-2 h-4 w-4" />
+              Edit
+              <span className="ml-auto text-11 text-placeholder">⌘E</span>
+            </ContextMenu.Item>
+            <ContextMenu.Item>
+              <DownloadOutline className="mr-2 h-4 w-4" />
+              Download
+              <span className="ml-auto text-11 text-placeholder">⌘D</span>
+            </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item>
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
+              <span className="text-danger-primary">Delete</span>
+              <span className="ml-auto text-11 text-placeholder">⌘⌫</span>
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    );
+  },
+};
diff --git a/packages/propel/src/context-menu/context-menu.tsx b/packages/propel/src/context-menu/context-menu.tsx
new file mode 100644
index 0000000..e5d0211
--- /dev/null
+++ b/packages/propel/src/context-menu/context-menu.tsx
@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui-components/react/context-menu";
+import { cn } from "../utils";
+
+export interface ContextMenuProps extends React.ComponentProps<typeof ContextMenuPrimitive.Root> {
+  children: React.ReactNode;
+}
+
+export interface ContextMenuTriggerProps extends React.ComponentProps<typeof ContextMenuPrimitive.Trigger> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface ContextMenuContentProps extends React.ComponentProps<typeof ContextMenuPrimitive.Positioner> {
+  children: React.ReactNode;
+  className?: string;
+  side?: "top" | "right" | "bottom" | "left";
+  sideOffset?: number;
+  positionerClassName?: string;
+}
+
+export interface ContextMenuItemProps extends React.ComponentProps<typeof ContextMenuPrimitive.Item> {
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+}
+
+const ContextMenuRoot = React.forwardRef(function ContextMenuRoot(
+  { children, ...props }: ContextMenuProps,
+  _ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Root>>
+) {
+  return <ContextMenuPrimitive.Root {...props}>{children}</ContextMenuPrimitive.Root>;
+});
+
+const ContextMenuTrigger = React.forwardRef(function ContextMenuTrigger(
+  { className, children, ...props }: ContextMenuTriggerProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Trigger>>
+) {
+  return (
+    <ContextMenuPrimitive.Trigger ref={ref} className={cn("outline-none", className)} {...props}>
+      {children}
+    </ContextMenuPrimitive.Trigger>
+  );
+});
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuContent = React.forwardRef(function ContextMenuContent(
+  { positionerClassName, className, children, side = "bottom", sideOffset = 4, ...props }: ContextMenuContentProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Positioner>>
+) {
+  return (
+    <ContextMenuPrimitive.Positioner
+      ref={ref}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+      className={positionerClassName}
+    >
+      <ContextMenuPrimitive.Popup
+        className={cn(
+          "shadow-md z-50 min-w-32 overflow-hidden rounded-md border border-subtle bg-surface-1 p-1",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+      >
+        {children}
+      </ContextMenuPrimitive.Popup>
+    </ContextMenuPrimitive.Positioner>
+  );
+});
+
+const ContextMenuItem = React.forwardRef(function ContextMenuItem(
+  { className, disabled, children, ...props }: ContextMenuItemProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Item>>
+) {
+  return (
+    <ContextMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-13 outline-none select-none",
+        "focus:bg-surface-2 focus:text-primary",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </ContextMenuPrimitive.Item>
+  );
+});
+
+const ContextMenuSeparator = React.forwardRef(function ContextMenuSeparator(
+  { className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Separator>>
+) {
+  return (
+    <ContextMenuPrimitive.Separator ref={ref} className={cn("bg-subtle-1 -mx-1 my-1 h-px", className)} {...props} />
+  );
+});
+
+const ContextMenuSubmenu = ContextMenuPrimitive.SubmenuRoot;
+
+const ContextMenuSubmenuTrigger = React.forwardRef(function ContextMenuSubmenuTrigger(
+  { className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger>,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.SubmenuTrigger>>
+) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default items-center rounded-xs px-2 py-1.5 text-13 outline-none select-none focus:outline-none",
+        "focus:bg-surface-2 data-[state=open]:bg-surface-2",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ContextMenuPrimitive.SubmenuTrigger>
+  );
+});
+
+ContextMenuRoot.displayName = "ContextMenu";
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+ContextMenuContent.displayName = "ContextMenuContent";
+ContextMenuItem.displayName = "ContextMenuItem";
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+ContextMenuSubmenuTrigger.displayName = "ContextMenuSubmenuTrigger";
+
+// compound components
+const ContextMenu = Object.assign(ContextMenuRoot, {
+  Trigger: ContextMenuTrigger,
+  Portal: ContextMenuPortal,
+  Content: ContextMenuContent,
+  Item: ContextMenuItem,
+  Separator: ContextMenuSeparator,
+  Submenu: ContextMenuSubmenu,
+  SubmenuTrigger: ContextMenuSubmenuTrigger,
+});
+
+export { ContextMenu };
diff --git a/packages/propel/src/context-menu/index.ts b/packages/propel/src/context-menu/index.ts
new file mode 100644
index 0000000..ff80b8e
--- /dev/null
+++ b/packages/propel/src/context-menu/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { ContextMenu } from "./context-menu";
+export type {
+  ContextMenuProps,
+  ContextMenuTriggerProps,
+  ContextMenuContentProps,
+  ContextMenuItemProps,
+} from "./context-menu";
diff --git a/packages/propel/src/design-system/design-system-philosophy.stories.tsx b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
new file mode 100644
index 0000000..e6a2167
--- /dev/null
+++ b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
@@ -0,0 +1,434 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+const meta = {
+  title: "Design System/Philosophy",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: `
+# Design System Philosophy
+
+Reusable, composable Storybook stories that demonstrate Canvas, Surface, and Layer concepts.
+
+Key concepts and rules are preserved, but the implementation is componentized for DRYness and clarity.
+        `,
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+export type Story = StoryObj<typeof meta>;
+
+/* -----------------------------
+   Reusable UI building blocks
+   -----------------------------*/
+
+type ContainerProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const DemoRoot: React.FC<ContainerProps> = ({ children, className = "" }) => (
+  <div className={`p-8 ${className}`}>{children}</div>
+);
+
+const Info: React.FC<{ title: string; children?: React.ReactNode; tone?: "info" | "warn" }> = ({
+  title,
+  children,
+  tone = "info",
+}) => (
+  <div
+    className={`mb-4 rounded-md border ${tone === "warn" ? "bg-red-50 border-danger-strong p-4" : "border-subtle bg-layer-1 p-4"}`}
+  >
+    <h3 className={`mb-2 text-16 font-semibold text-primary`}>{title}</h3>
+    <div className="text-13 text-secondary">{children}</div>
+  </div>
+);
+
+const Surface: React.FC<ContainerProps> = ({ children, className = "bg-surface-1 rounded-md p-6" }) => (
+  <div className={className}>{children}</div>
+);
+
+const Layer: React.FC<ContainerProps & { hover?: boolean }> = ({
+  children,
+  className = "bg-layer-1 hover:bg-layer-1-hover rounded-md p-4",
+}) => <div className={`${className} transition-colors`}>{children}</div>;
+
+/* Small helpers to keep stories concise */
+const TwoColGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="grid grid-cols-2 gap-6">{children}</div>
+);
+
+/* -----------------------------
+   Stories (using the building blocks)
+   -----------------------------*/
+
+export const ApplicationRoot: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Application Root Pattern">
+        This is the <strong>bg-canvas</strong> - the application-level background. It should only appear{" "}
+        <strong>once</strong> in your entire application at the root level.
+      </Info>
+
+      <Surface>
+        <h4 className="mb-2 font-semibold text-primary">Page Content (bg-surface-1)</h4>
+        <p className="text-13 text-secondary">Pages use surfaces, not canvas. This is a typical page layout.</p>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const SurfaceSiblings: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Surface Siblings Pattern">
+        Surfaces are <strong>siblings</strong>, not nested.
+      </Info>
+
+      <TwoColGrid>
+        <Surface>
+          <h4 className="mb-2 font-semibold text-primary">Surface 1</h4>
+          <p className="text-13 text-secondary">This is bg-surface-1 - a primary surface</p>
+        </Surface>
+
+        <Surface className="rounded-md bg-surface-2 p-6">
+          <h4 className="mb-2 font-semibold text-primary">Surface 2</h4>
+          <p className="text-13 text-secondary">This is bg-surface-2 - a secondary surface (sibling to surface-1)</p>
+        </Surface>
+      </TwoColGrid>
+    </DemoRoot>
+  ),
+};
+
+export const LayerStacking: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Layer Stacking Pattern">Layers stack to create depth: Surface → Layer 1 → Layer 2 → Layer 3</Info>
+
+      <Surface>
+        <h4 className="mb-3 font-semibold text-primary">Surface 1</h4>
+
+        <Layer className="mb-4 rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+          <h5 className="mb-2 font-medium text-primary">Layer 1 (First level of depth)</h5>
+          <p className="mb-3 text-13 text-secondary">Hover over me to see the hover state</p>
+
+          <Layer className="rounded-md bg-layer-2 p-3 hover:bg-layer-2-hover">
+            <h6 className="mb-2 text-13 font-medium text-primary">Layer 2 (Second level)</h6>
+            <p className="mb-2 text-13 text-secondary">Nested within Layer 1</p>
+
+            <Layer className="rounded-md bg-layer-3 p-2 hover:bg-layer-3-hover" hover>
+              <p className="text-11 font-medium text-primary">Layer 3 (Third level)</p>
+              <p className="text-11 text-secondary">Deepest nesting level</p>
+            </Layer>
+          </Layer>
+        </Layer>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const SurfaceLayerAssociation: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Surface-Layer Association">
+        Each surface should use its corresponding layer: surface-1 → layer-1, surface-2 → layer-2. Very rare exception:
+        inputs/buttons can go one level above for visual separation.
+      </Info>
+
+      <TwoColGrid>
+        <Surface>
+          <h4 className="mb-3 font-semibold text-primary">Surface 1</h4>
+          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+            <h5 className="mb-1 font-medium text-primary">Layer 1</h5>
+            <p className="text-13 text-secondary">Correctly using layer-1 with surface-1</p>
+          </Layer>
+        </Surface>
+
+        <Surface className="rounded-md bg-surface-2 p-6">
+          <h4 className="mb-3 font-semibold text-primary">Surface 2</h4>
+          <Layer className="rounded-md bg-layer-2 p-4 hover:bg-layer-2-hover">
+            <h5 className="mb-1 font-medium text-primary">Layer 2</h5>
+            <p className="text-13 text-secondary">Correctly using layer-2 with surface-2</p>
+          </Layer>
+        </Surface>
+      </TwoColGrid>
+
+      <div className="mt-6">
+        <Info title="✅ Rare Exception: Visual Separation for Form Elements">
+          In very rare cases, form elements (inputs, buttons, switches) can use one level above for visual separation.
+        </Info>
+        <Surface>
+          <h4 className="mb-3 font-semibold text-primary">Modal with Input (Rare Exception)</h4>
+          <div className="space-y-3">
+            <div>
+              <label htmlFor="example-input" className="text-13 text-secondary">
+                Name
+              </label>
+              <input
+                id="example-input"
+                className="mt-1 w-full rounded-md border border-subtle bg-layer-2 px-3 py-2 text-primary"
+                placeholder="Input uses layer-2 for visual separation"
+              />
+              <p className="mt-1 text-11 text-tertiary">
+                Input uses bg-layer-2 (one level above) for visual separation from modal surface
+              </p>
+            </div>
+          </div>
+        </Surface>
+      </div>
+    </DemoRoot>
+  ),
+};
+
+export const ModalException: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Modal Exception Pattern">
+        Modals exist on a <strong>different plane</strong>, so they can use surfaces even when there's a surface
+        below
+      </Info>
+
+      <Surface>
+        <h4 className="mb-2 font-semibold text-primary">Main Page Content</h4>
+        <p className="text-13 text-secondary">This is the main page using bg-surface-1</p>
+      </Surface>
+
+      <div className="fixed inset-0 z-50 flex items-center justify-center">
+        <div className="absolute inset-0 bg-backdrop" />
+        <div className="shadow-lg relative z-10 max-w-md rounded-lg bg-surface-1 p-6">
+          <h4 className="mb-3 font-semibold text-primary">Modal Dialog</h4>
+          <p className="mb-4 text-13 text-secondary">
+            This modal uses bg-surface-1 even though the page below also uses bg-surface-1. This is allowed because
+            they're on different planes.
+          </p>
+
+          <Layer className="rounded-md bg-layer-1 p-3 hover:bg-layer-1-hover">
+            <p className="text-13 text-primary">Modal content can use layers as normal</p>
+          </Layer>
+        </div>
+      </div>
+    </DemoRoot>
+  ),
+};
+
+export const CardListPattern: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Card List Pattern">Common pattern: Surface containing multiple layer-1 cards</Info>
+
+      <Surface>
+        <h4 className="mb-4 font-semibold text-primary">Task List</h4>
+        <div className="space-y-3">
+          {[1, 2, 3].map((item) => (
+            <Layer key={item} className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+              <h5 className="mb-1 font-medium text-primary">Task {item}</h5>
+              <p className="text-13 text-secondary">This is a task card using bg-layer-1 with hover state</p>
+            </Layer>
+          ))}
+        </div>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const SidebarLayoutPattern: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Sidebar Layout Pattern">
+        Sidebar and main content are both part of the same surface. Sidebar menu items use transparent backgrounds with
+        hover states.
+      </Info>
+
+      <Surface className="flex rounded-md bg-surface-1">
+        <aside className="w-64 border-r border-subtle p-4">
+          <h4 className="mb-3 font-semibold text-primary">Sidebar</h4>
+          <div className="space-y-2">
+            {["Home", "Projects", "Settings"].map((item) => (
+              <div key={item} className="rounded-md p-2 transition-colors hover:bg-layer-1-hover">
+                <p className="text-13 text-primary">{item}</p>
+              </div>
+            ))}
+          </div>
+        </aside>
+
+        <main className="flex-1 p-6">
+          <h4 className="mb-3 font-semibold text-primary">Main Content</h4>
+          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+            <p className="text-primary">Content card using layer-1</p>
+          </Layer>
+        </main>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const StateVariants: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ State Variants">Demonstrating hover, active, and selected states</Info>
+
+      <Surface>
+        <div className="space-y-4">
+          <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+            <h5 className="mb-1 font-medium text-primary">Hover State</h5>
+            <p className="text-13 text-secondary">Hover over me to see bg-layer-1-hover</p>
+          </Layer>
+
+          <div className="rounded-md bg-layer-1-active p-4">
+            <h5 className="mb-1 font-medium text-primary">Active State</h5>
+            <p className="text-13 text-secondary">Using bg-layer-1-active (pressed/active)</p>
+          </div>
+
+          <div className="rounded-md bg-layer-1-selected p-4">
+            <h5 className="mb-1 font-medium text-primary">Selected State</h5>
+            <p className="text-13 text-secondary">Using bg-layer-1-selected (when selected)</p>
+          </div>
+        </div>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const TextColorHierarchy: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Text Color Hierarchy">Semantic text colors for different importance levels</Info>
+
+      <Surface>
+        <div className="rounded-md bg-layer-1 p-4">
+          <h4 className="mb-3 text-16 font-semibold text-primary">Primary Text</h4>
+          <p className="mb-3 text-secondary">Secondary text for descriptions and supporting content</p>
+          <p className="mb-3 text-13 text-tertiary">Tertiary text for labels and metadata</p>
+          <input
+            className="rounded border border-subtle px-3 py-2 placeholder-(--text-color-placeholder)"
+            placeholder="Placeholder text for inputs"
+          />
+        </div>
+      </Surface>
+    </DemoRoot>
+  ),
+};
+
+export const CompleteExample: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="✅ Complete Example">A realistic dashboard layout using all design system concepts</Info>
+
+      <div className="mb-6 rounded-md bg-surface-1">
+        <div className="border-b border-subtle p-4">
+          <h1 className="text-18 font-bold text-primary">Dashboard</h1>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-6">
+        {[
+          { label: "Total Users", value: "1,234" },
+          { label: "Active Projects", value: "42" },
+          { label: "Completed Tasks", value: "856" },
+        ].map((stat, idx) => (
+          <Surface key={idx}>
+            <Layer className="rounded-md bg-layer-1 p-4 hover:bg-layer-1-hover">
+              <p className="mb-1 text-13 text-tertiary">{stat.label}</p>
+              <p className="text-20 font-bold text-primary">{stat.value}</p>
+            </Layer>
+          </Surface>
+        ))}
+      </div>
+
+      <div className="mt-6 grid grid-cols-2 gap-6">
+        <Surface>
+          <h3 className="mb-4 font-semibold text-primary">Recent Activity</h3>
+          <div className="space-y-2">
+            {[1, 2, 3].map((item) => (
+              <Layer key={item} className="rounded-md bg-layer-1 p-3 hover:bg-layer-1-hover">
+                <p className="mb-1 text-13 font-medium text-primary">Activity {item}</p>
+                <p className="text-11 text-secondary">Description of the activity</p>
+              </Layer>
+            ))}
+          </div>
+        </Surface>
+
+        <Surface className="rounded-md bg-surface-2 p-6">
+          <h3 className="mb-4 font-semibold text-primary">Quick Actions</h3>
+          <div className="space-y-2">
+            {["Create Project", "Invite Team", "View Reports"].map((action) => (
+              <Layer key={action} className="rounded-md bg-layer-2 p-3 hover:bg-layer-2-hover">
+                <p className="text-13 text-primary">{action}</p>
+              </Layer>
+            ))}
+          </div>
+        </Surface>
+      </div>
+    </DemoRoot>
+  ),
+};
+
+export const CommonMistakes: Story = {
+  render: () => (
+    <DemoRoot>
+      <Info title="❌ Common Mistakes to Avoid" tone="warn">
+        These examples show incorrect usage patterns
+      </Info>
+
+      <div className="space-y-6">
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 1: Nested Surfaces (Same Plane)</h4>
+          <Surface>
+            <p className="mb-2 text-13 text-secondary">Surface 1</p>
+            <div className="rounded-md bg-surface-2 p-4">
+              <p className="text-13 text-secondary">Surface 2 nested inside Surface 1 - WRONG!</p>
+            </div>
+          </Surface>
+          <p className="mt-2 text-11 text-tertiary">
+            ✅ Fix: Use bg-layer-1 for nested elements, or make them sibling surfaces
+          </p>
+        </div>
+
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 2: Wrong Layer-Surface Association</h4>
+          <Surface>
+            <p className="mb-2 text-13 text-secondary">Surface 1</p>
+            <div className="rounded-md bg-layer-2 p-4">
+              <p className="text-13 text-secondary">Using layer-2 with surface-1 for content box - WRONG!</p>
+            </div>
+          </Surface>
+          <p className="mt-2 text-11 text-tertiary">
+            ✅ Fix: Use bg-layer-1 with bg-surface-1 for content boxes. Exception: Very rare cases for inputs/buttons
+            that need visual separation (e.g., input in modal can use bg-layer-2 for separation).
+          </p>
+        </div>
+
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 3: Mismatched Hover State</h4>
+          <Surface>
+            <div className="rounded-md bg-layer-1 p-4 transition-colors hover:bg-layer-2-hover">
+              <p className="text-13 text-secondary">bg-layer-1 with hover:bg-layer-2-hover - WRONG!</p>
+            </div>
+          </Surface>
+          <p className="mt-2 text-11 text-tertiary">✅ Fix: Use bg-layer-1 hover:bg-layer-1-hover</p>
+        </div>
+
+        <div className="rounded-md border-2 border-danger-strong p-4">
+          <h4 className="mb-2 font-semibold text-primary">❌ Mistake 4: Canvas for Pages</h4>
+          <div className="rounded-md bg-canvas p-4">
+            <p className="text-13 text-secondary">Using bg-canvas for a page or component - WRONG!</p>
+          </div>
+          <p className="mt-2 text-11 text-tertiary">
+            ✅ Fix: Canvas should only be at application root. Use bg-surface-1 for pages
+          </p>
+        </div>
+      </div>
+    </DemoRoot>
+  ),
+};
diff --git a/packages/propel/src/dialog/dialog.stories.tsx b/packages/propel/src/dialog/dialog.stories.tsx
new file mode 100644
index 0000000..36281bf
--- /dev/null
+++ b/packages/propel/src/dialog/dialog.stories.tsx
@@ -0,0 +1,432 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useArgs } from "storybook/preview-api";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { Dialog, EDialogWidth } from "./root";
+
+const meta = {
+  title: "Components/Dialog",
+  component: Dialog,
+  subcomponents: {
+    DialogPanel: Dialog.Panel,
+    DialogTitle: Dialog.Title,
+  },
+  args: {
+    children: null,
+    open: false,
+    onOpenChange: () => {},
+  },
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  render(args) {
+    const [{ open }, updateArgs] = useArgs();
+    const setOpen = (value: boolean) => updateArgs({ open: value });
+
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
+          Open Dialog
+        </button>
+        {open && (
+          <Dialog {...args} open={open} onOpenChange={setOpen}>
+            <Dialog.Panel>
+              <div className="p-6">
+                <Dialog.Title>Dialog Title</Dialog.Title>
+                <div className="mt-4">
+                  <p className="text-gray-600 text-13">This is the dialog content. You can put any content here.</p>
+                </div>
+                <div className="mt-6 flex justify-end gap-2">
+                  <button
+                    onClick={() => setOpen(false)}
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={() => setOpen(false)}
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
+                  >
+                    Confirm
+                  </button>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: null,
+  },
+};
+
+export const TopPosition: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
+          Open Dialog (Top)
+        </button>
+        {open && (
+          <Dialog {...args} open={open} onOpenChange={setOpen}>
+            <Dialog.Panel position="top">
+              <div className="p-6">
+                <Dialog.Title>Top Positioned Dialog</Dialog.Title>
+                <div className="mt-4">
+                  <p className="text-gray-600 text-13">
+                    This dialog appears at the top of the screen instead of centered.
+                  </p>
+                </div>
+                <div className="mt-6 flex justify-end gap-2">
+                  <button
+                    onClick={() => setOpen(false)}
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+};
+
+export const SmallWidth: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
+          Open Small Dialog
+        </button>
+        {open && (
+          <Dialog {...args} open={open} onOpenChange={setOpen}>
+            <Dialog.Panel width={EDialogWidth.SM}>
+              <div className="p-6">
+                <Dialog.Title>Small Dialog</Dialog.Title>
+                <div className="mt-4">
+                  <p className="text-gray-600 text-13">This is a small dialog.</p>
+                </div>
+                <div className="mt-6 flex justify-end">
+                  <button
+                    onClick={() => setOpen(false)}
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+};
+
+export const LargeWidth: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
+          Open Large Dialog
+        </button>
+        {open && (
+          <Dialog {...args} open={open} onOpenChange={setOpen}>
+            <Dialog.Panel width={EDialogWidth.XXXXL}>
+              <div className="p-6">
+                <Dialog.Title>Large Dialog</Dialog.Title>
+                <div className="mt-4">
+                  <p className="text-gray-600 text-13">
+                    This is a large dialog with more horizontal space for content.
+                  </p>
+                </div>
+                <div className="mt-6 flex justify-end">
+                  <button
+                    onClick={() => setOpen(false)}
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+};
+
+export const WithCloseButton: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
+          Open Dialog with Close Button
+        </button>
+        {open && (
+          <Dialog {...args} open={open} onOpenChange={setOpen}>
+            <Dialog.Panel>
+              <div className="p-6">
+                <div className="flex items-start justify-between">
+                  <Dialog.Title>Dialog with Close Button</Dialog.Title>
+                  <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
+                    <CloseOutline className="h-4 w-4" />
+                  </button>
+                </div>
+                <div className="mt-4">
+                  <p className="text-gray-600 text-13">This dialog has a close button in the header.</p>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+};
+
+export const ConfirmationDialog: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    const handleConfirm = () => {
+      alert("Confirmed!");
+      setOpen(false);
+    };
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 text-on-color"
+        >
+          Delete Item
+        </button>
+        {open && (
+          <Dialog {...args} open={open} onOpenChange={setOpen}>
+            <Dialog.Panel width={EDialogWidth.SM}>
+              <div className="p-6">
+                <Dialog.Title>Confirm Deletion</Dialog.Title>
+                <div className="mt-4">
+                  <p className="text-gray-600 text-13">
+                    Are you sure you want to delete this item? This action cannot be undone.
+                  </p>
+                </div>
+                <div className="mt-6 flex justify-end gap-2">
+                  <button
+                    onClick={() => setOpen(false)}
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleConfirm}
+                    className="bg-red-500 hover:bg-red-600 rounded-sm px-4 py-2 text-13 text-on-color"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+};
+
+export const FormDialog: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      alert("Form submitted!");
+      setOpen(false);
+    };
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
+          Open Form
+        </button>
+        {open && (
+          <Dialog {...args} open={open} onOpenChange={setOpen}>
+            <Dialog.Panel width={EDialogWidth.MD}>
+              <form onSubmit={handleSubmit} className="p-6">
+                <Dialog.Title>Create New Item</Dialog.Title>
+                <div className="mt-4 space-y-4">
+                  <div>
+                    <label htmlFor="name" className="text-gray-700 block text-13 font-medium">
+                      Name
+                    </label>
+                    <input
+                      type="text"
+                      id="name"
+                      className="border-gray-300 mt-1 w-full rounded-sm border px-3 py-2 text-13"
+                      placeholder="Enter name"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="description" className="text-gray-700 block text-13 font-medium">
+                      Description
+                    </label>
+                    <textarea
+                      id="description"
+                      rows={3}
+                      className="border-gray-300 mt-1 w-full rounded-sm border px-3 py-2 text-13"
+                      placeholder="Enter description"
+                    />
+                  </div>
+                </div>
+                <div className="mt-6 flex justify-end gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setOpen(false)}
+                    className="bg-gray-200 hover:bg-gray-300 rounded-sm px-4 py-2 text-13"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
+                  >
+                    Create
+                  </button>
+                </div>
+              </form>
+            </Dialog.Panel>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+};
+
+export const ScrollableContent: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <>
+        <button
+          onClick={() => setOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color"
+        >
+          Open Scrollable Dialog
+        </button>
+        {open && (
+          <Dialog {...args} open={open} onOpenChange={setOpen}>
+            <Dialog.Panel width={EDialogWidth.MD}>
+              <div className="p-6">
+                <Dialog.Title>Scrollable Content</Dialog.Title>
+                <div className="mt-4 max-h-96 overflow-y-auto">
+                  {Array.from({ length: 20 }, (_, i) => (
+                    <p key={i} className="text-gray-600 mb-2 text-13">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
+                      labore et dolore magna aliqua.
+                    </p>
+                  ))}
+                </div>
+                <div className="mt-6 flex justify-end">
+                  <button
+                    onClick={() => setOpen(false)}
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Dialog>
+        )}
+      </>
+    );
+  },
+};
+
+export const AllWidths: Story = {
+  render() {
+    const [openWidth, setOpenWidth] = useState<EDialogWidth | null>(null);
+
+    const widths = [
+      { width: EDialogWidth.SM, label: "Small" },
+      { width: EDialogWidth.MD, label: "Medium" },
+      { width: EDialogWidth.LG, label: "Large" },
+      { width: EDialogWidth.XL, label: "XL" },
+      { width: EDialogWidth.XXL, label: "2XL" },
+      { width: EDialogWidth.XXXL, label: "3XL" },
+      { width: EDialogWidth.XXXXL, label: "4XL" },
+    ];
+
+    return (
+      <div className="flex flex-wrap gap-2">
+        {widths.map(({ width, label }) => (
+          <button
+            key={width}
+            onClick={() => setOpenWidth(width)}
+            className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
+          >
+            {label}
+          </button>
+        ))}
+        {widths.map(({ width, label }) => (
+          <Dialog key={width} open={openWidth === width} onOpenChange={() => setOpenWidth(null)}>
+            <Dialog.Panel width={width}>
+              <div className="p-6">
+                <Dialog.Title>{label} Dialog</Dialog.Title>
+                <div className="mt-4">
+                  <p className="text-gray-600 text-13">This dialog uses the {label} width variant.</p>
+                </div>
+                <div className="mt-6 flex justify-end">
+                  <button
+                    onClick={() => setOpenWidth(null)}
+                    className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-13 text-on-color"
+                  >
+                    Close
+                  </button>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Dialog>
+        ))}
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/dialog/index.ts b/packages/propel/src/dialog/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/dialog/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx
new file mode 100644
index 0000000..3a917b2
--- /dev/null
+++ b/packages/propel/src/dialog/root.tsx
@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { forwardRef, memo, useMemo } from "react";
+import { Dialog as BaseDialog } from "@base-ui-components/react";
+import { cn } from "../utils/classname";
+
+// enums
+
+export enum EDialogWidth {
+  SM = "sm:max-w-sm",
+  MD = "sm:max-w-md",
+  LG = "sm:max-w-lg",
+  XL = "sm:max-w-xl",
+  XXL = "sm:max-w-2xl",
+  XXXL = "sm:max-w-3xl",
+  XXXXL = "sm:max-w-4xl",
+  VXL = "sm:max-w-5xl",
+  VIXL = "sm:max-w-6xl",
+  VIIXL = "sm:max-w-7xl",
+}
+
+// Types
+export type DialogPosition = "center" | "top";
+
+export interface DialogProps extends React.ComponentProps<typeof BaseDialog.Root> {
+  children: React.ReactNode;
+}
+
+export interface DialogPanelProps extends React.ComponentProps<typeof BaseDialog.Popup> {
+  width?: EDialogWidth;
+  position?: DialogPosition;
+  children: React.ReactNode;
+}
+
+export interface DialogTitleProps extends React.ComponentProps<typeof BaseDialog.Title> {
+  children: React.ReactNode;
+}
+
+// Constants
+const OVERLAY_CLASSNAME = cn("fixed inset-0 z-90 bg-backdrop");
+const BASE_CLASSNAME = "relative text-left bg-surface-1 rounded-lg shadow-md w-full z-100 border border-subtle";
+
+// Utility functions
+const getPositionClassNames = (position: DialogPosition) =>
+  cn("fixed isolate z-100", {
+    "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2": position === "center",
+    "top-8 left-1/2 -translate-x-1/2": position === "top",
+  });
+
+const DialogPortal = memo(function DialogPortal({
+  children,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Portal>) {
+  return (
+    <BaseDialog.Portal data-slot="dialog-portal" {...props}>
+      {children}
+    </BaseDialog.Portal>
+  );
+});
+DialogPortal.displayName = "DialogPortal";
+
+const DialogOverlay = memo(function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Backdrop>) {
+  return <BaseDialog.Backdrop data-slot="dialog-overlay" className={cn(OVERLAY_CLASSNAME, className)} {...props} />;
+});
+DialogOverlay.displayName = "DialogOverlay";
+
+const DialogComponent = memo(function DialogComponent({ children, ...props }: DialogProps) {
+  return (
+    <BaseDialog.Root data-slot="dialog" {...props}>
+      {children}
+    </BaseDialog.Root>
+  );
+});
+DialogComponent.displayName = "Dialog";
+
+const DialogTrigger = memo(function DialogTrigger({
+  children,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Trigger>) {
+  return (
+    <BaseDialog.Trigger data-slot="dialog-trigger" {...props}>
+      {children}
+    </BaseDialog.Trigger>
+  );
+});
+DialogTrigger.displayName = "DialogTrigger";
+
+const DialogPanel = forwardRef(function DialogPanel(
+  { className, width = EDialogWidth.XXL, children, position = "center", ...props }: DialogPanelProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof BaseDialog.Popup>>
+) {
+  const positionClassNames = useMemo(() => getPositionClassNames(position), [position]);
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <BaseDialog.Popup
+        ref={ref}
+        data-slot="dialog-content"
+        className={cn(BASE_CLASSNAME, positionClassNames, width, className)}
+        role="dialog"
+        aria-modal="true"
+        {...props}
+      >
+        {children}
+      </BaseDialog.Popup>
+    </DialogPortal>
+  );
+});
+DialogPanel.displayName = "DialogPanel";
+
+const DialogTitle = memo(function DialogTitle({ className, children, ...props }: DialogTitleProps) {
+  return (
+    <BaseDialog.Title
+      data-slot="dialog-title"
+      className={cn("text-16 leading-none font-semibold", className)}
+      {...props}
+    >
+      {children}
+    </BaseDialog.Title>
+  );
+});
+
+DialogTitle.displayName = "DialogTitle";
+
+// Create the compound Dialog component with proper typing
+const Dialog = Object.assign(DialogComponent, {
+  Panel: DialogPanel,
+  Title: DialogTitle,
+}) as typeof DialogComponent & {
+  Panel: typeof DialogPanel;
+  Title: typeof DialogTitle;
+};
+
+export { Dialog, DialogTitle, DialogPanel };
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
new file mode 100644
index 0000000..da03ba4
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
@@ -0,0 +1,442 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EmojiPicker } from "./emoji-picker";
+import type { TChangeHandlerProps } from "./helper";
+import { EmojiIconPickerTypes } from "./helper";
+
+const meta = {
+  title: "Components/Emoji/EmojiPicker",
+  component: EmojiPicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof EmojiPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Default",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedValue}
+          label="😊 Pick an emoji or icon"
+          defaultOpen={EmojiIconPickerTypes.EMOJI}
+          closeOnSelect
+        />
+        {selectedValue && (
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected:</div>
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const OpenToEmojiTab: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Emoji Tab",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedValue}
+          label="😊 Choose Emoji"
+          defaultOpen={EmojiIconPickerTypes.EMOJI}
+          closeOnSelect
+        />
+        {selectedValue && (
+          <div className="text-13">Selected: {selectedValue.type === "emoji" ? selectedValue.value : "Icon"}</div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const OpenToIconTab: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Icon Tab",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedValue}
+          label="🎨 Choose Icon"
+          defaultOpen={EmojiIconPickerTypes.ICON}
+          closeOnSelect
+        />
+        {selectedValue && (
+          <div className="text-13">
+            Selected:{" "}
+            {selectedValue.type === "icon" && typeof selectedValue.value === "object"
+              ? selectedValue.value.name
+              : "Emoji"}
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const LucideIcons: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Lucide Icons",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedValue}
+          label="Lucide Icons"
+          defaultOpen={EmojiIconPickerTypes.ICON}
+          closeOnSelect
+          iconType="lucide"
+        />
+        {selectedValue && (
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected Icon:</div>
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const MaterialIcons: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Material Icons",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedValue}
+          label="Material Icons"
+          defaultOpen={EmojiIconPickerTypes.ICON}
+          closeOnSelect
+          iconType="material"
+        />
+        {selectedValue && (
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected Icon:</div>
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const CloseOnSelectDisabled: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Close On Select Disabled",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValues, setSelectedValues] = useState<TChangeHandlerProps[]>([]);
+
+    const handleChange = (value: TChangeHandlerProps) => {
+      setSelectedValues((prev) => [...prev, value]);
+    };
+
+    return (
+      <div className="space-y-4 p-4">
+        <div className="flex items-center gap-2">
+          <EmojiPicker
+            isOpen={isOpen}
+            handleToggle={setIsOpen}
+            onChange={handleChange}
+            label="Select Multiple (Stays Open)"
+            defaultOpen={EmojiIconPickerTypes.EMOJI}
+            closeOnSelect={false}
+          />
+          <button
+            className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2"
+            onClick={() => setSelectedValues([])}
+          >
+            Clear
+          </button>
+        </div>
+        {selectedValues.length > 0 && (
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected ({selectedValues.length}):</div>
+            <div className="flex flex-wrap gap-2">
+              {selectedValues.map((val, idx) => (
+                <span key={idx} className="text-16">
+                  {val.type === "emoji" ? val.value : "🎨"}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const CustomSearchPlaceholder: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Custom Search",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedValue}
+          label="Custom Search"
+          defaultOpen={EmojiIconPickerTypes.EMOJI}
+          closeOnSelect
+          searchPlaceholder="Type to find emojis..."
+        />
+        {selectedValue && <div className="text-13">Selected: {JSON.stringify(selectedValue)}</div>}
+      </div>
+    );
+  },
+};
+
+export const SearchDisabled: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Search Disabled",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedValue}
+          label="No Search"
+          defaultOpen={EmojiIconPickerTypes.EMOJI}
+          closeOnSelect
+          searchDisabled
+        />
+        {selectedValue && <div className="text-13">Selected: {JSON.stringify(selectedValue)}</div>}
+      </div>
+    );
+  },
+};
+
+export const CustomIconColor: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Custom Icon Color",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState<TChangeHandlerProps | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedValue}
+          label="Custom Icon Color"
+          defaultOpen={EmojiIconPickerTypes.ICON}
+          closeOnSelect
+          defaultIconColor="#FF5733"
+        />
+        {selectedValue && (
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const DifferentPlacements: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Different Placements",
+  },
+  render() {
+    const [isOpen1, setIsOpen1] = useState(false);
+    const [isOpen2, setIsOpen2] = useState(false);
+    const [isOpen3, setIsOpen3] = useState(false);
+    const [isOpen4, setIsOpen4] = useState(false);
+
+    return (
+      <div className="space-y-8 p-8">
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom Start:</span>
+          <EmojiPicker
+            isOpen={isOpen1}
+            handleToggle={setIsOpen1}
+            onChange={() => {}}
+            label="Bottom Start"
+            placement="bottom-start"
+          />
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom End:</span>
+          <EmojiPicker
+            isOpen={isOpen2}
+            handleToggle={setIsOpen2}
+            onChange={() => {}}
+            label="Bottom End"
+            placement="bottom-end"
+          />
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top Start:</span>
+          <EmojiPicker
+            isOpen={isOpen3}
+            handleToggle={setIsOpen3}
+            onChange={() => {}}
+            label="Top Start"
+            placement="top-start"
+          />
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top End:</span>
+          <EmojiPicker
+            isOpen={isOpen4}
+            handleToggle={setIsOpen4}
+            onChange={() => {}}
+            label="Top End"
+            placement="top-end"
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const InFormContext: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "In Form Context",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [formData, setFormData] = useState({
+      title: "",
+      emoji: null as TChangeHandlerProps | null,
+    });
+
+    const handleEmojiChange = (value: TChangeHandlerProps) => {
+      setFormData((prev) => ({ ...prev, emoji: value }));
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      alert(`Form submitted:\n${JSON.stringify(formData, null, 2)}`);
+    };
+
+    return (
+      <div className="max-w-md p-4">
+        <form onSubmit={handleSubmit} className="space-y-4 rounded-lg border border-subtle p-6">
+          <div>
+            <label className="mb-2 block text-13 font-medium">Project Title</label>
+            <input
+              type="text"
+              value={formData.title}
+              onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
+              className="w-full rounded-sm border border-subtle bg-layer-1 px-3 py-2"
+              placeholder="Enter project title"
+            />
+          </div>
+          <div>
+            <label className="mb-2 block text-13 font-medium">Project Icon</label>
+            <EmojiPicker
+              isOpen={isOpen}
+              handleToggle={setIsOpen}
+              onChange={handleEmojiChange}
+              label={formData.emoji && formData.emoji.type === "emoji" ? formData.emoji.value : "Click to select icon"}
+              defaultOpen={EmojiIconPickerTypes.EMOJI}
+              closeOnSelect
+              buttonClassName="px-4 py-2 bg-layer-1 border border-subtle rounded-sm hover:bg-surface-2 w-full text-left"
+            />
+          </div>
+          <button
+            type="submit"
+            className="w-full rounded-sm bg-accent-primary px-4 py-2 text-on-color hover:bg-accent-primary/80"
+          >
+            Create Project
+          </button>
+        </form>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx b/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
new file mode 100644
index 0000000..9fc7812
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useMemo, useCallback } from "react";
+import { Tabs } from "@base-ui-components/react";
+import { Popover } from "../popover";
+import { cn } from "../utils/classname";
+import { convertPlacementToSideAndAlign } from "../utils/placement";
+import { EmojiRoot } from "./emoji/emoji";
+import type { TCustomEmojiPicker } from "./helper";
+import { emojiToString, EmojiIconPickerTypes } from "./helper";
+import { IconRoot } from "./icon/icon-root";
+
+export function EmojiPicker(props: TCustomEmojiPicker) {
+  const {
+    isOpen,
+    handleToggle,
+    buttonClassName,
+    closeOnSelect = true,
+    defaultIconColor = "#6d7b8a",
+    defaultOpen = EmojiIconPickerTypes.EMOJI,
+    disabled = false,
+    dropdownClassName,
+    label,
+    onChange,
+    placement = "bottom-start",
+    searchDisabled = false,
+    searchPlaceholder = "Search",
+    iconType = "lucide",
+    side = "bottom",
+    align = "start",
+  } = props;
+
+  // side and align calculations
+  const { finalSide, finalAlign } = useMemo(() => {
+    if (placement) {
+      const converted = convertPlacementToSideAndAlign(placement);
+      return { finalSide: converted.side, finalAlign: converted.align };
+    }
+    return { finalSide: side, finalAlign: align };
+  }, [placement, side, align]);
+
+  const handleEmojiChange = useCallback(
+    (value: string) => {
+      onChange({
+        type: EmojiIconPickerTypes.EMOJI,
+        value: emojiToString(value),
+      });
+      if (closeOnSelect) handleToggle(false);
+    },
+    [onChange, closeOnSelect, handleToggle]
+  );
+
+  const handleIconChange = useCallback(
+    (value: { name: string; color: string }) => {
+      onChange({
+        type: EmojiIconPickerTypes.ICON,
+        value: value,
+      });
+      if (closeOnSelect) handleToggle(false);
+    },
+    [onChange, closeOnSelect, handleToggle]
+  );
+
+  const tabs = useMemo(
+    () =>
+      [
+        {
+          key: "emoji",
+          label: "Emoji",
+          content: (
+            <EmojiRoot
+              onChange={handleEmojiChange}
+              searchPlaceholder={searchPlaceholder}
+              searchDisabled={searchDisabled}
+            />
+          ),
+        },
+        {
+          key: "icon",
+          label: "Icon",
+          content: (
+            <IconRoot
+              defaultColor={defaultIconColor}
+              onChange={handleIconChange}
+              searchDisabled={searchDisabled}
+              iconType={iconType}
+            />
+          ),
+        },
+      ].map((tab) => ({
+        key: tab.key,
+        label: tab.label,
+        content: tab.content,
+      })),
+    [defaultIconColor, searchDisabled, searchPlaceholder, iconType, handleEmojiChange, handleIconChange]
+  );
+
+  return (
+    <Popover open={isOpen} onOpenChange={handleToggle}>
+      <Popover.Button className={cn("outline-none", buttonClassName)} disabled={disabled}>
+        {label}
+      </Popover.Button>
+      <Popover.Panel
+        positionerClassName="z-50"
+        className={cn("w-80 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1", dropdownClassName)}
+        side={finalSide}
+        align={finalAlign}
+        sideOffset={8}
+        data-prevent-outside-click="true"
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+        onFocus={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === "Tab") {
+            return;
+          }
+          if (e.key === "Escape") {
+            handleToggle(false);
+            return;
+          }
+          e.stopPropagation();
+        }}
+      >
+        <Tabs.Root defaultValue={defaultOpen}>
+          <Tabs.List className="grid grid-cols-2 gap-1 px-3.5 pt-3">
+            {tabs.map((tab) => (
+              <Tabs.Tab
+                key={tab.key}
+                value={tab.key}
+                className={({ selected }) =>
+                  cn("rounded-sm border border-subtle bg-layer-1 py-1 text-13", {
+                    "bg-surface-1 text-primary": selected,
+                    "text-placeholder hover:bg-layer-1/60 hover:text-tertiary": !selected,
+                  })
+                }
+              >
+                {tab.label}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+          {tabs.map((tab) => (
+            <Tabs.Panel key={tab.key} value={tab.key} className="h-80 overflow-hidden overflow-y-auto">
+              {tab.content}
+            </Tabs.Panel>
+          ))}
+        </Tabs.Root>
+      </Popover.Panel>
+    </Popover>
+  );
+}
diff --git a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
new file mode 100644
index 0000000..13fc675
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef } from "react";
+import { EmojiPicker } from "frimousse";
+import { cn } from "../../utils";
+
+type EmojiRootProps = {
+  onChange: (value: string) => void;
+  searchPlaceholder?: string;
+  searchDisabled?: boolean;
+};
+
+export function EmojiRoot(props: EmojiRootProps) {
+  const { onChange, searchPlaceholder = "Search", searchDisabled = false } = props;
+  const searchWrapperRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const focusInput = () => {
+      const searchWrapper = searchWrapperRef.current;
+      if (searchWrapper) {
+        const inputElement = searchWrapper.querySelector("input");
+        if (inputElement) {
+          inputElement.removeAttribute("disabled");
+          inputElement.focus();
+        }
+      }
+    };
+    focusInput();
+  }, []);
+
+  return (
+    <EmojiPicker.Root
+      data-slot="emoji-picker"
+      className="isolate flex h-full w-full flex-col rounded-md border-none p-2"
+      onEmojiSelect={(val) => onChange(val.emoji)}
+    >
+      <div className="sticky top-0 z-10 flex items-center justify-between gap-2 bg-surface-1 px-1.5 py-2 [&>[data-slot='emoji-picker-search-wrapper']]:flex-grow [&>[data-slot='emoji-picker-search-wrapper']]:p-0">
+        <div ref={searchWrapperRef} data-slot="emoji-picker-search-wrapper" className="p-2">
+          <EmojiPicker.Search
+            placeholder={searchPlaceholder}
+            disabled={searchDisabled}
+            className="block h-full w-full flex-grow-0 rounded-md border-[0.5px] border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:border-accent-strong focus:outline-none"
+          />
+        </div>
+        <EmojiPicker.SkinToneSelector
+          data-slot="emoji-picker-skin-tone-selector"
+          className="hover:bg-accent mx-2 mb-1.5 size-8 flex-shrink-0 rounded-md bg-surface-1 text-16"
+        />
+      </div>
+      <EmojiPicker.Viewport data-slot="emoji-picker-content" className={cn("relative flex-1 outline-none")}>
+        <EmojiPicker.List
+          data-slot="emoji-picker-list"
+          className={cn("pb-2 select-none")}
+          components={{
+            CategoryHeader: ({ category, ...props }) => (
+              <div
+                data-slot="emoji-picker-list-category-header"
+                className="bg-surface-1 px-3 pb-1.5 text-11 font-medium text-tertiary"
+                {...props}
+              >
+                {category.label}
+              </div>
+            ),
+            Row: ({ children, ...props }) => (
+              <div data-slot="emoji-picker-list-row" className="scroll-my-1.5 px-1.5" {...props}>
+                {children}
+              </div>
+            ),
+            Emoji: ({ emoji, ...props }) => (
+              <button
+                type="button"
+                aria-label={emoji?.label ?? emoji?.emoji}
+                data-slot="emoji-picker-list-emoji"
+                className="data-active:bg-accent flex size-8 items-center justify-center rounded-md text-16"
+                {...props}
+              >
+                {emoji.emoji}
+              </button>
+            ),
+          }}
+        />
+      </EmojiPicker.Viewport>
+    </EmojiPicker.Root>
+  );
+}
diff --git a/packages/propel/src/emoji-icon-picker/emoji/index.ts b/packages/propel/src/emoji-icon-picker/emoji/index.ts
new file mode 100644
index 0000000..82988cb
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/emoji/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./emoji";
diff --git a/packages/propel/src/emoji-icon-picker/helper.tsx b/packages/propel/src/emoji-icon-picker/helper.tsx
new file mode 100644
index 0000000..090d926
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/helper.tsx
@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TPlacement, TSide, TAlign } from "../utils/placement";
+
+export const EmojiIconPickerTypes = {
+  EMOJI: "emoji",
+  ICON: "icon",
+} as const;
+
+export type TChangeHandlerProps =
+  | {
+      type: typeof EmojiIconPickerTypes.EMOJI;
+      value: string;
+    }
+  | {
+      type: typeof EmojiIconPickerTypes.ICON;
+      value: {
+        name: string;
+        color: string;
+      };
+    };
+
+export type TEmojiIconPickerTypes = typeof EmojiIconPickerTypes.EMOJI | typeof EmojiIconPickerTypes.ICON;
+
+export type TCustomEmojiPicker = {
+  isOpen: boolean;
+  handleToggle: (value: boolean) => void;
+  buttonClassName?: string;
+  className?: string;
+  closeOnSelect?: boolean;
+  defaultIconColor?: string;
+  defaultOpen?: TEmojiIconPickerTypes;
+  disabled?: boolean;
+  dropdownClassName?: string;
+  label: React.ReactNode;
+  onChange: (value: TChangeHandlerProps) => void;
+  placement?: TPlacement;
+  searchDisabled?: boolean;
+  searchPlaceholder?: string;
+  iconType?: "material" | "lucide";
+  theme?: "light" | "dark";
+  side?: TSide;
+  align?: TAlign;
+};
+
+export type TIconsListProps = {
+  defaultColor: string;
+  onChange: (val: { name: string; color: string }) => void;
+  searchDisabled?: boolean;
+};
+
+/**
+ * Adjusts the given hex color to ensure it has enough contrast.
+ * @param {string} hex - The hex color code input by the user.
+ * @returns {string} - The adjusted hex color code.
+ */
+export const adjustColorForContrast = (hex: string): string => {
+  // Ensure hex color is valid
+  if (!/^#([0-9A-F]{3}){1,2}$/i.test(hex)) {
+    throw new Error("Invalid hex color code");
+  }
+
+  // Convert hex to RGB
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (hex.length === 4) {
+    r = parseInt(hex[1] + hex[1], 16);
+    g = parseInt(hex[2] + hex[2], 16);
+    b = parseInt(hex[3] + hex[3], 16);
+  } else if (hex.length === 7) {
+    r = parseInt(hex[1] + hex[2], 16);
+    g = parseInt(hex[3] + hex[4], 16);
+    b = parseInt(hex[5] + hex[6], 16);
+  }
+
+  // Calculate luminance
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+  // If the color is too light, darken it
+  if (luminance > 0.5) {
+    r = Math.max(0, r - 50);
+    g = Math.max(0, g - 50);
+    b = Math.max(0, b - 50);
+  }
+
+  // Convert RGB back to hex
+  const toHex = (value: number): string => {
+    const hex = value.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
+
+export const DEFAULT_COLORS = ["#95999f", "#6d7b8a", "#5e6ad2", "#02b5ed", "#02b55c", "#f2be02", "#e57a00", "#f38e82"];
+
+/**
+ * Enhanced emoji to decimal conversion that preserves emoji sequences
+ * This function handles complex emoji sequences including skin tone modifiers
+ * @param emoji - The emoji string to convert
+ * @returns Array of decimal Unicode code points
+ */
+export function emojiToDecimalEnhanced(emoji: string): number[] {
+  const codePoints: number[] = [];
+
+  // Use Array.from to properly handle multi-byte Unicode characters
+  const characters = Array.from(emoji);
+
+  for (const char of characters) {
+    const codePoint = char.codePointAt(0);
+    if (codePoint !== undefined) {
+      codePoints.push(codePoint);
+    }
+  }
+
+  return codePoints;
+}
+
+/**
+ * Enhanced decimal to emoji conversion that handles emoji sequences
+ * @param decimals - Array of decimal Unicode code points
+ * @returns The reconstructed emoji string
+ */
+export function decimalToEmojiEnhanced(decimals: number[]): string {
+  return decimals.map((decimal) => String.fromCodePoint(decimal)).join("");
+}
+
+/**
+ * Converts emoji to a string representation for storage
+ * This creates a comma-separated string of decimal values
+ * @param emoji - The emoji string to convert
+ * @returns String representation of decimal values
+ */
+export function emojiToString(emoji: string): string {
+  const decimals = emojiToDecimalEnhanced(emoji);
+  return decimals.join("-");
+}
+
+/**
+ * Converts string representation back to emoji
+ * @param emojiString - Comma-separated string of decimal values
+ * @returns The reconstructed emoji string
+ */
+export function stringToEmoji(emojiString: string): string {
+  if (!emojiString) return "";
+  const decimals = emojiString
+    .split("-")
+    .map((s) => Number(s.trim()))
+    .filter((n) => Number.isFinite(n) && n >= 0 && n <= 0x10ffff);
+  try {
+    return decimalToEmojiEnhanced(decimals);
+  } catch {
+    return "";
+  }
+}
+
+export const getEmojiSize = (size: number) => size * 0.9 * 0.0625;
diff --git a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
new file mode 100644
index 0000000..9e61a8d
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useState } from "react";
+import { InfoIcon } from "lucide-react";
+import { SearchIcon } from "../../icons";
+import { cn } from "../../utils/classname";
+import { adjustColorForContrast, DEFAULT_COLORS } from "../helper";
+import { LucideIconsList } from "./lucide-root";
+import { MaterialIconList } from "./material-root";
+
+type IconRootProps = {
+  onChange: (value: { name: string; color: string }) => void;
+  defaultColor: string;
+  searchDisabled?: boolean;
+  iconType: "material" | "lucide";
+};
+
+export function IconRoot(props: IconRootProps) {
+  const { defaultColor, onChange, searchDisabled = false, iconType } = props;
+  // states
+  const [activeColor, setActiveColor] = useState(defaultColor);
+  const [showHexInput, setShowHexInput] = useState(false);
+  const [hexValue, setHexValue] = useState("");
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const [query, setQuery] = useState("");
+
+  useEffect(() => {
+    if (DEFAULT_COLORS.includes(defaultColor.toLowerCase() ?? "")) setShowHexInput(false);
+    else {
+      setHexValue(defaultColor?.slice(1, 7) ?? "");
+      setShowHexInput(true);
+    }
+  }, [defaultColor]);
+
+  return (
+    <>
+      <div className="sticky top-0 flex flex-col bg-surface-1">
+        {!searchDisabled && (
+          <div className="flex w-full items-center px-2 py-[15px]">
+            <div
+              className={cn("relative flex h-10 w-full items-center gap-2 rounded-lg border bg-surface-2 px-[30px]", {
+                "border-accent-strong": isInputFocused,
+                "border-transparent": !isInputFocused,
+              })}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
+            >
+              <SearchIcon className="absolute bottom-3 left-2.5 h-3.5 w-3.5 text-placeholder" />
+
+              <input
+                placeholder="Search"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                className="block h-full w-full rounded-md border-[0.5px] border-none border-subtle bg-transparent p-0 px-3 py-2 text-16 placeholder-(--text-color-placeholder) focus:outline-none"
+              />
+            </div>
+          </div>
+        )}
+        <div className="grid h-9 grid-cols-9 items-center justify-items-center gap-2 px-2.5 py-1">
+          {showHexInput ? (
+            <div className="col-span-8 ml-2 flex items-center gap-1 justify-self-stretch">
+              <span
+                className="mr-1 h-4 w-4 flex-shrink-0 rounded-full"
+                style={{
+                  backgroundColor: `#${hexValue}`,
+                }}
+              />
+              <span className="flex-shrink-0 text-11 text-tertiary">HEX</span>
+              <span className="-mr-1 flex-shrink-0 text-11 text-secondary">#</span>
+              <input
+                type="text"
+                value={hexValue}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  setHexValue(value);
+                  if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
+                }}
+                className="block flex-grow rounded-sm border-[0.5px] border-none border-subtle bg-transparent px-3 py-2 pl-0 text-11 text-secondary placeholder-(--text-color-placeholder) ring-0 focus:outline-none"
+                autoFocus
+              />
+            </div>
+          ) : (
+            DEFAULT_COLORS.map((curCol) => (
+              <button
+                key={curCol}
+                type="button"
+                className="grid size-5 place-items-center"
+                onClick={() => {
+                  setActiveColor(curCol);
+                  setHexValue(curCol.slice(1, 7));
+                }}
+              >
+                <span className="h-4 w-4 cursor-pointer rounded-full" style={{ backgroundColor: curCol }} />
+              </button>
+            ))
+          )}
+          <button
+            type="button"
+            className={cn("grid h-4 w-4 place-items-center rounded-full border border-transparent", {
+              "border-strong-1": !showHexInput,
+            })}
+            onClick={() => {
+              setShowHexInput((prevData) => !prevData);
+              setHexValue(activeColor.slice(1, 7));
+            }}
+          >
+            {showHexInput ? (
+              <span className="h-4 w-4 rounded-full conical-gradient" />
+            ) : (
+              <span className="grid place-items-center text-10 text-tertiary">#</span>
+            )}
+          </button>
+        </div>
+        <div className="flex h-6 w-full items-center gap-2 py-1 pr-3 pl-4">
+          <InfoIcon className="h-3 w-3" />
+          <p className="text-11"> Colors will be adjusted to ensure sufficient contrast.</p>
+        </div>
+      </div>
+      <div className="mt-2 grid grid-cols-8 justify-items-center gap-1 px-2.5">
+        {iconType === "material" ? (
+          <MaterialIconList query={query} onChange={onChange} activeColor={activeColor} />
+        ) : (
+          <LucideIconsList query={query} onChange={onChange} activeColor={activeColor} />
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/packages/propel/src/emoji-icon-picker/icon/index.ts b/packages/propel/src/emoji-icon-picker/icon/index.ts
new file mode 100644
index 0000000..03ca334
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/icon/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./icon-root";
diff --git a/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx b/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
new file mode 100644
index 0000000..5b24eaa
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { LUCIDE_ICONS_LIST } from "../lucide-icons";
+
+type LucideIconsListProps = {
+  onChange: (value: { name: string; color: string }) => void;
+  activeColor: string;
+  query: string;
+};
+
+export function LucideIconsList(props: LucideIconsListProps) {
+  const { query, onChange, activeColor } = props;
+
+  const filteredArray = LUCIDE_ICONS_LIST.filter((icon) => icon.name.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <>
+      {filteredArray.map((icon) => (
+        <button
+          key={icon.name}
+          type="button"
+          className="grid h-9 w-9 place-items-center rounded-sm text-16 select-none hover:bg-layer-1"
+          onClick={() => {
+            onChange({
+              name: icon.name,
+              color: activeColor,
+            });
+          }}
+        >
+          <icon.element style={{ color: activeColor }} className="size-4" />
+        </button>
+      ))}
+    </>
+  );
+}
diff --git a/packages/propel/src/emoji-icon-picker/icon/material-root.tsx b/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
new file mode 100644
index 0000000..1f2c434
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import useFontFaceObserver from "use-font-face-observer";
+import { MATERIAL_ICONS_LIST } from "../material-icons";
+
+type MaterialIconListProps = {
+  onChange: (value: { name: string; color: string }) => void;
+  activeColor: string;
+  query: string;
+};
+
+export function MaterialIconList(props: MaterialIconListProps) {
+  const { query, onChange, activeColor } = props;
+
+  const filteredArray = MATERIAL_ICONS_LIST.filter((icon) => icon.name.toLowerCase().includes(query.toLowerCase()));
+
+  const isMaterialSymbolsFontLoaded = useFontFaceObserver([
+    {
+      family: `Material Symbols Rounded`,
+      style: `normal`,
+      weight: `normal`,
+      stretch: `condensed`,
+    },
+  ]);
+
+  return (
+    <>
+      {filteredArray.map((icon) => (
+        <button
+          key={icon.name}
+          type="button"
+          className="grid h-9 w-9 place-items-center rounded-sm text-16 select-none hover:bg-layer-1"
+          onClick={() => {
+            onChange({
+              name: icon.name,
+              color: activeColor,
+            });
+          }}
+        >
+          {isMaterialSymbolsFontLoaded ? (
+            <span style={{ color: activeColor }} className="material-symbols-rounded text-20! leading-5!">
+              {icon.name}
+            </span>
+          ) : (
+            <span className="size-5 animate-pulse rounded-sm bg-layer-1" />
+          )}
+        </button>
+      ))}
+    </>
+  );
+}
diff --git a/packages/propel/src/emoji-icon-picker/index.ts b/packages/propel/src/emoji-icon-picker/index.ts
new file mode 100644
index 0000000..3b1a9ab
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./emoji-picker";
+export * from "./helper";
+export * from "./logo";
+export * from "./lucide-icons";
+export * from "./material-icons";
diff --git a/packages/propel/src/emoji-icon-picker/logo.tsx b/packages/propel/src/emoji-icon-picker/logo.tsx
new file mode 100644
index 0000000..5b59dfa
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/logo.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Due to some weird issue with the import order, the import of useFontFaceObserver
+// should be after the imported here rather than some below helper functions as it is in the original file
+
+import useFontFaceObserver from "use-font-face-observer";
+// plane imports
+import type { TLogoProps } from "@plane/types";
+// local imports
+import { getEmojiSize, stringToEmoji } from "./helper";
+import { LUCIDE_ICONS_LIST } from "./lucide-icons";
+
+type Props = {
+  logo?: TLogoProps;
+  size?: number;
+  type?: "lucide" | "material";
+};
+
+export function Logo({ logo, size = 16, type = "material" }: Props) {
+  const isMaterialSymbolsFontLoaded = useFontFaceObserver([
+    {
+      family: "Material Symbols Rounded",
+      style: "normal",
+      weight: "normal",
+      stretch: "condensed",
+    },
+  ]);
+
+  // Reusable loading skeleton
+  const loadingSkeleton = <span style={{ height: size, width: size }} className="rounded-sm bg-layer-1" />;
+
+  // Early returns for loading/empty states
+  if (!logo || !logo.in_use) return loadingSkeleton;
+
+  const { in_use, emoji, icon } = logo;
+  const value = in_use === "emoji" ? emoji?.value : icon?.name;
+
+  if (!value) return loadingSkeleton;
+
+  // Emoji rendering
+  if (in_use === "emoji") {
+    return (
+      <span
+        className="flex items-center justify-center"
+        style={{
+          fontSize: `${getEmojiSize(size)}rem`,
+          lineHeight: `${getEmojiSize(size)}rem`,
+          height: size,
+          width: size,
+        }}
+      >
+        {stringToEmoji(emoji?.value || "")}
+      </span>
+    );
+  }
+
+  // Icon rendering
+  if (in_use === "icon") {
+    const color = icon?.color;
+
+    // Lucide icon
+    if (type === "lucide") {
+      const lucideIcon = LUCIDE_ICONS_LIST.find((item) => item.name === value);
+      if (!lucideIcon) return null;
+
+      const LucideIconElement = lucideIcon.element;
+      return <LucideIconElement style={{ color, height: size, width: size }} />;
+    }
+
+    if (!isMaterialSymbolsFontLoaded) return loadingSkeleton;
+
+    // Material icon
+    return (
+      <span
+        className="material-symbols-rounded"
+        style={{
+          fontSize: size,
+          color,
+          scale: "115%",
+        }}
+      >
+        {value}
+      </span>
+    );
+  }
+
+  return null;
+}
diff --git a/packages/propel/src/emoji-icon-picker/lucide-icons.tsx b/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
new file mode 100644
index 0000000..903fc22
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
@@ -0,0 +1,321 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  Activity,
+  Airplay,
+  AlertCircle,
+  AlertOctagon,
+  AlertTriangle,
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Anchor,
+  Aperture,
+  Archive,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  AtSign,
+  Award,
+  BarChart,
+  BarChart2,
+  Battery,
+  BatteryCharging,
+  Bell,
+  BellOff,
+  Book,
+  Bookmark,
+  BookOpen,
+  Box,
+  Briefcase,
+  Calendar,
+  Camera,
+  CameraOff,
+  Cast,
+  Check,
+  CheckCircle,
+  CheckSquare,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Clipboard,
+  Clock,
+  Cloud,
+  CloudDrizzle,
+  CloudLightning,
+  CloudOff,
+  CloudRain,
+  CloudSnow,
+  Code,
+  Codepen,
+  Codesandbox,
+  Coffee,
+  Columns,
+  Command,
+  Compass,
+  Copy,
+  CornerDownLeft,
+  CornerDownRight,
+  CornerLeftDown,
+  CornerLeftUp,
+  CornerRightDown,
+  CornerRightUp,
+  CornerUpLeft,
+  CornerUpRight,
+  Cpu,
+  CreditCard,
+  Crop,
+  Crosshair,
+  Database,
+  Delete,
+  Disc,
+  Divide,
+  DivideCircle,
+  DivideSquare,
+  DollarSign,
+  Download,
+  DownloadCloud,
+  Dribbble,
+  Droplet,
+  Edit,
+  Edit2,
+  Edit3,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  Facebook,
+  FastForward,
+  Feather,
+  Figma,
+  File,
+  FileMinus,
+  FilePlus,
+  FileText,
+  Film,
+  Filter,
+  Flag,
+  Folder,
+  FolderMinus,
+  FolderPlus,
+  Framer,
+  Frown,
+  Gift,
+  GitBranch,
+  GitCommit,
+  GitMerge,
+  GitPullRequest,
+  Github,
+  Gitlab,
+  Globe,
+  Grid,
+  HardDrive,
+  Hash,
+  Headphones,
+  Heart,
+  HelpCircle,
+  Hexagon,
+  Home,
+  Image,
+  Inbox,
+  Info,
+  Instagram,
+  Italic,
+  Key,
+  Layers,
+  Layout,
+  LifeBuoy,
+  Link,
+  Link2,
+  Linkedin,
+  List,
+  Loader,
+  Lock,
+  LogIn,
+  LogOut,
+  Mail,
+  Map as MapIcon,
+  MapPin,
+  Maximize,
+  Maximize2,
+  Meh,
+  Menu,
+  MessageCircle,
+  MessageSquare,
+  Mic,
+  MicOff,
+  Minimize,
+  Minimize2,
+  Minus,
+  MinusCircle,
+  MinusSquare,
+  CircleChevronDown,
+  UsersRound,
+  ToggleLeft,
+  Search,
+  User,
+} from "lucide-react";
+
+export const LUCIDE_ICONS_LIST = [
+  { name: "Activity", element: Activity },
+  { name: "Airplay", element: Airplay },
+  { name: "AlertCircle", element: AlertCircle },
+  { name: "AlertOctagon", element: AlertOctagon },
+  { name: "AlertTriangle", element: AlertTriangle },
+  { name: "AlignCenter", element: AlignCenter },
+  { name: "AlignJustify", element: AlignJustify },
+  { name: "AlignLeft", element: AlignLeft },
+  { name: "AlignRight", element: AlignRight },
+  { name: "Anchor", element: Anchor },
+  { name: "Aperture", element: Aperture },
+  { name: "Archive", element: Archive },
+  { name: "ArrowDown", element: ArrowDown },
+  { name: "ArrowLeft", element: ArrowLeft },
+  { name: "ArrowRight", element: ArrowRight },
+  { name: "ArrowUp", element: ArrowUp },
+  { name: "AtSign", element: AtSign },
+  { name: "Award", element: Award },
+  { name: "BarChart", element: BarChart },
+  { name: "BarChart2", element: BarChart2 },
+  { name: "Battery", element: Battery },
+  { name: "BatteryCharging", element: BatteryCharging },
+  { name: "Bell", element: Bell },
+  { name: "BellOff", element: BellOff },
+  { name: "Book", element: Book },
+  { name: "Bookmark", element: Bookmark },
+  { name: "BookOpen", element: BookOpen },
+  { name: "Box", element: Box },
+  { name: "Briefcase", element: Briefcase },
+  { name: "Calendar", element: Calendar },
+  { name: "Camera", element: Camera },
+  { name: "CameraOff", element: CameraOff },
+  { name: "Cast", element: Cast },
+  { name: "CircleChevronDown", element: CircleChevronDown },
+  { name: "Check", element: Check },
+  { name: "CheckCircle", element: CheckCircle },
+  { name: "CheckSquare", element: CheckSquare },
+  { name: "ChevronDown", element: ChevronDown },
+  { name: "ChevronLeft", element: ChevronLeft },
+  { name: "ChevronRight", element: ChevronRight },
+  { name: "ChevronUp", element: ChevronUp },
+  { name: "Clipboard", element: Clipboard },
+  { name: "Clock", element: Clock },
+  { name: "Cloud", element: Cloud },
+  { name: "CloudDrizzle", element: CloudDrizzle },
+  { name: "CloudLightning", element: CloudLightning },
+  { name: "CloudOff", element: CloudOff },
+  { name: "CloudRain", element: CloudRain },
+  { name: "CloudSnow", element: CloudSnow },
+  { name: "Code", element: Code },
+  { name: "Codepen", element: Codepen },
+  { name: "Codesandbox", element: Codesandbox },
+  { name: "Coffee", element: Coffee },
+  { name: "Columns", element: Columns },
+  { name: "Command", element: Command },
+  { name: "Compass", element: Compass },
+  { name: "Copy", element: Copy },
+  { name: "CornerDownLeft", element: CornerDownLeft },
+  { name: "CornerDownRight", element: CornerDownRight },
+  { name: "CornerLeftDown", element: CornerLeftDown },
+  { name: "CornerLeftUp", element: CornerLeftUp },
+  { name: "CornerRightDown", element: CornerRightDown },
+  { name: "CornerRightUp", element: CornerRightUp },
+  { name: "CornerUpLeft", element: CornerUpLeft },
+  { name: "CornerUpRight", element: CornerUpRight },
+  { name: "Cpu", element: Cpu },
+  { name: "CreditCard", element: CreditCard },
+  { name: "Crop", element: Crop },
+  { name: "Crosshair", element: Crosshair },
+  { name: "Database", element: Database },
+  { name: "Delete", element: Delete },
+  { name: "Disc", element: Disc },
+  { name: "Divide", element: Divide },
+  { name: "DivideCircle", element: DivideCircle },
+  { name: "DivideSquare", element: DivideSquare },
+  { name: "DollarSign", element: DollarSign },
+  { name: "Download", element: Download },
+  { name: "DownloadCloud", element: DownloadCloud },
+  { name: "Dribbble", element: Dribbble },
+  { name: "Droplet", element: Droplet },
+  { name: "Edit", element: Edit },
+  { name: "Edit2", element: Edit2 },
+  { name: "Edit3", element: Edit3 },
+  { name: "ExternalLink", element: ExternalLink },
+  { name: "Eye", element: Eye },
+  { name: "EyeOff", element: EyeOff },
+  { name: "Facebook", element: Facebook },
+  { name: "FastForward", element: FastForward },
+  { name: "Feather", element: Feather },
+  { name: "Figma", element: Figma },
+  { name: "File", element: File },
+  { name: "FileMinus", element: FileMinus },
+  { name: "FilePlus", element: FilePlus },
+  { name: "FileText", element: FileText },
+  { name: "Film", element: Film },
+  { name: "Filter", element: Filter },
+  { name: "Flag", element: Flag },
+  { name: "Folder", element: Folder },
+  { name: "FolderMinus", element: FolderMinus },
+  { name: "FolderPlus", element: FolderPlus },
+  { name: "Framer", element: Framer },
+  { name: "Frown", element: Frown },
+  { name: "Gift", element: Gift },
+  { name: "GitBranch", element: GitBranch },
+  { name: "GitCommit", element: GitCommit },
+  { name: "GitMerge", element: GitMerge },
+  { name: "GitPullRequest", element: GitPullRequest },
+  { name: "Github", element: Github },
+  { name: "Gitlab", element: Gitlab },
+  { name: "Globe", element: Globe },
+  { name: "Grid", element: Grid },
+  { name: "HardDrive", element: HardDrive },
+  { name: "Hash", element: Hash },
+  { name: "Headphones", element: Headphones },
+  { name: "Heart", element: Heart },
+  { name: "HelpCircle", element: HelpCircle },
+  { name: "Hexagon", element: Hexagon },
+  { name: "Home", element: Home },
+  { name: "Image", element: Image },
+  { name: "Inbox", element: Inbox },
+  { name: "Info", element: Info },
+  { name: "Instagram", element: Instagram },
+  { name: "Italic", element: Italic },
+  { name: "Key", element: Key },
+  { name: "Layers", element: Layers },
+  { name: "Layout", element: Layout },
+  { name: "LifeBuoy", element: LifeBuoy },
+  { name: "Link", element: Link },
+  { name: "Link2", element: Link2 },
+  { name: "Linkedin", element: Linkedin },
+  { name: "List", element: List },
+  { name: "Loader", element: Loader },
+  { name: "Lock", element: Lock },
+  { name: "LogIn", element: LogIn },
+  { name: "LogOut", element: LogOut },
+  { name: "Mail", element: Mail },
+  { name: "Map", element: MapIcon },
+  { name: "MapPin", element: MapPin },
+  { name: "Maximize", element: Maximize },
+  { name: "Maximize2", element: Maximize2 },
+  { name: "Meh", element: Meh },
+  { name: "Menu", element: Menu },
+  { name: "MessageCircle", element: MessageCircle },
+  { name: "MessageSquare", element: MessageSquare },
+  { name: "Mic", element: Mic },
+  { name: "MicOff", element: MicOff },
+  { name: "Minimize", element: Minimize },
+  { name: "Minimize2", element: Minimize2 },
+  { name: "Minus", element: Minus },
+  { name: "MinusCircle", element: MinusCircle },
+  { name: "MinusSquare", element: MinusSquare },
+  { name: "Search", element: Search },
+  { name: "ToggleLeft", element: ToggleLeft },
+  { name: "User", element: User },
+  { name: "UsersRound", element: UsersRound },
+];
diff --git a/packages/propel/src/emoji-icon-picker/material-icons.tsx b/packages/propel/src/emoji-icon-picker/material-icons.tsx
new file mode 100644
index 0000000..70fd6ad
--- /dev/null
+++ b/packages/propel/src/emoji-icon-picker/material-icons.tsx
@@ -0,0 +1,608 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const MATERIAL_ICONS_LIST = [
+  {
+    name: "search",
+  },
+  {
+    name: "home",
+  },
+  {
+    name: "menu",
+  },
+  {
+    name: "close",
+  },
+  {
+    name: "settings",
+  },
+  {
+    name: "done",
+  },
+  {
+    name: "check_circle",
+  },
+  {
+    name: "favorite",
+  },
+  {
+    name: "add",
+  },
+  {
+    name: "delete",
+  },
+  {
+    name: "arrow_back",
+  },
+  {
+    name: "star",
+  },
+  {
+    name: "logout",
+  },
+  {
+    name: "add_circle",
+  },
+  {
+    name: "cancel",
+  },
+  {
+    name: "arrow_drop_down",
+  },
+  {
+    name: "more_vert",
+  },
+  {
+    name: "check",
+  },
+  {
+    name: "check_box",
+  },
+  {
+    name: "toggle_on",
+  },
+  {
+    name: "open_in_new",
+  },
+  {
+    name: "refresh",
+  },
+  {
+    name: "login",
+  },
+  {
+    name: "radio_button_unchecked",
+  },
+  {
+    name: "more_horiz",
+  },
+  {
+    name: "apps",
+  },
+  {
+    name: "radio_button_checked",
+  },
+  {
+    name: "download",
+  },
+  {
+    name: "remove",
+  },
+  {
+    name: "toggle_off",
+  },
+  {
+    name: "bolt",
+  },
+  {
+    name: "arrow_upward",
+  },
+  {
+    name: "filter_list",
+  },
+  {
+    name: "delete_forever",
+  },
+  {
+    name: "autorenew",
+  },
+  {
+    name: "key",
+  },
+  {
+    name: "sort",
+  },
+  {
+    name: "sync",
+  },
+  {
+    name: "add_box",
+  },
+  {
+    name: "block",
+  },
+  {
+    name: "restart_alt",
+  },
+  {
+    name: "menu_open",
+  },
+  {
+    name: "shopping_cart_checkout",
+  },
+  {
+    name: "expand_circle_down",
+  },
+  {
+    name: "backspace",
+  },
+  {
+    name: "undo",
+  },
+  {
+    name: "done_all",
+  },
+  {
+    name: "do_not_disturb_on",
+  },
+  {
+    name: "open_in_full",
+  },
+  {
+    name: "double_arrow",
+  },
+  {
+    name: "sync_alt",
+  },
+  {
+    name: "zoom_in",
+  },
+  {
+    name: "done_outline",
+  },
+  {
+    name: "drag_indicator",
+  },
+  {
+    name: "fullscreen",
+  },
+  {
+    name: "star_half",
+  },
+  {
+    name: "settings_accessibility",
+  },
+  {
+    name: "reply",
+  },
+  {
+    name: "exit_to_app",
+  },
+  {
+    name: "unfold_more",
+  },
+  {
+    name: "library_add",
+  },
+  {
+    name: "cached",
+  },
+  {
+    name: "select_check_box",
+  },
+  {
+    name: "terminal",
+  },
+  {
+    name: "change_circle",
+  },
+  {
+    name: "disabled_by_default",
+  },
+  {
+    name: "swap_horiz",
+  },
+  {
+    name: "swap_vert",
+  },
+  {
+    name: "app_registration",
+  },
+  {
+    name: "download_for_offline",
+  },
+  {
+    name: "close_fullscreen",
+  },
+  {
+    name: "file_open",
+  },
+  {
+    name: "minimize",
+  },
+  {
+    name: "open_with",
+  },
+  {
+    name: "dataset",
+  },
+  {
+    name: "add_task",
+  },
+  {
+    name: "start",
+  },
+  {
+    name: "keyboard_voice",
+  },
+  {
+    name: "create_new_folder",
+  },
+  {
+    name: "forward",
+  },
+  {
+    name: "settings_applications",
+  },
+  {
+    name: "compare_arrows",
+  },
+  {
+    name: "redo",
+  },
+  {
+    name: "zoom_out",
+  },
+  {
+    name: "publish",
+  },
+  {
+    name: "html",
+  },
+  {
+    name: "token",
+  },
+  {
+    name: "switch_access_shortcut",
+  },
+  {
+    name: "fullscreen_exit",
+  },
+  {
+    name: "sort_by_alpha",
+  },
+  {
+    name: "delete_sweep",
+  },
+  {
+    name: "indeterminate_check_box",
+  },
+  {
+    name: "view_timeline",
+  },
+  {
+    name: "settings_backup_restore",
+  },
+  {
+    name: "arrow_drop_down_circle",
+  },
+  {
+    name: "assistant_navigation",
+  },
+  {
+    name: "sync_problem",
+  },
+  {
+    name: "clear_all",
+  },
+  {
+    name: "density_medium",
+  },
+  {
+    name: "heart_plus",
+  },
+  {
+    name: "filter_alt_off",
+  },
+  {
+    name: "expand",
+  },
+  {
+    name: "subdirectory_arrow_right",
+  },
+  {
+    name: "download_done",
+  },
+  {
+    name: "arrow_outward",
+  },
+  {
+    name: "123",
+  },
+  {
+    name: "swipe_left",
+  },
+  {
+    name: "auto_mode",
+  },
+  {
+    name: "saved_search",
+  },
+  {
+    name: "place_item",
+  },
+  {
+    name: "system_update_alt",
+  },
+  {
+    name: "javascript",
+  },
+  {
+    name: "search_off",
+  },
+  {
+    name: "output",
+  },
+  {
+    name: "select_all",
+  },
+  {
+    name: "fit_screen",
+  },
+  {
+    name: "swipe_up",
+  },
+  {
+    name: "dynamic_form",
+  },
+  {
+    name: "hide_source",
+  },
+  {
+    name: "swipe_right",
+  },
+  {
+    name: "switch_access_shortcut_add",
+  },
+  {
+    name: "browse_gallery",
+  },
+  {
+    name: "css",
+  },
+  {
+    name: "density_small",
+  },
+  {
+    name: "assistant_direction",
+  },
+  {
+    name: "check_small",
+  },
+  {
+    name: "youtube_searched_for",
+  },
+  {
+    name: "move_up",
+  },
+  {
+    name: "swap_horizontal_circle",
+  },
+  {
+    name: "data_thresholding",
+  },
+  {
+    name: "install_mobile",
+  },
+  {
+    name: "move_down",
+  },
+  {
+    name: "dataset_linked",
+  },
+  {
+    name: "keyboard_command_key",
+  },
+  {
+    name: "view_kanban",
+  },
+  {
+    name: "swipe_down",
+  },
+  {
+    name: "key_off",
+  },
+  {
+    name: "transcribe",
+  },
+  {
+    name: "send_time_extension",
+  },
+  {
+    name: "swipe_down_alt",
+  },
+  {
+    name: "swipe_left_alt",
+  },
+  {
+    name: "swipe_right_alt",
+  },
+  {
+    name: "swipe_up_alt",
+  },
+  {
+    name: "keyboard_option_key",
+  },
+  {
+    name: "cycle",
+  },
+  {
+    name: "rebase",
+  },
+  {
+    name: "rebase_edit",
+  },
+  {
+    name: "empty_dashboard",
+  },
+  {
+    name: "magic_exchange",
+  },
+  {
+    name: "acute",
+  },
+  {
+    name: "point_scan",
+  },
+  {
+    name: "step_into",
+  },
+  {
+    name: "cheer",
+  },
+  {
+    name: "emoticon",
+  },
+  {
+    name: "explosion",
+  },
+  {
+    name: "water_bottle",
+  },
+  {
+    name: "weather_hail",
+  },
+  {
+    name: "syringe",
+  },
+  {
+    name: "pill",
+  },
+  {
+    name: "genetics",
+  },
+  {
+    name: "allergy",
+  },
+  {
+    name: "medical_mask",
+  },
+  {
+    name: "body_fat",
+  },
+  {
+    name: "barefoot",
+  },
+  {
+    name: "infrared",
+  },
+  {
+    name: "wrist",
+  },
+  {
+    name: "metabolism",
+  },
+  {
+    name: "conditions",
+  },
+  {
+    name: "taunt",
+  },
+  {
+    name: "altitude",
+  },
+  {
+    name: "tibia",
+  },
+  {
+    name: "footprint",
+  },
+  {
+    name: "eyeglasses",
+  },
+  {
+    name: "man_3",
+  },
+  {
+    name: "woman_2",
+  },
+  {
+    name: "rheumatology",
+  },
+  {
+    name: "tornado",
+  },
+  {
+    name: "landslide",
+  },
+  {
+    name: "foggy",
+  },
+  {
+    name: "severe_cold",
+  },
+  {
+    name: "tsunami",
+  },
+  {
+    name: "vape_free",
+  },
+  {
+    name: "sign_language",
+  },
+  {
+    name: "emoji_symbols",
+  },
+  {
+    name: "clear_night",
+  },
+  {
+    name: "emoji_food_beverage",
+  },
+  {
+    name: "hive",
+  },
+  {
+    name: "thunderstorm",
+  },
+  {
+    name: "communication",
+  },
+  {
+    name: "rocket",
+  },
+  {
+    name: "pets",
+  },
+  {
+    name: "public",
+  },
+  {
+    name: "quiz",
+  },
+  {
+    name: "mood",
+  },
+  {
+    name: "gavel",
+  },
+  {
+    name: "eco",
+  },
+  {
+    name: "diamond",
+  },
+  {
+    name: "forest",
+  },
+  {
+    name: "rainy",
+  },
+  {
+    name: "skull",
+  },
+];
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
new file mode 100644
index 0000000..5374739
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
@@ -0,0 +1,396 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ReactionOutline } from "@makeplane/propel/icons";
+import { stringToEmoji } from "../emoji-icon-picker";
+import type { EmojiReactionType } from "./emoji-reaction";
+import { EmojiReactionGroup } from "./emoji-reaction";
+import { EmojiReactionPicker } from "./emoji-reaction-picker";
+
+const meta = {
+  title: "Components/Emoji/EmojiReactionPicker",
+  component: EmojiReactionPicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof EmojiReactionPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Pick Emoji",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiReactionPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedEmoji}
+          closeOnSelect
+          label={
+            <span className="flex size-8 items-center justify-center rounded-md px-2 text-18">
+              {selectedEmoji ? stringToEmoji(selectedEmoji) : <ReactionOutline className="h-6 text-primary" />}
+            </span>
+          }
+        />
+        {selectedEmoji && (
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">Selected: {selectedEmoji}</div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const WithCustomLabel: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Add Reaction",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiReactionPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedEmoji}
+          closeOnSelect
+          label={
+            <button className="flex items-center gap-2 rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
+              {selectedEmoji ? stringToEmoji(selectedEmoji) : <ReactionOutline className="h-4 w-4" />}
+              <span className="text-13">Add Reaction</span>
+            </button>
+          }
+        />
+        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
+      </div>
+    );
+  },
+};
+
+export const InlineReactions: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Add",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [reactions, setReactions] = useState<EmojiReactionType[]>([
+      { emoji: "👍", count: 3, reacted: false, users: ["Alice", "Bob", "Charlie"] },
+      { emoji: "❤️", count: 2, reacted: true, users: ["You", "David"] },
+    ]);
+
+    const handleReactionAdd = (emoji: string) => {
+      setReactions((prev) => {
+        const existing = prev.find((r) => r.emoji === emoji);
+        if (existing) {
+          return prev.map((r) => (r.emoji === emoji ? { ...r, count: r.count + 1, reacted: true } : r));
+        }
+        return [...prev, { emoji, count: 1, reacted: true, users: ["You"] }];
+      });
+    };
+
+    const handleReactionClick = (emoji: string) => {
+      setReactions((prev) =>
+        prev.map((r) => {
+          if (r.emoji === emoji) {
+            return {
+              ...r,
+              reacted: !r.reacted,
+              count: r.reacted ? r.count - 1 : r.count + 1,
+            };
+          }
+          return r;
+        })
+      );
+    };
+
+    return (
+      <div className="p-4">
+        <EmojiReactionGroup
+          reactions={reactions}
+          onReactionClick={handleReactionClick}
+          onAddReaction={() => setIsOpen(true)}
+          showAddButton={false}
+        />
+        <EmojiReactionPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={handleReactionAdd}
+          closeOnSelect
+          label={
+            <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
+              <ReactionOutline className="h-3.5 w-3.5" />
+            </button>
+          }
+        />
+      </div>
+    );
+  },
+};
+
+export const DifferentPlacements: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Placements",
+  },
+  render() {
+    const [isOpen1, setIsOpen1] = useState(false);
+    const [isOpen2, setIsOpen2] = useState(false);
+    const [isOpen3, setIsOpen3] = useState(false);
+    const [isOpen4, setIsOpen4] = useState(false);
+
+    return (
+      <div className="space-y-8 p-8">
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom Start:</span>
+          <EmojiReactionPicker
+            isOpen={isOpen1}
+            handleToggle={setIsOpen1}
+            onChange={() => {}}
+            placement="bottom-start"
+            label={<ReactionOutline className="h-6 w-6" />}
+          />
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Bottom End:</span>
+          <EmojiReactionPicker
+            isOpen={isOpen2}
+            handleToggle={setIsOpen2}
+            onChange={() => {}}
+            placement="bottom-end"
+            label={<ReactionOutline className="h-6 w-6" />}
+          />
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top Start:</span>
+          <EmojiReactionPicker
+            isOpen={isOpen3}
+            handleToggle={setIsOpen3}
+            onChange={() => {}}
+            placement="top-start"
+            label={<ReactionOutline className="h-6 w-6" />}
+          />
+        </div>
+        <div className="flex items-center gap-4">
+          <span className="w-32 text-13">Top End:</span>
+          <EmojiReactionPicker
+            isOpen={isOpen4}
+            handleToggle={setIsOpen4}
+            onChange={() => {}}
+            placement="top-end"
+            label={<ReactionOutline className="h-6 w-6" />}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const SearchDisabled: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "No Search",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiReactionPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedEmoji}
+          closeOnSelect
+          searchDisabled
+          label={
+            <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
+              No Search
+            </button>
+          }
+        />
+        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
+      </div>
+    );
+  },
+};
+
+export const CustomSearchPlaceholder: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Custom Search",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
+
+    return (
+      <div className="space-y-4 p-4">
+        <EmojiReactionPicker
+          isOpen={isOpen}
+          handleToggle={setIsOpen}
+          onChange={setSelectedEmoji}
+          closeOnSelect
+          searchPlaceholder="Find your emoji..."
+          label={
+            <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
+              Custom Search
+            </button>
+          }
+        />
+        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
+      </div>
+    );
+  },
+};
+
+export const CloseOnSelectDisabled: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Select Multiple",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedEmojis, setSelectedEmojis] = useState<string[]>([]);
+
+    const handleChange = (emoji: string) => {
+      setSelectedEmojis((prev) => [...prev, emoji]);
+    };
+
+    return (
+      <div className="space-y-4 p-4">
+        <div className="flex items-center gap-2">
+          <EmojiReactionPicker
+            isOpen={isOpen}
+            handleToggle={setIsOpen}
+            onChange={handleChange}
+            closeOnSelect={false}
+            label={
+              <button className="rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
+                Select Multiple (Stays Open)
+              </button>
+            }
+          />
+          <button
+            className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2"
+            onClick={() => setSelectedEmojis([])}
+          >
+            Clear
+          </button>
+        </div>
+        {selectedEmojis.length > 0 && (
+          <div className="rounded-sm border border-subtle bg-layer-1 p-4 text-13">
+            <div className="mb-2 font-medium">Selected ({selectedEmojis.length}):</div>
+            <div className="flex flex-wrap gap-2">
+              {selectedEmojis.map((emoji, idx) => (
+                <span key={idx} className="text-18">
+                  {emoji}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const InMessageContext: Story = {
+  args: {
+    isOpen: false,
+    handleToggle: () => {},
+    onChange: () => {},
+    label: "Message",
+  },
+  render() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [reactions, setReactions] = useState<EmojiReactionType[]>([
+      { emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
+    ]);
+
+    const handleReactionAdd = (emoji: string) => {
+      setReactions((prev) => {
+        const existing = prev.find((r) => r.emoji === emoji);
+        if (existing) {
+          return prev.map((r) => (r.emoji === emoji ? { ...r, count: r.count + 1, reacted: true } : r));
+        }
+        return [...prev, { emoji, count: 1, reacted: true, users: ["You"] }];
+      });
+    };
+
+    const handleReactionClick = (emoji: string) => {
+      setReactions((prev) =>
+        prev.map((r) => {
+          if (r.emoji === emoji) {
+            return {
+              ...r,
+              reacted: !r.reacted,
+              count: r.reacted ? r.count - 1 : r.count + 1,
+            };
+          }
+          return r;
+        })
+      );
+    };
+
+    return (
+      <div className="max-w-md space-y-3 rounded-lg border border-subtle p-4">
+        <div className="flex items-start gap-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-accent-primary text-13 text-on-color">
+            AB
+          </div>
+          <div className="flex-1">
+            <div className="text-13 font-medium">Alice Brown</div>
+            <div className="mt-1 text-13 text-tertiary">
+              Just finished the design for the new dashboard! Would love to hear your thoughts.
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <EmojiReactionGroup reactions={reactions} onReactionClick={handleReactionClick} showAddButton={false} />
+          <EmojiReactionPicker
+            isOpen={isOpen}
+            handleToggle={setIsOpen}
+            onChange={handleReactionAdd}
+            closeOnSelect
+            label={
+              <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
+                <ReactionOutline className="h-3.5 w-3.5" />
+              </button>
+            }
+          />
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
new file mode 100644
index 0000000..4e3b326
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { EmojiRoot } from "../emoji-icon-picker/emoji/emoji";
+import { emojiToString } from "../emoji-icon-picker/helper";
+import { Popover } from "../popover";
+import { cn } from "../utils/classname";
+import { convertPlacementToSideAndAlign } from "../utils/placement";
+import type { TPlacement, TSide, TAlign } from "../utils/placement";
+
+export interface EmojiReactionPickerProps {
+  isOpen: boolean;
+  handleToggle: (value: boolean) => void;
+  buttonClassName?: string;
+  closeOnSelect?: boolean;
+  disabled?: boolean;
+  dropdownClassName?: string;
+  label: React.ReactNode;
+  onChange: (emoji: string) => void;
+  placement?: TPlacement;
+  searchDisabled?: boolean;
+  searchPlaceholder?: string;
+  side?: TSide;
+  align?: TAlign;
+}
+
+export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
+  const {
+    isOpen,
+    handleToggle,
+    buttonClassName,
+    closeOnSelect = true,
+    disabled = false,
+    dropdownClassName,
+    label,
+    onChange,
+    placement = "bottom-start",
+    searchDisabled = false,
+    searchPlaceholder = "Search",
+    side = "bottom",
+    align = "start",
+  } = props;
+
+  // side and align calculations
+  const { finalSide, finalAlign } = useMemo(() => {
+    if (placement) {
+      const converted = convertPlacementToSideAndAlign(placement);
+      return { finalSide: converted.side, finalAlign: converted.align };
+    }
+    return { finalSide: side, finalAlign: align };
+  }, [placement, side, align]);
+
+  const handleEmojiChange = useCallback(
+    (value: string) => {
+      const emoji = emojiToString(value);
+      onChange(emoji);
+      if (closeOnSelect) handleToggle(false);
+    },
+    [onChange, closeOnSelect, handleToggle]
+  );
+
+  return (
+    <Popover open={isOpen} onOpenChange={handleToggle}>
+      <Popover.Button className={cn("outline-none", buttonClassName)} disabled={disabled}>
+        {label}
+      </Popover.Button>
+      <Popover.Panel
+        positionerClassName="z-50"
+        className={cn("w-80 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1", dropdownClassName)}
+        side={finalSide}
+        align={finalAlign}
+        sideOffset={8}
+        data-prevent-outside-click="true"
+      >
+        <div className="h-80 overflow-hidden overflow-y-auto">
+          <EmojiRoot
+            onChange={handleEmojiChange}
+            searchPlaceholder={searchPlaceholder}
+            searchDisabled={searchDisabled}
+          />
+        </div>
+      </Popover.Panel>
+    </Popover>
+  );
+}
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
new file mode 100644
index 0000000..ebfb2a6
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { EmojiReactionType } from "./emoji-reaction";
+import { EmojiReaction, EmojiReactionGroup, EmojiReactionButton } from "./emoji-reaction";
+
+const meta = {
+  title: "Components/Emoji/EmojiReaction",
+  component: EmojiReaction,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof EmojiReaction>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Single: Story = {
+  args: {
+    emoji: "👍",
+    count: 5,
+    reacted: false,
+    users: ["Alice", "Bob", "Charlie"],
+  },
+};
+
+export const Reacted: Story = {
+  args: {
+    emoji: "❤️",
+    count: 12,
+    reacted: true,
+    users: ["Alice", "Bob", "Charlie", "David", "Emma", "Frank"],
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    emoji: "👍",
+    count: 0,
+  },
+  render() {
+    const [reacted, setReacted] = useState(false);
+    const [count, setCount] = useState(5);
+
+    const handleClick = () => {
+      setReacted(!reacted);
+      setCount(reacted ? count - 1 : count + 1);
+    };
+
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <EmojiReaction
+          emoji="👍"
+          count={count}
+          reacted={reacted}
+          users={["Alice", "Bob", "Charlie"]}
+          onReactionClick={handleClick}
+        />
+        <p className="text-13 text-placeholder">Click to toggle reaction</p>
+      </div>
+    );
+  },
+};
+
+export const WithTooltip: Story = {
+  args: {
+    emoji: "🎉",
+    count: 8,
+    reacted: false,
+    users: ["Alice", "Bob", "Charlie", "David", "Emma", "Frank", "Grace", "Henry"],
+  },
+};
+
+export const WithoutCount: Story = {
+  args: {
+    emoji: "🔥",
+    count: 0,
+    reacted: false,
+    showCount: false,
+  },
+};
+
+export const MultipleReactions: Story = {
+  args: {
+    emoji: "👍",
+    count: 0,
+  },
+  render() {
+    const [reactions, setReactions] = useState<EmojiReactionType[]>([
+      { emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
+      { emoji: "❤️", count: 12, reacted: true, users: ["David", "Emma", "Frank"] },
+      { emoji: "🎉", count: 3, reacted: false, users: ["Grace"] },
+    ]);
+
+    const handleReactionClick = (emoji: string) => {
+      setReactions((prev) =>
+        prev.map((r) => {
+          if (r.emoji === emoji) {
+            return {
+              ...r,
+              reacted: !r.reacted,
+              count: r.reacted ? r.count - 1 : r.count + 1,
+            };
+          }
+          return r;
+        })
+      );
+    };
+
+    return (
+      <div className="flex gap-2">
+        {reactions.map((reaction) => (
+          <EmojiReaction
+            key={reaction.emoji}
+            emoji={reaction.emoji}
+            count={reaction.count}
+            reacted={reaction.reacted}
+            users={reaction.users}
+            onReactionClick={handleReactionClick}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+export const AddButton: Story = {
+  args: {
+    emoji: "➕",
+    count: 0,
+  },
+  render() {
+    const handleAdd = () => {
+      alert("Add reaction clicked");
+    };
+
+    return <EmojiReactionButton onAddReaction={handleAdd} />;
+  },
+};
+
+export const ReactionGroup: Story = {
+  args: {
+    emoji: "👍",
+    count: 0,
+  },
+  render() {
+    const [reactions, setReactions] = useState<EmojiReactionType[]>([
+      { emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
+      { emoji: "❤️", count: 12, reacted: true, users: ["David", "Emma", "Frank"] },
+      { emoji: "🎉", count: 3, reacted: false, users: ["Grace"] },
+      { emoji: "🔥", count: 8, reacted: false, users: ["Henry", "Ivy"] },
+    ]);
+
+    const handleReactionClick = (emoji: string) => {
+      setReactions((prev) =>
+        prev.map((r) => {
+          if (r.emoji === emoji) {
+            return {
+              ...r,
+              reacted: !r.reacted,
+              count: r.reacted ? r.count - 1 : r.count + 1,
+            };
+          }
+          return r;
+        })
+      );
+    };
+
+    const handleAddReaction = () => {
+      alert("Add reaction clicked");
+    };
+
+    return (
+      <EmojiReactionGroup
+        reactions={reactions}
+        onReactionClick={handleReactionClick}
+        onAddReaction={handleAddReaction}
+      />
+    );
+  },
+};
+
+export const InMessageContext: Story = {
+  args: {
+    emoji: "👍",
+    count: 0,
+  },
+  render() {
+    const [reactions, setReactions] = useState<EmojiReactionType[]>([
+      { emoji: "👍", count: 5, reacted: false, users: ["Alice", "Bob", "Charlie"] },
+      { emoji: "❤️", count: 2, reacted: true, users: ["You", "David"] },
+    ]);
+
+    const handleReactionClick = (emoji: string) => {
+      setReactions((prev) =>
+        prev.map((r) => {
+          if (r.emoji === emoji) {
+            return {
+              ...r,
+              reacted: !r.reacted,
+              count: r.reacted ? r.count - 1 : r.count + 1,
+            };
+          }
+          return r;
+        })
+      );
+    };
+
+    return (
+      <div className="max-w-md space-y-3 rounded-lg border border-subtle p-4">
+        <div className="flex items-start gap-3">
+          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-accent-primary text-13 text-on-color">
+            AB
+          </div>
+          <div className="flex-1">
+            <div className="text-13 font-medium">Alice Brown</div>
+            <div className="mt-1 text-13 text-tertiary">
+              Hey everyone! Just wanted to share some exciting news about our project launch next week!
+            </div>
+          </div>
+        </div>
+        <EmojiReactionGroup reactions={reactions} onReactionClick={handleReactionClick} />
+      </div>
+    );
+  },
+};
+
+export const ManyUsers: Story = {
+  args: {
+    emoji: "🎉",
+    count: 47,
+    reacted: true,
+    users: ["Alice", "Bob", "Charlie", "David", "Emma", "Frank", "Grace", "Henry", "Ivy", "Jack", "Kate", "Liam"],
+  },
+};
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
new file mode 100644
index 0000000..c589828
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { AnimatedCounter } from "../animated-counter";
+import { stringToEmoji } from "../emoji-icon-picker";
+import { ReactionOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "../tooltip";
+import { cn } from "../utils";
+import { IconButton } from "../icon-button";
+
+export interface EmojiReactionType {
+  emoji: string;
+  count: number;
+  reacted?: boolean;
+  users?: string[];
+}
+
+export interface EmojiReactionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  emoji: string;
+  count: number;
+  reacted?: boolean;
+  users?: string[];
+  onReactionClick?: (emoji: string) => void;
+  className?: string;
+  showCount?: boolean;
+}
+
+export interface EmojiReactionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  reactions: EmojiReactionType[];
+  onReactionClick?: (emoji: string) => void;
+  onAddReaction?: () => void;
+  className?: string;
+  showAddButton?: boolean;
+  maxDisplayUsers?: number;
+}
+
+export interface EmojiReactionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  onAddReaction?: () => void;
+  className?: string;
+}
+
+const EmojiReaction = React.forwardRef(function EmojiReaction(
+  {
+    emoji,
+    count,
+    reacted = false,
+    users = [],
+    onReactionClick,
+    className,
+    showCount = true,
+    ...props
+  }: EmojiReactionProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const handleClick = () => {
+    onReactionClick?.(emoji);
+  };
+
+  const tooltipContent = React.useMemo(() => {
+    if (!users.length) return null;
+
+    const displayUsers = users.slice(0, 5);
+    const remainingCount = users.length - displayUsers.length;
+
+    return (
+      <div className="text-11">
+        <div className="mb-1 font-medium">{stringToEmoji(emoji)}</div>
+        <div>
+          {displayUsers.join(", ")}
+          {remainingCount > 0 && ` and ${remainingCount} more`}
+        </div>
+      </div>
+    );
+  }, [emoji, users]);
+
+  const button = (
+    <button
+      ref={ref}
+      onClick={handleClick}
+      className={cn(
+        "inline-flex items-center gap-0.5 rounded-full border px-1.5 text-11 transition-all duration-200",
+        reacted
+          ? "border-accent-strong bg-accent-primary/10 text-accent-primary"
+          : "border-subtle bg-surface-1 text-tertiary hover:border-strong hover:bg-surface-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="leading-unset text-14">{emoji}</span>
+      {showCount && count > 0 && <AnimatedCounter count={count} size="sm" className="text-11 leading-normal" />}
+    </button>
+  );
+
+  if (tooltipContent && users.length > 0) {
+    return <Tooltip tooltipContent={tooltipContent}>{button}</Tooltip>;
+  }
+
+  return button;
+});
+
+const EmojiReactionButton = React.forwardRef(function EmojiReactionButton(
+  { onAddReaction, className, ...props }: EmojiReactionButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  return (
+    <Tooltip tooltipContent="Add reaction">
+      <IconButton
+        ref={ref}
+        icon={ReactionOutline}
+        variant="ghost"
+        size="sm"
+        onClick={onAddReaction}
+        className={className}
+        {...props}
+      />
+    </Tooltip>
+  );
+});
+
+const EmojiReactionGroup = React.forwardRef(function EmojiReactionGroup(
+  {
+    reactions,
+    onReactionClick,
+    onAddReaction,
+    className,
+    showAddButton = true,
+    maxDisplayUsers = 5,
+    ...props
+  }: EmojiReactionGroupProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div ref={ref} className={cn("flex flex-wrap items-center gap-2", className)} {...props}>
+      {reactions.map((reaction, index) => (
+        <EmojiReaction
+          key={`${reaction.emoji}-${index}`}
+          emoji={reaction.emoji}
+          count={reaction.count}
+          reacted={reaction.reacted}
+          users={reaction.users?.slice(0, maxDisplayUsers)}
+          onReactionClick={onReactionClick}
+        />
+      ))}
+      {showAddButton && <EmojiReactionButton onAddReaction={onAddReaction} />}
+    </div>
+  );
+});
+
+EmojiReaction.displayName = "EmojiReaction";
+EmojiReactionButton.displayName = "EmojiReactionButton";
+EmojiReactionGroup.displayName = "EmojiReactionGroup";
+
+export { EmojiReaction, EmojiReactionButton, EmojiReactionGroup };
diff --git a/packages/propel/src/emoji-reaction/index.ts b/packages/propel/src/emoji-reaction/index.ts
new file mode 100644
index 0000000..574cdf8
--- /dev/null
+++ b/packages/propel/src/emoji-reaction/index.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { EmojiReaction, EmojiReactionGroup, EmojiReactionButton } from "./emoji-reaction";
+export type {
+  EmojiReactionProps,
+  EmojiReactionGroupProps,
+  EmojiReactionButtonProps,
+  EmojiReactionType,
+} from "./emoji-reaction";
+
+export { EmojiReactionPicker } from "./emoji-reaction-picker";
+export type { EmojiReactionPickerProps } from "./emoji-reaction-picker";
diff --git a/packages/propel/src/empty-state/assets-showcase.stories.tsx b/packages/propel/src/empty-state/assets-showcase.stories.tsx
new file mode 100644
index 0000000..ca4d7c1
--- /dev/null
+++ b/packages/propel/src/empty-state/assets-showcase.stories.tsx
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HorizontalStackAssetsMap } from "./assets/horizontal-stack/constant";
+import { IllustrationMap } from "./assets/illustration/constant";
+import { VerticalStackAssetsMap } from "./assets/vertical-stack/constant";
+
+// Meta for asset showcase
+const meta: Meta = {
+  title: "Components/EmptyState/Assets Showcase",
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: "Visual catalog of all available empty state assets organized by type.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const HorizontalStackAssets: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Horizontal stack assets designed for compact empty states. These are optimized for smaller, inline empty state scenarios.",
+      },
+    },
+  },
+  render: () => (
+    <div className="p-8">
+      <div className="mb-6">
+        <h2 className="text-18 font-semibold text-primary">Horizontal Stack Assets</h2>
+        <p className="text-13 text-tertiary">Used primarily in EmptyStateCompact component</p>
+      </div>
+      <div className="grid w-full grid-cols-12 gap-6">
+        {HorizontalStackAssetsMap.map((item) => (
+          <div
+            key={item.title}
+            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-subtle bg-surface-1 p-6 sm:col-span-4 lg:col-span-3"
+          >
+            <div className="flex h-24 w-24 items-center justify-center">{item.asset}</div>
+            <p className="text-center text-11 font-medium text-secondary">{item.title}</p>
+            <code className="rounded-sm bg-layer-1 px-2 py-1 text-11 text-tertiary">
+              {item.title.toLowerCase().replace(/\s+/g, "-")}
+            </code>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const VerticalStackAssets: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Vertical stack assets designed for detailed empty states. These are larger and more prominent, suitable for feature-specific empty states.",
+      },
+    },
+  },
+  render: () => (
+    <div className="p-8">
+      <div className="mb-6">
+        <h2 className="text-18 font-semibold text-primary">Vertical Stack Assets</h2>
+        <p className="text-13 text-tertiary">Used primarily in EmptyStateDetailed component</p>
+      </div>
+      <div className="grid w-full grid-cols-12 gap-6">
+        {VerticalStackAssetsMap.map((item) => (
+          <div
+            key={item.title}
+            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-subtle bg-surface-1 p-6 sm:col-span-4 lg:col-span-3"
+          >
+            <div className="flex h-32 w-32 items-center justify-center">{item.asset}</div>
+            <p className="text-center text-11 font-medium text-secondary">
+              {item.title.replace(/VerticalStackIllustration$/, "")}
+            </p>
+            <code className="rounded-sm bg-layer-1 px-2 py-1 text-11 text-tertiary">
+              {item.title
+                .replace(/VerticalStackIllustration$/, "")
+                .replace(/([A-Z])/g, "-$1")
+                .toLowerCase()
+                .slice(1)}
+            </code>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const IllustrationAssets: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Illustration assets available for both compact and detailed empty states.",
+      },
+    },
+  },
+  render: () => (
+    <div className="p-8">
+      <div className="mb-6">
+        <h2 className="text-18 font-semibold text-primary">Illustration Assets</h2>
+        <p className="text-13 text-tertiary">Available in both EmptyStateCompact and EmptyStateDetailed</p>
+      </div>
+      <div className="grid w-full grid-cols-12 gap-6">
+        {IllustrationMap.map((item) => (
+          <div
+            key={item.title}
+            className="col-span-6 flex flex-col items-center justify-center gap-3 rounded-lg border border-subtle bg-surface-1 p-6 sm:col-span-4 lg:col-span-3"
+          >
+            <div className="flex h-24 w-24 items-center justify-center">{item.asset}</div>
+            <p className="text-center text-11 font-medium text-secondary">{item.title}</p>
+            <code className="rounded-sm bg-layer-1 px-2 py-1 text-11 text-tertiary">{item.title.toLowerCase()}</code>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+};
+
+export const AllAssets: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: "Complete catalog of all available empty state assets.",
+      },
+    },
+  },
+  render: () => (
+    <div className="space-y-12 p-8">
+      {/* Horizontal Stack */}
+      <div>
+        <div className="mb-6">
+          <h2 className="text-18 font-semibold text-primary">Horizontal Stack Assets</h2>
+          <p className="text-13 text-tertiary">For EmptyStateCompact - {HorizontalStackAssetsMap.length} assets</p>
+        </div>
+        <div className="grid w-full grid-cols-12 gap-4">
+          {HorizontalStackAssetsMap.map((item) => (
+            <div
+              key={item.title}
+              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded-sm border border-subtle bg-surface-1 p-4 sm:col-span-3 lg:col-span-2"
+            >
+              <div className="flex h-16 w-16 items-center justify-center">{item.asset}</div>
+              <code className="text-10 text-placeholder">{item.title.toLowerCase().replace(/\s+/g, "-")}</code>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Vertical Stack */}
+      <div>
+        <div className="mb-6">
+          <h2 className="text-18 font-semibold text-primary">Vertical Stack Assets</h2>
+          <p className="text-13 text-tertiary">For EmptyStateDetailed - {VerticalStackAssetsMap.length} assets</p>
+        </div>
+        <div className="grid w-full grid-cols-12 gap-4">
+          {VerticalStackAssetsMap.map((item) => (
+            <div
+              key={item.title}
+              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded-sm border border-subtle bg-surface-1 p-4 sm:col-span-3 lg:col-span-2"
+            >
+              <div className="flex h-20 w-20 items-center justify-center">{item.asset}</div>
+              <code className="text-center text-10 text-placeholder">
+                {item.title
+                  .replace(/VerticalStackIllustration$/, "")
+                  .replace(/([A-Z])/g, "-$1")
+                  .toLowerCase()
+                  .slice(1)}
+              </code>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Illustrations */}
+      <div>
+        <div className="mb-6">
+          <h2 className="text-18 font-semibold text-primary">Illustration Assets</h2>
+          <p className="text-13 text-tertiary">For both components - {IllustrationMap.length} assets</p>
+        </div>
+        <div className="grid w-full grid-cols-12 gap-4">
+          {IllustrationMap.map((item) => (
+            <div
+              key={item.title}
+              className="col-span-6 flex flex-col items-center justify-center gap-2 rounded-sm border border-subtle bg-surface-1 p-4 sm:col-span-3 lg:col-span-2"
+            >
+              <div className="flex h-16 w-16 items-center justify-center">{item.asset}</div>
+              <code className="text-10 text-placeholder">{item.title.toLowerCase()}</code>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/empty-state/assets/asset-registry.tsx b/packages/propel/src/empty-state/assets/asset-registry.tsx
new file mode 100644
index 0000000..f9af6d7
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/asset-registry.tsx
@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type {
+  CompactAssetType,
+  DetailedAssetType,
+  HorizontalStackAssetType,
+  IllustrationAssetType,
+  VerticalStackAssetType,
+} from "./asset-types";
+import {
+  CustomerHorizontalStackIllustration,
+  EpicHorizontalStackIllustration,
+  EstimateHorizontalStackIllustration,
+  ExportHorizontalStackIllustration,
+  IntakeHorizontalStackIllustration,
+  LabelHorizontalStackIllustration,
+  LinkHorizontalStackIllustration,
+  MembersHorizontalStackIllustration,
+  NoteHorizontalStackIllustration,
+  PriorityHorizontalStackIllustration,
+  ProjectHorizontalStackIllustration,
+  SettingsHorizontalStackIllustration,
+  StateHorizontalStackIllustration,
+  TemplateHorizontalStackIllustration,
+  TokenHorizontalStackIllustration,
+  UnknownHorizontalStackIllustration,
+  UpdateHorizontalStackIllustration,
+  WebhookHorizontalStackIllustration,
+  WorkItemHorizontalStackIllustration,
+  WorklogHorizontalStackIllustration,
+} from "./horizontal-stack";
+import { InboxIllustration, SearchIllustration } from "./illustration";
+import {
+  ArchivedCycleVerticalStackIllustration,
+  ArchivedModuleVerticalStackIllustration,
+  ArchivedWorkItemVerticalStackIllustration,
+  ChangelogVerticalStackIllustration,
+  CustomerVerticalStackIllustration,
+  CycleVerticalStackIllustration,
+  DashboardVerticalStackIllustration,
+  DraftVerticalStackIllustration,
+  EpicVerticalStackIllustration,
+  Error404VerticalStackIllustration,
+  InitiativeVerticalStackIllustration,
+  InvalidLinkVerticalStackIllustration,
+  ModuleVerticalStackIllustration,
+  NoAccessVerticalStackIllustration,
+  PageVerticalStackIllustration,
+  ProjectVerticalStackIllustration,
+  ServerErrorVerticalStackIllustration,
+  TeamspaceVerticalStackIllustration,
+  ViewVerticalStackIllustration,
+  WorkItemVerticalStackIllustration,
+} from "./vertical-stack";
+
+// Horizontal Stack Asset Registry
+export const HORIZONTAL_STACK_ASSETS: Record<HorizontalStackAssetType, React.ComponentType<{ className?: string }>> = {
+  customer: CustomerHorizontalStackIllustration,
+  epic: EpicHorizontalStackIllustration,
+  estimate: EstimateHorizontalStackIllustration,
+  export: ExportHorizontalStackIllustration,
+  intake: IntakeHorizontalStackIllustration,
+  label: LabelHorizontalStackIllustration,
+  link: LinkHorizontalStackIllustration,
+  members: MembersHorizontalStackIllustration,
+  note: NoteHorizontalStackIllustration,
+  priority: PriorityHorizontalStackIllustration,
+  project: ProjectHorizontalStackIllustration,
+  settings: SettingsHorizontalStackIllustration,
+  state: StateHorizontalStackIllustration,
+  template: TemplateHorizontalStackIllustration,
+  token: TokenHorizontalStackIllustration,
+  unknown: UnknownHorizontalStackIllustration,
+  update: UpdateHorizontalStackIllustration,
+  webhook: WebhookHorizontalStackIllustration,
+  "work-item": WorkItemHorizontalStackIllustration,
+  worklog: WorklogHorizontalStackIllustration,
+};
+
+// Vertical Stack Asset Registry
+export const VERTICAL_STACK_ASSETS: Record<VerticalStackAssetType, React.ComponentType<{ className?: string }>> = {
+  "archived-cycle": ArchivedCycleVerticalStackIllustration,
+  "archived-module": ArchivedModuleVerticalStackIllustration,
+  "archived-work-item": ArchivedWorkItemVerticalStackIllustration,
+  changelog: ChangelogVerticalStackIllustration,
+  customer: CustomerVerticalStackIllustration,
+  cycle: CycleVerticalStackIllustration,
+  dashboard: DashboardVerticalStackIllustration,
+  draft: DraftVerticalStackIllustration,
+  epic: EpicVerticalStackIllustration,
+  "error-404": Error404VerticalStackIllustration,
+  initiative: InitiativeVerticalStackIllustration,
+  "invalid-link": InvalidLinkVerticalStackIllustration,
+  module: ModuleVerticalStackIllustration,
+  "no-access": NoAccessVerticalStackIllustration,
+  page: PageVerticalStackIllustration,
+  project: ProjectVerticalStackIllustration,
+  "server-error": ServerErrorVerticalStackIllustration,
+  teamspace: TeamspaceVerticalStackIllustration,
+  view: ViewVerticalStackIllustration,
+  "work-item": WorkItemVerticalStackIllustration,
+};
+
+// Illustration Asset Registry
+export const ILLUSTRATION_ASSETS: Record<IllustrationAssetType, React.ComponentType<{ className?: string }>> = {
+  inbox: InboxIllustration,
+  search: SearchIllustration,
+};
+
+// Helper functions to get assets
+export const getCompactAsset = (assetKey: CompactAssetType, className?: string): React.ReactNode => {
+  const AssetComponent =
+    (HORIZONTAL_STACK_ASSETS[assetKey as HorizontalStackAssetType] as React.ComponentType<{ className?: string }>) ||
+    ILLUSTRATION_ASSETS[assetKey as IllustrationAssetType];
+
+  if (!AssetComponent) {
+    console.warn(`Asset "${assetKey}" not found in compact asset registry`);
+    return null;
+  }
+
+  return <AssetComponent className={className} />;
+};
+
+export const getDetailedAsset = (assetKey: DetailedAssetType, className?: string): React.ReactNode => {
+  const AssetComponent =
+    (VERTICAL_STACK_ASSETS[assetKey as VerticalStackAssetType] as React.ComponentType<{ className?: string }>) ||
+    ILLUSTRATION_ASSETS[assetKey as IllustrationAssetType];
+
+  if (!AssetComponent) {
+    console.warn(`Asset "${assetKey}" not found in detailed asset registry`);
+    return null;
+  }
+
+  return <AssetComponent className={className} />;
+};
diff --git a/packages/propel/src/empty-state/assets/asset-types.ts b/packages/propel/src/empty-state/assets/asset-types.ts
new file mode 100644
index 0000000..d86f579
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/asset-types.ts
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Horizontal Stack Asset Types
+export type HorizontalStackAssetType =
+  | "customer"
+  | "epic"
+  | "estimate"
+  | "export"
+  | "intake"
+  | "label"
+  | "link"
+  | "members"
+  | "note"
+  | "priority"
+  | "project"
+  | "settings"
+  | "state"
+  | "template"
+  | "token"
+  | "unknown"
+  | "update"
+  | "webhook"
+  | "work-item"
+  | "worklog";
+
+// Vertical Stack Asset Types
+export type VerticalStackAssetType =
+  | "archived-cycle"
+  | "archived-module"
+  | "archived-work-item"
+  | "changelog"
+  | "customer"
+  | "cycle"
+  | "dashboard"
+  | "draft"
+  | "epic"
+  | "error-404"
+  | "initiative"
+  | "invalid-link"
+  | "module"
+  | "no-access"
+  | "page"
+  | "project"
+  | "server-error"
+  | "teamspace"
+  | "view"
+  | "work-item";
+
+// Illustration Asset Types
+export type IllustrationAssetType = "inbox" | "search";
+
+// Combined Asset Types for Compact (uses horizontal + illustration)
+export type CompactAssetType = HorizontalStackAssetType | IllustrationAssetType;
+
+// Combined Asset Types for Detailed (uses vertical + illustration)
+export type DetailedAssetType = VerticalStackAssetType | IllustrationAssetType;
diff --git a/packages/propel/src/empty-state/assets/helper.tsx b/packages/propel/src/empty-state/assets/helper.tsx
new file mode 100644
index 0000000..4085006
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/helper.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const ILLUSTRATION_COLOR_TOKEN_MAP = {
+  fill: {
+    primary: "var(--illustration-fill-primary)", // #FFFFFF
+    secondary: "var(--illustration-fill-secondary)", // #F4F5F5
+    tertiary: "var(--illustration-fill-tertiary)", // #eaebeb
+    quaternary: "var(--illustration-fill-quaternary)", // #CFD2D3
+  },
+  stroke: {
+    primary: "var(--illustration-stroke-primary)", //#CFD2D3
+    secondary: "var(--illustration-stroke-secondary)", // #8A9093
+    tertiary: "var(--illustration-stroke-tertiary)", // #1d1f20
+  },
+};
+
+export type TIllustrationAssetProps = {
+  className?: string;
+};
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx
new file mode 100644
index 0000000..fa16d77
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/constant.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  CustomerHorizontalStackIllustration,
+  EpicHorizontalStackIllustration,
+  EstimateHorizontalStackIllustration,
+  ExportHorizontalStackIllustration,
+  IntakeHorizontalStackIllustration,
+  LabelHorizontalStackIllustration,
+  LinkHorizontalStackIllustration,
+  MembersHorizontalStackIllustration,
+  NoteHorizontalStackIllustration,
+  PriorityHorizontalStackIllustration,
+  ProjectHorizontalStackIllustration,
+  SettingsHorizontalStackIllustration,
+  StateHorizontalStackIllustration,
+  TemplateHorizontalStackIllustration,
+  TokenHorizontalStackIllustration,
+  UnknownHorizontalStackIllustration,
+  UpdateHorizontalStackIllustration,
+  WebhookHorizontalStackIllustration,
+  WorkItemHorizontalStackIllustration,
+  WorklogHorizontalStackIllustration,
+} from "./";
+
+export const HorizontalStackAssetsMap = [
+  {
+    asset: <CustomerHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Customer",
+  },
+  {
+    asset: <EpicHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Epic",
+  },
+  {
+    asset: <EstimateHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Estimate",
+  },
+  {
+    asset: <ExportHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Export",
+  },
+  {
+    asset: <IntakeHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Intake",
+  },
+  {
+    asset: <LabelHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Label",
+  },
+  {
+    asset: <LinkHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Link",
+  },
+  {
+    asset: <MembersHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Members",
+  },
+  {
+    asset: <NoteHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Note",
+  },
+  {
+    asset: <PriorityHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Priority",
+  },
+  {
+    asset: <ProjectHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Project",
+  },
+  {
+    asset: <SettingsHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Settings",
+  },
+  {
+    asset: <StateHorizontalStackIllustration className="h-20 w-20" />,
+    title: "State",
+  },
+  {
+    asset: <TemplateHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Template",
+  },
+  {
+    asset: <TokenHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Token",
+  },
+  {
+    asset: <UnknownHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Unknown",
+  },
+  {
+    asset: <UpdateHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Update",
+  },
+  {
+    asset: <WebhookHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Webhook",
+  },
+  {
+    asset: <WorkItemHorizontalStackIllustration className="h-20 w-20" />,
+    title: "WorkItem",
+  },
+  {
+    asset: <WorklogHorizontalStackIllustration className="h-20 w-20" />,
+    title: "Worklog",
+  },
+];
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
new file mode 100644
index 0000000..94e0015
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function CustomerHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="91"
+      viewBox="0 0 81 91"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M47.6282 2.35629C46.7128 1.89072 45.537 1.93039 44.2587 2.57746L9.017 20.5374C6.12097 22.0131 3.7695 26.0693 3.7695 29.5887V72.4766C3.7695 74.4415 4.49547 75.8226 5.63968 76.4145L2.12019 74.6232C0.975977 74.0392 0.25 72.6502 0.25 70.6853V27.7974C0.25 24.2701 2.60157 20.2218 5.4976 18.7462L40.7393 0.786161C42.0255 0.131199 43.2013 0.0994185 44.1088 0.564994L47.6282 2.35629Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M47.628 2.35601C48.7722 2.93995 49.4982 4.32897 49.4982 6.29386V49.1818C49.4982 52.7091 47.1466 56.7574 44.2506 58.233L9.00889 76.1934C7.72264 76.8484 6.54695 76.8798 5.63947 76.4142C4.49526 75.8303 3.76929 74.4412 3.76929 72.4763V29.5884C3.76929 26.0611 6.12076 22.0128 9.01679 20.5372L44.2585 2.57718C45.5447 1.92221 46.7205 1.89043 47.628 2.35601Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M63.0078 9.15121C62.0925 8.68564 60.9167 8.72531 59.6383 9.37238L24.3966 27.3324C21.5006 28.808 19.1491 32.8642 19.1491 36.3836V79.2719C19.1491 81.2368 19.8751 82.6176 21.0193 83.2094L17.4998 81.4181C16.3556 80.8342 15.6296 79.4455 15.6296 77.4806V34.5924C15.6296 31.065 17.9812 27.0167 20.8772 25.5411L56.1189 7.58108C57.4052 6.92612 58.5809 6.89434 59.4884 7.35992L63.0078 9.15121Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M63.0084 9.14898C64.1526 9.73292 64.8785 11.1219 64.8785 13.0868V55.9751C64.8785 59.5024 62.527 63.5504 59.6309 65.026L24.3894 82.9864C23.1031 83.6413 21.9273 83.6727 21.0198 83.2072C19.8756 82.6232 19.1497 81.2346 19.1497 79.2697V36.3814C19.1497 32.8541 21.5011 28.8058 24.3972 27.3301L59.6388 9.37015C60.9251 8.71518 62.1009 8.6834 63.0084 9.14898Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M78.3799 15.9463C77.4645 15.4807 76.2887 15.52 75.0104 16.1671L39.7688 34.1275C36.8728 35.6031 34.5212 39.6589 34.5212 43.1783V86.0666C34.5212 88.0315 35.2472 89.4126 36.3914 90.0045L32.872 88.2132C31.7278 87.6292 31.0017 86.2402 31.0017 84.2753V41.387C31.0017 37.8597 33.3533 33.8118 36.2493 32.3362L71.491 14.3758C72.7772 13.7208 73.953 13.6894 74.8605 14.155L78.3799 15.9463Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.3799 15.9441C79.5241 16.528 80.2501 17.9166 80.2501 19.8815V62.7698C80.2501 66.2971 77.8986 70.3454 75.0025 71.8211L39.7609 89.7811C38.4747 90.436 37.2989 90.4678 36.3914 90.0022C35.2472 89.4183 34.5212 88.0293 34.5212 86.0644V43.1761C34.5212 39.6488 36.8728 35.6009 39.7688 34.1252L75.0104 16.1648C76.2967 15.5099 77.4725 15.4785 78.3799 15.9441Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M46.3733 45.3247C46.3733 44.6855 46.7994 43.9515 47.3202 43.6832L62.5185 35.942C63.0393 35.6737 63.4654 35.9737 63.4654 36.6128C63.4654 37.252 63.0393 37.9859 62.5185 38.2542V42.8783L70.1176 39.0037C70.6384 38.7354 71.0645 39.0353 71.0645 39.6745C71.0645 40.3137 70.6384 41.0476 70.1176 41.3159V59.8126L71.0645 59.3314C71.5853 59.0631 72.0115 59.363 72.0115 60.0022C72.0115 60.6414 71.5853 61.3749 71.0645 61.6432L46.3654 74.2297C45.8446 74.498 45.4185 74.1981 45.4185 73.5589C45.4185 72.9197 45.8446 72.1858 46.3654 71.9175L47.3123 71.4362V46.0032C46.7915 46.2715 46.3654 45.9715 46.3654 45.3324L46.3733 45.3247ZM49.222 45.0249V70.4579L51.1237 69.4873V65.4389C51.1237 63.8449 52.189 62.0065 53.4989 61.3358L56.3477 59.8835C57.6576 59.2128 58.7228 59.9706 58.7228 61.5646V65.6127L60.6246 64.6421V39.209L49.2299 45.0168L49.222 45.0249ZM62.5264 45.1906V63.6873L68.2238 60.7832V42.2865L62.5264 45.1906ZM56.8212 66.5833V62.5352C56.8212 62.2196 56.6081 62.0695 56.3477 62.1958L53.4989 63.6476C53.2385 63.7818 53.0255 64.1527 53.0255 64.4683V68.5164L56.8212 66.5833ZM51.1237 48.6861C51.1237 48.0469 51.5499 47.313 52.0707 47.0447L53.0176 46.5634C53.5384 46.2951 53.9646 46.5951 53.9646 47.2342C53.9646 47.8734 53.5384 48.6074 53.0176 48.8757L52.0707 49.3569C51.5499 49.6252 51.1237 49.3253 51.1237 48.6861ZM55.8742 46.2636C55.8742 45.6245 56.3003 44.8905 56.8212 44.6222L57.768 44.141C58.2889 43.8727 58.715 44.1726 58.715 44.8118C58.715 45.451 58.2889 46.1845 57.768 46.4528L56.8212 46.9345C56.3003 47.2028 55.8742 46.9028 55.8742 46.2636ZM51.1237 53.3106C51.1237 52.6714 51.5499 51.9374 52.0707 51.6691L53.0176 51.1875C53.5384 50.9192 53.9646 51.2191 53.9646 51.8583C53.9646 52.4975 53.5384 53.2314 53.0176 53.4997L52.0707 53.981C51.5499 54.2493 51.1237 53.9497 51.1237 53.3106ZM55.8742 50.8877C55.8742 50.2486 56.3003 49.5146 56.8212 49.2463L57.768 48.7651C58.2889 48.4968 58.715 48.7967 58.715 49.4359C58.715 50.0751 58.2889 50.809 57.768 51.0773L56.8212 51.5586C56.3003 51.8269 55.8742 51.5269 55.8742 50.8877ZM64.4203 48.8441C64.4203 48.2049 64.8464 47.4709 65.3672 47.2026H65.3751C65.8959 46.9265 66.322 47.2341 66.322 47.8654V47.8812C66.322 48.5204 65.8959 49.2543 65.3751 49.5226H65.3672C64.8464 49.7988 64.4203 49.4911 64.4203 48.8599V48.8441ZM51.1237 57.9265C51.1237 57.2874 51.5499 56.5534 52.0707 56.2851L53.0176 55.8039C53.5384 55.5356 53.9646 55.8355 53.9646 56.4747C53.9646 57.1139 53.5384 57.8478 53.0176 58.1161L52.0707 58.5974C51.5499 58.8657 51.1237 58.5657 51.1237 57.9265ZM55.8742 55.5118C55.8742 54.8726 56.3003 54.1391 56.8212 53.8708L57.768 53.3892C58.2889 53.1209 58.715 53.4208 58.715 54.06C58.715 54.6992 58.2889 55.4331 57.768 55.7014L56.8212 56.1826C56.3003 56.4509 55.8742 56.151 55.8742 55.5118ZM64.4203 53.4681C64.4203 52.829 64.8464 52.095 65.3672 51.8267H65.3751C65.8959 51.5505 66.322 51.8586 66.322 52.4898V52.5056C66.322 53.1448 65.8959 53.8784 65.3751 54.1467H65.3672C64.8464 54.4229 64.4203 54.1152 64.4203 53.4839V53.4681ZM64.4203 58.0922C64.4203 57.453 64.8464 56.7195 65.3672 56.4512H65.3751C65.8959 56.175 66.322 56.4826 66.322 57.1139V57.1297C66.322 57.7689 65.8959 58.5028 65.3751 58.7711H65.3672C64.8464 59.0473 64.4203 58.7393 64.4203 58.108V58.0922Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx
new file mode 100644
index 0000000..d4d682e
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function EpicHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M47.6229 2.35611C46.7076 1.89059 45.532 1.93026 44.2538 2.57726L9.01602 20.5352C6.12031 22.0107 3.76901 26.0664 3.76901 29.5855V72.4685C3.76901 74.4332 4.4949 75.8141 5.63899 76.4059L2.11998 74.6148C0.975896 74.0309 0.25 72.6424 0.25 70.6778V27.7944C0.25 24.2674 2.6013 20.2196 5.49701 18.7441L40.7348 0.786161C42.0209 0.131273 43.1964 0.0994966 44.1038 0.56502L47.6229 2.35611Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M47.6222 2.35613C48.7663 2.94 49.4922 4.32887 49.4922 6.29353V49.1769C49.4922 52.7039 47.1409 56.7513 44.2452 58.2268L9.00743 76.1852C7.72132 76.84 6.54566 76.8714 5.63829 76.4059C4.49421 75.822 3.76831 74.4332 3.76831 72.4685V29.5855C3.76831 26.0585 6.11962 22.0107 9.01533 20.5352L44.2531 2.57727C45.5392 1.92238 46.7148 1.8906 47.6222 2.35613Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M63.0011 9.14965C62.0858 8.68413 60.9102 8.7238 59.6319 9.37079L24.3942 27.3287C21.4985 28.8042 19.1472 32.86 19.1472 36.379V79.2624C19.1472 81.2271 19.8731 82.6077 21.0172 83.1994L17.4982 81.4083C16.3541 80.8245 15.6282 79.436 15.6282 77.4713V34.5879C15.6282 31.061 17.9795 27.0131 20.8752 25.5377L56.1129 7.5797C57.399 6.92481 58.5746 6.89342 59.482 7.35894L63.0011 9.14965Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M63.0019 9.14949C64.1459 9.73337 64.8718 11.1222 64.8718 13.0869V55.9703C64.8718 59.4972 62.5205 63.5447 59.6248 65.0202L24.3871 82.9785C23.101 83.6334 21.9253 83.6648 21.0179 83.1993C19.8738 82.6154 19.1479 81.2269 19.1479 79.2623V36.3788C19.1479 32.8519 21.4993 28.8041 24.395 27.3286L59.6327 9.37063C60.9188 8.71575 62.0945 8.68397 63.0019 9.14949Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M78.3793 15.9509C77.464 15.4854 76.2883 15.5251 75.0101 16.1721L39.7724 34.13C36.8767 35.6055 34.5255 39.6612 34.5255 43.1803V86.0637C34.5255 88.0284 35.2513 89.409 36.3954 90.0007L32.8763 88.2096C31.7322 87.6257 31.0063 86.2373 31.0063 84.2726V41.3892C31.0063 37.8623 33.3577 33.8144 36.2534 32.3389L71.4911 14.381C72.7772 13.7261 73.9529 13.6943 74.8602 14.1598L78.3793 15.9509Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.3799 15.9509C79.524 16.5348 80.2499 17.9237 80.2499 19.8883V62.7718C80.2499 66.2987 77.8986 70.3462 75.0029 71.8216L39.7651 89.78C38.479 90.4349 37.3035 90.4662 36.3961 90.0007C35.252 89.4168 34.5261 88.0284 34.5261 86.0637V43.1803C34.5261 39.6534 36.8773 35.6055 39.773 34.13L75.0108 16.1721C76.2969 15.5172 77.4725 15.4854 78.3799 15.9509Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M73.4865 50.9128V54.7473C73.4865 55.1418 73.3603 55.5758 73.1551 55.9624C72.9342 56.349 72.6501 56.657 72.3424 56.8069L47.1726 69.6362C46.5414 69.9597 46.0286 69.5572 46.0286 68.7366V62.6298L53.6584 46.0604C54.0845 45.2871 54.5815 44.6005 55.1891 44.2928C55.7966 43.985 56.2859 44.1665 56.712 44.5058L63.3082 53.8874L66.1565 49.327C66.5826 48.5538 67.1664 47.9459 67.774 47.6303C68.3815 47.3147 68.9654 47.3384 69.3836 47.6777L73.4865 50.9051V50.9128Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
new file mode 100644
index 0000000..4d5ff1d
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function EstimateHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M47.6234 2.35621C46.7081 1.89069 45.5325 1.93014 44.2542 2.57714L9.01616 20.5355C6.12042 22.0109 3.76909 26.0666 3.76909 29.5856V72.4694C3.76909 74.4341 4.495 75.8149 5.63909 76.4067L2.12005 74.6155C0.975952 74.0317 0.25 72.643 0.25 70.6783V27.7945C0.25 24.2676 2.60133 20.2198 5.49707 18.7444L40.7351 0.78604C42.0213 0.131145 43.1969 0.0995852 44.1043 0.565113L47.6234 2.35621Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M47.6232 2.3553C48.7673 2.93919 49.4932 4.32788 49.4932 6.29257V49.1763C49.4932 52.7033 47.1419 56.751 44.2462 58.2265L9.00809 76.1848C7.72197 76.8397 6.5463 76.8713 5.63892 76.4057C4.49482 75.8219 3.76892 74.4332 3.76892 72.4685V29.5847C3.76892 26.0578 6.12025 22.01 9.01599 20.5345L44.2541 2.57623C45.5402 1.92134 46.7158 1.88978 47.6232 2.3553Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M63.0014 9.14949C62.0861 8.68396 60.9105 8.72341 59.6322 9.37041L24.3942 27.3287C21.4984 28.8042 19.1471 32.8598 19.1471 36.3789V79.2627C19.1471 81.2273 19.873 82.6081 21.0171 83.1999L17.498 81.4088C16.354 80.8249 15.6281 79.4363 15.6281 77.4716V34.5878C15.6281 31.0608 17.9793 27.0131 20.8751 25.5376L56.1132 7.57931C57.3993 6.92442 58.5749 6.89286 59.4823 7.35839L63.0014 9.14949Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M63.0014 9.14968C64.1455 9.73356 64.8714 11.1223 64.8714 13.0869V55.9707C64.8714 59.4977 62.5201 63.5454 59.6243 65.0209L24.3863 82.9792C23.1001 83.6341 21.9245 83.6656 21.0171 83.2001C19.873 82.6162 19.1471 81.2275 19.1471 79.2628V36.3791C19.1471 32.8521 21.4984 28.8044 24.3942 27.3289L59.6322 9.3706C60.9184 8.71571 62.094 8.68415 63.0014 9.14968Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M78.3801 15.9514C77.4648 15.4858 76.2891 15.5253 75.0109 16.1723L39.7728 34.1306C36.8771 35.6061 34.5258 39.6617 34.5258 43.1808V86.0645C34.5258 88.0292 35.2517 89.41 36.3958 90.0018L32.8767 88.2107C31.7326 87.6268 31.0067 86.2381 31.0067 84.2734V41.3897C31.0067 37.8627 33.358 33.815 36.2537 32.3395L71.4919 14.3812C72.778 13.7263 73.9536 13.6947 74.861 14.1603L78.3801 15.9514Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.3799 15.9516C79.524 16.5354 80.2499 17.9241 80.2499 19.8888V62.7726C80.2499 66.2995 77.8987 70.3473 75.0029 71.8228L39.7648 89.7811C38.4787 90.4359 37.303 90.4675 36.3956 90.002C35.2515 89.4181 34.5256 88.0294 34.5256 86.0647V43.181C34.5256 39.654 36.877 35.6063 39.7727 34.1308L75.0108 16.1725C76.2969 15.5176 77.4726 15.486 78.3799 15.9516Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M56.9895 40.0798C57.5024 39.4644 58.0783 38.9752 58.6701 38.6753C59.2619 38.3755 59.8379 38.2651 60.3508 38.3676C60.8636 38.4623 61.2897 38.7621 61.5816 39.2356L70.5529 53.7774C70.8449 54.2508 71.0027 54.8741 71.0027 55.5921C71.0027 56.3102 70.8449 57.0992 70.5529 57.8724C70.261 58.6457 69.8349 59.3795 69.322 60.0028C68.8092 60.6262 68.2332 61.1075 67.6414 61.4073L49.6831 70.5521C49.0913 70.852 48.5153 70.9546 48.0024 70.8599C47.4895 70.7573 47.0635 70.4575 46.7715 69.984C46.4796 69.5106 46.3218 68.8873 46.3218 68.1693C46.3218 67.4513 46.4796 66.6701 46.7715 65.8969L55.7507 42.2023C56.0505 41.4291 56.4687 40.6953 56.9816 40.0798H56.9895ZM58.6701 41.4054C58.4729 41.508 58.2835 41.6658 58.1099 41.8709C57.9442 42.0761 57.8022 42.3207 57.6996 42.5732L48.7205 66.2598C48.6258 66.5202 48.5705 66.7806 48.5705 67.0173C48.5705 67.254 48.6258 67.467 48.7205 67.6248C48.8151 67.7827 48.9571 67.8852 49.1307 67.9168C49.3043 67.9483 49.4937 67.9168 49.691 67.8142L67.6414 58.6694C67.8386 58.5668 68.028 58.409 68.2016 58.2038C68.3752 57.9987 68.5172 57.7541 68.6119 57.4937C68.7066 57.2333 68.7618 56.973 68.7618 56.7362C68.7618 56.4995 68.7066 56.2865 68.6119 56.1287L59.6406 41.5869C59.5459 41.4291 59.4039 41.3344 59.2303 41.3028C59.0567 41.2712 58.8674 41.3028 58.6701 41.4054Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
new file mode 100644
index 0000000..0ff4f3f
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ExportHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="71"
+      height="80"
+      viewBox="0 0 71 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M41.6519 2.04204C40.851 1.6347 39.8223 1.66941 38.7038 2.23554L7.87038 17.949C5.3366 19.24 3.27923 22.7888 3.27923 25.868V63.3912C3.27923 65.1103 3.91439 66.3187 4.91548 66.8365L1.83627 65.2692C0.83518 64.7584 0.200012 63.5431 0.200012 61.824V24.3008C0.200012 21.2147 2.25743 17.6728 4.79121 16.3817L35.6246 0.668313C36.75 0.095278 37.7787 0.0674731 38.5726 0.474811L41.6519 2.04204Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M41.6519 2.04317C42.653 2.55407 43.2881 3.76934 43.2881 5.48845V43.0116C43.2881 46.0977 41.2307 49.6396 38.6969 50.9307L7.86352 66.6444C6.73817 67.2175 5.70945 67.2449 4.91549 66.8376C3.9144 66.3267 3.27924 65.1114 3.27924 63.3923V25.8692C3.27924 22.7831 5.33661 19.2411 7.87039 17.9501L38.7038 2.23667C39.8292 1.66364 40.8579 1.63583 41.6519 2.04317Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.1078 7.9854C54.3069 7.57806 53.2782 7.61277 52.1598 8.1789L21.3264 23.8923C18.7926 25.1834 16.7352 28.7322 16.7352 31.8114V69.3349C16.7352 71.054 17.3703 72.262 18.3714 72.7798L15.2922 71.2126C14.2911 70.7017 13.6559 69.4868 13.6559 67.7677V30.2442C13.6559 27.1581 15.7134 23.6161 18.2471 22.3251L49.0805 6.61167C50.2059 6.03864 51.2346 6.01083 52.0286 6.41817L55.1078 7.9854Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.1079 7.98653C56.109 8.49743 56.7441 9.7127 56.7441 11.4318V48.9553C56.7441 52.0414 54.6867 55.583 52.1529 56.874L21.3195 72.5878C20.1942 73.1608 19.1654 73.1883 18.3715 72.781C17.3704 72.2701 16.7352 71.0551 16.7352 69.336V31.8125C16.7352 28.7264 18.7926 25.1845 21.3264 23.8935L52.1598 8.18003C53.2852 7.607 54.3139 7.57919 55.1079 7.98653Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M68.5637 13.9328C67.7629 13.5255 66.7342 13.5598 65.6157 14.126L34.7823 29.8397C32.2485 31.1308 30.1911 34.6793 30.1911 37.7585V75.282C30.1911 77.0011 30.8263 78.2094 31.8274 78.7272L28.7482 77.16C27.7471 76.6491 27.1119 75.4338 27.1119 73.7147V36.1912C27.1119 33.1051 29.1693 29.5636 31.7031 28.2725L62.5365 12.5587C63.6619 11.9857 64.6906 11.9582 65.4845 12.3656L68.5637 13.9328Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.5637 13.93C69.5648 14.4409 70.2 15.6559 70.2 17.375V54.8985C70.2 57.9846 68.1426 61.5265 65.6088 62.8175L34.7754 78.531C33.65 79.104 32.6213 79.1318 31.8274 78.7245C30.8263 78.2136 30.1911 76.9983 30.1911 75.2792V37.7557C30.1911 34.6696 32.2485 31.128 34.7823 29.837L65.6157 14.1232C66.7411 13.5502 67.7698 13.5227 68.5637 13.93Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M43.2881 40.2004C43.2881 39.51 43.7438 38.7229 44.3099 38.4329L58.6289 31.1355C59.195 30.8455 59.6507 31.1699 59.6507 31.8603C59.6507 32.5507 59.195 33.3378 58.6289 33.6277L44.3099 40.9255C43.7438 41.2155 43.2881 40.8908 43.2881 40.2004Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M58.339 45.8623C57.9385 46.5527 57.2895 46.877 56.8891 46.6009L52.4981 43.494V57.9096C52.4981 58.6 52.0356 59.3871 51.4764 59.6771C50.9171 59.967 50.4546 59.6358 50.4546 58.9523V44.5297L46.0636 52.1103C45.6631 52.8007 45.0142 53.1319 44.6138 52.8489C44.2202 52.5658 44.2202 51.7789 44.6138 51.0885L50.7514 40.4978C50.7514 40.4978 50.7928 40.4356 50.8136 40.4011C50.8205 40.3941 50.8274 40.3874 50.8274 40.3805C50.9033 40.27 50.9862 40.1594 51.0759 40.0697C51.1104 40.0352 51.145 40.0005 51.1795 39.9729C51.2071 39.9453 51.2416 39.9178 51.2762 39.8971C51.3107 39.8695 51.3521 39.8418 51.3866 39.8141C51.4211 39.7934 51.4488 39.7796 51.4833 39.7589C51.5178 39.7381 51.5523 39.7245 51.5868 39.7106C51.718 39.6554 51.8492 39.6416 51.9666 39.6554C51.9942 39.6554 52.0218 39.6625 52.0494 39.6763C52.0494 39.6763 52.1046 39.6968 52.1323 39.7106C52.1737 39.7314 52.2082 39.7521 52.2427 39.7798L58.3459 44.0948C58.7394 44.3778 58.7394 45.1648 58.3459 45.8552L58.339 45.8623Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/index.ts b/packages/propel/src/empty-state/assets/horizontal-stack/index.ts
new file mode 100644
index 0000000..ce49bb5
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/index.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./customer";
+export * from "./epic";
+export * from "./estimate";
+export * from "./export";
+export * from "./intake";
+export * from "./label";
+export * from "./link";
+export * from "./members";
+export * from "./note";
+export * from "./priority";
+export * from "./project";
+export * from "./settings";
+export * from "./state";
+export * from "./template";
+export * from "./token";
+export * from "./unknown";
+export * from "./update";
+export * from "./webhook";
+export * from "./work-item";
+export * from "./worklog";
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx
new file mode 100644
index 0000000..f3bf4f5
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function IntakeHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="71"
+      height="80"
+      viewBox="0 0 71 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M41.6519 2.04294C40.851 1.6356 39.8223 1.67014 38.7038 2.23627L7.87039 17.9499C5.33661 19.2409 3.27921 22.7896 3.27921 25.8688V63.3923C3.27921 65.1114 3.91438 66.3196 4.91547 66.8374L1.83625 65.2702C0.835165 64.7593 0.199997 63.5442 0.199997 61.8251V24.3015C0.199997 21.2154 2.25742 17.6737 4.7912 16.3826L35.6246 0.669039C36.75 0.0960034 37.7787 0.068367 38.5726 0.475705L41.6519 2.04294Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M41.6519 2.04327C42.653 2.55417 43.2882 3.76927 43.2882 5.48838V43.0119C43.2882 46.098 41.2308 49.6397 38.697 50.9308L7.86357 66.6444C6.73821 67.2174 5.70951 67.2451 4.91555 66.8377C3.91446 66.3268 3.2793 65.1117 3.2793 63.3926V25.8691C3.2793 22.783 5.3367 19.2413 7.87048 17.9502L38.7039 2.2366C39.8293 1.66357 40.858 1.63593 41.6519 2.04327Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.1078 8.0216C54.307 7.61427 53.2783 7.64881 52.1598 8.21494L21.3264 23.9285C18.7926 25.2196 16.7352 28.7682 16.7352 31.8474V69.371C16.7352 71.0901 17.3704 72.2983 18.3714 72.8161L15.2923 71.2488C14.2912 70.7379 13.656 69.5228 13.656 67.8037V30.2802C13.656 27.1941 15.7134 23.6524 18.2472 22.3613L49.0806 6.64771C50.2059 6.07467 51.2347 6.04704 52.0286 6.45437L55.1078 8.0216Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.1079 8.02209C56.109 8.53299 56.7441 9.74809 56.7441 11.4672V48.9907C56.7441 52.0768 54.6867 55.6186 52.1529 56.9096L21.3195 72.6232C20.1942 73.1963 19.1655 73.2239 18.3715 72.8165C17.3704 72.3056 16.7352 71.0905 16.7352 69.3714V31.8479C16.7352 28.7618 18.7926 25.2201 21.3264 23.929L52.1599 8.21543C53.2852 7.64239 54.3139 7.61475 55.1079 8.02209Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M68.5638 13.973C67.7629 13.5657 66.7342 13.6002 65.6157 14.1663L34.7823 29.8799C32.2485 31.171 30.1911 34.7196 30.1911 37.7988V75.3222C30.1911 77.0413 30.8263 78.2495 31.8274 78.7673L28.7482 77.2002C27.7471 76.6893 27.1119 75.474 27.1119 73.7549V36.2316C27.1119 33.1455 29.1693 29.6037 31.7031 28.3127L62.5365 12.5991C63.6619 12.0261 64.6906 11.9984 65.4845 12.4058L68.5638 13.973Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.5636 13.9733C69.5647 14.4842 70.1999 15.6993 70.1999 17.4184V54.9418C70.1999 58.0279 68.1425 61.5698 65.6087 62.8609L34.7753 78.5744C33.6499 79.1475 32.6212 79.1749 31.8272 78.7676C30.8262 78.2567 30.191 77.0416 30.191 75.3225V37.7992C30.191 34.7131 32.2484 31.1713 34.7822 29.8803L65.6156 14.1667C66.741 13.5936 67.7697 13.566 68.5636 13.9733Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M57.5519 34.9131C57.8349 34.9683 58.0075 35.2513 58.0075 35.6586V46.0631C58.0075 46.4566 57.8419 46.9053 57.5726 47.2505L51.8699 54.4376C51.5937 54.7897 51.2485 54.9693 50.9654 54.9141C50.6824 54.8589 50.5097 54.5757 50.5097 54.1684V43.7158C50.5097 43.3222 50.6754 42.8664 50.9516 42.5212L56.6543 35.3825C56.9305 35.0373 57.2757 34.8579 57.5588 34.9131H57.5519ZM52.2979 43.4395V51.2687L56.2056 46.3461V38.5514L52.2979 43.4395Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M55.0249 34.4983C55.2804 34.9057 55.1354 35.6651 54.7073 36.1967L49.4395 42.7832V52.6007C49.4395 53.2221 49.0391 53.9332 48.542 54.1817C48.0449 54.4303 47.6445 54.1334 47.6445 53.519V43.0662C47.6445 42.6726 47.8102 42.217 48.0863 41.8718L53.7891 34.7331C54.2171 34.2015 54.7695 34.091 55.0249 34.4983Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.1253 33.8013C52.3808 34.2087 52.2358 34.9681 51.8077 35.4997L46.54 42.0862V51.9037C46.54 52.5251 46.1395 53.2362 45.6424 53.4848C45.1454 53.7333 44.7449 53.4365 44.7449 52.822V42.3692C44.7449 41.9757 44.9106 41.52 45.1868 41.1748L50.8895 34.0361C51.3175 33.5045 51.8699 33.394 52.1253 33.8013Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M41.7347 51.7794C42.2318 51.5239 42.6322 51.8277 42.6322 52.4421V60.444C42.6322 61.1965 43.1293 61.5624 43.73 61.2586L58.9465 53.5054C59.5471 53.2016 60.0442 52.3317 60.0442 51.5791V43.5773C60.0442 42.9559 60.4446 42.2448 60.9417 41.9963C61.4388 41.7477 61.8393 42.0447 61.8393 42.6592V50.6609C61.8393 52.6561 60.5413 54.9414 58.9465 55.7561L43.73 63.5093C42.1351 64.324 40.8372 63.3574 40.8372 61.369V53.3673C40.8372 52.746 41.2376 52.0348 41.7347 51.7863V51.7794Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx
new file mode 100644
index 0000000..d625e48
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function LabelHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M47.6237 2.3855C46.7085 1.9135 45.5328 1.9535 44.2545 2.6095L9.0162 20.8176C6.12044 22.3136 3.76909 26.4256 3.76909 29.9936V73.4738C3.76909 75.4658 4.495 76.8658 5.63911 77.4658L2.12001 75.6498C0.975909 75.0578 0.25 73.6498 0.25 71.6578V28.1776C0.25 24.6016 2.60132 20.4976 5.49708 19.0016L40.7354 0.793494C42.0216 0.129492 43.1972 0.0974924 44.1046 0.569494L47.6237 2.3855Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M47.6237 2.38514C48.7678 2.97714 49.4937 4.38515 49.4937 6.37716V49.8573C49.4937 53.4333 47.1424 57.5373 44.2466 59.0334L9.00828 77.2414C7.72216 77.9054 6.54648 77.9374 5.63909 77.4654C4.49498 76.8734 3.76907 75.4654 3.76907 73.4734V29.9932C3.76907 26.4172 6.12042 22.3132 9.01618 20.8172L44.2545 2.60914C45.5406 1.94513 46.7163 1.91314 47.6237 2.38514Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M63.0022 9.27381C62.087 8.80181 60.9113 8.84181 59.633 9.49781L24.3947 27.7059C21.499 29.2019 19.1476 33.3139 19.1476 36.8819V80.3621C19.1476 82.3541 19.8735 83.7541 21.0176 84.3541L17.4985 82.5381C16.3544 81.9461 15.6285 80.5381 15.6285 78.5461V35.0659C15.6285 31.4899 17.9799 27.3859 20.8756 25.8899L56.114 7.6818C57.4001 7.0178 58.5757 6.9858 59.4831 7.4578L63.0022 9.27381Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M63.0021 9.27344C64.1462 9.86545 64.8721 11.2735 64.8721 13.2655V56.7456C64.8721 60.3216 62.5208 64.4257 59.6251 65.9217L24.3867 84.1297C23.1005 84.7937 21.9249 84.8257 21.0175 84.3537C19.8734 83.7617 19.1475 82.3537 19.1475 80.3617V36.8815C19.1475 33.3055 21.4988 29.2015 24.3946 27.7055L59.6329 9.49744C60.919 8.83344 62.0947 8.80144 63.0021 9.27344Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M78.3803 16.1699C77.465 15.6979 76.2894 15.7379 75.0112 16.3939L39.7728 34.602C36.877 36.098 34.5257 40.21 34.5257 43.778V87.2582C34.5257 89.2502 35.2516 90.6502 36.3957 91.2502L32.8766 89.4342C31.7325 88.8422 31.0066 87.4342 31.0066 85.4422V41.962C31.0066 38.386 33.3579 34.282 36.2537 32.786L71.4921 14.5779C72.7782 13.9139 73.9539 13.8819 74.8613 14.3539L78.3803 16.1699Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.3801 16.1696C79.5242 16.7616 80.2501 18.1696 80.2501 20.1616V63.6417C80.2501 67.2178 77.8988 71.3218 75.0031 72.8178L39.7647 91.0258C38.4786 91.6898 37.3029 91.7218 36.3955 91.2498C35.2514 90.6578 34.5255 89.2498 34.5255 87.2578V43.7777C34.5255 40.2016 36.8768 36.0976 39.7726 34.6016L75.011 16.3936C76.2971 15.7296 77.4727 15.6976 78.3801 16.1696Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M49.5568 47.8738C50.1643 46.8178 50.977 45.9779 51.837 45.5379L59.538 41.5618C60.3902 41.1218 61.2108 41.1138 61.8184 41.5458L71.1606 48.2498C71.847 48.7459 72.2258 49.6979 72.2258 50.8979C72.2258 52.0979 71.8391 53.4419 71.1606 54.6499L64.0987 67.0179C63.4122 68.2259 62.4811 69.1779 61.5106 69.6819C60.5401 70.1859 59.6091 70.1939 58.9226 69.7059L49.5804 63.0019C48.9729 62.5699 48.6336 61.7379 48.6336 60.6819V51.1859C48.6336 50.1299 48.9729 48.9459 49.5804 47.8899L49.5568 47.8738ZM51.837 48.1859C51.553 48.3299 51.2769 48.6099 51.0796 48.9619C50.8823 49.3139 50.764 49.7059 50.764 50.0579V59.5539C50.764 59.9059 50.8745 60.1859 51.0796 60.3299L60.4218 67.0259C60.7058 67.2259 61.1003 67.2259 61.5027 67.0179C61.9051 66.8099 62.2918 66.4099 62.5838 65.9139L69.6456 53.5619C69.9296 53.0579 70.0875 52.4979 70.0875 52.0019C70.0875 51.5059 69.9296 51.1059 69.6456 50.8979L60.3034 44.2018C60.1062 44.0578 59.83 44.0578 59.5459 44.2018L51.8449 48.1779L51.837 48.1859Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M59.5302 51.1618C59.5302 53.3538 58.0863 55.8818 56.311 56.7938C54.5357 57.7138 53.0917 56.6818 53.0917 54.4818C53.0917 52.2818 54.5357 49.7618 56.311 48.8498C58.0863 47.9298 59.5302 48.9618 59.5302 51.1618Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx
new file mode 100644
index 0000000..e9770e6
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function LinkHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="51"
+      height="58"
+      viewBox="0 0 51 58"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M30.145 1.45971C29.565 1.16471 28.82 1.18971 28.01 1.59971L5.68 12.9797C3.845 13.9147 2.355 16.4847 2.355 18.7147V45.8897C2.355 47.1347 2.815 48.0097 3.54 48.3847L1.31 47.2497C0.584998 46.8797 0.125 45.9997 0.125 44.7547V17.5797C0.125 15.3447 1.615 12.7797 3.45 11.8447L25.78 0.464705C26.595 0.0497054 27.34 0.029706 27.915 0.324706L30.145 1.45971Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M30.145 1.45972C30.87 1.82972 31.33 2.70971 31.33 3.95471V31.1297C31.33 33.3647 29.84 35.9297 28.005 36.8647L5.67498 48.2447C4.85998 48.6597 4.11498 48.6797 3.53998 48.3847C2.81498 48.0147 2.35498 47.1347 2.35498 45.8897V18.7147C2.35498 16.4797 3.84498 13.9147 5.67998 12.9797L28.01 1.59972C28.825 1.18472 29.57 1.16472 30.145 1.45972Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M39.89 5.79473C39.31 5.49973 38.565 5.52473 37.755 5.93473L15.425 17.3147C13.59 18.2497 12.1 20.8197 12.1 23.0497V50.2247C12.1 51.4697 12.56 52.3447 13.285 52.7197L11.055 51.5847C10.33 51.2147 9.87 50.3347 9.87 49.0897V21.9147C9.87 19.6797 11.36 17.1147 13.195 16.1797L35.525 4.79973C36.34 4.38473 37.085 4.36473 37.66 4.65973L39.89 5.79473Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M39.89 5.7948C40.615 6.1648 41.075 7.04479 41.075 8.28979V35.4648C41.075 37.6998 39.585 40.2648 37.75 41.1998L15.42 52.5798C14.605 52.9948 13.86 53.0148 13.285 52.7198C12.56 52.3498 12.1 51.4698 12.1 50.2248V23.0498C12.1 20.8148 13.59 18.2498 15.425 17.3148L37.755 5.9348C38.57 5.5198 39.315 5.4998 39.89 5.7948Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M49.635 10.0997C49.055 9.80472 48.31 9.82972 47.5 10.2397L25.17 21.6197C23.335 22.5547 21.845 25.1247 21.845 27.3547V54.5297C21.845 55.7747 22.305 56.6497 23.03 57.0247L20.8 55.8897C20.075 55.5197 19.615 54.6397 19.615 53.3947V26.2197C19.615 23.9847 21.105 21.4197 22.94 20.4847L45.27 9.10472C46.085 8.68972 46.83 8.66972 47.405 8.96472L49.635 10.0997Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M49.635 10.0997C50.36 10.4697 50.82 11.3497 50.82 12.5947V39.7697C50.82 42.0047 49.33 44.5697 47.495 45.5047L25.165 56.8847C24.35 57.2997 23.605 57.3197 23.03 57.0247C22.305 56.6547 21.845 55.7747 21.845 54.5297V27.3547C21.845 25.1197 23.335 22.5547 25.17 21.6197L47.5 10.2397C48.315 9.82473 49.06 9.80473 49.635 10.0997Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M32.49 37.2048C31.935 38.1598 31.625 39.2347 31.625 40.1847C31.625 41.1347 31.935 41.8948 32.49 42.2848C33.045 42.6748 33.795 42.6747 34.575 42.2747C35.355 41.8747 36.11 41.1148 36.66 40.1598L37.705 38.3598C37.995 37.8598 38.46 37.6248 38.75 37.8298C39.04 38.0348 39.04 38.6047 38.75 39.0997L37.705 40.8997C36.875 42.3347 35.75 43.4747 34.575 44.0747C33.4 44.6747 32.275 44.6797 31.445 44.0897C30.615 43.5047 30.15 42.3698 30.15 40.9398C30.15 39.5098 30.615 37.9048 31.445 36.4698L32.49 34.6697C32.78 34.1697 33.245 33.9348 33.535 34.1398C33.825 34.3448 33.825 34.9098 33.535 35.4098L32.49 37.2097V37.2048Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M35.62 30.5248C35.33 30.3198 35.33 29.7548 35.62 29.2548L36.665 27.4548C37.495 26.0198 38.62 24.8798 39.795 24.2798C40.97 23.6798 42.095 23.6748 42.925 24.2648C43.755 24.8498 44.22 25.9848 44.22 27.4148C44.22 28.8448 43.755 30.4498 42.925 31.8848L41.88 33.6848C41.59 34.1848 41.125 34.4198 40.835 34.2148C40.545 34.0098 40.545 33.4398 40.835 32.9448L41.88 31.1448C42.435 30.1898 42.745 29.1148 42.745 28.1648C42.745 27.2148 42.435 26.4548 41.88 26.0648C41.325 25.6748 40.575 25.6748 39.795 26.0748C39.01 26.4748 38.26 27.2348 37.71 28.1898L36.665 29.9898C36.375 30.4898 35.91 30.7248 35.62 30.5198V30.5248Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M34.575 38.6798C34.285 38.4748 34.285 37.9098 34.575 37.4098L38.75 30.2048C39.04 29.7048 39.505 29.4698 39.795 29.6748C40.085 29.8798 40.085 30.4448 39.795 30.9448L35.62 38.1498C35.33 38.6448 34.865 38.8848 34.575 38.6798Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx
new file mode 100644
index 0000000..7eb72f9
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function MembersHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="71"
+      height="80"
+      viewBox="0 0 71 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M41.6017 1.99286C40.8009 1.58553 39.7722 1.62005 38.6537 2.18616L7.82029 17.8993C5.28651 19.1903 3.2291 22.7389 3.2291 25.818V63.3404C3.2291 65.0594 3.86428 66.2676 4.86536 66.7854L1.78616 65.2182C0.785076 64.7073 0.149902 63.4923 0.149902 61.7732V24.2508C0.149902 21.1648 2.20731 17.6232 4.74109 16.3321L35.5745 0.619001C36.6999 0.0459819 37.7286 0.0183569 38.5225 0.425683L41.6017 1.99286Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M41.6014 1.99319C42.6025 2.50408 43.2377 3.71916 43.2377 5.43821V42.9606C43.2377 46.0466 41.1803 49.5883 38.6465 50.8793L7.81304 66.5924C6.68768 67.1654 5.65898 67.1931 4.86502 66.7857C3.86393 66.2748 3.22876 65.0598 3.22876 63.3407V25.8183C3.22876 22.7323 5.28616 19.1907 7.81995 17.8996L38.6534 2.1865C39.7787 1.61348 40.8074 1.58587 41.6014 1.99319Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.0576 7.9715C54.2567 7.56417 53.228 7.59869 52.1095 8.16481L21.2761 23.8779C18.7423 25.169 16.6849 28.7175 16.6849 31.7966V69.319C16.6849 71.0381 17.3201 72.2462 18.3212 72.764L15.242 71.1969C14.2409 70.686 13.6057 69.4709 13.6057 67.7519V30.2295C13.6057 27.1435 15.6631 23.6018 18.1969 22.3108L49.0303 6.59763C50.1557 6.02461 51.1844 5.997 51.9784 6.40433L55.0576 7.9715Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.0575 7.97183C56.0585 8.48271 56.6937 9.69779 56.6937 11.4169V48.9392C56.6937 52.0252 54.6363 55.5669 52.1025 56.8579L21.2691 72.5711C20.1437 73.1441 19.115 73.1717 18.3211 72.7644C17.32 72.2535 16.6848 71.0384 16.6848 69.3194V31.797C16.6848 28.711 18.7422 25.1693 21.276 23.8783L52.1094 8.16514C53.2348 7.59212 54.2635 7.5645 55.0575 7.97183Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M68.5136 13.9233C67.7127 13.5159 66.684 13.5505 65.5656 14.1166L34.7322 29.8297C32.1984 31.1207 30.141 34.6693 30.141 37.7484V75.2708C30.141 76.9899 30.7761 78.198 31.7772 78.7158L28.698 77.1486C27.6969 76.6378 27.0618 75.4227 27.0618 73.7036V36.1813C27.0618 33.0952 29.1192 29.5536 31.6529 28.2626L62.4864 12.5494C63.6117 11.9764 64.6404 11.9488 65.4344 12.3561L68.5136 13.9233Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.5138 13.9236C69.5148 14.4345 70.15 15.6496 70.15 17.3686V54.891C70.15 57.977 68.0926 61.5187 65.5588 62.8097L34.7254 78.5228C33.6 79.0959 32.5713 79.1235 31.7774 78.7161C30.7763 78.2053 30.1411 76.9902 30.1411 75.2711V37.7488C30.1411 34.6627 32.1985 31.1211 34.7323 29.8301L65.5657 14.1169C66.6911 13.5439 67.7198 13.5163 68.5138 13.9236Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.256 51.7485C48.5195 49.5668 50.2386 47.8271 52.0198 46.9158C53.808 46.0045 55.5202 45.9976 56.7836 46.8882C58.0471 47.7857 58.7582 49.5047 58.7582 51.6794C58.7582 52.3284 58.3301 53.074 57.7916 53.3432C57.2531 53.6125 56.825 53.3087 56.825 52.6598C56.825 51.1064 56.321 49.8706 55.4166 49.2355C54.5122 48.5934 53.2902 48.6003 52.0129 49.2562C50.7357 49.9051 49.5137 51.1478 48.6092 52.7081C47.7048 54.2684 47.2008 56.015 47.2008 57.5684C47.2008 58.2174 46.7728 58.963 46.2412 59.2322C45.7095 59.5015 45.2815 59.1977 45.2815 58.5487C45.2815 56.374 45.9926 53.9232 47.256 51.7416V51.7485Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.0265 39.8808C50.4317 40.6954 49.1407 42.9254 49.1407 44.8654C49.1407 46.8053 50.4317 47.7236 52.0265 46.9089C53.6214 46.0943 54.9124 43.8643 54.9124 41.9243C54.9124 39.9844 53.6214 39.0661 52.0265 39.8808ZM47.2075 45.8526C47.2075 42.6147 49.3616 38.8935 52.0196 37.5404C54.6777 36.1872 56.8317 37.713 56.8317 40.944C56.8317 44.175 54.6777 47.9031 52.0196 49.2562C49.3616 50.6094 47.2075 49.0836 47.2075 45.8526Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M56.8389 37.4298C56.8389 36.7808 57.2669 36.0352 57.8054 35.766C58.9239 35.1999 59.9871 35.2137 60.7673 35.7867C61.5474 36.3666 61.9824 37.4574 61.9824 38.8244C61.9824 40.1913 61.5474 41.7309 60.7673 43.0979C60.7327 43.16 60.6982 43.2221 60.6637 43.2774C61.1125 43.3671 61.5336 43.5466 61.9064 43.8228C62.9904 44.6236 63.591 46.1424 63.591 48.041C63.591 48.69 63.163 49.4356 62.6245 49.7048C62.0859 49.9741 61.6648 49.6703 61.6648 49.0214C61.6648 47.7234 61.2506 46.6948 60.5256 46.1563C59.8007 45.6178 58.8272 45.6109 57.8123 46.1286C57.2807 46.3979 56.8458 46.0941 56.8458 45.4452C56.8458 44.7962 57.2738 44.0506 57.8123 43.7813C58.3992 43.4845 58.9653 42.8976 59.3934 42.152C59.8145 41.4064 60.0631 40.5503 60.0631 39.784C60.0631 39.0177 59.8214 38.4171 59.3934 38.0995C58.9722 37.7819 58.3992 37.7819 57.8123 38.0857C57.2807 38.3549 56.8458 38.0511 56.8458 37.4022L56.8389 37.4298Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.2076 42.3389C47.2076 41.6899 46.7796 41.3861 46.248 41.6554C45.1295 42.2215 44.0663 43.3192 43.2862 44.6931C42.506 46.0669 42.071 47.6065 42.071 48.9665C42.071 50.3266 42.506 51.4312 43.2862 52.0042C43.3207 52.0319 43.3552 52.0526 43.3897 52.0802C42.9409 52.6325 42.5198 53.24 42.147 53.8959C41.063 55.8014 40.4624 57.9346 40.4624 59.8332C40.4624 60.4822 40.8905 60.7859 41.4221 60.5167C41.9537 60.2474 42.3817 59.5018 42.3817 58.8528C42.3817 57.5549 42.796 56.1051 43.5209 54.8279C44.2458 53.5507 45.2193 52.5496 46.2342 52.0318C46.7658 51.7626 47.1938 51.017 47.1938 50.368C47.1938 49.7191 46.7658 49.4153 46.2342 49.6845C45.6473 49.9814 45.0812 49.9814 44.6531 49.6707C44.232 49.3532 43.9835 48.7525 43.9835 47.9862C43.9835 47.2199 44.2251 46.3707 44.6531 45.6251C45.0743 44.8795 45.6473 44.2996 46.2342 43.9958C46.7658 43.7265 47.1938 42.9809 47.1938 42.332L47.2076 42.3389Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx
new file mode 100644
index 0000000..03dbad5
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function NoteHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="51"
+      height="58"
+      viewBox="0 0 51 58"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M30.145 1.45968C29.565 1.16468 28.82 1.18968 28.01 1.59968L5.68001 12.9797C3.84501 13.9147 2.355 16.4847 2.355 18.7147V45.8897C2.355 47.1347 2.81501 48.0097 3.54001 48.3847L1.31 47.2497C0.584998 46.8797 0.125 45.9997 0.125 44.7547V17.5797C0.125 15.3447 1.615 12.7797 3.45 11.8447L25.78 0.464675C26.595 0.0496749 27.34 0.0296755 27.915 0.324675L30.145 1.45968Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M30.145 1.45965C30.87 1.82965 31.33 2.70965 31.33 3.95465V31.1296C31.33 33.3646 29.84 35.9296 28.005 36.8646L5.67499 48.2447C4.85999 48.6597 4.11499 48.6796 3.53999 48.3847C2.81499 48.0147 2.35498 47.1347 2.35498 45.8897V18.7147C2.35498 16.4797 3.84499 13.9147 5.67999 12.9797L28.01 1.59965C28.825 1.18465 29.57 1.16465 30.145 1.45965Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M39.89 5.79467C39.31 5.49967 38.565 5.52467 37.755 5.93467L15.425 17.3147C13.59 18.2497 12.1 20.8197 12.1 23.0497V50.2247C12.1 51.4697 12.56 52.3447 13.285 52.7197L11.055 51.5847C10.33 51.2147 9.87 50.3347 9.87 49.0897V21.9147C9.87 19.6797 11.36 17.1147 13.195 16.1797L35.525 4.79967C36.34 4.38467 37.085 4.36467 37.66 4.65967L39.89 5.79467Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M39.89 5.79465C40.615 6.16465 41.075 7.04464 41.075 8.28964V35.4646C41.075 37.6996 39.585 40.2646 37.75 41.1996L15.42 52.5797C14.605 52.9947 13.86 53.0146 13.285 52.7197C12.56 52.3497 12.1 51.4696 12.1 50.2246V23.0497C12.1 20.8147 13.59 18.2496 15.425 17.3146L37.755 5.93465C38.57 5.51965 39.315 5.49965 39.89 5.79465Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M49.635 10.0997C49.055 9.80466 48.31 9.82966 47.5 10.2397L25.17 21.6197C23.335 22.5547 21.845 25.1247 21.845 27.3547V54.5297C21.845 55.7747 22.305 56.6497 23.03 57.0247L20.8 55.8897C20.075 55.5197 19.615 54.6397 19.615 53.3947V26.2197C19.615 23.9847 21.105 21.4197 22.94 20.4847L45.27 9.10466C46.085 8.68966 46.83 8.66966 47.405 8.96466L49.635 10.0997Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M49.635 10.0996C50.36 10.4696 50.82 11.3496 50.82 12.5946V39.7696C50.82 42.0046 49.33 44.5696 47.495 45.5046L25.165 56.8846C24.35 57.2996 23.605 57.3196 23.03 57.0246C22.305 56.6546 21.845 55.7746 21.845 54.5296V27.3546C21.845 25.1196 23.335 22.5546 25.17 21.6196L47.5 10.2396C48.315 9.82464 49.06 9.80464 49.635 10.0996Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M43.005 22.1696L31.91 27.8196C30.6 28.4896 29.535 30.3246 29.535 31.9196V45.4196C29.535 47.0146 30.6 47.7696 31.91 47.1046L40.625 42.6646C40.835 42.5546 41.04 42.3496 41.19 42.0947L45.15 35.2546C45.3 34.9996 45.38 34.7096 45.38 34.4496V23.8447C45.38 22.2497 44.31 21.4996 43 22.1646L43.005 22.1696ZM43.795 33.3346L41.42 34.5446C40.11 35.2146 39.04 37.0546 39.04 38.6496V41.5396L31.91 45.1747C31.475 45.3947 31.12 45.1496 31.12 44.6146V31.1146C31.12 30.5796 31.475 29.9696 31.91 29.7496L43.005 24.0996C43.445 23.8746 43.795 24.1247 43.795 24.6597V33.3396V33.3346Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx
new file mode 100644
index 0000000..209b14e
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function PriorityHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="71"
+      height="80"
+      viewBox="0 0 71 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M41.5768 1.96789C40.776 1.56055 39.7472 1.59509 38.6288 2.16122L7.79538 17.8747C5.2616 19.1658 3.2042 22.7145 3.2042 25.7937V63.3171C3.2042 65.0362 3.83937 66.2444 4.84046 66.7622L1.76126 65.195C0.760173 64.6841 0.125 63.469 0.125 61.7499V24.2265C0.125 21.1404 2.1824 17.5986 4.71618 16.3076L35.5496 0.593996C36.6749 0.0209608 37.7037 -0.00667559 38.4976 0.400662L41.5768 1.96789Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M41.5769 1.9678C42.5779 2.4787 43.2131 3.6938 43.2131 5.41291V42.9363C43.2131 46.0224 41.1557 49.5642 38.6219 50.8552L7.7885 66.5688C6.66314 67.1418 5.63445 67.1695 4.84048 66.7621C3.8394 66.2512 3.20422 65.0361 3.20422 63.317V25.7936C3.20422 22.7075 5.26163 19.1657 7.79541 17.8746L38.6288 2.16113C39.7542 1.5881 40.7829 1.56046 41.5769 1.9678Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.0328 7.91223C54.2319 7.50489 53.2032 7.53943 52.0848 8.10556L21.2514 23.8191C18.7176 25.1102 16.6602 28.6589 16.6602 31.7381V69.2615C16.6602 70.9806 17.2954 72.1888 18.2965 72.7066L15.2173 71.1393C14.2162 70.6284 13.581 69.4133 13.581 67.6942V30.1708C13.581 27.0847 15.6384 23.543 18.1722 22.2519L49.0056 6.53833C50.131 5.9653 51.1597 5.93766 51.9536 6.345L55.0328 7.91223Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.0329 7.91214C56.034 8.42304 56.6691 9.63814 56.6691 11.3572V48.8806C56.6691 51.9668 54.6117 55.5085 52.0779 56.7996L21.2445 72.5131C20.1192 73.0862 19.0905 73.1138 18.2965 72.7065C17.2954 72.1956 16.6602 70.9805 16.6602 69.2614V31.738C16.6602 28.6519 18.7176 25.1101 21.2514 23.8191L52.0848 8.10547C53.2102 7.53244 54.2389 7.5048 55.0329 7.91214Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M68.4888 13.8636C67.6879 13.4563 66.6592 13.4908 65.5408 14.057L34.7073 29.7706C32.1736 31.0616 30.1162 34.6103 30.1162 37.6895V75.2129C30.1162 76.932 30.7513 78.1402 31.7524 78.658L28.6732 77.0908C27.6721 76.5798 27.037 75.3647 27.037 73.6456V36.1222C27.037 33.0361 29.0944 29.4944 31.6281 28.2033L62.4616 12.4897C63.5869 11.9167 64.6156 11.8891 65.4096 12.2964L68.4888 13.8636Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.4888 13.8636C69.4899 14.3745 70.1251 15.5896 70.1251 17.3087V54.8321C70.1251 57.9182 68.0677 61.4599 65.5339 62.751L34.7005 78.4646C33.5751 79.0376 32.5464 79.0652 31.7525 78.6579C30.7514 78.147 30.1162 76.9319 30.1162 75.2128V37.6894C30.1162 34.6033 32.1736 31.0615 34.7074 29.7705L65.5408 14.0569C66.6662 13.4839 67.6949 13.4562 68.4888 13.8636Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M41.0315 63.4071C40.3204 63.7662 39.7404 63.3657 39.7404 62.5027C39.7404 61.6397 40.3066 60.6455 41.0177 60.2865H41.0315C41.7426 59.9206 42.3156 60.328 42.3156 61.191C42.3156 62.054 41.7426 63.0481 41.0315 63.4071Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M47.4453 60.1413C46.7342 60.5003 46.1612 60.0929 46.1612 59.2299V52.9749C46.1612 52.1119 46.7342 51.1176 47.4453 50.7586C48.1564 50.3996 48.7295 50.807 48.7295 51.67V57.925C48.7295 58.788 48.1564 59.7822 47.4453 60.1413Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M53.873 56.8689C53.1619 57.2279 52.5888 56.8206 52.5888 55.9576V43.4474C52.5888 42.5844 53.1619 41.5903 53.873 41.2313C54.5841 40.8723 55.1571 41.2796 55.1571 42.1426V54.6527C55.1571 55.5157 54.5841 56.5099 53.873 56.8689Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M60.2937 53.5896C59.5826 53.9486 59.0096 53.5412 59.0096 52.6782V33.9131C59.0096 33.0501 59.5826 32.0559 60.2937 31.6968C61.0048 31.3378 61.5779 31.7452 61.5779 32.6082V51.3733C61.5779 52.2363 61.0048 53.2306 60.2937 53.5896Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx
new file mode 100644
index 0000000..6b6c4cf
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ProjectHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="102"
+      height="115"
+      viewBox="0 0 102 115"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M60.2802 2.91941C59.1202 2.32941 57.6302 2.37941 56.0102 3.19941L11.3502 25.9594C7.68023 27.8294 4.70023 32.9694 4.70023 37.4294V91.7794C4.70023 94.2694 5.62023 96.0194 7.07023 96.7694L2.61023 94.4994C1.16023 93.7594 0.240234 91.9994 0.240234 89.5094V35.1594C0.240234 30.6894 3.22023 25.5594 6.89023 23.6894L51.5602 0.929412C53.1902 0.0994115 54.6802 0.0594115 55.8302 0.649411L60.2902 2.91941H60.2802Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M60.2812 2.91943C61.7312 3.65943 62.6512 5.41943 62.6512 7.90943V62.2594C62.6512 66.7294 59.6712 71.8594 56.0012 73.7294L11.3412 96.4894C9.71117 97.3194 8.22117 97.3594 7.07117 96.7694C5.62117 96.0294 4.70117 94.2694 4.70117 91.7794V37.4294C4.70117 32.9594 7.68117 27.8294 11.3512 25.9594L56.0112 3.19943C57.6412 2.36943 59.1312 2.32943 60.2812 2.91943Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M79.7705 11.5895C78.6105 10.9995 77.1205 11.0495 75.5005 11.8695L30.8405 34.6295C27.1705 36.4995 24.1905 41.6395 24.1905 46.0995V100.449C24.1905 102.939 25.1105 104.689 26.5605 105.439L22.1005 103.169C20.6505 102.429 19.7305 100.669 19.7305 98.1795V43.8295C19.7305 39.3595 22.7105 34.2295 26.3805 32.3595L71.0405 9.59946C72.6705 8.76946 74.1605 8.72946 75.3105 9.31946L79.7705 11.5895Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M79.7714 11.5895C81.2214 12.3295 82.1414 14.0895 82.1414 16.5795V70.9295C82.1414 75.3995 79.1614 80.5295 75.4914 82.3995L30.8314 105.159C29.2014 105.989 27.7114 106.029 26.5614 105.439C25.1114 104.699 24.1914 102.939 24.1914 100.449V46.0995C24.1914 41.6295 27.1714 36.4995 30.8414 34.6295L75.5014 11.8695C77.1314 11.0395 78.6214 10.9995 79.7714 11.5895Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M99.2607 20.1994C98.1007 19.6094 96.6107 19.6594 94.9907 20.4794L50.3307 43.2394C46.6607 45.1094 43.6807 50.2494 43.6807 54.7094V109.059C43.6807 111.549 44.6007 113.299 46.0507 114.049L41.5907 111.779C40.1407 111.039 39.2207 109.279 39.2207 106.789V52.4394C39.2207 47.9694 42.2007 42.8394 45.8707 40.9694L90.5307 18.2094C92.1607 17.3794 93.6507 17.3394 94.8007 17.9294L99.2607 20.1994Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.2616 20.1995C100.712 20.9395 101.632 22.6995 101.632 25.1895V79.5395C101.632 84.0095 98.6516 89.1395 94.9816 91.0095L50.3216 113.769C48.6916 114.599 47.2016 114.639 46.0516 114.049C44.6016 113.309 43.6816 111.549 43.6816 109.059V54.7095C43.6816 50.2395 46.6616 45.1095 50.3316 43.2395L94.9916 20.4795C96.6216 19.6495 98.1116 19.6095 99.2616 20.1995Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M85.8902 51.3394L81.9602 53.3394V51.7394C81.9602 49.0994 80.2002 47.8494 78.0302 48.9594L72.7802 51.6294C70.6102 52.7394 68.8502 55.7794 68.8502 58.4194V60.0194L64.9202 62.0194C62.7502 63.1294 60.9902 66.1694 60.9902 68.8094V84.7694C60.9902 87.4094 62.7502 88.6594 64.9202 87.5494L85.9002 76.8594C88.0702 75.7494 89.8302 72.7094 89.8302 70.0694V54.1094C89.8302 51.4694 88.0702 50.2194 85.9002 51.3294L85.8902 51.3394ZM71.4602 57.0894C71.4602 56.2094 72.0502 55.1894 72.7702 54.8294L78.0202 52.1594C78.7402 51.7894 79.3302 52.2094 79.3302 53.0894V54.6894L71.4602 58.6994V57.0994V57.0894ZM79.3302 57.8694V77.0194L71.4602 81.0294V61.8794L79.3302 57.8694ZM63.5902 83.4394V67.4794C63.5902 66.5994 64.1802 65.5794 64.9002 65.2194L68.8302 63.2194V82.3694L64.9002 84.3694C64.1802 84.7394 63.5902 84.3194 63.5902 83.4394ZM87.2002 71.4094C87.2002 72.2894 86.6102 73.3094 85.8902 73.6694L81.9602 75.6694V56.5194L85.8902 54.5194C86.6102 54.1494 87.2002 54.5694 87.2002 55.4494V71.4094Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx
new file mode 100644
index 0000000..58bea8e
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function SettingsHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="71"
+      height="80"
+      viewBox="0 0 71 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M41.6268 2.01787C40.8259 1.61053 39.7972 1.64524 38.6788 2.21137L7.8454 17.9247C5.31163 19.2158 3.25421 22.7646 3.25421 25.8438V63.3669C3.25421 65.086 3.88938 66.2943 4.89046 66.8121L1.8113 65.2449C0.810215 64.734 0.175049 63.5191 0.175049 61.8V24.2766C0.175049 21.1905 2.23246 17.6486 4.76624 16.3575L35.5996 0.644142C36.725 0.0711084 37.7536 0.0433035 38.5475 0.450641L41.6268 2.01787Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M41.6269 2.01863C42.6279 2.52953 43.2631 3.7448 43.2631 5.4639V42.9873C43.2631 46.0734 41.2057 49.615 38.6719 50.906L7.83855 66.6197C6.7132 67.1928 5.68448 67.2202 4.89052 66.8129C3.88944 66.302 3.25427 65.0867 3.25427 63.3676V25.8446C3.25427 22.7585 5.31169 19.2166 7.84546 17.9255L38.6788 2.21214C39.8042 1.6391 40.8329 1.6113 41.6269 2.01863Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.0829 7.96176C54.282 7.55442 53.2533 7.58913 52.1348 8.15526L21.3015 23.8686C18.7677 25.1597 16.7103 28.7085 16.7103 31.7877V69.3111C16.7103 71.0302 17.3455 72.2382 18.3466 72.756L15.2674 71.1888C14.2663 70.6779 13.6311 69.463 13.6311 67.7439V30.2205C13.6311 27.1344 15.6885 23.5925 18.2223 22.3014L49.0557 6.58804C50.181 6.015 51.2097 5.98754 52.0037 6.39487L55.0829 7.96176Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.0829 7.96089C56.084 8.47179 56.7192 9.68706 56.7192 11.4062V48.9296C56.7192 52.0157 54.6617 55.5572 52.128 56.8483L21.2946 72.562C20.1693 73.135 19.1406 73.1625 18.3467 72.7552C17.3456 72.2443 16.7103 71.0293 16.7103 69.3102V31.7868C16.7103 28.7007 18.7677 25.1588 21.3015 23.8678L52.1349 8.1544C53.2602 7.58136 54.289 7.55356 55.0829 7.96089Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M68.5387 13.9136C67.7378 13.5063 66.7091 13.541 65.5906 14.1071L34.7573 29.8205C32.2235 31.1116 30.1662 34.6604 30.1662 37.7396V75.263C30.1662 76.9821 30.8013 78.1901 31.8024 78.7079L28.7232 77.1407C27.7221 76.6298 27.0869 75.4148 27.0869 73.6957V36.1723C27.0869 33.0862 29.1443 29.5443 31.6781 28.2533L62.5115 12.5399C63.6368 11.9669 64.6655 11.9391 65.4595 12.3464L68.5387 13.9136Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.5386 13.9145C69.5397 14.4254 70.1749 15.6407 70.1749 17.3598V54.8832C70.1749 57.9693 68.1175 61.5108 65.5837 62.8019L34.7503 78.5156C33.625 79.0887 32.5963 79.1161 31.8024 78.7088C30.8013 78.1979 30.1661 76.983 30.1661 75.2639V37.7404C30.1661 34.6544 32.2235 31.1124 34.7572 29.8214L65.5906 14.108C66.716 13.535 67.7447 13.5072 68.5386 13.9145Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M50.4432 61.4762C50.3396 61.5315 50.236 61.5799 50.1324 61.6144C48.5928 62.222 47.3639 61.3519 47.2189 59.55C47.1913 59.1357 47.0256 58.8387 46.7563 58.7075C46.494 58.5695 46.1626 58.6112 45.8105 58.8252C45.6586 58.9149 45.5136 59.0391 45.3755 59.191C43.7393 60.9308 41.82 61.0273 41.0813 59.4256C40.4461 58.0448 40.888 55.7873 42.1445 54.0544C42.4345 53.654 42.6278 53.1982 42.683 52.7495C42.7383 52.3007 42.6692 51.9211 42.469 51.6795C42.3792 51.5759 42.2757 51.4999 42.1514 51.4516C41.4403 51.1961 40.9777 50.5195 40.8396 49.553C40.7016 48.5864 40.9017 47.4402 41.4057 46.3356C42.3033 44.3611 43.9671 42.9664 45.3686 43.0285C46.0245 43.0631 46.7978 42.3313 47.1015 41.3855C47.1637 41.1853 47.2051 40.9919 47.2189 40.7986C47.2189 40.764 47.219 40.7296 47.2259 40.6951C47.3225 39.6319 47.7299 38.5133 48.3789 37.533C49.0485 36.525 49.8908 35.7795 50.7469 35.4412C52.2865 34.8337 53.5154 35.7034 53.6604 37.5053C53.6949 37.9196 53.8537 38.2166 54.123 38.3478C54.3922 38.479 54.7236 38.4376 55.0688 38.2305C55.2207 38.1338 55.3657 38.0164 55.5038 37.8714C57.1331 36.1385 59.0593 36.0351 59.798 37.6368C60.4332 39.0176 59.9845 41.2751 58.7349 43.008C58.1411 43.8158 58.003 44.8789 58.4103 45.3829C58.5001 45.4865 58.6037 45.5623 58.728 45.6037C59.4391 45.8592 59.9016 46.5359 60.0466 47.4956C60.1847 48.4622 59.9914 49.6014 59.4874 50.713C58.5899 52.6944 56.926 54.0889 55.5176 54.0268C55.1931 54.0061 54.8409 54.1719 54.5165 54.4825C54.192 54.7932 53.9297 55.2142 53.7847 55.6698C53.7225 55.8701 53.6811 56.0703 53.6673 56.2568C53.5844 57.3545 53.1702 58.5076 52.5074 59.5156C51.9206 60.3993 51.2026 61.0827 50.4501 61.4624L50.4432 61.4762ZM45.9279 56.4088C46.6873 56.0222 47.4123 55.9737 47.9991 56.2706C48.6619 56.6089 49.0693 57.3475 49.1452 58.3623C49.2004 59.0735 49.6975 59.4259 50.3119 59.1842C50.6571 59.053 50.9954 58.7493 51.2647 58.3489C51.5339 57.9415 51.6997 57.4789 51.7273 57.0439C51.7618 56.5813 51.8584 56.0843 52.0172 55.5873C52.3831 54.4481 53.0321 53.3916 53.8399 52.6183C54.6546 51.8451 55.5314 51.4445 56.3116 51.486C56.8639 51.5067 57.5335 50.9477 57.8925 50.1537C58.0927 49.705 58.1756 49.2492 58.1204 48.8626C58.0652 48.476 57.8788 48.2066 57.5957 48.1031C57.2988 47.9995 57.0296 47.8131 56.8155 47.5438C55.7938 46.2873 56.1459 43.6499 57.6026 41.6616C58.0997 40.9781 58.2792 40.0739 58.0238 39.5216C57.7269 38.8795 56.9536 38.9209 56.3047 39.6113C55.9733 39.9703 55.6073 40.2739 55.2345 40.5087C54.3784 41.0403 53.5361 41.1438 52.8733 40.8124C52.2105 40.4741 51.8032 39.7353 51.7273 38.7274C51.6721 38.0093 51.1749 37.6642 50.5605 37.9058C49.8494 38.1751 49.2142 39.1488 49.1452 40.0532C49.1452 40.0808 49.1452 40.1082 49.1383 40.1358C49.0969 40.5846 49.0071 41.0404 48.8552 41.5099C48.1027 43.8641 46.1695 45.7004 44.554 45.6037C44.0017 45.583 43.332 46.1425 42.973 46.9296C42.7727 47.3784 42.6899 47.8338 42.7452 48.2204C42.8004 48.607 42.9868 48.8763 43.2699 48.9799C43.5667 49.0835 43.836 49.2701 44.05 49.5324C44.5471 50.14 44.7404 51.0857 44.5885 52.1973C44.4366 53.3088 43.9672 54.455 43.263 55.4147C42.7659 56.0982 42.5864 57.0023 42.8418 57.5546C43.1387 58.1967 43.9119 58.1554 44.5609 57.465C44.8923 57.1059 45.2582 56.8023 45.6379 56.5676C45.7346 56.5054 45.8312 56.45 45.9279 56.4017V56.4088Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M50.4363 53.2529C48.3029 54.3437 46.5631 53.115 46.5631 50.5122C46.5631 47.9093 48.3029 44.913 50.4363 43.8222C52.5696 42.7314 54.3094 43.9601 54.3094 46.5629C54.3094 49.1657 52.5696 52.162 50.4363 53.2529ZM50.4363 46.1833C49.3661 46.7287 48.4962 48.2268 48.4962 49.5248C48.4962 50.8227 49.3661 51.4372 50.4363 50.8917C51.5064 50.3463 52.3762 48.8483 52.3762 47.5503C52.3762 46.2524 51.5064 45.6379 50.4363 46.1833Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx
new file mode 100644
index 0000000..a4cdc80
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function StateHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="72"
+      height="81"
+      viewBox="0 0 72 81"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M41.5768 1.96789C40.776 1.56055 39.7473 1.59509 38.6288 2.16123L7.7954 17.8747C5.26161 19.1658 3.20422 22.7145 3.20422 25.7937V63.3172C3.20422 65.0363 3.83936 66.2445 4.84045 66.7623L1.76125 65.195C0.760168 64.6841 0.125 63.469 0.125 61.7499V24.2265C0.125 21.1404 2.1824 17.5986 4.71618 16.3076L35.5496 0.593996C36.675 0.0209607 37.7037 -0.00667566 38.4976 0.400663L41.5768 1.96789Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M41.5769 1.9678C42.578 2.4787 43.2132 3.6938 43.2132 5.41291V42.9363C43.2132 46.0224 41.1557 49.5642 38.622 50.8552L7.78855 66.5688C6.6632 67.1419 5.63448 67.1695 4.84052 66.7622C3.83943 66.2513 3.20428 65.0362 3.20428 63.3171V25.7936C3.20428 22.7075 5.26168 19.1657 7.79546 17.8746L38.6289 2.16113C39.7542 1.5881 40.7829 1.56046 41.5769 1.9678Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.0328 7.91223C54.2319 7.50489 53.2032 7.53943 52.0847 8.10556L21.2513 23.8192C18.7175 25.1102 16.6601 28.6589 16.6601 31.7381V69.2615C16.6601 70.9806 17.2953 72.1888 18.2964 72.7066L15.2172 71.1394C14.2161 70.6285 13.5809 69.4134 13.5809 67.6943V30.1708C13.5809 27.0847 15.6383 23.543 18.1721 22.2519L49.0055 6.53833C50.1309 5.9653 51.1596 5.93766 51.9536 6.345L55.0328 7.91223Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.0328 7.91214C56.0339 8.42304 56.6691 9.63814 56.6691 11.3572V48.8807C56.6691 51.9668 54.6117 55.5085 52.0779 56.7996L21.2444 72.5132C20.1191 73.0862 19.0904 73.1138 18.2965 72.7065C17.2954 72.1956 16.6602 70.9805 16.6602 69.2614V31.738C16.6602 28.6519 18.7176 25.1101 21.2514 23.8191L52.0848 8.10547C53.2101 7.53244 54.2388 7.5048 55.0328 7.91214Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M68.4888 13.8636C67.6879 13.4563 66.6592 13.4908 65.5408 14.057L34.7073 29.7706C32.1735 31.0616 30.1161 34.6103 30.1161 37.6895V75.2129C30.1161 76.932 30.7513 78.1402 31.7524 78.658L28.6732 77.0908C27.6721 76.5799 27.0369 75.3648 27.0369 73.6457V36.1223C27.0369 33.0361 29.0943 29.4944 31.6281 28.2033L62.4615 12.4897C63.5869 11.9167 64.6156 11.8891 65.4096 12.2964L68.4888 13.8636Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.4888 13.8636C69.4899 14.3745 70.1251 15.5896 70.1251 17.3087V54.8321C70.1251 57.9182 68.0677 61.4599 65.5339 62.751L34.7005 78.4646C33.5751 79.0376 32.5464 79.0653 31.7525 78.6579C30.7514 78.147 30.1162 76.9319 30.1162 75.2128V37.6894C30.1162 34.6033 32.1736 31.0615 34.7074 29.7705L65.5408 14.0569C66.6662 13.4839 67.6949 13.4562 68.4888 13.8636Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M51.1114 32.8219C44.3661 36.2601 38.905 45.6979 38.905 53.8999C38.905 62.1019 44.373 65.9682 51.1114 62.5369C57.8566 59.0987 63.3177 49.6609 63.3177 41.4589C63.3177 33.2569 57.8497 29.3906 51.1114 32.8219ZM46.0852 53.5065L43.9381 56.0057C43.3236 54.9287 42.9784 53.5133 42.9784 51.8287C42.9784 50.1441 43.3236 48.3698 43.9381 46.6714L46.0852 46.9821C45.6572 48.1696 45.4155 49.4054 45.4155 50.5929C45.4155 51.7804 45.6572 52.7607 46.0852 53.5202V53.5065ZM51.1114 57.5798C49.7236 58.284 48.4188 58.5325 47.2727 58.3737L48.4257 55.1703C49.2265 55.2807 50.131 55.1151 51.1114 54.618C52.0917 54.1209 53.0031 53.3614 53.797 52.4363L54.95 54.466C53.8108 55.7916 52.4991 56.8825 51.1114 57.5867V57.5798ZM53.797 40.1885C53.0031 40.0781 52.0917 40.2437 51.1114 40.7408C50.131 41.2379 49.2265 41.9974 48.4257 42.9225L47.2727 40.8928C48.4119 39.5672 49.7236 38.4763 51.1114 37.7721C52.4991 37.0679 53.8039 36.8193 54.95 36.9781L53.797 40.1816V40.1885ZM58.2984 48.6874L56.1444 48.3836C56.5724 47.1961 56.8141 45.9603 56.8141 44.7728C56.8141 43.5853 56.5724 42.5981 56.1444 41.8455L58.2984 39.3463C58.906 40.4233 59.2581 41.8386 59.2581 43.5301C59.2581 45.2147 58.9129 46.989 58.2984 48.6874Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx
new file mode 100644
index 0000000..13caf10
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function TemplateHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M47.6283 2.38547C46.7129 1.91347 45.5371 1.95349 44.2588 2.60949L9.01704 20.8175C6.12099 22.3135 3.76943 26.4255 3.76943 29.9935V73.4734C3.76943 75.4654 4.49542 76.8654 5.63964 77.4654L2.12019 75.6494C0.975979 75.0574 0.25 73.6494 0.25 71.6574V28.1774C0.25 24.6014 2.60155 20.4975 5.49759 19.0015L40.7393 0.793477C42.0256 0.129478 43.2014 0.0975032 44.1088 0.569503L47.6283 2.38547Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M47.6284 2.3851C48.7726 2.97709 49.4986 4.38509 49.4986 6.37708V49.8571C49.4986 53.4331 47.147 57.537 44.251 59.033L9.00923 77.241C7.72298 77.905 6.54721 77.9371 5.63973 77.4651C4.49552 76.8731 3.76953 75.4651 3.76953 73.4731V29.9931C3.76953 26.4171 6.12109 22.3131 9.01713 20.8171L44.2589 2.60912C45.5451 1.94512 46.7209 1.9131 47.6284 2.3851Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M63.0087 9.32146C62.0933 8.84946 60.9175 8.88944 59.6391 9.54544L24.3974 27.7534C21.5014 29.2494 19.1498 33.3614 19.1498 36.9294V80.4094C19.1498 82.4014 19.8758 83.8014 21.02 84.4014L17.5006 82.5854C16.3564 81.9934 15.6304 80.5854 15.6304 78.5934V35.1134C15.6304 31.5374 17.9819 27.4334 20.878 25.9374L56.1197 7.72942C57.406 7.06542 58.5817 7.03345 59.4892 7.50545L63.0087 9.32146Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M63.0083 9.32185C64.1525 9.91385 64.8785 11.3218 64.8785 13.3138V56.7938C64.8785 60.3698 62.5269 64.4738 59.6309 65.9698L24.3891 84.1777C23.1029 84.8417 21.9271 84.8738 21.0196 84.4018C19.8754 83.8098 19.1494 82.4018 19.1494 80.4098V36.9298C19.1494 33.3538 21.501 29.2498 24.397 27.7538L59.6388 9.54583C60.925 8.88183 62.1008 8.84985 63.0083 9.32185Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M78.3797 16.2097C77.4644 15.7377 76.2886 15.7777 75.0102 16.4337L39.7685 34.6417C36.8725 36.1377 34.5209 40.2497 34.5209 43.8177V87.2976C34.5209 89.2896 35.2469 90.6896 36.3911 91.2896L32.8717 89.4737C31.7274 88.8817 31.0015 87.4736 31.0015 85.4816V42.0017C31.0015 38.4257 33.353 34.3217 36.2491 32.8257L71.4908 14.6177C72.7771 13.9537 73.9528 13.9217 74.8603 14.3937L78.3797 16.2097Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.3798 16.2093C79.5241 16.8013 80.25 18.2093 80.25 20.2013V63.6813C80.25 67.2573 77.8985 71.3613 75.0024 72.8573L39.7607 91.0653C38.4744 91.7293 37.2987 91.7613 36.3912 91.2893C35.247 90.6973 34.521 89.2893 34.521 87.2973V43.8173C34.521 40.2413 36.8726 36.1373 39.7686 34.6413L75.0103 16.4333C76.2966 15.7693 77.4724 15.7373 78.3798 16.2093Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M59.134 41.369L55.4489 50.497L62.7798 46.713L59.134 41.377V41.369ZM59.063 38.185C59.4023 37.993 59.7338 37.913 60.0336 37.953C60.3335 37.993 60.586 38.145 60.7675 38.393L60.7833 38.409L65.0287 44.617C65.2181 44.873 65.3365 45.225 65.3523 45.633C65.3759 46.057 65.297 46.537 65.1392 47.009C64.9735 47.481 64.7288 47.937 64.4211 48.329C64.1133 48.713 63.7661 49.017 63.411 49.201L54.8965 53.601C54.5493 53.793 54.2021 53.873 53.9022 53.825C53.5866 53.777 53.3183 53.601 53.1447 53.305C52.9632 53.017 52.8764 52.625 52.8843 52.177C52.8922 51.729 53.0026 51.249 53.192 50.777L57.4611 40.209C57.6268 39.777 57.8557 39.369 58.1319 39.017C58.416 38.649 58.7474 38.361 59.0867 38.169L59.063 38.185Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.6289 63.0411C47.6289 61.4731 48.6548 59.6732 49.9252 59.0172L55.67 56.0492C56.9404 55.3932 57.9663 56.1292 57.9663 57.6971V64.7851C57.9663 66.3531 56.9404 68.1532 55.67 68.8092L49.9252 71.7771C48.6548 72.4331 47.6289 71.6971 47.6289 70.1291V63.0411ZM55.67 58.8811L49.9252 61.8491V68.9371L55.67 65.9692V58.8811Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M65.4387 53.8327C63.8526 54.6487 62.5663 56.9047 62.5663 58.8647C62.5663 60.8247 63.8526 61.7447 65.4387 60.9287C67.0248 60.1127 68.3111 57.8567 68.3111 55.8967C68.3111 53.9367 67.0248 53.0167 65.4387 53.8327ZM60.27 60.0487C60.27 56.5287 62.5821 52.4727 65.4387 50.9927C68.2953 49.5207 70.6074 51.1767 70.6074 54.7047C70.6074 58.2247 68.2953 62.2807 65.4387 63.7607C62.5821 65.2327 60.27 63.5767 60.27 60.0487Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx
new file mode 100644
index 0000000..4b02f7a
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function TokenHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M47.6235 2.3563C46.7082 1.89077 45.5326 1.93022 44.2543 2.57724L9.01615 20.5358C6.1204 22.0113 3.76908 26.067 3.76908 29.5862V72.4706C3.76908 74.4353 4.49499 75.8161 5.63909 76.4079L2.12001 74.6168C0.97591 74.0329 0.25 72.6442 0.25 70.6795V27.795C0.25 24.268 2.60132 20.2202 5.49706 18.7447L40.7431 0.78611C42.0293 0.131205 43.2049 0.0996434 44.1123 0.565178L47.6314 2.3563H47.6235Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M47.6235 2.35583C48.7676 2.93972 49.4935 4.32843 49.4935 6.29315V49.1776C49.4935 52.7046 47.1422 56.7524 44.2465 58.2279L9.00828 76.1865C7.72216 76.8414 6.5465 76.873 5.63911 76.4075C4.49501 75.8236 3.7691 74.4348 3.7691 72.4701V29.5857C3.7691 26.0587 6.12042 22.0109 9.01617 20.5354L44.2544 2.57676C45.5405 1.92185 46.7161 1.89029 47.6235 2.35583Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M63.0017 9.1959C62.0865 8.73037 60.9108 8.76982 59.6326 9.41684L24.3944 27.3754C21.4986 28.851 19.1473 32.9066 19.1473 36.4258V79.3102C19.1473 81.2749 19.8732 82.6558 21.0173 83.2475L17.4982 81.4564C16.3541 80.8725 15.6282 79.4838 15.6282 77.5191V34.6346C15.6282 31.1076 17.9796 27.0598 20.8753 25.5843L56.1135 7.62571C57.3996 6.9708 58.5753 6.93924 59.4826 7.40478L63.0017 9.1959Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M63.0018 9.19543C64.1458 9.77932 64.8718 11.168 64.8718 13.1327V56.0172C64.8718 59.5442 62.5204 63.592 59.6247 65.0675L24.3865 83.0261C23.1004 83.681 21.9247 83.7126 21.0173 83.2471C19.8732 82.6632 19.1473 81.2744 19.1473 79.3097V36.4253C19.1473 32.8983 21.4987 28.8505 24.3944 27.375L59.6326 9.41636C60.9187 8.76145 62.0944 8.72989 63.0018 9.19543Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M78.38 15.9911C77.4647 15.5255 76.289 15.565 75.0108 16.212L39.7726 34.1706C36.8769 35.6461 34.5256 39.7018 34.5256 43.2209V86.1054C34.5256 88.0701 35.2515 89.4509 36.3956 90.0427L32.8765 88.2516C31.7324 87.6677 31.0065 86.279 31.0065 84.3142V41.4298C31.0065 37.9028 33.3578 33.855 36.2535 32.3795L71.4917 14.4209C72.7778 13.766 73.9535 13.7344 74.8609 14.1999L78.38 15.9911Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.38 15.9905C79.5241 16.5744 80.25 17.9631 80.25 19.9278V62.8122C80.25 66.3393 77.8987 70.3871 75.0029 71.8626L39.7647 89.8212C38.4786 90.4761 37.303 90.5076 36.3956 90.0421C35.2515 89.4582 34.5256 88.0695 34.5256 86.1048V43.2203C34.5256 39.6933 36.8769 35.6455 39.7726 34.17L75.0108 16.2114C76.2969 15.5565 77.4726 15.5249 78.38 15.9905Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M53.1704 71.7917L50.18 73.3146C49.0832 73.8748 48.1837 73.2436 48.1837 71.9022V69.2668C48.1837 68.2884 48.4993 67.2153 49.0595 66.2448L55.4349 55.2376C55.072 53.699 55.1351 51.829 55.6164 49.8958C56.9735 44.4672 61.2501 39.7724 65.1479 39.441C67.0337 39.2832 68.5565 40.1511 69.4245 41.9028C70.2924 43.6466 70.4108 46.0611 69.7559 48.6886C68.4697 53.841 64.564 58.3228 60.8398 59.0566L60.4453 59.7273C59.8772 60.7057 59.1276 61.4632 58.3307 61.8735L58.1571 61.9603V63.1754C58.1571 64.5168 57.2655 66.0633 56.1608 66.6235L55.1666 67.1285V68.3436C55.1666 69.685 54.275 71.2315 53.1704 71.7917ZM62.694 42.613C60.4216 43.7728 58.2912 46.5818 57.5101 49.738C57.1077 51.3634 57.1077 52.9178 57.5101 54.133C57.6363 54.5117 57.5416 55.0404 57.2734 55.5138L50.4719 67.2469C50.2825 67.5704 50.18 67.9333 50.18 68.2568V70.8922L53.1704 69.3694V68.1543C53.1704 66.8129 54.062 65.2664 55.1666 64.7061L56.1608 64.2012V62.986C56.1608 61.6447 57.0524 60.0981 58.1571 59.5379L58.3307 59.4511C58.5911 59.317 58.8514 59.0566 59.0329 58.7331L59.8456 57.3286C60.1139 56.8631 60.5163 56.5474 60.8792 56.5159C63.7355 56.2713 66.868 52.8311 67.8622 48.8464C68.3435 46.9132 68.2567 45.1458 67.6176 43.8675C66.9785 42.5893 65.8659 41.9423 64.4851 42.0685C63.8933 42.1159 63.2858 42.3052 62.6861 42.613H62.694Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M63.6488 47.0309C63.9249 46.8889 64.1459 47.0467 64.1459 47.386C64.1459 47.7253 63.9249 48.104 63.6488 48.246C63.3726 48.3881 63.1517 48.2303 63.1517 47.891C63.1517 47.5517 63.3726 47.1729 63.6488 47.0309Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M63.6487 49.4605C62.8202 49.8787 62.1495 49.4053 62.1495 48.4032C62.1495 47.4011 62.8202 46.2413 63.6487 45.8231C64.4772 45.4049 65.1479 45.8783 65.1479 46.8804C65.1479 47.8825 64.4772 49.0424 63.6487 49.4605ZM63.6487 47.0303C63.3725 47.1723 63.1516 47.559 63.1516 47.8904C63.1516 48.2217 63.3725 48.3796 63.6487 48.2454C63.9249 48.1113 64.1458 47.7168 64.1458 47.3854C64.1458 47.054 63.9249 46.8962 63.6487 47.0303Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx
new file mode 100644
index 0000000..5881649
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function UnknownHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="71"
+      height="80"
+      viewBox="0 0 71 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M41.6309 2.01885C40.8299 1.61147 39.8011 1.64599 38.6826 2.21218L7.84613 17.9273C5.3121 19.2185 3.2545 22.7675 3.2545 25.847V63.3741C3.2545 65.0934 3.88973 66.3017 4.89092 66.8196L1.81142 65.2522C0.810239 64.7412 0.174988 63.526 0.174988 61.8067V24.2796C0.174988 21.1932 2.23261 17.6511 4.76664 16.3599L35.6031 0.644812C36.7285 0.071721 37.7573 0.0441004 38.5514 0.451478L41.6309 2.01885Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M41.6309 2.01984C42.6321 2.53079 43.2674 3.74602 43.2674 5.46529V42.9924C43.2674 46.0788 41.2098 49.6209 38.6757 50.9121L7.83929 66.6272C6.71383 67.2003 5.68503 67.2279 4.89099 66.8205C3.88981 66.3096 3.25458 65.0944 3.25458 63.3751V25.848C3.25458 22.7616 5.31218 19.2195 7.84621 17.9283L38.6826 2.21317C39.8081 1.64008 40.8369 1.61246 41.6309 2.01984Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.0813 7.99932C54.2804 7.59194 53.2516 7.62646 52.133 8.19265L21.2966 23.9078C18.7625 25.1989 16.7049 28.748 16.7049 31.8275V69.3546C16.7049 71.0738 17.3402 72.2822 18.3414 72.8L15.2618 71.2327C14.2607 70.7217 13.6254 69.5065 13.6254 67.7872V30.2601C13.6254 27.1737 15.683 23.6316 18.2171 22.3404L49.0535 6.62528C50.179 6.05219 51.2078 6.02457 52.0018 6.43195L55.0813 7.99932Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.0813 8.00031C56.0825 8.51126 56.7177 9.72649 56.7177 11.4458V48.9729C56.7177 52.0593 54.6601 55.6014 52.1261 56.8926L21.2896 72.6077C20.1642 73.1808 19.1354 73.2084 18.3413 72.801C17.3401 72.2901 16.7049 71.0748 16.7049 69.3556V31.8285C16.7049 28.7421 18.7625 25.1999 21.2965 23.9088L52.133 8.19364C53.2584 7.62055 54.2872 7.59293 55.0813 8.00031Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M68.5386 13.9505C67.7376 13.5431 66.7089 13.5776 65.5903 14.1438L34.7538 29.8589C32.2198 31.1501 30.1622 34.6991 30.1622 37.7786V75.3057C30.1622 77.025 30.7974 78.2333 31.7986 78.7512L28.7191 77.1838C27.718 76.6729 27.0827 75.4576 27.0827 73.7384V36.2113C27.0827 33.1249 29.1403 29.5828 31.6744 28.2916L62.5108 12.5765C63.6362 12.0034 64.6651 11.9757 65.4591 12.3831L68.5386 13.9505Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.5386 13.9515C69.5398 14.4624 70.175 15.6777 70.175 17.3969V54.924C70.175 58.0104 68.1174 61.5526 65.5834 62.8437L34.7469 78.5589C33.6215 79.132 32.5927 79.1596 31.7986 78.7522C30.7975 78.2412 30.1622 77.026 30.1622 75.3067V37.7796C30.1622 34.6932 32.2198 31.1511 34.7539 29.8599L65.5903 14.1448C66.7158 13.5717 67.7446 13.5441 68.5386 13.9515Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M51.1524 53.1343C50.6553 53.3898 50.2548 53.1067 50.2548 52.506C50.2548 51.9053 50.6484 51.2148 51.1455 50.9593H51.1524C51.6496 50.7038 52.0501 50.9869 52.0501 51.5876C52.0501 52.1884 51.6496 52.8788 51.1524 53.1343Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M56.5244 55.8546L45.7738 61.33C44.2892 62.0826 43.0878 61.2333 43.0878 59.4312V41.9899C43.0878 40.1878 44.2961 38.1026 45.7738 37.35L53.8384 33.2417C54.0732 33.1174 54.3011 33.1174 54.4737 33.2417L58.9548 36.4109C59.1206 36.5283 59.2172 36.7562 59.2172 37.0461V51.2146C59.2172 53.0167 58.0089 55.102 56.5313 55.8546H56.5244ZM45.7738 39.5249C45.2766 39.7735 44.8761 40.4709 44.8761 41.0716V58.5129C44.8761 59.1136 45.2766 59.3967 45.7738 59.1481L56.5244 53.6727C57.0215 53.4241 57.422 52.7267 57.422 52.126V38.4064L53.4656 35.61L45.7738 39.5318V39.5249Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M51.0766 48.8175C50.7037 49.0108 50.3516 48.9003 50.2273 48.5068C50.0685 48.0165 50.324 47.2708 50.7935 46.8427C51.3321 46.3456 52.8718 44.6747 52.8718 43.5492C52.8718 42.6516 52.3885 42.0785 51.6911 42.1268C51.2423 42.1613 50.7521 42.4306 50.324 42.9001C49.889 43.3697 49.5645 43.9704 49.3987 44.6056C49.2261 45.2616 48.7152 45.807 48.2526 45.8416C47.7899 45.8761 47.5483 45.372 47.714 44.7161C48.3907 42.113 50.4483 39.8897 52.3056 39.7654C53.7073 39.6687 54.6532 40.8218 54.667 42.6309C54.667 45.5239 51.7049 48.3134 51.3666 48.6242C51.2699 48.7139 51.1802 48.7761 51.0835 48.8244L51.0766 48.8175Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx
new file mode 100644
index 0000000..4dc1440
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function UpdateHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="72"
+      height="81"
+      viewBox="0 0 72 81"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M42.4559 2.91759C41.655 2.51021 40.6262 2.54473 39.5076 3.11092L8.67113 18.8261C6.1371 20.1172 4.0795 23.6663 4.0795 26.7458V64.2729C4.0795 65.9922 4.71473 67.2005 5.71591 67.7184L2.63642 66.151C1.63523 65.6401 1 64.4248 1 62.7055V25.1784C1 22.092 3.0576 18.5499 5.59163 17.2587L36.4281 1.54355C37.5536 0.970462 38.5824 0.942844 39.3764 1.35022L42.4559 2.91759Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M42.4558 2.91754C43.457 3.42849 44.0922 4.64374 44.0922 6.36301V43.8901C44.0922 46.9766 42.0346 50.5187 39.5005 51.8099L8.66409 67.525C7.53862 68.0981 6.5098 68.1257 5.71576 67.7183C4.71458 67.2074 4.07935 65.9922 4.07935 64.2729V26.7457C4.07935 23.6593 6.13695 20.1172 8.67098 18.826L39.5075 3.11088C40.6329 2.53778 41.6617 2.51017 42.4558 2.91754Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.9132 8.904C55.1123 8.49662 54.0835 8.53114 52.9649 9.09733L22.1284 24.8125C19.5944 26.1036 17.5368 29.6527 17.5368 32.7322V70.2593C17.5368 71.9786 18.172 73.1869 19.1732 73.7048L16.0937 72.1374C15.0925 71.6265 14.4573 70.4112 14.4573 68.692V31.1648C14.4573 28.0784 16.5149 24.5363 19.0489 23.2451L49.8854 7.52994C51.0109 6.95685 52.0397 6.92923 52.8337 7.33661L55.9132 8.904Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.913 8.90393C56.9142 9.41488 57.5495 10.6301 57.5495 12.3494V49.8765C57.5495 52.9629 55.4918 56.5051 52.9578 57.7962L22.1213 73.5114C20.9959 74.0845 19.9671 74.1121 19.173 73.7047C18.1719 73.1938 17.5366 71.9785 17.5366 70.2593V32.7321C17.5366 29.6457 19.5942 26.1036 22.1283 24.8124L52.9647 9.09726C54.0902 8.52417 55.119 8.49655 55.913 8.90393Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M69.3636 14.8489C68.5627 14.4415 67.5339 14.476 66.4153 15.0422L35.5788 30.7573C33.0448 32.0485 30.9872 35.5975 30.9872 38.6771V76.2042C30.9872 77.9235 31.6225 79.1318 32.6236 79.6497L29.5441 78.0823C28.5429 77.5713 27.9077 76.3561 27.9077 74.6368V37.1097C27.9077 34.0233 29.9653 30.4812 32.4994 29.19L63.3358 13.4748C64.4613 12.9017 65.4901 12.8741 66.2842 13.2815L69.3636 14.8489Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M69.3635 14.8489C70.3646 15.3598 70.9999 16.5751 70.9999 18.2943V55.8215C70.9999 58.9079 68.9423 62.45 66.4083 63.7412L35.5718 79.4563C34.4463 80.0294 33.4175 80.0571 32.6235 79.6497C31.6223 79.1387 30.9871 77.9235 30.9871 76.2042V38.6771C30.9871 35.5907 33.0446 32.0485 35.5787 30.7574L66.4152 15.0422C67.5406 14.4691 68.5694 14.4415 69.3635 14.8489Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.6497 44.3459C51.1699 39.1121 55.1125 34.5688 59.5454 32.3109C59.9113 32.1245 60.2013 32.3317 60.2013 32.7736C60.2013 38.1661 58.1161 44.0213 54.8708 48.7442C55.3887 52.4037 53.1861 57.2163 49.9616 59.4879C49.6509 59.702 49.3402 59.8953 49.0295 60.0541C48.6635 60.2405 48.3735 60.0334 48.3735 59.5915V55.1863C47.5242 54.7996 46.7509 54.2541 46.0812 53.5637L42.4631 55.4072C42.0971 55.5937 41.8071 55.3865 41.8071 54.9446C41.8071 50.9675 44.4516 46.3966 47.7176 44.7325C48.0283 44.5737 48.339 44.4425 48.6497 44.3459ZM53.628 40.9211C52.5371 41.4735 51.6602 42.9994 51.6602 44.3251C51.6602 45.6509 52.544 46.2723 53.628 45.7199C54.712 45.1675 55.5958 43.6416 55.5958 42.3159C55.5958 40.9902 54.712 40.3687 53.628 40.9211Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <path
+        d="M45.0936 56.4499C45.3835 56.0356 45.4457 55.5039 45.2247 55.2622C45.0107 55.0206 44.5964 55.1587 44.3064 55.566C42.9393 57.5063 42.2419 59.916 42.5112 61.8355C42.5526 62.1601 42.7736 62.312 43.0567 62.2222C44.7414 61.6836 46.44 59.9782 47.455 57.7963C47.6759 57.3337 47.6207 56.8572 47.3376 56.7329C47.0476 56.6087 46.6402 56.8849 46.4192 57.3475C46.4192 57.3544 46.4123 57.3682 46.4054 57.3751C45.784 58.7077 44.8104 59.7986 43.7678 60.3303C43.7678 59.0184 44.2857 57.5891 45.0936 56.4499Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx
new file mode 100644
index 0000000..52ae902
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function WebhookHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="91"
+      viewBox="0 0 81 91"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M47.6236 2.35609C46.7083 1.89056 45.5326 1.93023 44.2544 2.57724L9.01615 20.5355C6.1204 22.011 3.76906 26.0669 3.76906 29.586V72.4698C3.76906 74.4345 4.49496 75.8155 5.63906 76.4073L2.12 74.6161C0.975907 74.0323 0.25 72.6434 0.25 70.6787V27.7948C0.25 24.2678 2.60134 20.2199 5.49709 18.7444L40.7353 0.786111C42.0215 0.13121 43.197 0.0994328 44.1044 0.564965L47.6236 2.35609Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M47.6236 2.35598C48.7677 2.93987 49.4936 4.32876 49.4936 6.29346V49.1773C49.4936 52.7043 47.1422 56.7522 44.2465 58.2277L9.00823 76.1864C7.72211 76.8413 6.54644 76.8727 5.63905 76.4072C4.49495 75.8233 3.76904 74.4344 3.76904 72.4697V29.5858C3.76904 26.0588 6.12038 22.0109 9.01613 20.5354L44.2544 2.57713C45.5405 1.92223 46.7162 1.89045 47.6236 2.35598Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M63.0015 9.15102C62.0862 8.68548 60.9106 8.72515 59.6323 9.37216L24.3941 27.3305C21.4983 28.806 19.147 32.8618 19.147 36.3809V79.2651C19.147 81.2298 19.8729 82.6104 21.017 83.2022L17.4979 81.4111C16.3538 80.8272 15.6279 79.4387 15.6279 77.474V34.5898C15.6279 31.0628 17.9793 27.0148 20.875 25.5393L56.1133 7.58103C57.3994 6.92613 58.575 6.89435 59.4824 7.35989L63.0015 9.15102Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M63.002 9.14895C64.1461 9.73284 64.872 11.1217 64.872 13.0864V55.9707C64.872 59.4977 62.5207 63.5452 59.6249 65.0207L24.3867 82.9794C23.1005 83.6343 21.9249 83.6657 21.0175 83.2001C19.8734 82.6162 19.1475 81.2277 19.1475 79.263V36.3788C19.1475 32.8518 21.4988 28.8039 24.3946 27.3284L59.6328 9.37009C60.9189 8.71519 62.0946 8.68342 63.002 9.14895Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M78.3804 15.9441C77.4651 15.4786 76.2895 15.5179 75.0112 16.1649L39.773 34.1236C36.8772 35.5991 34.5259 39.6545 34.5259 43.1736V86.0579C34.5259 88.0226 35.2519 89.4035 36.396 89.9953L32.8768 88.2042C31.7327 87.6203 31.0068 86.2314 31.0068 84.2667V41.3825C31.0068 37.8555 33.3582 33.808 36.2539 32.3325L71.4922 14.3738C72.7783 13.7189 73.954 13.6875 74.8614 14.153L78.3804 15.9441Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.3799 15.944C79.524 16.5279 80.2499 17.9164 80.2499 19.8811V62.7654C80.2499 66.2924 77.8986 70.3403 75.0028 71.8158L39.7646 89.7741C38.4785 90.429 37.3029 90.4607 36.3955 89.9952C35.2514 89.4113 34.5254 88.0224 34.5254 86.0577V43.1735C34.5254 39.6465 36.8767 35.599 39.7725 34.1235L75.0107 16.1648C76.2969 15.5099 77.4725 15.4785 78.3799 15.944Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M58.1968 43.8595C58.6939 43.2756 59.3094 43.1493 59.625 43.5517L59.6802 43.6388L63.1046 49.5168L63.1598 49.5958C63.4675 49.9746 64.2172 49.943 65.2824 49.3986L65.5506 49.2722C66.8999 48.6646 68.1859 48.7042 69.1486 49.3828C70.1743 50.1087 70.7503 51.5054 70.7503 53.2729C70.7503 55.0403 70.1743 57.0208 69.1486 58.7961C68.1228 60.5636 66.7342 61.9757 65.2824 62.7174C64.6748 63.0251 64.1856 62.678 64.1856 61.9442C64.1856 61.2104 64.6748 60.366 65.2824 60.0583C66.1503 59.6164 66.9866 58.7722 67.6021 57.707C68.2175 56.6418 68.5647 55.4505 68.5647 54.3932C68.5647 53.3359 68.2175 52.4996 67.6021 52.0577C67.0655 51.679 66.3554 51.6317 65.6058 51.9236L65.2824 52.0735C64.0515 52.7047 62.1893 53.2727 61.2661 51.9156L61.1793 51.7815L57.755 45.903L57.7076 45.8005C57.4945 45.2876 57.6919 44.4513 58.189 43.8753L58.1968 43.8595ZM47.5448 61.6128C47.8841 60.9027 48.5075 60.4373 48.9888 60.5557C49.5017 60.6819 49.6595 61.4156 49.3438 62.2046L49.2413 62.4809C49.0124 63.12 48.8941 63.7904 48.8862 64.4138C48.8862 65.2975 49.1308 66.0395 49.5806 66.505C50.0303 66.9785 50.6616 67.1518 51.3717 67.0097C52.0818 66.8598 52.8314 66.4024 53.5021 65.7002C54.1727 64.998 54.7172 64.0984 55.0643 63.1358V63.1119C55.6798 61.455 56.8949 58.9695 58.7413 58.0306L65.2903 54.693L65.4006 54.6456C65.953 54.4325 66.3791 54.7798 66.3791 55.4662C66.3791 56.1527 65.9451 56.9418 65.4006 57.2889L65.2903 57.3521L58.7413 60.6897C58.1889 60.9738 57.5341 61.9362 56.9896 63.4275C56.4136 65.0213 55.5062 66.5206 54.3937 67.6805C53.2811 68.8483 52.0266 69.6217 50.8509 69.8584C49.6674 70.103 48.6179 69.8032 47.8684 69.022C47.1188 68.233 46.7085 67.0021 46.7085 65.5187V65.5029L46.7243 65.061C46.7874 64.0195 47.0399 62.8831 47.4896 61.7627L47.5527 61.6206L47.5448 61.6128ZM58.0232 38.5177C58.7491 38.0285 59.4829 37.7128 60.1851 37.5865C60.8874 37.4603 61.5502 37.5313 62.1262 37.7838C62.6312 38.0047 63.0573 38.3679 63.3966 38.8571L63.5306 39.0702L63.6175 39.2752C63.7674 39.788 63.5623 40.5534 63.1046 41.0979C62.6391 41.6423 62.0788 41.7922 61.7474 41.4924L61.6212 41.3344L61.4477 41.0821C61.2583 40.8533 61.0373 40.6717 60.7769 40.5612C60.4297 40.4113 60.0353 40.364 59.6171 40.4429C59.191 40.5218 58.757 40.7035 58.323 40.9954C57.8891 41.2873 57.4709 41.6737 57.0922 42.1393C56.7135 42.6048 56.3821 43.1336 56.1217 43.6938C55.8613 44.2541 55.6719 44.8379 55.5693 45.406C55.4667 45.9741 55.451 46.5186 55.522 47.0157C55.593 47.5049 55.7429 47.9229 55.9717 48.2543C56.3426 48.7672 56.6976 49.446 56.8555 50.2824C57.0211 51.1267 57.0054 52.2076 56.5556 53.4385L53.1312 62.8754L53.076 63.0253C52.7603 63.7433 52.1528 64.2401 51.6557 64.1691C51.1271 64.0902 50.9298 63.3801 51.2138 62.5911L54.6383 53.1542L54.6777 53.0124C54.7724 52.6968 54.7961 52.3336 54.7172 51.9391C54.6462 51.5919 54.5121 51.2528 54.3306 50.9451L54.1333 50.6453C54.1333 50.6453 54.1333 50.6295 54.1254 50.6295C53.7388 50.0772 53.4784 49.3669 53.3601 48.5463C53.2417 47.7257 53.2733 46.8184 53.4469 45.8637C53.6205 44.909 53.936 43.9384 54.37 43.0073C54.8039 42.0762 55.3563 41.1927 55.9796 40.4194C56.6109 39.6462 57.3052 38.999 58.0311 38.5177H58.0232Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx
new file mode 100644
index 0000000..8548bf0
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/work-item.tsx
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function WorkItemHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="71"
+      height="80"
+      viewBox="0 0 71 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M41.6017 1.99291C40.8009 1.58558 39.7722 1.6201 38.6537 2.18623L7.82029 17.8998C5.2865 19.1909 3.22911 22.7395 3.22911 25.8187V63.3422C3.22911 65.0613 3.86427 66.2695 4.86536 66.7873L1.78616 65.2201C0.78507 64.7092 0.149902 63.494 0.149902 61.7749V24.2515C0.149902 21.1654 2.2073 17.6237 4.74108 16.3326L35.5745 0.619008C36.6999 0.0459728 37.7286 0.0183575 38.5225 0.425696L41.6017 1.99291Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M41.6014 1.99296C42.6025 2.50385 43.2376 3.71897 43.2376 5.43807V42.9615C43.2376 46.0476 41.1802 49.5894 38.6465 50.8804L7.81304 66.594C6.68768 67.167 5.65898 67.1946 4.86501 66.7873C3.86393 66.2764 3.22876 65.0613 3.22876 63.3422V25.8188C3.22876 22.7327 5.28616 19.1909 7.81994 17.8998L38.6534 2.18627C39.7787 1.61323 40.8074 1.58562 41.6014 1.99296Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.0575 7.93732C54.2567 7.52998 53.228 7.5645 52.1095 8.13063L21.2761 23.8442C18.7423 25.1353 16.6849 28.6839 16.6849 31.7631V69.2866C16.6849 71.0057 17.3201 72.2139 18.3212 72.7317L15.242 71.1645C14.2409 70.6536 13.6057 69.4385 13.6057 67.7194V30.1959C13.6057 27.1098 15.6631 23.5681 18.1969 22.277L49.0303 6.5634C50.1557 5.99037 51.1844 5.96275 51.9783 6.37009L55.0575 7.93732Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.0574 7.93729C56.0585 8.44819 56.6937 9.66329 56.6937 11.3824V48.9058C56.6937 51.9919 54.6363 55.5337 52.1025 56.8248L21.2691 72.5384C20.1437 73.1114 19.115 73.139 18.3211 72.7317C17.32 72.2208 16.6848 71.0056 16.6848 69.2865V31.7631C16.6848 28.677 18.7422 25.1352 21.276 23.8442L52.1094 8.1306C53.2348 7.55757 54.2635 7.52995 55.0574 7.93729Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M68.5136 13.8817C67.7127 13.4744 66.684 13.5089 65.5656 14.075L34.7322 29.7886C32.1984 31.0797 30.141 34.6283 30.141 37.7075V75.231C30.141 76.9501 30.7761 78.1583 31.7772 78.6761L28.698 77.1089C27.6969 76.598 27.0618 75.3828 27.0618 73.6637V36.1403C27.0618 33.0542 29.1192 29.5124 31.653 28.2214L62.4864 12.5078C63.6117 11.9348 64.6404 11.9072 65.4344 12.3145L68.5136 13.8817Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.5135 13.8817C69.5146 14.3926 70.1497 15.6077 70.1497 17.3268V54.8502C70.1497 57.9363 68.0924 61.4781 65.5586 62.7692L34.7251 78.4827C33.5998 79.0558 32.5711 79.0834 31.7771 78.6761C30.776 78.1652 30.1409 76.9501 30.1409 75.231V37.7075C30.1409 34.6214 32.1983 31.0796 34.732 29.7886L65.5655 14.075C66.6908 13.502 67.7195 13.4744 68.5135 13.8817Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M52.6893 39.9859C52.8757 40.4071 53.2899 40.559 53.7801 40.3173C54.4429 39.9859 54.9883 39.0401 54.9952 38.2047V36.672C55.009 36.1749 54.8157 35.8021 54.4843 35.6847C54.1598 35.5673 53.7387 35.7192 53.3659 36.0851L45.5367 43.8384C45.0741 44.3009 44.7634 45.0121 44.7634 45.6403V56.1897C44.7634 56.7144 44.9844 57.0941 45.3434 57.1839C45.7024 57.2736 46.1511 57.0596 46.524 56.6316L47.6424 55.3336C48.2293 54.6501 48.4571 53.6214 48.1533 53.0414C47.9531 52.6617 47.5734 52.5651 47.1729 52.7377V45.4608L52.6893 39.9997V39.9859Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.8773 37.9215C48.0637 38.3427 48.4779 38.4946 48.9681 38.2529C49.6309 37.9215 50.1763 36.9757 50.1832 36.1403V34.6076C50.197 34.1105 50.0037 33.7377 49.6723 33.6203C49.3409 33.503 48.9267 33.6549 48.5538 34.0208L40.7247 41.774C40.2621 42.2366 39.9514 42.9477 39.9514 43.5759V54.1253C39.9514 54.65 40.1724 55.0297 40.5314 55.1195C40.8904 55.2092 41.3391 55.0021 41.7119 54.5672L42.8304 53.2692C43.4173 52.5857 43.6451 51.557 43.3413 50.9771C43.1411 50.5974 42.7614 50.5007 42.3609 50.6733V43.3964L47.8773 37.9353V37.9215Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M60.3324 48.9818C60.3324 49.6032 60.0286 50.3212 59.5591 50.7769L51.7368 58.5301C51.364 58.896 50.9498 59.0479 50.6253 58.9306C50.3008 58.8132 50.1006 58.4542 50.1006 57.9571V47.4077C50.1006 46.7864 50.4044 46.0683 50.8738 45.6058L58.703 37.8525C59.0758 37.4866 59.4901 37.3347 59.8146 37.4521C60.139 37.5695 60.3393 37.9354 60.3393 38.4256V48.9749L60.3324 48.9818ZM57.9298 41.8569L52.5101 47.2213V54.5396L57.9229 49.1751V41.8569H57.9298Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx
new file mode 100644
index 0000000..23dc8a6
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function WorklogHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="91"
+      viewBox="0 0 81 91"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M47.6236 2.3561C46.7083 1.89056 45.5326 1.93023 44.2544 2.57724L9.01614 20.5356C6.12039 22.0111 3.76915 26.0669 3.76915 29.586V72.4699C3.76915 74.4346 4.49506 75.8156 5.63915 76.4074L2.12 74.6163C0.975906 74.0324 0.25 72.6435 0.25 70.6788V27.7949C0.25 24.2679 2.60134 20.2199 5.49709 18.7444L40.7353 0.786111C42.0214 0.13121 43.1971 0.0994326 44.1045 0.564965L47.6236 2.3561Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M47.6237 2.35598C48.7678 2.93987 49.4937 4.32876 49.4937 6.29346V49.1774C49.4937 52.7044 47.1424 56.7523 44.2466 58.2278L9.00838 76.1865C7.72226 76.8414 6.54668 76.8728 5.63929 76.4073C4.49519 75.8234 3.76929 74.4345 3.76929 72.4698V29.5859C3.76929 26.0589 6.12053 22.0109 9.01628 20.5354L44.2545 2.57713C45.5406 1.92223 46.7163 1.89045 47.6237 2.35598Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M63.002 9.15102C62.0867 8.68549 60.911 8.72515 59.6328 9.37216L24.3946 27.3305C21.4988 28.806 19.1476 32.8618 19.1476 36.3809V79.2652C19.1476 81.2299 19.8735 82.6105 21.0176 83.2023L17.4984 81.4112C16.3543 80.8273 15.6284 79.4388 15.6284 77.4741V34.5898C15.6284 31.0628 17.9798 27.0149 20.8755 25.5394L56.1137 7.58103C57.3999 6.92613 58.5755 6.89435 59.4829 7.35989L63.002 9.15102Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M63.0021 9.14895C64.1462 9.73284 64.8721 11.1217 64.8721 13.0864V55.9707C64.8721 59.4977 62.5208 63.5453 59.625 65.0208L24.3869 82.9795C23.1008 83.6344 21.9251 83.6658 21.0177 83.2002C19.8736 82.6163 19.1477 81.2278 19.1477 79.2631V36.3788C19.1477 32.8518 21.4989 28.8039 24.3947 27.3284L59.6329 9.3701C60.919 8.71519 62.0947 8.68342 63.0021 9.14895Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M78.3799 15.9441C77.4646 15.4786 76.2889 15.5179 75.0107 16.1649L39.7726 34.1236C36.8768 35.5991 34.5255 39.6546 34.5255 43.1737V86.0579C34.5255 88.0226 35.2514 89.4036 36.3955 89.9954L32.8764 88.2043C31.7323 87.6204 31.0063 86.2315 31.0063 84.2668V41.3825C31.0063 37.8555 33.3577 33.808 36.2534 32.3325L71.4917 14.3738C72.7778 13.7189 73.9535 13.6875 74.8608 14.153L78.3799 15.9441Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.38 15.944C79.5241 16.5279 80.25 17.9164 80.25 19.8811V62.7654C80.25 66.2924 77.8987 70.3403 75.003 71.8158L39.7648 89.7742C38.4787 90.4291 37.303 90.4608 36.3956 89.9953C35.2515 89.4114 34.5256 88.0225 34.5256 86.0578V43.1735C34.5256 39.6465 36.877 35.599 39.7727 34.1235L75.0109 16.1648C76.297 15.5099 77.4726 15.4785 78.38 15.944Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M61.4946 39.3628L57.1313 41.5881C56.5317 41.8958 56.0425 41.5487 56.0425 40.8149C56.0425 40.0811 56.5317 39.2367 57.1313 38.929L61.4946 36.704C62.0943 36.3963 62.5835 36.7434 62.5835 37.4772C62.5835 38.211 62.0943 39.055 61.4946 39.3628Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M59.3091 56.3957C59.0329 56.5377 58.7489 56.5535 58.5359 56.3957C58.1098 56.0958 58.1098 55.2513 58.5359 54.5175L61.8104 48.8682C62.2364 48.1344 62.9309 47.7794 63.349 48.0792C63.7751 48.379 63.7751 49.2232 63.349 49.957L60.0745 55.6066C59.8615 55.9775 59.5854 56.2456 59.3013 56.3876L59.3091 56.3957Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M59.3092 67.0181C53.8964 69.7798 49.4937 66.6628 49.4937 60.0744C49.4937 53.4859 53.8964 45.8875 59.3092 43.1258C64.7219 40.3642 69.1248 43.4811 69.1248 50.0696C69.1248 56.6581 64.7219 64.2565 59.3092 67.0181ZM59.3092 45.785C55.0957 47.9312 51.6714 53.8412 51.6714 58.9621C51.6714 64.0829 55.0957 66.5052 59.3092 64.359C63.5226 62.2128 66.9471 56.3028 66.9471 51.1819C66.9471 46.061 63.5226 43.6388 59.3092 45.785Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/illustration/constant.tsx b/packages/propel/src/empty-state/assets/illustration/constant.tsx
new file mode 100644
index 0000000..45faced
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/illustration/constant.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { InboxIllustration, SearchIllustration } from "./";
+
+export const IllustrationMap = [
+  {
+    asset: <InboxIllustration className="h-20 w-20" />,
+    title: "Inbox",
+  },
+  {
+    asset: <SearchIllustration className="h-20 w-20" />,
+    title: "Search",
+  },
+];
diff --git a/packages/propel/src/empty-state/assets/illustration/inbox.tsx b/packages/propel/src/empty-state/assets/illustration/inbox.tsx
new file mode 100644
index 0000000..11feb44
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/illustration/inbox.tsx
@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function InboxIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="100"
+      height="92"
+      viewBox="0 0 100 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M47.9704 90.4361C45.6096 90.4361 43.3812 89.9603 41.6888 89.0991L3.42092 69.6038C1.60208 68.6823 0.602325 67.3995 0.602325 66.0022V46.0853C0.602325 44.6941 1.60208 43.4173 3.42092 42.4898L45.7481 20.9227C47.4344 20.0615 49.6628 19.5857 52.0237 19.5857C54.3845 19.5857 56.6129 20.0615 58.2993 20.9227L96.5732 40.424C98.392 41.3455 99.3918 42.6283 99.3918 44.0256V63.9425C99.3918 65.3337 98.392 66.6105 96.5732 67.538L54.246 89.1051C52.5597 89.9663 50.3313 90.4421 47.9644 90.4421L47.9704 90.4361Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M52.0296 20.1939C54.2038 20.1939 56.372 20.6155 58.0282 21.4647L96.3021 40.9661C97.9643 41.8092 98.7895 42.9174 98.7895 44.0316V63.9485C98.7895 65.0566 97.9583 66.1648 96.3021 67.008L53.9749 88.5751C52.3187 89.4243 50.1445 89.8458 47.9704 89.8458C45.7962 89.8458 43.622 89.4243 41.9658 88.5751L3.69188 69.0677C2.02963 68.2246 1.20453 67.1164 1.20453 66.0082V46.0913C1.20453 44.9832 2.03565 43.881 3.69188 43.0318L46.019 21.4647C47.6753 20.6155 49.8494 20.1939 52.0236 20.1939M52.0296 18.9894C49.5724 18.9894 47.2477 19.4893 45.477 20.3927L3.14984 41.9538C1.12021 42.9897 0 44.4532 0 46.0853V66.0022C0 66.9477 0.40954 68.7485 3.14984 70.1398L41.4177 89.6411C43.1884 90.5445 45.5131 91.0443 47.9704 91.0443C50.4276 91.0443 52.7523 90.5445 54.523 89.6411L96.8502 68.074C98.8798 67.0381 100 65.5746 100 63.9424V44.0256C100 43.08 99.5905 41.2792 96.8502 39.888L58.5762 20.3867C56.8116 19.4833 54.4809 18.9834 52.0296 18.9834V18.9894Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+      />
+      <path
+        d="M86.7923 45.9528C86.6838 46.019 86.5754 46.0853 86.455 46.1455L79.4085 49.735L79.3844 49.7531L79.3964 49.735L86.7983 45.9588L86.7923 45.9528Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M76.6561 56.1069L76.1141 57.3717L75.1504 59.6121C74.6807 60.7082 73.9098 61.6116 73.0606 62.0453L64.3699 66.4779L62.6595 64.2255L56.8115 61.2443H56.7934L51.7766 63.7979C49.0724 65.0084 44.9589 64.9482 42.3812 63.6353L28.216 56.4141L47.8618 46.4105C50.5479 45.0433 54.9083 45.0433 57.5944 46.4105L71.7597 53.6316L76.6441 56.113L76.6561 56.1069Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M88.4665 43.6643C88.4665 44.4833 87.9064 45.2964 86.7923 45.9529L79.3904 49.7291L79.3784 49.7471L76.6561 56.107L71.7718 53.6257L57.6065 46.4046C54.9204 45.0374 50.56 45.0374 47.8739 46.4046L28.228 56.4082L13.5448 48.9281C12.2018 48.2415 11.5273 47.3441 11.5273 46.4467C11.5273 45.5493 12.2018 44.652 13.5448 43.9654L47.8679 26.4817C50.554 25.1145 54.9144 25.1145 57.6005 26.4817L86.449 41.1769C87.792 41.8635 88.4665 42.7609 88.4665 43.6582V43.6643Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M98.7954 44.0256C98.7954 45.1217 97.9763 46.2118 96.3562 47.055L88.4666 51.0721L85.2505 52.7103L79.4025 49.7291L86.449 46.1396C86.5694 46.0793 86.6839 46.0191 86.7863 45.9468C87.9065 45.2964 88.4606 44.4773 88.4606 43.6582C88.4606 42.7548 87.786 41.8575 86.443 41.1769L57.5945 26.4817C54.9084 25.1145 50.548 25.1145 47.8619 26.4817L13.5389 43.9654C12.1958 44.652 11.5213 45.5493 11.5213 46.4467C11.5213 47.3441 12.1958 48.2475 13.5389 48.928L28.2221 56.4082L42.3873 63.6293C44.965 64.9483 49.0785 65.0025 51.7827 63.7919C51.9031 63.7377 52.0175 63.6835 52.1259 63.6293L56.8116 61.2383L62.6596 64.2195L53.9689 68.6462C53.0956 69.0919 52.0838 69.4231 50.9997 69.6279C49.2833 69.9652 47.4042 70.0073 45.6576 69.7544C44.3025 69.5556 43.0257 69.1943 41.9597 68.6462L23.0787 59.028L11.5213 53.1379L3.68581 49.1449C2.02356 48.3017 1.19846 47.1935 1.19846 46.0793C1.19846 44.9652 2.02958 43.869 3.68581 43.0198L46.013 21.4527C49.3314 19.7604 54.7097 19.7604 58.0161 21.4527L96.29 40.9541C97.9522 41.7972 98.7773 42.9054 98.7773 44.0196L98.7954 44.0256Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M86.7922 45.9528C86.6838 46.019 86.5754 46.0853 86.4549 46.1455L79.4084 49.735H79.3904L86.7922 45.9588V45.9528Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M85.2504 52.7162L82.5161 59.0941L81.0165 62.5993C80.5467 63.6954 79.7758 64.5988 78.9266 65.0325L68.9651 70.1096C68.387 70.4047 67.8269 70.4348 67.3872 70.2059C67.2005 70.1156 67.0379 69.9771 66.8994 69.7964L64.3759 66.4719L73.0666 62.0392C73.9158 61.6116 74.6867 60.7022 75.1564 59.6061L76.12 57.3656L76.6621 56.1009L79.3843 49.741L79.4084 49.7229L85.2564 52.7041L85.2504 52.7162Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M79.4025 49.7289L79.3783 49.7471L79.3904 49.7229L79.4025 49.7289Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M98.7954 44.0256V63.9425C98.7954 65.0507 97.9643 66.1589 96.308 67.002L53.9809 88.5691C50.6624 90.2615 45.2842 90.2615 41.9717 88.5691L3.69179 69.0678C2.02954 68.2246 1.20444 67.1165 1.20444 66.0083V46.0914C1.20444 47.1996 2.02954 48.3077 3.69179 49.1569L11.5273 53.1499L23.0847 59.0401L41.9657 68.6583C43.0317 69.2063 44.3145 69.5737 45.6636 69.7664C47.4162 70.0133 49.2953 69.9712 51.0057 69.6399C52.0898 69.4352 53.1016 69.1039 53.9749 68.6583L62.6655 64.2316L64.376 66.4841L66.8995 69.8086C67.038 69.9893 67.2006 70.1278 67.3873 70.2181C67.8269 70.447 68.387 70.4229 68.9652 70.1218L78.9267 65.0447C79.7759 64.6171 80.5468 63.7076 81.0165 62.6115L82.5162 59.1063L85.2505 52.7284L88.4665 51.0902L96.3562 47.0731C97.9763 46.2299 98.7954 45.1398 98.7954 44.0437V44.0256Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M56.8176 61.2383L52.132 63.6293C52.0175 63.6895 51.9091 63.7437 51.7887 63.7919L56.8055 61.2323H56.8236L56.8176 61.2383Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M43.333 50.3074C42.8211 50.3074 42.3453 50.193 41.9116 49.9761L36.5455 47.2419C35.3168 46.6155 34.6062 45.1942 34.6062 43.3512V23.3922C34.6062 23.3922 34.6062 23.3561 34.6062 23.332V21.5493C34.6062 18.3452 36.7623 14.6413 39.4062 13.2922L63.2679 1.13249C63.9485 0.783177 64.623 0.608521 65.2675 0.608521C65.7794 0.608521 66.2552 0.722951 66.6828 0.939766L72.049 3.67405C73.2776 4.3004 73.9822 5.72175 73.9822 7.5707V9.36545C73.9822 9.36545 73.9822 9.40158 73.9822 9.42567V29.3727C73.9822 32.5767 71.8261 36.2806 69.1822 37.6297L45.3205 49.7894C44.6399 50.1327 43.9714 50.3134 43.333 50.3134V50.3074Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M65.2734 1.21067C65.689 1.21067 66.0744 1.30101 66.4177 1.47567L71.7839 4.20995C72.7656 4.70983 73.3859 5.89629 73.3859 7.57059V9.36534C73.3859 9.36534 73.3859 9.38943 73.3859 9.40147V29.3605C73.3859 32.3538 71.3744 35.8288 68.9111 37.0815L45.0494 49.2413C44.4411 49.5484 43.8629 49.699 43.3329 49.699C42.9113 49.699 42.5259 49.6087 42.1826 49.434L36.8164 46.6997C35.8347 46.1998 35.2084 45.0194 35.2084 43.3451V23.3861C35.2084 23.3861 35.2084 23.368 35.2084 23.362V21.5491C35.2084 18.5559 37.2199 15.0808 39.6832 13.8281L63.5449 1.66839C64.1592 1.35522 64.7374 1.21067 65.2674 1.21067M65.2734 0.00614485C64.5326 0.00614485 63.7738 0.204892 63.0029 0.596364L39.1411 12.7561C36.2623 14.2196 34.0099 18.0861 34.0099 21.5552V23.3138C34.0099 23.3138 34.0099 23.368 34.0099 23.3921V43.3511C34.0099 45.4289 34.835 47.043 36.2744 47.7778L41.6405 50.512C42.1585 50.777 42.7306 50.9095 43.3389 50.9095C44.0737 50.9095 44.8386 50.7108 45.6035 50.3253L69.4652 38.1656C72.344 36.7021 74.5965 32.8356 74.5965 29.3665V9.44363C74.5965 9.44363 74.5965 9.38943 74.5965 9.35931V7.56457C74.5965 5.48073 73.7714 3.86666 72.332 3.1319L66.9658 0.397617C66.4478 0.13262 65.8817 0.00012207 65.2734 0.00012207V0.00614485Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+      />
+      <path
+        d="M72.85 8.28736C72.3682 8.04043 71.6576 8.3235 71.0854 9.05224L70.3988 9.92552L57.7392 26.1927C57.2755 26.7528 56.6973 27.0539 56.2938 26.9636L43.5559 23.5969L42.8693 23.4223C42.1707 23.2356 41.2432 23.9583 40.8096 25.0122C40.647 25.4037 40.5687 25.7892 40.5687 26.1144V46.0734C40.5687 47.7417 41.195 48.9282 42.1767 49.4281L36.8105 46.6938C35.8288 46.1939 35.2025 45.0135 35.2025 43.3392V23.3801C35.2025 23.0549 35.2748 22.6694 35.4434 22.278C35.877 21.224 36.7985 20.4953 37.5031 20.688L38.1897 20.8626L50.9276 24.2293C51.3311 24.3136 51.9093 24.0185 52.373 23.4584L65.0326 7.19124L65.7192 6.31796C66.2854 5.58922 67.0021 5.30615 67.4839 5.55308L72.85 8.28736Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M72.85 8.28729C72.9644 8.34752 73.0608 8.43183 73.1451 8.54627C73.3077 8.7691 73.386 9.07626 73.386 9.4075V29.3665C73.386 32.3598 71.3744 35.8349 68.9112 37.0876L45.0494 49.2473C43.9593 49.8014 42.9596 49.8315 42.1827 49.434C41.201 48.9341 40.5746 47.7537 40.5746 46.0794V26.1203C40.5746 25.7951 40.6469 25.4097 40.8155 25.0182C41.2491 23.9642 42.1706 23.2355 42.8753 23.4282L43.5618 23.6029L56.2997 26.9695C56.7033 27.0539 57.2814 26.7587 57.7452 26.1986L70.4048 9.93147L71.0914 9.05819C71.6575 8.32945 72.3742 8.04639 72.856 8.29331L72.85 8.28729Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M71.784 4.21002C71.0071 3.81253 70.0073 3.84866 68.9172 4.40275L45.0555 16.5625C42.5922 17.8152 40.5807 21.2902 40.5807 24.2835V26.0963C40.5807 26.6143 40.7674 27.0238 41.1106 27.1985L35.7445 24.4642C35.4012 24.2895 35.2145 23.88 35.2145 23.362V21.5492C35.2145 18.556 37.226 15.0809 39.6893 13.8282L63.551 1.66847C64.6411 1.11438 65.6409 1.07825 66.4178 1.47574L71.784 4.21002Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M71.784 4.20999C72.7657 4.70987 73.386 5.89634 73.386 7.56461V9.35936C73.386 9.97367 73.1451 10.6783 72.6994 11.2505L70.4048 14.2016L59.293 28.4813C58.5643 29.3606 57.7693 30.017 56.9803 30.4205C56.1914 30.8241 55.4265 30.9746 54.7459 30.8361L43.5619 27.8609L41.2793 27.2647C41.2191 27.2466 41.1649 27.2285 41.1107 27.1984C40.7674 27.0238 40.5807 26.6142 40.5807 26.0963V24.2835C40.5807 21.2902 42.5922 17.8152 45.0555 16.5624L68.9172 4.40272C70.0073 3.84864 71.0071 3.8125 71.784 4.20999Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.3024"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/illustration/index.ts b/packages/propel/src/empty-state/assets/illustration/index.ts
new file mode 100644
index 0000000..6d1e11c
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/illustration/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./inbox";
+export * from "./search";
diff --git a/packages/propel/src/empty-state/assets/illustration/search.tsx b/packages/propel/src/empty-state/assets/illustration/search.tsx
new file mode 100644
index 0000000..c51c82b
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/illustration/search.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function SearchIllustration({ className, ...rest }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="168"
+      viewBox="0 0 161 168"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <path
+        d="M144.09 4.41578C141.874 3.28812 139.018 3.38046 135.906 4.96974L19.6972 64.1819C12.6543 67.7693 6.94345 77.6281 6.94345 86.1944V156.321C6.94345 161.102 8.71737 164.471 11.5069 165.889L4.8134 162.48C2.02391 161.055 0.25 157.686 0.25 152.911V82.7851C0.25 74.2122 5.96087 64.36 13.0038 60.7726L129.212 1.56034C132.332 -0.0289381 135.18 -0.121239 137.396 1.00642L144.09 4.41578Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M144.09 4.4158C146.879 5.84022 148.653 9.21002 148.653 13.9845V84.1106C148.653 92.6834 142.942 102.536 135.899 106.123L19.6907 165.335C16.5715 166.925 13.7226 167.017 11.5069 165.889C8.7174 164.465 6.94348 161.095 6.94348 156.321V86.1945C6.94348 77.6216 12.6543 67.7694 19.6973 64.1819L135.906 4.96976C139.025 3.38048 141.874 3.28814 144.09 4.4158Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M151.093 141.028C150.269 141.028 149.53 140.797 148.891 140.342L146.358 138.555C146.022 138.627 145.686 138.667 145.362 138.667C144.545 138.667 143.8 138.436 143.16 137.988L120.369 121.864C112.502 131.182 102.861 136.728 94.4726 136.728C91.0303 136.728 87.911 135.818 85.1941 134.024C82.952 133.576 80.8747 132.686 79.0282 131.373C67.4021 123.15 67.3163 100.274 78.837 80.378C87.3439 65.6854 100.071 56.1959 111.249 56.1959C114.698 56.1959 117.824 57.106 120.541 58.9063C122.789 59.3613 124.86 60.2515 126.707 61.5507C137.014 68.8442 138.465 87.4737 130.228 106.004L157.668 125.412C160.194 127.199 160.279 131.875 157.859 136.049C156.725 138.008 155.208 139.544 153.579 140.368C152.729 140.804 151.891 141.021 151.087 141.021L151.093 141.028ZM90.1136 123.44C90.5752 123.493 91.0566 123.519 91.5314 123.519C99.5372 123.519 108.717 116.602 114.916 105.899C123.027 91.8986 123.324 75.6168 115.621 69.4773C115.16 69.4245 114.678 69.3981 114.197 69.3981C106.191 69.3981 97.0115 76.3158 90.8126 87.0121C82.7014 101.012 82.4046 117.294 90.107 123.434L90.1136 123.44Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M111.256 56.8554C114.527 56.8554 117.6 57.7127 120.29 59.5261C122.447 59.9416 124.484 60.7857 126.331 62.0914C136.559 69.3256 137.594 88.2123 129.41 106.235L157.299 125.959C159.521 127.529 159.521 131.894 157.299 135.726C156.191 137.638 154.74 139.049 153.289 139.788C152.544 140.171 151.799 140.368 151.093 140.368C150.434 140.368 149.814 140.19 149.273 139.808L146.497 137.843C146.114 137.948 145.732 138.008 145.362 138.008C144.703 138.008 144.083 137.829 143.542 137.447L120.257 120.974C112.357 130.536 102.775 136.069 94.4792 136.069C91.2149 136.069 88.1485 135.211 85.4579 133.405C83.2949 132.989 81.2638 132.145 79.4173 130.839C68.0417 122.794 68.0417 100.353 79.4173 80.7143C88.0297 65.8503 100.685 56.862 111.262 56.862M91.538 124.179C99.491 124.179 109.014 117.413 115.496 106.229C123.917 91.6942 124.042 75.1288 115.892 68.8442C115.338 68.7717 114.777 68.7387 114.21 68.7387C106.257 68.7387 96.7345 75.5047 90.2587 86.6824C81.8375 101.217 81.7122 117.782 89.863 124.067C90.417 124.139 90.9775 124.172 91.5446 124.172M111.256 55.5365C99.8405 55.5365 86.8955 65.1579 78.2698 80.0483C72.6513 89.7422 69.5585 100.425 69.5585 110.119C69.5585 120.024 72.7832 127.766 78.6457 131.914C80.5384 133.253 82.6552 134.169 84.9369 134.644C87.733 136.464 90.9379 137.388 94.466 137.388C102.9 137.388 112.555 131.934 120.468 122.748L142.764 138.522C143.509 139.049 144.4 139.326 145.343 139.326C145.62 139.326 145.903 139.3 146.187 139.254L148.488 140.883C149.233 141.41 150.124 141.687 151.073 141.687C152.023 141.687 152.92 141.443 153.863 140.962C155.604 140.078 157.219 138.449 158.413 136.385C161.005 131.914 160.833 126.863 158.031 124.878L131.026 105.78C139.144 87.1308 137.535 68.4222 127.063 61.0165C125.183 59.6844 123.066 58.7678 120.772 58.2864C117.969 56.4663 114.757 55.5365 111.223 55.5365H111.256ZM90.3774 122.807C83.0706 116.767 83.4861 100.986 91.3864 87.3484C97.3742 77.0082 106.547 70.0576 114.197 70.0576C114.586 70.0576 114.975 70.0774 115.357 70.1103C122.664 76.1443 122.242 91.925 114.342 105.569C108.354 115.909 99.1811 122.86 91.5248 122.86C91.1357 122.86 90.7467 122.84 90.3708 122.807H90.3774Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+      />
+      <path
+        d="M151.561 123.598L123.673 103.874C131.857 85.8515 130.822 66.9713 120.593 59.7306C109.218 51.6852 90.7796 61.0758 79.4041 80.7143C68.0285 100.353 68.0285 122.794 79.4041 130.839C89.164 137.744 104.147 131.795 115.384 117.538L143.529 137.447C144.637 138.232 146.094 138.166 147.545 137.427C148.996 136.689 150.447 135.271 151.555 133.365C153.777 129.534 153.777 125.168 151.555 123.598H151.561ZM84.5215 122.022C75.9684 115.969 75.9684 99.0998 84.5215 84.3281C93.0745 69.563 106.943 62.4937 115.496 68.5474C124.049 74.5946 124.049 91.47 115.496 106.235C106.943 121 93.0745 128.07 84.5281 122.022H84.5215Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M157.292 125.959L129.404 106.235C137.588 88.2123 136.552 69.3322 126.324 62.0914C114.949 54.0461 96.5103 63.4367 85.1347 83.0752C73.7592 102.714 73.7592 125.155 85.1347 133.2C94.8946 140.105 109.877 134.156 121.114 119.899L149.26 139.808C150.368 140.593 151.825 140.527 153.276 139.788C154.727 139.049 156.178 137.632 157.285 135.726C159.508 131.894 159.508 127.529 157.285 125.959H157.292ZM90.2521 124.383C81.699 118.329 81.699 101.461 90.2521 86.6889C98.8052 71.9238 112.673 64.8545 121.227 70.9083C129.78 76.9554 129.78 93.8308 121.227 108.596C112.673 123.361 98.8052 130.43 90.2587 124.383H90.2521Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M36.3748 108.767C27.9404 113.067 21.0756 108.213 21.0756 97.9458C21.0756 87.6781 27.9404 75.8277 36.3748 71.5281C44.8092 67.2285 51.6741 72.082 51.6741 82.3497C51.6741 92.6174 44.8092 104.468 36.3748 108.767ZM36.3748 74.3901C29.2329 78.0303 23.4298 88.054 23.4298 96.7456C23.4298 105.437 29.2395 109.539 36.3748 105.905C43.5167 102.265 49.3199 92.2415 49.3199 83.5499C49.3199 74.8649 43.5101 70.7565 36.3748 74.3901ZM36.388 101.612C35.7352 101.942 35.201 101.579 35.201 100.788C35.201 99.9967 35.7286 99.0734 36.3748 98.7437H36.388C37.0409 98.4074 37.5619 98.7767 37.5619 99.568C37.5619 100.359 37.0343 101.283 36.388 101.612ZM36.3748 95.8751C35.722 96.2048 35.201 95.8355 35.201 95.0442V93.6132C35.201 91.7073 36.3023 89.3597 38.1422 87.3352C38.4389 87.012 38.7027 86.6691 38.9269 86.3064C39.56 85.3041 39.9095 84.2555 39.9095 83.3323C39.9095 82.4091 39.56 81.71 38.9335 81.3605C37.5486 80.589 35.2076 81.7826 33.8293 83.9654C33.3413 84.7303 32.5962 85.0535 32.1675 84.6776C31.7389 84.3017 31.7916 83.3719 32.2796 82.6003C34.5482 79.0393 38.2213 77.1599 40.4898 78.4194C41.6373 79.0591 42.2703 80.3779 42.2703 82.1387C42.2703 83.8994 41.6373 85.858 40.4898 87.6649C40.1073 88.2716 39.6655 88.8585 39.1775 89.3927C38.3993 90.2499 37.5685 91.4897 37.5685 92.413V93.844C37.5685 94.6353 37.0409 95.5454 36.3946 95.8751H36.3748Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/index.ts b/packages/propel/src/empty-state/assets/index.ts
new file mode 100644
index 0000000..fbf8b46
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./asset-registry";
+export * from "./asset-types";
+export * from "./helper";
+export * from "./horizontal-stack";
+export * from "./illustration";
+export * from "./vertical-stack";
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx b/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx
new file mode 100644
index 0000000..4cfe6c2
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx
@@ -0,0 +1,294 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function Error404VerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="173"
+      viewBox="0 0 161 173"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M0.25 138.417C0.25 140.441 1.76532 142.46 4.79055 144.007L43.7438 163.856C49.7996 166.94 59.6142 166.94 65.67 163.856L147.523 122.15C150.548 120.608 152.063 118.59 152.063 116.566V123.028C152.063 125.052 150.548 127.071 147.523 128.613L65.67 170.318C59.6142 173.403 49.7996 173.403 43.7438 170.318L4.79055 150.47C1.75996 148.928 0.25 146.904 0.25 144.88V138.417Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 138.417C0.25 136.393 1.76532 134.374 4.79055 132.832L86.6432 91.1268C92.699 88.0427 102.514 88.0427 108.569 91.1268L147.523 110.976C150.553 112.518 152.063 114.542 152.063 116.566C152.063 118.59 150.548 120.608 147.523 122.15L65.67 163.856C59.6142 166.94 49.7996 166.94 43.7438 163.856L4.79055 144.007C1.75996 142.465 0.25 140.441 0.25 138.417Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M0.25 118.001C0.25 120.025 1.76532 122.043 4.79055 123.591L43.7438 143.439C49.7996 146.524 59.6142 146.524 65.67 143.439L147.523 101.734C150.548 100.192 152.063 98.1734 152.063 96.1494V102.612C152.063 104.636 150.548 106.655 147.523 108.197L65.67 149.902C59.6142 152.986 49.7996 152.986 43.7438 149.902L4.79055 130.053C1.75996 128.511 0.25 126.487 0.25 124.463V118.001Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 118.001C0.25 115.977 1.76532 113.958 4.79055 112.416L86.6432 70.7106C92.699 67.6264 102.514 67.6264 108.569 70.7106L147.523 90.5593C150.553 92.1014 152.063 94.1253 152.063 96.1493C152.063 98.1733 150.548 100.192 147.523 101.734L65.67 143.439C59.6142 146.523 49.7996 146.523 43.7438 143.439L4.79055 123.591C1.75996 122.048 0.25 120.025 0.25 118.001Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M0.25 97.5844C0.25 99.6084 1.76532 101.627 4.79055 103.174L43.7438 123.023C49.7996 126.107 59.6142 126.107 65.67 123.023L147.523 81.3178C150.548 79.7757 152.063 77.7571 152.063 75.7332V82.1959C152.063 84.2199 150.548 86.2385 147.523 87.7805L65.67 129.486C59.6142 132.57 49.7996 132.57 43.7438 129.486L4.79055 109.637C1.75996 108.095 0.25 106.071 0.25 104.047V97.5844Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.25 97.5843C0.25 95.5603 1.76532 93.5417 4.79055 91.9997L86.6432 50.2943C92.699 47.2102 102.514 47.2102 108.569 50.2943L147.523 70.143C150.553 71.6851 152.063 73.7091 152.063 75.733C152.063 77.757 150.548 79.7756 147.523 81.3177L65.67 123.023C59.6142 126.107 49.7996 126.107 43.7438 123.023L4.79055 103.174C1.75996 101.632 0.25 99.6083 0.25 97.5843Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M156.882 38.9752C157.482 38.67 157.862 37.9472 157.862 36.9191V23.7901C157.862 21.9482 156.636 19.8279 155.12 19.0569L121.147 1.7461C120.478 1.40342 119.862 1.38735 119.385 1.6283L121.773 0.412854C122.25 0.171906 122.866 0.18797 123.535 0.530651L157.509 17.8414C159.024 18.6124 160.25 20.7328 160.25 22.5747V35.7037C160.25 36.7317 159.87 37.4546 159.27 37.7598L156.882 38.9752Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M156.882 38.9751C156.405 39.216 155.79 39.2 155.12 38.8573L121.147 21.5465C119.631 20.7755 118.405 18.6552 118.405 16.8132V3.68427C118.405 2.65623 118.786 1.93339 119.385 1.62819C119.862 1.38724 120.477 1.4033 121.147 1.74598L155.12 19.0567C156.636 19.8278 157.862 21.9481 157.862 23.79V36.919C157.862 37.947 157.482 38.6699 156.882 38.9751Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M133.355 24.0417C133.093 23.9078 132.836 23.6936 132.605 23.4152C131.882 22.5425 131.636 21.2895 132.054 20.6256L136.075 14.1093C136.209 13.8898 136.407 13.7505 136.643 13.7077C136.991 13.6434 137.403 13.7934 137.788 14.12C138.179 14.4466 138.5 14.9231 138.699 15.4479L142.72 26.0656C142.854 26.4083 142.923 26.7617 142.923 27.083C142.923 28.095 142.249 28.5769 141.413 28.1539L133.366 24.0524C133.366 24.0524 133.355 24.0524 133.355 24.047V24.0417ZM137.387 15.0677C137.301 15.0249 137.215 15.0088 137.14 15.0195C137.06 15.0356 136.996 15.0784 136.953 15.1534L132.927 21.675C132.787 21.8999 132.868 22.3176 133.109 22.6067C133.184 22.7031 133.28 22.778 133.366 22.8209L141.419 26.9223C141.697 27.0616 141.922 26.9009 141.922 26.5636C141.922 26.4565 141.901 26.3387 141.852 26.2263L137.826 15.6032C137.756 15.4265 137.649 15.2658 137.521 15.1587C137.478 15.1213 137.43 15.0891 137.387 15.0677Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M137.392 21.2039C137.114 21.0647 136.889 20.6738 136.889 20.3365V17.8895C136.889 17.5522 137.114 17.3916 137.392 17.5361C137.671 17.6807 137.895 18.0662 137.895 18.4035V20.8505C137.895 21.1878 137.671 21.3484 137.392 21.2039Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M137.397 23.6562C137.119 23.517 136.894 23.1261 136.894 22.7888C136.894 22.4514 137.119 22.2908 137.392 22.43C137.671 22.5746 137.895 22.9655 137.895 23.3028C137.895 23.6401 137.671 23.8007 137.392 23.6562H137.397Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3774 48.1687C15.2102 47.5743 13.7109 47.6225 12.0671 48.4632C8.35654 50.3533 5.35273 55.547 5.35273 60.0554C5.35273 62.572 6.28975 64.3497 7.76221 65.0993L5.37414 63.8838C3.90168 63.1342 2.96466 61.3566 2.96466 58.84C2.96466 54.3262 5.97385 49.1325 9.67909 47.2477C11.3175 46.4124 12.8221 46.3589 13.9894 46.9532L16.3774 48.1687Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.3775 48.1686C17.8499 48.9182 18.7869 50.6958 18.7869 53.2124C18.7869 57.7262 15.7778 62.9199 12.0725 64.8047C10.4341 65.6399 8.92952 65.6935 7.76226 65.0992C6.2898 64.3495 5.35278 62.5719 5.35278 60.0553C5.35278 55.5416 8.36194 50.3478 12.0672 48.4631C13.7056 47.6278 15.2102 47.5742 16.3775 48.1686Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.7443 58.9846C14.6479 59.0328 14.5516 59.0382 14.4766 58.9846L9.12221 55.1991C8.97228 55.092 8.97228 54.8028 9.12221 54.5458C9.27213 54.2888 9.50772 54.171 9.65765 54.2728L15.012 58.0583C15.162 58.1654 15.162 58.4545 15.012 58.7116C14.9371 58.8401 14.8407 58.9311 14.7443 58.9846Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M12.0671 61.6993C9.7701 62.8719 7.90143 61.5493 7.90143 58.7543C7.90143 55.9593 9.7701 52.736 12.0671 51.5634C14.3642 50.3908 16.2329 51.7133 16.2329 54.5083C16.2329 57.3033 14.3642 60.5266 12.0671 61.6993ZM12.0671 52.4843C10.1877 53.4428 8.66174 56.0825 8.66174 58.3688C8.66174 60.6551 10.1931 61.7367 12.0671 60.7783C13.9412 59.8199 15.4725 57.1801 15.4725 54.8938C15.4725 52.6075 13.9412 51.5259 12.0671 52.4843Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M51.4595 105.22C51.3738 105.22 51.2935 105.198 51.2185 105.161L46.4478 102.73C46.2711 102.639 46.1533 102.457 46.1533 102.253V97.263L36.4136 102.227C36.3387 102.264 36.253 102.285 36.1727 102.285C36.0924 102.285 36.0067 102.264 35.9317 102.227L31.161 99.7956C30.9843 99.7046 30.8665 99.5226 30.8665 99.3191V93.0063C30.8665 92.9259 30.8825 92.8456 30.92 92.776L45.9337 61.3832C45.9819 61.2761 46.0676 61.1905 46.1747 61.1369L52.1448 58.0956C52.2198 58.0581 52.3055 58.0367 52.3858 58.0367C52.4661 58.0367 52.5518 58.0581 52.6267 58.0956L57.3975 60.5265C57.5742 60.6175 57.692 60.7996 57.692 61.0031V80.6108L59.0788 81.3176C58.9128 79.5667 58.8325 77.5856 58.8325 75.4117C58.8325 60.5426 62.618 51.9809 71.1047 47.6545C73.1662 46.6051 74.9224 46.0911 76.4645 46.0911C77.4015 46.0911 78.2636 46.2892 79.0239 46.6747L83.7946 49.1056C86.3701 50.4174 87.848 53.8174 88.3941 59.7287L101.025 33.3101C101.073 33.203 101.159 33.1174 101.266 33.0638L107.236 30.0225C107.311 29.985 107.397 29.9636 107.477 29.9636C107.557 29.9636 107.643 29.985 107.718 30.0225L112.489 32.4534C112.666 32.5444 112.783 32.7265 112.783 32.93V52.5378L116.392 54.3797C116.569 54.4707 116.687 54.6527 116.687 54.8562V61.0031C116.687 61.2065 116.574 61.3886 116.392 61.4796L112.783 63.3215V73.7197C112.783 73.9232 112.671 74.1053 112.489 74.1963L106.797 77.0984C106.722 77.1358 106.636 77.1573 106.556 77.1573C106.476 77.1573 106.39 77.1358 106.315 77.0984L101.544 74.6675C101.368 74.5764 101.25 74.3944 101.25 74.1909V69.2006L91.5103 74.1642C91.4354 74.2016 91.3497 74.2231 91.2694 74.2231C91.1891 74.2231 91.1034 74.2016 91.0284 74.1642L88.3031 72.7774C87.2215 83.2398 83.4145 89.8043 76.3681 93.3918C74.3227 94.4359 72.5772 94.9446 71.0298 94.9446C70.1195 94.9446 69.2842 94.7625 68.54 94.3984C68.5132 94.3877 68.4811 94.377 68.4543 94.3663L63.6836 91.9354C62.7412 91.4535 61.9327 90.6664 61.2687 89.5848L57.6974 91.4053V101.804C57.6974 102.007 57.5849 102.189 57.4028 102.28L51.7111 105.182C51.6362 105.22 51.5505 105.241 51.4702 105.241L51.4595 105.22ZM45.8481 85.2103L46.1533 85.055V84.5731L45.8481 85.2103ZM76.2289 57.3567C72.106 59.5413 70.4943 64.4727 70.4943 74.8656C70.4943 78.8439 70.7353 81.7406 71.2279 83.6736C75.3454 81.489 76.9571 76.5576 76.9571 66.17C76.9571 62.1275 76.7268 59.3004 76.2289 57.3621V57.3567ZM100.939 57.1372L101.245 56.9819V56.5L100.939 57.1372Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M107.472 30.4991L112.243 32.93V52.8644L116.146 54.8509V60.9977L112.243 62.9842V73.7091L106.551 76.6111L101.78 74.1803V68.3172L91.264 73.6769L87.8372 71.9314C86.9323 82.1422 83.5376 89.1244 76.1164 92.9046C74.1407 93.9112 72.454 94.3984 71.0244 94.3984C70.1141 94.3984 69.3057 94.2003 68.5935 93.8148C68.6257 93.8309 68.6578 93.8577 68.6899 93.8737L63.9191 91.4428C62.7037 90.8217 61.7613 89.6598 61.0545 87.9892V89.0708L57.1512 91.0573V101.782L51.4594 104.684L46.6887 102.253V96.3903L36.1727 101.75L31.4019 99.3191V93.0063L46.4156 61.6135L52.3857 58.5722L57.1565 61.0031V80.9375L59.7106 82.2386C59.475 80.2414 59.3625 77.9658 59.3625 75.4064C59.3625 61.6617 62.4841 52.6449 71.3456 48.1258C73.3321 47.1138 75.0241 46.6212 76.4645 46.6212C77.3265 46.6212 78.0975 46.7979 78.7775 47.1459L83.5483 49.5768C83.5001 49.55 83.4466 49.5286 83.393 49.5072C86.2576 50.8351 87.6445 55.0651 87.9979 61.7795L101.502 33.5404L107.472 30.4991ZM81.2299 49.0574C81.2299 49.0574 81.1977 49.0574 81.1817 49.0574C81.1817 49.0574 81.1764 49.0574 81.171 49.0574C81.171 49.0574 81.1763 49.0574 81.1817 49.0574C81.1977 49.0574 81.2138 49.0574 81.2299 49.0574C81.3691 49.0574 81.5083 49.0574 81.6422 49.0735C81.6422 49.0735 81.6529 49.0735 81.6582 49.0735C81.6582 49.0735 81.6743 49.0735 81.685 49.0735C81.6743 49.0735 81.6689 49.0735 81.6582 49.0735C81.6582 49.0735 81.6475 49.0735 81.6422 49.0735C81.5083 49.0628 81.3691 49.0574 81.2299 49.0574ZM80.598 49.0896C80.748 49.0735 80.8979 49.0681 81.0425 49.0628C80.8979 49.0628 80.748 49.0735 80.598 49.0896ZM82.2097 49.1431C82.0759 49.1217 81.9366 49.1003 81.7974 49.0896C81.9366 49.1056 82.0759 49.1217 82.2097 49.1431ZM82.788 49.277C82.6434 49.2341 82.4989 49.1966 82.3489 49.1645C82.4989 49.1966 82.6434 49.2288 82.788 49.277ZM83.2752 49.4537C83.1307 49.3894 82.9808 49.3305 82.8255 49.2877C82.9808 49.3359 83.1307 49.3948 83.2752 49.4537ZM78.5581 49.5286C78.7348 49.4697 78.9061 49.4215 79.0721 49.3733C78.9007 49.4215 78.7294 49.4697 78.5581 49.5286ZM77.7549 49.8178C77.9798 49.7267 78.1993 49.6464 78.4188 49.5768C78.2047 49.6518 77.9798 49.7321 77.7549 49.8178ZM99.7722 58.3366L101.78 57.3139V54.1495L99.7722 58.3366ZM79.5647 56.4144C79.6718 56.4733 79.7788 56.5375 79.8806 56.6125C79.7788 56.5375 79.6718 56.4679 79.5647 56.4144ZM70.8905 84.4286C71.0405 84.3643 71.1904 84.2947 71.3403 84.2144C75.9772 81.8531 77.4925 76.3863 77.4925 66.1647C77.4925 61.8437 77.2248 58.6686 76.5662 56.5964C76.4163 56.6607 76.2663 56.7303 76.1111 56.8106C71.4742 59.1719 69.9589 64.5798 69.9589 74.8603C69.9589 79.1705 70.2319 82.3511 70.8852 84.4232M80.7801 57.6887C80.6998 57.5495 80.6195 57.421 80.5338 57.2978C80.6195 57.4156 80.6998 57.5495 80.7801 57.6887ZM81.0157 58.1599C80.9622 58.0368 80.9032 57.9243 80.8443 57.8119C80.9032 57.9243 80.9568 58.0368 81.0157 58.1599ZM81.0746 58.2938C81.1442 58.4544 81.2085 58.6257 81.2673 58.8024C81.2085 58.6257 81.1389 58.4544 81.0746 58.2938ZM81.6315 60.1143C81.5886 59.9269 81.5458 59.7502 81.503 59.5788C81.5458 59.7502 81.5886 59.9322 81.6315 60.1143ZM81.9099 61.7366C81.8831 61.5332 81.851 61.3351 81.8242 61.1423C81.8564 61.3351 81.8831 61.5332 81.9099 61.7366ZM82.0331 62.7915C82.0063 62.5023 81.9741 62.2292 81.9366 61.9615C81.9688 62.2292 82.0009 62.5077 82.0331 62.7915ZM82.108 63.7017C82.0866 63.4286 82.0652 63.1609 82.0438 62.9039C82.0705 63.1609 82.092 63.4286 82.108 63.7017ZM82.1776 64.7619C82.1616 64.4941 82.1508 64.2371 82.1294 63.9801C82.1455 64.2318 82.1616 64.4941 82.1776 64.7619ZM82.2258 65.9934C82.2151 65.64 82.2044 65.3027 82.1883 64.9707C82.2044 65.3027 82.2151 65.6453 82.2258 65.9934ZM82.2525 67.1178C82.2525 66.8233 82.2419 66.5342 82.2312 66.2557C82.2365 66.5395 82.2472 66.8233 82.2525 67.1178ZM82.2633 68.5956C82.2633 68.1994 82.2633 67.8085 82.2579 67.4337C82.2579 67.8139 82.2633 68.1994 82.2633 68.5956ZM64.1547 79.7328C64.1547 79.5882 64.1494 79.4436 64.144 79.2991C64.144 79.4436 64.1494 79.5882 64.1547 79.7328ZM64.2029 81.1784C64.1975 81.0285 64.1922 80.8732 64.1868 80.718C64.1922 80.8732 64.1975 81.0232 64.2029 81.1784ZM64.2779 82.5063C64.2725 82.3993 64.2672 82.2868 64.2565 82.1797C64.2618 82.2868 64.2672 82.3993 64.2779 82.5063ZM44.6808 86.4043L46.6887 85.3816V82.2172L44.6808 86.4043ZM75.6399 86.8702C75.7952 86.8006 75.9504 86.731 76.1164 86.6453C75.9558 86.731 75.7952 86.8006 75.6399 86.8702ZM75.1794 87.0522C75.2811 87.0147 75.3882 86.9773 75.4953 86.9291C75.3882 86.9719 75.2811 87.0147 75.1794 87.0522ZM72.9895 87.1754C72.9145 87.1486 72.8449 87.1165 72.7699 87.0843C72.8395 87.1165 72.9145 87.1486 72.9895 87.1754ZM73.3322 87.2664C73.2519 87.2503 73.1769 87.2343 73.0965 87.2129C73.1715 87.2343 73.2519 87.2557 73.3322 87.2664ZM74.2745 87.2771C74.3763 87.261 74.4833 87.245 74.5904 87.2182C74.4833 87.2396 74.3763 87.261 74.2745 87.2771ZM74.1728 87.2932C74.055 87.3039 73.9372 87.3146 73.8247 87.3146C73.8247 87.3146 73.8141 87.3146 73.8087 87.3146C73.8141 87.3146 73.8194 87.3146 73.8247 87.3146C73.9372 87.3146 74.055 87.3092 74.1728 87.2932ZM65.5254 89.633C65.4879 89.5313 65.4558 89.4242 65.4237 89.3225C65.4558 89.4296 65.4933 89.5313 65.5254 89.633ZM65.836 90.4362C65.8039 90.3612 65.7717 90.2809 65.745 90.2006C65.7771 90.2809 65.8039 90.3612 65.836 90.4362ZM66.682 92.0157C66.6338 91.9408 66.5856 91.8712 66.5374 91.7962C66.5856 91.8712 66.6338 91.9461 66.682 92.0157ZM67.5601 93.0706C67.5601 93.0706 67.528 93.0384 67.5173 93.0224C67.5334 93.0384 67.5494 93.0545 67.5601 93.0706ZM68.2133 93.5846C68.1598 93.5471 68.1009 93.515 68.0474 93.4721C68.1009 93.5096 68.1544 93.5471 68.2133 93.5846ZM107.472 29.4282C107.306 29.4282 107.14 29.4657 106.985 29.546L101.014 32.5873C100.806 32.6944 100.634 32.8657 100.532 33.0799L88.6993 57.8226C88.0085 52.9019 86.52 49.9516 84.1106 48.6773C84.0838 48.6612 84.0516 48.6451 84.0249 48.6291L79.2541 46.1982C78.4188 45.7698 77.4764 45.5557 76.4538 45.5557C74.8207 45.5557 72.9895 46.0857 70.8477 47.1727C62.1575 51.6008 58.2809 60.307 58.2809 75.4064C58.2809 77.2108 58.3398 78.8814 58.4523 80.4021L58.2167 80.2843V61.0084C58.2167 60.6069 57.9918 60.2374 57.6331 60.0554L52.8623 57.6245C52.707 57.5442 52.541 57.5067 52.3751 57.5067C52.2091 57.5067 52.0431 57.5442 51.8878 57.6245L45.9177 60.6658C45.7088 60.7728 45.5375 60.9442 45.4357 61.1584L30.422 92.5512C30.3524 92.6958 30.3149 92.851 30.3149 93.0117V99.3245C30.3149 99.7261 30.5398 100.096 30.8986 100.278L35.6693 102.708C35.8246 102.789 35.9906 102.826 36.1566 102.826C36.3226 102.826 36.4886 102.789 36.6438 102.708L45.6017 98.1412V102.259C45.6017 102.66 45.8266 103.03 46.1854 103.212L50.9561 105.643C51.1114 105.723 51.2774 105.76 51.4434 105.76C51.6094 105.76 51.7754 105.723 51.9306 105.643L57.6224 102.741C57.9811 102.559 58.206 102.189 58.206 101.788V91.7159L61.0545 90.2649C61.7185 91.2233 62.5056 91.9354 63.4158 92.4013L68.1866 94.8322C69.0272 95.2551 69.975 95.4747 71.003 95.4747C72.6308 95.4747 74.4566 94.95 76.5823 93.8684C83.634 90.2756 87.516 83.8128 88.7207 73.602L90.7553 74.6407C90.9106 74.7211 91.0766 74.7585 91.2426 74.7585C91.4086 74.7585 91.5746 74.7211 91.7299 74.6407L100.688 70.0734V74.191C100.688 74.5925 100.913 74.962 101.271 75.1441L106.042 77.5749C106.197 77.6553 106.363 77.6927 106.529 77.6927C106.695 77.6927 106.861 77.6553 107.017 77.5749L112.708 74.6729C113.067 74.4908 113.292 74.1214 113.292 73.7198V63.6482L116.612 61.9562C116.97 61.7741 117.195 61.4047 117.195 61.0031V54.8562C117.195 54.4547 116.97 54.0852 116.612 53.9032L113.292 52.2112V32.9353C113.292 32.5338 113.067 32.1643 112.708 31.9823L107.938 29.5514C107.782 29.4711 107.616 29.4336 107.45 29.4336L107.472 29.4282ZM71.592 82.8383C71.2172 80.975 71.0351 78.346 71.0351 74.8656C71.0351 65.2545 72.4058 60.4409 75.8701 58.192C76.2449 60.0554 76.427 62.6844 76.427 66.1647C76.427 75.7759 75.0563 80.5895 71.592 82.8383Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+      />
+      <path
+        d="M106.551 65.8862V76.6111L101.78 74.1802V63.4553L106.551 65.8862Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M116.146 54.8508L112.243 56.8427L107.472 54.4118L111.375 52.4253L116.146 54.8508Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M96.6826 64.7726L106.551 59.7449L101.78 57.314L91.9119 62.3417L96.6826 64.7726Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M106.551 59.7448V44.2117L101.78 41.7808V57.3139L106.551 59.7448Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M112.242 32.9299L106.278 35.9712L101.507 33.5403L107.472 30.499L112.242 32.9299Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M106.278 35.9712L91.264 67.364L86.4932 64.9331L101.507 33.5403L106.278 35.9712Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M91.264 67.364V73.6768L86.4932 71.2459V64.9331L91.264 67.364Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M112.243 32.9299V56.8427L116.146 54.8562V61.003L112.243 62.9895V73.7144L106.551 76.6164V65.8916L91.264 73.6822V67.3694L106.278 35.9766L112.248 32.9353L112.243 32.9299ZM106.551 59.7447V44.2116L96.6827 64.7725L106.551 59.7447Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M72.695 87.0575C73.5731 87.5072 74.6975 87.368 76.1111 86.6505C80.748 84.2892 82.2633 78.8224 82.2633 68.6009C82.2633 61.4688 81.5351 57.4209 79.5379 56.4036L74.7671 53.9727C76.7643 54.99 77.4926 59.0326 77.4926 66.17C77.4926 76.3915 75.9772 81.8583 71.3403 84.2196C69.9267 84.9425 68.8024 85.0763 67.9243 84.6266L72.695 87.0575Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M83.5483 49.582C81.7278 48.6557 79.2862 48.9448 76.1164 50.5618C67.2549 55.0756 64.1333 64.0978 64.1333 77.8425C64.1333 86.6344 65.4184 92.2137 68.6899 93.8789L63.9191 91.448C60.6476 89.7828 59.3625 84.2035 59.3625 75.4116C59.3625 61.6669 62.4841 52.6501 71.3457 48.1309C74.5208 46.5139 76.9571 46.2248 78.7776 47.1511L83.5483 49.582Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M76.1164 50.5564C84.978 46.0427 88.0996 51.879 88.0996 65.6237C88.0996 79.3684 84.978 88.3852 76.1164 92.9043C67.2549 97.4181 64.1333 91.5229 64.1333 77.8371C64.1333 64.1512 67.2549 55.0755 76.1164 50.5564ZM69.9642 74.8654C69.9642 85.0869 71.4795 89.0117 76.1164 86.6451C80.7533 84.2838 82.2686 78.8169 82.2686 68.5954C82.2686 58.3738 80.7533 54.4491 76.1164 56.8157C71.4795 59.177 69.9642 64.5849 69.9642 74.8654Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M51.4594 93.9592V104.684L46.6887 102.253V91.5283L51.4594 93.9592Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M61.0545 82.9238L57.1512 84.9103L52.3804 82.4794L56.2838 80.4929L61.0545 82.9238Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M41.5913 92.8403L51.4594 87.8125L46.6887 85.3816L36.8205 90.4094L41.5913 92.8403Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M51.4594 87.8124V72.2847L46.6887 69.8538V85.3815L51.4594 87.8124Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M57.1511 61.0029L51.1863 64.0442L46.4156 61.6133L52.3804 58.572L57.1511 61.0029Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M51.1864 64.0442L36.1726 95.437L31.4019 93.0061L46.4156 61.6133L51.1864 64.0442Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M36.1726 95.437V101.75L31.4019 99.3189V93.0061L36.1726 95.437Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M57.1512 61.0029V84.9157L61.0545 82.9292V89.076L57.1512 91.0625V101.787L51.4595 104.689V93.9646L36.1727 101.755V95.4424L51.1864 64.0496L57.1565 61.0083L57.1512 61.0029ZM51.4595 87.8124V72.2793L41.5913 92.8402L51.4595 87.8124Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx b/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx
new file mode 100644
index 0000000..fd81f1b
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/archived-cycle.tsx
@@ -0,0 +1,365 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="174"
+      viewBox="0 0 161 174"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M0.25 139.223C0.25 141.24 1.75994 143.252 4.77448 144.793L43.59 164.572C49.6244 167.645 59.4043 167.645 65.4388 164.572L147.002 123.014C150.017 121.477 151.527 119.466 151.527 117.449V123.889C151.527 125.906 150.017 127.917 147.002 129.454L65.4388 171.012C59.4043 174.085 49.6244 174.085 43.59 171.012L4.77448 151.233C1.7546 149.697 0.25 147.68 0.25 145.663V139.223Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 139.223C0.25 137.206 1.75994 135.194 4.77448 133.658L86.3378 92.0998C92.3722 89.0266 102.152 89.0266 108.187 92.0998L147.002 111.878C150.022 113.415 151.527 115.432 151.527 117.449C151.527 119.465 150.017 121.477 147.002 123.014L65.4388 164.572C59.4043 167.645 49.6244 167.645 43.59 164.572L4.77448 144.793C1.7546 143.256 0.25 141.24 0.25 139.223Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M0.25 118.88C0.25 120.896 1.75994 122.908 4.77448 124.45L43.59 144.228C49.6244 147.302 59.4043 147.302 65.4388 144.228L147.002 102.67C150.017 101.134 151.527 99.1223 151.527 97.1055V103.545C151.527 105.562 150.017 107.574 147.002 109.11L65.4388 150.668C59.4043 153.741 49.6244 153.741 43.59 150.668L4.77448 130.884C1.7546 129.348 0.25 127.331 0.25 125.314V118.874V118.88Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 118.879C0.25 116.862 1.75994 114.851 4.77448 113.314L86.3378 71.7561C92.3722 68.6829 102.152 68.6829 108.187 71.7561L147.002 91.5347C150.022 93.0713 151.527 95.0881 151.527 97.1049C151.527 99.1217 150.017 101.133 147.002 102.67L65.4388 144.228C59.4043 147.301 49.6244 147.301 43.59 144.228L4.77448 124.444C1.7546 122.907 0.25 120.89 0.25 118.874V118.879Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M0.25 98.5299C0.25 100.547 1.75994 102.558 4.77448 104.1L43.59 123.879C49.6244 126.952 59.4043 126.952 65.4388 123.879L147.002 82.3208C150.017 80.7841 151.527 78.7727 151.527 76.7559V83.1958C151.527 85.2126 150.017 87.224 147.002 88.7607L65.4388 130.319C59.4043 133.392 49.6244 133.392 43.59 130.319L4.77448 110.54C1.7546 109.003 0.25 106.987 0.25 104.97V98.5299Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.25 98.5293C0.25 96.5125 1.75994 94.5011 4.77448 92.9645L86.3378 51.4065C92.3722 48.3333 102.152 48.3333 108.187 51.4065L147.002 71.1851C150.022 72.7217 151.527 74.7385 151.527 76.7553C151.527 78.7721 150.017 80.7836 147.002 82.3202L65.4388 123.878C59.4043 126.951 49.6244 126.951 43.59 123.878L4.77448 104.1C1.7546 102.563 0.25 100.546 0.25 98.5293Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M64.2865 95.4661C63.5182 95.4661 62.8086 95.3007 62.163 94.9699L57.4091 92.5476C55.6858 91.6726 54.6293 89.6878 54.5013 87.1001L53.1781 60.412C53.1674 60.204 53.2795 60.0065 53.4662 59.9105L55.9579 58.6407L51.22 56.229C49.9875 55.5994 49.2832 54.1695 49.2832 52.3075V50.0719C49.2832 46.8066 51.4761 43.0344 54.1705 41.6632L96.4381 20.1239C97.1264 19.7718 97.804 19.5957 98.4549 19.5957C98.9671 19.5957 99.4419 19.7077 99.8741 19.9265L104.628 22.3488C105.861 22.9784 106.565 24.4083 106.565 26.2757V28.5113C106.565 31.7766 104.372 35.5434 101.678 36.92L98.9297 38.3179L102.382 40.0786C102.569 40.1746 102.681 40.372 102.67 40.5801L101.347 68.618C101.107 73.6333 97.7559 79.1716 93.7116 81.2257L67.3544 94.6551C66.298 95.194 65.2629 95.4661 64.2759 95.4661H64.2865Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M98.4548 20.1296C98.8816 20.1296 99.2818 20.2256 99.6286 20.4017L104.382 22.824C105.391 23.3362 106.026 24.5527 106.026 26.2707V28.5063C106.026 31.5902 103.966 35.1436 101.432 36.4401L97.7505 38.3182L102.136 40.5538L100.813 68.5917C100.584 73.4363 97.3663 78.7717 93.4714 80.7512L67.1142 94.1806C66.1112 94.6928 65.1561 94.9329 64.2811 94.9329C63.5928 94.9329 62.9632 94.7835 62.3977 94.4954L57.6438 92.0731C56.1445 91.3101 55.1521 89.5654 55.0294 87.0791L53.7062 60.391L57.5211 58.4489C57.4784 58.4489 57.4304 58.4489 57.3877 58.4489C56.9608 58.4489 56.566 58.3582 56.2139 58.1768L51.46 55.7545C50.4516 55.2423 49.8166 54.0258 49.8166 52.3078V50.0722C49.8166 46.9883 51.8708 43.4349 54.4105 42.1384L96.6781 20.5991C97.3076 20.279 97.9052 20.1296 98.4494 20.1296M98.4548 19.0625C97.7238 19.0625 96.9608 19.2599 96.1979 19.6494L53.9303 41.1887C51.0278 42.6666 48.7549 46.5668 48.7549 50.0722V52.3078C48.7549 54.3833 49.5659 55.9839 50.9851 56.7096L54.7893 58.6463L53.2313 59.4413C52.8579 59.6334 52.6284 60.0229 52.6498 60.4444L53.973 87.1324C54.1064 89.9122 55.2748 92.0624 57.1689 93.0281L61.9228 95.4504C62.6431 95.8186 63.4381 96.0053 64.2864 96.0053C65.3535 96.0053 66.474 95.7118 67.6051 95.1356L93.9623 81.7062C98.2307 79.54 101.635 73.9218 101.885 68.645L103.209 40.6071C103.23 40.1856 103.001 39.7961 102.627 39.6041L100.109 38.3182L101.923 37.3952C104.825 35.9172 107.098 32.0117 107.098 28.5116V26.2761C107.098 24.2006 106.287 22.5999 104.868 21.8743L100.114 19.452C99.6072 19.1959 99.047 19.0625 98.4548 19.0625Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.141 40.5532L58.4653 62.8127L53.7114 60.3904L97.3876 38.1309L102.141 40.5532Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M58.4653 62.8129L59.7885 89.5009C59.9112 91.9873 60.9036 93.732 62.4029 94.4949L57.649 92.0726C56.1497 91.3097 55.1573 89.565 55.0346 87.0786L53.7114 60.3906L58.4653 62.8129Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.141 40.5527L100.818 68.5906C100.589 73.4352 97.3716 78.7707 93.4767 80.7502L67.1195 94.1795C65.3321 95.0919 63.6834 95.1506 62.4029 94.4943C60.9036 93.7313 59.9112 91.9867 59.7885 89.5003L58.4653 62.8123L102.141 40.5527Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M104.388 22.824C103.587 22.4185 102.563 22.4505 101.437 23.0214L59.1695 44.5607C56.6298 45.8519 54.5757 49.4053 54.5757 52.4945V54.7301C54.5757 56.4534 55.2159 57.6646 56.219 58.1768L51.4651 55.7545C50.4567 55.2423 49.8218 54.0258 49.8218 52.3078V50.0722C49.8218 46.9883 51.8759 43.4349 54.4156 42.1384L96.6832 20.5991C97.8036 20.0282 98.8334 19.9908 99.6337 20.4017L104.388 22.824Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M104.388 22.8236C105.396 23.3358 106.031 24.5522 106.031 26.2703V28.5058C106.031 31.5897 103.971 35.1431 101.437 36.4397L59.1695 57.9789C58.0491 58.5498 57.0193 58.5872 56.219 58.1764C55.2106 57.6642 54.5757 56.4477 54.5757 54.7296V52.4941C54.5757 49.4102 56.6298 45.8568 59.1695 44.5602L101.437 23.021C102.558 22.4501 103.587 22.4127 104.388 22.8236Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M85.2656 83.1996C85.0095 83.1996 84.7748 83.1463 84.556 83.0342C84.5026 83.0076 84.4546 82.9809 84.4066 82.9435L79.6847 80.5372C79.6847 80.5372 79.642 80.5106 79.6207 80.4999L72.2684 75.3031C71.2974 74.6949 71.1746 73.0142 72.0176 71.4936C72.6366 70.3625 73.6236 69.6315 74.536 69.6315C74.7921 69.6315 75.0322 69.6902 75.2509 69.8023L78.8524 71.6377V58.6351C78.8524 57.1946 79.7861 55.5939 80.9812 54.9857C81.3014 54.8256 81.6215 54.7402 81.9309 54.7402C82.1871 54.7402 82.4325 54.7989 82.6512 54.911L87.4051 57.3333C88.0081 57.6427 88.3549 58.315 88.3549 59.1847V62.3646C88.6803 62.1939 89.0165 62.0978 89.3366 62.0978C89.5927 62.0978 89.8274 62.1512 90.0462 62.2632L94.8001 64.6855C94.8375 64.7069 94.8748 64.7282 94.9121 64.7496C95.9045 65.3738 96.0273 67.0545 95.1896 68.5751C95.1629 68.6285 95.1202 68.7032 95.0775 68.7672L87.7413 81.4336C87.1117 82.5274 86.1673 83.205 85.271 83.205L85.2656 83.1996Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M81.9254 55.2683C82.1015 55.2683 82.2615 55.3056 82.4056 55.3803L87.1595 57.8026C87.5597 58.0054 87.8158 58.4909 87.8158 59.1792V63.4475C88.2906 62.9247 88.8455 62.6259 89.331 62.6259C89.4964 62.6259 89.6512 62.6632 89.7952 62.7326L94.5491 65.1549C94.5491 65.1549 94.5971 65.1816 94.6238 65.1976C95.3654 65.6618 95.4081 67.0543 94.7145 68.3135C94.6878 68.3668 94.6558 68.4202 94.6238 68.4682L87.2715 81.1613C86.7273 82.1003 85.9323 82.6659 85.2654 82.6659C85.1 82.6659 84.9399 82.6285 84.7959 82.5592C84.7532 82.5378 84.7158 82.5165 84.6785 82.4845L79.9246 80.0622L72.5723 74.8654C71.8307 74.4013 71.788 73.0034 72.4816 71.7495C73.0205 70.7678 73.8422 70.1649 74.5358 70.1649C74.7065 70.1649 74.8666 70.2022 75.0106 70.2769L79.3857 72.5072V58.6349C79.3857 57.4025 80.2074 55.9779 81.2211 55.4603C81.4719 55.3323 81.7066 55.2736 81.9254 55.2736M81.9254 54.2012C81.5306 54.2012 81.1357 54.3025 80.7409 54.5C79.359 55.2042 78.3186 56.9809 78.3186 58.6296V70.7625L75.4962 69.3219C75.2027 69.1725 74.8772 69.0978 74.5358 69.0978C73.4153 69.0978 72.2682 69.9195 71.5479 71.2373C70.5608 73.0194 70.7476 74.9508 71.9801 75.7511L79.311 80.9319C79.3537 80.9639 79.3964 80.9906 79.4444 81.0119L84.1396 83.4075C84.1983 83.4449 84.257 83.4769 84.3157 83.5089C84.6091 83.6583 84.9293 83.733 85.2654 83.733C86.3485 83.733 87.4689 82.954 88.1946 81.6948L95.5308 69.0284C95.5789 68.9537 95.6215 68.8844 95.6589 68.8097C96.6406 67.0116 96.4379 65.0749 95.1894 64.2905C95.1414 64.2585 95.088 64.2319 95.0346 64.2052L90.2807 61.7829C89.9873 61.6335 89.6672 61.5588 89.331 61.5588C89.1816 61.5588 89.0322 61.5748 88.8828 61.6015V59.1792C88.8828 58.1014 88.4293 57.2531 87.645 56.8529L82.8911 54.4306C82.5923 54.2812 82.2722 54.2012 81.9254 54.2012Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M94.5546 65.154C93.813 64.7752 92.6979 65.4154 92.031 66.6319L87.8213 73.9095L83.0674 71.4872L87.2771 64.2096C87.9493 62.9931 89.0591 62.3529 89.8007 62.7317L94.5546 65.154Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M79.7647 72.6935C79.0178 72.3094 77.9026 72.9496 77.2357 74.1715C76.5421 75.4253 76.5848 76.8232 77.3264 77.2874L84.6787 82.4841L79.9248 80.0618L72.5725 74.8651C71.8309 74.4009 71.7882 73.003 72.4818 71.7492C73.1488 70.5273 74.2585 69.8924 75.0108 70.2712L79.7647 72.6935Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M87.1595 57.8023C86.8394 57.6369 86.4232 57.6476 85.975 57.877C84.9613 58.3946 84.1396 59.8191 84.1396 61.0516V75.7829L79.3857 73.3606V58.6293C79.3857 57.3968 80.2074 55.9723 81.2211 55.4547C81.6693 55.2253 82.0855 55.2146 82.4056 55.38L87.1595 57.8023Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M87.1597 57.8019C87.5599 58.0046 87.816 58.4902 87.816 59.1784V73.9097L92.0256 66.6321C92.6979 65.4156 93.8077 64.7754 94.5493 65.1542C94.576 65.1648 94.5973 65.1809 94.624 65.1969C95.3657 65.661 95.4083 67.0536 94.7147 68.3128C94.688 68.3661 94.656 68.4195 94.624 68.4675L87.2717 81.1606C86.5941 82.329 85.5164 82.9213 84.7961 82.5585C84.7534 82.5371 84.7161 82.5158 84.6787 82.4838L77.3264 77.287C76.5848 76.8228 76.5421 75.425 77.2357 74.1711C77.9027 72.9493 79.0124 72.3144 79.7647 72.6932C79.7914 72.7039 79.8128 72.7199 79.8341 72.7359C79.8608 72.7572 79.8928 72.7786 79.9248 72.7999L84.1398 75.7824V61.0512C84.1398 59.8187 84.9615 58.3941 85.9752 57.8766C86.4234 57.6472 86.8396 57.6365 87.1597 57.8019Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M156.894 42.0707C157.492 41.7666 157.87 41.0463 157.87 40.0219V26.9394C157.87 25.104 156.649 22.9911 155.139 22.2228L121.285 4.97323C120.618 4.63176 120.005 4.61576 119.53 4.85585L121.909 3.6447C122.384 3.4046 122.998 3.42061 123.665 3.76208L157.518 21.0117C159.028 21.78 160.25 23.8928 160.25 25.7282V38.8108C160.25 39.8352 159.871 40.5555 159.274 40.8596L156.894 42.0707Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M156.894 42.0711C156.419 42.3111 155.805 42.2951 155.139 41.9537L121.285 24.7041C119.775 23.9358 118.553 21.823 118.553 19.9875V6.91032C118.553 5.88591 118.932 5.16562 119.53 4.8615C120.004 4.6214 120.618 4.63741 121.285 4.97888L155.139 22.2284C156.648 22.9968 157.87 25.1096 157.87 26.945V40.0276C157.87 41.052 157.491 41.7723 156.894 42.0764V42.0711Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M132.449 16.9121C132.469 16.898 132.553 16.8494 132.758 16.9541L132.759 16.9551L140.612 20.9561L140.614 20.957C140.827 21.0642 141.056 21.2905 141.233 21.5977C141.41 21.9022 141.508 22.2394 141.508 22.5273C141.508 22.8188 141.413 22.9254 141.377 22.9512C141.358 22.965 141.273 23.0155 141.067 22.9102L141.066 22.9092L133.213 18.9072L133.211 18.9062L133.131 18.8613C132.942 18.7422 132.748 18.5354 132.593 18.2666C132.416 17.9619 132.317 17.624 132.317 17.3359C132.317 17.0435 132.414 16.9372 132.449 16.9121Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+      <path
+        d="M132.675 22.3438C132.78 22.27 132.982 22.2159 133.32 22.3867V22.3857L144.332 27.999C144.674 28.1733 145.02 28.5235 145.283 28.9766C145.544 29.4273 145.696 29.9341 145.696 30.3818C145.696 30.8319 145.548 31.0523 145.428 31.1367C145.324 31.2104 145.121 31.2635 144.784 31.0928L133.773 25.4805C133.431 25.3062 133.084 24.9569 132.821 24.5039C132.559 24.0532 132.408 23.5464 132.408 23.0986C132.408 22.6484 132.556 22.4282 132.675 22.3438Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+      <mask id="path-24-inside-1_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M126.391 15.2927C126.444 15.4687 126.567 15.6395 126.706 15.7088C126.898 15.8102 127.058 15.6928 127.058 15.4527V15.0099C127.058 14.8658 127.004 14.7004 126.908 14.5724C126.812 14.4443 126.695 14.3643 126.583 14.3589L124.315 14.2949C124.182 14.2949 124.091 14.407 124.091 14.5884V17.6403C124.091 17.795 124.155 17.9657 124.257 18.0991C124.363 18.2325 124.491 18.3019 124.598 18.2859L124.924 18.2378C125.094 18.2112 125.158 17.9817 125.073 17.7256C125.014 17.5549 124.908 17.4162 124.79 17.3468V15.2393L126.386 15.282L126.391 15.2927Z"
+        />
+      </mask>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M126.391 15.2927C126.444 15.4687 126.567 15.6395 126.706 15.7088C126.898 15.8102 127.058 15.6928 127.058 15.4527V15.0099C127.058 14.8658 127.004 14.7004 126.908 14.5724C126.812 14.4443 126.695 14.3643 126.583 14.3589L124.315 14.2949C124.182 14.2949 124.091 14.407 124.091 14.5884V17.6403C124.091 17.795 124.155 17.9657 124.257 18.0991C124.363 18.2325 124.491 18.3019 124.598 18.2859L124.924 18.2378C125.094 18.2112 125.158 17.9817 125.073 17.7256C125.014 17.5549 124.908 17.4162 124.79 17.3468V15.2393L126.386 15.282L126.391 15.2927Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M126.391 15.2927L127.348 15.0026L127.323 14.9215L127.285 14.8456L126.391 15.2927ZM126.706 15.7088L127.172 14.8244L127.163 14.8193L127.153 14.8144L126.706 15.7088ZM126.583 14.3589L126.631 13.3601L126.621 13.3596L126.611 13.3593L126.583 14.3589ZM124.315 14.2949L124.344 13.2953L124.33 13.2949H124.315V14.2949ZM124.257 18.0991L123.461 18.7042L123.468 18.7141L123.476 18.7238L124.257 18.0991ZM124.598 18.2859L124.452 17.2966L124.45 17.2969L124.598 18.2859ZM124.924 18.2378L125.07 19.2272L125.078 19.2258L124.924 18.2378ZM125.073 17.7256L126.022 17.4094L126.019 17.4005L125.073 17.7256ZM124.79 17.3468H123.79V17.9174L124.282 18.2077L124.79 17.3468ZM124.79 15.2393L124.817 14.2397L123.79 14.2122V15.2393H124.79ZM126.386 15.282L127.28 14.835L127.012 14.2984L126.412 14.2823L126.386 15.282ZM126.391 15.2927L125.434 15.5827C125.54 15.9324 125.801 16.3747 126.258 16.6032L126.706 15.7088L127.153 14.8144C127.211 14.8433 127.25 14.8739 127.273 14.8943C127.296 14.9151 127.31 14.9325 127.318 14.9431C127.332 14.9614 127.341 14.9786 127.348 15.0026L126.391 15.2927ZM126.706 15.7088L126.239 16.5932C126.585 16.7758 127.098 16.8416 127.543 16.5168C127.949 16.2205 128.058 15.7714 128.058 15.4527H127.058H126.058C126.058 15.3742 126.086 15.1038 126.365 14.9008C126.682 14.6694 127.019 14.7432 127.172 14.8244L126.706 15.7088ZM127.058 15.4527H128.058V15.0099H127.058H126.058V15.4527H127.058ZM127.058 15.0099H128.058C128.058 14.6457 127.932 14.2705 127.708 13.9724L126.908 14.5724L126.108 15.1724C126.087 15.1443 126.077 15.1212 126.071 15.1039C126.066 15.0874 126.058 15.0572 126.058 15.0099H127.058ZM126.908 14.5724L127.708 13.9724C127.529 13.7329 127.169 13.3857 126.631 13.3601L126.583 14.3589L126.535 15.3578C126.37 15.3499 126.256 15.2906 126.199 15.2532C126.142 15.2152 126.115 15.1813 126.108 15.1724L126.908 14.5724ZM126.583 14.3589L126.611 13.3593L124.344 13.2953L124.315 14.2949L124.287 15.2945L126.555 15.3585L126.583 14.3589ZM124.315 14.2949V13.2949C123.94 13.2949 123.592 13.4654 123.363 13.7604C123.152 14.0325 123.091 14.3418 123.091 14.5884H124.091H125.091C125.091 14.6535 125.076 14.8162 124.943 14.9868C124.793 15.1805 124.557 15.2949 124.315 15.2949V14.2949ZM124.091 14.5884H123.091V17.6403H124.091H125.091V14.5884H124.091ZM124.091 17.6403H123.091C123.091 18.0468 123.249 18.4253 123.461 18.7042L124.257 18.0991L125.053 17.494C125.064 17.5081 125.07 17.5207 125.076 17.5353C125.08 17.5486 125.091 17.5834 125.091 17.6403H124.091ZM124.257 18.0991L123.476 18.7238C123.671 18.9684 124.117 19.3692 124.747 19.2748L124.598 18.2859L124.45 17.2969C124.667 17.2643 124.829 17.3284 124.906 17.3706C124.986 17.4142 125.025 17.4592 125.038 17.4744L124.257 18.0991ZM124.598 18.2859L124.744 19.2751L125.07 19.2271L124.924 18.2378L124.778 17.2485L124.452 17.2966L124.598 18.2859ZM124.924 18.2378L125.078 19.2258C125.655 19.1357 125.955 18.6942 126.055 18.3443C126.151 18.011 126.111 17.6778 126.022 17.4094L125.073 17.7256L124.124 18.0419C124.12 18.0296 124.091 17.9391 124.133 17.7912C124.156 17.7126 124.207 17.595 124.317 17.4826C124.434 17.3627 124.593 17.2774 124.769 17.2498L124.924 18.2378ZM125.073 17.7256L126.019 17.4005C125.902 17.06 125.666 16.7029 125.299 16.4859L124.79 17.3468L124.282 18.2077C124.207 18.1639 124.169 18.1193 124.155 18.0995C124.138 18.0774 124.131 18.0609 124.127 18.0507L125.073 17.7256ZM124.79 17.3468H125.79V15.2393H124.79H123.79V17.3468H124.79ZM124.79 15.2393L124.764 16.2389L126.359 16.2816L126.386 15.282L126.412 14.2823L124.817 14.2397L124.79 15.2393ZM126.386 15.282L125.491 15.729L125.496 15.7397L126.391 15.2927L127.285 14.8456L127.28 14.835L126.386 15.282Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-24-inside-1_637_1524)"
+      />
+      <mask id="path-26-inside-2_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M124.998 13.2751C125.052 13.4511 125.174 13.6219 125.313 13.6912C125.505 13.7926 125.665 13.6752 125.665 13.4351V12.9923C125.665 12.8482 125.612 12.6828 125.516 12.5548C125.42 12.4267 125.302 12.3467 125.19 12.3414L122.923 12.2773C122.789 12.2773 122.699 12.3894 122.699 12.5708V15.6227C122.699 15.7774 122.763 15.9481 122.864 16.0815C122.971 16.2149 123.099 16.2843 123.206 16.2683L123.531 16.2203C123.702 16.1936 123.766 15.9642 123.68 15.708C123.622 15.5373 123.515 15.3986 123.398 15.3292V13.2217L124.993 13.2644L124.998 13.2751Z"
+        />
+      </mask>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M124.998 13.2751C125.052 13.4511 125.174 13.6219 125.313 13.6912C125.505 13.7926 125.665 13.6752 125.665 13.4351V12.9923C125.665 12.8482 125.612 12.6828 125.516 12.5548C125.42 12.4267 125.302 12.3467 125.19 12.3414L122.923 12.2773C122.789 12.2773 122.699 12.3894 122.699 12.5708V15.6227C122.699 15.7774 122.763 15.9481 122.864 16.0815C122.971 16.2149 123.099 16.2843 123.206 16.2683L123.531 16.2203C123.702 16.1936 123.766 15.9642 123.68 15.708C123.622 15.5373 123.515 15.3986 123.398 15.3292V13.2217L124.993 13.2644L124.998 13.2751Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M124.998 13.2751L125.955 12.9851L125.931 12.9039L125.893 12.8281L124.998 13.2751ZM125.313 13.6912L125.78 12.8069L125.77 12.8017L125.76 12.7968L125.313 13.6912ZM125.19 12.3414L125.238 11.3425L125.228 11.342L125.219 11.3418L125.19 12.3414ZM122.923 12.2773L122.951 11.2777L122.937 11.2773H122.923V12.2773ZM122.864 16.0815L122.068 16.6866L122.075 16.6965L122.083 16.7062L122.864 16.0815ZM123.206 16.2683L123.06 15.279L123.057 15.2793L123.206 16.2683ZM123.531 16.2203L123.677 17.2096L123.685 17.2083L123.531 16.2203ZM123.68 15.708L124.629 15.3918L124.626 15.383L123.68 15.708ZM123.398 15.3292H122.398V15.8999L122.889 16.1902L123.398 15.3292ZM123.398 13.2217L123.424 12.2221L122.398 12.1946V13.2217H123.398ZM124.993 13.2644L125.888 12.8174L125.619 12.2808L125.02 12.2648L124.993 13.2644ZM124.998 13.2751L124.041 13.5651C124.147 13.9148 124.409 14.3572 124.866 14.5857L125.313 13.6912L125.76 12.7968C125.818 12.8257 125.857 12.8563 125.88 12.8767C125.903 12.8976 125.918 12.9149 125.925 12.9255C125.939 12.9438 125.948 12.961 125.955 12.9851L124.998 13.2751ZM125.313 13.6912L124.846 14.5756C125.192 14.7582 125.705 14.824 126.15 14.4993C126.557 14.2029 126.665 13.7538 126.665 13.4351H125.665H124.665C124.665 13.3566 124.694 13.0862 124.972 12.8832C125.289 12.6519 125.626 12.7257 125.78 12.8069L125.313 13.6912ZM125.665 13.4351H126.665V12.9923H125.665H124.665V13.4351H125.665ZM125.665 12.9923H126.665C126.665 12.6282 126.539 12.2529 126.316 11.9548L125.516 12.5548L124.716 13.1548C124.695 13.1267 124.685 13.1036 124.679 13.0863C124.673 13.0698 124.665 13.0396 124.665 12.9923H125.665ZM125.516 12.5548L126.316 11.9548C126.136 11.7153 125.776 11.3681 125.238 11.3425L125.19 12.3414L125.143 13.3402C124.978 13.3324 124.863 13.273 124.807 13.2357C124.749 13.1976 124.723 13.1638 124.716 13.1548L125.516 12.5548ZM125.19 12.3414L125.219 11.3418L122.951 11.2777L122.923 12.2773L122.895 13.2769L125.162 13.341L125.19 12.3414ZM122.923 12.2773V11.2773C122.548 11.2773 122.2 11.4478 121.971 11.7428C121.76 12.0149 121.699 12.3242 121.699 12.5708H122.699H123.699C123.699 12.636 123.683 12.7986 123.551 12.9693C123.4 13.1629 123.165 13.2773 122.923 13.2773V12.2773ZM122.699 12.5708H121.699V15.6227H122.699H123.699V12.5708H122.699ZM122.699 15.6227H121.699C121.699 16.0292 121.856 16.4077 122.068 16.6866L122.864 16.0815L123.66 15.4764C123.671 15.4905 123.678 15.5032 123.683 15.5177C123.688 15.5311 123.699 15.5658 123.699 15.6227H122.699ZM122.864 16.0815L122.083 16.7062C122.279 16.9508 122.725 17.3516 123.354 17.2572L123.206 16.2683L123.057 15.2793C123.274 15.2468 123.436 15.3109 123.514 15.353C123.594 15.3966 123.633 15.4416 123.645 15.4568L122.864 16.0815ZM123.206 16.2683L123.352 17.2576L123.677 17.2095L123.531 16.2203L123.385 15.231L123.06 15.279L123.206 16.2683ZM123.531 16.2203L123.685 17.2083C124.262 17.1182 124.562 16.6767 124.663 16.3267C124.759 15.9934 124.719 15.6602 124.629 15.3918L123.68 15.708L122.732 16.0243C122.728 16.012 122.698 15.9216 122.741 15.7736C122.763 15.695 122.814 15.5775 122.924 15.465C123.042 15.3451 123.2 15.2598 123.377 15.2322L123.531 16.2203ZM123.68 15.708L124.626 15.383C124.509 15.0424 124.274 14.6853 123.906 14.4683L123.398 15.3292L122.889 16.1902C122.815 16.1464 122.777 16.1017 122.762 16.0819C122.745 16.0598 122.738 16.0433 122.735 16.0331L123.68 15.708ZM123.398 15.3292H124.398V13.2217H123.398H122.398V15.3292H123.398ZM123.398 13.2217L123.371 14.2214L124.966 14.264L124.993 13.2644L125.02 12.2648L123.424 12.2221L123.398 13.2217ZM124.993 13.2644L124.098 13.7114L124.104 13.7221L124.998 13.2751L125.893 12.8281L125.888 12.8174L124.993 13.2644Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-26-inside-2_637_1524)"
+      />
+      <mask id="path-28-inside-3_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M128.456 16.6622C128.36 16.5288 128.242 16.4488 128.136 16.4488L125.868 16.3848C125.735 16.3848 125.644 16.5021 125.644 16.6729V19.7301C125.644 19.8742 125.697 20.0342 125.793 20.1623C125.895 20.2957 126.012 20.3757 126.119 20.3757L128.381 20.4397C128.52 20.4504 128.611 20.333 128.611 20.1516V17.0944C128.611 16.9503 128.557 16.7903 128.456 16.6622ZM127.912 19.5007L126.343 19.4527V17.3345L127.912 17.3825V19.5007Z"
+        />
+      </mask>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M128.456 16.6622C128.36 16.5288 128.242 16.4488 128.136 16.4488L125.868 16.3848C125.735 16.3848 125.644 16.5021 125.644 16.6729V19.7301C125.644 19.8742 125.697 20.0342 125.793 20.1623C125.895 20.2957 126.012 20.3757 126.119 20.3757L128.381 20.4397C128.52 20.4504 128.611 20.333 128.611 20.1516V17.0944C128.611 16.9503 128.557 16.7903 128.456 16.6622ZM127.912 19.5007L126.343 19.4527V17.3345L127.912 17.3825V19.5007Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M128.456 16.6622L127.644 17.2465L127.658 17.265L127.672 17.2829L128.456 16.6622ZM128.136 16.4488L128.107 17.4484L128.122 17.4488H128.136V16.4488ZM125.868 16.3848L125.896 15.3852L125.882 15.3848H125.868V16.3848ZM125.793 20.1623L124.993 20.7623L124.997 20.7674L125.793 20.1623ZM126.119 20.3757L126.147 19.3761L126.133 19.3757H126.119V20.3757ZM128.381 20.4397L128.458 19.4427L128.434 19.4408L128.409 19.4401L128.381 20.4397ZM127.912 19.5007L127.881 20.5002L128.912 20.5318V19.5007H127.912ZM126.343 19.4527H125.343V20.4225L126.312 20.4522L126.343 19.4527ZM126.343 17.3345L126.374 16.3349L125.343 16.3034V17.3345H126.343ZM127.912 17.3825H128.912V16.4126L127.942 16.383L127.912 17.3825ZM128.456 16.6622L129.267 16.0779C129.098 15.8423 128.719 15.4488 128.136 15.4488V16.4488V17.4488C127.939 17.4488 127.804 17.3768 127.743 17.336C127.679 17.2933 127.651 17.2553 127.644 17.2465L128.456 16.6622ZM128.136 16.4488L128.164 15.4492L125.896 15.3852L125.868 16.3848L125.84 17.3844L128.107 17.4484L128.136 16.4488ZM125.868 16.3848V15.3848C125.479 15.3848 125.136 15.5682 124.916 15.8516C124.711 16.1161 124.644 16.4195 124.644 16.6729H125.644H126.644C126.644 16.7555 126.623 16.9149 126.496 17.078C126.355 17.26 126.124 17.3848 125.868 17.3848V16.3848ZM125.644 16.6729H124.644V19.7301H125.644H126.644V16.6729H125.644ZM125.644 19.7301H124.644C124.644 20.1018 124.774 20.4703 124.993 20.7623L125.793 20.1623L126.593 19.5623C126.611 19.5857 126.622 19.6076 126.629 19.6283C126.636 19.6483 126.644 19.6816 126.644 19.7301H125.644ZM125.793 20.1623L124.997 20.7674C125.162 20.9835 125.538 21.3757 126.119 21.3757V20.3757V19.3757C126.316 19.3757 126.45 19.4479 126.507 19.4854C126.566 19.5246 126.59 19.5571 126.59 19.5572L125.793 20.1623ZM126.119 20.3757L126.091 21.3753L128.353 21.4393L128.381 20.4397L128.409 19.4401L126.147 19.3761L126.119 20.3757ZM128.381 20.4397L128.304 21.4368C128.709 21.4679 129.088 21.2971 129.333 20.9873C129.552 20.7101 129.611 20.3938 129.611 20.1516H128.611H127.611C127.611 20.0908 127.624 19.9239 127.763 19.748C127.927 19.5397 128.192 19.4222 128.458 19.4427L128.381 20.4397ZM128.611 20.1516H129.611V17.0944H128.611H127.611V20.1516H128.611ZM128.611 17.0944H129.611C129.611 16.7207 129.478 16.3428 129.24 16.0415L128.456 16.6622L127.672 17.2829C127.65 17.2559 127.637 17.2293 127.628 17.2038C127.619 17.1791 127.611 17.1432 127.611 17.0944H128.611ZM127.912 19.5007L127.942 18.5011L126.374 18.4531L126.343 19.4527L126.312 20.4522L127.881 20.5002L127.912 19.5007ZM126.343 19.4527H127.343V17.3345H126.343H125.343V19.4527H126.343ZM126.343 17.3345L126.312 18.334L127.881 18.382L127.912 17.3825L127.942 16.383L126.374 16.3349L126.343 17.3345ZM127.912 17.3825H126.912V19.5007H127.912H128.912V17.3825H127.912Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-28-inside-3_637_1524)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.75079 62.6861C4.28354 61.9391 3.34983 60.1731 3.34983 57.6601C3.34983 53.1623 6.34837 47.9869 10.0405 46.1088L34.7971 33.4957C36.4297 32.6634 37.9237 32.6101 39.0868 33.2023L36.7072 31.9911C35.5441 31.3989 34.0501 31.4523 32.4175 32.2846L7.66089 44.8976C3.96341 46.7811 0.970215 51.9565 0.970215 56.4489C0.970215 58.9619 1.90392 60.728 3.37118 61.4749L5.75079 62.6861Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.75057 62.6859C6.9137 63.2781 8.40763 63.2248 10.0403 62.3924L34.7969 49.7794C38.4943 47.896 41.4875 42.7205 41.4875 38.2281C41.4875 35.7151 40.5538 33.949 39.0866 33.2021C37.9234 32.6098 36.4295 32.6632 34.7969 33.4955L10.0403 46.1086C6.34281 47.992 3.34961 53.1674 3.34961 57.6599C3.34961 60.1729 4.28332 61.9389 5.75057 62.6859Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <mask id="path-32-inside-4_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path d="M13.4291 50.9543C13.5198 50.8156 13.6532 50.7569 13.7386 50.8156C13.824 50.8743 13.8293 51.0344 13.7546 51.1837L13.7386 51.2158L10.5053 56.802C10.4146 56.9567 10.2705 57.0314 10.1798 56.9674C10.0891 56.9034 10.0891 56.7273 10.1798 56.5672L13.4131 50.981L13.4291 50.9543Z" />
+      </mask>
+      <path
+        d="M13.4291 50.9543C13.5198 50.8156 13.6532 50.7569 13.7386 50.8156C13.824 50.8743 13.8293 51.0344 13.7546 51.1837L13.7386 51.2158L10.5053 56.802C10.4146 56.9567 10.2705 57.0314 10.1798 56.9674C10.0891 56.9034 10.0891 56.7273 10.1798 56.5672L13.4131 50.981L13.4291 50.9543Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M13.4291 50.9543L12.5922 50.4071L12.5816 50.4232L12.5717 50.4398L13.4291 50.9543ZM13.7546 51.1837L12.8602 50.7365L12.8602 50.7366L13.7546 51.1837ZM13.7386 51.2158L14.6041 51.7167L14.6194 51.6903L14.6331 51.6629L13.7386 51.2158ZM10.5053 56.802L11.368 57.3077L11.3708 57.3029L10.5053 56.802ZM10.1798 56.5672L9.31432 56.0663L9.30982 56.0742L10.1798 56.5672ZM13.4131 50.981L12.5557 50.4665L12.5516 50.4732L12.5477 50.4801L13.4131 50.981ZM13.4291 50.9543L14.2661 51.5016C14.2308 51.5556 14.1499 51.6543 13.993 51.7243C13.8325 51.7958 13.4977 51.8635 13.1721 51.6396L13.7386 50.8156L14.3051 49.9916C13.8941 49.709 13.4499 49.7767 13.1787 49.8976C12.9111 50.0169 12.7182 50.2143 12.5922 50.4071L13.4291 50.9543ZM13.7386 50.8156L13.1721 51.6396C12.8572 51.4232 12.8118 51.1133 12.8074 51.006C12.8023 50.8782 12.8341 50.7887 12.8602 50.7365L13.7546 51.1837L14.649 51.631C14.7498 51.4294 14.8163 51.1852 14.8058 50.9253C14.7961 50.6859 14.7053 50.2667 14.3051 49.9916L13.7386 50.8156ZM13.7546 51.1837L12.8602 50.7366L12.8442 50.7686L13.7386 51.2158L14.6331 51.6629L14.6491 51.6309L13.7546 51.1837ZM13.7386 51.2158L12.8731 50.7148L9.63982 56.3011L10.5053 56.802L11.3708 57.3029L14.6041 51.7167L13.7386 51.2158ZM10.5053 56.802L9.64261 56.2963C9.67128 56.2474 9.74082 56.1513 9.88729 56.0764C10.0318 56.0025 10.3967 55.8964 10.7565 56.1504L10.1798 56.9674L9.60316 57.7844C10.0537 58.1024 10.536 57.991 10.7979 57.8571C11.0617 57.7221 11.2486 57.5114 11.368 57.3077L10.5053 56.802ZM10.1798 56.9674L10.7565 56.1504C11.0808 56.3793 11.1118 56.7032 11.1118 56.8033C11.1118 56.9285 11.0768 57.0127 11.0499 57.0602L10.1798 56.5672L9.30982 56.0742C9.19216 56.2819 9.11182 56.5341 9.11182 56.8033C9.11182 57.0475 9.1882 57.4914 9.60316 57.7844L10.1798 56.9674ZM10.1798 56.5672L11.0453 57.0682L14.2786 51.4819L13.4131 50.981L12.5477 50.4801L9.31436 56.0663L10.1798 56.5672ZM13.4131 50.981L14.2706 51.4955L14.2866 51.4689L13.4291 50.9543L12.5717 50.4398L12.5557 50.4665L13.4131 50.981Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-32-inside-4_637_1524)"
+      />
+      <mask id="path-34-inside-5_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path d="M11.0333 52.817C11.0333 52.5822 10.8786 52.4755 10.6865 52.5716C10.4944 52.6676 10.3397 52.9344 10.3397 53.1691C10.3397 53.4039 10.4944 53.5106 10.6865 53.4146C10.8786 53.3185 11.0333 53.0517 11.0333 52.817ZM11.4975 52.5769C11.4975 53.1211 11.1347 53.7454 10.6865 53.9748C10.2383 54.2042 9.87549 53.9481 9.87549 53.4039C9.87549 52.8597 10.2383 52.2354 10.6865 52.006C11.1347 51.7766 11.4975 52.0327 11.4975 52.5769Z" />
+      </mask>
+      <path
+        d="M11.0333 52.817C11.0333 52.5822 10.8786 52.4755 10.6865 52.5716C10.4944 52.6676 10.3397 52.9344 10.3397 53.1691C10.3397 53.4039 10.4944 53.5106 10.6865 53.4146C10.8786 53.3185 11.0333 53.0517 11.0333 52.817ZM11.4975 52.5769C11.4975 53.1211 11.1347 53.7454 10.6865 53.9748C10.2383 54.2042 9.87549 53.9481 9.87549 53.4039C9.87549 52.8597 10.2383 52.2354 10.6865 52.006C11.1347 51.7766 11.4975 52.0327 11.4975 52.5769Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M11.0333 52.817H12.0333C12.0333 52.5036 11.9269 52.0469 11.5065 51.7518C11.0592 51.4377 10.5608 51.5164 10.2393 51.6771L10.6865 52.5716L11.1337 53.466C11.0042 53.5307 10.6793 53.6147 10.3573 53.3886C10.0623 53.1816 10.0333 52.8956 10.0333 52.817H11.0333ZM10.6865 52.5716L10.2393 51.6771C9.92326 51.8351 9.70772 52.0896 9.57611 52.3164C9.44169 52.5481 9.33967 52.8449 9.33967 53.1691H10.3397H11.3397C11.3397 53.2586 11.315 53.3046 11.306 53.3202C11.2988 53.3326 11.2862 53.3513 11.264 53.3739C11.2426 53.3956 11.201 53.4323 11.1337 53.466L10.6865 52.5716ZM10.3397 53.1691H9.33967C9.33967 53.4825 9.4461 53.9392 9.86642 54.2343C10.3138 54.5484 10.8121 54.4698 11.1337 54.309L10.6865 53.4146L10.2393 52.5201C10.3687 52.4554 10.6937 52.3714 11.0157 52.5975C11.3106 52.8046 11.3397 53.0905 11.3397 53.1691H10.3397ZM10.6865 53.4146L11.1337 54.309C11.4497 54.151 11.6652 53.8965 11.7968 53.6697C11.9313 53.438 12.0333 53.1412 12.0333 52.817H11.0333H10.0333C10.0333 52.7275 10.0579 52.6815 10.067 52.6659C10.0742 52.6535 10.0867 52.6348 10.109 52.6122C10.1303 52.5905 10.1719 52.5538 10.2393 52.5201L10.6865 53.4146ZM11.4975 52.5769H10.4975C10.4975 52.6402 10.4713 52.7608 10.3952 52.8919C10.36 52.9525 10.3217 53.0017 10.2871 53.0372C10.2516 53.0735 10.2302 53.085 10.2308 53.0846L10.6865 53.9748L11.1421 54.8649C11.5809 54.6403 11.91 54.2662 12.1249 53.8959C12.3423 53.5215 12.4975 53.0578 12.4975 52.5769H11.4975ZM10.6865 53.9748L10.2308 53.0846C10.2326 53.0837 10.2823 53.0587 10.3733 53.0589C10.4707 53.0592 10.5857 53.0893 10.6889 53.162C10.8968 53.3085 10.8755 53.4771 10.8755 53.4039H9.87549H8.87549C8.87549 53.8749 9.03557 54.4437 9.53696 54.7969C10.0687 55.1716 10.6865 55.0982 11.1421 54.8649L10.6865 53.9748ZM9.87549 53.4039H10.8755C10.8755 53.3406 10.9017 53.22 10.9778 53.0889C11.013 53.0282 11.0512 52.9791 11.0859 52.9436C11.1214 52.9073 11.1428 52.8958 11.1421 52.8961L10.6865 52.006L10.2308 51.1158C9.79209 51.3404 9.463 51.7146 9.24806 52.0849C9.0307 52.4593 8.87549 52.9229 8.87549 53.4039H9.87549ZM10.6865 52.006L11.1421 52.8961C11.1404 52.8971 11.0907 52.9221 10.9997 52.9219C10.9022 52.9216 10.7872 52.8915 10.6841 52.8188C10.4761 52.6723 10.4975 52.5037 10.4975 52.5769H11.4975H12.4975C12.4975 52.1059 12.3374 51.5371 11.836 51.1838C11.3042 50.8092 10.6864 50.8826 10.2308 51.1158L10.6865 52.006Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-34-inside-5_637_1524)"
+      />
+      <mask id="path-36-inside-6_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path d="M13.5728 54.6139C13.5728 54.3791 13.4181 54.2724 13.226 54.3684C13.034 54.4645 12.8792 54.7312 12.8792 54.966C12.8792 55.2008 13.034 55.3075 13.226 55.2114C13.4181 55.1154 13.5728 54.8486 13.5728 54.6139ZM14.037 54.3738C14.037 54.918 13.6742 55.5422 13.226 55.7717C12.7779 56.0011 12.415 55.745 12.415 55.2008C12.415 54.6565 12.7779 54.0323 13.226 53.8029C13.6742 53.5734 14.037 53.8295 14.037 54.3738Z" />
+      </mask>
+      <path
+        d="M13.5728 54.6139C13.5728 54.3791 13.4181 54.2724 13.226 54.3684C13.034 54.4645 12.8792 54.7312 12.8792 54.966C12.8792 55.2008 13.034 55.3075 13.226 55.2114C13.4181 55.1154 13.5728 54.8486 13.5728 54.6139ZM14.037 54.3738C14.037 54.918 13.6742 55.5422 13.226 55.7717C12.7779 56.0011 12.415 55.745 12.415 55.2008C12.415 54.6565 12.7779 54.0323 13.226 53.8029C13.6742 53.5734 14.037 53.8295 14.037 54.3738Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M13.5728 54.6139H14.5728C14.5728 54.3005 14.4664 53.8438 14.0461 53.5487C13.5987 53.2346 13.1004 53.3132 12.7788 53.474L13.226 54.3684L13.6732 55.2629C13.5438 55.3276 13.2188 55.4116 12.8968 55.1855C12.6019 54.9784 12.5728 54.6925 12.5728 54.6139H13.5728ZM13.226 54.3684L12.7788 53.474C12.4628 53.632 12.2473 53.8865 12.1157 54.1133C11.9812 54.345 11.8792 54.6417 11.8792 54.966H12.8792H13.8792C13.8792 55.0555 13.8546 55.1015 13.8455 55.1171C13.8383 55.1295 13.8258 55.1482 13.8035 55.1707C13.7822 55.1924 13.7406 55.2292 13.6732 55.2629L13.226 54.3684ZM12.8792 54.966H11.8792C11.8792 55.2794 11.9856 55.7361 12.406 56.0312C12.8534 56.3453 13.3517 56.2666 13.6732 56.1059L13.226 55.2114L12.7788 54.317C12.9083 54.2523 13.2332 54.1683 13.5552 54.3944C13.8502 54.6014 13.8792 54.8874 13.8792 54.966H12.8792ZM13.226 55.2114L13.6732 56.1059C13.9893 55.9479 14.2048 55.6934 14.3364 55.4665C14.4708 55.2349 14.5728 54.9381 14.5728 54.6139H13.5728H12.5728C12.5728 54.5244 12.5975 54.4784 12.6065 54.4628C12.6137 54.4504 12.6263 54.4317 12.6485 54.4091C12.6699 54.3874 12.7115 54.3507 12.7788 54.317L13.226 55.2114ZM14.037 54.3738H13.037C13.037 54.437 13.0108 54.5576 12.9347 54.6887C12.8995 54.7494 12.8613 54.7986 12.8267 54.834C12.7911 54.8704 12.7697 54.8818 12.7704 54.8815L13.226 55.7717L13.6817 56.6618C14.1204 56.4372 14.4495 56.0631 14.6644 55.6928C14.8818 55.3183 15.037 54.8547 15.037 54.3738H14.037ZM13.226 55.7717L12.7704 54.8815C12.7722 54.8806 12.8218 54.8555 12.9128 54.8558C13.0103 54.856 13.1253 54.8862 13.2284 54.9588C13.4364 55.1054 13.415 55.274 13.415 55.2008H12.415H11.415C11.415 55.6717 11.5751 56.2406 12.0765 56.5938C12.6083 56.9685 13.2261 56.895 13.6817 56.6618L13.226 55.7717ZM12.415 55.2008H13.415C13.415 55.1375 13.4412 55.0169 13.5173 54.8858C13.5525 54.8251 13.5908 54.7759 13.6254 54.7405C13.6609 54.7041 13.6824 54.6927 13.6817 54.693L13.226 53.8029L12.7704 52.9127C12.3316 53.1373 12.0026 53.5115 11.7876 53.8817C11.5703 54.2562 11.415 54.7198 11.415 55.2008H12.415ZM13.226 53.8029L13.6817 54.693C13.6799 54.6939 13.6302 54.719 13.5392 54.7187C13.4418 54.7185 13.3268 54.6883 13.2236 54.6157C13.0157 54.4692 13.037 54.3005 13.037 54.3738H14.037H15.037C15.037 53.9028 14.8769 53.334 14.3755 52.9807C13.8438 52.6061 13.226 52.6795 12.7704 52.9127L13.226 53.8029Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-36-inside-6_637_1524)"
+      />
+      <mask id="path-38-inside-7_637_1524" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path d="M11.8814 48.9101C11.8814 48.7607 11.9828 48.5899 12.1055 48.5313C12.8258 48.2111 13.5248 48.1044 14.149 48.2378C14.8373 48.3819 15.3975 48.8034 15.787 49.4543C16.1711 50.1052 16.3632 50.9696 16.3419 51.946C16.3205 52.9277 16.0804 53.9894 15.6589 55.0245C15.2321 56.0596 14.6345 57.0307 13.9302 57.8363C13.2206 58.642 12.431 59.2502 11.636 59.597C10.841 59.9438 10.0727 60.0239 9.4111 59.8211C8.81353 59.6344 8.31733 59.2289 7.97586 58.6313C7.91717 58.5299 7.96519 58.3432 8.07724 58.2205C8.18928 58.0977 8.32267 58.0871 8.38136 58.1885C8.69082 58.7167 9.12832 59.0741 9.66187 59.2395C10.2594 59.4209 10.9477 59.3516 11.6627 59.0368C12.3776 58.722 13.0926 58.1778 13.7275 57.4522C14.3624 56.7265 14.9013 55.8569 15.2855 54.9231C15.6696 53.9894 15.8777 53.0344 15.899 52.1487C15.9204 51.2684 15.7496 50.4894 15.4028 49.9025C15.056 49.3156 14.5492 48.9367 13.9302 48.8087C13.3754 48.6913 12.7564 48.782 12.1162 49.0648C11.9935 49.1182 11.8921 49.0488 11.8921 48.8994L11.8814 48.9101Z" />
+      </mask>
+      <path
+        d="M11.8814 48.9101C11.8814 48.7607 11.9828 48.5899 12.1055 48.5313C12.8258 48.2111 13.5248 48.1044 14.149 48.2378C14.8373 48.3819 15.3975 48.8034 15.787 49.4543C16.1711 50.1052 16.3632 50.9696 16.3419 51.946C16.3205 52.9277 16.0804 53.9894 15.6589 55.0245C15.2321 56.0596 14.6345 57.0307 13.9302 57.8363C13.2206 58.642 12.431 59.2502 11.636 59.597C10.841 59.9438 10.0727 60.0239 9.4111 59.8211C8.81353 59.6344 8.31733 59.2289 7.97586 58.6313C7.91717 58.5299 7.96519 58.3432 8.07724 58.2205C8.18928 58.0977 8.32267 58.0871 8.38136 58.1885C8.69082 58.7167 9.12832 59.0741 9.66187 59.2395C10.2594 59.4209 10.9477 59.3516 11.6627 59.0368C12.3776 58.722 13.0926 58.1778 13.7275 57.4522C14.3624 56.7265 14.9013 55.8569 15.2855 54.9231C15.6696 53.9894 15.8777 53.0344 15.899 52.1487C15.9204 51.2684 15.7496 50.4894 15.4028 49.9025C15.056 49.3156 14.5492 48.9367 13.9302 48.8087C13.3754 48.6913 12.7564 48.782 12.1162 49.0648C11.9935 49.1182 11.8921 49.0488 11.8921 48.8994L11.8814 48.9101Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M11.8814 48.9101H10.8814V51.3246L12.5886 49.6171L11.8814 48.9101ZM12.1055 48.5313L11.6994 47.6174L11.6866 47.6231L11.6741 47.6291L12.1055 48.5313ZM14.149 48.2378L13.94 49.2157L13.9441 49.2166L14.149 48.2378ZM15.787 49.4543L16.6482 48.946L16.6451 48.9408L15.787 49.4543ZM16.3419 51.946L15.3421 51.9241L15.3421 51.9242L16.3419 51.946ZM15.6589 55.0245L16.5834 55.4058L16.5851 55.4017L15.6589 55.0245ZM13.9302 57.8363L14.6807 58.4973L14.6831 58.4945L13.9302 57.8363ZM9.4111 59.8211L9.11283 60.7756L9.1181 60.7772L9.4111 59.8211ZM7.97586 58.6313L8.84412 58.1352L8.84129 58.1303L7.97586 58.6313ZM8.38136 58.1885L7.51592 58.6895L7.51853 58.6939L8.38136 58.1885ZM9.66187 59.2395L9.36577 60.1947L9.37139 60.1964L9.66187 59.2395ZM15.899 52.1487L14.8993 52.1245L14.8993 52.1246L15.899 52.1487ZM13.9302 48.8087L13.7233 49.7871L13.7276 49.788L13.9302 48.8087ZM12.1162 49.0648L12.5149 49.9819L12.5202 49.9796L12.1162 49.0648ZM11.8921 48.8994H12.8921V46.4849L11.1849 48.1924L11.8921 48.8994ZM11.8814 48.9101H12.8814C12.8814 49.0478 12.8401 49.1419 12.8079 49.1962C12.7788 49.2453 12.7026 49.3542 12.537 49.4334L12.1055 48.5313L11.6741 47.6291C11.3858 47.767 11.1975 47.9906 11.087 48.1771C10.9735 48.3688 10.8814 48.6229 10.8814 48.9101H11.8814ZM12.1055 48.5313L12.5117 49.4451C13.0947 49.1859 13.5751 49.1378 13.94 49.2157L14.149 48.2378L14.358 47.2599C13.4744 47.0711 12.5569 47.2363 11.6994 47.6174L12.1055 48.5313ZM14.149 48.2378L13.9441 49.2166C14.3295 49.2972 14.6663 49.5289 14.9289 49.9678L15.787 49.4543L16.6451 48.9408C16.1287 48.0779 15.3451 47.4665 14.3539 47.259L14.149 48.2378ZM15.787 49.4543L14.9258 49.9625C15.1911 50.4122 15.3606 51.0798 15.3421 51.9241L16.3419 51.946L17.3416 51.9678C17.3659 50.8593 17.1511 49.7982 16.6482 48.946L15.787 49.4543ZM16.3419 51.946L15.3421 51.9242C15.3239 52.7643 15.1163 53.7055 14.7328 54.6474L15.6589 55.0245L16.5851 55.4017C17.0446 54.2734 17.3172 53.091 17.3416 51.9677L16.3419 51.946ZM15.6589 55.0245L14.7345 54.6433C14.3475 55.5816 13.8067 56.4582 13.1774 57.1782L13.9302 57.8363L14.6831 58.4945C15.4624 57.6031 16.1167 56.5376 16.5834 55.4057L15.6589 55.0245ZM13.9302 57.8363L13.1798 57.1753C12.5431 57.8982 11.8674 58.405 11.2361 58.6804L11.636 59.597L12.0358 60.5136C12.9945 60.0954 13.8981 59.3857 14.6807 58.4973L13.9302 57.8363ZM11.636 59.597L11.2361 58.6804C10.5989 58.9584 10.0809 58.9805 9.70411 58.865L9.4111 59.8211L9.1181 60.7772C10.0645 61.0672 11.0831 60.9292 12.0358 60.5136L11.636 59.597ZM9.4111 59.8211L9.70938 58.8666C9.37048 58.7607 9.06975 58.53 8.84411 58.1352L7.97586 58.6313L7.10762 59.1274C7.56492 59.9277 8.25659 60.508 9.11283 60.7756L9.4111 59.8211ZM7.97586 58.6313L8.84129 58.1303C8.92218 58.27 8.9445 58.3994 8.94943 58.4823C8.95445 58.5669 8.94354 58.6329 8.93267 58.6764C8.91228 58.758 8.87472 58.8301 8.81572 58.8947L8.07724 58.2205L7.33875 57.5462C7.16771 57.7335 7.05011 57.9604 6.99238 58.1913C6.94157 58.3946 6.89868 58.7666 7.11044 59.1323L7.97586 58.6313ZM8.07724 58.2205L8.81572 58.8947C8.76185 58.9537 8.61053 59.0899 8.3464 59.1157C8.20667 59.1293 8.03955 59.1094 7.87497 59.0265C7.70877 58.9428 7.58993 58.8173 7.51593 58.6895L8.38136 58.1885L9.24679 57.6874C9.015 57.2871 8.58453 57.083 8.15221 57.1251C7.7787 57.1616 7.50467 57.3645 7.33875 57.5462L8.07724 58.2205ZM8.38136 58.1885L7.51853 58.6939C7.94234 59.4173 8.57239 59.9487 9.36577 60.1947L9.66187 59.2395L9.95797 58.2844C9.68426 58.1995 9.43929 58.016 9.24419 57.683L8.38136 58.1885ZM9.66187 59.2395L9.37139 60.1964C10.2501 60.4632 11.188 60.3384 12.0656 59.952L11.6627 59.0368L11.2597 58.1216C10.7074 58.3647 10.2687 58.3787 9.95235 58.2827L9.66187 59.2395ZM11.6627 59.0368L12.0656 59.952C12.9386 59.5676 13.7678 58.9247 14.4801 58.1107L13.7275 57.4522L12.9749 56.7937C12.4174 57.4309 11.8166 57.8764 11.2597 58.1216L11.6627 59.0368ZM13.7275 57.4522L14.4801 58.1107C15.1888 57.3006 15.7853 56.3366 16.2102 55.3036L15.2855 54.9231L14.3607 54.5427C14.0174 55.3771 13.536 56.1524 12.9749 56.7937L13.7275 57.4522ZM15.2855 54.9231L16.2102 55.3036C16.6359 54.2691 16.8741 53.1936 16.8987 52.1728L15.899 52.1487L14.8993 52.1246C14.8812 52.8752 14.7033 53.7098 14.3607 54.5427L15.2855 54.9231ZM15.899 52.1487L16.8987 52.1729C16.9233 51.1612 16.7307 50.1839 16.2638 49.3937L15.4028 49.9025L14.5419 50.4112C14.7686 50.7948 14.9175 51.3755 14.8993 52.1245L15.899 52.1487ZM15.4028 49.9025L16.2638 49.3937C15.788 48.5887 15.0543 48.0201 14.1329 47.8294L13.9302 48.8087L13.7276 49.788C14.044 49.8534 14.324 50.0425 14.5419 50.4112L15.4028 49.9025ZM13.9302 48.8087L14.1372 47.8303C13.3282 47.6592 12.493 47.8052 11.7122 48.1501L12.1162 49.0648L12.5202 49.9796C13.0199 49.7589 13.4225 49.7234 13.7233 49.787L13.9302 48.8087ZM12.1162 49.0648L11.7175 48.1477C11.8947 48.0707 12.2296 48.021 12.5431 48.2471C12.8406 48.4616 12.8921 48.7621 12.8921 48.8994H11.8921H10.8921C10.8921 49.1861 10.9943 49.5959 11.3731 49.8692C11.768 50.154 12.215 50.1123 12.5149 49.9819L12.1162 49.0648ZM11.8921 48.8994L11.1849 48.1924L11.1743 48.203L11.8814 48.9101L12.5886 49.6171L12.5993 49.6064L11.8921 48.8994Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-38-inside-7_637_1524)"
+      />
+      <path
+        d="M31.8916 43.2021C32.1489 43.0718 32.2798 43.1242 32.332 43.1611C32.3994 43.2091 32.5155 43.3587 32.5156 43.7119C32.5156 44.0613 32.3961 44.4626 32.1875 44.8223C31.9776 45.1842 31.7043 45.4584 31.4395 45.5928H31.4385L22.3789 50.208C22.1217 50.3383 21.9916 50.2869 21.9395 50.25C21.8721 50.2022 21.756 50.0529 21.7559 49.6992C21.7559 49.3499 21.8745 48.9485 22.083 48.5889C22.293 48.2269 22.5671 47.9527 22.832 47.8184H22.833L31.8916 43.2021Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.6959 1.85659C47.5328 1.26435 46.0389 1.31237 44.4009 2.15004C40.7034 4.03346 37.7102 9.20886 37.7102 13.7013C37.7102 16.209 38.6439 17.9804 40.1111 18.7273L37.7315 17.5162C36.2643 16.7692 35.3306 14.9978 35.3306 12.4902C35.3306 7.99237 38.3291 2.81697 42.0212 0.938885C43.6539 0.106552 45.1532 0.0531968 46.3163 0.645434L48.6959 1.85659Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.6957 1.85637C50.1629 2.60334 51.0967 4.37471 51.0967 6.88238C51.0967 11.3802 48.0981 16.5556 44.406 18.4337C42.7733 19.266 41.2741 19.3194 40.1109 18.7271C38.6437 17.9802 37.71 16.2088 37.71 13.7011C37.71 9.20331 40.7085 4.02791 44.4006 2.14982C46.0333 1.31749 47.5326 1.26413 48.6957 1.85637Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M42.5479 14.7598C42.5072 14.7398 42.4679 14.7184 42.4297 14.6953C42.4687 14.7179 42.5078 14.7398 42.5479 14.7598Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+      <path
+        d="M43.3066 12.8896C43.39 12.9442 43.476 12.9901 43.5654 13.0254C43.4784 12.9986 43.4012 12.9609 43.335 12.9141C43.3249 12.907 43.3166 12.8974 43.3066 12.8896ZM46.1299 7.59863C46.1613 7.61259 46.1906 7.62849 46.2188 7.64551C46.1894 7.62884 46.1599 7.61303 46.1299 7.59863Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx b/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx
new file mode 100644
index 0000000..5086aa1
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/archived-module.tsx
@@ -0,0 +1,302 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ArchivedModuleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="182"
+      viewBox="0 0 161 182"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M25.1952 33.908C23.7266 33.1603 22.792 31.3926 22.792 28.8773C22.792 24.3753 25.7933 19.195 29.4889 17.3152L54.2687 4.68502C55.9028 3.8519 57.3982 3.7985 58.5624 4.39129L56.1805 3.17901C55.0163 2.58622 53.521 2.63962 51.8868 3.47273L27.1071 16.1029C23.4062 17.9881 20.4102 23.1683 20.4102 27.665C20.4102 30.1804 21.3447 31.9481 22.8134 32.6957L25.1952 33.908Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M25.1952 33.9072C26.3594 34.5 27.8547 34.4466 29.4889 33.6134L54.2687 20.9886C57.9696 19.1034 60.9656 13.9232 60.9656 9.42651C60.9656 6.91116 60.031 5.14347 58.5624 4.3958C57.3982 3.80301 55.9028 3.85642 54.2687 4.68953L29.4889 17.3144C25.788 19.1996 22.792 24.3798 22.792 28.8765C22.792 31.3918 23.7266 33.1595 25.1952 33.9072Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M32.8749 22.1654C32.9657 22.0266 33.0992 21.9678 33.1846 22.0266C33.2701 22.0853 33.2754 22.2455 33.2006 22.395L33.1846 22.4271L29.9483 28.0186C29.8575 28.1734 29.7133 28.2482 29.6225 28.1841C29.5317 28.12 29.5317 27.9438 29.6225 27.7836L32.8589 22.1921L32.8749 22.1654Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M30.477 24.0293C30.477 23.7943 30.3221 23.6875 30.1299 23.7836C29.9376 23.8797 29.7827 24.1468 29.7827 24.3817C29.7827 24.6167 29.9376 24.7235 30.1299 24.6274C30.3221 24.5313 30.477 24.2643 30.477 24.0293ZM30.9416 23.7943C30.9416 24.339 30.5785 24.9639 30.1299 25.1935C29.6813 25.4231 29.3181 25.1668 29.3181 24.6221C29.3181 24.0773 29.6813 23.4525 30.1299 23.2229C30.5785 22.9932 30.9416 23.2496 30.9416 23.7943Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M33.0243 25.8281C33.0243 25.5931 32.8695 25.4863 32.6772 25.5824C32.4849 25.6786 32.3301 25.9456 32.3301 26.1806C32.3301 26.4156 32.4849 26.5224 32.6772 26.4262C32.8695 26.3301 33.0243 26.0631 33.0243 25.8281ZM33.4836 25.5931C33.4836 26.1379 33.1205 26.7627 32.6719 26.9923C32.2233 27.222 31.8601 26.9656 31.8601 26.4209C31.8601 25.8762 32.2233 25.2513 32.6719 25.0217C33.1205 24.7921 33.4836 25.0484 33.4836 25.5931Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M31.326 20.1197C31.326 19.9702 31.4275 19.7993 31.5503 19.7406C32.2713 19.4201 32.9709 19.3133 33.5957 19.4468C34.2846 19.591 34.8454 20.0129 35.2352 20.6645C35.6197 21.316 35.812 22.1812 35.7906 23.1585C35.7693 24.1411 35.529 25.2039 35.1071 26.2399C34.6798 27.276 34.0817 28.2479 33.3768 29.0543C32.6665 29.8607 31.8761 30.4695 31.0804 30.8167C30.2846 31.1638 29.5156 31.2439 28.8534 31.041C28.2553 30.8541 27.7586 30.4482 27.4168 29.8501C27.3581 29.7486 27.4061 29.5617 27.5183 29.4388C27.6304 29.316 27.7639 29.3053 27.8227 29.4068C28.1324 29.9355 28.5703 30.2933 29.1044 30.4589C29.7025 30.6404 30.3914 30.571 31.1071 30.2559C31.8227 29.9408 32.5383 29.3961 33.1738 28.6698C33.8093 27.9435 34.3487 27.073 34.7332 26.1384C35.1177 25.2039 35.326 24.2479 35.3474 23.3614C35.3687 22.4802 35.1979 21.7005 34.8507 21.1131C34.5036 20.5256 33.9962 20.1464 33.3768 20.0183C32.8213 19.9008 32.2019 19.9916 31.561 20.2746C31.4382 20.328 31.3367 20.2586 31.3367 20.1091L31.326 20.1197Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M51.1338 17.2449L42.0657 21.8644C41.3181 22.2436 40.7146 21.8164 40.7146 20.9085C40.7146 20.0006 41.3181 18.9592 42.0657 18.58L51.1338 13.9605C51.8815 13.5814 52.485 14.0086 52.485 14.9165C52.485 15.8244 51.8815 16.8658 51.1338 17.2449Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M156.886 38.8691C157.484 38.5647 157.863 37.8437 157.863 36.8183V23.7235C157.863 21.8864 156.64 19.7716 155.129 19.0026L121.249 1.7422C120.581 1.40041 119.967 1.38439 119.492 1.62471L121.874 0.41243C122.349 0.17211 122.963 0.188131 123.631 0.52992L157.516 17.7956C159.027 18.5646 160.25 20.6795 160.25 22.5166V35.6114C160.25 36.6368 159.871 37.3577 159.273 37.6621L156.891 38.8744L156.886 38.8691Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M156.886 38.8697C156.41 39.11 155.796 39.094 155.129 38.7522L121.243 21.4865C119.732 20.7175 118.509 18.6026 118.509 16.7655V3.67606C118.509 2.65069 118.888 1.92973 119.486 1.62532C119.962 1.385 120.576 1.40102 121.243 1.74281L155.129 19.0085C156.64 19.7775 157.863 21.8924 157.863 23.7295V36.8243C157.863 37.8496 157.484 38.5706 156.886 38.875V38.8697Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M132.955 16.1293L140.816 20.1347C141.462 20.4658 141.986 20.0919 141.986 19.3069C141.986 18.5219 141.462 17.614 140.816 17.2882L132.955 13.2829C132.309 12.9518 131.785 13.3256 131.785 14.1106C131.785 14.8957 132.309 15.8036 132.955 16.1293Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M133.516 22.7095L144.538 28.3276C145.446 28.7869 146.178 28.2689 146.178 27.1687C146.178 26.0633 145.441 24.7976 144.538 24.3383L133.516 18.7201C132.608 18.2609 131.876 18.7789 131.876 19.879C131.876 20.9845 132.613 22.2502 133.516 22.7095Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M126.354 12.067C126.408 12.2433 126.53 12.4142 126.669 12.4836C126.862 12.585 127.022 12.4676 127.022 12.2272V11.784C127.022 11.6398 126.968 11.4742 126.872 11.3461C126.776 11.2179 126.659 11.1378 126.546 11.1324L124.277 11.0684C124.143 11.0684 124.052 11.1805 124.052 11.3621V14.4168C124.052 14.5717 124.117 14.7426 124.218 14.8761C124.325 15.0096 124.453 15.079 124.56 15.063L124.886 15.015C125.056 14.9883 125.121 14.7586 125.035 14.5023C124.976 14.3314 124.87 14.1925 124.752 14.1231V12.0136L126.349 12.0563L126.354 12.067Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M124.96 10.0475C125.014 10.2237 125.137 10.3946 125.276 10.464C125.468 10.5655 125.628 10.448 125.628 10.2077V9.76445C125.628 9.62026 125.575 9.4547 125.478 9.32653C125.382 9.19836 125.265 9.11825 125.153 9.11291L122.883 9.04883C122.749 9.04883 122.659 9.16098 122.659 9.34255V12.3973C122.659 12.5522 122.723 12.7231 122.824 12.8566C122.931 12.9901 123.059 13.0595 123.166 13.0435L123.492 12.9954C123.663 12.9687 123.727 12.7391 123.641 12.4827C123.583 12.3118 123.476 12.173 123.358 12.1036V9.99409L124.955 10.0368L124.96 10.0475Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M128.421 13.4379C128.325 13.3043 128.207 13.2242 128.101 13.2242L125.831 13.1602C125.697 13.1602 125.607 13.2776 125.607 13.4485V16.5086C125.607 16.6528 125.66 16.813 125.756 16.9412C125.858 17.0747 125.975 17.1548 126.082 17.1548L128.346 17.2189C128.485 17.2296 128.576 17.1121 128.576 16.9305V13.8704C128.576 13.7262 128.523 13.566 128.421 13.4379ZM127.876 16.279L126.306 16.2309V14.1108L127.876 14.1588V16.279Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <g opacity="0.2">
+        <path
+          d="M0.25 147.083C0.25 149.102 1.76135 151.116 4.77871 152.659L43.6305 172.456C49.6706 175.532 59.4597 175.532 65.4997 172.456L147.139 130.859C150.157 129.321 151.668 127.308 151.668 125.289V131.735C151.668 133.754 150.157 135.767 147.139 137.305L65.4997 178.902C59.4597 181.978 49.6706 181.978 43.6305 178.902L4.77871 159.105C1.75601 157.567 0.25 155.548 0.25 153.529V147.083Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 147.083C0.25 145.065 1.76135 143.051 4.77871 141.513L86.4183 99.9165C92.4583 96.8403 102.247 96.8403 108.287 99.9165L147.139 119.714C150.162 121.252 151.668 123.27 151.668 125.289C151.668 127.308 150.157 129.321 147.139 130.859L65.4997 172.456C59.4597 175.532 49.6706 175.532 43.6305 172.456L4.77871 152.659C1.75601 151.121 0.25 149.102 0.25 147.083Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M0.25 126.72C0.25 128.739 1.76135 130.752 4.77871 132.296L43.6305 152.093C49.6706 155.169 59.4597 155.169 65.4997 152.093L147.139 110.496C150.157 108.958 151.668 106.944 151.668 104.926V111.372C151.668 113.39 150.157 115.404 147.139 116.942L65.4997 158.539C59.4597 161.615 49.6706 161.615 43.6305 158.539L4.77871 138.742C1.75601 137.204 0.25 135.185 0.25 133.166V126.72Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 126.72C0.25 124.701 1.76135 122.688 4.77871 121.15L86.4183 79.5532C92.4583 76.4771 102.247 76.4771 108.287 79.5532L147.139 99.3503C150.162 100.888 151.668 102.907 151.668 104.926C151.668 106.944 150.157 108.958 147.139 110.496L65.4997 152.093C59.4597 155.169 49.6706 155.169 43.6305 152.093L4.77871 132.296C1.75601 130.757 0.25 128.739 0.25 126.72Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M0.25 106.357C0.25 108.376 1.76135 110.389 4.77871 111.932L43.6305 131.729C49.6706 134.806 59.4597 134.806 65.4997 131.729L147.139 90.1326C150.157 88.5945 151.668 86.5812 151.668 84.5625V91.0084C151.668 93.0271 150.157 95.0405 147.139 96.5785L65.4997 138.175C59.4597 141.251 49.6706 141.251 43.6305 138.175L4.77871 118.373C1.75601 116.835 0.25 114.816 0.25 112.797V106.352V106.357Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.25 106.357C0.25 104.338 1.76135 102.325 4.77871 100.787L86.4183 59.1899C92.4583 56.1138 102.247 56.1138 108.287 59.1899L147.139 78.987C150.162 80.525 151.668 82.5437 151.668 84.5624C151.668 86.5811 150.157 88.5944 147.139 90.1325L65.4997 131.729C59.4597 134.805 49.6706 134.805 43.6305 131.729L4.77871 111.927C1.75601 110.389 0.25 108.37 0.25 106.351V106.357Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M64.3462 103.287C63.5772 103.287 62.8616 103.121 62.2207 102.79L57.4624 100.366C55.7374 99.4899 54.68 97.5033 54.5518 94.9132L53.2274 68.2002C53.2167 67.9919 53.3289 67.7943 53.5158 67.6982L56.0098 66.4272L51.2674 64.0133C50.0338 63.3831 49.3289 61.9519 49.3289 60.0881V57.8504C49.3289 54.582 51.5238 50.8063 54.2207 49.4338L96.5278 27.8744C97.2167 27.5219 97.895 27.3457 98.5465 27.3457C99.0592 27.3457 99.5345 27.4579 99.9671 27.6768L104.725 30.1014C105.959 30.7316 106.664 32.1628 106.664 34.032V36.2696C106.664 39.538 104.469 43.3083 101.772 44.6862L99.0218 46.0854L102.477 47.8477C102.664 47.9438 102.776 48.1414 102.765 48.3497L101.441 76.4138C101.201 81.4339 97.8469 86.9772 93.7988 89.0333L67.417 102.475C66.3596 103.015 65.3235 103.287 64.3355 103.287H64.3462Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M98.5464 27.8845C98.9736 27.8845 99.3742 27.9806 99.7213 28.1569L104.48 30.5814C105.489 31.0941 106.125 32.3117 106.125 34.0314V36.269C106.125 39.3558 104.063 42.9125 101.526 44.2103L97.8415 46.0901L102.231 48.3278L100.907 76.3919C100.677 81.241 97.457 86.5815 93.5584 88.5628L67.1766 102.005C66.1726 102.517 65.2166 102.758 64.3408 102.758C63.6519 102.758 63.0217 102.608 62.4556 102.32L57.6972 99.8952C56.1966 99.1315 55.2033 97.3852 55.0804 94.8966L53.756 68.1836L57.5744 66.2397C57.5317 66.2397 57.4836 66.2397 57.4409 66.2397C57.0137 66.2397 56.6185 66.1489 56.266 65.9673L51.5077 63.5427C50.4983 63.0301 49.8628 61.8124 49.8628 60.0928V57.8552C49.8628 54.7684 51.9189 51.2116 54.4609 49.9139L96.768 28.3545C97.3982 28.034 97.9963 27.8845 98.5411 27.8845M98.5464 26.8164C97.8148 26.8164 97.0511 27.014 96.2874 27.4039L53.9803 48.9633C51.0751 50.4426 48.8 54.3465 48.8 57.8552V60.0928C48.8 62.1702 49.6118 63.7724 51.0324 64.4987L54.8401 66.4373L53.2807 67.233C52.9069 67.4253 52.6772 67.8151 52.6986 68.237L54.023 94.95C54.1565 97.7324 55.3261 99.8846 57.2219 100.851L61.9803 103.276C62.7013 103.644 63.497 103.831 64.3461 103.831C65.4142 103.831 66.5357 103.537 67.6679 102.961L94.0497 89.5187C98.3221 87.3505 101.729 81.727 101.98 76.4453L103.305 48.3812C103.326 47.9593 103.096 47.5694 102.723 47.3772L100.202 46.0901L102.018 45.1662C104.923 43.6869 107.198 39.7777 107.198 36.2744V34.0367C107.198 31.9593 106.386 30.3571 104.966 29.6308L100.207 27.2063C99.6999 26.9499 99.1392 26.8164 98.5464 26.8164Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.237 48.323L58.5198 70.6034L53.7615 68.1788L97.4785 45.8984L102.237 48.323Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M58.5198 70.6043L59.8443 97.3172C59.9671 99.8059 60.9604 101.552 62.4611 102.316L57.7027 99.8913C56.2021 99.1276 55.2087 97.3813 55.0859 94.8927L53.7615 68.1797L58.5198 70.6043Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.237 48.3223L100.912 76.3864C100.683 81.2355 97.4624 86.576 93.5639 88.5573L67.182 101.999C65.3929 102.912 63.7427 102.971 62.461 102.314C60.9604 101.551 59.967 99.8043 59.8442 97.3156L58.5198 70.6027L102.237 48.3223Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M104.485 30.5824C103.684 30.1765 102.659 30.2085 101.532 30.78L59.2246 52.3394C56.6826 53.6318 54.6265 57.1885 54.6265 60.2806V62.5183C54.6265 64.2433 55.2674 65.4555 56.2714 65.9682L51.513 63.5437C50.5037 63.031 49.8682 61.8134 49.8682 60.0937V57.8561C49.8682 54.7693 51.9242 51.2125 54.4663 49.9148L96.7734 28.3554C97.8949 27.784 98.9256 27.7466 99.7267 28.1578L104.485 30.5824Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M104.485 30.5816C105.494 31.0943 106.13 32.3119 106.13 34.0316V36.2692C106.13 39.356 104.068 42.9127 101.532 44.2105L59.2246 65.7699C58.1031 66.3413 57.0724 66.3787 56.2713 65.9675C55.262 65.4548 54.6265 64.2372 54.6265 62.5176V60.2799C54.6265 57.1931 56.6825 53.6364 59.2246 52.3386L101.532 30.7792C102.653 30.2078 103.684 30.1704 104.485 30.5816Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M85.3447 91.0075C85.0884 91.0075 84.8534 90.9541 84.6344 90.8419C84.581 90.8152 84.5329 90.7885 84.4849 90.7511L79.7586 88.3426C79.7586 88.3426 79.7158 88.3159 79.6945 88.3052L72.3353 83.1036C71.3634 82.4948 71.2405 80.8125 72.0843 79.2905C72.7038 78.1583 73.6918 77.4267 74.605 77.4267C74.8614 77.4267 75.1017 77.4854 75.3207 77.5976L78.9255 79.4347V66.42C78.9255 64.9781 79.86 63.376 81.0563 62.7671C81.3767 62.6069 81.6972 62.5215 82.0069 62.5215C82.2632 62.5215 82.5089 62.5802 82.7279 62.6924L87.4862 65.1169C88.0897 65.4267 88.4368 66.0996 88.4368 66.9701V70.153C88.7626 69.9821 89.099 69.886 89.4195 69.886C89.6758 69.886 89.9108 69.9394 90.1297 70.0515L94.8881 72.4761C94.9255 72.4975 94.9682 72.5188 95.0056 72.5402C95.9989 73.1597 96.1164 74.8419 95.2779 76.3693C95.2512 76.4227 95.2085 76.4975 95.1658 76.5615L87.8227 89.2345C87.1925 90.3292 86.2472 91.0075 85.35 91.0075H85.3447Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M82.0016 63.0505C82.1778 63.0505 82.3381 63.0879 82.4822 63.1627L87.2406 65.5872C87.6411 65.7902 87.8975 66.2762 87.8975 66.9651V71.2374C88.3728 70.7141 88.9282 70.415 89.4142 70.415C89.5797 70.415 89.7399 70.4524 89.8788 70.5218L94.6371 72.9464C94.6371 72.9464 94.6852 72.9731 94.7119 72.9891C95.4542 73.4537 95.4969 74.8476 94.8027 76.1079C94.776 76.1613 94.7439 76.2147 94.7119 76.2628L87.3527 88.9678C86.808 89.9077 86.0123 90.4738 85.3447 90.4738C85.1792 90.4738 85.019 90.4364 84.8748 90.367C84.8321 90.3456 84.7947 90.3242 84.7573 90.2922L79.9989 87.8676L72.6398 82.666C71.8975 82.2014 71.8547 80.8022 72.549 79.5472C73.0884 78.5645 73.9108 77.9611 74.6051 77.9611C74.7706 77.9611 74.9362 77.9985 75.0804 78.0732L79.4596 80.3055V66.4203C79.4596 65.1867 80.282 63.7608 81.2967 63.2428C81.5477 63.1146 81.7826 63.0559 82.0016 63.0559M82.0016 61.9824C81.6064 61.9824 81.2112 62.0839 80.816 62.2815C79.4328 62.9864 78.3915 64.7648 78.3915 66.415V78.5592L75.5664 77.1173C75.2726 76.9677 74.9469 76.893 74.6051 76.893C73.4836 76.893 72.3354 77.7154 71.6144 79.0345C70.6264 80.8182 70.8134 82.7515 72.047 83.5525L79.3848 88.7381C79.4275 88.7702 79.4702 88.7969 79.5183 88.8182L84.2179 91.2161C84.2766 91.2535 84.3354 91.2855 84.3941 91.3176C84.6879 91.4671 85.0083 91.5419 85.3447 91.5419C86.4288 91.5419 87.5503 90.7622 88.2766 89.5018L95.6198 76.8236C95.6678 76.7488 95.7106 76.6794 95.7479 76.6046C96.7306 74.8049 96.5277 72.8663 95.278 72.0812C95.2299 72.0492 95.1765 72.0225 95.1231 71.9958L90.3648 69.5712C90.071 69.4217 89.7506 69.3469 89.4142 69.3469C89.2646 69.3469 89.1151 69.3629 88.9656 69.3896V66.9651C88.9656 65.8863 88.5116 65.0372 87.7266 64.6366L82.9682 62.2121C82.6692 62.0625 82.3487 61.9824 82.0016 61.9824Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M94.6423 72.9474C93.9 72.5682 92.7838 73.2091 92.1163 74.4267L87.9026 81.7111L83.1443 79.2865L87.3579 72.0021C88.0308 70.7845 89.1416 70.1436 89.8839 70.5228L94.6423 72.9474Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M79.8387 80.4986C79.091 80.1141 77.9748 80.755 77.3073 81.978C76.613 83.233 76.6557 84.6322 77.3981 85.0968L84.7572 90.2984L79.9989 87.8738L72.6397 82.6722C71.8974 82.2076 71.8547 80.8084 72.5489 79.5534C73.2165 78.3304 74.3273 77.6949 75.0803 78.0741L79.8387 80.4986Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M87.2405 65.5879C86.9201 65.4223 86.5035 65.433 86.0549 65.6627C85.0402 66.1807 84.2178 67.6066 84.2178 68.8402V83.5852L79.4595 81.1607V66.4157C79.4595 65.182 80.2819 63.7561 81.2966 63.2381C81.7452 63.0085 82.1617 62.9978 82.4822 63.1633L87.2405 65.5879Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M87.2405 65.5872C87.641 65.7901 87.8974 66.2761 87.8974 66.965V81.71L92.111 74.4256C92.7839 73.208 93.8947 72.5671 94.637 72.9463C94.6637 72.957 94.6851 72.973 94.7118 72.989C95.4541 73.4537 95.4968 74.8475 94.8026 76.1079C94.7759 76.1613 94.7438 76.2147 94.7118 76.2627L87.3526 88.9677C86.6744 90.1372 85.5956 90.73 84.8747 90.3669C84.8319 90.3455 84.7946 90.3242 84.7572 90.2921L77.398 85.0905C76.6557 84.6259 76.613 83.2267 77.3072 81.9717C77.9748 80.7487 79.0856 80.1132 79.8386 80.4924C79.8653 80.5031 79.8867 80.5191 79.908 80.5351C79.9347 80.5565 79.9668 80.5778 79.9988 80.5992L84.2178 83.5845V68.8395C84.2178 67.6059 85.0402 66.18 86.0549 65.6619C86.5035 65.4323 86.9201 65.4216 87.2405 65.5872Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.1845 49.0417C20.0203 48.4489 18.5249 48.497 16.8854 49.3354C13.1845 51.2206 10.1885 56.4008 10.1885 60.8975C10.1885 63.4075 11.1231 65.1805 12.5917 65.9282L10.2098 64.7159C8.74122 63.9683 7.80664 62.1952 7.80664 59.6852C7.80664 55.1832 10.808 50.003 14.5036 48.1231C16.1378 47.29 17.6384 47.2366 18.8026 47.8294L21.1845 49.0417Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.1845 49.0423C22.6531 49.79 23.5877 51.563 23.5877 54.073C23.5877 58.575 20.5863 63.7552 16.8908 65.6351C15.2566 66.4682 13.7559 66.5216 12.5917 65.9288C11.1231 65.1811 10.1885 63.4081 10.1885 60.8981C10.1885 56.3961 13.1898 51.2159 16.8854 49.336C18.5196 48.5029 20.0203 48.4495 21.1845 49.0423Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.1979 58.0346L18.8241 57.9438V57.2869C18.8241 57.068 18.6745 56.9612 18.493 57.0519C18.3114 57.1427 18.1619 57.3991 18.1619 57.618V58.4992C18.1619 58.6381 18.2206 58.7342 18.3167 58.7609L18.8454 58.8944C18.8988 58.9104 18.9576 58.8944 19.0217 58.8677C19.1338 58.8143 19.2406 58.6915 19.2994 58.5366C19.3955 58.3016 19.3474 58.0773 19.1926 58.0399L19.1979 58.0346Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M16.031 61.512L14.8774 62.0995C14.6958 62.1903 14.5463 62.0888 14.5463 61.8645V58.2597L15.8601 57.5868C16.0416 57.496 16.1912 57.2397 16.1912 57.0207C16.1912 56.8017 16.0416 56.6949 15.8601 56.7857L14.5463 57.4586V56.257C14.5463 56.0381 14.6958 55.7817 14.8774 55.6909L15.5343 55.3545V55.755C15.5343 55.974 15.6838 56.0808 15.8654 55.99C16.047 55.8992 16.1965 55.6429 16.1965 55.4239V55.0234L18.1725 54.0194V54.4199C18.1725 54.6389 18.322 54.7457 18.5036 54.6549C18.6852 54.5641 18.8347 54.3078 18.8347 54.0888V53.6883L19.4916 53.3518C19.6732 53.261 19.8227 53.3625 19.8227 53.5868V54.1849C19.8227 54.4039 19.9722 54.5107 20.1538 54.4199C20.3354 54.3291 20.4849 54.0728 20.4849 53.8538V53.2557C20.4849 52.5935 20.0416 52.2784 19.4969 52.5561L18.84 52.8925V52.492C18.84 52.273 18.6905 52.1662 18.5089 52.257C18.3274 52.3478 18.1778 52.6041 18.1778 52.8231V53.2236L16.2019 54.2276V53.8271C16.2019 53.6082 16.0523 53.5013 15.8707 53.5921C15.6892 53.6829 15.5396 53.9393 15.5396 54.1582V54.5588L14.8828 54.8952C14.338 55.1729 13.8948 55.9366 13.8948 56.5988V62.201C13.8948 62.8632 14.338 63.1783 14.8828 62.9005L16.0363 62.3131C16.2179 62.2223 16.3674 61.966 16.3674 61.747C16.3674 61.5281 16.2179 61.4212 16.0363 61.512H16.031Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M18.4983 55.45C17.2272 56.0962 16.1965 57.8799 16.1965 59.4233C16.1965 60.9667 17.2272 61.6984 18.4983 61.0522C19.7693 60.406 20.8 58.6223 20.8 57.0789C20.8 55.5355 19.7693 54.8038 18.4983 55.45ZM18.4983 60.2564C17.5904 60.7211 16.8534 60.1977 16.8534 59.0922C16.8534 57.9867 17.5904 56.7157 18.4983 56.2511C19.4061 55.7865 20.1431 56.3098 20.1431 57.4153C20.1431 58.5208 19.4061 59.7918 18.4983 60.2564Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx b/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx
new file mode 100644
index 0000000..78967aa
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/archived-work-item.tsx
@@ -0,0 +1,337 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="176"
+      viewBox="0 0 161 176"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M0.25 141.667C0.25 143.636 1.72405 145.599 4.66695 147.105L42.56 166.413C48.4511 169.413 57.9986 169.413 63.8896 166.413L143.515 125.843C146.457 124.343 147.931 122.379 147.931 120.41V126.697C147.931 128.666 146.457 130.63 143.515 132.13L63.8896 172.7C57.9986 175.7 48.4511 175.7 42.56 172.7L4.66695 153.391C1.71885 151.891 0.25 149.922 0.25 147.954V141.667Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 141.665C0.25 139.696 1.72405 137.733 4.66695 136.233L84.2919 95.6623C90.1829 92.6621 99.7304 92.6621 105.621 95.6623L143.515 114.971C146.463 116.471 147.931 118.44 147.931 120.409C147.931 122.378 146.457 124.341 143.515 125.841L63.8896 166.412C57.9986 169.412 48.4511 169.412 42.56 166.412L4.66695 147.103C1.71885 145.603 0.25 143.634 0.25 141.665Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M0.25 121.805C0.25 123.774 1.72405 125.738 4.66695 127.243L42.56 146.552C48.4511 149.552 57.9986 149.552 63.8896 146.552L143.515 105.981C146.457 104.481 147.931 102.518 147.931 100.549V106.836C147.931 108.805 146.457 110.768 143.515 112.268L63.8896 152.839C57.9986 155.839 48.4511 155.839 42.56 152.839L4.66695 133.53C1.71885 132.03 0.25 130.061 0.25 128.092V121.805Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 121.806C0.25 119.837 1.72405 117.873 4.66695 116.373L84.2919 75.8029C90.1829 72.8027 99.7304 72.8027 105.621 75.8029L143.515 95.1114C146.463 96.6115 147.931 98.5804 147.931 100.549C147.931 102.518 146.457 104.482 143.515 105.982L63.8896 146.552C57.9986 149.552 48.4511 149.552 42.56 146.552L4.66695 127.239C1.71885 125.738 0.25 123.77 0.25 121.801V121.806Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M0.25 101.94C0.25 103.909 1.72405 105.873 4.66695 107.378L42.56 126.687C48.4511 129.687 57.9986 129.687 63.8896 126.687L143.515 86.1162C146.457 84.6161 147.931 82.6525 147.931 80.6836V86.9705C147.931 88.9393 146.457 90.903 143.515 92.4031L63.8896 132.973C57.9986 135.974 48.4511 135.974 42.56 132.973L4.66695 113.665C1.71885 112.165 0.25 110.196 0.25 108.227V101.94Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.25 101.941C0.25 99.9718 1.72405 98.0081 4.66695 96.508L84.2919 55.9376C90.1829 52.9375 99.7304 52.9375 105.621 55.9376L143.515 75.2462C146.463 76.7463 147.931 78.7152 147.931 80.684C147.931 82.6529 146.457 84.6166 143.515 86.1167L63.8896 126.687C57.9986 129.687 48.4511 129.687 42.56 126.687L4.66695 107.378C1.71885 105.878 0.25 103.91 0.25 101.941Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M62.7645 98.9501C62.0144 98.9501 61.3217 98.7887 60.6914 98.4657L56.0505 96.101C54.3681 95.2468 53.3368 93.3091 53.2118 90.7829L51.92 64.7292C51.9096 64.526 52.019 64.3333 52.2013 64.2395L54.6337 62.9999L50.0084 60.6456C48.8052 60.0309 48.1177 58.635 48.1177 56.8172V54.6348C48.1177 51.447 50.2584 47.7645 52.8888 46.4259L94.1519 25.3985C94.8238 25.0547 95.4853 24.8828 96.1208 24.8828C96.6208 24.8828 97.0844 24.9922 97.5063 25.2057L102.147 27.5705C103.35 28.1851 104.038 29.581 104.038 31.4041V33.5865C104.038 36.7742 101.897 40.4567 99.2668 41.7954L96.5844 43.16L99.9544 44.8789C100.137 44.9727 100.246 45.1654 100.236 45.3685L98.9439 72.7401C98.7095 77.6362 95.4385 83.0428 91.4903 85.0482L65.7594 98.1584C64.7281 98.6845 63.7176 98.9501 62.754 98.9501H62.7645Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M96.1208 25.4031C96.5375 25.4031 96.9282 25.4968 97.2667 25.6687L101.908 28.0334C102.892 28.5335 103.512 29.7211 103.512 31.3982V33.5807C103.512 36.5913 101.501 40.0603 99.0273 41.326L95.4333 43.1594L99.7148 45.3419L98.4231 72.7134C98.1991 77.4429 95.0583 82.6516 91.2559 84.584L65.5251 97.6942C64.5459 98.1943 63.6135 98.4287 62.7593 98.4287C62.0874 98.4287 61.4727 98.2828 60.9206 98.0015L56.2797 95.6368C54.8161 94.892 53.8472 93.1887 53.7274 90.7615L52.4357 64.7077L56.1599 62.8118C56.1182 62.8118 56.0713 62.8118 56.0297 62.8118C55.613 62.8118 55.2275 62.7232 54.8838 62.5461L50.2428 60.1814C49.2584 59.6813 48.6386 58.4938 48.6386 56.8166V54.6341C48.6386 51.6235 50.6439 48.1545 53.1232 46.8888L94.3863 25.8614C95.001 25.5489 95.5843 25.4031 96.1156 25.4031M96.1208 24.3613C95.4072 24.3613 94.6624 24.554 93.9176 24.9343L52.6545 45.9617C49.8209 47.4045 47.6021 51.212 47.6021 54.6341V56.8166C47.6021 58.8427 48.3938 60.4053 49.7793 61.1137L53.4931 63.0045L51.9721 63.7806C51.6075 63.9681 51.3835 64.3483 51.4044 64.7598L52.6961 90.8136C52.8263 93.5273 53.967 95.6264 55.8161 96.5692L60.4571 98.9339C61.1602 99.2933 61.9363 99.4756 62.7645 99.4756C63.8062 99.4756 64.9 99.1891 66.0043 98.6266L91.7351 85.5164C95.9021 83.4016 99.2252 77.9169 99.47 72.7655L100.762 45.3939C100.783 44.9825 100.559 44.6022 100.194 44.4147L97.7355 43.1594L99.5065 42.2583C102.34 40.8155 104.559 37.0028 104.559 33.5859V31.4035C104.559 29.3773 103.767 27.8147 102.382 27.1063L97.7407 24.7416C97.2459 24.4915 96.699 24.3613 96.1208 24.3613Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M99.72 45.3413L57.0818 67.0719L52.4409 64.7071L95.0791 42.9766L99.72 45.3413Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M57.0818 67.0718L58.3736 93.1255C58.4934 95.5528 59.4622 97.256 60.9258 98.0009L56.2849 95.6361C54.8213 94.8913 53.8525 93.1881 53.7327 90.7608L52.4409 64.707L57.0818 67.0718Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M99.7202 45.3398L98.4285 72.7114C98.2045 77.4409 95.0637 82.6496 91.2613 84.582L65.5305 97.6922C63.7856 98.5829 62.1761 98.6402 60.926 97.9995C59.4624 97.2547 58.4936 95.5514 58.3738 93.1242L57.082 67.0704L99.7202 45.3398Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M101.913 28.0333C101.132 27.6375 100.132 27.6687 99.0327 28.226L57.7696 49.2535C55.2903 50.514 53.285 53.9829 53.285 56.9988V59.1812C53.285 60.8636 53.91 62.046 54.8892 62.546L50.2483 60.1812C49.2639 59.6812 48.644 58.4936 48.644 56.8164V54.634C48.644 51.6234 50.6494 48.1544 53.1287 46.8887L94.3918 25.8613C95.4856 25.304 96.4909 25.2675 97.2722 25.6686L101.913 28.0333Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M101.913 28.0319C102.897 28.5319 103.517 29.7195 103.517 31.3967V33.5791C103.517 36.5897 101.507 40.0587 99.0324 41.3244L57.7693 62.3518C56.6755 62.9091 55.6702 62.9456 54.8889 62.5445C53.9045 62.0445 53.2847 60.8569 53.2847 59.1797V56.9973C53.2847 53.9867 55.29 50.5177 57.7693 49.252L99.0324 28.2246C100.126 27.6673 101.132 27.6308 101.913 28.0319Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M83.245 86.9745C82.995 86.9745 82.7658 86.9224 82.5523 86.813C82.5002 86.787 82.4533 86.7609 82.4064 86.7244L77.7968 84.3753C77.7968 84.3753 77.7551 84.3493 77.7343 84.3389L70.5567 79.2656C69.6087 78.6718 69.4889 77.0311 70.3119 75.5466C70.9161 74.4424 71.8797 73.7288 72.7704 73.7288C73.0204 73.7288 73.2548 73.7861 73.4684 73.8955L76.9842 75.6873V62.9937C76.9842 61.5874 77.8957 60.0248 79.0625 59.431C79.375 59.2747 79.6875 59.1914 79.9896 59.1914C80.2396 59.1914 80.4792 59.2487 80.6928 59.3581L85.3337 61.7228C85.9223 62.0249 86.2609 62.6812 86.2609 63.5302V66.6346C86.5786 66.4679 86.9067 66.3742 87.2193 66.3742C87.4641 66.3742 87.6985 66.4263 87.912 66.5356L92.5529 68.9004C92.5894 68.9212 92.6259 68.942 92.6623 68.9629C93.6363 69.5723 93.7509 71.213 92.9332 72.6975C92.9071 72.7496 92.8655 72.8225 92.8238 72.885L85.6619 85.2504C85.0472 86.3182 84.1253 86.9797 83.2503 86.9797L83.245 86.9745Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M79.9846 59.7078C80.1564 59.7078 80.3127 59.7442 80.4533 59.8171L85.0943 62.1819C85.4849 62.3798 85.7349 62.8538 85.7349 63.5257V67.6926C86.1985 67.1822 86.7402 66.8905 87.2142 66.8905C87.3757 66.8905 87.5319 66.927 87.6673 66.9947L92.3083 69.3594C92.3083 69.3594 92.3552 69.3855 92.3812 69.4011C93.1052 69.8542 93.1469 71.2137 92.4697 72.443C92.4437 72.495 92.4124 72.5471 92.3812 72.594L85.2036 84.9854C84.6724 85.9022 83.8963 86.4543 83.2452 86.4543C83.0837 86.4543 82.9275 86.4178 82.7868 86.3501C82.7451 86.3293 82.7087 86.3084 82.6722 86.2772L78.0313 83.9124L70.8537 78.8392C70.1297 78.3861 70.0881 77.0214 70.7652 75.7973C71.2913 74.8389 72.0934 74.2504 72.7705 74.2504C72.932 74.2504 73.0935 74.2868 73.2341 74.3597L77.5052 76.537V62.9944C77.5052 61.7912 78.3074 60.4005 79.297 59.8953C79.5418 59.7703 79.771 59.713 79.9846 59.713M79.9846 58.666C79.5991 58.666 79.2137 58.765 78.8282 58.9577C77.4792 59.6452 76.4635 61.3797 76.4635 62.9892V74.8337L73.7081 73.4274C73.4216 73.2816 73.1039 73.2086 72.7705 73.2086C71.6767 73.2086 70.5569 74.0108 69.8537 75.2973C68.8901 77.037 69.0724 78.9225 70.2756 79.7038L77.4323 84.7615C77.474 84.7927 77.5156 84.8188 77.5625 84.8396L82.1461 87.1783C82.2034 87.2147 82.2607 87.246 82.318 87.2773C82.6045 87.4231 82.917 87.496 83.2452 87.496C84.3025 87.496 85.3964 86.7355 86.1047 85.5063L93.2667 73.1409C93.3135 73.068 93.3552 73.0003 93.3917 72.9274C94.3501 71.172 94.1521 69.2813 92.9333 68.5156C92.8864 68.4844 92.8343 68.4583 92.7823 68.4323L88.1413 66.0675C87.8549 65.9217 87.5423 65.8488 87.2142 65.8488C87.0683 65.8488 86.9225 65.8644 86.7767 65.8904V63.5257C86.7767 62.4736 86.3339 61.6454 85.5682 61.2547L80.9273 58.89C80.6356 58.7441 80.3231 58.666 79.9846 58.666Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M92.3134 69.3595C91.5894 68.9897 90.5008 69.6147 89.8497 70.8023L85.7401 77.9069L81.0991 75.5422L85.2088 68.4375C85.8651 67.25 86.9485 66.6249 87.6725 66.9947L92.3134 69.3595Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M77.8748 76.7193C77.1456 76.3443 76.057 76.9693 75.4059 78.1621C74.7288 79.3862 74.7705 80.7508 75.4945 81.204L82.672 86.2772L78.0311 83.9125L70.8535 78.8393C70.1295 78.3861 70.0879 77.0214 70.765 75.7974C71.4161 74.6046 72.4995 73.9848 73.2339 74.3546L77.8748 76.7193Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M85.0939 62.1815C84.7814 62.0201 84.3751 62.0305 83.9376 62.2545C82.9479 62.7597 82.1458 64.1504 82.1458 65.3536V79.7348L77.5049 77.37V62.9889C77.5049 61.7857 78.307 60.395 79.2967 59.8897C79.7342 59.6658 80.1405 59.6553 80.453 59.8168L85.0939 62.1815Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M85.0942 62.182C85.4849 62.38 85.7349 62.854 85.7349 63.5259V77.907L89.8446 70.8024C90.5008 69.6148 91.5843 68.9898 92.3083 69.3596C92.3343 69.37 92.3551 69.3856 92.3812 69.4013C93.1052 69.8544 93.1469 71.2139 92.4697 72.4431C92.4437 72.4952 92.4124 72.5473 92.3812 72.5942L85.2036 84.9856C84.5421 86.1263 83.49 86.7045 82.7868 86.3503C82.7451 86.3294 82.7087 86.3086 82.6722 86.2774L75.4947 81.2041C74.7707 80.751 74.729 79.3863 75.4061 78.1623C76.0572 76.9695 77.1406 76.3496 77.875 76.7194C77.9011 76.7299 77.9219 76.7455 77.9427 76.7611C77.9688 76.782 78 76.8028 78.0313 76.8236L82.1461 79.7353V65.3541C82.1461 64.1509 82.9483 62.7602 83.9379 62.255C84.3754 62.031 84.7817 62.0206 85.0942 62.182Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M147.202 46.8321C148.338 46.2539 149.796 46.3008 151.395 47.1186C155.005 48.9572 157.927 54.0096 157.927 58.3953C157.927 60.8434 157.015 62.5727 155.583 63.3019L157.906 62.1195C159.338 61.3903 160.25 59.661 160.25 57.213C160.25 52.822 157.323 47.7696 153.718 45.9362C152.124 45.1236 150.661 45.0715 149.525 45.6497L147.202 46.8321Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M147.202 46.8313C145.77 47.5606 144.858 49.2898 144.858 51.7379C144.858 56.1288 147.786 61.1812 151.39 63.0147C152.984 63.8272 154.448 63.8793 155.583 63.3012C157.015 62.572 157.927 60.8427 157.927 58.3946C157.927 54.0037 155 48.9513 151.395 47.1178C149.801 46.3053 148.338 46.2532 147.202 46.8313Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <mask id="path-22-inside-1_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M153.187 53.1648C153.005 52.8523 152.76 52.6023 152.499 52.4721C152.244 52.3419 151.994 52.3419 151.812 52.4721L149.046 54.4253C148.744 54.6389 148.572 55.0504 148.572 55.5712C148.572 56.0921 148.744 56.6755 149.046 57.2015C149.348 57.7224 149.76 58.1391 150.187 58.3579C150.614 58.5766 151.025 58.5766 151.328 58.3631L154.291 56.2692C154.416 56.1806 154.619 56.2848 154.75 56.5036C154.875 56.7223 154.875 56.9672 154.75 57.0609L151.786 59.1548C151.364 59.4569 150.786 59.4517 150.187 59.1444C149.588 58.8371 149.015 58.2589 148.588 57.5245C148.166 56.7953 147.926 55.9723 147.926 55.2431C147.926 54.5139 148.166 53.9357 148.588 53.6388L151.348 51.6856C151.65 51.472 152.062 51.472 152.489 51.6856C152.916 51.9043 153.328 52.321 153.63 52.8419C153.932 53.3628 154.104 53.9513 154.104 54.4722C154.104 54.9931 153.932 55.4045 153.63 55.6233L150.859 57.5766C150.676 57.7068 150.432 57.7016 150.176 57.5766C149.921 57.4463 149.671 57.1963 149.494 56.8838C149.317 56.5713 149.213 56.2171 149.213 55.9046C149.213 55.5921 149.317 55.3473 149.494 55.217L152.234 53.2846C152.359 53.1961 152.562 53.3002 152.692 53.519C152.817 53.7378 152.817 53.9826 152.692 54.0711L149.952 56.0035C149.89 56.0452 149.859 56.1286 149.859 56.2327C149.859 56.3369 149.895 56.4515 149.952 56.5609C150.015 56.665 150.093 56.7484 150.182 56.7901C150.27 56.8317 150.348 56.8317 150.411 56.7901L153.182 54.8368C153.364 54.7066 153.463 54.4618 153.463 54.1493C153.463 53.8367 153.359 53.4825 153.177 53.17L153.187 53.1648Z"
+        />
+      </mask>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M153.187 53.1648C153.005 52.8523 152.76 52.6023 152.499 52.4721C152.244 52.3419 151.994 52.3419 151.812 52.4721L149.046 54.4253C148.744 54.6389 148.572 55.0504 148.572 55.5712C148.572 56.0921 148.744 56.6755 149.046 57.2015C149.348 57.7224 149.76 58.1391 150.187 58.3579C150.614 58.5766 151.025 58.5766 151.328 58.3631L154.291 56.2692C154.416 56.1806 154.619 56.2848 154.75 56.5036C154.875 56.7223 154.875 56.9672 154.75 57.0609L151.786 59.1548C151.364 59.4569 150.786 59.4517 150.187 59.1444C149.588 58.8371 149.015 58.2589 148.588 57.5245C148.166 56.7953 147.926 55.9723 147.926 55.2431C147.926 54.5139 148.166 53.9357 148.588 53.6388L151.348 51.6856C151.65 51.472 152.062 51.472 152.489 51.6856C152.916 51.9043 153.328 52.321 153.63 52.8419C153.932 53.3628 154.104 53.9513 154.104 54.4722C154.104 54.9931 153.932 55.4045 153.63 55.6233L150.859 57.5766C150.676 57.7068 150.432 57.7016 150.176 57.5766C149.921 57.4463 149.671 57.1963 149.494 56.8838C149.317 56.5713 149.213 56.2171 149.213 55.9046C149.213 55.5921 149.317 55.3473 149.494 55.217L152.234 53.2846C152.359 53.1961 152.562 53.3002 152.692 53.519C152.817 53.7378 152.817 53.9826 152.692 54.0711L149.952 56.0035C149.89 56.0452 149.859 56.1286 149.859 56.2327C149.859 56.3369 149.895 56.4515 149.952 56.5609C150.015 56.665 150.093 56.7484 150.182 56.7901C150.27 56.8317 150.348 56.8317 150.411 56.7901L153.182 54.8368C153.364 54.7066 153.463 54.4618 153.463 54.1493C153.463 53.8367 153.359 53.4825 153.177 53.17L153.187 53.1648Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M153.187 53.1648L153.635 54.0591L154.588 53.582L154.051 52.6609L153.187 53.1648ZM152.499 52.4721L152.045 53.3629L152.052 53.3665L152.499 52.4721ZM151.812 52.4721L152.389 53.2889L152.393 53.2858L151.812 52.4721ZM149.046 54.4253L148.469 53.6085L148.469 53.6087L149.046 54.4253ZM149.046 57.2015L148.179 57.6995L148.181 57.7033L149.046 57.2015ZM151.328 58.3631L150.751 57.5463L150.75 57.5465L151.328 58.3631ZM154.291 56.2692L154.868 57.0859L154.869 57.0852L154.291 56.2692ZM154.75 56.5036L155.618 56.0074L155.613 55.9997L155.609 55.9921L154.75 56.5036ZM154.75 57.0609L155.327 57.8776L155.338 57.8694L155.35 57.8609L154.75 57.0609ZM151.786 59.1548L151.209 58.338L151.204 58.3417L151.786 59.1548ZM148.588 57.5245L147.722 58.0253L147.723 58.0272L148.588 57.5245ZM148.588 53.6388L149.163 54.4566L149.165 54.4551L148.588 53.6388ZM151.348 51.6856L150.771 50.869L150.771 50.8692L151.348 51.6856ZM152.489 51.6856L152.945 50.7955L152.936 50.7911L152.489 51.6856ZM153.63 55.6233L154.206 56.4407L154.216 56.4333L153.63 55.6233ZM150.859 57.5766L150.283 56.7592L150.278 56.7628L150.859 57.5766ZM150.176 57.5766L149.722 58.4673L149.729 58.471L149.737 58.4746L150.176 57.5766ZM149.494 55.217L148.918 54.3999L148.91 54.4055L148.902 54.4114L149.494 55.217ZM152.234 53.2846L152.81 54.1018L152.812 54.1006L152.234 53.2846ZM152.692 53.519L153.56 53.0229L153.556 53.0152L153.552 53.0075L152.692 53.519ZM152.692 54.0711L153.269 54.8883L153.27 54.8872L152.692 54.0711ZM149.952 56.0035L150.507 56.8356L150.518 56.8283L150.529 56.8207L149.952 56.0035ZM149.952 56.5609L149.067 57.0249L149.08 57.0505L149.095 57.0754L149.952 56.5609ZM150.411 56.7901L150.966 57.6221L150.976 57.6149L150.987 57.6074L150.411 56.7901ZM153.182 54.8368L153.758 55.6542L153.763 55.6505L153.182 54.8368ZM153.177 53.17L152.729 52.2757L151.776 52.7529L152.313 53.6739L153.177 53.17ZM153.187 53.1648L154.051 52.6609C153.799 52.2288 153.425 51.8168 152.947 51.5776L152.499 52.4721L152.052 53.3665C152.095 53.3878 152.211 53.4758 152.323 53.6687L153.187 53.1648ZM152.499 52.4721L152.954 51.5813C152.476 51.3372 151.805 51.248 151.231 51.6583L151.812 52.4721L152.393 53.2858C152.301 53.3518 152.202 53.3744 152.128 53.3744C152.061 53.3744 152.032 53.3564 152.045 53.3628L152.499 52.4721ZM151.812 52.4721L151.235 51.6552L148.469 53.6085L149.046 54.4253L149.623 55.2422L152.389 53.2889L151.812 52.4721ZM149.046 54.4253L148.469 53.6087C147.807 54.077 147.572 54.8629 147.572 55.5712H148.572H149.572C149.572 55.4173 149.598 55.3182 149.62 55.2661C149.64 55.2162 149.651 55.2227 149.623 55.2419L149.046 54.4253ZM148.572 55.5712H147.572C147.572 56.2975 147.807 57.0509 148.179 57.6995L149.046 57.2015L149.913 56.7036C149.682 56.3 149.572 55.8867 149.572 55.5712H148.572ZM149.046 57.2015L148.181 57.7033C148.555 58.3485 149.095 58.922 149.731 59.2479L150.187 58.3579L150.643 57.4678C150.425 57.3562 150.141 57.0963 149.911 56.6998L149.046 57.2015ZM150.187 58.3579L149.731 59.2479C150.38 59.5803 151.21 59.6707 151.905 59.1797L151.328 58.3631L150.75 57.5465C150.763 57.5374 150.778 57.5303 150.792 57.5262C150.805 57.5222 150.811 57.5226 150.807 57.5226C150.798 57.5226 150.743 57.5192 150.643 57.4678L150.187 58.3579ZM151.328 58.3631L151.905 59.1798L154.868 57.0859L154.291 56.2692L153.714 55.4525L150.751 57.5463L151.328 58.3631ZM154.291 56.2692L154.869 57.0852C154.521 57.3316 154.177 57.2196 154.063 57.1613C153.943 57.1 153.899 57.03 153.89 57.0151L154.75 56.5036L155.609 55.9921C155.47 55.7584 155.259 55.5269 154.974 55.381C154.695 55.238 154.186 55.1183 153.713 55.4532L154.291 56.2692ZM154.75 56.5036L153.881 56.9997C153.869 56.9782 153.843 56.9248 153.843 56.8291C153.843 56.7561 153.865 56.4741 154.15 56.2609L154.75 57.0609L155.35 57.8609C155.759 57.5539 155.843 57.1026 155.843 56.8291C155.843 56.5329 155.755 56.2477 155.618 56.0074L154.75 56.5036ZM154.75 57.0609L154.173 56.2442L151.209 58.3381L151.786 59.1548L152.363 59.9715L155.327 57.8776L154.75 57.0609ZM151.786 59.1548L151.204 58.3417C151.182 58.3572 151.029 58.4524 150.643 58.2546L150.187 59.1444L149.73 60.0341C150.543 60.451 151.546 60.5566 152.368 59.9678L151.786 59.1548ZM150.187 59.1444L150.643 58.2546C150.252 58.054 149.807 57.6318 149.452 57.0218L148.588 57.5245L147.723 58.0272C148.223 58.886 148.923 59.6201 149.73 60.0341L150.187 59.1444ZM148.588 57.5245L149.453 57.0237C149.105 56.4216 148.926 55.7695 148.926 55.2431H147.926H146.926C146.926 56.175 147.227 57.169 147.722 58.0253L148.588 57.5245ZM147.926 55.2431H148.926C148.926 54.6974 149.106 54.4972 149.163 54.4566L148.588 53.6388L148.012 52.821C147.226 53.3742 146.926 54.3303 146.926 55.2431H147.926ZM148.588 53.6388L149.165 54.4551L151.926 52.5019L151.348 51.6856L150.771 50.8692L148.01 52.8225L148.588 53.6388ZM151.348 51.6856L151.926 52.5021C151.913 52.5113 151.898 52.5181 151.885 52.5221C151.872 52.526 151.867 52.5254 151.872 52.5254C151.883 52.5254 151.94 52.5292 152.042 52.58L152.489 51.6856L152.936 50.7911C152.291 50.4687 151.464 50.379 150.771 50.869L151.348 51.6856ZM152.489 51.6856L152.033 52.5756C152.251 52.6873 152.535 52.9472 152.765 53.3436L153.63 52.8419L154.495 52.3402C154.121 51.6949 153.581 51.1214 152.945 50.7955L152.489 51.6856ZM153.63 52.8419L152.765 53.3436C152.993 53.7374 153.104 54.1547 153.104 54.4722H154.104H155.104C155.104 53.7479 154.871 52.9881 154.495 52.3402L153.63 52.8419ZM154.104 54.4722H153.104C153.104 54.6258 153.078 54.7254 153.056 54.7791C153.035 54.8304 153.022 54.8287 153.043 54.8134L153.63 55.6233L154.216 56.4333C154.867 55.9617 155.104 55.1846 155.104 54.4722H154.104ZM153.63 55.6233L153.054 54.806L150.283 56.7592L150.859 57.5766L151.435 58.3939L154.206 56.4407L153.63 55.6233ZM150.859 57.5766L150.278 56.7628C150.373 56.6944 150.476 56.6719 150.551 56.6723C150.616 56.6727 150.639 56.6898 150.616 56.6785L150.176 57.5766L149.737 58.4746C150.19 58.6968 150.856 58.8076 151.44 58.3903L150.859 57.5766ZM150.176 57.5766L150.631 56.6858C150.583 56.6612 150.464 56.5676 150.364 56.3908L149.494 56.8838L148.624 57.3768C148.878 57.825 149.26 58.2315 149.722 58.4673L150.176 57.5766ZM149.494 56.8838L150.364 56.3908C150.255 56.199 150.213 56.0132 150.213 55.9046H149.213H148.213C148.213 56.421 148.379 56.9436 148.624 57.3768L149.494 56.8838ZM149.213 55.9046H150.213C150.213 55.8566 150.221 55.8504 150.211 55.8745C150.201 55.9003 150.167 55.9637 150.086 56.0227L149.494 55.217L148.902 54.4114C148.383 54.7925 148.213 55.3966 148.213 55.9046H149.213ZM149.494 55.217L150.07 56.0342L152.81 54.1018L152.234 53.2846L151.657 52.4674L148.918 54.3999L149.494 55.217ZM152.234 53.2846L152.812 54.1006C152.464 54.347 152.119 54.235 152.005 54.1768C151.886 54.1155 151.842 54.0454 151.833 54.0305L152.692 53.519L153.552 53.0075C153.412 52.7739 153.202 52.5423 152.917 52.3964C152.637 52.2535 152.129 52.1337 151.656 52.4686L152.234 53.2846ZM152.692 53.519L151.824 54.0151C151.812 53.9942 151.786 53.9407 151.786 53.8439C151.786 53.7739 151.807 53.4727 152.114 53.2551L152.692 54.0711L153.27 54.8872C153.703 54.581 153.786 54.1131 153.786 53.8439C153.786 53.5478 153.697 53.2626 153.56 53.0229L152.692 53.519ZM152.692 54.0711L152.116 53.2539L149.376 55.1864L149.952 56.0035L150.529 56.8207L153.269 54.8883L152.692 54.0711ZM149.952 56.0035L149.398 55.1715C148.932 55.4819 148.859 55.979 148.859 56.2327H149.859H150.859C150.859 56.275 150.853 56.36 150.811 56.4661C150.766 56.5769 150.675 56.7235 150.507 56.8356L149.952 56.0035ZM149.859 56.2327H148.859C148.859 56.5544 148.965 56.8317 149.067 57.0249L149.952 56.5609L150.838 56.0969C150.835 56.0906 150.838 56.0955 150.843 56.1127C150.848 56.1289 150.859 56.1704 150.859 56.2327H149.859ZM149.952 56.5609L149.095 57.0754C149.213 57.2727 149.421 57.5373 149.756 57.6949L150.182 56.7901L150.607 55.8852C150.692 55.9249 150.744 55.9712 150.77 55.9978C150.797 56.0248 150.808 56.0437 150.81 56.0464L149.952 56.5609ZM150.182 56.7901L149.756 57.6949C150.052 57.8343 150.523 57.9169 150.966 57.6221L150.411 56.7901L149.856 55.958C149.995 55.8657 150.154 55.8213 150.306 55.8213C150.448 55.8213 150.552 55.8594 150.607 55.8852L150.182 56.7901ZM150.411 56.7901L150.987 57.6074L153.758 55.6542L153.182 54.8368L152.606 54.0195L149.835 55.9727L150.411 56.7901ZM153.182 54.8368L153.763 55.6505C154.306 55.2625 154.463 54.6416 154.463 54.1493H153.463H152.463C152.463 54.2038 152.454 54.2104 152.465 54.1838C152.477 54.1535 152.515 54.0843 152.601 54.0231L153.182 54.8368ZM153.463 54.1493H154.463C154.463 53.6319 154.297 53.1057 154.04 52.6662L153.177 53.17L152.313 53.6739C152.421 53.8594 152.463 54.0416 152.463 54.1493H153.463ZM153.177 53.17L153.624 54.0643L153.635 54.0591L153.187 53.1648L152.74 52.2705L152.729 52.2757L153.177 53.17Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-22-inside-1_637_1592)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M144.91 30.6067C146.343 29.8775 147.254 28.1535 147.254 25.7002C147.254 21.3093 144.327 16.2568 140.723 14.4234L116.554 2.10488C114.961 1.29233 113.502 1.24024 112.367 1.81841L114.69 0.636036C115.825 0.0578738 117.284 0.109961 118.878 0.922513L143.046 13.2358C146.655 15.0745 149.577 20.1269 149.577 24.5126C149.577 26.9659 148.666 28.6899 147.234 29.4192L144.91 30.6015V30.6067Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M144.911 30.6067C143.775 31.1848 142.317 31.1327 140.723 30.3202L116.555 18.0069C112.945 16.1682 110.023 11.1158 110.023 6.73011C110.023 4.27682 110.934 2.55275 112.367 1.82354C113.502 1.24537 114.961 1.29746 116.555 2.11001L140.723 14.4233C144.332 16.262 147.255 21.3144 147.255 25.7001C147.255 28.1534 146.343 29.8774 144.911 30.6067Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M117.308 12.4658C117.174 12.4967 117.043 12.5506 116.921 12.6367C116.89 12.6592 116.861 12.6849 116.833 12.71C116.879 12.6416 116.928 12.5904 116.977 12.5557C117.054 12.5014 117.163 12.4613 117.308 12.4658Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+      <path
+        d="M122.445 12.3984C122.404 12.4558 122.362 12.5004 122.318 12.5312C122.243 12.5843 122.144 12.6204 122.013 12.6201C122.14 12.5879 122.263 12.5348 122.375 12.4551C122.4 12.4376 122.422 12.4176 122.445 12.3984Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+      <mask id="path-28-inside-2_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path d="M123.883 18.7353C123.68 18.6311 123.513 18.3446 123.513 18.0998V17.2039C123.513 16.5893 123.175 15.8809 122.685 15.4799C122.487 15.3184 122.367 15.0111 122.419 14.7975C122.471 14.584 122.669 14.5423 122.867 14.7038C123.68 15.3757 124.248 16.5529 124.248 17.5738V18.4697C124.248 18.7197 124.081 18.8343 123.878 18.7301L123.883 18.7353Z" />
+      </mask>
+      <path
+        d="M123.883 18.7353C123.68 18.6311 123.513 18.3446 123.513 18.0998V17.2039C123.513 16.5893 123.175 15.8809 122.685 15.4799C122.487 15.3184 122.367 15.0111 122.419 14.7975C122.471 14.584 122.669 14.5423 122.867 14.7038C123.68 15.3757 124.248 16.5529 124.248 17.5738V18.4697C124.248 18.7197 124.081 18.8343 123.878 18.7301L123.883 18.7353Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M123.883 18.7353L123.427 19.6251L124.59 18.0285L123.883 18.7353ZM122.685 15.4799L123.319 14.7063L123.317 14.705L122.685 15.4799ZM122.867 14.7038L123.505 13.9331L123.499 13.9289L122.867 14.7038ZM123.878 18.7301L124.334 17.8403L123.17 19.4369L123.878 18.7301ZM123.883 18.7353L124.339 17.8455C124.402 17.8777 124.439 17.9114 124.456 17.9284C124.473 17.9466 124.482 17.9601 124.486 17.9674C124.491 17.9748 124.496 17.9853 124.501 18.0014C124.505 18.0167 124.513 18.0498 124.513 18.0998H123.513H122.513C122.513 18.4342 122.621 18.739 122.758 18.9733C122.892 19.2035 123.11 19.4625 123.427 19.6251L123.883 18.7353ZM123.513 18.0998H124.513V17.2039H123.513H122.513V18.0998H123.513ZM123.513 17.2039H124.513C124.513 16.2823 124.034 15.2926 123.319 14.7063L122.685 15.4799L122.051 16.2535C122.315 16.4693 122.513 16.8964 122.513 17.2039H123.513ZM122.685 15.4799L123.317 14.705C123.348 14.7305 123.365 14.752 123.373 14.7632C123.381 14.7748 123.386 14.785 123.39 14.7953C123.394 14.8051 123.401 14.8254 123.405 14.8582C123.408 14.8893 123.411 14.9514 123.391 15.0345L122.419 14.7975L121.448 14.5606C121.359 14.9263 121.43 15.2728 121.527 15.5212C121.627 15.7791 121.8 16.0481 122.053 16.2547L122.685 15.4799ZM122.419 14.7975L123.391 15.0345C123.348 15.2113 123.174 15.5091 122.794 15.5887C122.476 15.6554 122.274 15.5104 122.235 15.4787L122.867 14.7038L123.499 13.9289C123.263 13.7358 122.863 13.5308 122.383 13.6313C121.842 13.7448 121.543 14.1703 121.448 14.5606L122.419 14.7975ZM122.867 14.7038L122.23 15.4744C122.823 15.9646 123.248 16.8636 123.248 17.5738H124.248H125.248C125.248 16.2421 124.537 14.7868 123.505 13.9331L122.867 14.7038ZM124.248 17.5738H123.248V18.4697H124.248H125.248V17.5738H124.248ZM124.248 18.4697H123.248C123.248 18.3954 123.276 18.116 123.566 17.9131C123.884 17.6905 124.206 17.7744 124.334 17.8403L123.878 18.7301L123.422 19.6199C123.753 19.79 124.259 19.8687 124.712 19.5523C125.136 19.2557 125.248 18.7939 125.248 18.4697H124.248ZM123.878 18.7301L123.17 19.4369L123.176 19.4421L123.883 18.7353L124.59 18.0285L124.585 18.0233L123.878 18.7301Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-28-inside-2_637_1592)"
+      />
+      <path
+        d="M120.259 11.25C120.212 11.3214 120.161 11.3744 120.111 11.4102C120.033 11.4652 119.922 11.5039 119.774 11.498C119.91 11.4676 120.043 11.4149 120.166 11.3281C120.199 11.3044 120.229 11.2767 120.259 11.25ZM118.413 7.64746C118.278 7.67835 118.147 7.73227 118.026 7.81836C117.994 7.84085 117.966 7.86651 117.937 7.8916C117.983 7.82328 118.032 7.77201 118.082 7.7373C118.158 7.68304 118.268 7.64298 118.413 7.64746Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+      <mask id="path-31-inside-3_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path d="M134.921 23.1892C134.717 23.085 134.551 22.7985 134.551 22.5537V18.0742C134.551 17.8242 134.717 17.7096 134.921 17.8138C135.124 17.918 135.29 18.2045 135.29 18.4493V22.9287C135.29 23.1787 135.124 23.2933 134.921 23.1892Z" />
+      </mask>
+      <path
+        d="M134.921 23.1892C134.717 23.085 134.551 22.7985 134.551 22.5537V18.0742C134.551 17.8242 134.717 17.7096 134.921 17.8138C135.124 17.918 135.29 18.2045 135.29 18.4493V22.9287C135.29 23.1787 135.124 23.2933 134.921 23.1892Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M134.921 23.1892L135.377 22.2993C135.44 22.3315 135.477 22.3652 135.493 22.3823C135.511 22.4004 135.52 22.4139 135.524 22.4212C135.528 22.4287 135.533 22.4391 135.538 22.4553C135.543 22.4706 135.551 22.5037 135.551 22.5537H134.551H133.551C133.551 22.8881 133.659 23.1928 133.795 23.4271C133.929 23.6573 134.147 23.9164 134.464 24.079L134.921 23.1892ZM134.551 22.5537H135.551V18.0742H134.551H133.551V22.5537H134.551ZM134.551 18.0742H135.551C135.551 18.1485 135.523 18.4279 135.232 18.6308C134.914 18.8534 134.593 18.7695 134.464 18.7036L134.921 17.8138L135.377 16.924C135.045 16.7539 134.539 16.6752 134.087 16.9916C133.662 17.2882 133.551 17.75 133.551 18.0742H134.551ZM134.921 17.8138L134.464 18.7036C134.401 18.6714 134.365 18.6377 134.348 18.6207C134.33 18.6025 134.322 18.589 134.317 18.5817C134.313 18.5743 134.308 18.5638 134.303 18.5477C134.298 18.5324 134.29 18.4993 134.29 18.4493H135.29H136.29C136.29 18.1149 136.182 17.8101 136.046 17.5758C135.912 17.3456 135.694 17.0866 135.377 16.924L134.921 17.8138ZM135.29 18.4493H134.29V22.9287H135.29H136.29V18.4493H135.29ZM135.29 22.9287H134.29C134.29 22.8545 134.318 22.575 134.609 22.3722C134.927 22.1496 135.248 22.2335 135.377 22.2993L134.921 23.1892L134.464 24.079C134.796 24.249 135.302 24.3277 135.755 24.0114C136.179 23.7147 136.29 23.253 136.29 22.9287H135.29Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-31-inside-3_637_1592)"
+      />
+      <mask id="path-33-inside-4_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path d="M137.129 24.3195C136.925 24.2154 136.759 23.9289 136.759 23.6841V16.5117C136.759 16.2617 136.925 16.1471 137.129 16.2513C137.332 16.3555 137.498 16.642 137.498 16.8868V24.0591C137.498 24.3091 137.332 24.4237 137.129 24.3195Z" />
+      </mask>
+      <path
+        d="M137.129 24.3195C136.925 24.2154 136.759 23.9289 136.759 23.6841V16.5117C136.759 16.2617 136.925 16.1471 137.129 16.2513C137.332 16.3555 137.498 16.642 137.498 16.8868V24.0591C137.498 24.3091 137.332 24.4237 137.129 24.3195Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M137.129 24.3195L137.585 23.4297C137.648 23.4619 137.685 23.4956 137.701 23.5127C137.719 23.5308 137.728 23.5443 137.732 23.5516C137.736 23.5591 137.741 23.5695 137.746 23.5857C137.751 23.601 137.759 23.6341 137.759 23.6841H136.759H135.759C135.759 24.0184 135.867 24.3232 136.003 24.5575C136.137 24.7877 136.355 25.0467 136.672 25.2094L137.129 24.3195ZM136.759 23.6841H137.759V16.5117H136.759H135.759V23.6841H136.759ZM136.759 16.5117H137.759C137.759 16.586 137.731 16.8654 137.44 17.0683C137.122 17.2909 136.801 17.207 136.672 17.1411L137.129 16.2513L137.585 15.3615C137.253 15.1914 136.747 15.1127 136.295 15.4291C135.87 15.7257 135.759 16.1875 135.759 16.5117H136.759ZM137.129 16.2513L136.672 17.1411C136.609 17.1089 136.573 17.0752 136.556 17.0582C136.538 17.0401 136.53 17.0265 136.525 17.0193C136.521 17.0118 136.516 17.0013 136.511 16.9852C136.507 16.9699 136.498 16.9368 136.498 16.8868H137.498H138.498C138.498 16.5524 138.39 16.2476 138.254 16.0133C138.12 15.7831 137.902 15.5241 137.585 15.3615L137.129 16.2513ZM137.498 16.8868H136.498V24.0591H137.498H138.498V16.8868H137.498ZM137.498 24.0591H136.498C136.498 23.9849 136.527 23.7054 136.817 23.5025C137.135 23.2799 137.456 23.3638 137.585 23.4297L137.129 24.3195L136.672 25.2094C137.004 25.3794 137.51 25.4581 137.963 25.1418C138.387 24.8451 138.498 24.3834 138.498 24.0591H137.498Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-33-inside-4_637_1592)"
+      />
+      <mask id="path-35-inside-5_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path d="M132.712 22.064C132.508 21.9598 132.342 21.6733 132.342 21.4285V19.6367C132.342 19.3867 132.508 19.2721 132.712 19.3763C132.915 19.4805 133.081 19.767 133.081 20.0118V21.8035C133.081 22.0536 132.915 22.1682 132.712 22.064Z" />
+      </mask>
+      <path
+        d="M132.712 22.064C132.508 21.9598 132.342 21.6733 132.342 21.4285V19.6367C132.342 19.3867 132.508 19.2721 132.712 19.3763C132.915 19.4805 133.081 19.767 133.081 20.0118V21.8035C133.081 22.0536 132.915 22.1682 132.712 22.064Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M132.712 22.064L133.168 21.1742C133.231 21.2064 133.268 21.2401 133.284 21.2571C133.302 21.2752 133.311 21.2887 133.315 21.296C133.319 21.3035 133.324 21.3139 133.329 21.3301C133.334 21.3454 133.342 21.3785 133.342 21.4285H132.342H131.342C131.342 21.7629 131.45 22.0677 131.586 22.302C131.72 22.5322 131.938 22.7912 132.255 22.9538L132.712 22.064ZM132.342 21.4285H133.342V19.6367H132.342H131.342V21.4285H132.342ZM132.342 19.6367H133.342C133.342 19.711 133.314 19.9904 133.023 20.1933C132.705 20.4159 132.384 20.332 132.255 20.2661L132.712 19.3763L133.168 18.4865C132.836 18.3164 132.33 18.2377 131.878 18.5541C131.453 18.8507 131.342 19.3125 131.342 19.6367H132.342ZM132.712 19.3763L132.255 20.2661C132.192 20.2339 132.156 20.2002 132.139 20.1832C132.121 20.165 132.113 20.1515 132.108 20.1442C132.104 20.1368 132.099 20.1263 132.094 20.1102C132.09 20.0949 132.081 20.0618 132.081 20.0118H133.081H134.081C134.081 19.6774 133.973 19.3726 133.837 19.1383C133.703 18.9081 133.485 18.6491 133.168 18.4865L132.712 19.3763ZM133.081 20.0118H132.081V21.8035H133.081H134.081V20.0118H133.081ZM133.081 21.8035H132.081C132.081 21.7293 132.11 21.4499 132.4 21.247C132.718 21.0244 133.039 21.1083 133.168 21.1742L132.712 22.064L132.255 22.9538C132.587 23.1238 133.093 23.2025 133.546 22.8862C133.97 22.5895 134.081 22.1278 134.081 21.8035H133.081Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        mask="url(#path-35-inside-5_637_1592)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M33.0541 21.9082C31.9186 21.3301 30.4602 21.377 28.8611 22.1947C25.2515 24.0334 22.3294 29.0858 22.3294 33.4715C22.3294 35.9196 23.2409 37.6489 24.6733 38.3781L22.3503 37.1957C20.9179 36.4665 20.0063 34.7372 20.0063 32.2891C20.0063 27.8982 22.9336 22.8458 26.538 21.0124C28.1319 20.1998 29.5955 20.1477 30.731 20.7259L33.0541 21.9082Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M33.0542 21.9075C34.4866 22.6367 35.3982 24.366 35.3982 26.8141C35.3982 31.205 32.4709 36.2574 28.8665 38.0909C27.2726 38.9034 25.809 38.9555 24.6735 38.3773C23.2411 37.6481 22.3296 35.9188 22.3296 33.4708C22.3296 29.0799 25.2569 24.0275 28.8613 22.194C30.4551 21.3814 31.9188 21.3294 33.0542 21.9075Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M29.908 28.3773C29.9601 28.4867 30.0747 28.5128 30.2101 28.4294C30.3924 28.3148 30.5435 28.0336 30.5435 27.8044V27.3825C30.5435 27.2471 30.4914 27.1481 30.4028 27.1273C30.3143 27.1064 30.1997 27.1637 30.0955 27.2783L27.9391 29.6951C27.8089 29.841 27.7256 30.0441 27.7256 30.216V33.1172C27.7256 33.2631 27.7881 33.3568 27.8871 33.3673C27.986 33.3777 28.111 33.3048 28.21 33.1745L28.5173 32.7787C28.6788 32.5703 28.7413 32.2786 28.6579 32.1276C28.6006 32.0286 28.4965 32.0182 28.3871 32.0807V30.0754L29.9028 28.3721L29.908 28.3773Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.5799 27.9828C28.632 28.0922 28.7466 28.1182 28.882 28.0349C29.0643 27.9203 29.2154 27.639 29.2154 27.4099V26.988C29.2154 26.8525 29.1633 26.7536 29.0747 26.7327C28.9862 26.7119 28.8716 26.7692 28.7674 26.8838L26.611 29.3006C26.4808 29.4465 26.3975 29.6496 26.3975 29.8215V32.7227C26.3975 32.8685 26.46 32.9623 26.5589 32.9727C26.6579 32.9831 26.7829 32.9102 26.8819 32.78L27.1892 32.3841C27.3506 32.1758 27.4132 31.8841 27.3298 31.7331C27.2725 31.6341 27.1683 31.6237 27.059 31.6862V29.6808L28.5747 27.9776L28.5799 27.9828Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M32.0127 30.5806C32.0127 30.7525 31.9294 30.9608 31.7992 31.1015L29.648 33.5131C29.5438 33.6277 29.4292 33.685 29.3407 33.6641C29.2521 33.6433 29.1948 33.5495 29.1948 33.4141V30.5129C29.1948 30.341 29.2782 30.1326 29.4084 29.992L31.5648 27.5752C31.6689 27.4606 31.7835 27.4033 31.8721 27.4241C31.9606 27.445 32.0179 27.5387 32.0179 27.6742V30.5806H32.0127ZM31.3512 28.7055L29.8615 30.3775V32.3932L31.3512 30.7212V28.7055Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx b/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx
new file mode 100644
index 0000000..408bc10
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx
@@ -0,0 +1,189 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ChangelogVerticalStackIllustration({ className, ...rest }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="172"
+      viewBox="0 0 162 172"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.8434 47.4295C14.6167 46.8049 13.0411 46.8555 11.3136 47.739C7.41402 49.7253 4.25723 55.1836 4.25723 59.9216C4.25723 62.5663 5.24196 64.4345 6.78941 65.2223L4.27974 63.9449C2.7323 63.1571 1.74756 61.289 1.74756 58.6442C1.74756 53.9006 4.90996 48.4424 8.80389 46.4616C10.5258 45.5838 12.107 45.5275 13.3337 46.1522L15.8434 47.4295Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.8432 47.4297C17.3907 48.2175 18.3754 50.0857 18.3754 52.7304C18.3754 57.4741 15.213 62.9323 11.319 64.913C9.59716 65.7909 8.01596 65.8471 6.78926 65.2225C5.24182 64.4347 4.25708 62.5666 4.25708 59.9218C4.25708 55.1782 7.4195 49.72 11.3134 47.7392C13.0353 46.8614 14.6165 46.8051 15.8432 47.4297Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.1332 55.353L9.13666 55.351M9.1332 60.153L9.13666 60.151M8.85607 57.113L13.5672 54.393C13.9553 54.169 14.1493 54.0569 14.2975 53.8842C14.4278 53.7322 14.5338 53.5486 14.6002 53.3598C14.6758 53.145 14.6758 52.921 14.6758 52.473V51.833C14.6758 51.3849 14.6758 51.1609 14.6002 51.0334C14.5338 50.9212 14.4278 50.86 14.2975 50.8586C14.1493 50.8569 13.9553 50.969 13.5672 51.193L8.85607 53.913C8.46805 54.137 8.27405 54.249 8.12585 54.4218C7.99548 54.5737 7.88949 54.7573 7.82307 54.9462C7.74756 55.1609 7.74756 55.3849 7.74756 55.833V56.473C7.74756 56.921 7.74756 57.145 7.82307 57.2726C7.88949 57.3848 7.99548 57.4459 8.12585 57.4474C8.27405 57.449 8.46806 57.337 8.85607 57.113ZM8.85607 61.913L13.5672 59.193C13.9553 58.969 14.1493 58.8569 14.2975 58.6842C14.4278 58.5322 14.5338 58.3486 14.6002 58.1598C14.6758 57.9451 14.6758 57.721 14.6758 57.273V56.633C14.6758 56.1849 14.6758 55.9609 14.6002 55.8334C14.5338 55.7212 14.4278 55.66 14.2975 55.6586C14.1493 55.6569 13.9553 55.769 13.5672 55.993L8.85607 58.713C8.46805 58.937 8.27405 59.049 8.12585 59.2218C7.99548 59.3737 7.88949 59.5573 7.82307 59.7462C7.74756 59.9609 7.74756 60.1849 7.74756 60.633V61.273C7.74756 61.721 7.74756 61.9451 7.82307 62.0726C7.88949 62.1848 7.99548 62.246 8.12585 62.2474C8.27405 62.249 8.46806 62.137 8.85607 61.913Z"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <g opacity="0.2">
+        <path
+          d="M2.20337 134.919C2.20337 137.046 3.79582 139.168 6.97511 140.794L47.912 161.653C54.2762 164.895 64.5907 164.895 70.9549 161.653L156.976 117.824C160.155 116.204 161.748 114.082 161.748 111.955V118.747C161.748 120.874 160.155 122.995 156.976 124.616L70.9549 168.445C64.5907 171.686 54.2762 171.686 47.912 168.445L6.97511 147.586C3.79019 145.965 2.20337 143.838 2.20337 141.711V134.919Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.20337 134.919C2.20337 132.792 3.79582 130.671 6.97511 129.05L92.9961 85.2209C99.3603 81.9797 109.675 81.9797 116.039 85.2209L156.976 106.08C160.161 107.701 161.748 109.828 161.748 111.955C161.748 114.082 160.155 116.204 156.976 117.824L70.9549 161.653C64.5907 164.895 54.2762 164.895 47.912 161.653L6.97511 140.794C3.79019 139.173 2.20337 137.046 2.20337 134.919Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M2.20337 113.463C2.20337 115.59 3.79582 117.712 6.97511 119.338L47.912 140.197C54.2762 143.438 64.5907 143.438 70.9549 140.197L156.976 96.3681C160.155 94.7475 161.748 92.6261 161.748 90.499V97.2909C161.748 99.4179 160.155 101.539 156.976 103.16L70.9549 146.989C64.5907 150.23 54.2762 150.23 47.912 146.989L6.97511 126.13C3.79019 124.509 2.20337 122.382 2.20337 120.255V113.463Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.20337 113.463C2.20337 111.336 3.79582 109.215 6.97511 107.594L92.9961 63.7649C99.3603 60.5237 109.675 60.5237 116.039 63.7649L156.976 84.6244C160.161 86.245 161.748 88.372 161.748 90.4991C161.748 92.6261 160.155 94.7475 156.976 96.3681L70.9549 140.197C64.5907 143.439 54.2762 143.439 47.912 140.197L6.97511 119.338C3.79019 117.717 2.20337 115.59 2.20337 113.463Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M2.20337 92.0073C2.20337 94.1343 3.79582 96.2557 6.97511 97.8819L47.912 118.741C54.2762 121.983 64.5907 121.983 70.9549 118.741L156.976 74.9122C160.155 73.2916 161.748 71.1702 161.748 69.0432V75.8351C161.748 77.9621 160.155 80.0835 156.976 81.7041L70.9549 125.533C64.5907 128.775 54.2762 128.775 47.912 125.533L6.97511 104.674C3.79019 103.053 2.20337 100.926 2.20337 98.7991V92.0073Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.20337 92.0071C2.20337 89.8801 3.79582 87.7587 6.97511 86.1381L92.9961 42.3088C99.3603 39.0676 109.675 39.0676 116.039 42.3088L156.976 63.1684C160.161 64.789 161.748 66.916 161.748 69.043C161.748 71.1701 160.155 73.2915 156.976 74.9121L70.9549 118.741C64.5907 121.982 54.2762 121.982 47.912 118.741L6.97511 97.8818C3.79019 96.2612 2.20337 94.1341 2.20337 92.0071Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M70.0996 92.4116C69.4525 92.4116 68.8448 92.2709 68.2989 91.9895L63.2852 89.4348C61.7153 88.6358 60.8149 86.8014 60.8149 84.4042V25.6577C60.8149 21.4205 63.6622 16.5193 67.1566 14.7355L94.3129 0.898567C94.3917 0.859177 94.4817 0.83667 94.5661 0.83667C94.6505 0.83667 94.7405 0.859177 94.8193 0.898567L99.833 3.45326C99.833 3.45326 99.878 3.48139 99.9005 3.49265L114.987 14.1616C115.139 14.2685 115.223 14.4373 115.223 14.623V62.3574C115.223 66.5946 112.376 71.4958 108.881 73.2795L72.6712 91.7307C71.7821 92.1809 70.9155 92.4116 70.0884 92.4116H70.0996Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M94.5717 1.39958L99.5854 3.95427L114.672 14.6232V62.3576C114.672 66.4147 111.971 71.0796 108.634 72.7789L72.4235 91.2301C71.5964 91.6521 70.8086 91.8491 70.0939 91.8491C69.5312 91.8491 69.0135 91.7253 68.5521 91.4889L63.5384 88.9342C62.216 88.259 61.3776 86.6665 61.3776 84.4045V25.6579C61.3776 21.6008 64.0786 16.9359 67.4098 15.2365L94.5661 1.39958M94.5717 0.27417C94.3972 0.27417 94.2228 0.313559 94.0596 0.397965L66.9034 14.2349C63.1726 16.1369 60.2522 21.1506 60.2522 25.6579V84.4045C60.2522 87.021 61.2651 89.0412 63.032 89.9359L68.0457 92.4906C68.6703 92.8113 69.3624 92.9689 70.0995 92.9689C71.0168 92.9689 71.9734 92.7213 72.9412 92.2261L109.151 73.7749C112.882 71.873 115.803 66.8593 115.803 62.352V14.6288C115.803 14.2631 115.628 13.9198 115.324 13.7116L100.238 3.04269C100.193 3.00892 100.148 2.98079 100.097 2.95828L95.0837 0.403592C94.9206 0.319186 94.7461 0.279797 94.5717 0.279797V0.27417Z"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+      <path
+        d="M99.5855 3.95386L72.4292 17.7908C69.098 19.4902 66.397 24.155 66.397 28.2122V86.9587C66.397 89.2208 67.2355 90.8133 68.5578 91.4885L63.5441 88.9338C62.2217 88.2586 61.3833 86.6661 61.3833 84.4041V25.6575C61.3833 21.6003 64.0843 16.9355 67.4155 15.2361L94.5717 1.39917L99.5855 3.95386Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.5852 3.95386L114.671 14.6284V62.3628C114.671 66.4199 111.97 71.0848 108.639 72.7841L72.4289 91.2353C70.9547 91.9837 69.6042 92.0287 68.5575 91.4998C67.2352 90.8245 66.3967 89.2321 66.3967 86.97V28.2234C66.3967 24.1663 69.0977 19.5014 72.4289 17.8021L99.5852 3.96511V3.95386Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M93.9809 64.7865L76.6833 73.5984C75.6141 74.1443 74.7476 73.5309 74.7476 72.2311C74.7476 70.9312 75.6141 69.44 76.6833 68.8942L93.9809 60.0822C95.05 59.5364 95.9166 60.1498 95.9166 61.4496C95.9166 62.7495 95.05 64.2406 93.9809 64.7865Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <path
+        d="M102.185 46.4566L76.6833 59.4495C75.6141 59.9954 74.7476 59.382 74.7476 58.0822C74.7476 56.7823 75.6141 55.2911 76.6833 54.7453L102.185 41.7524C103.254 41.2066 104.121 41.8199 104.121 43.1198C104.121 44.4196 103.254 45.9108 102.185 46.4566Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <path
+        d="M99.5854 3.95386V14.9717C99.5854 19.0288 102.286 20.9363 105.618 19.2426L114.672 14.6284"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M99.5854 3.95386V14.9717C99.5854 19.0288 102.286 20.9363 105.618 19.2426L114.672 14.6284"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <g clipPath="url(#clip0_1278_188)">
+        <path
+          d="M87.4006 34.9911L86.198 37.0745L84.9948 36.3801M86.3451 36.6423C86.3669 36.4017 86.3781 36.1634 86.3781 35.9287C86.3781 32.4767 83.9546 31.0775 80.9651 32.8035C77.9755 34.5295 75.552 38.7271 75.552 42.1792C75.552 45.6312 77.9755 47.0304 80.9651 45.3044C82.6655 44.3226 84.1828 42.5412 85.1752 40.5522M80.9651 35.5815V39.0539L82.7694 39.4012"
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M138.575 1.89434C139.802 1.26974 141.377 1.32038 143.105 2.20383C147.004 4.19019 150.161 9.64844 150.161 14.3864C150.161 17.0312 149.176 18.8993 147.629 19.6871L150.139 18.4098C151.686 17.622 152.671 15.7538 152.671 13.1091C152.671 8.36547 149.508 2.90721 145.614 0.926486C143.893 0.0486632 142.311 -0.00760811 141.085 0.616996L138.575 1.89434Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M138.575 1.89458C137.028 2.68237 136.043 4.55056 136.043 7.19528C136.043 11.9389 139.205 17.3972 143.099 19.3779C144.821 20.2557 146.402 20.312 147.629 19.6874C149.177 18.8996 150.161 17.0314 150.161 14.3867C150.161 9.64306 146.999 4.1848 143.105 2.20407C141.383 1.32625 139.802 1.26998 138.575 1.89458Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M139.459 6.68336C139.459 6.42451 139.633 6.30072 139.841 6.41326L146.768 9.94143C146.982 10.0483 147.151 10.3466 147.151 10.6054C147.151 10.8643 146.976 10.9881 146.768 10.8755L139.841 7.34735C139.628 7.24044 139.459 6.9422 139.459 6.68336ZM139.459 9.02422C139.459 8.76537 139.633 8.64158 139.841 8.75412L143.69 10.718C143.904 10.8249 144.073 11.1231 144.073 11.382C144.073 11.6408 143.899 11.7646 143.69 11.6521L139.841 9.68821C139.628 9.5813 139.459 9.28306 139.459 9.02422ZM139.847 10.6279C139.633 10.521 139.464 10.6392 139.464 10.898C139.464 11.1569 139.639 11.4551 139.847 11.562L142.542 12.935C142.756 13.0419 142.925 12.9238 142.925 12.6649C142.925 12.4061 142.751 12.1079 142.542 12.0009L139.847 10.6279ZM139.459 12.7718C139.459 12.513 139.633 12.3892 139.841 12.5017L141.383 13.2839C141.597 13.3908 141.766 13.6891 141.766 13.9479C141.766 14.2067 141.591 14.3305 141.383 14.218L139.841 13.4358C139.628 13.3289 139.459 13.0307 139.459 12.7718ZM146.245 12.7212C146.386 12.7944 146.521 12.9294 146.616 13.0982C146.718 13.267 146.768 13.4583 146.768 13.6328C146.768 13.8072 146.712 13.9366 146.616 14.0098L146.386 14.173L145.643 12.8844L145.874 12.7212C145.975 12.6537 146.104 12.6537 146.245 12.7212ZM145.429 13.0307L146.172 14.3193L144.484 15.5122C144.36 15.6023 144.208 15.6304 144.039 15.6079L143.499 15.5291C143.499 15.5291 143.443 15.5122 143.42 15.4897C143.392 15.4672 143.37 15.4391 143.353 15.4053C143.336 15.3716 143.319 15.3378 143.313 15.2984C143.308 15.2646 143.308 15.2309 143.313 15.2027L143.476 14.6288C143.527 14.4487 143.617 14.308 143.741 14.2236L145.429 13.0307Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <defs>
+        <clipPath id="clip0_1278_188">
+          <rect
+            width="16.6679"
+            height="16.6679"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+            transform="matrix(0.866025 -0.5 0 1 73.7476 34.887)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx b/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
new file mode 100644
index 0000000..c8d6dba
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import {
+  ArchivedCycleVerticalStackIllustration,
+  ArchivedModuleVerticalStackIllustration,
+  ArchivedWorkItemVerticalStackIllustration,
+  ChangelogVerticalStackIllustration,
+  CustomerVerticalStackIllustration,
+  CycleVerticalStackIllustration,
+  DashboardVerticalStackIllustration,
+  DraftVerticalStackIllustration,
+  EpicVerticalStackIllustration,
+  Error404VerticalStackIllustration,
+  InitiativeVerticalStackIllustration,
+  InvalidLinkVerticalStackIllustration,
+  ModuleVerticalStackIllustration,
+  NoAccessVerticalStackIllustration,
+  PageVerticalStackIllustration,
+  ProjectVerticalStackIllustration,
+  ServerErrorVerticalStackIllustration,
+  TeamspaceVerticalStackIllustration,
+  ViewVerticalStackIllustration,
+  WorkItemVerticalStackIllustration,
+} from ".";
+
+export const VerticalStackAssetsMap = [
+  {
+    asset: <ArchivedCycleVerticalStackIllustration />,
+    title: "ArchivedCycleVerticalStackIllustration",
+  },
+  {
+    asset: <ArchivedModuleVerticalStackIllustration />,
+    title: "ArchivedModuleVerticalStackIllustration",
+  },
+  {
+    asset: <ArchivedWorkItemVerticalStackIllustration />,
+    title: "ArchivedWorkItemVerticalStackIllustration",
+  },
+  {
+    asset: <ChangelogVerticalStackIllustration />,
+    title: "ChangelogVerticalStackIllustration",
+  },
+  {
+    asset: <CustomerVerticalStackIllustration />,
+    title: "CustomerVerticalStackIllustration",
+  },
+  {
+    asset: <CycleVerticalStackIllustration />,
+    title: "CycleVerticalStackIllustration",
+  },
+  {
+    asset: <DashboardVerticalStackIllustration />,
+    title: "DashboardVerticalStackIllustration",
+  },
+  {
+    asset: <DraftVerticalStackIllustration />,
+    title: "DraftVerticalStackIllustration",
+  },
+  {
+    asset: <EpicVerticalStackIllustration />,
+    title: "EpicVerticalStackIllustration",
+  },
+  {
+    asset: <Error404VerticalStackIllustration />,
+    title: "Error404VerticalStackIllustration",
+  },
+  {
+    asset: <InitiativeVerticalStackIllustration />,
+    title: "InitiativeVerticalStackIllustration",
+  },
+  {
+    asset: <InvalidLinkVerticalStackIllustration />,
+    title: "InvalidLinkVerticalStackIllustration",
+  },
+  {
+    asset: <ModuleVerticalStackIllustration />,
+    title: "ModuleVerticalStackIllustration",
+  },
+  {
+    asset: <NoAccessVerticalStackIllustration />,
+    title: "NoAccessVerticalStackIllustration",
+  },
+  {
+    asset: <PageVerticalStackIllustration />,
+    title: "PageVerticalStackIllustration",
+  },
+  {
+    asset: <ProjectVerticalStackIllustration />,
+    title: "ProjectVerticalStackIllustration",
+  },
+  {
+    asset: <ServerErrorVerticalStackIllustration />,
+    title: "ServerErrorVerticalStackIllustration",
+  },
+  {
+    asset: <TeamspaceVerticalStackIllustration />,
+    title: "TeamspaceVerticalStackIllustration",
+  },
+  {
+    asset: <ViewVerticalStackIllustration />,
+    title: "ViewVerticalStackIllustration",
+  },
+  {
+    asset: <WorkItemVerticalStackIllustration />,
+    title: "WorkItemVerticalStackIllustration",
+  },
+];
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx b/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx
new file mode 100644
index 0000000..0495d97
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx
@@ -0,0 +1,382 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function CustomerVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="171"
+      viewBox="0 0 162 171"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M15.6846 137.248C15.6846 139.175 17.1271 141.096 20.0069 142.569L57.0876 161.464C62.8523 164.4 72.1951 164.4 77.9598 161.464L155.878 121.763C158.758 120.295 160.2 118.374 160.2 116.447V122.599C160.2 124.526 158.758 126.448 155.878 127.916L77.9598 167.616C72.1951 170.552 62.8523 170.552 57.0876 167.616L20.0069 148.722C17.122 147.254 15.6846 145.327 15.6846 143.4V137.248Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.6846 137.248C15.6846 135.321 17.1271 133.4 20.0069 131.932L97.9248 92.2312C103.69 89.2953 113.032 89.2953 118.797 92.2312L155.878 111.126C158.763 112.594 160.2 114.52 160.2 116.447C160.2 118.374 158.758 120.295 155.878 121.763L77.9598 161.464C72.1951 164.4 62.8523 164.4 57.0876 161.464L20.0069 142.569C17.122 141.101 15.6846 139.175 15.6846 137.248Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M15.6846 117.814C15.6846 119.741 17.1271 121.663 20.0069 123.136L57.0876 142.03C62.8523 144.966 72.1951 144.966 77.9598 142.03L155.878 102.33C158.758 100.862 160.2 98.9403 160.2 97.0137V103.166C160.2 105.092 158.758 107.014 155.878 108.482L77.9598 148.182C72.1951 151.118 62.8523 151.118 57.0876 148.182L20.0069 129.288C17.122 127.82 15.6846 125.893 15.6846 123.967V117.814Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M15.6846 117.814C15.6846 115.888 17.1271 113.966 20.0069 112.498L97.9248 72.7976C103.69 69.8617 113.032 69.8617 118.797 72.7976L155.878 91.6921C158.763 93.16 160.2 95.0868 160.2 97.0135C160.2 98.9401 158.758 100.862 155.878 102.33L77.9598 142.03C72.1951 144.966 62.8523 144.966 57.0876 142.03L20.0069 123.136C17.122 121.668 15.6846 119.741 15.6846 117.814Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M15.6846 98.379C15.6846 100.306 17.1271 102.227 20.0069 103.7L57.0876 122.595C62.8523 125.531 72.1951 125.531 77.9598 122.595L155.878 82.8943C158.758 81.4263 160.2 79.5048 160.2 77.5781V83.7302C160.2 85.6569 158.758 87.5784 155.878 89.0464L77.9598 128.747C72.1951 131.683 62.8523 131.683 57.0876 128.747L20.0069 109.852C17.122 108.384 15.6846 106.458 15.6846 104.531V98.379Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.6846 98.3788C15.6846 96.4522 17.1271 94.5306 20.0069 93.0627L97.9248 53.3621C103.69 50.4262 113.032 50.4262 118.797 53.3621L155.878 72.2567C158.763 73.7246 160.2 75.6513 160.2 77.5779C160.2 79.5046 158.758 81.4261 155.878 82.8941L77.9598 122.595C72.1951 125.531 62.8523 125.531 57.0876 122.595L20.0069 103.7C17.122 102.232 15.6846 100.306 15.6846 98.3788Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M63.3877 98.7299C63.1583 98.7299 62.9391 98.684 62.7353 98.6025C62.6996 98.5923 62.6588 98.5821 62.6231 98.5617L58.0817 96.2477C57.4497 95.9266 57.0827 95.213 57.0827 94.2905C57.0827 92.7461 58.0868 91.0233 59.3662 90.3709L61.094 89.4891V37.1734L60.0848 36.6586C59.4528 36.3375 59.0909 35.624 59.0909 34.6963C59.0909 33.1519 60.095 31.4342 61.3744 30.7817L93.46 14.4357C93.8015 14.2624 94.1379 14.1758 94.4692 14.1758C94.7343 14.1758 94.9891 14.2369 95.2134 14.349L99.7548 16.6631V16.6733C100.382 16.9944 100.749 17.708 100.749 18.6204C100.749 20.0526 99.8873 21.6326 98.7405 22.3768V26.3831L109.505 20.8987C109.847 20.7254 110.183 20.6387 110.509 20.6387C110.775 20.6387 111.029 20.7 111.254 20.8121L115.795 23.126V23.1362C116.422 23.4573 116.789 24.1761 116.789 25.0884C116.789 26.5156 115.928 28.0957 114.786 28.8399V64.4934L117.798 66.0276V66.0378C118.42 66.3589 118.792 67.0775 118.792 67.9899C118.792 69.5343 117.788 71.252 116.509 71.9044L64.3714 98.47C64.035 98.6382 63.7037 98.7248 63.3826 98.7248L63.3877 98.7299ZM79.4178 76.1706C79.0304 76.3694 78.694 76.9606 78.694 77.4448V80.5234L81.1507 79.2696V75.2837L79.4178 76.1655V76.1706Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M94.4692 14.6866C94.6578 14.6866 94.8311 14.7274 94.984 14.8038L99.5255 17.1179C99.4949 17.1026 99.4592 17.0975 99.4286 17.0822C99.923 17.2759 100.244 17.8162 100.244 18.6215C100.244 19.9722 99.3471 21.5217 98.2359 22.0875V27.215L109.74 21.3534C110.015 21.2158 110.275 21.1496 110.51 21.1496C110.698 21.1496 110.871 21.1903 111.024 21.2668L115.566 23.5809C115.535 23.5656 115.499 23.5604 115.469 23.5451C115.958 23.7388 116.284 24.2842 116.284 25.0845C116.284 26.4301 115.387 27.9796 114.281 28.5453V64.8054L117.574 66.4823C117.543 66.467 117.508 66.4619 117.477 66.4466C117.966 66.6403 118.288 67.1857 118.288 67.9859C118.288 69.3315 117.39 70.881 116.284 71.4468L64.1472 98.0124C63.877 98.15 63.6222 98.2163 63.3877 98.2163C63.1736 98.2163 62.9748 98.1602 62.8015 98.0582C62.8219 98.0684 62.8372 98.0888 62.8576 98.099L58.3162 95.785C57.8778 95.5607 57.5975 95.0306 57.5975 94.2814C57.5975 92.9307 58.4997 91.3812 59.6057 90.8154L61.6089 89.796V36.8586L60.3193 36.201C59.881 35.9768 59.6006 35.4467 59.6006 34.6924C59.6006 33.3467 60.4977 31.7972 61.6038 31.2315L93.6894 14.8853C93.9646 14.7426 94.2246 14.6764 94.4641 14.6764M98.8934 17.0108C98.924 17.0108 98.9495 17.0056 98.975 17.0056C98.9495 17.0056 98.9189 17.0057 98.8934 17.0108ZM99.2094 17.021C99.24 17.021 99.2757 17.0312 99.3063 17.0414C99.2757 17.0312 99.2451 17.0261 99.2094 17.021C99.1789 17.021 99.1432 17.0108 99.1075 17.0108C99.1432 17.0108 99.1738 17.0159 99.2094 17.021ZM98.4296 17.1179C98.3634 17.1434 98.3022 17.1688 98.2359 17.2045C98.3022 17.1688 98.3685 17.1434 98.4296 17.1179ZM114.944 23.4738C114.893 23.4789 114.842 23.4892 114.786 23.4994C114.837 23.4892 114.893 23.4789 114.944 23.4738C114.969 23.4738 114.995 23.4738 115.02 23.4687C114.995 23.4687 114.969 23.4687 114.944 23.4738ZM115.26 23.4891C115.224 23.4891 115.194 23.4789 115.158 23.4789C115.194 23.4789 115.229 23.4841 115.26 23.4891ZM114.475 23.5809C114.536 23.5554 114.602 23.5349 114.664 23.5196C114.602 23.5349 114.541 23.5554 114.475 23.5809ZM89.6424 34.5292C89.6679 34.5496 89.6984 34.5699 89.7239 34.5954C89.6984 34.5699 89.673 34.5496 89.6424 34.5292C89.6169 34.5088 89.5863 34.4884 89.5557 34.4731C89.5863 34.4884 89.6118 34.5088 89.6424 34.5292ZM89.9584 34.886C89.9176 34.8197 89.8768 34.7535 89.831 34.6975C89.8768 34.7535 89.9227 34.8197 89.9584 34.886ZM90.0807 35.1408C90.096 35.1918 90.1113 35.2428 90.1266 35.2938C90.1113 35.2428 90.096 35.1867 90.0807 35.1408C90.0654 35.1001 90.0552 35.0593 90.0348 35.0236C90.0501 35.0593 90.0654 35.1001 90.0807 35.1408ZM90.2183 35.9309C90.2183 35.7525 90.1979 35.5894 90.1725 35.4365C90.203 35.5894 90.2183 35.7525 90.2183 35.9309ZM79.6115 39.6364C79.6369 39.6568 79.6624 39.6771 79.693 39.7026C79.6675 39.6771 79.642 39.6568 79.6115 39.6364C79.586 39.616 79.5554 39.5956 79.5299 39.5803C79.5605 39.5956 79.586 39.616 79.6115 39.6364ZM79.8714 39.8964C79.8918 39.927 79.9122 39.9575 79.9326 39.9932C79.9122 39.9626 79.8918 39.927 79.8714 39.8964ZM85.0653 40.5539C85.0653 40.5539 85.1111 40.5691 85.1366 40.5793C85.1111 40.5742 85.0856 40.5641 85.0653 40.5539ZM80.1925 41.0381C80.1925 40.8597 80.1721 40.6966 80.1467 40.5437C80.1772 40.6966 80.1925 40.8597 80.1925 41.0381ZM85.8247 40.5641C85.8247 40.5641 85.7839 40.5743 85.7635 40.5743C85.7432 40.5743 85.7228 40.5793 85.7024 40.5844C85.7228 40.5844 85.7432 40.5794 85.7635 40.5743C85.7839 40.5692 85.8043 40.5692 85.8247 40.5641ZM85.3354 40.6099C85.3762 40.6099 85.4119 40.6201 85.4526 40.6201H85.4628C85.4628 40.6201 85.4577 40.6201 85.4526 40.6201C85.4119 40.6201 85.3711 40.615 85.3303 40.6099C85.3303 40.6099 85.3303 40.6099 85.3252 40.6099C85.3252 40.6099 85.3252 40.6099 85.3303 40.6099M105.693 40.9667C105.693 40.9667 105.703 40.9769 105.708 40.9769C105.703 40.9769 105.698 40.9667 105.693 40.9667ZM105.932 41.1961C105.932 41.1961 105.937 41.2063 105.943 41.2063C105.943 41.2063 105.937 41.1961 105.932 41.1961C105.932 41.1961 105.927 41.191 105.922 41.1859C105.922 41.1859 105.927 41.191 105.932 41.1961ZM106.259 42.1084C106.233 41.8434 106.167 41.6192 106.075 41.4255C106.182 41.6599 106.238 41.9147 106.259 42.1084ZM106.279 42.3583C106.279 42.3939 106.279 42.4194 106.279 42.4194C106.279 43.5968 105.596 44.9271 104.673 45.6254C105.591 44.9322 106.279 43.5968 106.279 42.4194V42.3939C106.279 42.3939 106.279 42.3734 106.279 42.3632M89.7188 44.3512C89.6679 44.3053 89.6118 44.2645 89.5557 44.2288C89.6169 44.2645 89.6679 44.3053 89.7188 44.3512ZM89.9125 44.5754C89.9278 44.6009 89.9431 44.6213 89.9533 44.6468C89.938 44.6213 89.9227 44.6009 89.9125 44.5754C89.887 44.5346 89.8565 44.4938 89.8259 44.4582C89.8565 44.4938 89.8819 44.5346 89.9125 44.5754ZM90.1266 45.0545C90.1011 44.9627 90.0756 44.8659 90.0348 44.7843C90.0705 44.8659 90.1011 44.9576 90.1266 45.0545ZM90.2183 45.6916C90.2183 45.5132 90.1979 45.3501 90.1725 45.1972C90.203 45.3501 90.2183 45.5132 90.2183 45.6916ZM75.7989 45.6763C75.7989 45.6763 75.7581 45.6865 75.7377 45.6865C75.7174 45.6865 75.697 45.6916 75.6766 45.6967C75.697 45.6967 75.7174 45.6916 75.7377 45.6865C75.7581 45.6865 75.7785 45.6814 75.7989 45.6763ZM75.3708 45.7222C75.3708 45.7222 75.4115 45.7222 75.4268 45.7222C75.4268 45.7222 75.4319 45.7222 75.437 45.7222C75.437 45.7222 75.4319 45.7222 75.4268 45.7222C75.4064 45.7222 75.3861 45.7222 75.3708 45.7222C75.3504 45.7222 75.3249 45.7222 75.3045 45.7171C75.3249 45.7171 75.3504 45.7171 75.3708 45.7222ZM103.124 46.0281C103.124 46.0281 103.175 46.0434 103.2 46.0485C103.175 46.0434 103.149 46.0332 103.124 46.0281C103.098 46.0179 103.068 46.0077 103.042 45.9975C103.068 46.0077 103.093 46.0179 103.124 46.0281ZM103.771 46.0536C103.771 46.0536 103.741 46.0535 103.725 46.0586C103.741 46.0586 103.756 46.0587 103.771 46.0536C103.807 46.0536 103.838 46.0434 103.873 46.0332C103.838 46.0434 103.802 46.0485 103.771 46.0536ZM103.435 46.0841C103.435 46.0841 103.481 46.0841 103.506 46.0841C103.511 46.0841 103.522 46.0841 103.527 46.0841C103.522 46.0841 103.516 46.0841 103.506 46.0841C103.481 46.0841 103.46 46.0841 103.435 46.0841C103.404 46.0841 103.379 46.079 103.348 46.0739C103.379 46.0739 103.404 46.079 103.435 46.0841ZM79.693 49.4635C79.6421 49.4176 79.586 49.3717 79.5248 49.336C79.586 49.3717 79.637 49.4125 79.693 49.4635ZM79.8612 49.6469C79.8867 49.6826 79.9071 49.7233 79.9326 49.759C79.9071 49.7182 79.8867 49.6826 79.8612 49.6469ZM80.0753 50.07C80.0855 50.1006 80.0957 50.1311 80.1008 50.1668C80.0906 50.1362 80.0855 50.1057 80.0753 50.07ZM85.0653 50.3146C85.0653 50.3146 85.1162 50.3299 85.1417 50.3401C85.1162 50.335 85.0907 50.3248 85.0653 50.3146ZM80.1925 50.8039C80.1925 50.6255 80.1721 50.4624 80.1467 50.3095C80.1772 50.4624 80.1925 50.6255 80.1925 50.8039ZM85.6973 50.3452C85.7381 50.335 85.7788 50.335 85.8247 50.3248C85.7788 50.335 85.7381 50.3401 85.6973 50.3452ZM85.3864 50.3707C85.3864 50.3707 85.4322 50.3707 85.4577 50.3707C85.4577 50.3707 85.4628 50.3707 85.4679 50.3707C85.4679 50.3707 85.4628 50.3707 85.4577 50.3707C85.4322 50.3707 85.4119 50.3707 85.3864 50.3707C85.366 50.3707 85.3507 50.3707 85.3303 50.3656C85.3507 50.3656 85.366 50.3656 85.3864 50.3707ZM105.739 50.7733C105.739 50.7733 105.774 50.8039 105.79 50.8192C105.774 50.8039 105.754 50.7886 105.739 50.7733C105.698 50.7427 105.657 50.7122 105.616 50.6867C105.662 50.7122 105.703 50.7427 105.739 50.7733ZM105.983 51.0384C105.983 51.0384 106.014 51.0894 106.029 51.1149C106.014 51.0894 105.999 51.0638 105.983 51.0384C105.958 50.9925 105.927 50.9517 105.892 50.916C105.922 50.9517 105.953 50.9976 105.983 51.0384ZM106.177 51.4614C106.187 51.492 106.192 51.5226 106.203 51.5481C106.197 51.5175 106.187 51.4869 106.177 51.4614ZM106.279 52.1598C106.279 53.5054 105.397 55.0395 104.291 55.6206C104.286 55.6206 104.276 55.6257 104.271 55.6308H104.261C104.261 55.6308 104.281 55.6257 104.291 55.6206C105.392 55.0446 106.279 53.5105 106.279 52.17V52.1445C106.279 51.9661 106.259 51.803 106.233 51.6501C106.264 51.8081 106.279 51.9763 106.279 52.1598ZM89.7188 54.117C89.6679 54.0711 89.6118 54.0252 89.5557 53.9946C89.6169 54.0303 89.6679 54.0711 89.7188 54.117ZM89.9584 54.4075C89.9176 54.3413 89.8768 54.2749 89.831 54.2189C89.8768 54.2749 89.9227 54.3413 89.9584 54.4075ZM90.1266 54.8153C90.1011 54.7185 90.0756 54.6267 90.0348 54.5452C90.0705 54.6267 90.1011 54.7236 90.1266 54.8153ZM90.2183 55.4524C90.2183 55.274 90.1979 55.111 90.1725 54.958C90.203 55.111 90.2183 55.274 90.2183 55.4524ZM75.0497 55.4269C75.0497 55.4269 75.0904 55.4422 75.1108 55.4473C75.0904 55.4422 75.07 55.4371 75.0497 55.4269C75.0293 55.4218 75.0089 55.4116 74.9885 55.4014C75.0089 55.4116 75.0293 55.4167 75.0497 55.4269ZM75.7989 55.432C75.7989 55.432 75.7581 55.4422 75.7428 55.4422C75.7174 55.4422 75.697 55.4473 75.6715 55.4524C75.697 55.4524 75.7174 55.4473 75.7428 55.4422C75.7632 55.4422 75.7785 55.4371 75.7989 55.432ZM75.3555 55.4831C75.3555 55.4831 75.4014 55.4831 75.4268 55.4831C75.4014 55.4831 75.381 55.4831 75.3555 55.4831C75.3351 55.4831 75.3198 55.483 75.2994 55.478C75.3198 55.478 75.3351 55.478 75.3555 55.4831ZM104.266 55.641C104.266 55.641 104.22 55.6563 104.199 55.6665C104.22 55.6563 104.24 55.6512 104.261 55.641H104.266ZM103.2 55.8092C103.144 55.7939 103.093 55.7786 103.047 55.7582C103.098 55.7786 103.149 55.799 103.2 55.8092ZM103.44 55.8449C103.44 55.8449 103.481 55.8449 103.506 55.8449C103.506 55.8449 103.522 55.8449 103.527 55.8449C103.522 55.8449 103.511 55.8449 103.506 55.8449C103.486 55.8449 103.46 55.8449 103.44 55.8449C103.409 55.8449 103.384 55.8398 103.353 55.8347C103.384 55.8347 103.409 55.8398 103.44 55.8449ZM79.6115 59.1529C79.642 59.1733 79.6675 59.1987 79.693 59.2191C79.6675 59.1936 79.6369 59.1733 79.6115 59.1529C79.586 59.1325 79.5605 59.1171 79.5299 59.0967C79.5554 59.112 79.586 59.1325 79.6115 59.1529ZM79.9326 59.5147C79.8918 59.4485 79.8561 59.3873 79.8051 59.3312C79.851 59.3873 79.8918 59.4485 79.9326 59.5147ZM85.0653 60.0753C85.0653 60.0753 85.1162 60.0907 85.1417 60.1008C85.1162 60.0957 85.0907 60.0855 85.0653 60.0753C85.05 60.0702 85.0347 60.0652 85.0194 60.055C85.0347 60.0602 85.05 60.0651 85.0653 60.0753ZM80.1925 60.5545C80.1925 60.3762 80.1721 60.2131 80.1467 60.0653C80.1772 60.2182 80.1925 60.3812 80.1925 60.5545ZM85.8247 60.0855C85.7839 60.0957 85.7432 60.1008 85.7024 60.1059C85.7432 60.0958 85.7839 60.0957 85.8247 60.0855ZM85.3966 60.1366C85.3966 60.1366 85.4373 60.1366 85.4577 60.1366C85.4577 60.1366 85.4628 60.1366 85.4679 60.1366C85.4679 60.1366 85.4628 60.1366 85.4577 60.1366C85.4373 60.1366 85.417 60.1366 85.3966 60.1366C85.3762 60.1366 85.3507 60.1366 85.3303 60.1315C85.3507 60.1315 85.3762 60.1315 85.3966 60.1366ZM105.749 60.5392C105.749 60.5392 105.779 60.5648 105.79 60.575C105.774 60.5597 105.759 60.5494 105.749 60.5392C105.708 60.5036 105.662 60.473 105.616 60.4424C105.662 60.4679 105.708 60.5036 105.749 60.5392ZM106.029 60.8756C105.988 60.8042 105.943 60.7329 105.892 60.6769C105.943 60.738 105.983 60.8042 106.029 60.8756ZM106.203 61.314C106.177 61.2019 106.141 61.0948 106.101 61.003C106.141 61.0999 106.177 61.207 106.203 61.314ZM106.279 61.9256C106.279 63.2865 105.382 64.836 104.261 65.4069C104.23 65.4222 104.205 65.4272 104.179 65.4425C104.205 65.4323 104.23 65.4273 104.255 65.412L104.276 65.4018C105.387 64.836 106.284 63.2865 106.284 61.9409V61.9154C106.284 61.737 106.264 61.5688 106.233 61.4159C106.264 61.5739 106.284 61.7421 106.284 61.9256M75.7989 65.1927C75.7989 65.1927 75.7632 65.2029 75.7428 65.2029C75.7174 65.2029 75.697 65.2081 75.6715 65.2132C75.697 65.2132 75.7174 65.208 75.7428 65.2029C75.7632 65.2029 75.7785 65.1978 75.7989 65.1927ZM75.3555 65.2438C75.3555 65.2438 75.4014 65.2438 75.4268 65.2438C75.4268 65.2438 75.4319 65.2438 75.437 65.2438C75.437 65.2438 75.4319 65.2438 75.4268 65.2438C75.4014 65.2438 75.381 65.2438 75.3555 65.2438C75.3351 65.2438 75.3198 65.2438 75.2994 65.2387C75.3198 65.2387 75.3351 65.2387 75.3555 65.2438ZM103.119 65.5496C103.119 65.5496 103.17 65.5648 103.195 65.575C103.17 65.5699 103.144 65.5598 103.119 65.5496C103.093 65.5394 103.073 65.5292 103.047 65.5241C103.073 65.5343 103.093 65.5445 103.119 65.5496ZM103.797 65.5699C103.766 65.5699 103.736 65.5801 103.705 65.5852C103.736 65.5852 103.766 65.575 103.797 65.5699C103.822 65.5699 103.853 65.5597 103.883 65.5546C103.853 65.5648 103.827 65.5699 103.797 65.5699ZM103.45 65.6056C103.45 65.6056 103.486 65.6056 103.506 65.6056C103.506 65.6056 103.522 65.6056 103.527 65.6056C103.522 65.6056 103.511 65.6056 103.506 65.6056C103.486 65.6056 103.471 65.6056 103.45 65.6056C103.42 65.6056 103.384 65.6005 103.353 65.5954C103.384 65.5954 103.42 65.6005 103.45 65.6056ZM116.809 66.4008C116.809 66.4008 116.799 66.4008 116.794 66.4008C116.799 66.4008 116.804 66.4008 116.809 66.4008C116.881 66.3855 116.957 66.3753 117.023 66.3753C116.952 66.3753 116.881 66.3906 116.809 66.4008ZM117.258 66.3906C117.289 66.3906 117.324 66.4008 117.355 66.411C117.324 66.4008 117.294 66.3957 117.258 66.3906C117.222 66.3855 117.192 66.3804 117.161 66.3804C117.192 66.3804 117.227 66.3855 117.258 66.3906ZM116.478 66.4874C116.539 66.4619 116.606 66.4416 116.667 66.4263C116.606 66.4416 116.544 66.4619 116.478 66.4874ZM85.9572 72.6904C85.9572 72.6904 85.9063 72.6497 85.8757 72.6293C85.9063 72.6446 85.9317 72.6649 85.9572 72.6904ZM86.0439 72.7874C86.0439 72.7874 86.0643 72.8179 86.0745 72.8332C86.0643 72.8179 86.0541 72.8027 86.0439 72.7874C86.0337 72.7721 86.0235 72.7567 86.0133 72.7465C86.0235 72.7618 86.0337 72.7721 86.0439 72.7874ZM86.1611 73.0371C86.1509 72.9912 86.1356 72.9454 86.1152 72.9046C86.1356 72.9454 86.1458 72.9912 86.1611 73.0371ZM78.1843 81.3553L81.6605 79.5816V74.449L79.1833 75.713C78.6278 75.9934 78.1792 76.7681 78.1792 77.4409V81.3503M62.2256 97.2224C62.2154 97.1816 62.195 97.1408 62.1899 97.0949C62.2001 97.1408 62.2154 97.1816 62.2256 97.2224ZM62.3836 97.6199C62.3836 97.6199 62.3938 97.6353 62.3989 97.6455C62.3938 97.6353 62.3887 97.6301 62.3836 97.6199C62.3632 97.5843 62.3377 97.5537 62.3224 97.5129C62.3428 97.5537 62.3632 97.5843 62.3836 97.6199ZM62.6384 97.9359C62.6028 97.9053 62.562 97.8697 62.5314 97.834C62.5671 97.8748 62.6028 97.9053 62.6384 97.9359ZM94.4692 13.6672C94.0615 13.6672 93.6435 13.7742 93.2307 13.9832L61.145 30.3293C59.7077 31.0633 58.5863 32.9798 58.5863 34.6975C58.5863 35.8188 59.0501 36.7006 59.8606 37.1134L60.5895 37.4855V89.1742L59.1419 89.9132C57.7045 90.6472 56.5781 92.5688 56.5781 94.2865C56.5781 95.4078 57.042 96.2845 57.8524 96.6974L62.3938 99.0114C62.455 99.042 62.5161 99.0674 62.5773 99.0827C62.8321 99.1847 63.1074 99.2357 63.3877 99.2357C63.7904 99.2357 64.2032 99.1287 64.611 98.9248L116.748 72.3592C118.186 71.6252 119.307 69.7087 119.307 67.991C119.307 66.8748 118.833 65.993 118.028 65.5852V65.575L115.296 64.1836V29.1061C116.453 28.2192 117.299 26.5779 117.299 25.0896C117.299 23.9733 116.825 23.0915 116.019 22.6838V22.6736L111.483 20.3595C111.182 20.2066 110.851 20.1302 110.504 20.1302C110.097 20.1302 109.684 20.2372 109.271 20.4461L99.2502 25.5533V22.643C100.428 21.7561 101.258 20.1353 101.258 18.6164C101.258 17.5766 100.846 16.7407 100.142 16.3023C100.096 16.2666 100.04 16.231 99.9893 16.2055L95.4478 13.8914C95.1471 13.7385 94.8209 13.6621 94.4692 13.6621V13.6672ZM79.2037 79.6938V77.446C79.2037 77.13 79.4535 76.7223 79.6471 76.6254L80.6411 76.1208V78.9649L79.2037 79.6988V79.6938Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M117.574 66.4863C117.227 66.3079 116.779 66.3231 116.284 66.5729L114.281 67.5923L109.74 65.2783L111.743 64.2589C112.232 64.0092 112.681 63.9938 113.033 64.1722L117.574 66.4863Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.961 65.4927C103.313 65.6711 103.766 65.6558 104.266 65.406C105.387 64.8352 106.284 63.2857 106.284 61.9248C106.284 61.1602 106.009 60.6301 105.571 60.4059L101.029 58.0918C101.467 58.3161 101.743 58.8461 101.743 59.6107C101.743 60.9716 100.846 62.5211 99.7243 63.092C99.2248 63.3468 98.7711 63.3621 98.4194 63.1786L102.961 65.4927Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.966 55.727C103.318 55.9054 103.766 55.89 104.266 55.6352C105.387 55.0643 106.284 53.5149 106.284 52.154C106.284 51.3946 106.009 50.8645 105.571 50.6402L101.029 48.3262C101.467 48.5504 101.743 49.0805 101.743 49.84C101.743 50.5994 100.846 52.7503 99.7243 53.3211C99.2299 53.576 98.7763 53.5914 98.4246 53.413L102.966 55.727Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M106.279 42.4205C106.279 43.7661 105.382 45.3157 104.266 45.8865C103.766 46.1414 103.313 46.1515 102.961 45.9731L98.4194 43.6591C98.7711 43.8375 99.2248 43.8273 99.7243 43.5725C100.841 43.0016 101.738 41.4521 101.738 40.1065C101.738 40.1065 101.462 38.7965 101.024 38.5723L105.565 40.8863C106.294 41.2023 106.279 42.4205 106.279 42.4205Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M78.1843 85.9839L86.207 81.8961L81.6656 79.582L73.6429 83.6698L78.1843 85.9839Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M86.207 81.8957V73.3582C86.207 72.981 86.0694 72.7211 85.8502 72.609L81.3088 70.2949C81.5279 70.4071 81.6656 70.6721 81.6656 71.0442V79.5816L86.207 81.8957Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M115.571 23.5801C115.224 23.4017 114.776 23.4169 114.281 23.6667L98.236 31.8423L93.6945 29.5282L109.74 21.3526C110.229 21.1029 110.678 21.0876 111.029 21.266L115.571 23.5801Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M84.9175 60.0244C85.2641 60.2028 85.7126 60.1876 86.207 59.9378L88.2102 58.9184C89.3213 58.3526 90.2184 56.8031 90.2184 55.4524C90.2184 54.7032 89.938 54.1731 89.4997 53.9488L84.9583 51.6348C85.3966 51.859 85.6769 52.3891 85.6769 53.1384C85.6769 54.4891 84.7799 56.0386 83.6687 56.6043L81.6656 57.6237C81.1763 57.8735 80.7277 57.8887 80.376 57.7104L84.9175 60.0244Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M84.9175 50.2627C85.2641 50.4411 85.7177 50.4258 86.207 50.1761L88.2102 49.1567C89.3213 48.5909 90.2184 47.0414 90.2184 45.6958C90.2184 44.9465 89.938 44.4114 89.4997 44.1871L84.9583 41.873C85.3966 42.0973 85.6769 42.6274 85.6769 43.3817C85.6769 44.7273 84.7799 46.2769 83.6687 46.8426L81.6656 47.862C81.1763 48.1118 80.7277 48.1272 80.376 47.9488L84.9175 50.2627Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M66.1503 38.4332V92.1149L61.6089 89.8008V36.1191L66.1503 38.4332Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M66.1503 92.1148L64.1472 93.1342C63.0411 93.7 62.139 95.2495 62.139 96.6002C62.139 97.3495 62.4193 97.8796 62.8576 98.1038L58.3162 95.7898C57.8779 95.5655 57.5975 95.0354 57.5975 94.2862C57.5975 92.9355 58.4997 91.3859 59.6057 90.8202L61.6089 89.8008L66.1503 92.1148Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M74.8917 65.1311C75.2383 65.3095 75.6868 65.2941 76.1812 65.0443L78.1894 64.02C79.2955 63.4542 80.1925 61.9047 80.1925 60.554C80.1925 59.8047 79.9173 59.2747 79.479 59.0504L74.9375 56.7363C75.3759 56.9606 75.6511 57.4907 75.6511 58.2399C75.6511 58.9892 74.754 61.1401 73.648 61.7059L71.6398 62.7304C71.1505 62.9802 70.7019 62.9954 70.3502 62.817L74.8917 65.1311Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M84.9175 40.5029C85.2641 40.6813 85.7126 40.6661 86.207 40.4163L88.2102 39.3969C89.3213 38.8312 90.2184 37.2816 90.2184 35.9309C90.2184 35.1817 89.938 34.6516 89.4997 34.4273L84.9583 32.1133C85.3966 32.3375 85.6769 32.8676 85.6769 33.6169C85.6769 34.9676 84.7799 36.5171 83.6687 37.0829L81.6656 38.1023C81.1763 38.352 80.7277 38.3673 80.376 38.1889L84.9175 40.5029Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M74.8917 55.3713C75.2383 55.5497 75.6919 55.5345 76.1812 55.2847L78.1894 54.2602C79.2955 53.6944 80.1925 52.1449 80.1925 50.7993C80.1925 49.4537 79.9122 49.5149 79.4739 49.2906L74.9324 46.9766C75.3708 47.2008 75.6511 47.7309 75.6511 48.4853C75.6511 49.8309 74.754 51.3804 73.648 51.9461L71.6398 52.9706C71.1505 53.2204 70.7019 53.2358 70.3502 53.0574L74.8917 55.3713Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M74.8917 45.6096C75.2383 45.788 75.6868 45.7727 76.1812 45.523L78.1894 44.4985C79.2955 43.9327 80.1925 42.3832 80.1925 41.0325C80.1925 40.2832 79.9173 39.7532 79.479 39.5289L74.9375 37.2148C75.3759 37.4391 75.6511 37.9692 75.6511 38.7184C75.6511 40.0691 74.754 41.6187 73.648 42.1844L71.6398 43.2089C71.1505 43.4587 70.7019 43.4739 70.3502 43.2955L74.8917 45.6096Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M99.5255 17.1172C99.1789 16.9388 98.7252 16.954 98.2359 17.2038L66.1503 33.5499C65.0442 34.1157 64.1472 35.6651 64.1472 37.0107C64.1472 38.3563 64.4275 38.2952 64.8658 38.5195L60.3244 36.2054C59.8861 35.9812 59.6057 35.4511 59.6057 34.6967C59.6057 33.3511 60.5028 31.8016 61.6089 31.2359L93.6945 14.8897C94.1838 14.64 94.6374 14.6247 94.984 14.8031L99.5255 17.1172Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M104.256 60.4989L104.276 60.4887C105.387 59.923 106.284 60.5601 106.284 61.9108V61.9363C106.284 63.2819 105.387 64.8314 104.276 65.3972L104.256 65.4074C103.144 65.9732 102.247 65.336 102.247 63.9904V63.9649C102.247 62.6142 103.144 61.0647 104.256 60.4989ZM102.247 54.2296V54.2042C102.247 52.8586 103.144 51.3091 104.256 50.7433L104.276 50.7331C105.387 50.1673 106.284 50.8045 106.284 52.1501V52.1755C106.284 53.5211 105.387 55.0706 104.276 55.6364L104.256 55.6466C103.144 56.2123 102.247 55.5752 102.247 54.2296ZM106.279 42.4148C106.279 43.7604 105.382 45.3099 104.271 45.8757L104.25 45.8859C103.139 46.4516 102.242 45.8145 102.242 44.4689V44.4434C102.242 43.0927 103.139 41.5431 104.25 40.9774L104.271 40.9672C105.382 40.4014 106.279 41.0386 106.279 42.3893V42.4148ZM76.1812 40.6461L78.1894 39.6216C79.2955 39.0559 80.1926 39.693 80.1926 41.0386C80.1926 42.3842 79.2955 43.9388 78.1894 44.5046L76.1812 45.5291C75.0752 46.0949 74.1781 45.4577 74.1781 44.107C74.1781 42.7563 75.0752 41.2119 76.1812 40.6461ZM76.1812 50.4017L78.1894 49.3772C79.2955 48.8115 80.1926 49.4537 80.1926 50.7993C80.1926 52.1449 79.2955 53.6944 78.1894 54.2602L76.1812 55.2847C75.0752 55.8505 74.1781 55.2133 74.1781 53.8677C74.1781 52.5221 75.0752 50.9675 76.1812 50.4017ZM74.173 63.6235C74.173 62.2778 75.0701 60.7283 76.1761 60.1626L78.1843 59.1381C79.2904 58.5723 80.1875 59.2094 80.1875 60.555C80.1875 61.9007 79.2904 63.4553 78.1843 64.021L76.1761 65.0454C75.0701 65.6112 74.173 64.9742 74.173 63.6235ZM86.207 81.8961L78.1894 85.9839V77.4465C78.1894 76.7686 78.638 75.999 79.1936 75.7186L85.208 72.6553C85.7585 72.375 86.2121 72.691 86.2121 73.3638V81.9012L86.207 81.8961ZM88.2102 58.9189L86.207 59.9383C85.101 60.5041 84.2039 59.867 84.2039 58.5162C84.2039 57.1655 85.101 55.6211 86.207 55.0554L88.2102 54.036C89.3213 53.4702 90.2184 54.1073 90.2184 55.4529C90.2184 56.7985 89.3213 58.3532 88.2102 58.9189ZM88.2102 49.153L86.207 50.1724C85.101 50.7382 84.2039 50.101 84.2039 48.7554C84.2039 47.4098 85.101 45.8553 86.207 45.2895L88.2102 44.2701C89.3213 43.7044 90.2184 44.3414 90.2184 45.6921C90.2184 47.0428 89.3213 48.5872 88.2102 49.153ZM88.2102 39.3974L86.207 40.4168C85.101 40.9825 84.2039 40.3454 84.2039 38.9947C84.2039 37.644 85.101 36.0996 86.207 35.5338L88.2102 34.5144C89.3213 33.9486 90.2184 34.5858 90.2184 35.9314C90.2184 37.277 89.3213 38.8316 88.2102 39.3974ZM116.284 66.5695L114.281 67.5889V28.5458C115.387 27.9801 116.284 26.4306 116.284 25.085C116.284 23.7342 115.387 23.0971 114.281 23.6629L98.236 31.8385V22.0778C99.3471 21.512 100.244 19.9625 100.244 18.6118C100.244 17.2662 99.3471 16.629 98.236 17.1948L66.1503 33.5409C65.0443 34.1067 64.1472 35.6562 64.1472 37.0018C64.1472 38.3474 65.0443 38.9895 66.1503 38.4238V92.1054L64.1472 93.1248C63.0411 93.6906 62.139 95.2401 62.139 96.5908C62.139 97.9415 63.0411 98.5685 64.1472 98.0078L116.284 71.4422C117.39 70.8764 118.288 69.3269 118.288 67.9813C118.288 66.6357 117.39 65.9936 116.284 66.5593V66.5695Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M149.904 51.5675C151.306 50.8539 152.198 49.1668 152.198 46.7661C152.198 42.4693 149.333 37.5253 145.806 35.7312C144.246 34.936 142.819 34.885 141.708 35.4508L143.981 34.2938C145.092 33.728 146.52 33.779 148.079 34.5741C151.612 36.3734 154.471 41.3174 154.471 45.6091C154.471 48.0098 153.579 49.6968 152.177 50.4104L149.904 51.5675Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M149.904 51.5667C148.793 52.1324 147.366 52.0814 145.806 51.2863C142.274 49.4871 139.414 44.543 139.414 40.2514C139.414 37.8507 140.306 36.1636 141.708 35.45C142.819 34.8842 144.246 34.9352 145.806 35.7304C149.338 37.5296 152.198 42.4737 152.198 46.7653C152.198 49.166 151.306 50.8531 149.904 51.5667Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M145.409 45.6436C145.251 45.562 145.123 45.3429 145.123 45.1492V42.7179C145.123 42.5242 145.251 42.4375 145.409 42.514C145.567 42.5904 145.694 42.8147 145.694 43.0084V45.4396C145.694 45.6333 145.567 45.72 145.409 45.6436Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M148.411 43.3495L143.543 40.8672C143.344 40.7653 143.171 40.5104 143.125 40.2505C143.079 39.9905 143.176 39.7969 143.354 39.7816L145.602 39.5879C145.842 39.5675 146.117 39.7102 146.357 39.9752L148.599 42.4575C148.778 42.6563 148.875 42.9468 148.829 43.1609C148.783 43.3749 148.609 43.4565 148.411 43.3495ZM144.16 40.49L147.794 42.3403L146.102 40.4696C146.02 40.3779 145.928 40.332 145.852 40.3371L144.16 40.4849V40.49Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M146.55 46.2255C146.392 46.144 146.265 45.9248 146.265 45.7311V43.2998C146.265 43.1062 146.392 43.0196 146.55 43.096C146.708 43.1725 146.836 43.3967 146.836 43.5904V46.0217C146.836 46.2154 146.708 46.302 146.55 46.2255Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M147.692 46.8057C147.534 46.7242 147.407 46.5049 147.407 46.3112V43.88C147.407 43.6863 147.534 43.5996 147.692 43.6761C147.85 43.7525 147.977 43.9768 147.977 44.1705V46.6017C147.977 46.7954 147.85 46.8822 147.692 46.8057Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M148.548 48.6309L143.41 46.0111C143.252 45.9296 143.125 45.7104 143.125 45.5167C143.125 45.3231 143.252 45.2363 143.41 45.3128L148.548 47.9327C148.706 48.0143 148.834 48.2334 148.834 48.4271C148.834 48.6208 148.706 48.7074 148.548 48.6309Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M144.267 45.0576C144.109 44.976 143.981 44.7568 143.981 44.5632V42.1319C143.981 41.9382 144.109 41.8516 144.267 41.928C144.425 42.0045 144.552 42.2288 144.552 42.4224V44.8537C144.552 45.0474 144.425 45.134 144.267 45.0576Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.36803 88.6247C5.16803 87.5047 3.76803 84.8568 3.76803 81.0888C3.76803 74.3448 8.26401 66.5849 13.8 63.7689L50.92 44.8568C53.368 43.6088 55.608 43.5287 57.352 44.4167L53.784 42.6007C52.04 41.7127 49.8 41.7927 47.352 43.0407L10.232 61.9529C4.68804 64.7769 0.200012 72.5368 0.200012 79.2728C0.200012 83.0408 1.60001 85.6887 3.80001 86.8087L7.36803 88.6247Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.36801 88.6251C9.11201 89.5131 11.352 89.4331 13.8 88.1851L50.92 69.2732C56.464 66.4492 60.952 58.6892 60.952 51.9532C60.952 48.1852 59.552 45.5371 57.352 44.4171C55.608 43.5291 53.368 43.6092 50.92 44.8572L13.8 63.7693C8.25599 66.5933 3.76801 74.3532 3.76801 81.0892C3.76801 84.8572 5.16801 87.5051 7.36801 88.6251Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M23.5996 71.1114C23.2956 71.2634 23.0556 71.0954 23.0556 70.7274V68.0794C23.0556 67.7114 23.2956 67.2954 23.5996 67.1354C23.9036 66.9754 24.1436 67.1514 24.1436 67.5194V70.1675C24.1436 70.5355 23.9036 70.9514 23.5996 71.1114Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M24.6877 77.1834C24.3837 77.3354 24.1436 77.1674 24.1436 76.7994V74.8074C24.1436 74.4394 23.8956 74.2714 23.5996 74.4234C23.3036 74.5754 23.0556 74.9995 23.0556 75.3675V77.3595C23.0556 77.7275 22.8156 78.1435 22.5116 78.3035C22.2076 78.4635 21.9677 78.2875 21.9677 77.9195V75.9275C21.9677 74.8315 22.7036 73.5675 23.5996 73.1035C24.4956 72.6395 25.2317 73.1594 25.2317 74.2554V76.2474C25.2317 76.6154 24.9917 77.0314 24.6877 77.1914V77.1834Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M24.6877 69.2237L22.5116 70.3358C22.2076 70.4878 21.9677 70.3198 21.9677 69.9518C21.9677 69.5838 22.2076 69.1676 22.5116 69.0076L24.6877 67.8957C24.9917 67.7437 25.2317 67.9117 25.2317 68.2797C25.2317 68.6477 24.9917 69.0637 24.6877 69.2237Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M27.9597 75.5208L19.2476 79.9609C18.3436 80.4169 17.6157 79.9047 17.6157 78.8087V72.8407C17.6157 71.7447 18.3516 70.4807 19.2476 70.0167L20.3357 69.4648C20.6397 69.3128 20.8797 69.4807 20.8797 69.8487C20.8797 70.2167 20.6397 70.6327 20.3357 70.7927L19.2476 71.3448C18.9436 71.4968 18.7036 71.9208 18.7036 72.2888V78.2568C18.7036 78.6248 18.9516 78.7927 19.2476 78.6407L27.9597 74.2007C28.2637 74.0487 28.5036 73.6248 28.5036 73.2568V69.2808C28.5036 68.9128 28.2557 68.7448 27.9597 68.8968L26.8717 69.4487C26.5677 69.6007 26.3277 69.4328 26.3277 69.0648C26.3277 68.6968 26.5677 68.2808 26.8717 68.1208L27.9597 67.5689C28.8637 67.1129 29.5916 67.6248 29.5916 68.7208V72.6968C29.5916 73.7928 28.8557 75.0568 27.9597 75.5208Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M26.8636 76.0716C26.5596 76.2236 26.3196 76.0556 26.3196 75.6876V65.0796C26.3196 64.7116 26.0716 64.5436 25.7756 64.6956L21.4156 66.9196C21.1116 67.0716 20.8716 67.4956 20.8716 67.8636V78.4716C20.8716 78.8396 20.6316 79.2555 20.3276 79.4155C20.0236 79.5755 19.7836 79.3995 19.7836 79.0315V68.4235C19.7836 67.3275 20.5196 66.0635 21.4156 65.5995L25.7756 63.3755C26.6796 62.9195 27.4076 63.4316 27.4076 64.5276V75.1356C27.4076 75.5036 27.1676 75.9196 26.8636 76.0796V76.0716Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M43.1842 64.4799C42.8722 64.6399 42.6161 64.4639 42.6161 64.0799C42.6161 63.6959 42.8642 63.2639 43.1762 63.1039C43.4882 62.9439 43.7441 63.1199 43.7441 63.5039C43.7441 63.8879 43.4882 64.3199 43.1762 64.4799H43.1842Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M45.4481 63.3295C45.1361 63.4895 44.8801 63.3135 44.8801 62.9295C44.8801 62.5455 45.1281 62.1135 45.4401 61.9535C45.7521 61.7935 46.0081 61.9695 46.0081 62.3535C46.0081 62.7375 45.7521 63.1695 45.4401 63.3295H45.4481Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M47.1441 65.9055L39.2241 69.9375C38.2881 70.4175 37.5281 69.8735 37.5281 68.7375V59.0975C37.5281 57.9615 38.2881 56.6415 39.2241 56.1695L40.3521 55.5933C41.2881 55.1133 42.0481 55.6573 42.0481 56.7933V59.9535L44.1361 57.2654C44.4641 56.8414 44.9201 56.6734 45.1921 56.8654C45.3521 56.9774 45.4401 57.1934 45.4401 57.4734V58.2254L47.5281 55.5375C47.8561 55.1135 48.3121 54.9455 48.5841 55.1375C48.7441 55.2495 48.8321 55.4655 48.8321 55.7455V62.9695C48.8321 64.1055 48.0721 65.4255 47.1361 65.8975L47.1441 65.9055ZM39.2241 57.5535C38.9121 57.7135 38.6561 58.1535 38.6561 58.5295V68.1695C38.6561 68.5455 38.9121 68.7295 39.2241 68.5695L47.1441 64.5375C47.4561 64.3775 47.7121 63.9375 47.7121 63.5615V56.9615L45.6241 59.6494C45.4321 59.8974 45.2081 60.0575 44.9841 60.1135C44.7601 60.1695 44.5761 60.1055 44.4481 59.9295C44.3601 59.8095 44.3121 59.6414 44.3121 59.4414V58.6894L42.2241 61.3773C42.0321 61.6253 41.8081 61.7854 41.5841 61.8414C41.3601 61.8974 41.1761 61.8334 41.0481 61.6654C40.9601 61.5454 40.9121 61.3695 40.9121 61.1695V57.3853C40.9121 57.0093 40.6561 56.8253 40.3441 56.9853L39.2161 57.5615L39.2241 57.5535Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M40.9281 65.6322C40.6161 65.7922 40.3601 65.6162 40.3601 65.2322C40.3601 64.8482 40.6081 64.4163 40.9201 64.2563C41.2321 64.0963 41.4881 64.2723 41.4881 64.6563C41.4881 65.0403 41.2321 65.4722 40.9201 65.6322H40.9281Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M46.9547 1.734C45.8435 1.16823 44.4163 1.21413 42.8516 2.01436C39.3193 3.8136 36.4599 8.75777 36.4599 13.0494C36.4599 15.445 37.3519 17.1372 38.7536 17.8508L36.4803 16.6938C35.0786 15.9802 34.1866 14.288 34.1866 11.8924C34.1866 7.59564 37.0512 2.65147 40.5783 0.857329C42.138 0.0621964 43.5702 0.0112014 44.6814 0.576969L46.9547 1.734Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M46.9546 1.73517C48.3563 2.44875 49.2483 4.14104 49.2483 6.53663C49.2483 10.8334 46.3838 15.7775 42.8566 17.5716C41.297 18.3667 39.8647 18.4177 38.7536 17.852C37.3519 17.1384 36.4599 15.4462 36.4599 13.0506C36.4599 8.75385 39.3244 3.80968 42.8515 2.01553C44.4112 1.2204 45.8435 1.1694 46.9546 1.73517Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M46.4552 8.83541C46.2564 8.93735 46.0933 8.82522 46.0933 8.58056V6.38882L44.2889 7.30631C44.0901 7.40825 43.9271 7.29611 43.9271 7.05146C43.9271 6.8068 44.0901 6.53145 44.2889 6.42951L46.4501 5.32861C46.6488 5.22667 46.812 5.3388 46.812 5.58346V8.21347C46.812 8.45812 46.6488 8.73347 46.4501 8.83541H46.4552Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M39.248 14.2627C39.1562 14.3086 39.0645 14.3137 38.9931 14.2627C38.8504 14.1608 38.8504 13.8855 38.9931 13.6409L41.3378 9.599C41.4805 9.35434 41.7047 9.2422 41.8475 9.33905L43.3969 10.4349L46.2054 5.5876C46.3481 5.34294 46.5724 5.2308 46.7151 5.32764C46.8578 5.42958 46.8578 5.70481 46.7151 5.94946L43.6518 11.2402C43.5091 11.4849 43.2848 11.597 43.1421 11.5002L41.5926 10.4042L39.5028 14.0079C39.4315 14.1302 39.3397 14.2168 39.248 14.2678V14.2627Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx b/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx
new file mode 100644
index 0000000..15c3ca0
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx
@@ -0,0 +1,251 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function CycleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="160"
+      height="165"
+      viewBox="0 0 160 165"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_446_128653)">
+        <g opacity="0.2">
+          <path
+            d="M10.364 131.09C10.364 133.03 11.8174 134.964 14.7191 136.447L52.0819 155.467C57.8905 158.423 67.3043 158.423 73.1129 155.467L151.624 115.502C154.525 114.025 155.979 112.09 155.979 110.151V116.344C155.979 118.283 154.525 120.218 151.624 121.695L73.1129 161.66C67.3043 164.616 57.8905 164.616 52.0819 161.66L14.7191 142.64C11.8123 141.162 10.364 139.223 10.364 137.283V131.09Z"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M10.364 131.09C10.364 129.151 11.8174 127.216 14.7191 125.739L93.2298 85.7737C99.0383 82.8183 108.452 82.8183 114.261 85.7737L151.624 104.794C154.53 106.272 155.979 108.211 155.979 110.151C155.979 112.09 154.525 114.025 151.624 115.502L73.1129 155.467C67.3043 158.423 57.8905 158.423 52.0819 155.467L14.7191 136.447C11.8123 134.969 10.364 133.03 10.364 131.09Z"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <g opacity="0.6">
+          <path
+            d="M10.364 111.521C10.364 113.46 11.8174 115.395 14.7191 116.877L52.0819 135.898C57.8905 138.853 67.3043 138.853 73.1129 135.898L151.624 95.933C154.525 94.4553 155.979 92.5209 155.979 90.5814V96.7745C155.979 98.714 154.525 100.648 151.624 102.126L73.1129 142.091C67.3043 145.046 57.8905 145.046 52.0819 142.091L14.7191 123.07C11.8123 121.593 10.364 119.653 10.364 117.714V111.521Z"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M10.364 111.521C10.364 109.581 11.8174 107.647 14.7191 106.169L93.2298 66.2044C99.0383 63.2489 108.452 63.2489 114.261 66.2044L151.624 85.2247C154.53 86.7024 155.979 88.6419 155.979 90.5814C155.979 92.5209 154.525 94.4553 151.624 95.933L73.1129 135.898C67.3043 138.853 57.8905 138.853 52.0819 135.898L14.7191 116.877C11.8123 115.4 10.364 113.46 10.364 111.521Z"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <path
+          d="M10.364 91.9565C10.364 93.896 11.8174 95.8304 14.7191 97.3132L52.0819 116.334C57.8905 119.289 67.3043 119.289 73.1129 116.334L151.624 76.3688C154.525 74.8911 155.979 72.9567 155.979 71.0172V77.2102C155.979 79.1497 154.525 81.0841 151.624 82.5618L73.1129 122.527C67.3043 125.482 57.8905 125.482 52.0819 122.527L14.7191 103.506C11.8123 102.029 10.364 100.089 10.364 98.1496V91.9565Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M10.364 91.9565C10.364 90.0171 11.8174 88.0827 14.7191 86.605L93.2298 46.6401C99.0383 43.6847 108.452 43.6847 114.261 46.6401L151.624 65.6605C154.53 67.1382 155.979 69.0777 155.979 71.0172C155.979 72.9567 154.525 74.8911 151.624 76.3688L73.1129 116.334C67.3043 119.289 57.8905 119.289 52.0819 116.334L14.7191 97.3132C11.8123 95.8355 10.364 93.896 10.364 91.9565Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M75.3829 84.9324C72.8304 84.9324 70.4628 84.368 68.3418 83.2597C68.3418 83.2597 68.3212 83.2494 68.3109 83.2443L64.1818 81.1457C58.0548 78.0261 54.5419 70.7197 54.5419 61.0992C54.5419 43.4231 66.3799 23.0174 80.9347 15.6083C84.4989 13.792 87.9707 12.8735 91.2473 12.8735C93.7433 12.8735 96.0698 13.4123 98.1601 14.4795L102.253 16.5627C102.294 16.5832 102.325 16.6037 102.361 16.6242C108.529 19.6772 112.088 27.0041 112.088 36.7016C112.088 54.3777 100.25 74.7885 85.6956 82.1976C82.1313 84.0139 78.6647 84.9324 75.388 84.9324H75.3829Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        />
+        <path
+          d="M91.2422 13.3867C93.6766 13.3867 95.926 13.9203 97.9187 14.9362L102.012 17.0194C102.043 17.0348 102.063 17.0501 102.089 17.0604C107.882 19.9286 111.57 26.8554 111.57 36.7016C111.57 54.234 99.8754 74.3986 85.4593 81.741C81.8899 83.5573 78.4849 84.4193 75.388 84.4193C72.9023 84.4193 70.6066 83.8652 68.5831 82.8082C68.5677 82.8082 68.5575 82.7979 68.5421 82.7877L64.4129 80.6891C58.6916 77.7747 55.0555 70.8788 55.0555 61.1043C55.0555 43.5719 66.7497 23.4125 81.1658 16.0701C84.7352 14.2538 88.1402 13.3918 91.2422 13.3918M91.2422 12.3605C87.8834 12.3605 84.3346 13.2994 80.6984 15.1517C73.5494 18.7895 66.8421 25.5726 61.8142 34.249C56.7914 42.91 54.0284 52.4433 54.0284 61.0992C54.0284 70.9198 57.6439 78.3904 63.9507 81.6024L68.049 83.6856C68.0798 83.7061 68.1158 83.7215 68.1466 83.7369C70.3293 84.8708 72.7688 85.4455 75.388 85.4455C78.7468 85.4455 82.2905 84.5065 85.9267 82.6543C93.0757 79.0164 99.783 72.2333 104.811 63.5569C109.834 54.8959 112.597 45.3575 112.597 36.7016C112.597 26.8194 108.945 19.3334 102.582 16.1574C102.546 16.1368 102.51 16.1163 102.469 16.0958L98.3861 14.0178C96.2239 12.9146 93.8204 12.3605 91.2422 12.3605Z"
+          fill="var(--illustration-stroke-tertiary)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M102.012 17.0193C100.677 16.3677 99.2283 15.9265 97.6876 15.7212C97.5489 15.7007 97.4103 15.6802 97.2613 15.6699C95.7668 15.5057 94.185 15.557 92.5364 15.8341C92.1615 15.8957 91.7866 15.9675 91.4014 16.0547C91.3244 16.0752 91.2473 16.0906 91.1651 16.106C90.8365 16.1881 90.5026 16.2754 90.1688 16.3728C89.4909 16.5678 88.7976 16.8038 88.094 17.0706C87.6625 17.24 87.2209 17.4247 86.7792 17.6197C86.3427 17.8146 85.8958 18.0301 85.449 18.2559C71.0278 25.5983 59.3387 45.7577 59.3387 63.2901C59.3387 63.9058 59.3541 64.5112 59.3798 65.1116C59.3952 65.3938 59.4106 65.6811 59.4312 65.9582V65.9735C59.4466 66.2096 59.4671 66.4405 59.4877 66.6662C59.4877 66.7586 59.5031 66.8509 59.5185 66.9382C59.539 67.1639 59.5596 67.3846 59.5904 67.6052C59.6263 67.8976 59.6674 68.1901 59.7085 68.4774C59.7393 68.6776 59.7701 68.8777 59.8061 69.0726V69.088C59.8318 69.2266 59.8523 69.3651 59.8831 69.5036C59.9242 69.714 59.9602 69.9295 60.0064 70.1347C60.0475 70.3554 60.104 70.5811 60.1553 70.8018C60.2272 71.1045 60.2991 71.4021 60.3813 71.6945C60.4378 71.8998 60.4994 72.105 60.5611 72.3051C60.633 72.5463 60.7049 72.7823 60.787 73.0132C60.8487 73.2082 60.9103 73.3877 60.9822 73.5776C61.0079 73.6443 61.0284 73.7059 61.0541 73.7726C61.1311 73.9727 61.2133 74.1728 61.2955 74.3678C61.3828 74.5884 61.4752 74.8039 61.5728 75.0245C61.6498 75.2041 61.732 75.3785 61.8193 75.5479C61.8655 75.6556 61.9169 75.7531 61.9734 75.8557C62.035 75.9943 62.1069 76.1277 62.1788 76.2662C62.4664 76.8101 62.7746 77.3232 63.1084 77.8106C63.1649 77.9081 63.2317 78.0056 63.3036 78.0928C63.4217 78.2673 63.5449 78.4366 63.6682 78.6008C63.7504 78.7137 63.8325 78.8111 63.9198 78.9189C64.2023 79.2832 64.5053 79.6321 64.8186 79.9656C64.9162 80.0682 65.0138 80.1708 65.1113 80.2683C65.1524 80.3042 65.1884 80.3402 65.2295 80.3812C65.3065 80.4582 65.3835 80.53 65.4606 80.6018C65.5838 80.7198 65.7122 80.8327 65.8406 80.9456C66.005 81.0893 66.1693 81.2278 66.3388 81.3612C66.4415 81.4433 66.5391 81.5254 66.6469 81.6024C66.8062 81.7204 66.9654 81.8384 67.1348 81.9564C67.2684 82.0488 67.407 82.136 67.5406 82.2232C67.6279 82.2796 67.7203 82.3412 67.8076 82.3874C68.0439 82.5311 68.2853 82.6696 68.5318 82.7979L64.4026 80.6993C58.6814 77.785 55.0452 70.889 55.0452 61.1146C55.0452 43.5822 66.7394 23.4227 81.1555 16.0804C87.5342 12.8376 93.3787 12.6375 97.9136 14.9464L102.007 17.0296L102.012 17.0193Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M111.57 36.7016C111.57 54.234 99.8754 74.3986 85.4593 81.7409C79.0242 85.0145 73.1334 85.1838 68.5831 82.8031C68.5677 82.8031 68.5575 82.7928 68.542 82.7825C68.2955 82.6594 68.0541 82.5157 67.8179 82.372C67.7306 82.3207 67.6381 82.2643 67.5508 82.2079C67.4173 82.1206 67.2786 82.0334 67.1451 81.9411C66.9756 81.823 66.8164 81.7102 66.6572 81.587C66.5494 81.5101 66.4518 81.428 66.3491 81.3459C66.1796 81.2176 66.0152 81.0739 65.8509 80.9303C65.7225 80.8174 65.5941 80.7096 65.4708 80.5865C65.3938 80.5146 65.3168 80.4428 65.2397 80.3659C65.1986 80.3248 65.1627 80.2889 65.1216 80.253C65.024 80.1555 64.9265 80.0529 64.8289 79.9502C64.5156 79.6167 64.2126 79.273 63.9301 78.9035C63.8428 78.7958 63.7606 78.6983 63.6785 78.5854C63.5552 78.4212 63.4319 78.2519 63.3138 78.0775C63.2471 77.9851 63.1854 77.8876 63.1187 77.7953C62.7848 77.3078 62.4767 76.7947 62.1891 76.2508C62.1172 76.1174 62.0453 75.9789 61.9837 75.8404C61.9272 75.7378 61.8758 75.6403 61.8296 75.5325C61.7423 75.3581 61.6601 75.1836 61.5831 75.0092C61.4803 74.7937 61.3879 74.5782 61.3057 74.3524C61.2236 74.1574 61.1414 73.9573 61.0644 73.7572C61.0387 73.6905 61.0181 73.6289 60.9924 73.5622C60.9257 73.3724 60.8641 73.1928 60.7973 72.9978C60.7151 72.7669 60.6432 72.5309 60.5713 72.2898C60.5097 72.0897 60.4532 71.8844 60.3916 71.6792C60.3094 71.3918 60.2375 71.0943 60.1656 70.7864C60.1142 70.5658 60.0577 70.34 60.0167 70.1194C59.9704 69.9141 59.9293 69.6986 59.8934 69.4883C59.8626 69.3549 59.842 69.2163 59.8164 69.0727V69.0573C59.7804 68.8623 59.7496 68.6622 59.7188 68.4621C59.6777 68.1799 59.6315 67.8823 59.6007 67.5898C59.5698 67.3692 59.5493 67.1486 59.5288 66.9228C59.5133 66.8304 59.5031 66.7381 59.4979 66.6509C59.4723 66.4251 59.4569 66.1942 59.4414 65.9582V65.9428C59.4158 65.6657 59.4004 65.3784 59.3901 65.0962C59.3593 64.501 59.349 63.8904 59.349 63.2747C59.349 45.7423 71.0432 25.5829 85.4593 18.2405C85.9061 18.0148 86.3529 17.8044 86.7895 17.6043C87.2311 17.4093 87.6728 17.2246 88.1042 17.0553C88.8027 16.7833 89.496 16.5473 90.1791 16.3575C90.518 16.26 90.8467 16.1728 91.1754 16.0907C91.2576 16.0701 91.3346 16.0547 91.4117 16.0393C91.7917 15.9521 92.1666 15.8803 92.5467 15.8187C94.1952 15.5468 95.7771 15.4903 97.2716 15.6545C97.4154 15.6699 97.554 15.6904 97.6978 15.7058C99.2334 15.9111 100.687 16.3575 102.022 17.004C102.053 17.0194 102.074 17.0348 102.099 17.045C107.892 19.9132 111.58 26.84 111.58 36.6862L111.57 36.7016Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M89.1108 69.2574C88.9618 69.2574 88.8232 69.2266 88.6999 69.1599L84.4064 66.9741C84.0726 66.8048 83.8826 66.4559 83.8826 66.0095V29.6158C83.8826 28.9437 84.3345 28.2099 84.9046 27.9534C86.81 27.0914 88.6742 26.6553 90.4461 26.6553C91.9817 26.6553 93.4094 26.9837 94.6882 27.6353L98.9817 29.8211C99.3515 30.0109 99.7162 30.2315 100.065 30.4727C103.162 32.6636 104.872 36.7632 104.872 42.0224C104.872 47.2816 103.219 52.9051 100.214 58.0822C97.3999 62.9361 93.6559 66.8459 89.6655 69.0984C89.4857 69.201 89.2957 69.2523 89.1108 69.2523V69.2574Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        />
+        <path
+          d="M90.4461 27.1633C91.8893 27.1633 93.24 27.4711 94.452 28.0868L98.7455 30.2726C99.0999 30.4522 99.4389 30.6574 99.7624 30.8883C102.7 32.9664 104.354 36.9685 104.354 42.0225C104.354 47.0764 102.705 52.7564 99.7624 57.8257C96.9942 62.5975 93.3016 66.4559 89.4087 68.6571C89.3008 68.7187 89.1981 68.7443 89.1057 68.7443C89.0389 68.7443 88.9773 68.729 88.9259 68.7033L84.6324 66.5175C84.4835 66.4406 84.391 66.2661 84.391 66.0096V29.6159C84.391 29.1387 84.7197 28.5948 85.1152 28.4204C86.9641 27.584 88.7616 27.1633 90.4461 27.1633ZM90.4461 26.1371C88.6024 26.1371 86.6662 26.5886 84.694 27.4814C83.9391 27.8252 83.369 28.7385 83.369 29.6107V66.0044C83.369 66.6407 83.6669 67.1692 84.1702 67.4257L88.4637 69.6115C88.664 69.7141 88.8797 69.7654 89.1108 69.7654C89.3881 69.7654 89.6552 69.6884 89.9171 69.5448C93.9847 67.2461 97.8006 63.2645 100.656 58.3388C103.707 53.0796 105.381 47.2868 105.381 42.0225C105.381 36.7581 103.599 32.3404 100.358 30.052C99.9935 29.7954 99.6083 29.5594 99.2129 29.3593L94.9194 27.1735C93.5687 26.486 92.0588 26.1371 90.4461 26.1371Z"
+          fill="var(--illustration-stroke-tertiary)"
+        />
+        <path
+          d="M98.7455 30.2725C96.1212 28.9385 92.8394 29.0462 89.4087 30.6009C89.0184 30.7805 88.6846 31.3192 88.6846 31.7964V68.1901C88.6846 68.4467 88.777 68.6211 88.9259 68.6981L84.6324 66.5123C84.4835 66.4353 84.3911 66.2609 84.3911 66.0043V29.6158C84.3911 29.1386 84.7197 28.5947 85.1152 28.4203C88.5459 26.8656 91.8277 26.7578 94.452 28.0919L98.7455 30.2777V30.2725Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M98.7456 30.2725C99.0999 30.4521 99.4389 30.6574 99.7624 30.8882C102.7 32.9663 104.349 36.9684 104.349 42.0224C104.349 47.0763 102.7 52.7563 99.7624 57.8256C96.9943 62.5974 93.3016 66.4559 89.4087 68.657C89.2238 68.7597 89.0595 68.7699 88.926 68.7032C88.777 68.6263 88.6846 68.4518 88.6846 68.1953V31.8016C88.6846 31.3244 89.0133 30.7805 89.4087 30.606C92.8394 29.0514 96.1212 28.9436 98.7456 30.2777V30.2725Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M52.5236 1.67268C51.404 1.10315 49.966 1.14933 48.3893 1.95488C44.8302 3.7661 41.949 8.74311 41.949 13.0634C41.949 15.4749 42.8478 17.1784 44.2601 17.8967L41.9695 16.732C40.5572 16.0136 39.6584 14.3102 39.6584 11.8986C39.6584 7.57326 42.5448 2.59625 46.0987 0.790162C47.6703 -0.0102638 49.1134 -0.0615732 50.233 0.507961L52.5236 1.67268Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M52.5236 1.67263C53.9359 2.39096 54.8347 4.09443 54.8347 6.50597C54.8347 10.8313 51.9484 15.8084 48.3944 17.6144C46.8229 18.4149 45.3797 18.4662 44.2601 17.8966C42.8478 17.1783 41.949 15.4748 41.949 13.0633C41.949 8.73793 44.8353 3.76092 48.3893 1.95483C49.9608 1.15441 51.404 1.1031 52.5236 1.67263Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M49.0158 6.51632C50.7363 5.63894 52.1332 6.62407 52.1332 8.71749C52.1332 10.8109 50.7363 13.2173 49.0158 14.0896C47.2953 14.9618 45.8984 13.9818 45.8984 11.8884C45.8984 9.79499 47.2953 7.38858 49.0158 6.51632ZM49.0158 7.3578C47.6754 8.04021 46.5917 9.913 46.5917 11.5395C46.5917 13.166 47.6754 13.9357 49.0158 13.2532C50.3563 12.5708 51.4399 10.698 51.4399 9.07153C51.4399 7.44502 50.3563 6.67538 49.0158 7.3578ZM49.8427 8.3532C49.9814 8.10691 50.2073 7.99403 50.3511 8.09665C50.4898 8.19927 50.4898 8.47634 50.3511 8.72263L49.2777 10.5954C49.1391 10.8417 48.908 10.9546 48.7693 10.852C48.6306 10.7493 48.6306 10.4723 48.7693 10.226L49.8478 8.3532H49.8427ZM49.7092 4.60249C49.8992 4.505 50.0532 4.61275 50.0532 4.84877C50.0532 5.08479 49.8992 5.3516 49.7092 5.44396L48.3225 6.1469C48.1325 6.24439 47.9784 6.1315 47.9784 5.90061C47.9784 5.66972 48.1325 5.40291 48.3225 5.30542L49.7092 4.60249Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M156.646 38.6513C157.222 38.3588 157.586 37.6661 157.586 36.681V24.0999C157.586 22.3349 156.41 20.3031 154.957 19.5642L122.375 2.98102C121.733 2.65264 121.143 2.63725 120.686 2.86814L122.976 1.70342C123.433 1.47253 124.024 1.48792 124.666 1.8163L157.252 18.4046C158.706 19.1435 159.882 21.1753 159.882 22.9404V35.5214C159.882 36.5065 159.517 37.1992 158.942 37.4917L156.651 38.6564L156.646 38.6513Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M156.646 38.6512C156.189 38.8821 155.599 38.8667 154.957 38.5383L122.37 21.95C120.917 21.2112 119.741 19.1793 119.741 17.4143V4.83837C119.741 3.85323 120.105 3.16056 120.68 2.86809C121.138 2.6372 121.728 2.65259 122.37 2.98097L154.957 19.5693C156.41 20.3081 157.586 22.34 157.586 24.105V36.6861C157.586 37.6712 157.222 38.3639 156.646 38.6563V38.6512Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M133.628 16.8038L141.188 20.652C141.809 20.9701 142.312 20.611 142.312 19.8567C142.312 19.1025 141.809 18.2302 141.188 17.9172L133.628 14.069C133.006 13.7509 132.503 14.1101 132.503 14.8643C132.503 15.6186 133.006 16.4908 133.628 16.8038Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M134.167 23.1251L144.767 28.5229C145.64 28.9641 146.344 28.4664 146.344 27.4094C146.344 26.3473 145.635 25.1313 144.767 24.6901L134.167 19.2923C133.294 18.851 132.59 19.3488 132.59 20.4057C132.59 21.4678 133.299 22.6839 134.167 23.1251Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M127.285 12.8991C127.336 13.0684 127.455 13.2326 127.588 13.2993C127.773 13.3968 127.927 13.2839 127.927 13.053V12.6271C127.927 12.4886 127.876 12.3295 127.783 12.2064C127.691 12.0832 127.578 12.0063 127.47 12.0011L125.287 11.9396C125.159 11.9396 125.072 12.0473 125.072 12.2218V15.1567C125.072 15.3055 125.133 15.4697 125.231 15.5979C125.333 15.7262 125.457 15.7929 125.559 15.7775L125.873 15.7313C126.037 15.7057 126.099 15.485 126.017 15.2388C125.96 15.0746 125.857 14.9412 125.744 14.8745V12.8478L127.28 12.8888L127.285 12.8991Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M125.939 10.9596C125.991 11.1289 126.109 11.2931 126.242 11.3598C126.427 11.4573 126.581 11.3444 126.581 11.1135V10.6877C126.581 10.5491 126.53 10.3901 126.438 10.2669C126.345 10.1438 126.232 10.0668 126.124 10.0617L123.942 10.0001C123.813 10.0001 123.726 10.1079 123.726 10.2823V13.2172C123.726 13.366 123.788 13.5302 123.885 13.6585C123.988 13.7868 124.111 13.8535 124.214 13.8381L124.527 13.7919C124.691 13.7662 124.753 13.5456 124.671 13.2993C124.614 13.1351 124.512 13.0017 124.399 12.935V10.9083L125.934 10.9493L125.939 10.9596Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M129.267 14.2177C129.175 14.0895 129.062 14.0125 128.959 14.0125L126.777 13.9509C126.648 13.9509 126.561 14.0638 126.561 14.228V17.168C126.561 17.3066 126.612 17.4605 126.705 17.5836C126.802 17.7119 126.915 17.7889 127.018 17.7889L129.196 17.8504C129.329 17.8607 129.416 17.7478 129.416 17.5734V14.6333C129.416 14.4948 129.365 14.3409 129.267 14.2177ZM128.744 16.9474L127.234 16.9012V14.8642L128.744 14.9104V16.9474Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.73004 54.5521C3.3177 53.8338 2.41894 52.1354 2.41894 49.7188C2.41894 45.3934 5.30525 40.4164 8.85921 38.6103L32.6892 26.4808C34.2608 25.6803 35.6988 25.629 36.8184 26.1986L34.5278 25.0338C33.4082 24.4643 31.9702 24.5156 30.3987 25.316L6.56865 37.4456C3.01469 39.2517 0.128387 44.2287 0.128387 48.554C0.128387 50.9707 1.02715 52.669 2.43949 53.3874L4.73004 54.5521Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M4.73004 54.552C5.84964 55.1216 7.28766 55.0703 8.85921 54.2698L32.6892 42.1403C36.2483 40.3291 39.1295 35.3521 39.1295 31.0318C39.1295 28.6152 38.2307 26.9168 36.8184 26.1985C35.6988 25.629 34.2608 25.6803 32.6892 26.4807L8.85921 38.6102C5.30012 40.4215 2.41895 45.3985 2.41895 49.7187C2.41895 52.1354 3.31771 53.8337 4.73004 54.552Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.1153 43.2692C12.2026 43.1358 12.331 43.0793 12.4132 43.1358C12.4953 43.1922 12.5005 43.3461 12.4286 43.4898L12.4132 43.5206L9.30088 48.8927C9.21357 49.0415 9.07491 49.1133 8.9876 49.0517C8.90029 48.9902 8.90029 48.8208 8.9876 48.6669L12.0999 43.2948L12.1153 43.2692Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          d="M9.80932 45.0548C9.80932 44.829 9.66038 44.7264 9.47549 44.8187C9.29061 44.9111 9.14167 45.1676 9.14167 45.3934C9.14167 45.6192 9.29061 45.7218 9.47549 45.6294C9.66038 45.5371 9.80932 45.2805 9.80932 45.0548ZM10.2561 44.829C10.2561 45.3524 9.9069 45.9527 9.47549 46.1733C9.04409 46.3939 8.69485 46.1476 8.69485 45.6243C8.69485 45.1009 9.04409 44.5006 9.47549 44.28C9.9069 44.0594 10.2561 44.3056 10.2561 44.829Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          d="M12.2591 46.7839C12.2591 46.5581 12.1102 46.4555 11.9253 46.5479C11.7404 46.6402 11.5914 46.8968 11.5914 47.1225C11.5914 47.3483 11.7404 47.4509 11.9253 47.3586C12.1102 47.2662 12.2591 47.0096 12.2591 46.7839ZM12.7008 46.5581C12.7008 47.0815 12.3515 47.6818 11.9201 47.9024C11.4887 48.1231 11.1395 47.8768 11.1395 47.3534C11.1395 46.8301 11.4887 46.2297 11.9201 46.0091C12.3515 45.7885 12.7008 46.0348 12.7008 46.5581Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          d="M10.6259 41.2989C10.6259 41.1552 10.7235 40.991 10.8416 40.9346C11.5349 40.6267 12.2077 40.5241 12.8086 40.6524C13.4711 40.7909 14.0104 41.1963 14.3853 41.8223C14.7551 42.4482 14.94 43.2794 14.9194 44.2184C14.8989 45.1625 14.6678 46.1835 14.262 47.1789C13.8512 48.1743 13.276 49.1082 12.5981 49.8829C11.915 50.6577 11.1549 51.2426 10.3897 51.5762C9.62443 51.9097 8.88488 51.9866 8.24805 51.7917C7.67284 51.6121 7.19521 51.2221 6.86652 50.6475C6.81003 50.55 6.85625 50.3704 6.9641 50.2524C7.07195 50.1344 7.20035 50.1241 7.25684 50.2216C7.55472 50.7295 7.97585 51.0733 8.48943 51.2324C9.06464 51.4068 9.72715 51.3401 10.4153 51.0374C11.1035 50.7347 11.7917 50.2113 12.4029 49.5135C13.014 48.8157 13.5328 47.9794 13.9025 47.0815C14.2723 46.1835 14.4726 45.2651 14.4932 44.4134C14.5137 43.5668 14.3494 42.8177 14.0155 42.2532C13.6817 41.6888 13.1938 41.3246 12.5981 41.2014C12.0639 41.0885 11.4682 41.1758 10.8519 41.4477C10.7338 41.499 10.6362 41.4323 10.6362 41.2886L10.6259 41.2989Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M29.6745 38.5385L20.954 42.9768C20.2349 43.3411 19.6546 42.9306 19.6546 42.0583C19.6546 41.1861 20.2349 40.1855 20.954 39.8212L29.6745 35.383C30.3935 35.0187 30.9739 35.4292 30.9739 36.3014C30.9739 37.1737 30.3935 38.1742 29.6745 38.5385Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_446_128653">
+          <rect width="160" height="164" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx b/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx
new file mode 100644
index 0000000..ebc1428
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx
@@ -0,0 +1,326 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function DashboardVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="165"
+      viewBox="0 0 162 165"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M14.2806 131.177C14.2806 133.122 15.737 135.062 18.6448 136.55L56.0858 155.628C61.9065 158.592 71.3401 158.592 77.1608 155.628L155.836 115.542C158.744 114.06 160.2 112.119 160.2 110.174V116.386C160.2 118.331 158.744 120.271 155.836 121.754L77.1608 161.84C71.3401 164.804 61.9065 164.804 56.0858 161.84L18.6448 142.762C15.7319 141.279 14.2806 139.334 14.2806 137.389V131.177Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14.2806 131.177C14.2806 129.232 15.737 127.292 18.6448 125.81L97.3197 85.7233C103.14 82.7589 112.574 82.7589 118.395 85.7233L155.836 104.802C158.749 106.284 160.2 108.229 160.2 110.174C160.2 112.12 158.744 114.06 155.836 115.542L77.1608 155.629C71.3401 158.593 61.9065 158.593 56.0858 155.629L18.6448 136.55C15.7319 135.068 14.2806 133.123 14.2806 131.177Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M14.2806 111.554C14.2806 113.499 15.737 115.439 18.6448 116.927L56.0858 136.005C61.9065 138.969 71.3401 138.969 77.1608 136.005L155.836 95.9186C158.744 94.4364 160.2 92.4962 160.2 90.5508V96.7627C160.2 98.7081 158.744 100.648 155.836 102.13L77.1608 142.217C71.3401 145.181 61.9065 145.181 56.0858 142.217L18.6448 123.139C15.7319 121.656 14.2806 119.711 14.2806 117.766V111.554Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14.2806 111.554C14.2806 109.609 15.737 107.669 18.6448 106.186L97.3197 66.1003C103.14 63.1359 112.574 63.1359 118.395 66.1003L155.836 85.1785C158.749 86.6607 160.2 88.606 160.2 90.5514C160.2 92.4968 158.744 94.437 155.836 95.9192L77.1608 136.006C71.3401 138.97 61.9065 138.97 56.0858 136.006L18.6448 116.927C15.7319 115.445 14.2806 113.5 14.2806 111.554Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M14.2806 91.9307C14.2806 93.8761 15.737 95.8163 18.6448 97.3037L56.0858 116.382C61.9065 119.346 71.3401 119.346 77.1608 116.382L155.836 76.2957C158.744 74.8135 160.2 72.8731 160.2 70.9277V77.1396C160.2 79.085 158.744 81.0252 155.836 82.5074L77.1608 122.594C71.3401 125.558 61.9065 125.558 56.0858 122.594L18.6448 103.516C15.7319 102.033 14.2806 100.088 14.2806 98.1426V91.9307Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.2806 91.9314C14.2806 89.986 15.737 88.0458 18.6448 86.5636L97.3197 46.4772C103.14 43.5128 112.574 43.5128 118.395 46.4772L155.836 65.5554C158.749 67.0376 160.2 68.983 160.2 70.9284C160.2 72.8737 158.744 74.8141 155.836 76.2963L77.1608 116.383C71.3401 119.347 61.9065 119.347 56.0858 116.383L18.6448 97.3043C15.7319 95.8221 14.2806 93.8767 14.2806 91.9314Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M98.6889 81.9835C98.0198 81.9835 97.3971 81.8395 96.831 81.5513L92.2454 79.2148C90.6242 78.3862 89.6927 76.4871 89.6927 73.9911V63.698C89.6927 59.2669 92.6623 54.146 96.3163 52.2881L104.777 47.9805C105.698 47.5122 106.599 47.2754 107.459 47.2754C108.128 47.2754 108.75 47.4195 109.316 47.7077L113.902 50.0443C115.523 50.8729 116.455 52.7719 116.455 55.268V65.561C116.455 69.9922 113.485 75.1078 109.831 76.9708L101.37 81.2785C100.449 81.7468 99.5483 81.9835 98.6889 81.9835Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M107.459 47.7852C108.05 47.7852 108.596 47.9138 109.08 48.1609L113.665 50.4974C115.055 51.2076 115.94 52.8802 115.94 55.2579V65.551C115.94 69.8123 113.099 74.717 109.594 76.5028L101.133 80.8105C100.264 81.2531 99.4402 81.464 98.6837 81.464C98.0918 81.464 97.5463 81.3353 97.0625 81.0883L92.477 78.7519C91.0874 78.0417 90.2022 76.369 90.2022 73.9914V63.6983C90.2022 59.437 93.0431 54.5323 96.5479 52.7465L105.009 48.4388C105.879 47.9962 106.702 47.7852 107.459 47.7852ZM107.459 46.7559C106.517 46.7559 105.539 47.0132 104.54 47.5175L96.0796 51.8252C92.2094 53.7964 89.1729 59.0098 89.1729 63.6932V73.9862C89.1729 76.6778 90.2074 78.7466 92.0087 79.6679L96.5942 82.0044C97.2324 82.3286 97.9323 82.4933 98.6837 82.4933C99.6255 82.4933 100.603 82.236 101.597 81.7316L110.057 77.424C113.928 75.4529 116.964 70.2395 116.964 65.5561V55.2631C116.964 52.5714 115.93 50.5025 114.128 49.5813L109.543 47.2448C108.905 46.9205 108.205 46.7559 107.453 46.7559H107.459Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M98.6889 43.4986C98.0198 43.4986 97.3971 43.3544 96.831 43.0662L92.2454 40.7297C90.6242 39.9011 89.6927 38.0021 89.6927 35.506V25.2129C89.6927 20.7818 92.6623 15.6609 96.3163 13.803L104.777 9.49544C105.698 9.02711 106.599 8.78516 107.459 8.78516C108.128 8.78516 108.75 8.9293 109.316 9.21751L113.902 11.5541C115.523 12.3826 116.455 14.2817 116.455 16.7777V27.0708C116.455 31.5019 113.485 36.6228 109.831 38.4807L101.37 42.7883C100.449 43.2566 99.5483 43.4934 98.6889 43.4934V43.4986Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M107.459 9.3047C108.05 9.3047 108.596 9.43335 109.08 9.68038L113.665 12.0169C115.055 12.7271 115.94 14.3998 115.94 16.7775V27.0705C115.94 31.3318 113.099 36.2365 109.594 38.0223L101.133 42.33C100.264 42.7726 99.4402 42.9837 98.6837 42.9837C98.0918 42.9837 97.5463 42.8549 97.0625 42.6078L92.477 40.2714C91.0874 39.5612 90.2022 37.8886 90.2022 35.5109V25.2178C90.2022 20.9565 93.0431 16.0519 96.5479 14.266L105.009 9.95831C105.879 9.51571 106.702 9.3047 107.459 9.3047ZM107.459 8.27539C106.517 8.27539 105.539 8.53271 104.54 9.03707L96.0796 13.3448C92.2094 15.3159 89.1729 20.5293 89.1729 25.2127V35.5057C89.1729 38.1974 90.2074 40.2662 92.0087 41.1874L96.5942 43.5239C97.2324 43.8482 97.9323 44.013 98.6837 44.013C99.6255 44.013 100.603 43.7555 101.602 43.2512L110.063 38.9436C113.933 36.9725 116.969 31.759 116.969 27.0757V16.7826C116.969 14.091 115.935 12.0221 114.134 11.1008L109.548 8.76429C108.91 8.44005 108.21 8.27539 107.459 8.27539Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M67.6862 96.1417C67.0171 96.1417 66.3944 95.9977 65.8283 95.7095L61.2427 93.373C59.6216 92.5444 58.6901 90.6452 58.6901 88.1492V77.8561C58.6901 73.425 61.6596 68.3042 65.3136 66.4463L73.7745 62.1387C74.6957 61.6704 75.5964 61.4336 76.4559 61.4336C77.1249 61.4336 77.7476 61.5777 78.3138 61.8659L82.8993 64.2025C84.5205 65.0311 85.452 66.9352 85.452 69.4262V79.7192C85.452 84.1504 82.4825 89.266 78.8284 91.129L70.3675 95.4367C69.4463 95.9051 68.5456 96.1417 67.6862 96.1417Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M76.4559 61.9492C77.0478 61.9492 77.5933 62.0779 78.0771 62.3249L82.6626 64.6615C84.0521 65.3717 84.9374 67.0443 84.9374 69.422V79.715C84.9374 83.9764 82.0965 88.881 78.5917 90.6669L70.1308 94.9744C69.261 95.417 68.4376 95.6281 67.6811 95.6281C67.0892 95.6281 66.5437 95.4994 66.0599 95.2524L61.4744 92.9158C60.0848 92.2056 59.1996 90.533 59.1996 88.1553V77.8622C59.1996 73.6009 62.0405 68.6964 65.5452 66.9105L74.0062 62.6028C74.8759 62.1602 75.6994 61.9492 76.4559 61.9492ZM76.4559 60.9199C75.5141 60.9199 74.5362 61.1772 73.5378 61.6816L65.0769 65.9893C61.2068 67.9604 58.1703 73.1738 58.1703 77.8571V88.1501C58.1703 90.8418 59.2047 92.9107 61.006 93.8319L65.5916 96.1685C66.2298 96.4927 66.9297 96.6574 67.6811 96.6574C68.6229 96.6574 69.6007 96.4 70.594 95.8957L79.0549 91.5881C82.9251 89.617 85.9615 84.4035 85.9615 79.7202V69.4271C85.9615 66.7355 84.9271 64.6666 83.1258 63.7454L78.5402 61.4088C77.902 61.0846 77.2021 60.9199 76.4508 60.9199H76.4559Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M67.6862 57.6625C67.0171 57.6625 66.3944 57.5185 65.8283 57.2303L61.2427 54.8937C59.6216 54.0651 58.6901 52.1661 58.6901 49.6701V39.377C58.6901 34.9459 61.6596 29.8301 65.3136 27.9671L73.7745 23.6595C74.6957 23.1912 75.5964 22.9492 76.4559 22.9492C77.1249 22.9492 77.7476 23.0934 78.3138 23.3816L82.8993 25.7181C84.5205 26.5467 85.452 28.4509 85.452 30.9418V41.2348C85.452 45.666 82.4825 50.7816 78.8284 52.6446L70.3675 56.9523C69.4463 57.4207 68.5456 57.6574 67.6862 57.6574V57.6625Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M76.4559 23.4688C77.0478 23.4688 77.5933 23.5974 78.0771 23.8444L82.6626 26.181C84.0521 26.8912 84.9374 28.5638 84.9374 30.9415V41.2346C84.9374 45.4959 82.0965 50.4005 78.5917 52.1864L70.1308 56.4941C69.261 56.9367 68.4376 57.1476 67.6811 57.1476C67.0892 57.1476 66.5437 57.0189 66.0599 56.7719L61.4744 54.4355C60.0848 53.7253 59.1996 52.0526 59.1996 49.6749V39.3819C59.1996 35.1206 62.0405 30.2159 65.5452 28.4301L74.0062 24.1224C74.8759 23.6798 75.6994 23.4688 76.4559 23.4688ZM76.4559 22.4395C75.5141 22.4395 74.5362 22.6968 73.5378 23.2011L65.0769 27.5088C61.2068 29.4799 58.1703 34.6934 58.1703 39.3767V49.6698C58.1703 52.3614 59.2047 54.4302 61.006 55.3515L65.5916 57.688C66.2298 58.0122 66.9297 58.1769 67.6811 58.1769C68.6229 58.1769 69.6007 57.9196 70.5992 57.4152L79.06 53.1076C82.9302 51.1365 85.9667 45.9231 85.9667 41.2397V30.9467C85.9667 28.255 84.9322 26.1861 83.1309 25.2649L78.5454 22.9283C77.9072 22.6041 77.2073 22.4395 76.4559 22.4395Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M113.665 50.4979C112.564 49.9369 111.144 49.9833 109.594 50.7758L101.133 55.0834C97.6287 56.8693 94.7878 61.7739 94.7878 66.0352V76.3283C94.7878 78.706 95.673 80.3837 97.0626 81.0888L92.4771 78.7524C91.0875 78.0422 90.2023 76.3696 90.2023 73.9919V63.6988C90.2023 59.4375 93.0431 54.5328 96.5479 52.747L105.009 48.4393C106.558 47.6519 107.978 47.6004 109.08 48.1614L113.665 50.4979Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M113.665 50.4973C115.055 51.2075 115.94 52.8801 115.94 55.2578V65.5509C115.94 69.8122 113.099 74.7169 109.594 76.5027L101.133 80.8104C99.5844 81.5978 98.1639 81.6492 97.0626 81.0882C95.673 80.378 94.7878 78.7054 94.7878 76.3277V66.0346C94.7878 61.7733 97.6287 56.8687 101.133 55.0828L109.594 50.7752C111.144 49.9878 112.564 49.9363 113.665 50.4973Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M113.665 12.0174C112.564 11.4565 111.144 11.5028 109.594 12.2954L101.133 16.6031C97.6287 18.3889 94.7878 23.2934 94.7878 27.5548V37.8478C94.7878 40.2255 95.673 41.9033 97.0626 42.6083L92.4771 40.2719C91.0875 39.5617 90.2023 37.8891 90.2023 35.5114V25.2183C90.2023 20.957 93.0431 16.0524 96.5479 14.2665L105.009 9.95883C106.558 9.17141 107.978 9.11992 109.08 9.68089L113.665 12.0174Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M113.665 12.0168C115.055 12.7271 115.94 14.3997 115.94 16.7774V27.0704C115.94 31.3317 113.099 36.2364 109.594 38.0222L101.133 42.3299C99.5844 43.1174 98.1639 43.1687 97.0626 42.6077C95.673 41.8975 94.7878 40.2249 94.7878 37.8472V27.5542C94.7878 23.2928 97.6287 18.3883 101.133 16.6025L109.594 12.2948C111.144 11.5073 112.564 11.4559 113.665 12.0168Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M113.665 12.0174C112.564 11.4565 111.144 11.5028 109.594 12.2954L101.133 16.6031C97.6287 18.3889 94.7878 23.2934 94.7878 27.5548V37.8478C94.7878 40.2255 95.673 41.9033 97.0626 42.6083L92.4771 40.2719C91.0875 39.5617 90.2023 37.8891 90.2023 35.5114V25.2183C90.2023 20.957 93.0431 16.0524 96.5479 14.2665L105.009 9.95883C106.558 9.17141 107.978 9.11992 109.08 9.68089L113.665 12.0174Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M113.665 12.0168C115.055 12.7271 115.94 14.3997 115.94 16.7774V27.0704C115.94 31.3317 113.099 36.2364 109.594 38.0222L101.133 42.3299C99.5844 43.1174 98.1639 43.1687 97.0626 42.6077C95.673 41.8975 94.7878 40.2249 94.7878 37.8472V27.5542C94.7878 23.2928 97.6287 18.3883 101.133 16.6025L109.594 12.2948C111.144 11.5073 112.564 11.4559 113.665 12.0168Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M82.6626 64.662C81.5612 64.101 80.1408 64.1473 78.5917 64.9399L70.1308 69.2475C66.626 71.0333 63.7852 75.938 63.7852 80.1993V90.4923C63.7852 92.87 64.6703 94.5478 66.0599 95.2529L61.4744 92.9163C60.0848 92.2061 59.1996 90.5335 59.1996 88.1558V77.8628C59.1996 73.6014 62.0404 68.6969 65.5452 66.9111L74.0061 62.6034C75.5553 61.8159 76.9757 61.7645 78.0771 62.3254L82.6626 64.662Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M82.6626 64.6614C84.0521 65.3716 84.9374 67.0442 84.9374 69.4219V79.7149C84.9374 83.9763 82.0965 88.8809 78.5917 90.6668L70.1308 94.9743C68.5817 95.7618 67.1612 95.8132 66.0599 95.2523C64.6703 94.5421 63.7852 92.8694 63.7852 90.4917V80.1987C63.7852 75.9374 66.626 71.0327 70.1308 69.2469L78.5917 64.9393C80.1408 64.1519 81.5612 64.1004 82.6626 64.6614Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M82.6626 26.1815C81.5612 25.6205 80.1408 25.6669 78.5917 26.4594L70.1308 30.767C66.626 32.5529 63.7852 37.4575 63.7852 41.7188V52.0119C63.7852 54.3896 64.6703 56.0673 66.0599 56.7724L61.4744 54.436C60.0848 53.7258 59.1996 52.0532 59.1996 49.6755V39.3824C59.1996 35.1211 62.0404 30.2164 65.5452 28.4306L74.0061 24.1229C75.5553 23.3355 76.9757 23.284 78.0771 23.845L82.6626 26.1815Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M82.6626 26.1809C84.0521 26.8911 84.9374 28.5637 84.9374 30.9414V41.2345C84.9374 45.4958 82.0965 50.4005 78.5917 52.1863L70.1308 56.494C68.5817 57.2814 67.1612 57.3328 66.0599 56.7718C64.6703 56.0616 63.7852 54.389 63.7852 52.0113V41.7182C63.7852 37.4569 66.626 32.5522 70.1308 30.7664L78.5917 26.4588C80.1408 25.6714 81.5612 25.6199 82.6626 26.1809Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M82.6626 26.1815C81.5612 25.6205 80.1408 25.6669 78.5917 26.4594L70.1308 30.767C66.626 32.5529 63.7852 37.4575 63.7852 41.7188V52.0119C63.7852 54.3896 64.6703 56.0673 66.0599 56.7724L61.4744 54.436C60.0848 53.7258 59.1996 52.0532 59.1996 49.6755V39.3824C59.1996 35.1211 62.0404 30.2164 65.5452 28.4306L74.0061 24.1229C75.5553 23.3355 76.9757 23.284 78.0771 23.845L82.6626 26.1815Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M82.6626 26.1809C84.0521 26.8911 84.9374 28.5637 84.9374 30.9414V41.2345C84.9374 45.4958 82.0965 50.4005 78.5917 52.1863L70.1308 56.494C68.5817 57.2814 67.1612 57.3328 66.0599 56.7718C64.6703 56.0616 63.7852 54.389 63.7852 52.0113V41.7182C63.7852 37.4569 66.626 32.5522 70.1308 30.7664L78.5917 26.4588C80.1408 25.6714 81.5612 25.6199 82.6626 26.1809Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.81131 65.6072C3.39602 64.8867 2.49537 63.1831 2.49537 60.7591C2.49537 56.4206 5.38771 51.4285 8.9491 49.6169L35.5515 36.0867C37.1264 35.2838 38.5673 35.2323 39.6893 35.8036L37.394 34.6353C36.272 34.0641 34.831 34.1156 33.2561 34.9184L6.65377 48.4486C3.08723 50.2654 0.200012 55.2574 0.200012 59.5908C0.200012 62.0148 1.10065 63.7184 2.51595 64.4389L4.81131 65.6072Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.8113 65.6069C5.93324 66.1782 7.37426 66.1267 8.94909 65.3238L35.5515 51.7936C39.1181 49.9769 42.0052 44.9848 42.0052 40.6514C42.0052 38.2274 41.1046 36.5238 39.6893 35.8033C38.5673 35.232 37.1264 35.2835 35.5515 36.0864L8.94909 49.6166C5.38255 51.4333 2.49536 56.4254 2.49536 60.7588C2.49536 63.1828 3.396 64.8864 4.8113 65.6069Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.6083 55.7262C12.2635 55.9011 11.9804 55.7056 11.9804 55.2836V52.2266C11.9804 52.0105 12.0525 51.7686 12.1811 51.5627C12.3046 51.362 12.4693 51.2127 12.6391 51.1458C14.2654 50.5128 15.5675 51.434 15.7322 53.3331C15.7477 53.5286 15.6962 53.7551 15.583 53.9661C15.4646 54.1822 15.2999 54.3572 15.1249 54.4447L12.6134 55.7262H12.6083ZM12.6083 51.9229V54.9593L15.1044 53.6882C14.9602 52.1751 13.9155 51.434 12.6083 51.9229Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M12.2892 59.7039C11.8415 59.9303 11.3886 60.0589 10.946 60.0538C10.0968 60.0538 9.43804 59.57 9.08808 58.7053C8.73812 57.8407 8.7484 56.693 9.10865 55.4785C9.45347 54.3051 10.0916 53.1935 10.9099 52.3443C11.0695 52.1796 11.2547 52.1745 11.3217 52.3289C11.3886 52.4832 11.3217 52.7508 11.157 52.9155C10.4931 53.6103 9.96812 54.5212 9.68506 55.4785C9.39171 56.4717 9.38658 57.4136 9.66964 58.1187C9.9527 58.8238 10.4931 59.2148 11.1879 59.22C12.6238 59.2251 14.2861 57.5577 14.8933 55.5042C14.9602 55.2778 15.1455 55.0925 15.3051 55.0925C15.4646 55.0925 15.5418 55.2778 15.4698 55.5094C14.9139 57.393 13.6324 59.0142 12.2841 59.6987L12.2892 59.7039Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M22.644 49.7053C22.469 49.7928 22.3249 49.695 22.3249 49.4789V47.9349C22.3249 47.7239 22.469 47.4768 22.644 47.3893C22.819 47.3018 22.9631 47.3997 22.9631 47.6159V49.1598C22.9631 49.3708 22.819 49.6178 22.644 49.7053Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M22.9579 51.8611L22.3249 52.1852C21.9749 52.3654 21.6919 52.1646 21.6919 51.7374V50.1935C21.6919 49.7663 21.9749 49.2774 22.3249 49.0973L22.9579 48.7731C23.3079 48.593 23.5909 48.7937 23.5909 49.2208V50.7648C23.5909 51.1919 23.3079 51.6809 22.9579 51.8611ZM22.3249 49.8693V51.4132L22.9579 51.0891V49.5451L22.3249 49.8693Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M22.644 52.7927C22.469 52.8802 22.3249 52.7824 22.3249 52.5663V51.7943C22.3249 51.5833 22.469 51.3362 22.644 51.2487C22.819 51.1612 22.9631 51.2591 22.9631 51.4753V52.2472C22.9631 52.4582 22.819 52.7052 22.644 52.7927Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M25.1761 46.8747C25.0011 46.9622 24.857 46.8644 24.857 46.6483V45.8763C24.857 45.6653 25.0011 45.4182 25.1761 45.3307C25.3511 45.2433 25.4952 45.3411 25.4952 45.5573V46.3293C25.4952 46.5403 25.3511 46.7872 25.1761 46.8747Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M25.4952 49.7978L24.8621 50.122C24.5122 50.3021 24.2291 50.1015 24.2291 49.6743V47.3634C24.2291 46.9362 24.5122 46.4474 24.8621 46.2672L25.4952 45.9431C25.8451 45.7629 26.1282 45.9636 26.1282 46.3907V48.7015C26.1282 49.1287 25.8451 49.6177 25.4952 49.7978ZM24.8621 47.0341V49.3448L25.4952 49.0207V46.7099L24.8621 47.0341Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M25.1761 51.1162C25.0011 51.2036 24.857 51.1059 24.857 50.8897V49.7318C24.857 49.5208 25.0011 49.2737 25.1761 49.1862C25.3511 49.0987 25.4952 49.1966 25.4952 49.4128V50.5707C25.4952 50.7817 25.3511 51.0287 25.1761 51.1162Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M26.4421 52.3961L21.3728 54.9796C20.8479 55.2472 20.4207 54.9437 20.4207 54.3055V48.1399C20.4207 47.9289 20.5648 47.6819 20.7398 47.5944C20.9148 47.5069 21.0589 47.6047 21.0589 47.8209V53.9864C21.0589 54.1974 21.203 54.3003 21.378 54.2128L26.4473 51.6292C26.6223 51.5417 26.7664 51.6396 26.7664 51.8558C26.7664 52.0719 26.6223 52.3137 26.4473 52.4012L26.4421 52.3961Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M35.8139 47.8108L31.0586 50.2348C30.5696 50.4869 30.1682 50.2039 30.1682 49.6069V43.8222C30.1682 43.6215 30.3021 43.3951 30.4668 43.3076C30.6314 43.2201 30.7652 43.3178 30.7652 43.5185V49.3032C30.7652 49.5039 30.899 49.5966 31.0637 49.5143L35.8191 47.0903C35.9838 47.008 36.1176 47.1006 36.1176 47.3013C36.1176 47.502 35.9838 47.7284 35.8191 47.8159L35.8139 47.8108Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M31.6556 48.1256C31.6556 48.1256 31.6092 48.1461 31.5835 48.1512C31.424 48.1821 31.3262 48.038 31.3674 47.8219L31.4034 47.6211C31.5835 46.6124 31.9232 44.734 32.8444 44.2657C33.3025 44.0341 33.5238 44.3273 33.6833 44.5383C33.8326 44.7339 33.9046 44.806 34.0281 44.7443C34.4759 44.5178 35.0369 42.8966 35.2273 41.8776C35.2685 41.6615 35.428 41.466 35.5875 41.4299C35.7471 41.3991 35.8449 41.5431 35.8037 41.7593C35.7985 41.7901 35.1964 44.8729 34.0281 45.4647C33.5701 45.6963 33.3488 45.403 33.1892 45.192C33.04 44.9964 32.968 44.9244 32.8444 44.9861C32.3915 45.2177 32.093 46.8749 31.9798 47.4976L31.9438 47.7035C31.9078 47.8837 31.7894 48.0587 31.6556 48.1256Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M143.232 28.2533C144.452 27.6306 146.027 27.6821 147.746 28.557C151.631 30.5384 154.781 35.9731 154.781 40.6976C154.781 43.3326 153.803 45.1957 152.259 45.9779L154.755 44.7068C156.294 43.9193 157.277 42.0614 157.277 39.4264C157.277 34.7019 154.127 29.2621 150.242 27.2858C148.523 26.4109 146.953 26.3594 145.728 26.9822L143.232 28.2533Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M143.232 28.2536C141.693 29.0411 140.71 30.899 140.71 33.534C140.71 38.2585 143.86 43.6984 147.746 45.6747C149.464 46.5496 151.034 46.601 152.259 45.9782C153.798 45.1908 154.781 43.3329 154.781 40.6979C154.781 35.9734 151.631 30.5336 147.746 28.5573C146.027 27.6824 144.457 27.6309 143.232 28.2536Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M143.973 35.9737C143.973 38.2227 145.471 40.8114 147.323 41.7532C149.176 42.6951 150.674 41.6348 150.674 39.3858C150.674 37.1368 149.176 34.5481 147.323 33.6062C145.476 32.6644 143.973 33.7247 143.973 35.9737ZM147.323 42.659C145.064 41.5062 143.232 38.3411 143.232 35.5929C143.232 32.8446 145.064 31.5476 147.323 32.6953C149.583 33.843 151.415 37.0134 151.415 39.7616C151.415 42.5098 149.583 43.8067 147.323 42.659Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M145.46 36.7301C145.46 37.9807 146.294 39.4166 147.318 39.9415C148.348 40.4665 149.181 39.8746 149.181 38.624C149.181 37.3734 148.348 35.9375 147.318 35.4125C146.289 34.8876 145.46 35.4795 145.46 36.7301ZM147.323 40.8473C145.882 40.1165 144.719 38.0991 144.719 36.3492C144.719 34.5994 145.888 33.7759 147.323 34.5067C148.759 35.2376 149.928 37.255 149.928 39.0048C149.928 40.7546 148.759 41.5781 147.323 40.8473Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.2959 1.74891C46.1739 1.17765 44.7329 1.22399 43.1529 2.03199C39.5864 3.84872 36.6992 8.8408 36.6992 13.1742C36.6992 15.593 37.5998 17.3018 39.0151 18.0223L36.7197 16.854C35.3045 16.1335 34.4038 14.4248 34.4038 12.0059C34.4038 7.66738 37.2962 2.6753 40.8576 0.863723C42.4324 0.0608651 43.8786 0.00937468 45.0005 0.580639L47.2959 1.74891Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.2959 1.74861C48.7112 2.46912 49.6118 4.17773 49.6118 6.59659C49.6118 10.9351 46.7195 15.9273 43.1581 17.7389C41.5832 18.5418 40.1371 18.5932 39.0152 18.022C37.5999 17.3015 36.6992 15.5927 36.6992 13.1739C36.6992 8.83535 39.5915 3.84327 43.1529 2.03169C44.7278 1.22883 46.174 1.17734 47.2959 1.74861Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M46.7915 8.91855C46.5908 9.02148 46.4262 8.90826 46.4262 8.66122V6.44819L44.6043 7.37459C44.4036 7.47752 44.2389 7.3643 44.2389 7.11726C44.2389 6.87023 44.4036 6.59233 44.6043 6.4894L46.7864 5.3778C46.9871 5.27487 47.1518 5.38809 47.1518 5.63513V8.29069C47.1518 8.53772 46.9871 8.81562 46.7864 8.91855H46.7915Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M39.5144 14.4006C39.4218 14.447 39.3291 14.4521 39.2571 14.4006C39.113 14.2977 39.113 14.0198 39.2571 13.7728L41.6245 9.69149C41.7686 9.44446 41.995 9.33123 42.1391 9.42901L43.7037 10.5356L46.5394 5.64124C46.6835 5.39421 46.91 5.28098 47.0541 5.37876C47.1982 5.48169 47.1982 5.75959 47.0541 6.00662L43.961 11.3487C43.8169 11.5957 43.5904 11.7089 43.4463 11.6111L41.8818 10.5047L39.7717 14.1433C39.6997 14.2668 39.607 14.3543 39.5144 14.4058V14.4006Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx b/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx
new file mode 100644
index 0000000..dc3ddbf
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx
@@ -0,0 +1,274 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function DraftVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="175"
+      viewBox="0 0 162 175"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M13.9752 140.966C13.9752 142.915 15.4347 144.86 18.3486 146.35L55.8679 165.468C61.7008 168.439 71.1541 168.439 76.987 165.468L155.827 125.298C158.741 123.813 160.2 121.868 160.2 119.919V126.144C160.2 128.093 158.741 130.038 155.827 131.523L76.987 171.693C71.1541 174.664 61.7008 174.664 55.8679 171.693L18.3486 152.575C15.4295 151.09 13.9752 149.14 13.9752 147.191V140.966Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13.9752 140.966C13.9752 139.016 15.4347 137.072 18.3486 135.587L97.1882 95.4164C103.021 92.4458 112.474 92.4458 118.307 95.4164L155.827 114.535C158.746 116.02 160.2 117.969 160.2 119.919C160.2 121.868 158.741 123.812 155.827 125.298L76.987 165.468C71.1541 168.439 61.7008 168.439 55.8679 165.468L18.3486 146.35C15.4295 144.865 13.9752 142.915 13.9752 140.966Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M13.9752 121.301C13.9752 123.25 15.4347 125.195 18.3486 126.685L55.8679 145.803C61.7008 148.774 71.1541 148.774 76.987 145.803L155.827 105.633C158.741 104.148 160.2 102.203 160.2 100.254V106.479C160.2 108.428 158.741 110.373 155.827 111.858L76.987 152.028C71.1541 154.999 61.7008 154.999 55.8679 152.028L18.3486 132.91C15.4295 131.425 13.9752 129.475 13.9752 127.526V121.301Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13.9752 121.301C13.9752 119.351 15.4347 117.407 18.3486 115.922L97.1882 75.7514C103.021 72.7808 112.474 72.7808 118.307 75.7514L155.827 94.8695C158.746 96.3548 160.2 98.3042 160.2 100.254C160.2 102.203 158.741 104.147 155.827 105.633L76.987 145.803C71.1541 148.774 61.7008 148.774 55.8679 145.803L18.3486 126.685C15.4295 125.2 13.9752 123.25 13.9752 121.301Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M13.9752 101.636C13.9752 103.585 15.4347 105.53 18.3486 107.02L55.8679 126.138C61.7008 129.109 71.1541 129.109 76.987 126.138L155.827 85.9679C158.741 84.4826 160.2 82.5383 160.2 80.5889V86.8137C160.2 88.7632 158.741 90.7075 155.827 92.1928L76.987 132.363C71.1541 135.334 61.7008 135.334 55.8679 132.363L18.3486 113.245C15.4295 111.76 13.9752 109.81 13.9752 107.861V101.636Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.9752 101.636C13.9752 99.6861 15.4347 97.7418 18.3486 96.2565L97.1882 56.0864C103.021 53.1157 112.474 53.1157 118.307 56.0864L155.827 75.2045C158.746 76.6898 160.2 78.6392 160.2 80.5887C160.2 82.5381 158.741 84.4824 155.827 85.9677L76.987 126.138C71.1541 129.109 61.7008 129.109 55.8679 126.138L18.3486 107.02C15.4295 105.535 13.9752 103.585 13.9752 101.636Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M71.5151 94.7146C70.6126 94.7146 69.7668 94.5186 69.0087 94.1318L64.7023 91.9348C62.5002 90.8105 61.2366 88.2112 61.2366 84.8022V52.2597C61.2366 46.1225 65.3521 39.0312 70.4063 36.4526L97.1521 22.827C98.4156 22.1823 99.6482 21.8574 100.819 21.8574C101.721 21.8574 102.567 22.0534 103.325 22.4402L107.632 24.6372C109.834 25.7615 111.097 28.3608 111.097 31.7697V64.3123C111.097 70.4495 106.982 77.5408 101.928 80.1194L75.182 93.745C73.9184 94.3897 72.6858 94.7146 71.5151 94.7146Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M100.814 22.3733C101.644 22.3733 102.407 22.5538 103.088 22.8993L107.394 25.0963C109.339 26.0865 110.582 28.4382 110.582 31.7699V64.3124C110.582 70.2897 106.6 77.1592 101.69 79.6605L74.9448 93.2861C73.7276 93.905 72.5672 94.1989 71.5151 94.1989C70.6848 94.1989 69.9216 94.0184 69.2408 93.6729L64.9344 91.4759C62.985 90.4857 61.7472 88.134 61.7472 84.8023V52.2598C61.7472 46.2825 65.7286 39.413 70.6384 36.9117L97.3841 23.2861C98.6013 22.6672 99.7565 22.3733 100.814 22.3733ZM100.814 21.3418C99.5605 21.3418 98.2506 21.6873 96.9148 22.3681L70.1691 35.9937C64.9551 38.6497 60.7158 45.9473 60.7158 52.2598V84.8023C60.7158 88.4125 62.0825 91.1819 64.4651 92.3939L68.7715 94.5909C69.6069 95.0138 70.5249 95.2304 71.5151 95.2304C72.7684 95.2304 74.0783 94.8849 75.4141 94.2041L102.16 80.5785C107.374 77.9225 111.613 70.6249 111.613 64.3124V31.7699C111.613 28.1597 110.246 25.3903 107.864 24.1783L103.557 21.9813C102.722 21.5584 101.804 21.3418 100.814 21.3418Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M107.394 25.0964C105.852 24.3074 103.862 24.3744 101.69 25.4832L74.9447 39.1088C70.035 41.6101 66.0535 48.4796 66.0535 54.4569V86.9995C66.0535 90.3311 67.2913 92.6828 69.2408 93.673L64.9344 91.476C62.9849 90.4858 61.7472 88.1341 61.7472 84.8025V52.2599C61.7472 46.2826 65.7286 39.4131 70.6384 36.9118L97.3841 23.2862C99.5553 22.1774 101.546 22.1155 103.088 22.8994L107.394 25.0964Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M107.394 25.0957C109.344 26.0859 110.582 28.4376 110.582 31.7693V64.3118C110.582 70.2891 106.6 77.1586 101.69 79.6599L74.9447 93.2855C72.7735 94.3943 70.7828 94.4562 69.2408 93.6723C67.2913 92.6821 66.0535 90.3304 66.0535 86.9988V54.4562C66.0535 48.4789 70.035 41.6094 74.9447 39.1081L101.69 25.4825C103.862 24.3737 105.852 24.3118 107.394 25.0957Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M124.697 22.6885C124.62 22.6885 124.537 22.6679 124.465 22.6318L119.643 20.1769C119.643 20.1769 119.602 20.1511 119.581 20.1408L111.237 14.2357C111.02 14.081 110.953 13.787 111.087 13.5549L113.686 9.06291C114.852 7.05156 116.409 5.47859 118.07 4.63279C118.931 4.19442 119.777 3.97266 120.582 3.97266C121.211 3.97266 121.799 4.1119 122.33 4.38008L127.152 6.83496C127.302 6.91232 127.451 7.00515 127.596 7.10314C128.849 7.99019 129.54 9.63021 129.54 11.7241C129.54 13.8179 128.9 15.9376 127.74 17.9438L125.141 22.4358C125.048 22.6008 124.873 22.6936 124.692 22.6936L124.697 22.6885Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M120.582 4.48849C121.128 4.48849 121.639 4.60711 122.093 4.83919L126.915 7.29406C127.049 7.36111 127.173 7.43846 127.296 7.52614C128.405 8.31005 129.024 9.82114 129.024 11.7242C129.024 13.6272 128.4 15.7727 127.296 17.6809L124.697 22.1729L119.875 19.718L111.531 13.8129L114.13 9.32088C115.239 7.41268 116.739 5.89127 118.302 5.09189C119.091 4.68962 119.865 4.48849 120.582 4.48849ZM120.582 3.45703C119.689 3.45703 118.766 3.69942 117.833 4.1739C116.079 5.06611 114.45 6.71128 113.238 8.80515L110.638 13.2972C110.37 13.7613 110.499 14.3492 110.938 14.6587L119.282 20.5638C119.323 20.5947 119.365 20.6205 119.411 20.6411L124.233 23.096C124.383 23.1734 124.542 23.2095 124.702 23.2095C125.058 23.2095 125.404 23.0238 125.595 22.6938L128.194 18.2017C129.395 16.1234 130.061 13.8232 130.061 11.7242C130.061 9.46013 129.292 7.67054 127.895 6.6855C127.73 6.56688 127.559 6.46373 127.384 6.37606L122.562 3.92119C121.959 3.61691 121.293 3.45703 120.582 3.45703Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M91.2727 71.3378C91.0303 71.3378 90.8086 71.2811 90.6023 71.1728C90.592 71.1728 90.5455 71.1418 90.4991 71.116L85.6771 68.656C85.6771 68.656 85.6358 68.6302 85.6152 68.6199C85.3006 68.3981 85.0685 68.032 84.9705 67.5884C84.8777 67.2016 84.8828 66.7375 84.986 66.263L86.7859 58.001C87.3583 55.3708 88.4053 52.7045 89.8081 50.2805L108.699 17.671C108.792 17.5059 108.967 17.4131 109.148 17.4131C109.225 17.4131 109.308 17.4337 109.38 17.4698L114.202 19.9298C114.202 19.9298 114.243 19.9556 114.264 19.9659L122.608 25.8659C122.825 26.0206 122.892 26.3146 122.758 26.5467L115.729 38.6921L103.872 59.1562C102.459 61.5905 100.705 63.7617 98.7869 65.4327L92.7477 70.6983C92.3867 71.0077 91.9947 71.214 91.6182 71.2965C91.4996 71.3223 91.3862 71.3326 91.2727 71.3326V71.3378Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M109.143 17.9328L113.965 20.3929L122.309 26.2928L115.28 38.4382L110.546 46.6074L103.423 58.9024C102.036 61.2954 100.324 63.4099 98.4466 65.0499L92.4074 70.3155C92.1134 70.5682 91.804 70.7332 91.51 70.7951C91.4275 70.8106 91.3449 70.8209 91.2676 70.8209C91.1129 70.8209 90.9685 70.7848 90.8396 70.7178C90.8035 70.7023 90.7673 70.6765 90.7312 70.6559L85.9091 68.1959C85.6977 68.0463 85.543 67.7936 85.4708 67.4738C85.3934 67.1541 85.3986 66.7724 85.4863 66.3753L87.2862 58.1133C87.8483 55.5398 88.8643 52.9354 90.2516 50.5424L109.143 17.9328ZM109.143 16.9014C108.787 16.9014 108.441 17.087 108.251 17.4171L89.3594 50.0267C87.9308 52.4919 86.8633 55.2149 86.2805 57.8967L84.4806 66.1587C84.362 66.7054 84.3568 67.2469 84.4703 67.7214C84.594 68.2681 84.8932 68.7425 85.3161 69.0417C85.3573 69.0726 85.3986 69.0984 85.445 69.119L90.2361 71.5636C90.2722 71.5842 90.3238 71.6203 90.3908 71.6512C90.6642 71.7905 90.9582 71.8575 91.2727 71.8575C91.4223 71.8575 91.5719 71.8421 91.7214 71.8111C92.1856 71.7131 92.6549 71.4707 93.083 71.1046L99.1273 65.8338C101.087 64.1216 102.882 61.9091 104.321 59.4284L111.443 47.1335L116.177 38.9643L123.207 26.8189C123.475 26.3547 123.346 25.7668 122.908 25.4625L114.563 19.5625C114.522 19.5316 114.481 19.511 114.434 19.4852L109.612 17.0251C109.463 16.9478 109.303 16.9117 109.143 16.9117V16.9014Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M126.915 7.29419C125.858 6.75268 124.517 6.84035 123.124 7.5469C121.556 8.34628 120.056 9.86769 118.952 11.7759L116.353 16.2679L111.531 13.813L114.13 9.32101C115.239 7.41281 116.739 5.89141 118.302 5.09202C119.695 4.38032 121.035 4.2978 122.093 4.83932L126.915 7.29419Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M116.353 16.2725L124.697 22.1725L119.875 19.7176L111.531 13.8125L116.353 16.2725Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M126.915 7.29342C127.049 7.36046 127.173 7.43782 127.296 7.5255C128.405 8.30941 129.024 9.82049 129.024 11.7235C129.024 13.6266 128.4 15.772 127.296 17.6802L124.697 22.1722L116.353 16.2671L118.952 11.7751C120.061 9.86691 121.562 8.34551 123.124 7.54613C124.517 6.83442 125.858 6.7519 126.915 7.29342Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M113.965 20.3885L95.0788 52.9981C93.6915 55.3911 92.6704 57.9955 92.1082 60.569L90.3083 68.831C90.2206 69.2281 90.2155 69.6097 90.2877 69.9295C90.3599 70.2492 90.5146 70.5019 90.7312 70.6515L85.9091 68.1966C85.6925 68.0419 85.543 67.7944 85.4656 67.4746C85.3934 67.1549 85.3986 66.7732 85.4863 66.3761L87.2862 58.1141C87.8483 55.5406 88.8643 52.9362 90.2568 50.5432L109.143 17.9336L113.965 20.3885Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M113.965 20.3877L122.309 26.2928L103.423 58.9024C102.036 61.3005 100.324 63.4099 98.4466 65.0499L92.4073 70.3155C92.1185 70.5682 91.8091 70.7332 91.51 70.7951C91.2624 70.8467 91.0355 70.8209 90.8395 70.7178C90.8034 70.6971 90.7673 70.6765 90.7312 70.6507C90.5146 70.496 90.3651 70.2485 90.2877 69.9287C90.2155 69.6089 90.2206 69.2273 90.3083 68.8302L92.1082 60.5682C92.6704 57.9947 93.6864 55.3903 95.0788 52.9973L113.965 20.3877Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M146.136 37.3352C147.26 36.7627 148.704 36.8091 150.288 37.6188C153.862 39.4393 156.755 44.4419 156.755 48.7844C156.755 51.2083 155.852 52.9205 154.434 53.6425L156.734 52.4718C158.153 51.7498 159.055 50.0376 159.055 47.6137C159.055 43.2661 156.157 38.2635 152.588 36.4481C151.01 35.6436 149.561 35.592 148.436 36.1645L146.136 37.3352Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M146.136 37.3344C144.718 38.0564 143.815 39.7686 143.815 42.1926C143.815 46.5402 146.714 51.5427 150.283 53.3581C151.861 54.1626 153.31 54.2142 154.434 53.6418C155.852 52.9197 156.755 51.2075 156.755 48.7836C156.755 44.436 153.857 39.4334 150.288 37.618C148.71 36.8135 147.26 36.7619 146.136 37.3344Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M152.067 43.6067C151.886 43.2972 151.644 43.0497 151.386 42.9207C151.133 42.7918 150.886 42.7918 150.705 42.9207L147.967 44.8547C147.668 45.0662 147.498 45.4736 147.498 45.9893C147.498 46.5051 147.668 47.0827 147.967 47.6036C148.266 48.1193 148.673 48.5319 149.096 48.7485C149.519 48.9651 149.927 48.9651 150.226 48.7536L153.16 46.6804C153.284 46.5927 153.485 46.6959 153.614 46.9125C153.738 47.1291 153.738 47.3715 153.614 47.4643L150.68 49.5376C150.262 49.8367 149.689 49.8315 149.096 49.5272C148.503 49.223 147.936 48.6505 147.513 47.9233C147.095 47.2013 146.858 46.3864 146.858 45.6644C146.858 44.9424 147.095 44.3699 147.513 44.076L150.246 42.142C150.546 41.9305 150.953 41.9305 151.376 42.142C151.799 42.3586 152.206 42.7712 152.505 43.2869C152.804 43.8026 152.975 44.3854 152.975 44.9011C152.975 45.4169 152.804 45.8243 152.505 46.0409L149.762 47.9749C149.581 48.1038 149.339 48.0987 149.086 47.9749C148.833 47.8511 148.586 47.5984 148.41 47.289C148.235 46.9795 148.132 46.6288 148.132 46.3194C148.132 46.01 148.235 45.7676 148.41 45.6386L151.123 43.7253C151.247 43.6376 151.448 43.7407 151.577 43.9574C151.701 44.174 151.701 44.4164 151.577 44.504L148.864 46.4174C148.802 46.4586 148.771 46.5412 148.771 46.6443C148.771 46.7475 148.808 46.8609 148.864 46.9692C148.926 47.0724 149.004 47.1549 149.091 47.1961C149.179 47.2374 149.256 47.2374 149.318 47.1961L152.062 45.2622C152.242 45.1332 152.34 44.8908 152.34 44.5814C152.34 44.272 152.237 43.9213 152.057 43.6118L152.067 43.6067Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.0262 37.4999C22.4486 37.206 22.0825 36.5097 22.0825 35.5195V22.8738C22.0825 21.0997 23.2635 19.0574 24.723 18.3148L57.446 1.64122C58.0907 1.31115 58.6838 1.29569 59.1428 1.52776L56.8426 0.357054C56.3836 0.124976 55.7905 0.140449 55.1459 0.470516L22.4228 17.1441C20.9633 17.8867 19.7823 19.929 19.7823 21.7031V34.3488C19.7823 35.339 20.1485 36.0353 20.7261 36.3292L23.0262 37.4999Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M23.0262 37.4991C23.4852 37.7312 24.0783 37.7157 24.723 37.3857L57.4461 20.7121C58.9056 19.9695 60.0866 17.9272 60.0866 16.1531V3.50738C60.0866 2.51718 59.7204 1.82094 59.1428 1.52698C58.6838 1.2949 58.0907 1.31037 57.4461 1.64044L24.723 18.314C23.2635 19.0566 22.0825 21.0989 22.0825 22.873V35.5187C22.0825 36.5089 22.4486 37.2052 23.0262 37.4991Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M46.6982 15.1994L39.1067 19.0674C38.4826 19.3872 37.9772 19.0262 37.9772 18.268C37.9772 17.5099 38.4826 16.6332 39.1067 16.3186L46.6982 12.4506C47.3222 12.1308 47.8277 12.4919 47.8277 13.25C47.8277 14.0081 47.3222 14.8848 46.6982 15.1994Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M50.2052 19.7798L39.5605 25.2053C38.6838 25.6488 37.9772 25.1485 37.9772 24.0861C37.9772 23.0186 38.6889 21.7963 39.5605 21.3528L50.2052 15.9273C51.0819 15.4838 51.7885 15.984 51.7885 17.0464C51.7885 18.114 51.0768 19.3363 50.2052 19.7798Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M30.659 23.2715C30.726 23.4211 30.8704 23.4727 31.0406 23.3902C31.2727 23.2715 31.4635 22.9415 31.4635 22.6527V22.1163C31.4635 21.941 31.4016 21.812 31.2882 21.7708C31.1747 21.7295 31.0251 21.7811 30.8962 21.91L28.1628 24.6176C28.003 24.7775 27.8947 25.0302 27.8947 25.2468V28.9291C27.8947 29.1148 27.972 29.2437 28.0958 29.2746C28.2196 29.3056 28.3794 29.2334 28.5084 29.0787L28.9003 28.6248C29.1066 28.3876 29.184 28.0266 29.0809 27.8254C29.0087 27.6913 28.8797 27.6604 28.7353 27.7171V25.1746L30.6641 23.2664L30.659 23.2715Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.9778 22.5489C29.0448 22.6984 29.1892 22.75 29.3594 22.6675C29.5915 22.5489 29.7823 22.2188 29.7823 21.93V21.3936C29.7823 21.2183 29.7204 21.0894 29.607 21.0481C29.4935 21.0068 29.3439 21.0584 29.215 21.1874L26.4816 23.8949C26.3218 24.0548 26.2134 24.3075 26.2134 24.5241V28.2064C26.2134 28.3921 26.2908 28.521 26.4146 28.552C26.5384 28.5829 26.6982 28.5107 26.8272 28.356L27.2191 27.9022C27.4254 27.6649 27.5028 27.3039 27.3996 27.1028C27.3274 26.9687 27.1985 26.9377 27.0541 26.9945V24.4519L28.9829 22.5437L28.9778 22.5489Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M33.3305 26.4116C33.3305 26.6282 33.2222 26.8809 33.0623 27.0408L30.3289 29.7484C30.2 29.8773 30.0556 29.9289 29.9421 29.8876C29.8287 29.8464 29.7616 29.7226 29.7616 29.5473V25.8649C29.7616 25.6483 29.8699 25.3956 30.0298 25.2358L32.7631 22.5282C32.8921 22.3992 33.0365 22.3477 33.1499 22.3889C33.2634 22.4302 33.3305 22.5591 33.3305 22.7293V26.4168V26.4116ZM32.4898 23.9206L30.5971 25.7979V28.3559L32.4898 26.4838V23.9258V23.9206Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.82095 81.0229C3.40269 80.3009 2.50016 78.5938 2.50016 76.1647C2.50016 71.8171 5.39857 66.8145 8.96742 64.9991L32.8973 52.8073C34.4754 52.0028 35.9194 51.9512 37.0437 52.5236L34.7436 51.3529C33.6193 50.7805 32.1752 50.832 30.5971 51.6366L6.66727 63.8284C3.09326 65.649 0.200012 70.6515 0.200012 74.994C0.200012 77.4231 1.10254 79.1301 2.5208 79.8522L4.82095 81.0229Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.82097 81.0221C5.94526 81.5945 7.38931 81.543 8.96744 80.7384L32.8973 68.5466C36.4713 66.7261 39.3645 61.7235 39.3645 57.381C39.3645 54.9519 38.462 53.2449 37.0438 52.5229C35.9195 51.9504 34.4754 52.002 32.8973 52.8065L8.96744 64.9984C5.39343 66.8189 2.50018 71.8215 2.50018 76.1639C2.50018 78.593 3.40271 80.3001 4.82097 81.0221Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M29.8699 64.9313L21.1129 69.3923C20.3908 69.7585 19.808 69.3459 19.808 68.4692C19.808 67.5924 20.3908 66.5867 21.1129 66.2206L29.8699 61.7595C30.592 61.3933 31.1747 61.8059 31.1747 62.6827C31.1747 63.5594 30.592 64.5651 29.8699 64.9313Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.07576 73.5138C8.82821 73.947 8.68382 74.4267 8.68382 74.8599C8.68382 75.2879 8.82305 75.6283 9.07576 75.8088C9.32331 75.9842 9.6637 75.9842 10.0196 75.8088C10.3754 75.6335 10.7106 75.2879 10.9633 74.8547L11.4326 74.0399C11.5616 73.8129 11.773 73.7098 11.902 73.7975C12.0309 73.8903 12.0309 74.1482 11.902 74.3699L11.4326 75.1848C11.0562 75.8294 10.5508 76.3452 10.0196 76.6185C9.48835 76.8867 8.98293 76.8919 8.60644 76.6237C8.22996 76.3607 8.02368 75.8501 8.02368 75.2054C8.02368 74.5608 8.23512 73.8336 8.60644 73.1889L9.07576 72.3741C9.20469 72.1471 9.41614 72.044 9.54508 72.1317C9.67401 72.2193 9.67401 72.4824 9.54508 72.7041L9.07576 73.519V73.5138Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.4889 70.5062C10.3599 70.4134 10.3599 70.1555 10.4889 69.9337L10.9582 69.1189C11.3346 68.4742 11.8401 67.9585 12.3713 67.6851C12.9025 67.4118 13.4079 67.4118 13.7844 67.68C14.1608 67.943 14.3671 68.4536 14.3671 69.0982C14.3671 69.7429 14.1557 70.4701 13.7844 71.1148L13.315 71.9296C13.1861 72.1565 12.9747 72.2597 12.8457 72.172C12.7168 72.0792 12.7168 71.8213 12.8457 71.5995L13.315 70.7847C13.5626 70.3515 13.707 69.8718 13.707 69.4386C13.707 69.0054 13.5677 68.6702 13.315 68.4897C13.0675 68.3143 12.7271 68.3143 12.3713 68.4897C12.0206 68.6702 11.6802 69.0106 11.4275 69.4438L10.9582 70.2586C10.8292 70.4856 10.6178 70.5887 10.4889 70.501V70.5062Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.0196 74.179C9.89062 74.0862 9.89062 73.8283 10.0196 73.6066L11.902 70.3575C12.0309 70.1305 12.2423 70.0274 12.3713 70.1151C12.5002 70.2079 12.5002 70.4658 12.3713 70.6875L10.4889 73.9366C10.3599 74.1635 10.1485 74.2667 10.0196 74.179Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx b/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx
new file mode 100644
index 0000000..ec22faf
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx
@@ -0,0 +1,232 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function EpicVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="166"
+      viewBox="0 0 162 166"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M145.537 35.1375C146.08 34.862 146.424 34.2094 146.424 33.2812V21.4279C146.424 19.765 145.314 17.8506 143.941 17.1545L113.176 1.5258C112.57 1.21641 112.012 1.20189 111.581 1.41943L113.743 0.322073C114.175 0.104537 114.732 0.119055 115.338 0.428439L146.104 16.0572C147.476 16.7533 148.586 18.6676 148.586 20.3306V32.1839C148.586 33.112 148.242 33.7646 147.699 34.0402L145.537 35.1375Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M145.537 35.1375C145.105 35.355 144.547 35.3406 143.941 35.0312L113.176 19.4024C111.804 18.7063 110.693 16.792 110.693 15.129V3.27574C110.693 2.34759 111.038 1.69497 111.581 1.41942C112.012 1.20189 112.57 1.21641 113.176 1.52579L143.941 17.1545C145.314 17.8506 146.424 19.765 146.424 21.4279V33.2812C146.424 34.2093 146.08 34.862 145.537 35.1375Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M123.809 14.5538L130.947 18.1794C131.533 18.4791 132.008 18.1407 132.008 17.4301C132.008 16.7195 131.533 15.8977 130.947 15.6028L123.809 11.9772C123.223 11.6775 122.747 12.0159 122.747 12.7265C122.747 13.4371 123.223 14.2589 123.809 14.5538Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M124.318 20.5094L134.326 25.5949C135.151 26.0107 135.815 25.5418 135.815 24.5459C135.815 23.5453 135.146 22.3996 134.326 21.9838L124.318 16.8983C123.494 16.4826 122.83 16.9515 122.83 17.9473C122.83 18.948 123.499 20.0937 124.318 20.5094Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M117.816 10.875C117.865 11.0345 117.976 11.1892 118.102 11.2521C118.277 11.3439 118.422 11.2375 118.422 11.02V10.6188C118.422 10.4883 118.374 10.3384 118.286 10.2224C118.199 10.1064 118.093 10.0338 117.991 10.029L115.93 9.97101C115.809 9.97101 115.726 10.0725 115.726 10.2369V13.002C115.726 13.1422 115.784 13.2969 115.877 13.4177C115.974 13.5386 116.09 13.6014 116.187 13.5869L116.483 13.5434C116.638 13.5193 116.696 13.3114 116.618 13.0794C116.565 12.9247 116.468 12.799 116.361 12.7361V10.8267L117.811 10.8653L117.816 10.875Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M116.551 9.04772C116.599 9.20724 116.711 9.36192 116.837 9.42476C117.011 9.51661 117.157 9.41027 117.157 9.19274V8.79149C117.157 8.66097 117.108 8.51111 117.021 8.39509C116.934 8.27907 116.827 8.20658 116.725 8.20174L114.664 8.14371C114.543 8.14371 114.461 8.24525 114.461 8.40961V11.1747C114.461 11.3149 114.519 11.4696 114.611 11.5904C114.708 11.7113 114.824 11.7742 114.921 11.7597L115.217 11.7161C115.372 11.692 115.431 11.4841 115.353 11.2521C115.3 11.0974 115.203 10.9717 115.096 10.9088V8.99936L116.546 9.03804L116.551 9.04772Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M119.693 12.1174C119.605 11.9965 119.499 11.924 119.402 11.924L117.341 11.866C117.22 11.866 117.137 11.9724 117.137 12.1271V14.897C117.137 15.0275 117.186 15.1726 117.273 15.2886C117.365 15.4094 117.472 15.4819 117.569 15.4819L119.625 15.54C119.751 15.5496 119.833 15.4433 119.833 15.2789V12.5089C119.833 12.3784 119.785 12.2334 119.693 12.1174ZM119.198 14.6891L117.772 14.6456V12.7265L119.198 12.77V14.6891Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <g opacity="0.2">
+        <path
+          d="M7.0992 133.285C7.0992 135.112 8.4714 136.935 11.211 138.332L46.4857 156.252C51.9697 159.036 60.8575 159.036 66.3414 156.252L140.465 118.599C143.204 117.207 144.576 115.384 144.576 113.557V119.392C144.576 121.219 143.204 123.041 140.465 124.434L66.3414 162.087C60.8575 164.871 51.9697 164.871 46.4857 162.087L11.211 144.167C8.46655 142.774 7.0992 140.947 7.0992 139.12V133.285Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M7.09919 133.285C7.09919 131.458 8.47139 129.635 11.2109 128.243L85.3341 90.5899C90.818 87.8054 99.7058 87.8054 105.19 90.5899L140.465 108.51C143.209 109.902 144.576 111.73 144.576 113.557C144.576 115.384 143.204 117.207 140.465 118.599L66.3414 156.252C60.8575 159.036 51.9697 159.036 46.4857 156.252L11.2109 138.332C8.46654 136.94 7.09919 135.112 7.09919 133.285Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M7.0992 114.852C7.0992 116.68 8.4714 118.502 11.211 119.899L46.4857 137.819C51.9697 140.604 60.8575 140.604 66.3414 137.819L140.465 100.166C143.204 98.774 144.576 96.9516 144.576 95.1243V100.959C144.576 102.786 143.204 104.609 140.465 106.001L66.3414 143.654C60.8575 146.439 51.9697 146.439 46.4857 143.654L11.211 125.734C8.46655 124.342 7.0992 122.514 7.0992 120.687V114.852Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M7.09919 114.852C7.09919 113.025 8.47139 111.203 11.2109 109.81L85.3341 72.1573C90.818 69.3729 99.7058 69.3729 105.19 72.1573L140.465 90.0775C143.209 91.4697 144.576 93.297 144.576 95.1243C144.576 96.9516 143.204 98.7741 140.465 100.166L66.3414 137.819C60.8575 140.604 51.9697 140.604 46.4857 137.819L11.2109 119.899C8.46654 118.507 7.09919 116.68 7.09919 114.852Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M7.09919 96.415C7.09919 98.2423 8.47139 100.065 11.2109 101.462L46.4857 119.382C51.9697 122.166 60.8575 122.166 66.3414 119.382L140.465 81.7289C143.204 80.3367 144.576 78.5142 144.576 76.6869V82.5217C144.576 84.349 143.204 86.1715 140.465 87.5637L66.3414 125.217C60.8575 128.001 51.9697 128.001 46.4857 125.217L11.2109 107.297C8.46654 105.904 7.09919 104.077 7.09919 102.25V96.415Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.09918 96.415C7.09918 94.5877 8.47138 92.7652 11.2109 91.373L85.3341 53.7199C90.818 50.9355 99.7058 50.9355 105.19 53.7199L140.465 71.6401C143.209 73.0323 144.576 74.8596 144.576 76.6869C144.576 78.5142 143.204 80.3367 140.465 81.7289L66.3414 119.382C60.8575 122.166 51.9697 122.166 46.4857 119.382L11.2109 101.462C8.46653 100.07 7.09918 98.2423 7.09918 96.415Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M44.7984 105.75C44.4445 105.75 44.1147 105.672 43.8141 105.518L39.4939 103.323C38.5871 102.864 38.0683 101.795 38.0683 100.403V84.2668C38.0683 84.1991 38.0829 84.1266 38.112 84.0638L58.3168 40.3197C59.7617 37.7141 61.1145 36.172 62.5789 35.4275C63.1898 35.1182 63.8056 34.9586 64.4068 34.9586C65.0081 34.9586 65.5754 35.1085 66.1475 35.3985L70.4678 37.5933C70.7927 37.7576 71.1127 37.9655 71.4521 38.2362C71.4909 38.2652 71.52 38.299 71.5491 38.3377L85.5814 58.2398L91.4339 48.9003C92.6121 46.7781 94.2074 45.1248 95.9093 44.2595C96.7384 43.8389 97.5579 43.6262 98.3434 43.6262C98.9737 43.6262 99.5604 43.7616 100.094 44.0371L104.414 46.2319C104.627 46.343 104.836 46.4736 105.03 46.6234L115.901 55.1508C116.017 55.2427 116.085 55.3829 116.085 55.5327V65.6651C116.085 66.7914 115.75 68.0193 115.135 69.1215C114.519 70.2333 113.685 71.0986 112.788 71.553L46.1221 105.421C45.6712 105.648 45.2251 105.764 44.7936 105.764L44.7984 105.75Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M64.4068 35.4372C64.9499 35.4372 65.4542 35.5822 65.9293 35.824L70.2496 38.0187C70.5648 38.1782 70.8654 38.3812 71.1563 38.6084L85.6057 59.1052L91.846 49.1468C92.9806 47.102 94.5225 45.4971 96.1275 44.6801C96.8936 44.2934 97.6451 44.1 98.3434 44.1C98.8913 44.1 99.4101 44.2209 99.8756 44.4577L104.196 46.6524C104.38 46.7491 104.559 46.8603 104.729 46.9957L115.6 55.523V65.6554C115.6 66.6947 115.285 67.8501 114.713 68.8798C114.146 69.8998 113.375 70.7022 112.57 71.1131L45.9039 104.981C45.5112 105.179 45.1378 105.271 44.7936 105.271C44.5172 105.271 44.2602 105.208 44.0275 105.092L39.7072 102.898C38.9993 102.54 38.5484 101.655 38.5484 100.408V84.2717L58.7532 40.5276C59.8878 38.4827 61.1872 36.6796 62.7922 35.8626C63.3643 35.5726 63.8977 35.4469 64.402 35.4469M64.4068 34.4704C63.728 34.4704 63.0395 34.6444 62.3558 34.9925C60.3145 36.0318 58.8405 38.3764 57.9095 40.049C57.8998 40.0683 57.8852 40.0925 57.8755 40.1118L37.6707 83.8559C37.6125 83.9816 37.5834 84.1218 37.5834 84.262V100.398C37.5834 101.984 38.1992 103.207 39.2708 103.753L43.5911 105.948C43.9644 106.136 44.3669 106.233 44.7984 106.233C45.3075 106.233 45.8264 106.098 46.3452 105.837L113.011 71.9688C113.99 71.4709 114.897 70.5379 115.561 69.3438C116.211 68.174 116.57 66.8591 116.57 65.6506V55.5182C116.57 55.2233 116.434 54.943 116.201 54.7593L105.33 46.2319C105.112 46.0627 104.88 45.9128 104.637 45.7871L100.317 43.5924C99.7156 43.2879 99.0513 43.1284 98.3434 43.1284C97.4803 43.1284 96.5881 43.3604 95.6862 43.8148C93.9068 44.7188 92.2436 46.4349 91.0072 48.6489L85.5523 57.3504L71.9418 38.0428C71.8885 37.9655 71.8206 37.8978 71.7479 37.8398C71.3842 37.5546 71.0351 37.3274 70.6811 37.1485L66.3609 34.9538C65.716 34.6251 65.0566 34.4607 64.3971 34.4607L64.4068 34.4704Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M104.201 46.6524C103.139 46.111 101.82 46.1835 100.453 46.8796C98.8476 47.6966 97.3057 49.3016 96.1711 51.3464L88.6264 63.3834L84.3062 61.1887L91.8508 49.1517C92.9854 47.1068 94.5273 45.5019 96.1323 44.6849C97.4996 43.9937 98.8185 43.9212 99.8804 44.4578L104.201 46.6524Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M70.2496 38.0235C69.338 37.5594 68.3101 37.4482 67.1173 38.0525C65.5075 38.8695 64.2129 40.6726 63.0783 42.7174L42.8735 86.4615L38.5532 84.2668L58.758 40.5227C59.8926 38.4779 61.1921 36.6748 62.797 35.8578C63.9898 35.2535 65.0129 35.3647 65.9293 35.8288L70.2496 38.0235Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M42.8734 86.4615V102.598C42.8734 103.845 43.3292 104.73 44.0323 105.087L39.712 102.893C39.0041 102.535 38.5532 101.65 38.5532 100.403V84.2668L42.8734 86.4615Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M104.201 46.6524C104.385 46.7491 104.564 46.8603 104.734 46.9957L115.605 55.5231V65.6554C115.605 66.6948 115.29 67.8501 114.718 68.8798C114.15 69.8998 113.379 70.7022 112.574 71.1131L45.9087 104.981C45.2008 105.339 44.5511 105.358 44.0371 105.097C43.3292 104.739 42.8783 103.855 42.8783 102.608V86.4712L63.0831 42.7271C64.2177 40.6823 65.5172 38.8791 67.1221 38.0622C68.3149 37.4579 69.338 37.5691 70.2544 38.0332C70.5696 38.1927 70.8702 38.3957 71.1611 38.623L88.6264 63.3979L96.1711 51.3609C97.3057 49.316 98.8476 47.7111 100.453 46.8941C101.82 46.2029 103.139 46.1303 104.201 46.6669V46.6524Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.5195 56.7122C3.18608 56.0355 2.33755 54.4354 2.33755 52.1585C2.33755 48.0833 5.06256 43.3942 8.41791 41.6926L30.9162 30.2647C32.3999 29.5106 33.7576 29.4622 34.8146 29.9988L32.6521 28.9015C31.595 28.3649 30.2374 28.4132 28.7536 29.1674L6.25536 40.5952C2.89516 42.3017 0.175003 46.9908 0.175003 51.0611C0.175003 53.338 1.02354 54.9381 2.35695 55.6149L4.5195 56.7122Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.51949 56.7122C5.57652 57.2488 6.93418 57.2005 8.41791 56.4464L30.9162 45.0185C34.2764 43.312 36.9966 38.6229 36.9966 34.5526C36.9966 32.2757 36.148 30.6756 34.8146 29.9988C33.7576 29.4622 32.3999 29.5106 30.9162 30.2647L8.41791 41.6926C5.05771 43.399 2.33755 48.0882 2.33755 52.1585C2.33755 54.4354 3.18608 56.0355 4.51949 56.7122Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.492 46.082C11.5745 45.9563 11.6957 45.9031 11.7733 45.9563C11.8508 46.0095 11.8557 46.1545 11.7878 46.2899L11.7733 46.3189L8.83491 51.3802C8.75248 51.5204 8.62156 51.588 8.53913 51.53C8.4567 51.472 8.4567 51.3125 8.53913 51.1675L11.4775 46.1062L11.492 46.082Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M9.31494 47.7691C9.31494 47.5564 9.17432 47.4597 8.99976 47.5467C8.82521 47.6337 8.6846 47.8754 8.6846 48.0881C8.6846 48.3008 8.82521 48.3975 8.99976 48.3105C9.17432 48.2235 9.31494 47.9818 9.31494 47.7691ZM9.73678 47.5515C9.73678 48.0446 9.40706 48.6102 8.99976 48.8181C8.59247 49.0259 8.26275 48.7939 8.26275 48.3008C8.26275 47.8077 8.59247 47.2422 8.99976 47.0343C9.40706 46.8264 9.73678 47.0585 9.73678 47.5515Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M11.6278 49.3982C11.6278 49.1855 11.4872 49.0888 11.3126 49.1759C11.1381 49.2629 10.9975 49.5046 10.9975 49.7173C10.9975 49.93 11.1381 50.0267 11.3126 49.9397C11.4872 49.8526 11.6278 49.6109 11.6278 49.3982ZM12.0448 49.1807C12.0448 49.6738 11.7151 50.2394 11.3078 50.4472C10.9005 50.6551 10.5708 50.4231 10.5708 49.93C10.5708 49.4369 10.9005 48.8713 11.3078 48.6634C11.7151 48.4556 12.0448 48.6876 12.0448 49.1807Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M10.0859 44.2305C10.0859 44.0951 10.178 43.9404 10.2895 43.8873C10.9441 43.5972 11.5793 43.5005 12.1466 43.6214C12.7721 43.7519 13.2812 44.1338 13.6352 44.7236C13.9843 45.3133 14.1589 46.0965 14.1395 46.9811C14.1201 47.8706 13.9019 48.8326 13.5188 49.7704C13.1309 50.7082 12.5879 51.588 11.9478 52.318C11.3029 53.0479 10.5853 53.5991 9.86285 53.9133C9.14038 54.2275 8.44216 54.3 7.84091 54.1163C7.29785 53.9471 6.84691 53.5797 6.53659 53.0383C6.48326 52.9464 6.5269 52.7772 6.62872 52.6661C6.73054 52.5549 6.85177 52.5452 6.9051 52.6371C7.18633 53.1156 7.58393 53.4395 8.06881 53.5894C8.61187 53.7537 9.23736 53.6909 9.88709 53.4057C10.5368 53.1205 11.1866 52.6274 11.7636 51.9699C12.3406 51.3125 12.8303 50.5245 13.1794 49.6786C13.5285 48.8326 13.7176 47.9673 13.737 47.1648C13.7564 46.3672 13.6012 45.6614 13.2861 45.1296C12.9709 44.5979 12.5103 44.2547 11.9478 44.1386C11.4435 44.0323 10.8811 44.1145 10.2992 44.3707C10.1877 44.419 10.0956 44.3562 10.0956 44.2208L10.0859 44.2305Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.07 41.6298L19.8368 45.8113C19.1579 46.1545 18.61 45.7678 18.61 44.946C18.61 44.1242 19.1579 43.1815 19.8368 42.8383L28.07 38.6568C28.7488 38.3136 29.2967 38.7003 29.2967 39.5221C29.2967 40.3439 28.7488 41.2865 28.07 41.6298Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M148.029 47.0827C149.086 46.5461 150.444 46.5896 151.932 47.3486C155.292 49.055 158.012 53.7441 158.012 57.8144C158.012 60.0865 157.164 61.6914 155.83 62.3682L157.993 61.2709C159.326 60.5941 160.175 58.9892 160.175 56.7171C160.175 52.6419 157.45 47.9528 154.095 46.2512C152.611 45.4971 151.248 45.4487 150.191 45.9853L148.029 47.0827Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M148.029 47.0827C146.695 47.7595 145.847 49.3644 145.847 51.6365C145.847 55.7116 148.572 60.4007 151.927 62.1024C153.411 62.8565 154.773 62.9048 155.83 62.3682C157.164 61.6915 158.012 60.0865 158.012 57.8145C158.012 53.7393 155.287 49.0502 151.932 47.3486C150.448 46.5945 149.086 46.5461 148.029 47.0827Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M151.326 50.805C151.471 50.8775 151.593 51.0854 151.593 51.2642V51.5881L153.188 52.4003V52.0764C153.188 51.8975 153.309 51.8153 153.455 51.8878C153.6 51.9604 153.721 52.1682 153.721 52.3471V52.671L154.255 52.9417C154.468 53.048 154.672 53.2559 154.817 53.5121C154.967 53.7683 155.05 54.0583 155.05 54.3146V55.6053V56.896C155.05 57.0749 154.929 57.157 154.783 57.0845C154.638 57.012 154.516 56.8042 154.516 56.6253V55.6585L150.259 53.4928V56.3981C150.259 56.4851 150.288 56.5818 150.337 56.664C150.385 56.751 150.453 56.8186 150.526 56.8525L152.655 57.9353C152.8 58.0078 152.921 58.2157 152.921 58.3946C152.921 58.5734 152.8 58.6556 152.655 58.5831L150.526 57.5003C150.313 57.3939 150.109 57.186 149.963 56.9298C149.813 56.6736 149.731 56.3836 149.731 56.1274V51.6075C149.731 51.3512 149.813 51.1482 149.963 51.0419C150.114 50.9355 150.317 50.9355 150.526 51.0419L151.059 51.3126V50.9887C151.059 50.8098 151.181 50.7276 151.326 50.8002V50.805ZM154.521 54.039V55.0058L150.264 52.8402V51.8733C150.264 51.7863 150.293 51.7186 150.342 51.6848C150.39 51.6509 150.458 51.6509 150.531 51.6848L151.064 51.9555V52.2794C151.064 52.4583 151.185 52.6613 151.331 52.7386C151.476 52.816 151.598 52.729 151.598 52.5501V52.2262L153.193 53.0384V53.3622C153.193 53.5411 153.314 53.7441 153.459 53.8215C153.605 53.8988 153.726 53.8118 153.726 53.633V53.3091L154.259 53.5798C154.332 53.6136 154.4 53.6861 154.449 53.7683C154.497 53.8553 154.526 53.952 154.526 54.0342L154.521 54.039ZM155.239 58.5106C155.341 58.4381 155.341 58.235 155.239 58.0562C155.137 57.8773 154.967 57.7903 154.861 57.8628L153.983 58.4816L153.639 57.887C153.537 57.7081 153.367 57.6211 153.261 57.6936C153.159 57.7661 153.159 57.9692 153.261 58.148L153.794 59.0665C153.896 59.2454 154.066 59.3324 154.172 59.2599L155.239 58.5106Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/index.ts b/packages/propel/src/empty-state/assets/vertical-stack/index.ts
new file mode 100644
index 0000000..71ba355
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/index.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./404-error";
+export * from "./archived-cycle";
+export * from "./archived-module";
+export * from "./archived-work-item";
+export * from "./changelog";
+export * from "./customer";
+export * from "./cycle";
+export * from "./dashboard";
+export * from "./draft";
+export * from "./epic";
+export * from "./initiative";
+export * from "./invalid-link";
+export * from "./module";
+export * from "./no-access";
+export * from "./page";
+export * from "./project";
+export * from "./server-error";
+export * from "./teamspace";
+export * from "./view";
+export * from "./work-item";
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx b/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx
new file mode 100644
index 0000000..4eac0c4
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx
@@ -0,0 +1,256 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function InitiativeVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="171"
+      viewBox="0 0 162 171"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M10.414 138.624C10.414 140.491 11.8117 142.353 14.6023 143.78L50.5337 162.089C56.1198 164.934 65.173 164.934 70.7591 162.089L146.262 123.619C149.053 122.197 150.45 120.335 150.45 118.468V124.429C150.45 126.296 149.053 128.158 146.262 129.581L70.7591 168.051C65.173 170.896 56.1198 170.896 50.5337 168.051L14.6023 149.742C11.8068 148.319 10.414 146.452 10.414 144.585V138.624Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M10.414 138.623C10.414 136.756 11.8117 134.894 14.6023 133.472L90.1053 95.0018C95.6913 92.1569 104.745 92.1569 110.331 95.0018L146.262 113.311C149.058 114.733 150.45 116.6 150.45 118.467C150.45 120.334 149.053 122.196 146.262 123.619L70.7591 162.089C65.173 164.934 56.1198 164.934 50.5337 162.089L14.6023 143.78C11.8068 142.357 10.414 140.49 10.414 138.623Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M10.414 119.786C10.414 121.653 11.8117 123.515 14.6023 124.942L50.5337 143.251C56.1198 146.096 65.173 146.096 70.7591 143.251L146.262 104.781C149.053 103.359 150.45 101.497 150.45 99.6299V105.591C150.45 107.458 149.053 109.32 146.262 110.743L70.7591 149.213C65.173 152.058 56.1198 152.058 50.5337 149.213L14.6023 130.904C11.8068 129.481 10.414 127.614 10.414 125.747V119.786Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M10.4139 119.786C10.4139 117.92 11.8117 116.057 14.6022 114.635L90.1053 76.1649C95.6913 73.32 104.745 73.32 110.331 76.1649L146.262 94.4739C149.058 95.8963 150.45 97.7633 150.45 99.6303C150.45 101.497 149.053 103.359 146.262 104.782L70.7591 143.252C65.173 146.097 56.1198 146.097 50.5337 143.252L14.6022 124.943C11.8067 123.52 10.4139 121.653 10.4139 119.786Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M10.414 100.954C10.414 102.821 11.8117 104.683 14.6023 106.11L50.5337 124.419C56.1198 127.264 65.173 127.264 70.7591 124.419L146.262 85.9493C149.053 84.5268 150.45 82.6648 150.45 80.7979V86.7593C150.45 88.6262 149.053 90.4882 146.262 91.9107L70.7591 130.381C65.173 133.226 56.1198 133.226 50.5337 130.381L14.6023 112.072C11.8068 110.649 10.414 108.782 10.414 106.915V100.954Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.414 100.954C10.414 99.0875 11.8117 97.2255 14.6023 95.803L90.1053 57.3329C95.6913 54.488 104.745 54.488 110.331 57.3329L146.262 75.6419C149.058 77.0643 150.45 78.9313 150.45 80.7982C150.45 82.6652 149.053 84.5272 146.262 85.9496L70.7591 124.42C65.173 127.265 56.1198 127.265 50.5337 124.42L14.6023 106.111C11.8068 104.688 10.414 102.821 10.414 100.954Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M147.828 48.7138C148.904 48.1655 150.287 48.21 151.804 48.9854C155.226 50.7289 157.997 55.5198 157.997 59.6784C157.997 61.9998 157.133 63.6395 155.775 64.331L157.977 63.2098C159.336 62.5184 160.2 60.8786 160.2 58.5573C160.2 54.3937 157.424 49.6028 154.006 47.8643C152.495 47.0938 151.107 47.0444 150.031 47.5926L147.828 48.7138Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M147.828 48.7137C146.469 49.4052 145.605 51.0449 145.605 53.3663C145.605 57.5299 148.381 62.3207 151.799 64.0593C153.31 64.8298 154.698 64.8792 155.775 64.3309C157.133 63.6395 157.997 61.9997 157.997 59.6784C157.997 55.5148 155.221 50.7239 151.804 48.9854C150.292 48.2149 148.904 48.1655 147.828 48.7137Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M153.508 54.7235C153.335 54.4272 153.103 54.1901 152.856 54.0666C152.614 53.9431 152.377 53.9431 152.204 54.0666L149.581 55.9187C149.295 56.1212 149.132 56.5114 149.132 57.0053C149.132 57.4992 149.295 58.0524 149.581 58.5513C149.868 59.0452 150.258 59.4403 150.663 59.6477C151.068 59.8552 151.458 59.8552 151.744 59.6527L154.555 57.6672C154.673 57.5832 154.866 57.682 154.989 57.8894C155.108 58.0969 155.108 58.329 154.989 58.4179L152.179 60.4034C151.779 60.6899 151.231 60.6849 150.663 60.3935C150.095 60.1021 149.551 59.5539 149.146 58.8575C148.746 58.166 148.519 57.3856 148.519 56.6942C148.519 56.0027 148.746 55.4545 149.146 55.173L151.764 53.3208C152.051 53.1183 152.441 53.1183 152.846 53.3208C153.251 53.5283 153.641 53.9234 153.927 54.4173C154.214 54.9112 154.377 55.4693 154.377 55.9632C154.377 56.4571 154.214 56.8473 153.927 57.0547L151.3 58.9069C151.127 59.0303 150.895 59.0254 150.653 58.9069C150.411 58.7883 150.174 58.5463 150.006 58.25C149.838 57.9536 149.739 57.6178 149.739 57.3214C149.739 57.0251 149.838 56.793 150.006 56.6695L152.604 54.8371C152.722 54.7531 152.915 54.8519 153.038 55.0594C153.157 55.2668 153.157 55.4989 153.038 55.5829L150.44 57.4153C150.381 57.4548 150.352 57.5338 150.352 57.6326C150.352 57.7314 150.386 57.84 150.44 57.9438C150.5 58.0425 150.574 58.1216 150.658 58.1611C150.742 58.2006 150.816 58.2006 150.875 58.1611L153.503 56.3089C153.676 56.1855 153.769 55.9533 153.769 55.657C153.769 55.3606 153.671 55.0248 153.498 54.7284L153.508 54.7235Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M78.0145 95.1603C77.9256 95.1603 77.8416 95.1553 77.7576 95.1405C77.6095 95.1208 77.4514 95.0714 77.2934 95.0022L72.8828 92.755C72.7495 92.6858 72.6309 92.5969 72.5124 92.4883C72.2704 92.2364 72.1123 91.9499 72.0234 91.619C71.9345 91.3078 71.9049 90.9572 71.9345 90.5769C71.9691 90.1916 72.0531 89.8163 72.1913 89.4458C72.3346 89.0655 72.5124 88.7099 72.7297 88.3889C72.9371 88.0728 73.189 87.7863 73.4706 87.5344L70.9516 86.2503C70.764 86.1614 70.5862 86.0132 70.433 85.8156C70.0577 85.3464 69.9145 84.6402 70.0281 83.8351C70.0774 83.4745 70.1812 83.0992 70.3441 82.7139C70.4923 82.3534 70.6948 82.0076 70.9368 81.6817C71.164 81.3656 71.4357 81.089 71.732 80.8667C72.0234 80.6395 72.3346 80.4765 72.6507 80.3926C72.8532 80.3333 73.0606 80.274 73.273 80.2098L70.9467 79.0245C70.8282 78.9701 70.7047 78.8812 70.5763 78.7627C70.2059 78.3972 70.0034 77.8687 69.9836 77.2217C69.9688 76.634 69.8404 76.1104 69.6082 75.6511C69.2773 75.5177 68.981 75.3844 68.7093 75.2461L64.3086 73.0038C61.5823 71.6159 59.419 69.1365 58.0608 65.8372C56.2481 61.4069 55.9222 55.5591 57.1471 49.3705C58.3769 43.1967 61.1082 36.8303 64.847 31.4418C68.5908 26.0336 73.2631 21.7317 78.0046 19.3214C80.9186 17.8348 83.7635 17.0791 86.4652 17.0791C88.2185 17.0791 89.878 17.4051 91.3943 18.0472C91.6462 18.1558 91.8981 18.2743 92.1401 18.3978L96.5408 20.6401C100.047 22.4281 102.522 25.8755 103.697 30.6022C104.927 35.5412 104.616 41.7002 102.808 47.9431C101.006 54.1663 97.7706 60.3154 93.691 65.2643C91.9771 67.3486 90.9251 69.7045 90.8757 71.5616C90.8609 72.1592 90.6831 72.8161 90.3818 73.4088C90.0855 74.0113 89.6755 74.5299 89.1964 74.9102C88.8458 75.1868 88.4704 75.4733 88.0456 75.7894L89.962 76.7673C90.1694 76.876 90.3522 77.0242 90.5003 77.2168C90.6979 77.4835 90.8263 77.7946 90.8905 78.1552C90.9449 78.5157 90.9449 78.8812 90.8806 79.2615C90.8214 79.632 90.7028 80.0172 90.53 80.3975C90.362 80.7729 90.1546 81.1236 89.9077 81.4347C89.6459 81.7607 89.3644 82.0274 89.0779 82.225C88.1148 82.9411 87.0924 83.6375 86.0305 84.2994L87.9567 85.2822C88.5 85.5539 88.8507 86.1416 88.9199 86.8973C88.9841 87.5789 88.8161 88.3642 88.4506 89.105C88.0802 89.8459 87.5517 90.4534 86.964 90.8288C84.2376 92.5673 81.4668 93.9799 78.7207 95.0269C78.4837 95.1208 78.2417 95.1652 78.0046 95.1652L78.0145 95.1603Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M86.4701 17.5631C88.1494 17.5631 89.7447 17.8693 91.2066 18.4917C91.4487 18.5954 91.6907 18.709 91.9228 18.8275L96.3235 21.0698C99.6721 22.7787 102.087 26.1373 103.223 30.7108C104.443 35.6005 104.127 41.6113 102.339 47.7949C100.546 53.9885 97.3755 60.0141 93.3156 64.9383C91.5425 67.0967 90.4411 69.5761 90.3868 71.5369C90.372 72.0604 90.2188 72.6383 89.9472 73.1766C89.6805 73.715 89.3101 74.1842 88.8952 74.5151C88.3074 74.9843 87.7098 75.4239 87.1073 75.8536L89.7447 77.197C89.8879 77.2711 90.0114 77.3748 90.1151 77.5082C90.2584 77.7008 90.3571 77.9428 90.4065 78.2293C90.451 78.5157 90.451 78.8368 90.3966 79.1726C90.3423 79.5085 90.2337 79.8542 90.0855 80.1851C89.9373 80.521 89.7496 80.8371 89.5274 81.1186C89.3051 81.3952 89.0631 81.6322 88.8063 81.8101C87.5567 82.7386 86.2923 83.5733 85.0279 84.329L87.7394 85.7119C88.1346 85.9095 88.3815 86.349 88.4358 86.9318C88.4902 87.5245 88.3371 88.2259 88.016 88.8778C87.6901 89.5298 87.2208 90.078 86.7072 90.404C84.0006 92.1277 81.2644 93.5205 78.5528 94.5577C78.3701 94.6318 78.1874 94.6664 78.0145 94.6664C77.9503 94.6664 77.891 94.6664 77.8317 94.6515C77.7181 94.6367 77.6095 94.6022 77.5058 94.5528L73.1051 92.3104C73.0112 92.2611 72.9273 92.1968 72.8483 92.1228C72.6902 91.9598 72.5667 91.7474 72.4976 91.4856C72.4235 91.2239 72.3988 90.9275 72.4235 90.6065C72.4531 90.2805 72.5272 89.9446 72.6507 89.6088C72.7742 89.2779 72.9372 88.9519 73.1347 88.6556C73.3323 88.3592 73.5595 88.1024 73.8015 87.8851C74.0139 87.7073 74.2312 87.569 74.4485 87.4751L71.169 85.8008C71.0356 85.7366 70.9171 85.6329 70.8183 85.5045C70.5269 85.139 70.4183 84.5562 70.5121 83.8943C70.5565 83.5684 70.6553 83.2276 70.7936 82.8966C70.9319 82.5657 71.1147 82.2546 71.327 81.973C71.5345 81.6866 71.7715 81.4446 72.0234 81.2569C72.2704 81.0643 72.5272 80.9309 72.7791 80.8618C73.3619 80.6988 73.9546 80.5062 74.5424 80.2938L71.169 78.575C71.0751 78.5305 70.9912 78.4663 70.9122 78.3922C70.6405 78.1255 70.4923 77.7057 70.4775 77.197C70.4578 76.4561 70.275 75.7943 69.9589 75.2461C69.6132 75.1127 69.2675 74.9646 68.9365 74.7966L64.5359 72.5543C61.9132 71.2208 59.8438 68.855 58.5201 65.6397C56.7322 61.2736 56.421 55.5887 57.636 49.4545C58.856 43.3202 61.5329 37.0822 65.257 31.7134C68.9761 26.3447 73.5397 22.1367 78.2318 19.7511C81.0767 18.299 83.8771 17.5631 86.4701 17.5631ZM86.4701 16.5753C83.6894 16.5753 80.7655 17.3458 77.7824 18.872C72.9717 21.3168 68.2352 25.6779 64.447 31.1504C60.6735 36.5932 57.9077 43.0238 56.668 49.2618C55.4233 55.5492 55.7543 61.4958 57.6064 66.015C59.014 69.4279 61.2514 71.9962 64.0864 73.4335L68.4871 75.6758C68.7242 75.7943 68.9711 75.9079 69.2428 76.0215C69.3959 76.3771 69.4749 76.7772 69.4897 77.2217C69.5144 78.0021 69.7663 78.6491 70.2207 79.0936C70.3985 79.2615 70.5615 79.3751 70.7294 79.4591L71.9987 80.1061C71.8012 80.2049 71.6036 80.3283 71.4159 80.4765C71.0949 80.7136 70.7936 81.0248 70.5269 81.3902C70.2701 81.731 70.0478 82.1163 69.8799 82.5114C69.7021 82.9312 69.5836 83.351 69.5292 83.756C69.3959 84.6945 69.5786 85.5341 70.0429 86.1169C70.2306 86.3589 70.4676 86.5565 70.7393 86.6898L72.6458 87.6628C72.5272 87.806 72.4136 87.9542 72.3148 88.1073C72.0778 88.4629 71.8802 88.8482 71.7271 89.2631C71.574 89.6779 71.4802 90.0978 71.4406 90.5176C71.4061 90.972 71.4406 91.3819 71.5493 91.7573C71.653 92.1573 71.8555 92.5179 72.142 92.8142C72.1519 92.8241 72.1667 92.8389 72.1765 92.8488C72.3297 92.992 72.4828 93.1007 72.6458 93.1896L77.0563 95.4369C77.0563 95.4369 77.0711 95.4467 77.081 95.4467C77.2786 95.5406 77.486 95.6048 77.6934 95.6295C77.7972 95.6443 77.9058 95.6542 78.0145 95.6542C78.3108 95.6542 78.6171 95.5949 78.9134 95.4764C81.6793 94.4194 84.4846 92.992 87.2357 91.2337C87.8975 90.8139 88.4902 90.1323 88.8952 89.3174C89.3002 88.4926 89.4879 87.6134 89.4138 86.838C89.3249 85.9095 88.8754 85.1735 88.1741 84.8229L87.0282 84.2351C87.8382 83.7116 88.6235 83.1634 89.3792 82.6052C89.7002 82.383 90.0065 82.0866 90.2929 81.731C90.5695 81.3804 90.8016 80.9951 90.9844 80.5753C91.1721 80.1604 91.3005 79.7357 91.3647 79.3208C91.4338 78.8911 91.4388 78.4713 91.3746 78.0712C91.2956 77.6168 91.1375 77.2316 90.9004 76.9105C90.6979 76.6488 90.4609 76.4512 90.1892 76.3129L88.9742 75.6955C89.157 75.5523 89.3348 75.4189 89.5027 75.2807C90.0361 74.8559 90.4905 74.278 90.8214 73.6063C91.1573 72.9445 91.3449 72.2333 91.3647 71.5566C91.4141 69.828 92.4513 67.5313 94.0713 65.5557C98.1904 60.5623 101.46 54.349 103.283 48.0616C105.11 41.7347 105.431 35.4869 104.177 30.4639C102.966 25.594 100.403 22.0379 96.768 20.1808L92.3673 17.9385C92.1154 17.8101 91.8537 17.6866 91.5919 17.573C90.0114 16.9062 88.2877 16.5654 86.4652 16.5654L86.4701 16.5753Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M87.7394 85.7114C87.3295 85.5138 86.8208 85.5879 86.3071 85.9139C83.8623 87.4697 81.4026 88.7242 78.9578 89.6626C78.7059 89.7565 78.4491 89.9145 78.2071 90.1269C77.9601 90.3442 77.7329 90.601 77.5354 90.8974C77.3428 91.1937 77.1748 91.5197 77.0563 91.8506C76.9328 92.1865 76.8587 92.5223 76.8291 92.8483C76.8044 93.1693 76.8291 93.4657 76.8982 93.7275C76.9723 93.9892 77.0909 94.2016 77.2489 94.3646C77.3279 94.4387 77.4168 94.5029 77.5107 94.5523L73.11 92.31C73.0162 92.2606 72.9273 92.1964 72.8482 92.1223C72.6902 91.9593 72.5717 91.7469 72.4976 91.4851C72.4235 91.2234 72.4037 90.927 72.4284 90.606C72.4581 90.28 72.5321 89.9442 72.6556 89.6083C72.7742 89.2774 72.9421 88.9514 73.1347 88.6551C73.3323 88.3587 73.5595 88.1019 73.8064 87.8846C74.0138 87.7018 74.2312 87.5586 74.4485 87.4697C74.4831 87.4499 74.5226 87.4351 74.5571 87.4203C74.6954 87.366 74.8337 87.3116 74.972 87.2573C77.2786 86.3387 79.5999 85.1385 81.9064 83.6716C82.4201 83.3456 82.9288 83.2715 83.3387 83.4691L85.0378 84.3334L87.7394 85.7114Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M87.7394 85.7116C88.1346 85.9141 88.3815 86.3487 88.4358 86.9315C88.4902 87.5291 88.3371 88.2255 88.016 88.8775C87.6901 89.5294 87.2208 90.0777 86.7121 90.4036C84.0006 92.1274 81.2693 93.5251 78.5578 94.5574C78.3059 94.6561 78.0589 94.6858 77.8367 94.6512C77.7231 94.6314 77.6144 94.5969 77.5156 94.5475C77.4218 94.4981 77.3329 94.4388 77.2539 94.3598C77.0958 94.2017 76.9724 93.9844 76.9032 93.7227C76.8291 93.4658 76.8094 93.1646 76.8341 92.8435C76.8637 92.5225 76.9378 92.1866 77.0613 91.8508C77.1798 91.5149 77.3477 91.1939 77.5403 90.8975C77.7379 90.6012 77.9651 90.3394 78.212 90.127C78.459 89.9147 78.7109 89.7566 78.9677 89.6578C81.4125 88.7244 83.8722 87.4698 86.317 85.914C86.8307 85.5881 87.3394 85.514 87.7493 85.7066L87.7394 85.7116Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M75.5697 80.8173L74.5522 80.2987C74.7054 80.2493 74.8535 80.1901 75.0066 80.1357C75.0264 80.1851 75.0462 80.2345 75.0659 80.279C75.1104 80.3679 75.1647 80.4518 75.224 80.5259C75.2536 80.5654 75.2832 80.6 75.3178 80.6346C75.3919 80.7087 75.4808 80.7729 75.5697 80.8173Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M75.5746 88.0431L74.4485 87.4702C74.4831 87.4504 74.5226 87.4356 74.5571 87.4208C74.6954 87.3665 74.8337 87.3121 74.972 87.2578C74.9868 87.3023 75.0017 87.3467 75.0165 87.3862C75.0313 87.4257 75.051 87.4653 75.0659 87.5048C75.1103 87.5937 75.1597 87.6727 75.219 87.7468C75.3178 87.8752 75.4412 87.9789 75.5746 88.0431Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M90.3967 79.1725C90.3423 79.5083 90.2386 79.8541 90.0904 80.185C89.9373 80.5208 89.7496 80.8369 89.5323 81.1185C89.3101 81.3951 89.0631 81.6321 88.8112 81.8099C87.5617 82.7335 86.3022 83.5781 85.0378 84.3338C82.1732 86.0476 79.2888 87.3169 76.4587 88.1072C76.1278 88.1961 75.8265 88.1714 75.5746 88.043C75.4413 87.9788 75.3178 87.8751 75.219 87.7466C75.1597 87.6726 75.1104 87.5935 75.0659 87.5046C75.0511 87.4651 75.0313 87.4256 75.0165 87.3861C75.0017 87.3466 74.9869 87.3021 74.9721 87.2577C74.9671 87.2429 74.9622 87.228 74.9622 87.2132C74.9474 87.1737 74.9375 87.1342 74.9325 87.0947C74.9177 87.0453 74.9128 86.991 74.9029 86.9366C74.8733 86.6946 74.8733 86.423 74.9177 86.1365C74.9622 85.8105 75.056 85.4698 75.1993 85.1388C75.3376 84.8079 75.5154 84.4968 75.7277 84.2152C75.9401 83.9288 76.1722 83.6868 76.4241 83.4991C76.676 83.3065 76.9329 83.1731 77.1847 83.104C80.7853 82.1013 84.4846 80.2146 88.0852 77.5475C88.3371 77.35 88.5989 77.2117 88.8557 77.1425C89.1125 77.0685 89.3545 77.0635 89.5718 77.1277C89.6015 77.1376 89.6311 77.1475 89.6608 77.1574C89.6904 77.1722 89.7151 77.1821 89.7447 77.1969C89.8879 77.271 90.0114 77.3747 90.1151 77.508C90.2584 77.7007 90.3572 77.9427 90.4065 78.2291C90.4559 78.5156 90.451 78.8366 90.3967 79.1725Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M75.5697 80.8172L74.5522 80.2986L71.169 78.5749C71.0801 78.5304 70.9912 78.4662 70.9171 78.3921C70.6455 78.1254 70.4923 77.7056 70.4775 77.1969C70.4578 76.456 70.28 75.8041 69.9639 75.2559C70.5961 75.5028 71.2628 75.6954 71.9494 75.8288C72.3198 75.9029 72.6655 76.0214 72.9767 76.1795C74.1423 76.7721 74.8387 77.9328 74.8782 79.4392C74.8782 79.617 74.9078 79.785 74.9424 79.9381C74.9622 80.0072 74.9819 80.0714 75.0066 80.1356C75.0264 80.185 75.0461 80.2344 75.0659 80.2789C75.1103 80.3678 75.1647 80.4517 75.2239 80.5258C75.2536 80.5653 75.2832 80.5999 75.3178 80.6345C75.3919 80.7086 75.4808 80.7728 75.5697 80.8172Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M89.6608 77.1574C89.6311 77.1475 89.6015 77.1376 89.5719 77.1277C89.3545 77.0635 89.1125 77.0685 88.8557 77.1426C88.5989 77.2117 88.3371 77.35 88.0852 77.5476C84.4847 80.2146 80.7853 82.1014 77.1848 83.104C76.9329 83.1731 76.676 83.3065 76.4242 83.4991C76.1723 83.6868 75.9401 83.9288 75.7277 84.2153C75.5154 84.4968 75.3376 84.8079 75.1993 85.1389C75.056 85.4698 74.9622 85.8106 74.9177 86.1365C74.8733 86.4181 74.8684 86.6947 74.9029 86.9367C74.9128 86.991 74.9177 87.0453 74.9326 87.0947C74.9326 87.1342 74.9474 87.1737 74.9622 87.2133C74.9622 87.2281 74.9622 87.2429 74.9721 87.2577C74.8338 87.312 74.6955 87.3664 74.5572 87.4207C74.5226 87.4355 74.4831 87.4503 74.4485 87.4701L71.174 85.8007C71.0406 85.7365 70.9171 85.6328 70.8183 85.5044C70.5269 85.1389 70.4183 84.5561 70.5171 83.8942C70.5615 83.5682 70.6554 83.2275 70.7986 82.8965C70.9369 82.5656 71.1147 82.2545 71.3271 81.9729C71.5394 81.6865 71.7716 81.4445 72.0235 81.2568C72.2754 81.0642 72.5322 80.9308 72.7791 80.8617C73.3669 80.6987 73.9596 80.511 74.5523 80.2986L75.5697 80.8172C75.8018 80.9357 76.0735 80.9654 76.3698 80.9012C77.2786 80.6987 78.2071 80.432 79.1456 80.101C79.9803 79.8047 80.6964 78.6243 80.6964 77.597V62.9428C80.5235 63.0071 80.3507 63.0713 80.1729 63.1305C79.5357 63.3429 78.8986 63.5158 78.2714 63.6392C78.0293 63.6837 77.7972 63.6689 77.5898 63.5849C77.57 63.58 77.5453 63.5701 77.5256 63.5553C77.5157 63.5503 77.5009 63.5454 77.491 63.5355C77.3329 63.4516 77.1946 63.3182 77.0909 63.1552C76.9576 62.9577 76.8736 62.7058 76.839 62.4144C76.8045 62.1279 76.8143 61.8069 76.8835 61.4759C76.9082 61.3377 76.9427 61.1944 76.9872 61.0561C77.0465 60.8635 77.1206 60.6659 77.2095 60.4783C77.3626 60.1523 77.5502 59.8461 77.7725 59.5794C77.9898 59.3077 78.2318 59.0805 78.4837 58.9126C78.7406 58.7397 78.9924 58.6261 79.2394 58.5767C79.8963 58.4483 80.5631 58.2557 81.2348 57.9939C82.835 57.3815 84.46 56.4134 86.0256 55.1194C86.2775 54.9021 86.5393 54.744 86.7961 54.6502C87.053 54.5564 87.2999 54.5317 87.5222 54.5761C87.6259 54.5909 87.7197 54.6255 87.8086 54.67C87.9173 54.7243 88.0161 54.8033 88.105 54.8972C88.263 55.0651 88.3766 55.2923 88.4408 55.5639C88.505 55.8405 88.5198 56.1517 88.4803 56.4826C88.4408 56.8135 88.3519 57.1592 88.2186 57.4951C88.0803 57.8359 87.9074 58.1569 87.695 58.4483C87.4826 58.7397 87.2456 58.9916 86.9937 59.1941C86.1985 59.8461 85.3885 60.4388 84.5736 60.9672V75.6213C84.5736 76.1597 84.7662 76.54 85.0773 76.6981C85.3589 76.8413 85.7244 76.8067 86.1244 76.5449C86.4553 76.3227 86.7862 76.0955 87.1172 75.8584L89.6608 77.1574Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M96.3284 21.0701C96.0914 20.9516 95.8543 20.838 95.6073 20.7342C91.8882 19.1587 87.3246 19.5983 82.6325 21.9937C77.9404 24.3793 73.3817 28.5873 69.6577 33.956C65.9336 39.3248 63.2616 45.5628 62.0417 51.697C60.8217 57.8313 61.1329 63.5162 62.9257 67.8823C64.2445 71.0976 66.3189 73.4634 68.9415 74.7969L64.5408 72.5546C61.9182 71.2211 59.8438 68.8553 58.5251 65.6399C56.7322 61.2738 56.421 55.589 57.641 49.4547C58.8609 43.3204 61.5329 37.0824 65.257 31.7137C68.981 26.345 73.5397 22.1369 78.2318 19.7514C82.9239 17.3559 87.4876 16.9164 91.2066 18.4919C91.4536 18.5956 91.6907 18.7092 91.9278 18.8278L96.3284 21.0701Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M102.344 47.7951C100.551 53.9886 97.3805 60.0143 93.3206 64.9385C91.5475 67.0968 90.4411 69.5762 90.3868 71.537C90.3769 72.0606 90.2238 72.6384 89.9522 73.1768C89.6805 73.7151 89.315 74.1843 88.8952 74.5153C88.3075 74.9845 87.7148 75.4339 87.1172 75.8587C86.7862 76.0957 86.4553 76.3229 86.1244 76.5452C85.7243 76.807 85.3589 76.8415 85.0773 76.6983C84.7662 76.5403 84.5736 76.16 84.5736 75.6216V60.9675C85.3885 60.439 86.1985 59.8463 86.9937 59.1944C87.2456 58.9919 87.4826 58.74 87.695 58.4486C87.9074 58.1572 88.0803 57.8361 88.2186 57.4953C88.3519 57.1595 88.4408 56.8138 88.4803 56.4828C88.5198 56.1519 88.505 55.8408 88.4408 55.5642C88.3766 55.2925 88.263 55.0653 88.105 54.8974C88.0161 54.8036 87.9173 54.7245 87.8086 54.6702C87.7197 54.6258 87.6259 54.5912 87.5222 54.5764C87.2999 54.5319 87.0529 54.5566 86.7961 54.6505C86.5393 54.7443 86.2775 54.9024 86.0256 55.1197C84.46 56.4137 82.835 57.3817 81.2348 57.9942C80.5631 58.256 79.8963 58.4486 79.2394 58.577C78.9924 58.6264 78.7406 58.74 78.4837 58.9128C78.2318 59.0808 77.9898 59.308 77.7725 59.5796C77.5502 59.8463 77.3626 60.1525 77.2094 60.4785C77.1205 60.6662 77.0465 60.8638 76.9872 61.0564C76.9427 61.1947 76.9082 61.3379 76.8835 61.4762C76.8143 61.8071 76.8044 62.1282 76.839 62.4146C76.8736 62.706 76.9576 62.9579 77.0909 63.1555C77.1946 63.3185 77.3329 63.4518 77.491 63.5358C77.5009 63.5457 77.5157 63.5506 77.5255 63.5555C77.5453 63.5704 77.57 63.5802 77.5898 63.5852C77.7972 63.6691 78.0293 63.684 78.2713 63.6395C78.8986 63.516 79.5357 63.3432 80.1729 63.1308C80.3507 63.0715 80.5235 63.0073 80.6964 62.9431V77.5972C80.6964 78.6245 79.9802 79.805 79.1455 80.1013C78.2071 80.4322 77.2786 80.6989 76.3698 80.9014C76.0735 80.9656 75.8018 80.936 75.5697 80.8175C75.4808 80.773 75.3919 80.7088 75.3178 80.6347C75.2832 80.6001 75.2536 80.5656 75.224 80.5261C75.1647 80.452 75.1104 80.368 75.0659 80.2791C75.0462 80.2347 75.0264 80.1853 75.0066 80.1359C74.9819 80.0717 74.9622 80.0075 74.9424 79.9383C74.9079 79.7852 74.8832 79.6173 74.8782 79.4395C74.8387 77.9331 74.1423 76.7724 72.9767 76.1797C72.6655 76.0217 72.3198 75.9031 71.9494 75.829C71.2629 75.6957 70.5961 75.5031 69.9639 75.2561C69.6132 75.1178 69.2724 74.9647 68.9415 74.7968C66.3189 73.4632 64.2445 71.0974 62.9258 67.8821C61.1329 63.516 60.8217 57.8312 62.0417 51.6969C63.2616 45.5626 65.9336 39.3246 69.6577 33.9559C73.3817 28.5872 77.9404 24.3791 82.6325 21.9936C87.3246 19.5981 91.8883 19.1586 95.6073 20.7341C95.8543 20.8378 96.0914 20.9514 96.3285 21.07C99.6771 22.7789 102.092 26.1374 103.228 30.711C104.443 35.6006 104.132 41.6114 102.344 47.7951Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.62539 63.9805C3.26715 63.289 2.40282 61.6542 2.40282 59.3279C2.40282 55.1643 5.17856 50.3735 8.59637 48.6349L31.5135 36.9591C33.0248 36.1886 34.4078 36.1392 35.4845 36.6874L33.2817 35.5662C32.205 35.018 30.822 35.0674 29.3107 35.8379L6.39356 47.5138C2.97575 49.2523 0.200012 54.0432 0.200012 58.2068C0.200012 60.5331 1.06434 62.1679 2.42258 62.8593L4.62539 63.9805Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.6254 63.9804C5.70211 64.5287 7.08504 64.4793 8.59638 63.7088L31.5135 52.0329C34.9362 50.2894 37.707 45.4986 37.707 41.3399C37.707 39.0136 36.8427 37.3788 35.4845 36.6873C34.4078 36.1391 33.0248 36.1885 31.5135 36.959L8.59638 48.6349C5.17363 50.3783 2.40283 55.1692 2.40283 59.3279C2.40283 61.6542 3.26716 63.289 4.6254 63.9804Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.7277 53.1191C11.8117 52.9907 11.9351 52.9363 12.0142 52.9907C12.0932 53.045 12.0981 53.1932 12.029 53.3315L12.0142 53.3611L9.02111 58.5323C8.93715 58.6755 8.8038 58.7447 8.71983 58.6854C8.63587 58.6261 8.63587 58.4631 8.71983 58.315L11.7129 53.1438L11.7277 53.1191Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M9.51009 54.8432C9.51009 54.6259 9.36686 54.5271 9.18906 54.616C9.01125 54.7049 8.86802 54.9519 8.86802 55.1692C8.86802 55.3865 9.01125 55.4853 9.18906 55.3964C9.36686 55.3075 9.51009 55.0605 9.51009 54.8432ZM9.93979 54.6259C9.93979 55.1297 9.60394 55.7075 9.18906 55.9199C8.77418 56.1323 8.43832 55.8952 8.43832 55.3914C8.43832 54.8876 8.77418 54.3098 9.18906 54.0974C9.60394 53.885 9.93979 54.1221 9.93979 54.6259Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M11.866 56.5082C11.866 56.2909 11.7228 56.1921 11.5449 56.281C11.3671 56.3699 11.2239 56.6169 11.2239 56.8342C11.2239 57.0515 11.3671 57.1503 11.5449 57.0614C11.7228 56.9725 11.866 56.7256 11.866 56.5082ZM12.2907 56.2909C12.2907 56.7947 11.9549 57.3726 11.54 57.5849C11.1251 57.7973 10.7893 57.5602 10.7893 57.0565C10.7893 56.5527 11.1251 55.9748 11.54 55.7624C11.9549 55.5501 12.2907 55.7871 12.2907 56.2909Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M10.2954 51.228C10.2954 51.0897 10.3892 50.9317 10.5028 50.8773C11.1696 50.581 11.8166 50.4822 12.3944 50.6057C13.0316 50.7391 13.5502 51.1292 13.9107 51.7318C14.2663 52.3344 14.4441 53.1345 14.4244 54.0383C14.4046 54.9471 14.1824 55.93 13.7922 56.8881C13.3971 57.8463 12.8439 58.7452 12.1919 59.491C11.5351 60.2368 10.8041 60.7999 10.0682 61.1209C9.33225 61.4419 8.62103 61.516 8.00859 61.3283C7.45541 61.1555 6.99608 60.7801 6.67999 60.2269C6.62566 60.1331 6.67011 59.9602 6.77383 59.8466C6.87755 59.733 7.00102 59.7232 7.05535 59.817C7.34182 60.306 7.74682 60.6369 8.24072 60.79C8.79389 60.9579 9.43103 60.8937 10.0929 60.6023C10.7547 60.3109 11.4165 59.8071 12.0043 59.1354C12.592 58.4637 13.0909 57.6586 13.4465 56.7943C13.8021 55.93 13.9947 55.0459 14.0145 54.226C14.0342 53.4111 13.8762 52.69 13.5551 52.1467C13.2341 51.6034 12.7649 51.2527 12.1919 51.1342C11.6783 51.0255 11.1054 51.1095 10.5127 51.3712C10.3991 51.4206 10.3052 51.3564 10.3052 51.2181L10.2954 51.228Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.6143 48.5707L20.2278 52.8429C19.5364 53.1936 18.9782 52.7985 18.9782 51.9588C18.9782 51.1192 19.5364 50.1561 20.2278 49.8054L28.6143 45.5332C29.3058 45.1825 29.8639 45.5776 29.8639 46.4172C29.8639 47.2569 29.3058 48.22 28.6143 48.5707Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M112.83 1.71858C113.99 1.1259 115.492 1.17529 117.127 2.00998L148.425 17.9581C152.12 19.8399 155.118 25.0111 155.118 29.5105C155.118 32.0196 154.184 33.7877 152.722 34.5335L154.925 33.4124C156.392 32.6666 157.321 30.8984 157.321 28.3894C157.321 23.8948 154.323 18.7187 150.628 16.837L119.325 0.888823C117.69 0.0541267 116.193 0.00473632 115.028 0.59742L112.825 1.71858H112.83Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M112.83 1.71851C111.363 2.46431 110.434 4.23248 110.434 6.74151C110.434 11.236 113.432 16.4121 117.127 18.2939L148.425 34.242C150.06 35.0767 151.557 35.1261 152.722 34.5335C154.189 33.7877 155.118 32.0195 155.118 29.5105C155.118 25.0159 152.12 19.8398 148.425 17.9581L117.122 2.00992C115.487 1.17522 113.99 1.12583 112.825 1.71851H112.83Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M119.379 10.0411V14.7233C119.379 15.4987 119.893 16.3927 120.535 16.7187L126.694 19.8549C127.331 20.1809 127.849 19.8154 127.849 19.04V14.3578C127.849 13.5873 127.331 12.6884 126.694 12.3624L125.538 11.7747V11.3055C125.538 10.535 125.019 9.63609 124.382 9.31011L122.841 8.5248C122.204 8.19883 121.685 8.56925 121.685 9.33974V9.80895L120.53 9.22121C119.893 8.89523 119.374 9.26566 119.374 10.0361L119.379 10.0411ZM126.694 18.9215L125.538 18.3337V12.7131L126.694 13.3008C126.906 13.4095 127.079 13.7058 127.079 13.9676V18.6498C127.079 18.9067 126.906 19.0301 126.694 18.9215ZM122.461 11.1425L124.772 12.318V17.9386L122.461 16.7631V11.1425ZM122.461 9.73487C122.461 9.47804 122.634 9.35456 122.846 9.46322L124.387 10.2485C124.599 10.3572 124.772 10.6535 124.772 10.9153V11.3845L122.461 10.209V9.73981V9.73487ZM120.149 10.4313C120.149 10.1744 120.322 10.051 120.535 10.1596L121.69 10.7474V16.368L120.535 15.7802C120.322 15.6716 120.149 15.3752 120.149 15.1135V10.4313Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M144.598 26.2316V27.6541C144.598 27.8022 144.553 27.9158 144.474 27.98C144.395 28.0393 144.286 28.0442 144.178 27.985L134.853 23.2336C134.621 23.1151 134.433 22.7694 134.433 22.4681V20.206L137.258 16.9462C137.416 16.8228 137.599 16.7536 137.821 16.8672C138.044 16.9808 138.226 17.2376 138.384 17.5241L140.829 23.4905L141.886 22.878C142.044 22.7496 142.261 22.7447 142.484 22.8583C142.706 22.9719 142.923 23.199 143.081 23.4905L144.603 26.2316H144.598Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx b/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx
new file mode 100644
index 0000000..c000444
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/invalid-link.tsx
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function InvalidLinkVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="151"
+      viewBox="0 0 161 151"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M0.25 113.58C0.25 115.713 1.84703 117.84 5.03541 119.471L46.0893 140.39C52.4717 143.641 62.8156 143.641 69.1979 140.39L155.465 96.4359C158.653 94.8106 160.25 92.6832 160.25 90.55V97.3613C160.25 99.4944 158.653 101.622 155.465 103.247L69.1979 147.202C62.8156 150.452 52.4717 150.452 46.0893 147.202L5.03541 126.282C1.84139 124.657 0.25 122.524 0.25 120.391V113.58Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 113.58C0.25 111.446 1.84703 109.319 5.03541 107.694L91.3021 63.7394C97.6845 60.4889 108.028 60.4889 114.411 63.7394L155.465 84.6585C158.659 86.2837 160.25 88.4168 160.25 90.5499C160.25 92.683 158.653 94.8105 155.465 96.4357L69.1979 140.39C62.8156 143.641 52.4717 143.641 46.0893 140.39L5.03541 119.471C1.84139 117.846 0.25 115.713 0.25 113.58Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M0.25 92.0624C0.25 94.1955 1.84703 96.323 5.03541 97.9538L46.0893 118.873C52.4717 122.123 62.8156 122.123 69.1979 118.873L155.465 74.9185C158.653 73.2933 160.25 71.1658 160.25 69.0327V75.844C160.25 77.9771 158.653 80.1046 155.465 81.7298L69.1979 125.684C62.8156 128.935 52.4717 128.935 46.0893 125.684L5.03541 104.765C1.84139 103.14 0.25 101.007 0.25 98.8736V92.0624Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 92.0623C0.25 89.9291 1.84703 87.8017 5.03541 86.1765L91.3021 42.222C97.6845 38.9716 108.028 38.9716 114.411 42.222L155.465 63.1411C158.659 64.7664 160.25 66.8995 160.25 69.0326C160.25 71.1657 158.653 73.2932 155.465 74.9184L69.1979 118.873C62.8156 122.123 52.4717 122.123 46.0893 118.873L5.03541 97.9537C1.84139 96.3285 0.25 94.1954 0.25 92.0623Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M0.25 70.545C0.25 72.6782 1.84703 74.8056 5.03541 76.4365L46.0893 97.3556C52.4717 100.606 62.8156 100.606 69.1979 97.3556L155.465 53.4012C158.653 51.776 160.25 49.6485 160.25 47.5154V54.3267C160.25 56.4598 158.653 58.5872 155.465 60.2125L69.1979 104.167C62.8156 107.417 52.4717 107.417 46.0893 104.167L5.03541 83.2478C1.84139 81.6225 0.25 79.4894 0.25 77.3563V70.545Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.25 70.5449C0.25 68.4118 1.84703 66.2843 5.03541 64.6591L91.3021 20.7047C97.6845 17.4542 108.028 17.4542 114.411 20.7047L155.465 41.6238C158.659 43.249 160.25 45.3821 160.25 47.5153C160.25 49.6484 158.653 51.7758 155.465 53.4011L69.1979 97.3555C62.8156 100.606 52.4717 100.606 46.0893 97.3555L5.03541 76.4364C1.84139 74.8111 0.25 72.678 0.25 70.5449Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M110.33 39.7446C110.014 39.7446 109.709 39.6881 109.433 39.5753C109.371 39.5527 109.314 39.5245 109.258 39.4963L104.23 36.9343C102.627 36.116 102.3 33.6218 103.468 31.1275C105.082 27.6852 105.974 23.9889 105.974 20.7215C105.974 17.7307 105.257 15.2364 103.903 13.487C103.835 13.487 103.761 13.487 103.688 13.487C102.215 13.487 100.641 13.9046 99.0156 14.7342L92.6163 17.9959C92.1084 18.2555 91.6062 18.3853 91.1265 18.3853C90.7371 18.3853 90.3759 18.3006 90.0486 18.1313L85.0206 15.5694C84.1008 15.101 83.5703 14.0401 83.5703 12.6631C83.5703 10.2874 85.1109 7.64074 87.0804 6.63626L93.4797 3.37452C96.1207 2.03145 98.6939 1.34863 101.126 1.34863C102.994 1.34863 104.738 1.75494 106.301 2.55062L111.329 5.11261C115.9 7.44323 118.524 12.8776 118.524 20.0218C118.524 25.1288 117.141 30.8848 114.63 36.2402C113.97 37.651 112.943 38.7909 111.814 39.3665C111.306 39.6261 110.81 39.7559 110.33 39.7559V39.7446Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M101.132 1.90744C102.926 1.90744 104.58 2.29681 106.053 3.04735L111.081 5.60934C115.291 7.75373 117.965 12.8269 117.965 20.0163C117.965 25.0387 116.6 30.7157 114.122 35.992C113.496 37.3294 112.531 38.3565 111.56 38.8531C111.143 39.0675 110.725 39.1804 110.33 39.1804C110.093 39.1804 109.862 39.1409 109.642 39.0506C109.597 39.0337 109.551 39.0111 109.506 38.9885L104.478 36.4265C103.18 35.7663 102.949 33.5485 103.976 31.359C105.624 27.8433 106.538 24.0624 106.538 20.7104C106.538 17.3584 105.663 14.7117 104.185 12.9229C104.021 12.9116 103.857 12.9059 103.694 12.9059C102.176 12.9059 100.511 13.3235 98.7674 14.2151L92.3681 17.4769C91.9279 17.7026 91.5159 17.8042 91.1322 17.8042C90.8331 17.8042 90.5566 17.7365 90.3083 17.6123L85.2803 15.0503C84.5805 14.6948 84.1403 13.8483 84.1403 12.652C84.1403 10.5019 85.5737 8.03025 87.34 7.12735L93.7393 3.86561C96.3578 2.53383 98.852 1.90179 101.132 1.90179M101.132 0.778809C98.6094 0.778809 95.9458 1.4842 93.2258 2.86677L86.8265 6.12851C84.6877 7.21764 83.0117 10.0844 83.0117 12.6576C83.0117 14.2546 83.655 15.4961 84.7724 16.0661L89.8004 18.6281C90.2067 18.8369 90.6582 18.9441 91.1378 18.9441C91.7078 18.9441 92.2947 18.7917 92.8872 18.4926L99.2865 15.2309C100.805 14.4578 102.266 14.0571 103.626 14.0458C104.8 15.6823 105.415 17.9735 105.415 20.716C105.415 23.9044 104.546 27.516 102.96 30.885C101.657 33.6614 102.097 36.4773 103.976 37.4367L109.004 39.9986C109.077 40.0382 109.151 40.072 109.23 40.1002C109.58 40.2413 109.952 40.309 110.336 40.309C110.906 40.309 111.493 40.1567 112.08 39.8576C113.315 39.2255 114.438 37.9897 115.149 36.4717C117.694 31.0486 119.094 25.2023 119.094 20.0163C119.094 12.652 116.357 7.03705 111.589 4.60486L106.561 2.04287C104.913 1.20204 103.084 0.778809 101.126 0.778809H101.132Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M59.3729 71.9951C57.505 71.9951 55.7613 71.5888 54.1982 70.7931L49.1701 68.2311C44.5992 65.9005 41.9751 60.4661 41.9751 53.3219C41.9751 40.2467 50.7276 25.1513 61.4834 19.6718C61.9913 19.4123 62.4936 19.2825 62.9732 19.2825C63.3626 19.2825 63.7238 19.3671 64.0511 19.5364L69.0791 22.0984C69.999 22.5668 70.5294 23.6277 70.5294 25.0046C70.5294 27.3804 68.9888 30.027 67.0194 31.0315C60.1291 34.5415 54.5255 44.2308 54.5255 52.6278C54.5255 55.6187 55.2421 58.1129 56.5965 59.8623C56.6642 59.8623 56.7376 59.8623 56.8109 59.8623C58.2838 59.8623 59.8582 59.4447 61.4834 58.6152L67.8828 55.3534C68.3907 55.0939 68.8929 54.9641 69.3726 54.9641C69.762 54.9641 70.1231 55.0487 70.4504 55.218L75.4784 57.78C76.3983 58.2484 76.9287 59.3093 76.9287 60.6806C76.9287 63.0563 75.3882 65.703 73.4187 66.7074L67.0194 69.9692C64.3784 71.3122 61.8051 71.9951 59.3729 71.9951Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M62.9731 19.8525C63.2722 19.8525 63.5487 19.9203 63.797 20.0444L68.825 22.6064C69.5248 22.9619 69.9706 23.8084 69.9706 25.0047C69.9706 27.1548 68.5372 29.6265 66.7709 30.5294C59.7114 34.124 53.9723 44.039 53.9723 52.6279C53.9723 55.9743 54.847 58.6266 56.3255 60.4154C56.4892 60.4267 56.6528 60.4324 56.8165 60.4324C58.3345 60.4324 59.9992 60.0148 61.7429 59.1232L68.1422 55.8614C68.5824 55.6357 68.9943 55.5341 69.3781 55.5341C69.6771 55.5341 69.9537 55.6018 70.202 55.726L75.23 58.288C75.9298 58.6435 76.3756 59.49 76.3756 60.6863C76.3756 62.8363 74.9422 65.308 73.1759 66.2109L66.7766 69.4727C64.1582 70.8045 61.6639 71.4365 59.3841 71.4365C57.5896 71.4365 55.9361 71.0471 54.4632 70.2966L49.4352 67.7346C45.2254 65.5902 42.5506 60.517 42.5506 53.3277C42.5506 40.4444 51.162 25.5747 61.7486 20.1798C62.1887 19.9541 62.6007 19.8525 62.9844 19.8525M62.9731 18.7239C62.4031 18.7239 61.8163 18.8763 61.2237 19.1754C50.2986 24.7451 41.4106 40.0606 41.4106 53.3277C41.4106 60.692 44.1476 66.3069 48.9161 68.7391L53.9441 71.3011C55.5919 72.1419 57.4203 72.5651 59.3784 72.5651C61.9009 72.5651 64.5645 71.8597 67.2845 70.4772L73.6838 67.2154C75.8225 66.1263 77.4985 63.2539 77.4985 60.6863C77.4985 59.0893 76.8552 57.8478 75.7379 57.2779L70.7099 54.7159C70.3036 54.5071 69.8521 54.3999 69.3724 54.3999C68.8025 54.3999 68.2156 54.5522 67.623 54.8513L61.2237 58.113C59.7057 58.8861 58.2442 59.2868 56.8842 59.2981C55.7104 57.6616 55.0953 55.3705 55.0953 52.6279C55.0953 44.4228 60.5635 34.9592 67.2788 31.5338C69.4176 30.4447 71.0936 27.5724 71.0936 25.0047C71.0936 23.4077 70.4503 22.1662 69.3329 21.5963L64.3049 19.0343C63.8986 18.8255 63.4471 18.7183 62.9675 18.7183L62.9731 18.7239Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M68.7349 49.259C68.3455 49.259 67.9843 49.1744 67.657 49.0051L62.629 46.4431C61.7092 45.9747 61.1787 44.9138 61.1787 43.5369C61.1787 41.1611 62.7193 38.5145 64.6887 37.51L77.4874 30.9865C77.9953 30.727 78.4975 30.5972 78.9772 30.5972C79.3665 30.5972 79.7277 30.6818 80.055 30.8511L85.0831 33.4131C86.0029 33.8815 86.5333 34.9424 86.5333 36.3193C86.5333 38.6951 84.9928 41.3417 83.0233 42.3462L70.2247 48.8697C69.7168 49.1293 69.2146 49.259 68.7349 49.259Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M78.9717 31.167C79.2707 31.167 79.5473 31.2347 79.7956 31.3588L84.8236 33.9208C85.5234 34.2763 85.9635 35.1228 85.9635 36.3191C85.9635 38.4692 84.5302 40.9409 82.7639 41.8438L69.9652 48.3673C69.5251 48.593 69.1131 48.6946 68.7294 48.6946C68.4303 48.6946 68.1538 48.6268 67.9055 48.5027L62.8774 45.9407C62.1777 45.5852 61.7375 44.7387 61.7375 43.5424C61.7375 41.3923 63.1709 38.9206 64.9372 38.0177L77.7358 31.4943C78.176 31.2685 78.5879 31.167 78.9717 31.167ZM78.9717 30.0383C78.4017 30.0383 77.8148 30.1907 77.2223 30.4898L64.4237 37.0133C62.2849 38.1024 60.6089 40.9691 60.6089 43.5424C60.6089 45.1394 61.2522 46.3809 62.3695 46.9508L67.3976 49.5128C67.8039 49.7216 68.2554 49.8288 68.735 49.8288C69.305 49.8288 69.8919 49.6765 70.4844 49.3774L83.283 42.8539C85.4218 41.7648 87.0978 38.8981 87.0978 36.3248C87.0978 34.7278 86.4545 33.4863 85.3371 32.9163L80.3091 30.3543C79.9028 30.1455 79.4513 30.0383 78.9717 30.0383Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M106.972 13.6731C109.777 15.1008 111.566 18.4867 111.566 23.2777C111.566 26.6297 110.657 30.4106 109.004 33.9263C107.977 36.1158 108.214 38.3336 109.506 38.9939L104.478 36.4319C103.18 35.7716 102.949 33.5539 103.976 31.3643C105.624 27.8486 106.538 24.0677 106.538 20.7157C106.538 15.9247 104.749 12.5388 101.944 11.1111L106.972 13.6731Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M111.081 5.61473C107.745 3.91615 103.451 4.05158 98.7672 6.43863L92.3678 9.70037C90.6015 10.6033 89.1682 13.075 89.1682 15.225C89.1682 16.4213 89.614 17.2678 90.3137 17.6233L85.2857 15.0614C84.5859 14.7058 84.1401 13.8594 84.1401 12.663C84.1401 10.513 85.5735 8.04128 87.3398 7.13838L93.7391 3.87664C98.4229 1.48959 102.717 1.35416 106.052 3.05274L111.081 5.61473Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M111.081 5.61478C115.29 7.75918 117.965 12.8324 117.965 20.0217C117.965 25.0441 116.6 30.7211 114.122 35.9975C113.496 37.3349 112.531 38.3619 111.56 38.8585C110.894 39.1971 110.217 39.2874 109.642 39.056C109.596 39.0391 109.551 39.0165 109.506 38.994C108.208 38.3337 107.977 36.116 109.004 33.9264C110.652 30.4108 111.566 26.6298 111.566 23.2778C111.566 18.4868 109.777 15.1009 106.972 13.6732C104.749 12.5389 101.888 12.6349 98.7672 14.2206L92.3679 17.4823C91.5835 17.883 90.8668 17.9055 90.3082 17.6177C89.6084 17.2622 89.1626 16.4158 89.1626 15.2194C89.1626 13.0694 90.596 10.5977 92.3623 9.69478L98.7616 6.43304C103.445 4.04599 107.74 3.91055 111.075 5.60914L111.081 5.61478Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M75.224 58.2822C74.6653 58.0001 73.9486 58.0226 73.1642 58.4177L66.7649 61.6794C63.6443 63.2708 60.7832 63.361 58.5598 62.2268L53.5317 59.6648C55.7551 60.7991 58.6162 60.7031 61.7369 59.1174L68.1362 55.8557C68.9206 55.455 69.6372 55.4324 70.1959 55.7202L75.224 58.2822Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.8248 22.6064C68.2662 22.3243 67.5495 22.3469 66.7651 22.7419C56.1786 28.1367 47.5671 43.0064 47.5671 55.8897C47.5671 63.0734 50.2476 68.1522 54.4518 70.2966L49.4237 67.7347C45.2139 65.5903 42.5391 60.5171 42.5391 53.3277C42.5391 40.4444 51.1505 25.5747 61.737 20.1799C62.5214 19.7792 63.2381 19.7567 63.7968 20.0445L68.8248 22.6064Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.825 22.6065C69.5248 22.962 69.9706 23.8085 69.9706 25.0048C69.9706 27.1548 68.5372 29.6265 66.7709 30.5294C59.7113 34.1241 53.9723 44.0391 53.9723 52.628C53.9723 57.419 55.7612 60.8049 58.5658 62.2326C60.7892 63.3669 63.6503 63.271 66.7709 61.6852L73.1702 58.4235C73.9546 58.0228 74.6713 58.0003 75.23 58.2881C75.9298 58.6436 76.3756 59.49 76.3756 60.6864C76.3756 62.8364 74.9422 65.3081 73.1759 66.211L66.7766 69.4728C62.0928 71.8598 57.7983 71.9952 54.4632 70.2967C50.2534 68.1523 47.5786 63.0791 47.5786 55.8897C47.5786 43.0064 56.19 28.1367 66.7766 22.7419C67.561 22.3412 68.2777 22.3187 68.8363 22.6065H68.825Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M84.8229 33.9209C84.2643 33.6387 83.5476 33.6613 82.7632 34.0563L69.9645 40.5798C68.1982 41.4827 66.7649 43.9544 66.7649 46.1044C66.7649 47.3008 67.2107 48.1473 67.9104 48.5028L62.8824 45.9408C62.1826 45.5853 61.7368 44.7388 61.7368 43.5425C61.7368 41.3924 63.1702 38.9207 64.9365 38.0178L77.7351 31.4943C78.5195 31.0937 79.2362 31.0711 79.7949 31.3589L84.8229 33.9209Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M84.8227 33.9209C85.5225 34.2764 85.9682 35.1229 85.9682 36.3193C85.9682 38.4693 84.5349 40.941 82.7686 41.8439L69.9699 48.3674C69.1856 48.768 68.4689 48.7906 67.9102 48.5028C67.2104 48.1473 66.7646 47.3008 66.7646 46.1045C66.7646 43.9544 68.198 41.4827 69.9643 40.5798L82.7629 34.0564C83.5473 33.6557 84.264 33.6331 84.8227 33.9209Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M111.019 57.9663C110.635 57.9663 110.268 57.8816 109.941 57.7123L104.913 55.1503C104.817 55.0995 104.727 55.0487 104.636 54.981L40.6376 9.71174C39.1308 8.64519 39.0631 5.90262 40.4739 3.46478C41.4953 1.70412 43.0585 0.564209 44.4636 0.564209C44.8474 0.564209 45.2085 0.648855 45.5358 0.81815L50.5639 3.38014C50.6598 3.43093 50.7501 3.48736 50.8404 3.54943L114.839 48.8187C116.346 49.8853 116.414 52.6278 115.003 55.0657C114.343 56.2 113.457 57.0972 112.509 57.5769C112.001 57.8365 111.498 57.9663 111.019 57.9663Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M44.4638 1.12863C44.7516 1.12863 45.0281 1.1907 45.282 1.3205L50.31 3.88248C50.3834 3.91634 50.4511 3.96149 50.5188 4.00663L114.518 49.2759C115.771 50.1619 115.771 52.6223 114.518 54.7836C113.891 55.8615 113.073 56.6628 112.255 57.0747C111.832 57.2892 111.414 57.402 111.019 57.402C110.726 57.402 110.449 57.34 110.201 57.2102L105.173 54.6482C105.099 54.6143 105.032 54.5692 104.964 54.524L40.965 9.25475C39.7122 8.36878 39.7122 5.90837 40.965 3.74705C41.9131 2.11053 43.3013 1.12863 44.4638 1.12863ZM44.4638 0C42.8385 0 41.123 1.21892 39.9888 3.18273C38.4312 5.87451 38.5723 8.94438 40.316 10.1746L104.315 55.4439C104.428 55.5229 104.541 55.5906 104.659 55.6527L109.687 58.2147C110.093 58.4235 110.545 58.5307 111.019 58.5307C111.589 58.5307 112.181 58.3783 112.768 58.0792C113.812 57.5488 114.783 56.5781 115.494 55.3479C117.051 52.6562 116.91 49.5863 115.167 48.3561L51.1678 3.0868C51.055 3.00779 50.9421 2.94008 50.8236 2.878L45.7955 0.316016C45.3892 0.107219 44.9434 0.00564327 44.4638 0.00564327V0Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M50.31 3.88255C49.0516 3.23924 47.1781 4.27193 45.993 6.31475C44.7402 8.47043 44.7402 10.9365 45.993 11.8225L109.992 57.0917C110.06 57.1369 110.127 57.182 110.201 57.2159L105.173 54.6539C105.099 54.6201 105.032 54.5749 104.964 54.5298L40.965 9.26047C39.7122 8.3745 39.7122 5.91409 40.965 3.75276C42.15 1.70994 44.0236 0.677249 45.282 1.32057L50.31 3.88255Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M50.3098 3.88236C50.3832 3.91622 50.4509 3.96137 50.5186 4.00651L114.518 49.2758C115.77 50.1618 115.77 52.6222 114.518 54.7835C113.891 55.8614 113.073 56.6627 112.255 57.0746C111.521 57.4471 110.793 57.5148 110.201 57.2101C110.127 57.1762 110.059 57.1311 109.992 57.0859L45.9928 11.8166C44.74 10.9306 44.74 8.47024 45.9928 6.30892C47.1779 4.2661 49.0514 3.2334 50.3098 3.87672V3.88236Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/module.tsx b/packages/propel/src/empty-state/assets/vertical-stack/module.tsx
new file mode 100644
index 0000000..f006e45
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/module.tsx
@@ -0,0 +1,382 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ModuleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="168"
+      viewBox="0 0 162 168"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M12.7461 135.993C12.7461 137.824 14.1171 139.651 16.8542 141.051L52.0981 159.009C57.5773 161.8 66.4573 161.8 71.9364 159.009L145.995 121.275C148.732 119.88 150.103 118.054 150.103 116.223V122.07C150.103 123.901 148.732 125.728 145.995 127.123L71.9364 164.857C66.4573 167.647 57.5773 167.647 52.0981 164.857L16.8542 146.898C14.1122 145.503 12.7461 143.672 12.7461 141.84V135.993Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.7461 135.993C12.7461 134.162 14.1171 132.335 16.8542 130.94L90.9124 93.2063C96.3916 90.4159 105.272 90.4159 110.751 93.2063L145.995 111.165C148.737 112.56 150.103 114.391 150.103 116.223C150.103 118.054 148.732 119.88 145.995 121.275L71.9364 159.009C66.4573 161.8 57.5773 161.8 52.0981 159.009L16.8542 141.051C14.1122 139.656 12.7461 137.824 12.7461 135.993Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M12.7461 117.521C12.7461 119.352 14.1171 121.179 16.8542 122.579L52.0981 140.537C57.5773 143.328 66.4573 143.328 71.9364 140.537L145.995 102.803C148.732 101.408 150.103 99.5817 150.103 97.7505V103.598C150.103 105.429 148.732 107.255 145.995 108.651L71.9364 146.385C66.4573 149.175 57.5773 149.175 52.0981 146.385L16.8542 128.426C14.1122 127.031 12.7461 125.2 12.7461 123.368V117.521Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.7461 117.521C12.7461 115.69 14.1171 113.863 16.8542 112.468L90.9124 74.7341C96.3916 71.9437 105.272 71.9437 110.751 74.7341L145.995 92.6928C148.737 94.088 150.103 95.9192 150.103 97.7504C150.103 99.5817 148.732 101.408 145.995 102.803L71.9364 140.537C66.4573 143.328 57.5773 143.328 52.0981 140.537L16.8542 122.579C14.1122 121.183 12.7461 119.352 12.7461 117.521Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M12.7461 99.0489C12.7461 100.88 14.1171 102.706 16.8542 104.107L52.0981 122.065C57.5773 124.856 66.4573 124.856 71.9364 122.065L145.995 84.3312C148.732 82.936 150.103 81.1096 150.103 79.2784V85.1256C150.103 86.9569 148.732 88.7833 145.995 90.1785L71.9364 127.912C66.4573 130.703 57.5773 130.703 52.0981 127.912L16.8542 109.954C14.1122 108.559 12.7461 106.727 12.7461 104.896V99.0489Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.7461 99.0489C12.7461 97.2176 14.1171 95.3912 16.8542 93.9959L90.9124 56.262C96.3916 53.4716 105.272 53.4716 110.751 56.262L145.995 74.2207C148.737 75.6159 150.103 77.4471 150.103 79.2783C150.103 81.1096 148.732 82.9359 145.995 84.3311L71.9364 122.065C66.4573 124.855 57.5773 124.855 52.0981 122.065L16.8542 104.107C14.1122 102.711 12.7461 100.88 12.7461 99.0489Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M63.8995 98.855C63.1196 98.855 62.3929 98.6758 61.7437 98.3269L57.5096 96.1712C55.6978 95.2459 54.6562 93.1095 54.6562 90.3094V49.2133C54.6562 44.1895 58.0183 38.3906 62.1555 36.2881L95.9315 19.0804C96.9682 18.5523 97.9807 18.2858 98.9399 18.2858C99.6908 18.2858 100.388 18.4505 101.018 18.7703L105.272 20.9406C107.122 21.8417 108.188 23.9927 108.188 26.8316V67.9229C108.188 72.9418 104.826 78.7406 100.689 80.848L66.9128 98.0557C65.8761 98.5838 64.8636 98.855 63.8995 98.855Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M98.9448 18.7703C99.6231 18.7703 100.248 18.9205 100.8 19.2015L105.054 21.3718C106.672 22.1615 107.704 24.0896 107.704 26.8316V67.9229C107.704 72.7868 104.463 78.3821 100.471 80.4168L66.6949 97.6245C65.7066 98.1284 64.7619 98.3706 63.8996 98.3706C63.1923 98.3706 62.5479 98.2107 61.9763 97.9007L57.7325 95.7401C56.1483 94.931 55.1455 93.0175 55.1455 90.3094V49.2133C55.1455 44.3494 58.3817 38.7539 62.3784 36.7192L96.1544 19.5115C97.1427 19.0077 98.0825 18.7703 98.9448 18.7703ZM98.9448 17.8014C97.9081 17.8014 96.8229 18.0872 95.7184 18.6492L61.9424 35.8569C57.592 38.0708 54.1815 43.9424 54.1815 49.2133V90.3094C54.1815 93.2984 55.3151 95.5899 57.2965 96.6024L61.5403 98.763C62.2379 99.1409 63.0421 99.3395 63.9044 99.3395C64.946 99.3395 66.036 99.0537 67.1405 98.4869L100.917 81.2791C105.267 79.0603 108.677 73.1937 108.677 67.9229V26.8316C108.677 23.7989 107.515 21.4929 105.485 20.4998L101.246 18.3392C100.548 17.9807 99.7732 17.8014 98.9497 17.8014H98.9448Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.084 27.5195C102.055 27.5001 102.026 27.4857 101.997 27.4711L102.021 27.4807C102.045 27.4904 102.065 27.505 102.084 27.5195Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M105.054 21.3719C104.986 21.338 104.918 21.3089 104.85 21.2798C104.782 21.2508 104.71 21.2216 104.637 21.1974C104.356 21.0957 104.061 21.0327 103.755 20.9988C103.692 20.9891 103.625 20.9843 103.557 20.9794C102.622 20.9165 101.575 21.149 100.471 21.711L66.6948 38.9187C62.6981 40.9534 59.462 46.5488 59.462 51.4127V92.5088C59.462 92.6978 59.4668 92.8867 59.4765 93.0659C59.4862 93.2112 59.4959 93.3517 59.5104 93.4873V93.497C59.525 93.6327 59.5395 93.7635 59.5589 93.8943C59.6025 94.214 59.6654 94.5193 59.743 94.81C59.7769 94.9311 59.8108 95.0473 59.8495 95.1588C59.8834 95.275 59.9222 95.3816 59.9658 95.4882C59.9997 95.5705 60.0336 95.6529 60.0675 95.7352C60.1402 95.8951 60.2177 96.0501 60.3001 96.1954C60.334 96.2633 60.3776 96.331 60.4163 96.3989C60.4212 96.4086 60.426 96.4183 60.4357 96.428C60.4745 96.4909 60.5181 96.554 60.5617 96.617C60.6343 96.7235 60.7119 96.8252 60.7942 96.9221C60.8524 96.9948 60.9153 97.0626 60.9783 97.1304C61.0413 97.1982 61.1091 97.2661 61.1769 97.3291C61.2351 97.3824 61.2932 97.4307 61.3513 97.4792C61.5451 97.6391 61.7534 97.7796 61.9763 97.9007L57.7325 95.7401C56.1483 94.931 55.1455 93.0175 55.1455 90.3094V49.2133C55.1455 44.3494 58.3816 38.754 62.3784 36.7193L96.1544 19.5115C97.9226 18.6104 99.5407 18.5572 100.8 19.2015L105.054 21.3719Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M102.021 27.4807L101.997 27.4711C102.026 27.4857 102.055 27.5001 102.084 27.5195C102.065 27.505 102.045 27.4904 102.021 27.4807Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M105.054 21.3718C104.986 21.3379 104.918 21.3089 104.85 21.2798C104.782 21.2507 104.71 21.2216 104.637 21.1974C104.356 21.0956 104.061 21.0327 103.755 20.9988C103.692 20.9891 103.625 20.9842 103.557 20.9794C102.622 20.9164 101.575 21.1489 100.471 21.7109L66.6948 38.9186C62.6981 40.9533 59.462 46.5488 59.462 51.4127V92.5088C59.462 92.6977 59.4668 92.8866 59.4765 93.0658C59.4862 93.2112 59.4959 93.3516 59.5104 93.4873V93.497C59.5249 93.6326 59.5395 93.7634 59.5589 93.8942C59.6025 94.214 59.6654 94.5192 59.743 94.8099C59.7769 94.931 59.8108 95.0473 59.8495 95.1587C59.8834 95.275 59.9222 95.3815 59.9658 95.4881C59.9997 95.5705 60.0336 95.6528 60.0675 95.7352C60.1402 95.8951 60.2177 96.05 60.3001 96.1954C60.334 96.2632 60.3776 96.331 60.4163 96.3988C60.4212 96.4085 60.426 96.4182 60.4357 96.4279C60.4745 96.4909 60.5181 96.5539 60.5617 96.6169C60.6343 96.7235 60.7119 96.8252 60.7942 96.9221C60.8524 96.9947 60.9153 97.0625 60.9783 97.1303C61.0413 97.1982 61.1091 97.2661 61.1769 97.329C61.2351 97.3823 61.2932 97.4307 61.3513 97.4791C61.5451 97.639 61.7534 97.7796 61.9763 97.9007C63.2407 98.5837 64.8927 98.545 66.6948 97.6245L100.471 80.4168C104.463 78.3821 107.704 72.7867 107.704 67.9228V26.8316C107.704 24.0896 106.672 22.1615 105.054 21.3718Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M93.3252 73.5376C93.1847 73.5376 93.049 73.5037 92.9279 73.4456L88.6115 71.2461C88.2917 71.0814 88.1028 70.7326 88.1028 70.3015V63.1607C88.1028 62.5163 88.5097 61.8235 89.0523 61.5474L94.919 58.5584C95.0789 58.476 95.2436 58.4373 95.4035 58.4373C95.544 58.4373 95.6796 58.4711 95.8007 58.5293L100.117 60.7287C100.437 60.8886 100.626 61.2422 100.626 61.6734V68.8142C100.626 69.4585 100.219 70.1513 99.6763 70.4274L93.8096 73.4165C93.6498 73.4988 93.4851 73.5376 93.3252 73.5376Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M95.4035 58.9217C95.4665 58.9217 95.5294 58.9363 95.5827 58.9605L99.8992 61.1598C100.049 61.2373 100.141 61.4166 100.141 61.6734V68.8142C100.141 69.2744 99.8362 69.8024 99.4584 69.9962L93.5916 72.9854C93.4996 73.0338 93.4076 73.0531 93.33 73.0531C93.2671 73.0531 93.2041 73.0386 93.1508 73.0143L88.8343 70.815C88.6841 70.7375 88.5921 70.5582 88.5921 70.3015V63.1607C88.5921 62.7004 88.8973 62.1724 89.2752 61.9786L95.1419 58.9895C95.2339 58.941 95.326 58.9217 95.4035 58.9217ZM95.4035 57.9528C95.1661 57.9528 94.9287 58.0109 94.701 58.1271L88.8343 61.1163C88.1319 61.4748 87.6183 62.3371 87.6183 63.1607V70.3015C87.6183 70.9167 87.909 71.4303 88.3935 71.6774L92.7099 73.8767C92.9037 73.9736 93.1072 74.022 93.3252 74.022C93.5626 74.022 93.8 73.964 94.0277 73.8477L99.8944 70.8586C100.597 70.5001 101.11 69.6377 101.11 68.8142V61.6734C101.11 61.0581 100.82 60.5445 100.34 60.2975L96.0236 58.0982C95.8298 58.0013 95.6263 57.9528 95.4083 57.9528H95.4035Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M93.3252 52.992C93.1847 52.992 93.049 52.9581 92.9279 52.9L88.6115 50.7006C88.2917 50.5359 88.1028 50.1871 88.1028 49.7559V42.615C88.1028 41.9707 88.5097 41.278 89.0523 41.0018L94.919 38.0127C95.0789 37.9303 95.2436 37.8916 95.4035 37.8916C95.544 37.8916 95.6796 37.9256 95.8007 37.9837L100.117 40.1831C100.437 40.343 100.626 40.6966 100.626 41.1278V48.2686C100.626 48.9129 100.219 49.6056 99.6763 49.8818L93.8096 52.8709C93.6498 52.9533 93.4851 52.992 93.3252 52.992Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M95.4035 38.3713C95.4665 38.3713 95.5294 38.3857 95.5827 38.41L99.8992 40.6094C100.049 40.6869 100.141 40.8662 100.141 41.1229V48.2638C100.141 48.724 99.8362 49.252 99.4584 49.4458L93.5916 52.4348C93.4996 52.4833 93.4076 52.5027 93.33 52.5027C93.2671 52.5027 93.2041 52.4881 93.1508 52.4639L88.8343 50.2645C88.6841 50.187 88.5921 50.0078 88.5921 49.7511V42.6102C88.5921 42.15 88.8973 41.6219 89.2752 41.4281L95.1419 38.4391C95.2339 38.3906 95.326 38.3713 95.4035 38.3713ZM95.4035 37.4024C95.1661 37.4024 94.9287 37.4605 94.701 37.5767L88.8343 40.5658C88.1319 40.9243 87.6183 41.7867 87.6183 42.6102V49.7511C87.6183 50.3663 87.909 50.8798 88.3935 51.1268L92.7099 53.3263C92.9037 53.4232 93.1072 53.4716 93.3252 53.4716C93.5626 53.4716 93.8 53.4134 94.0277 53.2972L99.8944 50.3081C100.597 49.9496 101.11 49.0873 101.11 48.2638V41.1229C101.11 40.5077 100.82 39.9941 100.34 39.7471L96.0236 37.5476C95.8298 37.4507 95.6263 37.4024 95.4083 37.4024H95.4035Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M76.442 82.1415C76.3015 82.1415 76.1659 82.1076 76.0447 82.0494L71.7283 79.85C71.4085 79.6901 71.2196 79.3365 71.2196 78.9054V71.7645C71.2196 71.1202 71.6265 70.4274 72.1691 70.1513L78.0358 67.1622C78.1957 67.0799 78.3604 67.0411 78.5203 67.0411C78.6608 67.0411 78.7964 67.075 78.9175 67.1331L83.234 69.3326C83.5537 69.4924 83.7427 69.8461 83.7427 70.2772V77.4181C83.7427 78.0624 83.3357 78.7552 82.7932 79.0313L76.9264 82.0203C76.7666 82.1027 76.6019 82.1415 76.442 82.1415Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M78.5203 67.5256C78.5833 67.5256 78.6463 67.54 78.6996 67.5643L83.016 69.7637C83.1662 69.8412 83.2582 70.0205 83.2582 70.2772V77.418C83.2582 77.8783 82.953 78.4063 82.5752 78.6001L76.7085 81.5892C76.6164 81.6377 76.5244 81.657 76.4468 81.657C76.3839 81.657 76.3209 81.6424 76.2676 81.6182L71.9511 79.4189C71.801 79.3414 71.7089 79.1621 71.7089 78.9053V71.7645C71.7089 71.3043 72.0141 70.7763 72.392 70.5825L78.2587 67.5933C78.3508 67.5449 78.4428 67.5256 78.5203 67.5256ZM78.5203 66.5567C78.2829 66.5567 78.0455 66.6147 77.8179 66.731L71.9511 69.7202C71.2487 70.0787 70.7352 70.941 70.7352 71.7645V78.9053C70.7352 79.5206 71.0258 80.034 71.5103 80.2811L75.8267 82.4805C76.0157 82.5774 76.224 82.6259 76.442 82.6259C76.6794 82.6259 76.9168 82.5678 77.1445 82.4516L83.0112 79.4624C83.7136 79.1039 84.2271 78.2416 84.2271 77.418V70.2772C84.2271 69.662 83.9365 69.1484 83.452 68.9013L79.1356 66.702C78.9466 66.6051 78.7383 66.5567 78.5203 66.5567Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M76.442 61.5959C76.3015 61.5959 76.1659 61.562 76.0447 61.5039L71.7283 59.3044C71.4085 59.1446 71.2196 58.7908 71.2196 58.3597V51.2188C71.2196 50.5745 71.6265 49.8818 72.1691 49.6057L78.0358 46.6165C78.1957 46.5342 78.3604 46.4954 78.5203 46.4954C78.6608 46.4954 78.7964 46.5294 78.9175 46.5876L83.234 48.787C83.5537 48.9469 83.7427 49.3005 83.7427 49.7317V56.8725C83.7427 57.5168 83.3357 58.2095 82.7932 58.4856L76.9264 61.4748C76.7666 61.5571 76.6019 61.5959 76.442 61.5959Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M78.5203 46.975C78.5833 46.975 78.6463 46.9896 78.6996 47.0187L83.016 49.2181C83.1662 49.2956 83.2582 49.4749 83.2582 49.7317V56.8725C83.2582 57.3327 82.953 57.8607 82.5752 58.0545L76.7085 61.0435C76.6164 61.092 76.5244 61.1114 76.4468 61.1114C76.3839 61.1114 76.3209 61.0969 76.2676 61.0726L71.9511 58.8732C71.801 58.7957 71.7089 58.6164 71.7089 58.3597V51.2188C71.7089 50.7586 72.0141 50.2306 72.392 50.0368L78.2587 47.0478C78.3508 46.9993 78.4428 46.975 78.5203 46.975ZM78.5203 46.0061C78.2829 46.0061 78.0455 46.0643 77.8179 46.1806L71.9511 49.1696C71.2487 49.5281 70.7352 50.3904 70.7352 51.214V58.3549C70.7352 58.9702 71.0258 59.4836 71.5103 59.7307L75.8267 61.9301C76.0157 62.027 76.224 62.0755 76.442 62.0755C76.6794 62.0755 76.9168 62.0173 77.1445 61.901L83.0112 58.912C83.7136 58.5535 84.2271 57.6912 84.2271 56.8676V49.7268C84.2271 49.1116 83.9365 48.598 83.452 48.3509L79.1356 46.1515C78.9466 46.0546 78.7383 46.0061 78.5203 46.0061Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M99.8992 61.1598C99.7781 61.0968 99.6279 61.1017 99.4584 61.1889L93.5916 64.1779C93.2138 64.3717 92.9086 64.8998 92.9086 65.3601V72.5009C92.9086 72.7576 93.0006 72.9368 93.1508 73.0143L88.8343 70.815C88.6841 70.7375 88.5921 70.5582 88.5921 70.3014V63.1606C88.5921 62.7004 88.8973 62.1724 89.2752 61.9786L95.1419 58.9894C95.3115 58.9022 95.4616 58.8975 95.5827 58.9605L99.8992 61.1598Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.8992 61.1599C100.049 61.2374 100.141 61.4167 100.141 61.6734V68.8142C100.141 69.2745 99.8362 69.8025 99.4584 69.9963L93.5916 72.9854C93.4221 73.0726 93.2719 73.0774 93.1508 73.0144C93.0006 72.9369 92.9086 72.7577 92.9086 72.501V65.3601C92.9086 64.8999 93.2138 64.3718 93.5916 64.178L99.4584 61.189C99.6279 61.1018 99.7781 61.0969 99.8992 61.1599Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.8992 40.6143C99.7781 40.5513 99.6279 40.5562 99.4584 40.6434L93.5916 43.6324C93.2138 43.8262 92.9086 44.3542 92.9086 44.8145V51.9553C92.9086 52.212 93.0006 52.3913 93.1508 52.4688L88.8343 50.2694C88.6841 50.1919 88.5921 50.0127 88.5921 49.756V42.615C88.5921 42.1548 88.8973 41.6268 89.2752 41.433L95.1419 38.444C95.3115 38.3568 95.4616 38.3519 95.5827 38.4149L99.8992 40.6143Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.8992 40.6143C100.049 40.6918 100.141 40.8711 100.141 41.1278V48.2687C100.141 48.7289 99.8362 49.2569 99.4584 49.4507L93.5916 52.4397C93.4221 52.5269 93.2719 52.5318 93.1508 52.4688C93.0006 52.3913 92.9086 52.212 92.9086 51.9553V44.8145C92.9086 44.3542 93.2138 43.8262 93.5916 43.6324L99.4584 40.6434C99.6279 40.5562 99.7781 40.5513 99.8992 40.6143Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M83.0112 69.7637C82.8901 69.7007 82.7399 69.7056 82.5704 69.7928L76.7036 72.7819C76.3258 72.9756 76.0206 73.5038 76.0206 73.964V81.1048C76.0206 81.3616 76.1126 81.5407 76.2628 81.6183L71.9463 79.4189C71.7961 79.3414 71.7041 79.1622 71.7041 78.9054V71.7646C71.7041 71.3043 72.0093 70.7763 72.3872 70.5825L78.2539 67.5934C78.4234 67.5062 78.5736 67.5013 78.6947 67.5643L83.0112 69.7637Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M83.0112 69.7637C83.1614 69.8412 83.2534 70.0205 83.2534 70.2773V77.4181C83.2534 77.8783 82.9482 78.4063 82.5704 78.6001L76.7036 81.5893C76.5341 81.6765 76.3839 81.6812 76.2628 81.6183C76.1126 81.5407 76.0206 81.3616 76.0206 81.1048V73.964C76.0206 73.5038 76.3258 72.9756 76.7036 72.7819L82.5704 69.7928C82.7399 69.7056 82.8901 69.7008 83.0112 69.7637Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M83.0112 49.2182C82.8901 49.1552 82.7399 49.1601 82.5704 49.2473L76.7036 52.2363C76.3258 52.4301 76.0206 52.9581 76.0206 53.4183V60.5591C76.0206 60.8159 76.1126 60.9952 76.2628 61.0727L71.9463 58.8733C71.7961 58.7957 71.7041 58.6165 71.7041 58.3597V51.2189C71.7041 50.7587 72.0093 50.2306 72.3872 50.0369L78.2539 47.0478C78.4234 46.9606 78.5736 46.9557 78.6947 47.0187L83.0112 49.2182Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M83.0112 49.2182C83.1614 49.2957 83.2534 49.4749 83.2534 49.7317V56.8725C83.2534 57.3327 82.9482 57.8608 82.5704 58.0546L76.7036 61.0436C76.5341 61.1308 76.3839 61.1357 76.2628 61.0727C76.1126 60.9952 76.0206 60.8159 76.0206 60.5591V53.4183C76.0206 52.9581 76.3258 52.4301 76.7036 52.2363L82.5704 49.2472C82.7399 49.16 82.8901 49.1552 83.0112 49.2182Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M51.4299 8.83904C50.2914 8.25769 48.8187 8.30612 47.2151 9.12485L10.8425 27.66C7.21878 29.5057 4.27815 34.5779 4.27815 38.9913C4.27815 41.4523 5.19376 43.1867 6.62774 43.9182L4.46709 42.8185C3.02827 42.087 2.11749 40.3526 2.11749 37.8915C2.11749 33.483 5.05812 28.406 8.68182 26.5603L45.0545 8.02513C46.658 7.20641 48.1259 7.15798 49.2692 7.73932L51.4299 8.83904Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M51.4298 8.83903C52.8687 9.57055 53.7794 11.3049 53.7794 13.7659C53.7794 18.1744 50.8388 23.2514 47.2151 25.0972L10.8425 43.6323C9.23893 44.4511 7.77103 44.4996 6.62772 43.9182C5.1889 43.1867 4.27814 41.4523 4.27814 38.9913C4.27814 34.5827 7.21876 29.5057 10.8425 27.66L47.2151 9.12484C48.8187 8.30612 50.2865 8.25769 51.4298 8.83903Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.4024 35.4548C12.1602 35.5759 11.9664 35.4402 11.9664 35.1496C11.9664 34.8589 12.1602 34.5198 12.3976 34.3986C12.6398 34.2727 12.8336 34.4132 12.8336 34.7039C12.8336 34.9946 12.6398 35.3337 12.3976 35.4548H12.4024Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M12.4024 38.6327C12.1602 38.7539 11.9664 38.6183 11.9664 38.3276C11.9664 38.0369 12.1602 37.6978 12.3976 37.5767C12.6398 37.4507 12.8336 37.5913 12.8336 37.8819C12.8336 38.1726 12.6398 38.5116 12.3976 38.6327H12.4024Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M12.4024 32.2768C12.1602 32.3979 11.9664 32.2622 11.9664 31.9715C11.9664 31.6809 12.1602 31.3419 12.3976 31.2207C12.6398 31.0948 12.8336 31.2352 12.8336 31.5259C12.8336 31.8166 12.6398 32.1557 12.3976 32.2768H12.4024Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M20.236 31.463L14.5776 34.3454C14.3354 34.4665 14.1416 34.3308 14.1416 34.0353C14.1416 33.7398 14.3354 33.4056 14.5776 33.2845L20.236 30.4019C20.4782 30.2808 20.672 30.4165 20.672 30.712C20.672 31.0076 20.4782 31.3419 20.236 31.463Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M20.236 34.6409L14.5776 37.5235C14.3354 37.6446 14.1416 37.5089 14.1416 37.2133C14.1416 36.9178 14.3354 36.5835 14.5776 36.4624L20.236 33.58C20.4782 33.4588 20.672 33.5946 20.672 33.8901C20.672 34.1856 20.4782 34.5198 20.236 34.6409Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M20.236 28.2849L14.5776 31.1674C14.3354 31.2885 14.1416 31.1529 14.1416 30.8574C14.1416 30.5619 14.3354 30.2276 14.5776 30.1065L20.236 27.224C20.4782 27.1029 20.672 27.2385 20.672 27.534C20.672 27.8295 20.4782 28.1638 20.236 28.2849Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M45.2628 22.8591L40.4667 25.3006C39.8999 25.5913 39.4397 25.2619 39.4397 24.574V18.7364C39.4397 18.0485 39.8999 17.2491 40.4667 16.9632L45.2628 14.5216C45.8296 14.231 46.2898 14.5604 46.2898 15.2483V21.0859C46.2898 21.7739 45.8296 22.5733 45.2628 22.8591ZM40.4667 17.8013C40.2778 17.8982 40.1228 18.1647 40.1228 18.3924V24.23C40.1228 24.4577 40.2778 24.5691 40.4667 24.4723L45.2628 22.0306C45.4517 21.9337 45.6068 21.6673 45.6068 21.4396V15.602C45.6068 15.3743 45.4517 15.2629 45.2628 15.3597L40.4667 17.8013Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M44.2358 17.9613L41.8377 19.1821C41.6488 19.279 41.4938 19.1724 41.4938 18.9399C41.4938 18.7073 41.6488 18.4457 41.8377 18.3489L44.2358 17.128C44.4247 17.0311 44.5797 17.1377 44.5797 17.3703C44.5797 17.6028 44.4247 17.8644 44.2358 17.9613Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M43.5479 19.9814L41.4938 21.0279C41.3049 21.1248 41.1498 21.0182 41.1498 20.7857C41.1498 20.5531 41.3049 20.2915 41.4938 20.1946L43.5479 19.1482C43.7368 19.0513 43.8918 19.1578 43.8918 19.3904C43.8918 19.6229 43.7368 19.8845 43.5479 19.9814Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M44.2358 21.2991L42.5208 22.1711C42.3319 22.268 42.1769 22.1614 42.1769 21.9289C42.1769 21.6964 42.3319 21.4348 42.5208 21.3379L44.2358 20.4659C44.4247 20.369 44.5798 20.4755 44.5798 20.7081C44.5798 20.9406 44.4247 21.2022 44.2358 21.2991Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M29.0288 26.4829L27.3138 27.3548C26.9359 27.5486 26.6307 27.3306 26.6307 26.8703V24.7873C26.6307 24.3271 26.9359 23.7989 27.3138 23.6051L29.0288 22.7332C29.4066 22.5394 29.7119 22.7574 29.7119 23.2177V25.3007C29.7119 25.7609 29.4066 26.2891 29.0288 26.4829ZM27.3138 24.4385V26.5215L29.0288 25.6496V23.5665L27.3138 24.4385Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M32.793 24.5596L31.078 25.4315C30.7002 25.6253 30.395 25.4073 30.395 24.9471V22.864C30.395 22.4038 30.7002 21.8757 31.078 21.6819L32.793 20.81C33.1709 20.6162 33.4761 20.8342 33.4761 21.2944V23.3775C33.4761 23.8377 33.1709 24.3658 32.793 24.5596ZM31.0829 22.5151V24.5983L32.7978 23.7262V21.6432L31.0829 22.5151Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M32.793 29.1474L31.078 30.0193C30.7002 30.2131 30.395 29.995 30.395 29.5348V27.4518C30.395 26.9915 30.7002 26.4634 31.078 26.2696L32.793 25.3977C33.1709 25.2039 33.4761 25.4219 33.4761 25.8822V27.9652C33.4761 28.4254 33.1709 28.9536 32.793 29.1474ZM31.0829 27.103V29.186L32.7978 28.3141V26.2309L31.0829 27.103Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M29.0288 31.0658L27.3138 31.9378C26.9359 32.1316 26.6307 31.9136 26.6307 31.4533V29.3702C26.6307 28.91 26.9359 28.3819 27.3138 28.1881L29.0288 27.3161C29.4066 27.1223 29.7119 27.3403 29.7119 27.8006V29.8837C29.7119 30.344 29.4066 30.872 29.0288 31.0658ZM27.3138 29.0214V31.1046L29.0288 30.2325V28.1494L27.3138 29.0214Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.51568 77.4083C3.18344 76.7301 2.33565 75.1266 2.33565 72.8448C2.33565 68.7609 5.05826 64.0616 8.41067 62.3564L30.8892 50.904C32.3717 50.1482 33.7281 50.0997 34.7842 50.6375L32.6236 49.5378C31.5675 49 30.211 49.0485 28.7286 49.8042L6.25001 61.2568C2.89276 62.9669 0.174988 67.666 0.174988 71.7451C0.174988 74.0269 1.02278 75.6304 2.35502 76.3086L4.51568 77.4083Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.51567 77.4083C5.57177 77.946 6.92823 77.8976 8.41066 77.1418L30.8892 65.6894C34.2465 63.9793 36.9643 59.2802 36.9643 55.2011C36.9643 52.9193 36.1165 51.3157 34.7842 50.6375C33.7281 50.0997 32.3716 50.1482 30.8892 50.904L8.41066 62.3563C5.0534 64.0665 2.33563 68.7657 2.33563 72.8448C2.33563 75.1266 3.18342 76.7301 4.51567 77.4083Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.487 66.7552C11.5694 66.6293 11.6905 66.576 11.768 66.6293C11.8455 66.6826 11.8503 66.8279 11.7825 66.9635L11.768 66.9926L8.8322 72.0648C8.74984 72.2053 8.61904 72.2732 8.53668 72.215C8.45433 72.1569 8.45433 71.997 8.53668 71.8517L11.4725 66.7795L11.487 66.7552Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M9.31179 68.446C9.31179 68.2328 9.1713 68.1359 8.99689 68.2231C8.82249 68.3103 8.682 68.5526 8.682 68.7658C8.682 68.9789 8.82249 69.0758 8.99689 68.9886C9.1713 68.9014 9.31179 68.6591 9.31179 68.446ZM9.72841 68.2328C9.72841 68.727 9.39899 69.2937 8.99205 69.502C8.58511 69.7104 8.25568 69.4779 8.25568 68.9838C8.25568 68.4896 8.58511 67.9228 8.99205 67.7144C9.39899 67.5061 9.72841 67.7387 9.72841 68.2328Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M11.6178 70.0786C11.6178 69.8655 11.4773 69.7686 11.3029 69.8558C11.1285 69.943 10.988 70.1852 10.988 70.3983C10.988 70.6115 11.1285 70.7084 11.3029 70.6212C11.4773 70.534 11.6178 70.2918 11.6178 70.0786ZM12.0393 69.8654C12.0393 70.3595 11.7098 70.9264 11.3029 71.1347C10.896 71.343 10.5665 71.1105 10.5665 70.6163C10.5665 70.1222 10.896 69.5554 11.3029 69.3471C11.7098 69.1388 12.0393 69.3713 12.0393 69.8654Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M10.082 64.8998C10.082 64.7642 10.1741 64.6092 10.2855 64.5559C10.9395 64.2652 11.5742 64.1684 12.141 64.2895C12.7659 64.4203 13.2746 64.8029 13.6282 65.394C13.977 65.985 14.1514 66.7699 14.1321 67.6564C14.1127 68.5478 13.8947 69.5119 13.512 70.4517C13.1244 71.3916 12.5818 72.2733 11.9423 73.0048C11.298 73.7363 10.581 74.2885 9.85921 74.6034C9.13737 74.9183 8.43975 74.991 7.83903 74.8069C7.29645 74.6374 6.84591 74.2692 6.53586 73.7266C6.48257 73.6346 6.52617 73.465 6.6279 73.3536C6.72964 73.2422 6.85076 73.2324 6.90405 73.3245C7.18503 73.8041 7.58228 74.1287 8.06673 74.2788C8.60931 74.4436 9.23426 74.3806 9.88342 74.0948C10.5326 73.809 11.1818 73.3147 11.7583 72.6559C12.3348 71.997 12.824 71.2074 13.1729 70.3596C13.5217 69.5118 13.7106 68.6447 13.73 67.8405C13.7494 67.0411 13.5943 66.3338 13.2794 65.8009C12.9645 65.268 12.5043 64.9241 11.9423 64.8078C11.4385 64.7012 10.8766 64.7836 10.2952 65.0403C10.1838 65.0888 10.0917 65.0259 10.0917 64.8902L10.082 64.8998Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.0455 62.2934L19.8195 66.4839C19.1413 66.8279 18.5939 66.4404 18.5939 65.6168C18.5939 64.7933 19.1413 63.8485 19.8195 63.5046L28.0455 59.3141C28.7238 58.9701 29.2712 59.3576 29.2712 60.1812C29.2712 61.0047 28.7238 61.9495 28.0455 62.2934Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M157.128 35.2127C157.67 34.9365 158.014 34.2825 158.014 33.3523V21.4736C158.014 19.807 156.905 17.8886 155.534 17.191L124.795 1.52865C124.19 1.2186 123.633 1.20408 123.202 1.42208L125.362 0.322369C125.793 0.104365 126.351 0.118944 126.956 0.428993L157.695 16.0912C159.066 16.7889 160.175 18.7073 160.175 20.3738V32.2526C160.175 33.1828 159.831 33.8368 159.288 34.113L157.128 35.2127Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M157.128 35.2126C156.697 35.4306 156.139 35.416 155.534 35.1059L124.795 19.4437C123.424 18.7461 122.315 16.8276 122.315 15.1611V3.28233C122.315 2.35218 122.659 1.69819 123.202 1.42205C123.633 1.20405 124.19 1.21856 124.795 1.52861L155.534 17.1909C156.905 17.8885 158.014 19.807 158.014 21.4735V33.3523C158.014 34.2824 157.67 34.9365 157.128 35.2126Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M135.419 14.5847L142.551 18.2181C143.137 18.5184 143.612 18.1793 143.612 17.4671C143.612 16.755 143.137 15.9314 142.551 15.6359L135.419 12.0025C134.833 11.7021 134.359 12.0413 134.359 12.7534C134.359 13.4656 134.833 14.2891 135.419 14.5847Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M135.928 20.5531L145.927 25.6496C146.751 26.0662 147.415 25.5962 147.415 24.5982C147.415 23.5954 146.746 22.4472 145.927 22.0306L135.928 16.9343C135.105 16.5177 134.441 16.9875 134.441 17.9855C134.441 18.9883 135.109 20.1365 135.928 20.5531Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M129.436 10.898C129.485 11.0578 129.596 11.2128 129.722 11.2758C129.897 11.3679 130.042 11.2613 130.042 11.0433V10.6412C130.042 10.5104 129.994 10.3603 129.906 10.244C129.819 10.1277 129.713 10.055 129.611 10.0502L127.552 9.99206C127.431 9.99206 127.349 10.0938 127.349 10.2585V13.0296C127.349 13.1701 127.407 13.3251 127.499 13.4462C127.596 13.5673 127.712 13.6303 127.809 13.6157L128.104 13.5722C128.259 13.5479 128.317 13.3396 128.24 13.1071C128.187 12.952 128.09 12.8261 127.983 12.7631V10.8495L129.432 10.8883L129.436 10.898Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M128.167 9.06674C128.216 9.2266 128.327 9.38164 128.453 9.44462C128.627 9.53667 128.773 9.4301 128.773 9.21209V8.80996C128.773 8.67916 128.724 8.52901 128.637 8.41274C128.55 8.29647 128.443 8.22379 128.342 8.21894L126.283 8.16081C126.162 8.16081 126.079 8.26257 126.079 8.42728V11.1983C126.079 11.3388 126.137 11.4938 126.229 11.615C126.326 11.7361 126.443 11.799 126.54 11.7845L126.835 11.7409C126.99 11.7167 127.048 11.5083 126.971 11.2758C126.917 11.1208 126.82 10.9948 126.714 10.9319V9.0183L128.162 9.05704L128.167 9.06674Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M131.307 12.143C131.219 12.0219 131.113 11.9492 131.016 11.9492L128.957 11.8911C128.836 11.8911 128.753 11.9977 128.753 12.1527V14.9286C128.753 15.0594 128.802 15.2048 128.889 15.321C128.981 15.4421 129.088 15.5148 129.185 15.5148L131.239 15.573C131.365 15.5826 131.447 15.476 131.447 15.3113V12.5354C131.447 12.4046 131.399 12.2593 131.307 12.143ZM130.812 14.7203L129.388 14.6767V12.7534L130.812 12.797V14.7203Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx b/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx
new file mode 100644
index 0000000..a74ad6e
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/no-access.tsx
@@ -0,0 +1,172 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function NoAccessVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="169"
+      viewBox="0 0 161 169"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M0.25 131.683C0.25 133.816 1.847 135.943 5.03537 137.574L46.0892 158.493C52.4716 161.744 62.8156 161.744 69.1979 158.493L155.465 114.539C158.653 112.914 160.25 110.786 160.25 108.653V115.464C160.25 117.597 158.653 119.725 155.465 121.35L69.1979 165.304C62.8156 168.555 52.4716 168.555 46.0892 165.304L5.03537 144.385C1.84135 142.76 0.25 140.627 0.25 138.494V131.683Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 131.682C0.25 129.549 1.847 127.422 5.03537 125.797L91.3021 81.8424C97.6844 78.5919 108.028 78.5919 114.411 81.8424L155.465 102.761C158.659 104.387 160.25 106.52 160.25 108.653C160.25 110.786 158.653 112.913 155.465 114.539L69.1979 158.493C62.8156 161.743 52.4716 161.743 46.0892 158.493L5.03537 137.574C1.84135 135.949 0.25 133.816 0.25 131.682Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M0.25 110.165C0.25 112.299 1.847 114.426 5.03537 116.057L46.0892 136.976C52.4716 140.226 62.8156 140.226 69.1979 136.976L155.465 93.0215C158.653 91.3963 160.25 89.2688 160.25 87.1357V93.947C160.25 96.0802 158.653 98.2076 155.465 99.8328L69.1979 143.787C62.8156 147.038 52.4716 147.038 46.0892 143.787L5.03537 122.868C1.84135 121.243 0.25 119.11 0.25 116.977V110.165Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 110.165C0.25 108.032 1.847 105.905 5.03537 104.28L91.3021 60.325C97.6844 57.0746 108.028 57.0746 114.411 60.325L155.465 81.2442C158.659 82.8694 160.25 85.0025 160.25 87.1356C160.25 89.2687 158.653 91.3961 155.465 93.0213L69.1979 136.976C62.8156 140.226 52.4716 140.226 46.0892 136.976L5.03537 116.057C1.84135 114.431 0.25 112.298 0.25 110.165Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M0.25 88.6479C0.25 90.781 1.847 92.9086 5.03537 94.5395L46.0892 115.458C52.4716 118.709 62.8156 118.709 69.1979 115.458L155.465 71.5042C158.653 69.8789 160.25 67.7515 160.25 65.6184V72.4296C160.25 74.5627 158.653 76.6902 155.465 78.3155L69.1979 122.27C62.8156 125.52 52.4716 125.52 46.0892 122.27L5.03537 101.351C1.84135 99.7254 0.25 97.5924 0.25 95.4592V88.6479Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.25 88.6478C0.25 86.5147 1.847 84.3873 5.03537 82.762L91.3021 38.8077C97.6844 35.5573 108.028 35.5573 114.411 38.8077L155.465 59.7267C158.659 61.3519 160.25 63.4851 160.25 65.6183C160.25 67.7514 158.653 69.8788 155.465 71.504L69.1979 115.458C62.8156 118.709 52.4716 118.709 46.0892 115.458L5.03537 94.5393C1.84135 92.9141 0.25 90.7809 0.25 88.6478Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M78.8308 85.753C75.9133 85.753 73.2046 85.1322 70.7555 83.9077C70.716 83.8964 70.6823 83.885 70.6428 83.8625L65.6146 81.3006C58.3745 77.61 54.2212 68.9815 54.2212 57.6219C54.2212 47.6505 57.387 36.6126 63.1317 26.5396C63.1317 26.5396 63.5267 25.8567 63.555 25.8059C69.4125 15.8176 77.1776 7.99055 85.4166 3.78642C89.6151 1.64767 93.7062 0.564209 97.5662 0.564209C100.518 0.564209 103.266 1.20181 105.732 2.46023L110.754 5.01658C110.754 5.01658 110.788 5.03354 110.805 5.04483C118.017 8.74672 122.153 17.3581 122.153 28.7008C122.153 38.6892 118.982 49.7385 113.22 59.8171C113.135 59.9808 112.915 60.3589 112.814 60.5225C106.956 70.5222 99.1914 78.3379 90.9581 82.5364C86.7709 84.6695 82.6851 85.753 78.8308 85.753ZM72.3922 74.2184C73.5265 74.5062 74.7228 74.6586 75.9531 74.6586C78.9496 74.6586 82.1322 73.812 85.4221 72.136C90.9185 69.337 96.3189 64.3317 100.664 58.0114L70.8403 36.906C67.6689 43.7567 65.9927 50.7993 65.9927 57.3228C65.9927 64.8225 68.2614 70.8156 72.3922 74.2241V74.2184ZM105.551 49.4224C108.717 42.566 110.393 35.5177 110.393 29.0056C110.393 21.5115 108.125 15.5185 103.994 12.11C102.859 11.8166 101.657 11.6699 100.422 11.6699C97.4251 11.6699 94.2422 12.5163 90.9636 14.1923C85.4728 16.9913 80.078 21.9968 75.7271 28.3171L105.551 49.4224Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M97.5715 1.12863C100.455 1.12863 103.119 1.76066 105.483 2.96265L110.511 5.52465C110.483 5.50772 110.449 5.4964 110.421 5.48511C117.244 8.9105 121.595 17.093 121.595 28.7066C121.595 38.9432 118.214 49.9587 112.735 59.5407C112.723 59.569 112.351 60.2123 112.329 60.2405C106.759 69.7435 99.1178 77.7454 90.7039 82.0342C86.4997 84.1786 82.4874 85.1888 78.8307 85.1888C75.8003 85.1888 73.0127 84.4946 70.5636 83.1685C70.6764 83.2306 70.7893 83.304 70.9022 83.3604L65.8741 80.7984C59.1023 77.3448 54.7854 69.1848 54.7854 57.622C54.7854 47.3966 58.16 36.3926 63.6226 26.8218C63.6282 26.8106 64.0175 26.139 64.0288 26.1221C69.6098 16.6021 77.2565 8.58878 85.676 4.29435C89.8914 2.14996 93.9091 1.13428 97.5715 1.13428M102.6 3.69063C102.193 3.69063 101.781 3.70182 101.364 3.73004C101.781 3.70746 102.193 3.69063 102.6 3.69063ZM103.994 3.74133C103.644 3.71876 103.294 3.70193 102.938 3.69628C103.294 3.70193 103.644 3.71312 103.994 3.74133ZM100.997 3.76393C100.67 3.79214 100.337 3.82032 100.004 3.85982C100.337 3.82032 100.67 3.7865 100.997 3.76393H101.014C101.014 3.76393 101.003 3.76393 100.997 3.76393ZM104.846 3.83171C104.987 3.84864 105.122 3.86548 105.258 3.88241C105.122 3.86548 104.981 3.84864 104.846 3.83171C104.705 3.81478 104.569 3.80345 104.428 3.78652C104.569 3.79781 104.705 3.81478 104.846 3.83171ZM99.0614 4.0009C98.9147 4.02347 98.7679 4.05176 98.6156 4.07998C98.7623 4.05176 98.9147 4.02911 99.0614 4.0009ZM107.34 4.3113C107.221 4.27744 107.097 4.24927 106.979 4.21541C107.097 4.24362 107.221 4.27744 107.34 4.3113ZM96.0029 4.71759C95.9182 4.74016 95.8392 4.76845 95.7546 4.79102C95.8392 4.7628 95.9182 4.74016 96.0029 4.71759C96.2117 4.65551 96.4149 4.59918 96.6237 4.54275C96.4205 4.59918 96.2117 4.65551 96.0029 4.71759ZM108.553 4.69513C108.661 4.73463 108.768 4.77411 108.869 4.81361C108.762 4.77411 108.655 4.73463 108.553 4.69513C108.424 4.64998 108.299 4.60471 108.169 4.55956C108.299 4.60471 108.429 4.64434 108.553 4.69513ZM95.1564 4.9828C94.8573 5.07873 94.5638 5.19163 94.2647 5.29884C94.5638 5.18598 94.8629 5.07873 95.1564 4.9828C95.1564 4.9828 95.1563 4.9828 95.1619 4.9828C95.1619 4.9828 95.162 4.9828 95.1564 4.9828ZM110.037 5.30449C109.8 5.19163 109.558 5.07873 109.315 4.9828C109.558 5.08437 109.8 5.19727 110.037 5.30449ZM91.6068 6.41053C91.81 6.31459 92.0075 6.22431 92.205 6.13402C92.0075 6.22431 91.8043 6.31459 91.6068 6.41053ZM105.771 50.2746C109.022 43.4464 110.952 36.0088 110.952 29.0057C110.952 20.9811 108.407 14.9656 104.253 11.5967C103.04 11.275 101.759 11.1057 100.421 11.1057C97.4306 11.1057 94.1463 11.9352 90.7097 13.6846C84.7505 16.7206 79.2709 22.0364 74.9483 28.4527L105.777 50.269M109.433 14.2772C109.495 14.328 109.558 14.3786 109.62 14.435C109.558 14.3843 109.495 14.328 109.433 14.2772C109.332 14.1925 109.225 14.1078 109.118 14.0231C109.225 14.1078 109.326 14.1925 109.433 14.2772ZM110.455 15.2139C110.302 15.0615 110.144 14.9091 109.986 14.7624C110.144 14.9091 110.297 15.0615 110.455 15.2139ZM111.239 16.0773H111.245C111.245 16.0773 111.245 16.0773 111.239 16.0773C111.098 15.908 110.952 15.7386 110.805 15.575C110.952 15.7386 111.098 15.9024 111.239 16.0773ZM111.995 17.0479C111.854 16.8504 111.708 16.6529 111.561 16.461C111.708 16.6472 111.854 16.8504 111.995 17.0479ZM112.746 18.1878C112.588 17.9282 112.43 17.6742 112.266 17.4259C112.436 17.6742 112.594 17.9282 112.746 18.1878ZM113.502 19.5534C113.316 19.1753 113.119 18.8086 112.915 18.4587C113.119 18.8142 113.316 19.181 113.502 19.5534ZM114.4 21.6696C114.439 21.7712 114.473 21.8728 114.512 21.98C114.478 21.8784 114.439 21.7712 114.4 21.6696C114.343 21.5172 114.287 21.3648 114.225 21.2125C114.281 21.3648 114.343 21.5172 114.4 21.6696ZM114.919 23.3005C114.845 23.0353 114.766 22.7813 114.682 22.5217C114.761 22.7757 114.845 23.0353 114.919 23.3005ZM115.173 24.2824C115.207 24.4179 115.235 24.5533 115.269 24.6887C115.24 24.5533 115.207 24.4179 115.173 24.2824C115.139 24.147 115.105 24.0116 115.071 23.8818C115.105 24.0172 115.139 24.147 115.173 24.2824ZM115.545 26.139C115.5 25.8569 115.449 25.5746 115.393 25.2981C115.449 25.5746 115.494 25.8569 115.545 26.139ZM115.765 27.7021C115.731 27.3917 115.692 27.0757 115.652 26.771C115.697 27.0757 115.731 27.3861 115.765 27.7021ZM115.906 29.3782C115.884 29.017 115.861 28.6614 115.827 28.3116C115.861 28.6614 115.884 29.0227 115.906 29.3782ZM115.98 31.5225C115.98 31.5225 115.98 31.5507 115.98 31.562C115.98 31.5507 115.98 31.5338 115.98 31.5225C115.98 30.9751 115.963 30.4334 115.94 29.903C115.963 30.4334 115.98 30.9695 115.98 31.5225ZM75.9529 75.223C78.9494 75.223 82.2337 74.3935 85.676 72.6384C91.6352 69.6024 97.1203 64.2866 101.443 57.8704L70.6143 36.0596C67.3582 42.8878 65.4282 50.3254 65.4282 57.3229C65.4282 65.3531 67.9734 71.3687 72.1267 74.7377C73.3343 75.0593 74.6153 75.223 75.9471 75.223M59.9036 62.8532C59.8923 62.6387 59.8698 62.4244 59.8642 62.2099C59.8755 62.43 59.8923 62.6387 59.9036 62.8532ZM59.9998 64.1737C60.0223 64.4164 60.0503 64.6591 60.0786 64.9017C60.0503 64.6591 60.0223 64.422 59.9998 64.1737C59.9998 64.1737 59.9998 64.1681 59.9998 64.1624C59.9998 64.1624 59.9998 64.1681 59.9998 64.1737ZM60.3439 66.7864C60.3044 66.5381 60.2593 66.2899 60.2254 66.0416C60.2593 66.2956 60.3044 66.5438 60.3439 66.7864ZM60.6881 68.5811C60.6373 68.3384 60.5808 68.0957 60.5357 67.8531C60.5865 68.1014 60.6373 68.344 60.6881 68.5811ZM61.1113 70.274C61.0492 70.0483 60.9871 69.8169 60.925 69.5799C60.9871 69.8113 61.0436 70.0426 61.1113 70.274ZM62.8439 74.8561C62.7875 74.7376 62.7309 74.6079 62.6745 74.4894C62.7309 74.6135 62.7818 74.7376 62.8439 74.8561ZM89.0732 75.9565C89.2086 75.9001 89.3441 75.8438 89.4738 75.7817C89.3384 75.8438 89.203 75.8945 89.0732 75.9565ZM63.7127 76.4476C63.6676 76.3686 63.6169 76.2952 63.5661 76.2162C63.6113 76.2952 63.6619 76.3686 63.7127 76.4476ZM88.2604 76.2952C88.1418 76.3403 88.0235 76.3855 87.9107 76.425C88.0292 76.3798 88.1475 76.3403 88.2604 76.2952ZM74.8976 76.4645C74.7904 76.4137 74.683 76.3686 74.5757 76.3178C74.683 76.3686 74.7904 76.4194 74.8976 76.4645ZM75.8512 76.8708C75.7271 76.8256 75.5973 76.7748 75.4732 76.7241C75.5973 76.7748 75.7214 76.82 75.8512 76.8708ZM86.816 76.8087C86.7369 76.8369 86.6522 76.8595 86.5732 76.8821C86.6522 76.8595 86.7369 76.8312 86.816 76.8087ZM76.6525 77.1473C76.5735 77.1247 76.4888 77.0966 76.4098 77.0684C76.4888 77.0966 76.5735 77.1191 76.6525 77.1473ZM77.8037 77.4464C77.6627 77.4182 77.5215 77.3844 77.386 77.3449C77.5271 77.3787 77.6627 77.4125 77.8037 77.4464ZM64.3674 77.4803C64.4633 77.6157 64.5594 77.7455 64.6553 77.8809C64.5594 77.7455 64.4577 77.6157 64.3674 77.4803C64.3674 77.4803 64.3674 77.4803 64.3674 77.4746C64.3674 77.4746 64.3674 77.4746 64.3674 77.4803ZM78.6502 77.6044C78.701 77.6157 78.7573 77.6214 78.8081 77.627C78.7573 77.6214 78.701 77.6101 78.6502 77.6044C78.5599 77.5875 78.4753 77.5762 78.3906 77.5592C78.4753 77.5762 78.5656 77.5875 78.6502 77.6044ZM83.526 77.5818C83.3792 77.6044 83.2325 77.6269 83.0914 77.6438C83.2381 77.6269 83.3849 77.5988 83.526 77.5818ZM79.5645 77.7116C79.525 77.7116 79.491 77.706 79.4515 77.7003C79.491 77.7003 79.525 77.706 79.5645 77.7116ZM81.9796 77.7512C82.0925 77.7455 82.2054 77.7286 82.3183 77.7229C82.2054 77.7342 82.0925 77.7455 81.9796 77.7512ZM80.902 77.7849C80.8117 77.7849 80.7268 77.7794 80.6421 77.7737C80.7268 77.7737 80.8173 77.7849 80.902 77.7849ZM65.4056 78.8628C65.3436 78.7895 65.2874 78.7217 65.231 78.6483C65.2874 78.7217 65.3492 78.7951 65.4056 78.8628ZM66.5569 80.1438C66.4214 80.0084 66.2918 79.873 66.162 79.7319C66.2918 79.873 66.4271 80.0084 66.5569 80.1438ZM67.1609 80.7307C67.3019 80.8605 67.4372 80.9846 67.5783 81.1088C67.4372 80.9846 67.2963 80.8605 67.1609 80.7307C67.1609 80.7307 67.1607 80.7307 67.1551 80.7251C67.1551 80.7251 67.1552 80.7251 67.1609 80.7307ZM68.5491 81.8875C68.4362 81.8028 68.3288 81.7182 68.2159 81.6279C68.3288 81.7126 68.4362 81.8028 68.5491 81.8875ZM69.6664 82.6494C69.7115 82.6776 69.751 82.7057 69.7962 82.7283C69.751 82.7001 69.7115 82.6719 69.6664 82.6494ZM97.5715 0C93.6157 0 89.4456 1.10609 85.1624 3.28434C76.8275 7.53363 68.9778 15.4396 63.0525 25.5465C62.9566 25.7045 62.7196 26.1221 62.6406 26.2575C56.8451 36.4095 53.6567 47.549 53.6567 57.6163C53.6567 69.1961 57.9231 78.0107 65.3607 81.8029L70.3886 84.3649V84.3536C72.9506 85.6572 75.7834 86.3174 78.8307 86.3174C82.7809 86.3174 86.9456 85.2113 91.2175 83.0387C99.5468 78.7951 107.391 70.9004 113.305 60.8104C113.423 60.6186 113.615 60.2913 113.717 60.0994C119.524 49.9418 122.723 38.7908 122.723 28.7066C122.723 17.1212 118.457 8.31235 111.019 4.52581L105.991 1.95815C103.441 0.66023 100.608 0 97.566 0H97.5715ZM76.5059 28.1761C80.7496 22.1436 85.9412 17.3809 91.2175 14.6891C94.4171 13.0582 97.5153 12.2286 100.421 12.2286C101.567 12.2286 102.679 12.3584 103.728 12.618C107.662 15.9305 109.823 21.7317 109.823 28.9944C109.823 35.2357 108.265 41.9737 105.314 48.5592L76.5001 28.1705L76.5059 28.1761ZM72.6516 73.7049C68.7184 70.398 66.5569 64.5912 66.5569 57.3229C66.5569 51.0816 68.1144 44.3437 71.0714 37.7638L99.8853 58.1469C95.6416 64.1738 90.4499 68.9422 85.1679 71.6339C81.9626 73.2648 78.8646 74.0944 75.9584 74.0944C74.8185 74.0944 73.7124 73.9645 72.6571 73.7049H72.6516Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M110.443 53.5758C113.908 46.5501 115.979 38.819 115.979 31.562C115.979 22.1041 112.452 15.4227 106.911 12.5955L101.883 10.0334C107.424 12.855 110.952 19.5364 110.952 29C110.952 36.257 108.88 43.9881 105.416 51.0138L110.443 53.5758Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M74.5025 76.2838C78.8928 78.5242 84.5474 78.338 90.7097 75.2004C96.6688 72.1644 102.154 66.8485 106.477 60.4322L101.448 57.8704C97.1258 64.2866 91.6407 69.6024 85.6815 72.6384C79.5192 75.776 73.865 75.9622 69.4746 73.7218L74.5025 76.2838Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M106.471 60.4322L70.97 35.3091L65.9419 32.7471L101.443 57.8703L106.471 60.4322Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M110.511 5.52477C105.145 2.79349 98.2373 3.01914 90.7037 6.85082C82.2841 11.1453 74.6377 19.1586 69.0567 28.6786C69.0454 28.6955 68.6559 29.367 68.6502 29.3783C63.1877 38.9491 59.8133 49.9531 59.8133 60.1785C59.8133 71.7412 64.1302 79.9069 70.902 83.3549L65.8739 80.7929C59.1021 77.3449 54.7852 69.1792 54.7852 57.6165C54.7852 47.3911 58.1598 36.3871 63.6224 26.8163C63.628 26.805 64.0173 26.1335 64.0285 26.1166C69.6096 16.5966 77.2563 8.58325 85.6758 4.28882C93.2094 0.451486 100.116 0.225843 105.483 2.96276L110.511 5.52477Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M90.7039 75.1949C76.771 82.2939 65.4282 74.2751 65.4282 57.3174C65.4282 50.066 67.4994 42.3349 70.97 35.3092L106.471 60.4267C102.148 66.8429 96.663 72.1589 90.7039 75.1949ZM110.444 53.576L74.9428 28.4527C79.2654 22.0365 84.7447 16.7207 90.7039 13.6847C104.642 6.57997 115.979 14.6045 115.979 31.5621C115.979 38.8192 113.908 46.5503 110.444 53.576ZM90.7039 6.85078C82.2843 11.1452 74.6379 19.1586 69.0569 28.6785C69.0456 28.6955 68.6561 29.367 68.6504 29.3783C63.1879 38.949 59.8135 49.9531 59.8135 60.1784C59.8135 80.9057 73.6729 90.7078 90.7039 82.0286C99.1178 77.7398 106.759 69.7379 112.329 60.2349C112.351 60.2067 112.723 59.5634 112.735 59.5352C118.214 49.9531 121.595 38.9376 121.595 28.701C121.595 7.97375 107.74 -1.82836 90.7039 6.85078Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M88.7065 64.1906C88.447 64.1906 88.1931 64.185 87.9392 64.1737C87.7811 64.1681 87.6288 64.1286 87.4933 64.0552L82.4652 61.4932C82.0476 61.2788 81.805 60.8104 81.8163 60.2404C81.9066 53.305 86.3533 45.4441 91.9175 42.1259L88.9945 40.6362C87.4878 39.8687 86.6243 38.108 86.6243 35.8056C86.6243 31.7482 89.35 27.0531 92.6964 25.3489C93.5485 24.9144 94.3837 24.6943 95.1793 24.6943C95.8057 24.6943 96.3869 24.8298 96.9117 25.1006L101.94 27.6626C103.447 28.4301 104.31 30.1907 104.31 32.4931C104.31 35.6193 102.713 39.1633 100.349 41.4205L105.027 43.8019C107.577 45.0998 109.067 48.102 109.118 52.0353C109.129 52.6448 108.853 53.3219 108.407 53.7959C105.202 57.2213 101.782 59.868 98.2379 61.6625C94.9479 63.3385 91.7371 64.1906 88.7123 64.1906H88.7065Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M95.1733 25.2588C95.7094 25.2588 96.2117 25.3772 96.6519 25.6029L101.68 28.1649C102.944 28.8082 103.745 30.3318 103.745 32.4932C103.745 35.8057 101.86 39.5358 99.3211 41.5674C99.4621 41.6238 99.6033 41.6746 99.7388 41.7423L104.767 44.3043C107.041 45.4612 108.503 48.1812 108.553 52.0411C108.559 52.5038 108.339 53.0399 107.995 53.4123C104.851 56.7643 101.437 59.4109 97.9836 61.166C94.6993 62.842 91.5675 63.6321 88.7121 63.6321C88.4638 63.6321 88.2154 63.6264 87.9728 63.6151C87.8938 63.6151 87.8205 63.5925 87.7584 63.5587L82.7303 60.9966C82.5102 60.8838 82.3805 60.6187 82.3861 60.2575C82.4764 53.1076 87.2844 44.9871 93.1194 42.126C93.1194 42.126 93.125 42.126 93.1307 42.126L89.2538 40.1509C87.9897 39.5076 87.1883 37.984 87.1883 35.8227C87.1883 31.9459 89.7673 27.4877 92.9557 25.8681C93.7458 25.4675 94.4963 25.2757 95.1791 25.2757M95.1733 24.1301C94.2873 24.1301 93.3677 24.3728 92.4366 24.8468C88.8588 26.6695 86.0542 31.4831 86.0542 35.8057C86.0542 38.3282 87.0304 40.2694 88.7347 41.1385L90.7831 42.1825C85.4616 45.8562 81.3364 53.4744 81.2517 60.2293C81.2404 61.0193 81.6017 61.6795 82.2112 61.9898L87.2393 64.5518C87.4481 64.6591 87.6738 64.7155 87.9108 64.7325C88.176 64.7438 88.4411 64.7494 88.7063 64.7494C91.8269 64.7494 95.1171 63.8803 98.4917 62.1592C102.086 60.3308 105.563 57.6447 108.813 54.1742C109.355 53.5929 109.688 52.769 109.676 52.0185C109.625 47.8708 108.017 44.6937 105.275 43.2942L101.285 41.2626C103.446 38.9038 104.874 35.5122 104.874 32.4932C104.874 29.9707 103.898 28.0295 102.194 27.1604L97.1655 24.5984C96.5617 24.288 95.89 24.1301 95.1733 24.1301Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M104.761 44.3042C102.966 43.39 100.658 43.4408 98.1414 44.6822C92.3064 47.5433 87.4985 55.6639 87.4082 62.8137C87.4082 63.1749 87.5323 63.4456 87.7523 63.5529L82.7245 60.9909C82.5044 60.878 82.3744 60.6072 82.3801 60.2517C82.4703 53.1019 87.2783 44.9813 93.1133 42.1202C95.6358 40.8844 97.9382 40.828 99.7327 41.7422L104.761 44.3042Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M104.761 44.3042C107.035 45.461 108.497 48.181 108.548 52.0409C108.553 52.5036 108.333 53.0397 107.989 53.4121C104.846 56.7642 101.432 59.4108 97.978 61.1658C94.4059 62.9829 91.0142 63.7673 87.9669 63.615C87.8879 63.615 87.8146 63.5923 87.7525 63.5585C87.5325 63.4456 87.4027 63.1749 87.4084 62.8193C87.4987 55.6695 92.3066 47.5489 98.1416 44.6879C100.664 43.452 102.967 43.3956 104.761 44.3098V44.3042Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M101.68 28.1648C100.675 27.6569 99.3887 27.6963 97.9779 28.413C94.7951 30.0382 92.2105 34.4908 92.2105 38.3676C92.2105 40.5289 93.0119 42.0525 94.2759 42.6958L89.2478 40.1338C87.9838 39.4905 87.1826 37.9669 87.1826 35.8056C87.1826 31.9288 89.7614 27.4707 92.9497 25.8512C94.3605 25.1345 95.6528 25.0892 96.6517 25.6028L101.68 28.1648Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M101.68 28.1648C102.944 28.8081 103.745 30.3317 103.745 32.4931C103.745 36.3699 101.166 40.8281 97.9779 42.4476C96.5671 43.1643 95.2748 43.2094 94.2759 42.6959C93.0119 42.0526 92.2104 40.529 92.2104 38.3677C92.2104 34.4908 94.7895 30.0327 97.9779 28.4131C99.3886 27.6964 100.681 27.6513 101.68 28.1648Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/page.tsx b/packages/propel/src/empty-state/assets/vertical-stack/page.tsx
new file mode 100644
index 0000000..5940032
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/page.tsx
@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function PageVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="177"
+      viewBox="0 0 162 177"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.2958 52.3993C13.0691 51.7747 11.4935 51.8254 9.76603 52.7088C5.86647 54.6952 2.70968 60.1534 2.70968 64.8914C2.70968 67.5362 3.69442 69.4043 5.24186 70.1921L2.73219 68.9148C1.18475 68.127 0.200012 66.2588 0.200012 63.6141C0.200012 58.8705 3.36241 53.4122 7.25634 51.4315C8.97823 50.5537 10.5594 50.4974 11.7861 51.122L14.2958 52.3993Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.2957 52.3996C15.8432 53.1874 16.8279 55.0556 16.8279 57.7003C16.8279 62.4439 13.6655 67.9022 9.77156 69.8829C8.04968 70.7607 6.46848 70.817 5.24178 70.1924C3.69433 69.4046 2.70959 67.5364 2.70959 64.8917C2.70959 60.1481 5.87201 54.6898 9.76594 52.7091C11.4878 51.8313 13.069 51.775 14.2957 52.3996Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.4541 62.0109C11.6511 61.6732 11.9155 61.4031 12.1969 61.2568L13.7837 60.4465C13.975 60.3509 14.1326 60.4578 14.1326 60.6941C14.1326 60.9305 13.975 61.2006 13.7837 61.2962L12.1969 62.1065C12.1068 62.1515 12.0168 62.2416 11.9493 62.3597C11.8818 62.4779 11.848 62.6017 11.848 62.7142V64.6443C11.848 64.8807 11.6904 65.1508 11.4991 65.2464C11.3078 65.3421 11.1502 65.2352 11.1502 64.9988V63.0687C11.1502 62.7311 11.2628 62.3485 11.4597 62.0109H11.4541Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.70253 58.0775C8.89385 57.9819 9.05141 58.0888 9.05141 58.3251V59.0341C9.05141 59.2592 9.12457 59.4393 9.25399 59.5293C9.38341 59.6194 9.56348 59.6194 9.74917 59.5293C10.0249 59.3886 10.295 59.3886 10.4919 59.5293C10.6889 59.67 10.8014 59.9345 10.8014 60.2777C10.8014 60.5084 10.959 60.621 11.1503 60.5253C11.2403 60.4803 11.3304 60.3903 11.3979 60.2721C11.4654 60.1596 11.4992 60.0301 11.4992 59.9176C11.4992 59.2142 11.9719 58.3983 12.5458 58.1057L13.6544 57.543C13.8457 57.4473 14.0032 57.5542 14.0032 57.7906C14.0032 58.0269 13.8457 58.297 13.6544 58.3927L12.5458 58.9554C12.3545 59.051 12.1969 59.3267 12.1969 59.5575C12.1969 59.8951 12.0844 60.2777 11.8875 60.6153C11.6905 60.953 11.426 61.2231 11.1447 61.3694C10.5651 61.662 10.098 61.33 10.098 60.6266C10.098 60.5141 10.0587 60.424 9.99677 60.379C9.93487 60.334 9.84483 60.334 9.74917 60.379C9.37779 60.5703 9.02328 60.5703 8.7588 60.379C8.49433 60.1933 8.34802 59.8332 8.34802 59.383V58.674C8.34802 58.4377 8.50558 58.1676 8.6969 58.0719L8.70253 58.0775Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.62048 62.8213C6.62048 62.5849 6.77804 62.3148 6.96936 62.2192L7.9991 61.6958C8.27483 61.5552 8.54493 61.5552 8.74188 61.6958C8.93883 61.8365 9.05136 62.101 9.05136 62.4442V62.8719C9.05136 62.9844 9.09077 63.0745 9.15266 63.1195C9.22019 63.1645 9.30458 63.1645 9.40024 63.1195C9.67597 62.9788 9.94607 62.9788 10.143 63.1195C10.34 63.2602 10.4525 63.5246 10.4525 63.8679V65.5504C10.4525 65.7867 10.2949 66.0568 10.1036 66.1525C9.9123 66.2481 9.75475 66.1412 9.75475 65.9049V64.2224C9.75475 64.1099 9.71536 64.0198 9.65346 63.9748C9.58594 63.9298 9.50153 63.9298 9.40587 63.9748C9.13015 64.1155 8.86004 64.1155 8.66309 63.9748C8.46615 63.8341 8.35361 63.5697 8.35361 63.2264V62.7987C8.35361 62.6862 8.31423 62.5962 8.25233 62.5512C8.1848 62.5061 8.1004 62.5061 8.00474 62.5512L6.97497 63.0745C6.78365 63.1701 6.6261 63.0632 6.6261 62.8269L6.62048 62.8213Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.4469 57.4696C8.70812 58.353 7.30136 60.7895 7.30136 62.9053C7.30136 65.0211 8.70812 66.0171 10.4469 65.1336C12.1857 64.2502 13.5924 61.8136 13.5924 59.6979C13.5924 57.5821 12.1857 56.5861 10.4469 57.4696ZM6.60361 63.2598C6.60361 60.677 8.32549 57.7003 10.4525 56.6199C12.5796 55.5395 14.3014 56.7549 14.3014 59.3434C14.3014 61.9318 12.5796 64.9029 10.4525 65.9833C8.32549 67.0637 6.60361 65.8483 6.60361 63.2598Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <g opacity="0.2">
+        <path
+          d="M0.65564 139.889C0.65564 142.016 2.24809 144.137 5.42738 145.764L46.3643 166.623C52.7285 169.864 63.0429 169.864 69.4072 166.623L155.428 122.794C158.607 121.173 160.2 119.052 160.2 116.925V123.717C160.2 125.844 158.607 127.965 155.428 129.586L69.4072 173.415C63.0429 176.656 52.7285 176.656 46.3643 173.415L5.42738 152.556C2.24246 150.935 0.65564 148.808 0.65564 146.681V139.889Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.655701 139.889C0.655701 137.762 2.24815 135.641 5.42744 134.02L91.4484 90.1908C97.8126 86.9496 108.127 86.9496 114.491 90.1908L155.428 111.05C158.613 112.671 160.2 114.798 160.2 116.925C160.2 119.052 158.607 121.173 155.428 122.794L69.4072 166.623C63.043 169.864 52.7286 169.864 46.3644 166.623L5.42744 145.764C2.24252 144.143 0.655701 142.016 0.655701 139.889Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M0.65564 118.433C0.65564 120.56 2.24809 122.682 5.42738 124.308L46.3643 145.167C52.7285 148.409 63.0429 148.409 69.4072 145.167L155.428 101.338C158.607 99.7176 160.2 97.5961 160.2 95.4691V102.261C160.2 104.388 158.607 106.509 155.428 108.13L69.4072 151.959C63.0429 155.2 52.7285 155.2 46.3643 151.959L5.42738 131.1C2.24246 129.479 0.65564 127.352 0.65564 125.225V118.433Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.655701 118.433C0.655701 116.306 2.24815 114.185 5.42744 112.564L91.4484 68.7348C97.8126 65.4937 108.127 65.4937 114.491 68.7348L155.428 89.5944C158.613 91.215 160.2 93.342 160.2 95.469C160.2 97.5961 158.607 99.7175 155.428 101.338L69.4072 145.167C63.043 148.408 52.7286 148.408 46.3644 145.167L5.42744 124.308C2.24252 122.687 0.655701 120.56 0.655701 118.433Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M0.655701 96.977C0.655701 99.104 2.24815 101.225 5.42744 102.852L46.3644 123.711C52.7286 126.952 63.043 126.952 69.4072 123.711L155.428 79.882C158.607 78.2614 160.2 76.14 160.2 74.0129V80.8048C160.2 82.9318 158.607 85.0532 155.428 86.6738L69.4072 130.503C63.043 133.744 52.7286 133.744 46.3644 130.503L5.42744 109.644C2.24252 108.023 0.655701 105.896 0.655701 103.769V96.977Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.655762 96.9769C0.655762 94.8499 2.24821 92.7285 5.4275 91.1079L91.4485 47.2787C97.8127 44.0375 108.127 44.0375 114.491 47.2787L155.428 68.1382C158.613 69.7588 160.2 71.8858 160.2 74.0129C160.2 76.1399 158.608 78.2613 155.428 79.8819L69.4073 123.711C63.0431 126.952 52.7286 126.952 46.3644 123.711L5.4275 102.852C2.24258 101.231 0.655762 99.104 0.655762 96.9769Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M68.552 97.3814C67.9049 97.3814 67.2972 97.2407 66.7514 96.9594L61.7377 94.4047C60.1677 93.6057 59.2674 91.7712 59.2674 89.3741V30.6275C59.2674 26.3903 62.1147 21.4892 65.6091 19.7054L92.7653 5.86842C92.8441 5.82903 92.9341 5.80652 93.0186 5.80652C93.103 5.80652 93.193 5.82903 93.2717 5.86842L98.2855 8.4231C98.2855 8.4231 98.3305 8.45124 98.353 8.46249L113.439 19.1314C113.591 19.2383 113.675 19.4071 113.675 19.5928V67.3273C113.675 71.5644 110.828 76.4656 107.334 78.2494L71.1236 96.7005C70.2345 97.1507 69.368 97.3814 68.5408 97.3814H68.552Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M93.0241 6.36943L98.0378 8.92412L113.124 19.593V67.3275C113.124 71.3846 110.423 76.0494 107.086 77.7488L70.876 96.1999C70.0488 96.622 69.261 96.8189 68.5464 96.8189C67.9837 96.8189 67.466 96.6951 67.0046 96.4588L61.9909 93.9041C60.6685 93.2288 59.8301 91.6364 59.8301 89.3743V30.6277C59.8301 26.5706 62.5311 21.9058 65.8623 20.2064L93.0185 6.36943M93.0241 5.24402C92.8497 5.24402 92.6753 5.28341 92.5121 5.36781L65.3558 19.2048C61.6251 21.1067 58.7047 26.1204 58.7047 30.6277V89.3743C58.7047 91.9909 59.7175 94.011 61.4844 94.9057L66.4981 97.4604C67.1227 97.7812 67.8149 97.9387 68.552 97.9387C69.4692 97.9387 70.4258 97.6911 71.3937 97.1959L107.604 78.7448C111.335 76.8428 114.255 71.8291 114.255 67.3218V19.5987C114.255 19.2329 114.081 18.8897 113.777 18.6815L98.6906 8.01254C98.6456 7.97877 98.6005 7.95064 98.5499 7.92813L93.5362 5.37344C93.373 5.28903 93.1986 5.24965 93.0241 5.24965V5.24402Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M98.0378 8.92383L70.8816 22.7608C67.5503 24.4602 64.8494 29.125 64.8494 33.1821V91.9287C64.8494 94.1908 65.6878 95.7833 67.0101 96.4585L61.9964 93.9038C60.6741 93.2286 59.8356 91.6361 59.8356 89.374V30.6274C59.8356 26.5703 62.5366 21.9055 65.8679 20.2061L93.0241 6.36914L98.0378 8.92383Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M98.0376 8.92383L113.124 19.5984V67.3328C113.124 71.3899 110.423 76.0547 107.092 77.7541L70.8814 96.2053C69.4071 96.9537 68.0566 96.9987 67.01 96.4697C65.6876 95.7945 64.8492 94.202 64.8492 91.94V33.1934C64.8492 29.1363 67.5502 24.4714 70.8814 22.772L98.0376 8.93508V8.92383Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M98.0377 8.92383V19.9416C98.0377 23.9987 100.739 25.9063 104.07 24.2126L113.124 19.5984"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M98.0377 8.92383V19.9416C98.0377 23.9987 100.739 25.9063 104.07 24.2126L113.124 19.5984"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M93.5306 66.0128L76.233 74.8248C75.1638 75.3706 74.2972 74.7572 74.2972 73.4574C74.2972 72.1575 75.1638 70.6664 76.233 70.1205L93.5306 61.3086C94.5997 60.7627 95.4663 61.3761 95.4663 62.6759C95.4663 63.9758 94.5997 65.467 93.5306 66.0128Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M101.735 47.6831L76.233 60.676C75.1639 61.2218 74.2973 60.6084 74.2973 59.3086C74.2973 58.0087 75.1639 56.5176 76.233 55.9717L101.735 42.9788C102.804 42.433 103.671 43.0464 103.671 44.3462C103.671 45.6461 102.804 47.1372 101.735 47.6831Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M137.028 6.86407C138.254 6.23946 139.83 6.29011 141.557 7.17356C145.457 9.15991 148.614 14.6182 148.614 19.3562C148.614 22.0009 147.629 23.8691 146.082 24.6569L148.591 23.3795C150.139 22.5917 151.123 20.7235 151.123 18.0788C151.123 13.3352 147.961 7.87694 144.067 5.89621C142.345 5.01839 140.764 4.96212 139.537 5.58672L137.028 6.86407Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M137.028 6.86443C135.48 7.65222 134.495 9.52041 134.495 12.1651C134.495 16.9088 137.658 22.367 141.552 24.3477C143.274 25.2256 144.855 25.2818 146.082 24.6572C147.629 23.8694 148.614 22.0012 148.614 19.3565C148.614 14.6129 145.451 9.15465 141.557 7.17392C139.836 6.2961 138.254 6.23983 137.028 6.86443Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M137.911 11.653C137.911 11.3941 138.086 11.2703 138.294 11.3829L145.221 14.911C145.435 15.0179 145.603 15.3162 145.603 15.575C145.603 15.8339 145.429 15.9577 145.221 15.8451L138.294 12.317C138.08 12.21 137.911 11.9118 137.911 11.653ZM137.911 13.9938C137.911 13.735 138.086 13.6112 138.294 13.7237L142.143 15.6876C142.357 15.7945 142.525 16.0927 142.525 16.3516C142.525 16.6104 142.351 16.7342 142.143 16.6217L138.294 14.6578C138.08 14.5509 137.911 14.2527 137.911 13.9938ZM138.299 15.5975C138.086 15.4906 137.917 15.6088 137.917 15.8676C137.917 16.1265 138.091 16.4247 138.299 16.5316L140.995 17.9046C141.209 18.0115 141.377 17.8934 141.377 17.6345C141.377 17.3757 141.203 17.0775 140.995 16.9705L138.299 15.5975ZM137.911 17.7415C137.911 17.4826 138.086 17.3588 138.294 17.4714L139.836 18.2535C140.049 18.3604 140.218 18.6587 140.218 18.9175C140.218 19.1764 140.044 19.3001 139.836 19.1876L138.294 18.4054C138.08 18.2985 137.911 18.0003 137.911 17.7415ZM144.697 17.6908C144.838 17.764 144.973 17.899 145.069 18.0678C145.17 18.2366 145.221 18.428 145.221 18.6024C145.221 18.7768 145.164 18.9063 145.069 18.9794L144.838 19.1426L144.095 17.854L144.326 17.6908C144.427 17.6233 144.557 17.6233 144.697 17.6908ZM143.881 18.0003L144.624 19.2889L142.936 20.4818C142.812 20.5719 142.66 20.6 142.492 20.5775L141.951 20.4987C141.951 20.4987 141.895 20.4818 141.873 20.4593C141.844 20.4368 141.822 20.4087 141.805 20.3749C141.788 20.3412 141.771 20.3074 141.766 20.268C141.76 20.2342 141.76 20.2005 141.766 20.1723L141.929 19.5984C141.98 19.4183 142.07 19.2776 142.193 19.1932L143.881 18.0003Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.44199 40.8974C6.81176 40.5766 6.41223 39.817 6.41223 38.7366V24.939C6.41223 23.0033 7.70084 20.775 9.2933 19.9647L44.997 1.77236C45.7004 1.41223 46.3475 1.39535 46.8483 1.64857L44.3387 0.371221C43.8379 0.118003 43.1908 0.134884 42.4874 0.495016L6.78361 18.6873C5.19115 19.4976 3.90256 21.7259 3.90256 23.6617V37.4592C3.90256 38.5396 4.30209 39.2993 4.93232 39.62L7.44199 40.8974Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.44181 40.8976C7.94262 41.1508 8.58974 41.1339 9.29312 40.7738L44.9969 22.5815C46.5893 21.7712 47.8779 19.5429 47.8779 17.6072V3.8096C47.8779 2.72921 47.4784 1.96955 46.8482 1.64881C46.3474 1.39559 45.7002 1.41247 44.9969 1.7726L9.29312 19.9649C7.70066 20.7752 6.41205 23.0035 6.41205 24.9392V38.7368C6.41205 39.8172 6.81158 40.5769 7.44181 40.8976Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M28.8699 20.3929C28.8699 20.151 28.7067 20.0384 28.5098 20.1397L24.9028 21.9798C24.7059 22.0811 24.5427 22.3624 24.5427 22.6044C24.5427 22.8463 24.7059 22.9589 24.9028 22.8576L28.5098 21.0176C28.7067 20.9163 28.8699 20.6349 28.8699 20.3929Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M29.5902 22.6604C29.5902 22.4184 29.427 22.3059 29.2301 22.4072L24.177 24.9788C23.98 25.08 23.8168 25.3614 23.8168 25.6034C23.8168 25.8453 23.98 25.9579 24.177 25.8566L29.2301 23.285C29.427 23.1837 29.5902 22.9024 29.5902 22.6604Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M30.3105 17.0223C30.3105 16.7804 30.1473 16.6678 29.9504 16.7691L23.4567 20.0778C23.2598 20.1791 23.0966 20.4605 23.0966 20.7024C23.0966 20.9444 23.2598 21.057 23.4567 20.9557L29.9504 17.6469C30.1473 17.5457 30.3105 17.2643 30.3105 17.0223Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.8305 27.5438C14.8305 27.3019 14.6673 27.1893 14.4704 27.2906L10.1431 29.4964C9.9462 29.5977 9.78302 29.8791 9.78302 30.121C9.78302 30.363 9.9462 30.4755 10.1431 30.3742L14.4704 28.1684C14.6673 28.0671 14.8305 27.7858 14.8305 27.5438Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.5507 29.812C15.5507 29.5701 15.3875 29.4575 15.1906 29.5588L10.1375 32.1304C9.94054 32.2317 9.77734 32.513 9.77734 32.755C9.77734 32.9969 9.94054 33.1095 10.1375 33.0082L15.1906 30.4366C15.3875 30.3353 15.5507 30.054 15.5507 29.812Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.9912 23.8077C16.9912 23.5658 16.828 23.4532 16.631 23.5545L10.1374 26.8632C9.94045 26.9645 9.77725 27.2459 9.77725 27.4878C9.77725 27.7298 9.94045 27.8424 10.1374 27.7411L16.631 24.4323C16.828 24.3311 16.9912 24.0497 16.9912 23.8077Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44.5019 12.4244C44.5019 12.1825 44.3387 12.0699 44.1417 12.1712L39.8145 14.377C39.6176 14.4783 39.4544 14.7597 39.4544 15.0016C39.4544 15.2436 39.6176 15.3561 39.8145 15.2549L44.1417 13.049C44.3387 12.9478 44.5019 12.6664 44.5019 12.4244Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44.5017 15.058C44.5017 14.816 44.3385 14.7035 44.1416 14.8048L39.0885 17.3763C38.8915 17.4776 38.7283 17.759 38.7283 18.0009C38.7283 18.2429 38.8915 18.3555 39.0885 18.2542L44.1416 15.6826C44.3385 15.5813 44.5017 15.3 44.5017 15.058Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M44.5019 9.79102C44.5019 9.54906 44.3387 9.43651 44.1418 9.5378L37.6481 12.8465C37.4512 12.9478 37.288 13.2292 37.288 13.4711C37.288 13.7131 37.4512 13.8256 37.6481 13.7243L44.1418 10.4156C44.3387 10.3143 44.5019 10.033 44.5019 9.79102Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/project.tsx b/packages/propel/src/empty-state/assets/vertical-stack/project.tsx
new file mode 100644
index 0000000..4385ccc
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/project.tsx
@@ -0,0 +1,251 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ProjectVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="160"
+      height="143"
+      viewBox="0 0 160 143"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_1047_10396)">
+        <g opacity="0.2">
+          <path
+            d="M16.9216 113.312C16.9216 114.994 18.1809 116.671 20.6948 117.957L53.0651 134.451C58.0975 137.014 66.2534 137.014 71.2858 134.451L139.306 99.7941C141.82 98.5127 143.079 96.8352 143.079 95.1533V100.524C143.079 102.206 141.82 103.883 139.306 105.165L71.2858 139.822C66.2534 142.385 58.0975 142.385 53.0651 139.822L20.6948 123.328C18.1764 122.046 16.9216 120.364 16.9216 118.682V113.312Z"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+            strokeWidth="0.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M16.9216 113.312C16.9216 111.63 18.1809 109.953 20.6948 108.671L88.7146 74.014C93.747 71.4511 101.903 71.4511 106.935 74.014L139.306 90.5084C141.824 91.7898 143.079 93.4717 143.079 95.1536C143.079 96.8356 141.82 98.513 139.306 99.7944L71.2858 134.452C66.2534 137.015 58.0975 137.015 53.0651 134.452L20.6948 117.957C18.1764 116.676 16.9216 114.994 16.9216 113.312Z"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+            strokeWidth="0.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <g opacity="0.6">
+          <path
+            d="M16.9216 96.341C16.9216 98.0229 18.1809 99.7005 20.6948 100.986L53.0651 117.481C58.0975 120.044 66.2534 120.044 71.2858 117.481L139.306 82.8234C141.82 81.542 143.079 79.8645 143.079 78.1826V83.5531C143.079 85.235 141.82 86.9126 139.306 88.194L71.2858 122.851C66.2534 125.414 58.0975 125.414 53.0651 122.851L20.6948 106.357C18.1764 105.075 16.9216 103.394 16.9216 101.712V96.341Z"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+            strokeWidth="0.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M16.9216 96.3413C16.9216 94.6594 18.1809 92.982 20.6948 91.7005L88.7146 57.0433C93.747 54.4804 101.903 54.4804 106.935 57.0433L139.306 73.5376C141.824 74.819 143.079 76.501 143.079 78.1829C143.079 79.8648 141.82 81.5423 139.306 82.8237L71.2858 117.481C66.2534 120.044 58.0975 120.044 53.0651 117.481L20.6948 100.987C18.1764 99.7052 16.9216 98.0232 16.9216 96.3413Z"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+            stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+            strokeWidth="0.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <path
+          d="M16.9216 79.3753C16.9216 81.0572 18.1809 82.7346 20.6948 84.0206L53.0651 100.515C58.0975 103.078 66.2534 103.078 71.2858 100.515L139.306 65.8576C141.82 64.5761 143.079 62.8987 143.079 61.2168V66.5874C143.079 68.2693 141.82 69.9467 139.306 71.2282L71.2858 105.886C66.2534 108.448 58.0975 108.448 53.0651 105.886L20.6948 89.3912C18.1764 88.1097 16.9216 86.4278 16.9216 84.7459V79.3753Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M16.9216 79.3756C16.9216 77.6937 18.1809 76.0163 20.6948 74.7348L88.7146 40.0775C93.747 37.5145 101.903 37.5145 106.935 40.0775L139.306 56.5718C141.824 57.8533 143.079 59.5352 143.079 61.2171C143.079 62.899 141.82 64.5765 139.306 65.8579L71.2858 100.515C66.2534 103.078 58.0975 103.078 53.0651 100.515L20.6948 84.0209C18.1764 82.7394 16.9216 81.0575 16.9216 79.3756Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M64.2952 82.2411C63.8191 82.2411 63.3697 82.1433 62.9648 81.9475C62.9381 81.9386 62.9114 81.9297 62.8847 81.9163L58.9202 79.8962C57.701 79.2733 57.0024 77.8495 57.0024 75.9896V48.7675C57.0024 45.4793 59.2094 41.6749 61.9236 40.2956L70.9072 35.717V28.273C70.9072 24.9848 73.1141 21.1804 75.8283 19.8011L86.3114 14.4572C87.0011 14.1057 87.6774 13.9277 88.3181 13.9277C88.8209 13.9277 89.2926 14.039 89.7197 14.2525L93.6842 16.2726C93.6842 16.2726 93.7065 16.286 93.7154 16.2905C94.9168 16.9223 95.602 18.3328 95.602 20.1793V23.1293L100.221 20.7756C100.91 20.4241 101.587 20.246 102.227 20.246C102.73 20.246 103.202 20.3573 103.629 20.5708C103.629 20.5708 107.611 22.5998 107.62 22.6087C108.821 23.2406 109.511 24.6511 109.511 26.5021V53.7242C109.511 57.0124 107.304 60.8167 104.59 62.1961L66.293 81.7072C65.6078 82.0543 64.9359 82.2322 64.2952 82.2322V82.2411ZM80.9809 26.1639C80.0153 26.6533 79.2011 28.0727 79.2011 29.2607V31.4944L87.317 27.3608V22.938L80.9809 26.1639Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        />
+        <path
+          d="M88.3226 14.3723C88.7586 14.3723 89.1635 14.4658 89.5195 14.6482L93.484 16.6683C93.484 16.6683 93.4751 16.6683 93.4707 16.6639C94.503 17.1845 95.1615 18.4214 95.1615 20.1834V23.8632L100.425 21.1801C101.066 20.8553 101.676 20.6995 102.232 20.6995C102.668 20.6995 103.073 20.793 103.429 20.9754L107.393 22.9955C107.393 22.9955 107.384 22.9955 107.38 22.9911C108.412 23.5072 109.071 24.7486 109.071 26.5106V53.7327C109.071 56.8785 106.975 60.4916 104.394 61.8087L66.0973 81.3197C65.461 81.6445 64.8558 81.7958 64.3041 81.7958C63.828 81.7958 63.3875 81.6802 63.0048 81.4666C63.036 81.4844 63.0627 81.5067 63.0938 81.5245L59.1293 79.5044C58.1059 78.9838 57.4563 77.7468 57.4563 75.9936V48.7715C57.4563 45.6257 59.552 42.0128 62.1328 40.6957L71.361 35.9926V28.2726C71.361 25.1268 73.4568 21.5138 76.0375 20.1968L86.5205 14.8529C87.1613 14.5281 87.7709 14.3723 88.327 14.3723M91.9756 16.4147C92.0557 16.4058 92.1358 16.4013 92.2115 16.4013C92.1314 16.4013 92.0557 16.4102 91.9756 16.4147ZM92.6075 16.4147C92.5318 16.4058 92.4562 16.4013 92.3805 16.3969C92.4562 16.3969 92.5318 16.4058 92.6075 16.4147ZM91.6731 16.4547C91.7176 16.4458 91.7576 16.437 91.8021 16.4325C91.7621 16.437 91.7176 16.4458 91.6731 16.4547ZM92.9901 16.4858C92.9189 16.468 92.8433 16.4459 92.7676 16.437C92.8433 16.4503 92.9145 16.468 92.9901 16.4858ZM91.0813 16.6194C91.1792 16.5838 91.2771 16.5526 91.3749 16.5259C91.2771 16.5526 91.1792 16.5882 91.0813 16.6194ZM93.3728 16.6238C93.2927 16.5882 93.2126 16.5526 93.1325 16.5259C93.2171 16.5526 93.2927 16.5882 93.3728 16.6238ZM90.4806 16.873C90.6319 16.7929 90.7832 16.7306 90.9345 16.6683C90.7832 16.7262 90.6363 16.7929 90.4806 16.873ZM91.1436 21.2246C91.1124 21.2024 91.0813 21.1845 91.0457 21.1623C91.0768 21.1801 91.1124 21.2024 91.1436 21.2246ZM91.2815 21.3403C91.2593 21.3181 91.2326 21.2958 91.2103 21.278C91.2326 21.3002 91.2593 21.3181 91.2815 21.3403ZM91.4016 21.4826C91.3838 21.4559 91.3616 21.4337 91.3438 21.407C91.366 21.4293 91.3838 21.4559 91.4016 21.4826ZM91.504 21.6473C91.4862 21.6162 91.4728 21.5895 91.455 21.5584C91.4728 21.5851 91.4906 21.6162 91.504 21.6473ZM91.5885 21.8386C91.5752 21.803 91.5618 21.7674 91.544 21.7363C91.5574 21.7719 91.5707 21.803 91.5885 21.8386ZM91.6553 22.0566C91.6464 22.0122 91.633 21.9721 91.6197 21.932C91.633 21.9721 91.6419 22.0166 91.6553 22.0566ZM91.6998 22.3103C91.6909 22.2569 91.6864 22.2035 91.6775 22.1545C91.6864 22.2035 91.6953 22.2569 91.6998 22.3103ZM78.7561 32.2194L87.7619 27.6319V22.2124L80.7807 25.772C79.6638 26.3416 78.7561 27.9033 78.7561 29.2648V32.2238M91.7264 22.6529C91.7264 22.5639 91.722 22.4749 91.7131 22.3948C91.722 22.4794 91.7264 22.5639 91.7264 22.6529ZM106 22.7285C105.96 22.7285 105.92 22.733 105.88 22.7374C105.92 22.7374 105.96 22.7285 106 22.7285C106.041 22.7285 106.081 22.7285 106.121 22.7241C106.081 22.7241 106.041 22.7241 106 22.7285ZM106.517 22.7419C106.441 22.733 106.365 22.7285 106.29 22.7241C106.365 22.7241 106.441 22.733 106.517 22.7419ZM105.453 22.8086C105.538 22.7908 105.627 22.7731 105.711 22.7597C105.627 22.7731 105.542 22.7908 105.453 22.8086ZM106.899 22.813C106.828 22.7952 106.752 22.7775 106.677 22.7642C106.752 22.7775 106.824 22.7952 106.899 22.813ZM107.278 22.9465C107.197 22.911 107.117 22.8754 107.037 22.8487C107.122 22.8754 107.197 22.911 107.278 22.9465ZM104.39 23.1957C104.541 23.1157 104.692 23.0534 104.844 22.9911C104.692 23.0489 104.546 23.1157 104.39 23.1957ZM61.4653 78.8013C61.4564 78.739 61.4475 78.6768 61.4386 78.6145C61.4431 78.6812 61.4564 78.739 61.4653 78.8013ZM61.7234 79.8781C61.6967 79.8113 61.6744 79.7491 61.6522 79.6779C61.6744 79.7446 61.6967 79.8113 61.7234 79.8781ZM62.1594 80.7057C62.1238 80.6523 62.0882 80.5989 62.0526 80.5455C62.0882 80.5989 62.1238 80.6568 62.1594 80.7057ZM62.4398 81.0394C62.3953 80.9949 62.3597 80.9504 62.3196 80.9059C62.3597 80.9504 62.3997 80.9994 62.4398 81.0394ZM62.7512 81.3108C62.7067 81.2797 62.6667 81.2396 62.6266 81.204C62.6667 81.2396 62.7067 81.2752 62.7512 81.3108ZM88.3226 13.4824C87.6107 13.4824 86.8631 13.6782 86.1156 14.0609L75.6326 19.4048C72.7359 20.882 70.4667 24.7753 70.4667 28.2726V35.4453L61.7234 39.8992C58.8267 41.3765 56.5575 45.2698 56.5575 48.7671V75.9892C56.5575 78.0271 57.3451 79.5934 58.72 80.292L62.6845 82.3119C63.1739 82.5567 63.7168 82.6813 64.2952 82.6813C65.0071 82.6813 65.7458 82.4899 66.4933 82.1073L104.79 62.5962C107.687 61.119 109.956 57.2256 109.956 53.7283V26.5062C109.956 24.495 109.186 22.9377 107.843 22.2258C107.829 22.2169 107.811 22.208 107.794 22.1991L103.829 20.179C103.34 19.9298 102.801 19.8052 102.227 19.8052C101.515 19.8052 100.768 20.001 100.02 20.3836L96.0514 22.4082V20.1834C96.0514 18.1678 95.2816 16.6149 93.9334 15.9029C93.9245 15.9029 93.9201 15.8941 93.9112 15.8897C93.9023 15.8897 93.8934 15.8808 93.8889 15.8763L89.9289 13.8562C89.4394 13.607 88.901 13.4824 88.327 13.4824H88.3226ZM79.646 30.7644V29.2559C79.646 28.237 80.3624 26.9734 81.1811 26.5596L86.8676 23.663V27.0846L79.6416 30.7644H79.646Z"
+          fill="var(--illustration-stroke-tertiary)"
+        />
+        <path
+          d="M107.393 22.9952C106.579 22.5814 105.533 22.617 104.39 23.1999L95.1614 27.903L91.1969 25.8829L100.425 21.1798C101.569 20.5969 102.614 20.5613 103.429 20.9751L107.393 22.9952Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M78.756 36.2555L91.7264 29.648L87.7619 27.6279L74.7915 34.2355L78.756 36.2555Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M91.7263 29.6477V22.6487C91.7263 21.8923 91.446 21.3582 91.0055 21.1313L87.041 19.1113C87.4815 19.3383 87.7618 19.8722 87.7618 20.6286V27.6277L91.7263 29.6477Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M93.4839 16.6681C92.6697 16.2543 91.624 16.2898 90.4805 16.8727L79.9975 22.2166C77.4123 23.5337 75.321 27.1511 75.321 30.2924V38.0124L71.3565 35.9923V28.2723C71.3565 25.1265 73.4522 21.5136 76.033 20.1965L86.516 14.8526C87.6595 14.2697 88.7052 14.2342 89.5194 14.648L93.4839 16.6681Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M75.321 38.0084L66.0927 42.7114C63.5076 44.0285 61.4163 47.646 61.4163 50.7874V78.0095C61.4163 79.7626 62.0659 80.9996 63.0893 81.5202L59.1248 79.5001C58.1014 78.9795 57.4518 77.7425 57.4518 75.9894V48.7673C57.4518 45.6215 59.5475 42.0085 62.1282 40.6914L71.3565 35.9883L75.321 38.0084Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M95.1615 27.8989V20.1789C95.1615 17.0331 93.0657 15.5514 90.485 16.8685L80.002 22.2124C77.4168 23.5294 75.3255 27.1468 75.3255 30.2882V38.0081L66.0972 42.7112C63.5121 44.0283 61.4208 47.6458 61.4208 50.7871V78.0092C61.4208 81.1551 63.5165 82.6367 66.0972 81.3197L104.394 61.8086C106.979 60.4915 109.071 56.874 109.071 53.7327V26.5106C109.071 23.3648 106.975 21.8831 104.394 23.2001L95.1659 27.9033L95.1615 27.8989ZM78.7561 36.255V29.2559C78.7561 27.8988 79.6638 26.3326 80.7806 25.7631L89.7063 21.2157C90.8232 20.6461 91.7309 21.2869 91.7309 22.6484V29.6475L78.7605 36.255H78.7561Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M144.881 25.9278C146.104 25.3049 146.883 23.8321 146.883 21.7364C146.883 17.9855 144.382 13.6695 141.303 12.1033L120.657 1.58456C119.296 0.890433 118.05 0.845916 117.08 1.33981L119.064 0.329763C120.034 -0.164133 121.28 -0.119616 122.642 0.574508L143.288 11.0932C146.371 12.6639 148.867 16.9799 148.867 20.7264C148.867 22.8221 148.089 24.2949 146.865 24.9178L144.881 25.9278Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M144.881 25.9276C143.911 26.4214 142.665 26.377 141.303 25.6829L120.657 15.1642C117.574 13.5935 115.078 9.27754 115.078 5.53105C115.078 3.43532 115.856 1.96246 117.08 1.33953C118.05 0.845633 119.296 0.89015 120.657 1.58427L141.303 12.103C144.387 13.6737 146.883 17.9897 146.883 21.7361C146.883 23.8319 146.104 25.3046 144.881 25.9276Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M121.218 5.72729C120.795 5.51371 120.453 5.75398 120.453 6.27012V7.60943C120.453 7.8586 120.533 8.13447 120.675 8.38364L123.118 12.6018C123.354 13.0067 123.728 13.2826 124.021 13.198C124.573 13.0379 125.049 12.7042 125.41 12.2147C125.601 11.9522 125.534 11.4627 125.298 11.0578L122.856 6.83967C122.713 6.5905 122.517 6.39473 122.313 6.29239L121.209 5.73175L121.218 5.72729ZM121.507 7.50264C121.668 7.58273 121.797 7.49376 121.797 7.29798C121.797 7.1022 121.668 6.88413 121.507 6.80404C121.347 6.72395 121.218 6.81292 121.218 7.0087C121.218 7.20448 121.347 7.42255 121.507 7.50264Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M139.71 19.988L130.108 15.0936C129.196 14.6264 128.453 13.3493 128.453 12.2413C128.453 11.129 129.192 10.6084 130.108 11.0712L139.71 15.9656C140.622 16.4328 141.365 17.7098 141.365 18.8177C141.365 19.9301 140.627 20.4508 139.71 19.988Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M46.1459 18.4752C45.5986 18.1949 44.8956 18.2217 44.1258 18.6132L5.13028 38.4847C3.39052 39.3702 1.98447 41.8041 1.98447 43.9177V58.9881C1.98447 60.1672 2.42053 60.9993 3.11021 61.3508L1.12571 60.3408C0.436038 59.9893 0 59.1572 0 57.9781V42.9076C0 40.7941 1.4105 38.3602 3.14581 37.4748L42.1413 17.6032C42.9111 17.2116 43.6141 17.1893 44.1614 17.4652L46.1459 18.4752Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M46.1459 18.475C46.8355 18.8265 47.2716 19.6586 47.2716 20.8377V35.9082C47.2716 38.0218 45.8611 40.4556 44.1258 41.3411L5.13025 61.2126C4.36048 61.6041 3.65747 61.6264 3.11018 61.3505C2.4205 60.999 1.98444 60.1669 1.98444 58.9878V43.9174C1.98444 41.8039 3.39494 39.3699 5.13025 38.4844L44.1258 18.6129C44.8956 18.2214 45.5986 18.1991 46.1459 18.475Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M9.63761 42.2085C9.69545 42.3375 9.82449 42.3864 9.97132 42.3108C10.176 42.2084 10.3406 41.9192 10.3451 41.6612V41.1895C10.3451 41.0338 10.2872 40.9226 10.1893 40.887C10.087 40.8514 9.95799 40.8959 9.84675 41.0116L7.444 43.392C7.30162 43.5344 7.20819 43.7524 7.20819 43.9437V47.183C7.20819 47.3432 7.27492 47.4588 7.38616 47.49C7.49739 47.5167 7.63533 47.4544 7.75102 47.3209L8.09364 46.9205C8.27607 46.7114 8.3428 46.3955 8.24936 46.2175C8.18707 46.1018 8.07138 46.0707 7.9468 46.1241V43.8859L9.64206 42.2085H9.63761Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.16037 41.5727C8.21822 41.7018 8.34725 41.7507 8.49409 41.6751C8.69877 41.5727 8.86341 41.2835 8.86786 41.0254V40.5538C8.86786 40.398 8.81003 40.2868 8.71214 40.2512C8.61425 40.2156 8.48075 40.26 8.36952 40.3757L5.96677 42.7563C5.82438 42.8986 5.73096 43.1167 5.73096 43.308V46.5473C5.73096 46.7074 5.79768 46.8231 5.90892 46.8542C6.02016 46.8809 6.1581 46.8187 6.27378 46.6852L6.61641 46.2847C6.79884 46.0756 6.86557 45.7597 6.77213 45.5817C6.70984 45.4661 6.59415 45.4348 6.46956 45.4882V43.2502L8.16483 41.5727H8.16037Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.8268 41.4343C11.7289 41.3942 11.5998 41.4387 11.4841 41.5589L9.08139 43.9393C8.93901 44.0817 8.84558 44.3041 8.84558 44.4866V47.7303C8.84558 47.8816 8.90341 47.9929 9.0013 48.0285C9.10809 48.0641 9.23269 48.0196 9.34838 47.9039L11.7466 45.5233C11.8935 45.3854 11.9869 45.1629 11.9869 44.9716V41.7279C11.9869 41.5766 11.9291 41.4654 11.8223 41.4343H11.8268ZM11.2483 45.0295L9.58419 46.6758V44.4288L11.2483 42.7825V45.0295Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24.37 38.9829L16.6501 42.9163C16.0138 43.2411 15.5021 42.8762 15.5021 42.102C15.5021 41.3278 16.0182 40.4423 16.6501 40.1175L24.37 36.1841C25.0062 35.8593 25.5179 36.2242 25.5179 36.9984C25.5179 37.7726 25.0018 38.6581 24.37 38.9829Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M41.0556 37.3813L16.877 49.7021C16.1161 50.0892 15.5021 49.6531 15.5021 48.732C15.5021 47.8065 16.1161 46.7476 16.877 46.3605L41.0556 34.0397C41.8165 33.6526 42.4305 34.0887 42.4305 35.0098C42.4305 35.9353 41.8165 36.9942 41.0556 37.3813Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M156.013 57.1407C157.237 56.5177 158.016 55.0449 158.016 52.9492C158.016 49.1982 155.515 44.8822 152.436 43.316C151.074 42.6219 149.828 42.5774 148.858 43.0713L150.843 42.0612C151.813 41.5673 153.059 41.6118 154.42 42.306C157.504 43.8766 160 48.1926 160 51.9391C160 54.0348 159.221 55.5077 157.998 56.1306L156.013 57.1407Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M156.013 57.1404C155.043 57.6343 153.797 57.5898 152.436 56.8956C149.352 55.325 146.856 51.009 146.856 47.2625C146.856 45.1668 147.635 43.6939 148.858 43.071C149.828 42.5771 151.074 42.6216 152.436 43.3157C155.519 44.8864 158.016 49.2024 158.016 52.9489C158.016 55.0446 157.237 56.5175 156.013 57.1404Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M155.212 50.4614L149.659 47.6315C149.49 47.5425 149.352 47.3067 149.352 47.0976C149.352 46.8885 149.49 46.7906 149.659 46.8796L155.212 49.7095C155.381 49.7985 155.519 50.0343 155.519 50.2434C155.519 50.4526 155.381 50.5504 155.212 50.4614Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          d="M153.98 52.086L150.896 50.5153C150.727 50.4263 150.589 50.1905 150.589 49.9814C150.589 49.7722 150.727 49.6744 150.896 49.7634L153.98 51.334C154.149 51.423 154.287 51.6588 154.287 51.868C154.287 52.0771 154.149 52.175 153.98 52.086Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+        <path
+          d="M153.054 53.8653L151.822 53.238C151.653 53.149 151.515 52.9132 151.515 52.704C151.515 52.4949 151.653 52.397 151.822 52.486L153.054 53.1134C153.223 53.2023 153.361 53.4381 153.361 53.6473C153.361 53.8564 153.223 53.9543 153.054 53.8653Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1047_10396">
+          <rect width="160" height="141.745" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx b/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx
new file mode 100644
index 0000000..9611cea
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/server-error.tsx
@@ -0,0 +1,338 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ServerErrorVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="184"
+      viewBox="0 0 162 184"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M0.25 147.382C0.25 149.515 1.847 151.642 5.03537 153.273L46.0892 174.192C52.4716 177.443 62.8156 177.443 69.1979 174.192L155.465 130.238C158.653 128.613 160.25 126.485 160.25 124.352V131.163C160.25 133.296 158.653 135.424 155.465 137.049L69.1979 181.004C62.8156 184.254 52.4716 184.254 46.0892 181.004L5.03537 160.084C1.84135 158.459 0.25 156.326 0.25 154.193V147.382Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 147.382C0.25 145.249 1.847 143.121 5.03537 141.496L91.3021 97.5416C97.6844 94.2911 108.028 94.2911 114.411 97.5416L155.465 118.461C158.659 120.086 160.25 122.219 160.25 124.352C160.25 126.485 158.653 128.613 155.465 130.238L69.1979 174.192C62.8156 177.443 52.4716 177.443 46.0892 174.192L5.03537 153.273C1.84135 151.648 0.25 149.515 0.25 147.382Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M0.25 125.864C0.25 127.997 1.847 130.125 5.03537 131.756L46.0892 152.675C52.4716 155.925 62.8156 155.925 69.1979 152.675L155.465 108.721C158.653 107.095 160.25 104.968 160.25 102.835V109.646C160.25 111.779 158.653 113.907 155.465 115.532L69.1979 159.486C62.8156 162.737 52.4716 162.737 46.0892 159.486L5.03537 138.567C1.84135 136.942 0.25 134.809 0.25 132.676V125.864Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.25 125.864C0.25 123.731 1.847 121.604 5.03537 119.979L91.3021 76.0243C97.6844 72.7738 108.028 72.7738 114.411 76.0243L155.465 96.9433C158.659 98.5686 160.25 100.702 160.25 102.835C160.25 104.968 158.653 107.095 155.465 108.721L69.1979 152.675C62.8156 155.925 52.4716 155.925 46.0892 152.675L5.03537 131.756C1.84135 130.131 0.25 127.998 0.25 125.864Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M0.25 104.341C0.25 106.475 1.847 108.602 5.03537 110.233L46.0892 131.152C52.4716 134.402 62.8156 134.402 69.1979 131.152L155.465 87.1976C158.653 85.5723 160.25 83.4449 160.25 81.3118V88.123C160.25 90.2561 158.653 92.3836 155.465 94.0088L69.1979 137.963C62.8156 141.214 52.4716 141.214 46.0892 137.963L5.03537 117.044C1.84135 115.419 0.25 113.286 0.25 111.153V104.341Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.25 104.341C0.25 102.208 1.847 100.081 5.03537 98.4557L91.3021 54.5013C97.6844 51.2509 108.028 51.2509 114.411 54.5013L155.465 75.4204C158.659 77.0456 160.25 79.1788 160.25 81.3119C160.25 83.445 158.653 85.5724 155.465 87.1976L69.1979 131.152C62.8156 134.402 52.4716 134.402 46.0892 131.152L5.03537 110.233C1.84135 108.608 0.25 106.475 0.25 104.341Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M80.2527 111.503C78.0575 111.503 75.9808 111.063 74.412 110.261L41.5071 93.4956C39.8142 92.6322 38.8828 91.4415 38.8828 90.1436V78.8573C38.8828 77.5594 39.8142 76.3743 41.5071 75.5109L42.4833 75.0143L41.5071 74.5177C39.8142 73.6543 38.8828 72.4636 38.8828 71.1657V59.8794C38.8828 58.5815 39.8142 57.3964 41.5071 56.533L42.4833 56.0364L41.5071 55.5398C39.8142 54.6764 38.8828 53.4857 38.8828 52.1878V40.9016C38.8828 39.6036 39.8142 38.4186 41.5071 37.5552L42.4833 37.0586L41.5071 36.562C39.8142 35.6986 38.8828 34.5079 38.8828 33.21V21.9237C38.8828 20.6258 39.8142 19.4407 41.5071 18.5773L74.412 1.81157C75.9808 1.01024 78.0575 0.570068 80.2527 0.570068C82.4479 0.570068 84.5246 1.01024 86.0934 1.81157L118.999 18.5773C120.691 19.4407 121.623 20.6314 121.623 21.9293V33.2156C121.623 34.5135 120.691 35.6986 118.999 36.562L118.022 37.0586L118.999 37.5552C120.691 38.4186 121.623 39.6093 121.623 40.9072V52.1935C121.623 53.4914 120.691 54.6764 118.999 55.5398L118.022 56.0364L118.999 56.533C120.691 57.3964 121.623 58.5871 121.623 59.8851V71.1713C121.623 72.4693 120.691 73.6543 118.999 74.5177L118.022 75.0143L118.999 75.5109C120.691 76.3743 121.623 77.565 121.623 78.8629V90.1492C121.623 91.4471 120.691 92.6322 118.999 93.4956L86.0934 110.261C84.5246 111.063 82.4479 111.503 80.2527 111.503Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M80.2528 1.12863C82.273 1.12863 84.2989 1.52366 85.8394 2.30806L118.745 19.0738C120.291 19.8582 121.058 20.8909 121.058 21.9236V33.2099C121.058 34.2369 120.285 35.2696 118.745 36.054L116.781 37.0529L118.745 38.0517C120.291 38.8361 121.058 39.8687 121.058 40.9014V52.1877C121.058 53.2148 120.285 54.2475 118.745 55.0319L116.781 56.0307L118.745 57.0295C120.291 57.8139 121.058 58.8466 121.058 59.8793V71.1656C121.058 72.1926 120.285 73.2253 118.745 74.0098L116.781 75.0086L118.745 76.0074C120.291 76.7918 121.058 77.8245 121.058 78.8572V90.1435C121.058 91.1705 120.285 92.2032 118.745 92.9876L85.8394 109.753C84.2989 110.538 82.273 110.933 80.2528 110.933C78.2325 110.933 76.2067 110.538 74.6661 109.753L41.761 92.9876C40.2148 92.2032 39.4472 91.1705 39.4472 90.1378V78.8515C39.4472 77.8245 40.2204 76.7918 41.761 76.0074L43.7248 75.0086L41.761 74.0098C40.2148 73.2253 39.4472 72.1927 39.4472 71.16V59.8737C39.4472 58.8466 40.2204 57.8139 41.761 57.0295L43.7248 56.0307L41.761 55.0319C40.2148 54.2475 39.4472 53.2148 39.4472 52.1821V40.8958C39.4472 39.8688 40.2204 38.8361 41.761 38.0517L43.7248 37.0529L41.761 36.054C40.2148 35.2696 39.4472 34.2369 39.4472 33.2042V21.918C39.4472 20.8909 40.2204 19.8582 41.761 19.0738L74.6661 2.30806C76.2067 1.52366 78.2325 1.12863 80.2528 1.12863ZM80.2528 0C77.9673 0 75.8003 0.462736 74.1525 1.30356L41.2474 18.0693C39.3569 19.0343 38.3186 20.4 38.3186 21.918V33.2042C38.3186 34.0846 38.6968 35.7549 41.2418 37.0529C38.7024 38.3508 38.3186 40.0211 38.3186 40.8958V52.1821C38.3186 53.0624 38.6968 54.7328 41.2418 56.0307C38.7024 57.3286 38.3186 58.999 38.3186 59.8737V71.16C38.3186 72.0403 38.6968 73.7106 41.2418 75.0086C38.7024 76.3065 38.3186 77.9769 38.3186 78.8515V90.1378C38.3186 91.0181 38.6967 92.6942 41.2474 93.9921L74.1525 110.758C75.8003 111.599 77.9673 112.061 80.2528 112.061C82.5383 112.061 84.7052 111.599 86.353 110.758L119.258 93.9921C121.809 92.6942 122.187 91.0238 122.187 90.1435V78.8572C122.187 77.9769 121.809 76.3065 119.264 75.0086C121.803 73.7106 122.187 72.0403 122.187 71.1656V59.8793C122.187 58.999 121.809 57.3286 119.264 56.0307C121.803 54.7328 122.187 53.0624 122.187 52.1877V40.9014C122.187 40.0211 121.809 38.3508 119.264 37.0529C121.803 35.7549 122.187 34.0846 122.187 33.2099V21.9236C122.187 21.0433 121.809 19.3673 119.258 18.0693L86.353 1.30356C84.7052 0.462736 82.5383 0 80.2528 0Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M39.4473 78.8572C39.4473 79.8899 40.2148 80.9169 41.761 81.707L74.6662 98.4727C77.753 100.047 82.7527 100.047 85.8395 98.4727L118.745 81.707C120.285 80.9226 121.058 79.8899 121.058 78.8628V90.1491C121.058 91.1762 120.285 92.2088 118.745 92.9932L85.8395 109.759C82.7527 111.333 77.753 111.333 74.6662 109.759L41.761 92.9932C40.2148 92.2088 39.4473 91.1761 39.4473 90.1435V78.8572Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M39.4473 78.8571C39.4473 77.8301 40.2204 76.7974 41.761 76.013L74.6662 59.2472C77.753 57.6728 82.7527 57.6728 85.8395 59.2472L118.745 76.013C120.291 76.7974 121.058 77.8301 121.058 78.8628C121.058 79.8955 120.285 80.9225 118.745 81.7069L85.8395 98.4727C82.7527 100.047 77.753 100.047 74.6662 98.4727L41.761 81.7069C40.2148 80.9225 39.4473 79.8898 39.4473 78.8571Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M105.196 96.9265L104.106 97.4795C103.886 97.5924 103.706 97.4682 103.706 97.1973V92.4684C103.706 92.1975 103.886 91.8928 104.106 91.7799L105.196 91.2269C105.416 91.1141 105.596 91.2382 105.596 91.5091V96.238C105.596 96.5089 105.416 96.8136 105.196 96.9265Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M107.713 95.6455L106.623 96.1985C106.403 96.3114 106.223 96.1872 106.223 95.9164V91.1874C106.223 90.9165 106.403 90.6118 106.623 90.4989L107.713 89.9459C107.933 89.8331 108.113 89.9572 108.113 90.2281V94.957C108.113 95.2279 107.933 95.5326 107.713 95.6455Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M110.229 94.3645L109.14 94.9175C108.92 95.0304 108.74 94.9062 108.74 94.6354V89.9064C108.74 89.6355 108.92 89.3308 109.14 89.218L110.229 88.6649C110.449 88.552 110.63 88.6762 110.63 88.9471V93.676C110.63 93.9469 110.449 94.2516 110.229 94.3645Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M112.752 93.0778L111.663 93.6309C111.443 93.7437 111.262 93.6196 111.262 93.3487V88.6198C111.262 88.3489 111.443 88.0442 111.663 87.9313L112.752 87.3783C112.972 87.2654 113.152 87.3896 113.152 87.6604V92.3894C113.152 92.6603 112.972 92.965 112.752 93.0778Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M115.269 91.7968L114.179 92.3499C113.959 92.4627 113.779 92.3386 113.779 92.0677V87.3388C113.779 87.0679 113.959 86.7632 114.179 86.6503L115.269 86.0973C115.489 85.9844 115.669 86.1086 115.669 86.3794V91.1084C115.669 91.3793 115.489 91.684 115.269 91.7968Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M117.786 90.5159L116.696 91.0689C116.476 91.1817 116.296 91.0576 116.296 90.7867V86.0578C116.296 85.7869 116.476 85.4822 116.696 85.3693L117.786 84.8163C118.006 84.7034 118.186 84.8276 118.186 85.0984V89.8274C118.186 90.0983 118.006 90.403 117.786 90.5159Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M87.843 102.869C87.843 103.772 87.2393 104.81 86.5 105.188C85.7608 105.566 85.1567 105.143 85.1567 104.24C85.1567 103.337 85.7608 102.299 86.5 101.921C87.2393 101.542 87.843 101.966 87.843 102.869Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M92.0188 100.741C92.0188 101.644 91.415 102.682 90.6758 103.061C89.9365 103.439 89.3328 103.015 89.3328 102.112C89.3328 101.21 89.9365 100.171 90.6758 99.7931C91.415 99.415 92.0188 99.8383 92.0188 100.741Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M96.1948 98.6137C96.1948 99.5166 95.591 100.555 94.8518 100.933C94.1125 101.311 93.5088 100.888 93.5088 99.985C93.5088 99.0821 94.1125 98.0438 94.8518 97.6657C95.591 97.2876 96.1948 97.7108 96.1948 98.6137Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M39.4473 59.8794C39.4473 60.9121 40.2148 61.9392 41.761 62.7292L74.6662 79.4949C77.753 81.0694 82.7527 81.0694 85.8395 79.4949L118.745 62.7292C120.285 61.9448 121.058 60.9121 121.058 59.885V71.1713C121.058 72.1984 120.285 73.2311 118.745 74.0155L85.8395 90.7812C82.7527 92.3557 77.753 92.3557 74.6662 90.7812L41.761 74.0155C40.2148 73.2311 39.4473 72.1984 39.4473 71.1657V59.8794Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M39.4473 59.8793C39.4473 58.8523 40.2204 57.8196 41.761 57.0352L74.6662 40.2694C77.753 38.695 82.7527 38.695 85.8395 40.2694L118.745 57.0352C120.291 57.8196 121.058 58.8523 121.058 59.885C121.058 60.9177 120.285 61.9448 118.745 62.7292L85.8395 79.4949C82.7527 81.0693 77.753 81.0693 74.6662 79.4949L41.761 62.7292C40.2148 61.9448 39.4473 60.912 39.4473 59.8793Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M105.196 77.9487L104.106 78.5017C103.886 78.6146 103.706 78.4904 103.706 78.2196V73.4906C103.706 73.2197 103.886 72.915 104.106 72.8022L105.196 72.2491C105.416 72.1363 105.596 72.2604 105.596 72.5313V77.2602C105.596 77.5311 105.416 77.8358 105.196 77.9487Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M107.713 76.6621L106.623 77.2151C106.403 77.328 106.223 77.2038 106.223 76.933V72.204C106.223 71.9331 106.403 71.6284 106.623 71.5155L107.713 70.9625C107.933 70.8497 108.113 70.9738 108.113 71.2447V75.9736C108.113 76.2445 107.933 76.5492 107.713 76.6621Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M110.229 75.3811L109.14 75.9341C108.92 76.047 108.74 75.9228 108.74 75.652V70.923C108.74 70.6521 108.92 70.3474 109.14 70.2346L110.229 69.6815C110.449 69.5686 110.63 69.6928 110.63 69.9637V74.6926C110.63 74.9635 110.449 75.2682 110.229 75.3811Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M112.752 74.1001L111.663 74.6531C111.443 74.7659 111.262 74.6418 111.262 74.3709V69.642C111.262 69.3711 111.443 69.0664 111.663 68.9535L112.752 68.4005C112.972 68.2876 113.152 68.4118 113.152 68.6827V73.4116C113.152 73.6825 112.972 73.9872 112.752 74.1001Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M115.269 72.8135L114.179 73.3665C113.959 73.4794 113.779 73.3552 113.779 73.0843V68.3554C113.779 68.0845 113.959 67.7798 114.179 67.6669L115.269 67.1139C115.489 67.001 115.669 67.1252 115.669 67.396V72.125C115.669 72.3959 115.489 72.7006 115.269 72.8135Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M117.786 71.5324L116.696 72.0854C116.476 72.1983 116.296 72.0742 116.296 71.8033V67.0743C116.296 66.8035 116.476 66.4988 116.696 66.3859L117.786 65.8329C118.006 65.72 118.186 65.8442 118.186 66.115V70.844C118.186 71.1148 118.006 71.4196 117.786 71.5324Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M87.843 83.8852C87.843 84.7881 87.2393 85.8265 86.5 86.2045C85.7608 86.5826 85.1567 86.1594 85.1567 85.2565C85.1567 84.3536 85.7608 83.3153 86.5 82.9372C87.2393 82.5591 87.843 82.9823 87.843 83.8852Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M92.0188 81.7578C92.0188 82.6607 91.415 83.699 90.6758 84.0771C89.9365 84.4552 89.3328 84.032 89.3328 83.1291C89.3328 82.2262 89.9365 81.1878 90.6758 80.8097C91.415 80.4316 92.0188 80.8549 92.0188 81.7578Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M96.1948 79.6303C96.1948 80.5332 95.591 81.5716 94.8518 81.9497C94.1125 82.3278 93.5088 81.9045 93.5088 81.0016C93.5088 80.0987 94.1125 79.0604 94.8518 78.6823C95.591 78.3042 96.1948 78.7274 96.1948 79.6303Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M39.4473 40.8958C39.4473 41.9284 40.2148 42.9555 41.761 43.7455L74.6662 60.5113C77.753 62.0857 82.7527 62.0857 85.8395 60.5113L118.745 43.7455C120.285 42.9611 121.058 41.9284 121.058 40.9014V52.1876C121.058 53.2147 120.285 54.2474 118.745 55.0318L85.8395 71.7975C82.7527 73.372 77.753 73.372 74.6662 71.7975L41.761 55.0318C40.2148 54.2474 39.4473 53.2147 39.4473 52.182V40.8958Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M39.4473 40.8957C39.4473 39.8687 40.2204 38.8359 41.761 38.0515L74.6662 21.2858C77.753 19.7114 82.7527 19.7114 85.8395 21.2858L118.745 38.0515C120.291 38.8359 121.058 39.8686 121.058 40.9013C121.058 41.934 120.285 42.9611 118.745 43.7455L85.8395 60.5112C82.7527 62.0857 77.753 62.0857 74.6662 60.5112L41.761 43.7455C40.2148 42.9611 39.4473 41.9284 39.4473 40.8957Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M105.196 58.965L104.106 59.5181C103.886 59.631 103.706 59.5068 103.706 59.2359V54.507C103.706 54.2361 103.886 53.9314 104.106 53.8185L105.196 53.2655C105.416 53.1526 105.596 53.2768 105.596 53.5477V58.2766C105.596 58.5475 105.416 58.8522 105.196 58.965Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M107.713 57.6841L106.623 58.2371C106.403 58.35 106.223 58.2258 106.223 57.9549V53.226C106.223 52.9551 106.403 52.6504 106.623 52.5375L107.713 51.9845C107.933 51.8716 108.113 51.9958 108.113 52.2666V56.9956C108.113 57.2665 107.933 57.5712 107.713 57.6841Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M110.229 56.3974L109.14 56.9504C108.92 57.0633 108.74 56.9392 108.74 56.6683V51.9393C108.74 51.6685 108.92 51.3637 109.14 51.2509L110.229 50.6979C110.449 50.585 110.63 50.7092 110.63 50.98V55.709C110.63 55.9798 110.449 56.2846 110.229 56.3974Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M112.752 55.1164L111.663 55.6695C111.443 55.7823 111.262 55.6582 111.262 55.3873V50.6584C111.262 50.3875 111.443 50.0827 111.663 49.9699L112.752 49.4169C112.972 49.304 113.152 49.4281 113.152 49.699V54.428C113.152 54.6988 112.972 55.0036 112.752 55.1164Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M115.269 53.8354L114.179 54.3885C113.959 54.5013 113.779 54.3772 113.779 54.1063V49.3774C113.779 49.1065 113.959 48.8018 114.179 48.6889L115.269 48.1359C115.489 48.023 115.669 48.1471 115.669 48.418V53.147C115.669 53.4178 115.489 53.7226 115.269 53.8354Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M117.786 52.5488L116.696 53.1018C116.476 53.2147 116.296 53.0906 116.296 52.8197V48.0907C116.296 47.8199 116.476 47.5151 116.696 47.4023L117.786 46.8492C118.006 46.7364 118.186 46.8605 118.186 47.1314V51.8603C118.186 52.1312 118.006 52.4359 117.786 52.5488Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M87.843 64.9072C87.843 65.8101 87.2393 66.8484 86.5 67.2265C85.7608 67.6046 85.1567 67.1814 85.1567 66.2785C85.1567 65.3756 85.7608 64.3372 86.5 63.9592C87.2393 63.5811 87.843 64.0043 87.843 64.9072Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M92.0188 62.7741C92.0188 63.677 91.415 64.7154 90.6758 65.0935C89.9365 65.4716 89.3328 65.0483 89.3328 64.1454C89.3328 63.2425 89.9365 62.2042 90.6758 61.8261C91.415 61.448 92.0188 61.8712 92.0188 62.7741Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M96.1948 60.6467C96.1948 61.5496 95.591 62.588 94.8518 62.966C94.1125 63.3441 93.5088 62.9209 93.5088 62.018C93.5088 61.1151 94.1125 60.0767 94.8518 59.6986C95.591 59.3206 96.1948 59.7438 96.1948 60.6467Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M39.4473 21.918C39.4473 22.9507 40.2148 23.9777 41.761 24.7677L74.6662 41.5335C77.753 43.108 82.7527 43.108 85.8395 41.5335L118.745 24.7677C120.285 23.9833 121.058 22.9507 121.058 21.9236V33.2099C121.058 34.2369 120.285 35.2696 118.745 36.054L85.8395 52.8198C82.7527 54.3942 77.753 54.3942 74.6662 52.8198L41.761 36.054C40.2148 35.2696 39.4473 34.2369 39.4473 33.2042V21.918Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M39.4473 21.9179C39.4473 20.8909 40.2204 19.8582 41.761 19.0738L74.6662 2.30802C77.753 0.733588 82.7527 0.733588 85.8395 2.30802L118.745 19.0738C120.291 19.8582 121.058 20.8909 121.058 21.9236C121.058 22.9563 120.285 23.9833 118.745 24.7677L85.8395 41.5335C82.7527 43.1079 77.753 43.1079 74.6662 41.5335L41.761 24.7677C40.2148 23.9833 39.4473 22.9506 39.4473 21.9179Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M105.196 39.9817L104.106 40.5347C103.886 40.6476 103.706 40.5234 103.706 40.2525V35.5236C103.706 35.2527 103.886 34.948 104.106 34.8351L105.196 34.2821C105.416 34.1692 105.596 34.2934 105.596 34.5643V39.2932C105.596 39.5641 105.416 39.8688 105.196 39.9817Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M107.713 38.7007L106.623 39.2537C106.403 39.3666 106.223 39.2424 106.223 38.9715V34.2426C106.223 33.9717 106.403 33.667 106.623 33.5541L107.713 33.0011C107.933 32.8882 108.113 33.0124 108.113 33.2832V38.0122C108.113 38.2831 107.933 38.5878 107.713 38.7007Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M110.229 37.4196L109.14 37.9727C108.92 38.0855 108.74 37.9614 108.74 37.6905V32.9616C108.74 32.6907 108.92 32.386 109.14 32.2731L110.229 31.7201C110.449 31.6072 110.63 31.7314 110.63 32.0022V36.7312C110.63 37.0021 110.449 37.3068 110.229 37.4196Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M112.752 36.1331L111.663 36.6861C111.443 36.7989 111.262 36.6748 111.262 36.4039V31.675C111.262 31.4041 111.443 31.0994 111.663 30.9865L112.752 30.4335C112.972 30.3206 113.152 30.4448 113.152 30.7156V35.4446C113.152 35.7154 112.972 36.0202 112.752 36.1331Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M115.269 34.852L114.179 35.405C113.959 35.5179 113.779 35.3937 113.779 35.1229V30.3939C113.779 30.123 113.959 29.8183 114.179 29.7055L115.269 29.1525C115.489 29.0396 115.669 29.1637 115.669 29.4346V34.1635C115.669 34.4344 115.489 34.7391 115.269 34.852Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M117.786 33.571L116.696 34.1241C116.476 34.2369 116.296 34.1128 116.296 33.8419V29.1129C116.296 28.8421 116.476 28.5373 116.696 28.4245L117.786 27.8715C118.006 27.7586 118.186 27.8827 118.186 28.1536V32.8826C118.186 33.1534 118.006 33.4581 117.786 33.571Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M87.843 45.9238C87.843 46.8267 87.2393 47.865 86.5 48.2431C85.7608 48.6212 85.1567 48.198 85.1567 47.2951C85.1567 46.3922 85.7608 45.3538 86.5 44.9758C87.2393 44.5977 87.843 45.0209 87.843 45.9238Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M92.0188 43.7964C92.0188 44.6993 91.415 45.7376 90.6758 46.1157C89.9365 46.4938 89.3328 46.0705 89.3328 45.1676C89.3328 44.2647 89.9365 43.2264 90.6758 42.8483C91.415 42.4702 92.0188 42.8935 92.0188 43.7964Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M96.1948 41.6689C96.1948 42.5718 95.591 43.6101 94.8518 43.9882C94.1125 44.3663 93.5088 43.9431 93.5088 43.0402C93.5088 42.1373 94.1125 41.099 94.8518 40.7209C95.591 40.3428 96.1948 40.766 96.1948 41.6689Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M110.573 50.4835C110.195 50.4835 109.834 50.3989 109.513 50.2352L104.484 47.6732C104.389 47.6224 104.298 47.5717 104.208 47.5039C102.724 46.4543 102.656 43.7513 104.05 41.3417L110.466 30.2585L104.208 25.8343C102.724 24.7847 102.651 22.076 104.044 19.672C105.049 17.9396 106.589 16.8166 107.972 16.8166C108.356 16.8166 108.711 16.9012 109.033 17.0649L114.061 19.6269C114.157 19.672 114.247 19.7284 114.332 19.7905L115.884 20.8909L121.843 10.6035C122.853 8.86539 124.393 7.74243 125.776 7.74243C126.154 7.74243 126.51 7.82708 126.831 7.99073L131.859 10.5527C131.955 10.6035 132.046 10.6543 132.136 10.7163C133.62 11.766 133.693 14.4747 132.299 16.8787L125.883 27.9618L132.142 32.386C133.626 33.4356 133.693 36.1387 132.305 38.537C131.295 40.2751 129.754 41.4037 128.372 41.4037C127.994 41.4037 127.638 41.3191 127.317 41.1554L122.289 38.5934C122.193 38.5483 122.102 38.4919 122.012 38.4298L120.46 37.3294L114.501 47.6168C113.497 49.3549 111.95 50.4779 110.568 50.4779L110.573 50.4835Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M125.793 8.30664C126.075 8.30664 126.346 8.36869 126.594 8.49284L131.622 11.0548C131.696 11.0887 131.763 11.1338 131.831 11.179C133.061 12.048 133.061 14.4802 131.831 16.5964L125.155 28.1253L131.831 32.8486C133.061 33.7177 133.061 36.1386 131.831 38.2604C130.9 39.8687 129.529 40.8449 128.389 40.8449C128.107 40.8449 127.836 40.7829 127.587 40.6587L122.559 38.0967C122.486 38.0629 122.418 38.0177 122.351 37.9726L120.291 36.5167L114.021 47.3402C113.09 48.9485 111.719 49.9191 110.573 49.9191C110.285 49.9191 110.015 49.857 109.772 49.7329L104.744 47.1709C104.676 47.1371 104.603 47.0919 104.541 47.0467C103.311 46.1777 103.316 43.7512 104.541 41.6294L111.217 30.1004L104.541 25.3771C103.311 24.5081 103.311 22.0815 104.541 19.9597C105.472 18.357 106.838 17.3864 107.983 17.3864C108.271 17.3864 108.542 17.4485 108.79 17.5727L113.818 20.1346C113.886 20.1685 113.954 20.2137 114.021 20.2588L116.081 21.7147L122.351 10.8912C123.282 9.28288 124.653 8.30664 125.798 8.30664M125.793 7.17801C124.19 7.17801 122.497 8.38561 121.368 10.3212L115.72 20.0726L114.67 19.3333C114.557 19.2543 114.444 19.1866 114.326 19.1245L109.298 16.5626C108.897 16.3594 108.451 16.2522 107.977 16.2522C106.375 16.2522 104.682 17.4541 103.559 19.3897C102.018 22.0477 102.165 25.078 103.886 26.297L109.721 30.4221L103.559 41.0594C102.018 43.7173 102.159 46.7477 103.881 47.9609C103.988 48.0399 104.106 48.1077 104.225 48.1697L109.253 50.7317C109.653 50.9349 110.099 51.0421 110.568 51.0421C112.17 51.0421 113.869 49.8401 114.992 47.8989L120.641 38.1475L121.69 38.8868C121.803 38.9658 121.922 39.0392 122.04 39.0956L127.068 41.6576C127.469 41.8607 127.909 41.9679 128.383 41.9679C129.986 41.9679 131.679 40.7603 132.802 38.819C134.337 36.1668 134.195 33.1364 132.474 31.9232L126.639 27.798L132.802 17.1607C134.342 14.5028 134.195 11.4724 132.474 10.2535C132.361 10.1745 132.249 10.1068 132.13 10.0447L127.102 7.48273C126.701 7.27958 126.261 7.17236 125.793 7.17236V7.17801Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        d="M120.697 35.8113L127.373 40.5346C127.441 40.5797 127.508 40.6248 127.582 40.6587L122.554 38.0967C122.48 38.0629 122.413 38.0177 122.345 37.9726L115.669 33.2493L120.697 35.8113Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M131.617 11.0548C130.381 10.4227 128.535 11.4442 127.373 13.4531L120.697 24.982L115.669 22.42L122.345 10.8911C123.508 8.88779 125.353 7.86638 126.588 8.49277L131.617 11.0548Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M113.818 20.1346C112.582 19.5025 110.731 20.5127 109.569 22.5216C108.339 24.6491 108.339 27.0756 109.569 27.939L116.245 32.6623L111.217 30.1004L104.541 25.3771C103.311 24.508 103.311 22.0814 104.541 19.9596C105.703 17.9507 107.549 16.9462 108.79 17.5726L113.818 20.1346Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M116.25 32.6623L109.574 44.1912C108.344 46.3131 108.344 48.7396 109.574 49.6087C109.642 49.6538 109.71 49.6989 109.778 49.7328L104.75 47.1708C104.676 47.137 104.609 47.0918 104.547 47.0467C103.316 46.1776 103.322 43.7511 104.547 41.6293L111.222 30.1003L116.25 32.6623Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M131.617 11.0548C131.69 11.0886 131.758 11.1338 131.825 11.1789C133.056 12.048 133.056 14.4802 131.825 16.5963L125.15 28.1253L131.825 32.8486C133.056 33.7176 133.056 36.1385 131.825 38.2603C130.663 40.2693 128.818 41.285 127.582 40.6587C127.508 40.6248 127.441 40.5797 127.373 40.5345L120.697 35.8112L114.021 47.3401C112.859 49.3435 111.013 50.3649 109.772 49.7328C109.699 49.699 109.631 49.6538 109.569 49.6087C108.339 48.7397 108.344 46.3131 109.569 44.1913L116.245 32.6623L109.569 27.939C108.339 27.07 108.339 24.6435 109.569 22.5216C110.731 20.5127 112.577 19.5082 113.818 20.1346C113.886 20.1684 113.954 20.2136 114.021 20.2587L120.697 24.982L127.373 13.4531C128.535 11.4498 130.381 10.4284 131.617 11.0548Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx b/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx
new file mode 100644
index 0000000..49e2228
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx
@@ -0,0 +1,360 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function TeamspaceVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="188"
+      viewBox="0 0 162 188"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M12.5344 152.778C12.5344 154.741 14.0035 156.698 16.9366 158.198L54.703 177.442C60.5744 180.432 70.09 180.432 75.9613 177.442L155.32 137.007C158.253 135.512 159.722 133.555 159.722 131.593V137.859C159.722 139.821 158.253 141.778 155.32 143.273L75.9613 183.708C70.09 186.698 60.5744 186.698 54.703 183.708L16.9366 164.464C13.9983 162.969 12.5344 161.006 12.5344 159.044V152.778Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.5344 152.778C12.5344 150.816 14.0036 148.859 16.9366 147.364L96.2955 106.929C102.167 103.939 111.682 103.939 117.554 106.929L155.32 126.173C158.258 127.668 159.722 129.631 159.722 131.593C159.722 133.555 158.253 135.512 155.32 137.007L75.9613 177.442C70.09 180.432 60.5744 180.432 54.7031 177.442L16.9366 158.198C13.9984 156.703 12.5344 154.741 12.5344 152.778Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M12.5344 132.984C12.5344 134.947 14.0035 136.904 16.9366 138.404L54.703 157.648C60.5744 160.638 70.09 160.638 75.9613 157.648L155.32 117.213C158.253 115.718 159.722 113.761 159.722 111.799V118.065C159.722 120.027 158.253 121.984 155.32 123.479L75.9613 163.914C70.09 166.904 60.5744 166.904 54.703 163.914L16.9366 144.67C13.9983 143.175 12.5344 141.213 12.5344 139.25V132.984Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.5344 132.984C12.5344 131.022 14.0035 129.065 16.9366 127.57L96.2955 87.1352C102.167 84.145 111.682 84.145 117.554 87.1352L155.32 106.379C158.258 107.874 159.722 109.837 159.722 111.799C159.722 113.761 158.253 115.718 155.32 117.213L75.9613 157.648C70.09 160.638 60.5744 160.638 54.703 157.648L16.9366 138.404C13.9983 136.909 12.5344 134.947 12.5344 132.984Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M12.5344 113.185C12.5344 115.147 14.0036 117.104 16.9366 118.604L54.7031 137.848C60.5744 140.838 70.09 140.838 75.9613 137.848L155.32 97.4135C158.253 95.9184 159.722 93.9613 159.722 91.999V98.2649C159.722 100.227 158.253 102.184 155.32 103.679L75.9613 144.114C70.09 147.104 60.5744 147.104 54.7031 144.114L16.9366 124.87C13.9984 123.375 12.5344 121.413 12.5344 119.45V113.185Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.5345 113.185C12.5345 111.222 14.0036 109.265 16.9366 107.77L96.2955 67.3354C102.167 64.3452 111.682 64.3452 117.554 67.3354L155.32 86.5794C158.258 88.0745 159.722 90.0368 159.722 91.9991C159.722 93.9614 158.253 95.9185 155.32 97.4136L75.9613 137.848C70.09 140.839 60.5744 140.839 54.7031 137.848L16.9366 118.604C13.9984 117.109 12.5345 115.147 12.5345 113.185Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M53.4572 117.494C52.5643 117.494 51.687 117.411 50.846 117.256C50.7266 117.235 50.6176 117.193 50.5138 117.141L46.4231 115.055C46.2518 114.966 46.1064 114.842 45.987 114.681C45.8157 114.452 45.7119 114.151 45.6807 113.819C45.4575 111.447 46.5009 106.998 47.1447 104.558C47.4042 103.571 47.7157 102.699 48.0998 101.89C49.1433 99.6936 50.4359 97.6794 51.9466 95.904C53.7479 93.7808 55.7933 92.104 57.8646 91.0553C59.5362 90.204 61.1766 89.7679 62.734 89.7679C62.8275 89.7679 62.9157 89.7679 63.0092 89.7679C64.0993 89.8043 65.1168 90.0586 66.0357 90.531L70.1316 92.6179C70.604 92.8567 71.0504 93.1578 71.4657 93.5056C71.5021 93.5368 71.5384 93.5679 71.5696 93.5991C71.9174 92.5764 72.3275 91.6004 72.7791 90.6972C74.1444 87.9717 75.7952 85.4695 77.6849 83.2477C80.1507 80.3458 82.9488 78.0512 85.7833 76.6081C88.0622 75.4452 90.2841 74.8534 92.3969 74.8534C92.5215 74.8534 92.6513 74.8534 92.7759 74.8586C94.2398 74.9053 95.6155 75.2531 96.8562 75.8865L100.469 77.7242C100.495 77.6204 100.521 77.5269 100.547 77.4335C100.807 76.4471 101.118 75.575 101.502 74.7652C102.546 72.5693 103.838 70.555 105.349 68.7796C107.151 66.6564 109.196 64.9796 111.267 63.931C112.939 63.0796 114.574 62.6436 116.137 62.6436C116.23 62.6436 116.318 62.6436 116.412 62.6436C117.502 62.6799 118.519 62.9343 119.438 63.4015L123.534 65.4884C124.007 65.7272 124.453 66.0283 124.868 66.3813C126.078 67.4091 126.966 68.8419 127.511 70.6433C128.045 72.4083 128.217 74.4277 128.025 76.6444C127.999 76.9611 127.91 77.2985 127.775 77.6152C127.64 77.9318 127.459 78.2381 127.246 78.4925C123.783 82.6715 119.838 85.9575 115.841 87.9873C112.845 89.5135 109.923 90.313 107.145 90.3597C107.161 91.2682 107.13 92.2026 107.047 93.1474C107.01 93.5627 106.896 94.0092 106.72 94.4297C106.543 94.8502 106.299 95.2499 106.019 95.5873C101.264 101.329 95.8491 105.84 90.3568 108.628C86.1103 110.793 81.9832 111.888 78.0898 111.888C76.875 111.888 75.6758 111.779 74.5286 111.561C74.3936 111.535 74.2638 111.493 74.1392 111.431L70.2666 109.458C67.754 111.846 65.1272 113.741 62.4485 115.106C59.3493 116.685 56.3332 117.484 53.4832 117.484L53.4572 117.494Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M116.116 63.172C116.204 63.172 116.287 63.172 116.375 63.172C117.388 63.2084 118.332 63.4472 119.184 63.8781L123.28 65.9649C123.716 66.1882 124.131 66.4633 124.51 66.7904C125.631 67.7455 126.478 69.116 126.992 70.8084C127.505 72.5007 127.672 74.4786 127.485 76.6122C127.464 76.877 127.391 77.1573 127.277 77.4273C127.163 77.6972 127.007 77.9568 126.825 78.1748C123.404 82.307 119.526 85.536 115.581 87.5398C112.487 89.1128 109.544 89.8603 106.855 89.8603C106.766 89.8603 106.678 89.8603 106.59 89.8603C106.631 90.909 106.605 91.9991 106.507 93.1205C106.476 93.4838 106.377 93.8732 106.216 94.247C106.06 94.6207 105.847 94.9737 105.593 95.2748C100.879 100.97 95.5324 105.424 90.0972 108.18C85.8352 110.35 81.7704 111.383 78.0638 111.383C76.8698 111.383 75.7122 111.274 74.6013 111.067C74.5078 111.051 74.4196 111.02 74.3365 110.978C74.2015 110.911 74.0821 110.807 73.9835 110.672C73.9835 110.672 73.9835 110.672 73.9835 110.667V110.672C74.0769 110.797 74.1911 110.901 74.3261 110.968L70.2406 108.886C70.2146 108.871 70.1887 108.85 70.1627 108.834C67.6242 111.29 64.9247 113.268 62.1941 114.654C59.1001 116.227 56.1515 116.98 53.4676 116.98C52.6007 116.98 51.7597 116.902 50.955 116.751C50.8876 116.741 50.8201 116.715 50.763 116.684L46.6671 114.597C46.5684 114.545 46.4802 114.472 46.4075 114.373C46.2933 114.218 46.2206 114.01 46.1998 113.771C45.9818 111.446 47.0668 106.919 47.6534 104.692C47.887 103.809 48.1829 102.942 48.5774 102.117C49.5897 99.9833 50.8772 97.9795 52.3463 96.2456C54.1113 94.1691 56.0892 92.5442 58.1034 91.5215C59.6971 90.7065 61.2701 90.2912 62.734 90.2912C62.8223 90.2912 62.9053 90.2912 62.9936 90.2912C64.0059 90.3275 64.9507 90.5663 65.8021 90.9972L69.898 93.0841C70.334 93.3073 70.7493 93.5825 71.1283 93.9095C71.3671 94.112 71.5903 94.3404 71.8032 94.5792C72.1821 93.3281 72.6597 92.1082 73.2463 90.9401C74.5857 88.277 76.2261 85.78 78.0846 83.5945C80.5141 80.7341 83.2447 78.4915 86.022 77.0846C88.2128 75.9633 90.3827 75.3871 92.4021 75.3871C92.5215 75.3871 92.6409 75.3871 92.7603 75.3923C94.1567 75.439 95.4598 75.7712 96.6226 76.3631L100.719 78.4499C100.594 78.3876 100.464 78.3253 100.329 78.2682C100.459 78.3253 100.589 78.3876 100.719 78.4551C100.75 78.4707 100.781 78.4915 100.812 78.507C100.895 78.1696 100.978 77.8633 101.051 77.5882C101.284 76.7057 101.58 75.8387 101.975 75.0133C102.987 72.8797 104.275 70.8759 105.744 69.142C107.509 67.0655 109.487 65.4406 111.501 64.4179C113.094 63.6029 114.667 63.1876 116.131 63.1876M97.8945 77.5622C97.8945 77.5622 97.8737 77.5622 97.8685 77.5622C97.8789 77.5622 97.8893 77.5622 97.8945 77.5622ZM100.256 78.2319C100.256 78.2319 100.22 78.2163 100.205 78.2111C100.22 78.2163 100.241 78.2267 100.256 78.2319ZM78.3649 91.0959C78.448 90.9453 78.5362 90.8 78.6193 90.6494C78.531 90.7948 78.448 90.9453 78.3649 91.0959ZM78.0119 91.7136C77.9133 91.8901 77.825 92.0666 77.7264 92.2431C77.8198 92.0666 77.9133 91.8901 78.0119 91.7136ZM77.2592 93.162C77.2177 93.245 77.1761 93.3281 77.1346 93.4164C77.1761 93.3333 77.2177 93.2502 77.2592 93.162C77.3215 93.0374 77.3786 92.918 77.4409 92.7986C77.3786 92.918 77.3163 93.0426 77.2592 93.162ZM75.001 100.082C75.245 99.0281 75.489 98.0781 75.6914 97.315C76.0029 96.1262 76.4078 94.9634 76.9269 93.8472C76.8906 93.9251 76.8491 94.003 76.8127 94.0808C76.3922 94.9893 76.0548 95.9341 75.8004 96.9049C75.5824 97.7147 75.2969 98.8257 75.0062 100.077M74.9854 100.144C74.9594 100.253 74.9335 100.357 74.9127 100.466C74.8868 100.591 74.8556 100.71 74.8297 100.835C74.8556 100.71 74.8868 100.585 74.9127 100.466C74.9387 100.357 74.9646 100.248 74.9854 100.144ZM74.5857 101.956C74.5493 102.132 74.513 102.314 74.4767 102.496C74.513 102.314 74.5493 102.138 74.5857 101.956C74.5857 101.956 74.5857 101.951 74.5857 101.946C74.5857 101.946 74.5857 101.951 74.5857 101.956ZM74.1392 104.256C74.1652 104.105 74.1911 103.955 74.2223 103.804C74.1963 103.955 74.1652 104.105 74.1392 104.256ZM73.7239 107.365C73.7135 107.474 73.7032 107.583 73.698 107.687C73.7032 107.583 73.7187 107.469 73.7239 107.365ZM73.672 108.17C73.672 108.222 73.6668 108.279 73.6616 108.331C73.6616 108.378 73.6616 108.419 73.6564 108.466C73.6564 108.424 73.6564 108.378 73.6616 108.331C73.6616 108.279 73.6668 108.222 73.672 108.17ZM73.6772 109.639C73.6772 109.701 73.6772 109.774 73.6876 109.831C73.6876 109.831 73.6876 109.831 73.6876 109.836C73.6876 109.836 73.6876 109.836 73.6876 109.826C73.6824 109.764 73.6824 109.696 73.6772 109.634M74.3209 110.963H74.3313C74.3313 110.963 74.3261 110.963 74.3209 110.963ZM116.116 62.1338C114.475 62.1338 112.757 62.5854 111.013 63.4783C108.884 64.5581 106.787 66.2816 104.939 68.4516C103.402 70.2633 102.084 72.3139 101.02 74.5513C100.667 75.2988 100.371 76.0983 100.122 76.9808L97.0846 75.4338C95.7712 74.7641 94.3229 74.4007 92.7811 74.354C92.6513 74.354 92.5215 74.3488 92.3865 74.3488C90.1906 74.3488 87.8857 74.9562 85.5341 76.1606C82.6425 77.6297 79.7873 79.971 77.2799 82.9248C75.3644 85.1778 73.6928 87.7163 72.3067 90.4781C71.9433 91.1997 71.6163 91.9576 71.3152 92.7571C71.0089 92.5338 70.687 92.3418 70.3548 92.1705L66.2589 90.0836C65.2725 89.58 64.1824 89.3049 63.0143 89.2685C62.9157 89.2685 62.8171 89.2685 62.7236 89.2685C61.0832 89.2685 59.3649 89.7202 57.6206 90.6131C55.4922 91.6929 53.3949 93.4164 51.5468 95.5863C50.0102 97.3981 48.6916 99.4486 47.6274 101.686C47.2277 102.527 46.9059 103.425 46.6359 104.443C45.9818 106.919 44.9228 111.435 45.1564 113.886C45.1979 114.316 45.3381 114.706 45.5665 115.007C45.7326 115.235 45.9455 115.412 46.1895 115.536L50.2854 117.623C50.4359 117.701 50.5917 117.753 50.7578 117.784C51.6299 117.95 52.5384 118.033 53.4624 118.033C56.3955 118.033 59.4895 117.213 62.6613 115.599C65.2881 114.264 67.8682 112.422 70.334 110.117L73.8537 111.908C73.8537 111.908 73.8641 111.913 73.8693 111.913C73.8745 111.913 73.8797 111.918 73.8849 111.923C74.051 112.006 74.2275 112.063 74.4092 112.1C75.5876 112.323 76.8179 112.437 78.0638 112.437C82.0455 112.437 86.2505 111.321 90.5696 109.12C96.1242 106.301 101.596 101.743 106.398 95.9497C106.709 95.5707 106.979 95.1295 107.176 94.6623C107.374 94.1899 107.503 93.6915 107.545 93.2243C107.613 92.4404 107.649 91.6565 107.649 90.8934C110.348 90.7584 113.172 89.9486 116.054 88.4795C120.118 86.4185 124.116 83.0857 127.625 78.8549C127.874 78.5538 128.076 78.2163 128.232 77.8529C128.388 77.4792 128.487 77.1002 128.518 76.7212C128.72 74.4423 128.538 72.3554 127.983 70.5281C127.407 68.6333 126.467 67.1174 125.18 66.022C124.738 65.6431 124.256 65.3212 123.747 65.0669L119.651 62.98C118.665 62.4764 117.575 62.2013 116.407 62.1649C116.308 62.1649 116.209 62.1649 116.116 62.1649V62.1338Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M113.219 62.4151C112.518 62.4151 111.864 62.2645 111.278 61.9635L107.182 59.8766C107.01 59.7883 106.844 59.6897 106.688 59.5755C105.292 58.5839 104.518 56.7566 104.518 54.4205C104.518 52.0845 105.235 49.6913 106.538 47.4435C107.846 45.1905 109.59 43.4254 111.454 42.4754C112.414 41.9875 113.359 41.7383 114.257 41.7383C114.958 41.7383 115.612 41.8888 116.199 42.1899L120.295 44.2768C120.466 44.3651 120.632 44.4637 120.788 44.5779C122.184 45.5694 122.958 47.3968 122.958 49.7328C122.958 52.0689 122.241 54.4621 120.938 56.7099C119.63 58.9629 117.886 60.7331 116.022 61.6779C115.062 62.1659 114.117 62.4151 113.219 62.4151Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M114.257 42.257C114.87 42.257 115.446 42.3868 115.96 42.6515L120.056 44.7384C120.207 44.8163 120.347 44.8994 120.487 44.998C121.733 45.8805 122.434 47.5832 122.434 49.7272C122.434 51.8712 121.733 54.2904 120.487 56.4447C119.241 58.5991 117.549 60.3122 115.784 61.2103C114.891 61.662 114.019 61.8904 113.214 61.8904C112.601 61.8904 112.025 61.7606 111.511 61.4958L107.415 59.4089C107.265 59.3311 107.125 59.248 106.984 59.1494C105.738 58.2669 105.038 56.5641 105.038 54.4201C105.038 52.2761 105.738 49.857 106.984 47.7026C108.23 45.5483 109.923 43.8351 111.688 42.9371C112.581 42.4854 113.453 42.257 114.257 42.257ZM114.257 41.2188C113.276 41.2188 112.254 41.4835 111.215 42.013C109.263 43.0097 107.441 44.8474 106.086 47.1835C104.742 49.5092 103.999 52.0789 103.999 54.4201C103.999 56.9275 104.846 58.9106 106.387 60.0007C106.564 60.1253 106.756 60.2395 106.948 60.3382L111.044 62.4251C111.703 62.7625 112.435 62.9338 113.219 62.9338C114.2 62.9338 115.223 62.6691 116.261 62.1395C118.213 61.1428 120.035 59.3051 121.39 56.969C122.735 54.6434 123.477 52.0737 123.477 49.7324C123.477 47.225 122.631 45.242 121.089 44.1518C120.913 44.0272 120.72 43.913 120.528 43.8144L116.432 41.7275C115.773 41.3901 115.041 41.2188 114.257 41.2188Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M59.8269 89.5342C59.1261 89.5342 58.472 89.3837 57.8854 89.0826L53.7895 86.9957C53.6181 86.9075 53.452 86.8088 53.2963 86.6946C51.8998 85.7083 51.1315 83.8758 51.1315 81.5397C51.1315 79.2036 51.8479 76.8104 53.1509 74.5626C54.4591 72.3096 56.2034 70.5446 58.0671 69.5946C59.0274 69.1066 59.9723 68.8574 60.8703 68.8574C61.5712 68.8574 62.2253 69.008 62.8119 69.3091L66.9078 71.396C67.0791 71.4842 67.2452 71.5828 67.401 71.697C68.7974 72.6834 69.5709 74.5159 69.5709 76.852C69.5709 79.188 68.8545 81.5812 67.5515 83.829C66.2433 86.082 64.499 87.8471 62.6354 88.7971C61.675 89.2851 60.7302 89.5342 59.8321 89.5342H59.8269Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M60.8704 69.3761C61.4829 69.3761 62.0592 69.5059 62.5731 69.7707L66.669 71.8576C66.8196 71.9354 66.9597 72.0185 67.0999 72.1171C68.3458 72.9996 69.0466 74.7024 69.0466 76.8464C69.0466 78.9904 68.3458 81.4095 67.0999 83.5639C65.854 85.7182 64.1616 87.4314 62.3966 88.3295C61.5037 88.7811 60.6316 89.0095 59.8269 89.0095C59.2144 89.0095 58.6381 88.8797 58.1242 88.615L54.0283 86.5281C53.8777 86.4502 53.7376 86.3672 53.5974 86.2685C52.3515 85.386 51.6507 83.6833 51.6507 81.5393C51.6507 79.3953 52.3515 76.9762 53.5974 74.8218C54.8433 72.6674 56.5357 70.9543 58.3007 70.0562C59.1936 69.6046 60.0657 69.3761 60.8704 69.3761ZM60.8704 68.3379C59.8892 68.3379 58.8665 68.6026 57.8283 69.1322C55.8764 70.1289 54.0542 71.9666 52.6993 74.3027C51.3548 76.6283 50.6124 79.198 50.6124 81.5393C50.6124 84.0467 51.4586 86.0297 53.0004 87.1199C53.1769 87.2445 53.369 87.3587 53.5611 87.4573L57.657 89.5442C58.3163 89.8816 59.0482 90.053 59.8321 90.053C60.8133 90.053 61.8359 89.7882 62.8742 89.2587C64.8261 88.262 66.6482 86.4243 68.0032 84.0882C69.3477 81.7625 70.0901 79.1928 70.0901 76.8516C70.0901 74.3442 69.2439 72.3611 67.7021 71.271C67.5256 71.1464 67.3387 71.0322 67.1414 70.9335L63.0455 68.8466C62.3862 68.5092 61.6542 68.3379 60.8704 68.3379Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M86.8423 73.3473C85.9079 73.3473 85.0409 73.1449 84.257 72.7451L80.1611 70.6583C79.9379 70.544 79.7147 70.4091 79.5018 70.2585C77.6278 68.9348 76.5947 66.4637 76.5947 63.3126C76.5947 60.1615 77.5759 56.8599 79.3513 53.7918C81.1319 50.7186 83.5095 48.3099 86.048 47.0172C87.3458 46.3579 88.6125 46.0205 89.8273 46.0205C90.7617 46.0205 91.6338 46.223 92.4125 46.6227L96.5084 48.7096C96.7368 48.8238 96.9549 48.9588 97.1677 49.1093C99.0418 50.4331 100.075 52.9041 100.075 56.0552C100.075 59.2063 99.0989 62.508 97.3183 65.576C95.5377 68.6492 93.1601 71.058 90.6215 72.3506C89.3237 73.0099 88.057 73.3473 86.8423 73.3473Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M89.8272 46.55C90.6734 46.55 91.4677 46.7317 92.1789 47.0951L96.2748 49.1819C96.4824 49.2858 96.6797 49.4052 96.8666 49.5401C98.5849 50.7549 99.5505 53.1013 99.5505 56.0604C99.5505 59.0194 98.5849 62.3522 96.8666 65.3216C95.1483 68.291 92.8122 70.653 90.3827 71.8937C89.1524 72.5219 87.9532 72.8334 86.8422 72.8334C85.9961 72.8334 85.2018 72.6517 84.4906 72.2883L80.3947 70.2014C80.1922 70.0976 79.9898 69.9782 79.8029 69.8432C78.0846 68.6284 77.119 66.282 77.119 63.323C77.119 60.3639 78.0846 57.0311 79.8029 54.0617C81.5212 51.0923 83.8573 48.7303 86.2868 47.4896C87.5171 46.8614 88.7163 46.55 89.8272 46.55ZM89.8272 45.5117C88.5346 45.5117 87.1849 45.8647 85.8144 46.5655C83.1876 47.9049 80.7321 50.3811 78.9048 53.5426C77.0827 56.6885 76.0807 60.1615 76.0807 63.323C76.0807 66.6506 77.1917 69.2669 79.2059 70.6945C79.4343 70.8555 79.6783 71.006 79.9275 71.1306L84.0234 73.2175C84.8799 73.6536 85.8299 73.8768 86.8422 73.8768C88.1349 73.8768 89.4846 73.5238 90.8551 72.823C93.4819 71.4836 95.9373 69.0074 97.7647 65.8459C99.5868 62.7 100.589 59.227 100.589 56.0656C100.589 52.738 99.4778 50.1216 97.4636 48.694C97.23 48.5278 96.9912 48.3825 96.742 48.2579L92.6461 46.171C91.7895 45.7349 90.8395 45.5117 89.8272 45.5117Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M123.275 65.9652C122.428 65.5343 121.484 65.2955 120.466 65.2592C118.929 65.2073 117.263 65.6226 115.576 66.4843C113.562 67.507 111.584 69.1319 109.819 71.2084C108.344 72.9423 107.062 74.9409 106.05 77.0797C105.655 77.9051 105.36 78.7721 105.126 79.6546C104.539 81.8816 103.454 86.4084 103.672 88.7341C103.693 88.9729 103.766 89.1805 103.88 89.3363C103.953 89.4349 104.036 89.5076 104.14 89.5595L100.044 87.4726C99.945 87.4207 99.8568 87.348 99.7841 87.2494C99.6699 87.0936 99.5972 86.886 99.5764 86.6472C99.3584 84.3215 100.443 79.7947 101.03 77.5677C101.264 76.6852 101.559 75.8182 101.954 74.9928C102.966 72.8592 104.254 70.8554 105.723 69.1215C107.488 67.045 109.466 65.4201 111.48 64.3974C113.167 63.5357 114.834 63.1204 116.37 63.1723C117.382 63.2086 118.327 63.4474 119.179 63.8783L123.275 65.9652Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M123.275 65.9649C123.711 66.1881 124.126 66.4633 124.505 66.7903C125.626 67.7455 126.472 69.116 126.986 70.8084C127.5 72.5007 127.666 74.4786 127.48 76.6122C127.459 76.877 127.386 77.1573 127.272 77.4272C127.158 77.6972 127.002 77.9567 126.82 78.1748C123.399 82.307 119.521 85.536 115.576 87.5398C111.485 89.6215 107.644 90.26 104.332 89.6319C104.264 89.6215 104.197 89.5956 104.14 89.5644C104.041 89.5125 103.953 89.4398 103.88 89.3412C103.766 89.1855 103.693 88.9778 103.672 88.739C103.454 86.4133 104.539 81.8865 105.126 79.6595C105.36 78.777 105.655 77.91 106.05 77.0846C107.062 74.951 108.35 72.9472 109.819 71.2133C111.584 69.1368 113.562 67.5119 115.576 66.4892C117.263 65.6275 118.93 65.2122 120.466 65.2641C121.478 65.3004 122.423 65.5392 123.275 65.9701V65.9649Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M120.061 44.7381C118.867 44.1307 117.357 44.2242 115.789 45.0236C114.024 45.9217 112.331 47.64 111.086 49.7892C109.84 51.9436 109.139 54.3575 109.139 56.5067C109.139 58.6559 109.84 60.3534 111.086 61.2359C111.226 61.3346 111.366 61.4228 111.516 61.4955L107.421 59.4086C107.27 59.3307 107.13 59.2477 106.99 59.1491C105.744 58.2665 105.043 56.5638 105.043 54.4198C105.043 52.2706 105.744 49.8567 106.99 47.7023C108.236 45.5479 109.928 43.8348 111.693 42.9367C113.261 42.1373 114.771 42.0438 115.965 42.6512L120.061 44.7381Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M120.061 44.7381C120.212 44.816 120.352 44.8991 120.492 44.9977C121.738 45.8802 122.439 47.5829 122.439 49.7269C122.439 51.8709 121.738 54.2901 120.492 56.4444C119.246 58.5988 117.554 60.3119 115.789 61.21C114.221 62.0095 112.71 62.1029 111.516 61.4955C111.366 61.4177 111.226 61.3346 111.086 61.236C109.84 60.3535 109.139 58.6507 109.139 56.5067C109.139 54.3575 109.84 51.9436 111.086 49.7892C112.331 47.6348 114.024 45.9217 115.789 45.0236C117.357 44.2242 118.867 44.1307 120.061 44.7381Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M69.8824 93.0843C69.0362 92.6535 68.0914 92.4147 67.0739 92.3783C65.5373 92.3264 63.8709 92.7417 62.1838 93.6035C60.1696 94.6261 58.1917 96.251 56.4266 98.3275C54.9523 100.061 53.6701 102.06 52.6578 104.199C52.2633 105.024 51.9674 105.891 51.7337 106.774C51.1471 109.001 50.0622 113.528 50.2802 115.853C50.301 116.092 50.3736 116.3 50.4878 116.455C50.5605 116.554 50.6436 116.627 50.7474 116.679L46.6515 114.592C46.5529 114.54 46.4646 114.467 46.3919 114.369C46.2777 114.213 46.205 114.005 46.1843 113.766C45.9663 111.441 47.0512 106.914 47.6378 104.687C47.8714 103.804 48.1673 102.937 48.5619 102.112C49.5742 99.9783 50.8616 97.9745 52.3307 96.2406C54.0958 94.1641 56.0736 92.5393 58.0879 91.5166C59.775 90.6548 61.4414 90.2395 62.978 90.2914C63.9903 90.3278 64.9351 90.5666 65.7865 90.9975L69.8824 93.0843Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M69.8824 93.0841C70.3185 93.3073 70.7338 93.5824 71.1127 93.9095C72.234 94.8647 73.0802 96.2352 73.5941 97.9275C74.1081 99.6199 74.2742 101.598 74.0873 103.731C74.0666 103.996 73.9939 104.276 73.8797 104.546C73.7655 104.816 73.6097 105.076 73.428 105.294C70.007 109.426 66.1291 112.655 62.1837 114.659C58.093 116.741 54.2515 117.379 50.9395 116.751C50.872 116.741 50.8045 116.715 50.7474 116.684C50.6488 116.632 50.5605 116.559 50.4878 116.46C50.3736 116.305 50.3009 116.097 50.2802 115.858C50.0621 113.532 51.1471 109.006 51.7337 106.779C51.9673 105.896 52.2632 105.029 52.6578 104.204C53.6701 102.07 54.9575 100.066 56.4266 98.3324C58.1917 96.2559 60.1695 94.631 62.1837 93.6084C63.8709 92.7466 65.5373 92.3313 67.0739 92.3832C68.0862 92.4196 69.031 92.6584 69.8824 93.0892V93.0841Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M66.669 71.8524C65.475 71.245 63.9643 71.3384 62.3966 72.1379C60.6315 73.036 58.9392 74.7543 57.6933 76.9035C56.4474 79.0578 55.7465 81.4718 55.7465 83.621C55.7465 85.7701 56.4474 87.4677 57.6933 88.3502C57.8334 88.4488 57.9736 88.5371 58.1241 88.6098L54.0282 86.5229C53.8777 86.445 53.7375 86.3619 53.5974 86.2633C52.3515 85.3808 51.6506 83.6781 51.6506 81.5341C51.6506 79.3849 52.3515 76.9709 53.5974 74.8166C54.8433 72.6622 56.5356 70.9491 58.3006 70.051C59.8684 69.2515 61.3791 69.1581 62.5731 69.7655L66.669 71.8524Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M66.669 71.8524C66.8195 71.9303 66.9597 72.0133 67.0999 72.1119C68.3458 72.9945 69.0466 74.6972 69.0466 76.8412C69.0466 78.9852 68.3458 81.4043 67.0999 83.5587C65.854 85.7131 64.1616 87.4262 62.3966 88.3243C60.8288 89.1237 59.3182 89.2172 58.1242 88.6098C57.9736 88.5319 57.8335 88.4489 57.6933 88.3502C56.4474 87.4677 55.7466 85.765 55.7466 83.621C55.7466 81.4718 56.4474 79.0579 57.6933 76.9035C58.9392 74.7491 60.6316 73.036 62.3966 72.1379C63.9644 71.3384 65.475 71.245 66.669 71.8524Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M100.703 78.4397C99.5349 77.8479 98.2371 77.5156 96.8407 77.4689C94.7174 77.3962 92.4177 77.9725 90.0972 79.1613C87.3199 80.5733 84.5945 82.8107 82.1598 85.6711C80.0573 88.1474 78.23 91.0181 76.8076 94.081C76.3871 94.9894 76.0496 95.9343 75.7953 96.905C75.0218 99.7914 73.3709 106.473 73.6876 109.831C73.7188 110.164 73.8226 110.449 73.9783 110.662C74.077 110.792 74.1964 110.895 74.3313 110.963L70.2354 108.876C70.0953 108.809 69.9759 108.7 69.8824 108.575C69.7215 108.357 69.6228 108.077 69.5917 107.744C69.3062 104.676 70.6559 98.8362 71.4813 95.6487C71.9018 94.0187 72.4729 92.4353 73.2308 90.9299C74.5701 88.2668 76.2106 85.7698 78.069 83.5842C80.4986 80.7238 83.2292 78.4812 86.0065 77.0744C88.327 75.8908 90.6267 75.3094 92.7499 75.382C94.1464 75.4288 95.4494 75.761 96.6122 76.3528L100.708 78.4397H100.703Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M100.703 78.4455C101.305 78.7518 101.876 79.1307 102.4 79.5824C103.947 80.901 105.116 82.7854 105.822 85.1215C106.528 87.4523 106.761 90.1778 106.502 93.1212C106.47 93.4846 106.372 93.8739 106.211 94.2477C106.05 94.6215 105.842 94.9745 105.588 95.2756C100.869 100.97 95.5273 105.425 90.092 108.181C84.4543 111.052 79.1592 111.929 74.5961 111.067C74.5026 111.052 74.4144 111.021 74.3313 110.979C74.1963 110.912 74.0769 110.808 73.9783 110.673C73.8226 110.46 73.7187 110.175 73.6876 109.842C73.3865 106.634 74.8816 100.394 75.6862 97.3261C76.0081 96.1062 76.4182 94.9122 76.9581 93.7753C78.3545 90.8319 80.1248 88.0701 82.1545 85.6821C84.5893 82.8217 87.3147 80.5843 90.0868 79.1723C92.4073 77.9887 94.707 77.4124 96.8303 77.4799C98.2267 77.5266 99.5297 77.8537 100.698 78.4507L100.703 78.4455Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M96.2748 49.1769C94.6292 48.3411 92.5475 48.4709 90.3827 49.5714C87.948 50.8122 85.6171 53.1742 83.8988 56.1436C82.1805 59.113 81.2149 62.4458 81.2149 65.4048C81.2149 68.3638 82.1805 70.7103 83.8988 71.925C84.0909 72.06 84.2882 72.1794 84.4906 72.2832L80.3947 70.1963C80.1922 70.0925 79.9898 69.9731 79.8029 69.8382C78.0846 68.6234 77.119 66.2769 77.119 63.3179C77.119 60.3589 78.0846 57.0261 79.8029 54.0567C81.5212 51.0873 83.8573 48.7253 86.2868 47.4846C88.4516 46.384 90.5332 46.2542 92.1789 47.09L96.2748 49.1769Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M96.2748 49.1769C96.4773 49.2808 96.6798 49.4002 96.8666 49.5351C98.5849 50.7499 99.5505 53.0963 99.5505 56.0554C99.5505 59.0144 98.5849 62.3472 96.8666 65.3166C95.1483 68.286 92.8123 70.648 90.3827 71.8887C88.218 72.9893 86.1363 73.1191 84.4907 72.2833C84.2882 72.1794 84.0857 72.06 83.8988 71.9251C82.1805 70.7103 81.215 68.3639 81.215 65.4048C81.215 62.4458 82.1805 59.113 83.8988 56.1436C85.6172 53.1742 87.9532 50.8122 90.3827 49.5715C92.5475 48.4709 94.6292 48.3411 96.2748 49.1769Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M155.357 75.2319C156.841 74.474 157.791 72.683 157.791 70.1393C157.791 65.5813 154.754 60.3381 151.011 58.4329C149.355 57.592 147.84 57.5349 146.666 58.137L149.075 56.9119C150.254 56.3149 151.769 56.3668 153.42 57.2078C157.163 59.1182 160.2 64.3562 160.2 68.9141C160.2 71.4578 159.25 73.2488 157.765 74.0067L155.357 75.2319Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M155.357 75.2323C154.178 75.8293 152.662 75.7774 151.011 74.9364C147.269 73.026 144.232 67.7881 144.232 63.2301C144.232 60.6864 145.182 58.8954 146.666 58.1375C147.845 57.5405 149.361 57.5924 151.011 58.4334C154.754 60.3438 157.791 65.5818 157.791 70.1397C157.791 72.6834 156.841 74.4744 155.357 75.2323Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M152.678 71.6861C152.486 71.5874 152.335 71.3227 152.335 71.0891V70.2481C152.335 69.5525 151.873 68.753 151.302 68.4623L149.231 67.4085C148.66 67.1178 148.198 67.4448 148.198 68.1404V68.9814C148.198 69.215 148.042 69.324 147.855 69.2254C147.668 69.1268 147.513 68.862 147.513 68.6284V67.7874C147.513 66.6298 148.286 66.0847 149.236 66.5675L151.307 67.6213C152.257 68.1041 153.031 69.4434 153.031 70.6011V71.4421C153.031 71.6757 152.875 71.7847 152.688 71.6861H152.678Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M152.678 67.4343C152.522 67.3564 152.382 67.1591 152.346 66.9515C152.299 66.7023 152.408 66.531 152.595 66.5673C152.958 66.64 153.244 66.4375 153.337 66.043C153.483 65.446 153.145 64.5843 152.595 64.1326C152.408 63.9821 152.299 63.6965 152.346 63.4941C152.392 63.2916 152.579 63.2553 152.766 63.4058C153.213 63.7744 153.586 64.3091 153.82 64.9113C154.054 65.5135 154.121 66.1105 154.002 66.5933C153.846 67.2526 153.368 67.5848 152.766 67.4706C152.735 67.4654 152.709 67.455 152.678 67.4395V67.4343Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M154.744 72.7398C154.552 72.6411 154.401 72.3764 154.401 72.1428V71.3018C154.401 70.7256 154.08 70.0663 153.628 69.6873C153.441 69.5368 153.332 69.2512 153.379 69.0488C153.425 68.8463 153.612 68.81 153.799 68.9605C154.562 69.5887 155.092 70.6944 155.092 71.6496V72.4906C155.092 72.7242 154.936 72.8332 154.749 72.7346L154.744 72.7398Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M150.264 66.2565C149.314 65.7737 148.54 64.4343 148.54 63.2767C148.54 62.119 149.314 61.5739 150.264 62.0567C151.214 62.5395 151.987 63.8789 151.987 65.0365C151.987 66.1942 151.214 66.7393 150.264 66.2565ZM150.264 62.9029C149.693 62.6122 149.231 62.9393 149.231 63.6349C149.231 64.3305 149.693 65.13 150.264 65.4207C150.835 65.7114 151.297 65.3843 151.297 64.6887C151.297 63.9931 150.835 63.1936 150.264 62.9029Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.85139 79.0938C3.42379 78.3671 2.51532 76.6488 2.51532 74.2037C2.51532 69.8274 5.43281 64.7919 9.02516 62.9646L33.1126 50.6924C34.7012 49.8826 36.1547 49.8307 37.2864 50.4069L34.9711 49.2285C33.8394 48.6523 32.3859 48.7042 30.7973 49.514L6.70986 61.7862C3.11231 63.6187 0.200012 68.6542 0.200012 73.0253C0.200012 75.4703 1.10848 77.1887 2.53608 77.9154L4.85139 79.0938Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.85142 79.0941C5.98312 79.6704 7.43667 79.6185 9.0252 78.8086L33.1127 66.5365C36.7102 64.704 39.6225 59.6684 39.6225 55.2974C39.6225 52.8523 38.7141 51.134 37.2865 50.4072C36.1548 49.831 34.7012 49.8829 33.1127 50.6927L9.0252 62.9649C5.42765 64.7974 2.51535 69.8329 2.51535 74.204C2.51535 76.6491 3.42382 78.3674 4.85142 79.0941Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.3164 67.6785C12.4046 67.5435 12.5344 67.4864 12.6175 67.5435C12.7005 67.6006 12.7057 67.7563 12.6331 67.9017L12.6175 67.9328L9.47157 73.3681C9.38332 73.5187 9.24315 73.5913 9.1549 73.529C9.06665 73.4667 9.06665 73.2954 9.1549 73.1397L12.3008 67.7044L12.3164 67.6785Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M9.98551 69.4907C9.98551 69.2623 9.83497 69.1585 9.64808 69.2519C9.4612 69.3454 9.31065 69.6049 9.31065 69.8333C9.31065 70.0618 9.4612 70.1656 9.64808 70.0721C9.83497 69.9787 9.98551 69.7191 9.98551 69.4907ZM10.4372 69.2623C10.4372 69.7918 10.0841 70.3992 9.64808 70.6224C9.21202 70.8456 8.85901 70.5965 8.85901 70.067C8.85901 69.5374 9.21202 68.9301 9.64808 68.7068C10.0841 68.4836 10.4372 68.7328 10.4372 69.2623Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M12.4618 71.2397C12.4618 71.0113 12.3112 70.9075 12.1243 71.001C11.9375 71.0944 11.7869 71.354 11.7869 71.5824C11.7869 71.8108 11.9375 71.9146 12.1243 71.8212C12.3112 71.7277 12.4618 71.4682 12.4618 71.2397ZM12.9082 71.0113C12.9082 71.5408 12.5552 72.1482 12.1191 72.3714C11.6831 72.5947 11.3301 72.3455 11.3301 71.816C11.3301 71.2865 11.6831 70.6791 12.1191 70.4559C12.5552 70.2326 12.9082 70.4818 12.9082 71.0113Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M10.811 65.6902C10.811 65.5448 10.9096 65.3787 11.029 65.3216C11.7298 65.0101 12.4099 64.9063 13.0172 65.0361C13.6869 65.1763 14.232 65.5864 14.611 66.2197C14.9847 66.853 15.1716 67.694 15.1509 68.644C15.1301 69.5992 14.8965 70.6323 14.4864 71.6394C14.0711 72.6465 13.4896 73.5913 12.8044 74.3752C12.114 75.1591 11.3457 75.7509 10.5722 76.0883C9.79866 76.4257 9.05112 76.5036 8.4074 76.3063C7.82598 76.1246 7.34319 75.7301 7.01095 75.1487C6.95385 75.05 7.00057 74.8684 7.10958 74.749C7.2186 74.6296 7.34838 74.6192 7.40549 74.7178C7.70658 75.2317 8.13226 75.5795 8.65139 75.7405C9.23281 75.917 9.90248 75.8495 10.5981 75.5432C11.2937 75.2369 11.9894 74.7074 12.6071 74.0014C13.2249 73.2954 13.7492 72.4492 14.123 71.5407C14.4968 70.6323 14.6992 69.703 14.72 68.8413C14.7407 67.9847 14.5746 67.2268 14.2372 66.6558C13.8998 66.0847 13.4066 65.7161 12.8044 65.5916C12.2645 65.4773 11.6623 65.5656 11.0394 65.8407C10.92 65.8927 10.8213 65.8252 10.8213 65.6798L10.811 65.6902Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M30.0654 62.8974L21.2506 67.3878C20.5238 67.7564 19.9372 67.3411 19.9372 66.4586C19.9372 65.576 20.5238 64.5638 21.2506 64.1952L30.0654 59.7047C30.7921 59.3362 31.3787 59.7515 31.3787 60.634C31.3787 61.5165 30.7921 62.5288 30.0654 62.8974Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M100.594 1.79612C101.814 1.17317 103.392 1.22508 105.11 2.10241L144.086 21.9642C147.969 23.9421 151.121 29.3773 151.121 34.1066C151.121 36.7437 150.139 38.6022 148.603 39.3861L150.918 38.2077C152.46 37.4238 153.436 35.5653 153.436 32.9281C153.436 28.2041 150.285 22.7636 146.402 20.7858L107.421 0.923991C105.702 0.0466671 104.129 -0.0052456 102.904 0.617706L100.589 1.79612H100.594Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M100.594 1.79544C99.0521 2.57932 98.0762 4.43779 98.0762 7.07496C98.0762 11.799 101.227 17.2395 105.11 19.2173L144.086 39.0791C145.805 39.9564 147.378 40.0084 148.603 39.3854C150.145 38.6015 151.121 36.743 151.121 34.1059C151.121 29.3818 147.969 23.9414 144.086 21.9635L105.11 2.10173C103.392 1.2244 101.819 1.17249 100.594 1.79544Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M105.624 8.74176V13.6631C105.624 14.4781 106.164 15.4177 106.839 15.7604L113.313 19.0568C113.982 19.3994 114.527 19.0153 114.527 18.2002V13.2789C114.527 12.4691 113.982 11.5243 113.313 11.1817L112.098 10.5639V10.0707C112.098 9.26089 111.553 8.31608 110.883 7.97346L109.263 7.14805C108.594 6.80542 108.049 7.19477 108.049 8.0046V8.49777L106.834 7.88001C106.164 7.53739 105.619 7.92674 105.619 8.73657L105.624 8.74176ZM113.313 18.0757L112.098 17.4579V11.5502L113.313 12.168C113.536 12.2822 113.717 12.5937 113.717 12.8688V17.7901C113.717 18.0601 113.536 18.1899 113.313 18.0757ZM108.864 9.89942L111.293 11.1349V17.0426L108.864 15.8071V9.89942ZM108.864 8.41991C108.864 8.14996 109.045 8.02018 109.269 8.13439L110.888 8.9598C111.111 9.07401 111.293 9.38548 111.293 9.66062V10.1538L108.864 8.91827V8.4251V8.41991ZM106.434 9.15187C106.434 8.88193 106.616 8.75215 106.839 8.86635L108.054 9.48411V15.3918L106.839 14.774C106.616 14.6598 106.434 14.3483 106.434 14.0732V9.15187Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M125.875 19.5761C125.943 19.7941 126.088 19.9966 126.26 20.0848C126.493 20.2094 126.685 20.0693 126.69 19.7734V19.2335C126.69 19.057 126.628 18.8545 126.509 18.6988C126.395 18.5378 126.244 18.4392 126.114 18.4392L123.342 18.3613C123.176 18.3613 123.067 18.5015 123.067 18.7195V22.452C123.067 22.6389 123.145 22.8518 123.275 23.0127C123.404 23.1736 123.56 23.2619 123.695 23.2411L124.09 23.184C124.297 23.1529 124.38 22.8725 124.271 22.5559C124.199 22.3482 124.064 22.1769 123.924 22.0938V19.519L125.875 19.5761Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M124.167 17.1103C124.235 17.3283 124.38 17.5308 124.552 17.619C124.785 17.7436 124.977 17.6034 124.983 17.3075V16.7676C124.983 16.5911 124.92 16.3887 124.801 16.2329C124.681 16.0772 124.536 15.9734 124.406 15.9734L121.634 15.8955C121.468 15.8955 121.359 16.0357 121.359 16.2537V19.9862C121.359 20.1731 121.437 20.386 121.567 20.5469C121.696 20.7078 121.852 20.7961 121.987 20.7753L122.382 20.7182C122.589 20.687 122.672 20.4067 122.563 20.0901C122.491 19.8824 122.356 19.7111 122.216 19.628V17.0532L124.167 17.1103Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M128.393 21.2534C128.279 21.0925 128.134 20.9939 127.999 20.9939L125.227 20.916C125.066 20.916 124.957 21.0562 124.957 21.269V25.0067C124.957 25.1832 125.024 25.3805 125.138 25.5311C125.258 25.6972 125.403 25.7906 125.538 25.7958L128.3 25.8737C128.471 25.8841 128.58 25.7439 128.58 25.5207V21.783C128.58 21.6065 128.513 21.4092 128.393 21.2534ZM127.729 24.7212L125.813 24.6641V22.0737L127.729 22.1308V24.7212Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M139.871 24.986C138.199 24.1346 136.85 25.095 136.85 27.1248C136.85 29.1546 138.205 31.4906 139.871 32.342C141.543 33.1934 142.892 32.233 142.892 30.2032C142.892 28.1734 141.537 25.8374 139.871 24.986ZM139.871 23.9373C137.727 22.842 135.983 24.0723 135.983 26.6835C135.983 29.2947 137.722 32.3005 139.871 33.3906C142.015 34.486 143.759 33.2557 143.759 30.6445C143.759 28.0333 142.02 25.0275 139.871 23.9373Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M139.871 31.4999C140.489 31.8166 141.081 31.8166 141.522 31.5103C141.963 31.204 142.207 30.607 142.207 29.8543C142.207 29.1016 141.963 28.2554 141.522 27.5026C141.086 26.7499 140.494 26.1477 139.871 25.8311V31.5051V31.4999Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/view.tsx b/packages/propel/src/empty-state/assets/vertical-stack/view.tsx
new file mode 100644
index 0000000..77ba744
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/view.tsx
@@ -0,0 +1,326 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ViewVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="163"
+      viewBox="0 0 162 163"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M62.1863 125.972L61.8748 126.13C61.9412 126.094 62.0076 126.059 62.074 126.023C62.1097 126.003 62.1505 125.987 62.1863 125.972Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M70.2281 129.969L70.0289 130.077C69.9932 130.097 69.9523 130.112 69.9166 130.128L70.2281 129.969Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <g opacity="0.2">
+        <path
+          d="M12.4695 128.673C12.4695 130.603 13.9145 132.528 16.7993 134.003L53.9451 152.931C59.72 155.872 69.0792 155.872 74.854 152.931L152.909 113.161C155.794 111.69 157.238 109.765 157.238 107.835V113.998C157.238 115.928 155.794 117.853 152.909 119.324L74.854 159.094C69.0792 162.035 59.72 162.035 53.9451 159.094L16.7993 140.166C13.9094 138.696 12.4695 136.766 12.4695 134.836V128.673Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.4695 128.673C12.4695 126.743 13.9145 124.818 16.7993 123.348L94.854 83.5774C100.629 80.6363 109.988 80.6363 115.763 83.5774L152.909 102.505C155.799 103.976 157.238 105.906 157.238 107.836C157.238 109.766 155.794 111.691 152.909 113.161L74.854 152.931C69.0792 155.872 59.72 155.872 53.9451 152.931L16.7993 134.004C13.9094 132.533 12.4695 130.603 12.4695 128.673Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M12.4695 109.204C12.4695 111.134 13.9145 113.059 16.7993 114.534L53.9451 133.462C59.72 136.403 69.0792 136.403 74.854 133.462L152.909 93.692C155.794 92.2214 157.238 90.2965 157.238 88.3665V94.5293C157.238 96.4594 155.794 98.3843 152.909 99.8548L74.854 139.625C69.0792 142.566 59.72 142.566 53.9451 139.625L16.7993 120.697C13.9094 119.227 12.4695 117.297 12.4695 115.367V109.204Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.4695 109.204C12.4695 107.274 13.9145 105.349 16.7993 103.878L94.854 64.1081C100.629 61.1671 109.988 61.1671 115.763 64.1081L152.909 83.0358C155.799 84.5064 157.238 86.4364 157.238 88.3664C157.238 90.2965 155.794 92.2214 152.909 93.692L74.854 133.462C69.0792 136.403 59.72 136.403 53.9451 133.462L16.7993 114.534C13.9094 113.064 12.4695 111.134 12.4695 109.204Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M12.4695 89.7356C12.4695 91.6656 13.9145 93.5905 16.7993 95.0662L53.9451 113.994C59.72 116.935 69.0792 116.935 74.854 113.994L152.909 74.2237C155.794 72.7532 157.238 70.8282 157.238 68.8982V75.0611C157.238 76.9911 155.794 78.9161 152.909 80.3866L74.854 120.157C69.0792 123.098 59.72 123.098 53.9451 120.157L16.7993 101.229C13.9094 99.7585 12.4695 97.8285 12.4695 95.8984V89.7356Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.4695 89.7356C12.4695 87.8055 13.9145 85.8806 16.7993 84.41L94.854 44.6399C100.629 41.6988 109.988 41.6988 115.763 44.6399L152.909 63.5676C155.799 65.0381 157.238 66.9681 157.238 68.8982C157.238 70.8282 155.794 72.7532 152.909 74.2237L74.854 113.994C69.0792 116.935 59.72 116.935 53.9451 113.994L16.7993 95.0662C13.9094 93.5956 12.4695 91.6656 12.4695 89.7356Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M131.009 3.0161C132.158 2.42891 133.634 2.47997 135.247 3.30203C138.898 5.16059 141.854 10.2716 141.854 14.7138C141.854 17.1902 140.935 18.9364 139.485 19.6768L141.834 18.482C143.284 17.7467 144.203 15.9954 144.203 13.519C144.203 9.07685 141.242 3.97091 137.596 2.10724C135.982 1.28518 134.502 1.23412 133.358 1.8213L131.009 3.0161Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M131.009 3.01613C129.559 3.75139 128.64 5.50272 128.64 7.97911C128.64 12.4213 131.602 17.5272 135.247 19.3909C136.861 20.213 138.341 20.264 139.485 19.6768C140.935 18.9416 141.854 17.1902 141.854 14.7138C141.854 10.2717 138.893 5.16573 135.247 3.30206C133.634 2.48 132.153 2.42895 131.009 3.01613Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M133.843 8.08101C133.644 7.9789 133.48 7.69807 133.48 7.45809V5.70164C133.48 5.45656 133.644 5.34423 133.843 5.44635C134.042 5.54847 134.206 5.82929 134.206 6.06927V7.82572C134.206 8.0708 134.042 8.18313 133.843 8.08101Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M136.733 9.55684C136.534 9.45473 136.37 9.1739 136.37 8.93392V7.17748C136.37 6.93239 136.534 6.82006 136.733 6.92218C136.932 7.0243 137.096 7.30512 137.096 7.5451V9.30155C137.096 9.54663 136.932 9.65896 136.733 9.55684Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M137.815 17.1339L132.761 14.5605C132.163 14.2541 131.678 13.4168 131.678 12.6917V6.53906C131.678 5.81401 132.163 5.46681 132.761 5.77317L137.815 8.34656C138.413 8.65292 138.898 9.49029 138.898 10.2153V16.368C138.898 17.093 138.413 17.4403 137.815 17.1339ZM132.761 6.65139C132.561 6.54927 132.398 6.66671 132.398 6.90669V13.0593C132.398 13.2993 132.561 13.5802 132.761 13.6823L137.815 16.2557C138.015 16.3578 138.178 16.2404 138.178 16.0004V9.84771C138.178 9.60773 138.015 9.3269 137.815 9.22479L132.761 6.65139Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M138.535 12.2323L132.035 8.91859C131.836 8.81647 131.673 8.53564 131.673 8.29566C131.673 8.05568 131.836 7.93825 132.035 8.04037L138.535 11.3541C138.734 11.4562 138.898 11.7371 138.898 11.977C138.898 12.217 138.734 12.3345 138.535 12.2323Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M52.1735 1.76965C50.9736 1.15694 49.4213 1.208 47.7313 2.0709L9.39582 21.6062C5.57657 23.5516 2.47726 28.8975 2.47726 33.549C2.47726 36.1429 3.44229 37.9708 4.95365 38.7418L2.67638 37.5827C1.15992 36.8117 0.200012 34.9838 0.200012 32.39C0.200012 27.7436 3.29932 22.3926 7.11857 20.4472L45.4592 0.911851C47.1492 0.0489463 48.6963 -0.00211319 49.9013 0.6106L52.1786 1.76965H52.1735Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M52.1734 1.77002C53.6898 2.54102 54.6498 4.36895 54.6498 6.96277C54.6498 11.6092 51.5504 16.9602 47.7312 18.9056L9.39573 38.4409C7.70566 39.3038 6.15857 39.3549 4.95356 38.7422C3.43709 37.9712 2.47717 36.1432 2.47717 33.5494C2.47717 28.903 5.57648 23.552 9.39573 21.6066L47.7312 2.07127C49.4213 1.20837 50.9684 1.15731 52.1734 1.77002Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M27.0317 24.6234C26.7764 24.7511 26.5671 24.6081 26.5671 24.2967V18.1083C26.5671 17.7968 26.7764 17.4394 27.0317 17.3117C27.287 17.1841 27.4964 17.3271 27.4964 17.6385V23.8269C27.4964 24.1384 27.287 24.4958 27.0317 24.6234Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M29.8094 20.396C29.5541 20.5237 29.3448 20.3807 29.3448 20.0692V16.6942C29.3448 16.3827 29.5541 16.0253 29.8094 15.8977C30.0647 15.77 30.274 15.913 30.274 16.2245V19.5995C30.274 19.9109 30.0647 20.2684 29.8094 20.396Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M32.5819 23.4803C32.3266 23.6079 32.1173 23.4649 32.1173 23.1535V15.275C32.1173 14.9635 32.3266 14.6061 32.5819 14.4785C32.8372 14.3508 33.0466 14.4938 33.0466 14.8053V22.6837C33.0466 22.9952 32.8372 23.3526 32.5819 23.4803Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M12.6382 29.1839C12.3829 29.3115 12.1787 29.1686 12.1787 28.8622C12.1787 28.5559 12.3829 28.1984 12.6331 28.0708C12.8884 27.938 13.0927 28.0861 13.0927 28.3925C13.0927 28.6988 12.8884 29.0562 12.6331 29.1839H12.6382Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M12.6382 32.5333C12.3829 32.6609 12.1787 32.5179 12.1787 32.2116C12.1787 31.9052 12.3829 31.5478 12.6331 31.4202C12.8884 31.2874 13.0927 31.4355 13.0927 31.7418C13.0927 32.0482 12.8884 32.4056 12.6331 32.5333H12.6382Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M12.6382 25.8343C12.3829 25.9619 12.1787 25.819 12.1787 25.5126C12.1787 25.2063 12.3829 24.8488 12.6331 24.7212C12.8884 24.5884 13.0927 24.7365 13.0927 25.0429C13.0927 25.3492 12.8884 25.7066 12.6331 25.8343H12.6382Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M20.8946 24.9763L14.9308 28.0144C14.6755 28.142 14.4713 27.999 14.4713 27.6876C14.4713 27.3761 14.6755 27.0238 14.9308 26.8962L20.8946 23.8581C21.1499 23.7305 21.3541 23.8734 21.3541 24.1849C21.3541 24.4964 21.1499 24.8487 20.8946 24.9763Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M20.8946 28.3259L14.9308 31.364C14.6755 31.4916 14.4713 31.3487 14.4713 31.0372C14.4713 30.7257 14.6755 30.3734 14.9308 30.2458L20.8946 27.2077C21.1499 27.0801 21.3541 27.223 21.3541 27.5345C21.3541 27.846 21.1499 28.1983 20.8946 28.3259Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M20.8946 21.627L14.9308 24.665C14.6755 24.7926 14.4713 24.6497 14.4713 24.3382C14.4713 24.0268 14.6755 23.6744 14.9308 23.5468L20.8946 20.5088C21.1499 20.3811 21.3541 20.5241 21.3541 20.8355C21.3541 21.147 21.1499 21.4993 20.8946 21.627Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M45.6737 16.552L40.6188 19.1253C40.0214 19.4317 39.5364 19.0845 39.5364 18.3595V12.2068C39.5364 11.4817 40.0214 10.6393 40.6188 10.338L45.6737 7.76462C46.2711 7.45827 46.7562 7.80547 46.7562 8.53051V14.6832C46.7562 15.4082 46.2711 16.2507 45.6737 16.552ZM40.6188 11.2162C40.4197 11.3184 40.2563 11.5992 40.2563 11.8392V17.9918C40.2563 18.2318 40.4197 18.3492 40.6188 18.2471L45.6737 15.6737C45.8729 15.5716 46.0362 15.2908 46.0362 15.0508V8.89814C46.0362 8.65816 45.8729 8.54073 45.6737 8.64284L40.6188 11.2162Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M44.5913 11.39L42.0639 12.6767C41.8648 12.7788 41.7014 12.6665 41.7014 12.4214C41.7014 12.1763 41.8648 11.9006 42.0639 11.7985L44.5913 10.5118C44.7905 10.4097 44.9538 10.522 44.9538 10.7671C44.9538 11.0122 44.7905 11.2879 44.5913 11.39Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M43.8662 13.514L41.7013 14.6169C41.5021 14.719 41.3388 14.6067 41.3388 14.3616C41.3388 14.1165 41.5021 13.8408 41.7013 13.7387L43.8662 12.6358C44.0653 12.5337 44.2287 12.646 44.2287 12.8911C44.2287 13.1362 44.0653 13.4119 43.8662 13.514Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M44.5913 14.9078L42.7838 15.8269C42.5846 15.929 42.4213 15.8167 42.4213 15.5716C42.4213 15.3265 42.5846 15.0508 42.7838 14.9487L44.5913 14.0296C44.7904 13.9275 44.9538 14.0398 44.9538 14.2849C44.9538 14.53 44.7904 14.8057 44.5913 14.9078Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M147.006 25.4609C148.155 24.8737 149.631 24.9248 151.244 25.7469C154.895 27.6054 157.851 32.7165 157.851 37.1586C157.851 39.635 156.932 41.3813 155.482 42.1216L157.831 40.9268C159.281 40.1916 160.2 38.4402 160.2 35.9638C160.2 31.5217 157.239 26.4157 153.593 24.5521C151.979 23.73 150.499 23.6789 149.355 24.2661L147.006 25.4609Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M147.006 25.461C145.556 26.1962 144.637 27.9475 144.637 30.4239C144.637 34.8661 147.599 39.972 151.244 41.8357C152.858 42.6578 154.338 42.7088 155.482 42.1216C156.932 41.3864 157.851 39.6351 157.851 37.1587C157.851 32.7165 154.89 27.6106 151.244 25.7469C149.631 24.9248 148.15 24.8738 147.006 25.461Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M153.864 39.6905L148.809 37.1171C148.211 36.8108 147.726 35.9734 147.726 35.2484V29.0957C147.726 28.3707 148.211 28.0235 148.809 28.3298L153.864 30.9032C154.461 31.2096 154.946 32.0469 154.946 32.772V38.9246C154.946 39.6497 154.461 39.9969 153.864 39.6905ZM148.809 29.2029C148.61 29.1008 148.446 29.2182 148.446 29.4582V35.6109C148.446 35.8509 148.61 36.1317 148.809 36.2338L153.864 38.8072C154.063 38.9093 154.226 38.7919 154.226 38.5519V32.3992C154.226 32.1593 154.063 31.8784 153.864 31.7763L148.809 29.2029Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M154.589 34.7839L148.089 31.4701C147.89 31.368 147.726 31.0872 147.726 30.8472C147.726 30.6072 147.89 30.4898 148.089 30.5919L154.589 33.9056C154.788 34.0078 154.951 34.2886 154.951 34.5286C154.951 34.7685 154.788 34.886 154.589 34.7839Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M154.589 37.4186L148.089 34.1049C147.89 34.0027 147.726 33.7219 147.726 33.4819C147.726 33.242 147.89 33.1245 148.089 33.2266L154.589 36.5404C154.788 36.6425 154.951 36.9233 154.951 37.1633C154.951 37.4033 154.788 37.5207 154.589 37.4186Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M150.254 37.8473C150.055 37.7452 149.891 37.4644 149.891 37.2244V31.9499C149.891 31.7049 150.055 31.5925 150.254 31.6946C150.453 31.7968 150.616 32.0776 150.616 32.3176V37.592C150.616 37.8371 150.453 37.9494 150.254 37.8473Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M152.419 38.9555C152.22 38.8533 152.056 38.5725 152.056 38.3325V33.0581C152.056 32.813 152.22 32.7007 152.419 32.8028C152.618 32.9049 152.781 33.1857 152.781 33.4257V38.7002C152.781 38.9452 152.618 39.0576 152.419 38.9555Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M81.4561 57.5826C79.5158 57.5826 77.6827 57.1946 76.2939 56.4848L50.2332 43.2094C48.7371 42.4486 47.91 41.3917 47.91 40.2377V35.1318C47.91 33.9829 48.732 32.9311 50.2281 32.1652L76.2888 18.8898C77.6776 18.18 79.5107 17.792 81.451 17.792C83.3912 17.792 85.2294 18.18 86.6182 18.8898L112.674 32.1652C114.17 32.926 114.997 33.9829 114.997 35.1369V40.2428C114.997 41.3917 114.175 42.4486 112.674 43.2094L86.6182 56.4848C85.2294 57.1946 83.3963 57.5826 81.451 57.5826H81.4561ZM78.7754 44.011C79.4852 44.3735 80.4349 44.5727 81.4561 44.5727C82.4773 44.5727 83.432 44.3735 84.1418 44.011L96.5543 37.6848L84.1418 31.3636C83.432 31.0011 82.4773 30.8019 81.4561 30.8019C80.4349 30.8019 79.4801 31.0011 78.7754 31.3636L66.3629 37.6848L78.7754 44.011Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M81.456 18.3027C83.2431 18.3027 85.0251 18.6499 86.3884 19.3443L112.444 32.6198C113.807 33.3142 114.486 34.2281 114.486 35.137V40.2429C114.486 41.1518 113.807 42.0606 112.444 42.755L86.3884 56.0305C85.0251 56.7249 83.238 57.0721 81.456 57.0721C79.6741 57.0721 77.887 56.7249 76.5237 56.0305L50.4629 42.755C49.0996 42.0606 48.4205 41.1467 48.4205 40.2378V35.1319C48.4205 34.223 49.1047 33.3142 50.4629 32.6198L76.5237 19.3443C77.887 18.6499 79.669 18.3027 81.456 18.3027ZM81.456 45.0834C82.513 45.0834 83.5648 44.8791 84.3715 44.4655L97.6776 37.6848L84.3715 30.9093C83.5648 30.5008 82.5079 30.2914 81.456 30.2914C80.4042 30.2914 79.3473 30.4957 78.5405 30.9093L65.2344 37.6848L78.5405 44.4655C79.3473 44.874 80.3991 45.0834 81.456 45.0834ZM81.456 17.2815C79.4341 17.2815 77.5193 17.69 76.059 18.4354L49.9983 31.7109C48.3235 32.5687 47.3994 33.7839 47.3994 35.1319V40.2378C47.3994 41.0241 47.7363 42.5151 49.9983 43.6639L76.059 56.9394C77.5142 57.6848 79.429 58.0933 81.4509 58.0933C83.4729 58.0933 85.3876 57.6848 86.8479 56.9394L112.904 43.6639C115.165 42.51 115.503 41.0241 115.503 40.2429V35.137C115.503 34.3507 115.165 32.8597 112.904 31.7109L86.8479 18.4354C85.3876 17.69 83.4729 17.2815 81.4509 17.2815H81.456ZM67.4913 37.6848L79.0103 31.8181C79.6383 31.4964 80.5318 31.3126 81.4611 31.3126C82.3904 31.3126 83.2839 31.4964 83.9171 31.8181L95.4361 37.6848L83.9171 43.5567C83.289 43.8784 82.3904 44.0622 81.4611 44.0622C80.5318 44.0622 79.6383 43.8784 79.0103 43.5567L67.4913 37.6848Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M81.2263 93.2112C78.8163 93.2112 76.6871 92.8282 75.3851 92.1644L49.4724 78.9656C49.1915 78.8226 48.9362 78.6694 48.686 78.4958C48.6707 78.4856 48.6554 78.4703 48.6401 78.4601C48.0682 77.9597 47.767 77.3725 47.767 76.7598V71.6539C47.767 70.7654 48.3899 69.9638 49.5183 69.3868C50.5395 68.866 51.8875 68.5801 53.312 68.5801C54.5374 68.5801 55.7374 68.7996 56.6922 69.1979C56.8147 69.2541 57.0343 69.3664 57.504 69.6064L76.7688 79.4251C78.0146 80.0582 79.6843 80.4054 81.4662 80.4054C83.2482 80.4054 84.923 80.0582 86.1688 79.4251L105.428 69.6115C105.908 69.3664 106.123 69.249 106.245 69.203C107.2 68.7996 108.4 68.5801 109.62 68.5801C111.045 68.5801 112.388 68.866 113.409 69.3868C114.537 69.9587 115.16 70.7654 115.16 71.6539V76.7598C115.16 77.3827 114.844 77.9801 114.252 78.4856C113.981 78.6796 113.736 78.8226 113.46 78.9656L87.8691 92.001C86.3833 92.7567 83.9069 93.2112 81.2365 93.2112H81.2263Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M109.615 69.091C110.902 69.091 112.189 69.3412 113.169 69.8415C114.155 70.3419 114.645 70.9955 114.645 71.6542V76.7601C114.645 77.2196 114.4 77.6843 113.915 78.0979C113.695 78.251 113.47 78.3838 113.22 78.5114L112.607 78.8229L87.6292 91.5469C86.1535 92.2975 83.6618 92.7009 81.2263 92.7009C79.0563 92.7009 76.9322 92.3843 75.6149 91.7103L50.3455 78.8382L49.7022 78.5114C49.4418 78.3787 49.2018 78.2357 48.972 78.0774C48.5074 77.669 48.2725 77.2145 48.2725 76.7601V71.6542C48.2725 70.9955 48.7627 70.3419 49.743 69.8415C50.7284 69.3412 52.0152 69.091 53.3019 69.091C54.4303 69.091 55.5587 69.285 56.488 69.6679C56.4931 69.6679 57.2641 70.0611 57.2641 70.0611L76.5288 79.8798C77.8921 80.5742 79.6741 80.9163 81.4612 80.9163C83.2482 80.9163 85.0302 80.5691 86.3935 79.8798L105.653 70.0662C105.653 70.0662 106.424 69.6679 106.434 69.6679C107.359 69.2799 108.487 69.091 109.615 69.091ZM109.615 68.0698C108.308 68.0698 107.073 68.2996 106.041 68.7285C105.883 68.7999 105.638 68.9276 105.183 69.1625L85.9289 78.971C84.7698 79.5582 83.141 79.8952 81.4561 79.8952C79.7711 79.8952 78.1474 79.5582 76.9884 78.9659L57.7236 69.1471C57.2743 68.9174 57.0343 68.7948 56.876 68.7233C55.8446 68.2893 54.609 68.0596 53.2968 68.0596C51.7956 68.0596 50.3659 68.3659 49.2733 68.9225C47.5066 69.8211 47.2462 71.0159 47.2462 71.6439V76.7499C47.2462 77.2809 47.43 78.0723 48.2929 78.8331C48.3236 78.8586 48.3542 78.8842 48.3899 78.9097C48.6606 79.0935 48.9363 79.262 49.2375 79.4101L49.8809 79.7369L75.1502 92.609C77.0292 93.5689 79.7609 93.7118 81.2263 93.7118C83.9733 93.7118 86.5416 93.237 88.0938 92.4456L113.072 79.7216L113.685 79.4101C113.981 79.2569 114.246 79.0986 114.502 78.925C114.527 78.9046 114.553 78.8842 114.578 78.8638C115.477 78.0979 115.666 77.2911 115.666 76.7499V71.6439C115.666 71.0108 115.4 69.8211 113.634 68.9225C112.546 68.3659 111.117 68.0596 109.615 68.0596V68.0698Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M81.2262 75.3972C78.8162 75.3972 76.687 75.0142 75.3799 74.3505L49.4672 61.1516C49.1864 61.0086 48.9311 60.8555 48.6809 60.6819C48.6656 60.6716 48.6503 60.6563 48.6349 60.6461C48.0631 60.1457 47.7618 59.5586 47.7618 58.9458V53.8399C47.7618 52.9515 48.3847 52.1498 49.5131 51.5729C50.5343 51.052 51.8823 50.7661 53.3069 50.7661C54.5323 50.7661 55.7322 50.9857 56.687 51.3839C56.8096 51.4401 57.0291 51.5524 57.4989 51.7924L76.7636 61.6111C78.0095 62.2443 79.6791 62.5915 81.4611 62.5915C83.243 62.5915 84.9178 62.2443 86.1637 61.6111L105.423 51.7975C105.903 51.5524 106.118 51.435 106.24 51.389C107.195 50.9857 108.395 50.7661 109.615 50.7661C111.04 50.7661 112.383 51.052 113.404 51.5729C114.532 52.1447 115.155 52.9515 115.155 53.8399V58.9458C115.155 59.5688 114.839 60.1662 114.246 60.6716C113.976 60.8657 113.731 61.0086 113.455 61.1516L87.864 74.1871C86.3781 74.9428 83.9017 75.3972 81.2313 75.3972H81.2262Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M109.615 51.277C110.902 51.277 112.189 51.5272 113.169 52.0276C114.155 52.528 114.645 53.1815 114.645 53.8402V58.9461C114.645 59.4057 114.4 59.8703 113.915 60.2839C113.695 60.4371 113.47 60.5698 113.22 60.6975L112.607 61.0089L87.6292 73.7329C86.1535 74.4835 83.6618 74.8869 81.2263 74.8869C79.0563 74.8869 76.9322 74.5703 75.6149 73.8963L50.3455 61.0243L49.7022 60.6975C49.4418 60.5647 49.2018 60.4218 48.972 60.2635C48.5074 59.855 48.2725 59.4006 48.2725 58.9461V53.8402C48.2725 53.1815 48.7627 52.528 49.743 52.0276C50.7284 51.5272 52.0152 51.277 53.3019 51.277C54.4303 51.277 55.5587 51.471 56.488 51.854C56.4931 51.854 57.2641 52.2471 57.2641 52.2471L76.5288 62.0659C77.8921 62.7552 79.6741 63.1024 81.4612 63.1024C83.2482 63.1024 85.0302 62.7552 86.3935 62.0659L105.653 52.2522C105.653 52.2522 106.424 51.854 106.434 51.854C107.359 51.4659 108.487 51.277 109.615 51.277ZM109.615 50.2558C108.308 50.2558 107.073 50.4856 106.041 50.9145C105.883 50.986 105.638 51.1136 105.183 51.3485L85.9289 61.157C84.7698 61.7442 83.141 62.0812 81.4561 62.0812C79.7711 62.0812 78.1474 61.7442 76.9884 61.1519L57.7236 51.3332C57.2743 51.1034 57.0343 50.9809 56.876 50.9094C55.8446 50.4754 54.609 50.2456 53.2968 50.2456C51.7956 50.2456 50.3659 50.552 49.2733 51.1085C47.5066 52.0072 47.2462 53.2019 47.2462 53.83V58.9359C47.2462 59.4669 47.43 60.2584 48.2929 61.0191C48.3236 61.0447 48.3542 61.0702 48.3899 61.0906C48.6606 61.2744 48.9363 61.4429 49.2375 61.5961L49.8809 61.9229L75.1502 74.795C77.0292 75.7549 79.7609 75.8979 81.2263 75.8979C83.9733 75.8979 86.5416 75.423 88.0938 74.6316L113.072 61.9076L113.685 61.5961C113.981 61.4429 114.252 61.2847 114.502 61.1111C114.527 61.0906 114.553 61.0702 114.578 61.0498C115.477 60.2839 115.666 59.4772 115.666 58.9359V53.83C115.666 53.1968 115.4 52.0072 113.634 51.1085C112.546 50.552 111.117 50.2456 109.615 50.2456V50.2558Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M100.986 35.1362C100.986 34.595 100.583 34.0589 99.7761 33.6453L84.3765 25.8026C82.7631 24.9805 80.1539 24.9805 78.5455 25.8026L63.146 33.6453C62.3393 34.0589 61.9359 34.595 61.9359 35.1311V40.2371C61.9359 39.701 62.3393 39.1648 63.146 38.7513L78.5455 30.9085C80.1539 30.0865 82.7631 30.0865 84.3765 30.9085L99.7761 38.7513C100.583 39.1648 100.986 39.701 100.986 40.2422V35.1362Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.4255 35.1316C48.4255 36.0404 49.1046 36.9544 50.4679 37.6488L76.5286 50.9243C79.2501 52.3131 83.6668 52.3131 86.3933 50.9243L112.449 37.6488C113.812 36.9544 114.491 36.0456 114.491 35.1367V40.2426C114.491 41.1515 113.812 42.0604 112.449 42.7548L86.3933 56.0302C83.6668 57.419 79.2501 57.419 76.5286 56.0302L50.4679 42.7548C49.1046 42.0604 48.4255 41.1464 48.4255 40.2375V35.1316Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M112.449 32.6198L86.3933 19.3443C83.6668 17.9555 79.2501 17.9555 76.5286 19.3443L50.4679 32.6198C49.1097 33.3142 48.4255 34.2231 48.4255 35.1319C48.4255 36.0408 49.1046 36.9547 50.4679 37.6492L76.5286 50.9246C79.2501 52.3134 83.6668 52.3134 86.3933 50.9246L112.449 37.6492C113.812 36.9547 114.491 36.0459 114.491 35.137C114.491 34.2282 113.812 33.3142 112.449 32.6198ZM99.776 36.6178L84.3765 44.4656C82.763 45.2877 80.1539 45.2877 78.5455 44.4656L63.1459 36.6178C62.3392 36.2093 61.9358 35.6732 61.9358 35.1319C61.9358 34.5907 62.3392 34.0597 63.1459 33.6461L78.5455 25.8034C80.1539 24.9813 82.763 24.9813 84.3765 25.8034L99.776 33.6461C100.583 34.0597 100.986 34.5958 100.986 35.137C100.986 35.6783 100.583 36.2093 99.776 36.6178Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M114.644 71.655V76.761C114.644 77.2205 114.399 77.6851 113.914 78.0987C113.695 78.2519 113.47 78.3847 113.22 78.5123L112.607 78.8238L87.6287 91.5478C84.8358 92.9723 78.4074 93.1357 75.6144 91.7112L50.3451 78.8391L49.7018 78.5123C49.4414 78.3796 49.2013 78.2366 48.9716 78.0783C48.5069 77.6698 48.2721 77.2154 48.2721 76.761V71.655C48.2721 72.1095 48.5069 72.5639 48.9716 72.9724C49.2013 73.1306 49.4414 73.2736 49.7018 73.4064L50.3451 73.7331L75.6144 86.6052C78.4074 88.0298 84.8358 87.8664 87.6287 86.4418L112.607 73.7178L113.22 73.4064C113.47 73.2787 113.695 73.146 113.914 72.9928C114.399 72.5792 114.644 72.1146 114.644 71.655Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M114.645 71.6544C114.645 72.114 114.399 72.5786 113.914 72.9922C113.695 73.1454 113.47 73.2781 113.22 73.4058L112.607 73.7172L87.629 86.4412C84.836 87.8658 78.4076 88.0292 75.6147 86.6046L50.3453 73.7325L49.702 73.4058C49.4416 73.273 49.2016 73.1301 48.9718 72.9718C48.5072 72.5633 48.2723 72.1089 48.2723 71.6544C48.2723 70.9958 48.7625 70.3422 49.7428 69.8418C51.5861 68.9023 54.5016 68.8411 56.4878 69.6682C56.4929 69.6682 57.2639 70.0614 57.2639 70.0614L76.5286 79.8801C79.2501 81.2638 83.6668 81.2638 86.3933 79.8801L105.653 70.0665C105.653 70.0665 106.424 69.6682 106.434 69.6682C108.415 68.8411 111.331 68.9023 113.169 69.8418C114.154 70.3422 114.645 70.9958 114.645 71.6544Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M114.644 53.8396V58.9455C114.644 59.4051 114.399 59.8697 113.914 60.2833C113.695 60.4365 113.47 60.5692 113.22 60.6969L112.607 61.0083L87.6288 73.7324C84.8359 75.1569 78.4075 75.3203 75.6146 73.8957L50.3452 61.0237L49.7019 60.6969C49.4415 60.5641 49.2015 60.4212 48.9717 60.2629C48.5071 59.8544 48.2722 59.4 48.2722 58.9455V53.8396C48.2722 54.294 48.5071 54.7485 48.9717 55.1569C49.2015 55.3152 49.4415 55.4582 49.7019 55.5909L50.3452 55.9177L75.6146 68.7898C78.4075 70.2144 84.8359 70.051 87.6288 68.6264L112.607 55.9024L113.22 55.5909C113.47 55.4633 113.695 55.3305 113.914 55.1774C114.399 54.7638 114.644 54.2991 114.644 53.8396Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M114.645 53.8397C114.645 54.2993 114.399 54.7639 113.914 55.1775C113.695 55.3307 113.47 55.4634 113.22 55.5911L112.607 55.9025L87.629 68.6265C84.836 70.0511 78.4076 70.2145 75.6147 68.7899L50.3453 55.9179L49.702 55.5911C49.4416 55.4583 49.2016 55.3154 48.9718 55.1571C48.5072 54.7486 48.2723 54.2942 48.2723 53.8397C48.2723 53.1811 48.7625 52.5275 49.7428 52.0271C51.5861 51.0876 54.5016 51.0264 56.4878 51.8535C56.4929 51.8535 57.2639 52.2467 57.2639 52.2467L76.5286 62.0654C79.2501 63.4491 83.6668 63.4491 86.3933 62.0654L105.653 52.2518C105.653 52.2518 106.424 51.8535 106.434 51.8535C108.415 51.0264 111.331 51.0876 113.169 52.0271C114.154 52.5275 114.645 53.1811 114.645 53.8397Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx b/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx
new file mode 100644
index 0000000..dcd6f30
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/work-item.tsx
@@ -0,0 +1,254 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function WorkItemVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="180"
+      viewBox="0 0 162 180"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M0.200012 143.469C0.200012 145.602 1.79701 147.729 4.98538 149.36L46.0392 170.279C52.4216 173.53 62.7655 173.53 69.1479 170.279L155.415 126.325C158.603 124.7 160.2 122.572 160.2 120.439V127.25C160.2 129.384 158.603 131.511 155.415 133.136L69.1479 177.091C62.7655 180.341 52.4216 180.341 46.0392 177.091L4.98538 156.172C1.79137 154.546 0.200012 152.413 0.200012 150.28V143.469Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.200012 143.469C0.200012 141.336 1.79701 139.208 4.98538 137.583L91.252 93.6286C97.6344 90.3781 107.978 90.3781 114.361 93.6286L155.415 114.548C158.609 116.173 160.2 118.306 160.2 120.439C160.2 122.572 158.603 124.7 155.415 126.325L69.1479 170.279C62.7655 173.53 52.4216 173.53 46.0392 170.279L4.98538 149.36C1.79137 147.735 0.200012 145.602 0.200012 143.469Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M0.200012 121.952C0.200012 124.085 1.79701 126.212 4.98538 127.843L46.0392 148.762C52.4216 152.013 62.7655 152.013 69.1479 148.762L155.415 104.808C158.603 103.182 160.2 101.055 160.2 98.9219V105.733C160.2 107.866 158.603 109.994 155.415 111.619L69.1479 155.573C62.7655 158.824 52.4216 158.824 46.0392 155.573L4.98538 134.654C1.79137 133.029 0.200012 130.896 0.200012 128.763V121.952Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M0.200012 121.952C0.200012 119.818 1.79701 117.691 4.98538 116.066L91.252 72.1113C97.6344 68.8608 107.978 68.8608 114.361 72.1113L155.415 93.0304C158.609 94.6556 160.2 96.7887 160.2 98.9218C160.2 101.055 158.603 103.182 155.415 104.808L69.1479 148.762C62.7655 152.013 52.4216 152.013 46.0392 148.762L4.98538 127.843C1.79137 126.218 0.200012 124.085 0.200012 121.952Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M0.200012 100.429C0.200012 102.562 1.79701 104.689 4.98538 106.32L46.0392 127.239C52.4216 130.49 62.7655 130.49 69.1479 127.239L155.415 83.2847C158.603 81.6595 160.2 79.532 160.2 77.3989V84.2102C160.2 86.3433 158.603 88.4707 155.415 90.096L69.1479 134.05C62.7655 137.301 52.4216 137.301 46.0392 134.05L4.98538 113.131C1.79137 111.506 0.200012 109.373 0.200012 107.24V100.429Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.200012 100.429C0.200012 98.2954 1.79701 96.168 4.98538 94.5428L91.252 50.5883C97.6344 47.3379 107.978 47.3379 114.361 50.5883L155.415 71.5075C158.609 73.1327 160.2 75.2658 160.2 77.3989C160.2 79.532 158.603 81.6595 155.415 83.2847L69.1479 127.239C62.7655 130.49 52.4216 130.49 46.0392 127.239L4.98538 106.32C1.79137 104.695 0.200012 102.562 0.200012 100.429Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.0899 23.6649C15.8597 23.0385 14.2796 23.0893 12.5471 23.9753C8.63644 25.9673 5.47075 31.4412 5.47075 36.1927C5.47075 38.845 6.4583 40.7185 8.01017 41.5085L5.49321 40.2275C3.94135 39.4375 2.9538 37.564 2.9538 34.9117C2.9538 30.1545 6.12526 24.6807 10.0303 22.6943C11.7571 21.814 13.3429 21.7575 14.5731 22.3839L17.0899 23.6649Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.0899 23.6649C18.6418 24.455 19.6293 26.3285 19.6293 28.9808C19.6293 33.7379 16.4579 39.2118 12.5528 41.1982C10.826 42.0785 9.24038 42.1349 8.01018 41.5085C6.45831 40.7185 5.47076 38.845 5.47076 36.1927C5.47076 31.4355 8.64209 25.9617 12.5471 23.9753C14.2739 23.095 15.8597 23.0385 17.0899 23.6649Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.9704 29.0485C11.1082 29.9965 9.60146 32.6037 9.60146 34.8666C9.60146 37.1295 11.1082 38.2017 12.9704 37.248C14.8326 36.2943 16.3393 33.6928 16.3393 31.4299C16.3393 29.167 14.8326 28.0948 12.9704 29.0485ZM8.85101 35.2503C8.85101 32.4795 10.6962 29.2968 12.9704 28.1399C15.2446 26.9831 17.0899 28.2867 17.0899 31.0518C17.0899 33.8169 15.2446 37.0053 12.9704 38.1622C10.6962 39.319 8.85101 38.0154 8.85101 35.2503Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.9704 30.8712C11.9377 31.396 11.097 32.8463 11.097 34.1047C11.097 35.3632 11.9377 35.9557 12.9704 35.4309C14.0031 34.9061 14.8439 33.4558 14.8439 32.1974C14.8439 30.9389 14.0031 30.3464 12.9704 30.8712ZM10.3464 34.4885C10.3464 32.7278 11.5201 30.7019 12.9704 29.9627C14.4207 29.2234 15.5945 30.053 15.5945 31.8193C15.5945 33.5856 14.4207 35.6058 12.9704 36.3451C11.5201 37.0843 10.3464 36.2548 10.3464 34.4885Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M146.352 33.0833C147.903 32.2932 148.891 30.4254 148.891 27.7674C148.891 23.0103 145.72 17.5364 141.814 15.55L115.63 2.20966C113.904 1.32933 112.323 1.2729 111.093 1.89929L113.61 0.618291C114.84 -0.00809748 116.42 0.0483357 118.147 0.928666L144.331 14.2691C148.242 16.2611 151.408 21.7349 151.408 26.4864C151.408 29.1444 150.42 31.0122 148.868 31.8023L146.352 33.0833Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M146.352 33.0833C145.121 33.7097 143.541 33.6532 141.814 32.7729L115.63 19.4325C111.72 17.4405 108.554 11.9667 108.554 7.21513C108.554 4.55721 109.541 2.68933 111.093 1.89929C112.323 1.2729 113.904 1.32933 115.63 2.20966L141.814 15.55C145.725 17.5421 148.891 23.0159 148.891 27.7674C148.891 30.4254 147.903 32.2932 146.352 33.0833Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M121.172 19.0036C120.952 18.8908 120.771 18.5804 120.771 18.3152V17.3446C120.771 16.5432 120.235 15.6121 119.575 15.2792L117.182 14.0603C116.522 13.7217 115.986 14.1054 115.986 14.9067V15.8773C115.986 16.1482 115.805 16.2724 115.585 16.1595C115.365 16.0466 115.185 15.7363 115.185 15.471V14.5004C115.185 13.163 116.082 12.531 117.182 13.0896L119.575 14.3086C120.675 14.8672 121.573 16.4134 121.573 17.7509V18.7215C121.573 18.9924 121.392 19.1165 121.172 19.0036Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M121.172 14.0885C120.997 13.9982 120.833 13.7725 120.788 13.5298C120.732 13.242 120.861 13.0445 121.076 13.084C121.499 13.163 121.826 12.9316 121.934 12.4745C122.097 11.7804 121.714 10.7872 121.076 10.2624C120.861 10.0875 120.737 9.75454 120.788 9.52317C120.845 9.2918 121.059 9.24665 121.273 9.42159C121.787 9.84483 122.221 10.4656 122.492 11.1597C122.763 11.8538 122.837 12.5479 122.707 13.1066C122.526 13.8684 121.979 14.2521 121.273 14.1167C121.24 14.111 121.206 14.0998 121.172 14.0828V14.0885Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M123.564 20.2226C123.344 20.1097 123.164 19.7993 123.164 19.5341V18.5635C123.164 17.8976 122.797 17.1301 122.267 16.6956C122.052 16.5207 121.922 16.1877 121.979 15.9563C122.035 15.725 122.25 15.6798 122.464 15.8548C123.344 16.5827 123.96 17.8581 123.96 18.9641V19.9348C123.96 20.2056 123.779 20.3298 123.559 20.2169L123.564 20.2226Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M118.378 12.7228C117.278 12.1642 116.381 10.6179 116.381 9.28051C116.381 7.94309 117.278 7.31106 118.378 7.86973C119.479 8.4284 120.376 9.97462 120.376 11.312C120.376 12.6495 119.479 13.2815 118.378 12.7228ZM118.378 8.84035C117.718 8.50176 117.182 8.8855 117.182 9.68682C117.182 10.4881 117.718 11.4193 118.378 11.7522C119.039 12.0852 119.575 11.7071 119.575 10.9057C119.575 10.1044 119.039 9.1733 118.378 8.84035Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M135.528 25.0531C135.308 24.9402 135.127 24.6299 135.127 24.3646V19.5115C135.127 19.2407 135.308 19.1165 135.528 19.2294C135.748 19.3422 135.929 19.6526 135.929 19.9178V24.7709C135.929 25.0418 135.748 25.166 135.528 25.0531Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M137.921 26.272C137.701 26.1592 137.52 25.8488 137.52 25.5836V17.8129C137.52 17.5421 137.701 17.4179 137.921 17.5308C138.141 17.6437 138.321 17.954 138.321 18.2193V25.9899C138.321 26.2607 138.141 26.3849 137.921 26.272Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        d="M133.13 23.8342C132.91 23.7213 132.729 23.4109 132.729 23.1457V21.2045C132.729 20.9336 132.91 20.8095 133.13 20.9223C133.35 21.0352 133.53 21.3456 133.53 21.6108V23.552C133.53 23.8229 133.35 23.947 133.13 23.8342Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.quaternary}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M47.4836 89.8025C46.8403 89.8025 46.2364 89.6614 45.6947 89.3849L40.6667 86.8229C39.1092 86.0272 38.2119 84.2101 38.2119 81.8287V50.2666C38.2119 46.0569 41.0335 41.1981 44.504 39.4318L70.4455 26.2156C71.3259 25.7698 72.1893 25.5384 73.0132 25.5384C73.6565 25.5384 74.2603 25.6795 74.802 25.956L79.83 28.518C81.3875 29.3137 82.2848 31.1308 82.2848 33.5122V65.0742C82.2848 69.2784 79.4633 74.1428 75.9928 75.9091L50.0513 89.1253C49.171 89.5768 48.3075 89.8025 47.4836 89.8025Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M73.0132 26.0971C73.5718 26.0971 74.0854 26.2212 74.5424 26.4526L79.5704 29.0146C80.8796 29.6805 81.7149 31.2662 81.7149 33.5065V65.0686C81.7149 69.0922 79.0344 73.7195 75.7276 75.4012L49.7859 88.6174C48.9677 89.035 48.189 89.2325 47.478 89.2325C46.9193 89.2325 46.4058 89.1084 45.9487 88.877L40.9206 86.315C39.6114 85.6491 38.7762 84.0634 38.7762 81.8231V50.261C38.7762 46.2374 41.4567 41.6101 44.7636 39.9284L70.7051 26.7122C71.5233 26.2946 72.3021 26.0971 73.0132 26.0971ZM73.0132 24.9684C72.099 24.9684 71.1509 25.2167 70.1916 25.7077L44.2501 38.9239C40.5482 40.8087 37.6475 45.7916 37.6475 50.261V81.8231C37.6475 84.4246 38.6521 86.4279 40.4071 87.3251L45.4351 89.8871C46.0558 90.2032 46.7444 90.3668 47.478 90.3668C48.3922 90.3668 49.3402 90.1185 50.2995 89.6275L76.241 76.4113C79.9429 74.5265 82.8435 69.5436 82.8435 65.0742V33.5122C82.8435 30.9107 81.8391 28.9073 80.084 28.0157L75.0559 25.4537C74.4352 25.1377 73.7468 24.9741 73.0132 24.9741V24.9684Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M79.5706 29.0146C78.5323 28.4842 77.1893 28.5293 75.7278 29.2742L49.7861 42.4905C46.4792 44.1721 43.7988 48.7995 43.7988 52.8231V84.3851C43.7988 86.6311 44.634 88.2112 45.9432 88.8771L40.9151 86.3151C39.6059 85.6492 38.7707 84.0635 38.7707 81.8232V50.2611C38.7707 46.2375 41.4512 41.6101 44.7581 39.9285L70.6996 26.7122C72.1612 25.9673 73.4987 25.9222 74.5426 26.4527L79.5706 29.0146Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M79.5706 29.0146C80.8798 29.6805 81.7151 31.2663 81.7151 33.5066V65.0687C81.7151 69.0922 79.0346 73.7196 75.7278 75.4013L49.7861 88.6175C48.3246 89.3624 46.9872 89.4075 45.9432 88.8771C44.634 88.2112 43.7988 86.6255 43.7988 84.3851V52.8231C43.7988 48.7995 46.4792 44.1721 49.7861 42.4905L75.7278 29.2742C77.1893 28.5293 78.5267 28.4842 79.5706 29.0146Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M65.6997 99.1363C65.0564 99.1363 64.4525 98.9952 63.9107 98.7187L58.8827 96.1567C57.3252 95.361 56.4279 93.5439 56.4279 91.1625V59.6004C56.4279 55.3963 59.2496 50.5319 62.7201 48.7656L88.656 35.5493C89.5363 35.1035 90.3997 34.8722 91.2236 34.8722C91.8669 34.8722 92.4707 35.0132 93.0124 35.2898L98.0404 37.8517C99.5979 38.6474 100.495 40.4645 100.495 42.8459V74.408C100.495 78.6178 97.6737 83.4765 94.2032 85.2429L68.2616 98.4591C67.3812 98.9049 66.5179 99.1363 65.694 99.1363H65.6997Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M91.2293 35.4308C91.7879 35.4308 92.3014 35.555 92.7585 35.7864L97.7865 38.3483C99.0957 39.0142 99.931 40.6 99.931 42.8403V74.4024C99.931 78.4259 97.2504 83.0533 93.9435 84.735L68.002 97.9512C67.1838 98.3688 66.4051 98.5663 65.6941 98.5663C65.1354 98.5663 64.6217 98.4422 64.1647 98.2108L59.1367 95.6488C57.8275 94.9829 56.9922 93.3972 56.9922 91.1569V59.5948C56.9922 55.5712 59.6728 50.9438 62.9797 49.2622L88.9155 36.0459C89.7338 35.6284 90.5126 35.4308 91.2236 35.4308M91.2293 34.3022C90.3151 34.3022 89.367 34.5505 88.4077 35.0415L62.4717 48.2577C58.7698 50.1425 55.8693 55.1254 55.8693 59.5948V91.1569C55.8693 93.7584 56.8738 95.7617 58.6288 96.6533L63.6568 99.2153C64.2776 99.5313 64.9661 99.6949 65.6997 99.6949C66.6139 99.6949 67.5619 99.4466 68.5213 98.9557L94.4628 85.7394C98.1647 83.8546 101.065 78.8717 101.065 74.4024V42.8403C101.065 40.2388 100.061 38.2355 98.3057 37.3439L93.2777 34.7819C92.6569 34.4659 91.9685 34.3022 91.2349 34.3022H91.2293Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M97.7923 38.3484C96.754 37.818 95.4109 37.8631 93.9493 38.608L68.0078 51.8242C64.7009 53.5059 62.0205 58.1333 62.0205 62.1568V93.7189C62.0205 95.9649 62.8556 97.545 64.1648 98.2109L59.1368 95.6489C57.8276 94.983 56.9924 93.3973 56.9924 91.1569V59.5948C56.9924 55.5713 59.6729 50.9439 62.9798 49.2622L88.9213 36.046C90.3829 35.3011 91.7203 35.256 92.7643 35.7864L97.7923 38.3484Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M97.7923 38.3484C99.1015 39.0143 99.9367 40.6 99.9367 42.8404V74.4024C99.9367 78.426 97.2562 83.0534 93.9493 84.735L68.0078 97.9513C66.5462 98.6962 65.2088 98.7413 64.1648 98.2109C62.8556 97.545 62.0205 95.9592 62.0205 93.7189V62.1568C62.0205 58.1333 64.7009 53.5059 68.0078 51.8242L93.9493 38.608C95.4109 37.8631 96.7483 37.818 97.7923 38.3484Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M83.8766 108.464C83.2671 108.464 82.6915 108.34 82.1723 108.092C82.1385 108.081 82.1103 108.069 82.0764 108.052L77.0483 105.49C75.4908 104.695 74.5936 102.878 74.5936 100.496V68.9286C74.5936 64.7244 77.4151 59.86 80.8857 58.0937L106.822 44.8775C107.702 44.4317 108.565 44.2003 109.389 44.2003C110.033 44.2003 110.636 44.3414 111.178 44.6179C111.178 44.6179 116.229 47.1912 116.24 47.2025C117.775 48.0038 118.655 49.8152 118.655 52.1797V83.7474C118.655 87.9572 115.834 92.816 112.363 94.5823L86.4273 107.799C85.5526 108.244 84.6948 108.47 83.8766 108.47V108.464ZM89.5423 68.0877C88.346 68.6972 87.3357 70.4522 87.3357 71.9251V92.9232L103.707 84.5826C104.903 83.9732 105.913 82.2182 105.913 80.7453V59.7472L89.5423 68.0877Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M109.389 44.7646C109.948 44.7646 110.461 44.8888 110.918 45.1201L115.946 47.6821C115.946 47.6821 115.935 47.6821 115.93 47.6765C117.25 48.3424 118.091 49.9281 118.091 52.1741V83.7418C118.091 87.7597 115.416 92.3871 112.104 94.0744L86.1677 107.291C85.3551 107.703 84.5763 107.9 83.8709 107.9C83.2614 107.9 82.7028 107.753 82.2175 107.482C82.257 107.505 82.2908 107.533 82.3247 107.55L77.2966 104.988C75.9874 104.322 75.1523 102.737 75.1523 100.496V68.9286C75.1523 64.9106 77.8327 60.2776 81.1396 58.596L107.075 45.3797C107.894 44.9621 108.672 44.7646 109.384 44.7646M114.022 47.3548C114.124 47.3435 114.231 47.3379 114.327 47.3379C114.225 47.3379 114.124 47.3492 114.022 47.3548ZM114.835 47.3548C114.739 47.3435 114.643 47.3379 114.541 47.3323C114.643 47.3323 114.739 47.3435 114.835 47.3548ZM113.802 47.3774C113.695 47.3943 113.582 47.4169 113.469 47.4395C113.582 47.4169 113.689 47.3887 113.802 47.3774ZM115.32 47.4508C115.224 47.4282 115.128 47.4 115.032 47.383C115.128 47.4 115.224 47.4225 115.32 47.4508ZM112.877 47.6144C113.001 47.5693 113.131 47.5241 113.255 47.4903C113.131 47.5241 113.006 47.5693 112.877 47.6144ZM110.789 57.5463C110.749 57.5181 110.704 57.4899 110.665 57.4673C110.71 57.4899 110.749 57.5181 110.789 57.5463ZM110.958 57.6931C110.958 57.6931 110.901 57.6423 110.873 57.6141C110.901 57.6366 110.93 57.6648 110.958 57.6931ZM111.105 57.868C111.082 57.8341 111.059 57.8059 111.031 57.7777C111.054 57.8059 111.082 57.8341 111.105 57.868ZM111.234 58.0711C111.218 58.0373 111.195 57.9978 111.172 57.9639C111.195 57.9978 111.212 58.0316 111.234 58.0711ZM111.342 58.3082C111.325 58.263 111.308 58.2235 111.291 58.184C111.308 58.2235 111.325 58.2687 111.342 58.3082ZM86.7771 93.843L103.972 85.0849C105.36 84.3795 106.483 82.4326 106.483 80.7453V58.8273L89.2882 67.5855C87.9 68.2909 86.7771 70.2378 86.7771 71.9251V93.843ZM111.511 59.3239C111.511 59.2111 111.511 59.1038 111.494 59.0023C111.505 59.1038 111.511 59.2111 111.511 59.3239ZM88.8706 97.8553C89.0061 97.8158 89.1472 97.7594 89.2882 97.686C89.1472 97.7594 89.0061 97.8102 88.8706 97.8553ZM87.9961 97.9061C87.8832 97.8835 87.776 97.844 87.6744 97.7932C87.776 97.844 87.8832 97.8779 87.9961 97.9061ZM88.8199 97.8666C88.6902 97.9004 88.5659 97.923 88.4418 97.9343C88.5659 97.923 88.6902 97.9061 88.8199 97.8666ZM88.3176 97.9399C88.3176 97.9399 88.3685 97.9399 88.3911 97.9399C88.3685 97.9399 88.3458 97.9399 88.3176 97.9399ZM80.2536 104.068C80.2423 103.989 80.2311 103.91 80.2198 103.826C80.2254 103.91 80.2423 103.984 80.2536 104.068ZM80.389 104.802C80.3664 104.717 80.3439 104.627 80.327 104.537C80.3439 104.627 80.3664 104.712 80.389 104.802ZM80.5357 105.321C80.5526 105.361 80.564 105.406 80.5809 105.445C80.564 105.406 80.5526 105.366 80.5357 105.321C80.5188 105.276 80.5076 105.237 80.4907 105.191C80.502 105.237 80.5188 105.282 80.5357 105.321ZM81.1396 106.506C81.0944 106.439 81.0493 106.371 81.0041 106.303C81.0493 106.371 81.0944 106.444 81.1396 106.506ZM81.5008 106.929C81.45 106.873 81.3992 106.817 81.3484 106.76C81.3992 106.817 81.45 106.879 81.5008 106.929ZM81.9015 107.279C81.845 107.24 81.7942 107.189 81.7434 107.15C81.7942 107.195 81.845 107.24 81.9015 107.279ZM109.389 43.636C108.475 43.636 107.527 43.8843 106.568 44.3752L80.6317 57.5915C76.9298 59.4763 74.0293 64.4592 74.0293 68.9286V100.496C74.0293 103.098 75.0337 105.101 76.7887 105.993L81.8167 108.555C81.8675 108.577 81.9127 108.6 81.9634 108.617C82.5503 108.888 83.1937 109.029 83.8766 109.029C84.7851 109.029 85.7275 108.78 86.6812 108.295L112.617 95.0789C116.319 93.1941 119.219 88.2112 119.219 83.7418V52.1741C119.219 49.6008 118.232 47.6144 116.511 46.7059C116.494 46.6946 116.477 46.6833 116.454 46.6776L111.426 44.1157C110.806 43.7996 110.117 43.636 109.384 43.636H109.389ZM87.9057 91.9977V71.9251C87.9057 70.6666 88.7917 69.1035 89.8018 68.59L105.354 60.667V80.7453C105.354 82.0037 104.468 83.5669 103.458 84.0804L87.9057 92.0034V91.9977Z"
+        fill="var(--illustration-stroke-tertiary)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M87.7306 97.7932C88.1707 98.0189 88.7295 98.0019 89.3502 97.6859L109.056 87.6468C110.444 86.9414 111.567 84.9945 111.567 83.3072V59.3239C111.567 58.3814 111.217 57.7156 110.67 57.439L105.642 54.8771C106.189 55.1592 106.539 55.8195 106.539 56.7619V80.7452C106.539 82.4325 105.416 84.3794 104.028 85.0848L84.3222 95.1239C83.7071 95.44 83.1427 95.4569 82.7026 95.2312L87.7306 97.7932Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M116.008 47.6821C114.97 47.1516 113.627 47.1967 112.165 47.9416L86.2295 61.1579C82.9283 62.8395 80.2422 67.4726 80.2422 71.4905V103.058C80.2422 105.299 81.0773 106.884 82.3865 107.55L77.3585 104.988C76.0493 104.322 75.2141 102.737 75.2141 100.496V68.9285C75.2141 64.9106 77.8947 60.2776 81.2015 58.5959L107.137 45.3797C108.599 44.6348 109.942 44.5896 110.98 45.1201L116.008 47.6821Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M112.171 47.9416L86.2352 61.1579C82.9339 62.8395 80.2477 67.4725 80.2477 71.4905V103.058C80.2477 107.076 82.9283 108.978 86.2352 107.291L112.171 94.0743C115.478 92.387 118.158 87.7596 118.158 83.7417V52.174C118.158 48.1561 115.484 46.2543 112.171 47.9416ZM111.573 83.3016C111.573 84.9889 110.45 86.9357 109.062 87.6411L89.3558 97.6803C87.9676 98.3857 86.8447 97.59 86.8447 95.9027V71.9193C86.8447 70.232 87.9676 68.2852 89.3558 67.5798L109.062 57.5406C110.45 56.8352 111.573 57.6309 111.573 59.3182V83.3016Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/compact-empty-state.stories.tsx b/packages/propel/src/empty-state/compact-empty-state.stories.tsx
new file mode 100644
index 0000000..4020b42
--- /dev/null
+++ b/packages/propel/src/empty-state/compact-empty-state.stories.tsx
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EmptyStateCompact } from "./compact-empty-state";
+import type { BaseEmptyStateCommonProps } from "./types";
+
+const meta: Meta<BaseEmptyStateCommonProps> = {
+  title: "Components/EmptyState/Compact",
+  component: EmptyStateCompact,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A compact empty state component with centered title, asset, and action buttons. Best used for simple, space-constrained empty states. Supports horizontal stack and illustration assets via `assetKey`.",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: "text",
+      description: "The main title text for the empty state",
+    },
+    assetKey: {
+      control: "select",
+      options: [
+        "customer",
+        "epic",
+        "estimate",
+        "export",
+        "intake",
+        "label",
+        "link",
+        "members",
+        "note",
+        "priority",
+        "project",
+        "settings",
+        "state",
+        "template",
+        "token",
+        "unknown",
+        "update",
+        "webhook",
+        "work-item",
+        "worklog",
+        "inbox",
+      ],
+      description: "Predefined asset key (horizontal-stack or illustration)",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply to the content wrapper",
+    },
+    rootClassName: {
+      control: "text",
+      description: "Additional CSS classes to apply to the root container",
+    },
+    assetClassName: {
+      control: "text",
+      description: "Additional CSS classes to apply to the asset",
+    },
+    asset: {
+      control: false,
+      description: "Custom React node to display as the visual asset (use this for full control instead of assetKey)",
+    },
+    actions: {
+      control: false,
+      description: "Array of action buttons to display",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<BaseEmptyStateCommonProps>;
+
+// Using assetKey (recommended approach)
+export const WithAssetKey: Story = {
+  args: {
+    assetKey: "work-item",
+    assetClassName: "size-20",
+    title: "There're no progress metrics to show yet.",
+  },
+};
+
+export const WithAssetKeyAndAction: Story = {
+  args: {
+    assetKey: "project",
+    assetClassName: "size-20",
+    title: "No projects found",
+    actions: [
+      {
+        label: "Create Project",
+        onClick: () => console.log("create-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+export const WithAssetKeyAndMultipleActions: Story = {
+  args: {
+    assetKey: "members",
+    assetClassName: "size-20",
+    title: "Get started with your workspace",
+    actions: [
+      {
+        label: "Create Project",
+        onClick: () => console.log("create-clicked"),
+        variant: "primary",
+      },
+      {
+        label: "Import",
+        onClick: () => console.log("import-clicked"),
+        variant: "secondary",
+      },
+    ],
+  },
+};
+
+// Using custom asset (legacy approach)
+export const WithCustomAsset: Story = {
+  args: {
+    asset: (
+      <svg className="h-40 w-40" viewBox="0 0 160 180" fill="none">
+        <rect width="160" height="180" fill="#F3F4F6" rx="8" />
+      </svg>
+    ),
+    title: "No items found",
+    actions: [
+      {
+        label: "Create Item",
+        onClick: () => console.log("create-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    title: "No results found",
+  },
+};
diff --git a/packages/propel/src/empty-state/compact-empty-state.tsx b/packages/propel/src/empty-state/compact-empty-state.tsx
new file mode 100644
index 0000000..7f13486
--- /dev/null
+++ b/packages/propel/src/empty-state/compact-empty-state.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { Button } from "../button/button";
+import { cn } from "../utils/classname";
+import { getCompactAsset } from "./assets/asset-registry";
+import type { CompactAssetType } from "./assets/asset-types";
+import type { BaseEmptyStateCommonProps } from "./types";
+
+export function EmptyStateCompact({
+  asset,
+  assetKey,
+  title,
+  description,
+  actions,
+  className,
+  rootClassName,
+  assetClassName,
+  align = "center",
+  customButton,
+}: BaseEmptyStateCommonProps) {
+  // Determine which asset to use: assetKey takes precedence, fallback to custom asset
+  const resolvedAsset = assetKey ? getCompactAsset(assetKey as CompactAssetType, assetClassName) : asset;
+
+  const rootAlignClasses = align === "center" ? "items-center" : "items-start";
+  const containerAlignClasses = align === "center" ? "items-center text-center" : "items-start text-left";
+
+  return (
+    <div className={cn("flex size-full items-center justify-center", rootAlignClasses, rootClassName)}>
+      <div
+        className={cn("flex size-full max-w-[25rem] flex-col justify-center gap-3", containerAlignClasses, className)}
+      >
+        {resolvedAsset && <div className="flex max-w-40 items-center">{resolvedAsset}</div>}
+
+        <div className="flex flex-col gap-4">
+          {title && description ? (
+            <div className="flex flex-col gap-2">
+              {title && <h3 className="text-16 leading-7 font-semibold text-primary">{title}</h3>}
+              {description && <p className="text-13 leading-5 text-tertiary">{description}</p>}
+            </div>
+          ) : (
+            title && <p className="text-13 leading-5 text-tertiary">{title}</p>
+          )}
+
+          {customButton
+            ? customButton
+            : actions &&
+              actions.length > 0 && (
+                <div className="flex flex-col gap-4 sm:flex-row">
+                  {actions.map((action, index) => {
+                    const { label, variant, ...rest } = action;
+                    return (
+                      <Button key={index} variant={variant} size="base" {...rest}>
+                        {label}
+                      </Button>
+                    );
+                  })}
+                </div>
+              )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+EmptyStateCompact.displayName = "EmptyStateCompact";
diff --git a/packages/propel/src/empty-state/detailed-empty-state.stories.tsx b/packages/propel/src/empty-state/detailed-empty-state.stories.tsx
new file mode 100644
index 0000000..1e3e923
--- /dev/null
+++ b/packages/propel/src/empty-state/detailed-empty-state.stories.tsx
@@ -0,0 +1,301 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EmptyStateDetailed } from "./detailed-empty-state";
+import type { BaseEmptyStateCommonProps } from "./types";
+
+const meta: Meta<BaseEmptyStateCommonProps> = {
+  title: "Components/EmptyState/Detailed",
+  component: EmptyStateDetailed,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A detailed empty state component with title, description, asset, and action buttons. Best used for feature-specific empty states that need more context. Supports vertical stack and illustration assets via `assetKey`.",
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: "text",
+      description: "The main title text for the empty state",
+    },
+    description: {
+      control: "text",
+      description: "Optional description text that appears below the title",
+    },
+    assetKey: {
+      control: "select",
+      options: [
+        "archived-cycle",
+        "archived-module",
+        "archived-work-item",
+        "customer",
+        "cycle",
+        "dashboard",
+        "draft",
+        "epic",
+        "error-404",
+        "invalid-link",
+        "module",
+        "no-access",
+        "page",
+        "project",
+        "server-error",
+        "teamspace",
+        "view",
+        "work-item",
+        "inbox",
+      ],
+      description: "Predefined asset key (vertical-stack or illustration)",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply to the content wrapper",
+    },
+    rootClassName: {
+      control: "text",
+      description: "Additional CSS classes to apply to the root container",
+    },
+    assetClassName: {
+      control: "text",
+      description: "Additional CSS classes to apply to the asset",
+    },
+    asset: {
+      control: false,
+      description: "Custom React node to display as the visual asset (use this for full control instead of assetKey)",
+    },
+    actions: {
+      control: false,
+      description: "Array of action buttons to display",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<BaseEmptyStateCommonProps>;
+
+// Primary story - showcases the most common usage
+export const Default: Story = {
+  args: {
+    assetKey: "epic",
+    assetClassName: "w-40 h-45",
+    title: "Create an epic and split work into smaller goals",
+    description: "For larger bodies of work that span several cycles and can live across modules, create an epic.",
+    actions: [
+      {
+        label: "Create an Epic",
+        onClick: () => console.log("primary-action-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+export const WithSingleAction: Story = {
+  args: {
+    assetKey: "project",
+    assetClassName: "w-40 h-45",
+    title: "No projects found",
+    description: "Get started by creating your first project to organize your work.",
+    actions: [
+      {
+        label: "Create Project",
+        onClick: () => console.log("create-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+export const WithMultipleActions: Story = {
+  args: {
+    assetKey: "module",
+    assetClassName: "w-40 h-45",
+    title: "No modules found",
+    description: "Get started by creating your first module or import existing ones.",
+    actions: [
+      {
+        label: "Create Module",
+        onClick: () => console.log("create-clicked"),
+        variant: "primary",
+      },
+      {
+        label: "Import Modules",
+        onClick: () => console.log("import-clicked"),
+        variant: "secondary",
+      },
+    ],
+  },
+};
+
+export const WithoutActions: Story = {
+  args: {
+    assetKey: "dashboard",
+    assetClassName: "w-40 h-45",
+    title: "No activity yet",
+    description: "Your activity feed will show up here once you start using the platform.",
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    assetKey: "error-404",
+    assetClassName: "w-40 h-45",
+    title: "Page not found",
+    description: "The page you're looking for doesn't exist or has been moved.",
+    actions: [
+      {
+        label: "Go to Home",
+        onClick: () => console.log("home-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+export const ServerErrorState: Story = {
+  name: "Error - Server",
+  args: {
+    assetKey: "server-error",
+    assetClassName: "w-40 h-45",
+    title: "Something went wrong",
+    description: "We're experiencing technical difficulties. Please try again later.",
+    actions: [
+      {
+        label: "Retry",
+        onClick: () => console.log("retry-clicked"),
+        variant: "primary",
+      },
+      {
+        label: "Contact Support",
+        onClick: () => console.log("support-clicked"),
+        variant: "secondary",
+      },
+    ],
+  },
+};
+
+export const NoAccessState: Story = {
+  name: "Access Denied",
+  args: {
+    assetKey: "no-access",
+    assetClassName: "w-40 h-45",
+    title: "You don't have access",
+    description: "Contact your workspace admin to request access to this resource.",
+  },
+};
+
+export const ArchivedState: Story = {
+  name: "Archived Content",
+  args: {
+    assetKey: "archived-work-item",
+    assetClassName: "w-40 h-45",
+    title: "No archived items",
+    description: "Archived items will appear here when you archive them.",
+  },
+};
+
+export const CycleState: Story = {
+  name: "Cycles",
+  args: {
+    assetKey: "cycle",
+    assetClassName: "w-40 h-45",
+    title: "No cycles found",
+    description: "Create cycles to organize your work into time-boxed iterations.",
+    actions: [
+      {
+        label: "Create Cycle",
+        onClick: () => console.log("create-cycle-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+export const ModuleState: Story = {
+  name: "Modules",
+  args: {
+    assetKey: "module",
+    assetClassName: "w-40 h-45",
+    title: "No modules found",
+    description: "Modules help you organize related work items into logical groups.",
+    actions: [
+      {
+        label: "Create Module",
+        onClick: () => console.log("create-module-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+export const ViewState: Story = {
+  name: "Views",
+  args: {
+    assetKey: "view",
+    assetClassName: "w-40 h-45",
+    title: "No saved views",
+    description: "Create custom views to filter and organize your work items.",
+    actions: [
+      {
+        label: "Create View",
+        onClick: () => console.log("create-view-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+export const PageState: Story = {
+  name: "Pages",
+  args: {
+    assetKey: "page",
+    assetClassName: "w-40 h-45",
+    title: "No pages found",
+    description: "Create pages to document your project, share knowledge, and collaborate.",
+    actions: [
+      {
+        label: "Create Page",
+        onClick: () => console.log("create-page-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+// Using custom asset (for special cases)
+export const WithCustomAsset: Story = {
+  name: "Custom Asset",
+  args: {
+    asset: (
+      <svg className="h-45 w-40" viewBox="0 0 160 180" fill="none">
+        <rect width="160" height="180" fill="#F3F4F6" rx="8" />
+        <circle cx="80" cy="90" r="30" fill="#E5E7EB" />
+      </svg>
+    ),
+    title: "Custom asset example",
+    description: "This example uses a custom SVG asset instead of predefined assetKey.",
+    actions: [
+      {
+        label: "Get Started",
+        onClick: () => console.log("action-clicked"),
+        variant: "primary",
+      },
+    ],
+  },
+};
+
+// Minimal example
+export const Minimal: Story = {
+  name: "Minimal - Text Only",
+  args: {
+    title: "No data available",
+    description: "Data will appear here once available.",
+  },
+};
diff --git a/packages/propel/src/empty-state/detailed-empty-state.tsx b/packages/propel/src/empty-state/detailed-empty-state.tsx
new file mode 100644
index 0000000..be6d225
--- /dev/null
+++ b/packages/propel/src/empty-state/detailed-empty-state.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import { Button } from "../button/button";
+import { cn } from "../utils/classname";
+import { getDetailedAsset } from "./assets/asset-registry";
+import type { DetailedAssetType } from "./assets/asset-types";
+import type { BaseEmptyStateCommonProps } from "./types";
+
+export function EmptyStateDetailed({
+  asset,
+  assetKey,
+  title,
+  description,
+  actions,
+  className,
+  rootClassName,
+  assetClassName,
+  customButton,
+  align = "start",
+}: BaseEmptyStateCommonProps) {
+  // Determine which asset to use: assetKey takes precedence, fallback to custom asset
+  const resolvedAsset = assetKey ? getDetailedAsset(assetKey as DetailedAssetType, assetClassName) : asset;
+
+  return (
+    <div className={cn("flex size-full items-center justify-center", rootClassName)}>
+      <div
+        className={cn(
+          "flex size-full max-w-[25rem] flex-col justify-center gap-6 text-left",
+          {
+            "items-center text-center": align === "center",
+          },
+          className
+        )}
+      >
+        {resolvedAsset && <div className="flex max-w-40 items-center">{resolvedAsset}</div>}
+
+        <div
+          className={cn("flex flex-col gap-4", {
+            "items-center": align === "center",
+          })}
+        >
+          {(title || description) && (
+            <div className="flex flex-col gap-2">
+              {title && <h3 className="text-16 leading-7 font-semibold text-primary">{title}</h3>}
+              {description && <p className="text-13 leading-5 text-tertiary">{description}</p>}
+            </div>
+          )}
+
+          {customButton
+            ? customButton
+            : actions &&
+              actions.length > 0 && (
+                <div className="flex flex-col gap-4 sm:flex-row">
+                  {actions.map((action, index) => {
+                    const { label, variant, ...rest } = action;
+                    return (
+                      <Button key={index} variant={variant} size="xl" {...rest}>
+                        {label}
+                      </Button>
+                    );
+                  })}
+                </div>
+              )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+EmptyStateDetailed.displayName = "EmptyStateDetailed";
diff --git a/packages/propel/src/empty-state/empty-state.tsx b/packages/propel/src/empty-state/empty-state.tsx
new file mode 100644
index 0000000..982fff0
--- /dev/null
+++ b/packages/propel/src/empty-state/empty-state.tsx
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type { CompactAssetType, DetailedAssetType } from "./assets/asset-types";
+import { EmptyStateCompact } from "./compact-empty-state";
+import { EmptyStateDetailed } from "./detailed-empty-state";
+import type { BaseEmptyStateCommonProps } from "./types";
+
+/**
+ * @deprecated Use EmptyStateCompact or EmptyStateDetailed directly with assetKey for better type safety
+ *
+ * This wrapper component maintains backward compatibility for existing code.
+ * For new code, prefer:
+ * - EmptyStateCompact with assetKey for simple states
+ * - EmptyStateDetailed with assetKey for detailed states
+ */
+
+type EmptyStateType = "detailed" | "simple";
+
+export interface EmptyStateProps {
+  /** @deprecated Use assetKey instead */
+  asset?: React.ReactNode;
+  title?: string;
+  description?: string;
+  actions?: BaseEmptyStateCommonProps["actions"];
+  className?: string;
+  rootClassName?: string;
+  assetClassName?: string;
+  type?: EmptyStateType;
+  /** Type-safe asset key (use instead of asset) */
+  assetKey?: CompactAssetType | DetailedAssetType;
+}
+
+export function EmptyState({
+  type = "detailed",
+  asset,
+  assetKey,
+  title,
+  description,
+  actions,
+  className,
+  rootClassName,
+  assetClassName,
+}: EmptyStateProps) {
+  if (type === "simple") {
+    return (
+      <EmptyStateCompact
+        asset={asset}
+        assetKey={assetKey}
+        title={title || description} // For simple type, use description as title if no title
+        actions={actions}
+        className={className}
+        rootClassName={rootClassName}
+        assetClassName={assetClassName}
+      />
+    );
+  }
+
+  return (
+    <EmptyStateDetailed
+      asset={asset}
+      assetKey={assetKey}
+      title={title}
+      description={description}
+      actions={actions}
+      className={className}
+      rootClassName={rootClassName}
+      assetClassName={assetClassName}
+    />
+  );
+}
+
+EmptyState.displayName = "EmptyState";
diff --git a/packages/propel/src/empty-state/index.ts b/packages/propel/src/empty-state/index.ts
new file mode 100644
index 0000000..f69424c
--- /dev/null
+++ b/packages/propel/src/empty-state/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./assets";
+export * from "./compact-empty-state";
+export * from "./detailed-empty-state";
+export * from "./empty-state";
+export * from "./types";
diff --git a/packages/propel/src/empty-state/types.ts b/packages/propel/src/empty-state/types.ts
new file mode 100644
index 0000000..c1cd894
--- /dev/null
+++ b/packages/propel/src/empty-state/types.ts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TButtonVariant } from "../button/helper";
+import type { TAlign } from "../utils/placement";
+import type { CompactAssetType, DetailedAssetType } from "./assets/asset-types";
+
+export interface ActionButton extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  label: string;
+  variant?: TButtonVariant;
+  [key: `data-${string}`]: string | undefined;
+}
+
+export interface BaseEmptyStateCommonProps {
+  title?: string;
+  actions?: ActionButton[];
+  /** CSS classes for the content wrapper */
+  className?: string;
+  /** CSS classes for the root container */
+  rootClassName?: string;
+  /** CSS classes for the asset wrapper */
+  assetClassName?: string;
+  description?: string;
+  assetKey?: CompactAssetType | DetailedAssetType;
+  asset?: React.ReactNode;
+  align?: TAlign;
+  customButton?: React.ReactNode;
+}
diff --git a/packages/propel/src/icon-button/helper.tsx b/packages/propel/src/icon-button/helper.tsx
new file mode 100644
index 0000000..a4e421c
--- /dev/null
+++ b/packages/propel/src/icon-button/helper.tsx
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import type React from "react";
+
+export const iconButtonVariants = cva(
+  "inline-flex aspect-square items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-accent-primary text-on-color hover:bg-accent-primary-hover focus:bg-accent-primary-active active:bg-accent-primary-active disabled:bg-layer-disabled disabled:text-on-color-disabled",
+        "error-fill":
+          "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-active active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
+        "error-outline":
+          "border border-danger-strong bg-layer-2 text-danger-primary hover:bg-danger-subtle focus:bg-danger-subtle-hover active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
+        secondary:
+          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover focus:bg-layer-2-active active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
+        tertiary:
+          "bg-layer-3 text-secondary hover:bg-layer-3-hover focus:bg-layer-3-active active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
+        ghost:
+          "bg-layer-transparent text-secondary hover:bg-layer-transparent-hover focus:bg-layer-transparent-active active:bg-layer-transparent-active disabled:bg-layer-transparent disabled:text-disabled",
+      },
+      size: {
+        sm: "size-5 rounded-sm",
+        base: "size-6 rounded-md",
+        lg: "size-7 rounded-md",
+        xl: "size-8 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+    },
+  }
+);
+
+type IconButtonPropsWithChildren = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof iconButtonVariants> & {
+    icon: React.FC<{ className?: string }>;
+    loading?: boolean;
+    iconClassName?: string;
+  };
+export type IconButtonProps = Omit<IconButtonPropsWithChildren, "children">;
+
+export function getIconButtonStyling(
+  variant: NonNullable<IconButtonProps["variant"]>,
+  size: NonNullable<IconButtonProps["size"]>
+): string {
+  return iconButtonVariants({ variant, size });
+}
diff --git a/packages/propel/src/icon-button/icon-button.stories.tsx b/packages/propel/src/icon-button/icon-button.stories.tsx
new file mode 100644
index 0000000..c23aad6
--- /dev/null
+++ b/packages/propel/src/icon-button/icon-button.stories.tsx
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { IconButton } from "./icon-button";
+
+const icon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 5v14m-7-7h14" />
+  </svg>
+);
+
+const meta = {
+  title: "Components/IconButton",
+  component: IconButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    icon,
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon,
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    icon,
+  },
+};
+
+export const ErrorFill: Story = {
+  args: {
+    variant: "error-fill",
+    icon,
+  },
+};
+
+export const ErrorOutline: Story = {
+  args: {
+    variant: "error-outline",
+    icon,
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    icon,
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    variant: "tertiary",
+    icon,
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: "ghost",
+    icon,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    icon,
+  },
+};
+
+export const Base: Story = {
+  args: {
+    size: "base",
+    icon,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    icon,
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    size: "xl",
+    icon,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+    icon,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    icon,
+  },
+};
+
+export const AllVariants: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-16 font-semibold">Primary Variants</h3>
+          <div className="flex flex-wrap gap-2">
+            <IconButton variant="primary" icon={icon} />
+            <IconButton variant="error-fill" icon={icon} />
+            <IconButton variant="error-outline" icon={icon} />
+            <IconButton variant="secondary" icon={icon} />
+            <IconButton variant="tertiary" icon={icon} />
+            <IconButton variant="ghost" icon={icon} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <IconButton size="sm" icon={icon} />
+          <IconButton size="base" icon={icon} />
+          <IconButton size="lg" icon={icon} />
+          <IconButton size="xl" icon={icon} />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllStates: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-16 font-semibold">Button States</h3>
+          <div className="flex flex-wrap gap-2">
+            <IconButton icon={icon} />
+            <IconButton loading icon={icon} />
+            <IconButton disabled icon={icon} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/icon-button/icon-button.tsx b/packages/propel/src/icon-button/icon-button.tsx
new file mode 100644
index 0000000..626d982
--- /dev/null
+++ b/packages/propel/src/icon-button/icon-button.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import type { IconButtonProps } from "./helper";
+import { iconButtonVariants } from "./helper";
+
+const IconButton = React.forwardRef(function IconButton(
+  props: IconButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const {
+    variant = "primary",
+    size = "base",
+    className = "",
+    type = "button",
+    loading = false,
+    disabled = false,
+    icon: Icon,
+    iconClassName = "",
+    ...rest
+  } = props;
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(iconButtonVariants({ variant, size }), className)}
+      disabled={disabled || loading}
+      {...rest}
+    >
+      <Icon
+        className={cn(
+          {
+            "size-3.5": size === "sm",
+            "size-4": size === "base" || size === "lg",
+            "size-5": size === "xl",
+          },
+          iconClassName
+        )}
+      />
+    </button>
+  );
+});
+
+IconButton.displayName = "plane-ui-icon-button";
+
+export { IconButton };
diff --git a/packages/propel/src/icon-button/index.ts b/packages/propel/src/icon-button/index.ts
new file mode 100644
index 0000000..3788f83
--- /dev/null
+++ b/packages/propel/src/icon-button/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { IconButton } from "./icon-button";
+export { getIconButtonStyling } from "./helper";
+export type { IconButtonProps } from "./helper";
diff --git a/packages/propel/src/icons/actions/add-circle-icon.tsx b/packages/propel/src/icons/actions/add-circle-icon.tsx
new file mode 100644
index 0000000..2fcf3df
--- /dev/null
+++ b/packages/propel/src/icons/actions/add-circle-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function AddCircleIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.0413 8C14.0413 4.66339 11.3368 1.95818 8.00024 1.95801C4.66352 1.95801 1.95825 4.66328 1.95825 8C1.95843 11.3366 4.66363 14.041 8.00024 14.041C11.3367 14.0408 14.0411 11.3365 14.0413 8ZM7.37524 10.666V8.625H5.33325C4.98818 8.625 4.70843 8.34503 4.70825 8C4.70825 7.65482 4.98807 7.375 5.33325 7.375H7.37524V5.33301C7.37524 4.98783 7.65507 4.70801 8.00024 4.70801C8.34527 4.70818 8.62524 4.98794 8.62524 5.33301V7.375H10.6663C11.0114 7.375 11.2913 7.65482 11.2913 8C11.2911 8.34503 11.0113 8.625 10.6663 8.625H8.62524V10.666C8.62524 11.0111 8.34527 11.2908 8.00024 11.291C7.65507 11.291 7.37524 11.0112 7.37524 10.666ZM15.2913 8C15.2911 12.0268 12.0271 15.2908 8.00024 15.291C3.97328 15.291 0.708428 12.0269 0.708252 8C0.708252 3.97292 3.97317 0.708008 8.00024 0.708008C12.0272 0.708184 15.2913 3.97303 15.2913 8Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/add-icon.tsx b/packages/propel/src/icons/actions/add-icon.tsx
new file mode 100644
index 0000000..2ec08e4
--- /dev/null
+++ b/packages/propel/src/icons/actions/add-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function AddIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.0413 8C14.0413 4.66339 11.3368 1.95818 8.00024 1.95801C4.66352 1.95801 1.95825 4.66328 1.95825 8C1.95843 11.3366 4.66363 14.041 8.00024 14.041C11.3367 14.0408 14.0411 11.3365 14.0413 8ZM7.37524 10.666V8.625H5.33325C4.98818 8.625 4.70843 8.34503 4.70825 8C4.70825 7.65482 4.98807 7.375 5.33325 7.375H7.37524V5.33301C7.37524 4.98783 7.65507 4.70801 8.00024 4.70801C8.34527 4.70818 8.62524 4.98794 8.62524 5.33301V7.375H10.6663C11.0114 7.375 11.2913 7.65482 11.2913 8C11.2911 8.34503 11.0113 8.625 10.6663 8.625H8.62524V10.666C8.62524 11.0111 8.34527 11.2908 8.00024 11.291C7.65507 11.291 7.37524 11.0112 7.37524 10.666ZM15.2913 8C15.2911 12.0268 12.0271 15.2908 8.00024 15.291C3.97328 15.291 0.708428 12.0269 0.708252 8C0.708252 3.97292 3.97317 0.708008 8.00024 0.708008C12.0272 0.708184 15.2913 3.97303 15.2913 8Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/add-reaction-icon.tsx b/packages/propel/src/icons/actions/add-reaction-icon.tsx
new file mode 100644
index 0000000..6942f83
--- /dev/null
+++ b/packages/propel/src/icons/actions/add-reaction-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function AddReactionIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M7.74205 1.11803C8.08705 1.11822 8.36704 1.39797 8.36705 1.74303C8.36705 2.08808 8.08706 2.36783 7.74205 2.36803C6.19489 2.36804 4.64941 2.95774 3.46959 4.13756C1.11022 6.49693 1.11033 10.3221 3.46959 12.6815C5.829 15.0409 9.65407 15.0409 12.0135 12.6815C13.424 11.271 13.9923 9.33686 13.7157 7.50279C13.6644 7.16166 13.899 6.84336 14.2401 6.79185C14.5814 6.74037 14.8995 6.97593 14.951 7.31725C15.2842 9.52673 14.6003 11.8624 12.8973 13.5653C10.0497 16.4129 5.43337 16.4129 2.5858 13.5653C-0.261624 10.7177 -0.26172 6.10129 2.5858 3.25377C4.00945 1.83012 5.87693 1.11804 7.74205 1.11803ZM5.57408 9.36705C5.57469 9.36783 5.57576 9.36938 5.57701 9.37096C5.58126 9.37632 5.58935 9.38606 5.60045 9.39928C5.62309 9.42625 5.65949 9.4679 5.70884 9.51939C5.80839 9.62327 5.9578 9.76446 6.15123 9.90514C6.54052 10.1882 7.08107 10.452 7.74205 10.452C8.40303 10.4519 8.94362 10.1882 9.33287 9.90514C9.52624 9.76448 9.67573 9.62324 9.77525 9.51939C9.82463 9.46786 9.86106 9.42619 9.88365 9.39928C9.89492 9.38584 9.90289 9.37626 9.90709 9.37096C9.90903 9.36851 9.90964 9.36657 9.91002 9.36607L9.90904 9.36705C10.1164 9.09209 10.5074 9.03728 10.7831 9.244C11.0248 9.42531 11.098 9.74773 10.9735 10.0106L10.9081 10.119L10.9051 10.1229C10.9039 10.1246 10.902 10.1265 10.9003 10.1288C10.8967 10.1334 10.8921 10.1393 10.8866 10.1463C10.8753 10.1606 10.86 10.18 10.8407 10.203C10.8021 10.2489 10.7477 10.3114 10.6776 10.3846C10.5376 10.5308 10.3321 10.7232 10.0672 10.9159C9.53994 11.2993 8.74724 11.7019 7.74205 11.702C6.73657 11.702 5.94323 11.2994 5.41588 10.9159C5.15117 10.7234 4.94653 10.5307 4.8065 10.3846C4.73627 10.3113 4.681 10.2489 4.64244 10.203C4.62313 10.18 4.6078 10.1606 4.59654 10.1463C4.59098 10.1393 4.58643 10.1334 4.58287 10.1288C4.58108 10.1264 4.57927 10.1246 4.57798 10.1229C4.57738 10.1221 4.57653 10.1216 4.57603 10.121L4.57506 10.119C4.36799 9.84291 4.42405 9.45114 4.70006 9.244C4.9759 9.03712 5.3668 9.09167 5.57408 9.36705ZM5.8397 5.45689C6.32285 5.50596 6.69989 5.91397 6.70006 6.41002C6.70006 6.93918 6.27117 7.36883 5.74205 7.369C5.21278 7.369 4.78306 6.93929 4.78306 6.41002C4.78324 5.8809 5.21288 5.45201 5.74205 5.45201L5.8397 5.45689ZM9.8397 5.45689C10.3228 5.50596 10.6999 5.91395 10.7001 6.41002C10.7001 6.93921 10.2711 7.36883 9.74205 7.369C9.21284 7.369 8.78306 6.93932 8.78306 6.41002C8.78324 5.88087 9.21294 5.45201 9.74205 5.45201L9.8397 5.45689Z"
+        fill={color}
+      />
+      <path
+        d="M12.2486 4.875V3.5H10.8736C10.5284 3.5 10.2486 3.22018 10.2486 2.875C10.2486 2.52982 10.5284 2.25 10.8736 2.25H12.2486V0.875C12.2486 0.529822 12.5284 0.25 12.8736 0.25C13.2188 0.25 13.4986 0.529822 13.4986 0.875V2.25H14.8736C15.2188 2.25 15.4986 2.52982 15.4986 2.875C15.4986 3.22018 15.2188 3.5 14.8736 3.5H13.4986V4.875C13.4986 5.22018 13.2188 5.5 12.8736 5.5C12.5284 5.5 12.2486 5.22018 12.2486 4.875Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/add-workitem-icon.tsx b/packages/propel/src/icons/actions/add-workitem-icon.tsx
new file mode 100644
index 0000000..83668de
--- /dev/null
+++ b/packages/propel/src/icons/actions/add-workitem-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function AddWorkItemIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M9.36189 1.34266C9.55577 1.26718 9.77503 1.29228 9.94587 1.41102C10.1167 1.52976 10.2166 1.72643 10.2135 1.93446L10.1724 4.62782L12.6832 3.65125C12.8771 3.57578 13.0963 3.60087 13.2672 3.71961C13.438 3.83836 13.5379 4.03503 13.5347 4.24305L13.5084 5.98914C13.5031 6.33428 13.2187 6.60964 12.8736 6.60438C12.5287 6.59891 12.2532 6.31549 12.2584 5.97059L12.2711 5.15223L6.77497 7.29188L6.68611 13.1395L8.18904 12.4725C8.50447 12.3324 8.87409 12.4745 9.01423 12.7899C9.15435 13.1054 9.01231 13.475 8.69685 13.6151L6.30037 14.6796C6.10549 14.7661 5.87962 14.7473 5.70173 14.6298C5.52385 14.5122 5.41821 14.3117 5.42146 14.0985L5.46248 11.4042L2.95173 12.3817C2.75801 12.4571 2.5395 12.4319 2.36873 12.3134C2.19789 12.1946 2.097 11.998 2.10017 11.7899L2.20662 4.8036C2.2073 4.7586 2.20144 4.57678 2.26423 4.41004C2.31399 4.278 2.39516 4.16094 2.50154 4.06825L2.60701 3.9911C2.71394 3.92493 2.81844 3.88917 2.85017 3.87684L9.36189 1.34266ZM10.7476 12.1024V10.954L9.70759 11.4393C9.39475 11.5852 9.02242 11.4494 8.87654 11.1366C8.73095 10.8238 8.86656 10.4523 9.17927 10.3065L10.7476 9.57411V7.84364C10.7476 7.4986 11.0276 7.21887 11.3726 7.21864C11.7178 7.21864 11.9976 7.49846 11.9976 7.84364V8.9911L13.0386 8.50672C13.3514 8.36087 13.7238 8.49578 13.8697 8.80848C14.0156 9.12132 13.8798 9.49366 13.567 9.63953L11.9976 10.371V12.1024C11.9976 12.4476 11.7178 12.7274 11.3726 12.7274C11.0276 12.7272 10.7476 12.4475 10.7476 12.1024ZM3.45369 4.98328L3.36384 10.8798L5.48298 10.0546L5.5279 7.11219C5.52859 7.06717 5.52273 6.88538 5.58552 6.71864L5.62849 6.62196C5.6773 6.52916 5.74317 6.44626 5.82283 6.37684L5.9283 6.29969C6.03518 6.23354 6.13963 6.19779 6.17146 6.18543L8.91462 5.11805L8.9488 2.84364L3.45369 4.98328Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/check-icon.tsx b/packages/propel/src/icons/actions/check-icon.tsx
new file mode 100644
index 0000000..cc32efa
--- /dev/null
+++ b/packages/propel/src/icons/actions/check-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const CheckIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M12.9746 3.78242C13.2185 3.53862 13.6143 3.53873 13.8584 3.78242C14.1024 4.0265 14.1024 4.42311 13.8584 4.66719L6.52534 12.0002C6.28132 12.2442 5.88565 12.2441 5.64155 12.0002L2.30757 8.66719C2.06349 8.42311 2.06349 8.0265 2.30757 7.78242C2.55165 7.53835 2.94826 7.53835 3.19234 7.78242L6.08296 10.674L12.9746 3.78242Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/close-icon.tsx b/packages/propel/src/icons/actions/close-icon.tsx
new file mode 100644
index 0000000..aaeaff9
--- /dev/null
+++ b/packages/propel/src/icons/actions/close-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function CloseIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M10.8501 4.18306C11.094 3.93925 11.4898 3.93936 11.7338 4.18306C11.9779 4.42714 11.9779 4.82375 11.7338 5.06782L8.84224 7.95845L11.7338 10.8501C11.9779 11.0941 11.9779 11.4898 11.7338 11.7338C11.4898 11.9779 11.0941 11.9779 10.8501 11.7338L7.95845 8.84224L5.06782 11.7338C4.82375 11.9779 4.42714 11.9779 4.18306 11.7338C3.93936 11.4898 3.93925 11.094 4.18306 10.8501L7.07368 7.95845L4.18306 5.06782C3.93898 4.82375 3.93898 4.42714 4.18306 4.18306C4.42714 3.93898 4.82375 3.93898 5.06782 4.18306L7.95845 7.07368L10.8501 4.18306Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/copy-icon.tsx b/packages/propel/src/icons/actions/copy-icon.tsx
new file mode 100644
index 0000000..7d3aaf1
--- /dev/null
+++ b/packages/propel/src/icons/actions/copy-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const CopyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M12.8751 8.13965C12.8751 7.73983 12.8748 7.46942 12.8614 7.26075C12.8483 7.05591 12.8244 6.95774 12.7999 6.89649C12.735 6.73455 12.6426 6.63099 12.5597 6.57715C12.5561 6.57481 12.528 6.55459 12.3976 6.54102C12.254 6.52612 12.0611 6.52539 11.7403 6.52539H8.11045C7.78934 6.52539 7.5959 6.52608 7.45225 6.54102C7.32361 6.5544 7.29534 6.57436 7.29112 6.57715C7.20815 6.63096 7.11485 6.73431 7.04991 6.89649C7.02538 6.95774 7.00153 7.05591 6.98838 7.26075C6.975 7.46942 6.97471 7.73985 6.97471 8.13965V12.7598C6.97471 13.1599 6.97498 13.4309 6.98838 13.6397C7.0015 13.8439 7.02545 13.9417 7.04991 14.0029C7.11485 14.1652 7.20813 14.2694 7.29112 14.3232C7.29593 14.3264 7.32527 14.3462 7.45225 14.3594C7.5959 14.3743 7.78934 14.375 8.11045 14.375H11.7403C12.061 14.375 12.254 14.3743 12.3976 14.3594C12.528 14.3458 12.5561 14.3256 12.5597 14.3232C12.6426 14.2694 12.735 14.1651 12.7999 14.0029C12.8244 13.9417 12.8483 13.844 12.8614 13.6397C12.8748 13.4309 12.8751 13.1599 12.8751 12.7598V8.13965ZM9.02549 3.09961C9.02549 2.39729 9.01698 2.19651 8.97178 2.05762C8.90057 1.8389 8.77938 1.71171 8.67979 1.65918C8.67912 1.65883 8.67283 1.6557 8.65538 1.65137C8.63581 1.64655 8.60298 1.64052 8.54795 1.63574C8.42783 1.62531 8.26723 1.625 8.0001 1.625H4.25987C3.93918 1.625 3.74622 1.62573 3.60264 1.64063C3.47216 1.6542 3.44414 1.67442 3.44053 1.67676C3.35757 1.73059 3.26522 1.8349 3.2003 1.99707C3.17582 2.05833 3.1519 2.15596 3.13877 2.36035C3.12537 2.56912 3.1251 2.84008 3.1251 3.24024V8C3.1251 8.70196 3.13274 8.90309 3.17784 9.042C3.24905 9.26082 3.37119 9.38792 3.4708 9.44043C3.47181 9.44097 3.4776 9.44411 3.49424 9.44825C3.51376 9.45308 3.5472 9.45906 3.60264 9.46387C3.72273 9.47427 3.88361 9.47461 4.15049 9.47461C4.49536 9.47482 4.77528 9.75474 4.77549 10.0996C4.77549 10.4447 4.49549 10.7244 4.15049 10.7246C3.90511 10.7246 3.68091 10.7252 3.49424 10.709C3.29805 10.692 3.0914 10.6532 2.8878 10.5459C2.4484 10.3142 2.14142 9.89594 1.98936 9.42871C1.86727 9.05317 1.8751 8.60175 1.8751 8V3.24024C1.8751 2.85632 1.87513 2.53842 1.8917 2.28028C1.90853 2.01827 1.94479 1.7704 2.04014 1.53223C2.18612 1.16761 2.42988 0.842556 2.76084 0.627932C2.99239 0.477856 3.23654 0.422046 3.47276 0.397464C3.6959 0.37426 3.96501 0.375002 4.25987 0.375003H8.0001C8.24551 0.375003 8.46967 0.374417 8.65635 0.390628C8.85246 0.407678 9.0593 0.446434 9.2628 0.553714C9.7021 0.785394 10.0082 1.20375 10.1603 1.6709C10.2825 2.04646 10.2755 2.49781 10.2755 3.09961C10.2755 3.44466 9.99549 3.7244 9.65049 3.72461C9.30531 3.72461 9.02549 3.44479 9.02549 3.09961ZM14.1251 12.7598C14.1251 13.1437 14.1251 13.4616 14.1085 13.7197C14.0917 13.9817 14.0554 14.2296 13.9601 14.4678C13.8141 14.8324 13.5703 15.1574 13.2394 15.3721C13.0078 15.5221 12.7637 15.578 12.5274 15.6025C12.3043 15.6257 12.0352 15.625 11.7403 15.625H8.11045C7.81566 15.625 7.54647 15.6257 7.32334 15.6025C7.08697 15.578 6.84215 15.5223 6.61045 15.3721C6.27949 15.1574 6.03573 14.8324 5.88975 14.4678C5.79443 14.2296 5.75814 13.9817 5.74131 13.7197C5.72474 13.4616 5.72471 13.1437 5.72471 12.7598V8.13965C5.72471 7.756 5.72476 7.43869 5.74131 7.18067C5.75814 6.91859 5.79438 6.66987 5.88975 6.43164C6.03572 6.06725 6.2797 5.74288 6.61045 5.52832C6.84215 5.37807 7.08697 5.32243 7.32334 5.29785C7.54648 5.27468 7.81565 5.27539 8.11045 5.27539H11.7403C12.0352 5.27539 12.3043 5.27465 12.5274 5.29785C12.7637 5.32245 13.0078 5.37817 13.2394 5.52832C13.5702 5.74285 13.8141 6.06723 13.9601 6.43164C14.0554 6.66987 14.0917 6.91859 14.1085 7.18067C14.1251 7.43869 14.1251 7.75599 14.1251 8.13965V12.7598Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/copy-link.tsx b/packages/propel/src/icons/actions/copy-link.tsx
new file mode 100644
index 0000000..acbb3cc
--- /dev/null
+++ b/packages/propel/src/icons/actions/copy-link.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function CopyLinkIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M3.30277 7.07328C3.54686 6.8296 3.94261 6.82939 4.18656 7.07328C4.43064 7.31736 4.43064 7.71397 4.18656 7.95805L3.2432 8.90043C2.18575 9.95806 2.18572 11.6729 3.2432 12.7305C4.30081 13.7882 6.01563 13.788 7.07328 12.7305L8.01664 11.7881C8.26073 11.5441 8.65636 11.544 8.90043 11.7881C9.14426 12.0322 9.14443 12.4279 8.90043 12.6719L7.95707 13.6143C6.41125 15.16 3.90517 15.1601 2.35941 13.6143C0.813772 12.0685 0.813807 9.56242 2.35941 8.01664L3.30277 7.07328ZM9.87797 5.21195C10.122 4.96788 10.5187 4.96787 10.7627 5.21195C11.0064 5.45601 11.0066 5.85177 10.7627 6.09574L6.09574 10.7618C5.85166 11.0058 5.45603 11.0058 5.21195 10.7618C4.96799 10.5177 4.96791 10.122 5.21195 9.87797L9.87797 5.21195ZM8.01664 2.35941C9.56242 0.813804 12.0685 0.813775 13.6143 2.35941C15.16 3.90517 15.1599 6.41121 13.6143 7.95707L12.6719 8.90043C12.4279 9.14442 12.0322 9.14425 11.7881 8.90043C11.544 8.65635 11.544 8.26072 11.7881 8.01664L12.7305 7.07328C13.788 6.01556 13.7881 4.3008 12.7305 3.2432C11.6729 2.18572 9.95805 2.18575 8.90043 3.2432L7.95707 4.18656C7.71296 4.4303 7.31724 4.43053 7.07328 4.18656C6.82935 3.94259 6.82956 3.54686 7.07328 3.30277L8.01664 2.35941Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/edit-icon.tsx b/packages/propel/src/icons/actions/edit-icon.tsx
new file mode 100644
index 0000000..a260d49
--- /dev/null
+++ b/packages/propel/src/icons/actions/edit-icon.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const EditIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M10.7494 1.63573C11.7299 0.655278 13.3197 0.655278 14.3002 1.63573C15.2806 2.61619 15.2807 4.20607 14.3002 5.18651L5.49553 13.9902C5.31697 14.1688 5.16873 14.3209 4.99065 14.4385C4.84347 14.5355 4.68368 14.6127 4.51604 14.667C4.31301 14.7326 4.10085 14.7533 3.85002 14.7812L1.59416 15.0322C1.40546 15.0532 1.2167 14.9868 1.08244 14.8525C0.948476 14.7183 0.882789 14.5303 0.903733 14.3418L1.15471 12.0859C1.18258 11.8351 1.2032 11.6231 1.26897 11.4199C1.3233 11.2521 1.39958 11.0924 1.49651 10.9453C1.61409 10.7669 1.76748 10.6187 1.94573 10.4404L10.7494 1.63573ZM2.82951 11.3242C2.61594 11.5378 2.57192 11.5851 2.54045 11.6328C2.50525 11.6862 2.47707 11.7441 2.45744 11.8047C2.43982 11.8591 2.43027 11.9232 2.3969 12.2236L2.23186 13.7031L3.71233 13.539C3.86263 13.5223 3.95375 13.5118 4.01408 13.5029L4.13127 13.4775C4.19171 13.4579 4.24916 13.4304 4.30217 13.3955C4.35014 13.3638 4.39813 13.32 4.61174 13.1064L10.974 6.74413L9.19084 4.96092L2.82951 11.3242ZM13.4164 2.51952C12.9241 2.02721 12.1255 2.02721 11.6332 2.51952L10.0746 4.07713L11.8578 5.86034L13.4164 4.30272C13.9087 3.81043 13.9087 3.01182 13.4164 2.51952Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/actions/filter-applied-icon.tsx b/packages/propel/src/icons/actions/filter-applied-icon.tsx
new file mode 100644
index 0000000..5dae6e5
--- /dev/null
+++ b/packages/propel/src/icons/actions/filter-applied-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function FilterAppliedIcon({ color = "text-icon-brand", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M15.3 3.65C15.3 5.11355 14.1136 6.3 12.65 6.3C11.1864 6.3 10 5.11355 10 3.65C10 2.18645 11.1864 1 12.65 1C14.1136 1 15.3 2.18645 15.3 3.65Z"
+        fill={color}
+      />
+      <path
+        d="M9.99984 12.3333C10.368 12.3333 10.6665 12.6318 10.6665 13C10.6665 13.3682 10.368 13.6667 9.99984 13.6667H5.99984C5.63165 13.6667 5.33317 13.3682 5.33317 13C5.33317 12.6318 5.63165 12.3333 5.99984 12.3333H9.99984ZM11.9998 7.66667C12.368 7.66667 12.6665 7.96514 12.6665 8.33333C12.6665 8.70152 12.368 9 11.9998 9H3.99984C3.63165 9 3.33317 8.70152 3.33317 8.33333C3.33317 7.96514 3.63165 7.66667 3.99984 7.66667H11.9998ZM7.99984 3C8.36803 3 8.6665 3.29848 8.6665 3.66667C8.6665 4.03486 8.36803 4.33333 7.99984 4.33333H1.33317C0.964981 4.33333 0.666504 4.03486 0.666504 3.66667C0.666504 3.29848 0.964981 3 1.33317 3H7.99984Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/filter-icon.tsx b/packages/propel/src/icons/actions/filter-icon.tsx
new file mode 100644
index 0000000..8243d2e
--- /dev/null
+++ b/packages/propel/src/icons/actions/filter-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function FilterIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M9.9751 11.3496C10.3203 11.3496 10.6001 11.6294 10.6001 11.9746C10.6001 12.3198 10.3203 12.5996 9.9751 12.5996H5.9751C5.62992 12.5996 5.3501 12.3198 5.3501 11.9746C5.3501 11.6294 5.62992 11.3496 5.9751 11.3496H9.9751ZM11.9751 7.34961C12.3203 7.34961 12.6001 7.62943 12.6001 7.97461C12.6001 8.31979 12.3203 8.59961 11.9751 8.59961H3.9751C3.62992 8.59961 3.3501 8.31979 3.3501 7.97461C3.3501 7.62943 3.62992 7.34961 3.9751 7.34961H11.9751ZM13.9751 3.34961C14.3203 3.34961 14.6001 3.62943 14.6001 3.97461C14.6001 4.31979 14.3203 4.59961 13.9751 4.59961H1.9751C1.62992 4.59961 1.3501 4.31979 1.3501 3.97461C1.3501 3.62943 1.62992 3.34961 1.9751 3.34961H13.9751Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/globe-icon.tsx b/packages/propel/src/icons/actions/globe-icon.tsx
new file mode 100644
index 0000000..1ed2cf3
--- /dev/null
+++ b/packages/propel/src/icons/actions/globe-icon.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const GlobeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M8.00195 0.709961C12.0288 0.710137 15.293 3.97498 15.293 8.00195C15.2928 12.0287 12.0287 15.2928 8.00195 15.293C3.97498 15.293 0.710137 12.0288 0.709961 8.00195C0.709961 3.97488 3.97488 0.709961 8.00195 0.709961ZM1.99219 8.62695C2.25614 11.1937 4.12706 13.2827 6.58203 13.874C5.52513 12.3194 4.88848 10.5118 4.74219 8.62695H1.99219ZM11.2607 8.62695C11.1145 10.5117 10.4787 12.3194 9.42188 13.874C11.8765 13.2825 13.7468 11.1935 14.0107 8.62695H11.2607ZM5.99609 8.62695C6.15854 10.4767 6.85546 12.2382 8.00098 13.6982C9.14679 12.2381 9.84438 10.4769 10.0068 8.62695H5.99609ZM9.42188 2.12891C10.4789 3.68372 11.1146 5.49193 11.2607 7.37695H14.0107C13.747 4.81011 11.8768 2.72047 9.42188 2.12891ZM8.00098 2.30469C6.85524 3.7649 6.15844 5.5269 5.99609 7.37695H10.0068C9.84448 5.52664 9.14701 3.76502 8.00098 2.30469ZM6.58105 2.12891C4.12629 2.72057 2.25586 4.81019 1.99219 7.37695H4.74219C4.88837 5.49198 5.52413 3.6837 6.58105 2.12891Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/actions/index.ts b/packages/propel/src/icons/actions/index.ts
new file mode 100644
index 0000000..b097611
--- /dev/null
+++ b/packages/propel/src/icons/actions/index.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./add-circle-icon";
+export * from "./add-icon";
+export * from "./add-workitem-icon";
+export * from "./add-reaction-icon";
+export * from "./check-icon";
+export * from "./close-icon";
+export * from "./filter-icon";
+export * from "./filter-applied-icon";
+export * from "./copy-icon";
+export * from "./edit-icon";
+export * from "./globe-icon";
+export * from "./link-icon";
+export * from "./lock-icon";
+export * from "./new-tab-icon";
+export * from "./search-icon";
+export * from "./plus-icon";
+export * from "./preferences-icon";
+export * from "./copy-link";
+export * from "./upgrade-icon";
+export * from "./trash-icon";
diff --git a/packages/propel/src/icons/actions/link-icon.tsx b/packages/propel/src/icons/actions/link-icon.tsx
new file mode 100644
index 0000000..907e76f
--- /dev/null
+++ b/packages/propel/src/icons/actions/link-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const LinkIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M3.30277 7.07328C3.54686 6.8296 3.94261 6.82939 4.18656 7.07328C4.43064 7.31736 4.43064 7.71397 4.18656 7.95805L3.2432 8.90043C2.18575 9.95806 2.18572 11.6729 3.2432 12.7305C4.30081 13.7882 6.01563 13.788 7.07328 12.7305L8.01664 11.7881C8.26073 11.5441 8.65636 11.544 8.90043 11.7881C9.14426 12.0322 9.14443 12.4279 8.90043 12.6719L7.95707 13.6143C6.41125 15.16 3.90517 15.1601 2.35941 13.6143C0.813772 12.0685 0.813807 9.56242 2.35941 8.01664L3.30277 7.07328ZM9.87797 5.21195C10.122 4.96788 10.5187 4.96787 10.7627 5.21195C11.0064 5.45601 11.0066 5.85177 10.7627 6.09574L6.09574 10.7618C5.85166 11.0058 5.45603 11.0058 5.21195 10.7618C4.96799 10.5177 4.96791 10.122 5.21195 9.87797L9.87797 5.21195ZM8.01664 2.35941C9.56242 0.813804 12.0685 0.813775 13.6143 2.35941C15.16 3.90517 15.1599 6.41121 13.6143 7.95707L12.6719 8.90043C12.4279 9.14442 12.0322 9.14425 11.7881 8.90043C11.544 8.65635 11.544 8.26072 11.7881 8.01664L12.7305 7.07328C13.788 6.01556 13.7881 4.3008 12.7305 3.2432C11.6729 2.18572 9.95805 2.18575 8.90043 3.2432L7.95707 4.18656C7.71296 4.4303 7.31724 4.43053 7.07328 4.18656C6.82935 3.94259 6.82956 3.54686 7.07328 3.30277L8.01664 2.35941Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/lock-icon.tsx b/packages/propel/src/icons/actions/lock-icon.tsx
new file mode 100644
index 0000000..0248dd5
--- /dev/null
+++ b/packages/propel/src/icons/actions/lock-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const LockIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.3501 10.5078C13.3501 9.9375 13.3494 9.54724 13.3247 9.24512C13.3006 8.95048 13.2573 8.79472 13.2007 8.68359C13.0689 8.42488 12.8578 8.21482 12.5991 8.08301C12.488 8.0264 12.3323 7.98209 12.0376 7.95801C11.7355 7.93334 11.3452 7.93262 10.7749 7.93262H5.17529C4.60506 7.93262 4.21472 7.93334 3.9126 7.95801C3.61782 7.98209 3.46218 8.02641 3.35107 8.08301C3.09235 8.21483 2.88133 8.42488 2.74951 8.68359C2.69292 8.79472 2.64957 8.95048 2.62549 9.24512C2.6008 9.54724 2.6001 9.9375 2.6001 10.5078V10.7744C2.6001 11.3447 2.60082 11.735 2.62549 12.0371C2.64955 12.3316 2.69298 12.4875 2.74951 12.5986C2.88133 12.8573 3.09235 13.0684 3.35107 13.2002C3.46216 13.2567 3.61805 13.3002 3.9126 13.3242C4.21472 13.3489 4.60504 13.3496 5.17529 13.3496H10.7749C11.3452 13.3496 11.7355 13.3489 12.0376 13.3242C12.3321 13.3002 12.488 13.2567 12.5991 13.2002C12.8578 13.0684 13.0689 12.8573 13.2007 12.5986C13.2572 12.4875 13.3006 12.3316 13.3247 12.0371C13.3494 11.735 13.3501 11.3447 13.3501 10.7744V10.5078ZM10.6831 5.30762C10.6829 3.812 9.47075 2.59961 7.9751 2.59961C6.47944 2.59961 5.26727 3.812 5.26709 5.30762V6.68262H10.6831V5.30762ZM11.9331 6.69922C12.0046 6.7028 12.0733 6.70654 12.1392 6.71191C12.5112 6.74231 12.8499 6.80753 13.1665 6.96875C13.6604 7.2204 14.0623 7.62227 14.314 8.11621L14.3696 8.23633C14.4906 8.51833 14.5442 8.81795 14.5708 9.14355C14.6006 9.50836 14.6001 9.95818 14.6001 10.5078V10.7744C14.6001 11.3239 14.6006 11.7739 14.5708 12.1387C14.5404 12.5107 14.4752 12.8494 14.314 13.166C14.0623 13.66 13.6605 14.0618 13.1665 14.3135C12.8499 14.4747 12.5112 14.5399 12.1392 14.5703C11.7744 14.6001 11.3244 14.5996 10.7749 14.5996H5.17529C4.62577 14.5996 4.17582 14.6001 3.81104 14.5703C3.43898 14.5399 3.10032 14.4748 2.78369 14.3135C2.28977 14.0618 1.88791 13.66 1.63623 13.166C1.47496 12.8494 1.40979 12.5107 1.3794 12.1387C1.34962 11.7739 1.3501 11.3239 1.3501 10.7744V10.5078C1.3501 9.95817 1.3496 9.50836 1.3794 9.14355C1.4098 8.7714 1.47488 8.43292 1.63623 8.11621L1.73779 7.93555C1.99002 7.52435 2.35152 7.18894 2.78369 6.96875C3.10029 6.80752 3.43903 6.74231 3.81104 6.71191C3.87691 6.70654 3.94559 6.7028 4.01709 6.69922V5.30762C4.01727 3.12164 5.78908 1.34961 7.9751 1.34961C10.1611 1.34961 11.9329 3.12164 11.9331 5.30762V6.69922Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/new-tab-icon.tsx b/packages/propel/src/icons/actions/new-tab-icon.tsx
new file mode 100644
index 0000000..281f517
--- /dev/null
+++ b/packages/propel/src/icons/actions/new-tab-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const NewTabIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M1.3501 10.7744V6.50781C1.3501 5.95818 1.3496 5.50837 1.3794 5.14355C1.4098 4.7714 1.47486 4.43291 1.63623 4.11621C1.8879 3.62229 2.28977 3.22041 2.78369 2.96875C3.10029 2.80752 3.43903 2.74231 3.81104 2.71191C4.17581 2.68214 4.62578 2.68262 5.17529 2.68262H6.64209C6.98701 2.68279 7.26691 2.9627 7.26709 3.30762C7.26709 3.65269 6.98712 3.93244 6.64209 3.93262H5.17529C4.60506 3.93262 4.21472 3.93334 3.9126 3.95801C3.61782 3.98209 3.46219 4.02641 3.35107 4.08301C3.09235 4.21483 2.88134 4.42487 2.74951 4.68359C2.69293 4.79469 2.64958 4.95043 2.62549 5.24512C2.6008 5.54724 2.6001 5.93752 2.6001 6.50781V10.7744C2.6001 11.3447 2.60082 11.735 2.62549 12.0371C2.64955 12.3316 2.69298 12.4875 2.74951 12.5986C2.88133 12.8573 3.09235 13.0684 3.35107 13.2002C3.46216 13.2567 3.61805 13.3002 3.9126 13.3242C4.21472 13.3489 4.60504 13.3496 5.17529 13.3496H9.4419C10.0122 13.3496 10.4025 13.3489 10.7046 13.3242C10.9992 13.3001 11.155 13.2568 11.2661 13.2002C11.5248 13.0684 11.7349 12.8573 11.8667 12.5986C11.9233 12.4875 11.9676 12.3318 11.9917 12.0371C12.0164 11.735 12.0171 11.3447 12.0171 10.7744V9.30762C12.0173 8.96259 12.297 8.68262 12.6421 8.68262C12.987 8.68279 13.2669 8.9627 13.2671 9.30762V10.7744C13.2671 11.3239 13.2676 11.7739 13.2378 12.1387C13.2074 12.5107 13.1422 12.8494 12.981 13.166C12.7608 13.5982 12.4253 13.9597 12.0142 14.2119L11.8335 14.3135C11.5168 14.4748 11.1783 14.5399 10.8062 14.5703C10.4413 14.6001 9.99153 14.5996 9.4419 14.5996H5.17529C4.62577 14.5996 4.17582 14.6001 3.81104 14.5703C3.43898 14.5399 3.10032 14.4748 2.78369 14.3135C2.28977 14.0618 1.88791 13.66 1.63623 13.166C1.47496 12.8494 1.40979 12.5107 1.3794 12.1387C1.34962 11.7739 1.3501 11.3239 1.3501 10.7744ZM14.6001 5.97461C14.6001 6.31979 14.3203 6.59961 13.9751 6.59961C13.6299 6.59961 13.3501 6.31979 13.3501 5.97461V3.4834L9.0835 7.75C8.83941 7.99391 8.44373 7.99402 8.19971 7.75C7.95568 7.50598 7.95579 7.1103 8.19971 6.86621L12.4653 2.59961H9.9751C9.62992 2.59961 9.3501 2.31979 9.3501 1.97461C9.3501 1.62943 9.62992 1.34961 9.9751 1.34961H13.9751C14.3203 1.34961 14.6001 1.62943 14.6001 1.97461V5.97461Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/plus-icon.tsx b/packages/propel/src/icons/actions/plus-icon.tsx
new file mode 100644
index 0000000..9e09c0a
--- /dev/null
+++ b/packages/propel/src/icons/actions/plus-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const PlusIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M7.37549 12.666V8.625H3.3335C2.98843 8.625 2.70867 8.34503 2.7085 8C2.7085 7.65482 2.98832 7.375 3.3335 7.375H7.37549V3.33301C7.37549 2.98783 7.65531 2.70801 8.00049 2.70801C8.34552 2.70818 8.62549 2.98794 8.62549 3.33301V7.375H12.6665C13.0117 7.375 13.2915 7.65482 13.2915 8C13.2913 8.34503 13.0116 8.625 12.6665 8.625H8.62549V12.666C8.62549 13.0111 8.34552 13.2908 8.00049 13.291C7.65531 13.291 7.37549 13.0112 7.37549 12.666Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/preferences-icon.tsx b/packages/propel/src/icons/actions/preferences-icon.tsx
new file mode 100644
index 0000000..de08dc8
--- /dev/null
+++ b/packages/propel/src/icons/actions/preferences-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function PreferencesIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14 13.292L9.95801 13.292L9.95801 14.667C9.95801 15.0122 9.67819 15.292 9.33301 15.292C8.98798 15.2918 8.70801 15.0121 8.70801 14.667L8.70801 10.667C8.70801 10.3219 8.98798 10.0422 9.33301 10.042C9.67819 10.042 9.95801 10.3218 9.95801 10.667L9.95801 12.042L14 12.042C14.3452 12.042 14.625 12.3218 14.625 12.667C14.625 13.0122 14.3452 13.292 14 13.292ZM14 8.625L8 8.625C7.65482 8.625 7.375 8.34518 7.375 8C7.37518 7.65497 7.65493 7.375 8 7.375L14 7.375C14.3451 7.375 14.6248 7.65497 14.625 8C14.625 8.34518 14.3452 8.625 14 8.625ZM14 3.95898L11.292 3.95898L11.292 5.33398C11.2918 5.6789 11.0119 5.95881 10.667 5.95898C10.3219 5.95898 10.0422 5.67901 10.042 5.33398L10.042 1.33398C10.042 0.988806 10.3218 0.708984 10.667 0.708984C11.012 0.709159 11.292 0.988914 11.292 1.33398L11.292 2.70898L14 2.70898C14.3452 2.70898 14.625 2.98881 14.625 3.33398C14.6248 3.67901 14.3451 3.95898 14 3.95898ZM8 3.95898L2 3.95898C1.65493 3.95898 1.37517 3.67901 1.375 3.33398C1.375 2.98881 1.65482 2.70898 2 2.70898L8 2.70898C8.34518 2.70898 8.625 2.98881 8.625 3.33398C8.62482 3.67901 8.34507 3.95898 8 3.95898ZM6.66699 13.292L2 13.292C1.65482 13.292 1.375 13.0122 1.375 12.667C1.375 12.3218 1.65482 12.042 2 12.042L6.66699 12.042C7.01202 12.0422 7.29199 12.3219 7.29199 12.667C7.29199 13.0121 7.01202 13.2918 6.66699 13.292ZM2 8.625C1.65482 8.625 1.375 8.34518 1.375 8C1.37518 7.65497 1.65493 7.375 2 7.375L4.70801 7.375L4.70801 6C4.70818 5.65508 4.98809 5.37518 5.33301 5.375C5.67808 5.375 5.95783 5.65497 5.95801 6L5.95801 10C5.95801 10.3452 5.67819 10.625 5.33301 10.625C4.98798 10.6248 4.70801 10.3451 4.70801 10L4.70801 8.625L2 8.625Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/search-icon.tsx b/packages/propel/src/icons/actions/search-icon.tsx
new file mode 100644
index 0000000..6cd0324
--- /dev/null
+++ b/packages/propel/src/icons/actions/search-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function SearchIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M10.458 6.41699C10.458 4.18495 8.649 2.37518 6.41699 2.375C4.18484 2.375 2.375 4.18484 2.375 6.41699C2.37518 8.649 4.18495 10.458 6.41699 10.458C8.64889 10.4578 10.4578 8.64889 10.458 6.41699ZM11.708 6.41699C11.7079 7.65259 11.2831 8.78796 10.5732 9.68848L14.1924 13.3076C14.4365 13.5517 14.4365 13.9483 14.1924 14.1924C13.9483 14.4365 13.5517 14.4365 13.3076 14.1924L9.68848 10.5732C8.78796 11.2831 7.65259 11.7079 6.41699 11.708C3.4946 11.708 1.12518 9.33935 1.125 6.41699C1.125 3.49449 3.49449 1.125 6.41699 1.125C9.33935 1.12518 11.708 3.4946 11.708 6.41699Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/trash-icon.tsx b/packages/propel/src/icons/actions/trash-icon.tsx
new file mode 100644
index 0000000..d6262bd
--- /dev/null
+++ b/packages/propel/src/icons/actions/trash-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const TrashIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.9751 3.40039C14.3203 3.40039 14.6001 3.68021 14.6001 4.02539C14.6001 4.37057 14.3203 4.65039 13.9751 4.65039H13.2261L12.7974 11.0801C12.763 11.596 12.7354 12.0193 12.6851 12.3623C12.6336 12.713 12.553 13.0307 12.3853 13.3252C12.1227 13.7861 11.7258 14.1564 11.2485 14.3877C10.9437 14.5354 10.6222 14.595 10.269 14.623C9.92331 14.6505 9.49827 14.6504 8.98096 14.6504H6.96924C6.45193 14.6504 6.02688 14.6505 5.68115 14.623C5.32804 14.595 5.00647 14.5354 4.70166 14.3877C4.22433 14.1564 3.82754 13.7861 3.56494 13.3252C3.39718 13.0307 3.31662 12.713 3.26514 12.3623C3.21479 12.0193 3.18625 11.596 3.15186 11.0801L2.72412 4.65039H1.9751C1.62992 4.65039 1.3501 4.37057 1.3501 4.02539C1.3501 3.68021 1.62992 3.40039 1.9751 3.40039H13.9751ZM4.3999 10.9971C4.4356 11.5326 4.46 11.8981 4.50146 12.1807C4.54186 12.4558 4.59237 12.6016 4.65186 12.7061C4.78941 12.9474 4.99659 13.1415 5.24658 13.2627C5.35474 13.3151 5.50355 13.3549 5.78076 13.377C6.06553 13.3995 6.43224 13.4004 6.96924 13.4004H8.98096C9.51795 13.4004 9.88467 13.3995 10.1694 13.377C10.4466 13.355 10.5955 13.3151 10.7036 13.2627C10.9536 13.1415 11.1608 12.9474 11.2983 12.7061C11.3578 12.6017 11.4083 12.4558 11.4487 12.1807C11.4902 11.8981 11.5146 11.5326 11.5503 10.9971L11.9731 4.65039H3.97705L4.3999 10.9971ZM6.01709 10.3584V7.02539C6.01709 6.68021 6.29691 6.40039 6.64209 6.40039C6.98712 6.40057 7.26709 6.68032 7.26709 7.02539V10.3584C7.26709 10.7035 6.98712 10.9832 6.64209 10.9834C6.29691 10.9834 6.01709 10.7036 6.01709 10.3584ZM8.68311 10.3584V7.02539C8.68311 6.68032 8.96308 6.40057 9.30811 6.40039C9.65328 6.40039 9.93311 6.68021 9.93311 7.02539V10.3584C9.93311 10.7036 9.65328 10.9834 9.30811 10.9834C8.96308 10.9832 8.68311 10.7035 8.68311 10.3584ZM9.9751 1.40039C10.3203 1.40039 10.6001 1.68021 10.6001 2.02539C10.6001 2.37057 10.3203 2.65039 9.9751 2.65039H5.9751C5.62992 2.65039 5.3501 2.37057 5.3501 2.02539C5.3501 1.68021 5.62992 1.40039 5.9751 1.40039H9.9751Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/upgrade-icon.tsx b/packages/propel/src/icons/actions/upgrade-icon.tsx
new file mode 100644
index 0000000..9c8b9d4
--- /dev/null
+++ b/packages/propel/src/icons/actions/upgrade-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function UpgradeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1ZM5.00457 7.55003L7.55003 5.00457C7.79853 4.75605 8.20147 4.75605 8.44997 5.00457L10.9954 7.55003C11.2439 7.79853 11.2439 8.20147 10.9954 8.44997C10.7469 8.69847 10.344 8.69847 10.0955 8.44997L8.63636 6.99085V10.5455C8.63636 10.8969 8.35146 11.1818 8 11.1818C7.64854 11.1818 7.36364 10.8969 7.36364 10.5455V6.99085L5.90452 8.44997C5.65601 8.69847 5.25309 8.69847 5.00457 8.44997C4.75605 8.20147 4.75605 7.79853 5.00457 7.55003Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/activity-icon.tsx b/packages/propel/src/icons/activity-icon.tsx
new file mode 100644
index 0000000..3045005
--- /dev/null
+++ b/packages/propel/src/icons/activity-icon.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ISvgIcons } from "./type";
+
+export function ActivityIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <g clipPath="url(#clip0_15681_9387)">
+        <path
+          d="M14.6666 8.00001H13.0133C12.7219 7.99939 12.4384 8.09421 12.206 8.26999C11.9736 8.44576 11.8053 8.69281 11.7266 8.97334L10.1599 14.5467C10.1498 14.5813 10.1288 14.6117 10.0999 14.6333C10.0711 14.655 10.036 14.6667 9.99992 14.6667C9.96386 14.6667 9.92877 14.655 9.89992 14.6333C9.87107 14.6117 9.85002 14.5813 9.83992 14.5467L6.15992 1.45334C6.14982 1.41872 6.12877 1.38831 6.09992 1.36668C6.07107 1.34504 6.03598 1.33334 5.99992 1.33334C5.96386 1.33334 5.92877 1.34504 5.89992 1.36668C5.87107 1.38831 5.85002 1.41872 5.83992 1.45334L4.27325 7.02668C4.1949 7.30611 4.02751 7.55235 3.79649 7.72802C3.56548 7.90368 3.28347 7.99918 2.99325 8.00001H1.33325"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_15681_9387">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/ai-icon.tsx b/packages/propel/src/icons/ai-icon.tsx
new file mode 100644
index 0000000..0c12a6e
--- /dev/null
+++ b/packages/propel/src/icons/ai-icon.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function AiIcon({ width = "16", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_888_35571)">
+        <path
+          d="M14.2082 0H1.79185C0.801553 0 0 0.801553 0 1.79185V14.2093C0 15.1984 0.801553 16.0012 1.79185 16.0012H14.2093C15.1984 16.0012 16.0012 15.1996 16.0012 14.2093V1.79185C16.0012 0.802748 15.1996 0 14.2093 0H14.2082ZM13.1032 11.5276C13.1032 12.3984 12.3972 13.1032 11.5276 13.1032H4.47245C3.60161 13.1032 2.89682 12.3972 2.89682 11.5276V4.47245C2.89682 3.60161 3.60281 2.89682 4.47245 2.89682H11.5276C12.3984 2.89682 13.1032 3.60281 13.1032 4.47245V11.5276Z"
+          fill={color}
+        />
+        <path
+          d="M9.61291 4.94336H6.38759C5.58996 4.94336 4.94336 5.58996 4.94336 6.38759V9.61291C4.94336 10.4105 5.58996 11.0571 6.38759 11.0571H9.61291C10.4105 11.0571 11.0571 10.4105 11.0571 9.61291V6.38759C11.0571 5.58996 10.4105 4.94336 9.61291 4.94336Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_888_35571">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/chevron-down.tsx b/packages/propel/src/icons/arrows/chevron-down.tsx
new file mode 100644
index 0000000..8869c94
--- /dev/null
+++ b/packages/propel/src/icons/arrows/chevron-down.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ChevronDownIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M11.5576 5.55708C11.8016 5.313 12.1983 5.313 12.4423 5.55708C12.6864 5.80116 12.6864 6.19777 12.4423 6.44185L8.44234 10.4418C8.19826 10.6859 7.80165 10.6859 7.55757 10.4418L3.55757 6.44185C3.31349 6.19777 3.31349 5.80116 3.55757 5.55708C3.80165 5.313 4.19826 5.313 4.44234 5.55708L7.99995 9.1147L11.5576 5.55708Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/chevron-left.tsx b/packages/propel/src/icons/arrows/chevron-left.tsx
new file mode 100644
index 0000000..1b34ed3
--- /dev/null
+++ b/packages/propel/src/icons/arrows/chevron-left.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ChevronLeftIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M9.55757 3.55708C9.80165 3.313 10.1983 3.313 10.4423 3.55708C10.6864 3.80116 10.6864 4.19777 10.4423 4.44185L6.88472 7.99946L10.4423 11.5571C10.6864 11.8012 10.6864 12.1978 10.4423 12.4418C10.1983 12.6859 9.80165 12.6859 9.55757 12.4418L5.55757 8.44185C5.31349 8.19777 5.31349 7.80116 5.55757 7.55708L9.55757 3.55708Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/chevron-right.tsx b/packages/propel/src/icons/arrows/chevron-right.tsx
new file mode 100644
index 0000000..22c8b2a
--- /dev/null
+++ b/packages/propel/src/icons/arrows/chevron-right.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ChevronRightIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M5.55757 3.55708C5.80165 3.313 6.19826 3.313 6.44234 3.55708L10.4423 7.55708C10.6864 7.80116 10.6864 8.19777 10.4423 8.44185L6.44234 12.4418C6.19826 12.6859 5.80165 12.6859 5.55757 12.4418C5.31349 12.1978 5.31349 11.8012 5.55757 11.5571L9.11519 7.99946L5.55757 4.44185C5.31349 4.19777 5.31349 3.80116 5.55757 3.55708Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/chevron-up.tsx b/packages/propel/src/icons/arrows/chevron-up.tsx
new file mode 100644
index 0000000..c176d1d
--- /dev/null
+++ b/packages/propel/src/icons/arrows/chevron-up.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ChevronUpIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M7.6562 5.47785C7.89877 5.3179 8.22886 5.34445 8.44234 5.55793L12.4423 9.55793C12.6864 9.80201 12.6864 10.1986 12.4423 10.4427C12.1983 10.6868 11.8016 10.6868 11.5576 10.4427L7.99995 6.88508L4.44234 10.4427C4.19826 10.6868 3.80165 10.6868 3.55757 10.4427C3.31349 10.1986 3.31349 9.80201 3.55757 9.55793L7.55757 5.55793L7.6562 5.47785Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/index.ts b/packages/propel/src/icons/arrows/index.ts
new file mode 100644
index 0000000..736f514
--- /dev/null
+++ b/packages/propel/src/icons/arrows/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./chevron-down";
+export * from "./chevron-left";
+export * from "./chevron-right";
+export * from "./chevron-up";
+export * from "./reply-icon";
diff --git a/packages/propel/src/icons/arrows/reply-icon.tsx b/packages/propel/src/icons/arrows/reply-icon.tsx
new file mode 100644
index 0000000..08a828e
--- /dev/null
+++ b/packages/propel/src/icons/arrows/reply-icon.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ReplyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M5.52865 4.19526C5.789 3.93491 6.211 3.93491 6.47135 4.19526C6.73168 4.45561 6.7317 4.87763 6.47135 5.13797L4.27604 7.33328H10.6667C11.5507 7.33328 12.3983 7.68472 13.0234 8.30985C13.6485 8.93496 14 9.78257 14 10.6666V11.9999C14 12.3681 13.7015 12.6666 13.3333 12.6666C12.9652 12.6666 12.6667 12.3681 12.6667 11.9999V10.6666C12.6667 10.1362 12.4558 9.62762 12.0807 9.25255C11.7526 8.92442 11.3223 8.72189 10.8646 8.67638L10.6667 8.66662H4.27604L6.47135 10.8619C6.73168 11.1223 6.7317 11.5443 6.47135 11.8046C6.21101 12.065 5.78899 12.065 5.52865 11.8046L2.19531 8.4713C2.1642 8.4402 2.13648 8.40583 2.11198 8.36909C2.09464 8.3431 2.07971 8.31603 2.06641 8.28836C2.05178 8.25798 2.03859 8.22669 2.02865 8.19396C2.02526 8.18281 2.02297 8.17139 2.02018 8.16011C2.0075 8.10875 2 8.05523 2 7.99995C2 7.94683 2.00649 7.89518 2.01823 7.84565C2.02148 7.83195 2.02452 7.81815 2.02865 7.80464C2.03858 7.77214 2.05185 7.74107 2.06641 7.71089C2.07918 7.68436 2.09353 7.65841 2.11003 7.63341C2.13495 7.59564 2.16344 7.56047 2.19531 7.5286L5.52865 4.19526Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/at-risk-icon.tsx b/packages/propel/src/icons/at-risk-icon.tsx
new file mode 100644
index 0000000..3ffe035
--- /dev/null
+++ b/packages/propel/src/icons/at-risk-icon.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function AtRiskIcon({ width = "16", height = "16" }: ISvgIcons) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_365_7561)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM7.99996 4.66669C8.36815 4.66669 8.66663 4.96516 8.66663 5.33335V8.00002C8.66663 8.36821 8.36815 8.66669 7.99996 8.66669C7.63177 8.66669 7.33329 8.36821 7.33329 8.00002V5.33335C7.33329 4.96516 7.63177 4.66669 7.99996 4.66669ZM7.33329 10.6667C7.33329 10.2985 7.63177 10 7.99996 10H8.00663C8.37482 10 8.67329 10.2985 8.67329 10.6667C8.67329 11.0349 8.37482 11.3334 8.00663 11.3334H7.99996C7.63177 11.3334 7.33329 11.0349 7.33329 10.6667Z"
+          fill="#CC7700"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_365_7561">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/audio-file-icon.tsx b/packages/propel/src/icons/attachments/audio-file-icon.tsx
new file mode 100644
index 0000000..1640c29
--- /dev/null
+++ b/packages/propel/src/icons/attachments/audio-file-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function AudioFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M7.33325 13.9999V1.99992C7.33325 1.63173 7.63173 1.33325 7.99992 1.33325C8.36811 1.33325 8.66659 1.63173 8.66659 1.99992V13.9999C8.66659 14.3681 8.36811 14.6666 7.99992 14.6666C7.63173 14.6666 7.33325 14.3681 7.33325 13.9999ZM4.33325 11.9999V3.99992C4.33325 3.63173 4.63173 3.33325 4.99992 3.33325C5.36811 3.33325 5.66659 3.63173 5.66659 3.99992V11.9999C5.66659 12.3681 5.36811 12.6666 4.99992 12.6666C4.63173 12.6666 4.33325 12.3681 4.33325 11.9999ZM10.3333 11.9999V3.99992C10.3333 3.63173 10.6317 3.33325 10.9999 3.33325C11.3681 3.33325 11.6666 3.63173 11.6666 3.99992V11.9999C11.6666 12.3681 11.3681 12.6666 10.9999 12.6666C10.6317 12.6666 10.3333 12.3681 10.3333 11.9999ZM1.33325 9.33325V6.66659C1.33325 6.2984 1.63173 5.99992 1.99992 5.99992C2.36811 5.99992 2.66659 6.2984 2.66659 6.66659V9.33325C2.66659 9.70144 2.36811 9.99992 1.99992 9.99992C1.63173 9.99992 1.33325 9.70144 1.33325 9.33325ZM13.3333 9.33325V6.66659C13.3333 6.2984 13.6317 5.99992 13.9999 5.99992C14.3681 5.99992 14.6666 6.2984 14.6666 6.66659V9.33325C14.6666 9.70144 14.3681 9.99992 13.9999 9.99992C13.6317 9.99992 13.3333 9.70144 13.3333 9.33325Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/code-file-icon.tsx b/packages/propel/src/icons/attachments/code-file-icon.tsx
new file mode 100644
index 0000000..e4d3e2c
--- /dev/null
+++ b/packages/propel/src/icons/attachments/code-file-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function CodeFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M9.4687 1.39001C9.8056 1.46493 10.0182 1.79918 9.94331 2.1361L7.27632 14.1361C7.20136 14.473 6.86713 14.6856 6.53023 14.6107C6.19351 14.5357 5.98174 14.2014 6.05659 13.8646L8.72261 1.86462C8.79753 1.52772 9.13178 1.31514 9.4687 1.39001ZM4.22456 4.22497C4.46865 3.98105 4.86433 3.98095 5.10835 4.22497C5.35237 4.46899 5.35227 4.86467 5.10835 5.10876L2.21675 8.00036L5.10835 10.892C5.35227 11.1361 5.35237 11.5317 5.10835 11.7758C4.86433 12.0198 4.46865 12.0197 4.22456 11.7758L0.890578 8.44274C0.6465 8.19866 0.6465 7.80205 0.890578 7.55798L4.22456 4.22497ZM10.8906 4.22497C11.1347 3.98089 11.5313 3.98089 11.7753 4.22497L15.1084 7.55798C15.3524 7.80205 15.3524 8.19866 15.1084 8.44274L11.7753 11.7758C11.5313 12.0198 11.1347 12.0198 10.8906 11.7758C10.6468 11.5318 10.6469 11.136 10.8906 10.892L13.7822 8.00036L10.8906 5.10876C10.6469 4.86471 10.6468 4.46895 10.8906 4.22497Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/document-file-icon.tsx b/packages/propel/src/icons/attachments/document-file-icon.tsx
new file mode 100644
index 0000000..a026450
--- /dev/null
+++ b/packages/propel/src/icons/attachments/document-file-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function DocumentFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M2.04175 11.4666V4.533C2.04175 3.98348 2.04127 3.53353 2.07105 3.16874C2.10144 2.79669 2.1666 2.45803 2.32788 2.1414C2.57955 1.64747 2.98141 1.24561 3.47534 0.99394C3.79198 0.832661 4.13063 0.767502 4.50269 0.737104C4.86747 0.707329 5.31742 0.707807 5.86694 0.707807H8.00757C8.46696 0.707807 8.79907 0.703532 9.11792 0.780072C9.26977 0.816533 9.41679 0.868859 9.55933 0.93144C9.57519 0.93761 9.59002 0.945526 9.60523 0.952924C9.63564 0.966985 9.66715 0.978716 9.69702 0.99394L9.87671 1.09453L10.0798 1.23613C10.278 1.39031 10.4692 1.58448 10.7126 1.82792L12.8376 3.9539C13.1626 4.2788 13.4007 4.51024 13.572 4.78984C13.6272 4.87997 13.6747 4.97428 13.7185 5.07011C13.7232 5.08016 13.728 5.09005 13.7322 5.10038C13.7961 5.24493 13.8485 5.39451 13.8855 5.54863C13.962 5.86738 13.9587 6.19877 13.9587 6.658V11.4666C13.9587 12.0161 13.9592 12.4661 13.9294 12.8309C13.899 13.2029 13.8339 13.5415 13.6726 13.8582C13.4524 14.2904 13.1171 14.6519 12.7058 14.9041L12.5251 15.0047C12.2084 15.166 11.87 15.2311 11.4978 15.2615C11.133 15.2913 10.6832 15.2908 10.1335 15.2908H5.86694C5.31741 15.2908 4.86747 15.2913 4.50269 15.2615C4.13058 15.2311 3.79201 15.166 3.47534 15.0047C2.9815 14.7531 2.57957 14.352 2.32788 13.8582C2.16656 13.5415 2.10146 13.2029 2.07105 12.8309C2.04124 12.4661 2.04175 12.0161 2.04175 11.4666ZM3.29175 11.4666C3.29175 12.0367 3.29246 12.4272 3.31714 12.7293C3.34124 13.0238 3.38456 13.1797 3.44116 13.2908C3.57298 13.5495 3.78405 13.7596 4.04273 13.8914C4.15382 13.948 4.30958 13.9923 4.60425 14.0164C4.90636 14.0411 5.29672 14.0408 5.86694 14.0408H10.1335C10.7039 14.0408 11.0941 14.0411 11.3962 14.0164C11.691 13.9923 11.8466 13.948 11.9578 13.8914C12.2164 13.7597 12.4265 13.5494 12.5584 13.2908C12.615 13.1797 12.6593 13.0238 12.6834 12.7293C12.708 12.4272 12.7087 12.0367 12.7087 11.4666V6.658C12.7087 6.27204 12.7063 6.08602 12.6912 5.95781H10.4001C10.2238 5.95781 10.0534 5.95871 9.91089 5.94706C9.76121 5.93481 9.5877 5.90574 9.41382 5.81718C9.17068 5.69331 8.97316 5.49555 8.84937 5.25273C8.76065 5.07863 8.73172 4.9045 8.71948 4.75468C8.70786 4.61227 8.70874 4.44258 8.70874 4.2664V1.97441C8.58046 1.95924 8.39393 1.95781 8.00757 1.95781H5.86694C5.29669 1.95781 4.90637 1.95853 4.60425 1.9832C4.3097 2.00726 4.15382 2.05069 4.04273 2.10722C3.784 2.23905 3.57299 2.45006 3.44116 2.70878C3.38463 2.81988 3.3412 2.97576 3.31714 3.27031C3.29247 3.57243 3.29175 3.96275 3.29175 4.533V11.4666ZM9.96558 4.65312C9.96701 4.67068 9.96918 4.68335 9.97046 4.69218L9.97339 4.69609C9.98224 4.69738 9.99547 4.6995 10.0134 4.70097C10.0932 4.70746 10.2034 4.70781 10.4001 4.70781H11.824L9.95874 2.8416V4.2664C9.95874 4.46323 9.95906 4.57334 9.96558 4.65312Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/image-file-icon.tsx b/packages/propel/src/icons/attachments/image-file-icon.tsx
new file mode 100644
index 0000000..cf458b7
--- /dev/null
+++ b/packages/propel/src/icons/attachments/image-file-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ImageFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 10.2598L10.9785 7.86328C10.8392 7.72401 10.7612 7.64557 10.7002 7.59375C10.6869 7.58245 10.676 7.57561 10.6689 7.57031C10.6672 7.57021 10.6658 7.5702 10.6641 7.57031C10.657 7.57563 10.6461 7.58247 10.6328 7.59375C10.5718 7.64558 10.4938 7.72399 10.3545 7.86328L4.84277 13.373C4.9535 13.3734 5.07242 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V10.2598ZM6.375 5.66699C6.375 5.2759 6.05805 4.95818 5.66699 4.95801C5.27579 4.95801 4.95801 5.27579 4.95801 5.66699C4.95818 6.05805 5.2759 6.375 5.66699 6.375C6.05794 6.37482 6.37482 6.05794 6.375 5.66699ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.89654 12.8637 3.08734 13.0607 3.32031 13.1934C3.36428 13.122 3.40913 13.0651 3.44238 13.0254C3.53706 12.9123 3.66771 12.7815 3.80176 12.6475L9.4707 6.97852C9.59527 6.85395 9.7153 6.73407 9.82422 6.6416C9.93879 6.54434 10.0817 6.44122 10.2676 6.38086L10.3652 6.35352C10.5962 6.29805 10.8392 6.30699 11.0664 6.38086C11.2524 6.44121 11.3952 6.54433 11.5098 6.6416C11.6187 6.7341 11.7387 6.85398 11.8633 6.97852L13.375 8.49023V5.2002ZM7.625 5.66699C7.62482 6.74829 6.74829 7.62482 5.66699 7.625C4.58554 7.625 3.70818 6.7484 3.70801 5.66699C3.70801 4.58543 4.58543 3.70801 5.66699 3.70801C6.7484 3.70818 7.625 4.58554 7.625 5.66699ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H4.62109C4.43152 14.625 4.24652 14.6253 4.09961 14.6123C4.09609 14.612 4.09257 14.6107 4.08887 14.6104C4.00037 14.6064 3.91608 14.6022 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/index.ts b/packages/propel/src/icons/attachments/index.ts
new file mode 100644
index 0000000..dd8e0d8
--- /dev/null
+++ b/packages/propel/src/icons/attachments/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./audio-file-icon";
+export * from "./code-file-icon";
+export * from "./document-file-icon";
+export * from "./image-file-icon";
+export * from "./video-file-icon";
diff --git a/packages/propel/src/icons/attachments/video-file-icon.tsx b/packages/propel/src/icons/attachments/video-file-icon.tsx
new file mode 100644
index 0000000..a0613b7
--- /dev/null
+++ b/packages/propel/src/icons/attachments/video-file-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function VideoFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M8.13281 2.70801C8.68235 2.70801 9.13229 2.70753 9.49707 2.73731C9.86914 2.7677 10.2078 2.83287 10.5244 2.99414C11.0184 3.24582 11.4202 3.64768 11.6719 4.1416C11.8332 4.45823 11.8983 4.79689 11.9287 5.16895C11.9577 5.52422 11.957 5.96009 11.957 6.49023L13.3135 5.13477C13.4475 5.00076 13.5783 4.87006 13.6914 4.77539C13.7887 4.69397 13.9861 4.53702 14.2578 4.51563L14.3721 4.51367C14.6367 4.52445 14.8872 4.64455 15.0615 4.84863C15.2385 5.05589 15.2681 5.30626 15.2793 5.43262C15.2923 5.57953 15.291 5.76453 15.291 5.9541V10.0449C15.291 10.2344 15.2923 10.4195 15.2793 10.5664C15.2681 10.6927 15.2386 10.9431 15.0615 11.1504C14.8872 11.3546 14.6367 11.4745 14.3721 11.4854L14.2578 11.4834C13.9864 11.462 13.7888 11.3061 13.6914 11.2246C13.5783 11.1299 13.4475 10.9983 13.3135 10.8643L11.957 9.50781C11.957 10.0388 11.9578 10.4754 11.9287 10.8311C11.8983 11.2031 11.8332 11.5417 11.6719 11.8584C11.4202 12.3522 11.0183 12.7533 10.5244 13.0049C10.2077 13.1662 9.86919 13.2313 9.49707 13.2617C9.13229 13.2915 8.68236 13.291 8.13281 13.291H4.5332C3.98367 13.291 3.53373 13.2915 3.16895 13.2617C2.79684 13.2313 2.45827 13.1662 2.1416 13.0049C1.64776 12.7533 1.24583 12.3522 0.994141 11.8584C0.832817 11.5417 0.76772 11.2031 0.737305 10.8311C0.707503 10.4663 0.708008 10.0163 0.708008 9.4668V6.5332C0.708008 5.98368 0.707531 5.53373 0.737305 5.16895C0.767704 4.79689 0.832862 4.45824 0.994141 4.1416C1.24581 3.64767 1.64767 3.24581 2.1416 2.99414C2.45824 2.83286 2.79689 2.7677 3.16895 2.73731C3.53373 2.70753 3.98368 2.70801 4.5332 2.70801H8.13281ZM12.2168 7.99902L14.041 9.82324V6.17578L12.2168 7.99902ZM1.95801 9.4668C1.95801 10.0369 1.95872 10.4274 1.9834 10.7295C2.0075 11.024 2.05082 11.1799 2.10742 11.291C2.23924 11.5497 2.45031 11.7598 2.70898 11.8916C2.82008 11.9482 2.97584 11.9925 3.27051 12.0166C3.57262 12.0413 3.96298 12.041 4.5332 12.041H8.13281C8.70305 12.041 9.0934 12.0413 9.39551 12.0166C9.69012 11.9925 9.84589 11.9482 9.95703 11.8916C10.2157 11.7598 10.4268 11.5497 10.5586 11.291C10.6152 11.1799 10.6585 11.024 10.6826 10.7295C10.7073 10.4274 10.708 10.0369 10.708 9.4668V6.5332C10.708 5.96295 10.7073 5.57263 10.6826 5.27051C10.6586 4.97596 10.6151 4.82008 10.5586 4.70898C10.4268 4.45026 10.2157 4.23924 9.95703 4.10742C9.8459 4.05089 9.69 4.00746 9.39551 3.9834C9.09339 3.95873 8.70308 3.95801 8.13281 3.95801H4.5332C3.96295 3.95801 3.57263 3.95873 3.27051 3.9834C2.97596 4.00746 2.82008 4.05089 2.70898 4.10742C2.45026 4.23925 2.23925 4.45026 2.10742 4.70898C2.05089 4.82008 2.00746 4.97596 1.9834 5.27051C1.95873 5.57263 1.95801 5.96295 1.95801 6.5332V9.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/bar-icon.tsx b/packages/propel/src/icons/bar-icon.tsx
new file mode 100644
index 0000000..16ae988
--- /dev/null
+++ b/packages/propel/src/icons/bar-icon.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function BarIcon({ className = "", ...rest }: ISvgIcons) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        d="M0 12.5859C0 11.4814 0.89543 10.5859 2 10.5859H3.64706C4.75163 10.5859 5.64706 11.4814 5.64706 12.5859V23.9977H0V12.5859Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.17773 2C9.17773 0.89543 10.0732 0 11.1777 0H12.8248C13.9294 0 14.8248 0.895431 14.8248 2V24H9.17773V2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.3535 8.35156C18.3535 7.247 19.2489 6.35156 20.3535 6.35156H22.0006C23.1051 6.35156 24.0006 7.24699 24.0006 8.35156V23.9986H18.3535V8.35156Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/blocked-icon.tsx b/packages/propel/src/icons/blocked-icon.tsx
new file mode 100644
index 0000000..5cb2dfd
--- /dev/null
+++ b/packages/propel/src/icons/blocked-icon.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function BlockedIcon({ height = "24", width = "24", className = "", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
+        fill="#F76659"
+      />
+      <path
+        d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
+        fill="#F76659"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/blocker-icon.tsx b/packages/propel/src/icons/blocker-icon.tsx
new file mode 100644
index 0000000..16c53e0
--- /dev/null
+++ b/packages/propel/src/icons/blocker-icon.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function BlockerIcon({ height = "24", width = "24", className = "", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
+        fill="#F7AE59"
+      />
+      <path
+        d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
+        fill="#F7AE59"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/accenture-logo.tsx b/packages/propel/src/icons/brand/accenture-logo.tsx
new file mode 100644
index 0000000..50a9daf
--- /dev/null
+++ b/packages/propel/src/icons/brand/accenture-logo.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function AccentureLogo({ width = "51", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 51 16"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M29.73 2.48282V1L34.5913 2.96305V4.16785L29.73 6.13932V4.6228L32.5693 3.56966L29.73 2.48282Z"
+        fill="#A100FF"
+      />
+      <path
+        d="M2.87038 13.9915C1.84251 13.9915 1 13.4776 1 12.3318V12.2728C1 10.8827 2.20479 10.4024 3.68762 10.4024H4.37848V10.1328C4.37848 9.55992 4.13415 9.22291 3.53597 9.22291C2.98833 9.22291 2.71873 9.52622 2.69345 9.94747H1.18535C1.3033 8.67528 2.3059 8.0771 3.62864 8.0771C4.95139 8.0771 5.98768 8.65 5.98768 10.0739V13.882H4.44588V13.2164C4.14257 13.6377 3.62864 14 2.8788 14L2.87038 13.9915ZM4.3869 11.9948V11.4471H3.75502C2.97148 11.4471 2.5755 11.6578 2.5755 12.1717V12.2307C2.5755 12.6267 2.81983 12.8963 3.35904 12.8963C3.90667 12.8626 4.3869 12.5677 4.3869 11.9864V11.9948ZM9.57679 13.9915C8.00971 13.9915 6.85547 13.0226 6.85547 11.0933V11.0006C6.85547 9.07126 8.06026 8.0434 9.57679 8.0434C10.8743 8.0434 11.9358 8.70898 12.0538 10.1918H10.5457C10.453 9.64417 10.1497 9.28189 9.61049 9.28189C8.9449 9.28189 8.46467 9.82952 8.46467 10.9416V11.127C8.46467 12.2728 8.88592 12.7867 9.61049 12.7867C10.1581 12.7867 10.5457 12.3908 10.6384 11.7589H12.0875C11.9948 13.09 11.1186 13.9915 9.57679 13.9915ZM15.4997 13.9915C13.9326 13.9915 12.7783 13.0226 12.7783 11.0933V11.0006C12.7783 9.07126 13.9831 8.0434 15.4997 8.0434C16.7971 8.0434 17.8587 8.70898 17.9766 10.1918H16.4685C16.3759 9.64417 16.0726 9.28189 15.5334 9.28189C14.8678 9.28189 14.3875 9.82952 14.3875 10.9416V11.127C14.3875 12.2728 14.8088 12.7867 15.5334 12.7867C16.081 12.7867 16.4685 12.3908 16.5612 11.7589H18.0103C17.9177 13.09 17.0415 13.9915 15.4997 13.9915ZM21.4478 13.9915C19.8133 13.9915 18.7012 13.0226 18.7012 11.1186V11.0006C18.7012 9.09654 19.8807 8.0434 21.4225 8.0434C22.8464 8.0434 24.0175 8.82693 24.0175 10.731V11.4219H20.302C20.361 12.4497 20.8159 12.8457 21.4815 12.8457C22.0881 12.8457 22.4167 12.5171 22.5346 12.1212H24.0175C23.8321 13.1743 22.9306 13.9915 21.4478 13.9915ZM20.3357 10.3687H22.4504C22.4167 9.52622 22.0291 9.16394 21.3972 9.16394C20.917 9.19764 20.4621 9.46724 20.3441 10.3687H20.3357ZM24.9864 8.18662H26.5871V9.02913C26.8567 8.4815 27.4296 8.06025 28.3059 8.06025C29.3337 8.06025 30.0246 8.69213 30.0246 10.057V13.8652H28.4238V10.3013C28.4238 9.63574 28.1542 9.33244 27.5813 9.33244C27.0337 9.33244 26.5871 9.66102 26.5871 10.3856V13.8567H24.9864V8.1782V8.18662ZM32.965 6.4679V8.18662H34.0518V9.36614H32.965V12.0538C32.965 12.475 33.1503 12.6856 33.5379 12.6856C33.7822 12.6856 33.9338 12.6519 34.0855 12.593V13.8315C33.9001 13.8904 33.5716 13.9494 33.1756 13.9494C31.9371 13.9494 31.3642 13.3765 31.3642 12.2307V9.35771H30.6986V8.1782H31.3642V7.12506L32.965 6.45947V6.4679ZM40.0336 13.8652H38.4666V13.0226C38.197 13.5703 37.6493 13.9915 36.8068 13.9915C35.7789 13.9915 35.0207 13.3596 35.0207 12.0285V8.19505H36.6215V11.8178C36.6215 12.4834 36.8911 12.7867 37.4387 12.7867C37.9863 12.7867 38.4329 12.4245 38.4329 11.7336V8.19505H40.0336V13.8736V13.8652ZM41.2047 8.18662H42.8055V9.23976C43.1341 8.4815 43.6817 8.11922 44.5242 8.11922V9.68629C43.4374 9.68629 42.8055 10.0149 42.8055 10.9585V13.8904H41.2047V8.1782V8.18662ZM47.7679 13.9915C46.1334 13.9915 45.0213 13.0226 45.0213 11.1186V11.0006C45.0213 9.09654 46.2008 8.0434 47.7426 8.0434C49.1665 8.0434 50.3376 8.82693 50.3376 10.731V11.4219H46.6558C46.7148 12.4497 47.1697 12.8457 47.8353 12.8457C48.4419 12.8457 48.7705 12.5171 48.8885 12.1212H50.3713C50.127 13.1743 49.2507 13.9915 47.7763 13.9915H47.7679ZM46.6137 10.3687H48.7621C48.7284 9.52622 48.3408 9.16394 47.7089 9.16394C47.2287 9.19764 46.7738 9.46724 46.6221 10.3687H46.6137Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/dolby-logo.tsx b/packages/propel/src/icons/brand/dolby-logo.tsx
new file mode 100644
index 0000000..d037f5b
--- /dev/null
+++ b/packages/propel/src/icons/brand/dolby-logo.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function DolbyLogo({ width = "40", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 40 16"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M11.7241 13.4334H10.643C8.57552 13.4334 6.92627 11.7447 6.92627 9.71672C6.92627 7.6887 8.61498 6 10.643 6H11.7241V13.4255V13.4334Z"
+        fill={color}
+      />
+      <path
+        d="M1 6.00806H2.08109C4.14857 6.00806 5.79782 7.69676 5.79782 9.72477C5.79782 11.7528 4.10911 13.4415 2.08109 13.4415H1V6.01595V6.00806Z"
+        fill={color}
+      />
+      <path d="M26.8042 6.00781V13.4334H27.9247V6.00781H26.8042Z" fill={color} />
+      <path
+        d="M23.5051 8.28845C22.0847 8.28845 20.9326 9.44056 20.9326 10.861C20.9326 12.2814 22.0847 13.4335 23.5051 13.4335C24.9255 13.4335 26.0776 12.2814 26.0776 10.861C26.0776 9.44056 24.9255 8.28845 23.5051 8.28845ZM23.5051 12.3997C22.6529 12.4076 21.9506 11.7211 21.9348 10.8688C21.9269 10.0166 22.6134 9.3143 23.4657 9.29852C23.4815 9.29852 23.4893 9.29852 23.5051 9.29852C24.3574 9.29852 25.0518 10.0008 25.0518 10.8452C25.0518 11.6974 24.3574 12.3918 23.5051 12.3918V12.3997Z"
+        fill={color}
+      />
+      <path
+        d="M31.4678 8.2964C30.9391 8.2964 30.4261 8.45423 30 8.76198V6.01587H28.8716V13.4414H30V12.9758C31.16 13.7886 32.7619 13.5045 33.5747 12.3367C34.3875 11.1767 34.1034 9.57476 32.9355 8.76198C32.5015 8.46212 31.9886 8.2964 31.4678 8.2964ZM31.4678 12.3998C30.6155 12.3919 29.929 11.6896 29.9369 10.8295C29.9448 9.9851 30.6234 9.30647 31.4678 9.29858C32.32 9.29858 33.0144 10.0009 33.0144 10.8452C33.0144 11.6975 32.32 12.3919 31.4678 12.3919V12.3998Z"
+        fill={color}
+      />
+      <path
+        d="M16.6561 6.00781H13.981V13.4255H16.6561C18.6999 13.4255 20.3649 11.7604 20.3649 9.71664C20.3649 7.67284 18.6999 6.00781 16.6561 6.00781ZM16.6561 12.297H15.1015V7.12835H16.6561C18.0765 7.12835 19.2365 8.28835 19.2365 9.71664C19.2365 11.1449 18.0765 12.297 16.6561 12.297Z"
+        fill={color}
+      />
+      <path
+        d="M38.1592 8.29634L36.6914 11.5869L35.2237 8.29634H33.9927L36.068 12.9679C36.068 12.9679 35.563 14.1121 35.5551 14.1121C35.421 14.412 35.0659 14.5461 34.766 14.4199L34.6082 14.3488L34.1505 15.3668L34.5372 15.5404C35.271 15.8639 36.1312 15.5404 36.4547 14.7986L39.3665 8.28845H38.1355L38.1592 8.29634Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/index.ts b/packages/propel/src/icons/brand/index.ts
new file mode 100644
index 0000000..6e6ba6e
--- /dev/null
+++ b/packages/propel/src/icons/brand/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./accenture-logo";
+export * from "./dolby-logo";
+export * from "./sony-logo";
+export * from "./zerodha-logo";
+export * from "./plane-lockup";
+export * from "./plane-logo";
+export * from "./plane-wordmark";
diff --git a/packages/propel/src/icons/brand/plane-lockup.tsx b/packages/propel/src/icons/brand/plane-lockup.tsx
new file mode 100644
index 0000000..0caf46c
--- /dev/null
+++ b/packages/propel/src/icons/brand/plane-lockup.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function PlaneLockup({ width = "253", height = "53", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 253 53"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_27_76)">
+        <path
+          d="M217.077 51.4468H210.972L210.98 31.4317C210.717 27.7545 208.786 25.1545 205.03 24.6199C198.587 23.7006 194.663 27.8828 194.21 34.0258L194.218 51.4468H188.041V20.2543H192.158L194.255 26.8846H194.6C195.825 22.8701 198.684 20.4831 202.898 19.5757C210.126 18.0231 216.643 22.2724 217.079 29.8239V51.4468H217.077Z"
+          fill={color}
+        />
+        <path
+          d="M163.812 19.7315C158.03 20.9566 153.67 25.2354 153.222 31.264H159.395C159.669 28.3484 161.561 25.9969 164.267 24.9553C167.418 23.7401 172.805 23.8881 175.178 26.6005C176.774 28.4253 177.305 31.5816 175.212 33.2249C172.675 35.2173 166.39 34.6117 163.214 34.7636C158.631 34.9826 154.141 36.8429 153.183 41.7727C151.1 52.5042 165.035 54.9267 171.902 49.8963C174.095 48.2885 175.672 45.8443 176.261 43.1792H176.577L178.788 51.4508H182.61V29.964C182.517 20.3214 171.462 18.108 163.81 19.7315H163.812ZM174.847 41.2637C172.484 45.649 166.958 49.0441 162.218 47.3318C158.44 45.9686 158.268 40.4095 161.973 38.9181C165.613 37.4524 173.732 38.9694 176.368 34.949C176.275 37.0855 175.906 39.2989 174.849 41.2637H174.847Z"
+          fill={color}
+        />
+        <path
+          d="M113.082 35.5652V51.4475H106.611V9.00063H124.863C125.007 8.99274 125.141 9.06178 125.283 9.06967C133.732 9.53129 139.297 13.601 139.104 22.6025C138.928 30.7991 132.663 35.2199 124.934 35.5671H113.082V35.5652ZM113.082 14.4828V30.2941H124.088C129.595 29.8956 133.071 27.1022 132.491 21.265C131.967 15.9781 127.802 14.6544 123.107 14.4788C119.795 14.3546 116.402 14.5795 113.082 14.4808V14.4828Z"
+          fill={color}
+        />
+        <path d="M148.647 9H142.529V51.4468H148.647V9Z" fill={color} />
+        <path
+          d="M245.872 42.418C244.911 44.4953 243.138 46.1603 240.934 46.8981C238.368 47.7562 234.479 47.5431 232.083 46.2569C228.67 44.4263 227.145 40.6485 227.137 36.8984H251.891C252.194 33.6908 251.902 30.3648 250.496 27.4333C247.083 20.3177 238.859 17.7236 231.513 19.9429C222.868 22.5568 220.165 31.4162 221.462 39.6543C222.86 48.5611 230.197 52.976 238.958 52.3585C244.884 51.9423 250.271 48.1192 251.788 42.4161H245.874L245.872 42.418ZM227.208 32.4381C227.778 26.2457 233.347 23.2018 239.163 24.4269C243.361 25.3107 245.75 28.9523 245.842 33.1068H227.145C227.145 33.1068 227.19 32.6255 227.208 32.4401V32.4381Z"
+          fill={color}
+        />
+        <path
+          d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_27_76">
+          <rect width="252" height="53" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/plane-logo.tsx b/packages/propel/src/icons/brand/plane-logo.tsx
new file mode 100644
index 0000000..3b6f8f3
--- /dev/null
+++ b/packages/propel/src/icons/brand/plane-logo.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function PlaneLogo({ width = "85", height = "52", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 85 52"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/plane-wordmark.tsx b/packages/propel/src/icons/brand/plane-wordmark.tsx
new file mode 100644
index 0000000..e355458
--- /dev/null
+++ b/packages/propel/src/icons/brand/plane-wordmark.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function PlaneWordmark({ width = "146", height = "44", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 146 44"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M111.077 42.4468H104.972L104.98 22.4317C104.717 18.7545 102.786 16.1545 99.03 15.6199C92.587 14.7006 88.663 18.8828 88.21 25.0258L88.218 42.4468H82.041V11.2543H86.158L88.255 17.8846H88.6C89.825 13.8701 92.684 11.4831 96.898 10.5757C104.126 9.0231 110.643 13.2724 111.079 20.8239V42.4468H111.077Z"
+        fill={color}
+      />
+      <path
+        d="M57.812 10.7315C52.03 11.9566 47.67 16.2354 47.222 22.264H53.395C53.669 19.3484 55.561 16.9969 58.267 15.9553C61.418 14.7401 66.805 14.8881 69.178 17.6005C70.774 19.4253 71.305 22.5816 69.212 24.2249C66.675 26.2173 60.39 25.6117 57.214 25.7636C52.631 25.9826 48.141 27.8429 47.183 32.7727C45.1 43.5042 59.035 45.9267 65.902 40.8963C68.095 39.2885 69.672 36.8443 70.261 34.1792H70.577L72.788 42.4508H76.61V20.964C76.517 11.3214 65.462 9.108 57.81 10.7315H57.812ZM68.847 32.2637C66.484 36.649 60.958 40.0441 56.218 38.3318C52.44 36.9686 52.268 31.4095 55.973 29.9181C59.613 28.4524 67.732 29.9694 70.368 25.949C70.275 28.0855 69.906 30.2989 68.849 32.2637H68.847Z"
+        fill={color}
+      />
+      <path
+        d="M7.08199 26.5652V42.4475H0.610992V0.000626947H18.863C19.007 -0.00726305 19.141 0.0617763 19.283 0.0696663C27.732 0.531286 33.297 4.601 33.104 13.6025C32.928 21.7991 26.663 26.2199 18.934 26.5671H7.08199V26.5652ZM7.08199 5.4828V21.2941H18.088C23.595 20.8956 27.071 18.1022 26.491 12.265C25.967 6.9781 21.802 5.6544 17.107 5.4788C13.795 5.3546 10.402 5.5795 7.08199 5.4808V5.4828Z"
+        fill={color}
+      />
+      <path d="M42.647 0H36.529V42.4468H42.647V0Z" fill={color} />
+      <path
+        d="M139.872 33.418C138.911 35.4953 137.138 37.1603 134.934 37.8981C132.368 38.7562 128.479 38.5431 126.083 37.2569C122.67 35.4263 121.145 31.6485 121.137 27.8984H145.891C146.194 24.6908 145.902 21.3648 144.496 18.4333C141.083 11.3177 132.859 8.7236 125.513 10.9429C116.868 13.5568 114.165 22.4162 115.462 30.6543C116.86 39.5611 124.197 43.976 132.958 43.3585C138.884 42.9423 144.271 39.1192 145.788 33.4161H139.874L139.872 33.418ZM121.208 23.4381C121.778 17.2457 127.347 14.2018 133.163 15.4269C137.361 16.3107 139.75 19.9523 139.842 24.1068H121.145C121.145 24.1068 121.19 23.6255 121.208 23.4401V23.4381Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/sony-logo.tsx b/packages/propel/src/icons/brand/sony-logo.tsx
new file mode 100644
index 0000000..1f9f2a0
--- /dev/null
+++ b/packages/propel/src/icons/brand/sony-logo.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function SonyLogo({ width = "44", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 44 16"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M16.1608 13.9C14.6192 13.9 13.1911 13.4366 12.2358 12.5854C11.5454 11.9706 11.1576 11.0816 11.1671 10.1548C11.1671 9.22789 11.5549 8.34832 12.2358 7.73357C13.1248 6.92966 14.6854 6.41894 16.1608 6.41894C17.7875 6.41894 19.0927 6.82562 20.0952 7.73357C20.7762 8.35778 21.1545 9.23735 21.1451 10.1548C21.1451 11.0722 20.7573 11.9517 20.0952 12.5854C19.1683 13.4461 17.7024 13.9 16.1608 13.9V12.9164C16.9742 12.9164 17.7402 12.6327 18.2699 12.1031C18.7995 11.5734 19.0359 10.9397 19.0359 10.1453C19.0359 9.35084 18.7711 8.6888 18.2699 8.18754C17.7497 7.67682 16.9742 7.38363 16.1608 7.38363C15.3474 7.38363 14.5719 7.66736 14.0517 8.18754C13.5505 8.6888 13.2857 9.39813 13.2857 10.1453C13.2668 10.8735 13.5505 11.5734 14.0517 12.1031C14.5719 12.6232 15.3474 12.9164 16.1608 12.9164V13.9ZM4.89665 6.40948C4.07382 6.40948 3.13749 6.56081 2.34304 6.9202C1.60534 7.25122 1 7.78086 1 8.66043C1 9.12386 1.17026 9.56837 1.49182 9.89939C1.70935 10.098 2.04987 10.429 2.94835 10.6276C3.35504 10.7128 4.20623 10.8452 5.06688 10.9397C5.92754 11.0343 6.75032 11.11 7.0908 11.2046C7.36507 11.2708 7.81906 11.3653 7.81906 11.8761C7.81906 12.3868 7.33675 12.5381 7.26109 12.5759C7.17597 12.6138 6.59901 12.8691 5.56811 12.8691C4.88715 12.8502 4.20619 12.7367 3.55361 12.5192C3.16584 12.3773 2.76863 12.1976 2.39032 11.7437C2.239 11.5261 2.15387 11.2708 2.14441 11.006H1.2081V13.6257H2.24843V13.2664C2.24843 13.1812 2.31467 13.115 2.39979 13.115C2.42816 13.115 2.45655 13.115 2.47547 13.1339C2.96727 13.3515 3.47797 13.5123 3.99815 13.6257C4.5467 13.7392 4.89662 13.8244 5.57758 13.8244C6.29637 13.8338 7.00569 13.7392 7.69611 13.5217C8.15008 13.3988 8.57569 13.1907 8.954 12.8975C9.3796 12.5665 9.63498 12.0558 9.62553 11.5167C9.62553 11.0154 9.43636 10.5236 9.08643 10.1642C8.88781 9.97506 8.66081 9.82373 8.41491 9.71024C8.15009 9.58729 7.87582 9.49271 7.59209 9.42651C7.05299 9.2941 5.84238 9.13332 5.26546 9.06711C4.66016 9.00091 3.60094 8.91579 3.1848 8.78338C3.06185 8.74555 2.797 8.6226 2.797 8.31995C2.797 8.10242 2.91994 7.92272 3.14693 7.7714C3.51578 7.53495 4.27242 7.39309 5.05741 7.39309C5.81403 7.39309 6.57062 7.53495 7.2705 7.82814C7.45965 7.91326 7.63935 8.0173 7.80013 8.14025C8.06495 8.36724 8.24469 8.66988 8.32035 9.01036H9.16205V6.73105H8.22574V6.99586C8.22574 7.08098 8.14066 7.19448 7.97042 7.0999C7.54482 6.88237 6.36255 6.40948 4.90606 6.40002L4.89665 6.40948ZM25.4389 6.83508L30.0164 10.9587L29.9691 8.17808C29.9691 7.80923 29.8935 7.65791 29.5057 7.65791H28.6451V6.82562H32.5606V7.65791H31.7188C31.3216 7.65791 31.2932 7.79031 31.2838 8.17808L31.35 13.4839H30.007L24.739 8.78338V12.122C24.739 12.4814 24.7579 12.6516 25.1362 12.6516H26.0725V13.4839H22.2327V12.6516H23.1312C23.4622 12.6516 23.4528 12.33 23.4528 12.1031V8.20646C23.4528 7.9511 23.4149 7.65791 22.8947 7.65791H22.1665V6.82562H25.4389V6.83508ZM37.0151 12.6516C37.0908 12.6516 37.1665 12.6516 37.2421 12.6327C37.3272 12.6043 37.3935 12.5476 37.4218 12.4719C37.4313 12.4152 37.4408 12.349 37.4408 12.2922V10.9776C37.4408 10.9776 37.4408 10.9303 37.384 10.8641C37.3273 10.7979 34.9912 8.14025 34.8777 8.02676C34.7453 7.88489 34.5089 7.65791 34.1589 7.65791H33.3455V6.82562H37.9326V7.65791H37.384C37.2611 7.65791 37.176 7.78086 37.28 7.91326C37.28 7.91326 38.8216 9.75753 38.8405 9.77644C38.8594 9.79536 38.8689 9.80482 38.8878 9.77644C38.9067 9.74807 40.4673 7.92272 40.4767 7.90381C40.5335 7.8376 40.5145 7.73357 40.4483 7.67682C40.4199 7.65791 40.3821 7.63899 40.3443 7.64845H39.7768V6.81617H43.5316V7.64845H42.6898C42.3872 7.64845 42.2642 7.70519 42.0277 7.96055L39.4931 10.8452C39.4931 10.8452 39.4553 10.9208 39.4647 10.9681V12.2827C39.4647 12.3395 39.4647 12.4057 39.4836 12.4624C39.5214 12.5381 39.5782 12.5949 39.6633 12.6232C39.739 12.6327 39.8147 12.6421 39.8903 12.6421H40.751V13.4744H36.1923V12.6421H37.0057L37.0151 12.6516Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/zerodha-logo.tsx b/packages/propel/src/icons/brand/zerodha-logo.tsx
new file mode 100644
index 0000000..03259e4
--- /dev/null
+++ b/packages/propel/src/icons/brand/zerodha-logo.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function ZerodhaLogo({ width = "64", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 64 16"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.46267 8.1456C7.92616 8.74901 8.31095 9.42239 8.60828 10.157V6.29163H5.32886C6.11592 6.72014 6.84177 7.34104 7.46267 8.1456ZM2.7403 6.70265C2.13689 6.70265 1.55094 6.83382 1 7.06994V13.8999H8.27596C8.22349 9.91211 5.75737 6.6939 2.73155 6.6939"
+        fill={color}
+      />
+      <path
+        d="M12.9634 12.7281L17.0299 7.80457H13.0858V6.72892H18.604V7.62093L14.5375 12.5444H18.604V13.6201H12.9634V12.7281ZM20.1257 6.72892H25.2241V7.82206H21.3237V9.59733H24.778V10.6905H21.3237V12.5357H25.2765V13.6288H20.1257V6.73767V6.72892ZM26.7282 6.72892H29.7978C30.235 6.72892 30.6111 6.79014 30.9521 6.91257C31.2932 7.035 31.5643 7.20116 31.7917 7.41979C31.9753 7.61218 32.1152 7.83081 32.2114 8.07567C32.3076 8.32054 32.3601 8.60038 32.3601 8.90646V8.92395C32.3601 9.2038 32.3164 9.4574 32.2377 9.68478C32.1589 9.91215 32.0453 10.1133 31.8966 10.2882C31.7479 10.4631 31.5818 10.6118 31.3806 10.7342C31.1795 10.8566 30.9609 10.9528 30.716 11.014L32.5787 13.6201H31.1533L29.4567 11.2152H27.9351V13.6201H26.737V6.72892H26.7282ZM29.7016 10.1483C30.1388 10.1483 30.4799 10.0433 30.7422 9.83345C31.0046 9.62356 31.127 9.34372 31.127 8.98517V8.96768C31.127 8.59164 31.0046 8.30305 30.751 8.11065C30.4974 7.91826 30.1476 7.82206 29.6928 7.82206H27.9263V10.1483H29.7016ZM37.1349 13.7425C36.6015 13.7425 36.1205 13.6463 35.6745 13.4627C35.2285 13.279 34.8612 13.0254 34.5376 12.7019C34.2141 12.3783 33.9779 12.0022 33.803 11.5737C33.6281 11.1452 33.5407 10.6817 33.5407 10.2007V10.1833C33.5407 9.69352 33.6281 9.23878 33.803 8.81026C33.9779 8.38175 34.2316 8.00571 34.5551 7.6734C34.8787 7.34108 35.2547 7.08747 35.7007 6.90382C36.1467 6.72018 36.6277 6.61523 37.1612 6.61523C37.6946 6.61523 38.1756 6.71143 38.6216 6.89508C39.0589 7.07873 39.4349 7.34108 39.7585 7.65591C40.082 7.97073 40.3182 8.35552 40.4931 8.78403C40.668 9.21254 40.7554 9.67603 40.7554 10.157V10.1745C40.7554 10.6642 40.668 11.119 40.4931 11.5475C40.3182 11.976 40.0646 12.352 39.741 12.6844C39.4174 13.0079 39.0414 13.2703 38.5954 13.4539C38.1494 13.6376 37.6684 13.7425 37.1349 13.7425ZM37.1524 12.6319C37.4935 12.6319 37.8083 12.5707 38.0882 12.4395C38.368 12.3083 38.6129 12.1334 38.8227 11.9148C39.0326 11.6962 39.1813 11.4338 39.295 11.1452C39.4087 10.8566 39.4699 10.5331 39.4699 10.2007V10.1833C39.4699 9.85094 39.4087 9.52737 39.295 9.23003C39.1813 8.9327 39.0239 8.67034 38.814 8.45171C38.6041 8.23309 38.3593 8.05818 38.0707 7.92701C37.7821 7.79583 37.4672 7.72587 37.1262 7.72587C36.7851 7.72587 36.4703 7.78708 36.1905 7.91826C35.9106 8.04944 35.6658 8.22434 35.4559 8.44297C35.246 8.6616 35.0973 8.92395 34.9836 9.21254C34.87 9.50113 34.8087 9.8247 34.8087 10.157V10.1745C34.8087 10.5068 34.87 10.8304 34.9836 11.1277C35.0973 11.4251 35.2547 11.6874 35.4646 11.906C35.6745 12.1247 35.9194 12.2996 36.208 12.4308C36.4965 12.5619 36.8114 12.6319 37.1524 12.6319ZM42.2159 6.72892H44.7869C45.3291 6.72892 45.8189 6.81637 46.2736 6.99128C46.7284 7.16618 47.1131 7.4023 47.4367 7.71712C47.7603 8.03195 48.0139 8.3905 48.1888 8.80152C48.3637 9.21254 48.4511 9.66729 48.4511 10.157V10.1745C48.4511 10.6642 48.3637 11.1102 48.1888 11.53C48.0139 11.9498 47.7603 12.3171 47.4367 12.6231C47.1131 12.9292 46.7284 13.1741 46.2736 13.349C45.8189 13.5239 45.3291 13.6113 44.7869 13.6113H42.2159V6.72018V6.72892ZM44.7782 12.5357C45.1367 12.5357 45.469 12.4745 45.7664 12.3608C46.0637 12.2471 46.3173 12.0809 46.5185 11.8798C46.7196 11.6787 46.8858 11.4251 46.9995 11.1365C47.1131 10.8479 47.1744 10.5418 47.1744 10.2007V10.1833C47.1744 9.85094 47.1131 9.53611 46.9995 9.24752C46.8858 8.95893 46.7196 8.70532 46.5185 8.50418C46.3173 8.30305 46.0637 8.13689 45.7664 8.01446C45.469 7.89202 45.1455 7.83955 44.7782 7.83955H43.4227V12.5444H44.7782V12.5357ZM49.9203 6.72892H51.1184V9.59733H54.4241V6.72892H55.6222V13.6201H54.4241V10.7167H51.1184V13.6201H49.9203V6.72892ZM59.8461 6.6852H60.9654L64 13.6288H62.7232L62.0236 11.9673H58.7617L58.0533 13.6288H56.8115L59.8461 6.6852ZM61.5776 10.8916L60.3883 8.13689L59.2077 10.8916H61.5776Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/calendar-after-icon.tsx b/packages/propel/src/icons/calendar-after-icon.tsx
new file mode 100644
index 0000000..37c7c68
--- /dev/null
+++ b/packages/propel/src/icons/calendar-after-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function CalendarAfterIcon({ className = "fill-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <g clipPath="url(#clip0_3309_70901)">
+        <path
+          d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
+          fill="var(--text-color-secondary)"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3309_70901">
+          <rect width="18" height="18" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/calendar-before-icon.tsx b/packages/propel/src/icons/calendar-before-icon.tsx
new file mode 100644
index 0000000..3f9a320
--- /dev/null
+++ b/packages/propel/src/icons/calendar-before-icon.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function CalendarBeforeIcon({ className = "fill-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <g clipPath="url(#clip0_3309_70907)">
+        <path
+          d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
+          fill="var(--text-color-secondary)"
+        />
+        <g clipPath="url(#clip1_3309_70907)">
+          <path
+            d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
+            fill="var(--text-color-secondary)"
+            stroke="var(--text-color-secondary)"
+            strokeWidth="0.5"
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_3309_70907">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_3309_70907">
+          <rect width="8" height="8" fill="white" transform="translate(0 10.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/center-panel-icon.tsx b/packages/propel/src/icons/center-panel-icon.tsx
new file mode 100644
index 0000000..6278b5d
--- /dev/null
+++ b/packages/propel/src/icons/center-panel-icon.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function CenterPanelIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.1111 8.00009H8.8001C8.33334 8.00007 8.00003 8.0001 8.00012 8.88897V15.1111C8.00012 16 8.00012 16 8.8001 16H15.1111C16 16 16 16 16 15.1111V8.88897C16 8.00009 16 8.00009 15.1111 8.00009H15.1111Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/comment-fill-icon.tsx b/packages/propel/src/icons/comment-fill-icon.tsx
new file mode 100644
index 0000000..76be517
--- /dev/null
+++ b/packages/propel/src/icons/comment-fill-icon.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function CommentFillIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.848 2.771C7.21613 2.4234 9.60649 2.24927 12 2.25C14.43 2.25 16.817 2.428 19.152 2.77C21.13 3.062 22.5 4.794 22.5 6.74V12.76C22.5 14.706 21.13 16.438 19.152 16.73C17.212 17.014 15.236 17.185 13.23 17.235C13.1303 17.2369 13.0351 17.277 12.964 17.347L8.78 21.53C8.67511 21.6348 8.54153 21.7061 8.39614 21.735C8.25074 21.7638 8.10004 21.749 7.96308 21.6923C7.82611 21.6356 7.70903 21.5395 7.62661 21.4163C7.54419 21.2931 7.50013 21.1482 7.5 21V17.045C6.61329 16.9639 5.72895 16.8585 4.848 16.729C2.87 16.439 1.5 14.705 1.5 12.759V6.741C1.5 4.795 2.87 3.061 4.848 2.771Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/constants.tsx b/packages/propel/src/icons/constants.tsx
new file mode 100644
index 0000000..b668b9b
--- /dev/null
+++ b/packages/propel/src/icons/constants.tsx
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Icon } from "./icon";
+export const ActionsIconsMap = [
+  { icon: <Icon name="action.add" />, title: "AddIcon" },
+  { icon: <Icon name="action.add-workitem" />, title: "AddWorkItemIcon" },
+  { icon: <Icon name="action.add-reaction" />, title: "AddReactionIcon" },
+  { icon: <Icon name="action.check" />, title: "CheckIcon" },
+  { icon: <Icon name="action.close" />, title: "CloseIcon" },
+  { icon: <Icon name="action.copy" />, title: "CopyIcon" },
+  { icon: <Icon name="action.edit" />, title: "EditIcon" },
+  { icon: <Icon name="action.globe" />, title: "GlobeIcon" },
+  { icon: <Icon name="action.link" />, title: "LinkIcon" },
+  { icon: <Icon name="action.lock" />, title: "LockIcon" },
+  { icon: <Icon name="action.new-tab" />, title: "NewTabIcon" },
+  { icon: <Icon name="action.filter" />, title: "FilterIcon" },
+  { icon: <Icon name="action.filter-applied" />, title: "FilterAppliedIcon" },
+  { icon: <Icon name="action.search" />, title: "SearchIcon" },
+  { icon: <Icon name="action.plus" />, title: "PlusIcon" },
+  { icon: <Icon name="action.preferences" />, title: "PreferencesIcon" },
+  { icon: <Icon name="action.trash" />, title: "TrashIcon" },
+  { icon: <Icon name="action.copy-link" />, title: "CopyLinkIcon" },
+  { icon: <Icon name="action.upgrade" />, title: "UpgradeIcon" },
+];
+
+export const ArrowsIconsMap = [
+  { icon: <Icon name="arrow.chevron-down" />, title: "ChevronDownIcon" },
+  { icon: <Icon name="arrow.chevron-left" />, title: "ChevronLeftIcon" },
+  { icon: <Icon name="arrow.chevron-right" />, title: "ChevronRightIcon" },
+  { icon: <Icon name="arrow.chevron-up" />, title: "ChevronUpIcon" },
+  { icon: <Icon name="arrow.reply" />, title: "ReplyIcon" },
+];
+
+export const WorkspaceIconsMap = [
+  { icon: <Icon name="workspace.analytics" />, title: "AnalyticsIcon" },
+  { icon: <Icon name="workspace.archive" />, title: "ArchiveIcon" },
+  { icon: <Icon name="workspace.dashboard" />, title: "DashboardIcon" },
+  { icon: <Icon name="workspace.draft" />, title: "DraftIcon" },
+  { icon: <Icon name="workspace.home" />, title: "HomeIcon" },
+  { icon: <Icon name="workspace.inbox" />, title: "InboxIcon" },
+  { icon: <Icon name="workspace.multiple-sticky" />, title: "MultipleStickyIcon" },
+  { icon: <Icon name="workspace.project" />, title: "ProjectIcon" },
+  { icon: <Icon name="workspace.your-work" />, title: "YourWorkIcon" },
+];
+
+export const ProjectIconsMap = [
+  { icon: <Icon name="project.cycle" />, title: "CycleIcon" },
+  { icon: <Icon name="project.epic" />, title: "EpicIcon" },
+  { icon: <Icon name="project.intake" />, title: "IntakeIcon" },
+  { icon: <Icon name="project.module" />, title: "ModuleIcon" },
+  { icon: <Icon name="project.page" />, title: "PageIcon" },
+  { icon: <Icon name="project.view" />, title: "ViewIcon" },
+  { icon: <Icon name="project.work-items" />, title: "WorkItemsIcon" },
+];
+
+export const SubBrandIconsMap = [
+  { icon: <Icon name="sub-brand.pi-chat" />, title: "PiChatLogo" },
+  { icon: <Icon name="sub-brand.plane" />, title: "PlaneIcon" },
+  { icon: <Icon name="sub-brand.wiki" />, title: "WikiIcon" },
+];
+
+export const LayoutIconsMap = [
+  { icon: <Icon name="layout.calendar" />, title: "CalendarLayoutIcon" },
+  { icon: <Icon name="layout.card" />, title: "CardLayoutIcon" },
+  { icon: <Icon name="layout.timeline" />, title: "TimelineLayoutIcon" },
+  { icon: <Icon name="layout.grid" />, title: "GridLayoutIcon" },
+  { icon: <Icon name="layout.board" />, title: "BoardLayoutIcon" },
+  { icon: <Icon name="layout.list" />, title: "ListLayoutIcon" },
+  { icon: <Icon name="layout.sheet" />, title: "SheetLayoutIcon" },
+];
+
+export const PropertyIconsMap = [
+  { icon: <Icon name="property.boolean" />, title: "BooleanPropertyIcon" },
+  { icon: <Icon name="property.dropdown" />, title: "DropdownPropertyIcon" },
+  { icon: <Icon name="property.due-date" />, title: "DueDatePropertyIcon" },
+  { icon: <Icon name="property.duplicate" />, title: "DuplicatePropertyIcon" },
+  { icon: <Icon name="property.estimate" />, title: "EstimatePropertyIcon" },
+  { icon: <Icon name="property.hash" />, title: "HashPropertyIcon" },
+  { icon: <Icon name="property.label" />, title: "LabelPropertyIcon" },
+  { icon: <Icon name="property.members" />, title: "MembersPropertyIcon" },
+  { icon: <Icon name="property.overdue-date" />, title: "OverdueDatePropertyIcon" },
+  { icon: <Icon name="property.parent" />, title: "ParentPropertyIcon" },
+  { icon: <Icon name="property.priority" />, title: "PriorityPropertyIcon" },
+  { icon: <Icon name="property.relates-to" />, title: "RelatesToPropertyIcon" },
+  { icon: <Icon name="property.relation" />, title: "RelationPropertyIcon" },
+  { icon: <Icon name="property.scope" />, title: "ScopePropertyIcon" },
+  { icon: <Icon name="property.start-date" />, title: "StartDatePropertyIcon" },
+  { icon: <Icon name="property.state" />, title: "StatePropertyIcon" },
+  { icon: <Icon name="property.user-circle" />, title: "UserCirclePropertyIcon" },
+  { icon: <Icon name="property.user" />, title: "UserPropertyIcon" },
+  { icon: <Icon name="property.user-square" />, title: "UserSquarePropertyIcon" },
+  { icon: <Icon name="property.workflows" />, title: "WorkflowsPropertyIcon" },
+  { icon: <Icon name="property.label-filled" />, title: "LabelFilledIcon" },
+];
+
+export const MiscIconsMap = [{ icon: <Icon name="misc.info" />, title: "InfoIcon" }];
diff --git a/packages/propel/src/icons/create-icon.tsx b/packages/propel/src/icons/create-icon.tsx
new file mode 100644
index 0000000..fa9da40
--- /dev/null
+++ b/packages/propel/src/icons/create-icon.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function CreateIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M16 5H22" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M19 2V8" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx b/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx
new file mode 100644
index 0000000..f6ac49b
--- /dev/null
+++ b/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function CircleDotFullIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-1`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <circle cx="12" cy="12" r="6.25" fill="currentColor" strokeWidth="0.5" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/cycle/contrast-icon.tsx b/packages/propel/src/icons/cycle/contrast-icon.tsx
new file mode 100644
index 0000000..8392fe8
--- /dev/null
+++ b/packages/propel/src/icons/cycle/contrast-icon.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function ContrastIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6V18Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/cycle/cycle-group-icon.tsx b/packages/propel/src/icons/cycle/cycle-group-icon.tsx
new file mode 100644
index 0000000..6545d1a
--- /dev/null
+++ b/packages/propel/src/icons/cycle/cycle-group-icon.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { CircleDotDashed, Circle } from "lucide-react";
+
+import { CycleIcon } from "../project/cycle-icon";
+import { CircleDotFullIcon } from "./circle-dot-full-icon";
+import type { ICycleGroupIcon } from "./helper";
+import { CYCLE_GROUP_COLORS } from "./helper";
+
+const iconComponents = {
+  current: CycleIcon,
+  upcoming: CircleDotDashed,
+  completed: CircleDotFullIcon,
+  draft: Circle,
+};
+
+export function CycleGroupIcon({
+  className = "",
+  color,
+  cycleGroup,
+  height = "12px",
+  width = "12px",
+}: ICycleGroupIcon) {
+  const CycleIconComponent = iconComponents[cycleGroup] || CycleIcon;
+
+  return (
+    <CycleIconComponent
+      height={height}
+      width={width}
+      color={color ?? CYCLE_GROUP_COLORS[cycleGroup]}
+      className={`flex-shrink-0 ${className}`}
+    />
+  );
+}
diff --git a/packages/propel/src/icons/cycle/double-circle-icon.tsx b/packages/propel/src/icons/cycle/double-circle-icon.tsx
new file mode 100644
index 0000000..d034a1a
--- /dev/null
+++ b/packages/propel/src/icons/cycle/double-circle-icon.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function DoubleCircleIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <circle cx="12" cy="12" r="9" />
+      <circle cx="12" cy="12" r="5.625" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/cycle/helper.tsx b/packages/propel/src/icons/cycle/helper.tsx
new file mode 100644
index 0000000..d2019ff
--- /dev/null
+++ b/packages/propel/src/icons/cycle/helper.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export interface ICycleGroupIcon {
+  className?: string;
+  color?: string;
+  cycleGroup: TCycleGroups;
+  height?: string;
+  width?: string;
+}
+
+export type TCycleGroups = "current" | "upcoming" | "completed" | "draft";
+
+export const CYCLE_GROUP_COLORS: {
+  [key in TCycleGroups]: string;
+} = {
+  current: "#F59E0B",
+  upcoming: "#3F76FF",
+  completed: "#16A34A",
+  draft: "#525252",
+};
+
+export const CYCLE_GROUP_I18N_LABELS: {
+  [key in TCycleGroups]: string;
+} = {
+  current: "current",
+  upcoming: "common.upcoming",
+  completed: "common.completed",
+  draft: "project_cycles.status.draft",
+};
diff --git a/packages/propel/src/icons/cycle/index.ts b/packages/propel/src/icons/cycle/index.ts
new file mode 100644
index 0000000..3dfff06
--- /dev/null
+++ b/packages/propel/src/icons/cycle/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./circle-dot-full-icon";
+export * from "./contrast-icon";
+export * from "./cycle-group-icon";
+export * from "./double-circle-icon";
+export * from "./helper";
diff --git a/packages/propel/src/icons/default-icon.tsx b/packages/propel/src/icons/default-icon.tsx
new file mode 100644
index 0000000..0c05c0f
--- /dev/null
+++ b/packages/propel/src/icons/default-icon.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "./icon-wrapper";
+import type { ISvgIcons } from "./type";
+
+export function DefaultIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <rect x="4" y="4" width="8" height="8" rx="1" fill={color} />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/dice-icon.tsx b/packages/propel/src/icons/dice-icon.tsx
new file mode 100644
index 0000000..9d93e1b
--- /dev/null
+++ b/packages/propel/src/icons/dice-icon.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function DiceIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.77778 7H7.22222C7.09949 7 7 7.09949 7 7.22222V8.77778C7 8.90051 7.09949 9 7.22222 9H8.77778C8.90051 9 9 8.90051 9 8.77778V7.22222C9 7.09949 8.90051 7 8.77778 7Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.77778 15H7.22222C7.09949 15 7 15.0995 7 15.2222V16.7778C7 16.9005 7.09949 17 7.22222 17H8.77778C8.90051 17 9 16.9005 9 16.7778V15.2222C9 15.0995 8.90051 15 8.77778 15Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.7778 7H15.2222C15.0995 7 15 7.09949 15 7.22222V8.77778C15 8.90051 15.0995 9 15.2222 9H16.7778C16.9005 9 17 8.90051 17 8.77778V7.22222C17 7.09949 16.9005 7 16.7778 7Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.7778 15H15.2222C15.0995 15 15 15.0995 15 15.2222V16.7778C15 16.9005 15.0995 17 15.2222 17H16.7778C16.9005 17 17 16.9005 17 16.7778V15.2222C17 15.0995 16.9005 15 16.7778 15Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/display-properties.tsx b/packages/propel/src/icons/display-properties.tsx
new file mode 100644
index 0000000..8c7caf1
--- /dev/null
+++ b/packages/propel/src/icons/display-properties.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function DisplayPropertiesIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest} className={className}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.93934 0.93934C3.22064 0.658035 3.60218 0.5 4 0.5C4.39782 0.5 4.77936 0.658035 5.06066 0.93934C5.22036 1.09904 5.34033 1.29105 5.41421 1.5H11.5C11.7761 1.5 12 1.72386 12 2C12 2.27614 11.7761 2.5 11.5 2.5H5.41421C5.34033 2.70895 5.22036 2.90096 5.06066 3.06066C4.77936 3.34197 4.39782 3.5 4 3.5C3.60218 3.5 3.22064 3.34197 2.93934 3.06066C2.77964 2.90096 2.65967 2.70895 2.58579 2.5H0.5C0.223858 2.5 0 2.27614 0 2C0 1.72386 0.223858 1.5 0.5 1.5H2.58579C2.65967 1.29105 2.77964 1.09904 2.93934 0.93934ZM4 1.5C3.86739 1.5 3.74021 1.55268 3.64645 1.64645C3.55268 1.74021 3.5 1.86739 3.5 2C3.5 2.13261 3.55268 2.25979 3.64645 2.35355C3.74021 2.44732 3.86739 2.5 4 2.5C4.13261 2.5 4.25979 2.44732 4.35355 2.35355C4.44732 2.25979 4.5 2.13261 4.5 2C4.5 1.86739 4.44732 1.74021 4.35355 1.64645C4.25979 1.55268 4.13261 1.5 4 1.5ZM6.93934 4.93934C7.22064 4.65804 7.60218 4.5 8 4.5C8.39783 4.5 8.77936 4.65804 9.06066 4.93934C9.22036 5.09904 9.34033 5.29105 9.41422 5.5H11.5C11.7761 5.5 12 5.72386 12 6C12 6.27614 11.7761 6.5 11.5 6.5H9.41422C9.34033 6.70895 9.22036 6.90096 9.06066 7.06066C8.77936 7.34196 8.39783 7.5 8 7.5C7.60218 7.5 7.22064 7.34196 6.93934 7.06066C6.77964 6.90096 6.65967 6.70895 6.58579 6.5H0.5C0.223858 6.5 0 6.27614 0 6C0 5.72386 0.223858 5.5 0.5 5.5H6.58579C6.65967 5.29105 6.77964 5.09904 6.93934 4.93934ZM8 5.5C7.86739 5.5 7.74021 5.55268 7.64645 5.64645C7.55268 5.74021 7.5 5.86739 7.5 6C7.5 6.13261 7.55268 6.25979 7.64645 6.35355C7.74021 6.44732 7.86739 6.5 8 6.5C8.13261 6.5 8.25978 6.44732 8.35355 6.35355C8.44732 6.25979 8.5 6.13261 8.5 6C8.5 5.86739 8.44732 5.74022 8.35355 5.64645C8.25978 5.55268 8.13261 5.5 8 5.5ZM2.93934 8.93934C3.22064 8.65804 3.60217 8.5 4 8.5C4.39783 8.5 4.77936 8.65804 5.06066 8.93934C5.22036 9.09904 5.34033 9.29105 5.41421 9.5H11.5C11.7761 9.5 12 9.72386 12 10C12 10.2761 11.7761 10.5 11.5 10.5H5.41421C5.34033 10.709 5.22036 10.901 5.06066 11.0607C4.77936 11.342 4.39783 11.5 4 11.5C3.60217 11.5 3.22064 11.342 2.93934 11.0607C2.77964 10.901 2.65967 10.709 2.58579 10.5H0.5C0.223858 10.5 0 10.2761 0 10C0 9.72386 0.223858 9.5 0.5 9.5H2.58579C2.65967 9.29105 2.77964 9.09904 2.93934 8.93934ZM4 9.5C3.86739 9.5 3.74022 9.55268 3.64645 9.64645C3.55268 9.74022 3.5 9.86739 3.5 10C3.5 10.1326 3.55268 10.2598 3.64645 10.3536C3.74022 10.4473 3.86739 10.5 4 10.5C4.13261 10.5 4.25979 10.4473 4.35355 10.3536C4.44732 10.2598 4.5 10.1326 4.5 10C4.5 9.86739 4.44732 9.74022 4.35355 9.64645C4.25979 9.55268 4.13261 9.5 4 9.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/done-icon.tsx b/packages/propel/src/icons/done-icon.tsx
new file mode 100644
index 0000000..fe1b2fa
--- /dev/null
+++ b/packages/propel/src/icons/done-icon.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function DoneState({ width = "10", height = "11", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 10 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <circle cx="5" cy="5.5" r="4.4" stroke="#15A34A" strokeWidth="1.2" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 5.59375L3.82582 6.91957L4.26777 6.47763L2.94194 5.15181L2.5 5.59375ZM4.26777 7.36152L7.36136 4.26793L6.91942 3.82599L3.82583 6.91958L4.26777 7.36152Z"
+        fill="#15A34A"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/dropdown-icon.tsx b/packages/propel/src/icons/dropdown-icon.tsx
new file mode 100644
index 0000000..519cde3
--- /dev/null
+++ b/packages/propel/src/icons/dropdown-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function DropdownIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 7 5"
+      className={`${className} stroke-2`}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M2.77267 4.0211L0.457719 1.78653C0.162864 1.50191 0.0961218 1.17467 0.257492 0.8048C0.418861 0.434934 0.70939 0.25 1.12908 0.25H5.72716C6.14685 0.25 6.43738 0.434934 6.59875 0.8048C6.76012 1.17467 6.69338 1.50191 6.39855 1.78653L4.08357 4.0211C3.98662 4.1147 3.88435 4.18329 3.77676 4.22687C3.66918 4.27046 3.55297 4.29225 3.42813 4.29225C3.30328 4.29225 3.18706 4.27046 3.07948 4.22687C2.97191 4.18329 2.86964 4.1147 2.77267 4.0211Z" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/favorite-folder-icon.tsx b/packages/propel/src/icons/favorite-folder-icon.tsx
new file mode 100644
index 0000000..890c1e2
--- /dev/null
+++ b/packages/propel/src/icons/favorite-folder-icon.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function FavoriteFolderIcon({ className = "text-current", color = "#a3a3a3", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={color}
+      className={`${className} stroke-2`}
+      {...rest}
+    >
+      <path
+        d="M7.33325 13.3334H2.66659C2.31296 13.3334 1.97382 13.1929 1.72378 12.9429C1.47373 12.6928 1.33325 12.3537 1.33325 12.0001V3.3334C1.33325 2.97978 1.47373 2.64064 1.72378 2.39059C1.97382 2.14054 2.31296 2.00006 2.66659 2.00006H5.26659C5.48958 1.99788 5.70955 2.05166 5.90638 2.15648C6.10322 2.2613 6.27061 2.41381 6.39325 2.60006L6.93325 3.40006C7.05466 3.58442 7.21994 3.73574 7.41425 3.84047C7.60857 3.94519 7.82585 4.00003 8.04658 4.00006H13.3333C13.6869 4.00006 14.026 4.14054 14.2761 4.39059C14.5261 4.64064 14.6666 4.97978 14.6666 5.3334V6.3334"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.1373 8L13.0038 9.75535L14.9414 10.0386L13.5394 11.4041L13.8702 13.3333L12.1373 12.422L10.4044 13.3333L10.7353 11.4041L9.33325 10.0386L11.2709 9.75535L12.1373 8Z"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/full-screen-panel-icon.tsx b/packages/propel/src/icons/full-screen-panel-icon.tsx
new file mode 100644
index 0000000..61cb71e
--- /dev/null
+++ b/packages/propel/src/icons/full-screen-panel-icon.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function FullScreenPanelIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.6667 6.00001H7.20015C6.50001 5.99999 6.00005 6.00003 6.00017 7.33335C6.00027 8.4402 6.00021 13.8198 6.00018 15.8823L6.00017 16.6667C6.00017 18 6.00017 18 7.20015 18H16.6667C18 18 18 18 18 16.6667V7.33335C18 6.00001 18 6.00001 16.6667 6.00001H16.6667Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/github-icon.tsx b/packages/propel/src/icons/github-icon.tsx
new file mode 100644
index 0000000..175b207
--- /dev/null
+++ b/packages/propel/src/icons/github-icon.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function GithubIcon({ width = "24", height = "24", className, color }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_282_232)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
+          fill={color ? color : "var(--text-color-secondary)"}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_282_232">
+          <rect width={width} height={height} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/gitlab-icon.tsx b/packages/propel/src/icons/gitlab-icon.tsx
new file mode 100644
index 0000000..9d83684
--- /dev/null
+++ b/packages/propel/src/icons/gitlab-icon.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function GitlabIcon({ width = "24", height = "24", className, color }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_282_232)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
+          fill={color ? color : "var(--text-color-secondary)"}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_282_232">
+          <rect width={width} height={height} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/helpers.ts b/packages/propel/src/icons/helpers.ts
new file mode 100644
index 0000000..f717c35
--- /dev/null
+++ b/packages/propel/src/icons/helpers.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IconName } from "./registry";
+import { ICON_REGISTRY } from "./registry";
+
+/**
+ * Get the icon component by name
+ * @param name - The icon name from the registry
+ * @returns The icon component or default icon if not found
+ */
+export const getIconComponent = (name: IconName) => ICON_REGISTRY[name] || ICON_REGISTRY.default;
+
+/**
+ * Check if the icon name exists in the registry
+ * @param name - The icon name to check
+ * @returns True if the icon exists in the registry
+ */
+export const isValidIconName = (name: string): name is IconName => name in ICON_REGISTRY;
+
+/**
+ * Get all available icon names
+ * @returns Array of all icon names in the registry
+ */
+export const getIconNames = (): IconName[] => Object.keys(ICON_REGISTRY) as IconName[];
+
+/**
+ * Get icons by category
+ * @param category - The category prefix (e.g., 'workspace', 'project')
+ * @returns Array of icon names matching the category
+ */
+export const getIconsByCategory = (category: string): IconName[] =>
+  getIconNames().filter((name) => name.startsWith(`${category}.`));
diff --git a/packages/propel/src/icons/icon-wrapper.tsx b/packages/propel/src/icons/icon-wrapper.tsx
new file mode 100644
index 0000000..e7129e5
--- /dev/null
+++ b/packages/propel/src/icons/icon-wrapper.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+interface IIconWrapper extends ISvgIcons {
+  children: React.ReactNode;
+  clipPathId?: string;
+  viewBox?: string;
+}
+
+export function IconWrapper({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  children,
+  clipPathId,
+  viewBox = "0 0 16 16",
+  ...rest
+}: IIconWrapper) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      {clipPathId ? (
+        <>
+          <g clipPath={`url(#${clipPathId})`}>{children}</g>
+          <defs>
+            <clipPath id={clipPathId}>
+              <rect width="16" height="16" fill="white" />
+            </clipPath>
+          </defs>
+        </>
+      ) : (
+        children
+      )}
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/icon.tsx b/packages/propel/src/icons/icon.tsx
new file mode 100644
index 0000000..e2fe4af
--- /dev/null
+++ b/packages/propel/src/icons/icon.tsx
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { IconName } from "./registry";
+import { ICON_REGISTRY } from "./registry";
+import type { ISvgIcons } from "./type";
+
+export interface IconProps extends Omit<ISvgIcons, "ref"> {
+  name: IconName;
+}
+
+export function Icon({ name, ...props }: IconProps) {
+  const IconComponent = ICON_REGISTRY[name] || ICON_REGISTRY.default;
+  return <IconComponent {...props} />;
+}
diff --git a/packages/propel/src/icons/icons.stories.tsx b/packages/propel/src/icons/icons.stories.tsx
new file mode 100644
index 0000000..27c3c46
--- /dev/null
+++ b/packages/propel/src/icons/icons.stories.tsx
@@ -0,0 +1,226 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ActionsIconsMap,
+  ArrowsIconsMap,
+  LayoutIconsMap,
+  MiscIconsMap,
+  ProjectIconsMap,
+  PropertyIconsMap,
+  SubBrandIconsMap,
+  WorkspaceIconsMap,
+} from "./constants";
+import { Icon } from "./icon";
+import { CycleIcon } from "./project/cycle-icon";
+import { HomeIcon } from "./workspace/home-icon";
+import { ProjectIcon } from "./workspace/project-icon";
+
+const meta: Meta = {
+  title: "Icons",
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A comprehensive collection of all icons used throughout the application. Supports both direct imports and registry-based usage.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const AllIcons: Story = {
+  render: () => (
+    <div className="space-y-12">
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Sub-Brand Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
+          {SubBrandIconsMap.map((item) => (
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Workspace Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
+          {WorkspaceIconsMap.map((item) => (
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Project Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
+          {ProjectIconsMap.map((item) => (
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Layout Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
+          {LayoutIconsMap.map((item) => (
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Property Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
+          {PropertyIconsMap.map((item) => (
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Actions Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
+          {ActionsIconsMap.map((item) => (
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Arrows Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
+          {ArrowsIconsMap.map((item) => (
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-secondary">{item.icon}</div>
+              <p className="text-center text-11 text-tertiary">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg text-custom-text-100 font-semibold">Misc Icons</h3>
+        <div className="grid w-full grid-cols-12 gap-6">
+          {MiscIconsMap.map((item) => (
+            <div key={item.title} className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+              <div className="text-custom-text-200">{item.icon}</div>
+              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const RegistryUsage: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Registry-Based Usage</h3>
+        <p className="text-13 text-tertiary">
+          Use the <code className="rounded-sm bg-layer-1 px-1 py-0.5">Icon</code> component with{" "}
+          <code className="rounded-sm bg-layer-1 px-1 py-0.5">name</code> prop for dynamic icon selection.
+        </p>
+        <div className="grid w-full grid-cols-12 gap-6">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <Icon name="workspace.home" className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">workspace.home</p>
+          </div>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <Icon name="project.cycle" className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">project.cycle</p>
+          </div>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <Icon name="layout.board" className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">layout.board</p>
+          </div>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <Icon name="property.priority" className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">property.priority</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Direct Import Usage</h3>
+        <p className="text-13 text-tertiary">
+          Import icon components directly for better tree-shaking and type safety.
+        </p>
+        <div className="grid w-full grid-cols-12 gap-6">
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <HomeIcon className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">HomeIcon</p>
+          </div>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <CycleIcon className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">CycleIcon</p>
+          </div>
+          <div className="col-span-2 flex flex-col items-center justify-center gap-3 p-4">
+            <ProjectIcon className="text-secondary" />
+            <p className="text-center text-11 text-tertiary">ProjectIcon</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const IconSizes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h3 className="text-16 font-semibold text-primary">Icon Sizes</h3>
+        <p className="text-13 text-tertiary">Icons can be rendered in different sizes using width and height props.</p>
+      </div>
+
+      <div className="flex items-end gap-8">
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="12" height="12" className="text-secondary" />
+          <p className="text-11 text-tertiary">12x12</p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="16" height="16" className="text-secondary" />
+          <p className="text-11 text-tertiary">16x16 (default)</p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="24" height="24" className="text-secondary" />
+          <p className="text-11 text-tertiary">24x24</p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="32" height="32" className="text-secondary" />
+          <p className="text-11 text-tertiary">32x32</p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="48" height="48" className="text-secondary" />
+          <p className="text-11 text-tertiary">48x48</p>
+        </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/icons/in-progress-icon.tsx b/packages/propel/src/icons/in-progress-icon.tsx
new file mode 100644
index 0000000..fe90356
--- /dev/null
+++ b/packages/propel/src/icons/in-progress-icon.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function InProgressState({ width = "10", height = "11", className, color }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 12 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <circle cx="6" cy="6.5" r="4.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" />
+      <circle cx="6" cy="6.5" r="2.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" strokeDasharray="4 4" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/index.ts b/packages/propel/src/icons/index.ts
new file mode 100644
index 0000000..047df91
--- /dev/null
+++ b/packages/propel/src/icons/index.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type { ISvgIcons } from "./type";
+export type { IconName } from "./registry";
+export { ICON_REGISTRY } from "./registry";
+export * from "./actions";
+export * from "./activity-icon";
+export * from "./ai-icon";
+export * from "./arrows";
+export * from "./at-risk-icon";
+export * from "./attachments";
+export * from "./bar-icon";
+export * from "./blocked-icon";
+export * from "./blocker-icon";
+export * from "./brand";
+export * from "./calendar-after-icon";
+export * from "./calendar-before-icon";
+export * from "./center-panel-icon";
+export * from "./comment-fill-icon";
+export * from "./create-icon";
+export * from "./cycle";
+export * from "./default-icon";
+export * from "./dice-icon";
+export * from "./display-properties";
+export * from "./done-icon";
+export * from "./dropdown-icon";
+export * from "./favorite-folder-icon";
+export * from "./full-screen-panel-icon";
+export * from "./github-icon";
+export * from "./gitlab-icon";
+export * from "./helpers";
+export * from "./icon-wrapper";
+export * from "./icon";
+export * from "./in-progress-icon";
+export * from "./info-fill-icon";
+export * from "./intake";
+export * from "./layer-stack";
+export * from "./layers-icon";
+export * from "./layouts";
+export * from "./lead-icon";
+export * from "./misc";
+export * from "./module";
+export * from "./monospace-icon";
+export * from "./multiple-sticky";
+export * from "./off-track-icon";
+export * from "./on-track-icon";
+export * from "./overview-icon";
+export * from "./pending-icon";
+export * from "./photo-filter-icon";
+export * from "./planned-icon";
+export * from "./priority-icon";
+export * from "./project";
+export * from "./properties";
+export * from "./related-icon";
+export * from "./sans-serif-icon";
+export * from "./serif-icon";
+export * from "./set-as-default-icon";
+export * from "./side-panel-icon";
+export * from "./state";
+export * from "./sticky-note-icon";
+export * from "./sub-brand";
+export * from "./suspended-user";
+export * from "./teams";
+export * from "./transfer-icon";
+export * from "./tree-map-icon";
+export * from "./updates-icon";
+export * from "./user-activity-icon";
+export * from "./workspace-icon";
+export * from "./workspace";
diff --git a/packages/propel/src/icons/info-fill-icon.tsx b/packages/propel/src/icons/info-fill-icon.tsx
new file mode 100644
index 0000000..3cc649a
--- /dev/null
+++ b/packages/propel/src/icons/info-fill-icon.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function InfoFillIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.25 12C2.25 6.615 6.615 2.25 12 2.25C17.385 2.25 21.75 6.615 21.75 12C21.75 17.385 17.385 21.75 12 21.75C6.615 21.75 2.25 17.385 2.25 12ZM10.956 10.558C12.102 9.985 13.393 11.021 13.082 12.264L12.373 15.1L12.415 15.08C12.5912 15.0025 12.7905 14.9958 12.9715 15.0612C13.1526 15.1265 13.3016 15.259 13.3877 15.4312C13.4737 15.6033 13.4903 15.802 13.434 15.9861C13.3777 16.1702 13.2527 16.3255 13.085 16.42L13.045 16.442C11.898 17.015 10.607 15.979 10.918 14.736L11.628 11.9L11.586 11.92C11.4975 11.9692 11.4 11.9999 11.2994 12.0104C11.1987 12.0209 11.097 12.0109 11.0003 11.981C10.9036 11.9511 10.8139 11.902 10.7367 11.8366C10.6595 11.7711 10.5964 11.6907 10.551 11.6002C10.5057 11.5098 10.4792 11.411 10.4731 11.31C10.4669 11.209 10.4813 11.1078 10.5153 11.0124C10.5493 10.9171 10.6022 10.8297 10.6709 10.7553C10.7396 10.681 10.8226 10.6214 10.915 10.58L10.956 10.558ZM12 9C12.1989 9 12.3897 8.92098 12.5303 8.78033C12.671 8.63968 12.75 8.44891 12.75 8.25C12.75 8.05109 12.671 7.86032 12.5303 7.71967C12.3897 7.57902 12.1989 7.5 12 7.5C11.8011 7.5 11.6103 7.57902 11.4697 7.71967C11.329 7.86032 11.25 8.05109 11.25 8.25C11.25 8.44891 11.329 8.63968 11.4697 8.78033C11.6103 8.92098 11.8011 9 12 9Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/intake.tsx b/packages/propel/src/icons/intake.tsx
new file mode 100644
index 0000000..4471dd0
--- /dev/null
+++ b/packages/propel/src/icons/intake.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function Intake({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      className={`${className}`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...rest}
+    >
+      <path d="M12.1599 3.59961V9.60688L8.04358 12.0796V6.04325L12.1599 3.59961Z" />
+      <path d="M5.98547 10.8657V4.82938L10.1018 2.38574" />
+      <path d="M3.89087 9.60695V3.57059L8.00723 1.12695" />
+      <path d="M1.06909 8.77051V13.3887C1.06909 14.1814 1.71636 14.8287 2.50909 14.8287H13.4909C14.2836 14.8287 14.9309 14.1814 14.9309 13.3887V8.77051" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/layer-stack.tsx b/packages/propel/src/icons/layer-stack.tsx
new file mode 100644
index 0000000..3534c77
--- /dev/null
+++ b/packages/propel/src/icons/layer-stack.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function LayerStackIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 22H4C3.46957 22 2.96086 21.8119 2.58579 21.477C2.21071 21.1421 2 20.6879 2 20.2143V11.2857C2 10.8121 2.21071 10.3579 2.58579 10.023C2.96086 9.68814 3.46957 9.5 4 9.5H20C20.5304 9.5 21.0391 9.68814 21.4142 10.023C21.7893 10.3579 22 10.8121 22 11.2857V20.2143C22 20.6879 21.7893 21.1421 21.4142 21.477C21.0391 21.8119 20.5304 22 20 22H19Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.5 9.5V6.82143C4.5 6.53727 4.65804 6.26475 4.93934 6.06381C5.22064 5.86288 5.60218 5.75 6 5.75H18C18.3978 5.75 18.7794 5.86288 19.0607 6.06381C19.342 6.26475 19.5 6.53727 19.5 6.82143V9.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 4.5V2.71429C7 2.52485 7.10536 2.34316 7.29289 2.20921C7.48043 2.07525 7.73478 2 8 2H16C16.2652 2 16.5196 2.07525 16.7071 2.20921C16.8946 2.34316 17 2.52485 17 2.71429V4.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/layers-icon.tsx b/packages/propel/src/icons/layers-icon.tsx
new file mode 100644
index 0000000..ba54ea7
--- /dev/null
+++ b/packages/propel/src/icons/layers-icon.tsx
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function LayersIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <g clipPath="url(#clip0_7258_81938)">
+        <path
+          d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.0953 3.69606L12.1072 2.17376L2.35812 5.92381L2.35812 16.4238L4.50319 15.6961"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M21.7438 17.9461L21.7511 7.44434L12.0021 11.1944L12.0021 21.6944L21.7438 17.9461Z"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_7258_81938">
+          <rect width="24" height="24" fill="white" transform="translate(24) rotate(90)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/board-icon.tsx b/packages/propel/src/icons/layouts/board-icon.tsx
new file mode 100644
index 0000000..9bdebaf
--- /dev/null
+++ b/packages/propel/src/icons/layouts/board-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function BoardLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 5.19922C13.375 4.62897 13.3743 4.23865 13.3496 3.93652C13.3255 3.64197 13.2821 3.48609 13.2256 3.375C13.0938 3.11627 12.8827 2.90526 12.624 2.77344C12.5129 2.7169 12.357 2.67348 12.0625 2.64941C11.7604 2.62474 11.3701 2.62402 10.7998 2.62402H10.625V13.374H10.7998C11.3701 13.374 11.7604 13.3733 12.0625 13.3486C12.357 13.3246 12.5129 13.2811 12.624 13.2246C12.8827 13.0928 13.0938 12.8818 13.2256 12.623C13.2821 12.5119 13.3255 12.356 13.3496 12.0615C13.3743 11.7594 13.375 11.3691 13.375 10.7988V5.19922ZM6.625 13.374H9.375V2.62402H6.625V13.374ZM2.625 10.7988C2.625 11.3691 2.62572 11.7594 2.65039 12.0615C2.67445 12.356 2.71788 12.5119 2.77441 12.623C2.90623 12.8818 3.11725 13.0928 3.37598 13.2246C3.48707 13.2811 3.64295 13.3246 3.9375 13.3486C4.23962 13.3733 4.62994 13.374 5.2002 13.374H5.375V2.62402H5.2002C4.62994 2.62402 4.23962 2.62474 3.9375 2.64941C3.64296 2.67348 3.48707 2.71691 3.37598 2.77344C3.11725 2.90526 2.90624 3.11628 2.77441 3.375C2.71788 3.48609 2.67446 3.64198 2.65039 3.93652C2.62572 4.23865 2.625 4.62897 2.625 5.19922V10.7988ZM14.625 10.7988C14.625 11.3484 14.6255 11.7983 14.5957 12.1631C14.5653 12.5351 14.5001 12.8738 14.3389 13.1904C14.0872 13.6844 13.6854 14.0862 13.1914 14.3379C12.8748 14.4992 12.5361 14.5643 12.1641 14.5947C11.7993 14.6245 11.3493 14.624 10.7998 14.624H5.2002C4.65067 14.624 4.20072 14.6245 3.83594 14.5947C3.46388 14.5643 3.12523 14.4992 2.80859 14.3379C2.31467 14.0862 1.91281 13.6844 1.66113 13.1904C1.49987 12.8738 1.4347 12.5352 1.4043 12.1631C1.37452 11.7983 1.375 11.3484 1.375 10.7988V5.19922C1.375 4.64969 1.37452 4.19974 1.4043 3.83496C1.4347 3.4629 1.49985 3.12425 1.66113 2.80762C1.9128 2.31369 2.31466 1.91182 2.80859 1.66016C3.12523 1.49888 3.46388 1.43372 3.83594 1.40332C4.20072 1.37355 4.65067 1.37402 5.2002 1.37402H10.7998C11.3493 1.37402 11.7993 1.37355 12.1641 1.40332C12.5361 1.43372 12.8748 1.49889 13.1914 1.66016C13.6854 1.91183 14.0872 2.31369 14.3389 2.80762C14.5002 3.12425 14.5653 3.46291 14.5957 3.83496C14.6255 4.19974 14.625 4.6497 14.625 5.19922V10.7988Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/calendar-icon.tsx b/packages/propel/src/icons/layouts/calendar-icon.tsx
new file mode 100644
index 0000000..f88ae3a
--- /dev/null
+++ b/packages/propel/src/icons/layouts/calendar-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function CalendarLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/card-icon.tsx b/packages/propel/src/icons/layouts/card-icon.tsx
new file mode 100644
index 0000000..fa7c546
--- /dev/null
+++ b/packages/propel/src/icons/layouts/card-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function CardLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 11.4668C13.375 11.0832 13.375 10.8326 13.3594 10.6416C13.3519 10.5499 13.3409 10.4857 13.3301 10.4395L13.2979 10.3447C13.2469 10.2448 13.1729 10.1591 13.083 10.0938L12.9883 10.0352C12.9485 10.0149 12.8751 9.98864 12.6914 9.97363C12.5004 9.95804 12.2498 9.95801 11.8662 9.95801H4.13379C3.7502 9.95801 3.49956 9.95804 3.30859 9.97363C3.21688 9.98113 3.15268 9.99208 3.10645 10.0029L3.01172 10.0352C2.87851 10.103 2.77007 10.2114 2.70215 10.3447C2.68187 10.3845 2.65563 10.4579 2.64063 10.6416C2.62503 10.8326 2.625 11.0832 2.625 11.4668V11.8662C2.625 12.2499 2.62502 12.5004 2.64063 12.6914C2.65564 12.875 2.68188 12.9485 2.70215 12.9883C2.77008 13.1215 2.87859 13.23 3.01172 13.2979L3.10645 13.3301C3.15267 13.3409 3.21693 13.3509 3.30859 13.3584C3.49956 13.374 3.75016 13.375 4.13379 13.375H11.8662C12.2498 13.375 12.5004 13.374 12.6914 13.3584C12.8749 13.3434 12.9485 13.3181 12.9883 13.2979L13.083 13.2393C13.1729 13.1739 13.2469 13.0882 13.2979 12.9883C13.3181 12.9485 13.3444 12.875 13.3594 12.6914C13.375 12.5004 13.375 12.2499 13.375 11.8662V11.4668ZM13.375 4.13379C13.375 3.7502 13.375 3.49956 13.3594 3.30859C13.3519 3.21688 13.3409 3.15268 13.3301 3.10645L13.2979 3.01172C13.23 2.8785 13.1216 2.77007 12.9883 2.70215C12.9485 2.68187 12.8751 2.65563 12.6914 2.64063C12.5004 2.62503 12.2498 2.625 11.8662 2.625H4.13379C3.7502 2.625 3.49956 2.62503 3.30859 2.64063C3.12491 2.65563 3.05153 2.68186 3.01172 2.70215C2.87844 2.77005 2.77005 2.87844 2.70215 3.01172C2.68186 3.05153 2.65563 3.12491 2.64063 3.30859C2.62503 3.49956 2.625 3.7502 2.625 4.13379V4.5332C2.625 4.91688 2.62502 5.16742 2.64063 5.3584C2.65564 5.54194 2.68187 5.61548 2.70215 5.65527C2.77006 5.78843 2.87853 5.89698 3.01172 5.96484C3.05156 5.98512 3.12509 6.0104 3.30859 6.02539C3.49956 6.04099 3.75016 6.04199 4.13379 6.04199H11.8662C12.2498 6.04199 12.5004 6.04099 12.6914 6.02539C12.8749 6.0104 12.9485 5.98511 12.9883 5.96484C13.1215 5.89696 13.23 5.78839 13.2979 5.65527C13.3181 5.61548 13.3444 5.54194 13.3594 5.3584C13.375 5.16742 13.375 4.91689 13.375 4.5332V4.13379ZM14.625 11.8662C14.625 12.2293 14.6252 12.5393 14.6045 12.793C14.5832 13.054 14.5362 13.3103 14.4111 13.5557C14.2234 13.924 13.924 14.2235 13.5557 14.4111C13.3103 14.5362 13.0539 14.5832 12.793 14.6045C12.5393 14.6252 12.2291 14.625 11.8662 14.625H4.13379C3.77089 14.625 3.46066 14.6252 3.20703 14.6045C2.94605 14.5832 2.68973 14.5362 2.44434 14.4111C2.07591 14.2235 1.77661 13.9239 1.58887 13.5557C1.46382 13.3103 1.41683 13.054 1.39551 12.793C1.37478 12.5393 1.375 12.2293 1.375 11.8662V11.4668C1.375 11.1039 1.37481 10.7937 1.39551 10.54C1.41683 10.2791 1.46382 10.0227 1.58887 9.77734C1.77657 9.40901 2.07589 9.10961 2.44434 8.92188C2.68974 8.79683 2.94604 8.74984 3.20703 8.72852C3.46067 8.70781 3.77088 8.70801 4.13379 8.70801H11.8662C12.2291 8.70801 12.5393 8.70781 12.793 8.72852C13.054 8.74984 13.3103 8.79682 13.5557 8.92188C13.9241 9.10958 14.2234 9.40896 14.4111 9.77734C14.5362 10.0227 14.5832 10.2791 14.6045 10.54C14.6252 10.7937 14.625 11.1039 14.625 11.4668V11.8662ZM14.625 4.5332C14.625 4.89626 14.6252 5.20627 14.6045 5.45996C14.5832 5.72094 14.5362 5.97726 14.4111 6.22266C14.2234 6.59102 13.924 6.89046 13.5557 7.07812C13.3103 7.20316 13.0539 7.25016 12.793 7.27148C12.5393 7.29218 12.2291 7.29199 11.8662 7.29199H4.13379C3.77089 7.29199 3.46066 7.29218 3.20703 7.27148C2.94605 7.25016 2.68973 7.20316 2.44434 7.07812C2.07597 6.89044 1.77663 6.59098 1.58887 6.22266C1.46383 5.97726 1.41683 5.72094 1.39551 5.45996C1.37478 5.20627 1.375 4.89626 1.375 4.5332V4.13379C1.375 3.77088 1.37481 3.46067 1.39551 3.20703C1.41683 2.94604 1.46383 2.68974 1.58887 2.44434C1.7766 2.07594 2.07594 1.7766 2.44434 1.58887C2.68974 1.46383 2.94604 1.41683 3.20703 1.39551C3.46067 1.37481 3.77088 1.375 4.13379 1.375H11.8662C12.2291 1.375 12.5393 1.37481 12.793 1.39551C13.054 1.41683 13.3103 1.46382 13.5557 1.58887C13.924 1.77658 14.2234 2.0759 14.4111 2.44434C14.5362 2.68974 14.5832 2.94604 14.6045 3.20703C14.6252 3.46067 14.625 3.77088 14.625 4.13379V4.5332Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/grid-icon.tsx b/packages/propel/src/icons/layouts/grid-icon.tsx
new file mode 100644
index 0000000..af7af36
--- /dev/null
+++ b/packages/propel/src/icons/layouts/grid-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function GridLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M6.0342 10.0127C6.0327 9.99439 6.02964 9.98153 6.02834 9.97267C6.02717 9.97146 6.02672 9.96984 6.02541 9.96877C6.01667 9.96752 6.0042 9.96624 5.98732 9.96486C5.90751 9.95834 5.79662 9.95802 5.59963 9.95802H3.06642C2.86959 9.95802 2.75948 9.95834 2.6797 9.96486C2.66216 9.96629 2.64947 9.96847 2.64064 9.96974C2.63917 9.97102 2.638 9.97219 2.63673 9.97365C2.63546 9.98248 2.63328 9.99518 2.63185 10.0127C2.62534 10.0925 2.62502 10.2026 2.62502 10.3994V12.9326C2.62502 13.1296 2.62533 13.2405 2.63185 13.3203C2.63324 13.3372 2.63451 13.3497 2.63576 13.3584C2.63683 13.3597 2.63844 13.3602 2.63966 13.3613C2.64851 13.3627 2.66138 13.3657 2.6797 13.3672C2.75948 13.3737 2.86959 13.375 3.06642 13.375H5.59963C5.79662 13.375 5.90751 13.3737 5.98732 13.3672C6.00495 13.3658 6.0176 13.3636 6.02638 13.3623C6.02747 13.3613 6.02834 13.3605 6.02931 13.3594C6.03059 13.3506 6.03275 13.338 6.0342 13.3203C6.04072 13.2405 6.04201 13.1296 6.04201 12.9326V10.3994C6.04201 10.2026 6.04071 10.0925 6.0342 10.0127ZM13.3682 10.0127C13.3667 9.99442 13.3636 9.98153 13.3623 9.97267C13.3613 9.97161 13.3605 9.9707 13.3594 9.96974C13.3506 9.96847 13.3378 9.96628 13.3203 9.96486C13.2405 9.95835 13.1304 9.95802 12.9336 9.95802H10.4004C10.2034 9.95802 10.0925 9.95834 10.0127 9.96486C9.99519 9.9663 9.98241 9.96749 9.97365 9.96877C9.97239 9.96985 9.97184 9.97145 9.97072 9.97267C9.96942 9.98152 9.96733 9.99449 9.96584 10.0127C9.95932 10.0925 9.959 10.2026 9.959 10.3994V12.9326C9.959 13.1296 9.95932 13.2405 9.96584 13.3203C9.96728 13.3379 9.96944 13.3506 9.97072 13.3594C9.97169 13.3605 9.97257 13.3613 9.97365 13.3623C9.98241 13.3636 9.99506 13.3658 10.0127 13.3672C10.0925 13.3737 10.2034 13.375 10.4004 13.375H12.9336C13.1305 13.375 13.2405 13.3737 13.3203 13.3672C13.3386 13.3657 13.3515 13.3626 13.3604 13.3613C13.3612 13.3605 13.3625 13.3603 13.3633 13.3594C13.3646 13.3506 13.3667 13.3379 13.3682 13.3203C13.3747 13.2405 13.375 13.1296 13.375 12.9326V10.3994C13.375 10.2026 13.3747 10.0925 13.3682 10.0127ZM6.0342 2.6797C6.0327 2.66138 6.02964 2.64852 6.02834 2.63966C6.02717 2.63844 6.02671 2.63683 6.02541 2.63576C6.01666 2.63451 6.00419 2.63324 5.98732 2.63185C5.90751 2.62533 5.79662 2.62502 5.59963 2.62502H3.06642C2.8696 2.62502 2.75948 2.62533 2.6797 2.63185C2.66216 2.63329 2.64947 2.63546 2.64064 2.63673C2.63918 2.63801 2.63801 2.63918 2.63673 2.64064C2.63546 2.64947 2.63329 2.66216 2.63185 2.6797C2.62533 2.75948 2.62502 2.8696 2.62502 3.06642V5.59963C2.62502 5.79662 2.62533 5.90751 2.63185 5.98732C2.63324 6.00419 2.63451 6.01666 2.63576 6.02541C2.63683 6.02671 2.63844 6.02717 2.63966 6.02834C2.64852 6.02964 2.66138 6.0327 2.6797 6.0342C2.75948 6.04071 2.86959 6.04201 3.06642 6.04201H5.59963C5.79662 6.04201 5.90751 6.04072 5.98732 6.0342C6.00494 6.03275 6.0176 6.03059 6.02638 6.02931C6.02747 6.02834 6.02834 6.02747 6.02931 6.02638C6.03059 6.0176 6.03275 6.00494 6.0342 5.98732C6.04072 5.90751 6.04201 5.79662 6.04201 5.59963V3.06642C6.04201 2.86959 6.04071 2.75948 6.0342 2.6797ZM13.3682 2.6797C13.3667 2.66217 13.3646 2.64947 13.3633 2.64064C13.362 2.63917 13.3608 2.638 13.3594 2.63673C13.3506 2.63546 13.3379 2.63329 13.3203 2.63185C13.2406 2.62534 13.1304 2.62502 12.9336 2.62502H10.4004C10.2034 2.62502 10.0925 2.62533 10.0127 2.63185C9.99523 2.63328 9.98244 2.63449 9.97365 2.63576C9.97221 2.63698 9.97101 2.63825 9.96974 2.63966C9.96844 2.64852 9.96634 2.66154 9.96486 2.6797C9.95834 2.75948 9.95802 2.86961 9.95802 3.06642V5.59963C9.95802 5.79662 9.95834 5.90751 9.96486 5.98732C9.96625 6.00427 9.96849 6.01666 9.96974 6.02541C9.971 6.02691 9.97221 6.02801 9.97365 6.02931C9.98244 6.03059 9.9951 6.03275 10.0127 6.0342C10.0925 6.04072 10.2034 6.04201 10.4004 6.04201H12.9336C13.1304 6.04201 13.2406 6.04071 13.3203 6.0342C13.338 6.03275 13.3506 6.02962 13.3594 6.02834C13.3607 6.02717 13.3622 6.02673 13.3633 6.02541C13.3645 6.01666 13.3668 6.00428 13.3682 5.98732C13.3747 5.90751 13.375 5.79662 13.375 5.59963V3.06642C13.375 2.8696 13.3747 2.75948 13.3682 2.6797ZM7.29201 12.9326C7.29201 13.109 7.29193 13.2794 7.28029 13.4219C7.26806 13.5715 7.23984 13.7451 7.15138 13.919C7.02758 14.162 6.82957 14.3596 6.58693 14.4834C6.41294 14.572 6.23862 14.6011 6.08888 14.6133C5.94636 14.6249 5.77599 14.625 5.59963 14.625H3.06642C2.89023 14.625 2.72055 14.6249 2.57814 14.6133C2.42832 14.6011 2.2542 14.5721 2.08009 14.4834C1.83733 14.3596 1.63949 14.1621 1.51564 13.919C1.42712 13.745 1.39799 13.5716 1.38576 13.4219C1.37411 13.2794 1.37502 13.109 1.37502 12.9326V10.3994C1.37502 10.2232 1.37414 10.0535 1.38576 9.91115C1.398 9.76133 1.42693 9.5872 1.51564 9.4131L1.56545 9.32423C1.6896 9.12181 1.86756 8.95697 2.08009 8.84865C2.25419 8.75993 2.42832 8.73101 2.57814 8.71877C2.72054 8.70715 2.89025 8.70802 3.06642 8.70802H5.59963C5.776 8.70802 5.94636 8.70712 6.08888 8.71877C6.23856 8.731 6.41203 8.76013 6.58595 8.84865C6.82872 8.97245 7.02753 9.17 7.15138 9.4131C7.24007 9.58718 7.26805 9.76135 7.28029 9.91115C7.29191 10.0536 7.29201 10.2232 7.29201 10.3994V12.9326ZM14.625 12.9326C14.625 13.109 14.6259 13.2794 14.6143 13.4219C14.602 13.5717 14.5731 13.7459 14.4844 13.9199C14.3606 14.1628 14.1628 14.3596 13.9199 14.4834C13.7458 14.5721 13.5717 14.6011 13.4219 14.6133C13.2795 14.6249 13.1098 14.625 12.9336 14.625H10.4004C10.224 14.625 10.0537 14.6249 9.91115 14.6133C9.76141 14.601 9.58805 14.5721 9.41408 14.4834C9.1712 14.3597 8.97349 14.1628 8.84963 13.9199C8.76093 13.7459 8.73199 13.5717 8.71974 13.4219C8.7081 13.2794 8.709 13.109 8.709 12.9326V10.3994C8.709 10.2232 8.70812 10.0536 8.71974 9.91115C8.73198 9.76132 8.76091 9.5872 8.84963 9.4131L8.89943 9.32423C9.02353 9.12198 9.20147 8.95699 9.41408 8.84865L9.54396 8.79298C9.6732 8.74695 9.79884 8.72795 9.91115 8.71877C10.0537 8.70712 10.224 8.70802 10.4004 8.70802H12.9336C13.1098 8.70802 13.2795 8.70716 13.4219 8.71877C13.5717 8.73101 13.7459 8.75996 13.9199 8.84865C14.163 8.97248 14.3605 9.1701 14.4844 9.4131C14.5731 9.5872 14.602 9.76132 14.6143 9.91115C14.6259 10.0535 14.625 10.2232 14.625 10.3994V12.9326ZM7.29201 5.59963C7.29201 5.776 7.29193 5.94636 7.28029 6.08888C7.26806 6.23851 7.23984 6.4121 7.15138 6.58595C7.02754 6.82898 6.82898 7.02657 6.58595 7.15041C6.4121 7.23886 6.23851 7.26806 6.08888 7.28029C5.94636 7.29193 5.776 7.29201 5.59963 7.29201H3.06642C2.89023 7.29201 2.72055 7.29191 2.57814 7.28029C2.42834 7.26805 2.25418 7.24007 2.08009 7.15138C1.83722 7.02753 1.63942 6.82887 1.51564 6.58595C1.42712 6.41203 1.39799 6.23856 1.38576 6.08888C1.37411 5.94636 1.37502 5.776 1.37502 5.59963V3.06642C1.37502 2.89025 1.37414 2.72054 1.38576 2.57814C1.398 2.42832 1.42694 2.25419 1.51564 2.08009L1.56545 1.99123C1.68954 1.78891 1.86746 1.62401 2.08009 1.51564L2.20998 1.45998C2.33946 1.4138 2.46565 1.39495 2.57814 1.38576C2.72054 1.37414 2.89025 1.37502 3.06642 1.37502H5.59963C5.776 1.37502 5.94636 1.37411 6.08888 1.38576C6.20119 1.39494 6.32682 1.41396 6.45607 1.45998L6.58595 1.51564L6.6758 1.56545C6.87792 1.68948 7.04208 1.86766 7.15041 2.08009C7.23909 2.25418 7.26805 2.42834 7.28029 2.57814C7.29191 2.72055 7.29201 2.89023 7.29201 3.06642V5.59963ZM14.625 5.59963C14.625 5.77599 14.6249 5.94636 14.6133 6.08888C14.6011 6.23853 14.5729 6.41207 14.4844 6.58595C14.3606 6.82872 14.163 7.02753 13.9199 7.15138C13.7458 7.24009 13.5717 7.26805 13.4219 7.28029C13.2795 7.29191 13.1098 7.29201 12.9336 7.29201H10.4004C10.224 7.29201 10.0537 7.29193 9.91115 7.28029C9.76134 7.26805 9.58718 7.24009 9.4131 7.15138C9.17005 7.02751 8.97242 6.82968 8.84865 6.58693C8.76018 6.41306 8.73198 6.23852 8.71974 6.08888C8.7081 5.94636 8.70802 5.776 8.70802 5.59963V3.06642C8.70802 2.89023 8.70812 2.72056 8.71974 2.57814C8.73198 2.42833 8.75995 2.25418 8.84865 2.08009C8.97239 1.83731 9.17005 1.63955 9.4131 1.51564L9.54396 1.45998C9.67321 1.41398 9.79885 1.39493 9.91115 1.38576C10.0537 1.37412 10.224 1.37502 10.4004 1.37502H12.9336C13.1098 1.37502 13.2795 1.37414 13.4219 1.38576C13.5341 1.39493 13.6599 1.41401 13.7891 1.45998L13.9199 1.51564L14.0088 1.56545C14.2112 1.6896 14.3761 1.86758 14.4844 2.08009C14.5731 2.2542 14.6011 2.42832 14.6133 2.57814C14.6249 2.72056 14.625 2.89022 14.625 3.06642V5.59963Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/index.ts b/packages/propel/src/icons/layouts/index.ts
new file mode 100644
index 0000000..4bf2f74
--- /dev/null
+++ b/packages/propel/src/icons/layouts/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./calendar-icon";
+export * from "./card-icon";
+export * from "./timeline-icon";
+export * from "./grid-icon";
+export * from "./board-icon";
+export * from "./list-icon";
+export * from "./sheet-icon";
diff --git a/packages/propel/src/icons/layouts/list-icon.tsx b/packages/propel/src/icons/layouts/list-icon.tsx
new file mode 100644
index 0000000..30c4467
--- /dev/null
+++ b/packages/propel/src/icons/layouts/list-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ListLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14 11.375C14.3452 11.375 14.625 11.6548 14.625 12C14.625 12.3452 14.3452 12.625 14 12.625H2C1.65482 12.625 1.375 12.3452 1.375 12C1.375 11.6548 1.65482 11.375 2 11.375H14ZM14 7.375C14.3452 7.375 14.625 7.65482 14.625 8C14.625 8.34518 14.3452 8.625 14 8.625H2C1.65482 8.625 1.375 8.34518 1.375 8C1.375 7.65482 1.65482 7.375 2 7.375H14ZM14 3.375C14.3452 3.375 14.625 3.65482 14.625 4C14.625 4.34518 14.3452 4.625 14 4.625H2C1.65482 4.625 1.375 4.34518 1.375 4C1.375 3.65482 1.65482 3.375 2 3.375H14Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/sheet-icon.tsx b/packages/propel/src/icons/layouts/sheet-icon.tsx
new file mode 100644
index 0000000..de1f194
--- /dev/null
+++ b/packages/propel/src/icons/layouts/sheet-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function SheetLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 6.625H6.625V13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V6.625ZM2.625 10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H5.375V6.625H2.625V10.7998ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V5.375H13.375V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/timeline-icon.tsx b/packages/propel/src/icons/layouts/timeline-icon.tsx
new file mode 100644
index 0000000..5a3e744
--- /dev/null
+++ b/packages/propel/src/icons/layouts/timeline-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function TimelineLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.5415 11.333C13.5415 11.0142 13.5416 10.8062 13.5308 10.6465C13.5203 10.4927 13.5017 10.4293 13.4878 10.3955C13.4159 10.2221 13.2784 10.0837 13.105 10.0117C13.0713 9.99777 13.008 9.98025 12.854 9.96973C12.6943 9.95884 12.4857 9.95802 12.1665 9.95802H6.8335C6.51462 9.95802 6.30666 9.95887 6.14698 9.96973C5.99329 9.98022 5.92974 9.9978 5.896 10.0117C5.72244 10.0836 5.58411 10.222 5.51222 10.3955C5.49828 10.4293 5.48071 10.4928 5.47022 10.6465C5.45935 10.8062 5.4585 11.0141 5.4585 11.333C5.4585 11.6519 5.45935 11.8599 5.47022 12.0195C5.48071 12.1732 5.49828 12.2368 5.51222 12.2705C5.58411 12.4441 5.72244 12.5824 5.896 12.6543C5.92974 12.6682 5.99329 12.6858 6.14698 12.6963C6.30666 12.7072 6.51462 12.708 6.8335 12.708H12.1665C12.4857 12.708 12.6943 12.7072 12.854 12.6963C13.008 12.6858 13.0713 12.6683 13.105 12.6543C13.2784 12.5824 13.4159 12.444 13.4878 12.2705C13.5017 12.2368 13.5203 12.1733 13.5308 12.0195C13.5416 11.8599 13.5415 11.6519 13.5415 11.333ZM10.5415 4.667C10.5415 4.34815 10.5416 4.14015 10.5308 3.98048C10.5203 3.82667 10.5017 3.76324 10.4878 3.7295C10.4159 3.55605 10.2784 3.41765 10.105 3.34571C10.0713 3.33176 10.008 3.31424 9.85401 3.30372C9.69428 3.29282 9.4857 3.292 9.16651 3.292H3.8335C3.51462 3.292 3.30666 3.29285 3.14698 3.30372C2.99329 3.31421 2.92974 3.33178 2.896 3.34571C2.72244 3.4176 2.58411 3.55594 2.51222 3.7295C2.49828 3.76324 2.48071 3.82678 2.47022 3.98048C2.45935 4.14015 2.4585 4.34811 2.4585 4.667C2.4585 4.98589 2.45935 5.19385 2.47022 5.35352C2.48071 5.50722 2.49828 5.57076 2.51222 5.6045C2.58411 5.77806 2.72244 5.9164 2.896 5.98829C2.92974 6.00222 2.99329 6.0198 3.14698 6.03028C3.30666 6.04115 3.51462 6.042 3.8335 6.042H9.16651C9.4857 6.042 9.69428 6.04118 9.85401 6.03028C10.008 6.01976 10.0713 6.00224 10.105 5.98829C10.2784 5.91635 10.4159 5.77795 10.4878 5.6045C10.5017 5.57076 10.5203 5.50733 10.5308 5.35352C10.5416 5.19385 10.5415 4.98585 10.5415 4.667ZM14.7915 11.333C14.7915 11.6351 14.7923 11.8933 14.7778 12.1055C14.763 12.3231 14.7305 12.5378 14.6431 12.749C14.4443 13.2289 14.0623 13.6098 13.5825 13.8086C13.3712 13.8961 13.1567 13.9295 12.939 13.9443C12.7268 13.9588 12.4686 13.958 12.1665 13.958H6.8335C6.53143 13.958 6.27319 13.9588 6.06104 13.9443C5.8434 13.9295 5.62874 13.8961 5.41749 13.8086C4.93769 13.6098 4.55668 13.2288 4.35792 12.749C4.27042 12.5378 4.23704 12.3231 4.22218 12.1055C4.2077 11.8933 4.2085 11.6351 4.2085 11.333C4.2085 11.0309 4.2077 10.7727 4.22218 10.5606C4.23704 10.3429 4.27042 10.1283 4.35792 9.917C4.55668 9.4372 4.93769 9.05619 5.41749 8.85743C5.62874 8.76993 5.8434 8.73656 6.06104 8.72169C6.27319 8.70721 6.53143 8.70802 6.8335 8.70802H12.1665C12.4686 8.70802 12.7268 8.70721 12.939 8.72169C13.1567 8.73654 13.3712 8.76996 13.5825 8.85743C14.0623 9.05618 14.4443 9.43715 14.6431 9.917C14.7305 10.1282 14.763 10.343 14.7778 10.5606C14.7923 10.7727 14.7915 11.0309 14.7915 11.333ZM11.7915 4.667C11.7915 4.96908 11.7923 5.22732 11.7778 5.43946C11.763 5.65705 11.7305 5.87183 11.6431 6.08302C11.4443 6.56287 11.0623 6.94384 10.5825 7.14259C10.3712 7.23005 10.1567 7.26347 9.93897 7.27833C9.72682 7.2928 9.46859 7.292 9.16651 7.292H3.8335C3.53143 7.292 3.27319 7.2928 3.06104 7.27833C2.8434 7.26346 2.62874 7.23009 2.41749 7.14259C1.93769 6.94383 1.55668 6.56281 1.35792 6.08302C1.27042 5.87177 1.23704 5.65711 1.22218 5.43946C1.2077 5.22731 1.2085 4.96908 1.2085 4.667C1.2085 4.36492 1.2077 4.10669 1.22218 3.89454C1.23704 3.67689 1.27042 3.46224 1.35792 3.25098C1.55668 2.77119 1.93769 2.39017 2.41749 2.19141C2.62874 2.10391 2.8434 2.07054 3.06104 2.05567C3.27319 2.0412 3.53143 2.042 3.8335 2.042H9.16651C9.46859 2.042 9.72682 2.0412 9.93897 2.05567C10.1567 2.07053 10.3712 2.10395 10.5825 2.19141C11.0623 2.39017 11.4443 2.77113 11.6431 3.25098C11.7305 3.46218 11.763 3.67695 11.7778 3.89454C11.7923 4.10668 11.7915 4.36492 11.7915 4.667Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/lead-icon.tsx b/packages/propel/src/icons/lead-icon.tsx
new file mode 100644
index 0000000..b7251d7
--- /dev/null
+++ b/packages/propel/src/icons/lead-icon.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function LeadIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg className={className} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        d="M0.571533 9C0.571533 4.02944 4.60097 0 9.57153 0C14.5421 0 18.5715 4.02944 18.5715 9C18.5715 13.9706 14.5421 18 9.57153 18C4.60097 18 0.571533 13.9706 0.571533 9Z"
+        fill="#3372FF"
+      />
+      <g clipPath="url(#clip0_8992_2377)">
+        <circle cx="9.57153" cy="6.5" r="2.5" fill="#F5F5FF" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.94653 9.625C6.53029 9.625 4.57153 11.5838 4.57153 14H9.57153H14.5715C14.5715 11.5838 12.6128 9.625 10.1965 9.625H9.82153L10.8215 13.0278L9.57153 14L8.32153 13.0278L9.32153 9.625H8.94653Z"
+          fill="#F5F5FF"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_8992_2377">
+          <rect width="10" height="10" fill="white" transform="translate(4.57153 4)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/misc/check-circle-filled-icon.tsx b/packages/propel/src/icons/misc/check-circle-filled-icon.tsx
new file mode 100644
index 0000000..c0227cb
--- /dev/null
+++ b/packages/propel/src/icons/misc/check-circle-filled-icon.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const CheckCircleFilledIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99984 0.666992C3.94975 0.666992 0.666504 3.95024 0.666504 8.00033C0.666504 12.0504 3.94975 15.3337 7.99984 15.3337C12.0499 15.3337 15.3332 12.0504 15.3332 8.00033C15.3332 3.95024 12.0499 0.666992 7.99984 0.666992ZM11.4712 6.47173C11.7316 6.21138 11.7316 5.78927 11.4712 5.52892C11.2109 5.26857 10.7888 5.26857 10.5284 5.52892L6.99984 9.05752L5.47124 7.52892C5.21089 7.26857 4.78878 7.26857 4.52843 7.52892C4.26808 7.78927 4.26808 8.21138 4.52843 8.47173L6.52843 10.4717C6.78878 10.7321 7.21089 10.7321 7.47124 10.4717L11.4712 6.47173Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/misc/close-circle-filled-icon.tsx b/packages/propel/src/icons/misc/close-circle-filled-icon.tsx
new file mode 100644
index 0000000..2b927d6
--- /dev/null
+++ b/packages/propel/src/icons/misc/close-circle-filled-icon.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const CloseCircleFilledIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.99984 0.666992C3.94975 0.666992 0.666504 3.95024 0.666504 8.00033C0.666504 12.0504 3.94975 15.3337 7.99984 15.3337C12.0499 15.3337 15.3332 12.0504 15.3332 8.00033C15.3332 3.95024 12.0499 0.666992 7.99984 0.666992ZM10.4712 5.52892C10.7316 5.78927 10.7316 6.21138 10.4712 6.47173L8.94265 8.00033L10.4712 9.52892C10.7316 9.78927 10.7316 10.2114 10.4712 10.4717C10.2109 10.7321 9.78878 10.7321 9.52843 10.4717L7.99984 8.94313L6.47124 10.4717C6.21089 10.7321 5.78878 10.7321 5.52843 10.4717C5.26808 10.2114 5.26808 9.78927 5.52843 9.52892L7.05703 8.00033L5.52843 6.47173C5.26808 6.21138 5.26808 5.78927 5.52843 5.52892C5.78878 5.26857 6.21089 5.26857 6.47124 5.52892L7.99984 7.05752L9.52843 5.52892C9.78878 5.26857 10.2109 5.26857 10.4712 5.52892Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/misc/index.ts b/packages/propel/src/icons/misc/index.ts
new file mode 100644
index 0000000..34716ec
--- /dev/null
+++ b/packages/propel/src/icons/misc/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./check-circle-filled-icon";
+export * from "./close-circle-filled-icon";
+export * from "./info-icon";
diff --git a/packages/propel/src/icons/misc/info-icon.tsx b/packages/propel/src/icons/misc/info-icon.tsx
new file mode 100644
index 0000000..2e007d3
--- /dev/null
+++ b/packages/propel/src/icons/misc/info-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export const InfoIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM7.375 10.666V8C7.375 7.65482 7.65482 7.375 8 7.375C8.34503 7.37518 8.625 7.65493 8.625 8V10.666C8.625 11.0111 8.34503 11.2908 8 11.291C7.65482 11.291 7.375 11.0112 7.375 10.666ZM8.00586 4.70801C8.35104 4.70801 8.63086 4.98783 8.63086 5.33301C8.63086 5.67819 8.35104 5.95801 8.00586 5.95801H8C7.65482 5.95801 7.375 5.67819 7.375 5.33301C7.375 4.98783 7.65482 4.70801 8 4.70801H8.00586ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/module/backlog.tsx b/packages/propel/src/icons/module/backlog.tsx
new file mode 100644
index 0000000..2a99d68
--- /dev/null
+++ b/packages/propel/src/icons/module/backlog.tsx
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function ModuleBacklogIcon({ width = "20", height = "20", className, color = "#a3a3a3" }: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 323.15 323.03"
+    >
+      <g id="Layer_2" data-name="Layer 2">
+        <g id="Layer_1-2" data-name="Layer 1">
+          <path
+            fill={color}
+            d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
+          />
+          <path
+            fill={color}
+            d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
+          />
+          <path
+            fill={color}
+            d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
+          />
+          <path
+            fill={color}
+            d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/cancelled.tsx b/packages/propel/src/icons/module/cancelled.tsx
new file mode 100644
index 0000000..75575f1
--- /dev/null
+++ b/packages/propel/src/icons/module/cancelled.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function ModuleCancelledIcon({ width = "20", height = "20", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_4052_100277)">
+        <path
+          d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+          fill="#ef4444"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4052_100277">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/completed.tsx b/packages/propel/src/icons/module/completed.tsx
new file mode 100644
index 0000000..31e2459
--- /dev/null
+++ b/packages/propel/src/icons/module/completed.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function ModuleCompletedIcon({ width = "20", height = "20", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+        fill="#16a34a"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/in-progress.tsx b/packages/propel/src/icons/module/in-progress.tsx
new file mode 100644
index 0000000..01ffce8
--- /dev/null
+++ b/packages/propel/src/icons/module/in-progress.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function ModuleInProgressIcon({ width = "20", height = "20", className, color = "#f39e1f" }: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 152.93 152.95"
+    >
+      <g id="Layer_2" data-name="Layer 2">
+        <g id="Layer_1-2" data-name="Layer 1">
+          <path
+            fill={color}
+            d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
+          />
+          <path
+            fill={color}
+            d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
+          />
+          <path
+            fill={color}
+            d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
+          />
+          <path
+            fill={color}
+            d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
+          />
+          <path
+            fill={color}
+            d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/index.ts b/packages/propel/src/icons/module/index.ts
new file mode 100644
index 0000000..f4d38c4
--- /dev/null
+++ b/packages/propel/src/icons/module/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./backlog";
+export * from "./cancelled";
+export * from "./completed";
+export * from "./in-progress";
+export * from "./module-status-icon";
+export * from "./paused";
+export * from "./planned";
diff --git a/packages/propel/src/icons/module/module-status-icon.tsx b/packages/propel/src/icons/module/module-status-icon.tsx
new file mode 100644
index 0000000..e19242e
--- /dev/null
+++ b/packages/propel/src/icons/module/module-status-icon.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { ModuleBacklogIcon } from "./backlog";
+import { ModuleCancelledIcon } from "./cancelled";
+import { ModuleCompletedIcon } from "./completed";
+import { ModuleInProgressIcon } from "./in-progress";
+import { ModulePausedIcon } from "./paused";
+import { ModulePlannedIcon } from "./planned";
+
+export type TModuleStatus = "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled";
+
+type Props = {
+  status: TModuleStatus;
+  className?: string;
+  height?: string;
+  width?: string;
+};
+
+export function ModuleStatusIcon({ status, className, height = "12px", width = "12px" }: Props) {
+  if (status === "backlog") return <ModuleBacklogIcon className={className} height={height} width={width} />;
+  else if (status === "cancelled") return <ModuleCancelledIcon className={className} height={height} width={width} />;
+  else if (status === "completed") return <ModuleCompletedIcon className={className} height={height} width={width} />;
+  else if (status === "in-progress")
+    return <ModuleInProgressIcon className={className} height={height} width={width} />;
+  else if (status === "paused") return <ModulePausedIcon className={className} height={height} width={width} />;
+  else return <ModulePlannedIcon className={className} height={height} width={width} />;
+}
diff --git a/packages/propel/src/icons/module/paused.tsx b/packages/propel/src/icons/module/paused.tsx
new file mode 100644
index 0000000..df1c99b
--- /dev/null
+++ b/packages/propel/src/icons/module/paused.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function ModulePausedIcon({ width = "20", height = "20", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_4052_100275)">
+        <path
+          d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
+          fill="#525252"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4052_100275">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/planned.tsx b/packages/propel/src/icons/module/planned.tsx
new file mode 100644
index 0000000..3d0485f
--- /dev/null
+++ b/packages/propel/src/icons/module/planned.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function ModulePlannedIcon({ width = "20", height = "20", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.57177 7.43329L11.3665 10.228C11.4883 10.3498 11.5441 10.4809 11.5339 10.6213C11.5238 10.7617 11.4578 10.8928 11.336 11.0146C11.2142 11.1364 11.0794 11.1973 10.9317 11.1973C10.784 11.1973 10.6492 11.1364 10.5274 11.0146L7.64476 8.12349C7.57709 8.05582 7.52408 7.98139 7.48574 7.90018C7.4474 7.81898 7.42823 7.72538 7.42823 7.61936V3.51362C7.42823 3.35574 7.48405 3.22097 7.5957 3.10932C7.70734 2.99768 7.84211 2.94185 8 2.94185C8.15789 2.94185 8.29266 2.99768 8.4043 3.10932C8.51595 3.22097 8.57177 3.35574 8.57177 3.51362V7.43329ZM0.806954 11.4933C0.573486 11.04 0.390212 10.5655 0.257131 10.0698C0.124064 9.57411 0.0383541 9.07477 0 8.57177H1.15709C1.18077 8.98793 1.24646 9.38746 1.35418 9.77036C1.46188 10.1533 1.60427 10.5297 1.78133 10.8996L0.806954 11.4933ZM0.021992 7.42823C0.0603462 6.92523 0.143806 6.4273 0.272371 5.93444C0.400937 5.4416 0.579131 4.96567 0.806954 4.50665L1.80333 5.07842C1.62062 5.44834 1.47315 5.82983 1.36093 6.22287C1.24872 6.61591 1.18077 7.0177 1.15709 7.42823H0.021992ZM3.52381 14.6128C3.10877 14.3286 2.71855 14.0103 2.35315 13.6578C1.98774 13.3054 1.66294 12.9217 1.37872 12.5067L2.3751 11.9044C2.5939 12.2507 2.84879 12.5656 3.13976 12.8492C3.43073 13.1329 3.74934 13.3914 4.09558 13.6249L3.52381 14.6128ZM2.3751 4.09558L1.37872 3.52381C1.66294 3.09411 1.98408 2.70163 2.34215 2.34637C2.70023 1.99112 3.09411 1.67139 3.52381 1.38719L4.09558 2.3751C3.75837 2.60856 3.44568 2.86571 3.15753 3.14653C2.86937 3.42736 2.60856 3.7437 2.3751 4.09558ZM7.42823 16C6.92523 15.9616 6.4273 15.8745 5.93444 15.7386C5.4416 15.6027 4.96567 15.4209 4.50665 15.193L5.07842 14.2187C5.44834 14.4014 5.82983 14.5452 6.22287 14.6501C6.61591 14.7549 7.0177 14.8192 7.42823 14.8429V16ZM5.10042 1.80333L4.50665 0.806954C4.96567 0.579131 5.4416 0.397272 5.93444 0.261376C6.4273 0.125479 6.92523 0.0383541 7.42823 0V1.15709C7.0177 1.18077 6.61957 1.24872 6.23386 1.36093C5.84815 1.47315 5.47034 1.62062 5.10042 1.80333ZM8.57177 16V14.8429C8.9823 14.8192 9.38409 14.7549 9.77713 14.6501C10.1702 14.5452 10.5517 14.4014 10.9216 14.2187L11.4933 15.193C11.0343 15.4209 10.5584 15.6027 10.0656 15.7386C9.5727 15.8745 9.07477 15.9616 8.57177 16ZM10.9216 1.78133C10.5517 1.59862 10.1702 1.45482 9.77713 1.34994C9.38409 1.24505 8.9823 1.18077 8.57177 1.15709V0C9.07477 0.0383541 9.5727 0.125479 10.0656 0.261376C10.5584 0.397272 11.0343 0.579131 11.4933 0.806954L10.9216 1.78133ZM12.4762 14.6128L11.9044 13.6469C12.2563 13.4134 12.5726 13.149 12.8535 12.8535C13.1343 12.558 13.3914 12.2416 13.6249 11.9044L14.6128 12.4982C14.3286 12.9132 14.0052 13.297 13.6426 13.6494C13.28 14.0018 12.8912 14.323 12.4762 14.6128ZM13.6249 4.08713C13.3914 3.74991 13.1306 3.43862 12.8425 3.15328C12.5543 2.86796 12.2416 2.60856 11.9044 2.3751L12.4762 1.38719C12.8912 1.67703 13.28 1.99817 13.6426 2.3506C14.0052 2.70304 14.3314 3.08678 14.6213 3.50181L13.6249 4.08713ZM14.8429 7.42823C14.8192 7.0177 14.7535 6.61957 14.6458 6.23386C14.5381 5.84815 14.3929 5.46752 14.2102 5.09197L15.193 4.50665C15.4265 4.96003 15.6098 5.43314 15.7429 5.926C15.8759 6.41884 15.9616 6.91958 16 7.42823H14.8429ZM15.193 11.4933L14.2187 10.9216C14.4014 10.5517 14.5452 10.1702 14.6501 9.77713C14.7549 9.38409 14.8192 8.9823 14.8429 8.57177H16C15.9616 9.07477 15.8745 9.5727 15.7386 10.0656C15.6027 10.5584 15.4209 11.0343 15.193 11.4933Z"
+        fill="#3f76ff"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/monospace-icon.tsx b/packages/propel/src/icons/monospace-icon.tsx
new file mode 100644
index 0000000..42221b6
--- /dev/null
+++ b/packages/propel/src/icons/monospace-icon.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function MonospaceIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
+      <path
+        d="M10.6149 13.0746V11.9267H13.0648C13.4568 11.9267 13.7415 11.838 13.9188 11.6607C14.1055 11.4833 14.1988 11.208 14.1988 10.8347V9.8547L14.2268 8.45473H13.9748L14.2128 8.24474C14.2128 8.80472 14.0261 9.24805 13.6528 9.57471C13.2795 9.90137 12.7802 10.0647 12.1548 10.0647C11.3615 10.0647 10.7362 9.80804 10.2789 9.29472C9.82156 8.77206 9.5929 8.07207 9.5929 7.19476V5.57079C9.5929 4.69347 9.82156 3.99815 10.2789 3.48483C10.7362 2.97151 11.3615 2.71484 12.1548 2.71484C12.7802 2.71484 13.2795 2.87817 13.6528 3.20483C14.0261 3.53149 14.2128 3.97482 14.2128 4.53481L13.9748 4.32481H14.2128V2.85484H15.4588V10.8347C15.4588 11.5253 15.2441 12.0713 14.8148 12.4727C14.3948 12.874 13.8068 13.0746 13.0508 13.0746H10.6149ZM12.5328 8.97272C13.0555 8.97272 13.4662 8.80939 13.7648 8.48273C14.0635 8.15607 14.2128 7.70341 14.2128 7.12476V5.65479C14.2128 5.07613 14.0635 4.62347 13.7648 4.29681C13.4662 3.97015 13.0555 3.80682 12.5328 3.80682C12.0008 3.80682 11.5855 3.96549 11.2869 4.28281C10.9975 4.60014 10.8529 5.05746 10.8529 5.65479V7.12476C10.8529 7.72208 10.9975 8.1794 11.2869 8.49673C11.5855 8.81406 12.0008 8.97272 12.5328 8.97272Z"
+        fill="currentColor"
+      />
+      <path
+        d="M0.666626 10.5538L3.32657 0.333984H5.02054L7.66649 10.5538H6.39251L5.72053 7.83784H2.62659L1.9546 10.5538H0.666626ZM2.87858 6.77386H5.45453L4.67055 3.62392C4.52122 3.0266 4.40455 2.52727 4.32055 2.12595C4.23656 1.72462 4.18522 1.46329 4.16656 1.34196C4.14789 1.46329 4.09656 1.72462 4.01256 2.12595C3.92856 2.52727 3.8119 3.02193 3.66257 3.60992L2.87858 6.77386Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/multiple-sticky.tsx b/packages/propel/src/icons/multiple-sticky.tsx
new file mode 100644
index 0000000..f61bdee
--- /dev/null
+++ b/packages/propel/src/icons/multiple-sticky.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function RecentStickyIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.23602 12.7638C2.60067 13.1285 3.09525 13.3333 3.61095 13.3333H9.72206C9.94307 13.3333 10.155 13.2455 10.3113 13.0892L13.0891 10.3115C13.2454 10.1552 13.3332 9.94323 13.3332 9.72221V3.6111C13.3332 3.0954 13.1283 2.60083 12.7637 2.23617C12.399 1.87152 11.9044 1.66666 11.3887 1.66666H3.61095C3.09525 1.66666 2.60067 1.87152 2.23602 2.23617C1.87136 2.60083 1.6665 3.0954 1.6665 3.6111V11.3889C1.6665 11.9046 1.87136 12.3992 2.23602 12.7638ZM11.0435 9.99999L9.99984 11.0437V10.2778C9.99984 10.2041 10.0291 10.1334 10.0812 10.0813C10.1333 10.0293 10.2039 9.99999 10.2776 9.99999H11.0435ZM8.33317 11.6667V10.2778C8.33317 9.76207 8.53803 9.26749 8.90269 8.90284C9.26734 8.53819 9.76192 8.33332 10.2776 8.33332H11.6665V3.6111C11.6665 3.53743 11.6372 3.46678 11.5851 3.41468C11.5331 3.36259 11.4624 3.33332 11.3887 3.33332H3.61095C3.53728 3.33332 3.46662 3.36259 3.41453 3.41468C3.36244 3.46678 3.33317 3.53743 3.33317 3.6111V11.3889C3.33317 11.4626 3.36244 11.5332 3.41453 11.5853C3.46662 11.6374 3.53728 11.6667 3.61095 11.6667H8.33317Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.36088 16.832C6.65667 17.2545 7.10816 17.5421 7.61603 17.6317L13.6343 18.6928C13.852 18.7312 14.0759 18.6816 14.257 18.5548L17.4749 16.3016C17.656 16.1748 17.7792 15.9813 17.8176 15.7636L18.8788 9.74538C18.9683 9.23752 18.8525 8.71488 18.5567 8.29244C18.2609 7.87001 17.8094 7.58238 17.3015 7.49283L15.1445 7.11249C14.6913 7.03257 14.2591 7.33521 14.1792 7.78846C14.0992 8.2417 14.4019 8.67392 14.8551 8.75384L17.0121 9.13417C17.0847 9.14697 17.1492 9.18806 17.1914 9.2484C17.2337 9.30875 17.2502 9.38341 17.2374 9.45597L16.4174 14.1064L15.0497 13.8653C14.5418 13.7757 14.0192 13.8916 13.5967 14.1874C13.1743 14.4832 12.8867 14.9347 12.7971 15.4425L12.5559 16.8103L7.90544 15.9903C7.83289 15.9775 7.76839 15.9364 7.72613 15.8761C7.68388 15.8157 7.66733 15.7411 7.68012 15.6685L7.77252 15.1445C7.85244 14.6913 7.5498 14.259 7.09655 14.1791C6.64331 14.0992 6.21109 14.4018 6.13117 14.8551L6.03877 15.3791C5.94922 15.887 6.06509 16.4096 6.36088 16.832ZM14.3054 16.4862L14.4384 15.7319C14.4512 15.6594 14.4923 15.5949 14.5527 15.5526C14.613 15.5104 14.6877 15.4938 14.7602 15.5066L15.5145 15.6396L14.3054 16.4862Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/off-track-icon.tsx b/packages/propel/src/icons/off-track-icon.tsx
new file mode 100644
index 0000000..c26c5eb
--- /dev/null
+++ b/packages/propel/src/icons/off-track-icon.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function OffTrackIcon({ width = "16", height = "16" }: ISvgIcons) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_365_7595)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM6.66663 4.66669C7.03482 4.66669 7.33329 4.96516 7.33329 5.33335V8.00002C7.33329 8.36821 7.03482 8.66669 6.66663 8.66669C6.29844 8.66669 5.99996 8.36821 5.99996 8.00002V5.33335C5.99996 4.96516 6.29844 4.66669 6.66663 4.66669ZM9.33329 4.66669C9.70148 4.66669 9.99996 4.96516 9.99996 5.33335V8.00002C9.99996 8.36821 9.70148 8.66669 9.33329 8.66669C8.9651 8.66669 8.66663 8.36821 8.66663 8.00002V5.33335C8.66663 4.96516 8.9651 4.66669 9.33329 4.66669ZM5.99996 10.6667C5.99996 10.2985 6.29844 10 6.66663 10H6.67329C7.04148 10 7.33996 10.2985 7.33996 10.6667C7.33996 11.0349 7.04148 11.3334 6.67329 11.3334H6.66663C6.29844 11.3334 5.99996 11.0349 5.99996 10.6667ZM8.66663 10.6667C8.66663 10.2985 8.9651 10 9.33329 10H9.33996C9.70815 10 10.0066 10.2985 10.0066 10.6667C10.0066 11.0349 9.70815 11.3334 9.33996 11.3334H9.33329C8.9651 11.3334 8.66663 11.0349 8.66663 10.6667Z"
+          fill="#CC0000"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_365_7595">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/on-track-icon.tsx b/packages/propel/src/icons/on-track-icon.tsx
new file mode 100644
index 0000000..b735a99
--- /dev/null
+++ b/packages/propel/src/icons/on-track-icon.tsx
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function OnTrackIcon({ width = "16", height = "16" }: ISvgIcons) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_365_7535)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.0001 2.80075C9.81139 2.11486 8.42345 1.85723 7.06776 2.07082C5.71206 2.28441 4.47057 2.9563 3.55031 3.97445C2.63004 4.9926 2.08664 6.29547 2.01071 7.66578C1.93479 9.03609 2.33093 10.391 3.13308 11.5046C3.93523 12.6182 5.0949 13.4231 6.4187 13.7852C7.74249 14.1472 9.1504 14.0445 10.4076 13.4941C11.6649 12.9438 12.6954 11.979 13.3274 10.7608C13.9594 9.5426 14.1547 8.14453 13.8807 6.79975C13.8072 6.43897 14.0401 6.08691 14.4009 6.0134C14.7616 5.93988 15.1137 6.17276 15.1872 6.53353C15.5221 8.17715 15.2834 9.88591 14.511 11.3748C13.7385 12.8638 12.4789 14.0429 10.9423 14.7156C9.4057 15.3882 7.68493 15.5138 6.06696 15.0713C4.44898 14.6288 3.03161 13.645 2.05121 12.2839C1.0708 10.9229 0.586626 9.26684 0.679423 7.59202C0.772221 5.91719 1.43638 4.3248 2.56115 3.08039C3.68591 1.83598 5.2033 1.01478 6.86025 0.753732C8.51721 0.492682 10.2136 0.807564 11.6665 1.64587C11.9854 1.82987 12.0947 2.23757 11.9107 2.55648C11.7267 2.8754 11.319 2.98476 11.0001 2.80075ZM15.138 2.19524C15.3984 2.45559 15.3984 2.8777 15.138 3.13805L8.47136 9.80471C8.21101 10.0651 7.7889 10.0651 7.52855 9.80471L5.52856 7.80471C5.26821 7.54436 5.26821 7.12225 5.52856 6.8619C5.7889 6.60155 6.21101 6.60155 6.47136 6.8619L7.99996 8.3905L14.1952 2.19524C14.4556 1.93489 14.8777 1.93489 15.138 2.19524Z"
+          fill="#1FAD40"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.99996 15.3333C7.63177 15.3333 7.33329 15.0348x33329 14.6666V13.3333C7.33329 12.9651 7.63177 12.6666 7.99996 12.6666C8.36815 12.6666 8.66663 12.9651 8.66663 13.3333V14.6666C8.66663 15.0348 8.36815 15.3333 7.99996 15.3333Z"
+          fill="#1FAD40"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.99996 3.33331C7.63177 3.33331 7.33329 3.03483 7.33329 2.66664V1.33331C7.33329 0.965117 7.63177 0.66664 7.99996 0.66664C8.36815 0.66664 8.66663 0.965117 8.66663 1.33331V2.66664C8.66663 3.03483 8.36815 3.33331 7.99996 3.33331Z"
+          fill="#1FAD40"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.33329 7.99997C3.33329 8.36816 3.03482 8.66664 2.66663 8.66664H1.33329C0.965103 8.66664 0.666626 8.36816 0.666626 7.99997C0.666626 7.63178 0.965103 7.33331 1.33329 7.33331H2.66663C3.03482 7.33331 3.33329 7.63178 3.33329 7.99997Z"
+          fill="#1FAD40"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_365_7535">
+          <path
+            d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z"
+            fill="white"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/overview-icon.tsx b/packages/propel/src/icons/overview-icon.tsx
new file mode 100644
index 0000000..513c1f5
--- /dev/null
+++ b/packages/propel/src/icons/overview-icon.tsx
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function OverviewIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 12 12" className={className} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.5 1C0.5 0.867392 0.552678 0.740215 0.646447 0.646447C0.740215 0.552678 0.867392 0.5 1 0.5H1.5C7.02267 0.5 11.5 4.97733 11.5 10.5V11C11.5 11.1326 11.4473 11.2598 11.3536 11.3536C11.2598 11.4473 11.1326 11.5 11 11.5H10.5C10.3674 11.5 10.2402 11.4473 10.1464 11.3536C10.0527 11.2598 10 11.1326 10 11V10.5C10 5.80533 6.19467 2 1.5 2H1C0.867392 2 0.740215 1.94732 0.646447 1.85355C0.552678 1.75979 0.5 1.63261 0.5 1.5V1ZM0.5 5.5C0.5 5.36739 0.552678 5.24022 0.646447 5.14645C0.740215 5.05268 0.867392 5 1 5H1.5C2.22227 5 2.93747 5.14226 3.60476 5.41866C4.27205 5.69506 4.87837 6.10019 5.38909 6.61091C5.89981 7.12164 6.30494 7.72795 6.58134 8.39524C6.85774 9.06253 7 9.77773 7 10.5V11C7 11.1326 6.94732 11.2598 6.85355 11.3536C6.75978 11.4473 6.63261 11.5 6.5 11.5H6C5.86739 11.5 5.74022 11.4473 5.64645 11.3536C5.55268 11.2598 5.5 11.1326 5.5 11V10.5C5.5 9.43913 5.07857 8.42172 4.32843 7.67157C3.57828 6.92143 2.56087 6.5 1.5 6.5H1C0.867392 6.5 0.740215 6.44732 0.646447 6.35355C0.552678 6.25978 0.5 6.13261 0.5 6V5.5ZM0.5 10.5C0.5 10.2348 0.605357 9.98043 0.792893 9.79289C0.98043 9.60536 1.23478 9.5 1.5 9.5C1.76522 9.5 2.01957 9.60536 2.20711 9.79289C2.39464 9.98043 2.5 10.2348 2.5 10.5C2.5 10.7652 2.39464 11.0196 2.20711 11.2071C2.01957 11.3946 1.76522 11.5 1.5 11.5C1.23478 11.5 0.98043 11.3946 0.792893 11.2071C0.605357 11.0196 0.5 10.7652 0.5 10.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/pending-icon.tsx b/packages/propel/src/icons/pending-icon.tsx
new file mode 100644
index 0000000..6b0b9cb
--- /dev/null
+++ b/packages/propel/src/icons/pending-icon.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function PendingState({ width = "10", height = "11", className, color = "#455068" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 5C12.5523 5 13 5.44772 13 6V11.382L16.4472 13.1056C16.9412 13.3526 17.1414 13.9532 16.8944 14.4472C16.6474 14.9412 16.0468 15.1414 15.5528 14.8944L11.5528 12.8944C11.214 12.725 11 12.3788 11 12V6C11 5.44772 11.4477 5 12 5Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/photo-filter-icon.tsx b/packages/propel/src/icons/photo-filter-icon.tsx
new file mode 100644
index 0000000..2043cd3
--- /dev/null
+++ b/packages/propel/src/icons/photo-filter-icon.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function PhotoFilterIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19 3L18.5778 4.28889C18.5562 4.35583 18.519 4.41668 18.4692 4.46643C18.4195 4.51619 18.3587 4.55344 18.2918 4.57511L17 5L18.2889 5.42222C18.3558 5.44384 18.4167 5.48104 18.4664 5.53076C18.5162 5.58048 18.5534 5.6413 18.5751 5.70822L19 7L19.4222 5.71111C19.4438 5.64417 19.481 5.58332 19.5308 5.53357C19.5805 5.48381 19.6413 5.44656 19.7082 5.42489L21 5L19.7111 4.57778C19.6442 4.55616 19.5833 4.51896 19.5336 4.46924C19.4838 4.41952 19.4466 4.3587 19.4249 4.29178L19 3Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 9L11.3667 10.9333C11.3342 11.0337 11.2784 11.125 11.2039 11.1997C11.1293 11.2743 11.038 11.3302 10.9377 11.3627L9 12L10.9333 12.6333C11.0337 12.6658 11.125 12.7216 11.1997 12.7961C11.2743 12.8707 11.3302 12.962 11.3627 13.0623L12 15L12.6333 13.0667C12.6658 12.9663 12.7216 12.875 12.7961 12.8003C12.8707 12.7257 12.962 12.6698 13.0623 12.6373L15 12L13.0667 11.3667C12.9663 11.3342 12.875 11.2784 12.8003 11.2039C12.7257 11.1293 12.6698 11.038 12.6373 10.9377L12 9Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/planned-icon.tsx b/packages/propel/src/icons/planned-icon.tsx
new file mode 100644
index 0000000..8d57919
--- /dev/null
+++ b/packages/propel/src/icons/planned-icon.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function PlannedState({ width = "10", height = "11", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 12 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_3180_28635)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.11853 4.7C7.20073 4.88749 7.38342 5.01866 7.59656 5.02037C7.88848 5.02271 8.12698 4.7813 8.12925 4.48116L8.13344 3.92962C8.1348 3.74982 8.04958 3.58096 7.90581 3.47859C7.76203 3.37623 7.57832 3.3536 7.41509 3.41815L3.97959 4.77682C3.77547 4.85755 3.64077 5.05919 3.64077 5.28406L3.64077 9.0883C3.64077 9.27834 3.73732 9.45458 3.8954 9.55308C4.05347 9.65157 4.25011 9.65802 4.41396 9.57008L4.90523 9.30643C5.16402 9.16754 5.26431 8.83925 5.12922 8.57317C5.04115 8.39971 4.8748 8.29551 4.69795 8.28247L4.69795 5.65729L7.11853 4.7Z"
+          fill="#455068"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.00428 3.06914C5.08648 3.25663 5.26916 3.3878 5.4823 3.38951C5.77422 3.39185 6.01272 3.15044 6.015 2.8503L6.01918 2.29876C6.02054 2.11896 5.93532 1.9501 5.79155 1.84774C5.64777 1.74537 5.46406 1.72274 5.30084 1.78729L1.86534 3.14597C1.66121 3.22669 1.52652 3.42834 1.52652 3.6532L1.52652 7.45745C1.52652 7.64749 1.62307 7.82372 1.78114 7.92222C1.93922 8.02071 2.13585 8.02716 2.29971 7.93922L2.79097 7.67557C3.04977 7.53668 3.15005 7.20839 3.01496 6.94231C2.92689 6.76885 2.76054 6.66465 2.5837 6.65161L2.5837 4.02643L5.00428 3.06914Z"
+          fill="#455068"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.473 9.34799C10.4728 9.57269 10.3382 9.77413 10.1342 9.85482L6.70129 11.2129C6.53874 11.2772 6.35582 11.255 6.21225 11.1536C6.06867 11.0523 5.98288 10.8847 5.98288 10.7056L5.98288 6.90139C5.98288 6.67653 6.11757 6.47489 6.3217 6.39416L9.7572 5.03548C9.91981 4.97118 10.1028 4.99338 10.2464 5.09484C10.3899 5.19629 10.4757 5.36397 10.4756 5.5431L10.473 9.34799ZM9.41784 6.33426L7.04006 7.27463L7.04006 9.91423L9.41605 8.97431L9.41784 6.33426Z"
+          fill="#455068"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3180_28635">
+          <rect width="12" height="12" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/priority-icon.tsx b/packages/propel/src/icons/priority-icon.tsx
new file mode 100644
index 0000000..050b32c
--- /dev/null
+++ b/packages/propel/src/icons/priority-icon.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { AlertCircle, Ban, SignalHigh, SignalLow, SignalMedium } from "lucide-react";
+import { cn } from "../utils";
+
+export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
+
+interface IPriorityIcon {
+  className?: string;
+  containerClassName?: string;
+  priority: TIssuePriorities | undefined | null;
+  size?: number;
+  withContainer?: boolean;
+}
+
+export function PriorityIcon(props: IPriorityIcon) {
+  const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
+
+  const priorityClasses = {
+    urgent: "bg-layer-2 text-priority-urgent border-priority-urgent",
+    high: "bg-layer-2 text-priority-high border-priority-high",
+    medium: "bg-layer-2 text-priority-medium border-priority-medium",
+    low: "bg-layer-2 text-priority-low border-priority-low",
+    none: "bg-layer-2 text-priority-none border-priority-none",
+  };
+
+  // get priority icon
+  const icons = {
+    urgent: AlertCircle,
+    high: SignalHigh,
+    medium: SignalMedium,
+    low: SignalLow,
+    none: Ban,
+  };
+  const Icon = icons[priority ?? "none"];
+
+  if (!Icon) return null;
+
+  return (
+    <>
+      {withContainer ? (
+        <div
+          className={cn(
+            "flex flex-shrink-0 items-center justify-center rounded-sm border p-0.5",
+            priorityClasses[priority ?? "none"],
+            containerClassName
+          )}
+        >
+          <Icon
+            size={size}
+            className={cn(
+              {
+                "translate-x-[0.0625rem]": priority === "high",
+                "translate-x-0.5": priority === "medium",
+                "translate-x-1": priority === "low",
+              },
+              className
+            )}
+          />
+        </div>
+      ) : (
+        <Icon
+          size={size}
+          className={cn(
+            "flex-shrink-0",
+            {
+              "text-priority-urgent": priority === "urgent",
+              "text-priority-high": priority === "high",
+              "text-priority-medium": priority === "medium",
+              "text-priority-low": priority === "low",
+              "text-priority-none": priority === "none",
+            },
+            className
+          )}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/propel/src/icons/project/cycle-icon.tsx b/packages/propel/src/icons/project/cycle-icon.tsx
new file mode 100644
index 0000000..afba0fe
--- /dev/null
+++ b/packages/propel/src/icons/project/cycle-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function CycleIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
+        fill={color}
+      />
+      <path
+        d="M7.99951 12.3337C10.3928 12.3337 12.3328 10.3936 12.3328 8.00033C12.3328 5.60709 10.3928 3.66699 7.99951 3.66699V12.3337Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/project/epic-icon.tsx b/packages/propel/src/icons/project/epic-icon.tsx
new file mode 100644
index 0000000..132d973
--- /dev/null
+++ b/packages/propel/src/icons/project/epic-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function EpicIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M6.47557 3.58443C6.25869 3.59252 6.06151 3.70781 5.95506 3.88843L1.45506 11.5276C1.34621 11.7124 1.34883 11.9386 1.46092 12.1216C1.57303 12.3046 1.77799 12.4172 1.99999 12.4172H14C14.2176 12.4172 14.4196 12.3092 14.5332 12.1319C14.6467 11.9548 14.6555 11.734 14.5566 11.5491L11.5566 5.9465C11.4711 5.7869 11.3144 5.67271 11.1308 5.63504C10.9474 5.59752 10.7559 5.64062 10.6094 5.75254L9.14159 6.87343L7.01952 3.84927C6.8987 3.67699 6.69254 3.57638 6.47557 3.58443ZM8.48045 8.07824C8.5777 8.21691 8.73158 8.31005 8.90428 8.33561C9.07718 8.36107 9.254 8.31687 9.39061 8.21252L10.793 7.14106L12.9785 11.2236H3.06932L6.54686 5.31985L8.48045 8.07824Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/project/index.ts b/packages/propel/src/icons/project/index.ts
new file mode 100644
index 0000000..37be252
--- /dev/null
+++ b/packages/propel/src/icons/project/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./cycle-icon";
+export * from "./epic-icon";
+export * from "./intake-icon";
+export * from "./module-icon";
+export * from "./page-icon";
+export * from "./view-icon";
+export * from "./work-items-icon";
diff --git a/packages/propel/src/icons/project/intake-icon.tsx b/packages/propel/src/icons/project/intake-icon.tsx
new file mode 100644
index 0000000..96d33fb
--- /dev/null
+++ b/packages/propel/src/icons/project/intake-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function IntakeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M7.37549 4.31474C7.37549 3.34976 7.35622 3.09637 7.12256 2.76591C7.07287 2.69574 6.92103 2.55664 6.69287 2.41826C6.46459 2.27986 6.2704 2.20923 6.18506 2.19755C5.92379 2.16215 5.79263 2.17621 5.6958 2.20146C5.57897 2.23193 5.46473 2.28854 5.21045 2.42119C3.2767 3.42993 1.9585 5.45229 1.9585 7.78154C1.95856 11.1182 4.66381 13.8235 8.00049 13.8235C11.337 13.8234 14.0414 11.1181 14.0415 7.78154C14.0415 5.54611 12.8284 3.59276 11.021 2.54716C10.7222 2.37432 10.6196 1.99243 10.7925 1.69365C10.9653 1.39492 11.3472 1.29338 11.646 1.46611C13.8238 2.72593 15.2915 5.0818 15.2915 7.78154C15.2914 11.8084 12.0273 15.0734 8.00049 15.0735C3.97345 15.0735 0.708561 11.8085 0.708496 7.78154C0.708496 4.96843 2.30195 2.52843 4.63232 1.31279C4.85634 1.19593 5.1006 1.06446 5.38037 0.991498C5.6802 0.913328 5.98443 0.908355 6.35303 0.958295C6.68627 1.00354 7.0524 1.17437 7.34033 1.34892C7.62835 1.52352 7.94882 1.76962 8.14307 2.04423C8.6434 2.75183 8.62549 3.42545 8.62549 4.31474V8.93876L10.2251 7.33915C10.4692 7.09538 10.8649 7.09527 11.1089 7.33915C11.3529 7.58314 11.3527 7.97884 11.1089 8.22294L8.44189 10.8899C8.32477 11.007 8.1661 11.0734 8.00049 11.0735C7.83473 11.0735 7.67532 11.0071 7.55811 10.8899L4.89111 8.22294C4.64748 7.97885 4.64724 7.58309 4.89111 7.33915C5.13519 7.09508 5.5318 7.09508 5.77588 7.33915L7.37549 8.93876V4.31474Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/project/module-icon.tsx b/packages/propel/src/icons/project/module-icon.tsx
new file mode 100644
index 0000000..fae6362
--- /dev/null
+++ b/packages/propel/src/icons/project/module-icon.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ModuleIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+        fill={color}
+      />
+      <path
+        d="M6.54286 5H5.45714C5.29713 5 5.21712 5 5.156 5.03114C5.10224 5.05853 5.05853 5.10224 5.03114 5.156C5 5.21712 5 5.29713 5 5.45714V6.54286C5 6.70287 5 6.78288 5.03114 6.844C5.05853 6.89776 5.10224 6.94147 5.156 6.96886C5.21712 7 5.29713 7 5.45714 7H6.54286C6.70287 7 6.78288 7 6.844 6.96886C6.89776 6.94147 6.94147 6.89776 6.96886 6.844C7 6.78288 7 6.70287 7 6.54286V5.45714C7 5.29713 7 5.21712 6.96886 5.156C6.94147 5.10224 6.89776 5.05853 6.844 5.03114C6.78288 5 6.70287 5 6.54286 5Z"
+        fill={color}
+      />
+      <path
+        d="M10.5429 5H9.45714C9.29712 5 9.21711 5 9.156 5.03114C9.10223 5.05853 9.05854 5.10224 9.03114 5.156C9 5.21712 9 5.29713 9 5.45714V6.54286C9 6.70287 9 6.78288 9.03114 6.844C9.05854 6.89776 9.10223 6.94147 9.156 6.96886C9.21711 7 9.29712 7 9.45714 7H10.5429C10.7029 7 10.7829 7 10.844 6.96886C10.8978 6.94147 10.9415 6.89776 10.9689 6.844C11 6.78288 11 6.70287 11 6.54286V5.45714C11 5.29713 11 5.21712 10.9689 5.156C10.9415 5.10224 10.8978 5.05853 10.844 5.03114C10.7829 5 10.7029 5 10.5429 5Z"
+        fill={color}
+      />
+      <path
+        d="M10.5429 9H9.45714C9.29712 9 9.21711 9 9.156 9.03114C9.10223 9.05854 9.05854 9.10223 9.03114 9.156C9 9.21711 9 9.29712 9 9.45714V10.5429C9 10.7029 9 10.7829 9.03114 10.844C9.05854 10.8978 9.10223 10.9415 9.156 10.9689C9.21711 11 9.29712 11 9.45714 11H10.5429C10.7029 11 10.7829 11 10.844 10.9689C10.8978 10.9415 10.9415 10.8978 10.9689 10.844C11 10.7829 11 10.7029 11 10.5429V9.45714C11 9.29712 11 9.21711 10.9689 9.156C10.9415 9.10223 10.8978 9.05854 10.844 9.03114C10.7829 9 10.7029 9 10.5429 9Z"
+        fill={color}
+      />
+      <path
+        d="M6.54286 9H5.45714C5.29713 9 5.21712 9 5.156 9.03114C5.10224 9.05854 5.05853 9.10223 5.03114 9.156C5 9.21711 5 9.29712 5 9.45714V10.5429C5 10.7029 5 10.7829 5.03114 10.844C5.05853 10.8978 5.10224 10.9415 5.156 10.9689C5.21712 11 5.29713 11 5.45714 11H6.54286C6.70287 11 6.78288 11 6.844 10.9689C6.89776 10.9415 6.94147 10.8978 6.96886 10.844C7 10.7829 7 10.7029 7 10.5429V9.45714C7 9.29712 7 9.21711 6.96886 9.156C6.94147 9.10223 6.89776 9.05854 6.844 9.03114C6.78288 9 6.70287 9 6.54286 9Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/project/page-icon.tsx b/packages/propel/src/icons/project/page-icon.tsx
new file mode 100644
index 0000000..feefbb7
--- /dev/null
+++ b/packages/propel/src/icons/project/page-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function PageIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M2.0415 11.4668V4.53325C2.0415 3.98372 2.04103 3.53377 2.0708 3.16899C2.1012 2.79693 2.16636 2.45828 2.32764 2.14164C2.57931 1.64772 2.98117 1.24585 3.4751 0.994184C3.79173 0.832905 4.13038 0.767746 4.50244 0.737348C4.86722 0.707573 5.31717 0.708051 5.8667 0.708051H8.00732C8.46672 0.708051 8.79883 0.703776 9.11768 0.780317C9.26953 0.816778 9.41655 0.869103 9.55908 0.931684C9.57494 0.937854 9.58978 0.945771 9.60498 0.953168C9.6354 0.96723 9.6669 0.97896 9.69678 0.994184L9.87647 1.09477L10.0796 1.23637C10.2777 1.39055 10.4689 1.58472 10.7124 1.82817L12.8374 3.95414C13.1623 4.27904 13.4005 4.51048 13.5718 4.79008C13.627 4.88022 13.6744 4.97452 13.7183 5.07036C13.7229 5.0804 13.7278 5.0903 13.7319 5.10063C13.7959 5.24517 13.8482 5.39475 13.8853 5.54887C13.9618 5.86762 13.9585 6.19902 13.9585 6.65825V11.4668C13.9585 12.0164 13.959 12.4663 13.9292 12.8311C13.8988 13.2032 13.8337 13.5418 13.6724 13.8584C13.4521 14.2907 13.1168 14.6522 12.7056 14.9043L12.5249 15.0049C12.2082 15.1663 11.8697 15.2314 11.4976 15.2618C11.1327 15.2916 10.683 15.2911 10.1333 15.2911H5.8667C5.31716 15.2911 4.86723 15.2915 4.50244 15.2618C4.13034 15.2314 3.79177 15.1663 3.4751 15.0049C2.98126 14.7533 2.57932 14.3523 2.32764 13.8584C2.16631 13.5418 2.10122 13.2032 2.0708 12.8311C2.041 12.4663 2.0415 12.0164 2.0415 11.4668ZM9.3335 10.7081C9.67852 10.7082 9.9585 10.988 9.9585 11.3331C9.9585 11.6781 9.67852 11.9579 9.3335 11.9581H5.3335C4.98832 11.9581 4.7085 11.6782 4.7085 11.3331C4.7085 10.9879 4.98832 10.7081 5.3335 10.7081H9.3335ZM10.6665 8.04106C11.0116 8.04106 11.2913 8.32103 11.2915 8.66606C11.2915 9.01124 11.0117 9.29106 10.6665 9.29106H5.3335C4.98832 9.29106 4.7085 9.01124 4.7085 8.66606C4.70867 8.32103 4.98843 8.04106 5.3335 8.04106H10.6665ZM3.2915 11.4668C3.2915 12.037 3.29222 12.4275 3.3169 12.7295C3.34099 13.0241 3.38432 13.18 3.44092 13.2911C3.57274 13.5497 3.7838 13.7599 4.04248 13.8916C4.15358 13.9482 4.30934 13.9926 4.604 14.0166C4.90612 14.0413 5.29648 14.0411 5.8667 14.0411H10.1333C10.7036 14.0411 11.0939 14.0413 11.396 14.0166C11.6908 13.9926 11.8464 13.9483 11.9575 13.8916C12.2161 13.7599 12.4263 13.5496 12.5581 13.2911C12.6147 13.18 12.659 13.0241 12.6831 12.7295C12.7078 12.4275 12.7085 12.037 12.7085 11.4668V6.65825C12.7085 6.27228 12.7061 6.08627 12.6909 5.95805H10.3999C10.2235 5.95805 10.0532 5.95895 9.91065 5.94731C9.76096 5.93505 9.58746 5.90599 9.41357 5.81743C9.17042 5.69355 8.97292 5.49581 8.84912 5.25297C8.76041 5.07887 8.73148 4.90475 8.71924 4.75493C8.70762 4.61252 8.7085 4.44283 8.7085 4.26664V1.97465C8.58022 1.95949 8.39368 1.95805 8.00732 1.95805H5.8667C5.29645 1.95805 4.90613 1.95877 4.604 1.98344C4.30946 2.00751 4.15357 2.05093 4.04248 2.10747C3.78376 2.23929 3.57274 2.4503 3.44092 2.70903C3.38439 2.82012 3.34096 2.97601 3.3169 3.27055C3.29222 3.57268 3.2915 3.963 3.2915 4.53325V11.4668ZM9.96533 4.65336C9.96677 4.67091 9.96894 4.6836 9.97022 4.69243C9.97133 4.6937 9.97189 4.69521 9.97315 4.69633C9.98199 4.69763 9.99522 4.69975 10.0132 4.70122C10.093 4.70771 10.2032 4.70805 10.3999 4.70805H11.8237L9.9585 2.84184V4.26664C9.9585 4.46349 9.95882 4.57358 9.96533 4.65336Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/project/view-icon.tsx b/packages/propel/src/icons/project/view-icon.tsx
new file mode 100644
index 0000000..11fb1d3
--- /dev/null
+++ b/packages/propel/src/icons/project/view-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ViewsIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/project/work-items-icon.tsx b/packages/propel/src/icons/project/work-items-icon.tsx
new file mode 100644
index 0000000..54eeb06
--- /dev/null
+++ b/packages/propel/src/icons/project/work-items-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function WorkItemsIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.2779 12.465L14.2045 12.5365L14.1028 12.6109C13.999 12.6752 13.8985 12.7093 13.8745 12.7186L8.09646 14.9677C7.9026 15.0431 7.68376 15.0174 7.51292 14.8987C7.34209 14.7799 7.24168 14.5838 7.24485 14.3758L7.28054 12.0898L5.14952 12.9194C4.95564 12.9949 4.73602 12.9685 4.56518 12.8498C4.39458 12.731 4.29394 12.5348 4.29711 12.3269L4.33279 10.0409L2.20178 10.8705C2.0079 10.946 1.78908 10.9202 1.61824 10.8015C1.44742 10.6828 1.347 10.4866 1.35017 10.2786L1.44444 4.07898C1.44497 4.04466 1.43911 3.86844 1.50017 3.70622C1.54848 3.57794 1.62751 3.46423 1.73091 3.37424C1.86169 3.26043 2.02889 3.20455 2.06088 3.1921L7.83894 0.943026C8.03281 0.867554 8.25164 0.893325 8.42248 1.01205C8.59332 1.13079 8.69372 1.32691 8.69055 1.53494L8.65623 3.82068L10.7859 2.99132C10.9796 2.9159 11.1986 2.94183 11.3694 3.06034C11.5403 3.17909 11.6415 3.37576 11.6383 3.58379L11.604 5.86953L13.7336 5.04017C13.9275 4.96469 14.1463 4.99045 14.3172 5.10919C14.488 5.22794 14.5884 5.42408 14.5852 5.63208L14.491 11.8317C14.4904 11.866 14.4963 12.0422 14.4352 12.2045L14.3939 12.2982C14.3622 12.3584 14.3233 12.4144 14.2779 12.465ZM2.41237 4.09289L2.35605 4.09179L2.45595 4.20643L2.41237 4.09289ZM2.35605 4.09179L2.41237 4.09289L2.45595 4.20643L2.35605 4.09179ZM4.39219 6.12784C4.39271 6.09351 4.38601 5.91676 4.44711 5.75452C4.4954 5.62627 4.57449 5.51251 4.67785 5.42253C4.80863 5.30872 4.97664 5.2534 5.00862 5.24095L7.39924 4.30992L7.42784 2.44478L2.69167 4.28821L2.61504 9.36909L4.35327 8.69224L4.39219 6.12784ZM5.36012 6.14174L5.30379 6.14065L5.4045 6.25584L5.36012 6.14174ZM5.30379 6.14065L5.36012 6.14174L5.4045 6.25584L5.30379 6.14065ZM7.33913 8.17613C7.33965 8.14181 7.3338 7.96558 7.39485 7.80337C7.44316 7.67508 7.52219 7.56138 7.6256 7.47139C7.75637 7.35758 7.92358 7.30169 7.95557 7.28924L10.3456 6.35901L10.3742 4.49387L5.63942 6.33706L5.56254 11.4166L7.30077 10.7397L7.33913 8.17613ZM8.30706 8.19003L8.25073 8.18894L8.35064 8.30357L8.30706 8.19003ZM8.25073 8.18894L8.30706 8.19003L8.35064 8.30357L8.25073 8.18894ZM13.3217 6.54137L8.58636 8.38535L8.50892 13.4657L13.2445 11.623L13.3217 6.54137Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/boolean-icon.tsx b/packages/propel/src/icons/properties/boolean-icon.tsx
new file mode 100644
index 0000000..7e31ad7
--- /dev/null
+++ b/packages/propel/src/icons/properties/boolean-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function BooleanPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.041 8C14.041 6.13604 12.53 4.625 10.666 4.625H5.33301C3.46905 4.625 1.95801 6.13604 1.95801 8C1.95801 9.86396 3.46905 11.375 5.33301 11.375H10.666C12.53 11.375 14.041 9.86396 14.041 8ZM11.708 8C11.708 7.42471 11.2413 6.95801 10.666 6.95801C10.0909 6.95823 9.625 7.42485 9.625 8C9.62518 8.575 10.091 9.0408 10.666 9.04102C11.2412 9.04102 11.7078 8.57514 11.708 8ZM12.958 8C12.9578 9.26549 11.9316 10.291 10.666 10.291C9.40067 10.2908 8.37518 9.26536 8.375 8C8.375 6.73449 9.40056 5.70823 10.666 5.70801C11.9317 5.70801 12.958 6.73436 12.958 8ZM15.291 8C15.291 10.5543 13.2203 12.625 10.666 12.625H5.33301C2.77869 12.625 0.708008 10.5543 0.708008 8C0.708008 5.44568 2.77869 3.375 5.33301 3.375H10.666C13.2203 3.375 15.291 5.44568 15.291 8Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/comment-reply-icon.tsx b/packages/propel/src/icons/properties/comment-reply-icon.tsx
new file mode 100644
index 0000000..ac7ddb1
--- /dev/null
+++ b/packages/propel/src/icons/properties/comment-reply-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function CommentReplyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 8.79981V5.2002C13.375 4.62994 13.3743 4.23962 13.3497 3.9375C13.3256 3.64296 13.2822 3.48707 13.2256 3.37598C13.0938 3.11725 12.8828 2.90624 12.6241 2.77441C12.513 2.71788 12.3571 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.20024C4.62999 2.625 4.23967 2.62572 3.93754 2.65039C3.643 2.67446 3.48712 2.71788 3.37602 2.77441C3.1173 2.90624 2.90628 3.11725 2.77446 3.37598C2.71793 3.48707 2.6745 3.64296 2.65044 3.9375C2.62576 4.23962 2.62504 4.62995 2.62504 5.2002V9.33301C2.62504 9.9927 2.63053 10.2007 2.67192 10.3555C2.79906 10.83 3.17007 11.201 3.64458 11.3281C3.79936 11.3695 4.00735 11.375 4.66704 11.375C5.01207 11.3752 5.29204 11.6549 5.29204 12V13.3652L6.73344 12.2129C7.03847 11.9689 7.25663 11.79 7.50688 11.6621C7.7175 11.5545 7.94219 11.4763 8.17387 11.4287C8.44928 11.3722 8.73134 11.375 9.12212 11.375H10.7998C11.3701 11.375 11.7604 11.3743 12.0625 11.3496C12.3571 11.3255 12.513 11.2821 12.6241 11.2256C12.8828 11.0938 13.0938 10.8827 13.2256 10.624C13.2822 10.5129 13.3256 10.357 13.3497 10.0625C13.3743 9.76038 13.375 9.37006 13.375 8.79981ZM14.625 8.79981C14.625 9.34933 14.6255 9.79928 14.5957 10.1641C14.5653 10.5361 14.5002 10.8748 14.3389 11.1914C14.0872 11.6853 13.6854 12.0872 13.1915 12.3389C12.8748 12.5001 12.5362 12.5653 12.1641 12.5957C11.7993 12.6255 11.3494 12.625 10.7998 12.625H9.12212C8.68139 12.625 8.54724 12.6282 8.42485 12.6533C8.30369 12.6782 8.18638 12.7191 8.07622 12.7754C7.96492 12.8322 7.85814 12.9139 7.51372 13.1895L5.92387 14.4619C5.79493 14.5651 5.6641 14.6693 5.55083 14.7441C5.44715 14.8127 5.25268 14.9314 5.00102 14.9316C4.70926 14.9319 4.43308 14.7993 4.25102 14.5713C4.09396 14.3745 4.06499 14.1481 4.05376 14.0244C4.04148 13.8892 4.04204 13.7217 4.04204 13.5566V12.6191C3.76509 12.6115 3.53206 12.5919 3.32036 12.5352C2.41479 12.2924 1.70767 11.5853 1.46489 10.6797C1.37008 10.3258 1.37504 9.91275 1.37504 9.33301V5.2002C1.37504 4.65067 1.37457 4.20072 1.40434 3.83594C1.43474 3.46388 1.4999 3.12523 1.66118 2.80859C1.91285 2.31467 2.31471 1.9128 2.80864 1.66113C3.12527 1.49985 3.46392 1.4347 3.83598 1.4043C4.20076 1.37452 4.65072 1.375 5.20024 1.375H10.7998C11.3494 1.375 11.7993 1.37452 12.1641 1.4043C12.5362 1.4347 12.8748 1.49986 13.1915 1.66113C13.6854 1.9128 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V8.79981Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/dropdown-icon.tsx b/packages/propel/src/icons/properties/dropdown-icon.tsx
new file mode 100644
index 0000000..b4178aa
--- /dev/null
+++ b/packages/propel/src/icons/properties/dropdown-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function DropdownPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8.00098C14.041 4.66436 11.3365 1.95916 8 1.95898C4.66328 1.95898 1.95801 4.66425 1.95801 8.00098C1.95818 11.3375 4.66339 14.042 8 14.042C11.3364 14.0418 14.0408 11.3374 14.041 8.00098ZM10.2246 6.55859C10.4687 6.31468 10.8644 6.31457 11.1084 6.55859C11.3524 6.80262 11.3523 7.19829 11.1084 7.44238L8.44141 10.1094C8.32429 10.2264 8.16557 10.2919 8 10.292C7.83424 10.292 7.67483 10.2266 7.55762 10.1094L4.89062 7.44238C4.64693 7.19833 4.64682 6.80258 4.89062 6.55859C5.1347 6.31452 5.53131 6.31452 5.77539 6.55859L7.99902 8.7832L10.2246 6.55859ZM15.291 8.00098C15.2908 12.0278 12.0268 15.2918 8 15.292C3.97303 15.292 0.708184 12.0279 0.708008 8.00098C0.708008 3.9739 3.97292 0.708984 8 0.708984C12.0269 0.70916 15.291 3.974 15.291 8.00098Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/due-date-icon.tsx b/packages/propel/src/icons/properties/due-date-icon.tsx
new file mode 100644
index 0000000..2def4a9
--- /dev/null
+++ b/packages/propel/src/icons/properties/due-date-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function DueDatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.5576 10.5576C13.8017 10.3135 14.1983 10.3135 14.4424 10.5576C14.6862 10.8016 14.6861 11.1974 14.4424 11.4414L11.4424 14.4414C11.1983 14.6855 10.8017 14.6855 10.5576 14.4414L9.22461 13.1084C8.98059 12.8644 8.9807 12.4687 9.22461 12.2246C9.46869 11.9805 9.86432 11.9805 10.1084 12.2246L10.999 13.1152L13.5576 10.5576ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 8.33301C14.625 8.67819 14.3452 8.95801 14 8.95801C13.6548 8.95801 13.375 8.67819 13.375 8.33301V7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H8C8.34507 14.041 8.62483 14.321 8.625 14.666C8.625 15.0112 8.34518 15.291 8 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V8.33301Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/duplicate-icon.tsx b/packages/propel/src/icons/properties/duplicate-icon.tsx
new file mode 100644
index 0000000..c376fb7
--- /dev/null
+++ b/packages/propel/src/icons/properties/duplicate-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function DuplicatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8.13282C14.041 7.74954 14.041 7.4995 14.0254 7.3086C14.0104 7.12507 13.9841 7.05154 13.9639 7.01173C13.896 6.87852 13.7876 6.77008 13.6543 6.70216C13.6145 6.68189 13.541 6.65563 13.3574 6.64063C13.1665 6.62507 12.9165 6.62501 12.5332 6.62501H8.13282C7.74955 6.62501 7.4995 6.62507 7.3086 6.64063C7.12508 6.65563 7.05155 6.68189 7.01173 6.70216C6.87845 6.77006 6.77006 6.87845 6.70216 7.01173C6.68189 7.05155 6.65563 7.12508 6.64063 7.3086C6.62507 7.4995 6.62501 7.74955 6.62501 8.13282V12.5332C6.62501 12.9165 6.62507 13.1665 6.64063 13.3574C6.65563 13.541 6.68189 13.6145 6.70216 13.6543C6.77008 13.7876 6.87852 13.896 7.01173 13.9639C7.05154 13.9841 7.12507 14.0104 7.3086 14.0254C7.4995 14.041 7.74954 14.041 8.13282 14.041H12.5332C12.9165 14.041 13.1665 14.041 13.3574 14.0254C13.541 14.0104 13.6145 13.9841 13.6543 13.9639C13.7875 13.896 13.896 13.7875 13.9639 13.6543C13.9841 13.6145 14.0104 13.541 14.0254 13.3574C14.041 13.1665 14.041 12.9165 14.041 12.5332V8.13282ZM9.70802 12V10.959H8.667C8.32193 10.959 8.04218 10.679 8.042 10.334C8.042 9.98881 8.32182 9.70899 8.667 9.70899H9.70802V8.667C9.70802 8.32188 9.98791 8.04209 10.333 8.042C10.6782 8.042 10.958 8.32182 10.958 8.667V9.70899H12C12.3451 9.70908 12.625 9.98887 12.625 10.334C12.6248 10.679 12.345 10.9589 12 10.959H10.958V12C10.958 12.3452 10.6782 12.625 10.333 12.625C9.98791 12.6249 9.70802 12.3451 9.70802 12ZM9.37501 3.33302C9.37501 3.01415 9.37415 2.80617 9.36329 2.64649C9.35279 2.49251 9.33426 2.42923 9.32032 2.39552C9.24843 2.22197 9.11107 2.08363 8.93751 2.01173C8.90379 1.99777 8.84057 1.98024 8.68653 1.96973C8.52687 1.95885 8.31893 1.95802 8.00001 1.95802H3.4668C3.08321 1.95802 2.83257 1.95805 2.64161 1.97364C2.45792 1.98865 2.38455 2.01488 2.34473 2.03516C2.21146 2.10307 2.10307 2.21146 2.03516 2.34473C2.01488 2.38455 1.98865 2.45792 1.97364 2.64161C1.95805 2.83257 1.95802 3.08321 1.95802 3.4668V8.00001C1.95802 8.31893 1.95885 8.52687 1.96973 8.68653C1.98024 8.84057 1.99777 8.90379 2.01173 8.93751C2.08363 9.11107 2.22197 9.24843 2.39552 9.32032C2.42923 9.33426 2.49251 9.35279 2.64649 9.36329C2.80617 9.37415 3.01415 9.37501 3.33302 9.37501C3.67819 9.37501 3.95802 9.65483 3.95802 10C3.95784 10.345 3.67808 10.625 3.33302 10.625C3.03094 10.625 2.7727 10.6248 2.56055 10.6104C2.34294 10.5955 2.12822 10.5631 1.917 10.4756C1.43725 10.2769 1.05621 9.89565 0.857429 9.41602C0.769896 9.20466 0.736546 8.98926 0.721687 8.77149C0.707239 8.55948 0.708015 8.3018 0.708015 8.00001V3.4668C0.708015 3.10389 0.70782 2.79368 0.728523 2.54005C0.749847 2.27906 0.796841 2.02275 0.921882 1.77735C1.10961 1.40896 1.40896 1.10961 1.77735 0.921882C2.02275 0.796841 2.27906 0.749847 2.54005 0.728523C2.79368 0.70782 3.10389 0.708015 3.4668 0.708015H8.00001C8.3018 0.708015 8.55948 0.707239 8.77149 0.721687C8.98926 0.736546 9.20466 0.769896 9.41602 0.857429C9.89565 1.05621 10.2769 1.43725 10.4756 1.917C10.5631 2.12822 10.5955 2.34294 10.6104 2.56055C10.6248 2.7727 10.625 3.03094 10.625 3.33302C10.625 3.67808 10.345 3.95784 10 3.95802C9.65483 3.95802 9.37501 3.67819 9.37501 3.33302ZM15.291 12.5332C15.291 12.8962 15.2922 13.2063 15.2715 13.46C15.2502 13.7207 15.203 13.9765 15.0781 14.2217C14.8904 14.5902 14.5902 14.8904 14.2217 15.0781C13.9765 15.203 13.7207 15.2502 13.46 15.2715C13.2063 15.2922 12.8962 15.291 12.5332 15.291H8.13282C7.76985 15.291 7.45971 15.2922 7.20606 15.2715C6.94533 15.2502 6.68953 15.203 6.44434 15.0781C6.0758 14.8904 5.77563 14.5901 5.5879 14.2217C5.46306 13.9765 5.41586 13.7207 5.39454 13.46C5.37381 13.2063 5.37501 12.8962 5.37501 12.5332V8.13282C5.37501 7.76985 5.37381 7.45971 5.39454 7.20606C5.41586 6.94533 5.46306 6.68953 5.5879 6.44434C5.77565 6.07587 6.07587 5.77565 6.44434 5.5879C6.68953 5.46306 6.94533 5.41586 7.20606 5.39454C7.45971 5.37381 7.76985 5.37501 8.13282 5.37501H12.5332C12.8962 5.37501 13.2063 5.37381 13.46 5.39454C13.7207 5.41586 13.9765 5.46306 14.2217 5.5879C14.5901 5.77563 14.8904 6.0758 15.0781 6.44434C15.203 6.68953 15.2502 6.94533 15.2715 7.20606C15.2922 7.45971 15.291 7.76985 15.291 8.13282V12.5332Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/estimate-icon.tsx b/packages/propel/src/icons/properties/estimate-icon.tsx
new file mode 100644
index 0000000..1d1bcc7
--- /dev/null
+++ b/packages/propel/src/icons/properties/estimate-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function EstimatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M7.47524 1.48544C7.80936 1.33685 8.19097 1.33692 8.52505 1.48544C8.78091 1.59922 8.94887 1.80061 9.06802 1.96884C9.18892 2.1396 9.31927 2.36541 9.4645 2.6163L14.9469 12.088C15.0927 12.3398 15.225 12.5655 15.3131 12.7559C15.3998 12.9434 15.4906 13.1898 15.4616 13.4688C15.4236 13.8331 15.2332 14.1646 14.9372 14.38C14.7103 14.5449 14.4514 14.5896 14.2458 14.6085C14.0367 14.6277 13.7743 14.627 13.4831 14.627H2.51723C2.22605 14.627 1.96354 14.6277 1.75454 14.6085C1.54891 14.5896 1.29002 14.5449 1.06313 14.38C0.767042 14.1646 0.576704 13.8331 0.538719 13.4688C0.509704 13.1898 0.600447 12.9434 0.687157 12.7559C0.775223 12.5656 0.906677 12.3397 1.05239 12.088L6.53579 2.6163C6.68101 2.36543 6.81136 2.13961 6.93227 1.96884C7.05143 1.80061 7.21939 1.59922 7.47524 1.48544ZM7.95278 2.6915C7.87286 2.80437 7.77538 2.97106 7.61782 3.24325L2.13442 12.714C1.97623 12.9872 1.88024 13.1553 1.82192 13.2813C1.80777 13.3119 1.79966 13.3353 1.7936 13.3517C1.81076 13.3546 1.83498 13.3603 1.8688 13.3634C2.00713 13.3761 2.2014 13.377 2.51723 13.377H13.4831C13.7989 13.377 13.9932 13.3761 14.1315 13.3634C14.1647 13.3603 14.1886 13.3546 14.2057 13.3517C14.1996 13.3353 14.1924 13.3117 14.1784 13.2813C14.1201 13.1553 14.0241 12.9872 13.8659 12.714L8.38247 3.24325C8.22492 2.97108 8.12743 2.80438 8.04751 2.6915C8.02757 2.66335 8.01084 2.64431 7.99966 2.63095C7.98851 2.6443 7.97249 2.66367 7.95278 2.6915Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/hash-icon.tsx b/packages/propel/src/icons/properties/hash-icon.tsx
new file mode 100644
index 0000000..be2ed01
--- /dev/null
+++ b/packages/propel/src/icons/properties/hash-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function HashPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M12.1025 1.3836C12.443 1.44034 12.6729 1.76193 12.6162 2.10235L12.1816 4.70782H14C14.3451 4.70782 14.6248 4.98779 14.625 5.33282C14.625 5.678 14.3452 5.95782 14 5.95782H11.9736L11.293 10.0418H13.333C13.6782 10.0418 13.958 10.3216 13.958 10.6668C13.9578 11.0118 13.6781 11.2918 13.333 11.2918H11.085L10.6162 14.1024C10.5595 14.4428 10.2379 14.6727 9.89746 14.616C9.55703 14.5593 9.32714 14.2377 9.38379 13.8973L9.81836 11.2918H5.75195L5.2832 14.1024C5.22646 14.4428 4.90396 14.6728 4.56348 14.616C4.22334 14.5591 3.99325 14.2375 4.0498 13.8973L4.48438 11.2918H2C1.65493 11.2918 1.37518 11.0118 1.375 10.6668C1.375 10.3216 1.65482 10.0418 2 10.0418H4.69238L5.37305 5.95782H2.66699C2.32181 5.95782 2.04199 5.678 2.04199 5.33282C2.04217 4.98779 2.32192 4.70782 2.66699 4.70782H5.58105L6.0498 1.89728C6.10655 1.55679 6.42905 1.32686 6.76953 1.3836C7.10985 1.44041 7.33981 1.76201 7.2832 2.10235L6.84863 4.70782H10.915L11.3838 1.89728C11.4405 1.55685 11.7621 1.32695 12.1025 1.3836ZM5.95996 10.0418H10.0264L10.707 5.95782H6.64062L5.95996 10.0418Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/index.ts b/packages/propel/src/icons/properties/index.ts
new file mode 100644
index 0000000..2b504e5
--- /dev/null
+++ b/packages/propel/src/icons/properties/index.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./boolean-icon";
+export * from "./comment-reply-icon";
+export * from "./dropdown-icon";
+export * from "./due-date-icon";
+export * from "./duplicate-icon";
+export * from "./estimate-icon";
+export * from "./hash-icon";
+export * from "./label-icon";
+export * from "./members-icon";
+export * from "./overdue-date-icon";
+export * from "./parent-icon";
+export * from "./priority-icon";
+export * from "./relates-to-icon";
+export * from "./relation-icon";
+export * from "./scope-icon";
+export * from "./start-date-icon";
+export * from "./state-icon";
+export * from "./user-circle-icon";
+export * from "./user-icon";
+export * from "./user-square-icon";
+export * from "./workflows-icon";
+export * from "./label-filled-icon";
diff --git a/packages/propel/src/icons/properties/label-filled-icon.tsx b/packages/propel/src/icons/properties/label-filled-icon.tsx
new file mode 100644
index 0000000..951f6ca
--- /dev/null
+++ b/packages/propel/src/icons/properties/label-filled-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function LabelFilledIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.884559 1.75908C1.07631 1.38275 1.38227 1.07679 1.75859 0.885047C2.01084 0.756518 2.27299 0.708974 2.53655 0.68744C2.78627 0.667037 3.08945 0.667048 3.44088 0.66706L6.50513 0.667026C6.77639 0.666773 7.01555 0.666551 7.24784 0.72232C7.45191 0.771314 7.647 0.852122 7.82595 0.96178C8.02964 1.0866 8.1986 1.25588 8.39023 1.44787L13.5614 6.61904C13.9408 6.9985 14.254 7.31168 14.4883 7.58765C14.7316 7.87428 14.9287 8.16432 15.041 8.50968C15.215 9.04526 15.215 9.62219 15.041 10.1578C14.9287 10.5031 14.7316 10.7932 14.4883 11.0798C14.254 11.3558 13.9408 11.6689 13.5614 12.0484L12.0479 13.5619C11.6685 13.9413 11.3553 14.2545 11.0793 14.4888C10.7927 14.7321 10.5026 14.9292 10.1573 15.0414C9.6217 15.2155 9.04477 15.2155 8.50919 15.0414C8.16383 14.9292 7.87379 14.7321 7.58716 14.4888C7.3112 14.2545 6.99802 13.9413 6.61856 13.5619L1.44738 8.39072C1.25539 8.19909 1.08611 8.03013 0.961291 7.82644C0.851634 7.64749 0.770825 7.4524 0.721832 7.24833C0.666062 7.01603 0.666285 6.77687 0.666537 6.5056L0.666571 3.44136C0.666559 3.08993 0.666549 2.78676 0.686952 2.53704C0.708486 2.27348 0.75603 2.01133 0.884559 1.75908ZM5.33325 4.00033C4.59687 4.00033 3.99992 4.59728 3.99992 5.33366C3.99992 6.07004 4.59687 6.66699 5.33325 6.66699C6.06963 6.66699 6.66658 6.07004 6.66658 5.33366C6.66658 4.59728 6.06963 4.00033 5.33325 4.00033Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/label-icon.tsx b/packages/propel/src/icons/properties/label-icon.tsx
new file mode 100644
index 0000000..a70dc19
--- /dev/null
+++ b/packages/propel/src/icons/properties/label-icon.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function LabelPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M5.00008 5.33366C5.18418 5.33366 5.33341 5.18442 5.33341 5.00033C5.33341 4.81623 5.18418 4.66699 5.00008 4.66699C4.81599 4.66699 4.66675 4.81623 4.66675 5.00033C4.66675 5.18442 4.81599 5.33366 5.00008 5.33366Z"
+        fill={color}
+      />
+      <path
+        d="M6.52889 0.787186C6.82526 0.787186 7.07583 0.782776 7.31795 0.840897C7.4677 0.876877 7.61266 0.930325 7.74959 1.00008L7.88338 1.07527V1.07625C8.0955 1.20626 8.26961 1.38532 8.47908 1.5948L13.5924 6.70711C13.9811 7.0958 14.2988 7.41437 14.5357 7.69344C14.7772 7.97795 14.9708 8.2628 15.0806 8.60066C15.252 9.12791 15.252 9.69649 15.0806 10.2237C14.9708 10.5616 14.7772 10.8464 14.5357 11.1309C14.2988 11.41 13.9811 11.7286 13.5924 12.1173L12.1178 13.5919C11.7291 13.9806 11.4105 14.2983 11.1314 14.5352C10.8469 14.7768 10.5621 14.9703 10.2242 15.0802C9.69697 15.2515 9.1284 15.2515 8.60115 15.0802C8.26329 14.9703 7.97844 14.7768 7.69392 14.5352C7.41486 14.2983 7.09629 13.9806 6.7076 13.5919L1.59529 8.47859C1.38581 8.26913 1.20675 8.09502 1.07674 7.88289H1.07576C0.968573 7.70785 0.889331 7.51701 0.841385 7.31746C0.783264 7.07534 0.787674 6.82478 0.787674 6.5284V3.54597C0.787674 3.18306 0.787479 2.87285 0.808182 2.61922C0.829506 2.35823 0.876501 2.10192 1.00154 1.85652C1.18928 1.48812 1.48863 1.18878 1.85701 1.00105C2.10241 0.876012 2.35872 0.829017 2.61971 0.807694C2.87334 0.786991 3.18355 0.787186 3.54646 0.787186H6.52889ZM5.51033 4.45906C5.99372 4.508 6.37068 4.91589 6.37068 5.41219C6.37068 5.94146 5.94195 6.37019 5.41267 6.37019C4.91638 6.37019 4.50849 5.99323 4.45955 5.50984L4.45467 5.41219L4.45955 5.31453C4.50849 4.83114 4.91638 4.45418 5.41267 4.45418L5.51033 4.45906ZM2.03767 6.5284C2.03767 6.88427 2.04165 6.96065 2.05721 7.02547C2.07449 7.09734 2.10259 7.16638 2.14119 7.22957H2.14217C2.17698 7.28637 2.22778 7.34351 2.47908 7.5948L7.59236 12.7071C7.99549 13.1102 8.27146 13.3859 8.50252 13.5821C8.72806 13.7736 8.86932 13.8532 8.98787 13.8917C9.264 13.9814 9.56145 13.9814 9.83748 13.8917C9.95606 13.8532 10.0973 13.7736 10.3228 13.5821C10.5539 13.3859 10.8299 13.1102 11.233 12.7071L12.7076 11.2325C13.1107 10.8294 13.3864 10.5534 13.5826 10.3223C13.7741 10.0968 13.8536 9.95557 13.8922 9.83699C13.9818 9.56097 13.9818 9.26351 13.8922 8.98738C13.8537 8.86883 13.7741 8.72757 13.5826 8.50203C13.3864 8.27097 13.1107 7.99501 12.7076 7.59187L7.59529 2.47859C7.344 2.2273 7.28686 2.17649 7.23006 2.14168V2.1407C7.16687 2.1021 7.09783 2.074 7.02596 2.05672C6.96114 2.04116 6.88475 2.03719 6.52889 2.03719H3.54646C3.16287 2.03719 2.91223 2.03722 2.72127 2.05281C2.53758 2.06782 2.4642 2.09405 2.42439 2.11433C2.29111 2.18224 2.18272 2.29063 2.11482 2.4239C2.09454 2.46372 2.06831 2.5371 2.0533 2.72078C2.03771 2.91174 2.03767 3.16238 2.03767 3.54597V6.5284Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/members-icon.tsx b/packages/propel/src/icons/properties/members-icon.tsx
new file mode 100644
index 0000000..5804ee5
--- /dev/null
+++ b/packages/propel/src/icons/properties/members-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function MembersPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M10.708 14C10.708 13.3702 10.7072 12.9287 10.6836 12.583C10.6604 12.2435 10.6173 12.0418 10.5527 11.8857C10.3455 11.3855 9.94754 10.9875 9.44727 10.7803C9.2912 10.7157 9.08953 10.6716 8.75 10.6484C8.40434 10.6249 7.96283 10.625 7.33301 10.625H5.33301C4.7032 10.625 4.26169 10.6249 3.91602 10.6484C3.57648 10.6716 3.37481 10.7157 3.21875 10.7803C2.71847 10.9875 2.3205 11.3855 2.11328 11.8857C2.0487 12.0418 2.00464 12.2435 1.98145 12.583C1.95786 12.9287 1.95801 13.3702 1.95801 14C1.95801 14.3452 1.67819 14.625 1.33301 14.625C0.987832 14.625 0.70801 14.3452 0.70801 14C0.70801 13.3873 0.707216 12.8961 0.734377 12.498C0.76193 12.0945 0.820736 11.741 0.958987 11.4072C1.29307 10.6007 1.93369 9.96008 2.74024 9.62598C3.07402 9.48772 3.42749 9.42892 3.83106 9.40137C4.22915 9.3742 4.72031 9.375 5.33301 9.375H7.33301C7.94572 9.375 8.43688 9.3742 8.83496 9.40137C9.23853 9.42892 9.592 9.48772 9.92578 9.62598C10.7323 9.96008 11.3729 10.6007 11.707 11.4072C11.8453 11.741 11.9041 12.0945 11.9316 12.498C11.9588 12.8961 11.958 13.3873 11.958 14C11.958 14.3452 11.6782 14.625 11.333 14.625C10.9878 14.625 10.708 14.3452 10.708 14ZM14.041 14V12.667C14.041 11.7166 13.3914 10.9163 12.5107 10.6895C12.1765 10.6034 11.9755 10.262 12.0615 9.92773C12.1478 9.59378 12.4882 9.39251 12.8223 9.47852C14.2418 9.84395 15.291 11.1324 15.291 12.667V14C15.291 14.3452 15.0112 14.625 14.666 14.625C14.321 14.6248 14.041 14.3451 14.041 14ZM8.375 4.66699C8.375 3.53941 7.46057 2.625 6.33301 2.625C5.20543 2.625 4.29102 3.53941 4.29102 4.66699C4.29119 5.79443 5.20554 6.70801 6.33301 6.70801C7.46046 6.70801 8.37483 5.79442 8.375 4.66699ZM11.375 4.66699C11.375 3.81123 10.8479 3.07683 10.0986 2.77344C9.77868 2.64392 9.62439 2.27894 9.75391 1.95898C9.88353 1.63935 10.2476 1.48494 10.5674 1.61426C11.7725 2.1021 12.625 3.28458 12.625 4.66699C12.6249 6.04925 11.7725 7.231 10.5674 7.71875C10.2475 7.84818 9.88345 7.69386 9.75391 7.37402C9.62442 7.05408 9.77871 6.69007 10.0986 6.56055C10.8479 6.2573 11.3749 5.52271 11.375 4.66699ZM9.625 4.66699C9.62483 6.48478 8.15081 7.95801 6.33301 7.95801C4.51518 7.95801 3.04119 6.48478 3.04102 4.66699C3.04102 2.84905 4.51507 1.375 6.33301 1.375C8.15092 1.375 9.625 2.84905 9.625 4.66699Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/overdue-date-icon.tsx b/packages/propel/src/icons/properties/overdue-date-icon.tsx
new file mode 100644
index 0000000..0358902
--- /dev/null
+++ b/packages/propel/src/icons/properties/overdue-date-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function OverdueDatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM9.22461 8.55762C9.46865 8.31362 9.86433 8.31367 10.1084 8.55762C10.3525 8.80168 10.3524 9.19733 10.1084 9.44141L8.88379 10.666L10.1084 11.8906C10.3525 12.1347 10.3525 12.5313 10.1084 12.7754C9.86437 13.0191 9.46861 13.0192 9.22461 12.7754L8 11.5498L6.77539 12.7754C6.53143 13.0192 6.13567 13.0191 5.8916 12.7754C5.64752 12.5313 5.64752 12.1347 5.8916 11.8906L7.11523 10.666L5.8916 9.44141C5.64752 9.19733 5.64752 8.80169 5.8916 8.55762C6.1357 8.31374 6.53138 8.31361 6.77539 8.55762L8 9.78223L9.22461 8.55762ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/parent-icon.tsx b/packages/propel/src/icons/properties/parent-icon.tsx
new file mode 100644
index 0000000..ba8e829
--- /dev/null
+++ b/packages/propel/src/icons/properties/parent-icon.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ParentPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 2.66699C13.375 2.64398 13.356 2.625 13.333 2.625H2.66699C2.64398 2.625 2.625 2.64398 2.625 2.66699V6C2.625 6.02301 2.64398 6.04199 2.66699 6.04199H13.333C13.356 6.04199 13.375 6.02301 13.375 6V2.66699ZM14.625 6C14.625 6.71337 14.0464 7.29199 13.333 7.29199H2.66699C1.95362 7.29199 1.375 6.71337 1.375 6V2.66699C1.375 1.95362 1.95362 1.375 2.66699 1.375H13.333C14.0464 1.375 14.625 1.95362 14.625 2.66699V6Z"
+        fill={color}
+      />
+      <path
+        d="M13.3755 10C13.3755 9.97699 13.3565 9.95801 13.3335 9.95801H10.0005C9.97748 9.95801 9.9585 9.97699 9.9585 10V13.333C9.9585 13.356 9.97748 13.375 10.0005 13.375H13.3335C13.3565 13.375 13.3755 13.356 13.3755 13.333V10ZM14.6255 13.333C14.6255 14.0464 14.0469 14.625 13.3335 14.625H10.0005C9.28712 14.625 8.7085 14.0464 8.7085 13.333V10C8.7085 9.28663 9.28712 8.70801 10.0005 8.70801H13.3335C14.0469 8.70801 14.6255 9.28663 14.6255 10V13.333Z"
+        fill={color}
+      />
+      <path
+        d="M2.76367 10.5996V10.4033L2.41797 10.7148C2.16139 10.9455 1.766 10.9245 1.53516 10.668C1.30445 10.4114 1.32553 10.016 1.58203 9.78516L2.9707 8.53516L3.06543 8.46484C3.29681 8.32476 3.59877 8.34834 3.80664 8.53516L5.19629 9.78516C5.45278 10.0161 5.47307 10.4114 5.24219 10.668C5.01128 10.9245 4.61594 10.9458 4.35938 10.7148L4.01367 10.4033V10.5996C4.01367 11.0309 4.01466 11.313 4.03418 11.5283C4.05286 11.734 4.08474 11.8209 4.11426 11.873C4.20505 12.0334 4.35735 12.1758 4.55957 12.2686C4.64109 12.3059 4.76292 12.3385 5.00684 12.3564C5.25649 12.3748 5.57974 12.375 6.05566 12.375H7C7.34518 12.375 7.625 12.6548 7.625 13C7.625 13.3452 7.34518 13.625 7 13.625H6.05566C5.59824 13.625 5.22121 13.6251 4.91504 13.6025C4.60331 13.5796 4.31307 13.5304 4.03809 13.4043C3.61331 13.2094 3.25509 12.8932 3.02637 12.4893C2.87424 12.2205 2.81579 11.936 2.78906 11.6416C2.76321 11.3567 2.76367 11.0082 2.76367 10.5996Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/priority-icon.tsx b/packages/propel/src/icons/properties/priority-icon.tsx
new file mode 100644
index 0000000..05ea78d
--- /dev/null
+++ b/packages/propel/src/icons/properties/priority-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function PriorityPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M3.375 13.334V10.667C3.375 10.3218 3.65482 10.042 4 10.042C4.34518 10.042 4.625 10.3218 4.625 10.667V13.334C4.62482 13.679 4.34507 13.959 4 13.959C3.65493 13.959 3.37518 13.679 3.375 13.334ZM7.375 13.334V6.66699C7.375 6.32181 7.65482 6.04199 8 6.04199C8.34518 6.04199 8.625 6.32181 8.625 6.66699V13.334C8.62482 13.679 8.34507 13.959 8 13.959C7.65493 13.959 7.37518 13.679 7.375 13.334ZM11.375 13.334V2.66699C11.375 2.32181 11.6548 2.04199 12 2.04199C12.3452 2.04199 12.625 2.32181 12.625 2.66699V13.334C12.6248 13.679 12.3451 13.959 12 13.959C11.6549 13.959 11.3752 13.679 11.375 13.334Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/relates-to-icon.tsx b/packages/propel/src/icons/properties/relates-to-icon.tsx
new file mode 100644
index 0000000..6183584
--- /dev/null
+++ b/packages/propel/src/icons/properties/relates-to-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function RelatesToPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 14V13.4746C13.375 12.8344 13.3748 12.3916 13.3467 12.0479C13.3192 11.7115 13.2675 11.5255 13.1973 11.3877C13.0415 11.0819 12.7931 10.8326 12.4873 10.6768C12.3496 10.6066 12.1632 10.5558 11.8271 10.5283C11.4833 10.5002 11.0398 10.5 10.3994 10.5H9.50879L10.3164 11.3076C10.5605 11.5517 10.5605 11.9483 10.3164 12.1924C10.0723 12.436 9.67656 12.4362 9.43262 12.1924L7.55762 10.3174C7.31354 10.0733 7.31354 9.67669 7.55762 9.43262L9.43262 7.55762C9.67656 7.31375 10.0723 7.31398 10.3164 7.55762C10.5605 7.8017 10.5605 8.19831 10.3164 8.44238L9.50879 9.25H10.3994C11.0192 9.25 11.5222 9.24999 11.9287 9.2832C12.3424 9.31701 12.7114 9.3886 13.0547 9.56348C13.5955 9.83905 14.0359 10.2785 14.3115 10.8193C14.4865 11.1628 14.558 11.5325 14.5918 11.9463C14.625 12.3528 14.625 12.855 14.625 13.4746V14C14.625 14.3451 14.3451 14.6249 14 14.625C13.6548 14.625 13.375 14.3452 13.375 14ZM13.375 7.16699V5.2002C13.375 4.62993 13.3743 4.23962 13.3496 3.9375C13.3255 3.64301 13.2821 3.48711 13.2256 3.37598C13.0938 3.11726 12.8828 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62993 2.625 4.23962 2.62572 3.9375 2.65039C3.643 2.67445 3.48711 2.71787 3.37598 2.77441C3.11726 2.90622 2.90622 3.11726 2.77441 3.37598C2.71787 3.48711 2.67445 3.643 2.65039 3.9375C2.62572 4.23962 2.625 4.62993 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8828 3.11726 13.0938 3.37598 13.2256C3.48711 13.2821 3.64301 13.3255 3.9375 13.3496C4.23962 13.3743 4.62993 13.375 5.2002 13.375H8C8.34518 13.375 8.625 13.6548 8.625 14C8.625 14.3452 8.34518 14.625 8 14.625H5.2002C4.65066 14.625 4.20072 14.6255 3.83594 14.5957C3.46387 14.5653 3.12524 14.5001 2.80859 14.3389C2.31464 14.0872 1.91278 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65066 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49986 3.12523 1.66113 2.80859C1.91279 2.31464 2.31464 1.91279 2.80859 1.66113C3.12523 1.49986 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65066 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49985 13.1914 1.66113C13.6853 1.91278 14.0872 2.31464 14.3389 2.80859C14.5001 3.12524 14.5653 3.46387 14.5957 3.83594C14.6255 4.20072 14.625 4.65066 14.625 5.2002V7.16699C14.625 7.51216 14.3452 7.79198 14 7.79199C13.6549 7.79194 13.375 7.51213 13.375 7.16699Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/relation-icon.tsx b/packages/propel/src/icons/properties/relation-icon.tsx
new file mode 100644
index 0000000..293f151
--- /dev/null
+++ b/packages/propel/src/icons/properties/relation-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function RelationPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 13.333C13.375 12.9419 13.0581 12.6252 12.667 12.625C12.2758 12.625 11.958 12.9418 11.958 13.333C11.958 13.7242 12.2758 14.041 12.667 14.041C13.0581 14.0408 13.375 13.7241 13.375 13.333ZM13.375 8C13.375 7.60889 13.0581 7.29119 12.667 7.29102C12.2758 7.29102 11.958 7.60878 11.958 8C11.9582 8.39107 12.2759 8.70801 12.667 8.70801C13.058 8.70783 13.3748 8.39096 13.375 8ZM2.625 8C2.62518 8.39096 2.94206 8.70783 3.33301 8.70801C3.72411 8.70801 4.04182 8.39107 4.04199 8C4.04199 7.60878 3.72422 7.29102 3.33301 7.29102C2.94195 7.29119 2.625 7.60889 2.625 8ZM13.375 2.66602C13.3748 2.27507 13.058 1.95818 12.667 1.95801C12.2759 1.95801 11.9582 2.27496 11.958 2.66602C11.958 3.05722 12.2758 3.375 12.667 3.375C13.0581 3.37482 13.375 3.05712 13.375 2.66602ZM14.625 2.66602C14.625 3.74746 13.7484 4.62482 12.667 4.625C11.8047 4.625 11.0729 4.06708 10.8115 3.29297C10.4437 3.29422 10.1655 3.29779 9.9375 3.31641C9.64277 3.34049 9.48713 3.38481 9.37598 3.44141C9.11726 3.57322 8.90623 3.78326 8.77441 4.04199C8.71782 4.15308 8.67448 4.30883 8.65039 4.60352C8.6257 4.90564 8.625 5.29591 8.625 5.86621V7.375H10.8115C11.0724 6.59996 11.804 6.04102 12.667 6.04102C13.7484 6.04119 14.625 6.91853 14.625 8C14.6248 9.08132 13.7483 9.95783 12.667 9.95801C11.8042 9.95801 11.0726 9.39973 10.8115 8.625H8.625V10.1328C8.625 10.7031 8.62572 11.0934 8.65039 11.3955C8.67445 11.69 8.71787 11.8459 8.77441 11.957C8.90622 12.2157 9.11726 12.4268 9.37598 12.5586C9.4871 12.6151 9.643 12.6586 9.9375 12.6826C10.1655 12.7012 10.4436 12.7048 10.8115 12.7061C11.073 11.9321 11.8048 11.375 12.667 11.375C13.7484 11.3752 14.625 12.2515 14.625 13.333C14.625 14.4145 13.7484 15.2908 12.667 15.291C11.803 15.291 11.0706 14.7315 10.8105 13.9551C10.4333 13.9538 10.1105 13.9511 9.83594 13.9287C9.46387 13.8983 9.12523 13.8331 8.80859 13.6719C8.31464 13.4202 7.91279 13.0184 7.66113 12.5244C7.49986 12.2078 7.4347 11.8691 7.4043 11.4971C7.37452 11.1323 7.375 10.6823 7.375 10.1328V8.625H5.18848C4.92744 9.39974 4.19576 9.95801 3.33301 9.95801C2.25171 9.95783 1.37518 9.08133 1.375 8C1.375 6.91852 2.25161 6.04119 3.33301 6.04102C4.19598 6.04102 4.92761 6.59996 5.18848 7.375H7.375V5.86621C7.375 5.31659 7.3745 4.86677 7.4043 4.50195C7.4347 4.1298 7.49975 3.79132 7.66113 3.47461L7.7627 3.29395C8.01489 2.88278 8.37641 2.54735 8.80859 2.32715C9.1252 2.16593 9.46392 2.10071 9.83594 2.07031C10.1105 2.0479 10.4333 2.0442 10.8105 2.04297C11.071 1.26718 11.8035 0.708008 12.667 0.708008C13.7483 0.708184 14.6248 1.58472 14.625 2.66602Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/scope-icon.tsx b/packages/propel/src/icons/properties/scope-icon.tsx
new file mode 100644
index 0000000..a49045a
--- /dev/null
+++ b/packages/propel/src/icons/properties/scope-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ScopePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M8.00049 0.708008C12.0274 0.708184 15.2915 3.97303 15.2915 8C15.2913 12.0268 12.0273 15.2908 8.00049 15.291C3.97352 15.291 0.708672 12.0269 0.708496 8C0.708496 3.97292 3.97341 0.708008 8.00049 0.708008ZM7.37549 4V1.98926C4.53761 2.28073 2.28224 4.53713 1.99072 7.375H4.00049C4.34552 7.37518 4.62549 7.65493 4.62549 8C4.62531 8.34492 4.34541 8.62482 4.00049 8.625H1.99072C2.28252 11.4625 4.53789 13.7173 7.37549 14.0088V12C7.37549 11.6548 7.65531 11.375 8.00049 11.375C8.34552 11.3752 8.62549 11.6549 8.62549 12V14.0078C11.4627 13.716 13.7175 11.4622 14.0093 8.625H12.0005C11.6554 8.625 11.3757 8.34503 11.3755 8C11.3755 7.65482 11.6553 7.375 12.0005 7.375H14.0093C13.7178 4.5374 11.463 2.28203 8.62549 1.99023V4C8.62531 4.34492 8.34541 4.62482 8.00049 4.625C7.65542 4.625 7.37566 4.34503 7.37549 4Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/start-date-icon.tsx b/packages/propel/src/icons/properties/start-date-icon.tsx
new file mode 100644
index 0000000..abd1b87
--- /dev/null
+++ b/packages/propel/src/icons/properties/start-date-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function StartDatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.2085 10.833C14.2085 8.96905 12.6974 7.45801 10.8335 7.45801C8.96953 7.45801 7.4585 8.96905 7.4585 10.833C7.4585 12.697 8.96954 14.208 10.8335 14.208C12.6974 14.208 14.2085 12.6969 14.2085 10.833ZM10.2085 8.43262C10.2087 8.08762 10.4884 7.80762 10.8335 7.80762C11.1785 7.80762 11.4583 8.08762 11.4585 8.43262V10.4463L12.7134 11.0742C13.0217 11.2286 13.1467 11.6036 12.9927 11.9121C12.8383 12.2208 12.4625 12.3468 12.1538 12.1924L10.5542 11.3916C10.3425 11.2857 10.2085 11.0697 10.2085 10.833V8.43262ZM9.87549 3.83301V3.12402H5.7915V3.83301C5.79133 4.17804 5.51157 4.45801 5.1665 4.45801C4.82158 4.45783 4.54168 4.17793 4.5415 3.83301V3.12598C4.22421 3.12782 3.97711 3.13258 3.771 3.14941C3.47622 3.1735 3.32058 3.21782 3.20947 3.27441C2.95075 3.40624 2.73974 3.61628 2.60791 3.875C2.55132 3.98609 2.50797 4.14184 2.48389 4.43652C2.4592 4.73865 2.4585 5.12892 2.4585 5.69922V5.87402H5.8335C6.17857 5.87402 6.45832 6.154 6.4585 6.49902C6.4585 6.8442 6.17867 7.12402 5.8335 7.12402H2.4585V11.2998C2.4585 11.8699 2.45921 12.2604 2.48389 12.5625C2.50799 12.857 2.55131 13.0129 2.60791 13.124C2.73973 13.3827 2.95079 13.5928 3.20947 13.7246C3.32057 13.7812 3.47633 13.8255 3.771 13.8496C4.07311 13.8743 4.46347 13.874 5.03369 13.874C5.37867 13.8741 5.65852 14.1541 5.65869 14.499C5.65869 14.8441 5.37878 15.1239 5.03369 15.124C4.48416 15.124 4.03422 15.1245 3.66943 15.0947C3.29733 15.0643 2.95876 14.9992 2.64209 14.8379C2.14825 14.5863 1.74631 14.1852 1.49463 13.6914C1.33331 13.3748 1.26821 13.0361 1.23779 12.6641C1.20799 12.2993 1.2085 11.8494 1.2085 11.2998V5.69922C1.2085 5.14959 1.20799 4.69977 1.23779 4.33496C1.2682 3.96281 1.33326 3.62432 1.49463 3.30762C1.7463 2.8137 2.14817 2.41182 2.64209 2.16016C2.95869 1.99893 3.29743 1.93371 3.66943 1.90332C3.91882 1.88297 4.20796 1.87787 4.5415 1.87598V1.16602C4.5415 0.820946 4.82148 0.541192 5.1665 0.541016C5.51168 0.541016 5.7915 0.820838 5.7915 1.16602V1.87402H9.87549V1.16602C9.87549 0.820838 10.1553 0.541016 10.5005 0.541016C10.8455 0.541191 11.1255 0.820946 11.1255 1.16602V1.87598C11.459 1.87787 11.7482 1.88297 11.9976 1.90332C12.3696 1.93372 12.7083 1.99894 13.0249 2.16016C13.5188 2.41183 13.9207 2.8137 14.1724 3.30762L14.228 3.42773C14.349 3.70973 14.4026 4.00936 14.4292 4.33496C14.459 4.69977 14.4585 5.1496 14.4585 5.69922C14.4585 6.0444 14.1787 6.32422 13.8335 6.32422C13.4883 6.32422 13.2085 6.0444 13.2085 5.69922C13.2085 5.12893 13.2078 4.73865 13.1831 4.43652C13.159 4.14184 13.1157 3.98609 13.0591 3.875C12.9273 3.61627 12.7162 3.40623 12.4575 3.27441C12.3464 3.21781 12.1907 3.17349 11.896 3.14941C11.6899 3.13258 11.4428 3.12782 11.1255 3.12598V3.83301C11.1253 4.17793 10.8454 4.45783 10.5005 4.45801C10.1554 4.45801 9.87566 4.17804 9.87549 3.83301ZM15.4585 10.833C15.4585 13.3873 13.3878 15.458 10.8335 15.458C8.27918 15.458 6.2085 13.3873 6.2085 10.833C6.2085 8.27869 8.27918 6.20801 10.8335 6.20801C13.3878 6.20801 15.4585 8.27869 15.4585 10.833Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/state-icon.tsx b/packages/propel/src/icons/properties/state-icon.tsx
new file mode 100644
index 0000000..350ef35
--- /dev/null
+++ b/packages/propel/src/icons/properties/state-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function StatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM11.375 8C11.375 6.13612 9.86383 4.62513 8 4.625C6.13604 4.625 4.625 6.13604 4.625 8C4.625 9.86394 6.13604 11.375 8 11.375C9.86383 11.3749 11.375 9.86386 11.375 8ZM12.625 8C12.625 10.5542 10.5542 12.6249 8 12.625C5.44568 12.625 3.375 10.5543 3.375 8C3.375 5.44568 5.44568 3.375 8 3.375C10.5542 3.37513 12.625 5.44576 12.625 8ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/user-circle-icon.tsx b/packages/propel/src/icons/properties/user-circle-icon.tsx
new file mode 100644
index 0000000..8fe424b
--- /dev/null
+++ b/packages/propel/src/icons/properties/user-circle-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function UserCirclePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95809 9.50928 2.51265 10.8884 3.42773 11.9473C4.03051 11.1928 4.958 10.708 6 10.708H10C11.0413 10.7081 11.9676 11.1926 12.5703 11.9463C13.4854 10.8874 14.0409 9.50932 14.041 8ZM6 11.958C5.31831 11.958 4.71294 12.2919 4.3418 12.8066C5.35728 13.5806 6.62467 14.041 8 14.041C9.37482 14.0409 10.641 13.5801 11.6562 12.8066C11.2851 12.2923 10.6813 11.9581 10 11.958H6ZM10.041 6.33301C10.041 5.20554 9.12741 4.29119 8 4.29102C6.87242 4.29102 5.95801 5.20543 5.95801 6.33301C5.95801 7.46057 6.87242 8.375 8 8.375C9.12741 8.37482 10.041 7.46045 10.041 6.33301ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8ZM11.291 6.33301C11.291 8.15081 9.81776 9.62482 8 9.625C6.18206 9.625 4.70801 8.15091 4.70801 6.33301C4.70801 4.51507 6.18206 3.04102 8 3.04102C9.81776 3.04119 11.291 4.51517 11.291 6.33301Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/user-icon.tsx b/packages/propel/src/icons/properties/user-icon.tsx
new file mode 100644
index 0000000..17f0aa4
--- /dev/null
+++ b/packages/propel/src/icons/properties/user-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function UserPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M12.7085 14C12.7085 13.0241 12.7018 12.6747 12.6207 12.4072C12.4227 11.7547 11.9118 11.2438 11.2593 11.0459C10.9919 10.9648 10.6424 10.958 9.66655 10.958H6.33354C5.3581 10.958 5.00819 10.9649 4.74077 11.0459C4.08831 11.2438 3.57741 11.7547 3.37944 12.4072C3.29831 12.6747 3.29155 13.0241 3.29155 14C3.29155 14.3452 3.01173 14.625 2.66655 14.625C2.32137 14.625 2.04155 14.3452 2.04155 14C2.04155 13.1153 2.03476 12.5344 2.18315 12.0449C2.50227 10.9929 3.32548 10.1688 4.37749 9.84961C4.86708 9.70113 5.44863 9.70801 6.33354 9.70801H9.66655C10.5512 9.70801 11.1321 9.70127 11.6216 9.84961C12.6736 10.1687 13.4978 10.9929 13.8169 12.0449C13.9653 12.5344 13.9585 13.1153 13.9585 14C13.9585 14.3451 13.6786 14.6248 13.3335 14.625C12.9884 14.625 12.7085 14.3452 12.7085 14ZM10.3746 5C10.3746 3.68832 9.31125 2.625 7.99956 2.625C6.68803 2.62518 5.62456 3.68843 5.62456 5C5.62456 6.31157 6.68803 7.37482 7.99956 7.375C9.31125 7.375 10.3746 6.31168 10.3746 5ZM11.6246 5C11.6246 7.00203 10.0016 8.625 7.99956 8.625C5.99768 8.62482 4.37456 7.00192 4.37456 5C4.37456 2.99808 5.99768 1.37518 7.99956 1.375C10.0016 1.375 11.6246 2.99797 11.6246 5Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/user-square-icon.tsx b/packages/propel/src/icons/properties/user-square-icon.tsx
new file mode 100644
index 0000000..a46a766
--- /dev/null
+++ b/packages/propel/src/icons/properties/user-square-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function UserSquarePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M10.0002 10.708C10.5896 10.708 10.9757 10.7052 11.3088 10.7715C12.5974 11.0278 13.6061 12.0256 13.8821 13.3066C13.8849 13.3012 13.8891 13.2965 13.8918 13.291C13.9484 13.1799 13.9927 13.0241 14.0168 12.7295C14.0415 12.4274 14.0413 12.0369 14.0413 11.4668V4.5332C14.0413 3.96299 14.0415 3.57263 14.0168 3.27051C13.9928 2.97585 13.9484 2.82009 13.8918 2.70898C13.76 2.45032 13.5499 2.23925 13.2913 2.10742C13.1802 2.05083 13.0243 2.0075 12.7297 1.9834C12.4277 1.95872 12.0372 1.95801 11.467 1.95801H4.53345C3.9632 1.95801 3.57288 1.95873 3.27075 1.9834C2.97621 2.00746 2.82032 2.05089 2.70923 2.10742C2.45051 2.23925 2.23949 2.45026 2.10767 2.70898C2.05113 2.82008 2.00771 2.97597 1.98364 3.27051C1.95897 3.57263 1.95825 3.96295 1.95825 4.5332V11.4668C1.95825 12.0369 1.95896 12.4274 1.98364 12.7295C2.00774 13.024 2.05108 13.18 2.10767 13.291C2.11038 13.2963 2.11368 13.3014 2.11646 13.3066C2.39233 12.0255 3.40219 11.028 4.69067 10.7715C5.02386 10.7052 5.41066 10.708 6.00024 10.708H10.0002ZM6.00024 11.958C5.35075 11.958 5.11682 11.9609 4.93481 11.9971C4.12495 12.1582 3.49239 12.7917 3.3313 13.6016C3.31156 13.7009 3.30207 13.8175 3.29712 14.0146C3.57489 14.035 3.95859 14.041 4.53345 14.041H11.467C12.0414 14.041 12.4247 14.035 12.7024 14.0146C12.6974 13.8176 12.6889 13.7008 12.6692 13.6016C12.5081 12.7917 11.8746 12.1582 11.0647 11.9971C10.8828 11.9609 10.6492 11.958 10.0002 11.958H6.00024ZM10.0413 6.33301C10.0413 5.20554 9.12768 4.29119 8.00024 4.29102C6.87266 4.29102 5.95825 5.20543 5.95825 6.33301C5.95825 7.46059 6.87266 8.375 8.00024 8.375C9.12768 8.37482 10.0413 7.46048 10.0413 6.33301ZM11.2913 6.33301C11.2913 8.15084 9.81803 9.62482 8.00024 9.625C6.18231 9.625 4.70825 8.15095 4.70825 6.33301C4.70825 4.51507 6.18231 3.04102 8.00024 3.04102C9.81803 3.04119 11.2913 4.51518 11.2913 6.33301ZM15.2913 11.4668C15.2913 12.0163 15.2918 12.4663 15.262 12.8311C15.2315 13.2031 15.1665 13.5418 15.0051 13.8584C14.7535 14.352 14.3522 14.7533 13.8586 15.0049C13.7479 15.0613 13.6335 15.1066 13.5149 15.1426C13.0021 15.2979 12.3428 15.291 11.467 15.291H4.53345C3.65757 15.291 2.99845 15.2979 2.4856 15.1426C2.36691 15.1066 2.25269 15.0614 2.14185 15.0049C1.64801 14.7533 1.24606 14.3522 0.994385 13.8584C0.833048 13.5418 0.767963 13.2031 0.737549 12.8311C0.707748 12.4663 0.708252 12.0163 0.708253 11.4668V4.5332C0.708253 3.98368 0.707775 3.53373 0.737549 3.16895C0.767948 2.79689 0.833107 2.45824 0.994385 2.1416C1.24605 1.64768 1.64792 1.24581 2.14185 0.994141C2.45848 0.832863 2.79713 0.767704 3.16919 0.737305C3.53397 0.70753 3.98392 0.708008 4.53345 0.708008H11.467C12.0166 0.708008 12.4665 0.707503 12.8313 0.737305C13.2034 0.767719 13.542 0.832804 13.8586 0.994141C14.3524 1.24582 14.7535 1.64777 15.0051 2.1416C15.1665 2.45827 15.2316 2.79683 15.262 3.16895C15.2917 3.53373 15.2913 3.98367 15.2913 4.5332V11.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/workflows-icon.tsx b/packages/propel/src/icons/properties/workflows-icon.tsx
new file mode 100644
index 0000000..114104e
--- /dev/null
+++ b/packages/propel/src/icons/properties/workflows-icon.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function WorkflowsPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M6.70801 3.33301C6.70783 2.94196 6.39109 2.625 6 2.625H3.33301C2.94206 2.62518 2.62518 2.94206 2.625 3.33301V6C2.625 6.39109 2.94196 6.70783 3.33301 6.70801H6C6.3912 6.70801 6.70801 6.3912 6.70801 6V3.33301ZM7.95801 6C7.95801 7.08156 7.08156 7.95801 6 7.95801H3.33301C2.2516 7.95783 1.375 7.08145 1.375 6V3.33301C1.37518 2.25171 2.25171 1.37518 3.33301 1.375H6C7.08145 1.375 7.95783 2.2516 7.95801 3.33301V6Z"
+        fill={color}
+      />
+      <path
+        d="M4.04167 10.0003V7.33333C4.04167 6.98816 4.32149 6.70833 4.66667 6.70833C5.01184 6.70833 5.29167 6.98816 5.29167 7.33333V10.0003C5.29175 10.1881 5.36594 10.3685 5.4987 10.5013C5.63146 10.6341 5.81193 10.7082 5.99967 10.7083H8.66667C9.01185 10.7083 9.29167 10.9882 9.29167 11.3333C9.29167 11.6785 9.01185 11.9583 8.66667 11.9583H5.99967C5.48041 11.9582 4.98209 11.7523 4.61491 11.3851C4.24773 11.0179 4.04175 10.5196 4.04167 10.0003Z"
+        fill={color}
+      />
+      <path
+        d="M13.3747 9.99967C13.3745 9.60862 13.0578 9.29167 12.6667 9.29167H9.99967C9.60873 9.29184 9.29184 9.60873 9.29167 9.99967V12.6667C9.29167 13.0578 9.60862 13.3745 9.99967 13.3747H12.6667C13.0579 13.3747 13.3747 13.0579 13.3747 12.6667V9.99967ZM14.6247 12.6667C14.6247 13.7482 13.7482 14.6247 12.6667 14.6247H9.99967C8.91827 14.6245 8.04167 13.7481 8.04167 12.6667V9.99967C8.04184 8.91838 8.91838 8.04184 9.99967 8.04167H12.6667C13.7481 8.04167 14.6245 8.91827 14.6247 9.99967V12.6667Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/registry.ts b/packages/propel/src/icons/registry.ts
new file mode 100644
index 0000000..64a6934
--- /dev/null
+++ b/packages/propel/src/icons/registry.ts
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Action icons
+import {
+  AddIcon,
+  AddReactionIcon,
+  AddWorkItemIcon,
+  CheckIcon,
+  CloseIcon,
+  CopyIcon,
+  EditIcon,
+  FilterAppliedIcon,
+  FilterIcon,
+  GlobeIcon,
+  LinkIcon,
+  LockIcon,
+  NewTabIcon,
+  PlusIcon,
+  PreferencesIcon,
+  SearchIcon,
+  TrashIcon,
+  UpgradeIcon,
+} from "./actions";
+// Arrow icons
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ReplyIcon } from "./arrows";
+// Default icon
+import { DefaultIcon } from "./default-icon";
+// Layout icons
+import {
+  BoardLayoutIcon,
+  CalendarLayoutIcon,
+  CardLayoutIcon,
+  GridLayoutIcon,
+  ListLayoutIcon,
+  SheetLayoutIcon,
+  TimelineLayoutIcon,
+} from "./layouts";
+// Misc icons
+import { InfoIcon } from "./misc";
+// Project icons
+import { CycleIcon, EpicIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "./project";
+// Property icons
+import {
+  BooleanPropertyIcon,
+  DropdownPropertyIcon,
+  DueDatePropertyIcon,
+  DuplicatePropertyIcon,
+  EstimatePropertyIcon,
+  HashPropertyIcon,
+  LabelPropertyIcon,
+  MembersPropertyIcon,
+  OverdueDatePropertyIcon,
+  ParentPropertyIcon,
+  PriorityPropertyIcon,
+  RelatesToPropertyIcon,
+  RelationPropertyIcon,
+  ScopePropertyIcon,
+  StartDatePropertyIcon,
+  StatePropertyIcon,
+  UserCirclePropertyIcon,
+  UserPropertyIcon,
+  UserSquarePropertyIcon,
+  WorkflowsPropertyIcon,
+} from "./properties";
+// Sub-brand icons
+import { CopyLinkIcon } from "./actions/copy-link";
+import { LabelFilledIcon } from "./properties/label-filled-icon";
+import { PiChatLogo, PlaneNewIcon, WikiIcon } from "./sub-brand";
+// Workspace icons
+import {
+  AnalyticsIcon,
+  ArchiveIcon,
+  DashboardIcon,
+  DraftIcon,
+  HomeIcon,
+  InboxIcon,
+  MultipleStickyIcon,
+  ProjectIcon,
+  YourWorkIcon,
+} from "./workspace";
+
+export const ICON_REGISTRY = {
+  // Sub-brand icons
+  "sub-brand.plane": PlaneNewIcon,
+  "sub-brand.wiki": WikiIcon,
+  "sub-brand.pi-chat": PiChatLogo,
+
+  // Workspace icons
+  "workspace.analytics": AnalyticsIcon,
+  "workspace.archive": ArchiveIcon,
+  "workspace.cycle": CycleIcon,
+  "workspace.dashboard": DashboardIcon,
+  "workspace.draft": DraftIcon,
+  "workspace.home": HomeIcon,
+  "workspace.inbox": InboxIcon,
+  "workspace.multiple-sticky": MultipleStickyIcon,
+  "workspace.page": PageIcon,
+  "workspace.project": ProjectIcon,
+  "workspace.views": ViewsIcon,
+  "workspace.your-work": YourWorkIcon,
+
+  // Project icons
+  "project.cycle": CycleIcon,
+  "project.epic": EpicIcon,
+  "project.intake": IntakeIcon,
+  "project.module": ModuleIcon,
+  "project.page": PageIcon,
+  "project.view": ViewsIcon,
+  "project.work-items": WorkItemsIcon,
+
+  // Layout icons
+  "layout.calendar": CalendarLayoutIcon,
+  "layout.card": CardLayoutIcon,
+  "layout.timeline": TimelineLayoutIcon,
+  "layout.grid": GridLayoutIcon,
+  "layout.board": BoardLayoutIcon,
+  "layout.list": ListLayoutIcon,
+  "layout.sheet": SheetLayoutIcon,
+
+  // Property icons
+  "property.boolean": BooleanPropertyIcon,
+  "property.dropdown": DropdownPropertyIcon,
+  "property.due-date": DueDatePropertyIcon,
+  "property.duplicate": DuplicatePropertyIcon,
+  "property.estimate": EstimatePropertyIcon,
+  "property.hash": HashPropertyIcon,
+  "property.label": LabelPropertyIcon,
+  "property.members": MembersPropertyIcon,
+  "property.overdue-date": OverdueDatePropertyIcon,
+  "property.parent": ParentPropertyIcon,
+  "property.priority": PriorityPropertyIcon,
+  "property.relates-to": RelatesToPropertyIcon,
+  "property.relation": RelationPropertyIcon,
+  "property.scope": ScopePropertyIcon,
+  "property.start-date": StartDatePropertyIcon,
+  "property.state": StatePropertyIcon,
+  "property.user-circle": UserCirclePropertyIcon,
+  "property.user": UserPropertyIcon,
+  "property.user-square": UserSquarePropertyIcon,
+  "property.workflows": WorkflowsPropertyIcon,
+  "property.label-filled": LabelFilledIcon,
+
+  // Action icons
+  "action.add": AddIcon,
+  "action.add-workitem": AddWorkItemIcon,
+  "action.add-reaction": AddReactionIcon,
+  "action.check": CheckIcon,
+  "action.close": CloseIcon,
+  "action.copy": CopyIcon,
+  "action.edit": EditIcon,
+  "action.globe": GlobeIcon,
+  "action.link": LinkIcon,
+  "action.lock": LockIcon,
+  "action.new-tab": NewTabIcon,
+  "action.filter": FilterIcon,
+  "action.filter-applied": FilterAppliedIcon,
+  "action.search": SearchIcon,
+  "action.plus": PlusIcon,
+  "action.preferences": PreferencesIcon,
+  "action.trash": TrashIcon,
+  "action.copy-link": CopyLinkIcon,
+  "action.upgrade": UpgradeIcon,
+
+  // Arrow icons
+  "arrow.chevron-down": ChevronDownIcon,
+  "arrow.chevron-left": ChevronLeftIcon,
+  "arrow.chevron-right": ChevronRightIcon,
+  "arrow.chevron-up": ChevronUpIcon,
+
+  // Misc icons
+  "misc.info": InfoIcon,
+  "arrow.reply": ReplyIcon,
+
+  // Default fallback
+  default: DefaultIcon,
+} as const;
+
+export type IconName = keyof typeof ICON_REGISTRY;
diff --git a/packages/propel/src/icons/related-icon.tsx b/packages/propel/src/icons/related-icon.tsx
new file mode 100644
index 0000000..1f5c46b
--- /dev/null
+++ b/packages/propel/src/icons/related-icon.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function RelatedIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H11"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M12.125 19.25L9 16.125L12.125 13" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/sans-serif-icon.tsx b/packages/propel/src/icons/sans-serif-icon.tsx
new file mode 100644
index 0000000..17c3348
--- /dev/null
+++ b/packages/propel/src/icons/sans-serif-icon.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function SansSerifIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
+      <path
+        d="M12.4877 11.5341C11.9579 11.5341 11.502 11.4646 11.1198 11.3256C10.7406 11.1867 10.4308 11.0028 10.1905 10.7741C9.95021 10.5454 9.77071 10.295 9.65202 10.0228L10.7681 9.56253C10.8462 9.68991 10.9504 9.82453 11.0807 9.96639C11.2139 10.1111 11.3934 10.2342 11.6192 10.3355C11.8479 10.4368 12.1418 10.4875 12.5007 10.4875C12.9929 10.4875 13.3997 10.3674 13.721 10.1271C14.0424 9.88967 14.203 9.51042 14.203 8.98931V7.67785H14.1205C14.0424 7.81971 13.9295 7.97749 13.7818 8.15119C13.6371 8.3249 13.4373 8.47544 13.1825 8.60282C12.9278 8.7302 12.5963 8.79389 12.1881 8.79389C11.6612 8.79389 11.1864 8.67085 10.7637 8.42478C10.3439 8.1758 10.011 7.80958 9.76492 7.3261C9.52174 6.83973 9.40015 6.2419 9.40015 5.53262C9.40015 4.82333 9.52029 4.21537 9.76058 3.70873C10.0038 3.2021 10.3367 2.81416 10.7594 2.54492C11.1821 2.27279 11.6612 2.13672 12.1968 2.13672C12.6108 2.13672 12.9451 2.2062 13.1999 2.34516C13.4547 2.48123 13.653 2.64046 13.7948 2.82285C13.9396 3.00523 14.0511 3.16591 14.1292 3.30487H14.2248V2.22357H15.4971V9.04142C15.4971 9.61464 15.364 10.0851 15.0976 10.4528C14.8313 10.8204 14.4708 11.0926 14.0163 11.2692C13.5647 11.4458 13.0552 11.5341 12.4877 11.5341ZM12.4747 7.71693C12.8482 7.71693 13.1637 7.63008 13.4214 7.45638C13.6819 7.27978 13.8788 7.02791 14.012 6.70077C14.148 6.37073 14.2161 5.97556 14.2161 5.51525C14.2161 5.06651 14.1495 4.67134 14.0163 4.32972C13.8831 3.98811 13.6877 3.72176 13.4301 3.53069C13.1724 3.33672 12.8539 3.23973 12.4747 3.23973C12.0839 3.23973 11.7582 3.34106 11.4976 3.54371C11.2371 3.74347 11.0402 4.01561 10.907 4.36012C10.7767 4.70463 10.7116 5.08967 10.7116 5.51525C10.7116 5.9524 10.7782 6.33599 10.9114 6.66603C11.0445 6.99607 11.2414 7.25373 11.502 7.43901C11.7654 7.62429 12.0897 7.71693 12.4747 7.71693Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.09099 8.8936H0.666626L3.86711 0H5.41741L8.61789 8.8936H7.19353L4.67917 1.61544H4.60969L2.09099 8.8936ZM2.32983 5.41085H6.95034V6.53993H2.32983V5.41085Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/serif-icon.tsx b/packages/propel/src/icons/serif-icon.tsx
new file mode 100644
index 0000000..c14c8eb
--- /dev/null
+++ b/packages/propel/src/icons/serif-icon.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function SerifIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
+      <path
+        d="M11.6021 7.09532C11.2602 6.92843 10.9976 6.69641 10.8145 6.39927C10.6313 6.09806 10.5397 5.76631 10.5397 5.40404C10.5397 4.85046 10.7473 4.37422 11.1625 3.97531C11.5818 3.57641 12.117 3.37695 12.7683 3.37695C13.3015 3.37695 13.7635 3.50721 14.1543 3.76772H15.3388C15.5138 3.76772 15.6156 3.77382 15.6441 3.78603C15.6726 3.79418 15.6929 3.81046 15.7051 3.83488C15.7296 3.87151 15.7418 3.93664 15.7418 4.03026C15.7418 4.13609 15.7316 4.20936 15.7112 4.25007C15.699 4.27042 15.6766 4.2867 15.6441 4.29891C15.6156 4.31112 15.5138 4.31723 15.3388 4.31723H14.6122C14.8402 4.6103 14.9541 4.98479 14.9541 5.44068C14.9541 5.9617 14.7547 6.40741 14.3558 6.77782C13.9569 7.14824 13.4216 7.33344 12.75 7.33344C12.4732 7.33344 12.1903 7.29274 11.9013 7.21133C11.7222 7.36601 11.6001 7.50237 11.5349 7.62041C11.4739 7.73438 11.4434 7.83207 11.4434 7.91348C11.4434 7.98268 11.4759 8.04984 11.541 8.11497C11.6102 8.1801 11.7425 8.22691 11.9379 8.2554C12.0519 8.27168 12.3368 8.28593 12.7927 8.29814C13.6312 8.31849 14.1746 8.34699 14.4229 8.38362C14.8015 8.43654 15.1027 8.57697 15.3266 8.80491C15.5545 9.03286 15.6685 9.31372 15.6685 9.6475C15.6685 10.1075 15.4528 10.5389 15.0213 10.9419C14.3863 11.5362 13.558 11.8333 12.5363 11.8333C11.7507 11.8333 11.0872 11.6563 10.5458 11.3021C10.2405 11.0986 10.0879 10.887 10.0879 10.6672C10.0879 10.5695 10.1103 10.4718 10.1551 10.3741C10.2243 10.2235 10.3667 10.0138 10.5825 9.74519C10.6109 9.70856 10.8185 9.48875 11.2052 9.08578C10.9936 8.95959 10.843 8.84765 10.7534 8.74996C10.6679 8.6482 10.6252 8.53423 10.6252 8.40804C10.6252 8.26558 10.6822 8.09869 10.7962 7.90738C10.9142 7.71607 11.1828 7.44538 11.6021 7.09532ZM12.6645 3.67003C12.3633 3.67003 12.1109 3.79011 11.9074 4.03026C11.7039 4.27042 11.6021 4.6388 11.6021 5.13539C11.6021 5.77853 11.7405 6.27716 12.0173 6.63129C12.229 6.89994 12.4976 7.03426 12.8232 7.03426C13.1326 7.03426 13.387 6.91826 13.5865 6.68624C13.7859 6.45422 13.8856 6.08992 13.8856 5.59332C13.8856 4.94612 13.7452 4.43934 13.4643 4.073C13.2567 3.80435 12.9901 3.67003 12.6645 3.67003ZM11.541 9.13462C11.3497 9.34222 11.2052 9.53556 11.1075 9.71466C11.0099 9.89376 10.961 10.0586 10.961 10.2092C10.961 10.4046 11.079 10.5756 11.3151 10.7221C11.7222 10.9745 12.3104 11.1007 13.0797 11.1007C13.8124 11.1007 14.3517 10.9704 14.6977 10.7099C15.0477 10.4535 15.2228 10.1787 15.2228 9.88562C15.2228 9.67396 15.119 9.52335 14.9114 9.4338C14.6997 9.34425 14.2805 9.29133 13.6536 9.27505C12.7378 9.25063 12.0336 9.20382 11.541 9.13462Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.28997 6.36263H3.08448L2.52276 7.66925C2.38436 7.99081 2.31516 8.23097 2.31516 8.38972C2.31516 8.5159 2.37418 8.62784 2.49223 8.72553C2.61434 8.81915 2.87485 8.88021 3.27376 8.9087V9.13461H0.666626V8.9087C1.01262 8.84764 1.23649 8.76827 1.33825 8.67058C1.54585 8.4752 1.77583 8.07833 2.0282 7.47997L4.94061 0.666016H5.15431L8.0362 7.55324C8.26821 8.10682 8.47784 8.46706 8.66508 8.63394C8.8564 8.79676 9.12098 8.88835 9.45882 8.9087V9.13461H6.19228V8.9087C6.52199 8.89242 6.74383 8.83747 6.8578 8.74385C6.97584 8.65023 7.03486 8.53625 7.03486 8.40193C7.03486 8.22283 6.95345 7.93993 6.79064 7.55324L6.28997 6.36263ZM6.11901 5.91081L4.7147 2.56489L3.27376 5.91081H6.11901Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/set-as-default-icon.tsx b/packages/propel/src/icons/set-as-default-icon.tsx
new file mode 100644
index 0000000..674a739
--- /dev/null
+++ b/packages/propel/src/icons/set-as-default-icon.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ISvgIcons } from "./type";
+
+export function SetAsDefaultIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <path
+        d="M7.29167 0.625V13.9583M12.0057 2.57762L2.57762 12.0057M13.9583 7.29167H0.625M12.0057 12.0057L2.57762 2.57762"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/side-panel-icon.tsx b/packages/propel/src/icons/side-panel-icon.tsx
new file mode 100644
index 0000000..810e9a9
--- /dev/null
+++ b/packages/propel/src/icons/side-panel-icon.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function SidePanelIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/backlog-group-icon.tsx b/packages/propel/src/icons/state/backlog-group-icon.tsx
new file mode 100644
index 0000000..a42e24f
--- /dev/null
+++ b/packages/propel/src/icons/state/backlog-group-icon.tsx
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+import { DashedCircle } from "./dashed-circle";
+
+export function BacklogGroupIcon({ width = "20", height = "20", className, color = "#60646C" }: ISvgIcons) {
+  // SVG parameters
+  const viewBoxSize = 16;
+  const center = viewBoxSize / 2;
+  const radius = 6;
+  return (
+    <svg
+      height={height}
+      width={width}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <DashedCircle center={center} radius={radius} color={color} percentage={0} />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/cancelled-group-icon.tsx b/packages/propel/src/icons/state/cancelled-group-icon.tsx
new file mode 100644
index 0000000..4ce8c7d
--- /dev/null
+++ b/packages/propel/src/icons/state/cancelled-group-icon.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function CancelledGroupIcon({
+  className = "",
+  color = "#9AA4BC",
+  height = "20",
+  width = "20",
+  ...rest
+}: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.1018 4.89826C11.3947 5.19115 11.3947 5.66603 11.1018 5.95892L9.06068 8.00002L11.1018 10.0411C11.3947 10.334 11.3947 10.8089 11.1018 11.1018C10.8089 11.3947 10.334 11.3947 10.0411 11.1018L8.00002 9.06068L5.95892 11.1018C5.66603 11.3947 5.19115 11.3947 4.89826 11.1018C4.60537 10.8089 4.60537 10.334 4.89826 10.0411L6.93936 8.00002L4.89826 5.95892C4.60537 5.66603 4.60537 5.19115 4.89826 4.89826C5.19115 4.60537 5.66603 4.60537 5.95892 4.89826L8.00002 6.93936L10.0411 4.89826C10.334 4.60537 10.8089 4.60537 11.1018 4.89826Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/completed-group-icon.tsx b/packages/propel/src/icons/state/completed-group-icon.tsx
new file mode 100644
index 0000000..1d97af6
--- /dev/null
+++ b/packages/propel/src/icons/state/completed-group-icon.tsx
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function CompletedGroupIcon({
+  className = "",
+  color = "#46A758",
+  height = "20",
+  width = "20",
+  ...rest
+}: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.3587 6.18828C11.6007 5.85214 11.5244 5.38343 11.1882 5.14141C10.8521 4.89938 10.3834 4.97568 10.1414 5.31183L7.03706 9.62335L5.25956 7.97751C4.95563 7.69609 4.4811 7.71434 4.19968 8.01828C3.91826 8.32221 3.93651 8.79673 4.24045 9.07815L6.64045 11.3004C6.79816 11.4464 7.01095 11.5178 7.22481 11.4963C7.43868 11.4749 7.63307 11.3627 7.75865 11.1883L11.3587 6.18828Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/dashed-circle.tsx b/packages/propel/src/icons/state/dashed-circle.tsx
new file mode 100644
index 0000000..3cba92d
--- /dev/null
+++ b/packages/propel/src/icons/state/dashed-circle.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+interface DashedCircleProps {
+  center: number;
+  radius: number;
+  color: string;
+  percentage: number;
+  totalSegments?: number;
+}
+
+export function DashedCircle({ center, color, percentage, totalSegments = 15 }: DashedCircleProps) {
+  // Ensure percentage is between 0 and 100
+  const validPercentage = Math.max(0, Math.min(100, percentage));
+
+  // Generate dashed segments for the circle
+  const generateDashedCircle = () => {
+    const segments = [];
+    const angleIncrement = 360 / totalSegments;
+
+    for (let i = 0; i < totalSegments; i++) {
+      // Calculate the angle for this segment (starting from top/12 o'clock position)
+      const angle = i * angleIncrement - 90; // -90 adjusts to start from top center
+
+      // Calculate if this segment should be hidden based on percentage
+      const segmentStartPercentage = (i / totalSegments) * 100;
+      const isSegmentVisible = segmentStartPercentage >= validPercentage;
+
+      if (isSegmentVisible) {
+        segments.push(
+          <g key={i} transform={`translate(${center} ${center}) rotate(${angle})`}>
+            <line x1={5.75} y1="0" x2={6.5} y2="0" stroke={color} strokeWidth={1.21} strokeLinecap="round" />
+          </g>
+        );
+      }
+    }
+    return segments;
+  };
+
+  return <g>{generateDashedCircle()}</g>;
+}
diff --git a/packages/propel/src/icons/state/helper.tsx b/packages/propel/src/icons/state/helper.tsx
new file mode 100644
index 0000000..2ceb3c7
--- /dev/null
+++ b/packages/propel/src/icons/state/helper.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { EIconSize } from "@plane/constants";
+import type { TIntakeStateGroups } from "@plane/types";
+
+export interface IStateGroupIcon {
+  className?: string;
+  color?: string;
+  stateGroup: TStateGroups;
+  size?: EIconSize;
+  percentage?: number;
+}
+
+export interface IIntakeStateGroupIcon {
+  className?: string;
+  color?: string;
+  stateGroup: TIntakeStateGroups;
+  size?: EIconSize;
+  percentage?: number;
+}
+
+export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
+
+export const STATE_GROUP_COLORS: {
+  [key in TStateGroups]: string;
+} = {
+  backlog: "#60646C",
+  unstarted: "#60646C",
+  started: "#F59E0B",
+  completed: "#46A758",
+  cancelled: "#9AA4BC",
+};
+
+export const INTAKE_STATE_GROUP_COLORS: { [key in TIntakeStateGroups]: string } = { triage: "#4E5355" };
+
+export const STATE_GROUP_SIZES: {
+  [key in EIconSize]: string;
+} = {
+  [EIconSize.XS]: "10px",
+  [EIconSize.SM]: "12px",
+  [EIconSize.MD]: "14px",
+  [EIconSize.LG]: "16px",
+  [EIconSize.XL]: "18px",
+};
diff --git a/packages/propel/src/icons/state/index.ts b/packages/propel/src/icons/state/index.ts
new file mode 100644
index 0000000..a531eab
--- /dev/null
+++ b/packages/propel/src/icons/state/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./backlog-group-icon";
+export * from "./cancelled-group-icon";
+export * from "./completed-group-icon";
+export * from "./started-group-icon";
+export * from "./state-group-icon";
+export * from "./unstarted-group-icon";
+export * from "./intake-state-group-icon";
diff --git a/packages/propel/src/icons/state/intake-state-group-icon.tsx b/packages/propel/src/icons/state/intake-state-group-icon.tsx
new file mode 100644
index 0000000..18e6d72
--- /dev/null
+++ b/packages/propel/src/icons/state/intake-state-group-icon.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { EIconSize } from "@plane/constants";
+import type { IIntakeStateGroupIcon } from "./helper";
+import { INTAKE_STATE_GROUP_COLORS, STATE_GROUP_SIZES } from "./helper";
+import { TriageGroupIcon } from "./triage-group-icon";
+
+const iconComponents = { triage: TriageGroupIcon };
+
+export function IntakeStateGroupIcon({
+  className = "",
+  color,
+  stateGroup,
+  size = EIconSize.SM,
+}: IIntakeStateGroupIcon) {
+  const IntakeStateIconComponent = iconComponents[stateGroup] || TriageGroupIcon;
+
+  return (
+    <IntakeStateIconComponent
+      height={STATE_GROUP_SIZES[size]}
+      width={STATE_GROUP_SIZES[size]}
+      color={color ?? INTAKE_STATE_GROUP_COLORS[stateGroup]}
+      className={`flex-shrink-0 ${className}`}
+    />
+  );
+}
diff --git a/packages/propel/src/icons/state/progress-circle.tsx b/packages/propel/src/icons/state/progress-circle.tsx
new file mode 100644
index 0000000..e0f9663
--- /dev/null
+++ b/packages/propel/src/icons/state/progress-circle.tsx
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+interface ProgressCircleProps {
+  center: number;
+  radius: number;
+  color: string;
+  strokeWidth: number;
+  circumference: number;
+  dashOffset: number;
+}
+
+export function ProgressCircle({ center, radius, color, strokeWidth, circumference, dashOffset }: ProgressCircleProps) {
+  return (
+    <circle
+      cx={center}
+      cy={center}
+      r={radius}
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeDasharray={circumference}
+      strokeDashoffset={dashOffset}
+      strokeLinecap="round"
+      transform={`rotate(-90 ${center} ${center})`}
+    />
+  );
+}
diff --git a/packages/propel/src/icons/state/started-group-icon.tsx b/packages/propel/src/icons/state/started-group-icon.tsx
new file mode 100644
index 0000000..cf8e6ea
--- /dev/null
+++ b/packages/propel/src/icons/state/started-group-icon.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+import { DashedCircle } from "./dashed-circle";
+import { ProgressCircle } from "./progress-circle";
+
+// StateIcon component implementation
+export function StartedGroupIcon({
+  width = "20",
+  height = "20",
+  className,
+  color = "#F59E0B",
+  percentage = 100,
+}: ISvgIcons) {
+  // Ensure percentage is between 0 and 100
+  const normalized =
+    typeof percentage === "number"
+      ? percentage <= 1
+        ? percentage * 100 // treat 0-1 as fraction
+        : percentage // already 0-100
+      : 100; // fallback
+  const validPercentage = Math.max(0, Math.min(100, normalized));
+
+  // SVG parameters
+  const viewBoxSize = 16;
+  const center = viewBoxSize / 2;
+  const radius = 6;
+  const strokeWidth = 1.5;
+
+  // Calculate the circumference of the circle
+  const circumference = 2 * Math.PI * radius;
+  const dashOffset = circumference * (1 - validPercentage / 100);
+  const dashOffsetSmall = circumference * (1 - 100 / 100);
+
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`} className={className}>
+      {/* Dashed background circle with segments that disappear with progress */}
+      <DashedCircle center={center} radius={radius} color={color} percentage={validPercentage} />
+
+      {/* render smaller circle in the middle */}
+      <circle
+        cx={6}
+        cy={6}
+        r={3}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        fill="none"
+        transform={`rotate(-90 8 6)`}
+        strokeDasharray={circumference}
+        strokeDashoffset={dashOffsetSmall}
+        stroke={color}
+      />
+
+      {/* Solid progress circle */}
+      <ProgressCircle
+        center={center}
+        radius={radius}
+        color={color}
+        strokeWidth={strokeWidth}
+        circumference={circumference}
+        dashOffset={dashOffset}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/state-group-icon.tsx b/packages/propel/src/icons/state/state-group-icon.tsx
new file mode 100644
index 0000000..e6f1a51
--- /dev/null
+++ b/packages/propel/src/icons/state/state-group-icon.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { EIconSize } from "@plane/constants";
+import { BacklogGroupIcon } from "./backlog-group-icon";
+import { CancelledGroupIcon } from "./cancelled-group-icon";
+import { CompletedGroupIcon } from "./completed-group-icon";
+import type { IStateGroupIcon } from "./helper";
+import { STATE_GROUP_COLORS, STATE_GROUP_SIZES } from "./helper";
+import { StartedGroupIcon } from "./started-group-icon";
+import { UnstartedGroupIcon } from "./unstarted-group-icon";
+
+const iconComponents = {
+  backlog: BacklogGroupIcon,
+  cancelled: CancelledGroupIcon,
+  completed: CompletedGroupIcon,
+  started: StartedGroupIcon,
+  unstarted: UnstartedGroupIcon,
+};
+
+export function StateGroupIcon({
+  className = "",
+  color,
+  stateGroup,
+  size = EIconSize.SM,
+  percentage,
+}: IStateGroupIcon) {
+  const StateIconComponent = iconComponents[stateGroup] || UnstartedGroupIcon;
+
+  return (
+    <StateIconComponent
+      height={STATE_GROUP_SIZES[size]}
+      width={STATE_GROUP_SIZES[size]}
+      color={color ?? STATE_GROUP_COLORS[stateGroup]}
+      className={`flex-shrink-0 ${className}`}
+      percentage={percentage}
+    />
+  );
+}
diff --git a/packages/propel/src/icons/state/triage-group-icon.tsx b/packages/propel/src/icons/state/triage-group-icon.tsx
new file mode 100644
index 0000000..7ce4e78
--- /dev/null
+++ b/packages/propel/src/icons/state/triage-group-icon.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function TriageGroupIcon({ width = "20", height = "20", className, color = "#4E5355" }: ISvgIcons) {
+  // SVG parameters
+  const viewBoxSize = 16;
+  return (
+    <svg
+      height={height}
+      width={width}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_3870_37)">
+        <path
+          d="M0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C8.32217 0.75 8.58333 1.01117 8.58333 1.33333C8.58333 1.6555 8.32217 1.91667 8 1.91667C4.64027 1.91667 1.91667 4.64027 1.91667 8C1.91667 11.3597 4.64027 14.0833 8 14.0833C8.32217 14.0833 8.58333 14.3445 8.58333 14.6667C8.58333 14.9888 8.32217 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8Z"
+          fill={color}
+        />
+        <path
+          d="M10.9855 13.9615L11.078 14.1465C11.1916 14.3737 11.1001 14.6515 10.8663 14.7508C10.6324 14.8501 10.3689 14.7229 10.2845 14.4831L10.1195 14.0143C10.0505 13.8183 10.154 13.6046 10.3453 13.5234C10.5366 13.4423 10.7621 13.5162 10.8553 13.7019L10.9855 13.9615ZM12.6866 13.0286C12.8599 13.2144 12.8506 13.5069 12.6541 13.6681C12.4576 13.8292 12.1691 13.7815 12.0205 13.5754L11.7298 13.1724C11.6082 13.0038 11.6472 12.7694 11.8079 12.6375C11.9685 12.5057 12.2058 12.5131 12.3476 12.665L12.6866 13.0286ZM13.9148 11.5026C14.1333 11.632 14.2067 11.9149 14.0638 12.1249C13.921 12.3348 13.6308 12.3704 13.4302 12.2147L13.0373 11.9097C12.8731 11.7823 12.8444 11.5465 12.9614 11.3748C13.0783 11.203 13.3082 11.1431 13.487 11.2491L13.9148 11.5026ZM14.6627 9.69141C14.9089 9.75393 15.0592 10.0048 14.9813 10.2466C14.9034 10.4883 14.635 10.6044 14.3985 10.5116L13.9362 10.3302C13.7427 10.2542 13.6486 10.036 13.7122 9.83814C13.7759 9.64027 13.9795 9.51796 14.181 9.56911L14.6627 9.69141ZM14.8689 7.74357C15.1228 7.73414 15.3378 7.93242 15.3313 8.18638C15.3248 8.44044 15.0999 8.62755 14.8468 8.60509L14.3518 8.56118C14.1448 8.54281 13.9931 8.36009 13.9986 8.15234C14.004 7.94452 14.165 7.76971 14.3728 7.762L14.8689 7.74357ZM14.5173 5.8165C14.7582 5.73553 15.0206 5.86505 15.0861 6.11063C15.1515 6.35609 14.9886 6.59895 14.7395 6.64882L14.252 6.74642C14.0484 6.78719 13.8514 6.65476 13.798 6.45402C13.7446 6.2532 13.8497 6.0402 14.0467 5.97425L14.3221 5.88209L14.5173 5.8165ZM13.6369 4.06668C13.8452 3.92123 14.1334 3.97157 14.2654 4.1887C14.3974 4.40584 14.3096 4.68491 14.0846 4.80306L13.6448 5.03401C13.4608 5.13061 13.2344 5.0591 13.1264 4.88152C13.0185 4.70392 13.0592 4.46992 13.2296 4.35097L13.6369 4.06668ZM12.2981 2.63637C12.457 2.43806 12.7476 2.40502 12.9357 2.57589C13.1237 2.74673 13.1182 3.03909 12.9358 3.21591L12.5786 3.56218C12.4294 3.70686 12.1919 3.70215 12.0383 3.56213C11.8847 3.42214 11.8577 3.18617 11.9876 3.02398L12.2981 2.63637ZM10.6103 1.64162C10.7068 1.4066 10.9763 1.29298 11.2048 1.404C11.4332 1.51499 11.5105 1.79695 11.3855 2.01805L11.1409 2.45067C11.0386 2.63174 10.8092 2.69437 10.6221 2.60353C10.435 2.51273 10.3425 2.29386 10.4215 2.10151L10.6103 1.64162Z"
+          fill={color}
+        />
+        <path
+          d="M10.5833 8C10.5832 8.32217 10.3215 8.58345 9.99935 8.58333C9.67737 8.58307 9.41664 8.32199 9.41667 8V7.4082L6.41276 10.4121C6.18495 10.6399 5.81504 10.6406 5.58724 10.4128C5.35943 10.185 5.35943 9.81505 5.58724 9.58724L7.00195 8.17318C7.49071 7.68442 8.05115 7.12332 8.59115 6.58333H8C7.67783 6.58333 7.41667 6.32217 7.41667 6C7.41667 5.67783 7.67783 5.41667 8 5.41667H10C10.3222 5.41667 10.5833 5.67783 10.5833 6V8Z"
+          fill={color}
+        />
+        <path
+          d="M5.41667 8C5.41679 7.67783 5.67848 7.41655 6.00065 7.41667C6.32263 7.41693 6.58336 7.67801 6.58333 8V8.5918L9.58724 5.58789C9.81504 5.36009 10.185 5.35943 10.4128 5.58724C10.6406 5.81505 10.6406 6.18495 10.4128 6.41276L8.99805 7.82682C8.50929 8.31558 7.94884 8.87668 7.40885 9.41667H8C8.32217 9.41667 8.58333 9.67783 8.58333 10C8.58333 10.3222 8.32217 10.5833 8 10.5833H6C5.67783 10.5833 5.41667 10.3222 5.41667 10V8Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3870_37">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/unstarted-group-icon.tsx b/packages/propel/src/icons/state/unstarted-group-icon.tsx
new file mode 100644
index 0000000..4229699
--- /dev/null
+++ b/packages/propel/src/icons/state/unstarted-group-icon.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+import { DashedCircle } from "./dashed-circle";
+import { ProgressCircle } from "./progress-circle";
+
+// StateIcon component implementation
+export function UnstartedGroupIcon({
+  width = "20",
+  height = "20",
+  className,
+  color = "#F59E0B",
+  percentage = 100,
+}: ISvgIcons) {
+  // Ensure percentage is between 0 and 100
+  const normalized =
+    typeof percentage === "number"
+      ? percentage <= 1
+        ? percentage * 100 // treat 0-1 as fraction
+        : percentage // already 0-100
+      : 100; // fallback
+  const validPercentage = Math.max(0, Math.min(100, normalized));
+
+  // SVG parameters
+  const viewBoxSize = 16;
+  const center = viewBoxSize / 2;
+  const radius = 6;
+  const strokeWidth = 1.5;
+
+  // Calculate the circumference of the circle
+  const circumference = 2 * Math.PI * radius;
+
+  // Calculate the dash offset based on percentage
+  const dashOffset = circumference * (1 - validPercentage / 100);
+
+  return (
+    <svg width={width} height={height} viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`} className={className}>
+      <DashedCircle center={center} radius={radius} color={color} percentage={validPercentage} />
+
+      {/* Solid progress circle */}
+      <ProgressCircle
+        center={center}
+        radius={radius}
+        color={color}
+        strokeWidth={strokeWidth}
+        circumference={circumference}
+        dashOffset={dashOffset}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/sticky-note-icon.tsx b/packages/propel/src/icons/sticky-note-icon.tsx
new file mode 100644
index 0000000..2d3456f
--- /dev/null
+++ b/packages/propel/src/icons/sticky-note-icon.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function StickyNoteIcon({ width = "17", height = "17", className, color }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 17 17"
+      fill={"currentColor"}
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ color }}
+    >
+      <path
+        d="M11.9167 16.0833H2.75008C2.30805 16.0833 1.88413 15.9077 1.57157 15.5951C1.25901 15.2826 1.08341 14.8587 1.08341 14.4166V2.74996C1.08341 2.30793 1.25901 1.88401 1.57157 1.57145C1.88413 1.25889 2.30805 1.08329 2.75008 1.08329H14.4167C14.8588 1.08329 15.2827 1.25889 15.5953 1.57145C15.9078 1.88401 16.0834 2.30793 16.0834 2.74996V11.9166L11.9167 16.0833Z"
+        style={{ opacity: 0.5 }}
+        fill="currentColor"
+      />
+      <path
+        d="M11.0834 16.0833V12.75C11.0834 12.3079 11.259 11.884 11.5716 11.5714C11.8841 11.2589 12.3081 11.0833 12.7501 11.0833H16.0834"
+        style={{ opacity: 0.5 }}
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.27694 15.8898C1.66764 16.2805 2.19755 16.5 2.75008 16.5H11.9167C12.0273 16.5 12.1332 16.4561 12.2114 16.3779L16.378 12.2113C16.4562 12.1331 16.5001 12.0271 16.5001 11.9166V2.74996C16.5001 2.19742 16.2806 1.66752 15.8899 1.27682C15.4992 0.88612 14.9693 0.666626 14.4167 0.666626H2.75008C2.19755 0.666626 1.66764 0.88612 1.27694 1.27682C0.886241 1.66752 0.666748 2.19742 0.666748 2.74996V14.4166C0.666748 14.9692 0.886241 15.4991 1.27694 15.8898ZM15.6667 11.5V11.744L11.7442 15.6666H11.5001V12.75C11.5001 12.4184 11.6318 12.1005 11.8662 11.8661C12.1006 11.6317 12.4186 11.5 12.7501 11.5H15.6667ZM10.6667 15.6666V12.75C10.6667 12.1974 10.8862 11.6675 11.2769 11.2768C11.6676 10.8861 12.1975 10.6666 12.7501 10.6666H15.6667V2.74996C15.6667 2.41844 15.5351 2.1005 15.3006 1.86608C15.0662 1.63166 14.7483 1.49996 14.4167 1.49996H2.75008C2.41856 1.49996 2.10062 1.63166 1.8662 1.86608C1.63178 2.1005 1.50008 2.41844 1.50008 2.74996V14.4166C1.50008 14.7481 1.63178 15.0661 1.8662 15.3005C2.10062 15.5349 2.41856 15.6666 2.75008 15.6666H10.6667Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.0816 12.7499C11.0491 13.2706 11.0816 16.0833 11.0816 16.0833H11.9149L16.0816 11.9166V11.0833H12.7483C11.5001 11.0833 11.1141 12.2293 11.0816 12.7499Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/sub-brand/index.ts b/packages/propel/src/icons/sub-brand/index.ts
new file mode 100644
index 0000000..d7c76f9
--- /dev/null
+++ b/packages/propel/src/icons/sub-brand/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./pi-chat";
+export * from "./plane-icon";
+export * from "./wiki-icon";
diff --git a/packages/propel/src/icons/sub-brand/pi-chat.tsx b/packages/propel/src/icons/sub-brand/pi-chat.tsx
new file mode 100644
index 0000000..9bf8a82
--- /dev/null
+++ b/packages/propel/src/icons/sub-brand/pi-chat.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function PiChatLogo({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} viewBox="0 0 24 24" {...rest}>
+      <path d="M5.25 4.5C5.25 3.67157 5.92157 3 6.75 3H11.25V21H5.25V4.5Z" fill={color} />
+      <path d="M12 3H16.5C17.3284 3 18 3.67157 18 4.5V13.5H12V3Z" fill={color} />
+      <path
+        d="M14.6782 18.8062C14.648 18.6894 14.5871 18.5828 14.5019 18.4975C14.4166 18.4123 14.31 18.3514 14.1932 18.3212L12.1227 17.7873C12.0873 17.7773 12.0563 17.756 12.0341 17.7267C12.012 17.6974 12 17.6617 12 17.625C12 17.5883 12.012 17.5526 12.0341 17.5233C12.0563 17.494 12.0873 17.4727 12.1227 17.4627L14.1932 16.9284C14.3099 16.8983 14.4165 16.8375 14.5018 16.7523C14.5871 16.667 14.648 16.5605 14.6782 16.4438L15.2121 14.3733C15.222 14.3378 15.2432 14.3066 15.2726 14.2843C15.3019 14.262 15.3377 14.25 15.3746 14.25C15.4114 14.25 15.4472 14.262 15.4765 14.2843C15.5059 14.3066 15.5271 14.3378 15.5371 14.3733L16.0706 16.4438C16.1008 16.5606 16.1616 16.6672 16.2469 16.7525C16.3322 16.8377 16.4388 16.8986 16.5556 16.9288L18.6261 17.4623C18.6617 17.4721 18.6931 17.4934 18.7155 17.5228C18.7379 17.5522 18.75 17.5881 18.75 17.625C18.75 17.6619 18.7379 17.6978 18.7155 17.7272C18.6931 17.7566 18.6617 17.7778 18.6261 17.7877L16.5556 18.3212C16.4388 18.3514 16.3322 18.4123 16.2469 18.4975C16.1616 18.5828 16.1008 18.6894 16.0706 18.8062L15.5367 20.8767C15.5268 20.9122 15.5056 20.9434 15.4762 20.9657C15.4469 20.988 15.4111 21 15.3742 21C15.3374 21 15.3016 20.988 15.2722 20.9657C15.2429 20.9434 15.2217 20.9122 15.2117 20.8767L14.6782 18.8062Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/sub-brand/plane-icon.tsx b/packages/propel/src/icons/sub-brand/plane-icon.tsx
new file mode 100644
index 0000000..25acfeb
--- /dev/null
+++ b/packages/propel/src/icons/sub-brand/plane-icon.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function PlaneNewIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M10.3617 10.3629V12.8365C10.3617 13.8272 9.55787 14.6303 8.56797 14.6303H3.17365C2.18298 14.6303 1.37988 13.8272 1.37988 12.8365V7.44221C1.37988 6.45077 2.18298 5.64844 3.17365 5.64844H5.64726V8.56915C5.64726 9.55982 6.45036 10.3629 7.44103 10.3629H10.3617Z"
+        fill={color}
+      />
+      <path
+        d="M14.6291 3.17365V8.56797C14.6291 9.55864 13.826 10.3617 12.8353 10.3617H10.3625V7.44103C10.3625 6.44959 9.55864 5.64726 8.56874 5.64726H5.64803V3.17365C5.64803 2.18298 6.45113 1.37988 7.44179 1.37988H12.8361C13.8275 1.37988 14.6291 2.18375 14.6291 3.17365Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/sub-brand/wiki-icon.tsx b/packages/propel/src/icons/sub-brand/wiki-icon.tsx
new file mode 100644
index 0000000..92e6fde
--- /dev/null
+++ b/packages/propel/src/icons/sub-brand/wiki-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function WikiIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.1062 6.74052L9.26925 1.90354C8.57104 1.20533 7.43873 1.20533 6.74052 1.90354L1.90354 6.74052C1.20533 7.43873 1.20533 8.57103 1.90354 9.26925L6.74052 14.1062C7.43873 14.8044 8.57104 14.8044 9.26925 14.1062L14.1062 9.26925C14.8044 8.57103 14.8044 7.43873 14.1062 6.74052ZM10.3648 9.74697C10.3648 10.0877 10.0884 10.364 9.74697 10.364H6.26279C5.92211 10.364 5.64496 10.0877 5.64496 9.74697V6.26203C5.64496 5.92134 5.92134 5.6442 6.26279 5.6442H9.74697C10.0884 5.6442 10.3648 5.92057 10.3648 6.26203V9.74697Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/suspended-user.tsx b/packages/propel/src/icons/suspended-user.tsx
new file mode 100644
index 0000000..6be2ce3
--- /dev/null
+++ b/packages/propel/src/icons/suspended-user.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function SuspendedUserIcon({ className, ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
+      <g clipPath="url(#clip0_806_120890)">
+        <path
+          d="M3 13C3 12.304 3.18158 11.6201 3.52681 11.0158C3.87204 10.4115 4.36897 9.90774 4.9685 9.55428C5.56802 9.20082 6.24939 9.00989 6.94529 9.00037C7.64119 8.99086 8.32753 9.16307 8.9365 9.5"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M7 9C8.38071 9 9.5 7.88071 9.5 6.5C9.5 5.11929 8.38071 4 7 4C5.61929 4 4.5 5.11929 4.5 6.5C4.5 7.88071 5.61929 9 7 9Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path d="M10.5 11L13 13.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M13 11L10.5 13.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_806_120890">
+          <path
+            d="M2 4.5C2 3.39543 2.89543 2.5 4 2.5H12C13.1046 2.5 14 3.39543 14 4.5V12.5C14 13.6046 13.1046 14.5 12 14.5H4C2.89543 14.5 2 13.6046 2 12.5V4.5Z"
+            fill="white"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/teams.tsx b/packages/propel/src/icons/teams.tsx
new file mode 100644
index 0000000..cb09b16
--- /dev/null
+++ b/packages/propel/src/icons/teams.tsx
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function TeamsIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.25 6.75C8.25 5.75544 8.64509 4.80161 9.34835 4.09835C10.0516 3.39509 11.0054 3 12 3C12.9946 3 13.9484 3.39509 14.6517 4.09835C15.3549 4.80161 15.75 5.75544 15.75 6.75C15.75 7.74456 15.3549 8.69839 14.6517 9.40165C13.9484 10.1049 12.9946 10.5 12 10.5C11.0054 10.5 10.0516 10.1049 9.34835 9.40165C8.64509 8.69839 8.25 7.74456 8.25 6.75ZM15.75 9.75C15.75 8.95435 16.0661 8.19129 16.6287 7.62868C17.1913 7.06607 17.9544 6.75 18.75 6.75C19.5456 6.75 20.3087 7.06607 20.8713 7.62868C21.4339 8.19129 21.75 8.95435 21.75 9.75C21.75 10.5456 21.4339 11.3087 20.8713 11.8713C20.3087 12.4339 19.5456 12.75 18.75 12.75C17.9544 12.75 17.1913 12.4339 16.6287 11.8713C16.0661 11.3087 15.75 10.5456 15.75 9.75ZM2.25 9.75C2.25 8.95435 2.56607 8.19129 3.12868 7.62868C3.69129 7.06607 4.45435 6.75 5.25 6.75C6.04565 6.75 6.80871 7.06607 7.37132 7.62868C7.93393 8.19129 8.25 8.95435 8.25 9.75C8.25 10.5456 7.93393 11.3087 7.37132 11.8713C6.80871 12.4339 6.04565 12.75 5.25 12.75C4.45435 12.75 3.69129 12.4339 3.12868 11.8713C2.56607 11.3087 2.25 10.5456 2.25 9.75ZM6.31 15.117C6.91995 14.161 7.76108 13.3743 8.75562 12.8294C9.75016 12.2846 10.866 11.9994 12 12C12.9498 11.9991 13.8891 12.1989 14.7564 12.5862C15.6237 12.9734 16.3994 13.5395 17.0327 14.2474C17.6661 14.9552 18.1428 15.7888 18.4317 16.6936C18.7205 17.5985 18.815 18.5541 18.709 19.498C18.696 19.6153 18.6556 19.7278 18.591 19.8265C18.5263 19.9252 18.4393 20.0073 18.337 20.066C16.4086 21.1725 14.2233 21.7532 12 21.75C9.695 21.75 7.53 21.138 5.663 20.066C5.56069 20.0073 5.47368 19.9252 5.40904 19.8265C5.34441 19.7278 5.30396 19.6153 5.291 19.498C5.12305 17.9646 5.48246 16.4198 6.31 15.118V15.117Z"
+        fill="currentColor"
+        {...rest}
+      />
+      <path
+        d="M5.08208 14.2539C4.09584 15.7763 3.63633 17.5802 3.77408 19.3889C3.17359 19.2979 2.58299 19.1505 2.01008 18.9489L1.89508 18.9089C1.79248 18.8725 1.70263 18.8071 1.63643 18.7207C1.57023 18.6342 1.53051 18.5305 1.52208 18.4219L1.51208 18.3009C1.47169 17.7989 1.53284 17.2938 1.69188 16.816C1.85093 16.3381 2.10462 15.8971 2.4378 15.5194C2.77099 15.1417 3.17685 14.835 3.63116 14.6176C4.08547 14.4001 4.57893 14.2765 5.08208 14.2539ZM20.2261 19.3889C20.3638 17.5802 19.9043 15.7763 18.9181 14.2539C19.4212 14.2765 19.9147 14.4001 20.369 14.6176C20.8233 14.835 21.2292 15.1417 21.5624 15.5194C21.8955 15.8971 22.1492 16.3381 22.3083 16.816C22.4673 17.2938 22.5285 17.7989 22.4881 18.3009L22.4781 18.4219C22.4695 18.5303 22.4297 18.6338 22.3635 18.7201C22.2973 18.8063 22.2075 18.8716 22.1051 18.9079L21.9901 18.9479C21.4231 19.1479 20.8341 19.2969 20.2261 19.3889Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/transfer-icon.tsx b/packages/propel/src/icons/transfer-icon.tsx
new file mode 100644
index 0000000..c2e30cb
--- /dev/null
+++ b/packages/propel/src/icons/transfer-icon.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function TransferIcon({ className = "fill-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 20"
+      className={`${className} `}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M6.16683 14.6667C4.54183 14.6667 3.16336 14.1007 2.03141 12.9688C0.899468 11.8368 0.333496 10.4583 0.333496 8.83333C0.333496 7.125 0.941135 5.73264 2.15641 4.65625C3.37169 3.57986 4.72933 3.09028 6.22933 3.1875L4.87516 1.83333C4.75016 1.70833 4.68766 1.55903 4.68766 1.38542C4.68766 1.21181 4.75016 1.0625 4.87516 0.9375C5.00016 0.8125 5.14947 0.75 5.32308 0.75C5.49669 0.75 5.646 0.8125 5.771 0.9375L8.22933 3.39583C8.29877 3.46528 8.34739 3.53472 8.37516 3.60417C8.40294 3.67361 8.41683 3.75 8.41683 3.83333C8.41683 3.91667 8.40294 3.99306 8.37516 4.0625C8.34739 4.13194 8.29877 4.20139 8.22933 4.27083L5.771 6.72917C5.646 6.85417 5.50016 6.91319 5.3335 6.90625C5.16683 6.89931 5.021 6.83333 4.896 6.70833C4.771 6.58333 4.7085 6.43403 4.7085 6.26042C4.7085 6.08681 4.771 5.9375 4.896 5.8125L6.29183 4.41667C4.97239 4.38889 3.8578 4.79167 2.94808 5.625C2.03836 6.45833 1.5835 7.52778 1.5835 8.83333C1.5835 10.0972 2.03141 11.1771 2.92725 12.0729C3.82308 12.9688 4.90294 13.4167 6.16683 13.4167H8.04183C8.22239 13.4167 8.37169 13.4757 8.48975 13.5938C8.6078 13.7118 8.66683 13.8611 8.66683 14.0417C8.66683 14.2222 8.6078 14.3715 8.48975 14.4896C8.37169 14.6076 8.22239 14.6667 8.04183 14.6667H6.16683ZM11.5835 14.6667C11.2363 14.6667 10.9411 14.5451 10.6981 14.3021C10.455 14.059 10.3335 13.7639 10.3335 13.4167V10.0833C10.3335 9.73611 10.455 9.44097 10.6981 9.19792C10.9411 8.95486 11.2363 8.83333 11.5835 8.83333H16.5835C16.9307 8.83333 17.2259 8.95486 17.4689 9.19792C17.712 9.44097 17.8335 9.73611 17.8335 10.0833V13.4167C17.8335 13.7639 17.712 14.059 17.4689 14.3021C17.2259 14.5451 16.9307 14.6667 16.5835 14.6667H11.5835ZM11.5835 13.4167H16.5835V10.0833H11.5835V13.4167ZM11.5835 7.16667C11.2363 7.16667 10.9411 7.04514 10.6981 6.80208C10.455 6.55903 10.3335 6.26389 10.3335 5.91667V2.58333C10.3335 2.23611 10.455 1.94097 10.6981 1.69792C10.9411 1.45486 11.2363 1.33333 11.5835 1.33333H16.5835C16.9307 1.33333 17.2259 1.45486 17.4689 1.69792C17.712 1.94097 17.8335 2.23611 17.8335 2.58333V5.91667C17.8335 6.26389 17.712 6.55903 17.4689 6.80208C17.2259 7.04514 16.9307 7.16667 16.5835 7.16667H11.5835Z" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/tree-map-icon.tsx b/packages/propel/src/icons/tree-map-icon.tsx
new file mode 100644
index 0000000..e389402
--- /dev/null
+++ b/packages/propel/src/icons/tree-map-icon.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function TreeMapIcon({ className = "", ...rest }: ISvgIcons) {
+  return (
+    <svg className={className} viewBox="0 0 27 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <rect width="10" height="10" rx="1" fill="currentColor" />
+      <rect x="11.5" width="10" height="6" rx="1" fill="currentColor" />
+      <rect y="12" width="10" height="10" rx="1" fill="currentColor" />
+      <rect x="11.5" y="16" width="10" height="6" rx="1" fill="currentColor" />
+      <rect x="11.5" y="8" width="10" height="6" rx="1" fill="currentColor" />
+      <rect x="23" width="4" height="11" rx="1" fill="currentColor" />
+      <rect x="23" y="13" width="4" height="4" rx="1" fill="currentColor" />
+      <rect x="23" y="19" width="4" height="3" rx="1" fill="currentColor" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/type.ts b/packages/propel/src/icons/type.ts
new file mode 100644
index 0000000..e5bdc10
--- /dev/null
+++ b/packages/propel/src/icons/type.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export interface ISvgIcons extends React.SVGAttributes<SVGElement> {
+  className?: string | undefined;
+  percentage?: number;
+}
diff --git a/packages/propel/src/icons/updates-icon.tsx b/packages/propel/src/icons/updates-icon.tsx
new file mode 100644
index 0000000..a81d7cd
--- /dev/null
+++ b/packages/propel/src/icons/updates-icon.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ISvgIcons } from "./type";
+
+export function UpdatesIcon({ className = "text-current" }: ISvgIcons) {
+  return (
+    <svg
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.54325 5.056C8.46325 2.58867 11.4633 1 14.8333 1C14.9659 1 15.093 1.05268 15.1868 1.14645C15.2806 1.24021 15.3333 1.36739 15.3333 1.5C15.3333 4.87067 13.7446 7.87 11.2773 9.79067C11.3799 10.4335 11.3418 11.0909 11.1656 11.7176C10.9895 12.3443 10.6795 12.9253 10.257 13.4205C9.83454 13.9158 9.30964 14.3135 8.71854 14.5862C8.12744 14.8588 7.48422 15 6.83325 15C6.70064 15 6.57347 14.9473 6.4797 14.8536C6.38593 14.7598 6.33325 14.6326 6.33325 14.5V11.746C5.6852 11.2342 5.09942 10.6482 4.58792 10H1.83325C1.70064 10 1.57347 9.94732 1.4797 9.85355C1.38593 9.75979 1.33325 9.63261 1.33325 9.5C1.3332 8.84897 1.47441 8.20568 1.74713 7.61453C2.01986 7.02337 2.41761 6.49843 2.91293 6.07594C3.40824 5.65345 3.98934 5.34346 4.6161 5.16737C5.24287 4.99128 5.90038 4.95328 6.54325 5.056ZM10.3333 4.5C9.93543 4.5 9.5539 4.65804 9.27259 4.93934C8.99129 5.22064 8.83325 5.60218 8.83325 6C8.83325 6.39782 8.99129 6.77936 9.27259 7.06066C9.5539 7.34196 9.93543 7.5 10.3333 7.5C10.7311 7.5 11.1126 7.34196 11.3939 7.06066C11.6752 6.77936 11.8333 6.39782 11.8333 6C11.8333 5.60218 11.6752 5.22064 11.3939 4.93934C11.1126 4.65804 10.7311 4.5 10.3333 4.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.83994 11.4947C3.8926 11.4554 3.93701 11.4062 3.97064 11.3497C4.00426 11.2933 4.02645 11.2308 4.03592 11.1658C4.04539 11.1008 4.04197 11.0346 4.02584 10.9709C4.00972 10.9072 3.98121 10.8473 3.94194 10.7947C3.90268 10.742 3.85342 10.6976 3.797 10.664C3.74057 10.6304 3.67807 10.6082 3.61307 10.5987C3.54807 10.5892 3.48184 10.5927 3.41816 10.6088C3.35448 10.6249 3.2946 10.6534 3.24194 10.6927C2.73054 11.0731 2.33288 11.5861 2.092 12.1762C1.85111 12.7663 1.77617 13.4111 1.87528 14.0407C1.89139 14.1455 1.94045 14.2426 2.01536 14.3177C2.09026 14.3929 2.18713 14.4422 2.29194 14.4587C2.92163 14.5577 3.56641 14.4827 4.15652 14.2417C4.74664 14.0007 5.25961 13.6029 5.63994 13.0913C5.68047 13.0388 5.71015 12.9788 5.72723 12.9147C5.74432 12.8506 5.74848 12.7837 5.73948 12.718C5.73047 12.6522 5.70847 12.589 5.67476 12.5318C5.64105 12.4747 5.59631 12.4248 5.54315 12.3852C5.48998 12.3455 5.42945 12.3168 5.36508 12.3007C5.30071 12.2847 5.23379 12.2816 5.16821 12.2917C5.10264 12.3017 5.03973 12.3248 4.98314 12.3594C4.92655 12.394 4.87742 12.4395 4.83861 12.4933C4.60612 12.806 4.30366 13.0599 3.95544 13.2347C3.60722 13.4095 3.22291 13.5004 2.83328 13.5C2.83328 12.68 3.22794 11.9513 3.83994 11.4947Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/user-activity-icon.tsx b/packages/propel/src/icons/user-activity-icon.tsx
new file mode 100644
index 0000000..cf7da47
--- /dev/null
+++ b/packages/propel/src/icons/user-activity-icon.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function UserActivityIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="1.5"
+      xmlns="http://www.w3.org/2000/svg"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...rest}
+    >
+      <path d="M10.5 13C12.9853 13 15 10.9853 15 8.5C15 6.01472 12.9853 4 10.5 4C8.01472 4 6 6.01472 6 8.5C6 10.9853 8.01472 13 10.5 13Z" />
+      <path d="M13.9062 13.5903C12.8368 13.1001 11.661 12.8876 10.4877 12.9725C9.31437 13.0574 8.18144 13.437 7.19379 14.0761C6.20613 14.7152 5.39567 15.5931 4.83744 16.6286C4.2792 17.6641 3.99124 18.8237 4.0002 20" />
+      <path d="M21 16.5H19.6L18.2 20L16.8 13L15.4 16.5H14" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/workspace-icon.tsx b/packages/propel/src/icons/workspace-icon.tsx
new file mode 100644
index 0000000..ae6ded0
--- /dev/null
+++ b/packages/propel/src/icons/workspace-icon.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import type { ISvgIcons } from "./type";
+
+export function WorkspaceIcon({ className }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      role="img"
+      aria-label="Workspace icon"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H15C15.4142 2.25 15.75 2.58579 15.75 3C15.75 3.41421 15.4142 3.75 15 3.75V6.75H21C21.4142 6.75 21.75 7.08579 21.75 7.5C21.75 7.91421 21.4142 8.25 21 8.25V20.25H21.75C22.1642 20.25 22.5 20.5858 22.5 21C22.5 21.4142 22.1642 21.75 21.75 21.75H2.25C1.83579 21.75 1.5 21.4142 1.5 21C1.5 20.5858 1.83579 20.25 2.25 20.25H3V3.75C2.58579 3.75 2.25 3.41421 2.25 3ZM4.5 3.75V20.25H6V17.625C6 16.5898 6.83979 15.75 7.875 15.75H10.125C11.1602 15.75 12 16.5898 12 17.625V20.25H13.5V3.75H4.5ZM15 8.25V20.25H19.5V8.25H15ZM10.5 20.25V17.625C10.5 17.4182 10.3318 17.25 10.125 17.25H7.875C7.66821 17.25 7.5 17.4182 7.5 17.625V20.25H10.5ZM6 6.75C6 6.33579 6.33579 6 6.75 6H7.5C7.91421 6 8.25 6.33579 8.25 6.75C8.25 7.16421 7.91421 7.5 7.5 7.5H6.75C6.33579 7.5 6 7.16421 6 6.75ZM9.75 6.75C9.75 6.33579 10.0858 6 10.5 6H11.25C11.6642 6 12 6.33579 12 6.75C12 7.16421 11.6642 7.5 11.25 7.5H10.5C10.0858 7.5 9.75 7.16421 9.75 6.75ZM6 9.75C6 9.33579 6.33579 9 6.75 9H7.5C7.91421 9 8.25 9.33579 8.25 9.75C8.25 10.1642 7.91421 10.5 7.5 10.5H6.75C6.33579 10.5 6 10.1642 6 9.75ZM9.75 9.75C9.75 9.33579 10.0858 9 10.5 9H11.25C11.6642 9 12 9.33579 12 9.75C12 10.1642 11.6642 10.5 11.25 10.5H10.5C10.0858 10.5 9.75 10.1642 9.75 9.75ZM16.5 11.25C16.5 10.8358 16.8358 10.5 17.25 10.5H17.258C17.6722 10.5 18.008 10.8358 18.008 11.25V11.258C18.008 11.6722 17.6722 12.008 17.258 12.008H17.25C16.8358 12.008 16.5 11.6722 16.5 11.258V11.25ZM6 12.75C6 12.3358 6.33579 12 6.75 12H7.5C7.91421 12 8.25 12.3358 8.25 12.75C8.25 13.1642 7.91421 13.5 7.5 13.5H6.75C6.33579 13.5 6 13.1642 6 12.75ZM9.75 12.75C9.75 12.3358 10.0858 12 10.5 12H11.25C11.6642 12 12 12.3358 12 12.75C12 13.1642 11.6642 13.5 11.25 13.5H10.5C10.0858 13.5 9.75 13.1642 9.75 12.75ZM16.5 14.25C16.5 13.8358 16.8358 13.5 17.25 13.5H17.258C17.6722 13.5 18.008 13.8358 18.008 14.25V14.258C18.008 14.6722 17.6722 15.008 17.258 15.008H17.25C16.8358 15.008 16.5 14.6722 16.5 14.258V14.25ZM16.5 17.25C16.5 16.8358 16.8358 16.5 17.25 16.5H17.258C17.6722 16.5 18.008 16.8358 18.008 17.25V17.258C18.008 17.6722 17.6722 18.008 17.258 18.008H17.25C16.8358 18.008 16.5 17.6722 16.5 17.258V17.25Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/analytics-icon.tsx b/packages/propel/src/icons/workspace/analytics-icon.tsx
new file mode 100644
index 0000000..c2c0975
--- /dev/null
+++ b/packages/propel/src/icons/workspace/analytics-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function AnalyticsIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90624 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90624 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64296 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM4.70801 11.333V8.66699C4.70801 8.32192 4.98798 8.04217 5.33301 8.04199C5.67819 8.04199 5.95801 8.32181 5.95801 8.66699V11.333C5.95801 11.6782 5.67819 11.958 5.33301 11.958C4.98798 11.9578 4.70801 11.6781 4.70801 11.333ZM7.375 11.333V4.66699C7.375 4.32181 7.65482 4.04199 8 4.04199C8.34518 4.04199 8.625 4.32181 8.625 4.66699V11.333C8.625 11.6782 8.34518 11.958 8 11.958C7.65482 11.958 7.375 11.6782 7.375 11.333ZM10.042 11.333V7.33301C10.0422 6.98798 10.3219 6.70801 10.667 6.70801C11.0119 6.70818 11.2918 6.98809 11.292 7.33301V11.333C11.292 11.6781 11.012 11.9578 10.667 11.958C10.3218 11.958 10.042 11.6782 10.042 11.333ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6853 13.6853 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5001 2.80859 14.3389C2.31467 14.0872 1.9128 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31467 2.31467 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49986 13.1914 1.66113C13.6853 1.9128 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/archive-icon.tsx b/packages/propel/src/icons/workspace/archive-icon.tsx
new file mode 100644
index 0000000..0aa49bf
--- /dev/null
+++ b/packages/propel/src/icons/workspace/archive-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ArchiveIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M12.708 5.95804H3.29105V10.7998C3.29105 11.3701 3.29177 11.7604 3.31644 12.0625C3.34052 12.3573 3.38484 12.5129 3.44144 12.6241C3.57326 12.8828 3.7833 13.0938 4.04202 13.2256C4.15311 13.2822 4.30886 13.3256 4.60355 13.3496C4.90567 13.3743 5.29595 13.375 5.86624 13.375H10.1328C10.7031 13.375 11.0934 13.3743 11.3955 13.3496C11.69 13.3256 11.8459 13.2822 11.9571 13.2256C12.2158 13.0938 12.4268 12.8828 12.5586 12.6241C12.6152 12.5129 12.6586 12.357 12.6826 12.0625C12.7073 11.7604 12.708 11.3701 12.708 10.7998V5.95804ZM9.33304 8.04202C9.67822 8.04203 9.95804 8.32185 9.95804 8.66702C9.95786 9.01205 9.67811 9.29202 9.33304 9.29202H6.66605C6.32113 9.29185 6.04122 9.01194 6.04105 8.66702C6.04105 8.32196 6.32102 8.0422 6.66605 8.04202H9.33304ZM14.041 3.66702C14.041 3.32769 14.0379 3.24861 14.0274 3.19534C13.9715 2.91452 13.7525 2.69474 13.4717 2.6387C13.4185 2.62812 13.3395 2.62503 13 2.62503H3.00003C2.66062 2.62503 2.58156 2.62814 2.52835 2.6387C2.24737 2.69459 2.0276 2.91436 1.97171 3.19534C1.96115 3.24855 1.95804 3.32761 1.95804 3.66702C1.95804 4.00648 1.96113 4.08551 1.97171 4.1387C2.02776 4.41946 2.24752 4.63851 2.52835 4.69437C2.54804 4.69828 2.5862 4.70359 2.68265 4.70609C2.68757 4.70622 2.69241 4.7078 2.6973 4.70804H13.3018C13.3067 4.7078 13.3115 4.70622 13.3164 4.70609C13.413 4.70359 13.452 4.69828 13.4717 4.69437C13.7523 4.63834 13.9714 4.41925 14.0274 4.1387C14.038 4.08546 14.041 4.00645 14.041 3.66702ZM15.291 3.66702C15.291 3.94665 15.2945 4.17765 15.2539 4.38187C15.116 5.07554 14.6164 5.63287 13.958 5.85452V10.7998C13.958 11.3494 13.9585 11.7993 13.9287 12.1641C13.8983 12.5362 13.8332 12.8748 13.6719 13.1914C13.4202 13.6854 13.0184 14.0872 12.5244 14.3389C12.2078 14.5002 11.8692 14.5653 11.4971 14.5957C11.1323 14.6255 10.6824 14.625 10.1328 14.625H5.86624C5.31662 14.625 4.8668 14.6255 4.50199 14.5957C4.17639 14.5691 3.87675 14.5155 3.59476 14.3946L3.47464 14.3389C2.98073 14.0872 2.57885 13.6854 2.32718 13.1914C2.16596 12.8748 2.10074 12.5361 2.07034 12.1641C2.04057 11.7993 2.04105 11.3494 2.04105 10.7998V5.85355C1.38301 5.63175 0.88406 5.07532 0.746126 4.38187C0.705511 4.17758 0.708038 3.94664 0.70804 3.66702C0.70804 3.38721 0.70547 3.1556 0.746126 2.9512C0.900699 2.17451 1.50752 1.56769 2.28421 1.41312C2.48861 1.37246 2.72022 1.37503 3.00003 1.37503H13C13.2797 1.37503 13.5106 1.37251 13.7149 1.41312C14.4917 1.56763 15.0994 2.17438 15.2539 2.9512C15.2946 3.15554 15.291 3.38718 15.291 3.66702Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/dashboard-icon.tsx b/packages/propel/src/icons/workspace/dashboard-icon.tsx
new file mode 100644
index 0000000..b8e8ae4
--- /dev/null
+++ b/packages/propel/src/icons/workspace/dashboard-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function DashboardIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.3752 2.625H2.62524V7.4668C2.62524 8.03711 2.62497 8.42737 2.64966 8.72949C2.67375 9.02428 2.71803 9.17987 2.77466 9.29102C2.90641 9.54958 3.11671 9.75977 3.37524 9.8916C3.4863 9.94819 3.6422 9.9925 3.93677 10.0166C4.23884 10.0413 4.62934 10.042 5.19946 10.042H10.8C11.3704 10.042 11.7606 10.0413 12.0627 10.0166C12.3575 9.99251 12.5131 9.94823 12.6243 9.8916C12.8829 9.75981 13.0931 9.54963 13.2249 9.29102C13.2815 9.17988 13.3258 9.02426 13.3499 8.72949C13.3745 8.42737 13.3752 8.03711 13.3752 7.4668V2.625ZM10.5598 4.55566C10.8049 4.31293 11.2006 4.3148 11.4436 4.55957C11.6866 4.80474 11.6849 5.20135 11.4397 5.44434L9.6311 7.23633C9.5999 7.26726 9.46941 7.41161 9.29126 7.4873C9.19299 7.52903 9.08863 7.55175 8.98364 7.55566L8.87817 7.55371C8.69021 7.53788 8.52264 7.44647 8.47974 7.42578L7.12622 6.77148L5.4397 8.44434C5.19457 8.68696 4.79881 8.68531 4.55591 8.44043C4.31293 8.19526 4.31465 7.79865 4.55981 7.55566L6.36841 5.76367C6.39962 5.73274 6.53015 5.5884 6.70825 5.5127C6.83939 5.45697 6.9815 5.43463 7.12134 5.44629H7.12231C7.3101 5.46221 7.47687 5.55353 7.51978 5.57422L8.87231 6.22754L10.5598 4.55566ZM14.6252 7.4668C14.6252 8.01642 14.6257 8.46625 14.5959 8.83105C14.5693 9.15661 14.5157 9.45632 14.3948 9.73828L14.3391 9.8584C14.1189 10.2906 13.7836 10.6521 13.3723 10.9043L13.1917 11.0059C12.875 11.1672 12.5364 11.2323 12.1643 11.2627C11.7995 11.2925 11.3497 11.292 10.8 11.292H9.72681L12.3997 13.5195C12.6648 13.7405 12.7007 14.1352 12.4797 14.4004C12.2588 14.6652 11.8649 14.7012 11.5999 14.4805L8.62524 12.001V14C8.62524 14.3451 8.34527 14.6248 8.00024 14.625C7.65507 14.625 7.37524 14.3452 7.37524 14V12L4.39966 14.4805C4.13454 14.701 3.74067 14.6653 3.51978 14.4004C3.2988 14.1352 3.33468 13.7405 3.59985 13.5195L6.27271 11.292H5.19946C4.64993 11.292 4.19996 11.2925 3.83521 11.2627C3.46312 11.2323 3.12451 11.1672 2.80786 11.0059C2.37566 10.7856 2.01416 10.4503 1.76196 10.0391L1.66138 9.8584C1.50002 9.54169 1.43495 9.20321 1.40454 8.83105C1.37474 8.46624 1.37524 8.01645 1.37524 7.4668V2.625H1.33325C0.988074 2.625 0.708252 2.34518 0.708252 2C0.708252 1.65482 0.988074 1.375 1.33325 1.375H14.6663C15.0114 1.375 15.2913 1.65482 15.2913 2C15.2913 2.34518 15.0114 2.625 14.6663 2.625H14.6252V7.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/draft-icon.tsx b/packages/propel/src/icons/workspace/draft-icon.tsx
new file mode 100644
index 0000000..85a63c3
--- /dev/null
+++ b/packages/propel/src/icons/workspace/draft-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function DraftIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M10.5577 2.26554C11.3042 1.51896 12.4862 1.47177 13.2872 2.12491L13.4425 2.26554L13.5821 2.41983C14.2354 3.22077 14.189 4.40271 13.4425 5.14933L5.06648 13.5243C4.85708 13.7337 4.68297 13.9138 4.47077 14.0439C4.29575 14.151 4.10496 14.2303 3.90534 14.2782C3.66318 14.3364 3.41264 14.3319 3.11628 14.3319H2.00007C1.65489 14.3319 1.37507 14.0521 1.37507 13.7069V12.5907C1.37507 12.2946 1.37079 12.0446 1.42878 11.8026C1.47675 11.6028 1.55593 11.4113 1.66316 11.2362H1.66413C1.79415 11.0241 1.97323 10.85 2.18269 10.6405L10.5577 2.26554ZM13.5391 11.9521C13.772 11.6975 14.1672 11.6793 14.4219 11.912C14.6767 12.1449 14.6939 12.541 14.461 12.7958L13.795 13.5243V13.5253C13.3294 14.0345 12.6848 14.3319 12.0001 14.3319C11.401 14.3319 10.8332 14.104 10.3887 13.706L10.2061 13.5253C9.96412 13.2617 9.64853 13.1259 9.33308 13.1259C9.01784 13.126 8.703 13.2618 8.46101 13.5253C8.22763 13.7796 7.83155 13.7968 7.57722 13.5634C7.32321 13.3301 7.30605 12.9348 7.53913 12.6806C8.00515 12.1727 8.64906 11.876 9.33308 11.8759C10.0172 11.8759 10.6619 12.1725 11.128 12.6806V12.6816C11.3696 12.9458 11.6848 13.0819 12.0001 13.0819C12.3153 13.0819 12.6305 12.9458 12.8721 12.6816L13.5391 11.9521ZM2.62507 13.0819H3.11628C3.47218 13.0819 3.54863 13.078 3.61335 13.0624C3.68545 13.0451 3.75417 13.0162 3.81745 12.9775C3.87425 12.9426 3.93123 12.892 4.18269 12.6405L12.5577 4.26554C12.8659 3.95734 12.8659 3.45754 12.5577 3.14933V3.14835C12.2494 2.84073 11.7504 2.84139 11.4425 3.14933L3.06648 11.5243C2.81511 11.7757 2.76438 11.8328 2.72956 11.8896C2.69077 11.9529 2.66192 12.0217 2.6446 12.0937C2.62904 12.1585 2.62507 12.2349 2.62507 12.5907V13.0819Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/home-icon.tsx b/packages/propel/src/icons/workspace/home-icon.tsx
new file mode 100644
index 0000000..30f53ea
--- /dev/null
+++ b/packages/propel/src/icons/workspace/home-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function HomeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M9.36825 8.5908C9.3668 8.57319 9.36465 8.5605 9.36337 8.55174C9.36224 8.55047 9.36073 8.54993 9.35946 8.54881C9.35064 8.54753 9.33797 8.54536 9.3204 8.54393C9.24062 8.53741 9.13053 8.53709 8.93368 8.53709H7.06649C6.86964 8.53709 6.75955 8.53741 6.67977 8.54393C6.66156 8.54542 6.64858 8.54751 6.63974 8.54881C6.63851 8.54993 6.63691 8.55048 6.63583 8.55174C6.63456 8.5605 6.63336 8.57328 6.63192 8.5908C6.6254 8.67062 6.62509 8.78148 6.62509 8.9785V13.2871H9.37509V8.9785C9.37509 8.78148 9.37477 8.67061 9.36825 8.5908ZM10.6251 13.2871H11.8663C12.2499 13.2871 12.5005 13.2861 12.6915 13.2705C12.8752 13.2555 12.9486 13.2292 12.9884 13.209L13.0831 13.1513C13.173 13.086 13.247 13.0003 13.2979 12.9004C13.3182 12.8605 13.3444 12.7869 13.3595 12.6035C13.3751 12.4125 13.3751 12.162 13.3751 11.7783V6.95506C13.3751 6.53721 13.3695 6.44728 13.3487 6.37303C13.3255 6.29014 13.2876 6.21187 13.2364 6.14256C13.1906 6.08059 13.123 6.02126 12.7931 5.76463L8.27157 2.24803C8.14754 2.15155 8.08003 2.09893 8.02841 2.06444C8.01732 2.05703 8.00875 2.05221 8.00302 2.04881C8.00102 2.04867 7.99915 2.04867 7.99716 2.04881C7.99143 2.05221 7.98285 2.05703 7.97177 2.06444C7.92015 2.09893 7.85263 2.15155 7.7286 2.24803L3.20712 5.76463C2.8772 6.02125 2.80961 6.08057 2.76376 6.14256C2.71257 6.2118 2.67466 6.29012 2.65145 6.37303C2.63071 6.44726 2.62509 6.53709 2.62509 6.95506V11.7783C2.62509 12.162 2.62511 12.4125 2.64071 12.6035C2.65567 12.7862 2.68197 12.8595 2.70224 12.8994C2.77013 13.0326 2.87866 13.1411 3.01181 13.209L3.10653 13.2422C3.15275 13.253 3.21704 13.263 3.30868 13.2705C3.49965 13.2861 3.75025 13.2871 4.13388 13.2871H5.37509V8.9785C5.37509 8.80211 5.37418 8.63176 5.38583 8.48924C5.39807 8.33956 5.42717 8.16607 5.51571 7.99217L5.56552 7.9033C5.68964 7.70078 5.8676 7.53611 6.08016 7.42772L6.21005 7.37108C6.33947 7.32494 6.46577 7.30702 6.57821 7.29783C6.72062 7.28621 6.8903 7.28709 7.06649 7.28709H8.93368C9.10988 7.28709 9.27956 7.28621 9.42196 7.29783C9.5344 7.30702 9.66071 7.32494 9.79013 7.37108L9.92001 7.42772L10.0089 7.47752C10.2111 7.60162 10.3761 7.77956 10.4845 7.99217C10.573 8.16607 10.6021 8.33956 10.6143 8.48924C10.626 8.63176 10.6251 8.80211 10.6251 8.9785V13.2871ZM14.6251 11.7783C14.6251 12.1413 14.6253 12.4514 14.6046 12.7051C14.5832 12.966 14.5362 13.2224 14.4112 13.4678C14.2235 13.836 13.9241 14.1356 13.5558 14.3232C13.3104 14.4482 13.054 14.4953 12.7931 14.5166C12.5394 14.5373 12.2292 14.5371 11.8663 14.5371H4.13388C3.77098 14.5371 3.46075 14.5373 3.20712 14.5166C2.94616 14.4953 2.6898 14.4482 2.44442 14.3232C2.07603 14.1356 1.7767 13.836 1.58895 13.4678C1.46397 13.2224 1.41693 12.966 1.39559 12.7051C1.37487 12.4514 1.37509 12.1413 1.37509 11.7783V6.95506C1.37509 6.60766 1.36953 6.31438 1.44735 6.03611C1.51154 5.80678 1.61729 5.59086 1.75888 5.3994C1.93074 5.16703 2.16527 4.99065 2.43954 4.77733L6.96102 1.26072C7.14957 1.11407 7.38218 0.918674 7.6622 0.842755C7.88326 0.782884 8.11691 0.782884 8.33798 0.842755C8.618 0.918674 8.8506 1.11407 9.03915 1.26072L13.5606 4.77733C13.8349 4.99063 14.0694 5.16701 14.2413 5.3994L14.3409 5.54686C14.4333 5.69906 14.5046 5.86401 14.5528 6.03611C14.6306 6.31436 14.6251 6.60762 14.6251 6.95506V11.7783Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/inbox-icon.tsx b/packages/propel/src/icons/workspace/inbox-icon.tsx
new file mode 100644
index 0000000..66814a8
--- /dev/null
+++ b/packages/propel/src/icons/workspace/inbox-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function InboxIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.0401 8.62507H12.0781C11.8582 8.62516 11.657 8.74968 11.5586 8.94636C11.2485 9.56676 10.6144 9.95906 9.92091 9.95906H6.07814C5.38471 9.95897 4.75057 9.56666 4.44044 8.94636C4.34199 8.74967 4.1409 8.62507 3.92091 8.62507H1.959C1.95888 8.66367 1.95802 8.70708 1.95802 8.75593V10.1339C1.95802 10.7042 1.95872 11.0944 1.98341 11.3966C2.00749 11.6912 2.05084 11.847 2.10743 11.9581C2.23925 12.2168 2.45027 12.4269 2.709 12.5587C2.8201 12.6153 2.97574 12.6596 3.27052 12.6837C3.57264 12.7083 3.96298 12.7091 4.53321 12.7091H11.4668C12.0369 12.7091 12.4274 12.7083 12.7295 12.6837C13.0241 12.6596 13.1799 12.6153 13.291 12.5587C13.5496 12.4268 13.7599 12.2167 13.8916 11.9581C13.9482 11.8469 13.9925 11.6913 14.0166 11.3966C14.0413 11.0944 14.041 10.7042 14.041 10.1339V8.75593C14.041 8.70708 14.0402 8.66367 14.0401 8.62507ZM5.97755 3.29207C5.21433 3.29207 4.98135 3.30027 4.78712 3.36726C4.59456 3.43373 4.41898 3.5421 4.27345 3.68464C4.12668 3.82841 4.01513 4.03332 3.67384 4.71589L2.34474 7.37507H3.92091C4.61442 7.37507 5.24844 7.7674 5.5586 8.38777C5.657 8.58446 5.85819 8.70897 6.07814 8.70906H9.92091C10.1409 8.70906 10.342 8.58445 10.4404 8.38777C10.7506 7.76744 11.3847 7.37516 12.0781 7.37507H13.6543L12.3252 4.71589C11.9839 4.03325 11.8724 3.82842 11.7256 3.68464C11.58 3.5421 11.4046 3.4337 11.2119 3.36726C11.0177 3.30027 10.7847 3.29207 10.0215 3.29207H5.97755ZM15.291 10.1339C15.291 10.6835 15.2915 11.1333 15.2617 11.4981C15.2351 11.8236 15.1824 12.1234 15.0615 12.4053L15.0049 12.5255C14.7533 13.0193 14.3522 13.4213 13.8584 13.6729C13.5417 13.8343 13.2032 13.8993 12.8311 13.9298C12.4663 13.9596 12.0164 13.9591 11.4668 13.9591H4.53321C3.98371 13.9591 3.53374 13.9595 3.16896 13.9298C2.79695 13.8994 2.45821 13.8342 2.14161 13.6729C1.70944 13.4527 1.34794 13.1173 1.09571 12.7061L0.994152 12.5255C0.832797 12.2088 0.767723 11.8703 0.737316 11.4981C0.707517 11.1333 0.708019 10.6835 0.708019 10.1339V8.75593C0.708019 8.49089 0.706677 8.29939 0.73341 8.10847C0.755917 7.94781 0.793061 7.78957 0.844738 7.63582L0.896496 7.4991C0.952354 7.36314 1.02352 7.2226 1.11232 7.045L2.55665 4.15632C2.85737 3.55488 3.06727 3.11738 3.39943 2.79207C3.67739 2.51984 4.01208 2.31249 4.37989 2.18562C4.81947 2.03402 5.30497 2.04207 5.97755 2.04207H10.0215C10.694 2.04207 11.1796 2.03412 11.6192 2.18562C11.987 2.31249 12.3226 2.51981 12.6006 2.79207C12.9326 3.11739 13.1426 3.5549 13.4434 4.15632L14.8877 7.045C15.0062 7.28198 15.0928 7.4524 15.1543 7.63484V7.63582C15.206 7.78963 15.2432 7.94783 15.2656 8.10847C15.2924 8.29945 15.291 8.49091 15.291 8.75593V10.1339Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/index.ts b/packages/propel/src/icons/workspace/index.ts
new file mode 100644
index 0000000..ddcbd68
--- /dev/null
+++ b/packages/propel/src/icons/workspace/index.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./analytics-icon";
+export * from "./archive-icon";
+export * from "./dashboard-icon";
+export * from "./draft-icon";
+export * from "./home-icon";
+export * from "./inbox-icon";
+export * from "./multiple-sticky-icon";
+export * from "./project-icon";
+export * from "./your-work-icon";
diff --git a/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx b/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx
new file mode 100644
index 0000000..7c56fe1
--- /dev/null
+++ b/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function MultipleStickyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.6162 9.12793V7.52246C13.6162 7.09217 13.6155 6.80665 13.5977 6.58789C13.5804 6.37643 13.5499 6.28228 13.5205 6.22461C13.4367 6.06019 13.3031 5.92661 13.1387 5.84277C12.8312 5.6861 12.7086 5.30949 12.8652 5.00195C13.0219 4.69439 13.3985 4.57182 13.7061 4.72852C14.1059 4.93224 14.431 5.25738 14.6348 5.65723C14.7689 5.92046 14.8202 6.19754 14.8438 6.48633C14.8667 6.76775 14.8662 7.1129 14.8662 7.52246V9.12793C14.8662 9.46504 14.8704 9.73576 14.8076 9.99707C14.7556 10.2138 14.6692 10.4213 14.5527 10.6113C14.4124 10.8402 14.2186 11.0285 13.9805 11.2666L11.3857 13.8613C11.1476 14.0994 10.9593 14.2933 10.7305 14.4336C10.5404 14.55 10.333 14.6364 10.1162 14.6885C9.85491 14.7512 9.58418 14.7471 9.24707 14.7471H7.6416C7.23205 14.7471 6.88689 14.7476 6.60547 14.7246C6.31669 14.701 6.03959 14.6497 5.77637 14.5156C5.37654 14.3119 5.05138 13.9867 4.84766 13.5869C4.69095 13.2794 4.81354 12.9028 5.12109 12.7461C5.42863 12.5895 5.80523 12.712 5.96192 13.0195C6.04576 13.1839 6.17935 13.3175 6.34375 13.4014C6.40139 13.4307 6.49555 13.4612 6.70703 13.4785C6.92579 13.4964 7.21132 13.4971 7.6416 13.4971H9.24707C9.4184 13.4971 9.53371 13.4947 9.61621 13.4922V12.5225C9.61621 12.1129 9.6157 11.7677 9.63867 11.4863C9.66227 11.1975 9.71353 10.9205 9.84766 10.6572C10.0514 10.2574 10.3765 9.93224 10.7764 9.72852C11.0396 9.5944 11.3167 9.54313 11.6055 9.51953C11.8869 9.49656 12.232 9.49707 12.6416 9.49707H13.6113C13.6138 9.41457 13.6162 9.29926 13.6162 9.12793ZM10.6162 6.12793V4.52246C10.6162 4.09217 10.6155 3.80665 10.5977 3.58789C10.5804 3.37643 10.5499 3.28228 10.5205 3.22461C10.4367 3.06019 10.3031 2.92661 10.1387 2.84277C10.081 2.81339 9.98685 2.7829 9.77539 2.76563C9.55664 2.74776 9.27112 2.74707 8.84082 2.74707H4.6416C4.21132 2.74707 3.92579 2.74776 3.70703 2.76563C3.49556 2.78291 3.40139 2.81341 3.34375 2.84277C3.17934 2.92662 3.04576 3.06021 2.96192 3.22461C2.93253 3.28228 2.90204 3.37643 2.88477 3.58789C2.8669 3.80665 2.86621 4.09217 2.86621 4.52246V8.72168C2.86621 9.15196 2.8669 9.43749 2.88477 9.65625C2.90205 9.86773 2.93255 9.96189 2.96192 10.0195C3.04576 10.1839 3.17935 10.3175 3.34375 10.4014C3.40139 10.4307 3.49555 10.4612 3.70703 10.4785C3.92579 10.4964 4.21132 10.4971 4.6416 10.4971H6.24707C6.4184 10.4971 6.53371 10.4947 6.61621 10.4922V9.52246C6.61621 9.11291 6.6157 8.76775 6.63867 8.48633C6.66227 8.19755 6.71353 7.92046 6.84766 7.65723C7.05137 7.25741 7.37651 6.93224 7.77637 6.72852C8.0396 6.5944 8.31668 6.54313 8.60547 6.51953C8.88689 6.49656 9.23204 6.49707 9.6416 6.49707H10.6113C10.6138 6.41457 10.6162 6.29926 10.6162 6.12793ZM10.8662 12.6133L12.7324 10.7471H12.6416C12.2113 10.7471 11.9258 10.7478 11.707 10.7656C11.4956 10.7829 11.4014 10.8134 11.3438 10.8428C11.1794 10.9266 11.0458 11.0602 10.9619 11.2246C10.9325 11.2822 10.902 11.3764 10.8848 11.5879C10.8669 11.8067 10.8662 12.0922 10.8662 12.5225V12.6133ZM7.86621 9.61328L9.73242 7.74707H9.6416C9.21131 7.74707 8.92579 7.74776 8.70703 7.76563C8.49557 7.7829 8.40142 7.81339 8.34375 7.84277C8.17936 7.9266 8.04576 8.06019 7.96192 8.22461C7.93255 8.28225 7.90205 8.37642 7.88477 8.58789C7.8669 8.80665 7.86621 9.09218 7.86621 9.52246V9.61328ZM11.8662 6.12793C11.8662 6.46504 11.8704 6.73576 11.8076 6.99707C11.7556 7.21382 11.6692 7.42126 11.5527 7.61133C11.4124 7.84018 11.2186 8.02845 10.9805 8.2666L8.38574 10.8613C8.1476 11.0995 7.95931 11.2933 7.73047 11.4336C7.54042 11.55 7.33298 11.6364 7.11621 11.6885C6.85491 11.7512 6.58418 11.7471 6.24707 11.7471H4.6416C4.23205 11.7471 3.88689 11.7476 3.60547 11.7246C3.31669 11.701 3.03959 11.6497 2.77637 11.5156C2.37654 11.3119 2.05138 10.9867 1.84766 10.5869C1.71354 10.3237 1.66227 10.0466 1.63867 9.75781C1.6157 9.4764 1.61621 9.13124 1.61621 8.72168V4.52246C1.61621 4.1129 1.6157 3.76774 1.63867 3.48633C1.66227 3.19754 1.71355 2.92045 1.84766 2.65723C2.05139 2.25738 2.37655 1.93223 2.77637 1.72852C3.0396 1.59439 3.31669 1.54313 3.60547 1.51953C3.88689 1.49656 4.23205 1.49707 4.6416 1.49707H8.84082C9.25038 1.49707 9.59554 1.49656 9.87695 1.51953C10.1657 1.54313 10.4428 1.5944 10.7061 1.72852C11.1059 1.93224 11.431 2.25738 11.6348 2.65723C11.7689 2.92046 11.8202 3.19754 11.8438 3.48633C11.8667 3.76774 11.8662 4.1129 11.8662 4.52246V6.12793Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/project-icon.tsx b/packages/propel/src/icons/workspace/project-icon.tsx
new file mode 100644
index 0000000..655556e
--- /dev/null
+++ b/packages/propel/src/icons/workspace/project-icon.tsx
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function ProjectIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.041 9.77251C13.6575 9.86273 13.1544 9.9762 12.5771 10.0879C11.271 10.3407 9.55874 10.5996 8 10.5997C6.44125 10.5997 4.7291 10.3408 3.42285 10.0879C2.84526 9.97614 2.34163 9.86276 1.95801 9.77251V11.8409C1.95801 12.2244 1.95804 12.4751 1.97363 12.6661C1.98864 12.8498 2.01488 12.9231 2.03516 12.9629C2.10308 13.0962 2.21151 13.2046 2.34473 13.2725L2.43945 13.3047C2.48568 13.3156 2.54989 13.3265 2.6416 13.334C2.83257 13.3496 3.0832 13.3497 3.4668 13.3497H12.5332C12.9165 13.3497 13.1665 13.3496 13.3574 13.334C13.5407 13.319 13.6144 13.2928 13.6543 13.2725C13.7875 13.2046 13.896 13.0961 13.9639 12.9629L13.9971 12.8682C14.0079 12.822 14.0179 12.7577 14.0254 12.6661C14.041 12.4751 14.041 12.2245 14.041 11.8409V9.77251ZM3.4668 5.26665C3.08319 5.26665 2.83257 5.26668 2.6416 5.28227C2.45792 5.29728 2.38454 5.32351 2.34473 5.34379C2.22354 5.40557 2.12394 5.50122 2.05566 5.61821C2.05373 5.62932 2.0514 5.64383 2.04883 5.66215C2.03783 5.74053 2.02735 5.85115 2.01758 5.99126C1.99814 6.26994 1.98459 6.63077 1.97559 7.01372C1.96343 7.53069 1.96026 8.07474 1.95898 8.48833C2.00287 8.49907 2.0493 8.51164 2.09863 8.52348C2.48215 8.61553 3.02514 8.73847 3.66016 8.86137C4.9372 9.10854 6.55887 9.34965 8 9.34965C9.44093 9.34962 11.062 9.1085 12.3389 8.86137C12.9737 8.7385 13.5169 8.61552 13.9004 8.52348C13.9493 8.51175 13.9955 8.49898 14.0391 8.48833C14.0378 8.07474 14.0356 7.53069 14.0234 7.01372C14.0144 6.63077 14.0009 6.26994 13.9814 5.99126C13.9717 5.85117 13.9612 5.74052 13.9502 5.66215C13.9475 5.6432 13.9444 5.62848 13.9424 5.61723C13.8741 5.50082 13.7751 5.40536 13.6543 5.34379C13.6145 5.32353 13.5409 5.29727 13.3574 5.28227C13.1665 5.26671 12.9165 5.26665 12.5332 5.26665H3.4668ZM7.375 7.73442V7.72465C7.375 7.37948 7.65482 7.09965 8 7.09965C8.34503 7.09983 8.625 7.37958 8.625 7.72465V7.73442C8.625 8.07949 8.34503 8.35924 8 8.35942C7.65482 8.35942 7.375 8.0796 7.375 7.73442ZM8 2.59965C7.34034 2.59965 7.13232 2.60514 6.97754 2.64653C6.50307 2.77367 6.13203 3.14468 6.00488 3.61919C5.981 3.70849 5.97063 3.81544 5.96484 4.01665H10.0342C10.0284 3.8154 10.018 3.70851 9.99414 3.61919C9.86702 3.14477 9.49683 2.77373 9.02246 2.64653C8.86766 2.60505 8.65998 2.59966 8 2.59965ZM15.291 11.8409C15.291 12.2037 15.2922 12.514 15.2715 12.7676C15.2502 13.0285 15.2031 13.285 15.0781 13.5303C14.8904 13.8988 14.5902 14.1981 14.2217 14.3858C13.9764 14.5107 13.7208 14.5578 13.46 14.5791C13.2063 14.5999 12.8962 14.5997 12.5332 14.5997H3.4668C3.10389 14.5997 2.79368 14.5998 2.54004 14.5791C2.27905 14.5578 2.02275 14.5108 1.77734 14.3858C1.4089 14.1981 1.10958 13.8987 0.921875 13.5303C0.796827 13.2849 0.749839 13.0286 0.728516 12.7676C0.707814 12.514 0.708008 12.2038 0.708008 11.8409V8.97465C0.708008 8.60181 0.708206 7.76501 0.726563 6.98442C0.735721 6.59503 0.749071 6.21171 0.770508 5.90434C0.781165 5.75155 0.794714 5.60812 0.811524 5.48833C0.82359 5.40234 0.849238 5.22862 0.921875 5.08598L0.99707 4.95122C1.18524 4.64429 1.45479 4.39388 1.77734 4.22954C2.0227 4.10455 2.27911 4.0575 2.54004 4.03618C2.79366 4.01548 3.10391 4.01665 3.4668 4.01665H4.71387C4.72148 3.7397 4.74113 3.50667 4.79785 3.29497C5.04064 2.3894 5.74777 1.68228 6.65332 1.4395C7.00717 1.34469 7.42024 1.34965 8 1.34965C8.57959 1.34965 8.99192 1.34471 9.3457 1.4395C10.2514 1.68221 10.9594 2.3892 11.2021 3.29497C11.2589 3.50666 11.2775 3.73971 11.2852 4.01665H12.5332C12.8962 4.01665 13.2063 4.01545 13.46 4.03618C13.7207 4.0575 13.9765 4.1047 14.2217 4.22954C14.5901 4.41727 14.8904 4.71742 15.0781 5.08598C15.1506 5.22855 15.1754 5.40238 15.1875 5.48833C15.2043 5.60812 15.2179 5.75156 15.2285 5.90434C15.25 6.21171 15.2643 6.59503 15.2734 6.98442C15.2918 7.76501 15.291 8.60181 15.291 8.97465V11.8409Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/your-work-icon.tsx b/packages/propel/src/icons/workspace/your-work-icon.tsx
new file mode 100644
index 0000000..c993bf9
--- /dev/null
+++ b/packages/propel/src/icons/workspace/your-work-icon.tsx
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function YourWorkIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M0.7083 14C0.7083 13.1154 0.701518 12.5344 0.849901 12.0449C1.16902 10.9929 1.99225 10.1687 3.04424 9.84961C3.53385 9.70109 4.11539 9.70801 5.00029 9.70801H8.00029C8.34521 9.70818 8.62512 9.98809 8.62529 10.333C8.62529 10.6781 8.34532 10.9578 8.00029 10.958H5.00029C4.0248 10.958 3.67493 10.9649 3.40752 11.0459C2.75503 11.2438 2.24415 11.7548 2.04619 12.4072C1.96506 12.6747 1.9583 13.0242 1.9583 14C1.9583 14.3452 1.67848 14.625 1.3333 14.625C0.988122 14.625 0.7083 14.3452 0.7083 14ZM9.04131 5C9.04131 3.68832 7.97798 2.625 6.66631 2.625C5.35478 2.62518 4.29131 3.68843 4.29131 5C4.29131 6.31157 5.35478 7.37482 6.66631 7.375C7.97798 7.375 9.04131 6.31168 9.04131 5ZM10.2913 5C10.2913 7.00203 8.66834 8.625 6.66631 8.625C4.66442 8.62482 3.04131 7.00192 3.04131 5C3.04131 2.99808 4.66442 1.37518 6.66631 1.375C8.66834 1.375 10.2913 2.99797 10.2913 5Z"
+        fill={color}
+      />
+      <path
+        d="M11.6338 9.27539C11.9026 9.27559 12.1415 9.44806 12.2265 9.70312L13.0332 12.124L13.1406 11.8027L13.1797 11.7109C13.2861 11.5072 13.4981 11.375 13.7334 11.375H14.667C15.0119 11.3752 15.2917 11.6551 15.292 12C15.292 12.3451 15.012 12.6248 14.667 12.625H14.1836L13.6259 14.2979C13.5409 14.5531 13.3022 14.7256 13.0332 14.7256C12.7642 14.7255 12.5255 14.553 12.4404 14.2979L11.6328 11.877L11.5263 12.1982C11.4412 12.4533 11.2024 12.6249 10.9336 12.625H9.99997C9.65479 12.625 9.37497 12.3452 9.37497 12C9.37518 11.655 9.65492 11.375 9.99997 11.375H10.4834L11.04 9.70312C11.1251 9.44791 11.3647 9.27539 11.6338 9.27539Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/input/index.ts b/packages/propel/src/input/index.ts
new file mode 100644
index 0000000..4859616
--- /dev/null
+++ b/packages/propel/src/input/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./input";
diff --git a/packages/propel/src/input/input.stories.tsx b/packages/propel/src/input/input.stories.tsx
new file mode 100644
index 0000000..343f003
--- /dev/null
+++ b/packages/propel/src/input/input.stories.tsx
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Input } from "./index";
+
+const meta: Meta<typeof Input> = {
+  title: "Components/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    mode: {
+      control: "select",
+      options: ["primary", "transparent", "true-transparent"],
+    },
+    inputSize: {
+      control: "select",
+      options: ["xs", "sm", "md"],
+    },
+    hasError: {
+      control: "boolean",
+    },
+    type: {
+      control: "select",
+      options: ["text", "email", "password", "number", "tel", "url", "search"],
+    },
+    autoComplete: {
+      control: "select",
+      options: ["on", "off"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+const createStory = (args: Partial<React.ComponentProps<typeof Input>>): Story => ({
+  args: { placeholder: "Enter text...", className: "w-[400px]", ...args },
+});
+
+const createShowcaseStory = (
+  title: string,
+  sections: Array<{ label: string; props: Partial<React.ComponentProps<typeof Input>> }>
+): Story => ({
+  render: () => (
+    <div className="w-[400px] space-y-4">
+      <div className="space-y-2">
+        <h3 className="text-13 font-medium">{title}</h3>
+        <div className="space-y-2">
+          {sections.map(({ label, props }, index) => (
+            <div key={index} className="w-full">
+              <label className="text-gray-500 text-11">{label}</label>
+              <Input className="w-full" {...props} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+});
+
+export const Default = createStory({});
+
+export const Primary = createStory({
+  mode: "primary",
+  placeholder: "Primary input",
+});
+
+export const Transparent = createStory({
+  mode: "transparent",
+  placeholder: "Transparent input",
+});
+
+export const TrueTransparent = createStory({
+  mode: "true-transparent",
+  placeholder: "True transparent input",
+});
+
+export const ExtraSmall = createStory({
+  inputSize: "xs",
+  placeholder: "Extra small input",
+});
+
+export const Small = createStory({
+  inputSize: "sm",
+  placeholder: "Small input",
+});
+
+export const Medium = createStory({
+  inputSize: "md",
+  placeholder: "Medium input",
+});
+
+export const WithError = createStory({
+  hasError: true,
+  placeholder: "Input with error",
+  defaultValue: "Invalid input",
+});
+
+export const Disabled = createStory({
+  disabled: true,
+  placeholder: "Disabled input",
+  defaultValue: "Cannot edit this",
+});
+
+export const WithValue = createStory({
+  defaultValue: "Pre-filled value",
+  placeholder: "Input with value",
+});
+
+export const Email = createStory({
+  type: "email",
+  placeholder: "Enter your email",
+  autoComplete: "on",
+});
+
+export const Password = createStory({
+  type: "password",
+  placeholder: "Enter your password",
+  autoComplete: "off",
+});
+
+export const Number = createStory({
+  type: "number",
+  placeholder: "Enter a number",
+});
+
+export const Search = createStory({
+  type: "search",
+  placeholder: "Search...",
+});
+
+export const AllModes = createShowcaseStory("Input Modes", [
+  { label: "Primary", props: { mode: "primary", placeholder: "Primary input" } },
+  { label: "Transparent", props: { mode: "transparent", placeholder: "Transparent input" } },
+  { label: "True Transparent", props: { mode: "true-transparent", placeholder: "True transparent input" } },
+]);
+
+export const AllSizes = createShowcaseStory("Input Sizes", [
+  { label: "Extra Small (xs)", props: { inputSize: "xs", placeholder: "Extra small input" } },
+  { label: "Small (sm)", props: { inputSize: "sm", placeholder: "Small input" } },
+  { label: "Medium (md)", props: { inputSize: "md", placeholder: "Medium input" } },
+]);
+
+export const AllStates = createShowcaseStory("Input States", [
+  { label: "Normal", props: { placeholder: "Normal input" } },
+  { label: "With Error", props: { hasError: true, placeholder: "Input with error" } },
+  { label: "Disabled", props: { disabled: true, placeholder: "Disabled input" } },
+  { label: "With Value", props: { defaultValue: "Pre-filled value", placeholder: "Input with value" } },
+]);
diff --git a/packages/propel/src/input/input.tsx b/packages/propel/src/input/input.tsx
new file mode 100644
index 0000000..e6b8c09
--- /dev/null
+++ b/packages/propel/src/input/input.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Input as BaseInput } from "@base-ui-components/react/input";
+// helpers
+import { cn } from "../utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  mode?: "primary" | "transparent" | "true-transparent";
+  inputSize?: "xs" | "sm" | "md";
+  hasError?: boolean;
+}
+
+const Input = React.forwardRef(function Input(props: InputProps, ref: React.ForwardedRef<HTMLInputElement>) {
+  const {
+    id,
+    type,
+    name,
+    mode = "primary",
+    inputSize = "sm",
+    hasError = false,
+    className = "",
+    autoComplete = "off",
+    ...rest
+  } = props;
+
+  return (
+    <BaseInput
+      id={id}
+      ref={ref}
+      type={type}
+      name={name}
+      className={cn(
+        "placeholder-tertiary block rounded-md border-subtle-1 bg-layer-2 text-13 focus:outline-none",
+        {
+          "rounded-md border-[0.5px]": mode === "primary",
+          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
+            mode === "transparent",
+          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
+          "border-danger-strong": hasError,
+          "px-1.5 py-1": inputSize === "xs",
+          "px-3 py-2": inputSize === "sm",
+          "p-3": inputSize === "md",
+        },
+        className
+      )}
+      aria-invalid={hasError || undefined}
+      autoComplete={autoComplete}
+      {...rest}
+    />
+  );
+});
+
+Input.displayName = "form-input-field";
+
+export { Input };
diff --git a/packages/propel/src/menu/index.ts b/packages/propel/src/menu/index.ts
new file mode 100644
index 0000000..9b2b1a9
--- /dev/null
+++ b/packages/propel/src/menu/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./menu";
+export * from "./types";
diff --git a/packages/propel/src/menu/menu.stories.tsx b/packages/propel/src/menu/menu.stories.tsx
new file mode 100644
index 0000000..bd843fa
--- /dev/null
+++ b/packages/propel/src/menu/menu.stories.tsx
@@ -0,0 +1,274 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  HelpOutline,
+  LogOutOutline,
+  MailOutline,
+  SettingsOutline,
+  SubscribeOutline,
+  UserOutline,
+} from "@makeplane/propel/icons";
+import { Menu } from "./menu";
+
+const meta = {
+  title: "Components/Menu",
+  component: Menu,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  subcomponents: {
+    MenuItem: Menu.MenuItem,
+    SubMenu: Menu.SubMenu,
+  },
+  args: {
+    children: null,
+  },
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    return (
+      <Menu label="Options">
+        <Menu.MenuItem onClick={() => alert("Option 1 clicked")}>Option 1</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Option 2 clicked")}>Option 2</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Option 3 clicked")}>Option 3</Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  render() {
+    return (
+      <Menu label="Account">
+        <Menu.MenuItem onClick={() => alert("Profile")}>
+          <div className="flex items-center gap-2">
+            <UserOutline className="h-4 w-4" />
+            <span>Profile</span>
+          </div>
+        </Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Settings")}>
+          <div className="flex items-center gap-2">
+            <SettingsOutline className="h-4 w-4" />
+            <span>Settings</span>
+          </div>
+        </Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Messages")}>
+          <div className="flex items-center gap-2">
+            <MailOutline className="h-4 w-4" />
+            <span>Messages</span>
+          </div>
+        </Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Logout")}>
+          <div className="flex items-center gap-2">
+            <LogOutOutline className="h-4 w-4" />
+            <span>Logout</span>
+          </div>
+        </Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const Ellipsis: Story = {
+  render() {
+    return (
+      <Menu ellipsis>
+        <Menu.MenuItem onClick={() => alert("Edit")}>Edit</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Duplicate")}>Duplicate</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Delete")}>Delete</Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const VerticalEllipsis: Story = {
+  render() {
+    return (
+      <Menu verticalEllipsis>
+        <Menu.MenuItem onClick={() => alert("Edit")}>Edit</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Duplicate")}>Duplicate</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Delete")}>Delete</Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const NoBorder: Story = {
+  render() {
+    return (
+      <Menu label="Actions" noBorder>
+        <Menu.MenuItem onClick={() => alert("Action 1")}>Action 1</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Action 2")}>Action 2</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Action 3")}>Action 3</Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const NoChevron: Story = {
+  render() {
+    return (
+      <Menu label="Menu" noChevron>
+        <Menu.MenuItem onClick={() => alert("Item 1")}>Item 1</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Item 2")}>Item 2</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Item 3")}>Item 3</Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render() {
+    return (
+      <Menu label="Disabled Menu" disabled>
+        <Menu.MenuItem onClick={() => alert("Item 1")}>Item 1</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Item 2")}>Item 2</Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const DisabledItems: Story = {
+  render() {
+    return (
+      <Menu label="Options">
+        <Menu.MenuItem onClick={() => alert("Enabled")}>Enabled Item</Menu.MenuItem>
+        <Menu.MenuItem disabled>Disabled Item</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Enabled")}>Another Enabled Item</Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const CustomButton: Story = {
+  render() {
+    return (
+      <Menu
+        customButton={
+          <button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">Custom Button</button>
+        }
+      >
+        <Menu.MenuItem onClick={() => alert("Option 1")}>Option 1</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Option 2")}>Option 2</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Option 3")}>Option 3</Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const WithSubmenu: Story = {
+  render() {
+    return (
+      <Menu label="File">
+        <Menu.MenuItem onClick={() => alert("New File")}>New File</Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Open")}>Open</Menu.MenuItem>
+        <Menu.SubMenu
+          trigger="Export"
+          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
+        >
+          <Menu.MenuItem onClick={() => alert("Export as PDF")}>Export as PDF</Menu.MenuItem>
+          <Menu.MenuItem onClick={() => alert("Export as CSV")}>Export as CSV</Menu.MenuItem>
+          <Menu.MenuItem onClick={() => alert("Export as JSON")}>Export as JSON</Menu.MenuItem>
+        </Menu.SubMenu>
+        <Menu.MenuItem onClick={() => alert("Close")}>Close</Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const MaxHeightSmall: Story = {
+  render() {
+    return (
+      <Menu label="Small Height" maxHeight="sm">
+        {Array.from({ length: 10 }, (_, i) => (
+          <Menu.MenuItem key={i} onClick={() => alert(`Item ${i + 1}`)}>
+            Item {i + 1}
+          </Menu.MenuItem>
+        ))}
+      </Menu>
+    );
+  },
+};
+
+export const MaxHeightLarge: Story = {
+  render() {
+    return (
+      <Menu label="Large Height" maxHeight="lg">
+        {Array.from({ length: 15 }, (_, i) => (
+          <Menu.MenuItem key={i} onClick={() => alert(`Item ${i + 1}`)}>
+            Item {i + 1}
+          </Menu.MenuItem>
+        ))}
+      </Menu>
+    );
+  },
+};
+
+export const ComplexMenu: Story = {
+  render() {
+    return (
+      <Menu label="More Actions" buttonClassName="bg-gray-100">
+        <Menu.MenuItem onClick={() => alert("Notifications")}>
+          <div className="flex items-center gap-2">
+            <SubscribeOutline className="h-4 w-4" />
+            <span>Notifications</span>
+            <span className="bg-red-500 ml-auto rounded-sm px-2 py-0.5 text-11 text-on-color">3</span>
+          </div>
+        </Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Help")}>
+          <div className="flex items-center gap-2">
+            <HelpOutline className="h-4 w-4" />
+            <span>Help Center</span>
+          </div>
+        </Menu.MenuItem>
+        <Menu.SubMenu
+          trigger="Settings"
+          className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
+        >
+          <Menu.MenuItem onClick={() => alert("General Settings")}>General</Menu.MenuItem>
+          <Menu.MenuItem onClick={() => alert("Privacy Settings")}>Privacy</Menu.MenuItem>
+          <Menu.MenuItem onClick={() => alert("Security Settings")}>Security</Menu.MenuItem>
+        </Menu.SubMenu>
+        <div className="border-gray-200 my-1 border-t" />
+        <Menu.MenuItem onClick={() => alert("Logout")}>
+          <div className="flex items-center gap-2 text-danger-primary">
+            <LogOutOutline className="h-4 w-4" />
+            <span>Logout</span>
+          </div>
+        </Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
+
+export const CustomStyles: Story = {
+  render() {
+    return (
+      <Menu
+        label="Styled Menu"
+        buttonClassName="bg-purple-500 text-on-color hover:bg-purple-600"
+        optionsClassName="bg-purple-50 border-purple-300"
+      >
+        <Menu.MenuItem onClick={() => alert("Item 1")} className="hover:bg-purple-200">
+          Item 1
+        </Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Item 2")} className="hover:bg-purple-200">
+          Item 2
+        </Menu.MenuItem>
+        <Menu.MenuItem onClick={() => alert("Item 3")} className="hover:bg-purple-200">
+          Item 3
+        </Menu.MenuItem>
+      </Menu>
+    );
+  },
+};
diff --git a/packages/propel/src/menu/menu.tsx b/packages/propel/src/menu/menu.tsx
new file mode 100644
index 0000000..a7446de
--- /dev/null
+++ b/packages/propel/src/menu/menu.tsx
@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Menu as BaseMenu } from "@base-ui-components/react/menu";
+import { ChevronDownOutline, ChevronRightOutline, MoreHorizontalOutline } from "@makeplane/propel/icons";
+import { cn } from "../utils/classname";
+import type { TMenuProps, TSubMenuProps, TMenuItemProps } from "./types";
+
+// Context for main menu to communicate with submenus
+const MenuContext = React.createContext<{
+  closeAllSubmenus: () => void;
+  registerSubmenu: (closeSubmenu: () => void) => () => void;
+} | null>(null);
+
+// SubMenu context for closing submenu from nested items
+const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(null);
+
+// Hook to use submenu context
+const useSubMenu = () => React.useContext(SubMenuContext);
+
+// SubMenu implementation
+function SubMenu(props: TSubMenuProps) {
+  const { children, trigger, disabled = false, className = "" } = props;
+
+  return (
+    <BaseMenu.SubmenuRoot disabled={disabled}>
+      <BaseMenu.SubmenuTrigger className={""}>
+        <span className="flex-1">{trigger}</span>
+        <ChevronRightOutline />
+      </BaseMenu.SubmenuTrigger>
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner className={""} alignOffset={-4} sideOffset={-4}>
+          <BaseMenu.Popup className={className}>{children} </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.SubmenuRoot>
+  );
+}
+
+function MenuItem(props: TMenuItemProps) {
+  const { children, disabled = false, onClick, className } = props;
+  const submenuContext = useSubMenu();
+
+  return (
+    <BaseMenu.Item
+      disabled={disabled}
+      className={cn(
+        "w-full cursor-pointer truncate rounded-sm px-1 py-1.5 text-left text-secondary outline-none select-none hover:bg-layer-1",
+        {
+          "text-placeholder": disabled,
+        },
+        className
+      )}
+      onClick={(e) => {
+        close();
+        onClick?.(e);
+        submenuContext?.closeSubmenu();
+      }}
+    >
+      {children}
+    </BaseMenu.Item>
+  );
+}
+
+function Menu(props: TMenuProps) {
+  const {
+    ariaLabel,
+    buttonClassName = "",
+    customButtonClassName = "",
+    customButtonTabIndex = 0,
+    children,
+    customButton,
+    disabled = false,
+    ellipsis = false,
+    label,
+    maxHeight = "md",
+    noBorder = false,
+    noChevron = false,
+    optionsClassName = "",
+    menuItemsClassName = "",
+    verticalEllipsis = false,
+    menuButtonOnClick,
+    onMenuClose,
+    tabIndex,
+    openOnHover = false,
+    handleOpenChange = () => {},
+  } = props;
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  // refs
+  const submenuClosersRef = React.useRef<Set<() => void>>(new Set());
+
+  const closeAllSubmenus = React.useCallback(() => {
+    submenuClosersRef.current.forEach((closeSubmenu) => closeSubmenu());
+  }, []);
+
+  const registerSubmenu = React.useCallback((closeSubmenu: () => void) => {
+    submenuClosersRef.current.add(closeSubmenu);
+    return () => {
+      submenuClosersRef.current.delete(closeSubmenu);
+    };
+  }, []);
+  const openDropdown = () => {
+    setIsOpen(true);
+  };
+
+  const closeDropdown = React.useCallback(() => {
+    if (isOpen) {
+      closeAllSubmenus();
+      onMenuClose?.();
+    }
+    setIsOpen(false);
+  }, [isOpen, closeAllSubmenus, onMenuClose]);
+
+  const handleMenuButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (isOpen) {
+      closeDropdown();
+    } else {
+      openDropdown();
+    }
+    if (menuButtonOnClick) menuButtonOnClick();
+  };
+
+  return (
+    <BaseMenu.Root openOnHover={openOnHover} onOpenChange={handleOpenChange}>
+      {customButton ? (
+        <BaseMenu.Trigger
+          type="button"
+          onClick={handleMenuButtonClick}
+          className={cn(customButtonClassName, "outline-none")}
+          tabIndex={customButtonTabIndex}
+          disabled={disabled}
+          aria-label={ariaLabel}
+        >
+          {customButton}
+        </BaseMenu.Trigger>
+      ) : (
+        <>
+          {ellipsis || verticalEllipsis ? (
+            <BaseMenu.Trigger
+              type="button"
+              onClick={handleMenuButtonClick}
+              disabled={disabled}
+              className={`relative grid place-items-center rounded-sm p-1 text-secondary outline-none hover:text-primary ${
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-layer-1"
+              } ${buttonClassName}`}
+              tabIndex={customButtonTabIndex}
+              aria-label={ariaLabel}
+            >
+              <MoreHorizontalOutline className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
+            </BaseMenu.Trigger>
+          ) : (
+            <BaseMenu.Trigger
+              type="button"
+              className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-11 whitespace-nowrap duration-300 outline-none ${
+                isOpen ? "bg-surface-2 text-primary" : "text-secondary"
+              } ${noBorder ? "" : "shadow-sm border border-strong focus:outline-none"} ${
+                disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-1"
+              } ${buttonClassName}`}
+              onClick={handleMenuButtonClick}
+              tabIndex={customButtonTabIndex}
+              disabled={disabled}
+              aria-label={ariaLabel}
+            >
+              {label}
+              {!noChevron && <ChevronDownOutline className="h-3.5 w-3.5" />}
+            </BaseMenu.Trigger>
+          )}
+        </>
+      )}
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner
+          align={"start"}
+          className={cn(
+            "fixed z-30 translate-y-0",
+            menuItemsClassName
+          )} /** translate-y-0 is a hack to create new stacking context. Required for safari  */
+        >
+          <BaseMenu.Popup
+            tabIndex={tabIndex}
+            className={cn(
+              "my-1 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap shadow-raised-200 focus:outline-none",
+              {
+                "max-h-60": maxHeight === "lg",
+                "max-h-48": maxHeight === "md",
+                "max-h-36": maxHeight === "rg",
+                "max-h-28": maxHeight === "sm",
+              },
+              optionsClassName
+            )}
+            data-main-menu="true"
+          >
+            <MenuContext.Provider value={{ closeAllSubmenus, registerSubmenu }}>{children}</MenuContext.Provider>
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.Root>
+  );
+}
+
+Menu.MenuItem = MenuItem;
+Menu.SubMenu = SubMenu;
+
+export { Menu };
diff --git a/packages/propel/src/menu/types.ts b/packages/propel/src/menu/types.ts
new file mode 100644
index 0000000..ef8093b
--- /dev/null
+++ b/packages/propel/src/menu/types.ts
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TPlacement = "top" | "bottom" | "left" | "right";
+
+export type TMenuProps = {
+  customButtonClassName?: string;
+  customButtonTabIndex?: number;
+  buttonClassName?: string;
+  className?: string;
+  customButton?: React.ReactNode;
+  disabled?: boolean;
+  input?: boolean;
+  label?: string | React.ReactNode;
+  maxHeight?: "sm" | "rg" | "md" | "lg";
+  noChevron?: boolean;
+  chevronClassName?: string;
+  onOpen?: () => void;
+  optionsClassName?: string;
+  placement?: TPlacement;
+  tabIndex?: number;
+  useCaptureForOutsideClick?: boolean;
+  children: React.ReactNode;
+  ellipsis?: boolean;
+  noBorder?: boolean;
+  verticalEllipsis?: boolean;
+  menuButtonOnClick?: (..._args: unknown[]) => void;
+  menuItemsClassName?: string;
+  onMenuClose?: () => void;
+  closeOnSelect?: boolean;
+  portalElement?: Element | null;
+  openOnHover?: boolean;
+  ariaLabel?: string;
+  handleOpenChange?: (open: boolean) => void;
+};
+
+export type TSubMenuProps = {
+  children: React.ReactNode;
+  trigger: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  contentClassName?: string;
+  placement?: TPlacement;
+};
+
+export type TMenuItemProps = {
+  children: React.ReactNode;
+  disabled?: boolean;
+  onClick?: (_args?: unknown) => void;
+  className?: string;
+};
diff --git a/packages/propel/src/pill/index.ts b/packages/propel/src/pill/index.ts
new file mode 100644
index 0000000..a8b491d
--- /dev/null
+++ b/packages/propel/src/pill/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { Pill, EPillVariant, EPillSize } from "./pill";
+export type { PillProps } from "./pill";
diff --git a/packages/propel/src/pill/pill.stories.tsx b/packages/propel/src/pill/pill.stories.tsx
new file mode 100644
index 0000000..36ca661
--- /dev/null
+++ b/packages/propel/src/pill/pill.stories.tsx
@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Pill, EPillVariant, EPillSize } from "./pill";
+
+const meta = {
+  title: "Components/Pill",
+  component: Pill,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    children: "Default",
+  },
+} satisfies Meta<typeof Pill>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Primary: Story = {
+  args: {
+    variant: EPillVariant.PRIMARY,
+    children: "Primary",
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: EPillVariant.SUCCESS,
+    children: "Success",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: EPillVariant.WARNING,
+    children: "Warning",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: EPillVariant.ERROR,
+    children: "Error",
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: EPillVariant.INFO,
+    children: "Info",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: EPillSize.SM,
+    children: "Small",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: EPillSize.MD,
+    children: "Medium",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: EPillSize.LG,
+    children: "Large",
+  },
+};
+
+export const AllVariants: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="flex flex-wrap gap-2">
+          <Pill variant={EPillVariant.DEFAULT}>Default</Pill>
+          <Pill variant={EPillVariant.PRIMARY}>Primary</Pill>
+          <Pill variant={EPillVariant.SUCCESS}>Success</Pill>
+          <Pill variant={EPillVariant.WARNING}>Warning</Pill>
+          <Pill variant={EPillVariant.ERROR}>Error</Pill>
+          <Pill variant={EPillVariant.INFO}>Info</Pill>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <Pill size={EPillSize.SM}>Small</Pill>
+          <Pill size={EPillSize.MD}>Medium</Pill>
+          <Pill size={EPillSize.LG}>Large</Pill>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithNumbers: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="flex flex-wrap gap-2">
+          <Pill variant={EPillVariant.PRIMARY}>3</Pill>
+          <Pill variant={EPillVariant.SUCCESS}>12</Pill>
+          <Pill variant={EPillVariant.WARNING}>99+</Pill>
+          <Pill variant={EPillVariant.ERROR}>!</Pill>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const StatusExamples: Story = {
+  render() {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-13 font-medium">Task Status</h3>
+          <div className="flex flex-wrap gap-2">
+            <Pill variant={EPillVariant.DEFAULT}>Draft</Pill>
+            <Pill variant={EPillVariant.WARNING}>In Progress</Pill>
+            <Pill variant={EPillVariant.INFO}>In Review</Pill>
+            <Pill variant={EPillVariant.SUCCESS}>Completed</Pill>
+            <Pill variant={EPillVariant.ERROR}>Blocked</Pill>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/pill/pill.tsx b/packages/propel/src/pill/pill.tsx
new file mode 100644
index 0000000..52275cd
--- /dev/null
+++ b/packages/propel/src/pill/pill.tsx
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+
+export enum EPillVariant {
+  DEFAULT = "default",
+  PRIMARY = "primary",
+  SUCCESS = "success",
+  WARNING = "warning",
+  ERROR = "error",
+  INFO = "info",
+}
+
+export enum EPillSize {
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XS = "xs",
+}
+
+export enum ERadius {
+  SQUARE = "square",
+  CIRCLE = "circle",
+}
+
+export type TRadius = ERadius.SQUARE | ERadius.CIRCLE;
+
+export type TPillVariant =
+  | EPillVariant.DEFAULT
+  | EPillVariant.PRIMARY
+  | EPillVariant.SUCCESS
+  | EPillVariant.WARNING
+  | EPillVariant.ERROR
+  | EPillVariant.INFO;
+export type TPillSize = EPillSize.SM | EPillSize.MD | EPillSize.LG | EPillSize.XS;
+
+export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: TPillVariant;
+  size?: TPillSize;
+  className?: string;
+  children: React.ReactNode;
+  radius?: TRadius;
+}
+
+const pillVariants = {
+  [EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1",
+  [EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20",
+  [EPillVariant.SUCCESS]: "bg-green-50 text-success-primary border border-success-subtle",
+  [EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
+  [EPillVariant.ERROR]: "bg-red-50 text-danger-primary border border-danger-subtle",
+  [EPillVariant.INFO]: "bg-blue-50 text-blue-700 border border-blue-200",
+};
+
+const pillSizes = {
+  [EPillSize.XS]: "px-1.5 py-0.5 text-11",
+  [EPillSize.SM]: "px-2 py-0.5 text-11",
+  [EPillSize.MD]: "px-2.5 py-1 text-13",
+  [EPillSize.LG]: "px-3 py-1.5 text-14",
+};
+
+const pillRadius = {
+  [ERadius.SQUARE]: "rounded",
+  [ERadius.CIRCLE]: "rounded-full",
+};
+
+const Pill = React.forwardRef(function Pill(
+  {
+    variant = EPillVariant.DEFAULT,
+    size = EPillSize.MD,
+    radius = ERadius.CIRCLE,
+    className,
+    children,
+    ...props
+  }: PillProps,
+  ref: React.ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      ref={ref}
+      className={cn(
+        // Base styles
+        "inline-flex items-center justify-center rounded-full font-medium whitespace-nowrap",
+        // Variant styles
+        pillVariants[variant],
+        // Size styles
+        pillSizes[size],
+        // Radius styles
+        pillRadius[radius],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+});
+
+Pill.displayName = "Pill";
+
+export { Pill };
diff --git a/packages/propel/src/popover/index.ts b/packages/propel/src/popover/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/popover/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/popover/popover.stories.tsx b/packages/propel/src/popover/popover.stories.tsx
new file mode 100644
index 0000000..8f184d4
--- /dev/null
+++ b/packages/propel/src/popover/popover.stories.tsx
@@ -0,0 +1,320 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useArgs } from "storybook/preview-api";
+import { CloseOutline } from "@makeplane/propel/icons";
+import { Popover } from "./root";
+
+// cannot use satisfies here because base-ui does not have portable types.
+const meta: Meta<typeof Popover> = {
+  title: "Components/Popover",
+  component: Popover,
+  subcomponents: {
+    PopoverButton: Popover.Button,
+    PopoverPanel: Popover.Panel,
+  },
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    children: null,
+    open: undefined,
+    onOpenChange: () => {},
+  },
+  render(args) {
+    const [{ open }, updateArgs] = useArgs();
+    const setOpen = (value: boolean | undefined) => updateArgs({ open: value });
+
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Open Popover
+        </Popover.Button>
+        <Popover.Panel className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Popover Title</h3>
+          <p className="text-gray-600 mt-2 text-13">This is the popover content. You can put any content here.</p>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: null,
+  },
+};
+
+export const Controlled: Story = {
+  render() {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <button onClick={() => setOpen(true)} className="bg-blue-500 rounded-sm px-3 py-1.5 text-13 text-on-color">
+            Open
+          </button>
+          <button onClick={() => setOpen(false)} className="bg-gray-500 rounded-sm px-3 py-1.5 text-13 text-on-color">
+            Close
+          </button>
+        </div>
+        <Popover open={open} onOpenChange={setOpen}>
+          <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+            Controlled Popover
+          </Popover.Button>
+          <Popover.Panel className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+            <div className="flex items-start justify-between">
+              <h3 className="text-13 font-semibold">Controlled State</h3>
+              <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
+                <CloseOutline className="h-4 w-4" />
+              </button>
+            </div>
+            <p className="text-gray-600 mt-2 text-13">Current state: {open ? "Open" : "Closed"}</p>
+          </Popover.Panel>
+        </Popover>
+      </div>
+    );
+  },
+};
+
+export const SideTop: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Open Above
+        </Popover.Button>
+        <Popover.Panel side="top" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Top Positioned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover appears above the button.</p>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const SideBottom: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Open Below
+        </Popover.Button>
+        <Popover.Panel side="bottom" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Bottom Positioned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover appears below the button.</p>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const SideLeft: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Open Left
+        </Popover.Button>
+        <Popover.Panel side="left" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Left Positioned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover appears to the left of the button.</p>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const SideRight: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Open Right
+        </Popover.Button>
+        <Popover.Panel side="right" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Right Positioned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover appears to the right of the button.</p>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const AlignStart: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Align Start
+        </Popover.Button>
+        <Popover.Panel align="start" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Start Aligned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover is aligned to the start.</p>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const AlignEnd: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Align End
+        </Popover.Button>
+        <Popover.Panel align="end" className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">End Aligned</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover is aligned to the end.</p>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const CustomOffset: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Custom Offset
+        </Popover.Button>
+        <Popover.Panel sideOffset={20} className="border-gray-200 shadow-lg w-64 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Custom Side Offset</h3>
+          <p className="text-gray-600 mt-2 text-13">This popover has a custom side offset of 20px.</p>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const WithForm: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open ?? false);
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      alert("Form submitted!");
+      setOpen(false);
+    };
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Open Form
+        </Popover.Button>
+        <Popover.Panel className="border-gray-200 shadow-lg w-72 rounded-lg border bg-white p-4">
+          <h3 className="text-13 font-semibold">Quick Form</h3>
+          <form onSubmit={handleSubmit} className="mt-3 space-y-3">
+            <div>
+              <label htmlFor="name" className="text-gray-700 block text-11 font-medium">
+                Name
+              </label>
+              <input
+                type="text"
+                id="name"
+                className="border-gray-300 mt-1 w-full rounded-sm border px-2 py-1.5 text-13"
+                placeholder="Enter name"
+              />
+            </div>
+            <div>
+              <label htmlFor="email" className="text-gray-700 block text-11 font-medium">
+                Email
+              </label>
+              <input
+                type="email"
+                id="email"
+                className="border-gray-300 mt-1 w-full rounded-sm border px-2 py-1.5 text-13"
+                placeholder="Enter email"
+              />
+            </div>
+            <div className="flex justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="bg-gray-200 hover:bg-gray-300 rounded-sm px-3 py-1.5 text-11"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="bg-blue-500 hover:bg-blue-600 rounded-sm px-3 py-1.5 text-11 text-on-color"
+              >
+                Submit
+              </button>
+            </div>
+          </form>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const WithList: Story = {
+  render(args) {
+    const [open, setOpen] = useState(args.open);
+    return (
+      <Popover {...args} open={open} onOpenChange={setOpen}>
+        <Popover.Button className="bg-blue-500 hover:bg-blue-600 rounded-sm px-4 py-2 text-on-color">
+          Show Options
+        </Popover.Button>
+        <Popover.Panel className="border-gray-200 shadow-lg w-56 rounded-lg border bg-white">
+          <div className="p-2">
+            <h3 className="text-gray-500 px-2 py-1.5 text-11 font-semibold">Options</h3>
+            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 1</button>
+            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 2</button>
+            <button className="hover:bg-gray-100 w-full rounded-sm px-2 py-1.5 text-left text-13">Option 3</button>
+          </div>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
+
+export const ColorPicker: Story = {
+  render() {
+    const [selectedColor, setSelectedColor] = useState("#3b82f6");
+    const colors = ["#ef4444", "#f59e0b", "#10b981", "#3b82f6", "#8b5cf6", "#ec4899", "#6b7280", "#000000", "#ffffff"];
+
+    return (
+      <Popover>
+        <Popover.Button className="border-gray-300 hover:bg-gray-50 flex items-center gap-2 rounded-sm border bg-white px-4 py-2">
+          <div className="h-4 w-4 rounded-sm" style={{ backgroundColor: selectedColor }} />
+          <span className="text-13">Pick Color</span>
+        </Popover.Button>
+        <Popover.Panel className="border-gray-200 shadow-lg w-48 rounded-lg border bg-white p-3">
+          <h3 className="mb-2 text-11 font-semibold">Select Color</h3>
+          <div className="grid grid-cols-5 gap-2">
+            {colors.map((color) => (
+              <button
+                key={color}
+                onClick={() => setSelectedColor(color)}
+                className="h-8 w-8 rounded-sm border-2 transition-transform hover:scale-110"
+                style={{
+                  backgroundColor: color,
+                  borderColor: selectedColor === color ? "#000" : "transparent",
+                }}
+              />
+            ))}
+          </div>
+        </Popover.Panel>
+      </Popover>
+    );
+  },
+};
diff --git a/packages/propel/src/popover/root.tsx b/packages/propel/src/popover/root.tsx
new file mode 100644
index 0000000..444a636
--- /dev/null
+++ b/packages/propel/src/popover/root.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { memo, useMemo } from "react";
+import { Popover as BasePopover } from "@base-ui-components/react/popover";
+import type { TPlacement, TSide, TAlign } from "../utils/placement";
+import { convertPlacementToSideAndAlign } from "../utils/placement";
+
+export interface PopoverContentProps extends React.ComponentProps<typeof BasePopover.Popup> {
+  placement?: TPlacement;
+  align?: TAlign;
+  sideOffset?: BasePopover.Positioner.Props["sideOffset"];
+  side?: TSide;
+  containerRef?: React.RefObject<HTMLElement | null>;
+  positionerClassName?: string;
+}
+
+// PopoverContent component
+const PopoverContent = memo(function PopoverContent({
+  children,
+  className,
+  placement,
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  containerRef,
+  positionerClassName,
+  ...props
+}: PopoverContentProps) {
+  // side and align calculations
+  const { finalSide, finalAlign } = useMemo(() => {
+    if (placement) {
+      const converted = convertPlacementToSideAndAlign(placement);
+      return { finalSide: converted.side, finalAlign: converted.align };
+    }
+    return { finalSide: side, finalAlign: align };
+  }, [placement, side, align]);
+
+  return (
+    <PopoverPortal container={containerRef?.current}>
+      <PopoverPositioner side={finalSide} sideOffset={sideOffset} align={finalAlign} className={positionerClassName}>
+        <BasePopover.Popup data-slot="popover-content" className={className} {...props}>
+          {children}
+        </BasePopover.Popup>
+      </PopoverPositioner>
+    </PopoverPortal>
+  );
+});
+
+// wrapper components
+const PopoverTrigger = memo(function PopoverTrigger(props: React.ComponentProps<typeof BasePopover.Trigger>) {
+  return <BasePopover.Trigger data-slot="popover-trigger" {...props} />;
+});
+
+const PopoverPortal = memo(function PopoverPortal(props: React.ComponentProps<typeof BasePopover.Portal>) {
+  return <BasePopover.Portal data-slot="popover-portal" {...props} />;
+});
+
+const PopoverPositioner = memo(function PopoverPositioner(props: React.ComponentProps<typeof BasePopover.Positioner>) {
+  return <BasePopover.Positioner data-slot="popover-positioner" {...props} />;
+});
+
+// compound components
+const Popover = Object.assign(
+  memo(function Popover(props: React.ComponentProps<typeof BasePopover.Root>) {
+    return <BasePopover.Root data-slot="popover" {...props} />;
+  }),
+  {
+    Button: PopoverTrigger,
+    Panel: PopoverContent,
+  }
+);
+
+// display names
+PopoverContent.displayName = "PopoverContent";
+Popover.displayName = "Popover";
+PopoverPortal.displayName = "PopoverPortal";
+PopoverTrigger.displayName = "PopoverTrigger";
+PopoverPositioner.displayName = "PopoverPositioner";
+
+export { Popover };
diff --git a/packages/propel/src/portal/constants.ts b/packages/propel/src/portal/constants.ts
new file mode 100644
index 0000000..8851089
--- /dev/null
+++ b/packages/propel/src/portal/constants.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EPortalWidth {
+  QUARTER = "quarter",
+  HALF = "half",
+  THREE_QUARTER = "three-quarter",
+  FULL = "full",
+}
+
+export enum EPortalPosition {
+  LEFT = "left",
+  RIGHT = "right",
+  CENTER = "center",
+}
+
+export const PORTAL_WIDTH_CLASSES = {
+  [EPortalWidth.QUARTER]: "w-1/4 min-w-80 max-w-96",
+  [EPortalWidth.HALF]: "w-1/2 min-w-96 max-w-2xl",
+  [EPortalWidth.THREE_QUARTER]: "w-3/4 min-w-96 max-w-5xl",
+  [EPortalWidth.FULL]: "w-full",
+} as const;
+
+export const PORTAL_POSITION_CLASSES = {
+  [EPortalPosition.LEFT]: "left-0",
+  [EPortalPosition.RIGHT]: "right-0",
+  [EPortalPosition.CENTER]: "left-1/2 -translate-x-1/2",
+} as const;
+
+export const DEFAULT_PORTAL_ID = "full-screen-portal";
+export const MODAL_Z_INDEX = 25;
diff --git a/packages/propel/src/portal/index.ts b/packages/propel/src/portal/index.ts
new file mode 100644
index 0000000..9b0da01
--- /dev/null
+++ b/packages/propel/src/portal/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./modal-portal";
+export * from "./portal-wrapper";
+export * from "./constants";
+export * from "./types";
diff --git a/packages/propel/src/portal/modal-portal.tsx b/packages/propel/src/portal/modal-portal.tsx
new file mode 100644
index 0000000..655d687
--- /dev/null
+++ b/packages/propel/src/portal/modal-portal.tsx
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useCallback, useMemo, useRef, useEffect } from "react";
+import { cn } from "../utils";
+import {
+  EPortalWidth,
+  EPortalPosition,
+  PORTAL_WIDTH_CLASSES,
+  PORTAL_POSITION_CLASSES,
+  DEFAULT_PORTAL_ID,
+  MODAL_Z_INDEX,
+} from "./constants";
+import { PortalWrapper } from "./portal-wrapper";
+import type { ModalPortalProps } from "./types";
+
+/**
+ * @param children - The modal content to render
+ * @param isOpen - Whether the modal is open
+ * @param onClose - Function to call when modal should close
+ * @param portalId - The ID of the DOM element to render into
+ * @param className - Custom className for the modal container
+ * @param overlayClassName - Custom className for the overlay
+ * @param contentClassName - Custom className for the content area
+ * @param width - Predefined width options using EPortalWidth enum
+ * @param position - Position of the modal using EPortalPosition enum
+ * @param fullScreen - Whether to render in fullscreen mode
+ * @param showOverlay - Whether to show background overlay
+ * @param closeOnOverlayClick - Whether clicking overlay closes modal
+ * @param closeOnEscape - Whether pressing Escape closes modal
+ */
+export function ModalPortal({
+  children,
+  isOpen,
+  onClose,
+  portalId = DEFAULT_PORTAL_ID,
+  className,
+  overlayClassName,
+  contentClassName,
+  width = EPortalWidth.HALF,
+  position = EPortalPosition.RIGHT,
+  fullScreen = false,
+  showOverlay = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+}: ModalPortalProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Memoized overlay click handler
+  const handleOverlayClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (closeOnOverlayClick && onClose && e.target === e.currentTarget) {
+        onClose();
+      }
+    },
+    [closeOnOverlayClick, onClose]
+  );
+
+  // close on escape
+  const handleEscape = useCallback(
+    (e: KeyboardEvent) => {
+      if (closeOnEscape && onClose && e.key === "Escape") {
+        onClose();
+      }
+    },
+    [closeOnEscape, onClose]
+  );
+
+  // add event listener for escape
+  useEffect(() => {
+    if (!isOpen) return;
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, handleEscape]);
+
+  // Memoized style classes
+  const modalClasses = useMemo(() => {
+    const widthClass = fullScreen ? "w-full h-full" : PORTAL_WIDTH_CLASSES[width];
+    const positionClass = fullScreen ? "" : PORTAL_POSITION_CLASSES[position];
+
+    return cn(
+      "shadow-lg absolute top-0 h-full bg-white transition-transform duration-300 ease-out",
+      widthClass,
+      positionClass,
+      contentClassName
+    );
+  }, [fullScreen, width, position, contentClassName]);
+
+  if (!isOpen) return null;
+
+  const content = (
+    <div
+      className={cn("absolute inset-0 h-full w-full overflow-y-auto", className)}
+      style={{ zIndex: MODAL_Z_INDEX }}
+      role="dialog"
+    >
+      {showOverlay && (
+        <div
+          className={cn("absolute inset-0 bg-black/50 transition-colors duration-300", overlayClassName)}
+          onClick={handleOverlayClick}
+          aria-hidden="true"
+        />
+      )}
+      <div ref={contentRef} className={cn(modalClasses)} style={{ zIndex: MODAL_Z_INDEX + 1 }} role="document">
+        {children}
+      </div>
+    </div>
+  );
+
+  return <PortalWrapper portalId={portalId}>{content}</PortalWrapper>;
+}
diff --git a/packages/propel/src/portal/portal-wrapper.tsx b/packages/propel/src/portal/portal-wrapper.tsx
new file mode 100644
index 0000000..e65481c
--- /dev/null
+++ b/packages/propel/src/portal/portal-wrapper.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useLayoutEffect, useState, useMemo } from "react";
+import { createPortal } from "react-dom";
+import { DEFAULT_PORTAL_ID } from "./constants";
+import type { PortalWrapperProps } from "./types";
+
+/**
+ * PortalWrapper - A reusable portal component that renders children into a specific DOM element
+ * Optimized for SSR compatibility and performance
+ *
+ * @param children - The content to render inside the portal
+ * @param portalId - The ID of the DOM element to render into
+ * @param fallbackToDocument - Whether to render directly if portal container is not found
+ * @param className - Optional className to apply to the portal container div
+ * @param onMount - Callback fired when portal is mounted
+ * @param onUnmount - Callback fired when portal is unmounted
+ */
+export function PortalWrapper({
+  children,
+  portalId = DEFAULT_PORTAL_ID,
+  fallbackToDocument = true,
+  className,
+  onMount,
+  onUnmount,
+}: PortalWrapperProps) {
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useLayoutEffect(() => {
+    // Ensure we're in browser environment
+    if (typeof window === "undefined") return;
+
+    let container = document.getElementById(portalId);
+
+    // Create portal container if it doesn't exist
+    if (!container) {
+      container = document.createElement("div");
+      container.id = portalId;
+      container.setAttribute("data-portal", "true");
+      document.body.appendChild(container);
+    }
+
+    setPortalContainer(container);
+    setIsMounted(true);
+    onMount?.();
+
+    return () => {
+      onUnmount?.();
+      // Only remove if we created it and it's empty
+      if (container && container.children.length === 0 && container.hasAttribute("data-portal")) {
+        document.body.removeChild(container);
+      }
+    };
+  }, [portalId, onMount, onUnmount]);
+
+  const content = useMemo(() => {
+    if (!children) return null;
+    return className ? <div className={className}>{children}</div> : children;
+  }, [children, className]);
+
+  // SSR: render nothing on server
+  if (!isMounted) {
+    return null;
+  }
+
+  // If portal container exists, render into it
+  if (portalContainer) {
+    return createPortal(content, portalContainer);
+  }
+
+  // Fallback behavior for client-side rendering
+  if (fallbackToDocument) {
+    return content ? (content as React.ReactElement) : null;
+  }
+
+  return null;
+}
diff --git a/packages/propel/src/portal/portal.stories.tsx b/packages/propel/src/portal/portal.stories.tsx
new file mode 100644
index 0000000..0c47b57
--- /dev/null
+++ b/packages/propel/src/portal/portal.stories.tsx
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../button/button";
+import type { TButtonVariant } from "../button/helper";
+import { EPortalWidth, EPortalPosition } from "./constants";
+import { ModalPortal, PortalWrapper } from "./";
+
+const meta = {
+  title: "Components/Portal/ModalPortal",
+  component: ModalPortal,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+A high-performance, accessible modal portal component with comprehensive features:
+Perfect for modals, drawers, overlays, and any UI that needs to appear above other content.
+        `,
+      },
+    },
+  },
+  tags: ["autodocs"],
+  args: {
+    isOpen: false,
+    children: null,
+  },
+  render(args) {
+    return (
+      <ModalDemo {...args} buttonText="Open Modal">
+        <ModalContent
+          title="Default Modal"
+          description="A standard modal with all default settings. Demonstrates focus management, keyboard navigation, and accessibility features."
+        />
+      </ModalDemo>
+    );
+  },
+} satisfies Meta<typeof ModalPortal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Helper component for interactive stories
+function ModalDemo({
+  children,
+  buttonText = "Open Modal",
+  buttonVariant = "primary",
+  ...modalProps
+}: Omit<Parameters<typeof ModalPortal>[0], "isOpen" | "onClose"> & {
+  buttonText?: string;
+  buttonVariant?: TButtonVariant;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Button variant={buttonVariant} onClick={() => setIsOpen(true)}>
+        {buttonText}
+      </Button>
+      <ModalPortal {...modalProps} isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        {children}
+      </ModalPortal>
+    </>
+  );
+}
+
+function ModalContent({
+  title = "Modal Title",
+  showCloseButton = true,
+  description = "This is a modal portal component with full accessibility support. Try pressing Tab to navigate through elements or Escape to close.",
+  onClose,
+}: {
+  title?: string;
+  showCloseButton?: boolean;
+  description?: string;
+  onClose?: () => void;
+}) {
+  return (
+    <div className="flex h-full flex-col bg-white">
+      <div className="border-gray-200 flex items-center justify-between border-b p-6">
+        <div>
+          <h2 className="text-gray-900 text-18 font-semibold">{title}</h2>
+          <p className="text-gray-500 mt-1 text-13">Modal demonstration</p>
+        </div>
+        {showCloseButton && onClose && (
+          <Button variant="ghost" onClick={onClose} aria-label="Close modal">
+            ✕
+          </Button>
+        )}
+      </div>
+      <div className="flex-1 overflow-y-auto p-6">
+        <p className="text-gray-600 mb-6">{description}</p>
+
+        <div className="space-y-4">
+          <div className="bg-gray-50 rounded-lg p-4">
+            <h3 className="text-gray-900 mb-2 font-medium">Feature Highlights</h3>
+            <ul className="text-gray-600 space-y-1 text-13">
+              <li>• ESC key closes the modal</li>
+              <li>• Click outside overlay to close</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const Default: Story = {};
+
+export const Positions: Story = {
+  name: "Different Positions",
+  render() {
+    const [activeModal, setActiveModal] = useState<EPortalPosition | null>(null);
+
+    return (
+      <div className="flex gap-3">
+        {Object.values(EPortalPosition).map((position) => (
+          <React.Fragment key={position}>
+            <Button variant="secondary" onClick={() => setActiveModal(position)}>
+              {position.charAt(0).toUpperCase() + position.slice(1)}
+            </Button>
+            <ModalPortal
+              isOpen={activeModal === position}
+              onClose={() => setActiveModal(null)}
+              width={EPortalWidth.HALF}
+              position={position}
+            >
+              <ModalContent
+                title={`${position.charAt(0).toUpperCase() + position.slice(1)} Modal`}
+                description={`This modal is positioned at ${position}. Try different positions to see how the modal appears in different areas of the screen.`}
+                onClose={() => setActiveModal(null)}
+              />
+            </ModalPortal>
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Widths: Story = {
+  name: "Different Widths",
+  render() {
+    const [activeModal, setActiveModal] = useState<EPortalWidth | null>(null);
+
+    return (
+      <div className="flex gap-3">
+        {Object.values(EPortalWidth).map((width) => (
+          <React.Fragment key={width}>
+            <Button variant="secondary" onClick={() => setActiveModal(width)}>
+              {width.replace("_", " ").replace(/\b\w/g, (l) => l.toUpperCase())}
+            </Button>
+            <ModalPortal
+              isOpen={activeModal === width}
+              onClose={() => setActiveModal(null)}
+              width={width}
+              position={EPortalPosition.RIGHT}
+            >
+              <ModalContent
+                title={`${width.replace("_", " ").replace(/\b\w/g, (l) => l.toUpperCase())} Width`}
+                description={`This modal uses ${width} width. Compare different widths to find the perfect size for your content.`}
+                onClose={() => setActiveModal(null)}
+              />
+            </ModalPortal>
+          </React.Fragment>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const BasicPortal: Story = {
+  render() {
+    return (
+      <div className="relative">
+        <p>This content renders in the normal document flow.</p>
+        <PortalWrapper portalId="storybook-portal">
+          <div className="bg-blue-500 shadow-lg fixed top-4 right-4 z-50 rounded-sm p-4 text-on-color">
+            This content is rendered in a portal!
+          </div>
+        </PortalWrapper>
+      </div>
+    );
+  },
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+The PortalWrapper is a low-level component that handles rendering content into DOM portals.
+It's used internally by ModalPortal but can also be used directly for custom portal needs.`,
+      },
+    },
+  },
+};
diff --git a/packages/propel/src/portal/types.ts b/packages/propel/src/portal/types.ts
new file mode 100644
index 0000000..0236225
--- /dev/null
+++ b/packages/propel/src/portal/types.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode, MouseEvent as ReactMouseEvent } from "react";
+import type { EPortalWidth, EPortalPosition } from "./constants";
+
+export interface BasePortalProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export interface PortalWrapperProps extends BasePortalProps {
+  portalId?: string;
+  fallbackToDocument?: boolean;
+  onMount?: () => void;
+  onUnmount?: () => void;
+}
+
+export interface ModalPortalProps extends BasePortalProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  portalId?: string;
+  overlayClassName?: string;
+  contentClassName?: string;
+  width?: EPortalWidth;
+  position?: EPortalPosition;
+  fullScreen?: boolean;
+  showOverlay?: boolean;
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+}
+
+export type PortalEventHandler = () => void;
+export type PortalKeyboardHandler = (event: KeyboardEvent) => void;
+export type PortalMouseHandler = (event: ReactMouseEvent) => void;
diff --git a/packages/propel/src/scrollarea/index.ts b/packages/propel/src/scrollarea/index.ts
new file mode 100644
index 0000000..3528c51
--- /dev/null
+++ b/packages/propel/src/scrollarea/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./scrollarea";
diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
new file mode 100644
index 0000000..0acab66
--- /dev/null
+++ b/packages/propel/src/scrollarea/scrollarea.stories.tsx
@@ -0,0 +1,304 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ScrollArea } from "./scrollarea";
+
+const meta = {
+  title: "Components/ScrollArea",
+  component: ScrollArea,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A customizable scroll area component with multiple size variants, scroll behaviors, and orientations.",
+      },
+    },
+  },
+  args: {
+    size: "md",
+    scrollType: "always",
+    orientation: "vertical",
+  },
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render(args) {
+    return (
+      <ScrollArea {...args} className="h-64 w-80 rounded-lg border">
+        <div className="space-y-4 p-4">
+          <h3 className="text-16 font-semibold">Long Text Content</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat.
+          </p>
+          <p>
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+          </p>
+          <p>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+          </p>
+          <p>
+            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+            dolores eos qui ratione voluptatem sequi nesciunt.
+          </p>
+        </div>
+      </ScrollArea>
+    );
+  },
+};
+
+export const Sizes: Story = {
+  render() {
+    const content = (
+      <div className="space-y-2 p-4">
+        {[...Array(10)].map((_, i) => (
+          <p key={i}>Line {i + 1}: This is some scrollable content to demonstrate different sizes.</p>
+        ))}
+      </div>
+    );
+
+    return (
+      <div className="flex flex-col gap-6">
+        <div className="space-y-2">
+          <div className="text-13 font-medium">Small</div>
+          <ScrollArea className="h-48 w-80 rounded-lg border" size="sm">
+            {content}
+          </ScrollArea>
+        </div>
+        <div className="space-y-2">
+          <div className="text-13 font-medium">Medium</div>
+          <ScrollArea className="h-48 w-80 rounded-lg border" size="md">
+            {content}
+          </ScrollArea>
+        </div>
+        <div className="space-y-2">
+          <div className="text-13 font-medium">Large</div>
+          <ScrollArea className="h-48 w-80 rounded-lg border" size="lg">
+            {content}
+          </ScrollArea>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const ScrollTypeAlways: Story = {
+  render() {
+    return (
+      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="always">
+        <div className="space-y-2 p-4">
+          <h3 className="text-16 font-semibold">Always Visible Scrollbar</h3>
+          {[...Array(15)].map((_, i) => (
+            <p key={i}>Line {i + 1}: The scrollbar is always visible.</p>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+  },
+};
+
+export const ScrollTypeScroll: Story = {
+  render() {
+    return (
+      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="scroll">
+        <div className="space-y-2 p-4">
+          <h3 className="text-16 font-semibold">Scroll to Show</h3>
+          <p className="text-13 text-placeholder">Scrollbar appears when scrolling</p>
+          {[...Array(15)].map((_, i) => (
+            <p key={i}>Line {i + 1}: Try scrolling to see the scrollbar appear.</p>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+  },
+};
+
+export const ScrollTypeHover: Story = {
+  render() {
+    return (
+      <ScrollArea className="h-64 w-80 rounded-lg border" scrollType="hover">
+        <div className="space-y-2 p-4">
+          <h3 className="text-16 font-semibold">Hover to Show</h3>
+          <p className="text-13 text-placeholder">Scrollbar appears on hover</p>
+          {[...Array(15)].map((_, i) => (
+            <p key={i}>Line {i + 1}: Hover over the area to see the scrollbar.</p>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+  },
+};
+
+export const HorizontalScroll: Story = {
+  render() {
+    return (
+      <ScrollArea className="h-32 w-96 rounded-lg border" orientation="horizontal">
+        <div className="flex w-[1200px] gap-4 p-4">
+          {[...Array(12)].map((_, i) => (
+            <div key={i} className="flex h-20 w-32 flex-shrink-0 items-center justify-center rounded-sm bg-layer-1">
+              Item {i + 1}
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+  },
+};
+
+export const BothDirections: Story = {
+  render() {
+    return (
+      <ScrollArea className="h-64 w-96 rounded-lg border">
+        <div className="w-[800px] space-y-2 p-4">
+          <h3 className="text-16 font-semibold">Both Directions</h3>
+          <p className="text-13 text-placeholder">Content scrolls both vertically and horizontally</p>
+          {[...Array(20)].map((_, i) => (
+            <p key={i}>
+              Line {i + 1}: This line is very long and extends beyond the container width to demonstrate horizontal
+              scrolling along with vertical scrolling.
+            </p>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+  },
+};
+
+export const ListExample: Story = {
+  render() {
+    return (
+      <ScrollArea className="h-80 w-96 rounded-lg border">
+        <div className="p-4">
+          <h3 className="mb-4 text-16 font-semibold">User List</h3>
+          <div className="space-y-2">
+            {[...Array(25)].map((_, i) => (
+              <div
+                key={i}
+                className="flex cursor-pointer items-center gap-3 rounded-sm bg-layer-1 p-3 hover:bg-surface-2"
+              >
+                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent-primary font-medium text-on-color">
+                  {String.fromCharCode(65 + (i % 26))}
+                </div>
+                <div>
+                  <div className="font-medium">User {i + 1}</div>
+                  <div className="text-13 text-placeholder">user{i + 1}@example.com</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </ScrollArea>
+    );
+  },
+};
+
+export const CodeBlock: Story = {
+  render() {
+    const code = `function fibonacci(n) {
+  if (n <= 1) return n;
+
+  let a = 0, b = 1;
+  for (let i = 2; i <= n; i++) {
+    const temp = a + b;
+    a = b;
+    b = temp;
+  }
+
+  return b;
+}
+
+// Example usage
+console.log(fibonacci(10)); // 55
+console.log(fibonacci(20)); // 6765
+
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+console.log(doubled); // [2, 4, 6, 8, 10]
+
+async function fetchData() {
+  try {
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}`;
+
+    return (
+      <ScrollArea className="h-96 w-full max-w-2xl rounded-lg border bg-surface-1">
+        <pre className="p-4 text-13">
+          <code>{code}</code>
+        </pre>
+      </ScrollArea>
+    );
+  },
+};
+
+export const ChatMessages: Story = {
+  render() {
+    return (
+      <ScrollArea className="h-96 w-full max-w-md rounded-lg border">
+        <div className="space-y-4 p-4">
+          {[...Array(20)].map((_, i) => (
+            <div key={i} className={`flex ${i % 3 === 0 ? "justify-end" : "justify-start"}`}>
+              <div
+                className={`max-w-[70%] rounded-lg p-3 ${i % 3 === 0 ? "bg-accent-primary text-on-color" : "bg-layer-1"}`}
+              >
+                <div className="text-13">{i % 3 === 0 ? "You" : `User ${i + 1}`}</div>
+                <div className="mt-1">Message content for message number {i + 1}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    );
+  },
+};
+
+export const DataTable: Story = {
+  render() {
+    return (
+      <ScrollArea className="h-96 w-full max-w-3xl rounded-lg border">
+        <table className="w-full">
+          <thead className="sticky top-0 bg-layer-1">
+            <tr>
+              <th className="px-4 py-2 text-left">ID</th>
+              <th className="px-4 py-2 text-left">Name</th>
+              <th className="px-4 py-2 text-left">Email</th>
+              <th className="px-4 py-2 text-left">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {[...Array(50)].map((_, i) => (
+              <tr key={i} className="border-t border-subtle hover:bg-layer-1">
+                <td className="px-4 py-2">#{i + 1}</td>
+                <td className="px-4 py-2">User {i + 1}</td>
+                <td className="px-4 py-2">user{i + 1}@example.com</td>
+                <td className="px-4 py-2">
+                  <span
+                    className={`rounded-sm px-2 py-1 text-11 ${i % 3 === 0 ? "bg-success-primary text-success-primary" : "bg-gray-500/20 text-gray-500"}`}
+                  >
+                    {i % 3 === 0 ? "Active" : "Inactive"}
+                  </span>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </ScrollArea>
+    );
+  },
+};
diff --git a/packages/propel/src/scrollarea/scrollarea.tsx b/packages/propel/src/scrollarea/scrollarea.tsx
new file mode 100644
index 0000000..4c52e98
--- /dev/null
+++ b/packages/propel/src/scrollarea/scrollarea.tsx
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { ScrollArea as BaseScrollArea } from "@base-ui-components/react/scroll-area";
+
+import { cn } from "../utils/classname";
+
+type ScrollAreaOrientation = "horizontal" | "vertical";
+type ScrollAreaScrollType = "always" | "scroll" | "hover";
+type ScrollAreaSize = "sm" | "md" | "lg";
+
+interface ScrollAreaProps extends React.ComponentProps<typeof BaseScrollArea.Root> {
+  orientation?: ScrollAreaOrientation;
+  scrollType?: ScrollAreaScrollType;
+  size?: ScrollAreaSize;
+  rootClassName?: string;
+  viewportClassName?: string;
+}
+
+function ScrollArea({
+  children,
+  orientation,
+  scrollType,
+  size = "md",
+  rootClassName,
+  viewportClassName,
+  ...props
+}: ScrollAreaProps) {
+  return (
+    <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", rootClassName)} {...props}>
+      <BaseScrollArea.Viewport
+        data-slot="scroll-area-viewport"
+        className={cn(
+          "focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline",
+          viewportClassName
+        )}
+      >
+        {children}
+      </BaseScrollArea.Viewport>
+      <ScrollBar orientation={orientation} scrollType={scrollType} size={size} />
+      <BaseScrollArea.Corner />
+    </BaseScrollArea.Root>
+  );
+}
+
+const horizontalSizeStyles = {
+  sm: "p-[0.112rem] h-2.5",
+  md: "p-[0.112rem] h-3",
+  lg: "p-[0.112rem] h-4",
+} as const;
+
+const verticalSizeStyles = {
+  sm: "p-[0.112rem] w-2.5",
+  md: "p-[0.112rem] w-3",
+  lg: "p-[0.112rem] w-4",
+} as const;
+
+const thumbSizeStyles = {
+  sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:-translate-x-1/2 before:-translate-y-1/2",
+  md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:-translate-x-1/2 before:-translate-y-1/2",
+  lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:-translate-x-1/2 before:-translate-y-1/2",
+} as const;
+
+interface ScrollBarProps extends React.ComponentProps<typeof BaseScrollArea.Scrollbar> {
+  scrollType?: ScrollAreaScrollType;
+  size?: ScrollAreaSize;
+}
+
+const ScrollBar = React.memo(function ScrollBar({
+  className,
+  orientation = "vertical",
+  scrollType = "always",
+  size = "md",
+  ...props
+}: ScrollBarProps) {
+  return (
+    <BaseScrollArea.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "group/track mr-1 flex justify-center rounded-sm bg-transparent opacity-0 transition-opacity delay-300",
+        orientation === "vertical" && verticalSizeStyles[size],
+        orientation === "horizontal" && horizontalSizeStyles[size],
+        scrollType === "always" && "opacity-100",
+        scrollType === "scroll" && "data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75",
+        scrollType === "hover" && "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75",
+        className
+      )}
+      {...props}
+    >
+      <BaseScrollArea.Thumb
+        data-slot="scroll-area-thumb"
+        className={cn(
+          "relative flex-1 rounded-[10px] bg-scrollbar-thumb group-hover/track:bg-scrollbar-thumb-hover group-active/track:bg-scrollbar-thumb-active data-[scrolling]:bg-scrollbar-thumb-active",
+          thumbSizeStyles[size]
+        )}
+      />
+    </BaseScrollArea.Scrollbar>
+  );
+});
+
+export { ScrollArea };
+export type { ScrollAreaProps, ScrollAreaOrientation, ScrollAreaScrollType, ScrollAreaSize };
diff --git a/packages/propel/src/separator/separator.stories.tsx b/packages/propel/src/separator/separator.stories.tsx
new file mode 100644
index 0000000..3b7b8d7
--- /dev/null
+++ b/packages/propel/src/separator/separator.stories.tsx
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Separator } from "./separator";
+
+const meta = {
+  title: "Components/Separator",
+  component: Separator,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    return (
+      <div className="w-[300px] space-y-4">
+        <div>Content Above</div>
+        <Separator />
+        <div>Content Below</div>
+      </div>
+    );
+  },
+};
+
+export const Vertical: Story = {
+  render() {
+    return (
+      <div className="flex h-[100px] items-center space-x-4">
+        <div>Left Content</div>
+        <Separator orientation="vertical" />
+        <div>Right Content</div>
+      </div>
+    );
+  },
+};
+
+export const WithinContainer: Story = {
+  render() {
+    return (
+      <div className="w-[300px] space-y-4 rounded-lg border p-6">
+        <div className="space-y-2">
+          <h4 className="leading-none font-medium">Section 1</h4>
+          <p className="text-muted-foreground text-13">Description for section 1</p>
+        </div>
+        <Separator />
+        <div className="space-y-2">
+          <h4 className="leading-none font-medium">Section 2</h4>
+          <p className="text-muted-foreground text-13">Description for section 2</p>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/separator/separator.tsx b/packages/propel/src/separator/separator.tsx
new file mode 100644
index 0000000..22030e2
--- /dev/null
+++ b/packages/propel/src/separator/separator.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "@base-ui-components/react/separator";
+import { cn } from "../utils";
+
+interface SeparatorProps extends React.ComponentProps<typeof SeparatorPrimitive> {
+  /**
+   * The orientation of the separator
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+}
+
+const Separator = React.forwardRef(function Separator(
+  { orientation = "horizontal", className, ...props }: SeparatorProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof SeparatorPrimitive>>
+) {
+  return (
+    <SeparatorPrimitive
+      ref={ref}
+      orientation={orientation}
+      data-slot="separator"
+      data-orientation={orientation}
+      {...props}
+      className={cn("bg-subtle-1", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
+    />
+  );
+});
+
+Separator.displayName = "Separator";
+
+export { Separator };
+export type { SeparatorProps };
diff --git a/packages/propel/src/skeleton/index.ts b/packages/propel/src/skeleton/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/skeleton/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/skeleton/root.tsx b/packages/propel/src/skeleton/root.tsx
new file mode 100644
index 0000000..1d09e55
--- /dev/null
+++ b/packages/propel/src/skeleton/root.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { cn } from "../utils/classname";
+
+type SkeletonProps = {
+  children: React.ReactNode;
+  className?: string;
+  ariaLabel?: string;
+};
+
+function SkeletonRoot({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) {
+  return (
+    <div data-slot="skeleton" className={cn("animate-pulse", className)} role="status" aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
+}
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+  className?: string;
+};
+
+function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemProps) {
+  return <div data-slot="skeleton-item" className={cn("rounded-md bg-layer-1", className)} style={{ height, width }} />;
+}
+
+const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
+
+SkeletonRoot.displayName = "plane-ui-skeleton";
+SkeletonItem.displayName = "plane-ui-skeleton-item";
+
+export { Skeleton, SkeletonRoot, SkeletonItem };
diff --git a/packages/propel/src/skeleton/skeleton.stories.tsx b/packages/propel/src/skeleton/skeleton.stories.tsx
new file mode 100644
index 0000000..7a5be98
--- /dev/null
+++ b/packages/propel/src/skeleton/skeleton.stories.tsx
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Skeleton } from "./index";
+
+const meta = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    children: null,
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    return (
+      <Skeleton className="flex w-80 flex-col gap-2">
+        <Skeleton.Item height="40px" width="100%" />
+      </Skeleton>
+    );
+  },
+};
+
+export const Card: Story = {
+  render() {
+    return (
+      <Skeleton className="flex w-80 flex-col gap-4">
+        <Skeleton.Item height="200px" width="100%" />
+        <div className="flex flex-col gap-2">
+          <Skeleton.Item height="20px" width="60%" />
+          <Skeleton.Item height="16px" width="40%" />
+        </div>
+      </Skeleton>
+    );
+  },
+};
+
+export const List: Story = {
+  render() {
+    return (
+      <Skeleton className="flex w-96 flex-col gap-3">
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="flex gap-3">
+            <Skeleton.Item height="40px" width="40px" className="rounded-full" />
+            <div className="flex flex-1 flex-col gap-2">
+              <Skeleton.Item height="16px" width="70%" />
+              <Skeleton.Item height="12px" width="50%" />
+            </div>
+          </div>
+        ))}
+      </Skeleton>
+    );
+  },
+};
+
+export const Table: Story = {
+  render() {
+    return (
+      <Skeleton className="flex w-full flex-col gap-3">
+        <div className="flex gap-4">
+          <Skeleton.Item height="20px" width="150px" />
+          <Skeleton.Item height="20px" width="200px" />
+          <Skeleton.Item height="20px" width="120px" />
+        </div>
+        {[...Array(5)].map((_, i) => (
+          <div key={i} className="flex gap-4">
+            <Skeleton.Item height="40px" width="150px" />
+            <Skeleton.Item height="40px" width="200px" />
+            <Skeleton.Item height="40px" width="120px" />
+          </div>
+        ))}
+      </Skeleton>
+    );
+  },
+};
+
+export const Profile: Story = {
+  render() {
+    return (
+      <Skeleton className="flex w-80 flex-col gap-4">
+        <div className="flex items-center gap-4">
+          <Skeleton.Item height="80px" width="80px" className="rounded-full" />
+          <div className="flex flex-1 flex-col gap-2">
+            <Skeleton.Item height="20px" width="60%" />
+            <Skeleton.Item height="16px" width="40%" />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton.Item height="16px" width="100%" />
+          <Skeleton.Item height="16px" width="90%" />
+          <Skeleton.Item height="16px" width="70%" />
+        </div>
+      </Skeleton>
+    );
+  },
+};
+
+export const Avatar: Story = {
+  render() {
+    return (
+      <Skeleton className="flex gap-2">
+        <Skeleton.Item height="40px" width="40px" className="rounded-full" />
+      </Skeleton>
+    );
+  },
+};
+
+export const AvatarGroup: Story = {
+  render() {
+    return (
+      <Skeleton className="flex -space-x-2">
+        {[...Array(4)].map((_, i) => (
+          <Skeleton.Item key={i} height="40px" width="40px" className="rounded-full border-2 border-white" />
+        ))}
+      </Skeleton>
+    );
+  },
+};
+
+export const Text: Story = {
+  render() {
+    return (
+      <Skeleton className="flex w-96 flex-col gap-2">
+        <Skeleton.Item height="16px" width="100%" />
+        <Skeleton.Item height="16px" width="95%" />
+        <Skeleton.Item height="16px" width="90%" />
+        <Skeleton.Item height="16px" width="60%" />
+      </Skeleton>
+    );
+  },
+};
+
+export const Button: Story = {
+  render() {
+    return (
+      <Skeleton className="inline-flex">
+        <Skeleton.Item height="40px" width="120px" className="rounded-md" />
+      </Skeleton>
+    );
+  },
+};
+
+export const Input: Story = {
+  render() {
+    return (
+      <Skeleton className="flex w-80 flex-col gap-2">
+        <Skeleton.Item height="14px" width="80px" />
+        <Skeleton.Item height="40px" width="100%" className="rounded-md" />
+      </Skeleton>
+    );
+  },
+};
+
+export const Form: Story = {
+  render() {
+    return (
+      <Skeleton className="flex w-96 flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Skeleton.Item height="14px" width="80px" />
+          <Skeleton.Item height="40px" width="100%" className="rounded-md" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton.Item height="14px" width="100px" />
+          <Skeleton.Item height="40px" width="100%" className="rounded-md" />
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton.Item height="14px" width="60px" />
+          <Skeleton.Item height="80px" width="100%" className="rounded-md" />
+        </div>
+        <Skeleton.Item height="40px" width="120px" className="rounded-md" />
+      </Skeleton>
+    );
+  },
+};
+
+export const ProductCard: Story = {
+  render() {
+    return (
+      <Skeleton className="flex w-72 flex-col gap-3 rounded-lg border p-4">
+        <Skeleton.Item height="200px" width="100%" className="rounded-md" />
+        <div className="flex flex-col gap-2">
+          <Skeleton.Item height="20px" width="80%" />
+          <Skeleton.Item height="16px" width="60%" />
+          <Skeleton.Item height="24px" width="40%" />
+        </div>
+        <Skeleton.Item height="40px" width="100%" className="rounded-md" />
+      </Skeleton>
+    );
+  },
+};
diff --git a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
new file mode 100644
index 0000000..2ca8b3a
--- /dev/null
+++ b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CircularBarSpinner } from "./circular-bar-spinner";
+
+const meta = {
+  title: "Components/CircularBarSpinner",
+  component: CircularBarSpinner,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    height: "16px",
+    width: "16px",
+  },
+} satisfies Meta<typeof CircularBarSpinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Small: Story = {
+  args: {
+    height: "12px",
+    width: "12px",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    height: "24px",
+    width: "24px",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    height: "32px",
+    width: "32px",
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    height: "48px",
+    width: "48px",
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    className: "text-success-primary",
+  },
+};
+
+export const AllSizes: Story = {
+  render() {
+    return (
+      <div className="flex items-center gap-6">
+        <div className="text-center">
+          <CircularBarSpinner height="12px" width="12px" />
+          <p className="text-gray-600 mt-2 text-11">Small</p>
+        </div>
+        <div className="text-center">
+          <CircularBarSpinner height="16px" width="16px" />
+          <p className="text-gray-600 mt-2 text-11">Default</p>
+        </div>
+        <div className="text-center">
+          <CircularBarSpinner height="24px" width="24px" />
+          <p className="text-gray-600 mt-2 text-11">Medium</p>
+        </div>
+        <div className="text-center">
+          <CircularBarSpinner height="32px" width="32px" />
+          <p className="text-gray-600 mt-2 text-11">Large</p>
+        </div>
+        <div className="text-center">
+          <CircularBarSpinner height="48px" width="48px" />
+          <p className="text-gray-600 mt-2 text-11">XL</p>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const ColorVariations: Story = {
+  render() {
+    return (
+      <div className="flex items-center gap-6">
+        <div className="text-center">
+          <CircularBarSpinner className="text-blue-500" height="24px" width="24px" />
+          <p className="text-gray-600 mt-2 text-11">Blue</p>
+        </div>
+        <div className="text-center">
+          <CircularBarSpinner className="text-success-primary" height="24px" width="24px" />
+          <p className="text-gray-600 mt-2 text-11">Green</p>
+        </div>
+        <div className="text-center">
+          <CircularBarSpinner className="text-danger-primary" height="24px" width="24px" />
+          <p className="text-gray-600 mt-2 text-11">Red</p>
+        </div>
+        <div className="text-center">
+          <CircularBarSpinner className="text-purple-500" height="24px" width="24px" />
+          <p className="text-gray-600 mt-2 text-11">Purple</p>
+        </div>
+        <div className="text-center">
+          <CircularBarSpinner className="text-orange-500" height="24px" width="24px" />
+          <p className="text-gray-600 mt-2 text-11">Orange</p>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const InButton: Story = {
+  render() {
+    return (
+      <button className="bg-green-500 flex items-center gap-2 rounded-sm px-4 py-2 text-on-color">
+        <CircularBarSpinner height="16px" width="16px" />
+        <span>Processing...</span>
+      </button>
+    );
+  },
+};
+
+export const CenteredInCard: Story = {
+  render() {
+    return (
+      <div className="border-gray-200 shadow-md w-96 rounded-lg border bg-white p-8">
+        <div className="flex flex-col items-center justify-center space-y-4">
+          <CircularBarSpinner height="48px" width="48px" />
+          <p className="text-gray-600 text-13">Processing data...</p>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/spinners/circular-bar-spinner.tsx b/packages/propel/src/spinners/circular-bar-spinner.tsx
new file mode 100644
index 0000000..60f57b9
--- /dev/null
+++ b/packages/propel/src/spinners/circular-bar-spinner.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+export interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
+  height?: string;
+  width?: string;
+  className?: string | undefined;
+}
+
+export function CircularBarSpinner({ height = "16px", width = "16px", className = "" }: ICircularBarSpinner) {
+  return (
+    <div role="status">
+      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" className={className}>
+        <g>
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.14} />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.29} transform="rotate(30 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.43} transform="rotate(60 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.57} transform="rotate(90 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.71} transform="rotate(120 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.86} transform="rotate(150 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" transform="rotate(180 12 12)" />
+          <animateTransform
+            attributeName="transform"
+            calcMode="discrete"
+            dur="0.75s"
+            repeatCount="indefinite"
+            type="rotate"
+            values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
diff --git a/packages/propel/src/spinners/circular-spinner.stories.tsx b/packages/propel/src/spinners/circular-spinner.stories.tsx
new file mode 100644
index 0000000..c9bcfb2
--- /dev/null
+++ b/packages/propel/src/spinners/circular-spinner.stories.tsx
@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Spinner } from "./circular-spinner";
+
+const meta = {
+  title: "Components/Spinner",
+  component: Spinner,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    height: "32px",
+    width: "32px",
+  },
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Small: Story = {
+  args: {
+    height: "16px",
+    width: "16px",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    height: "24px",
+    width: "24px",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    height: "48px",
+    width: "48px",
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    height: "64px",
+    width: "64px",
+  },
+};
+
+export const CustomColor: Story = {
+  args: {
+    className: "text-blue-500",
+  },
+};
+
+export const AllSizes: Story = {
+  render() {
+    return (
+      <div className="flex items-center gap-6">
+        <div className="text-center">
+          <Spinner height="16px" width="16px" />
+          <p className="text-gray-600 mt-2 text-11">Small</p>
+        </div>
+        <div className="text-center">
+          <Spinner height="24px" width="24px" />
+          <p className="text-gray-600 mt-2 text-11">Medium</p>
+        </div>
+        <div className="text-center">
+          <Spinner height="32px" width="32px" />
+          <p className="text-gray-600 mt-2 text-11">Default</p>
+        </div>
+        <div className="text-center">
+          <Spinner height="48px" width="48px" />
+          <p className="text-gray-600 mt-2 text-11">Large</p>
+        </div>
+        <div className="text-center">
+          <Spinner height="64px" width="64px" />
+          <p className="text-gray-600 mt-2 text-11">XL</p>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const ColorVariations: Story = {
+  render() {
+    return (
+      <div className="flex items-center gap-6">
+        <div className="text-center">
+          <Spinner className="text-blue-500" />
+          <p className="text-gray-600 mt-2 text-11">Blue</p>
+        </div>
+        <div className="text-center">
+          <Spinner className="text-success-primary" />
+          <p className="text-gray-600 mt-2 text-11">Green</p>
+        </div>
+        <div className="text-center">
+          <Spinner className="text-danger-primary" />
+          <p className="text-gray-600 mt-2 text-11">Red</p>
+        </div>
+        <div className="text-center">
+          <Spinner className="text-purple-500" />
+          <p className="text-gray-600 mt-2 text-11">Purple</p>
+        </div>
+        <div className="text-center">
+          <Spinner className="text-orange-500" />
+          <p className="text-gray-600 mt-2 text-11">Orange</p>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const InButton: Story = {
+  render() {
+    return (
+      <button className="bg-blue-500 flex items-center gap-2 rounded-sm px-4 py-2 text-on-color">
+        <Spinner height="16px" width="16px" />
+        <span>Loading...</span>
+      </button>
+    );
+  },
+};
+
+export const CenteredInCard: Story = {
+  render() {
+    return (
+      <div className="border-gray-200 shadow-md w-96 rounded-lg border bg-white p-8">
+        <div className="flex flex-col items-center justify-center space-y-4">
+          <Spinner height="48px" width="48px" />
+          <p className="text-gray-600 text-13">Loading content...</p>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/spinners/circular-spinner.tsx b/packages/propel/src/spinners/circular-spinner.tsx
new file mode 100644
index 0000000..e64f8c0
--- /dev/null
+++ b/packages/propel/src/spinners/circular-spinner.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+// helpers
+import clsx from "clsx";
+
+export interface ISpinner extends React.SVGAttributes<SVGElement> {
+  height?: string;
+  width?: string;
+  className?: string | undefined;
+}
+
+export function Spinner({ height = "32px", width = "32px", className = "" }: ISpinner) {
+  return (
+    <div role="status">
+      <svg
+        aria-hidden="true"
+        height={height}
+        width={width}
+        className={clsx("animate-spin text-secondary", className)}
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          className="fill-accent-primary"
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        />
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}
diff --git a/packages/propel/src/spinners/index.ts b/packages/propel/src/spinners/index.ts
new file mode 100644
index 0000000..45fa139
--- /dev/null
+++ b/packages/propel/src/spinners/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./circular-spinner";
+export * from "./circular-bar-spinner";
diff --git a/packages/propel/src/styles/react-day-picker.css b/packages/propel/src/styles/react-day-picker.css
new file mode 100644
index 0000000..1a541c4
--- /dev/null
+++ b/packages/propel/src/styles/react-day-picker.css
@@ -0,0 +1,313 @@
+@layer components {
+  .rdp-root {
+    font-size: 12px;
+
+    --rdp-cell-size: 40px;
+    /* Size of the day cells. */
+    --rdp-caption-font-size: 1rem;
+    /* Font size for the caption labels. */
+    --rdp-caption-navigation-size: 1.25rem;
+    /* Font size for the caption labels. */
+    --rdp-accent-color: var(--background-color-accent-primary);
+    /* Accent color for the background of selected days. */
+    --rdp-background-color: --alpha(var(--background-color-accent-primary) / 50%);
+    /* Background color for the hovered/focused elements. */
+    --rdp-dark-background-color: var(--background-color-accent-primary-hover);
+    /* Background color for the hovered/focused, already selected elements. */
+    --rdp-outline: 2px solid var(--rdp-accent-color);
+    /* Outline border for focused elements */
+    --rdp-selected-color: var(--text-color-on-color);
+    /* Color of selected day text */
+
+    background: transparent;
+  }
+
+  .rdp-root {
+    position: relative; /* Required to position the nav. */
+    box-sizing: border-box;
+  }
+
+  /* ---------- */
+  /* Day Buttons */
+  /* ----------- */
+
+  .rdp-day_button {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--rdp-cell-size);
+    max-width: var(--rdp-cell-size);
+    height: var(--rdp-cell-size);
+    margin: 0;
+    border: 2px solid transparent;
+    border-radius: 50%;
+  }
+
+  .rdp-day.rdp-outside:not(.rdp-selected) .rdp-day_button {
+    opacity: 0.5;
+  }
+
+  .rdp-day.rdp-disabled:not(.rdp-selected) .rdp-day_button {
+    opacity: 0.25;
+  }
+
+  .rdp-day:not(.rdp-disabled) .rdp-day_button {
+    cursor: pointer;
+  }
+
+  .rdp-day:not(.rdp-selected, .rdp-disabled) .rdp-day_button:focus-visible {
+    color: inherit;
+    background-color: var(--rdp-background-color);
+  }
+
+  .rdp-selected:not(.rdp-range_middle, .rdp-disabled) .rdp-day_button:focus-visible {
+    outline: var(--rdp-outline);
+    outline-offset: 2px;
+    background-color: var(--rdp-dark-background-color);
+    outline-width: thin;
+  }
+
+  .rdp-day:not(.rdp-disabled) .rdp-day_button:hover {
+    background-color: var(--rdp-background-color);
+  }
+
+  .rdp-selected .rdp-day_button {
+    background-color: var(--rdp-accent-color);
+    border-radius: 50%;
+    color: var(--rdp-selected-color);
+    z-index: 1;
+  }
+
+  .rdp-selected .rdp-day_button:hover:not(.rdp-disabled) {
+    background-color: var(--rdp-dark-background-color);
+  }
+
+  .rdp-week {
+    margin: 0;
+    padding: 0;
+  }
+
+  .rdp-today:not(.rdp-outside) {
+    position: relative;
+  }
+
+  .rdp-today:not(.rdp-outside)::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: 2px;
+    width: 0.5em;
+    height: 0.5em;
+    background-color: var(--rdp-background-color);
+    border-radius: 100%;
+    transform: translate(-50%, 0);
+  }
+
+  .rdp-selected .rdp-day_button:focus-visible,
+  .rdp-selected .rdp-day_button:hover {
+    color: var(--rdp-selected-color);
+    opacity: 1;
+    background-color: var(--rdp-accent-color);
+  }
+
+  .rdp-weekday {
+    vertical-align: middle;
+    font-weight: 700;
+    text-align: center;
+    font-size: 0.75em;
+    height: var(--rdp-cell-size);
+    padding: 0;
+    text-transform: uppercase;
+  }
+
+  /* ---------- */
+  /* Top Nav  */
+  /* ---------- */
+
+  .rdp-nav {
+    box-sizing: border-box;
+    position: absolute;
+    padding: inherit;
+
+    top: 1.2em;
+    right: 1em;
+
+    display: flex;
+    align-items: center;
+  }
+
+  .rdp-button_next,
+  .rdp-button_previous {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    font: inherit;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    appearance: none;
+    width: var(--rdp-caption-navigation-size);
+    height: var(--rdp-caption-navigation-size);
+    padding: 0.25em;
+    border-radius: 2px;
+  }
+
+  .rdp-chevron {
+    @apply fill-secondary;
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+
+  .rdp-button_next:hover,
+  .rdp-button_previous:hover,
+  .rdp-button_next:focus-visible,
+  .rdp-button_previous:focus-visible {
+    @apply bg-layer-transparent-hover!;
+  }
+
+  /* ---------- */
+  /* Dropdowns  */
+  /* ---------- */
+
+  .rdp-dropdowns {
+    position: relative;
+    /* width: 100%; */
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .rdp-dropdown {
+    appearance: none;
+    --webkit-appearance: none;
+    --moz-appearance: none;
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    border: none;
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: inherit;
+    cursor: pointer;
+    background: transparent;
+
+    &:hover {
+      @apply bg-layer-transparent-hover!;
+    }
+  }
+
+  .rdp-dropdown_root {
+    margin: 0;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .rdp-months_dropdown {
+    text-transform: capitalize;
+  }
+
+  .rdp-dropdown[data-disabled="true"] {
+    opacity: unset;
+    color: unset;
+  }
+
+  .rdp-caption_label {
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0 0.25em;
+    white-space: nowrap;
+    color: currentColor;
+    border: 0;
+    border: 2px solid transparent;
+    font-family: inherit;
+    font-size: var(--rdp-caption-font-size);
+    font-weight: 600;
+    background: transparent;
+    border-radius: 4px;
+  }
+
+  .rdp-dropdown:not([data-disabled="true"]) {
+    &:focus-visible + .rdp-caption_label {
+      border: var(--rdp-outline);
+      border-radius: 6px;
+    }
+
+    &:hover {
+      & + .rdp-caption_label {
+        @apply bg-layer-transparent-hover!;
+      }
+    }
+  }
+
+  .rdp-dropdown_icon {
+    margin: 0 0 0 5px;
+  }
+
+  /* --------------- */
+  /* Range selection */
+  /* --------------- */
+
+  .rdp-range_start,
+  .rdp-range_middle,
+  .rdp-range_end {
+    position: relative;
+  }
+
+  .rdp-range_start::before,
+  .rdp-range_middle::before,
+  .rdp-range_end::before {
+    content: "";
+    position: absolute;
+    background-color: var(--rdp-background-color);
+    top: 50%;
+    height: 100%;
+    width: 50%;
+    transform: translate(0, -50%);
+    z-index: -1;
+  }
+
+  .rdp-range_start::before {
+    left: 50%;
+  }
+
+  .rdp-range_middle::before {
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  .rdp-range_end::before {
+    right: 50%;
+  }
+
+  .rdp-range_start.rdp-range_end::before {
+    display: none;
+  }
+
+  .rdp-range_middle .rdp-day_button {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  .rdp-day.rdp-range_middle .rdp-day_button:hover,
+  .rdp-day.rdp-range_middle .rdp-day_button:focus-visible {
+    background-color: var(--rdp-background-color);
+    color: inherit;
+  }
+}
diff --git a/packages/propel/src/switch/index.ts b/packages/propel/src/switch/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/switch/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/switch/root.tsx b/packages/propel/src/switch/root.tsx
new file mode 100644
index 0000000..0c3e87c
--- /dev/null
+++ b/packages/propel/src/switch/root.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Switch as BaseSwitch } from "@base-ui-components/react/switch";
+import { cn } from "../utils/classname";
+
+export interface IToggleSwitchProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  className?: string;
+}
+
+function Switch({ value, onChange, label, size = "sm", disabled, className }: IToggleSwitchProps) {
+  return (
+    <BaseSwitch.Root
+      checked={value}
+      disabled={disabled}
+      onCheckedChange={onChange}
+      aria-label={label}
+      className={cn(
+        "relative inline-flex flex-shrink-0 cursor-pointer rounded-full border border-subtle transition-colors duration-200 ease-in-out focus:outline-none",
+        // size
+        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10",
+        // state
+        disabled
+          ? "cursor-not-allowed bg-layer-1"
+          : value
+            ? "cursor-pointer bg-accent-primary"
+            : "cursor-pointer bg-surface-2",
+        className
+      )}
+    >
+      {label && <span className="sr-only">{label}</span>}
+      <BaseSwitch.Thumb
+        aria-hidden="true"
+        className={cn(
+          "shadow inline-block self-center rounded-full ring-0 transition-transform duration-200 ease-in-out",
+          // size
+          size === "sm" ? "h-3 w-3" : size === "md" ? "h-4 w-4" : "h-5 w-5",
+          // position + color by state
+          value
+            ? size === "sm"
+              ? "translate-x-3 bg-white"
+              : size === "md"
+                ? "translate-x-4 bg-white"
+                : "translate-x-5 bg-white"
+            : "translate-x-0.5 bg-surface-2",
+          // disabled
+          disabled && "cursor-not-allowed bg-surface-2"
+        )}
+      />
+    </BaseSwitch.Root>
+  );
+}
+
+Switch.displayName = "plane-ui-switch";
+
+export { Switch };
diff --git a/packages/propel/src/switch/switch.stories.tsx b/packages/propel/src/switch/switch.stories.tsx
new file mode 100644
index 0000000..3e41d6e
--- /dev/null
+++ b/packages/propel/src/switch/switch.stories.tsx
@@ -0,0 +1,247 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useArgs } from "storybook/preview-api";
+import { Switch } from "./root";
+
+const meta = {
+  title: "Components/Switch",
+  component: Switch,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: { value: false, onChange: () => {} },
+  render(args) {
+    const [{ value }, updateArgs] = useArgs();
+    const setValue = (newValue: boolean) => updateArgs({ value: newValue });
+    return <Switch {...args} value={value} onChange={setValue} />;
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: { value: true },
+};
+
+export const WithLabel: Story = {
+  render(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <div className="flex items-center gap-2">
+        <Switch {...args} value={value} onChange={setValue} label="Enable notifications" />
+        <label className="text-13">Enable notifications</label>
+      </div>
+    );
+  },
+};
+
+export const Small: Story = {
+  args: { size: "sm" },
+};
+
+export const Medium: Story = {
+  args: { size: "md" },
+};
+
+export const Large: Story = {
+  args: { size: "lg" },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const DisabledChecked: Story = {
+  args: { value: true, disabled: true },
+};
+
+export const AllSizes: Story = {
+  render() {
+    const [small, setSmall] = useState(false);
+    const [medium, setMedium] = useState(false);
+    const [large, setLarge] = useState(false);
+
+    return (
+      <div className="flex items-center gap-6">
+        <div className="text-center">
+          <Switch value={small} onChange={setSmall} size="sm" />
+          <p className="text-gray-600 mt-2 text-11">Small</p>
+        </div>
+        <div className="text-center">
+          <Switch value={medium} onChange={setMedium} size="md" />
+          <p className="text-gray-600 mt-2 text-11">Medium</p>
+        </div>
+        <div className="text-center">
+          <Switch value={large} onChange={setLarge} size="lg" />
+          <p className="text-gray-600 mt-2 text-11">Large</p>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AllStates: Story = {
+  render() {
+    const [unchecked, setUnchecked] = useState(false);
+    const [checked, setChecked] = useState(true);
+    const [disabledUnchecked] = useState(false);
+    const [disabledChecked] = useState(true);
+
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <Switch value={unchecked} onChange={setUnchecked} />
+          <span className="text-gray-600 text-13">Unchecked</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <Switch value={checked} onChange={setChecked} />
+          <span className="text-gray-600 text-13">Checked</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <Switch value={disabledUnchecked} onChange={() => {}} disabled />
+          <span className="text-gray-600 text-13">Disabled Unchecked</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <Switch value={disabledChecked} onChange={() => {}} disabled />
+          <span className="text-gray-600 text-13">Disabled Checked</span>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const InForm: Story = {
+  render() {
+    const [notifications, setNotifications] = useState(true);
+    const [marketing, setMarketing] = useState(false);
+    const [updates, setUpdates] = useState(true);
+
+    return (
+      <div className="border-gray-200 shadow-md w-80 rounded-lg border bg-white p-6">
+        <h3 className="text-16 font-semibold">Notification Settings</h3>
+        <div className="mt-4 space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-13 font-medium">Push Notifications</p>
+              <p className="text-gray-500 text-11">Receive push notifications on your device</p>
+            </div>
+            <Switch value={notifications} onChange={setNotifications} size="md" />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-13 font-medium">Marketing Emails</p>
+              <p className="text-gray-500 text-11">Receive emails about new features</p>
+            </div>
+            <Switch value={marketing} onChange={setMarketing} size="md" />
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-13 font-medium">Product Updates</p>
+              <p className="text-gray-500 text-11">Get notified about product updates</p>
+            </div>
+            <Switch value={updates} onChange={setUpdates} size="md" />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithDescription: Story = {
+  render() {
+    const [enabled, setEnabled] = useState(false);
+
+    return (
+      <div className="border-gray-200 w-96 rounded-lg border bg-white p-6">
+        <div className="flex items-start justify-between">
+          <div className="flex-1">
+            <h4 className="text-13 font-semibold">Enable Two-Factor Authentication</h4>
+            <p className="text-gray-500 mt-1 text-11">
+              Add an extra layer of security to your account by enabling two-factor authentication.
+            </p>
+          </div>
+          <Switch value={enabled} onChange={setEnabled} size="md" className="ml-4" />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Interactive: Story = {
+  render() {
+    const [enabled, setEnabled] = useState(false);
+
+    return (
+      <div className="border-gray-200 w-80 space-y-4 rounded-lg border bg-white p-6">
+        <div className="flex items-center justify-between">
+          <span className="text-13 font-medium">Feature Toggle</span>
+          <Switch value={enabled} onChange={setEnabled} size="md" />
+        </div>
+        <div className="bg-gray-50 rounded-sm p-4">
+          <p className="text-gray-700 text-13">
+            Status: <span className="font-semibold">{enabled ? "Enabled" : "Disabled"}</span>
+          </p>
+          {enabled && <p className="mt-2 text-11 text-success-primary">Feature is now active and ready to use!</p>}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const CustomStyles: Story = {
+  render() {
+    const [value, setValue] = useState(false);
+
+    return (
+      <div className="flex items-center gap-4">
+        <Switch
+          value={value}
+          onChange={setValue}
+          size="lg"
+          className="border-purple-300 data-[state=checked]:bg-purple-500 border-2"
+        />
+        <span className="text-13">Custom styled switch</span>
+      </div>
+    );
+  },
+};
+
+export const MultipleControls: Story = {
+  render() {
+    const [settings, setSettings] = useState({
+      feature1: true,
+      feature2: false,
+      feature3: true,
+      feature4: false,
+      feature5: true,
+    });
+
+    const toggleSetting = (key: keyof typeof settings) => {
+      setSettings((prev) => ({ ...prev, [key]: !prev[key] }));
+    };
+
+    return (
+      <div className="border-gray-200 w-96 rounded-lg border bg-white p-6">
+        <h3 className="mb-4 text-16 font-semibold">Feature Flags</h3>
+        <div className="space-y-3">
+          {Object.entries(settings).map(([key, value]) => (
+            <div key={key} className="flex items-center justify-between">
+              <span className="text-13 capitalize">{key.replace(/([A-Z])/g, " $1").trim()}</span>
+              <Switch value={value} onChange={() => toggleSetting(key as keyof typeof settings)} size="sm" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/tab-navigation/index.ts b/packages/propel/src/tab-navigation/index.ts
new file mode 100644
index 0000000..4229ac2
--- /dev/null
+++ b/packages/propel/src/tab-navigation/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { TabNavigationItem } from "./tab-navigation-item";
+export { TabNavigationList } from "./tab-navigation-list";
+export type { TTabNavigationItemProps, TTabNavigationListProps } from "./tab-navigation-types";
diff --git a/packages/propel/src/tab-navigation/tab-navigation-item.tsx b/packages/propel/src/tab-navigation/tab-navigation-item.tsx
new file mode 100644
index 0000000..0980be8
--- /dev/null
+++ b/packages/propel/src/tab-navigation/tab-navigation-item.tsx
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../utils";
+import type { TTabNavigationItemProps } from "./tab-navigation-types";
+
+export function TabNavigationItem({ children, isActive, className }: TTabNavigationItemProps) {
+  return (
+    <div
+      className={cn(
+        "relative z-10 flex items-center gap-2 rounded-md px-2 py-1.5 text-13 font-medium transition-colors",
+        isActive ? "text-primary" : "text-secondary hover:bg-layer-transparent-hover hover:text-primary",
+        className
+      )}
+    >
+      <AnimatePresence>
+        {isActive && (
+          <motion.div
+            className="absolute inset-0 -z-10 rounded-md bg-layer-transparent-active"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.9 }}
+            transition={{
+              duration: 0.3,
+              ease: [0.4, 0, 0.2, 1],
+            }}
+          />
+        )}
+      </AnimatePresence>
+      {children}
+    </div>
+  );
+}
+
+TabNavigationItem.displayName = "TabNavigationItem";
diff --git a/packages/propel/src/tab-navigation/tab-navigation-list.tsx b/packages/propel/src/tab-navigation/tab-navigation-list.tsx
new file mode 100644
index 0000000..d4a7c98
--- /dev/null
+++ b/packages/propel/src/tab-navigation/tab-navigation-list.tsx
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { LayoutGroup } from "framer-motion";
+import { cn } from "../utils";
+import type { TTabNavigationListProps } from "./tab-navigation-types";
+
+export function TabNavigationList({ children, className }: TTabNavigationListProps) {
+  return (
+    <LayoutGroup id="tab-navigation">
+      <div className={cn("relative flex items-center gap-1 rounded-md", className)}>{children}</div>
+    </LayoutGroup>
+  );
+}
+
+TabNavigationList.displayName = "TabNavigationList";
diff --git a/packages/propel/src/tab-navigation/tab-navigation-types.ts b/packages/propel/src/tab-navigation/tab-navigation-types.ts
new file mode 100644
index 0000000..4cfce16
--- /dev/null
+++ b/packages/propel/src/tab-navigation/tab-navigation-types.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+
+export type TTabNavigationItemProps = {
+  /** The content to display inside the tab (icons, text, etc.) */
+  children: ReactNode;
+  /** Whether this tab is currently active */
+  isActive: boolean;
+  /** Additional CSS class names */
+  className?: string;
+};
+
+export type TTabNavigationListProps = {
+  /** The navigation items (each should be a TabNavigationItem wrapped in a routing component) */
+  children: ReactNode;
+  /** Additional CSS class names for the container */
+  className?: string;
+};
diff --git a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
new file mode 100644
index 0000000..7a7da4f
--- /dev/null
+++ b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+// icons import
+import {
+  CyclesOutline,
+  IntakeOutline,
+  ModuleOutline,
+  OverviewOutline,
+  PagesOutline,
+  ViewsOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
+// tab navigation import
+import { TabNavigationItem } from "./tab-navigation-item";
+import { TabNavigationList } from "./tab-navigation-list";
+
+const meta: Meta<typeof TabNavigationList> = {
+  title: "Components/TabNavigation",
+  component: TabNavigationList,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[900px] bg-surface-1 p-8">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    const [activeNavTab, setActiveNavTab] = useState("work_items");
+
+    // Example navigation items (matching actual Plane project navigation)
+    const navItems = [
+      { key: "overview", name: "Overview", href: "#overview", icon: OverviewOutline },
+      { key: "work_items", name: "Work items", href: "#work_items", icon: WorkItemsOutline },
+      { key: "cycles", name: "Cycles", href: "#cycles", icon: CyclesOutline },
+      { key: "modules", name: "Modules", href: "#modules", icon: ModuleOutline },
+      { key: "views", name: "Views", href: "#views", icon: ViewsOutline },
+      { key: "pages", name: "Pages", href: "#pages", icon: PagesOutline },
+      { key: "intake", name: "Intake", href: "#intake", icon: IntakeOutline },
+    ];
+
+    return (
+      <div className="space-y-8">
+        {/* Example 1: Navigation with anchor tags (simulating React Router Link) */}
+        <div className="space-y-3">
+          <div className="text-11 font-medium tracking-wide text-tertiary uppercase">
+            With Navigation Links (e.g., React Router)
+          </div>
+          <TabNavigationList>
+            {navItems.map((item) => (
+              <a
+                key={item.key}
+                href={item.href}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setActiveNavTab(item.key);
+                }}
+              >
+                <TabNavigationItem isActive={activeNavTab === item.key}>
+                  <div className="z-10 flex items-center gap-2">
+                    <item.icon className="h-4 w-4" />
+                    <span>{item.name}</span>
+                  </div>
+                </TabNavigationItem>
+              </a>
+            ))}
+          </TabNavigationList>
+          <div className="text-11 text-tertiary">
+            Active: <span className="font-mono text-primary">{activeNavTab}</span>
+          </div>
+        </div>
+
+        {/* Code example */}
+        <div className="mt-6 rounded-md bg-layer-1 p-4">
+          <div className="mb-2 text-11 font-medium text-secondary">Example Code:</div>
+          <pre className="overflow-x-auto text-11 text-tertiary">
+            {`// With React Router Link
+<TabNavigationList>
+  {items.map(item => (
+    <Link key={item.key} to={item.href}>
+      <TabNavigationItem isActive={pathname === item.href}>
+        <item.icon className="h-4 w-4" />
+        <span>{item.name}</span>
+      </TabNavigationItem>
+    </Link>
+  ))}
+</TabNavigationList>
+`}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/table/core.tsx b/packages/propel/src/table/core.tsx
new file mode 100644
index 0000000..e13dfb1
--- /dev/null
+++ b/packages/propel/src/table/core.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { cn } from "../utils/classname";
+
+const Table = React.forwardRef(function Table(
+  { className, ...props }: React.ComponentPropsWithoutRef<"table">,
+  ref: React.ForwardedRef<React.ComponentRef<"table">>
+) {
+  return (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-13", className)} {...props} />
+    </div>
+  );
+});
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef(function TableHeader(
+  { className, ...props }: React.ComponentPropsWithoutRef<"thead">,
+  ref: React.ForwardedRef<React.ComponentRef<"thead">>
+) {
+  return <thead ref={ref} className={cn("border-y border-subtle bg-layer-1 py-4", className)} {...props} />;
+});
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef(function TableBody(
+  { className, ...props }: React.ComponentPropsWithoutRef<"tbody">,
+  ref: React.ForwardedRef<React.ComponentRef<"tbody">>
+) {
+  return <tbody ref={ref} className={cn("", className)} {...props} />;
+});
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef(function TableFooter(
+  { className, ...props }: React.ComponentPropsWithoutRef<"tfoot">,
+  ref: React.ForwardedRef<React.ComponentRef<"tfoot">>
+) {
+  return <tfoot ref={ref} className={cn("bg-layer-1 font-medium", className)} {...props} />;
+});
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef(function TableRow(
+  { className, ...props }: React.ComponentPropsWithoutRef<"tr">,
+  ref: React.ForwardedRef<React.ComponentRef<"tr">>
+) {
+  return <tr ref={ref} className={cn("transition-colors data-[state=selected]:bg-surface-1", className)} {...props} />;
+});
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef(function TableHead(
+  { className, ...props }: React.ComponentPropsWithoutRef<"th">,
+  ref: React.ForwardedRef<React.ComponentRef<"th">>
+) {
+  return (
+    <th
+      ref={ref}
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium text-tertiary [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef(function TableCell(
+  { className, ...props }: React.ComponentPropsWithoutRef<"td">,
+  ref: React.ForwardedRef<React.ComponentRef<"td">>
+) {
+  return (
+    <td
+      ref={ref}
+      className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
+      {...props}
+    />
+  );
+});
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef(function TableCaption(
+  { className, ...props }: React.ComponentPropsWithoutRef<"caption">,
+  ref: React.ForwardedRef<React.ComponentRef<"caption">>
+) {
+  return <caption ref={ref} className={cn("mt-4 text-13 text-tertiary", className)} {...props} />;
+});
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/propel/src/table/index.ts b/packages/propel/src/table/index.ts
new file mode 100644
index 0000000..bcdcb87
--- /dev/null
+++ b/packages/propel/src/table/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./core";
diff --git a/packages/propel/src/table/table.stories.tsx b/packages/propel/src/table/table.stories.tsx
new file mode 100644
index 0000000..5aa46c5
--- /dev/null
+++ b/packages/propel/src/table/table.stories.tsx
@@ -0,0 +1,382 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "./core";
+
+const meta = {
+  title: "Components/Table",
+  component: Table,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Role</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>John Doe</TableCell>
+            <TableCell>john@example.com</TableCell>
+            <TableCell>Admin</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Jane Smith</TableCell>
+            <TableCell>jane@example.com</TableCell>
+            <TableCell>User</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Bob Wilson</TableCell>
+            <TableCell>bob@example.com</TableCell>
+            <TableCell>Moderator</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+export const WithCaption: Story = {
+  render() {
+    return (
+      <Table>
+        <TableCaption>A list of recent users</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Alice Johnson</TableCell>
+            <TableCell>alice@example.com</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Charlie Brown</TableCell>
+            <TableCell>charlie@example.com</TableCell>
+            <TableCell>Inactive</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+export const WithFooter: Story = {
+  render() {
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Product</TableHead>
+            <TableHead className="text-right">Quantity</TableHead>
+            <TableHead className="text-right">Price</TableHead>
+            <TableHead className="text-right">Total</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Product A</TableCell>
+            <TableCell className="text-right">2</TableCell>
+            <TableCell className="text-right">$10.00</TableCell>
+            <TableCell className="text-right">$20.00</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Product B</TableCell>
+            <TableCell className="text-right">1</TableCell>
+            <TableCell className="text-right">$25.00</TableCell>
+            <TableCell className="text-right">$25.00</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Product C</TableCell>
+            <TableCell className="text-right">3</TableCell>
+            <TableCell className="text-right">$15.00</TableCell>
+            <TableCell className="text-right">$45.00</TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell colSpan={3} className="font-semibold">
+              Total
+            </TableCell>
+            <TableCell className="text-right font-semibold">$90.00</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    );
+  },
+};
+
+export const WithActions: Story = {
+  render() {
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>John Doe</TableCell>
+            <TableCell>john@example.com</TableCell>
+            <TableCell>Admin</TableCell>
+            <TableCell className="text-right">
+              <button className="text-blue-500 mr-2 hover:underline">Edit</button>
+              <button className="text-danger-primary hover:underline">Delete</button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Jane Smith</TableCell>
+            <TableCell>jane@example.com</TableCell>
+            <TableCell>User</TableCell>
+            <TableCell className="text-right">
+              <button className="text-blue-500 mr-2 hover:underline">Edit</button>
+              <button className="text-danger-primary hover:underline">Delete</button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+export const WithBadges: Story = {
+  render() {
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Project</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Priority</TableHead>
+            <TableHead>Assignee</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Website Redesign</TableCell>
+            <TableCell>
+              <span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">In Progress</span>
+            </TableCell>
+            <TableCell>
+              <span className="bg-red-100 rounded-full px-2 py-1 text-11 text-danger-primary">High</span>
+            </TableCell>
+            <TableCell>John Doe</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Mobile App</TableCell>
+            <TableCell>
+              <span className="bg-blue-100 text-blue-800 rounded-full px-2 py-1 text-11">Planned</span>
+            </TableCell>
+            <TableCell>
+              <span className="bg-yellow-100 text-yellow-800 rounded-full px-2 py-1 text-11">Medium</span>
+            </TableCell>
+            <TableCell>Jane Smith</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>API Integration</TableCell>
+            <TableCell>
+              <span className="bg-gray-100 text-gray-800 rounded-full px-2 py-1 text-11">Completed</span>
+            </TableCell>
+            <TableCell>
+              <span className="bg-green-100 rounded-full px-2 py-1 text-11 text-success-primary">Low</span>
+            </TableCell>
+            <TableCell>Bob Wilson</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+export const WithCheckboxes: Story = {
+  render() {
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>
+              <input type="checkbox" className="h-4 w-4" aria-label="Select all rows" />
+            </TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Role</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <input type="checkbox" className="h-4 w-4" aria-label="Select row for John Doe" />
+            </TableCell>
+            <TableCell>John Doe</TableCell>
+            <TableCell>john@example.com</TableCell>
+            <TableCell>Admin</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <input type="checkbox" className="h-4 w-4" aria-label="Select row for Jane Smith" />
+            </TableCell>
+            <TableCell>Jane Smith</TableCell>
+            <TableCell>jane@example.com</TableCell>
+            <TableCell>User</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <input type="checkbox" className="h-4 w-4" aria-label="Select row for Bob Wilson" />
+            </TableCell>
+            <TableCell>Bob Wilson</TableCell>
+            <TableCell>bob@example.com</TableCell>
+            <TableCell>Moderator</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+export const EmptyState: Story = {
+  render() {
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Role</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell colSpan={3} className="h-24 text-center">
+              No results found.
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+export const LargeDataset: Story = {
+  render() {
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>ID</TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Department</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 15 }, (_, i) => (
+            <TableRow key={i}>
+              <TableCell>{1000 + i}</TableCell>
+              <TableCell>User {i + 1}</TableCell>
+              <TableCell>user{i + 1}@example.com</TableCell>
+              <TableCell>{["Engineering", "Sales", "Marketing", "Support"][i % 4]}</TableCell>
+              <TableCell>
+                <span
+                  className={`rounded-full px-2 py-1 text-11 ${
+                    i % 2 === 0 ? "bg-green-100 text-success-primary" : "bg-gray-100 text-gray-800"
+                  }`}
+                >
+                  {i % 2 === 0 ? "Active" : "Inactive"}
+                </span>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+export const CustomStyling: Story = {
+  render() {
+    return (
+      <Table className="border-blue-200 border-2">
+        <TableHeader>
+          <TableRow className="bg-blue-100">
+            <TableHead className="text-blue-900">Name</TableHead>
+            <TableHead className="text-blue-900">Email</TableHead>
+            <TableHead className="text-blue-900">Role</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow className="hover:bg-blue-50">
+            <TableCell className="font-semibold">John Doe</TableCell>
+            <TableCell>john@example.com</TableCell>
+            <TableCell>Admin</TableCell>
+          </TableRow>
+          <TableRow className="hover:bg-blue-50">
+            <TableCell className="font-semibold">Jane Smith</TableCell>
+            <TableCell>jane@example.com</TableCell>
+            <TableCell>User</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
+export const ResponsiveTable: Story = {
+  render() {
+    return (
+      <div className="w-full max-w-4xl">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead className="hidden sm:table-cell">Email</TableHead>
+              <TableHead className="hidden md:table-cell">Department</TableHead>
+              <TableHead className="hidden lg:table-cell">Location</TableHead>
+              <TableHead>Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell>John Doe</TableCell>
+              <TableCell className="hidden sm:table-cell">john@example.com</TableCell>
+              <TableCell className="hidden md:table-cell">Engineering</TableCell>
+              <TableCell className="hidden lg:table-cell">New York</TableCell>
+              <TableCell>Active</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>Jane Smith</TableCell>
+              <TableCell className="hidden sm:table-cell">jane@example.com</TableCell>
+              <TableCell className="hidden md:table-cell">Marketing</TableCell>
+              <TableCell className="hidden lg:table-cell">San Francisco</TableCell>
+              <TableCell>Active</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/tabs/index.ts b/packages/propel/src/tabs/index.ts
new file mode 100644
index 0000000..8974369
--- /dev/null
+++ b/packages/propel/src/tabs/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./tabs";
diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx
new file mode 100644
index 0000000..c158909
--- /dev/null
+++ b/packages/propel/src/tabs/tabs.stories.tsx
@@ -0,0 +1,361 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HomeOutline, SettingsOutline, SubscribeOutline, UserOutline } from "@makeplane/propel/icons";
+import { Tabs } from "./tabs";
+
+type TabOption = {
+  label: string;
+  value: string;
+};
+
+const tabOptions: TabOption[] = [
+  { label: "Account", value: "account" },
+  { label: "Password", value: "password" },
+  { label: "Notifications", value: "notifications" },
+];
+
+// cannot use satisfies here because base-ui does not have portable types.
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Tabs",
+  component: Tabs,
+  subcomponents: {
+    TabsList: Tabs.List,
+    TabsTrigger: Tabs.Trigger,
+    TabsContent: Tabs.Content,
+    TabsIndicator: Tabs.Indicator,
+  },
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    defaultValue: "account",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render({ defaultValue }) {
+    return (
+      <div className="w-[400px]">
+        <Tabs defaultValue={defaultValue}>
+          <Tabs.List>
+            {tabOptions.map((option) => (
+              <Tabs.Trigger key={option.value} value={option.value}>
+                {option.label}
+              </Tabs.Trigger>
+            ))}
+            <Tabs.Indicator />
+          </Tabs.List>
+          {tabOptions.map((option) => (
+            <Tabs.Content key={option.value} value={option.value} className="p-4">
+              <div className="text-13">
+                <h3 className="mb-2 font-medium">{option.label}</h3>
+                <p className="text-tertiary">Content for the {option.label.toLowerCase()} tab.</p>
+              </div>
+            </Tabs.Content>
+          ))}
+        </Tabs>
+      </div>
+    );
+  },
+};
+
+export const Sizes: Story = {
+  render({ defaultValue }) {
+    const sizes = ["sm", "md", "lg"] as const;
+    const sizeLabels: Record<(typeof sizes)[number], string> = {
+      sm: "Small",
+      md: "Medium",
+      lg: "Large",
+    };
+    return (
+      <div className="grid w-[400px] gap-4">
+        {sizes.map((size) => (
+          <div key={size} className="flex flex-col gap-2">
+            <div className="text-13 font-medium">{sizeLabels[size]}</div>
+            <Tabs defaultValue={defaultValue}>
+              <Tabs.List>
+                {tabOptions.map((option) => (
+                  <Tabs.Trigger key={option.value} value={option.value} size={size}>
+                    {option.label}
+                  </Tabs.Trigger>
+                ))}
+                <Tabs.Indicator />
+              </Tabs.List>
+            </Tabs>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+export const Controlled: Story = {
+  render() {
+    const [activeTab, setActiveTab] = useState("account");
+
+    return (
+      <div className="w-[400px]">
+        <div className="mb-4 text-13">
+          Active tab: <span className="font-medium">{activeTab}</span>
+        </div>
+        <Tabs value={activeTab} onValueChange={(value) => value && setActiveTab(value)}>
+          <Tabs.List>
+            {tabOptions.map((option) => (
+              <Tabs.Trigger key={option.value} value={option.value}>
+                {option.label}
+              </Tabs.Trigger>
+            ))}
+            <Tabs.Indicator />
+          </Tabs.List>
+          {tabOptions.map((option) => (
+            <Tabs.Content key={option.value} value={option.value} className="p-4">
+              <div className="text-13">Content for {option.label}</div>
+            </Tabs.Content>
+          ))}
+        </Tabs>
+      </div>
+    );
+  },
+};
+
+export const DisabledTab: Story = {
+  render({ defaultValue }) {
+    return (
+      <div className="w-[400px]">
+        <Tabs defaultValue={defaultValue}>
+          <Tabs.List>
+            <Tabs.Trigger value="account">Account</Tabs.Trigger>
+            <Tabs.Trigger value="password" disabled>
+              Password
+            </Tabs.Trigger>
+            <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
+            <Tabs.Indicator />
+          </Tabs.List>
+          <Tabs.Content value="account" className="p-4">
+            <div className="text-13">Account content</div>
+          </Tabs.Content>
+          <Tabs.Content value="password" className="p-4">
+            <div className="text-13">Password content (disabled)</div>
+          </Tabs.Content>
+          <Tabs.Content value="notifications" className="p-4">
+            <div className="text-13">Notifications content</div>
+          </Tabs.Content>
+        </Tabs>
+      </div>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  render({ defaultValue }) {
+    const tabsWithIcons = [
+      { label: "Home", value: "home", icon: HomeOutline },
+      { label: "Profile", value: "profile", icon: UserOutline },
+      { label: "Settings", value: "settings", icon: SettingsOutline },
+      { label: "Notifications", value: "notifications", icon: SubscribeOutline },
+    ];
+
+    return (
+      <div className="w-[500px]">
+        <Tabs defaultValue={defaultValue || "home"}>
+          <Tabs.List>
+            {tabsWithIcons.map((tab) => (
+              <Tabs.Trigger key={tab.value} value={tab.value}>
+                <tab.icon className="mr-2 h-4 w-4" />
+                {tab.label}
+              </Tabs.Trigger>
+            ))}
+            <Tabs.Indicator />
+          </Tabs.List>
+          {tabsWithIcons.map((tab) => (
+            <Tabs.Content key={tab.value} value={tab.value} className="p-4">
+              <div className="text-13">Content for {tab.label}</div>
+            </Tabs.Content>
+          ))}
+        </Tabs>
+      </div>
+    );
+  },
+};
+
+export const IconsOnly: Story = {
+  render({ defaultValue }) {
+    const iconTabs = [
+      { value: "home", icon: HomeOutline },
+      { value: "profile", icon: UserOutline },
+      { value: "settings", icon: SettingsOutline },
+      { value: "notifications", icon: SubscribeOutline },
+    ];
+
+    return (
+      <div className="w-[300px]">
+        <Tabs defaultValue={defaultValue || "home"}>
+          <Tabs.List>
+            {iconTabs.map((tab) => (
+              <Tabs.Trigger key={tab.value} value={tab.value}>
+                <tab.icon className="h-4 w-4" />
+              </Tabs.Trigger>
+            ))}
+            <Tabs.Indicator />
+          </Tabs.List>
+          {iconTabs.map((tab) => (
+            <Tabs.Content key={tab.value} value={tab.value} className="p-4">
+              <div className="text-13">Content for {tab.value}</div>
+            </Tabs.Content>
+          ))}
+        </Tabs>
+      </div>
+    );
+  },
+};
+
+export const DynamicTabs: Story = {
+  render() {
+    const [tabs, setTabs] = useState([
+      { label: "Tab 1", value: "tab1" },
+      { label: "Tab 2", value: "tab2" },
+    ]);
+    const [activeTab, setActiveTab] = useState("tab1");
+
+    const addTab = () => {
+      const newTabNum = tabs.length + 1;
+      setTabs([...tabs, { label: `Tab ${newTabNum}`, value: `tab${newTabNum}` }]);
+    };
+
+    const removeTab = (valueToRemove: string) => {
+      const newTabs = tabs.filter((tab) => tab.value !== valueToRemove);
+      setTabs(newTabs);
+      if (activeTab === valueToRemove && newTabs.length > 0) {
+        setActiveTab(newTabs[0].value);
+      }
+    };
+
+    return (
+      <div className="w-[500px]">
+        <div className="mb-4">
+          <button onClick={addTab} className="rounded-sm bg-layer-1 px-3 py-1.5 text-13 hover:bg-surface-2">
+            Add Tab
+          </button>
+        </div>
+        <Tabs value={activeTab} onValueChange={(value) => value && setActiveTab(value)}>
+          <Tabs.List>
+            {tabs.map((tab) => (
+              <Tabs.Trigger key={tab.value} value={tab.value}>
+                {tab.label}
+                {tabs.length > 1 && (
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeTab(tab.value);
+                    }}
+                    className="ml-2 hover:text-danger-primary"
+                  >
+                    ×
+                  </button>
+                )}
+              </Tabs.Trigger>
+            ))}
+            <Tabs.Indicator />
+          </Tabs.List>
+          {tabs.map((tab) => (
+            <Tabs.Content key={tab.value} value={tab.value} className="p-4">
+              <div className="text-13">Content for {tab.label}</div>
+            </Tabs.Content>
+          ))}
+        </Tabs>
+      </div>
+    );
+  },
+};
+
+export const FullWidth: Story = {
+  render({ defaultValue }) {
+    return (
+      <div className="w-full max-w-2xl">
+        <Tabs defaultValue={defaultValue}>
+          <Tabs.List>
+            <Tabs.Trigger value="account" className="flex-1">
+              Account
+            </Tabs.Trigger>
+            <Tabs.Trigger value="password" className="flex-1">
+              Password
+            </Tabs.Trigger>
+            <Tabs.Trigger value="notifications" className="flex-1">
+              Notifications
+            </Tabs.Trigger>
+            <Tabs.Indicator />
+          </Tabs.List>
+          {tabOptions.map((option) => (
+            <Tabs.Content key={option.value} value={option.value} className="p-4">
+              <div className="text-13">Content for {option.label}</div>
+            </Tabs.Content>
+          ))}
+        </Tabs>
+      </div>
+    );
+  },
+};
+
+export const WithComplexContent: Story = {
+  render({ defaultValue }) {
+    return (
+      <div className="w-[600px]">
+        <Tabs defaultValue={defaultValue}>
+          <Tabs.List>
+            {tabOptions.map((option) => (
+              <Tabs.Trigger key={option.value} value={option.value}>
+                {option.label}
+              </Tabs.Trigger>
+            ))}
+            <Tabs.Indicator />
+          </Tabs.List>
+          <Tabs.Content value="account" className="p-4">
+            <div className="space-y-4">
+              <div>
+                <label className="text-13 font-medium">Username</label>
+                <input type="text" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
+              </div>
+              <div>
+                <label className="text-13 font-medium">Email</label>
+                <input type="email" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
+              </div>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="password" className="p-4">
+            <div className="space-y-4">
+              <div>
+                <label className="text-13 font-medium">Current Password</label>
+                <input type="password" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
+              </div>
+              <div>
+                <label className="text-13 font-medium">New Password</label>
+                <input type="password" className="mt-1 w-full rounded-sm bg-layer-1 px-3 py-2" />
+              </div>
+            </div>
+          </Tabs.Content>
+          <Tabs.Content value="notifications" className="p-4">
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <span className="text-13">Email notifications</span>
+                <input type="checkbox" />
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-13">Push notifications</span>
+                <input type="checkbox" />
+              </div>
+            </div>
+          </Tabs.Content>
+        </Tabs>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx
new file mode 100644
index 0000000..56c55a9
--- /dev/null
+++ b/packages/propel/src/tabs/tabs.tsx
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
+import { cn } from "../utils/classname";
+
+type TabsVariant = "contained";
+
+type TabsContextType = {
+  variant?: TabsVariant;
+};
+
+const TabsContext = React.createContext<TabsContextType | undefined>(undefined);
+
+type TabsCompound = React.ForwardRefExoticComponent<
+  React.ComponentProps<typeof TabsPrimitive.Root> & {
+    variant?: TabsVariant;
+  } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
+> & {
+  List: React.ForwardRefExoticComponent<
+    React.ComponentProps<typeof TabsPrimitive.List> & {
+      background?: TabsVariant;
+    } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
+  >;
+  Trigger: React.ForwardRefExoticComponent<
+    React.ComponentProps<typeof TabsPrimitive.Tab> & {
+      size?: "sm" | "md" | "lg";
+      variant?: TabsVariant;
+    } & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Tab>>
+  >;
+  Content: React.ForwardRefExoticComponent<
+    React.ComponentProps<typeof TabsPrimitive.Panel> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Panel>>
+  >;
+  Indicator: React.ForwardRefExoticComponent<React.ComponentProps<"div"> & React.RefAttributes<HTMLDivElement>>;
+};
+
+const TabsRoot = React.forwardRef(function TabsRoot(
+  { className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.Root> & { variant?: TabsVariant },
+  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Root>>
+) {
+  return (
+    <TabsContext.Provider value={{ variant }}>
+      <TabsPrimitive.Root
+        data-slot="tabs"
+        className={cn("flex h-full w-full flex-col", className)}
+        {...props}
+        ref={ref}
+      />
+    </TabsContext.Provider>
+  );
+});
+
+const TabsList = React.forwardRef(function TabsList(
+  {
+    className,
+    background = "contained",
+    ...props
+  }: React.ComponentProps<typeof TabsPrimitive.List> & {
+    background?: TabsVariant;
+  },
+  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.List>>
+) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "relative flex w-full items-center justify-between gap-1.5 overflow-auto rounded-lg p-0.5 text-13",
+        {
+          "bg-layer-3": background === "contained",
+        },
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+const TabsTrigger = React.forwardRef(function TabsTrigger(
+  {
+    className,
+    size = "md",
+    ...props
+  }: React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg"; variant?: TabsVariant },
+  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Tab>>
+) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "flex w-full min-w-fit cursor-pointer items-center justify-center rounded-md border border-transparent p-1 font-medium text-primary transition-all duration-200 ease-in-out outline-none focus:outline-none",
+        "data-[selected]:shadow-sm data-[selected]:raised-200 data-[selected]:border data-[selected]:border-subtle-1 data-[selected]:bg-layer-2 data-[selected]:text-primary",
+        "text-placeholder hover:bg-layer-transparent-hover hover:text-tertiary",
+        "disabled:cursor-not-allowed disabled:text-placeholder",
+        {
+          "text-11": size === "sm",
+          "text-13": size === "md",
+          "text-14": size === "lg",
+        },
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+const TabsContent = React.forwardRef(function TabsContent(
+  { className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>,
+  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Panel>>
+) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("relative outline-none", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+const TabsIndicator = React.forwardRef(function TabsIndicator(
+  { className, ...props }: React.ComponentProps<"div">,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div
+      className={cn(
+        "shadow-sm absolute top-[50%] left-0 z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-xs bg-surface-1 transition-[width,transform] duration-200 ease-in-out",
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+  Indicator: TabsIndicator,
+}) satisfies TabsCompound;
+
+export { TabsList, TabsTrigger, TabsContent, TabsIndicator };
diff --git a/packages/propel/src/toast/index.ts b/packages/propel/src/toast/index.ts
new file mode 100644
index 0000000..2ca91d5
--- /dev/null
+++ b/packages/propel/src/toast/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./toast";
diff --git a/packages/propel/src/toast/toast.stories.tsx b/packages/propel/src/toast/toast.stories.tsx
new file mode 100644
index 0000000..1c1a961
--- /dev/null
+++ b/packages/propel/src/toast/toast.stories.tsx
@@ -0,0 +1,709 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Toast, ToastStatic, setToast, updateToast, setPromiseToast, TOAST_TYPE } from "./toast";
+
+const meta = {
+  title: "Components/Toast",
+  component: Toast,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    theme: "light",
+  },
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Provider: Story = {
+  render() {
+    return (
+      <div>
+        <Toast theme="light" />
+        <div className="space-y-2">
+          <p className="text-gray-600 text-13">
+            Toast provider is required to display toasts. It should be added to your app root.
+          </p>
+          <code className="bg-gray-100 block rounded-sm p-2 text-11">{`<Toast theme="light" />`}</code>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Success: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={() =>
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Your changes have been saved successfully.",
+            })
+          }
+          className="rounded-sm bg-success-primary px-4 py-2 text-13 text-on-color hover:bg-success-primary/90"
+        >
+          Show Success Toast
+        </button>
+      </>
+    );
+  },
+};
+
+export const Error: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={() =>
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error",
+              message: "Something went wrong. Please try again.",
+            })
+          }
+          className="rounded-sm bg-danger-primary px-4 py-2 text-13 text-on-color hover:bg-danger-primary/90"
+        >
+          Show Error Toast
+        </button>
+      </>
+    );
+  },
+};
+
+export const Warning: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={() =>
+            setToast({
+              type: TOAST_TYPE.WARNING,
+              title: "Warning",
+              message: "This action cannot be undone.",
+            })
+          }
+          className="rounded-sm bg-warning-primary px-4 py-2 text-13 text-on-color hover:bg-warning-primary/90"
+        >
+          Show Warning Toast
+        </button>
+      </>
+    );
+  },
+};
+
+export const Info: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={() =>
+            setToast({
+              type: TOAST_TYPE.INFO,
+              title: "Information",
+              message: "Here's some helpful information for you.",
+            })
+          }
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
+        >
+          Show Info Toast
+        </button>
+      </>
+    );
+  },
+};
+
+export const Loading: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={() =>
+            setToast({
+              type: TOAST_TYPE.LOADING,
+              title: "Loading...",
+            })
+          }
+          className="rounded-sm border border-subtle bg-layer-2 px-4 py-2 text-13 text-primary hover:bg-layer-1"
+        >
+          Show Loading Toast
+        </button>
+      </>
+    );
+  },
+};
+
+export const WithActionItems: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={() =>
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "File uploaded",
+              message: "Your file has been uploaded successfully.",
+              actionItems: (
+                <>
+                  <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
+                  <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
+                </>
+              ),
+            })
+          }
+          className="rounded-sm bg-success-primary px-4 py-2 text-13 text-on-color hover:bg-success-primary/90"
+        >
+          Show Toast with Action
+        </button>
+      </>
+    );
+  },
+};
+
+export const UpdateToast: Story = {
+  render() {
+    const handleUpdate = () => {
+      const id = setToast({
+        type: TOAST_TYPE.LOADING,
+        title: "Processing...",
+      });
+
+      setTimeout(() => {
+        updateToast(id, {
+          type: TOAST_TYPE.SUCCESS,
+          title: "Complete!",
+          message: "The operation has finished successfully.",
+        });
+      }, 2000);
+    };
+
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={handleUpdate}
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
+        >
+          Update Toast After 2s
+        </button>
+      </>
+    );
+  },
+};
+
+export const PromiseToast: Story = {
+  render() {
+    const handlePromise = () => {
+      const promise = new Promise<{ name?: string; error?: string }>((resolve, reject) => {
+        setTimeout(() => {
+          Math.random() > 0.5 ? resolve({ name: "Success data" }) : reject({ error: "Failed" });
+        }, 2000);
+      });
+
+      setPromiseToast(promise, {
+        loading: "Processing request...",
+        success: {
+          title: "Request completed!",
+          message: (data) => `Successfully processed: ${data.name}`,
+        },
+        error: {
+          title: "Request failed",
+          message: (error) => `Error: ${error.error}`,
+        },
+      });
+    };
+
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={handlePromise}
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
+        >
+          Show Promise Toast
+        </button>
+      </>
+    );
+  },
+};
+
+export const AllTypes: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() =>
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: "Success",
+                message: "Operation successful",
+              })
+            }
+            className="rounded-sm bg-success-primary px-3 py-2 text-13 text-on-color hover:bg-success-primary/90"
+          >
+            Success
+          </button>
+          <button
+            onClick={() =>
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: "Error",
+                message: "Operation failed",
+              })
+            }
+            className="rounded-sm bg-danger-primary px-3 py-2 text-13 text-on-color hover:bg-danger-primary/90"
+          >
+            Error
+          </button>
+          <button
+            onClick={() =>
+              setToast({
+                type: TOAST_TYPE.WARNING,
+                title: "Warning",
+                message: "Please be careful",
+              })
+            }
+            className="rounded-sm bg-warning-primary px-3 py-2 text-13 text-on-color hover:bg-warning-primary/90"
+          >
+            Warning
+          </button>
+          <button
+            onClick={() =>
+              setToast({
+                type: TOAST_TYPE.INFO,
+                title: "Info",
+                message: "Here's some info",
+              })
+            }
+            className="rounded-sm bg-accent-primary px-3 py-2 text-13 text-on-color hover:bg-accent-primary/90"
+          >
+            Info
+          </button>
+          <button
+            onClick={() =>
+              setToast({
+                type: TOAST_TYPE.LOADING,
+                title: "Loading",
+              })
+            }
+            className="rounded-sm border border-subtle bg-layer-2 px-3 py-2 text-13 text-primary hover:bg-layer-1"
+          >
+            Loading
+          </button>
+        </div>
+      </>
+    );
+  },
+};
+
+export const MultipleToasts: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={() => {
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "First toast",
+              message: "This is the first toast",
+            });
+            setTimeout(() => {
+              setToast({
+                type: TOAST_TYPE.INFO,
+                title: "Second toast",
+                message: "This is the second toast",
+              });
+            }, 500);
+            setTimeout(() => {
+              setToast({
+                type: TOAST_TYPE.WARNING,
+                title: "Third toast",
+                message: "This is the third toast",
+              });
+            }, 1000);
+          }}
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
+        >
+          Show Multiple Toasts
+        </button>
+      </>
+    );
+  },
+};
+
+export const TitleOnly: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={() =>
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Saved!",
+            })
+          }
+          className="rounded-sm bg-success-primary px-4 py-2 text-13 text-on-color hover:bg-success-primary/90"
+        >
+          Show Title Only
+        </button>
+      </>
+    );
+  },
+};
+
+export const LongMessage: Story = {
+  render() {
+    return (
+      <>
+        <Toast theme="light" />
+        <button
+          onClick={() =>
+            setToast({
+              type: TOAST_TYPE.INFO,
+              title: "Important Information",
+              message:
+                "This is a longer message that provides more detailed information about what happened and what the user should do next.",
+            })
+          }
+          className="rounded-sm bg-accent-primary px-4 py-2 text-13 text-on-color hover:bg-accent-primary/90"
+        >
+          Show Long Message
+        </button>
+      </>
+    );
+  },
+};
+
+// ========== Static Variants ==========
+
+export const StaticVariants: Story = {
+  render() {
+    return (
+      <div className="grid grid-cols-1 gap-4">
+        <div>
+          <p className="mb-2 text-13 font-medium text-secondary">All toast variants (static):</p>
+        </div>
+        <div className="flex flex-col gap-3">
+          <ToastStatic type={TOAST_TYPE.SUCCESS} title="Success" message="Your changes have been saved successfully." />
+          <ToastStatic type={TOAST_TYPE.ERROR} title="Error" message="Something went wrong. Please try again." />
+          <ToastStatic type={TOAST_TYPE.WARNING} title="Warning" message="This action cannot be undone." />
+          <ToastStatic type={TOAST_TYPE.INFO} title="Information" message="Here's some helpful information for you." />
+          <ToastStatic type={TOAST_TYPE.LOADING} title="Loading..." />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const StaticSuccess: Story = {
+  render() {
+    return (
+      <ToastStatic
+        type={TOAST_TYPE.SUCCESS}
+        title="Changes saved"
+        message="Your changes have been saved successfully."
+      />
+    );
+  },
+};
+
+export const StaticError: Story = {
+  render() {
+    return <ToastStatic type={TOAST_TYPE.ERROR} title="Upload failed" message="Failed to upload file. Try again." />;
+  },
+};
+
+export const StaticWarning: Story = {
+  render() {
+    return (
+      <ToastStatic
+        type={TOAST_TYPE.WARNING}
+        title="Unsaved changes"
+        message="You have unsaved changes. Save before leaving."
+      />
+    );
+  },
+};
+
+export const StaticInfo: Story = {
+  render() {
+    return (
+      <ToastStatic
+        type={TOAST_TYPE.INFO}
+        title="New feature available"
+        message="Check out our latest feature in settings."
+      />
+    );
+  },
+};
+
+export const StaticLoading: Story = {
+  render() {
+    return <ToastStatic type={TOAST_TYPE.LOADING} title="Processing your request..." />;
+  },
+};
+
+export const StaticWithActions: Story = {
+  render() {
+    return (
+      <ToastStatic
+        type={TOAST_TYPE.SUCCESS}
+        title="File uploaded"
+        message="Your file has been uploaded successfully."
+        actionItems={
+          <>
+            <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
+            <button className="text-13 font-medium text-primary hover:text-secondary">Button</button>
+          </>
+        }
+      />
+    );
+  },
+};
+
+export const StaticDarkMode: Story = {
+  render() {
+    return (
+      <div className="flex flex-col gap-3 rounded-lg bg-canvas p-6" data-theme="dark">
+        <p className="mb-2 text-13 font-medium text-secondary">Toast variants in dark mode:</p>
+        <ToastStatic
+          type={TOAST_TYPE.SUCCESS}
+          title="Success"
+          message="Operation completed successfully."
+          theme="dark"
+        />
+        <ToastStatic type={TOAST_TYPE.ERROR} title="Error" message="An error occurred." theme="dark" />
+        <ToastStatic type={TOAST_TYPE.WARNING} title="Warning" message="Please proceed with caution." theme="dark" />
+        <ToastStatic type={TOAST_TYPE.INFO} title="Information" message="Here's some useful info." theme="dark" />
+        <ToastStatic type={TOAST_TYPE.LOADING} title="Loading..." theme="dark" />
+      </div>
+    );
+  },
+};
+
+// ========== Design Tokens Documentation ==========
+
+export const DesignTokens: Story = {
+  render() {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h2 className="mb-2 text-16 font-semibold text-primary">Toast Design Tokens</h2>
+          <p className="text-13 text-secondary">
+            The toast component uses semantic design tokens from the Plane design system.
+          </p>
+        </div>
+
+        <div>
+          <h3 className="mb-3 text-14 font-semibold text-primary">Token Mapping by Variant</h3>
+          <div className="overflow-x-auto">
+            <table className="w-full rounded-lg border border-subtle text-11">
+              <thead>
+                <tr className="bg-layer-1">
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Variant</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Title Text</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Icon BG</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Toast BG</th>
+                  <th className="border-b border-subtle px-3 py-2 text-left font-semibold text-primary">Border</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="border-b border-subtle">
+                  <td className="px-3 py-2 font-medium text-primary">Success</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-success-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+                <tr className="border-b border-subtle">
+                  <td className="px-3 py-2 font-medium text-primary">Error</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-danger-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+                <tr className="border-b border-subtle">
+                  <td className="px-3 py-2 font-medium text-primary">Warning</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-warning-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+                <tr className="border-b border-subtle">
+                  <td className="px-3 py-2 font-medium text-primary">Info</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-accent-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="px-3 py-2 font-medium text-primary">Loading</td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-layer-2</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">border-subtle</code>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <h3 className="mb-3 text-14 font-semibold text-primary">Typography</h3>
+            <ul className="space-y-2 text-12 text-secondary">
+              <li>
+                <span className="font-medium text-primary">Title:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-14 font-semibold</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Message:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-13</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Message Color:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-secondary</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Action Button:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-13 font-medium</code>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="mb-3 text-14 font-semibold text-primary">Dimensions & Styling</h3>
+            <ul className="space-y-2 text-12 text-secondary">
+              <li>
+                <span className="font-medium text-primary">Width:</span> 350px
+              </li>
+              <li>
+                <span className="font-medium text-primary">Padding:</span> 16px (p-4)
+              </li>
+              <li>
+                <span className="font-medium text-primary">Border Radius:</span> 8px (rounded-lg)
+              </li>
+              <li>
+                <span className="font-medium text-primary">Shadow:</span>{" "}
+                <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">shadow-raised-200</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Border Width:</span> 1px
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="mb-3 text-14 font-semibold text-primary">Icon Specifications</h3>
+          <ul className="space-y-2 text-12 text-secondary">
+            <li>
+              <span className="font-medium text-primary">Icon Size:</span> 20x20px
+            </li>
+            <li>
+              <span className="font-medium text-primary">Icon Stroke Width:</span> 2px
+            </li>
+            <li>
+              <span className="font-medium text-primary">Icon Container:</span> 40x40px circular (w-10 h-10
+              rounded-full)
+            </li>
+            <li>
+              <span className="font-medium text-primary">Icon Color:</span>{" "}
+              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">text-on-color</code>
+            </li>
+            <li>
+              <span className="font-medium text-primary">Icon Background:</span>{" "}
+              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">
+                bg-{"{"}variant{"}"}-primary
+              </code>
+            </li>
+            <li>
+              <span className="font-medium text-primary">Close Icon Size:</span> 16x16px
+            </li>
+            <li>
+              <span className="font-medium text-primary">Close Icon Color:</span>{" "}
+              <code className="rounded bg-layer-1 px-1.5 py-0.5 text-10">
+                text-icon-secondary hover:text-icon-tertiary
+              </code>
+            </li>
+          </ul>
+        </div>
+
+        <div className="rounded-lg bg-layer-1 p-4">
+          <h3 className="mb-2 text-14 font-semibold text-primary">Visual Examples</h3>
+          <p className="mb-4 text-12 text-secondary">See how the tokens are applied across all toast variants:</p>
+          <div className="flex flex-col gap-3">
+            <ToastStatic
+              type={TOAST_TYPE.SUCCESS}
+              title="Success"
+              message="Your changes have been saved successfully."
+            />
+            <ToastStatic type={TOAST_TYPE.ERROR} title="Error" message="Something went wrong. Please try again." />
+            <ToastStatic type={TOAST_TYPE.WARNING} title="Warning" message="This action cannot be undone." />
+            <ToastStatic type={TOAST_TYPE.INFO} title="Information" message="Here's some helpful information." />
+            <ToastStatic type={TOAST_TYPE.LOADING} title="Loading..." />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/toast/toast.tsx b/packages/propel/src/toast/toast.tsx
new file mode 100644
index 0000000..9985261
--- /dev/null
+++ b/packages/propel/src/toast/toast.tsx
@@ -0,0 +1,323 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Toast as BaseToast } from "@base-ui-components/react/toast";
+import { CloseOutline, InfoOutline, TickOutline, WarningTriangleOutline } from "@makeplane/propel/icons";
+// spinner
+import { CircularBarSpinner } from "../spinners/circular-bar-spinner";
+import { cn } from "../utils/classname";
+
+export enum TOAST_TYPE {
+  SUCCESS = "success",
+  ERROR = "error",
+  INFO = "info",
+  WARNING = "warning",
+  LOADING = "loading",
+  LOADING_TOAST = "loading-toast",
+}
+
+type SetToastProps =
+  | {
+      type: TOAST_TYPE.LOADING;
+      title?: string;
+    }
+  | {
+      id?: string | number;
+      type: Exclude<TOAST_TYPE, TOAST_TYPE.LOADING>;
+      title: string;
+      message?: string;
+      actionItems?: React.ReactNode;
+    };
+
+type PromiseToastCallback<ToastData> = (data: ToastData) => string;
+type ActionItemsPromiseToastCallback<ToastData> = (data: ToastData) => React.ReactNode;
+
+type PromiseToastData<ToastData> = {
+  title: string;
+  message?: PromiseToastCallback<ToastData>;
+  actionItems?: ActionItemsPromiseToastCallback<ToastData>;
+};
+
+type PromiseToastOptions<ToastData> = {
+  loading?: string;
+  success: PromiseToastData<ToastData>;
+  error: PromiseToastData<ToastData>;
+};
+
+export type ToastProps = {
+  theme: "light" | "dark" | "system";
+};
+
+const toastManager = BaseToast.createToastManager();
+
+export function Toast(props: ToastProps) {
+  return (
+    <BaseToast.Provider toastManager={toastManager}>
+      <BaseToast.Portal>
+        <BaseToast.Viewport data-theme={props.theme}>
+          <ToastList />
+        </BaseToast.Viewport>
+      </BaseToast.Portal>
+    </BaseToast.Provider>
+  );
+}
+
+const TOAST_DATA = {
+  [TOAST_TYPE.SUCCESS]: {
+    icon: <TickOutline width={12} height={12} className="text-on-color" />,
+    iconBgClassName: "bg-success-primary",
+    backgroundColorClassName: "!bg-surface-1",
+    borderColorClassName: "border-subtle",
+  },
+  [TOAST_TYPE.ERROR]: {
+    icon: <CloseOutline width={12} height={12} className="text-on-color" />,
+    iconBgClassName: "bg-danger-primary",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
+  },
+  [TOAST_TYPE.WARNING]: {
+    icon: <WarningTriangleOutline width={12} height={12} className="text-on-color" />,
+    iconBgClassName: "bg-warning-primary",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
+  },
+  [TOAST_TYPE.INFO]: {
+    icon: <InfoOutline width={12} height={12} className="text-on-color" />,
+    iconBgClassName: "bg-accent-primary",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
+  },
+  [TOAST_TYPE.LOADING]: {
+    icon: <CircularBarSpinner className="text-on-color" />,
+    iconBgClassName: "bg-layer-2",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
+  },
+  [TOAST_TYPE.LOADING_TOAST]: {
+    icon: <CircularBarSpinner className="text-on-color" />,
+    iconBgClassName: "bg-layer-2",
+    backgroundColorClassName: "bg-surface-1",
+    borderColorClassName: "border-subtle",
+  },
+};
+
+function ToastList() {
+  const { toasts } = BaseToast.useToastManager();
+  return toasts.map((toast) => <ToastRender key={toast.id} id={toast.id} toast={toast} />);
+}
+
+function ToastRender({ id, toast }: { id: React.Key; toast: BaseToast.Root.ToastObject }) {
+  const toastData = toast.data as SetToastProps;
+  const type = toastData.type as TOAST_TYPE;
+  const data = TOAST_DATA[type];
+
+  return (
+    <BaseToast.Root
+      toast={toast}
+      key={id}
+      className={cn(
+        // Base layout and positioning
+        "group flex w-[350px] items-center rounded-lg border shadow-raised-200",
+        "absolute right-3 bottom-3 z-[calc(1000-var(--toast-index))]",
+        "ease-[cubic-bezier(0.22,1,0.36,1)] transition-[opacity,transform] duration-500 select-none",
+
+        // Default transform with stacking and scaling
+        "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-10px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]",
+
+        // Pseudo-element for gap spacing
+        "after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+
+        // State-based opacity
+        "data-[ending-style]:opacity-0 data-[limited]:opacity-0",
+
+        // Starting animation
+        "data-[starting-style]:[transform:translateY(150%)]",
+
+        // Expanded state transform
+        "data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]",
+
+        // Swipe direction endings - consolidated
+        "data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        "data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+
+        // Default ending transform for non-limited toasts
+        "data-[ending-style]:[&:not([data-limited])]:[transform:translateY(150%)]",
+
+        data.backgroundColorClassName,
+        data.borderColorClassName
+      )}
+      style={{
+        ["--gap" as string]: "1rem",
+        ["--offset-y" as string]:
+          "calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))",
+      }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+      }}
+    >
+      <BaseToast.Close className="absolute top-3 right-3 cursor-pointer text-icon-secondary hover:text-icon-tertiary">
+        <CloseOutline width={16} height={16} />
+      </BaseToast.Close>
+      <div className="flex w-full items-start gap-2 p-4">
+        <div className="py-1">
+          {data.icon && (
+            <div
+              className={cn("flex size-4 flex-shrink-0 items-center justify-center rounded-full", data.iconBgClassName)}
+            >
+              {data.icon}
+            </div>
+          )}
+        </div>
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <BaseToast.Title className="text-h6-medium text-primary">
+            {toastData.type === TOAST_TYPE.LOADING ? (toastData.title ?? "Loading...") : toastData.title}
+          </BaseToast.Title>
+          {toastData.type !== TOAST_TYPE.LOADING && toastData.message && (
+            <BaseToast.Description className="text-body-xs-regular text-tertiary">
+              {toastData.message}
+            </BaseToast.Description>
+          )}
+          {toastData.type !== TOAST_TYPE.LOADING && toastData.actionItems && (
+            <div className="flex items-center gap-2">{toastData.actionItems}</div>
+          )}
+        </div>
+      </div>
+    </BaseToast.Root>
+  );
+}
+
+// Static toast component for Storybook and documentation
+export type ToastStaticProps = {
+  type: TOAST_TYPE;
+  title: string;
+  message?: string;
+  actionItems?: React.ReactNode;
+  theme?: "light" | "dark";
+};
+
+export function ToastStatic({ type, title, message, actionItems, theme = "light" }: ToastStaticProps) {
+  const data = TOAST_DATA[type];
+
+  return (
+    <div data-theme={theme} className="inline-block">
+      <div
+        className={cn(
+          // Base layout and positioning
+          "group flex w-[350px] items-start rounded-lg border border-subtle-1 shadow-overlay-100",
+          "relative",
+          data.backgroundColorClassName,
+          data.borderColorClassName
+        )}
+      >
+        <div className="absolute top-1 right-1 cursor-default text-icon-tertiary">
+          <CloseOutline width={14} height={14} />
+        </div>
+        <div className="flex w-full items-start gap-3 p-4">
+          <div className="py-1">
+            {data.icon && (
+              <div
+                className={cn(
+                  "flex size-4 flex-shrink-0 items-center justify-center rounded-full",
+                  data.iconBgClassName
+                )}
+              >
+                {data.icon}
+              </div>
+            )}
+          </div>
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <div className="text-h6-medium text-primary">
+              {type === TOAST_TYPE.LOADING ? (title ?? "Loading...") : title}
+            </div>
+            {type !== TOAST_TYPE.LOADING && message && (
+              <div className="text-body-xs-regular text-tertiary">{message}</div>
+            )}
+            {type !== TOAST_TYPE.LOADING && actionItems && <div className="flex items-center gap-2">{actionItems}</div>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const setToast = (props: SetToastProps) => {
+  let toastId: string | undefined;
+  if (props.type !== TOAST_TYPE.LOADING) {
+    toastId = toastManager.add({
+      data: {
+        type: props.type,
+        title: props.title,
+        message: props.message,
+        actionItems: props.actionItems,
+      },
+    });
+  } else {
+    toastId = toastManager.add({
+      data: {
+        type: props.type,
+        title: props.title,
+      },
+    });
+  }
+  return toastId;
+};
+
+export const updateToast = (id: string, props: SetToastProps) => {
+  toastManager.update(id, {
+    data:
+      props.type === TOAST_TYPE.LOADING
+        ? {
+            type: TOAST_TYPE.LOADING,
+            title: props.title,
+          }
+        : {
+            type: props.type,
+            title: props.title,
+            message: props.message,
+            actionItems: props.actionItems,
+          },
+  });
+};
+
+export const setPromiseToast = <ToastData,>(
+  promise: Promise<ToastData>,
+  options: PromiseToastOptions<ToastData>
+): void => {
+  toastManager.promise(promise, {
+    loading: {
+      data: {
+        title: options.loading ?? "Loading...",
+        type: TOAST_TYPE.LOADING,
+        message: undefined,
+        actionItems: undefined,
+      },
+    },
+    success: (data) => ({
+      data: {
+        type: TOAST_TYPE.SUCCESS,
+        title: options.success.title,
+        message: options.success.message?.(data),
+        actionItems: options.success.actionItems?.(data),
+      },
+    }),
+    error: (data) => ({
+      data: {
+        type: TOAST_TYPE.ERROR,
+        title: options.error.title,
+        message: options.error.message?.(data),
+        actionItems: options.error.actionItems?.(data),
+      },
+    }),
+  });
+};
+
+export const dismissToast = (tId: string) => {
+  toastManager.close(tId);
+};
diff --git a/packages/propel/src/toolbar/index.ts b/packages/propel/src/toolbar/index.ts
new file mode 100644
index 0000000..239fac1
--- /dev/null
+++ b/packages/propel/src/toolbar/index.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { Toolbar } from "./toolbar";
+export type {
+  ToolbarProps,
+  ToolbarGroupProps,
+  ToolbarItemProps,
+  ToolbarSeparatorProps,
+  ToolbarSubmitButtonProps,
+} from "./toolbar";
diff --git a/packages/propel/src/toolbar/toolbar.stories.tsx b/packages/propel/src/toolbar/toolbar.stories.tsx
new file mode 100644
index 0000000..b212e50
--- /dev/null
+++ b/packages/propel/src/toolbar/toolbar.stories.tsx
@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  AlignCenterOutline,
+  AlignLeftOutline,
+  AlignRightOutline,
+  BoldOutline,
+  CodeOutline,
+  GlobeOutline,
+  ItalicOutline,
+  LinkOutline,
+  ListOutline,
+  LockOutline,
+  NumberedListOutline,
+  QuoteOutline,
+  RedoOutline,
+  StrikethroughOutline,
+  UnderlineOutline,
+  UndoOutline,
+} from "@makeplane/propel/icons";
+import { Toolbar } from "./toolbar";
+
+const meta = {
+  title: "Components/Toolbar",
+  component: Toolbar,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  args: {
+    children: null,
+  },
+} satisfies Meta<typeof Toolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    return (
+      <div className="space-y-4 p-4">
+        <div className="w-96 rounded-sm border">
+          <Toolbar>
+            <Toolbar.Group isFirst>
+              <Toolbar.Item icon={UndoOutline} tooltip="Undo" />
+              <Toolbar.Item icon={RedoOutline} tooltip="Redo" />
+            </Toolbar.Group>
+            <Toolbar.Group>
+              <Toolbar.Item icon={BoldOutline} tooltip="Bold" />
+              <Toolbar.Item icon={ItalicOutline} tooltip="Italic" />
+              <Toolbar.Item icon={UnderlineOutline} tooltip="Underline" />
+              <Toolbar.Item icon={StrikethroughOutline} tooltip="Strikethrough" />
+            </Toolbar.Group>
+            <Toolbar.Group>
+              <Toolbar.Item icon={ListOutline} tooltip="Bullet List" />
+              <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered List" />
+              <Toolbar.Item icon={QuoteOutline} tooltip="Quote" />
+            </Toolbar.Group>
+            <Toolbar.Group>
+              <Toolbar.Item icon={AlignLeftOutline} tooltip="Align Left" />
+              <Toolbar.Item icon={AlignCenterOutline} tooltip="Align Center" />
+              <Toolbar.Item icon={AlignRightOutline} tooltip="Align Right" />
+            </Toolbar.Group>
+            <Toolbar.Group>
+              <Toolbar.Item icon={LinkOutline} tooltip="Link" />
+              <Toolbar.Item icon={CodeOutline} tooltip="Code" />
+            </Toolbar.Group>
+          </Toolbar>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithActiveStates: Story = {
+  render() {
+    return (
+      <div className="p-4">
+        <Toolbar>
+          <Toolbar.Group isFirst>
+            <Toolbar.Item icon={BoldOutline} tooltip="Bold" shortcut={["Cmd", "B"]} isActive />
+            <Toolbar.Item icon={ItalicOutline} tooltip="Italic" shortcut={["Cmd", "I"]} />
+            <Toolbar.Item icon={UnderlineOutline} tooltip="Underline" shortcut={["Cmd", "U"]} isActive />
+          </Toolbar.Group>
+          <Toolbar.Group>
+            <Toolbar.Item icon={ListOutline} tooltip="Bullet List" />
+            <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered List" isActive />
+            <Toolbar.Item icon={QuoteOutline} tooltip="Quote" />
+          </Toolbar.Group>
+          <Toolbar.Group>
+            <Toolbar.Item icon={AlignLeftOutline} tooltip="Align Left" />
+            <Toolbar.Item icon={AlignCenterOutline} tooltip="Align Center" isActive />
+            <Toolbar.Item icon={AlignRightOutline} tooltip="Align Right" />
+          </Toolbar.Group>
+        </Toolbar>
+      </div>
+    );
+  },
+};
+
+export const CommentToolbar: Story = {
+  render() {
+    return (
+      <div className="space-y-4 p-4">
+        <h3 className="text-13 font-medium">Comment Toolbar with Access Control</h3>
+        <div className="rounded-sm border-[0.5px] border-subtle p-1">
+          <Toolbar>
+            {/* Access Specifier */}
+            <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[0.5px] border-subtle p-1">
+              <Toolbar.Item icon={LockOutline} tooltip="Private" isActive />
+              <Toolbar.Item icon={GlobeOutline} tooltip="Public" />
+            </div>
+
+            <div className="flex w-full items-stretch justify-between gap-2 rounded-sm border-[0.5px] border-subtle p-1">
+              <div className="flex items-stretch">
+                <Toolbar.Group isFirst>
+                  <Toolbar.Item icon={BoldOutline} tooltip="Bold" shortcut={["Cmd", "B"]} />
+                  <Toolbar.Item icon={ItalicOutline} tooltip="Italic" shortcut={["Cmd", "I"]} />
+                  <Toolbar.Item icon={CodeOutline} tooltip="Code" shortcut={["Cmd", "`"]} />
+                </Toolbar.Group>
+                <Toolbar.Group>
+                  <Toolbar.Item icon={ListOutline} tooltip="Bullet List" />
+                  <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered List" />
+                </Toolbar.Group>
+              </div>
+              <Toolbar.SubmitButton>Comment</Toolbar.SubmitButton>
+            </div>
+          </Toolbar>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/toolbar/toolbar.tsx b/packages/propel/src/toolbar/toolbar.tsx
new file mode 100644
index 0000000..ca7565c
--- /dev/null
+++ b/packages/propel/src/toolbar/toolbar.tsx
@@ -0,0 +1,180 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import type { LucideIcon } from "lucide-react";
+import type { ISvgIcons } from "../icons";
+import { Tooltip } from "../tooltip";
+import { cn } from "../utils";
+
+export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  className?: string;
+  isFirst?: boolean;
+}
+
+export interface ToolbarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: LucideIcon | React.FC<ISvgIcons>;
+  isActive?: boolean;
+  tooltip?: string;
+  shortcut?: string[];
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface ToolbarSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export interface ToolbarSubmitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  loading?: boolean;
+  variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ToolbarRoot = React.forwardRef(function ToolbarRoot(
+  { className, children, ...props }: ToolbarProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex h-9 w-full items-stretch gap-1.5 overflow-x-scroll bg-surface-2", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+const ToolbarGroup = React.forwardRef(function ToolbarGroup(
+  { className, children, isFirst = false, ...props }: ToolbarGroupProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "flex items-stretch gap-0.5 border-r border-subtle px-2.5",
+        {
+          "pl-0": isFirst,
+        },
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+const ToolbarItem = React.forwardRef(function ToolbarItem(
+  { icon: Icon, isActive = false, tooltip, shortcut, className, children, ...props }: ToolbarItemProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const button = (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(
+        "grid aspect-square place-items-center rounded-xs p-0.5 text-placeholder transition-colors hover:bg-layer-1",
+        {
+          "bg-layer-1 text-primary": isActive,
+        },
+        className
+      )}
+      {...props}
+    >
+      <Icon
+        className={cn("h-3.5 w-3.5", {
+          "text-primary": isActive,
+        })}
+        strokeWidth={2.5}
+      />
+      {children}
+    </button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip
+        tooltipContent={
+          <div className="flex flex-col gap-1 text-center text-11">
+            <span className="font-medium">{tooltip}</span>
+            {shortcut && <kbd className="text-placeholder">{shortcut.join(" + ")}</kbd>}
+          </div>
+        }
+      >
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
+});
+
+const ToolbarSeparator = React.forwardRef(function ToolbarSeparator(
+  { className, ...props }: ToolbarSeparatorProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return <div ref={ref} className={cn("bg-subtle-1 mx-1 h-full w-px", className)} {...props} />;
+});
+
+const buttonVariants = {
+  primary: "bg-accent-primary text-on-color hover:bg-accent-primary/80 focus:bg-accent-primary/80",
+  secondary: "bg-surface-1 text-secondary border border-subtle hover:bg-surface-2 focus:bg-surface-2",
+  outline:
+    "border border-accent-strong text-accent-primary bg-transparent hover:bg-accent-primary/10 focus:bg-accent-primary/20",
+  ghost: "text-secondary hover:bg-surface-2 focus:bg-surface-2",
+  destructive: "bg-danger-primary text-on-color hover:bg-danger-primary-hover focus:bg-danger-primary-selected",
+};
+
+const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(
+  { loading = false, variant = "primary", className, children, disabled, ...props }: ToolbarSubmitButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  return (
+    <div className="sticky right-1">
+      <button
+        ref={ref}
+        className={cn(
+          "inline-flex items-center justify-center gap-2 rounded-md px-2.5 py-1.5 text-11 font-medium transition-colors duration-200",
+          "focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-2 focus:outline-none",
+          "disabled:pointer-events-none disabled:opacity-50",
+          buttonVariants[variant],
+          className
+        )}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && <div className="h-3 w-3 animate-spin rounded-full border border-current border-t-transparent" />}
+        {children}
+      </button>
+    </div>
+  );
+});
+
+ToolbarRoot.displayName = "ToolbarRoot";
+ToolbarGroup.displayName = "ToolbarGroup";
+ToolbarItem.displayName = "ToolbarItem";
+ToolbarSeparator.displayName = "ToolbarSeparator";
+ToolbarSubmitButton.displayName = "ToolbarSubmitButton";
+
+// compound components
+const Toolbar = Object.assign(ToolbarRoot, {
+  Group: ToolbarGroup,
+  Item: ToolbarItem,
+  Separator: ToolbarSeparator,
+  SubmitButton: ToolbarSubmitButton,
+});
+
+export { Toolbar };
diff --git a/packages/propel/src/tooltip/index.ts b/packages/propel/src/tooltip/index.ts
new file mode 100644
index 0000000..d980334
--- /dev/null
+++ b/packages/propel/src/tooltip/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";
diff --git a/packages/propel/src/tooltip/root.tsx b/packages/propel/src/tooltip/root.tsx
new file mode 100644
index 0000000..f55e897
--- /dev/null
+++ b/packages/propel/src/tooltip/root.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
+import { cn } from "../utils";
+import type { TPlacement, TSide, TAlign } from "../utils/placement";
+import { convertPlacementToSideAndAlign } from "../utils/placement";
+
+type ITooltipProps = {
+  tooltipHeading?: string;
+  tooltipContent?: string | React.ReactNode | null;
+  position?: TPlacement;
+  // React 19 defaults ReactElement's props to `unknown`; Base UI's `render` prop
+  // needs a named props shape to accept the element.
+  children: React.ReactElement<Record<string, unknown>>;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+  isMobile?: boolean;
+  renderByDefault?: boolean;
+  side?: TSide;
+  align?: TAlign;
+  sideOffset?: number;
+};
+
+export function Tooltip(props: ITooltipProps) {
+  const {
+    tooltipHeading,
+    tooltipContent,
+    position = "top",
+    children,
+    disabled = false,
+    className = "",
+    openDelay = 200,
+    side = "bottom",
+    align = "center",
+    sideOffset = 10,
+    closeDelay,
+    isMobile = false,
+  } = props;
+  const { finalSide, finalAlign } = React.useMemo(() => {
+    if (position) {
+      const converted = convertPlacementToSideAndAlign(position);
+      return { finalSide: converted.side, finalAlign: converted.align };
+    }
+    return { finalSide: side, finalAlign: align };
+  }, [position, side, align]);
+
+  return (
+    <BaseTooltip.Provider>
+      <BaseTooltip.Root delay={openDelay} closeDelay={closeDelay} disabled={disabled}>
+        <BaseTooltip.Trigger render={children} />
+        <BaseTooltip.Portal>
+          <BaseTooltip.Positioner
+            className={cn(
+              "z-50 max-w-xs gap-1 overflow-hidden rounded-lg border border-subtle-1 bg-layer-2 px-2 py-1.5 break-words shadow-overlay-200",
+              {
+                hidden: isMobile,
+              },
+              className
+            )}
+            side={finalSide}
+            sideOffset={sideOffset}
+            align={finalAlign}
+            render={
+              <BaseTooltip.Popup>
+                {tooltipHeading && <p className="text-caption-md-medium text-primary">{tooltipHeading}</p>}
+                {tooltipContent && (
+                  <p
+                    className={cn("text-caption-sm-regular text-secondary", {
+                      "mt-1": tooltipHeading && tooltipHeading !== "",
+                    })}
+                  >
+                    {tooltipContent}
+                  </p>
+                )}
+              </BaseTooltip.Popup>
+            }
+          />
+        </BaseTooltip.Portal>
+      </BaseTooltip.Root>
+    </BaseTooltip.Provider>
+  );
+}
diff --git a/packages/propel/src/tooltip/tooltip.stories.tsx b/packages/propel/src/tooltip/tooltip.stories.tsx
new file mode 100644
index 0000000..8bb9005
--- /dev/null
+++ b/packages/propel/src/tooltip/tooltip.stories.tsx
@@ -0,0 +1,309 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HelpOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "./root";
+
+const meta = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    tooltipContent: "This is a tooltip",
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Hover me</button>,
+  },
+};
+
+export const WithHeading: Story = {
+  args: {
+    tooltipHeading: "Tooltip Title",
+    tooltipContent: "This is the tooltip content with a heading.",
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Hover me</button>,
+  },
+};
+
+export const PositionTop: Story = {
+  args: {
+    tooltipContent: "Tooltip on top",
+    position: "top",
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Top</button>,
+  },
+};
+
+export const PositionBottom: Story = {
+  args: {
+    tooltipContent: "Tooltip on bottom",
+    position: "bottom",
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Bottom</button>,
+  },
+};
+
+export const PositionLeft: Story = {
+  args: {
+    tooltipContent: "Tooltip on left",
+    position: "left",
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Left</button>,
+  },
+};
+
+export const PositionRight: Story = {
+  args: {
+    tooltipContent: "Tooltip on right",
+    position: "right",
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Right</button>,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    tooltipContent: "Click here for help",
+    children: (
+      <button className="hover:bg-gray-100 rounded-full p-2">
+        <HelpOutline className="text-gray-600 h-5 w-5" />
+      </button>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    tooltipContent: "This tooltip is disabled",
+    disabled: true,
+    children: <button className="bg-gray-400 rounded-sm px-4 py-2 text-on-color">Hover me (disabled)</button>,
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    tooltipHeading: "Important Information",
+    tooltipContent:
+      "This is a longer tooltip with more detailed information that wraps to multiple lines. It provides comprehensive details about the element.",
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Long content</button>,
+  },
+};
+
+export const CustomDelay: Story = {
+  args: {
+    tooltipContent: "This tooltip has a custom delay",
+    openDelay: 1000,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Custom delay (1s)</button>,
+  },
+};
+
+export const CustomOffset: Story = {
+  args: {
+    tooltipContent: "Custom offset tooltip",
+    sideOffset: 20,
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">Custom offset</button>,
+  },
+};
+
+export const AllPositions: Story = {
+  args: {
+    children: <div />,
+  },
+  render() {
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <Tooltip tooltipContent="Top position" position="top">
+          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Top</button>
+        </Tooltip>
+        <div className="flex gap-4">
+          <Tooltip tooltipContent="Left position" position="left">
+            <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Left</button>
+          </Tooltip>
+          <Tooltip tooltipContent="Right position" position="right">
+            <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Right</button>
+          </Tooltip>
+        </div>
+        <Tooltip tooltipContent="Bottom position" position="bottom">
+          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Bottom</button>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const OnText: Story = {
+  args: {
+    children: <div />,
+  },
+  render() {
+    return (
+      <p className="text-gray-700 text-13">
+        This is some text with a{" "}
+        <Tooltip tooltipContent="Additional information about this word" position="top">
+          <span className="border-blue-500 text-blue-500 cursor-help border-b border-dashed">tooltip</span>
+        </Tooltip>{" "}
+        in it.
+      </p>
+    );
+  },
+};
+
+export const OnDisabledButton: Story = {
+  args: {
+    children: <div />,
+  },
+  render() {
+    return (
+      <Tooltip tooltipContent="This feature is currently unavailable" position="top">
+        <button className="bg-gray-300 text-gray-500 cursor-not-allowed rounded-sm px-4 py-2" disabled>
+          Disabled Button
+        </button>
+      </Tooltip>
+    );
+  },
+};
+
+export const ComplexContent: Story = {
+  args: {
+    tooltipHeading: "User Information",
+    tooltipContent: (
+      <div className="space-y-1">
+        <p className="font-semibold">John Doe</p>
+        <p className="text-11">john@example.com</p>
+        <p className="text-gray-400 text-11">Last seen: 2 hours ago</p>
+      </div>
+    ),
+    children: <button className="bg-blue-500 rounded-sm px-4 py-2 text-on-color">View User</button>,
+  },
+};
+
+export const WithCustomStyling: Story = {
+  args: {
+    tooltipContent: "Custom styled tooltip",
+    className: "bg-purple-500 text-on-color",
+    children: <button className="bg-purple-500 rounded-sm px-4 py-2 text-on-color">Custom style</button>,
+  },
+};
+
+export const MultipleTooltips: Story = {
+  args: {
+    children: <div />,
+  },
+  render() {
+    return (
+      <div className="flex gap-4">
+        <Tooltip tooltipContent="Save your work" position="top">
+          <button className="bg-green-500 rounded-sm px-4 py-2 text-13 text-on-color">Save</button>
+        </Tooltip>
+        <Tooltip tooltipContent="Discard changes" position="top">
+          <button className="bg-red-500 rounded-sm px-4 py-2 text-13 text-on-color">Cancel</button>
+        </Tooltip>
+        <Tooltip tooltipContent="Export to PDF" position="top">
+          <button className="bg-blue-500 rounded-sm px-4 py-2 text-13 text-on-color">Export</button>
+        </Tooltip>
+        <Tooltip tooltipContent="Share with team" position="top">
+          <button className="bg-purple-500 rounded-sm px-4 py-2 text-13 text-on-color">Share</button>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const IconButtons: Story = {
+  args: {
+    children: <div />,
+  },
+  render() {
+    return (
+      <div className="flex gap-2">
+        <Tooltip tooltipContent="Edit" position="top">
+          <button className="hover:bg-gray-100 rounded-sm p-2">
+            <svg
+              className="text-gray-600 h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+              />
+            </svg>
+          </button>
+        </Tooltip>
+        <Tooltip tooltipContent="Delete" position="top">
+          <button className="hover:bg-gray-100 rounded-sm p-2">
+            <svg
+              className="h-5 w-5 text-danger-primary"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+              />
+            </svg>
+          </button>
+        </Tooltip>
+        <Tooltip tooltipContent="Share" position="top">
+          <button className="hover:bg-gray-100 rounded-sm p-2">
+            <svg
+              className="text-blue-600 h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+              />
+            </svg>
+          </button>
+        </Tooltip>
+      </div>
+    );
+  },
+};
+
+export const InFormField: Story = {
+  args: {
+    children: <div />,
+  },
+  render() {
+    return (
+      <div className="w-80">
+        <label className="text-gray-700 mb-1 flex items-center gap-2 text-13 font-medium">
+          Email Address
+          <Tooltip
+            tooltipHeading="Email Requirements"
+            tooltipContent="Enter a valid email address that you have access to. We'll send a verification link."
+            position="right"
+          >
+            <HelpOutline className="text-gray-400 h-4 w-4 cursor-help" />
+          </Tooltip>
+        </label>
+        <input
+          type="email"
+          className="border-gray-300 w-full rounded-sm border px-3 py-2 text-13"
+          placeholder="you@example.com"
+        />
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/utils/classname.tsx b/packages/propel/src/utils/classname.tsx
new file mode 100644
index 0000000..6d0ca1c
--- /dev/null
+++ b/packages/propel/src/utils/classname.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { clsx } from "clsx";
+import type { ClassValue } from "clsx";
+
+import { extendTailwindMerge } from "tailwind-merge";
+
+// Support email can be configured by the application
+export const getSupportEmail = (defaultEmail: string = ""): string => defaultEmail;
+
+// Matches custom typography classes: text-h1-semibold, text-body-md-regular, text-caption-xs-medium, etc.
+const isCustomTypography = (value: string) =>
+  !/^(h[1-6]|body-(xs|sm|md)|caption-(xs|sm|md))-(regular|medium|semibold|bold)$/.test(value);
+
+// Matches custom font size classes: text-9, text-10, text-11, text-12, text-13, text-14, text-16, text-18, text-20, text-24, text-28, text-32, text-40
+const isCustomFontSize = (value: string) => /^(9|10|11|12|13|14|16|18|20|24|28|32|40)$/.test(value);
+
+// Matches custom text color classes: text-primary, text-on-color, text-secondary, etc.
+const CUSTOM_TEXT_COLORS = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "placeholder",
+  "disabled",
+  "accent-primary",
+  "accent-secondary",
+  "on-color",
+  "on-color-disabled",
+  "inverse",
+  "success",
+  "success-primary",
+  "success-secondary",
+  "warning",
+  "warning-primary",
+  "warning-secondary",
+  "danger",
+  "danger-primary",
+  "danger-secondary",
+];
+const isCustomTextColor = (value: string) => CUSTOM_TEXT_COLORS.includes(value);
+
+const twMerge = extendTailwindMerge<"custom-typography" | "custom-text-color">({
+  override: {
+    classGroups: {
+      // Override font-size to include custom numeric sizes and exclude custom typography/colors
+      "font-size": [
+        {
+          text: [
+            (value: string) => isCustomFontSize(value) || (!isCustomTypography(value) && !isCustomTextColor(value)),
+          ],
+        },
+      ],
+    },
+  },
+  extend: {
+    classGroups: {
+      // Custom typography in its own group
+      "custom-typography": [{ text: [isCustomTypography] }],
+      // Custom text colors in their own group (won't conflict with font sizes)
+      "custom-text-color": [{ text: [isCustomTextColor] }],
+    },
+  },
+});
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
diff --git a/packages/propel/src/utils/index.ts b/packages/propel/src/utils/index.ts
new file mode 100644
index 0000000..f52eda2
--- /dev/null
+++ b/packages/propel/src/utils/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./classname";
+export * from "./placement";
diff --git a/packages/propel/src/utils/placement.ts b/packages/propel/src/utils/placement.ts
new file mode 100644
index 0000000..eace1b8
--- /dev/null
+++ b/packages/propel/src/utils/placement.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+export type TPlacement =
+  | "auto"
+  | "auto-start"
+  | "auto-end"
+  | "top-start"
+  | "top-end"
+  | "bottom-start"
+  | "bottom-end"
+  | "right-start"
+  | "right-end"
+  | "left-start"
+  | "left-end"
+  | "top"
+  | "bottom"
+  | "right"
+  | "left";
+
+export type TSide = "top" | "bottom" | "left" | "right";
+export type TAlign = "start" | "center" | "end";
+
+// placement conversion map
+const PLACEMENT_MAP = new Map<TPlacement, { side: TSide; align: TAlign }>([
+  ["auto", { side: "bottom", align: "center" }],
+  ["auto-start", { side: "bottom", align: "start" }],
+  ["auto-end", { side: "bottom", align: "end" }],
+  ["top", { side: "top", align: "center" }],
+  ["bottom", { side: "bottom", align: "center" }],
+  ["left", { side: "left", align: "center" }],
+  ["right", { side: "right", align: "center" }],
+  ["top-start", { side: "top", align: "start" }],
+  ["top-end", { side: "top", align: "end" }],
+  ["bottom-start", { side: "bottom", align: "start" }],
+  ["bottom-end", { side: "bottom", align: "end" }],
+  ["left-start", { side: "left", align: "start" }],
+  ["left-end", { side: "left", align: "end" }],
+  ["right-start", { side: "right", align: "start" }],
+  ["right-end", { side: "right", align: "end" }],
+]);
+
+// conversion function
+export function convertPlacementToSideAndAlign(placement: TPlacement): {
+  side: TSide;
+  align: TAlign;
+} {
+  return PLACEMENT_MAP.get(placement) || { side: "bottom", align: "center" };
+}
diff --git a/packages/propel/tsconfig.json b/packages/propel/tsconfig.json
new file mode 100644
index 0000000..9f93e2c
--- /dev/null
+++ b/packages/propel/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "exactOptionalPropertyTypes": false,
+    "noUnusedLocals": false,
+    "noImplicitReturns": false
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
new file mode 100644
index 0000000..5e97cf6
--- /dev/null
+++ b/packages/propel/tsdown.config.ts
@@ -0,0 +1,53 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: [
+    "src/accordion/index.ts",
+    "src/animated-counter/index.ts",
+    "src/avatar/index.ts",
+    "src/badge/index.ts",
+    "src/banner/index.ts",
+    "src/button/index.ts",
+    "src/calendar/index.ts",
+    "src/card/index.ts",
+    "src/charts/*/index.ts",
+    "src/collapsible/index.ts",
+    "src/combobox/index.ts",
+    "src/command/index.ts",
+    "src/context-menu/index.ts",
+    "src/dialog/index.ts",
+    "src/empty-state/index.ts",
+    "src/emoji-icon-picker/index.ts",
+    "src/emoji-reaction/index.ts",
+    "src/emoji-reaction-picker/index.ts",
+    "src/icon-button/index.ts",
+    "src/icons/index.ts",
+    "src/input/index.ts",
+    "src/menu/index.ts",
+    "src/pill/index.ts",
+    "src/popover/index.ts",
+    "src/portal/index.ts",
+    "src/scrollarea/index.ts",
+    "src/skeleton/index.ts",
+    "src/spinners/index.ts",
+    "src/switch/index.ts",
+    "src/table/index.ts",
+    "src/tab-navigation/index.ts",
+    "src/tabs/index.ts",
+    "src/toast/index.ts",
+    "src/toolbar/index.ts",
+    "src/tooltip/index.ts",
+    "src/utils/index.ts",
+  ],
+  format: ["esm"],
+  dts: true,
+  copy: ["src/styles"],
+  exports: {
+    customExports: (exports) => ({
+      ...exports,
+      "./styles/react-day-picker.css": "./dist/styles/react-day-picker.css",
+      "./styles/react-day-picker": "./dist/styles/react-day-picker.css",
+    }),
+  },
+  platform: "neutral",
+});
diff --git a/packages/services/.prettierignore b/packages/services/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/services/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/services/package.json b/packages/services/package.json
new file mode 100644
index 0000000..18d39bf
--- /dev/null
+++ b/packages/services/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@plane/services",
+  "version": "1.4.2",
+  "private": true,
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=6 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "test": "vitest run",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "@plane/constants": "workspace:*",
+    "@plane/types": "workspace:*",
+    "axios": "catalog:",
+    "file-type": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/typescript-config": "workspace:*",
+    "tsdown": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  }
+}
diff --git a/packages/services/src/ai/ai.service.ts b/packages/services/src/ai/ai.service.ts
new file mode 100644
index 0000000..7a34a8c
--- /dev/null
+++ b/packages/services/src/ai/ai.service.ts
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane web constants
+import type { AI_EDITOR_TASKS } from "@plane/constants";
+import { API_BASE_URL } from "@plane/constants";
+// services
+import { APIService } from "../api.service";
+
+/**
+ * Payload type for AI editor tasks
+ * @typedef {Object} TTaskPayload
+ * @property {number} [casual_score] - Optional score for casual tone analysis
+ * @property {number} [formal_score] - Optional score for formal tone analysis
+ * @property {AI_EDITOR_TASKS} task - Type of AI editor task to perform
+ * @property {string} text_input - The input text to be processed
+ */
+export type TTaskPayload = {
+  casual_score?: number;
+  formal_score?: number;
+  task: AI_EDITOR_TASKS;
+  text_input: string;
+};
+
+/**
+ * Service class for handling AI-related API operations
+ * Extends the base APIService class to interact with AI endpoints
+ * @extends {APIService}
+ */
+export class AIService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Creates a GPT-based task for a specific workspace
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {Object} data - The data payload for the GPT task
+   * @param {string} data.prompt - The prompt text for the GPT model
+   * @param {string} data.task - The type of task to be performed
+   * @returns {Promise<any>} The response data from the GPT task
+   * @throws {Error} Throws the response error if the request fails
+   */
+  async prompt(workspaceSlug: string, data: { prompt: string; task: string }): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/ai-assistant/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Performs an editor-specific AI task for text processing
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {TTaskPayload} data - The task payload containing text and processing parameters
+   * @returns {Promise<{response: string}>} The processed text response
+   * @throws {Error} Throws the response data if the request fails
+   */
+  async rephraseGrammar(
+    workspaceSlug: string,
+    data: TTaskPayload
+  ): Promise<{
+    response: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/rephrase-grammar/`, data)
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/ai/index.ts b/packages/services/src/ai/index.ts
new file mode 100644
index 0000000..0b701ad
--- /dev/null
+++ b/packages/services/src/ai/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./ai.service";
diff --git a/packages/services/src/api.service.ts b/packages/services/src/api.service.ts
new file mode 100644
index 0000000..52cfac0
--- /dev/null
+++ b/packages/services/src/api.service.ts
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { AxiosInstance, AxiosRequestConfig } from "axios";
+import { create } from "axios";
+import { normalizeAPIRequestURL } from "./helpers/url";
+
+/**
+ * Abstract base class for making HTTP requests using axios
+ * @abstract
+ */
+export abstract class APIService {
+  protected baseURL: string;
+  private axiosInstance: AxiosInstance;
+
+  /**
+   * Creates an instance of APIService
+   * @param {string} baseURL - The base URL for all HTTP requests
+   */
+  constructor(baseURL: string) {
+    this.baseURL = baseURL;
+    this.axiosInstance = create({
+      baseURL,
+      withCredentials: true,
+    });
+
+    this.axiosInstance.interceptors.request.use((config) => {
+      try {
+        if (config.url) {
+          config.url = normalizeAPIRequestURL(config.url, this.baseURL);
+        }
+      } catch (error) {
+        // Never block a request because of slash normalization — fall back to the
+        // original URL and let the call proceed.
+        console.warn("[APIService] Failed to normalize trailing slash:", config.url, error);
+      }
+      return config;
+    });
+  }
+
+  /**
+   * Makes a GET request to the specified URL
+   * @param {string} url - The endpoint URL
+   * @param {object} [params={}] - URL parameters
+   * @param {AxiosRequestConfig} [config={}] - Additional axios configuration
+   * @returns {Promise} Axios response promise
+   */
+  get(url: string, params = {}, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.get(url, {
+      ...params,
+      ...config,
+    });
+  }
+
+  /**
+   * Makes a POST request to the specified URL
+   * @param {string} url - The endpoint URL
+   * @param {object} [data={}] - Request body data
+   * @param {AxiosRequestConfig} [config={}] - Additional axios configuration
+   * @returns {Promise} Axios response promise
+   */
+  post(url: string, data = {}, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.post(url, data, config);
+  }
+
+  /**
+   * Makes a PUT request to the specified URL
+   * @param {string} url - The endpoint URL
+   * @param {object} [data={}] - Request body data
+   * @param {AxiosRequestConfig} [config={}] - Additional axios configuration
+   * @returns {Promise} Axios response promise
+   */
+  put(url: string, data = {}, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.put(url, data, config);
+  }
+
+  /**
+   * Makes a PATCH request to the specified URL
+   * @param {string} url - The endpoint URL
+   * @param {object} [data={}] - Request body data
+   * @param {AxiosRequestConfig} [config={}] - Additional axios configuration
+   * @returns {Promise} Axios response promise
+   */
+  patch(url: string, data = {}, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.patch(url, data, config);
+  }
+
+  /**
+   * Makes a DELETE request to the specified URL
+   * @param {string} url - The endpoint URL
+   * @param {any} [data] - Request body data
+   * @param {AxiosRequestConfig} [config={}] - Additional axios configuration
+   * @returns {Promise} Axios response promise
+   */
+  delete(url: string, data?: any, config: AxiosRequestConfig = {}) {
+    return this.axiosInstance.delete(url, { data, ...config });
+  }
+
+  /**
+   * Makes a custom request with the provided configuration
+   * @param {object} [config={}] - Axios request configuration
+   * @returns {Promise} Axios response promise
+   */
+  request(config = {}) {
+    return this.axiosInstance(config);
+  }
+}
diff --git a/packages/services/src/auth/auth.service.ts b/packages/services/src/auth/auth.service.ts
new file mode 100644
index 0000000..8b38b5e
--- /dev/null
+++ b/packages/services/src/auth/auth.service.ts
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+// types
+import type { ICsrfTokenData, IEmailCheckData, IEmailCheckResponse } from "@plane/types";
+// services
+import { APIService } from "../api.service";
+
+/**
+ * Service class for handling authentication-related operations
+ * Provides methods for user authentication, password management, and session handling
+ * @extends {APIService}
+ */
+export class AuthService extends APIService {
+  /**
+   * Creates an instance of AuthService
+   * Initializes with the base API URL
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Requests a CSRF token for form submission security
+   * @returns {Promise<ICsrfTokenData>} Object containing the CSRF token
+   * @throws {Error} Throws the complete error object if the request fails
+   * @remarks This method uses the validateStatus: null option to bypass interceptors for unauthorized errors.
+   */
+  async requestCSRFToken(): Promise<ICsrfTokenData> {
+    return this.get("/auth/get-csrf-token/", { validateStatus: null })
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  /**
+   * Checks if an email exists in the system
+   * @param {IEmailCheckData} data - Email data to verify
+   * @returns {Promise<IEmailCheckResponse>} Response indicating email status
+   * @throws {Error} Throws response data if the request fails
+   */
+  async emailCheck(data: IEmailCheckData): Promise<IEmailCheckResponse> {
+    return this.post("/auth/email-check/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Sends a password reset link to the specified email address
+   * @param {{ email: string }} data - Object containing the email address
+   * @returns {Promise<any>} Response from the password reset request
+   * @throws {Error} Throws response object if the request fails
+   */
+  async sendResetPasswordLink(data: { email: string }): Promise<any> {
+    return this.post(`/auth/forgot-password/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Sets a new password using a reset token
+   * @param {string} token - CSRF token for form submission security
+   * @param {{ password: string }} data - Object containing the new password
+   * @returns {Promise<any>} Response from the password update request
+   * @throws {Error} Throws response data if the request fails
+   */
+  async setPassword(token: string, data: { password: string }): Promise<any> {
+    return this.post(`/auth/set-password/`, data, {
+      headers: {
+        "X-CSRFTOKEN": token,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Generates a unique code for magic link authentication
+   * @param {{ email: string }} data - Object containing the email address
+   * @returns {Promise<any>} Response containing the generated unique code
+   * @throws {Error} Throws response data if the request fails
+   */
+  async generateUniqueCode(data: { email: string }): Promise<any> {
+    return this.post("/auth/magic-generate/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Performs user sign out by submitting a form with CSRF token
+   * Creates and submits a form dynamically to handle the sign-out process
+   * @param {string} baseUrl - Base URL for the sign-out endpoint
+   * @returns {Promise<any>} Resolves when sign-out is complete
+   * @throws {Error} Throws error if CSRF token is not found
+   */
+  async signOut(baseUrl: string): Promise<any> {
+    await this.requestCSRFToken().then((data) => {
+      const csrfToken = data?.csrf_token;
+
+      if (!csrfToken) throw Error("CSRF token not found");
+
+      const form = document.createElement("form");
+      const element1 = document.createElement("input");
+
+      form.method = "POST";
+      form.action = `${baseUrl}/auth/sign-out/`;
+
+      element1.value = csrfToken;
+      element1.name = "csrfmiddlewaretoken";
+      element1.type = "hidden";
+      form.appendChild(element1);
+
+      document.body.appendChild(form);
+
+      form.submit();
+    });
+  }
+}
diff --git a/packages/services/src/auth/index.ts b/packages/services/src/auth/index.ts
new file mode 100644
index 0000000..032df61
--- /dev/null
+++ b/packages/services/src/auth/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./auth.service";
+export * from "./sites-auth.service";
diff --git a/packages/services/src/auth/sites-auth.service.ts b/packages/services/src/auth/sites-auth.service.ts
new file mode 100644
index 0000000..a23ea57
--- /dev/null
+++ b/packages/services/src/auth/sites-auth.service.ts
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+// types
+import type { IEmailCheckData, IEmailCheckResponse } from "@plane/types";
+// services
+import { APIService } from "../api.service";
+
+/**
+ * Service class for handling authentication-related operations for Plane space application
+ * Provides methods for user authentication, password management, and session handling
+ * @extends {APIService}
+ * @remarks This service is only available for plane sites
+ */
+export class SitesAuthService extends APIService {
+  /**
+   * Creates an instance of SitesAuthService
+   * Initializes with the base API URL
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Checks if an email exists in the system
+   * @param {IEmailCheckData} data - Email data to verify
+   * @returns {Promise<IEmailCheckResponse>} Response indicating email status
+   * @throws {Error} Throws response data if the request fails
+   */
+  async emailCheck(data: IEmailCheckData): Promise<IEmailCheckResponse> {
+    return this.post("/auth/spaces/email-check/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Generates a unique code for magic link authentication
+   * @param {{ email: string }} data - Object containing the email address
+   * @returns {Promise<any>} Response containing the generated unique code
+   * @throws {Error} Throws response data if the request fails
+   */
+  async generateUniqueCode(data: { email: string }): Promise<any> {
+    return this.post("/auth/spaces/magic-generate/", data, { headers: {} })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/cycle/cycle-analytics.service.ts b/packages/services/src/cycle/cycle-analytics.service.ts
new file mode 100644
index 0000000..0e9c464
--- /dev/null
+++ b/packages/services/src/cycle/cycle-analytics.service.ts
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { TCycleDistribution, TProgressSnapshot, TCycleEstimateDistribution } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing cycles within a workspace and project context.
+ * Extends APIService to handle HTTP requests to the cycle-related endpoints.
+ * @extends {APIService}
+ */
+export class CycleAnalyticsService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves analytics for active cycles in a workspace.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {string} cycleId - The cycle identifier
+   * @param {string} [analytic_type="points"] - The type of analytics to retrieve
+   * @returns {Promise<TCycleDistribution | TCycleEstimateDistribution>} The cycle analytics data
+   * @throws {Error} If the request fails
+   */
+  async workspaceActiveCyclesAnalytics(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    analytic_type: string = "points"
+  ): Promise<TCycleDistribution | TCycleEstimateDistribution> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/analytics?type=${analytic_type}`
+    )
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves progress data for active cycles.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {string} cycleId - The cycle identifier
+   * @returns {Promise<TProgressSnapshot>} The cycle progress data
+   * @throws {Error} If the request fails
+   */
+  async workspaceActiveCyclesProgress(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<TProgressSnapshot> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/progress/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves advanced progress data for active cycles (Pro feature).
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {string} cycleId - The cycle identifier
+   * @returns {Promise<TProgressSnapshot>} The detailed cycle progress data
+   * @throws {Error} If the request fails
+   */
+  async workspaceActiveCyclesProgressPro(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<TProgressSnapshot> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-progress/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/cycle/cycle-archive.service.ts b/packages/services/src/cycle/cycle-archive.service.ts
new file mode 100644
index 0000000..fc005fb
--- /dev/null
+++ b/packages/services/src/cycle/cycle-archive.service.ts
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { ICycle } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing archived cycles in a project
+ * Provides methods for retrieving, archiving, and restoring project cycles
+ * @extends {APIService}
+ */
+export class CycleArchiveService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves all archived cycles for a specific project
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} projectId - The unique identifier for the project
+   * @returns {Promise<ICycle[]>} Array of archived cycles
+   * @throws {Error} Throws response data if the request fails
+   */
+  async list(workspaceSlug: string, projectId: string): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-cycles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves details of a specific archived cycle
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} projectId - The unique identifier for the project
+   * @param {string} cycleId - The unique identifier for the cycle
+   * @returns {Promise<ICycle>} Details of the archived cycle
+   * @throws {Error} Throws response data if the request fails
+   */
+  async retrieve(workspaceSlug: string, projectId: string, cycleId: string): Promise<ICycle> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-cycles/${cycleId}/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  /**
+   * Archives a specific cycle in a project
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} projectId - The unique identifier for the project
+   * @param {string} cycleId - The unique identifier for the cycle to archive
+   * @returns {Promise<{archived_at: string}>} Object containing the archive timestamp
+   * @throws {Error} Throws response data if the request fails
+   */
+  async archive(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string
+  ): Promise<{
+    archived_at: string;
+  }> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Restores a previously archived cycle
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} projectId - The unique identifier for the project
+   * @param {string} cycleId - The unique identifier for the cycle to restore
+   * @returns {Promise<void>} Resolves when the cycle is successfully restored
+   * @throws {Error} Throws response data if the request fails
+   */
+  async restore(workspaceSlug: string, projectId: string, cycleId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/cycle/cycle-operations.service.ts b/packages/services/src/cycle/cycle-operations.service.ts
new file mode 100644
index 0000000..77a8643
--- /dev/null
+++ b/packages/services/src/cycle/cycle-operations.service.ts
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import { APIService } from "../api.service";
+
+export class CycleOperationsService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Adds a cycle to user favorites.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {{cycle: string}} data - The favorite cycle data
+   * @returns {Promise<any>} The response data
+   * @throws {Error} If the request fails
+   */
+  async addToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      cycle: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Removes a cycle from user favorites.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {string} cycleId - The cycle identifier
+   * @returns {Promise<any>} The removal response
+   * @throws {Error} If the request fails
+   */
+  async removeFromFavorites(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/${cycleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Transfers issues between cycles.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {string} cycleId - The source cycle identifier
+   * @param {{new_cycle_id: string}} data - The target cycle data
+   * @returns {Promise<any>} The transfer response
+   * @throws {Error} If the request fails
+   */
+  async transferIssues(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: {
+      new_cycle_id: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/transfer-issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/cycle/cycle.service.ts b/packages/services/src/cycle/cycle.service.ts
new file mode 100644
index 0000000..8dadeed
--- /dev/null
+++ b/packages/services/src/cycle/cycle.service.ts
@@ -0,0 +1,190 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { CycleDateCheckData, ICycle, TIssuesResponse, IWorkspaceActiveCyclesResponse } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing cycles within a workspace and project context.
+ * Extends APIService to handle HTTP requests to the cycle-related endpoints.
+ * @extends {APIService}
+ */
+export class CycleService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves paginated list of active cycles in a workspace.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} cursor - The pagination cursor
+   * @param {number} per_page - Number of items per page
+   * @returns {Promise<IWorkspaceActiveCyclesResponse>} Paginated active cycles data
+   * @throws {Error} If the request fails
+   */
+  async workspaceActiveCycles(
+    workspaceSlug: string,
+    cursor: string,
+    per_page: number
+  ): Promise<IWorkspaceActiveCyclesResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/active-cycles/`, {
+      params: {
+        per_page,
+        cursor,
+      },
+    })
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  /**
+   * Gets all cycles in a workspace.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @returns {Promise<ICycle[]>} Array of cycle objects
+   * @throws {Error} If the request fails
+   */
+  async getWorkspaceCycles(workspaceSlug: string): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/cycles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Creates a new cycle in a project.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {any} data - The cycle creation data
+   * @returns {Promise<ICycle>} The created cycle object
+   * @throws {Error} If the request fails
+   */
+  async create(workspaceSlug: string, projectId: string, data: any): Promise<ICycle> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves cycles with optional filtering parameters.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {"current"} [cycleType] - Optional filter for cycle type
+   * @returns {Promise<ICycle[]>} Array of filtered cycle objects
+   * @throws {Error} If the request fails
+   */
+  async getWithParams(workspaceSlug: string, projectId: string, cycleType?: "current"): Promise<ICycle[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, {
+      params: {
+        cycle_view: cycleType,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves detailed information for a specific cycle.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {string} cycleId - The cycle identifier
+   * @returns {Promise<ICycle>} The cycle details
+   * @throws {Error} If the request fails
+   */
+  async retrieve(workspaceSlug: string, projectId: string, cycleId: string): Promise<ICycle> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((res) => res?.data)
+      .catch((err) => {
+        throw err?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves issues associated with a specific cycle.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {string} cycleId - The cycle identifier
+   * @param {any} [queries] - Optional query parameters
+   * @param {object} [config={}] - Optional request configuration
+   * @returns {Promise<TIssuesResponse>} The cycle issues data
+   * @throws {Error} If the request fails
+   */
+  async getCycleIssues(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    queries?: any,
+    config = {}
+  ): Promise<TIssuesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
+      {
+        params: queries,
+      },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Updates a cycle with partial data.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {string} cycleId - The cycle identifier
+   * @param {Partial<ICycle>} data - The partial cycle data to update
+   * @returns {Promise<any>} The update response
+   * @throws {Error} If the request fails
+   */
+  async update(workspaceSlug: string, projectId: string, cycleId: string, data: Partial<ICycle>): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Deletes a specific cycle.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {string} cycleId - The cycle identifier
+   * @returns {Promise<any>} The deletion response
+   * @throws {Error} If the request fails
+   */
+  async destroy(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Validates cycle dates.
+   * @param {string} workspaceSlug - The workspace identifier
+   * @param {string} projectId - The project identifier
+   * @param {CycleDateCheckData} data - The date check data
+   * @returns {Promise<any>} The validation response
+   * @throws {Error} If the request fails
+   */
+  async validateDates(workspaceSlug: string, projectId: string, data: CycleDateCheckData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/date-check/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/cycle/index.ts b/packages/services/src/cycle/index.ts
new file mode 100644
index 0000000..d53702a
--- /dev/null
+++ b/packages/services/src/cycle/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./cycle-analytics.service";
+export * from "./cycle-archive.service";
+export * from "./cycle-operations.service";
+export * from "./cycle.service";
+export * from "./sites-cycle.service";
diff --git a/packages/services/src/cycle/sites-cycle.service.ts b/packages/services/src/cycle/sites-cycle.service.ts
new file mode 100644
index 0000000..4a90173
--- /dev/null
+++ b/packages/services/src/cycle/sites-cycle.service.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type { TPublicCycle } from "@plane/types";
+// api service
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing cycles within plane sites application.
+ * Extends APIService to handle HTTP requests to the cycle-related endpoints.
+ * @extends {APIService}
+ * @remarks This service is only available for plane sites
+ */
+export class SitesCycleService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves list of cycles for a specific anchor.
+   * @param anchor - The anchor identifier for the published entity
+   * @returns {Promise<TPublicCycle[]>} The list of cycles
+   * @throws {Error} If the request fails
+   */
+  async list(anchor: string): Promise<TPublicCycle[]> {
+    return this.get(`/api/public/anchor/${anchor}/cycles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/dashboard/dashboard.service.ts b/packages/services/src/dashboard/dashboard.service.ts
new file mode 100644
index 0000000..9b987e9
--- /dev/null
+++ b/packages/services/src/dashboard/dashboard.service.ts
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { THomeDashboardResponse, TWidget, TWidgetStatsResponse, TWidgetStatsRequestParams } from "@plane/types";
+import { APIService } from "../api.service";
+
+export default class DashboardService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves home dashboard widgets for a specific workspace
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @returns {Promise<THomeDashboardResponse>} Promise resolving to dashboard widget data
+   * @throws {Error} If the API request fails
+   */
+  async getHomeWidgets(workspaceSlug: string): Promise<THomeDashboardResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/dashboard/`, {
+      params: {
+        dashboard_type: "home",
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Fetches statistics for a specific dashboard widget
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} dashboardId - The unique identifier for the dashboard
+   * @param {TWidgetStatsRequestParams} params - Parameters for filtering widget statistics
+   * @returns {Promise<TWidgetStatsResponse>} Promise resolving to widget statistics data
+   * @throws {Error} If the API request fails
+   */
+  async getWidgetStats(
+    workspaceSlug: string,
+    dashboardId: string,
+    params: TWidgetStatsRequestParams
+  ): Promise<TWidgetStatsResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/dashboard/${dashboardId}/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves detailed information about a specific dashboard
+   * @param {string} dashboardId - The unique identifier for the dashboard
+   * @returns {Promise<TWidgetStatsResponse>} Promise resolving to dashboard details
+   * @throws {Error} If the API request fails
+   */
+  async retrieve(dashboardId: string): Promise<TWidgetStatsResponse> {
+    return this.get(`/api/dashboard/${dashboardId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Updates a specific widget within a dashboard
+   * @param {string} dashboardId - The unique identifier for the dashboard
+   * @param {string} widgetId - The unique identifier for the widget
+   * @param {Partial<TWidget>} data - Partial widget data to update
+   * @returns {Promise<TWidget>} Promise resolving to the updated widget data
+   * @throws {Error} If the API request fails
+   */
+  async updateWidget(dashboardId: string, widgetId: string, data: Partial<TWidget>): Promise<TWidget> {
+    return this.patch(`/api/dashboard/${dashboardId}/widgets/${widgetId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export { DashboardService };
diff --git a/packages/services/src/dashboard/index.ts b/packages/services/src/dashboard/index.ts
new file mode 100644
index 0000000..52a2e86
--- /dev/null
+++ b/packages/services/src/dashboard/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./dashboard.service";
diff --git a/packages/services/src/developer/api-token.service.ts b/packages/services/src/developer/api-token.service.ts
new file mode 100644
index 0000000..b318053
--- /dev/null
+++ b/packages/services/src/developer/api-token.service.ts
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IApiToken } from "@plane/types";
+import { APIService } from "../api.service";
+
+export class APITokenService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves all API tokens for a specific workspace
+   * @returns {Promise<IApiToken[]>} Array of API tokens associated with the workspace
+   * @throws {Error} Throws response data if the request fails
+   */
+  async list(): Promise<IApiToken[]> {
+    return this.get(`/api/users/api-tokens/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves a specific API token by its ID
+   * @param {string} tokenId - The unique identifier of the API token
+   * @returns {Promise<IApiToken>} The requested API token's details
+   * @throws {Error} Throws response data if the request fails
+   */
+  async retrieve(tokenId: string): Promise<IApiToken> {
+    return this.get(`/api/users/api-tokens/${tokenId}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Creates a new API token for a workspace
+   * @param {Partial<IApiToken>} data - The data for creating the new API token
+   * @returns {Promise<IApiToken>} The newly created API token
+   * @throws {Error} Throws response data if the request fails
+   */
+  async create(data: Partial<IApiToken>): Promise<IApiToken> {
+    return this.post(`/api/users/api-tokens/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Deletes a specific API token from the workspace
+   * @param {string} tokenId - The unique identifier of the API token to delete
+   * @returns {Promise<IApiToken>} The deleted API token's details
+   * @throws {Error} Throws response data if the request fails
+   */
+  async destroy(tokenId: string): Promise<IApiToken> {
+    return this.delete(`/api/users/api-tokens/${tokenId}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/developer/index.ts b/packages/services/src/developer/index.ts
new file mode 100644
index 0000000..b276171
--- /dev/null
+++ b/packages/services/src/developer/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./api-token.service";
+export * from "./webhook.service";
diff --git a/packages/services/src/developer/webhook.service.ts b/packages/services/src/developer/webhook.service.ts
new file mode 100644
index 0000000..7ae3436
--- /dev/null
+++ b/packages/services/src/developer/webhook.service.ts
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IWebhook } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing webhooks
+ * Handles CRUD operations for webhooks and secret key management
+ * @extends {APIService}
+ */
+export default class WebhookService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves all webhooks for a workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @returns {Promise<IWebhook[]>} Promise resolving to array of webhooks
+   * @throws {Error} If the API request fails
+   */
+  async list(workspaceSlug: string): Promise<IWebhook[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/webhooks/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves details of a specific webhook
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} webhookId - The unique identifier for the webhook
+   * @returns {Promise<IWebhook>} Promise resolving to webhook details
+   * @throws {Error} If the API request fails
+   */
+  async retrieve(workspaceSlug: string, webhookId: string): Promise<IWebhook> {
+    return this.get(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Creates a new webhook in the workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {Object} [data={}] - Webhook configuration data
+   * @returns {Promise<IWebhook>} Promise resolving to the created webhook
+   * @throws {Error} If the API request fails
+   */
+  async create(workspaceSlug: string, data = {}): Promise<IWebhook> {
+    return this.post(`/api/workspaces/${workspaceSlug}/webhooks/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Updates an existing webhook
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} webhookId - The unique identifier for the webhook
+   * @param {Object} [data={}] - Updated webhook configuration data
+   * @returns {Promise<IWebhook>} Promise resolving to the updated webhook
+   * @throws {Error} If the API request fails
+   */
+  async update(workspaceSlug: string, webhookId: string, data = {}): Promise<IWebhook> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Deletes a webhook from the workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} webhookId - The unique identifier for the webhook
+   * @returns {Promise<void>} Promise resolving when webhook is deleted
+   * @throws {Error} If the API request fails
+   */
+  async destroy(workspaceSlug: string, webhookId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Regenerates the secret key for a webhook
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} webhookId - The unique identifier for the webhook
+   * @returns {Promise<IWebhook>} Promise resolving to the webhook with new secret key
+   * @throws {Error} If the API request fails
+   */
+  async regenerateSecretKey(workspaceSlug: string, webhookId: string): Promise<IWebhook> {
+    return this.post(`/api/workspaces/${workspaceSlug}/webhooks/${webhookId}/regenerate/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export { WebhookService };
diff --git a/packages/services/src/file/file-upload.service.ts b/packages/services/src/file/file-upload.service.ts
new file mode 100644
index 0000000..32ca4de
--- /dev/null
+++ b/packages/services/src/file/file-upload.service.ts
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import axios from "axios";
+// api service
+import { APIService } from "../api.service";
+
+/**
+ * Service class for handling file upload operations
+ * Handles file uploads
+ * @extends {APIService}
+ */
+export class FileUploadService extends APIService {
+  private cancelSource: any;
+
+  constructor() {
+    super("");
+  }
+
+  /**
+   * Uploads a file to the specified signed URL
+   * @param {string} url - The URL to upload the file to
+   * @param {FormData} data - The form data to upload
+   * @returns {Promise<void>} Promise resolving to void
+   * @throws {Error} If the request fails
+   */
+  async uploadFile(url: string, data: FormData): Promise<void> {
+    this.cancelSource = axios.CancelToken.source();
+    return this.post(url, data, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      cancelToken: this.cancelSource.token,
+      withCredentials: false,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        if (axios.isCancel(error)) {
+          console.log(error.message);
+        } else {
+          throw error?.response?.data;
+        }
+      });
+  }
+
+  /**
+   * Cancels the upload
+   */
+  cancelUpload() {
+    this.cancelSource.cancel("Upload canceled");
+  }
+}
diff --git a/packages/services/src/file/file.service.ts b/packages/services/src/file/file.service.ts
new file mode 100644
index 0000000..725bc89
--- /dev/null
+++ b/packages/services/src/file/file.service.ts
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+// api service
+import type { TDuplicateAssetData, TDuplicateAssetResponse } from "@plane/types";
+import { APIService } from "../api.service";
+// helpers
+import { getAssetIdFromUrl } from "./helper";
+
+/**
+ * Service class for managing file operations within plane applications.
+ * Extends APIService to handle HTTP requests to the file-related endpoints.
+ * @extends {APIService}
+ */
+export class FileService extends APIService {
+  /**
+   * Creates an instance of FileService
+   * @param {string} BASE_URL - The base URL for API requests
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Deletes a new asset
+   * @param {string} assetPath - The asset path
+   * @returns {Promise<void>} Promise resolving to void
+   * @throws {Error} If the request fails
+   */
+  async deleteNewAsset(assetPath: string): Promise<void> {
+    return this.delete(assetPath)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Deletes an old editor asset
+   * @param {string} workspaceId - The workspace identifier
+   * @param {string} src - The asset source
+   * @returns {Promise<any>} Promise resolving to void
+   * @throws {Error} If the request fails
+   */
+  async deleteOldEditorAsset(workspaceId: string, src: string): Promise<any> {
+    const assetKey = getAssetIdFromUrl(src);
+    return this.delete(`/api/workspaces/file-assets/${workspaceId}/${assetKey}/`)
+      .then((response) => response?.status)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Restores an old editor asset
+   * @param {string} workspaceId - The workspace identifier
+   * @param {string} src - The asset source
+   * @returns {Promise<void>} Promise resolving to void
+   * @throws {Error} If the request fails
+   */
+  async restoreOldEditorAsset(workspaceId: string, src: string): Promise<void> {
+    const assetKey = getAssetIdFromUrl(src);
+    return this.post(`/api/workspaces/file-assets/${workspaceId}/${assetKey}/restore/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Duplicates assets
+   * @param {string} workspaceSlug - The workspace slug
+   * @param {TDuplicateAssetData} data - The data for the duplicate assets
+   * @returns {Promise<TDuplicateAssetResponse>} Promise resolving to a record of asset IDs
+   * @throws {Error} If the request fails
+   */
+  async duplicateAssets(workspaceSlug: string, data: TDuplicateAssetData): Promise<TDuplicateAssetResponse> {
+    return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/duplicate-assets/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/file/helper.ts b/packages/services/src/file/helper.ts
new file mode 100644
index 0000000..b8e9628
--- /dev/null
+++ b/packages/services/src/file/helper.ts
@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// external imports
+import { fileTypeFromBuffer } from "file-type";
+// plane imports
+import type { TFileMetaDataLite, TFileSignedURLResponse } from "@plane/types";
+import { DANGEROUS_EXTENSIONS } from "@plane/constants";
+
+/**
+ * @description Filename validation - checks for double extensions and dangerous patterns
+ * @param {string} filename
+ * @returns {string | null} Error message if invalid, null if valid
+ */
+const validateFilename = (filename: string): string | null => {
+  if (!filename || filename.trim().length === 0) {
+    return "Filename cannot be empty";
+  }
+
+  // Check for dot files (e.g., .htaccess, .env)
+  if (filename.startsWith(".")) {
+    return "Hidden files (starting with dot) are not allowed";
+  }
+
+  // Check for path separators
+  if (filename.includes("/") || filename.includes("\\")) {
+    return "Filename cannot contain path separators";
+  }
+
+  const parts = filename.split(".");
+
+  // Check for double extensions with dangerous patterns
+  if (parts.length >= 3) {
+    const secondLastExt = parts[parts.length - 2]?.toLowerCase() || "";
+    if (DANGEROUS_EXTENSIONS.includes(secondLastExt)) {
+      return "File has suspicious double extension";
+    }
+  }
+
+  // Check if the actual extension is dangerous
+  const extension = parts[parts.length - 1]?.toLowerCase() || "";
+  if (DANGEROUS_EXTENSIONS.includes(extension)) {
+    return `File extension '${extension}' is not allowed`;
+  }
+
+  return null;
+};
+
+/**
+ * @description from the provided signed URL response, generate a payload to be used to upload the file
+ * @param {TFileSignedURLResponse} signedURLResponse
+ * @param {File} file
+ * @returns {FormData} file upload request payload
+ */
+export const generateFileUploadPayload = (signedURLResponse: TFileSignedURLResponse, file: File): FormData => {
+  const formData = new FormData();
+  Object.entries(signedURLResponse.upload_data.fields).forEach(([key, value]) => formData.append(key, value));
+  formData.append("file", file);
+  return formData;
+};
+
+/**
+ * @description Detect MIME type from file signature using file-type library
+ * @param {File} file
+ * @returns {Promise<string>} detected MIME type or empty string if unknown
+ */
+const detectMimeTypeFromSignature = async (file: File): Promise<string> => {
+  try {
+    // Read first 4KB which is usually sufficient for most file type detection
+    const chunk = file.slice(0, 4096);
+    const buffer = await chunk.arrayBuffer();
+    const uint8Array = new Uint8Array(buffer);
+
+    const fileType = await fileTypeFromBuffer(uint8Array);
+    return fileType?.mime || "";
+  } catch (_error) {
+    return "";
+  }
+};
+
+/**
+ * @description Validate and detect the MIME type of a file using signature detection
+ * Also performs basic security checks on filename
+ * @param {File} file
+ * @returns {Promise<string>} validated and detected MIME type
+ */
+const validateAndDetectFileType = async (file: File): Promise<string> => {
+  // Basic filename validation
+  const filenameError = validateFilename(file.name);
+  if (filenameError) {
+    console.warn(`File validation warning: ${filenameError}`);
+  }
+
+  try {
+    const signatureType = await detectMimeTypeFromSignature(file);
+    if (signatureType) {
+      return signatureType;
+    }
+  } catch (_error) {
+    console.warn("Error detecting file type from signature:", _error);
+  }
+
+  // fallback for unknown files
+  return "";
+};
+
+/**
+ * @description returns the necessary file meta data to upload a file
+ * @param {File} file
+ * @returns {Promise<TFileMetaDataLite>} payload with file info
+ */
+export const getFileMetaDataForUpload = async (file: File): Promise<TFileMetaDataLite> => {
+  const fileType = await validateAndDetectFileType(file);
+  return {
+    name: file.name,
+    size: file.size,
+    type: fileType,
+  };
+};
+
+/**
+ * @description this function returns the assetId from the asset source
+ * @param {string} src
+ * @returns {string} assetId
+ */
+export const getAssetIdFromUrl = (src: string): string => {
+  const sourcePaths = src.split("/");
+  const assetUrl = sourcePaths[sourcePaths.length - 1];
+  return assetUrl ?? "";
+};
diff --git a/packages/services/src/file/index.ts b/packages/services/src/file/index.ts
new file mode 100644
index 0000000..e09f8e0
--- /dev/null
+++ b/packages/services/src/file/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./file-upload.service";
+export * from "./sites-file.service";
+export * from "./file.service";
+export * from "./helper";
diff --git a/packages/services/src/file/sites-file.service.ts b/packages/services/src/file/sites-file.service.ts
new file mode 100644
index 0000000..debe945
--- /dev/null
+++ b/packages/services/src/file/sites-file.service.ts
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+// local services
+import type { TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
+import { FileUploadService } from "./file-upload.service";
+// helpers
+import { FileService } from "./file.service";
+import { generateFileUploadPayload, getAssetIdFromUrl, getFileMetaDataForUpload } from "./helper";
+
+/**
+ * Service class for managing file operations within plane sites application.
+ * Extends FileService to manage file-related operations.
+ * @extends {FileService}
+ * @remarks This service is only available for plane sites
+ */
+export class SitesFileService extends FileService {
+  private cancelSource: any;
+  fileUploadService: FileUploadService;
+
+  /**
+   * Creates an instance of SitesFileService
+   * @param {string} BASE_URL - The base URL for API requests
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+    this.cancelUpload = this.cancelUpload.bind(this);
+    // services
+    this.fileUploadService = new FileUploadService();
+  }
+
+  /**
+   * Updates the upload status of an asset
+   * @param {string} anchor - The anchor identifier
+   * @param {string} assetId - The asset identifier
+   * @returns {Promise<void>} Promise resolving to void
+   * @throws {Error} If the request fails
+   */
+  private async updateAssetUploadStatus(anchor: string, assetId: string): Promise<void> {
+    return this.patch(`/api/public/assets/v2/anchor/${anchor}/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Updates the upload status of multiple assets
+   * @param {string} anchor - The anchor identifier
+   * @param {string} entityId - The entity identifier
+   * @param {Object} data - The data payload
+   * @returns {Promise<void>} Promise resolving to void
+   * @throws {Error} If the request fails
+   */
+  async updateBulkAssetsUploadStatus(
+    anchor: string,
+    entityId: string,
+    data: {
+      asset_ids: string[];
+    }
+  ): Promise<void> {
+    return this.post(`/api/public/assets/v2/anchor/${anchor}/${entityId}/bulk/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Uploads a file to the specified anchor
+   * @param {string} anchor - The anchor identifier
+   * @param {TFileEntityInfo} data - The data payload
+   * @param {File} file - The file to upload
+   * @returns {Promise<TFileSignedURLResponse>} Promise resolving to the signed URL response
+   * @throws {Error} If the request fails
+   */
+  async uploadAsset(anchor: string, data: TFileEntityInfo, file: File): Promise<TFileSignedURLResponse> {
+    const fileMetaData = await getFileMetaDataForUpload(file);
+    return this.post(`/api/public/assets/v2/anchor/${anchor}/`, {
+      ...data,
+      ...fileMetaData,
+    })
+      .then(async (response) => {
+        const signedURLResponse: TFileSignedURLResponse = response?.data;
+        const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
+        await this.fileUploadService.uploadFile(signedURLResponse.upload_data.url, fileUploadPayload);
+        await this.updateAssetUploadStatus(anchor, signedURLResponse.asset_id);
+        return signedURLResponse;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Restores a new asset
+   * @param {string} workspaceSlug - The workspace slug
+   * @param {string} src - The asset source
+   * @returns {Promise<void>} Promise resolving to void
+   * @throws {Error} If the request fails
+   */
+  async restoreNewAsset(anchor: string, src: string): Promise<void> {
+    // remove the last slash and get the asset id
+    const assetId = getAssetIdFromUrl(src);
+    return this.post(`/api/public/assets/v2/anchor/${anchor}/restore/${assetId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Cancels the upload
+   */
+  cancelUpload() {
+    this.cancelSource.cancelUpload();
+  }
+}
diff --git a/packages/services/src/helpers/index.ts b/packages/services/src/helpers/index.ts
new file mode 100644
index 0000000..a7f624d
--- /dev/null
+++ b/packages/services/src/helpers/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./url";
diff --git a/packages/services/src/helpers/url.test.ts b/packages/services/src/helpers/url.test.ts
new file mode 100644
index 0000000..5d354f1
--- /dev/null
+++ b/packages/services/src/helpers/url.test.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { describe, expect, it } from "vitest";
+import { ensureAPITrailingSlash, normalizeAPIRequestURL } from "./url";
+
+describe("ensureAPITrailingSlash", () => {
+  it.each([
+    ["/api/foo", "/api/foo/"],
+    ["/api/foo/", "/api/foo/"],
+    ["/api/foo?x=1", "/api/foo/?x=1"],
+    ["/api/foo#frag", "/api/foo/#frag"],
+    ["", ""],
+    ["/", "/"],
+    ["/api/foo/?x=1", "/api/foo/?x=1"],
+    ["https://h/api/foo", "https://h/api/foo/"],
+  ])("turns %j into %j", (input, expected) => {
+    expect(ensureAPITrailingSlash(input)).toBe(expected);
+  });
+});
+
+describe("normalizeAPIRequestURL", () => {
+  it("leaves signed upload URLs unchanged when baseURL is empty", () => {
+    const signedUrl = "https://bucket.s3.amazonaws.com/path?X-Amz-Signature=abc";
+    expect(normalizeAPIRequestURL(signedUrl, "")).toBe(signedUrl);
+  });
+
+  it("leaves signed upload URLs unchanged when origin is not the API baseURL", () => {
+    const signedUrl = "https://bucket.s3.amazonaws.com/path?X-Amz-Signature=abc";
+    expect(normalizeAPIRequestURL(signedUrl, "https://api.plane.so")).toBe(signedUrl);
+  });
+
+  it("leaves already-slashed relative Django paths unchanged", () => {
+    expect(normalizeAPIRequestURL("/api/assets/v2/workspaces/acme/", "https://api.plane.so")).toBe(
+      "/api/assets/v2/workspaces/acme/"
+    );
+  });
+
+  it("adds a trailing slash to relative Django paths", () => {
+    expect(normalizeAPIRequestURL("/api/assets/v2/workspaces/acme", "https://api.plane.so")).toBe(
+      "/api/assets/v2/workspaces/acme/"
+    );
+  });
+
+  it("adds a trailing slash to same-origin absolute Django URLs", () => {
+    expect(normalizeAPIRequestURL("https://api.plane.so/api/foo", "https://api.plane.so")).toBe(
+      "https://api.plane.so/api/foo/"
+    );
+  });
+});
diff --git a/packages/services/src/helpers/url.ts b/packages/services/src/helpers/url.ts
new file mode 100644
index 0000000..b365fe7
--- /dev/null
+++ b/packages/services/src/helpers/url.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Ensures an API request URL has a trailing slash on its path component, preserving
+ * the query string and hash. Required by the Django backend's `APPEND_SLASH` behavior
+ * — under Kubernetes ingress, requests without a trailing slash can fail instead of
+ * 301-redirecting. Intended to be applied by an axios request interceptor so callers
+ * do not need to remember to add the slash.
+ *
+ * Examples:
+ *   "/api/foo"             -> "/api/foo/"
+ *   "/api/foo/"            -> "/api/foo/"
+ *   "/api/foo?x=1"         -> "/api/foo/?x=1"
+ *   "/api/foo#frag"        -> "/api/foo/#frag"
+ *   "https://h/api/foo"    -> "https://h/api/foo/"
+ *   "" | "/"               -> unchanged
+ */
+export function ensureAPITrailingSlash(url: string): string {
+  if (!url) return url;
+  const boundary = url.search(/[?#]/);
+  const path = boundary === -1 ? url : url.slice(0, boundary);
+  const suffix = boundary === -1 ? "" : url.slice(boundary);
+  if (!path || path.endsWith("/")) return url;
+  return `${path}/${suffix}`;
+}
+
+/**
+ * Same as `ensureAPITrailingSlash`, but skips absolute URLs whose origin is not this
+ * instance's Django `baseURL`. Signed S3/GCS upload URLs go through `APIService` with
+ * an empty `baseURL`; slashing them invalidates the signature and 403s the upload.
+ */
+export function normalizeAPIRequestURL(url: string, baseURL: string): string {
+  if (isForeignAbsoluteURL(url, baseURL)) return url;
+  return ensureAPITrailingSlash(url);
+}
+
+function isForeignAbsoluteURL(url: string, baseURL: string): boolean {
+  try {
+    const requestUrl = new URL(url);
+    if (!baseURL) return true;
+    try {
+      return requestUrl.origin !== new URL(baseURL).origin;
+    } catch {
+      return true;
+    }
+  } catch {
+    return false;
+  }
+}
diff --git a/packages/services/src/index.ts b/packages/services/src/index.ts
new file mode 100644
index 0000000..f80cb9a
--- /dev/null
+++ b/packages/services/src/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./ai";
+export * from "./developer";
+export * from "./auth";
+export * from "./cycle";
+export * from "./dashboard";
+export * from "./instance";
+export * from "./intake";
+export * from "./module";
+export * from "./user";
+export * from "./project";
+export * from "./workspace";
+export * from "./file";
+export * from "./label";
+export * from "./state";
+export * from "./issue";
+export * from "./helpers";
diff --git a/packages/services/src/indexedDB.service.ts b/packages/services/src/indexedDB.service.ts
new file mode 100644
index 0000000..bb89d51
--- /dev/null
+++ b/packages/services/src/indexedDB.service.ts
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export abstract class IndexedDBService {
+  private dbName: string;
+  private version: number;
+  private db: IDBDatabase | null = null;
+
+  constructor(dbName: string, version: number) {
+    this.dbName = dbName;
+    this.version = version;
+  }
+
+  async init(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.version);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve();
+      };
+
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result;
+        if (!db.objectStoreNames.contains("workspaces")) {
+          db.createObjectStore("workspaces", { keyPath: "id" });
+        }
+      };
+    });
+  }
+
+  async save(workspaces: any[]): Promise<void> {
+    if (!this.db) throw new Error("Database not initialized");
+
+    const transaction = this.db.transaction("workspaces", "readwrite");
+    const store = transaction.objectStore("workspaces");
+
+    return new Promise((resolve, reject) => {
+      // Clear existing data
+      store.clear();
+
+      // Add new workspaces
+      workspaces.forEach((workspace) => {
+        store.add(workspace);
+      });
+
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  async query(): Promise<any[]> {
+    if (!this.db) throw new Error("Database not initialized");
+
+    const transaction = this.db.transaction("workspaces", "readonly");
+    const store = transaction.objectStore("workspaces");
+
+    return new Promise((resolve, reject) => {
+      const request = store.getAll();
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+}
diff --git a/packages/services/src/instance/index.ts b/packages/services/src/instance/index.ts
new file mode 100644
index 0000000..3fbe347
--- /dev/null
+++ b/packages/services/src/instance/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./instance.service";
diff --git a/packages/services/src/instance/instance.service.ts b/packages/services/src/instance/instance.service.ts
new file mode 100644
index 0000000..39acb95
--- /dev/null
+++ b/packages/services/src/instance/instance.service.ts
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type {
+  IFormattedInstanceConfiguration,
+  IInstance,
+  IInstanceAdmin,
+  IInstanceConfiguration,
+  IInstanceInfo,
+  TPage,
+} from "@plane/types";
+// api service
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing instance-related operations
+ * Handles retrieval of instance information and changelog
+ * @extends {APIService}
+ */
+export class InstanceService extends APIService {
+  /**
+   * Creates an instance of InstanceService
+   * Initializes the service with the base API URL
+   */
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  /**
+   * Retrieves information about the current instance
+   * @returns {Promise<IInstanceInfo>} Promise resolving to instance information
+   * @throws {Error} If the API request fails
+   * @remarks This method uses the validateStatus: null option to bypass interceptors for unauthorized errors.
+   */
+  async info(): Promise<IInstanceInfo> {
+    return this.get("/api/instances/", { validateStatus: null })
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Fetches the changelog for the current instance
+   * @returns {Promise<TPage>} Promise resolving to the changelog page data
+   * @throws {Error} If the API request fails
+   */
+  async changelog(): Promise<TPage> {
+    return this.get("/api/instances/changelog/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Fetches the list of instance admins
+   * @returns {Promise<IInstanceAdmin[]>} Promise resolving to an array of instance admins
+   * @throws {Error} If the API request fails
+   * @remarks This method uses the validateStatus: null option to bypass interceptors for unauthorized errors.
+   */
+  async admins(): Promise<IInstanceAdmin[]> {
+    return this.get("/api/instances/admins/", { validateStatus: null })
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Updates the instance information
+   * @param {Partial<IInstance>} data Data to update the instance with
+   * @returns {Promise<IInstance>} Promise resolving to the updated instance information
+   * @throws {Error} If the API request fails
+   */
+  async update(data: Partial<IInstance>): Promise<IInstance> {
+    return this.patch("/api/instances/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Fetches the list of instance configurations
+   * @returns {Promise<IInstanceConfiguration[]>} Promise resolving to an array of instance configurations
+   * @throws {Error} If the API request fails
+   */
+  async configurations(): Promise<IInstanceConfiguration[]> {
+    return this.get("/api/instances/configurations/")
+      .then((response) => response.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Updates the instance configurations
+   * @param {Partial<IFormattedInstanceConfiguration>} data Data to update the instance configurations with
+   * @returns {Promise<IInstanceConfiguration[]>} The updated instance configurations
+   * @throws {Error} If the API request fails
+   */
+  async updateConfigurations(data: Partial<IFormattedInstanceConfiguration>): Promise<IInstanceConfiguration[]> {
+    return this.patch("/api/instances/configurations/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Sends a test email to the specified receiver to test SMTP configuration
+   * @param {string} receiverEmail Email address to send the test email to
+   * @returns {Promise<void>} Promise resolving to void
+   * @throws {Error} If the API request fails
+   */
+  async sendTestEmail(receiverEmail: string): Promise<void> {
+    return this.post("/api/instances/email-credentials-check/", {
+      receiver_email: receiverEmail,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Disables the email configuration
+   * @returns {Promise<void>} Promise resolving to void
+   * @throws {Error} If the API request fails
+   */
+  async disableEmail(): Promise<void> {
+    return this.delete("/api/instances/configurations/disable-email-feature/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/intake/index.ts b/packages/services/src/intake/index.ts
new file mode 100644
index 0000000..0cf9b34
--- /dev/null
+++ b/packages/services/src/intake/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./intake.service";
+export * from "./issue.service";
diff --git a/packages/services/src/intake/intake.service.ts b/packages/services/src/intake/intake.service.ts
new file mode 100644
index 0000000..81deb10
--- /dev/null
+++ b/packages/services/src/intake/intake.service.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import { APIService } from "../api.service";
+
+export default class IntakeService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+}
+
+export { IntakeService };
diff --git a/packages/services/src/intake/issue.service.ts b/packages/services/src/intake/issue.service.ts
new file mode 100644
index 0000000..be6430e
--- /dev/null
+++ b/packages/services/src/intake/issue.service.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import { APIService } from "../api.service";
+
+export default class IntakeIssueService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  async list(workspaceSlug: string, projectId: string, params = {}) {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
+
+export { IntakeIssueService };
diff --git a/packages/services/src/issue/index.ts b/packages/services/src/issue/index.ts
new file mode 100644
index 0000000..0e0f73c
--- /dev/null
+++ b/packages/services/src/issue/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./sites-issue.service";
diff --git a/packages/services/src/issue/sites-issue.service.ts b/packages/services/src/issue/sites-issue.service.ts
new file mode 100644
index 0000000..788c82f
--- /dev/null
+++ b/packages/services/src/issue/sites-issue.service.ts
@@ -0,0 +1,250 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type { IPublicIssue, TIssuePublicComment, TPublicIssuesResponse } from "@plane/types";
+// api service
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing issues within plane sites application
+ * Extends the APIService class to handle HTTP requests to the issue-related endpoints
+ * @extends {APIService}
+ * @remarks This service is only available for plane sites
+ */
+export class SitesIssueService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves a paginated list of issues for a specific anchor
+   * @param {string} anchor - The anchor identifier
+   * @param {any} params - Optional query parameters
+   * @returns {Promise<TPublicIssuesResponse>} Promise resolving to a paginated list of issues
+   * @throws {Error} If the API request fails
+   */
+  async list(anchor: string, params: any): Promise<TPublicIssuesResponse> {
+    return this.get(`/api/public/anchor/${anchor}/issues/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Retrieves details of a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @returns {Promise<IPublicIssue>} Promise resolving to the issue details
+   * @throws {Error} If the API request fails
+   */
+  async retrieve(anchor: string, issueID: string): Promise<IPublicIssue> {
+    return this.get(`/api/public/anchor/${anchor}/issues/${issueID}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Retrieves the votes associated with a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @returns {Promise<any>} Promise resolving to the votes
+   * @throws {Error} If the API request fails
+   */
+  async listVotes(anchor: string, issueID: string): Promise<any> {
+    return this.get(`/api/public/anchor/${anchor}/issues/${issueID}/votes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Creates a new vote for a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @param {any} data - The vote data
+   * @returns {Promise<any>} Promise resolving to the created vote
+   * @throws {Error} If the API request fails
+   */
+  async addVote(anchor: string, issueID: string, data: any): Promise<any> {
+    return this.post(`/api/public/anchor/${anchor}/issues/${issueID}/votes/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Deletes a vote for a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @returns {Promise<any>} Promise resolving to the deletion response
+   * @throws {Error} If the API request fails
+   */
+  async removeVote(anchor: string, issueID: string): Promise<any> {
+    return this.delete(`/api/public/anchor/${anchor}/issues/${issueID}/votes/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Retrieves the reactions associated with a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @returns {Promise<any>} Promise resolving to the reactions
+   * @throws {Error} If the API request fails
+   */
+  async listReactions(anchor: string, issueID: string): Promise<any> {
+    return this.get(`/api/public/anchor/${anchor}/issues/${issueID}/reactions/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Creates a new reaction for a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @param {any} data - The reaction data
+   * @returns {Promise<any>} Promise resolving to the created reaction
+   * @throws {Error} If the API request fails
+   */
+  async addReaction(anchor: string, issueID: string, data: any): Promise<any> {
+    return this.post(`/api/public/anchor/${anchor}/issues/${issueID}/reactions/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Deletes a reaction for a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @param {string} reactionId - The reaction identifier
+   * @returns {Promise<any>} Promise resolving to the deletion response
+   * @throws {Error} If the API request fails
+   */
+  async removeReaction(anchor: string, issueID: string, reactionId: string): Promise<any> {
+    return this.delete(`/api/public/anchor/${anchor}/issues/${issueID}/reactions/${reactionId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Retrieves the comments associated with a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @returns {Promise<any>} Promise resolving to the comments
+   * @throws {Error} If the API request fails
+   */
+  async listComments(anchor: string, issueID: string): Promise<any> {
+    return this.get(`/api/public/anchor/${anchor}/issues/${issueID}/comments/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Creates a new comment for a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @param {any} data - The comment data
+   * @returns {Promise<TIssuePublicComment>} Promise resolving to the created comment
+   * @throws {Error} If the API request fails
+   */
+  async addComment(anchor: string, issueID: string, data: any): Promise<TIssuePublicComment> {
+    return this.post(`/api/public/anchor/${anchor}/issues/${issueID}/comments/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Updates a comment for a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @param {string} commentId - The comment identifier
+   * @param {any} data - The updated comment data
+   * @returns {Promise<any>} Promise resolving to the updated comment
+   * @throws {Error} If the API request fails
+   */
+  async updateComment(anchor: string, issueID: string, commentId: string, data: any): Promise<any> {
+    return this.patch(`/api/public/anchor/${anchor}/issues/${issueID}/comments/${commentId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Deletes a comment for a specific issue
+   * @param {string} anchor - The anchor identifier
+   * @param {string} issueID - The issue identifier
+   * @param {string} commentId - The comment identifier
+   * @returns {Promise<any>} Promise resolving to the deletion response
+   * @throws {Error} If the API request fails
+   */
+  async removeComment(anchor: string, issueID: string, commentId: string): Promise<any> {
+    return this.delete(`/api/public/anchor/${anchor}/issues/${issueID}/comments/${commentId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Creates a new reaction for a specific comment
+   * @param {string} anchor - The anchor identifier
+   * @param {string} commentId - The comment identifier
+   * @param {any} data - The reaction data
+   * @returns {Promise<any>} Promise resolving to the created reaction
+   * @throws {Error} If the API request fails
+   */
+  async addCommentReaction(
+    anchor: string,
+    commentId: string,
+    data: {
+      reaction: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/public/anchor/${anchor}/comments/${commentId}/reactions/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Deletes a reaction for a specific comment
+   * @param {string} anchor - The anchor identifier
+   * @param {string} commentId - The comment identifier
+   * @param {string} reactionHex - The reaction identifier
+   * @returns {Promise<any>} Promise resolving to the deletion response
+   * @throws {Error} If the API request fails
+   */
+  async removeCommentReaction(anchor: string, commentId: string, reactionHex: string): Promise<any> {
+    return this.delete(`/api/public/anchor/${anchor}/comments/${commentId}/reactions/${reactionHex}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/packages/services/src/label/index.ts b/packages/services/src/label/index.ts
new file mode 100644
index 0000000..f3fdc38
--- /dev/null
+++ b/packages/services/src/label/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./sites-label.service";
diff --git a/packages/services/src/label/sites-label.service.ts b/packages/services/src/label/sites-label.service.ts
new file mode 100644
index 0000000..493880d
--- /dev/null
+++ b/packages/services/src/label/sites-label.service.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type { IIssueLabel } from "@plane/types";
+// api service
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing labels within plane sites application.
+ * Extends APIService to handle HTTP requests to the label-related endpoints.
+ * @extends {APIService}
+ * @remarks This service is only available for plane sites
+ */
+export class SitesLabelService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves a list of labels for a specific anchor.
+   * @param {string} anchor - The anchor identifier
+   * @returns {Promise<IIssueLabel[]>} The list of labels
+   * @throws {Error} If the API request fails
+   */
+  async list(anchor: string): Promise<IIssueLabel[]> {
+    return this.get(`/api/public/anchor/${anchor}/labels/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/live.service.ts b/packages/services/src/live.service.ts
new file mode 100644
index 0000000..89009f6
--- /dev/null
+++ b/packages/services/src/live.service.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import { APIService } from "./api.service";
+
+export abstract class LiveService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+}
diff --git a/packages/services/src/module/index.ts b/packages/services/src/module/index.ts
new file mode 100644
index 0000000..9eea4f1
--- /dev/null
+++ b/packages/services/src/module/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./link.service";
+export * from "./module.service";
+export * from "./operations.service";
+export * from "./sites-module.service";
diff --git a/packages/services/src/module/link.service.ts b/packages/services/src/module/link.service.ts
new file mode 100644
index 0000000..b0a0e71
--- /dev/null
+++ b/packages/services/src/module/link.service.ts
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { ILinkDetails, ModuleLink } from "@plane/types";
+// services
+import { APIService } from "../api.service";
+
+/**
+ * Service class for handling module link related operations.
+ * Extends the base APIService class to interact with module link endpoints.
+ */
+export class ModuleLinkService extends APIService {
+  /**
+   * Creates an instance of ModuleLinkService.
+   * @param {string} baseURL - The base URL for the API endpoints
+   */
+
+  /**
+   * Creates a new module link.
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} projectId - The unique identifier for the project
+   * @param {string} moduleId - The unique identifier for the module
+   * @param {Partial<ModuleLink>} data - The module link data to be created
+   * @returns {Promise<ILinkDetails>} The created module link details
+   * @throws {Error} When the API request fails
+   */
+  async create(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<ModuleLink>
+  ): Promise<ILinkDetails> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Updates an existing module link.
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} projectId - The unique identifier for the project
+   * @param {string} moduleId - The unique identifier for the module
+   * @param {string} linkId - The unique identifier for the link to update
+   * @param {Partial<ModuleLink>} data - The module link data to be updated
+   * @returns {Promise<ILinkDetails>} The updated module link details
+   * @throws {Error} When the API request fails
+   */
+  async update(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    linkId: string,
+    data: Partial<ModuleLink>
+  ): Promise<ILinkDetails> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/${linkId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Deletes a module link.
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} projectId - The unique identifier for the project
+   * @param {string} moduleId - The unique identifier for the module
+   * @param {string} linkId - The unique identifier for the link to delete
+   * @returns {Promise<any>} Response data from the server
+   * @throws {Error} When the API request fails
+   */
+  async destroy(workspaceSlug: string, projectId: string, moduleId: string, linkId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/${linkId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/module/module.service.ts b/packages/services/src/module/module.service.ts
new file mode 100644
index 0000000..01bd30e
--- /dev/null
+++ b/packages/services/src/module/module.service.ts
@@ -0,0 +1,214 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+import type { IModule, ILinkDetails, ModuleLink, TIssuesResponse } from "@plane/types";
+// services
+import { APIService } from "../api.service";
+
+export class ModuleService extends APIService {
+  async workspaceModulesList(workspaceSlug: string): Promise<IModule[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/modules/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectModulesList(workspaceSlug: string, projectId: string): Promise<IModule[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async create(workspaceSlug: string, projectId: string, data: any): Promise<IModule> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieve(workspaceSlug: string, projectId: string, moduleId: string): Promise<IModule> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  //   async update(workspaceSlug: string, projectId: string, moduleId: string, data: any): Promise<any> {
+  //     return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`, data)
+  //       .then((response) => response?.data)
+  //       .catch((error) => {
+  //         throw error?.response?.data;
+  //       });
+  //   }
+
+  async update(workspaceSlug: string, projectId: string, moduleId: string, data: Partial<IModule>): Promise<IModule> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async destroy(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getModuleIssues(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    queries?: any,
+    config = {}
+  ): Promise<TIssuesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/`,
+      {
+        params: queries,
+      },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addIssuesToModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: { issues: string[] }
+  ): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addModulesToIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { modules: string[]; removed_modules?: string[] }
+  ): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/modules/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeIssuesFromModuleBulk(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    issueIds: string[]
+  ): Promise<void> {
+    const promiseDataUrls: any = [];
+    issueIds.forEach((issueId) => {
+      promiseDataUrls.push(
+        this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/${issueId}/`)
+      );
+    });
+    await Promise.all(promiseDataUrls)
+      .then((response) => response)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeModulesFromIssueBulk(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    moduleIds: string[]
+  ): Promise<void> {
+    const promiseDataUrls: any = [];
+    moduleIds.forEach((moduleId) => {
+      promiseDataUrls.push(
+        this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/${issueId}/`)
+      );
+    });
+    await Promise.all(promiseDataUrls)
+      .then((response) => response)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createModuleLink(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: Partial<ModuleLink>
+  ): Promise<ILinkDetails> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateModuleLink(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    linkId: string,
+    data: Partial<ModuleLink>
+  ): Promise<ILinkDetails> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/${linkId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteModuleLink(workspaceSlug: string, projectId: string, moduleId: string, linkId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/${linkId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addModuleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      module: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeModuleFromFavorites(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/module/operations.service.ts b/packages/services/src/module/operations.service.ts
new file mode 100644
index 0000000..99b1426
--- /dev/null
+++ b/packages/services/src/module/operations.service.ts
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// types
+// import type { IModule, ILinkDetails, ModuleLink, TIssuesResponse } from "@plane/types";
+// services
+import { APIService } from "../api.service";
+
+export class ModuleOperationService extends APIService {
+  /**
+   * Add issues to a module
+   * @param {string} workspaceSlug - The slug of the workspace
+   * @param {string} projectId - The ID of the project
+   * @param {string} moduleId - The ID of the module
+   * @param {object} data - The data to be sent in the request body
+   * @param {string[]} data.issues - The IDs of the issues to be added
+   * @returns {Promise<void>}
+   */
+  async addIssuesToModule(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    data: { issues: string[] }
+  ): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Add modules to an issue
+   * @param {string} workspaceSlug - The slug of the workspace
+   * @param {string} projectId - The ID of the project
+   * @param {string} issueId - The ID of the issue
+   * @param {object} data - The data to be sent in the request body
+   * @param {string[]} data.modules - The IDs of the modules to be added
+   * @param {string[]} [data.removed_modules] - The IDs of the modules to be removed
+   * @returns {Promise<void>}
+   */
+  async addModulesToIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { modules: string[]; removed_modules?: string[] }
+  ): Promise<void> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/modules/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Remove issues from a module
+   * @param {string} workspaceSlug - The slug of the workspace
+   * @param {string} projectId - The ID of the project
+   * @param {string} moduleId - The ID of the module
+   * @param {string[]} issueIds - The IDs of the issues to be removed
+   * @returns {Promise<void>}
+   */
+  async removeIssuesFromModuleBulk(
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    issueIds: string[]
+  ): Promise<void> {
+    const promiseDataUrls: any = [];
+    issueIds.forEach((issueId) => {
+      promiseDataUrls.push(
+        this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/${issueId}/`)
+      );
+    });
+    await Promise.all(promiseDataUrls)
+      .then((response) => response)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Remove modules from an issue
+   * @param {string} workspaceSlug - The slug of the workspace
+   * @param {string} projectId - The ID of the project
+   * @param {string} issueId - The ID of the issue
+   * @param {string[]} moduleIds - The IDs of the modules to be removed
+   * @returns {Promise<void>}
+   */
+  async removeModulesFromIssueBulk(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    moduleIds: string[]
+  ): Promise<void> {
+    const promiseDataUrls: any = [];
+    moduleIds.forEach((moduleId) => {
+      promiseDataUrls.push(
+        this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/issues/${issueId}/`)
+      );
+    });
+    await Promise.all(promiseDataUrls)
+      .then((response) => response)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Add a module to favorites
+   * @param {string} workspaceSlug - The slug of the workspace
+   * @param {string} projectId - The ID of the project
+   * @param {object} data - The data to be sent in the request body
+   * @param {string} data.module - The ID of the module to be added
+   * @returns {Promise<any>}
+   */
+  async addModuleToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      module: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Remove a module from favorites
+   * @param {string} workspaceSlug - The slug of the workspace
+   * @param {string} projectId - The ID of the project
+   * @param {string} moduleId - The ID of the module to be removed
+   * @returns {Promise<any>}
+   */
+  async removeModuleFromFavorites(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/${moduleId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/module/sites-module.service.ts b/packages/services/src/module/sites-module.service.ts
new file mode 100644
index 0000000..d6f61c2
--- /dev/null
+++ b/packages/services/src/module/sites-module.service.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+// api service
+import type { TPublicModule } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing modules within plane sites application.
+ * Extends APIService to handle HTTP requests to the module-related endpoints.
+ * @extends {APIService}
+ * @remarks This service is only available for plane sites
+ */
+export class SitesModuleService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves a list of modules for a specific anchor.
+   * @param {string} anchor - The anchor identifier
+   * @returns {Promise<TPublicModule[]>} The list of modules
+   * @throws {Error} If the API request fails
+   */
+  async list(anchor: string): Promise<TPublicModule[]> {
+    return this.get(`/api/public/anchor/${anchor}/modules/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/project/index.ts b/packages/services/src/project/index.ts
new file mode 100644
index 0000000..58b39cc
--- /dev/null
+++ b/packages/services/src/project/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./view.service";
+export * from "./sites-publish.service";
diff --git a/packages/services/src/project/sites-publish.service.ts b/packages/services/src/project/sites-publish.service.ts
new file mode 100644
index 0000000..bc14da8
--- /dev/null
+++ b/packages/services/src/project/sites-publish.service.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type { TProjectPublishSettings } from "@plane/types";
+// api service
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing project publish operations within plane sites application.
+ * Extends APIService to handle HTTP requests to the project publish-related endpoints.
+ * @extends {APIService}
+ * @remarks This service is only available for plane sites
+ */
+export class SitesProjectPublishService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves publish settings for a specific anchor.
+   * @param {string} anchor - The anchor identifier
+   * @returns {Promise<TProjectPublishSettings>} The publish settings
+   * @throws {Error} If the API request fails
+   */
+  async retrieveSettingsByAnchor(anchor: string): Promise<TProjectPublishSettings> {
+    return this.get(`/api/public/anchor/${anchor}/settings/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Retrieves publish settings for a specific project.
+   * @param {string} workspaceSlug - The workspace slug
+   * @param {string} projectID - The project identifier
+   * @returns {Promise<TProjectPublishSettings>} The publish settings
+   * @throws {Error} If the API request fails
+   */
+  async retrieveSettingsByProjectId(workspaceSlug: string, projectID: string): Promise<TProjectPublishSettings> {
+    return this.get(`/api/public/workspaces/${workspaceSlug}/projects/${projectID}/anchor/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/packages/services/src/project/view.service.ts b/packages/services/src/project/view.service.ts
new file mode 100644
index 0000000..02782cd
--- /dev/null
+++ b/packages/services/src/project/view.service.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+// api services
+import { APIService } from "../api.service";
+
+export class ProjectViewService extends APIService {
+  /**
+   * Creates an instance of ProjectViewService
+   * @param {string} baseUrl - The base URL for API requests
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+}
diff --git a/packages/services/src/state/index.ts b/packages/services/src/state/index.ts
new file mode 100644
index 0000000..4c08389
--- /dev/null
+++ b/packages/services/src/state/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./sites-state.service";
diff --git a/packages/services/src/state/sites-state.service.ts b/packages/services/src/state/sites-state.service.ts
new file mode 100644
index 0000000..32c563a
--- /dev/null
+++ b/packages/services/src/state/sites-state.service.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type { IState } from "@plane/types";
+// api service
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing states within plane sites application.
+ * Extends APIService to handle HTTP requests to the state-related endpoints.
+ * @extends {APIService}
+ * @remarks This service is only available for plane sites
+ */
+export class SitesStateService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves a list of states for a specific anchor.
+   * @param {string} anchor - The anchor identifier
+   * @returns {Promise<IState[]>} The list of states
+   * @throws {Error} If the API request fails
+   */
+  async list(anchor: string): Promise<IState[]> {
+    return this.get(`/api/public/anchor/${anchor}/states/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/user/favorite.service.ts b/packages/services/src/user/favorite.service.ts
new file mode 100644
index 0000000..e832b73
--- /dev/null
+++ b/packages/services/src/user/favorite.service.ts
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IFavorite } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing user favorites
+ * Handles operations for adding, updating, removing, and retrieving user favorites within a workspace
+ * @extends {APIService}
+ */
+export class UserFavoriteService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Adds a new item to user favorites
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {Partial<IFavorite>} data - Favorite item data to be added
+   * @returns {Promise<IFavorite>} Promise resolving to the created favorite item
+   * @throws {Error} If the API request fails
+   */
+  async add(workspaceSlug: string, data: Partial<IFavorite>): Promise<IFavorite> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-favorites/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Updates an existing favorite item
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} favoriteId - The unique identifier for the favorite item
+   * @param {Partial<IFavorite>} data - Updated favorite item data
+   * @returns {Promise<IFavorite>} Promise resolving to the updated favorite item
+   * @throws {Error} If the API request fails
+   */
+  async update(workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>): Promise<IFavorite> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/user-favorites/${favoriteId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Removes an item from user favorites
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} favoriteId - The unique identifier for the favorite item to remove
+   * @returns {Promise<void>} Promise resolving when the favorite item is removed
+   * @throws {Error} If the API request fails
+   */
+  async remove(workspaceSlug: string, favoriteId: string): Promise<void> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/user-favorites/${favoriteId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Retrieves all favorite items for a user in a workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @returns {Promise<IFavorite[]>} Promise resolving to array of favorite items
+   * @throws {Error} If the API request fails
+   * @remarks This method includes the 'all' parameter to retrieve all favorites
+   */
+  async list(workspaceSlug: string): Promise<IFavorite[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-favorites/`, {
+      params: {
+        all: true,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves grouped favorite items for a specific favorite in a workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} favoriteId - The unique identifier for the favorite item to get grouped items for
+   * @returns {Promise<IFavorite[]>} Promise resolving to array of grouped favorite items
+   * @throws {Error} If the API request fails
+   */
+  async groupedList(workspaceSlug: string, favoriteId: string): Promise<IFavorite[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-favorites/${favoriteId}/group/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/user/index.ts b/packages/services/src/user/index.ts
new file mode 100644
index 0000000..96e1963
--- /dev/null
+++ b/packages/services/src/user/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./favorite.service";
+export * from "./user.service";
+export * from "./sites-member.service";
diff --git a/packages/services/src/user/sites-member.service.ts b/packages/services/src/user/sites-member.service.ts
new file mode 100644
index 0000000..c9a641f
--- /dev/null
+++ b/packages/services/src/user/sites-member.service.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type { TPublicMember } from "@plane/types";
+// api service
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing members operations within plane sites application.
+ * Extends APIService to handle HTTP requests to the member-related endpoints.
+ * @extends {APIService}
+ * @remarks This service is only available for plane sites
+ */
+export class SitesMemberService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves a list of members for a specific anchor.
+   * @param {string} anchor - The anchor identifier
+   * @returns {Promise<TPublicMember[]>} The list of members
+   * @throws {Error} If the API request fails
+   */
+  async list(anchor: string): Promise<TPublicMember[]> {
+    return this.get(`/api/public/anchor/${anchor}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/user/user.service.ts b/packages/services/src/user/user.service.ts
new file mode 100644
index 0000000..9ede9a7
--- /dev/null
+++ b/packages/services/src/user/user.service.ts
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import type { IUser, TUserProfile } from "@plane/types";
+// api service
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing user operations
+ * Handles operations for retrieving the current user's details and perform CRUD operations
+ * @extends {APIService}
+ */
+export class UserService extends APIService {
+  /**
+   * Constructor for UserService
+   * @param BASE_URL - Base URL for API requests
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves the current user details
+   * @returns {Promise<IUser>} Promise resolving to the current user details
+   */
+  async me(): Promise<IUser> {
+    return this.get("/api/users/me/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error;
+      });
+  }
+
+  /**
+   * Updates the current user details
+   * @param {Partial<IUser>} data Data to update the user with
+   * @returns {Promise<IUser>} Promise resolving to the updated user details
+   * @throws {Error} If the API request fails
+   */
+  async update(data: Partial<IUser>): Promise<IUser> {
+    return this.patch("/api/users/me/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves the current user's profile details
+   * @returns {Promise<TUserProfile>} Promise resolving to the current user's profile details
+   * @throws {Error} If the API request fails
+   */
+  async profile(): Promise<TUserProfile> {
+    return this.get("/api/users/me/profile/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Updates the current user's profile details
+   * @param {Partial<TUserProfile>} data Data to update the user's profile with
+   * @returns {Promise<TUserProfile>} Promise resolving to the updated user's profile details
+   * @throws {Error} If the API request fails
+   */
+  async updateProfile(data: Partial<TUserProfile>): Promise<TUserProfile> {
+    return this.patch("/api/users/me/profile/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Retrieves the current instance admin details
+   * @returns {Promise<IUser>} Promise resolving to the current instance admin details
+   * @throws {Error} If the API request fails
+   */
+  async adminDetails(): Promise<IUser> {
+    return this.get("/api/instances/admins/me/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/workspace/index.ts b/packages/services/src/workspace/index.ts
new file mode 100644
index 0000000..6b67a9b
--- /dev/null
+++ b/packages/services/src/workspace/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./invitation.service";
+export * from "./member.service";
+export * from "./notification.service";
+export * from "./view.service";
+export * from "./workspace.service";
+export * from "./instance-workspace.service";
diff --git a/packages/services/src/workspace/instance-workspace.service.ts b/packages/services/src/workspace/instance-workspace.service.ts
new file mode 100644
index 0000000..c38fb66
--- /dev/null
+++ b/packages/services/src/workspace/instance-workspace.service.ts
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IWorkspace, TWorkspacePaginationInfo } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing instance workspaces
+ * Handles CRUD operations on instance workspaces
+ * @extends APIService
+ */
+export class InstanceWorkspaceService extends APIService {
+  /**
+   * Constructor for InstanceWorkspaceService
+   * @param BASE_URL - Base URL for API requests
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves a paginated list of workspaces for the current instance
+   * @param {string} nextPageCursor - Optional cursor to retrieve the next page of results
+   * @returns {Promise<TWorkspacePaginationInfo>} Promise resolving to a paginated list of workspaces
+   * @throws {Error} If the API request fails
+   */
+  async list(nextPageCursor?: string): Promise<TWorkspacePaginationInfo> {
+    return this.get(`/api/instances/workspaces/`, {
+      params: {
+        cursor: nextPageCursor,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Checks if a workspace slug is available
+   * @param {string} slug - The workspace slug to check
+   * @returns {Promise<any>} Promise resolving to slug availability status
+   * @throws {Error} If the API request fails
+   */
+  async slugCheck(slug: string): Promise<any> {
+    const params = new URLSearchParams({ slug });
+    return this.get(`/api/instances/workspace-slug-check/?${params.toString()}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Creates a new workspace
+   * @param {Partial<IWorkspace>} data - Workspace data for creation
+   * @returns {Promise<IWorkspace>} Promise resolving to the created workspace
+   * @throws {Error} If the API request fails
+   */
+  async create(data: Partial<IWorkspace>): Promise<IWorkspace> {
+    return this.post("/api/instances/workspaces/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/workspace/invitation.service.ts b/packages/services/src/workspace/invitation.service.ts
new file mode 100644
index 0000000..392cdde
--- /dev/null
+++ b/packages/services/src/workspace/invitation.service.ts
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IWorkspaceMemberInvitation, IWorkspaceBulkInviteFormData, IWorkspaceMember } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing workspace invitations
+ * Handles operations related to inviting users to workspaces and managing invitations
+ * @extends {APIService}
+ */
+export class WorkspaceInvitationService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves all workspace invitations for the current user
+   * @returns {Promise<IWorkspaceMemberInvitation[]>} Promise resolving to array of workspace invitations
+   * @throws {Error} If the API request fails
+   */
+  async userInvitations(): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get("/api/users/me/workspaces/invitations/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves all invitations for a specific workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @returns {Promise<IWorkspaceMemberInvitation[]>} Promise resolving to array of workspace invitations
+   * @throws {Error} If the API request fails
+   */
+  async workspaceInvitations(workspaceSlug: string): Promise<IWorkspaceMemberInvitation[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/invitations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Sends bulk invitations to users for a workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {IWorkspaceBulkInviteFormData} data - Bulk invitation data containing user information
+   * @returns {Promise<any>} Promise resolving to the invitation response
+   * @throws {Error} If the API request fails
+   */
+  async invite(workspaceSlug: string, data: IWorkspaceBulkInviteFormData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/invitations/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Update Invitation
+   * @param workspaceSlug
+   * @param invitationId
+   * @param data
+   * @returns
+   */
+  async update(workspaceSlug: string, invitationId: string, data: Partial<IWorkspaceMember>): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Delete Workspace invitation
+   * @param workspaceSlug
+   * @param invitationId
+   * @returns
+   */
+  async destroy(workspaceSlug: string, invitationId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Accepts an invitation to join a workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} invitationId - The unique identifier for the invitation
+   * @param {any} data - Additional data required for joining the workspace
+   * @returns {Promise<any>} Promise resolving to the join response
+   * @throws {Error} If the API request fails
+   */
+  async join(workspaceSlug: string, invitationId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/invitations/${invitationId}/join/`, data, {
+      headers: {},
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Accepts multiple workspace invitations at once
+   * @param {any} data - Data containing information about invitations to accept
+   * @returns {Promise<any>} Promise resolving to the bulk join response
+   * @throws {Error} If the API request fails
+   */
+  async joinMany(data: any): Promise<any> {
+    return this.post("/api/users/me/workspaces/invitations/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/workspace/member.service.ts b/packages/services/src/workspace/member.service.ts
new file mode 100644
index 0000000..ace8df3
--- /dev/null
+++ b/packages/services/src/workspace/member.service.ts
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IWorkspaceMemberMe, IWorkspaceMember, IUserProjectsRole } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing workspace members
+ * Handles operations related to workspace membership, including member information,
+ * updates, deletions, and role management
+ * @extends {APIService}
+ */
+export class WorkspaceMemberService extends APIService {
+  /**
+   * Creates an instance of WorkspaceMemberService
+   * @param {string} baseUrl - The base URL for API requests
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves current user's information for a specific workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @returns {Promise<IWorkspaceMemberMe>} Promise resolving to current user's workspace member information
+   * @throws {Error} If the API request fails
+   */
+  async myInfo(workspaceSlug: string): Promise<IWorkspaceMemberMe> {
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/me/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Retrieves all members of a specific workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @returns {Promise<IWorkspaceMember[]>} Promise resolving to array of workspace members
+   * @throws {Error} If the API request fails
+   */
+  async list(workspaceSlug: string): Promise<IWorkspaceMember[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/members/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Updates a workspace member's information
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} memberId - The unique identifier for the member
+   * @param {Partial<IWorkspaceMember>} data - Updated member data
+   * @returns {Promise<IWorkspaceMember>} Promise resolving to the updated member information
+   * @throws {Error} If the API request fails
+   */
+  async update(workspaceSlug: string, memberId: string, data: Partial<IWorkspaceMember>): Promise<IWorkspaceMember> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/members/${memberId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Removes a member from a workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {string} memberId - The unique identifier for the member to remove
+   * @returns {Promise<any>} Promise resolving to the deletion response
+   * @throws {Error} If the API request fails
+   */
+  async destroy(workspaceSlug: string, memberId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/members/${memberId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves the current user's project roles within a workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @returns {Promise<IUserProjectsRole>} Promise resolving to user's project roles
+   * @throws {Error} If the API request fails
+   */
+  async getWorkspaceUserProjectsRole(workspaceSlug: string): Promise<IUserProjectsRole> {
+    return this.get(`/api/users/me/workspaces/${workspaceSlug}/project-roles/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/workspace/notification.service.ts b/packages/services/src/workspace/notification.service.ts
new file mode 100644
index 0000000..44539b0
--- /dev/null
+++ b/packages/services/src/workspace/notification.service.ts
@@ -0,0 +1,143 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type {
+  TUnreadNotificationsCount,
+  TNotificationPaginatedInfo,
+  TNotification,
+  TNotificationPaginatedInfoQueryParams,
+} from "@plane/types";
+// services
+import { APIService } from "../api.service";
+
+export class WorkspaceNotificationService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves the count of unread notifications for a workspace
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @returns {Promise<TUnreadNotificationsCount | undefined>} The count of unread notifications
+   */
+  async getUnreadCount(workspaceSlug: string): Promise<TUnreadNotificationsCount | undefined> {
+    return this.get(`/api/workspaces/${workspaceSlug}/users/notifications/unread/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves paginated notifications for a workspace
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {TNotificationPaginatedInfoQueryParams} params - Query parameters for pagination and filtering
+   * @returns {Promise<TNotificationPaginatedInfo | undefined>} Paginated list of notifications
+   */
+  async list(
+    workspaceSlug: string,
+    params: TNotificationPaginatedInfoQueryParams
+  ): Promise<TNotificationPaginatedInfo | undefined> {
+    return this.get(`/api/workspaces/${workspaceSlug}/users/notifications/`, { params })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Updates a specific notification by ID
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} notificationId - The unique identifier for the notification
+   * @param {Partial<TNotification>} data - The notification data to update
+   * @returns {Promise<TNotification | undefined>} The updated notification
+   */
+  async update(
+    workspaceSlug: string,
+    notificationId: string,
+    data: Partial<TNotification>
+  ): Promise<TNotification | undefined> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Marks a notification as read
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} notificationId - The unique identifier for the notification
+   * @returns {Promise<TNotification | undefined>} The updated notification
+   */
+  async markAsRead(workspaceSlug: string, notificationId: string): Promise<TNotification | undefined> {
+    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Marks a notification as unread
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} notificationId - The unique identifier for the notification
+   * @returns {Promise<TNotification | undefined>} The updated notification
+   */
+  async markAsUnread(workspaceSlug: string, notificationId: string): Promise<TNotification | undefined> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Archives a notification
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} notificationId - The unique identifier for the notification
+   * @returns {Promise<TNotification | undefined>} The updated notification
+   */
+  async archive(workspaceSlug: string, notificationId: string): Promise<TNotification | undefined> {
+    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Unarchives a notification
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {string} notificationId - The unique identifier for the notification
+   * @returns {Promise<TNotification | undefined>} The updated notification
+   */
+  async unarchive(workspaceSlug: string, notificationId: string): Promise<TNotification | undefined> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Marks all notifications as read based on filter criteria
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {TNotificationPaginatedInfoQueryParams} data - Filter criteria for notifications to mark as read
+   * @returns {Promise<TNotification | undefined>} The result of the operation
+   */
+  async markAllAsRead(
+    workspaceSlug: string,
+    data: TNotificationPaginatedInfoQueryParams
+  ): Promise<TNotification | undefined> {
+    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/mark-all-read/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/workspace/view.service.ts b/packages/services/src/workspace/view.service.ts
new file mode 100644
index 0000000..99b8b64
--- /dev/null
+++ b/packages/services/src/workspace/view.service.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IWorkspaceView, TIssuesResponse } from "@plane/types";
+import { APIService } from "../api.service";
+
+export class WorkspaceViewService extends APIService {
+  /**
+   * Creates an instance of WorkspaceViewService
+   * @param {string} baseUrl - The base URL for API requests
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  async create(workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
+    return this.post(`/api/workspaces/${workspaceSlug}/views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async update(workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/views/${viewId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async destroy(workspaceSlug: string, viewId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async list(workspaceSlug: string): Promise<IWorkspaceView[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/views/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieve(workspaceSlug: string, viewId: string): Promise<IWorkspaceView> {
+    return this.get(`/api/workspaces/${workspaceSlug}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewIssues(workspaceSlug: string, params: any, config = {}): Promise<TIssuesResponse> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/issues/`,
+      {
+        params,
+      },
+      config
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/workspace/workspace.service.ts b/packages/services/src/workspace/workspace.service.ts
new file mode 100644
index 0000000..3f1ad42
--- /dev/null
+++ b/packages/services/src/workspace/workspace.service.ts
@@ -0,0 +1,147 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { API_BASE_URL } from "@plane/constants";
+import type { IWorkspace, ILastActiveWorkspaceDetails, IWorkspaceSearchResults } from "@plane/types";
+import { APIService } from "../api.service";
+
+/**
+ * Service class for managing workspace operations
+ * Handles CRUD operations and various workspace-related functionalities
+ * @extends {APIService}
+ */
+export class WorkspaceService extends APIService {
+  /**
+   * Creates an instance of WorkspaceService
+   * @param {string} baseUrl - The base URL for API requests
+   */
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+  /**
+   * Retrieves all workspaces for the current user
+   * @returns {Promise<IWorkspace[]>} Promise resolving to an array of workspaces
+   * @throws {Error} If the API request fails
+   */
+  async list(): Promise<IWorkspace[]> {
+    return this.get("/api/users/me/workspaces/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves details of a specific workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @returns {Promise<IWorkspace>} Promise resolving to workspace details
+   * @throws {Error} If the API request fails
+   */
+  async retrieve(workspaceSlug: string): Promise<IWorkspace> {
+    return this.get(`/api/workspaces/${workspaceSlug}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * Creates a new workspace
+   * @param {Partial<IWorkspace>} data - Workspace data for creation
+   * @returns {Promise<IWorkspace>} Promise resolving to the created workspace
+   * @throws {Error} If the API request fails
+   */
+  async create(data: Partial<IWorkspace>): Promise<IWorkspace> {
+    return this.post("/api/workspaces/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Updates an existing workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {Partial<IWorkspace>} data - Updated workspace data
+   * @returns {Promise<IWorkspace>} Promise resolving to the updated workspace
+   * @throws {Error} If the API request fails
+   */
+  async update(workspaceSlug: string, data: Partial<IWorkspace>): Promise<IWorkspace> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Deletes a workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @returns {Promise<any>} Promise resolving to the deletion response
+   * @throws {Error} If the API request fails
+   */
+  async destroy(workspaceSlug: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves information about the user's last visited workspace
+   * @returns {Promise<ILastActiveWorkspaceDetails>} Promise resolving to last active workspace details
+   * @throws {Error} If the API request fails
+   */
+  async lastVisited(): Promise<ILastActiveWorkspaceDetails> {
+    return this.get("/api/users/last-visited-workspace/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Checks if a workspace slug is available
+   * @param {string} slug - The workspace slug to check
+   * @returns {Promise<any>} Promise resolving to slug availability status
+   * @throws {Error} If the API request fails
+   */
+  async slugCheck(slug: string): Promise<any> {
+    return this.get(`/api/workspace-slug-check/?slug=${slug}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Searches within a workspace
+   * @param {string} workspaceSlug - The unique slug identifier for the workspace
+   * @param {Object} params - Search parameters
+   * @param {string} [params.project_id] - Optional project ID to scope the search
+   * @param {string} params.search - Search query string
+   * @param {boolean} params.workspace_search - Whether to search across the entire workspace
+   * @returns {Promise<IWorkspaceSearchResults>} Promise resolving to search results
+   * @throws {Error} If the API request fails
+   */
+  async search(
+    workspaceSlug: string,
+    params: {
+      project_id?: string;
+      search: string;
+      workspace_search: boolean;
+    }
+  ): Promise<IWorkspaceSearchResults> {
+    return this.get(`/api/workspaces/${workspaceSlug}/search/`, {
+      params,
+    })
+      .then((res) => res?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/tsconfig.json b/packages/services/tsconfig.json
new file mode 100644
index 0000000..932ae71
--- /dev/null
+++ b/packages/services/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "exactOptionalPropertyTypes": false,
+    "noUnusedLocals": false
+  },
+  "include": ["./src"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/services/tsdown.config.ts b/packages/services/tsdown.config.ts
new file mode 100644
index 0000000..92959ea
--- /dev/null
+++ b/packages/services/tsdown.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  platform: "neutral",
+  exports: true,
+});
diff --git a/packages/shared-state/.prettierignore b/packages/shared-state/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/shared-state/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/shared-state/package.json b/packages/shared-state/package.json
new file mode 100644
index 0000000..21cfedc
--- /dev/null
+++ b/packages/shared-state/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@plane/shared-state",
+  "version": "1.4.2",
+  "private": true,
+  "description": "Shared state shared across multiple apps internally",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=0 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "@plane/constants": "workspace:*",
+    "@plane/types": "workspace:*",
+    "@plane/utils": "workspace:*",
+    "lodash-es": "catalog:",
+    "mobx": "catalog:",
+    "mobx-utils": "catalog:",
+    "uuid": "catalog:",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/typescript-config": "workspace:*",
+    "@types/lodash-es": "catalog:",
+    "@types/node": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/packages/shared-state/src/index.ts b/packages/shared-state/src/index.ts
new file mode 100644
index 0000000..7511c96
--- /dev/null
+++ b/packages/shared-state/src/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./store";
+export * from "./utils";
diff --git a/packages/shared-state/src/store/index.ts b/packages/shared-state/src/store/index.ts
new file mode 100644
index 0000000..b222ec9
--- /dev/null
+++ b/packages/shared-state/src/store/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./rich-filters";
+export * from "./work-item-filters";
diff --git a/packages/shared-state/src/store/rich-filters/adapter.ts b/packages/shared-state/src/store/rich-filters/adapter.ts
new file mode 100644
index 0000000..92e211a
--- /dev/null
+++ b/packages/shared-state/src/store/rich-filters/adapter.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IFilterAdapter, TExternalFilter, TFilterExpression, TFilterProperty } from "@plane/types";
+
+/**
+ * Abstract base class for converting between external filter formats and internal filter expressions.
+ * Provides common utilities for creating and manipulating filter nodes.
+ *
+ * @template K - Property key type that extends TFilterProperty
+ * @template E - External filter type that extends TExternalFilter
+ */
+export abstract class FilterAdapter<K extends TFilterProperty, E extends TExternalFilter> implements IFilterAdapter<
+  K,
+  E
+> {
+  /**
+   * Converts an external filter format to internal filter expression.
+   * Must be implemented by concrete adapter classes.
+   *
+   * @param externalFilter - The external filter to convert
+   * @returns The internal filter expression or null if conversion fails
+   */
+  abstract toInternal(externalFilter: E): TFilterExpression<K> | null;
+
+  /**
+   * Converts an internal filter expression to external filter format.
+   * Must be implemented by concrete adapter classes.
+   *
+   * @param internalFilter - The internal filter expression to convert
+   * @returns The external filter format
+   */
+  abstract toExternal(internalFilter: TFilterExpression<K> | null): E;
+}
diff --git a/packages/shared-state/src/store/rich-filters/config-manager.ts b/packages/shared-state/src/store/rich-filters/config-manager.ts
new file mode 100644
index 0000000..80b23e9
--- /dev/null
+++ b/packages/shared-state/src/store/rich-filters/config-manager.ts
@@ -0,0 +1,196 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, computed, makeObservable, observable } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { TConfigOptions } from "@plane/constants";
+import { DEFAULT_FILTER_CONFIG_OPTIONS } from "@plane/constants";
+import type { TExternalFilter, TFilterConfig, TFilterProperty } from "@plane/types";
+// local imports
+import type { IFilterConfig } from "./config";
+import { FilterConfig } from "./config";
+import type { IFilterInstance } from "./filter";
+
+/**
+ * Interface for managing filter configurations.
+ * Provides methods to register, update, and retrieve filter configurations.
+ * - filterConfigs: Map storing filter configurations by their ID
+ * - configOptions: Configuration options controlling filter behavior
+ * - allConfigs: All registered filter configurations
+ * - allAvailableConfigs: All available filter configurations based on current state
+ * - getConfigByProperty: Retrieves a filter configuration by its ID
+ * - register: Registers a single filter configuration
+ * - registerAll: Registers multiple filter configurations
+ * - updateConfigByProperty: Updates an existing filter configuration by ID
+ * @template P - The filter property type extending TFilterProperty
+ */
+export interface IFilterConfigManager<P extends TFilterProperty> {
+  // observables
+  filterConfigs: Map<P, IFilterConfig<P>>; // filter property -> config
+  configOptions: TConfigOptions;
+  areConfigsReady: boolean;
+  // computed
+  allAvailableConfigs: IFilterConfig<P>[];
+  // computed functions
+  getConfigByProperty: (property: P) => IFilterConfig<P> | undefined;
+  // helpers
+  register: <C extends TFilterConfig<P>>(config: C) => void;
+  registerAll: (configs: TFilterConfig<P>[]) => void;
+  updateConfigByProperty: (property: P, configUpdates: Partial<TFilterConfig<P>>) => void;
+  setAreConfigsReady: (value: boolean) => void;
+}
+
+/**
+ * Parameters for initializing the FilterConfigManager.
+ * - options: Optional configuration options to override defaults
+ */
+export type TConfigManagerParams = {
+  options?: Partial<TConfigOptions>;
+};
+
+/**
+ * Manages filter configurations for a filter instance.
+ * Handles registration, updates, and retrieval of filter configurations.
+ * Provides computed properties for available configurations based on current filter state.
+ *
+ * @template P - The filter property type extending TFilterProperty
+ * @template V - The filter value type extending TFilterValue
+ * @template E - The external filter type extending TExternalFilter
+ */
+export class FilterConfigManager<
+  P extends TFilterProperty,
+  E extends TExternalFilter = TExternalFilter,
+> implements IFilterConfigManager<P> {
+  // observables
+  filterConfigs: IFilterConfigManager<P>["filterConfigs"];
+  configOptions: IFilterConfigManager<P>["configOptions"];
+  areConfigsReady: IFilterConfigManager<P>["areConfigsReady"];
+  // parent filter instance
+  private _filterInstance: IFilterInstance<P, E>;
+
+  /**
+   * Creates a new FilterConfigManager instance.
+   *
+   * @param filterInstance - The parent filter instance this manager belongs to
+   * @param params - Configuration parameters for the manager
+   */
+  constructor(filterInstance: IFilterInstance<P, E>, params: TConfigManagerParams) {
+    this.filterConfigs = new Map<P, IFilterConfig<P>>();
+    this.configOptions = this._initializeConfigOptions(params.options);
+    this.areConfigsReady = true;
+    // parent filter instance
+    this._filterInstance = filterInstance;
+
+    makeObservable(this, {
+      filterConfigs: observable,
+      configOptions: observable,
+      areConfigsReady: observable,
+      // computed
+      allAvailableConfigs: computed,
+      // helpers
+      register: action,
+      registerAll: action,
+      updateConfigByProperty: action,
+      setAreConfigsReady: action,
+    });
+  }
+
+  // ------------ computed ------------
+
+  /**
+   * Returns all available filterConfigs.
+   * If allowSameFilters is true, all enabled configs are returned.
+   * Otherwise, only configs that are not already applied to the filter instance are returned.
+   * @returns All available filterConfigs.
+   */
+  get allAvailableConfigs(): IFilterConfigManager<P>["allAvailableConfigs"] {
+    const appliedProperties = new Set(this._filterInstance.allConditions.map((condition) => condition.property));
+    // Return all enabled configs that either allow multiple filters or are not currently applied
+    return this._allEnabledConfigs.filter((config) => config.allowMultipleFilters || !appliedProperties.has(config.id));
+  }
+
+  // ------------ computed functions ------------
+
+  /**
+   * Returns a config by filter property.
+   * @param property - The property to get the config for.
+   * @returns The config for the property, or undefined if not found.
+   */
+  getConfigByProperty: IFilterConfigManager<P>["getConfigByProperty"] = computedFn(
+    (property) => this.filterConfigs.get(property) as IFilterConfig<P>
+  );
+
+  // ------------ helpers ------------
+
+  /**
+   * Register a config.
+   * If a config with the same property already exists, it will be updated with the new values.
+   * Otherwise, a new config will be created.
+   * @param configUpdates - The config updates to register.
+   */
+  register: IFilterConfigManager<P>["register"] = action((configUpdates) => {
+    if (this.filterConfigs.has(configUpdates.id)) {
+      // Update existing config if it has differences
+      const existingConfig = this.filterConfigs.get(configUpdates.id)!;
+      existingConfig.mutate(configUpdates);
+    } else {
+      // Create new config if it doesn't exist
+      this.filterConfigs.set(configUpdates.id, new FilterConfig(configUpdates));
+    }
+  });
+
+  /**
+   * Register all configs.
+   * @param configs - The configs to register.
+   */
+  registerAll: IFilterConfigManager<P>["registerAll"] = action((configs) => {
+    configs.forEach((config) => this.register(config));
+  });
+
+  /**
+   * Updates a config by filter property.
+   * @param property - The property of the config to update.
+   * @param configUpdates - The updates to apply to the config.
+   */
+  updateConfigByProperty: IFilterConfigManager<P>["updateConfigByProperty"] = action((property, configUpdates) => {
+    const prevConfig = this.filterConfigs.get(property);
+    prevConfig?.mutate(configUpdates);
+  });
+
+  /**
+   * Updates the configs ready state.
+   * @param value - The new configs ready state.
+   */
+  setAreConfigsReady: IFilterConfigManager<P>["setAreConfigsReady"] = action((value) => {
+    this.areConfigsReady = value;
+  });
+
+  // ------------ private computed ------------
+
+  private get _allConfigs(): IFilterConfig<P>[] {
+    return Array.from(this.filterConfigs.values());
+  }
+
+  /**
+   * Returns all enabled filterConfigs.
+   * @returns All enabled filterConfigs.
+   */
+  private get _allEnabledConfigs(): IFilterConfig<P>[] {
+    return this._allConfigs.filter((config) => config.isEnabled);
+  }
+
+  // ------------ private helpers ------------
+
+  /**
+   * Initializes the config options.
+   * @param options - The options to initialize the config options with.
+   * @returns The initialized config options.
+   */
+  private _initializeConfigOptions(options?: Partial<TConfigOptions>): TConfigOptions {
+    return DEFAULT_FILTER_CONFIG_OPTIONS ? { ...DEFAULT_FILTER_CONFIG_OPTIONS, ...options } : options || {};
+  }
+}
diff --git a/packages/shared-state/src/store/rich-filters/config.ts b/packages/shared-state/src/store/rich-filters/config.ts
new file mode 100644
index 0000000..3b2e9b1
--- /dev/null
+++ b/packages/shared-state/src/store/rich-filters/config.ts
@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import { EMPTY_OPERATOR_LABEL } from "@plane/constants";
+import type {
+  TSupportedOperators,
+  TFilterConfig,
+  TFilterProperty,
+  TFilterValue,
+  TOperatorSpecificConfigs,
+  TAllAvailableOperatorsForDisplay,
+} from "@plane/types";
+import { FILTER_FIELD_TYPE } from "@plane/types";
+import {
+  getOperatorLabel,
+  isDateFilterType,
+  getDateOperatorLabel,
+  isDateFilterOperator,
+  getOperatorForPayload,
+} from "@plane/utils";
+
+type TOperatorOptionForDisplay = {
+  value: TAllAvailableOperatorsForDisplay;
+  label: string;
+};
+
+export interface IFilterConfig<P extends TFilterProperty> extends TFilterConfig<P> {
+  // computed
+  allEnabledSupportedOperators: TSupportedOperators[];
+  firstOperator: TSupportedOperators | undefined;
+  // computed functions
+  getOperatorConfig: (
+    operator: TAllAvailableOperatorsForDisplay
+  ) => TOperatorSpecificConfigs[keyof TOperatorSpecificConfigs] | undefined;
+  getLabelForOperator: (operator: TAllAvailableOperatorsForDisplay | undefined) => string;
+  getDisplayOperatorByValue: <T extends TSupportedOperators>(operator: T, value: TFilterValue) => T;
+  getAllDisplayOperatorOptionsByValue: (value: TFilterValue) => TOperatorOptionForDisplay[];
+  // actions
+  mutate: (updates: Partial<TFilterConfig<P>>) => void;
+}
+
+export class FilterConfig<P extends TFilterProperty> implements IFilterConfig<P> {
+  // observables
+  id: IFilterConfig<P>["id"];
+  label: IFilterConfig<P>["label"];
+  icon?: IFilterConfig<P>["icon"];
+  isEnabled: IFilterConfig<P>["isEnabled"];
+  supportedOperatorConfigsMap: IFilterConfig<P>["supportedOperatorConfigsMap"];
+  allowMultipleFilters: IFilterConfig<P>["allowMultipleFilters"];
+
+  /**
+   * Creates a new FilterConfig instance.
+   * @param params - The parameters for the filter config.
+   */
+  constructor(params: TFilterConfig<P>) {
+    this.id = params.id;
+    this.label = params.label;
+    this.icon = params.icon;
+    this.isEnabled = params.isEnabled;
+    this.supportedOperatorConfigsMap = params.supportedOperatorConfigsMap;
+    this.allowMultipleFilters = params.allowMultipleFilters;
+
+    makeObservable(this, {
+      id: observable,
+      label: observable,
+      icon: observable,
+      isEnabled: observable,
+      supportedOperatorConfigsMap: observable,
+      allowMultipleFilters: observable,
+      // computed
+      allEnabledSupportedOperators: computed,
+      firstOperator: computed,
+      // actions
+      mutate: action,
+    });
+  }
+
+  // ------------ computed ------------
+
+  /**
+   * Returns all supported operators.
+   * @returns All supported operators.
+   */
+  get allEnabledSupportedOperators(): IFilterConfig<P>["allEnabledSupportedOperators"] {
+    return Array.from(this.supportedOperatorConfigsMap.entries())
+      .filter(([, operatorConfig]) => operatorConfig.isOperatorEnabled)
+      .map(([operator]) => operator);
+  }
+
+  /**
+   * Returns the first operator.
+   * @returns The first operator.
+   */
+  get firstOperator(): IFilterConfig<P>["firstOperator"] {
+    return this.allEnabledSupportedOperators[0];
+  }
+
+  // ------------ computed functions ------------
+
+  /**
+   * Returns the operator config.
+   * @param operator - The operator.
+   * @returns The operator config.
+   */
+  getOperatorConfig: IFilterConfig<P>["getOperatorConfig"] = computedFn((operator) =>
+    this.supportedOperatorConfigsMap.get(getOperatorForPayload(operator).operator)
+  );
+
+  /**
+   * Returns the label for an operator.
+   * @param operator - The operator.
+   * @returns The label for the operator.
+   */
+  getLabelForOperator: IFilterConfig<P>["getLabelForOperator"] = computedFn((operator) => {
+    if (!operator) return EMPTY_OPERATOR_LABEL;
+
+    const operatorConfig = this.getOperatorConfig(operator);
+
+    if (operatorConfig?.operatorLabel) {
+      return operatorConfig.operatorLabel;
+    }
+
+    if (operatorConfig?.type && isDateFilterType(operatorConfig.type) && isDateFilterOperator(operator)) {
+      return getDateOperatorLabel(operator);
+    }
+
+    return getOperatorLabel(operator);
+  });
+
+  /**
+   * Returns the operator for a value.
+   * @param value - The value.
+   * @returns The operator for the value.
+   */
+  getDisplayOperatorByValue: IFilterConfig<P>["getDisplayOperatorByValue"] = computedFn((operator, value) => {
+    const operatorConfig = this.getOperatorConfig(operator);
+    if (operatorConfig?.type === FILTER_FIELD_TYPE.MULTI_SELECT && (Array.isArray(value) ? value.length : 0) <= 1) {
+      return operatorConfig.singleValueOperator as typeof operator;
+    }
+    return operator;
+  });
+
+  /**
+   * Returns all supported operator options for display in the filter UI.
+   * This method filters out operators that are already applied (unless multiple filters are allowed)
+   * and includes both positive and negative variants when supported.
+   *
+   * @param value - The current filter value used to determine the appropriate operator variant
+   * @returns Array of operator options with their display labels and values
+   */
+  getAllDisplayOperatorOptionsByValue: IFilterConfig<P>["getAllDisplayOperatorOptionsByValue"] = computedFn((value) => {
+    const operatorOptions: TOperatorOptionForDisplay[] = [];
+
+    // Process each supported operator to build display options
+    for (const operator of this.allEnabledSupportedOperators) {
+      const displayOperator = this.getDisplayOperatorByValue(operator, value);
+      const displayOperatorLabel = this.getLabelForOperator(displayOperator);
+      operatorOptions.push({
+        value: operator,
+        label: displayOperatorLabel,
+      });
+
+      const additionalOperatorOption = this._getAdditionalOperatorOptions(operator, value);
+      if (additionalOperatorOption) {
+        operatorOptions.push(additionalOperatorOption);
+      }
+    }
+
+    return operatorOptions;
+  });
+
+  // ------------ actions ------------
+
+  /**
+   * Mutates the config.
+   * @param updates - The updates to apply to the config.
+   */
+  mutate: IFilterConfig<P>["mutate"] = action((updates) => {
+    runInAction(() => {
+      for (const key in updates) {
+        if (updates.hasOwnProperty(key)) {
+          const configKey = key as keyof TFilterConfig<P>;
+          set(this, configKey, updates[configKey]);
+        }
+      }
+    });
+  });
+
+  // ------------ private helpers ------------
+
+  private _getAdditionalOperatorOptions = (
+    _operator: TSupportedOperators,
+    _value: TFilterValue
+  ): TOperatorOptionForDisplay | undefined => undefined;
+}
diff --git a/packages/shared-state/src/store/rich-filters/filter-helpers.ts b/packages/shared-state/src/store/rich-filters/filter-helpers.ts
new file mode 100644
index 0000000..40d6159
--- /dev/null
+++ b/packages/shared-state/src/store/rich-filters/filter-helpers.ts
@@ -0,0 +1,283 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cloneDeep } from "lodash-es";
+import { action, makeObservable, observable, toJS } from "mobx";
+// plane imports
+import type { TAutoVisibilityOptions, TExpressionOptions } from "@plane/constants";
+import { DEFAULT_FILTER_EXPRESSION_OPTIONS } from "@plane/constants";
+import type {
+  IFilterAdapter,
+  TSupportedOperators,
+  TFilterConditionNode,
+  TFilterExpression,
+  TFilterValue,
+  TFilterProperty,
+  TExternalFilter,
+  TLogicalOperator,
+  TFilterConditionPayload,
+} from "@plane/types";
+import { LOGICAL_OPERATOR } from "@plane/types";
+import { addAndCondition, createConditionNode, updateNodeInExpression } from "@plane/utils";
+// local imports
+import type { IFilterInstance } from "./filter";
+
+type TFilterInstanceHelperParams<P extends TFilterProperty, E extends TExternalFilter> = {
+  adapter: IFilterAdapter<P, E>;
+};
+
+/**
+ * Interface for filter instance helper utilities.
+ * Provides comprehensive methods for filter expression manipulation, node operations,
+ * operator utilities, and expression restructuring.
+ * @template P - The filter property type extending TFilterProperty
+ * @template E - The external filter type extending TExternalFilter
+ */
+export interface IFilterInstanceHelper<P extends TFilterProperty, E extends TExternalFilter> {
+  isVisible: boolean;
+  // initialization
+  initializeExpression: (initialExpression?: E) => TFilterExpression<P> | null;
+  initializeExpressionOptions: (expressionOptions?: Partial<TExpressionOptions<E>>) => TExpressionOptions<E>;
+  // visibility
+  setInitialVisibility: (visibilityOption: TAutoVisibilityOptions) => void;
+  toggleVisibility: (isVisible?: boolean) => void;
+  // condition operations
+  addConditionToExpression: <V extends TFilterValue>(
+    expression: TFilterExpression<P> | null,
+    groupOperator: TLogicalOperator,
+    condition: TFilterConditionPayload<P, V>,
+    isNegation: boolean
+  ) => TFilterExpression<P> | null;
+  handleConditionPropertyUpdate: (
+    expression: TFilterExpression<P>,
+    conditionId: string,
+    property: P,
+    operator: TSupportedOperators,
+    isNegation: boolean
+  ) => TFilterExpression<P> | null;
+  // group operations
+  restructureExpressionForOperatorChange: (
+    expression: TFilterExpression<P>,
+    conditionId: string,
+    newOperator: TSupportedOperators,
+    isNegation: boolean,
+    shouldResetValue: boolean
+  ) => TFilterExpression<P> | null;
+}
+
+/**
+ * Comprehensive helper class for filter instance operations.
+ * Provides utilities for filter expression manipulation, node operations,
+ * operator transformations, and expression restructuring.
+ *
+ * @template K - The filter property type extending TFilterProperty
+ * @template E - The external filter type extending TExternalFilter
+ */
+export class FilterInstanceHelper<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+> implements IFilterInstanceHelper<P, E> {
+  // parent filter instance
+  private _filterInstance: IFilterInstance<P, E>;
+  // adapter
+  private adapter: IFilterAdapter<P, E>;
+  // visibility
+  isVisible: boolean;
+
+  /**
+   * Creates a new FilterInstanceHelper instance.
+   *
+   * @param adapter - The filter adapter for converting between internal and external formats
+   */
+  constructor(filterInstance: IFilterInstance<P, E>, params: TFilterInstanceHelperParams<P, E>) {
+    this._filterInstance = filterInstance;
+    this.adapter = params.adapter;
+    this.isVisible = false;
+
+    makeObservable(this, {
+      isVisible: observable,
+      setInitialVisibility: action,
+      toggleVisibility: action,
+    });
+  }
+
+  // ------------ initialization ------------
+
+  /**
+   * Initializes the filter expression from external format.
+   * @param initialExpression - The initial expression to initialize the filter with
+   * @returns The initialized filter expression or null if no initial expression provided
+   */
+  initializeExpression: IFilterInstanceHelper<P, E>["initializeExpression"] = (initialExpression) => {
+    if (!initialExpression) return null;
+    return this.adapter.toInternal(toJS(cloneDeep(initialExpression)));
+  };
+
+  /**
+   * Initializes the filter expression options with defaults.
+   * @param expressionOptions - Optional expression options to override defaults
+   * @returns The initialized filter expression options
+   */
+  initializeExpressionOptions: IFilterInstanceHelper<P, E>["initializeExpressionOptions"] = (expressionOptions) => ({
+    ...DEFAULT_FILTER_EXPRESSION_OPTIONS,
+    ...expressionOptions,
+  });
+
+  /**
+   * Sets the initial visibility state for the filter based on options and active filters.
+   * @param visibilityOption - The visibility options for the filter instance.
+   * @returns The initial visibility state
+   */
+  setInitialVisibility: IFilterInstanceHelper<P, E>["setInitialVisibility"] = action((visibilityOption) => {
+    // If explicit initial visibility is provided, use it
+    if (visibilityOption.autoSetVisibility === false) {
+      this.isVisible = visibilityOption.isVisibleOnMount;
+      return;
+    }
+
+    // If filter has active filters, make it visible
+    if (this._filterInstance.hasActiveFilters) {
+      this.isVisible = true;
+      return;
+    }
+
+    // Default to hidden if no active filters
+    this.isVisible = false;
+    return;
+  });
+
+  /**
+   * Toggles the visibility of the filter.
+   * @param isVisible - The visibility to set.
+   */
+  toggleVisibility: IFilterInstanceHelper<P, E>["toggleVisibility"] = action((isVisible) => {
+    if (isVisible !== undefined) {
+      this.isVisible = isVisible;
+      return;
+    }
+    this.isVisible = !this.isVisible;
+  });
+
+  // ------------ condition operations ------------
+
+  /**
+   * Adds a condition to the filter expression based on the logical operator.
+   * @param expression - The current filter expression
+   * @param groupOperator - The logical operator to use for the condition
+   * @param condition - The condition to add
+   * @param isNegation - Whether the condition should be negated
+   * @returns The updated filter expression
+   */
+  addConditionToExpression: IFilterInstanceHelper<P, E>["addConditionToExpression"] = (
+    expression,
+    groupOperator,
+    condition,
+    isNegation
+  ) => this._addConditionByOperator(expression, groupOperator, this._getConditionPayloadToAdd(condition, isNegation));
+
+  /**
+   * Updates the property and operator of a condition in the filter expression.
+   * This method updates the property, operator, resets the value, and handles negation properly.
+   * @param expression - The filter expression to operate on
+   * @param conditionId - The ID of the condition being updated
+   * @param property - The new property for the condition
+   * @param operator - The new operator for the condition
+   * @param isNegation - Whether the condition should be negated
+   * @returns The updated expression
+   */
+  handleConditionPropertyUpdate: IFilterInstanceHelper<P, E>["handleConditionPropertyUpdate"] = (
+    expression,
+    conditionId,
+    property,
+    operator,
+    isNegation
+  ) => {
+    const payload = { property, operator, value: undefined };
+
+    return this._updateCondition(expression, conditionId, payload, isNegation);
+  };
+
+  // ------------ group operations ------------
+
+  /**
+   * Restructures the expression when a condition's operator changes between positive and negative.
+   * @param expression - The filter expression to operate on
+   * @param conditionId - The ID of the condition being updated
+   * @param newOperator - The new operator for the condition
+   * @param isNegation - Whether the operator is negation
+   * @param shouldResetValue - Whether to reset the condition value
+   * @returns The restructured expression
+   */
+  restructureExpressionForOperatorChange: IFilterInstanceHelper<P, E>["restructureExpressionForOperatorChange"] = (
+    expression,
+    conditionId,
+    newOperator,
+    isNegation,
+    shouldResetValue
+  ) => {
+    const payload = shouldResetValue ? { operator: newOperator, value: undefined } : { operator: newOperator };
+
+    return this._updateCondition(expression, conditionId, payload, isNegation);
+  };
+
+  // ------------ private helpers ------------
+
+  /**
+   * Gets the condition payload to add to the expression.
+   * @param conditionNode - The condition node to add
+   * @param isNegation - Whether the condition should be negated
+   * @returns The condition payload to add
+   */
+  private _getConditionPayloadToAdd = (
+    condition: TFilterConditionPayload<P, TFilterValue>,
+    _isNegation: boolean
+  ): TFilterExpression<P> => {
+    const conditionNode = createConditionNode(condition);
+
+    return conditionNode;
+  };
+
+  /**
+   * Handles the logical operator switch for adding conditions.
+   * @param expression - The current expression
+   * @param groupOperator - The logical operator
+   * @param conditionToAdd - The condition to add
+   * @returns The updated expression
+   */
+  private _addConditionByOperator(
+    expression: TFilterExpression<P> | null,
+    groupOperator: TLogicalOperator,
+    conditionToAdd: TFilterExpression<P>
+  ): TFilterExpression<P> | null {
+    switch (groupOperator) {
+      case LOGICAL_OPERATOR.AND:
+        return addAndCondition(expression, conditionToAdd);
+      default:
+        console.warn(`Unsupported logical operator: ${groupOperator}`);
+        return expression;
+    }
+  }
+
+  /**
+   * Updates a condition with the given payload and handles negation wrapping/unwrapping.
+   * @param expression - The filter expression to operate on
+   * @param conditionId - The ID of the condition being updated
+   * @param payload - The payload to update the condition with
+   * @param isNegation - Whether the condition should be negated
+   * @returns The updated expression with proper negation handling
+   */
+  private _updateCondition = (
+    expression: TFilterExpression<P>,
+    conditionId: string,
+    payload: Partial<TFilterConditionNode<P, TFilterValue>>,
+    _isNegation: boolean
+  ): TFilterExpression<P> | null => {
+    // Update the condition with the payload
+    updateNodeInExpression(expression, conditionId, payload);
+
+    return expression;
+  };
+}
diff --git a/packages/shared-state/src/store/rich-filters/filter.ts b/packages/shared-state/src/store/rich-filters/filter.ts
new file mode 100644
index 0000000..240c2f3
--- /dev/null
+++ b/packages/shared-state/src/store/rich-filters/filter.ts
@@ -0,0 +1,571 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { cloneDeep, isEqual } from "lodash-es";
+import { action, computed, makeObservable, observable, toJS } from "mobx";
+import { computedFn } from "mobx-utils";
+import { v4 as uuidv4 } from "uuid";
+// plane imports
+import type {
+  TClearFilterOptions,
+  TExpressionOptions,
+  TFilterOptions,
+  TSaveViewOptions,
+  TUpdateViewOptions,
+} from "@plane/constants";
+import { DEFAULT_FILTER_VISIBILITY_OPTIONS } from "@plane/constants";
+import type {
+  IFilterAdapter,
+  SingleOrArray,
+  TAllAvailableOperatorsForDisplay,
+  TExternalFilter,
+  TFilterConditionNode,
+  TFilterConditionNodeForDisplay,
+  TFilterConditionPayload,
+  TFilterExpression,
+  TFilterProperty,
+  TFilterValue,
+  TLogicalOperator,
+  TSupportedOperators,
+} from "@plane/types";
+import { FILTER_NODE_TYPE } from "@plane/types";
+// local imports
+import {
+  deepCompareFilterExpressions,
+  extractConditions,
+  extractConditionsWithDisplayOperators,
+  findConditionsByPropertyAndOperator,
+  findNodeById,
+  hasValidValue,
+  removeNodeFromExpression,
+  sanitizeAndStabilizeExpression,
+  shouldNotifyChangeForExpression,
+  updateNodeInExpression,
+} from "@plane/utils";
+import type { IFilterConfigManager } from "./config-manager";
+import { FilterConfigManager } from "./config-manager";
+import type { IFilterInstanceHelper } from "./filter-helpers";
+import { FilterInstanceHelper } from "./filter-helpers";
+
+/**
+ * Interface for a filter instance.
+ * Provides methods to manage the filter expression and notify changes.
+ * - id: The id of the filter instance
+ * - expression: The filter expression
+ * - adapter: The filter adapter
+ * - configManager: The filter config manager
+ * - onExpressionChange: The callback to notify when the expression changes
+ * - hasActiveFilters: Whether the filter instance has any active filters
+ * - allConditions: All conditions in the filter expression
+ * - allConditionsForDisplay: All conditions in the filter expression
+ * - addCondition: Adds a condition to the filter expression
+ * - updateConditionOperator: Updates the operator of a condition in the filter expression
+ * - updateConditionValue: Updates the value of a condition in the filter expression
+ * - removeCondition: Removes a condition from the filter expression
+ * - clearFilters: Clears the filter expression
+ * @template P - The filter property type extending TFilterProperty
+ * @template E - The external filter type extending TExternalFilter
+ */
+export interface IFilterInstance<P extends TFilterProperty, E extends TExternalFilter> {
+  // observables
+  id: string;
+  initialFilterExpression: TFilterExpression<P> | null;
+  expression: TFilterExpression<P> | null;
+  adapter: IFilterAdapter<P, E>;
+  configManager: IFilterConfigManager<P>;
+  onExpressionChange?: (expression: E) => void;
+  // computed
+  hasActiveFilters: boolean;
+  hasChanges: boolean;
+  isVisible: boolean;
+  allConditions: TFilterConditionNode<P, TFilterValue>[];
+  allConditionsForDisplay: TFilterConditionNodeForDisplay<P, TFilterValue>[];
+  // computed option helpers
+  clearFilterOptions: TClearFilterOptions | undefined;
+  saveViewOptions: TSaveViewOptions<E> | undefined;
+  updateViewOptions: TUpdateViewOptions<E> | undefined;
+  // computed permissions
+  canClearFilters: boolean;
+  canSaveView: boolean;
+  canUpdateView: boolean;
+  // visibility
+  toggleVisibility: (isVisible?: boolean) => void;
+  // filter expression actions
+  resetExpression: (externalExpression: E, shouldResetInitialExpression?: boolean) => void;
+  // filter condition
+  findConditionsByPropertyAndOperator: (
+    property: P,
+    operator: TAllAvailableOperatorsForDisplay
+  ) => TFilterConditionNodeForDisplay<P, TFilterValue>[];
+  findFirstConditionByPropertyAndOperator: (
+    property: P,
+    operator: TAllAvailableOperatorsForDisplay
+  ) => TFilterConditionNodeForDisplay<P, TFilterValue> | undefined;
+  addCondition: <V extends TFilterValue>(
+    groupOperator: TLogicalOperator,
+    condition: TFilterConditionPayload<P, V>,
+    isNegation: boolean
+  ) => void;
+  updateConditionProperty: (
+    conditionId: string,
+    property: P,
+    operator: TSupportedOperators,
+    isNegation: boolean
+  ) => void;
+  updateConditionOperator: (conditionId: string, operator: TSupportedOperators, isNegation: boolean) => void;
+  updateConditionValue: <V extends TFilterValue>(
+    conditionId: string,
+    value: SingleOrArray<V>,
+    forceUpdate?: boolean
+  ) => void;
+  removeCondition: (conditionId: string) => void;
+  // config actions
+  clearFilters: () => Promise<void>;
+  saveView: () => Promise<void>;
+  updateView: () => Promise<void>;
+  // expression options actions
+  updateExpressionOptions: (newOptions: Partial<TExpressionOptions<E>>) => void;
+}
+
+type TFilterParams<P extends TFilterProperty, E extends TExternalFilter> = {
+  adapter: IFilterAdapter<P, E>;
+  options?: Partial<TFilterOptions<E>>;
+  initialExpression?: E;
+  onExpressionChange?: (expression: E) => void;
+};
+
+export class FilterInstance<P extends TFilterProperty, E extends TExternalFilter> implements IFilterInstance<P, E> {
+  // observables
+  id: string;
+  initialFilterExpression: TFilterExpression<P> | null;
+  expression: TFilterExpression<P> | null;
+  expressionOptions: TExpressionOptions<E>;
+  adapter: IFilterAdapter<P, E>;
+  configManager: IFilterConfigManager<P>;
+  onExpressionChange?: (expression: E) => void;
+
+  // helper instance
+  private helper: IFilterInstanceHelper<P, E>;
+
+  constructor(params: TFilterParams<P, E>) {
+    this.id = uuidv4();
+    this.adapter = params.adapter;
+    this.helper = new FilterInstanceHelper<P, E>(this, {
+      adapter: this.adapter,
+    });
+    this.configManager = new FilterConfigManager<P, E>(this, {
+      options: params.options?.config,
+    });
+    // initialize expression
+    const initialExpression = this.helper.initializeExpression(params.initialExpression);
+    this.initialFilterExpression = cloneDeep(initialExpression);
+    this.expression = cloneDeep(initialExpression);
+    this.expressionOptions = this.helper.initializeExpressionOptions(params.options?.expression);
+    this.onExpressionChange = params.onExpressionChange;
+    this.helper.setInitialVisibility(params.options?.visibility ?? DEFAULT_FILTER_VISIBILITY_OPTIONS);
+
+    makeObservable(this, {
+      // observables
+      id: observable,
+      initialFilterExpression: observable,
+      expression: observable,
+      expressionOptions: observable.struct,
+      adapter: observable,
+      configManager: observable,
+      // computed
+      hasActiveFilters: computed,
+      hasChanges: computed,
+      isVisible: computed,
+      allConditions: computed,
+      allConditionsForDisplay: computed,
+      // computed option helpers
+      clearFilterOptions: computed,
+      saveViewOptions: computed,
+      updateViewOptions: computed,
+      // computed permissions
+      canClearFilters: computed,
+      canSaveView: computed,
+      canUpdateView: computed,
+      // actions
+      resetExpression: action,
+      findConditionsByPropertyAndOperator: action,
+      findFirstConditionByPropertyAndOperator: action,
+      addCondition: action,
+      updateConditionOperator: action,
+      updateConditionValue: action,
+      removeCondition: action,
+      clearFilters: action,
+      saveView: action,
+      updateView: action,
+      updateExpressionOptions: action,
+    });
+  }
+
+  // ------------ computed ------------
+
+  /**
+   * Checks if the filter instance has any active filters.
+   * @returns True if the filter instance has any active filters, false otherwise.
+   */
+  get hasActiveFilters(): IFilterInstance<P, E>["hasActiveFilters"] {
+    // if the expression is null, return false
+    if (!this.expression) return false;
+    // if there are no conditions, return false
+    if (this.allConditionsForDisplay.length === 0) return false;
+    // if there are conditions, return true if any of them have a valid value
+    return this.allConditionsForDisplay.some((condition) => hasValidValue(condition.value));
+  }
+
+  /**
+   * Checks if the filter instance has any changes with respect to the initial expression.
+   * @returns True if the filter instance has any changes, false otherwise.
+   */
+  get hasChanges(): IFilterInstance<P, E>["hasChanges"] {
+    return !deepCompareFilterExpressions(this.initialFilterExpression, this.expression);
+  }
+
+  /**
+   * Returns the visibility of the filter instance.
+   * @returns The visibility of the filter instance.
+   */
+  get isVisible(): IFilterInstance<P, E>["isVisible"] {
+    return this.helper.isVisible;
+  }
+
+  /**
+   * Returns all conditions from the filter expression.
+   * @returns An array of filter conditions.
+   */
+  get allConditions(): IFilterInstance<P, E>["allConditions"] {
+    if (!this.expression) return [];
+    return extractConditions(this.expression);
+  }
+
+  /**
+   * Returns all conditions in the filter expression for display purposes.
+   * @returns An array of filter conditions for display purposes.
+   */
+  get allConditionsForDisplay(): IFilterInstance<P, E>["allConditionsForDisplay"] {
+    if (!this.expression) return [];
+    return extractConditionsWithDisplayOperators(this.expression);
+  }
+
+  // ------------ computed option helpers ------------
+
+  /**
+   * Returns the clear filter options.
+   * @returns The clear filter options.
+   */
+  get clearFilterOptions(): IFilterInstance<P, E>["clearFilterOptions"] {
+    return this.expressionOptions.clearFilterOptions;
+  }
+
+  /**
+   * Returns the save view options.
+   * @returns The save view options.
+   */
+  get saveViewOptions(): IFilterInstance<P, E>["saveViewOptions"] {
+    return this.expressionOptions.saveViewOptions;
+  }
+
+  /**
+   * Returns the update view options.
+   * @returns The update view options.
+   */
+  get updateViewOptions(): IFilterInstance<P, E>["updateViewOptions"] {
+    return this.expressionOptions.updateViewOptions;
+  }
+
+  // ------------ computed permissions ------------
+
+  /**
+   * Checks if the filter expression can be cleared.
+   * @returns True if the filter expression can be cleared, false otherwise.
+   */
+  get canClearFilters(): IFilterInstance<P, E>["canClearFilters"] {
+    if (!this.expression) return false;
+    if (this.allConditionsForDisplay.length === 0) return false;
+    return this.clearFilterOptions ? !this.clearFilterOptions.isDisabled : true;
+  }
+
+  /**
+   * Checks if the filter expression can be saved as a view.
+   * @returns True if the filter instance can be saved, false otherwise.
+   */
+  get canSaveView(): IFilterInstance<P, E>["canSaveView"] {
+    return this.hasActiveFilters && !!this.saveViewOptions && !this.saveViewOptions.isDisabled;
+  }
+
+  /**
+   * Checks if the filter expression can be updated as a view.
+   * @returns True if the filter expression can be updated, false otherwise.
+   */
+  get canUpdateView(): IFilterInstance<P, E>["canUpdateView"] {
+    return (
+      !!this.updateViewOptions &&
+      (this.hasChanges || !!this.updateViewOptions.hasAdditionalChanges) &&
+      !this.updateViewOptions.isDisabled
+    );
+  }
+
+  // ------------ actions ------------
+
+  /**
+   * Toggles the visibility of the filter instance.
+   * @param isVisible - The visibility to set.
+   */
+  toggleVisibility: IFilterInstance<P, E>["toggleVisibility"] = action((isVisible) => {
+    this.helper.toggleVisibility(isVisible);
+  });
+
+  /**
+   * Resets the filter expression to the initial expression.
+   * @param externalExpression - The external expression to reset to.
+   */
+  resetExpression: IFilterInstance<P, E>["resetExpression"] = action(
+    (externalExpression, shouldResetInitialExpression = true) => {
+      this.expression = this.helper.initializeExpression(externalExpression);
+      if (shouldResetInitialExpression) {
+        this._resetInitialFilterExpression();
+      }
+      this._notifyExpressionChange();
+    }
+  );
+
+  /**
+   * Finds all conditions by property and operator.
+   * @param property - The property to find the conditions by.
+   * @param operator - The operator to find the conditions by.
+   * @returns All the conditions that match the property and operator.
+   */
+  findConditionsByPropertyAndOperator: IFilterInstance<P, E>["findConditionsByPropertyAndOperator"] = action(
+    (property, operator) => {
+      if (!this.expression) return [];
+      return findConditionsByPropertyAndOperator(this.expression, property, operator);
+    }
+  );
+
+  /**
+   * Finds the first condition by property and operator.
+   * @param property - The property to find the condition by.
+   * @param operator - The operator to find the condition by.
+   * @returns The first condition that matches the property and operator.
+   */
+  findFirstConditionByPropertyAndOperator: IFilterInstance<P, E>["findFirstConditionByPropertyAndOperator"] = action(
+    (property, operator) => {
+      if (!this.expression) return undefined;
+      const conditions = findConditionsByPropertyAndOperator(this.expression, property, operator);
+      return conditions[0];
+    }
+  );
+
+  /**
+   * Adds a condition to the filter expression.
+   * @param groupOperator - The logical operator to use for the condition.
+   * @param condition - The condition to add.
+   * @param isNegation - Whether the condition should be negated.
+   */
+  addCondition: IFilterInstance<P, E>["addCondition"] = action((groupOperator, condition, isNegation = false) => {
+    const conditionValue = condition.value;
+
+    this.expression = this.helper.addConditionToExpression(this.expression, groupOperator, condition, isNegation);
+
+    if (hasValidValue(conditionValue)) {
+      this._notifyExpressionChange();
+    }
+  });
+
+  /**
+   * Updates the property of a condition in the filter expression.
+   * @param conditionId - The id of the condition to update.
+   * @param property - The new property for the condition.
+   */
+  updateConditionProperty: IFilterInstance<P, E>["updateConditionProperty"] = action(
+    (conditionId: string, property: P, operator: TSupportedOperators, isNegation: boolean) => {
+      if (!this.expression) return;
+      const conditionBeforeUpdate = cloneDeep(findNodeById(this.expression, conditionId));
+      if (!conditionBeforeUpdate || conditionBeforeUpdate.type !== FILTER_NODE_TYPE.CONDITION) return;
+
+      // Update the condition property
+      const updatedExpression = this.helper.handleConditionPropertyUpdate(
+        this.expression,
+        conditionId,
+        property,
+        operator,
+        isNegation
+      );
+
+      if (updatedExpression) {
+        this.expression = updatedExpression;
+        this._notifyExpressionChange();
+      }
+    }
+  );
+
+  /**
+   * Updates the operator of a condition in the filter expression.
+   * @param conditionId - The id of the condition to update.
+   * @param operator - The new operator for the condition.
+   */
+  updateConditionOperator: IFilterInstance<P, E>["updateConditionOperator"] = action(
+    (conditionId: string, operator: TSupportedOperators, isNegation: boolean) => {
+      if (!this.expression) return;
+      const conditionBeforeUpdate = cloneDeep(findNodeById(this.expression, conditionId));
+      if (!conditionBeforeUpdate || conditionBeforeUpdate.type !== FILTER_NODE_TYPE.CONDITION) return;
+
+      // Get the operator configs for the current and new operators
+      const currentOperatorConfig = this.configManager
+        .getConfigByProperty(conditionBeforeUpdate.property)
+        ?.getOperatorConfig(conditionBeforeUpdate.operator);
+      const newOperatorConfig = this.configManager
+        .getConfigByProperty(conditionBeforeUpdate.property)
+        ?.getOperatorConfig(operator);
+      // Reset the value if the operator config types are different
+      const shouldResetConditionValue = currentOperatorConfig?.type !== newOperatorConfig?.type;
+
+      // Use restructuring logic for operator changes
+      const updatedExpression = this.helper.restructureExpressionForOperatorChange(
+        this.expression,
+        conditionId,
+        operator,
+        isNegation,
+        shouldResetConditionValue
+      );
+
+      if (updatedExpression) {
+        this.expression = updatedExpression;
+      }
+
+      if (hasValidValue(conditionBeforeUpdate.value)) {
+        this._notifyExpressionChange();
+      }
+    }
+  );
+
+  /**
+   * Updates the value of a condition in the filter expression with automatic optimization.
+   * @param conditionId - The id of the condition to update.
+   * @param value - The new value for the condition.
+   * @param forceUpdate - Whether to force the update even if the value is the same as the condition before update.
+   */
+  updateConditionValue: IFilterInstance<P, E>["updateConditionValue"] = action(
+    <V extends TFilterValue>(conditionId: string, value: SingleOrArray<V>, forceUpdate: boolean = false) => {
+      // If the expression is not valid, return
+      if (!this.expression) return;
+
+      // Get the condition before update
+      const conditionBeforeUpdate = cloneDeep(findNodeById(this.expression, conditionId));
+
+      // If the condition is not valid, return
+      if (!conditionBeforeUpdate || conditionBeforeUpdate.type !== FILTER_NODE_TYPE.CONDITION) return;
+
+      // If the value is not valid, remove the condition
+      if (!hasValidValue(value)) {
+        this.removeCondition(conditionId);
+        return;
+      }
+
+      // If the value is the same as the condition before update, return
+      if (!forceUpdate && isEqual(conditionBeforeUpdate.value, value)) {
+        return;
+      }
+
+      // Update the condition value
+      updateNodeInExpression(this.expression, conditionId, {
+        value,
+      });
+
+      // Notify the change
+      this._notifyExpressionChange();
+    }
+  );
+
+  /**
+   * Removes a condition from the filter expression.
+   * @param conditionId - The id of the condition to remove.
+   */
+  removeCondition: IFilterInstance<P, E>["removeCondition"] = action((conditionId) => {
+    if (!this.expression) return;
+    const { expression, shouldNotify } = removeNodeFromExpression(this.expression, conditionId);
+    this.expression = expression;
+    if (shouldNotify) {
+      this._notifyExpressionChange();
+    }
+  });
+
+  /**
+   * Clears the filter expression.
+   */
+  clearFilters: IFilterInstance<P, E>["clearFilters"] = action(async () => {
+    if (this.canClearFilters) {
+      const shouldNotify = shouldNotifyChangeForExpression(this.expression);
+      this.expression = null;
+      await this.clearFilterOptions?.onFilterClear();
+      if (shouldNotify) {
+        this._notifyExpressionChange();
+      }
+    } else {
+      console.warn("Cannot clear filters: invalid expression or missing options.");
+    }
+  });
+
+  /**
+   * Saves the filter expression.
+   */
+  saveView: IFilterInstance<P, E>["saveView"] = action(async () => {
+    if (this.canSaveView && this.saveViewOptions) {
+      await this.saveViewOptions.onViewSave(this._getExternalExpression());
+    } else {
+      console.warn("Cannot save view: invalid expression or missing options.");
+    }
+  });
+
+  /**
+   * Updates the filter expression.
+   */
+  updateView: IFilterInstance<P, E>["updateView"] = action(async () => {
+    if (this.canUpdateView && this.updateViewOptions) {
+      await this.updateViewOptions.onViewUpdate(this._getExternalExpression());
+      this._resetInitialFilterExpression();
+    } else {
+      console.warn("Cannot update view: invalid expression or missing options.");
+    }
+  });
+
+  /**
+   * Updates the expression options for the filter instance.
+   * This allows dynamic updates to options like isDisabled properties.
+   */
+  updateExpressionOptions: IFilterInstance<P, E>["updateExpressionOptions"] = action((newOptions) => {
+    this.expressionOptions = {
+      ...this.expressionOptions,
+      ...newOptions,
+    };
+  });
+
+  // ------------ private helpers ------------
+  /**
+   * Resets the initial filter expression to the current expression.
+   */
+  private _resetInitialFilterExpression(): void {
+    this.initialFilterExpression = cloneDeep(this.expression);
+  }
+
+  /**
+   * Returns the external filter representation of the filter instance.
+   * @returns The external filter representation of the filter instance.
+   */
+  private _getExternalExpression = computedFn(() =>
+    this.adapter.toExternal(sanitizeAndStabilizeExpression(toJS(this.expression)))
+  );
+
+  /**
+   * Notifies the parent component of the expression change.
+   */
+  private _notifyExpressionChange(): void {
+    this.onExpressionChange?.(this._getExternalExpression());
+  }
+}
diff --git a/packages/shared-state/src/store/rich-filters/index.ts b/packages/shared-state/src/store/rich-filters/index.ts
new file mode 100644
index 0000000..d5d9fe0
--- /dev/null
+++ b/packages/shared-state/src/store/rich-filters/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./adapter";
+export * from "./filter";
diff --git a/packages/shared-state/src/store/user.store.ts b/packages/shared-state/src/store/user.store.ts
new file mode 100644
index 0000000..b288d25
--- /dev/null
+++ b/packages/shared-state/src/store/user.store.ts
@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { makeObservable, observable } from "mobx";
+import type { IWorkspaceStore } from "./workspace.store";
+
+export interface IUserStore {
+  user: any;
+  workspaces: Map<string, IWorkspaceStore>;
+  isLoading: boolean;
+  error: any;
+}
+
+export class UserStore implements IUserStore {
+  user: any = null;
+  workspaces: Map<string, IWorkspaceStore> = new Map();
+  isLoading: boolean = false;
+  error: any = null;
+
+  constructor() {
+    makeObservable(this, {
+      user: observable.ref,
+      workspaces: observable,
+      isLoading: observable.ref,
+      error: observable.ref,
+    });
+  }
+}
+
+// userStore.ts
+
+// class UserStore {
+//   user: User | null = null;
+//   workspaces: Workspace[] = [];
+//   isLoading = false;
+//   error: string | null = null;
+//   private indexedDBService: IndexedDBService;
+
+//   constructor() {
+//     makeAutoObservable(this);
+//     this.indexedDBService = new IndexedDBService();
+//     this.init();
+//   }
+
+//   private async init() {
+//     try {
+//       await this.indexedDBService.init();
+//       await this.loadWorkspacesFromIndexedDB();
+//     } catch (error) {
+//       runInAction(() => {
+//         this.error = "Failed to initialize store";
+//         console.error("Store initialization error:", error);
+//       });
+//     }
+//   }
+
+//   setUser(user: User | null) {
+//     this.user = user;
+//   }
+
+//   async loadWorkspacesFromIndexedDB() {
+//     try {
+//       const workspaces = await this.indexedDBService.getWorkspaces();
+//       runInAction(() => {
+//         this.workspaces = workspaces;
+//       });
+//     } catch (error) {
+//       runInAction(() => {
+//         this.error = "Failed to load workspaces from IndexedDB";
+//         console.error("Load workspaces error:", error);
+//       });
+//     }
+//   }
+
+//   async fetchAndSyncWorkspaces() {
+//     this.isLoading = true;
+//     this.error = null;
+
+//     try {
+//       // Simulate API call to fetch workspaces
+//       const response = await fetch("/api/workspaces");
+//       const workspaces = await response.json();
+
+//       // Save to IndexedDB
+//       await this.indexedDBService.saveWorkspaces(workspaces);
+
+//       // Update MobX store
+//       runInAction(() => {
+//         this.workspaces = workspaces;
+//         this.isLoading = false;
+//       });
+//     } catch (error) {
+//       runInAction(() => {
+//         this.error = "Failed to fetch workspaces";
+//         this.isLoading = false;
+//         console.error("Fetch workspaces error:", error);
+//       });
+//     }
+//   }
+
+//   // Additional methods for workspace management
+//   async addWorkspace(workspace: Omit<Workspace, "id" | "createdAt" | "updatedAt">) {
+//     this.isLoading = true;
+//     this.error = null;
+
+//     try {
+//       // Simulate API call to create workspace
+//       const response = await fetch("/api/workspaces", {
+//         method: "POST",
+//         body: JSON.stringify(workspace),
+//       });
+//       const newWorkspace = await response.json();
+
+//       // Update local storage and state
+//       const updatedWorkspaces = [...this.workspaces, newWorkspace];
+//       await this.indexedDBService.saveWorkspaces(updatedWorkspaces);
+
+//       runInAction(() => {
+//         this.workspaces.push(newWorkspace);
+//         this.isLoading = false;
+//       });
+//     } catch (error) {
+//       runInAction(() => {
+//         this.error = "Failed to add workspace";
+//         this.isLoading = false;
+//         console.error("Add workspace error:", error);
+//       });
+//     }
+//   }
+
+//   logout() {
+//     this.user = null;
+//     this.workspaces = [];
+//     // Optionally clear IndexedDB data
+//     this.indexedDBService.init().then(() => {
+//       this.indexedDBService.saveWorkspaces([]);
+//     });
+//   }
+// }
diff --git a/packages/shared-state/src/store/work-item-filters/adapter.ts b/packages/shared-state/src/store/work-item-filters/adapter.ts
new file mode 100644
index 0000000..8d009f4
--- /dev/null
+++ b/packages/shared-state/src/store/work-item-filters/adapter.ts
@@ -0,0 +1,262 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { isEmpty } from "lodash-es";
+import type {
+  SingleOrArray,
+  TFilterExpression,
+  TFilterValue,
+  TSupportedOperators,
+  TWorkItemFilterConditionData,
+  TWorkItemFilterConditionKey,
+  TWorkItemFilterExpression,
+  TWorkItemFilterExpressionData,
+  TWorkItemFilterProperty,
+} from "@plane/types";
+import { LOGICAL_OPERATOR, MULTI_VALUE_OPERATORS, WORK_ITEM_FILTER_PROPERTY_KEYS } from "@plane/types";
+import { createConditionNode, createAndGroupNode, isAndGroupNode, isConditionNode } from "@plane/utils";
+// local imports
+import { FilterAdapter } from "../rich-filters/adapter";
+
+class WorkItemFiltersAdapter extends FilterAdapter<TWorkItemFilterProperty, TWorkItemFilterExpression> {
+  /**
+   * Converts external work item filter expression to internal filter tree
+   * @param externalFilter - The external filter expression
+   * @returns Internal filter expression or null
+   */
+  toInternal(externalFilter: TWorkItemFilterExpression): TFilterExpression<TWorkItemFilterProperty> | null {
+    if (!externalFilter || isEmpty(externalFilter)) return null;
+
+    try {
+      return this._convertExpressionToInternal(externalFilter);
+    } catch (error) {
+      console.error("Failed to convert external filter to internal:", error);
+      return null;
+    }
+  }
+
+  /**
+   * Recursively converts external expression data to internal filter tree
+   * @param expression - The external expression data
+   * @returns Internal filter expression
+   */
+  private _convertExpressionToInternal(
+    expression: TWorkItemFilterExpressionData
+  ): TFilterExpression<TWorkItemFilterProperty> {
+    if (!expression || isEmpty(expression)) {
+      throw new Error("Invalid expression: empty or null data");
+    }
+
+    // Check if it's a simple condition (has field property)
+    if (this._isWorkItemFilterConditionData(expression)) {
+      const conditionResult = this._extractWorkItemFilterConditionData(expression);
+      if (!conditionResult) {
+        throw new Error("Failed to extract condition data");
+      }
+
+      const [property, operator, value] = conditionResult;
+      return createConditionNode({
+        property,
+        operator,
+        value,
+      });
+    }
+
+    // It's a logical group - check which type
+    const expressionKeys = Object.keys(expression);
+
+    if (LOGICAL_OPERATOR.AND in expression) {
+      const andExpression = expression as { [LOGICAL_OPERATOR.AND]: TWorkItemFilterExpressionData[] };
+      const andConditions = andExpression[LOGICAL_OPERATOR.AND];
+
+      if (!Array.isArray(andConditions) || andConditions.length === 0) {
+        throw new Error("AND group must contain at least one condition");
+      }
+
+      const convertedConditions = andConditions.map((item) => this._convertExpressionToInternal(item));
+      return createAndGroupNode(convertedConditions);
+    }
+
+    throw new Error(`Invalid expression: unknown structure with keys [${expressionKeys.join(", ")}]`);
+  }
+
+  /**
+   * Converts internal filter expression to external format
+   * @param internalFilter - The internal filter expression
+   * @returns External filter expression
+   */
+  toExternal(internalFilter: TFilterExpression<TWorkItemFilterProperty>): TWorkItemFilterExpression {
+    if (!internalFilter) {
+      return {};
+    }
+
+    try {
+      return this._convertExpressionToExternal(internalFilter);
+    } catch (error) {
+      console.error("Failed to convert internal filter to external:", error);
+      return {};
+    }
+  }
+
+  /**
+   * Recursively converts internal expression to external format
+   * @param expression - The internal filter expression
+   * @returns External expression data
+   */
+  private _convertExpressionToExternal(
+    expression: TFilterExpression<TWorkItemFilterProperty>
+  ): TWorkItemFilterExpressionData {
+    if (isConditionNode(expression)) {
+      return this._createWorkItemFilterConditionData(expression.property, expression.operator, expression.value);
+    }
+
+    // It's a group node
+
+    if (isAndGroupNode(expression)) {
+      return {
+        [LOGICAL_OPERATOR.AND]: expression.children.map((child) => this._convertExpressionToExternal(child)),
+      } as TWorkItemFilterExpressionData;
+    }
+
+    throw new Error(`Unknown group node type for expression`);
+  }
+
+  /**
+   * Type guard to check if data is of type TWorkItemFilterConditionData
+   * @param data - The data to check
+   * @returns True if data is TWorkItemFilterConditionData, false otherwise
+   */
+  private _isWorkItemFilterConditionData = (data: unknown): data is TWorkItemFilterConditionData => {
+    if (!data || typeof data !== "object" || isEmpty(data)) return false;
+
+    const keys = Object.keys(data);
+    if (keys.length === 0) return false;
+
+    // Check if any key contains logical operators (would indicate it's a group)
+    const hasLogicalOperators = keys.some((key) => key === LOGICAL_OPERATOR.AND);
+    if (hasLogicalOperators) return false;
+
+    // All keys must match the work item filter condition key pattern
+    return keys.every((key) => this._isValidWorkItemFilterConditionKey(key));
+  };
+
+  /**
+   * Validates if a key is a valid work item filter condition key
+   * @param key - The key to validate
+   * @returns True if the key is valid
+   */
+  private _isValidWorkItemFilterConditionKey = (key: string): key is TWorkItemFilterConditionKey => {
+    if (typeof key !== "string" || key.length === 0) return false;
+
+    // Find the last occurrence of '__' to separate property from operator
+    const lastDoubleUnderscoreIndex = key.lastIndexOf("__");
+    if (
+      lastDoubleUnderscoreIndex === -1 ||
+      lastDoubleUnderscoreIndex === 0 ||
+      lastDoubleUnderscoreIndex === key.length - 2
+    ) {
+      return false;
+    }
+
+    const property = key.substring(0, lastDoubleUnderscoreIndex);
+    const operator = key.substring(lastDoubleUnderscoreIndex + 2);
+
+    // Validate property is in allowed list
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (!WORK_ITEM_FILTER_PROPERTY_KEYS.includes(property as any) && !property.startsWith("customproperty_")) {
+      return false;
+    }
+
+    // Validate operator is not empty
+    return operator.length > 0;
+  };
+
+  /**
+   * Extracts property, operator and value from work item filter condition data
+   * @param data - The condition data
+   * @returns Tuple of property, operator and value, or null if invalid
+   */
+  private _extractWorkItemFilterConditionData = (
+    data: TWorkItemFilterConditionData
+  ): [TWorkItemFilterProperty, TSupportedOperators, SingleOrArray<TFilterValue>] | null => {
+    const keys = Object.keys(data);
+    if (keys.length !== 1) {
+      console.error("Work item filter condition data must have exactly one key");
+      return null;
+    }
+
+    const key = keys[0];
+    if (!this._isValidWorkItemFilterConditionKey(key)) {
+      console.error(`Invalid work item filter condition key: ${key}`);
+      return null;
+    }
+
+    // Find the last occurrence of '__' to separate property from operator
+    const lastDoubleUnderscoreIndex = key.lastIndexOf("__");
+    const property = key.substring(0, lastDoubleUnderscoreIndex);
+    const operator = key.substring(lastDoubleUnderscoreIndex + 2) as TSupportedOperators;
+
+    const rawValue = data[key];
+
+    // Parse comma-separated values
+    const parsedValue = MULTI_VALUE_OPERATORS.includes(operator) ? this._parseFilterValue(rawValue) : rawValue;
+
+    return [property as TWorkItemFilterProperty, operator, parsedValue];
+  };
+
+  /**
+   * Parses filter value from string format
+   * @param value - The string value to parse
+   * @returns Parsed value as string or array of strings
+   */
+  private _parseFilterValue = (value: TFilterValue): SingleOrArray<TFilterValue> => {
+    if (!value) return value;
+
+    if (typeof value !== "string") return value;
+
+    // Handle empty string
+    if (value === "") return value;
+
+    // Split by comma if contains comma, otherwise return as single value
+    if (value.includes(",")) {
+      // Split and trim each value, filter out empty strings
+      const splitValues = value
+        .split(",")
+        .map((v) => v.trim())
+        .filter((v) => v.length > 0);
+
+      // Return single value if only one non-empty value after split
+      return splitValues.length === 1 ? splitValues[0] : splitValues;
+    }
+
+    return value;
+  };
+
+  /**
+   * Creates TWorkItemFilterConditionData from property, operator and value
+   * @param property - The filter property key
+   * @param operator - The filter operator
+   * @param value - The filter value
+   * @returns The condition data object
+   */
+  private _createWorkItemFilterConditionData = (
+    property: TWorkItemFilterProperty,
+    operator: TSupportedOperators,
+    value: SingleOrArray<TFilterValue>
+  ): TWorkItemFilterConditionData => {
+    const conditionKey = `${property}__${operator}`;
+
+    // Convert value to string format
+    const stringValue = Array.isArray(value) ? value.join(",") : value;
+
+    return {
+      [conditionKey]: stringValue,
+    } as TWorkItemFilterConditionData;
+  };
+}
+
+export const workItemFiltersAdapter = new WorkItemFiltersAdapter();
diff --git a/packages/shared-state/src/store/work-item-filters/filter.store.ts b/packages/shared-state/src/store/work-item-filters/filter.store.ts
new file mode 100644
index 0000000..f7826cc
--- /dev/null
+++ b/packages/shared-state/src/store/work-item-filters/filter.store.ts
@@ -0,0 +1,226 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { action, makeObservable, observable } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { TExpressionOptions } from "@plane/constants";
+import type { EIssuesStoreType, TWorkItemFilterExpression, TWorkItemFilterProperty } from "@plane/types";
+import { LOGICAL_OPERATOR } from "@plane/types";
+import { getOperatorForPayload } from "@plane/utils";
+// local imports
+import type { TWorkItemFilterCondition } from "../../utils";
+import { buildWorkItemFilterExpressionFromConditions } from "../../utils";
+import { FilterInstance } from "../rich-filters/filter";
+import { workItemFiltersAdapter } from "./adapter";
+import type { IWorkItemFilterInstance, TWorkItemFilterKey } from "./shared";
+
+type TGetOrCreateFilterParams = {
+  showOnMount?: boolean;
+  entityId: string;
+  entityType: EIssuesStoreType;
+  expressionOptions?: TExpressionOptions<TWorkItemFilterExpression>;
+  initialExpression?: TWorkItemFilterExpression;
+  onExpressionChange?: (expression: TWorkItemFilterExpression) => void;
+};
+
+export interface IWorkItemFilterStore {
+  filters: Map<TWorkItemFilterKey, IWorkItemFilterInstance>; // key is the entity id (project, cycle, workspace, teamspace, etc)
+  getFilter: (entityType: EIssuesStoreType, entityId: string) => IWorkItemFilterInstance | undefined;
+  getOrCreateFilter: (params: TGetOrCreateFilterParams) => IWorkItemFilterInstance;
+  resetExpression: (entityType: EIssuesStoreType, entityId: string, expression: TWorkItemFilterExpression) => void;
+  updateFilterExpressionFromConditions: (
+    entityType: EIssuesStoreType,
+    entityId: string,
+    conditions: TWorkItemFilterCondition[],
+    fallbackFn: (expression: TWorkItemFilterExpression) => Promise<void>
+  ) => Promise<void>;
+  updateFilterValueFromSidebar: (
+    entityType: EIssuesStoreType,
+    entityId: string,
+    condition: TWorkItemFilterCondition
+  ) => void;
+  deleteFilter: (entityType: EIssuesStoreType, entityId: string) => void;
+}
+
+export class WorkItemFilterStore implements IWorkItemFilterStore {
+  // observable
+  filters: IWorkItemFilterStore["filters"];
+
+  constructor() {
+    this.filters = new Map<TWorkItemFilterKey, IWorkItemFilterInstance>();
+    makeObservable(this, {
+      filters: observable,
+      getOrCreateFilter: action,
+      resetExpression: action,
+      updateFilterExpressionFromConditions: action,
+      deleteFilter: action,
+    });
+  }
+
+  // ------------ computed functions ------------
+
+  /**
+   * Returns a filter instance.
+   * @param entityType - The entity type.
+   * @param entityId - The entity id.
+   * @returns The filter instance.
+   */
+  getFilter: IWorkItemFilterStore["getFilter"] = computedFn((entityType, entityId) =>
+    this.filters.get(this._getFilterKey(entityType, entityId))
+  );
+
+  // ------------ actions ------------
+
+  /**
+   * Gets or creates a new filter instance.
+   * If the instance already exists, updates its expression options to ensure they're current.
+   */
+  getOrCreateFilter: IWorkItemFilterStore["getOrCreateFilter"] = action((params) => {
+    const existingFilter = this.getFilter(params.entityType, params.entityId);
+    if (existingFilter) {
+      // Update expression options on existing filter to ensure they're current
+      if (params.expressionOptions) {
+        existingFilter.updateExpressionOptions(params.expressionOptions);
+      }
+      // Update callback if provided
+      if (params.onExpressionChange) {
+        existingFilter.onExpressionChange = params.onExpressionChange;
+      }
+      // Update visibility if provided
+      if (params.showOnMount !== undefined) {
+        existingFilter.toggleVisibility(params.showOnMount);
+      }
+      return existingFilter;
+    }
+
+    // create new filter instance
+    const newFilter = this._initializeFilterInstance(params);
+    const filterKey = this._getFilterKey(params.entityType, params.entityId);
+    this.filters.set(filterKey, newFilter);
+
+    return newFilter;
+  });
+
+  /**
+   * Resets the initial expression for a filter instance.
+   * @param entityType - The entity type.
+   * @param entityId - The entity id.
+   * @param expression - The expression to update.
+   */
+  resetExpression: IWorkItemFilterStore["resetExpression"] = action((entityType, entityId, expression) => {
+    const filter = this.getFilter(entityType, entityId);
+    if (filter) {
+      filter.resetExpression(expression);
+    }
+  });
+
+  /**
+   * Updates the filter expression from conditions.
+   * @param entityType - The entity type.
+   * @param entityId - The entity id.
+   * @param conditions - The conditions to update.
+   * @param fallbackFn - The fallback function to update the expression if the filter instance does not exist.
+   */
+  updateFilterExpressionFromConditions: IWorkItemFilterStore["updateFilterExpressionFromConditions"] = action(
+    async (entityType, entityId, conditions, fallbackFn) => {
+      const filter = this.getFilter(entityType, entityId);
+      const newFilterExpression = buildWorkItemFilterExpressionFromConditions({
+        conditions,
+      });
+      if (!newFilterExpression) return;
+
+      // Update the filter expression using the filter instance if it exists, otherwise use the fallback function
+      if (filter) {
+        filter.resetExpression(newFilterExpression, false);
+      } else {
+        await fallbackFn(newFilterExpression);
+      }
+    }
+  );
+
+  /**
+   * Handles sidebar filter updates by adding new conditions or updating existing ones.
+   * This method processes filter conditions from the sidebar UI and applies them to the
+   * appropriate filter instance, handling both positive and negative operators correctly.
+   *
+   * @param entityType - The entity type (e.g., project, cycle, module)
+   * @param entityId - The unique identifier for the entity
+   * @param condition - The filter condition containing property, operator, and value
+   */
+  updateFilterValueFromSidebar: IWorkItemFilterStore["updateFilterValueFromSidebar"] = action(
+    (entityType, entityId, condition) => {
+      // Retrieve the filter instance for the specified entity
+      const filter = this.getFilter(entityType, entityId);
+
+      // Early return if filter instance doesn't exist
+      if (!filter) {
+        console.warn(
+          `Cannot handle sidebar filters update: filter instance not found for entity type "${entityType}" with ID "${entityId}"`
+        );
+        return;
+      }
+
+      // Check for existing conditions with the same property and operator
+      const conditionNode = filter.findFirstConditionByPropertyAndOperator(condition.property, condition.operator);
+
+      // No existing condition found - add new condition with AND logic
+      if (!conditionNode) {
+        const { operator, isNegation } = getOperatorForPayload(condition.operator);
+
+        // Create the condition payload with normalized operator
+        const conditionPayload = {
+          property: condition.property,
+          operator,
+          value: condition.value,
+        };
+
+        filter.addCondition(LOGICAL_OPERATOR.AND, conditionPayload, isNegation);
+        return;
+      }
+
+      // Update existing condition (assuming single condition per property-operator pair)
+      filter.updateConditionValue(conditionNode.id, condition.value);
+    }
+  );
+
+  /**
+   * Deletes a filter instance.
+   * @param entityType - The entity type.
+   * @param entityId - The entity id.
+   */
+  deleteFilter: IWorkItemFilterStore["deleteFilter"] = action((entityType, entityId) => {
+    this.filters.delete(this._getFilterKey(entityType, entityId));
+  });
+
+  // ------------ private helpers ------------
+
+  /**
+   * Returns a filter key.
+   * @param entityType - The entity type.
+   * @param entityId - The entity id.s
+   * @returns The filter key.
+   */
+  _getFilterKey = (entityType: EIssuesStoreType, entityId: string): TWorkItemFilterKey => `${entityType}-${entityId}`;
+
+  /**
+   * Initializes a filter instance.
+   * @param params - The parameters for the filter instance.
+   * @returns The filter instance.
+   */
+  _initializeFilterInstance = (params: TGetOrCreateFilterParams) =>
+    new FilterInstance<TWorkItemFilterProperty, TWorkItemFilterExpression>({
+      adapter: workItemFiltersAdapter,
+      initialExpression: params.initialExpression,
+      onExpressionChange: params.onExpressionChange,
+      options: {
+        expression: params.expressionOptions,
+        visibility: params.showOnMount
+          ? { autoSetVisibility: false, isVisibleOnMount: true }
+          : { autoSetVisibility: true },
+      },
+    });
+}
diff --git a/packages/shared-state/src/store/work-item-filters/index.ts b/packages/shared-state/src/store/work-item-filters/index.ts
new file mode 100644
index 0000000..00dd59c
--- /dev/null
+++ b/packages/shared-state/src/store/work-item-filters/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./adapter";
+export * from "./filter.store";
+export * from "./shared";
diff --git a/packages/shared-state/src/store/work-item-filters/shared.ts b/packages/shared-state/src/store/work-item-filters/shared.ts
new file mode 100644
index 0000000..272f27b
--- /dev/null
+++ b/packages/shared-state/src/store/work-item-filters/shared.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { EIssuesStoreType, TWorkItemFilterExpression, TWorkItemFilterProperty } from "@plane/types";
+// local imports
+import type { IFilterInstance } from "../rich-filters";
+
+export type TWorkItemFilterKey = `${EIssuesStoreType}-${string}`;
+
+export type IWorkItemFilterInstance = IFilterInstance<TWorkItemFilterProperty, TWorkItemFilterExpression>;
diff --git a/packages/shared-state/src/store/workspace.store.ts b/packages/shared-state/src/store/workspace.store.ts
new file mode 100644
index 0000000..74521cb
--- /dev/null
+++ b/packages/shared-state/src/store/workspace.store.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { makeObservable, observable } from "mobx";
+
+export interface IWorkspaceStore {
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export class WorkspaceStore implements IWorkspaceStore {
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+
+  constructor(data: IWorkspaceStore) {
+    makeObservable(this, {
+      id: observable.ref,
+      name: observable.ref,
+      createdAt: observable.ref,
+      updatedAt: observable.ref,
+    });
+    this.id = data.id;
+    this.name = data.name;
+    this.createdAt = data.createdAt;
+    this.updatedAt = data.updatedAt;
+  }
+}
diff --git a/packages/shared-state/src/utils/index.ts b/packages/shared-state/src/utils/index.ts
new file mode 100644
index 0000000..74153e6
--- /dev/null
+++ b/packages/shared-state/src/utils/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./rich-filter.helper";
+export * from "./work-item-filters.helper";
diff --git a/packages/shared-state/src/utils/rich-filter.helper.ts b/packages/shared-state/src/utils/rich-filter.helper.ts
new file mode 100644
index 0000000..576533f
--- /dev/null
+++ b/packages/shared-state/src/utils/rich-filter.helper.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TBuildFilterExpressionParams, TExternalFilter, TFilterProperty, TFilterValue } from "@plane/types";
+import { LOGICAL_OPERATOR } from "@plane/types";
+import { getOperatorForPayload } from "@plane/utils";
+// local imports
+import { FilterInstance } from "../store/rich-filters/filter";
+
+/**
+ * Builds a temporary filter expression from conditions.
+ * @param params.conditions - The conditions for building the filter expression.
+ * @param params.adapter - The adapter for building the filter expression.
+ * @returns The temporary filter expression.
+ */
+export const buildTempFilterExpressionFromConditions = <
+  P extends TFilterProperty,
+  V extends TFilterValue,
+  E extends TExternalFilter,
+>(
+  params: TBuildFilterExpressionParams<P, V, E>
+): E | undefined => {
+  const { conditions, adapter } = params;
+  let tempExpression: E | undefined = undefined;
+  const tempFilterInstance = new FilterInstance<P, E>({
+    adapter,
+    onExpressionChange: (expression) => {
+      tempExpression = expression;
+    },
+  });
+  for (const condition of conditions) {
+    const { operator, isNegation } = getOperatorForPayload(condition.operator);
+    tempFilterInstance.addCondition(
+      LOGICAL_OPERATOR.AND,
+      {
+        property: condition.property,
+        operator,
+        value: condition.value,
+      },
+      isNegation
+    );
+  }
+  return tempExpression;
+};
diff --git a/packages/shared-state/src/utils/work-item-filters.helper.ts b/packages/shared-state/src/utils/work-item-filters.helper.ts
new file mode 100644
index 0000000..b5c5819
--- /dev/null
+++ b/packages/shared-state/src/utils/work-item-filters.helper.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type {
+  TBuildFilterExpressionParams,
+  TFilterConditionForBuild,
+  TFilterValue,
+  TWorkItemFilterExpression,
+  TWorkItemFilterProperty,
+} from "@plane/types";
+// local imports
+import { workItemFiltersAdapter } from "../store/work-item-filters/adapter";
+import { buildTempFilterExpressionFromConditions } from "./rich-filter.helper";
+
+export type TWorkItemFilterCondition = TFilterConditionForBuild<TWorkItemFilterProperty, TFilterValue>;
+
+/**
+ * Builds a work item filter expression from conditions.
+ * @param params.conditions - The conditions for building the filter expression.
+ * @returns The work item filter expression.
+ */
+export const buildWorkItemFilterExpressionFromConditions = (
+  params: Omit<
+    TBuildFilterExpressionParams<TWorkItemFilterProperty, TFilterValue, TWorkItemFilterExpression>,
+    "adapter"
+  >
+): TWorkItemFilterExpression | undefined => {
+  const workItemFilterExpression = buildTempFilterExpressionFromConditions({
+    ...params,
+    adapter: workItemFiltersAdapter,
+  });
+  if (!workItemFilterExpression) console.error("Failed to build work item filter expression from conditions");
+  return workItemFilterExpression;
+};
diff --git a/packages/shared-state/tsconfig.json b/packages/shared-state/tsconfig.json
new file mode 100644
index 0000000..87d0755
--- /dev/null
+++ b/packages/shared-state/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "exactOptionalPropertyTypes": false,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["dist", "node_modules"]
+}
diff --git a/packages/shared-state/tsdown.config.ts b/packages/shared-state/tsdown.config.ts
new file mode 100644
index 0000000..92959ea
--- /dev/null
+++ b/packages/shared-state/tsdown.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  platform: "neutral",
+  exports: true,
+});
diff --git a/packages/tailwind-config/.prettierignore b/packages/tailwind-config/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/tailwind-config/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/tailwind-config/AGENTS.md b/packages/tailwind-config/AGENTS.md
new file mode 100644
index 0000000..57e4876
--- /dev/null
+++ b/packages/tailwind-config/AGENTS.md
@@ -0,0 +1,667 @@
+# Design System Philosophy Guide
+
+## Overview
+
+This guide explains the semantic design system philosophy for building consistent, maintainable UIs. The system is built on three core concepts: **Canvas**, **Surface**, and **Layer**.
+
+## Core Concepts
+
+### 1. Canvas (`bg-canvas`)
+
+**What it is**: The application-level background that serves as the foundation for all content. The canvas is the **entire application background**, not individual pages. There is only **one canvas** in the entire application, used at the root level.
+
+**When to use**:
+
+- **Only at the application root** - the single root container that wraps the entire application
+- The main application background (not page backgrounds)
+
+**When NOT to use**:
+
+- ❌ Page-level backgrounds
+- ❌ Nested containers
+- ❌ Cards or components
+- ❌ Modals or dropdowns
+- ❌ Sidebars or panels
+- ❌ Anywhere else in the application
+
+**Critical Rule**: Canvas should only appear **once** in your entire application - at the root level. All pages, routes, and components sit on top of this single canvas.
+
+**Example**:
+
+```tsx
+// ✅ Correct: Canvas at application root (only place it should be)
+// App.tsx or root layout
+<div className="bg-canvas min-h-screen">
+  {/* All application content goes here */}
+  <Routes>
+    <Route path="/" element={<Page />} />
+  </Routes>
+</div>;
+
+// ✅ Correct: Pages use surfaces, not canvas
+function Page() {
+  return <div className="bg-surface-1">{/* Page content */}</div>;
+}
+
+// ❌ Wrong: Canvas used for a page
+function Page() {
+  return <div className="bg-canvas">{/* Don't use canvas here */}</div>;
+}
+
+// ❌ Wrong: Canvas used for a card
+<div className="bg-canvas p-4 rounded-md">{/* Card content */}</div>;
+```
+
+### 2. Surface (`bg-surface-1`, `bg-surface-2`, `bg-surface-3`)
+
+**What it is**: Top-level containers that sit directly on the canvas. Surfaces never overlap each other - they are siblings in the layout hierarchy.
+
+**When to use**:
+
+- Main content areas
+- Sections of a page
+- Primary containers
+- Panels that sit side-by-side
+
+**Surface hierarchy**:
+
+- `bg-surface-1`: Primary surface (most common)
+- `bg-surface-2`: Secondary surface (for variation)
+- `bg-surface-3`: Tertiary surface (rare, for special cases)
+
+**Rules**:
+
+- Surfaces are **siblings**, not nested (in the same plane)
+- Each surface should use its corresponding layer for nested elements
+- Surfaces provide the base for stacking layers
+
+**Exception - Different Planes**:
+
+- Modals, overlays, and popovers exist on a **different plane** (different z-index/stacking context)
+- In these cases, it's acceptable to use a surface even when there's a surface below
+- This is because they are visually and functionally separate from the underlying content
+
+**Example**:
+
+```tsx
+// ✅ Correct: Surfaces as siblings
+<div className="bg-canvas">
+  <div className="bg-surface-1">
+    {/* Main content area */}
+  </div>
+  <div className="bg-surface-2">
+    {/* Secondary content area - sibling, not nested */}
+  </div>
+</div>
+
+// ✅ Correct: Page with header and main (same surface)
+<div className="bg-surface-1">
+  <header className="border-b border-subtle">
+    {/* Header is part of the surface, not a separate surface */}
+  </header>
+  <main>
+    {/* Main is part of the surface, not a separate surface */}
+  </main>
+</div>
+
+// ❌ Wrong: Surface nested in surface (same plane)
+<div className="bg-surface-1">
+  <div className="bg-surface-2">
+    {/* This breaks the philosophy */}
+  </div>
+</div>
+
+// ✅ Correct: Modal on different plane
+<div className="bg-canvas">
+  {/* Main page content */}
+  <div className="bg-surface-1">
+    Page content
+  </div>
+
+  {/* Modal overlay - different plane */}
+  <div className="fixed inset-0 z-50">
+    <div className="bg-backdrop fixed inset-0" />
+    <div className="bg-surface-1 rounded-lg shadow-lg p-6">
+      {/* Modal can use surface-1 even though page uses surface-1 */}
+      Modal content
+    </div>
+  </div>
+</div>
+```
+
+### 3. Layer (`bg-layer-1`, `bg-layer-2`, `bg-layer-3`)
+
+**What it is**: Stacking layers that create depth within a surface. Layers stack on top of each other in a specific order.
+
+**When to use**:
+
+- Cards within a surface
+- Group headers
+- Nested containers
+- Dropdowns and modals
+- Sidebars
+- Any element that needs to appear "on top" of a surface
+
+**Layer hierarchy**:
+
+- `bg-layer-1`: First layer (closest to surface)
+- `bg-layer-2`: Second layer (on top of layer-1)
+- `bg-layer-3`: Third layer (on top of layer-2)
+
+**Critical Rule - Layer-to-Surface Association**:
+
+- `bg-surface-1` → use `bg-layer-1` for nested elements
+- `bg-surface-2` → use `bg-layer-2` for nested elements
+- `bg-surface-3` → use `bg-layer-3` for nested elements
+
+**Rare Exception - Visual Separation**:
+
+In very rare cases, you may go one level above for visual separation when needed for specific UI elements:
+
+- Inputs in modals (modal has `bg-surface-1`, input can use `bg-layer-2` for separation)
+- Buttons, switches, and form controls that need more visual distinction
+- **Important**: This is very rare and should only be used for interactive form elements, not for content boxes or cards
+
+**Example**:
+
+```tsx
+// ✅ Correct: Surface-1 with layer-1
+<div className="bg-surface-1 p-4">
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-3">
+    Card content
+  </div>
+</div>
+
+// ✅ Correct: Surface-2 with layer-2
+<div className="bg-surface-2 p-4">
+  <div className="bg-layer-2 hover:bg-layer-2-hover rounded-md p-3">
+    Card content
+  </div>
+</div>
+
+// ❌ Wrong: Surface-1 with layer-2 (for content boxes)
+<div className="bg-surface-1 p-4">
+  <div className="bg-layer-2">
+    {/* Wrong layer for this surface - use layer-1 for content boxes */}
+  </div>
+</div>
+
+// ✅ Correct: Rare exception - Input in modal for visual separation
+<div className="bg-surface-1 rounded-lg p-6">
+  <form>
+    <input className="bg-layer-2 border border-subtle rounded-md px-3 py-2" />
+    {/* Input uses layer-2 for visual separation from modal surface */}
+  </form>
+</div>
+```
+
+## Stacking Layers
+
+### How to Stack Layers
+
+Layers stack in order: surface → layer-1 → layer-2 → layer-3
+
+**Pattern**:
+
+```
+Canvas
+  └── Surface
+      └── Layer 1 (first level of depth)
+          └── Layer 2 (second level of depth)
+              └── Layer 3 (third level of depth)
+```
+
+**Example - Proper Stacking**:
+
+```tsx
+// ✅ Correct: Proper layer stacking
+<div className="bg-surface-1 p-4">
+  {/* Layer 1: Card */}
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+    <h3>Card Title</h3>
+
+    {/* Layer 2: Nested section */}
+    <div className="bg-layer-2 hover:bg-layer-2-hover rounded p-2 mt-2">
+      Nested content
+      {/* Layer 3: Deeply nested */}
+      <div className="bg-layer-3 hover:bg-layer-3-hover rounded p-1 mt-1">Deep content</div>
+    </div>
+  </div>
+</div>
+```
+
+**When to use each layer**:
+
+- **Layer 1**: Most common - cards, headers, primary nested elements
+- **Layer 2**: Secondary depth - nested cards, sub-sections
+- **Layer 3**: Deep nesting - rarely needed, for complex hierarchies
+
+## State Variants
+
+### Hover States
+
+**Critical Rule**: Hover must always match the base background layer.
+
+**Pattern**: `bg-layer-X hover:bg-layer-X-hover`
+
+**Examples**:
+
+```tsx
+// ✅ Correct: Matching hover
+<div className="bg-layer-1 hover:bg-layer-1-hover">
+  Hoverable element
+</div>
+
+<div className="bg-layer-2 hover:bg-layer-2-hover">
+  Hoverable element
+</div>
+
+// ❌ Wrong: Mismatched hover
+<div className="bg-layer-1 hover:bg-layer-2-hover">
+  {/* Never do this */}
+</div>
+```
+
+### Active States
+
+Use `-active` variants when an element is in an active/pressed state.
+
+```tsx
+// ✅ Correct: Active state
+<button
+  className={cn("bg-layer-1 hover:bg-layer-1-hover", {
+    "bg-layer-1-active": isActive,
+  })}
+>
+  Button
+</button>
+```
+
+### Selected States
+
+Use `-selected` variants only when there's actual selection logic.
+
+```tsx
+// ✅ Correct: Selected state with logic
+<div className={cn(
+  "bg-layer-1 hover:bg-layer-1-hover",
+  {
+    "bg-layer-1-selected": isSelected
+  }
+)}>
+  Selectable item
+</div>
+
+// ✅ Correct: With data attribute
+<div className="bg-layer-1 hover:bg-layer-1-hover data-[selected]:bg-layer-1-selected">
+  Selectable item
+</div>
+```
+
+## Common Patterns
+
+### Pattern 1: Application Root Layout
+
+```tsx
+// ✅ Correct: Application root (only place for canvas)
+// App.tsx or root layout
+<div className="bg-canvas min-h-screen">
+  <Routes>
+    <Route path="/" element={<HomePage />} />
+    <Route path="/dashboard" element={<DashboardPage />} />
+  </Routes>
+</div>;
+
+// ✅ Correct: Individual page structure
+function HomePage() {
+  return (
+    <div className="bg-surface-1">
+      {/* Header - part of the page surface, uses layer for depth */}
+      <header className="border-b border-subtle">
+        <div className="bg-layer-1 hover:bg-layer-1-hover px-4 py-2">Header content</div>
+      </header>
+
+      {/* Main content - part of the page surface */}
+      <main className="p-6">
+        <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">Content card</div>
+      </main>
+    </div>
+  );
+}
+```
+
+### Pattern 2: Card with Nested Elements
+
+```tsx
+// ✅ Correct: Card with proper layering
+<div className="bg-surface-1 p-4">
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+    <h3 className="text-primary font-semibold">Card Title</h3>
+
+    {/* Nested section */}
+    <div className="bg-layer-2 hover:bg-layer-2-hover rounded p-3 mt-3">
+      <p className="text-secondary">Nested content</p>
+    </div>
+  </div>
+</div>
+```
+
+### Pattern 3: Dropdown/Modal
+
+```tsx
+// ✅ Correct: Modal structure (different plane exception)
+function PageWithModal() {
+  return (
+    <div className="bg-surface-1">
+      {/* Main page content */}
+      <div>Page content</div>
+
+      {/* Modal - different plane, can use surface even with surface below */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50">
+          <div className="bg-backdrop fixed inset-0" />
+          <div className="bg-surface-1 rounded-lg shadow-lg p-6">
+            <div className="bg-layer-1 hover:bg-layer-1-hover rounded p-2">Modal content</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+### Pattern 4: Sidebar Layout
+
+```tsx
+// ✅ Correct: Sidebar with main content (page level, not app root)
+// Both sidebar and main are siblings on the same surface
+// Sidebar menu items use transparent backgrounds with hover states
+function DashboardPage() {
+  return (
+    <div className="bg-surface-1 flex">
+      {/* Sidebar - part of the page surface */}
+      <aside className="border-r border-subtle w-64">
+        <div className="hover:bg-layer-1-hover p-4">Sidebar item</div>
+      </aside>
+
+      {/* Main content - part of the page surface */}
+      <main className="flex-1 p-6">
+        <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">Main content</div>
+      </main>
+    </div>
+  );
+}
+```
+
+### Pattern 5: List with Items
+
+```tsx
+// ✅ Correct: List structure
+<div className="bg-surface-1 p-4">
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md mb-2 p-3">List item 1</div>
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md mb-2 p-3">List item 2</div>
+  <div className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-3">List item 3</div>
+</div>
+```
+
+### Pattern 6: Form with Inputs
+
+```tsx
+// ✅ Correct: Form structure
+<div className="bg-surface-1 p-6">
+  <form className="bg-layer-1 rounded-md p-4 space-y-4">
+    <div>
+      <label className="text-primary font-medium">Name</label>
+      {/* Input can use bg-surface-1 or bg-layer-2 for visual separation (rare exception) */}
+      <input className="bg-surface-1 border border-subtle rounded-md px-3 py-2 text-primary" type="text" />
+    </div>
+
+    <button className="bg-layer-2 hover:bg-layer-2-hover rounded-md px-4 py-2 text-primary">Submit</button>
+  </form>
+</div>
+
+// ✅ Correct: Input in modal (rare exception for visual separation)
+<div className="bg-surface-1 rounded-lg p-6">
+  <form>
+    <label className="text-primary font-medium">Name</label>
+    {/* Input uses layer-2 for visual separation from modal surface - rare exception */}
+    <input className="bg-layer-2 border border-subtle rounded-md px-3 py-2 text-primary" type="text" />
+  </form>
+</div>
+```
+
+## Decision Tree
+
+### When to use Canvas?
+
+```
+Is this the root container of the entire application?
+(Only one place in the whole app)
+├─ YES → Use bg-canvas (application root only)
+└─ NO → Continue to Surface decision
+```
+
+### When to use Surface?
+
+```
+Is this a top-level container that sits on canvas?
+AND
+Is it a sibling to other containers (not nested)?
+OR
+Is this a modal/overlay on a different plane (z-index)?
+├─ YES → Use bg-surface-1 (or surface-2/3 for variation)
+└─ NO → Continue to Layer decision
+```
+
+### When to use Layer?
+
+```
+Is this nested within a surface?
+├─ YES → Use bg-layer-1 (or layer-2/3 for deeper nesting)
+│         Match layer number to surface number
+└─ NO → Re-evaluate: Should this be a surface?
+```
+
+## Text Colors
+
+Use semantic text colors that match the hierarchy:
+
+- `text-primary`: Main text, headings, important content
+- `text-secondary`: Secondary text, descriptions
+- `text-tertiary`: Tertiary text, labels, metadata
+- `text-placeholder`: Placeholder text, hints
+
+**Example**:
+
+```tsx
+<div className="bg-layer-1 p-4">
+  <h2 className="text-primary font-semibold">Title</h2>
+  <p className="text-secondary">Description text</p>
+  <span className="text-tertiary text-13">Metadata</span>
+  <input className="placeholder-(--text-color-placeholder)" placeholder="Enter text..." />
+</div>
+```
+
+## Border Colors
+
+Use semantic border colors:
+
+- `border-subtle`: Subtle borders, dividers
+- `border-subtle-1`: Slightly more visible borders
+- `border-strong`: Strong borders, emphasis
+- `border-strong-1`: Very strong borders
+
+**Example**:
+
+```tsx
+<div className="bg-layer-1 border border-subtle rounded-md p-4">
+  <div className="border-b border-subtle-1 pb-2 mb-2">Section with divider</div>
+</div>
+```
+
+## Common Mistakes to Avoid
+
+### ❌ Mistake 1: Canvas for Pages or Cards
+
+```tsx
+// ❌ Wrong: Canvas used for a page
+function Page() {
+  return <div className="bg-canvas">Page content</div>;
+}
+
+// ❌ Wrong: Canvas used for a card
+<div className="bg-canvas rounded-md p-4">Card content</div>;
+
+// ✅ Correct: Pages use surfaces
+function Page() {
+  return (
+    <div className="bg-surface-1">
+      <div className="bg-layer-1 rounded-md p-4">Card content</div>
+    </div>
+  );
+}
+```
+
+### ❌ Mistake 2: Nested Surfaces (Same Plane)
+
+```tsx
+// ❌ Wrong: Nested surfaces in same plane
+<div className="bg-surface-1">
+  <div className="bg-surface-2">
+    Nested surface
+  </div>
+</div>
+
+// ✅ Correct: Use layer instead
+<div className="bg-surface-1">
+  <div className="bg-layer-1">
+    Nested layer
+  </div>
+</div>
+
+// ✅ Correct: Exception - Modal on different plane
+<div className="bg-canvas">
+  <div className="bg-surface-1">Page content</div>
+  <div className="fixed inset-0 z-50">
+    <div className="bg-surface-1">Modal (different plane)</div>
+  </div>
+</div>
+```
+
+### ❌ Mistake 3: Wrong Layer for Surface
+
+```tsx
+// ❌ Wrong: surface-1 with layer-2 (for content boxes)
+<div className="bg-surface-1">
+  <div className="bg-layer-2">
+    Content box
+  </div>
+</div>
+
+// ✅ Correct: surface-1 with layer-1 (for content boxes)
+<div className="bg-surface-1">
+  <div className="bg-layer-1">
+    Content box
+  </div>
+</div>
+
+// ✅ Correct: Rare exception - Input/button for visual separation
+<div className="bg-surface-1">
+  <input className="bg-layer-2" />
+  {/* Input uses layer-2 for visual separation - very rare exception */}
+</div>
+```
+
+**Note**: Going one level above (e.g., `bg-layer-2` with `bg-surface-1`) is only valid in very rare cases for interactive form elements (inputs, buttons, switches) that need extra visual separation. For content boxes, cards, and normal nested elements, always match the layer number to the surface number.
+
+### ❌ Mistake 4: Mismatched Hover
+
+```tsx
+// ❌ Wrong
+<div className="bg-layer-1 hover:bg-layer-2-hover">
+  Content
+</div>
+
+// ✅ Correct
+<div className="bg-layer-1 hover:bg-layer-1-hover">
+  Content
+</div>
+```
+
+### ❌ Mistake 5: Missing Hover Prefix
+
+```tsx
+// ❌ Wrong
+<div className="bg-layer-1-hover">
+  Content
+</div>
+
+// ✅ Correct
+<div className="bg-layer-1 hover:bg-layer-1-hover">
+  Content
+</div>
+```
+
+## Best Practices
+
+1. **Canvas is Application Root Only**: Canvas should only appear once in your entire application - at the root level (App.tsx or root layout). All pages use surfaces, not canvas.
+
+2. **Use Surfaces for Pages and Top-Level Containers**: Surfaces are siblings, not nested (except modals/overlays on different planes)
+
+3. **Match Layers to Surfaces**: surface-1 → layer-1, surface-2 → layer-2, etc. (Very rare exception: form elements can go one level above for visual separation)
+
+4. **Stack Layers Properly**: Use layer-1 first, then layer-2, then layer-3 as needed
+
+5. **Always Match Hover States**: If base is `bg-layer-X`, hover must be `hover:bg-layer-X-hover`
+
+6. **Use Semantic Text Colors**: Match text color to importance (primary, secondary, tertiary, placeholder)
+
+7. **Keep It Simple**: Don't over-nest. Most components only need layer-1
+
+8. **Test Visual Hierarchy**: Ensure the stacking creates clear visual depth
+
+## Quick Reference
+
+### Hierarchy Structure
+
+```
+Canvas (one per page)
+  └── Surface 1 (top-level container)
+      └── Layer 1 (first level of depth)
+          └── Layer 2 (second level)
+              └── Layer 3 (third level)
+```
+
+### Common Combinations
+
+- Application Root: `bg-canvas` (only one place in entire app)
+- Single Surface Page: `bg-surface-1` → `bg-layer-1`
+- Multiple Surfaces Page: Grid of `bg-surface-1` (or `bg-surface-2`) as siblings
+- Card: `bg-surface-1` → `bg-layer-1 hover:bg-layer-1-hover`
+- Nested Card: `bg-surface-1` → `bg-layer-1` → `bg-layer-2`
+- Sidebar Layout: `bg-surface-1` (sidebar) + `bg-surface-1` (main) - both siblings
+- Sidebar Menu Items: Transparent background with `hover:bg-layer-1-hover` (no base `bg-layer-1`)
+
+### State Variants
+
+- Hover: `bg-layer-X hover:bg-layer-X-hover`
+- Active: `bg-layer-X-active` (when pressed/active)
+- Selected: `bg-layer-X-selected` (when selected)
+
+## Alignment Checklist
+
+When reviewing components, ensure:
+
+- [ ] Canvas is only used at the application root (one place in entire app)
+- [ ] Pages use surfaces, not canvas
+- [ ] Surfaces are siblings, not nested (except modals/overlays on different planes)
+- [ ] Layers match their surface (surface-1 → layer-1) - except rare cases for form elements
+- [ ] Sidebar menu items use transparent backgrounds with hover states
+- [ ] Hover states match base layers
+- [ ] Layers stack properly (1 → 2 → 3)
+- [ ] Text colors are semantic (primary, secondary, tertiary, placeholder)
+- [ ] Borders use semantic colors (subtle, strong)
+- [ ] No unnecessary nesting
+- [ ] Visual hierarchy is clear
+- [ ] State variants are used correctly
+- [ ] Modals/overlays use surfaces (exception to nesting rule)
diff --git a/packages/tailwind-config/index.css b/packages/tailwind-config/index.css
new file mode 100644
index 0000000..716e366
--- /dev/null
+++ b/packages/tailwind-config/index.css
@@ -0,0 +1,241 @@
+@import "tailwindcss";
+/*
+ * Design tokens + animations come from @makeplane/propel, which supersedes the
+ * variables.css / animations.css this package used to ship. It defines every
+ * token name we had bar one — --scrollbar-thumb-surface-hover, whose consumers
+ * now point at propel's --scrollbar-thumb-hover — plus every --animate-* token
+ * and a superset of our keyframes, and it keys light/dark off the same
+ * [data-theme*="dark"] / [data-theme="dark-contrast"] selectors we already use.
+ *
+ * Token *values* are propel's, not ours: many differ from what this package
+ * shipped. See the migration notes for the drift that needs a visual pass.
+ *
+ * Styles barrel (tokens + animations + `@source` of propel dist) so component
+ * utilities emit. propel's CSS does not import tailwindcss itself.
+ */
+@import "@makeplane/propel/styles";
+@source "../**/*.{ts,tsx}";
+
+* {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  font-variant-ligatures: none;
+  -webkit-font-variant-ligatures: none;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  @apply font-body bg-canvas text-primary;
+}
+
+/* emoji icon picker */
+@utility conical-gradient {
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    #ff6b00 0deg,
+    #f7ae59 70.5deg,
+    #3f76ff 151.12deg,
+    #05c3ff 213deg,
+    #18914f 289.87deg,
+    #f6f172 329.25deg,
+    #ff6b00 360deg
+  );
+}
+
+/* progress bar */
+@utility progress-bar {
+  fill: currentColor;
+  color: var(--text-color-secondary);
+}
+
+::-webkit-input-placeholder,
+::placeholder,
+:-ms-input-placeholder {
+  @apply text-placeholder;
+}
+
+@utility vertical-lr {
+  writing-mode: vertical-lr;
+  width: fit-content;
+}
+
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: none;
+  }
+  .vertical-scrollbar,
+  .horizontal-scrollbar {
+    scrollbar-width: initial;
+    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
+
+    &:hover {
+      scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
+    }
+
+    &:active {
+      scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
+    }
+  }
+}
+
+/* ---------- Scrollbar utilities ----------- */
+::-webkit-scrollbar {
+  @apply hidden;
+}
+
+.vertical-scrollbar {
+  @apply overflow-y-auto;
+}
+
+.horizontal-scrollbar {
+  @apply overflow-x-auto;
+}
+
+.vertical-scrollbar,
+.horizontal-scrollbar {
+  &::-webkit-scrollbar {
+    @apply block;
+  }
+
+  &::-webkit-scrollbar-track {
+    @apply bg-layer-transparent rounded-full;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    @apply bg-scrollbar-thumb rounded-full;
+
+    &:hover {
+      @apply bg-scrollbar-thumb-hover;
+    }
+
+    &:active {
+      @apply bg-scrollbar-thumb-active;
+    }
+  }
+
+  /* Container hover out-orders `::-webkit-scrollbar-thumb:hover` and `:active`
+     at equal specificity, so this shade shows while hovering *and* dragging. */
+  &:hover::-webkit-scrollbar-thumb {
+    @apply bg-scrollbar-thumb-hover;
+  }
+
+  &::-webkit-scrollbar-corner {
+    @apply bg-layer-transparent;
+  }
+}
+
+.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
+  margin-top: 44px;
+}
+
+/* Scrollbar variants
+ * `sm`, `md` and `lg` collide by name with propel's own scrollbar utilities,
+ * imported at the top of this file. Both definitions are emitted and ours lands
+ * second, so it wins — but only for properties it actually restates. propel sets
+ * `scrollbar-width` / `scrollbar-color`, and from Chromium 121 setting either of
+ * those makes the browser ignore every ::-webkit-scrollbar rule on the element,
+ * which would silently drop the geometry below and leave one 11px scrollbar
+ * everywhere. Resetting both back to `auto` hands the pseudo-elements back.
+ *
+ * This leans on ours being emitted after propel's, which follows from `@utility`
+ * registration order and is not something Tailwind documents for duplicate
+ * names. Keep these definitions below the propel @import. If scrollbars ever
+ * turn thin and uniform app-wide, this is why — rename ours to break the tie.
+ *
+ * `xs` has no propel counterpart, so it needs no reset.
+ */
+@utility scrollbar-xs {
+  &::-webkit-scrollbar {
+    height: 10px;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 3px solid rgba(0, 0, 0, 0);
+  }
+}
+@utility scrollbar-sm {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+
+  &:hover {
+    scrollbar-color: auto;
+  }
+
+  &::-webkit-scrollbar {
+    height: 12px;
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 3px solid rgba(0, 0, 0, 0);
+  }
+}
+@utility scrollbar-md {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+
+  &:hover {
+    scrollbar-color: auto;
+  }
+
+  &::-webkit-scrollbar {
+    height: 14px;
+    width: 14px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 3px solid rgba(0, 0, 0, 0);
+  }
+}
+@utility scrollbar-lg {
+  scrollbar-width: auto;
+  scrollbar-color: auto;
+
+  &:hover {
+    scrollbar-color: auto;
+  }
+
+  &::-webkit-scrollbar {
+    height: 16px;
+    width: 16px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid rgba(0, 0, 0, 0);
+  }
+}
+
+/* highlight class */
+@utility highlight {
+  border: 1px solid var(--border-color-accent-strong) !important;
+}
+
+@utility highlight-with-line {
+  border-left: 5px solid var(--border-color-accent-strong) !important;
+  background: var(--background-color-layer-2);
+}
+
+/* By applying below class, the autofilled text in form fields will not have the default autofill background color and styles applied by WebKit browsers  */
+@utility disable-autofill-style {
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-background-clip: text;
+  }
+}
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    @apply text-placeholder;
+  }
+}
diff --git a/packages/tailwind-config/package.json b/packages/tailwind-config/package.json
new file mode 100644
index 0000000..6b365e5
--- /dev/null
+++ b/packages/tailwind-config/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@plane/tailwind-config",
+  "version": "1.4.2",
+  "private": true,
+  "description": "common tailwind configuration across monorepo",
+  "license": "AGPL-3.0",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "tailwind.config.js",
+  "exports": {
+    "./index.css": "./index.css",
+    "./postcss.config.js": "./postcss.config.js"
+  },
+  "dependencies": {
+    "@makeplane/propel": "catalog:",
+    "@tailwindcss/postcss": "catalog:",
+    "postcss": "catalog:"
+  },
+  "devDependencies": {
+    "tailwindcss": "catalog:"
+  }
+}
diff --git a/packages/tailwind-config/postcss.config.js b/packages/tailwind-config/postcss.config.js
new file mode 100644
index 0000000..4843124
--- /dev/null
+++ b/packages/tailwind-config/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    // "tailwindcss/nesting": {},
+    "@tailwindcss/postcss": {},
+  },
+};
diff --git a/packages/types/.prettierignore b/packages/types/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/types/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/types/package.json b/packages/types/package.json
new file mode 100644
index 0000000..264f78c
--- /dev/null
+++ b/packages/types/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@plane/types",
+  "version": "1.4.2",
+  "private": true,
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "tsdown --watch --no-clean",
+    "build": "tsdown",
+    "check:lint": "oxlint --max-warnings=1 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "devDependencies": {
+    "@plane/typescript-config": "workspace:*",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
diff --git a/packages/types/src/activity.ts b/packages/types/src/activity.ts
new file mode 100644
index 0000000..1ab90f4
--- /dev/null
+++ b/packages/types/src/activity.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TBaseActivity<TFieldKey extends string = string, TVerbKey extends string = string> = {
+  id: string;
+  field: TFieldKey | undefined;
+  epoch: number;
+  verb: TVerbKey;
+  comment: string | undefined;
+  // updates
+  old_value: string | undefined;
+  new_value: string | undefined;
+  old_identifier: string | undefined;
+  new_identifier: string | undefined;
+  // actor detail
+  actor: string;
+  // timestamp
+  created_at: string;
+  updated_at: string;
+};
+
+export type TWorkspaceBaseActivity<K extends string = string, V extends string = string> = TBaseActivity<K, V> & {
+  workspace: string;
+};
+
+export type TProjectBaseActivity<K extends string = string, V extends string = string> = TWorkspaceBaseActivity<
+  K,
+  V
+> & {
+  project: string;
+};
+
+export type TBaseActivityVerbs = "created" | "updated" | "deleted";
diff --git a/packages/types/src/ai.ts b/packages/types/src/ai.ts
new file mode 100644
index 0000000..da7d610
--- /dev/null
+++ b/packages/types/src/ai.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IProjectLite } from "./project";
+import type { IWorkspaceLite } from "./workspace";
+
+export interface IGptResponse {
+  response: string;
+  response_html: string;
+  count: number;
+  project_detail: IProjectLite;
+  workspace_detail: IWorkspaceLite;
+}
diff --git a/packages/types/src/analytics.ts b/packages/types/src/analytics.ts
new file mode 100644
index 0000000..a636820
--- /dev/null
+++ b/packages/types/src/analytics.ts
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TChartData } from "./charts";
+
+export enum ChartXAxisProperty {
+  STATES = "STATES",
+  STATE_GROUPS = "STATE_GROUPS",
+  LABELS = "LABELS",
+  ASSIGNEES = "ASSIGNEES",
+  ESTIMATE_POINTS = "ESTIMATE_POINTS",
+  CYCLES = "CYCLES",
+  MODULES = "MODULES",
+  PRIORITY = "PRIORITY",
+  START_DATE = "START_DATE",
+  TARGET_DATE = "TARGET_DATE",
+  CREATED_AT = "CREATED_AT",
+  COMPLETED_AT = "COMPLETED_AT",
+  CREATED_BY = "CREATED_BY",
+  WORK_ITEM_TYPES = "WORK_ITEM_TYPES",
+  PROJECTS = "PROJECTS",
+  EPICS = "EPICS",
+}
+
+export enum ChartYAxisMetric {
+  WORK_ITEM_COUNT = "WORK_ITEM_COUNT",
+  ESTIMATE_POINT_COUNT = "ESTIMATE_POINT_COUNT",
+  PENDING_WORK_ITEM_COUNT = "PENDING_WORK_ITEM_COUNT",
+  COMPLETED_WORK_ITEM_COUNT = "COMPLETED_WORK_ITEM_COUNT",
+  IN_PROGRESS_WORK_ITEM_COUNT = "IN_PROGRESS_WORK_ITEM_COUNT",
+  WORK_ITEM_DUE_THIS_WEEK_COUNT = "WORK_ITEM_DUE_THIS_WEEK_COUNT",
+  WORK_ITEM_DUE_TODAY_COUNT = "WORK_ITEM_DUE_TODAY_COUNT",
+  BLOCKED_WORK_ITEM_COUNT = "BLOCKED_WORK_ITEM_COUNT",
+  EPIC_WORK_ITEM_COUNT = "EPIC_WORK_ITEM_COUNT",
+}
+
+export type TAnalyticsTabsBase = "overview" | "work-items";
+export type TAnalyticsGraphsBase = "projects" | "work-items" | "custom-work-items";
+export interface AnalyticsTab {
+  key: TAnalyticsTabsBase;
+  label: string;
+  content: React.FC;
+  isDisabled: boolean;
+}
+export type TAnalyticsFilterParams = {
+  project_ids?: string;
+  cycle_id?: string;
+  module_id?: string;
+};
+
+// service types
+
+export interface IAnalyticsResponse {
+  [key: string]: any;
+}
+
+export interface IAnalyticsResponseFields {
+  count: number;
+  filter_count: number;
+}
+
+// chart types
+
+export interface IChartResponse {
+  schema: Record<string, string>;
+  data: TChartData<string, string>[];
+}
+
+// table types
+
+export interface WorkItemInsightColumns {
+  project_id?: string;
+  project__name?: string;
+  cancelled_work_items: number;
+  completed_work_items: number;
+  backlog_work_items: number;
+  un_started_work_items: number;
+  started_work_items: number;
+  // in case of peek view, we will display the display_name instead of project__name
+  display_name?: string;
+  avatar_url?: string;
+  assignee_id?: string;
+}
+
+export type AnalyticsTableDataMap = {
+  "work-items": WorkItemInsightColumns;
+};
+
+export interface IAnalyticsParams {
+  x_axis: ChartXAxisProperty;
+  y_axis: ChartYAxisMetric;
+  group_by?: ChartXAxisProperty;
+}
diff --git a/packages/types/src/api_token.ts b/packages/types/src/api_token.ts
new file mode 100644
index 0000000..9abdf28
--- /dev/null
+++ b/packages/types/src/api_token.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export interface IApiToken {
+  created_at: string;
+  created_by: string;
+  description: string;
+  expired_at: string | null;
+  id: string;
+  is_active: boolean;
+  label: string;
+  last_used: string | null;
+  updated_at: string;
+  updated_by: string;
+  user: string;
+  user_type: number;
+  token?: string;
+  workspace: string;
+}
diff --git a/packages/types/src/auth.ts b/packages/types/src/auth.ts
new file mode 100644
index 0000000..d41f651
--- /dev/null
+++ b/packages/types/src/auth.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TEmailCheckTypes = "magic_code" | "password";
+
+export interface IEmailCheckData {
+  email: string;
+}
+
+export interface IEmailCheckResponse {
+  status: "MAGIC_CODE" | "CREDENTIAL";
+  existing: boolean;
+  is_password_autoset: boolean;
+}
+
+export interface ILoginTokenResponse {
+  access_token: string;
+  refresh_token: string;
+}
+
+export interface IMagicSignInData {
+  email: string;
+  key: string;
+  token: string;
+}
+
+export interface IPasswordSignInData {
+  email: string;
+  password: string;
+}
+
+export interface ICsrfTokenData {
+  csrf_token: string;
+}
diff --git a/packages/types/src/base-layouts/base.ts b/packages/types/src/base-layouts/base.ts
new file mode 100644
index 0000000..ce9ea59
--- /dev/null
+++ b/packages/types/src/base-layouts/base.ts
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+
+// Base Types
+
+export interface IBaseLayoutsBaseItem {
+  id: string;
+  [key: string]: unknown;
+}
+
+export interface IBaseLayoutsBaseGroup {
+  id: string;
+  name: string;
+  icon?: ReactNode;
+  payload?: Record<string, unknown>;
+  count?: number;
+}
+
+// Drag & Drop Types
+
+export interface IDragDropHandlers<T extends IBaseLayoutsBaseItem> {
+  enableDragDrop?: boolean;
+  onDrop?: (
+    sourceId: string,
+    destinationId: string | null,
+    sourceGroupId: string,
+    destinationGroupId: string
+  ) => Promise<void>;
+  canDrag?: (item: T) => boolean;
+}
+
+// Render Props
+
+export interface IItemRenderProps<T extends IBaseLayoutsBaseItem> {
+  renderItem: (item: T, groupId: string) => ReactNode;
+}
+
+export interface IGroupHeaderControls {
+  isCollapsed: boolean;
+  onToggleGroup: (groupId: string) => void;
+}
+
+export interface IGroupHeaderProps extends IGroupHeaderControls {
+  group: IBaseLayoutsBaseGroup;
+  itemCount: number;
+}
+
+export interface IGroupRenderProps {
+  renderGroupHeader?: (props: IGroupHeaderProps) => ReactNode;
+}
+
+export interface IRenderProps<T extends IBaseLayoutsBaseItem> extends IItemRenderProps<T>, IGroupRenderProps {}
+
+// Layout Configuration
+
+export type TBaseLayoutType = "list" | "kanban" | "gantt";
+
+export interface IBaseLayoutConfig {
+  key: TBaseLayoutType;
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  label: string;
+}
+
+// Base Layout Props
+export interface IBaseLayoutsBaseProps<T extends IBaseLayoutsBaseItem> extends IDragDropHandlers<T>, IRenderProps<T> {
+  items: Record<string, T>;
+  groupedItemIds: Record<string, string[]>;
+  groups: IBaseLayoutsBaseGroup[];
+
+  collapsedGroups?: string[];
+  onToggleGroup?: (groupId: string) => void;
+
+  isLoading?: boolean;
+  loadMoreItems?: (groupId: string) => void;
+
+  showEmptyGroups?: boolean;
+  className?: string;
+}
+
+// Group Props
+
+export interface IBaseLayoutsBaseGroupProps<T extends IBaseLayoutsBaseItem>
+  extends IDragDropHandlers<T>, IRenderProps<T> {
+  group: IBaseLayoutsBaseGroup;
+  itemIds: string[];
+  items: Record<string, T>;
+  isCollapsed: boolean;
+  onToggleGroup: (groupId: string) => void;
+  loadMoreItems?: (groupId: string) => void;
+}
+
+// Item Props
+
+export interface IBaseLayoutsBaseItemProps<T extends IBaseLayoutsBaseItem>
+  extends IDragDropHandlers<T>, IItemRenderProps<T> {
+  item: T;
+  index: number;
+  groupId: string;
+  isLast: boolean;
+}
diff --git a/packages/types/src/base-layouts/gantt/core.ts b/packages/types/src/base-layouts/gantt/core.ts
new file mode 100644
index 0000000..f834403
--- /dev/null
+++ b/packages/types/src/base-layouts/gantt/core.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const CORE_GANTT_TIMELINE_TYPE = {
+  ISSUE: "ISSUE",
+  MODULE: "MODULE",
+  PROJECT: "PROJECT",
+  GROUPED: "GROUPED",
+} as const;
diff --git a/packages/types/src/base-layouts/gantt/extended.ts b/packages/types/src/base-layouts/gantt/extended.ts
new file mode 100644
index 0000000..360e0db
--- /dev/null
+++ b/packages/types/src/base-layouts/gantt/extended.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const EXTENDED_GANTT_TIMELINE_TYPE = {} as const;
diff --git a/packages/types/src/base-layouts/gantt/index.ts b/packages/types/src/base-layouts/gantt/index.ts
new file mode 100644
index 0000000..d96c0a0
--- /dev/null
+++ b/packages/types/src/base-layouts/gantt/index.ts
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import type { IBaseLayoutsBaseItem, IBaseLayoutsBaseProps } from "../base";
+import { CORE_GANTT_TIMELINE_TYPE } from "./core";
+import { EXTENDED_GANTT_TIMELINE_TYPE } from "./extended";
+
+// Gantt-specific item with date fields
+export interface IBaseLayoutsGanttItem extends IBaseLayoutsBaseItem {
+  start_date?: string | null;
+  target_date?: string | null;
+}
+
+// Block update data (for drag/resize operations)
+export type TGanttBlockUpdateData = {
+  start_date?: string;
+  target_date?: string;
+  sort_order?: {
+    destinationIndex: number;
+    newSortOrder: number;
+  };
+};
+
+// Date update handler for bulk date changes (e.g., dependency updates)
+export type TGanttDateUpdate = {
+  id: string;
+  start_date?: string;
+  target_date?: string;
+};
+
+// Render props specific to Gantt
+export interface IGanttRenderProps<T extends IBaseLayoutsGanttItem> {
+  renderBlock: (item: T) => ReactNode;
+  renderSidebar?: (item: T) => ReactNode;
+}
+
+// Gantt-specific capabilities
+export interface IGanttCapabilities {
+  enableBlockLeftResize?: boolean | ((itemId: string) => boolean);
+  enableBlockRightResize?: boolean | ((itemId: string) => boolean);
+  enableBlockMove?: boolean | ((itemId: string) => boolean);
+  enableReorder?: boolean | ((itemId: string) => boolean);
+  enableAddBlock?: boolean | ((itemId: string) => boolean);
+  enableSelection?: boolean | ((itemId: string) => boolean);
+  enableDependency?: boolean | ((itemId: string) => boolean);
+}
+
+// Gantt display options
+export type TGanttDisplayOptions = {
+  showAllBlocks?: boolean; // Show blocks even without dates
+  showToday?: boolean; // Highlight today on timeline
+  border?: boolean;
+  title?: string;
+  loaderTitle?: string;
+  quickAdd?: ReactNode;
+  timelineType?: TTimelineType; // Type of timeline to use for store
+};
+
+// Main Gantt Layout Props
+export interface IBaseLayoutsGanttProps<T extends IBaseLayoutsGanttItem>
+  extends
+    Omit<IBaseLayoutsBaseProps<T>, "renderItem" | "enableDragDrop" | "onDrop" | "canDrag">,
+    IGanttRenderProps<T>,
+    IGanttCapabilities,
+    TGanttDisplayOptions {
+  // Handler for block updates (position, dates, order)
+  onBlockUpdate?: (item: T, payload: TGanttBlockUpdateData) => void | Promise<void>;
+
+  // Handler for bulk date updates (dependencies, etc.)
+  onDateUpdate?: (updates: TGanttDateUpdate[]) => void | Promise<void>;
+}
+
+export const GANTT_TIMELINE_TYPE = {
+  ...CORE_GANTT_TIMELINE_TYPE,
+  ...EXTENDED_GANTT_TIMELINE_TYPE,
+} as const;
+
+export type TTimelineTypeCore = (typeof CORE_GANTT_TIMELINE_TYPE)[keyof typeof CORE_GANTT_TIMELINE_TYPE];
+export type TTimelineType =
+  | TTimelineTypeCore
+  | (typeof EXTENDED_GANTT_TIMELINE_TYPE)[keyof typeof EXTENDED_GANTT_TIMELINE_TYPE];
diff --git a/packages/types/src/base-layouts/index.ts b/packages/types/src/base-layouts/index.ts
new file mode 100644
index 0000000..649bda3
--- /dev/null
+++ b/packages/types/src/base-layouts/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./base";
+export * from "./list";
+export * from "./kanban";
+export * from "./gantt";
diff --git a/packages/types/src/base-layouts/kanban.ts b/packages/types/src/base-layouts/kanban.ts
new file mode 100644
index 0000000..eadc1af
--- /dev/null
+++ b/packages/types/src/base-layouts/kanban.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  IBaseLayoutsBaseItem,
+  IBaseLayoutsBaseProps,
+  IBaseLayoutsBaseGroupProps,
+  IBaseLayoutsBaseItemProps,
+} from "./base";
+
+export type IBaseLayoutsKanbanItem = IBaseLayoutsBaseItem;
+
+// Main Kanban Layout Props
+
+export interface IBaseLayoutsKanbanProps<T extends IBaseLayoutsKanbanItem> extends IBaseLayoutsBaseProps<T> {
+  groupClassName?: string;
+}
+
+// Kanban Column/Group Props
+
+export interface IBaseLayoutsKanbanGroupProps<T extends IBaseLayoutsKanbanItem> extends IBaseLayoutsBaseGroupProps<T> {
+  groupClassName?: string;
+}
+
+// Kanban Card/Item Props
+
+export type IBaseLayoutsKanbanItemProps<T extends IBaseLayoutsKanbanItem> = IBaseLayoutsBaseItemProps<T>;
diff --git a/packages/types/src/base-layouts/list.ts b/packages/types/src/base-layouts/list.ts
new file mode 100644
index 0000000..ae35dd5
--- /dev/null
+++ b/packages/types/src/base-layouts/list.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  IBaseLayoutsBaseItem,
+  IBaseLayoutsBaseProps,
+  IBaseLayoutsBaseGroupProps,
+  IBaseLayoutsBaseItemProps,
+} from "./base";
+
+export type IBaseLayoutsListItem = IBaseLayoutsBaseItem;
+
+// Main List Layout Props
+
+export type IBaseLayoutsListProps<T extends IBaseLayoutsListItem> = IBaseLayoutsBaseProps<T>;
+
+// Group component props
+
+export type IBaseLayoutsListGroupProps<T extends IBaseLayoutsListItem> = IBaseLayoutsBaseGroupProps<T>;
+
+// Item component props
+
+export type IBaseLayoutsListItemProps<T extends IBaseLayoutsListItem> = IBaseLayoutsBaseItemProps<T>;
diff --git a/packages/types/src/calendar.ts b/packages/types/src/calendar.ts
new file mode 100644
index 0000000..300d90b
--- /dev/null
+++ b/packages/types/src/calendar.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export interface ICalendarRange {
+  startDate: Date;
+  endDate: Date;
+}
+
+export interface ICalendarDate {
+  date: Date;
+  year: number;
+  month: number;
+  day: number;
+  week: number; // week number wrt year, eg- 51, 52
+  is_current_month: boolean;
+  is_current_week: boolean;
+  is_today: boolean;
+}
+
+export interface ICalendarWeek {
+  [date: string]: ICalendarDate;
+}
+
+export interface ICalendarMonth {
+  [monthIndex: string]: {
+    [weekNumber: string]: ICalendarWeek;
+  };
+}
+
+export interface ICalendarPayload {
+  [year: string]: ICalendarMonth;
+}
diff --git a/packages/types/src/charts/common.ts b/packages/types/src/charts/common.ts
new file mode 100644
index 0000000..95198aa
--- /dev/null
+++ b/packages/types/src/charts/common.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TChartColorScheme = "modern" | "horizon" | "earthen";
+
+export type TChartDatum = {
+  key: string;
+  name: string;
+  count: number;
+} & Record<string, number>;
+
+export type TChart = {
+  data: TChartDatum[];
+  schema: Record<string, string>;
+};
diff --git a/packages/types/src/charts/index.ts b/packages/types/src/charts/index.ts
new file mode 100644
index 0000000..948649e
--- /dev/null
+++ b/packages/types/src/charts/index.ts
@@ -0,0 +1,250 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// ============================================================
+// Chart Base
+// ============================================================
+export * from "./common";
+export type TChartLegend = {
+  align: "left" | "center" | "right";
+  verticalAlign: "top" | "middle" | "bottom";
+  layout: "horizontal" | "vertical";
+  wrapperStyles?: React.CSSProperties;
+};
+
+export type TChartMargin = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+
+export type TChartData<K extends string, T extends string> = {
+  // required key
+  [key in K]: string | number;
+} & Record<T, any>;
+
+export type TBaseChartProps<K extends string, T extends string> = {
+  data: TChartData<K, T>[];
+  className?: string;
+  legend?: TChartLegend;
+  margin?: TChartMargin;
+  showTooltip?: boolean;
+  customTooltipContent?: (props: { active?: boolean; label: string; payload: any }) => React.ReactNode;
+};
+
+// Props specific to charts with X and Y axes
+export type TAxisChartProps<K extends string, T extends string> = TBaseChartProps<K, T> & {
+  xAxis: {
+    key: keyof TChartData<K, T>;
+    label?: string;
+    strokeColor?: string;
+    dy?: number;
+  };
+  yAxis: {
+    allowDecimals?: boolean;
+    domain?: [number, number];
+    key: keyof TChartData<K, T>;
+    label?: string;
+    strokeColor?: string;
+    offset?: number;
+    dx?: number;
+  };
+  tickCount?: {
+    x?: number;
+    y?: number;
+  };
+  customTicks?: {
+    x?: React.ComponentType<unknown>;
+    y?: React.ComponentType<unknown>;
+  };
+};
+
+// ============================================================
+// Bar Chart
+// ============================================================
+
+export type TBarChartShapeVariant = "bar" | "lollipop" | "lollipop-dotted";
+
+export type TBarItem<T extends string> = {
+  key: T;
+  label: string;
+  fill: string | ((payload: any) => string);
+  textClassName: string;
+  showPercentage?: boolean;
+  stackId: string;
+  showTopBorderRadius?: (barKey: string, payload: any) => boolean;
+  showBottomBorderRadius?: (barKey: string, payload: any) => boolean;
+  shapeVariant?: TBarChartShapeVariant;
+};
+
+export type TBarChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
+  bars: TBarItem<T>[];
+  barSize?: number;
+};
+
+// ============================================================
+// Line Chart
+// ============================================================
+
+export type TLineItem<T extends string> = {
+  key: T;
+  label: string;
+  dashedLine: boolean;
+  fill: string;
+  showDot: boolean;
+  smoothCurves: boolean;
+  stroke: string;
+  style?: Record<string, string | number>;
+};
+
+export type TLineChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
+  lines: TLineItem<T>[];
+};
+
+// ============================================================
+// Scatter Chart
+// ============================================================
+
+export type TScatterPointItem<T extends string> = {
+  key: T;
+  label: string;
+  fill: string;
+  stroke: string;
+};
+
+export type TScatterChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
+  scatterPoints: TScatterPointItem<T>[];
+};
+
+// ============================================================
+// Area Chart
+// ============================================================
+
+export type TAreaItem<T extends string> = {
+  key: T;
+  label: string;
+  stackId: string;
+  fill: string;
+  fillOpacity: number;
+  showDot: boolean;
+  smoothCurves: boolean;
+  strokeColor: string;
+  strokeOpacity: number;
+  style?: Record<string, string | number>;
+};
+
+export type TAreaChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
+  areas: TAreaItem<T>[];
+  comparisonLine?: {
+    dashedLine: boolean;
+    strokeColor: string;
+  };
+};
+
+// ============================================================
+// Pie Chart
+// ============================================================
+
+export type TCellItem<T extends string> = {
+  key: T;
+  fill: string;
+};
+
+export type TPieChartProps<K extends string, T extends string> = Pick<
+  TBaseChartProps<K, T>,
+  "className" | "data" | "showTooltip" | "legend" | "margin"
+> & {
+  dataKey: T;
+  cells: TCellItem<T>[];
+  innerRadius?: number | string;
+  outerRadius?: number | string;
+  cornerRadius?: number;
+  paddingAngle?: number;
+  showLabel: boolean;
+  customLabel?: (value: any) => string;
+  centerLabel?: {
+    className?: string;
+    fill: string;
+    style?: React.CSSProperties;
+    text?: string | number;
+  };
+  tooltipLabel?: string | ((payload: any) => string);
+  customLegend?: (props: any) => React.ReactNode;
+};
+
+// ============================================================
+// Tree Map
+// ============================================================
+
+export type TreeMapItem = {
+  name: string;
+  value: number;
+  label?: string;
+  textClassName?: string;
+  icon?: React.ReactElement;
+} & (
+  | {
+      fillColor: string;
+    }
+  | {
+      fillClassName: string;
+    }
+);
+
+export type TreeMapChartProps = {
+  data: TreeMapItem[];
+  className?: string;
+  isAnimationActive?: boolean;
+  showTooltip?: boolean;
+};
+
+export type TTopSectionConfig = {
+  showIcon: boolean;
+  showName: boolean;
+  nameTruncated: boolean;
+};
+
+export type TBottomSectionConfig = {
+  show: boolean;
+  showValue: boolean;
+  showLabel: boolean;
+  labelTruncated: boolean;
+};
+
+export type TContentVisibility = {
+  top: TTopSectionConfig;
+  bottom: TBottomSectionConfig;
+};
+
+// ============================================================
+// Radar Chart
+// ============================================================
+
+export type TRadarItem<T extends string> = {
+  key: T;
+  name: string;
+  fill?: string;
+  stroke?: string;
+  fillOpacity?: number;
+  dot?: {
+    r: number;
+    fillOpacity: number;
+  };
+};
+
+export type TRadarChartProps<K extends string, T extends string> = Pick<
+  TBaseChartProps<K, T>,
+  "className" | "showTooltip" | "margin" | "data" | "legend"
+> & {
+  dataKey: T;
+  radars: TRadarItem<T>[];
+  angleAxis: {
+    key: keyof TChartData<K, T>;
+    label?: string;
+    strokeColor?: string;
+  };
+};
diff --git a/packages/types/src/command-palette.ts b/packages/types/src/command-palette.ts
new file mode 100644
index 0000000..2e5cfa3
--- /dev/null
+++ b/packages/types/src/command-palette.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TCommandPaletteActionList = Record<string, { title: string; description: string; action: () => void }>;
+
+export type TCommandPaletteShortcutList = {
+  key: string;
+  title: string;
+  shortcuts: TCommandPaletteShortcut[];
+};
+
+export type TCommandPaletteShortcut = {
+  keys: string; // comma separated keys
+  description: string;
+};
diff --git a/packages/types/src/common.ts b/packages/types/src/common.ts
new file mode 100644
index 0000000..ac34443
--- /dev/null
+++ b/packages/types/src/common.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TPaginationInfo = {
+  count: number;
+  extra_stats: string | null;
+  next_cursor: string;
+  next_page_results: boolean;
+  prev_cursor: string;
+  prev_page_results: boolean;
+  total_pages: number;
+  per_page?: number;
+  total_results: number;
+};
+
+export type TLogoProps = {
+  in_use: "emoji" | "icon";
+  emoji?: {
+    value?: string;
+    url?: string;
+  };
+  icon?: {
+    name?: string;
+    color?: string;
+    background_color?: string;
+  };
+};
+
+export type TNameDescriptionLoader = "submitting" | "submitted" | "saved";
+
+export type TFetchStatus = "partial" | "complete" | undefined;
+
+export type ICustomSearchSelectOption = {
+  value: any;
+  query: string;
+  content: React.ReactNode;
+  disabled?: boolean;
+  tooltip?: string | React.ReactNode;
+};
diff --git a/packages/types/src/current-user/index.ts b/packages/types/src/current-user/index.ts
new file mode 100644
index 0000000..cdec1f3
--- /dev/null
+++ b/packages/types/src/current-user/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./profile";
diff --git a/packages/types/src/current-user/profile.ts b/packages/types/src/current-user/profile.ts
new file mode 100644
index 0000000..677f8f7
--- /dev/null
+++ b/packages/types/src/current-user/profile.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TUserProfile = {
+  id: string | undefined;
+
+  user: string | undefined;
+  role: string | undefined;
+  last_workspace_id: string | undefined;
+
+  theme: {
+    theme: string | undefined;
+  };
+
+  onboarding_step: {
+    workspace_join: boolean;
+    profile_complete: boolean;
+    workspace_create: boolean;
+    workspace_invite: boolean;
+  };
+  is_onboarded: boolean;
+  is_tour_completed: boolean;
+
+  use_case: string | undefined;
+
+  billing_address_country: string | undefined;
+  billing_address: string | undefined;
+  has_billing_address: boolean;
+  has_marketing_email_consent: boolean;
+
+  created_at: Date | string;
+  updated_at: Date | string;
+};
diff --git a/packages/types/src/cycle/cycle.ts b/packages/types/src/cycle/cycle.ts
new file mode 100644
index 0000000..b6ec359
--- /dev/null
+++ b/packages/types/src/cycle/cycle.ts
@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssue } from "../issues/issue";
+import type { IIssueFilterOptions } from "../view-props";
+
+export type TCycleGroups = "current" | "upcoming" | "completed" | "draft";
+
+export type TCycleCompletionChartDistribution = {
+  [key: string]: number | null;
+};
+
+export type TCycleDistributionBase = {
+  total_issues: number;
+  pending_issues: number;
+  completed_issues: number;
+};
+
+export type TCycleEstimateDistributionBase = {
+  total_estimates: number;
+  pending_estimates: number;
+  completed_estimates: number;
+};
+
+export type TCycleAssigneesDistribution = {
+  assignee_id: string | null;
+  avatar_url: string | null;
+  first_name: string | null;
+  last_name: string | null;
+  display_name: string | null;
+};
+
+export type TCycleLabelsDistribution = {
+  color: string | null;
+  label_id: string | null;
+  label_name: string | null;
+};
+
+export type TCycleDistribution = {
+  assignees: (TCycleAssigneesDistribution & TCycleDistributionBase)[];
+  completion_chart: TCycleCompletionChartDistribution;
+  labels: (TCycleLabelsDistribution & TCycleDistributionBase)[];
+};
+
+export type TCycleEstimateDistribution = {
+  assignees: (TCycleAssigneesDistribution & TCycleEstimateDistributionBase)[];
+  completion_chart: TCycleCompletionChartDistribution;
+  labels: (TCycleLabelsDistribution & TCycleEstimateDistributionBase)[];
+};
+export type TCycleProgress = {
+  date: string;
+  started: number;
+  actual: number;
+  pending: number;
+  ideal: number | null;
+  scope: number;
+  completed: number;
+  unstarted: number;
+  backlog: number;
+  cancelled: number;
+};
+
+export type TProgressSnapshot = {
+  total_issues: number;
+  completed_issues: number;
+  backlog_issues: number;
+  started_issues: number;
+  unstarted_issues: number;
+  cancelled_issues: number;
+  total_estimate_points?: number;
+  completed_estimate_points?: number;
+  backlog_estimate_points: number;
+  started_estimate_points: number;
+  unstarted_estimate_points: number;
+  cancelled_estimate_points: number;
+  distribution?: TCycleDistribution;
+  estimate_distribution?: TCycleEstimateDistribution;
+};
+
+export interface IProjectDetails {
+  id: string;
+}
+
+export interface ICycle extends TProgressSnapshot {
+  progress_snapshot: TProgressSnapshot | undefined;
+
+  created_at?: string;
+  created_by?: string;
+  description: string;
+  end_date: string | null;
+  id: string;
+  is_favorite?: boolean;
+  name: string;
+  owned_by_id: string;
+  project_id: string;
+  status?: TCycleGroups;
+  sort_order: number;
+  start_date: string | null;
+  sub_issues?: number;
+  updated_at?: string;
+  updated_by?: string;
+  archived_at: string | null;
+  assignee_ids?: string[];
+  view_props: {
+    filters: IIssueFilterOptions;
+  };
+  workspace_id: string;
+  project_detail: IProjectDetails;
+  progress: any[];
+  version: number;
+}
+
+export interface CycleIssueResponse {
+  id: string;
+  issue_detail: TIssue;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  cycle: string;
+  sub_issues_count: number;
+}
+
+export type SelectCycleType = (ICycle & { actionType: "edit" | "delete" | "create-issue" }) | undefined;
+
+export type CycleDateCheckData = {
+  start_date: string;
+  end_date: string;
+  cycle_id?: string;
+};
+
+export type TCycleEstimateType = "issues" | "points";
+export type TCyclePlotType = "burndown" | "burnup";
+
+export type TPublicCycle = {
+  id: string;
+  name: string;
+  status: string;
+};
+
+export type TProgressChartData = {
+  date: string;
+  scope: number;
+  completed: number;
+  backlog: number;
+  started: number;
+  unstarted: number;
+  cancelled: number;
+  pending: number;
+  ideal: number;
+  actual: number;
+}[];
diff --git a/packages/types/src/cycle/cycle_filters.ts b/packages/types/src/cycle/cycle_filters.ts
new file mode 100644
index 0000000..1ebb66c
--- /dev/null
+++ b/packages/types/src/cycle/cycle_filters.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TCycleTabOptions = "active" | "all";
+
+export type TCycleLayoutOptions = "list" | "board" | "gantt";
+
+export type TCycleDisplayFilters = {
+  active_tab?: TCycleTabOptions;
+  layout?: TCycleLayoutOptions;
+};
+
+export type TCycleFilters = {
+  end_date?: string[] | null;
+  start_date?: string[] | null;
+  status?: string[] | null;
+};
+
+export type TCycleFiltersByState = {
+  default: TCycleFilters;
+  archived: TCycleFilters;
+};
+
+export type TCycleStoredFilters = {
+  display_filters?: TCycleDisplayFilters;
+  filters?: TCycleFilters;
+};
diff --git a/packages/types/src/cycle/index.ts b/packages/types/src/cycle/index.ts
new file mode 100644
index 0000000..7856a0f
--- /dev/null
+++ b/packages/types/src/cycle/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./cycle_filters";
+export * from "./cycle";
diff --git a/packages/types/src/dashboard.ts b/packages/types/src/dashboard.ts
new file mode 100644
index 0000000..0159079
--- /dev/null
+++ b/packages/types/src/dashboard.ts
@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EDurationFilters } from "./enums";
+import type { IIssueActivity, TIssuePriorities } from "./issues";
+import type { TIssue } from "./issues/issue";
+import type { TIssueRelationTypes } from "./issues/issue_relation";
+import type { TStateGroups } from "./state";
+
+export type TWidgetKeys =
+  | "overview_stats"
+  | "assigned_issues"
+  | "created_issues"
+  | "issues_by_state_groups"
+  | "issues_by_priority"
+  | "recent_activity"
+  | "recent_projects"
+  | "recent_collaborators";
+
+export type TIssuesListTypes = "pending" | "upcoming" | "overdue" | "completed";
+
+// widget filters
+export type TAssignedIssuesWidgetFilters = {
+  custom_dates?: string[];
+  duration?: EDurationFilters;
+  tab?: TIssuesListTypes;
+};
+
+export type TCreatedIssuesWidgetFilters = {
+  custom_dates?: string[];
+  duration?: EDurationFilters;
+  tab?: TIssuesListTypes;
+};
+
+export type TIssuesByStateGroupsWidgetFilters = {
+  duration?: EDurationFilters;
+  custom_dates?: string[];
+};
+
+export type TIssuesByPriorityWidgetFilters = {
+  custom_dates?: string[];
+  duration?: EDurationFilters;
+};
+
+export type TWidgetFiltersFormData =
+  | {
+      widgetKey: "assigned_issues";
+      filters: Partial<TAssignedIssuesWidgetFilters>;
+    }
+  | {
+      widgetKey: "created_issues";
+      filters: Partial<TCreatedIssuesWidgetFilters>;
+    }
+  | {
+      widgetKey: "issues_by_state_groups";
+      filters: Partial<TIssuesByStateGroupsWidgetFilters>;
+    }
+  | {
+      widgetKey: "issues_by_priority";
+      filters: Partial<TIssuesByPriorityWidgetFilters>;
+    };
+
+export type TWidget = {
+  id: string;
+  is_visible: boolean;
+  key: TWidgetKeys;
+  readonly widget_filters: // only for read
+  TAssignedIssuesWidgetFilters &
+    TCreatedIssuesWidgetFilters &
+    TIssuesByStateGroupsWidgetFilters &
+    TIssuesByPriorityWidgetFilters;
+  filters: // only for write
+  TAssignedIssuesWidgetFilters &
+    TCreatedIssuesWidgetFilters &
+    TIssuesByStateGroupsWidgetFilters &
+    TIssuesByPriorityWidgetFilters;
+};
+
+export type TWidgetStatsRequestParams =
+  | {
+      widget_key: TWidgetKeys;
+    }
+  | {
+      target_date: string;
+      issue_type: TIssuesListTypes;
+      widget_key: "assigned_issues";
+      expand?: "issue_relation";
+    }
+  | {
+      target_date: string;
+      issue_type: TIssuesListTypes;
+      widget_key: "created_issues";
+    }
+  | {
+      target_date: string;
+      widget_key: "issues_by_state_groups";
+    }
+  | {
+      target_date: string;
+      widget_key: "issues_by_priority";
+    }
+  | {
+      cursor: string;
+      per_page: number;
+      search?: string;
+      widget_key: "recent_collaborators";
+    };
+
+export type TWidgetIssue = TIssue & {
+  issue_relation: {
+    id: string;
+    project_id: string;
+    relation_type: TIssueRelationTypes;
+    sequence_id: number;
+    type_id: string | null;
+  }[];
+};
+
+// widget stats responses
+export type TOverviewStatsWidgetResponse = {
+  assigned_issues_count: number;
+  completed_issues_count: number;
+  created_issues_count: number;
+  pending_issues_count: number;
+};
+
+export type TAssignedIssuesWidgetResponse = {
+  issues: TWidgetIssue[];
+  count: number;
+};
+
+export type TCreatedIssuesWidgetResponse = {
+  issues: TWidgetIssue[];
+  count: number;
+};
+
+export type TIssuesByStateGroupsWidgetResponse = {
+  count: number;
+  state: TStateGroups;
+};
+
+export type TIssuesByPriorityWidgetResponse = {
+  count: number;
+  priority: TIssuePriorities;
+};
+
+export type TRecentActivityWidgetResponse = IIssueActivity;
+
+export type TRecentProjectsWidgetResponse = string[];
+
+export type TRecentCollaboratorsWidgetResponse = {
+  active_issue_count: number;
+  user_id: string;
+};
+
+export type TWidgetStatsResponse =
+  | TOverviewStatsWidgetResponse
+  | TIssuesByStateGroupsWidgetResponse[]
+  | TIssuesByPriorityWidgetResponse[]
+  | TAssignedIssuesWidgetResponse
+  | TCreatedIssuesWidgetResponse
+  | TRecentActivityWidgetResponse[]
+  | TRecentProjectsWidgetResponse
+  | TRecentCollaboratorsWidgetResponse[];
+
+// dashboard
+export type TDeprecatedDashboard = {
+  created_at: string;
+  created_by: string | null;
+  description_html: string;
+  id: string;
+  identifier: string | null;
+  is_default: boolean;
+  name: string;
+  owned_by: string;
+  type: string;
+  updated_at: string;
+  updated_by: string | null;
+};
+
+export type THomeDashboardResponse = {
+  dashboard: TDeprecatedDashboard;
+  widgets: TWidget[];
+};
diff --git a/packages/types/src/de-dupe.ts b/packages/types/src/de-dupe.ts
new file mode 100644
index 0000000..8832dbd
--- /dev/null
+++ b/packages/types/src/de-dupe.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssuePriorities } from "./issues";
+
+export type TDuplicateIssuePayload = {
+  title: string;
+  workspace_id: string;
+  issue_id?: string | null;
+  project_id?: string;
+  description_stripped?: string;
+};
+
+export type TDeDupeIssue = {
+  id: string;
+  type_id: string | null;
+  project_id: string;
+  sequence_id: number;
+  name: string;
+  priority: TIssuePriorities;
+  state_id: string;
+  created_by: string;
+};
+
+export type TDuplicateIssueResponse = {
+  dupes: TDeDupeIssue[];
+};
diff --git a/packages/types/src/description_version.ts b/packages/types/src/description_version.ts
new file mode 100644
index 0000000..fe4fc3d
--- /dev/null
+++ b/packages/types/src/description_version.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TDescriptionVersion = {
+  created_at: string;
+  created_by: string | null;
+  id: string;
+  last_saved_at: string;
+  owned_by: string;
+  project: string;
+  updated_at: string;
+  updated_by: string | null;
+};
+
+export type TDescriptionVersionDetails = TDescriptionVersion & {
+  description_binary: string | null;
+  description_html: string | null;
+  description_json: object | null;
+  description_stripped: string | null;
+};
+
+export type TDescriptionVersionsListResponse = {
+  cursor: string;
+  next_cursor: string | null;
+  next_page_results: boolean;
+  page_count: number;
+  prev_cursor: string | null;
+  prev_page_results: boolean;
+  results: TDescriptionVersion[];
+  total_pages: number;
+  total_results: number;
+};
diff --git a/packages/types/src/editor/editor-content.ts b/packages/types/src/editor/editor-content.ts
new file mode 100644
index 0000000..696fe20
--- /dev/null
+++ b/packages/types/src/editor/editor-content.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Editor content types - locally defined to avoid external dependencies
+ */
+
+export type JSONContent = {
+  type?: string;
+  attrs?: Record<string, unknown>;
+  content?: JSONContent[];
+  marks?: {
+    type: string;
+    attrs?: Record<string, unknown>;
+    [key: string]: unknown;
+  }[];
+  text?: string;
+  [key: string]: unknown;
+};
+
+export type HTMLContent = string;
+
+export type Content = HTMLContent | JSONContent | JSONContent[] | null;
diff --git a/packages/types/src/editor/index.ts b/packages/types/src/editor/index.ts
new file mode 100644
index 0000000..08e77d0
--- /dev/null
+++ b/packages/types/src/editor/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type { JSONContent, HTMLContent, Content } from "./editor-content";
diff --git a/packages/types/src/enums.ts b/packages/types/src/enums.ts
new file mode 100644
index 0000000..d842a82
--- /dev/null
+++ b/packages/types/src/enums.ts
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EUserPermissions {
+  ADMIN = 20,
+  MEMBER = 15,
+  GUEST = 5,
+}
+
+export type TUserPermissions = EUserPermissions.ADMIN | EUserPermissions.MEMBER | EUserPermissions.GUEST;
+
+// project network
+export enum EProjectNetwork {
+  PRIVATE = 0,
+  PUBLIC = 2,
+}
+
+// project pages
+export enum EPageAccess {
+  PUBLIC = 0,
+  PRIVATE = 1,
+}
+
+export enum EDurationFilters {
+  NONE = "none",
+  TODAY = "today",
+  THIS_WEEK = "this_week",
+  THIS_MONTH = "this_month",
+  THIS_YEAR = "this_year",
+  CUSTOM = "custom",
+}
+
+export enum EIssueCommentAccessSpecifier {
+  EXTERNAL = "EXTERNAL",
+  INTERNAL = "INTERNAL",
+}
+
+// estimates
+export enum EEstimateSystem {
+  POINTS = "points",
+  CATEGORIES = "categories",
+  TIME = "time",
+}
+
+export enum EEstimateUpdateStages {
+  CREATE = "create",
+  EDIT = "edit",
+  SWITCH = "switch",
+}
+
+// workspace notifications
+export enum ENotificationFilterType {
+  CREATED = "created",
+  ASSIGNED = "assigned",
+  SUBSCRIBED = "subscribed",
+}
+
+export enum EFileAssetType {
+  COMMENT_DESCRIPTION = "COMMENT_DESCRIPTION",
+  ISSUE_ATTACHMENT = "ISSUE_ATTACHMENT",
+  ISSUE_DESCRIPTION = "ISSUE_DESCRIPTION",
+  DRAFT_ISSUE_DESCRIPTION = "DRAFT_ISSUE_DESCRIPTION",
+  PAGE_DESCRIPTION = "PAGE_DESCRIPTION",
+  PROJECT_COVER = "PROJECT_COVER",
+  USER_AVATAR = "USER_AVATAR",
+  USER_COVER = "USER_COVER",
+  WORKSPACE_LOGO = "WORKSPACE_LOGO",
+  TEAM_SPACE_DESCRIPTION = "TEAM_SPACE_DESCRIPTION",
+  INITIATIVE_DESCRIPTION = "INITIATIVE_DESCRIPTION",
+  PROJECT_DESCRIPTION = "PROJECT_DESCRIPTION",
+  TEAM_SPACE_COMMENT_DESCRIPTION = "TEAM_SPACE_COMMENT_DESCRIPTION",
+}
+
+export type TEditorAssetType =
+  | EFileAssetType.COMMENT_DESCRIPTION
+  | EFileAssetType.ISSUE_DESCRIPTION
+  | EFileAssetType.DRAFT_ISSUE_DESCRIPTION
+  | EFileAssetType.PAGE_DESCRIPTION
+  | EFileAssetType.TEAM_SPACE_DESCRIPTION
+  | EFileAssetType.INITIATIVE_DESCRIPTION
+  | EFileAssetType.PROJECT_DESCRIPTION
+  | EFileAssetType.TEAM_SPACE_COMMENT_DESCRIPTION;
+
+export enum EUpdateStatus {
+  OFF_TRACK = "OFF-TRACK",
+  ON_TRACK = "ON-TRACK",
+  AT_RISK = "AT-RISK",
+}
diff --git a/packages/types/src/epics.ts b/packages/types/src/epics.ts
new file mode 100644
index 0000000..e755172
--- /dev/null
+++ b/packages/types/src/epics.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TEpicAnalyticsGroup =
+  | "backlog_issues"
+  | "unstarted_issues"
+  | "started_issues"
+  | "completed_issues"
+  | "cancelled_issues"
+  | "overdue_issues";
+
+export type TEpicAnalytics = {
+  backlog_issues: number;
+  unstarted_issues: number;
+  started_issues: number;
+  completed_issues: number;
+  cancelled_issues: number;
+  overdue_issues: number;
+};
diff --git a/packages/types/src/estimate.ts b/packages/types/src/estimate.ts
new file mode 100644
index 0000000..2e4d416
--- /dev/null
+++ b/packages/types/src/estimate.ts
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EEstimateSystem, EEstimateUpdateStages } from "./enums";
+
+export interface IEstimatePoint {
+  id: string | undefined;
+  key: number | undefined;
+  value: string | undefined;
+  description: string | undefined;
+  workspace: string | undefined;
+  project: string | undefined;
+  estimate: string | undefined;
+  created_at: Date | undefined;
+  updated_at: Date | undefined;
+  created_by: string | undefined;
+  updated_by: string | undefined;
+}
+
+export type TEstimateSystemKeys = EEstimateSystem.POINTS | EEstimateSystem.CATEGORIES | EEstimateSystem.TIME;
+
+export interface IEstimate {
+  id: string | undefined;
+  name: string | undefined;
+  description: string | undefined;
+  type: TEstimateSystemKeys | undefined; // categories, points, time
+  points: IEstimatePoint[] | undefined;
+  workspace: string | undefined;
+  project: string | undefined;
+  last_used: boolean | undefined;
+  created_at: Date | undefined;
+  updated_at: Date | undefined;
+  created_by: string | undefined;
+  updated_by: string | undefined;
+}
+
+export interface IEstimateFormData {
+  estimate?: {
+    name?: string;
+    type?: string;
+    last_used?: boolean;
+  };
+  estimate_points: {
+    id?: string | undefined;
+    key: number;
+    value: string;
+  }[];
+}
+
+export type TEstimatePointsObject = {
+  id?: string | undefined;
+  key: number;
+  value: string;
+};
+
+export type TTemplateValues = {
+  title: string;
+  i18n_title: string;
+  values: TEstimatePointsObject[];
+  hide?: boolean;
+};
+
+export type TEstimateSystem = {
+  name: string;
+  i18n_name: string;
+  templates: Record<string, TTemplateValues>;
+  is_available: boolean;
+  is_ee: boolean;
+};
+
+export type TEstimateSystems = {
+  [K in TEstimateSystemKeys]: TEstimateSystem;
+};
+
+// update estimates
+export type TEstimateUpdateStageKeys =
+  | EEstimateUpdateStages.CREATE
+  | EEstimateUpdateStages.EDIT
+  | EEstimateUpdateStages.SWITCH;
+
+export type TEstimateTypeErrorObject = {
+  oldValue: string;
+  newValue: string;
+  message: string | undefined;
+};
+
+export type TEstimateTypeError = Record<number, TEstimateTypeErrorObject> | undefined;
diff --git a/packages/types/src/favorite/favorite.ts b/packages/types/src/favorite/favorite.ts
new file mode 100644
index 0000000..32aa4a7
--- /dev/null
+++ b/packages/types/src/favorite/favorite.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TLogoProps } from "../common";
+
+export type IFavorite = {
+  id: string;
+  name: string;
+  entity_type: string;
+  entity_data: {
+    id?: string;
+    name: string;
+    logo_props?: TLogoProps | undefined;
+  };
+  is_folder: boolean;
+  sort_order: number;
+  parent: string | null;
+  entity_identifier?: string | null;
+  children: IFavorite[];
+  project_id: string | null;
+  sequence: number;
+  workspace_id: string;
+};
diff --git a/packages/types/src/favorite/index.ts b/packages/types/src/favorite/index.ts
new file mode 100644
index 0000000..033cc17
--- /dev/null
+++ b/packages/types/src/favorite/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./favorite";
diff --git a/packages/types/src/file.ts b/packages/types/src/file.ts
new file mode 100644
index 0000000..01a1892
--- /dev/null
+++ b/packages/types/src/file.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EFileAssetType } from "./enums";
+
+export type TFileMetaDataLite = {
+  name: string;
+  // file size in bytes
+  size: number;
+  type: string;
+};
+
+export type TFileEntityInfo = {
+  entity_identifier: string;
+  entity_type: EFileAssetType;
+};
+
+export type TFileMetaData = TFileMetaDataLite & TFileEntityInfo;
+
+export type TFileSignedURLResponse = {
+  asset_id: string;
+  asset_url: string;
+  upload_data: {
+    url: string;
+    fields: {
+      "Content-Type": string;
+      key: string;
+      "x-amz-algorithm": string;
+      "x-amz-credential": string;
+      "x-amz-date": string;
+      policy: string;
+      "x-amz-signature": string;
+    };
+  };
+};
+
+export type TDuplicateAssetData = {
+  entity_id: string;
+  entity_type: EFileAssetType;
+  project_id?: string;
+  asset_ids: string[];
+};
+
+export type TDuplicateAssetResponse = Record<string, string>; // asset_id -> new_asset_id
diff --git a/packages/types/src/home.ts b/packages/types/src/home.ts
new file mode 100644
index 0000000..16c8def
--- /dev/null
+++ b/packages/types/src/home.ts
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TLogoProps } from "./common";
+import type { TIssuePriorities } from "./issues";
+
+export type TRecentActivityFilterKeys = "all item" | "issue" | "page" | "project" | "workspace_page";
+export type THomeWidgetKeys = "quick_links" | "recents" | "my_stickies" | "quick_tutorial" | "new_at_plane";
+
+export type THomeWidgetProps = {
+  workspaceSlug: string;
+};
+
+export type TPageEntityData = {
+  id: string;
+  name: string;
+  logo_props: TLogoProps;
+  project_id?: string;
+  owned_by: string;
+  project_identifier?: string;
+};
+
+export type TProjectEntityData = {
+  id: string;
+  name: string;
+  logo_props: TLogoProps;
+  project_members: string[];
+  identifier: string;
+};
+
+export type TIssueEntityData = {
+  id: string;
+  name: string;
+  state: string;
+  priority: TIssuePriorities;
+  assignees: string[];
+  type: string | null;
+  sequence_id: number;
+  project_id: string;
+  project_identifier: string;
+  is_epic: boolean;
+};
+
+export type TActivityEntityData = {
+  id: string;
+  entity_name: "page" | "project" | "issue" | "workspace_page";
+  entity_identifier: string;
+  visited_at: string;
+  entity_data: TPageEntityData | TProjectEntityData | TIssueEntityData;
+};
+
+export type TLinkEditableFields = {
+  title: string;
+  url: string;
+};
+
+export type TLink = TLinkEditableFields & {
+  created_by_id: string;
+  id: string;
+  metadata: any;
+  workspace_slug: string;
+
+  //need
+  created_at: Date;
+};
+
+export type TLinkMap = {
+  [workspace_slug: string]: TLink;
+};
+
+export type TLinkIdMap = {
+  [workspace_slug: string]: string[];
+};
+
+export type TWidgetEntityData = {
+  key: THomeWidgetKeys;
+  name: string;
+  is_enabled: boolean;
+  sort_order: number;
+};
diff --git a/packages/types/src/importer/github-importer.ts b/packages/types/src/importer/github-importer.ts
new file mode 100644
index 0000000..193c86a
--- /dev/null
+++ b/packages/types/src/importer/github-importer.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export interface IGithubServiceImportFormData {
+  metadata: {
+    owner: string;
+    name: string;
+    repository_id: number;
+    url: string;
+  };
+  data: {
+    users: {
+      username: string;
+      import: boolean | "invite" | "map";
+      email: string;
+    }[];
+  };
+  config: {
+    sync: boolean;
+  };
+  project_id: string;
+}
+
+export interface IGithubRepoCollaborator {
+  avatar_url: string;
+  html_url: string;
+  id: number;
+  login: string;
+  url: string;
+}
+
+export interface IGithubRepoInfo {
+  issue_count: number;
+  labels: number;
+  collaborators: IGithubRepoCollaborator[];
+}
diff --git a/packages/types/src/importer/index.ts b/packages/types/src/importer/index.ts
new file mode 100644
index 0000000..ec42f91
--- /dev/null
+++ b/packages/types/src/importer/index.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./github-importer";
+export * from "./jira-importer";
+
+import type { IProjectLite } from "../project";
+// types
+import type { IUserLite } from "../users";
+
+export interface IImporterService {
+  created_at: string;
+  config: {
+    sync: boolean;
+  };
+  created_by: string | null;
+  data: {
+    users: [];
+  };
+  id: string;
+  initiated_by: string;
+  initiated_by_detail: IUserLite;
+  metadata: {
+    name: string;
+    owner: string;
+    repository_id: number;
+    url: string;
+  };
+  project: string;
+  project_detail: IProjectLite;
+  service: string;
+  status: "processing" | "completed" | "failed";
+  updated_at: string;
+  updated_by: string;
+  token: string;
+  workspace: string;
+}
+
+export interface IExportData {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  project: string[];
+  provider: string;
+  status: string;
+  url: string;
+  token: string;
+  created_by: string;
+  updated_by: string;
+  initiated_by_detail: IUserLite;
+}
+export interface IExportServiceResponse {
+  count: number;
+  extra_stats: null;
+  next_cursor: string;
+  next_page_results: boolean;
+  prev_cursor: string;
+  prev_page_results: boolean;
+  results: IExportData[];
+  total_pages: number;
+}
diff --git a/packages/types/src/importer/jira-importer.ts b/packages/types/src/importer/jira-importer.ts
new file mode 100644
index 0000000..83080ea
--- /dev/null
+++ b/packages/types/src/importer/jira-importer.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export interface IJiraImporterForm {
+  metadata: IJiraMetadata;
+  config: IJiraConfig;
+  data: IJiraData;
+  project_id: string;
+}
+
+export interface IJiraConfig {
+  epics_to_modules: boolean;
+}
+
+export interface IJiraData {
+  users: User[];
+  invite_users: boolean;
+  total_issues: number;
+  total_labels: number;
+  total_states: number;
+  total_modules: number;
+}
+
+export interface User {
+  username: string;
+  import: "invite" | "map" | false;
+  email: string;
+}
+
+export interface IJiraMetadata {
+  cloud_hostname: string;
+  api_token: string;
+  project_key: string;
+  email: string;
+}
+
+export interface IJiraResponse {
+  issues: number;
+  modules: number;
+  labels: number;
+  states: number;
+  users: IJiraResponseUser[];
+}
+
+export interface IJiraResponseUser {
+  self: string;
+  accountId: string;
+  accountType: string;
+  emailAddress: string;
+  avatarUrls: IJiraResponseAvatarUrls;
+  displayName: string;
+  active: boolean;
+  locale: string;
+}
+
+export interface IJiraResponseAvatarUrls {
+  "48x48": string;
+  "24x24": string;
+  "16x16": string;
+  "32x32": string;
+}
diff --git a/packages/types/src/inbox.ts b/packages/types/src/inbox.ts
new file mode 100644
index 0000000..0cbdf03
--- /dev/null
+++ b/packages/types/src/inbox.ts
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane types
+import type { TPaginationInfo } from "./common";
+import type { TIssuePriorities } from "./issues";
+import type { TIssue } from "./issues/issue";
+
+export enum EInboxIssueCurrentTab {
+  OPEN = "open",
+  CLOSED = "closed",
+}
+
+export type TInboxIssueCurrentTab = EInboxIssueCurrentTab;
+
+export enum EInboxIssueStatus {
+  PENDING = -2,
+  DECLINED = -1,
+  SNOOZED = 0,
+  ACCEPTED = 1,
+  DUPLICATE = 2,
+}
+
+export enum EInboxIssueSource {
+  IN_APP = "IN_APP",
+  FORMS = "FORMS",
+  EMAIL = "EMAIL",
+}
+
+export type TInboxIssueStatus = EInboxIssueStatus;
+export type TInboxIssue = {
+  id: string;
+  status: TInboxIssueStatus;
+  snoozed_till: Date | null;
+  duplicate_to: string | undefined;
+  source: EInboxIssueSource | undefined;
+  issue: TIssue;
+  created_by: string;
+  duplicate_issue_detail: TInboxDuplicateIssueDetails | undefined;
+};
+
+// filters
+export type TInboxIssueFilterMemberKeys = "assignees" | "created_by";
+
+export type TInboxIssueFilterDateKeys = "created_at" | "updated_at";
+
+export type TInboxIssueFilter = {
+  [key in TInboxIssueFilterMemberKeys]: string[] | undefined;
+} & {
+  [key in TInboxIssueFilterDateKeys]: string[] | undefined;
+} & {
+  state: string[] | undefined;
+  status: TInboxIssueStatus[] | undefined;
+  priority: TIssuePriorities[] | undefined;
+  labels: string[] | undefined;
+};
+
+// sorting filters
+export type TInboxIssueSortingKeys = "order_by" | "sort_by";
+
+export type TInboxIssueSortingOrderByKeys = "issue__created_at" | "issue__updated_at" | "issue__sequence_id";
+
+export type TInboxIssueSortingSortByKeys = "asc" | "desc";
+
+export type TInboxIssueSorting = {
+  order_by: TInboxIssueSortingOrderByKeys | undefined;
+  sort_by: TInboxIssueSortingSortByKeys | undefined;
+};
+
+// filtering and sorting types for query params
+export type TInboxIssueSortingOrderByQueryParamKeys =
+  | "issue__created_at"
+  | "-issue__created_at"
+  | "issue__updated_at"
+  | "-issue__updated_at"
+  | "issue__sequence_id"
+  | "-issue__sequence_id";
+
+export type TInboxIssueSortingOrderByQueryParam = {
+  order_by: TInboxIssueSortingOrderByQueryParamKeys;
+};
+
+export type TInboxIssuesQueryParams = {
+  [key in keyof TInboxIssueFilter]: string;
+} & TInboxIssueSortingOrderByQueryParam & {
+    per_page: number;
+    cursor: string;
+  };
+
+// inbox issue types
+
+export type TInboxDuplicateIssueDetails = {
+  id: string;
+  sequence_id: string;
+  name: string;
+};
+
+export type TInboxIssuePaginationInfo = TPaginationInfo & {
+  total_results: number;
+};
+
+export type TInboxIssueWithPagination = TInboxIssuePaginationInfo & {
+  results: TInboxIssue[];
+};
+
+export type TAnchors = { [key: string]: string };
+
+export type TInboxForm = {
+  anchors: TAnchors;
+  id: string;
+  is_in_app_enabled: boolean;
+  is_form_enabled: boolean;
+};
+
+export type TInboxIssueForm = {
+  name: string;
+  description: string;
+  username: string;
+  email: string;
+};
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
new file mode 100644
index 0000000..f066f49
--- /dev/null
+++ b/packages/types/src/index.ts
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./activity";
+export * from "./ai";
+export * from "./analytics";
+export * from "./api_token";
+export * from "./auth";
+export * from "./calendar";
+export * from "./charts";
+export * from "./command-palette";
+export * from "./common";
+export * from "./cycle";
+export * from "./dashboard";
+export * from "./de-dupe";
+export * from "./description_version";
+export * from "./editor";
+export * from "./enums";
+export * from "./epics";
+export * from "./estimate";
+export * from "./favorite";
+export * from "./file";
+export * from "./home";
+export * from "./importer";
+export * from "./inbox";
+export * from "./instance";
+export * from "./integration";
+export * from "./issues";
+export * from "./issues/base"; // TODO: Remove this after development and the refactor/mobx-store-issue branch is stable
+export * from "./issues/issue-identifier";
+export * from "./issues/issue-property-values";
+export * from "./layout";
+export * from "./module";
+export * from "./navigation-preferences";
+export * from "./page";
+export * from "./payment";
+export * from "./pragmatic";
+export * from "./project";
+export * from "./publish";
+export * from "./reaction";
+export * from "./intake";
+export * from "./rich-filters";
+export * from "./search";
+export * from "./settings";
+export * from "./state";
+export * from "./stickies";
+export * from "./timezone";
+export * from "./users";
+export * from "./utils";
+export * from "./view-props";
+export * from "./views";
+export * from "./waitlist";
+export * from "./webhook";
+export * from "./workspace";
+export * from "./workspace-draft-issues/base";
+export * from "./workspace-notifications";
+export * from "./workspace-views";
+export * from "./base-layouts";
+export * from "./pagination";
diff --git a/packages/types/src/instance/ai.ts b/packages/types/src/instance/ai.ts
new file mode 100644
index 0000000..64c745b
--- /dev/null
+++ b/packages/types/src/instance/ai.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TInstanceAIConfigurationKeys = "LLM_API_KEY" | "LLM_MODEL";
diff --git a/packages/types/src/instance/auth-ee.ts b/packages/types/src/instance/auth-ee.ts
new file mode 100644
index 0000000..6ea191a
--- /dev/null
+++ b/packages/types/src/instance/auth-ee.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TExtendedLoginMediums = never;
+
+export type TExtendedInstanceAuthenticationModeKeys = never;
diff --git a/packages/types/src/instance/auth.ts b/packages/types/src/instance/auth.ts
new file mode 100644
index 0000000..f3566b2
--- /dev/null
+++ b/packages/types/src/instance/auth.ts
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TCoreInstanceAuthenticationModeKeys =
+  | "unique-codes"
+  | "passwords-login"
+  | "google"
+  | "github"
+  | "gitlab"
+  | "gitea";
+
+export type TInstanceAuthenticationModeKeys = TCoreInstanceAuthenticationModeKeys;
+
+export type TInstanceAuthenticationModes = {
+  key: TInstanceAuthenticationModeKeys;
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+  config: React.ReactNode;
+  enabledConfigKey: TInstanceAuthenticationMethodKeys;
+  unavailable?: boolean;
+};
+
+export type TInstanceAuthenticationMethodKeys =
+  | "ENABLE_SIGNUP"
+  | "ENABLE_MAGIC_LINK_LOGIN"
+  | "ENABLE_EMAIL_PASSWORD"
+  | "IS_GOOGLE_ENABLED"
+  | "IS_GITHUB_ENABLED"
+  | "IS_GITLAB_ENABLED"
+  | "IS_GITEA_ENABLED";
+
+export type TInstanceGoogleAuthenticationConfigurationKeys =
+  | "GOOGLE_CLIENT_ID"
+  | "GOOGLE_CLIENT_SECRET"
+  | "ENABLE_GOOGLE_SYNC";
+
+export type TInstanceGithubAuthenticationConfigurationKeys =
+  | "GITHUB_CLIENT_ID"
+  | "GITHUB_CLIENT_SECRET"
+  | "GITHUB_ORGANIZATION_ID"
+  | "ENABLE_GITHUB_SYNC";
+
+export type TInstanceGitlabAuthenticationConfigurationKeys =
+  | "GITLAB_HOST"
+  | "GITLAB_CLIENT_ID"
+  | "GITLAB_CLIENT_SECRET"
+  | "ENABLE_GITLAB_SYNC";
+
+export type TInstanceGiteaAuthenticationConfigurationKeys =
+  | "GITEA_HOST"
+  | "GITEA_CLIENT_ID"
+  | "GITEA_CLIENT_SECRET"
+  | "ENABLE_GITEA_SYNC";
+
+export type TInstanceAuthenticationConfigurationKeys =
+  | TInstanceGoogleAuthenticationConfigurationKeys
+  | TInstanceGithubAuthenticationConfigurationKeys
+  | TInstanceGitlabAuthenticationConfigurationKeys
+  | TInstanceGiteaAuthenticationConfigurationKeys;
+
+export type TInstanceAuthenticationKeys = TInstanceAuthenticationMethodKeys | TInstanceAuthenticationConfigurationKeys;
+
+export type TGetBaseAuthenticationModeProps = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+  resolvedTheme: string | undefined;
+};
+
+export type TOAuthOption = {
+  id: string;
+  text: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  enabled?: boolean;
+};
+
+export type TOAuthConfigs = {
+  isOAuthEnabled: boolean;
+  oAuthOptions: TOAuthOption[];
+};
+
+export type TCoreLoginMediums = "email" | "magic-code" | "github" | "gitlab" | "google" | "gitea";
diff --git a/packages/types/src/instance/base.ts b/packages/types/src/instance/base.ts
new file mode 100644
index 0000000..493067c
--- /dev/null
+++ b/packages/types/src/instance/base.ts
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IUserLite } from "../users";
+import type {
+  TInstanceAIConfigurationKeys,
+  TInstanceEmailConfigurationKeys,
+  TInstanceImageConfigurationKeys,
+  TInstanceAuthenticationKeys,
+  TInstanceWorkspaceConfigurationKeys,
+  TCoreLoginMediums,
+} from "./";
+import type { TExtendedLoginMediums } from "./auth-ee";
+
+export interface IInstanceInfo {
+  instance: IInstance;
+  config: IInstanceConfig;
+}
+
+export interface IInstance {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  instance_name: string | undefined;
+  whitelist_emails: string | undefined;
+  instance_id: string | undefined;
+  license_key: string | undefined;
+  current_version: string | undefined;
+  latest_version: string | undefined;
+  last_checked_at: string | undefined;
+  namespace: string | undefined;
+  is_telemetry_enabled: boolean;
+  is_support_required: boolean;
+  is_activated: boolean;
+  is_setup_done: boolean;
+  is_signup_screen_visited: boolean;
+  user_count: number | undefined;
+  is_verified: boolean;
+  created_by: string | undefined;
+  updated_by: string | undefined;
+  workspaces_exist: boolean;
+}
+
+export interface IInstanceConfig {
+  enable_signup: boolean;
+  is_workspace_creation_disabled: boolean;
+  is_google_enabled: boolean;
+  is_github_enabled: boolean;
+  is_gitlab_enabled: boolean;
+  is_gitea_enabled: boolean;
+  is_magic_login_enabled: boolean;
+  is_email_password_enabled: boolean;
+  github_app_name: string | undefined;
+  slack_client_id: string | undefined;
+  has_unsplash_configured: boolean;
+  has_llm_configured: boolean;
+  file_size_limit: number | undefined;
+  is_smtp_configured: boolean;
+  app_base_url: string | undefined;
+  space_base_url: string | undefined;
+  admin_base_url: string | undefined;
+  is_self_managed: boolean;
+  instance_changelog_url?: string;
+}
+
+export interface IInstanceAdmin {
+  created_at: string;
+  created_by: string;
+  id: string;
+  instance: string;
+  role: string;
+  updated_at: string;
+  updated_by: string;
+  user: string;
+  user_detail: IUserLite;
+}
+
+export type TInstanceConfigurationKeys =
+  | TInstanceAIConfigurationKeys
+  | TInstanceEmailConfigurationKeys
+  | TInstanceImageConfigurationKeys
+  | TInstanceAuthenticationKeys
+  | TInstanceWorkspaceConfigurationKeys;
+
+export interface IInstanceConfiguration {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  key: TInstanceConfigurationKeys;
+  value: string;
+  created_by: string | null;
+  updated_by: string | null;
+}
+
+export type IFormattedInstanceConfiguration = {
+  [key in TInstanceConfigurationKeys]: string;
+};
+
+export type TLoginMediums = TCoreLoginMediums | TExtendedLoginMediums;
diff --git a/packages/types/src/instance/email.ts b/packages/types/src/instance/email.ts
new file mode 100644
index 0000000..0dbd736
--- /dev/null
+++ b/packages/types/src/instance/email.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TInstanceEmailConfigurationKeys =
+  | "EMAIL_HOST"
+  | "EMAIL_PORT"
+  | "EMAIL_HOST_USER"
+  | "EMAIL_HOST_PASSWORD"
+  | "EMAIL_USE_TLS"
+  | "EMAIL_USE_SSL"
+  | "EMAIL_FROM"
+  | "ENABLE_SMTP";
diff --git a/packages/types/src/instance/image.ts b/packages/types/src/instance/image.ts
new file mode 100644
index 0000000..812f670
--- /dev/null
+++ b/packages/types/src/instance/image.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TInstanceImageConfigurationKeys = "UNSPLASH_ACCESS_KEY";
diff --git a/packages/types/src/instance/index.ts b/packages/types/src/instance/index.ts
new file mode 100644
index 0000000..a31ae1c
--- /dev/null
+++ b/packages/types/src/instance/index.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./ai";
+export * from "./auth";
+export * from "./auth-ee";
+export * from "./base";
+export * from "./email";
+export * from "./image";
+export * from "./workspace";
diff --git a/packages/types/src/instance/workspace.ts b/packages/types/src/instance/workspace.ts
new file mode 100644
index 0000000..3f4f485
--- /dev/null
+++ b/packages/types/src/instance/workspace.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TInstanceWorkspaceConfigurationKeys = "DISABLE_WORKSPACE_CREATION";
diff --git a/packages/types/src/intake/index.ts b/packages/types/src/intake/index.ts
new file mode 100644
index 0000000..52b9ae6
--- /dev/null
+++ b/packages/types/src/intake/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./state";
diff --git a/packages/types/src/intake/state.ts b/packages/types/src/intake/state.ts
new file mode 100644
index 0000000..e11472c
--- /dev/null
+++ b/packages/types/src/intake/state.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TIntakeStateGroups = "triage";
+
+export interface IIntakeState {
+  readonly id: string;
+  color: string;
+  default: boolean;
+  description: string;
+  group: TIntakeStateGroups;
+  name: string;
+  project_id: string;
+  sequence: number;
+  workspace_id: string;
+}
diff --git a/packages/types/src/integration.ts b/packages/types/src/integration.ts
new file mode 100644
index 0000000..9695a0c
--- /dev/null
+++ b/packages/types/src/integration.ts
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// All the app integrations that are available
+export interface IAppIntegration {
+  author: string;
+  avatar_url: string | null;
+  created_at: string;
+  created_by: string | null;
+  description: any;
+  id: string;
+  metadata: any;
+  network: number;
+  provider: string;
+  redirect_url: string;
+  title: string;
+  updated_at: string;
+  updated_by: string | null;
+  verified: boolean;
+  webhook_secret: string;
+  webhook_url: string;
+}
+
+export interface IWorkspaceIntegration {
+  actor: string;
+  api_token: string;
+  config: any;
+  created_at: string;
+  created_by: string;
+  id: string;
+  integration: string;
+  integration_detail: IAppIntegration;
+  metadata: any;
+  updated_at: string;
+  updated_by: string;
+  workspace: string;
+}
+
+// slack integration
+export interface ISlackIntegration {
+  id: string;
+  created_at: string;
+  updated_at: string;
+  access_token: string;
+  scopes: string;
+  bot_user_id: string;
+  webhook_url: string;
+  data: ISlackIntegrationData;
+  team_id: string;
+  team_name: string;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  workspace_integration: string;
+}
+
+export interface ISlackIntegrationData {
+  ok: boolean;
+  team: {
+    id: string;
+    name: string;
+  };
+  scope: string;
+  app_id: string;
+  enterprise: any;
+  token_type: string;
+  authed_user: string;
+  bot_user_id: string;
+  access_token: string;
+  incoming_webhook: {
+    url: string;
+    channel: string;
+    channel_id: string;
+    configuration_url: string;
+  };
+  is_enterprise_install: boolean;
+}
diff --git a/packages/types/src/issues.ts b/packages/types/src/issues.ts
new file mode 100644
index 0000000..50bc807
--- /dev/null
+++ b/packages/types/src/issues.ts
@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ICycle } from "./cycle";
+import type { TIssue } from "./issues/issue";
+import type { IModule } from "./module";
+import type { IProjectLite } from "./project";
+import type { TStateGroups } from "./state";
+import type { IUserLite } from "./users";
+import type {
+  IIssueDisplayProperties,
+  TIssueExtraOptions,
+  TIssueGroupByOptions,
+  TIssueGroupingFilters,
+  TIssueOrderByOptions,
+} from "./view-props";
+import type { IWorkspaceLite } from "./workspace";
+
+export interface IIssueCycle {
+  id: string;
+  cycle_detail: ICycle;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  issue: string;
+  cycle: string;
+}
+
+export interface IIssueModule {
+  created_at: Date;
+  created_by: string;
+  id: string;
+  issue: string;
+  module: string;
+  module_detail: IModule;
+  project: string;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+}
+
+export interface ILinkDetails {
+  created_at: Date;
+  created_by: string;
+  id: string;
+  metadata: any;
+  title: string;
+  url: string;
+}
+
+export interface ISubIssueResponse {
+  state_distribution: Record<TStateGroups, number>;
+  sub_issues: TIssue[];
+}
+
+export interface IIssueLabel {
+  id: string;
+  name: string;
+  color: string;
+  project_id: string;
+  workspace_id: string;
+  parent: string | null;
+  sort_order: number;
+}
+
+export interface IIssueLabelTree extends IIssueLabel {
+  children: IIssueLabel[] | undefined;
+}
+
+export interface IIssueActivity {
+  access?: "EXTERNAL" | "INTERNAL";
+  actor: string;
+  actor_detail: IUserLite;
+  attachments: any[];
+  comment?: string;
+  comment_html?: string;
+  comment_stripped?: string;
+  created_at: Date;
+  created_by: string;
+  field: string | null;
+  id: string;
+  issue: string | null;
+  issue_comment?: string | null;
+  issue_detail: {
+    description_html: string;
+    id: string;
+    name: string;
+    priority: string | null;
+    sequence_id: string;
+    type_id: string;
+  } | null;
+  new_identifier: string | null;
+  new_value: string | null;
+  old_identifier: string | null;
+  old_value: string | null;
+  project: string;
+  project_detail: IProjectLite;
+  updated_at: Date;
+  updated_by: string;
+  verb: string;
+  workspace: string;
+  workspace_detail?: IWorkspaceLite;
+}
+
+export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
+
+export interface ViewFlags {
+  enableQuickAdd: boolean;
+  enableIssueCreation: boolean;
+  enableInlineEditing: boolean;
+}
+
+export type GroupByColumnTypes =
+  | "project"
+  | "cycle"
+  | "module"
+  | "state"
+  | "state_detail.group"
+  | "priority"
+  | "labels"
+  | "assignees"
+  | "created_by"
+  | "team_project";
+
+export type TGetColumns = {
+  isWorkspaceLevel?: boolean;
+  projectId?: string;
+};
+
+export interface IGroupByColumn {
+  id: string;
+  name: string;
+  icon?: React.ReactElement | undefined;
+  payload: Partial<TIssue>;
+  isDropDisabled?: boolean;
+  dropErrorMessage?: string;
+}
+
+export interface IIssueMap {
+  [key: string]: TIssue;
+}
+
+export interface ILayoutDisplayFiltersOptions {
+  display_properties: (keyof IIssueDisplayProperties)[];
+  display_filters: {
+    group_by?: TIssueGroupByOptions[];
+    sub_group_by?: TIssueGroupByOptions[];
+    order_by?: TIssueOrderByOptions[];
+    type?: TIssueGroupingFilters[];
+  };
+  extra_options: {
+    access: boolean;
+    values: TIssueExtraOptions[];
+  };
+}
diff --git a/packages/types/src/issues/activity/base.ts b/packages/types/src/issues/activity/base.ts
new file mode 100644
index 0000000..ef1fa8b
--- /dev/null
+++ b/packages/types/src/issues/activity/base.ts
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./issue_activity";
+export * from "./issue_comment";
+export * from "./issue_comment_reaction";
+
+import type { TIssuePriorities } from "../../issues";
+
+// root types
+export type TIssueActivityWorkspaceDetail = {
+  name: string;
+  slug: string;
+  id: string;
+};
+
+export type TIssueActivityProjectDetail = {
+  id: string;
+  identifier: string;
+  name: string;
+  cover_image: string;
+  description: string | null;
+  emoji: string | null;
+  icon_prop: {
+    name: string;
+    color: string;
+  } | null;
+};
+
+export type TIssueActivityIssueDetail = {
+  id: string;
+  sequence_id: number;
+  sort_order: boolean;
+  name: string;
+  description_html: string;
+  priority: TIssuePriorities;
+  start_date: string;
+  target_date: string;
+  is_draft: boolean;
+};
+
+export type TIssueActivityUserDetail = {
+  id: string;
+  first_name: string;
+  last_name: string;
+  avatar_url: string;
+  is_bot: boolean;
+  display_name: string;
+};
+
+export type TIssueActivityComment =
+  | {
+      id: string;
+      activity_type: "COMMENT";
+      created_at?: string;
+    }
+  | {
+      id: string;
+      activity_type: "ACTIVITY";
+      created_at?: string;
+    }
+  | {
+      id: string;
+      activity_type: "STATE";
+      created_at?: string;
+    }
+  | {
+      id: string;
+      activity_type: "ASSIGNEE";
+      created_at?: string;
+    }
+  | {
+      id: string;
+      activity_type: "DEFAULT";
+      created_at?: string;
+    }
+  | {
+      id: string;
+      activity_type: "WORKLOG";
+      created_at?: string;
+    }
+  | {
+      id: string;
+      activity_type: "ISSUE_ADDITIONAL_PROPERTIES_ACTIVITY";
+      created_at?: string;
+    };
diff --git a/packages/types/src/issues/activity/issue_activity.ts b/packages/types/src/issues/activity/issue_activity.ts
new file mode 100644
index 0000000..4cc158c
--- /dev/null
+++ b/packages/types/src/issues/activity/issue_activity.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import type { EInboxIssueSource } from "../../inbox";
+import type {
+  TIssueActivityWorkspaceDetail,
+  TIssueActivityProjectDetail,
+  TIssueActivityIssueDetail,
+  TIssueActivityUserDetail,
+} from "./base";
+
+export type TIssueActivity = {
+  id: string;
+  workspace: string;
+  workspace_detail: TIssueActivityWorkspaceDetail;
+  project: string;
+  project_detail: TIssueActivityProjectDetail;
+  issue: string;
+  issue_detail: TIssueActivityIssueDetail;
+  actor: string;
+  actor_detail: TIssueActivityUserDetail;
+  created_at: string;
+  updated_at: string;
+  created_by: string | undefined;
+  updated_by: string | undefined;
+  attachments: any[];
+
+  verb: string;
+  field: string | undefined;
+  old_value: string | undefined;
+  new_value: string | undefined;
+  comment: string | undefined;
+  old_identifier: string | undefined;
+  new_identifier: string | undefined;
+  epoch: number;
+  issue_comment: string | null;
+  source_data: {
+    source: EInboxIssueSource;
+    source_email?: string;
+    extra: {
+      username?: string;
+    };
+  };
+};
+
+export type TIssueActivityMap = {
+  [issue_id: string]: TIssueActivity;
+};
+
+export type TIssueActivityIdMap = {
+  [issue_id: string]: string[];
+};
diff --git a/packages/types/src/issues/activity/issue_comment.ts b/packages/types/src/issues/activity/issue_comment.ts
new file mode 100644
index 0000000..9de4e82
--- /dev/null
+++ b/packages/types/src/issues/activity/issue_comment.ts
@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { JSONContent } from "../../editor";
+import type { EIssueCommentAccessSpecifier } from "../../enums";
+import type { TFileSignedURLResponse } from "../../file";
+import type { IUserLite } from "../../users";
+import type { IWorkspaceLite } from "../../workspace";
+import type {
+  TIssueActivityWorkspaceDetail,
+  TIssueActivityProjectDetail,
+  TIssueActivityIssueDetail,
+  TIssueActivityUserDetail,
+} from "./base";
+
+export type TCommentReaction = {
+  id: string;
+  reaction: string;
+  actor: string;
+  actor_detail: IUserLite;
+};
+export type TIssueComment = {
+  id: string;
+  workspace: string;
+  workspace_detail: TIssueActivityWorkspaceDetail;
+  project: string;
+  project_detail: TIssueActivityProjectDetail;
+  issue: string;
+  issue_detail: TIssueActivityIssueDetail;
+  actor: string;
+  actor_detail: TIssueActivityUserDetail;
+  created_at: string;
+  edited_at?: string | undefined;
+  updated_at: string;
+  created_by: string | undefined;
+  updated_by: string | undefined;
+  attachments: any[];
+  comment_reactions: any[];
+  comment_stripped: string;
+  comment_html: string;
+  comment_json: JSONContent;
+  external_id: string | undefined;
+  external_source: string | undefined;
+  access: EIssueCommentAccessSpecifier;
+};
+
+export type TCommentsOperations = {
+  copyCommentLink: (commentId: string) => void;
+  createComment: (data: Partial<TIssueComment>) => Promise<Partial<TIssueComment> | undefined>;
+  updateComment: (commentId: string, data: Partial<TIssueComment>) => Promise<void>;
+  removeComment: (commentId: string) => Promise<void>;
+  uploadCommentAsset: (blockId: string, file: File, commentId?: string) => Promise<TFileSignedURLResponse>;
+  duplicateCommentAsset: (assetId: string, commentId?: string) => Promise<{ asset_id: string }>;
+  addCommentReaction: (commentId: string, reactionEmoji: string) => Promise<void>;
+  deleteCommentReaction: (commentId: string, reactionEmoji: string) => Promise<void>;
+  react: (commentId: string, reactionEmoji: string, userReactions: string[]) => Promise<void>;
+  reactionIds: (commentId: string) =>
+    | {
+        [reaction: string]: string[];
+      }
+    | undefined;
+  userReactions: (commentId: string) => string[] | undefined;
+  getReactionUsers: (reaction: string, reactionIds: Record<string, string[]>) => string;
+};
+
+export type TIssueCommentMap = {
+  [issue_id: string]: TIssueComment;
+};
+
+export type TIssueCommentIdMap = {
+  [issue_id: string]: string[];
+};
+
+export interface ActorDetail {
+  avatar_url?: string;
+  display_name?: string;
+  first_name?: string;
+  is_bot?: boolean;
+  id?: string;
+  last_name?: string;
+}
+
+export interface IssueDetail {
+  id: string;
+  name: string;
+  description: Description;
+  description_html: string;
+  priority: string;
+  start_date: null;
+  target_date: null;
+  sequence_id: number;
+  sort_order: number;
+}
+
+export interface Description {
+  type: string;
+  content: DescriptionContent[];
+}
+
+export interface DescriptionContent {
+  type: string;
+  attrs?: Attrs;
+  content: ContentContent[];
+}
+
+export interface Attrs {
+  level: number;
+}
+
+export interface ContentContent {
+  text: string;
+  type: string;
+}
+
+export interface ProjectDetail {
+  id: string;
+  identifier: string;
+  name: string;
+  cover_image: string;
+  icon_prop: null;
+  emoji: string;
+  description: string;
+}
+
+export type TIssuePublicComment = {
+  actor_detail: ActorDetail;
+  access: string;
+  actor: string;
+  attachments: any[];
+  comment_html: string;
+  comment_reactions: {
+    actor_detail: ActorDetail;
+    comment: string;
+    id: string;
+    reaction: string;
+  }[];
+  comment_stripped: string;
+  created_at: Date;
+  created_by: string;
+  id: string;
+  is_member: boolean;
+  issue: string;
+  issue_detail: IssueDetail;
+  project: string;
+  project_detail: ProjectDetail;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+  workspace_detail: IWorkspaceLite;
+};
diff --git a/packages/types/src/issues/activity/issue_comment_reaction.ts b/packages/types/src/issues/activity/issue_comment_reaction.ts
new file mode 100644
index 0000000..84637aa
--- /dev/null
+++ b/packages/types/src/issues/activity/issue_comment_reaction.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TIssueCommentReaction = {
+  id: string;
+  comment: string;
+  actor: string;
+  reaction: string;
+  workspace: string;
+  project: string;
+  created_at: Date;
+  updated_at: Date;
+  created_by: string;
+  updated_by: string;
+  display_name: string;
+};
+
+export type TIssueCommentReactionMap = {
+  [reaction_id: string]: TIssueCommentReaction;
+};
+
+export type TIssueCommentReactionIdMap = {
+  [comment_id: string]: { [reaction: string]: string[] };
+};
diff --git a/packages/types/src/issues/base.ts b/packages/types/src/issues/base.ts
new file mode 100644
index 0000000..af802bb
--- /dev/null
+++ b/packages/types/src/issues/base.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// issues
+export * from "./issue";
+export * from "./issue_reaction";
+export * from "./issue_link";
+export * from "./issue_attachment";
+export * from "./issue_relation";
+export * from "./issue_sub_issues";
+export * from "./activity/base";
+
+export type TLoader = "init-loader" | "mutation" | "pagination" | "loaded" | undefined;
+
+export type TGroupedIssues = {
+  [group_id: string]: string[];
+};
+
+export type TSubGroupedIssues = {
+  [sub_grouped_id: string]: TGroupedIssues;
+};
+
+export type TIssues = TGroupedIssues | TSubGroupedIssues;
+
+export type TPaginationData = {
+  nextCursor: string;
+  prevCursor: string;
+  nextPageResults: boolean;
+};
+
+export type TIssuePaginationData = {
+  [group_id: string]: TPaginationData;
+};
+
+export type TGroupedIssueCount = {
+  [group_id: string]: number;
+};
+
+export type TUnGroupedIssues = string[];
diff --git a/packages/types/src/issues/issue-identifier.ts b/packages/types/src/issues/issue-identifier.ts
new file mode 100644
index 0000000..e6797ad
--- /dev/null
+++ b/packages/types/src/issues/issue-identifier.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IIssueDisplayProperties } from "../view-props";
+
+export type TIssueIdentifierSize = "xs" | "sm" | "md" | "lg";
+
+export type TIdentifierTextVariant = "default" | "secondary" | "tertiary" | "primary" | "primary-subtle" | "success";
+
+export type TIssueIdentifierBaseProps = {
+  projectId: string;
+  size?: TIssueIdentifierSize;
+  variant?: TIdentifierTextVariant;
+  displayProperties?: IIssueDisplayProperties | undefined;
+  enableClickToCopyIdentifier?: boolean;
+};
+
+export type TIssueIdentifierFromStore = TIssueIdentifierBaseProps & {
+  issueId: string;
+};
+
+export type TIssueIdentifierWithDetails = TIssueIdentifierBaseProps & {
+  issueTypeId?: string | null;
+  projectIdentifier: string;
+  issueSequenceId: string | number;
+};
+
+export type TIssueIdentifierProps = TIssueIdentifierFromStore | TIssueIdentifierWithDetails;
+
+export type TIssueTypeIdentifier = {
+  issueTypeId: string;
+  size?: TIssueIdentifierSize;
+};
+
+export type TIdentifierTextProps = {
+  identifier: string;
+  enableClickToCopyIdentifier?: boolean;
+  size?: TIssueIdentifierSize;
+  variant?: TIdentifierTextVariant;
+};
diff --git a/packages/types/src/issues/issue-property-values.ts b/packages/types/src/issues/issue-property-values.ts
new file mode 100644
index 0000000..f0db38c
--- /dev/null
+++ b/packages/types/src/issues/issue-property-values.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TIssuePropertyValues = Record<string, unknown>;
+export type TIssuePropertyValueErrors = Record<string, unknown>;
diff --git a/packages/types/src/issues/issue.ts b/packages/types/src/issues/issue.ts
new file mode 100644
index 0000000..8054b4c
--- /dev/null
+++ b/packages/types/src/issues/issue.ts
@@ -0,0 +1,225 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssuePriorities } from "../issues";
+import type { TStateGroups } from "../state";
+import type { TIssuePublicComment } from "./activity/issue_comment";
+import type { TIssueAttachment } from "./issue_attachment";
+import type { TIssueLink } from "./issue_link";
+import type { TIssueReaction, IIssuePublicReaction, IPublicVote } from "./issue_reaction";
+import type { TIssueRelationTypes } from "./issue_relation";
+
+export enum EIssueLayoutTypes {
+  LIST = "list",
+  KANBAN = "kanban",
+  CALENDAR = "calendar",
+  GANTT = "gantt_chart",
+  SPREADSHEET = "spreadsheet",
+}
+
+export enum EIssueServiceType {
+  ISSUES = "issues",
+  EPICS = "epics",
+  WORK_ITEMS = "work-items",
+}
+
+export enum EIssuesStoreType {
+  GLOBAL = "GLOBAL",
+  PROFILE = "PROFILE",
+  TEAM = "TEAM",
+  PROJECT = "PROJECT",
+  CYCLE = "CYCLE",
+  MODULE = "MODULE",
+  TEAM_VIEW = "TEAM_VIEW",
+  PROJECT_VIEW = "PROJECT_VIEW",
+  ARCHIVED = "ARCHIVED",
+  DEFAULT = "DEFAULT",
+  WORKSPACE_DRAFT = "WORKSPACE_DRAFT",
+  EPIC = "EPIC",
+  TEAM_PROJECT_WORK_ITEMS = "TEAM_PROJECT_WORK_ITEMS",
+}
+
+export type TBaseIssue = {
+  id: string;
+  sequence_id: number;
+  name: string;
+  sort_order: number;
+
+  state_id: string | null;
+  priority: TIssuePriorities | null;
+  label_ids: string[];
+  assignee_ids: string[];
+  estimate_point: string | null;
+
+  sub_issues_count: number;
+  attachment_count: number;
+  link_count: number;
+
+  project_id: string | null;
+  parent_id: string | null;
+  cycle_id: string | null;
+  module_ids: string[] | null;
+  type_id: string | null;
+
+  created_at: string;
+  updated_at: string;
+  start_date: string | null;
+  target_date: string | null;
+  completed_at: string | null;
+  archived_at: string | null;
+
+  created_by: string;
+  updated_by: string;
+
+  is_draft: boolean;
+  is_epic?: boolean;
+  is_intake?: boolean;
+};
+
+type IssueRelation = {
+  id: string;
+  name: string;
+  project_id: string;
+  relation_type: TIssueRelationTypes;
+  sequence_id: number;
+};
+
+export type TIssue = TBaseIssue & {
+  description_html?: string;
+  is_subscribed?: boolean;
+  parent?: Partial<TBaseIssue>;
+  issue_reactions?: TIssueReaction[];
+  issue_attachments?: TIssueAttachment[];
+  issue_link?: TIssueLink[];
+  issue_relation?: IssueRelation[];
+  issue_related?: IssueRelation[];
+  // tempId is used for optimistic updates. It is not a part of the API response.
+  tempId?: string;
+  // sourceIssueId is used to store the original issue id when creating a copy of an issue. Used in cloning property values. It is not a part of the API response.
+  sourceIssueId?: string;
+  state__group?: TStateGroups | null;
+};
+
+export type TIssueMap = {
+  [issue_id: string]: TIssue;
+};
+
+export type TIssueResponseResults =
+  | TBaseIssue[]
+  | {
+      [key: string]: {
+        results:
+          | TBaseIssue[]
+          | {
+              [key: string]: {
+                results: TBaseIssue[];
+                total_results: number;
+              };
+            };
+        total_results: number;
+      };
+    };
+
+export type TIssuesResponse = {
+  grouped_by: string;
+  next_cursor: string;
+  prev_cursor: string;
+  next_page_results: boolean;
+  prev_page_results: boolean;
+  total_count: number;
+  count: number;
+  total_pages: number;
+  extra_stats: null;
+  results: TIssueResponseResults;
+  total_results: number;
+};
+
+export type TBulkIssueProperties = Pick<
+  TIssue,
+  | "state_id"
+  | "priority"
+  | "label_ids"
+  | "assignee_ids"
+  | "start_date"
+  | "target_date"
+  | "module_ids"
+  | "cycle_id"
+  | "estimate_point"
+>;
+
+export type TBulkOperationsPayload = {
+  issue_ids: string[];
+  properties: Partial<TBulkIssueProperties>;
+};
+
+export type TWorkItemWidgets = "sub-work-items" | "relations" | "links" | "attachments";
+
+export type TIssueServiceType = EIssueServiceType.ISSUES | EIssueServiceType.EPICS | EIssueServiceType.WORK_ITEMS;
+
+export interface IPublicIssue extends Pick<
+  TIssue,
+  | "description_html"
+  | "created_at"
+  | "updated_at"
+  | "created_by"
+  | "id"
+  | "name"
+  | "priority"
+  | "state_id"
+  | "project_id"
+  | "sequence_id"
+  | "sort_order"
+  | "start_date"
+  | "target_date"
+  | "cycle_id"
+  | "module_ids"
+  | "label_ids"
+  | "assignee_ids"
+  | "attachment_count"
+  | "sub_issues_count"
+  | "link_count"
+  | "estimate_point"
+> {
+  comments: TIssuePublicComment[];
+  reaction_items: IIssuePublicReaction[];
+  vote_items: IPublicVote[];
+}
+
+type TPublicIssueResponseResults =
+  | IPublicIssue[]
+  | {
+      [key: string]: {
+        results:
+          | IPublicIssue[]
+          | {
+              [key: string]: {
+                results: IPublicIssue[];
+                total_results: number;
+              };
+            };
+        total_results: number;
+      };
+    };
+
+export type TPublicIssuesResponse = {
+  grouped_by: string;
+  next_cursor: string;
+  prev_cursor: string;
+  next_page_results: boolean;
+  prev_page_results: boolean;
+  total_count: number;
+  count: number;
+  total_pages: number;
+  extra_stats: null;
+  results: TPublicIssueResponseResults;
+};
+
+export interface IWorkItemPeekOverview {
+  embedIssue?: boolean;
+  embedRemoveCurrentNotification?: () => void;
+  is_draft?: boolean;
+  storeType?: EIssuesStoreType;
+}
diff --git a/packages/types/src/issues/issue_attachment.ts b/packages/types/src/issues/issue_attachment.ts
new file mode 100644
index 0000000..f3c4ce0
--- /dev/null
+++ b/packages/types/src/issues/issue_attachment.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFileSignedURLResponse } from "../file";
+
+export type TIssueAttachment = {
+  id: string;
+  attributes: {
+    name: string;
+    size: number;
+  };
+  asset_url: string;
+  issue_id: string;
+  // required
+  updated_at: string;
+  updated_by: string;
+  created_by: string;
+};
+
+export type TIssueAttachmentUploadResponse = TFileSignedURLResponse & {
+  attachment: TIssueAttachment;
+};
+
+export type TIssueAttachmentMap = {
+  [issue_id: string]: TIssueAttachment;
+};
+
+export type TIssueAttachmentIdMap = {
+  [issue_id: string]: string[];
+};
diff --git a/packages/types/src/issues/issue_link.ts b/packages/types/src/issues/issue_link.ts
new file mode 100644
index 0000000..77b87d9
--- /dev/null
+++ b/packages/types/src/issues/issue_link.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TIssueLinkEditableFields = {
+  title: string;
+  url: string;
+};
+
+export type TIssueLink = TIssueLinkEditableFields & {
+  created_by_id: string;
+  id: string;
+  metadata: any;
+  issue_id: string;
+
+  //need
+  created_at: Date;
+};
+
+export type TIssueLinkMap = {
+  [issue_id: string]: TIssueLink;
+};
+
+export type TIssueLinkIdMap = {
+  [issue_id: string]: string[];
+};
diff --git a/packages/types/src/issues/issue_reaction.ts b/packages/types/src/issues/issue_reaction.ts
new file mode 100644
index 0000000..9cf72e9
--- /dev/null
+++ b/packages/types/src/issues/issue_reaction.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IUserLite } from "../users";
+
+export type TIssueReaction = {
+  actor: string;
+  id: string;
+  issue: string;
+  reaction: string;
+  display_name: string;
+};
+
+export interface IIssuePublicReaction {
+  actor_details: IUserLite;
+  reaction: string;
+}
+
+export type TIssueReactionMap = {
+  [reaction_id: string]: TIssueReaction;
+};
+
+export type TIssueReactionIdMap = {
+  [issue_id: string]: { [reaction: string]: string[] };
+};
+
+export interface IPublicVote {
+  vote: -1 | 1;
+  actor_details: IUserLite;
+}
diff --git a/packages/types/src/issues/issue_relation.ts b/packages/types/src/issues/issue_relation.ts
new file mode 100644
index 0000000..58a226d
--- /dev/null
+++ b/packages/types/src/issues/issue_relation.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssue } from "./issue";
+
+export type TIssueRelation = Record<TIssueRelationTypes, TIssue[]>;
+
+export type TIssueRelationMap = {
+  [issue_id: string]: Record<TIssueRelationTypes, string[]>;
+};
+
+export type TIssueRelationIdMap = Record<TIssueRelationTypes, string[]>;
+
+export type TIssueRelationTypes = "blocking" | "blocked_by" | "duplicate" | "relates_to";
diff --git a/packages/types/src/issues/issue_sub_issues.ts b/packages/types/src/issues/issue_sub_issues.ts
new file mode 100644
index 0000000..5ef11e2
--- /dev/null
+++ b/packages/types/src/issues/issue_sub_issues.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssue } from "./issue";
+
+export type TSubIssuesStateDistribution = {
+  backlog: string[];
+  unstarted: string[];
+  started: string[];
+  completed: string[];
+  cancelled: string[];
+};
+
+export type TIssueSubIssues = {
+  state_distribution: TSubIssuesStateDistribution;
+  sub_issues: TSubIssueResponse;
+};
+
+export type TSubIssueResponse = TIssue[] | { [key: string]: TIssue[] };
+
+export type TIssueSubIssuesStateDistributionMap = {
+  [issue_id: string]: TSubIssuesStateDistribution;
+};
+
+export type TIssueSubIssuesIdMap = {
+  [issue_id: string]: string[];
+};
+
+export type TSubIssueOperations = {
+  copyLink: (path: string) => void;
+  fetchSubIssues: (workspaceSlug: string, projectId: string, parentIssueId: string) => Promise<void>;
+  addSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueIds: string[]) => Promise<void>;
+  updateSubIssue: (
+    workspaceSlug: string,
+    projectId: string,
+    parentIssueId: string,
+    issueId: string,
+    issueData: Partial<TIssue>,
+    oldIssue?: Partial<TIssue>,
+    fromModal?: boolean
+  ) => Promise<void>;
+  removeSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
+  deleteSubIssue: (workspaceSlug: string, projectId: string, parentIssueId: string, issueId: string) => Promise<void>;
+};
diff --git a/packages/types/src/issues/issue_subscription.ts b/packages/types/src/issues/issue_subscription.ts
new file mode 100644
index 0000000..f7fc58e
--- /dev/null
+++ b/packages/types/src/issues/issue_subscription.ts
@@ -0,0 +1,5 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
diff --git a/packages/types/src/layout/gantt.ts b/packages/types/src/layout/gantt.ts
new file mode 100644
index 0000000..20a5196
--- /dev/null
+++ b/packages/types/src/layout/gantt.ts
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EGanttBlockType {
+  EPIC = "epic",
+  PROJECT = "project",
+  ISSUE = "issue",
+}
+export interface IGanttBlock {
+  data: any;
+  id: string;
+  name: string;
+  position?: {
+    marginLeft: number;
+    width: number;
+  };
+  sort_order: number | undefined;
+  start_date: string | undefined;
+  target_date: string | undefined;
+  meta?: Record<string, any>;
+}
+
+export interface IBlockUpdateData {
+  sort_order?: {
+    destinationIndex: number;
+    newSortOrder: number;
+    sourceIndex: number;
+  };
+  start_date?: string;
+  target_date?: string;
+  meta?: Record<string, any>;
+}
+
+export interface IBlockUpdateDependencyData {
+  id: string;
+  start_date?: string;
+  target_date?: string;
+  meta?: Record<string, any>;
+}
+
+export type TGanttViews = "week" | "month" | "quarter";
+
+// chart render types
+export interface WeekMonthDataType {
+  key: number;
+  shortTitle: string;
+  title: string;
+  abbreviation: string;
+}
+
+export interface ChartDataType {
+  key: string;
+  i18n_title: string;
+  data: ChartDataTypeData;
+}
+
+export interface ChartDataTypeData {
+  startDate: Date;
+  currentDate: Date;
+  endDate: Date;
+  approxFilterRange: number;
+  dayWidth: number;
+}
diff --git a/packages/types/src/layout/index.ts b/packages/types/src/layout/index.ts
new file mode 100644
index 0000000..b2679b1
--- /dev/null
+++ b/packages/types/src/layout/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./gantt";
diff --git a/packages/types/src/module/index.ts b/packages/types/src/module/index.ts
new file mode 100644
index 0000000..f8e54bb
--- /dev/null
+++ b/packages/types/src/module/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./module_filters";
+export * from "./modules";
diff --git a/packages/types/src/module/module_filters.ts b/packages/types/src/module/module_filters.ts
new file mode 100644
index 0000000..eb32626
--- /dev/null
+++ b/packages/types/src/module/module_filters.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TModuleOrderByOptions =
+  | "name"
+  | "-name"
+  | "progress"
+  | "-progress"
+  | "issues_length"
+  | "-issues_length"
+  | "target_date"
+  | "-target_date"
+  | "created_at"
+  | "-created_at"
+  | "sort_order";
+
+export type TModuleLayoutOptions = "list" | "board" | "gantt";
+
+export type TModuleDisplayFilters = {
+  favorites?: boolean;
+  layout?: TModuleLayoutOptions;
+  order_by?: TModuleOrderByOptions;
+};
+
+export type TModuleFilters = {
+  lead?: string[] | null;
+  members?: string[] | null;
+  start_date?: string[] | null;
+  status?: string[] | null;
+  target_date?: string[] | null;
+};
+
+export type TModuleFiltersByState = {
+  default: TModuleFilters;
+  archived: TModuleFilters;
+};
+
+export type TModuleStoredFilters = {
+  display_filters?: TModuleDisplayFilters;
+  filters?: TModuleFilters;
+};
diff --git a/packages/types/src/module/modules.ts b/packages/types/src/module/modules.ts
new file mode 100644
index 0000000..3aa5712
--- /dev/null
+++ b/packages/types/src/module/modules.ts
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ILinkDetails } from "../issues";
+import type { TIssue } from "../issues/issue";
+import type { IIssueFilterOptions } from "../view-props";
+
+export type TModuleStatus = "backlog" | "planned" | "in-progress" | "paused" | "completed" | "cancelled";
+
+export type TModuleCompletionChartDistribution = {
+  [key: string]: number | null;
+};
+
+export type TModuleDistributionBase = {
+  total_issues: number;
+  pending_issues: number;
+  completed_issues: number;
+};
+
+export type TModuleEstimateDistributionBase = {
+  total_estimates: number;
+  pending_estimates: number;
+  completed_estimates: number;
+};
+
+export type TModuleAssigneesDistribution = {
+  assignee_id: string | null;
+  avatar_url: string | null;
+  first_name: string | null;
+  last_name: string | null;
+  display_name: string | null;
+};
+
+export type TModuleLabelsDistribution = {
+  color: string | null;
+  label_id: string | null;
+  label_name: string | null;
+};
+
+export type TModuleDistribution = {
+  assignees: (TModuleAssigneesDistribution & TModuleDistributionBase)[];
+  completion_chart: TModuleCompletionChartDistribution;
+  labels: (TModuleLabelsDistribution & TModuleDistributionBase)[];
+};
+
+export type TModuleEstimateDistribution = {
+  assignees: (TModuleAssigneesDistribution & TModuleEstimateDistributionBase)[];
+  completion_chart: TModuleCompletionChartDistribution;
+  labels: (TModuleLabelsDistribution & TModuleEstimateDistributionBase)[];
+};
+
+export interface IModule {
+  total_issues: number;
+  completed_issues: number;
+  backlog_issues: number;
+  started_issues: number;
+  unstarted_issues: number;
+  cancelled_issues: number;
+  total_estimate_points?: number;
+  completed_estimate_points?: number;
+  backlog_estimate_points: number;
+  started_estimate_points: number;
+  unstarted_estimate_points: number;
+  cancelled_estimate_points: number;
+  distribution?: TModuleDistribution;
+  estimate_distribution?: TModuleEstimateDistribution;
+
+  id: string;
+  name: string;
+  description: string;
+  description_text: any;
+  description_html: any;
+  workspace_id: string;
+  project_id: string;
+  lead_id: string | null;
+  member_ids: string[];
+  link_module?: ILinkDetails[];
+  sub_issues?: number;
+  is_favorite: boolean;
+  sort_order: number;
+  view_props: {
+    filters: IIssueFilterOptions;
+  };
+  status?: TModuleStatus;
+  archived_at: string | null;
+  start_date: string | null;
+  target_date: string | null;
+  created_at: string;
+  updated_at: string;
+  created_by?: string;
+  updated_by?: string;
+}
+
+export interface ModuleIssueResponse {
+  created_at: Date;
+  created_by: string;
+  id: string;
+  issue: string;
+  issue_detail: TIssue;
+  module: string;
+  module_detail: IModule;
+  project: string;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+  sub_issues_count: number;
+}
+
+export type ModuleLink = {
+  title: string;
+  url: string;
+};
+
+export type SelectModuleType = (IModule & { actionType: "edit" | "delete" | "create-issue" }) | undefined;
+
+export type TModulePlotType = "burndown" | "points";
+
+export type TPublicModule = {
+  id: string;
+  name: string;
+};
diff --git a/packages/types/src/navigation-preferences.ts b/packages/types/src/navigation-preferences.ts
new file mode 100644
index 0000000..93b6ca6
--- /dev/null
+++ b/packages/types/src/navigation-preferences.ts
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TPersonalNavigationItemKey = "stickies" | "your_work" | "drafts";
+
+export interface TPersonalNavigationItem {
+  key: TPersonalNavigationItemKey;
+  labelTranslationKey: string;
+  enabled: boolean;
+}
+
+export interface TPersonalNavigationItemState {
+  enabled: boolean;
+  sort_order: number;
+}
+
+export type TProjectNavigationMode = "ACCORDION" | "TABBED";
+
+export interface TProjectDisplaySettings {
+  navigationMode: TProjectNavigationMode;
+  showLimitedProjects: boolean;
+  limitedProjectsCount: number;
+}
+
+export interface TPersonalNavigationPreferences {
+  items: Record<TPersonalNavigationItemKey, TPersonalNavigationItemState>;
+}
+
+export interface TProjectNavigationPreferences {
+  navigationMode: TProjectNavigationMode;
+  showLimitedProjects: boolean;
+  limitedProjectsCount: number;
+}
+
+export interface TWorkspaceNavigationItemState {
+  is_pinned: boolean;
+  sort_order: number;
+}
+
+export interface TWorkspaceNavigationPreferences {
+  items: Record<string, TWorkspaceNavigationItemState>;
+}
+
+export interface TNavigationPreferences {
+  personal: TPersonalNavigationPreferences;
+  workspace: TWorkspaceNavigationPreferences;
+  projects: TProjectNavigationPreferences;
+}
+
+export const DEFAULT_PERSONAL_PREFERENCES: TPersonalNavigationPreferences = {
+  items: {
+    stickies: { enabled: false, sort_order: 0 },
+    your_work: { enabled: true, sort_order: 1 },
+    drafts: { enabled: true, sort_order: 2 },
+  },
+};
+
+export const DEFAULT_PROJECT_PREFERENCES: TProjectNavigationPreferences = {
+  navigationMode: "ACCORDION",
+  showLimitedProjects: false,
+  limitedProjectsCount: 10,
+};
+
+export const DEFAULT_WORKSPACE_PREFERENCES: TWorkspaceNavigationPreferences = {
+  items: {},
+};
+
+export type TAppRailDisplayMode = "icon_only" | "icon_with_label";
+
+export interface TAppRailPreferences {
+  displayMode: TAppRailDisplayMode;
+}
+
+export const DEFAULT_APP_RAIL_PREFERENCES: TAppRailPreferences = {
+  displayMode: "icon_with_label",
+};
diff --git a/packages/types/src/page/core.ts b/packages/types/src/page/core.ts
new file mode 100644
index 0000000..4677b29
--- /dev/null
+++ b/packages/types/src/page/core.ts
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TLogoProps } from "../common";
+import type { EPageAccess } from "../enums";
+import type { TPageExtended } from "./extended";
+
+export type TPage = {
+  access: EPageAccess | undefined;
+  archived_at: string | null | undefined;
+  color: string | undefined;
+  created_at: Date | undefined;
+  created_by: string | undefined;
+  description_json: object | undefined;
+  description_html: string | undefined;
+  id: string | undefined;
+  is_favorite: boolean;
+  is_locked: boolean;
+  label_ids: string[] | undefined;
+  name: string | undefined;
+  owned_by: string | undefined;
+  project_ids?: string[] | undefined;
+  updated_at: Date | undefined;
+  updated_by: string | undefined;
+  workspace: string | undefined;
+  logo_props: TLogoProps | undefined;
+  deleted_at: Date | undefined;
+} & TPageExtended;
+
+// page filters
+export type TPageNavigationTabs = "public" | "private" | "archived";
+
+export type TPageFiltersSortKey = "name" | "created_at" | "updated_at" | "opened_at";
+
+export type TPageFiltersSortBy = "asc" | "desc";
+
+export type TPageFilterProps = {
+  created_at?: string[] | null;
+  created_by?: string[] | null;
+  favorites?: boolean;
+  labels?: string[] | null;
+};
+
+export type TPageFilters = {
+  searchQuery: string;
+  sortKey: TPageFiltersSortKey;
+  sortBy: TPageFiltersSortBy;
+  filters?: TPageFilterProps;
+};
+
+export type TPageEmbedType = "mention" | "issue";
+
+export type TPageVersion = {
+  created_at: string;
+  created_by: string;
+  deleted_at: string | null;
+  description_binary?: string | null;
+  description_html?: string | null;
+  description_json?: object;
+  id: string;
+  last_saved_at: string;
+  owned_by: string;
+  page: string;
+  updated_at: string;
+  updated_by: string;
+  workspace: string;
+};
+
+export type TDocumentPayload = {
+  description_binary: string;
+  description_html: string;
+  description_json: object;
+};
+
+export type TWebhookConnectionQueryParams = {
+  documentType: "project_page" | "team_page" | "workspace_page";
+  projectId?: string;
+  teamId?: string;
+  workspaceSlug: string;
+};
diff --git a/packages/types/src/page/extended.ts b/packages/types/src/page/extended.ts
new file mode 100644
index 0000000..76f32ce
--- /dev/null
+++ b/packages/types/src/page/extended.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TPageExtended = object;
diff --git a/packages/types/src/page/index.ts b/packages/types/src/page/index.ts
new file mode 100644
index 0000000..02f502f
--- /dev/null
+++ b/packages/types/src/page/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./core";
+export * from "./extended";
diff --git a/packages/types/src/pagination.ts b/packages/types/src/pagination.ts
new file mode 100644
index 0000000..9d5be14
--- /dev/null
+++ b/packages/types/src/pagination.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// Generic paginated response type for API responses
+export type TPaginatedResponse<T> = {
+  results: T;
+  grouped_by?: string | null;
+  sub_grouped_by?: string | null;
+  total_count?: number;
+  next_cursor?: string;
+  prev_cursor?: string;
+  next_page_results?: boolean;
+  prev_page_results?: boolean;
+  count?: number;
+  total_pages?: number;
+  total_results?: number;
+  extra_stats?: string | null;
+};
diff --git a/packages/types/src/payment.ts b/packages/types/src/payment.ts
new file mode 100644
index 0000000..4574510
--- /dev/null
+++ b/packages/types/src/payment.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EProductSubscriptionEnum {
+  FREE = "FREE",
+  ONE = "ONE",
+  PRO = "PRO",
+  BUSINESS = "BUSINESS",
+  ENTERPRISE = "ENTERPRISE",
+}
+
+export type TBillingFrequency = "month" | "year";
+
+export type IPaymentProductPrice = {
+  currency: string;
+  id: string;
+  product: string;
+  recurring: TBillingFrequency;
+  unit_amount: number;
+  workspace_amount: number;
+};
+
+export type TProductSubscriptionType = "FREE" | "ONE" | "PRO" | "BUSINESS" | "ENTERPRISE";
+
+export type IPaymentProduct = {
+  description: string;
+  id: string;
+  name: string;
+  type: Omit<TProductSubscriptionType, "FREE">;
+  payment_quantity: number;
+  prices: IPaymentProductPrice[];
+  is_active: boolean;
+};
+
+export type TSubscriptionPrice = {
+  key: string;
+  id: string | undefined;
+  currency: string;
+  price: number;
+  recurring: TBillingFrequency;
+};
+
+export type TProductBillingFrequency = {
+  [key in EProductSubscriptionEnum]: TBillingFrequency | undefined;
+};
diff --git a/packages/types/src/pragmatic.ts b/packages/types/src/pragmatic.ts
new file mode 100644
index 0000000..713b3aa
--- /dev/null
+++ b/packages/types/src/pragmatic.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TDropTarget = {
+  element: Element;
+  data: Record<string | symbol, unknown>;
+};
+
+export type TDropTargetMiscellaneousData = {
+  dropEffect: string;
+  isActiveDueToStickiness: boolean;
+};
+
+export interface IPragmaticPayloadLocation {
+  initial: {
+    dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
+  };
+  current: {
+    dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
+  };
+  previous: {
+    dropTargets: (TDropTarget & TDropTargetMiscellaneousData)[];
+  };
+}
+
+export interface IPragmaticDropPayload {
+  location: IPragmaticPayloadLocation;
+  source: TDropTarget;
+  self: TDropTarget & TDropTargetMiscellaneousData;
+}
+
+export type InstructionType = "reparent" | "reorder-above" | "reorder-below" | "make-child" | "instruction-blocked";
diff --git a/packages/types/src/project/activity.ts b/packages/types/src/project/activity.ts
new file mode 100644
index 0000000..d5af348
--- /dev/null
+++ b/packages/types/src/project/activity.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TProjectBaseActivity } from "../activity";
+
+export type TProjectActivity = TProjectBaseActivity & {
+  content: string;
+  userId: string;
+  projectId: string;
+
+  actor_detail: {
+    display_name: string;
+    id: string;
+  };
+  workspace_detail: {
+    slug: string;
+  };
+  project_detail: {
+    name: string;
+  };
+
+  createdAt: string;
+  updatedAt: string;
+};
diff --git a/packages/types/src/project/index.ts b/packages/types/src/project/index.ts
new file mode 100644
index 0000000..245a122
--- /dev/null
+++ b/packages/types/src/project/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./activity";
+export * from "./project_filters";
+export * from "./projects";
+export * from "./project_link";
diff --git a/packages/types/src/project/project_filters.ts b/packages/types/src/project/project_filters.ts
new file mode 100644
index 0000000..54bf493
--- /dev/null
+++ b/packages/types/src/project/project_filters.ts
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TProjectOrderByOptions =
+  | "sort_order"
+  | "name"
+  | "-name"
+  | "created_at"
+  | "-created_at"
+  | "members_length"
+  | "-members_length";
+
+export type TProjectDisplayFilters = {
+  my_projects?: boolean;
+  archived_projects?: boolean;
+  order_by?: TProjectOrderByOptions;
+};
+
+export type TProjectAppliedDisplayFilterKeys = "my_projects" | "archived_projects";
+
+export type TProjectFilters = {
+  access?: string[] | null;
+  lead?: string[] | null;
+  members?: string[] | null;
+  created_at?: string[] | null;
+};
+
+export type TProjectStoredFilters = {
+  display_filters?: TProjectDisplayFilters;
+  filters?: TProjectFilters;
+};
diff --git a/packages/types/src/project/project_link.ts b/packages/types/src/project/project_link.ts
new file mode 100644
index 0000000..78b37bf
--- /dev/null
+++ b/packages/types/src/project/project_link.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TProjectLinkEditableFields = {
+  title: string;
+  url: string;
+};
+
+export type TProjectLink = TProjectLinkEditableFields & {
+  created_by_id: string;
+  id: string;
+  metadata: any;
+  project_id: string;
+
+  //need
+  created_at: Date;
+};
+
+export type TProjectLinkMap = {
+  [project_id: string]: TProjectLink;
+};
+
+export type TProjectLinkIdMap = {
+  [project_id: string]: string[];
+};
diff --git a/packages/types/src/project/projects.ts b/packages/types/src/project/projects.ts
new file mode 100644
index 0000000..3cdbed1
--- /dev/null
+++ b/packages/types/src/project/projects.ts
@@ -0,0 +1,178 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TLogoProps } from "../common";
+import type { TUserPermissions } from "../enums";
+import type { TStateGroups } from "../state";
+import type { IUser, IUserLite } from "../users";
+import type { IWorkspace } from "../workspace";
+
+export enum EUserProjectRoles {
+  ADMIN = 20,
+  MEMBER = 15,
+  GUEST = 5,
+}
+
+export interface IPartialProject {
+  id: string;
+  name: string;
+  identifier: string;
+  sort_order: number | null;
+  logo_props: TLogoProps;
+  member_role?: TUserPermissions | EUserProjectRoles | null;
+  archived_at: string | null;
+  workspace: IWorkspace | string;
+  cycle_view: boolean;
+  issue_views_view: boolean;
+  module_view: boolean;
+  page_view: boolean;
+  inbox_view: boolean;
+  guest_view_all_features?: boolean;
+  project_lead?: IUserLite | string | null;
+  network?: number;
+  // Timestamps
+  created_at?: Date;
+  updated_at?: Date;
+  // actor
+  created_by?: string;
+  updated_by?: string;
+  intake_count?: number;
+}
+
+export interface IProject extends IPartialProject {
+  archive_in?: number;
+  close_in?: number;
+  // only for uploading the cover image
+  cover_image_asset?: null;
+  cover_image?: string;
+  // only for rendering the cover image
+  readonly cover_image_url?: string;
+  default_assignee?: IUser | string | null;
+  default_state?: string | null;
+  description?: string;
+  estimate?: string | null;
+  anchor?: string | null;
+  is_favorite?: boolean;
+  members?: string[];
+  timezone?: string;
+  next_work_item_sequence?: number;
+}
+
+export type TProjectAnalyticsCountParams = {
+  project_ids?: string;
+  fields?: string;
+};
+
+export type TProjectAnalyticsCount = Pick<IProject, "id"> & {
+  total_issues?: number;
+  completed_issues?: number;
+  total_cycles?: number;
+  total_members?: number;
+  total_modules?: number;
+};
+
+export interface IProjectLite {
+  id: string;
+  name: string;
+  identifier: string;
+  logo_props: TLogoProps;
+}
+
+export interface IProjectMap {
+  [id: string]: IProject;
+}
+
+export interface IProjectMemberLite {
+  id: string;
+  member__avatar_url: string;
+  member__display_name: string;
+  member_id: string;
+}
+
+export type TProjectMembership = {
+  member: string;
+  role: TUserPermissions | EUserProjectRoles;
+} & (
+  | {
+      id: string;
+      original_role: EUserProjectRoles;
+      created_at: string;
+    }
+  | {
+      id: null;
+      original_role: null;
+      created_at: null;
+    }
+);
+
+export interface IProjectBulkAddFormData {
+  members: { role: TUserPermissions | EUserProjectRoles; member_id: string }[];
+}
+
+export type IProjectMemberNavigationPreferences = {
+  default_tab: string;
+  hide_in_more_menu: string[];
+};
+
+export type IProjectMemberPreferencesUpdate = {
+  navigation: IProjectMemberNavigationPreferences;
+};
+
+export type IProjectMemberPreferencesResponse = {
+  preferences: {
+    navigation: IProjectMemberNavigationPreferences;
+  };
+};
+
+export type IProjectMemberPreferencesFullResponse = IProjectMemberPreferencesResponse & {
+  project_id: string;
+  member_id: string;
+  workspace_id: string;
+};
+
+export interface IGithubRepository {
+  id: string;
+  full_name: string;
+  html_url: string;
+  url: string;
+}
+
+export interface GithubRepositoriesResponse {
+  repositories: IGithubRepository[];
+  total_count: number;
+}
+
+export type TProjectIssuesSearchParams = {
+  search: string;
+  parent?: boolean;
+  issue_relation?: boolean;
+  cycle?: boolean;
+  module?: string;
+  sub_issue?: boolean;
+  issue_id?: string;
+  workspace_search: boolean;
+  target_date?: string;
+  epic?: boolean;
+};
+
+export interface ISearchIssueResponse {
+  id: string;
+  name: string;
+  project_id: string;
+  project__identifier: string;
+  project__name: string;
+  sequence_id: number;
+  start_date: string | null;
+  state__color: string;
+  state__group: TStateGroups;
+  state__name: string;
+  workspace__slug: string;
+  type_id: string;
+}
+
+export type TPartialProject = IPartialProject;
+
+export type TProject = TPartialProject & IProject;
diff --git a/packages/types/src/publish.ts b/packages/types/src/publish.ts
new file mode 100644
index 0000000..c38f15f
--- /dev/null
+++ b/packages/types/src/publish.ts
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IProject, IProjectLite } from "./project";
+import type { IWorkspaceLite } from "./workspace";
+
+export type TPublishEntityType = "project" | "page";
+
+export type TProjectPublishLayouts = "calendar" | "gantt" | "kanban" | "list" | "spreadsheet";
+
+export type TProjectPublishViewProps = {
+  calendar?: boolean;
+  gantt?: boolean;
+  kanban?: boolean;
+  list?: boolean;
+  spreadsheet?: boolean;
+};
+
+export type TProjectDetails = IProjectLite & Pick<IProject, "cover_image" | "logo_props" | "description">;
+
+export type TPublishSettings = {
+  anchor: string | undefined;
+  created_at: string | undefined;
+  created_by: string | undefined;
+  entity_identifier: string | undefined;
+  entity_name: TPublishEntityType | undefined;
+  id: string | undefined;
+  inbox: unknown;
+  is_comments_enabled: boolean;
+  is_reactions_enabled: boolean;
+  is_votes_enabled: boolean;
+  project: string | undefined;
+  project_details: TProjectDetails | undefined;
+  updated_at: string | undefined;
+  updated_by: string | undefined;
+  workspace: string | undefined;
+  workspace_detail: IWorkspaceLite | undefined;
+};
+
+export type TProjectPublishSettings = TPublishSettings & {
+  view_props: TProjectPublishViewProps | undefined;
+};
diff --git a/packages/types/src/reaction.ts b/packages/types/src/reaction.ts
new file mode 100644
index 0000000..613c731
--- /dev/null
+++ b/packages/types/src/reaction.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IUserLite } from "./users";
+
+export interface IIssueReaction {
+  actor: string;
+  actor_detail: IUserLite;
+  created_at: Date;
+  created_by: string;
+  id: string;
+  issue: string;
+  project: string;
+  reaction: string;
+  updated_at: Date;
+  updated_by: string;
+  workspace: string;
+}
+
+export interface IssueReactionForm {
+  reaction: string;
+}
+
+export interface IssueCommentReaction {
+  id: string;
+  created_at: Date;
+  updated_at: Date;
+  reaction: string;
+  created_by: string;
+  updated_by: string;
+  project: string;
+  workspace: string;
+  actor: string;
+  comment: string;
+}
+
+export interface IssueCommentReactionForm {
+  reaction: string;
+}
diff --git a/packages/types/src/rich-filters/adapter.ts b/packages/types/src/rich-filters/adapter.ts
new file mode 100644
index 0000000..0c48848
--- /dev/null
+++ b/packages/types/src/rich-filters/adapter.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import type { TFilterExpression, TFilterProperty } from "./expression";
+
+/**
+ * External filter format
+ */
+export type TExternalFilter = Record<string, unknown> | undefined | null;
+
+/**
+ * Adapter for converting between internal filter trees and external formats.
+ * @template P - Filter property type (e.g., 'state_id', 'priority', 'assignee')
+ * @template E - External filter format type (e.g., work item filters, automation filters)
+ */
+export interface IFilterAdapter<P extends TFilterProperty, E extends TExternalFilter> {
+  /**
+   * Converts external format to internal filter tree.
+   */
+  toInternal(externalFilter: E): TFilterExpression<P> | null;
+  /**
+   * Converts internal filter tree to external format.
+   */
+  toExternal(internalFilter: TFilterExpression<P> | null): E;
+}
diff --git a/packages/types/src/rich-filters/builder.ts b/packages/types/src/rich-filters/builder.ts
new file mode 100644
index 0000000..0721e67
--- /dev/null
+++ b/packages/types/src/rich-filters/builder.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { SingleOrArray } from "../utils";
+import type { IFilterAdapter, TExternalFilter } from "./adapter";
+import type { TFilterProperty, TFilterValue } from "./expression";
+import type { TAllAvailableOperatorsForDisplay } from "./operators";
+
+/**
+ * Condition payload for building filter expressions.
+ * @template P - Property key type
+ * @template V - Value type
+ */
+export type TFilterConditionForBuild<P extends TFilterProperty, V extends TFilterValue> = {
+  property: P;
+  operator: TAllAvailableOperatorsForDisplay;
+  value: SingleOrArray<V>;
+};
+
+/**
+ * Parameters for building filter expressions from multiple conditions.
+ * @template P - Property key type
+ * @template V - Value type
+ */
+export type TBuildFilterExpressionParams<
+  P extends TFilterProperty,
+  V extends TFilterValue,
+  E extends TExternalFilter,
+> = {
+  conditions: TFilterConditionForBuild<P, V>[];
+  adapter: IFilterAdapter<P, E>;
+};
diff --git a/packages/types/src/rich-filters/config/filter-config.ts b/packages/types/src/rich-filters/config/filter-config.ts
new file mode 100644
index 0000000..d9b06cc
--- /dev/null
+++ b/packages/types/src/rich-filters/config/filter-config.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterProperty } from "../expression";
+import type { TOperatorConfigMap } from "../operator-configs";
+
+/**
+ * Main filter configuration type for different properties.
+ * This is the primary configuration type used throughout the application.
+ *
+ * @template P - Property key type (e.g., 'state_id', 'priority', 'assignee')
+ * @template V - Value type for the filter
+ */
+export type TFilterConfig<P extends TFilterProperty> = {
+  id: P;
+  label: string;
+  icon?: React.FC<React.SVGAttributes<SVGElement>>;
+  isEnabled: boolean;
+  allowMultipleFilters?: boolean;
+  supportedOperatorConfigsMap: TOperatorConfigMap;
+  rightContent?: React.ReactNode; // content to display on the right side of the filter option in the dropdown
+  tooltipContent?: React.ReactNode; // content to display when hovering over the applied filter item in the filter list
+};
diff --git a/packages/types/src/rich-filters/config/index.ts b/packages/types/src/rich-filters/config/index.ts
new file mode 100644
index 0000000..0c4f9c2
--- /dev/null
+++ b/packages/types/src/rich-filters/config/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filter-config";
diff --git a/packages/types/src/rich-filters/derived/core.ts b/packages/types/src/rich-filters/derived/core.ts
new file mode 100644
index 0000000..63328ac
--- /dev/null
+++ b/packages/types/src/rich-filters/derived/core.ts
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterValue } from "../expression";
+import type {
+  TDateFilterFieldConfig,
+  TDateRangeFilterFieldConfig,
+  TSingleSelectFilterFieldConfig,
+  TMultiSelectFilterFieldConfig,
+} from "../field-types";
+import type { TCoreOperatorSpecificConfigs } from "../operator-configs";
+import type { TFilterOperatorHelper } from "./shared";
+
+// -------- DATE FILTER OPERATORS --------
+
+/**
+ * Union type representing all core operators that support single date filter types.
+ */
+export type TCoreSupportedSingleDateFilterOperators<V extends TFilterValue = TFilterValue> = {
+  [K in keyof TCoreOperatorSpecificConfigs]: TFilterOperatorHelper<
+    TCoreOperatorSpecificConfigs,
+    K,
+    TDateFilterFieldConfig<V>
+  >;
+}[keyof TCoreOperatorSpecificConfigs];
+
+/**
+ * Union type representing all core operators that support range date filter types.
+ */
+export type TCoreSupportedRangeDateFilterOperators<V extends TFilterValue = TFilterValue> = {
+  [K in keyof TCoreOperatorSpecificConfigs]: TFilterOperatorHelper<
+    TCoreOperatorSpecificConfigs,
+    K,
+    TDateRangeFilterFieldConfig<V>
+  >;
+}[keyof TCoreOperatorSpecificConfigs];
+
+/**
+ * Union type representing all core operators that support date filter types.
+ */
+export type TCoreSupportedDateFilterOperators<V extends TFilterValue = TFilterValue> =
+  | TCoreSupportedSingleDateFilterOperators<V>
+  | TCoreSupportedRangeDateFilterOperators<V>;
+
+export type TCoreAllAvailableDateFilterOperatorsForDisplay<V extends TFilterValue = TFilterValue> =
+  TCoreSupportedDateFilterOperators<V>;
+
+// -------- SELECT FILTER OPERATORS --------
+
+/**
+ * Union type representing all core operators that support single select filter types.
+ */
+export type TCoreSupportedSingleSelectFilterOperators<V extends TFilterValue = TFilterValue> = {
+  [K in keyof TCoreOperatorSpecificConfigs]: TFilterOperatorHelper<
+    TCoreOperatorSpecificConfigs,
+    K,
+    TSingleSelectFilterFieldConfig<V>
+  >;
+}[keyof TCoreOperatorSpecificConfigs];
+
+/**
+ * Union type representing all core operators that support multi select filter types.
+ */
+export type TCoreSupportedMultiSelectFilterOperators<V extends TFilterValue = TFilterValue> = {
+  [K in keyof TCoreOperatorSpecificConfigs]: TFilterOperatorHelper<
+    TCoreOperatorSpecificConfigs,
+    K,
+    TMultiSelectFilterFieldConfig<V>
+  >;
+}[keyof TCoreOperatorSpecificConfigs];
+
+/**
+ * Union type representing all core operators that support any select filter types.
+ */
+export type TCoreSupportedSelectFilterOperators<V extends TFilterValue = TFilterValue> =
+  | TCoreSupportedSingleSelectFilterOperators<V>
+  | TCoreSupportedMultiSelectFilterOperators<V>;
+
+export type TCoreAllAvailableSelectFilterOperatorsForDisplay<V extends TFilterValue = TFilterValue> =
+  TCoreSupportedSelectFilterOperators<V>;
diff --git a/packages/types/src/rich-filters/derived/extended.ts b/packages/types/src/rich-filters/derived/extended.ts
new file mode 100644
index 0000000..d3778f0
--- /dev/null
+++ b/packages/types/src/rich-filters/derived/extended.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterValue } from "../expression";
+
+// -------- DATE FILTER OPERATORS --------
+
+/**
+ * Union type representing all extended operators that support date filter types.
+ */
+export type TExtendedSupportedDateFilterOperators<_V extends TFilterValue = TFilterValue> = never;
+
+export type TExtendedAllAvailableDateFilterOperatorsForDisplay<_V extends TFilterValue = TFilterValue> = never;
+
+// -------- SELECT FILTER OPERATORS --------
+
+/**
+ * Union type representing all extended operators that support select filter types.
+ */
+export type TExtendedSupportedSelectFilterOperators<_V extends TFilterValue = TFilterValue> = never;
+
+export type TExtendedAllAvailableSelectFilterOperatorsForDisplay<_V extends TFilterValue = TFilterValue> = never;
diff --git a/packages/types/src/rich-filters/derived/index.ts b/packages/types/src/rich-filters/derived/index.ts
new file mode 100644
index 0000000..cdcf5c8
--- /dev/null
+++ b/packages/types/src/rich-filters/derived/index.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterValue } from "../expression";
+import type {
+  TCoreAllAvailableDateFilterOperatorsForDisplay,
+  TCoreAllAvailableSelectFilterOperatorsForDisplay,
+  TCoreSupportedDateFilterOperators,
+  TCoreSupportedSelectFilterOperators,
+} from "./core";
+import type {
+  TExtendedAllAvailableDateFilterOperatorsForDisplay,
+  TExtendedAllAvailableSelectFilterOperatorsForDisplay,
+  TExtendedSupportedDateFilterOperators,
+  TExtendedSupportedSelectFilterOperators,
+} from "./extended";
+
+// -------- COMPOSED SUPPORT TYPES --------
+
+/**
+ * All supported date filter operators.
+ */
+export type TSupportedDateFilterOperators<V extends TFilterValue = TFilterValue> =
+  | TCoreSupportedDateFilterOperators<V>
+  | TExtendedSupportedDateFilterOperators<V>;
+
+export type TAllAvailableDateFilterOperatorsForDisplay<V extends TFilterValue = TFilterValue> =
+  | TCoreAllAvailableDateFilterOperatorsForDisplay<V>
+  | TExtendedAllAvailableDateFilterOperatorsForDisplay<V>;
+
+/**
+ * All supported select filter operators.
+ */
+export type TSupportedSelectFilterOperators<V extends TFilterValue = TFilterValue> =
+  | TCoreSupportedSelectFilterOperators<V>
+  | TExtendedSupportedSelectFilterOperators<V>;
+
+export type TAllAvailableSelectFilterOperatorsForDisplay<V extends TFilterValue = TFilterValue> =
+  | TCoreAllAvailableSelectFilterOperatorsForDisplay<V>
+  | TExtendedAllAvailableSelectFilterOperatorsForDisplay<V>;
+
+// -------- RE-EXPORTS --------
+
+export * from "./shared";
+export * from "./core";
+export * from "./extended";
diff --git a/packages/types/src/rich-filters/derived/shared.ts b/packages/types/src/rich-filters/derived/shared.ts
new file mode 100644
index 0000000..c22e893
--- /dev/null
+++ b/packages/types/src/rich-filters/derived/shared.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Generic utility type to check if a configuration type supports specific filter types.
+ * Returns the operator key if any member of the union includes the target filter types, never otherwise.
+ */
+export type TFilterOperatorHelper<
+  TOperatorConfigs,
+  K extends keyof TOperatorConfigs,
+  TTargetFilter,
+> = TTargetFilter extends TOperatorConfigs[K] ? K : TOperatorConfigs[K] extends TTargetFilter ? K : never;
diff --git a/packages/types/src/rich-filters/expression.ts b/packages/types/src/rich-filters/expression.ts
new file mode 100644
index 0000000..6a57f29
--- /dev/null
+++ b/packages/types/src/rich-filters/expression.ts
@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import type { SingleOrArray } from "../utils";
+import type { TSupportedOperators, LOGICAL_OPERATOR, TAllAvailableOperatorsForDisplay } from "./operators";
+
+/**
+ * Filter node types for building hierarchical filter trees.
+ * - CONDITION: Single filter for one field (e.g., "state is backlog")
+ * - GROUP: Logical container combining multiple filters with AND/OR or single filter/group with NOT
+ */
+export const FILTER_NODE_TYPE = {
+  CONDITION: "condition",
+  GROUP: "group",
+} as const;
+export type TFilterNodeType = (typeof FILTER_NODE_TYPE)[keyof typeof FILTER_NODE_TYPE];
+
+/**
+ * Field property key that can be filtered (e.g., "state", "assignee", "created_at").
+ */
+export type TFilterProperty = string;
+
+/**
+ * Allowed filter values - primitives plus null/undefined for empty states.
+ */
+export type TFilterValue = string | number | Date | boolean | null | undefined;
+
+/**
+ * Base properties shared by all filter nodes.
+ * - id: Unique identifier for the node
+ * - type: Node type (condition or group)
+ */
+type TBaseFilterNode = {
+  id: string;
+  type: TFilterNodeType;
+};
+
+/**
+ * Leaf node representing a single filter condition (e.g., "state is backlog").
+ * - type: Node type (condition)
+ * - property: Field being filtered
+ * - operator: Comparison operator (is, is not, between, not between, etc.)
+ * - value: Filter value(s) - array for operators that support multiple values
+ * @template P - Property key type
+ * @template V - Value type
+ */
+export type TFilterConditionNode<P extends TFilterProperty, V extends TFilterValue> = TBaseFilterNode & {
+  type: typeof FILTER_NODE_TYPE.CONDITION;
+  property: P;
+  operator: TSupportedOperators;
+  value: SingleOrArray<V>;
+};
+
+/**
+ * Filter condition node for display purposes.
+ */
+export type TFilterConditionNodeForDisplay<P extends TFilterProperty, V extends TFilterValue> = Omit<
+  TFilterConditionNode<P, V>,
+  "operator"
+> & {
+  operator: TAllAvailableOperatorsForDisplay;
+};
+
+/**
+ * Container node that combines multiple conditions with AND logical operator.
+ * - type: Node type (group)
+ * - logicalOperator: AND operator for combining child filters
+ * - children: Child conditions and/or nested groups (minimum 2 for meaningful operations)
+ * @template P - Property key type
+ */
+export type TFilterAndGroupNode<P extends TFilterProperty> = TBaseFilterNode & {
+  type: typeof FILTER_NODE_TYPE.GROUP;
+  logicalOperator: typeof LOGICAL_OPERATOR.AND;
+  children: TFilterExpression<P>[];
+};
+
+/**
+ * Union type for all group node types - AND, OR, and NOT groups.
+ * @template P - Property key type
+ */
+export type TFilterGroupNode<P extends TFilterProperty> = TFilterAndGroupNode<P>;
+
+/**
+ * Union type for any filter node - either a single condition or a group container.
+ * @template P - Property key type
+ * @template V - Value type
+ */
+export type TFilterExpression<P extends TFilterProperty, V extends TFilterValue = TFilterValue> =
+  | TFilterConditionNode<P, V>
+  | TFilterGroupNode<P>;
+
+/**
+ * Payload for creating/updating condition nodes - excludes base node properties.
+ * @template P - Property key type
+ * @template V - Value type
+ */
+export type TFilterConditionPayload<P extends TFilterProperty, V extends TFilterValue> = Omit<
+  TFilterConditionNode<P, V>,
+  keyof TBaseFilterNode
+>;
+
+/**
+ * Payload for creating/updating AND group nodes - excludes base node properties.
+ * @template P - Property key type
+ */
+export type TFilterAndGroupPayload<P extends TFilterProperty> = Omit<TFilterAndGroupNode<P>, keyof TBaseFilterNode>;
+
+/**
+ * Union payload type for creating/updating any group node - excludes base node properties.
+ * @template P - Property key type
+ */
+export type TFilterGroupPayload<P extends TFilterProperty> = TFilterAndGroupPayload<P>;
diff --git a/packages/types/src/rich-filters/field-types/core.ts b/packages/types/src/rich-filters/field-types/core.ts
new file mode 100644
index 0000000..88bc53c
--- /dev/null
+++ b/packages/types/src/rich-filters/field-types/core.ts
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterValue } from "../expression";
+import type { TSupportedOperators } from "../operators";
+import type { TBaseFilterFieldConfig, IFilterOption } from "./shared";
+
+/**
+ * Core filter types
+ */
+export const CORE_FILTER_FIELD_TYPE = {
+  DATE: "date",
+  DATE_RANGE: "date_range",
+  SINGLE_SELECT: "single_select",
+  MULTI_SELECT: "multi_select",
+} as const;
+
+// -------- DATE FILTER CONFIGURATIONS --------
+
+type TBaseDateFilterFieldConfig = TBaseFilterFieldConfig & {
+  min?: Date;
+  max?: Date;
+};
+
+/**
+ * Date filter configuration - for temporal filtering.
+ * - defaultValue: Initial date/time value
+ * - min: Minimum allowed date
+ * - max: Maximum allowed date
+ */
+export type TDateFilterFieldConfig<V extends TFilterValue> = TBaseDateFilterFieldConfig & {
+  type: typeof CORE_FILTER_FIELD_TYPE.DATE;
+  defaultValue?: V;
+};
+
+/**
+ * Date range filter configuration - for temporal filtering.
+ * - defaultValue: Initial date/time range values
+ * - min: Minimum allowed date
+ * - max: Maximum allowed date
+ */
+export type TDateRangeFilterFieldConfig<V extends TFilterValue> = TBaseDateFilterFieldConfig & {
+  type: typeof CORE_FILTER_FIELD_TYPE.DATE_RANGE;
+  defaultValue?: V[];
+};
+
+// -------- SELECT FILTER CONFIGURATIONS --------
+
+/**
+ * Single-select filter configuration - dropdown with one selectable option.
+ * - defaultValue: Initial selected value
+ * - getOptions: Options as static array or async function
+ */
+export type TSingleSelectFilterFieldConfig<V extends TFilterValue> = TBaseFilterFieldConfig & {
+  type: typeof CORE_FILTER_FIELD_TYPE.SINGLE_SELECT;
+  defaultValue?: V;
+  getOptions: IFilterOption<V>[] | (() => IFilterOption<V>[] | Promise<IFilterOption<V>[]>);
+};
+
+/**
+ * Multi-select filter configuration - allows selecting multiple options.
+ * - defaultValue: Initial selected values array
+ * - getOptions: Options as static array or async function
+ * - singleValueOperator: Operator to show when single value is selected
+ */
+export type TMultiSelectFilterFieldConfig<V extends TFilterValue> = TBaseFilterFieldConfig & {
+  type: typeof CORE_FILTER_FIELD_TYPE.MULTI_SELECT;
+  defaultValue?: V[];
+  getOptions: IFilterOption<V>[] | (() => IFilterOption<V>[] | Promise<IFilterOption<V>[]>);
+  singleValueOperator: TSupportedOperators;
+};
+
+// -------- UNION TYPES --------
+
+/**
+ * All core filter configurations
+ */
+export type TCoreFilterFieldConfigs<V extends TFilterValue = TFilterValue> =
+  | TDateFilterFieldConfig<V>
+  | TDateRangeFilterFieldConfig<V>
+  | TSingleSelectFilterFieldConfig<V>
+  | TMultiSelectFilterFieldConfig<V>;
diff --git a/packages/types/src/rich-filters/field-types/extended.ts b/packages/types/src/rich-filters/field-types/extended.ts
new file mode 100644
index 0000000..1d8aa96
--- /dev/null
+++ b/packages/types/src/rich-filters/field-types/extended.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterValue } from "../expression";
+
+/**
+ * Extended filter types
+ */
+export const EXTENDED_FILTER_FIELD_TYPE = {} as const;
+
+// -------- UNION TYPES --------
+
+/**
+ * All extended filter configurations
+ */
+export type TExtendedFilterFieldConfigs<_V extends TFilterValue = TFilterValue> = never;
diff --git a/packages/types/src/rich-filters/field-types/index.ts b/packages/types/src/rich-filters/field-types/index.ts
new file mode 100644
index 0000000..9de366b
--- /dev/null
+++ b/packages/types/src/rich-filters/field-types/index.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterValue } from "../expression";
+import type { TCoreFilterFieldConfigs } from "./core";
+import { CORE_FILTER_FIELD_TYPE } from "./core";
+import type { TExtendedFilterFieldConfigs } from "./extended";
+import { EXTENDED_FILTER_FIELD_TYPE } from "./extended";
+
+// -------- COMPOSED FILTER TYPES --------
+
+export const FILTER_FIELD_TYPE = {
+  ...CORE_FILTER_FIELD_TYPE,
+  ...EXTENDED_FILTER_FIELD_TYPE,
+} as const;
+
+export type TFilterFieldType = (typeof FILTER_FIELD_TYPE)[keyof typeof FILTER_FIELD_TYPE];
+
+// -------- COMPOSED CONFIGURATIONS --------
+
+/**
+ * All supported filter configurations.
+ */
+export type TSupportedFilterFieldConfigs<V extends TFilterValue = TFilterValue> =
+  | TCoreFilterFieldConfigs<V>
+  | TExtendedFilterFieldConfigs<V>;
+
+// -------- RE-EXPORTS --------
+
+export * from "./shared";
+export * from "./core";
+export * from "./extended";
diff --git a/packages/types/src/rich-filters/field-types/shared.ts b/packages/types/src/rich-filters/field-types/shared.ts
new file mode 100644
index 0000000..58e675d
--- /dev/null
+++ b/packages/types/src/rich-filters/field-types/shared.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterValue } from "../expression";
+
+/**
+ * Negative operator configuration for operators.
+ * - allowNegative: Whether the operator supports negation
+ * - negOperatorLabel: Label to use when the operator is negated
+ */
+export type TNegativeOperatorConfig = { allowNegative: true; negOperatorLabel?: string } | { allowNegative?: false };
+
+/**
+ * Base filter configuration shared by all filter types.
+ * - operatorLabel: Label to use for the operator
+ * - negativeOperatorConfig: Configuration for negative operators
+ */
+export type TBaseFilterFieldConfig = {
+  isOperatorEnabled?: boolean;
+  operatorLabel?: string;
+} & TNegativeOperatorConfig;
+
+/**
+ * Individual option for select/multi-select filters.
+ * - id: Unique identifier for the option
+ * - label: Display text shown to users
+ * - value: Actual value used in filtering
+ * - icon: Optional icon component
+ * - iconClassName: CSS class for icon styling
+ * - disabled: Whether option can be selected
+ * - description: Additional context to be displayed in the filter dropdown
+ */
+export interface IFilterOption<V extends TFilterValue> {
+  id: string;
+  label: string;
+  value: V;
+  icon?: React.ReactNode;
+  iconClassName?: string;
+  disabled?: boolean;
+  description?: string;
+}
diff --git a/packages/types/src/rich-filters/index.ts b/packages/types/src/rich-filters/index.ts
new file mode 100644
index 0000000..0ac0c31
--- /dev/null
+++ b/packages/types/src/rich-filters/index.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./adapter";
+export * from "./builder";
+export * from "./config";
+export * from "./derived";
+export * from "./expression";
+export * from "./operator-configs";
+export * from "./operators";
+export * from "./field-types";
diff --git a/packages/types/src/rich-filters/operator-configs/core.ts b/packages/types/src/rich-filters/operator-configs/core.ts
new file mode 100644
index 0000000..b8eb9d3
--- /dev/null
+++ b/packages/types/src/rich-filters/operator-configs/core.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterValue } from "../expression";
+import type {
+  TDateFilterFieldConfig,
+  TDateRangeFilterFieldConfig,
+  TSingleSelectFilterFieldConfig,
+  TMultiSelectFilterFieldConfig,
+} from "../field-types";
+import type { CORE_COLLECTION_OPERATOR, CORE_COMPARISON_OPERATOR, CORE_EQUALITY_OPERATOR } from "../operators";
+
+// ----------------------------- EXACT Operator -----------------------------
+export type TCoreExactOperatorConfigs =
+  | TSingleSelectFilterFieldConfig<TFilterValue>
+  | TDateFilterFieldConfig<TFilterValue>;
+
+// ----------------------------- IN Operator -----------------------------
+export type TCoreInOperatorConfigs = TMultiSelectFilterFieldConfig<TFilterValue>;
+
+// ----------------------------- RANGE Operator -----------------------------
+export type TCoreRangeOperatorConfigs = TDateRangeFilterFieldConfig<TFilterValue>;
+
+// ----------------------------- Core Operator Specific Configs -----------------------------
+export type TCoreOperatorSpecificConfigs = {
+  [CORE_EQUALITY_OPERATOR.EXACT]: TCoreExactOperatorConfigs;
+  [CORE_COLLECTION_OPERATOR.IN]: TCoreInOperatorConfigs;
+  [CORE_COMPARISON_OPERATOR.RANGE]: TCoreRangeOperatorConfigs;
+};
diff --git a/packages/types/src/rich-filters/operator-configs/extended.ts b/packages/types/src/rich-filters/operator-configs/extended.ts
new file mode 100644
index 0000000..1ef1c55
--- /dev/null
+++ b/packages/types/src/rich-filters/operator-configs/extended.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// ----------------------------- EXACT Operator -----------------------------
+export type TExtendedExactOperatorConfigs = never;
+
+// ----------------------------- IN Operator -----------------------------
+export type TExtendedInOperatorConfigs = never;
+
+// ----------------------------- RANGE Operator -----------------------------
+export type TExtendedRangeOperatorConfigs = never;
+
+// ----------------------------- Extended Operator Specific Configs -----------------------------
+export type TExtendedOperatorSpecificConfigs = unknown;
diff --git a/packages/types/src/rich-filters/operator-configs/index.ts b/packages/types/src/rich-filters/operator-configs/index.ts
new file mode 100644
index 0000000..6e0cc4c
--- /dev/null
+++ b/packages/types/src/rich-filters/operator-configs/index.ts
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { EQUALITY_OPERATOR, COLLECTION_OPERATOR, COMPARISON_OPERATOR } from "../operators";
+import type { TCoreExactOperatorConfigs, TCoreInOperatorConfigs, TCoreRangeOperatorConfigs } from "./core";
+import type {
+  TExtendedExactOperatorConfigs,
+  TExtendedInOperatorConfigs,
+  TExtendedOperatorSpecificConfigs,
+  TExtendedRangeOperatorConfigs,
+} from "./extended";
+
+// ----------------------------- Composed Operator Configs -----------------------------
+
+/**
+ * EXACT operator - combines core and extended configurations
+ */
+export type TExactOperatorConfigs = TCoreExactOperatorConfigs | TExtendedExactOperatorConfigs;
+
+/**
+ * IN operator - combines core and extended configurations
+ */
+export type TInOperatorConfigs = TCoreInOperatorConfigs | TExtendedInOperatorConfigs;
+
+/**
+ * RANGE operator - combines core and extended configurations
+ */
+export type TRangeOperatorConfigs = TCoreRangeOperatorConfigs | TExtendedRangeOperatorConfigs;
+
+// ----------------------------- Final Operator Specific Configs -----------------------------
+
+/**
+ * Type-safe mapping of specific operators to their supported filter type configurations.
+ * Each operator maps to its composed (core + extended) configurations.
+ */
+export type TOperatorSpecificConfigs = {
+  [EQUALITY_OPERATOR.EXACT]: TExactOperatorConfigs;
+  [COLLECTION_OPERATOR.IN]: TInOperatorConfigs;
+  [COMPARISON_OPERATOR.RANGE]: TRangeOperatorConfigs;
+} & TExtendedOperatorSpecificConfigs;
+
+/**
+ * Operator filter configuration mapping - for different operators.
+ * Provides type-safe mapping of operators to their specific supported configurations.
+ */
+export type TOperatorConfigMap = Map<
+  keyof TOperatorSpecificConfigs,
+  TOperatorSpecificConfigs[keyof TOperatorSpecificConfigs]
+>;
+
+// -------- RE-EXPORTS --------
+
+export * from "./core";
+export * from "./extended";
diff --git a/packages/types/src/rich-filters/operators/core.ts b/packages/types/src/rich-filters/operators/core.ts
new file mode 100644
index 0000000..6497a7f
--- /dev/null
+++ b/packages/types/src/rich-filters/operators/core.ts
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Core logical operators
+ */
+export const CORE_LOGICAL_OPERATOR = {
+  AND: "and",
+} as const;
+
+/**
+ * Core equality operators
+ */
+export const CORE_EQUALITY_OPERATOR = {
+  EXACT: "exact",
+} as const;
+
+/**
+ * Core collection operators
+ */
+export const CORE_COLLECTION_OPERATOR = {
+  IN: "in",
+} as const;
+
+/**
+ * Core comparison operators
+ */
+export const CORE_COMPARISON_OPERATOR = {
+  RANGE: "range",
+} as const;
+
+/**
+ * Core operators that support multiple values
+ */
+export const CORE_MULTI_VALUE_OPERATORS = [CORE_COLLECTION_OPERATOR.IN, CORE_COMPARISON_OPERATOR.RANGE] as const;
+
+/**
+ * All core operators
+ */
+export const CORE_OPERATORS = {
+  ...CORE_EQUALITY_OPERATOR,
+  ...CORE_COLLECTION_OPERATOR,
+  ...CORE_COMPARISON_OPERATOR,
+} as const;
+
+/**
+ * All core operators that can be used in filter conditions
+ */
+export type TCoreSupportedOperators = (typeof CORE_OPERATORS)[keyof typeof CORE_OPERATORS];
diff --git a/packages/types/src/rich-filters/operators/extended.ts b/packages/types/src/rich-filters/operators/extended.ts
new file mode 100644
index 0000000..16fe15a
--- /dev/null
+++ b/packages/types/src/rich-filters/operators/extended.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Extended logical operators
+ */
+export const EXTENDED_LOGICAL_OPERATOR = {} as const;
+
+/**
+ * Extended equality operators
+ */
+export const EXTENDED_EQUALITY_OPERATOR = {} as const;
+
+/**
+ * Extended collection operators
+ */
+export const EXTENDED_COLLECTION_OPERATOR = {} as const;
+
+/**
+ * Extended comparison operators
+ */
+export const EXTENDED_COMPARISON_OPERATOR = {} as const;
+
+/**
+ * Extended operators that support multiple values
+ */
+export const EXTENDED_MULTI_VALUE_OPERATORS = [] as const;
+
+/**
+ * All extended operators
+ */
+export const EXTENDED_OPERATORS = {
+  ...EXTENDED_EQUALITY_OPERATOR,
+  ...EXTENDED_COLLECTION_OPERATOR,
+  ...EXTENDED_COMPARISON_OPERATOR,
+} as const;
+/**
+ * All extended operators that can be used in filter conditions
+ */
+export type TExtendedSupportedOperators = (typeof EXTENDED_OPERATORS)[keyof typeof EXTENDED_OPERATORS];
diff --git a/packages/types/src/rich-filters/operators/index.ts b/packages/types/src/rich-filters/operators/index.ts
new file mode 100644
index 0000000..1433903
--- /dev/null
+++ b/packages/types/src/rich-filters/operators/index.ts
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TCoreSupportedOperators } from "./core";
+import {
+  CORE_LOGICAL_OPERATOR,
+  CORE_EQUALITY_OPERATOR,
+  CORE_COLLECTION_OPERATOR,
+  CORE_COMPARISON_OPERATOR,
+  CORE_MULTI_VALUE_OPERATORS,
+} from "./core";
+import type { TExtendedSupportedOperators } from "./extended";
+import {
+  EXTENDED_LOGICAL_OPERATOR,
+  EXTENDED_EQUALITY_OPERATOR,
+  EXTENDED_COLLECTION_OPERATOR,
+  EXTENDED_COMPARISON_OPERATOR,
+  EXTENDED_MULTI_VALUE_OPERATORS,
+} from "./extended";
+
+// -------- COMPOSED OPERATORS --------
+
+export const LOGICAL_OPERATOR = {
+  ...CORE_LOGICAL_OPERATOR,
+  ...EXTENDED_LOGICAL_OPERATOR,
+} as const;
+
+export const EQUALITY_OPERATOR = {
+  ...CORE_EQUALITY_OPERATOR,
+  ...EXTENDED_EQUALITY_OPERATOR,
+} as const;
+
+export const COLLECTION_OPERATOR = {
+  ...CORE_COLLECTION_OPERATOR,
+  ...EXTENDED_COLLECTION_OPERATOR,
+} as const;
+
+export const COMPARISON_OPERATOR = {
+  ...CORE_COMPARISON_OPERATOR,
+  ...EXTENDED_COMPARISON_OPERATOR,
+} as const;
+
+export const MULTI_VALUE_OPERATORS: ReadonlyArray<TSupportedOperators> = [
+  ...CORE_MULTI_VALUE_OPERATORS,
+  ...EXTENDED_MULTI_VALUE_OPERATORS,
+] as const;
+
+// -------- COMPOSED TYPES --------
+
+export type TLogicalOperator = (typeof LOGICAL_OPERATOR)[keyof typeof LOGICAL_OPERATOR];
+export type TEqualityOperator = (typeof EQUALITY_OPERATOR)[keyof typeof EQUALITY_OPERATOR];
+export type TCollectionOperator = (typeof COLLECTION_OPERATOR)[keyof typeof COLLECTION_OPERATOR];
+export type TComparisonOperator = (typeof COMPARISON_OPERATOR)[keyof typeof COMPARISON_OPERATOR];
+
+/**
+ * Union type representing all operators that can be used in a filter condition.
+ * Combines core and extended operators.
+ */
+export type TSupportedOperators = TCoreSupportedOperators | TExtendedSupportedOperators;
+
+/**
+ * All operators available for use in rich filters UI, including negated versions.
+ */
+export type TAllAvailableOperatorsForDisplay = TSupportedOperators;
+
+// -------- RE-EXPORTS --------
+
+export * from "./core";
+export * from "./extended";
diff --git a/packages/types/src/search.ts b/packages/types/src/search.ts
new file mode 100644
index 0000000..e619a7d
--- /dev/null
+++ b/packages/types/src/search.ts
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ICycle } from "./cycle";
+import type { TIssue } from "./issues/issue";
+import type { IModule } from "./module";
+import type { TPage } from "./page";
+import type { IProject } from "./project";
+import type { IUser } from "./users";
+import type { IWorkspace } from "./workspace";
+
+export type TSearchEntities = "user_mention" | "issue" | "project" | "cycle" | "module" | "page";
+
+export type TUserSearchResponse = {
+  member__avatar_url: IUser["avatar_url"];
+  member__display_name: IUser["display_name"];
+  member__id: IUser["id"];
+};
+
+export type TProjectSearchResponse = {
+  name: IProject["name"];
+  id: IProject["id"];
+  identifier: IProject["identifier"];
+  logo_props: IProject["logo_props"];
+  workspace__slug: IWorkspace["slug"];
+};
+
+export type TIssueSearchResponse = {
+  name: TIssue["name"];
+  id: TIssue["id"];
+  sequence_id: TIssue["sequence_id"];
+  project__identifier: IProject["identifier"];
+  project_id: TIssue["project_id"];
+  priority: TIssue["priority"];
+  state_id: TIssue["state_id"];
+  type_id: TIssue["type_id"];
+};
+
+export type TCycleSearchResponse = {
+  name: ICycle["name"];
+  id: ICycle["id"];
+  project_id: ICycle["project_id"];
+  project__identifier: IProject["identifier"];
+  status: ICycle["status"];
+  workspace__slug: IWorkspace["slug"];
+};
+
+export type TModuleSearchResponse = {
+  name: IModule["name"];
+  id: IModule["id"];
+  project_id: IModule["project_id"];
+  project__identifier: IProject["identifier"];
+  status: IModule["status"];
+  workspace__slug: IWorkspace["slug"];
+};
+
+export type TPageSearchResponse = {
+  name: TPage["name"];
+  id: TPage["id"];
+  logo_props: TPage["logo_props"];
+  projects__id: TPage["project_ids"];
+  workspace__slug: IWorkspace["slug"];
+};
+
+export type TSearchResponse = {
+  cycle?: TCycleSearchResponse[];
+  issue?: TIssueSearchResponse[];
+  module?: TModuleSearchResponse[];
+  page?: TPageSearchResponse[];
+  project?: TProjectSearchResponse[];
+  user_mention?: TUserSearchResponse[];
+};
+
+export type TSearchEntityRequestPayload = {
+  count: number;
+  project_id?: string;
+  query_type: TSearchEntities[];
+  query: string;
+  team_id?: string;
+  issue_id?: string;
+};
diff --git a/packages/types/src/settings.ts b/packages/types/src/settings.ts
new file mode 100644
index 0000000..c9df62f
--- /dev/null
+++ b/packages/types/src/settings.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import type { EUserProjectRoles } from ".";
+import type { EUserWorkspaceRoles } from "./workspace";
+
+export type TProfileSettingsTabs = "general" | "preferences" | "notifications" | "security" | "api-tokens";
+
+export type TWorkspaceSettingsTabs = "general" | "members" | "billing-and-plans" | "export" | "webhooks";
+export type TWorkspaceSettingsItem = {
+  key: TWorkspaceSettingsTabs;
+  i18n_label: string;
+  href: string;
+  access: EUserWorkspaceRoles[];
+  highlight: (pathname: string, baseUrl: string) => boolean;
+};
+
+export type TProjectSettingsTabs =
+  | "general"
+  | "members"
+  | "features_cycles"
+  | "features_modules"
+  | "features_views"
+  | "features_pages"
+  | "features_intake"
+  | "states"
+  | "labels"
+  | "estimates"
+  | "automations";
+export type TProjectSettingsItem = {
+  key: TProjectSettingsTabs;
+  i18n_label: string;
+  href: string;
+  access: EUserProjectRoles[];
+  highlight: (pathname: string, baseUrl: string) => boolean;
+};
diff --git a/packages/types/src/state.ts b/packages/types/src/state.ts
new file mode 100644
index 0000000..2af6482
--- /dev/null
+++ b/packages/types/src/state.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
+
+export interface IState {
+  readonly id: string;
+  color: string;
+  default: boolean;
+  description: string;
+  group: TStateGroups;
+  name: string;
+  project_id: string;
+  sequence: number;
+  workspace_id: string;
+  order: number;
+}
+
+export interface IStateLite {
+  color: string;
+  group: TStateGroups;
+  id: string;
+  name: string;
+}
+
+export interface IStateResponse {
+  [key: string]: IState[];
+}
+
+export type TStateOperationsCallbacks = {
+  createState: (data: Partial<IState>) => Promise<IState>;
+  updateState: (stateId: string, data: Partial<IState>) => Promise<IState | undefined>;
+  deleteState: (stateId: string) => Promise<void>;
+  moveStatePosition: (stateId: string, data: Partial<IState>) => Promise<void>;
+  markStateAsDefault: (stateId: string) => Promise<void>;
+};
diff --git a/packages/types/src/stickies.ts b/packages/types/src/stickies.ts
new file mode 100644
index 0000000..649bac9
--- /dev/null
+++ b/packages/types/src/stickies.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TLogoProps } from "./common";
+
+export type TSticky = {
+  created_at?: string | undefined;
+  created_by?: string | undefined;
+  background_color?: string | null | undefined;
+  description?: object | undefined;
+  description_html?: string | undefined;
+  id: string;
+  logo_props: TLogoProps | undefined;
+  name?: string;
+  sort_order: number | undefined;
+  updated_at?: string | undefined;
+  updated_by?: string | undefined;
+  workspace: string | undefined;
+};
diff --git a/packages/types/src/timezone.ts b/packages/types/src/timezone.ts
new file mode 100644
index 0000000..e963303
--- /dev/null
+++ b/packages/types/src/timezone.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TTimezoneObject = {
+  utc_offset: string;
+  gmt_offset: string;
+  label: string;
+  value: string;
+};
+
+export type TTimezones = { timezones: TTimezoneObject[] };
diff --git a/packages/types/src/users.ts b/packages/types/src/users.ts
new file mode 100644
index 0000000..7391343
--- /dev/null
+++ b/packages/types/src/users.ts
@@ -0,0 +1,229 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TUserPermissions } from "./enums";
+import type { IIssueActivity, TIssuePriorities, TStateGroups } from ".";
+import type { TLoginMediums } from "./instance";
+
+/**
+ * @description The start of the week for the user
+ * @enum {number}
+ */
+export enum EStartOfTheWeek {
+  SUNDAY = 0,
+  MONDAY = 1,
+  TUESDAY = 2,
+  WEDNESDAY = 3,
+  THURSDAY = 4,
+  FRIDAY = 5,
+  SATURDAY = 6,
+}
+
+export interface IUserLite {
+  avatar_url: string;
+  display_name: string;
+  email?: string;
+  first_name: string;
+  id: string;
+  is_bot: boolean;
+  last_name: string;
+  joining_date?: string;
+}
+export interface IUser extends IUserLite {
+  // only for uploading the cover image
+  cover_image_asset?: string | null;
+  cover_image?: string | null;
+  // only for rendering the cover image
+  cover_image_url: string | null;
+  date_joined: string;
+  email: string;
+  is_active: boolean;
+  is_email_verified: boolean;
+  is_password_autoset: boolean;
+  is_tour_completed: boolean;
+  mobile_number: string | null;
+  last_workspace_id: string;
+  user_timezone: string;
+  username: string;
+  last_login_medium: TLoginMediums;
+  theme: IUserTheme;
+}
+
+export interface IUserAccount {
+  provider_account_id: string;
+  provider: string;
+  created_at: Date;
+  updated_at: Date;
+}
+
+export type TUserProfile = {
+  id: string | undefined;
+  user: string | undefined;
+  role: string | undefined;
+  last_workspace_id: string | undefined;
+  theme: {
+    theme: string | undefined;
+    primary: string | undefined;
+    background: string | undefined;
+    darkPalette: boolean | undefined;
+  };
+  onboarding_step: TOnboardingSteps;
+  is_onboarded: boolean;
+  is_tour_completed: boolean;
+  use_case: string | undefined;
+  billing_address_country: string | undefined;
+  billing_address: string | undefined;
+  has_billing_address: boolean;
+  has_marketing_email_consent: boolean;
+  language: string;
+  created_at: Date | string;
+  updated_at: Date | string;
+  start_of_the_week: EStartOfTheWeek;
+};
+
+export interface IInstanceAdminStatus {
+  is_instance_admin: boolean;
+}
+
+export interface IUserSettings {
+  id: string | undefined;
+  email: string | undefined;
+  workspace: {
+    last_workspace_id: string | undefined;
+    last_workspace_slug: string | undefined;
+    last_workspace_name: string | undefined;
+    last_workspace_logo: string | undefined;
+    fallback_workspace_id: string | undefined;
+    fallback_workspace_slug: string | undefined;
+    invites: number | undefined;
+  };
+}
+
+export interface IUserTheme {
+  theme: string | undefined; // 'light', 'dark', 'custom', etc.
+  primary?: string | undefined;
+  background?: string | undefined;
+  darkPalette?: boolean | undefined;
+}
+
+export interface IUserMemberLite extends IUserLite {
+  email?: string;
+}
+
+export interface IUserActivity {
+  created_date: string;
+  activity_count: number;
+}
+
+export interface IUserPriorityDistribution {
+  priority: TIssuePriorities;
+  priority_count: number;
+}
+
+export interface IUserStateDistribution {
+  state_group: TStateGroups;
+  state_count: number;
+}
+
+export interface IUserActivityResponse {
+  count: number;
+  extra_stats: null;
+  next_cursor: string;
+  next_page_results: boolean;
+  prev_cursor: string;
+  prev_page_results: boolean;
+  results: IIssueActivity[];
+  total_pages: number;
+  total_results: number;
+}
+
+export type UserAuth = {
+  isMember: boolean;
+  isOwner: boolean;
+  isGuest: boolean;
+};
+
+export type TOnboardingSteps = {
+  profile_complete: boolean;
+  workspace_create: boolean;
+  workspace_invite: boolean;
+  workspace_join: boolean;
+};
+
+export interface IUserProfileData {
+  assigned_issues: number;
+  completed_issues: number;
+  created_issues: number;
+  pending_issues: number;
+  priority_distribution: IUserPriorityDistribution[];
+  state_distribution: IUserStateDistribution[];
+  subscribed_issues: number;
+}
+
+export interface IUserProfileProjectSegregation {
+  project_data: {
+    assigned_issues: number;
+    completed_issues: number;
+    created_issues: number;
+    id: string;
+    pending_issues: number;
+  }[];
+  user_data: Pick<IUser, "avatar_url" | "cover_image_url" | "display_name" | "first_name" | "last_name"> & {
+    date_joined: Date;
+    user_timezone: string;
+  };
+}
+
+export interface IUserProjectsRole {
+  [projectId: string]: TUserPermissions;
+}
+
+export interface IUserEmailNotificationSettings {
+  property_change: boolean;
+  state_change: boolean;
+  comment: boolean;
+  mention: boolean;
+  issue_completed: boolean;
+}
+
+export type TProfileViews = "assigned" | "created" | "subscribed";
+
+export type TPublicMember = {
+  id: string;
+  member: string;
+  member__display_name: string;
+  member__avatar: string;
+};
+
+// export interface ICurrentUser {
+//   id: readonly string;
+//   avatar: string;
+//   first_name: string;
+//   last_name: string;
+//   username: string;
+//   email: string;
+//   mobile_number: string;
+//   is_email_verified: boolean;
+//   is_tour_completed: boolean;
+//   onboarding_step: TOnboardingSteps;
+//   is_onboarded: boolean;
+//   role: string;
+// }
+
+// export interface ICustomTheme {
+//   background: string;
+//   text: string;
+//   primary: string;
+//   sidebarBackground: string;
+//   sidebarText: string;
+//   darkPalette: boolean;
+//   palette: string;
+//   theme: string;
+// }
+
+// export interface ICurrentUserSettings {
+//   theme: ICustomTheme;
+// }
diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts
new file mode 100644
index 0000000..2947bd4
--- /dev/null
+++ b/packages/types/src/utils.ts
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type PartialDeep<K> = {
+  [attr in keyof K]?: K[attr] extends object ? PartialDeep<K[attr]> : K[attr];
+};
+
+export type CompleteOrEmpty<T> = T | Record<string, never>;
+
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+export type SingleOrArray<T> = T extends null | undefined ? T : T | T[];
diff --git a/packages/types/src/view-props.ts b/packages/types/src/view-props.ts
new file mode 100644
index 0000000..638afa0
--- /dev/null
+++ b/packages/types/src/view-props.ts
@@ -0,0 +1,273 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { IProjectMemberNavigationPreferences } from "./project";
+import type { TIssue } from "./issues/issue";
+import type { LOGICAL_OPERATOR, TSupportedOperators } from "./rich-filters";
+import type { CompleteOrEmpty } from "./utils";
+
+export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
+
+export type TIssueGroupByOptions =
+  | "state"
+  | "priority"
+  | "labels"
+  | "created_by"
+  | "state_detail.group"
+  | "project"
+  | "assignees"
+  | "cycle"
+  | "module"
+  | "target_date"
+  | "team_project"
+  | null;
+
+export type TIssueOrderByOptions =
+  | "-created_at"
+  | "created_at"
+  | "updated_at"
+  | "-updated_at"
+  | "priority"
+  | "-priority"
+  | "sort_order"
+  | "state__name"
+  | "-state__name"
+  | "assignees__first_name"
+  | "-assignees__first_name"
+  | "labels__name"
+  | "-labels__name"
+  | "issue_module__module__name"
+  | "-issue_module__module__name"
+  | "issue_cycle__cycle__name"
+  | "-issue_cycle__cycle__name"
+  | "target_date"
+  | "-target_date"
+  | "estimate_point__key"
+  | "-estimate_point__key"
+  | "start_date"
+  | "-start_date"
+  | "link_count"
+  | "-link_count"
+  | "attachment_count"
+  | "-attachment_count"
+  | "sub_issues_count"
+  | "-sub_issues_count";
+
+export type TIssueGroupingFilters = "active" | "backlog";
+
+export type TIssueExtraOptions = "show_empty_groups" | "sub_issue";
+
+export type TIssueParams =
+  | "priority"
+  | "state_group"
+  | "state"
+  | "assignees"
+  | "mentions"
+  | "created_by"
+  | "subscriber"
+  | "labels"
+  | "cycle"
+  | "module"
+  | "start_date"
+  | "target_date"
+  | "project"
+  | "team_project"
+  | "group_by"
+  | "sub_group_by"
+  | "order_by"
+  | "type"
+  | "sub_issue"
+  | "show_empty_groups"
+  | "cursor"
+  | "per_page"
+  | "issue_type"
+  | "layout"
+  | "expand"
+  | "filters";
+
+export type TCalendarLayouts = "month" | "week";
+
+/**
+ * Keys for the work item filter properties
+ */
+export const WORK_ITEM_FILTER_PROPERTY_KEYS = [
+  "state_group",
+  "priority",
+  "start_date",
+  "target_date",
+  "assignee_id",
+  "mention_id",
+  "created_by_id",
+  "subscriber_id",
+  "label_id",
+  "state_id",
+  "cycle_id",
+  "module_id",
+  "project_id",
+  "created_at",
+  "updated_at",
+] as const;
+export type TWorkItemFilterProperty = (typeof WORK_ITEM_FILTER_PROPERTY_KEYS)[number];
+
+export type TWorkItemFilterConditionKey = `${TWorkItemFilterProperty}__${TSupportedOperators}`;
+
+export type TWorkItemFilterConditionData = Partial<{
+  [K in TWorkItemFilterConditionKey]: string | boolean | number;
+}>;
+
+export type TWorkItemFilterAndGroup = {
+  [LOGICAL_OPERATOR.AND]: TWorkItemFilterConditionData[];
+};
+
+export type TWorkItemFilterGroup = TWorkItemFilterAndGroup;
+
+export type TWorkItemFilterExpressionData = TWorkItemFilterConditionData | TWorkItemFilterGroup;
+
+export type TWorkItemFilterExpression = CompleteOrEmpty<TWorkItemFilterExpressionData>;
+
+export interface IIssueFilterOptions {
+  assignees?: string[] | null;
+  mentions?: string[] | null;
+  created_by?: string[] | null;
+  labels?: string[] | null;
+  priority?: string[] | null;
+  cycle?: string[] | null;
+  module?: string[] | null;
+  project?: string[] | null;
+  team_project?: string[] | null;
+  start_date?: string[] | null;
+  state?: string[] | null;
+  state_group?: string[] | null;
+  subscriber?: string[] | null;
+  target_date?: string[] | null;
+  issue_type?: string[] | null;
+}
+
+export interface IIssueDisplayFilterOptions {
+  calendar?: {
+    show_weekends?: boolean;
+    layout?: TCalendarLayouts;
+  };
+  group_by?: TIssueGroupByOptions;
+  sub_group_by?: TIssueGroupByOptions;
+  layout?: any; // TODO: Need to fix this and set it to enum EIssueLayoutTypes
+  order_by?: TIssueOrderByOptions;
+  show_empty_groups?: boolean;
+  sub_issue?: boolean;
+}
+export interface IIssueDisplayProperties {
+  assignee?: boolean;
+  start_date?: boolean;
+  due_date?: boolean;
+  labels?: boolean;
+  key?: boolean;
+  priority?: boolean;
+  state?: boolean;
+  sub_issue_count?: boolean;
+  link?: boolean;
+  attachment_count?: boolean;
+  estimate?: boolean;
+  created_on?: boolean;
+  updated_on?: boolean;
+  modules?: boolean;
+  cycle?: boolean;
+  issue_type?: boolean;
+}
+
+export type TIssueKanbanFilters = {
+  group_by: string[];
+  sub_group_by: string[];
+};
+
+export interface IIssueFilters {
+  richFilters: TWorkItemFilterExpression;
+  displayFilters: IIssueDisplayFilterOptions | undefined;
+  displayProperties: IIssueDisplayProperties | undefined;
+  kanbanFilters: TIssueKanbanFilters | undefined;
+}
+
+export type TSupportedFilterForUpdate = IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters;
+
+export interface ISubWorkItemFilters extends Omit<IIssueFilters, "richFilters"> {
+  filters: IIssueFilterOptions;
+}
+
+export interface IIssueFiltersResponse {
+  rich_filters: TWorkItemFilterExpression;
+  display_filters: IIssueDisplayFilterOptions;
+  display_properties: IIssueDisplayProperties;
+}
+
+export interface IProjectUserPropertiesResponse extends IIssueFiltersResponse {
+  sort_order: number;
+  preferences: {
+    pages: {
+      block_display: boolean;
+    };
+    navigation: IProjectMemberNavigationPreferences;
+  };
+}
+
+export interface IWorkspaceUserPropertiesResponse extends IIssueFiltersResponse {
+  navigation_project_limit?: number;
+  navigation_control_preference?: "ACCORDION" | "TABBED";
+  // Note: show_limited_projects is derived from navigation_project_limit (0 = false, >0 = true)
+}
+
+export interface IWorkspaceIssueFilterOptions {
+  assignees?: string[] | null;
+  created_by?: string[] | null;
+  labels?: string[] | null;
+  priority?: string[] | null;
+  state_group?: string[] | null;
+  subscriber?: string[] | null;
+  start_date?: string[] | null;
+  target_date?: string[] | null;
+  project?: string[] | null;
+}
+
+export interface IWorkspaceViewIssuesParams {
+  assignees?: string | undefined;
+  created_by?: string | undefined;
+  labels?: string | undefined;
+  priority?: string | undefined;
+  start_date?: string | undefined;
+  state?: string | undefined;
+  state_group?: string | undefined;
+  subscriber?: string | undefined;
+  target_date?: string | undefined;
+  project?: string | undefined;
+  order_by?: string | undefined;
+  sub_issue?: boolean;
+}
+
+export interface IProjectViewProps {
+  rich_filters: TWorkItemFilterExpression;
+  display_filters: IIssueDisplayFilterOptions | undefined;
+}
+
+export interface IWorkspaceViewProps {
+  rich_filters: TWorkItemFilterExpression;
+  display_filters: IIssueDisplayFilterOptions | undefined;
+  display_properties: IIssueDisplayProperties;
+}
+
+export interface IssuePaginationOptions {
+  canGroup: boolean;
+  perPageCount: number;
+  before?: string;
+  after?: string;
+  groupedBy?: TIssueGroupByOptions;
+  subGroupedBy?: TIssueGroupByOptions;
+  orderBy?: TIssueOrderByOptions;
+}
+
+export type TSpreadsheetColumn = React.FC<{
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+}>;
diff --git a/packages/types/src/views.ts b/packages/types/src/views.ts
new file mode 100644
index 0000000..4991b2d
--- /dev/null
+++ b/packages/types/src/views.ts
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TLogoProps } from "./common";
+import type {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TWorkItemFilterExpression,
+} from "./view-props";
+
+export enum EViewAccess {
+  PRIVATE,
+  PUBLIC,
+}
+
+export interface IProjectView {
+  id: string;
+  access: EViewAccess;
+  created_at: Date;
+  updated_at: Date;
+  is_favorite: boolean;
+  created_by: string;
+  updated_by: string;
+  name: string;
+  description: string;
+  rich_filters: TWorkItemFilterExpression;
+  display_filters: IIssueDisplayFilterOptions;
+  display_properties: IIssueDisplayProperties;
+  query: IIssueFilterOptions;
+  query_data: IIssueFilterOptions;
+  project: string;
+  workspace: string;
+  logo_props: TLogoProps | undefined;
+  is_locked: boolean;
+  anchor?: string;
+  owned_by: string;
+}
+
+export interface IPublishedProjectView extends Omit<IProjectView, "rich_filters"> {
+  filters: IIssueFilterOptions;
+}
+
+export type TPublishViewSettings = {
+  is_comments_enabled: boolean;
+  is_reactions_enabled: boolean;
+  is_votes_enabled: boolean;
+};
+
+export type TPublishViewDetails = TPublishViewSettings & {
+  id: string;
+  anchor: string;
+};
+
+export type TViewFiltersSortKey = "name" | "created_at" | "updated_at";
+
+export type TViewFiltersSortBy = "asc" | "desc";
+
+export type TViewFilterProps = {
+  created_at?: string[] | null;
+  owned_by?: string[] | null;
+  favorites?: boolean;
+  view_type?: EViewAccess[];
+};
+
+export type TViewFilters = {
+  searchQuery: string;
+  sortKey: TViewFiltersSortKey;
+  sortBy: TViewFiltersSortBy;
+  filters?: TViewFilterProps;
+};
diff --git a/packages/types/src/waitlist.ts b/packages/types/src/waitlist.ts
new file mode 100644
index 0000000..5ec4860
--- /dev/null
+++ b/packages/types/src/waitlist.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export interface IWebWaitListResponse {
+  status: string;
+}
diff --git a/packages/types/src/webhook.ts b/packages/types/src/webhook.ts
new file mode 100644
index 0000000..357dcbc
--- /dev/null
+++ b/packages/types/src/webhook.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export interface IWebhook {
+  created_at: string;
+  cycle: boolean;
+  id: string;
+  is_active: boolean;
+  issue: boolean;
+  issue_comment: boolean;
+  module: boolean;
+  project: boolean;
+  secret_key?: string;
+  updated_at: string;
+  url: string;
+}
+
+export type TWebhookEventTypes = "all" | "individual";
diff --git a/packages/types/src/workspace-draft-issues/base.ts b/packages/types/src/workspace-draft-issues/base.ts
new file mode 100644
index 0000000..65402c4
--- /dev/null
+++ b/packages/types/src/workspace-draft-issues/base.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TIssuePriorities } from "../issues";
+
+export type TWorkspaceDraftIssue = {
+  id: string;
+  name: string;
+  sort_order: number;
+
+  state_id: string | undefined;
+  priority: TIssuePriorities | undefined;
+  label_ids: string[];
+  assignee_ids: string[];
+  estimate_point: string | undefined;
+
+  project_id: string | undefined;
+  parent_id: string | undefined;
+  cycle_id: string | undefined;
+  module_ids: string[] | undefined;
+
+  start_date: string | undefined;
+  target_date: string | undefined;
+  completed_at: string | undefined;
+
+  created_at: string;
+  updated_at: string;
+  created_by: string;
+  updated_by: string;
+
+  is_draft: boolean;
+
+  type_id: string;
+};
+
+export type TWorkspaceDraftPaginationInfo<T> = {
+  next_cursor: string | undefined;
+  prev_cursor: string | undefined;
+  next_page_results: boolean | undefined;
+  prev_page_results: boolean | undefined;
+  total_pages: number | undefined;
+  count: number | undefined; // current paginated results count
+  total_count: number | undefined; // total available results count
+  total_results: number | undefined;
+  results: T[] | undefined;
+  extra_stats: string | undefined;
+  grouped_by: string | undefined;
+  sub_grouped_by: string | undefined;
+};
+
+export type TWorkspaceDraftQueryParams = {
+  per_page: number;
+  cursor: string;
+};
+
+export type TWorkspaceDraftIssueLoader =
+  | "init-loader"
+  | "empty-state"
+  | "mutation"
+  | "pagination"
+  | "loaded"
+  | "create"
+  | "update"
+  | "delete"
+  | "move"
+  | undefined;
diff --git a/packages/types/src/workspace-notifications.ts b/packages/types/src/workspace-notifications.ts
new file mode 100644
index 0000000..e9f0a68
--- /dev/null
+++ b/packages/types/src/workspace-notifications.ts
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ENotificationFilterType } from "./enums";
+import type { IUserLite } from "./users";
+
+// filters
+export type TNotificationFilter = {
+  type: {
+    [key in ENotificationFilterType]: boolean;
+  };
+  snoozed: boolean;
+  archived: boolean;
+  read: boolean;
+};
+
+// notification payload
+export type TNotificationIssueLite = {
+  id: string | undefined;
+  sequence_id: number | undefined;
+  identifier: string | undefined;
+  name: string | undefined;
+  state_name: string | undefined;
+  state_group: string | undefined;
+};
+
+export type TNotificationData = {
+  issue: TNotificationIssueLite | undefined;
+  issue_activity: {
+    id: string | undefined;
+    actor: string | undefined;
+    field: string | undefined;
+    issue_comment: string | undefined;
+    verb: "created" | "updated" | "deleted";
+    new_value: string | undefined;
+    old_value: string | undefined;
+  };
+};
+
+export type TNotification = {
+  id: string;
+  title: string | undefined;
+  data: TNotificationData | undefined;
+  entity_identifier: string | undefined;
+  entity_name: string | undefined;
+  message_html: string | undefined;
+  message: undefined;
+  message_stripped: undefined;
+  sender: string | undefined;
+  receiver: string | undefined;
+  triggered_by: string | undefined;
+  triggered_by_details: IUserLite | undefined;
+  read_at: string | undefined;
+  archived_at: string | undefined;
+  snoozed_till: string | undefined;
+  is_inbox_issue: boolean | undefined;
+  is_mentioned_notification: boolean | undefined;
+  workspace: string | undefined;
+  project: string | undefined;
+  created_at: string | undefined;
+  updated_at: string | undefined;
+  created_by: string | undefined;
+  updated_by: string | undefined;
+};
+
+// notification paginated information
+export type TNotificationPaginatedInfoQueryParams = {
+  type?: string | undefined;
+  snoozed?: boolean;
+  archived?: boolean;
+  mentioned?: boolean;
+  read?: boolean;
+  per_page?: number;
+  cursor?: string;
+};
+
+export type TNotificationPaginatedInfo = {
+  next_cursor: string | undefined;
+  prev_cursor: string | undefined;
+  next_page_results: boolean | undefined;
+  prev_page_results: boolean | undefined;
+  total_pages: number | undefined;
+  extra_stats: string | undefined;
+  count: number | undefined; // current paginated results count
+  total_count: number | undefined; // total available results count
+  results: TNotification[] | undefined;
+  grouped_by: string | undefined;
+  sub_grouped_by: string | undefined;
+};
+
+// notification count
+export type TUnreadNotificationsCount = {
+  total_unread_notifications_count: number;
+  mention_unread_notifications_count: number;
+};
+
+export type TNotificationLite = {
+  workspace_slug: string | undefined;
+  project_id: string | undefined;
+  notification_id: string | undefined;
+  issue_id: string | undefined;
+  is_inbox_issue: boolean | undefined;
+};
diff --git a/packages/types/src/workspace-views.ts b/packages/types/src/workspace-views.ts
new file mode 100644
index 0000000..1a9a2c4
--- /dev/null
+++ b/packages/types/src/workspace-views.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  IWorkspaceViewProps,
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TWorkItemFilterExpression,
+} from "./view-props";
+import type { EViewAccess } from "./views";
+
+export interface IWorkspaceView {
+  id: string;
+  access: EViewAccess;
+  created_at: Date;
+  updated_at: Date;
+  is_favorite: boolean;
+  created_by: string;
+  updated_by: string;
+  name: string;
+  description: string;
+  rich_filters: TWorkItemFilterExpression;
+  display_filters: IIssueDisplayFilterOptions;
+  display_properties: IIssueDisplayProperties;
+  query: any;
+  query_data: IWorkspaceViewProps;
+  project: string;
+  workspace: string;
+  is_locked: boolean;
+  owned_by: string;
+  workspace_detail?: {
+    id: string;
+    name: string;
+    slug: string;
+  };
+}
+
+export const STATIC_VIEW_TYPES = ["all-issues", "assigned", "created", "subscribed"];
+
+export type TStaticViewTypes = (typeof STATIC_VIEW_TYPES)[number];
diff --git a/packages/types/src/workspace.ts b/packages/types/src/workspace.ts
new file mode 100644
index 0000000..fe2a410
--- /dev/null
+++ b/packages/types/src/workspace.ts
@@ -0,0 +1,268 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TPaginationInfo } from "./common";
+import type { ICycle } from "./cycle";
+import type { TUserPermissions } from "./enums";
+import type { TProjectMembership } from "./project";
+import type { IUser, IUserLite } from "./users";
+import type { TLoginMediums } from "./instance";
+import type { IWorkspaceViewProps } from "./view-props";
+
+export enum EUserWorkspaceRoles {
+  ADMIN = 20,
+  MEMBER = 15,
+  GUEST = 5,
+}
+
+export interface IWorkspace {
+  readonly id: string;
+  readonly owner: IUser;
+  readonly created_at: Date;
+  readonly updated_at: Date;
+  name: string;
+  url: string;
+  logo_url: string | null;
+  readonly total_members: number;
+  readonly slug: string;
+  readonly created_by: string;
+  readonly updated_by: string;
+  organization_size: string;
+  total_projects?: number;
+  role: number;
+  timezone: string;
+}
+
+export interface IWorkspaceLite {
+  readonly id: string;
+  name: string;
+  slug: string;
+}
+
+export interface IWorkspaceMemberInvitation {
+  accepted: boolean;
+  email: string;
+  id: string;
+  message: string;
+  responded_at: Date;
+  role: TUserPermissions;
+  token: string;
+  invite_link: string;
+  workspace: {
+    id: string;
+    logo_url: string;
+    name: string;
+    slug: string;
+  };
+}
+
+export interface IWorkspaceBulkInviteFormData {
+  emails: { email: string; role: TUserPermissions }[];
+}
+
+export type Properties = {
+  assignee: boolean;
+  start_date: boolean;
+  due_date: boolean;
+  labels: boolean;
+  key: boolean;
+  priority: boolean;
+  state: boolean;
+  sub_issue_count: boolean;
+  link: boolean;
+  attachment_count: boolean;
+  estimate: boolean;
+  created_on: boolean;
+  updated_on: boolean;
+};
+
+export interface IWorkspaceMember {
+  id: string;
+  member: IUserLite;
+  role: TUserPermissions | EUserWorkspaceRoles;
+  created_at?: string;
+  avatar_url?: string;
+  email?: string;
+  first_name?: string;
+  last_name?: string;
+  joining_date?: string;
+  display_name?: string;
+  last_login_medium?: TLoginMediums;
+  is_active?: boolean;
+}
+
+export interface IWorkspaceMemberMe {
+  company_role: string | null;
+  created_at: Date;
+  created_by: string;
+  default_props: IWorkspaceViewProps;
+  id: string;
+  member: string;
+  role: TUserPermissions | EUserWorkspaceRoles;
+  updated_at: Date;
+  updated_by: string;
+  view_props: IWorkspaceViewProps;
+  workspace: string;
+  draft_issue_count: number;
+}
+
+export interface ILastActiveWorkspaceDetails {
+  workspace_details: IWorkspace;
+  project_details?: TProjectMembership[];
+}
+
+export interface IWorkspaceDefaultSearchResult {
+  id: string;
+  name: string;
+  project_id: string;
+  project__identifier: string;
+  workspace__slug: string;
+}
+export interface IWorkspaceSearchResult {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface IWorkspaceIssueSearchResult {
+  id: string;
+  name: string;
+  project__identifier: string;
+  project_id: string;
+  sequence_id: number;
+  workspace__slug: string;
+  type_id: string;
+}
+
+export interface IWorkspacePageSearchResult {
+  id: string;
+  name: string;
+  project_ids: string[];
+  project__identifiers: string[];
+  workspace__slug: string;
+}
+
+export interface IWorkspaceProjectSearchResult {
+  id: string;
+  identifier: string;
+  name: string;
+  workspace__slug: string;
+}
+
+export interface IWorkspaceSearchResults {
+  results: {
+    workspace: IWorkspaceSearchResult[];
+    project: IWorkspaceProjectSearchResult[];
+    issue: IWorkspaceIssueSearchResult[];
+    cycle: IWorkspaceDefaultSearchResult[];
+    module: IWorkspaceDefaultSearchResult[];
+    issue_view: IWorkspaceDefaultSearchResult[];
+    page: IWorkspacePageSearchResult[];
+  };
+}
+
+export interface IProductUpdateResponse {
+  url: string;
+  assets_url: string;
+  upload_url: string;
+  html_url: string;
+  id: number;
+  author: {
+    login: string;
+    id: string;
+    node_id: string;
+    avatar_url: string;
+    gravatar_id: "";
+    url: string;
+    html_url: string;
+    followers_url: string;
+    following_url: string;
+    gists_url: string;
+    starred_url: string;
+    subscriptions_url: string;
+    organizations_url: string;
+    repos_url: string;
+    events_url: string;
+    received_events_url: string;
+    type: string;
+    site_admin: false;
+  };
+  node_id: string;
+  tag_name: string;
+  target_commitish: string;
+  name: string;
+  draft: boolean;
+  prerelease: true;
+  created_at: string;
+  published_at: string;
+  assets: [];
+  tarball_url: string;
+  zipball_url: string;
+  body: string;
+  reactions: {
+    url: string;
+    total_count: number;
+    "+1": number;
+    "-1": number;
+    laugh: number;
+    hooray: number;
+    confused: number;
+    heart: number;
+    rocket: number;
+    eyes: number;
+  };
+}
+
+export interface IWorkspaceActiveCyclesResponse {
+  count: number;
+  extra_stats: null;
+  next_cursor: string;
+  next_page_results: boolean;
+  prev_cursor: string;
+  prev_page_results: boolean;
+  results: ICycle[];
+  total_pages: number;
+}
+
+export interface IWorkspaceProgressResponse {
+  completed_issues: number;
+  total_issues: number;
+  started_issues: number;
+  cancelled_issues: number;
+  unstarted_issues: number;
+}
+export interface IWorkspaceAnalyticsResponse {
+  completion_chart: Record<string, unknown>;
+}
+
+export type TWorkspacePaginationInfo = TPaginationInfo & {
+  results: IWorkspace[];
+};
+
+export interface IWorkspaceSidebarNavigationItem {
+  key?: string;
+  is_pinned: boolean;
+  sort_order: number;
+}
+
+export interface IWorkspaceSidebarNavigation {
+  [key: string]: IWorkspaceSidebarNavigationItem;
+}
+
+export enum EOnboardingSteps {
+  PROFILE_SETUP = "PROFILE_SETUP",
+  ROLE_SETUP = "ROLE_SETUP",
+  USE_CASE_SETUP = "USE_CASE_SETUP",
+  WORKSPACE_CREATE_OR_JOIN = "WORKSPACE_CREATE_OR_JOIN",
+  INVITE_MEMBERS = "INVITE_MEMBERS",
+}
+
+export type TOnboardingStep = EOnboardingSteps;
+
+export enum ECreateOrJoinWorkspaceViews {
+  WORKSPACE_CREATE = "WORKSPACE_CREATE",
+  WORKSPACE_JOIN = "WORKSPACE_JOIN",
+}
diff --git a/packages/types/tsconfig.json b/packages/types/tsconfig.json
new file mode 100644
index 0000000..c3fc872
--- /dev/null
+++ b/packages/types/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@plane/typescript-config/node-library.json",
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/types/tsdown.config.ts b/packages/types/tsdown.config.ts
new file mode 100644
index 0000000..5f7ccad
--- /dev/null
+++ b/packages/types/tsdown.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  exports: true,
+});
diff --git a/packages/typescript-config/.prettierignore b/packages/typescript-config/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/typescript-config/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/typescript-config/base.json b/packages/typescript-config/base.json
new file mode 100644
index 0000000..ea09a51
--- /dev/null
+++ b/packages/typescript-config/base.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": false,
+    "esModuleInterop": true,
+    "exactOptionalPropertyTypes": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "lib": ["es2023"],
+    "module": "preserve",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "esnext",
+    "tsBuildInfoFile": ".turbo/tsconfig.tsbuildinfo",
+    "verbatimModuleSyntax": true
+  }
+}
diff --git a/packages/typescript-config/nextjs.json b/packages/typescript-config/nextjs.json
new file mode 100644
index 0000000..e6defa4
--- /dev/null
+++ b/packages/typescript-config/nextjs.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "jsx": "preserve",
+    "noEmit": true
+  }
+}
diff --git a/packages/typescript-config/node-library.json b/packages/typescript-config/node-library.json
new file mode 100644
index 0000000..d3623d7
--- /dev/null
+++ b/packages/typescript-config/node-library.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "lib": ["es2023"],
+    "types": ["node"]
+  }
+}
diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json
new file mode 100644
index 0000000..4368b20
--- /dev/null
+++ b/packages/typescript-config/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@plane/typescript-config",
+  "version": "1.4.2",
+  "private": true,
+  "license": "AGPL-3.0",
+  "files": [
+    "base.json",
+    "nextjs.json",
+    "react-library.json",
+    "node-library.json"
+  ]
+}
diff --git a/packages/typescript-config/react-library.json b/packages/typescript-config/react-library.json
new file mode 100644
index 0000000..7b06a2e
--- /dev/null
+++ b/packages/typescript-config/react-library.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["es2023", "DOM", "DOM.Iterable"]
+  }
+}
diff --git a/packages/typescript-config/react-router.json b/packages/typescript-config/react-router.json
new file mode 100644
index 0000000..bac01d7
--- /dev/null
+++ b/packages/typescript-config/react-router.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "target": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
diff --git a/packages/ui/.prettierignore b/packages/ui/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/ui/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
new file mode 100644
index 0000000..c8ce4f0
--- /dev/null
+++ b/packages/ui/.storybook/main.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+import { createRequire } from "module";
+import { join, dirname } from "path";
+
+const require = createRequire(import.meta.url);
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Plug'n'Play (PnP) or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-docs"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    "@storybook/addon-styling-webpack",
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-webpack5"),
+    options: {},
+  },
+};
+export default config;
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
new file mode 100644
index 0000000..77e8394
--- /dev/null
+++ b/packages/ui/.storybook/preview.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Preview } from "@storybook/react";
+import "../styles/output.css";
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 0000000..ce447bf
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1 @@
+# UI Package
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..1765901
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "@plane/ui",
+  "version": "1.4.2",
+  "private": true,
+  "description": "UI components shared across multiple apps internally",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "postcss": "postcss styles/globals.css -o styles/output.css --watch",
+    "check:lint": "oxlint --max-warnings=66 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "catalog:",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
+    "@headlessui/react": "catalog:",
+    "@makeplane/propel": "catalog:",
+    "@plane/constants": "workspace:*",
+    "@plane/hooks": "workspace:*",
+    "@plane/propel": "workspace:*",
+    "@plane/types": "workspace:*",
+    "@plane/utils": "workspace:*",
+    "@popperjs/core": "catalog:",
+    "clsx": "catalog:",
+    "lodash-es": "catalog:",
+    "lucide-react": "catalog:",
+    "react-color": "catalog:",
+    "react-day-picker": "catalog:",
+    "react-popper": "catalog:",
+    "tailwind-merge": "catalog:",
+    "use-font-face-observer": "catalog:"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "catalog:",
+    "@plane/tailwind-config": "workspace:*",
+    "@plane/typescript-config": "workspace:*",
+    "@storybook/addon-docs": "catalog:",
+    "@storybook/addon-links": "catalog:",
+    "@storybook/addon-onboarding": "catalog:",
+    "@storybook/addon-styling-webpack": "catalog:",
+    "@storybook/addon-webpack5-compiler-swc": "catalog:",
+    "@storybook/react": "catalog:",
+    "@storybook/react-webpack5": "catalog:",
+    "@types/lodash-es": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-color": "catalog:",
+    "@types/react-dom": "catalog:",
+    "autoprefixer": "catalog:",
+    "postcss-cli": "catalog:",
+    "postcss-nested": "catalog:",
+    "storybook": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
new file mode 100644
index 0000000..3ad28f1
--- /dev/null
+++ b/packages/ui/postcss.config.js
@@ -0,0 +1,3 @@
+import postcssConfig from "@plane/tailwind-config/postcss.config.js";
+
+export default postcssConfig;
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx
new file mode 100644
index 0000000..963d440
--- /dev/null
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// ui
+import { Tooltip } from "@plane/propel/tooltip";
+// helpers
+import { cn } from "../utils";
+// types
+import type { TAvatarSize } from "./helper";
+import { getSizeInfo, isAValidNumber } from "./helper";
+
+type Props = {
+  /**
+   * The children of the avatar group.
+   * These should ideally should be `Avatar` components
+   */
+  children: React.ReactNode;
+  /**
+   * The maximum number of avatars to display.
+   * If the number of children exceeds this value, the additional avatars will be replaced by a count of the remaining avatars.
+   * @default 2
+   */
+  max?: number;
+  /**
+   * Whether to show the tooltip or not
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * The size of the avatars
+   * Possible values: "sm", "md", "base", "lg"
+   * @default "md"
+   */
+  size?: TAvatarSize;
+};
+
+export function AvatarGroup(props: Props) {
+  const { children, max = 2, showTooltip = true, size = "md" } = props;
+
+  // calculate total length of avatars inside the group
+  const totalAvatars = React.Children.toArray(children).length;
+
+  // if avatars are equal to max + 1, then we need to show the last avatar as well, if avatars are more than max + 1, then we need to show the count of the remaining avatars
+  const maxAvatarsToRender = totalAvatars <= max + 1 ? max + 1 : max;
+
+  // slice the children to the maximum number of avatars
+  const avatars = React.Children.toArray(children).slice(0, maxAvatarsToRender);
+
+  // assign the necessary props from the AvatarGroup component to the Avatar components
+  const avatarsWithUpdatedProps = avatars.map((avatar) => {
+    const updatedProps: Partial<Props> = {
+      showTooltip,
+      size,
+    };
+
+    return React.cloneElement(avatar as React.ReactElement, updatedProps);
+  });
+
+  // get size details based on the size prop
+  const sizeInfo = getSizeInfo(size);
+
+  return (
+    <div className={cn("flex", sizeInfo.spacing)}>
+      {avatarsWithUpdatedProps.map((avatar, index) => (
+        <div key={index} className="rounded-full border border-subtle-1">
+          {avatar}
+        </div>
+      ))}
+      {maxAvatarsToRender < totalAvatars && (
+        <Tooltip tooltipContent={`${totalAvatars} total`} disabled={!showTooltip}>
+          <div
+            className={cn(
+              "grid place-items-center rounded-full border border-subtle-1 bg-accent-subtle text-9 text-accent-primary",
+              {
+                [sizeInfo.avatarSize]: !isAValidNumber(size),
+              }
+            )}
+            style={
+              isAValidNumber(size)
+                ? {
+                    width: `${size}px`,
+                    height: `${size}px`,
+                  }
+                : {}
+            }
+          >
+            +{totalAvatars - max}
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/avatar/avatar.stories.tsx b/packages/ui/src/avatar/avatar.stories.tsx
new file mode 100644
index 0000000..9f96059
--- /dev/null
+++ b/packages/ui/src/avatar/avatar.stories.tsx
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar } from "./avatar";
+
+const meta: Meta<typeof Avatar> = {
+  title: "Avatar",
+  component: Avatar,
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: { name: "John Doe" },
+};
+
+export const Large: Story = {
+  args: { name: "John Doe" },
+};
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
new file mode 100644
index 0000000..7cc8271
--- /dev/null
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// ui
+import { Tooltip } from "@plane/propel/tooltip";
+// helpers
+import { cn } from "../utils";
+import type { TAvatarSize } from "./helper";
+import { getBorderRadius, getSizeInfo, isAValidNumber } from "./helper";
+
+type Props = {
+  /**
+   * The name of the avatar which will be displayed on the tooltip
+   */
+  name?: string;
+  /**
+   * The background color if the avatar image fails to load
+   */
+  fallbackBackgroundColor?: string;
+  /**
+   * The text to display if the avatar image fails to load
+   */
+  fallbackText?: string;
+  /**
+   * The text color if the avatar image fails to load
+   */
+  fallbackTextColor?: string;
+  /**
+   * Whether to show the tooltip or not
+   * @default true
+   */
+  showTooltip?: boolean;
+  /**
+   * The size of the avatars
+   * Possible values: "sm", "md", "base", "lg"
+   * @default "md"
+   */
+  size?: TAvatarSize;
+  /**
+   * The shape of the avatar
+   * Possible values: "circle", "square"
+   * @default "circle"
+   */
+  shape?: "circle" | "square";
+  /**
+   * The source of the avatar image
+   */
+  src?: string;
+  /**
+   * The custom CSS class name to apply to the component
+   */
+  className?: string;
+};
+
+export function Avatar(props: Props) {
+  const {
+    name,
+    fallbackBackgroundColor,
+    fallbackText,
+    fallbackTextColor,
+    showTooltip = true,
+    size = "md",
+    shape = "circle",
+    src,
+    className = "",
+  } = props;
+
+  // get size details based on the size prop
+  const sizeInfo = getSizeInfo(size);
+
+  return (
+    <Tooltip tooltipContent={fallbackText ?? name ?? "?"} disabled={!showTooltip}>
+      <div
+        className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
+          [sizeInfo.avatarSize]: !isAValidNumber(size),
+        })}
+        style={
+          isAValidNumber(size)
+            ? {
+                height: `${size}px`,
+                width: `${size}px`,
+              }
+            : {}
+        }
+        tabIndex={-1}
+      >
+        {src ? (
+          <img src={src} className={cn("h-full w-full", getBorderRadius(shape), className)} alt={name} />
+        ) : (
+          <div
+            className={cn(
+              sizeInfo.fontSize,
+              "grid h-full w-full place-items-center",
+              getBorderRadius(shape),
+              className
+            )}
+            style={{
+              backgroundColor: fallbackBackgroundColor ?? "#028375",
+              color: fallbackTextColor ?? "#ffffff",
+            }}
+          >
+            {name?.[0]?.toUpperCase() ?? fallbackText ?? "?"}
+          </div>
+        )}
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/packages/ui/src/avatar/helper.tsx b/packages/ui/src/avatar/helper.tsx
new file mode 100644
index 0000000..b72cbcc
--- /dev/null
+++ b/packages/ui/src/avatar/helper.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
+
+/**
+ * Get the size details based on the size prop
+ * @param size The size of the avatar
+ * @returns The size details
+ */
+export const getSizeInfo = (size: TAvatarSize) => {
+  switch (size) {
+    case "sm":
+      return {
+        avatarSize: "h-4 w-4",
+        fontSize: "text-11",
+        spacing: "-space-x-1",
+      };
+    case "md":
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-11",
+        spacing: "-space-x-1",
+      };
+    case "base":
+      return {
+        avatarSize: "h-6 w-6",
+        fontSize: "text-13",
+        spacing: "-space-x-1.5",
+      };
+    case "lg":
+      return {
+        avatarSize: "h-7 w-7",
+        fontSize: "text-13",
+        spacing: "-space-x-1.5",
+      };
+    default:
+      return {
+        avatarSize: "h-5 w-5",
+        fontSize: "text-11",
+        spacing: "-space-x-1",
+      };
+  }
+};
+
+/**
+ * Get the border radius based on the shape prop
+ * @param shape The shape of the avatar
+ * @returns The border radius
+ */
+export const getBorderRadius = (shape: "circle" | "square") => {
+  switch (shape) {
+    case "circle":
+      return "rounded-full";
+    case "square":
+      return "rounded-sm";
+    default:
+      return "rounded-full";
+  }
+};
+
+/**
+ * Check if the value is a valid number
+ * @param value The value to check
+ * @returns Whether the value is a valid number or not
+ */
+export const isAValidNumber = (value: unknown) => typeof value === "number" && !isNaN(value);
diff --git a/packages/ui/src/avatar/index.ts b/packages/ui/src/avatar/index.ts
new file mode 100644
index 0000000..2fbdafe
--- /dev/null
+++ b/packages/ui/src/avatar/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./avatar-group";
+export * from "./avatar";
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
new file mode 100644
index 0000000..a66ac1e
--- /dev/null
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { HomeOutline, SettingsOutline } from "@makeplane/propel/icons";
+import * as React from "react";
+import { Breadcrumbs } from "./breadcrumbs";
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: "UI/Breadcrumbs",
+  component: Breadcrumbs,
+  tags: ["autodocs"],
+};
+
+type TBreadcrumbBlockProps = {
+  href?: string;
+  label?: string;
+  icon?: React.ReactNode;
+  disableTooltip?: boolean;
+};
+
+// TODO: remove this component and use web Link component
+function BreadcrumbBlock(props: TBreadcrumbBlockProps) {
+  const { label, icon, disableTooltip = false } = props;
+
+  return (
+    <>
+      <Breadcrumbs.ItemWrapper label={label} disableTooltip={disableTooltip}>
+        {icon && <div className="flex size-4 items-center justify-center overflow-hidden !text-16">{icon}</div>}
+        {label && <div className="relative line-clamp-1 block max-w-[150px] truncate overflow-hidden">{label}</div>}
+      </Breadcrumbs.ItemWrapper>
+    </>
+  );
+}
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
+      <Breadcrumbs.Item
+        key="current"
+        component={<BreadcrumbBlock href="/projects/current" label="Current Project" />}
+      />,
+    ],
+  },
+};
+
+export const WithLoading: Story = {
+  args: {
+    isLoading: true,
+    children: [
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
+    ],
+  },
+};
+
+export const WithCustomComponent: Story = {
+  args: {
+    children: [
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item
+        key="custom"
+        component={
+          <div className="flex items-center gap-2">
+            <span className="bg-blue-500 size-4 rounded-full" />
+            <span>Custom Component</span>
+          </div>
+        }
+      />,
+    ],
+  },
+};
+
+export const SingleItem: Story = {
+  args: {
+    children: [<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />],
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    children: [
+      <Breadcrumbs.Item
+        key="home"
+        component={<BreadcrumbBlock href="/" label="Home" icon={<HomeOutline className="size-3.5" />} />}
+      />,
+      <Breadcrumbs.Item
+        key="settings"
+        component={
+          <BreadcrumbBlock href="/settings" label="Settings" icon={<SettingsOutline className="size-3.5" />} />
+        }
+        isLast
+      />,
+    ],
+  },
+};
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
new file mode 100644
index 0000000..5ef2b50
--- /dev/null
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "../utils";
+
+type BreadcrumbsProps = {
+  className?: string;
+  children: React.ReactNode;
+  onBack?: () => void;
+  isLoading?: boolean;
+};
+
+export function BreadcrumbItemLoader() {
+  return (
+    <div className="flex h-7 animate-pulse items-center gap-2">
+      <div className="group flex h-full items-center gap-2 rounded-sm px-2 py-1 text-13 font-medium">
+        <span className="h-full w-5 rounded-sm bg-layer-1" />
+        <span className="h-full w-16 rounded-sm bg-layer-1" />
+      </div>
+    </div>
+  );
+}
+
+function Breadcrumbs({ className, children, onBack, isLoading = false }: BreadcrumbsProps) {
+  const [isSmallScreen, setIsSmallScreen] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth <= 640); // Adjust this value as per your requirement
+    };
+
+    window.addEventListener("resize", handleResize);
+    handleResize(); // Call it initially to set the correct state
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const childrenArray = React.Children.toArray(children);
+
+  return (
+    <div className={cn("flex flex-grow items-center gap-0.5 overflow-hidden", className)}>
+      {!isSmallScreen && (
+        <>
+          {childrenArray.map((child, index) => {
+            if (isLoading) {
+              return (
+                <>
+                  <BreadcrumbItemLoader />
+                </>
+              );
+            }
+            if (React.isValidElement<BreadcrumbItemProps>(child)) {
+              return React.cloneElement(child, {
+                isLast: index === childrenArray.length - 1,
+              });
+            }
+            return child;
+          })}
+        </>
+      )}
+
+      {isSmallScreen && childrenArray.length > 1 && (
+        <>
+          <div className="flex items-center gap-2.5 p-1">
+            {onBack && (
+              <span onClick={onBack} className="text-secondary">
+                ...
+              </span>
+            )}
+            <ChevronRightOutline className="h-3.5 w-3.5 flex-shrink-0 text-placeholder" aria-hidden="true" />
+          </div>
+          <div className="flex items-center gap-2.5 p-1">
+            {isLoading ? (
+              <BreadcrumbItemLoader />
+            ) : React.isValidElement(childrenArray[childrenArray.length - 1]) ? (
+              React.cloneElement(childrenArray[childrenArray.length - 1] as React.ReactElement<BreadcrumbItemProps>, {
+                isLast: true,
+              })
+            ) : (
+              childrenArray[childrenArray.length - 1]
+            )}
+          </div>
+        </>
+      )}
+      {isSmallScreen && childrenArray.length === 1 && childrenArray}
+    </div>
+  );
+}
+
+// breadcrumb item
+type BreadcrumbItemProps = {
+  component?: React.ReactNode;
+  showSeparator?: boolean;
+  isLast?: boolean;
+};
+
+function BreadcrumbItem(props: BreadcrumbItemProps) {
+  const { component, showSeparator = true, isLast = false } = props;
+  return (
+    <div className="flex h-6 items-center gap-0.5">
+      {component}
+      {showSeparator && !isLast && <BreadcrumbSeparator />}
+    </div>
+  );
+}
+
+// breadcrumb icon
+type BreadcrumbIconProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function BreadcrumbIcon(props: BreadcrumbIconProps) {
+  const { children, className } = props;
+  return <div className={cn("flex size-4 items-center justify-start overflow-hidden", className)}>{children}</div>;
+}
+
+// breadcrumb label
+type BreadcrumbLabelProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function BreadcrumbLabel(props: BreadcrumbLabelProps) {
+  const { children, className } = props;
+  return (
+    <div className={cn("relative line-clamp-1 block max-w-[150px] truncate overflow-hidden", className)}>
+      {children}
+    </div>
+  );
+}
+
+// breadcrumb separator
+type BreadcrumbSeparatorProps = {
+  className?: string;
+  containerClassName?: string;
+  iconClassName?: string;
+  showDivider?: boolean;
+};
+
+function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
+  const { className, containerClassName, iconClassName, showDivider = false } = props;
+  return (
+    <div className={cn("relative flex h-full items-center justify-center px-1.5 py-1", className)}>
+      {showDivider && <span className="absolute top-0 -left-0.5 h-full w-[1.8px] bg-surface-1" />}
+      <div
+        className={cn(
+          "flex flex-shrink-0 items-center justify-center rounded-sm text-placeholder transition-all",
+          containerClassName
+        )}
+      >
+        <ChevronRightOutline className={cn("h-3.5 w-3.5 flex-shrink-0", iconClassName)} />
+      </div>
+    </div>
+  );
+}
+
+// breadcrumb wrapper
+type BreadcrumbItemWrapperProps = {
+  label?: string;
+  disableTooltip?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  type?: "link" | "text";
+  isLast?: boolean;
+};
+
+function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
+  const { label, disableTooltip = false, children, className, type = "link", isLast = false } = props;
+  return (
+    <Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
+      <div
+        className={cn(
+          "group flex h-full cursor-default items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium",
+          {
+            "text-primary": isLast,
+            "text-tertiary": !isLast,
+            "cursor-pointer hover:bg-layer-transparent-hover hover:text-primary": type === "link" && !isLast,
+          },
+          className
+        )}
+      >
+        {children}
+      </div>
+    </Tooltip>
+  );
+}
+
+Breadcrumbs.Item = BreadcrumbItem;
+Breadcrumbs.Icon = BreadcrumbIcon;
+Breadcrumbs.Label = BreadcrumbLabel;
+Breadcrumbs.Separator = BreadcrumbSeparator;
+Breadcrumbs.ItemWrapper = BreadcrumbItemWrapper;
+
+export { Breadcrumbs, BreadcrumbItem, BreadcrumbIcon, BreadcrumbLabel, BreadcrumbSeparator, BreadcrumbItemWrapper };
diff --git a/packages/ui/src/breadcrumbs/index.ts b/packages/ui/src/breadcrumbs/index.ts
new file mode 100644
index 0000000..a7e0989
--- /dev/null
+++ b/packages/ui/src/breadcrumbs/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./breadcrumbs";
+export * from "./navigation-search-dropdown";
diff --git a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
new file mode 100644
index 0000000..8f270e9
--- /dev/null
+++ b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { useState } from "react";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { ICustomSearchSelectOption } from "@plane/types";
+import { CustomSearchSelect } from "../dropdowns";
+import { cn } from "../utils";
+import { Breadcrumbs } from "./breadcrumbs";
+
+type TBreadcrumbNavigationSearchDropdownProps = {
+  icon?: React.ReactNode;
+  title?: string;
+  selectedItem: string;
+  navigationItems: ICustomSearchSelectOption[];
+  onChange?: (value: string) => void;
+  navigationDisabled?: boolean;
+  isLast?: boolean;
+  handleOnClick?: () => void;
+  disableRootHover?: boolean;
+  shouldTruncate?: boolean;
+};
+
+export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationSearchDropdownProps) {
+  const {
+    icon,
+    title,
+    selectedItem,
+    navigationItems,
+    onChange,
+    navigationDisabled = false,
+    isLast = false,
+    handleOnClick,
+    shouldTruncate = false,
+  } = props;
+  // state
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  return (
+    <CustomSearchSelect
+      onOpen={() => {
+        setIsDropdownOpen(true);
+      }}
+      onClose={() => {
+        setIsDropdownOpen(false);
+      }}
+      options={navigationItems}
+      value={selectedItem}
+      onChange={(value: string) => {
+        if (value !== selectedItem) {
+          onChange?.(value);
+        }
+      }}
+      customButton={
+        <>
+          <Tooltip tooltipContent={title} position="bottom">
+            <button
+              onClick={(e) => {
+                if (!isLast) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleOnClick?.();
+                }
+              }}
+              className={cn(
+                "group flex h-full cursor-pointer items-center gap-2 rounded-sm rounded-r-none px-1.5 py-1 text-13 font-medium text-tertiary",
+                {
+                  "hover:bg-layer-1 hover:text-primary": !isLast,
+                }
+              )}
+            >
+              {shouldTruncate && <div className="flex text-tertiary @4xl:hidden">...</div>}
+              <div
+                className={cn("flex gap-2", {
+                  "hidden items-center gap-2 @4xl:flex": shouldTruncate,
+                })}
+              >
+                {icon && <Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}
+                <Breadcrumbs.Label>{title}</Breadcrumbs.Label>
+              </div>
+            </button>
+          </Tooltip>
+          <Breadcrumbs.Separator
+            className={cn("rounded-r-sm", {
+              "bg-layer-1": isDropdownOpen && !isLast,
+              "hover:bg-layer-1": !isLast,
+            })}
+            containerClassName="p-0"
+            iconClassName={cn("group-hover:rotate-90 hover:text-primary", {
+              "text-primary": isDropdownOpen,
+              "rotate-90": isDropdownOpen || isLast,
+            })}
+            showDivider={!isLast}
+          />
+        </>
+      }
+      disabled={navigationDisabled}
+      className="h-full rounded-sm"
+      customButtonClassName={cn(
+        "group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
+        {
+          "bg-surface-2": isDropdownOpen,
+        }
+      )}
+    />
+  );
+}
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
new file mode 100644
index 0000000..0865507
--- /dev/null
+++ b/packages/ui/src/button/button.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+import { cn } from "../utils";
+import type { TButtonVariant, TButtonSizes } from "./helper";
+import { getIconStyling, getButtonStyling } from "./helper";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: TButtonVariant;
+  size?: TButtonSizes;
+  className?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  appendIcon?: any;
+  prependIcon?: any;
+  children: React.ReactNode;
+}
+
+const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) {
+  const {
+    variant = "primary",
+    size = "md",
+    className = "",
+    type = "button",
+    loading = false,
+    disabled = false,
+    prependIcon = null,
+    appendIcon = null,
+    children,
+    ...rest
+  } = props;
+
+  const buttonStyle = getButtonStyling(variant, size, disabled || loading);
+  const buttonIconStyle = getIconStyling(size);
+
+  return (
+    <button ref={ref} type={type} className={cn(buttonStyle, className)} disabled={disabled || loading} {...rest}>
+      {prependIcon && <div className={buttonIconStyle}>{React.cloneElement(prependIcon, { strokeWidth: 2 })}</div>}
+      {children}
+      {appendIcon && <div className={buttonIconStyle}>{React.cloneElement(appendIcon, { strokeWidth: 2 })}</div>}
+    </button>
+  );
+});
+
+Button.displayName = "plane-ui-button";
+
+export { Button };
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
new file mode 100644
index 0000000..95ac851
--- /dev/null
+++ b/packages/ui/src/button/helper.tsx
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TButtonVariant =
+  | "primary"
+  | "accent-primary"
+  | "outline-primary"
+  | "neutral-primary"
+  | "link-primary"
+  | "danger"
+  | "accent-danger"
+  | "outline-danger"
+  | "link-danger"
+  | "tertiary-danger"
+  | "link-neutral";
+
+export type TButtonSizes = "sm" | "md" | "lg" | "xl";
+
+export interface IButtonStyling {
+  [key: string]: {
+    default: string;
+    hover: string;
+    pressed: string;
+    disabled: string;
+  };
+}
+
+enum buttonSizeStyling {
+  sm = `px-3 py-1.5 font-medium text-11 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
+  md = `px-4 py-1.5 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
+  lg = `px-5 py-2 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
+  xl = `px-5 py-3.5 font-medium text-13 rounded-sm flex items-center gap-1.5 whitespace-nowrap transition-all justify-center`,
+}
+
+enum buttonIconStyling {
+  sm = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  md = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  lg = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0 ",
+}
+
+export const buttonStyling: IButtonStyling = {
+  primary: {
+    default: `text-on-color bg-accent-primary`,
+    hover: `hover:bg-accent-primary/80`,
+    pressed: `focus:text-custom-brand-40 focus:bg-accent-primary/80`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-on-color-disabled`,
+  },
+  "accent-primary": {
+    default: `bg-accent-primary/20 text-accent-primary`,
+    hover: `hover:bg-accent-primary/10 hover:text-accent-secondary`,
+    pressed: `focus:bg-accent-primary/10`,
+    disabled: `cursor-not-allowed !text-accent-primary/60`,
+  },
+  "outline-primary": {
+    default: `text-accent-primary bg-transparent border border-accent-strong`,
+    hover: `hover:bg-accent-primary/20`,
+    pressed: `focus:text-accent-primary focus:bg-accent-primary/30`,
+    disabled: `cursor-not-allowed !text-accent-primary/60 !border-accent-strong-60 `,
+  },
+  "neutral-primary": {
+    default: `text-secondary bg-surface-1 border border-subtle`,
+    hover: `hover:bg-surface-2`,
+    pressed: `focus:text-tertiary focus:bg-surface-2`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
+  },
+  "link-primary": {
+    default: `text-accent-primary bg-surface-1`,
+    hover: `hover:text-accent-secondary`,
+    pressed: `focus:text-accent-primary/80 `,
+    disabled: `cursor-not-allowed !text-accent-primary/60`,
+  },
+  danger: {
+    default: `bg-danger-primary text-on-color`,
+    hover: ` hover:bg-danger-primary-hover`,
+    pressed: `focus:bg-danger-primary-active`,
+    disabled: `cursor-not-allowed bg-layer-disabled! text-disabled!`,
+  },
+  "accent-danger": {
+    default: `text-danger-primary bg-red-50`,
+    hover: `hover:text-danger-primary hover:bg-red-100`,
+    pressed: `focus:text-danger-primary focus:bg-red-100`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
+  },
+  "outline-danger": {
+    default: `bg-layer-2 text-danger-primary border border-danger-strong`,
+    hover: `hover:bg-danger-subtle`,
+    pressed: `focus:bg-danger-subtle-hover`,
+    disabled: `cursor-not-allowed text-disabled! border-subtle-1!`,
+  },
+  "link-danger": {
+    default: `text-danger-primary bg-surface-1`,
+    hover: `hover:text-danger-primary`,
+    pressed: `focus:text-danger-primary`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
+  },
+  "tertiary-danger": {
+    default: `text-danger-primary bg-surface-1 border border-danger-subtle`,
+    hover: `hover:bg-red-50 hover:border-danger-subtle`,
+    pressed: `focus:text-danger-primary`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
+  },
+  "link-neutral": {
+    default: `text-tertiary`,
+    hover: `hover:text-secondary`,
+    pressed: `focus:text-primary`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
+  },
+};
+
+export const getButtonStyling = (variant: TButtonVariant, size: TButtonSizes, disabled: boolean = false): string => {
+  let tempVariant: string = ``;
+  const currentVariant = buttonStyling[variant];
+
+  tempVariant = `${currentVariant.default} ${disabled ? currentVariant.disabled : currentVariant.hover} ${
+    currentVariant.pressed
+  }`;
+
+  let tempSize: string = ``;
+  if (size) tempSize = buttonSizeStyling[size];
+  return `${tempVariant} ${tempSize}`;
+};
+
+export const getIconStyling = (size: TButtonSizes): string => {
+  let icon: string = ``;
+  if (size) icon = buttonIconStyling[size];
+  return icon;
+};
diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx
new file mode 100644
index 0000000..4ee7f7e
--- /dev/null
+++ b/packages/ui/src/card/card.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import type { TCardDirection, TCardSpacing, TCardVariant } from "./helper";
+import { ECardDirection, ECardSpacing, ECardVariant, getCardStyle } from "./helper";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: TCardVariant;
+  spacing?: TCardSpacing;
+  direction?: TCardDirection;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Card = React.forwardRef(function Card(props: CardProps, ref: React.ForwardedRef<HTMLDivElement>) {
+  const {
+    variant = ECardVariant.WITH_SHADOW,
+    direction = ECardDirection.COLUMN,
+    className = "",
+    spacing = ECardSpacing.LG,
+    children,
+    ...rest
+  } = props;
+
+  const style = getCardStyle(variant, spacing, direction);
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+Card.displayName = "plane-ui-card";
+
+export { Card, ECardVariant, ECardSpacing, ECardDirection };
diff --git a/packages/ui/src/card/helper.tsx b/packages/ui/src/card/helper.tsx
new file mode 100644
index 0000000..cc914c5
--- /dev/null
+++ b/packages/ui/src/card/helper.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum ECardVariant {
+  WITHOUT_SHADOW = "without-shadow",
+  WITH_SHADOW = "with-shadow",
+}
+export enum ECardDirection {
+  ROW = "row",
+  COLUMN = "column",
+}
+export enum ECardSpacing {
+  SM = "sm",
+  LG = "lg",
+}
+export type TCardVariant = ECardVariant.WITHOUT_SHADOW | ECardVariant.WITH_SHADOW;
+export type TCardDirection = ECardDirection.ROW | ECardDirection.COLUMN;
+export type TCardSpacing = ECardSpacing.SM | ECardSpacing.LG;
+
+export interface ICardProperties {
+  [key: string]: string;
+}
+
+const DEFAULT_STYLE = "bg-surface-1 rounded-lg border-[0.5px] border-subtle w-full flex flex-col";
+export const containerStyle: ICardProperties = {
+  [ECardVariant.WITHOUT_SHADOW]: "",
+  [ECardVariant.WITH_SHADOW]: "hover:shadow-raised-200 duration-300",
+};
+export const spacings = {
+  [ECardSpacing.SM]: "p-4",
+  [ECardSpacing.LG]: "p-6",
+};
+export const directions = {
+  [ECardDirection.ROW]: "flex-row space-x-3",
+  [ECardDirection.COLUMN]: "flex-col space-y-3",
+};
+export const getCardStyle = (variant: TCardVariant, spacing: TCardSpacing, direction: TCardDirection) =>
+  DEFAULT_STYLE + " " + directions[direction] + " " + containerStyle[variant] + " " + spacings[spacing];
diff --git a/packages/ui/src/card/index.ts b/packages/ui/src/card/index.ts
new file mode 100644
index 0000000..4260f85
--- /dev/null
+++ b/packages/ui/src/card/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./card";
diff --git a/packages/ui/src/collapsible/collapsible-button.tsx b/packages/ui/src/collapsible/collapsible-button.tsx
new file mode 100644
index 0000000..b2b1c44
--- /dev/null
+++ b/packages/ui/src/collapsible/collapsible-button.tsx
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { DropdownOutline } from "@makeplane/propel/icons";
+import { cn } from "../utils";
+
+type Props = {
+  isOpen: boolean;
+  title: React.ReactNode;
+  hideChevron?: boolean;
+  indicatorElement?: React.ReactNode;
+  actionItemElement?: React.ReactNode;
+  className?: string;
+  titleClassName?: string;
+  ChevronIcon?: React.FC<ISvgIcons>;
+};
+
+export function CollapsibleButton(props: Props) {
+  const {
+    isOpen,
+    title,
+    hideChevron = false,
+    indicatorElement,
+    actionItemElement,
+    className = "",
+    titleClassName = "",
+    ChevronIcon = DropdownOutline,
+  } = props;
+  return (
+    <div className={cn("flex h-12 items-center justify-between gap-3 border-b border-subtle px-2.5 py-3", className)}>
+      <div className="flex items-center gap-3.5">
+        <div className="flex items-center gap-3">
+          {!hideChevron && (
+            <ChevronIcon
+              className={cn("size-2 text-tertiary duration-300 hover:text-secondary", {
+                "-rotate-90": !isOpen,
+              })}
+            />
+          )}
+          <span className={cn("text-14 font-medium text-primary", titleClassName)}>{title}</span>
+        </div>
+        {indicatorElement && indicatorElement}
+      </div>
+      {actionItemElement && isOpen && actionItemElement}
+    </div>
+  );
+}
diff --git a/packages/ui/src/collapsible/collapsible.tsx b/packages/ui/src/collapsible/collapsible.tsx
new file mode 100644
index 0000000..b440d1d
--- /dev/null
+++ b/packages/ui/src/collapsible/collapsible.tsx
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Disclosure, Transition } from "@headlessui/react";
+import React, { useState, useEffect, useCallback } from "react";
+
+export type TCollapsibleProps = {
+  title: string | React.ReactNode;
+  children: React.ReactNode;
+  buttonRef?: React.RefObject<HTMLButtonElement | null>;
+  className?: string;
+  buttonClassName?: string;
+  isOpen?: boolean;
+  onToggle?: () => void;
+  defaultOpen?: boolean;
+};
+
+export function Collapsible(props: TCollapsibleProps) {
+  const { title, children, buttonRef, className, buttonClassName, isOpen, onToggle, defaultOpen } = props;
+  // state
+  const [localIsOpen, setLocalIsOpen] = useState<boolean>(isOpen || defaultOpen ? true : false);
+
+  useEffect(() => {
+    if (isOpen !== undefined) {
+      setLocalIsOpen(isOpen);
+    }
+  }, [isOpen]);
+
+  // handlers
+  const handleOnClick = useCallback(() => {
+    if (isOpen !== undefined) {
+      if (onToggle) onToggle();
+    } else {
+      setLocalIsOpen((prev) => !prev);
+    }
+  }, [isOpen, onToggle]);
+
+  return (
+    <Disclosure as="div" className={className}>
+      <Disclosure.Button ref={buttonRef} className={buttonClassName} onClick={handleOnClick}>
+        {title}
+      </Disclosure.Button>
+      <Transition
+        as="div"
+        show={localIsOpen}
+        enter="transition-all duration-300 ease-in-out"
+        enterFrom="grid-rows-[0fr] opacity-0"
+        enterTo="grid-rows-[1fr] opacity-100"
+        leave="transition-all duration-300 ease-in-out"
+        leaveFrom="grid-rows-[1fr] opacity-100"
+        leaveTo="grid-rows-[0fr] opacity-0"
+        className="grid overflow-hidden"
+      >
+        <Disclosure.Panel static className="min-h-0">
+          {children}
+        </Disclosure.Panel>
+      </Transition>
+    </Disclosure>
+  );
+}
diff --git a/packages/ui/src/collapsible/index.ts b/packages/ui/src/collapsible/index.ts
new file mode 100644
index 0000000..e1a798d
--- /dev/null
+++ b/packages/ui/src/collapsible/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./collapsible";
+export * from "./collapsible-button";
diff --git a/packages/ui/src/content-wrapper/content-wrapper.tsx b/packages/ui/src/content-wrapper/content-wrapper.tsx
new file mode 100644
index 0000000..e69011c
--- /dev/null
+++ b/packages/ui/src/content-wrapper/content-wrapper.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { Row } from "../row";
+import type { TRowVariant } from "../row/helper";
+import { ERowVariant } from "../row/helper";
+import { cn } from "../utils";
+
+export interface ContentWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: TRowVariant;
+  className?: string;
+  children: React.ReactNode;
+}
+const DEFAULT_STYLE = "flex flex-col vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto";
+
+const ContentWrapper = React.forwardRef(function ContentWrapper(
+  props: ContentWrapperProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
+
+  return (
+    <Row
+      ref={ref}
+      variant={variant}
+      className={cn(
+        DEFAULT_STYLE,
+        {
+          "py-page-y": variant === ERowVariant.REGULAR,
+        },
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Row>
+  );
+});
+
+ContentWrapper.displayName = "plane-ui-wrapper";
+
+export { ContentWrapper };
diff --git a/packages/ui/src/content-wrapper/index.ts b/packages/ui/src/content-wrapper/index.ts
new file mode 100644
index 0000000..f80f269
--- /dev/null
+++ b/packages/ui/src/content-wrapper/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./content-wrapper";
diff --git a/packages/ui/src/control-link/control-link.tsx b/packages/ui/src/control-link/control-link.tsx
new file mode 100644
index 0000000..39249fb
--- /dev/null
+++ b/packages/ui/src/control-link/control-link.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+
+export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  href: string;
+  onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  children: React.ReactNode;
+  target?: string;
+  disabled?: boolean;
+  className?: string;
+  draggable?: boolean;
+};
+
+export const ControlLink = React.forwardRef(function ControlLink(
+  props: TControlLink,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  const { href, onClick, children, target = "_blank", disabled = false, className, draggable = false, ...rest } = props;
+  const LEFT_CLICK_EVENT_CODE = 0;
+
+  const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    const clickCondition = (event.metaKey || event.ctrlKey) && event.button === LEFT_CLICK_EVENT_CODE;
+    if (!clickCondition) {
+      event.preventDefault();
+      onClick(event);
+    }
+  };
+
+  // if disabled but still has a ref or a className then it has to be rendered without a href
+  if (disabled && (ref || className))
+    return (
+      <a ref={ref} className={className}>
+        {children}
+      </a>
+    );
+
+  // else if just disabled return without the parent wrapper
+  if (disabled) return <>{children}</>;
+
+  return (
+    <a
+      href={href}
+      target={target}
+      onClick={handleOnClick}
+      {...rest}
+      ref={ref}
+      className={className}
+      draggable={draggable}
+    >
+      {children}
+    </a>
+  );
+});
+
+ControlLink.displayName = "ControlLink";
diff --git a/packages/ui/src/control-link/index.ts b/packages/ui/src/control-link/index.ts
new file mode 100644
index 0000000..aad6124
--- /dev/null
+++ b/packages/ui/src/control-link/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./control-link";
diff --git a/packages/ui/src/drag-handle.tsx b/packages/ui/src/drag-handle.tsx
new file mode 100644
index 0000000..dc67d08
--- /dev/null
+++ b/packages/ui/src/drag-handle.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { MoreVerticalOutline } from "@makeplane/propel/icons";
+import React, { forwardRef } from "react";
+// helpers
+import { cn } from "./utils";
+
+interface IDragHandle {
+  className?: string;
+  disabled?: boolean;
+}
+
+export const DragHandle = forwardRef(function DragHandle(
+  props: IDragHandle,
+  ref: React.ForwardedRef<HTMLButtonElement | null>
+) {
+  const { className, disabled = false } = props;
+
+  if (disabled) {
+    return <div className="h-[18px] w-[14px]" />;
+  }
+
+  return (
+    <button
+      type="button"
+      className={cn("flex flex-shrink-0 cursor-grab rounded-sm bg-surface-2 p-0.5 text-secondary", className)}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      ref={ref}
+    >
+      <MoreVerticalOutline className="h-3.5 w-3.5 text-placeholder" />
+      <MoreVerticalOutline className="-ml-5 h-3.5 w-3.5 text-placeholder" />
+    </button>
+  );
+});
+
+DragHandle.displayName = "DragHandle";
diff --git a/packages/ui/src/drop-indicator.tsx b/packages/ui/src/drop-indicator.tsx
new file mode 100644
index 0000000..007b324
--- /dev/null
+++ b/packages/ui/src/drop-indicator.tsx
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { cn } from "./utils";
+
+type Props = {
+  isVisible: boolean;
+  classNames?: string;
+};
+
+export function DropIndicator(props: Props) {
+  const { isVisible, classNames = "" } = props;
+
+  return (
+    <div
+      className={cn(
+        `relative block h-[2px] w-full before:relative before:top-[-2px] before:left-0 before:block before:h-[6px] before:w-[6px] before:rounded-sm after:relative after:top-[-8px] after:left-[calc(100%-6px)] after:block after:h-[6px] after:w-[6px] after:rounded-sm`,
+        {
+          "bg-accent-primary before:bg-accent-primary after:bg-accent-primary": isVisible,
+        },
+        classNames
+      )}
+    />
+  );
+}
diff --git a/packages/ui/src/dropdown/Readme.md b/packages/ui/src/dropdown/Readme.md
new file mode 100644
index 0000000..4c9bad8
--- /dev/null
+++ b/packages/ui/src/dropdown/Readme.md
@@ -0,0 +1,48 @@
+Below is a detailed list of the props included:
+
+### Root Props
+
+- value: string | string[]; - Current selected value.
+- onChange: (value: string | string []) => void; - Callback function for handling value changes.
+- options: TDropdownOption[] | undefined; - Array of options.
+- onOpen?: () => void; - Callback function triggered when the dropdown opens.
+- onClose?: () => void; - Callback function triggered when the dropdown closes.
+- containerClassName?: (isOpen: boolean) => string; - Function to return the class name for the container based on the open state.
+- tabIndex?: number; - Sets the tab index for the dropdown.
+- placement?: Placement; - Determines the placement of the dropdown (e.g., top, bottom, left, right).
+- disabled?: boolean; - Disables the dropdown if set to true.
+
+---
+
+### Button Props
+
+- buttonContent?: (isOpen: boolean) => React.ReactNode; - Function to render the content of the button based on the open state.
+- buttonContainerClassName?: string; - Class name for the button container.
+- buttonClassName?: string; - Class name for the button itself.
+
+---
+
+### Input Props
+
+- disableSearch?: boolean; - Disables the search input if set to true.
+- inputPlaceholder?: string; - Placeholder text for the search input.
+- inputClassName?: string; - Class name for the search input.
+- inputIcon?: React.ReactNode; - Icon to be displayed in the search input.
+- inputContainerClassName?: string; - Class name for the search input container.
+
+---
+
+### Options Props
+
+- keyExtractor: (option: TDropdownOption) => string; - Function to extract the key from each option.
+- optionsContainerClassName?: string; - Class name for the options container.
+- queryArray: string[]; - Array of strings to be used for querying the options.
+- sortByKey: string; - Key to sort the options by.
+- firstItem?: (optionValue: string) => boolean; - Function to determine if an option should be the first item.
+- renderItem?: ({ value, selected }: { value: string; selected: boolean }) => React.ReactNode; - Function to render each option.
+- loader?: React.ReactNode; - Loader element to be displayed while options are being loaded.
+- disableSorting?: boolean; - Disables sorting of the options if set to true.
+
+---
+
+These properties offer extensive control over the dropdown's behavior and presentation, making it a highly versatile component suitable for various scenarios.
diff --git a/packages/ui/src/dropdown/common/button.tsx b/packages/ui/src/dropdown/common/button.tsx
new file mode 100644
index 0000000..fa47da5
--- /dev/null
+++ b/packages/ui/src/dropdown/common/button.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Combobox } from "@headlessui/react";
+import React, { Fragment } from "react";
+// helper
+import { cn } from "../../utils";
+import type { IMultiSelectDropdownButton, ISingleSelectDropdownButton } from "../dropdown";
+
+export function DropdownButton(props: IMultiSelectDropdownButton | ISingleSelectDropdownButton) {
+  const {
+    isOpen,
+    buttonContent,
+    buttonClassName,
+    buttonContainerClassName,
+    handleOnClick,
+    value,
+    setReferenceElement,
+    disabled,
+  } = props;
+  return (
+    <Combobox.Button as={Fragment}>
+      <button
+        ref={setReferenceElement}
+        type="button"
+        className={cn(
+          "clickable block h-full max-w-full outline-none",
+          {
+            "cursor-not-allowed text-secondary": disabled,
+            "cursor-pointer": !disabled,
+          },
+          buttonContainerClassName
+        )}
+        onClick={handleOnClick}
+      >
+        {buttonContent ? <>{buttonContent(isOpen, value)}</> : <span className={cn("", buttonClassName)}>{value}</span>}
+      </button>
+    </Combobox.Button>
+  );
+}
diff --git a/packages/ui/src/dropdown/common/index.ts b/packages/ui/src/dropdown/common/index.ts
new file mode 100644
index 0000000..e132681
--- /dev/null
+++ b/packages/ui/src/dropdown/common/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./input-search";
+export * from "./button";
+export * from "./options";
+export * from "./loader";
diff --git a/packages/ui/src/dropdown/common/input-search.tsx b/packages/ui/src/dropdown/common/input-search.tsx
new file mode 100644
index 0000000..c526024
--- /dev/null
+++ b/packages/ui/src/dropdown/common/input-search.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Combobox } from "@headlessui/react";
+import React, { useEffect, useRef } from "react";
+import { SearchOutline } from "@makeplane/propel/icons";
+// helpers
+import { cn } from "../../utils";
+
+interface IInputSearch {
+  isOpen: boolean;
+  query: string;
+  updateQuery: (query: string) => void;
+  inputIcon?: React.ReactNode;
+  inputContainerClassName?: string;
+  inputClassName?: string;
+  inputPlaceholder?: string;
+  isMobile: boolean;
+}
+
+export function InputSearch(props: IInputSearch) {
+  const { isOpen, query, updateQuery, inputIcon, inputContainerClassName, inputClassName, inputPlaceholder, isMobile } =
+    props;
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      updateQuery("");
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen && !isMobile) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      inputRef.current && inputRef.current.focus();
+    }
+  }, [isOpen, isMobile]);
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2",
+        inputContainerClassName
+      )}
+    >
+      {inputIcon ? <>{inputIcon}</> : <SearchOutline className="h-4 w-4 text-tertiary" aria-hidden="true" />}
+      <Combobox.Input
+        as="input"
+        ref={inputRef}
+        className={cn(
+          "w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none",
+          inputClassName
+        )}
+        value={query}
+        onChange={(e) => updateQuery(e.target.value)}
+        placeholder={inputPlaceholder ?? "Search"}
+        onKeyDown={searchInputKeyDown}
+      />
+    </div>
+  );
+}
diff --git a/packages/ui/src/dropdown/common/loader.tsx b/packages/ui/src/dropdown/common/loader.tsx
new file mode 100644
index 0000000..67e8dc2
--- /dev/null
+++ b/packages/ui/src/dropdown/common/loader.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+import React from "react";
+
+export function DropdownOptionsLoader() {
+  return (
+    <div className="flex animate-pulse flex-col gap-1">
+      {range(6).map((index) => (
+        <div key={index} className="flex h-[1.925rem] w-full rounded-sm bg-surface-2 px-1 py-1.5" />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/ui/src/dropdown/common/options.tsx b/packages/ui/src/dropdown/common/options.tsx
new file mode 100644
index 0000000..d161e25
--- /dev/null
+++ b/packages/ui/src/dropdown/common/options.tsx
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Combobox } from "@headlessui/react";
+
+import React from "react";
+import { TickOutline } from "@makeplane/propel/icons";
+// helpers
+import { cn } from "../../utils";
+// types
+import type { IMultiSelectDropdownOptions, ISingleSelectDropdownOptions } from "../dropdown";
+// components
+import { DropdownOptionsLoader, InputSearch } from ".";
+
+export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSelectDropdownOptions) {
+  const {
+    isOpen,
+    query,
+    setQuery,
+    inputIcon,
+    inputPlaceholder,
+    inputClassName,
+    inputContainerClassName,
+    disableSearch,
+    keyExtractor,
+    options,
+    handleClose,
+    renderItem,
+    loader,
+    isMobile = false,
+  } = props;
+  return (
+    <>
+      {!disableSearch && (
+        <InputSearch
+          isOpen={isOpen}
+          query={query}
+          updateQuery={(query) => setQuery(query)}
+          inputIcon={inputIcon}
+          inputPlaceholder={inputPlaceholder}
+          inputClassName={inputClassName}
+          inputContainerClassName={inputContainerClassName}
+          isMobile={isMobile}
+        />
+      )}
+      <div className={cn("max-h-48 overflow-y-scroll", !disableSearch && "mt-2")}>
+        <>
+          {options ? (
+            options.length > 0 ? (
+              <ul className="space-y-1">
+                {options?.map((option) => (
+                  <Combobox.Option
+                    as="li"
+                    key={keyExtractor(option)}
+                    value={keyExtractor(option)}
+                    disabled={option.disabled}
+                    className={({ active, selected }) =>
+                      cn(
+                        "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                        {
+                          "bg-layer-1": active,
+                          "text-primary": selected,
+                          "text-secondary": !selected,
+                        },
+                        option.className && option.className({ active, selected })
+                      )
+                    }
+                    onClick={handleClose}
+                  >
+                    {({ selected }) => (
+                      <>
+                        {renderItem ? (
+                          <>{renderItem({ value: keyExtractor(option), selected, disabled: option.disabled })}</>
+                        ) : (
+                          <>
+                            <span className="flex-grow truncate">{option.value}</span>
+                            {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                          </>
+                        )}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))}
+              </ul>
+            ) : (
+              <p className="px-1.5 py-1 text-placeholder italic">No matching results</p>
+            )
+          ) : loader ? (
+            <> {loader} </>
+          ) : (
+            <DropdownOptionsLoader />
+          )}
+        </>
+      </div>
+    </>
+  );
+}
diff --git a/packages/ui/src/dropdown/dropdown.d.ts b/packages/ui/src/dropdown/dropdown.d.ts
new file mode 100644
index 0000000..40ed644
--- /dev/null
+++ b/packages/ui/src/dropdown/dropdown.d.ts
@@ -0,0 +1,108 @@
+import type { Placement } from "@popperjs/core";
+
+export interface IDropdown {
+  // root props
+  onOpen?: () => void;
+  onClose?: () => void;
+  containerClassName?: string | ((isOpen: boolean) => string);
+  tabIndex?: number;
+  placement?: Placement;
+  disabled?: boolean;
+
+  // button props
+  buttonContent?: (isOpen: boolean, value: string | string[] | undefined) => React.ReactNode;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+
+  // input props
+  disableSearch?: boolean;
+  inputPlaceholder?: string;
+  inputClassName?: string;
+  inputIcon?: React.ReactNode;
+  inputContainerClassName?: string;
+
+  // options props
+  keyExtractor: (option: TDropdownOption) => string;
+  optionsContainerClassName?: string;
+  queryArray?: string[];
+  sortByKey?: string;
+  firstItem?: (optionValue: string) => boolean;
+  renderItem?: ({
+    value,
+    selected,
+    disabled,
+  }: {
+    value: string;
+    selected: boolean;
+    disabled?: boolean;
+  }) => React.ReactNode;
+  loader?: React.ReactNode;
+  disableSorting?: boolean;
+}
+
+export interface TDropdownOption {
+  data: any;
+  value: string;
+  className?: ({ active, selected }: { active: boolean; selected?: boolean }) => string;
+  disabled?: boolean;
+}
+
+export interface IMultiSelectDropdown extends IDropdown {
+  value: string[];
+  onChange: (value: string[]) => void;
+  options: TDropdownOption[] | undefined;
+}
+
+export interface ISingleSelectDropdown extends IDropdown {
+  value: string;
+  onChange: (value: string) => void;
+  options: TDropdownOption[] | undefined;
+}
+
+export interface IDropdownButton {
+  isOpen: boolean;
+  buttonContent?: (isOpen: boolean, value: string | string[] | undefined) => React.ReactNode;
+  buttonClassName?: string;
+  buttonContainerClassName?: string;
+  handleOnClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  setReferenceElement: (element: HTMLButtonElement | null) => void;
+  disabled?: boolean;
+}
+
+export interface IMultiSelectDropdownButton extends IDropdownButton {
+  value: string[];
+}
+
+export interface ISingleSelectDropdownButton extends IDropdownButton {
+  value: string;
+}
+
+export interface IDropdownOptions {
+  isOpen: boolean;
+  query: string;
+  setQuery: (query: string) => void;
+
+  inputPlaceholder?: string;
+  inputClassName?: string;
+  inputIcon?: React.ReactNode;
+  inputContainerClassName?: string;
+  disableSearch?: boolean;
+
+  handleClose?: () => void;
+
+  keyExtractor: (option: TDropdownOption) => string;
+  renderItem:
+    | (({ value, selected, disabled }: { value: string; selected: boolean; disabled?: boolean }) => React.ReactNode)
+    | undefined;
+  options: TDropdownOption[] | undefined;
+  loader?: React.ReactNode;
+  isMobile?: boolean;
+}
+
+export interface IMultiSelectDropdownOptions extends IDropdownOptions {
+  value: string[];
+}
+
+export interface ISingleSelectDropdownOptions extends IDropdownOptions {
+  value: string;
+}
diff --git a/packages/ui/src/dropdown/index.ts b/packages/ui/src/dropdown/index.ts
new file mode 100644
index 0000000..aaa9197
--- /dev/null
+++ b/packages/ui/src/dropdown/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./single-select";
diff --git a/packages/ui/src/dropdown/single-select.tsx b/packages/ui/src/dropdown/single-select.tsx
new file mode 100644
index 0000000..3603512
--- /dev/null
+++ b/packages/ui/src/dropdown/single-select.tsx
@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Combobox } from "@headlessui/react";
+import { sortBy } from "lodash-es";
+import React, { useMemo, useRef, useState } from "react";
+import { usePopper } from "react-popper";
+// plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
+// local imports
+import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
+import { cn } from "../utils";
+import { DropdownButton } from "./common";
+import { DropdownOptions } from "./common/options";
+import type { ISingleSelectDropdown } from "./dropdown";
+
+export function Dropdown(props: ISingleSelectDropdown) {
+  const {
+    value,
+    onChange,
+    options,
+    onOpen,
+    onClose,
+    containerClassName,
+    tabIndex,
+    placement,
+    disabled,
+    buttonContent,
+    buttonContainerClassName,
+    buttonClassName,
+    disableSearch,
+    inputPlaceholder,
+    inputClassName,
+    inputIcon,
+    inputContainerClassName,
+    keyExtractor,
+    optionsContainerClassName,
+    queryArray,
+    sortByKey,
+    firstItem,
+    renderItem,
+    loader = false,
+    disableSorting,
+  } = props;
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  // handlers
+  const toggleDropdown = () => {
+    if (!isOpen) onOpen?.();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose?.();
+  };
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
+    onClose?.();
+    setQuery?.("");
+  };
+
+  // options
+  const sortedOptions = useMemo(() => {
+    if (!options) return undefined;
+
+    const filteredOptions = queryArray
+      ? (options || []).filter((options) => {
+          const queryString = queryArray.map((query) => options.data[query]).join(" ");
+          return queryString.toLowerCase().includes(query.toLowerCase());
+        })
+      : options;
+
+    if (disableSorting || !sortByKey) return filteredOptions;
+
+    return sortBy(filteredOptions, [
+      (option) => firstItem && firstItem(option.data[option.value]),
+      (option) => !(value ?? []).includes(option.data[option.value]),
+      () => sortByKey && sortByKey.toLowerCase(),
+    ]);
+  }, [query, options]);
+
+  // hooks
+  const handleKeyDown = useDropdownKeyPressed(toggleDropdown, handleClose);
+
+  useOutsideClickDetector(dropdownRef, handleClose, true);
+
+  return (
+    <Combobox
+      as="div"
+      ref={dropdownRef}
+      value={value}
+      // Headless UI v2 widens a non-multiple Combobox to `T | null`. v1 never emitted
+      // null, so drop it here and keep this component's non-nullable onChange contract.
+      onChange={(selected) => {
+        if (selected !== null) onChange(selected);
+      }}
+      className={cn(
+        "h-full",
+        typeof containerClassName === "function" ? containerClassName(isOpen) : containerClassName
+      )}
+      tabIndex={tabIndex}
+      onKeyDown={handleKeyDown}
+      disabled={disabled}
+    >
+      <DropdownButton
+        value={value}
+        isOpen={isOpen}
+        setReferenceElement={setReferenceElement}
+        handleOnClick={handleOnClick}
+        buttonContent={buttonContent}
+        buttonClassName={buttonClassName}
+        buttonContainerClassName={buttonContainerClassName}
+        disabled={disabled}
+      />
+      {isOpen && (
+        <Combobox.Options as="ul" className="fixed z-10" static>
+          <div
+            className={cn(
+              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none",
+              optionsContainerClassName
+            )}
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <DropdownOptions
+              isOpen={isOpen}
+              query={query}
+              setQuery={setQuery}
+              inputIcon={inputIcon}
+              inputPlaceholder={inputPlaceholder}
+              inputClassName={inputClassName}
+              inputContainerClassName={inputContainerClassName}
+              disableSearch={disableSearch}
+              keyExtractor={keyExtractor}
+              options={sortedOptions}
+              value={value}
+              renderItem={renderItem}
+              loader={loader}
+              handleClose={handleClose}
+            />
+          </div>
+        </Combobox.Options>
+      )}
+    </Combobox>
+  );
+}
diff --git a/packages/ui/src/dropdowns/combo-box.tsx b/packages/ui/src/dropdowns/combo-box.tsx
new file mode 100644
index 0000000..e3bde4c
--- /dev/null
+++ b/packages/ui/src/dropdowns/combo-box.tsx
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Combobox } from "@headlessui/react";
+import type { ElementType, KeyboardEventHandler, ReactNode, Ref } from "react";
+import React, { Fragment, forwardRef, useEffect, useRef, useState } from "react";
+
+type Props = {
+  as?: ElementType | undefined;
+  ref?: Ref<HTMLElement> | undefined;
+  tabIndex?: number | undefined;
+  className?: string | undefined;
+  value?: string | string[] | null;
+  onChange?: (value: any) => void;
+  disabled?: boolean | undefined;
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined;
+  multiple?: boolean;
+  renderByDefault?: boolean;
+  button: ReactNode;
+  children: ReactNode;
+};
+
+const ComboDropDown = forwardRef(function ComboDropDown(props: Props, ref) {
+  const { button, renderByDefault = true, children, ...rest } = props;
+
+  const dropDownButtonRef = useRef<HTMLDivElement | null>(null);
+
+  const [shouldRender, setShouldRender] = useState(renderByDefault);
+
+  const onHover = () => {
+    setShouldRender(true);
+  };
+
+  useEffect(() => {
+    const element = dropDownButtonRef.current as any;
+
+    if (!element) return;
+
+    element.addEventListener("mouseenter", onHover);
+
+    return () => {
+      element?.removeEventListener("mouseenter", onHover);
+    };
+  }, [dropDownButtonRef, shouldRender]);
+
+  if (!shouldRender) {
+    return (
+      <div ref={dropDownButtonRef} className="flex h-full items-center">
+        {button}
+      </div>
+    );
+  }
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    <Combobox {...rest} ref={ref}>
+      <Combobox.Button as={Fragment}>{button}</Combobox.Button>
+      {children}
+    </Combobox>
+  );
+});
+
+ComboDropDown.displayName = "ComboDropDown";
+
+export { ComboDropDown };
diff --git a/packages/ui/src/dropdowns/context-menu/index.ts b/packages/ui/src/dropdowns/context-menu/index.ts
new file mode 100644
index 0000000..b405420
--- /dev/null
+++ b/packages/ui/src/dropdowns/context-menu/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./item";
+export * from "./root";
diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/ui/src/dropdowns/context-menu/item.tsx
new file mode 100644
index 0000000..2c50fd5
--- /dev/null
+++ b/packages/ui/src/dropdowns/context-menu/item.tsx
@@ -0,0 +1,249 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useState, useRef, useContext } from "react";
+import { usePopper } from "react-popper";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
+// helpers
+import { cn } from "../../utils";
+// types
+import type { TContextMenuItem } from "./root";
+import { ContextMenuContext, Portal } from "./root";
+
+type ContextMenuItemProps = {
+  handleActiveItem: () => void;
+  handleClose: () => void;
+  isActive: boolean;
+  item: TContextMenuItem;
+};
+
+export function ContextMenuItem(props: ContextMenuItemProps) {
+  const { handleActiveItem, handleClose, isActive, item } = props;
+
+  // Nested menu state
+  const [isNestedOpen, setIsNestedOpen] = useState(false);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [activeNestedIndex, setActiveNestedIndex] = useState<number>(0);
+  const nestedMenuRef = useRef<HTMLDivElement | null>(null);
+
+  const contextMenuContext = useContext(ContextMenuContext);
+  const hasNestedItems = item.nestedMenuItems && item.nestedMenuItems.length > 0;
+  const renderedNestedItems = item.nestedMenuItems?.filter((nestedItem) => nestedItem.shouldRender !== false) || [];
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "right-start",
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 4],
+        },
+      },
+      {
+        name: "flip",
+        options: {
+          fallbackPlacements: ["left-start", "right-end", "left-end", "top-start", "bottom-start"],
+        },
+      },
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 8,
+        },
+      },
+    ],
+  });
+
+  const closeNestedMenu = React.useCallback(() => {
+    setIsNestedOpen(false);
+    setActiveNestedIndex(0);
+  }, []);
+
+  // Register this nested menu with the main context
+  React.useEffect(() => {
+    if (contextMenuContext && hasNestedItems) {
+      return contextMenuContext.registerSubmenu(closeNestedMenu);
+    }
+  }, [contextMenuContext, hasNestedItems, closeNestedMenu]);
+
+  const handleItemClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (hasNestedItems) {
+      // Toggle nested menu
+      if (!isNestedOpen && contextMenuContext) {
+        contextMenuContext.closeAllSubmenus();
+      }
+      setIsNestedOpen(!isNestedOpen);
+    } else {
+      // Execute action for regular items
+      item.action();
+      if (item.closeOnClick !== false) handleClose();
+    }
+  };
+
+  const handleMouseEnter = () => {
+    handleActiveItem();
+
+    if (hasNestedItems) {
+      // Close other submenus and open this one
+      if (contextMenuContext) {
+        contextMenuContext.closeAllSubmenus();
+      }
+      setIsNestedOpen(true);
+    }
+  };
+
+  const handleNestedItemClick = (nestedItem: TContextMenuItem, e?: React.MouseEvent) => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    nestedItem.action();
+    if (nestedItem.closeOnClick !== false) {
+      handleClose(); // Close the entire context menu
+    }
+  };
+
+  // Handle keyboard navigation for nested items
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!isNestedOpen || !hasNestedItems) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveNestedIndex((prev) => (prev + 1) % renderedNestedItems.length);
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveNestedIndex((prev) => (prev - 1 + renderedNestedItems.length) % renderedNestedItems.length);
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const nestedItem = renderedNestedItems[activeNestedIndex];
+        if (!nestedItem.disabled) {
+          handleNestedItemClick(nestedItem);
+        }
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        closeNestedMenu();
+      }
+    };
+
+    if (isNestedOpen && nestedMenuRef.current) {
+      const menuElement = nestedMenuRef.current;
+      menuElement.addEventListener("keydown", handleKeyDown);
+      // Ensure the menu can receive keyboard events
+      menuElement.setAttribute("tabindex", "-1");
+      menuElement.focus();
+      return () => {
+        menuElement.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [isNestedOpen, activeNestedIndex, renderedNestedItems, hasNestedItems, closeNestedMenu]);
+
+  if (item.shouldRender === false) return null;
+
+  return (
+    <>
+      <button
+        ref={setReferenceElement}
+        type="button"
+        className={cn(
+          "flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-11 text-secondary select-none",
+          {
+            "bg-layer-transparent-hover": isActive,
+            "text-placeholder": item.disabled,
+          },
+          item.className
+        )}
+        onClick={handleItemClick}
+        onMouseEnter={handleMouseEnter}
+        disabled={item.disabled}
+      >
+        {item.customContent ?? (
+          <>
+            {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+            <div className="flex-1">
+              <h5>{item.title}</h5>
+              {item.description && (
+                <p
+                  className={cn("whitespace-pre-line text-tertiary", {
+                    "text-placeholder": item.disabled,
+                  })}
+                >
+                  {item.description}
+                </p>
+              )}
+            </div>
+            {hasNestedItems && <ChevronRightOutline className="h-3 w-3 flex-shrink-0" />}
+          </>
+        )}
+      </button>
+
+      {/* Nested Menu */}
+      {hasNestedItems && isNestedOpen && (
+        <Portal container={contextMenuContext?.portalContainer}>
+          <div
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+            className="fixed z-[35] min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11"
+            data-context-submenu="true"
+          >
+            <div ref={nestedMenuRef} className="vertical-scrollbar scrollbar-sm max-h-72 overflow-y-scroll">
+              {renderedNestedItems.map((nestedItem, index) => (
+                <button
+                  key={nestedItem.key}
+                  type="button"
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-sm px-1 py-1.5 text-left text-11 text-secondary select-none",
+                    {
+                      "bg-layer-transparent-hover": index === activeNestedIndex,
+                      "text-placeholder": nestedItem.disabled,
+                    },
+                    nestedItem.className
+                  )}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleNestedItemClick(nestedItem, e);
+                  }}
+                  onMouseEnter={() => setActiveNestedIndex(index)}
+                  disabled={nestedItem.disabled}
+                  data-context-submenu="true"
+                >
+                  {nestedItem.customContent ?? (
+                    <>
+                      {nestedItem.icon && <nestedItem.icon className={cn("h-3 w-3", nestedItem.iconClassName)} />}
+                      <div>
+                        <h5>{nestedItem.title}</h5>
+                        {nestedItem.description && (
+                          <p
+                            className={cn("whitespace-pre-line text-tertiary", {
+                              "text-placeholder": nestedItem.disabled,
+                            })}
+                          >
+                            {nestedItem.description}
+                          </p>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </button>
+              ))}
+            </div>
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+}
diff --git a/packages/ui/src/dropdowns/context-menu/root.tsx b/packages/ui/src/dropdowns/context-menu/root.tsx
new file mode 100644
index 0000000..e29cba0
--- /dev/null
+++ b/packages/ui/src/dropdowns/context-menu/root.tsx
@@ -0,0 +1,243 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+// hooks
+import { usePlatformOS } from "../../hooks/use-platform-os";
+// helpers
+import { cn } from "../../utils";
+// components
+import { ContextMenuItem } from "./item";
+
+export type TContextMenuItem = {
+  key: string;
+  customContent?: React.ReactNode;
+  title?: string;
+  description?: string;
+  icon?: React.FC<any>;
+  action: () => void;
+  shouldRender?: boolean;
+  closeOnClick?: boolean;
+  disabled?: boolean;
+  className?: string;
+  iconClassName?: string;
+  nestedMenuItems?: TContextMenuItem[];
+};
+
+// Portal component for nested menus
+interface PortalProps {
+  children: React.ReactNode;
+  container?: Element | null;
+}
+
+export function Portal({ children, container }: PortalProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const targetContainer = container || document.body;
+  return ReactDOM.createPortal(children, targetContainer);
+}
+
+// Context for managing nested menus
+export const ContextMenuContext = React.createContext<{
+  closeAllSubmenus: () => void;
+  registerSubmenu: (closeSubmenu: () => void) => () => void;
+  portalContainer?: Element | null;
+} | null>(null);
+
+type ContextMenuProps = {
+  parentRef: React.RefObject<HTMLElement | null>;
+  items: TContextMenuItem[];
+  portalContainer?: Element | null;
+};
+
+function ContextMenuWithoutPortal(props: ContextMenuProps) {
+  const { parentRef, items, portalContainer } = props;
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0,
+  });
+  const [activeItemIndex, setActiveItemIndex] = useState<number>(0);
+  // refs
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+  const submenuClosersRef = useRef<Set<() => void>>(new Set());
+  // derived values
+  const renderedItems = items.filter((item) => item.shouldRender !== false);
+  const { isMobile } = usePlatformOS();
+
+  const closeAllSubmenus = React.useCallback(() => {
+    submenuClosersRef.current.forEach((closeSubmenu) => closeSubmenu());
+  }, []);
+
+  const registerSubmenu = React.useCallback((closeSubmenu: () => void) => {
+    submenuClosersRef.current.add(closeSubmenu);
+    return () => {
+      submenuClosersRef.current.delete(closeSubmenu);
+    };
+  }, []);
+
+  const handleClose = () => {
+    closeAllSubmenus();
+    setIsOpen(false);
+    setActiveItemIndex(0);
+  };
+
+  // calculate position of context menu
+  useEffect(() => {
+    const parentElement = parentRef.current;
+    const contextMenu = contextMenuRef.current;
+    if (!parentElement || !contextMenu) return;
+
+    const handleContextMenu = (e: MouseEvent) => {
+      if (isMobile) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const contextMenuWidth = contextMenu.clientWidth;
+      const contextMenuHeight = contextMenu.clientHeight;
+
+      const clickX = e?.pageX || 0;
+      const clickY = e?.pageY || 0;
+
+      // check if there's enough space at the bottom, otherwise show at the top
+      let top = clickY;
+      if (clickY + contextMenuHeight > window.innerHeight) top = clickY - contextMenuHeight;
+
+      // check if there's enough space on the right, otherwise show on the left
+      let left = clickX;
+      if (clickX + contextMenuWidth > window.innerWidth) left = clickX - contextMenuWidth;
+
+      setPosition({ x: left, y: top });
+      setIsOpen(true);
+    };
+
+    const hideContextMenu = (e: KeyboardEvent) => {
+      if (isOpen && e.key === "Escape") handleClose();
+    };
+
+    parentElement.addEventListener("contextmenu", handleContextMenu);
+    window.addEventListener("keydown", hideContextMenu);
+
+    return () => {
+      parentElement.removeEventListener("contextmenu", handleContextMenu);
+      window.removeEventListener("keydown", hideContextMenu);
+    };
+  }, [contextMenuRef, isMobile, isOpen, parentRef, setIsOpen, setPosition]);
+
+  // handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!isOpen) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveItemIndex((prev) => (prev + 1) % renderedItems.length);
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveItemIndex((prev) => (prev - 1 + renderedItems.length) % renderedItems.length);
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const item = renderedItems[activeItemIndex];
+        if (!item.disabled) {
+          renderedItems[activeItemIndex].action();
+          if (item.closeOnClick !== false) handleClose();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [activeItemIndex, isOpen, renderedItems, setIsOpen]);
+
+  // Custom handler for nested menu portal clicks
+  React.useEffect(() => {
+    const handleDocumentClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+
+      // Check if the click is on a nested menu element
+      const isNestedMenuClick = target.closest('[data-context-submenu="true"]');
+      const isMainMenuClick = contextMenuRef.current?.contains(target);
+
+      // Also check if the target itself has the data attribute
+      const isNestedMenuElement = target.hasAttribute("data-context-submenu");
+
+      // If it's a nested menu click, main menu click, or nested menu element, don't close
+      if (isNestedMenuClick || isMainMenuClick || isNestedMenuElement) {
+        return;
+      }
+
+      // If menu is open and it's an outside click, close it
+      if (isOpen) {
+        handleClose();
+      }
+    };
+
+    if (isOpen) {
+      // Use capture phase to ensure we handle the event before other handlers
+      document.addEventListener("mousedown", handleDocumentClick, true);
+      return () => {
+        document.removeEventListener("mousedown", handleDocumentClick, true);
+      };
+    }
+  }, [isOpen, handleClose]);
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none fixed top-0 left-0 z-30 h-screen w-screen cursor-default opacity-0 transition-opacity",
+        {
+          "pointer-events-auto opacity-100": isOpen,
+        }
+      )}
+    >
+      <div
+        ref={contextMenuRef}
+        className="vertical-scrollbar fixed scrollbar-sm max-h-72 min-w-[12rem] overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5"
+        style={{
+          top: position.y,
+          left: position.x,
+        }}
+        data-context-menu="true"
+      >
+        <ContextMenuContext.Provider value={{ closeAllSubmenus, registerSubmenu, portalContainer }}>
+          {renderedItems.map((item, index) => (
+            <ContextMenuItem
+              key={item.key}
+              handleActiveItem={() => setActiveItemIndex(index)}
+              handleClose={handleClose}
+              isActive={index === activeItemIndex}
+              item={item}
+            />
+          ))}
+        </ContextMenuContext.Provider>
+      </div>
+    </div>
+  );
+}
+
+export function ContextMenu(props: ContextMenuProps) {
+  let contextMenu = <ContextMenuWithoutPortal {...props} />;
+  const portal = document.querySelector("#context-menu-portal");
+  if (portal) contextMenu = ReactDOM.createPortal(contextMenu, portal);
+  return contextMenu;
+}
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
new file mode 100644
index 0000000..7b202a3
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -0,0 +1,544 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Menu } from "@headlessui/react";
+import { ChevronDownOutline, ChevronRightOutline, MoreHorizontalOutline } from "@makeplane/propel/icons";
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { usePopper } from "react-popper";
+import { useOutsideClickDetector } from "@plane/hooks";
+// plane helpers
+// helpers
+import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
+import { cn } from "../utils";
+// hooks
+// types
+import type {
+  ICustomMenuDropdownProps,
+  ICustomMenuItemProps,
+  ICustomSubMenuProps,
+  ICustomSubMenuTriggerProps,
+  ICustomSubMenuContentProps,
+} from "./helper";
+
+interface PortalProps {
+  children: React.ReactNode;
+  container?: Element | null;
+  asChild?: boolean;
+}
+
+function Portal({ children, container, asChild = false }: PortalProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const targetContainer = container || document.body;
+
+  if (asChild) {
+    return ReactDOM.createPortal(children, targetContainer);
+  }
+
+  return ReactDOM.createPortal(<div data-radix-portal="">{children}</div>, targetContainer);
+}
+
+// Context for main menu to communicate with submenus
+const MenuContext = React.createContext<{
+  closeAllSubmenus: () => void;
+  registerSubmenu: (closeSubmenu: () => void) => () => void;
+} | null>(null);
+
+function CustomMenu(props: ICustomMenuDropdownProps) {
+  const {
+    ariaLabel,
+    buttonClassName = "",
+    customButtonClassName = "",
+    customButtonTabIndex = 0,
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    ellipsis = false,
+    label,
+    maxHeight = "md",
+    noBorder = false,
+    noChevron = false,
+    optionsClassName = "",
+    menuItemsClassName = "",
+    verticalEllipsis = false,
+    portalElement,
+    menuButtonOnClick,
+    onMenuClose,
+    tabIndex,
+    closeOnSelect,
+    openOnHover = false,
+    useCaptureForOutsideClick = false,
+  } = props;
+
+  const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  // refs
+  const dropdownRef = React.useRef<HTMLDivElement | null>(null);
+  const submenuClosersRef = React.useRef<Set<() => void>>(new Set());
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "auto",
+  });
+
+  const closeAllSubmenus = React.useCallback(() => {
+    submenuClosersRef.current.forEach((closeSubmenu) => closeSubmenu());
+  }, []);
+
+  const registerSubmenu = React.useCallback((closeSubmenu: () => void) => {
+    submenuClosersRef.current.add(closeSubmenu);
+    return () => {
+      submenuClosersRef.current.delete(closeSubmenu);
+    };
+  }, []);
+
+  const openDropdown = () => {
+    setIsOpen(true);
+    if (referenceElement) referenceElement.focus();
+  };
+
+  const closeDropdown = React.useCallback(() => {
+    if (isOpen) {
+      closeAllSubmenus();
+      onMenuClose?.();
+    }
+    setIsOpen(false);
+  }, [isOpen, closeAllSubmenus, onMenuClose]);
+
+  const selectActiveItem = () => {
+    const activeItem: HTMLElement | undefined | null = dropdownRef.current?.querySelector(
+      `[data-headlessui-state="active"] button`
+    );
+    activeItem?.click();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen, selectActiveItem);
+
+  const handleOnClick = () => {
+    if (closeOnSelect) closeDropdown();
+  };
+
+  const handleMenuButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (isOpen) {
+      closeDropdown();
+    } else {
+      openDropdown();
+    }
+    if (menuButtonOnClick) menuButtonOnClick();
+  };
+
+  const handleMouseEnter = () => {
+    if (openOnHover) openDropdown();
+  };
+
+  const handleMouseLeave = () => {
+    if (openOnHover && isOpen) {
+      setTimeout(() => {
+        // Only close if menu is still open
+        if (isOpen) {
+          closeDropdown();
+        }
+      }, 150); // Small delay to allow moving to submenu
+    }
+  };
+
+  useOutsideClickDetector(dropdownRef, closeDropdown, useCaptureForOutsideClick);
+
+  // Custom handler for submenu portal clicks
+  React.useEffect(() => {
+    const handleDocumentClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const isSubmenuClick = target.closest('[data-prevent-outside-click="true"]');
+      const isMainMenuClick = dropdownRef.current?.contains(target);
+
+      // If it's a submenu click or main menu click, don't close
+      if (isSubmenuClick || isMainMenuClick) {
+        return;
+      }
+
+      // If menu is open and it's an outside click, close it
+      if (isOpen) {
+        closeDropdown();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleDocumentClick, useCaptureForOutsideClick);
+
+      return () => {
+        document.removeEventListener("mousedown", handleDocumentClick, useCaptureForOutsideClick);
+      };
+    }
+  }, [isOpen, closeDropdown, useCaptureForOutsideClick]);
+
+  const menuContextValue = React.useMemo(
+    () => ({ closeAllSubmenus, registerSubmenu }),
+    [closeAllSubmenus, registerSubmenu]
+  );
+
+  let menuItems = (
+    <Menu.Items
+      data-prevent-outside-click={!!portalElement}
+      className={cn(
+        "fixed z-30 translate-y-0",
+        menuItemsClassName
+      )} /** translate-y-0 is a hack to create new stacking context. Required for safari  */
+      static
+    >
+      <div
+        className={cn(
+          "shadow-md my-1 min-w-[12rem] overflow-y-scroll rounded-md border border-strong-1 bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap ring-1 ring-strong-1/15 outline-none focus:outline-none",
+          {
+            "max-h-60": maxHeight === "lg",
+            "max-h-48": maxHeight === "md",
+            "max-h-36": maxHeight === "rg",
+            "max-h-28": maxHeight === "sm",
+          },
+          optionsClassName
+        )}
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <MenuContext.Provider value={menuContextValue}>{children}</MenuContext.Provider>
+      </div>
+    </Menu.Items>
+  );
+
+  if (portalElement) {
+    menuItems = ReactDOM.createPortal(menuItems, portalElement);
+  }
+
+  return (
+    <Menu
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("relative w-min text-left", className)}
+      onKeyDown={handleKeyDown}
+      role="presentation"
+      onClick={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        handleOnClick();
+      }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      data-main-menu="true"
+    >
+      {({ open }) => (
+        <>
+          {customButton ? (
+            <Menu.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                onClick={handleMenuButtonClick}
+                className={customButtonClassName}
+                tabIndex={customButtonTabIndex}
+                disabled={disabled}
+                aria-label={ariaLabel}
+              >
+                {customButton}
+              </button>
+            </Menu.Button>
+          ) : (
+            <>
+              {ellipsis || verticalEllipsis ? (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    onClick={handleMenuButtonClick}
+                    disabled={disabled}
+                    className={`relative grid place-items-center rounded-sm p-1 text-secondary outline-none hover:text-primary ${
+                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-layer-transparent-hover"
+                    } ${buttonClassName}`}
+                    tabIndex={customButtonTabIndex}
+                    aria-label={ariaLabel}
+                  >
+                    <MoreHorizontalOutline className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
+                  </button>
+                </Menu.Button>
+              ) : (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-11 whitespace-nowrap duration-300 ${
+                      open ? "text-primary" : "text-secondary"
+                    } ${noBorder ? "" : "shadow-sm border border-strong focus:outline-none"} ${
+                      disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-transparent-hover"
+                    } ${buttonClassName}`}
+                    onClick={handleMenuButtonClick}
+                    tabIndex={customButtonTabIndex}
+                    disabled={disabled}
+                    aria-label={ariaLabel}
+                  >
+                    {label}
+                    {!noChevron && <ChevronDownOutline className="h-3.5 w-3.5" />}
+                  </button>
+                </Menu.Button>
+              )}
+            </>
+          )}
+          {isOpen && menuItems}
+        </>
+      )}
+    </Menu>
+  );
+}
+
+// SubMenu context for closing submenu from nested items
+const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(null);
+
+// Hook to use submenu context
+const useSubMenu = () => React.useContext(SubMenuContext);
+
+// SubMenu implementation
+function SubMenu(props: ICustomSubMenuProps) {
+  const {
+    children,
+    trigger,
+    disabled = false,
+    className = "",
+    contentClassName = "",
+    placement = "right-start",
+  } = props;
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [referenceElement, setReferenceElement] = React.useState<HTMLSpanElement | null>(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
+  const submenuRef = React.useRef<HTMLDivElement | null>(null);
+
+  const menuContext = React.useContext(MenuContext);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement,
+    strategy: "fixed", // Use fixed positioning to escape overflow constraints
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 4],
+        },
+      },
+      {
+        name: "flip",
+        options: {
+          fallbackPlacements: ["left-start", "right-end", "left-end", "top-start", "bottom-start"],
+        },
+      },
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 8,
+        },
+      },
+    ],
+  });
+
+  const closeSubmenu = React.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  // Register this submenu with the main menu context
+  React.useEffect(() => {
+    if (menuContext) {
+      return menuContext.registerSubmenu(closeSubmenu);
+    }
+  }, [menuContext, closeSubmenu]);
+
+  const toggleSubmenu = () => {
+    if (!disabled) {
+      // Close other submenus when opening this one
+      if (!isOpen && menuContext) {
+        menuContext.closeAllSubmenus();
+      }
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleSubmenu();
+  };
+
+  const subMenuContextValue = React.useMemo(() => ({ closeSubmenu }), [closeSubmenu]);
+
+  // Close submenu when clicking on other menu items
+  React.useEffect(() => {
+    const handleMenuItemClick = (e: Event) => {
+      const target = e.target as HTMLElement;
+      // Check if the click is on a menu item that's not part of this submenu
+      if (target.closest('[role="menuitem"]') && !submenuRef.current?.contains(target)) {
+        closeSubmenu();
+      }
+    };
+
+    document.addEventListener("click", handleMenuItemClick);
+    return () => {
+      document.removeEventListener("click", handleMenuItemClick);
+    };
+  }, [closeSubmenu]);
+
+  return (
+    <div ref={submenuRef} className={cn("relative", className)}>
+      <span ref={setReferenceElement} className="w-full">
+        <Menu.Item as="div" disabled={disabled}>
+          {({ active }) => (
+            <button
+              type="button"
+              className={cn(
+                "font-inherit flex w-full cursor-pointer items-center justify-between rounded-sm border-0 bg-transparent px-1 py-1.5 text-left text-secondary outline-none select-none",
+                {
+                  "bg-layer-transparent-hover": active && !disabled,
+                  "text-placeholder": disabled,
+                  "cursor-not-allowed": disabled,
+                }
+              )}
+              onClick={handleClick}
+              disabled={disabled}
+            >
+              <span className="flex-1">{trigger}</span>
+              <ChevronRightOutline className="h-3.5 w-3.5 flex-shrink-0" />
+            </button>
+          )}
+        </Menu.Item>
+      </span>
+
+      {isOpen && (
+        <Portal>
+          <div
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+            className={cn(
+              "shadow-md fixed z-30 min-w-[12rem] overflow-hidden rounded-md border border-strong-1 bg-surface-1 p-1 text-11 ring-1 ring-strong-1/15",
+              contentClassName
+            )}
+            data-prevent-outside-click="true"
+            onMouseEnter={() => {
+              // Notify parent menu that we're hovering over submenu
+              const mainMenuElement = document.querySelector('[data-main-menu="true"]');
+              if (mainMenuElement) {
+                const mouseEnterEvent = new MouseEvent("mouseenter", { bubbles: true });
+                mainMenuElement.dispatchEvent(mouseEnterEvent);
+              }
+            }}
+            onMouseLeave={() => {
+              // Notify parent menu that we're leaving submenu
+              const mainMenuElement = document.querySelector('[data-main-menu="true"]');
+              if (mainMenuElement) {
+                const mouseLeaveEvent = new MouseEvent("mouseleave", { bubbles: true });
+                mainMenuElement.dispatchEvent(mouseLeaveEvent);
+              }
+            }}
+          >
+            <SubMenuContext.Provider value={subMenuContextValue}>{children}</SubMenuContext.Provider>
+          </div>
+        </Portal>
+      )}
+    </div>
+  );
+}
+
+function MenuItem(props: ICustomMenuItemProps) {
+  const { children, disabled = false, onClick, className } = props;
+  const submenuContext = useSubMenu();
+
+  return (
+    <Menu.Item as="div" disabled={disabled}>
+      {({ active, close }) => (
+        <button
+          type="button"
+          className={cn(
+            "w-full truncate rounded-sm px-1 py-1.5 text-left text-secondary select-none",
+            {
+              "bg-layer-transparent-hover": active && !disabled,
+              "text-placeholder": disabled,
+            },
+            className
+          )}
+          onClick={(e) => {
+            close();
+            onClick?.(e);
+            // Close submenu if this item is inside a submenu
+            submenuContext?.closeSubmenu();
+          }}
+          disabled={disabled}
+        >
+          {children}
+        </button>
+      )}
+    </Menu.Item>
+  );
+}
+
+function SubMenuTrigger(props: ICustomSubMenuTriggerProps) {
+  const { children, disabled = false, className } = props;
+
+  return (
+    <Menu.Item as="div" disabled={disabled}>
+      {({ active }) => (
+        <div
+          className={cn(
+            "flex w-full items-center justify-between rounded-sm px-1 py-1.5 text-left text-secondary select-none",
+            {
+              "bg-layer-transparent-hover": active && !disabled,
+              "text-placeholder": disabled,
+              "cursor-pointer": !disabled,
+              "cursor-not-allowed": disabled,
+            },
+            className
+          )}
+        >
+          <span className="flex-1">{children}</span>
+          <ChevronRightOutline className="h-3.5 w-3.5 flex-shrink-0" />
+        </div>
+      )}
+    </Menu.Item>
+  );
+}
+
+function SubMenuContent(props: ICustomSubMenuContentProps) {
+  const { children, className } = props;
+
+  return (
+    <div
+      className={cn(
+        "shadow-md z-[15] min-w-[12rem] overflow-hidden rounded-md border border-strong-1 bg-surface-1 p-1 text-11 ring-1 ring-strong-1/15",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Add all components as static properties for external use
+CustomMenu.Portal = Portal;
+CustomMenu.MenuItem = MenuItem;
+CustomMenu.SubMenu = SubMenu;
+CustomMenu.SubMenuTrigger = SubMenuTrigger;
+CustomMenu.SubMenuContent = SubMenuContent;
+
+export { CustomMenu };
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
new file mode 100644
index 0000000..78eed10
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -0,0 +1,232 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Combobox } from "@headlessui/react";
+import { ChevronDownOutline, InfoOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import React, { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+import { useOutsideClickDetector } from "@plane/hooks";
+// plane imports
+// local imports
+import { Tooltip } from "@plane/propel/tooltip";
+import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
+import { cn } from "../utils";
+import type { ICustomSearchSelectProps } from "./helper";
+
+export function CustomSearchSelect(props: ICustomSearchSelectProps) {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    className = "",
+    chevronClassName = "",
+    customButton,
+    placement,
+    disabled = false,
+    footerOption,
+    input = false,
+    label,
+    maxHeight = "md",
+    multiple = false,
+    noChevron = false,
+    onChange,
+    options,
+    onOpen,
+    onClose,
+    optionsClassName = "",
+    value,
+    tabIndex,
+    noResultsMessage = "No matches found",
+    defaultOpen = false,
+  } = props;
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+
+  const comboboxProps: any = {
+    value,
+    onChange,
+    disabled,
+  };
+
+  if (multiple) comboboxProps.multiple = true;
+
+  const openDropdown = () => {
+    setIsOpen(true);
+    if (referenceElement) referenceElement.focus();
+    if (onOpen) onOpen();
+  };
+
+  const closeDropdown = () => {
+    setIsOpen(false);
+    onClose && onClose();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
+
+  const toggleDropdown = () => {
+    if (isOpen) closeDropdown();
+    else openDropdown();
+  };
+
+  return (
+    <Combobox
+      as="div"
+      ref={dropdownRef}
+      tabIndex={tabIndex}
+      className={cn("relative flex-shrink-0 text-left", className)}
+      onKeyDown={handleKeyDown}
+      {...comboboxProps}
+    >
+      {({ open }: { open: boolean }) => {
+        if (open && onOpen) onOpen();
+
+        return (
+          <>
+            {customButton ? (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={cn(
+                    "flex w-full items-center justify-between gap-1 text-11",
+                    {
+                      "cursor-not-allowed text-secondary": disabled,
+                      "cursor-pointer hover:bg-layer-transparent-hover": !disabled,
+                    },
+                    customButtonClassName
+                  )}
+                  onClick={toggleDropdown}
+                >
+                  {customButton}
+                </button>
+              </Combobox.Button>
+            ) : (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={cn(
+                    "flex w-full items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong",
+                    {
+                      "px-3 py-2 text-13": input,
+                      "px-2 py-1 text-11": !input,
+                      "cursor-not-allowed text-secondary": disabled,
+                      "cursor-pointer hover:bg-layer-transparent-hover": !disabled,
+                    },
+                    buttonClassName
+                  )}
+                  onClick={toggleDropdown}
+                >
+                  {label}
+                  {!noChevron && !disabled && (
+                    <ChevronDownOutline className={cn("h-3 w-3 flex-shrink-0", chevronClassName)} aria-hidden="true" />
+                  )}
+                </button>
+              </Combobox.Button>
+            )}
+            {isOpen &&
+              createPortal(
+                <Combobox.Options as="ul" data-prevent-outside-click static>
+                  <div
+                    className={cn(
+                      "z-30 my-1 min-w-48 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 py-2.5 text-11 whitespace-nowrap focus:outline-none",
+                      optionsClassName
+                    )}
+                    ref={setPopperElement}
+                    style={styles.popper}
+                    {...attributes.popper}
+                  >
+                    <div className="mx-2 flex items-center gap-1.5 rounded-sm border border-subtle px-2">
+                      <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+                      <Combobox.Input
+                        className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                        placeholder="Search"
+                        displayValue={(assigned: any) => assigned?.name}
+                      />
+                    </div>
+                    <div
+                      className={cn("vertical-scrollbar mt-2 scrollbar-xs space-y-1 overflow-y-scroll px-2", {
+                        "max-h-96": maxHeight === "2xl",
+                        "max-h-80": maxHeight === "xl",
+                        "max-h-60": maxHeight === "lg",
+                        "max-h-48": maxHeight === "md",
+                        "max-h-36": maxHeight === "rg",
+                        "max-h-28": maxHeight === "sm",
+                      })}
+                    >
+                      {filteredOptions ? (
+                        filteredOptions.length > 0 ? (
+                          filteredOptions.map((option) => (
+                            <Combobox.Option
+                              as="li"
+                              key={option.value}
+                              value={option.value}
+                              className={({ active }) =>
+                                cn(
+                                  "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                                  {
+                                    "bg-layer-transparent-hover": active,
+                                    "cursor-not-allowed text-placeholder opacity-60": option.disabled,
+                                  }
+                                )
+                              }
+                              onClick={() => {
+                                if (!multiple) closeDropdown();
+                              }}
+                              disabled={option.disabled}
+                            >
+                              {({ selected }) => (
+                                <>
+                                  <span className="flex-grow truncate">{option.content}</span>
+                                  {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                                  {option.tooltip && (
+                                    <>
+                                      {typeof option.tooltip === "string" ? (
+                                        <Tooltip tooltipContent={option.tooltip}>
+                                          <InfoOutline className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-secondary" />
+                                        </Tooltip>
+                                      ) : (
+                                        option.tooltip
+                                      )}
+                                    </>
+                                  )}
+                                </>
+                              )}
+                            </Combobox.Option>
+                          ))
+                        ) : (
+                          <p className="px-1.5 py-1 text-placeholder italic">{noResultsMessage}</p>
+                        )
+                      ) : (
+                        <p className="px-1.5 py-1 text-placeholder italic">Loading...</p>
+                      )}
+                    </div>
+                    {footerOption}
+                  </div>
+                </Combobox.Options>,
+                document.body
+              )}
+          </>
+        );
+      }}
+    </Combobox>
+  );
+}
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
new file mode 100644
index 0000000..ef0724d
--- /dev/null
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Combobox } from "@headlessui/react";
+
+import React, { createContext, useCallback, useContext, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownOutline, TickOutline } from "@makeplane/propel/icons";
+// plane helpers
+// hooks
+import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
+// helpers
+import { cn } from "../utils";
+// types
+import type { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
+
+// Context to share the close handler with option components
+const DropdownContext = createContext<() => void>(() => {});
+
+function CustomSelect(props: ICustomSelectProps) {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    input = false,
+    label,
+    maxHeight = "md",
+    noChevron = false,
+    onChange,
+    optionsClassName = "",
+    value,
+    tabIndex,
+  } = props;
+  // states
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  const openDropdown = useCallback(() => {
+    setIsOpen(true);
+    if (referenceElement) referenceElement.focus();
+  }, [referenceElement]);
+
+  const closeDropdown = useCallback(() => setIsOpen(false), []);
+  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen);
+  useOutsideClickDetector(dropdownRef, closeDropdown);
+
+  const toggleDropdown = useCallback(() => {
+    if (isOpen) closeDropdown();
+    else openDropdown();
+  }, [closeDropdown, isOpen, openDropdown]);
+
+  return (
+    <DropdownContext.Provider value={closeDropdown}>
+      <Combobox
+        as="div"
+        ref={dropdownRef}
+        tabIndex={tabIndex}
+        value={value}
+        onChange={(val) => {
+          onChange?.(val);
+          closeDropdown();
+        }}
+        className={cn("relative flex-shrink-0 text-left", className)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled}
+      >
+        <>
+          {customButton ? (
+            <Combobox.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                className={`flex items-center justify-between gap-1 rounded text-11 ${
+                  disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-transparent-hover"
+                } ${customButtonClassName}`}
+                onClick={toggleDropdown}
+              >
+                {customButton}
+              </button>
+            </Combobox.Button>
+          ) : (
+            <Combobox.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                className={cn(
+                  "flex w-full items-center justify-between gap-1 rounded border border-strong",
+                  {
+                    "px-3 py-2 text-13": input,
+                    "px-2 py-1 text-11": !input,
+                    "cursor-not-allowed text-secondary": disabled,
+                    "cursor-pointer hover:bg-layer-transparent-hover": !disabled,
+                  },
+                  buttonClassName
+                )}
+                onClick={toggleDropdown}
+              >
+                {label}
+                {!noChevron && !disabled && <ChevronDownOutline className="h-3 w-3" aria-hidden="true" />}
+              </button>
+            </Combobox.Button>
+          )}
+        </>
+        {isOpen &&
+          createPortal(
+            <Combobox.Options as="ul" data-prevent-outside-click>
+              <div
+                className={cn(
+                  "z-30 my-1 min-w-48 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 whitespace-nowrap focus:outline-none",
+                  optionsClassName
+                )}
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div
+                  className={cn("space-y-1 overflow-y-scroll", {
+                    "max-h-60": maxHeight === "lg",
+                    "max-h-48": maxHeight === "md",
+                    "max-h-36": maxHeight === "rg",
+                    "max-h-28": maxHeight === "sm",
+                  })}
+                >
+                  {children}
+                </div>
+              </div>
+            </Combobox.Options>,
+            document.body
+          )}
+      </Combobox>
+    </DropdownContext.Provider>
+  );
+}
+
+function Option(props: ICustomSelectItemProps) {
+  const { children, value, className } = props;
+  const closeDropdown = useContext(DropdownContext);
+
+  const handleClick = useCallback(() => {
+    // Close dropdown for both new and already-selected options.
+    // Use setTimeout to ensure HeadlessUI's onChange handler fires first for new selections.
+    // For already-selected options, this ensures the dropdown closes since onChange won't fire.
+    setTimeout(() => {
+      closeDropdown();
+    }, 0);
+  }, [closeDropdown]);
+
+  return (
+    <Combobox.Option
+      as="li"
+      value={value}
+      className={({ active }) =>
+        cn(
+          "flex cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary select-none",
+          {
+            "bg-layer-transparent-hover": active,
+          },
+          className
+        )
+      }
+      onClick={handleClick}
+    >
+      {({ selected }) => (
+        <div className="flex w-full items-center justify-between gap-2">
+          {children}
+          {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+        </div>
+      )}
+    </Combobox.Option>
+  );
+}
+
+CustomSelect.Option = Option;
+
+export { CustomSelect };
diff --git a/packages/ui/src/dropdowns/helper.tsx b/packages/ui/src/dropdowns/helper.tsx
new file mode 100644
index 0000000..508686d
--- /dev/null
+++ b/packages/ui/src/dropdowns/helper.tsx
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// FIXME: fix this!!!
+import type { ICustomSearchSelectOption } from "@plane/types";
+
+type Placement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end"
+  | "right"
+  | "right-start"
+  | "right-end";
+
+export interface IDropdownProps {
+  customButtonClassName?: string;
+  customButtonTabIndex?: number;
+  buttonClassName?: string;
+  className?: string;
+  customButton?: React.ReactNode;
+  disabled?: boolean;
+  input?: boolean;
+  label?: string | React.ReactNode;
+  maxHeight?: "sm" | "rg" | "md" | "lg" | "xl" | "2xl";
+  noChevron?: boolean;
+  chevronClassName?: string;
+  onOpen?: () => void;
+  optionsClassName?: string;
+  placement?: Placement;
+  tabIndex?: number;
+  useCaptureForOutsideClick?: boolean;
+  defaultOpen?: boolean;
+}
+
+export interface IPortalProps {
+  children: React.ReactNode;
+  container?: Element | null;
+  asChild?: boolean;
+}
+
+export interface ICustomMenuDropdownProps extends IDropdownProps {
+  children: React.ReactNode;
+  ellipsis?: boolean;
+  noBorder?: boolean;
+  verticalEllipsis?: boolean;
+  menuButtonOnClick?: (...args: any) => void;
+  menuItemsClassName?: string;
+  onMenuClose?: () => void;
+  closeOnSelect?: boolean;
+  portalElement?: Element | null;
+  openOnHover?: boolean;
+  ariaLabel?: string;
+}
+
+export interface ICustomSelectProps extends IDropdownProps {
+  children: React.ReactNode;
+  value: any;
+  onChange: any;
+}
+
+interface CustomSearchSelectProps {
+  footerOption?: React.ReactNode;
+  onChange: any;
+  onClose?: () => void;
+  noResultsMessage?: string;
+  options?: ICustomSearchSelectOption[];
+}
+
+interface SingleValueProps {
+  multiple?: false;
+  value: any;
+}
+
+interface MultipleValuesProps {
+  multiple?: true;
+  value: any[] | null;
+}
+
+export type ICustomSearchSelectProps = IDropdownProps &
+  CustomSearchSelectProps &
+  (SingleValueProps | MultipleValuesProps);
+
+export interface ICustomMenuItemProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  onClick?: (args?: any) => void;
+  className?: string;
+}
+
+export interface ICustomSelectItemProps {
+  children: React.ReactNode;
+  value: any;
+  className?: string;
+}
+
+// Submenu interfaces
+export interface ICustomSubMenuProps {
+  children: React.ReactNode;
+  trigger: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  contentClassName?: string;
+  placement?: Placement;
+}
+
+export interface ICustomSubMenuTriggerProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface ICustomSubMenuContentProps {
+  children: React.ReactNode;
+  className?: string;
+  placement?: Placement;
+  sideOffset?: number;
+  alignOffset?: number;
+}
diff --git a/packages/ui/src/dropdowns/index.ts b/packages/ui/src/dropdowns/index.ts
new file mode 100644
index 0000000..3f0340a
--- /dev/null
+++ b/packages/ui/src/dropdowns/index.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./context-menu";
+export * from "./custom-menu";
+export * from "./custom-select";
+export * from "./custom-search-select";
+export * from "./combo-box";
diff --git a/packages/ui/src/favorite-star.tsx b/packages/ui/src/favorite-star.tsx
new file mode 100644
index 0000000..e6bb3c1
--- /dev/null
+++ b/packages/ui/src/favorite-star.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { StarFilled, StarOutline } from "@makeplane/propel/icons";
+import React from "react";
+// helpers
+import { cn } from "./utils";
+
+type Props = {
+  buttonClassName?: string;
+  iconClassName?: string;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  selected: boolean;
+};
+
+export function FavoriteStar(props: Props) {
+  const { buttonClassName, iconClassName, onClick, selected } = props;
+  // Propel splits the star into two glyphs; the filled one matches the old solid Lucide star.
+  const Icon = selected ? StarFilled : StarOutline;
+
+  return (
+    <button type="button" className={cn("grid h-4 w-4 place-items-center", buttonClassName)} onClick={onClick}>
+      <Icon
+        className={cn(
+          "h-4 w-4 text-tertiary transition-all",
+          {
+            "text-(--color-label-yellow-icon)": selected,
+          },
+          iconClassName
+        )}
+      />
+    </button>
+  );
+}
diff --git a/packages/ui/src/form-fields/index.ts b/packages/ui/src/form-fields/index.ts
new file mode 100644
index 0000000..1ffa30f
--- /dev/null
+++ b/packages/ui/src/form-fields/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./input";
+export * from "./textarea";
+export * from "./input-color-picker";
+export * from "./password";
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
new file mode 100644
index 0000000..e71d3c3
--- /dev/null
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Popover, Transition } from "@headlessui/react";
+import * as React from "react";
+import * as ColorPicker from "react-color";
+import type { ColorResult } from "react-color";
+import { usePopper } from "react-popper";
+// helpers
+import { Button } from "../button/button";
+import { cn } from "../utils";
+// components
+import { Input } from "./input";
+
+export interface InputColorPickerProps {
+  hasError: boolean;
+  value: string | undefined;
+  onChange: (value: string) => void;
+  name: string;
+  className?: string;
+  style?: React.CSSProperties;
+  placeholder: string;
+}
+
+export function InputColorPicker(props: InputColorPickerProps) {
+  const { value, hasError, onChange, name, className, style, placeholder } = props;
+
+  const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+  });
+
+  const handleColorChange = (newColor: ColorResult) => {
+    const { hex } = newColor;
+    onChange(hex);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <div className="relative">
+      <Input
+        id={name}
+        name={name}
+        type="text"
+        value={value}
+        onChange={handleInputChange}
+        hasError={hasError}
+        placeholder={placeholder}
+        className={cn("border-[0.5px] border-subtle", className)}
+        style={style}
+      />
+
+      <Popover as="div" className="absolute top-1/2 right-1 z-10 -translate-y-1/2">
+        {() => (
+          <>
+            <Popover.Button as={React.Fragment}>
+              <Button ref={setReferenceElement} variant="neutral-primary" className="border-none !bg-transparent">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="lucide lucide-palette"
+                >
+                  <circle cx="13.5" cy="6.5" r=".5" />
+                  <circle cx="17.5" cy="10.5" r=".5" />
+                  <circle cx="8.5" cy="7.5" r=".5" />
+                  <circle cx="6.5" cy="12.5" r=".5" />
+                  <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
+                </svg>
+              </Button>
+            </Popover.Button>
+            <Transition
+              as={React.Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-200"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  <ColorPicker.SketchPicker color={value} onChange={handleColorChange} />
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        )}
+      </Popover>
+    </div>
+  );
+}
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
new file mode 100644
index 0000000..0293838
--- /dev/null
+++ b/packages/ui/src/form-fields/input.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+// helpers
+import { cn } from "../utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  mode?: "primary" | "transparent" | "true-transparent";
+  inputSize?: "xs" | "sm" | "md";
+  hasError?: boolean;
+  className?: string;
+}
+
+const Input = React.forwardRef(function Input(props: InputProps, ref: React.ForwardedRef<HTMLInputElement>) {
+  const {
+    id,
+    type,
+    name,
+    mode = "primary",
+    inputSize = "sm",
+    hasError = false,
+    className = "",
+    autoComplete = "off",
+    ...rest
+  } = props;
+
+  return (
+    <input
+      id={id}
+      ref={ref}
+      type={type}
+      name={name}
+      className={cn(
+        "placeholder-tertiary block rounded-md border-subtle-1 bg-layer-2 text-13 focus:outline-none",
+        {
+          "rounded-md border-[0.5px]": mode === "primary",
+          "rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
+            mode === "transparent",
+          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
+          "border-danger-strong": hasError,
+          "px-1.5 py-1": inputSize === "xs",
+          "px-3 py-2": inputSize === "sm",
+          "p-3": inputSize === "md",
+        },
+        className
+      )}
+      autoComplete={autoComplete}
+      {...rest}
+    />
+  );
+});
+
+Input.displayName = "form-input-field";
+
+export { Input };
diff --git a/packages/ui/src/form-fields/password/helper.tsx b/packages/ui/src/form-fields/password/helper.tsx
new file mode 100644
index 0000000..f5560be
--- /dev/null
+++ b/packages/ui/src/form-fields/password/helper.tsx
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+
+export interface StrengthInfo {
+  message: string;
+  textColor: string;
+  activeFragments: number;
+}
+
+/**
+ * Get strength information including message, color, and active fragments
+ */
+export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo => {
+  switch (strength) {
+    case E_PASSWORD_STRENGTH.EMPTY:
+      return {
+        message: "Please enter your password",
+        textColor: "text-primary",
+        activeFragments: 0,
+      };
+    case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID:
+      return {
+        message: "Password is too short",
+        textColor: "text-danger-primary",
+        activeFragments: 1,
+      };
+    case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID:
+      return {
+        message: "Password is weak",
+        textColor: "text-orange-500",
+        activeFragments: 2,
+      };
+    case E_PASSWORD_STRENGTH.STRENGTH_VALID:
+      return {
+        message: "Password is strong",
+        textColor: "text-success-primary",
+        activeFragments: 3,
+      };
+    default:
+      return {
+        message: "Please enter your password",
+        textColor: "text-primary",
+        activeFragments: 0,
+      };
+  }
+};
+
+/**
+ * Get fragment color based on position and active state
+ */
+export const getFragmentColor = (fragmentIndex: number, activeFragments: number): string => {
+  if (fragmentIndex >= activeFragments) {
+    return "bg-layer-1";
+  }
+
+  switch (activeFragments) {
+    case 1:
+      return "bg-danger-primary";
+    case 2:
+      return "bg-orange-500";
+    case 3:
+      return "bg-success-primary";
+    default:
+      return "bg-layer-1";
+  }
+};
diff --git a/packages/ui/src/form-fields/password/index.ts b/packages/ui/src/form-fields/password/index.ts
new file mode 100644
index 0000000..3ccae14
--- /dev/null
+++ b/packages/ui/src/form-fields/password/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./indicator";
+export * from "./password-input";
diff --git a/packages/ui/src/form-fields/password/indicator.tsx b/packages/ui/src/form-fields/password/indicator.tsx
new file mode 100644
index 0000000..8270ba3
--- /dev/null
+++ b/packages/ui/src/form-fields/password/indicator.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { TickCircleOutline } from "@makeplane/propel/icons";
+import React from "react";
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { cn, getPasswordStrength, getPasswordCriteria } from "@plane/utils";
+import { getStrengthInfo, getFragmentColor } from "./helper";
+
+export interface PasswordStrengthIndicatorProps {
+  password: string;
+  showCriteria?: boolean;
+  isFocused?: boolean;
+}
+
+export function PasswordStrengthIndicator({
+  password,
+  showCriteria = true,
+  isFocused = false,
+}: PasswordStrengthIndicatorProps) {
+  const strength = getPasswordStrength(password);
+  const criteria = getPasswordCriteria(password);
+  const strengthInfo = getStrengthInfo(strength);
+
+  const isPasswordMeterVisible = isFocused ? true : strength === E_PASSWORD_STRENGTH.STRENGTH_VALID ? false : true;
+
+  if ((!password && !showCriteria) || !isPasswordMeterVisible) {
+    return null;
+  }
+
+  return (
+    <div className={cn("space-y-3")}>
+      {/* Strength Indicator */}
+      <div className="space-y-2">
+        <div className="flex w-full gap-1 transition-all duration-300 ease-linear">
+          {[0, 1, 2].map((fragmentIndex) => (
+            <div
+              key={fragmentIndex}
+              className={cn(
+                "h-1 flex-1 rounded-xs transition-all duration-300 ease-in-out",
+                getFragmentColor(fragmentIndex, strengthInfo.activeFragments)
+              )}
+            />
+          ))}
+        </div>
+
+        {/* Strength Message */}
+        {password && <p className={cn("!text-13 font-medium", strengthInfo.textColor)}>{strengthInfo.message}</p>}
+      </div>
+
+      {/* Criteria list */}
+      {showCriteria && (
+        <div className="flex flex-wrap gap-2">
+          {criteria.map((criterion) => (
+            <div key={criterion.key} className="flex items-center gap-1.5">
+              <div className="flex items-center justify-center p-0.5">
+                <TickCircleOutline
+                  className={cn("h-3 w-3 flex-shrink-0", {
+                    "text-success-primary": criterion.isValid,
+                    "text-primary": !criterion.isValid,
+                  })}
+                />
+              </div>
+              <span
+                className={cn("!text-11", {
+                  "text-success-primary": criterion.isValid,
+                  "text-primary": !criterion.isValid,
+                })}
+              >
+                {criterion.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/form-fields/password/password-input.tsx b/packages/ui/src/form-fields/password/password-input.tsx
new file mode 100644
index 0000000..248d885
--- /dev/null
+++ b/packages/ui/src/form-fields/password/password-input.tsx
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
+import { useState } from "react";
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+
+type TPasswordInputProps = {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  showToggle?: boolean;
+  error?: boolean;
+  autoComplete?: React.HTMLInputAutoCompleteAttribute;
+};
+
+export function PasswordInput({
+  id,
+  value,
+  onChange,
+  placeholder = "Enter your password",
+  className,
+  showToggle = true,
+  error = false,
+  autoComplete = "off",
+}: TPasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+  return (
+    <div className="relative">
+      <input
+        id={id}
+        type={showPassword ? "text" : "password"}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className={cn(
+          "w-full rounded-md border bg-surface-1 px-3 py-2 pr-10 text-secondary transition-all duration-200 placeholder:text-placeholder focus:border-transparent focus:ring-2 focus:ring-accent-strong focus:outline-none",
+          {
+            "border-strong": !error,
+            "border-danger-strong": error,
+          },
+          className
+        )}
+        placeholder={placeholder}
+        autoComplete={autoComplete}
+      />
+      {showToggle && (
+        <Tooltip tooltipContent={showPassword ? "Hide password" : "Show password"} position="top">
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary transition-colors duration-200 hover:text-primary"
+          >
+            <div className="relative h-4 w-4">
+              <ShowOutline
+                className={cn(
+                  "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
+                  showPassword ? "scale-75 rotate-12 opacity-0" : "scale-100 rotate-0 opacity-100"
+                )}
+              />
+              <HideOutline
+                className={cn(
+                  "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
+                  showPassword ? "scale-100 rotate-0 opacity-100" : "scale-75 -rotate-12 opacity-0"
+                )}
+              />
+            </div>
+          </button>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
new file mode 100644
index 0000000..f5a747b
--- /dev/null
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { useRef } from "react";
+// helpers
+import { useAutoResizeTextArea } from "../hooks/use-auto-resize-textarea";
+import { cn } from "../utils";
+// hooks
+
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  mode?: "primary" | "transparent" | "true-transparent";
+  textAreaSize?: "xs" | "sm" | "md";
+  hasError?: boolean;
+  className?: string;
+}
+
+const TextArea = React.forwardRef(function TextArea(
+  props: TextAreaProps,
+  ref: React.ForwardedRef<HTMLTextAreaElement>
+) {
+  const {
+    id,
+    name,
+    value = "",
+    mode = "primary",
+    textAreaSize = "sm",
+    hasError = false,
+    className = "",
+    ...rest
+  } = props;
+  // refs
+  const textAreaRef = useRef<any>(ref);
+  // auto re-size
+  useAutoResizeTextArea(textAreaRef, value);
+
+  return (
+    <textarea
+      id={id}
+      name={name}
+      ref={textAreaRef}
+      value={value}
+      className={cn(
+        "no-scrollbar w-full bg-layer-2 placeholder-(--text-color-placeholder) outline-none",
+        {
+          "rounded-md border-[0.5px] border-subtle-1": mode === "primary",
+          "focus:ring-theme rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1":
+            mode === "transparent",
+          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
+          "px-1.5 py-1": textAreaSize === "xs",
+          "px-3 py-2": textAreaSize === "sm",
+          "p-3": textAreaSize === "md",
+          "border-danger-strong": hasError,
+          "bg-danger-subtle": hasError && mode === "primary",
+        },
+        className
+      )}
+      {...rest}
+    />
+  );
+});
+
+TextArea.displayName = "TextArea";
+
+export { TextArea };
diff --git a/packages/ui/src/header/header.tsx b/packages/ui/src/header/header.tsx
new file mode 100644
index 0000000..81ed15d
--- /dev/null
+++ b/packages/ui/src/header/header.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { ERowVariant, Row } from "../row";
+import { cn } from "../utils";
+import type { THeaderVariant } from "./helper";
+import { EHeaderVariant, getHeaderStyle } from "./helper";
+
+export interface HeaderProps {
+  variant?: THeaderVariant;
+  setHeight?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  showOnMobile?: boolean;
+}
+
+const HeaderContext = React.createContext<THeaderVariant | null>(null);
+
+function Header(props: HeaderProps) {
+  const {
+    variant = EHeaderVariant.PRIMARY,
+    className = "",
+    showOnMobile = true,
+    setHeight = true,
+    children,
+    ...rest
+  } = props;
+
+  const style = getHeaderStyle(variant, setHeight, showOnMobile);
+  return (
+    <HeaderContext.Provider value={variant}>
+      <Row
+        variant={variant === EHeaderVariant.PRIMARY ? ERowVariant.HUGGING : ERowVariant.REGULAR}
+        className={cn(style, className)}
+        {...rest}
+      >
+        {children}
+      </Row>
+    </HeaderContext.Provider>
+  );
+}
+
+function LeftItem(props: HeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex max-w-[80%] flex-grow flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap",
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+function RightItem(props: HeaderProps) {
+  const variant = React.useContext(HeaderContext);
+  if (variant === undefined) throw new Error("RightItem must be used within Header");
+  return (
+    <div
+      className={cn(
+        "flex w-auto items-center justify-end gap-2",
+        {
+          "items-baseline": variant === EHeaderVariant.TERNARY,
+        },
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+Header.LeftItem = LeftItem;
+Header.RightItem = RightItem;
+Header.displayName = "plane-ui-header";
+
+export { Header, EHeaderVariant };
diff --git a/packages/ui/src/header/helper.tsx b/packages/ui/src/header/helper.tsx
new file mode 100644
index 0000000..8c013a5
--- /dev/null
+++ b/packages/ui/src/header/helper.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EHeaderVariant {
+  PRIMARY = "primary",
+  SECONDARY = "secondary",
+  TERNARY = "ternary",
+}
+export type THeaderVariant = EHeaderVariant.PRIMARY | EHeaderVariant.SECONDARY | EHeaderVariant.TERNARY;
+
+export interface IHeaderProperties {
+  [key: string]: string;
+}
+export const headerStyle: IHeaderProperties = {
+  [EHeaderVariant.PRIMARY]:
+    "relative flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-surface-1 bg-surface-1 z-[18]",
+  [EHeaderVariant.SECONDARY]: "!py-0  overflow-y-hidden border-b border-subtle justify-between bg-surface-1 z-[15]",
+  [EHeaderVariant.TERNARY]: "flex flex-wrap justify-between py-2  border-b border-subtle gap-2 bg-surface-1 z-[12]",
+};
+export const minHeights: IHeaderProperties = {
+  [EHeaderVariant.PRIMARY]: "",
+  [EHeaderVariant.SECONDARY]: "min-h-[52px]",
+  [EHeaderVariant.TERNARY]: "",
+};
+export const getHeaderStyle = (variant: THeaderVariant, setMinHeight: boolean, showOnMobile: boolean) => {
+  const height = setMinHeight ? minHeights[variant] : "";
+  const display = variant === EHeaderVariant.SECONDARY ? (showOnMobile ? "flex" : "hidden md:flex") : "";
+  return " @container " + headerStyle[variant] + " " + height + " " + display;
+};
diff --git a/packages/ui/src/header/index.ts b/packages/ui/src/header/index.ts
new file mode 100644
index 0000000..f595712
--- /dev/null
+++ b/packages/ui/src/header/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./header";
diff --git a/packages/ui/src/hooks/use-auto-resize-textarea.ts b/packages/ui/src/hooks/use-auto-resize-textarea.ts
new file mode 100644
index 0000000..6ef54fb
--- /dev/null
+++ b/packages/ui/src/hooks/use-auto-resize-textarea.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useLayoutEffect } from "react";
+
+export const useAutoResizeTextArea = (
+  textAreaRef: React.RefObject<HTMLTextAreaElement | null>,
+  value: string | number | readonly string[]
+) => {
+  useLayoutEffect(() => {
+    const textArea = textAreaRef.current;
+    if (!textArea) return;
+
+    // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+    textArea.style.height = "0px";
+    const scrollHeight = textArea.scrollHeight;
+    textArea.style.height = scrollHeight + "px";
+  }, [textAreaRef, value]);
+};
diff --git a/packages/ui/src/hooks/use-dropdown-key-down.tsx b/packages/ui/src/hooks/use-dropdown-key-down.tsx
new file mode 100644
index 0000000..98cc97b
--- /dev/null
+++ b/packages/ui/src/hooks/use-dropdown-key-down.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+
+type TUseDropdownKeyDown = {
+  (
+    onOpen: () => void,
+    onClose: () => void,
+    isOpen: boolean,
+    selectActiveItem?: () => void
+  ): (event: React.KeyboardEvent<HTMLElement>) => void;
+};
+
+export const useDropdownKeyDown: TUseDropdownKeyDown = (onOpen, onClose, isOpen, selectActiveItem?) => {
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+        if (!isOpen) {
+          event.stopPropagation();
+          onOpen();
+        } else {
+          selectActiveItem && selectActiveItem();
+        }
+      } else if (event.key === "Escape" && isOpen) {
+        event.stopPropagation();
+        onClose();
+      }
+    },
+    [isOpen, onOpen, onClose]
+  );
+
+  return handleKeyDown;
+};
diff --git a/packages/ui/src/hooks/use-dropdown-key-pressed.ts b/packages/ui/src/hooks/use-dropdown-key-pressed.ts
new file mode 100644
index 0000000..881079a
--- /dev/null
+++ b/packages/ui/src/hooks/use-dropdown-key-pressed.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback } from "react";
+
+type TUseDropdownKeyPressed = {
+  (
+    onEnterKeyDown: () => void,
+    onEscKeyDown: () => void,
+    stopPropagation?: boolean
+  ): (event: React.KeyboardEvent<HTMLElement>) => void;
+};
+
+export const useDropdownKeyPressed: TUseDropdownKeyPressed = (onEnterKeyDown, onEscKeyDown, stopPropagation = true) => {
+  const stopEventPropagation = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (stopPropagation) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    [stopPropagation]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLElement>) => {
+      if (event.key === "Enter") {
+        stopEventPropagation(event);
+        onEnterKeyDown();
+      } else if (event.key === "Escape") {
+        stopEventPropagation(event);
+        onEscKeyDown();
+      } else if (event.key === "Tab") onEscKeyDown();
+    },
+    [onEnterKeyDown, onEscKeyDown, stopEventPropagation]
+  );
+
+  return handleKeyDown;
+};
diff --git a/packages/ui/src/hooks/use-platform-os.ts b/packages/ui/src/hooks/use-platform-os.ts
new file mode 100644
index 0000000..5c56a55
--- /dev/null
+++ b/packages/ui/src/hooks/use-platform-os.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const usePlatformOS = () => {
+  const userAgent = window.navigator.userAgent;
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+
+  return { isMobile };
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..5045d52
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./avatar";
+export * from "./breadcrumbs";
+export * from "./card";
+export * from "./collapsible";
+export * from "./content-wrapper";
+export * from "./control-link";
+export * from "./drag-handle";
+export * from "./drop-indicator";
+export * from "./dropdown";
+export * from "./dropdowns";
+export * from "./favorite-star";
+export * from "./form-fields";
+export * from "./header";
+export * from "./link";
+export * from "./loader";
+export * from "./modals";
+export * from "./popovers";
+export * from "./row";
+export * from "./sortable";
+export * from "./spinners";
+export * from "./tables";
+export * from "./tag";
+export * from "./utils";
+export * from "./oauth";
diff --git a/packages/ui/src/link/block.tsx b/packages/ui/src/link/block.tsx
new file mode 100644
index 0000000..6d50522
--- /dev/null
+++ b/packages/ui/src/link/block.tsx
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// plane utils
+import { calculateTimeAgo, cn, getIconForLink } from "@plane/utils";
+// plane ui
+import type { TContextMenuItem } from "../dropdowns/context-menu/root";
+import { CustomMenu } from "../dropdowns/custom-menu";
+
+export type TLinkItemBlockProps = {
+  title: string;
+  url: string;
+  createdAt?: Date | string;
+  menuItems?: TContextMenuItem[];
+  onClick?: () => void;
+};
+
+export function LinkItemBlock(props: TLinkItemBlockProps) {
+  // props
+  const { title, url, createdAt, menuItems, onClick } = props;
+  // icons
+  const Icon = getIconForLink(url);
+  return (
+    <div
+      onClick={onClick}
+      className="group flex h-[56px] w-[230px] cursor-pointer items-center gap-4 rounded-md border-[0.5px] border-subtle bg-surface-1 px-4"
+    >
+      <div className="grid size-8 flex-shrink-0 place-items-center rounded-sm bg-surface-2 p-2">
+        <Icon className="size-4 stroke-2 text-tertiary group-hover:text-primary" />
+      </div>
+      <div className="flex-1 truncate">
+        <div className="truncate text-13 font-medium">{title}</div>
+        {createdAt && <div className="text-11 font-medium text-placeholder">{calculateTimeAgo(createdAt)}</div>}
+      </div>
+      {menuItems && (
+        <div className="hidden group-hover:block">
+          <CustomMenu placement="bottom-end" menuItemsClassName="z-20" closeOnSelect verticalEllipsis>
+            {menuItems.map((item) => (
+              <CustomMenu.MenuItem
+                key={item.key}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  item.action();
+                }}
+                className={cn("flex w-full items-center gap-2", {
+                  "text-placeholder": item.disabled,
+                })}
+                disabled={item.disabled}
+              >
+                {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+                <div>
+                  <h5>{item.title}</h5>
+                  {item.description && (
+                    <p
+                      className={cn("whitespace-pre-line text-tertiary", {
+                        "text-placeholder": item.disabled,
+                      })}
+                    >
+                      {item.description}
+                    </p>
+                  )}
+                </div>
+              </CustomMenu.MenuItem>
+            ))}
+          </CustomMenu>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/link/index.ts b/packages/ui/src/link/index.ts
new file mode 100644
index 0000000..25a317f
--- /dev/null
+++ b/packages/ui/src/link/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./block";
diff --git a/packages/ui/src/loader.tsx b/packages/ui/src/loader.tsx
new file mode 100644
index 0000000..836a412
--- /dev/null
+++ b/packages/ui/src/loader.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { cn } from "./utils";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function Loader({ children, className = "" }: Props) {
+  return (
+    <div className={cn("animate-pulse", className)} role="status">
+      {children}
+    </div>
+  );
+}
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+  className?: string;
+};
+
+function Item({ height = "auto", width = "auto", className = "" }: ItemProps) {
+  return <div className={cn("rounded-md bg-layer-1", className)} style={{ height: height, width: width }} />;
+}
+
+Loader.Item = Item;
+
+Loader.displayName = "plane-ui-loader";
+
+export { Loader };
diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/ui/src/modals/alert-modal.tsx
new file mode 100644
index 0000000..b994193
--- /dev/null
+++ b/packages/ui/src/modals/alert-modal.tsx
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { InfoOutline, WarningTriangleOutline } from "@makeplane/propel/icons";
+import React from "react";
+// components
+import type { TButtonVariant } from "@plane/propel/button";
+import { Button } from "@plane/propel/button";
+import { cn } from "../utils";
+import { EModalPosition, EModalWidth } from "./constants";
+import { ModalCore } from "./modal-core";
+// constants
+// helpers
+
+export type TModalVariant = "danger" | "primary";
+
+type Props = {
+  content: React.ReactNode | string;
+  handleClose: () => void;
+  handleSubmit: () => void;
+  hideIcon?: boolean;
+  isSubmitting: boolean;
+  isOpen: boolean;
+  position?: EModalPosition;
+  primaryButtonText?: {
+    loading: string;
+    default: string;
+  };
+  secondaryButtonText?: string;
+  title: string;
+  variant?: TModalVariant;
+  width?: EModalWidth;
+  customIcon?: React.ReactNode;
+};
+
+const VARIANT_ICONS: Record<TModalVariant, React.ComponentType<React.SVGProps<SVGSVGElement>>> = {
+  danger: WarningTriangleOutline,
+  primary: InfoOutline,
+};
+
+const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
+  danger: "error-fill",
+  primary: "primary",
+};
+
+const VARIANT_CLASSES: Record<TModalVariant, string> = {
+  danger: "bg-danger-subtle text-danger-primary",
+  primary: "bg-accent-primary/20 text-accent-primary",
+};
+
+export function AlertModalCore(props: Props) {
+  const {
+    content,
+    handleClose,
+    handleSubmit,
+    hideIcon = false,
+    isSubmitting,
+    isOpen,
+    position = EModalPosition.CENTER,
+    primaryButtonText = {
+      loading: "Deleting",
+      default: "Delete",
+    },
+    secondaryButtonText = "Cancel",
+    title,
+    variant = "danger",
+    width = EModalWidth.XL,
+    customIcon,
+  } = props;
+
+  const Icon = VARIANT_ICONS[variant];
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={position} width={width}>
+      <div className="flex flex-col items-center gap-4 p-5 sm:flex-row sm:items-start">
+        {!hideIcon && (
+          <span
+            className={cn(
+              "grid size-12 flex-shrink-0 place-items-center rounded-full sm:size-10",
+              VARIANT_CLASSES[variant]
+            )}
+          >
+            {customIcon ? <>{customIcon}</> : <Icon className="size-5" aria-hidden="true" />}
+          </span>
+        )}
+        <div className="text-center sm:text-left">
+          <h3 className="text-16 font-medium">{title}</h3>
+          <p className="mt-1 text-13 text-secondary">{content}</p>
+        </div>
+      </div>
+      <div className="flex flex-col-reverse gap-2 border-t-[0.5px] border-subtle px-5 py-4 sm:flex-row sm:justify-end">
+        <Button variant="secondary" onClick={handleClose}>
+          {secondaryButtonText}
+        </Button>
+        <Button variant={BUTTON_VARIANTS[variant]} tabIndex={1} onClick={handleSubmit} loading={isSubmitting}>
+          {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
+        </Button>
+      </div>
+    </ModalCore>
+  );
+}
diff --git a/packages/ui/src/modals/constants.ts b/packages/ui/src/modals/constants.ts
new file mode 100644
index 0000000..e094d07
--- /dev/null
+++ b/packages/ui/src/modals/constants.ts
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum EModalPosition {
+  TOP = "flex items-center justify-center text-center mx-4 my-10 md:my-20",
+  CENTER = "flex items-end sm:items-center justify-center p-4 min-h-full",
+}
+
+export enum EModalWidth {
+  SM = "sm:max-w-sm",
+  MD = "sm:max-w-md",
+  LG = "sm:max-w-lg",
+  XL = "sm:max-w-xl",
+  XXL = "sm:max-w-2xl",
+  XXXL = "sm:max-w-3xl",
+  XXXXL = "sm:max-w-4xl",
+  VXL = "sm:max-w-5xl",
+  VIXL = "sm:max-w-6xl",
+  VIIXL = "sm:max-w-7xl",
+}
diff --git a/packages/ui/src/modals/index.ts b/packages/ui/src/modals/index.ts
new file mode 100644
index 0000000..41737eb
--- /dev/null
+++ b/packages/ui/src/modals/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./alert-modal";
+export * from "./constants";
+export * from "./modal-core";
diff --git a/packages/ui/src/modals/modal-core.tsx b/packages/ui/src/modals/modal-core.tsx
new file mode 100644
index 0000000..ede3e34
--- /dev/null
+++ b/packages/ui/src/modals/modal-core.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Dialog, Transition } from "@headlessui/react";
+import React, { Fragment } from "react";
+// constants
+import { cn } from "../utils";
+import { EModalPosition, EModalWidth } from "./constants";
+// helpers
+
+type Props = {
+  children: React.ReactNode;
+  handleClose?: () => void;
+  isOpen: boolean;
+  position?: EModalPosition;
+  width?: EModalWidth;
+  className?: string;
+};
+export function ModalCore(props: Props) {
+  const {
+    children,
+    handleClose,
+    isOpen,
+    position = EModalPosition.CENTER,
+    width = EModalWidth.XXL,
+    className = "",
+  } = props;
+
+  return (
+    <Transition.Root show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-30" onClose={() => handleClose && handleClose()}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-backdrop transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-30 overflow-y-auto">
+          <div className={position}>
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel
+                className={cn(
+                  "relative w-full transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all",
+                  width,
+                  className
+                )}
+              >
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+}
diff --git a/packages/ui/src/oauth/index.ts b/packages/ui/src/oauth/index.ts
new file mode 100644
index 0000000..200a210
--- /dev/null
+++ b/packages/ui/src/oauth/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./oauth-options";
diff --git a/packages/ui/src/oauth/oauth-button.tsx b/packages/ui/src/oauth/oauth-button.tsx
new file mode 100644
index 0000000..002b0c5
--- /dev/null
+++ b/packages/ui/src/oauth/oauth-button.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+
+export interface OAuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  icon: React.ReactNode;
+  compact?: boolean;
+}
+
+const OAuthButton = React.forwardRef(function OAuthButton(
+  props: OAuthButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const { text, icon, compact = false, className = "", ...rest } = props;
+
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        "bg-onboarding-background-200 hover:bg-onboarding-background-300 flex h-9 w-full items-center justify-center gap-2 rounded-md border border-strong px-4 py-2.5 text-13 font-medium text-primary duration-300",
+        className
+      )}
+      {...rest}
+    >
+      <div className="flex flex-shrink-0 items-center justify-center">{icon}</div>
+      {!compact && (
+        <span className="flex flex-grow items-center justify-center text-body-sm-regular transition-opacity duration-300">
+          {text}
+        </span>
+      )}
+    </button>
+  );
+});
+
+OAuthButton.displayName = "plane-ui-oauth-button";
+
+export { OAuthButton };
diff --git a/packages/ui/src/oauth/oauth-options.tsx b/packages/ui/src/oauth/oauth-options.tsx
new file mode 100644
index 0000000..0e0c01e
--- /dev/null
+++ b/packages/ui/src/oauth/oauth-options.tsx
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import { OAuthButton } from "./oauth-button";
+
+export type TOAuthOption = {
+  id: string;
+  text: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  enabled?: boolean;
+};
+
+type OAuthOptionsProps = {
+  options: TOAuthOption[];
+  compact?: boolean;
+  showDivider?: boolean;
+  className?: string;
+  containerClassName?: string;
+};
+
+export function OAuthOptions(props: OAuthOptionsProps) {
+  const { options, compact = false, showDivider = true, className = "", containerClassName = "" } = props;
+
+  // Filter enabled options
+  const enabledOptions = options.filter((option) => option.enabled !== false);
+
+  if (enabledOptions.length === 0) return null;
+
+  return (
+    <div className={cn("w-full", containerClassName)}>
+      <div
+        className={cn(
+          "flex gap-4 overflow-hidden transition-all duration-500 ease-in-out",
+          compact ? "flex-row" : "flex-col",
+          className
+        )}
+      >
+        {enabledOptions.map((option) => (
+          <OAuthButton
+            key={option.id}
+            text={option.text}
+            icon={option.icon}
+            onClick={option.onClick}
+            compact={compact}
+            className="transition-all duration-300 ease-in-out"
+          />
+        ))}
+      </div>
+
+      {showDivider && (
+        <div className="mt-4 flex items-center transition-all duration-300">
+          <hr className="w-full border-strong transition-colors duration-300" />
+          <p className="mx-3 flex-shrink-0 text-center text-13 text-placeholder transition-colors duration-300">or</p>
+          <hr className="w-full border-strong transition-colors duration-300" />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui/src/popovers/index.ts b/packages/ui/src/popovers/index.ts
new file mode 100644
index 0000000..e60cea9
--- /dev/null
+++ b/packages/ui/src/popovers/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./popover";
+export * from "./popover-menu";
diff --git a/packages/ui/src/popovers/popover-menu.stories.tsx b/packages/ui/src/popovers/popover-menu.stories.tsx
new file mode 100644
index 0000000..292cc1b
--- /dev/null
+++ b/packages/ui/src/popovers/popover-menu.stories.tsx
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { PopoverMenu } from "./popover-menu";
+
+type TPopoverMenu = {
+  id: number;
+  name: string;
+};
+
+const meta: Meta<typeof PopoverMenu<TPopoverMenu>> = {
+  title: "Components/PopoverMenu",
+  component: PopoverMenu,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    popperPosition: "bottom-start",
+    panelClassName: "rounded-sm bg-gray-100 p-2",
+    data: [
+      { id: 1, name: "John Doe" },
+      { id: 2, name: "Jane Doe" },
+      { id: 3, name: "John Smith" },
+      { id: 4, name: "Jane Smith" },
+    ],
+    keyExtractor: (item, index: number) => `${item.id}-${index}`,
+    render: (item: TPopoverMenu) => (
+      <div className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all">
+        {item.name}
+      </div>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PopoverMenu<TPopoverMenu>>;
+
+export const Default: Story = {};
diff --git a/packages/ui/src/popovers/popover-menu.tsx b/packages/ui/src/popovers/popover-menu.tsx
new file mode 100644
index 0000000..cc194d9
--- /dev/null
+++ b/packages/ui/src/popovers/popover-menu.tsx
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React, { Fragment } from "react";
+// components
+import { cn } from "../utils";
+import { Popover } from "./popover";
+// helpers
+// types
+import type { TPopoverMenu } from "./types";
+
+export function PopoverMenu<T>(props: TPopoverMenu<T>) {
+  const {
+    popperPosition = "bottom-end",
+    popperPadding = 0,
+    buttonClassName = "",
+    button,
+    disabled,
+    panelClassName = "",
+    data,
+    popoverClassName = "",
+    keyExtractor,
+    render,
+    popoverButtonRef,
+  } = props;
+
+  return (
+    <Popover
+      popperPosition={popperPosition}
+      popperPadding={popperPadding}
+      buttonClassName={buttonClassName}
+      button={button}
+      disabled={disabled}
+      panelClassName={cn(
+        "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none",
+        panelClassName
+      )}
+      popoverClassName={popoverClassName}
+      popoverButtonRef={popoverButtonRef}
+    >
+      <Fragment>
+        {data.map((item, index) => (
+          <Fragment key={keyExtractor(item, index)}>{render(item, index)}</Fragment>
+        ))}
+      </Fragment>
+    </Popover>
+  );
+}
diff --git a/packages/ui/src/popovers/popover.stories.tsx b/packages/ui/src/popovers/popover.stories.tsx
new file mode 100644
index 0000000..030367b
--- /dev/null
+++ b/packages/ui/src/popovers/popover.stories.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Popover } from "./popover";
+
+const meta: Meta<typeof Popover> = {
+  title: "Popover",
+  component: Popover,
+};
+
+export default meta;
+
+// types
+type Story = StoryObj<typeof Popover>;
+
+// data
+
+// components
+const RenderCustomPopoverComponent = (
+  <div className="space-y-2">
+    <div className="text-gray-500 text-13 font-medium">Your custom component</div>
+    <div>
+      {["option1", "option2", "option3"].map((option) => (
+        <div
+          key={option}
+          className="text-gray-600 hover:text-gray-700 hover:bg-gray-200 cursor-pointer rounded-xs px-1.5 py-0.5 text-13 capitalize transition-all"
+        >
+          {option}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+// stories
+export const Default: Story = {
+  args: {
+    popperPosition: "bottom-start",
+    panelClassName: "rounded-sm bg-gray-100 p-2",
+    children: RenderCustomPopoverComponent,
+  },
+};
+
+export const CustomMenuButton: Story = {
+  args: {
+    popperPosition: "bottom-start",
+    button: (
+      <div className="bg-gray-100 hover:bg-gray-200 rounded-sm p-2 text-13 font-medium transition-all">
+        Custom Menu Button
+      </div>
+    ),
+    panelClassName: "rounded-sm bg-gray-100 p-2",
+    children: RenderCustomPopoverComponent,
+  },
+};
diff --git a/packages/ui/src/popovers/popover.tsx b/packages/ui/src/popovers/popover.tsx
new file mode 100644
index 0000000..15ebd02
--- /dev/null
+++ b/packages/ui/src/popovers/popover.tsx
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { Popover as HeadlessReactPopover, Transition } from "@headlessui/react";
+import { MoreVerticalOutline } from "@makeplane/propel/icons";
+import type { Ref } from "react";
+import React, { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+// helpers
+import { cn } from "../utils";
+// types
+import type { TPopover } from "./types";
+
+export function Popover(props: TPopover) {
+  const {
+    popperPosition = "bottom-end",
+    popperPadding = 0,
+    buttonClassName = "",
+    popoverClassName = "",
+    button,
+    disabled = false,
+    panelClassName = "",
+    children,
+    popoverButtonRef,
+    buttonRefClassName = "",
+  } = props;
+  // states
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
+  // Headless UI v2 types Panel's ref as Ref<HTMLElement> rather than the concrete tag.
+  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
+
+  // react-popper derived values
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: popperPosition,
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: popperPadding,
+        },
+      },
+    ],
+  });
+
+  return (
+    <HeadlessReactPopover className={cn("relative flex h-full w-full items-center justify-center", popoverClassName)}>
+      <div ref={setReferenceElement} className={cn("w-full", buttonRefClassName)}>
+        <HeadlessReactPopover.Button
+          ref={popoverButtonRef as Ref<HTMLButtonElement>}
+          className={cn(
+            {
+              "flex h-6 w-6 items-center justify-center rounded-sm bg-surface-2 text-14 transition-all hover:bg-layer-1":
+                !button,
+            },
+            buttonClassName
+          )}
+          disabled={disabled}
+        >
+          {button ? button : <MoreVerticalOutline className="h-3 w-3" />}
+        </HeadlessReactPopover.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <HeadlessReactPopover.Panel
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+          className={cn("absolute top-full left-0 z-20 mt-2 w-screen max-w-xs", panelClassName)}
+        >
+          {children}
+        </HeadlessReactPopover.Panel>
+      </Transition>
+    </HeadlessReactPopover>
+  );
+}
diff --git a/packages/ui/src/popovers/types.ts b/packages/ui/src/popovers/types.ts
new file mode 100644
index 0000000..a2c3d33
--- /dev/null
+++ b/packages/ui/src/popovers/types.ts
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Placement } from "@popperjs/core";
+import type { MutableRefObject, ReactNode } from "react";
+
+export type TPopoverButtonDefaultOptions = {
+  // button and button styling
+  button?: ReactNode;
+  buttonClassName?: string;
+  buttonRefClassName?: string;
+  disabled?: boolean;
+};
+
+export type TPopoverDefaultOptions = TPopoverButtonDefaultOptions & {
+  // popper styling
+  popperPosition?: Placement | undefined;
+  popperPadding?: number | undefined;
+  // panel styling
+  panelClassName?: string;
+  popoverClassName?: string;
+  popoverButtonRef?: MutableRefObject<HTMLButtonElement | null>;
+};
+
+export type TPopover = TPopoverDefaultOptions & {
+  // children
+  children: ReactNode;
+};
+
+export type TPopoverMenu<T> = TPopoverDefaultOptions & {
+  data: T[];
+  keyExtractor: (item: T, index: number) => string;
+  render: (item: T, index: number) => ReactNode;
+};
diff --git a/packages/ui/src/row/helper.tsx b/packages/ui/src/row/helper.tsx
new file mode 100644
index 0000000..d856771
--- /dev/null
+++ b/packages/ui/src/row/helper.tsx
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum ERowVariant {
+  REGULAR = "regular",
+  HUGGING = "hugging",
+}
+export type TRowVariant = ERowVariant.REGULAR | ERowVariant.HUGGING;
+export interface IRowProperties {
+  [key: string]: string;
+}
+export const rowStyle: IRowProperties = {
+  [ERowVariant.REGULAR]: "px-page-x",
+  [ERowVariant.HUGGING]: "px-0",
+};
diff --git a/packages/ui/src/row/index.ts b/packages/ui/src/row/index.ts
new file mode 100644
index 0000000..36afed3
--- /dev/null
+++ b/packages/ui/src/row/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./row";
diff --git a/packages/ui/src/row/row.tsx b/packages/ui/src/row/row.tsx
new file mode 100644
index 0000000..809a1c8
--- /dev/null
+++ b/packages/ui/src/row/row.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import type { TRowVariant } from "./helper";
+import { ERowVariant, rowStyle } from "./helper";
+
+export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: TRowVariant;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Row = React.forwardRef(function Row(props: RowProps, ref: React.ForwardedRef<HTMLDivElement>) {
+  const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
+
+  const style = rowStyle[variant];
+
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+Row.displayName = "plane-ui-row";
+
+export { Row, ERowVariant };
diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx
new file mode 100644
index 0000000..0d369e1
--- /dev/null
+++ b/packages/ui/src/sortable/draggable.tsx
@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// @ts-expect-error Due to live server dependencies
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js";
+import {
+  draggable,
+  dropTargetForElements,
+  // @ts-expect-error Due to live server dependencies
+} from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
+import {
+  attachClosestEdge,
+  extractClosestEdge,
+  // @ts-expect-error Due to live server dependencies
+} from "@atlaskit/pragmatic-drag-and-drop-hitbox/dist/cjs/closest-edge.js";
+import { isEqual } from "lodash-es";
+import React, { useEffect, useRef, useState } from "react";
+import { DropIndicator } from "../drop-indicator";
+import { cn } from "../utils";
+
+type Props = {
+  children: React.ReactNode;
+  data: any; //@todo make this generic
+  className?: string;
+};
+
+function Draggable({ children, data, className }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState<boolean>(false); // NEW
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+
+  const [closestEdge, setClosestEdge] = useState<string | null>(null);
+  useEffect(() => {
+    const el = ref.current;
+
+    if (el) {
+      combine(
+        draggable({
+          element: el,
+          onDragStart: () => setDragging(true), // NEW
+          onDrop: () => setDragging(false), // NEW
+          getInitialData: () => data,
+        }),
+        dropTargetForElements({
+          element: el,
+          // @ts-expect-error Due to live server dependencies
+          onDragEnter: (args) => {
+            setIsDraggedOver(true);
+            setClosestEdge(extractClosestEdge(args.self.data));
+          },
+          onDragLeave: () => setIsDraggedOver(false),
+          onDrop: () => {
+            setIsDraggedOver(false);
+          },
+          // @ts-expect-error Due to live server dependencies
+          canDrop: ({ source }) => !isEqual(source.data, data) && source.data.__uuid__ === data.__uuid__,
+          // @ts-expect-error Due to live server dependencies
+          getData: ({ input, element }) =>
+            attachClosestEdge(data, {
+              input,
+              element,
+              allowedEdges: ["top", "bottom"],
+            }),
+        })
+      );
+    }
+  }, [data]);
+
+  return (
+    <div ref={ref} className={cn(dragging && "opacity-25", className)}>
+      {<DropIndicator isVisible={isDraggedOver && closestEdge === "top"} />}
+      {children}
+      {<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />}
+    </div>
+  );
+}
+
+export { Draggable };
diff --git a/packages/ui/src/sortable/index.ts b/packages/ui/src/sortable/index.ts
new file mode 100644
index 0000000..02e96af
--- /dev/null
+++ b/packages/ui/src/sortable/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./sortable";
diff --git a/packages/ui/src/sortable/sortable.stories.tsx b/packages/ui/src/sortable/sortable.stories.tsx
new file mode 100644
index 0000000..474a764
--- /dev/null
+++ b/packages/ui/src/sortable/sortable.stories.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Sortable } from "./sortable";
+
+type StoryItem = { id: string; name: string };
+
+const meta: Meta<typeof Sortable<StoryItem>> = {
+  title: "Sortable",
+  component: Sortable,
+  args: {
+    data: [
+      { id: "1", name: "John Doe" },
+      { id: "2", name: "Satish" },
+      { id: "3", name: "Alice" },
+      { id: "4", name: "Bob" },
+      { id: "5", name: "Charlie" },
+    ],
+    render: (item: StoryItem) => (
+      // <Draggable data={item} className="rounded-lg">
+      <div className="border">{item.name}</div>
+      // </Draggable>
+    ),
+    onChange: (data) => console.log(data.map(({ id }) => id)),
+    keyExtractor: (item) => item.id,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/ui/src/sortable/sortable.tsx b/packages/ui/src/sortable/sortable.tsx
new file mode 100644
index 0000000..ceb94de
--- /dev/null
+++ b/packages/ui/src/sortable/sortable.tsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// @ts-expect-error Due to live server dependencies
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/element/adapter.js";
+import React, { Fragment, useEffect, useMemo } from "react";
+import { Draggable } from "./draggable";
+
+type TEnhancedData<T> = T & { __uuid__?: string };
+
+type Props<T> = {
+  data: TEnhancedData<T>[];
+  render: (item: T, index: number) => React.ReactNode;
+  onChange: (data: T[], movedItem?: T) => void;
+  keyExtractor: (item: T, index: number) => string;
+  containerClassName?: string;
+  id?: string;
+};
+
+const moveItem = <T,>(
+  data: TEnhancedData<T>[],
+  source: TEnhancedData<T>,
+  destination: TEnhancedData<T> & Record<symbol, string>,
+  keyExtractor: (item: T, index: number) => string
+): {
+  newData: T[];
+  movedItem: T | undefined;
+} => {
+  const sourceIndex = data.findIndex((item, index) => keyExtractor(item, index) === keyExtractor(source, 0));
+  if (sourceIndex === -1) return { newData: data, movedItem: undefined };
+
+  const destinationIndex = data.findIndex((item, index) => keyExtractor(item, index) === keyExtractor(destination, 0));
+
+  if (destinationIndex === -1) return { newData: data, movedItem: undefined };
+
+  const symbolKey = Reflect.ownKeys(destination).find((key) => key.toString() === "Symbol(closestEdge)");
+  const position = symbolKey ? destination[symbolKey as symbol] : "bottom"; // Add 'as symbol' to cast symbolKey to symbol
+
+  // Calculate final position before removing source item
+  const finalIndex = position === "bottom" ? destinationIndex + 1 : destinationIndex;
+
+  // Adjust for the fact that we're removing the source item first
+  // If source is before destination, removing it shifts everything back by 1
+  const adjustedDestinationIndex = finalIndex > sourceIndex ? finalIndex - 1 : finalIndex;
+
+  const newData = [...data];
+  const [movedItem] = newData.splice(sourceIndex, 1);
+
+  // Insert at the calculated position (bounds check is implicit in splice)
+  newData.splice(adjustedDestinationIndex, 0, movedItem);
+
+  const { __uuid__: movedItemId, ...movedItemData } = movedItem;
+  return {
+    newData: newData.map((item) => {
+      const { __uuid__: uuid, ...rest } = item;
+      return rest as T;
+    }),
+    movedItem: movedItemData as T,
+  };
+};
+
+export function Sortable<T>({ data, render, onChange, keyExtractor, containerClassName, id }: Props<T>) {
+  useEffect(() => {
+    const unsubscribe = monitorForElements({
+      // @ts-expect-error Due to live server dependencies
+      onDrop({ source, location }) {
+        const destination = location?.current?.dropTargets[0];
+        if (!destination) return;
+        const { newData, movedItem } = moveItem(
+          data,
+          source.data as TEnhancedData<T>,
+          destination.data as TEnhancedData<T> & { closestEdge: string },
+          keyExtractor
+        );
+        onChange(newData, movedItem);
+      },
+    });
+
+    // Clean up the subscription on unmount
+    return () => {
+      if (unsubscribe) unsubscribe();
+    };
+  }, [data, keyExtractor, onChange]);
+
+  const enhancedData = useMemo(() => {
+    const uuid = id ? id : Math.random().toString(36).substring(7);
+    return data.map((item) => ({ ...item, __uuid__: uuid }));
+  }, [data, id]);
+
+  return (
+    <>
+      {data.map((item, index) => (
+        <Draggable
+          key={keyExtractor(enhancedData[index], index)}
+          data={enhancedData[index]}
+          className={containerClassName}
+        >
+          <Fragment>{render(item, index)}</Fragment>
+        </Draggable>
+      ))}
+    </>
+  );
+}
+
+export default Sortable;
diff --git a/packages/ui/src/spinners/circular-spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx
new file mode 100644
index 0000000..59aacd6
--- /dev/null
+++ b/packages/ui/src/spinners/circular-spinner.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+// helpers
+import { cn } from "../utils";
+
+export interface ISpinner extends React.SVGAttributes<SVGElement> {
+  height?: string;
+  width?: string;
+  className?: string | undefined;
+}
+
+export function Spinner({ height = "32px", width = "32px", className = "" }: ISpinner) {
+  return (
+    <div role="status">
+      <svg
+        aria-hidden="true"
+        height={height}
+        width={width}
+        className={cn("animate-spin fill-accent-primary text-secondary", className)}
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}
diff --git a/packages/ui/src/spinners/index.ts b/packages/ui/src/spinners/index.ts
new file mode 100644
index 0000000..6f87ad9
--- /dev/null
+++ b/packages/ui/src/spinners/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./circular-spinner";
diff --git a/packages/ui/src/tables/index.ts b/packages/ui/src/tables/index.ts
new file mode 100644
index 0000000..d16beb4
--- /dev/null
+++ b/packages/ui/src/tables/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./table";
diff --git a/packages/ui/src/tables/table.stories.tsx b/packages/ui/src/tables/table.stories.tsx
new file mode 100644
index 0000000..e1b03fc
--- /dev/null
+++ b/packages/ui/src/tables/table.stories.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Table } from "./table";
+
+const meta: Meta<typeof Table> = {
+  title: "Table",
+  component: Table,
+};
+
+export default meta;
+
+// types
+type TTableData = {
+  id: string;
+  name: string;
+  age: number;
+};
+
+type Story = StoryObj<typeof Table<TTableData>>;
+
+// data
+const tableData: TTableData[] = [
+  { id: "1", name: "Ernest", age: 25 },
+  { id: "2", name: "Ann", age: 30 },
+  { id: "3", name: "Russell", age: 35 },
+  { id: "4", name: "Verna", age: 40 },
+];
+
+const tableColumns = [
+  {
+    key: "id",
+    content: "Id",
+    tdRender: (rowData: TTableData) => <span>{rowData.id}</span>,
+  },
+  {
+    key: "name",
+    content: "Name",
+    tdRender: (rowData: TTableData) => <span>{rowData.name}</span>,
+  },
+  {
+    key: "age",
+    content: "Age",
+    tdRender: (rowData: TTableData) => <span>{rowData.age}</span>,
+  },
+];
+
+// stories
+export const Default: Story = {
+  args: {
+    data: tableData,
+    columns: tableColumns,
+    keyExtractor: (rowData) => rowData.id,
+    tableClassName: "bg-gray-100",
+    tHeadClassName: "bg-gray-200",
+    tHeadTrClassName: "text-gray-600 text-left text-13 font-medium",
+    thClassName: "font-medium",
+    tBodyClassName: "bg-gray-100",
+    tBodyTrClassName: "text-gray-600",
+    tdClassName: "font-medium",
+  },
+};
diff --git a/packages/ui/src/tables/table.tsx b/packages/ui/src/tables/table.tsx
new file mode 100644
index 0000000..04ebaab
--- /dev/null
+++ b/packages/ui/src/tables/table.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+// helpers
+import { cn } from "../utils";
+// types
+import type { TTableData } from "./types";
+
+export function Table<T>(props: TTableData<T>) {
+  const {
+    data,
+    columns,
+    keyExtractor,
+    tableClassName = "",
+    tHeadClassName = "",
+    tHeadTrClassName = "",
+    thClassName = "",
+    tBodyClassName = "",
+    tBodyTrClassName = "",
+    tdClassName = "",
+  } = props;
+
+  return (
+    <table className={cn("w-full table-auto overflow-hidden whitespace-nowrap", tableClassName)}>
+      <thead className={cn("divide-y divide-subtle", tHeadClassName)}>
+        <tr className={cn("divide-x divide-subtle text-13 text-primary", tHeadTrClassName)}>
+          {columns.map((column) => (
+            <th key={column.key} className={cn("px-2.5 py-2", thClassName)}>
+              {(column?.thRender && column?.thRender()) || column.content}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody className={cn("divide-y divide-subtle", tBodyClassName)}>
+        {data.map((item) => (
+          <tr
+            key={keyExtractor(item)}
+            className={cn("divide-x divide-subtle text-13 text-secondary", tBodyTrClassName)}
+          >
+            {columns.map((column) => (
+              <td key={`${column.key}-${keyExtractor(item)}`} className={cn("px-2.5 py-2", tdClassName)}>
+                {column.tdRender(item)}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/packages/ui/src/tables/types.ts b/packages/ui/src/tables/types.ts
new file mode 100644
index 0000000..b43882f
--- /dev/null
+++ b/packages/ui/src/tables/types.ts
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TTableColumn<T> = {
+  key: string;
+  content: string;
+  thRender?: () => React.ReactNode;
+  tdRender: (rowData: T) => React.ReactNode;
+};
+
+export type TTableData<T> = {
+  data: T[];
+  columns: TTableColumn<T>[];
+  keyExtractor: (rowData: T) => string;
+  // classNames
+  tableClassName?: string;
+  tHeadClassName?: string;
+  tHeadTrClassName?: string;
+  thClassName?: string;
+  tBodyClassName?: string;
+  tBodyTrClassName?: string;
+  tdClassName?: string;
+};
diff --git a/packages/ui/src/tag/helper.tsx b/packages/ui/src/tag/helper.tsx
new file mode 100644
index 0000000..74f393e
--- /dev/null
+++ b/packages/ui/src/tag/helper.tsx
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export enum ETagVariant {
+  OUTLINED = "outlined",
+}
+export enum ETagSize {
+  SM = "sm",
+  LG = "lg",
+}
+export type TTagVariant = ETagVariant.OUTLINED;
+
+export type TTagSize = ETagSize.SM | ETagSize.LG;
+export interface ITagProperties {
+  [key: string]: string;
+}
+
+export const containerStyle: ITagProperties = {
+  [ETagVariant.OUTLINED]:
+    "flex items-center rounded-md border border-subtle text-11 text-tertiary hover:text-secondary min-h-[36px] my-auto capitalize flex-wrap cursor-pointer gap-1.5",
+};
+export const sizes = {
+  [ETagSize.SM]: "p-1.5",
+  [ETagSize.LG]: "p-6",
+};
+
+export const getTagStyle = (variant: TTagVariant, size: TTagSize) => containerStyle[variant] + " " + sizes[size];
diff --git a/packages/ui/src/tag/index.ts b/packages/ui/src/tag/index.ts
new file mode 100644
index 0000000..66ae25f
--- /dev/null
+++ b/packages/ui/src/tag/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./tag";
diff --git a/packages/ui/src/tag/tag.tsx b/packages/ui/src/tag/tag.tsx
new file mode 100644
index 0000000..29faf5a
--- /dev/null
+++ b/packages/ui/src/tag/tag.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import * as React from "react";
+import { cn } from "../utils";
+import type { TTagSize, TTagVariant } from "./helper";
+import { ETagSize, ETagVariant, getTagStyle } from "./helper";
+
+export interface TagProps extends React.ComponentProps<"div"> {
+  variant?: TTagVariant;
+  size?: TTagSize;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Tag = React.forwardRef(function Tag(props: TagProps, ref: React.ForwardedRef<HTMLDivElement>) {
+  const { variant = ETagVariant.OUTLINED, className = "", size = ETagSize.SM, children, ...rest } = props;
+
+  const style = getTagStyle(variant, size);
+  return (
+    <div ref={ref} className={cn(style, className)} {...rest}>
+      {children}
+    </div>
+  );
+});
+
+Tag.displayName = "plane-ui-container";
+
+export { Tag, ETagVariant, ETagSize };
diff --git a/packages/ui/src/utils/classname.tsx b/packages/ui/src/utils/classname.tsx
new file mode 100644
index 0000000..7ac89ce
--- /dev/null
+++ b/packages/ui/src/utils/classname.tsx
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export { cn } from "@plane/utils";
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
new file mode 100644
index 0000000..bb61992
--- /dev/null
+++ b/packages/ui/src/utils/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./classname";
diff --git a/packages/ui/styles/globals.css b/packages/ui/styles/globals.css
new file mode 100644
index 0000000..434ca7f
--- /dev/null
+++ b/packages/ui/styles/globals.css
@@ -0,0 +1 @@
+@import "@plane/tailwind-config/index.css";
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..f22b1c5
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "exactOptionalPropertyTypes": false,
+    "noImplicitReturns": false
+  },
+  "exclude": ["dist", "node_modules"]
+}
diff --git a/packages/ui/tsdown.config.ts b/packages/ui/tsdown.config.ts
new file mode 100644
index 0000000..92959ea
--- /dev/null
+++ b/packages/ui/tsdown.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  platform: "neutral",
+  exports: true,
+});
diff --git a/packages/utils/.prettierignore b/packages/utils/.prettierignore
new file mode 100644
index 0000000..b0b8bc6
--- /dev/null
+++ b/packages/utils/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/utils/package.json b/packages/utils/package.json
new file mode 100644
index 0000000..99d8133
--- /dev/null
+++ b/packages/utils/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "@plane/utils",
+  "version": "1.4.2",
+  "private": true,
+  "description": "Helper functions shared across multiple apps internally",
+  "license": "AGPL-3.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch --no-clean",
+    "check:lint": "oxlint --max-warnings=38 .",
+    "check:types": "tsc --noEmit",
+    "check:format": "oxfmt --check .",
+    "fix:lint": "oxlint --fix .",
+    "fix:format": "oxfmt .",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "@makeplane/propel": "catalog:",
+    "@plane/constants": "workspace:*",
+    "@plane/types": "workspace:*",
+    "chroma-js": "catalog:",
+    "clsx": "catalog:",
+    "date-fns": "catalog:",
+    "hast": "catalog:",
+    "hast-util-to-mdast": "catalog:",
+    "lodash-es": "catalog:",
+    "lucide-react": "catalog:",
+    "mdast": "catalog:",
+    "react": "catalog:",
+    "rehype-parse": "catalog:",
+    "rehype-remark": "catalog:",
+    "remark-gfm": "catalog:",
+    "remark-stringify": "catalog:",
+    "sanitize-html": "catalog:",
+    "tailwind-merge": "catalog:",
+    "unified": "catalog:",
+    "uuid": "catalog:"
+  },
+  "devDependencies": {
+    "@plane/typescript-config": "workspace:*",
+    "@types/chroma-js": "catalog:",
+    "@types/hast": "catalog:",
+    "@types/lodash-es": "catalog:",
+    "@types/mdast": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/sanitize-html": "catalog:",
+    "tsdown": "catalog:",
+    "typescript": "catalog:"
+  }
+}
diff --git a/packages/utils/src/array.ts b/packages/utils/src/array.ts
new file mode 100644
index 0000000..ea242e0
--- /dev/null
+++ b/packages/utils/src/array.ts
@@ -0,0 +1,278 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isEmpty } from "lodash-es";
+import type { IIssueLabel, IIssueLabelTree } from "@plane/types";
+
+/**
+ * @description Groups an array of objects by a specified key
+ * @param {any[]} array Array to group
+ * @param {string} key Key to group by (supports dot notation for nested objects)
+ * @returns {Object} Grouped object with keys being the grouped values
+ * @example
+ * const array = [{type: 'A', value: 1}, {type: 'B', value: 2}, {type: 'A', value: 3}];
+ * groupBy(array, 'type') // returns { A: [{type: 'A', value: 1}, {type: 'A', value: 3}], B: [{type: 'B', value: 2}] }
+ */
+export const groupBy = (array: any[], key: string) => {
+  const innerKey = key.split("."); // split the key by dot
+  return array.reduce((result, currentValue) => {
+    const key = innerKey.reduce((obj, i) => obj?.[i], currentValue) ?? "None"; // get the value of the inner key
+    (result[key] = result[key] || []).push(currentValue);
+    return result;
+  }, {});
+};
+
+/**
+ * @description Orders an array by a specified key in ascending or descending order
+ * @param {any[]} orgArray Original array to order
+ * @param {string} key Key to order by (supports dot notation for nested objects)
+ * @param {"ascending" | "descending"} ordering Sort order
+ * @returns {any[]} Ordered array
+ * @example
+ * const array = [{value: 2}, {value: 1}, {value: 3}];
+ * orderArrayBy(array, 'value', 'ascending') // returns [{value: 1}, {value: 2}, {value: 3}]
+ */
+export const orderArrayBy = (orgArray: any[], key: string, ordering: "ascending" | "descending" = "ascending") => {
+  if (!orgArray || !Array.isArray(orgArray) || orgArray.length === 0) return [];
+
+  const array = [...orgArray];
+
+  if (key[0] === "-") {
+    ordering = "descending";
+    key = key.slice(1);
+  }
+
+  const innerKey = key.split("."); // split the key by dot
+
+  return array.sort((a, b) => {
+    const keyA = innerKey.reduce((obj, i) => obj[i], a); // get the value of the inner key
+    const keyB = innerKey.reduce((obj, i) => obj[i], b); // get the value of the inner key
+    if (keyA < keyB) {
+      return ordering === "ascending" ? -1 : 1;
+    }
+    if (keyA > keyB) {
+      return ordering === "ascending" ? 1 : -1;
+    }
+    return 0;
+  });
+};
+
+/**
+ * @description Checks if an array contains duplicate values
+ * @param {any[]} array Array to check for duplicates
+ * @returns {boolean} True if duplicates exist, false otherwise
+ * @example
+ * checkDuplicates([1, 2, 2, 3]) // returns true
+ * checkDuplicates([1, 2, 3]) // returns false
+ */
+export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length;
+
+/**
+ * @description Finds the string with the most characters in an array of strings
+ * @param {string[]} strings Array of strings to check
+ * @returns {string} String with the most characters
+ * @example
+ * findStringWithMostCharacters(['a', 'bb', 'ccc']) // returns 'ccc'
+ */
+export const findStringWithMostCharacters = (strings: string[]): string => {
+  if (!strings || strings.length === 0) return "";
+
+  return strings.reduce((longestString, currentString) =>
+    currentString.length > longestString.length ? currentString : longestString
+  );
+};
+
+/**
+ * @description Checks if two arrays have the same elements regardless of order
+ * @param {any[] | null} arr1 First array
+ * @param {any[] | null} arr2 Second array
+ * @returns {boolean} True if arrays have same elements, false otherwise
+ * @example
+ * checkIfArraysHaveSameElements([1, 2], [2, 1]) // returns true
+ * checkIfArraysHaveSameElements([1, 2], [1, 3]) // returns false
+ */
+export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => {
+  if (!arr1 || !arr2) return false;
+  if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;
+  if (arr1.length === 0 && arr2.length === 0) return true;
+
+  return arr1.length === arr2.length && arr1.every((e) => arr2.includes(e));
+};
+
+type GroupedItems<T> = { [key: string]: T[] };
+
+/**
+ * @description Groups an array of objects by a specified field
+ * @param {T[]} array Array to group
+ * @param {keyof T} field Field to group by
+ * @returns {GroupedItems<T>} Grouped object
+ * @example
+ * const array = [{type: 'A', value: 1}, {type: 'B', value: 2}];
+ * groupByField(array, 'type') // returns { A: [{type: 'A', value: 1}], B: [{type: 'B', value: 2}] }
+ */
+export const groupByField = <T>(array: T[], field: keyof T): GroupedItems<T> =>
+  array.reduce((grouped: GroupedItems<T>, item: T) => {
+    const key = String(item[field]);
+    grouped[key] = (grouped[key] || []).concat(item);
+    return grouped;
+  }, {});
+
+/**
+ * @description Sorts an array of objects by a specified field
+ * @param {any[]} array Array to sort
+ * @param {string} field Field to sort by
+ * @returns {any[]} Sorted array
+ * @example
+ * const array = [{value: 2}, {value: 1}];
+ * sortByField(array, 'value') // returns [{value: 1}, {value: 2}]
+ */
+export const sortByField = (array: any[], field: string): any[] =>
+  array.sort((a, b) => (a[field] < b[field] ? -1 : a[field] > b[field] ? 1 : 0));
+
+/**
+ * @description Orders grouped data by a specified field
+ * @param {GroupedItems<T>} groupedData Grouped data object
+ * @param {keyof T} orderBy Field to order by
+ * @returns {GroupedItems<T>} Ordered grouped data
+ */
+export const orderGroupedDataByField = <T>(groupedData: GroupedItems<T>, orderBy: keyof T): GroupedItems<T> => {
+  for (const key in groupedData) {
+    if (groupedData.hasOwnProperty(key)) {
+      groupedData[key] = groupedData[key].sort((a, b) => {
+        if (a[orderBy] < b[orderBy]) return -1;
+        if (a[orderBy] > b[orderBy]) return 1;
+        return 0;
+      });
+    }
+  }
+  return groupedData;
+};
+
+/**
+ * @description Builds a tree structure from an array of labels
+ * @param {IIssueLabel[]} array Array of labels
+ * @param {any} parent Parent ID
+ * @returns {IIssueLabelTree[]} Tree structure
+ */
+export const buildTree = (array: IIssueLabel[], parent = null) => {
+  const tree: IIssueLabelTree[] = [];
+
+  array.forEach((item: any) => {
+    if (item.parent === parent) {
+      const children = buildTree(array, item.id);
+      item.children = children;
+      tree.push(item);
+    }
+  });
+
+  return tree;
+};
+
+/**
+ * @description Returns valid keys from object whose value is not falsy
+ * @param {any} obj Object to check
+ * @returns {string[]} Array of valid keys
+ * @example
+ * getValidKeysFromObject({a: 1, b: 0, c: null}) // returns ['a']
+ */
+export const getValidKeysFromObject = (obj: any) => {
+  if (!obj || isEmpty(obj) || typeof obj !== "object" || Array.isArray(obj)) return [];
+
+  return Object.keys(obj).filter((key) => !!obj[key]);
+};
+
+/**
+ * @description Converts an array of strings into an object with boolean true values
+ * @param {string[]} arrayStrings Array of strings
+ * @returns {Object} Object with string keys and boolean values
+ * @example
+ * convertStringArrayToBooleanObject(['a', 'b']) // returns {a: true, b: true}
+ */
+export const convertStringArrayToBooleanObject = (arrayStrings: string[]) => {
+  const obj: { [key: string]: boolean } = {};
+
+  for (const arrayString of arrayStrings) {
+    obj[arrayString] = true;
+  }
+
+  return obj;
+};
+
+/**
+ * @description Sorts dropdown options with selected items appearing first
+ * @param {T[]} options Array of dropdown options with value property
+ * @param {string[] | string | null | undefined} selectedValues Selected value(s) - array for multi-select, string for single-select
+ * @returns {T[]} Sorted array with selected items first
+ * @example
+ * const options = [{value: '1', label: 'A'}, {value: '2', label: 'B'}];
+ * sortBySelectedFirst(options, ['2']) // returns [{value: '2', label: 'B'}, {value: '1', label: 'A'}]
+ */
+export const sortBySelectedFirst = <T extends { value: string | null }>(
+  options: T[] | undefined,
+  selectedValues: string[] | string | null | undefined
+): T[] | undefined => {
+  if (!options || options.length === 0) return options;
+
+  // Normalize selectedValues to array for consistent handling
+  const selectedSet = new Set(Array.isArray(selectedValues) ? selectedValues : selectedValues ? [selectedValues] : []);
+
+  if (selectedSet.size === 0) return options;
+
+  // Create a shallow copy to avoid mutating the original array
+  return [...options].sort((a, b) => {
+    const aSelected = a.value !== null && selectedSet.has(a.value);
+    const bSelected = b.value !== null && selectedSet.has(b.value);
+
+    // If both selected or both unselected, maintain original order
+    if (aSelected === bSelected) return 0;
+
+    // Selected items come first
+    return aSelected ? -1 : 1;
+  });
+};
+
+/**
+ * @description Sorts dropdown options with current user first, then selected items, then unselected items
+ * @param {T[]} options Array of dropdown options with value property
+ * @param {string[] | string | null | undefined} selectedValues Selected value(s) - array for multi-select, string for single-select
+ * @param {string | undefined} currentUserId ID of the current user to prioritize
+ * @returns {T[]} Sorted array with current user first, then selected items, then unselected
+ * @example
+ * const options = [{value: 'user1'}, {value: 'user2'}, {value: 'user3'}];
+ * sortByCurrentUserThenSelected(options, ['user2'], 'user3')
+ * // returns [{value: 'user3'}, {value: 'user2'}, {value: 'user1'}]
+ */
+export const sortByCurrentUserThenSelected = <T extends { value: string | null }>(
+  options: T[] | undefined,
+  selectedValues: string[] | string | null | undefined,
+  currentUserId: string | undefined
+): T[] | undefined => {
+  if (!options || options.length === 0) return options;
+
+  // Normalize selectedValues to array for consistent handling
+  const selectedSet = new Set(Array.isArray(selectedValues) ? selectedValues : selectedValues ? [selectedValues] : []);
+
+  // Create a shallow copy to avoid mutating the original array
+  return [...options].sort((a, b) => {
+    const aIsCurrent = currentUserId && a.value === currentUserId;
+    const bIsCurrent = currentUserId && b.value === currentUserId;
+
+    // Current user always comes first
+    if (aIsCurrent && !bIsCurrent) return -1;
+    if (!aIsCurrent && bIsCurrent) return 1;
+    if (aIsCurrent && bIsCurrent) return 0;
+
+    // If neither is current user, sort by selection state
+    const aSelected = a.value !== null && selectedSet.has(a.value);
+    const bSelected = b.value !== null && selectedSet.has(b.value);
+
+    // If both selected or both unselected, maintain original order
+    if (aSelected === bSelected) return 0;
+
+    // Selected items come before unselected
+    return aSelected ? -1 : 1;
+  });
+};
diff --git a/packages/utils/src/attachment.ts b/packages/utils/src/attachment.ts
new file mode 100644
index 0000000..6813ae2
--- /dev/null
+++ b/packages/utils/src/attachment.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const generateFileName = (fileName: string) => {
+  const date = new Date();
+  const timestamp = date.getTime();
+
+  const _fileName = getFileName(fileName);
+  const nameWithoutExtension = _fileName.length > 80 ? _fileName.substring(0, 80) : _fileName;
+  const extension = getFileExtension(fileName);
+
+  return `${nameWithoutExtension}-${timestamp}.${extension}`;
+};
+
+export const getFileExtension = (filename: string) => filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
+
+export const getFileName = (fileName: string) => {
+  const dotIndex = fileName.lastIndexOf(".");
+
+  const nameWithoutExtension = fileName.substring(0, dotIndex);
+
+  return nameWithoutExtension;
+};
+
+export const convertBytesToSize = (bytes: number) => {
+  let size;
+
+  if (bytes < 1024 * 1024) {
+    size = Math.round(bytes / 1024) + " KB";
+  } else {
+    size = Math.round(bytes / (1024 * 1024)) + " MB";
+  }
+
+  return size;
+};
diff --git a/packages/utils/src/auth.ts b/packages/utils/src/auth.ts
new file mode 100644
index 0000000..cd0646a
--- /dev/null
+++ b/packages/utils/src/auth.ts
@@ -0,0 +1,369 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+// plane imports
+import type { TAuthErrorInfo } from "@plane/constants";
+import { E_PASSWORD_STRENGTH, EErrorAlertType, EAuthErrorCodes } from "@plane/constants";
+
+/**
+ * @description Password strength levels
+ */
+export enum PasswordStrength {
+  EMPTY = "empty",
+  WEAK = "weak",
+  FAIR = "fair",
+  GOOD = "good",
+  STRONG = "strong",
+}
+
+/**
+ * Calculate password strength based on various criteria
+ */
+export const getPasswordStrength = (password: string): E_PASSWORD_STRENGTH => {
+  if (!password || password === "" || password.length <= 0) {
+    return E_PASSWORD_STRENGTH.EMPTY;
+  }
+
+  if (password.length < 8) {
+    return E_PASSWORD_STRENGTH.LENGTH_NOT_VALID;
+  }
+
+  // Check all criteria
+  const hasUpperCase = /[A-Z]/.test(password);
+  const hasLowerCase = /[a-z]/.test(password);
+  const hasDigit = /[0-9]/.test(password);
+  const hasSpecialChar = /[!@#$%^&*()\-_+=\[\]{}|;:'",.<>?/]/.test(password);
+
+  if (hasUpperCase && hasLowerCase && hasDigit && hasSpecialChar) {
+    return E_PASSWORD_STRENGTH.STRENGTH_VALID;
+  }
+
+  return E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
+};
+
+export type PasswordCriteria = {
+  key: string;
+  label: string;
+  isValid: boolean;
+};
+
+/**
+ * Get password criteria for validation display
+ */
+export const getPasswordCriteria = (password: string): PasswordCriteria[] => [
+  {
+    key: "length",
+    label: "Min 8 characters",
+    isValid: password.length >= 8,
+  },
+  {
+    key: "uppercase",
+    label: "Min 1 upper-case letter",
+    isValid: /[A-Z]/.test(password),
+  },
+  {
+    key: "lowercase",
+    label: "Min 1 lower-case letter",
+    isValid: /[a-z]/.test(password),
+  },
+  {
+    key: "number",
+    label: "Min 1 number",
+    isValid: /[0-9]/.test(password),
+  },
+  {
+    key: "special",
+    label: "Min 1 special character",
+    isValid: /[!@#$%^&*()\-_+=\[\]{}|;:'",.<>?/]/.test(password),
+  },
+];
+
+// Error code messages
+const errorCodeMessages: {
+  [key in EAuthErrorCodes]: { title: string; message: (email?: string) => ReactNode };
+} = {
+  // global
+  [EAuthErrorCodes.INSTANCE_NOT_CONFIGURED]: {
+    title: `Instance not configured`,
+    message: () => `Instance not configured. Please contact your administrator.`,
+  },
+  [EAuthErrorCodes.SIGNUP_DISABLED]: {
+    title: `Sign up disabled`,
+    message: () => `Sign up disabled. Please contact your administrator.`,
+  },
+  [EAuthErrorCodes.INVALID_PASSWORD]: {
+    title: `Invalid password`,
+    message: () => `Invalid password. Please try again.`,
+  },
+  [EAuthErrorCodes.PASSWORD_TOO_WEAK]: {
+    title: `Password too weak`,
+    message: () => `Please use a stronger password.`,
+  },
+  [EAuthErrorCodes.SMTP_NOT_CONFIGURED]: {
+    title: `SMTP not configured`,
+    message: () => `SMTP not configured. Please contact your administrator.`,
+  },
+  // email check in both sign up and sign in
+  [EAuthErrorCodes.INVALID_EMAIL]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+  [EAuthErrorCodes.EMAIL_REQUIRED]: {
+    title: `Email required`,
+    message: () => `Email required. Please try again.`,
+  },
+  // sign up
+  [EAuthErrorCodes.USER_ALREADY_EXIST]: {
+    title: `User already exists`,
+    message: () => `Your account is already registered. Sign in now.`,
+  },
+  [EAuthErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAuthErrorCodes.AUTHENTICATION_FAILED_SIGN_UP]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAuthErrorCodes.INVALID_EMAIL_SIGN_UP]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+  [EAuthErrorCodes.MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED]: {
+    title: `Email and code required`,
+    message: () => `Email and code required. Please try again.`,
+  },
+  [EAuthErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+  // sign in
+  [EAuthErrorCodes.BOT_USER_LOGIN_FORBIDDEN]: {
+    title: `Sign in not allowed`,
+    message: () => `This account cannot be used to sign in. Please use a personal account.`,
+  },
+  [EAuthErrorCodes.USER_ACCOUNT_DEACTIVATED]: {
+    title: `User account deactivated`,
+    message: () => `User account deactivated. Please contact administrator.`,
+  },
+  [EAuthErrorCodes.USER_DOES_NOT_EXIST]: {
+    title: `User does not exist`,
+    message: () => `No account found. Create one to get started.`,
+  },
+  [EAuthErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAuthErrorCodes.AUTHENTICATION_FAILED_SIGN_IN]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAuthErrorCodes.INVALID_EMAIL_SIGN_IN]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+  [EAuthErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED]: {
+    title: `Email and code required`,
+    message: () => `Email and code required. Please try again.`,
+  },
+  [EAuthErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN]: {
+    title: `Invalid email`,
+    message: () => `Invalid email. Please try again.`,
+  },
+  // Both Sign in and Sign up
+  [EAuthErrorCodes.INVALID_MAGIC_CODE_SIGN_IN]: {
+    title: `Authentication failed`,
+    message: () => `Invalid magic code. Please try again.`,
+  },
+  [EAuthErrorCodes.INVALID_MAGIC_CODE_SIGN_UP]: {
+    title: `Authentication failed`,
+    message: () => `Invalid magic code. Please try again.`,
+  },
+  [EAuthErrorCodes.EXPIRED_MAGIC_CODE_SIGN_IN]: {
+    title: `Expired magic code`,
+    message: () => `Expired magic code. Please try again.`,
+  },
+  [EAuthErrorCodes.EXPIRED_MAGIC_CODE_SIGN_UP]: {
+    title: `Expired magic code`,
+    message: () => `Expired magic code. Please try again.`,
+  },
+  [EAuthErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN]: {
+    title: `Expired magic code`,
+    message: () => `Expired magic code. Please try again.`,
+  },
+  [EAuthErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP]: {
+    title: `Expired magic code`,
+    message: () => `Expired magic code. Please try again.`,
+  },
+  // Oauth
+  [EAuthErrorCodes.OAUTH_NOT_CONFIGURED]: {
+    title: `OAuth not configured`,
+    message: () => `OAuth not configured. Please contact your administrator.`,
+  },
+  [EAuthErrorCodes.GOOGLE_NOT_CONFIGURED]: {
+    title: `Google not configured`,
+    message: () => `Google not configured. Please contact your administrator.`,
+  },
+  [EAuthErrorCodes.GITHUB_NOT_CONFIGURED]: {
+    title: `GitHub not configured`,
+    message: () => `GitHub not configured. Please contact your administrator.`,
+  },
+  [EAuthErrorCodes.GITLAB_NOT_CONFIGURED]: {
+    title: `GitLab not configured`,
+    message: () => `GitLab not configured. Please contact your administrator.`,
+  },
+  [EAuthErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR]: {
+    title: `Google OAuth provider error`,
+    message: () => `Google OAuth provider error. Please try again.`,
+  },
+  [EAuthErrorCodes.GITHUB_OAUTH_PROVIDER_ERROR]: {
+    title: `GitHub OAuth provider error`,
+    message: () => `GitHub OAuth provider error. Please try again.`,
+  },
+  [EAuthErrorCodes.GITLAB_OAUTH_PROVIDER_ERROR]: {
+    title: `GitLab OAuth provider error`,
+    message: () => `GitLab OAuth provider error. Please try again.`,
+  },
+  // Reset Password
+  [EAuthErrorCodes.INVALID_PASSWORD_TOKEN]: {
+    title: `Invalid password token`,
+    message: () => `Invalid password token. Please try again.`,
+  },
+  [EAuthErrorCodes.EXPIRED_PASSWORD_TOKEN]: {
+    title: `Expired password token`,
+    message: () => `Expired password token. Please try again.`,
+  },
+  // Change password
+  [EAuthErrorCodes.MISSING_PASSWORD]: {
+    title: `Password required`,
+    message: () => `Password required. Please try again.`,
+  },
+  [EAuthErrorCodes.INCORRECT_OLD_PASSWORD]: {
+    title: `Incorrect old password`,
+    message: () => `Incorrect old password. Please try again.`,
+  },
+  [EAuthErrorCodes.INVALID_NEW_PASSWORD]: {
+    title: `Invalid new password`,
+    message: () => `Invalid new password. Please try again.`,
+  },
+  // set password
+  [EAuthErrorCodes.PASSWORD_ALREADY_SET]: {
+    title: `Password already set`,
+    message: () => `Password already set. Please try again.`,
+  },
+  // admin
+  [EAuthErrorCodes.ADMIN_ALREADY_EXIST]: {
+    title: `Admin already exists`,
+    message: () => `Admin already exists. Please try again.`,
+  },
+  [EAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
+    title: `Email, password and first name required`,
+    message: () => `Email, password and first name required. Please try again.`,
+  },
+  [EAuthErrorCodes.INVALID_ADMIN_EMAIL]: {
+    title: `Invalid admin email`,
+    message: () => `Invalid admin email. Please try again.`,
+  },
+  [EAuthErrorCodes.INVALID_ADMIN_PASSWORD]: {
+    title: `Invalid admin password`,
+    message: () => `Invalid admin password. Please try again.`,
+  },
+  [EAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAuthErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
+    title: `Admin user already exists`,
+    message: () => `Admin user already exists. Sign in now.`,
+  },
+  [EAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
+    title: `Admin user does not exist`,
+    message: () => `Admin user does not exist. Sign in now.`,
+  },
+  [EAuthErrorCodes.MAGIC_LINK_LOGIN_DISABLED]: {
+    title: `Magic link login disabled`,
+    message: () => `Magic link login is disabled. Please use password to login.`,
+  },
+  [EAuthErrorCodes.PASSWORD_LOGIN_DISABLED]: {
+    title: `Password login disabled`,
+    message: () => `Password login is disabled. Please use magic link to login.`,
+  },
+  [EAuthErrorCodes.ADMIN_USER_DEACTIVATED]: {
+    title: `Admin user deactivated`,
+    message: () => `Admin user account has been deactivated. Please contact administrator.`,
+  },
+  [EAuthErrorCodes.RATE_LIMIT_EXCEEDED]: {
+    title: `Rate limit exceeded`,
+    message: () => `Too many requests. Please try again later.`,
+  },
+};
+
+// Error handler
+export const authErrorHandler = (errorCode: EAuthErrorCodes, email?: string): TAuthErrorInfo | undefined => {
+  const bannerAlertErrorCodes = [
+    EAuthErrorCodes.INSTANCE_NOT_CONFIGURED,
+    EAuthErrorCodes.INVALID_EMAIL,
+    EAuthErrorCodes.EMAIL_REQUIRED,
+    EAuthErrorCodes.SIGNUP_DISABLED,
+    EAuthErrorCodes.INVALID_PASSWORD,
+    EAuthErrorCodes.SMTP_NOT_CONFIGURED,
+    EAuthErrorCodes.USER_ALREADY_EXIST,
+    EAuthErrorCodes.AUTHENTICATION_FAILED_SIGN_UP,
+    EAuthErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP,
+    EAuthErrorCodes.INVALID_EMAIL_SIGN_UP,
+    EAuthErrorCodes.INVALID_EMAIL_MAGIC_SIGN_UP,
+    EAuthErrorCodes.MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED,
+    EAuthErrorCodes.USER_DOES_NOT_EXIST,
+    EAuthErrorCodes.AUTHENTICATION_FAILED_SIGN_IN,
+    EAuthErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_IN,
+    EAuthErrorCodes.INVALID_EMAIL_SIGN_IN,
+    EAuthErrorCodes.INVALID_EMAIL_MAGIC_SIGN_IN,
+    EAuthErrorCodes.MAGIC_SIGN_IN_EMAIL_CODE_REQUIRED,
+    EAuthErrorCodes.INVALID_MAGIC_CODE_SIGN_IN,
+    EAuthErrorCodes.INVALID_MAGIC_CODE_SIGN_UP,
+    EAuthErrorCodes.EXPIRED_MAGIC_CODE_SIGN_IN,
+    EAuthErrorCodes.EXPIRED_MAGIC_CODE_SIGN_UP,
+    EAuthErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN,
+    EAuthErrorCodes.EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP,
+    EAuthErrorCodes.OAUTH_NOT_CONFIGURED,
+    EAuthErrorCodes.GOOGLE_NOT_CONFIGURED,
+    EAuthErrorCodes.GITHUB_NOT_CONFIGURED,
+    EAuthErrorCodes.GITLAB_NOT_CONFIGURED,
+    EAuthErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR,
+    EAuthErrorCodes.GITHUB_OAUTH_PROVIDER_ERROR,
+    EAuthErrorCodes.GITLAB_OAUTH_PROVIDER_ERROR,
+    EAuthErrorCodes.INVALID_PASSWORD_TOKEN,
+    EAuthErrorCodes.EXPIRED_PASSWORD_TOKEN,
+    EAuthErrorCodes.INCORRECT_OLD_PASSWORD,
+    EAuthErrorCodes.INVALID_NEW_PASSWORD,
+    EAuthErrorCodes.PASSWORD_ALREADY_SET,
+    EAuthErrorCodes.ADMIN_ALREADY_EXIST,
+    EAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
+    EAuthErrorCodes.INVALID_ADMIN_EMAIL,
+    EAuthErrorCodes.INVALID_ADMIN_PASSWORD,
+    EAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
+    EAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED,
+    EAuthErrorCodes.ADMIN_USER_ALREADY_EXIST,
+    EAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
+    EAuthErrorCodes.BOT_USER_LOGIN_FORBIDDEN,
+    EAuthErrorCodes.USER_ACCOUNT_DEACTIVATED,
+  ];
+
+  if (bannerAlertErrorCodes.includes(errorCode))
+    return {
+      type: EErrorAlertType.BANNER_ALERT,
+      code: errorCode,
+      title: errorCodeMessages[errorCode]?.title || "Error",
+      message: errorCodeMessages[errorCode]?.message(email) || "Something went wrong. Please try again.",
+    };
+
+  return undefined;
+};
diff --git a/packages/utils/src/calendar.ts b/packages/utils/src/calendar.ts
new file mode 100644
index 0000000..3726d84
--- /dev/null
+++ b/packages/utils/src/calendar.ts
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { ICalendarDate, ICalendarPayload } from "@plane/types";
+import { EStartOfTheWeek } from "@plane/types";
+// local imports
+import { getWeekNumberOfDate, renderFormattedPayloadDate } from "./datetime";
+
+/**
+ * @returns {ICalendarPayload} calendar payload to render the calendar
+ * @param {ICalendarPayload | null} currentStructure current calendar payload
+ * @param {Date} startDate date of the month to render
+ * @param {EStartOfTheWeek} startOfWeek the day to start the week on
+ * @description Returns calendar payload to render the calendar, if currentStructure is null, it will generate the payload for the month of startDate, else it will construct the payload for the month of startDate and append it to the currentStructure
+ */
+export const generateCalendarData = (
+  currentStructure: ICalendarPayload | null,
+  startDate: Date,
+  startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY
+): ICalendarPayload => {
+  const calendarData: ICalendarPayload = currentStructure ?? {};
+
+  const startMonth = startDate.getMonth();
+  const startYear = startDate.getFullYear();
+
+  const currentDate = new Date(startYear, startMonth, 1);
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth();
+  const totalDaysInMonth = new Date(year, month + 1, 0).getDate();
+  const firstDayOfMonthRaw = new Date(year, month, 1).getDay(); // Sunday is 0, Monday is 1, ..., Saturday is 6
+
+  // Adjust firstDayOfMonth based on startOfWeek preference
+  // This calculates how many empty cells we need at the start of the calendar
+  const firstDayOfMonth = (firstDayOfMonthRaw - startOfWeek + 7) % 7;
+
+  calendarData[`y-${year}`] ||= {};
+  // Always reset the month data to ensure clean regeneration with correct startOfWeek
+  calendarData[`y-${year}`][`m-${month}`] = {};
+
+  const numWeeks = Math.ceil((totalDaysInMonth + firstDayOfMonth) / 7);
+
+  for (let week = 0; week < numWeeks; week++) {
+    const currentWeekObject: { [date: string]: ICalendarDate } = {};
+
+    const weekNumber = getWeekNumberOfDate(new Date(year, month, week * 7 - firstDayOfMonth + 1));
+
+    for (let i = 0; i < 7; i++) {
+      const dayNumber = week * 7 + i - firstDayOfMonth;
+
+      const date = new Date(year, month, dayNumber + 1);
+
+      const formattedDatePayload = renderFormattedPayloadDate(date);
+      if (formattedDatePayload)
+        currentWeekObject[formattedDatePayload] = {
+          date,
+          year,
+          month,
+          day: dayNumber + 1,
+          week: weekNumber,
+          is_current_month: date.getMonth() === month,
+          is_current_week: getWeekNumberOfDate(date) === getWeekNumberOfDate(new Date()),
+          is_today: date.toDateString() === new Date().toDateString(),
+        };
+    }
+
+    // Use sequential week index instead of calculated week number for the key
+    // This ensures weeks are grouped correctly regardless of startOfWeek preference
+    calendarData[`y-${year}`][`m-${month}`][`w-${week}`] = currentWeekObject;
+  }
+
+  return calendarData;
+};
+
+/**
+ * Returns a new array sorted by the startOfWeek.
+ * @param items Array of items to sort.
+ * @param getDayIndex Function to get the day index (0-6) from an item.
+ * @param startOfWeek The day to start the week on.
+ */
+export const getOrderedDays = <T>(
+  items: T[],
+  getDayIndex: (item: T) => number,
+  startOfWeek: EStartOfTheWeek = EStartOfTheWeek.SUNDAY
+): T[] =>
+  [...items].sort((a, b) => {
+    const dayA = (7 + getDayIndex(a) - startOfWeek) % 7;
+    const dayB = (7 + getDayIndex(b) - startOfWeek) % 7;
+    return dayA - dayB;
+  });
diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts
new file mode 100644
index 0000000..1fd4d08
--- /dev/null
+++ b/packages/utils/src/color.ts
@@ -0,0 +1,305 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Represents an RGB color with numeric values for red, green, and blue components
+ * @typedef {Object} TRgb
+ * @property {number} r - Red component (0-255)
+ * @property {number} g - Green component (0-255)
+ * @property {number} b - Blue component (0-255)
+ */
+export type TRgb = { r: number; g: number; b: number };
+
+export type THsl = { h: number; s: number; l: number };
+
+/**
+ * @description Validates and clamps color values to RGB range (0-255)
+ * @param {number} value - The color value to validate
+ * @returns {number} Clamped and floored value between 0-255
+ * @example
+ * validateColor(-10) // returns 0
+ * validateColor(300) // returns 255
+ * validateColor(128) // returns 128
+ */
+export const validateColor = (value: number) => {
+  if (value < 0) return 0;
+  if (value > 255) return 255;
+  return Math.floor(value);
+};
+
+/**
+ * Converts a decimal color value to two-character hex
+ * @param {number} value - Decimal color value (0-255)
+ * @returns {string} Two-character hex value with leading zero if needed
+ */
+export const toHex = (value: number) => validateColor(value).toString(16).padStart(2, "0");
+
+/**
+ * Converts a hexadecimal color code to RGB values
+ * @param {string} hex - The hexadecimal color code (e.g., "#ff0000" for red)
+ * @returns {RGB} An object containing the RGB values
+ * @example
+ * hexToRgb("#ff0000") // returns { r: 255, g: 0, b: 0 }
+ * hexToRgb("#00ff00") // returns { r: 0, g: 255, b: 0 }
+ * hexToRgb("#0000ff") // returns { r: 0, g: 0, b: 255 }
+ */
+export const hexToRgb = (hex: string): TRgb => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : { r: 0, g: 0, b: 0 };
+};
+
+/**
+ * Converts RGB values to a hexadecimal color code
+ * @param {RGB} rgb - An object containing RGB values
+ * @param {number} rgb.r - Red component (0-255)
+ * @param {number} rgb.g - Green component (0-255)
+ * @param {number} rgb.b - Blue component (0-255)
+ * @returns {string} The hexadecimal color code (e.g., "#ff0000" for red)
+ * @example
+ * rgbToHex({ r: 255, g: 0, b: 0 }) // returns "#ff0000"
+ * rgbToHex({ r: 0, g: 255, b: 0 }) // returns "#00ff00"
+ * rgbToHex({ r: 0, g: 0, b: 255 }) // returns "#0000ff"
+ */
+export const rgbToHex = ({ r, g, b }: TRgb): string => `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+
+/**
+ * Converts Hex values to HSL values
+ * @param {string} hex - The hexadecimal color code (e.g., "#ff0000" for red)
+ * @returns {HSL} An object containing the HSL values
+ * @example
+ * hexToHsl("#ff0000") // returns { h: 0, s: 100, l: 50 }
+ * hexToHsl("#00ff00") // returns { h: 120, s: 100, l: 50 }
+ * hexToHsl("#0000ff") // returns { h: 240, s: 100, l: 50 }
+ */
+export const hexToHsl = (hex: string): THsl => {
+  // return default value for invalid hex
+  if (!/^#[0-9A-Fa-f]{6}$/.test(hex)) return { h: 0, s: 0, l: 0 };
+
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+
+  return {
+    h: h * 360,
+    s: s * 100,
+    l: l * 100,
+  };
+};
+
+/**
+ * Converts HSL values to a hexadecimal color code
+ * @param {HSL} hsl - An object containing HSL values
+ * @param {number} hsl.h - Hue component (0-360)
+ * @param {number} hsl.s - Saturation component (0-100)
+ * @param {number} hsl.l - Lightness component (0-100)
+ * @returns {string} The hexadecimal color code (e.g., "#ff0000" for red)
+ * @example
+ * hslToHex({ h: 0, s: 100, l: 50 }) // returns "#ff0000"
+ * hslToHex({ h: 120, s: 100, l: 50 }) // returns "#00ff00"
+ * hslToHex({ h: 240, s: 100, l: 50 }) // returns "#0000ff"
+ */
+export const hslToHex = ({ h, s, l }: THsl): string => {
+  if (h < 0 || h > 360) return "#000000";
+  if (s < 0 || s > 100) return "#000000";
+  if (l < 0 || l > 100) return "#000000";
+
+  l /= 100;
+  const a = (s * Math.min(l, 1 - l)) / 100;
+
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color)
+      .toString(16)
+      .padStart(2, "0");
+  };
+
+  return `#${f(0)}${f(8)}${f(4)}`;
+};
+
+/**
+ * Calculate relative luminance of a color according to WCAG
+ * @param {Object} rgb - RGB color object with r, g, b properties
+ * @returns {number} Relative luminance value
+ */
+export const getLuminance = ({ r, g, b }: TRgb) => {
+  // Convert RGB to sRGB
+  const sR = r / 255;
+  const sG = g / 255;
+  const sB = b / 255;
+
+  // Convert sRGB to linear RGB with gamma correction
+  const R = sR <= 0.03928 ? sR / 12.92 : Math.pow((sR + 0.055) / 1.055, 2.4);
+  const G = sG <= 0.03928 ? sG / 12.92 : Math.pow((sG + 0.055) / 1.055, 2.4);
+  const B = sB <= 0.03928 ? sB / 12.92 : Math.pow((sB + 0.055) / 1.055, 2.4);
+
+  // Calculate luminance
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+};
+
+/**
+ * Calculate contrast ratio between two colors
+ * @param {Object} rgb1 - First RGB color object
+ * @param {Object} rgb2 - Second RGB color object
+ * @returns {number} Contrast ratio between the colors
+ */
+export function getContrastRatio(rgb1: { r: number; g: number; b: number }, rgb2: { r: number; g: number; b: number }) {
+  const luminance1 = getLuminance(rgb1);
+  const luminance2 = getLuminance(rgb2);
+
+  const lighter = Math.max(luminance1, luminance2);
+  const darker = Math.min(luminance1, luminance2);
+
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+/**
+ * Lighten a color by a specified amount
+ * @param {Object} rgb - RGB color object
+ * @param {number} amount - Amount to lighten (0-1)
+ * @returns {Object} Lightened RGB color
+ */
+export function lightenColor(rgb: { r: number; g: number; b: number }, amount: number) {
+  return {
+    r: rgb.r + (255 - rgb.r) * amount,
+    g: rgb.g + (255 - rgb.g) * amount,
+    b: rgb.b + (255 - rgb.b) * amount,
+  };
+}
+
+/**
+ * Darken a color by a specified amount
+ * @param {Object} rgb - RGB color object
+ * @param {number} amount - Amount to darken (0-1)
+ * @returns {Object} Darkened RGB color
+ */
+export function darkenColor(rgb: { r: number; g: number; b: number }, amount: number) {
+  return {
+    r: rgb.r * (1 - amount),
+    g: rgb.g * (1 - amount),
+    b: rgb.b * (1 - amount),
+  };
+}
+
+/**
+ * Generate appropriate foreground and background colors based on input color
+ * @param {string} color - Input color in hex format
+ * @returns {Object} Object containing foreground and background colors in hex format
+ */
+export function generateIconColors(color: string) {
+  // Parse input color
+  const rgbColor = hexToRgb(color);
+  const luminance = getLuminance(rgbColor);
+
+  // Initialize output colors
+  let foregroundColor = rgbColor;
+
+  // Constants for color adjustment
+  const MIN_CONTRAST_RATIO = 3.0; // Minimum acceptable contrast ratio
+
+  // For light colors, use as foreground and darken for background
+  if (luminance > 0.5) {
+    // Make sure the foreground color is dark enough for visibility
+    let adjustedForeground = foregroundColor;
+    const whiteContrast = getContrastRatio(foregroundColor, { r: 255, g: 255, b: 255 });
+
+    if (whiteContrast < MIN_CONTRAST_RATIO) {
+      // Darken the foreground color until it has enough contrast
+      let darkenAmount = 0.1;
+      while (darkenAmount <= 0.9) {
+        adjustedForeground = darkenColor(foregroundColor, darkenAmount);
+        if (getContrastRatio(adjustedForeground, { r: 255, g: 255, b: 255 }) >= MIN_CONTRAST_RATIO) {
+          break;
+        }
+        darkenAmount += 0.1;
+      }
+      foregroundColor = adjustedForeground;
+    }
+  }
+  // For dark colors, use as foreground and lighten for background
+  else {
+    // Make sure the foreground color is light enough for visibility
+    let adjustedForeground = foregroundColor;
+    const blackContrast = getContrastRatio(foregroundColor, { r: 0, g: 0, b: 0 });
+
+    if (blackContrast < MIN_CONTRAST_RATIO) {
+      // Lighten the foreground color until it has enough contrast
+      let lightenAmount = 0.1;
+      while (lightenAmount <= 0.9) {
+        adjustedForeground = lightenColor(foregroundColor, lightenAmount);
+        if (getContrastRatio(adjustedForeground, { r: 0, g: 0, b: 0 }) >= MIN_CONTRAST_RATIO) {
+          break;
+        }
+        lightenAmount += 0.1;
+      }
+      foregroundColor = adjustedForeground;
+    }
+  }
+
+  return {
+    foreground: rgbToHex({ r: foregroundColor.r, g: foregroundColor.g, b: foregroundColor.b }),
+    background: `rgba(${foregroundColor.r}, ${foregroundColor.g}, ${foregroundColor.b}, 0.25)`,
+  };
+}
+
+/**
+ * @description Generates a deterministic HSL color based on input string
+ * @param {string} input - Input string to generate color from
+ * @returns {THsl} An object containing the HSL values
+ * @example
+ * generateRandomColor("hello") // returns consistent HSL color for "hello"
+ * generateRandomColor("") // returns { h: 0, s: 0, l: 0 }
+ */
+export const generateRandomColor = (input: string): THsl => {
+  // If input is falsy, generate a random seed string.
+  // The random seed is created by converting a random number to base-36 and taking a substring.
+  const seed = input || Math.random().toString(36).substring(2, 8);
+
+  const uniqueId = seed.length.toString() + seed; // Unique identifier based on string length
+  const combinedString = uniqueId + seed;
+
+  // Create a hash value from the combined string.
+  const hash = Array.from(combinedString).reduce((acc, char) => {
+    const charCode = char.charCodeAt(0);
+    return (acc << 5) - acc + charCode;
+  }, 0);
+
+  // Derive the HSL values from the hash.
+  const hue = Math.abs(hash % 360);
+  const saturation = 70; // Maintains a good amount of color
+  const lightness = 70; // Increased lightness for a pastel look
+
+  return { h: hue, s: saturation, l: lightness };
+};
diff --git a/packages/utils/src/common.ts b/packages/utils/src/common.ts
new file mode 100644
index 0000000..68fe30b
--- /dev/null
+++ b/packages/utils/src/common.ts
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { clsx } from "clsx";
+import type { ClassValue } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+import type { CompleteOrEmpty } from "@plane/types";
+
+// Support email can be configured by the application
+export const getSupportEmail = (defaultEmail: string = ""): string => defaultEmail;
+
+// Matches custom typography classes: text-h1-semibold, text-body-md-regular, text-caption-xs-medium, etc.
+const isCustomTypography = (value: string) =>
+  !/^(h[1-6]|body-(xs|sm|md)|caption-(xs|sm|md))-(regular|medium|semibold|bold)$/.test(value);
+
+// Matches custom font size classes: text-9, text-10, text-11, text-12, text-13, text-14, text-16, text-18, text-20, text-24, text-28, text-32, text-40
+const isCustomFontSize = (value: string) => /^(9|10|11|12|13|14|16|18|20|24|28|32|40)$/.test(value);
+
+// Matches custom text color classes: text-primary, text-on-color, text-secondary, etc.
+const CUSTOM_TEXT_COLORS = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "placeholder",
+  "disabled",
+  "accent-primary",
+  "accent-secondary",
+  "on-color",
+  "on-color-disabled",
+  "inverse",
+  "success",
+  "success-primary",
+  "success-secondary",
+  "warning",
+  "warning-primary",
+  "warning-secondary",
+  "danger",
+  "danger-primary",
+  "danger-secondary",
+];
+const isCustomTextColor = (value: string) => CUSTOM_TEXT_COLORS.includes(value);
+
+const twMerge = extendTailwindMerge<"custom-typography" | "custom-text-color">({
+  override: {
+    classGroups: {
+      // Override font-size to include custom numeric sizes and exclude custom typography/colors
+      "font-size": [
+        {
+          text: [
+            (value: string) => isCustomFontSize(value) || (!isCustomTypography(value) && !isCustomTextColor(value)),
+          ],
+        },
+      ],
+    },
+  },
+  extend: {
+    classGroups: {
+      // Custom typography in its own group
+      "custom-typography": [{ text: [isCustomTypography] }],
+      // Custom text colors in their own group (won't conflict with font sizes)
+      "custom-text-color": [{ text: [isCustomTextColor] }],
+    },
+  },
+});
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+
+/**
+ * Extracts IDs from an array of objects with ID property
+ */
+export const extractIds = <T extends { id: string }>(items: T[]): string[] => items.map((item) => item.id);
+
+/**
+ * Checks if an ID exists and is valid within the provided list
+ */
+export const isValidId = (id: string | null | undefined, validIds: string[]): boolean => !!id && validIds.includes(id);
+
+/**
+ * Filters an array to only include valid IDs
+ */
+export const filterValidIds = (ids: string[], validIds: string[]): string[] =>
+  ids.filter((id) => validIds.includes(id));
+
+/**
+ * Filters an array to include only valid IDs, returning both valid and invalid IDs
+ */
+export const partitionValidIds = (ids: string[], validIds: string[]): { valid: string[]; invalid: string[] } => {
+  const valid: string[] = [];
+  const invalid: string[] = [];
+
+  ids.forEach((id) => {
+    if (validIds.includes(id)) {
+      valid.push(id);
+    } else {
+      invalid.push(id);
+    }
+  });
+
+  return { valid, invalid };
+};
+
+/**
+ * Checks if an object is complete (has properties) rather than empty.
+ * This helps TypeScript narrow the type from CompleteOrEmpty<T> to T.
+ *
+ * @param obj The object to check, typed as CompleteOrEmpty<T>
+ * @returns A boolean indicating if the object is complete (true) or empty (false)
+ */
+export const isComplete = <T>(obj: CompleteOrEmpty<T>): obj is T => {
+  // Check if object is not null or undefined
+  if (obj == null) return false;
+
+  // Check if it's an object
+  if (typeof obj !== "object") return false;
+
+  // Check if it has any own properties
+  return Object.keys(obj).length > 0;
+};
+
+export const convertRemToPixel = (rem: number): number => rem * 0.9 * 16;
diff --git a/packages/utils/src/cycle.ts b/packages/utils/src/cycle.ts
new file mode 100644
index 0000000..5fce839
--- /dev/null
+++ b/packages/utils/src/cycle.ts
@@ -0,0 +1,245 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { startOfToday, format } from "date-fns";
+import { isEmpty, orderBy, sortBy, uniqBy } from "lodash-es";
+// plane imports
+import type { ICycle, TCycleFilters, TProgressSnapshot } from "@plane/types";
+// local imports
+import { findTotalDaysInRange, generateDateArray, getDate } from "./datetime";
+import { satisfiesDateFilter } from "./filter";
+
+/**
+ * Orders cycles based on their status
+ * @param {ICycle[]} cycles - Array of cycles to be ordered
+ * @param {boolean} sortByManual - Whether to sort by manual order
+ * @returns {ICycle[]} Ordered array of cycles
+ */
+export const orderCycles = (cycles: ICycle[], sortByManual: boolean): ICycle[] => {
+  if (cycles.length === 0) return [];
+
+  const acceptedStatuses = ["current", "upcoming", "draft"];
+  const STATUS_ORDER: {
+    [key: string]: number;
+  } = {
+    current: 1,
+    upcoming: 2,
+    draft: 3,
+  };
+
+  let filteredCycles = cycles.filter((c) => acceptedStatuses.includes(c.status?.toLowerCase() ?? ""));
+  if (sortByManual) filteredCycles = sortBy(filteredCycles, [(c) => c.sort_order]);
+  else
+    filteredCycles = sortBy(filteredCycles, [
+      (c) => STATUS_ORDER[c.status?.toLowerCase() ?? ""],
+      (c) => (c.status?.toLowerCase() === "upcoming" ? c.start_date : c.name.toLowerCase()),
+    ]);
+
+  return filteredCycles;
+};
+
+/**
+ * Filters cycles based on provided filter criteria
+ * @param {ICycle} cycle - The cycle to be filtered
+ * @param {TCycleFilters} filter - Filter criteria to apply
+ * @returns {boolean} Whether the cycle passes the filter
+ */
+export const shouldFilterCycle = (cycle: ICycle, filter: TCycleFilters): boolean => {
+  let fallsInFilters = true;
+  Object.keys(filter).forEach((key) => {
+    const filterKey = key as keyof TCycleFilters;
+    if (filterKey === "status" && filter.status && filter.status.length > 0)
+      fallsInFilters = fallsInFilters && filter.status.includes(cycle.status?.toLowerCase() ?? "");
+    if (filterKey === "start_date" && filter.start_date && filter.start_date.length > 0) {
+      const startDate = getDate(cycle.start_date);
+      filter.start_date.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!startDate && satisfiesDateFilter(startDate, dateFilter);
+      });
+    }
+    if (filterKey === "end_date" && filter.end_date && filter.end_date.length > 0) {
+      const endDate = getDate(cycle.end_date);
+      filter.end_date.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!endDate && satisfiesDateFilter(endDate, dateFilter);
+      });
+    }
+  });
+
+  return fallsInFilters;
+};
+
+/**
+ * Calculates the scope based on whether it's an issue or estimate points
+ * @param {any} p - Progress data
+ * @param {boolean} isTypeIssue - Whether the type is an issue
+ * @returns {number} Calculated scope
+ */
+const scope = (p: any, isTypeIssue: boolean) => (isTypeIssue ? p.total_issues : p.total_estimate_points);
+
+/**
+ * Calculates the ideal progress value
+ * @param {string} date - Current date
+ * @param {number} scope - Total scope
+ * @param {ICycle} cycle - Cycle data
+ * @returns {number} Ideal progress value
+ */
+const ideal = (date: string, scope: number, cycle: ICycle) =>
+  Math.floor(
+    ((findTotalDaysInRange(date, cycle.end_date) || 0) /
+      (findTotalDaysInRange(cycle.start_date, cycle.end_date) || 0)) *
+      scope
+  );
+
+/**
+ * Formats cycle data for version 1
+ * @param {boolean} isTypeIssue - Whether the type is an issue
+ * @param {ICycle} cycle - Cycle data
+ * @param {boolean} isBurnDown - Whether it's a burn down chart
+ * @param {Date|string} endDate - End date
+ * @returns {TProgressChartData} Formatted progress data
+ */
+const formatV1Data = (isTypeIssue: boolean, cycle: ICycle, isBurnDown: boolean, endDate: Date | string) => {
+  const today = format(startOfToday(), "yyyy-MM-dd");
+  const data = isTypeIssue ? cycle.distribution : cycle.estimate_distribution;
+  const extendedArray = generateDateArray(endDate, endDate).map((d) => d.date);
+
+  if (isEmpty(data)) return [];
+  const progress = [...Object.keys(data.completion_chart), ...extendedArray].map((p) => {
+    const pending = data.completion_chart[p] || 0;
+    const total = isTypeIssue ? cycle.total_issues : cycle.total_estimate_points;
+    const completed = scope(cycle, isTypeIssue) - pending;
+
+    return {
+      date: p,
+      scope: p < today ? scope(cycle, isTypeIssue) : null,
+      completed,
+      backlog: isTypeIssue ? cycle.backlog_issues : cycle.backlog_estimate_points,
+      started: p === today ? cycle[isTypeIssue ? "started_issues" : "started_estimate_points"] : undefined,
+      unstarted: p === today ? cycle[isTypeIssue ? "unstarted_issues" : "unstarted_estimate_points"] : undefined,
+      cancelled: p === today ? cycle[isTypeIssue ? "cancelled_issues" : "cancelled_estimate_points"] : undefined,
+      pending: Math.abs(pending || 0),
+      ideal: p < today ? ideal(p, total || 0, cycle) : p <= cycle.end_date! ? ideal(today, total || 0, cycle) : null,
+      actual: p <= today ? (isBurnDown ? Math.abs(pending) : completed) : undefined,
+    };
+  });
+
+  return progress;
+};
+
+/**
+ * Formats cycle data for version 2
+ * @param {boolean} isTypeIssue - Whether the type is an issue
+ * @param {ICycle} cycle - Cycle data
+ * @param {boolean} isBurnDown - Whether it's a burn down chart
+ * @param {Date|string} endDate - End date
+ * @returns {TProgressChartData} Formatted progress data
+ */
+const formatV2Data = (isTypeIssue: boolean, cycle: ICycle, isBurnDown: boolean, endDate: Date | string) => {
+  if (!cycle.progress) return [];
+  let today: Date | string = startOfToday();
+
+  const extendedArray = endDate > today ? generateDateArray(today, endDate) : [];
+  if (isEmpty(cycle.progress)) return extendedArray;
+  today = format(startOfToday(), "yyyy-MM-dd");
+  const todaysData = cycle?.progress[cycle?.progress.length - 1];
+  const scopeToday = scope(todaysData, isTypeIssue);
+  const idealToday = ideal(todaysData.date, scopeToday, cycle);
+
+  let progress = [...orderBy(cycle?.progress, "date"), ...extendedArray].map((p) => {
+    const pending = isTypeIssue
+      ? p.total_issues - p.completed_issues - p.cancelled_issues
+      : p.total_estimate_points - p.completed_estimate_points - p.cancelled_estimate_points;
+    const completed = isTypeIssue ? p.completed_issues : p.completed_estimate_points;
+    const dataDate = p.progress_date ? format(new Date(p.progress_date), "yyyy-MM-dd") : p.date;
+
+    return {
+      date: dataDate,
+      scope: dataDate! < today ? scope(p, isTypeIssue) : dataDate! <= cycle.end_date! ? scopeToday : null,
+      completed,
+      backlog: isTypeIssue ? p.backlog_issues : p.backlog_estimate_points,
+      started: isTypeIssue ? p.started_issues : p.started_estimate_points,
+      unstarted: isTypeIssue ? p.unstarted_issues : p.unstarted_estimate_points,
+      cancelled: isTypeIssue ? p.cancelled_issues : p.cancelled_estimate_points,
+      pending: Math.abs(pending),
+      ideal:
+        dataDate! < today
+          ? ideal(dataDate, scope(p, isTypeIssue), cycle)
+          : dataDate! < cycle.end_date!
+            ? idealToday
+            : null,
+      actual: dataDate! <= today ? (isBurnDown ? Math.abs(pending) : completed) : undefined,
+    };
+  });
+  progress = uniqBy(progress, "date");
+
+  return progress;
+};
+
+export const formatActiveCycle = (args: {
+  cycle: ICycle;
+  isBurnDown?: boolean | undefined;
+  isTypeIssue?: boolean | undefined;
+}) => {
+  const { cycle, isBurnDown, isTypeIssue } = args;
+  const endDate: Date | string = new Date(cycle.end_date!);
+
+  return cycle.version === 1
+    ? formatV1Data(isTypeIssue!, cycle, isBurnDown!, endDate)
+    : formatV2Data(isTypeIssue!, cycle, isBurnDown!, endDate);
+};
+
+/**
+ * Calculates cycle progress percentage excluding cancelled issues from total count
+ * Formula: completed / (total - cancelled) * 100
+ * This gives accurate progress based on: pendingIssues = totalIssues - completedIssues - cancelledIssues
+ * @param cycle - Cycle data object
+ * @param estimateType - Whether to calculate based on "issues" or "points"
+ * @param includeInProgress - Whether to include started/in-progress items in completion calculation
+ * @returns Progress percentage (0-100)
+ */
+export const calculateCycleProgress = (
+  cycle: ICycle | undefined,
+  estimateType: "issues" | "points" = "issues",
+  includeInProgress: boolean = false
+): number => {
+  if (!cycle) return 0;
+
+  const progressSnapshot: TProgressSnapshot | undefined = cycle.progress_snapshot;
+  const cycleDetails = progressSnapshot && !isEmpty(progressSnapshot) ? progressSnapshot : cycle;
+
+  let completed: number;
+  let cancelled: number;
+  let total: number;
+
+  if (estimateType === "points") {
+    completed = cycleDetails.completed_estimate_points || 0;
+    cancelled = cycleDetails.cancelled_estimate_points || 0;
+    total = cycleDetails.total_estimate_points || 0;
+
+    if (includeInProgress) {
+      completed += cycleDetails.started_estimate_points || 0;
+    }
+  } else {
+    completed = cycleDetails.completed_issues || 0;
+    cancelled = cycleDetails.cancelled_issues || 0;
+    total = cycleDetails.total_issues || 0;
+
+    if (includeInProgress) {
+      completed += cycleDetails.started_issues || 0;
+    }
+  }
+
+  // Exclude cancelled issues from total (pendingIssues = total - completed - cancelled)
+  const adjustedTotal = total - cancelled;
+
+  // Handle edge cases
+  if (adjustedTotal === 0) return 0;
+  if (completed < 0 || adjustedTotal < 0) return 0;
+  if (completed > adjustedTotal) return 100;
+
+  // Calculate percentage and round
+  const percentage = (completed / adjustedTotal) * 100;
+  return Math.round(percentage);
+};
diff --git a/packages/utils/src/datetime.ts b/packages/utils/src/datetime.ts
new file mode 100644
index 0000000..67e809b
--- /dev/null
+++ b/packages/utils/src/datetime.ts
@@ -0,0 +1,595 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { differenceInDays, format, formatDistanceToNow, isAfter, isEqual, isValid, parseISO } from "date-fns";
+import { isNumber } from "lodash-es";
+
+// Format Date Helpers
+/**
+ * @returns {string | null} formatted date in the desired format or platform default format (MMM dd, yyyy)
+ * @description Returns date in the formatted format
+ * @param {Date | string} date
+ * @param {string} formatToken (optional) // default MMM dd, yyyy
+ * @example renderFormattedDate("2024-01-01", "MM-DD-YYYY") // Jan 01, 2024
+ * @example renderFormattedDate("2024-01-01") // Jan 01, 2024
+ */
+export const renderFormattedDate = (
+  date: string | Date | undefined | null,
+  formatToken: string = "MMM dd, yyyy"
+): string | undefined => {
+  // Parse the date to check if it is valid
+  const parsedDate = getDate(date);
+  // return if undefined
+  if (!parsedDate) return;
+  // Check if the parsed date is valid before formatting
+  if (!isValid(parsedDate)) return; // Return null for invalid dates
+  let formattedDate;
+  try {
+    // Format the date in the format provided or default format (MMM dd, yyyy)
+    formattedDate = format(parsedDate, formatToken);
+  } catch (_e) {
+    // Format the date in format (MMM dd, yyyy) in case of any error
+    formattedDate = format(parsedDate, "MMM dd, yyyy");
+  }
+  return formattedDate;
+};
+
+/**
+ * @returns {string} formatted date in the format of MMM dd
+ * @description Returns date in the formatted format
+ * @param {string | Date} date
+ * @example renderShortDateFormat("2024-01-01") // Jan 01
+ */
+export const renderFormattedDateWithoutYear = (date: string | Date): string => {
+  // Parse the date to check if it is valid
+  const parsedDate = getDate(date);
+  // return if undefined
+  if (!parsedDate) return "";
+  // Check if the parsed date is valid before formatting
+  if (!isValid(parsedDate)) return ""; // Return empty string for invalid dates
+  // Format the date in short format (MMM dd)
+  const formattedDate = format(parsedDate, "MMM dd");
+  return formattedDate;
+};
+
+/**
+ * @returns {string | null} formatted date in the format of yyyy-mm-dd to be used in payload
+ * @description Returns date in the formatted format to be used in payload
+ * @param {Date | string} date
+ * @example renderFormattedPayloadDate("Jan 01, 20224") // "2024-01-01"
+ */
+export const renderFormattedPayloadDate = (date: Date | string | undefined | null): string | undefined => {
+  // Parse the date to check if it is valid
+  const parsedDate = getDate(date);
+  // return if undefined
+  if (!parsedDate) return;
+  // Check if the parsed date is valid before formatting
+  if (!isValid(parsedDate)) return; // Return null for invalid dates
+  // Format the date in payload format (yyyy-mm-dd)
+  const formattedDate = format(parsedDate, "yyyy-MM-dd");
+  return formattedDate;
+};
+
+// Format Time Helpers
+/**
+ * @returns {string} formatted date in the format of hh:mm a or HH:mm
+ * @description Returns date in 12 hour format if in12HourFormat is true else 24 hour format
+ * @param {string | Date} date
+ * @param {boolean} timeFormat (optional) // default 24 hour
+ * @example renderFormattedTime("2024-01-01 13:00:00") // 13:00
+ * @example renderFormattedTime("2024-01-01 13:00:00", "12-hour") // 01:00 PM
+ */
+export const renderFormattedTime = (date: string | Date, timeFormat: "12-hour" | "24-hour" = "24-hour"): string => {
+  // Parse the date to check if it is valid
+  const parsedDate = new Date(date);
+  // return if undefined
+  if (!parsedDate) return "";
+  // Check if the parsed date is valid
+  if (!isValid(parsedDate)) return ""; // Return empty string for invalid dates
+  // Format the date in 12 hour format if in12HourFormat is true
+  if (timeFormat === "12-hour") {
+    const formattedTime = format(parsedDate, "hh:mm a");
+    return formattedTime;
+  }
+  // Format the date in 24 hour format
+  const formattedTime = format(parsedDate, "HH:mm");
+  return formattedTime;
+};
+
+// Date Difference Helpers
+/**
+ * @returns {number} total number of days in range
+ * @description Returns total number of days in range
+ * @param {string} startDate
+ * @param {string} endDate
+ * @param {boolean} inclusive
+ * @example checkIfStringIsDate("2021-01-01", "2021-01-08") // 8
+ */
+export const findTotalDaysInRange = (
+  startDate: Date | string | undefined | null,
+  endDate: Date | string | undefined | null,
+  inclusive: boolean = true
+): number | undefined => {
+  // Parse the dates to check if they are valid
+  const parsedStartDate = getDate(startDate);
+  const parsedEndDate = getDate(endDate);
+  // return if undefined
+  if (!parsedStartDate || !parsedEndDate) return;
+  // Check if the parsed dates are valid before calculating the difference
+  if (!isValid(parsedStartDate) || !isValid(parsedEndDate)) return 0; // Return 0 for invalid dates
+  // Calculate the difference in days
+  const diffInDays = differenceInDays(parsedEndDate, parsedStartDate);
+  // Return the difference in days based on inclusive flag
+  return inclusive ? diffInDays + 1 : diffInDays;
+};
+
+/**
+ * Add number of days to the provided date and return a resulting new date
+ * @param startDate
+ * @param numberOfDays
+ * @returns
+ */
+export const addDaysToDate = (startDate: Date | string | undefined | null, numberOfDays: number) => {
+  // Parse the dates to check if they are valid
+  const parsedStartDate = getDate(startDate);
+
+  // return if undefined
+  if (!parsedStartDate) return;
+
+  const newDate = new Date(parsedStartDate);
+  newDate.setDate(newDate.getDate() + numberOfDays);
+
+  return newDate;
+};
+
+/**
+ * @returns {number} number of days left from today
+ * @description Returns number of days left from today
+ * @param {string | Date} date
+ * @param {boolean} inclusive (optional) // default true
+ * @example findHowManyDaysLeft("2024-01-01") // 3
+ */
+export const findHowManyDaysLeft = (
+  date: Date | string | undefined | null,
+  inclusive: boolean = true
+): number | undefined => {
+  if (!date) return undefined;
+  // Pass the date to findTotalDaysInRange function to find the total number of days in range from today
+  return findTotalDaysInRange(new Date(), date, inclusive);
+};
+
+// Time Difference Helpers
+/**
+ * @returns {string} formatted date in the form of amount of time passed since the event happened
+ * @description Returns time passed since the event happened
+ * @param {string | Date} time
+ * @example calculateTimeAgo("2023-01-01") // 1 year ago
+ */
+export const calculateTimeAgo = (time: string | number | Date | null): string => {
+  if (!time) return "";
+  // Parse the time to check if it is valid
+  const parsedTime = typeof time === "string" || typeof time === "number" ? parseISO(String(time)) : time;
+  // return if undefined
+  if (!parsedTime) return ""; // Return empty string for invalid dates
+  // Format the time in the form of amount of time passed since the event happened
+  const distance = formatDistanceToNow(parsedTime, { addSuffix: true });
+  return distance;
+};
+
+export function calculateTimeAgoShort(date: string | number | Date | null): string {
+  if (!date) {
+    return "";
+  }
+
+  const parsedDate = typeof date === "string" ? parseISO(date) : new Date(date);
+  const now = new Date();
+  const diffInSeconds = (now.getTime() - parsedDate.getTime()) / 1000;
+
+  if (diffInSeconds < 60) {
+    return `${Math.floor(diffInSeconds)}s`;
+  }
+
+  const diffInMinutes = diffInSeconds / 60;
+  if (diffInMinutes < 60) {
+    return `${Math.floor(diffInMinutes)}m`;
+  }
+
+  const diffInHours = diffInMinutes / 60;
+  if (diffInHours < 24) {
+    return `${Math.floor(diffInHours)}h`;
+  }
+
+  const diffInDays = diffInHours / 24;
+  if (diffInDays < 30) {
+    return `${Math.floor(diffInDays)}d`;
+  }
+
+  const diffInMonths = diffInDays / 30;
+  if (diffInMonths < 12) {
+    return `${Math.floor(diffInMonths)}mo`;
+  }
+
+  const diffInYears = diffInMonths / 12;
+  return `${Math.floor(diffInYears)}y`;
+}
+
+// Date Validation Helpers
+/**
+ * @returns {string} boolean value depending on whether the date is greater than today
+ * @description Returns boolean value depending on whether the date is greater than today
+ * @param {string} dateStr
+ * @example isDateGreaterThanToday("2024-01-01") // true
+ */
+export const isDateGreaterThanToday = (dateStr: string): boolean => {
+  // Return false if dateStr is not present
+  if (!dateStr) return false;
+  // Parse the date to check if it is valid
+  const date = parseISO(dateStr);
+  const today = new Date();
+  // Check if the parsed date is valid
+  if (!isValid(date)) return false; // Return false for invalid dates
+  // Return true if the date is greater than today
+  return isAfter(date, today);
+};
+
+// Week Related Helpers
+/**
+ * @returns {number} week number of date
+ * @description Returns week number of date
+ * @param {Date} date
+ * @example getWeekNumber(new Date("2023-09-01")) // 35
+ */
+export const getWeekNumberOfDate = (date: Date): number => {
+  const currentDate = date;
+  // Adjust the starting day to Sunday (0) instead of Monday (1)
+  const startDate = new Date(currentDate.getFullYear(), 0, 1);
+  // Calculate the number of days between currentDate and startDate
+  const days = Math.floor((currentDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000));
+  // Adjust the calculation for weekNumber
+  const weekNumber = Math.ceil((days + 1) / 7);
+  return weekNumber;
+};
+
+/**
+ * @returns {boolean} boolean value depending on whether the dates are equal
+ * @description Returns boolean value depending on whether the dates are equal
+ * @param date1
+ * @param date2
+ * @example checkIfDatesAreEqual("2024-01-01", "2024-01-01") // true
+ * @example checkIfDatesAreEqual("2024-01-01", "2024-01-02") // false
+ */
+export const checkIfDatesAreEqual = (
+  date1: Date | string | null | undefined,
+  date2: Date | string | null | undefined
+): boolean => {
+  const parsedDate1 = getDate(date1);
+  const parsedDate2 = getDate(date2);
+  // return if undefined
+  if (!parsedDate1 && !parsedDate2) return true;
+  if (!parsedDate1 || !parsedDate2) return false;
+
+  return isEqual(parsedDate1, parsedDate2);
+};
+
+/**
+ * This method returns a date from string of type yyyy-mm-dd
+ * This method is recommended to use instead of new Date() as this does not introduce any timezone offsets
+ * @param date
+ * @returns date or undefined
+ */
+export const getDate = (date: string | Date | undefined | null): Date | undefined => {
+  try {
+    if (!date || date === "") return;
+
+    if (typeof date !== "string" && !(date instanceof String)) return date;
+
+    const [yearString, monthString, dayString] = date.substring(0, 10).split("-");
+    const year = parseInt(yearString);
+    const month = parseInt(monthString);
+    const day = parseInt(dayString);
+    if (!isNumber(year) || !isNumber(month) || !isNumber(day)) return;
+
+    return new Date(year, month - 1, day);
+  } catch (_e) {
+    return undefined;
+  }
+};
+
+export const isInDateFormat = (date: string) => {
+  const datePattern = /^\d{4}-\d{2}-\d{2}$/;
+  return datePattern.test(date);
+};
+
+/**
+ * returns the date string in ISO format regardless of the timezone in input date string
+ * @param dateString
+ * @returns
+ */
+export const convertToISODateString = (dateString: string | undefined) => {
+  if (!dateString) return dateString;
+
+  const date = new Date(dateString);
+  return date.toISOString();
+};
+
+/**
+ * returns the date string in Epoch regardless of the timezone in input date string
+ * @param dateString
+ * @returns
+ */
+export const convertToEpoch = (dateString: string | undefined) => {
+  if (!dateString) return dateString;
+
+  const date = new Date(dateString);
+  return date.getTime();
+};
+
+/**
+ * get current Date time in UTC ISO format
+ * @returns
+ */
+export const getCurrentDateTimeInISO = () => {
+  const date = new Date();
+  return date.toISOString();
+};
+
+/**
+ * @description converts hours and minutes to minutes
+ * @param { number } hours
+ * @param { number } minutes
+ * @returns { number } minutes
+ * @example convertHoursMinutesToMinutes(2, 30) // Output: 150
+ */
+export const convertHoursMinutesToMinutes = (hours: number, minutes: number): number => hours * 60 + minutes;
+
+/**
+ * @description converts minutes to hours and minutes
+ * @param { number } mins
+ * @returns { number, number } hours and minutes
+ * @example convertMinutesToHoursAndMinutes(150) // Output: { hours: 2, minutes: 30 }
+ */
+export const convertMinutesToHoursAndMinutes = (mins: number): { hours: number; minutes: number } => {
+  const hours = Math.floor(mins / 60);
+  const minutes = Math.floor(mins % 60);
+
+  return { hours: hours, minutes: minutes };
+};
+
+/**
+ * @description converts minutes to hours and minutes string
+ * @param { number } totalMinutes
+ * @returns { string } 0h 0m
+ * @example convertMinutesToHoursAndMinutes(150) // Output: 2h 10m
+ */
+export const convertMinutesToHoursMinutesString = (totalMinutes: number): string => {
+  const { hours, minutes } = convertMinutesToHoursAndMinutes(totalMinutes);
+
+  return `${hours ? `${hours}h ` : ``}${minutes ? `${minutes}m ` : ``}`;
+};
+
+/**
+ * @description calculates the read time for a document using the words count
+ * @param {number} wordsCount
+ * @returns {number} total number of seconds
+ * @example getReadTimeFromWordsCount(400) // Output: 120
+ * @example getReadTimeFromWordsCount(100) // Output: 30s
+ */
+export const getReadTimeFromWordsCount = (wordsCount: number): number => {
+  const wordsPerMinute = 200;
+  const minutes = wordsCount / wordsPerMinute;
+  return minutes * 60;
+};
+
+/**
+ * @description generates an array of dates between the start and end dates
+ * @param startDate
+ * @param endDate
+ * @returns
+ */
+export const generateDateArray = (startDate: string | Date, endDate: string | Date) => {
+  // Convert the start and end dates to Date objects if they aren't already
+  const start = new Date(startDate);
+  // start.setDate(start.getDate() + 1);
+  const end = new Date(endDate);
+  end.setDate(end.getDate() + 2);
+
+  // Create an empty array to store the dates
+  const dateArray = [];
+
+  // Use a while loop to generate dates between the range
+  while (start <= end) {
+    // Push the current date (converted to ISO string for consistency)
+    dateArray.push({
+      date: new Date(start).toISOString().split("T")[0],
+    });
+    // Increment the date by 1 day (86400000 milliseconds)
+    start.setDate(start.getDate() + 1);
+  }
+
+  return dateArray;
+};
+
+/**
+ * Processes relative date strings like "1_weeks", "2_months" etc and returns a Date
+ * @param value The relative date string (e.g., "1_weeks", "2_months")
+ * @returns Date object representing the calculated date
+ */
+export const processRelativeDate = (value: string): Date => {
+  const [amountStr, unit] = value.split("_");
+  const amount = parseInt(amountStr, 10);
+  if (isNaN(amount)) {
+    throw new Error(`Invalid relative amount: ${amountStr}`);
+  }
+  const date = new Date();
+
+  switch (unit) {
+    case "days":
+      date.setDate(date.getDate() + amount);
+      break;
+    case "weeks":
+      date.setDate(date.getDate() + amount * 7);
+      break;
+    case "months":
+      date.setMonth(date.getMonth() + amount);
+      break;
+    default:
+      throw new Error(`Unsupported time unit: ${unit}`);
+  }
+
+  return date;
+};
+
+/**
+ * Parses a date filter string and returns the comparison type and date
+ * @param filterValue The date filter string (e.g., "1_weeks;after;fromnow" or "2024-12-01;after")
+ * @returns Object containing the comparison type and target date
+ */
+export const parseDateFilter = (filterValue: string): { type: "after" | "before"; date: Date } => {
+  const parts = filterValue.split(";");
+  const dateStr = parts[0];
+  const type = parts[1] as "after" | "before";
+
+  let date: Date;
+  if (dateStr.includes("_")) {
+    // Handle relative dates (e.g., "1_weeks;after;fromnow")
+    date = processRelativeDate(dateStr);
+  } else {
+    // Handle absolute dates (e.g., "2024-12-01;after")
+    date = new Date(dateStr);
+  }
+
+  return { type, date };
+};
+
+/**
+ * Checks if a date meets the filter criteria
+ * @param dateToCheck The date to check
+ * @param filterDate The filter date to compare against
+ * @param type The type of comparison ('after' or 'before')
+ * @returns boolean indicating if the date meets the criteria
+ */
+export const checkDateCriteria = (dateToCheck: Date | null, filterDate: Date, type: "after" | "before"): boolean => {
+  if (!dateToCheck) return false;
+
+  const checkDate = new Date(dateToCheck);
+  const normalizedCheck = new Date(checkDate.setHours(0, 0, 0, 0));
+  const normalizedFilter = new Date(filterDate.getTime());
+  normalizedFilter.setHours(0, 0, 0, 0);
+
+  return type === "after" ? normalizedCheck >= normalizedFilter : normalizedCheck <= normalizedFilter;
+};
+
+/**
+ * Formats merged date range display with smart formatting
+ * - Single date: "Jan 24, 2025"
+ * - Same year, same month: "Jan 24 - 28, 2025"
+ * - Same year, different month: "Jan 24 - Feb 6, 2025"
+ * - Different year: "Dec 28, 2024 - Jan 4, 2025"
+ */
+export const formatDateRange = (
+  parsedStartDate: Date | null | undefined,
+  parsedEndDate: Date | null | undefined
+): string => {
+  // If no dates are provided
+  if (!parsedStartDate && !parsedEndDate) {
+    return "";
+  }
+
+  // If only start date is provided
+  if (parsedStartDate && !parsedEndDate) {
+    return format(parsedStartDate, "MMM dd, yyyy");
+  }
+
+  // If only end date is provided
+  if (!parsedStartDate && parsedEndDate) {
+    return format(parsedEndDate, "MMM dd, yyyy");
+  }
+
+  // If both dates are provided
+  if (parsedStartDate && parsedEndDate) {
+    const startYear = parsedStartDate.getFullYear();
+    const startMonth = parsedStartDate.getMonth();
+    const endYear = parsedEndDate.getFullYear();
+    const endMonth = parsedEndDate.getMonth();
+
+    // Same year, same month
+    if (startYear === endYear && startMonth === endMonth) {
+      const startDay = format(parsedStartDate, "dd");
+      const endDay = format(parsedEndDate, "dd");
+      return `${format(parsedStartDate, "MMM")} ${startDay} - ${endDay}, ${startYear}`;
+    }
+
+    // Same year, different month
+    if (startYear === endYear) {
+      const startFormatted = format(parsedStartDate, "MMM dd");
+      const endFormatted = format(parsedEndDate, "MMM dd");
+      return `${startFormatted} - ${endFormatted}, ${startYear}`;
+    }
+
+    // Different year
+    const startFormatted = format(parsedStartDate, "MMM dd, yyyy");
+    const endFormatted = format(parsedEndDate, "MMM dd, yyyy");
+    return `${startFormatted} - ${endFormatted}`;
+  }
+
+  return "";
+};
+
+// Duration Helpers
+/**
+ * @returns {string} formatted duration in human readable format
+ * @description Converts seconds to human readable duration format (e.g., "1 hr 20 min 5 sec" or "122.30 ms")
+ * @param {number} seconds - The duration in seconds
+ * @example formatDuration(3665) // "1 hr 1 min 5 sec"
+ * @example formatDuration(125) // "2 min 5 sec"
+ * @example formatDuration(45) // "45 sec"
+ * @example formatDuration(0.1223094) // "122.31 ms"
+ */
+export const formatDuration = (seconds: number | undefined | null): string => {
+  // Return "N/A" if seconds is not a valid number
+  if (seconds == null || typeof seconds !== "number" || !Number.isFinite(seconds) || seconds < 0) {
+    return "N/A";
+  }
+
+  // If less than 1 second, show in ms (2 decimal places)
+  if (seconds > 0 && seconds < 1) {
+    const ms = seconds * 1000;
+    return `${ms.toFixed(2)} ms`;
+  }
+
+  // Round to nearest second
+  const totalSeconds = Math.round(seconds);
+
+  // Calculate hours, minutes, and seconds
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const remainingSeconds = totalSeconds % 60;
+
+  // Build the formatted string
+  const parts: string[] = [];
+
+  if (hours > 0) {
+    parts.push(`${hours} hr`);
+  }
+
+  if (minutes > 0) {
+    parts.push(`${minutes} min`);
+  }
+
+  if (remainingSeconds > 0 || parts.length === 0) {
+    parts.push(`${remainingSeconds} sec`);
+  }
+
+  return parts.join(" ");
+};
+
+/**
+ * Checks if a date is valid
+ * @param date The date to check
+ * @returns Whether the date is valid or not
+ */
+export const isValidDate = (date: unknown): date is string | Date =>
+  (typeof date === "string" || typeof date === "object") && date !== null && !isNaN(Date.parse(date as string));
diff --git a/packages/utils/src/distribution-update.ts b/packages/utils/src/distribution-update.ts
new file mode 100644
index 0000000..f9b965d
--- /dev/null
+++ b/packages/utils/src/distribution-update.ts
@@ -0,0 +1,268 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { format } from "date-fns";
+import { get, set } from "lodash-es";
+// plane imports
+import { COMPLETED_STATE_GROUPS, STATE_DISTRIBUTION } from "@plane/constants";
+import type { ICycle, IEstimatePoint, IModule, IState, TIssue } from "@plane/types";
+// helper
+import { getDate } from "./datetime";
+
+export type DistributionObjectUpdate = {
+  id: string;
+  completed_issues?: number;
+  pending_issues?: number;
+  total_issues: number;
+  completed_estimates?: number;
+  pending_estimates?: number;
+  total_estimates: number;
+};
+
+type ChartUpdates = {
+  updates: {
+    path: string[];
+    value: number;
+  }[];
+  isCompleted?: boolean;
+};
+
+export type DistributionUpdates = {
+  pathUpdates: { path: string[]; value: number }[];
+  assigneeUpdates: DistributionObjectUpdate[];
+  labelUpdates: DistributionObjectUpdate[];
+};
+
+/**
+ * Get Distribution updates with the help of previous and next issue states
+ * @param prevIssueState
+ * @param nextIssueState
+ * @param stateMap
+ * @param estimatePointById
+ * @returns
+ */
+export const getDistributionPathsPostUpdate = (
+  prevIssueState: TIssue | undefined,
+  nextIssueState: TIssue | undefined,
+  stateMap: Record<string, IState>,
+  estimatePointById?: (estimatePointId: string) => IEstimatePoint | undefined
+): DistributionUpdates => {
+  const prevIssueDistribution = getDistributionDataOfIssue(prevIssueState, -1, stateMap, estimatePointById);
+  const nextIssueDistribution = getDistributionDataOfIssue(nextIssueState, 1, stateMap, estimatePointById);
+
+  const prevChartDistribution = prevIssueDistribution.chartUpdates;
+  const nextChartDistribution = nextIssueDistribution.chartUpdates;
+
+  let chartUpdates: {
+    path: string[];
+    value: number;
+  }[];
+
+  // if the completed status of chart updates are same the get chart updates from both the issue states
+  if (prevChartDistribution.isCompleted === nextChartDistribution.isCompleted) {
+    chartUpdates = [...prevChartDistribution.updates, ...nextChartDistribution.updates];
+  } // if not the get chart updates from only the next update
+  else {
+    chartUpdates = [...nextChartDistribution.updates];
+  }
+
+  // merge the updates from both issue states into a single object
+  return {
+    pathUpdates: [...prevIssueDistribution.pathUpdates, ...nextIssueDistribution.pathUpdates, ...chartUpdates],
+    assigneeUpdates: [...prevIssueDistribution.assigneeUpdates, ...nextIssueDistribution.assigneeUpdates],
+    labelUpdates: [...prevIssueDistribution.labelUpdates, ...nextIssueDistribution.labelUpdates],
+  };
+};
+
+/**
+ * Get Distribution update for a single issue state
+ * @param issue
+ * @param multiplier
+ * @param stateMap
+ * @param estimatePointById
+ * @returns
+ */
+const getDistributionDataOfIssue = (
+  issue: TIssue | undefined,
+  multiplier: -1 | 1,
+  stateMap: Record<string, IState>,
+  estimatePointById?: (estimatePointId: string) => IEstimatePoint | undefined
+): DistributionUpdates & { chartUpdates: ChartUpdates } => {
+  const pathUpdates: { path: string[]; value: number }[] = [];
+
+  // If issue does not exist, send a default object
+  if (!issue) return { pathUpdates, assigneeUpdates: [], labelUpdates: [], chartUpdates: { updates: [] } };
+
+  const state = stateMap[issue.state_id ?? ""];
+  const stateGroup = state.group;
+
+  // get if the state is in completed state
+  const isCompleted = COMPLETED_STATE_GROUPS.indexOf(stateGroup) > -1;
+  // get estimate point in number for the issue
+  const estimatePoint = parseFloat(estimatePointById?.(issue.estimate_point ?? "")?.value ?? "0");
+
+  // add all the path updates that can be updated directly on the distribution object
+  pathUpdates.push({ path: ["total_issues"], value: multiplier });
+  pathUpdates.push({ path: ["total_estimate_points"], value: multiplier * estimatePoint });
+
+  // path updates for state distributions
+  const stateDistribution = STATE_DISTRIBUTION[stateGroup];
+
+  pathUpdates.push({ path: [stateDistribution.issues], value: multiplier });
+  pathUpdates.push({ path: [stateDistribution.points], value: multiplier * estimatePoint });
+
+  // get assignee and label distribution updates
+  const assigneeUpdates = getObjectDistributionArray(issue.assignee_ids, isCompleted, estimatePoint, multiplier);
+  const labelUpdates = getObjectDistributionArray(issue.label_ids, isCompleted, estimatePoint, multiplier);
+
+  // chart updates based on date of completed or not completed
+  const chartUpdates = getChartUpdates(isCompleted, issue.completed_at, estimatePoint, multiplier);
+  return {
+    pathUpdates,
+    assigneeUpdates,
+    labelUpdates,
+    chartUpdates,
+  };
+};
+
+/**
+ * This is to get distribution update array for either assignees and labels object
+ * @param ids the assignee or label ids of issue
+ * @param isCompleted
+ * @param estimatePoint
+ * @param multiplier
+ * @returns
+ */
+const getObjectDistributionArray = (ids: string[], isCompleted: boolean, estimatePoint: number, multiplier: -1 | 1) => {
+  const objectDistributionArray: DistributionObjectUpdate[] = [];
+
+  // iterate over each id
+  for (const id of ids) {
+    const objectDistribution: DistributionObjectUpdate = {
+      id,
+      total_issues: multiplier,
+      total_estimates: estimatePoint * multiplier,
+    };
+
+    // update paths for issue counts and estimate counts
+    if (isCompleted) {
+      objectDistribution["completed_issues"] = multiplier;
+      objectDistribution["completed_estimates"] = estimatePoint * multiplier;
+    } else {
+      objectDistribution["pending_issues"] = multiplier;
+      objectDistribution["pending_estimates"] = estimatePoint * multiplier;
+    }
+
+    objectDistributionArray.push(objectDistribution);
+  }
+
+  return objectDistributionArray;
+};
+
+/**
+ * get chart distribution based of completed or not completed states
+ * @param isCompleted
+ * @param completedAt
+ * @param estimatePoint
+ * @param multiplier
+ * @returns
+ */
+const getChartUpdates = (
+  isCompleted: boolean,
+  completedAt: string | null,
+  estimatePoint: number,
+  multiplier: -1 | 1
+) => {
+  // if completed At date does not exist use current date
+  let dateToUpdate = format(new Date(), "yyyy-MM-dd");
+  const completedAtDate = getDate(completedAt);
+  if (completedAt && completedAtDate) {
+    dateToUpdate = format(completedAtDate, "yyyy-MM-dd");
+  }
+
+  // multiplier based on isCompleted state, it determines if the current count is to be added or subtracted from the list
+  const completedAtMultiplier = isCompleted ? -1 : 1;
+
+  return {
+    updates: [
+      { path: ["distribution", "completion_chart", dateToUpdate], value: multiplier * completedAtMultiplier },
+      {
+        path: ["estimate_distribution", "completion_chart", dateToUpdate],
+        value: multiplier * completedAtMultiplier * estimatePoint,
+      },
+    ],
+    isCompleted,
+  };
+};
+
+/**
+ * Method to update distribution of either cycle or module object
+ * @param distributionObject
+ * @param distributionUpdates
+ */
+export const updateDistribution = (distributionObject: ICycle | IModule, distributionUpdates: DistributionUpdates) => {
+  const { pathUpdates, assigneeUpdates, labelUpdates } = distributionUpdates;
+
+  // iterate over path updates and directly apply changes on the distribution object
+  for (const update of pathUpdates) {
+    const { path, value } = update;
+    const currentValue: number = get(distributionObject, path);
+    if (currentValue !== undefined) set(distributionObject, path, (currentValue ?? 0) + value);
+  }
+
+  // for assignee update iterate through the assignee update and apply at the respective position
+  for (const assigneeUpdate of assigneeUpdates) {
+    const { id } = assigneeUpdate;
+
+    // find and update the assignee issue counts
+    if (Array.isArray(distributionObject.distribution?.assignees)) {
+      const issuesAssignee = distributionObject.distribution?.assignees?.find(
+        (assignee) => assignee.assignee_id === id
+      );
+      if (issuesAssignee) {
+        issuesAssignee.completed_issues += assigneeUpdate.completed_issues ?? 0;
+        issuesAssignee.pending_issues += assigneeUpdate.pending_issues ?? 0;
+        issuesAssignee.total_issues += assigneeUpdate.total_issues;
+      }
+    }
+
+    // find and update the assignee points
+    if (Array.isArray(distributionObject.estimate_distribution?.assignees)) {
+      const pointsAssignee = distributionObject.estimate_distribution?.assignees?.find(
+        (assignee) => assignee.assignee_id === id
+      );
+      if (pointsAssignee) {
+        pointsAssignee.completed_estimates += assigneeUpdate.completed_estimates ?? 0;
+        pointsAssignee.pending_estimates += assigneeUpdate.pending_estimates ?? 0;
+        pointsAssignee.total_estimates += assigneeUpdate.total_estimates;
+      }
+    }
+  }
+
+  for (const labelUpdate of labelUpdates) {
+    const { id } = labelUpdate;
+
+    // find and update the label issue counts
+    if (Array.isArray(distributionObject.distribution?.labels)) {
+      const issuesLabel = distributionObject.distribution?.labels?.find((label) => label.label_id === id);
+      if (issuesLabel) {
+        issuesLabel.completed_issues += labelUpdate.completed_issues ?? 0;
+        issuesLabel.pending_issues += labelUpdate.pending_issues ?? 0;
+        issuesLabel.total_issues += labelUpdate.total_issues;
+      }
+    }
+
+    // find and update the label points
+    if (Array.isArray(distributionObject.estimate_distribution?.labels)) {
+      const pointsLabel = distributionObject.estimate_distribution?.labels?.find((label) => label.label_id === id);
+      if (pointsLabel) {
+        pointsLabel.completed_estimates += labelUpdate.completed_estimates ?? 0;
+        pointsLabel.pending_estimates += labelUpdate.pending_estimates ?? 0;
+        pointsLabel.total_estimates += labelUpdate.total_estimates;
+      }
+    }
+  }
+};
diff --git a/packages/utils/src/editor/common.ts b/packages/utils/src/editor/common.ts
new file mode 100644
index 0000000..9b409cc
--- /dev/null
+++ b/packages/utils/src/editor/common.ts
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// local imports
+import { getFileURL } from "../file";
+
+type TEditorSrcArgs = {
+  assetId: string;
+  projectId?: string;
+  workspaceSlug: string;
+};
+
+/**
+ * @description generate the file source using assetId
+ * @param {TEditorSrcArgs} args
+ */
+export const getEditorAssetSrc = (args: TEditorSrcArgs): string | undefined => {
+  const { assetId, projectId, workspaceSlug } = args;
+  let url: string | undefined = "";
+  if (projectId) {
+    url = getFileURL(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${assetId}/`);
+  } else {
+    url = getFileURL(`/api/assets/v2/workspaces/${workspaceSlug}/${assetId}/`);
+  }
+  return url;
+};
+
+/**
+ * @description generate the file source using assetId
+ * @param {TEditorSrcArgs} args
+ */
+export const getEditorAssetDownloadSrc = (args: TEditorSrcArgs): string | undefined => {
+  const { assetId, projectId, workspaceSlug } = args;
+  let url: string | undefined = "";
+  if (projectId) {
+    url = getFileURL(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/download/${assetId}/`);
+  } else {
+    url = getFileURL(`/api/assets/v2/workspaces/${workspaceSlug}/download/${assetId}/`);
+  }
+  return url;
+};
+
+export const getTextContent = (jsx: React.ReactNode | null | undefined): string => {
+  if (!jsx) return "";
+
+  const div = document.createElement("div");
+  div.innerHTML = jsx.toString();
+  return div.textContent?.trim() ?? "";
+};
+
+export const isEditorEmpty = (description: string | undefined): boolean =>
+  !description ||
+  description === "<p></p>" ||
+  description === `<p class="editor-paragraph-block"></p>` ||
+  description.trim() === "";
+
+export enum CORE_EXTENSIONS {
+  BLOCKQUOTE = "blockquote",
+  BOLD = "bold",
+  BULLET_LIST = "bulletList",
+  CALLOUT = "calloutComponent",
+  CHARACTER_COUNT = "characterCount",
+  CODE_BLOCK = "codeBlock",
+  CODE_INLINE = "code",
+  CUSTOM_COLOR = "customColor",
+  CUSTOM_IMAGE = "imageComponent",
+  CUSTOM_LINK = "link",
+  DOCUMENT = "doc",
+  DROP_CURSOR = "dropCursor",
+  ENTER_KEY = "enterKey",
+  GAP_CURSOR = "gapCursor",
+  HARD_BREAK = "hardBreak",
+  HEADING = "heading",
+  HEADINGS_LIST = "headingsList",
+  HISTORY = "history",
+  HORIZONTAL_RULE = "horizontalRule",
+  IMAGE = "image",
+  ITALIC = "italic",
+  LIST_ITEM = "listItem",
+  MARKDOWN_CLIPBOARD = "markdownClipboard",
+  MENTION = "mention",
+  ORDERED_LIST = "orderedList",
+  PARAGRAPH = "paragraph",
+  PLACEHOLDER = "placeholder",
+  SIDE_MENU = "editorSideMenu",
+  SLASH_COMMANDS = "slash-command",
+  STRIKETHROUGH = "strike",
+  TABLE = "table",
+  TABLE_CELL = "tableCell",
+  TABLE_HEADER = "tableHeader",
+  TABLE_ROW = "tableRow",
+  TASK_ITEM = "taskItem",
+  TASK_LIST = "taskList",
+  TEXT_ALIGN = "textAlign",
+  TEXT_STYLE = "textStyle",
+  TYPOGRAPHY = "typography",
+  UNDERLINE = "underline",
+  UTILITY = "utility",
+  WORK_ITEM_EMBED = "issue-embed-component",
+  EMOJI = "emoji",
+}
+
+export enum ADDITIONAL_EXTENSIONS {}
diff --git a/packages/utils/src/editor/index.ts b/packages/utils/src/editor/index.ts
new file mode 100644
index 0000000..534c1ee
--- /dev/null
+++ b/packages/utils/src/editor/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./common";
+export * from "./markdown-parser";
diff --git a/packages/utils/src/editor/markdown-parser/common.ts b/packages/utils/src/editor/markdown-parser/common.ts
new file mode 100644
index 0000000..53d6320
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/common.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Text as MDASTText } from "mdast";
+
+export const createTextNode = (value: string): MDASTText => ({
+  type: "text",
+  value,
+});
diff --git a/packages/utils/src/editor/markdown-parser/custom-components-handler.ts b/packages/utils/src/editor/markdown-parser/custom-components-handler.ts
new file mode 100644
index 0000000..44b0d13
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/custom-components-handler.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Handle } from "hast-util-to-mdast";
+// local imports
+import { createTextNode } from "./common";
+import type { TCustomComponentsMetaData } from "./types";
+
+type TArgs = {
+  metaData: TCustomComponentsMetaData;
+};
+
+export const parseCustomComponents = (args: TArgs): Record<string, Handle> => {
+  const { metaData } = args;
+
+  const getFileAssetDetails = (id: string) => metaData.file_assets.find((asset) => asset.id === id);
+
+  return {
+    "image-component": (_state, node) => {
+      const properties = node.properties || {};
+      const src = String(properties.src);
+      const fileAssetDetails = getFileAssetDetails(src);
+      if (!src || !fileAssetDetails) return createTextNode("");
+      return createTextNode(`![${fileAssetDetails.name}](${fileAssetDetails.url})`);
+    },
+    img: (_state, node) => {
+      const properties = node.properties || {};
+      const src = String(properties.src);
+      const alt = String(properties.alt);
+      if (!src || !alt) return createTextNode("");
+      return createTextNode(`![${alt || "Image"}](${src})`);
+    },
+    "mention-component": (_state, node) => {
+      const properties = node.properties || {};
+      const mentionType = String(properties.entity_name);
+
+      let url: string = "";
+      let tag: string = "@";
+      if (mentionType === "user_mention") {
+        const userId = String(properties.entity_identifier);
+        const userDetails = metaData.user_mentions.find((user) => user.id === userId);
+        if (!userDetails) return createTextNode("");
+        url = userDetails.url || "";
+        tag = `@${userDetails.display_name || "Unknown user"}`;
+      }
+
+      return createTextNode(`[${tag}](${url}) `);
+    },
+  };
+};
diff --git a/packages/utils/src/editor/markdown-parser/index.ts b/packages/utils/src/editor/markdown-parser/index.ts
new file mode 100644
index 0000000..e18db93
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./types";
+export * from "./root";
diff --git a/packages/utils/src/editor/markdown-parser/marks-handler.ts b/packages/utils/src/editor/markdown-parser/marks-handler.ts
new file mode 100644
index 0000000..8ee58a1
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/marks-handler.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { Handle } from "hast-util-to-mdast";
+import type { PhrasingContent, Text as MDASTText } from "mdast";
+// local imports
+import { createTextNode } from "./common";
+
+const processMarkElement = (state: Parameters<Handle>[0], node: Parameters<Handle>[1], wrapper: string): MDASTText => {
+  if (node.children && node.children.length > 0) {
+    // Process all children and collect their text content
+    const processedChildren: PhrasingContent[] = [];
+
+    for (const child of node.children) {
+      if (child.type === "text") {
+        // Direct text child - keep as is
+        processedChildren.push(child as MDASTText);
+      } else if (child.type === "element") {
+        // Element child - recursively process it
+        const processed = state.one(child, node);
+        if (processed) {
+          if (Array.isArray(processed)) {
+            processedChildren.push(...(processed as PhrasingContent[]));
+          } else {
+            processedChildren.push(processed as PhrasingContent);
+          }
+        }
+      }
+    }
+
+    // Concatenate all text content and wrap with the specified wrapper
+    const combinedText = processedChildren.map((child) => (child.type === "text" ? child.value : "")).join("");
+
+    return createTextNode(`${wrapper}${combinedText}${wrapper}`);
+  }
+
+  // Empty element - return empty text
+  return createTextNode("");
+};
+
+export const parseMarks: Record<string, Handle> = {
+  u: (state, node) => processMarkElement(state, node, ""),
+  i: (state, node) => processMarkElement(state, node, "_"),
+  em: (state, node) => processMarkElement(state, node, "_"),
+};
diff --git a/packages/utils/src/editor/markdown-parser/root.ts b/packages/utils/src/editor/markdown-parser/root.ts
new file mode 100644
index 0000000..ea0bb23
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/root.ts
@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// - Parses TipTap/ProseMirror HTML fragments
+// - Removes <u> tags (Markdown has no underline)
+// - Adds a space after checkbox inputs for correct GFM task list rendering
+// - Converts to Markdown using rehype→remark, GFM, and remark-stringify
+
+import type { Element as HASTElement, ElementContent, Parent as HASTParent } from "hast";
+import rehypeParse from "rehype-parse";
+import rehypeRemark from "rehype-remark";
+import remarkGfm from "remark-gfm";
+import remarkStringify from "remark-stringify";
+import { unified } from "unified";
+// local imports
+import { parseCustomComponents } from "./custom-components-handler";
+import { parseMarks } from "./marks-handler";
+import type { TCustomComponentsMetaData } from "./types";
+
+// Rehype plugin to handle TipTap task lists and convert them to GFM-compatible format
+// TipTap structure: <li data-type="taskItem"><label><input><span></span></label><div><p>text</p></div></li>
+// We need: <li><input> text (with space after checkbox for proper GFM rendering)
+function addSpacesToCheckboxes() {
+  return (tree: HASTParent) => {
+    const helper = (node: HASTParent): void => {
+      if (!Array.isArray(node.children) || node.children.length === 0) return;
+
+      for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+
+        // Check if this is a task list item
+        if (
+          child &&
+          child.type === "element" &&
+          child.tagName === "li" &&
+          child.properties &&
+          child.properties["data-type"] === "taskItem"
+        ) {
+          const liElement = child;
+
+          // Find the label and div elements
+          const label = liElement.children?.find((c) => c.type === "element" && c.tagName === "label") as
+            | HASTElement
+            | undefined;
+
+          const contentDiv = liElement.children?.find((c) => c.type === "element" && c.tagName === "div") as
+            | HASTElement
+            | undefined;
+
+          if (label && contentDiv) {
+            // Find the checkbox input
+            const checkbox = label.children?.find(
+              (c) => c.type === "element" && c.tagName === "input" && c.properties?.type === "checkbox"
+            ) as HASTElement | undefined;
+
+            if (checkbox) {
+              // Extract text content from the div, unwrapping any paragraph tags
+              const textContent: ElementContent[] = [];
+              if (contentDiv.children) {
+                for (const child of contentDiv.children) {
+                  if (child.type === "element" && child.tagName === "p") {
+                    // Unwrap paragraph - add its children directly
+                    const pElement = child;
+                    if (pElement.children) {
+                      textContent.push(...pElement.children);
+                    }
+                  } else {
+                    // Keep other elements as-is
+                    textContent.push(child);
+                  }
+                }
+              }
+
+              // Flatten the structure: move checkbox and content to be direct children of li
+              liElement.children = [
+                checkbox,
+                { type: "text", value: " " }, // Add space after checkbox
+                ...textContent,
+              ];
+            }
+          }
+        } else if (child && child.type === "element") {
+          helper(child);
+        }
+      }
+    };
+
+    helper(tree);
+  };
+}
+
+type TArgs = {
+  description_html: string;
+  metaData: TCustomComponentsMetaData;
+  name?: string;
+};
+
+/**
+ * Sanitizes a string by escaping HTML entities to prevent XSS attacks
+ * @param str - The string to sanitize
+ * @returns The sanitized string with escaped HTML entities
+ */
+function sanitizeHTML(str: string): string {
+  return str
+    .replace(/&/g, "&")
+    .replace(/</g, "<")
+    .replace(/>/g, ">")
+    .replace(/"/g, """)
+    .replace(/'/g, "'");
+}
+
+export function convertHTMLToMarkdown(args: TArgs): string {
+  const { description_html, metaData, name } = args;
+
+  let updatedDescriptionHtml = description_html;
+  if (name) {
+    const sanitizedName = sanitizeHTML(name);
+    updatedDescriptionHtml = `<h1>${sanitizedName}</h1>\n\n${description_html}`;
+  }
+
+  const result = unified()
+    .use(rehypeParse, { fragment: true })
+    .use(addSpacesToCheckboxes)
+    .use(rehypeRemark, {
+      handlers: {
+        ...parseCustomComponents({
+          metaData,
+        }),
+        ...parseMarks,
+      },
+    })
+    .use(remarkGfm)
+    .use(remarkStringify, {
+      handlers: {
+        text: (node: { value: string }): string => node.value,
+      },
+    })
+    .processSync(updatedDescriptionHtml);
+
+  const markdown = String(result.value ?? result);
+
+  return markdown;
+}
diff --git a/packages/utils/src/editor/markdown-parser/types.ts b/packages/utils/src/editor/markdown-parser/types.ts
new file mode 100644
index 0000000..fc726c2
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/types.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export type TCoreCustomComponentsMetaData = {
+  file_assets: {
+    id: string;
+    name: string;
+    url: string;
+  }[];
+  user_mentions: {
+    id: string;
+    display_name: string;
+    url: string;
+  }[];
+};
+
+export type TExtendedCustomComponentsMetaData = unknown;
+
+export type TCustomComponentsMetaData = TCoreCustomComponentsMetaData & TExtendedCustomComponentsMetaData;
diff --git a/packages/utils/src/emoji.ts b/packages/utils/src/emoji.ts
new file mode 100644
index 0000000..e0ab593
--- /dev/null
+++ b/packages/utils/src/emoji.ts
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { RANDOM_EMOJI_CODES } from "@plane/constants";
+
+/**
+ * Converts a hyphen-separated hexadecimal emoji code to its decimal representation
+ * @param {string} emojiUnified - The unified emoji code in hexadecimal format (e.g., "1f600" or "1f1e6-1f1e8")
+ * @returns {string} The decimal representation of the emoji code (e.g., "128512" or "127462-127464")
+ * @example
+ * convertHexEmojiToDecimal("1f600") // returns "128512"
+ * convertHexEmojiToDecimal("1f1e6-1f1e8") // returns "127462-127464"
+ * convertHexEmojiToDecimal("") // returns ""
+ */
+export const convertHexEmojiToDecimal = (emojiUnified: string): string => {
+  if (!emojiUnified) return "";
+
+  return emojiUnified
+    .toString()
+    .split("-")
+    .map((e) => parseInt(e, 16))
+    .join("-");
+};
+
+/**
+ * Converts a hyphen-separated decimal emoji code back to its hexadecimal representation
+ * @param {string} emoji - The emoji code in decimal format (e.g., "128512" or "127462-127464")
+ * @returns {string} The hexadecimal representation of the emoji code (e.g., "1f600" or "1f1e6-1f1e8")
+ * @example
+ * emojiCodeToUnicode("128512") // returns "1f600"
+ * emojiCodeToUnicode("127462-127464") // returns "1f1e6-1f1e8"
+ * emojiCodeToUnicode("") // returns ""
+ */
+export const emojiCodeToUnicode = (emoji: string): string => {
+  if (!emoji) return "";
+
+  // convert emoji code to unicode
+  const uniCodeEmoji = emoji
+    .toString()
+    .split("-")
+    .map((emoji) => parseInt(emoji, 10).toString(16))
+    .join("-");
+
+  return uniCodeEmoji;
+};
+
+/**
+ * Groups reactions by a specified key
+ * @param {any[]} reactions - Array of reaction objects
+ * @param {string} key - Key to group reactions by
+ * @returns {Object} Object with reactions grouped by the specified key
+ */
+export const groupReactions: (reactions: any[], key: string) => { [key: string]: any[] } = (
+  reactions: any,
+  key: string
+) => {
+  if (!Array.isArray(reactions)) {
+    console.error("Expected an array of reactions, but got:", reactions);
+    return {};
+  }
+
+  const groupedReactions = reactions.reduce(
+    (acc: any, reaction: any) => {
+      if (!reaction || typeof reaction !== "object" || !Object.prototype.hasOwnProperty.call(reaction, key)) {
+        console.warn("Skipping undefined reaction or missing key:", reaction);
+        return acc; // Skip undefined reactions or those without the specified key
+      }
+
+      if (!acc[reaction[key]]) {
+        acc[reaction[key]] = [];
+      }
+      acc[reaction[key]].push(reaction);
+      return acc;
+    },
+    {} as { [key: string]: any[] }
+  );
+
+  return groupedReactions;
+};
+
+/**
+ * Returns a random emoji code from the RANDOM_EMOJI_CODES array
+ * @returns {string} A random emoji code
+ */
+export const getRandomEmoji = (): string => RANDOM_EMOJI_CODES[Math.floor(Math.random() * RANDOM_EMOJI_CODES.length)];
diff --git a/packages/utils/src/estimates.ts b/packages/utils/src/estimates.ts
new file mode 100644
index 0000000..fc1fed7
--- /dev/null
+++ b/packages/utils/src/estimates.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane web constants
+import { EEstimateSystem } from "@plane/constants";
+
+export const isEstimatePointValuesRepeated = (
+  estimatePoints: string[],
+  estimateType: EEstimateSystem,
+  newEstimatePoint?: string
+) => {
+  const currentEstimatePoints = estimatePoints.map((estimatePoint) => estimatePoint.trim());
+  let isRepeated = false;
+
+  if (newEstimatePoint === undefined) {
+    if (estimateType === EEstimateSystem.CATEGORIES) {
+      const points = new Set(currentEstimatePoints);
+      if (points.size != currentEstimatePoints.length) isRepeated = true;
+    } else if ([EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(estimateType)) {
+      currentEstimatePoints.map((point) => {
+        if (Number(point) === Number(newEstimatePoint)) isRepeated = true;
+      });
+    }
+  } else {
+    if (estimateType === EEstimateSystem.CATEGORIES) {
+      currentEstimatePoints.map((point) => {
+        if (point === newEstimatePoint.trim()) isRepeated = true;
+      });
+    } else if ([EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(estimateType)) {
+      currentEstimatePoints.map((point) => {
+        if (Number(point) === Number(newEstimatePoint.trim())) isRepeated = true;
+      });
+    }
+  }
+
+  return isRepeated;
+};
diff --git a/packages/utils/src/file.ts b/packages/utils/src/file.ts
new file mode 100644
index 0000000..0d5d385
--- /dev/null
+++ b/packages/utils/src/file.ts
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+
+/**
+ * @description combine the file path with the base URL
+ * @param {string} path
+ * @returns {string} final URL with the base URL
+ */
+export const getFileURL = (path: string): string | undefined => {
+  if (!path) return undefined;
+  const isValidURL = path.startsWith("http");
+  if (isValidURL) return path;
+  return `${API_BASE_URL}${path}`;
+};
+
+/**
+ * @description this function returns the assetId from the asset source
+ * @param {string} src
+ * @returns {string} assetId
+ */
+export const getAssetIdFromUrl = (src: string): string => {
+  // remove the last char if it is a slash
+  if (src.charAt(src.length - 1) === "/") src = src.slice(0, -1);
+  const sourcePaths = src.split("/");
+  const assetUrl = sourcePaths[sourcePaths.length - 1];
+  return assetUrl;
+};
+
+/**
+ * @description encode image via URL to base64
+ * @param {string} url
+ * @returns
+ */
+export const getBase64Image = async (url: string): Promise<string> => {
+  if (!url || typeof url !== "string") {
+    throw new Error("Invalid URL provided");
+  }
+
+  // Try to create a URL object to validate the URL
+  try {
+    new URL(url);
+  } catch {
+    throw new Error("Invalid URL format");
+  }
+
+  const response = await fetch(url);
+  // check if the response is OK
+  if (!response.ok) {
+    throw new Error(`Failed to fetch image: ${response.statusText}`);
+  }
+
+  const blob = await response.blob();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      if (reader.result) {
+        resolve(reader.result as string);
+      } else {
+        reject(new Error("Failed to convert image to base64."));
+      }
+    };
+
+    reader.onerror = () => {
+      reject(new Error("Failed to read the image file."));
+    };
+
+    reader.readAsDataURL(blob);
+  });
+};
+
+/**
+ * @description downloads a CSV file
+ * @param {Array<Array<string>> | { [key: string]: string }} data - The data to be exported to CSV
+ * @param {string} name - The name of the file to be downloaded
+ */
+export const csvDownload = (data: Array<Array<string>> | { [key: string]: string }, name: string) => {
+  const rows = Array.isArray(data) ? [...data] : [Object.keys(data), Object.values(data)];
+
+  const csvContent = "data:text/csv;charset=utf-8," + rows.map((e) => e.join(",")).join("\n");
+  const encodedUri = encodeURI(csvContent);
+
+  const link = document.createElement("a");
+  link.href = encodedUri;
+  link.download = `${name}.csv`;
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
diff --git a/packages/utils/src/filter.ts b/packages/utils/src/filter.ts
new file mode 100644
index 0000000..72ffe1f
--- /dev/null
+++ b/packages/utils/src/filter.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+// local imports
+import { getDate } from "./datetime";
+
+/**
+ * @description calculates the total number of filters applied
+ * @param {T} filters
+ * @returns {number}
+ */
+export const calculateTotalFilters = <T>(filters: T): number =>
+  filters && Object.keys(filters).length > 0
+    ? Object.keys(filters)
+        .map((key) => {
+          const value = filters[key as keyof T];
+          if (value === null) return 0;
+          if (Array.isArray(value)) return value.length;
+          if (typeof value === "boolean") return value ? 1 : 0;
+          return 0;
+        })
+        .reduce((curr, prev) => curr + prev, 0)
+    : 0;
+
+/**
+ * @description checks if the date satisfies the filter
+ * @param {Date} date
+ * @param {string} filter
+ * @returns {boolean}
+ */
+export const satisfiesDateFilter = (date: Date, filter: string): boolean => {
+  const [value, operator, from] = filter.split(";");
+
+  const dateValue = getDate(value);
+  const differenceInDays = differenceInCalendarDays(date, new Date());
+
+  if (operator === "custom" && from === "custom") {
+    if (value === "today") return differenceInDays === 0;
+    if (value === "yesterday") return differenceInDays === -1;
+    if (value === "last_7_days") return differenceInDays >= -7;
+    if (value === "last_30_days") return differenceInDays >= -30;
+  }
+
+  if (!from && dateValue) {
+    if (operator === "after") return date >= dateValue;
+    if (operator === "before") return date <= dateValue;
+  }
+
+  if (from === "fromnow") {
+    if (operator === "before") {
+      if (value === "1_weeks") return differenceInDays <= -7;
+      if (value === "2_weeks") return differenceInDays <= -14;
+      if (value === "1_months") return differenceInDays <= -30;
+    }
+
+    if (operator === "after") {
+      if (value === "1_weeks") return differenceInDays >= 7;
+      if (value === "2_weeks") return differenceInDays >= 14;
+      if (value === "1_months") return differenceInDays >= 30;
+      if (value === "2_months") return differenceInDays >= 60;
+    }
+  }
+
+  return false;
+};
diff --git a/packages/utils/src/get-icon-for-link.ts b/packages/utils/src/get-icon-for-link.ts
new file mode 100644
index 0000000..00250b0
--- /dev/null
+++ b/packages/utils/src/get-icon-for-link.ts
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ComponentType, SVGProps } from "react";
+import { FileArchive, FileSpreadsheet } from "lucide-react";
+import {
+  Chrome,
+  CodeOutline,
+  DocumentationOutline,
+  Dribbble,
+  Facebook,
+  Figma,
+  Github,
+  ImageOutline,
+  Instagram,
+  LinkOutline,
+  Linkedin,
+  MailOutline,
+  MusicOutline,
+  VideoOutline,
+  X,
+  Youtube,
+} from "@makeplane/propel/icons";
+
+type IconMatcher = {
+  pattern: RegExp;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+};
+
+const SOCIAL_MEDIA_MATCHERS: IconMatcher[] = [
+  { pattern: /github\.com/, icon: Github },
+  { pattern: /linkedin\.com/, icon: Linkedin },
+  { pattern: /(twitter\.com|x\.com)/, icon: X },
+  { pattern: /facebook\.com/, icon: Facebook },
+  { pattern: /instagram\.com/, icon: Instagram },
+  { pattern: /youtube\.com/, icon: Youtube },
+  { pattern: /dribbble\.com/, icon: Dribbble },
+];
+
+const PRODUCTIVITY_MATCHERS: IconMatcher[] = [
+  { pattern: /figma\.com/, icon: Figma },
+  { pattern: /(google\.com|docs\.|doc\.)/, icon: DocumentationOutline },
+];
+
+const FILE_TYPE_MATCHERS: IconMatcher[] = [
+  { pattern: /\.(jpg|jpeg|png|gif|bmp|svg|webp)$/, icon: ImageOutline },
+  { pattern: /\.(mp4|mov|avi|wmv|flv|mkv)$/, icon: VideoOutline },
+  { pattern: /\.(mp3|wav|ogg)$/, icon: MusicOutline },
+  { pattern: /\.(zip|rar|7z|tar|gz)$/, icon: FileArchive },
+  { pattern: /\.(xls|xlsx|csv)$/, icon: FileSpreadsheet },
+  { pattern: /\.(pdf|doc|docx|txt)$/, icon: DocumentationOutline },
+  { pattern: /\.(html|js|ts|jsx|tsx|css|scss)$/, icon: CodeOutline },
+];
+
+const OTHER_MATCHERS: IconMatcher[] = [
+  { pattern: /^mailto:/, icon: MailOutline },
+  { pattern: /^http/, icon: Chrome },
+];
+
+export const getIconForLink = (url: string) => {
+  const lowerUrl = url.toLowerCase();
+
+  const allMatchers = [...SOCIAL_MEDIA_MATCHERS, ...PRODUCTIVITY_MATCHERS, ...FILE_TYPE_MATCHERS, ...OTHER_MATCHERS];
+
+  const matchedIcon = allMatchers.find(({ pattern }) => pattern.test(lowerUrl));
+  return matchedIcon?.icon ?? LinkOutline;
+};
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
new file mode 100644
index 0000000..450acb4
--- /dev/null
+++ b/packages/utils/src/index.ts
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./array";
+export * from "./attachment";
+export * from "./auth";
+export * from "./calendar";
+export * from "./color";
+export * from "./common";
+export * from "./cycle";
+export * from "./datetime";
+export * from "./distribution-update";
+export * from "./editor";
+export * from "./emoji";
+export * from "./estimates";
+export * from "./file";
+export * from "./filter";
+export * from "./get-icon-for-link";
+export * from "./intake";
+export * from "./loader";
+export * from "./math";
+export * from "./module";
+export * from "./notification";
+export * from "./page";
+export * from "./permission";
+export * from "./project-views";
+export * from "./project";
+export * from "./rich-filters";
+export * from "./router";
+export * from "./string";
+export * from "./subscription";
+export * from "./tab-indices";
+export * from "./theme";
+export { resolveGeneralTheme } from "./theme-legacy";
+export * from "./url";
+export * from "./validation";
+export * from "./work-item-filters";
+export * from "./work-item";
+export * from "./workspace";
diff --git a/packages/utils/src/intake.ts b/packages/utils/src/intake.ts
new file mode 100644
index 0000000..ef450d4
--- /dev/null
+++ b/packages/utils/src/intake.ts
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { subDays } from "date-fns";
+// plane imports
+import { EPastDurationFilters } from "@plane/constants";
+// local imports
+import { renderFormattedPayloadDate } from "./datetime";
+
+export const getCustomDates = (duration: EPastDurationFilters): string => {
+  const today = new Date();
+  let firstDay, lastDay;
+
+  switch (duration) {
+    case EPastDurationFilters.TODAY: {
+      firstDay = renderFormattedPayloadDate(today);
+      lastDay = renderFormattedPayloadDate(today);
+      return `${firstDay};after,${lastDay};before`;
+    }
+    case EPastDurationFilters.YESTERDAY: {
+      const yesterday = subDays(today, 1);
+      firstDay = renderFormattedPayloadDate(yesterday);
+      lastDay = renderFormattedPayloadDate(yesterday);
+      return `${firstDay};after,${lastDay};before`;
+    }
+    case EPastDurationFilters.LAST_7_DAYS: {
+      firstDay = renderFormattedPayloadDate(subDays(today, 7));
+      lastDay = renderFormattedPayloadDate(today);
+      return `${firstDay};after,${lastDay};before`;
+    }
+    case EPastDurationFilters.LAST_30_DAYS: {
+      firstDay = renderFormattedPayloadDate(subDays(today, 30));
+      lastDay = renderFormattedPayloadDate(today);
+      return `${firstDay};after,${lastDay};before`;
+    }
+  }
+};
diff --git a/packages/utils/src/loader.ts b/packages/utils/src/loader.ts
new file mode 100644
index 0000000..4ce9503
--- /dev/null
+++ b/packages/utils/src/loader.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TLoader } from "@plane/types";
+
+// checks if a loader has finished initialization
+export const isLoaderReady = (loader: TLoader | undefined) => loader !== "init-loader";
diff --git a/packages/utils/src/math.ts b/packages/utils/src/math.ts
new file mode 100644
index 0000000..0e2a1ac
--- /dev/null
+++ b/packages/utils/src/math.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const getProgress = (completed: number | undefined, total: number | undefined) =>
+  total && total > 0 ? Math.round(((completed ?? 0) / total) * 100) : 0;
diff --git a/packages/utils/src/module.ts b/packages/utils/src/module.ts
new file mode 100644
index 0000000..bd96120
--- /dev/null
+++ b/packages/utils/src/module.ts
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { sortBy } from "lodash-es";
+// plane imports
+import type { IModule, TModuleDisplayFilters, TModuleFilters, TModuleOrderByOptions } from "@plane/types";
+// local imports
+import { getDate } from "./datetime";
+import { satisfiesDateFilter } from "./filter";
+
+const collator = new Intl.Collator("en-US", { numeric: true, sensitivity: "base" });
+
+/**
+ * @description performs natural sorting of strings (handles numbers within strings correctly)
+ * @param {string} a - first string to compare
+ * @param {string} b - second string to compare
+ * @returns {number} - comparison result (-1, 0, or 1)
+ */
+const naturalSort = (a: string, b: string): number => collator.compare(a, b);
+/**
+ * @description orders modules based on their status
+ * @param {IModule[]} modules
+ * @param {TModuleOrderByOptions | undefined} orderByKey
+ * @returns {IModule[]}
+ */
+export const orderModules = (modules: IModule[], orderByKey: TModuleOrderByOptions | undefined): IModule[] => {
+  let orderedModules: IModule[] = [];
+  if (modules.length === 0 || !orderByKey) return [];
+
+  if (orderByKey === "name") orderedModules = [...modules].toSorted((a, b) => naturalSort(a.name, b.name));
+  if (orderByKey === "-name") orderedModules = [...modules].toSorted((a, b) => naturalSort(b.name, a.name));
+  if (["progress", "-progress"].includes(orderByKey))
+    orderedModules = sortBy(modules, [
+      (m) => {
+        let progress = (m.completed_issues + m.cancelled_issues) / m.total_issues;
+        if (isNaN(progress)) progress = 0;
+        return orderByKey === "progress" ? progress : -progress;
+      },
+    ]);
+  if (["issues_length", "-issues_length"].includes(orderByKey))
+    orderedModules = sortBy(modules, [(m) => (orderByKey === "issues_length" ? m.total_issues : !m.total_issues)]);
+  if (orderByKey === "target_date") orderedModules = sortBy(modules, [(m) => m.target_date]);
+  if (orderByKey === "-target_date") orderedModules = sortBy(modules, [(m) => !m.target_date]);
+  if (orderByKey === "created_at") orderedModules = sortBy(modules, [(m) => m.created_at]);
+  if (orderByKey === "-created_at") orderedModules = sortBy(modules, [(m) => !m.created_at]);
+
+  if (orderByKey === "sort_order") orderedModules = sortBy(modules, [(m) => m.sort_order]);
+  return orderedModules;
+};
+
+/**
+ * @description filters modules based on the filters
+ * @param {IModule} module
+ * @param {TModuleDisplayFilters} displayFilters
+ * @param {TModuleFilters} filters
+ * @returns {boolean}
+ */
+export const shouldFilterModule = (
+  module: IModule,
+  displayFilters: TModuleDisplayFilters,
+  filters: TModuleFilters
+): boolean => {
+  let fallsInFilters = true;
+  Object.keys(filters).forEach((key) => {
+    const filterKey = key as keyof TModuleFilters;
+    if (filterKey === "status" && filters.status && filters.status.length > 0)
+      fallsInFilters = fallsInFilters && filters.status.includes(module.status?.toLowerCase() ?? "");
+    if (filterKey === "lead" && filters.lead && filters.lead.length > 0)
+      fallsInFilters = fallsInFilters && filters.lead.includes(`${module.lead_id}`);
+    if (filterKey === "members" && filters.members && filters.members.length > 0) {
+      const memberIds = module.member_ids ?? [];
+      fallsInFilters = fallsInFilters && filters.members.some((memberId) => memberIds.includes(memberId));
+    }
+    if (filterKey === "start_date" && filters.start_date && filters.start_date.length > 0) {
+      const startDate = getDate(module.start_date);
+      filters.start_date.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!startDate && satisfiesDateFilter(startDate, dateFilter);
+      });
+    }
+    if (filterKey === "target_date" && filters.target_date && filters.target_date.length > 0) {
+      const endDate = getDate(module.target_date);
+      filters.target_date.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!endDate && satisfiesDateFilter(endDate, dateFilter);
+      });
+    }
+  });
+  if (displayFilters.favorites && !module.is_favorite) fallsInFilters = false;
+
+  return fallsInFilters;
+};
diff --git a/packages/utils/src/notification.ts b/packages/utils/src/notification.ts
new file mode 100644
index 0000000..b8751ab
--- /dev/null
+++ b/packages/utils/src/notification.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { stripAndTruncateHTML } from "./string";
+
+export const sanitizeCommentForNotification = (mentionContent: string | undefined) =>
+  mentionContent
+    ? stripAndTruncateHTML(
+        mentionContent.replace(/<mention-component\b[^>]*\blabel="([^"]*)"[^>]*><\/mention-component>/g, "$1")
+      )
+    : mentionContent;
diff --git a/packages/utils/src/page.ts b/packages/utils/src/page.ts
new file mode 100644
index 0000000..b566c5b
--- /dev/null
+++ b/packages/utils/src/page.ts
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { sortBy } from "lodash-es";
+// plane imports
+import type {
+  TPage,
+  TPageFilterProps,
+  TPageFiltersSortBy,
+  TPageFiltersSortKey,
+  TPageNavigationTabs,
+} from "@plane/types";
+// local imports
+import { getDate } from "./datetime";
+import { satisfiesDateFilter } from "./filter";
+
+/**
+ * @description filters pages based on the page type
+ * @param {TPageNavigationTabs} pageType
+ * @param {TPage[]} pages
+ * @returns {TPage[]}
+ */
+export const filterPagesByPageType = (pageType: TPageNavigationTabs, pages: TPage[]): TPage[] =>
+  pages.filter((page) => {
+    if (pageType === "public") return page.access === 0 && !page.archived_at;
+    if (pageType === "private") return page.access === 1 && !page.archived_at;
+    if (pageType === "archived") return page.archived_at;
+    return true;
+  });
+
+/**
+ * @description orders pages based on their status
+ * @param {TPage[]} pages
+ * @param {TPageFiltersSortKey | undefined} sortByKey
+ * @param {TPageFiltersSortBy} sortByOrder
+ * @returns {TPage[]}
+ */
+export const orderPages = (
+  pages: TPage[],
+  sortByKey: TPageFiltersSortKey | undefined,
+  sortByOrder: TPageFiltersSortBy
+): TPage[] => {
+  let orderedPages: TPage[] = [];
+  if (pages.length === 0 || !sortByKey) return [];
+
+  if (sortByKey === "name") {
+    orderedPages = sortBy(pages, [(m) => m.name?.toLowerCase()]);
+    if (sortByOrder === "desc") orderedPages = orderedPages.reverse();
+  }
+  if (sortByKey === "created_at") {
+    orderedPages = sortBy(pages, [(m) => m.created_at]);
+    if (sortByOrder === "desc") orderedPages = orderedPages.reverse();
+  }
+  if (sortByKey === "updated_at") {
+    orderedPages = sortBy(pages, [(m) => m.updated_at]);
+    if (sortByOrder === "desc") orderedPages = orderedPages.reverse();
+  }
+
+  return orderedPages;
+};
+
+/**
+ * @description filters pages based on the filters
+ * @param {TPage} page
+ * @param {TPageFilterProps | undefined} filters
+ * @returns {boolean}
+ */
+export const shouldFilterPage = (page: TPage, filters: TPageFilterProps | undefined): boolean => {
+  let fallsInFilters = true;
+  Object.keys(filters ?? {}).forEach((key) => {
+    const filterKey = key as keyof TPageFilterProps;
+    if (filterKey === "created_by" && filters?.created_by && filters.created_by.length > 0)
+      fallsInFilters = fallsInFilters && filters.created_by.includes(`${page.owned_by}`);
+    if (filterKey === "created_at" && filters?.created_at && filters.created_at.length > 0) {
+      const createdDate = getDate(page.created_at);
+      filters?.created_at.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!createdDate && satisfiesDateFilter(createdDate, dateFilter);
+      });
+    }
+  });
+  if (filters?.favorites && !page.is_favorite) fallsInFilters = false;
+
+  return fallsInFilters;
+};
+
+/**
+ * @description returns the name of the project after checking for untitled page
+ * @param {string | undefined} name
+ * @returns {string}
+ */
+export const getPageName = (name: string | undefined) => {
+  if (name === undefined) return "";
+  if (!name || name.trim() === "") return "Untitled";
+  return name;
+};
diff --git a/packages/utils/src/permission/index.ts b/packages/utils/src/permission/index.ts
new file mode 100644
index 0000000..afca0d0
--- /dev/null
+++ b/packages/utils/src/permission/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./role";
diff --git a/packages/utils/src/permission/role.ts b/packages/utils/src/permission/role.ts
new file mode 100644
index 0000000..b2a1198
--- /dev/null
+++ b/packages/utils/src/permission/role.ts
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { EUserPermissions } from "@plane/constants";
+import type { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
+
+export const getUserRole = (role: EUserPermissions | EUserWorkspaceRoles | EUserProjectRoles) => {
+  switch (role) {
+    case EUserPermissions.GUEST:
+      return "GUEST";
+    case EUserPermissions.MEMBER:
+      return "MEMBER";
+    case EUserPermissions.ADMIN:
+      return "ADMIN";
+  }
+};
+
+type TSupportedRole = EUserPermissions | EUserProjectRoles | EUserWorkspaceRoles;
+
+/**
+ * @description Returns the highest role from an array of supported roles
+ * @param { TSupportedRole[] } roles
+ * @returns { TSupportedRole | undefined }
+ */
+export const getHighestRole = <T extends TSupportedRole>(roles: T[]): T | undefined => {
+  if (!roles || roles.length === 0) return undefined;
+  return roles.reduce((highest, current) => (current > highest ? current : highest));
+};
diff --git a/packages/utils/src/project-views.ts b/packages/utils/src/project-views.ts
new file mode 100644
index 0000000..8628f61
--- /dev/null
+++ b/packages/utils/src/project-views.ts
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { isNil, orderBy } from "lodash-es";
+// plane imports
+import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
+import type { IProjectView, TViewFilterProps, TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
+// local imports
+import { getDate } from "./datetime";
+import { satisfiesDateFilter } from "./filter";
+
+/**
+ * order views base on TViewFiltersSortKey
+ * @param views
+ * @param sortByKey
+ * @param sortByOrder
+ * @returns
+ */
+export const orderViews = (
+  views: IProjectView[],
+  sortByKey: TViewFiltersSortKey | undefined,
+  sortByOrder: TViewFiltersSortBy
+): IProjectView[] => {
+  if (views.length === 0 || !sortByKey) return [];
+
+  let iterableFunction;
+  if (sortByKey === "name") {
+    iterableFunction = (view: IProjectView) => view.name?.toLowerCase();
+  }
+  if (sortByKey === "created_at") {
+    iterableFunction = (view: IProjectView) => view.created_at;
+  }
+  if (sortByKey === "updated_at") {
+    iterableFunction = (view: IProjectView) => view.updated_at;
+  }
+
+  if (!iterableFunction) return [];
+
+  return orderBy(views, [iterableFunction], [sortByOrder]);
+};
+
+/**
+ * Checks if the passed down view should be filtered or not
+ * @param view
+ * @param filters
+ * @returns
+ */
+export const shouldFilterView = (view: IProjectView, filters: TViewFilterProps | undefined): boolean => {
+  let fallsInFilters = true;
+  Object.keys(filters ?? {}).forEach((key) => {
+    const filterKey = key as keyof TViewFilterProps;
+    if (filterKey === "owned_by" && filters?.owned_by && filters.owned_by.length > 0) {
+      fallsInFilters = fallsInFilters && filters.owned_by.includes(`${view.created_by}`);
+    }
+
+    if (filterKey === "created_at" && filters?.created_at && filters.created_at.length > 0) {
+      const createdDate = getDate(view.created_at);
+      filters?.created_at.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!createdDate && satisfiesDateFilter(createdDate, dateFilter);
+      });
+    }
+
+    if (filterKey === "view_type" && filters?.view_type && filters?.view_type?.length > 0) {
+      fallsInFilters = filters.view_type.includes(view.access);
+    }
+  });
+
+  if (filters?.favorites && !view.is_favorite) fallsInFilters = false;
+
+  return fallsInFilters;
+};
+
+/**
+ * @description returns the name of the project after checking for untitled view
+ * @param {string | undefined} name
+ * @returns {string}
+ */
+export const getViewName = (name: string | undefined) => {
+  if (name === undefined) return "";
+  if (!name || name.trim() === "") return "Untitled";
+  return name;
+};
+
+/**
+ * Adds validation for the view creation filters
+ * @param data
+ * @returns
+ */
+export const getValidatedViewFilters = (data: Partial<IProjectView>) => {
+  if (data?.display_filters && data?.display_filters?.layout === "kanban" && isNil(data.display_filters.group_by)) {
+    data.display_filters.group_by = "state";
+  }
+
+  return data;
+};
+
+/**
+ * returns published view link
+ * @param anchor
+ * @returns
+ */
+export const getPublishViewLink = (anchor: string | undefined) => {
+  if (!anchor) return;
+
+  const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? window.location.origin : SPACE_BASE_URL) + SPACE_BASE_PATH;
+  return `${SPACE_APP_URL}/views/${anchor}`;
+};
diff --git a/packages/utils/src/project.ts b/packages/utils/src/project.ts
new file mode 100644
index 0000000..1cfc2cf
--- /dev/null
+++ b/packages/utils/src/project.ts
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { sortBy } from "lodash-es";
+// plane imports
+import type { TProject, TProjectDisplayFilters, TProjectFilters, TProjectOrderByOptions } from "@plane/types";
+// local imports
+import { getDate } from "./datetime";
+import { satisfiesDateFilter } from "./filter";
+
+/**
+ * Updates the sort order of the project.
+ * @param sortIndex
+ * @param destinationIndex
+ * @param projectId
+ * @returns number | undefined
+ */
+export const orderJoinedProjects = (
+  sourceIndex: number,
+  destinationIndex: number,
+  currentProjectId: string,
+  joinedProjects: TProject[]
+): number | undefined => {
+  if (!currentProjectId || sourceIndex < 0 || destinationIndex < 0 || joinedProjects.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 = joinedProjects[destinationIndex].sort_order || 0;
+    updatedSortOrder = currentSortOrder - sortOrderDefaultValue;
+  } else if (destinationIndex === joinedProjects.length) {
+    // updating project at the bottom of the project
+    const currentSortOrder = joinedProjects[destinationIndex - 1].sort_order || 0;
+    updatedSortOrder = currentSortOrder + sortOrderDefaultValue;
+  } else {
+    // updating project in the middle of the project
+    const destinationTopProjectSortOrder = joinedProjects[destinationIndex - 1].sort_order || 0;
+    const destinationBottomProjectSortOrder = joinedProjects[destinationIndex].sort_order || 0;
+    const updatedValue = (destinationTopProjectSortOrder + destinationBottomProjectSortOrder) / 2;
+    updatedSortOrder = updatedValue;
+  }
+
+  return updatedSortOrder;
+};
+
+export const projectIdentifierSanitizer = (identifier: string): string =>
+  identifier.replace(/[^ÇŞĞIİÖÜA-Za-z0-9]/g, "");
+
+/**
+ * @description filters projects based on the filter
+ * @param {TProject} project
+ * @param {TProjectFilters} filters
+ * @param {TProjectDisplayFilters} displayFilters
+ * @returns {boolean}
+ */
+export const shouldFilterProject = (
+  project: TProject,
+  displayFilters: TProjectDisplayFilters,
+  filters: TProjectFilters
+): boolean => {
+  let fallsInFilters = true;
+  Object.keys(filters).forEach((key) => {
+    const filterKey = key as keyof TProjectFilters;
+    if (filterKey === "access" && filters.access && filters.access.length > 0)
+      fallsInFilters = fallsInFilters && filters.access.includes(`${project.network}`);
+    if (filterKey === "lead" && filters.lead && filters.lead.length > 0)
+      fallsInFilters = fallsInFilters && filters.lead.includes(`${project.project_lead}`);
+    if (filterKey === "members" && filters.members && filters.members.length > 0) {
+      const memberIds = project.members;
+      fallsInFilters = fallsInFilters && filters.members.some((memberId) => memberIds?.includes(memberId));
+    }
+    if (filterKey === "created_at" && filters.created_at && filters.created_at.length > 0) {
+      const createdDate = getDate(project.created_at);
+      filters.created_at.forEach((dateFilter) => {
+        fallsInFilters = fallsInFilters && !!createdDate && satisfiesDateFilter(createdDate, dateFilter);
+      });
+    }
+  });
+  if (displayFilters.my_projects && !project.member_role) fallsInFilters = false;
+  if (displayFilters.archived_projects && !project.archived_at) fallsInFilters = false;
+  if (project.archived_at) fallsInFilters = displayFilters.archived_projects ? fallsInFilters : false;
+
+  return fallsInFilters;
+};
+
+/**
+ * @description orders projects based on the orderByKey
+ * @param {TProject[]} projects
+ * @param {TProjectOrderByOptions | undefined} orderByKey
+ * @returns {TProject[]}
+ */
+export const orderProjects = (projects: TProject[], orderByKey: TProjectOrderByOptions | undefined): TProject[] => {
+  let orderedProjects: TProject[] = [];
+  if (projects.length === 0) return orderedProjects;
+
+  if (orderByKey === "sort_order") orderedProjects = sortBy(projects, [(p) => p.sort_order]);
+  if (orderByKey === "name") orderedProjects = sortBy(projects, [(p) => p.name.toLowerCase()]);
+  if (orderByKey === "-name") orderedProjects = sortBy(projects, [(p) => p.name.toLowerCase()]).reverse();
+  if (orderByKey === "created_at") orderedProjects = sortBy(projects, [(p) => p.created_at]);
+  if (orderByKey === "-created_at") orderedProjects = sortBy(projects, [(p) => !p.created_at]);
+  if (orderByKey === "members_length") orderedProjects = sortBy(projects, [(p) => p.members?.length]);
+  if (orderByKey === "-members_length") orderedProjects = sortBy(projects, [(p) => p.members?.length]).reverse();
+
+  return orderedProjects;
+};
diff --git a/packages/utils/src/rich-filters/factories/configs/core.ts b/packages/utils/src/rich-filters/factories/configs/core.ts
new file mode 100644
index 0000000..84203c6
--- /dev/null
+++ b/packages/utils/src/rich-filters/factories/configs/core.ts
@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TFilterValue, TSupportedOperators, TBaseFilterFieldConfig } from "@plane/types";
+import { FILTER_FIELD_TYPE } from "@plane/types";
+// local imports
+import type { IFilterIconConfig } from "./shared";
+import { createFilterFieldConfig } from "./shared";
+
+// ------------ Selection filters ------------
+
+/**
+ * Options transformation interface for selection filters
+ */
+export interface TOptionTransforms<TItem, TValue extends TFilterValue = string, TIconData = undefined> {
+  items: TItem[];
+  getId: (item: TItem) => string;
+  getLabel: (item: TItem) => string;
+  getValue: (item: TItem) => TValue;
+  getIconData?: (item: TItem) => TIconData;
+}
+
+/**
+ * Single-select filter configuration
+ */
+export type TSingleSelectConfig<TValue extends TFilterValue = string> = TBaseFilterFieldConfig & {
+  defaultValue?: TValue;
+};
+
+/**
+ * Helper to get the single select config
+ * @param transforms - How to transform items into options
+ * @param config - Single-select specific configuration
+ * @param iconConfig - Icon configuration for options
+ * @returns The single select config
+ */
+export const getSingleSelectConfig = <
+  TItem,
+  TValue extends TFilterValue = string,
+  TIconData extends string | number | boolean | object | undefined = undefined,
+>(
+  transforms: TOptionTransforms<TItem, TValue, TIconData>,
+  config: TSingleSelectConfig<TValue>,
+  iconConfig?: IFilterIconConfig<TIconData>
+) =>
+  createFilterFieldConfig<typeof FILTER_FIELD_TYPE.SINGLE_SELECT, TValue>({
+    type: FILTER_FIELD_TYPE.SINGLE_SELECT,
+    ...config,
+    getOptions: () =>
+      transforms.items.map((item) => ({
+        id: transforms.getId(item),
+        label: transforms.getLabel(item),
+        value: transforms.getValue(item),
+        icon: iconConfig?.getOptionIcon?.(transforms.getIconData?.(item) as TIconData),
+      })),
+  });
+
+/**
+ * Multi-select filter configuration
+ */
+export type TMultiSelectConfig<TValue extends TFilterValue = string> = TBaseFilterFieldConfig & {
+  defaultValue?: TValue[];
+  singleValueOperator: TSupportedOperators;
+};
+
+/**
+ * Helper to get the multi select config
+ * @param transforms - How to transform items into options
+ * @param config - Multi-select specific configuration
+ * @param iconConfig - Icon configuration for options
+ * @returns The multi select config
+ */
+export const getMultiSelectConfig = <
+  TItem,
+  TValue extends TFilterValue = string,
+  TIconData extends string | number | boolean | object | undefined = undefined,
+>(
+  transforms: TOptionTransforms<TItem, TValue, TIconData>,
+  config: TMultiSelectConfig<TValue>,
+  iconConfig?: IFilterIconConfig<TIconData>
+) =>
+  createFilterFieldConfig<typeof FILTER_FIELD_TYPE.MULTI_SELECT, TValue>({
+    type: FILTER_FIELD_TYPE.MULTI_SELECT,
+    ...config,
+    operatorLabel: config?.operatorLabel,
+    getOptions: () =>
+      transforms.items.map((item) => ({
+        id: transforms.getId(item),
+        label: transforms.getLabel(item),
+        value: transforms.getValue(item),
+        icon: iconConfig?.getOptionIcon?.(transforms.getIconData?.(item) as TIconData),
+      })),
+  });
+
+// ------------ Date filters ------------
+
+/**
+ * Date filter configuration
+ */
+export type TDateConfig = TBaseFilterFieldConfig & {
+  min?: Date;
+  max?: Date;
+};
+
+/**
+ * Date range filter configuration
+ */
+export type TDateRangeConfig = TBaseFilterFieldConfig & {
+  min?: Date;
+  max?: Date;
+};
+
+/**
+ * Helper to get the date picker config
+ * @param config - Date-specific configuration
+ * @returns The date picker config
+ */
+export const getDatePickerConfig = (config: TDateConfig) =>
+  createFilterFieldConfig<typeof FILTER_FIELD_TYPE.DATE, Date>({
+    type: FILTER_FIELD_TYPE.DATE,
+    ...config,
+  });
+
+/**
+ * Helper to get the date range picker config
+ * @param config - Date range-specific configuration
+ * @returns The date range picker config
+ */
+export const getDateRangePickerConfig = (config: TDateRangeConfig) =>
+  createFilterFieldConfig<typeof FILTER_FIELD_TYPE.DATE_RANGE, Date>({
+    type: FILTER_FIELD_TYPE.DATE_RANGE,
+    ...config,
+  });
diff --git a/packages/utils/src/rich-filters/factories/configs/index.ts b/packages/utils/src/rich-filters/factories/configs/index.ts
new file mode 100644
index 0000000..14efa66
--- /dev/null
+++ b/packages/utils/src/rich-filters/factories/configs/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./core";
+export * from "./shared";
+export * from "./properties";
diff --git a/packages/utils/src/rich-filters/factories/configs/properties/date.ts b/packages/utils/src/rich-filters/factories/configs/properties/date.ts
new file mode 100644
index 0000000..e4db0bd
--- /dev/null
+++ b/packages/utils/src/rich-filters/factories/configs/properties/date.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TFilterProperty } from "@plane/types";
+// local imports
+import type { TCreateDateFilterParams, TCreateFilterConfig } from "../shared";
+import { createFilterConfig } from "../shared";
+import type { TCustomPropertyFilterParams } from "./shared";
+import { getSupportedDateOperators } from "./shared";
+
+/**
+ * Date property filter specific params
+ */
+export type TCreateDatePropertyFilterParams = TCustomPropertyFilterParams<Date> & TCreateDateFilterParams;
+
+/**
+ * Get the date property filter config
+ * @param params - The filter params
+ * @returns The date property filter config
+ */
+export const getDatePropertyFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateDatePropertyFilterParams> =>
+  (params: TCreateDatePropertyFilterParams) =>
+    createFilterConfig({
+      id: key,
+      ...params,
+      label: params.propertyDisplayName,
+      icon: params.filterIcon,
+      allowMultipleFilters: true,
+      supportedOperatorConfigsMap: getSupportedDateOperators(params),
+    });
diff --git a/packages/utils/src/rich-filters/factories/configs/properties/index.ts b/packages/utils/src/rich-filters/factories/configs/properties/index.ts
new file mode 100644
index 0000000..c988f50
--- /dev/null
+++ b/packages/utils/src/rich-filters/factories/configs/properties/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./date";
+export * from "./member-picker";
+export * from "./shared";
diff --git a/packages/utils/src/rich-filters/factories/configs/properties/member-picker.ts b/packages/utils/src/rich-filters/factories/configs/properties/member-picker.ts
new file mode 100644
index 0000000..f1eb054
--- /dev/null
+++ b/packages/utils/src/rich-filters/factories/configs/properties/member-picker.ts
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IUserLite, TFilterProperty } from "@plane/types";
+import { EQUALITY_OPERATOR } from "@plane/types";
+// local imports
+import type { TCreateFilterConfig } from "../shared";
+import { createFilterConfig, createOperatorConfigEntry } from "../shared";
+import type { TCreateUserFilterParams, TCustomPropertyFilterParams } from "./shared";
+import { getMemberMultiSelectConfig } from "./shared";
+
+/**
+ * Member picker property filter specific params
+ */
+type TCreateMemberPickerPropertyFilterParams = TCustomPropertyFilterParams<IUserLite> & TCreateUserFilterParams;
+
+/**
+ * Get the member picker property filter config
+ * @param params - The filter params
+ * @returns The member picker property filter config
+ */
+export const getMemberPickerPropertyFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateMemberPickerPropertyFilterParams> =>
+  (params: TCreateMemberPickerPropertyFilterParams) =>
+    createFilterConfig({
+      id: key,
+      ...params,
+      label: params.propertyDisplayName,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(EQUALITY_OPERATOR.EXACT, params, (updatedParams) =>
+          getMemberMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
diff --git a/packages/utils/src/rich-filters/factories/configs/properties/shared.ts b/packages/utils/src/rich-filters/factories/configs/properties/shared.ts
new file mode 100644
index 0000000..7222d5d
--- /dev/null
+++ b/packages/utils/src/rich-filters/factories/configs/properties/shared.ts
@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IProject, IUserLite, TOperatorConfigMap, TSupportedOperators } from "@plane/types";
+import { COMPARISON_OPERATOR, EQUALITY_OPERATOR } from "@plane/types";
+// local imports
+import { getDatePickerConfig, getDateRangePickerConfig, getMultiSelectConfig } from "../core";
+import type { IFilterIconConfig, TCreateDateFilterParams, TCreateFilterConfigParams, TFilterIconType } from "../shared";
+import { createOperatorConfigEntry } from "../shared";
+
+// ------------ Base User Filter Types ------------
+
+/**
+ * User filter specific params
+ */
+export type TCreateUserFilterParams = TCreateFilterConfigParams &
+  IFilterIconConfig<IUserLite> & {
+    members: IUserLite[];
+  };
+
+/**
+ * Helper to get the member multi select config
+ * @param params - The filter params
+ * @returns The member multi select config
+ */
+export const getMemberMultiSelectConfig = (params: TCreateUserFilterParams, singleValueOperator: TSupportedOperators) =>
+  getMultiSelectConfig<IUserLite, string, IUserLite>(
+    {
+      items: params.members,
+      getId: (member) => member.id,
+      getLabel: (member) => member.display_name,
+      getValue: (member) => member.id,
+      getIconData: (member) => member,
+    },
+    {
+      singleValueOperator,
+      ...params,
+    },
+    {
+      ...params,
+    }
+  );
+
+// ------------ Date Operators ------------
+
+export const getSupportedDateOperators = (params: TCreateDateFilterParams): TOperatorConfigMap =>
+  new Map([
+    createOperatorConfigEntry(EQUALITY_OPERATOR.EXACT, params, (updatedParams) => getDatePickerConfig(updatedParams)),
+    createOperatorConfigEntry(COMPARISON_OPERATOR.RANGE, params, (updatedParams) =>
+      getDateRangePickerConfig(updatedParams)
+    ),
+  ]);
+
+// ------------ Project filter ------------
+
+/**
+ * Project filter specific params
+ */
+export type TCreateProjectFilterParams = TCreateFilterConfigParams &
+  IFilterIconConfig<IProject> & {
+    projects: IProject[];
+  };
+
+/**
+ * Helper to get the project multi select config
+ * @param params - The filter params
+ * @returns The member multi select config
+ */
+export const getProjectMultiSelectConfig = (
+  params: TCreateProjectFilterParams,
+  singleValueOperator: TSupportedOperators
+) =>
+  getMultiSelectConfig<IProject, string, IProject>(
+    {
+      items: params.projects,
+      getId: (project) => project.id,
+      getLabel: (project) => project.name,
+      getValue: (project) => project.id,
+      getIconData: (project) => project,
+    },
+    {
+      singleValueOperator,
+      ...params,
+    },
+    {
+      ...params,
+    }
+  );
+
+/**
+ * Custom property filter specific params
+ */
+export type TCustomPropertyFilterParams<T extends TFilterIconType> = TCreateFilterConfigParams &
+  IFilterIconConfig<T> & {
+    propertyDisplayName: string;
+  };
diff --git a/packages/utils/src/rich-filters/factories/configs/shared.ts b/packages/utils/src/rich-filters/factories/configs/shared.ts
new file mode 100644
index 0000000..e7cc207
--- /dev/null
+++ b/packages/utils/src/rich-filters/factories/configs/shared.ts
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  FILTER_FIELD_TYPE,
+  TBaseFilterFieldConfig,
+  TDateFilterFieldConfig,
+  TDateRangeFilterFieldConfig,
+  TFilterConfig,
+  TFilterProperty,
+  TFilterFieldType,
+  TFilterValue,
+  TMultiSelectFilterFieldConfig,
+  TSingleSelectFilterFieldConfig,
+  TSupportedFilterFieldConfigs,
+  TSupportedOperators,
+  TOperatorSpecificConfigs,
+} from "@plane/types";
+
+/**
+ * Helper to create a type-safe filter config
+ * @param config - The filter config to create
+ * @returns The created filter config
+ */
+export const createFilterConfig = <P extends TFilterProperty>(config: TFilterConfig<P>): TFilterConfig<P> => config;
+
+/**
+ * Base parameters for filter type config factory functions.
+ * - operator: The operator to use for the filter.
+ */
+export type TCreateFilterConfigParams = Omit<TBaseFilterFieldConfig, "isOperatorEnabled"> & {
+  isEnabled: boolean;
+  allowedOperators: Set<TSupportedOperators>;
+  rightContent?: React.ReactNode; // content to display on the right side of the filter option in the dropdown
+  tooltipContent?: React.ReactNode; // content to display when hovering over the applied filter item in the filter list
+};
+
+/**
+ * Type for filter icon type
+ */
+export type TFilterIconType = string | number | boolean | object | undefined;
+
+/**
+ * Icon configuration for filters and their options.
+ * - filterIcon: Optional icon for the filter
+ * - getOptionIcon: Function to get icon for specific option values
+ */
+export interface IFilterIconConfig<T extends TFilterIconType = undefined> {
+  filterIcon?: React.FC<React.SVGAttributes<SVGElement>>;
+  getOptionIcon?: (value: T) => React.ReactNode;
+}
+
+/**
+ * Date filter config params
+ */
+export type TCreateDateFilterParams = TCreateFilterConfigParams & IFilterIconConfig<Date>;
+
+/**
+ * Helper to create an operator entry for the supported operators map.
+ * This ensures consistency between the operator key and the operator passed to the config function.
+ * Returns a type compatible with TOperatorSpecificConfigs so Map constructor accepts union types.
+ * @param operator - The operator to use as both key and parameter
+ * @param createParams - The base filter configuration parameters
+ * @param configFn - Function that creates the operator config using base configuration
+ * @returns A tuple of operator and its config, typed to be compatible with operator configs map
+ */
+export const createOperatorConfigEntry = <
+  T extends TOperatorSpecificConfigs[keyof TOperatorSpecificConfigs],
+  P extends TCreateFilterConfigParams,
+>(
+  operator: TSupportedOperators,
+  createParams: P,
+  configFn: (updatedParams: P) => T
+): [TSupportedOperators, TOperatorSpecificConfigs[keyof TOperatorSpecificConfigs]] => [
+  operator,
+  configFn({ isOperatorEnabled: createParams.allowedOperators.has(operator), ...createParams }),
+];
+
+/**
+ * Factory function signature for creating filter configurations.
+ */
+export type TCreateFilterConfig<P extends TFilterProperty, T> = (params: T) => TFilterConfig<P>;
+
+/**
+ * Helper to create a type-safe filter field config
+ * @param config - The filter field config to create
+ * @returns The created filter field config
+ */
+export const createFilterFieldConfig = <T extends TFilterFieldType, V extends TFilterValue>(
+  config: T extends typeof FILTER_FIELD_TYPE.SINGLE_SELECT
+    ? TSingleSelectFilterFieldConfig<V>
+    : T extends typeof FILTER_FIELD_TYPE.MULTI_SELECT
+      ? TMultiSelectFilterFieldConfig<V>
+      : T extends typeof FILTER_FIELD_TYPE.DATE
+        ? TDateFilterFieldConfig<V>
+        : T extends typeof FILTER_FIELD_TYPE.DATE_RANGE
+          ? TDateRangeFilterFieldConfig<V>
+          : never
+): TSupportedFilterFieldConfigs<V> => config as TSupportedFilterFieldConfigs<V>;
diff --git a/packages/utils/src/rich-filters/factories/index.ts b/packages/utils/src/rich-filters/factories/index.ts
new file mode 100644
index 0000000..99f213f
--- /dev/null
+++ b/packages/utils/src/rich-filters/factories/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./configs/core";
+export * from "./configs/shared";
+export * from "./configs/properties";
+export * from "./nodes/core";
diff --git a/packages/utils/src/rich-filters/factories/nodes/core.ts b/packages/utils/src/rich-filters/factories/nodes/core.ts
new file mode 100644
index 0000000..5b7d8cf
--- /dev/null
+++ b/packages/utils/src/rich-filters/factories/nodes/core.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { v4 as uuidv4 } from "uuid";
+// plane imports
+import type {
+  TFilterAndGroupNode,
+  TFilterConditionNode,
+  TFilterConditionPayload,
+  TFilterExpression,
+  TFilterProperty,
+  TFilterValue,
+} from "@plane/types";
+import { FILTER_NODE_TYPE, LOGICAL_OPERATOR } from "@plane/types";
+
+/**
+ * Creates a condition node with a unique ID.
+ * @param condition - The condition to create
+ * @returns The created condition node
+ */
+export const createConditionNode = <P extends TFilterProperty, V extends TFilterValue>(
+  condition: TFilterConditionPayload<P, V>
+): TFilterConditionNode<P, V> => ({
+  id: uuidv4(),
+  type: FILTER_NODE_TYPE.CONDITION,
+  ...condition,
+});
+
+/**
+ * Creates an AND group node with a unique ID.
+ * @param nodes - The nodes to add to the group
+ * @returns The created AND group node
+ */
+export const createAndGroupNode = <P extends TFilterProperty>(
+  nodes: TFilterExpression<P>[]
+): TFilterAndGroupNode<P> => ({
+  id: uuidv4(),
+  type: FILTER_NODE_TYPE.GROUP,
+  logicalOperator: LOGICAL_OPERATOR.AND,
+  children: nodes,
+});
diff --git a/packages/utils/src/rich-filters/index.ts b/packages/utils/src/rich-filters/index.ts
new file mode 100644
index 0000000..8e7727a
--- /dev/null
+++ b/packages/utils/src/rich-filters/index.ts
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./factories";
+export * from "./operations";
+export * from "./operators";
+export * from "./types";
+export * from "./validators";
+export * from "./values";
diff --git a/packages/utils/src/rich-filters/operations/comparison.ts b/packages/utils/src/rich-filters/operations/comparison.ts
new file mode 100644
index 0000000..e25d7e4
--- /dev/null
+++ b/packages/utils/src/rich-filters/operations/comparison.ts
@@ -0,0 +1,174 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { compact, isEqual, sortBy } from "lodash-es";
+// plane imports
+import type {
+  TFilterConditionNode,
+  TFilterExpression,
+  TFilterGroupNode,
+  TFilterProperty,
+  TFilterValue,
+} from "@plane/types";
+import { FILTER_NODE_TYPE } from "@plane/types";
+// local imports
+import { isConditionNode, isGroupNode } from "../types/core";
+import { processGroupNode } from "../types/shared";
+import { hasValidValue } from "../validators/core";
+import { transformExpressionTree } from "./transformation/core";
+
+/**
+ * Creates a comparable representation of a condition for deep comparison.
+ * This uses property, operator, and value instead of ID for comparison.
+ * IDs are completely excluded to avoid UUID comparison issues.
+ * @param condition - The condition to create a comparable representation for
+ * @returns A comparable object without ID
+ */
+const createConditionComparable = <P extends TFilterProperty>(condition: TFilterConditionNode<P, TFilterValue>) => ({
+  // Explicitly exclude: id (random UUID should not be compared)
+  type: condition.type,
+  property: condition.property,
+  operator: condition.operator,
+  value: Array.isArray(condition.value) ? condition.value : [condition.value],
+});
+
+/**
+ * Helper function to create comparable children for AND/OR groups.
+ * This eliminates code duplication between AND and OR group processing.
+ */
+const createComparableChildren = <P extends TFilterProperty>(
+  children: TFilterExpression<P>[],
+  baseComparable: Record<string, unknown>
+): Record<string, unknown> => {
+  const childrenComparable = compact(children.map((child) => createExpressionComparable(child)));
+
+  // Sort children by a consistent key for comparison to ensure order doesn't affect equality
+  const sortedChildren = sortBy(childrenComparable, (child) => {
+    if (child?.type === FILTER_NODE_TYPE.CONDITION) {
+      return `condition_${child.property}_${child.operator}_${JSON.stringify(child.value)}`;
+    }
+    // For nested groups, sort by logical operator and recursive structure
+    if (child?.type === FILTER_NODE_TYPE.GROUP) {
+      const childrenCount = child.child ? 1 : Array.isArray(child.children) ? child.children.length : 0;
+      return `group_${child.logicalOperator}_${childrenCount}_${JSON.stringify(child)}`;
+    }
+    return "unknown";
+  });
+
+  return {
+    ...baseComparable,
+    children: sortedChildren,
+  };
+};
+
+/**
+ * Creates a comparable representation of a group for deep comparison.
+ * This recursively creates comparable representations for all children.
+ * IDs are completely excluded to avoid UUID comparison issues.
+ * Uses processGroupNode for consistent group type handling.
+ * @param group - The group to create a comparable representation for
+ * @returns A comparable object without ID
+ */
+export const createGroupComparable = <P extends TFilterProperty>(
+  group: TFilterGroupNode<P>
+): Record<string, unknown> => {
+  const baseComparable = {
+    // Explicitly exclude: id (random UUID should not be compared)
+    type: group.type,
+    logicalOperator: group.logicalOperator,
+  };
+
+  return processGroupNode(group, {
+    onAndGroup: (andGroup) => createComparableChildren(andGroup.children, baseComparable),
+  });
+};
+
+/**
+ * Creates a comparable representation of any filter expression.
+ * Recursively handles deep nesting of groups within groups.
+ * Completely excludes IDs from comparison to avoid UUID issues.
+ * @param expression - The expression to create a comparable representation for
+ * @returns A comparable object without IDs or null if the expression is empty
+ */
+export const createExpressionComparable = <P extends TFilterProperty>(
+  expression: TFilterExpression<P> | null
+): Record<string, unknown> | null => {
+  if (!expression) return null;
+
+  // Handle condition nodes - exclude ID completely
+  if (isConditionNode(expression)) {
+    return createConditionComparable(expression);
+  }
+
+  // Handle group nodes - exclude ID completely and support deep nesting
+  if (isGroupNode(expression)) {
+    return createGroupComparable(expression);
+  }
+
+  // Should never reach here with proper typing, but return null for safety
+  return null;
+};
+
+/**
+ * Normalizes a filter expression by removing empty conditions and groups.
+ * This helps compare expressions by focusing only on meaningful content.
+ * Uses the transformExpressionTree utility for consistent tree processing.
+ * @param expression - The filter expression to normalize
+ * @returns The normalized expression or null if the entire expression is empty
+ */
+export const normalizeFilterExpression = <P extends TFilterProperty>(
+  expression: TFilterExpression<P> | null
+): TFilterExpression<P> | null => {
+  const result = transformExpressionTree<P>(expression, (node: TFilterExpression<P>) => {
+    // Only transform condition nodes - check if they have valid values
+    if (isConditionNode(node)) {
+      return {
+        expression: hasValidValue(node.value) ? node : null,
+        shouldNotify: false,
+      };
+    }
+    // For group nodes, let the generic transformer handle the recursion
+    return { expression: node, shouldNotify: false };
+  });
+
+  return result.expression;
+};
+
+/**
+ * Performs a deep comparison of two filter expressions based on their meaningful content.
+ * This comparison completely ignores IDs (UUIDs) and focuses on property, operator, value, and tree structure.
+ * Empty conditions and groups are normalized before comparison.
+ * Supports deep nesting of groups within groups recursively.
+ * @param expression1 - The first expression to compare
+ * @param expression2 - The second expression to compare
+ * @returns True if the expressions are meaningfully equal, false otherwise
+ */
+export const deepCompareFilterExpressions = <P extends TFilterProperty>(
+  expression1: TFilterExpression<P> | null,
+  expression2: TFilterExpression<P> | null
+): boolean => {
+  // Normalize both expressions to remove empty conditions and groups
+  const normalized1 = normalizeFilterExpression(expression1);
+  const normalized2 = normalizeFilterExpression(expression2);
+
+  // If both are null after normalization, they're equal
+  if (!normalized1 && !normalized2) {
+    return true;
+  }
+
+  // If one is null and the other isn't, they're different
+  if (!normalized1 || !normalized2) {
+    return false;
+  }
+
+  // Create comparable representations (IDs completely excluded)
+  const comparable1 = createExpressionComparable(normalized1);
+  const comparable2 = createExpressionComparable(normalized2);
+
+  // Deep compare using lodash isEqual for reliable object comparison
+  // This handles deep nesting recursively and ignores UUID differences
+  return isEqual(comparable1, comparable2);
+};
diff --git a/packages/utils/src/rich-filters/operations/index.ts b/packages/utils/src/rich-filters/operations/index.ts
new file mode 100644
index 0000000..038cc52
--- /dev/null
+++ b/packages/utils/src/rich-filters/operations/index.ts
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./comparison";
+export * from "./manipulation/core";
+export * from "./transformation/core";
+export * from "./traversal/core";
diff --git a/packages/utils/src/rich-filters/operations/manipulation/core.ts b/packages/utils/src/rich-filters/operations/manipulation/core.ts
new file mode 100644
index 0000000..acbf75f
--- /dev/null
+++ b/packages/utils/src/rich-filters/operations/manipulation/core.ts
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type {
+  TFilterConditionPayload,
+  TFilterExpression,
+  TFilterGroupNode,
+  TFilterProperty,
+  TFilterValue,
+} from "@plane/types";
+// local imports
+import { createAndGroupNode } from "../../factories/nodes/core";
+import { getGroupChildren } from "../../types";
+import { isAndGroupNode, isConditionNode, isGroupNode } from "../../types/core";
+import { shouldUnwrapGroup } from "../../validators/shared";
+import { transformExpressionTree } from "../transformation/core";
+
+/**
+ * Adds an AND condition to the filter expression.
+ * @param expression - The current filter expression
+ * @param condition - The condition to add
+ * @returns The updated filter expression
+ */
+export const addAndCondition = <P extends TFilterProperty>(
+  expression: TFilterExpression<P> | null,
+  condition: TFilterExpression<P>
+): TFilterExpression<P> => {
+  // if no expression, set the new condition
+  if (!expression) {
+    return condition;
+  }
+  // if the expression is a condition, convert it to an AND group
+  if (isConditionNode(expression)) {
+    return createAndGroupNode([expression, condition]);
+  }
+  // if the expression is a group, and the group is an AND group, add the new condition to the group
+  if (isGroupNode(expression) && isAndGroupNode(expression)) {
+    expression.children.push(condition);
+    return expression;
+  }
+  // if the expression is a group, but not an AND group, create a new AND group and add the new condition to it
+  if (isGroupNode(expression) && !isAndGroupNode(expression)) {
+    return createAndGroupNode([expression, condition]);
+  }
+  // Throw error for unexpected expression type
+  console.error("Invalid expression type", expression);
+  return expression;
+};
+
+/**
+ * Replaces a node in the expression tree with another node.
+ * Uses transformExpressionTree for consistent tree processing and better maintainability.
+ * @param expression - The expression tree to search in
+ * @param targetId - The ID of the node to replace
+ * @param replacement - The node to replace with
+ * @returns The updated expression tree
+ */
+export const replaceNodeInExpression = <P extends TFilterProperty>(
+  expression: TFilterExpression<P>,
+  targetId: string,
+  replacement: TFilterExpression<P>
+): TFilterExpression<P> => {
+  const result = transformExpressionTree(expression, (node: TFilterExpression<P>) => {
+    // If this is the node we want to replace, return the replacement
+    if (node.id === targetId) {
+      return {
+        expression: replacement,
+        shouldNotify: false,
+      };
+    }
+    // For all other nodes, let the generic transformer handle the recursion
+    return { expression: node, shouldNotify: false };
+  });
+
+  // Since we're doing a replacement, the result should never be null
+  return result.expression || expression;
+};
+
+/**
+ * Updates a node in the filter expression.
+ * Uses recursive tree traversal with proper type handling.
+ * @param expression - The filter expression to update
+ * @param targetId - The id of the node to update
+ * @param updates - The updates to apply to the node
+ */
+export const updateNodeInExpression = <P extends TFilterProperty>(
+  expression: TFilterExpression<P>,
+  targetId: string,
+  updates: Partial<TFilterConditionPayload<P, TFilterValue>>
+) => {
+  // Helper function to recursively update nodes
+  const updateNode = (node: TFilterExpression<P>): void => {
+    if (node.id === targetId) {
+      if (!isConditionNode<P, TFilterValue>(node)) {
+        console.warn("updateNodeInExpression: targetId matched a group; ignoring updates");
+        return;
+      }
+      Object.assign(node, updates);
+      return;
+    }
+
+    if (isGroupNode(node)) {
+      const children = getGroupChildren(node);
+      children.forEach((child) => updateNode(child));
+    }
+  };
+
+  updateNode(expression);
+};
+
+/**
+ * Unwraps a group if it meets the unwrapping criteria, otherwise returns the group.
+ * @param group - The group node to potentially unwrap
+ * @param preserveNotGroups - Whether to preserve NOT groups even with single children
+ * @returns The unwrapped child or the original group
+ */
+export const unwrapGroupIfNeeded = <P extends TFilterProperty>(
+  group: TFilterGroupNode<P>,
+  preserveNotGroups = true
+) => {
+  if (shouldUnwrapGroup(group, preserveNotGroups)) {
+    const children = getGroupChildren(group);
+    return children[0];
+  }
+  return group;
+};
diff --git a/packages/utils/src/rich-filters/operations/transformation/core.ts b/packages/utils/src/rich-filters/operations/transformation/core.ts
new file mode 100644
index 0000000..ca8aba1
--- /dev/null
+++ b/packages/utils/src/rich-filters/operations/transformation/core.ts
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TFilterExpression, TFilterGroupNode, TFilterProperty } from "@plane/types";
+// local imports
+import { isConditionNode, isGroupNode } from "../../types/core";
+import { getGroupChildren } from "../../types/shared";
+import { hasValidValue } from "../../validators/core";
+import { unwrapGroupIfNeeded } from "../manipulation/core";
+import { transformGroup } from "./shared";
+
+/**
+ * Generic tree transformation result type
+ */
+export type TTreeTransformResult<P extends TFilterProperty> = {
+  expression: TFilterExpression<P> | null;
+  shouldNotify?: boolean;
+};
+
+/**
+ * Transform function type for tree processing
+ */
+export type TTreeTransformFn<P extends TFilterProperty> = (expression: TFilterExpression<P>) => TTreeTransformResult<P>;
+
+/**
+ * Generic recursive tree transformer that handles common tree manipulation logic.
+ * This function provides a reusable way to transform expression trees while maintaining
+ * tree integrity, handling group restructuring, and applying stabilization.
+ *
+ * @param expression - The expression to transform
+ * @param transformFn - Function that defines the transformation logic for each node
+ * @returns The transformation result with expression and metadata
+ */
+/**
+ * Helper function to create a consistent transformation result for group nodes.
+ * Centralizes the logic for wrapping group expressions and tracking notifications.
+ */
+const createGroupTransformResult = <P extends TFilterProperty>(
+  groupExpression: TFilterGroupNode<P> | null,
+  shouldNotify: boolean
+): TTreeTransformResult<P> => ({
+  expression: groupExpression ? unwrapGroupIfNeeded(groupExpression, true) : null,
+  shouldNotify,
+});
+
+/**
+ * Transforms groups with children by processing all children.
+ * Handles child collection, null filtering, and empty group removal.
+ */
+export const transformGroupWithChildren = <P extends TFilterProperty>(
+  group: TFilterGroupNode<P>,
+  transformFn: TTreeTransformFn<P>
+): TTreeTransformResult<P> => {
+  const children = getGroupChildren(group);
+  const transformedChildren: TFilterExpression<P>[] = [];
+  let shouldNotify = false;
+
+  // Transform all children and collect non-null results
+  for (const child of children) {
+    const childResult = transformExpressionTree(child, transformFn);
+
+    if (childResult.shouldNotify) {
+      shouldNotify = true;
+    }
+
+    if (childResult.expression !== null) {
+      transformedChildren.push(childResult.expression);
+    }
+  }
+
+  // If no children remain, remove the entire group
+  if (transformedChildren.length === 0) {
+    return { expression: null, shouldNotify };
+  }
+
+  // Create updated group with transformed children - type-safe without casting
+  const updatedGroup: TFilterGroupNode<P> = {
+    ...group,
+    children: transformedChildren,
+  } as TFilterGroupNode<P>;
+
+  return createGroupTransformResult(updatedGroup, shouldNotify);
+};
+
+/**
+ * Generic recursive tree transformer that handles common tree manipulation logic.
+ * This function provides a reusable way to transform expression trees while maintaining
+ * tree integrity, handling group restructuring, and applying stabilization.
+ *
+ * @param expression - The expression to transform
+ * @param transformFn - Function that defines the transformation logic for each node
+ * @returns The transformation result with expression and metadata
+ */
+export const transformExpressionTree = <P extends TFilterProperty>(
+  expression: TFilterExpression<P> | null,
+  transformFn: TTreeTransformFn<P>
+): TTreeTransformResult<P> => {
+  // Handle null expressions early
+  if (!expression) {
+    return { expression: null, shouldNotify: false };
+  }
+
+  // Apply the transformation function to the current node
+  const transformResult = transformFn(expression);
+
+  // If the transform function handled this node completely, return its result
+  if (transformResult.expression === null || transformResult.expression !== expression) {
+    return transformResult;
+  }
+
+  // Handle condition nodes (no children to transform)
+  if (isConditionNode(expression)) {
+    return { expression, shouldNotify: false };
+  }
+
+  // Handle group nodes by delegating to the extended transformGroup function
+  if (isGroupNode(expression)) {
+    return transformGroup(expression, transformFn);
+  }
+
+  throw new Error("Unknown expression type in transformExpressionTree");
+};
+
+/**
+ * Removes a node from the filter expression.
+ * @param expression - The filter expression to remove the node from
+ * @param targetId - The id of the node to remove
+ * @returns An object containing the updated filter expression and whether to notify about the change
+ */
+export const removeNodeFromExpression = <P extends TFilterProperty>(
+  expression: TFilterExpression<P>,
+  targetId: string
+): { expression: TFilterExpression<P> | null; shouldNotify: boolean } => {
+  const result = transformExpressionTree(expression, (node) => {
+    // If this node matches the target ID, remove it
+    if (node.id === targetId) {
+      const shouldNotify = isConditionNode(node) ? hasValidValue(node.value) : true;
+      return {
+        expression: null,
+        shouldNotify,
+      };
+    }
+    // For all other nodes, let the generic transformer handle the recursion
+    return { expression: node, shouldNotify: false };
+  });
+
+  return {
+    expression: result.expression,
+    shouldNotify: result.shouldNotify || false,
+  };
+};
+
+/**
+ * Sanitizes and stabilizes a filter expression by removing invalid conditions and unnecessary groups.
+ * This function performs deep sanitization of the entire expression tree:
+ * 1. Removes condition nodes that don't have valid values
+ * 2. Removes empty groups (groups with no children after sanitization)
+ * 3. Unwraps single-child groups that don't need to be wrapped
+ * 4. Preserves tree integrity and logical operators
+ *
+ * @param expression - The filter expression to sanitize
+ * @returns The sanitized expression or null if no valid conditions remain
+ */
+export const sanitizeAndStabilizeExpression = <P extends TFilterProperty>(
+  expression: TFilterExpression<P> | null
+): TFilterExpression<P> | null => {
+  const result = transformExpressionTree(expression, (node) => {
+    // Only transform condition nodes - check if they have valid values
+    if (isConditionNode(node)) {
+      return {
+        expression: hasValidValue(node.value) ? node : null,
+        shouldNotify: false,
+      };
+    }
+    // For group nodes, let the generic transformer handle the recursion
+    return { expression: node, shouldNotify: false };
+  });
+
+  return result.expression;
+};
diff --git a/packages/utils/src/rich-filters/operations/transformation/shared.ts b/packages/utils/src/rich-filters/operations/transformation/shared.ts
new file mode 100644
index 0000000..97d28c2
--- /dev/null
+++ b/packages/utils/src/rich-filters/operations/transformation/shared.ts
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TFilterGroupNode, TFilterProperty } from "@plane/types";
+import { processGroupNode } from "../../types/shared";
+import type { TTreeTransformFn, TTreeTransformResult } from "./core";
+import { transformGroupWithChildren } from "./core";
+
+/**
+ * Transforms groups by processing children.
+ * Handles AND/OR groups with children and NOT groups with single child.
+ * @param group - The group to transform
+ * @param transformFn - The transformation function
+ * @returns The transformation result
+ */
+export const transformGroup = <P extends TFilterProperty>(
+  group: TFilterGroupNode<P>,
+  transformFn: TTreeTransformFn<P>
+): TTreeTransformResult<P> =>
+  processGroupNode(group, {
+    onAndGroup: (andGroup) => transformGroupWithChildren(andGroup, transformFn),
+  });
diff --git a/packages/utils/src/rich-filters/operations/traversal/core.ts b/packages/utils/src/rich-filters/operations/traversal/core.ts
new file mode 100644
index 0000000..edcfc20
--- /dev/null
+++ b/packages/utils/src/rich-filters/operations/traversal/core.ts
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type {
+  TAllAvailableOperatorsForDisplay,
+  TFilterConditionNode,
+  TFilterConditionNodeForDisplay,
+  TFilterExpression,
+  TFilterGroupNode,
+  TFilterProperty,
+  TFilterValue,
+} from "@plane/types";
+// local imports
+import { isConditionNode, isGroupNode } from "../../types/core";
+import { getGroupChildren } from "../../types/shared";
+import { getDisplayOperator } from "./shared";
+
+/**
+ * Generic tree visitor function type
+ */
+export type TreeVisitorFn<P extends TFilterProperty, T> = (
+  expression: TFilterExpression<P>,
+  parent?: TFilterGroupNode<P>,
+  depth?: number
+) => T | null;
+
+/**
+ * Tree traversal modes
+ */
+export enum TreeTraversalMode {
+  /** Visit all nodes depth-first */
+  ALL = "ALL",
+  /** Visit only condition nodes */
+  CONDITIONS = "CONDITIONS",
+  /** Visit only group nodes */
+  GROUPS = "GROUPS",
+}
+
+/**
+ * Generic tree traversal utility that visits nodes based on the specified mode.
+ * This eliminates code duplication in tree walking functions.
+ *
+ * @param expression - The expression to traverse
+ * @param visitor - Function to call for each visited node
+ * @param mode - Traversal mode to determine which nodes to visit
+ * @param parent - Parent node (used internally for recursion)
+ * @param depth - Current depth (used internally for recursion)
+ * @returns Array of results from the visitor function (nulls are filtered out)
+ */
+export const traverseExpressionTree = <P extends TFilterProperty, T>(
+  expression: TFilterExpression<P> | null,
+  visitor: TreeVisitorFn<P, T>,
+  mode: TreeTraversalMode = TreeTraversalMode.ALL,
+  parent?: TFilterGroupNode<P>,
+  depth: number = 0
+): T[] => {
+  if (!expression) return [];
+
+  const results: T[] = [];
+
+  // Determine if we should visit this node based on the mode
+  const shouldVisit =
+    mode === TreeTraversalMode.ALL ||
+    (mode === TreeTraversalMode.CONDITIONS && isConditionNode(expression)) ||
+    (mode === TreeTraversalMode.GROUPS && isGroupNode(expression));
+
+  if (shouldVisit) {
+    const result = visitor(expression, parent, depth);
+    if (result !== null) {
+      results.push(result);
+    }
+  }
+
+  // Recursively traverse children for group nodes
+  if (isGroupNode(expression)) {
+    const children = getGroupChildren(expression);
+    for (const child of children) {
+      const childResults = traverseExpressionTree(child, visitor, mode, expression, depth + 1);
+      results.push(...childResults);
+    }
+  }
+
+  return results;
+};
+
+/**
+ * Finds a node by its ID in the filter expression tree.
+ * Uses the generic tree traversal utility for better maintainability.
+ * @param expression - The filter expression to search in
+ * @param targetId - The ID of the node to find
+ * @returns The found node or null if not found
+ */
+export const findNodeById = <P extends TFilterProperty>(
+  expression: TFilterExpression<P>,
+  targetId: string
+): TFilterExpression<P> | null => {
+  const results = traverseExpressionTree(
+    expression,
+    (node) => (node.id === targetId ? node : null),
+    TreeTraversalMode.ALL
+  );
+
+  // Return the first match (there should only be one with unique IDs)
+  return results.length > 0 ? results[0] : null;
+};
+
+/**
+ * Finds the parent chain of a given node ID in the filter expression tree.
+ * @param expression - The filter expression to search in
+ * @param targetId - The ID of the node whose parent chain to find
+ * @param currentPath - Current path of parent nodes (used internally for recursion)
+ * @returns Array of parent nodes from immediate parent to root, or null if not found
+ */
+export const findParentChain = <P extends TFilterProperty>(
+  expression: TFilterExpression<P>,
+  targetId: string,
+  currentPath: TFilterGroupNode<P>[] = []
+): TFilterGroupNode<P>[] | null => {
+  // if the expression is a group, search in the children
+  if (isGroupNode(expression)) {
+    const children = getGroupChildren(expression);
+
+    // check if any direct child has the target ID
+    for (const child of children) {
+      if (child.id === targetId) {
+        return [expression, ...currentPath];
+      }
+    }
+
+    // recursively search in child groups
+    for (const child of children) {
+      if (isGroupNode(child)) {
+        const chain = findParentChain(child, targetId, [expression, ...currentPath]);
+        if (chain) return chain;
+      }
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Finds the immediate parent node of a given node ID.
+ * @param expression - The filter expression to find parent in
+ * @param targetId - The ID of the node whose parent to find
+ * @returns The immediate parent node or null if not found or if the target is the root
+ */
+export const findImmediateParent = <P extends TFilterProperty>(
+  expression: TFilterExpression<P>,
+  targetId: string
+): TFilterGroupNode<P> | null => {
+  // if the expression is null, return null
+  if (!expression) return null;
+
+  // find the parent chain
+  const parentChain = findParentChain(expression, targetId);
+
+  // return the immediate parent if it exists
+  return parentChain && parentChain.length > 0 ? parentChain[0] : null;
+};
+
+/**
+ * Extracts all conditions from a filter expression.
+ * Uses the generic tree traversal utility for better maintainability and consistency.
+ * @param expression - The filter expression to extract conditions from
+ * @returns An array of filter conditions
+ */
+export const extractConditions = <P extends TFilterProperty>(
+  expression: TFilterExpression<P>
+): TFilterConditionNode<P, TFilterValue>[] =>
+  traverseExpressionTree(expression, (node) => (isConditionNode(node) ? node : null), TreeTraversalMode.CONDITIONS);
+
+/**
+ * Extracts all conditions from a filter expression, including their display operators.
+ * @param expression - The filter expression to extract conditions from
+ * @returns An array of filter conditions with their display operators
+ */
+export const extractConditionsWithDisplayOperators = <P extends TFilterProperty>(
+  expression: TFilterExpression<P>
+): TFilterConditionNodeForDisplay<P, TFilterValue>[] => {
+  // First extract all raw conditions
+  const rawConditions = extractConditions(expression);
+
+  // Transform operators using the extended helper
+  return rawConditions.map((condition) => {
+    const displayOperator = getDisplayOperator(condition.operator, expression, condition.id);
+    return {
+      ...condition,
+      operator: displayOperator,
+    };
+  });
+};
+
+/**
+ * Finds all conditions by property and operator.
+ * @param expression - The filter expression to search in
+ * @param property - The property to find the conditions by
+ * @param operator - The operator to find the conditions by
+ * @returns An array of conditions that match the property and operator
+ */
+export const findConditionsByPropertyAndOperator = <P extends TFilterProperty>(
+  expression: TFilterExpression<P>,
+  property: P,
+  operator: TAllAvailableOperatorsForDisplay
+): TFilterConditionNodeForDisplay<P, TFilterValue>[] => {
+  const conditions = extractConditionsWithDisplayOperators(expression);
+  return conditions.filter((condition) => condition.property === property && condition.operator === operator);
+};
diff --git a/packages/utils/src/rich-filters/operations/traversal/shared.ts b/packages/utils/src/rich-filters/operations/traversal/shared.ts
new file mode 100644
index 0000000..081cc9b
--- /dev/null
+++ b/packages/utils/src/rich-filters/operations/traversal/shared.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type {
+  TAllAvailableOperatorsForDisplay,
+  TFilterExpression,
+  TFilterProperty,
+  TSupportedOperators,
+} from "@plane/types";
+
+/**
+ * Helper function to get the display operator for a condition.
+ * This checks for NOT group context and applies negation if needed.
+ * @param operator - The original operator
+ * @param expression - The filter expression
+ * @param conditionId - The ID of the condition
+ * @returns The display operator (possibly negated)
+ */
+export const getDisplayOperator = <P extends TFilterProperty>(
+  operator: TSupportedOperators,
+  _expression: TFilterExpression<P>,
+  _conditionId: string
+): TAllAvailableOperatorsForDisplay =>
+  // Otherwise, return the operator as-is
+  operator;
diff --git a/packages/utils/src/rich-filters/operators/core.ts b/packages/utils/src/rich-filters/operators/core.ts
new file mode 100644
index 0000000..391cf00
--- /dev/null
+++ b/packages/utils/src/rich-filters/operators/core.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { get } from "lodash-es";
+// plane imports
+import { DATE_OPERATOR_LABELS_MAP, EMPTY_OPERATOR_LABEL, OPERATOR_LABELS_MAP } from "@plane/constants";
+import type {
+  TAllAvailableOperatorsForDisplay,
+  TFilterValue,
+  TAllAvailableDateFilterOperatorsForDisplay,
+} from "@plane/types";
+
+// -------- OPERATOR LABEL UTILITIES --------
+
+/**
+ * Get the label for a filter operator
+ * @param operator - The operator to get the label for
+ * @returns The label for the operator
+ */
+export const getOperatorLabel = (operator: TAllAvailableOperatorsForDisplay | undefined): string => {
+  if (!operator) return EMPTY_OPERATOR_LABEL;
+  return get(OPERATOR_LABELS_MAP, operator, EMPTY_OPERATOR_LABEL);
+};
+
+/**
+ * Get the label for a date filter operator
+ * @param operator - The operator to get the label for
+ * @returns The label for the operator
+ */
+export const getDateOperatorLabel = (operator: TAllAvailableDateFilterOperatorsForDisplay | undefined): string => {
+  if (!operator) return EMPTY_OPERATOR_LABEL;
+  return get(DATE_OPERATOR_LABELS_MAP, operator, EMPTY_OPERATOR_LABEL);
+};
+
+// -------- OPERATOR TYPE GUARDS --------
+
+/**
+ * Type guard to check if an operator supports date filter types.
+ * @param operator - The operator to check
+ * @returns True if the operator supports date filters
+ */
+export const isDateFilterOperator = <V extends TFilterValue = TFilterValue>(
+  operator: TAllAvailableOperatorsForDisplay
+): operator is TAllAvailableDateFilterOperatorsForDisplay<V> =>
+  Object.keys(DATE_OPERATOR_LABELS_MAP).includes(operator);
diff --git a/packages/utils/src/rich-filters/operators/index.ts b/packages/utils/src/rich-filters/operators/index.ts
new file mode 100644
index 0000000..5b1e19f
--- /dev/null
+++ b/packages/utils/src/rich-filters/operators/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./core";
+export * from "./shared";
diff --git a/packages/utils/src/rich-filters/operators/shared.ts b/packages/utils/src/rich-filters/operators/shared.ts
new file mode 100644
index 0000000..2839ebf
--- /dev/null
+++ b/packages/utils/src/rich-filters/operators/shared.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TAllAvailableOperatorsForDisplay, TSupportedOperators } from "@plane/types";
+
+/**
+ * Result type for operator conversion
+ */
+export type TOperatorForPayload = {
+  operator: TSupportedOperators;
+  isNegation: boolean;
+};
+
+/**
+ * Converts a display operator to the format needed for supported by filter expression condition.
+ * @param displayOperator - The operator from the UI
+ * @returns Object with supported operator and negation flag
+ */
+export const getOperatorForPayload = (displayOperator: TAllAvailableOperatorsForDisplay): TOperatorForPayload => {
+  const isNegation = false;
+  const operator = displayOperator;
+
+  return {
+    operator,
+    isNegation,
+  };
+};
diff --git a/packages/utils/src/rich-filters/types/core.ts b/packages/utils/src/rich-filters/types/core.ts
new file mode 100644
index 0000000..99826b8
--- /dev/null
+++ b/packages/utils/src/rich-filters/types/core.ts
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type {
+  TFilterAndGroupNode,
+  TFilterConditionNode,
+  TFilterExpression,
+  TFilterFieldType,
+  TFilterGroupNode,
+  TFilterProperty,
+  TFilterValue,
+} from "@plane/types";
+import { FILTER_FIELD_TYPE, FILTER_NODE_TYPE, LOGICAL_OPERATOR } from "@plane/types";
+
+/**
+ * Type guard to check if a node is a condition node.
+ * @param node - The node to check
+ * @returns True if the node is a condition node
+ */
+export const isConditionNode = <P extends TFilterProperty, V extends TFilterValue>(
+  node: TFilterExpression<P>
+): node is TFilterConditionNode<P, V> => node.type === FILTER_NODE_TYPE.CONDITION;
+
+/**
+ * Type guard to check if a node is a group node.
+ * @param node - The node to check
+ * @returns True if the node is a group node
+ */
+export const isGroupNode = <P extends TFilterProperty>(node: TFilterExpression<P>): node is TFilterGroupNode<P> =>
+  node.type === FILTER_NODE_TYPE.GROUP;
+
+/**
+ * Type guard to check if a group node is an AND group.
+ * @param group - The group node to check
+ * @returns True if the group is an AND group
+ */
+export const isAndGroupNode = <P extends TFilterProperty>(
+  group: TFilterGroupNode<P>
+): group is TFilterAndGroupNode<P> => group.logicalOperator === LOGICAL_OPERATOR.AND;
+
+/**
+ * Type guard to check if a group node has children property
+ * @param group - The group node to check
+ * @returns True if the group has children property
+ */
+export const hasChildrenProperty = <P extends TFilterProperty>(
+  group: TFilterGroupNode<P>
+): group is TFilterAndGroupNode<P> => {
+  const groupWithChildren = group as { children?: unknown };
+  return "children" in group && Array.isArray(groupWithChildren.children);
+};
+
+/**
+ * Safely gets the children array from an AND group node.
+ * @param group - The AND group node
+ * @returns The children array
+ */
+export const getAndGroupChildren = <P extends TFilterProperty>(group: TFilterAndGroupNode<P>): TFilterExpression<P>[] =>
+  group.children;
+
+/**
+ * Type guard to check if a filter type is a date filter type.
+ * @param type - The filter type to check
+ * @returns True if the filter type is a date filter type
+ */
+export const isDateFilterType = (
+  type: TFilterFieldType
+): type is typeof FILTER_FIELD_TYPE.DATE | typeof FILTER_FIELD_TYPE.DATE_RANGE =>
+  type === FILTER_FIELD_TYPE.DATE || type === FILTER_FIELD_TYPE.DATE_RANGE;
diff --git a/packages/utils/src/rich-filters/types/index.ts b/packages/utils/src/rich-filters/types/index.ts
new file mode 100644
index 0000000..5b1e19f
--- /dev/null
+++ b/packages/utils/src/rich-filters/types/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./core";
+export * from "./shared";
diff --git a/packages/utils/src/rich-filters/types/shared.ts b/packages/utils/src/rich-filters/types/shared.ts
new file mode 100644
index 0000000..6d25c28
--- /dev/null
+++ b/packages/utils/src/rich-filters/types/shared.ts
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TFilterAndGroupNode, TFilterExpression, TFilterGroupNode, TFilterProperty } from "@plane/types";
+// local imports
+import { getAndGroupChildren, isAndGroupNode } from "./core";
+
+type TProcessGroupNodeHandlers<P extends TFilterProperty, T> = {
+  onAndGroup: (group: TFilterAndGroupNode<P>) => T;
+};
+
+/**
+ * Generic helper to process group nodes with type-safe handlers.
+ * @param group - The group node to process
+ * @param handlers - Object with handlers for each group type
+ * @returns Result of the appropriate handler
+ */
+export const processGroupNode = <P extends TFilterProperty, T>(
+  group: TFilterGroupNode<P>,
+  handlers: TProcessGroupNodeHandlers<P, T>
+): T => {
+  if (isAndGroupNode(group)) {
+    return handlers.onAndGroup(group);
+  }
+  throw new Error(`Invalid group node: unknown logical operator ${group}`);
+};
+
+/**
+ * Gets the children of a group node, handling AND/OR groups (children array) and NOT groups (single child).
+ * Uses processGroupNode for consistent group type handling.
+ * @param group - The group node to get children from
+ * @returns Array of child expressions
+ */
+export const getGroupChildren = <P extends TFilterProperty>(group: TFilterGroupNode<P>): TFilterExpression<P>[] =>
+  processGroupNode(group, {
+    onAndGroup: (andGroup) => getAndGroupChildren(andGroup),
+  });
diff --git a/packages/utils/src/rich-filters/validators/core.ts b/packages/utils/src/rich-filters/validators/core.ts
new file mode 100644
index 0000000..72f39d5
--- /dev/null
+++ b/packages/utils/src/rich-filters/validators/core.ts
@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { SingleOrArray, TFilterExpression, TFilterProperty, TFilterValue } from "@plane/types";
+// local imports
+import { getGroupChildren } from "../types";
+import { isConditionNode, isGroupNode } from "../types/core";
+
+/**
+ * Determines whether to notify about a change based on the filter value.
+ * @param value - The filter value to check
+ * @returns True if we should notify, false otherwise
+ */
+export const hasValidValue = (value: SingleOrArray<TFilterValue>): boolean => {
+  if (value === null || value === undefined) {
+    return false;
+  }
+
+  // If it's an array, check if it's empty or contains only null/undefined values
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return false;
+    }
+    return value.some((v) => v !== null && v !== undefined);
+  }
+
+  return true;
+};
+
+/**
+ * Determines whether to notify about a change based on the entire filter expression.
+ * @param expression - The filter expression to check
+ * @returns True if we should notify, false otherwise
+ */
+export const shouldNotifyChangeForExpression = <P extends TFilterProperty>(
+  expression: TFilterExpression<P> | null
+): boolean => {
+  if (!expression) {
+    return false;
+  }
+
+  // If it's a condition, check its value
+  if (isConditionNode(expression)) {
+    return hasValidValue(expression.value);
+  }
+
+  // If it's a group, check if any of its children have meaningful values
+  if (isGroupNode(expression)) {
+    const children = getGroupChildren(expression);
+    return children.some((child) => shouldNotifyChangeForExpression(child));
+  }
+
+  return false;
+};
diff --git a/packages/utils/src/rich-filters/validators/index.ts b/packages/utils/src/rich-filters/validators/index.ts
new file mode 100644
index 0000000..5b1e19f
--- /dev/null
+++ b/packages/utils/src/rich-filters/validators/index.ts
@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./core";
+export * from "./shared";
diff --git a/packages/utils/src/rich-filters/validators/shared.ts b/packages/utils/src/rich-filters/validators/shared.ts
new file mode 100644
index 0000000..dd75b6c
--- /dev/null
+++ b/packages/utils/src/rich-filters/validators/shared.ts
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TFilterGroupNode, TFilterProperty } from "@plane/types";
+// local imports
+import { getGroupChildren } from "../types/shared";
+
+/**
+ * Determines if a group should be unwrapped based on the number of children and group type.
+ * @param group - The group node to check
+ * @param preserveNotGroups - Whether to preserve NOT groups even with single children
+ * @returns True if the group should be unwrapped, false otherwise
+ */
+export const shouldUnwrapGroup = <P extends TFilterProperty>(group: TFilterGroupNode<P>, _preserveNotGroups = true) => {
+  const children = getGroupChildren(group);
+
+  // Never unwrap groups with multiple children
+  if (children.length !== 1) {
+    return false;
+  }
+
+  // Unwrap AND/OR groups with single children, and NOT groups if preserveNotGroups is false
+  return true;
+};
diff --git a/packages/utils/src/rich-filters/values/core.ts b/packages/utils/src/rich-filters/values/core.ts
new file mode 100644
index 0000000..6670da4
--- /dev/null
+++ b/packages/utils/src/rich-filters/values/core.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { SingleOrArray, TFilterValue } from "@plane/types";
+
+/**
+ * Converts any value to a non-null array for UI components that expect arrays
+ * Returns empty array for null/undefined values
+ */
+export const toFilterArray = <V extends TFilterValue>(value: SingleOrArray<V>): NonNullable<V>[] => {
+  if (value === null || value === undefined) {
+    return [];
+  }
+
+  return Array.isArray(value) ? (value as NonNullable<V>[]) : ([value] as NonNullable<V>[]);
+};
+
+/**
+ * Gets the length of a filter value
+ */
+export const getFilterValueLength = <V extends TFilterValue>(value: SingleOrArray<V>): number => {
+  if (value === null || value === undefined) {
+    return 0;
+  }
+
+  return Array.isArray(value) ? value.length : 1;
+};
diff --git a/packages/utils/src/rich-filters/values/index.ts b/packages/utils/src/rich-filters/values/index.ts
new file mode 100644
index 0000000..bcdcb87
--- /dev/null
+++ b/packages/utils/src/rich-filters/values/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./core";
diff --git a/packages/utils/src/router.ts b/packages/utils/src/router.ts
new file mode 100644
index 0000000..9b4da60
--- /dev/null
+++ b/packages/utils/src/router.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export const generateQueryParams = (searchParams: URLSearchParams, excludedParamKeys?: string[]): string => {
+  const params = new URLSearchParams(searchParams);
+  excludedParamKeys &&
+    excludedParamKeys.forEach((key) => {
+      params.delete(key);
+    });
+  return params.toString();
+};
diff --git a/packages/utils/src/string.ts b/packages/utils/src/string.ts
new file mode 100644
index 0000000..4d2f112
--- /dev/null
+++ b/packages/utils/src/string.ts
@@ -0,0 +1,433 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import sanitizeHtml from "sanitize-html";
+import type { Content, JSONContent } from "@plane/types";
+
+/**
+ * @description Adds space between camelCase words
+ * @param {string} str - String to add spaces to
+ * @returns {string} String with spaces between camelCase words
+ * @example
+ * addSpaceIfCamelCase("camelCase") // returns "camel Case"
+ * addSpaceIfCamelCase("thisIsATest") // returns "this Is A Test"
+ */
+export const addSpaceIfCamelCase = (str: string) => {
+  if (str === undefined || str === null) return "";
+
+  if (typeof str !== "string") str = `${str}`;
+
+  return str.replace(/([a-z])([A-Z])/g, "$1 $2");
+};
+
+/**
+ * @description Replaces underscores with spaces in snake_case strings
+ * @param {string} str - String to replace underscores in
+ * @returns {string} String with underscores replaced by spaces
+ * @example
+ * replaceUnderscoreIfSnakeCase("snake_case") // returns "snake case"
+ */
+export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
+
+/**
+ * @description Truncates text to specified length and adds ellipsis
+ * @param {string} str - String to truncate
+ * @param {number} length - Maximum length before truncation
+ * @returns {string} Truncated string with ellipsis if needed
+ * @example
+ * truncateText("This is a long text", 7) // returns "This is..."
+ */
+export const truncateText = (str: string, length: number) => {
+  if (!str || str === "") return "";
+
+  return str.length > length ? `${str.substring(0, length)}...` : str;
+};
+
+/**
+ * @description Creates a similar string by randomly shuffling characters
+ * @param {string} str - String to shuffle
+ * @returns {string} Shuffled string with same characters
+ * @example
+ * createSimilarString("hello") // might return "olleh" or "lehol"
+ */
+export const createSimilarString = (str: string) => {
+  const shuffled = str
+    .split("")
+    .sort(() => Math.random() - 0.5)
+    .join("");
+
+  return shuffled;
+};
+
+/**
+ * @description Copies full URL (origin + path) to clipboard
+ * @param {string} path - URL path to copy
+ * @returns {Promise<void>} Promise that resolves when copying is complete
+ * @example
+ * await copyUrlToClipboard("issues/123") // copies "https://example.com/issues/123"
+ */
+export const copyUrlToClipboard = async (path: string) => {
+  // get origin or default to empty string if not in browser
+  const originUrl = typeof window !== "undefined" ? window.location.origin : "";
+  // create URL object and ensure proper path formatting
+  const url = new URL(path, originUrl);
+  await copyTextToClipboard(url.toString());
+};
+
+/**
+ * @description Gets first character of first word or first characters of first two words
+ * @param {string} str - Input string
+ * @returns {string} First character(s)
+ * @example
+ * getFirstCharacters("John") // returns "J"
+ * getFirstCharacters("John Doe") // returns "JD"
+ */
+export const getFirstCharacters = (str: string) => {
+  const words = str.trim().split(" ");
+  if (words.length === 1) {
+    return words[0].charAt(0);
+  } else {
+    return words[0].charAt(0) + words[1].charAt(0);
+  }
+};
+
+/**
+ * @description Formats number count, showing "99+" for numbers over 99
+ * @param {number} number - Number to format
+ * @returns {string} Formatted number string
+ * @example
+ * getNumberCount(50) // returns "50"
+ * getNumberCount(100) // returns "99+"
+ */
+export const getNumberCount = (number: number): string => {
+  if (number > 99) {
+    return "99+";
+  }
+  return number.toString();
+};
+
+/**
+ * @description: This function will capitalize the first letter of a string
+ * @param str String
+ * @returns String
+ */
+export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
+
+/**
+ * @description : This function will remove all the HTML tags from the string
+ * @param {string} htmlString
+ * @return {string}
+ * @example :
+ * const html = "<p>Some text</p>";
+const text = stripHTML(html);
+console.log(text); // Some text
+ */
+export const sanitizeHTML = (htmlString: string) => {
+  const sanitizedText = sanitizeHtml(htmlString, { allowedTags: [] }); // sanitize the string to remove all HTML tags
+  return sanitizedText.trim(); // trim the string to remove leading and trailing whitespaces
+};
+
+/**
+ * @description: This function will remove all the HTML tags from the string and truncate the string to the specified length
+ * @param {string} html
+ * @param {number} length
+ * @return {string}
+ * @example:
+ * const html = "<p>Some text</p>";
+ * const text = stripAndTruncateHTML(html);
+ * console.log(text); // Some text
+ */
+export const stripAndTruncateHTML = (html: string, length: number = 55) => truncateText(sanitizeHTML(html), length);
+
+/**
+ * @returns {boolean} true if email is valid, false otherwise
+ * @description Returns true if email is valid, false otherwise
+ * @param {string} email string to check if it is a valid email
+ * @example checkEmailValidity("hello world") => false
+ * @example checkEmailValidity("example@plane.so") => true
+ */
+export const checkEmailValidity = (email: string): boolean => {
+  if (!email) return false;
+
+  const isEmailValid =
+    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+      email
+    );
+
+  return isEmailValid;
+};
+
+export const isEmptyHtmlString = (htmlString: string, allowedHTMLTags: string[] = []) => {
+  // Remove HTML tags using sanitize-html
+  const cleanText = sanitizeHtml(htmlString, { allowedTags: allowedHTMLTags });
+  // Trim the string and check if it's empty
+  return cleanText.trim() === "";
+};
+
+/**
+ * @description
+ * Check if a JSONContent object is empty
+ * @param {JSONContent} content
+ * @returns {boolean}
+ */
+export const isJSONContentEmpty = (content: JSONContent | undefined): boolean => {
+  // If it has text, check if text is meaningful
+  if (!content) {
+    return true;
+  }
+  if (content.text !== undefined) {
+    return !content.text || content.text.trim() === "";
+  }
+
+  // If it has no content array, consider it empty
+  if (!content.content || content.content.length === 0) {
+    // Special case: empty paragraph nodes should be considered empty
+    if (content.type === "paragraph" || content.type === "doc") {
+      return true;
+    }
+    // For other node types without content (like hard breaks), check if they're meaningful
+    return (
+      content.type !== "hardBreak" &&
+      content.type !== "image" &&
+      content.type !== "mention-component" &&
+      content.type !== "image-component"
+    );
+  }
+
+  // Check if all nested content is empty
+  return content.content.every(isJSONContentEmpty);
+};
+
+/**
+ * @description
+ * This function will check if the comment is empty or not.
+ * It returns true if comment is empty.
+ * Now supports TipTap Content types (HTMLContent, JSONContent, JSONContent[], null)
+ *
+ * For HTML content:
+ * 1. If comment is undefined/null
+ * 2. If comment is an empty string
+ * 3. If comment is "<p></p>"
+ * 4. If comment contains only empty HTML tags
+ *
+ * For JSON content:
+ * 1. If content is null/undefined
+ * 2. If content has no meaningful text or nested content
+ * 3. If all nested content is empty
+ *
+ * @param {Content} comment - TipTap Content type
+ * @returns {boolean}
+ */
+export const isCommentEmpty = (comment: Content | undefined): boolean => {
+  // Handle null/undefined
+  if (!comment) return true;
+
+  // Handle HTMLContent (string)
+  if (typeof comment === "string") {
+    return (
+      comment.trim() === "" ||
+      comment === "<p></p>" ||
+      isEmptyHtmlString(comment, ["img", "mention-component", "image-component"])
+    );
+  }
+
+  // Handle JSONContent[] (array)
+  if (Array.isArray(comment)) {
+    return comment.length === 0 || comment.every(isJSONContentEmpty);
+  }
+
+  // Handle JSONContent (object)
+  return isJSONContentEmpty(comment);
+};
+
+/**
+ * @description
+ * Legacy function for backward compatibility with string comments
+ * @param {string | undefined} comment
+ * @returns {boolean}
+ * @deprecated Use isCommentEmpty with Content type instead
+ */
+export const isStringCommentEmpty = (comment: string | undefined): boolean => {
+  // return true if comment is undefined
+  if (!comment) return true;
+  return (
+    comment?.trim() === "" ||
+    comment === "<p></p>" ||
+    isEmptyHtmlString(comment ?? "", ["img", "mention-component", "image-component", "embed-component"])
+  );
+};
+
+/**
+ * @description
+ * This function test whether a URL is valid or not.
+ *
+ * It accepts URLs with or without the protocol.
+ * @param {string} url
+ * @returns {boolean}
+ * @example
+ * checkURLValidity("https://example.com") => true
+ * checkURLValidity("example.com") => true
+ * checkURLValidity("example") => false
+ */
+export const checkURLValidity = (url: string): boolean => {
+  if (!url) return false;
+
+  // regex to support complex query parameters and fragments
+  const urlPattern =
+    /^(https?:\/\/)?((([a-z\d-]+\.)*[a-z\d-]+\.[a-z]{2,6})|(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))(:\d+)?(\/[\w.-]*)*(\?[^#\s]*)?(#[\w-]*)?$/i;
+
+  return urlPattern.test(url);
+};
+
+/**
+ * Combines array elements with a separator and adds a conjunction before the last element
+ * @param array Array of strings to combine
+ * @param separator Separator to use between elements (default: ", ")
+ * @param conjunction Conjunction to use before last element (default: "and")
+ * @returns Combined string with conjunction before the last element
+ */
+export const joinWithConjunction = (array: string[], separator: string = ", ", conjunction: string = "and"): string => {
+  if (!array || array.length === 0) return "";
+  if (array.length === 1) return array[0];
+  if (array.length === 2) return `${array[0]} ${conjunction} ${array[1]}`;
+
+  const lastElement = array[array.length - 1];
+  const elementsExceptLast = array.slice(0, -1);
+
+  return `${elementsExceptLast.join(separator)}${separator}${conjunction} ${lastElement}`;
+};
+
+/**
+ * @description Ensures a URL has a protocol
+ * @param {string} url
+ * @returns {string}
+ * @example
+ * ensureUrlHasProtocol("example.com") => "http://example.com"
+ */
+export const ensureUrlHasProtocol = (url: string): string => (url.startsWith("http") ? url : `http://${url}`);
+
+/**
+ * @returns {boolean} true if searchQuery is substring of text in the same order, false otherwise
+ * @description Returns true if searchQuery is substring of text in the same order, false otherwise
+ * @param {string} text string to compare from
+ * @param {string} searchQuery
+ * @example substringMatch("hello world", "hlo") => true
+ * @example substringMatch("hello world", "hoe") => false
+ */
+export const substringMatch = (text: string, searchQuery: string): boolean => {
+  try {
+    let searchIndex = 0;
+
+    for (let i = 0; i < text.length; i++) {
+      if (text[i].toLowerCase() === searchQuery[searchIndex]?.toLowerCase()) searchIndex++;
+
+      // All characters of searchQuery found in order
+      if (searchIndex === searchQuery.length) return true;
+    }
+
+    // Not all characters of searchQuery found in order
+    return false;
+  } catch (_err) {
+    return false;
+  }
+};
+
+/**
+ * @description Copies text to clipboard
+ * @param {string} text - Text to copy
+ * @returns {Promise<void>} Promise that resolves when copying is complete
+ * @example
+ * await copyTextToClipboard("Hello, World!") // copies "Hello, World!" to clipboard
+ */
+const fallbackCopyTextToClipboard = (text: string) => {
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+
+  // Avoid scrolling to bottom
+  textArea.style.top = "0";
+  textArea.style.left = "0";
+  textArea.style.position = "fixed";
+
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+
+  try {
+    // FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
+    document.execCommand("copy");
+  } catch (_err) {
+    // catch fallback error
+  }
+
+  document.body.removeChild(textArea);
+};
+
+/**
+ * @description Copies text to clipboard
+ * @param {string} text - Text to copy
+ * @returns {Promise<void>} Promise that resolves when copying is complete
+ * @example
+ * await copyTextToClipboard("Hello, World!") // copies "Hello, World!" to clipboard
+ */
+export const copyTextToClipboard = async (text: string): Promise<void> => {
+  if (!navigator.clipboard) {
+    fallbackCopyTextToClipboard(text);
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+};
+
+/**
+ * @description Joins URL path segments properly, removing duplicate slashes using URL encoding
+ * @param {...string} segments - URL path segments to join
+ * @returns {string} Properly joined URL path
+ * @example
+ * joinUrlPath("/workspace", "/projects") => "/workspace/projects"
+ * joinUrlPath("/workspace", "projects") => "/workspace/projects"
+ * joinUrlPath("workspace", "projects") => "/workspace/projects"
+ * joinUrlPath("/workspace/", "/projects/") => "/workspace/projects/"
+ */
+export const joinUrlPath = (...segments: string[]): string => {
+  if (segments.length === 0) return "";
+
+  // Filter out empty segments
+  const validSegments = segments.filter((segment) => segment !== "");
+  if (validSegments.length === 0) return "";
+
+  // Process segments to normalize slashes
+  const processedSegments = validSegments.map((segment, index) => {
+    let processed = segment;
+
+    // Remove leading slashes from all segments except the first
+    while (processed.startsWith("/")) {
+      processed = processed.substring(1);
+    }
+
+    // Remove trailing slashes from all segments except the last
+    if (index < validSegments.length - 1) {
+      while (processed.endsWith("/")) {
+        processed = processed.substring(0, processed.length - 1);
+      }
+    }
+
+    return processed;
+  });
+
+  // Join segments with single slash
+  const joined = processedSegments.join("/");
+
+  // Use URL constructor to normalize the path and handle double slashes
+  try {
+    // Create a dummy URL to leverage browser's URL normalization
+    const dummyUrl = new URL(`http://example.com/${joined}`);
+    return dummyUrl.pathname;
+  } catch {
+    // Fallback: manually handle double slashes by splitting and filtering
+    const pathParts = joined.split("/").filter((part) => part !== "");
+    return pathParts.length > 0 ? `/${pathParts.join("/")}` : "";
+  }
+};
diff --git a/packages/utils/src/subscription.ts b/packages/utils/src/subscription.ts
new file mode 100644
index 0000000..452d6e9
--- /dev/null
+++ b/packages/utils/src/subscription.ts
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { orderBy } from "lodash-es";
+// plane imports
+import type { IPaymentProduct, TProductSubscriptionType, TSubscriptionPrice } from "@plane/types";
+import { EProductSubscriptionEnum } from "@plane/types";
+
+/**
+ * Calculates the yearly discount percentage when switching from monthly to yearly billing
+ * @param monthlyPrice - The monthly subscription price
+ * @param yearlyPricePerMonth - The monthly equivalent price when billed yearly
+ * @returns The discount percentage as a whole number (floored)
+ */
+export const calculateYearlyDiscount = (monthlyPrice: number, yearlyPricePerMonth: number): number => {
+  const monthlyCost = monthlyPrice * 12;
+  const yearlyCost = yearlyPricePerMonth * 12;
+  const amountSaved = monthlyCost - yearlyCost;
+  const discountPercentage = (amountSaved / monthlyCost) * 100;
+  return Math.floor(discountPercentage);
+};
+
+/**
+ * Gets the display name for a subscription plan variant
+ * @param planVariant - The subscription plan variant enum
+ * @returns The human-readable name of the plan
+ */
+export const getSubscriptionName = (planVariant: EProductSubscriptionEnum): string => {
+  switch (planVariant) {
+    case EProductSubscriptionEnum.FREE:
+      return "Free";
+    case EProductSubscriptionEnum.ONE:
+      return "One";
+    case EProductSubscriptionEnum.PRO:
+      return "Pro";
+    case EProductSubscriptionEnum.BUSINESS:
+      return "Business";
+    case EProductSubscriptionEnum.ENTERPRISE:
+      return "Enterprise";
+    default:
+      return "--";
+  }
+};
+
+/**
+ * Gets the base subscription name for upgrade/downgrade paths
+ * @param planVariant - The current subscription plan variant
+ * @returns The name of the base subscription plan
+ */
+export const getBaseSubscriptionName = (planVariant: TProductSubscriptionType): string => {
+  switch (planVariant) {
+    case EProductSubscriptionEnum.ONE:
+      return getSubscriptionName(EProductSubscriptionEnum.FREE);
+    case EProductSubscriptionEnum.PRO:
+      return getSubscriptionName(EProductSubscriptionEnum.FREE);
+    case EProductSubscriptionEnum.BUSINESS:
+      return getSubscriptionName(EProductSubscriptionEnum.PRO);
+    case EProductSubscriptionEnum.ENTERPRISE:
+      return getSubscriptionName(EProductSubscriptionEnum.BUSINESS);
+    default:
+      return "--";
+  }
+};
+
+export type TSubscriptionPriceDetail = {
+  monthlyPriceDetails: TSubscriptionPrice;
+  yearlyPriceDetails: TSubscriptionPrice;
+};
+
+/**
+ * Gets the price details for a subscription product
+ * @param product - The payment product to get price details for
+ * @returns Array of price details for monthly and yearly plans
+ */
+export const getSubscriptionPriceDetails = (product: IPaymentProduct | undefined): TSubscriptionPriceDetail => {
+  const productPrices = product?.prices || [];
+  const monthlyPriceDetails = orderBy(productPrices, ["recurring"], ["desc"])?.find(
+    (price) => price.recurring === "month"
+  );
+  const monthlyPriceAmount = Number(((monthlyPriceDetails?.unit_amount || 0) / 100).toFixed(2));
+  const yearlyPriceDetails = orderBy(productPrices, ["recurring"], ["desc"])?.find(
+    (price) => price.recurring === "year"
+  );
+  const yearlyPriceAmount = Number(((yearlyPriceDetails?.unit_amount || 0) / 1200).toFixed(2));
+
+  return {
+    monthlyPriceDetails: {
+      key: "monthly",
+      id: monthlyPriceDetails?.id,
+      currency: "$",
+      price: monthlyPriceAmount,
+      recurring: "month",
+    },
+    yearlyPriceDetails: {
+      key: "yearly",
+      id: yearlyPriceDetails?.id,
+      currency: "$",
+      price: yearlyPriceAmount,
+      recurring: "year",
+    },
+  };
+};
diff --git a/packages/utils/src/tab-indices.ts b/packages/utils/src/tab-indices.ts
new file mode 100644
index 0000000..8760872
--- /dev/null
+++ b/packages/utils/src/tab-indices.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { ETabIndices } from "@plane/constants";
+import { TAB_INDEX_MAP } from "@plane/constants";
+
+export const getTabIndex = (type?: ETabIndices, isMobile: boolean = false) => {
+  const getIndex = (key: string) =>
+    isMobile ? undefined : type && TAB_INDEX_MAP[type].findIndex((tabIndex) => tabIndex === key) + 1;
+
+  const baseTabIndex = isMobile ? -1 : 1;
+
+  return { getIndex, baseTabIndex };
+};
diff --git a/packages/utils/src/theme-legacy.ts b/packages/utils/src/theme-legacy.ts
new file mode 100644
index 0000000..bdfb408
--- /dev/null
+++ b/packages/utils/src/theme-legacy.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Legacy Theme System
+ *
+ * This file contains the old 5-color theme system for backward compatibility.
+ *
+ * @deprecated Most functions in this file are deprecated
+ * New code should use the OKLCH-based theme system from ./theme/ instead
+ *
+ * Functions:
+ * - applyTheme: OLD 5-color theme system (background, text, primary, sidebarBg, sidebarText)
+ * - unsetCustomCssVariables: Clears both old AND new theme variables (updated for OKLCH)
+ * - resolveGeneralTheme: Utility to resolve theme mode (still useful)
+ * - migrateLegacyTheme: Converts old 5-color theme to new 2-color system
+ *
+ * For new implementations:
+ * - Use: import { applyCustomTheme, clearCustomTheme } from '@plane/utils/theme'
+ * - See: packages/utils/src/theme/theme-application.ts
+ */
+
+export const resolveGeneralTheme = (resolvedTheme: string | undefined) =>
+  resolvedTheme?.includes("light") ? "light" : resolvedTheme?.includes("dark") ? "dark" : "system";
diff --git a/packages/utils/src/theme/color-conversion.ts b/packages/utils/src/theme/color-conversion.ts
new file mode 100644
index 0000000..aefaccf
--- /dev/null
+++ b/packages/utils/src/theme/color-conversion.ts
@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Color Conversion Utilities
+ * Provides hex/RGB/HSL/OKLCH conversions using chroma-js
+ */
+
+import chroma from "chroma-js";
+import { validateAndAdjustOKLCH } from "./color-validation";
+
+/**
+ * RGB color interface
+ */
+export interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+/**
+ * OKLCH color interface (modern perceptual color space)
+ * L = Lightness (0-1)
+ * C = Chroma/Saturation
+ * H = Hue (0-360 degrees)
+ */
+export interface OKLCH {
+  l: number;
+  c: number;
+  h: number;
+}
+
+/**
+ * Convert hex color to OKLCH color space
+ * Uses chroma-js for accurate conversion
+ */
+export function hexToOKLCH(hex: string): OKLCH {
+  try {
+    const cleanHex = hex.replace("#", "");
+    const color = chroma(`#${cleanHex}`);
+    const [l, c, h] = color.oklch();
+
+    // Validate and adjust if needed
+    return validateAndAdjustOKLCH({ l, c: c || 0, h: h || 0 });
+  } catch (error) {
+    console.error("Error converting hex to OKLCH:", error);
+    // Return a safe default (mid-gray)
+    return { l: 0.5, c: 0, h: 0 };
+  }
+}
+
+/**
+ * Convert OKLCH to CSS string format
+ * Example: oklch(0.5840 0.1200 250.00)
+ */
+export function oklchToCSS(oklch: OKLCH, alpha?: number): string {
+  const { l, c, h } = oklch;
+  return `oklch(${l.toFixed(4)} ${c.toFixed(4)} ${h.toFixed(2)}${alpha ? ` / ${alpha.toFixed(2)}%` : ""})`;
+}
+
+/**
+ * Convert hex color to OKLCH CSS string
+ * Combines hexToOKLCH and oklchToCSS
+ */
+export function hexToOKLCHString(hex: string): string {
+  const oklch = hexToOKLCH(hex);
+  return oklchToCSS(oklch);
+}
+
+/**
+ * Parse OKLCH CSS string to OKLCH object
+ * Example: "oklch(0.5840 0.1200 250.00)" -> { l: 0.5840, c: 0.1200, h: 250.00 }
+ */
+export function parseOKLCH(oklchString: string): OKLCH | null {
+  const match = oklchString.match(/oklch$([\d.]+)\s+([\d.]+)\s+([\d.]+)$/);
+  if (match) {
+    return {
+      l: parseFloat(match[1]),
+      c: parseFloat(match[2]),
+      h: parseFloat(match[3]),
+    };
+  }
+  return null;
+}
+
+/**
+ * Convert hex color to RGB object
+ * Legacy function for backward compatibility
+ */
+export function hexToRgb(hex: string): RGB {
+  const cleanHex = hex.replace("#", "");
+
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+
+  return { r, g, b };
+}
+
+/**
+ * Convert RGB to hex color
+ * Legacy function for backward compatibility
+ */
+export function rgbToHex(rgb: RGB): string {
+  const { r, g, b } = rgb;
+  const toHex = (n: number) => {
+    const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Convert hex to chroma-js HSL
+ * Returns [hue (0-360), saturation (0-1), lightness (0-1)]
+ */
+export function hexToHSL(hex: string): [number, number, number] {
+  try {
+    const cleanHex = hex.replace("#", "");
+    const color = chroma(`#${cleanHex}`);
+    return color.hsl();
+  } catch (error) {
+    console.error("Error converting hex to HSL:", error);
+    return [0, 0, 0.5]; // Safe default
+  }
+}
+
+/**
+ * Check if a color is grayscale (has no saturation)
+ */
+export function isGrayscale(hex: string): boolean {
+  try {
+    const cleanHex = hex.replace("#", "");
+    const color = chroma(`#${cleanHex}`);
+    const [, s] = color.hsl();
+    return isNaN(s) || s < 0.01; // NaN hue or very low saturation
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Calculate relative luminance using WCAG standard
+ * Returns a value between 0 (black) and 1 (white)
+ * Based on: https://www.w3.org/TR/WCAG20/#relativeluminancedef
+ */
+export function getRelativeLuminance(hex: string): number {
+  try {
+    const cleanHex = hex.replace("#", "");
+    const color = chroma(`#${cleanHex}`);
+    return color.luminance();
+  } catch (error) {
+    console.error("Error calculating luminance:", error);
+    return 0.5; // Safe default
+  }
+}
+
+/**
+ * Calculate perceptual brightness using weighted RGB formula
+ * Returns a value between 0 (dark) and 255 (bright)
+ * Uses ITU-R BT.709 coefficients for better perceptual accuracy
+ */
+export function getPerceptualBrightness(hex: string): number {
+  try {
+    const { r, g, b } = hexToRgb(hex);
+    // ITU-R BT.709 coefficients
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  } catch (error) {
+    console.error("Error calculating brightness:", error);
+    return 128; // Safe default (mid-gray)
+  }
+}
diff --git a/packages/utils/src/theme/color-validation.ts b/packages/utils/src/theme/color-validation.ts
new file mode 100644
index 0000000..d295a63
--- /dev/null
+++ b/packages/utils/src/theme/color-validation.ts
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Color Validation Utilities
+ * Validates and adjusts color inputs for palette generation
+ */
+
+/**
+ * Validate hex color format
+ * Accepts formats: #RGB, #RRGGBB, RGB, RRGGBB
+ */
+export function validateHexColor(hex: string): boolean {
+  if (!hex) return false;
+
+  const cleanHex = hex.replace("#", "");
+  const hexRegex = /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/;
+
+  return hexRegex.test(cleanHex);
+}
+
+/**
+ * Normalize hex color to 6-digit format without #
+ * Converts #RGB to RRGGBB format
+ */
+export function normalizeHexColor(hex: string): string {
+  const cleanHex = hex.replace("#", "").toUpperCase();
+
+  // Expand 3-digit hex to 6-digit
+  if (cleanHex.length === 3) {
+    return cleanHex
+      .split("")
+      .map((char) => char + char)
+      .join("");
+  }
+
+  return cleanHex;
+}
+
+/**
+ * Validate and adjust OKLCH color for better visibility
+ * Ensures the color is not too extreme (too light or too dark)
+ */
+export function validateAndAdjustOKLCH(oklch: { l: number; c: number; h: number }): {
+  l: number;
+  c: number;
+  h: number;
+} {
+  let { l, c, h } = oklch;
+
+  // Adjust lightness if too extreme
+  if (l > 0.95) {
+    l = 0.9; // Too light - darken slightly
+  } else if (l < 0.1) {
+    l = 0.15; // Too dark - lighten slightly
+  }
+
+  // Ensure minimum chroma for color distinction (not pure gray)
+  if (c < 0.001) {
+    c = 0.002;
+  }
+
+  // Clamp chroma to reasonable range
+  c = Math.max(0.001, Math.min(0.37, c));
+
+  // Normalize hue to 0-360 range
+  h = ((h % 360) + 360) % 360;
+
+  return { l, c, h };
+}
+
+/**
+ * Adjust lightness for dark mode with improved algorithm
+ * Applies different scaling based on original lightness
+ */
+export function adjustLightnessForDarkMode(lightness: number, offset: number): number {
+  // Apply offset (negative to make darker)
+  let adjusted = lightness + offset;
+
+  // Enhanced clamping with better distribution
+  // Keep very light colors from becoming too dark
+  if (lightness > 0.9) {
+    // For very light colors, apply less offset
+    adjusted = lightness + offset * 0.6;
+  } else if (lightness < 0.25) {
+    // For already dark colors, apply more offset to ensure they stay very dark
+    adjusted = lightness + offset * 1.2;
+  }
+
+  // Clamp to valid range (0.1 to 0.95)
+  adjusted = Math.max(0.1, Math.min(0.95, adjusted));
+
+  return adjusted;
+}
diff --git a/packages/utils/src/theme/constants.ts b/packages/utils/src/theme/constants.ts
new file mode 100644
index 0000000..c572e53
--- /dev/null
+++ b/packages/utils/src/theme/constants.ts
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Theme System Constants
+ * Defines shade stops, default configurations, and color modes
+ */
+
+/**
+ * Alpha mapping for 14-shade palette system.
+ *
+ * Must mirror the --alpha-white-* / --alpha-black-* ladder in
+ * @makeplane/propel (styles/variables.css), which is the source of truth for
+ * the default themes. These values are only applied for custom themes, so any
+ * drift shows up as custom themes rendering differently from the default one —
+ * silently, with no build error. Rungs 100-300 are deliberately much lighter
+ * than the linear 0.05 step the rest of the scale follows.
+ */
+export const ALPHA_MAPPING = {
+  100: 0.04,
+  200: 0.06,
+  300: 0.08,
+  400: 0.2,
+  500: 0.3,
+  600: 0.4,
+  700: 0.5,
+  800: 0.6,
+  900: 0.7,
+  1000: 0.8,
+  1100: 0.9,
+  1200: 0.95,
+};
+
+/**
+ * All shade stops for 14-shade palette system
+ * 50 = white, 1000 = black
+ * Extended range: 50-1000 for more granular control
+ */
+export const SHADE_STOPS = [50, 100, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950, 1000] as const;
+
+/**
+ * Default stop where user input color is anchored
+ * This is now dynamically calculated based on the input color's lightness
+ * This constant serves as a fallback only
+ */
+export const DEFAULT_VALUE_STOP = 500;
+
+/**
+ * Baseline lightness values for each stop (in OKLCH L scale 0-1)
+ * Used to determine which stop best matches an input color
+ * Based on perceptually uniform distribution
+ */
+export const BASELINE_LIGHTNESS_MAP: Record<number, number> = {
+  50: 0.98, // Near white
+  100: 0.95, // Lightest
+  200: 0.88, // Very light
+  300: 0.78, // Light
+  400: 0.68, // Light-medium
+  500: 0.58, // Medium (typical input)
+  600: 0.48, // Medium-dark
+  700: 0.38, // Dark
+  750: 0.28, // Very dark
+  800: 0.18, // Darkest
+  850: 0.12, // Near black
+  900: 0.08, // Almost black
+  950: 0.04, // Nearly black
+  1000: 0.02, // Black
+};
+
+/**
+ * Default hue shift for brand colors (in degrees)
+ * Adds visual interest by shifting hue at extremes
+ */
+export const DEFAULT_HUE_SHIFT_BRAND = 10;
+
+/**
+ * Default hue shift for neutral colors (in degrees)
+ * No shift to keep neutrals truly neutral
+ */
+export const DEFAULT_HUE_SHIFT_NEUTRAL = 0;
+
+/**
+ * Default minimum lightness for light mode (0-100 scale)
+ */
+export const DEFAULT_LIGHT_MODE_LIGHTNESS_MIN = 0;
+
+/**
+ * Default maximum lightness for light mode (0-100 scale)
+ */
+export const DEFAULT_LIGHT_MODE_LIGHTNESS_MAX = 100;
+
+/**
+ * Default minimum lightness for dark mode (0-100 scale)
+ */
+export const DEFAULT_DARK_MODE_LIGHTNESS_MIN = 10;
+
+/**
+ * Default maximum lightness for dark mode (0-100 scale)
+ */
+export const DEFAULT_DARK_MODE_LIGHTNESS_MAX = 80;
+
+/**
+ * Color generation modes
+ * - perceived: HSLuv-based perceptually uniform lightness (recommended)
+ * - linear: Direct HSL manipulation
+ */
+export type ColorMode = "perceived" | "linear";
+
+/**
+ * Default color generation mode
+ */
+export const DEFAULT_COLOR_MODE: ColorMode = "perceived";
+
+/**
+ * Saturation curve types
+ * - ease-in-out: Increase saturation at extremes (recommended for brand colors)
+ * - linear: Maintain constant saturation (recommended for neutrals)
+ */
+export type SaturationCurve = "ease-in-out" | "linear";
+
+/**
+ * Default saturation curve
+ */
+export const DEFAULT_SATURATION_CURVE: SaturationCurve = "ease-in-out";
+
+/**
+ * Editor color backgrounds for light mode
+ * Used for stickies and editor elements
+ */
+export const EDITOR_COLORS_LIGHT = {
+  gray: "#d6d6d8",
+  peach: "#ffd5d7",
+  pink: "#fdd4e3",
+  orange: "#ffe3cd",
+  green: "#c3f0de",
+  "light-blue": "#c5eff9",
+  "dark-blue": "#c9dafb",
+  purple: "#e3d8fd",
+} as const;
+
+/**
+ * Editor color backgrounds for dark mode
+ * Used for stickies and editor elements
+ */
+export const EDITOR_COLORS_DARK = {
+  gray: "#404144",
+  peach: "#593032",
+  pink: "#562e3d",
+  orange: "#583e2a",
+  green: "#1d4a3b",
+  "light-blue": "#1f495c",
+  "dark-blue": "#223558",
+  purple: "#3d325a",
+};
diff --git a/packages/utils/src/theme/index.ts b/packages/utils/src/theme/index.ts
new file mode 100644
index 0000000..bdb24fa
--- /dev/null
+++ b/packages/utils/src/theme/index.ts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Theme System Public API
+ * Exports all theme-related utilities for use across Plane apps
+ */
+
+// Palette generation
+export {
+  calculateDynamicValueStop,
+  generateColorPalette,
+  generateThemePalettes,
+  type ColorPalette,
+  type PaletteOptions,
+} from "./palette-generator";
+
+// Theme application
+export {
+  applyCustomTheme,
+  clearCustomTheme,
+  isColorDark,
+  getOnColorTextColors,
+  type DarknessDetectionMethod,
+} from "./theme-application";
+
+// Color conversion utilities
+export {
+  hexToHSL,
+  hexToOKLCH,
+  hexToOKLCHString,
+  // hexToRgb,
+  isGrayscale,
+  oklchToCSS,
+  parseOKLCH,
+  getRelativeLuminance,
+  getPerceptualBrightness,
+  // rgbToHex,
+  type OKLCH,
+  type RGB,
+} from "./color-conversion";
+
+// Color validation
+export { normalizeHexColor, validateHexColor } from "./color-validation";
+
+// Theme inversion (dark mode)
+export { getBrandMapping, getNeutralMapping, invertPalette } from "./theme-inversion";
+
+// Constants
+export {
+  BASELINE_LIGHTNESS_MAP,
+  type ColorMode,
+  DEFAULT_COLOR_MODE,
+  DEFAULT_HUE_SHIFT_BRAND,
+  DEFAULT_HUE_SHIFT_NEUTRAL,
+  DEFAULT_LIGHT_MODE_LIGHTNESS_MAX,
+  DEFAULT_LIGHT_MODE_LIGHTNESS_MIN,
+  DEFAULT_DARK_MODE_LIGHTNESS_MAX,
+  DEFAULT_DARK_MODE_LIGHTNESS_MIN,
+  DEFAULT_SATURATION_CURVE,
+  DEFAULT_VALUE_STOP,
+  type SaturationCurve,
+  SHADE_STOPS,
+} from "./constants";
diff --git a/packages/utils/src/theme/palette-generator.ts b/packages/utils/src/theme/palette-generator.ts
new file mode 100644
index 0000000..ed2417e
--- /dev/null
+++ b/packages/utils/src/theme/palette-generator.ts
@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Palette Generator
+ * Generates 14-shade color palettes directly in OKLCH color space
+ * Keeps C (chroma) and H (hue) constant, only varies L (lightness)
+ * Inspired by tints.dev but optimized for OKLCH
+ */
+
+import type { OKLCH } from "./color-conversion";
+import { hexToOKLCH, oklchToCSS } from "./color-conversion";
+import { normalizeHexColor, validateHexColor } from "./color-validation";
+import {
+  BASELINE_LIGHTNESS_MAP,
+  DEFAULT_LIGHT_MODE_LIGHTNESS_MIN,
+  DEFAULT_LIGHT_MODE_LIGHTNESS_MAX,
+  DEFAULT_DARK_MODE_LIGHTNESS_MIN,
+  DEFAULT_DARK_MODE_LIGHTNESS_MAX,
+  DEFAULT_VALUE_STOP,
+  SHADE_STOPS,
+} from "./constants";
+
+/**
+ * Type representing valid shade stop values
+ */
+export type ShadeStop = (typeof SHADE_STOPS)[number];
+
+/**
+ * 14-shade color palette
+ * Keys: 50, 100, 200, 300, 400, 500, 600, 700, 750, 800, 850, 900, 950, 1000
+ * Values: OKLCH CSS strings (e.g., "oklch(0.5840 0.1200 250.00)")
+ */
+export interface ColorPalette {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  750: string;
+  800: string;
+  850: string;
+  900: string;
+  950: string;
+  1000: string;
+}
+
+/**
+ * Palette generation options
+ */
+export interface PaletteOptions {
+  /** Minimum lightness (0-1) for darkest shade */
+  lightnessMin?: number;
+  /** Maximum lightness (0-1) for lightest shade */
+  lightnessMax?: number;
+  /** Stop where the input color is anchored (default: auto-calculated) */
+  valueStop?: number | "auto";
+}
+
+/**
+ * Calculate the appropriate stop value based on a color's OKLCH lightness
+ * Inspired by tints.dev's calculateStopFromColor but simplified for OKLCH
+ *
+ * @param oklch - OKLCH color object
+ * @returns The nearest available stop value (50, 100, 200, etc.)
+ */
+export function calculateDynamicValueStop(oklch: OKLCH): number {
+  const { l: lightness } = oklch;
+
+  // Find the stop whose baseline lightness is closest to the input color's lightness
+  let closestStop = DEFAULT_VALUE_STOP;
+  let smallestDiff = Infinity;
+
+  for (const stop of SHADE_STOPS) {
+    const baselineLightness = BASELINE_LIGHTNESS_MAP[stop];
+    const diff = Math.abs(baselineLightness - lightness);
+
+    if (diff < smallestDiff) {
+      smallestDiff = diff;
+      closestStop = stop;
+    }
+  }
+
+  return closestStop;
+}
+
+/**
+ * Type guard to check if a number is a valid shade stop
+ * @param value - Number to check
+ * @returns True if value is a valid shade stop
+ */
+function isValidShadeStop(value: number): value is ShadeStop {
+  return (SHADE_STOPS as readonly number[]).includes(value);
+}
+
+/**
+ * Generate a 14-shade color palette from a base hex color
+ * Works directly in OKLCH space, keeping C and H constant, only varying L
+ *
+ * @param baseColor - Hex color (with or without #)
+ * @param mode - "light" or "dark"
+ * @param options - Palette generation options
+ * @returns ColorPalette with 14 OKLCH CSS strings
+ */
+export function generateColorPalette(
+  baseColor: string,
+  mode: "light" | "dark",
+  options: PaletteOptions = {}
+): ColorPalette {
+  // Validate and normalize input
+  if (!validateHexColor(baseColor)) {
+    throw new Error(`Invalid hex color: ${baseColor}`);
+  }
+
+  const normalizedHex = normalizeHexColor(baseColor);
+
+  // Convert to OKLCH
+  const inputOKLCH = hexToOKLCH(normalizedHex);
+  const { l: inputL, c: inputC, h: inputH } = inputOKLCH;
+
+  const DEFAULT_LIGHTNESS_MIN = mode === "light" ? DEFAULT_LIGHT_MODE_LIGHTNESS_MIN : DEFAULT_DARK_MODE_LIGHTNESS_MIN;
+  const DEFAULT_LIGHTNESS_MAX = mode === "light" ? DEFAULT_LIGHT_MODE_LIGHTNESS_MAX : DEFAULT_DARK_MODE_LIGHTNESS_MAX;
+
+  // Extract options with defaults
+  const {
+    lightnessMin = DEFAULT_LIGHTNESS_MIN / 100, // Convert to 0-1 scale
+    lightnessMax = DEFAULT_LIGHTNESS_MAX / 100, // Convert to 0-1 scale
+    valueStop = options.valueStop ?? DEFAULT_VALUE_STOP,
+  } = options;
+
+  // Calculate or use provided valueStop
+  const anchorStop = valueStop === "auto" ? calculateDynamicValueStop(inputOKLCH) : valueStop;
+
+  // Validate valueStop if provided manually
+  if (typeof anchorStop === "number" && !isValidShadeStop(anchorStop)) {
+    throw new Error(`Invalid valueStop: ${anchorStop}. Must be one of ${SHADE_STOPS.join(", ")}`);
+  }
+
+  // Create lightness distribution with three anchor points
+  const distributionAnchors = [
+    { stop: SHADE_STOPS[0], lightness: lightnessMax }, // Lightest
+    { stop: anchorStop, lightness: inputL }, // Input color
+    { stop: SHADE_STOPS[SHADE_STOPS.length - 1], lightness: lightnessMin }, // Darkest
+  ];
+
+  // Generate palette by interpolating lightness for each stop
+  const palette: Partial<ColorPalette> = {};
+
+  SHADE_STOPS.forEach((stop) => {
+    let targetLightness: number;
+
+    // Check if this is an anchor point
+    const anchor = distributionAnchors.find((a) => a.stop === stop);
+    if (anchor) {
+      targetLightness = anchor.lightness;
+    } else {
+      // Interpolate between anchor points
+      let leftAnchor, rightAnchor;
+
+      if (stop < anchorStop) {
+        leftAnchor = distributionAnchors[0]; // stop 50
+        rightAnchor = distributionAnchors[1]; // anchorStop
+      } else {
+        leftAnchor = distributionAnchors[1]; // anchorStop
+        rightAnchor = distributionAnchors[2]; // stop 1000
+      }
+
+      // Linear interpolation
+      const range = rightAnchor.stop - leftAnchor.stop;
+      const position = stop - leftAnchor.stop;
+      const ratio = position / range;
+      targetLightness = leftAnchor.lightness + (rightAnchor.lightness - leftAnchor.lightness) * ratio;
+    }
+
+    // Create OKLCH color with constant C and H, only varying L
+    const shadeOKLCH: OKLCH = {
+      l: Math.max(0, Math.min(1, targetLightness)), // Clamp to 0-1
+      c: inputC, // Keep chroma constant
+      h: inputH, // Keep hue constant
+    };
+
+    // Convert to CSS string
+    const key = stop as keyof ColorPalette;
+    palette[key] = oklchToCSS(shadeOKLCH);
+  });
+
+  return palette as ColorPalette;
+}
+
+/**
+ * Generate both brand and neutral palettes for a custom theme
+ * Optimized for Plane's 2-color theme system
+ * Uses auto-calculated value stops for better color matching
+ *
+ * @param brandColor - Brand accent color (hex)
+ * @param neutralColor - Neutral/background color (hex)
+ * @returns Object with brandPalette and neutralPalette
+ */
+export function generateThemePalettes(
+  brandColor: string,
+  neutralColor: string,
+  mode: "light" | "dark"
+): {
+  brandPalette: ColorPalette;
+  neutralPalette: ColorPalette;
+} {
+  // Brand palette - auto-calculate value stop based on color lightness
+  const brandPalette = generateColorPalette(brandColor, mode);
+
+  // Neutral palette - auto-calculate value stop based on color lightness
+  const neutralPalette = generateColorPalette(neutralColor, mode);
+
+  return { brandPalette, neutralPalette };
+}
diff --git a/packages/utils/src/theme/theme-application.ts b/packages/utils/src/theme/theme-application.ts
new file mode 100644
index 0000000..25f1a60
--- /dev/null
+++ b/packages/utils/src/theme/theme-application.ts
@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Theme Application Utilities
+ * Applies generated palettes to CSS variables for Plane's theme system
+ */
+
+import { hexToOKLCH, oklchToCSS, getRelativeLuminance, getPerceptualBrightness } from "./color-conversion";
+import type { OKLCH } from "./color-conversion";
+import { ALPHA_MAPPING, EDITOR_COLORS_LIGHT, EDITOR_COLORS_DARK } from "./constants";
+import { generateThemePalettes } from "./palette-generator";
+import { getBrandMapping, getNeutralMapping, invertPalette } from "./theme-inversion";
+
+/**
+ * Color darkness detection methods
+ */
+export type DarknessDetectionMethod = "wcag" | "oklch" | "perceptual";
+
+/**
+ * Determine if a color is dark using various methods
+ *
+ * Methods:
+ * - 'wcag': Uses WCAG relative luminance (0-1 scale, threshold 0.5) - Most accurate for accessibility
+ * - 'oklch': Uses OKLCH lightness (0-1 scale, threshold 0.5) - Good for perceptual uniformity
+ * - 'perceptual': Uses weighted RGB brightness (0-255 scale, threshold 128) - Simple and fast
+ *
+ * @param brandColor - Brand color in hex format
+ * @param method - Detection method to use (default: 'wcag')
+ * @returns true if the color is dark, false if light
+ */
+export function isColorDark(brandColor: string, method: DarknessDetectionMethod = "wcag"): boolean {
+  switch (method) {
+    case "wcag": {
+      // WCAG relative luminance: 0 (black) to 1 (white)
+      // Threshold of 0.5 means colors darker than 50% gray are considered dark
+      const luminance = getRelativeLuminance(brandColor);
+      return luminance < 0.5;
+    }
+    case "oklch": {
+      // OKLCH lightness: 0 (black) to 1 (white)
+      // Threshold of 0.5 provides good balance for most colors
+      const oklch = hexToOKLCH(brandColor);
+      return oklch.l < 0.5;
+    }
+    case "perceptual": {
+      // Perceptual brightness: 0 (black) to 255 (white)
+      // Threshold of 128 is the midpoint
+      const brightness = getPerceptualBrightness(brandColor);
+      return brightness < 128;
+    }
+    default:
+      return getRelativeLuminance(brandColor) < 0.5;
+  }
+}
+
+/**
+ * Get contrasting text colors for use on a colored background
+ * Returns white text for dark backgrounds, black text for light backgrounds
+ *
+ * @param brandColor - Brand color in hex format
+ * @param method - Detection method to use (default: 'wcag')
+ * @returns Object with text and icon colors in OKLCH format
+ */
+export function getOnColorTextColors(
+  brandColor: string,
+  method: DarknessDetectionMethod = "wcag"
+): {
+  textColor: OKLCH;
+  iconColor: OKLCH;
+} {
+  const isDark = isColorDark(brandColor, method);
+  const white: OKLCH = { l: 1, c: 0, h: 0 };
+  const black: OKLCH = { l: 0, c: 0, h: 0 };
+
+  return {
+    textColor: isDark ? white : black,
+    iconColor: isDark ? black : white,
+  };
+}
+
+/**
+ * Apply custom theme using 2-color palette system
+ * Generates full palettes from brand and neutral colors
+ * and maps them to CSS variables
+ *
+ * @param brandColor - Brand accent color (hex with or without #)
+ * @param neutralColor - Neutral/background color (hex with or without #)
+ * @param mode - 'light' or 'dark' theme mode
+ */
+export function applyCustomTheme(brandColor: string, neutralColor: string, mode: "light" | "dark"): void {
+  if (!brandColor || !neutralColor) {
+    console.warn("applyCustomTheme: brandColor and neutralColor are required");
+    return;
+  }
+
+  const themeElement = document?.querySelector("html");
+  if (!themeElement) {
+    console.warn("applyCustomTheme: html element not found");
+    return;
+  }
+
+  // Generate palettes directly in OKLCH color space
+  const { brandPalette, neutralPalette } = generateThemePalettes(brandColor, neutralColor, mode);
+  const neutralOKLCH = hexToOKLCH(neutralColor);
+
+  // For dark mode, invert the palettes
+  const activeBrandPalette = mode === "dark" ? invertPalette(brandPalette) : brandPalette;
+  const activeNeutralPalette = mode === "dark" ? invertPalette(neutralPalette) : neutralPalette;
+
+  // Get CSS variable mappings
+  const neutralMapping = getNeutralMapping(activeNeutralPalette);
+  const brandMapping = getBrandMapping(activeBrandPalette);
+
+  // Apply base palette colors
+  // This updates the source palette variables that semantic colors reference
+  Object.entries(neutralMapping).forEach(([key, value]) => {
+    themeElement.style.setProperty(`--neutral-${key}`, value);
+  });
+
+  Object.entries(brandMapping).forEach(([key, value]) => {
+    themeElement.style.setProperty(`--brand-${key}`, value);
+  });
+
+  Object.entries(ALPHA_MAPPING).forEach(([key, value]) => {
+    themeElement.style.setProperty(`--alpha-white-${key}`, oklchToCSS(neutralOKLCH, value * 100));
+    themeElement.style.setProperty(`--alpha-black-${key}`, oklchToCSS(neutralOKLCH, value * 100));
+  });
+
+  // Apply contrasting text colors for use on colored backgrounds
+  // Uses WCAG relative luminance for accurate contrast determination
+  const { textColor, iconColor } = getOnColorTextColors(brandColor, "wcag");
+  themeElement.style.setProperty(`--txt-on-color`, oklchToCSS(textColor));
+  themeElement.style.setProperty(`--txt-icon-on-color`, oklchToCSS(iconColor));
+
+  // Apply editor color backgrounds based on mode
+  const editorColors = mode === "dark" ? EDITOR_COLORS_DARK : EDITOR_COLORS_LIGHT;
+  Object.entries(editorColors).forEach(([color, value]) => {
+    themeElement.style.setProperty(`--editor-colors-${color}-background`, value);
+  });
+}
+
+/**
+ * Clear custom theme CSS variables
+ * Removes base palette color overrides
+ */
+export function clearCustomTheme(): void {
+  const themeElement = document?.querySelector("html");
+  if (!themeElement) return;
+
+  // Clear neutral base palette colors
+  const neutralKeys = [
+    "white",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900",
+    "1000",
+    "1100",
+    "1200",
+    "black",
+  ];
+  neutralKeys.forEach((key) => {
+    themeElement.style.removeProperty(`--neutral-${key}`);
+  });
+
+  // Clear brand base palette colors
+  const brandKeys = ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000", "1100", "1200", "default"];
+  brandKeys.forEach((key) => {
+    themeElement.style.removeProperty(`--brand-${key}`);
+  });
+
+  Object.keys(ALPHA_MAPPING).forEach((key) => {
+    themeElement.style.removeProperty(`--alpha-white-${key}`);
+    themeElement.style.removeProperty(`--alpha-black-${key}`);
+  });
+
+  themeElement.style.removeProperty(`--txt-on-color`);
+  themeElement.style.removeProperty(`--txt-icon-on-color`);
+
+  // Clear editor color background overrides
+  Object.keys(EDITOR_COLORS_LIGHT).forEach((color) => {
+    themeElement.style.removeProperty(`--editor-colors-${color}-background`);
+  });
+}
diff --git a/packages/utils/src/theme/theme-inversion.ts b/packages/utils/src/theme/theme-inversion.ts
new file mode 100644
index 0000000..1eb0f6f
--- /dev/null
+++ b/packages/utils/src/theme/theme-inversion.ts
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Theme Inversion Utilities
+ * Handles dark mode palette inversion and mapping
+ */
+
+import { DEFAULT_VALUE_STOP } from "./constants";
+import type { ColorPalette } from "./palette-generator";
+
+/**
+ * Invert a color palette for dark mode
+ * Maps each shade to its opposite (50↔1250, 100↔1200, 200↔1100, etc.)
+ * Shades around the middle are preserved for smooth transitions
+ *
+ * @param palette - 14-shade color palette to invert
+ * @returns Inverted palette with swapped shades
+ */
+export function invertPalette(palette: ColorPalette): ColorPalette {
+  return {
+    50: palette[1000],
+    100: palette[950],
+    200: palette[900],
+    300: palette[850],
+    400: palette[800],
+    500: palette[750],
+    600: palette[700],
+    700: palette[600],
+    750: palette[500],
+    800: palette[400],
+    850: palette[300],
+    900: palette[200],
+    950: palette[100],
+    1000: palette[50],
+  };
+}
+
+/**
+ * Get CSS variable mapping for a theme mode
+ * Maps 14-shade palette to Plane's CSS variable system
+ *
+ * For light mode:
+ * - Uses lighter shades for backgrounds (50-100-200)
+ * - Uses darker shades for text (900, 950, 1000)
+ *
+ * For dark mode:
+ * - Uses inverted palette
+ * - Shifts mapping to lighter shades to avoid cave-like darkness
+ *
+ * @param palette - 14-shade palette (already inverted for dark mode)
+ * @returns Mapping object for neutral color CSS variables
+ */
+export function getNeutralMapping(palette: ColorPalette): Record<string, string> {
+  return {
+    white: palette["50"],
+    "100": palette["100"],
+    "200": palette["200"],
+    "300": palette["300"],
+    "400": palette["400"],
+    "500": palette["500"],
+    "600": palette["600"],
+    "700": palette["700"],
+    "800": palette["750"],
+    "900": palette["800"],
+    "1000": palette["850"],
+    "1100": palette["900"],
+    "1200": palette["950"],
+    black: palette["1000"],
+  };
+}
+
+/**
+ * Get CSS variable mapping for brand colors
+ * Brand colors use active palette (already inverted for dark mode)
+ *
+ * @param palette - 14-shade brand palette
+ * @returns Mapping object for brand color CSS variables
+ */
+export function getBrandMapping(palette: ColorPalette): Record<string, string> {
+  return {
+    "100": palette["100"],
+    "200": palette["200"],
+    "300": palette["300"],
+    "400": palette["400"],
+    "500": palette["500"],
+    "600": palette["600"],
+    "700": palette["700"],
+    "800": palette["750"],
+    "900": palette["800"],
+    "1000": palette["850"],
+    "1100": palette["900"],
+    "1200": palette["950"],
+    default: palette[DEFAULT_VALUE_STOP], // Default brand color (middle-ish)
+  };
+}
diff --git a/packages/utils/src/tlds.ts b/packages/utils/src/tlds.ts
new file mode 100644
index 0000000..6890a42
--- /dev/null
+++ b/packages/utils/src/tlds.ts
@@ -0,0 +1,1447 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export default [
+  "aaa",
+  "aarp",
+  "abb",
+  "abbott",
+  "abbvie",
+  "abc",
+  "able",
+  "abogado",
+  "abudhabi",
+  "ac",
+  "academy",
+  "accenture",
+  "accountant",
+  "accountants",
+  "aco",
+  "actor",
+  "ad",
+  "ads",
+  "adult",
+  "ae",
+  "aeg",
+  "aero",
+  "aetna",
+  "af",
+  "afl",
+  "africa",
+  "ag",
+  "agakhan",
+  "agency",
+  "ai",
+  "aig",
+  "airbus",
+  "airforce",
+  "airtel",
+  "akdn",
+  "al",
+  "alibaba",
+  "alipay",
+  "allfinanz",
+  "allstate",
+  "ally",
+  "alsace",
+  "alstom",
+  "am",
+  "amazon",
+  "americanexpress",
+  "americanfamily",
+  "amex",
+  "amfam",
+  "amica",
+  "amsterdam",
+  "analytics",
+  "android",
+  "anquan",
+  "anz",
+  "ao",
+  "aol",
+  "apartments",
+  "app",
+  "apple",
+  "aq",
+  "aquarelle",
+  "ar",
+  "arab",
+  "aramco",
+  "archi",
+  "army",
+  "arpa",
+  "art",
+  "arte",
+  "as",
+  "asda",
+  "asia",
+  "associates",
+  "at",
+  "athleta",
+  "attorney",
+  "au",
+  "auction",
+  "audi",
+  "audible",
+  "audio",
+  "auspost",
+  "author",
+  "auto",
+  "autos",
+  "aw",
+  "aws",
+  "ax",
+  "axa",
+  "az",
+  "azure",
+  "ba",
+  "baby",
+  "baidu",
+  "banamex",
+  "band",
+  "bank",
+  "bar",
+  "barcelona",
+  "barclaycard",
+  "barclays",
+  "barefoot",
+  "bargains",
+  "baseball",
+  "basketball",
+  "bauhaus",
+  "bayern",
+  "bb",
+  "bbc",
+  "bbt",
+  "bbva",
+  "bcg",
+  "bcn",
+  "bd",
+  "be",
+  "beats",
+  "beauty",
+  "beer",
+  "berlin",
+  "best",
+  "bestbuy",
+  "bet",
+  "bf",
+  "bg",
+  "bh",
+  "bharti",
+  "bi",
+  "bible",
+  "bid",
+  "bike",
+  "bing",
+  "bingo",
+  "bio",
+  "biz",
+  "bj",
+  "black",
+  "blackfriday",
+  "blockbuster",
+  "blog",
+  "bloomberg",
+  "blue",
+  "bm",
+  "bms",
+  "bmw",
+  "bn",
+  "bnpparibas",
+  "bo",
+  "boats",
+  "boehringer",
+  "bofa",
+  "bom",
+  "bond",
+  "boo",
+  "book",
+  "booking",
+  "bosch",
+  "bostik",
+  "boston",
+  "bot",
+  "boutique",
+  "box",
+  "br",
+  "bradesco",
+  "bridgestone",
+  "broadway",
+  "broker",
+  "brother",
+  "brussels",
+  "bs",
+  "bt",
+  "build",
+  "builders",
+  "business",
+  "buy",
+  "buzz",
+  "bv",
+  "bw",
+  "by",
+  "bz",
+  "bzh",
+  "ca",
+  "cab",
+  "cafe",
+  "cal",
+  "call",
+  "calvinklein",
+  "cam",
+  "camera",
+  "camp",
+  "canon",
+  "capetown",
+  "capital",
+  "capitalone",
+  "car",
+  "caravan",
+  "cards",
+  "care",
+  "career",
+  "careers",
+  "cars",
+  "casa",
+  "case",
+  "cash",
+  "casino",
+  "cat",
+  "catering",
+  "catholic",
+  "cba",
+  "cbn",
+  "cbre",
+  "cc",
+  "cd",
+  "center",
+  "ceo",
+  "cern",
+  "cf",
+  "cfa",
+  "cfd",
+  "cg",
+  "ch",
+  "chanel",
+  "channel",
+  "charity",
+  "chase",
+  "chat",
+  "cheap",
+  "chintai",
+  "christmas",
+  "chrome",
+  "church",
+  "ci",
+  "cipriani",
+  "circle",
+  "cisco",
+  "citadel",
+  "citi",
+  "citic",
+  "city",
+  "ck",
+  "cl",
+  "claims",
+  "cleaning",
+  "click",
+  "clinic",
+  "clinique",
+  "clothing",
+  "cloud",
+  "club",
+  "clubmed",
+  "cm",
+  "cn",
+  "co",
+  "coach",
+  "codes",
+  "coffee",
+  "college",
+  "cologne",
+  "com",
+  "commbank",
+  "community",
+  "company",
+  "compare",
+  "computer",
+  "comsec",
+  "condos",
+  "construction",
+  "consulting",
+  "contact",
+  "contractors",
+  "cooking",
+  "cool",
+  "coop",
+  "corsica",
+  "country",
+  "coupon",
+  "coupons",
+  "courses",
+  "cpa",
+  "cr",
+  "credit",
+  "creditcard",
+  "creditunion",
+  "cricket",
+  "crown",
+  "crs",
+  "cruise",
+  "cruises",
+  "cu",
+  "cuisinella",
+  "cv",
+  "cw",
+  "cx",
+  "cy",
+  "cymru",
+  "cyou",
+  "cz",
+  "dad",
+  "dance",
+  "data",
+  "date",
+  "dating",
+  "datsun",
+  "day",
+  "dclk",
+  "dds",
+  "de",
+  "deal",
+  "dealer",
+  "deals",
+  "degree",
+  "delivery",
+  "dell",
+  "deloitte",
+  "delta",
+  "democrat",
+  "dental",
+  "dentist",
+  "desi",
+  "design",
+  "dev",
+  "dhl",
+  "diamonds",
+  "diet",
+  "digital",
+  "direct",
+  "directory",
+  "discount",
+  "discover",
+  "dish",
+  "diy",
+  "dj",
+  "dk",
+  "dm",
+  "dnp",
+  "do",
+  "docs",
+  "doctor",
+  "dog",
+  "domains",
+  "dot",
+  "download",
+  "drive",
+  "dtv",
+  "dubai",
+  "dunlop",
+  "dupont",
+  "durban",
+  "dvag",
+  "dvr",
+  "dz",
+  "earth",
+  "eat",
+  "ec",
+  "eco",
+  "edeka",
+  "edu",
+  "education",
+  "ee",
+  "eg",
+  "email",
+  "emerck",
+  "energy",
+  "engineer",
+  "engineering",
+  "enterprises",
+  "epson",
+  "equipment",
+  "er",
+  "ericsson",
+  "erni",
+  "es",
+  "esq",
+  "estate",
+  "et",
+  "eu",
+  "eurovision",
+  "eus",
+  "events",
+  "exchange",
+  "expert",
+  "exposed",
+  "express",
+  "extraspace",
+  "fage",
+  "fail",
+  "fairwinds",
+  "faith",
+  "family",
+  "fan",
+  "fans",
+  "farm",
+  "farmers",
+  "fashion",
+  "fast",
+  "fedex",
+  "feedback",
+  "ferrari",
+  "ferrero",
+  "fi",
+  "fidelity",
+  "fido",
+  "film",
+  "final",
+  "finance",
+  "financial",
+  "fire",
+  "firestone",
+  "firmdale",
+  "fish",
+  "fishing",
+  "fit",
+  "fitness",
+  "fj",
+  "fk",
+  "flickr",
+  "flights",
+  "flir",
+  "florist",
+  "flowers",
+  "fly",
+  "fm",
+  "fo",
+  "foo",
+  "food",
+  "football",
+  "ford",
+  "forex",
+  "forsale",
+  "forum",
+  "foundation",
+  "fox",
+  "fr",
+  "free",
+  "fresenius",
+  "frl",
+  "frogans",
+  "frontier",
+  "ftr",
+  "fujitsu",
+  "fun",
+  "fund",
+  "furniture",
+  "futbol",
+  "fyi",
+  "ga",
+  "gal",
+  "gallery",
+  "gallo",
+  "gallup",
+  "game",
+  "games",
+  "gap",
+  "garden",
+  "gay",
+  "gb",
+  "gbiz",
+  "gd",
+  "gdn",
+  "ge",
+  "gea",
+  "gent",
+  "genting",
+  "george",
+  "gf",
+  "gg",
+  "ggee",
+  "gh",
+  "gi",
+  "gift",
+  "gifts",
+  "gives",
+  "giving",
+  "gl",
+  "glass",
+  "gle",
+  "global",
+  "globo",
+  "gm",
+  "gmail",
+  "gmbh",
+  "gmo",
+  "gmx",
+  "gn",
+  "godaddy",
+  "gold",
+  "goldpoint",
+  "golf",
+  "goo",
+  "goodyear",
+  "goog",
+  "google",
+  "gop",
+  "got",
+  "gov",
+  "gp",
+  "gq",
+  "gr",
+  "grainger",
+  "graphics",
+  "gratis",
+  "green",
+  "gripe",
+  "grocery",
+  "group",
+  "gs",
+  "gt",
+  "gu",
+  "gucci",
+  "guge",
+  "guide",
+  "guitars",
+  "guru",
+  "gw",
+  "gy",
+  "hair",
+  "hamburg",
+  "hangout",
+  "haus",
+  "hbo",
+  "hdfc",
+  "hdfcbank",
+  "health",
+  "healthcare",
+  "help",
+  "helsinki",
+  "here",
+  "hermes",
+  "hiphop",
+  "hisamitsu",
+  "hitachi",
+  "hiv",
+  "hk",
+  "hkt",
+  "hm",
+  "hn",
+  "hockey",
+  "holdings",
+  "holiday",
+  "homedepot",
+  "homegoods",
+  "homes",
+  "homesense",
+  "honda",
+  "horse",
+  "hospital",
+  "host",
+  "hosting",
+  "hot",
+  "hotels",
+  "hotmail",
+  "house",
+  "how",
+  "hr",
+  "hsbc",
+  "ht",
+  "hu",
+  "hughes",
+  "hyatt",
+  "hyundai",
+  "ibm",
+  "icbc",
+  "ice",
+  "icu",
+  "id",
+  "ie",
+  "ieee",
+  "ifm",
+  "ikano",
+  "il",
+  "im",
+  "imamat",
+  "imdb",
+  "immo",
+  "immobilien",
+  "in",
+  "inc",
+  "industries",
+  "infiniti",
+  "info",
+  "ing",
+  "ink",
+  "institute",
+  "insurance",
+  "insure",
+  "int",
+  "international",
+  "intuit",
+  "investments",
+  "io",
+  "ipiranga",
+  "iq",
+  "ir",
+  "irish",
+  "is",
+  "ismaili",
+  "ist",
+  "istanbul",
+  "it",
+  "itau",
+  "itv",
+  "jaguar",
+  "java",
+  "jcb",
+  "je",
+  "jeep",
+  "jetzt",
+  "jewelry",
+  "jio",
+  "jll",
+  "jm",
+  "jmp",
+  "jnj",
+  "jo",
+  "jobs",
+  "joburg",
+  "jot",
+  "joy",
+  "jp",
+  "jpmorgan",
+  "jprs",
+  "juegos",
+  "juniper",
+  "kaufen",
+  "kddi",
+  "ke",
+  "kerryhotels",
+  "kerryproperties",
+  "kfh",
+  "kg",
+  "kh",
+  "ki",
+  "kia",
+  "kids",
+  "kim",
+  "kindle",
+  "kitchen",
+  "kiwi",
+  "km",
+  "kn",
+  "koeln",
+  "komatsu",
+  "kosher",
+  "kp",
+  "kpmg",
+  "kpn",
+  "kr",
+  "krd",
+  "kred",
+  "kuokgroup",
+  "kw",
+  "ky",
+  "kyoto",
+  "kz",
+  "la",
+  "lacaixa",
+  "lamborghini",
+  "lamer",
+  "land",
+  "landrover",
+  "lanxess",
+  "lasalle",
+  "lat",
+  "latino",
+  "latrobe",
+  "law",
+  "lawyer",
+  "lb",
+  "lc",
+  "lds",
+  "lease",
+  "leclerc",
+  "lefrak",
+  "legal",
+  "lego",
+  "lexus",
+  "lgbt",
+  "li",
+  "lidl",
+  "life",
+  "lifeinsurance",
+  "lifestyle",
+  "lighting",
+  "like",
+  "lilly",
+  "limited",
+  "limo",
+  "lincoln",
+  "link",
+  "live",
+  "living",
+  "lk",
+  "llc",
+  "llp",
+  "loan",
+  "loans",
+  "locker",
+  "locus",
+  "lol",
+  "london",
+  "lotte",
+  "lotto",
+  "love",
+  "lpl",
+  "lplfinancial",
+  "lr",
+  "ls",
+  "lt",
+  "ltd",
+  "ltda",
+  "lu",
+  "lundbeck",
+  "luxe",
+  "luxury",
+  "lv",
+  "ly",
+  "ma",
+  "madrid",
+  "maif",
+  "maison",
+  "makeup",
+  "man",
+  "management",
+  "mango",
+  "map",
+  "market",
+  "marketing",
+  "markets",
+  "marriott",
+  "marshalls",
+  "mattel",
+  "mba",
+  "mc",
+  "mckinsey",
+  "md",
+  "me",
+  "med",
+  "media",
+  "meet",
+  "melbourne",
+  "meme",
+  "memorial",
+  "men",
+  "menu",
+  "merckmsd",
+  "mg",
+  "mh",
+  "miami",
+  "microsoft",
+  "mil",
+  "mini",
+  "mint",
+  "mit",
+  "mitsubishi",
+  "mk",
+  "ml",
+  "mlb",
+  "mls",
+  "mm",
+  "mma",
+  "mn",
+  "mo",
+  "mobi",
+  "mobile",
+  "moda",
+  "moe",
+  "moi",
+  "mom",
+  "monash",
+  "money",
+  "monster",
+  "mormon",
+  "mortgage",
+  "moscow",
+  "moto",
+  "motorcycles",
+  "mov",
+  "movie",
+  "mp",
+  "mq",
+  "mr",
+  "ms",
+  "msd",
+  "mt",
+  "mtn",
+  "mtr",
+  "mu",
+  "museum",
+  "music",
+  "mv",
+  "mw",
+  "mx",
+  "my",
+  "mz",
+  "na",
+  "nab",
+  "nagoya",
+  "name",
+  "navy",
+  "nba",
+  "nc",
+  "ne",
+  "nec",
+  "net",
+  "netbank",
+  "netflix",
+  "network",
+  "neustar",
+  "new",
+  "news",
+  "next",
+  "nextdirect",
+  "nexus",
+  "nf",
+  "nfl",
+  "ng",
+  "ngo",
+  "nhk",
+  "ni",
+  "nico",
+  "nike",
+  "nikon",
+  "ninja",
+  "nissan",
+  "nissay",
+  "nl",
+  "no",
+  "nokia",
+  "norton",
+  "now",
+  "nowruz",
+  "nowtv",
+  "np",
+  "nr",
+  "nra",
+  "nrw",
+  "ntt",
+  "nu",
+  "nyc",
+  "nz",
+  "obi",
+  "observer",
+  "office",
+  "okinawa",
+  "olayan",
+  "olayangroup",
+  "ollo",
+  "om",
+  "omega",
+  "one",
+  "ong",
+  "onl",
+  "online",
+  "ooo",
+  "open",
+  "oracle",
+  "orange",
+  "org",
+  "organic",
+  "origins",
+  "osaka",
+  "otsuka",
+  "ott",
+  "ovh",
+  "pa",
+  "page",
+  "panasonic",
+  "paris",
+  "pars",
+  "partners",
+  "parts",
+  "party",
+  "pay",
+  "pccw",
+  "pe",
+  "pet",
+  "pf",
+  "pfizer",
+  "pg",
+  "ph",
+  "pharmacy",
+  "phd",
+  "philips",
+  "phone",
+  "photo",
+  "photography",
+  "photos",
+  "physio",
+  "pics",
+  "pictet",
+  "pictures",
+  "pid",
+  "pin",
+  "ping",
+  "pink",
+  "pioneer",
+  "pizza",
+  "pk",
+  "pl",
+  "place",
+  "play",
+  "playstation",
+  "plumbing",
+  "plus",
+  "pm",
+  "pn",
+  "pnc",
+  "pohl",
+  "poker",
+  "politie",
+  "porn",
+  "post",
+  "pr",
+  "praxi",
+  "press",
+  "prime",
+  "pro",
+  "prod",
+  "productions",
+  "prof",
+  "progressive",
+  "promo",
+  "properties",
+  "property",
+  "protection",
+  "pru",
+  "prudential",
+  "ps",
+  "pt",
+  "pub",
+  "pw",
+  "pwc",
+  "py",
+  "qa",
+  "qpon",
+  "quebec",
+  "quest",
+  "racing",
+  "radio",
+  "re",
+  "read",
+  "realestate",
+  "realtor",
+  "realty",
+  "recipes",
+  "red",
+  "redumbrella",
+  "rehab",
+  "reise",
+  "reisen",
+  "reit",
+  "reliance",
+  "ren",
+  "rent",
+  "rentals",
+  "repair",
+  "report",
+  "republican",
+  "rest",
+  "restaurant",
+  "review",
+  "reviews",
+  "rexroth",
+  "rich",
+  "richardli",
+  "ricoh",
+  "ril",
+  "rio",
+  "rip",
+  "ro",
+  "rocks",
+  "rodeo",
+  "rogers",
+  "room",
+  "rs",
+  "rsvp",
+  "ru",
+  "rugby",
+  "ruhr",
+  "run",
+  "rw",
+  "rwe",
+  "ryukyu",
+  "sa",
+  "saarland",
+  "safe",
+  "safety",
+  "sakura",
+  "sale",
+  "salon",
+  "samsclub",
+  "samsung",
+  "sandvik",
+  "sandvikcoromant",
+  "sanofi",
+  "sap",
+  "sarl",
+  "sas",
+  "save",
+  "saxo",
+  "sb",
+  "sbi",
+  "sbs",
+  "sc",
+  "scb",
+  "schaeffler",
+  "schmidt",
+  "scholarships",
+  "school",
+  "schule",
+  "schwarz",
+  "science",
+  "scot",
+  "sd",
+  "se",
+  "search",
+  "seat",
+  "secure",
+  "security",
+  "seek",
+  "select",
+  "sener",
+  "services",
+  "seven",
+  "sew",
+  "sex",
+  "sexy",
+  "sfr",
+  "sg",
+  "sh",
+  "shangrila",
+  "sharp",
+  "shell",
+  "shia",
+  "shiksha",
+  "shoes",
+  "shop",
+  "shopping",
+  "shouji",
+  "show",
+  "si",
+  "silk",
+  "sina",
+  "singles",
+  "site",
+  "sj",
+  "sk",
+  "ski",
+  "skin",
+  "sky",
+  "skype",
+  "sl",
+  "sling",
+  "sm",
+  "smart",
+  "smile",
+  "sn",
+  "sncf",
+  "so",
+  "soccer",
+  "social",
+  "softbank",
+  "software",
+  "sohu",
+  "solar",
+  "solutions",
+  "song",
+  "sony",
+  "soy",
+  "spa",
+  "space",
+  "sport",
+  "spot",
+  "sr",
+  "srl",
+  "ss",
+  "st",
+  "stada",
+  "staples",
+  "star",
+  "statebank",
+  "statefarm",
+  "stc",
+  "stcgroup",
+  "stockholm",
+  "storage",
+  "store",
+  "stream",
+  "studio",
+  "study",
+  "style",
+  "su",
+  "sucks",
+  "supplies",
+  "supply",
+  "support",
+  "surf",
+  "surgery",
+  "suzuki",
+  "sv",
+  "swatch",
+  "swiss",
+  "sx",
+  "sy",
+  "sydney",
+  "systems",
+  "sz",
+  "tab",
+  "taipei",
+  "talk",
+  "taobao",
+  "target",
+  "tatamotors",
+  "tatar",
+  "tattoo",
+  "tax",
+  "taxi",
+  "tc",
+  "tci",
+  "td",
+  "tdk",
+  "team",
+  "tech",
+  "technology",
+  "tel",
+  "temasek",
+  "tennis",
+  "teva",
+  "tf",
+  "tg",
+  "th",
+  "thd",
+  "theater",
+  "theatre",
+  "tiaa",
+  "tickets",
+  "tienda",
+  "tips",
+  "tires",
+  "tirol",
+  "tj",
+  "tjmaxx",
+  "tjx",
+  "tk",
+  "tkmaxx",
+  "tl",
+  "tm",
+  "tmall",
+  "tn",
+  "to",
+  "today",
+  "tokyo",
+  "tools",
+  "top",
+  "toray",
+  "toshiba",
+  "total",
+  "tours",
+  "town",
+  "toyota",
+  "toys",
+  "tr",
+  "trade",
+  "trading",
+  "training",
+  "travel",
+  "travelers",
+  "travelersinsurance",
+  "trust",
+  "trv",
+  "tt",
+  "tube",
+  "tui",
+  "tunes",
+  "tushu",
+  "tv",
+  "tvs",
+  "tw",
+  "tz",
+  "ua",
+  "ubank",
+  "ubs",
+  "ug",
+  "uk",
+  "unicom",
+  "university",
+  "uno",
+  "uol",
+  "ups",
+  "us",
+  "uy",
+  "uz",
+  "va",
+  "vacations",
+  "vana",
+  "vanguard",
+  "vc",
+  "ve",
+  "vegas",
+  "ventures",
+  "verisign",
+  "vermögensberater",
+  "vermögensberatung",
+  "versicherung",
+  "vet",
+  "vg",
+  "vi",
+  "viajes",
+  "video",
+  "vig",
+  "viking",
+  "villas",
+  "vin",
+  "vip",
+  "virgin",
+  "visa",
+  "vision",
+  "viva",
+  "vivo",
+  "vlaanderen",
+  "vn",
+  "vodka",
+  "volvo",
+  "vote",
+  "voting",
+  "voto",
+  "voyage",
+  "vu",
+  "wales",
+  "walmart",
+  "walter",
+  "wang",
+  "wanggou",
+  "watch",
+  "watches",
+  "weather",
+  "weatherchannel",
+  "webcam",
+  "weber",
+  "website",
+  "wed",
+  "wedding",
+  "weibo",
+  "weir",
+  "wf",
+  "whoswho",
+  "wien",
+  "wiki",
+  "williamhill",
+  "win",
+  "windows",
+  "wine",
+  "winners",
+  "wme",
+  "wolterskluwer",
+  "woodside",
+  "work",
+  "works",
+  "world",
+  "wow",
+  "ws",
+  "wtc",
+  "wtf",
+  "xbox",
+  "xerox",
+  "xihuan",
+  "xin",
+  "xxx",
+  "xyz",
+  "yachts",
+  "yahoo",
+  "yamaxun",
+  "yandex",
+  "ye",
+  "yodobashi",
+  "yoga",
+  "yokohama",
+  "you",
+  "youtube",
+  "yt",
+  "yun",
+  "za",
+  "zappos",
+  "zara",
+  "zero",
+  "zip",
+  "zm",
+  "zone",
+  "zuerich",
+  "zw",
+  "ελ",
+  "ευ",
+  "бг",
+  "бел",
+  "дети",
+  "ею",
+  "католик",
+  "ком",
+  "мкд",
+  "мон",
+  "москва",
+  "онлайн",
+  "орг",
+  "рус",
+  "рф",
+  "сайт",
+  "срб",
+  "укр",
+  "қаз",
+  "հայ",
+  "ישראל",
+  "קום",
+  "ابوظبي",
+  "ارامكو",
+  "الاردن",
+  "البحرين",
+  "الجزائر",
+  "السعودية",
+  "العليان",
+  "المغرب",
+  "امارات",
+  "ایران",
+  "بارت",
+  "بازار",
+  "بيتك",
+  "بھارت",
+  "تونس",
+  "سودان",
+  "سورية",
+  "شبكة",
+  "عراق",
+  "عرب",
+  "عمان",
+  "فلسطين",
+  "قطر",
+  "كاثوليك",
+  "كوم",
+  "مصر",
+  "مليسيا",
+  "موريتانيا",
+  "موقع",
+  "همراه",
+  "پاکستان",
+  "ڀارت",
+  "कॉम",
+  "नेट",
+  "भारत",
+  "भारतम्",
+  "भारोत",
+  "संगठन",
+  "বাংলা",
+  "ভারত",
+  "ভাৰত",
+  "ਭਾਰਤ",
+  "ભારત",
+  "ଭାରତ",
+  "இந்தியா",
+  "இலங்கை",
+  "சிங்கப்பூர்",
+  "భారత్",
+  "ಭಾರತ",
+  "ഭാരതം",
+  "ලංකා",
+  "คอม",
+  "ไทย",
+  "ລາວ",
+  "გე",
+  "みんな",
+  "アマゾン",
+  "クラウド",
+  "グーグル",
+  "コム",
+  "ストア",
+  "セール",
+  "ファッション",
+  "ポイント",
+  "世界",
+  "中信",
+  "中国",
+  "中國",
+  "中文网",
+  "亚马逊",
+  "企业",
+  "佛山",
+  "信息",
+  "健康",
+  "八卦",
+  "公司",
+  "公益",
+  "台湾",
+  "台灣",
+  "商城",
+  "商店",
+  "商标",
+  "嘉里",
+  "嘉里大酒店",
+  "在线",
+  "大拿",
+  "天主教",
+  "娱乐",
+  "家電",
+  "广东",
+  "微博",
+  "慈善",
+  "我爱你",
+  "手机",
+  "招聘",
+  "政务",
+  "政府",
+  "新加坡",
+  "新闻",
+  "时尚",
+  "書籍",
+  "机构",
+  "淡马锡",
+  "游戏",
+  "澳門",
+  "点看",
+  "移动",
+  "组织机构",
+  "网址",
+  "网店",
+  "网站",
+  "网络",
+  "联通",
+  "谷歌",
+  "购物",
+  "通販",
+  "集团",
+  "電訊盈科",
+  "飞利浦",
+  "食品",
+  "餐厅",
+  "香格里拉",
+  "香港",
+  "닷넷",
+  "닷컴",
+  "삼성",
+  "한국",
+];
diff --git a/packages/utils/src/url.ts b/packages/utils/src/url.ts
new file mode 100644
index 0000000..522a626
--- /dev/null
+++ b/packages/utils/src/url.ts
@@ -0,0 +1,330 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import tlds from "./tlds";
+
+const PROTOCOL_REGEX = /^[a-zA-Z]+:\/\//;
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const LOCALHOST_ADDRESSES = ["localhost", "127.0.0.1", "0.0.0.0"];
+const HTTP_PROTOCOL = "http://";
+const MAILTO_PROTOCOL = "mailto:";
+const DEFAULT_PROTOCOL = HTTP_PROTOCOL;
+// IPv4 regex - matches 0.0.0.0 to 255.255.255.255
+const IPV4_REGEX = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+// IPv6 regex - comprehensive pattern for all IPv6 formats
+const IPV6_REGEX =
+  /^(?:(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,7}:|(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:(?::[0-9a-fA-F]{1,4}){1,6}|:(?::[0-9a-fA-F]{1,4}){1,7}|::|fe80:(?::[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(?:ffff(?::0{1,4}){0,1}:){0,1}(?:(?:25[0-5]|(?:2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(?:25[0-5]|(?:2[0-4]|1{0,1}[0-9]){0,1}[0-9])|(?:[0-9a-fA-F]{1,4}:){1,4}:(?:(?:25[0-5]|(?:2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(?:25[0-5]|(?:2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/;
+
+/**
+ * Checks if a string is a valid IPv4 address
+ * @param ip - String to validate as IPv4
+ * @returns True if valid IPv4 address
+ */
+export function isValidIPv4(ip: string): boolean {
+  if (!ip || typeof ip !== "string") return false;
+  return IPV4_REGEX.test(ip);
+}
+
+/**
+ * Checks if a string is a valid IPv6 address
+ * @param ip - String to validate as IPv6
+ * @returns True if valid IPv6 address
+ */
+export function isValidIPv6(ip: string): boolean {
+  if (!ip || typeof ip !== "string") return false;
+
+  // Remove brackets if present (for URL format like [::1])
+  const cleanIP = ip.replace(/^\[|\]$/g, "");
+
+  return IPV6_REGEX.test(cleanIP);
+}
+
+/**
+ * Checks if a string is a valid IP address (IPv4 or IPv6)
+ * @param ip - String to validate as IP address
+ * @returns Object with validation results
+ */
+export function validateIPAddress(ip: string): {
+  isValid: boolean;
+  type: "ipv4" | "ipv6" | "invalid";
+  formatted?: string;
+} {
+  if (!ip || typeof ip !== "string") {
+    return { isValid: false, type: "invalid" };
+  }
+
+  if (isValidIPv4(ip)) {
+    return { isValid: true, type: "ipv4", formatted: ip };
+  }
+
+  if (isValidIPv6(ip)) {
+    const formatted = ip.replace(/^\[|\]$/g, ""); // Remove brackets
+    return { isValid: true, type: "ipv6", formatted };
+  }
+
+  return { isValid: false, type: "invalid" };
+}
+
+/**
+ * Checks if a URL string points to a localhost address.
+ * @param url - The URL string to check
+ * @returns True if the URL points to localhost, false otherwise
+ */
+export function isLocalhost(url: string): boolean {
+  const hostname = extractHostname(url);
+  return LOCALHOST_ADDRESSES.includes(hostname);
+}
+
+/**
+ * Extracts hostname from a URL string by removing protocol, path, query, hash, and port.
+ * @param url - The URL string to extract hostname from
+ * @returns The cleaned hostname
+ */
+export function extractHostname(url: string): string {
+  let hostname = url;
+
+  // Remove protocol if present
+  if (hostname.includes("://")) {
+    hostname = hostname.split("://")[1];
+  }
+
+  // Remove auth credentials if present
+  const atIndex = hostname.indexOf("@");
+  if (atIndex !== -1) {
+    hostname = hostname.substring(atIndex + 1);
+  }
+
+  // Remove path, query, hash, and port in one pass
+  hostname = hostname.split("/")[0].split("?")[0].split("#")[0].split(":")[0];
+
+  return hostname;
+}
+
+/**
+ * Returns a readable representation of a URL by stripping the protocol
+ * and any trailing slash. For valid URLs, only the host is returned.
+ * Invalid URLs are sanitized by removing the protocol and trailing slash.
+ *
+ * @param url - The URL string to format
+ * @returns The formatted domain for display
+ */
+export function formatURLForDisplay(url: string): string {
+  if (!url) return "";
+
+  try {
+    return new URL(url).host;
+  } catch (_error) {
+    return extractHostname(url);
+  }
+}
+
+/**
+ * Extracts and validates the TLD (Top Level Domain) from a URL string.
+ *
+ * @param {string} urlString - The string to extract TLD from
+ * @returns {string} The valid TLD if found, empty string otherwise
+ *
+ * @description
+ * The function performs the following steps:
+ * 1. Basic validation (rejects empty strings, strings starting/ending with dots)
+ * 2. URL component cleaning:
+ *    - Removes protocol (if present)
+ *    - Removes auth credentials (if present)
+ *    - Removes path component (everything after '/')
+ *    - Removes query parameters (everything after '?')
+ *    - Removes hash fragments (everything after '#')
+ *    - Removes port numbers (everything after ':')
+ * 3. Validates the TLD against a list of known TLDs
+ */
+
+export function extractTLD(urlString: string): string {
+  if (!urlString || urlString.startsWith(".") || urlString.endsWith(".")) {
+    return "";
+  }
+
+  const hostname = extractHostname(urlString);
+  const hostnameParts = hostname.split(".");
+
+  if (hostnameParts.length >= 2) {
+    const potentialTLD = hostnameParts[hostnameParts.length - 1].toLowerCase();
+    return tlds.includes(potentialTLD) ? potentialTLD : "";
+  }
+  return "";
+}
+
+/**
+ * Interface representing the cleaned components of a URL.
+ * @interface IURLComponents
+ * @property {string} protocol - The URL protocol (e.g., 'http', 'https'), if protocol is not present, Always contains the actual protocol used.
+ * @property {string} subdomain - The subdomain part of the URL (e.g., 'blog' in 'blog.example.com')
+ * @property {string} rootDomain - The root domain name (e.g., 'example' in 'blog.example.com')
+ * @property {string} tld - The top-level domain (e.g., 'com', 'org')
+ * @property {string} pathname - The URL path excluding search params and hash, empty if pathname is '/'
+ * @property {URL} full - The original URL object with all native URL properties
+ */
+export interface IURLComponents {
+  protocol: string;
+  subdomain: string;
+  rootDomain: string;
+  tld: string;
+  pathname: string;
+  full: URL;
+}
+
+/**
+ * Process a URL object to extract its components
+ */
+export function processURL(url: URL): IURLComponents {
+  const protocol = url.protocol.slice(0, -1);
+  const hostnameParts = url.hostname.split(".");
+
+  let subdomain = "";
+  let rootDomain = "";
+  let tld = "";
+
+  if (hostnameParts.length === 1) {
+    rootDomain = hostnameParts[0]; // For cases like 'localhost'
+  } else if (hostnameParts.length >= 2) {
+    tld = hostnameParts[hostnameParts.length - 1];
+    rootDomain = hostnameParts[hostnameParts.length - 2];
+
+    if (hostnameParts.length > 2) {
+      subdomain = hostnameParts.slice(0, -2).join(".");
+    }
+  }
+
+  return {
+    protocol,
+    subdomain,
+    rootDomain,
+    tld,
+    pathname: url.pathname === "/" ? "" : url.pathname,
+    full: url,
+  };
+}
+
+/**
+ * Extracts components from a URL object or string.
+ *
+ * @param {URL | string} url - The URL object or string to extract components from
+ * @returns {IURLComponents | undefined} URL components or undefined if invalid
+ *
+ * @example
+ * // With URL object
+ * const url = new URL('https://blog.example.com/posts');
+ * extractURLComponents(url);
+ *
+ * // With string
+ * extractURLComponents('blog.example.com/posts');
+ *
+ * // Example output:
+ * // {
+ * //   protocol: 'https',      // empty string if protocol is not present
+ * //   subdomain: 'blog',
+ * //   rootDomain: 'example',
+ * //   tld: 'com',
+ * //   pathname: 'posts',
+ * //   full: URL {}           // The parsed URL object
+ * // }
+ */
+export function extractURLComponents(url: URL | string): IURLComponents | undefined {
+  // If URL object is passed directly
+  if (typeof url !== "string") {
+    return processURL(url);
+  }
+
+  // Handle empty strings
+  if (!url || url.trim() === "") return undefined;
+
+  // Input length validation for security
+  if (url.length > 2048) return undefined;
+
+  const urlLower = url.toLowerCase();
+
+  try {
+    // 1. Handle web URLs with protocols (including mailto, http, https, ftp, etc.)
+    if (PROTOCOL_REGEX.test(urlLower) || urlLower.startsWith(MAILTO_PROTOCOL)) {
+      return processURL(new URL(url));
+    }
+
+    // 2. Check if it's an email address
+    if (EMAIL_REGEX.test(urlLower)) {
+      return processURL(new URL(`${MAILTO_PROTOCOL}${url}`));
+    }
+
+    // 3. URL without protocol but valid domain or IP address or TLD
+    if (isLocalhost(urlLower) || isValidIPv4(urlLower) || isValidIPv6(urlLower) || extractTLD(urlLower)) {
+      return processURL(new URL(`${DEFAULT_PROTOCOL}${urlLower}`));
+    }
+
+    return undefined;
+  } catch (_error) {
+    return undefined;
+  }
+}
+
+/**
+ * Validates that a next_path parameter is safe for redirection.
+ * Only allows relative paths starting with "/" to prevent open redirect vulnerabilities.
+ *
+ * @param url - The next_path URL to validate
+ * @returns True if the URL is a safe relative path, false otherwise
+ *
+ * @example
+ * isValidNextPath("/dashboard") // true
+ * isValidNextPath("/workspace/123") // true
+ * isValidNextPath("https://malicious.com") // false
+ * isValidNextPath("//malicious.com") // false (protocol-relative)
+ * isValidNextPath("javascript:alert(1)") // false
+ * isValidNextPath("") // false
+ * isValidNextPath("dashboard") // false (must start with /)
+ * isValidNextPath("\\malicious") // false (backslash)
+ * isValidNextPath("  /dashboard  ") // true (trimmed)
+ */
+export function isValidNextPath(url: string): boolean {
+  if (!url || typeof url !== "string") return false;
+
+  // Trim leading/trailing whitespace
+  const trimmedUrl = url.trim();
+
+  if (!trimmedUrl) return false;
+
+  // Only allow relative paths starting with /
+  if (!trimmedUrl.startsWith("/")) return false;
+
+  // Block protocol-relative URLs (//example.com) - open redirect vulnerability
+  if (trimmedUrl.startsWith("//")) return false;
+
+  // Block backslashes which can be used for path traversal or Windows-style paths
+  if (trimmedUrl.includes("\\")) return false;
+
+  try {
+    // Use URL constructor with a dummy base to normalize and validate the path
+    const normalizedUrl = new URL(trimmedUrl, "http://localhost");
+
+    // Ensure the path is still relative (no host change from our dummy base)
+    if (normalizedUrl.hostname !== "localhost" || normalizedUrl.protocol !== "http:") {
+      return false;
+    }
+
+    // Use the normalized pathname for additional security checks
+    const pathname = normalizedUrl.pathname;
+
+    // Additional security checks for malicious patterns in the normalized path
+    const maliciousPatterns = [
+      /javascript:/i,
+      /data:/i,
+      /vbscript:/i,
+      /<script/i,
+      /on\w+=/i, // Event handlers like onclick=, onload=
+    ];
+
+    return !maliciousPatterns.some((pattern) => pattern.test(pathname));
+  } catch (_error) {
+    // If URL constructor fails, it's an invalid path
+    return false;
+  }
+}
diff --git a/packages/utils/src/validation.ts b/packages/utils/src/validation.ts
new file mode 100644
index 0000000..2b61a4a
--- /dev/null
+++ b/packages/utils/src/validation.ts
@@ -0,0 +1,230 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+/**
+ * Input Validation Utilities
+ * Following OWASP Input Validation best practices using allowlist approach
+ *
+ * Security: Blocks injection-risk characters: < > ' " % # { } [ ] * ^ !
+ * These patterns are designed to prevent XSS, SQL injection, template injection,
+ * and other security vulnerabilities while maintaining good UX
+ */
+
+// =============================================================================
+// VALIDATION REGEX PATTERNS
+// =============================================================================
+
+/**
+ * Person Name Pattern (for first_name, last_name)
+ * Allows: Unicode letters (\p{L}), spaces, hyphens, apostrophes
+ * Use case: Accommodates international names like "José", "李明", "محمد", "Müller"
+ * Blocks: Injection-risk characters and special symbols
+ */
+export const PERSON_NAME_REGEX = /^[\p{L}\s'-]+$/u;
+
+/**
+ * Display Name Pattern (for display_name, usernames)
+ * Allows: Unicode letters (\p{L}), numbers (\p{N}), underscore, period, hyphen
+ * Use case: International usernames like "josé_123", "李明.dev", "müller-2024"
+ * Blocks: Spaces and injection-risk characters
+ */
+export const DISPLAY_NAME_REGEX = /^[\p{L}\p{N}_.-]+$/u;
+
+/**
+ * Company/Organization Name Pattern (for company_name, workspace names)
+ * Allows: Unicode letters (\p{L}), numbers (\p{N}), spaces, underscores, hyphens
+ * Use case: International business names like "Société Générale", "株式会社", "Müller GmbH"
+ * Blocks: Special punctuation and injection-risk chars
+ */
+export const COMPANY_NAME_REGEX = /^[\p{L}\p{N}\s_-]+$/u;
+
+/**
+ * Requires at least one Unicode letter or digit in a string.
+ * Used to reject symbol-only inputs like "-_________-" in workspace/company names.
+ */
+export const HAS_ALPHANUMERIC_REGEX = /[\p{L}\p{N}]/u;
+
+/**
+ * URL Slug Pattern (for workspace slugs, URL-safe identifiers)
+ * Allows: Unicode letters (\p{L}), numbers (\p{N}), underscores, hyphens
+ * Use case: International URL-safe identifiers like "josé-workspace", "李明-project"
+ * Blocks: Spaces and special characters (URL encoding will handle Unicode in actual URLs)
+ */
+export const SLUG_REGEX = /^[\p{L}\p{N}_-]+$/u;
+
+// =============================================================================
+// VALIDATION FUNCTIONS
+// =============================================================================
+
+/**
+ * @description Validates person names (first name, last name)
+ * @param {string} name - Name to validate
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validatePersonName("John") // returns true
+ * validatePersonName("O'Brien") // returns true
+ * validatePersonName("Jean-Paul") // returns true
+ * validatePersonName("John<script>") // returns error message
+ */
+export const validatePersonName = (name: string): boolean | string => {
+  if (!name || name.trim() === "") {
+    return "Name is required";
+  }
+
+  if (name.length > 50) {
+    return "Name must be 50 characters or less";
+  }
+
+  if (hasInjectionRiskChars(name)) {
+    return "Names cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!PERSON_NAME_REGEX.test(name)) {
+    return "Names can only contain letters, spaces, hyphens, and apostrophes";
+  }
+
+  return true;
+};
+
+/**
+ * @description Validates display names and usernames
+ * @param {string} displayName - Display name to validate
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validateDisplayName("john_doe") // returns true
+ * validateDisplayName("john.doe-123") // returns true
+ * validateDisplayName("john doe") // returns error message (spaces not allowed)
+ * validateDisplayName("john<>doe") // returns error message
+ */
+export const validateDisplayName = (displayName: string): boolean | string => {
+  if (!displayName || displayName.trim() === "") {
+    return true; // Display name is optional in most cases
+  }
+
+  if (displayName.length > 50) {
+    return "Display name must be 50 characters or less";
+  }
+
+  if (hasInjectionRiskChars(displayName)) {
+    return "Display name cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!DISPLAY_NAME_REGEX.test(displayName)) {
+    return "Display name can only contain letters, numbers, periods, hyphens, and underscores";
+  }
+
+  return true;
+};
+
+/**
+ * @description Validates company and organization names
+ * @param {string} companyName - Company name to validate
+ * @param {boolean} required - Whether the field is required
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validateCompanyName("Acme Corp") // returns true
+ * validateCompanyName("Acme_Corp-123") // returns true
+ * validateCompanyName("Acme{Corp}") // returns error message
+ */
+export const validateCompanyName = (companyName: string, required: boolean = false): boolean | string => {
+  if (!companyName || companyName.trim() === "") {
+    return required ? "Company name is required" : true;
+  }
+
+  if (companyName.length > 80) {
+    return "Company name must be 80 characters or less";
+  }
+
+  if (hasInjectionRiskChars(companyName)) {
+    return "Company name cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!COMPANY_NAME_REGEX.test(companyName)) {
+    return "Company name can only contain letters, numbers, spaces, hyphens, and underscores";
+  }
+
+  if (!HAS_ALPHANUMERIC_REGEX.test(companyName)) {
+    return "Company name must contain at least one letter or number";
+  }
+
+  return true;
+};
+
+/**
+ * @description Validates company and organization names
+ * @param {string} workspaceName - Workspace name to validate
+ * @param {boolean} required - Whether the field is required
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validateWorkspaceName("Acme Corp") // returns true
+ * validateWorkspaceName("Acme_Corp-123") // returns true
+ * validateWorkspaceName("Acme{Corp}") // returns error message
+ */
+export const validateWorkspaceName = (workspaceName: string, required: boolean = false): boolean | string => {
+  if (!workspaceName || workspaceName.trim() === "") {
+    return required ? "Workspace name is required" : true;
+  }
+
+  if (workspaceName.length > 80) {
+    return "Workspace name must be 80 characters or less";
+  }
+
+  if (hasInjectionRiskChars(workspaceName)) {
+    return "Workspace name cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!COMPANY_NAME_REGEX.test(workspaceName)) {
+    return "Workspace name can only contain letters, numbers, spaces, hyphens, and underscores";
+  }
+
+  if (!HAS_ALPHANUMERIC_REGEX.test(workspaceName)) {
+    return "Workspace name must contain at least one letter or number";
+  }
+
+  return true;
+};
+
+/**
+ * @description Validates URL slugs and identifiers
+ * @param {string} slug - Slug to validate
+ * @returns {boolean | string} true if valid, error message if invalid
+ * @example
+ * validateSlug("my-workspace") // returns true
+ * validateSlug("my_workspace_123") // returns true
+ * validateSlug("my workspace") // returns error message (spaces not allowed)
+ */
+export const validateSlug = (slug: string): boolean | string => {
+  if (!slug || slug.trim() === "") {
+    return "Slug is required";
+  }
+
+  if (slug.length > 48) {
+    return "Slug must be 48 characters or less";
+  }
+
+  if (hasInjectionRiskChars(slug)) {
+    return "Slug cannot contain special characters like < > ' \" { } [ ] * ^ ! # %";
+  }
+
+  if (!SLUG_REGEX.test(slug)) {
+    return "Slug can only contain letters, numbers, hyphens, and underscores";
+  }
+
+  return true;
+};
+
+/**
+ * @description Checks if a string contains any injection-risk characters
+ * @param {string} input - String to check
+ * @returns {boolean} true if injection-risk characters found
+ * @example
+ * hasInjectionRiskChars("Hello World") // returns false
+ * hasInjectionRiskChars("Hello<script>") // returns true
+ */
+export const hasInjectionRiskChars = (input: string): boolean => {
+  const injectionRiskPattern = /[<>'"{}[\]*^!#%]/;
+  return injectionRiskPattern.test(input);
+};
diff --git a/packages/utils/src/work-item-filters/configs/filters/cycle.ts b/packages/utils/src/work-item-filters/configs/filters/cycle.ts
new file mode 100644
index 0000000..f90ca53
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/cycle.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { ICycle, TCycleGroups, TFilterProperty, TSupportedOperators } from "@plane/types";
+import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
+// local imports
+import type { TCreateFilterConfigParams, IFilterIconConfig, TCreateFilterConfig } from "../../../rich-filters";
+import { createFilterConfig, getMultiSelectConfig, createOperatorConfigEntry } from "../../../rich-filters";
+
+/**
+ * Cycle filter specific params
+ */
+export type TCreateCycleFilterParams = TCreateFilterConfigParams &
+  IFilterIconConfig<TCycleGroups> & {
+    cycles: ICycle[];
+  };
+
+/**
+ * Helper to get the cycle multi select config
+ * @param params - The filter params
+ * @returns The cycle multi select config
+ */
+export const getCycleMultiSelectConfig = (params: TCreateCycleFilterParams, singleValueOperator: TSupportedOperators) =>
+  getMultiSelectConfig<ICycle, string, TCycleGroups>(
+    {
+      items: params.cycles,
+      getId: (cycle) => cycle.id,
+      getLabel: (cycle) => cycle.name,
+      getValue: (cycle) => cycle.id,
+      getIconData: (cycle) => cycle.status || "draft",
+    },
+    {
+      singleValueOperator,
+      ...params,
+    },
+    {
+      ...params,
+    }
+  );
+
+/**
+ * Get the cycle filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the cycle filter config
+ */
+export const getCycleFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateCycleFilterParams> =>
+  (params: TCreateCycleFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Cycle",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getCycleMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
diff --git a/packages/utils/src/work-item-filters/configs/filters/date.ts b/packages/utils/src/work-item-filters/configs/filters/date.ts
new file mode 100644
index 0000000..c1f5df6
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/date.ts
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TFilterProperty } from "@plane/types";
+// local imports
+import type { TCreateFilterConfig, TCreateDateFilterParams } from "../../../rich-filters";
+import { createFilterConfig, getSupportedDateOperators } from "../../../rich-filters";
+
+// ------------ Date filters ------------
+
+/**
+ * Get the start date filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the start date filter config
+ */
+export const getStartDateFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateDateFilterParams> =>
+  (params: TCreateDateFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Start date",
+      ...params,
+      icon: params.filterIcon,
+      allowMultipleFilters: true,
+      supportedOperatorConfigsMap: getSupportedDateOperators(params),
+    });
+
+/**
+ * Get the target date filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the target date filter config
+ */
+export const getTargetDateFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateDateFilterParams> =>
+  (params: TCreateDateFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Target date",
+      ...params,
+      icon: params.filterIcon,
+      allowMultipleFilters: true,
+      supportedOperatorConfigsMap: getSupportedDateOperators(params),
+    });
+
+/**
+ * Get the created at filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the created at filter config
+ */
+export const getCreatedAtFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateDateFilterParams> =>
+  (params: TCreateDateFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Created at",
+      ...params,
+      icon: params.filterIcon,
+      allowMultipleFilters: true,
+      supportedOperatorConfigsMap: getSupportedDateOperators(params),
+    });
+
+/**
+ * Get the updated at filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the updated at filter config
+ */
+export const getUpdatedAtFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateDateFilterParams> =>
+  (params: TCreateDateFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Updated at",
+      ...params,
+      icon: params.filterIcon,
+      allowMultipleFilters: true,
+      supportedOperatorConfigsMap: getSupportedDateOperators(params),
+    });
diff --git a/packages/utils/src/work-item-filters/configs/filters/index.ts b/packages/utils/src/work-item-filters/configs/filters/index.ts
new file mode 100644
index 0000000..a436da8
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/index.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./cycle";
+export * from "./date";
+export * from "./label";
+export * from "./module";
+export * from "./priority";
+export * from "./project";
+export * from "./state";
+export * from "./user";
diff --git a/packages/utils/src/work-item-filters/configs/filters/label.ts b/packages/utils/src/work-item-filters/configs/filters/label.ts
new file mode 100644
index 0000000..c639088
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/label.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IIssueLabel, TFilterProperty, TSupportedOperators } from "@plane/types";
+import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
+// local imports
+import type { TCreateFilterConfigParams, IFilterIconConfig, TCreateFilterConfig } from "../../../rich-filters";
+import { createFilterConfig, getMultiSelectConfig, createOperatorConfigEntry } from "../../../rich-filters";
+
+/**
+ * Label filter specific params
+ */
+export type TCreateLabelFilterParams = TCreateFilterConfigParams &
+  IFilterIconConfig<string> & {
+    labels: IIssueLabel[];
+  };
+
+/**
+ * Helper to get the label multi select config
+ * @param params - The filter params
+ * @returns The label multi select config
+ */
+export const getLabelMultiSelectConfig = (params: TCreateLabelFilterParams, singleValueOperator: TSupportedOperators) =>
+  getMultiSelectConfig<IIssueLabel, string, string>(
+    {
+      items: params.labels,
+      getId: (label) => label.id,
+      getLabel: (label) => label.name,
+      getValue: (label) => label.id,
+      getIconData: (label) => label.color,
+    },
+    {
+      singleValueOperator,
+      ...params,
+    },
+    {
+      getOptionIcon: params.getOptionIcon,
+    }
+  );
+
+/**
+ * Get the label filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the label filter config
+ */
+export const getLabelFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateLabelFilterParams> =>
+  (params: TCreateLabelFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Label",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getLabelMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
diff --git a/packages/utils/src/work-item-filters/configs/filters/module.ts b/packages/utils/src/work-item-filters/configs/filters/module.ts
new file mode 100644
index 0000000..47a5cc6
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/module.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IModule, TFilterProperty } from "@plane/types";
+import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
+// local imports
+import type { TCreateFilterConfigParams, IFilterIconConfig, TCreateFilterConfig } from "../../../rich-filters";
+import { createFilterConfig, getMultiSelectConfig, createOperatorConfigEntry } from "../../../rich-filters";
+
+/**
+ * Module filter specific params
+ */
+export type TCreateModuleFilterParams = TCreateFilterConfigParams &
+  IFilterIconConfig<undefined> & {
+    modules: IModule[];
+  };
+
+/**
+ * Helper to get the module multi select config
+ * @param params - The filter params
+ * @returns The module multi select config
+ */
+export const getModuleMultiSelectConfig = (params: TCreateModuleFilterParams) =>
+  getMultiSelectConfig<IModule, string, undefined>(
+    {
+      items: params.modules,
+      getId: (module) => module.id,
+      getLabel: (module) => module.name,
+      getValue: (module) => module.id,
+      getIconData: () => undefined,
+    },
+    {
+      singleValueOperator: EQUALITY_OPERATOR.EXACT,
+      ...params,
+    },
+    {
+      ...params,
+    }
+  );
+
+/**
+ * Get the module filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the module filter config
+ */
+export const getModuleFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateModuleFilterParams> =>
+  (params: TCreateModuleFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Module",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getModuleMultiSelectConfig(updatedParams)
+        ),
+      ]),
+    });
diff --git a/packages/utils/src/work-item-filters/configs/filters/priority.ts b/packages/utils/src/work-item-filters/configs/filters/priority.ts
new file mode 100644
index 0000000..0442f44
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/priority.ts
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TIssuePriorities } from "@plane/constants";
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import type { TFilterProperty, TSupportedOperators } from "@plane/types";
+import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
+// local imports
+import type { TCreateFilterConfigParams, IFilterIconConfig, TCreateFilterConfig } from "../../../rich-filters";
+import { createFilterConfig, getMultiSelectConfig, createOperatorConfigEntry } from "../../../rich-filters";
+
+// ------------ Priority filter ------------
+
+/**
+ * Priority filter specific params
+ */
+export type TCreatePriorityFilterParams = TCreateFilterConfigParams & IFilterIconConfig<TIssuePriorities>;
+
+/**
+ * Helper to get the priority multi select config
+ * @param params - The filter params
+ * @returns The priority multi select config
+ */
+export const getPriorityMultiSelectConfig = (
+  params: TCreatePriorityFilterParams,
+  singleValueOperator: TSupportedOperators
+) =>
+  getMultiSelectConfig<{ key: TIssuePriorities; title: string }, TIssuePriorities, TIssuePriorities>(
+    {
+      items: ISSUE_PRIORITIES,
+      getId: (priority) => priority.key,
+      getLabel: (priority) => priority.title,
+      getValue: (priority) => priority.key,
+      getIconData: (priority) => priority.key,
+    },
+    {
+      singleValueOperator,
+      ...params,
+    },
+    {
+      getOptionIcon: params.getOptionIcon,
+    }
+  );
+
+/**
+ * Get the priority filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the priority filter config
+ */
+export const getPriorityFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreatePriorityFilterParams> =>
+  (params: TCreatePriorityFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Priority",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getPriorityMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
diff --git a/packages/utils/src/work-item-filters/configs/filters/project.ts b/packages/utils/src/work-item-filters/configs/filters/project.ts
new file mode 100644
index 0000000..81e33ff
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/project.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TFilterProperty } from "@plane/types";
+import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
+// local imports
+import type { TCreateFilterConfig, TCreateProjectFilterParams } from "../../../rich-filters";
+import { createFilterConfig, createOperatorConfigEntry, getProjectMultiSelectConfig } from "../../../rich-filters";
+
+// ------------ Project filter ------------
+
+/**
+ * Get the project filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the project filter config
+ */
+export const getProjectFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateProjectFilterParams> =>
+  (params: TCreateProjectFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Projects",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getProjectMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
diff --git a/packages/utils/src/work-item-filters/configs/filters/shared.ts b/packages/utils/src/work-item-filters/configs/filters/shared.ts
new file mode 100644
index 0000000..0343fd3
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/shared.ts
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IProject, TOperatorConfigMap, TSupportedOperators } from "@plane/types";
+import { COMPARISON_OPERATOR, EQUALITY_OPERATOR } from "@plane/types";
+// local imports
+import type { IFilterIconConfig, TCreateDateFilterParams, TCreateFilterConfigParams } from "../../../rich-filters";
+import {
+  createOperatorConfigEntry,
+  getDatePickerConfig,
+  getDateRangePickerConfig,
+  getMultiSelectConfig,
+} from "../../../rich-filters";
+
+// ------------ Date filter ------------
+
+export const getSupportedDateOperators = (params: TCreateDateFilterParams): TOperatorConfigMap =>
+  new Map([
+    createOperatorConfigEntry(EQUALITY_OPERATOR.EXACT, params, (updatedParams) => getDatePickerConfig(updatedParams)),
+    createOperatorConfigEntry(COMPARISON_OPERATOR.RANGE, params, (updatedParams) =>
+      getDateRangePickerConfig(updatedParams)
+    ),
+  ]);
+
+// ------------ Project filter ------------
+
+/**
+ * Project filter specific params
+ */
+export type TCreateProjectFilterParams = TCreateFilterConfigParams &
+  IFilterIconConfig<IProject> & {
+    projects: IProject[];
+  };
+
+/**
+ * Helper to get the project multi select config
+ * @param params - The filter params
+ * @returns The member multi select config
+ */
+export const getProjectMultiSelectConfig = (
+  params: TCreateProjectFilterParams,
+  singleValueOperator: TSupportedOperators
+) =>
+  getMultiSelectConfig<IProject, string, IProject>(
+    {
+      items: params.projects,
+      getId: (project) => project.id,
+      getLabel: (project) => project.name,
+      getValue: (project) => project.id,
+      getIconData: (project) => project,
+    },
+    {
+      singleValueOperator,
+      ...params,
+    },
+    {
+      ...params,
+    }
+  );
diff --git a/packages/utils/src/work-item-filters/configs/filters/state.ts b/packages/utils/src/work-item-filters/configs/filters/state.ts
new file mode 100644
index 0000000..04e8362
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/state.ts
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
+import type { IState, TFilterProperty, TStateGroups, TSupportedOperators } from "@plane/types";
+import { COLLECTION_OPERATOR, EQUALITY_OPERATOR } from "@plane/types";
+// local imports
+import type { IFilterIconConfig, TCreateFilterConfig, TCreateFilterConfigParams } from "../../../rich-filters";
+import { createFilterConfig, getMultiSelectConfig, createOperatorConfigEntry } from "../../../rich-filters";
+
+// ------------ State group filter ------------
+
+/**
+ * State group filter specific params
+ */
+export type TCreateStateGroupFilterParams = TCreateFilterConfigParams & IFilterIconConfig<TStateGroups>;
+
+/**
+ * Helper to get the state group multi select config
+ * @param params - The filter params
+ * @returns The state group multi select config
+ */
+export const getStateGroupMultiSelectConfig = (
+  params: TCreateStateGroupFilterParams,
+  singleValueOperator: TSupportedOperators
+) =>
+  getMultiSelectConfig<{ key: TStateGroups; label: string }, TStateGroups, TStateGroups>(
+    {
+      items: Object.values(STATE_GROUPS),
+      getId: (state) => state.key,
+      getLabel: (state) => state.label,
+      getValue: (state) => state.key,
+      getIconData: (state) => state.key,
+    },
+    {
+      singleValueOperator,
+      ...params,
+    },
+    {
+      ...params,
+    }
+  );
+
+/**
+ * Get the state group filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the state group filter config
+ */
+export const getStateGroupFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateStateGroupFilterParams> =>
+  (params: TCreateStateGroupFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "State Group",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getStateGroupMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
+
+// ------------ State filter ------------
+
+/**
+ * State filter specific params
+ */
+export type TCreateStateFilterParams = TCreateFilterConfigParams &
+  IFilterIconConfig<IState> & {
+    states: IState[];
+  };
+
+/**
+ * Helper to get the state multi select config
+ * @param params - The filter params
+ * @returns The state multi select config
+ */
+export const getStateMultiSelectConfig = (params: TCreateStateFilterParams, singleValueOperator: TSupportedOperators) =>
+  getMultiSelectConfig<IState, string, IState>(
+    {
+      items: params.states,
+      getId: (state) => state.id,
+      getLabel: (state) => state.name,
+      getValue: (state) => state.id,
+      getIconData: (state) => state,
+    },
+    {
+      singleValueOperator,
+      ...params,
+    },
+    {
+      ...params,
+    }
+  );
+
+/**
+ * Get the state filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the state filter config
+ */
+export const getStateFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateStateFilterParams> =>
+  (params: TCreateStateFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "State",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getStateMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
diff --git a/packages/utils/src/work-item-filters/configs/filters/user.ts b/packages/utils/src/work-item-filters/configs/filters/user.ts
new file mode 100644
index 0000000..e9c4ea4
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/filters/user.ts
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TFilterProperty } from "@plane/types";
+import { EQUALITY_OPERATOR, COLLECTION_OPERATOR } from "@plane/types";
+// local imports
+import type { TCreateFilterConfig, TCreateUserFilterParams } from "../../../rich-filters";
+import { createFilterConfig, createOperatorConfigEntry, getMemberMultiSelectConfig } from "../../../rich-filters";
+
+// ------------ Assignee filter ------------
+
+/**
+ * Assignee filter specific params
+ */
+export type TCreateAssigneeFilterParams = TCreateUserFilterParams;
+
+/**
+ * Get the assignee filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the assignee filter config
+ */
+export const getAssigneeFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateAssigneeFilterParams> =>
+  (params: TCreateAssigneeFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Assignees",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getMemberMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
+
+// ------------ Mention filter ------------
+
+/**
+ * Mention filter specific params
+ */
+export type TCreateMentionFilterParams = TCreateUserFilterParams;
+
+/**
+ * Get the mention filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the mention filter config
+ */
+export const getMentionFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateMentionFilterParams> =>
+  (params: TCreateMentionFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Mentions",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getMemberMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
+
+// ------------ Created by filter ------------
+
+/**
+ * Created by filter specific params
+ */
+export type TCreateCreatedByFilterParams = TCreateUserFilterParams;
+
+/**
+ * Get the created by filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the created by filter config
+ */
+export const getCreatedByFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateCreatedByFilterParams> =>
+  (params: TCreateCreatedByFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Created by",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getMemberMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
+
+// ------------ Subscriber filter ------------
+
+/**
+ * Subscriber filter specific params
+ */
+export type TCreateSubscriberFilterParams = TCreateUserFilterParams;
+
+/**
+ * Get the subscriber filter config
+ * @template K - The filter key
+ * @param key - The filter key to use
+ * @returns A function that takes parameters and returns the subscriber filter config
+ */
+export const getSubscriberFilterConfig =
+  <P extends TFilterProperty>(key: P): TCreateFilterConfig<P, TCreateSubscriberFilterParams> =>
+  (params: TCreateSubscriberFilterParams) =>
+    createFilterConfig<P>({
+      id: key,
+      label: "Subscriber",
+      ...params,
+      icon: params.filterIcon,
+      supportedOperatorConfigsMap: new Map([
+        createOperatorConfigEntry(COLLECTION_OPERATOR.IN, params, (updatedParams) =>
+          getMemberMultiSelectConfig(updatedParams, EQUALITY_OPERATOR.EXACT)
+        ),
+      ]),
+    });
diff --git a/packages/utils/src/work-item-filters/configs/index.ts b/packages/utils/src/work-item-filters/configs/index.ts
new file mode 100644
index 0000000..c3aade6
--- /dev/null
+++ b/packages/utils/src/work-item-filters/configs/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./filters";
diff --git a/packages/utils/src/work-item-filters/index.ts b/packages/utils/src/work-item-filters/index.ts
new file mode 100644
index 0000000..3c9c6d8
--- /dev/null
+++ b/packages/utils/src/work-item-filters/index.ts
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./configs";
diff --git a/packages/utils/src/work-item/base.ts b/packages/utils/src/work-item/base.ts
new file mode 100644
index 0000000..c79b805
--- /dev/null
+++ b/packages/utils/src/work-item/base.ts
@@ -0,0 +1,347 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { isEmpty } from "lodash-es";
+import { v4 as uuidv4 } from "uuid";
+// plane imports
+import type { TIssueFilterPriorityObject, TIssuePriorities } from "@plane/constants";
+import { ISSUE_DISPLAY_FILTERS_BY_PAGE, ISSUE_PRIORITY_FILTERS, STATE_GROUPS } from "@plane/constants";
+import type {
+  IGanttBlock,
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  TGroupedIssues,
+  TIssue,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+  TIssueParams,
+  TStateGroups,
+  TSubGroupedIssues,
+  TUnGroupedIssues,
+} from "@plane/types";
+import { EIssueLayoutTypes } from "@plane/types";
+// local imports
+import { orderArrayBy } from "../array";
+import { getDate } from "../datetime";
+import { isEditorEmpty } from "../editor";
+
+type THandleIssuesMutation = (
+  formData: Partial<TIssue>,
+  oldGroupTitle: string,
+  selectedGroupBy: TIssueGroupByOptions,
+  issueIndex: number,
+  orderBy: TIssueOrderByOptions,
+  prevData?:
+    | {
+        [key: string]: TIssue[];
+      }
+    | TIssue[]
+) =>
+  | {
+      [key: string]: TIssue[];
+    }
+  | TIssue[]
+  | undefined;
+
+export const handleIssuesMutation: THandleIssuesMutation = (
+  formData,
+  oldGroupTitle,
+  selectedGroupBy,
+  issueIndex,
+  orderBy,
+  prevData
+) => {
+  if (!prevData) return prevData;
+
+  if (Array.isArray(prevData)) {
+    const updatedIssue = {
+      ...prevData[issueIndex],
+      ...formData,
+    };
+
+    prevData.splice(issueIndex, 1, updatedIssue);
+
+    return [...prevData];
+  } else {
+    const oldGroup = prevData[oldGroupTitle ?? ""] ?? [];
+
+    let newGroup: TIssue[] = [];
+
+    if (selectedGroupBy === "priority") newGroup = prevData[formData.priority ?? ""] ?? [];
+    else if (selectedGroupBy === "state") newGroup = prevData[formData.state_id ?? ""] ?? [];
+
+    const updatedIssue = {
+      ...oldGroup[issueIndex],
+      ...formData,
+    };
+
+    if (selectedGroupBy !== Object.keys(formData)[0])
+      return {
+        ...prevData,
+        [oldGroupTitle ?? ""]: orderArrayBy(
+          oldGroup.map((i) => (i.id === updatedIssue.id ? updatedIssue : i)),
+          orderBy
+        ),
+      };
+
+    const groupThatIsUpdated = selectedGroupBy === "priority" ? formData.priority : formData.state_id;
+
+    return {
+      ...prevData,
+      [oldGroupTitle ?? ""]: orderArrayBy(
+        oldGroup.filter((i) => i.id !== updatedIssue.id),
+        orderBy
+      ),
+      [groupThatIsUpdated ?? ""]: orderArrayBy([...newGroup, updatedIssue], orderBy),
+    };
+  }
+};
+
+export const handleIssueQueryParamsByLayout = (
+  layout: EIssueLayoutTypes | undefined,
+  viewType:
+    | "my_issues"
+    | "issues"
+    | "profile_issues"
+    | "archived_issues"
+    | "draft_issues"
+    | "team_issues"
+    | "team_project_work_items"
+): TIssueParams[] | null => {
+  const queryParams: TIssueParams[] = ["filters"];
+
+  if (!layout) return null;
+
+  const currentViewLayoutOptions = ISSUE_DISPLAY_FILTERS_BY_PAGE[viewType].layoutOptions[layout];
+
+  // add display filters query params
+  Object.keys(currentViewLayoutOptions.display_filters).forEach((option) => {
+    queryParams.push(option as TIssueParams);
+  });
+
+  // add extra options query params
+  if (currentViewLayoutOptions.extra_options.access) {
+    currentViewLayoutOptions.extra_options.values.forEach((option) => {
+      queryParams.push(option);
+    });
+  }
+
+  return queryParams;
+};
+
+/**
+ *
+ * @description create a full issue payload with some default values. This function also parse the form field
+ * like assignees, labels, etc. and add them to the payload
+ * @param projectId project id to be added in the issue payload
+ * @param formData partial issue data from the form. This will override the default values
+ * @returns full issue payload with some default values
+ */
+export const createIssuePayload: (projectId: string, formData: Partial<TIssue>) => TIssue = (
+  projectId: string,
+  formData: Partial<TIssue>
+) => {
+  const payload: TIssue = {
+    id: uuidv4(),
+    project_id: projectId,
+    priority: "none",
+    label_ids: [],
+    assignee_ids: [],
+    sub_issues_count: 0,
+    attachment_count: 0,
+    link_count: 0,
+    // tempId is used for optimistic updates. It is not a part of the API response.
+    tempId: uuidv4(),
+    // to be overridden by the form data
+    ...formData,
+  } as TIssue;
+
+  return payload;
+};
+
+/**
+ * @description check if the issue due date should be highlighted
+ * @param date
+ * @param stateGroup
+ * @returns boolean
+ */
+export const shouldHighlightIssueDueDate = (
+  date: string | Date | null,
+  stateGroup: TStateGroups | undefined
+): boolean => {
+  if (!date || !stateGroup) return false;
+  // if the issue is completed or cancelled, don't highlight the due date
+  if ([STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key].includes(stateGroup)) return false;
+
+  const parsedDate = getDate(date);
+  if (!parsedDate) return false;
+
+  const targetDateDistance = differenceInCalendarDays(parsedDate, new Date());
+
+  // if the issue is overdue, highlight the due date
+  return targetDateDistance <= 0;
+};
+
+export const getIssueBlocksStructure = (block: TIssue): IGanttBlock => ({
+  data: block,
+  id: block?.id,
+  name: block?.name,
+  sort_order: block?.sort_order,
+  start_date: block?.start_date ?? undefined,
+  target_date: block?.target_date ?? undefined,
+  meta: {
+    project_id: block?.project_id ?? undefined,
+  },
+});
+
+export const formatTextList = (TextArray: string[]): string => {
+  const count = TextArray.length;
+  switch (count) {
+    case 0:
+      return "";
+    case 1:
+      return TextArray[0];
+    case 2:
+      return `${TextArray[0]} and ${TextArray[1]}`;
+    case 3:
+      return `${TextArray.slice(0, 2).join(", ")}, and ${TextArray[2]}`;
+    case 4:
+      return `${TextArray.slice(0, 3).join(", ")}, and ${TextArray[3]}`;
+    default:
+      return `${TextArray.slice(0, 3).join(", ")}, and +${count - 3} more`;
+  }
+};
+
+export const getDescriptionPlaceholderI18n = (isFocused: boolean, description: string | undefined): string => {
+  const isDescriptionEmpty = isEditorEmpty(description);
+  if (!isDescriptionEmpty || isFocused) return "common.press_for_commands";
+  else return "common.click_to_add_description";
+};
+
+export const issueCountBasedOnFilters = (
+  issueIds: TGroupedIssues | TUnGroupedIssues | TSubGroupedIssues,
+  layout: EIssueLayoutTypes,
+  groupBy: string | undefined,
+  subGroupBy: string | undefined
+): number => {
+  let issuesCount = 0;
+  if (!layout) return issuesCount;
+
+  if (["spreadsheet", "gantt_chart"].includes(layout)) {
+    issuesCount = (issueIds as TUnGroupedIssues)?.length;
+  } else if (layout === "calendar") {
+    Object.keys(issueIds || {}).map((groupId) => {
+      issuesCount += (issueIds as TGroupedIssues)?.[groupId]?.length;
+    });
+  } else if (layout === "list") {
+    if (groupBy) {
+      Object.keys(issueIds || {}).map((groupId) => {
+        issuesCount += (issueIds as TGroupedIssues)?.[groupId]?.length;
+      });
+    } else {
+      issuesCount = (issueIds as TUnGroupedIssues)?.length;
+    }
+  } else if (layout === "kanban") {
+    if (groupBy && subGroupBy) {
+      Object.keys(issueIds || {}).map((groupId) => {
+        Object.keys((issueIds as TSubGroupedIssues)?.[groupId] || {}).map((subGroupId) => {
+          issuesCount += (issueIds as TSubGroupedIssues)?.[groupId]?.[subGroupId]?.length || 0;
+        });
+      });
+    } else if (groupBy) {
+      Object.keys(issueIds || {}).map((groupId) => {
+        issuesCount += (issueIds as TGroupedIssues)?.[groupId]?.length;
+      });
+    }
+  }
+
+  return issuesCount;
+};
+
+/**
+ * @description This method is used to apply the display filters on the issues
+ * @param {IIssueDisplayFilterOptions} displayFilters
+ * @returns {IIssueDisplayFilterOptions}
+ */
+export const getComputedDisplayFilters = (
+  displayFilters: IIssueDisplayFilterOptions = {},
+  defaultValues?: IIssueDisplayFilterOptions
+): IIssueDisplayFilterOptions => {
+  const filters = !isEmpty(displayFilters) ? displayFilters : defaultValues;
+  return {
+    calendar: {
+      show_weekends: filters?.calendar?.show_weekends || false,
+      layout: filters?.calendar?.layout || "month",
+    },
+    layout: filters?.layout || EIssueLayoutTypes.LIST,
+    order_by: filters?.order_by || "sort_order",
+    group_by: filters?.group_by || null,
+    sub_group_by: filters?.sub_group_by || null,
+    sub_issue: filters?.sub_issue || false,
+    show_empty_groups: filters?.show_empty_groups || false,
+  };
+};
+
+/**
+ * @description This method is used to apply the display properties on the issues
+ * @param {IIssueDisplayProperties} displayProperties
+ * @returns {IIssueDisplayProperties}
+ */
+export const getComputedDisplayProperties = (
+  displayProperties: IIssueDisplayProperties = {}
+): IIssueDisplayProperties => ({
+  assignee: displayProperties?.assignee ?? true,
+  start_date: displayProperties?.start_date ?? true,
+  due_date: displayProperties?.due_date ?? true,
+  labels: displayProperties?.labels ?? true,
+  priority: displayProperties?.priority ?? true,
+  state: displayProperties?.state ?? true,
+  sub_issue_count: displayProperties?.sub_issue_count ?? true,
+  attachment_count: displayProperties?.attachment_count ?? true,
+  link: displayProperties?.link ?? true,
+  estimate: displayProperties?.estimate ?? true,
+  key: displayProperties?.key ?? true,
+  created_on: displayProperties?.created_on ?? true,
+  updated_on: displayProperties?.updated_on ?? true,
+  modules: displayProperties?.modules ?? true,
+  cycle: displayProperties?.cycle ?? true,
+  issue_type: displayProperties?.issue_type ?? true,
+});
+
+export const generateWorkItemLink = ({
+  workspaceSlug,
+  projectId,
+  issueId,
+  projectIdentifier,
+  sequenceId,
+  isArchived = false,
+  isEpic = false,
+}: {
+  workspaceSlug: string | undefined | null;
+  projectId: string | undefined | null;
+  issueId: string | undefined | null;
+  projectIdentifier: string | undefined | null;
+  sequenceId: string | number | undefined | null;
+  isArchived?: boolean;
+  isEpic?: boolean;
+}): string => {
+  const archiveIssueLink = `/${workspaceSlug}/projects/${projectId}/archives/issues/${issueId}`;
+  const workItemLink = `/${workspaceSlug}/browse/${projectIdentifier}-${sequenceId}/`;
+  const epicLink = workItemLink;
+
+  return isArchived ? archiveIssueLink : isEpic ? epicLink : workItemLink;
+};
+
+export const getIssuePriorityFilters = (priorityKey: TIssuePriorities): TIssueFilterPriorityObject | undefined => {
+  const currentIssuePriority: TIssueFilterPriorityObject | undefined =
+    ISSUE_PRIORITY_FILTERS && ISSUE_PRIORITY_FILTERS.length > 0
+      ? ISSUE_PRIORITY_FILTERS.find((_priority) => _priority.key === priorityKey)
+      : undefined;
+
+  if (currentIssuePriority) return currentIssuePriority;
+  return undefined;
+};
diff --git a/packages/utils/src/work-item/index.ts b/packages/utils/src/work-item/index.ts
new file mode 100644
index 0000000..201e552
--- /dev/null
+++ b/packages/utils/src/work-item/index.ts
@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./base";
+export * from "./modal";
+export * from "./state";
diff --git a/packages/utils/src/work-item/modal.ts b/packages/utils/src/work-item/modal.ts
new file mode 100644
index 0000000..5b04824
--- /dev/null
+++ b/packages/utils/src/work-item/modal.ts
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { set } from "lodash-es";
+// plane imports
+import { DEFAULT_WORK_ITEM_FORM_VALUES } from "@plane/constants";
+import type { IPartialProject, ISearchIssueResponse, IState, TIssue } from "@plane/types";
+
+export const getUpdateFormDataForReset = (projectId: string | null | undefined, formData: Partial<TIssue>) => ({
+  ...DEFAULT_WORK_ITEM_FORM_VALUES,
+  project_id: projectId,
+  name: formData.name,
+  description_html: formData.description_html,
+  priority: formData.priority,
+  start_date: formData.start_date,
+  target_date: formData.target_date,
+});
+
+export const convertWorkItemDataToSearchResponse = (
+  workspaceSlug: string,
+  workItem: TIssue,
+  project: IPartialProject | undefined,
+  state: IState | undefined
+): ISearchIssueResponse => ({
+  id: workItem.id,
+  name: workItem.name,
+  project_id: workItem.project_id ?? "",
+  project__identifier: project?.identifier ?? "",
+  project__name: project?.name ?? "",
+  sequence_id: workItem.sequence_id,
+  type_id: workItem.type_id ?? "",
+  state__color: state?.color ?? "",
+  start_date: workItem.start_date,
+  state__group: state?.group ?? "backlog",
+  state__name: state?.name ?? "",
+  workspace__slug: workspaceSlug,
+});
+
+export function getChangedIssuefields(formData: Partial<TIssue>, dirtyFields: { [key: string]: boolean | undefined }) {
+  const changedFields = {};
+
+  const dirtyFieldKeys = Object.keys(dirtyFields) as (keyof TIssue)[];
+  for (const dirtyField of dirtyFieldKeys) {
+    if (dirtyFields[dirtyField]) {
+      set(changedFields, [dirtyField], formData[dirtyField]);
+    }
+  }
+
+  return changedFields as Partial<TIssue>;
+}
diff --git a/packages/utils/src/work-item/state.ts b/packages/utils/src/work-item/state.ts
new file mode 100644
index 0000000..4dadd6d
--- /dev/null
+++ b/packages/utils/src/work-item/state.ts
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { TDraggableData } from "@plane/constants";
+import { STATE_GROUPS } from "@plane/constants";
+import type { IState, IStateResponse } from "@plane/types";
+
+export const orderStateGroups = (unorderedStateGroups: IStateResponse | undefined): IStateResponse | undefined => {
+  if (!unorderedStateGroups) return undefined;
+  return Object.assign({ backlog: [], unstarted: [], started: [], completed: [], cancelled: [] }, unorderedStateGroups);
+};
+
+export const sortStates = (states: IState[]) => {
+  if (!states || states.length === 0) return;
+
+  return states.sort((stateA, stateB) => {
+    if (stateA.group === stateB.group) {
+      return stateA.sequence - stateB.sequence;
+    }
+    return Object.keys(STATE_GROUPS).indexOf(stateA.group) - Object.keys(STATE_GROUPS).indexOf(stateB.group);
+  });
+};
+
+export const getCurrentStateSequence = (
+  groupSates: IState[],
+  destinationData: TDraggableData,
+  edge: string | undefined
+) => {
+  const defaultSequence = 65535;
+  if (!edge) return defaultSequence;
+
+  const currentStateIndex = groupSates.findIndex((state) => state.id === destinationData.id);
+  const currentStateSequence = groupSates[currentStateIndex]?.sequence || undefined;
+
+  if (!currentStateSequence) return defaultSequence;
+
+  if (edge === "top") {
+    const prevStateSequence = groupSates[currentStateIndex - 1]?.sequence || undefined;
+
+    if (prevStateSequence === undefined) {
+      return currentStateSequence - defaultSequence;
+    }
+    return (currentStateSequence + prevStateSequence) / 2;
+  } else if (edge === "bottom") {
+    const nextStateSequence = groupSates[currentStateIndex + 1]?.sequence || undefined;
+
+    if (nextStateSequence === undefined) {
+      return currentStateSequence + defaultSequence;
+    }
+    return (currentStateSequence + nextStateSequence) / 2;
+  }
+};
diff --git a/packages/utils/src/workspace.ts b/packages/utils/src/workspace.ts
new file mode 100644
index 0000000..ca4d7dd
--- /dev/null
+++ b/packages/utils/src/workspace.ts
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import type { IWorkspace } from "@plane/types";
+
+export const orderWorkspacesList = (workspaces: IWorkspace[]): IWorkspace[] =>
+  workspaces.sort((a, b) => a.name.localeCompare(b.name));
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
new file mode 100644
index 0000000..d13fa1b
--- /dev/null
+++ b/packages/utils/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noImplicitReturns": false,
+    "noUnusedParameters": false,
+    "noUnusedLocals": false,
+    "exactOptionalPropertyTypes": false
+  },
+  "exclude": ["dist", "node_modules"]
+}
diff --git a/packages/utils/tsdown.config.ts b/packages/utils/tsdown.config.ts
new file mode 100644
index 0000000..92959ea
--- /dev/null
+++ b/packages/utils/tsdown.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  platform: "neutral",
+  exports: true,
+});
diff --git a/patches/react-color@2.19.3.patch b/patches/react-color@2.19.3.patch
new file mode 100644
index 0000000..f61f19c
--- /dev/null
+++ b/patches/react-color@2.19.3.patch
@@ -0,0 +1,85 @@
+diff --git a/lib/components/common/Checkboard.js b/lib/components/common/Checkboard.js
+index 0cbc2fb3bd830ae75ff460ac98e4d903ac3b07f8..48e868a7fa999c42d2113e06083a79a8621a2d1b 100644
+--- a/lib/components/common/Checkboard.js
++++ b/lib/components/common/Checkboard.js
+@@ -23,7 +23,24 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
+ 
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ 
+-var Checkboard = exports.Checkboard = function Checkboard(_ref) {
++// React 19 removed defaultProps for function components, so these are applied here
++// instead. `undefined` falls back to the default exactly as defaultProps did, which
++// matters because Alpha and Chrome forward a `renderers` that is often undefined,
++// and Sketch and Block render Checkboard without it at all. Reading `renderers.canvas`
++// off undefined below is a hard crash.
++var CHECKBOARD_DEFAULT_PROPS = {
++  size: 8,
++  white: 'transparent',
++  grey: 'rgba(0,0,0,.08)',
++  renderers: {}
++};
++
++var Checkboard = exports.Checkboard = function Checkboard(_props) {
++  var _ref = _extends({}, _props);
++  for (var _defaultKey in CHECKBOARD_DEFAULT_PROPS) {
++    if (_ref[_defaultKey] === undefined) _ref[_defaultKey] = CHECKBOARD_DEFAULT_PROPS[_defaultKey];
++  }
++
+   var white = _ref.white,
+       grey = _ref.grey,
+       size = _ref.size,
+@@ -45,11 +62,4 @@ var Checkboard = exports.Checkboard = function Checkboard(_ref) {
+   return (0, _react.isValidElement)(children) ? _react2.default.cloneElement(children, _extends({}, children.props, { style: _extends({}, children.props.style, styles.grid) })) : _react2.default.createElement('div', { style: styles.grid });
+ };
+ 
+-Checkboard.defaultProps = {
+-  size: 8,
+-  white: 'transparent',
+-  grey: 'rgba(0,0,0,.08)',
+-  renderers: {}
+-};
+-
+ exports.default = Checkboard;
+diff --git a/es/components/common/Checkboard.js b/es/components/common/Checkboard.js
+index 95c72045476a58a6a2f52924a669d3ed1da94be8..6bf685cd87ffccdd240f09f14b2e195f834c2a0b 100644
+--- a/es/components/common/Checkboard.js
++++ b/es/components/common/Checkboard.js
+@@ -4,7 +4,24 @@ import reactCSS from 'reactcss';
+ import reactCSS from 'reactcss';
+ import * as checkboard from '../../helpers/checkboard';
+ 
+-export var Checkboard = function Checkboard(_ref) {
++// React 19 removed defaultProps for function components, so these are applied here
++// instead. `undefined` falls back to the default exactly as defaultProps did, which
++// matters because Alpha and Chrome forward a `renderers` that is often undefined,
++// and Sketch and Block render Checkboard without it at all. Reading `renderers.canvas`
++// off undefined below is a hard crash.
++var CHECKBOARD_DEFAULT_PROPS = {
++  size: 8,
++  white: 'transparent',
++  grey: 'rgba(0,0,0,.08)',
++  renderers: {}
++};
++
++export var Checkboard = function Checkboard(_props) {
++  var _ref = _extends({}, _props);
++  for (var _defaultKey in CHECKBOARD_DEFAULT_PROPS) {
++    if (_ref[_defaultKey] === undefined) _ref[_defaultKey] = CHECKBOARD_DEFAULT_PROPS[_defaultKey];
++  }
++
+   var white = _ref.white,
+       grey = _ref.grey,
+       size = _ref.size,
+@@ -26,11 +43,4 @@ export var Checkboard = function Checkboard(_ref) {
+   return isValidElement(children) ? React.cloneElement(children, _extends({}, children.props, { style: _extends({}, children.props.style, styles.grid) })) : React.createElement('div', { style: styles.grid });
+ };
+ 
+-Checkboard.defaultProps = {
+-  size: 8,
+-  white: 'transparent',
+-  grey: 'rgba(0,0,0,.08)',
+-  renderers: {}
+-};
+-
+ export default Checkboard;
+\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..a58bbf1
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,17746 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+catalogs:
+  default:
+    '@atlaskit/pragmatic-drag-and-drop':
+      specifier: 1.7.4
+      version: 1.7.4
+    '@atlaskit/pragmatic-drag-and-drop-auto-scroll':
+      specifier: 1.4.0
+      version: 1.4.0
+    '@atlaskit/pragmatic-drag-and-drop-hitbox':
+      specifier: 1.1.0
+      version: 1.1.0
+    '@base-ui-components/react':
+      specifier: 1.0.0-beta.3
+      version: 1.0.0-beta.3
+    '@bprogress/core':
+      specifier: ^1.3.4
+      version: 1.3.4
+    '@chromatic-com/storybook':
+      specifier: 5.2.1
+      version: 5.2.1
+    '@effect/platform':
+      specifier: ^0.94.0
+      version: 0.94.1
+    '@effect/platform-node':
+      specifier: ^0.104.0
+      version: 0.104.0
+    '@floating-ui/dom':
+      specifier: ^1.7.1
+      version: 1.8.0
+    '@floating-ui/react':
+      specifier: ^0.27.20
+      version: 0.27.20
+    '@fontsource-variable/inter':
+      specifier: 5.2.8
+      version: 5.2.8
+    '@fontsource/ibm-plex-mono':
+      specifier: 5.2.7
+      version: 5.2.7
+    '@fontsource/inter':
+      specifier: 5.2.8
+      version: 5.2.8
+    '@fontsource/material-symbols-rounded':
+      specifier: 5.2.30
+      version: 5.2.30
+    '@headlessui/react':
+      specifier: ^2.2.10
+      version: 2.2.10
+    '@hocuspocus/extension-database':
+      specifier: 2.15.2
+      version: 2.15.2
+    '@hocuspocus/extension-logger':
+      specifier: 2.15.2
+      version: 2.15.2
+    '@hocuspocus/extension-redis':
+      specifier: 2.15.2
+      version: 2.15.2
+    '@hocuspocus/provider':
+      specifier: 2.15.2
+      version: 2.15.2
+    '@hocuspocus/server':
+      specifier: 2.15.2
+      version: 2.15.2
+    '@hocuspocus/transformer':
+      specifier: 2.15.2
+      version: 2.15.2
+    '@hypermod/utils':
+      specifier: ^0.7.1
+      version: 0.7.1
+    '@makeplane/propel':
+      specifier: 0.3.0
+      version: 0.3.0
+    '@popperjs/core':
+      specifier: ^2.11.8
+      version: 2.11.8
+    '@react-pdf/renderer':
+      specifier: ^4.8.1
+      version: 4.8.1
+    '@react-pdf/types':
+      specifier: ^2.13.1
+      version: 2.13.1
+    '@react-router/dev':
+      specifier: 8.3.0
+      version: 8.3.0
+    '@react-router/node':
+      specifier: 8.3.0
+      version: 8.3.0
+    '@react-router/serve':
+      specifier: 8.3.0
+      version: 8.3.0
+    '@storybook/addon-designs':
+      specifier: 11.1.3
+      version: 11.1.3
+    '@storybook/addon-docs':
+      specifier: 10.4.6
+      version: 10.4.6
+    '@storybook/addon-links':
+      specifier: 10.4.6
+      version: 10.4.6
+    '@storybook/addon-onboarding':
+      specifier: 10.4.6
+      version: 10.4.6
+    '@storybook/addon-styling-webpack':
+      specifier: 3.0.2
+      version: 3.0.2
+    '@storybook/addon-webpack5-compiler-swc':
+      specifier: 4.0.3
+      version: 4.0.3
+    '@storybook/react':
+      specifier: 10.4.6
+      version: 10.4.6
+    '@storybook/react-vite':
+      specifier: 10.4.6
+      version: 10.4.6
+    '@storybook/react-webpack5':
+      specifier: 10.4.6
+      version: 10.4.6
+    '@tailwindcss/postcss':
+      specifier: 4.1.17
+      version: 4.1.17
+    '@tailwindcss/typography':
+      specifier: 0.5.19
+      version: 0.5.19
+    '@tanstack/react-table':
+      specifier: ^8.21.3
+      version: 8.21.3
+    '@tiptap/core':
+      specifier: ^2.22.3
+      version: 2.26.3
+    '@tiptap/extension-blockquote':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-character-count':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-collaboration':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-document':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-emoji':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-heading':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-image':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-list-item':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-mention':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-placeholder':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-task-item':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-task-list':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-text':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-text-align':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-text-style':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/extension-underline':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/html':
+      specifier: ^2.22.3
+      version: 2.26.2
+    '@tiptap/pm':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/react':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/starter-kit':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@tiptap/suggestion':
+      specifier: ^2.22.3
+      version: 2.26.1
+    '@types/chroma-js':
+      specifier: ^3.1.2
+      version: 3.1.2
+    '@types/compression':
+      specifier: 1.8.1
+      version: 1.8.1
+    '@types/cors':
+      specifier: ^2.8.17
+      version: 2.8.19
+    '@types/express-ws':
+      specifier: ^3.0.5
+      version: 3.0.5
+    '@types/hast':
+      specifier: ^3.0.4
+      version: 3.0.4
+    '@types/jscodeshift':
+      specifier: ^17.3.0
+      version: 17.3.0
+    '@types/lodash-es':
+      specifier: 4.17.12
+      version: 4.17.12
+    '@types/mdast':
+      specifier: ^4.0.4
+      version: 4.0.4
+    '@types/node':
+      specifier: 22.12.0
+      version: 22.12.0
+    '@types/pdf-parse':
+      specifier: ^1.1.5
+      version: 1.1.5
+    '@types/react-color':
+      specifier: ^3.0.9
+      version: 3.0.13
+    '@types/sanitize-html':
+      specifier: 2.16.0
+      version: 2.16.0
+    '@types/ws':
+      specifier: ^8.18.1
+      version: 8.18.1
+    '@vitest/coverage-v8':
+      specifier: ^4.1.8
+      version: 4.1.8
+    ast-types:
+      specifier: 0.14.2
+      version: 0.14.2
+    autoprefixer:
+      specifier: ^10.4.19
+      version: 10.4.21
+    buffer:
+      specifier: ^6.0.3
+      version: 6.0.3
+    chroma-js:
+      specifier: ^3.2.0
+      version: 3.2.0
+    class-variance-authority:
+      specifier: 0.7.1
+      version: 0.7.1
+    clsx:
+      specifier: ^2.1.1
+      version: 2.1.1
+    cmdk:
+      specifier: ^1.1.1
+      version: 1.1.1
+    comlink:
+      specifier: ^4.4.1
+      version: 4.4.2
+    compression:
+      specifier: 1.8.1
+      version: 1.8.1
+    cors:
+      specifier: ^2.8.5
+      version: 2.8.5
+    date-fns:
+      specifier: ^4.1.0
+      version: 4.1.0
+    dotenv:
+      specifier: 16.4.7
+      version: 16.4.7
+    effect:
+      specifier: 3.20.0
+      version: 3.20.0
+    emoji-picker-react:
+      specifier: ^4.5.16
+      version: 4.12.2
+    emoji-regex:
+      specifier: ^10.3.0
+      version: 10.5.0
+    export-to-csv:
+      specifier: ^1.4.0
+      version: 1.4.0
+    express-winston:
+      specifier: ^4.2.0
+      version: 4.2.0
+    express-ws:
+      specifier: ^5.0.2
+      version: 5.0.2
+    file-type:
+      specifier: ^21.3.1
+      version: 21.3.3
+    framer-motion:
+      specifier: ^12.23.0
+      version: 12.23.12
+    frimousse:
+      specifier: ^0.3.0
+      version: 0.3.0
+    hast:
+      specifier: ^1.0.0
+      version: 1.0.0
+    hast-util-to-mdast:
+      specifier: ^10.1.2
+      version: 10.1.2
+    helmet:
+      specifier: ^7.1.0
+      version: 7.2.0
+    highlight.js:
+      specifier: ^11.8.0
+      version: 11.11.1
+    husky:
+      specifier: 9.1.7
+      version: 9.1.7
+    i18next:
+      specifier: 25.10.9
+      version: 25.10.9
+    i18next-icu:
+      specifier: 2.4.3
+      version: 2.4.3
+    i18next-resources-to-backend:
+      specifier: 1.2.1
+      version: 1.2.1
+    ioredis:
+      specifier: 5.7.0
+      version: 5.7.0
+    is-emoji-supported:
+      specifier: ^0.0.5
+      version: 0.0.5
+    isbot:
+      specifier: ^5.1.31
+      version: 5.2.1
+    jscodeshift:
+      specifier: ^17.3.0
+      version: 17.3.0
+    jsx-dom-cjs:
+      specifier: ^8.0.3
+      version: 8.1.6
+    linkifyjs:
+      specifier: ^4.3.2
+      version: 4.3.2
+    lint-staged:
+      specifier: 16.2.7
+      version: 16.2.7
+    lowlight:
+      specifier: ^3.0.0
+      version: 3.3.0
+    lucide-react:
+      specifier: 0.469.0
+      version: 0.469.0
+    mdast:
+      specifier: ^3.0.0
+      version: 3.0.0
+    mobx:
+      specifier: 6.12.0
+      version: 6.12.0
+    mobx-react:
+      specifier: 9.2.2
+      version: 9.2.2
+    mobx-utils:
+      specifier: 6.0.8
+      version: 6.0.8
+    next-themes:
+      specifier: 0.4.6
+      version: 0.4.6
+    oxfmt:
+      specifier: 0.35.0
+      version: 0.35.0
+    oxlint:
+      specifier: 1.51.0
+      version: 1.51.0
+    pdf-parse:
+      specifier: ^2.4.5
+      version: 2.4.5
+    postcss-cli:
+      specifier: ^11.0.0
+      version: 11.0.1
+    postcss-nested:
+      specifier: ^6.0.1
+      version: 6.2.0
+    prosemirror-codemark:
+      specifier: ^0.4.2
+      version: 0.4.2
+    react-color:
+      specifier: ^2.19.3
+      version: 2.19.3
+    react-day-picker:
+      specifier: 9.5.0
+      version: 9.5.0
+    react-dropzone:
+      specifier: ^14.2.3
+      version: 14.3.8
+    react-fast-compare:
+      specifier: ^3.2.2
+      version: 3.2.2
+    react-hook-form:
+      specifier: ^7.84.0
+      version: 7.84.0
+    react-i18next:
+      specifier: 16.6.6
+      version: 16.6.6
+    react-markdown:
+      specifier: ^10.1.0
+      version: 10.1.0
+    react-masonry-component:
+      specifier: ^6.3.0
+      version: 6.3.0
+    react-pdf-html:
+      specifier: ^2.1.2
+      version: 2.1.3
+    react-popper:
+      specifier: ^2.3.0
+      version: 2.3.0
+    react-router:
+      specifier: 8.3.0
+      version: 8.3.0
+    recharts:
+      specifier: ^2.15.4
+      version: 2.15.4
+    reflect-metadata:
+      specifier: ^0.2.2
+      version: 0.2.2
+    rehype-parse:
+      specifier: ^9.0.1
+      version: 9.0.1
+    rehype-remark:
+      specifier: ^10.0.1
+      version: 10.0.1
+    remark-gfm:
+      specifier: ^4.0.1
+      version: 4.0.1
+    remark-stringify:
+      specifier: ^11.0.0
+      version: 11.0.0
+    sanitize-html:
+      specifier: 2.17.7
+      version: 2.17.7
+    serve:
+      specifier: 14.2.5
+      version: 14.2.5
+    sharp:
+      specifier: ^0.35.4
+      version: 0.35.4
+    smooth-scroll-into-view-if-needed:
+      specifier: ^2.0.2
+      version: 2.0.2
+    storybook:
+      specifier: 10.4.6
+      version: 10.4.6
+    swr:
+      specifier: 2.4.2
+      version: 2.4.2
+    tailwind-merge:
+      specifier: 3.4.0
+      version: 3.4.0
+    tailwindcss:
+      specifier: 4.1.17
+      version: 4.1.17
+    tippy.js:
+      specifier: ^6.3.7
+      version: 6.3.7
+    tiptap-markdown:
+      specifier: ^0.8.10
+      version: 0.8.10
+    tsdown:
+      specifier: 0.16.0
+      version: 0.16.0
+    tsx:
+      specifier: 4.20.6
+      version: 4.20.6
+    turbo:
+      specifier: 2.10.11
+      version: 2.10.11
+    unified:
+      specifier: ^11.0.5
+      version: 11.0.5
+    use-font-face-observer:
+      specifier: ^1.3.0
+      version: 1.3.0
+    vite-tsconfig-paths:
+      specifier: ^5.1.4
+      version: 5.1.4
+    vitest:
+      specifier: ^4.1.8
+      version: 4.1.8
+    winston:
+      specifier: ^3.17.0
+      version: 3.17.0
+    ws:
+      specifier: 8.21.0
+      version: 8.21.0
+    y-indexeddb:
+      specifier: ^9.0.12
+      version: 9.0.12
+    y-prosemirror:
+      specifier: ^1.3.7
+      version: 1.3.7
+    y-protocols:
+      specifier: ^1.0.6
+      version: 1.0.6
+    yjs:
+      specifier: ^13.6.20
+      version: 13.6.27
+    zod:
+      specifier: ^3.25.76
+      version: 3.25.76
+
+overrides:
+  react: 19.2.8
+  react-dom: 19.2.8
+  react-is: ^19.2.8
+  '@types/react': 19.2.17
+  '@types/react-dom': 19.2.3
+  express: 4.22.0
+  '@react-router/serve>express': ^5.2.1
+  mdast-util-to-hast: 13.2.1
+  valibot: 1.4.2
+  glob: 11.1.0
+  brace-expansion: 5.0.9
+  nanoid: 3.3.18
+  esbuild: 0.28.1
+  '@babel/core': 7.29.7
+  '@babel/helpers': 7.29.7
+  '@babel/runtime': 7.29.7
+  chokidar: 3.6.0
+  prosemirror-view: 1.40.0
+  '@types/express': 4.17.23
+  typescript: 5.8.3
+  vite: 8.0.16
+  qs: 6.15.2
+  diff: 5.2.2
+  webpack: 5.104.1
+  lodash-es: 4.18.1
+  lodash: 4.18.1
+  markdown-it: 14.2.0
+  rollup: 4.59.0
+  minimatch@3: 3.1.4
+  minimatch@10: 10.2.3
+  serialize-javascript: 7.0.5
+  ajv@6: 6.14.0
+  ajv@8: 8.18.0
+  undici@7: 7.29.0
+  flatted: 3.4.2
+  picomatch: 2.3.2
+  yaml@1: 1.10.3
+  yaml@2: 2.8.3
+  path-to-regexp: 0.1.13
+  router>path-to-regexp: ^8.4.2
+  defu: 6.1.5
+  postcss: 8.5.25
+  postcss-selector-parser@>=7.1.0 <7.1.3: 7.1.3
+  axios: 1.18.1
+  follow-redirects: 1.16.0
+  uuid: 14.0.0
+  fast-uri: 3.1.6
+  js-yaml@4: 4.3.2
+  linkify-it: 5.0.2
+  body-parser: 1.20.6
+  tmp: 0.2.7
+  form-data: 4.0.6
+  ws@8: 8.21.0
+  ws@7: 7.5.11
+  '@opentelemetry/core': 2.8.0
+  '@opentelemetry/resources': 2.8.0
+  '@opentelemetry/sdk-trace-base': 2.8.0
+  morgan: 1.11.0
+  browserslist: '>=4.28.7'
+  toml: '>=4.2.0 <5'
+
+patchedDependencies:
+  react-color@2.19.3: 311b81530f5338988f8b57718f24870a7550637159d8360d69f668cba2f2033f
+
+importers:
+
+  .:
+    devDependencies:
+      husky:
+        specifier: 'catalog:'
+        version: 9.1.7
+      lint-staged:
+        specifier: 'catalog:'
+        version: 16.2.7
+      oxfmt:
+        specifier: 'catalog:'
+        version: 0.35.0
+      oxlint:
+        specifier: 'catalog:'
+        version: 1.51.0
+      react-doctor:
+        specifier: ^0.4.2
+        version: 0.4.2(eslint@10.4.1(jiti@2.7.0))
+      turbo:
+        specifier: 'catalog:'
+        version: 2.10.11
+
+  apps/admin:
+    dependencies:
+      '@bprogress/core':
+        specifier: 'catalog:'
+        version: 1.3.4
+      '@fontsource-variable/inter':
+        specifier: 'catalog:'
+        version: 5.2.8
+      '@fontsource/ibm-plex-mono':
+        specifier: 'catalog:'
+        version: 5.2.7
+      '@fontsource/material-symbols-rounded':
+        specifier: 'catalog:'
+        version: 5.2.30
+      '@headlessui/react':
+        specifier: 'catalog:'
+        version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../../packages/constants
+      '@plane/hooks':
+        specifier: workspace:*
+        version: link:../../packages/hooks
+      '@plane/services':
+        specifier: workspace:*
+        version: link:../../packages/services
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../../packages/types
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      '@react-router/node':
+        specifier: 'catalog:'
+        version: 8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      isbot:
+        specifier: 'catalog:'
+        version: 5.2.1
+      lodash-es:
+        specifier: 4.18.1
+        version: 4.18.1
+      lucide-react:
+        specifier: 'catalog:'
+        version: 0.469.0(react@19.2.8)
+      mobx:
+        specifier: 'catalog:'
+        version: 6.12.0
+      mobx-react:
+        specifier: 'catalog:'
+        version: 9.2.2(mobx@6.12.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      next-themes:
+        specifier: 'catalog:'
+        version: 0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-dom:
+        specifier: 19.2.8
+        version: 19.2.8(react@19.2.8)
+      react-hook-form:
+        specifier: 'catalog:'
+        version: 7.84.0(react@19.2.8)
+      react-router:
+        specifier: 'catalog:'
+        version: 8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      serve:
+        specifier: 'catalog:'
+        version: 14.2.5
+      swr:
+        specifier: 'catalog:'
+        version: 2.4.2(react@19.2.8)
+      uuid:
+        specifier: 14.0.0
+        version: 14.0.0
+    devDependencies:
+      '@plane/tailwind-config':
+        specifier: workspace:*
+        version: link:../../packages/tailwind-config
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../../packages/typescript-config
+      '@react-router/dev':
+        specifier: 'catalog:'
+        version: 8.3.0(@react-router/serve@8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3))(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+      '@tailwindcss/postcss':
+        specifier: 'catalog:'
+        version: 4.1.17
+      '@types/lodash-es':
+        specifier: 'catalog:'
+        version: 4.17.12
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      dotenv:
+        specifier: 'catalog:'
+        version: 16.4.7
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      vite:
+        specifier: 8.0.16
+        version: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+      vite-tsconfig-paths:
+        specifier: 'catalog:'
+        version: 5.1.4(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+
+  apps/live:
+    dependencies:
+      '@effect/platform':
+        specifier: 'catalog:'
+        version: 0.94.1(effect@3.20.0)
+      '@effect/platform-node':
+        specifier: 'catalog:'
+        version: 0.104.0(@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      '@fontsource/inter':
+        specifier: 'catalog:'
+        version: 5.2.8
+      '@hocuspocus/extension-database':
+        specifier: 'catalog:'
+        version: 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      '@hocuspocus/extension-logger':
+        specifier: 'catalog:'
+        version: 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      '@hocuspocus/extension-redis':
+        specifier: 'catalog:'
+        version: 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      '@hocuspocus/server':
+        specifier: 'catalog:'
+        version: 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      '@hocuspocus/transformer':
+        specifier: 'catalog:'
+        version: 2.15.2(@tiptap/core@2.26.3(@tiptap/pm@3.6.6))(@tiptap/pm@3.6.6)(y-prosemirror@1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27)
+      '@plane/decorators':
+        specifier: workspace:*
+        version: link:../../packages/decorators
+      '@plane/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@plane/logger':
+        specifier: workspace:*
+        version: link:../../packages/logger
+      '@plane/services':
+        specifier: workspace:*
+        version: link:../../packages/services
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../../packages/types
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      '@react-pdf/renderer':
+        specifier: 'catalog:'
+        version: 4.8.1(react@19.2.8)
+      '@react-pdf/types':
+        specifier: 'catalog:'
+        version: 2.13.1
+      '@tiptap/core':
+        specifier: 'catalog:'
+        version: 2.26.3(@tiptap/pm@3.6.6)
+      '@tiptap/html':
+        specifier: 'catalog:'
+        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@3.6.6))(@tiptap/pm@3.6.6)
+      axios:
+        specifier: 1.18.1
+        version: 1.18.1
+      compression:
+        specifier: 'catalog:'
+        version: 1.8.1
+      cors:
+        specifier: 'catalog:'
+        version: 2.8.5
+      dotenv:
+        specifier: 'catalog:'
+        version: 16.4.7
+      effect:
+        specifier: 'catalog:'
+        version: 3.20.0
+      express:
+        specifier: 4.22.0
+        version: 4.22.0
+      express-ws:
+        specifier: 'catalog:'
+        version: 5.0.2(express@4.22.0)
+      helmet:
+        specifier: 'catalog:'
+        version: 7.2.0
+      ioredis:
+        specifier: 'catalog:'
+        version: 5.7.0
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      sharp:
+        specifier: 'catalog:'
+        version: 0.35.4(@types/node@22.12.0)
+      uuid:
+        specifier: 14.0.0
+        version: 14.0.0
+      ws:
+        specifier: 'catalog:'
+        version: 8.21.0
+      y-prosemirror:
+        specifier: 'catalog:'
+        version: 1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      y-protocols:
+        specifier: 'catalog:'
+        version: 1.0.6(yjs@13.6.27)
+      yjs:
+        specifier: 'catalog:'
+        version: 13.6.27
+      zod:
+        specifier: 'catalog:'
+        version: 3.25.76
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../../packages/typescript-config
+      '@types/compression':
+        specifier: 'catalog:'
+        version: 1.8.1
+      '@types/cors':
+        specifier: 'catalog:'
+        version: 2.8.19
+      '@types/express':
+        specifier: 4.17.23
+        version: 4.17.23
+      '@types/express-ws':
+        specifier: 'catalog:'
+        version: 3.0.5
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/pdf-parse':
+        specifier: 'catalog:'
+        version: 1.1.5
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/ws':
+        specifier: 'catalog:'
+        version: 8.18.1
+      '@vitest/coverage-v8':
+        specifier: 'catalog:'
+        version: 4.1.8(vitest@4.1.8)
+      pdf-parse:
+        specifier: 'catalog:'
+        version: 2.4.5
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@22.12.0)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+
+  apps/space:
+    dependencies:
+      '@bprogress/core':
+        specifier: 'catalog:'
+        version: 1.3.4
+      '@fontsource-variable/inter':
+        specifier: 'catalog:'
+        version: 5.2.8
+      '@fontsource/ibm-plex-mono':
+        specifier: 'catalog:'
+        version: 5.2.7
+      '@fontsource/material-symbols-rounded':
+        specifier: 'catalog:'
+        version: 5.2.30
+      '@headlessui/react':
+        specifier: 'catalog:'
+        version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../../packages/constants
+      '@plane/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@plane/i18n':
+        specifier: workspace:*
+        version: link:../../packages/i18n
+      '@plane/propel':
+        specifier: workspace:*
+        version: link:../../packages/propel
+      '@plane/services':
+        specifier: workspace:*
+        version: link:../../packages/services
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../../packages/types
+      '@plane/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      '@popperjs/core':
+        specifier: 'catalog:'
+        version: 2.11.8
+      '@react-router/node':
+        specifier: 'catalog:'
+        version: 8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      '@react-router/serve':
+        specifier: 'catalog:'
+        version: 8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      axios:
+        specifier: 1.18.1
+        version: 1.18.1
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
+      date-fns:
+        specifier: 'catalog:'
+        version: 4.1.0
+      isbot:
+        specifier: 'catalog:'
+        version: 5.2.1
+      lodash-es:
+        specifier: 4.18.1
+        version: 4.18.1
+      lucide-react:
+        specifier: 'catalog:'
+        version: 0.469.0(react@19.2.8)
+      mobx:
+        specifier: 'catalog:'
+        version: 6.12.0
+      mobx-react:
+        specifier: 'catalog:'
+        version: 9.2.2(mobx@6.12.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      mobx-utils:
+        specifier: 'catalog:'
+        version: 6.0.8(mobx@6.12.0)
+      next-themes:
+        specifier: 'catalog:'
+        version: 0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-dom:
+        specifier: 19.2.8
+        version: 19.2.8(react@19.2.8)
+      react-dropzone:
+        specifier: 'catalog:'
+        version: 14.3.8(react@19.2.8)
+      react-hook-form:
+        specifier: 'catalog:'
+        version: 7.84.0(react@19.2.8)
+      react-popper:
+        specifier: 'catalog:'
+        version: 2.3.0(@popperjs/core@2.11.8)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-router:
+        specifier: 'catalog:'
+        version: 8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      swr:
+        specifier: 'catalog:'
+        version: 2.4.2(react@19.2.8)
+      uuid:
+        specifier: 14.0.0
+        version: 14.0.0
+    devDependencies:
+      '@plane/tailwind-config':
+        specifier: workspace:*
+        version: link:../../packages/tailwind-config
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../../packages/typescript-config
+      '@react-router/dev':
+        specifier: 'catalog:'
+        version: 8.3.0(@react-router/serve@8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3))(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+      '@tailwindcss/postcss':
+        specifier: 'catalog:'
+        version: 4.1.17
+      '@tailwindcss/typography':
+        specifier: 'catalog:'
+        version: 0.5.19
+      '@types/lodash-es':
+        specifier: 'catalog:'
+        version: 4.17.12
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      dotenv:
+        specifier: 'catalog:'
+        version: 16.4.7
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      vite:
+        specifier: 8.0.16
+        version: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+      vite-tsconfig-paths:
+        specifier: 'catalog:'
+        version: 5.1.4(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+
+  apps/web:
+    dependencies:
+      '@atlaskit/pragmatic-drag-and-drop':
+        specifier: 'catalog:'
+        version: 1.7.4
+      '@atlaskit/pragmatic-drag-and-drop-auto-scroll':
+        specifier: 'catalog:'
+        version: 1.4.0
+      '@atlaskit/pragmatic-drag-and-drop-hitbox':
+        specifier: 'catalog:'
+        version: 1.1.0
+      '@bprogress/core':
+        specifier: 'catalog:'
+        version: 1.3.4
+      '@fontsource-variable/inter':
+        specifier: 'catalog:'
+        version: 5.2.8
+      '@fontsource/ibm-plex-mono':
+        specifier: 'catalog:'
+        version: 5.2.7
+      '@fontsource/material-symbols-rounded':
+        specifier: 'catalog:'
+        version: 5.2.30
+      '@headlessui/react':
+        specifier: 'catalog:'
+        version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../../packages/constants
+      '@plane/editor':
+        specifier: workspace:*
+        version: link:../../packages/editor
+      '@plane/hooks':
+        specifier: workspace:*
+        version: link:../../packages/hooks
+      '@plane/i18n':
+        specifier: workspace:*
+        version: link:../../packages/i18n
+      '@plane/propel':
+        specifier: workspace:*
+        version: link:../../packages/propel
+      '@plane/services':
+        specifier: workspace:*
+        version: link:../../packages/services
+      '@plane/shared-state':
+        specifier: workspace:*
+        version: link:../../packages/shared-state
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../../packages/types
+      '@plane/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      '@popperjs/core':
+        specifier: 'catalog:'
+        version: 2.11.8
+      '@react-pdf/renderer':
+        specifier: 'catalog:'
+        version: 4.8.1(react@19.2.8)
+      '@react-router/node':
+        specifier: 'catalog:'
+        version: 8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      '@tanstack/react-table':
+        specifier: 'catalog:'
+        version: 8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      axios:
+        specifier: 1.18.1
+        version: 1.18.1
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
+      cmdk:
+        specifier: 'catalog:'
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      comlink:
+        specifier: 'catalog:'
+        version: 4.4.2
+      date-fns:
+        specifier: 'catalog:'
+        version: 4.1.0
+      emoji-picker-react:
+        specifier: 'catalog:'
+        version: 4.12.2(react@19.2.8)
+      export-to-csv:
+        specifier: 'catalog:'
+        version: 1.4.0
+      isbot:
+        specifier: 'catalog:'
+        version: 5.2.1
+      lodash-es:
+        specifier: 4.18.1
+        version: 4.18.1
+      lucide-react:
+        specifier: 'catalog:'
+        version: 0.469.0(react@19.2.8)
+      mobx:
+        specifier: 'catalog:'
+        version: 6.12.0
+      mobx-react:
+        specifier: 'catalog:'
+        version: 9.2.2(mobx@6.12.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      mobx-utils:
+        specifier: 'catalog:'
+        version: 6.0.8(mobx@6.12.0)
+      next-themes:
+        specifier: 'catalog:'
+        version: 0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-color:
+        specifier: 'catalog:'
+        version: 2.19.3(patch_hash=311b81530f5338988f8b57718f24870a7550637159d8360d69f668cba2f2033f)(react@19.2.8)
+      react-dom:
+        specifier: 19.2.8
+        version: 19.2.8(react@19.2.8)
+      react-dropzone:
+        specifier: 'catalog:'
+        version: 14.3.8(react@19.2.8)
+      react-fast-compare:
+        specifier: 'catalog:'
+        version: 3.2.2
+      react-hook-form:
+        specifier: 'catalog:'
+        version: 7.84.0(react@19.2.8)
+      react-is:
+        specifier: ^19.2.8
+        version: 19.2.8
+      react-markdown:
+        specifier: 'catalog:'
+        version: 10.1.0(@types/react@19.2.17)(react@19.2.8)
+      react-masonry-component:
+        specifier: 'catalog:'
+        version: 6.3.0(react@19.2.8)
+      react-pdf-html:
+        specifier: 'catalog:'
+        version: 2.1.3(@react-pdf/renderer@4.8.1(react@19.2.8))(react@19.2.8)
+      react-popper:
+        specifier: 'catalog:'
+        version: 2.3.0(@popperjs/core@2.11.8)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-router:
+        specifier: 'catalog:'
+        version: 8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      recharts:
+        specifier: 'catalog:'
+        version: 2.15.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      serve:
+        specifier: 'catalog:'
+        version: 14.2.5
+      smooth-scroll-into-view-if-needed:
+        specifier: 'catalog:'
+        version: 2.0.2
+      swr:
+        specifier: 'catalog:'
+        version: 2.4.2(react@19.2.8)
+      use-font-face-observer:
+        specifier: 'catalog:'
+        version: 1.3.0(react@19.2.8)
+      uuid:
+        specifier: 14.0.0
+        version: 14.0.0
+    devDependencies:
+      '@plane/tailwind-config':
+        specifier: workspace:*
+        version: link:../../packages/tailwind-config
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../../packages/typescript-config
+      '@react-router/dev':
+        specifier: 'catalog:'
+        version: 8.3.0(@react-router/serve@8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3))(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+      '@tailwindcss/postcss':
+        specifier: 'catalog:'
+        version: 4.1.17
+      '@tailwindcss/typography':
+        specifier: 'catalog:'
+        version: 0.5.19
+      '@types/lodash-es':
+        specifier: 'catalog:'
+        version: 4.17.12
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-color':
+        specifier: 'catalog:'
+        version: 3.0.13(@types/react@19.2.17)
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      dotenv:
+        specifier: 'catalog:'
+        version: 16.4.7
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      vite:
+        specifier: 8.0.16
+        version: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+      vite-tsconfig-paths:
+        specifier: 'catalog:'
+        version: 5.1.4(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+
+  packages/codemods:
+    devDependencies:
+      '@hypermod/utils':
+        specifier: 'catalog:'
+        version: 0.7.1
+      '@types/jscodeshift':
+        specifier: 'catalog:'
+        version: 17.3.0
+      ast-types:
+        specifier: 'catalog:'
+        version: 0.14.2
+      jscodeshift:
+        specifier: 'catalog:'
+        version: 17.3.0
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@22.12.0)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+
+  packages/constants:
+    dependencies:
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../types
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/decorators:
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/express':
+        specifier: 4.17.23
+        version: 4.17.23
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/ws':
+        specifier: 'catalog:'
+        version: 8.18.1
+      reflect-metadata:
+        specifier: 'catalog:'
+        version: 0.2.2
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/editor:
+    dependencies:
+      '@floating-ui/dom':
+        specifier: 'catalog:'
+        version: 1.8.0
+      '@floating-ui/react':
+        specifier: 'catalog:'
+        version: 0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@headlessui/react':
+        specifier: 'catalog:'
+        version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@hocuspocus/provider':
+        specifier: 'catalog:'
+        version: 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../constants
+      '@plane/hooks':
+        specifier: workspace:*
+        version: link:../hooks
+      '@plane/propel':
+        specifier: workspace:*
+        version: link:../propel
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../types
+      '@plane/ui':
+        specifier: workspace:*
+        version: link:../ui
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../utils
+      '@tiptap/core':
+        specifier: 'catalog:'
+        version: 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/extension-blockquote':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-character-count':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-collaboration':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(y-prosemirror@1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))
+      '@tiptap/extension-document':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-emoji':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1))(emojibase@16.0.0)
+      '@tiptap/extension-heading':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-image':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-list-item':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-mention':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1))
+      '@tiptap/extension-placeholder':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-task-item':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-task-list':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-text':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-text-align':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-text-style':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-underline':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/html':
+        specifier: 'catalog:'
+        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/pm':
+        specifier: 'catalog:'
+        version: 2.26.1
+      '@tiptap/react':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@tiptap/starter-kit':
+        specifier: 'catalog:'
+        version: 2.26.1
+      '@tiptap/suggestion':
+        specifier: 'catalog:'
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      buffer:
+        specifier: 'catalog:'
+        version: 6.0.3
+      emoji-regex:
+        specifier: 'catalog:'
+        version: 10.5.0
+      highlight.js:
+        specifier: 'catalog:'
+        version: 11.11.1
+      is-emoji-supported:
+        specifier: 'catalog:'
+        version: 0.0.5
+      jsx-dom-cjs:
+        specifier: 'catalog:'
+        version: 8.1.6
+      linkifyjs:
+        specifier: 'catalog:'
+        version: 4.3.2
+      lodash-es:
+        specifier: 4.18.1
+        version: 4.18.1
+      lowlight:
+        specifier: 'catalog:'
+        version: 3.3.0
+      lucide-react:
+        specifier: 'catalog:'
+        version: 0.469.0(react@19.2.8)
+      prosemirror-codemark:
+        specifier: 'catalog:'
+        version: 0.4.2(prosemirror-inputrules@1.5.0)(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-dom:
+        specifier: 19.2.8
+        version: 19.2.8(react@19.2.8)
+      tippy.js:
+        specifier: 'catalog:'
+        version: 6.3.7
+      tiptap-markdown:
+        specifier: 'catalog:'
+        version: 0.8.10(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      uuid:
+        specifier: 14.0.0
+        version: 14.0.0
+      y-indexeddb:
+        specifier: 'catalog:'
+        version: 9.0.12(yjs@13.6.27)
+      y-prosemirror:
+        specifier: 'catalog:'
+        version: 1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      y-protocols:
+        specifier: 'catalog:'
+        version: 1.0.6(yjs@13.6.27)
+      yjs:
+        specifier: 'catalog:'
+        version: 13.6.27
+    devDependencies:
+      '@plane/tailwind-config':
+        specifier: workspace:*
+        version: link:../tailwind-config
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/lodash-es':
+        specifier: 'catalog:'
+        version: 4.17.12
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      postcss:
+        specifier: 8.5.25
+        version: 8.5.25
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/hooks:
+    dependencies:
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/i18n:
+    dependencies:
+      i18next:
+        specifier: 'catalog:'
+        version: 25.10.9(typescript@5.8.3)
+      i18next-icu:
+        specifier: 'catalog:'
+        version: 2.4.3(intl-messageformat@10.7.16)
+      i18next-resources-to-backend:
+        specifier: 'catalog:'
+        version: 1.2.1
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-i18next:
+        specifier: 'catalog:'
+        version: 16.6.6(i18next@25.10.9(typescript@5.8.3))(react@19.2.8)(typescript@5.8.3)
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      tsx:
+        specifier: 'catalog:'
+        version: 4.20.6
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/logger:
+    dependencies:
+      express-winston:
+        specifier: 'catalog:'
+        version: 4.2.0(winston@3.17.0)
+      winston:
+        specifier: 'catalog:'
+        version: 3.17.0
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/express':
+        specifier: 4.17.23
+        version: 4.17.23
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/propel:
+    dependencies:
+      '@base-ui-components/react':
+        specifier: 'catalog:'
+        version: 1.0.0-beta.3(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../constants
+      '@plane/hooks':
+        specifier: workspace:*
+        version: link:../hooks
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../types
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../utils
+      '@tanstack/react-table':
+        specifier: 'catalog:'
+        version: 8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      class-variance-authority:
+        specifier: 'catalog:'
+        version: 0.7.1
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
+      cmdk:
+        specifier: 'catalog:'
+        version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      framer-motion:
+        specifier: 'catalog:'
+        version: 12.23.12(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      frimousse:
+        specifier: 'catalog:'
+        version: 0.3.0(react@19.2.8)(typescript@5.8.3)
+      lucide-react:
+        specifier: 'catalog:'
+        version: 0.469.0(react@19.2.8)
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-day-picker:
+        specifier: 'catalog:'
+        version: 9.5.0(react@19.2.8)
+      react-dom:
+        specifier: 19.2.8
+        version: 19.2.8(react@19.2.8)
+      recharts:
+        specifier: 'catalog:'
+        version: 2.15.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tailwind-merge:
+        specifier: 'catalog:'
+        version: 3.4.0
+      use-font-face-observer:
+        specifier: 'catalog:'
+        version: 1.3.0(react@19.2.8)
+    devDependencies:
+      '@plane/tailwind-config':
+        specifier: workspace:*
+        version: link:../tailwind-config
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@storybook/addon-designs':
+        specifier: 'catalog:'
+        version: 11.1.3(@storybook/addon-docs@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1)))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      '@storybook/addon-docs':
+        specifier: 'catalog:'
+        version: 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
+      '@storybook/react-vite':
+        specifier: 'catalog:'
+        version: 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      storybook:
+        specifier: 'catalog:'
+        version: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/services:
+    dependencies:
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../constants
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../types
+      axios:
+        specifier: 1.18.1
+        version: 1.18.1
+      file-type:
+        specifier: 'catalog:'
+        version: 21.3.3
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@22.12.0)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+
+  packages/shared-state:
+    dependencies:
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../constants
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../types
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../utils
+      lodash-es:
+        specifier: 4.18.1
+        version: 4.18.1
+      mobx:
+        specifier: 'catalog:'
+        version: 6.12.0
+      mobx-utils:
+        specifier: 'catalog:'
+        version: 6.0.8(mobx@6.12.0)
+      uuid:
+        specifier: 14.0.0
+        version: 14.0.0
+      zod:
+        specifier: 'catalog:'
+        version: 3.25.76
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/lodash-es':
+        specifier: 'catalog:'
+        version: 4.17.12
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/tailwind-config:
+    dependencies:
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@tailwindcss/postcss':
+        specifier: 'catalog:'
+        version: 4.1.17
+      postcss:
+        specifier: 8.5.25
+        version: 8.5.25
+    devDependencies:
+      tailwindcss:
+        specifier: 'catalog:'
+        version: 4.1.17
+
+  packages/types:
+    dependencies:
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-dom:
+        specifier: 19.2.8
+        version: 19.2.8(react@19.2.8)
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/typescript-config: {}
+
+  packages/ui:
+    dependencies:
+      '@atlaskit/pragmatic-drag-and-drop':
+        specifier: 'catalog:'
+        version: 1.7.4
+      '@atlaskit/pragmatic-drag-and-drop-hitbox':
+        specifier: 'catalog:'
+        version: 1.1.0
+      '@headlessui/react':
+        specifier: 'catalog:'
+        version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../constants
+      '@plane/hooks':
+        specifier: workspace:*
+        version: link:../hooks
+      '@plane/propel':
+        specifier: workspace:*
+        version: link:../propel
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../types
+      '@plane/utils':
+        specifier: workspace:*
+        version: link:../utils
+      '@popperjs/core':
+        specifier: 'catalog:'
+        version: 2.11.8
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
+      lodash-es:
+        specifier: 4.18.1
+        version: 4.18.1
+      lucide-react:
+        specifier: 'catalog:'
+        version: 0.469.0(react@19.2.8)
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      react-color:
+        specifier: 'catalog:'
+        version: 2.19.3(patch_hash=311b81530f5338988f8b57718f24870a7550637159d8360d69f668cba2f2033f)(react@19.2.8)
+      react-day-picker:
+        specifier: 'catalog:'
+        version: 9.5.0(react@19.2.8)
+      react-dom:
+        specifier: 19.2.8
+        version: 19.2.8(react@19.2.8)
+      react-popper:
+        specifier: 'catalog:'
+        version: 2.3.0(@popperjs/core@2.11.8)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tailwind-merge:
+        specifier: 'catalog:'
+        version: 3.4.0
+      use-font-face-observer:
+        specifier: 'catalog:'
+        version: 1.3.0(react@19.2.8)
+    devDependencies:
+      '@chromatic-com/storybook':
+        specifier: 'catalog:'
+        version: 5.2.1(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      '@plane/tailwind-config':
+        specifier: workspace:*
+        version: link:../tailwind-config
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@storybook/addon-docs':
+        specifier: 'catalog:'
+        version: 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      '@storybook/addon-links':
+        specifier: 'catalog:'
+        version: 10.4.6(@types/react@19.2.17)(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      '@storybook/addon-onboarding':
+        specifier: 'catalog:'
+        version: 10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      '@storybook/addon-styling-webpack':
+        specifier: 'catalog:'
+        version: 3.0.2(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      '@storybook/addon-webpack5-compiler-swc':
+        specifier: 'catalog:'
+        version: 4.0.3(@swc/helpers@0.5.17)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      '@storybook/react':
+        specifier: 'catalog:'
+        version: 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      '@storybook/react-webpack5':
+        specifier: 'catalog:'
+        version: 10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(postcss@8.5.25)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      '@types/lodash-es':
+        specifier: 'catalog:'
+        version: 4.17.12
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/react-color':
+        specifier: 'catalog:'
+        version: 3.0.13(@types/react@19.2.17)
+      '@types/react-dom':
+        specifier: 19.2.3
+        version: 19.2.3(@types/react@19.2.17)
+      autoprefixer:
+        specifier: 'catalog:'
+        version: 10.4.21(postcss@8.5.25)
+      postcss-cli:
+        specifier: 'catalog:'
+        version: 11.0.1(jiti@2.7.0)(postcss@8.5.25)(tsx@4.20.6)
+      postcss-nested:
+        specifier: 'catalog:'
+        version: 6.2.0(postcss@8.5.25)
+      storybook:
+        specifier: 'catalog:'
+        version: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+  packages/utils:
+    dependencies:
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
+      '@plane/constants':
+        specifier: workspace:*
+        version: link:../constants
+      '@plane/types':
+        specifier: workspace:*
+        version: link:../types
+      chroma-js:
+        specifier: 'catalog:'
+        version: 3.2.0
+      clsx:
+        specifier: 'catalog:'
+        version: 2.1.1
+      date-fns:
+        specifier: 'catalog:'
+        version: 4.1.0
+      hast:
+        specifier: 'catalog:'
+        version: 1.0.0
+      hast-util-to-mdast:
+        specifier: 'catalog:'
+        version: 10.1.2
+      lodash-es:
+        specifier: 4.18.1
+        version: 4.18.1
+      lucide-react:
+        specifier: 'catalog:'
+        version: 0.469.0(react@19.2.8)
+      mdast:
+        specifier: 'catalog:'
+        version: 3.0.0
+      react:
+        specifier: 19.2.8
+        version: 19.2.8
+      rehype-parse:
+        specifier: 'catalog:'
+        version: 9.0.1
+      rehype-remark:
+        specifier: 'catalog:'
+        version: 10.0.1
+      remark-gfm:
+        specifier: 'catalog:'
+        version: 4.0.1
+      remark-stringify:
+        specifier: 'catalog:'
+        version: 11.0.0
+      sanitize-html:
+        specifier: 'catalog:'
+        version: 2.17.7
+      tailwind-merge:
+        specifier: 'catalog:'
+        version: 3.4.0
+      unified:
+        specifier: 'catalog:'
+        version: 11.0.5
+      uuid:
+        specifier: 14.0.0
+        version: 14.0.0
+    devDependencies:
+      '@plane/typescript-config':
+        specifier: workspace:*
+        version: link:../typescript-config
+      '@types/chroma-js':
+        specifier: 'catalog:'
+        version: 3.1.2
+      '@types/hast':
+        specifier: 'catalog:'
+        version: 3.0.4
+      '@types/lodash-es':
+        specifier: 'catalog:'
+        version: 4.17.12
+      '@types/mdast':
+        specifier: 'catalog:'
+        version: 4.0.4
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
+      '@types/react':
+        specifier: 19.2.17
+        version: 19.2.17
+      '@types/sanitize-html':
+        specifier: 'catalog:'
+        version: 2.16.0
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3)
+      typescript:
+        specifier: 5.8.3
+        version: 5.8.3
+
+packages:
+
+  '@adobe/css-tools@4.4.4':
+    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  '@atlaskit/pragmatic-drag-and-drop-auto-scroll@1.4.0':
+    resolution: {integrity: sha512-5GoikoTSW13UX76F9TDeWB8x3jbbGlp/Y+3aRkHe1MOBMkrWkwNpJ42MIVhhX/6NSeaZiPumP0KbGJVs2tOWSQ==}
+
+  '@atlaskit/pragmatic-drag-and-drop-hitbox@1.1.0':
+    resolution: {integrity: sha512-JWt6eVp6Br2FPHRM8s0dUIHQk/jFInGP1f3ti5CdtM1Ji5/pt8Akm44wDC063Gv2i5RGseixtbW0z/t6RYtbdg==}
+
+  '@atlaskit/pragmatic-drag-and-drop@1.7.4':
+    resolution: {integrity: sha512-lZHnO9BJdHPKnwB0uvVUCyDnIhL+WAHzXQ2EXX0qacogOsnvIUiCgY0BLKhBqTCWln3/f/Ox5jU54MKO6ayh9A==}
+
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.7':
+    resolution: {integrity: sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    resolution: {integrity: sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.29.7':
+    resolution: {integrity: sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    resolution: {integrity: sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/helper-optimise-call-expression@7.29.7':
+    resolution: {integrity: sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.29.7':
+    resolution: {integrity: sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    resolution: {integrity: sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.7':
+    resolution: {integrity: sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-flow@7.27.1':
+    resolution: {integrity: sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-syntax-jsx@7.29.7':
+    resolution: {integrity: sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-syntax-typescript@7.29.7':
+    resolution: {integrity: sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-transform-class-properties@7.27.1':
+    resolution: {integrity: sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-transform-flow-strip-types@7.27.1':
+    resolution: {integrity: sha512-G5eDKsu50udECw7DL2AcsysXiQyB7Nfg521t2OAJ4tbfTJ27doHLeF/vlI1NZGlLdbb/v+ibvtL1YBQqYOwJGg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7':
+    resolution: {integrity: sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1':
+    resolution: {integrity: sha512-aGZh6xMo6q9vq1JGcw58lZ1Z0+i0xB2x0XaauNIUXd6O1xXc3RwoWEBlsTQrY4KQ9Jf0s5rgD6SiNkaUdJegTA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-transform-optional-chaining@7.28.5':
+    resolution: {integrity: sha512-N6fut9IZlPnjPwgiQkXNhb+cT8wQKFlJNqcZkWlcTqkcqx6/kU4ynGmLFoa4LViBSirn05YAwk+sQBbPfxtYzQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-transform-private-methods@7.27.1':
+    resolution: {integrity: sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/plugin-transform-typescript@7.29.7':
+    resolution: {integrity: sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/preset-flow@7.27.1':
+    resolution: {integrity: sha512-ez3a2it5Fn6P54W8QkbfIyyIbxlXvcxyWHHvno1Wg0Ej5eiJY5hBb8ExttoIOJJk7V2dZE6prP7iby5q2aQ0Lg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/preset-typescript@7.29.7':
+    resolution: {integrity: sha512-/Foi8vKY2EVbed/1eZx0gJEEwHAIxogrySI7rULcRIvhZzbvoE/b5qG5Ghc0WKAFKOHA9SD1x7RsFlOYdutIiQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/register@7.28.3':
+    resolution: {integrity: sha512-CieDOtd8u208eI49bYl4z1J22ySFw87IGwE+IswFEExH7e3rLgKb0WNQeumnacQ1+VoDJLYI5QFA3AJZuyZQfA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': 7.29.7
+
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.7':
+    resolution: {integrity: sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.7':
+    resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
+    engines: {node: '>=6.9.0'}
+
+  '@base-ui-components/react@1.0.0-beta.3':
+    resolution: {integrity: sha512-4sAq6zmDA9ixV2HRjjeM1+tSEw5R6nvGjXUQmFoQnC3DZLEUdwO94gWDmUDdpoDuChn27jdbaJs9F0Ih4w2UAA==}
+    engines: {node: '>=14.0.0'}
+    deprecated: Package was renamed to @base-ui/react
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@base-ui-components/utils@0.1.1':
+    resolution: {integrity: sha512-HWXZA8upEKgrdL1rQqxWu1H+2tB2cXzY2jCxvgnpUv3eoWN2jldhXxMZnXIjZF7jahGxSWXfSIM/qskiTWFFxA==}
+    deprecated: Package was renamed to @base-ui/utils
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@base-ui/react@1.7.0':
+    resolution: {integrity: sha512-j+8QjX44C32jrXD/qyEAGpFr70FRpGL2CY61mQd9nBPWN737CK0xxD1ceJ055rW4RtdvFDT1e7otzdlfxvsYug==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@date-fns/tz': ^1.2.0
+      '@types/react': 19.2.17
+      date-fns: ^4.0.0
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@date-fns/tz':
+        optional: true
+      '@types/react':
+        optional: true
+      date-fns:
+        optional: true
+
+  '@base-ui/utils@0.3.2':
+    resolution: {integrity: sha512-oWy1aq/I2GmYjpl4PhEAhzflF8VPGKgZeq0xAWTbfD5KBWyxcN0ZP2+WHSUm/5Z6lVMBDLReLcoXwSYoRc/zNQ==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@bcoe/v8-coverage@1.0.2':
+    resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
+    engines: {node: '>=18'}
+
+  '@borewit/text-codec@0.1.1':
+    resolution: {integrity: sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==}
+
+  '@bprogress/core@1.3.4':
+    resolution: {integrity: sha512-q/AqpurI/1uJzOrQROuZWixn/+ARekh+uvJGwLCP6HQ/EqAX4SkvNf618tSBxL4NysC0MwqAppb/mRw6Tzi61w==}
+
+  '@chromatic-com/storybook@5.2.1':
+    resolution: {integrity: sha512-z6I7NJk/0VngA64y5TNYaB4Hc2X8+90n4op6lBt9PvWk5TmIlFLDqdX33rlrwbNRkkYijVgA/wO04rVYXi5Mlg==}
+    engines: {node: '>=20.0.0', yarn: '>=1.22.18'}
+    peerDependencies:
+      storybook: ^0.0.0-0 || ^10.1.0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0 || ^10.5.0-0 || ^10.6.0-0
+
+  '@colors/colors@1.6.0':
+    resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
+    engines: {node: '>=0.1.90'}
+
+  '@dabh/diagnostics@2.0.3':
+    resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
+
+  '@date-fns/tz@1.4.1':
+    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
+
+  '@effect/cluster@0.56.1':
+    resolution: {integrity: sha512-gnrsH6kfrUjn+82j/bw1IR4yFqJqV8tc7xZvrbJPRgzANycc6K1hu3LMg548uYbUkTzD8YYyqrSatMO1mkQpzw==}
+    peerDependencies:
+      '@effect/platform': ^0.94.1
+      '@effect/rpc': ^0.73.0
+      '@effect/sql': ^0.49.0
+      '@effect/workflow': ^0.16.0
+      effect: ^3.19.14
+
+  '@effect/experimental@0.58.0':
+    resolution: {integrity: sha512-IEP9sapjF6rFy5TkoqDPc86st/fnqUfjT7Xa3pWJrFGr1hzaMXHo+mWsYOZS9LAOVKnpHuVziDK97EP5qsCHVA==}
+    peerDependencies:
+      '@effect/platform': ^0.94.0
+      effect: ^3.19.13
+      ioredis: ^5
+      lmdb: ^3
+    peerDependenciesMeta:
+      ioredis:
+        optional: true
+      lmdb:
+        optional: true
+
+  '@effect/platform-node-shared@0.57.0':
+    resolution: {integrity: sha512-QXuvmLNlABCQLcTl+lN1YPhKosR6KqArPYjC2reU0fb5lroCo3YRb/aGpXIgLthHzQL8cLU5XMGA3Cu5hKY2Tw==}
+    peerDependencies:
+      '@effect/cluster': ^0.56.0
+      '@effect/platform': ^0.94.0
+      '@effect/rpc': ^0.73.0
+      '@effect/sql': ^0.49.0
+      effect: ^3.19.13
+
+  '@effect/platform-node-shared@4.0.0-beta.70':
+    resolution: {integrity: sha512-3VXuL63IDmq13We+ApRKn2JW3Rb9g5gj1YEmfb8u2b73norur1VsIJ/pRE4qjShevg19dQYi2JsLawSZ6gApug==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      effect: ^4.0.0-beta.70
+
+  '@effect/platform-node@0.104.0':
+    resolution: {integrity: sha512-2ZkUDDTxLD95ARdYIKBx4tdIIgqA3cwb3jlnVVBxmHUf0Pg5N2HdMuD0Q+CXQ7Q94FDwnLW3ZvaSfxDh6FvrNw==}
+    peerDependencies:
+      '@effect/cluster': ^0.56.0
+      '@effect/platform': ^0.94.0
+      '@effect/rpc': ^0.73.0
+      '@effect/sql': ^0.49.0
+      effect: ^3.19.13
+
+  '@effect/platform@0.94.1':
+    resolution: {integrity: sha512-SlL8OMTogHmMNnFLnPAHHo3ua1yrB1LNQOVQMiZsqYu9g3216xjr0gn5WoDgCxUyOdZcseegMjWJ7dhm/2vnfg==}
+    peerDependencies:
+      effect: ^3.19.14
+
+  '@effect/rpc@0.73.0':
+    resolution: {integrity: sha512-iMPf6tTriz8sK0l5x4koFId8Hz5nFptHYg8WqyjHGIIVLTpZxuiSqhmXZG7FnAs5N2n6uCEws4wWGcIgXNUrFg==}
+    peerDependencies:
+      '@effect/platform': ^0.94.0
+      effect: ^3.19.13
+
+  '@effect/sql@0.49.0':
+    resolution: {integrity: sha512-9UEKR+z+MrI/qMAmSvb/RiD9KlgIazjZUCDSpwNgm0lEK9/Q6ExEyfziiYFVCPiptp52cBw8uBHRic8hHnwqXA==}
+    peerDependencies:
+      '@effect/experimental': ^0.58.0
+      '@effect/platform': ^0.94.0
+      effect: ^3.19.13
+
+  '@effect/workflow@0.16.0':
+    resolution: {integrity: sha512-MiAdlxx3TixkgHdbw+Yf1Z3tHAAE0rOQga12kIydJqj05Fnod+W/I+kQGRMY/XWRg+QUsVxhmh1qTr7Ype6lrw==}
+    peerDependencies:
+      '@effect/experimental': ^0.58.0
+      '@effect/platform': ^0.94.0
+      '@effect/rpc': ^0.73.0
+      effect: ^3.19.13
+
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
+
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
+
+  '@emnapi/runtime@1.10.0':
+    resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
+
+  '@emnapi/runtime@1.11.3':
+    resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
+
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
+
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
+  '@esbuild/aix-ppc64@0.28.1':
+    resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.28.1':
+    resolution: {integrity: sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.28.1':
+    resolution: {integrity: sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.28.1':
+    resolution: {integrity: sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.28.1':
+    resolution: {integrity: sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.28.1':
+    resolution: {integrity: sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.28.1':
+    resolution: {integrity: sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.28.1':
+    resolution: {integrity: sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.28.1':
+    resolution: {integrity: sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.28.1':
+    resolution: {integrity: sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.28.1':
+    resolution: {integrity: sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.28.1':
+    resolution: {integrity: sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.28.1':
+    resolution: {integrity: sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.28.1':
+    resolution: {integrity: sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.28.1':
+    resolution: {integrity: sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.28.1':
+    resolution: {integrity: sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.28.1':
+    resolution: {integrity: sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.28.1':
+    resolution: {integrity: sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.28.1':
+    resolution: {integrity: sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.28.1':
+    resolution: {integrity: sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.28.1':
+    resolution: {integrity: sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.28.1':
+    resolution: {integrity: sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.28.1':
+    resolution: {integrity: sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.28.1':
+    resolution: {integrity: sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.28.1':
+    resolution: {integrity: sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.23.5':
+    resolution: {integrity: sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/config-helpers@0.6.0':
+    resolution: {integrity: sha512-ii6Bw9jJ2zi2cWA2Z+9/QZ/+3DX6kwaV5Q986D/CdP3Lap3w/pgQZ373FV7byY/i7L4IRH/G43I5dz1ClsCbpA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/core@1.2.1':
+    resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/object-schema@3.0.5':
+    resolution: {integrity: sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/plugin-kit@0.7.2':
+    resolution: {integrity: sha512-+CNAzxglkrpNf/kKywqQfk74QjtceuOE7Qm+AF8miRvPF/wmmK5+OJOgVh3AVTT3RP2mH3+FOaxlE5v72owk0A==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@figspec/components@2.1.0':
+    resolution: {integrity: sha512-PFKBX2oFz+vhThKTNsu7Mh4ZT3X7YCiM694UkAMT36j/p0tdmXs9Je0Sf88stTEcMgwYvNv9TZtvniYmgaE+bw==}
+
+  '@figspec/react@2.0.1':
+    resolution: {integrity: sha512-xflqJ3XQZVzm8+7dsm8OFxVAmBNNA3Mg65sqwNHiq7VRSMSD7qwH4BPsBy07ZaX+9nHeaacBpFZd3Q0aIsISqw==}
+    peerDependencies:
+      react: 19.2.8
+
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@floating-ui/react@0.26.28':
+    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@floating-ui/react@0.27.20':
+    resolution: {integrity: sha512-CMqMy7OaXl9W0eq1Uy7L7i2Y/anPvHmFmESd2CEw0t5YvZhcVCeo4MBevAmswRllX7Y2dEidA4ozGPunLSTQpw==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
+  '@fontsource/ibm-plex-mono@5.2.7':
+    resolution: {integrity: sha512-MKAb8qV+CaiMQn2B0dIi1OV3565NYzp3WN5b4oT6LTkk+F0jR6j0ZN+5BKJiIhffDC3rtBULsYZE65+0018z9w==}
+
+  '@fontsource/inter@5.2.8':
+    resolution: {integrity: sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==}
+
+  '@fontsource/material-symbols-rounded@5.2.30':
+    resolution: {integrity: sha512-svIEPUzsJGdBMr0PwLH3wKndh7ZNB8IVlyKZPKvbGEX0f36gpGPzE2EZiXppb4UJgDUnyjphWzjJ28StuK6NCg==}
+
+  '@formatjs/ecma402-abstract@2.3.4':
+    resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==}
+
+  '@formatjs/fast-memoize@2.2.7':
+    resolution: {integrity: sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==}
+
+  '@formatjs/icu-messageformat-parser@2.11.2':
+    resolution: {integrity: sha512-AfiMi5NOSo2TQImsYAg8UYddsNJ/vUEv/HaNqiFjnI3ZFfWihUtD5QtuX6kHl8+H+d3qvnE/3HZrfzgdWpsLNA==}
+
+  '@formatjs/icu-skeleton-parser@1.8.14':
+    resolution: {integrity: sha512-i4q4V4qslThK4Ig8SxyD76cp3+QJ3sAqr7f6q9VVfeGtxG9OhiAk3y9XF6Q41OymsKzsGQ6OQQoJNY4/lI8TcQ==}
+
+  '@formatjs/intl-localematcher@0.6.1':
+    resolution: {integrity: sha512-ePEgLgVCqi2BBFnTMWPfIghu6FkbZnnBVhO2sSxvLfrdFw7wCHAHiDoM2h4NRgjbaY7+B7HgOLZGkK187pZTZg==}
+
+  '@headlessui/react@2.2.10':
+    resolution: {integrity: sha512-5pVLNK9wlpxTUTy9GpgbX/SdcRh+HBnPktjM2wbiLTH4p+2EPHBO1aoSryUCuKUIItdDWO9ITlhUL8UnUN/oIA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@hocuspocus/common@2.15.3':
+    resolution: {integrity: sha512-Rzh1HF0a2o/tf90A3w2XNdXd9Ym3aQzMDfD3lAUONCX9B9QOdqdyiORrj6M25QEaJrEIbXFy8LtAFcL0wRdWzA==}
+
+  '@hocuspocus/extension-database@2.15.2':
+    resolution: {integrity: sha512-BkYDfKA99udx7AEkqWReBS61kvGMC9SqoPJs3v8xNgpaj2GGyMJQlUdQRMhPyZTn2osV+pqhk8Hn7xUJCW1RJg==}
+    peerDependencies:
+      yjs: ^13.6.8
+
+  '@hocuspocus/extension-logger@2.15.2':
+    resolution: {integrity: sha512-nqSnSFI+xO7dBTsgzSANKvx09ptq8J4Doz3AdLgxfaweYC85qFao7mAx1ZCtWoVHseVwBYua6S3dTwQq5IsWEg==}
+
+  '@hocuspocus/extension-redis@2.15.2':
+    resolution: {integrity: sha512-2BNBLnDEQq2v3uQSidBSdUOIbHhH383SGxn+hmy6tDQfrt2hLE4MwilgDdcCO0FKOCYaJrV7HyKu6/WyzLbAOg==}
+    peerDependencies:
+      y-protocols: ^1.0.6
+      yjs: ^13.6.8
+
+  '@hocuspocus/provider@2.15.2':
+    resolution: {integrity: sha512-mdBurviyaUd7bQx4vMIE39WqRJDTpfFelHOVXr7w/jA8G1E7K7lxQ9/DacSrbg+9o8s+1z1+SerZiUjaToaBJg==}
+    peerDependencies:
+      y-protocols: ^1.0.6
+      yjs: ^13.6.8
+
+  '@hocuspocus/server@2.15.2':
+    resolution: {integrity: sha512-+fLRVswg+bkgfHqJ+wFgywivw3H08WMOtVvJF7dJzWT2ZR/Sc3nDMFh2KqMF6Ygh4z6mt23xr7SKIm3eP1zoLA==}
+    peerDependencies:
+      y-protocols: ^1.0.6
+      yjs: ^13.6.8
+
+  '@hocuspocus/transformer@2.15.2':
+    resolution: {integrity: sha512-FAo/rt0kch+YeBBp/iit74q+4RV6YRjdZXmvE0/Aw+n/nSW1W0ZNGXnhncfm8qP0CuXnss/Aw8dpfEPZKUWDJw==}
+    peerDependencies:
+      '@tiptap/core': ^2.6.4
+      '@tiptap/pm': ^2.6.4
+      y-prosemirror: ^1.2.1
+      yjs: ^13.6.8
+
+  '@humanfs/core@0.19.2':
+    resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.8':
+    resolution: {integrity: sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/types@0.15.0':
+    resolution: {integrity: sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@hypermod/utils@0.7.1':
+    resolution: {integrity: sha512-bo8A75w3Xd3vbOin4BPNEDaIyL0ghw/NmWgJXpugx3mnNzPezwLnNeT5/qD3j6xpbKLfIlmYhxFLFsE+xiZ/zw==}
+    engines: {node: '>=20.17'}
+
+  '@iarna/toml@2.2.5':
+    resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
+
+  '@icons/material@0.2.4':
+    resolution: {integrity: sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==}
+    peerDependencies:
+      react: 19.2.8
+
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
+    engines: {node: '>=18'}
+
+  '@img/sharp-darwin-arm64@0.35.4':
+    resolution: {integrity: sha512-Uhfl4V4lhP2nbUVF9+hyH1+luj86f1gUFeo8ALYxFoULoU+G87D43BfeMP8XHsk9boxAnCY/bf2EHwhA7MuGsA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.35.4':
+    resolution: {integrity: sha512-hWniXY3bG5qKpkKrAwPe4y+VTPmf086YQAnkxWh7uA1YrlRouWGa0M0Mxj3ZjnXFkv7/TD1bTy9lGUK26vRvWw==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-freebsd-wasm32@0.35.4':
+    resolution: {integrity: sha512-lIsKw/BU+kjB4eZjxrYrZmwOJYi3Ajrv66iAlBmUPyKc3HpnloevB1g3wxGD9P/5BbQ1brBGl65VRRrCvQDEqA==}
+    engines: {node: '>=20.9.0'}
+    os: [freebsd]
+
+  '@img/sharp-libvips-darwin-arm64@1.3.3':
+    resolution: {integrity: sha512-suTBPTDGrI9WodccaDdwZItTSaBYASlBk1NSfElSHrUfzu3szG6lvIF58+WiFvnfzuK8ZBFS5zE00PxqxnRiPg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.3.3':
+    resolution: {integrity: sha512-FVJZ5mITMobmXIz/hPDTw0EintTW5H3WfrxwLqEqjiIihlu+hVRyGrFQ60xl0Lxn7Bt3zdpevPaQi0HEzqz9fw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.3.3':
+    resolution: {integrity: sha512-0DaL0A6Xu6sQSQFwe4iVCrKWU2cCTItnRsYsCdxAMm9NF6twAA9BKnoqy4hqz4+azQ0JHuA26qiUKsf1XJ/v5A==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-arm@1.3.3':
+    resolution: {integrity: sha512-3rbU4vqXXc3hY/OiXdl52xZvT0F1yEngWfvqudtPJg/KkyiaQw2DRsFrNzpmLvfavbwOq3qXn36GP8obHRULQA==}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-ppc64@1.3.3':
+    resolution: {integrity: sha512-cdn1OvUBwsXhbC0zSzJnNzf5MZ/mTrobawDvNXBTxe8VtqKAm0sRuEY2Evzovb/w9JMk4TvRxqt1mekSuJz64w==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-riscv64@1.3.3':
+    resolution: {integrity: sha512-HjPVx7yKz+0lqdhDlTw1tt90wamBoxhiXpvl1XZpJLiHH4RCJ5yDTqH+VlYPv2fwFs89JFw4c1IexYOcQUi4IQ==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-s390x@1.3.3':
+    resolution: {integrity: sha512-neWLh+3yCNThxnfy3c4BbVBeGgt9aftno+XbT56iK28RgeDs3UOFWviLWlUu0bArYVYJaFDK+RRohbicUNCm8Q==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linux-x64@1.3.3':
+    resolution: {integrity: sha512-4vKmvAst9nrowcqquKFAyZJUDolUaIp8uRiN0mWFguJ1IplC9/pitXtlnnlU4aa/eJw3J7i67V+pwUL+wZGdsA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.3':
+    resolution: {integrity: sha512-Y9kQaLMuNoB0bPYOOdcZMaseNrFpPodIWWMrx+CZyydf2xn68j9WYc6sWWRrDwNkzCQjKYfc68L7jKjGlHMibw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.3.3':
+    resolution: {integrity: sha512-fj8Mv0HHfD1Rr+4I68+3agJynxDWtBFgicTbSOb9Bke6pIwzGcJ+RX/yHjmiEGFMCavY/dxvem7MyNaJF+wDiw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linux-arm64@0.35.4':
+    resolution: {integrity: sha512-De4jpEnAU8Hd5oT0j1G3uL4ZvTuipVMn7YC6vPaJhy6/7EwEae0SVAoBrUMYQbkLGDm85taVWwuPc1a44LTzCQ==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-arm@0.35.4':
+    resolution: {integrity: sha512-7OAS8gI0EReKGVN2HssHlM6umJgxF5VI3xN0p9FA91p/YO+ou5hiNghLdZ5BEHztwaaK5+bLKRf8x/o2L2nk9A==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-ppc64@0.35.4':
+    resolution: {integrity: sha512-2oYZJeIl4kCcMGk4ouZVjnkCtFrpQFlNEtJ6GbxzhHQchwH0NH/qEb9ykmOl29dqwMq+JhFdZn+1ak2FKhI9fQ==}
+    engines: {node: '>=20.9.0'}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-riscv64@0.35.4':
+    resolution: {integrity: sha512-cPbNChoRURAWdebDIHSenxRpgEdy7JkPydSnUxRm9VvKD7m0/xVaR/8Fzlu81pk5nHEvHH87UZUA7cTtwnbJSA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-s390x@0.35.4':
+    resolution: {integrity: sha512-RY0JFY8Fd6RonCBtHz+DvadaPkXDSI1AUn6yWL9TipqkZ1vY8w8evqdgyDFnkm4/K1ve1TvZiaePP5oSd4+WVQ==}
+    engines: {node: '>=20.9.0'}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linux-x64@0.35.4':
+    resolution: {integrity: sha512-9qvvEAuk8k89TfWUoX2htWjbAMX8p+NxCppjpcg5k6xMsjhBQPTsoIh36h9Qde4WRuGpJeYnOjdosDn/cnv+OA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@img/sharp-linuxmusl-arm64@0.35.4':
+    resolution: {integrity: sha512-KB5jxpfWQTr0nc3xdHtWChdbifHrBGsd2SM62Eyxrl8afikm+f5qGBU75SJIZBT/S1MC8XyacdlXBMSWq6OURA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-linuxmusl-x64@0.35.4':
+    resolution: {integrity: sha512-f+eZJZIQNEEd26RPSW+76chwOf1XtA2Y/O+5ocVyLliHkeih3e+jhLVBdNTd2rS3IbNXK8+ug93Vf5ZXtF5Lxg==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@img/sharp-wasm32@0.35.4':
+    resolution: {integrity: sha512-zQnl4Kwp7Q6NHsENtU2T/00Zi+w3AQNwz3+UaTyVBy2FpXrzXzGjndpK61onhZjRtRpQXxCTeqw19bVyXOh7jA==}
+    engines: {node: '>=20.9.0'}
+
+  '@img/sharp-webcontainers-wasm32@0.35.4':
+    resolution: {integrity: sha512-ESfNkywmCfPNyaZjxooddJQiQ+l/nTpGEOGthxiLnIHXC/CmcBixnfwUleX9mCz9ovrUUvKMap/pm8RYbzfwaA==}
+    engines: {node: '>=20.9.0'}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-arm64@0.35.4':
+    resolution: {integrity: sha512-iNdlBX9gLVvqe2I3uIJSIKTq6wckP/DYxZtcqxm09x5Gi24DnFBmPAWZmr60ZyYMG0xlzo6goG3670ar+RXvRw==}
+    engines: {node: '>=20.9.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@img/sharp-win32-ia32@0.35.4':
+    resolution: {integrity: sha512-kqRsbaa5CS6KHlpxnN7WhE6vAAugXyZButpRdvDWetlv6Qv4N9WTcrWzF7tXfB9T7MsoadqdI8hmwLq6UlLvtw==}
+    engines: {node: ^20.9.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.35.4':
+    resolution: {integrity: sha512-XtmnYhBcrORsJ4XJngyzr/EWP0hRZLAZRFaApdKuviyqF78+ylxh2y06ZmtULAMOnObJ3ucpN0AcwSWnMowTRg==}
+    engines: {node: '>=20.9.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@internationalized/date@3.12.3':
+    resolution: {integrity: sha512-fuLX+3ZKLsxI73y8b01EG/WjHb6gE6weCqlfawPO27kBWGMh9G1yH6Csv1uU7/cac9H2GHmOMt6CjmuQ1aia4Q==}
+
+  '@internationalized/number@3.6.7':
+    resolution: {integrity: sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==}
+
+  '@internationalized/string@3.2.10':
+    resolution: {integrity: sha512-PDx6//vHSpRnHfxqMqto11zQvhsaU74O3mKv2F/0eicGZcl9NLjQmGlbHz/LsJh5tLKp4A4L7ZVTzN1/MmMTvA==}
+
+  '@ioredis/commands@1.3.0':
+    resolution: {integrity: sha512-M/T6Zewn7sDaBQEqIZ8Rb+i9y8qfGmq+5SDFSf9sA2lUZTmdDLVdOiQaeDp+Q4wElZ9HG1GAX5KhDaidp6LQsQ==}
+
+  '@isaacs/cliui@9.0.0':
+    resolution: {integrity: sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==}
+    engines: {node: '>=18'}
+
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0':
+    resolution: {integrity: sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==}
+    peerDependencies:
+      typescript: 5.8.3
+      vite: 8.0.16
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/source-map@0.3.11':
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@lifeomic/attempt@3.1.0':
+    resolution: {integrity: sha512-QZqem4QuAnAyzfz+Gj5/+SLxqwCAw2qmt7732ZXodr6VDWGeYLG6w1i/vYLa55JQM9wRuBKLmXmiZ2P0LtE5rw==}
+
+  '@lit-labs/react@2.1.3':
+    resolution: {integrity: sha512-OD9h2JynerBQUMNzb563jiVpxfvPF0HjQkKY2mx0lpVYvD7F+rtJpOGz6ek+6ufMidV3i+MPT9SX62OKWHFrQg==}
+
+  '@lit/react@1.0.8':
+    resolution: {integrity: sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==}
+    peerDependencies:
+      '@types/react': 19.2.17
+
+  '@makeplane/propel@0.3.0':
+    resolution: {integrity: sha512-nGhiE42vLQVvv7NZOcQYKARJiTXyKDSSTcHOzPdtFpa+WkSz9B91jw6i+3Ikz5cpkv/aEKjOTJF+cByw2zv5ZQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+      tailwindcss: ^4.0.0
+
+  '@mdx-js/react@3.1.0':
+    resolution: {integrity: sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+
+  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.4':
+    resolution: {integrity: sha512-LCkGo6JDfaBhgST7UpPWgNgLINpcpabaHfyz5OBx75nUYxBsaEPxjnyNjWpeb/xBup/682QnBfRBy2/LvPutZQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.4':
+    resolution: {integrity: sha512-zExlW9zUJKZH/tOtVMttwjKa4Xm/3KcNjnE3dPN92uCktwavMxpgCA3MoJK/DOnTWsQgo224OaST27/mPNAf+w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.4':
+    resolution: {integrity: sha512-dgX0P/9wGPJeHFBG+ZmhgE6bmtMt7NP5CRBGyyktpopdk/mW4POnrpQsSLtKI1dwpc+pPLuXHDh6vvskyQE/sw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.4':
+    resolution: {integrity: sha512-Tg3yX65f5GbtXLkrYEHE5oibZG9epyYWas7FogTTEJeDEF9JlXJzKgXaNhT3UXlTOeA+AfZpYZYZ0uPj7Cfquw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.4':
+    resolution: {integrity: sha512-8TNXMEjJc3QEy7R/x1INhgiU+XakDAFUzBhaz7+Rbrs8NH5UQeHQxxmzsSBJGyV6I1jW79undiQm8tOI+D+8FQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.4':
+    resolution: {integrity: sha512-CmCXPQrkbwExx3j946/PtHWHbYJiCRBRDl4BlkRQcJB/YOwQxJRTpoo7aTsortjgoJ1x7opzTSxn7C+ASSLVjQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/canvas-android-arm64@0.1.80':
+    resolution: {integrity: sha512-sk7xhN/MoXeuExlggf91pNziBxLPVUqF2CAVnB57KLG/pz7+U5TKG8eXdc3pm0d7Od0WreB6ZKLj37sX9muGOQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@napi-rs/canvas-darwin-arm64@0.1.80':
+    resolution: {integrity: sha512-O64APRTXRUiAz0P8gErkfEr3lipLJgM6pjATwavZ22ebhjYl/SUbpgM0xcWPQBNMP1n29afAC/Us5PX1vg+JNQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@napi-rs/canvas-darwin-x64@0.1.80':
+    resolution: {integrity: sha512-FqqSU7qFce0Cp3pwnTjVkKjjOtxMqRe6lmINxpIZYaZNnVI0H5FtsaraZJ36SiTHNjZlUB69/HhxNDT1Aaa9vA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.80':
+    resolution: {integrity: sha512-eyWz0ddBDQc7/JbAtY4OtZ5SpK8tR4JsCYEZjCE3dI8pqoWUC8oMwYSBGCYfsx2w47cQgQCgMVRVTFiiO38hHQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.80':
+    resolution: {integrity: sha512-qwA63t8A86bnxhuA/GwOkK3jvb+XTQaTiVML0vAWoHyoZYTjNs7BzoOONDgTnNtr8/yHrq64XXzUoLqDzU+Uuw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-arm64-musl@0.1.80':
+    resolution: {integrity: sha512-1XbCOz/ymhj24lFaIXtWnwv/6eFHXDrjP0jYkc6iHQ9q8oXKzUX1Lc6bu+wuGiLhGh2GS/2JlfORC5ZcXimRcg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.80':
+    resolution: {integrity: sha512-XTzR125w5ZMs0lJcxRlS1K3P5RaZ9RmUsPtd1uGt+EfDyYMu4c6SEROYsxyatbbu/2+lPe7MPHOO/0a0x7L/gw==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.80':
+    resolution: {integrity: sha512-BeXAmhKg1kX3UCrJsYbdQd3hIMDH/K6HnP/pG2LuITaXhXBiNdh//TVVVVCBbJzVQaV5gK/4ZOCMrQW9mvuTqA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.80':
+    resolution: {integrity: sha512-x0XvZWdHbkgdgucJsRxprX/4o4sEed7qo9rCQA9ugiS9qE2QvP0RIiEugtZhfLH3cyI+jIRFJHV4Fuz+1BHHMg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.80':
+    resolution: {integrity: sha512-Z8jPsM6df5V8B1HrCHB05+bDiCxjE9QA//3YrkKIdVDEwn5RKaqOxCJDRJkl48cJbylcrJbW4HxZbTte8juuPg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/canvas@0.1.80':
+    resolution: {integrity: sha512-DxuT1ClnIPts1kQx8FBmkk4BQDTfI5kIzywAaMjQSXfNnra5UFU9PwurXrl+Je3bJ6BGsp/zmshVVFbCmyI+ww==}
+    engines: {node: '>= 10'}
+
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1
+      '@emnapi/runtime': ^1.7.1
+
+  '@neoconfetti/react@1.0.0':
+    resolution: {integrity: sha512-klcSooChXXOzIm+SE5IISIAn3bYzYfPjbX7D7HoqZL84oAfgREeSg5vSIaSFH+DaGzzvImTyWe1OyrJ67vik4A==}
+
+  '@noble/ciphers@1.3.0':
+    resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/hashes@1.8.0':
+    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@opentelemetry/api-logs@0.214.0':
+    resolution: {integrity: sha512-40lSJeqYO8Uz2Yj7u94/SJWE/wONa7rmMKjI1ZcIjgf3MHNHv1OZUCrCETGuaRF62d5pQD1wKIW+L4lmSMTzZA==}
+    engines: {node: '>=8.0.0'}
+
+  '@opentelemetry/api@1.9.1':
+    resolution: {integrity: sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==}
+    engines: {node: '>=8.0.0'}
+
+  '@opentelemetry/core@2.8.0':
+    resolution: {integrity: sha512-hd1Lfh8p545nNz+jq1Ejfz+Mn1hyLuxYn1YzTfFNrxr8urEWMNQLPf1Th8kjOH+HxwawCrtgBp8JpBUR4ZSgww==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
+
+  '@opentelemetry/instrumentation@0.214.0':
+    resolution: {integrity: sha512-MHqEX5Dk59cqVah5LiARMACku7jXSVk9iVDWOea4x3cr7VfdByeDCURK6o1lntT1JS/Tsovw01UJrBhN3/uC5w==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': ^1.3.0
+
+  '@opentelemetry/resources@2.8.0':
+    resolution: {integrity: sha512-qmXQ27ilDbUK/vGMqwL8D4/rhn76C+sherM4wTbjlfknR8Nvfc/hCxjRJPhkzZzUsPiNg16SA31NxMabwttRjg==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.3.0 <1.10.0'
+
+  '@opentelemetry/sdk-trace-base@2.8.0':
+    resolution: {integrity: sha512-mhU4jp+vW0mGbFRd+GeXHvmfA4aDqWjBjLC3pE5XMpLs0IE2ryYb019Ts2AQrOq67gaTF25D91+fgvEHDZEnuQ==}
+    engines: {node: ^18.19.0 || >=20.6.0}
+    peerDependencies:
+      '@opentelemetry/api': '>=1.3.0 <1.10.0'
+
+  '@opentelemetry/semantic-conventions@1.41.1':
+    resolution: {integrity: sha512-/UhIkaZgPutTFmQ7RnIJGgDXZmtEJ7Dvi86xNTFWcnRxVRNk/aotsqDJYeEvDP+FSMB2SdW+pQzNMcWP0rwuNA==}
+    engines: {node: '>=14'}
+
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm-eabi@0.132.0':
+    resolution: {integrity: sha512-KrLaPWa5c9Y7LkW+rKkaUE3y7DBDrQtaf7rlsSDfv6KAHUjgzAIRA761Lrrp6//Yd/Rlie/yEOt9YENCoJnOcw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.132.0':
+    resolution: {integrity: sha512-SThDrSeamB/kG2+NxcJ5/wSLcV6dUqDknrPLqFYQ0ST/55mtBP4M7Q/f3QbubH6aAd11wpzZn/nwbVRSdobOpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-arm64@0.132.0':
+    resolution: {integrity: sha512-Lc0f/TYoKBghE5/2Gsv7bLXk+TJZunx2Tf61X8hG4ARXdc8UYI26dCGccFSd1AyFbK3jfaNXtMnupggDbjPXdQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.132.0':
+    resolution: {integrity: sha512-RG2eJIpf7C21z9HSSXFw1bTArdpKe7Y4fwcJTwRq1yCSe1vSavaN9GA1sm9KqzemTLAGVktQ+7qBTGp0vQeUZg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-freebsd-x64@0.132.0':
+    resolution: {integrity: sha512-wQIPntPLtJ8NcBpvKPbEv3NqzV6k8eP8tP/jE9Rg8HTg/j7urZGFSsTCPCW5k77Qfw2DM4vRvc9p3I4yq/Shvw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.132.0':
+    resolution: {integrity: sha512-PixKEpeSe3yxQWqNyOCBALRYc72+Tj7ILDofUl3iXo25cVOzLA6jHUhmOINRtWIPh7dbUie3QNeabwaQpZTw6w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.132.0':
+    resolution: {integrity: sha512-sCR+DzGHlyHKnbA2z9zWjTUhIo8Sy0enJl4RDsBwPmkxYynPatpwOAWe8W5127SlW0boqUWHGtr1NWn5UwIhXQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.132.0':
+    resolution: {integrity: sha512-sQBix5P2cW+IpzTcCwYxnh9yALrKSIkKJThspBvMGcygSMnbzkSvhN7SfuX1hvBk8y1XEChsdkU3ET0V5DmzUw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.132.0':
+    resolution: {integrity: sha512-WozHg3Kc//8Sk756HXXgMbEAvqtG+Lzb9JOojwQzIGDtN78Az2dLttkb71akWYUF/8IgYfDSlfKh4Uot8is5Vw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.132.0':
+    resolution: {integrity: sha512-CmX/ulNBOEwWTyVRmcpYKAcAizW6+OjtLJgo7fXoL9OqQvjF4VER8tPomv44vwzfSCy1BHbsB0ZlZYzYJNj4cA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.132.0':
+    resolution: {integrity: sha512-j9oQS+hM90SdhviNGWbPgT4+Rlq+ac++q/zjgwPD1mVHgxHzATvoRGtDx0sXGmFOQ9J9YkwAhYGb5MAHL6TAsA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.132.0':
+    resolution: {integrity: sha512-bLz+Xi+Agnfmd7kWPEsSVwCn2k4EyIalZkNBcQ0OGIv9rqn8VgCPLNd03tM9mKX/5TdlvDXalz0q71BIrOPNqg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.132.0':
+    resolution: {integrity: sha512-U6t2qbJU0ypTfyj9QV3W1Y6mITDTL8ai/OR6NUn85vyHthOvobKWgXzU4tu0EskSzlpuVFz1g0jFGulDIUKHxQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.132.0':
+    resolution: {integrity: sha512-WcEaSNHFk8yz5YFlQQAlhq6jOFmZBB/RKE7uzhyCIf+pF1Lmv9gUH4221mle2Gd9iHyWT3ySNph8yZgb1xYdWg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-x64-musl@0.132.0':
+    resolution: {integrity: sha512-iQrV4iJzQgRwK3BWRmQl1C3C6g3wYpXN2WLdQdyR+efoUnncdShZAVp9OgcojtlD3MDRbuOMGG3SjxF4fL4nlQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-openharmony-arm64@0.132.0':
+    resolution: {integrity: sha512-FWzmUGrZ6GUby4U7WIwcCtab6tdmlTO3xTRRKyb5kjIJVEiaUAT8animUG/nK8ZCA8gkRkPOTId4rl6uTqUmJQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-wasm32-wasi@0.132.0':
+    resolution: {integrity: sha512-TlbMppxJI5CjWDes0QaP6G3aneVg1yikBu5QYI+DUShF9WDL66ccgKFNNGmi/Wybtszw6hxwAvv76T4DaPKnHw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.132.0':
+    resolution: {integrity: sha512-RH/NbFjGKqdUAUi7Oh3LQPxUk2hsWFEEQ38HSnbRQT8QjBZFKqL1fMbmsB3N4jy/KPh9iX94+9dmkEMBBbambw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.132.0':
+    resolution: {integrity: sha512-JUr4jQY9jxoIB/YTLXr6XofSi5xikj6p5/Ns1h0VOBDT0j1jKU+kMsv2xxv51RwnETcXpA1Yw/9oUAfcqfaqEA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.132.0':
+    resolution: {integrity: sha512-2dapgHpA5X8DSXF4AU36hJWYf6zP0tKjMXFRAZFBD62pkevW/uhFDXoFH9Y/3Fd2EtDrw5ByNnR1wVE9X9y0SQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
+
+  '@oxc-project/types@0.132.0':
+    resolution: {integrity: sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==}
+
+  '@oxc-project/types@0.133.0':
+    resolution: {integrity: sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==}
+
+  '@oxc-project/types@0.96.0':
+    resolution: {integrity: sha512-r/xkmoXA0xEpU6UGtn18CNVjXH6erU3KCpCDbpLmbVxBFor1U9MqN5Z2uMmCHJuXjJzlnDR+hWY+yPoLo8oHDw==}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
+    resolution: {integrity: sha512-IjfWOXRgJFNdORDl+Uf1aibNgZY2guOD3zmOhx1BGVb/MIiqlFTdmjpQNplSN58lhWehnX4UNqC3QwpUo8pjJg==}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-resolver/binding-android-arm64@11.20.0':
+    resolution: {integrity: sha512-QqslZAuFQG8Q9xm7JuIn8JUbvywhSBMVhuQHtYW+auirZJloS41oxUUaBXk7uUhZJgp44c5zQLeVvmFaDQB+2Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
+    resolution: {integrity: sha512-MUcavykj2ewlR+kc5arpg4tC2RvzJkUxWtNv74pf7lcNk00GpIpN43vXMj+j6r4eMmfZhlb8hueKoIb8e9kAGQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
+    resolution: {integrity: sha512-BGB16nRUK5Etiv//ihPyzj8Lj1px0mhh4YIfe0FDf045ywknfSm0GEbiRESpr6Q4K82AvnyaRIhhluHByvS4bg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
+    resolution: {integrity: sha512-JZgtePaqj3qmD5XFHJaSLWzHRxQu0LaPkdoM1KJXYADvAaa83ijXHclV3ej3CueeW0wxfIAbGCZVP45J0CA7uQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
+    resolution: {integrity: sha512-hOQ/p3ry3v3SchUBXicrrnszaI/UmYzM4wtS4RGfwgVUX7a+HbyQSzJ5aOzu+o6XZkFkS3ZXN4PZAzhOb77OSg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
+    resolution: {integrity: sha512-2ArPksaw0AqeuGBfoS715VF+JvJQAhD2niWgjE5hVO+L+nAfikVQopvngCMX9x4BD8itWoQ3dnikrQyl5Ho5Jg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
+    resolution: {integrity: sha512-0bJnmYFp62JdZ4nVMDUZ/C58BCZOCcqgKtnUlp7L9Ojf/czIN+3j72YlLPeWLkzlr6SlYvIQA4SGV/HyO0d+qg==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
+    resolution: {integrity: sha512-wKHHzPKZo7Ufhv/Bt6yxT7FOgnIgW4gwXcJUipkShGp68W3wGVqvr1Sr0fY65lN0Oy6y41+g2kIDvkgZaMMUkw==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
+    resolution: {integrity: sha512-RN8goF7Ie0B79L4i4G6OeBocTgSC56vJbQ65VJje+oXnldVpLnOU7j/AQ/dP94TcCS+Yh6WG8u3Qt4ETteXFNQ==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
+    resolution: {integrity: sha512-5l1yU6/xQEqLZRzxqmMxJfWPslpwCmBsdDGaBvABPehxquCXDC7dd7oraNdKSJUMDXSM7VvVj8H2D2FTjU7oWw==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
+    resolution: {integrity: sha512-xHEvkbgz6UC+A3JOyDQy76LkUaxsNSfIr3/GV8slwZsnuooJiIB34gzJfsyvR4JdCYNUUPsRJc/w/oWkODu+hg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
+    resolution: {integrity: sha512-aWPDUUmSeyHvlW+SoEUd+JIJsQhVhu6a5tBpDRMu058naPAchTgAVGCFy35zjbnFlt0i8hLWziff6HX0D3LU4g==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
+    resolution: {integrity: sha512-x2YeSimvhJjKLVD8KSu8f/rqU1potcdEMkApIPJqjZWN7c2Fpt4g2X32WDg1p+XDAmyT7nuQGe0vnhvXeLbH+g==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
+    resolution: {integrity: sha512-kcRLEIxpZefeYfLChjpgFf3ilBzRDZ+yobMrpRsQlSrxuFGtm3U6PMU7AaEpMqo3NfDGVyJJseAjnRLzMFHjwQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
+    resolution: {integrity: sha512-HHcfnApSZGtKhTiHqe8OZruOZe5XuFQH5/E0Yhj3u8fnFvzkM4/k6WjacUf4SvA0SPEAbfbgYmVPuo0VX/fIBQ==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
+    resolution: {integrity: sha512-Tn0y1XOFYHNfK1wp1Z5QK8Rcld/bsOwRISQXfqAZ5IBpv8Gz1IvV39fUWNprqNdRizgcvFhOzWwFun2zkJsyBg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
+    resolution: {integrity: sha512-qPi25YNPe4YenS8MgsQU2+bIFHxxpLx1LVna2444cEHqNPhNjvWf9zqj4aWE43H9LpAsTmkkAlA3eL5ElBU3mA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
+    resolution: {integrity: sha512-Wb14jWEW8huH6It9F6sXd9vrYmIS7pMrgkU6sxpLxkP+9z+wRgs71hUEhRpcn8FOXAFa27FVWfY2tRpbfTzfLw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxfmt/binding-android-arm-eabi@0.35.0':
+    resolution: {integrity: sha512-BaRKlM3DyG81y/xWTsE6gZiv89F/3pHe2BqX2H4JbiB8HNVlWWtplzgATAE5IDSdwChdeuWLDTQzJ92Lglw3ZA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxfmt/binding-android-arm64@0.35.0':
+    resolution: {integrity: sha512-/O+EbuAJYs6nde/anv+aID6uHsGQApyE9JtYBo/79KyU8e6RBN3DMbT0ix97y1SOnCglurmL2iZ+hlohjP2PnQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxfmt/binding-darwin-arm64@0.35.0':
+    resolution: {integrity: sha512-pGqRtqlNdn9d4VrmGUWVyQjkw79ryhI6je9y2jfqNUIZCfqceob+R97YYAoG7C5TFyt8ILdLVoN+L2vw/hSFyA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxfmt/binding-darwin-x64@0.35.0':
+    resolution: {integrity: sha512-8GmsDcSozTPjrCJeGpp+sCmS9+9V5yRrdEZ1p/sTWxPG5nYeAfSLuS0nuEYjXSO+CtdSbStIW6dxa+4NM58yRw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxfmt/binding-freebsd-x64@0.35.0':
+    resolution: {integrity: sha512-QyfKfTe0ytHpFKHAcHCGQEzN45QSqq1AHJOYYxQMgLM3KY4xu8OsXHpCnINjDsV4XGnQzczJDU9e04Zmd8XqIQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.35.0':
+    resolution: {integrity: sha512-u+kv3JD6P3J38oOyUaiCqgY5TNESzBRZJ5lyZQ6c2czUW2v5SIN9E/KWWa9vxoc+P8AFXQFUVrdzGy1tK+nbPQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.35.0':
+    resolution: {integrity: sha512-1NiZroCiV57I7Pf8kOH4XGR366kW5zir3VfSMBU2D0V14GpYjiYmPYFAoJboZvp8ACnZKUReWyMkNKSa5ad58A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxfmt/binding-linux-arm64-gnu@0.35.0':
+    resolution: {integrity: sha512-7Q0Xeg7ZnW2nxnZ4R7aF6DEbCFls4skgHZg+I63XitpNvJCbVIU8MFOTZlvZGRsY9+rPgWPQGeUpLHlyx0wvMA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-arm64-musl@0.35.0':
+    resolution: {integrity: sha512-5Okqi+uhYFxwKz8hcnUftNNwdm8BCkf6GSCbcz9xJxYMm87k1E4p7PEmAAbhLTk7cjSdDre6TDL0pDzNX+Y22Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.35.0':
+    resolution: {integrity: sha512-9k66pbZQXM/lBJWys3Xbc5yhl4JexyfqkEf/tvtq8976VIJnLAAL3M127xHA3ifYSqxdVHfVGTg84eiBHCGcNw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.35.0':
+    resolution: {integrity: sha512-aUcY9ofKPtjO52idT6t0SAQvEF6ctjzUQa1lLp7GDsRpSBvuTrBQGeq0rYKz3gN8dMIQ7mtMdGD9tT4LhR8jAQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-musl@0.35.0':
+    resolution: {integrity: sha512-C6yhY5Hvc2sGM+mCPek9ZLe5xRUOC/BvhAt2qIWFAeXMn4il04EYIjl3DsWiJr0xDMTJhvMOmD55xTRPlNp39w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-linux-s390x-gnu@0.35.0':
+    resolution: {integrity: sha512-RG2hlvOMK4OMZpO3mt8MpxLQ0AAezlFqhn5mI/g5YrVbPFyoCv9a34AAvbSJS501ocOxlFIRcKEuw5hFvddf9g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-gnu@0.35.0':
+    resolution: {integrity: sha512-wzmh90Pwvqj9xOKHJjkQYBpydRkaXG77ZvDz+iFDRRQpnqIEqGm5gmim2s6vnZIkDGsvKCuTdtxm0GFmBjM1+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-musl@0.35.0':
+    resolution: {integrity: sha512-+HCqYCJPCUy5I+b2cf+gUVaApfgtoQT3HdnSg/l7NIcLHOhKstlYaGyrFZLmUpQt4WkFbpGKZZayG6zjRU0KFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-openharmony-arm64@0.35.0':
+    resolution: {integrity: sha512-kFYmWfR9YL78XyO5ws+1dsxNvZoD973qfVMNFOS4e9bcHXGF7DvGC2tY5UDFwyMCeB33t3sDIuGONKggnVNSJA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxfmt/binding-win32-arm64-msvc@0.35.0':
+    resolution: {integrity: sha512-uD/NGdM65eKNCDGyTGdO8e9n3IHX+wwuorBvEYrPJXhDXL9qz6gzddmXH8EN04ejUXUujlq4FsoSeCfbg0Y+Jg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxfmt/binding-win32-ia32-msvc@0.35.0':
+    resolution: {integrity: sha512-oSRD2k8J2uxYDEKR2nAE/YTY9PobOEnhZgCmspHu0+yBQ665yH8lFErQVSTE7fcGJmJp/cC6322/gc8VFuQf7g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxfmt/binding-win32-x64-msvc@0.35.0':
+    resolution: {integrity: sha512-WCDJjlS95NboR0ugI2BEwzt1tYvRDorDRM9Lvctls1SLyKYuNRCyrPwp1urUPFBnwgBNn9p2/gnmo7gFMySRoQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxlint/binding-android-arm-eabi@1.51.0':
+    resolution: {integrity: sha512-jJYIqbx4sX+suIxWstc4P7SzhEwb4ArWA2KVrmEuu9vH2i0qM6QIHz/ehmbGE4/2fZbpuMuBzTl7UkfNoqiSgw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxlint/binding-android-arm-eabi@1.68.0':
+    resolution: {integrity: sha512-wEdsIspexXLLMCPAEOcCuFLMt6aE3AzTuA/nQKLPRnoJ+EQTturmGheDkhHuuVHx0GbutjQ3JKmEn+Gz6Ag28Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxlint/binding-android-arm64@1.51.0':
+    resolution: {integrity: sha512-GtXyBCcH4ti98YdiMNCrpBNGitx87EjEWxevnyhcBK12k/Vu4EzSB45rzSC4fGFUD6sQgeaxItRCEEWeVwPafw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxlint/binding-android-arm64@1.68.0':
+    resolution: {integrity: sha512-6aZRNNXQTsYtgaus8HTb9nuCcsrQTlKXGnktwvwW0n/SooRWNxNb3925grDkC63aEYZuCIyOVLV16IdYIoC2aQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxlint/binding-darwin-arm64@1.51.0':
+    resolution: {integrity: sha512-3QJbeYaMHn6Bh2XeBXuITSsbnIctyTjvHf5nRjKYrT9pPeErNIpp5VDEeAXC0CZSwSVTsc8WOSDwgrAI24JolQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-arm64@1.68.0':
+    resolution: {integrity: sha512-lVTbsE3kO4bLpZELgjRZuAJc8kP98wb83yMXWH8gaPaFZ+cM2IDeZto4ByoUAYj0Mxv2rvw+A1ssZequSepVSg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-x64@1.51.0':
+    resolution: {integrity: sha512-NzErhMaTEN1cY0E8C5APy74lw5VwsNfJfVPBMWPVQLqAbO0k4FFLjvHURvkUL+Y18Wu+8Vs1kbqPh2hjXYA4pg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-x64@1.68.0':
+    resolution: {integrity: sha512-nCmw2XrmQskjBUh/sfP5yKs93V68LijQgjd1cuuZ/q4SCARngLYs60/qqyzuMsg8QQ9KArDI98hxs/RDGE4KRQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint/binding-freebsd-x64@1.51.0':
+    resolution: {integrity: sha512-msAIh3vPAoKoHlOE/oe6Q5C/n9umypv/k81lED82ibrJotn+3YG2Qp1kiR8o/Dg5iOEU97c6tl0utxcyFenpFw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxlint/binding-freebsd-x64@1.68.0':
+    resolution: {integrity: sha512-TI4ovQJliYE9V6e06cEv+qEI9uj7Ao65fmif4er4HD+aouyYyh0P31q2jh3KtqsOHHcQqv2PZ61TjJFLpBDGWQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.51.0':
+    resolution: {integrity: sha512-CqQPcvqYyMe9ZBot2stjGogEzk1z8gGAngIX7srSzrzexmXixwVxBdFZyxTVM0CjGfDeV+Ru0w25/WNjlMM2Hw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.68.0':
+    resolution: {integrity: sha512-LcNnEi9g71Cmry5ZpLbKT+oVv+/zYG3hYVAbBBB5X85nOQZSk8l92CnDkxJMcxUg0NCnMCOFZuaVDlMyv4tYJw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-musleabihf@1.51.0':
+    resolution: {integrity: sha512-dstrlYQgZMnyOssxSbolGCge/sDbko12N/35RBNuqLpoPbft2aeBidBAb0dvQlyBd9RJ6u8D4o4Eh8Un6iTgyQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-musleabihf@1.68.0':
+    resolution: {integrity: sha512-OovHahL3FX4UaK+hgSf11llUx2vszqjSdQQ61Ck9InOEI/ptZoC4XSQJurITqItVvd53JSlmkLMeaNjM1PoQew==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm64-gnu@1.51.0':
+    resolution: {integrity: sha512-QEjUpXO7d35rP1/raLGGbAsBLLGZIzV3ZbeSjqWlD3oRnxpRIZ6iL4o51XQHkconn3uKssc+1VKdtHJ81BBhDA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-arm64-gnu@1.68.0':
+    resolution: {integrity: sha512-YbzTglnHLzzi9zv5or8Ztz5fykAoZE8W9iM42/bOrF4HBSB6rJTqdLQWuoP76EHQw9DuKl76K1QmFlG29sPJXQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-arm64-musl@1.51.0':
+    resolution: {integrity: sha512-YSJua5irtG4DoMAjUapDTPhkQLHhBIY0G9JqlZS6/SZPzqDkPku/1GdWs0D6h/wyx0Iz31lNCfIaWKBQhzP0wQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-arm64-musl@1.68.0':
+    resolution: {integrity: sha512-qVKtCZNic+OoNnOr/hCQAu22HSQzflI7Fsq/Blzkw02SnLuv163k3kfmrVpZjSBlUHgsRKj6WgQiw30d3SX02Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-ppc64-gnu@1.51.0':
+    resolution: {integrity: sha512-7L4Wj2IEUNDETKssB9IDYt16T6WlF+X2jgC/hBq3diGHda9vJLpAgb09+D3quFq7TdkFtI7hwz/jmuQmQFPc1Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-ppc64-gnu@1.68.0':
+    resolution: {integrity: sha512-zExyZ8ZOUuAyQ0y9jpTcyjKUz62YY9JhKPyVxzvjTpXzZ3ujdqiVwfPWDdnA1SsIOrxdtxHn7KErDHLWskFjXg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-gnu@1.51.0':
+    resolution: {integrity: sha512-cBUHqtOXy76G41lOB401qpFoKx1xq17qYkhWrLSM7eEjiHM9sOtYqpr6ZdqCnN9s6ZpzudX4EkeHOFH2E9q0vA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-gnu@1.68.0':
+    resolution: {integrity: sha512-6C4MPuwewyDavA7sxM14wzgRi5GGL68HPIxRCdVyS75U4MDbpFVYzKO9WNR6KLKTMPq2pcz3THwo1sK2uiqngw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-musl@1.51.0':
+    resolution: {integrity: sha512-WKbg8CysgZcHfZX0ixQFBRSBvFZUHa3SBnEjHY2FVYt2nbNJEjzTxA3ZR5wMU0NOCNKIAFUFvAh5/XJKPRJuJg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-riscv64-musl@1.68.0':
+    resolution: {integrity: sha512-bnZooVeHAcvA+dH0EDLgx+7HY/DRi6e0hFszg3P+OBatuUjV6EvfIyNIzWOusmqAVh4L6r21GGTZtiKE4iqM4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-s390x-gnu@1.51.0':
+    resolution: {integrity: sha512-N1QRUvJTxqXNSu35YOufdjsAVmKVx5bkrggOWAhTWBc3J4qjcBwr1IfyLh/6YCg8sYRSR1GraldS9jUgJL/U4A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-s390x-gnu@1.68.0':
+    resolution: {integrity: sha512-dIqnZnJSmHCMOUpUcWQOiV14o3DDPVx1DSsMaSzvdhNjC1tB1iEPZbdiMSCIEYbkgbsYznHXWqFdKL8WUB3F8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-gnu@1.51.0':
+    resolution: {integrity: sha512-e0Mz0DizsCoqNIjeOg6OUKe8JKJWZ5zZlwsd05Bmr51Jo3AOL4UJnPvwKumr4BBtBrDZkCmOLhCvDGm95nJM2g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-gnu@1.68.0':
+    resolution: {integrity: sha512-zc9lEnfV/HreDTY6gdMlZe+irkwHSxQ4/B1pS9GyK7RVaA5LxhoZY/w6/o2vIwLLEYiXQ5ujGxOM1ZazeFAAIA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-musl@1.51.0':
+    resolution: {integrity: sha512-wD8HGTWhYBKXvRDvoBVB1y+fEYV01samhWQSy1Zkxq2vpezvMnjaFKRuiP6tBNITLGuffbNDEXOwcAhJ3gI5Ug==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-x64-musl@1.68.0':
+    resolution: {integrity: sha512-Dl5QEX0TCo/40Cdh1o1JdPS//+YiWqjC+Hrrya5OQmStZZr4svAFtdlqcpCrU9yq2Mo3vRVyO9B3h0dzD8s36Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-openharmony-arm64@1.51.0':
+    resolution: {integrity: sha512-5NSwQ2hDEJ0GPXqikjWtwzgAQCsS7P9aLMNenjjKa+gknN3lTCwwwERsT6lKXSirfU3jLjexA2XQvQALh5h27w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxlint/binding-openharmony-arm64@1.68.0':
+    resolution: {integrity: sha512-/qy6dOvi4S3/LeXq0l5BT5pRKPYA7oj3uKwJOAZOr5HRLL+HK6jdBynvWuXIA2wwfE01RzNYmbBdM7vwYx00sA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxlint/binding-win32-arm64-msvc@1.51.0':
+    resolution: {integrity: sha512-JEZyah1M0RHMw8d+jjSSJmSmO8sABA1J1RtrHYujGPeCkYg1NeH0TGuClpe2h5QtioRTaF57y/TZfn/2IFV6fA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint/binding-win32-arm64-msvc@1.68.0':
+    resolution: {integrity: sha512-fHNtVqPHSYE7UFDSLVFUjxQjnSVXxseNJmRW+XuP4pXXDwePdPda43NL7/BBCFTxHjycOc44JNDaOPtFDNui9A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint/binding-win32-ia32-msvc@1.51.0':
+    resolution: {integrity: sha512-q3cEoKH6kwjz/WRyHwSf0nlD2F5Qw536kCXvmlSu+kaShzgrA0ojmh45CA81qL+7udfCaZL2SdKCZlLiGBVFlg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxlint/binding-win32-ia32-msvc@1.68.0':
+    resolution: {integrity: sha512-NnKXr4Wgo4nps3erhrE0f8shBvBPZMHg72nDsvX0JyrRvsNiP3f1JNvbCKh+A6VFvpF7ZoJxu904P3cKMhvZnA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxlint/binding-win32-x64-msvc@1.51.0':
+    resolution: {integrity: sha512-Q14+fOGb9T28nWF/0EUsYqERiRA7cl1oy4TJrGmLaqhm+aO2cV+JttboHI3CbdeMCAyDI1+NoSlrM7Melhp/cw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxlint/binding-win32-x64-msvc@1.68.0':
+    resolution: {integrity: sha512-zg5pA+84AlU6XHJ3ruiRxziO71QTrz8nLsk6u01JGS5+tL9/bnlakFiklFrcy4R1/V7ktWtaNitN3JZWmKnf6g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher-android-arm64@2.5.4':
+    resolution: {integrity: sha512-hoh0vx4v+b3BNI7Cjoy2/B0ARqcwVNrzN/n7DLq9ZB4I3lrsvhrkCViJyfTj/Qi5xM9YFiH4AmHGK6pgH1ss7g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.4':
+    resolution: {integrity: sha512-kphKy377pZiWpAOyTgQYPE5/XEKVMaj6VUjKT5VkNyUJlr2qZAn8gIc7CPzx+kbhvqHDT9d7EqdOqRXT6vk0zw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.4':
+    resolution: {integrity: sha512-UKaQFhCtNJW1A9YyVz3Ju7ydf6QgrpNQfRZ35wNKUhTQ3dxJ/3MULXN5JN/0Z80V/KUBDGa3RZaKq1EQT2a2gg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.4':
+    resolution: {integrity: sha512-Dib0Wv3Ow/m2/ttvLdeI2DBXloO7t3Z0oCp4bAb2aqyqOjKPPGrg10pMJJAQ7tt8P4V2rwYwywkDhUia/FgS+Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.4':
+    resolution: {integrity: sha512-I5Vb769pdf7Q7Sf4KNy8Pogl/URRCKu9ImMmnVKYayhynuyGYMzuI4UOWnegQNa2sGpsPSbzDsqbHNMyeyPCgw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm-musl@2.5.4':
+    resolution: {integrity: sha512-kGO8RPvVrcAotV4QcWh8kZuHr9bXi9a3bSZw7kFarYR0+fGliU7hd/zevhjw8fnvIKG3J9EO5G6sXNGCSNMYPQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.4':
+    resolution: {integrity: sha512-KU75aooXhqGFY2W5/p8DYYHt4hrjHZod8AhcGAmhzPn/etTa+lYCDB2b1sJy3sWJ8ahFVTdy+EbqSBvMx3iFlw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.4':
+    resolution: {integrity: sha512-Qx8uNiIekVutnzbVdrgSanM+cbpDD3boB1f8vMtnuG5Zau4/bdDbXyKwIn0ToqFhIuob73bcxV9NwRm04/hzHQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.4':
+    resolution: {integrity: sha512-UYBQvhYmgAv61LNUn24qGQdjtycFBKSK3EXr72DbJqX9aaLbtCOO8+1SkKhD/GNiJ97ExgcHBrukcYhVjrnogA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-x64-musl@2.5.4':
+    resolution: {integrity: sha512-YoRWCVgxv8akZrMhdyVi6/TyoeeMkQ0PGGOf2E4omODrvd1wxniXP+DBynKoHryStks7l+fDAMUBRzqNHrVOpg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-win32-arm64@2.5.4':
+    resolution: {integrity: sha512-iby+D/YNXWkiQNYcIhg8P5hSjzXEHaQrk2SLrWOUD7VeC4Ohu0WQvmV+HDJokZVJ2UjJ4AGXW3bx7Lls9Ln4TQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.4':
+    resolution: {integrity: sha512-vQN+KIReG0a2ZDpVv8cgddlf67J8hk1WfZMMP7sMeZmJRSmEax5xNDNWKdgqSe2brOKTQQAs3aCCUal2qBHAyg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.4':
+    resolution: {integrity: sha512-3A6efb6BOKwyw7yk9ro2vus2YTt2nvcd56AuzxdMiVOxL9umDyN5PKkKfZ/gZ9row41SjVmTVQNWQhaRRGpOKw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.4':
+    resolution: {integrity: sha512-WYa2tUVV5HiArWPB3ydlOc4R2ivq0IDrlqhMi3l7mVsFEXNcTfxYFPIHXHXIh/ca/y/V5N4E1zecyxdIBjYnkQ==}
+    engines: {node: '>= 10.0.0'}
+
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
+  '@quansync/fs@1.0.0':
+    resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
+
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@react-aria/focus@3.22.1':
+    resolution: {integrity: sha512-CPxtkyrBi/HYY5P3lE/57sQ6qfa0lN8E55TOm89H0kNGv0lKt+/0zP7lWERzBjRr5IxBVrQX4gFEowBN52LPaA==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@react-aria/interactions@3.28.1':
+    resolution: {integrity: sha512-Bqb+HrD5I5MHS2SKBhISYqo2SW8Y2dfzgF/Y1lIJq7xqLxheo9vzxPGEHhz+XzkgGfoqEJx8A6a3C7uiqS3HWA==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@react-pdf/fns@3.1.3':
+    resolution: {integrity: sha512-0I7pApDr1/RLAKbizuLy/IHTEa93LSPy/bEwYniboC3Xqnp6Od8xFJKbKEzGw2wh/5zKFFwl00g4t9RwgIMc3w==}
+
+  '@react-pdf/font@4.1.1':
+    resolution: {integrity: sha512-D+4Xb0Ldv7oW4buvdPo/tDtZ95mWFQsg1oLkqgmxRfwJe/qpsk8X5Zq9VJ9F3Lqbj3Lrq+ztz7FFaIv39V1POw==}
+
+  '@react-pdf/hyphenate@0.1.0':
+    resolution: {integrity: sha512-CWulbuusHh2Lnos9ZffT3ZYfjCt332Yl8wjSyCKWbwhbTpe/VdFt53fM5elPp3HU3R6tzH6j3oYlLXDwC2WEHQ==}
+
+  '@react-pdf/image@3.1.2':
+    resolution: {integrity: sha512-89vlvZCCv1hPunFtyeS2rJTRL8h2yYmTI97AM4ppibS79zGsPFbqz/YrAunndcHB9uwGdn5S3+5k18mj0L2vkg==}
+
+  '@react-pdf/layout@5.1.1':
+    resolution: {integrity: sha512-lNc8E3kADpyN4dbpXnlDlKI0eWwJoiOLHj8qB1NM9bG9mI+gQ+AWkojV9/IfeRztGZJKza+s6zRmhN4vMtJ+pg==}
+
+  '@react-pdf/paginate@1.0.1':
+    resolution: {integrity: sha512-JN6teDqkdpkcRhdGZqyrr7Y8flgTtyI8XS3yaBQLyiGjEBPbR9m/19cz2z3JkqYpApau5pEHZlLjwGqMurWysw==}
+
+  '@react-pdf/primitives@4.4.0':
+    resolution: {integrity: sha512-BFpuhNH6ffSFjTTMnpdUoZxWoXdhPmFDdrSVBl0i/zMR4yDTEfYOW3AcfjjmNIOpm9+LnIXbgELLklQJ+nD3oA==}
+
+  '@react-pdf/reconciler@2.0.0':
+    resolution: {integrity: sha512-7zaPRujpbHSmCpIrZ+b9HSTJHthcVZzX0Wx7RzvQGsGBUbHP4p6s5itXrAIOuQuPvDepoHGNOvf6xUuMVvdoyw==}
+    peerDependencies:
+      react: 19.2.8
+
+  '@react-pdf/render@4.6.4':
+    resolution: {integrity: sha512-IqWHtFo6ZpF+pS34ZMMwUekfG0T9YRd/qaFU68lC2VIU0GJw3OLOUA1JbliZZgV+r9sTHF/UCQzU5t0s/ypZSw==}
+
+  '@react-pdf/renderer@4.8.1':
+    resolution: {integrity: sha512-BZD/wbImXHIT4BeYeX33NmcDUkL1D5KtUokgyKhNChbZL7ccdnkssvW8GbzYRaeCt6jYI3HI7nA6vDA19MFhHQ==}
+    peerDependencies:
+      react: 19.2.8
+
+  '@react-pdf/stylesheet@6.3.1':
+    resolution: {integrity: sha512-+tlgVBsyG8lKMXJp6XycTnYrFkxAxxoLGbc6DUXKe5sxDxqgtD/AqhlrrpUwewxgCDrcIWmWBUb4E95ZUa+hEg==}
+
+  '@react-pdf/svg@1.1.1':
+    resolution: {integrity: sha512-m1GmGxV2wg/3VpoQ0aCJ598fBedCCfN+HtxKx1lq5kdwUWEaTbfXI1DGFAUedprFDd/i24okKFaUhV/KVZIqIQ==}
+
+  '@react-pdf/textkit@7.0.1':
+    resolution: {integrity: sha512-ljY/YoEETIOR/+zxWdLLmKlupz8/nBsbmxglM3mDRco62UEzEPnIeMEzYVVVraovCAJC2t+50gKFNSV17FYxbw==}
+
+  '@react-pdf/types@2.13.1':
+    resolution: {integrity: sha512-uzEWSHZR8HRjsa7g0yCA+sGX1vC10rm9mBE+Ds3j669y1Ax+1hn+MfIknf8Ae8p3WVNNikUof02pVwLRw6kJng==}
+
+  '@react-router/dev@8.3.0':
+    resolution: {integrity: sha512-XR+N2fEFOPjczYo2efc3/AOtosbSICCroLF/IxnZ6ErGBeBGRG6SqAso0SYoff0e18OA05qOyhJHFhXKMGIPRw==}
+    engines: {node: '>=22.22.0'}
+    hasBin: true
+    peerDependencies:
+      '@react-router/serve': ^8.3.0
+      '@vitejs/plugin-rsc': ~0.5.26
+      react-router: ^8.3.0
+      react-server-dom-webpack: ^19.2.7
+      typescript: 5.8.3
+      vite: 8.0.16
+      wrangler: ^4.0.0
+    peerDependenciesMeta:
+      '@react-router/serve':
+        optional: true
+      '@vitejs/plugin-rsc':
+        optional: true
+      react-server-dom-webpack:
+        optional: true
+      typescript:
+        optional: true
+      wrangler:
+        optional: true
+
+  '@react-router/express@8.3.0':
+    resolution: {integrity: sha512-ejgJTbGO0CzwjgU4IMM3JTJvqtisc+qF6l0iMzwx+NnrsYwtFy0V1BrajM9499+YQ/420LbuRTtZqDfpUIkwHw==}
+    engines: {node: '>=22.22.0'}
+    peerDependencies:
+      express: 4.22.0
+      react-router: 8.3.0
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@react-router/node@8.3.0':
+    resolution: {integrity: sha512-qw5ibcolE1OcwngiEw6t7LR11Hi6yWEDvj6cfvaYROX+w18JPxc0YSmsdn3Wlc9TOX+Qo8FVcxbXRdc9vojn2w==}
+    engines: {node: '>=22.22.0'}
+    peerDependencies:
+      react-router: 8.3.0
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@react-router/serve@8.3.0':
+    resolution: {integrity: sha512-ILFhPizuaNtQKfX1aLg6lr7r5FMZO/DgerUpGFhnK85t7M5c6ZNOb7VUURlJpu/ArUR2Sh+f5nBYTsgFt2R2OA==}
+    engines: {node: '>=22.22.0'}
+    hasBin: true
+    peerDependencies:
+      react-router: 8.3.0
+
+  '@react-types/shared@3.36.1':
+    resolution: {integrity: sha512-AzsuD9OfxTOZMMvTRhlN3oHBwOmFN7tDh27LzqmHt4+uOgPhJT7ZM7/kVs/8/o0WxayMUIk3hBmCFRHv1FUoag==}
+    peerDependencies:
+      react: 19.2.8
+
+  '@remirror/core-constants@3.0.0':
+    resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
+
+  '@remix-run/node-fetch-server@0.13.3':
+    resolution: {integrity: sha512-UfjOXed/DQteaM5VyTfqTeGpHwyL2J5aoRGY6cydip4tt1ehNNeSwuXCC7AEGE0RWBs/7bgKxYkL/B/+UDe4AA==}
+
+  '@rolldown/binding-android-arm64@1.0.0-beta.46':
+    resolution: {integrity: sha512-1nfXUqZ227uKuLw9S12OQZU5z+h+cUOXLW5orntWVxHWvt20pt1PGUcVoIU8ssngKABu0vzHY268kAxuYX24BQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-android-arm64@1.0.3':
+    resolution: {integrity: sha512-454rs7jHngixp/NMxd5srYD57OnzSlZ/eFTETjORQHLwJG1lRtmNOJcBerZlfu4GjKqeq8aCCIQrMdHyhI51Hw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.46':
+    resolution: {integrity: sha512-w4IyumCQkpA3ezZ37COG3mMusFYxjEE8zqCfXZU/qb5k1JMD2kVl0fgJafIbGli27tgelYMweXkJGnlrxSGT9Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-arm64@1.0.3':
+    resolution: {integrity: sha512-PcAhP+ynjURNyy8SKGl5DQP94aGuB/7JrXJb/t7P+hanXvQVMWzUvRRhBAcg/lNRadBhoUPqSoP4xw5tR/KBEA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.0-beta.46':
+    resolution: {integrity: sha512-9QqaRHPbdAnv306+7nzltq4CktJ49Z4W9ybHLWYxSeDSoOGL4l1QmxjDWoRHrqYEkNr+DWHqqoD4NNHgOk7lKw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.0.3':
+    resolution: {integrity: sha512-9YpfeUvSE2RS7wysJ81uOZkXJz7f7Q55H2Gvp3VEw/EsahqDtrphrZ0EwDLK5vvKOzaCrBsjF8JmnMLcUt78Gg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.46':
+    resolution: {integrity: sha512-Cuk5opdEMb+Evi7QcGArc4hWVoHSGz/qyUUWLTpFJWjylb8wH1u4f+HZE6gVGACuf4w/5P/VhAIamHyweAbBVQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-freebsd-x64@1.0.3':
+    resolution: {integrity: sha512-yB1IlAsSNHncV6SCTL27/MVGR5htvQsoGxIv5KMGXALp+Ll1wYsn+x98M9MW7qa+NdSbvrrY7ANI4wLJ0n1e6g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.46':
+    resolution: {integrity: sha512-BPWDxEnxb4JNMXrSmPuc5ywI6cHOELofmT0e/WGkbL1MwKYRVvqTf+gMcGLF6zAV+OF5hLYMAEk8XKfao6xmDQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
+    resolution: {integrity: sha512-Yi30IVAAfLUCy2MseFjbB1jAMDl1VMCAas5StnYp8da9+CKvMd2H2cbEjWcw5NPaPqzvYkVIaF1nNUG+b7u/sw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.46':
+    resolution: {integrity: sha512-CDQSVlryuRC955EwgbBK1h/6xQyttSxQG8+6/PeOfvUlfKGPMbBdcsOEHzGve5ED1Y7Ovh2UFjY/eT106aQqig==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.3':
+    resolution: {integrity: sha512-jsO7R8To+AdlYgUmN5sHSCZbfhtMBkO0WUx8iORQnPcMMdgr7qM2DQmMwgabs3GhNztdmoKkMKQFHD6DTMCIQw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.46':
+    resolution: {integrity: sha512-6IZHycZetmVaC9zwcl1aA9fPYPuxLa5apALjJRoJu/2BZdER3zBWxDnCzlEh4SUlo++cwdfV9ZQRK9JS8cLNuA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-arm64-musl@1.0.3':
+    resolution: {integrity: sha512-VWkUHwWriDciit80wleYwKILoR/KMvxh/IdwS/paX+ZgpuRpCrKLUdadJbc0NpBEiyhpYawsJ73j9aCvOH+f7Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.3':
+    resolution: {integrity: sha512-5f1laC0SlIR0yDbFCd8acUhvJIag6N3zC5P7oUPN6wX0aOma+uKJ0wBDH5aq7I1PVI2ttTlhJwzwRIBnLiSGEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.3':
+    resolution: {integrity: sha512-Iq4ko0r4XsgbrF/LunNgHtAGLRRVE2kXonAXQ/MV0mC6jQpMOhW1SvtZja2EhC/kd05++bP78dsqBeIQyYJ6Yg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.46':
+    resolution: {integrity: sha512-R/kI8fMnsxXvWzcMv5A408hfvrwtAwD/HdQKIE1HKWmfxdSHB11Y3PVwlnt7RVo7I++6mWCIxxj5o3gut4ibEw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.0.3':
+    resolution: {integrity: sha512-B8m6tD5+/N5FeNQFbKlLA/2yVq9ycQP1SeedyEYYKWBNR3ZQbkvIUcNnDNM03lO1l5F2roiiFJGgvoLLyZXtSg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.46':
+    resolution: {integrity: sha512-vGUXKuHGUlG2XBwvN4A8KIegeaVVxN2ZxdGG9thycwRkzUvZ9ccKvqUVZM8cVRyNRWgVgsGCS18qLUefVplwKw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-x64-musl@1.0.3':
+    resolution: {integrity: sha512-pSdpdUJHkuCxun9LE7jvgUB9qsRgaiyNNCX7m/AvHTcq67AiT/Yhoxvw5zPfhrM8k/BfP8ce/hMOpthKDpEUow==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.46':
+    resolution: {integrity: sha512-6SpDGH+0Dud3/RFDoC6fva6+Cm/0COnMRKR8kI4ssHWlCXPymlM59kYFCIBLZZqwURpNVVMPln4rWjxXuwD23w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-openharmony-arm64@1.0.3':
+    resolution: {integrity: sha512-OXXS3RKJgX2uLwM+gYyuH5omcH8fL1LJs96pZGgtetVCahON57+d4SJHzTgZiOjxgGkSnpXpOsWuPDGAKAigEg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.46':
+    resolution: {integrity: sha512-peWDGp8YUAbTw5RJzr9AuPlTuf2adr+TBNIGF6ysMbobBKuQL41wYfGQlcerXJfLmjnQLf6DU2zTPBTfrS2Y8A==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@rolldown/binding-wasm32-wasi@1.0.3':
+    resolution: {integrity: sha512-JTtb8BWFynicNSoPrehsCzBtOKjZ6jhMiPFEmOiuXg1Fl8dn2KHQob+GuPSGR0dryQa1PQJbzjF3dqO/whhjLg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.46':
+    resolution: {integrity: sha512-Ydbwg1JCnVbTAuDyKtu3dOuBLgZ6iZsy8p1jMPX/r7LMPnpXnS15GNcmMwa11nyl/M2VjGE1i/MORUTMt8mnRQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.3':
+    resolution: {integrity: sha512-gEdFFEN70A/jxb2svrWsN3aDL7OUtmvlOy+6fa2jxG8K0wQ1ZbdeLGnidov6Yu5/733dI5ySfzFlQ/cb0bSz1g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.46':
+    resolution: {integrity: sha512-XcPZG2uDxEn6G3takXQvi7xWgDiJqdC0N6mubL/giKD4I65zgQtbadwlIR8oDB/erOahZr5IX8cRBVcK3xcvpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.46':
+    resolution: {integrity: sha512-VPC+F9S6nllv02aGG+gxHRgpOaOlYBPn94kDe9DCFSLOztf4uYIAkN+tLDlg5OcsOC8XNR5rP49zOfI0PfnHYw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.0.3':
+    resolution: {integrity: sha512-eXB7CHuaQdqmJcc3koCNtNPmT/bj2gc999kUFgBxG8Ac0NdgXc4rkCHhqrgrhN3zddvvvrgzj1e90SuSfmyIXA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.0-beta.46':
+    resolution: {integrity: sha512-xMNwJo/pHkEP/mhNVnW+zUiJDle6/hxrwO0mfSJuEVRbBfgrJFuUSRoZx/nYUw5pCjrysl9OkNXCkAdih8GCnA==}
+
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
+  '@rollup/pluginutils@5.2.0':
+    resolution: {integrity: sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: 4.59.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@sentry-internal/server-utils@10.56.0':
+    resolution: {integrity: sha512-6kuZI/vAjyVKMm1cTzc2pdUmVR4Px4etMG6wnCPyFnwEaGbUKQnTynUBFpTuo/q6Js6QBQvhLNoAnO4YsOfW4w==}
+    engines: {node: '>=18'}
+
+  '@sentry/core@10.56.0':
+    resolution: {integrity: sha512-L+u1dIz5SANrmST5jhIwETtt4apILgKrylv12X4hKJU0PvZl+NorjeV/ty3MwzpKQPg6b6q6qMOSLc1rLpy3iQ==}
+    engines: {node: '>=18'}
+
+  '@sentry/node-core@10.56.0':
+    resolution: {integrity: sha512-61lD2Wjtv5Lw2F3lJarcD0ORjR4GlVxrEd6w6Of/uF3DH73dD6K3n/3wXEeCIRfV/kgiCFIrCIq76nz0LVgE5g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@opentelemetry/api': ^1.9.0
+      '@opentelemetry/core': 2.8.0
+      '@opentelemetry/exporter-trace-otlp-http': '>=0.57.0 <1'
+      '@opentelemetry/instrumentation': '>=0.57.1 <1'
+      '@opentelemetry/sdk-trace-base': 2.8.0
+      '@opentelemetry/semantic-conventions': ^1.39.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@opentelemetry/core':
+        optional: true
+      '@opentelemetry/exporter-trace-otlp-http':
+        optional: true
+      '@opentelemetry/instrumentation':
+        optional: true
+      '@opentelemetry/sdk-trace-base':
+        optional: true
+      '@opentelemetry/semantic-conventions':
+        optional: true
+
+  '@sentry/node@10.56.0':
+    resolution: {integrity: sha512-qvgtXHkcR4CH3fh0VEVyw4Ysc6MMiAnm727NdTTm0yU5e53erCeo2521+yfJkqmRTGiOSgwA7B5Bs+ot9j0vFQ==}
+    engines: {node: '>=18'}
+
+  '@sentry/opentelemetry@10.56.0':
+    resolution: {integrity: sha512-PtMudApHMHvttjos3b7JZ2gJ+nstHAOYE3vKPYB5o0WQO95ldiaYnpLKMCRIGZWF3Dk7ynrqqnBpn8LZLt+Mrg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@opentelemetry/api': ^1.9.0
+      '@opentelemetry/core': 2.8.0
+      '@opentelemetry/sdk-trace-base': 2.8.0
+      '@opentelemetry/semantic-conventions': ^1.39.0
+
+  '@standard-schema/spec@1.1.0':
+    resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
+
+  '@storybook/addon-designs@11.1.3':
+    resolution: {integrity: sha512-AK+ij478Y6S16TCNPwm7H90OipVe2wZApOlHjC6qDvMW61zyd4yP1icrRtjehSadw5SCoz8HcAmIYfQCOY6E4A==}
+    peerDependencies:
+      '@storybook/addon-docs': ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0
+      react: 19.2.8
+      react-dom: 19.2.8
+      storybook: ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0
+    peerDependenciesMeta:
+      '@storybook/addon-docs':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  '@storybook/addon-docs@10.4.6':
+    resolution: {integrity: sha512-aWAfP5JMiT5a3zBJizwroCRzOCqZwDTJmvsYvwMD3ilIEa/kT1vhf6Xrbk4XIPhDwbh8Hpb/Gfnka1xBYEISWg==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      storybook: ^10.4.6
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@storybook/addon-links@10.4.6':
+    resolution: {integrity: sha512-VGfERTsGRFmfvNP3SKprFWkC6Od5kXzSutT5PSZjQ/O9NnCdHhd/RILxFDN2TzZn9ywDc7t5b4AldKmSYCv3EQ==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+      storybook: ^10.4.6
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+
+  '@storybook/addon-onboarding@10.4.6':
+    resolution: {integrity: sha512-BzTu5LW5Ygwv0BbmQM0QohGS5Uoa8GjSxPcZFCQ1iQfizUukKnd72UIsPDZBKjVytO0DbZ3YoM1Ww5+KL6ZXEg==}
+    peerDependencies:
+      storybook: ^10.4.6
+
+  '@storybook/addon-styling-webpack@3.0.2':
+    resolution: {integrity: sha512-u7d5ur+It6XWSwd5yxHN6dTzIfj23as3zHJBf1IfDvi/GWmsW7zrmfsWpRIyBkIhBmdL+oSsTtLLTjuC9HeL8Q==}
+    peerDependencies:
+      storybook: ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0
+      webpack: 5.104.1
+
+  '@storybook/addon-webpack5-compiler-swc@4.0.3':
+    resolution: {integrity: sha512-REJZBArIBcqzxmhQY9R1br9hjfcFYdl4FeWD/okx1eRwPZkl49aUhTYqZPrA+MWXfKJkuuNQ5vnfSoR0c9HyvA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      storybook: ^9.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.3.0-0 || ^10.4.0-0
+
+  '@storybook/builder-vite@10.4.6':
+    resolution: {integrity: sha512-BHBtD81HiXUiDQz/CaFynLtWmm7AFUQn8VnXuHipZ8KlnUANopa4yqdVuy/Gwz8ub254uFI5NMZsW/KlgWNgNg==}
+    peerDependencies:
+      storybook: ^10.4.6
+      vite: 8.0.16
+
+  '@storybook/builder-webpack5@10.4.6':
+    resolution: {integrity: sha512-klJUCBlkr1mFqXxsyYc7akIBhT5VOBTRcHChSFXq6Kbh+qQYOvfmgBpY0Tv+f7ffBmzp6gxpTorg7eGxlklxeQ==}
+    peerDependencies:
+      storybook: ^10.4.6
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@storybook/core-webpack@10.4.6':
+    resolution: {integrity: sha512-DDhpgaFGb1AC0lzfR2LOozCj+uT14tsr2R9551PHgcC3ru1yfhL2DNbIjdiMuQP8nVm+2HKeXWhybJGYtk9z9g==}
+    peerDependencies:
+      storybook: ^10.4.6
+
+  '@storybook/csf-plugin@10.4.6':
+    resolution: {integrity: sha512-NILLxDqpA/JR/AazGWpsz+4fadJwRU4uhHephGtYpVOWnQA/DkJfKT6zpcJVq8+QA8A2zKMLX3GVKsXIrxjuDA==}
+    peerDependencies:
+      esbuild: 0.28.1
+      rollup: 4.59.0
+      storybook: ^10.4.6
+      vite: 8.0.16
+      webpack: 5.104.1
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+
+  '@storybook/global@5.0.0':
+    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
+
+  '@storybook/icons@2.0.2':
+    resolution: {integrity: sha512-KZBCpXsshAIjczYNXR/rlxEtCUX/eAbpFNwKi8bcOomrLA4t/SyPz5RF+lVPO2oZBUE4sAkt43mfJUevQDSEEw==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@storybook/preset-react-webpack@10.4.6':
+    resolution: {integrity: sha512-D6EjK1sknC/1GmdWQjV38HEP+tBxJ5ObNuCUWQzGsJqsiq45HaOemZbIyJqxp3dYx2/YpFd0bawn7PlOP4yNOQ==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+      storybook: ^10.4.6
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0':
+    resolution: {integrity: sha512-KUqXC3oa9JuQ0kZJLBhVdS4lOneKTOopnNBK4tUAgoxWQ3u/IjzdueZjFr7gyBrXMoU6duutk3RQR9u8ZpYJ4Q==}
+    peerDependencies:
+      typescript: 5.8.3
+      webpack: 5.104.1
+
+  '@storybook/react-dom-shim@10.4.6':
+    resolution: {integrity: sha512-iGNmKzrq9vgl2PDrYAnZKI+yvac3Ym+lJXXuQaqlFRS23zA5MNm4EBX+rAG7WulqchoK6NaZ0KQOs2mAgEpTMg==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3
+      react: 19.2.8
+      react-dom: 19.2.8
+      storybook: ^10.4.6
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@storybook/react-vite@10.4.6':
+    resolution: {integrity: sha512-0arEQtybqGYXHbXpTot+Wv9YtG+V5Vp43QayXavPKQ20M8mpEzhyCPKd0EhqMGSC1Z1UEt0hm365WUBhI9LfKA==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+      storybook: ^10.4.6
+      vite: 8.0.16
+
+  '@storybook/react-webpack5@10.4.6':
+    resolution: {integrity: sha512-34rOHFRa4NrBnMKsQMq8QTvw65QQJUtasYfEOw1/Pa9+CFWfFQZ3kfDLRxatphUyc0rbKxmVrVE4SFEMY/eMsA==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+      storybook: ^10.4.6
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@storybook/react@10.4.6':
+    resolution: {integrity: sha512-9Y7YecrVFe1/01KYjfOLxVqTg2Aq+IO6TEv6sC2U0PfD0AWCSCmQ91QqgBpN/XW4aFFWoiZNinyXMUlU8zxy2w==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3
+      react: 19.2.8
+      react-dom: 19.2.8
+      storybook: ^10.4.6
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+      typescript:
+        optional: true
+
+  '@swc/core-darwin-arm64@1.13.5':
+    resolution: {integrity: sha512-lKNv7SujeXvKn16gvQqUQI5DdyY8v7xcoO3k06/FJbHJS90zEwZdQiMNRiqpYw/orU543tPaWgz7cIYWhbopiQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@swc/core-darwin-x64@1.13.5':
+    resolution: {integrity: sha512-ILd38Fg/w23vHb0yVjlWvQBoE37ZJTdlLHa8LRCFDdX4WKfnVBiblsCU9ar4QTMNdeTBEX9iUF4IrbNWhaF1Ng==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@swc/core-linux-arm-gnueabihf@1.13.5':
+    resolution: {integrity: sha512-Q6eS3Pt8GLkXxqz9TAw+AUk9HpVJt8Uzm54MvPsqp2yuGmY0/sNaPPNVqctCX9fu/Nu8eaWUen0si6iEiCsazQ==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@swc/core-linux-arm64-gnu@1.13.5':
+    resolution: {integrity: sha512-aNDfeN+9af+y+M2MYfxCzCy/VDq7Z5YIbMqRI739o8Ganz6ST+27kjQFd8Y/57JN/hcnUEa9xqdS3XY7WaVtSw==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@swc/core-linux-arm64-musl@1.13.5':
+    resolution: {integrity: sha512-9+ZxFN5GJag4CnYnq6apKTnnezpfJhCumyz0504/JbHLo+Ue+ZtJnf3RhyA9W9TINtLE0bC4hKpWi8ZKoETyOQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@swc/core-linux-x64-gnu@1.13.5':
+    resolution: {integrity: sha512-WD530qvHrki8Ywt/PloKUjaRKgstQqNGvmZl54g06kA+hqtSE2FTG9gngXr3UJxYu/cNAjJYiBifm7+w4nbHbA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@swc/core-linux-x64-musl@1.13.5':
+    resolution: {integrity: sha512-Luj8y4OFYx4DHNQTWjdIuKTq2f5k6uSXICqx+FSabnXptaOBAbJHNbHT/06JZh6NRUouaf0mYXN0mcsqvkhd7Q==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@swc/core-win32-arm64-msvc@1.13.5':
+    resolution: {integrity: sha512-cZ6UpumhF9SDJvv4DA2fo9WIzlNFuKSkZpZmPG1c+4PFSEMy5DFOjBSllCvnqihCabzXzpn6ykCwBmHpy31vQw==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@swc/core-win32-ia32-msvc@1.13.5':
+    resolution: {integrity: sha512-C5Yi/xIikrFUzZcyGj9L3RpKljFvKiDMtyDzPKzlsDrKIw2EYY+bF88gB6oGY5RGmv4DAX8dbnpRAqgFD0FMEw==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@swc/core-win32-x64-msvc@1.13.5':
+    resolution: {integrity: sha512-YrKdMVxbYmlfybCSbRtrilc6UA8GF5aPmGKBdPvjrarvsmf4i7ZHGCEnLtfOMd3Lwbs2WUZq3WdMbozYeLU93Q==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@swc/core@1.13.5':
+    resolution: {integrity: sha512-WezcBo8a0Dg2rnR82zhwoR6aRNxeTGfK5QCD6TQ+kg3xx/zNT02s/0o+81h/3zhvFSB24NtqEr8FTw88O5W/JQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@swc/helpers': '>=0.5.17'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.17':
+    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
+
+  '@swc/types@0.1.24':
+    resolution: {integrity: sha512-tjTMh3V4vAORHtdTprLlfoMptu1WfTZG9Rsca6yOKyNYsRr+MUXutKmliB17orgSZk5DpnDxs8GUdd/qwYxOng==}
+
+  '@tailwindcss/node@4.1.17':
+    resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    resolution: {integrity: sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    resolution: {integrity: sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    resolution: {integrity: sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    resolution: {integrity: sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    resolution: {integrity: sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    resolution: {integrity: sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.1.17':
+    resolution: {integrity: sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.1.17':
+    resolution: {integrity: sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==}
+
+  '@tailwindcss/typography@0.5.19':
+    resolution: {integrity: sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@tanstack/react-virtual@3.13.12':
+    resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
+  '@tanstack/virtual-core@3.13.12':
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+
+  '@testing-library/dom@10.4.0':
+    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/user-event@14.6.1':
+    resolution: {integrity: sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+
+  '@tiptap/core@2.26.3':
+    resolution: {integrity: sha512-TaOJzu2v5ufsOx+yu94NqXE504zmupVdFCxH1g3hk5fzZ3gT57Lh9R/27OjwM4e6o+Z3DXDl8yfFMHIcR3zUkg==}
+    peerDependencies:
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-blockquote@2.26.1':
+    resolution: {integrity: sha512-viQ6AHRhjCYYipKK6ZepBzwZpkuMvO9yhRHeUZDvlSOAh8rvsUTSre0y74nu8QRYUt4a44lJJ6BpphJK7bEgYA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-bold@2.26.2':
+    resolution: {integrity: sha512-kNjbHZhLyDu2ZBZmJINzXg3MAW7+05KqGkcwxudC1X/DQM5V5FpW7u6TOlC+nf1I9wABgayxURyU8FsIaXDxqA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-bubble-menu@2.26.3':
+    resolution: {integrity: sha512-vliC5bv/md4qkguqqL8w7LW8jnXBD1FLdSMDavHRVwdRaRnEfLRAIY7Oxtc1Voy3+762tfn912TuwDlCOPsNSQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-bullet-list@2.26.2':
+    resolution: {integrity: sha512-L0qxUa5vzUciLEVtr1nY6HG8gH8432GtuX807MM/5wKiYYdbSii3I22456ZnboiozoqXrjjvYUHeB++HhOSPgQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-character-count@2.26.1':
+    resolution: {integrity: sha512-F7LP1a9GF28thbApowWT2I41baqX74HMUTrV9LGrNXaOkW2gxZz+CDOzfHsbHyfuwfIxIjv07Qf/HKA6Cc1qbA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-code-block@2.26.2':
+    resolution: {integrity: sha512-MJZ4QtziIWJ1zuSW2ogAHv+UHGk3DvGbVi+Dfmo0ybonXX7vRVHE+3qT7OcdTRBF+pC2oCnsjzqwFcGBP3BbZw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-code@2.26.2':
+    resolution: {integrity: sha512-xnKJvzlAp75dheyaK5tLKAksHf9PtSr8a7OuPjf2IXS5K+QMtnwxx7KAHHijmecfWjLR0wyu9AvT/FWFfKi5LQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-collaboration@2.26.1':
+    resolution: {integrity: sha512-ozCrGW5IAzi/18Ngdi0v/Q175D7J3ZGoTffDDyPxnTK/oksfROajoe+ZIEgoDGXPeI/I7TTlTONuqQ6LZT5r7Q==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+      y-prosemirror: ^1.2.11
+
+  '@tiptap/extension-document@2.26.1':
+    resolution: {integrity: sha512-2P2IZp1NRAE+21mRuFBiP3X2WKfZ6kUC23NJKpn8bcOamY3obYqCt0ltGPhE4eR8n8QAl2fI/3jIgjR07dC8ow==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-dropcursor@2.26.2':
+    resolution: {integrity: sha512-o5j4Gkurb/WBu1wP2tihYnZ8dENzmlxFWWMx++g6abEpn9xdud7VxHT5Ny7mBSBptI8uMwKT53weYC0on38n3g==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-emoji@2.26.1':
+    resolution: {integrity: sha512-CtK10GF80Qr4lgJ7P6W6tVThOjpq1lh8oyoBospZ+CjD4GYcY73bdl+FP0uxhZdJsMHzaqzMP5wWQ54zHsIaIg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+      '@tiptap/suggestion': ^2.7.0
+
+  '@tiptap/extension-floating-menu@2.26.3':
+    resolution: {integrity: sha512-i2dsIMa0L6vjCPnTiXjPZXZqUu3sIIIAI+E1T4p0FsGYjjPTmN+AgkJqeO3bbe5XHmWcWKtgQevNCMF0kmU5rQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-gapcursor@2.26.2':
+    resolution: {integrity: sha512-a68mi8V0mh058UrBIk23f50K5JGVeRZnF6ViptIleAD/Ny1K6VLjGCz6k190de+Tb9tnQLPEwwwDcy+ZnvCmYQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-hard-break@2.26.2':
+    resolution: {integrity: sha512-OLpeTey7p3ChyEsABLPvNv7rD/8E4k1JTt+H+MUjyL0dnrZuIWluckUJCJKnV8PhR9Mifngk1MTFUilpooiv1g==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-heading@2.26.1':
+    resolution: {integrity: sha512-KSzL8WZV3pjJG9ke4RaU70+B5UlYR2S6olNt5UCAawM+fi11mobVztiBoC19xtpSVqIXC1AmXOqUgnuSvmE4ZA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-history@2.26.1':
+    resolution: {integrity: sha512-m6YR1gkkauIDo3PRl0gP+7Oc4n5OqDzcjVh6LvWREmZP8nmi94hfseYbqOXUb6RPHIc0JKF02eiRifT4MSd2nw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-horizontal-rule@2.26.2':
+    resolution: {integrity: sha512-whlUskFUwmi7nXn4OT55xHXSAqwEAEQfZWswmae1Y5wTMDxavZ0FF4xvCVgsQ7gYG782tIgLCzriTN4AjBphIQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-image@2.26.1':
+    resolution: {integrity: sha512-96+MaYBJebQlR/ik5W72GLUfXdEoxFs+6jsoERxbM5qEdhb7TEnodBFtWZOwgDO27kFd6rSNZuW9r5KJNtljEg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-italic@2.26.2':
+    resolution: {integrity: sha512-/4AiE2JWtjY9yW+MifMP8EOOwOSDKDUxCyqtGT6e4xqqFUNLZJA0o4P/MYjcKVwsa1/IsDRsOaFRlAiMmAXVXw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-list-item@2.26.1':
+    resolution: {integrity: sha512-quOXckC73Luc3x+Dcm88YAEBW+Crh3x5uvtQOQtn2GEG91AshrvbnhGRiYnfvEN7UhWIS+FYI5liHFcRKSUKrQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-mention@2.26.1':
+    resolution: {integrity: sha512-sBrlJ9nWjFx7oWCtt0hV192FgCBXva1zwImWbgXTCGPAjv0d5EoPymIfRgoeanAmuQjOHoKzzZnJ6bELTZhkGw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+      '@tiptap/suggestion': ^2.7.0
+
+  '@tiptap/extension-ordered-list@2.26.2':
+    resolution: {integrity: sha512-UVGYyWKB5wWWvrvdN/WrPXPHJoP/UD1TNyeoE75M6nq4oD4l+Nc9Y5MIPsngrv/TimbomLNilR4ZRHibEriG9w==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-paragraph@2.26.2':
+    resolution: {integrity: sha512-dccyffm95nNT9arjxGOyv4/cOPF4XS5Osylccp9KYLrmiSTXEuzVIYtMXhXbc0UUdABGvbFQWi88tRxgeDTkgA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-placeholder@2.26.1':
+    resolution: {integrity: sha512-MBlqbkd+63btY7Qu+SqrXvWjPwooGZDsLTtl7jp52BczBl61cq9yygglt9XpM11TFMBdySgdLHBrLtQ0B7fBlw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-strike@2.26.2':
+    resolution: {integrity: sha512-gY8/P8ycvICiZsa9OeTpOnSL0o+PAYH1QpBomaBhdZZ2tcsziMYN9BZto6uQARi9tdxeOYRePyZ+Junk4xsyFg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-task-item@2.26.1':
+    resolution: {integrity: sha512-b7JNeOsBqEd1p2oQ5N6Msz9fr2o73WR1WsYDC0WhECg07Goud2gQEkwWkQaLsvfcwuS746eMJK/nrT2pVEngYA==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/extension-task-list@2.26.1':
+    resolution: {integrity: sha512-xR4LMpMPZ6bpkZNmFvIojmNGtdGKNlKFbpvyIOgs4qhlWskbFQQVevglHjV1R8xJLic5c+byJQaAmQdQudqGng==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-text-align@2.26.1':
+    resolution: {integrity: sha512-x6mpNGELy2QtSPBoQqNgiXO9PjZoB+O2EAfXA9YRiBDSIRNOrw+7vOVpi+IgzswFmhMNgIYUVfQRud4FHUCNew==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-text-style@2.26.1':
+    resolution: {integrity: sha512-t9Nc/UkrbCfnSHEUi1gvUQ2ZPzvfdYFT5TExoV2DTiUCkhG6+mecT5bTVFGW3QkPmbToL+nFhGn4ZRMDD0SP3Q==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-text@2.26.1':
+    resolution: {integrity: sha512-p2n8WVMd/2vckdJlol24acaTDIZAhI7qle5cM75bn01sOEZoFlSw6SwINOULrUCzNJsYb43qrLEibZb4j2LeQw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/extension-underline@2.26.1':
+    resolution: {integrity: sha512-/fufv41WDMdf0a4xmFAxONoAz08TonJXX6NEoSJmuGKO59M/Y0Pz8DTK1g32Wk44kn7dyScDiPlvvndl+UOv0A==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+
+  '@tiptap/html@2.26.2':
+    resolution: {integrity: sha512-I1h+aVpP94j9elO3aO49BMSISl4jrLZPhUijshFGgsSr94xRqLd/s4iBceRxeoBfhCgtHxsKaWXrdBbvL+N0pQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tiptap/pm@2.26.1':
+    resolution: {integrity: sha512-8aF+mY/vSHbGFqyG663ds84b+vca5Lge3tHdTMTKazxCnhXR9dn2oQJMnZ78YZvdRbkPkMJJHti9h3K7u2UQvw==}
+
+  '@tiptap/pm@3.6.6':
+    resolution: {integrity: sha512-E/rtpPEqPiQJrchdOUDcMPR69x96a+JeMWLL12fos4KfF7YVzQ5oUIij21RffV+qeHxug7HMUpQKBtCuJfek/Q==}
+
+  '@tiptap/react@2.26.1':
+    resolution: {integrity: sha512-Zxlwzi1iML7aELa+PyysFD2ncVo2mEcjTkhoDok9iTbMGpm1oU8hgR1i6iHrcSNQLfaRiW6M7HNhZZQPKIC9yw==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  '@tiptap/starter-kit@2.26.1':
+    resolution: {integrity: sha512-oziMGCds8SVQ3s5dRpBxVdEKZAmO/O//BjZ69mhA3q4vJdR0rnfLb5fTxSeQvHiqB878HBNn76kNaJrHrV35GA==}
+
+  '@tiptap/suggestion@2.26.1':
+    resolution: {integrity: sha512-iNWJdQN7h01keNoVwyCsdI7ZX11YkrexZjCnutWK17Dd72s3NYVTmQXu7saftwddT4nDdlczNxAFosrt0zMhcg==}
+    peerDependencies:
+      '@tiptap/core': ^2.7.0
+      '@tiptap/pm': ^2.7.0
+
+  '@tokenizer/inflate@0.4.1':
+    resolution: {integrity: sha512-2mAv+8pkG6GIZiF1kNg1jAjh27IDxEPKwdGul3snfztFerfPGI1LjDezZp3i7BElXompqEtPmoPx6c2wgtWsOA==}
+    engines: {node: '>=18'}
+
+  '@tokenizer/token@0.3.0':
+    resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
+
+  '@turbo/darwin-64@2.10.11':
+    resolution: {integrity: sha512-v3R+1R/Ysozyo+p7Ri8MCIbndOvYt3DgPFrGLhrhQHfvyvbxyH3WyJj+A/2JTNmNleuAlh3JUyCV0iSVHIONTA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@turbo/darwin-arm64@2.10.11':
+    resolution: {integrity: sha512-R0a0CvGAeYYsBgPIgFNB3agGXh6qukjduNhFlwVVX1Ss2IdBJLXmgjytNGmo084bLKS0B6UdLRwKhXMHKKaObQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@turbo/linux-64@2.10.11':
+    resolution: {integrity: sha512-dGlY2vg7jpsLjGS1bf9sD/cw1sGMAYbeHGQKGRFxd5Zaj+Ufbj8cNXl/vIit8ueCU97zhL/znn60ZV5iSfZAxw==}
+    cpu: [x64]
+    os: [android, linux]
+
+  '@turbo/linux-arm64@2.10.11':
+    resolution: {integrity: sha512-eSP9+jjsSCBs2x0QpJZlp49dSD1EIMwXH7PsMIhdWk7w6IThhuKJ+jL95JQ2IW7tRjRmdh8gKcKQtrHLD5R5lA==}
+    cpu: [arm64]
+    os: [android, linux]
+
+  '@turbo/windows-64@2.10.11':
+    resolution: {integrity: sha512-4aD7edogJ8arK8DOyvjTI2KKwmchD5M/WM4BZgidrtFf7aSgn8Ce2rJnDwmriw980c2cKlHnhXtlGy38VtKB8g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@turbo/windows-arm64@2.10.11':
+    resolution: {integrity: sha512-m8tJkIrTrbQ9O1uHxV0GUq623Zg1678xGna8eMsy4KbygUX/wVFgdZDYV/AxyoyaW/U7nyKoBvaDVwm22p9xqA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/body-parser@1.19.6':
+    resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
+
+  '@types/chai@5.2.2':
+    resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
+
+  '@types/chroma-js@3.1.2':
+    resolution: {integrity: sha512-YBTQqArPN8A0niHXCwrO1z5x++a+6l0mLBykncUpr23oIPW7L4h39s6gokdK/bDrPmSh8+TjMmrhBPnyiaWPmQ==}
+
+  '@types/compression@1.8.1':
+    resolution: {integrity: sha512-kCFuWS0ebDbmxs0AXYn6e2r2nrGAb5KwQhknjSPSPgJcGd8+HVSILlUyFhGqML2gk39HcG7D1ydW9/qpYkN00Q==}
+
+  '@types/connect@3.4.38':
+    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
+
+  '@types/cors@2.8.19':
+    resolution: {integrity: sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==}
+
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/debug@4.1.12':
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
+  '@types/doctrine@0.0.9':
+    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
+
+  '@types/eslint-scope@3.7.7':
+    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
+
+  '@types/eslint@9.6.1':
+    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
+
+  '@types/esrecurse@4.3.1':
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+
+  '@types/estree-jsx@1.0.5':
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/express-serve-static-core@4.19.6':
+    resolution: {integrity: sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==}
+
+  '@types/express-serve-static-core@5.0.7':
+    resolution: {integrity: sha512-R+33OsgWw7rOhD1emjU7dzCDHucJrgJXMA5PYCzJxVil0dsyx5iBEPHqpPfiKNJQb7lZ1vxwoLR4Z87bBUpeGQ==}
+
+  '@types/express-ws@3.0.5':
+    resolution: {integrity: sha512-lbWMjoHrm/v85j81UCmb/GNZFO3genxRYBW1Ob7rjRI+zxUBR+4tcFuOpKKsYQ1LYTYiy3356epLeYi/5zxUwA==}
+
+  '@types/express@4.17.23':
+    resolution: {integrity: sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==}
+
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
+  '@types/html-minifier-terser@6.1.0':
+    resolution: {integrity: sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==}
+
+  '@types/http-errors@2.0.5':
+    resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
+
+  '@types/jscodeshift@17.3.0':
+    resolution: {integrity: sha512-ogvGG8VQQqAQQ096uRh+d6tBHrYuZjsumHirKtvBa5qEyTMN3IQJ7apo+sw9lxaB/iKWIhbbLlF3zmAWk9XQIg==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/linkify-it@3.0.5':
+    resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
+
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.20':
+    resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
+
+  '@types/markdown-it@13.0.9':
+    resolution: {integrity: sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==}
+
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
+  '@types/mdurl@1.0.5':
+    resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==}
+
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
+  '@types/mdx@2.0.13':
+    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
+
+  '@types/mime@1.3.5':
+    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
+  '@types/node@22.12.0':
+    resolution: {integrity: sha512-Fll2FZ1riMjNmlmJOdAyY5pUbkftXslB5DgEzlIuNaiWhXd00FhWxVC/r4yV/4wBb9JfImTu+jiSvXTkJ7F/gA==}
+
+  '@types/pdf-parse@1.1.5':
+    resolution: {integrity: sha512-kBfrSXsloMnUJOKi25s3+hRmkycHfLK6A09eRGqF/N8BkQoPUmaCr+q8Cli5FnfohEz/rsv82zAiPz/LXtOGhA==}
+
+  '@types/qs@6.14.0':
+    resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
+
+  '@types/range-parser@1.2.7':
+    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+
+  '@types/react-color@3.0.13':
+    resolution: {integrity: sha512-2c/9FZ4ixC5T3JzN0LP5Cke2Mf0MKOP2Eh0NPDPWmuVH3NjPyhEjqNMQpN1Phr5m74egAy+p2lYNAFrX1z9Yrg==}
+    peerDependencies:
+      '@types/react': 19.2.17
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': 19.2.17
+
+  '@types/react@19.2.17':
+    resolution: {integrity: sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==}
+
+  '@types/reactcss@1.2.13':
+    resolution: {integrity: sha512-gi3S+aUi6kpkF5vdhUsnkwbiSEIU/BEJyD7kBy2SudWBUuKmJk8AQKE0OVcQQeEy40Azh0lV6uynxlikYIJuwg==}
+    peerDependencies:
+      '@types/react': 19.2.17
+
+  '@types/resolve@1.20.6':
+    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
+
+  '@types/sanitize-html@2.16.0':
+    resolution: {integrity: sha512-l6rX1MUXje5ztPT0cAFtUayXF06DqPhRyfVXareEN5gGCFaP/iwsxIyKODr9XDhfxPpN6vXUFNfo5kZMXCxBtw==}
+
+  '@types/semver@7.7.1':
+    resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
+
+  '@types/send@0.17.5':
+    resolution: {integrity: sha512-z6F2D3cOStZvuk2SaP6YrwkNO65iTZcwA2ZkSABegdkAh/lf+Aa/YQndZVfmEXT5vgAp6zv06VQ3ejSVjAny4w==}
+
+  '@types/serve-static@1.15.8':
+    resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==}
+
+  '@types/triple-beam@1.3.5':
+    resolution: {integrity: sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==}
+
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@types/ws@8.18.1':
+    resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
+
+  '@typescript-eslint/types@8.60.1':
+    resolution: {integrity: sha512-4h0tY8ppCkdCzcrl2YM5M3my0xsE1Tf8om3owEu5oPWmXwkKRmk0j0LGDzYBGUcAlesEbxBhazqu/K4cu3Ug7w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@ungap/structured-clone@1.3.0':
+    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
+
+  '@vitest/coverage-v8@4.1.8':
+    resolution: {integrity: sha512-lt3kovsyHwYe00wq4D1ti0Z974fWj4NLp6siqiyEufUpyFwK9Yhi7rBhac9JL5aA0zoMrJqc4vYPZRUnI7l7nw==}
+    peerDependencies:
+      '@vitest/browser': 4.1.8
+      vitest: 4.1.8
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
+  '@vitest/expect@4.1.8':
+    resolution: {integrity: sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ==}
+
+  '@vitest/mocker@4.1.8':
+    resolution: {integrity: sha512-LEiN/xe4OSIbKe9HQIp5OC24agGD9J5CnmMgsLohVVoOPWL9a2sBoR6VBx43jQZb7Kr1l4RCuyCJzcAa0+dojw==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: 8.0.16
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+
+  '@vitest/pretty-format@4.1.8':
+    resolution: {integrity: sha512-9GasEBxpZ1VYIpqHf/0+YGg121uSNwCKOJqIrTwWP/TB7DmFCiaBpNl3aPZzoLWfWkuqhbH8vJIVobZkvdo2cA==}
+
+  '@vitest/runner@4.1.8':
+    resolution: {integrity: sha512-EmVxeBAfMJvycdjd6Hm+RbFBbA9fKvo0Kx37hNpBYoYeavH3RNsBXWDooR1mgD52dCrxIIuP7UotpfiwOikvcg==}
+
+  '@vitest/snapshot@4.1.8':
+    resolution: {integrity: sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ==}
+
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+
+  '@vitest/spy@4.1.8':
+    resolution: {integrity: sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA==}
+
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
+  '@vitest/utils@4.1.8':
+    resolution: {integrity: sha512-uOJamYALNhfJ6iolExyQM40yIQwDqYnkKtQ5VCiSe17E33H0aQ/u+1GlRuz4LZBk6Mm3sg90G9hEbmEt37C1Zg==}
+
+  '@webassemblyjs/ast@1.14.1':
+    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+
+  '@webassemblyjs/floating-point-hex-parser@1.13.2':
+    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+
+  '@webassemblyjs/helper-api-error@1.13.2':
+    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+
+  '@webassemblyjs/helper-buffer@1.14.1':
+    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+
+  '@webassemblyjs/helper-numbers@1.13.2':
+    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
+    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
+
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
+
+  '@webassemblyjs/ieee754@1.13.2':
+    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
+
+  '@webassemblyjs/leb128@1.13.2':
+    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
+
+  '@webassemblyjs/utf8@1.13.2':
+    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
+
+  '@webassemblyjs/wasm-edit@1.14.1':
+    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
+
+  '@webassemblyjs/wasm-gen@1.14.1':
+    resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
+
+  '@webassemblyjs/wasm-opt@1.14.1':
+    resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==}
+
+  '@webassemblyjs/wasm-parser@1.14.1':
+    resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==}
+
+  '@webassemblyjs/wast-printer@1.14.1':
+    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
+
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
+
+  '@xtuc/ieee754@1.2.0':
+    resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
+
+  '@xtuc/long@4.2.2':
+    resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
+
+  '@zeit/schemas@2.36.0':
+    resolution: {integrity: sha512-7kjMwcChYEzMKjeex9ZFXkt1AyNov9R5HZtjBKVsmVpw7pa7ZtlCGvCBC2vnnXctaYN+aRI61HjIqeetZW5ROg==}
+
+  abs-svg-path@0.1.1:
+    resolution: {integrity: sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==}
+
+  accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
+  acorn-import-attributes@1.9.5:
+    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
+    peerDependencies:
+      acorn: ^8
+
+  acorn-import-phases@1.0.4:
+    resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
+    engines: {node: '>=10.13.0'}
+    peerDependencies:
+      acorn: ^8.14.0
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@6.0.2:
+    resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
+    engines: {node: '>= 6.0.0'}
+
+  agent-install@0.0.5:
+    resolution: {integrity: sha512-nHlms9BkP8ZiY79HrwCGiA2DcNaXrAaJrCM/BEqQ7MEsSKyCk+2A76xPGylIfASZSZE0SaU3T0bNSg4rBPIJAQ==}
+    hasBin: true
+
+  ajv-formats@2.1.1:
+    resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
+    peerDependencies:
+      ajv: 8.18.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: 8.18.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv-keywords@3.5.2:
+    resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
+    peerDependencies:
+      ajv: 6.14.0
+
+  ajv-keywords@5.1.0:
+    resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
+    peerDependencies:
+      ajv: 8.18.0
+
+  ajv@6.14.0:
+    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
+
+  ajv@8.18.0:
+    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
+
+  ansi-align@3.0.1:
+    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
+
+  ansi-escapes@7.0.0:
+    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
+    engines: {node: '>=18'}
+
+  ansi-html-community@0.0.8:
+    resolution: {integrity: sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==}
+    engines: {'0': node >= 0.8.0}
+    hasBin: true
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  ansi-styles@6.2.3:
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
+
+  ansis@4.2.0:
+    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
+    engines: {node: '>=14'}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arch@2.2.0:
+    resolution: {integrity: sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  array-flatten@1.1.1:
+    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  ast-kit@2.2.0:
+    resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
+    engines: {node: '>=20.19.0'}
+
+  ast-types@0.14.2:
+    resolution: {integrity: sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA==}
+    engines: {node: '>=4'}
+
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
+  ast-v8-to-istanbul@1.0.3:
+    resolution: {integrity: sha512-jCMQ6ZylLPudp0CDfBmQBZUsrh1/8psbmu9ibeVWKuHWD0YrH9YABwlKu5kVEFoT0GCQQW9Z/SxfuEbbkGQCRg==}
+
+  async-lock@1.4.1:
+    resolution: {integrity: sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==}
+
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
+
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+  atomically@2.1.1:
+    resolution: {integrity: sha512-P4w9o2dqARji6P7MHprklbfiArZAWvo07yW7qs3pdljb3BWr12FIB7W+p0zJiuiVsUpRO0iZn1kFFcpPegg0tQ==}
+
+  attr-accept@2.2.5:
+    resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
+    engines: {node: '>=4'}
+
+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: 8.5.25
+
+  axios@1.18.1:
+    resolution: {integrity: sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==}
+
+  babel-dead-code-elimination@1.0.12:
+    resolution: {integrity: sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig==}
+
+  bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  base64-js@0.0.8:
+    resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
+    engines: {node: '>= 0.4'}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  baseline-browser-mapping@2.11.21:
+    resolution: {integrity: sha512-uh8vpY/1/YyFkunIDFH/12p7/7VdPKA1hejMVEbdkEaWnUz0Hesvx5EbiU6XxjyHZIOju+ZMbQJkRh+es3/spQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  basic-auth@2.0.1:
+    resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
+    engines: {node: '>= 0.8'}
+
+  batch-processor@1.0.0:
+    resolution: {integrity: sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==}
+
+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  bind-event-listener@3.0.0:
+    resolution: {integrity: sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==}
+
+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
+
+  bluebird@3.7.2:
+    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
+
+  body-parser@1.20.6:
+    resolution: {integrity: sha512-p5tAzS57i5MV9fZFDj9LeIiTZEufbSe2eDozP+ElheSUq1m74CRq1jI4mYNDdVs9vQztXFLuk/Gd6BWTdwRJ5g==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
+  boxen@7.0.0:
+    resolution: {integrity: sha512-j//dBVuyacJbvW+tvZ9HuH03fZ46QcaKvvhZickZqtB271DxJ7SNRSNxrV/dZX0085m7hISRZWbzWlJvx/rHSg==}
+    engines: {node: '>=14.16'}
+
+  brace-expansion@5.0.9:
+    resolution: {integrity: sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==}
+    engines: {node: 20 || >=22}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  brotli@1.3.3:
+    resolution: {integrity: sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==}
+
+  browserslist@4.28.9:
+    resolution: {integrity: sha512-EWazOblFYUvlGZcfGhPUPmYh3nikUxBVb+y9MJun5f3hBi812X+8MSQTujLBtgK3cf51fJWbWfOjyeO954d+Eg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
+  bytes@3.0.0:
+    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
+    engines: {node: '>= 0.8'}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camel-case@4.1.2:
+    resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
+
+  camelcase@7.0.1:
+    resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
+    engines: {node: '>=14.16'}
+
+  caniuse-lite@1.0.30001759:
+    resolution: {integrity: sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==}
+
+  caniuse-lite@1.0.30001810:
+    resolution: {integrity: sha512-TITQPUkaz+aVk5GL6NhOdwk1aEaNTSDPsGFWrTuhKGtjTF70jL/Oht2W4c6rXUe5fu7Ie19VIahAXHIIiWWNeg==}
+
+  case-sensitive-paths-webpack-plugin@2.4.0:
+    resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==}
+    engines: {node: '>=4'}
+
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
+  chai@6.2.2:
+    resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
+    engines: {node: '>=18'}
+
+  chalk-template@0.4.0:
+    resolution: {integrity: sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==}
+    engines: {node: '>=12'}
+
+  chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chalk@5.0.1:
+    resolution: {integrity: sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
+  character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  chroma-js@3.2.0:
+    resolution: {integrity: sha512-os/OippSlX1RlWWr+QDPcGUZs0uoqr32urfxESG9U93lhUfbnlyckte84Q8P1UQY/qth983AS1JONKmLS4T0nw==}
+
+  chromatic@16.10.0:
+    resolution: {integrity: sha512-nFsztmnu7rFiGafUJgXvLUNpqmRylz92eNvzBoJNTKKQj4EQUyxznwnfpf1dTs7hXtWD8JwcH92jADydaHA1sw==}
+    hasBin: true
+    peerDependencies:
+      '@chromatic-com/cypress': ^0.*.* || ^1.0.0
+      '@chromatic-com/playwright': ^0.*.* || ^1.0.0
+      '@chromatic-com/vitest': ^0.*.* || ^1.0.0
+    peerDependenciesMeta:
+      '@chromatic-com/cypress':
+        optional: true
+      '@chromatic-com/playwright':
+        optional: true
+      '@chromatic-com/vitest':
+        optional: true
+
+  chrome-trace-event@1.0.4:
+    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
+    engines: {node: '>=6.0'}
+
+  cjs-module-lexer@1.4.3:
+    resolution: {integrity: sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==}
+
+  cjs-module-lexer@2.2.0:
+    resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  clean-css@5.3.3:
+    resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
+    engines: {node: '>= 10.0'}
+
+  cli-boxes@3.0.0:
+    resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
+    engines: {node: '>=10'}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-truncate@5.1.1:
+    resolution: {integrity: sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==}
+    engines: {node: '>=20'}
+
+  clipboardy@3.0.0:
+    resolution: {integrity: sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  clone-deep@4.0.1:
+    resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
+    engines: {node: '>=6'}
+
+  clone@2.1.2:
+    resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
+    engines: {node: '>=0.8'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  cluster-key-slot@1.1.2:
+    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
+    engines: {node: '>=0.10.0'}
+
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  color-name@2.1.1:
+    resolution: {integrity: sha512-p2FdgwVx1a9yWBHP2wI0VgShkDpgN4kZISkxdNipGBJWpa5G6b04OINlVWCyJj0JmfvcPrgqt95E9k8yvaOJFg==}
+    engines: {node: '>=12.20'}
+
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  color-string@2.1.4:
+    resolution: {integrity: sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg==}
+    engines: {node: '>=18'}
+
+  color@3.2.1:
+    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
+
+  colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+
+  colorspace@1.1.4:
+    resolution: {integrity: sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==}
+
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  comlink@4.4.2:
+    resolution: {integrity: sha512-OxGdvBmJuNKSCMO4NTl1L47VRp6xn2wG4F/2hYzB6tiCb709otOxtEYCSvK80PtjODfXXZu8ds+Nw5kVCjqd2g==}
+
+  comma-separated-tokens@2.0.3:
+    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
+
+  commander@14.0.2:
+    resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
+    engines: {node: '>=20'}
+
+  commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
+  commondir@1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+
+  compressible@2.0.18:
+    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
+    engines: {node: '>= 0.6'}
+
+  compression@1.8.1:
+    resolution: {integrity: sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==}
+    engines: {node: '>= 0.8.0'}
+
+  compute-scroll-into-view@3.1.1:
+    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
+
+  conf@15.1.0:
+    resolution: {integrity: sha512-Uy5YN9KEu0WWDaZAVJ5FAmZoaJt9rdK6kH+utItPyGsCqCgaTKkrmZx3zoE0/3q6S3bcp3Ihkk+ZqPxWxFK5og==}
+    engines: {node: '>=20'}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
+  content-disposition@0.5.2:
+    resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==}
+    engines: {node: '>= 0.6'}
+
+  content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+
+  content-disposition@1.1.0:
+    resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
+    engines: {node: '>=18'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  content-type@2.0.0:
+    resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
+    engines: {node: '>=18'}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie-es@3.1.1:
+    resolution: {integrity: sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==}
+
+  cookie-signature@1.0.6:
+    resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
+
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.1:
+    resolution: {integrity: sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==}
+    engines: {node: '>= 0.6'}
+
+  cors@2.8.5:
+    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
+    engines: {node: '>= 0.10'}
+
+  cosmiconfig@8.3.6:
+    resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  create-react-class@15.7.0:
+    resolution: {integrity: sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==}
+
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  css-loader@7.1.4:
+    resolution: {integrity: sha512-vv3J9tlOl04WjiMvHQI/9tmIrCxVrj6PFbHemBB1iihpeRbi/I4h033eoFIhwxBBqLhI0KYFS7yvynBFhIZfTw==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || ^1.0.0 || ^2.0.0-0
+      webpack: 5.104.1
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+
+  css-select@4.3.0:
+    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
+
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  dayjs@1.11.23:
+    resolution: {integrity: sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==}
+
+  debounce-fn@6.0.0:
+    resolution: {integrity: sha512-rBMW+F2TXryBwB54Q0d8drNEI+TfoS9JpNTAoVpukbWEhjXQq4rySFYLaqXMFXwdv61Zb2OHtj5bviSoimqxRQ==}
+    engines: {node: '>=18'}
+
+  debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  decode-named-character-reference@1.2.0:
+    resolution: {integrity: sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==}
+
+  dedent@0.7.0:
+    resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
+
+  dedent@1.7.2:
+    resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.0:
+    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
+    engines: {node: '>=18'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
+  defu@6.1.5:
+    resolution: {integrity: sha512-pwdBJxJuJXmqrLO6s0VBmfbRz+G7FUzkjldAsdi9Yrv86mPyzq0ll1o8+8gB4Gsr6GJHbK1Lh3ngllgTInDCjA==}
+
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
+  denque@1.5.1:
+    resolution: {integrity: sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw==}
+    engines: {node: '>=0.10'}
+
+  denque@2.1.0:
+    resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
+    engines: {node: '>=0.10'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  dependency-graph@1.0.0:
+    resolution: {integrity: sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==}
+    engines: {node: '>=4'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  desandro-matches-selector@2.0.2:
+    resolution: {integrity: sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==}
+
+  deslop-js@0.0.21:
+    resolution: {integrity: sha512-1fYusMl4tDaQ/xdHFtLfDe8kFrEeU0Vu0Pfiy2k/Gd4HSqYlQj1Z7iRqldNneRyuCzNMhwNBvhaL07Urbh5VOA==}
+
+  destroy@1.2.0:
+    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+
+  dfa@1.2.0:
+    resolution: {integrity: sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==}
+
+  diff@5.2.2:
+    resolution: {integrity: sha512-vtcDfH3TOjP8UekytvnHH1o1P4FcUdt4eQ1Y+Abap1tk/OB2MWQvcwS2ClCd1zuIhc3JKOx6p3kod8Vfys3E+A==}
+    engines: {node: '>=0.3.1'}
+
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
+  dom-converter@0.2.0:
+    resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==}
+
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
+  dom-serializer@1.4.1:
+    resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
+
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  dom-serializer@3.1.1:
+    resolution: {integrity: sha512-4MEa38/QexBob6gFNwu+EGdWvhJ1OKuNwdYY3Y3NyeWDQfnGeDYQUDfIRzWu5B5gsv03so2Uxd28YC6zrsx3Lw==}
+    engines: {node: '>=20.19.0'}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domelementtype@3.0.0:
+    resolution: {integrity: sha512-umCQid3jKbDmVjx8jGaW7uUykm4DEUeyV21hPxNMo2nV955DhUThwqyOIDtreepP31hl84X7G5U9ZfsWvIB3Pg==}
+    engines: {node: '>=20.19.0'}
+
+  domhandler@4.3.1:
+    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
+    engines: {node: '>= 4'}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domhandler@6.0.1:
+    resolution: {integrity: sha512-gYzvtM72ZtxQO0T048kd6HWSbbGCNOUwcnfQ01cqIJ4X2IYKFFHZ5mKvrQETcFXxsRObZulDaKmy//R7TPtsBg==}
+    engines: {node: '>=20.19.0'}
+
+  domutils@2.8.0:
+    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  domutils@4.0.2:
+    resolution: {integrity: sha512-qI4JLRKnSzqFqr7hAlS5xQDusBCjKSEG4t4+7aNrIQMHBcsC2TGEhuyABJdYkgSewL57PNLYEiibY2iPKhKpaA==}
+    engines: {node: '>=20.19.0'}
+
+  dot-case@3.0.4:
+    resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
+
+  dot-prop@10.1.0:
+    resolution: {integrity: sha512-MVUtAugQMOff5RnBy2d9N31iG0lNwg1qAoAOn7pOK5wf94WIaE3My2p3uwTQuvS2AcqchkcR3bHByjaM0mmi7Q==}
+    engines: {node: '>=20'}
+
+  dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
+    engines: {node: '>=12'}
+
+  dts-resolver@2.1.3:
+    resolution: {integrity: sha512-bihc7jPC90VrosXNzK0LTE2cuLP6jr0Ro8jk+kMugHReJVLIpHz/xadeq3MhuwyO4TD4OA3L1Q8pBBFRc08Tsw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      oxc-resolver: '>=11.0.0'
+    peerDependenciesMeta:
+      oxc-resolver:
+        optional: true
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  effect@3.20.0:
+    resolution: {integrity: sha512-qMLfDJscrNG8p/aw+IkT9W7fgj50Z4wG5bLBy0Txsxz8iUHjDIkOgO3SV0WZfnQbNG2VJYb0b+rDLMrhM4+Krw==}
+
+  effect@4.0.0-beta.70:
+    resolution: {integrity: sha512-8AwGTRiNriirHGEYHrOS0E9fzdhIqCdZjiHP1YXmNo2UyPGS43ILsymsSHT7V0DJS+8dvlKq2RxnrDBUhDNZHg==}
+
+  electron-to-chromium@1.5.422:
+    resolution: {integrity: sha512-UvA/32XqrLDdZSn7Jllo1AYNcWji/G0d5M0GTViE7KoGBiMunw3a34Sb2KO4ZZyrSEhqsxFoVhWWJshdyfKqJA==}
+
+  element-resize-detector@1.2.4:
+    resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==}
+
+  emoji-picker-react@4.12.2:
+    resolution: {integrity: sha512-6PDYZGlhidt+Kc0ay890IU4HLNfIR7/OxPvcNxw+nJ4HQhMKd8pnGnPn4n2vqC/arRFCNWQhgJP8rpsYKsz0GQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: 19.2.8
+
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+
+  emoji-regex@10.5.0:
+    resolution: {integrity: sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  emojibase-data@15.3.2:
+    resolution: {integrity: sha512-TpDyTDDTdqWIJixV5sTA6OQ0P0JfIIeK2tFRR3q56G9LK65ylAZ7z3KyBXokpvTTJ+mLUXQXbLNyVkjvnTLE+A==}
+    peerDependencies:
+      emojibase: '*'
+
+  emojibase@16.0.0:
+    resolution: {integrity: sha512-Nw2m7JLIO4Ou2X/yZPRNscHQXVbbr6SErjkJ7EooG7MbR3yDZszCv9KTizsXFc7yZl0n3WF+qUKIC/Lw6H9xaQ==}
+    engines: {node: '>=18.12.0'}
+
+  empathic@2.0.0:
+    resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==}
+    engines: {node: '>=14'}
+
+  enabled@2.0.0:
+    resolution: {integrity: sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==}
+
+  encodeurl@1.0.2:
+    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
+    engines: {node: '>= 0.8'}
+
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  endent@2.1.0:
+    resolution: {integrity: sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w==}
+
+  enhanced-resolve@5.18.3:
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
+
+  entities@2.2.0:
+    resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@5.0.0:
+    resolution: {integrity: sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==}
+    engines: {node: '>=0.12'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
+  env-paths@3.0.0:
+    resolution: {integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  es-module-lexer@2.3.1:
+    resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  esbuild@0.28.1:
+    resolution: {integrity: sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  escape-string-regexp@5.0.0:
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
+
+  eslint-plugin-react-hooks@7.1.1:
+    resolution: {integrity: sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0
+
+  eslint-scope@5.1.1:
+    resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
+    engines: {node: '>=8.0.0'}
+
+  eslint-scope@9.1.2:
+    resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@10.4.1:
+    resolution: {integrity: sha512-AyIKhnOBuOAdueD7RB3xB+YeAWScb9jHsJBgH2Hcde8InP5JYhqrRR6iTMHyTEwgENK54Cp44e4v8BwNhsuHuw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@11.2.0:
+    resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@4.3.0:
+    resolution: {integrity: sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  ev-emitter@1.1.1:
+    resolution: {integrity: sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==}
+
+  eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
+  events@3.3.0:
+    resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
+    engines: {node: '>=0.8.x'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  exit-hook@5.1.0:
+    resolution: {integrity: sha512-INjr2xyxHo7bhAqf5ong++GZPPnpcuBcaXUKt03yf7Fie9yWD7FapL4teOU0+awQazGs5ucBh7xWs/AD+6nhog==}
+    engines: {node: '>=20'}
+
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
+  export-to-csv@1.4.0:
+    resolution: {integrity: sha512-6CX17Cu+rC2Fi2CyZ4CkgVG3hLl6BFsdAxfXiZkmDFIDY4mRx2y2spdeH6dqPHI9rP+AsHEfGeKz84Uuw7+Pmg==}
+    engines: {node: ^v12.20.0 || >=v14.13.0}
+
+  express-winston@4.2.0:
+    resolution: {integrity: sha512-EMD74g63nVHi7pFleQw7KHCxiA1pjF5uCwbCfzGqmFxs9KvlDPIVS3cMGpULm6MshExMT9TjC3SqmRGB9kb7yw==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      winston: '>=3.x <4'
+
+  express-ws@5.0.2:
+    resolution: {integrity: sha512-0uvmuk61O9HXgLhGl3QhNSEtRsQevtmbL94/eILaliEADZBHZOQUAiHFrGPrgsjikohyrmSG5g+sCfASTt0lkQ==}
+    engines: {node: '>=4.5.0'}
+    peerDependencies:
+      express: 4.22.0
+
+  express@4.22.0:
+    resolution: {integrity: sha512-c2iPh3xp5vvCLgaHK03+mWLFPhox7j1LwyxcZwFVApEv5i0X+IjPpbT50SJJwwLpdBVfp45AkK/v+AFgv/XlfQ==}
+    engines: {node: '>= 0.10.0'}
+
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
+  extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+
+  fast-check@3.23.2:
+    resolution: {integrity: sha512-h5+1OzzfCC3Ef7VbtKdcv7zsstUQwUDlYpUTvjeUsJAssPgLn7QzbboPtL5ro04Mq0rPOsMzl7q5hIbRs2wD1A==}
+    engines: {node: '>=8.0.0'}
+
+  fast-check@4.8.0:
+    resolution: {integrity: sha512-GOJ158CUMnN6cSahsv4+ExARvIDuzzinFjkp0E9WtiBa5zcVeLozVkWaE4IzFcc+Y48Wp1EDlUZsXRyAztQcSg==}
+    engines: {node: '>=12.17.0'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-equals@5.2.2:
+    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
+    engines: {node: '>=6.0.0'}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-parse@1.0.3:
+    resolution: {integrity: sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fast-uri@3.1.6:
+    resolution: {integrity: sha512-7Ical1vFEMr0onbVzEDIreM22I4khW+fzyQPwvAFWBp1iwdshSZRsL4jjRvPG9JP1uiqMHRto+YU6R2/CzDz5Q==}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: 2.3.2
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fecha@4.2.3:
+    resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
+
+  fflate@0.8.3:
+    resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  file-selector@2.1.2:
+    resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
+    engines: {node: '>= 12'}
+
+  file-type@21.3.3:
+    resolution: {integrity: sha512-pNwbwz8c3aZ+GvbJnIsCnDjKvgCZLHxkFWLEFxU3RMa+Ey++ZSEfisvsWQMcdys6PpxQjWUOIDi1fifXsW3YRg==}
+    engines: {node: '>=20'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  finalhandler@1.3.1:
+    resolution: {integrity: sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==}
+    engines: {node: '>= 0.8'}
+
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
+  find-cache-dir@2.1.0:
+    resolution: {integrity: sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==}
+    engines: {node: '>=6'}
+
+  find-cache-dir@3.3.2:
+    resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
+    engines: {node: '>=8'}
+
+  find-my-way-ts@0.1.6:
+    resolution: {integrity: sha512-a85L9ZoXtNAey3Y6Z+eBWW658kO/MwR7zIafkIUPUMf3isZG0NCs2pjW2wtjxAKuJPxMAsHUIP4ZPGv0o5gyTA==}
+
+  find-up@3.0.0:
+    resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
+    engines: {node: '>=6'}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  fizzy-ui-utils@2.0.7:
+    resolution: {integrity: sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==}
+
+  flairup@1.0.0:
+    resolution: {integrity: sha512-IKlE+pNvL2R+kVL1kEhUYqRxVqeFnjiIvHWDMLFXNaqyUdFXQM2wte44EfMYJNHkW16X991t2Zg8apKkhv7OBA==}
+
+  flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.4.2:
+    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
+
+  flow-parser@0.293.0:
+    resolution: {integrity: sha512-8tEGAcWpCqioajiSqrJr2+JSmkEI2vO/UACFGG378RO106ez9xugVxe9EpXD3aI1Vbf+mEUGhMt0gMpveJwVGA==}
+    engines: {node: '>=0.4.0'}
+
+  fn.name@1.1.0:
+    resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
+
+  follow-redirects@1.16.0:
+    resolution: {integrity: sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
+  fontfaceobserver@2.1.0:
+    resolution: {integrity: sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==}
+
+  fontkit@2.0.4:
+    resolution: {integrity: sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==}
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  fork-ts-checker-webpack-plugin@9.1.0:
+    resolution: {integrity: sha512-mpafl89VFPJmhnJ1ssH+8wmM2b50n+Rew5x42NeI2U78aRWgtkEtGmctp7iT16UjquJTjorEmIfESj3DxdW84Q==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      typescript: 5.8.3
+      webpack: 5.104.1
+
+  form-data@4.0.6:
+    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
+    engines: {node: '>= 6'}
+
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+
+  framer-motion@12.23.12:
+    resolution: {integrity: sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
+  fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  frimousse@0.3.0:
+    resolution: {integrity: sha512-kO6LMoKY/cLAYEhXXtqLRaLIE6L/DagpFPrUZaLv3LsUa1/8Iza3HhwZcgN8eZ+weXnhv69eoclNUPohcCa/IQ==}
+    peerDependencies:
+      react: 19.2.8
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  fs-extra@10.1.0:
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
+
+  fs-extra@11.3.1:
+    resolution: {integrity: sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==}
+    engines: {node: '>=14.14'}
+
+  fs-monkey@1.1.0:
+    resolution: {integrity: sha512-QMUezzXWII9EV5aTFXW1UBVUO77wYPpjqIF8/AviUCThNeSYZykpoTixUeaNNBwmCev0AMDWMAni+f8Hxb1IFw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-size@2.0.3:
+    resolution: {integrity: sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-tsconfig@4.13.7:
+    resolution: {integrity: sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob-to-regexp@0.4.1:
+    resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
+
+  glob@11.1.0:
+    resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
+    engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+    hasBin: true
+
+  globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
+    engines: {node: '>= 0.4'}
+
+  hast-util-embedded@3.0.0:
+    resolution: {integrity: sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA==}
+
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-has-property@3.0.0:
+    resolution: {integrity: sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==}
+
+  hast-util-is-body-ok-link@3.0.1:
+    resolution: {integrity: sha512-0qpnzOBLztXHbHQenVB8uNuxTnm/QBFUOmdOSsEn7GnBtyY07+ENTWVFBAnXd/zEgd9/SUG3lRY7hSIBWRgGpQ==}
+
+  hast-util-is-element@3.0.0:
+    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+
+  hast-util-minify-whitespace@1.0.1:
+    resolution: {integrity: sha512-L96fPOVpnclQE0xzdWb/D12VT5FabA7SnZOUMtL1DbXmYiHJMXZvFkIZfiMmTCNJHUeO2K9UYNXoVyfz+QHuOw==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-phrasing@3.0.1:
+    resolution: {integrity: sha512-6h60VfI3uBQUxHqTyMymMZnEbNl1XmEGtOxxKYL7stY2o601COo62AWAYBQR9lZbYXYSBoxag8UpPRXK+9fqSQ==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-to-jsx-runtime@2.3.6:
+    resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
+
+  hast-util-to-mdast@10.1.2:
+    resolution: {integrity: sha512-FiCRI7NmOvM4y+f5w32jPRzcxDIz+PUqDwEqn1A+1q2cdp3B8Gx7aVrXORdOKjMNDQsD1ogOr896+0jJHW1EFQ==}
+
+  hast-util-to-text@4.0.2:
+    resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
+
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hast@1.0.0:
+    resolution: {integrity: sha512-vFUqlRV5C+xqP76Wwq2SrM0kipnmpxJm7OfvVXpB35Fp+Fn4MV+ozr+JZr5qFvyR1q/U+Foim2x+3P+x9S1PLA==}
+    deprecated: Renamed to rehype
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
+  helmet@7.2.0:
+    resolution: {integrity: sha512-ZRiwvN089JfMXokizgqEPXsl2Guk094yExfoDXR0cBYWxtBbaSww/w+vT4WEJsBW2iTUi1GgZ6swmoug3Oy4Xw==}
+    engines: {node: '>=16.0.0'}
+
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
+  hsl-to-hex@1.0.0:
+    resolution: {integrity: sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==}
+
+  hsl-to-rgb-for-reals@1.1.1:
+    resolution: {integrity: sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==}
+
+  html-entities@2.6.0:
+    resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
+
+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
+  html-minifier-terser@6.1.0:
+    resolution: {integrity: sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  html-parse-stringify@3.0.1:
+    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
+
+  html-url-attributes@3.0.1:
+    resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
+
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
+  html-webpack-plugin@5.6.4:
+    resolution: {integrity: sha512-V/PZeWsqhfpE27nKeX9EO2sbR+D17A+tLf6qU+ht66jdUsN0QLKJN27Z+1+gHrVMKgndBahes0PU6rRihDgHTw==}
+    engines: {node: '>=10.13.0'}
+    peerDependencies:
+      '@rspack/core': 0.x || 1.x
+      webpack: 5.104.1
+    peerDependenciesMeta:
+      '@rspack/core':
+        optional: true
+      webpack:
+        optional: true
+
+  htmlparser2@12.0.0:
+    resolution: {integrity: sha512-Tz7u1i95/g2x2jz81+x0FBVhBhY5aRTvD3tXXdFaljuNdzDLJ8UGNRrTcj2cgQvAg3iW/h77Fz15nLW0L0CrZw==}
+    engines: {node: '>=20.19.0'}
+
+  htmlparser2@6.1.0:
+    resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
+
+  htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+
+  http-errors@2.0.0:
+    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
+    engines: {node: '>= 0.8'}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  https-proxy-agent@5.0.1:
+    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
+    engines: {node: '>= 6'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  hyphen@1.6.6:
+    resolution: {integrity: sha512-XtqmnT+b9n5MX+MsqluFAVTIenbtC25iskW0Z+jLd+awfhA+ZbWKWQMIvLJccGoa2bM1R6juWJ27cZxIFOmkWw==}
+
+  i18next-icu@2.4.3:
+    resolution: {integrity: sha512-Clb5XCp416Z+BkJUTATCjmDcw2AFzSUDVLxLVK/KhtXP6TJQHrht+6MqoJU1hCpyoCBKe59wMO9pvCvYroNcKg==}
+    peerDependencies:
+      intl-messageformat: '>=10.3.3 <12.0.0'
+
+  i18next-resources-to-backend@1.2.1:
+    resolution: {integrity: sha512-okHbVA+HZ7n1/76MsfhPqDou0fptl2dAlhRDu2ideXloRRduzHsqDOznJBef+R3DFZnbvWoBW+KxJ7fnFjd6Yw==}
+
+  i18next@25.10.9:
+    resolution: {integrity: sha512-hQY9/bFoQKGlSKMlaCuLR8w1h5JjieqrsnZvEmj1Ja6Ec7fbyc4cTrCsY9mb9Sd8YQ/swsrKz1S9M8AcvVI70w==}
+    peerDependencies:
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  icss-utils@5.1.0:
+    resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: 8.5.25
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  imagesloaded@4.1.4:
+    resolution: {integrity: sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  import-in-the-middle@3.0.1:
+    resolution: {integrity: sha512-pYkiyXVL2Mf3pozdlDGV6NAObxQx13Ae8knZk1UJRJ6uRW/ZRmTGHlQYtrsSl7ubuE5F8CD1z+s1n4RHNuTtuA==}
+    engines: {node: '>=18'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  ini@7.0.0:
+    resolution: {integrity: sha512-ifK0CgjALofS5bkrcTy4RaQ9Vx2Knf/eLeIO+NaswQEpH1UblrtTSCIvN71qQDMq0PeQ/SSPojvEJp9vvvfr+w==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  intl-messageformat@10.7.16:
+    resolution: {integrity: sha512-UmdmHUmp5CIKKjSoE10la5yfU+AYJAaiYLsodbjL4lji83JNvgOQUjGaGhGrpFCb0Uh7sl7qfP1IyILa8Z40ug==}
+
+  ioredis@4.30.1:
+    resolution: {integrity: sha512-17Ed70njJ7wT7JZsdTVLb0j/cmwHwfQCFu+AP6jY7nFKd+CA7MBW7nX121mM64eT8S9ekAVtYYt8nGQPmm3euA==}
+    engines: {node: '>=6'}
+
+  ioredis@5.7.0:
+    resolution: {integrity: sha512-NUcA93i1lukyXU+riqEyPtSEkyFq8tX90uL659J+qpCZ3rEdViB/APC58oAhIh3+bJln2hzdlZbBZsGNrlsR8g==}
+    engines: {node: '>=12.22.0'}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-arrayish@0.3.4:
+    resolution: {integrity: sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-emoji-supported@0.0.5:
+    resolution: {integrity: sha512-WOlXUhDDHxYqcSmFZis+xWhhqXiK2SU0iYiqmth5Ip0FHLZQAt9rKL5ahnilE8/86WH8tZ3bmNNNC+bTzamqlw==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-fullwidth-code-point@5.1.0:
+    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
+    engines: {node: '>=18'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-plain-object@2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
+  is-port-reachable@4.0.0:
+    resolution: {integrity: sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-url@1.2.4:
+    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
+
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
+  isbot@5.2.1:
+    resolution: {integrity: sha512-dJ+LpKyClQZ7NG+j3OensC/mAZkGpukE9YUrgPYvAZj2doVL0edfDgywTUh5CXa0o+nW9a1V9e5+CJTX8+SxRw==}
+    engines: {node: '>=18'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  isobject@3.0.1:
+    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
+    engines: {node: '>=0.10.0'}
+
+  isomorphic.js@0.2.5:
+    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+
+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.2.0:
+    resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
+    engines: {node: '>=8'}
+
+  jackspeak@4.2.3:
+    resolution: {integrity: sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==}
+    engines: {node: 20 || >=22}
+
+  jay-peg@1.1.1:
+    resolution: {integrity: sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==}
+
+  jest-worker@27.5.1:
+    resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
+    engines: {node: '>= 10.13.0'}
+
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+
+  js-tokens@10.0.0:
+    resolution: {integrity: sha512-lM/UBzQmfJRo9ABXbPWemivdCW8V2G8FHaHdypQaIy523snUjog0W71ayWXTjiR+ixeMyVHN2XcpnTd/liPg/Q==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.3.2:
+    resolution: {integrity: sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==}
+    hasBin: true
+
+  jscodeshift@17.3.0:
+    resolution: {integrity: sha512-LjFrGOIORqXBU+jwfC9nbkjmQfFldtMIoS6d9z2LG/lkmyNXsJAySPT+2SWXJEoE68/bCWcxKpXH37npftgmow==}
+    engines: {node: '>=16'}
+    hasBin: true
+    peerDependencies:
+      '@babel/preset-env': ^7.1.6
+    peerDependenciesMeta:
+      '@babel/preset-env':
+        optional: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  jsx-dom-cjs@8.1.6:
+    resolution: {integrity: sha512-aeGqlIZ3IBKF2+B0cKXZGh10OHxxABuHD9tlS10suXDXXG0c4wMkJios9xVslduflSNEQJVlicME3EBCYgxGvA==}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  kubernetes-types@1.30.0:
+    resolution: {integrity: sha512-Dew1okvhM/SQcIa2rcgujNndZwU8VnSapDgdxlYoB84ZlpAD43U6KLAFqYo17ykSFGHNPrg0qry0bP+GJd9v7Q==}
+
+  kuler@2.0.0:
+    resolution: {integrity: sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==}
+
+  launder@1.7.1:
+    resolution: {integrity: sha512-mU6WRz5EusL9ZZuiZ5SO4Y6C0P9PAUR9iwdb6bzj4KDihm28DiHFw+/yk9DBH4f+Pv1wuzQ4e2jV3oQ7mkIqvw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lib0@0.2.114:
+    resolution: {integrity: sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+
+  lightningcss-android-arm64@1.30.2:
+    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
+    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.2:
+    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.2:
+    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.30.2:
+    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.30.2:
+    resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  linebreak@1.1.0:
+    resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  linkify-it@5.0.2:
+    resolution: {integrity: sha512-ONTm2jCMAVZjgQa/Fy1kScXsuOoF5NPTsoFBdE1KVIZ2vAh/r9+Bqo+0jINCBYnavTPQZz38QzFTme79ENoN3Q==}
+
+  linkifyjs@4.3.2:
+    resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
+
+  lint-staged@16.2.7:
+    resolution: {integrity: sha512-lDIj4RnYmK7/kXMya+qJsmkRFkGolciXjrsZ6PC25GdTfWOAWetR0ZbsNXRAj1EHHImRSalc+whZFg56F5DVow==}
+    engines: {node: '>=20.17'}
+    hasBin: true
+
+  listr2@9.0.5:
+    resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
+    engines: {node: '>=20.0.0'}
+
+  loader-runner@4.3.1:
+    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
+    engines: {node: '>=6.11.5'}
+
+  locate-path@3.0.0:
+    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
+    engines: {node: '>=6'}
+
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash-es@4.18.1:
+    resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
+
+  lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
+  lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+
+  lodash.flatten@4.4.0:
+    resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
+
+  lodash.isarguments@3.1.0:
+    resolution: {integrity: sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==}
+
+  lodash@4.18.1:
+    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
+
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
+  logform@2.7.0:
+    resolution: {integrity: sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==}
+    engines: {node: '>= 12.0.0'}
+
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
+  lower-case@2.0.2:
+    resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
+
+  lowlight@3.3.0:
+    resolution: {integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==}
+
+  lru-cache@11.5.0:
+    resolution: {integrity: sha512-5YgH9UJd7wVb9hIouI2adWpgqrrICkt070Dnj8EUY1+B4B2P9eRLPAkAAo6NICA7CEhOIeBHl46u9zSNpNu7zA==}
+    engines: {node: 20 || >=22}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  lucide-react@0.469.0:
+    resolution: {integrity: sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==}
+    peerDependencies:
+      react: 19.2.8
+
+  lucide-react@1.34.0:
+    resolution: {integrity: sha512-vnjGJNI7Htk5+oWW8gXGuaLgwgAb0T6/iZbBrp9JCfRFwdNWZ0YTm3eyxjOLgwN6r8iyAf3UA70zNmBRBNv7yg==}
+    peerDependencies:
+      react: 19.2.8
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  magicast@0.5.3:
+    resolution: {integrity: sha512-pVKE4UdSQ7DvHzivsCIFx2BJn1mHG6KsyrFcaxFx6tONdneEuThrDx0Cj3AMg58KyN4pzYT+LHOotxDQDjNvkw==}
+
+  make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+
+  make-dir@3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
+  markdown-it-task-lists@2.1.1:
+    resolution: {integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==}
+
+  markdown-it@14.2.0:
+    resolution: {integrity: sha512-1TGiQiJVRQ3NPmZH6sx5Cfnmg6GQm9jvC1ch4TK511NjSJvjzKLzn5pPfZRNZkRPZP0HqCioSndqH8v2nRaWVQ==}
+    hasBin: true
+
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
+  masonry-layout@4.2.2:
+    resolution: {integrity: sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==}
+
+  material-colors@1.2.6:
+    resolution: {integrity: sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
+
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+
+  mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  mdast@3.0.0:
+    resolution: {integrity: sha512-xySmf8g4fPKMeC07jXGz971EkLbWAJ83s4US2Tj9lEdnZ142UP5grN73H1Xd3HzrdbU5o9GYYP/y8F9ZSwLE9g==}
+    deprecated: '`mdast` was renamed to `remark`'
+
+  mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
+  media-engine@2.0.0:
+    resolution: {integrity: sha512-FqNmlXKYrp5d3g7xEOMJb+6gXZE0fTssdyIQqYR4LbkifbNbS0hDylhNDOh8r6tCgLboHd8+mwgH2njgSYDpnQ==}
+
+  media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+
+  media-typer@1.1.1:
+    resolution: {integrity: sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==}
+    engines: {node: '>= 0.8'}
+
+  memfs@3.5.3:
+    resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
+    engines: {node: '>= 4.0.0'}
+
+  merge-descriptors@1.0.3:
+    resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.33.0:
+    resolution: {integrity: sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.18:
+    resolution: {integrity: sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  mime@3.0.0:
+    resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
+  minimatch@10.2.3:
+    resolution: {integrity: sha512-Rwi3pnapEqirPSbWbrZaa6N3nmqq4Xer/2XooiOKyV3q12ML06f7MOuc5DVH8ONZIFhwIYQ3yzPH4nt7iWHaTg==}
+    engines: {node: 18 || 20 || >=22}
+
+  minimatch@3.1.4:
+    resolution: {integrity: sha512-twmL+S8+7yIsE9wsqgzU3E8/LumN3M3QELrBZ20OdmQ9jB2JvW5oZtBEmft84k/Gs5CG9mqtWc6Y9vW+JEzGxw==}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  mobx-react-lite@4.1.1:
+    resolution: {integrity: sha512-iUxiMpsvNraCKXU+yPotsOncNNmyeS2B5DKL+TL6Tar/xm+wwNJAubJmtRSeAoYawdZqwv8Z/+5nPRHeQxTiXg==}
+    peerDependencies:
+      mobx: ^6.9.0
+      react: 19.2.8
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
+  mobx-react@9.2.2:
+    resolution: {integrity: sha512-ShszmQzR/VrhU3M0cQ7DA/s8qNcLcF2emSuudJ/TnDILS3C1Im48mdaG6CpyjZHy8+WqgXUCC9mPqSRIwPPMuQ==}
+    peerDependencies:
+      mobx: ^6.9.0
+      react: 19.2.8
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
+  mobx-utils@6.0.8:
+    resolution: {integrity: sha512-fPNt0vJnHwbQx9MojJFEnJLfM3EMGTtpy4/qOOW6xueh1mPofMajrbYAUvByMYAvCJnpy1A5L0t+ZVB5niKO4g==}
+    peerDependencies:
+      mobx: ^6.0.0
+
+  mobx@6.12.0:
+    resolution: {integrity: sha512-Mn6CN6meXEnMa0a5u6a5+RKrqRedHBhZGd15AWLk9O6uFY4KYHzImdt8JI8WODo1bjTSRnwXhJox+FCUZhCKCQ==}
+
+  module-details-from-path@1.0.4:
+    resolution: {integrity: sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==}
+
+  morgan@1.11.0:
+    resolution: {integrity: sha512-zSkVu3t18r39pw4ixfBKvfZi3y2UOqr7d4WYwcj3m8nXpEQK4rPO6GLzs/CExoRgmX3y9EjmmcXqv6jq0SK46g==}
+    engines: {node: '>= 0.8.0'}
+
+  motion-dom@12.23.12:
+    resolution: {integrity: sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
+  ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  msgpackr-extract@3.0.4:
+    resolution: {integrity: sha512-4kmO/MdyUIkLIvTPr8VHLil4AtoKIoniWPIEk5+CDy0xnWC84azhSFmuJ7PxZdsYtiP5kEeQsORAVIeMgxT+Hw==}
+    hasBin: true
+
+  msgpackr@1.11.8:
+    resolution: {integrity: sha512-bC4UGzHhVvgDNS7kn9tV8fAucIYUBuGojcaLiz7v+P63Lmtm0Xeji8B/8tYKddALXxJLpwIeBmUN3u64C4YkRA==}
+
+  msgpackr@2.0.2:
+    resolution: {integrity: sha512-c5hYOXFbP79Slh6Dzd2wzk+jnV7mX1UxfMYtilnY1NmalXPqG8DGb5cYCMBrW4AsH3zekBBZd4QrKz9NhtvYLQ==}
+
+  multipasta@0.2.7:
+    resolution: {integrity: sha512-KPA58d68KgGil15oDqXjkUBEBYc00XvbPj5/X+dyzeo/lWm9Nc25pQRlf1D+gv4OpK7NM0J1odrbu9JNNGvynA==}
+
+  nano-spawn@2.0.0:
+    resolution: {integrity: sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw==}
+    engines: {node: '>=20.17'}
+
+  nanoid@3.3.18:
+    resolution: {integrity: sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+
+  negotiator@0.6.4:
+    resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
+    engines: {node: '>= 0.6'}
+
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  no-case@3.0.4:
+    resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
+
+  node-abort-controller@3.1.1:
+    resolution: {integrity: sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==}
+
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  node-gyp-build-optional-packages@5.2.2:
+    resolution: {integrity: sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==}
+    hasBin: true
+
+  node-html-parser@6.1.13:
+    resolution: {integrity: sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg==}
+
+  node-releases@2.0.54:
+    resolution: {integrity: sha512-YHs7BmmcsdAI5Ozuf8JZo6PT0mv2GIWC9vMfvUC3dp65M8hn7Ux8CPL+2oBI7juNuj9d0ndhTcznq2ODBps9cQ==}
+    engines: {node: '>=18'}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-svg-path@1.1.0:
+    resolution: {integrity: sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==}
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  objectorarray@1.0.5:
+    resolution: {integrity: sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==}
+
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  on-headers@1.1.0:
+    resolution: {integrity: sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  one-time@1.0.0:
+    resolution: {integrity: sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@10.2.0:
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+
+  outlayer@2.1.1:
+    resolution: {integrity: sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==}
+
+  oxc-parser@0.127.0:
+    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-parser@0.132.0:
+    resolution: {integrity: sha512-+0LAPHaqtfQlvWdpaAa09SmOaZZgP8C552xosEkGJ4+ruEwP1Vgx+sqBgcBCNfR6KDCmagGOZTde8wmAvcI/Hg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-resolver@11.20.0:
+    resolution: {integrity: sha512-CblytBiV/a/ZXY34dsVU2NxhIOxMXst8CvDCtyBelVITgd7PLrKzbEbA6oKLdPjvDKDzCiW48qzmzZ+mYaqn+g==}
+
+  oxfmt@0.35.0:
+    resolution: {integrity: sha512-QYeXWkP+aLt7utt5SLivNIk09glWx9QE235ODjgcEZ3sd1VMaUBSpLymh6ZRCA76gD2rMP4bXanUz/fx+nLM9Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  oxlint-plugin-react-doctor@0.4.2:
+    resolution: {integrity: sha512-pH5TCM+FqvbiK7I6PVdUD6AY0013okJ4DCee4eQbce2FjU2X+TXw+gkBxw7GT8S3I6jqvFLGkabekmISKcSJnw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxlint@1.51.0:
+    resolution: {integrity: sha512-g6DNPaV9/WI9MoX2XllafxQuxwY1TV++j7hP8fTJByVBuCoVtm3dy9f/2vtH/HU40JztcgWF4G7ua+gkainklQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=0.15.0'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
+
+  oxlint@1.68.0:
+    resolution: {integrity: sha512-dXcbq+xsmLrMy6T8d0euf3IYUfLmjHIE11pOxiUSi5LHkFZaYPv568R6sEjcavVpUxoaQe66UBuK4HEi74NxpA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=0.22.1'
+      vite-plus: '*'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
+      vite-plus:
+        optional: true
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@3.0.0:
+    resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
+    engines: {node: '>=6'}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-map@2.1.0:
+    resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
+    engines: {node: '>=6'}
+
+  p-map@7.0.6:
+    resolution: {integrity: sha512-I4Prw6ivkd6p8PiYR1tXASOAOBzIJwu0TB7fqaX0c/8c3QAehNYmX57EijyGGGBt3c/BIowGwV03RVBtXvHEVg==}
+    engines: {node: '>=18'}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  pako@0.2.9:
+    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
+
+  param-case@3.0.4:
+    resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-srcset@1.0.2:
+    resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
+
+  parse-svg-path@0.1.2:
+    resolution: {integrity: sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  pascal-case@3.1.2:
+    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
+
+  path-exists@3.0.0:
+    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
+    engines: {node: '>=4'}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-is-inside@1.0.2:
+    resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@2.0.2:
+    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
+    engines: {node: 18 || 20 || >=22}
+
+  path-to-regexp@0.1.13:
+    resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
+
+  path-to-regexp@8.4.2:
+    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
+  pdf-parse@2.4.5:
+    resolution: {integrity: sha512-mHU89HGh7v+4u2ubfnevJ03lmPgQ5WU4CxAVmTSh/sxVTEDYd1er/dKS/A6vg77NX47KTEoihq8jZBLr8Cxuwg==}
+    engines: {node: '>=20.16.0 <21 || >=22.3.0'}
+    hasBin: true
+
+  pdfjs-dist@5.4.296:
+    resolution: {integrity: sha512-DlOzet0HO7OEnmUmB6wWGJrrdvbyJKftI1bhMitK7O2N8W2gc757yyYBbINy9IDafXAV9wmKr9t7xsTaNKRG5Q==}
+    engines: {node: '>=20.16.0 || >=22.3.0'}
+
+  pdfkit@0.20.1:
+    resolution: {integrity: sha512-1rRXK6x5o8I/3dBrBzXfxibpHpkfCnIA7EBAES7pEpGFc/65inMLlA8SalGWpJfal7BGekxeLf6A30IOpQpc5Q==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
+  pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  pkg-dir@3.0.0:
+    resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==}
+    engines: {node: '>=6'}
+
+  pkg-dir@4.2.0:
+    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
+    engines: {node: '>=8'}
+
+  pkg-types@2.3.1:
+    resolution: {integrity: sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==}
+
+  png-js@2.0.0:
+    resolution: {integrity: sha512-GdzJuUMc6ZSpxFJWVxtOH1bzYHym+TOnveqUjb+VJIbZWbZzyiRGFiKhbiielfpYbgMlhHVhsJ0FTazfuRFkMA==}
+
+  postcss-cli@11.0.1:
+    resolution: {integrity: sha512-0UnkNPSayHKRe/tc2YGW6XnSqqOA9eqpiRMgRlV1S6HdGi16vwJBx7lviARzbV1HpQHqLLRH3o8vTcB0cLc+5g==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      postcss: 8.5.25
+
+  postcss-load-config@5.1.0:
+    resolution: {integrity: sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      jiti: '>=1.21.0'
+      postcss: 8.5.25
+      tsx: ^4.8.1
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+
+  postcss-modules-extract-imports@3.1.0:
+    resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: 8.5.25
+
+  postcss-modules-local-by-default@4.2.0:
+    resolution: {integrity: sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: 8.5.25
+
+  postcss-modules-scope@3.2.1:
+    resolution: {integrity: sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: 8.5.25
+
+  postcss-modules-values@4.0.0:
+    resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
+    engines: {node: ^10 || ^12 || >= 14}
+    peerDependencies:
+      postcss: 8.5.25
+
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: 8.5.25
+
+  postcss-reporter@7.1.0:
+    resolution: {integrity: sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      postcss: 8.5.25
+
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-selector-parser@7.1.3:
+    resolution: {integrity: sha512-ajnd7iZnqjJDkyHNfznl/ZVO0lWqvBmQXfKKENx9/p/bEiF/L3eHwdydNUg9RXZx6xfZWOCmXmBa5oeB+YrAPQ==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.25:
+    resolution: {integrity: sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier@3.9.6:
+    resolution: {integrity: sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-error@4.0.0:
+    resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
+
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  pretty-hrtime@1.0.3:
+    resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
+    engines: {node: '>= 0.8'}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
+  prosemirror-changeset@2.3.1:
+    resolution: {integrity: sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==}
+
+  prosemirror-codemark@0.4.2:
+    resolution: {integrity: sha512-4n+PnGQToa/vTjn0OiivUvE8/moLtguUAfry8UA4Q8p47MhqT2Qpf2zBLustX5Upi4mSp3z1ZYBqLLovZC6abA==}
+    peerDependencies:
+      prosemirror-inputrules: ^1.2.0
+      prosemirror-model: ^1.18.1
+      prosemirror-state: ^1.4.1
+      prosemirror-view: 1.40.0
+
+  prosemirror-collab@1.3.1:
+    resolution: {integrity: sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==}
+
+  prosemirror-commands@1.7.1:
+    resolution: {integrity: sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==}
+
+  prosemirror-dropcursor@1.8.2:
+    resolution: {integrity: sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==}
+
+  prosemirror-gapcursor@1.3.2:
+    resolution: {integrity: sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==}
+
+  prosemirror-history@1.4.1:
+    resolution: {integrity: sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==}
+
+  prosemirror-inputrules@1.5.0:
+    resolution: {integrity: sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA==}
+
+  prosemirror-keymap@1.2.3:
+    resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
+
+  prosemirror-markdown@1.13.2:
+    resolution: {integrity: sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g==}
+
+  prosemirror-menu@1.2.5:
+    resolution: {integrity: sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==}
+
+  prosemirror-model@1.25.3:
+    resolution: {integrity: sha512-dY2HdaNXlARknJbrManZ1WyUtos+AP97AmvqdOQtWtrrC5g4mohVX5DTi9rXNFSk09eczLq9GuNTtq3EfMeMGA==}
+
+  prosemirror-schema-basic@1.2.4:
+    resolution: {integrity: sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==}
+
+  prosemirror-schema-list@1.5.1:
+    resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==}
+
+  prosemirror-state@1.4.3:
+    resolution: {integrity: sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==}
+
+  prosemirror-tables@1.7.1:
+    resolution: {integrity: sha512-eRQ97Bf+i9Eby99QbyAiyov43iOKgWa7QCGly+lrDt7efZ1v8NWolhXiB43hSDGIXT1UXgbs4KJN3a06FGpr1Q==}
+
+  prosemirror-trailing-node@3.0.0:
+    resolution: {integrity: sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==}
+    peerDependencies:
+      prosemirror-model: ^1.22.1
+      prosemirror-state: ^1.4.2
+      prosemirror-view: 1.40.0
+
+  prosemirror-transform@1.10.4:
+    resolution: {integrity: sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw==}
+
+  prosemirror-view@1.40.0:
+    resolution: {integrity: sha512-2G3svX0Cr1sJjkD/DYWSe3cfV5VPVTBOxI9XQEGWJDFEpsZb/gh4MV29ctv+OJx2RFX4BLt09i+6zaGM/ldkCw==}
+
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  proxy-from-env@2.1.0:
+    resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
+    engines: {node: '>=10'}
+
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  pure-rand@6.1.0:
+    resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
+
+  pure-rand@8.4.0:
+    resolution: {integrity: sha512-IoM8YF/jY0hiugFo/wOWqfmarlE6J0wc6fDK1PhftMk7MGhVZl88sZimmqBBFomLOCSmcCCpsfj7wXASCpvK9A==}
+
+  qs@6.15.2:
+    resolution: {integrity: sha512-Rzq0KEyX/w/tEybncDgdkZrJgVUsUMk3xjh3t5bv3S1HTAtg+uOYt72+ZfwiQwKdysThkTBdL/rTi6HDmX9Ddw==}
+    engines: {node: '>=0.6'}
+
+  quansync@1.0.0:
+    resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  queue@6.0.2:
+    resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
+
+  raf-schd@4.0.3:
+    resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
+
+  range-parser@1.2.0:
+    resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==}
+    engines: {node: '>= 0.6'}
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@2.5.3:
+    resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
+    engines: {node: '>= 0.8'}
+
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
+  react-aria@3.51.0:
+    resolution: {integrity: sha512-AyWLw0XR38cFPwBu/ErgGaVrc5dupLEKmRlMXTGvFKOtbaGRQ2+yQJkjVhpdHhoRhU4+G+tJDFeHDTS8tK3bfQ==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  react-color@2.19.3:
+    resolution: {integrity: sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==}
+    peerDependencies:
+      react: 19.2.8
+
+  react-day-picker@10.0.1:
+    resolution: {integrity: sha512-eNh6BlwcYInWaJtRv18mXQ06Ys/H6rdTZAnTaSdOYJuTpwP1JMCHNd1FDRadA+gbeinq+psdULN5Xnowy9mV8w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-day-picker@9.5.0:
+    resolution: {integrity: sha512-WmJnPFVLnKh5Qscm7wavMNg86rqPverSWjx+zgK8/ZmGRSQ8c8OoqW10RI+AzAfT2atIxImpCUU2R9Z7Xb2SUA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: 19.2.8
+
+  react-docgen-typescript@2.4.0:
+    resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
+    peerDependencies:
+      typescript: 5.8.3
+
+  react-docgen@7.1.1:
+    resolution: {integrity: sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==}
+    engines: {node: '>=16.14.0'}
+
+  react-docgen@8.0.3:
+    resolution: {integrity: sha512-aEZ9qP+/M+58x2qgfSFEWH1BxLyHe5+qkLNJOZQb5iGS017jpbRnoKhNRrXPeA6RfBrZO5wZrT9DMC1UqE1f1w==}
+    engines: {node: ^20.9.0 || >=22}
+
+  react-doctor@0.4.2:
+    resolution: {integrity: sha512-h4wykdqF93jBd4RD4AlKjyaukfizqcrwAMdZGLM0UsCw7ipOqJXFPvfPRK+GbHVh8KKoYWq1nU7K1M3uGTY/Ag==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  react-dom@19.2.8:
+    resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
+    peerDependencies:
+      react: 19.2.8
+
+  react-dropzone@14.3.8:
+    resolution: {integrity: sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==}
+    engines: {node: '>= 10.13'}
+    peerDependencies:
+      react: 19.2.8
+
+  react-fast-compare@3.2.2:
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+
+  react-hook-form@7.84.0:
+    resolution: {integrity: sha512-+hWvQP6GLco56mDwrbU4XnHix8t1z90ltZsDIrREl+jnQFQxYLX8oAzqe/Xn8nHpmoXTY5M6oEXrAhbP1qevNQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: 19.2.8
+
+  react-i18next@16.6.6:
+    resolution: {integrity: sha512-ZgL2HUoW34UKUkOV7uSQFE1CDnRPD+tCR3ywSuWH7u2iapnz86U8Bi3Vrs620qNDzCf1F47NxglCEkchCTDOHw==}
+    peerDependencies:
+      i18next: '>= 25.10.9'
+      react: 19.2.8
+      react-dom: '*'
+      react-native: '*'
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+      typescript:
+        optional: true
+
+  react-is@19.2.8:
+    resolution: {integrity: sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==}
+
+  react-markdown@10.1.0:
+    resolution: {integrity: sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+
+  react-masonry-component@6.3.0:
+    resolution: {integrity: sha512-4ZI78nxMfCpU5yQiS6Rup07Ju++YzcOGAyvbMcl2GfpZTw8GRwT548lkKr0PJarNicRV1qE2D/NiT26UPg1T7A==}
+    peerDependencies:
+      react: 19.2.8
+
+  react-pdf-html@2.1.3:
+    resolution: {integrity: sha512-KTTbLUFnpus2Ed6zPGM+LD/evnDcQVz+uG7/kBW4d5qKI9/O6/Hwirh8ZvcbQT/0TeA5vzaqjUnuOs2MhhZjCw==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      '@react-pdf/renderer': '>=3.4.4'
+      react: 19.2.8
+
+  react-popper@2.3.0:
+    resolution: {integrity: sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==}
+    peerDependencies:
+      '@popperjs/core': ^2.0.0
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+    engines: {node: '>=0.10.0'}
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.1:
+    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-router@8.3.0:
+    resolution: {integrity: sha512-qyPMvW83jGIct3yiieisxdk9M745anqhpIMKN5m1t6yBMfgVPpt77aHOqs5fUlEJRMCGffg9BaQLH9oPVOL7xQ==}
+    engines: {node: '>=22.22.0'}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  react-stately@3.49.0:
+    resolution: {integrity: sha512-13iNq2KzBrRAzxRc+n53hgROfIistiYY/sPtIhCw1qUB7/kmo+X1xEU2uiS5zcCIrc55AUPwoHqOIIpKWSwB9A==}
+    peerDependencies:
+      react: 19.2.8
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  react@19.2.8:
+    resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
+    engines: {node: '>=0.10.0'}
+
+  reactcss@1.2.3:
+    resolution: {integrity: sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==}
+    peerDependencies:
+      react: 19.2.8
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.15.4:
+    resolution: {integrity: sha512-UT/q6fwS3c1dHbXv2uFgYJ9BMFHu3fwnd7AYZaEQhXuYQ4hgsxLvsUXzGdKeZrW5xopzDCvuA2N41WJ88I7zIw==}
+    engines: {node: '>=14'}
+    deprecated: 1.x and 2.x branches are no longer active. Bump to Recharts v3 to receive latest features and bugfixes. See https://github.com/recharts/recharts/wiki/3.0-migration-guide
+    peerDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
+  redis-errors@1.2.0:
+    resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==}
+    engines: {node: '>=4'}
+
+  redis-parser@3.0.0:
+    resolution: {integrity: sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==}
+    engines: {node: '>=4'}
+
+  redlock@4.2.0:
+    resolution: {integrity: sha512-j+oQlG+dOwcetUt2WJWttu4CZVeRzUrcVcISFmEmfyuwCVSJ93rDT7YSgg7H7rnxwoRyk/jU46kycVka5tW7jA==}
+    engines: {node: '>=8.0.0'}
+
+  reflect-metadata@0.2.2:
+    resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
+
+  registry-auth-token@3.3.2:
+    resolution: {integrity: sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==}
+
+  registry-url@3.1.0:
+    resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
+    engines: {node: '>=0.10.0'}
+
+  rehype-minify-whitespace@6.0.2:
+    resolution: {integrity: sha512-Zk0pyQ06A3Lyxhe9vGtOtzz3Z0+qZ5+7icZ/PL/2x1SHPbKao5oB/g/rlc6BCTajqBb33JcOe71Ye1oFsuYbnw==}
+
+  rehype-parse@9.0.1:
+    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
+
+  rehype-remark@10.0.1:
+    resolution: {integrity: sha512-EmDndlb5NVwXGfUa4c9GPK+lXeItTilLhE6ADSaQuHr4JUlKw9MidzGzx4HpqZrNCt6vnHmEifXQiiA+CEnjYQ==}
+
+  relateurl@0.2.7:
+    resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
+    engines: {node: '>= 0.10'}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  renderkid@3.0.0:
+    resolution: {integrity: sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  require-in-the-middle@8.0.1:
+    resolution: {integrity: sha512-QT7FVMXfWOYFbeRBF6nu+I6tr2Tf3u0q8RIEjNob/heKY/nh7drD/k7eeMFmSQgnTtCzLDcCu/XEnpW2wk4xCQ==}
+    engines: {node: '>=9.3.0 || >=8.10.0 <9.0.0'}
+
+  reselect@5.3.0:
+    resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  restructure@3.0.2:
+    resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  rolldown-plugin-dts@0.17.8:
+    resolution: {integrity: sha512-76EEBlhF00yeY6M7VpMkWKI4r9WjuoMiOGey7j4D6zf3m0BR+ZrrY9hvSXdueJ3ljxSLq4DJBKFpX/X9+L7EKw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@ts-macro/tsc': ^0.3.6
+      '@typescript/native-preview': '>=7.0.0-dev.20250601.1'
+      rolldown: ^1.0.0-beta.44
+      typescript: 5.8.3
+      vue-tsc: ~3.1.0
+    peerDependenciesMeta:
+      '@ts-macro/tsc':
+        optional: true
+      '@typescript/native-preview':
+        optional: true
+      typescript:
+        optional: true
+      vue-tsc:
+        optional: true
+
+  rolldown@1.0.0-beta.46:
+    resolution: {integrity: sha512-FYUbq0StVHOjkR/hEJ667Pup3ugeB9odBcbmxU5il9QfT9X2t/FPhkqFYQthbYxD2bKnQyO+2vHTgnmOHwZdeA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  rolldown@1.0.3:
+    resolution: {integrity: sha512-i00lAJ2ks1BYr7rjNjKC7BcqAS7nVfiT3QX1SI5aY+AFHblCmaUf9OE9dbdzDvW6dJxbi2ZCZiy9v3CcwOiX3g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safe-stable-stringify@2.5.0:
+    resolution: {integrity: sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==}
+    engines: {node: '>=10'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sanitize-html@2.17.7:
+    resolution: {integrity: sha512-PGtEkc9cbnedU3s9TmzDbpsZ8w086g/0Q8k8/oIO1NLNU3i5k9yn835CrjJSajp1KMmkisbO1qPXxNKO3welAg==}
+    engines: {node: '>=22.12.0'}
+
+  scheduler@0.25.0-rc-603e6108-20241029:
+    resolution: {integrity: sha512-pFwF6H1XrSdYYNLfOcGlM28/j8CGLu8IvdrxqhjWULe2bPcKiKW4CV+OWqR/9fT52mywx65l7ysNkjLKBda7eA==}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  schema-utils@3.3.0:
+    resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
+    engines: {node: '>= 10.13.0'}
+
+  schema-utils@4.3.3:
+    resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
+    engines: {node: '>= 10.13.0'}
+
+  scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@0.19.0:
+    resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
+    engines: {node: '>= 0.8.0'}
+
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
+  serve-handler@6.1.6:
+    resolution: {integrity: sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==}
+
+  serve-static@1.16.2:
+    resolution: {integrity: sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==}
+    engines: {node: '>= 0.8.0'}
+
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
+  serve@14.2.5:
+    resolution: {integrity: sha512-Qn/qMkzCcMFVPb60E/hQy+iRLpiU8PamOfOSYoAHmmF+fFFmpPpqa6Oci2iWYpTdOUM3VF+TINud7CfbQnsZbA==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shallow-clone@3.0.1:
+    resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==}
+    engines: {node: '>=8'}
+
+  sharp@0.35.4:
+    resolution: {integrity: sha512-n++8XWcj+jCOr2IOl7h8LbKnGBDY4aPbmprMONBNFdn0ImXqpGVv5zliDs0V9HbmbCQLpbuo2ej9rAoOQTvMDA==}
+    engines: {node: '>=20.9.0'}
+    peerDependencies:
+      '@types/node': '*'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-swizzle@0.2.4:
+    resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
+  slice-ansi@7.1.2:
+    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
+    engines: {node: '>=18'}
+
+  smooth-scroll-into-view-if-needed@2.0.2:
+    resolution: {integrity: sha512-z54WzUSlM+xHHvJu3lMIsh+1d1kA4vaakcAtQvqzeGJ5Ffau7EKjpRrMHh1/OBo5zyU2h30ZYEt77vWmPHqg7Q==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  space-separated-tokens@2.0.2:
+    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
+
+  stack-trace@0.0.10:
+    resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  standard-as-callback@2.1.0:
+    resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
+
+  statuses@2.0.1:
+    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
+    engines: {node: '>= 0.8'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  std-env@4.1.0:
+    resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
+
+  storybook@10.4.6:
+    resolution: {integrity: sha512-6wkA6LxfDSSilloITsrFOJfsnw0mDUP2h8Ls+lRt8oRsudtz2RWFhLv+Toiwg6NW7hUpdTDc2hzR7DztJid6+A==}
+    hasBin: true
+    peerDependencies:
+      '@types/react': 19.2.17
+      prettier: ^2 || ^3
+      vite-plus: ^0.1.15
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      prettier:
+        optional: true
+      vite-plus:
+        optional: true
+
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string-width@8.1.0:
+    resolution: {integrity: sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==}
+    engines: {node: '>=20'}
+
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  strip-indent@4.1.0:
+    resolution: {integrity: sha512-OA95x+JPmL7kc7zCu+e+TeYxEiaIyndRx0OrBcK2QPPH09oAndr2ALvymxWA+Lx1PYYvFUm4O63pRkdJAaW96w==}
+    engines: {node: '>=12'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
+  strtok3@10.3.4:
+    resolution: {integrity: sha512-KIy5nylvC5le1OdaaoCJ07L+8iQzJHGH6pWDuzS+d07Cu7n1MZ2x26P8ZKIWfbK02+XIL8Mp4RkWeqdUCrDMfg==}
+    engines: {node: '>=18'}
+
+  stubborn-fs@2.0.0:
+    resolution: {integrity: sha512-Y0AvSwDw8y+nlSNFXMm2g6L51rBGdAQT20J3YSOqxC53Lo3bjWRtr2BKcfYoAf352WYpsZSTURrA0tqhfgudPA==}
+
+  stubborn-utils@1.0.2:
+    resolution: {integrity: sha512-zOh9jPYI+xrNOyisSelgym4tolKTJCQd5GBhK0+0xJvcYDcwlOoxF/rnFKQ2KRZknXSG9jWAp66fwP6AxN9STg==}
+
+  style-loader@4.0.0:
+    resolution: {integrity: sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==}
+    engines: {node: '>= 18.12.0'}
+    peerDependencies:
+      webpack: 5.104.1
+
+  style-to-js@1.1.21:
+    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
+
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
+  supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  svg-arc-to-cubic-bezier@3.2.0:
+    resolution: {integrity: sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==}
+
+  swc-loader@0.2.6:
+    resolution: {integrity: sha512-9Zi9UP2YmDpgmQVbyOPJClY0dwf58JDyDMQ7uRc4krmc72twNI2fvlBWHLqVekBpPc7h5NJkGVT1zNDxFrqhvg==}
+    peerDependencies:
+      '@swc/core': ^1.2.147
+      webpack: 5.104.1
+
+  swr@2.4.2:
+    resolution: {integrity: sha512-ej644Y2bvkIajfR32KGeSSdBXQW+ScjGjkybZgSE7kFpk9eGnV44XY9FJylXi+W75pavSX1PVNB57W5EbhGIYw==}
+    peerDependencies:
+      react: 19.2.8
+
+  tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwind-merge@3.4.0:
+    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+
+  tailwindcss@4.1.17:
+    resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  terser-webpack-plugin@5.6.1:
+    resolution: {integrity: sha512-201R5j+sJpK8nFWwKVyNfZot8FaJbLZDq5evriVzbV1wDtSXDjRUDRfJzHpAaxFDMEhsZL1QkeqM61wgsS3KaQ==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@minify-html/node': '*'
+      '@swc/core': '*'
+      '@swc/css': '*'
+      '@swc/html': '*'
+      clean-css: '*'
+      cssnano: '*'
+      csso: '*'
+      esbuild: '*'
+      html-minifier-terser: '*'
+      lightningcss: '*'
+      postcss: '*'
+      uglify-js: '*'
+      webpack: 5.104.1
+    peerDependenciesMeta:
+      '@minify-html/node':
+        optional: true
+      '@swc/core':
+        optional: true
+      '@swc/css':
+        optional: true
+      '@swc/html':
+        optional: true
+      clean-css:
+        optional: true
+      cssnano:
+        optional: true
+      csso:
+        optional: true
+      esbuild:
+        optional: true
+      html-minifier-terser:
+        optional: true
+      lightningcss:
+        optional: true
+      postcss:
+        optional: true
+      uglify-js:
+        optional: true
+
+  terser@5.43.1:
+    resolution: {integrity: sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  text-hex@1.0.0:
+    resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
+
+  thenby@1.3.4:
+    resolution: {integrity: sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==}
+
+  tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
+  tinyexec@1.0.4:
+    resolution: {integrity: sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@2.1.0:
+    resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyrainbow@3.1.0:
+    resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@4.0.3:
+    resolution: {integrity: sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==}
+    engines: {node: '>=14.0.0'}
+
+  tippy.js@6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+
+  tiptap-markdown@0.8.10:
+    resolution: {integrity: sha512-iDVkR2BjAqkTDtFX0h94yVvE2AihCXlF0Q7RIXSJPRSR5I0PA1TMuAg6FHFpmqTn4tPxJ0by0CK7PUMlnFLGEQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.3
+
+  tmp@0.2.7:
+    resolution: {integrity: sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==}
+    engines: {node: '>=14.14'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  token-types@6.1.1:
+    resolution: {integrity: sha512-kh9LVIWH5CnL63Ipf0jhlBIy0UsrMj/NJDfpsy1SqOXlLKEVyXXYrnFxFT1yOOYVGBSApeVnjPw/sBz5BfEjAQ==}
+    engines: {node: '>=14.16'}
+
+  toml@4.3.0:
+    resolution: {integrity: sha512-lVb8X9BsPVuH0M4BKeS91tXAmJvCjQ5UIyAbQFaxkKGyUFK2RPkhwaFSQH8vbpl1d23eu/IBH+dwVMHWaq9A5A==}
+    engines: {node: '>=20'}
+
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
+  trim-lines@3.0.1:
+    resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
+
+  trim-trailing-lines@2.1.0:
+    resolution: {integrity: sha512-5UR5Biq4VlVOtzqkm2AZlgvSlDJtME46uV0br0gENbwN4l5+mMKT4b9gJKqWtuL2zAIqajGJGuvbCbcAJUZqBg==}
+
+  triple-beam@1.4.1:
+    resolution: {integrity: sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==}
+    engines: {node: '>= 14.0.0'}
+
+  trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+
+  ts-dedent@2.2.0:
+    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+    engines: {node: '>=6.10'}
+
+  tsconfck@3.1.6:
+    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
+    engines: {node: ^18 || >=20}
+    deprecated: unmaintained
+    hasBin: true
+    peerDependencies:
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
+  tsdown@0.16.0:
+    resolution: {integrity: sha512-VCqqxT5FbjCmxmLNlOLHiNhu1MBtdvCsk43murvUFloQzQzr/C0FRauWtAw7lAPmS40rZlgocCoTNFqX72WSTg==}
+    engines: {node: '>=20.19.0'}
+    hasBin: true
+    peerDependencies:
+      '@arethetypeswrong/core': ^0.18.1
+      '@vitejs/devtools': ^0.0.0-alpha.10
+      publint: ^0.3.0
+      typescript: 5.8.3
+      unplugin-lightningcss: ^0.4.0
+      unplugin-unused: ^0.5.0
+      unrun: ^0.2.1
+    peerDependenciesMeta:
+      '@arethetypeswrong/core':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      publint:
+        optional: true
+      typescript:
+        optional: true
+      unplugin-lightningcss:
+        optional: true
+      unplugin-unused:
+        optional: true
+      unrun:
+        optional: true
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsx@4.20.6:
+    resolution: {integrity: sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  turbo@2.10.11:
+    resolution: {integrity: sha512-yQfwQVoRXwOuyX1LxiJFBFNg6VfuYh+/RyZLd82+isgyLkBXw3S5XRRzvcck1FAjSCG5sVyLd+O1eDMvYa3J7g==}
+    hasBin: true
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@2.19.0:
+    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
+    engines: {node: '>=12.20'}
+
+  type-fest@5.7.0:
+    resolution: {integrity: sha512-1URUxUqfHFM1c+zfSPsa3gnkO7Aq21qyH75SIduNYz4SzY964rn1X2vCMQaHSHhktiw+0kPa2iyb6PUpXqB6Vg==}
+    engines: {node: '>=20'}
+
+  type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+
+  type-is@2.1.0:
+    resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
+    engines: {node: '>= 18'}
+
+  typescript@5.8.3:
+    resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
+  uint8array-extras@1.5.0:
+    resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
+    engines: {node: '>=18'}
+
+  unconfig-core@7.5.0:
+    resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==}
+
+  unconfig@7.5.0:
+    resolution: {integrity: sha512-oi8Qy2JV4D3UQ0PsopR28CzdQ3S/5A1zwsUwp/rosSbfhJ5z7b90bIyTwi/F7hCLD4SGcZVjDzd4XoUQcEanvA==}
+
+  undici-types@6.20.0:
+    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
+
+  undici@7.29.0:
+    resolution: {integrity: sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==}
+    engines: {node: '>=20.18.1'}
+
+  unicode-properties@1.4.1:
+    resolution: {integrity: sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==}
+
+  unicode-trie@2.0.0:
+    resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==}
+
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-find-after@5.0.0:
+    resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
+
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
+
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
+  update-browserslist-db@1.3.2:
+    resolution: {integrity: sha512-UQ+MSxlhRm1bzjhU+DcuXfjFO1FzNtqhK5+9Yvlp90ItDLk5vT932A0rFu619nf7RVS+Y/VeaUW1jaRDqZ8VJw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>=4.28.7'
+
+  update-check@1.5.4:
+    resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-font-face-observer@1.3.0:
+    resolution: {integrity: sha512-gS5UoSPcOoCF+JMbw2By1E3FtXl6ZPxgFo8MW4shpM15lf+MNyzEfjsLJFJ3T/mHLdGTBhQgZYSAXEzubr6v5Q==}
+    peerDependencies:
+      react: 19.2.8
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: 19.2.8
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  utila@0.4.0:
+    resolution: {integrity: sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==}
+
+  utils-merge@1.0.1:
+    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
+    engines: {node: '>= 0.4.0'}
+
+  uuid@14.0.0:
+    resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
+    hasBin: true
+
+  valibot@1.4.2:
+    resolution: {integrity: sha512-gjdCvJ6d3RyHAneqxMYMW9QMCwYMb3jpOO0IyHZV1bnRHFBHrX3VkIILt5XYR0WhwHiH7Mty8ovuPZ/O3gamrg==}
+    peerDependencies:
+      typescript: 5.8.3
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
+  vite-tsconfig-paths@5.1.4:
+    resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
+    peerDependencies:
+      vite: 8.0.16
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  vite@8.0.16:
+    resolution: {integrity: sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.1.18
+      esbuild: 0.28.1
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: 2.8.3
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitest@4.1.8:
+    resolution: {integrity: sha512-flY6ScbCIt9HThs+C5HS7jvGOB560DJtk/Z15IQROTA6zEy49Nh8T/dofWTQL+n3vswqn87sbJNiuqw1SDp5Ig==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.1.8
+      '@vitest/browser-preview': 4.1.8
+      '@vitest/browser-webdriverio': 4.1.8
+      '@vitest/coverage-istanbul': 4.1.8
+      '@vitest/coverage-v8': 4.1.8
+      '@vitest/ui': 4.1.8
+      happy-dom: '*'
+      jsdom: '*'
+      vite: 8.0.16
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/coverage-istanbul':
+        optional: true
+      '@vitest/coverage-v8':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  void-elements@3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
+
+  vscode-jsonrpc@8.2.0:
+    resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
+    engines: {node: '>=14.0.0'}
+
+  vscode-languageserver-protocol@3.17.5:
+    resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==}
+
+  vscode-languageserver-textdocument@1.0.12:
+    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
+
+  vscode-languageserver-types@3.17.5:
+    resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
+
+  vscode-languageserver@9.0.1:
+    resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
+    hasBin: true
+
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
+
+  warning@4.0.3:
+    resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
+
+  watchpack@2.4.4:
+    resolution: {integrity: sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==}
+    engines: {node: '>=10.13.0'}
+
+  web-namespaces@2.0.1:
+    resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
+
+  webpack-dev-middleware@6.1.3:
+    resolution: {integrity: sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw==}
+    engines: {node: '>= 14.15.0'}
+    peerDependencies:
+      webpack: 5.104.1
+    peerDependenciesMeta:
+      webpack:
+        optional: true
+
+  webpack-hot-middleware@2.26.1:
+    resolution: {integrity: sha512-khZGfAeJx6I8K9zKohEWWYN6KDlVw2DHownoe+6Vtwj1LP9WFgegXnVMSkZ/dBEBtXFwrkkydsaPFlB7f8wU2A==}
+
+  webpack-sources@3.3.3:
+    resolution: {integrity: sha512-yd1RBzSGanHkitROoPFd6qsrxt+oFhg/129YzheDGqeustzX0vTZJZsSsQjVQC4yzBQ56K55XU8gaNCtIzOnTg==}
+    engines: {node: '>=10.13.0'}
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  webpack@5.104.1:
+    resolution: {integrity: sha512-Qphch25abbMNtekmEGJmeRUhLDbe+QfiWTiqpKYkpCOWY64v9eyl+KRRLmqOFA2AvKPpc9DC6+u2n76tQLBoaA==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+
+  when-exit@2.1.5:
+    resolution: {integrity: sha512-VGkKJ564kzt6Ms1dbgPP/yuIoQCrsFAnRbptpC5wOEsDaNsbCB2bnfnaA8i/vRs5tjUSEOtIuvl9/MyVsvQZCg==}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  widest-line@4.0.1:
+    resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
+    engines: {node: '>=12'}
+
+  winston-transport@4.9.0:
+    resolution: {integrity: sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A==}
+    engines: {node: '>= 12.0.0'}
+
+  winston@3.17.0:
+    resolution: {integrity: sha512-DLiFIXYC5fMPxaRg832S6F5mJYvePtmO5G9v9IgUFPhXm9/GkXarH/TUrBAVzhTCzAj9anE/+GjrgXp/54nOgw==}
+    engines: {node: '>= 12.0.0'}
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+  ws@7.5.11:
+    resolution: {integrity: sha512-zS54Oen9bITtp7kp2XM3AydrCIq1D+HwJOuH+c+e4LfpL/lotP5osijd+UoMnxwAam1GN8R4KtLAyIrIcBNpiA==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  ws@8.21.0:
+    resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  wsl-utils@0.1.0:
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
+
+  y-indexeddb@9.0.12:
+    resolution: {integrity: sha512-9oCFRSPPzBK7/w5vOkJBaVCQZKHXB/v6SIT+WYhnJxlEC61juqG0hBrAf+y3gmSMLFLwICNH9nQ53uscuse6Hg==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      yjs: ^13.0.0
+
+  y-prosemirror@1.3.7:
+    resolution: {integrity: sha512-NpM99WSdD4Fx4if5xOMDpPtU3oAmTSjlzh5U4353ABbRHl1HtAFUx6HlebLZfyFxXN9jzKMDkVbcRjqOZVkYQg==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      prosemirror-model: ^1.7.1
+      prosemirror-state: ^1.2.3
+      prosemirror-view: 1.40.0
+      y-protocols: ^1.0.1
+      yjs: ^13.5.38
+
+  y-protocols@1.0.6:
+    resolution: {integrity: sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+    peerDependencies:
+      yjs: ^13.0.0
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yaml@2.8.3:
+    resolution: {integrity: sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yjs@13.6.27:
+    resolution: {integrity: sha512-OIDwaflOaq4wC6YlPBy2L6ceKeKuF7DeTxx+jPzv1FHn9tCZ0ZwSRnUBxD05E3yed46fv/FWJbvR+Ud7x0L7zw==}
+    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yoga-layout@3.2.1:
+    resolution: {integrity: sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==}
+
+  zeed-dom@0.15.1:
+    resolution: {integrity: sha512-dtZ0aQSFyZmoJS0m06/xBN1SazUBPL5HpzlAcs/KcRW0rzadYw12deQBjeMhGKMMeGEp7bA9vmikMLaO4exBcg==}
+    engines: {node: '>=14.13.1'}
+
+  zod-validation-error@4.0.2:
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
+snapshots:
+
+  '@adobe/css-tools@4.4.4': {}
+
+  '@alloc/quick-lru@5.2.0': {}
+
+  '@atlaskit/pragmatic-drag-and-drop-auto-scroll@1.4.0':
+    dependencies:
+      '@atlaskit/pragmatic-drag-and-drop': 1.7.4
+      '@babel/runtime': 7.29.7
+
+  '@atlaskit/pragmatic-drag-and-drop-hitbox@1.1.0':
+    dependencies:
+      '@atlaskit/pragmatic-drag-and-drop': 1.7.4
+      '@babel/runtime': 7.29.7
+
+  '@atlaskit/pragmatic-drag-and-drop@1.7.4':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      bind-event-listener: 3.0.0
+      raf-schd: 4.0.3
+
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.7': {}
+
+  '@babel/core@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.7':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.9
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/traverse': 7.29.7
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/helper-plugin-utils@7.29.7': {}
+
+  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/traverse': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.29.7': {}
+
+  '@babel/helper-validator-identifier@7.29.7': {}
+
+  '@babel/helper-validator-option@7.29.7': {}
+
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/parser@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.29.7)
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-flow@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.29.7)
+
+  '@babel/preset-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/register@7.28.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      clone-deep: 4.0.1
+      find-cache-dir: 2.1.0
+      make-dir: 2.1.0
+      pirates: 4.0.7
+      source-map-support: 0.5.21
+
+  '@babel/runtime@7.29.7': {}
+
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@babel/traverse@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.7
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.7':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
+  '@base-ui-components/react@1.0.0-beta.3(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui-components/utils': 0.1.1(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      reselect: 5.3.0
+      tabbable: 6.2.0
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@base-ui-components/utils@0.1.1(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      reselect: 5.3.0
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@base-ui/react@1.7.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@base-ui/utils': 0.3.2(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@date-fns/tz': 1.4.1
+      '@types/react': 19.2.17
+      date-fns: 4.1.0
+
+  '@base-ui/utils@0.3.2(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      reselect: 5.3.0
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@bcoe/v8-coverage@1.0.2': {}
+
+  '@borewit/text-codec@0.1.1': {}
+
+  '@bprogress/core@1.3.4': {}
+
+  '@chromatic-com/storybook@5.2.1(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
+    dependencies:
+      '@neoconfetti/react': 1.0.0
+      chromatic: 16.10.0
+      jsonfile: 6.2.0
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      strip-ansi: 7.1.2
+    transitivePeerDependencies:
+      - '@chromatic-com/cypress'
+      - '@chromatic-com/playwright'
+      - '@chromatic-com/vitest'
+
+  '@colors/colors@1.6.0': {}
+
+  '@dabh/diagnostics@2.0.3':
+    dependencies:
+      colorspace: 1.1.4
+      enabled: 2.0.0
+      kuler: 2.0.0
+
+  '@date-fns/tz@1.4.1': {}
+
+  '@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      '@effect/rpc': 0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@effect/sql': 0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@effect/workflow': 0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      effect: 3.20.0
+      kubernetes-types: 1.30.0
+
+  '@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0)':
+    dependencies:
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      effect: 3.20.0
+      uuid: 14.0.0
+    optionalDependencies:
+      ioredis: 5.7.0
+
+  '@effect/platform-node-shared@0.57.0(@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/cluster': 0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      '@effect/rpc': 0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@effect/sql': 0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@parcel/watcher': 2.5.4
+      effect: 3.20.0
+      multipasta: 0.2.7
+      ws: 8.21.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@effect/platform-node-shared@4.0.0-beta.70(effect@4.0.0-beta.70)':
+    dependencies:
+      '@types/ws': 8.18.1
+      effect: 4.0.0-beta.70
+      ws: 8.21.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@effect/platform-node@0.104.0(@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/cluster': 0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      '@effect/platform-node-shared': 0.57.0(@effect/cluster@0.56.1(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(effect@3.20.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)
+      '@effect/rpc': 0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      '@effect/sql': 0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      effect: 3.20.0
+      mime: 3.0.0
+      undici: 7.29.0
+      ws: 8.21.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@effect/platform@0.94.1(effect@3.20.0)':
+    dependencies:
+      effect: 3.20.0
+      find-my-way-ts: 0.1.6
+      msgpackr: 1.11.8
+      multipasta: 0.2.7
+
+  '@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      effect: 3.20.0
+      msgpackr: 1.11.8
+
+  '@effect/sql@0.49.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/experimental': 0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0)
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      effect: 3.20.0
+      uuid: 14.0.0
+
+  '@effect/workflow@0.16.0(@effect/experimental@0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0))(@effect/platform@0.94.1(effect@3.20.0))(@effect/rpc@0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0))(effect@3.20.0)':
+    dependencies:
+      '@effect/experimental': 0.58.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)(ioredis@5.7.0)
+      '@effect/platform': 0.94.1(effect@3.20.0)
+      '@effect/rpc': 0.73.0(@effect/platform@0.94.1(effect@3.20.0))(effect@3.20.0)
+      effect: 3.20.0
+
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/core@1.9.2':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.11.3':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.9.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@esbuild/aix-ppc64@0.28.1':
+    optional: true
+
+  '@esbuild/android-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/android-arm@0.28.1':
+    optional: true
+
+  '@esbuild/android-x64@0.28.1':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/darwin-x64@0.28.1':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-arm@0.28.1':
+    optional: true
+
+  '@esbuild/linux-ia32@0.28.1':
+    optional: true
+
+  '@esbuild/linux-loong64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.28.1':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.28.1':
+    optional: true
+
+  '@esbuild/linux-s390x@0.28.1':
+    optional: true
+
+  '@esbuild/linux-x64@0.28.1':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.28.1':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.28.1':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/sunos-x64@0.28.1':
+    optional: true
+
+  '@esbuild/win32-arm64@0.28.1':
+    optional: true
+
+  '@esbuild/win32-ia32@0.28.1':
+    optional: true
+
+  '@esbuild/win32-x64@0.28.1':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@10.4.1(jiti@2.7.0))':
+    dependencies:
+      eslint: 10.4.1(jiti@2.7.0)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.23.5':
+    dependencies:
+      '@eslint/object-schema': 3.0.5
+      debug: 4.4.3
+      minimatch: 10.2.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.6.0':
+    dependencies:
+      '@eslint/core': 1.2.1
+
+  '@eslint/core@1.2.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/object-schema@3.0.5': {}
+
+  '@eslint/plugin-kit@0.7.2':
+    dependencies:
+      '@eslint/core': 1.2.1
+      levn: 0.4.1
+
+  '@figspec/components@2.1.0': {}
+
+  '@figspec/react@2.0.1(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@figspec/components': 2.1.0
+      '@lit-labs/react': 2.1.3(@types/react@19.2.17)
+      react: 19.2.8
+    transitivePeerDependencies:
+      - '@types/react'
+
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/dom': 1.8.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@floating-ui/react@0.26.28(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      tabbable: 6.2.0
+
+  '@floating-ui/react@0.27.20(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      tabbable: 6.2.0
+
+  '@floating-ui/utils@0.2.12': {}
+
+  '@fontsource-variable/inter@5.2.8': {}
+
+  '@fontsource/ibm-plex-mono@5.2.7': {}
+
+  '@fontsource/inter@5.2.8': {}
+
+  '@fontsource/material-symbols-rounded@5.2.30': {}
+
+  '@formatjs/ecma402-abstract@2.3.4':
+    dependencies:
+      '@formatjs/fast-memoize': 2.2.7
+      '@formatjs/intl-localematcher': 0.6.1
+      decimal.js: 10.6.0
+      tslib: 2.8.1
+
+  '@formatjs/fast-memoize@2.2.7':
+    dependencies:
+      tslib: 2.8.1
+
+  '@formatjs/icu-messageformat-parser@2.11.2':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.4
+      '@formatjs/icu-skeleton-parser': 1.8.14
+      tslib: 2.8.1
+
+  '@formatjs/icu-skeleton-parser@1.8.14':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.4
+      tslib: 2.8.1
+
+  '@formatjs/intl-localematcher@0.6.1':
+    dependencies:
+      tslib: 2.8.1
+
+  '@headlessui/react@2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@floating-ui/react': 0.26.28(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-aria/focus': 3.22.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@react-aria/interactions': 3.28.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@tanstack/react-virtual': 3.13.12(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      use-sync-external-store: 1.6.0(react@19.2.8)
+
+  '@hocuspocus/common@2.15.3':
+    dependencies:
+      lib0: 0.2.114
+
+  '@hocuspocus/extension-database@2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      '@hocuspocus/server': 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      yjs: 13.6.27
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+      - y-protocols
+
+  '@hocuspocus/extension-logger@2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      '@hocuspocus/server': 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+      - y-protocols
+      - yjs
+
+  '@hocuspocus/extension-redis@2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      '@hocuspocus/server': 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      ioredis: 4.30.1
+      kleur: 4.1.5
+      lodash.debounce: 4.0.8
+      redlock: 4.2.0
+      uuid: 14.0.0
+      y-protocols: 1.0.6(yjs@13.6.27)
+      yjs: 13.6.27
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  '@hocuspocus/provider@2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      '@hocuspocus/common': 2.15.3
+      '@lifeomic/attempt': 3.1.0
+      lib0: 0.2.114
+      ws: 8.21.0
+      y-protocols: 1.0.6(yjs@13.6.27)
+      yjs: 13.6.27
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@hocuspocus/server@2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      '@hocuspocus/common': 2.15.3
+      async-lock: 1.4.1
+      kleur: 4.1.5
+      lib0: 0.2.114
+      uuid: 14.0.0
+      ws: 8.21.0
+      y-protocols: 1.0.6(yjs@13.6.27)
+      yjs: 13.6.27
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@hocuspocus/transformer@2.15.2(@tiptap/core@2.26.3(@tiptap/pm@3.6.6))(@tiptap/pm@3.6.6)(y-prosemirror@1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))(yjs@13.6.27)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@3.6.6)
+      '@tiptap/pm': 3.6.6
+      '@tiptap/starter-kit': 2.26.1
+      y-prosemirror: 1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      yjs: 13.6.27
+
+  '@humanfs/core@0.19.2':
+    dependencies:
+      '@humanfs/types': 0.15.0
+
+  '@humanfs/node@0.16.8':
+    dependencies:
+      '@humanfs/core': 0.19.2
+      '@humanfs/types': 0.15.0
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanfs/types@0.15.0': {}
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@hypermod/utils@0.7.1':
+    dependencies:
+      jscodeshift: 17.3.0
+    transitivePeerDependencies:
+      - '@babel/preset-env'
+      - supports-color
+
+  '@iarna/toml@2.2.5': {}
+
+  '@icons/material@0.2.4(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+
+  '@img/colour@1.1.0': {}
+
+  '@img/sharp-darwin-arm64@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.3.3
+    optional: true
+
+  '@img/sharp-darwin-x64@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.3.3
+    optional: true
+
+  '@img/sharp-freebsd-wasm32@0.35.4':
+    dependencies:
+      '@img/sharp-wasm32': 0.35.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.3.3':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.3.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.3.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.3.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-ppc64@1.3.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-riscv64@1.3.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.3.3':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.3.3':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.3':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.3.3':
+    optional: true
+
+  '@img/sharp-linux-arm64@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.3.3
+    optional: true
+
+  '@img/sharp-linux-arm@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.3.3
+    optional: true
+
+  '@img/sharp-linux-ppc64@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-ppc64': 1.3.3
+    optional: true
+
+  '@img/sharp-linux-riscv64@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-riscv64': 1.3.3
+    optional: true
+
+  '@img/sharp-linux-s390x@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.3.3
+    optional: true
+
+  '@img/sharp-linux-x64@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.3.3
+    optional: true
+
+  '@img/sharp-linuxmusl-arm64@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.3
+    optional: true
+
+  '@img/sharp-linuxmusl-x64@0.35.4':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.3
+    optional: true
+
+  '@img/sharp-wasm32@0.35.4':
+    dependencies:
+      '@emnapi/runtime': 1.11.3
+    optional: true
+
+  '@img/sharp-webcontainers-wasm32@0.35.4':
+    dependencies:
+      '@img/sharp-wasm32': 0.35.4
+    optional: true
+
+  '@img/sharp-win32-arm64@0.35.4':
+    optional: true
+
+  '@img/sharp-win32-ia32@0.35.4':
+    optional: true
+
+  '@img/sharp-win32-x64@0.35.4':
+    optional: true
+
+  '@internationalized/date@3.12.3':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@internationalized/number@3.6.7':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@internationalized/string@3.2.10':
+    dependencies:
+      '@swc/helpers': 0.5.17
+
+  '@ioredis/commands@1.3.0': {}
+
+  '@isaacs/cliui@9.0.0': {}
+
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))':
+    dependencies:
+      glob: 11.1.0
+      react-docgen-typescript: 2.4.0(typescript@5.8.3)
+      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+    optionalDependencies:
+      typescript: 5.8.3
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/source-map@0.3.11':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@lifeomic/attempt@3.1.0': {}
+
+  '@lit-labs/react@2.1.3(@types/react@19.2.17)':
+    dependencies:
+      '@lit/react': 1.0.8(@types/react@19.2.17)
+    transitivePeerDependencies:
+      - '@types/react'
+
+  '@lit/react@1.0.8(@types/react@19.2.17)':
+    dependencies:
+      '@types/react': 19.2.17
+
+  '@makeplane/propel@0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)':
+    dependencies:
+      '@base-ui/react': 1.7.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      class-variance-authority: 0.7.1
+      lucide-react: 1.34.0(react@19.2.8)
+      react: 19.2.8
+      react-day-picker: 10.0.1(@types/react@19.2.17)(react@19.2.8)
+      react-dom: 19.2.8(react@19.2.8)
+      tailwindcss: 4.1.17
+    transitivePeerDependencies:
+      - '@date-fns/tz'
+      - '@types/react'
+      - date-fns
+
+  '@mdx-js/react@3.1.0(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@types/mdx': 2.0.13
+      '@types/react': 19.2.17
+      react: 19.2.8
+
+  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.4':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.4':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.4':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.4':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.4':
+    optional: true
+
+  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.4':
+    optional: true
+
+  '@napi-rs/canvas-android-arm64@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-darwin-arm64@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-darwin-x64@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-musl@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.80':
+    optional: true
+
+  '@napi-rs/canvas@0.1.80':
+    optionalDependencies:
+      '@napi-rs/canvas-android-arm64': 0.1.80
+      '@napi-rs/canvas-darwin-arm64': 0.1.80
+      '@napi-rs/canvas-darwin-x64': 0.1.80
+      '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.80
+      '@napi-rs/canvas-linux-arm64-gnu': 0.1.80
+      '@napi-rs/canvas-linux-arm64-musl': 0.1.80
+      '@napi-rs/canvas-linux-riscv64-gnu': 0.1.80
+      '@napi-rs/canvas-linux-x64-gnu': 0.1.80
+      '@napi-rs/canvas-linux-x64-musl': 0.1.80
+      '@napi-rs/canvas-win32-x64-msvc': 0.1.80
+
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.11.3
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@neoconfetti/react@1.0.0': {}
+
+  '@noble/ciphers@1.3.0': {}
+
+  '@noble/hashes@1.8.0': {}
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@opentelemetry/api-logs@0.214.0':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+
+  '@opentelemetry/api@1.9.1': {}
+
+  '@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/semantic-conventions': 1.41.1
+
+  '@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/api-logs': 0.214.0
+      import-in-the-middle: 3.0.1
+      require-in-the-middle: 8.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@opentelemetry/resources@2.8.0(@opentelemetry/api@1.9.1)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.8.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
+
+  '@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.8.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.8.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
+
+  '@opentelemetry/semantic-conventions@1.41.1': {}
+
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm-eabi@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-android-arm64@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-arm64@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-darwin-x64@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-freebsd-x64@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.132.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.132.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.132.0':
+    optional: true
+
+  '@oxc-project/types@0.127.0': {}
+
+  '@oxc-project/types@0.132.0': {}
+
+  '@oxc-project/types@0.133.0': {}
+
+  '@oxc-project/types@0.96.0': {}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-android-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
+    optional: true
+
+  '@oxfmt/binding-android-arm-eabi@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-android-arm64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-arm64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-x64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-freebsd-x64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-musl@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-musl@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-s390x-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-gnu@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-musl@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-openharmony-arm64@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-win32-arm64-msvc@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-win32-ia32-msvc@0.35.0':
+    optional: true
+
+  '@oxfmt/binding-win32-x64-msvc@0.35.0':
+    optional: true
+
+  '@oxlint/binding-android-arm-eabi@1.51.0':
+    optional: true
+
+  '@oxlint/binding-android-arm-eabi@1.68.0':
+    optional: true
+
+  '@oxlint/binding-android-arm64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-android-arm64@1.68.0':
+    optional: true
+
+  '@oxlint/binding-darwin-arm64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-darwin-arm64@1.68.0':
+    optional: true
+
+  '@oxlint/binding-darwin-x64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-darwin-x64@1.68.0':
+    optional: true
+
+  '@oxlint/binding-freebsd-x64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-freebsd-x64@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-musleabihf@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-musleabihf@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-gnu@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-musl@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-musl@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-ppc64-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-ppc64-gnu@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-gnu@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-musl@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-musl@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-s390x-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-s390x-gnu@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-gnu@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-gnu@1.68.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-musl@1.51.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-musl@1.68.0':
+    optional: true
+
+  '@oxlint/binding-openharmony-arm64@1.51.0':
+    optional: true
+
+  '@oxlint/binding-openharmony-arm64@1.68.0':
+    optional: true
+
+  '@oxlint/binding-win32-arm64-msvc@1.51.0':
+    optional: true
+
+  '@oxlint/binding-win32-arm64-msvc@1.68.0':
+    optional: true
+
+  '@oxlint/binding-win32-ia32-msvc@1.51.0':
+    optional: true
+
+  '@oxlint/binding-win32-ia32-msvc@1.68.0':
+    optional: true
+
+  '@oxlint/binding-win32-x64-msvc@1.51.0':
+    optional: true
+
+  '@oxlint/binding-win32-x64-msvc@1.68.0':
+    optional: true
+
+  '@parcel/watcher-android-arm64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.4':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.4':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.4':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.4':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.4':
+    optional: true
+
+  '@parcel/watcher@2.5.4':
+    dependencies:
+      detect-libc: 2.1.2
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 2.3.2
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.4
+      '@parcel/watcher-darwin-arm64': 2.5.4
+      '@parcel/watcher-darwin-x64': 2.5.4
+      '@parcel/watcher-freebsd-x64': 2.5.4
+      '@parcel/watcher-linux-arm-glibc': 2.5.4
+      '@parcel/watcher-linux-arm-musl': 2.5.4
+      '@parcel/watcher-linux-arm64-glibc': 2.5.4
+      '@parcel/watcher-linux-arm64-musl': 2.5.4
+      '@parcel/watcher-linux-x64-glibc': 2.5.4
+      '@parcel/watcher-linux-x64-musl': 2.5.4
+      '@parcel/watcher-win32-arm64': 2.5.4
+      '@parcel/watcher-win32-ia32': 2.5.4
+      '@parcel/watcher-win32-x64': 2.5.4
+
+  '@popperjs/core@2.11.8': {}
+
+  '@quansync/fs@1.0.0':
+    dependencies:
+      quansync: 1.0.0
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.8)
+      aria-hidden: 1.2.6
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.1(@types/react@19.2.17)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.17)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  '@react-aria/focus@3.22.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@swc/helpers': 0.5.17
+      react: 19.2.8
+      react-aria: 3.51.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@react-aria/interactions@3.28.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@react-types/shared': 3.36.1(react@19.2.8)
+      '@swc/helpers': 0.5.17
+      react: 19.2.8
+      react-aria: 3.51.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@react-pdf/fns@3.1.3': {}
+
+  '@react-pdf/font@4.1.1':
+    dependencies:
+      '@react-pdf/types': 2.13.1
+      fontkit: 2.0.4
+      is-url: 1.2.4
+      pdfkit: 0.20.1
+
+  '@react-pdf/hyphenate@0.1.0':
+    dependencies:
+      hyphen: 1.6.6
+
+  '@react-pdf/image@3.1.2':
+    dependencies:
+      '@react-pdf/svg': 1.1.1
+      jay-peg: 1.1.1
+      png-js: 2.0.0
+
+  '@react-pdf/layout@5.1.1':
+    dependencies:
+      '@react-pdf/fns': 3.1.3
+      '@react-pdf/image': 3.1.2
+      '@react-pdf/paginate': 1.0.1
+      '@react-pdf/primitives': 4.4.0
+      '@react-pdf/stylesheet': 6.3.1
+      '@react-pdf/textkit': 7.0.1
+      '@react-pdf/types': 2.13.1
+      emoji-regex-xs: 1.0.0
+      queue: 6.0.2
+      yoga-layout: 3.2.1
+
+  '@react-pdf/paginate@1.0.1': {}
+
+  '@react-pdf/primitives@4.4.0': {}
+
+  '@react-pdf/reconciler@2.0.0(react@19.2.8)':
+    dependencies:
+      object-assign: 4.1.1
+      react: 19.2.8
+      scheduler: 0.25.0-rc-603e6108-20241029
+
+  '@react-pdf/render@4.6.4':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@react-pdf/fns': 3.1.3
+      '@react-pdf/primitives': 4.4.0
+      '@react-pdf/textkit': 7.0.1
+      '@react-pdf/types': 2.13.1
+      abs-svg-path: 0.1.1
+      color-string: 2.1.4
+      normalize-svg-path: 1.1.0
+      parse-svg-path: 0.1.2
+      svg-arc-to-cubic-bezier: 3.2.0
+
+  '@react-pdf/renderer@4.8.1(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@react-pdf/fns': 3.1.3
+      '@react-pdf/font': 4.1.1
+      '@react-pdf/layout': 5.1.1
+      '@react-pdf/primitives': 4.4.0
+      '@react-pdf/reconciler': 2.0.0(react@19.2.8)
+      '@react-pdf/render': 4.6.4
+      '@react-pdf/types': 2.13.1
+      events: 3.3.0
+      object-assign: 4.1.1
+      pdfkit: 0.20.1
+      prop-types: 15.8.1
+      queue: 6.0.2
+      react: 19.2.8
+
+  '@react-pdf/stylesheet@6.3.1':
+    dependencies:
+      '@react-pdf/fns': 3.1.3
+      '@react-pdf/types': 2.13.1
+      color-string: 2.1.4
+      hsl-to-hex: 1.0.0
+      media-engine: 2.0.0
+      postcss-value-parser: 4.2.0
+
+  '@react-pdf/svg@1.1.1':
+    dependencies:
+      '@react-pdf/primitives': 4.4.0
+
+  '@react-pdf/textkit@7.0.1':
+    dependencies:
+      '@react-pdf/fns': 3.1.3
+      '@react-pdf/hyphenate': 0.1.0
+      bidi-js: 1.0.3
+      unicode-properties: 1.4.1
+
+  '@react-pdf/types@2.13.1':
+    dependencies:
+      '@react-pdf/font': 4.1.1
+      '@react-pdf/primitives': 4.4.0
+      '@react-pdf/stylesheet': 6.3.1
+
+  '@react-router/dev@8.3.0(@react-router/serve@8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3))(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/generator': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@react-router/node': 8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      '@remix-run/node-fetch-server': 0.13.3
+      babel-dead-code-elimination: 1.0.12
+      chokidar: 3.6.0
+      dedent: 1.7.2
+      es-module-lexer: 2.3.1
+      exit-hook: 5.1.0
+      isbot: 5.2.1
+      jsesc: 3.1.0
+      lodash: 4.18.1
+      p-map: 7.0.6
+      pathe: 2.0.3
+      picocolors: 1.1.1
+      pkg-types: 2.3.1
+      prettier: 3.9.6
+      react-refresh: 0.18.0
+      react-router: 8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      semver: 7.8.5
+      tinyglobby: 0.2.17
+      valibot: 1.4.2(typescript@5.8.3)
+      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+    optionalDependencies:
+      '@react-router/serve': 8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - supports-color
+
+  '@react-router/express@8.3.0(express@5.2.1)(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
+    dependencies:
+      '@react-router/node': 8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      express: 5.2.1
+      react-router: 8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+    optionalDependencies:
+      typescript: 5.8.3
+
+  '@react-router/node@8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
+    dependencies:
+      '@remix-run/node-fetch-server': 0.13.3
+      react-router: 8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+    optionalDependencies:
+      typescript: 5.8.3
+
+  '@react-router/serve@8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
+    dependencies:
+      '@react-router/express': 8.3.0(express@5.2.1)(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      '@react-router/node': 8.3.0(react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      '@remix-run/node-fetch-server': 0.13.3
+      compression: 1.8.1
+      express: 5.2.1
+      morgan: 1.11.0
+      react-router: 8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      source-map-support: 0.5.21
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@react-types/shared@3.36.1(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+
+  '@remirror/core-constants@3.0.0': {}
+
+  '@remix-run/node-fetch-server@0.13.3': {}
+
+  '@rolldown/binding-android-arm64@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-android-arm64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.3':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.3':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.3':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.46(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.3':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.3':
+    optional: true
+
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.46':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.3':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.0-beta.46': {}
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@rollup/pluginutils@5.2.0':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 2.3.2
+
+  '@sentry-internal/server-utils@10.56.0':
+    dependencies:
+      '@sentry/core': 10.56.0
+
+  '@sentry/core@10.56.0': {}
+
+  '@sentry/node-core@10.56.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.41.1)':
+    dependencies:
+      '@sentry/core': 10.56.0
+      '@sentry/opentelemetry': 10.56.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.41.1)
+      import-in-the-middle: 3.0.1
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.8.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.8.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
+
+  '@sentry/node@10.56.0':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.8.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.8.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
+      '@sentry-internal/server-utils': 10.56.0
+      '@sentry/core': 10.56.0
+      '@sentry/node-core': 10.56.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.41.1)
+      '@sentry/opentelemetry': 10.56.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.41.1)
+      import-in-the-middle: 3.0.1
+    transitivePeerDependencies:
+      - '@opentelemetry/exporter-trace-otlp-http'
+      - supports-color
+
+  '@sentry/opentelemetry@10.56.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.41.1)':
+    dependencies:
+      '@opentelemetry/api': 1.9.1
+      '@opentelemetry/core': 2.8.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.8.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.41.1
+      '@sentry/core': 10.56.0
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@storybook/addon-designs@11.1.3(@storybook/addon-docs@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1)))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
+    dependencies:
+      '@figspec/react': 2.0.1(@types/react@19.2.17)(react@19.2.8)
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+    optionalDependencies:
+      '@storybook/addon-docs': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    transitivePeerDependencies:
+      - '@types/react'
+
+  '@storybook/addon-docs@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
+    dependencies:
+      '@mdx-js/react': 3.1.0(@types/react@19.2.17)(react@19.2.8)
+      '@storybook/csf-plugin': 10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      '@storybook/icons': 2.0.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@storybook/react-dom-shim': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      ts-dedent: 2.2.0
+    optionalDependencies:
+      '@types/react': 19.2.17
+    transitivePeerDependencies:
+      - '@types/react-dom'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+
+  '@storybook/addon-docs@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))':
+    dependencies:
+      '@mdx-js/react': 3.1.0(@types/react@19.2.17)(react@19.2.8)
+      '@storybook/csf-plugin': 10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
+      '@storybook/icons': 2.0.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@storybook/react-dom-shim': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      ts-dedent: 2.2.0
+    optionalDependencies:
+      '@types/react': 19.2.17
+    transitivePeerDependencies:
+      - '@types/react-dom'
+      - esbuild
+      - rollup
+      - vite
+      - webpack
+
+  '@storybook/addon-links@10.4.6(@types/react@19.2.17)(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
+    dependencies:
+      '@storybook/global': 5.0.0
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      react: 19.2.8
+
+  '@storybook/addon-onboarding@10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
+    dependencies:
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+
+  '@storybook/addon-styling-webpack@3.0.2(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
+    dependencies:
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+
+  '@storybook/addon-webpack5-compiler-swc@4.0.3(@swc/helpers@0.5.17)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
+    dependencies:
+      '@swc/core': 1.13.5(@swc/helpers@0.5.17)
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      swc-loader: 0.2.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+    transitivePeerDependencies:
+      - '@swc/helpers'
+      - webpack
+
+  '@storybook/builder-vite@10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))':
+    dependencies:
+      '@storybook/csf-plugin': 10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      ts-dedent: 2.2.0
+      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - esbuild
+      - rollup
+      - webpack
+
+  '@storybook/builder-webpack5@10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
+    dependencies:
+      '@storybook/core-webpack': 10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      case-sensitive-paths-webpack-plugin: 2.4.0
+      cjs-module-lexer: 1.4.3
+      css-loader: 7.1.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      es-module-lexer: 1.7.0
+      fork-ts-checker-webpack-plugin: 9.1.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      html-webpack-plugin: 5.6.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      magic-string: 0.30.21
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      style-loader: 4.0.0(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      terser-webpack-plugin: 5.6.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      ts-dedent: 2.2.0
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+      webpack-dev-middleware: 6.1.3(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      webpack-hot-middleware: 2.26.1
+      webpack-virtual-modules: 0.6.2
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@minify-html/node'
+      - '@rspack/core'
+      - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
+      - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
+      - uglify-js
+      - webpack-cli
+
+  '@storybook/core-webpack@10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
+    dependencies:
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      ts-dedent: 2.2.0
+
+  '@storybook/csf-plugin@10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
+    dependencies:
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      unplugin: 2.3.11
+    optionalDependencies:
+      esbuild: 0.28.1
+      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+
+  '@storybook/csf-plugin@10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))':
+    dependencies:
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      unplugin: 2.3.11
+    optionalDependencies:
+      esbuild: 0.28.1
+      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+      webpack: 5.104.1(esbuild@0.28.1)
+
+  '@storybook/global@5.0.0': {}
+
+  '@storybook/icons@2.0.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@storybook/preset-react-webpack@10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
+    dependencies:
+      '@storybook/core-webpack': 10.4.6(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      '@types/semver': 7.7.1
+      magic-string: 0.30.21
+      react: 19.2.8
+      react-docgen: 7.1.1
+      react-dom: 19.2.8(react@19.2.8)
+      resolve: 1.22.10
+      semver: 7.8.5
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tsconfig-paths: 4.2.0
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@minify-html/node'
+      - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
+      - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
+      - supports-color
+      - uglify-js
+      - webpack-cli
+
+  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))':
+    dependencies:
+      debug: 4.4.3
+      endent: 2.1.0
+      find-cache-dir: 3.3.2
+      flat-cache: 3.2.0
+      micromatch: 4.0.8
+      react-docgen-typescript: 2.4.0(typescript@5.8.3)
+      tslib: 2.8.1
+      typescript: 5.8.3
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@storybook/react-dom-shim@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))':
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
+  '@storybook/react-vite@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))':
+    dependencies:
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+      '@rollup/pluginutils': 5.2.0
+      '@storybook/builder-vite': 10.4.6(esbuild@0.28.1)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))(webpack@5.104.1(esbuild@0.28.1))
+      '@storybook/react': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      empathic: 2.0.0
+      magic-string: 0.30.21
+      react: 19.2.8
+      react-docgen: 8.0.3
+      react-dom: 19.2.8(react@19.2.8)
+      resolve: 1.22.10
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      tsconfig-paths: 4.2.0
+      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - esbuild
+      - rollup
+      - supports-color
+      - typescript
+      - webpack
+
+  '@storybook/react-webpack5@10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(postcss@8.5.25)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
+    dependencies:
+      '@storybook/builder-webpack5': 10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      '@storybook/preset-react-webpack': 10.4.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      '@storybook/react': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@minify-html/node'
+      - '@rspack/core'
+      - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - '@types/react'
+      - '@types/react-dom'
+      - clean-css
+      - cssnano
+      - csso
+      - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
+      - supports-color
+      - uglify-js
+      - webpack-cli
+
+  '@storybook/react@10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))(typescript@5.8.3)':
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/react-dom-shim': 10.4.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8))
+      react: 19.2.8
+      react-docgen: 8.0.3
+      react-docgen-typescript: 2.4.0(typescript@5.8.3)
+      react-dom: 19.2.8(react@19.2.8)
+      storybook: 10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@swc/core-darwin-arm64@1.13.5':
+    optional: true
+
+  '@swc/core-darwin-x64@1.13.5':
+    optional: true
+
+  '@swc/core-linux-arm-gnueabihf@1.13.5':
+    optional: true
+
+  '@swc/core-linux-arm64-gnu@1.13.5':
+    optional: true
+
+  '@swc/core-linux-arm64-musl@1.13.5':
+    optional: true
+
+  '@swc/core-linux-x64-gnu@1.13.5':
+    optional: true
+
+  '@swc/core-linux-x64-musl@1.13.5':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.13.5':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.13.5':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.13.5':
+    optional: true
+
+  '@swc/core@1.13.5(@swc/helpers@0.5.17)':
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.24
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.13.5
+      '@swc/core-darwin-x64': 1.13.5
+      '@swc/core-linux-arm-gnueabihf': 1.13.5
+      '@swc/core-linux-arm64-gnu': 1.13.5
+      '@swc/core-linux-arm64-musl': 1.13.5
+      '@swc/core-linux-x64-gnu': 1.13.5
+      '@swc/core-linux-x64-musl': 1.13.5
+      '@swc/core-win32-arm64-msvc': 1.13.5
+      '@swc/core-win32-ia32-msvc': 1.13.5
+      '@swc/core-win32-x64-msvc': 1.13.5
+      '@swc/helpers': 0.5.17
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.17':
+    dependencies:
+      tslib: 2.8.1
+
+  '@swc/types@0.1.24':
+    dependencies:
+      '@swc/counter': 0.1.3
+
+  '@tailwindcss/node@4.1.17':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.3
+      jiti: 2.7.0
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.17
+
+  '@tailwindcss/oxide-android-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.17':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-arm64': 4.1.17
+      '@tailwindcss/oxide-darwin-x64': 4.1.17
+      '@tailwindcss/oxide-freebsd-x64': 4.1.17
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.17
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.17
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.17
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.17
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.17
+
+  '@tailwindcss/postcss@4.1.17':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.1.17
+      '@tailwindcss/oxide': 4.1.17
+      postcss: 8.5.25
+      tailwindcss: 4.1.17
+
+  '@tailwindcss/typography@0.5.19':
+    dependencies:
+      postcss-selector-parser: 6.0.10
+
+  '@tanstack/react-table@8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@tanstack/react-virtual@3.13.12(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@tanstack/table-core@8.21.3': {}
+
+  '@tanstack/virtual-core@3.13.12': {}
+
+  '@testing-library/dom@10.4.0':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/runtime': 7.29.7
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      chalk: 4.1.2
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
+    dependencies:
+      '@testing-library/dom': 10.4.0
+
+  '@tiptap/core@2.26.3(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/core@2.26.3(@tiptap/pm@3.6.6)':
+    dependencies:
+      '@tiptap/pm': 3.6.6
+
+  '@tiptap/extension-blockquote@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-bold@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-bubble-menu@2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+      tippy.js: 6.3.7
+
+  '@tiptap/extension-bullet-list@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-character-count@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/extension-code-block@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/extension-code@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-collaboration@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(y-prosemirror@1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+      y-prosemirror: 1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+
+  '@tiptap/extension-document@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-dropcursor@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/extension-emoji@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1))(emojibase@16.0.0)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+      '@tiptap/suggestion': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      emoji-regex: 10.5.0
+      emojibase-data: 15.3.2(emojibase@16.0.0)
+      is-emoji-supported: 0.0.5
+    transitivePeerDependencies:
+      - emojibase
+
+  '@tiptap/extension-floating-menu@2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+      tippy.js: 6.3.7
+
+  '@tiptap/extension-gapcursor@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/extension-hard-break@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-heading@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-history@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/extension-horizontal-rule@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/extension-image@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-italic@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-list-item@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-mention@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+      '@tiptap/suggestion': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-ordered-list@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-paragraph@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-placeholder@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/extension-strike@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-task-item@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/extension-task-list@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-text-align@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-text-style@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-text@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/extension-underline@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+
+  '@tiptap/html@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+      zeed-dom: 0.15.1
+
+  '@tiptap/html@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@3.6.6))(@tiptap/pm@3.6.6)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@3.6.6)
+      '@tiptap/pm': 3.6.6
+      zeed-dom: 0.15.1
+
+  '@tiptap/pm@2.26.1':
+    dependencies:
+      prosemirror-changeset: 2.3.1
+      prosemirror-collab: 1.3.1
+      prosemirror-commands: 1.7.1
+      prosemirror-dropcursor: 1.8.2
+      prosemirror-gapcursor: 1.3.2
+      prosemirror-history: 1.4.1
+      prosemirror-inputrules: 1.5.0
+      prosemirror-keymap: 1.2.3
+      prosemirror-markdown: 1.13.2
+      prosemirror-menu: 1.2.5
+      prosemirror-model: 1.25.3
+      prosemirror-schema-basic: 1.2.4
+      prosemirror-schema-list: 1.5.1
+      prosemirror-state: 1.4.3
+      prosemirror-tables: 1.7.1
+      prosemirror-trailing-node: 3.0.0(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)
+      prosemirror-transform: 1.10.4
+      prosemirror-view: 1.40.0
+
+  '@tiptap/pm@3.6.6':
+    dependencies:
+      prosemirror-changeset: 2.3.1
+      prosemirror-collab: 1.3.1
+      prosemirror-commands: 1.7.1
+      prosemirror-dropcursor: 1.8.2
+      prosemirror-gapcursor: 1.3.2
+      prosemirror-history: 1.4.1
+      prosemirror-inputrules: 1.5.0
+      prosemirror-keymap: 1.2.3
+      prosemirror-markdown: 1.13.2
+      prosemirror-menu: 1.2.5
+      prosemirror-model: 1.25.3
+      prosemirror-schema-basic: 1.2.4
+      prosemirror-schema-list: 1.5.1
+      prosemirror-state: 1.4.3
+      prosemirror-tables: 1.7.1
+      prosemirror-trailing-node: 3.0.0(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)
+      prosemirror-transform: 1.10.4
+      prosemirror-view: 1.40.0
+
+  '@tiptap/react@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/extension-bubble-menu': 2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-floating-menu': 2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+      '@types/use-sync-external-store': 0.0.6
+      fast-deep-equal: 3.1.3
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      use-sync-external-store: 1.6.0(react@19.2.8)
+
+  '@tiptap/starter-kit@2.26.1':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/extension-blockquote': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-bold': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-bullet-list': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-code': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-code-block': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-document': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-dropcursor': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-gapcursor': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-hard-break': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-heading': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-history': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-horizontal-rule': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-italic': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-list-item': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-ordered-list': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-paragraph': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-strike': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-text': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-text-style': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/pm': 2.26.1
+
+  '@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+
+  '@tokenizer/inflate@0.4.1':
+    dependencies:
+      debug: 4.4.3
+      token-types: 6.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tokenizer/token@0.3.0': {}
+
+  '@turbo/darwin-64@2.10.11':
+    optional: true
+
+  '@turbo/darwin-arm64@2.10.11':
+    optional: true
+
+  '@turbo/linux-64@2.10.11':
+    optional: true
+
+  '@turbo/linux-arm64@2.10.11':
+    optional: true
+
+  '@turbo/windows-64@2.10.11':
+    optional: true
+
+  '@turbo/windows-arm64@2.10.11':
+    optional: true
+
+  '@tybys/wasm-util@0.10.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/aria-query@5.0.4': {}
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.7
+
+  '@types/body-parser@1.19.6':
+    dependencies:
+      '@types/connect': 3.4.38
+      '@types/node': 22.12.0
+
+  '@types/chai@5.2.2':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+
+  '@types/chroma-js@3.1.2': {}
+
+  '@types/compression@1.8.1':
+    dependencies:
+      '@types/express': 4.17.23
+      '@types/node': 22.12.0
+
+  '@types/connect@3.4.38':
+    dependencies:
+      '@types/node': 22.12.0
+
+  '@types/cors@2.8.19':
+    dependencies:
+      '@types/node': 22.12.0
+
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/deep-eql@4.0.2': {}
+
+  '@types/doctrine@0.0.9': {}
+
+  '@types/eslint-scope@3.7.7':
+    dependencies:
+      '@types/eslint': 9.6.1
+      '@types/estree': 1.0.8
+
+  '@types/eslint@9.6.1':
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+
+  '@types/esrecurse@4.3.1': {}
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.8
+
+  '@types/estree@1.0.8': {}
+
+  '@types/express-serve-static-core@4.19.6':
+    dependencies:
+      '@types/node': 22.12.0
+      '@types/qs': 6.14.0
+      '@types/range-parser': 1.2.7
+      '@types/send': 0.17.5
+
+  '@types/express-serve-static-core@5.0.7':
+    dependencies:
+      '@types/node': 22.12.0
+      '@types/qs': 6.14.0
+      '@types/range-parser': 1.2.7
+      '@types/send': 0.17.5
+
+  '@types/express-ws@3.0.5':
+    dependencies:
+      '@types/express': 4.17.23
+      '@types/express-serve-static-core': 5.0.7
+      '@types/ws': 8.18.1
+
+  '@types/express@4.17.23':
+    dependencies:
+      '@types/body-parser': 1.19.6
+      '@types/express-serve-static-core': 4.19.6
+      '@types/qs': 6.14.0
+      '@types/serve-static': 1.15.8
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/html-minifier-terser@6.1.0': {}
+
+  '@types/http-errors@2.0.5': {}
+
+  '@types/jscodeshift@17.3.0':
+    dependencies:
+      ast-types: 0.16.1
+      recast: 0.23.11
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/linkify-it@3.0.5': {}
+
+  '@types/linkify-it@5.0.0': {}
+
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.20
+
+  '@types/lodash@4.17.20': {}
+
+  '@types/markdown-it@13.0.9':
+    dependencies:
+      '@types/linkify-it': 3.0.5
+      '@types/mdurl': 1.0.5
+
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/mdurl@1.0.5': {}
+
+  '@types/mdurl@2.0.0': {}
+
+  '@types/mdx@2.0.13': {}
+
+  '@types/mime@1.3.5': {}
+
+  '@types/ms@2.1.0': {}
+
+  '@types/node@22.12.0':
+    dependencies:
+      undici-types: 6.20.0
+
+  '@types/pdf-parse@1.1.5':
+    dependencies:
+      '@types/node': 22.12.0
+
+  '@types/qs@6.14.0': {}
+
+  '@types/range-parser@1.2.7': {}
+
+  '@types/react-color@3.0.13(@types/react@19.2.17)':
+    dependencies:
+      '@types/react': 19.2.17
+      '@types/reactcss': 1.2.13(@types/react@19.2.17)
+
+  '@types/react-dom@19.2.3(@types/react@19.2.17)':
+    dependencies:
+      '@types/react': 19.2.17
+
+  '@types/react@19.2.17':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/reactcss@1.2.13(@types/react@19.2.17)':
+    dependencies:
+      '@types/react': 19.2.17
+
+  '@types/resolve@1.20.6': {}
+
+  '@types/sanitize-html@2.16.0':
+    dependencies:
+      htmlparser2: 8.0.2
+
+  '@types/semver@7.7.1': {}
+
+  '@types/send@0.17.5':
+    dependencies:
+      '@types/mime': 1.3.5
+      '@types/node': 22.12.0
+
+  '@types/serve-static@1.15.8':
+    dependencies:
+      '@types/http-errors': 2.0.5
+      '@types/node': 22.12.0
+      '@types/send': 0.17.5
+
+  '@types/triple-beam@1.3.5': {}
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@types/ws@8.18.1':
+    dependencies:
+      '@types/node': 22.12.0
+
+  '@typescript-eslint/types@8.60.1': {}
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@vitest/coverage-v8@4.1.8(vitest@4.1.8)':
+    dependencies:
+      '@bcoe/v8-coverage': 1.0.2
+      '@vitest/utils': 4.1.8
+      ast-v8-to-istanbul: 1.0.3
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-reports: 3.2.0
+      magicast: 0.5.3
+      obug: 2.1.1
+      std-env: 4.1.0
+      tinyrainbow: 3.1.0
+      vitest: 4.1.8(@opentelemetry/api@1.9.1)(@types/node@22.12.0)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.2
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
+  '@vitest/expect@4.1.8':
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      '@types/chai': 5.2.2
+      '@vitest/spy': 4.1.8
+      '@vitest/utils': 4.1.8
+      chai: 6.2.2
+      tinyrainbow: 3.1.0
+
+  '@vitest/mocker@4.1.8(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))':
+    dependencies:
+      '@vitest/spy': 4.1.8
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+
+  '@vitest/pretty-format@3.2.4':
+    dependencies:
+      tinyrainbow: 2.0.0
+
+  '@vitest/pretty-format@4.1.8':
+    dependencies:
+      tinyrainbow: 3.1.0
+
+  '@vitest/runner@4.1.8':
+    dependencies:
+      '@vitest/utils': 4.1.8
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.1.8':
+    dependencies:
+      '@vitest/pretty-format': 4.1.8
+      '@vitest/utils': 4.1.8
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.3
+
+  '@vitest/spy@4.1.8': {}
+
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
+  '@vitest/utils@4.1.8':
+    dependencies:
+      '@vitest/pretty-format': 4.1.8
+      convert-source-map: 2.0.0
+      tinyrainbow: 3.1.0
+
+  '@webassemblyjs/ast@1.14.1':
+    dependencies:
+      '@webassemblyjs/helper-numbers': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+
+  '@webassemblyjs/floating-point-hex-parser@1.13.2': {}
+
+  '@webassemblyjs/helper-api-error@1.13.2': {}
+
+  '@webassemblyjs/helper-buffer@1.14.1': {}
+
+  '@webassemblyjs/helper-numbers@1.13.2':
+    dependencies:
+      '@webassemblyjs/floating-point-hex-parser': 1.13.2
+      '@webassemblyjs/helper-api-error': 1.13.2
+      '@xtuc/long': 4.2.2
+
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2': {}
+
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/wasm-gen': 1.14.1
+
+  '@webassemblyjs/ieee754@1.13.2':
+    dependencies:
+      '@xtuc/ieee754': 1.2.0
+
+  '@webassemblyjs/leb128@1.13.2':
+    dependencies:
+      '@xtuc/long': 4.2.2
+
+  '@webassemblyjs/utf8@1.13.2': {}
+
+  '@webassemblyjs/wasm-edit@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/helper-wasm-section': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-opt': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      '@webassemblyjs/wast-printer': 1.14.1
+
+  '@webassemblyjs/wasm-gen@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
+
+  '@webassemblyjs/wasm-opt@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+
+  '@webassemblyjs/wasm-parser@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-api-error': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
+
+  '@webassemblyjs/wast-printer@1.14.1':
+    dependencies:
+      '@webassemblyjs/ast': 1.14.1
+      '@xtuc/long': 4.2.2
+
+  '@webcontainer/env@1.1.1': {}
+
+  '@xtuc/ieee754@1.2.0': {}
+
+  '@xtuc/long@4.2.2': {}
+
+  '@zeit/schemas@2.36.0': {}
+
+  abs-svg-path@0.1.1: {}
+
+  accepts@1.3.8:
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.0.0
+
+  acorn-import-attributes@1.9.5(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
+  acorn-import-phases@1.0.4(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
+  acorn-jsx@5.3.2(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
+  acorn@8.16.0: {}
+
+  agent-base@6.0.2:
+    dependencies:
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  agent-install@0.0.5:
+    dependencies:
+      '@iarna/toml': 2.2.5
+      commander: 14.0.2
+      jsonc-parser: 3.3.1
+      picocolors: 1.1.1
+      prompts: 2.4.2
+      yaml: 2.8.3
+
+  ajv-formats@2.1.1(ajv@8.18.0):
+    optionalDependencies:
+      ajv: 8.18.0
+
+  ajv-formats@3.0.1(ajv@8.18.0):
+    optionalDependencies:
+      ajv: 8.18.0
+
+  ajv-keywords@3.5.2(ajv@6.14.0):
+    dependencies:
+      ajv: 6.14.0
+
+  ajv-keywords@5.1.0(ajv@8.18.0):
+    dependencies:
+      ajv: 8.18.0
+      fast-deep-equal: 3.1.3
+
+  ajv@6.14.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ajv@8.18.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.6
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-align@3.0.1:
+    dependencies:
+      string-width: 4.2.3
+
+  ansi-escapes@7.0.0:
+    dependencies:
+      environment: 1.1.0
+
+  ansi-html-community@0.0.8: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@5.2.0: {}
+
+  ansi-styles@6.2.3: {}
+
+  ansis@4.2.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.2
+
+  arch@2.2.0: {}
+
+  arg@5.0.2: {}
+
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
+  array-flatten@1.1.1: {}
+
+  assertion-error@2.0.1: {}
+
+  ast-kit@2.2.0:
+    dependencies:
+      '@babel/parser': 7.29.7
+      pathe: 2.0.3
+
+  ast-types@0.14.2:
+    dependencies:
+      tslib: 2.8.1
+
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
+  ast-v8-to-istanbul@1.0.3:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      estree-walker: 3.0.3
+      js-tokens: 10.0.0
+
+  async-lock@1.4.1: {}
+
+  async@3.2.6: {}
+
+  asynckit@0.4.0: {}
+
+  atomically@2.1.1:
+    dependencies:
+      stubborn-fs: 2.0.0
+      when-exit: 2.1.5
+
+  attr-accept@2.2.5: {}
+
+  autoprefixer@10.4.21(postcss@8.5.25):
+    dependencies:
+      browserslist: 4.28.9
+      caniuse-lite: 1.0.30001759
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.25
+      postcss-value-parser: 4.2.0
+
+  axios@1.18.1:
+    dependencies:
+      follow-redirects: 1.16.0
+      form-data: 4.0.6
+      https-proxy-agent: 5.0.1
+      proxy-from-env: 2.1.0
+    transitivePeerDependencies:
+      - debug
+      - supports-color
+
+  babel-dead-code-elimination@1.0.12:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  bail@2.0.2: {}
+
+  balanced-match@4.0.4: {}
+
+  base64-js@0.0.8: {}
+
+  base64-js@1.5.1: {}
+
+  baseline-browser-mapping@2.11.21: {}
+
+  basic-auth@2.0.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  batch-processor@1.0.0: {}
+
+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
+  binary-extensions@2.3.0: {}
+
+  bind-event-listener@3.0.0: {}
+
+  birpc@2.9.0: {}
+
+  bluebird@3.7.2: {}
+
+  body-parser@1.20.6:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      on-finished: 2.4.1
+      qs: 6.15.2
+      raw-body: 2.5.3
+      type-is: 1.6.18
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  boolbase@1.0.0: {}
+
+  boxen@7.0.0:
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 7.0.1
+      chalk: 5.0.1
+      cli-boxes: 3.0.0
+      string-width: 5.1.2
+      type-fest: 2.19.0
+      widest-line: 4.0.1
+      wrap-ansi: 8.1.0
+
+  brace-expansion@5.0.9:
+    dependencies:
+      balanced-match: 4.0.4
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  brotli@1.3.3:
+    dependencies:
+      base64-js: 1.5.1
+
+  browserslist@4.28.9:
+    dependencies:
+      baseline-browser-mapping: 2.11.21
+      caniuse-lite: 1.0.30001810
+      electron-to-chromium: 1.5.422
+      node-releases: 2.0.54
+      update-browserslist-db: 1.3.2(browserslist@4.28.9)
+
+  buffer-from@1.1.2: {}
+
+  buffer@6.0.3:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
+  bytes@3.0.0: {}
+
+  bytes@3.1.2: {}
+
+  cac@6.7.14: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  camel-case@4.1.2:
+    dependencies:
+      pascal-case: 3.1.2
+      tslib: 2.8.1
+
+  camelcase@7.0.1: {}
+
+  caniuse-lite@1.0.30001759: {}
+
+  caniuse-lite@1.0.30001810: {}
+
+  case-sensitive-paths-webpack-plugin@2.4.0: {}
+
+  ccount@2.0.1: {}
+
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
+  chai@6.2.2: {}
+
+  chalk-template@0.4.0:
+    dependencies:
+      chalk: 4.1.2
+
+  chalk@2.4.2:
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.0.1: {}
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  check-error@2.1.1: {}
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  chroma-js@3.2.0: {}
+
+  chromatic@16.10.0:
+    dependencies:
+      semver: 7.8.5
+
+  chrome-trace-event@1.0.4: {}
+
+  cjs-module-lexer@1.4.3: {}
+
+  cjs-module-lexer@2.2.0: {}
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clean-css@5.3.3:
+    dependencies:
+      source-map: 0.6.1
+
+  cli-boxes@3.0.0: {}
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-truncate@5.1.1:
+    dependencies:
+      slice-ansi: 7.1.2
+      string-width: 8.1.0
+
+  clipboardy@3.0.0:
+    dependencies:
+      arch: 2.2.0
+      execa: 5.1.1
+      is-wsl: 2.2.0
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  clone-deep@4.0.1:
+    dependencies:
+      is-plain-object: 2.0.4
+      kind-of: 6.0.3
+      shallow-clone: 3.0.1
+
+  clone@2.1.2: {}
+
+  clsx@2.1.1: {}
+
+  cluster-key-slot@1.1.2: {}
+
+  cmdk@1.1.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.17)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
+  color-convert@1.9.3:
+    dependencies:
+      color-name: 1.1.3
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.3: {}
+
+  color-name@1.1.4: {}
+
+  color-name@2.1.1: {}
+
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.4
+
+  color-string@2.1.4:
+    dependencies:
+      color-name: 2.1.1
+
+  color@3.2.1:
+    dependencies:
+      color-convert: 1.9.3
+      color-string: 1.9.1
+
+  colorette@2.0.20: {}
+
+  colorspace@1.1.4:
+    dependencies:
+      color: 3.2.1
+      text-hex: 1.0.0
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  comlink@4.4.2: {}
+
+  comma-separated-tokens@2.0.3: {}
+
+  commander@14.0.2: {}
+
+  commander@2.20.3: {}
+
+  commander@8.3.0: {}
+
+  commondir@1.0.1: {}
+
+  compressible@2.0.18:
+    dependencies:
+      mime-db: 1.54.0
+
+  compression@1.8.1:
+    dependencies:
+      bytes: 3.1.2
+      compressible: 2.0.18
+      debug: 2.6.9
+      negotiator: 0.6.4
+      on-headers: 1.1.0
+      safe-buffer: 5.2.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  compute-scroll-into-view@3.1.1: {}
+
+  conf@15.1.0:
+    dependencies:
+      ajv: 8.18.0
+      ajv-formats: 3.0.1(ajv@8.18.0)
+      atomically: 2.1.1
+      debounce-fn: 6.0.0
+      dot-prop: 10.1.0
+      env-paths: 3.0.0
+      json-schema-typed: 8.0.2
+      semver: 7.8.5
+      uint8array-extras: 1.5.0
+
+  confbox@0.2.4: {}
+
+  content-disposition@0.5.2: {}
+
+  content-disposition@0.5.4:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  content-disposition@1.1.0: {}
+
+  content-type@1.0.5: {}
+
+  content-type@2.0.0: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie-es@3.1.1: {}
+
+  cookie-signature@1.0.6: {}
+
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.1: {}
+
+  cors@2.8.5:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
+  cosmiconfig@8.3.6(typescript@5.8.3):
+    dependencies:
+      import-fresh: 3.3.1
+      js-yaml: 4.3.2
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    optionalDependencies:
+      typescript: 5.8.3
+
+  create-react-class@15.7.0:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+
+  crelt@1.0.6: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  css-loader@7.1.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.25)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.25)
+      postcss-modules-scope: 3.2.1(postcss@8.5.25)
+      postcss-modules-values: 4.0.0(postcss@8.5.25)
+      postcss-value-parser: 4.2.0
+      semver: 7.8.5
+    optionalDependencies:
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+
+  css-select@4.3.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      nth-check: 2.1.1
+
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-tree@1.1.3:
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+
+  css-what@6.2.2: {}
+
+  css.escape@1.5.1: {}
+
+  cssesc@3.0.0: {}
+
+  csstype@3.2.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-color@3.1.0: {}
+
+  d3-ease@3.0.1: {}
+
+  d3-format@3.1.0: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@3.1.0: {}
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  date-fns-jalali@4.1.0-0: {}
+
+  date-fns@4.1.0: {}
+
+  dayjs@1.11.23: {}
+
+  debounce-fn@6.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js-light@2.5.1: {}
+
+  decimal.js@10.6.0: {}
+
+  decode-named-character-reference@1.2.0:
+    dependencies:
+      character-entities: 2.0.2
+
+  dedent@0.7.0: {}
+
+  dedent@1.7.2: {}
+
+  deep-eql@5.0.2: {}
+
+  deep-extend@0.6.0: {}
+
+  deep-is@0.1.4: {}
+
+  deepmerge@4.3.1: {}
+
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
+  define-lazy-prop@3.0.0: {}
+
+  defu@6.1.5: {}
+
+  delayed-stream@1.0.0: {}
+
+  denque@1.5.1: {}
+
+  denque@2.1.0: {}
+
+  depd@2.0.0: {}
+
+  dependency-graph@1.0.0: {}
+
+  dequal@2.0.3: {}
+
+  desandro-matches-selector@2.0.2: {}
+
+  deslop-js@0.0.21:
+    dependencies:
+      '@oxc-project/types': 0.132.0
+      fast-glob: 3.3.3
+      minimatch: 10.2.3
+      oxc-parser: 0.132.0
+      oxc-resolver: 11.20.0
+      typescript: 5.8.3
+
+  destroy@1.2.0: {}
+
+  detect-libc@2.1.2: {}
+
+  detect-node-es@1.1.0: {}
+
+  devlop@1.1.0:
+    dependencies:
+      dequal: 2.0.3
+
+  dfa@1.2.0: {}
+
+  diff@5.2.2: {}
+
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
+
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
+  dom-converter@0.2.0:
+    dependencies:
+      utila: 0.4.0
+
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.29.7
+      csstype: 3.2.3
+
+  dom-serializer@1.4.1:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+      entities: 2.2.0
+
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  dom-serializer@3.1.1:
+    dependencies:
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+      entities: 8.0.0
+
+  domelementtype@2.3.0: {}
+
+  domelementtype@3.0.0: {}
+
+  domhandler@4.3.1:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domhandler@6.0.1:
+    dependencies:
+      domelementtype: 3.0.0
+
+  domutils@2.8.0:
+    dependencies:
+      dom-serializer: 1.4.1
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  domutils@4.0.2:
+    dependencies:
+      dom-serializer: 3.1.1
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+
+  dot-case@3.0.4:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.8.1
+
+  dot-prop@10.1.0:
+    dependencies:
+      type-fest: 5.7.0
+
+  dotenv@16.4.7: {}
+
+  dts-resolver@2.1.3(oxc-resolver@11.20.0):
+    optionalDependencies:
+      oxc-resolver: 11.20.0
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  eastasianwidth@0.2.0: {}
+
+  ee-first@1.1.1: {}
+
+  effect@3.20.0:
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      fast-check: 3.23.2
+
+  effect@4.0.0-beta.70:
+    dependencies:
+      '@standard-schema/spec': 1.1.0
+      fast-check: 4.8.0
+      find-my-way-ts: 0.1.6
+      ini: 7.0.0
+      kubernetes-types: 1.30.0
+      msgpackr: 2.0.2
+      multipasta: 0.2.7
+      toml: 4.3.0
+      uuid: 14.0.0
+      yaml: 2.8.3
+
+  electron-to-chromium@1.5.422: {}
+
+  element-resize-detector@1.2.4:
+    dependencies:
+      batch-processor: 1.0.0
+
+  emoji-picker-react@4.12.2(react@19.2.8):
+    dependencies:
+      flairup: 1.0.0
+      react: 19.2.8
+
+  emoji-regex-xs@1.0.0: {}
+
+  emoji-regex@10.5.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  emojibase-data@15.3.2(emojibase@16.0.0):
+    dependencies:
+      emojibase: 16.0.0
+
+  emojibase@16.0.0: {}
+
+  empathic@2.0.0: {}
+
+  enabled@2.0.0: {}
+
+  encodeurl@1.0.2: {}
+
+  encodeurl@2.0.0: {}
+
+  endent@2.1.0:
+    dependencies:
+      dedent: 0.7.0
+      fast-json-parse: 1.0.3
+      objectorarray: 1.0.5
+
+  enhanced-resolve@5.18.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  entities@2.2.0: {}
+
+  entities@4.5.0: {}
+
+  entities@5.0.0: {}
+
+  entities@6.0.1: {}
+
+  entities@8.0.0: {}
+
+  env-paths@3.0.0: {}
+
+  environment@1.1.0: {}
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  es-module-lexer@2.3.1: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.4
+
+  esbuild@0.28.1:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.28.1
+      '@esbuild/android-arm': 0.28.1
+      '@esbuild/android-arm64': 0.28.1
+      '@esbuild/android-x64': 0.28.1
+      '@esbuild/darwin-arm64': 0.28.1
+      '@esbuild/darwin-x64': 0.28.1
+      '@esbuild/freebsd-arm64': 0.28.1
+      '@esbuild/freebsd-x64': 0.28.1
+      '@esbuild/linux-arm': 0.28.1
+      '@esbuild/linux-arm64': 0.28.1
+      '@esbuild/linux-ia32': 0.28.1
+      '@esbuild/linux-loong64': 0.28.1
+      '@esbuild/linux-mips64el': 0.28.1
+      '@esbuild/linux-ppc64': 0.28.1
+      '@esbuild/linux-riscv64': 0.28.1
+      '@esbuild/linux-s390x': 0.28.1
+      '@esbuild/linux-x64': 0.28.1
+      '@esbuild/netbsd-arm64': 0.28.1
+      '@esbuild/netbsd-x64': 0.28.1
+      '@esbuild/openbsd-arm64': 0.28.1
+      '@esbuild/openbsd-x64': 0.28.1
+      '@esbuild/openharmony-arm64': 0.28.1
+      '@esbuild/sunos-x64': 0.28.1
+      '@esbuild/win32-arm64': 0.28.1
+      '@esbuild/win32-ia32': 0.28.1
+      '@esbuild/win32-x64': 0.28.1
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  escape-string-regexp@5.0.0: {}
+
+  eslint-plugin-react-hooks@7.1.1(eslint@10.4.1(jiti@2.7.0)):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.7
+      eslint: 10.4.1(jiti@2.7.0)
+      hermes-parser: 0.25.1
+      zod: 3.25.76
+      zod-validation-error: 4.0.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-scope@5.1.1:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 4.3.0
+
+  eslint-scope@9.1.2:
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.8
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@5.0.1: {}
+
+  eslint@10.4.1(jiti@2.7.0):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.23.5
+      '@eslint/config-helpers': 0.6.0
+      '@eslint/core': 1.2.1
+      '@eslint/plugin-kit': 0.7.2
+      '@humanfs/node': 0.16.8
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.14.0
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 9.1.2
+      eslint-visitor-keys: 5.0.1
+      espree: 11.2.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      minimatch: 10.2.3
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@11.2.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 5.0.1
+
+  esprima@4.0.1: {}
+
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@4.3.0: {}
+
+  estraverse@5.3.0: {}
+
+  estree-util-is-identifier-name@3.0.0: {}
+
+  estree-walker@2.0.2: {}
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  esutils@2.0.3: {}
+
+  etag@1.8.1: {}
+
+  ev-emitter@1.1.1: {}
+
+  eventemitter3@4.0.7: {}
+
+  eventemitter3@5.0.1: {}
+
+  events@3.3.0: {}
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  exit-hook@5.1.0: {}
+
+  expect-type@1.3.0: {}
+
+  export-to-csv@1.4.0: {}
+
+  express-winston@4.2.0(winston@3.17.0):
+    dependencies:
+      chalk: 2.4.2
+      lodash: 4.18.1
+      winston: 3.17.0
+
+  express-ws@5.0.2(express@4.22.0):
+    dependencies:
+      express: 4.22.0
+      ws: 7.5.11
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  express@4.22.0:
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.6
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookie: 0.7.1
+      cookie-signature: 1.0.6
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.3.1
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      merge-descriptors: 1.0.3
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.13
+      proxy-addr: 2.0.7
+      qs: 6.15.2
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.19.0
+      serve-static: 1.16.2
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 1.20.6
+      content-disposition: 1.1.0
+      content-type: 1.0.5
+      cookie: 0.7.1
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.15.2
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.1.0
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  exsolve@1.0.8: {}
+
+  extend@3.0.2: {}
+
+  fast-check@3.23.2:
+    dependencies:
+      pure-rand: 6.1.0
+
+  fast-check@4.8.0:
+    dependencies:
+      pure-rand: 8.4.0
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-equals@5.2.2: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-parse@1.0.3: {}
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fast-uri@3.1.6: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@2.3.2):
+    optionalDependencies:
+      picomatch: 2.3.2
+
+  fecha@4.2.3: {}
+
+  fflate@0.8.3: {}
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  file-selector@2.1.2:
+    dependencies:
+      tslib: 2.8.1
+
+  file-type@21.3.3:
+    dependencies:
+      '@tokenizer/inflate': 0.4.1
+      strtok3: 10.3.4
+      token-types: 6.1.1
+      uint8array-extras: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  finalhandler@1.3.1:
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.1
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  find-cache-dir@2.1.0:
+    dependencies:
+      commondir: 1.0.1
+      make-dir: 2.1.0
+      pkg-dir: 3.0.0
+
+  find-cache-dir@3.3.2:
+    dependencies:
+      commondir: 1.0.1
+      make-dir: 3.1.0
+      pkg-dir: 4.2.0
+
+  find-my-way-ts@0.1.6: {}
+
+  find-up@3.0.0:
+    dependencies:
+      locate-path: 3.0.0
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  fizzy-ui-utils@2.0.7:
+    dependencies:
+      desandro-matches-selector: 2.0.2
+
+  flairup@1.0.0: {}
+
+  flat-cache@3.2.0:
+    dependencies:
+      flatted: 3.4.2
+      keyv: 4.5.4
+      rimraf: 3.0.2
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.4.2
+      keyv: 4.5.4
+
+  flatted@3.4.2: {}
+
+  flow-parser@0.293.0: {}
+
+  fn.name@1.1.0: {}
+
+  follow-redirects@1.16.0: {}
+
+  fontfaceobserver@2.1.0: {}
+
+  fontkit@2.0.4:
+    dependencies:
+      '@swc/helpers': 0.5.17
+      brotli: 1.3.3
+      clone: 2.1.2
+      dfa: 1.2.0
+      fast-deep-equal: 3.1.3
+      restructure: 3.0.2
+      tiny-inflate: 1.0.3
+      unicode-properties: 1.4.1
+      unicode-trie: 2.0.0
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  fork-ts-checker-webpack-plugin@9.1.0(typescript@5.8.3)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      chalk: 4.1.2
+      chokidar: 3.6.0
+      cosmiconfig: 8.3.6(typescript@5.8.3)
+      deepmerge: 4.3.1
+      fs-extra: 10.1.0
+      memfs: 3.5.3
+      minimatch: 3.1.4
+      node-abort-controller: 3.1.1
+      schema-utils: 3.3.0
+      semver: 7.8.5
+      tapable: 2.3.0
+      typescript: 5.8.3
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+
+  form-data@4.0.6:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.4
+      mime-types: 2.1.35
+
+  forwarded@0.2.0: {}
+
+  fraction.js@4.3.7: {}
+
+  framer-motion@12.23.12(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      motion-dom: 12.23.12
+      motion-utils: 12.23.6
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  fresh@0.5.2: {}
+
+  fresh@2.0.0: {}
+
+  frimousse@0.3.0(react@19.2.8)(typescript@5.8.3):
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      typescript: 5.8.3
+
+  fs-extra@10.1.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-extra@11.3.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs-monkey@1.1.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.4.0: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.4
+      math-intrinsics: 1.1.0
+
+  get-nonce@1.0.1: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-size@2.0.3: {}
+
+  get-stream@6.0.1: {}
+
+  get-tsconfig@4.13.7:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-to-regexp@0.4.1: {}
+
+  glob@11.1.0:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 4.2.3
+      minimatch: 10.2.3
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 2.0.2
+
+  globrex@0.1.2: {}
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  has-flag@3.0.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hasown@2.0.4:
+    dependencies:
+      function-bind: 1.1.2
+
+  hast-util-embedded@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-is-element: 3.0.0
+
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.3
+      parse5: 7.3.0
+      vfile: 6.0.3
+      vfile-message: 4.0.3
+
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-has-property@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-is-body-ok-link@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-is-element@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-minify-whitespace@1.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-embedded: 3.0.0
+      hast-util-is-element: 3.0.0
+      hast-util-whitespace: 3.0.0
+      unist-util-is: 6.0.0
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-phrasing@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-embedded: 3.0.0
+      hast-util-has-property: 3.0.0
+      hast-util-is-body-ok-link: 3.0.1
+      hast-util-is-element: 3.0.0
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-to-jsx-runtime@2.3.6:
+    dependencies:
+      '@types/estree': 1.0.8
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  hast-util-to-mdast@10.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      hast-util-phrasing: 3.0.1
+      hast-util-to-html: 9.0.5
+      hast-util-to-text: 4.0.2
+      hast-util-whitespace: 3.0.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-hast: 13.2.1
+      mdast-util-to-string: 4.0.0
+      rehype-minify-whitespace: 6.0.2
+      trim-trailing-lines: 2.1.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+
+  hast-util-to-text@4.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      hast-util-is-element: 3.0.0
+      unist-util-find-after: 5.0.0
+
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast@1.0.0: {}
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+
+  he@1.2.0: {}
+
+  helmet@7.2.0: {}
+
+  hermes-estree@0.25.1: {}
+
+  hermes-parser@0.25.1:
+    dependencies:
+      hermes-estree: 0.25.1
+
+  highlight.js@11.11.1: {}
+
+  hookable@5.5.3: {}
+
+  hsl-to-hex@1.0.0:
+    dependencies:
+      hsl-to-rgb-for-reals: 1.1.1
+
+  hsl-to-rgb-for-reals@1.1.1: {}
+
+  html-entities@2.6.0: {}
+
+  html-escaper@2.0.2: {}
+
+  html-minifier-terser@6.1.0:
+    dependencies:
+      camel-case: 4.1.2
+      clean-css: 5.3.3
+      commander: 8.3.0
+      he: 1.2.0
+      param-case: 3.0.4
+      relateurl: 0.2.7
+      terser: 5.43.1
+
+  html-parse-stringify@3.0.1:
+    dependencies:
+      void-elements: 3.1.0
+
+  html-url-attributes@3.0.1: {}
+
+  html-void-elements@3.0.0: {}
+
+  html-webpack-plugin@5.6.4(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
+    dependencies:
+      '@types/html-minifier-terser': 6.1.0
+      html-minifier-terser: 6.1.0
+      lodash: 4.18.1
+      pretty-error: 4.0.0
+      tapable: 2.3.0
+    optionalDependencies:
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+
+  htmlparser2@12.0.0:
+    dependencies:
+      domelementtype: 3.0.0
+      domhandler: 6.0.1
+      domutils: 4.0.2
+      entities: 8.0.0
+
+  htmlparser2@6.1.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 4.3.1
+      domutils: 2.8.0
+      entities: 2.2.0
+
+  htmlparser2@8.0.2:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 4.5.0
+
+  http-errors@2.0.0:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.1
+      toidentifier: 1.0.1
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  https-proxy-agent@5.0.1:
+    dependencies:
+      agent-base: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  husky@9.1.7: {}
+
+  hyphen@1.6.6: {}
+
+  i18next-icu@2.4.3(intl-messageformat@10.7.16):
+    dependencies:
+      intl-messageformat: 10.7.16
+
+  i18next-resources-to-backend@1.2.1:
+    dependencies:
+      '@babel/runtime': 7.29.7
+
+  i18next@25.10.9(typescript@5.8.3):
+    dependencies:
+      '@babel/runtime': 7.29.7
+    optionalDependencies:
+      typescript: 5.8.3
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  icss-utils@5.1.0(postcss@8.5.25):
+    dependencies:
+      postcss: 8.5.25
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.2: {}
+
+  imagesloaded@4.1.4:
+    dependencies:
+      ev-emitter: 1.1.1
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  import-in-the-middle@3.0.1:
+    dependencies:
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
+      cjs-module-lexer: 2.2.0
+      module-details-from-path: 1.0.4
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@4.0.0: {}
+
+  inherits@2.0.4: {}
+
+  ini@1.3.8: {}
+
+  ini@7.0.0: {}
+
+  inline-style-parser@0.2.7: {}
+
+  internmap@2.0.3: {}
+
+  intl-messageformat@10.7.16:
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.3.4
+      '@formatjs/fast-memoize': 2.2.7
+      '@formatjs/icu-messageformat-parser': 2.11.2
+      tslib: 2.8.1
+
+  ioredis@4.30.1:
+    dependencies:
+      '@ioredis/commands': 1.3.0
+      cluster-key-slot: 1.1.2
+      debug: 4.4.3
+      denque: 1.5.1
+      lodash.defaults: 4.2.0
+      lodash.flatten: 4.4.0
+      lodash.isarguments: 3.1.0
+      p-map: 2.1.0
+      redis-errors: 1.2.0
+      redis-parser: 3.0.0
+      standard-as-callback: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  ioredis@5.7.0:
+    dependencies:
+      '@ioredis/commands': 1.3.0
+      cluster-key-slot: 1.1.2
+      debug: 4.4.3
+      denque: 2.1.0
+      lodash.defaults: 4.2.0
+      lodash.isarguments: 3.1.0
+      redis-errors: 1.2.0
+      redis-parser: 3.0.0
+      standard-as-callback: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  ipaddr.js@1.9.1: {}
+
+  is-alphabetical@2.0.1: {}
+
+  is-alphanumerical@2.0.1:
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+
+  is-arrayish@0.2.1: {}
+
+  is-arrayish@0.3.4: {}
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.4
+
+  is-decimal@2.0.1: {}
+
+  is-docker@2.2.1: {}
+
+  is-docker@3.0.0: {}
+
+  is-emoji-supported@0.0.5: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-fullwidth-code-point@5.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-hexadecimal@2.0.1: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-number@7.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-plain-object@2.0.4:
+    dependencies:
+      isobject: 3.0.1
+
+  is-plain-object@5.0.0: {}
+
+  is-port-reachable@4.0.0: {}
+
+  is-promise@4.0.0: {}
+
+  is-stream@2.0.1: {}
+
+  is-url@1.2.4: {}
+
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
+  isbot@5.2.1: {}
+
+  isexe@2.0.0: {}
+
+  isobject@3.0.1: {}
+
+  isomorphic.js@0.2.5: {}
+
+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-reports@3.2.0:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
+  jackspeak@4.2.3:
+    dependencies:
+      '@isaacs/cliui': 9.0.0
+
+  jay-peg@1.1.1:
+    dependencies:
+      restructure: 3.0.2
+
+  jest-worker@27.5.1:
+    dependencies:
+      '@types/node': 22.12.0
+      merge-stream: 2.0.0
+      supports-color: 8.1.1
+
+  jiti@2.7.0: {}
+
+  js-tokens@10.0.0: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.3.2:
+    dependencies:
+      argparse: 2.0.1
+
+  jscodeshift@17.3.0:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.29.7)
+      '@babel/preset-flow': 7.27.1(@babel/core@7.29.7)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/register': 7.28.3(@babel/core@7.29.7)
+      flow-parser: 0.293.0
+      graceful-fs: 4.2.11
+      micromatch: 4.0.8
+      neo-async: 2.6.2
+      picocolors: 1.1.1
+      recast: 0.23.11
+      tmp: 0.2.7
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.2: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json5@2.2.3: {}
+
+  jsonc-parser@3.3.1: {}
+
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  jsx-dom-cjs@8.1.6:
+    dependencies:
+      csstype: 3.2.3
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  kind-of@6.0.3: {}
+
+  kleur@3.0.3: {}
+
+  kleur@4.1.5: {}
+
+  kubernetes-types@1.30.0: {}
+
+  kuler@2.0.0: {}
+
+  launder@1.7.1:
+    dependencies:
+      dayjs: 1.11.23
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lib0@0.2.114:
+    dependencies:
+      isomorphic.js: 0.2.5
+
+  lightningcss-android-arm64@1.30.2:
+    optional: true
+
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.30.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.30.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.30.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.30.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.30.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.30.2:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
+  lilconfig@3.1.3: {}
+
+  linebreak@1.1.0:
+    dependencies:
+      base64-js: 0.0.8
+      unicode-trie: 2.0.0
+
+  lines-and-columns@1.2.4: {}
+
+  linkify-it@5.0.2:
+    dependencies:
+      uc.micro: 2.1.0
+
+  linkifyjs@4.3.2: {}
+
+  lint-staged@16.2.7:
+    dependencies:
+      commander: 14.0.2
+      listr2: 9.0.5
+      micromatch: 4.0.8
+      nano-spawn: 2.0.0
+      pidtree: 0.6.0
+      string-argv: 0.3.2
+      yaml: 2.8.3
+
+  listr2@9.0.5:
+    dependencies:
+      cli-truncate: 5.1.1
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.0
+
+  loader-runner@4.3.1: {}
+
+  locate-path@3.0.0:
+    dependencies:
+      p-locate: 3.0.0
+      path-exists: 3.0.0
+
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash-es@4.18.1: {}
+
+  lodash.debounce@4.0.8: {}
+
+  lodash.defaults@4.2.0: {}
+
+  lodash.flatten@4.4.0: {}
+
+  lodash.isarguments@3.1.0: {}
+
+  lodash@4.18.1: {}
+
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.0.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.2
+      strip-ansi: 7.1.2
+      wrap-ansi: 9.0.0
+
+  logform@2.7.0:
+    dependencies:
+      '@colors/colors': 1.6.0
+      '@types/triple-beam': 1.3.5
+      fecha: 4.2.3
+      ms: 2.1.3
+      safe-stable-stringify: 2.5.0
+      triple-beam: 1.4.1
+
+  longest-streak@3.1.0: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  loupe@3.2.1: {}
+
+  lower-case@2.0.2:
+    dependencies:
+      tslib: 2.8.1
+
+  lowlight@3.3.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      highlight.js: 11.11.1
+
+  lru-cache@11.5.0: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  lucide-react@0.469.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  lucide-react@1.34.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  lz-string@1.5.0: {}
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  magicast@0.5.3:
+    dependencies:
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      source-map-js: 1.2.1
+
+  make-dir@2.1.0:
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+
+  make-dir@3.1.0:
+    dependencies:
+      semver: 6.3.1
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.8.5
+
+  markdown-it-task-lists@2.1.1: {}
+
+  markdown-it@14.2.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.2
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
+  markdown-table@3.0.4: {}
+
+  masonry-layout@4.2.2:
+    dependencies:
+      get-size: 2.0.3
+      outlayer: 2.1.1
+
+  material-colors@1.2.6: {}
+
+  math-intrinsics@1.1.0: {}
+
+  mdast-util-find-and-replace@3.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
+  mdast-util-from-markdown@2.0.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-expression@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdx-jsx@3.2.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-mdxjs-esm@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  mdast@3.0.0: {}
+
+  mdn-data@2.0.14: {}
+
+  mdurl@2.0.0: {}
+
+  media-engine@2.0.0: {}
+
+  media-typer@0.3.0: {}
+
+  media-typer@1.1.1: {}
+
+  memfs@3.5.3:
+    dependencies:
+      fs-monkey: 1.1.0
+
+  merge-descriptors@1.0.3: {}
+
+  merge-descriptors@2.0.0: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  methods@1.1.2: {}
+
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.2.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-encode@2.0.1: {}
+
+  micromark-util-html-tag-name@2.0.1: {}
+
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-util-symbol@2.0.1: {}
+
+  micromark-util-types@2.0.2: {}
+
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.3
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.2
+
+  mime-db@1.33.0: {}
+
+  mime-db@1.52.0: {}
+
+  mime-db@1.54.0: {}
+
+  mime-types@2.1.18:
+    dependencies:
+      mime-db: 1.33.0
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  mime@1.6.0: {}
+
+  mime@3.0.0: {}
+
+  mimic-fn@2.1.0: {}
+
+  mimic-function@5.0.1: {}
+
+  min-indent@1.0.1: {}
+
+  minimatch@10.2.3:
+    dependencies:
+      brace-expansion: 5.0.9
+
+  minimatch@3.1.4:
+    dependencies:
+      brace-expansion: 5.0.9
+
+  minimist@1.2.8: {}
+
+  minipass@7.1.2: {}
+
+  mobx-react-lite@4.1.1(mobx@6.12.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      mobx: 6.12.0
+      react: 19.2.8
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      react-dom: 19.2.8(react@19.2.8)
+
+  mobx-react@9.2.2(mobx@6.12.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      mobx: 6.12.0
+      mobx-react-lite: 4.1.1(mobx@6.12.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      react-dom: 19.2.8(react@19.2.8)
+
+  mobx-utils@6.0.8(mobx@6.12.0):
+    dependencies:
+      mobx: 6.12.0
+
+  mobx@6.12.0: {}
+
+  module-details-from-path@1.0.4: {}
+
+  morgan@1.11.0:
+    dependencies:
+      basic-auth: 2.0.1
+      debug: 2.6.9
+      depd: 2.0.0
+      on-finished: 2.4.1
+      on-headers: 1.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  motion-dom@12.23.12:
+    dependencies:
+      motion-utils: 12.23.6
+
+  motion-utils@12.23.6: {}
+
+  ms@2.0.0: {}
+
+  ms@2.1.3: {}
+
+  msgpackr-extract@3.0.4:
+    dependencies:
+      node-gyp-build-optional-packages: 5.2.2
+    optionalDependencies:
+      '@msgpackr-extract/msgpackr-extract-darwin-arm64': 3.0.4
+      '@msgpackr-extract/msgpackr-extract-darwin-x64': 3.0.4
+      '@msgpackr-extract/msgpackr-extract-linux-arm': 3.0.4
+      '@msgpackr-extract/msgpackr-extract-linux-arm64': 3.0.4
+      '@msgpackr-extract/msgpackr-extract-linux-x64': 3.0.4
+      '@msgpackr-extract/msgpackr-extract-win32-x64': 3.0.4
+    optional: true
+
+  msgpackr@1.11.8:
+    optionalDependencies:
+      msgpackr-extract: 3.0.4
+
+  msgpackr@2.0.2:
+    optionalDependencies:
+      msgpackr-extract: 3.0.4
+
+  multipasta@0.2.7: {}
+
+  nano-spawn@2.0.0: {}
+
+  nanoid@3.3.18: {}
+
+  natural-compare@1.4.0: {}
+
+  negotiator@0.6.3: {}
+
+  negotiator@0.6.4: {}
+
+  negotiator@1.0.0: {}
+
+  neo-async@2.6.2: {}
+
+  next-themes@0.4.6(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  no-case@3.0.4:
+    dependencies:
+      lower-case: 2.0.2
+      tslib: 2.8.1
+
+  node-abort-controller@3.1.1: {}
+
+  node-addon-api@7.1.1: {}
+
+  node-gyp-build-optional-packages@5.2.2:
+    dependencies:
+      detect-libc: 2.1.2
+    optional: true
+
+  node-html-parser@6.1.13:
+    dependencies:
+      css-select: 5.2.2
+      he: 1.2.0
+
+  node-releases@2.0.54: {}
+
+  normalize-path@3.0.0: {}
+
+  normalize-range@0.1.2: {}
+
+  normalize-svg-path@1.1.0:
+    dependencies:
+      svg-arc-to-cubic-bezier: 3.2.0
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  objectorarray@1.0.5: {}
+
+  obug@2.1.1: {}
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  on-headers@1.1.0: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  one-time@1.0.0:
+    dependencies:
+      fn.name: 1.1.0
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@10.2.0:
+    dependencies:
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      wsl-utils: 0.1.0
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  orderedmap@2.1.1: {}
+
+  outlayer@2.1.1:
+    dependencies:
+      ev-emitter: 1.1.1
+      fizzy-ui-utils: 2.0.7
+      get-size: 2.0.3
+
+  oxc-parser@0.127.0:
+    dependencies:
+      '@oxc-project/types': 0.127.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.127.0
+      '@oxc-parser/binding-android-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-x64': 0.127.0
+      '@oxc-parser/binding-freebsd-x64': 0.127.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-musl': 0.127.0
+      '@oxc-parser/binding-openharmony-arm64': 0.127.0
+      '@oxc-parser/binding-wasm32-wasi': 0.127.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
+
+  oxc-parser@0.132.0:
+    dependencies:
+      '@oxc-project/types': 0.132.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.132.0
+      '@oxc-parser/binding-android-arm64': 0.132.0
+      '@oxc-parser/binding-darwin-arm64': 0.132.0
+      '@oxc-parser/binding-darwin-x64': 0.132.0
+      '@oxc-parser/binding-freebsd-x64': 0.132.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.132.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.132.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.132.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.132.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.132.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.132.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.132.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.132.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.132.0
+      '@oxc-parser/binding-linux-x64-musl': 0.132.0
+      '@oxc-parser/binding-openharmony-arm64': 0.132.0
+      '@oxc-parser/binding-wasm32-wasi': 0.132.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.132.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.132.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.132.0
+
+  oxc-resolver@11.20.0:
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.20.0
+      '@oxc-resolver/binding-android-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-x64': 11.20.0
+      '@oxc-resolver/binding-freebsd-x64': 11.20.0
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-musl': 11.20.0
+      '@oxc-resolver/binding-openharmony-arm64': 11.20.0
+      '@oxc-resolver/binding-wasm32-wasi': 11.20.0
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.20.0
+      '@oxc-resolver/binding-win32-x64-msvc': 11.20.0
+
+  oxfmt@0.35.0:
+    dependencies:
+      tinypool: 2.1.0
+    optionalDependencies:
+      '@oxfmt/binding-android-arm-eabi': 0.35.0
+      '@oxfmt/binding-android-arm64': 0.35.0
+      '@oxfmt/binding-darwin-arm64': 0.35.0
+      '@oxfmt/binding-darwin-x64': 0.35.0
+      '@oxfmt/binding-freebsd-x64': 0.35.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.35.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.35.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.35.0
+      '@oxfmt/binding-linux-arm64-musl': 0.35.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.35.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.35.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.35.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.35.0
+      '@oxfmt/binding-linux-x64-gnu': 0.35.0
+      '@oxfmt/binding-linux-x64-musl': 0.35.0
+      '@oxfmt/binding-openharmony-arm64': 0.35.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.35.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.35.0
+      '@oxfmt/binding-win32-x64-msvc': 0.35.0
+
+  oxlint-plugin-react-doctor@0.4.2:
+    dependencies:
+      '@typescript-eslint/types': 8.60.1
+      eslint-scope: 9.1.2
+      eslint-visitor-keys: 5.0.1
+      oxc-parser: 0.132.0
+
+  oxlint@1.51.0:
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.51.0
+      '@oxlint/binding-android-arm64': 1.51.0
+      '@oxlint/binding-darwin-arm64': 1.51.0
+      '@oxlint/binding-darwin-x64': 1.51.0
+      '@oxlint/binding-freebsd-x64': 1.51.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.51.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.51.0
+      '@oxlint/binding-linux-arm64-gnu': 1.51.0
+      '@oxlint/binding-linux-arm64-musl': 1.51.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.51.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.51.0
+      '@oxlint/binding-linux-riscv64-musl': 1.51.0
+      '@oxlint/binding-linux-s390x-gnu': 1.51.0
+      '@oxlint/binding-linux-x64-gnu': 1.51.0
+      '@oxlint/binding-linux-x64-musl': 1.51.0
+      '@oxlint/binding-openharmony-arm64': 1.51.0
+      '@oxlint/binding-win32-arm64-msvc': 1.51.0
+      '@oxlint/binding-win32-ia32-msvc': 1.51.0
+      '@oxlint/binding-win32-x64-msvc': 1.51.0
+
+  oxlint@1.68.0:
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.68.0
+      '@oxlint/binding-android-arm64': 1.68.0
+      '@oxlint/binding-darwin-arm64': 1.68.0
+      '@oxlint/binding-darwin-x64': 1.68.0
+      '@oxlint/binding-freebsd-x64': 1.68.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.68.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.68.0
+      '@oxlint/binding-linux-arm64-gnu': 1.68.0
+      '@oxlint/binding-linux-arm64-musl': 1.68.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.68.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.68.0
+      '@oxlint/binding-linux-riscv64-musl': 1.68.0
+      '@oxlint/binding-linux-s390x-gnu': 1.68.0
+      '@oxlint/binding-linux-x64-gnu': 1.68.0
+      '@oxlint/binding-linux-x64-musl': 1.68.0
+      '@oxlint/binding-openharmony-arm64': 1.68.0
+      '@oxlint/binding-win32-arm64-msvc': 1.68.0
+      '@oxlint/binding-win32-ia32-msvc': 1.68.0
+      '@oxlint/binding-win32-x64-msvc': 1.68.0
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@3.0.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-map@2.1.0: {}
+
+  p-map@7.0.6: {}
+
+  p-try@2.2.0: {}
+
+  package-json-from-dist@1.0.1: {}
+
+  pako@0.2.9: {}
+
+  param-case@3.0.4:
+    dependencies:
+      dot-case: 3.0.4
+      tslib: 2.8.1
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-entities@4.0.2:
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.2.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-srcset@1.0.2: {}
+
+  parse-svg-path@0.1.2: {}
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  parseurl@1.3.3: {}
+
+  pascal-case@3.1.2:
+    dependencies:
+      no-case: 3.0.4
+      tslib: 2.8.1
+
+  path-exists@3.0.0: {}
+
+  path-exists@4.0.0: {}
+
+  path-is-inside@1.0.2: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@2.0.2:
+    dependencies:
+      lru-cache: 11.5.0
+      minipass: 7.1.2
+
+  path-to-regexp@0.1.13: {}
+
+  path-to-regexp@8.4.2: {}
+
+  path-type@4.0.0: {}
+
+  pathe@2.0.3: {}
+
+  pathval@2.0.1: {}
+
+  pdf-parse@2.4.5:
+    dependencies:
+      '@napi-rs/canvas': 0.1.80
+      pdfjs-dist: 5.4.296
+
+  pdfjs-dist@5.4.296:
+    optionalDependencies:
+      '@napi-rs/canvas': 0.1.80
+
+  pdfkit@0.20.1:
+    dependencies:
+      '@noble/ciphers': 1.3.0
+      '@noble/hashes': 1.8.0
+      fflate: 0.8.3
+      fontkit: 2.0.4
+      linebreak: 1.1.0
+      png-js: 2.0.0
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.2: {}
+
+  pidtree@0.6.0: {}
+
+  pify@2.3.0: {}
+
+  pify@4.0.1: {}
+
+  pirates@4.0.7: {}
+
+  pkg-dir@3.0.0:
+    dependencies:
+      find-up: 3.0.0
+
+  pkg-dir@4.2.0:
+    dependencies:
+      find-up: 4.1.0
+
+  pkg-types@2.3.1:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
+  png-js@2.0.0:
+    dependencies:
+      fflate: 0.8.3
+
+  postcss-cli@11.0.1(jiti@2.7.0)(postcss@8.5.25)(tsx@4.20.6):
+    dependencies:
+      chokidar: 3.6.0
+      dependency-graph: 1.0.0
+      fs-extra: 11.3.1
+      picocolors: 1.1.1
+      postcss: 8.5.25
+      postcss-load-config: 5.1.0(jiti@2.7.0)(postcss@8.5.25)(tsx@4.20.6)
+      postcss-reporter: 7.1.0(postcss@8.5.25)
+      pretty-hrtime: 1.0.3
+      read-cache: 1.0.0
+      slash: 5.1.0
+      tinyglobby: 0.2.17
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - jiti
+      - tsx
+
+  postcss-load-config@5.1.0(jiti@2.7.0)(postcss@8.5.25)(tsx@4.20.6):
+    dependencies:
+      lilconfig: 3.1.3
+      yaml: 2.8.3
+    optionalDependencies:
+      jiti: 2.7.0
+      postcss: 8.5.25
+      tsx: 4.20.6
+
+  postcss-modules-extract-imports@3.1.0(postcss@8.5.25):
+    dependencies:
+      postcss: 8.5.25
+
+  postcss-modules-local-by-default@4.2.0(postcss@8.5.25):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.3
+      postcss-value-parser: 4.2.0
+
+  postcss-modules-scope@3.2.1(postcss@8.5.25):
+    dependencies:
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.3
+
+  postcss-modules-values@4.0.0(postcss@8.5.25):
+    dependencies:
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
+
+  postcss-nested@6.2.0(postcss@8.5.25):
+    dependencies:
+      postcss: 8.5.25
+      postcss-selector-parser: 6.1.2
+
+  postcss-reporter@7.1.0(postcss@8.5.25):
+    dependencies:
+      picocolors: 1.1.1
+      postcss: 8.5.25
+      thenby: 1.3.4
+
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-selector-parser@7.1.3:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.5.25:
+    dependencies:
+      nanoid: 3.3.18
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prettier@3.9.6: {}
+
+  pretty-error@4.0.0:
+    dependencies:
+      lodash: 4.18.1
+      renderkid: 3.0.0
+
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 19.2.8
+
+  pretty-hrtime@1.0.3: {}
+
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 19.2.8
+
+  property-information@7.1.0: {}
+
+  prosemirror-changeset@2.3.1:
+    dependencies:
+      prosemirror-transform: 1.10.4
+
+  prosemirror-codemark@0.4.2(prosemirror-inputrules@1.5.0)(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0):
+    dependencies:
+      prosemirror-inputrules: 1.5.0
+      prosemirror-model: 1.25.3
+      prosemirror-state: 1.4.3
+      prosemirror-view: 1.40.0
+
+  prosemirror-collab@1.3.1:
+    dependencies:
+      prosemirror-state: 1.4.3
+
+  prosemirror-commands@1.7.1:
+    dependencies:
+      prosemirror-model: 1.25.3
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.4
+
+  prosemirror-dropcursor@1.8.2:
+    dependencies:
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.4
+      prosemirror-view: 1.40.0
+
+  prosemirror-gapcursor@1.3.2:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.3
+      prosemirror-state: 1.4.3
+      prosemirror-view: 1.40.0
+
+  prosemirror-history@1.4.1:
+    dependencies:
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.4
+      prosemirror-view: 1.40.0
+      rope-sequence: 1.3.4
+
+  prosemirror-inputrules@1.5.0:
+    dependencies:
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.4
+
+  prosemirror-keymap@1.2.3:
+    dependencies:
+      prosemirror-state: 1.4.3
+      w3c-keyname: 2.2.8
+
+  prosemirror-markdown@1.13.2:
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      markdown-it: 14.2.0
+      prosemirror-model: 1.25.3
+
+  prosemirror-menu@1.2.5:
+    dependencies:
+      crelt: 1.0.6
+      prosemirror-commands: 1.7.1
+      prosemirror-history: 1.4.1
+      prosemirror-state: 1.4.3
+
+  prosemirror-model@1.25.3:
+    dependencies:
+      orderedmap: 2.1.1
+
+  prosemirror-schema-basic@1.2.4:
+    dependencies:
+      prosemirror-model: 1.25.3
+
+  prosemirror-schema-list@1.5.1:
+    dependencies:
+      prosemirror-model: 1.25.3
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.4
+
+  prosemirror-state@1.4.3:
+    dependencies:
+      prosemirror-model: 1.25.3
+      prosemirror-transform: 1.10.4
+      prosemirror-view: 1.40.0
+
+  prosemirror-tables@1.7.1:
+    dependencies:
+      prosemirror-keymap: 1.2.3
+      prosemirror-model: 1.25.3
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.4
+      prosemirror-view: 1.40.0
+
+  prosemirror-trailing-node@3.0.0(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0):
+    dependencies:
+      '@remirror/core-constants': 3.0.0
+      escape-string-regexp: 4.0.0
+      prosemirror-model: 1.25.3
+      prosemirror-state: 1.4.3
+      prosemirror-view: 1.40.0
+
+  prosemirror-transform@1.10.4:
+    dependencies:
+      prosemirror-model: 1.25.3
+
+  prosemirror-view@1.40.0:
+    dependencies:
+      prosemirror-model: 1.25.3
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.10.4
+
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  proxy-from-env@2.1.0: {}
+
+  punycode.js@2.3.1: {}
+
+  punycode@2.3.1: {}
+
+  pure-rand@6.1.0: {}
+
+  pure-rand@8.4.0: {}
+
+  qs@6.15.2:
+    dependencies:
+      side-channel: 1.1.0
+
+  quansync@1.0.0: {}
+
+  queue-microtask@1.2.3: {}
+
+  queue@6.0.2:
+    dependencies:
+      inherits: 2.0.4
+
+  raf-schd@4.0.3: {}
+
+  range-parser@1.2.0: {}
+
+  range-parser@1.2.1: {}
+
+  raw-body@2.5.3:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      unpipe: 1.0.0
+
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+
+  react-aria@3.51.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@internationalized/date': 3.12.3
+      '@internationalized/number': 3.6.7
+      '@internationalized/string': 3.2.10
+      '@react-types/shared': 3.36.1(react@19.2.8)
+      '@swc/helpers': 0.5.17
+      aria-hidden: 1.2.6
+      clsx: 2.1.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-stately: 3.49.0(react@19.2.8)
+      use-sync-external-store: 1.6.0(react@19.2.8)
+
+  react-color@2.19.3(patch_hash=311b81530f5338988f8b57718f24870a7550637159d8360d69f668cba2f2033f)(react@19.2.8):
+    dependencies:
+      '@icons/material': 0.2.4(react@19.2.8)
+      lodash: 4.18.1
+      lodash-es: 4.18.1
+      material-colors: 1.2.6
+      prop-types: 15.8.1
+      react: 19.2.8
+      reactcss: 1.2.3(react@19.2.8)
+      tinycolor2: 1.6.0
+
+  react-day-picker@10.0.1(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      '@date-fns/tz': 1.4.1
+      date-fns: 4.1.0
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-day-picker@9.5.0(react@19.2.8):
+    dependencies:
+      '@date-fns/tz': 1.4.1
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
+      react: 19.2.8
+
+  react-docgen-typescript@2.4.0(typescript@5.8.3):
+    dependencies:
+      typescript: 5.8.3
+
+  react-docgen@7.1.1:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.28.0
+      '@types/doctrine': 0.0.9
+      '@types/resolve': 1.20.6
+      doctrine: 3.0.0
+      resolve: 1.22.10
+      strip-indent: 4.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  react-docgen@8.0.3:
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/traverse': 7.29.7
+      '@babel/types': 7.29.7
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.28.0
+      '@types/doctrine': 0.0.9
+      '@types/resolve': 1.20.6
+      doctrine: 3.0.0
+      resolve: 1.22.10
+      strip-indent: 4.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  react-doctor@0.4.2(eslint@10.4.1(jiti@2.7.0)):
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@effect/platform-node-shared': 4.0.0-beta.70(effect@4.0.0-beta.70)
+      '@sentry/node': 10.56.0
+      agent-install: 0.0.5
+      conf: 15.1.0
+      confbox: 0.2.4
+      deslop-js: 0.0.21
+      effect: 4.0.0-beta.70
+      eslint-plugin-react-hooks: 7.1.1(eslint@10.4.1(jiti@2.7.0))
+      jiti: 2.7.0
+      magicast: 0.5.3
+      oxlint: 1.68.0
+      oxlint-plugin-react-doctor: 0.4.2
+      prompts: 2.4.2
+      typescript: 5.8.3
+      vscode-languageserver: 9.0.1
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.1.0
+    transitivePeerDependencies:
+      - '@opentelemetry/exporter-trace-otlp-http'
+      - bufferutil
+      - eslint
+      - oxlint-tsgolint
+      - supports-color
+      - utf-8-validate
+      - vite-plus
+
+  react-dom@19.2.8(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      scheduler: 0.27.0
+
+  react-dropzone@14.3.8(react@19.2.8):
+    dependencies:
+      attr-accept: 2.2.5
+      file-selector: 2.1.2
+      prop-types: 15.8.1
+      react: 19.2.8
+
+  react-fast-compare@3.2.2: {}
+
+  react-hook-form@7.84.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  react-i18next@16.6.6(i18next@25.10.9(typescript@5.8.3))(react@19.2.8)(typescript@5.8.3):
+    dependencies:
+      '@babel/runtime': 7.29.7
+      html-parse-stringify: 3.0.1
+      i18next: 25.10.9(typescript@5.8.3)
+      react: 19.2.8
+      use-sync-external-store: 1.6.0(react@19.2.8)
+    optionalDependencies:
+      typescript: 5.8.3
+
+  react-is@19.2.8: {}
+
+  react-markdown@10.1.0(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/react': 19.2.17
+      devlop: 1.1.0
+      hast-util-to-jsx-runtime: 2.3.6
+      html-url-attributes: 3.0.1
+      mdast-util-to-hast: 13.2.1
+      react: 19.2.8
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.2
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+    transitivePeerDependencies:
+      - supports-color
+
+  react-masonry-component@6.3.0(react@19.2.8):
+    dependencies:
+      create-react-class: 15.7.0
+      element-resize-detector: 1.2.4
+      imagesloaded: 4.1.4
+      lodash: 4.18.1
+      masonry-layout: 4.2.2
+      prop-types: 15.8.1
+      react: 19.2.8
+
+  react-pdf-html@2.1.3(@react-pdf/renderer@4.8.1(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@react-pdf/renderer': 4.8.1(react@19.2.8)
+      css-tree: 1.1.3
+      node-html-parser: 6.1.13
+      react: 19.2.8
+
+  react-popper@2.3.0(@popperjs/core@2.11.8)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@popperjs/core': 2.11.8
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-fast-compare: 3.2.2
+      warning: 4.0.3
+
+  react-refresh@0.18.0: {}
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-remove-scroll@2.7.1(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.17)(react@19.2.8)
+      react-style-singleton: 2.2.3(@types/react@19.2.17)(react@19.2.8)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.17)(react@19.2.8)
+      use-sidecar: 1.1.3(@types/react@19.2.17)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-router@8.3.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      cookie-es: 3.1.1
+      react: 19.2.8
+    optionalDependencies:
+      react-dom: 19.2.8(react@19.2.8)
+
+  react-smooth@4.0.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-transition-group: 4.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+
+  react-stately@3.49.0(react@19.2.8):
+    dependencies:
+      '@internationalized/date': 3.12.3
+      '@internationalized/number': 3.6.7
+      '@internationalized/string': 3.2.10
+      '@react-types/shared': 3.36.1(react@19.2.8)
+      '@swc/helpers': 0.5.17
+      react: 19.2.8
+      use-sync-external-store: 1.6.0(react@19.2.8)
+
+  react-style-singleton@2.2.3(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  react-transition-group@4.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@babel/runtime': 7.29.7
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  react@19.2.8: {}
+
+  reactcss@1.2.3(react@19.2.8):
+    dependencies:
+      lodash: 4.18.1
+      react: 19.2.8
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.2
+
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.18.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-is: 19.2.8
+      react-smooth: 4.0.4(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
+  redis-errors@1.2.0: {}
+
+  redis-parser@3.0.0:
+    dependencies:
+      redis-errors: 1.2.0
+
+  redlock@4.2.0:
+    dependencies:
+      bluebird: 3.7.2
+
+  reflect-metadata@0.2.2: {}
+
+  registry-auth-token@3.3.2:
+    dependencies:
+      rc: 1.2.8
+      safe-buffer: 5.2.1
+
+  registry-url@3.1.0:
+    dependencies:
+      rc: 1.2.8
+
+  rehype-minify-whitespace@6.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-minify-whitespace: 1.0.1
+
+  rehype-parse@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-html: 2.0.3
+      unified: 11.0.5
+
+  rehype-remark@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      hast-util-to-mdast: 10.1.2
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  relateurl@0.2.7: {}
+
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  remark-rehype@11.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
+  renderkid@3.0.0:
+    dependencies:
+      css-select: 4.3.0
+      dom-converter: 0.2.0
+      htmlparser2: 6.1.0
+      lodash: 4.18.1
+      strip-ansi: 6.0.1
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  require-in-the-middle@8.0.1:
+    dependencies:
+      debug: 4.4.3
+      module-details-from-path: 1.0.4
+    transitivePeerDependencies:
+      - supports-color
+
+  reselect@5.3.0: {}
+
+  resolve-from@4.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve@1.22.10:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  restructure@3.0.2: {}
+
+  reusify@1.1.0: {}
+
+  rfdc@1.4.1: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 11.1.0
+
+  rolldown-plugin-dts@0.17.8(oxc-resolver@11.20.0)(rolldown@1.0.0-beta.46(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3))(typescript@5.8.3):
+    dependencies:
+      '@babel/generator': 7.29.7
+      '@babel/parser': 7.29.7
+      '@babel/types': 7.29.7
+      ast-kit: 2.2.0
+      birpc: 2.9.0
+      dts-resolver: 2.1.3(oxc-resolver@11.20.0)
+      get-tsconfig: 4.13.7
+      magic-string: 0.30.21
+      obug: 2.1.1
+      rolldown: 1.0.0-beta.46(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - oxc-resolver
+
+  rolldown@1.0.0-beta.46(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3):
+    dependencies:
+      '@oxc-project/types': 0.96.0
+      '@rolldown/pluginutils': 1.0.0-beta.46
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.0-beta.46
+      '@rolldown/binding-darwin-arm64': 1.0.0-beta.46
+      '@rolldown/binding-darwin-x64': 1.0.0-beta.46
+      '@rolldown/binding-freebsd-x64': 1.0.0-beta.46
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.46
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.46
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.46
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.46
+      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.46
+      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.46
+      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.46(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.46
+      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.46
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.46
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+
+  rolldown@1.0.3:
+    dependencies:
+      '@oxc-project/types': 0.133.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm64': 1.0.3
+      '@rolldown/binding-darwin-arm64': 1.0.3
+      '@rolldown/binding-darwin-x64': 1.0.3
+      '@rolldown/binding-freebsd-x64': 1.0.3
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.3
+      '@rolldown/binding-linux-arm64-gnu': 1.0.3
+      '@rolldown/binding-linux-arm64-musl': 1.0.3
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.3
+      '@rolldown/binding-linux-s390x-gnu': 1.0.3
+      '@rolldown/binding-linux-x64-gnu': 1.0.3
+      '@rolldown/binding-linux-x64-musl': 1.0.3
+      '@rolldown/binding-openharmony-arm64': 1.0.3
+      '@rolldown/binding-wasm32-wasi': 1.0.3
+      '@rolldown/binding-win32-arm64-msvc': 1.0.3
+      '@rolldown/binding-win32-x64-msvc': 1.0.3
+
+  rope-sequence@1.3.4: {}
+
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.4.2
+    transitivePeerDependencies:
+      - supports-color
+
+  run-applescript@7.1.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  safe-buffer@5.1.2: {}
+
+  safe-buffer@5.2.1: {}
+
+  safe-stable-stringify@2.5.0: {}
+
+  safer-buffer@2.1.2: {}
+
+  sanitize-html@2.17.7:
+    dependencies:
+      deepmerge: 4.3.1
+      escape-string-regexp: 4.0.0
+      htmlparser2: 12.0.0
+      is-plain-object: 5.0.0
+      launder: 1.7.1
+      parse-srcset: 1.0.2
+      postcss: 8.5.25
+
+  scheduler@0.25.0-rc-603e6108-20241029: {}
+
+  scheduler@0.27.0: {}
+
+  schema-utils@3.3.0:
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 6.14.0
+      ajv-keywords: 3.5.2(ajv@6.14.0)
+
+  schema-utils@4.3.3:
+    dependencies:
+      '@types/json-schema': 7.0.15
+      ajv: 8.18.0
+      ajv-formats: 2.1.1(ajv@8.18.0)
+      ajv-keywords: 5.1.0(ajv@8.18.0)
+
+  scroll-into-view-if-needed@3.1.0:
+    dependencies:
+      compute-scroll-into-view: 3.1.1
+
+  semver@5.7.2: {}
+
+  semver@6.3.1: {}
+
+  semver@7.8.5: {}
+
+  send@0.19.0:
+    dependencies:
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 1.0.2
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 2.0.0
+      mime: 1.6.0
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-handler@6.1.6:
+    dependencies:
+      bytes: 3.0.0
+      content-disposition: 0.5.2
+      mime-types: 2.1.18
+      minimatch: 3.1.4
+      path-is-inside: 1.0.2
+      path-to-regexp: 0.1.13
+      range-parser: 1.2.0
+
+  serve-static@1.16.2:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 0.19.0
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  serve@14.2.5:
+    dependencies:
+      '@zeit/schemas': 2.36.0
+      ajv: 8.18.0
+      arg: 5.0.2
+      boxen: 7.0.0
+      chalk: 5.0.1
+      chalk-template: 0.4.0
+      clipboardy: 3.0.0
+      compression: 1.8.1
+      is-port-reachable: 4.0.0
+      serve-handler: 6.1.6
+      update-check: 1.5.4
+    transitivePeerDependencies:
+      - supports-color
+
+  setprototypeof@1.2.0: {}
+
+  shallow-clone@3.0.1:
+    dependencies:
+      kind-of: 6.0.3
+
+  sharp@0.35.4(@types/node@22.12.0):
+    dependencies:
+      '@img/colour': 1.1.0
+      detect-libc: 2.1.2
+      semver: 7.8.5
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.35.4
+      '@img/sharp-darwin-x64': 0.35.4
+      '@img/sharp-freebsd-wasm32': 0.35.4
+      '@img/sharp-libvips-darwin-arm64': 1.3.3
+      '@img/sharp-libvips-darwin-x64': 1.3.3
+      '@img/sharp-libvips-linux-arm': 1.3.3
+      '@img/sharp-libvips-linux-arm64': 1.3.3
+      '@img/sharp-libvips-linux-ppc64': 1.3.3
+      '@img/sharp-libvips-linux-riscv64': 1.3.3
+      '@img/sharp-libvips-linux-s390x': 1.3.3
+      '@img/sharp-libvips-linux-x64': 1.3.3
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.3
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.3
+      '@img/sharp-linux-arm': 0.35.4
+      '@img/sharp-linux-arm64': 0.35.4
+      '@img/sharp-linux-ppc64': 0.35.4
+      '@img/sharp-linux-riscv64': 0.35.4
+      '@img/sharp-linux-s390x': 0.35.4
+      '@img/sharp-linux-x64': 0.35.4
+      '@img/sharp-linuxmusl-arm64': 0.35.4
+      '@img/sharp-linuxmusl-x64': 0.35.4
+      '@img/sharp-webcontainers-wasm32': 0.35.4
+      '@img/sharp-win32-arm64': 0.35.4
+      '@img/sharp-win32-ia32': 0.35.4
+      '@img/sharp-win32-x64': 0.35.4
+      '@types/node': 22.12.0
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  siginfo@2.0.0: {}
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  simple-swizzle@0.2.4:
+    dependencies:
+      is-arrayish: 0.3.4
+
+  sisteransi@1.0.5: {}
+
+  slash@5.1.0: {}
+
+  slice-ansi@7.1.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
+
+  smooth-scroll-into-view-if-needed@2.0.2:
+    dependencies:
+      scroll-into-view-if-needed: 3.1.0
+
+  source-map-js@1.2.1: {}
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  space-separated-tokens@2.0.2: {}
+
+  stack-trace@0.0.10: {}
+
+  stackback@0.0.2: {}
+
+  standard-as-callback@2.1.0: {}
+
+  statuses@2.0.1: {}
+
+  statuses@2.0.2: {}
+
+  std-env@4.1.0: {}
+
+  storybook@10.4.6(@testing-library/dom@10.4.0)(@types/react@19.2.17)(prettier@3.9.6)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.0.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@testing-library/jest-dom': 6.9.1
+      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.0)
+      '@vitest/expect': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
+      esbuild: 0.28.1
+      open: 10.2.0
+      oxc-parser: 0.127.0
+      oxc-resolver: 11.20.0
+      recast: 0.23.11
+      semver: 7.8.5
+      use-sync-external-store: 1.6.0(react@19.2.8)
+      ws: 8.21.0
+    optionalDependencies:
+      '@types/react': 19.2.17
+      prettier: 3.9.6
+    transitivePeerDependencies:
+      - '@testing-library/dom'
+      - bufferutil
+      - react
+      - react-dom
+      - utf-8-validate
+
+  string-argv@0.3.2: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.5.0
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string-width@8.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.2:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-bom@3.0.0: {}
+
+  strip-final-newline@2.0.0: {}
+
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  strip-indent@4.1.0: {}
+
+  strip-json-comments@2.0.1: {}
+
+  strtok3@10.3.4:
+    dependencies:
+      '@tokenizer/token': 0.3.0
+
+  stubborn-fs@2.0.0:
+    dependencies:
+      stubborn-utils: 1.0.2
+
+  stubborn-utils@1.0.2: {}
+
+  style-loader@4.0.0(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
+    dependencies:
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+
+  style-to-js@1.1.21:
+    dependencies:
+      style-to-object: 1.0.14
+
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
+  supports-color@5.5.0:
+    dependencies:
+      has-flag: 3.0.0
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-color@8.1.1:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  svg-arc-to-cubic-bezier@3.2.0: {}
+
+  swc-loader@0.2.6(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
+    dependencies:
+      '@swc/core': 1.13.5(@swc/helpers@0.5.17)
+      '@swc/counter': 0.1.3
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+
+  swr@2.4.2(react@19.2.8):
+    dependencies:
+      dequal: 2.0.3
+      react: 19.2.8
+      use-sync-external-store: 1.6.0(react@19.2.8)
+
+  tabbable@6.2.0: {}
+
+  tagged-tag@1.0.0: {}
+
+  tailwind-merge@3.4.0: {}
+
+  tailwindcss@4.1.17: {}
+
+  tapable@2.3.0: {}
+
+  terser-webpack-plugin@5.6.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.43.1
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+    optionalDependencies:
+      '@swc/core': 1.13.5(@swc/helpers@0.5.17)
+      esbuild: 0.28.1
+      postcss: 8.5.25
+
+  terser-webpack-plugin@5.6.1(esbuild@0.28.1)(webpack@5.104.1(esbuild@0.28.1)):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.43.1
+      webpack: 5.104.1(esbuild@0.28.1)
+    optionalDependencies:
+      esbuild: 0.28.1
+    optional: true
+
+  terser@5.43.1:
+    dependencies:
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.16.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+
+  text-hex@1.0.0: {}
+
+  thenby@1.3.4: {}
+
+  tiny-inflate@1.0.3: {}
+
+  tiny-invariant@1.3.3: {}
+
+  tinybench@2.9.0: {}
+
+  tinycolor2@1.6.0: {}
+
+  tinyexec@1.0.4: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@2.3.2)
+      picomatch: 2.3.2
+
+  tinypool@2.1.0: {}
+
+  tinyrainbow@2.0.0: {}
+
+  tinyrainbow@3.1.0: {}
+
+  tinyspy@4.0.3: {}
+
+  tippy.js@6.3.7:
+    dependencies:
+      '@popperjs/core': 2.11.8
+
+  tiptap-markdown@0.8.10(@tiptap/core@2.26.3(@tiptap/pm@2.26.1)):
+    dependencies:
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@types/markdown-it': 13.0.9
+      markdown-it: 14.2.0
+      markdown-it-task-lists: 2.1.1
+      prosemirror-markdown: 1.13.2
+
+  tmp@0.2.7: {}
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  toidentifier@1.0.1: {}
+
+  token-types@6.1.1:
+    dependencies:
+      '@borewit/text-codec': 0.1.1
+      '@tokenizer/token': 0.3.0
+      ieee754: 1.2.1
+
+  toml@4.3.0: {}
+
+  tree-kill@1.2.2: {}
+
+  trim-lines@3.0.1: {}
+
+  trim-trailing-lines@2.1.0: {}
+
+  triple-beam@1.4.1: {}
+
+  trough@2.2.0: {}
+
+  ts-dedent@2.2.0: {}
+
+  tsconfck@3.1.6(typescript@5.8.3):
+    optionalDependencies:
+      typescript: 5.8.3
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tsdown@0.16.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)(oxc-resolver@11.20.0)(typescript@5.8.3):
+    dependencies:
+      ansis: 4.2.0
+      cac: 6.7.14
+      chokidar: 3.6.0
+      debug: 4.4.3
+      diff: 5.2.2
+      empathic: 2.0.0
+      hookable: 5.5.3
+      rolldown: 1.0.0-beta.46(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3)
+      rolldown-plugin-dts: 0.17.8(oxc-resolver@11.20.0)(rolldown@1.0.0-beta.46(@emnapi/core@1.10.0)(@emnapi/runtime@1.11.3))(typescript@5.8.3)
+      semver: 7.8.5
+      tinyexec: 1.0.4
+      tinyglobby: 0.2.17
+      tree-kill: 1.2.2
+      unconfig: 7.5.0
+    optionalDependencies:
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@ts-macro/tsc'
+      - '@typescript/native-preview'
+      - oxc-resolver
+      - supports-color
+      - vue-tsc
+
+  tslib@2.8.1: {}
+
+  tsx@4.20.6:
+    dependencies:
+      esbuild: 0.28.1
+      get-tsconfig: 4.13.7
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  turbo@2.10.11:
+    optionalDependencies:
+      '@turbo/darwin-64': 2.10.11
+      '@turbo/darwin-arm64': 2.10.11
+      '@turbo/linux-64': 2.10.11
+      '@turbo/linux-arm64': 2.10.11
+      '@turbo/windows-64': 2.10.11
+      '@turbo/windows-arm64': 2.10.11
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@2.19.0: {}
+
+  type-fest@5.7.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
+  type-is@1.6.18:
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+
+  type-is@2.1.0:
+    dependencies:
+      content-type: 2.0.0
+      media-typer: 1.1.1
+      mime-types: 3.0.2
+
+  typescript@5.8.3: {}
+
+  uc.micro@2.1.0: {}
+
+  uint8array-extras@1.5.0: {}
+
+  unconfig-core@7.5.0:
+    dependencies:
+      '@quansync/fs': 1.0.0
+      quansync: 1.0.0
+
+  unconfig@7.5.0:
+    dependencies:
+      '@quansync/fs': 1.0.0
+      defu: 6.1.5
+      jiti: 2.7.0
+      quansync: 1.0.0
+      unconfig-core: 7.5.0
+
+  undici-types@6.20.0: {}
+
+  undici@7.29.0: {}
+
+  unicode-properties@1.4.1:
+    dependencies:
+      base64-js: 1.5.1
+      unicode-trie: 2.0.0
+
+  unicode-trie@2.0.0:
+    dependencies:
+      pako: 0.2.9
+      tiny-inflate: 1.0.3
+
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-find-after@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-is@6.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
+  universalify@2.0.1: {}
+
+  unpipe@1.0.0: {}
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.16.0
+      picomatch: 2.3.2
+      webpack-virtual-modules: 0.6.2
+
+  update-browserslist-db@1.3.2(browserslist@4.28.9):
+    dependencies:
+      browserslist: 4.28.9
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  update-check@1.5.4:
+    dependencies:
+      registry-auth-token: 3.3.2
+      registry-url: 3.1.0
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  use-callback-ref@1.3.3(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  use-font-face-observer@1.3.0(react@19.2.8):
+    dependencies:
+      fontfaceobserver: 2.1.0
+      react: 19.2.8
+
+  use-sidecar@1.1.3(@types/react@19.2.17)(react@19.2.8):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.8
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.17
+
+  use-sync-external-store@1.6.0(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+
+  util-deprecate@1.0.2: {}
+
+  utila@0.4.0: {}
+
+  utils-merge@1.0.1: {}
+
+  uuid@14.0.0: {}
+
+  valibot@1.4.2(typescript@5.8.3):
+    optionalDependencies:
+      typescript: 5.8.3
+
+  vary@1.1.2: {}
+
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  vite-tsconfig-paths@5.1.4(typescript@5.8.3)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)):
+    dependencies:
+      debug: 4.4.3
+      globrex: 0.1.2
+      tsconfck: 3.1.6(typescript@5.8.3)
+    optionalDependencies:
+      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 2.3.2
+      postcss: 8.5.25
+      rolldown: 1.0.3
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 22.12.0
+      esbuild: 0.28.1
+      fsevents: 2.3.3
+      jiti: 2.7.0
+      terser: 5.43.1
+      tsx: 4.20.6
+      yaml: 2.8.3
+
+  vitest@4.1.8(@opentelemetry/api@1.9.1)(@types/node@22.12.0)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)):
+    dependencies:
+      '@vitest/expect': 4.1.8
+      '@vitest/mocker': 4.1.8(vite@8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3))
+      '@vitest/pretty-format': 4.1.8
+      '@vitest/runner': 4.1.8
+      '@vitest/snapshot': 4.1.8
+      '@vitest/spy': 4.1.8
+      '@vitest/utils': 4.1.8
+      es-module-lexer: 2.3.1
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 2.3.2
+      std-env: 4.1.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.4
+      tinyglobby: 0.2.17
+      tinyrainbow: 3.1.0
+      vite: 8.0.16(@types/node@22.12.0)(esbuild@0.28.1)(jiti@2.7.0)(terser@5.43.1)(tsx@4.20.6)(yaml@2.8.3)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.1
+      '@types/node': 22.12.0
+      '@vitest/coverage-v8': 4.1.8(vitest@4.1.8)
+    transitivePeerDependencies:
+      - msw
+
+  void-elements@3.1.0: {}
+
+  vscode-jsonrpc@8.2.0: {}
+
+  vscode-languageserver-protocol@3.17.5:
+    dependencies:
+      vscode-jsonrpc: 8.2.0
+      vscode-languageserver-types: 3.17.5
+
+  vscode-languageserver-textdocument@1.0.12: {}
+
+  vscode-languageserver-types@3.17.5: {}
+
+  vscode-languageserver@9.0.1:
+    dependencies:
+      vscode-languageserver-protocol: 3.17.5
+
+  vscode-uri@3.1.0: {}
+
+  w3c-keyname@2.2.8: {}
+
+  warning@4.0.3:
+    dependencies:
+      loose-envify: 1.4.0
+
+  watchpack@2.4.4:
+    dependencies:
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+
+  web-namespaces@2.0.1: {}
+
+  webpack-dev-middleware@6.1.3(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)):
+    dependencies:
+      colorette: 2.0.20
+      memfs: 3.5.3
+      mime-types: 2.1.35
+      range-parser: 1.2.1
+      schema-utils: 4.3.3
+    optionalDependencies:
+      webpack: 5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)
+
+  webpack-hot-middleware@2.26.1:
+    dependencies:
+      ansi-html-community: 0.0.8
+      html-entities: 2.6.0
+      strip-ansi: 6.0.1
+
+  webpack-sources@3.3.3: {}
+
+  webpack-virtual-modules@0.6.2: {}
+
+  webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.16.0
+      acorn-import-phases: 1.0.4(acorn@8.16.0)
+      browserslist: 4.28.9
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.18.3
+      es-module-lexer: 2.3.1
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.1
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.6.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25)(webpack@5.104.1(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.28.1)(postcss@8.5.25))
+      watchpack: 2.4.4
+      webpack-sources: 3.3.3
+    transitivePeerDependencies:
+      - '@minify-html/node'
+      - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
+      - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
+      - uglify-js
+
+  webpack@5.104.1(esbuild@0.28.1):
+    dependencies:
+      '@types/eslint-scope': 3.7.7
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.16.0
+      acorn-import-phases: 1.0.4(acorn@8.16.0)
+      browserslist: 4.28.9
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.18.3
+      es-module-lexer: 2.3.1
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.1
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 4.3.3
+      tapable: 2.3.0
+      terser-webpack-plugin: 5.6.1(esbuild@0.28.1)(webpack@5.104.1(esbuild@0.28.1))
+      watchpack: 2.4.4
+      webpack-sources: 3.3.3
+    transitivePeerDependencies:
+      - '@minify-html/node'
+      - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
+      - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
+      - uglify-js
+    optional: true
+
+  when-exit@2.1.5: {}
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  widest-line@4.0.1:
+    dependencies:
+      string-width: 5.1.2
+
+  winston-transport@4.9.0:
+    dependencies:
+      logform: 2.7.0
+      readable-stream: 3.6.2
+      triple-beam: 1.4.1
+
+  winston@3.17.0:
+    dependencies:
+      '@colors/colors': 1.6.0
+      '@dabh/diagnostics': 2.0.3
+      async: 3.2.6
+      is-stream: 2.0.1
+      logform: 2.7.0
+      one-time: 1.0.0
+      readable-stream: 3.6.2
+      safe-stable-stringify: 2.5.0
+      stack-trace: 0.0.10
+      triple-beam: 1.4.1
+      winston-transport: 4.9.0
+
+  word-wrap@1.2.5: {}
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
+  wrap-ansi@9.0.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
+  wrappy@1.0.2: {}
+
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+
+  ws@7.5.11: {}
+
+  ws@8.21.0: {}
+
+  wsl-utils@0.1.0:
+    dependencies:
+      is-wsl: 3.1.1
+
+  y-indexeddb@9.0.12(yjs@13.6.27):
+    dependencies:
+      lib0: 0.2.114
+      yjs: 13.6.27
+
+  y-prosemirror@1.3.7(prosemirror-model@1.25.3)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27):
+    dependencies:
+      lib0: 0.2.114
+      prosemirror-model: 1.25.3
+      prosemirror-state: 1.4.3
+      prosemirror-view: 1.40.0
+      y-protocols: 1.0.6(yjs@13.6.27)
+      yjs: 13.6.27
+
+  y-protocols@1.0.6(yjs@13.6.27):
+    dependencies:
+      lib0: 0.2.114
+      yjs: 13.6.27
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yaml@2.8.3: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yjs@13.6.27:
+    dependencies:
+      lib0: 0.2.114
+
+  yocto-queue@0.1.0: {}
+
+  yoga-layout@3.2.1: {}
+
+  zeed-dom@0.15.1:
+    dependencies:
+      css-what: 6.2.2
+      entities: 5.0.0
+
+  zod-validation-error@4.0.2(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod@3.25.76: {}
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..9e72042
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,313 @@
+packages:
+  - apps/*
+  - packages/*
+  - "!apps/api"
+  - "!apps/proxy"
+
+catalog:
+  "@atlaskit/pragmatic-drag-and-drop": "1.7.4"
+  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.4.0"
+  "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0"
+  "@base-ui-components/react": "1.0.0-beta.3"
+  "@bprogress/core": "^1.3.4"
+  "@chromatic-com/storybook": "5.2.1"
+  "@effect/platform": "^0.94.0"
+  "@effect/platform-node": "^0.104.0"
+  "@floating-ui/dom": "^1.7.1"
+  "@floating-ui/react": "^0.27.20"
+  "@fontsource-variable/inter": "5.2.8"
+  "@fontsource/ibm-plex-mono": "5.2.7"
+  "@fontsource/inter": "5.2.8"
+  "@fontsource/material-symbols-rounded": "5.2.30"
+  "@headlessui/react": "^2.2.10"
+  "@hocuspocus/extension-database": "2.15.2"
+  "@hocuspocus/extension-logger": "2.15.2"
+  "@hocuspocus/extension-redis": "2.15.2"
+  "@hocuspocus/provider": "2.15.2"
+  "@hocuspocus/server": "2.15.2"
+  "@hocuspocus/transformer": "2.15.2"
+  "@hypermod/utils": "^0.7.1"
+  "@makeplane/propel": "0.3.0"
+  "@popperjs/core": "^2.11.8"
+  "@radix-ui/react-scroll-area": "^1.2.3"
+  "@react-pdf/renderer": "^4.8.1"
+  "@react-pdf/types": "^2.13.1"
+  "@react-router/dev": "8.3.0"
+  "@react-router/node": "8.3.0"
+  "@react-router/serve": "8.3.0"
+  "@storybook/addon-designs": "11.1.3"
+  "@storybook/addon-docs": "10.4.6"
+  "@storybook/addon-links": "10.4.6"
+  "@storybook/addon-onboarding": "10.4.6"
+  "@storybook/addon-styling-webpack": "3.0.2"
+  "@storybook/addon-webpack5-compiler-swc": "4.0.3"
+  "@storybook/react": "10.4.6"
+  "@storybook/react-vite": "10.4.6"
+  "@storybook/react-webpack5": "10.4.6"
+  "@tailwindcss/postcss": "4.1.17"
+  "@tailwindcss/typography": "0.5.19"
+  "@tanstack/react-table": "^8.21.3"
+  "@tanstack/react-virtual": "^3.13.12"
+  "@tanstack/virtual-core": "^3.13.12"
+  "@tiptap/core": "^2.22.3"
+  "@tiptap/extension-blockquote": "^2.22.3"
+  "@tiptap/extension-character-count": "^2.22.3"
+  "@tiptap/extension-collaboration": "^2.22.3"
+  "@tiptap/extension-document": "^2.22.3"
+  "@tiptap/extension-emoji": "^2.22.3"
+  "@tiptap/extension-heading": "^2.22.3"
+  "@tiptap/extension-image": "^2.22.3"
+  "@tiptap/extension-list-item": "^2.22.3"
+  "@tiptap/extension-mention": "^2.22.3"
+  "@tiptap/extension-placeholder": "^2.22.3"
+  "@tiptap/extension-task-item": "^2.22.3"
+  "@tiptap/extension-task-list": "^2.22.3"
+  "@tiptap/extension-text": "^2.22.3"
+  "@tiptap/extension-text-align": "^2.22.3"
+  "@tiptap/extension-text-style": "^2.22.3"
+  "@tiptap/extension-underline": "^2.22.3"
+  "@tiptap/html": "^2.22.3"
+  "@tiptap/pm": "^2.22.3"
+  "@tiptap/react": "^2.22.3"
+  "@tiptap/starter-kit": "^2.22.3"
+  "@tiptap/suggestion": "^2.22.3"
+  "@types/chroma-js": "^3.1.2"
+  "@types/compression": "1.8.1"
+  "@types/cors": "^2.8.17"
+  "@types/express": "4.17.23"
+  "@types/express-ws": "^3.0.5"
+  "@types/hast": "^3.0.4"
+  "@types/jscodeshift": "^17.3.0"
+  "@types/lodash-es": "4.17.12"
+  "@types/mdast": "^4.0.4"
+  "@types/node": "22.12.0"
+  "@types/pdf-parse": "^1.1.5"
+  "@types/react": "19.2.17"
+  "@types/react-color": "^3.0.9"
+  "@types/react-dom": "19.2.3"
+  "@types/sanitize-html": "2.16.0"
+  "@types/ws": "^8.18.1"
+  "@vitest/coverage-v8": "^4.1.8"
+  "ast-types": "0.14.2"
+  "autoprefixer": "^10.4.19"
+  "axios": "1.18.1"
+  "buffer": "^6.0.3"
+  "chroma-js": "^3.2.0"
+  "class-variance-authority": "0.7.1"
+  "clsx": "^2.1.1"
+  "cmdk": "^1.1.1"
+  "comlink": "^4.4.1"
+  "compression": "1.8.1"
+  "cors": "^2.8.5"
+  "date-fns": "^4.1.0"
+  "dotenv": "16.4.7"
+  "effect": "3.20.0"
+  "emoji-picker-react": "^4.5.16"
+  "emoji-regex": "^10.3.0"
+  "export-to-csv": "^1.4.0"
+  "express": "4.22.0"
+  "express-winston": "^4.2.0"
+  "express-ws": "^5.0.2"
+  "file-type": "^21.3.1"
+  "framer-motion": "^12.23.0"
+  "frimousse": "^0.3.0"
+  "hast": "^1.0.0"
+  "hast-util-to-mdast": "^10.1.2"
+  "helmet": "^7.1.0"
+  "highlight.js": "^11.8.0"
+  "husky": "9.1.7"
+  "i18next": "25.10.9"
+  "i18next-icu": "2.4.3"
+  "i18next-resources-to-backend": "1.2.1"
+  "ioredis": "5.7.0"
+  "is-emoji-supported": "^0.0.5"
+  "isbot": "^5.1.31"
+  "jscodeshift": "^17.3.0"
+  "jsx-dom-cjs": "^8.0.3"
+  "linkifyjs": "^4.3.2"
+  "lint-staged": "16.2.7"
+  "lodash-es": "4.18.1"
+  "lowlight": "^3.0.0"
+  "lucide-react": "0.469.0"
+  "mdast": "^3.0.0"
+  "mobx": "6.12.0"
+  "mobx-react": "9.2.2"
+  "mobx-utils": "6.0.8"
+  "next-themes": "0.4.6"
+  "oxfmt": "0.35.0"
+  "oxlint": "1.51.0"
+  "pdf-parse": "^2.4.5"
+  "postcss": "8.5.25"
+  "postcss-cli": "^11.0.0"
+  "postcss-nested": "^6.0.1"
+  "prosemirror-codemark": "^0.4.2"
+  "react": "19.2.8"
+  "react-color": "^2.19.3"
+  "react-day-picker": "9.5.0"
+  "react-dom": "19.2.8"
+  "react-dropzone": "^14.2.3"
+  "react-fast-compare": "^3.2.2"
+  "react-hook-form": "^7.84.0"
+  "react-i18next": "16.6.6"
+  "react-is": "^19.2.8"
+  "react-markdown": "^10.1.0"
+  "react-masonry-component": "^6.3.0"
+  "react-pdf-html": "^2.1.2"
+  "react-popper": "^2.3.0"
+  "react-router": "8.3.0"
+  "recharts": "^2.15.4"
+  "reflect-metadata": "^0.2.2"
+  "rehype-parse": "^9.0.1"
+  "rehype-remark": "^10.0.1"
+  "remark-gfm": "^4.0.1"
+  "remark-stringify": "^11.0.0"
+  "sanitize-html": "2.17.7"
+  "serve": "14.2.5"
+  "sharp": "^0.35.4"
+  "smooth-scroll-into-view-if-needed": "^2.0.2"
+  "storybook": "10.4.6"
+  "swr": "2.4.2"
+  "tailwind-merge": "3.4.0"
+  "tailwindcss": "4.1.17"
+  "tippy.js": "^6.3.7"
+  "tiptap-markdown": "^0.8.10"
+  "tsdown": "0.16.0"
+  "tsx": "4.20.6"
+  "turbo": "2.10.11"
+  "typescript": "5.8.3"
+  "unified": "^11.0.5"
+  "use-font-face-observer": "^1.3.0"
+  "uuid": "14.0.0"
+  "vite": "8.0.16"
+  "vite-tsconfig-paths": "^5.1.4"
+  "vitest": "^4.1.8"
+  "winston": "^3.17.0"
+  "ws": "8.21.0"
+  "y-indexeddb": "^9.0.12"
+  "y-prosemirror": "^1.3.7"
+  "y-protocols": "^1.0.6"
+  "yjs": "^13.6.20"
+  "zod": "^3.25.76"
+
+overrides:
+  # Force a single React across the whole graph. With node-linker=isolated,
+  # auto-install-peers and resolution-mode=highest, a dependency still declaring a
+  # React 18 peer can otherwise pull in a second copy, which surfaces as an invalid
+  # hook call rather than as an install error. The vite `resolve.dedupe` entries only
+  # cover the three app client bundles, not the SSR build, the tsdown package builds
+  # or Storybook.
+  react: "catalog:"
+  react-dom: "catalog:"
+  react-is: "catalog:"
+  "@types/react": "catalog:"
+  "@types/react-dom": "catalog:"
+  express: "catalog:"
+  # @react-router/serve v8 needs Express 5 — it mounts with the Express 5 path syntax
+  # `app.all("/{*splat}")`, which Express 4 silently fails to match, 404ing every route.
+  # The catalog stays on Express 4 for apps/live, which depends on express-ws (Express 4 only).
+  "@react-router/serve>express": "^5.2.1"
+  mdast-util-to-hast: 13.2.1
+  valibot: 1.4.2
+  glob: 11.1.0
+  # brace-expansion <5.0.9 has two DoS advisories (GHSA-mh99-v99m-4gvg, GHSA-rgw5-rvv9-x895,
+  # the second bypasses the first's mitigation) reachable via serve>serve-handler>minimatch.
+  brace-expansion: 5.0.9
+  nanoid: 3.3.18
+  esbuild: 0.28.1
+  "@babel/core": 7.29.7
+  "@babel/helpers": 7.29.7
+  "@babel/runtime": 7.29.7
+  chokidar: 3.6.0
+  prosemirror-view: 1.40.0
+  "@types/express": 4.17.23
+  typescript: "catalog:"
+  vite: "catalog:"
+  qs: 6.15.2
+  diff: 5.2.2
+  webpack: 5.104.1
+  lodash-es: "catalog:"
+  lodash: 4.18.1
+  markdown-it: 14.2.0
+  rollup: 4.59.0
+  "minimatch@3": 3.1.4
+  "minimatch@10": 10.2.3
+  serialize-javascript: 7.0.5
+  "ajv@6": 6.14.0
+  "ajv@8": 8.18.0
+  "undici@7": 7.29.0
+  flatted: 3.4.2
+  picomatch: 2.3.2
+  "yaml@1": 1.10.3
+  "yaml@2": 2.8.3
+  # Pinned for Express 4 (apps/live), which needs path-to-regexp ~0.1.12.
+  path-to-regexp: 0.1.13
+  # Express 5's router needs path-to-regexp 8; the pin above would otherwise reach it
+  # and break route matching at startup with `pathRegexp.match is not a function`.
+  "router>path-to-regexp": "^8.4.2"
+  defu: 6.1.5
+  postcss: 8.5.25
+  "postcss-selector-parser@>=7.1.0 <7.1.3": "7.1.3"
+  axios: "catalog:"
+  follow-redirects: 1.16.0
+  uuid: "catalog:"
+  # SSRF / host-confusion in the URI parser (percent-decoding, IDN
+  # canonicalization and IPv6 normalization): CVE-2026-75899, -75931, -75975 and
+  # -76172, all fixed in 3.1.6. The previous floor pinned 3.1.5, which is the
+  # affected version. fast-uri reaches us only through ajv, so stay on the
+  # patched 3.x rather than 4.x, which is outside ajv's ^3.0.1 range.
+  fast-uri: 3.1.6
+  "js-yaml@4": 4.3.2
+  linkify-it: 5.0.2
+  body-parser: 1.20.6
+  tmp: 0.2.7
+  form-data: 4.0.6
+  "ws@8": 8.21.0
+  "ws@7": 7.5.11
+  "@opentelemetry/core": 2.8.0
+  "@opentelemetry/resources": 2.8.0
+  "@opentelemetry/sdk-trace-base": 2.8.0
+  morgan: 1.11.0
+  # Prototype pollution and unbounded query-cache growth, both reachable as DoS
+  # (CVE-2026-73088 / CVE-2026-73089). browserslist is build tooling only
+  # (babel/postcss/vite), but the runtime images copy node_modules wholesale, so
+  # it lands in the scanned surface.
+  browserslist: ">=4.28.7"
+  # CVE-2026-63376 (prototype-pollution -> arbitrary code execution in the TOML
+  # parser, fixed 4.1.2) and CVE-2026-77465 (DoS via uncontrolled recursion,
+  # fixed 4.2.0). toml reaches us only transitively and its parent's range
+  # already allows the fix -- the lockfile simply predates both. Hold below
+  # 5.0.0, which is outside that range.
+  toml: ">=4.2.0 <5"
+
+allowBuilds:
+  "@parcel/watcher": true
+  "@swc/core": true
+  esbuild: true
+  msgpackr-extract: true
+  turbo: true
+  sharp: false
+
+minimumReleaseAgeExclude:
+  - "@storybook/addon-docs@10.4.6"
+  - "@storybook/builder-vite@10.4.6"
+  - "@storybook/csf-plugin@10.4.6"
+  - "@storybook/react-dom-shim@10.4.6"
+  - "@storybook/react-vite@10.4.6"
+  - "@storybook/react@10.4.6"
+  - storybook@10.4.6
+  - "@makeplane/propel@0.3.0"
+
+patchedDependencies:
+  react-color@2.19.3: patches/react-color@2.19.3.patch
+
+peerDependencyRules:
+  allowedVersions:
+    # react-popper 2.3.0 is unmaintained and its peer range stops at React 18, but it
+    # only uses hooks — no findDOMNode, no string refs, no element.ref reads and no
+    # defaultProps on function components — so it runs unchanged on React 19. All 32
+    # call sites import usePopper only. Recorded here so the acceptance is explicit
+    # rather than hidden behind the global strict-peer-dependencies=false.
+    "react-popper>react": "19"
+    # Same situation: peer range predates React 19, uses nothing React 19 removed.
+    "react-masonry-component>react": "19"
+    "use-font-face-observer>react": "19"
diff --git a/setup.sh b/setup.sh
new file mode 100755
index 0000000..12fccea
--- /dev/null
+++ b/setup.sh
@@ -0,0 +1,97 @@
+#!/bin/bash
+
+# Plane Project Setup Script
+# This script prepares the local development environment by setting up all necessary .env files
+# https://github.com/makeplane/plane
+
+# Set colors for output messages
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+BOLD='\033[1m'
+NC='\033[0m' # No Color
+
+# Print header
+echo -e "${BOLD}${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${BOLD}${BLUE}                   Plane - Project Management Tool                    ${NC}"
+echo -e "${BOLD}${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+echo -e "${BOLD}Setting up your development environment...${NC}\n"
+
+# Function to handle file copying with error checking
+copy_env_file() {
+    local source=$1
+    local destination=$2
+
+    if [ ! -f "$source" ]; then
+        echo -e "${RED}Error: Source file $source does not exist.${NC}"
+        return 1
+    fi
+
+    cp "$source" "$destination"
+
+    if [ $? -eq 0 ]; then
+        echo -e "${GREEN}✓${NC} Copied $destination"
+    else
+        echo -e "${RED}✗${NC} Failed to copy $destination"
+        return 1
+    fi
+}
+
+# Export character encoding settings for macOS compatibility
+export LC_ALL=C
+export LC_CTYPE=C
+echo -e "${YELLOW}Setting up environment files...${NC}"
+
+# Copy all environment example files
+services=("" "web" "api" "space" "admin" "live")
+success=true
+
+for service in "${services[@]}"; do
+    if [ "$service" == "" ]; then
+        # Handle root .env file
+        prefix="./"
+    else
+        # Handle service .env files in apps folder
+        prefix="./apps/$service/"
+    fi
+
+    copy_env_file "${prefix}.env.example" "${prefix}.env" || success=false
+done
+
+# Generate SECRET_KEY for Django
+if [ -f "./apps/api/.env" ]; then
+    echo -e "\n${YELLOW}Generating Django SECRET_KEY...${NC}"
+    SECRET_KEY=$(tr -dc 'a-z0-9' < /dev/urandom | head -c50)
+
+    if [ -z "$SECRET_KEY" ]; then
+        echo -e "${RED}Error: Failed to generate SECRET_KEY.${NC}"
+        echo -e "${RED}Ensure 'tr' and 'head' commands are available on your system.${NC}"
+        success=false
+    else
+        echo -e "SECRET_KEY=\"$SECRET_KEY\"" >> ./apps/api/.env
+        echo -e "${GREEN}✓${NC} Added SECRET_KEY to apps/api/.env"
+    fi
+else
+    echo -e "${RED}✗${NC} apps/api/.env not found. SECRET_KEY not added."
+    success=false
+fi
+
+# Activate pnpm (version set in package.json)
+corepack enable pnpm || success=false
+# Install Node dependencies
+pnpm install || success=false
+
+# Summary
+echo -e "\n${YELLOW}Setup status:${NC}"
+if [ "$success" = true ]; then
+    echo -e "${GREEN}✓${NC} Environment setup completed successfully!\n"
+    echo -e "${BOLD}Next steps:${NC}"
+    echo -e "1. Review the .env files in each folder if needed"
+    echo -e "2. Start the services with: ${BOLD}docker compose -f docker-compose-local.yml up -d${NC}"
+    echo -e "\n${GREEN}Happy coding! 🚀${NC}"
+else
+    echo -e "${RED}✗${NC} Some issues occurred during setup. Please check the errors above.\n"
+    echo -e "For help, visit: ${BLUE}https://github.com/makeplane/plane${NC}"
+    exit 1
+fi
diff --git a/turbo.json b/turbo.json
new file mode 100644
index 0000000..7d1e34f
--- /dev/null
+++ b/turbo.json
@@ -0,0 +1,91 @@
+{
+  "$schema": "https://v2-8-12.turborepo.dev/schema.json",
+  "globalDependencies": [".npmrc", ".oxfmtrc.json", ".oxlintrc.json"],
+  "globalEnv": [
+    "APP_VERSION",
+    "DEV",
+    "LOG_LEVEL",
+    "NODE_ENV",
+    "SENTRY_DSN",
+    "SENTRY_ENVIRONMENT",
+    "SENTRY_TRACES_SAMPLE_RATE",
+    "VITE_ADMIN_BASE_PATH",
+    "VITE_ADMIN_BASE_URL",
+    "VITE_API_BASE_PATH",
+    "VITE_API_BASE_URL",
+    "VITE_APP_VERSION",
+    "VITE_LIVE_BASE_PATH",
+    "VITE_LIVE_BASE_URL",
+    "VITE_SENTRY_DSN",
+    "VITE_SENTRY_ENVIRONMENT",
+    "VITE_SENTRY_PROFILES_SAMPLE_RATE",
+    "VITE_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE",
+    "VITE_SENTRY_REPLAYS_SESSION_SAMPLE_RATE",
+    "VITE_SENTRY_SEND_DEFAULT_PII",
+    "VITE_SENTRY_TRACES_SAMPLE_RATE",
+    "VITE_SPACE_BASE_PATH",
+    "VITE_SPACE_BASE_URL",
+    "VITE_SUPPORT_EMAIL",
+    "VITE_WEB_BASE_PATH",
+    "VITE_WEB_BASE_URL",
+    "VITE_WEBSITE_URL"
+  ],
+  "remoteCache": {
+    "enabled": false
+  },
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": ["dist/**", "build/**", ".react-router/**"]
+    },
+    "build-storybook": {
+      "dependsOn": ["^build"],
+      "outputs": ["storybook-static/**"]
+    },
+    "check": {
+      "dependsOn": ["check:format", "check:lint", "check:types"]
+    },
+    "check:format": {
+      "inputs": ["$TURBO_DEFAULT$"],
+      "outputs": []
+    },
+    "check:lint": {
+      "inputs": ["$TURBO_DEFAULT$", "!**/*.md"],
+      "outputs": []
+    },
+    "check:types": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", "!**/*.md"],
+      "outputs": []
+    },
+    "clean": {
+      "cache": false
+    },
+    "dev": {
+      "cache": false,
+      "dependsOn": ["^build"],
+      "persistent": true
+    },
+    "fix": {
+      "cache": false,
+      "dependsOn": ["fix:format", "fix:lint"]
+    },
+    "fix:format": {
+      "inputs": ["$TURBO_DEFAULT$"],
+      "outputs": []
+    },
+    "fix:lint": {
+      "inputs": ["$TURBO_DEFAULT$", "!**/*.md"],
+      "outputs": []
+    },
+    "start": {
+      "cache": false,
+      "persistent": true
+    },
+    "test": {
+      "dependsOn": ["^build"],
+      "outputs": []
+    }
+  }
+}

CSRF Verification Failed

+ Reset your Plane password +

+ Your login code for Plane +

+ Your Plane Analytics export is ready +

+ Join {{workspace_name}} on Plane +

+ You've been invited to the {{project_name}} project on Plane +

+ Plane email address + successfully updated +

Plane Space

Yikes! That doesn{"'"}t look good.

That didn{"'"}t work

Nice! Just one more step.

Unable to fetch instance details.

Oops! Something went wrong.

+ {currentUser?.display_name || + `${currentUser?.first_name} ${currentUser?.first_name}` || + currentUser?.email || + "User"} +

Comments

+ {project_details?.identifier}-{issueDetails?.sequence_id} +

{issueDetails.name}

+ {project_details?.identifier}-{issueDetails.sequence_id} +

Oops! Something went wrong.

{t("profile.stats.recent_activity.title")}

Page not found

{t("integrations.integrations")}

+ {t("workspace_settings.settings.members.title")} + {workspaceMemberIds && workspaceMemberIds.length > 0 && ( + + )} +

{t("workspace_creation.heading")}

{t("we_see_that_someone_has_invited_you_to_join_a_workspace")}

{t("join_a_workspace")}

INVITATION NOT FOUND

+ {error.status} {error.statusText} +

Error Data

Error

Message

Stack Trace

Unknown Error

🚧 Looks like something went wrong!

Oops! Something went wrong.

{t("deactivate_your_account")}

{t("on_demand_snapshots_of_all_your_cycles")}

{t(item.key)}

{title}

{t(i18nTitle)}

{title}

+ Analytics for {title} {cycle && `in ${cycle.name}`} {module && `in ${module.name}`} +

No API tokens

+ {t("workspace_settings.settings.api_tokens.create_token")} +